/* =====================================================================
   TrueSkin — landing page
   Concept: the page is a sheet of practice skin. Ground tones are
   sampled from the product photography (#E8C4AC lit / #D6B29C mid /
   #CDAA94 shadow). Accent is thermal-stencil violet.
   ===================================================================== */

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--skin);
  color:var(--on-skin);
  font-family:var(--f-body);
  font-size:clamp(16px,1.02vw,18px);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video,svg{ display:block; max-width:100%; }
img{ height:auto; }
figure{ margin:0; }
h1,h2,h3{ margin:0; font-weight:900; }
p{ margin:0; }
a{ color:inherit; }
dl,dd,dt,ol,ul{ margin:0; padding:0; }
li{ list-style:none; }
button{ font:inherit; color:inherit; }

.sr-only{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip{
  position:fixed; top:-100px; left:12px; z-index:999;
  background:var(--ink); color:var(--bone); padding:10px 16px; border-radius:2px;
  font:600 13px/1 var(--f-mono); text-decoration:none;
}
.skip:focus{ top:12px; }

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--stencil); outline-offset:3px; border-radius:2px;
}
.on-dark :where(a,button,summary):focus-visible,
.why :where(a,button,summary):focus-visible,
.film :focus-visible,
.who :focus-visible,
.faq :focus-visible,
.shop :focus-visible,
.buy :focus-visible{ outline-color:var(--stencil-lt); }

/* ---------- 3. TEXTURE + CURSOR ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.35;
  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='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.cursor{
  position:fixed; top:0; left:0; z-index:200; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1.5px solid var(--ink); opacity:0;
  transition:opacity .3s, width .25s var(--ease), height .25s var(--ease),
             margin .25s var(--ease), background-color .25s, border-color .25s;
}
.cursor-dot{ position:absolute; inset:0; margin:auto; width:3px; height:3px; border-radius:50%; background:var(--ink); }
.cursor.is-live{ opacity:1; }
.cursor.is-hot{ width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(107,79,166,.18); border-color:var(--stencil); }
.cursor.is-dark{ border-color:var(--bone); }
.cursor.is-dark .cursor-dot{ background:var(--bone); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ---------- 4. PRELOADER ---------- */
.preload{
  position:fixed; inset:0; z-index:300; background:var(--skin);
  display:grid; place-items:center;
  transition:transform .85s var(--ease), opacity .5s .35s;
}
.preload.is-gone{ transform:translateY(-101%); opacity:0; pointer-events:none; }
.preload-inner{ text-align:center; }
.preload-mark{ width:88px; height:88px; margin:0 auto 22px; animation:pulse 1.6s ease-in-out infinite; }
.preload-bar{ width:190px; height:2px; background:rgba(20,16,14,.16); overflow:hidden; margin:0 auto; }
.preload-bar span{ display:block; height:100%; width:0; background:var(--ink); transition:width .3s linear; }
.preload-cap{ margin-top:14px; font:400 10px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--on-skin-dim); }
@keyframes pulse{ 0%,100%{ opacity:.35; transform:scale(.97);} 50%{ opacity:1; transform:scale(1);} }

/* ---------- 5. DEPTH RULE (left rail) ---------- */
.gauge{
  position:fixed; top:0; left:0; bottom:0; width:var(--rail); z-index:55;
  display:none; flex-direction:column; align-items:center;
  padding:88px 0 26px; pointer-events:none;
  border-right:1px solid rgba(20,16,14,.14);
  background:linear-gradient(180deg,rgba(240,214,193,.5),rgba(214,178,156,.35));
}
@media (min-width:1180px){ .gauge{ display:flex; } }
.gauge-cap{
  font:400 9px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-skin-dim); writing-mode:vertical-rl; margin-bottom:16px;
}
.gauge-track{ position:relative; flex:1; width:100%; }
.gauge-ticks{
  position:absolute; top:0; bottom:0; right:0; width:11px;
  background-image:repeating-linear-gradient(to bottom, rgba(20,16,14,.30) 0 1px, transparent 1px 100%);
  background-size:100% 2%;
}
.gauge-labels span{
  position:absolute; right:16px; top:calc(var(--p) * 1%);
  transform:translateY(-50%);
  font:400 10px/1 var(--f-mono); color:var(--on-skin-dim);
}
.gauge-labels span::after{
  content:""; position:absolute; right:-16px; top:50%; width:11px; height:1px; background:var(--ink); opacity:.55;
}
.gauge-head{
  position:absolute; right:0; top:0; width:100%; height:1px;
  background:var(--stencil); will-change:transform;
}
.gauge-head i{
  position:absolute; right:0; top:-4px; width:0; height:0;
  border:4.5px solid transparent; border-right-color:var(--stencil);
}
.gauge-read{
  margin-top:14px; font:600 10px/1 var(--f-mono); color:var(--stencil);
  letter-spacing:.04em;
}
/* mobile: thin top progress */
.topbar{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:56;
  background:var(--stencil); transform:scaleX(0); transform-origin:0 50%;
}
@media (min-width:1180px){ .topbar{ display:none; } }

/* ---------- 6. NAV ---------- */
.nav{
  position:fixed; top:0; left:var(--rail); right:0; z-index:70;
  display:flex; align-items:center; gap:24px;
  padding:16px var(--gut); transition:padding .35s var(--ease), background-color .35s, box-shadow .35s;
}
.nav.is-stuck{
  padding:9px var(--gut);
  background:rgba(226,191,167,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(20,16,14,.14);
}
.nav-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }
.nav-brand img{ width:42px; height:42px; transition:width .35s var(--ease), height .35s var(--ease); }
.nav.is-stuck .nav-brand img{ width:32px; height:32px; }
.nav-brand span{
  font:700 13px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase;
}
.nav-links{ display:none; gap:26px; }
@media (min-width:980px){ .nav-links{ display:flex; } }
.nav-links a{
  position:relative; text-decoration:none; padding:4px 0;
  font:400 11px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-skin-dim); transition:color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--stencil); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .4s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

/* Resellers — always in the header, at every width. Reads as the trade door,
   so it carries the stencil colour rather than the section links' grey. */
.nav-reseller{
  position:relative; white-space:nowrap; text-decoration:none; padding:4px 0;
  font:600 11px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--stencil); transition:color .25s;
}
.nav-reseller span{ font-size:.9em; opacity:.75; }
.nav-reseller::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--stencil); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .4s var(--ease);
}
.nav-reseller:hover{ color:var(--ink); }
.nav-reseller:hover::after{ transform:scaleX(1); transform-origin:0 50%; background:var(--ink); }

/* ---------- 7. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 28px; border:1px solid var(--ink); background:var(--ink); color:var(--skin-lit);
  font:600 12px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border-radius:2px; will-change:transform;
  transition:background-color .3s, color .3s, border-color .3s;
}
.btn:hover{ background:var(--stencil); border-color:var(--stencil); color:#fff; }
.btn-sm{ padding:11px 18px; font-size:10.5px; }
.btn-lg{ padding:20px 40px; font-size:14px; }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--skin-lit); border-color:var(--ink); }

/* ---------- 8. SHARED TYPE ---------- */
.eyebrow{
  font:400 10.5px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-skin-dim); margin-bottom:18px;
}
.h2{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(46px,7.6vw,116px); line-height:.88; letter-spacing:-.015em;
  text-transform:uppercase;
}
.lede{ max-width:52ch; color:var(--on-skin-dim); font-size:clamp(15.5px,1.15vw,18.5px); }
.num{ font-family:var(--f-mono); font-weight:600; font-variant-numeric:tabular-nums; }
.u{ font-family:var(--f-mono); font-size:.6em; color:var(--on-skin-dim); }

.sec-head{ padding:0 var(--gut); max-width:1500px; margin:0 auto 60px; }
.sec-head-tight{ margin-bottom:34px; padding:0; }
.sec-head-dark{ color:var(--bone); }
.sec-head-dark .eyebrow{ color:var(--stencil-lt); }
.sec-head-dark .lede{ color:var(--bone-dim); }

/* reveal */
.rev{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rev.is-in{ opacity:1; transform:none; }

/* ---------- 9. HERO ---------- */
.hero{
  position:relative; margin-left:var(--rail);
  min-height:100svh; display:flex; align-items:center;
  padding:116px var(--gut) 84px;
  background:var(--skin);
}
/* Product shots are photographed on white. `multiply` drops the white into the
   page. Blending resolves inside the nearest stacking context, so each figure
   carries the ground colour itself — that keeps it correct even when the figure
   is transformed, animated or parallaxed. */
.on-skin{ background:var(--skin); }
.on-skin img{ mix-blend-mode:multiply; }
.hero-grid{
  width:100%; max-width:1500px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:56px; align-items:center;
}
@media (min-width:1000px){ .hero-grid{ grid-template-columns:1.08fr .92fr; gap:48px; } }

.hero-title{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(58px,9.1vw,140px); line-height:.84; letter-spacing:-.02em;
  text-transform:uppercase; margin:4px 0 24px;
}
.hero-title .line{ display:block; }
.hero-title .word{ position:relative; display:inline-block; margin-right:.22em; }
.hero-title .w-out{
  position:absolute; inset:0; color:transparent;
  -webkit-text-stroke:1.4px var(--stencil);
  opacity:0; animation:outIn .5s var(--ease) forwards; animation-delay:calc(.15s + var(--i)*.13s);
}
.hero-title .w-fill{
  position:relative; display:inline-block; color:var(--ink);
  clip-path:inset(100% 0 0 0);
  animation:fillIn .82s var(--ease) forwards; animation-delay:calc(.42s + var(--i)*.13s);
}
.hero-title .dot{ color:var(--stencil); }
@keyframes outIn{ to{ opacity:1; } }
@keyframes fillIn{ to{ clip-path:inset(0 0 0 0); } }

.hero-lede{ max-width:44ch; color:var(--on-skin-dim); font-size:clamp(15.5px,1.1vw,17.5px); transition-delay:.5s; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 30px; transition-delay:.6s; }
.hero-rating{
  font:400 11.5px/1 var(--f-mono); color:var(--on-skin-dim);
  letter-spacing:.06em; margin-bottom:22px; transition-delay:.65s;
}
.hero-rating b{ color:var(--ink); font-weight:600; }
.hero-spec{
  display:flex; flex-wrap:wrap; gap:30px;
  border-top:1px solid rgba(20,16,14,.2); padding-top:16px; transition-delay:.7s;
}
.hero-spec dt{ font:400 9.5px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--on-skin-dim); margin-bottom:8px; }
.hero-spec dd{ font-family:var(--f-mono); font-weight:600; font-size:19px; }
.eyebrow.rev{ transition-delay:.35s; }

/* hero art */
.hero-art{ position:relative; min-height:min(62vh,540px); }
.hero-sheet{
  position:relative; z-index:2; width:min(100%,520px); margin-left:auto;
  animation:float 9s ease-in-out infinite;
}
.hero-sheet img{ width:100%; }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-14px) rotate(-.6deg);} }

.hero-inset{
  position:absolute; z-index:3; left:0; bottom:2%; width:min(52%,250px);
  border:5px solid var(--skin-lit); border-radius:2px; overflow:hidden;
  box-shadow:0 22px 44px rgba(60,38,24,.34);
}
.hero-inset img{ width:100%; aspect-ratio:3/2; object-fit:cover; filter:grayscale(.35) contrast(1.06); }
/* the in-use frame carries the brand's own colour — leave it graded as shot */
.hero-inset-real{ width:min(60%,300px); }
.hero-inset-real img{ aspect-ratio:16/9; filter:contrast(1.04) saturate(1.05); }
.hero-inset figcaption{
  background:var(--ink); color:var(--bone-dim); padding:7px 10px;
  font:400 9px/1.2 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
}
.hero-tag{
  position:absolute; z-index:4; right:2%; top:4%;
  font:400 10px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--stencil); border:1px solid var(--stencil); border-radius:100px; padding:9px 15px;
  background:rgba(240,214,193,.55);
}

.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:22px; height:36px; border:1px solid rgba(20,16,14,.4); border-radius:20px;
  transition:opacity .4s;
}
.scroll-cue i{
  position:absolute; left:50%; top:7px; width:2px; height:7px; margin-left:-1px;
  background:var(--ink); border-radius:2px; animation:cue 1.7s ease-in-out infinite;
}
@keyframes cue{ 0%{ transform:translateY(0); opacity:0;} 30%{opacity:1;} 100%{ transform:translateY(14px); opacity:0;} }
.scroll-cue.is-off{ opacity:0; pointer-events:none; }

/* ---------- 10. MARQUEE ---------- */
.marquee{
  margin-left:var(--rail); background:var(--ink); color:var(--skin-lit);
  padding:20px 0; overflow:hidden; border-block:1px solid var(--ink-line);
}
.marquee-track{ display:flex; width:max-content; will-change:transform; }
.marquee-set{ display:flex; align-items:center; flex:none; }
.marquee-set span{
  font-family:var(--f-disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,64px); line-height:1; letter-spacing:-.01em; white-space:nowrap;
}
.marquee-set em{
  flex:none; width:15px; height:15px; margin:0 30px; border-radius:50%;
  background:var(--stencil-lt);
}

/* ---------- 11. DEPTH INSTRUMENT ---------- */
.depth{ margin-left:var(--rail); position:relative; }
.depth-stage{ height:240vh; }
.depth-inner{
  position:sticky; top:0; min-height:100svh; display:grid; align-items:center;
  grid-template-columns:1fr; gap:40px; padding:96px var(--gut) 60px;
  max-width:1500px; margin:0 auto;
}
@media (min-width:1000px){ .depth-inner{ grid-template-columns:.86fr 1.14fr; gap:60px; padding-block:60px; } }
.depth-copy .h2{ margin-bottom:22px; }
.depth-notes{ margin-top:26px; border-top:1px solid rgba(20,16,14,.2); }
.depth-notes li{
  padding:13px 0; border-bottom:1px solid rgba(20,16,14,.12);
  font:400 13px/1.5 var(--f-mono); color:var(--on-skin-dim);
}
.depth-notes b{ color:var(--ink); font-weight:600; }

.depth-instrument{ position:relative; }
.instr-read{
  position:absolute; top:-6px; right:0; z-index:2; display:flex; align-items:baseline; gap:5px;
  color:var(--stencil);
}
.instr-num{ font:600 clamp(38px,4.6vw,64px)/1 var(--f-mono); font-variant-numeric:tabular-nums; }
.instr-unit{ font:400 14px/1 var(--f-mono); }
.instr-svg{ width:100%; height:auto; overflow:visible; }
.i-lab{ font:400 10px var(--f-mono); fill:var(--on-skin-dim); letter-spacing:.14em; text-transform:uppercase; }
.i-lab-key{ fill:var(--ink); }
.i-hair{ stroke:rgba(20,16,14,.18); stroke-width:1; stroke-dasharray:3 5; }
.i-edge{ fill:none; stroke:var(--skin-edge); stroke-width:1.5; }
.i-surface{ stroke:var(--ink); stroke-width:2; }
.i-mm line{ stroke:rgba(20,16,14,.22); stroke-width:1; stroke-dasharray:2 6; }
.i-mmlab text{ font:400 11px var(--f-mono); fill:var(--on-skin-dim); }
.i-bench{ fill:var(--ink); }
.i-needle{ will-change:transform; }
.i-grip{ fill:var(--ink); }
.i-glint{ fill:#4A403A; }
.i-tip{ fill:#9A9AA4; }
.i-ink{ stroke:var(--ink); stroke-width:9; stroke-linecap:round; }
.i-pool{ fill:var(--ink); opacity:.85; }
.i-zone{ fill:var(--stencil); opacity:.16; }
.i-zone-edge{ stroke:var(--stencil); stroke-width:1; stroke-dasharray:5 4; opacity:.7; }
.i-zonelab{ font:600 11px var(--f-mono); fill:var(--stencil); letter-spacing:.02em; }
/* sits on the dark end of the sheet gradient, so it takes the ink colour —
   --on-skin-dim only reaches 3.3:1 down there */
.i-restlab{ font:400 11px var(--f-mono); fill:var(--ink); letter-spacing:.02em; }
.i-depthline{ stroke:var(--stencil); stroke-width:1.2; stroke-dasharray:4 6; opacity:.85; }
.instr-cap{
  margin-top:18px; font:400 11px/1.6 var(--f-mono); color:var(--on-skin-dim); max-width:46ch;
}

/* ---------- 12. PEEL DIVIDERS ---------- */
.peel{ position:relative; margin-left:var(--rail); line-height:0; }
.peel svg{ width:100%; height:clamp(60px,8vw,130px); display:block; }
/* Each divider's own paths fill the HALF THAT MATCHES THE SECTION IT TOUCHES,
   and the element background covers the other half — so both edges are seamless.
   to-ink:  skin section above -> ink below, ink is painted at the bottom.
   to-skin: ink section above  -> skin below, ink is painted at the top. */
.peel-to-ink{ background:var(--skin); }
.peel-to-ink path{ fill:var(--ink); }
.peel-to-skin{ background:var(--skin); }
.peel-to-skin path{ fill:var(--ink); }

/* ---------- 13. WHY (pinned beats) ---------- */
.why{ margin-left:var(--rail); background:var(--ink); color:var(--bone); }
.why-stage{ height:270vh; }
.why-inner{
  position:sticky; top:0; min-height:100svh; display:grid; align-items:center;
  grid-template-columns:1fr; gap:36px; padding:100px var(--gut);
  max-width:1500px; margin:0 auto;
}
@media (min-width:1000px){ .why-inner{ grid-template-columns:.9fr 1.1fr; gap:64px; } }
.why-media{ position:relative; aspect-ratio:4/5; max-height:70vh; }
.why-fig{ position:absolute; inset:0; opacity:0; transform:scale(1.05); transition:opacity .7s var(--ease), transform 1.1s var(--ease); }
.why-fig.is-on{ opacity:1; transform:none; }
.why-fig img{ width:100%; height:100%; object-fit:cover; border-radius:2px; filter:grayscale(.3) contrast(1.05) brightness(.9); }
.why-count{
  position:absolute; left:0; bottom:-34px;
  font:400 12px/1 var(--f-mono); color:var(--bone-dim); letter-spacing:.1em;
}
.why-count span{ color:var(--stencil-lt); }
.why-count i{ margin:0 6px; font-style:normal; opacity:.5; }

.why-beats{ display:grid; gap:clamp(26px,3vw,44px); }
.why-beat{ opacity:.24; transition:opacity .55s var(--ease), transform .55s var(--ease); transform:translateX(-8px); }
.why-beat.is-on{ opacity:1; transform:none; }
.why-beat h3{
  font-family:var(--f-disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(28px,3.4vw,52px); line-height:.95; margin-bottom:10px;
}
.why-beat.is-on h3{ color:var(--bone); }
.why-beat p{ color:var(--bone-dim); max-width:44ch; }

/* ---------- 14. THE SHEET ---------- */
.sheet{ margin-left:var(--rail); padding:clamp(80px,10vw,150px) 0 clamp(70px,9vw,130px); }
.sheet-grid{
  max-width:1500px; margin:0 auto; padding:0 var(--gut);
  display:grid; grid-template-columns:1fr; gap:44px; align-items:center;
}
@media (min-width:960px){ .sheet-grid{ grid-template-columns:1.2fr .8fr; gap:56px; } }

.sheet-main{ position:relative; }
.sheet-main img{ width:100%; }
/* Dimension brackets run parallel to the sheet's real edges. The corner pixels of
   assets/03.jpg were measured to get these: the 11in edge lies at 66.26deg and the
   8.5in edge at -17.49deg. Both sit just inside the edge, because the sheet fills
   the frame almost to the border and there is no room to bracket it from outside.
   Positions are percentages of a square figure, so % of width == % of height. */
.dim{
  position:absolute; height:1px; pointer-events:none;
  transform:translate(-50%,-50%) rotate(var(--rot));
}
.dim b{
  display:block; width:100%; height:100%; background:var(--stencil);
  transform:scaleX(0); transition:transform .9s var(--ease) .25s;
}
.dim b::before,.dim b::after{
  content:""; position:absolute; top:-5px; width:1px; height:11px; background:var(--stencil);
}
.dim b::before{ left:0; } .dim b::after{ right:0; }
.dim i{
  position:absolute; left:50%; top:50%;
  /* counter-rotated so the reading stays level, as it would on a drawing */
  transform:translate(-50%,-50%) rotate(calc(var(--rot) * -1));
  font:600 12px/1 var(--f-mono); font-style:normal;
  color:var(--stencil); background:var(--skin); padding:4px 8px; white-space:nowrap;
  opacity:0; transition:opacity .45s var(--ease) .8s;
}
.dim-long { --rot:66.26deg;  left:18.85%; top:55.74%; width:58.9%; }
.dim-short{ --rot:-17.49deg; left:63.25%; top:74.58%; width:61.9%; }

.sheet-main.is-in .dim b{ transform:scaleX(1); }
.sheet-main.is-in .dim i{ opacity:1; }

.sheet-side{ display:grid; gap:20px; }
.sheet-alt img{ width:100%; }
.sheet-note{ color:var(--on-skin-dim); max-width:36ch; }

/* ---------- 15. FILM ---------- */
.film{ margin-left:var(--rail); background:var(--ink); padding:clamp(60px,8vw,110px) 0; }
.film-stage{ padding:0 var(--gut); }
.film-frame{
  position:relative; margin:0 auto; max-width:1400px;
  border-radius:26px; overflow:hidden; background:#000;
  will-change:transform, border-radius;
}
.film-frame video{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.film-sound{
  position:absolute; right:16px; bottom:16px;
  background:rgba(20,16,14,.62); color:var(--bone); border:1px solid rgba(245,239,231,.32);
  padding:9px 15px; border-radius:100px; cursor:pointer;
  font:400 10px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.film-sound:hover{ background:var(--stencil); border-color:var(--stencil); }
.film-cap{
  text-align:center; margin-top:24px; color:var(--bone-dim);
  font:400 11px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase;
}

/* ---------- 16. WHO ---------- */
.who{ margin-left:var(--rail); background:var(--ink); padding:clamp(70px,9vw,130px) 0 clamp(80px,10vw,150px); }
.who .sec-head{ margin-bottom:52px; }
.who-grid{
  max-width:1500px; margin:0 auto; padding:0 var(--gut);
  display:grid; grid-template-columns:1fr; gap:30px;
}
@media (min-width:820px){ .who-grid{ grid-template-columns:repeat(3,1fr); gap:26px; } }
.card{
  background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:3px;
  padding:0 0 28px; color:var(--bone); will-change:transform;
  transition:border-color .35s, transform .25s var(--ease);
}
.card:hover{ border-color:var(--stencil-lt); }
/* The stagger uses margin, not transform. `transform` belongs to the reveal and
   the JS tilt; when the stagger also lived there the three fought each other and
   the cards drifted out of position after a hover. */
@media (min-width:820px){
  .card:nth-child(2){ margin-top:30px; }
  .card:nth-child(3){ margin-top:60px; }
}
.card-img{ overflow:hidden; }
.card-img img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  filter:grayscale(.45) contrast(1.05) brightness(.86);
  transition:transform .55s var(--ease), filter .45s;
}
.card:hover .card-img img{ transform:scale(1.05); filter:grayscale(0) contrast(1.05) brightness(.95); }
.card h3{
  font-family:var(--f-disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(24px,2.4vw,36px); line-height:1; margin:24px 24px 10px;
}
.card p{ margin:0 24px; color:var(--bone-dim); font-size:15px; }

/* ---------- 17. SPECS ---------- */
.specs{ margin-left:var(--rail); padding:clamp(80px,10vw,140px) 0; }
.specs-grid{
  max-width:1500px; margin:0 auto; padding:0 var(--gut);
  display:grid; grid-template-columns:1fr; gap:56px; align-items:start;
}
@media (min-width:960px){ .specs-grid{ grid-template-columns:1fr 1fr; gap:70px; } }
.spec-list{ border-top:1px solid var(--ink); margin-bottom:34px; }
.spec-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:16px 0; border-bottom:1px solid rgba(20,16,14,.18);
}
.spec-row dt{ font:400 10.5px/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--on-skin-dim); }
.spec-row dd{ font-family:var(--f-mono); font-weight:600; font-size:15px; text-align:right; }

.specs-box{ position:relative; }
/* One shot of the box does the whole job. An inset of assets/01.jpg used to sit
   over this, but it showed the same artwork and the same rolled sheet again. */
.box-art{ width:100%; }
.box-art img{ width:100%; }
.box-note{
  margin-top:10px; text-align:right; color:var(--on-skin-dim);
  font:400 11px/1.6 var(--f-mono);
}

/* ---------- 18. PORTFOLIO ----------
   A grid, not a horizontal scroller: it reflows for any number of tiles, whereas
   a track narrower than the viewport would pin the section and move nothing.
   These are artworks, so they keep their own colour — no grayscale grading. */
.work{
  margin-left:var(--rail); background:var(--ink);
  padding:clamp(70px,9vw,130px) 0 clamp(80px,10vw,150px);
}
.work-head{
  max-width:1500px; margin:0 auto clamp(36px,4vw,56px); padding:0 var(--gut); color:var(--bone);
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px;
}
.work-head .eyebrow{ color:var(--stencil-lt); }
.work-head .h2{ font-size:clamp(38px,5.4vw,80px); }
.work-note{ color:var(--bone-dim); font:400 12px/1.6 var(--f-mono); max-width:34ch; }
.work-note a{ color:var(--stencil-lt); text-decoration:none; white-space:nowrap; }
.work-note a:hover{ text-decoration:underline; }

.work-grid{
  max-width:1500px; margin:0 auto; padding:0 var(--gut);
  display:grid; grid-template-columns:1fr; gap:26px; align-items:start;
}
@media (min-width:760px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){
  .work-grid{ grid-template-columns:repeat(3,1fr); gap:24px; }
  /* Drop the middle column on every row. `nth-child(3n+2)` keys off the column,
     not the item, so the rhythm holds however many tiles there are — `even`
     would shift a different position on each row.
     Margin, not transform: the reveal owns transform (see the .who cards). */
  .work-grid .shot:nth-child(3n+2){ margin-top:44px; }
}
.shot{ position:relative; }
.shot img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:2px;
  background:var(--ink-soft);
  transition:transform .6s var(--ease);
}
.shot:hover img{ transform:scale(1.03); }
.shot figcaption{
  margin-top:10px; font:400 9.5px/1 var(--f-mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim);
}

/* ---------- 19. FAQ ---------- */
.faq{ margin-left:var(--rail); background:var(--ink); padding:clamp(70px,9vw,120px) 0 clamp(80px,10vw,140px); }
.faq-list{ max-width:1020px; margin:0 auto; padding:0 var(--gut); border-top:1px solid var(--ink-line); }
.q{ border-bottom:1px solid var(--ink-line); }
.q summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0; cursor:pointer; list-style:none; color:var(--bone);
  font-family:var(--f-disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(19px,2.1vw,30px); line-height:1.1;
  transition:color .3s;
}
.q summary::-webkit-details-marker{ display:none; }
.q summary:hover{ color:var(--stencil-lt); }
.q summary i{
  flex:none; position:relative; width:16px; height:16px;
}
.q summary i::before,.q summary i::after{
  content:""; position:absolute; left:0; top:50%; width:16px; height:1.5px; background:currentColor;
  transition:transform .35s var(--ease);
}
.q summary i::after{ transform:rotate(90deg); }
.q[open] summary i::after{ transform:rotate(0deg); }
.q[open] summary{ color:var(--stencil-lt); }
.a{ overflow:hidden; }
.a p{ padding:0 0 24px; max-width:62ch; color:var(--bone-dim); }
.q[open] .a{ animation:slide .45s var(--ease); }
@keyframes slide{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none;} }

/* ---------- 20. BUY ---------- */
.buy{
  position:relative; margin-left:var(--rail); background:var(--ink); color:var(--bone);
  padding:clamp(100px,13vw,190px) var(--gut); overflow:hidden; text-align:center;
}
.buy-bg{ position:absolute; inset:-12% 0; opacity:.16; will-change:transform; }
.buy-bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.2); }
.buy-in{ position:relative; z-index:2; }
.buy-title{
  font-family:var(--f-disp); font-weight:900; text-transform:uppercase;
  font-size:clamp(50px,11vw,180px); line-height:.84; letter-spacing:-.02em;
}
.buy-sub{
  margin:22px 0 34px; color:var(--bone-dim);
  font:400 11.5px/1.7 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
}
.buy .btn{ background:var(--skin); border-color:var(--skin); color:var(--ink); }
.buy .btn:hover{ background:var(--stencil-lt); border-color:var(--stencil-lt); color:var(--ink); }
.buy-mark{
  position:absolute; z-index:1; left:50%; bottom:-46%; width:min(76vw,660px); height:auto;
  transform:translateX(-50%); opacity:.07; pointer-events:none;
}

/* ---------- 21. FOOTER ---------- */
.foot{ margin-left:var(--rail); background:var(--ink); color:var(--bone-dim); border-top:1px solid var(--ink-line); padding:38px var(--gut) 46px; }
.foot-in{ max-width:1500px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:22px 34px; }
.foot .nav-brand{ color:var(--bone); margin-right:0; }
.foot-links{ display:flex; flex-wrap:wrap; gap:20px; margin-right:auto; }
.foot-links a{
  text-decoration:none; font:400 10.5px/1 var(--f-mono); letter-spacing:.12em;
  text-transform:uppercase; transition:color .25s;
}
.foot-links a:hover{ color:var(--stencil-lt); }
.foot-fine{ width:100%; font:400 10px/1.6 var(--f-mono); opacity:.6; }

/* ---------- 21b. SMALL SCREENS ----------
   A pinned two-part panel cannot fit a short viewport — at <1000px the stages
   unpin and stack. The depth instrument then drives off its own position in the
   viewport (see elProg in main.js) rather than off a pinned stage. */
@media (max-width:999px){
  .depth-stage{ height:auto; }
  .depth-inner{ position:static; min-height:0; padding:clamp(64px,11vw,96px) var(--gut); }
  .instr-read{ position:static; margin-bottom:10px; justify-content:flex-start; }

  .why-stage{ height:auto; }
  .why-inner{
    position:static; min-height:0; display:flex; flex-direction:column;
    gap:20px; padding:clamp(64px,11vw,96px) var(--gut);
  }
  .why-media,.why-beats{ display:contents; }
  .why-count{ display:none; }
  /* aspect-ratio on the figure would give it a definite cross size and stop the
     flex stretch, so the ratio lives on the image instead. */
  .why-fig{ position:static; opacity:1; transform:none; width:100%; }
  .why-fig img{ width:100%; height:auto; aspect-ratio:4/3; }
  .why-beat{ opacity:1; transform:none; margin-bottom:14px; }
  .why-fig[data-beat="0"]{ order:1 } .why-beat[data-beat="0"]{ order:2 }
  .why-fig[data-beat="1"]{ order:3 } .why-beat[data-beat="1"]{ order:4 }
  .why-fig[data-beat="2"]{ order:5 } .why-beat[data-beat="2"]{ order:6 }

  .work-head{ display:block; }
  .work-note{ margin-top:12px; }
  .work-grid .shot:nth-child(n){ margin-top:0; }   /* no stagger below 3 columns */
  .hero-art{ min-height:0; }
  .hero-sheet{ width:min(86%,420px); }
  .hero-inset{ width:min(46%,190px); }
  .card:nth-child(n){ margin-top:0; }
}

@media (max-width:560px){
  .nav{ gap:12px; }
  .nav-brand span{ display:none; }          /* mark alone; keeps the CTA on screen */
  .nav-reseller{ font-size:9.5px; letter-spacing:.06em; }
  .nav-reseller span{ display:none; }       /* drop the arrow; the label still fits */
  .btn-sm{ padding:10px 13px; font-size:9.5px; letter-spacing:.06em; }
  .eyebrow{ font-size:9.5px; letter-spacing:.11em; }   /* keeps the spec strip on one line */
}

/* ---------- 21c. MODAL ---------- */
.linkish{
  background:none; border:0; padding:0; cursor:pointer;
  font:400 10.5px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
  color:inherit; transition:color .25s;
}
.linkish:hover{ color:var(--stencil-lt); }

.modal{
  width:min(720px,calc(100vw - 2rem)); max-height:min(86vh,760px);
  padding:0; border:0; border-radius:4px; overflow:hidden;
  background:var(--ink-soft); color:var(--bone);
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}
.modal::backdrop{
  background:rgba(12,9,8,.72);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.modal[open]{ animation:modalIn .4s var(--ease); }
.modal[open]::backdrop{ animation:fadeIn .35s ease; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(24px) scale(.98);} to{ opacity:1; transform:none;} }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

.modal-panel{ display:flex; flex-direction:column; max-height:inherit; }
.modal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:26px clamp(20px,4vw,36px) 18px; border-bottom:1px solid var(--ink-line);
}
.modal-head .eyebrow{ color:var(--stencil-lt); margin-bottom:8px; }
.modal-title{
  font-family:var(--f-disp); font-weight:900; text-transform:uppercase;
  font-size:clamp(26px,3.4vw,40px); line-height:.95; letter-spacing:-.01em;
}
.modal-close{
  flex:none; width:36px; height:36px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--ink-line); color:var(--bone-dim);
  font-size:14px; line-height:1; transition:background-color .25s, color .25s, border-color .25s;
}
.modal-close:hover{ background:var(--stencil); border-color:var(--stencil); color:#fff; }

.modal-body{
  overflow-y:auto; padding:22px clamp(20px,4vw,36px) 28px;
  overscroll-behavior:contain;
}
.modal-date{
  font:400 10px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim); margin-bottom:22px;
}
.modal-body h3{
  font:600 11px/1.4 var(--f-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--stencil-lt); margin:24px 0 8px;
}
.modal-body h3:first-of-type{ margin-top:0; }
.modal-body p{ color:var(--bone-dim); font-size:15px; margin-bottom:10px; max-width:62ch; }
.modal-body ul{ margin:0 0 12px; }
.modal-body li{
  color:var(--bone-dim); font-size:15px; padding:4px 0 4px 16px; position:relative;
}
.modal-body li::before{
  content:""; position:absolute; left:0; top:14px;
  width:5px; height:5px; border-radius:50%; background:var(--stencil-lt);
}
.modal-body b{ color:var(--bone); font-weight:600; }
.modal-body a{ color:var(--stencil-lt); }
.modal-foot{
  padding:16px clamp(20px,4vw,36px); border-top:1px solid var(--ink-line);
  display:flex; justify-content:flex-end;
}
.modal-foot .btn{ background:var(--skin); border-color:var(--skin); color:var(--ink); }
.modal-foot .btn:hover{ background:var(--stencil-lt); border-color:var(--stencil-lt); }

/* ---------- 22. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .rev{ opacity:1; transform:none; }
  .hero-title .w-fill{ clip-path:inset(0); }
  .hero-title .w-out{ opacity:0; }
  .hero-sheet{ animation:none; }
  .scroll-cue i{ animation:none; }
  .depth-stage,.why-stage{ height:auto; }
  .depth-inner,.why-inner{ position:static; min-height:0; }
  .why-fig{ position:relative; opacity:1; transform:none; }
  .why-media{ aspect-ratio:auto; max-height:none; display:grid; gap:14px; }
  .why-beat{ opacity:1; transform:none; }
  .why-count{ display:none; }
  .dim b{ transform:scaleX(1); }
  .dim i{ opacity:1; }
  .card:nth-child(n){ margin-top:0; }
  .cursor{ display:none; }
  .modal[open],.modal[open]::backdrop{ animation:none; }
}