html{-webkit-text-size-adjust:100%}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Layout: left-aligned, one column of calm. Large type, thin rules, wide margins. The only visual gesture is the fanned sheet stack in the hero, echoing the pages in the logo. Single light theme by choice. */
:root{
  --bg:#FAFAF8;        /* off-white sheet */
  --ink:#1B1B1B;       /* logo charcoal */
  --grey:#6F7073;      /* logo grey */
  --soft:#EFEEEA;      /* panel */
  --rule:#DEDDD8;
  --accent:#9A7B52;    /* kraft, used sparingly */
  --font:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(72px,11vw,136px);
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(2.6rem,7vw,5.2rem)}
h2{font-size:clamp(1.9rem,4.2vw,3.1rem)}
h3{font-size:1.25rem;letter-spacing:-.01em;line-height:1.3}
p{margin:0;max-width:52ch;color:var(--grey)}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:32px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand img{height:40px;width:auto;display:block}
.brand span{font-size:.82rem;letter-spacing:.22em;font-weight:600;line-height:1.3}
.brand span i{font-style:normal;color:var(--grey)}
nav{display:flex;gap:30px}
nav a{text-decoration:none;font-size:.96rem;color:var(--grey);padding-block:6px;transition:color .2s}
nav a:hover,nav a[aria-current="page"]{color:var(--ink)}
.menu{display:none;background:none;border:0;font:inherit;font-size:.96rem;padding:8px 0;cursor:pointer;color:var(--ink)}

.btn{display:inline-block;background:var(--ink);color:var(--bg);text-decoration:none;font:inherit;font-weight:500;font-size:1rem;padding:15px 28px;border:1px solid var(--ink);border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.sm{padding:10px 20px;font-size:.94rem}
.link{text-decoration:none;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:3px;transition:border-color .2s,color .2s}
.link:hover{color:var(--accent);border-color:var(--accent)}
.actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}

main{animation:in .5s ease both}
@keyframes in{from{opacity:.4}to{opacity:1}}
.sec{padding-block:var(--pad)}
.sec.rule{border-top:1px solid var(--rule)}
.col{display:flex;flex-direction:column;gap:28px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:56px}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,88px);align-items:center;padding-block:clamp(56px,9vw,120px)}
.hero>*{min-width:0}
.sheets{position:relative;aspect-ratio:4/5;max-width:100%;background:var(--soft);overflow:hidden}
.sheets i{position:absolute;left:18%;top:16%;width:64%;height:68%;background:#fff;box-shadow:0 1px 2px rgba(27,27,27,.08),0 18px 40px -18px rgba(27,27,27,.25);transform-origin:20% 100%}
.sheets i:nth-child(1){background:var(--accent);transform:rotate(-13deg)}
.sheets i:nth-child(2){background:#C9C9C7;transform:rotate(-9deg)}
.sheets i:nth-child(3){background:#ECE8DC;transform:rotate(-5.5deg)}
.sheets i:nth-child(4){background:#F6F6F4;transform:rotate(-2.5deg)}
.sheets i:nth-child(5){transform:rotate(0)}

/* products */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px 32px}
.card{display:flex;flex-direction:column;gap:10px;text-decoration:none;min-width:0}
.swatch{aspect-ratio:4/3;margin-bottom:12px;background-color:var(--t);background-image:repeating-linear-gradient(0deg,transparent 0 7px,rgba(27,27,27,.07) 7px 8px);background-size:100% 38%;background-repeat:no-repeat;background-position:bottom;transition:transform .35s ease}
.card:hover .swatch{transform:translateY(-6px)}
.card p{font-size:.98rem}
.card .link{align-self:flex-start;margin-top:6px;font-size:.95rem}

/* rows */
.rows{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;padding-block:28px;border-bottom:1px solid var(--rule);align-items:baseline}
.row>*{min-width:0}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.three>div{border-top:1px solid var(--ink);padding-top:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.big{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--ink);max-width:24ch}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,88px);align-items:start}
.two>*{min-width:0}
ul.uses{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
ul.uses li{padding-block:14px;border-bottom:1px solid var(--rule)}
.crumb{font-size:.92rem;color:var(--grey);text-decoration:none}
.crumb:hover{color:var(--ink)}
dl{margin:0;display:flex;flex-direction:column;gap:22px}
dt{font-size:.88rem;color:var(--grey);margin-bottom:2px}
dd{margin:0;font-size:1.08rem}
dd a{text-decoration:none;border-bottom:1px solid var(--rule)}

form{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
form .full{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--grey);min-width:0}
input,select,textarea{font:inherit;font-size:1.05rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid #B9B8B3;border-radius:0;padding:8px 0;width:100%}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--ink)}
.err{color:#8A2B1D;font-size:.95rem}
.ready{border-top:1px solid var(--ink);padding-top:24px;display:flex;flex-direction:column;gap:18px}
pre{margin:0;white-space:pre-wrap;font:inherit;color:var(--grey)}

footer{border-top:1px solid var(--rule);padding-block:64px 40px}
.foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.foot img{width:150px;height:auto;display:block}
.foot p,.foot a{font-size:.95rem;color:var(--grey);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot div{display:flex;flex-direction:column;gap:6px;min-width:0}
.fine{margin-top:56px;font-size:.85rem;color:var(--grey)}
.mbar{display:none}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:900px){
  .hero,.two{grid-template-columns:1fr}
  .sheets{aspect-ratio:5/4}
  .sheets i{left:26%;width:48%;top:12%;height:74%}
  .grid{grid-template-columns:1fr 1fr}
  .three{grid-template-columns:1fr;gap:28px}
}
@media (max-width:760px){
  body{padding-bottom:64px}
  .bar{gap:16px;min-height:64px;flex-wrap:wrap}
  .bar .btn{display:none}
  .menu{display:block}
  nav{display:none;flex-basis:100%;flex-direction:column;gap:0;padding-bottom:14px}
  nav.open{display:flex}
  nav a{padding-block:12px;font-size:1.15rem;color:var(--ink);border-top:1px solid var(--rule)}
  .brand img{height:34px}
  .row{grid-template-columns:1fr;gap:6px;padding-block:22px}
  .head{margin-bottom:36px}
  form{grid-template-columns:1fr}
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px)}
  .mbar a{text-align:center;padding:18px 8px;text-decoration:none;font-weight:500}
  .mbar a+a{background:var(--ink);color:var(--bg)}
}
@media (max-width:520px){.grid{grid-template-columns:1fr;gap:48px}}