/* =========================================================
   ALLEGEDLY — design tokens & global system
   Bureau Gris. Gunmetal, platinum, silver. Editorial, culture-grade.
   ========================================================= */

:root{
  --sans:'Bebas Neue','Impact',sans-serif;
  --mono:'Departure Mono','Space Mono','Courier New',monospace;
  --data:'Departure Mono','Share Tech Mono',monospace;
  --serif:'Instrument Serif',Georgia,serif;

  /* chromatic — red stays only for footnotes: .fn, .allegedly, .as, verification flip */
  --red:oklch(55% 0.22 28);
  --red-deep:oklch(42% 0.20 28);
  --teal:#1a8c68;
  --orange:#e8541e;
  --purple:#7c6ef0;
  --amber:#c9a832;

  /* Bureau Gris — cool blue-graphite neutrals, tinted toward 252° */
  --dark:oklch(8% 0.006 252);
  --panel:oklch(13% 0.007 252);
  --panel-2:oklch(18% 0.008 255);
  --silver:oklch(56% 0.008 252);
  --silver-bright:oklch(72% 0.007 250);
  --line:oklch(56% 0.008 252 / 0.14);
  --light:oklch(93% 0.004 248);
  --light-2:oklch(82% 0.006 248);
  --ink:oklch(10% 0.008 252);

  --max:1200px;
  --gutter:clamp(20px, 5vw, 64px);
  --pad-y:clamp(72px, 12vw, 160px);

  --bezier:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--dark);color:var(--light);}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}
}
body{
  font-family:var(--mono);
  font-size:13px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{background:var(--silver);color:var(--dark);}

/* =========================================================
   WebGL paper-grain layer
   ========================================================= */
canvas#grain{
  position:fixed; inset:0; width:100vw; height:100vh;
  pointer-events:none;
  z-index:0;
  opacity:0.16;
}
@media (prefers-reduced-motion: reduce){
  canvas#grain{display:none;}
}

/* =========================================================
   Lenis smooth scroll baseline
   ========================================================= */
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-scrolling iframe{pointer-events:none;}

/* split-text characters: kerning is lost when each char becomes an inline-block, so
   we tighten and turn kerning off for consistent rhythm. */
.h-char{
  letter-spacing:-0.045em;
  font-kerning:none;
  font-feature-settings:"kern" 0;
}
.disp .char, .disp .word{display:inline-block; will-change:transform,opacity;}
/* mega-letter overflow clip — lets chars enter from below */
.h-mega{overflow:hidden; padding-bottom:0.08em;}

/* main + classified-bar stack ABOVE the grain canvas */
main#root, .classified-bar, #cursor-crosshair, #font-toggle{position:relative; z-index:2;}

/* =========================================================
   Cursor crosshair
   ========================================================= */
html.has-crosshair, html.has-crosshair *{cursor:none !important;}
html.has-crosshair a, html.has-crosshair button, html.has-crosshair [data-mag], html.has-crosshair input, html.has-crosshair textarea, html.has-crosshair label{cursor:none !important;}

#cursor-crosshair{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  --cx:0px; --cy:0px;
  mix-blend-mode:difference;
}
#cursor-crosshair .cx-v{
  position:absolute; top:0; bottom:0; left:var(--cx);
  width:1px; background:oklch(56% 0.008 252 / 0.40);
}
#cursor-crosshair .cx-h{
  position:absolute; left:0; right:0; top:var(--cy);
  height:1px; background:oklch(56% 0.008 252 / 0.40);
}
#cursor-crosshair .cx-dot{
  position:absolute; left:var(--cx); top:var(--cy);
  width:18px; height:18px; transform:translate(-50%,-50%);
  border:1.5px solid var(--silver); border-radius:50%;
  background:transparent;
}
#cursor-crosshair .cx-dot::after{
  content:''; position:absolute; inset:5px; border-radius:50%;
  background:var(--silver);
}
#cursor-crosshair .cx-label{
  position:absolute; left:calc(var(--cx) + 24px); top:calc(var(--cy) + 16px);
  font-family:var(--data); font-size:9px; letter-spacing:0.14em;
  color:#fff; text-transform:uppercase; white-space:nowrap;
  opacity:0.85;
  display:inline-flex; align-items:center; gap:8px;
}
#cursor-crosshair .cx-label #cx-mode{
  background:var(--silver); color:var(--dark); padding:2px 6px; letter-spacing:0.18em;
  transition:background 0.25s ease, transform 0.25s var(--bezier);
}
#cursor-crosshair[data-mode="CLICK"] #cx-mode{background:var(--light); color:var(--ink);}
#cursor-crosshair[data-mode="DRAG"]  #cx-mode{background:var(--amber); color:var(--ink);}
#cursor-crosshair[data-mode="PEEK"]  #cx-mode{background:var(--dark); color:var(--silver); box-shadow:inset 0 0 0 1px var(--silver);}
#cursor-crosshair[data-mode="TYPE"]  #cx-mode{background:var(--teal); color:#fff;}
#cursor-crosshair[data-mode="SCRUB"] #cx-mode{background:var(--purple); color:#fff;}
#cursor-crosshair[data-mode="READ"]  #cx-mode{background:transparent; color:var(--light); box-shadow:inset 0 0 0 1px oklch(93% 0.004 248 / 0.5);}
#cursor-crosshair .cx-label .cx-sep{opacity:0.4;}

/* enlarge ring on interactive */
#cursor-crosshair[data-mode="CLICK"] .cx-dot,
#cursor-crosshair[data-mode="DRAG"] .cx-dot,
#cursor-crosshair[data-mode="PEEK"] .cx-dot{
  transform:translate(-50%,-50%) scale(1.6);
  transition:transform 0.25s var(--bezier);
}
#cursor-crosshair .cx-dot{transition:transform 0.25s var(--bezier);}

/* =========================================================
   Font toggle widget
   ========================================================= */
#font-toggle{
  position:fixed; right:14px; bottom:14px; z-index:200;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(7,9,11,0.85);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  padding:6px 8px;
  font-family:var(--data); font-size:9px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--light);
}
#font-toggle .ft-label{opacity:0.4; padding-right:4px; border-right:1px solid var(--line);}
#font-toggle .ft-btn{
  background:transparent; color:var(--light);
  border:1px solid rgba(242,239,232,0.18);
  font-family:var(--data); font-size:9px;
  letter-spacing:0.16em;
  width:22px; height:22px; line-height:1;
  cursor:pointer;
  transition:all 0.2s var(--bezier);
}
#font-toggle .ft-btn:hover{border-color:var(--silver-bright); color:var(--silver-bright);}
#font-toggle .ft-btn.ft-active{background:var(--silver); color:var(--dark); border-color:var(--silver);}
#font-toggle .ft-hint{opacity:0.3; padding-left:4px;}
html.has-crosshair #font-toggle, html.has-crosshair #font-toggle *{cursor:none !important;}

/* font toggle: B = same as default (Departure Mono is now the root default) */
html[data-font="departure"]{
  --mono: 'Departure Mono','Space Mono','Courier New',monospace;
  --data: 'Departure Mono','Share Tech Mono',monospace;
}
/* font toggle: A = revert to Space Mono (the classic warm build) */
html[data-font="canon"]{
  --mono: 'Space Mono','Courier New',monospace;
  --data: 'Share Tech Mono',monospace;
}
/* font toggle: C = Departure Mono + Fraunces serif */
html[data-font="reset"]{
  --mono: 'Departure Mono','Space Mono','Courier New',monospace;
  --data: 'Departure Mono','Share Tech Mono',monospace;
  --serif: 'Fraunces','Instrument Serif',Georgia,serif;
}
html[data-font="reset"] .disp{font-weight:300; letter-spacing:-0.025em;}
html[data-font="reset"] .disp em{font-style:italic; font-weight:400;}

/* =========================================================
   Classified bar (top)
   ========================================================= */
.classified-bar{
  position:sticky; top:0; z-index:100;
  background:var(--panel-2); color:var(--silver);
  font-family:var(--data); font-size:9px; letter-spacing:0.18em;
  text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.classified-bar .bar-inner{
  max-width:none; padding:6px var(--gutter);
  display:flex; gap:clamp(12px,3vw,32px); align-items:center; justify-content:space-between;
  flex-wrap:nowrap; overflow:hidden;
}
.classified-bar .bar-inner > span{white-space:nowrap;}
.classified-bar .bar-inner > span:first-child{
  display:inline-flex; align-items:center; gap:6px;
}
.bar-link{
  color:var(--silver-bright); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:1px;
  transition:color .15s ease;
}
.bar-link:hover{color:var(--light);}
.hide-sm{display:none;}
@media (min-width:760px){ .hide-sm{display:inline;} }

/* =========================================================
   Section + layout primitives
   ========================================================= */
section{position:relative; overflow:hidden;}
.s-dark{background:var(--dark); color:var(--light);}
.s-panel{background:var(--panel); color:var(--light);}
.s-light{background:var(--light); color:var(--ink);}
.s-red{background:var(--silver); color:var(--dark);}

.wrap{
  max-width:var(--max); margin:0 auto;
  padding:var(--pad-y) var(--gutter);
  position:relative;
}

/* texture overlays */
.grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:0.035;
  background-image:
    repeating-linear-gradient(0deg,currentColor 0,currentColor 1px,transparent 1px,transparent 80px),
    repeating-linear-gradient(90deg,currentColor 0,currentColor 1px,transparent 1px,transparent 80px);
}
.scan{
  position:absolute; inset:0; pointer-events:none; opacity:0.35;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,oklch(56% 0.008 252 / 0.018) 2px,oklch(56% 0.008 252 / 0.018) 4px);
}
.noise{
  position:absolute; inset:0; pointer-events:none; opacity:0.05;
  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 baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.diag{
  position:absolute;
  font-family:var(--sans);
  font-size:clamp(120px,22vw,280px);
  line-height:1;
  opacity:0.025;
  transform:rotate(-8deg);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}

/* divider */
.div-line{
  max-width:var(--max); margin:0 auto;
  height:1px; background:var(--line);
}

/* =========================================================
   Type system
   ========================================================= */
.t-sans{font-family:var(--sans); letter-spacing:0.02em;}
.t-serif{font-family:var(--serif);}
.t-mono{font-family:var(--mono);}
.t-data{font-family:var(--data); letter-spacing:0.14em; text-transform:uppercase;}

.eyebrow{
  font-family:var(--data);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--light);
  opacity:0.4;
}
.s-light .eyebrow{opacity:0.5;}

.disp{
  font-family:var(--serif);
  font-size:clamp(34px,6.2vw,84px);
  line-height:1.02;
  letter-spacing:-0.01em;
  font-weight:400;
}
.disp em{font-style:italic;}

.h-mega{
  font-family:var(--sans);
  font-size:clamp(72px,18vw,220px);
  line-height:0.95;
  letter-spacing:-0.02em;
}
.h-big{
  font-family:var(--sans);
  font-size:clamp(40px,8vw,110px);
  line-height:0.88;
  letter-spacing:-0.01em;
}

.body-mono{
  font-family:var(--mono);
  font-size:clamp(12px,1.4vw,14px);
  line-height:1.8;
  opacity:0.6;
  max-width:60ch;
}
.s-light .body-mono{opacity:0.7;}

/* footnote */
.fn{
  font-family:var(--mono);
  font-size:clamp(10px,1.1vw,12px);
  color:var(--red);
  opacity:0.6;
  line-height:1.8;
  max-width:560px;
  margin-top:clamp(16px,2.5vw,28px);
}
.fn::before{content:'* ';}

.s-light .fn{opacity:0.65;}

/* Alg suffix — period→comma flip + "Allegedly" slide-in
   Mirrors the vloop claim flip pattern exactly. */
.alg-wrap{ display:inline; }

.alg-punct{
  display:inline-block;
  position:relative;
}
.alg-punct-from,
.alg-punct-to{
  display:inline-block;
  transition:transform 0.45s var(--bezier), opacity 0.4s var(--bezier);
}
.alg-punct-to{
  position:absolute; left:0; top:0;
  transform:translateY(80%) skewY(6deg);
  opacity:0;
  color:var(--red);
}
.alg-word{
  display:inline-block;
  font-family:var(--serif);
  font-style:italic;
  color:var(--red);
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.5s var(--bezier) 0.25s, transform 0.5s var(--bezier) 0.25s;
}
/* triggered — class added by bootAlgFlips() */
.alg-wrap.alg-flipped .alg-punct-from{
  transform:translateY(-80%) skewY(-6deg);
  opacity:0;
}
.alg-wrap.alg-flipped .alg-punct-to{
  transform:translateY(0) skewY(0);
  opacity:1;
}
.alg-wrap.alg-flipped .alg-word{
  opacity:1;
  transform:translateY(0);
}

.as{color:var(--red); font-style:normal; cursor:help;}

/* =========================================================
   Logo mark + lockup
   ========================================================= */
.logo-mark{
  font-family:var(--serif);
  font-style:italic;
  color:var(--red);
  line-height:1;
  display:inline-block;
}
.logo{
  display:inline-flex;
  align-items:baseline;
  gap:0.22em;
}
.logo-wordmark{
  font-family:var(--sans);
  letter-spacing:0.04em;
}
/* size variants */
.logo--sm  { font-size:14px; }
.logo--md  { font-size:24px; }
.logo--lg  { font-size:clamp(36px,5vw,56px); }
.logo--xl  { font-size:clamp(56px,9vw,96px); }

/* standalone mark used in chrome */
.classified-bar .bar-mark{
  font-family:var(--serif);
  font-style:italic;
  color:var(--red);
  margin-right:2px;
}

/* strike */
.strike{text-decoration:line-through; text-decoration-color:var(--red); text-decoration-thickness:3px;}

/* zip-tie pill */
.zip{
  display:inline-block;
  background:var(--silver); color:var(--dark);
  font-family:var(--data); font-size:9px;
  letter-spacing:0.16em; text-transform:uppercase;
  padding:4px 12px;
  transform:rotate(-1.5deg);
  white-space:nowrap;
  border-radius:1px;
}
.zip.ghost{background:transparent; color:var(--light); border:1px solid oklch(93% 0.004 248 / 0.18);}
.s-light .zip.ghost{color:var(--ink); border-color:rgba(0,0,0,0.18);}

/* arrow item */
.arr{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  opacity:0.55;
  display:flex; align-items:baseline; gap:8px;
}
.arr::before{content:'→'; opacity:0.5;}

/* stamp */
.stamp{
  display:inline-block;
  border:3px solid var(--silver); color:var(--silver);
  font-family:var(--sans); font-size:clamp(14px,2.5vw,20px);
  letter-spacing:0.1em; padding:3px 14px;
  transform:rotate(-4deg);
  opacity:0.55;
}

/* quote glyphs */
.q::before{content:'\201C';}
.q::after{content:'\201D';}

/* =========================================================
   Card & dossier
   ========================================================= */
.dossier{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:2px;
  padding:clamp(18px,2.5vw,28px);
  position:relative;
  overflow:hidden;
  transition:transform 0.45s var(--bezier), border-color 0.3s ease;
}
.dossier::before{
  content:''; position:absolute; top:0; left:0; right:0;
  height:1px; background:var(--silver); opacity:0.5;
}
.dossier:hover{transform:translateY(-2px); border-color:oklch(93% 0.004 248 / 0.16);}
.dossier .id{
  font-family:var(--data);
  font-size:9px; letter-spacing:0.18em;
  opacity:0.3; text-transform:uppercase;
  margin-bottom:14px;
}
.dossier h3{
  font-family:var(--sans);
  font-size:clamp(20px,3vw,28px);
  letter-spacing:0.04em;
  margin-bottom:8px;
}
.dossier p{
  font-size:clamp(11px,1.3vw,12.5px);
  opacity:0.55; line-height:1.85;
}
.s-light .dossier{background:#fff; border-color:rgba(0,0,0,0.07);}
.s-light .dossier p{opacity:0.65;}

/* =========================================================
   Grid helpers
   ========================================================= */
.grid{display:grid; gap:clamp(12px,2vw,24px);}
.g-2{grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr));}
.g-3{grid-template-columns:repeat(auto-fit, minmax(min(220px,100%), 1fr));}
.g-4{grid-template-columns:repeat(auto-fit, minmax(min(160px,45%), 1fr));}

/* offset block — REPLACED. The old red border-left was the banned side-stripe pattern.
   New: a leading red asterisk plus generous left padding. Visually quieter, more honest. */
.offset{
  position:relative;
  padding-left:clamp(22px,2.8vw,40px);
}
.offset::before{
  content:'';
  position:absolute;
  left:0; top:0.2em; bottom:auto;
  width:8px; height:8px;
  background:var(--silver);
  border-radius:50%;
  box-shadow:0 0 0 4px oklch(56% 0.008 252 / 0.14);
}
/* on light surfaces tone down the halo */
.s-light .offset::before{box-shadow:0 0 0 4px oklch(56% 0.008 252 / 0.10);}

/* case-block — the new structured pattern. Use this for any "WHAT WE BELIEVE / WHAT WE'RE BUILDING"
   triple where .offset was used before. Big numeral + hairline rule + body. */
.case-block{
  position:relative;
  padding-top:clamp(18px,2vw,28px);
}
.case-block::before{
  content:''; display:block;
  height:1px; background:currentColor; opacity:0.12;
  margin-bottom:clamp(14px,1.8vw,22px);
  width:100%;
  transform-origin:left;
  transform:scaleX(var(--rule, 0));
  transition:transform 1.2s var(--bezier);
}
.case-block.in-view::before{transform:scaleX(1);}
.case-block .case-num{
  font-family:var(--sans);
  font-size:clamp(28px,3.2vw,44px);
  line-height:1;
  color:var(--silver);
  letter-spacing:0.02em;
  display:inline-block;
  margin-bottom:clamp(8px,1vw,14px);
}
.case-block .case-label{
  font-family:var(--data);
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--silver-bright); opacity:0.9;
  margin-bottom:10px; display:block;
}
.case-block .case-body{
  font-family:var(--mono);
  font-size:clamp(12px,1.3vw,13.5px);
  line-height:1.85;
  opacity:0.72;
  max-width:48ch;
}
.s-light .case-block .case-body{opacity:0.78;}

/* editorial spread — 1 tall + 2 short, with deliberate misalignment. Replaces .grid.g-3
   when used in Problem, WhyNow, Manifesto repeats. */
.spread{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(20px,3vw,48px);
  align-items:start;
}
.spread > *:nth-child(1){grid-row:span 2;}
.spread > *:nth-child(2){margin-top:clamp(40px,6vw,80px);}
.spread > *:nth-child(3){margin-top:clamp(80px,12vw,160px);}
@media (max-width:760px){
  .spread{grid-template-columns:1fr;}
  .spread > *{margin-top:0 !important; grid-row:auto !important;}
}

/* spec-sheet — a ticker-tape-style data row that replaces the
   3-up metric-card pattern in WhyNow and Comp. */
.spec-sheet{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:clamp(24px,3.5vw,48px);
}
.spec-sheet .row-line{
  display:grid;
  grid-template-columns:8ch 1fr 14ch 1fr;
  gap:clamp(12px,2vw,28px);
  padding:clamp(14px,1.6vw,22px) 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.spec-sheet .row-line:last-child{border-bottom:none;}
.spec-sheet .sl-id{
  font-family:var(--data); font-size:10px; letter-spacing:0.18em;
  color:var(--silver); opacity:0.8;
}
.spec-sheet .sl-label{
  font-family:var(--sans); font-size:clamp(16px,2vw,24px);
  letter-spacing:0.04em;
}
.spec-sheet .sl-value{
  font-family:var(--sans); font-size:clamp(28px,4.2vw,56px);
  letter-spacing:-0.01em; line-height:1;
  text-align:right; font-variant-numeric:tabular-nums;
}
.spec-sheet .sl-body{
  font-family:var(--mono); font-size:clamp(11px,1.2vw,12.5px);
  line-height:1.7; opacity:0.6;
}
.s-light .spec-sheet .sl-body{opacity:0.7;}
@media (max-width:880px){
  .spec-sheet .row-line{grid-template-columns:6ch 1fr; row-gap:6px;}
  .spec-sheet .sl-value{grid-column:1/-1; text-align:left;}
  .spec-sheet .sl-body{grid-column:1/-1;}
}

/* metric */
.metric{
  border:1px solid var(--line);
  border-radius:2px;
  padding:clamp(14px,2vw,22px) clamp(12px,2vw,18px);
  text-align:left;
}
.s-light .metric{border-color:rgba(0,0,0,0.08); background:#fff;}
.metric .v{
  font-family:var(--sans);
  font-size:clamp(26px,5vw,52px);
  line-height:1;
  letter-spacing:-0.01em;
}
.metric .l{
  font-family:var(--data); font-size:9px;
  letter-spacing:0.16em; text-transform:uppercase;
  opacity:0.35; margin-top:8px;
}

/* =========================================================
   Reveal on scroll — handled by motion.js (GSAP/ScrollTrigger).
   We keep the .reveal class as a marker, but no transitions here.
   Initial hidden state is set inline by gsap.fromTo to avoid FOUC.
   ========================================================= */
.reveal{ /* gsap-managed */ }

/* =========================================================
   Marquee
   ========================================================= */
.marquee{
  display:flex; overflow:hidden;
  background:var(--dark); color:var(--light);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(14px,2vw,22px) 0;
  white-space:nowrap;
  font-family:var(--sans);
  font-size:clamp(28px,5.5vw,72px);
  letter-spacing:0.01em;
  line-height:1;
}
.marquee.red{background:var(--panel-2); color:var(--silver); border-color:var(--line);}
.marquee.light{background:var(--light); color:var(--ink); border-color:rgba(0,0,0,0.08);}
.marquee .track{
  display:inline-flex; gap:clamp(24px,4vw,64px); align-items:center;
  animation:marquee 38s linear infinite;
  padding-left:clamp(24px,4vw,64px);
}
.marquee.fast .track{animation-duration:22s;}
.marquee.reverse .track{animation-direction:reverse;}
.marquee .star{color:var(--silver); font-family:var(--sans);}
.marquee.red .star{color:var(--silver-bright);}
.marquee.light .star{color:var(--silver);}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* =========================================================
   Redaction reveal — tape with verlet peel physics
   ========================================================= */
.redact{
  display:inline-block;
  position:relative;
  padding:0 6px;
  font-family:inherit;
  border-radius:1px;
  user-select:none;
  cursor:pointer;
  transition:color 0.25s ease;
}
.redact-tape{
  position:absolute; inset:0;
  background:oklch(22% 0.010 252);
  display:flex; align-items:center; justify-content:center;
  border-radius:1px;
  pointer-events:none;
  overflow:hidden;
  will-change:clip-path,transform,opacity;
  box-shadow:inset 0 1px 0 oklch(56% 0.008 252 / 0.25), inset 0 -1px 0 rgba(0,0,0,0.30);
  transition:opacity 0.2s ease;
}
.redact-tape::before, .redact-tape::after{
  content:''; position:absolute; top:0; bottom:0; width:4px;
  background:repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 3px);
  z-index:1;
}
.redact-tape::before{left:-2px;}
.redact-tape::after{right:-2px;}
.redact-tape-label{
  font-family:var(--data); font-size:0.32em; letter-spacing:0.10em;
  color:#fff; opacity:0.7;
  max-width:calc(100% - 12px); white-space:nowrap;
  overflow:hidden; text-overflow:clip;
}
/* text under tape is invisible until tape gone */
.redact{color:transparent;}
.redact.peek{color:inherit;}
.redact.peek .redact-tape{opacity:0;}
.redact.shown{color:inherit;}
.redact.shown .redact-tape{display:none;}
.redact.peeling .redact-tape{transition:none;}

/* =========================================================
   Buttons / magnets
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--data); font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase;
  padding:14px 22px;
  background:var(--light); color:var(--ink);
  border:none; border-radius:2px;
  cursor:pointer;
  text-decoration:none;
  transition:transform 0.25s var(--bezier), background 0.25s ease, color 0.25s ease;
  position:relative;
}
.btn.ghost{background:transparent; color:var(--light); border:1px solid oklch(93% 0.004 248 / 0.20);}
.s-light .btn.ghost{color:var(--ink); border-color:rgba(0,0,0,0.2);}
.btn.red{background:var(--silver); color:var(--dark);}
.btn:hover{transform:translateY(-2px);}
.btn::after{content:'→'; font-family:var(--mono); font-size:14px;}

/* =========================================================
   Form fields
   ========================================================= */
.field{
  width:100%;
  background:transparent;
  color:inherit;
  border:none;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:14px;
  padding:12px 0;
  outline:none;
  transition:border-color 0.25s ease;
}
.field:focus{border-color:var(--silver);}
.s-light .field{border-color:rgba(0,0,0,0.15);}
.field-label{
  font-family:var(--data); font-size:9px;
  letter-spacing:0.18em; text-transform:uppercase;
  opacity:0.4; display:block; margin-bottom:6px;
}

/* =========================================================
   SKU mockups
   ========================================================= */
.sku-can{
  position:relative;
  width:100%;
  aspect-ratio:0.62 / 1;
  border-radius:14px 14px 18px 18px / 28px 28px 18px 18px;
  background:linear-gradient(180deg, var(--sku-1), var(--sku-2));
  overflow:hidden;
  box-shadow:
    inset 0 8px 0 rgba(255,255,255,0.06),
    inset 0 -10px 0 rgba(0,0,0,0.25),
    inset 8px 0 24px rgba(255,255,255,0.08),
    inset -8px 0 24px rgba(0,0,0,0.32),
    0 30px 60px -20px rgba(0,0,0,0.5);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:14% 14% 16%;
  color:#fff;
  transition:transform 0.6s var(--bezier);
}
.sku-can::before{
  /* faux highlight */
  content:''; position:absolute; left:8%; top:0; bottom:0;
  width:2px; background:linear-gradient(180deg, transparent, rgba(255,255,255,0.4), transparent);
}
.sku-can::after{
  /* faux shadow strip */
  content:''; position:absolute; right:6%; top:0; bottom:0;
  width:5px; background:linear-gradient(180deg, transparent 5%, rgba(0,0,0,0.35) 50%, transparent 95%);
}
.sku-can .lid{
  position:absolute; top:-8px; left:6%; right:6%;
  height:14px; border-radius:50%;
  background:linear-gradient(180deg,#cfcfcf,#888 60%, #4a4a4a);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.1);
}
.sku-can .can-top{display:flex; justify-content:space-between; align-items:flex-start; font-family:var(--data); font-size:9px; letter-spacing:0.14em; opacity:0.7;}
.sku-can .can-name{
  font-family:var(--sans);
  font-size:clamp(28px,4vw,42px);
  line-height:0.9;
  letter-spacing:0.03em;
  margin:auto 0;
}
.sku-can .can-sub{font-family:var(--serif); font-style:italic; font-size:13px; opacity:0.85; margin-top:4px;}
.sku-can .can-bot{font-family:var(--data); font-size:8px; letter-spacing:0.18em; opacity:0.55; line-height:1.8;}
.sku-can .can-bot .vol{font-family:var(--sans); font-size:18px; opacity:1;}
.sku-can:hover{transform:translateY(-8px) rotate(-1.5deg);}

/* SKU swatches */
.sku-focus{--sku-1:#1f9a76; --sku-2:#0f5c43;}
.sku-energy{--sku-1:#ea6428; --sku-2:#a8350c;}
.sku-calm{--sku-1:#8b7bf5; --sku-2:#4f44a7;}

/* =========================================================
   Horizontal SKU chapter
   ========================================================= */
.hsku-stage{
  height:100vh;
  overflow:hidden;
  position:relative;
  margin-top:clamp(30px,4vw,60px);
}
.hsku-track{
  display:flex;
  height:100%;
  will-change:transform;
}
.sku-panel{
  flex:0 0 100vw;
  height:100vh;
  padding:clamp(50px,7vw,90px) clamp(28px,5vw,80px);
  display:flex; flex-direction:column;
  position:relative;
  color:var(--light);
}
.sku-panel-focus  {background:linear-gradient(135deg,#102a22 0%, #0a1612 100%);}
.sku-panel-energy {background:linear-gradient(135deg,#2a1408 0%, #160a04 100%);}
.sku-panel-calm   {background:linear-gradient(135deg,#1d1a3a 0%, #0c0a20 100%);}
.sku-panel-num{display:flex; justify-content:space-between; align-items:baseline;}
.sku-panel-grid{
  flex:1; display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:clamp(20px,4vw,72px);
  margin-top:clamp(20px,3vw,40px);
  align-items:center;
}
.sku-panel-mock{display:flex; align-items:center; justify-content:center;}
.sku-panel-mock .sku-can{transform-origin:center; transition:none;}
.sku-panel-info{display:flex; flex-direction:column; gap:clamp(10px,1.5vw,18px); max-width:560px;}
.sku-panel-name{
  font-family:var(--sans);
  font-size:clamp(72px,12vw,180px);
  line-height:0.9;
  letter-spacing:-0.01em;
}
.sku-panel-focus  .sku-panel-name{color:var(--teal);}
.sku-panel-energy .sku-panel-name{color:var(--orange);}
.sku-panel-calm   .sku-panel-name{color:var(--purple);}
.sku-panel-sub{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(20px,2.6vw,30px);
  opacity:0.85; line-height:1.3;
  margin-top:-6px;
}
.sku-panel-long{
  font-family:var(--mono);
  font-size:clamp(12px,1.3vw,14px);
  line-height:1.85; opacity:0.65; max-width:48ch;
}
.sku-panel-ingredients{
  margin-top:clamp(12px,2vw,20px);
  display:flex; flex-direction:column; gap:4px;
}
.sku-ing-line{display:flex; gap:14px; align-items:baseline; padding:6px 0; border-top:1px solid rgba(255,255,255,0.08);}
.sku-ing-line .t-data{color:var(--silver); opacity:0.8; min-width:24px;}
.sku-ing-line .t-sans{font-size:clamp(15px,1.8vw,20px); letterspacing:0.04em;}
.hsku-progress{
  position:absolute; bottom:18px; right:30px;
  font-family:var(--data); font-size:9px; letter-spacing:0.18em;
  color:var(--silver); opacity:0.7;
}
@media (max-width:880px){
  .hsku-stage{height:auto;}
  .sku-panel{height:auto; padding:clamp(40px,8vw,60px) clamp(20px,5vw,40px);}
  .sku-panel-grid{grid-template-columns:1fr;}
}

/* =========================================================
   Verification Loop — pinned cinematic
   ========================================================= */
.vloop-stage{
  height:100vh;
  display:flex; align-items:center;
  position:relative;
  background:var(--panel);
  margin-top:clamp(24px,3vw,40px);
  overflow:visible;
}
/* allow pin to work — parent section can't be overflow:hidden */
section[data-screen-label="06 Verification"],
section[data-screen-label="05 Products"]{overflow:visible;}
.vloop-grid{
  width:100%; max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:clamp(24px,4vw,64px);
  align-items:center;
}
.vloop-ledger{position:relative;}
.vloop-tape{
  display:flex; justify-content:space-between;
  background:var(--panel-2); color:var(--silver);
  border:1px solid var(--line);
  padding:6px clamp(12px,1.5vw,18px);
  font-family:var(--data); font-size:9px;
  letter-spacing:0.18em; text-transform:uppercase;
  margin-bottom:clamp(12px,1.5vw,18px);
}
.vloop-svg{
  width:100%; height:auto;
  background:rgba(7,9,11,0.6);
  border:1px solid var(--line);
  border-radius:2px;
  padding:14px;
}
.vloop-claims{display:flex; flex-direction:column; gap:clamp(10px,1.5vw,18px);}
.vloop-claim{
  border-top:1px solid var(--line);
  padding-top:clamp(10px,1.4vw,16px);
  opacity:0.45;
  transition:opacity 0.45s var(--bezier);
}
.vloop-claim.is-active{opacity:1;}
.vloop-claim-head{display:flex; gap:12px; align-items:baseline; margin-bottom:6px;}
.vloop-claim-name{
  font-family:var(--sans); font-size:clamp(14px,1.8vw,18px);
  letter-spacing:0.06em;
}
.vloop-claim-flip{
  position:relative;
  font-family:var(--serif);
  font-size:clamp(20px,2.8vw,30px);
  font-style:italic;
  line-height:1.2;
  margin:6px 0 8px;
  min-height:1.3em;
}
.vloop-claim-flip .flip-from,
.vloop-claim-flip .flip-to{
  display:inline-block;
  transition:transform 0.5s var(--bezier), opacity 0.45s var(--bezier);
}
.vloop-claim-flip .flip-from{color:var(--light);}
.vloop-claim-flip .flip-to{
  position:absolute; left:0; top:0;
  color:var(--red);
  transform:translateY(80%) skewY(6deg); opacity:0;
}
.vloop-claim.is-verified .flip-from{transform:translateY(-80%) skewY(-6deg); opacity:0;}
.vloop-claim.is-verified .flip-to{transform:translateY(0) skewY(0); opacity:1;}
.vloop-claim-body{
  font-family:var(--mono); font-size:clamp(11px,1.2vw,12.5px);
  line-height:1.75; opacity:0.7; max-width:50ch;
}
.vloop-bar{height:1px; background:var(--line); margin-top:clamp(10px,1.5vw,18px); position:relative;}
.vloop-bar-fill{position:absolute; left:0; top:0; bottom:0; background:var(--silver);}

@media (max-width:840px){
  .vloop-grid{grid-template-columns:1fr; gap:clamp(20px,3vw,32px);}
  .vloop-stage{height:auto; padding:clamp(40px,8vw,80px) 0;}
}

/* =========================================================
   Wall of disloyalty
   ========================================================= */
.wall{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.wall-cell{
  background:var(--panel);
  padding:14px 14px 12px;
  font-family:var(--mono);
  font-size:11px;
  position:relative;
  overflow:hidden;
}
.wall-cell .name{font-family:var(--sans); font-size:18px; letter-spacing:0.04em; color:var(--light);}
.wall-cell .meta{font-family:var(--data); font-size:8px; letter-spacing:0.16em; opacity:0.4; text-transform:uppercase; margin-top:4px;}
.wall-cell .from{margin-top:8px; opacity:0.55; font-size:10.5px;}
.wall-cell .from .strike{text-decoration-thickness:2px;}
.wall-cell .rank{position:absolute; right:10px; top:10px; font-family:var(--data); font-size:8px; letter-spacing:0.16em; color:var(--silver); opacity:0.7;}

/* =========================================================
   Misc utilities
   ========================================================= */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.between{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;}
.center{text-align:center;}
.muted{opacity:0.5;}
.red{color:var(--red);}
.teal{color:var(--teal);}
.amber{color:var(--amber);}
.purple{color:var(--purple);}
.orange{color:var(--orange);}
.tabular{font-variant-numeric:tabular-nums;}