@font-face{
  font-family:'Inter';
  src:url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Italic appears in two phrases on the whole site, both at one weight.
   A 100..900 variable axis costs 52KB to deliver 800 weights nobody
   asks for; this is the 400 instance, pinned, at 25KB. The declared
   range is deliberate — any weight maps to this one face rather than
   being synthesised into a slant. */
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-latin-italic-400.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   SEEU — Design System v2
   to see you
   ------------------------------------------------------------
   Built around the Lapidarium photography and the seeu wordmark.
   Mineral, monochrome, unhurried. Hard stone, soft voice.
   ============================================================ */

:root{
  /* surface — cool stone, not warm clay */
  --paper:#FBFBFA;
  --paper-2:#F1F1EF;
  --paper-3:#E4E4E1;
  --stone:#D2D2CE;
  /* ink — taken from the wordmark's own dark ground */
  --ink:#2B2B2B;
  --ink-2:#5C5C59;
  /* --ink-3 is the workhorse quiet grey: breadcrumbs, dates, eyebrows,
     footer headings, ingredient percentages, "remove" in the bag. At
     #909089 it measured 3.10:1 on paper and 2.84:1 on --paper-2, so all
     of that failed AA at once. #6C6C66 keeps the same quietness and
     clears 4.5:1 on both surfaces. */
  --ink-3:#62625C;
  /* Decorative only — rules, dividers, disabled marks. Never type. */
  --ink-4:#B4B4AE;
  /* lines */
  --line:rgba(43,43,43,.10);
  --line-2:rgba(43,43,43,.17);
  --line-l:rgba(251,251,250,.22);
  /* type */
  --grotesk:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:var(--grotesk);
  --display:var(--grotesk);
  --body:var(--grotesk);
  /* rhythm */
  --gut:clamp(20px,5vw,80px);
  --max:1600px;
  --ease:cubic-bezier(.19,1,.22,1);
  --soft:cubic-bezier(.25,.6,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:400;
  font-size:15.5px;line-height:1.7;letter-spacing:.001em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
/* height:auto is not decoration — WordPress prints width/height
   attributes on every image it renders, and those map to
   presentational height. Without this reset, any image whose CSS
   does not set an explicit height renders at its intrinsic pixel
   height and aspect-ratio is ignored entirely. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* the faintest grain — keeps flat greys from reading as flat CSS */
body::after{
  content:'';position:fixed;inset:0;z-index:300;pointer-events:none;
  opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:400;
  background:var(--ink);color:var(--paper);padding:12px 20px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ── primitives ─────────────────────────────────────────── */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.wrap--narrow{max-width:880px}
.wrap--mid{max-width:1180px}
.pad{padding-block:clamp(90px,14vw,220px)}
.pad-s{padding-block:clamp(56px,8vw,120px)}
.rule{height:1px;background:var(--line);border:0}

/* small caps label */
.eyebrow{
  display:block;font-size:12.5px;font-weight:400;
  letter-spacing:.045em;text-transform:uppercase;color:var(--ink-3);
}

/* serif display — the voice of the brand */
.h-d{
  font-family:var(--display);font-weight:400;
  line-height:1.06;letter-spacing:-.035em;
}
.lede{font-size:clamp(15px,1.4vw,17px);color:var(--ink-2);line-height:1.75;font-weight:300}

/* the brand writes in lowercase */
.lc{text-transform:lowercase}

/* ── wordmark ───────────────────────────────────────────── */
.logo{display:block;width:clamp(72px,7vw,98px);color:var(--ink);line-height:0}
.logo svg{width:100%;height:auto;display:block}
/* A <svg><use> has no intrinsic size to derive a height from, so the
   ratio has to be stated. It is the wordmark's own viewBox. */
.logo .logo__mark{width:100%;height:auto;aspect-ratio:2496/600;display:block}

/* ── header ─────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(251,251,250,.78);
  backdrop-filter:saturate(150%) blur(18px);
  -webkit-backdrop-filter:saturate(150%) blur(18px);
  border-bottom:1px solid var(--line);
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
.nav__in{
  display:flex;align-items:center;gap:clamp(26px,4vw,58px);
  width:100%;padding:20px clamp(16px,2.4vw,40px);
}
.nav__in .logo{flex:none}
.nav__links{display:flex;gap:clamp(20px,2.4vw,34px);align-items:center}
.nav__util{display:flex;gap:clamp(18px,2vw,28px);align-items:center;margin-left:auto}
.nlink{
  position:relative;display:inline-block;font-family:var(--mono);
  font-size:15px;font-weight:400;
  letter-spacing:0;padding-bottom:2px;white-space:nowrap;
  color:var(--ink-3);
  transition:color .85s var(--soft);
}
.nlink:hover{color:var(--ink)}
.nlink[aria-current="page"]{color:var(--ink)}

/* transparent header over a dark hero */
.nav--over{
  position:absolute;top:auto;left:0;right:0;z-index:100;
  background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.nav--over::before{
  content:'';position:absolute;inset:0 0 auto;height:180px;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,18,17,.68) 0%,rgba(18,18,17,.34) 55%,rgba(18,18,17,0) 100%);
  transition:opacity .6s var(--ease);
}
.nav--over.is-stuck::before{opacity:0}
.nav--over .nlink{color:rgba(251,251,250,.99)}
.nav--over .nlink:hover{color:#fff}
.nav--over .nlink[aria-current="page"]{color:#fff}
.nav--over .logo{color:var(--paper)}
.nav--over .burger span{background:var(--paper)}
.nav--over.is-stuck{
  position:fixed;top:0;background:rgba(251,251,250,.86);
  backdrop-filter:saturate(150%) blur(18px);-webkit-backdrop-filter:saturate(150%) blur(18px);
  border-bottom-color:var(--line);
}
.nav--over.is-stuck .nlink{color:var(--ink-2)}
.nav--over.is-stuck .logo{color:var(--ink)}
.nav--over.is-stuck .burger span{background:var(--ink)}

/* burger */
.burger{
  display:none;background:none;border:0;cursor:pointer;padding:6px 0;
  width:24px;flex-direction:column;gap:6px;
}
.burger span{display:block;height:1px;width:100%;background:var(--ink);transition:transform .45s var(--ease),opacity .3s}
body.is-menu .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.is-menu .burger span:nth-child(2){opacity:0}
body.is-menu .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* drawer */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--paper);
  transform:translateX(100%);transition:transform .8s var(--ease);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:130px var(--gut) 48px;visibility:hidden;
}
body.is-menu .drawer{transform:none;visibility:visible}
.drawer nav{display:flex;flex-direction:column;gap:2px}
.drawer nav a{
  font-family:var(--display);font-weight:400;font-size:clamp(30px,9vw,50px);
  letter-spacing:-.032em;line-height:1.4;padding:8px 0;border-bottom:1px solid var(--line);
}
.drawer__foot{display:flex;flex-direction:column;gap:14px}
.drawer__foot a{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-block;text-align:center;font-family:var(--mono);
  font-size:13px;letter-spacing:.035em;text-transform:uppercase;font-weight:400;
  padding:16px 40px;border:1px solid var(--ink);
  color:var(--paper);background:var(--ink);
  cursor:pointer;will-change:transform;
  transition:background-color .95s var(--soft), color .95s var(--soft),
             border-color .95s var(--soft), transform .95s var(--soft);
}
.btn:hover{background:transparent;color:var(--ink);transform:translateY(-2px)}

.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--light{background:rgba(18,18,17,.34);border-color:rgba(251,251,250,.72);color:#fff}
.btn--light:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn--wide{display:block;width:100%}
.link-u{
  position:relative;display:inline-block;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase;padding-bottom:5px;
  border-bottom:1px solid var(--line-2);
  transition:border-color .9s var(--soft), transform .9s var(--soft);
}
.link-u:hover{transform:translateY(-1.5px)}
.link-u:hover{border-bottom-color:var(--ink)}

/* ── hero ───────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;padding:0 var(--gut) clamp(56px,8vw,110px);
}
.hero__media{position:absolute;inset:-6% 0 0;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover}
/* The scrim is not decoration — it is what makes the headline legible on
   a photograph nobody has chosen yet. Two layers, because the text block
   sits bottom-left: one down, one across. Measured to hold white type
   above 4.5:1 even over the brightest part of a bright photograph. */
.hero__media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(18,18,17,.46) 0%,rgba(18,18,17,.14) 26%,rgba(18,18,17,.24) 48%,rgba(18,18,17,.66) 80%,rgba(18,18,17,.82) 100%),
    linear-gradient(90deg,rgba(18,18,17,.56) 0%,rgba(18,18,17,.22) 44%,rgba(18,18,17,0) 72%);
}
.hero__in{
  position:relative;z-index:2;max-width:var(--max);margin:0 auto;width:100%;color:var(--paper);

  /* a diagonal gradient used as a mask. the gradient itself is far larger
     than the block, so sliding its position sweeps the soft edge across the
     text — it dissolves into the photograph and re-forms, rather than
     simply fading. no blur, no opacity: the blend is the gradient. */
  /* The mask floor used to reach 0, which meant the headline, the lede and
     the only call to action on the page were invisible until a mouse
     touched them — measured 1.9:1 at rest. Anyone reading before pointing
     saw an empty photograph. The fog now thins to .62 rather than to
     nothing: the effect still reads as fog lifting, but nothing is ever
     hidden from someone who does not own a mouse. */
  --fogmask:linear-gradient(155deg,
      #000 0%,
      #000 30%,
      rgba(0,0,0,.90) 52%,
      rgba(0,0,0,.74) 70%,
      rgba(0,0,0,.62) 100%);
  -webkit-mask-image:var(--fogmask);mask-image:var(--fogmask);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:260% 260%;mask-size:260% 260%;
  -webkit-mask-position:70% 70%;mask-position:70% 70%;
  transition:-webkit-mask-position 2.6s var(--soft),mask-position 2.6s var(--soft);
}
.hero:hover .hero__in,
.hero:focus-within .hero__in{
  -webkit-mask-position:0% 0%;mask-position:0% 0%;
  transition-duration:1.1s;
}
/* nothing to sweep the fog with, or motion turned down: fully lit */
@media (hover:none),(pointer:coarse){
  .hero__in{-webkit-mask-image:none!important;mask-image:none!important}
}
@media (prefers-reduced-motion:reduce){
  .hero__in{-webkit-mask-image:none!important;mask-image:none!important;transition:none}
}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(20px,2.7vw,38px);line-height:1.24;letter-spacing:-.02em;
  font-weight:300;color:rgba(251,251,250,.98);
  max-width:26ch;margin:16px 0 22px;
}
.hero__lede{
  max-width:34ch;font-size:clamp(13.5px,1.1vw,15px);
  color:rgba(251,251,250,.95);margin-bottom:32px;line-height:1.8;font-weight:300;
}
.hero .eyebrow{color:rgba(251,251,250,.92);font-size:11.5px;letter-spacing:.07em}

/* ── page header ────────────────────────────────────────── */
.phead{padding-block:clamp(58px,9vw,130px) clamp(30px,4vw,54px)}
.phead h1{
  font-family:var(--display);font-weight:400;letter-spacing:-.035em;
  font-size:clamp(36px,6vw,84px);line-height:1.02;margin:16px 0 22px;
}
.phead .lede{max-width:42ch}
.crumb{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.crumb a:hover{color:var(--ink)}

/* ── manifesto / statement ──────────────────────────────── */
.statement{text-align:center}
.statement p{
  font-family:var(--display);font-weight:400;
  font-size:clamp(26px,4.3vw,60px);line-height:1.14;letter-spacing:-.032em;
  max-width:20ch;margin:32px auto 0;
}
.statement p em{font-style:italic;color:var(--ink-2)}

/* right-aligned verse block, echoing the brand document */
.verse{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);align-items:start}
.verse__l{position:sticky;top:120px}
.verse__l .h-d{font-size:clamp(30px,4.6vw,62px);max-width:12ch}
.verse__r{text-align:right;display:flex;flex-direction:column;gap:clamp(30px,4vw,54px)}
.verse__r p{
  font-size:clamp(14.5px,1.35vw,17.5px);line-height:1.78;color:var(--ink-2);
  margin-left:auto;max-width:44ch;
}
.verse__r p strong{font-weight:300;color:var(--ink)}

/* ── section head ───────────────────────────────────────── */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:26px;padding-bottom:26px}
.sec-head h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,3.3vw,42px);letter-spacing:-.028em}

/* ── product cards ──────────────────────────────────────── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,40px)}
/* One product. A lone card in a three-column track reads as two products
   that failed to load, so the solo case gets its own measure: a single
   centred column wide enough that the photograph is the point, with the
   name and price centred under it rather than pushed to the outer edges
   of a column that is no longer a column. */
.grid-3--solo{grid-template-columns:minmax(0,min(560px,100%));justify-content:center}
.grid-3--solo .card figure{aspect-ratio:4/5}
.grid-3--solo .card__row{justify-content:center;gap:18px}
.grid-3--solo .card .desc{max-width:44ch;margin-left:auto;margin-right:auto;text-align:center}
.grid-3--solo .card h3{font-size:clamp(20px,2.4vw,26px)}
.card{position:relative}
.card figure{position:relative;aspect-ratio:4/5;margin-bottom:22px;overflow:hidden;background:var(--paper-3)}
/* The link wraps only absolutely-positioned images, so as an inline box it
   measured 0x0 and :focus-visible had nothing to outline — a keyboard user
   crossing the grid lost sight of focus on every third stop. Giving the
   link the figure's box costs nothing and makes focus visible. */
.card figure>a{position:absolute;inset:0;display:block;z-index:1}
.card figure>a:focus-visible{outline:2px solid var(--paper);outline-offset:-4px;
  box-shadow:0 0 0 4px var(--ink)}
.card figure img,.card figure .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s var(--ease),opacity .8s var(--ease)}
.card figure .ph--alt,.card figure img.alt{opacity:0}
.card:hover figure img,.card:hover figure .ph{transform:scale(1.04)}
.card:hover figure .ph--alt,.card:hover figure img.alt{opacity:1}
.card__badge{
  position:absolute;left:16px;top:16px;z-index:3;
  background:rgba(251,251,250,.9);backdrop-filter:blur(6px);
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  padding:7px 12px;color:var(--ink-2);
}
.card__add{font-family:var(--mono);
  position:absolute;left:16px;right:16px;bottom:16px;z-index:3;
  background:rgba(251,251,250,.94);backdrop-filter:blur(8px);
  border:0;padding:14px;cursor:pointer;
  font-size:12.5px;letter-spacing:.035em;text-transform:uppercase;
  opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),
              background-color .7s var(--soft),color .7s var(--soft);
}
.card:hover .card__add,.card:focus-within .card__add{opacity:1;transform:none}
.card__add:hover{background:var(--ink);color:var(--paper)}
.card__row{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.card h3{font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:-.018em}
.card .price{font-size:15px;color:var(--ink-2);white-space:nowrap;letter-spacing:0}
.card .desc{font-size:13px;color:var(--ink-2);margin-top:7px;line-height:1.65;max-width:34ch}

/* ── split ──────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.split--flip .split__media{order:2}
.split__media{position:relative;min-height:clamp(420px,58vw,820px);background:var(--paper-3)}
.split__media img,.split__media .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__body{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(44px,7vw,120px);background:var(--paper-2);
}
.split__body h2{
  font-family:var(--display);font-weight:400;letter-spacing:-.035em;
  font-size:clamp(29px,4.4vw,58px);line-height:1.06;margin:22px 0 26px;max-width:15ch;
}
.split__body p{color:var(--ink-2);max-width:44ch;margin-bottom:18px;font-size:15px;line-height:1.75}
.split__body .btn{margin-top:30px;align-self:flex-start}
.split--dark .split__body{background:var(--ink);color:var(--paper)}
.split--dark .split__body p{color:rgba(251,251,250,.72)}
.split--dark .split__body .eyebrow{color:rgba(251,251,250,.5)}
.split--dark .split__body .btn{background:transparent;border-color:rgba(251,251,250,.5);color:rgba(251,251,250,.92)}
.split--dark .split__body .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* ingredient / actives list */
.actives{list-style:none;margin:16px 0 6px;max-width:44ch}
.actives li{
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:15px 0;border-top:1px solid var(--line);
}
.actives li:last-child{border-bottom:1px solid var(--line)}
.actives strong{font-family:var(--display);font-weight:400;font-size:13.5px;letter-spacing:-.01em}
.actives span{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:right;letter-spacing:.03em}

/* ── full-bleed band ────────────────────────────────────── */
.film{position:relative;height:clamp(380px,62vw,760px);overflow:hidden;background:var(--ink)}
.film img,.film .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 62% at 50% 50%,rgba(18,18,17,.62) 0%,rgba(18,18,17,.40) 55%,rgba(18,18,17,.30) 100%)}
.film__cap{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:var(--paper);
  padding:0 var(--gut);

  /* Floored at .62, like the hero: the fog thins, it does not erase. */
  --fogmask:linear-gradient(155deg,
      #000 0%,#000 30%,
      rgba(0,0,0,.90) 52%,
      rgba(0,0,0,.74) 70%,
      rgba(0,0,0,.62) 100%);
  -webkit-mask-image:var(--fogmask);mask-image:var(--fogmask);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:260% 260%;mask-size:260% 260%;
  -webkit-mask-position:70% 70%;mask-position:70% 70%;
  transition:-webkit-mask-position 2.6s var(--soft),mask-position 2.6s var(--soft);
}
.film:hover .film__cap{
  -webkit-mask-position:0% 0%;mask-position:0% 0%;
  transition-duration:1.1s;
}
@media (hover:none),(pointer:coarse){
  .film__cap{-webkit-mask-image:none!important;mask-image:none!important}
}
@media (prefers-reduced-motion:reduce){
  .film__cap{-webkit-mask-image:none!important;mask-image:none!important;transition:none}
}
.film__cap p{
  font-family:var(--display);font-weight:300;
  font-size:clamp(20px,2.7vw,38px);line-height:1.24;letter-spacing:-.02em;
  color:rgba(251,251,250,.98);
  max-width:24ch;margin-top:22px;
}
.film__cap .eyebrow{color:rgba(251,251,250,.92)}

/* ── ritual steps ───────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,70px);margin-top:60px}
.step{border-top:1px solid var(--line);padding-top:26px}
.step .num{font-size:12.5px;color:var(--ink-3);letter-spacing:.045em;text-transform:uppercase}
.step h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.5vw,30px);letter-spacing:-.022em;margin:14px 0 12px}
.step p{font-size:14px;color:var(--ink-2);max-width:32ch;line-height:1.7}

/* ── quote ──────────────────────────────────────────────── */
.quote{background:var(--ink);color:var(--paper);text-align:center}
.quote blockquote{
  font-family:var(--display);font-weight:400;letter-spacing:-.035em;
  font-size:clamp(25px,4.1vw,54px);line-height:1.16;max-width:20ch;margin:0 auto;
}
.quote blockquote em{font-style:italic}
.quote .attrib{
  margin-top:42px;font-size:12.5px;letter-spacing:.045em;
  text-transform:uppercase;color:rgba(251,251,250,.5);
}

/* ── press ──────────────────────────────────────────────── */
.press{padding-block:clamp(48px,6vw,90px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.press__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:26px;margin-top:28px}
.press__row span{
  font-family:var(--mono);font-weight:300;font-size:clamp(13px,1.4vw,17px);
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
}

/* ── PDP ────────────────────────────────────────────────── */
.pdp{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,90px);align-items:start}
.pdp__gallery{display:flex;flex-direction:column;gap:14px}
.pdp__main{position:relative;aspect-ratio:4/5;background:var(--paper-3);overflow:hidden}
.pdp__main .ph,.pdp__main .ph-shot{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.pdp__main .ph.on,.pdp__main .ph-shot.on{opacity:1}
.pdp__main img{width:100%;height:100%;object-fit:cover}
.pdp__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pdp__thumbs button{
  position:relative;aspect-ratio:1;background:var(--paper-3);border:1px solid transparent;
  cursor:pointer;padding:0;overflow:hidden;transition:border-color .4s var(--ease)
}
.pdp__thumbs button[aria-selected="true"]{border-color:var(--ink)}
.pdp__thumbs .ph,.pdp__thumbs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.pdp__buy{position:sticky;top:110px;display:flex;flex-direction:column}
.pdp__buy h1{font-family:var(--display);font-weight:400;letter-spacing:-.035em;
  font-size:clamp(32px,4.4vw,56px);line-height:1.04;margin:16px 0 14px}
.pdp__sub{font-size:15px;color:var(--ink-2);max-width:38ch;margin-bottom:26px;line-height:1.75}
.pdp__price{
  display:flex;align-items:baseline;gap:16px;
  padding-block:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.pdp__price strong{font-family:var(--mono);font-weight:300;font-size:21px;letter-spacing:-.02em}
.pdp__price em{font-style:normal;font-size:12px;color:var(--ink-3);letter-spacing:.04em}

.opts{margin:26px 0 8px;display:flex;flex-direction:column;gap:10px}
.opt{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  border:1px solid var(--line-2);padding:16px 20px;cursor:pointer;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.opt:hover{border-color:var(--ink-3)}
.opt[aria-checked="true"]{border-color:var(--ink);background:var(--paper-2)}
.opt__l{display:flex;flex-direction:column;gap:3px}
.opt__l strong{font-family:var(--display);font-weight:400;font-size:13.5px}
.opt__l span{font-size:12px;color:var(--ink-3)}
.opt__p{font-family:var(--mono);font-size:13px;white-space:nowrap;letter-spacing:.04em}

.pdp__cta{margin-top:22px}
.pdp__meta{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.pdp__meta span{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);display:flex;gap:11px;align-items:baseline}
.pdp__meta span::before{content:'';width:3px;height:3px;background:var(--ink-3);flex:none;transform:translateY(-3px);border-radius:50%}

/* accordion */
.acc{margin-top:38px;border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--mono);
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:21px 0;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);
}
.acc__btn::after{content:'+';font-family:var(--mono);font-size:15px;transition:transform .5s var(--ease)}
.acc__btn[aria-expanded="true"]{color:var(--ink)}
.acc__btn[aria-expanded="true"]::after{transform:rotate(45deg)}
.acc__panel{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.acc__panel>div{padding-bottom:24px;font-size:14px;color:var(--ink-2);line-height:1.76}
.acc__panel p+p{margin-top:13px}
.inci{font-size:12px;color:var(--ink-3);line-height:1.8}

/* ── shop filters ───────────────────────────────────────── */
.filters{display:flex;gap:10px;flex-wrap:wrap;padding-block:8px 36px}
.filters button{
  background:none;border:1px solid var(--line-2);cursor:pointer;font-family:var(--mono);
  padding:11px 22px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-2);
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.filters button:hover{border-color:var(--ink-3);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.card[hidden]{display:none}

/* ── editorial ──────────────────────────────────────────── */
.ed{max-width:640px;margin:0 auto}
.ed h2{font-family:var(--display);font-weight:400;letter-spacing:-.032em;
  font-size:clamp(25px,3.3vw,42px);line-height:1.14;margin:clamp(48px,6vw,84px) 0 22px}
.ed p{margin-bottom:21px;color:var(--ink-2);font-size:15.5px;line-height:1.82}
.ed p.first{font-family:var(--display);font-size:clamp(19px,2.4vw,26px);color:var(--ink);line-height:1.5;font-weight:400;letter-spacing:-.015em}
.ed figure{margin:clamp(44px,6vw,72px) 0}
.ed figure img,.ed figure .ph{aspect-ratio:3/2;width:100%;object-fit:cover}
.ed figcaption{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-top:14px}
.pull{
  font-family:var(--display);font-weight:400;letter-spacing:-.032em;
  font-size:clamp(23px,3.3vw,37px);line-height:1.24;color:var(--ink);
  padding:clamp(34px,4.4vw,54px) 0;margin:clamp(34px,4.4vw,54px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.pull em{font-style:italic}

/* principles */
.prin{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,3.8vw,64px);margin-top:52px}
.prin__i{border-top:1px solid var(--line);padding-top:24px}
.prin__i .num{font-size:12.5px;color:var(--ink-3);letter-spacing:.045em;text-transform:uppercase}
.prin__i h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.022em;margin:13px 0 11px}
.prin__i p{font-size:14px;color:var(--ink-2);line-height:1.7}

/* ── stockists ──────────────────────────────────────────── */
.stk__group{margin-top:clamp(44px,5.5vw,74px)}
.stk__group h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,3.2vw,37px);letter-spacing:-.028em;
  padding-bottom:20px;border-bottom:1px solid var(--line-2)}
.stk__list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(26px,4.4vw,70px)}
.stk__list li{padding:24px 0;border-bottom:1px solid var(--line)}
.stk__list h3{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:-.02em;margin-bottom:6px}
.stk__list p{font-size:13px;color:var(--ink-2)}
.stk__list a{font-size:11.5px;color:var(--ink-3);letter-spacing:.06em;border-bottom:1px solid var(--line-2)}
.stk__list a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ── forms ──────────────────────────────────────────────── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:640px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field textarea,.field select{
  background:transparent;border:0;border-bottom:1px solid var(--line-2);
  font-family:var(--body);font-size:15px;font-weight:300;color:var(--ink);
  padding:12px 2px;outline:none;transition:border-color .5s var(--ease);border-radius:0;
}
.field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--ink)}
.field textarea{resize:vertical;min-height:120px}
.form .btn{grid-column:1/-1;justify-self:start}
.form__done{grid-column:1/-1;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);padding:14px 0}

/* ── journal ────────────────────────────────────────────── */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.4vw,50px)}
.jcard figure{position:relative;aspect-ratio:3/2;overflow:hidden;margin-bottom:20px;background:var(--paper-3)}
.jcard figure img,.jcard figure .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.jcard:hover figure img,.jcard:hover figure .ph{transform:scale(1.04)}
.jcard .meta{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.jcard h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.3vw,27px);letter-spacing:-.022em;line-height:1.22;margin:12px 0 10px}
.jcard p{font-size:13.5px;color:var(--ink-2);max-width:36ch;line-height:1.68}

.jfeat{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,4.6vw,74px);align-items:center;
  padding-bottom:clamp(54px,7vw,94px);margin-bottom:clamp(54px,7vw,94px);border-bottom:1px solid var(--line)}
.jfeat figure{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.jfeat figure img,.jfeat figure .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.jfeat:hover figure img,.jfeat:hover figure .ph{transform:scale(1.03)}
.jfeat h2{font-family:var(--display);font-weight:400;letter-spacing:-.035em;
  font-size:clamp(29px,4.2vw,52px);line-height:1.06;margin:16px 0 20px}
.jfeat p{color:var(--ink-2);max-width:42ch;margin-bottom:28px;font-size:15px;line-height:1.75}

.art__head{text-align:center;padding-block:clamp(50px,7vw,96px) clamp(32px,4vw,54px);max-width:780px;margin:0 auto}
.art__head h1{font-family:var(--display);font-weight:400;letter-spacing:-.035em;
  font-size:clamp(34px,5.6vw,74px);line-height:1.02;margin:20px 0 24px}
.art__meta{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.art__hero{position:relative;height:clamp(320px,50vw,680px);overflow:hidden;background:var(--paper-3)}
.art__hero img,.art__hero .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── newsletter ─────────────────────────────────────────── */
.news{text-align:center}
.news h2{font-family:var(--display);font-weight:400;letter-spacing:-.035em;
  font-size:clamp(29px,4.4vw,56px);line-height:1.08;margin:22px 0 18px}
.news>p{color:var(--ink-2);max-width:42ch;margin:0 auto 44px;line-height:1.75}
.news form{display:flex;max-width:440px;margin:0 auto;border-bottom:1px solid var(--line-2);transition:border-color .5s var(--ease)}
.news form:focus-within{border-bottom-color:var(--ink)}
.news input{flex:1;background:transparent;border:0;outline:none;
  font-family:var(--body);font-size:14.5px;font-weight:300;color:var(--ink);padding:15px 2px}
.news input::placeholder{color:var(--ink-3)}
.news button{background:transparent;border:0;cursor:pointer;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;padding:15px 4px 15px 22px}
.news .done{font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:15px 0;color:var(--ink-3)}

/* ── footer ─────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding-block:clamp(60px,8vw,104px) 36px}
.foot__cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(28px,4.4vw,66px)}
.foot h4,.foot .foot__h{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;margin-bottom:20px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot ul a{font-size:13.5px;color:var(--ink-2);display:inline-block;
  transition:color .8s var(--soft), transform .8s var(--soft)}
.foot ul a:hover{transform:translateY(-1px)}
.foot ul a:hover{color:var(--ink)}
.foot .logo{margin-bottom:20px}
.foot__base{font-family:var(--mono);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(52px,7vw,90px);padding-top:26px;border-top:1px solid var(--line);
  /* The smallest type on the site, and it carries the links to privacy,
     terms and cookies — the ones a customer is most likely to need and
     least likely to be able to read. A point larger, a shade darker. */
  font-size:12px;color:var(--ink-2)}

/* ── reveals ────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease)}
.rv.in{opacity:1;transform:none}
.stg>*{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.stg.in>*{opacity:1;transform:none}
.stg.in>*:nth-child(2){transition-delay:.12s}
.stg.in>*:nth-child(3){transition-delay:.24s}
.stg.in>*:nth-child(4){transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  .rv,.stg>*{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .hero__media{transform:none!important}
  .drawer,.cart,.scrim,.consent{transition:none}
}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:1080px){
  .pdp{grid-template-columns:1fr;gap:44px}
  .pdp__buy{position:static}
  .verse{grid-template-columns:1fr;gap:30px}
  .verse__l{position:static}
  .verse__r{text-align:left}
  .verse__r p{margin-left:0}
}
@media (max-width:980px){
  .nav__links,.nav__util .nlink--hide{display:none}
  .burger{display:flex}
  .nav__in{padding-block:18px}
  .grid-3{grid-template-columns:1fr 1fr;gap:18px}
  .grid-3--solo{grid-template-columns:minmax(0,min(560px,100%))}
  .split{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
  .split__media{min-height:72vw}
  .steps,.prin{grid-template-columns:1fr;gap:0}
  .step,.prin__i{padding:26px 0}
  .foot__cols{grid-template-columns:1fr 1fr}
  .card__add{opacity:1;transform:none}
  .jgrid{grid-template-columns:1fr 1fr;gap:30px}
  .jfeat{grid-template-columns:1fr;gap:28px}
  .stk__list{grid-template-columns:1fr}
}
@media (max-width:600px){
  .grid-3,.jgrid{grid-template-columns:1fr;gap:44px}
  .grid-3--solo{grid-template-columns:1fr}
  .hero{min-height:92svh}
  .sec-head{flex-direction:column;gap:10px}
  .foot__cols{grid-template-columns:1fr;gap:34px}
  .press__row{justify-content:flex-start;gap:20px 28px}
  .form{grid-template-columns:1fr;gap:22px}
}

/* ============================================================
   CART DRAWER
   ============================================================ */
.scrim{
  position:fixed;inset:0;z-index:180;background:rgba(43,43,43,.36);
  opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s;
  backdrop-filter:blur(2px);
}
body.is-cart .scrim{opacity:1;visibility:visible}
.cart{
  --gut-c:clamp(22px,4vw,36px);
  position:fixed;top:0;right:0;bottom:0;z-index:190;width:min(460px,100vw);
  background:var(--paper);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .75s var(--ease);
  visibility:hidden;box-shadow:-1px 0 50px rgba(43,43,43,.1);
}
body.is-cart .cart{transform:none;visibility:visible}
.cart__head{display:flex;justify-content:space-between;align-items:center;
  padding:28px var(--gut-c) 22px;border-bottom:1px solid var(--line);flex:none}
.cart__head h2{font-weight:400;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.cart__close{background:none;border:0;cursor:pointer;width:26px;height:26px;position:relative;flex:none}
.cart__close::before,.cart__close::after{content:'';position:absolute;left:2px;top:12px;width:22px;height:1px;background:var(--ink)}
.cart__close::before{transform:rotate(45deg)}
.cart__close::after{transform:rotate(-45deg)}
.cart__ship{padding:20px var(--gut-c);border-bottom:1px solid var(--line);flex:none}
.cart__ship p{font-size:12px;color:var(--ink-2);margin-bottom:11px}
.cart__ship strong{font-weight:400;color:var(--ink)}
.cart__bar{height:1px;background:var(--line-2);position:relative;overflow:hidden}
.cart__bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);width:0;transition:width .8s var(--ease)}
.cart__items{flex:1;overflow-y:auto;padding:6px var(--gut-c)}
.cart__item{display:grid;grid-template-columns:74px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.cart__item .ph,.cart__item img{aspect-ratio:4/5;width:100%;object-fit:cover;background:var(--paper-3)}
.ci__top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.ci__top h3{font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:-.02em}
.ci__price{font-family:var(--mono);font-size:12.5px;white-space:nowrap;letter-spacing:.04em}
.ci__var{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.ci__bot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:12px}
.qty{display:flex;align-items:center;border:1px solid var(--line-2)}
.qty button{background:none;border:0;cursor:pointer;width:28px;height:28px;font-size:13px;line-height:1;transition:background .3s var(--ease)}
.qty button:hover{background:var(--paper-2)}
.qty span{font-size:12px;min-width:24px;text-align:center}
.ci__rm{background:none;border:0;cursor:pointer;padding:0;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.ci__rm:hover{color:var(--ink);border-bottom-color:var(--ink)}
.cart__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px var(--gut-c);gap:20px}
.cart__empty p{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:-.02em;color:var(--ink-2)}
.cart__foot{flex:none;padding:22px var(--gut-c) calc(22px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--paper-2)}
.cart__sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.cart__sum span{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.cart__sum strong{font-family:var(--mono);font-weight:300;font-size:19px}
.cart__note{font-size:11px;color:var(--ink-3);margin-bottom:18px}
.cart__foot .btn{margin-bottom:14px}
.cart__cont{display:block;width:100%;text-align:center;background:none;border:0;cursor:pointer;
  font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.cart__cont:hover{color:var(--ink)}

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.consent{
  position:fixed;right:var(--gut);bottom:var(--gut);z-index:250;
  width:min(400px,calc(100vw - var(--gut) * 2));
  background:var(--paper);border:1px solid var(--line-2);
  padding:clamp(24px,3vw,32px);box-shadow:0 2px 48px rgba(43,43,43,.12);
  transform:translateY(calc(100% + var(--gut)));transition:transform .85s var(--ease);
}
.consent.in{transform:none}
.consent[hidden]{display:none}
.consent h2{font-weight:400;font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.consent p{font-size:13px;color:var(--ink-2);line-height:1.68;margin-bottom:18px}
.consent p a{border-bottom:1px solid var(--line-2)}
.consent p a:hover{border-bottom-color:var(--ink)}
.consent__acts{display:flex;gap:10px;flex-wrap:wrap}
.consent__acts .btn{padding:14px 20px;flex:1;min-width:128px}
.consent__more{background:none;border:0;cursor:pointer;padding:14px 0 0;
  font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.consent__more:hover{color:var(--ink)}
.consent__opts{margin-top:16px;padding-top:6px;border-top:1px solid var(--line)}
.consent__opts[hidden]{display:none}
.copt{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
.copt div{flex:1}
.copt strong{display:block;font-family:var(--display);font-weight:400;font-size:13px;margin-bottom:3px}
.copt span{font-size:11.5px;color:var(--ink-3);line-height:1.55}
.copt input{appearance:none;-webkit-appearance:none;width:38px;height:20px;flex:none;
  background:var(--line-2);border:0;cursor:pointer;position:relative;transition:background .4s var(--ease);border-radius:0;margin-top:3px}
.copt input::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--paper);transition:transform .4s var(--ease)}
.copt input:checked{background:var(--ink)}
.copt input:checked::after{transform:translateX(18px)}
.copt input:disabled{opacity:.45;cursor:not-allowed}

/* ============================================================
   CHECKOUT
   ============================================================ */
.co{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,88px);align-items:start}
.co__step{margin-bottom:clamp(36px,4.4vw,56px)}
.co__step h2{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--line-2);display:flex;gap:14px;align-items:baseline}
.co__step h2 em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.co .form{max-width:none}
.pay{display:flex;flex-direction:column;gap:10px}
.pay__opt{display:flex;justify-content:space-between;align-items:center;gap:14px;
  border:1px solid var(--line-2);padding:17px 20px;cursor:pointer;
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.pay__opt:hover{border-color:var(--ink-3)}
.pay__opt[aria-checked="true"]{border-color:var(--ink);background:var(--paper-2)}
.pay__opt strong{font-family:var(--display);font-weight:400;font-size:13.5px}
.pay__opt span{font-size:11.5px;color:var(--ink-3)}
.co__side{position:sticky;top:110px;background:var(--paper-2);padding:clamp(28px,3.4vw,42px)}
.co__side h2{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:24px}
.co__line{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.co__line .ph,.co__line img{aspect-ratio:4/5;width:100%;object-fit:cover;background:var(--paper-3)}
.co__line h3{font-family:var(--display);font-weight:400;font-size:13px}
.co__line p{font-size:11px;color:var(--ink-3);margin-top:3px}
.co__line em{font-style:normal;font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.co__tot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2)}
.co__tot div{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:13px;color:var(--ink-2)}
.co__tot div.grand{padding-top:16px;margin-top:8px;border-top:1px solid var(--line)}
.co__tot div.grand span{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.co__tot div.grand strong{font-family:var(--mono);font-weight:300;font-size:19px}
.co__side .btn{margin-top:24px}
.co__trust{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.co__trust span{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);display:flex;gap:10px;align-items:baseline}
.co__trust span::before{content:'';width:3px;height:3px;background:var(--ink-3);flex:none;transform:translateY(-3px);border-radius:50%}

/* ── 404 ────────────────────────────────────────────────── */
.e404{min-height:66vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px}
.e404 h1{font-family:var(--display);font-weight:400;font-size:clamp(60px,14vw,180px);letter-spacing:-.045em;line-height:.94}
.e404 p{color:var(--ink-2);max-width:34ch}
.e404__links{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;margin-top:12px}

@media (max-width:980px){
  .co{grid-template-columns:1fr;gap:44px}
  .co__side{position:static;order:-1}
}
@media (max-width:640px){
  .consent{left:0;right:0;bottom:0;width:100%;border-left:0;border-right:0;border-bottom:0;transform:translateY(100%)}
  .consent.in{transform:none}
  .cart{width:100vw}
}

/* placeholder wells — only where photography is still outstanding */
.ph{position:relative;overflow:hidden;background:var(--paper-3)}
.ph i{position:absolute;inset:0;display:block;
  background:linear-gradient(155deg,#EFEFEC 0%,#DCDCD8 48%,#C2C2BD 100%)}
.ph::after{content:attr(data-label);position:absolute;left:16px;bottom:13px;z-index:2;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(43,43,43,.3)}


/* ============================================================
   WORD BAND — sits directly under the hero
   ============================================================ */
.band{
  background:var(--ink);color:var(--paper);
  overflow:hidden;position:relative;
  padding:clamp(11px,1.3vw,16px) 0;
  line-height:1.3;
}
.band__track{
  display:flex;width:max-content;
  animation:band-drift var(--band-dur,90s) linear infinite;
  will-change:transform;
}
.band:hover .band__track{animation-play-state:paused}
.band__track span{
  font-weight:400;
  font-size:clamp(13.5px,1.45vw,19px);
  letter-spacing:.005em;color:#FBFBFA;
  padding:0;white-space:pre;
}
@keyframes band-drift{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .band__track{animation:none;justify-content:center;width:100%;flex-wrap:wrap}
}


/* ── depth layers ───────────────────────────────────────── */
.film picture,.split__media picture,.art__hero picture{
  position:absolute;inset:0;display:block;
  will-change:transform;
}
.film picture img,.split__media picture img,.art__hero picture img{
  width:100%;height:100%;object-fit:cover;
}
@media (prefers-reduced-motion:reduce){
  .film picture,.split__media picture,.art__hero picture{transform:none!important}
}


/* screen-reader only — the poem read once, not twice */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}