/* ============================================================
   pausebtn.com — landing page.
   Components below are CSS ports of the PauseBTN design system's
   React components (Button, Card, Sticker, Badge, Tag, Marquee,
   NavBar). Token values come from assets/ds/tokens.css — never
   hard-code a hex here.
   ============================================================ */

/* ---------------------------------------------------------------
   1. Reset + page
   --------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

/* `clip` rather than `hidden`: the marquee is deliberately wider than
   the page and must not produce a horizontal scrollbar, but `hidden`
   would turn these into scroll containers and break the sticky header. */
html{scroll-behavior:smooth;overflow-x:clip}

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font:var(--type-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* Grain sits over the whole page, under content. The brand never
   allows a flat empty field. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:var(--grain);
  opacity:.5;
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:multiply;
}

h1,h2,h3,h4,p{margin:0}
img{max-width:100%;display:block}

/* Scoped away from .btn deliberately: `a:hover` (0,1,1) outweighs the
   `.btn` colour declaration (0,1,0), so an un-scoped rule here repaints
   every button label link-orange on hover — 1.31:1 against the orange
   fill. Buttons own their states in section 3.

   The exclusion sits inside :where() so it adds no specificity: these
   stay at (0,0,1) and (0,1,1), exactly as a bare `a` / `a:hover` would.
   A plain `a:not(.btn)` is (0,1,1) and would start beating `.brand`
   (0,1,0), underlining the wordmark and painting it cherry. */
a:where(:not(.btn)){color:var(--text-link);text-decoration:underline 2px;text-underline-offset:4px}
a:where(:not(.btn)):hover{color:var(--text-link-hover)}

:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--mustard-2);color:var(--ink-0);
  border:var(--border-ink);border-radius:var(--r-2);
  padding:12px 18px;font:400 13px/1 var(--font-display);
}
.skip:focus{left:var(--sp-4);top:var(--sp-4)}

/* ---------------------------------------------------------------
   2. Type helpers
   --------------------------------------------------------------- */

.eyebrow{
  font:400 12px/1 var(--font-display);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--ink-2);
}
.eyebrow--cherry{color:var(--cherry-3)}
.eyebrow--paper{color:var(--paper-3)}

.display-l{font:400 var(--fs-display-l)/var(--lh-display) var(--font-display);color:var(--ink-0);letter-spacing:var(--ls-display)}
.display-m{font:400 var(--fs-display-m)/1 var(--font-display);color:var(--ink-0)}
.lead{font:400 var(--fs-lead)/1.5 var(--font-text);color:var(--text-body);max-width:var(--measure)}
.hand{font:var(--type-hand);color:var(--ink-2)}
.mono{font:var(--type-mono);color:var(--ink-3)}
.body{font:var(--type-body);color:var(--text-muted);max-width:var(--measure)}

/* ---------------------------------------------------------------
   3. Button  (port of components/core/Button.jsx)
   --------------------------------------------------------------- */

.btn{
  font:400 14px/1 var(--font-display);
  letter-spacing:.02em;
  height:var(--control-h);
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  background:var(--orange-3);
  color:var(--paper-0);
  border:var(--border-ink);
  border-radius:var(--r-3);
  box-shadow:var(--shadow-block-1);
  text-decoration:none;
  cursor:pointer;
  transition:transform var(--dur-1) var(--ease-snap),
             box-shadow var(--dur-1) var(--ease-snap),
             background var(--dur-2) linear,
             color var(--dur-2) linear;
}
.btn--lg{height:var(--control-h-lg);padding:0 30px;font-size:17px}
.btn--sm{height:var(--control-h-sm);padding:0 14px;font-size:12px}

.btn--secondary{background:var(--paper-0);color:var(--ink-0)}
.btn--mustard{background:var(--mustard-2);color:var(--ink-0)}
.btn--cool{background:var(--denim-3);color:var(--paper-0)}

.btn:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-block-2)}
.btn:active{transform:translate(var(--press-shift),var(--press-shift));box-shadow:0 0 0 var(--ink-0)}
/* Orange fills take ink letters on hover: the fill lightens to orange-2,
   where cream drops to ~3:1 but ink reads at ~5.9:1. Press darkens the
   fill to orange-4 — cream is the legible one there (~6.1:1 vs ink's
   2.7:1) — so the label swaps back. */
.btn:hover:not(.btn--secondary):not(.btn--mustard):not(.btn--cool){background:var(--orange-2);color:var(--ink-0)}
.btn:active:not(.btn--secondary):not(.btn--mustard):not(.btn--cool){background:var(--orange-4);color:var(--paper-0)}

.btn[aria-disabled="true"],
.btn:disabled{
  opacity:.45;cursor:not-allowed;
  transform:none;box-shadow:var(--shadow-block-1);
  background:var(--paper-0);color:var(--ink-0);
}

/* The tilt move: one tilted button per view, no more. */
.btn--tilt{transform:rotate(var(--tilt-b))}
.btn--tilt:hover{transform:translate(-1px,-1px) rotate(var(--tilt-b))}
.btn--tilt:active{transform:translate(var(--press-shift),var(--press-shift)) rotate(var(--tilt-b))}

/* ---------------------------------------------------------------
   4. Sticker / Badge / Tag  (ports of components/core/*)
   --------------------------------------------------------------- */

.sticker{
  display:inline-flex;align-items:center;justify-content:center;
  font:400 13px/1 var(--font-display);
  letter-spacing:.04em;text-transform:uppercase;
  background:var(--mustard-2);color:var(--ink-0);
  padding:8px 14px;
  border:var(--border-ink);border-radius:var(--r-pill);
  box-shadow:var(--shadow-block-1);
  transform:rotate(-6deg);
  transition:transform var(--dur-2) var(--ease-bounce);
}
.sticker--lg{font-size:18px;padding:14px 20px}
.sticker--cherry{background:var(--cherry-3);color:var(--paper-0)}
.sticker--pine{background:var(--pine-3);color:var(--paper-0)}
.sticker--denim{background:var(--denim-3);color:var(--paper-0)}
.sticker--paper{background:var(--paper-0);color:var(--ink-0)}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  font:400 11px/1 var(--font-display);
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--state-playable);color:var(--paper-0);
  padding:6px 10px;
  border:2px solid var(--ink-0);border-radius:var(--r-1);
}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.badge--wip{background:var(--state-wip);color:var(--ink-0)}
.badge--shelved{background:var(--state-shelved);color:var(--paper-0)}

.tag{
  display:inline-flex;align-items:center;
  font:700 13px/1 var(--font-text);
  letter-spacing:.04em;text-transform:lowercase;
  padding:7px 12px;border-radius:var(--r-pill);
  border:2px solid var(--denim-3);color:var(--denim-3);
  background:transparent;
  transition:background var(--dur-2) linear,color var(--dur-2) linear;
}
.tag--paper{border-color:var(--paper-3);color:var(--paper-3)}
.tag--ink{border-color:var(--ink-0);color:var(--ink-0)}
.tag-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* Tags fill in on hover of their parent block — a quiet, mechanical
   colour change, 160ms, no movement. */
.game:hover .tag{background:var(--denim-3);color:var(--paper-0)}
.game--dark:hover .tag{background:var(--paper-3);color:var(--ink-0)}

/* ---------------------------------------------------------------
   5. Card  (port of components/core/Card.jsx)
   --------------------------------------------------------------- */

.card{
  background:var(--paper-0);
  border:var(--border-ink);
  border-radius:var(--r-3);
  box-shadow:var(--shadow-block-2);
  padding:var(--sp-5);
}
.card--flush{padding:0;overflow:hidden}
.card--sunken{background:var(--paper-2)}

/* ---------------------------------------------------------------
   6. Header  (port of components/navigation/NavBar.jsx)
   --------------------------------------------------------------- */

.hdr{
  position:sticky;top:0;z-index:100;
  background:var(--paper-0);
  border-bottom:var(--border-ink-thick);
  transition:box-shadow var(--dur-2) var(--ease-snap),
             padding var(--dur-2) var(--ease-snap);
}
.hdr__in{
  max-width:var(--page-max);margin:0 auto;
  padding:var(--sp-4) var(--gutter);
  display:flex;align-items:center;gap:var(--sp-5);
  transition:padding var(--dur-2) var(--ease-snap);
}
/* Compresses and gains a hard shadow once you leave the hero. */
.hdr.is-stuck{box-shadow:var(--shadow-block-1)}
.hdr.is-stuck .hdr__in{padding-top:var(--sp-3);padding-bottom:var(--sp-3)}

.brand{
  display:inline-flex;align-items:center;gap:10px;
  font:400 22px/1 var(--font-display);
  color:var(--ink-0);text-decoration:none;
}
.brand:hover{color:var(--ink-0)}
.brand__btn{color:var(--orange-3)}

/* The pause bars. On hover they squeeze together and the mark
   presses down 1px — the site's own logo behaves like a button. */
.bars{display:inline-flex;gap:4px;transition:gap var(--dur-1) var(--ease-snap)}
.bars i{
  display:block;width:6px;height:20px;
  background:var(--ink-0);
  border-radius:2px;
  transition:transform var(--dur-1) var(--ease-snap),background var(--dur-2) linear;
}
.brand:hover .bars{gap:2px}
.brand:hover .bars i{background:var(--orange-3);transform:scaleY(.86)}

.nav{margin-left:auto;display:flex;align-items:center;gap:var(--sp-5)}
.nav a{
  font:400 12px/1 var(--font-display);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-0);text-decoration:none;
  padding-bottom:3px;
  border-bottom:2.5px solid transparent;
  transition:border-color var(--dur-2) var(--ease-snap),color var(--dur-2) linear;
}
.nav a:hover{color:var(--orange-3);border-bottom-color:var(--orange-3)}
/* One link replaces the section list on narrow screens — three
   two-word links wrap into the wordmark otherwise. */
.nav__compact{display:none}

/* ---------------------------------------------------------------
   7. Hero
   --------------------------------------------------------------- */

.hero{
  border-bottom:var(--border-ink-thick);
  padding:var(--sp-9) 0 var(--sp-10);
  position:relative;
  overflow:hidden;
}
.hero__in{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:var(--sp-8);align-items:center;
}
.hero h1{
  font:400 var(--fs-display-xl)/var(--lh-display) var(--font-display);
  color:var(--ink-0);
  letter-spacing:var(--ls-display);
  margin:var(--sp-4) 0 0;
}
.hero h1 .hero__hot{color:var(--orange-3)}

/* Each display line is wrapped in a mask so the caps rise into
   place on load. Mechanical, 280ms, no bounce on the type itself. */
.rise{display:block;overflow:hidden}
.rise > span{display:block;transform:translateY(100%);animation:pb-rise var(--dur-3) var(--ease-out) forwards}
.rise:nth-of-type(2) > span{animation-delay:90ms}
@keyframes pb-rise{to{transform:translateY(0)}}

.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-6);align-items:center}
.hero__note{margin-top:var(--sp-5)}

/* The fanned stack: three cartridges, one per game, that snap out
   from a pile on load and spread a little further on hover. */
.stack{position:relative;height:400px}
.cart{
  position:absolute;inset:auto 0 0 0;
  width:64%;
  background:var(--paper-0);
  border:var(--border-ink);
  border-radius:var(--r-3);
  box-shadow:var(--shadow-block-2);
  padding:var(--sp-4);
  display:grid;gap:var(--sp-3);
  transition:transform var(--dur-3) var(--ease-snap),
             box-shadow var(--dur-2) var(--ease-snap);
}
.cart__plate{
  aspect-ratio:16/9;
  border:var(--border-ink);
  border-radius:var(--r-2);
  background-color:var(--paper-2);
  overflow:hidden;
  position:relative;
}
/* Each plate holds a 160x90 mini of that game's art — same ratio as
   the plate, so it fills edge to edge with no letterboxing. */
.cart__plate svg{display:block;width:100%;height:100%}
.cart__name{font:400 16px/1 var(--font-display);color:var(--ink-0)}
.cart__row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}

/* Resting fan. Animation runs from a stacked pile to these angles.
   Offsets are wide enough that each card behind still shows a slice of
   its own art, not just its name row. */
.cart--1{bottom:0;   left:0;   z-index:3;--rest:rotate(-5deg)      translate(0,0)}
.cart--2{bottom:58px;left:18%; z-index:2;--rest:rotate(2.5deg)     translate(0,0)}
.cart--3{bottom:116px;left:36%;z-index:1;--rest:rotate(-1.5deg)    translate(0,0)}
.cart{transform:var(--rest);animation:pb-deal var(--dur-4) var(--ease-out) backwards}
.cart--1{animation-delay:120ms}
.cart--2{animation-delay:220ms}
.cart--3{animation-delay:320ms}
@keyframes pb-deal{from{transform:rotate(0deg) translate(-40px,60px);opacity:0}}

.stack:hover .cart--1{transform:rotate(-7deg) translate(-18px,6px)}
.stack:hover .cart--2{transform:rotate(3.5deg) translate(6px,0)}
.stack:hover .cart--3{transform:rotate(-2.5deg) translate(26px,-8px)}
.cart:hover{box-shadow:var(--shadow-block-3);z-index:4}

/* ---------------------------------------------------------------
   8. Marquee  (port of components/showcase/Marquee.jsx)
   --------------------------------------------------------------- */

.marquee{
  overflow:hidden;
  background:var(--orange-3);color:var(--paper-0);
  border-top:var(--border-ink);border-bottom:var(--border-ink);
  transform:rotate(-1.2deg);
  margin:-18px 0 var(--sp-9);
  width:104%;margin-left:-2%;
}
.marquee--ink{background:var(--ink-0);color:var(--paper-1)}
.marquee__row{
  display:flex;gap:var(--sp-6);
  padding:10px 0;width:max-content;
  animation:pb-marquee 26s linear infinite;
}
.marquee__row span{
  font:400 15px/1 var(--font-display);
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.marquee__row span i{opacity:.5;font-style:normal}
@keyframes pb-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------
   9. Game blocks
   --------------------------------------------------------------- */

.games{padding-bottom:var(--sp-9)}

.section-head{
  display:flex;align-items:flex-end;gap:var(--sp-5);
  margin-bottom:var(--sp-7);
}
.section-head .hand{margin-left:auto;white-space:nowrap}

.game{
  padding:var(--sp-9) 0;
  border-bottom:var(--border-ink-thick);
}
.game__in{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-8);align-items:center;
}
.game--flip .game__in > .game__art{order:-1}

.game__no{
  font:400 var(--fs-display-m)/1 var(--font-display);
  color:var(--paper-3);
  -webkit-text-stroke:1.5px var(--ink-3);
}
.game--dark .game__no{color:transparent;-webkit-text-stroke:1.5px var(--ink-2)}

/* Line breaks in these titles are authored, and only ever at a space
   ("WON / WAY OUT"). Never let the browser split a word: Bungee caps
   broken mid-word read as a typo, not a stack. */
.game__title{
  font:400 var(--fs-display-l)/var(--lh-display) var(--font-display);
  color:var(--ink-0);margin:var(--sp-3) 0 var(--sp-4);
  hyphens:none;
  overflow-wrap:normal;
  word-break:normal;
}
.game__meta{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.game__body{margin:var(--sp-5) 0;font:var(--type-body);color:var(--text-muted);max-width:46ch}
.game__cta{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-6);flex-wrap:wrap}

/* Dark band for Dread Words — the game's own mood, framed in
   PauseBTN chrome. Full-bleed, and followed by a paper section. */
.game--dark{background:var(--ink-0);color:var(--paper-1)}
.game--dark .game__title{color:var(--paper-0)}
.game--dark .game__body{color:var(--paper-3)}
.game--dark .eyebrow{color:var(--ink-3)}

/* Sunken paper for Apparatus. */
.game--sunken{background:var(--paper-2)}

/* Art plates ------------------------------------------------- */

.game__art{position:relative}

.plate{
  position:relative;
  border:var(--border-ink);
  border-radius:var(--r-3);
  box-shadow:var(--shadow-block-2);
  background:var(--paper-2);
  overflow:hidden;
  transition:transform var(--dur-2) var(--ease-snap),
             box-shadow var(--dur-2) var(--ease-snap);
}
.plate--tilt-a{transform:rotate(var(--tilt-a))}
.plate--tilt-b{transform:rotate(var(--tilt-b))}
/* The plate straightens as you approach it — the one place tilt moves. */
.game:hover .plate{transform:rotate(0deg) translate(-2px,-2px);box-shadow:var(--shadow-block-3)}

.plate__cap{
  border-top:var(--border-ink);
  background:var(--paper-0);
  padding:var(--sp-3) var(--sp-4);
  display:flex;align-items:center;gap:var(--sp-3);
  font:400 14px/1 var(--font-display);color:var(--ink-0);
}
.plate__cap .mono{margin-left:auto}

/* Stickers hang off the art, not inside it — the plates clip their
   own contents, so a sticker parked in there loses its corner. */
.game__art > .sticker{position:absolute;top:-18px;right:-14px;z-index:3}
.game__art > .sticker--left{top:-18px;left:-14px;right:auto}
.game:hover .game__art > .sticker{transform:rotate(-10deg) scale(1.04)}

/* Won Way Out: an ink drawing of the cube. The runner traces one
   face's path on a 9s loop and the fog disc follows it. */
.svg-plate{display:block;width:100%;height:auto;background:var(--paper-2)}
.wwo-path{
  stroke-dasharray:4 5;
  animation:pb-dash 3.2s linear infinite;
}
@keyframes pb-dash{to{stroke-dashoffset:-18}}
/* Steps follow the isometric grid of the right-hand face: one cell
   "across" is (22.5,-13) user units, one cell "up" is (0,-26). */
.wwo-runner,.wwo-fog{animation:pb-runner 9s var(--ease-snap) infinite}
@keyframes pb-runner{
  0%       {transform:translate(0,0);opacity:0}
  4%,8%    {transform:translate(0,0);opacity:1}
  16%,20%  {transform:translate(22.5px,-13px);opacity:1}
  28%,32%  {transform:translate(22.5px,-39px);opacity:1}
  40%,44%  {transform:translate(45px,-52px);opacity:1}
  52%,56%  {transform:translate(45px,-78px);opacity:1}
  64%,68%  {transform:translate(67.5px,-91px);opacity:1}
  76%,94%  {transform:translate(67.5px,-117px);opacity:1}
  100%     {transform:translate(67.5px,-117px);opacity:0}
}

/* Apparatus: the control meter walks back and forth across the
   board and nodes light up in sequence as the engine builds. */
.app-needle{animation:pb-meter 11s var(--ease-snap) infinite}
@keyframes pb-meter{
  0%,100%{transform:translateX(0)}
  30%    {transform:translateX(52px)}
  55%    {transform:translateX(18px)}
  80%    {transform:translateX(74px)}
}
.app-node{opacity:.18;animation:pb-node 11s linear infinite}
.app-node:nth-of-type(1){animation-delay:0s}
.app-node:nth-of-type(2){animation-delay:1.1s}
.app-node:nth-of-type(3){animation-delay:2.2s}
.app-node:nth-of-type(4){animation-delay:3.3s}
.app-node:nth-of-type(5){animation-delay:4.4s}
.app-node:nth-of-type(6){animation-delay:5.5s}
@keyframes pb-node{0%,4%{opacity:.18}10%,60%{opacity:1}70%,100%{opacity:.18}}

/* Dread Words: real phone screenshots in ink-outlined frames.
   The scaffold rises, the doom line drifts — the game's own motion,
   kept inside its own plate. */
.dw{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-5);align-items:start}
.phone{
  border:var(--border-ink);
  border-radius:var(--r-4);
  box-shadow:var(--shadow-block-2);
  background:#05070a;
  overflow:hidden;
  position:relative;
  transition:transform var(--dur-2) var(--ease-snap),box-shadow var(--dur-2) var(--ease-snap);
}
.phone img{width:100%;height:auto}
.phone--a{transform:rotate(var(--tilt-a))}
.phone--b{transform:rotate(var(--tilt-b));margin-top:var(--sp-7)}
.game--dark:hover .phone--a{transform:rotate(-1deg) translate(-2px,-2px);box-shadow:var(--shadow-block-3)}
.game--dark:hover .phone--b{transform:rotate(.8deg) translate(-2px,-2px);box-shadow:var(--shadow-block-3)}

/* The doom line, borrowed as section chrome rather than painted over
   the screenshots — those are the real game and stay untouched. It
   runs the full bleed of the dark band and the dashes creep right. */
.doom{
  position:absolute;left:0;right:0;top:0;height:3px;
  background:repeating-linear-gradient(90deg,#ff3b46 0 12px,transparent 12px 24px);
  background-size:24px 3px;
  animation:pb-doom 1.6s linear infinite;
}
.doom::after{
  content:"";position:absolute;left:0;right:0;top:3px;height:70px;
  background:linear-gradient(180deg,rgba(255,59,70,.22),transparent);
}
@keyframes pb-doom{to{background-position-x:24px}}
.game--dark{position:relative}

/* ---------------------------------------------------------------
   10. "What you won't find" band
   --------------------------------------------------------------- */

.band{
  background:var(--denim-3);color:var(--paper-0);
  border-top:var(--border-ink-thick);
  border-bottom:var(--border-ink-thick);
  padding:var(--sp-8) 0;
}
.band__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-6)}
.band__item{
  border:var(--border-ink);border-radius:var(--r-3);
  background:var(--denim-4);
  padding:var(--sp-5);
  box-shadow:var(--shadow-block-1);
  transition:transform var(--dur-1) var(--ease-snap),box-shadow var(--dur-1) var(--ease-snap);
}
.band__item:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-block-2)}
.band__item h3{font:400 17px/1.1 var(--font-display);color:var(--paper-0);margin-bottom:var(--sp-3)}
/* paper-3 rather than denim-1: denim-1 on denim-4 lands at ~4.4:1,
   just under the 4.5 floor for body copy. */
.band__item p{font:var(--type-body);color:var(--paper-3)}
.band h2{color:var(--paper-0)}

/* ---------------------------------------------------------------
   11. Footer
   --------------------------------------------------------------- */

.ftr{background:var(--ink-0);color:var(--paper-1);padding:var(--sp-8) 0 var(--sp-6)}
.ftr__grid{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:var(--sp-7)}
.ftr__mark{font:400 30px/1 var(--font-display);color:var(--paper-0)}
.ftr__mark span{color:var(--orange-3)}
.ftr__hand{font:400 19px/1.35 var(--font-hand);color:var(--paper-3);max-width:28ch;margin-top:var(--sp-3)}
.ftr__col{display:grid;gap:var(--sp-2);align-content:start}
.ftr__col a{color:var(--paper-1);font:var(--type-body)}
.ftr__col a:hover{color:var(--orange-2)}
.ftr__base{
  display:flex;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;
  margin-top:var(--sp-7);padding-top:var(--sp-5);
  border-top:2.5px solid var(--ink-1);
  font:var(--type-mono);color:var(--ink-3);
}

/* ---------------------------------------------------------------
   12. Scroll reveal
   The one long duration in the system — 520ms ease-out, reveals
   only. Stagger comes from --i set per element.
   --------------------------------------------------------------- */

/* Scoped to .js — set by an inline script in <head>. Without it the
   page renders fully visible, so a failed or blocked script can
   never leave the content hidden. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--dur-4) var(--ease-out),
             transform var(--dur-4) var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms);
}
.js [data-reveal].is-in{opacity:1;transform:none}

/* Stickers arrive with the one bounce the system allows. */
.js [data-reveal] .sticker{transform:scale(.7) rotate(-6deg);opacity:0;transition:transform var(--dur-3) var(--ease-bounce) 260ms,opacity var(--dur-2) linear 260ms}
.js [data-reveal].is-in .sticker{transform:rotate(-6deg);opacity:1}

/* ---------------------------------------------------------------
   13. Responsive
   --------------------------------------------------------------- */

@media (max-width:900px){
  .hero__in,.game__in,.dw{grid-template-columns:1fr}
  .game--flip .game__in > .game__art{order:0}
  .band__grid,.ftr__grid{grid-template-columns:1fr}
  .hero{padding:var(--sp-7) 0 var(--sp-8)}
  .game{padding:var(--sp-8) 0}
  .stack{height:320px;margin-top:var(--sp-6)}
  .phone--b{margin-top:0}
  .nav{gap:var(--sp-4)}
  .nav .nav__hide{display:none}
  .section-head{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
  .section-head .hand{margin-left:0}
}

@media (max-width:700px){
  .nav__wide{display:none}
  .nav__compact{display:inline-block}
  /* Keep the fan inside the column. The cards are rotated, so leave
     room for the corners that swing past left+width. */
  .stack{height:300px}
  .cart{width:74%}
  .cart--1{left:4%}
  .cart--2{left:13%}
  .cart--3{left:22%}
  .stack:hover .cart--1,
  .stack:hover .cart--2,
  .stack:hover .cart--3{transform:var(--rest)}
}

@media (max-width:520px){
  :root{--fs-display-m:1.75rem}
  .hdr__in{gap:var(--sp-3)}
  .brand{font-size:18px}
  .bars i{height:16px;width:5px}
  .btn--lg{height:var(--control-h);padding:0 20px;font-size:14px}
  .hero__cta .btn{flex:1 1 100%}
  .cart--2{bottom:44px}
  .cart--3{bottom:88px}
}

/* ---------------------------------------------------------------
   14. Reduced motion — everything above is decoration. Kill it all.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{opacity:1;transform:none}
  .js [data-reveal] .sticker{opacity:1;transform:rotate(-6deg)}
  .rise > span{transform:none}
  .cart{transform:var(--rest)}
}