/* anno — one homepage, one ground, quiet register.
   Calibrated against Aesop, Smythson, Kinfolk, Mytheresa and Artifact Uprising (2026-09-24 research):
   - largest type on the page is 44px, section headings 28px, body 15px/1.5
   - one background colour for the whole site; exactly one saturated full-bleed section (pine)
   - buttons: no radius, 13px, uppercase at 6% tracking — one register, committed
   - section rhythm in three steps only: 120 / 60 / 30
   - the seven product colours appear as swatches and photography, never as section grounds */

:root{
  --bone:#F6F3EE;            /* chroma 8, luminance 244 — inside the observed band */
  --ink:#333;                /* Aesop sets body in near-black, not black */
  --soft:#666;
  --line:rgba(51,51,51,.18);
  --pine:#22302A;            /* ink on light ground, and the dark button */
  --ijsblauw:#BEDDE0;        /* 2025 — the one coloured full-bleed section */
  --gold:#C7A867;
  --bordeaux:#6E2A38;        /* 2026 — the action colour: the book on the hero */
  --cognac:#7A4A2B;          /* accent, one job only: eyebrows */
  --pad:20px;
  --sec:64px; --sec-m:40px; --sec-s:24px;
  --maxw:1440px; --measure:640px;
  --ease:cubic-bezier(.215,.61,.355,1);
}
@media(min-width:760px){:root{--pad:40px;--sec:96px;--sec-m:52px}}
@media(min-width:1100px){:root{--pad:80px;--sec:120px;--sec-m:60px;--sec-s:30px}}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bone);color:var(--ink);font-family:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
     font-weight:400;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--pine)}
.wrap{max-width:var(--maxw);margin:0 auto}

/* ---- type: nothing above 44px ---- */
.h{font-weight:400;letter-spacing:-.01em;line-height:1.2;text-wrap:pretty}
.h1{font-size:clamp(30px,3.4vw,44px);line-height:1.12;letter-spacing:-.015em}
.h2{font-size:clamp(22px,2.1vw,28px)}
.h3{font-size:18px;line-height:1.35}
.p{font-size:15px;line-height:1.5;color:var(--ink);max-width:var(--measure)}
.p+.p{margin-top:30px}
.p.soft{color:var(--soft)}
.lead{font-size:16px;line-height:1.55;max-width:44ch}
.mono{font-family:'Spline Sans Mono','Courier New',monospace;text-transform:uppercase;
      letter-spacing:.2em;font-size:12px;line-height:1.7}
.eyebrow{color:var(--cognac)}
.wordmark{font-size:27px;font-weight:500;letter-spacing:-.012em}

/* ---- buttons: radius 0, 13px, uppercase at 6% ---- */
.btn{display:inline-block;font-family:'Spline Sans Mono','Courier New',monospace;font-size:13px;
     text-transform:uppercase;letter-spacing:.06em;line-height:1;padding:18px 44px;border-radius:0;
     border:1px solid transparent;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn.dark{background:var(--bordeaux);color:var(--bone)}
.btn.dark:hover{background:transparent;border-color:var(--bordeaux);color:var(--bordeaux)}
.btn.light{background:var(--bone);color:var(--pine)}
.btn.light:hover{background:transparent;border-color:var(--bone);color:var(--bone)}
.btn.outline{background:none;border-color:var(--ink);color:var(--ink)}
.btn.outline:hover{background:var(--ink);color:var(--bone)}
.link{border-bottom:1px solid currentColor;padding-bottom:3px;font-family:'Spline Sans Mono','Courier New',monospace;
      font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.cta-pair{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);flex-wrap:wrap}
.founder{margin-top:26px;padding-top:22px;border-top:1px solid rgba(34,48,42,.22);max-width:var(--measure)}
.founder p{font-size:15px;line-height:1.5}
.founder a{border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---- nav: five items, not sticky, no promo bar ---- */
.nav{display:flex;justify-content:space-between;align-items:center;gap:24px;
     padding:26px var(--pad);max-width:var(--maxw);margin:0 auto}
.nav .links{display:flex;gap:clamp(18px,2.6vw,34px);align-items:center}
.nav .links a:hover{color:var(--cognac)}
@media(max-width:820px){.nav .links{display:none}}

/* ---- hero: contained full-width, inset by the page gutter ---- */
.hero{position:relative;padding:0 var(--pad) var(--sec-m);max-width:var(--maxw);margin:0 auto}
.hero .frame{position:relative;height:min(76vh,760px);overflow:hidden;color:var(--bone)}
.hero .frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .shade{position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(34,48,42,.62) 0%,rgba(34,48,42,.28) 38%,rgba(34,48,42,0) 62%),
  linear-gradient(180deg,rgba(34,48,42,0) 45%,rgba(34,48,42,.5) 100%)}
.hero .in{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--sec-m);color:var(--bone);
          display:flex;flex-direction:column;gap:20px;padding:clamp(28px,4vw,52px)}
.hero .in .h1{max-width:19ch}
.hero .in .lead{color:var(--bone);opacity:.94;max-width:34ch}
.hero .in .btn{align-self:flex-start;margin-top:6px}
/* on a phone the copy will not sit over the object legibly, so it drops below the photograph */
@media(max-width:760px){
  .hero .frame{height:min(56vh,460px)}
  .hero .shade{display:none}
  .hero .in{position:static;color:var(--ink);padding:26px 0 0;gap:16px}
  .hero .in .h1{max-width:none}
  .hero .in .lead{color:var(--soft);max-width:none}
}

/* ---- section rhythm ---- */
.sec{padding:var(--sec) var(--pad);max-width:var(--maxw);margin:0 auto}
.sec.tight{padding-top:var(--sec-m);padding-bottom:var(--sec-m)}
.sec.flush{padding-left:0;padding-right:0}

/* statement */
.statement{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.statement .h2{max-width:20ch}

/* spec triplet — what stands in for reviews */
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);
       border-top:1px solid var(--line);padding-top:30px}
.specs .k{margin-bottom:10px}
.specs .v{font-size:15px;line-height:1.5;color:var(--ink)}
@media(max-width:760px){.specs{grid-template-columns:1fr;gap:26px}}

/* 50/50 editorial slice, alternating */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
       max-width:var(--maxw);margin:0 auto}
.split>img{width:100%;height:clamp(380px,44vw,620px);object-fit:cover}
.split .txt{padding:clamp(32px,5vw,72px)}
.split .txt .mono{margin-bottom:14px}
.split .txt .h2{margin-bottom:18px}
@media(max-width:820px){.split{grid-template-columns:1fr}.split>img{height:auto;aspect-ratio:4/3}
  .split.rev>img{order:-1}.split .txt{padding:32px var(--pad) 48px}}

/* trio of product frames, 1:1 and 4:5 */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;max-width:var(--maxw);margin:0 auto}
.trio img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media(max-width:640px){.trio{grid-template-columns:repeat(2,minmax(0,1fr))}.trio img:nth-child(3){display:none}}

/* full-bleed band + caption */
.band{width:100%;height:clamp(340px,46vw,680px);object-fit:cover}
.caption{max-width:var(--maxw);margin:0 auto;padding:var(--sec-m) var(--pad) 0;
         display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
@media(max-width:820px){.caption{grid-template-columns:1fr;gap:14px}}

/* the seven colours — swatch row, the way the category actually shows a range */
.swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}
.sw{aspect-ratio:5/7;position:relative;overflow:hidden}
.sw .t{position:absolute;left:8%;top:6%;font-family:Anton,Impact,sans-serif;
       font-size:clamp(20px,3.4vw,46px);line-height:1}
.sw .y{position:absolute;right:8%;top:26%;font-family:'Archivo Black','Arial Black',sans-serif;
       font-size:clamp(7px,.9vw,12px)}
.sw .a{position:absolute;left:0;right:0;bottom:7%;text-align:center;font-size:clamp(7px,.75vw,11px);font-weight:500}
.swatch-cap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:18px}
.swatch-cap span{font-size:15px;color:var(--soft)}
@media(max-width:900px){.swatches{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* how it works + price — price at 24px, never the loudest thing on the page */
.howprice{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.how{grid-column:span 7;display:flex;flex-direction:column;gap:30px}
.step{display:flex;gap:24px;align-items:baseline;border-top:1px solid var(--line);padding-top:20px}
.step .n{font-size:15px;color:var(--cognac);width:34px;flex:none;
         font-family:'Spline Sans Mono',monospace;letter-spacing:.1em}
.step h3{margin-bottom:6px}
.step p{font-size:15px;line-height:1.5;color:var(--soft);max-width:46ch}
.price{grid-column:9/span 4;border-left:1px solid var(--line);padding-left:clamp(24px,2.4vw,40px)}
.price .amount{font-size:24px;font-weight:500;line-height:1.33;padding-bottom:30px}
.price p{font-size:15px;line-height:1.5;color:var(--soft);margin-bottom:30px}
@media(max-width:820px){.how,.price{grid-column:span 12}
  .price{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:30px;margin-top:10px}}

/* service band — courtesy stated as fact, the Aesop/Smythson substitute for social proof */
.service{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);
         border-top:1px solid var(--line);border-bottom:1px solid var(--line);
         padding:var(--sec-m) var(--pad);max-width:var(--maxw);margin:0 auto}
.service .k{margin-bottom:8px}
.service p{font-size:15px;line-height:1.5;color:var(--soft)}
@media(max-width:760px){.service{grid-template-columns:1fr;gap:24px}}

/* the one coloured full-bleed section — 2025 ijsblauw, a colour off the shelf rather than an outside brand green */
.promise{background:var(--ijsblauw);color:var(--pine)}
.promise .in{max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--pad);
             display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.promise .h2{max-width:20ch}
.promise p{color:rgba(34,48,42,.78);max-width:var(--measure);font-size:15px;line-height:1.5}
.promise .mono{color:#2F6B72}

/* cross-link + footer */
.cross{max-width:var(--maxw);margin:0 auto;padding:var(--sec-m) var(--pad);
       display:flex;justify-content:space-between;align-items:center;gap:32px;border-bottom:1px solid var(--line)}
@media(max-width:640px){.cross{flex-direction:column;align-items:flex-start;gap:20px}}
.foot{max-width:var(--maxw);margin:0 auto;padding:var(--sec-s) var(--pad) var(--sec-m);
      display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot .mono{color:var(--soft);font-size:12px}
.foot .links{display:flex;gap:26px}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- small screens: the CTA is the widest thing on the page, so it sets the floor ---- */
@media(max-width:560px){
  .btn{padding:16px 20px;font-size:12px;letter-spacing:.05em}
  .nav{padding:20px var(--pad);gap:12px}
  .nav .wordmark{font-size:23px}
  .hero .in{padding:24px 22px 26px}
  .hero .in .h1{max-width:none}
  .hero .in .lead{max-width:none;font-size:15px}
  .caption{padding-left:var(--pad);padding-right:var(--pad)}
  .swatch-cap{flex-direction:column;gap:6px}
}
html,body{overflow-x:clip}