/* ============================================================
   CUREVA
   Tokens sampled from the hero footage itself (ffmpeg downsample
   of the approved start frame). One sunlit plaster room, with the
   shadow side of that same room used for the dark sections.
   ============================================================ */
:root{
  --canvas:#DCC5A2;
  --canvas-deep:#2A1D12;
  --panel:#E8D6BA;
  --panel-deep:#3A2917;
  --accent:#B87415;
  --accent-strong:#96590C;
  --accent-lit:#E3A63F;
  --accent-muted:rgba(184,116,21,.26);
  --text:#2E2013;
  --text-2:#63482F;
  --on-deep:#EFE2CE;
  --on-deep-2:#C4AC8C;
  --veil:#F7EEDE;
  --line:rgba(46,32,19,.16);
  --line-deep:rgba(239,226,206,.18);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* The footage is a bright sunlit wall, so the legibility system is
     inverted from the usual dark scrim: dark type over a warm cream
     veil. Same four layers, same worst-frame audit, light instead of dark. */
  --tshadow:0 1px 2px rgba(250,244,232,.95),0 3px 12px rgba(250,244,232,.78),0 10px 44px rgba(247,238,222,.8);

  --gutter:clamp(20px,5vw,84px);
  --maxw:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font-family:Karla,'Segoe UI',system-ui,sans-serif;
  font-size:clamp(16px,.55vw + 14px,18.5px);
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
img,video,svg{max-width:100%;display:block}
a{color:inherit}

h2,h3,.display{font-family:Prata,'Iowan Old Style',Georgia,serif;font-weight:400;letter-spacing:-.012em;line-height:1.08}
.mono{font-family:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--canvas-deep);color:var(--on-deep);padding:14px 20px;border-radius:0 0 8px 0}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px;border-radius:2px}
.on-deep :focus-visible,.nav.over-deep :focus-visible{outline-color:var(--accent-lit)}

/* ---------- the fixed environment layer + grain ---------- */
.env{position:fixed;inset:0;z-index:-2;background:var(--canvas);pointer-events:none}
.env::before{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(ellipse 50% 42% at 28% 32%,rgba(255,238,206,.55),rgba(255,238,206,0) 62%),
             radial-gradient(ellipse 46% 40% at 76% 74%,rgba(184,116,21,.14),rgba(184,116,21,0) 66%);
  animation:drift 96s var(--ease-soft) -22s infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3.2%,2.6%,0) scale(1.09)}
}
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px var(--gutter);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),color .5s var(--ease);
}
.nav.solid{background:rgba(232,214,186,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav.over-deep{color:var(--on-deep)}
.nav.over-deep.solid{background:rgba(42,29,18,.82);border-bottom-color:var(--line-deep)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand svg{width:36px;height:26px;flex:none;color:var(--accent)}
.nav.over-deep .brand svg{color:var(--accent-lit)}
.brand span{font-family:Prata,Georgia,serif;font-size:1.42rem;letter-spacing:.005em;line-height:1}
.nav-links{display:flex;align-items:center;gap:clamp(12px,1.9vw,28px);margin-left:auto}
.nav-links a{font-size:.86rem;text-decoration:none;opacity:.82;transition:opacity .35s var(--ease);white-space:nowrap}
.nav-links a:hover{opacity:1}
.nav-links a.here{opacity:1;position:relative}
.nav-links a.here::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--accent)}
.nav.over-deep .nav-links a.here::after{background:var(--accent-lit)}
.nav-cta{flex:none}
/* two rows on small screens, so every collection stays reachable */
@media (max-width:900px){
  .nav{flex-wrap:wrap;row-gap:10px;padding-bottom:12px}
  .brand{order:1}
  .nav-cta{order:2}
  .nav-links{order:3;width:100%;margin-left:0;justify-content:space-between;gap:8px}
  .nav-links a{font-size:.79rem}
  .nav-links a.here::after{bottom:-5px}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent-strong);color:var(--veil);
  padding:13px 24px;border-radius:999px;border:0;
  font-family:Karla,sans-serif;font-size:.9rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;text-shadow:none;
  transition:background .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.btn:hover{background:#7d4907;transform:translateY(-2px);box-shadow:0 12px 30px rgba(70,40,6,.24)}
.btn.small{padding:10px 19px;font-size:.83rem}
.btn.lit{background:var(--accent-lit);color:#2A1D12}
.btn.lit:hover{background:#f2b755}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:520vh}
.sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.stage{position:absolute;inset:0;background:#C9AE86}
.poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster{background-size:cover;background-position:38% 50%}
.hero-video{opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready .hero-video{opacity:1}
.stage.video-failed .hero-video{display:none}

/* legibility layer 1: the global base veil, always on, warm not dark */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(247,238,222,0) 34%,rgba(247,238,222,.20) 72%,rgba(247,238,222,.32) 100%),
             radial-gradient(ellipse 120% 92% at 50% 46%,rgba(247,238,222,0) 44%,rgba(247,238,222,.24) 100%);
}

.ring{position:absolute;right:calc(var(--gutter) - 4px);bottom:26px;width:44px;height:44px;color:rgba(46,32,19,.6);z-index:4}
.ring circle{transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring{opacity:0;transition:opacity .6s var(--ease)}
.cue{position:absolute;right:var(--gutter);bottom:26px;z-index:4;color:rgba(46,32,19,.62);animation:bob 2.8s var(--ease-soft) -.6s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- caption bands ---------- */
.bands{position:absolute;inset:0;z-index:3}
.band{
  position:absolute;top:0;right:0;height:100%;
  width:min(46%,560px);
  padding:0 var(--gutter) 0 0;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;text-shadow:var(--tshadow);
  pointer-events:none;
}
.band .btn{text-shadow:none;pointer-events:auto}
/* legibility layer 2: the per band veil, riding the band's own --k */
.band::before{
  content:"";position:absolute;inset:-6% -12% -6% -22%;pointer-events:none;z-index:-1;
  opacity:calc(.28 + .72*var(--k,1));
  background:radial-gradient(ellipse 76% 60% at 56% 50%,rgba(249,241,227,.72) 0%,rgba(249,241,227,.5) 46%,rgba(249,241,227,0) 76%);
}
.band-1::before,.band-2::before{background:radial-gradient(ellipse 74% 46% at 58% 50%,rgba(249,241,227,.74) 0%,rgba(249,241,227,.5) 46%,rgba(249,241,227,0) 76%)}

.band p.line{margin:0;font-family:Prata,Georgia,serif;font-weight:400;line-height:1.14;letter-spacing:-.014em}
.band-1 p.line{font-size:clamp(1.9rem,3.5vw,3.15rem);max-width:19ch}
.band-2 p.line{font-size:clamp(2rem,3.9vw,3.5rem);max-width:13ch}
.band-3 .settle-h{font-size:clamp(2.4rem,4.7vw,4.15rem);margin:0}
.band-3 .settle-s{
  margin:18px 0 0;max-width:34ch;font-size:clamp(.98rem,1.05vw,1.1rem);color:#43301E;
  opacity:var(--ks,0);transform:translateY(calc((1 - var(--ks,0))*14px));
}
.band-3 .settle-cta{
  margin-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0))*14px));
}
.band-3{--ks:clamp(0,(var(--k,0) - .60)*3.4,1);--kb:clamp(0,(var(--k,0) - .74)*4.2,1)}
.band-kicker{
  align-self:flex-start;margin:0 0 18px;
  /* legibility layer 4: the chip, for small type over footage */
  background:rgba(250,243,230,.62);border:1px solid rgba(150,89,12,.26);
  border-radius:999px;padding:7px 14px;backdrop-filter:blur(9px);
  color:#5A3F22;text-shadow:0 1px 2px rgba(250,244,232,.9);
}

/* ---------- split text mechanics ---------- */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (f) drift down: words fall into place, echoing the silk */
[data-entrance="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px));
}
/* (i) weave: characters arrive alternately from above and below,
   echoing the silk turning over itself mid fall */
[data-entrance="weave"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*var(--jy,0px)));
}
/* (e) word by word rise into the staged settle */
[data-entrance="rise"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px));
}

/* ---------- the static hero (five gates) ---------- */
.static-hero{display:none;flex-direction:column}
.sh-img{position:relative;height:min(62vh,520px);width:100%;overflow:hidden}
.sh-img img{width:100%;height:100%;object-fit:cover;object-position:32% 56%}
.sh-img::after{content:"";position:absolute;inset:auto 0 -1px 0;height:34%;background:linear-gradient(to bottom,rgba(220,197,162,0),var(--canvas))}
.sh-copy{padding:26px var(--gutter) 54px;text-align:left}
.sh-copy .mono{color:var(--text-2);display:block;margin-bottom:14px}
.sh-copy .display{font-size:clamp(2.2rem,9vw,3.3rem);margin:0}
.sh-copy p{margin:16px 0 26px;max-width:36ch;color:var(--text-2)}

/* ============================================================
   BELOW THE FOLD
   ============================================================ */
.below{position:relative}
section.band-sec{position:relative;padding:clamp(84px,11vw,168px) 0}
.on-deep{background:var(--canvas-deep);color:var(--on-deep)}
.on-deep h2{color:var(--on-deep)}
.wrap{width:min(var(--maxw),100% - var(--gutter)*2);margin-inline:auto}

/* the signature: one gold hairline running the whole page, drawn by scroll,
   coiling at each section boundary */
.rail{position:absolute;left:calc(var(--gutter)*.42);top:0;bottom:0;width:2px;z-index:2;pointer-events:none}
.rail-track{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(184,116,21,.1),rgba(184,116,21,.1))}
.rail-fill{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(184,116,21,.72),rgba(227,166,63,.55));transform-origin:top;transform:scaleY(var(--rail,0))}
@media (max-width:900px){.rail{display:none}}

.coil{position:absolute;left:calc(var(--gutter)*.42 - 29px);width:60px;height:44px;z-index:3;color:var(--accent);pointer-events:none}
.on-deep .coil,.coil.lit{color:var(--accent-lit)}
.coil path{stroke-dasharray:var(--len,180);stroke-dashoffset:var(--len,180);transition:stroke-dashoffset 1.5s var(--ease)}
.coil.drawn path{stroke-dashoffset:0}
.coil .fillp{fill:currentColor;stroke:none;opacity:0;transition:opacity .8s var(--ease) .7s}
.coil.drawn .fillp{opacity:1}
@media (max-width:900px){.coil{display:none}}

.kicker{color:var(--text-2);display:block;margin-bottom:20px}
.on-deep .kicker{color:var(--on-deep-2)}

/* --- 1. premise: asymmetric two column --- */
.premise .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,72px);align-items:start}
.premise h2{font-size:clamp(1.95rem,4.1vw,3.5rem);margin:0;max-width:15ch}
.premise .body{margin:0;max-width:44ch;color:var(--text-2);font-size:clamp(1rem,1.02vw,1.1rem)}
.premise .body strong{color:var(--text);font-weight:600}
@media (max-width:860px){.premise .grid{grid-template-columns:1fr;gap:26px}}

/* --- 2. what we make: card grid --- */
.make .head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(34px,4vw,58px)}
.make h2{font-size:clamp(1.8rem,3.4vw,2.9rem);margin:0;max-width:16ch}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.1vw,30px)}
@media (max-width:820px){.cards{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.card{background:var(--panel-deep);border:1px solid var(--line-deep);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
a.card:hover{border-color:rgba(227,166,63,.45);transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.3)}
.card .shot.wide{aspect-ratio:3/2}
.cardgo{display:inline-block;margin-top:15px;color:var(--accent-lit)}
.cardgo .arw{display:inline-block;transition:transform .4s var(--ease)}
a.card:hover .cardgo .arw{transform:translateX(4px)}
.card .shot{aspect-ratio:4/5;overflow:hidden;background:#2f2114}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .shot img{transform:scale(1.045)}
.card .txt{padding:22px 22px 26px}
.card h3{font-size:1.28rem;margin:0 0 9px;color:var(--on-deep)}
.card p{margin:0;color:var(--on-deep-2);font-size:.95rem;max-width:32ch}
.card .num{color:var(--accent-lit);display:block;margin-bottom:12px}

/* --- 3. the hold: centred stage --- */
.hold{text-align:center}
.hold h2{font-size:clamp(2rem,4.4vw,3.5rem);margin:0 auto}
.hold .lede{margin:18px auto 0;max-width:42ch;color:var(--text-2)}
.hold-stage{margin:clamp(34px,4.4vw,58px) auto 0;width:min(520px,100%);position:relative}
.hold-svg{width:100%;height:auto;overflow:visible}
.strand{fill:none;stroke:#4A3520;stroke-width:2.4;stroke-linecap:round;opacity:.72}
.strand.b{opacity:.42}
.strands{transform-box:fill-box;transform-origin:48% 50%;transform:scaleY(calc(1 - .34*var(--hold,0)))}
.bandg{transform-box:fill-box;transform-origin:50% 50%;transform:scaleX(calc(1 - .46*var(--hold,0)))}
.bandshape{
  fill:none;stroke:var(--accent-strong);stroke-width:5;stroke-linecap:round;
  opacity:calc(.3 + .7*var(--hold,0));
}
.hold-readout{
  position:absolute;left:50%;top:4px;transform:translateX(-50%);
  color:var(--text-2);
}
.hold-btn{
  margin:26px auto 0;display:inline-flex;align-items:center;gap:11px;
  background:transparent;color:var(--text);
  border:1.5px solid var(--accent-strong);border-radius:999px;
  padding:13px 26px;font-family:Karla,sans-serif;font-weight:600;font-size:.92rem;
  cursor:pointer;position:relative;overflow:hidden;
  transition:color .4s var(--ease),border-color .4s var(--ease);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.hold-btn::before{
  content:"";position:absolute;inset:0;background:var(--accent-strong);
  transform-origin:left;transform:scaleX(var(--hold,0));z-index:-1;
}
.hold-btn.filling{color:var(--veil)}
.hold-btn.done{background:var(--accent-strong);color:var(--veil);cursor:default}
@media (pointer:coarse){.hold-btn{min-height:44px}}
.proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);margin:clamp(34px,4vw,54px) auto 0;max-width:900px}
@media (max-width:760px){.proofs{grid-template-columns:1fr;max-width:420px}}
.proofs li{
  list-style:none;padding:20px 18px;border-top:1px solid var(--line);
  opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.hold-stage.done ~ .proofs li{opacity:1;transform:none}
.hold-stage.done ~ .proofs li:nth-child(1){transition-delay:.05s}
.hold-stage.done ~ .proofs li:nth-child(2){transition-delay:.28s}
.hold-stage.done ~ .proofs li:nth-child(3){transition-delay:.51s}
.proofs .mono{display:block;color:var(--accent-strong);margin-bottom:9px}
.proofs p{margin:0;font-size:.97rem;color:var(--text-2)}

/* --- 4. why people switch: three across band --- */
.switch h2{font-size:clamp(1.8rem,3.6vw,3rem);margin:0;max-width:17ch}
.switch .row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px);margin-top:clamp(36px,4.4vw,64px)}
@media (max-width:820px){.switch .row{grid-template-columns:1fr;gap:0}}
.switch .item{border-top:1px solid var(--line-deep);padding-top:22px}
@media (max-width:820px){.switch .item{padding:22px 0}}
.switch .item .n{color:var(--accent-lit);display:block;margin-bottom:14px}
.switch .item p{margin:0;color:var(--on-deep);font-size:clamp(1.05rem,1.5vw,1.3rem);font-family:Prata,Georgia,serif;line-height:1.28;max-width:20ch}
.switch .close{margin:clamp(34px,4vw,56px) 0 0;color:var(--on-deep-2);max-width:40ch}

/* --- 5. questions: expanding rows --- */
.qs h2{font-size:clamp(1.8rem,3.6vw,3rem);margin:0 0 clamp(28px,3.4vw,48px);max-width:14ch}
.q{border-top:1px solid var(--line)}
.q:last-of-type{border-bottom:1px solid var(--line)}
.q summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:Prata,Georgia,serif;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.3;
  transition:color .35s var(--ease);
}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--accent-strong)}
.q summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:1.5px solid var(--accent-strong);border-bottom:1.5px solid var(--accent-strong);
  transform:translateY(-70%) rotate(45deg);transition:transform .45s var(--ease);
}
.q[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.q .a{padding:0 0 26px;margin:0;max-width:62ch;color:var(--text-2)}

/* --- 6. closing --- */
.closing{position:relative;overflow:hidden;background:var(--canvas-deep)}
.closing .shotbg{position:absolute;inset:0}
.closing .shotbg img{width:100%;height:100%;object-fit:cover;object-position:34% 60%;opacity:.66}
.closing .shotbg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(34,23,14,.93) 26%,rgba(34,23,14,.72) 62%,rgba(34,23,14,.44) 100%)}
.closing .wrap{position:relative;z-index:2}
.closing h2{font-size:clamp(2.1rem,5vw,4rem);margin:0;max-width:14ch}
.closing p{margin:20px 0 32px;max-width:38ch;color:var(--on-deep-2);font-size:clamp(1rem,1.1vw,1.14rem)}

/* --- footer --- */
footer{background:#1F1610;color:var(--on-deep-2);padding:clamp(52px,6vw,88px) 0 40px;font-size:.9rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,3vw,54px);align-items:start}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr;gap:30px}footer .cols .f-brand{grid-column:1/-1}}
footer .f-brand svg{width:40px;height:29px;color:var(--accent-lit);margin-bottom:14px}
footer .f-brand .name{font-family:Prata,Georgia,serif;font-size:1.5rem;color:var(--on-deep);display:block;margin-bottom:12px}
footer .f-brand p{margin:0;max-width:34ch}
footer h4{margin:0 0 14px;color:var(--on-deep);font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{text-decoration:none;opacity:.86;transition:opacity .35s var(--ease),color .35s var(--ease)}
footer a:hover{opacity:1;color:var(--accent-lit)}
.legal{margin-top:clamp(38px,4.4vw,64px);padding-top:22px;border-top:1px solid var(--line-deep);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.8rem;opacity:.78}
.legal p{margin:0;max-width:62ch}

/* ---------- entrance choreography below the fold ---------- */
.rev .part{opacity:0;transform:translateY(22px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rev.in .part{opacity:1;transform:none}
.rev.in .part:nth-child(1){transition-delay:.02s}
.rev.in .part:nth-child(2){transition-delay:.12s}
.rev.in .part:nth-child(3){transition-delay:.22s}
.rev.in .part:nth-child(4){transition-delay:.32s}
.rev.in .part:nth-child(5){transition-delay:.42s}
/* retire the stagger once the entrance has played, matching the specificity
   of the nth-child rules above so hovers never inherit the delay */
.rev.done .part:nth-child(1),.rev.done .part:nth-child(2),.rev.done .part:nth-child(3),
.rev.done .part:nth-child(4),.rev.done .part:nth-child(5){transition-delay:0s}

/* one living element per section, at whisper level */
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,244,222,.85);box-shadow:0 0 7px rgba(255,236,198,.7);opacity:0}
.vis .mote{animation:mote 22s linear infinite}
.mote:nth-child(1){left:16%;top:74%;animation-delay:-3s}
.mote:nth-child(2){left:44%;top:88%;animation-delay:-11s}
.mote:nth-child(3){left:71%;top:80%;animation-delay:-17s}
.mote:nth-child(4){left:88%;top:92%;animation-delay:-7s}
@keyframes mote{
  0%{opacity:0;transform:translateY(0) translateX(0)}
  14%{opacity:.85}
  86%{opacity:.5}
  100%{opacity:0;transform:translateY(-360px) translateX(26px)}
}
.glowsweep{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.glowsweep::before{
  content:"";position:absolute;top:-30%;bottom:-30%;width:52%;
  background:linear-gradient(100deg,rgba(227,166,63,0),rgba(227,166,63,.09) 46%,rgba(227,166,63,0));
  opacity:0;
}
.vis .glowsweep::before{animation:sweep 92s linear -18s infinite}
@keyframes sweep{0%{transform:translateX(-70%);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(240%);opacity:0}}

/* ---------- the five static hero gates.
   These five queries are character for character identical to the
   GATES array in the script. Change one, change both. ---------- */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .sticky{position:static;height:auto;overflow:visible}
  .stage{position:relative;inset:auto;background:transparent}
  .scrub-only{display:none!important}
  .static-hero{display:flex}
}
/* scrub capable but simply short: keep the scrub, drop the small overlays */
@media (max-height:560px) and (pointer:fine){.ring,.cue{display:none}}

/* ---------- reduced motion, honoured completely ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rev .part{opacity:1;transform:none}
  .proofs li{opacity:1;transform:none}
  .coil path{stroke-dashoffset:0}
  .coil .fillp{opacity:1}
  .rail-fill{transform:scaleY(1)}
  .band-3 .settle-s,.band-3 .settle-cta{opacity:1;transform:none}
}
/* the same pinned state, applied live when the preference flips mid session */
body.pinned .rev .part{opacity:1;transform:none;transition:none}
body.pinned .proofs li{opacity:1;transform:none;transition:none}
body.pinned .coil path{stroke-dashoffset:0;transition:none}
body.pinned .coil .fillp{opacity:1;transition:none}
body.pinned .rail-fill{transform:scaleY(1)}
body.pinned .bandg{transform:scaleX(.54)}
body.pinned .strands{transform:scaleY(.66)}
body.pinned .bandshape{opacity:1}
body.pinned *,body.pinned *::before,body.pinned *::after{animation:none!important}

/* pausing every loop on a hidden tab: play state does not inherit,
   so it is set on every element and pseudo element directly */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}


/* ============================================================
   COLLECTION PAGES
   ============================================================ */
/* the collection banners are shown whole: never cropped, never letterboxed.
   The header sits on a strip of plaster above the image so it cannot cover the mark. */
.chero{position:relative;background:var(--canvas);padding-top:84px}
@media (max-width:900px){.chero{padding-top:112px}}
.chero img{width:100%;height:auto;display:block}
.chero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:9%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(220,197,162,0),var(--canvas))}

.cintro{padding:clamp(52px,6.5vw,104px) 0 clamp(34px,4vw,60px)}
.cintro .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:start}
@media (max-width:860px){.cintro .grid{grid-template-columns:1fr;gap:22px}}
.cintro h2{font-size:clamp(1.9rem,4vw,3.3rem);margin:0;max-width:16ch}
.cintro .lede{margin:0;max-width:50ch;color:var(--text-2);font-size:clamp(1rem,1.05vw,1.12rem)}

.shelfsec{padding:clamp(40px,5vw,80px) 0 clamp(72px,9vw,150px)}
.shelfsec .head{display:flex;align-items:baseline;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:clamp(26px,3.2vw,46px)}
.shelfsec h2{font-size:clamp(1.55rem,2.9vw,2.4rem);margin:0}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(13px,1.7vw,24px)}
@media (max-width:900px){.shelf{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.shelf{grid-template-columns:1fr}}
.item{
  border:1px solid var(--line);border-radius:4px;padding:22px 21px 24px;
  background:linear-gradient(180deg,rgba(232,214,186,.52),rgba(232,214,186,.16));
  display:flex;flex-direction:column;gap:8px;min-height:168px;
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.item:hover{border-color:rgba(150,89,12,.42);transform:translateY(-3px);box-shadow:0 14px 34px rgba(70,45,12,.11)}
.item .n{color:var(--accent-strong)}
.item h3{margin:0;font-size:1.2rem}
.item p{margin:0;color:var(--text-2);font-size:.93rem;max-width:32ch}
.on-deep .item{background:linear-gradient(180deg,rgba(58,41,23,.75),rgba(58,41,23,.35));border-color:var(--line-deep)}
.on-deep .item h3{color:var(--on-deep)}
.on-deep .item p{color:var(--on-deep-2)}
.on-deep .item .n{color:var(--accent-lit)}

.cband{padding:clamp(64px,8vw,120px) 0;position:relative;overflow:hidden}
.cband h2{font-size:clamp(1.8rem,3.8vw,3rem);margin:0;max-width:15ch}
.cband p{margin:18px 0 30px;max-width:42ch;color:var(--on-deep-2)}