/* ============================================================================
   BREAKBONE — design system + staged-drop machinery
   Black field for brand/drop-covers, black-on-white for reading.
   Display  = Helvetica Neue LT Pro Black + Black Condensed (@font-face)
   Meta/nav = Space Mono (Google Fonts)   Body = HN55 Roman
   Wordmark = HN Black Italic in a keyline box, lowercase 'breakbone'
   ONE accent red #CE161E. Grain/halftone overlay on black. 1-bit photos.
   Built 15 Jun 2026 — render-checked, reduced-motion guarded, WCAG-AA.
   ============================================================================ */

/* ---- fonts: his real OTFs + the Y2K-zine mono ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

@font-face{font-family:'HNBlk';   src:url('fonts/HelveticaNeueLTProBlk.otf')   format('opentype');font-weight:900;font-display:swap}
@font-face{font-family:'HNBlkCn'; src:url('fonts/HelveticaNeueLTProBlkCn.otf') format('opentype');font-weight:900;font-display:swap}
@font-face{font-family:'HNBlkIt'; src:url('fonts/HelveticaNeueLTProBlkIt.otf') format('opentype');font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:'HN55';    src:url('fonts/Helvetica Neue LT Pro 55 Roman.otf') format('opentype');font-weight:400;font-display:swap}

:root{
  --black:#0a0a0a;
  --paper:#ffffff;
  --ink:#111111;
  --red:#CE161E;
  --muted:#7a7a7a;
  --muted-d:#8c8c8c;          /* on-black muted, AA-safe */
  --rule:#e4e4e4;
  --rule-d:#2a2a2a;           /* hairline on black */

  --disp:'HNBlk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --cond:'HNBlkCn','HNBlk','Helvetica Neue Condensed','Arial Narrow',sans-serif;
  --wm:'HNBlkIt','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'HN55','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Space Mono','SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;

  --mx:1340px;
  --gut:clamp(20px,4vw,52px);
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* the 1-bit print grade on every photo */
.bw{filter:grayscale(1) contrast(1.3)}

/* skip link for keyboard users */
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:12px;letter-spacing:1px;padding:10px 16px;text-transform:uppercase}
.skip:focus{left:8px;top:8px}

/* mono utility label */
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em}

/* ============================================================================
   GRAIN / HALFTONE — SVG feTurbulence baked into a fixed overlay.
   Sits above black fields, screen-blended, so the page reads printed/Xeroxed.
   ============================================================================ */
.grain{
  position:fixed;inset:0;z-index:8000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  opacity:.05;mix-blend-mode:overlay;
}
/* heavier grit confined to black sections via this hook */
.gritty{position:relative}
.gritty::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
  background-size:160px 160px;opacity:.08;mix-blend-mode:overlay;
}
/* halftone dot wash for red blocks */
.halftone{position:relative}
.halftone::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.22) 1px,transparent 1.4px);
  background-size:5px 5px;mix-blend-mode:multiply;opacity:.55;
}

/* ============================================================================
   CUSTOM CURSOR — a red crosshair ring that lives on black fields.
   Driven by JS (.cursor follows pointer); hidden on touch / reduced-motion.
   ============================================================================ */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9000;pointer-events:none;
  mix-blend-mode:difference;will-change:transform;opacity:0;transition:opacity .25s}
.cursor{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid #fff;border-radius:50%;
  transition:opacity .25s,width .18s var(--ease),height .18s var(--ease),margin .18s var(--ease),background .18s}
.cursor::before,.cursor::after{content:'';position:absolute;background:#fff}
.cursor::before{left:50%;top:-6px;width:1px;height:6px;transform:translateX(-50%)}
.cursor::after{left:50%;bottom:-6px;width:1px;height:6px;transform:translateX(-50%)}
.cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--red);border-radius:50%}
body.cursor-on .cursor,body.cursor-on .cursor-dot{opacity:1}
/* grow over interactive things */
body.cursor-on.cursor-hot .cursor{width:54px;height:54px;margin:-27px 0 0 -27px;background:rgba(206,22,30,.18)}
@media (hover:hover) and (pointer:fine){body.cursor-on{cursor:none}body.cursor-on a,body.cursor-on button{cursor:none}}

/* ============================================================================
   LOADER — mark strikes in, 'DOCUMENT · DISTRIBUTE · DEMONSTRATE' types, clears.
   Once per session (JS sets sessionStorage; otherwise .preloaded skips it).
   ============================================================================ */
.loader{position:fixed;inset:0;z-index:9500;background:var(--black);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:transform .7s var(--ease),opacity .5s ease}
.loader.gone{transform:translateY(-101%);opacity:0;pointer-events:none}
.loader__mark{width:clamp(74px,11vw,128px);opacity:0;transform:scale(.4) rotate(-22deg);
  animation:strike .62s var(--ease) .12s forwards}
@keyframes strike{
  0%{opacity:0;transform:scale(.4) rotate(-22deg)}
  55%{opacity:1;transform:scale(1.12) rotate(4deg)}
  72%{transform:scale(.94) rotate(-2deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.loader__type{font-family:var(--mono);font-size:clamp(12px,1.6vw,16px);letter-spacing:.3em;
  text-transform:uppercase;color:#fff;display:flex;flex-wrap:nowrap;align-items:center;
  gap:clamp(10px,2.2vw,24px);white-space:nowrap;}
.loader__type span{opacity:.12;transform:translateY(14px);animation:lword .6s var(--ease) forwards;}
.loader__type span:nth-child(1){animation-delay:.45s}
.loader__type span:nth-child(2){animation-delay:1.15s}
.loader__type span:nth-child(3){animation-delay:1.85s;color:var(--red)}
.loader__type span:not(:last-child)::after{content:'·';margin-left:clamp(10px,2.2vw,24px);color:var(--red);opacity:.6}
@keyframes lword{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.loader__bar{position:absolute;left:0;bottom:0;height:3px;background:var(--red);width:0;
  animation:barfill 3.05s var(--ease) .12s forwards}
@keyframes barfill{to{width:100%}}
.loader__brand{position:absolute;left:var(--gut);bottom:26px;color:#5a5a5a;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em}
.no-js .loader{display:none}

/* ============================================================================
   NAV — boxed wordmark + Space Mono links
   ============================================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:7500;display:flex;
  justify-content:space-between;align-items:center;
  padding:16px var(--gut);mix-blend-mode:difference;transition:transform .4s var(--ease)}
.nav.hide{transform:translateY(-130%)}
.wordmark{display:inline-block;font-family:var(--wm);font-style:italic;
  font-size:21px;line-height:1;color:#fff;border:2px solid #fff;
  padding:5px 16px 8px 11px;       /* more right (italic lean) + more bottom than top */
  letter-spacing:-.2px}
.nav-links{display:flex;gap:26px}
.nav-links a{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff;position:relative;padding-bottom:2px}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--red);transition:width .28s var(--ease)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%}
.nav-burger{display:none;font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:#fff;text-transform:uppercase;background:none;border:0}

/* ============================================================================
   HERO — black, parallax crowd photo + grain, knockout lockup, kinetic head
   ============================================================================ */
.hero{position:relative;min-height:var(--heroh,100svh);display:flex;flex-direction:column;
  justify-content:flex-end;padding:0 var(--gut) clamp(40px,7vh,80px);
  background:var(--black);overflow:hidden;isolation:isolate}
/* HERO base plate — always black & white; the colour 'torch' layer reveals colour only under the cursor */
.hero__bg{position:absolute;inset:-12% 0 -12% 0;z-index:0;
  background:url('assets/photos/hero-crowd.jpg') center 30%/cover no-repeat;
  filter:grayscale(1) contrast(1.35) brightness(.62);
  will-change:transform}
/* colour 'torch' — same plate, graded warm, revealed in a soft circle under the cursor (sits above the veil) */
.hero__color{position:absolute;inset:-12% 0 -12% 0;z-index:1;
  background:url('assets/photos/hero-crowd.jpg') center 30%/cover no-repeat;
  filter:saturate(1.3) contrast(1.18) brightness(.82) sepia(.12) hue-rotate(-6deg);
  -webkit-mask-image:radial-gradient(circle 260px at var(--tx,50%) var(--ty,42%),#000 0%,rgba(0,0,0,.5) 46%,transparent 76%);
          mask-image:radial-gradient(circle 260px at var(--tx,50%) var(--ty,42%),#000 0%,rgba(0,0,0,.5) 46%,transparent 76%);
  opacity:.95;pointer-events:none;will-change:transform}
/* (stage lights, sweep + flicker removed 15 Jun 2026 — torch-only hero, per Mick) */
.hero__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.2) 34%,rgba(10,10,10,.55) 70%,rgba(10,10,10,.95) 100%)}
.hero__scan{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 4px)}
.hero__inner{position:relative;z-index:3;max-width:var(--mx);width:100%;margin:0 auto}

/* the knockout lockup blocks */
.lockup{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:26px}
.lockup span{font-family:var(--disp);font-size:clamp(12px,1.4vw,17px);line-height:1.25;
  letter-spacing:.01em;color:#fff;background:var(--black);padding:4px 12px 6px;text-transform:uppercase}
.lockup .red{background:var(--red);color:#fff}

/* kinetic display headline — each line in a clip mask that rises */
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;display:flex;align-items:center;gap:14px;margin-bottom:14px}
.kicker .tick{color:var(--red)}
.kicker .ln{flex:1;height:1px;background:var(--rule-d);max-width:160px}
.headline{font-family:var(--cond);font-size:clamp(58px,13.5vw,200px);line-height:.82;
  letter-spacing:-.02em;text-transform:uppercase;color:#fff;margin:2px 0 8px}
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(106%);
  animation:rise-line 1s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes rise-line{to{transform:translateY(0)}}
.hero .lede{font-family:var(--body);font-size:clamp(16px,1.9vw,21px);line-height:1.5;
  color:#e6e6e6;max-width:600px;margin-top:18px}
.hero .lede em{font-family:var(--wm);font-style:italic;color:var(--red)}
.hero__mark{position:absolute;top:clamp(72px,10vh,108px);right:var(--gut);z-index:3;
  width:clamp(46px,6.5vw,86px);opacity:.95;will-change:transform}
.cta-row{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* the link button — Swiss underline that fills red */
.btn{display:inline-block;font-family:var(--disp);font-size:15px;text-transform:uppercase;
  letter-spacing:.02em;color:#fff;border-bottom:3px solid var(--red);padding:3px 1px 4px;transition:background .2s,color .2s,padding .2s}
.btn:hover,.btn:focus-visible{background:var(--red);color:#fff;padding-left:8px;padding-right:8px;border-color:var(--red)}
.btn--ink{color:var(--ink)}
.btn--ink:hover,.btn--ink:focus-visible{color:#fff}

.scrollcue{position:absolute;left:var(--gut);bottom:22px;z-index:3;font-family:var(--mono);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#9a9a9a;display:flex;align-items:center;gap:9px}
.scrollcue::after{content:'';width:1px;height:34px;background:linear-gradient(var(--red),transparent);animation:cuepulse 1.8s ease-in-out infinite}
@keyframes cuepulse{0%,100%{opacity:.4;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* ============================================================================
   MARQUEE — flyposter ticker, mono, red band
   ============================================================================ */
.marquee{background:var(--red);color:#fff;overflow:hidden;border-top:2px solid var(--black);border-bottom:2px solid var(--black);padding:11px 0;white-space:nowrap}
.marquee__track{display:inline-flex;gap:0;animation:march 34s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:0 22px;display:inline-flex;align-items:center;gap:22px}
.marquee__track span::after{content:'✶';font-weight:400;opacity:.8}
@keyframes march{to{transform:translateX(-50%)}}

/* ============================================================================
   DROP STACK — the core interaction. Vertical index of releases.
   Each row: mono number, big condensed title, B&W thumb, expands on hover.
   Locked rows dimmed with a lock + 'unlocks' tag.
   ============================================================================ */
.drops{background:var(--black);color:#fff;padding:clamp(60px,11vh,128px) 0 clamp(40px,7vh,80px)}
.drops__head{max-width:var(--mx);margin:0 auto;padding:0 var(--gut);
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  border-bottom:2px solid #fff;padding-bottom:18px;margin-bottom:0}
.drops__head h2{font-family:var(--cond);font-size:clamp(40px,7vw,96px);line-height:.86;text-transform:uppercase;letter-spacing:-.02em}
.drops__head .meta{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d);text-align:right;line-height:1.7}
.stack{max-width:var(--mx);margin:0 auto;padding:0 var(--gut)}

.drop{display:grid;grid-template-columns:88px 1fr auto;align-items:center;gap:clamp(16px,3vw,40px);
  padding:clamp(22px,3.4vw,38px) 0;border-bottom:1px solid var(--rule-d);position:relative;
  transition:padding-left .3s var(--ease)}
.drop__num{font-family:var(--mono);font-size:clamp(13px,1.1vw,15px);letter-spacing:.1em;color:var(--muted-d);line-height:1.4}
.drop__num b{display:block;font-size:clamp(15px,1.2vw,17px);color:#fff;font-weight:700}
.drop__main{min-width:0}
.drop__phase{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:8px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.drop__title{font-family:var(--cond);font-size:clamp(30px,5.4vw,76px);line-height:.88;text-transform:uppercase;letter-spacing:-.02em;color:#fff;transition:transform .3s var(--ease),color .3s}
.drop__sub{font-family:var(--body);font-size:15px;color:#c9c9c9;margin-top:10px;max-width:54ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--ease),opacity .35s,margin .4s}
.drop__side{display:flex;align-items:center;gap:clamp(14px,2vw,26px);justify-self:end}
.drop__thumb{width:clamp(76px,9vw,124px);aspect-ratio:4/5;object-fit:cover;
  filter:grayscale(1) contrast(1.35) brightness(.92);
  border:1px solid var(--rule-d);transition:transform .4s var(--ease),filter .4s;flex:none}
.drop__status{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:right;white-space:nowrap;min-width:96px}
.drop__arrow{font-family:var(--disp);font-size:26px;color:var(--red);transition:transform .3s var(--ease);flex:none}

/* LIVE rows are anchors that react on hover */
a.drop{color:#fff}
a.drop:hover,a.drop:focus-visible{padding-left:18px;background:linear-gradient(90deg,rgba(206,22,30,.1),transparent 60%)}
a.drop:hover .drop__title,a.drop:focus-visible .drop__title{color:var(--red);transform:translateX(4px)}
a.drop:hover .drop__sub,a.drop:focus-visible .drop__sub{max-height:120px;opacity:1;margin-top:12px}
a.drop:hover .drop__thumb,a.drop:focus-visible .drop__thumb{transform:scale(1.05) rotate(-1.5deg);filter:grayscale(1) contrast(1.4) brightness(1)}
a.drop:hover .drop__arrow,a.drop:focus-visible .drop__arrow{transform:translate(6px,-6px)}
.drop__status .live{color:var(--red)}
.drop__status .open{color:#fff}

/* LOCKED rows: dimmed, no pointer, lock glyph + unlock tag */
.drop--locked{filter:saturate(.15)}
.drop--locked .drop__phase{color:#8c8c8c}
.drop--locked .drop__title{color:#5f5f5f}
.drop--locked .drop__sub{color:#6b6b6b}
.drop--locked .drop__thumb{filter:grayscale(1) contrast(1.2) brightness(.55)}
.drop--locked .drop__status{color:var(--muted-d)}
.drop--locked .lock{display:inline-block;margin-right:7px}
.drop--locked .unlock{color:#bdbdbd}
.drop--locked .when{color:var(--red);display:block;margin-top:3px}

/* BEYOND — the open-ended future row */
.drop--beyond .drop__title{color:#6f6f6f;font-size:clamp(26px,4.4vw,58px)}
.drop--beyond .drop__num b{color:#6f6f6f}

/* ============================================================================
   ADD YOUR CHAPTER — scrap motif on paper
   ============================================================================ */
.chapter{background:var(--paper);color:var(--ink);padding:clamp(60px,11vh,130px) var(--gut)}
.chapter__in{max-width:var(--mx);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.chapter .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.chapter h2{font-family:var(--cond);font-size:clamp(40px,8vw,104px);line-height:.84;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:22px}
.chapter p{font-size:18px;line-height:1.65;max-width:46ch;margin-bottom:14px;color:#222}
.scraps{position:relative;min-height:300px}
.scrap{position:absolute;filter:grayscale(.1) contrast(1.05);box-shadow:0 12px 30px rgba(0,0,0,.16)}
.scrap--1{width:84%;top:6%;left:0;transform:rotate(-5deg)}
.scrap--2{width:62%;bottom:2%;right:2%;transform:rotate(4deg)}
.scrap__note{position:absolute;z-index:3;font-family:var(--wm);font-style:italic;font-size:clamp(17px,2vw,24px);color:var(--ink);
  top:30%;left:16%;transform:rotate(-4deg);max-width:230px;line-height:1.15}
.scrap__note b{color:var(--red);font-weight:400}

/* ---- the PEN — a 3D pen resting on the scraps; pick it up and it takes you to the form ---- */
.scraps{perspective:1000px}
.pen{position:absolute;right:3%;top:36%;width:210px;height:16px;z-index:4;transform-style:preserve-3d;cursor:pointer;
  transform:rotate(-22deg) rotateX(10deg);cursor:pointer;transition:transform .55s var(--ease);
  filter:drop-shadow(0 16px 14px rgba(0,0,0,.38))}
.pen:hover,.pen:focus-visible{transform:rotate(-15deg) rotateX(32deg) translateY(-12px) translateZ(28px)}
/* full-surface hit target — the whole pen (and a generous margin) is clickable, not just the 16px bar */
.pen::before{content:'';position:absolute;inset:-44px -32px;border-radius:16px}
.pen__barrel{position:absolute;inset:0;border-radius:8px;background:linear-gradient(180deg,#363636,#0c0c0c 52%,#000)}
.pen__cap{position:absolute;right:0;top:0;height:16px;width:58px;border-radius:0 8px 8px 0;background:linear-gradient(180deg,#e8474b,#CE161E 52%,#8d0f14)}
.pen__clip{position:absolute;right:14px;top:-6px;width:5px;height:24px;border-radius:3px;background:#cfcfcf}
.pen__nib{position:absolute;left:-15px;top:1px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:16px solid #d6d6d6}
.pen__hint{position:absolute;right:5%;top:24%;z-index:4;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);animation:penbob 2.6s ease-in-out infinite;pointer-events:none}
@keyframes penbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ============================================================================
   RECEIPTS teaser — credibility band on black
   ============================================================================ */
.receipts{background:var(--black);color:#fff;padding:clamp(48px,8vh,96px) var(--gut);border-top:2px solid var(--red)}
.receipts__in{max-width:var(--mx);margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,56px);align-items:center}
.receipts .tiers{display:flex;gap:10px;flex-wrap:wrap}
.receipts .tier{font-family:var(--mono);font-size:12px;letter-spacing:.06em;border:1px solid var(--rule-d);padding:6px 10px;color:#d8d8d8}
.receipts .tier b{color:var(--red);font-weight:700}
.receipts h2{font-family:var(--cond);font-size:clamp(28px,4.4vw,56px);line-height:.9;text-transform:uppercase;letter-spacing:-.01em}
.receipts p{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted-d);margin-top:8px;max-width:40ch;line-height:1.7;text-transform:uppercase}

/* ============================================================================
   FOOTER — motto in HN Black Italic, mark, IG, boxed wordmark
   ============================================================================ */
.foot{background:var(--black);color:#fff;padding:clamp(56px,9vh,110px) var(--gut) 40px}
.foot__in{max-width:var(--mx);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:36px}
.foot__motto{font-family:var(--wm);font-style:italic;font-size:clamp(30px,5.6vw,72px);line-height:.96;letter-spacing:-.01em}
.foot__motto b{color:var(--red);font-weight:900}
.foot__mark{width:clamp(54px,7vw,90px);margin-top:14px}
.foot__right{display:flex;flex-direction:column;align-items:flex-end;gap:14px;text-align:right}
.foot__links{display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.foot__links a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#bdbdbd}
.foot__links a:hover,.foot__links a:focus-visible{color:var(--red)}
.foot .wordmark{margin-top:6px}
.foot__legal{max-width:var(--mx);margin:42px auto 0;padding-top:18px;border-top:1px solid var(--rule-d);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#5f5f5f;text-transform:uppercase}

/* ============================================================================
   SCROLL-REVEAL — sections fade/rise as they enter (JS toggles .in)
   ============================================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:880px){
  .chapter__in{grid-template-columns:1fr;gap:40px}
  .receipts__in{grid-template-columns:1fr;gap:22px;text-align:left}
  .receipts .tiers{order:3}
  .drop{grid-template-columns:60px 1fr;gap:16px}
  .drop__side{grid-column:1/-1;justify-self:start;margin-top:6px}
  .drop__sub{max-height:none;opacity:1;margin-top:10px}   /* always shown on small screens */
  .scraps{min-height:240px}
}
@media (max-width:680px){
  .nav-links{position:fixed;inset:0;z-index:7400;background:var(--black);flex-direction:column;
    justify-content:center;align-items:center;gap:30px;transform:translateX(100%);transition:transform .4s var(--ease);mix-blend-mode:normal}
  .nav-links.open{transform:none}
  .nav-links a{font-size:20px}
  .nav-burger{display:block;z-index:7600}
  .hero__mark{width:54px}
  .foot__in{flex-direction:column}
  .foot__right{align-items:flex-start;text-align:left}
  .foot__links{align-items:flex-start}
}

/* ============================================================================
   REDUCED MOTION — kill every animation, reveal everything, default cursor
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .loader{display:none!important}
  .mask>span{transform:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero__bg{inset:0!important;transform:none!important}
  .hero__color{display:none!important}
  .marquee__track{animation:none!important}
  .cursor,.cursor-dot{display:none!important}
  body.cursor-on{cursor:auto!important}
  .scrollcue::after{animation:none}
}