/* =====================================================================
   Mint Menace: version 5. The comic that comes alive.
   One flowing field of colour sits behind the whole page (the sky); every
   section names a tone and the sky flows into it as the reader arrives.
   Content sits in ink-bordered panels with hard offset shadows; headings
   punch in letter by letter; panels ink themselves in through Ben-Day
   dots; the cursor is the Menace's scanner. Three font families, self
   hosted. Every colour is a token. Everything reads with no script, and
   stands still under reduced motion.
   ===================================================================== */

@font-face { font-family: 'Bangers'; src: url('/fonts/bangers-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('/fonts/atkinson-hyperlegible-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* ------------------------------ tokens ------------------------------ */
@property --ht { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  /* the palette, shared with the app */
  --mint: #1F9E74;
  --mint-deep: #157A5A;
  --mint-mid: #2FBF8C;
  --mint-glow: #5FE3B0;
  --mint-bright: #7FF0C0;
  --mint-pale: #D9F2E7;
  --gold: #E3A52A;
  --gold-bright: #F1C24E;
  --gold-pale: #FBEBB5;
  --gold-deep: #9A6A0E;
  --blue: #2C63C9;
  --blue-pale: #DCE6FA;
  --blue-glow: #3B74D9;
  --paper: #FBF8EF;
  --panel: #FFFDF7;
  --ink: #16171B;
  --cream: #F3EFE4;
  --night: #101114;
  --night-2: #171B22;
  --night-3: #1F2430;
  --night-line: #3A3E47;

  /* roles: components use these, and each tone sets them */
  --text: var(--ink);
  --muted: #4A4D57;
  --line: var(--ink);
  --shadow: var(--ink);
  --surface: var(--panel);
  --link: var(--blue);
  --head: var(--mint-deep);
  --field: #FFFFFF;
  --focus: var(--blue);
  --h-fill: var(--ink);
  --h-stroke: 0px;
  --h-plate: var(--gold);
  --cap-bg: var(--gold-pale);

  /* the sky: set by the build for the first paint, then by site.js */
  --sky-a: #FBF8EF; --sky-b: #FBF8EF; --sky-c1: #D9F2E7; --sky-c2: #FFFDF7; --sky-c3: #FBEBB5; --sky-c4: #D9F2E7; --sky-dot: rgba(22, 23, 27, .08);

  --sans: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bangers', Impact, 'Arial Narrow Bold', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --gutter: clamp(1rem, 4vw, 2.25rem);
  --gap: clamp(1.25rem, 3vw, 2rem);
  --spring: cubic-bezier(.2, 1.55, .4, 1);
  --out: cubic-bezier(.2, .9, .3, 1);
  color-scheme: light;
}
:root[data-theme="dark"], :root.prefers-dark { color-scheme: dark; }

/* ------------------------------ grounds ----------------------------- */
/* Each section names a tone. The page has one ground at a time: the tone
   of the section in the middle of the screen (site.js keeps it in
   html[data-ground], and the build sets the first one). The sky flows into
   that tone and the ink follows it: text, lines and panel faces all fade
   to the colours made for that ground, so words never sit on a ground they
   were not coloured for. Without script each section paints its own
   ground and inks itself. Light grounds keep ink; dark grounds take cream;
   mint and gold stay vivid in both schemes because they are the brand. */
@property --text { syntax: '<color>'; inherits: true; initial-value: #16171B; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #4A4D57; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #16171B; }
@property --shadow { syntax: '<color>'; inherits: true; initial-value: #16171B; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #FFFDF7; }
@property --link { syntax: '<color>'; inherits: true; initial-value: #2C63C9; }
@property --head { syntax: '<color>'; inherits: true; initial-value: #157A5A; }
@property --h-fill { syntax: '<color>'; inherits: true; initial-value: #16171B; }
@property --h-plate { syntax: '<color>'; inherits: true; initial-value: #E3A52A; }
@property --cap-bg { syntax: '<color>'; inherits: true; initial-value: #FBEBB5; }
html.js body { transition: --text .5s, --muted .5s, --line .5s, --shadow .5s, --surface .5s, --link .5s, --head .5s, --h-fill .5s, --h-plate .5s, --cap-bg .5s; }
[data-tone] { color: var(--text); position: relative; }
.on-dark,
html:not(.js) :is([data-tone="hunt"], [data-tone="ink"], [data-tone="cobalt"], [data-tone="night"]),
html:not(.js):is([data-theme="dark"], .prefers-dark) :is([data-tone="loft"], [data-tone="paper"], [data-tone="cream"], [data-tone="mintpale"]),
html:is([data-theme="dark"], .prefers-dark) body,
html.js:is([data-ground="hunt"], [data-ground="ink"], [data-ground="cobalt"], [data-ground="night"]) body {
  --text: var(--cream); --muted: #B7BAC4; --line: var(--cream); --shadow: #000; --surface: var(--night-3);
  --link: #8FB0FF; --head: var(--mint-bright); --field: #24272E; --focus: var(--gold-bright);
  --h-fill: #FFFDF7; --h-stroke: .045em; --h-plate: var(--mint-mid); --cap-bg: #3A3014;
}
html:not(.js) [data-tone="cobalt"], html.js[data-ground="cobalt"] body { --head: var(--gold-bright); --link: #FFD56A; --surface: #16295E; --shadow: #050B22; --h-plate: var(--gold); }
html:not(.js) [data-tone="mint"], html.js[data-ground="mint"] body { --text: var(--ink); --muted: #10372A; --line: var(--ink); --shadow: var(--ink); --surface: var(--panel); --link: #0D2E60; --head: var(--ink); --field: #FFFFFF; --focus: var(--blue); --h-fill: #FFFDF7; --h-stroke: .045em; --h-plate: var(--gold); --cap-bg: var(--gold-pale); }
html:not(.js) [data-tone="gold"], html.js[data-ground="gold"] body { --text: var(--ink); --muted: #4A3A14; --line: var(--ink); --shadow: var(--ink); --surface: var(--panel); --link: #0D2E60; --head: var(--ink); --field: #FFFFFF; --focus: var(--blue); --h-fill: var(--ink); --h-stroke: 0px; --h-plate: #FFFDF7; --cap-bg: var(--panel); }

/* With no script the sky cannot flow, so each section paints its own ground. */
html:not(.js) [data-tone="mint"] { background: radial-gradient(90% 80% at 70% 40%, #5FE3B0, #1F9E74 60%, #127055); }
html:not(.js) [data-tone="loft"] { background: linear-gradient(180deg, #FBE7A8, #FBF6E6); }
html:not(.js) [data-tone="hunt"] { background: radial-gradient(80% 70% at 70% 30%, #1F6B52, #0B1A16 70%); }
html:not(.js) [data-tone="ink"] { background: linear-gradient(180deg, #1D2230, #0C0D10); }
html:not(.js) [data-tone="paper"] { background: #FBF8EF; }
html:not(.js) [data-tone="cobalt"] { background: radial-gradient(80% 80% at 25% 20%, #3B74D9, #1C3C86 50%, #0B1638); }
html:not(.js) [data-tone="gold"] { background: linear-gradient(170deg, #F6CF62, #DF9D22); }
html:not(.js) [data-tone="cream"] { background: linear-gradient(180deg, #FBF8EF, #F8E7B8); }
html:not(.js) [data-tone="night"] { background: linear-gradient(180deg, #161A24, #08090C); }
html:not(.js) [data-tone="mintpale"] { background: linear-gradient(180deg, #D3F4E5, #FBF8EF); }

/* ------------------------------ base -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 1.0625rem/1.6 var(--sans); color: var(--text); background: var(--paper); min-height: 100vh; overflow-wrap: break-word; }
:root[data-theme="dark"] body, :root.prefers-dark body { background: var(--night); }
img, svg { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; max-width: 64ch; }
ul, ol { padding-left: 1.4em; }
li { margin-bottom: .35em; }
strong, b { font-weight: 700; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip { position: fixed; left: -999px; top: .5rem; z-index: 200; background: var(--gold); color: var(--ink); padding: .6em 1em; border: 3px solid var(--ink); font-weight: 700; }
.skip:focus { left: .5rem; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lede { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); line-height: 1.5; }
.mono { font-family: var(--mono); }
.small { font-size: .9375rem; }
.muted { color: var(--muted); }
.smallprint { font: 600 .74rem/1.6 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); max-width: none; }

/* ------------------------------ the sky ----------------------------- */
.sky { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; view-transition-name: sky; background: linear-gradient(168deg, var(--sky-a) 0%, var(--sky-b) 100%); }
.sky__blob { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); will-change: transform; }
.sky__blob--1 { --c: var(--sky-c1); width: 80vmax; height: 80vmax; left: -22vmax; top: -34vmax; opacity: .9; }
.sky__blob--2 { --c: var(--sky-c2); width: 62vmax; height: 62vmax; right: -24vmax; top: -8vmax; opacity: .75; }
.sky__blob--3 { --c: var(--sky-c3); width: 76vmax; height: 76vmax; left: 8vmax; bottom: -44vmax; opacity: .8; }
.sky__blob--4 { --c: var(--sky-c4); width: 58vmax; height: 58vmax; right: -14vmax; bottom: -26vmax; opacity: .85; }
.sky::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--sky-dot) 1.1px, transparent 1.45px); background-size: 7px 7px; }
.sky::before { content: ""; position: absolute; inset: 0; background: url('/img/grain.png') 0 0 / 160px 160px; opacity: .55; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .sky__blob--1 { animation: drift-1 44s ease-in-out infinite alternate; }
  .sky__blob--2 { animation: drift-2 52s ease-in-out infinite alternate; }
  .sky__blob--3 { animation: drift-3 60s ease-in-out infinite alternate; }
  .sky__blob--4 { animation: drift-4 48s ease-in-out infinite alternate; }
}
@keyframes drift-1 { to { transform: translate3d(16vmax, 12vmax, 0) scale(1.15); } }
@keyframes drift-2 { to { transform: translate3d(-18vmax, 14vmax, 0) scale(.9); } }
@keyframes drift-3 { to { transform: translate3d(14vmax, -16vmax, 0) scale(1.1); } }
@keyframes drift-4 { to { transform: translate3d(-12vmax, -10vmax, 0) scale(1.2); } }

/* ------------------------------ header ------------------------------ */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding-top: .65rem; transition: transform .45s var(--out); pointer-events: none; }
.site-head.is-hidden { transform: translateY(calc(-100% - 1rem)); }
.site-head__bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 1rem; width: min(100% - 2 * var(--gutter), 78rem); margin-inline: auto; padding: .45rem .55rem .45rem .7rem; view-transition-name: masthead; background: rgba(255, 253, 247, .9); color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); }
:root[data-theme="dark"] .site-head__bar, :root.prefers-dark .site-head__bar { background: rgba(23, 27, 34, .9); color: var(--cream); border-color: var(--cream); box-shadow: 6px 6px 0 #000; }
.site-head__progress { position: absolute; left: -3px; right: -3px; bottom: -3px; height: 4px; background: linear-gradient(90deg, var(--mint-glow), var(--gold-bright)); transform-origin: left center; transform: scaleX(var(--progress, 0)); }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; color: inherit; }
.logo__badge { width: 2.6rem; height: auto; transition: transform .4s var(--spring); }
.logo:hover .logo__badge { transform: rotate(-12deg) scale(1.08); }
.logo__word { font-size: 1.65rem; padding-top: .12em; }
.logo__tag { display: none; font: 400 .78rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin: .2em 0 0 .1em; }
@media (min-width: 48rem) { .logo__tag { display: block; } }
.logo__text { display: grid; }
.nav { margin-left: auto; }
.nav__list { display: none; list-style: none; gap: 1.2rem; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__list a { position: relative; font-weight: 700; text-decoration: none; color: inherit; padding: .3em 0; white-space: nowrap; }
.nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.15em; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--out); }
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav__menu { position: relative; }
.nav__menu summary { list-style: none; cursor: pointer; margin: 0; }
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__menu ul { position: absolute; right: -.6rem; top: calc(100% + .9rem); z-index: 20; min-width: 17rem; background: var(--panel); color: var(--ink); border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); list-style: none; margin: 0; padding: .5rem 0; }
:root[data-theme="dark"] .nav__menu ul, :root.prefers-dark .nav__menu ul { background: var(--night-3); color: var(--cream); border-color: var(--cream); box-shadow: 7px 7px 0 #000; }
.nav__menu li { margin: 0; }
.nav__menu ul a { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1.2rem; font-weight: 700; text-decoration: none; color: inherit; }
.nav__menu ul a small { font: 600 .74rem/1.6 var(--mono); opacity: .7; letter-spacing: .08em; }
.nav__menu ul a:hover, .nav__menu ul a[aria-current="page"] { background: var(--gold-pale); color: var(--ink); }
@media (min-width: 68rem) { .nav__list { display: flex; } .nav__menu { display: none; } }
.site-head__bar .site-head__cta { display: none; }
@media (min-width: 40rem) { .site-head__bar .site-head__cta { display: inline-flex; } }
.theme { font: 600 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: transparent; color: inherit; border: 2px solid currentColor; padding: .55em .6em; cursor: pointer; flex: none; }
.theme:hover { background: var(--gold-pale); color: var(--ink); }
html:not(.js) .theme { display: none; }
.motion { font: 600 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: transparent; color: inherit; border: 2px solid currentColor; padding: .55em .6em; cursor: pointer; flex: none; white-space: nowrap; }
.motion:hover { background: var(--gold-pale); color: var(--ink); }
.site-head__bar > .motion { display: none; }
@media (min-width: 48rem) { .site-head__bar > .motion:not([hidden]) { display: inline-block; } }
.nav__menu li.nav__motion { padding: .6rem 1.2rem .4rem; border-top: 2px dashed currentColor; margin-top: .4rem; }
html:not(.js) .motion, html:not(.js) .nav__motion { display: none; }
@media (max-width: 40rem) { .site-head__bar { gap: .55rem; } .logo__badge { width: 2.2rem; } .logo__word { font-size: 1.3rem; } }
@media (max-width: 22rem) { .logo__word { font-size: 1.1rem; } }

/* ------------------------------ lettering --------------------------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: .92; letter-spacing: .015em; text-transform: uppercase; margin: 0 0 .45em; text-wrap: balance; }
h3 { font-size: clamp(1.45rem, 1.25rem + .9vw, 2rem); color: var(--head); }
/* A section title: comic lettering that follows the tone underneath. */
.title { font-size: clamp(2.5rem, 1.35rem + 4.4vw, 5.6rem); color: var(--h-fill); -webkit-text-stroke: var(--h-stroke) var(--ink); paint-order: stroke fill; text-shadow: .055em .055em 0 var(--h-plate); }
.title--xl { font-size: clamp(2.6rem, 1.3rem + 4.3vw, 6.1rem); }
.title--md { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); }
/* The extruded logo lettering: cream face, ink outline, a deep gold side. */
.extrude { color: #FFFDF7; -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill;
  text-shadow: .012em .012em 0 #E3A52A, .024em .024em 0 #E3A52A, .036em .036em 0 #E3A52A, .048em .048em 0 #E3A52A, .06em .06em 0 #E3A52A, .072em .072em 0 #E3A52A, .084em .084em 0 #E3A52A,
    .098em .098em 0 var(--ink), .104em .09em 0 var(--ink), .09em .104em 0 var(--ink), .11em .11em 0 var(--ink), .11em .1em 0 var(--ink), .1em .11em 0 var(--ink); }
/* The app's wordmark: mint letters, ink outline, gold plate, one outline round all. */
.wm { font-family: var(--display); font-weight: 400; letter-spacing: .035em; text-transform: uppercase; line-height: .9; color: var(--mint-bright); -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill;
  text-shadow: .08em .08em 0 var(--gold), .13em .13em 0 var(--ink), .13em .08em 0 var(--ink), .08em .13em 0 var(--ink), .13em .03em 0 var(--ink), .03em .13em 0 var(--ink); }
.wm--paper { color: #FFFDF7; }
.plate { color: var(--h-fill); text-shadow: .06em .06em 0 var(--h-plate); }

/* Kinetic lettering: site.js splits [data-split] into letters, which punch
   in one by one when the heading arrives. */
[data-split] .w { display: inline-block; white-space: nowrap; }
/* Letters are readable from the first frame and punch into place: starting
   them invisible left headlines blank for a second or two, which is what link
   previews and quick visitors saw (review, 4 Oct 2026). */
html.js [data-split] .l { display: inline-block; transition: transform .5s var(--spring); transition-delay: calc(var(--i) * 14ms); }
html.js [data-split]:not(.is-in) .l { transform: translateY(.08em) scale(.86) rotate(-4deg); }
/* The first screen of every page is there at once; later sections still fade in. */
html.js main > .sec:first-of-type .reveal { opacity: 1; }

/* The caption box: mono label, pale yellow, across a panel's top edge. */
.caption { display: inline-block; font: 600 .78rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--gold-pale); border: 2px solid var(--ink); padding: .42em .78em; box-shadow: 3px 3px 0 var(--ink); margin-bottom: 1.1rem; }
.caption--tag { position: absolute; top: -1.1rem; left: 1.25rem; margin: 0; z-index: 2; }
.caption--paper { background: #FFFDF7; }
.caption--night { background: var(--night-3); color: var(--cream); border-color: var(--cream); box-shadow: 3px 3px 0 #000; }
.caption--mint { background: var(--mint-bright); }
.narration { background: var(--gold-pale); color: var(--ink); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: .9rem 1.15rem; font-size: 1.02rem; line-height: 1.55; max-width: 44rem; margin: 0 0 1.5rem; }
.narration p { margin: 0; max-width: none; }
.narration--wide { max-width: 52rem; }
.bubble { position: relative; background: #FFFDF7; color: var(--ink); border: 3px solid var(--ink); border-radius: 1.5rem; padding: 1rem 1.35rem; box-shadow: 5px 5px 0 var(--ink); font-weight: 700; font-size: 1.125rem; line-height: 1.4; margin: 0 0 1.5rem; width: fit-content; max-width: 100%;
  --tail: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2030%2025'%3E%3Cpath%20d%3D'M0%200H30V1.9L1.9%2020.6H0Z'%20fill%3D'%23FFFDF7'/%3E%3Cpath%20d%3D'M30%201.9L1.9%2020.6V0'%20fill%3D'none'%20stroke%3D'%2316171B'%20stroke-width%3D'3.75'%20stroke-linejoin%3D'miter'%20stroke-miterlimit%3D'10'%20stroke-linecap%3D'square'/%3E%3C/svg%3E"); }
.bubble::after { content: ""; position: absolute; left: 1.75rem; bottom: -1.25rem; width: 1.5rem; height: 1.25rem; background: var(--tail) no-repeat center / 100% 100%; }
.bubble--br::after { left: auto; right: 1.75rem; transform: scaleX(-1); }
.bubble--tl::after { bottom: auto; top: -1.25rem; transform: scaleY(-1); }
.bubble--quote { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); letter-spacing: .03em; text-transform: uppercase; line-height: 1; padding: 1.1rem 1.5rem .95rem; }
.confirm { display: inline-block; font: 600 .8rem/1.4 var(--mono); background: var(--gold-pale); color: var(--ink); border: 2px dashed var(--ink); padding: .4em .7em; max-width: 100%; vertical-align: middle; }

/* Sound effects: drawn bursts, sized by their parent. */
.burst { width: 9rem; height: auto; filter: drop-shadow(4px 4px 0 rgba(22, 23, 27, .35)); }
.burst--corner { position: absolute; top: -2.4rem; right: -1rem; width: clamp(6rem, 12vw, 9.5rem); transform: rotate(10deg); z-index: 3; }

/* ------------------------------ motion utilities -------------------- */
/* Reveal: rise and fade in when it arrives. */
html.js .reveal { opacity: 0; transform: translateY(1.4rem); transition: opacity .8s var(--out), transform .8s var(--out); transition-delay: calc(var(--i, 0) * 110ms); }
html.js .reveal.is-in { opacity: 1; transform: none; }
/* Halftone ink-in: the element appears through growing Ben-Day dots. */
html.js .ht { -webkit-mask-image: radial-gradient(circle, #000 var(--ht), transparent calc(var(--ht) + .7px)); mask-image: radial-gradient(circle, #000 var(--ht), transparent calc(var(--ht) + .7px)); -webkit-mask-size: 16px 16px; mask-size: 16px 16px; -webkit-mask-position: center; mask-position: center; transition: --ht 1.05s cubic-bezier(.45, 0, .2, 1); transition-delay: calc(var(--i, 0) * 120ms); }
html.js .ht.is-in { --ht: 12px; }
html.js .ht.is-done { -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js [data-split] .l { opacity: 1; transform: none; transition: none; }
  html.js .ht { -webkit-mask-image: none; mask-image: none; }
}

/* Page turns between the pages of the issue. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: .46s cubic-bezier(.45, 0, .2, 1) both page-out; }
  ::view-transition-new(root) { animation: .52s cubic-bezier(.2, .8, .2, 1) both page-in; }
}
@keyframes page-out { to { transform: perspective(1400px) translateX(-14%) rotateY(10deg); opacity: 0; } }
@keyframes page-in { from { transform: perspective(1400px) translateX(16%) rotateY(-10deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ------------------------------ layout ------------------------------ */
.wrap { width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; position: relative; }
.wrap--wide { width: min(100% - 2 * var(--gutter), 120rem); }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 50rem); }
.sec { position: relative; padding-block: clamp(3.5rem, 7vw, 6.5rem); overflow-x: clip; }
main > .sec:first-child:not(.hero) { padding-top: clamp(7.5rem, 11vw, 10rem); }
.section { padding-block: clamp(2rem, 5vw, 4rem); overflow-x: clip; }
.grid-2 { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 54rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.tier { display: grid; gap: var(--gap); align-items: start; }
.tier + .tier, .tier + .panel, .panel + .tier, .panel + .panel { margin-top: var(--gap); }
@media (min-width: 40rem) { .tier--2 { grid-template-columns: 1fr 1fr; } .tier--2-1 { grid-template-columns: 2fr 1fr; } .tier--1-2 { grid-template-columns: 1fr 2fr; } }
@media (min-width: 48rem) { .tier--3 { grid-template-columns: repeat(3, 1fr); } .tier--3-2 { grid-template-columns: 3fr 2fr; } .tier--2-3 { grid-template-columns: 2fr 3fr; } }

/* Panels: ink border, hard offset shadow, a solid ground so copy never sits on the sky. */
.panel { position: relative; background: var(--surface); color: var(--text); border: 3px solid var(--line); box-shadow: 8px 8px 0 var(--shadow); padding: clamp(1.25rem, 2vw + .8rem, 2.4rem); }
.panel > :last-child { margin-bottom: 0; }
.panel--tag { padding-top: clamp(2.3rem, 2vw + 1.6rem, 3.1rem); }
.panel--gold { background: var(--gold-pale); color: var(--ink); --text: var(--ink); --muted: #4A3A14; --head: #0E6347; --link: #0D2E60; --line: var(--ink); --surface: var(--panel); --field: #FFFFFF; --focus: var(--blue); --h-fill: var(--ink); --h-stroke: 0px; --h-plate: var(--mint-mid); --cap-bg: var(--panel); }
.panel--mint { background: var(--mint-pale); color: var(--ink); --text: var(--ink); --muted: #10372A; --head: var(--mint-deep); --link: #0D2E60; --line: var(--ink); --surface: var(--panel); --field: #FFFFFF; --focus: var(--blue); --h-fill: var(--ink); --h-stroke: 0px; --h-plate: var(--gold); }
.panel--splash { border-width: 4px; box-shadow: 11px 11px 0 var(--shadow); }
.panel--thin { border-width: 2px; box-shadow: 5px 5px 0 var(--shadow); }
.panel--tilt { transform: rotate(-1deg); }
.panel--tilt-r { transform: rotate(1deg); }
.panel--gold .caption, .panel--mint .caption { background: #FFFDF7; }
.has-inset { padding-bottom: clamp(2rem, 4vw, 3rem); }
.panel--inset { border-width: 2px; box-shadow: 5px 5px 0 var(--shadow); padding: 1rem 1.15rem; font-size: .95rem; margin-top: 1.5rem; }
.panel--inset h3 { font-size: 1.35rem; }
@media (min-width: 54rem) { .has-inset { padding-right: 38%; } .panel--inset { position: absolute; right: -1.25rem; bottom: -1.25rem; width: 40%; margin: 0; transform: rotate(1.5deg); } }
.panel--break { margin-top: clamp(4rem, 8vw, 6rem); }
.breakout { margin-top: calc(-1 * clamp(4rem, 8vw, 6rem) - .75rem); position: relative; z-index: 1; }
.fit { width: min(100%, var(--w, 20rem)); margin-inline: auto; }

/* ------------------------------ chips and verdicts ------------------ */
.verdict, .chip { display: inline-flex; align-items: center; gap: .55em; font: 600 .8rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: .55em .8em; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; vertical-align: middle; color: var(--ink); }
.verdict__glyph { font-weight: 600; font-size: 1.15em; line-height: 1; }
.verdict--pence { background: var(--gold); }
.verdict--likely { background: var(--gold-pale); border-style: dashed; }
.verdict--check { background: #FFFDF7; }
.verdict--noprice { background: #FFFDF7; border-style: dotted; }
.verdict--dual { background: var(--mint-mid); }
.verdict--us { background: var(--blue); color: #FFFFFF; }
.verdict--uk { background: var(--ink); color: var(--paper); border-color: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.chip--key { background: var(--gold-pale); }
.chip--sure { background: var(--mint-mid); }
.chip--unsure { background: #FFFDF7; border-style: dashed; }
.chip--signed { background: var(--blue-pale); }
.chip--coming { background: transparent; color: var(--muted); border-color: currentColor; border-style: dashed; box-shadow: none; font-size: .7rem; vertical-align: .2em; }
.chips { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }

/* ------------------------------ buttons ----------------------------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 700 1.05rem/1.2 var(--sans); color: var(--ink); background: var(--gold); border: 3px solid var(--ink); padding: .85em 1.5em; text-decoration: none; box-shadow: 6px 6px 0 var(--ink); cursor: pointer; text-align: center; transition: transform .18s var(--out), box-shadow .18s var(--out), background .2s; }
.btn::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: radial-gradient(rgba(255, 255, 255, .6) 1.3px, transparent 1.7px) 0 0 / 7px 7px; transform: translateX(-120%) skewX(-20deg); transition: transform .6s var(--out); }
.btn:hover { background: var(--gold-bright); transform: translate(-2px, -3px); box-shadow: 8px 9px 0 var(--ink); }
.btn:hover::before { transform: translateX(120%) skewX(-20deg); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn--ghost { background: #FFFDF7; }
.btn--ghost:hover { background: var(--gold-pale); }
.btn--mint { background: var(--mint-bright); }
.btn--mint:hover { background: var(--mint-glow); }
.btn--sm { padding: .55em 1em; font-size: .95rem; box-shadow: 4px 4px 0 var(--ink); }
.btn--lg { font-size: 1.15rem; padding: .95em 1.8em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin: 1.6rem 0 1rem; }
@media (prefers-reduced-motion: reduce) { .btn, .btn::before { transition: none; } .btn:hover { transform: none; } }

/* ------------------------------ forms ------------------------------- */
.signup { display: grid; gap: 1.1rem; max-width: 34rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 700; }
.field input, .field select { font: inherit; color: var(--text); background: var(--field); border: 3px solid var(--line); padding: .78em 1em; width: 100%; }
.check { display: flex; gap: .75rem; align-items: flex-start; font-size: .95rem; line-height: 1.5; }
.check input { flex: none; width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; accent-color: var(--mint); }
.signup .btn { justify-self: start; }
.signup__note { font: 400 .8rem/1.5 var(--mono); color: var(--muted); margin: 0; }

/* ------------------------------ corner boxes ------------------------ */
.corner { width: 5rem; height: auto; filter: drop-shadow(4px 4px 0 var(--shadow)); }
.logo .corner, .pageno .corner { filter: none; }
.pageno { flex: none; width: 3.6rem; margin-top: .4rem; }
.pageno .corner { width: 100%; filter: drop-shadow(3px 3px 0 var(--ink)); }
.barcode { display: inline-grid; gap: .2rem; justify-items: center; background: #FFFFFF; border: 2px solid var(--ink); padding: .45rem .6rem .35rem; flex: none; }
.barcode svg { width: 6rem; height: auto; }
.barcode span { font: 600 .55rem/1 var(--mono); letter-spacing: .12em; color: var(--ink); }
.boxes { display: flex; flex-wrap: wrap; gap: 2rem 2.5rem; justify-content: center; align-items: flex-start; margin: 1.5rem 0 .5rem; }
.boxes__item { display: grid; gap: 1rem; justify-items: center; text-align: center; max-width: 12rem; }
.boxes__item .corner { width: 6rem; }
.boxes__item p { font-size: .9375rem; margin: 0; color: var(--muted); }
.comic { width: 100%; height: auto; }
.cover { width: 100%; height: auto; }
.icon { width: 2.75rem; height: 2.75rem; flex: none; filter: drop-shadow(2px 2px 0 rgba(22, 23, 27, .35)); }

/* ------------------------------ the phone and the card -------------- */
.phone { container-type: inline-size; background: #16171B; border: 3px solid var(--ink); border-radius: 14% / 6.5%; box-shadow: 8px 8px 0 var(--shadow), inset 0 0 0 2px #2A2E38; padding: 4%; aspect-ratio: 9 / 19; color: #F3EFE4; font-family: var(--sans); }
.phone__screen { background: var(--night-2); border-radius: 10.5% / 5%; height: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.phone__bar { display: flex; justify-content: space-between; font: 600 3.6cqw/1 var(--mono); letter-spacing: .08em; padding: 6% 8% 3%; color: #B7BAC4; flex: none; }
.phone__view { position: relative; flex: 1; margin: 2% 6%; background: #0E0F12; border-radius: 5cqw; overflow: hidden; display: grid; place-items: center; min-height: 0; }
.phone__cover { position: relative; width: 70%; transform: rotate(3deg); }
.phone__edges { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone__scanline { position: absolute; left: 7%; right: 7%; top: 10%; height: 2px; background: var(--mint-bright); box-shadow: 0 0 10px var(--mint-bright); }
@media (prefers-reduced-motion: no-preference) { .phone__scanline { animation: scan 2.4s ease-in-out infinite alternate; } @keyframes scan { from { top: 9%; } to { top: 89%; } } }
.tag { position: absolute; border: 2px solid var(--mint-bright); font: 600 2.9cqw/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #16171B; }
.tag::after { content: attr(data-label); position: absolute; background: var(--mint-bright); padding: .3em .45em; white-space: nowrap; }
.tag--no { left: 3.5%; top: 2%; width: 20%; height: 12%; } .tag--no::after { left: -2px; bottom: 100%; }
.tag--price { left: 3.5%; top: 13.5%; width: 20%; height: 5.5%; } .tag--price::after { left: -2px; top: 100%; }
.tag--date { left: 27%; top: 19%; width: 22%; height: 4.2%; } .tag--date::after { left: -2px; top: 100%; }
.tag--code { left: 8%; top: 87%; width: 84%; height: 8%; } .tag--code::after { right: -2px; bottom: 100%; }
.phone__hint { font: 600 3.3cqw/1.4 var(--mono); color: #B7BAC4; text-align: center; margin: 3% 8% 4%; letter-spacing: .04em; max-width: none; flex: none; }
.phone__shutter { display: block; width: 14cqw; height: 14cqw; border-radius: 50%; border: 3px solid #F3EFE4; margin: 0 auto 6%; background: radial-gradient(circle, var(--gold) 58%, transparent 60%); flex: none; }
.phone__list { padding: 0 6% 4%; display: grid; gap: 3%; grid-template-rows: auto auto repeat(5, auto) 1fr; flex: 1; min-height: 0; overflow: hidden; }
.phone__listhead { display: flex; justify-content: space-between; font: 600 3.4cqw/1 var(--mono); letter-spacing: .1em; color: #F3EFE4; margin: 2% 0 0; }
.phone__listhead span:last-child { color: var(--mint-bright); }
.phone__search { font: 400 3.6cqw/1 var(--sans); color: #8B8F99; background: #24272E; border: 1.5px solid var(--night-line); border-radius: 2cqw; padding: 3% 4%; margin: 0; }
.phone__row { display: grid; grid-template-columns: 14% 1fr auto; gap: 3%; align-items: center; background: #24272E; border: 1.5px solid var(--night-line); padding: 3%; border-radius: 2cqw; }
.phone__thumb { width: 100%; }
.phone__rowtext { display: grid; gap: .3em; min-width: 0; }
.phone__rowtext b { font: 700 3.4cqw/1.2 var(--sans); color: #F3EFE4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone__rowtext i { font: 400 3cqw/1.2 var(--mono); font-style: normal; color: #B7BAC4; }
.phone__rowchips { display: grid; gap: .35em; justify-items: end; }
.phone__rowchips em { font: 600 2.7cqw/1 var(--mono); font-style: normal; background: var(--gold); color: #16171B; padding: .35em .5em; border: 1px solid #16171B; white-space: nowrap; }
.phone__rowchips em:last-child { background: var(--mint-mid); }
.phone__total { font: 600 3cqw/1.3 var(--mono); letter-spacing: .06em; color: #B7BAC4; margin: 0; text-align: center; align-self: end; }
.phone__tabs { display: flex; justify-content: space-around; border-top: 1.5px solid var(--night-line); padding: 4% 0 2%; margin: 0 6%; font: 600 2.8cqw/1 var(--mono); letter-spacing: .08em; color: #8B8F99; flex: none; }
.phone__tabs span:nth-child(2) { color: var(--mint-bright); }
.card { background: #24272E; border: 2px solid var(--night-line); border-left: 5px solid var(--gold); color: #E4E1D8; }
.phone .card { margin: 3% 6% 6%; padding: 4.5% 5%; flex: none; }
.card__title { font: 700 4.4cqw/1.25 var(--sans); margin: 0; color: #F3EFE4; max-width: none; }
.card__meta { font: 600 3.1cqw/1.4 var(--mono); color: #B7BAC4; margin: .3em 0 .7em; letter-spacing: .06em; max-width: none; }
.card__chips { display: flex; flex-wrap: wrap; gap: 1.5cqw; margin: 0 0 .6em; max-width: none; }
.phone .card .verdict, .phone .card .chip { font-size: 3cqw; box-shadow: none; padding: .5em .6em; }
.card__why { font-size: 3.5cqw; line-height: 1.35; margin: 0; max-width: none; }
.card__key { font-size: 3.2cqw; line-height: 1.35; margin: .6em 0 0; color: #F3EFE4; max-width: none; border-top: 1px solid var(--night-line); padding-top: .6em; }
.card__link { font: 600 2.9cqw/1.3 var(--mono); color: #8FB0FF; margin: .8em 0 0; letter-spacing: .04em; max-width: none; }
.card--big { padding: clamp(1.25rem, 3vw, 2rem); border-width: 3px; border-left-width: 8px; box-shadow: 8px 8px 0 var(--ink); max-width: 36rem; }
.card--big .card__title { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.65rem); }
.card--big .card__meta { font-size: .8rem; }
.card--big .card__chips { gap: .6rem; margin-bottom: 1rem; }
.card--big .verdict, .card--big .chip { box-shadow: none; }
.card--big .card__why { font-size: 1rem; line-height: 1.55; }
.card--big .card__key { font-size: .95rem; line-height: 1.5; padding-top: .8em; margin-top: .9em; }
.card--big .card__link { font-size: .85rem; margin-top: 1rem; }
.notice { background: var(--night-2); color: #E4E1D8; border: 3px solid var(--line); box-shadow: 7px 7px 0 var(--shadow); padding: 1.25rem 1.5rem; max-width: 34rem; }
.notice__head { font: 600 .8rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-bright); margin: 0 0 .6em; }
.notice p { color: #E4E1D8; } .notice p:last-child { margin: 0; }
.cands { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.cands li { margin: 0; display: flex; gap: .75rem; align-items: center; background: #1B1D22; border: 1.5px solid #3A3E47; padding: .6rem .8rem; font-size: .95rem; color: #E4E1D8; }
.cands__no { font: 600 .8rem/1 var(--mono); background: var(--mint-bright); color: #16171B; padding: .4em .5em; border: 1.5px solid #16171B; }

/* ------------------------------ comic forms ------------------------- */
.verdicts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.5rem; }
.verdicts li { display: grid; gap: .6rem 1.5rem; border-top: 3px dashed var(--line); padding-top: 1.5rem; margin: 0; }
@media (min-width: 48rem) { .verdicts li { grid-template-columns: 15rem 1fr; } }
.verdicts p { margin-bottom: .6em; }
.verdicts .todo { font-weight: 700; }
.letters { display: grid; gap: 2.5rem; margin: 1.5rem 0 0; }
.letter { display: grid; gap: .25rem; }
.letter__from { font: 600 .72rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.letter__reply { margin: .5rem 0 0 1.5rem; padding: .25rem 0 0 1rem; border-left: 3px solid var(--gold); }
.letter__reply > :last-child { margin-bottom: 0; }
.next-issue { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.5rem; }
.next-issue__item { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: start; margin: 0; border-top: 3px dashed var(--line); padding-top: 1.5rem; }
.next-issue__num { font: 400 3rem/1 var(--display); color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--shadow); padding-top: .05em; }
.next-issue h3 { font-size: 1.6rem; margin-bottom: .25em; }
.next-issue p { margin: 0; }
.credits { margin: 1rem 0 0; display: grid; gap: .6rem; }
.credits > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; border-top: 2px dashed var(--line); padding-top: .6rem; }
.credits dt { font: 600 .75rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.credits dd { margin: 0; }
@media (max-width: 30rem) { .credits > div { grid-template-columns: 1fr; gap: .1rem; } }
.features { display: grid; gap: 1.25rem; margin: 1.25rem 0 0; }
@media (min-width: 40rem) { .features { grid-template-columns: 1fr 1fr; } }
.feature { border: 2px solid var(--line); padding: 1rem 1.15rem; background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); }
.feature h3 { font-size: 1.35rem; margin-bottom: .3em; }
.feature p { margin: 0; font-size: .95rem; }
.checklist { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .85rem; }
.checklist li { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; align-items: start; margin: 0; }
.checklist .mark { font: 600 1rem/1.6 var(--mono); color: var(--head); }
.timeline { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.25rem; }
.timeline li { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; align-items: start; margin: 0; }
.timeline .yr { font: 400 2.1rem/1 var(--display); color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--shadow); padding-top: .1em; }
.timeline p { margin: 0; }
.prices { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 1.25rem 0 0; }
.prices li { margin: 0; font: 600 .95rem/1 var(--mono); background: var(--gold); color: var(--ink); border: 2px solid var(--ink); padding: .5em .7em; box-shadow: 3px 3px 0 var(--ink); }
.prices li.is-old { background: #FFFDF7; }
.publishers { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.publishers li { margin: 0; font: 600 .78rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 2px solid var(--line); padding: .45em .6em; background: var(--surface); }
.email { font-family: var(--mono); font-weight: 600; font-size: 1.15rem; word-break: break-all; }
.legal h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); margin-top: 1.5em; color: var(--head); }
.legal h2:first-of-type { margin-top: 0; }
.legal ul { max-width: 64ch; }
.byline { font: 600 .8rem/1.5 var(--mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin: 0 0 1.5rem; }
.notfound { text-align: center; padding-block: clamp(3rem, 10vw, 6rem); }
.notfound .corner { margin: 0 auto 1.5rem; width: 6rem; }
.notfound p { margin-inline: auto; }
.mclist { display: grid; gap: 1rem; margin: 1.25rem 0 0; padding: 0; }
@media (min-width: 40rem) { .mclist { grid-template-columns: 1fr 1fr; } }
.mclist li { list-style: none; margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.mclist .icon { width: 2.25rem; height: 2.25rem; }
.mclist b { display: block; font: 400 1.25rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--head); margin-bottom: .2em; }
.mclist p { margin: 0; font-size: .95rem; }

/* ------------------------------ page intro -------------------------- */
.page-intro { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5.5rem); }
.page-intro .page-head { display: flex; gap: 1.5rem; align-items: flex-start; justify-content: space-between; position: relative; z-index: 1; }
.page-head > div { min-width: 0; }
.page-intro__fig { position: absolute; right: 0; bottom: calc(-1 * clamp(3rem, 7vw, 5.5rem)); width: 30%; height: calc(100% + clamp(3rem, 7vw, 5.5rem)); display: none; pointer-events: none; }
.page-intro__figure { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; filter: drop-shadow(10px 10px 0 rgba(22, 23, 27, .3)); }
@media (min-width: 62rem) { .page-intro__fig { display: block; } .page-intro--figure .page-head { padding-right: 34%; } }
@media (prefers-reduced-motion: no-preference) { .page-intro__figure { animation: bob 7s ease-in-out infinite; } }
@keyframes bob { 50% { transform: translateY(-1.2%) rotate(-.6deg); } }

/* ------------------------------ footer ------------------------------ */
.site-foot { position: relative; background: linear-gradient(180deg, rgba(16, 17, 20, .92), #08090C); color: #E4E1D8; border-top: 3px solid var(--ink); padding-block: 3.5rem 2rem; font-size: .95rem; --text: #F3EFE4; --muted: #B7BAC4; --line: #F3EFE4; --shadow: #000; }
.site-foot__grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .site-foot__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-foot h2 { font-size: 1.35rem; margin-bottom: .6em; color: var(--mint-bright); }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: .45em; }
.site-foot a { color: #F3EFE4; }
.site-foot .logo { color: #F3EFE4; }
.site-foot .email { font-size: 1rem; }
.site-foot__credit { font: 400 .85rem/1.7 var(--mono); border-top: 2px dashed #3B3F49; padding-top: 1.25rem; margin: 2rem 0 .5rem; max-width: none; color: #B7BAC4; }
.site-foot__credit a { color: #E4E1D8; }
.site-foot__small { color: #B7BAC4; font-size: .875rem; max-width: none; margin: 0; }
.site-foot__end { border-bottom: 2px dashed #3B3F49; margin-bottom: 2.5rem; }
.site-foot__endrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.site-foot__tbc { margin: 0 0 1.8rem; display: grid; gap: .7rem; justify-items: start; max-width: none; }
.site-foot__tbc .caption { margin: 0; }
.site-foot__big { font: 400 clamp(2.3rem, 1.3rem + 4vw, 5.4rem)/.9 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--mint-bright); -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill; text-shadow: .06em .06em 0 var(--gold), .1em .1em 0 #000; }
.foot__menace { height: clamp(11rem, 19vw, 17rem); width: auto; margin: -7rem 3% 0 0; flex: none; filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, .5)); }
html.js .foot__menace { transform: translateX(45%); opacity: 0; transition: transform 1.4s var(--out), opacity .7s; }
html.js .foot__menace.is-in { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.js .foot__menace { transform: none; opacity: 1; transition: none; } }
@media (max-width: 30rem) { .foot__menace { height: 9rem; margin-top: -4rem; } }

/* ------------------------------ the scanner cursor ------------------ */
/* Four mint brackets follow the pointer and lock on to whatever it points
   at, the way the app's scanner finds a cover's edges. The real pointer is
   never hidden. Fine pointers only; gone under reduced motion. */
.scanner { position: fixed; left: 0; top: 0; z-index: 150; width: 36px; height: 36px; pointer-events: none; opacity: 0; transition: opacity .25s; will-change: transform; }
.scanner.is-on { opacity: 1; }
.scanner i { position: absolute; width: 11px; height: 11px; border: 0 solid var(--mint-bright); filter: drop-shadow(0 0 3px rgba(127, 240, 192, .9)) drop-shadow(1px 1px 0 rgba(22, 23, 27, .9)); transition: width .25s var(--out), height .25s var(--out), border-color .25s; }
.scanner i:nth-child(1) { left: 0; top: 0; border-left-width: 3px; border-top-width: 3px; }
.scanner i:nth-child(2) { right: 0; top: 0; border-right-width: 3px; border-top-width: 3px; }
.scanner i:nth-child(3) { left: 0; bottom: 0; border-left-width: 3px; border-bottom-width: 3px; }
.scanner i:nth-child(4) { right: 0; bottom: 0; border-right-width: 3px; border-bottom-width: 3px; }
.scanner.is-locked i { width: 16px; height: 16px; border-color: var(--gold-bright); }
.scanner__label { position: absolute; left: -3px; bottom: -1.55rem; font: 600 .6rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; background: var(--gold-bright); color: var(--ink); padding: .32em .45em; border: 1.5px solid var(--ink); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s var(--out); }
.scanner.is-locked .scanner__label { opacity: 1; transform: none; }
@media (pointer: coarse), (hover: none), (prefers-reduced-motion: reduce) { .scanner { display: none; } }

/* ------------------------------ motion off -------------------------- */
/* The reader's switch: every animation jumps to its end and stays there. */
html.still *, html.still *::before, html.still *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
html.still { scroll-behavior: auto; }
html.still .scanner { display: none; }

/* ------------------------------ print ------------------------------- */
@media print {
  .sky, .scanner, .site-head, .hero__dots, .tapes, .reader { display: none !important; }
  html.js .reveal, html.js [data-split] .l, html.js .join__menace, html.js .foot__menace { opacity: 1 !important; transform: none !important; }
  html.js .ht { -webkit-mask-image: none !important; mask-image: none !important; }
  body { background: #fff !important; }
}

/* =====================================================================
   Mint Menace: the demonstrations (version 5).
   Joined onto site.css by build.mjs. Every demo reads with no script and
   stands still under reduced motion.
   ===================================================================== */

/* ------------------------------ the hero ---------------------------- */
.hero { min-height: min(100svh, 64rem); padding-block: clamp(7rem, 13vh, 9.5rem) clamp(5rem, 10vh, 7rem); display: grid; align-items: center; isolation: isolate; }
.hero__dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero__rays { position: absolute; inset: -30%; z-index: -1; pointer-events: none; transform-origin: 66% 46%; background: repeating-conic-gradient(from 0deg at 66% 46%, rgba(255, 255, 255, .16) 0deg 4.5deg, transparent 4.5deg 11deg); -webkit-mask-image: radial-gradient(50% 50% at 66% 46%, #000 20%, transparent 72%); mask-image: radial-gradient(50% 50% at 66% 46%, #000 20%, transparent 72%); }
@media (prefers-reduced-motion: no-preference) { .hero__rays { animation: rays 110s linear infinite; } }
@keyframes rays { to { transform: rotate(360deg); } }
.hero__grid { display: grid; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 62rem) { .hero__grid { grid-template-columns: 1.08fr .92fr; } }
.hero__copy { position: relative; z-index: 4; }
.hero__kicker { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.5rem; }
.hero__kicker .corner { width: 3.6rem; filter: drop-shadow(3px 3px 0 var(--ink)); }
.hero__kicker .caption { margin: 0; }
.hero__title { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 1.2rem + 4.5vw, 6.3rem); line-height: .88; letter-spacing: .012em; text-transform: uppercase; margin: 0 0 .5em; text-wrap: initial; }
.hero__sub { max-width: 36rem; }
.hero__note { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.35rem 0 0; }
.hero__note .caption { margin: 0; }
.hero__stage { position: relative; width: 100%; max-width: 41rem; aspect-ratio: 1 / 1; margin-inline: auto; --mx: 0; --my: 0; --sy: 0; z-index: 3; }
.layer { position: absolute; inset: 0; transform: translate3d(calc(var(--mx) * var(--d) * -24px), calc(var(--my) * var(--d) * -18px + var(--sy) * (.6 - var(--d)) * 170px), 0); will-change: transform; }
.layer--float { z-index: 3; } .layer--fx { z-index: 2; pointer-events: none; }
.hero__star { position: absolute; inset: -11%; width: 122%; height: 122%; max-width: none; filter: drop-shadow(10px 10px 0 rgba(22, 23, 27, .28)); }
.hero__menace { position: absolute; left: 50%; bottom: 3%; width: 94%; max-width: none; transform: translateX(-48%); filter: drop-shadow(14px 12px 0 rgba(22, 23, 27, .32)); }
.hero__balloon { position: absolute; left: -3%; top: 7%; max-width: 44%; font-size: clamp(.95rem, .8rem + .7vw, 1.2rem); }
.hero__bang { position: absolute; right: -5%; top: 1%; width: 32%; transform: rotate(9deg); }
@media (prefers-reduced-motion: no-preference) {
  .hero__star { animation: star-in 1s var(--out) .1s both, breathe 7s ease-in-out 1.2s infinite; }
  .hero__menace { animation: land .9s var(--spring) .3s both; }
  .hero__balloon { animation: pop-in .5s var(--spring) 1s both; }
  .hero__bang { animation: pop-in .5s var(--spring) 1.2s both; }
  .floater { animation: pop-in .6s var(--spring) both; animation-delay: var(--fdl, 1.3s); }
}
@keyframes star-in { from { transform: rotate(-35deg) scale(.4); opacity: 0; } }
@keyframes breathe { 50% { transform: scale(1.04) rotate(2.5deg); } }
@keyframes land { from { transform: translate(-48%, 14%) scale(.86); opacity: 0; } }
@keyframes pop-in { from { opacity: 0; scale: .4; } }

/* The comics floating round him. Point at one (or tap it) and it is scanned. */
.floater { position: absolute; display: block; width: var(--fw); padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
.floater--f1 { --fw: 20%; left: -7%; top: 44%; --r: -11deg; --fdl: 1.4s; }
.floater--f2 { --fw: 18%; right: -7%; top: 58%; --r: 9deg; --fdl: 1.55s; }
.floater--f3 { --fw: 17%; left: 15%; bottom: -9%; --r: -5deg; --fdl: 1.7s; }
.floater__bob { position: relative; display: block; transform: rotate(var(--r)); transition: transform .4s var(--spring); }
.floater__bob .comic { filter: drop-shadow(7px 7px 0 rgba(22, 23, 27, .42)); }
@media (prefers-reduced-motion: no-preference) {
  .floater__bob { animation: float 6.5s ease-in-out infinite; }
  .floater--f2 .floater__bob { animation-delay: -2.2s; } .floater--f3 .floater__bob { animation-delay: -4.1s; }
}
@keyframes float { 50% { translate: 0 -7%; rotate: 3deg; } }
.floater__brackets { position: absolute; inset: -9%; opacity: 0; transform: scale(1.2); transition: opacity .2s, transform .4s var(--spring); --b: var(--mint-bright);
  background: linear-gradient(var(--b), var(--b)) 0 0 / 24% 4px no-repeat, linear-gradient(var(--b), var(--b)) 0 0 / 4px 17% no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / 24% 4px no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / 4px 17% no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / 24% 4px no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / 4px 17% no-repeat, linear-gradient(var(--b), var(--b)) 100% 100% / 24% 4px no-repeat, linear-gradient(var(--b), var(--b)) 100% 100% / 4px 17% no-repeat;
  filter: drop-shadow(0 0 6px rgba(127, 240, 192, .95)) drop-shadow(1px 1px 0 rgba(22, 23, 27, .8)); }
.floater__said { position: absolute; left: 50%; bottom: calc(100% + .7rem); display: grid; justify-items: center; gap: .35rem; width: max-content; max-width: 13rem; opacity: 0; transform: translate(-50%, 10px) scale(.8); transition: opacity .2s, transform .35s var(--spring); pointer-events: none; z-index: 6; }
.floater__said em { font: 700 .82rem/1.3 var(--sans); font-style: normal; background: #FFFDF7; color: var(--ink); border: 2px solid var(--ink); padding: .35em .6em; box-shadow: 3px 3px 0 var(--ink); text-align: center; }
.floater:hover, .floater:focus-visible, .floater.is-scanned { z-index: 8; }
.floater:hover .floater__bob, .floater:focus-visible .floater__bob, .floater.is-scanned .floater__bob { transform: rotate(0deg) scale(1.1); animation-play-state: paused; }
.floater:hover .floater__brackets, .floater:focus-visible .floater__brackets, .floater.is-scanned .floater__brackets { opacity: 1; transform: none; }
.floater:hover .floater__said, .floater:focus-visible .floater__said, .floater.is-scanned .floater__said { opacity: 1; transform: translate(-50%, 0) scale(1); }
.floater:focus-visible { outline: none; }
.floater:focus-visible .floater__brackets { --b: var(--gold-bright); }
.hero__try { position: absolute; right: 0; bottom: -1.2rem; transform: rotate(-2deg); margin: 0; font: 600 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: #FFFDF7; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: .45em .7em; white-space: nowrap; z-index: 5; }
html:not(.js) .hero__try { display: none; }
.hero__cue { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: grid; justify-items: center; gap: .35rem; color: var(--ink); text-decoration: none; font: 600 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; z-index: 5; }
.hero__cue svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) { .hero__cue svg { animation: cue 1.7s ease-in-out infinite; } }
@keyframes cue { 50% { transform: translateY(6px); } }
@media (max-width: 61.99rem) {
  .hero { min-height: 0; padding-top: 7.6rem; }
  /* Words first on a phone: with the art first, the headline and Join the
     beta sat below the first screen (review, 4 Oct 2026). */
  .hero__grid { grid-template-areas: "copy" "stage"; }
  .hero__stage { grid-area: stage; max-width: 21rem; margin-top: 1.5rem; margin-bottom: 3.4rem; }
  .hero__try { bottom: -2.2rem; right: 50%; transform: translateX(50%) rotate(-2deg); }
  .hero__copy { grid-area: copy; }
  .floater--f1 { --fw: 24%; left: -4%; } .floater--f2 { --fw: 22%; right: -4%; } .floater--f3 { --fw: 21%; }
  .hero__cue { display: none; }
}

/* ------------------------------ the tapes ---------------------------- */
.tapes { position: relative; height: clamp(8rem, 13vw, 11rem); margin-block: calc(-1 * clamp(4rem, 6.5vw, 5.5rem)); z-index: 6; pointer-events: none; overflow: hidden; }
.tape { position: absolute; left: -8%; right: -8%; top: 50%; border-block: 3px solid var(--ink); box-shadow: 0 7px 0 rgba(22, 23, 27, .3); overflow: hidden; }
.tape--a { background: var(--gold-bright); color: var(--ink); transform: translateY(-50%) rotate(-3.2deg); }
.tape--b { background: var(--ink); color: var(--mint-bright); transform: translateY(-50%) rotate(2.4deg); }
.tape__run { display: flex; align-items: center; gap: 1.5rem; width: max-content; padding: .6rem 0 .45rem; font: 400 clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem)/1 var(--display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.tape__run svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; margin-top: -.1em; }
@media (prefers-reduced-motion: no-preference) { .tape__run { animation: tape 48s linear infinite; } .tape--b .tape__run { animation-direction: reverse; animation-duration: 56s; } }
@keyframes tape { to { transform: translateX(-50%); } }

/* ------------------------------ the strip ---------------------------- */
.strip__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.strip__head .title { margin-bottom: 0; }
.strip__head .lede { margin: 0; max-width: 34ch; }
.strip__new { display: inline-block; width: clamp(4.5rem, 8vw, 6.5rem); vertical-align: middle; margin: -.6rem 0 0 .4rem; transform: rotate(8deg); }
.strip__new .burst { width: 100%; }
.comicpage { background: #FFFDF7; border: 4px solid var(--ink); box-shadow: 16px 16px 0 var(--ink); padding: clamp(.7rem, 1.5vw, 1.4rem); color: var(--ink); }
.comicpage__mast { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; padding: .2rem .3rem clamp(.6rem, 1.4vw, 1rem); }
.comicpage__wm { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.8rem); }
.comicpage__issue { font: 400 clamp(1.4rem, 1rem + 1.6vw, 2.7rem)/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.comicpage__issue b { font-weight: 400; background: #FEE46A; border: 3px solid var(--ink); padding: .05em .35em 0; margin-right: .3em; }
.comicpage__grid { display: grid; gap: clamp(.55rem, 1.1vw, 1rem); }
@media (min-width: 46rem) { .comicpage__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .comicpage__grid { grid-template-columns: repeat(3, 1fr); } }
.cpanel { position: relative; display: block; line-height: 0; --rx: 0deg; --ry: 0deg; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .35s var(--out), box-shadow .35s var(--out); outline-offset: 4px; }
.cpanel img { width: 100%; height: auto; }
.cpanel:hover { transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.03); box-shadow: 12px 12px 0 rgba(22, 23, 27, .45); z-index: 2; }
.cpanel__no { position: absolute; right: .6rem; bottom: .6rem; font: 400 1rem/1 var(--display); background: var(--gold); color: var(--ink); border: 2px solid var(--ink); padding: .25em .5em .1em; opacity: 0; transition: opacity .2s; }
.cpanel:hover .cpanel__no, .cpanel:focus-visible .cpanel__no { opacity: 1; }
.strip__foot { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: flex-start; justify-content: space-between; margin-top: clamp(2rem, 4vw, 3rem); }
.strip__foot .narration { margin: 0; }
.strip__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.strip__actions .caption { margin: 0; }
.strip__text summary { cursor: pointer; }
.strip__text summary::-webkit-details-marker { display: none; }
.strip__text ol { padding-left: 1.4em; max-width: 64ch; margin-top: 1rem; }
.strip__text li { margin-bottom: .6em; }

/* The reader: one panel at a time, full size. */
.reader { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; color: var(--cream); overflow: hidden; }
.reader::backdrop { background: rgba(8, 9, 12, .95); }
.reader[open] { display: grid; grid-template-rows: auto 1fr; }
.reader__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem clamp(1rem, 3vw, 2rem); }
.reader__count { font: 600 .78rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.reader__count b { font: 400 1.7rem/1 var(--display); color: var(--gold-bright); margin: 0 .2em; }
.reader__fig { margin: 0; display: grid; justify-items: center; align-content: center; gap: 1.1rem; padding: 0 clamp(4rem, 8vw, 7rem) 1.5rem; min-height: 0; }
.reader__img { width: auto; max-width: 100%; max-height: calc(100dvh - 12rem); height: auto; box-shadow: 14px 14px 0 #000; background: #fff; }
.reader__words { max-width: 62ch; text-align: center; font-size: 1rem; line-height: 1.5; color: #E4E1D8; }
.reader__nav { position: absolute; top: 50%; translate: 0 -50%; width: 3.3rem; height: 3.3rem; display: grid; place-items: center; background: var(--gold); border: 3px solid var(--ink); box-shadow: 4px 4px 0 #000; cursor: pointer; padding: 0; }
.reader__nav svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.reader__nav:hover { background: var(--gold-bright); }
.reader__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.reader__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }
.reader__nav[disabled] { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .reader__img.go-next { animation: slide-next .38s var(--out); }
  .reader__img.go-prev { animation: slide-prev .38s var(--out); }
}
@keyframes slide-next { from { transform: translateX(8%) rotate(1deg); opacity: 0; } }
@keyframes slide-prev { from { transform: translateX(-8%) rotate(-1deg); opacity: 0; } }
@media (max-width: 40rem) {
  .reader__fig { padding-inline: .5rem; align-content: start; padding-top: 1rem; }
  .reader__img { max-height: none; width: 100%; }
  .reader__nav { top: auto; bottom: 1.2rem; translate: none; }
}

/* ------------------------------ hunt mode ---------------------------- */
.hunt { padding-bottom: clamp(3rem, 6vw, 5rem); }
.hunt__head { margin-bottom: clamp(1rem, 3vw, 2rem); }
.hunt__track { position: relative; }
.hunt__stage { display: grid; gap: 2rem; align-items: center; width: min(100% - 2 * var(--gutter), 84rem); margin-inline: auto; padding-block: 2.5rem; }
@media (min-width: 62rem) { .hunt__stage { grid-template-columns: minmax(14rem, .9fr) minmax(0, 1.4fr) minmax(12rem, 17rem); } }
html.js .hunt.is-story .hunt__track { height: 480vh; }
html.js .hunt.is-story .hunt__stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: 6rem 2rem; }
.hunt__side { display: grid; gap: .9rem; align-content: center; }
.hunt__label { font: 600 .75rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mint-bright); margin: 0; }
.hunt__log { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.hunt__logitem { margin: 0; display: grid; gap: .15rem; padding: .7rem .95rem; border: 2px solid var(--cream); background: rgba(22, 27, 34, .88); box-shadow: 5px 5px 0 #000; }
.hunt__logitem b { font: 400 1.3rem/1 var(--display); letter-spacing: .04em; }
.hunt__logitem span { font-weight: 700; font-size: .95rem; color: var(--cream); }
.hunt__logitem i { font-style: normal; font-size: .85rem; color: #B7BAC4; }
.hunt__logitem--key b { color: var(--gold-bright); }
.hunt__logitem--screen b { color: #FFD56A; }
.hunt__logitem--wanted b { color: var(--mint-bright); }
.hunt__logitem--owned b { color: var(--cream); }
html.js .hunt.is-story .hunt__logitem { opacity: .2; transform: translateX(-12px); transition: opacity .3s, transform .45s var(--spring); }
html.js .hunt.is-story .hunt__logitem.is-on { opacity: 1; transform: none; }
.hunt__tally { font: 600 .72rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #B7BAC4; margin: .3rem 0 0; max-width: none; }
.hunt__scene { position: relative; display: grid; place-items: center; min-height: 24rem; padding-bottom: 3rem; }
.hunt__scene > .hunt__box3d, .hunt__scene > .hunt__brackets { grid-area: 1 / 1; }
.hunt__box3d { position: relative; z-index: 1; width: min(17rem, 56vw); aspect-ratio: 320 / 470; perspective: 1200px; perspective-origin: 50% -30%; transform-style: preserve-3d; }
.hcard { position: absolute; inset: 0; transform-origin: 50% 100%; backface-visibility: hidden; will-change: transform, opacity; transform: translate3d(0, calc(var(--i) * -15px), calc(var(--i) * -44px)) rotateZ(calc((var(--i) - 3.5) * .9deg)); }
.hcard .comic { filter: drop-shadow(0 -3px 0 rgba(0, 0, 0, .35)); }
.hunt__back { position: absolute; left: -44%; right: -44%; top: -6%; height: 78%; background: linear-gradient(180deg, #5C3F22, #3B2814); border: 4px solid var(--ink); transform: translate3d(0, -24%, -440px); }
.hunt__front { position: absolute; left: -16%; right: -16%; bottom: -12%; height: 47%; transform: translateZ(70px); background: linear-gradient(180deg, #C9A06A, #A97F4C); border: 4px solid var(--ink); box-shadow: 10px 10px 0 rgba(0, 0, 0, .45), inset 0 8px 0 rgba(255, 255, 255, .18); display: grid; place-items: center; }
.hunt__front::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(22, 23, 27, .16) 1.2px, transparent 1.6px) 0 0 / 8px 8px; }
.hunt__front span { position: relative; font: 400 clamp(1.4rem, 1rem + 1.6vw, 2.3rem)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: #FFFDF7; border: 3px solid var(--ink); padding: .25em .6em .1em; transform: rotate(-3deg); box-shadow: 4px 4px 0 rgba(22, 23, 27, .4); }
.hunt__brackets { position: relative; width: min(19rem, 62vw); aspect-ratio: 320 / 470; pointer-events: none; z-index: 4; --b: var(--mint-bright); transition: scale .35s var(--spring);
  background: linear-gradient(var(--b), var(--b)) 0 0 / 22% 5px no-repeat, linear-gradient(var(--b), var(--b)) 0 0 / 5px 15% no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / 22% 5px no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / 5px 15% no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / 22% 5px no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / 5px 15% no-repeat, linear-gradient(var(--b), var(--b)) 100% 100% / 22% 5px no-repeat, linear-gradient(var(--b), var(--b)) 100% 100% / 5px 15% no-repeat;
  filter: drop-shadow(0 0 8px rgba(127, 240, 192, .9)); }
.hunt.is-flag .hunt__brackets { --b: var(--gold-bright); filter: drop-shadow(0 0 10px rgba(241, 194, 78, .95)); scale: .97; }
.hunt__bzzt { position: absolute; right: -2%; top: -2%; width: clamp(7rem, 13vw, 10.5rem); opacity: 0; z-index: 6; pointer-events: none; }
.hunt__hint { position: absolute; bottom: -.4rem; z-index: 5; margin: 0; font: 600 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #B7BAC4; }
html:not(.js) .hunt__hint, .hunt.is-static .hunt__hint { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hunt.is-buzz .hunt__bzzt { animation: bzzt 1s var(--spring) both; }
  .hunt.is-buzz .hunt__phone { animation: buzz .5s linear; }
}
@keyframes bzzt { 0% { opacity: 0; transform: scale(.3) rotate(-14deg); } 18% { opacity: 1; transform: scale(1.12) rotate(6deg); } 32% { transform: scale(1) rotate(3deg); } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(.92) rotate(3deg); } }
.hunt__peek { position: absolute; left: calc(50% + min(17rem, 56vw) * .5 + .4rem); bottom: 2.4rem; width: clamp(5.5rem, 9vw, 8rem); height: auto; z-index: 0; transform: rotate(7deg); transform-origin: bottom center; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .45)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .hunt.is-buzz .hunt__peek { animation: peek .6s var(--spring); } }
@keyframes peek { 35% { transform: rotate(-4deg) translateY(-18%) scale(1.08); } }
@media (max-width: 61.99rem) { .hunt__peek { display: none; } }
.hunt__more { margin: 1.25rem 0 0; }
@keyframes buzz { 10%, 50%, 90% { transform: translateX(-4px) rotate(-1.6deg); } 30%, 70% { transform: translateX(4px) rotate(1.6deg); } }
.hunt__phone { width: min(15rem, 70vw); justify-self: center; }
.hunt__banner { margin: 2% 6% 0; padding: 3.5% 4%; border: 2px solid #16171B; display: grid; gap: .2em; color: #16171B; background: var(--gold); transition: background .2s; flex: none; }
.hunt__banner b { font: 400 5.4cqw/1 var(--display); letter-spacing: .04em; }
.hunt__banner span { font: 700 3.4cqw/1.25 var(--sans); }
.hunt__banner i { font: 400 3.1cqw/1.3 var(--sans); font-style: normal; color: #2B2A24; }
.hunt__banner--screen { background: var(--gold-bright); }
.hunt__banner--wanted { background: var(--mint-bright); }
.hunt__banner--owned { background: #FFFDF7; }
.hunt__banner--quiet { background: #B7BAC4; }
.hunt__view { display: grid; place-items: center; }
.hunt__live { position: relative; width: 58%; aspect-ratio: 320 / 470; }
.hunt__lc { position: absolute; inset: 0; opacity: 0; transform: scale(.9) rotate(-2deg); transition: opacity .25s, transform .3s var(--out); }
.hunt__lc.is-on { opacity: 1; transform: none; }
.hunt__lock { position: absolute; inset: 12% 15%; --b: var(--mint-bright); pointer-events: none;
  background: linear-gradient(var(--b), var(--b)) 0 0 / 20% 3px no-repeat, linear-gradient(var(--b), var(--b)) 0 0 / 3px 14% no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / 20% 3px no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / 3px 14% no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / 20% 3px no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / 3px 14% no-repeat, linear-gradient(var(--b), var(--b)) 100% 100% / 20% 3px no-repeat, linear-gradient(var(--b), var(--b)) 100% 100% / 3px 14% no-repeat; }
.hunt__phonetally { font-size: 2.8cqw; }
@media (max-width: 61.99rem) {
  html.js .hunt.is-story .hunt__stage { grid-template-rows: auto 1fr; gap: .5rem; padding-top: 5rem; padding-bottom: 1rem; }
  html.js .hunt.is-story .hunt__side { order: -1; }
  html.js .hunt.is-story .hunt__log, html.js .hunt.is-story .hunt__label { display: none; }
  html.js .hunt.is-story .hunt__phone { position: absolute; right: var(--gutter); bottom: 1.2rem; width: min(9.5rem, 34vw); z-index: 7; }
  html.js .hunt.is-story .hunt__scene { min-height: 0; padding-bottom: 2rem; }
}
.hunt__foot { margin-top: clamp(1.5rem, 4vw, 3rem); }
.buzzes { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .9rem; }
@media (min-width: 40rem) { .buzzes { grid-template-columns: 1fr 1fr; } }
.buzzes li { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; background: var(--surface); border: 2px solid var(--line); box-shadow: 5px 5px 0 var(--shadow); padding: .9rem 1.05rem; }
.buzzes p { margin: 0; font-size: .95rem; }
.hchip { display: inline-block; font: 400 1.1rem/1 var(--display); letter-spacing: .05em; padding: .38em .62em .26em; border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); transform: rotate(-2deg); white-space: nowrap; }
.hchip--key { background: var(--gold); } .hchip--wanted { background: var(--mint-bright); } .hchip--screen { background: var(--gold-bright); } .hchip--owned { background: #FFFDF7; }

/* ------------------------------ it never bluffs --------------------- */
.bluff__head { max-width: 54rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.bluff__lab { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 58rem) { .bluff__lab { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.bluff__cover { position: relative; margin: 0 auto; width: min(100%, 25rem); }
.bluff__frame { position: relative; transform: rotate(-2.5deg); }
.bluff__svg { width: 100%; height: auto; display: block; box-shadow: 14px 14px 0 rgba(0, 0, 0, .55); }
.bluff__brackets { position: absolute; inset: -6%; pointer-events: none; --b: var(--mint-bright); transition: filter .3s;
  background: linear-gradient(var(--b), var(--b)) 0 0 / 22% 5px no-repeat, linear-gradient(var(--b), var(--b)) 0 0 / 5px 15% no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / 22% 5px no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / 5px 15% no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / 22% 5px no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / 5px 15% no-repeat, linear-gradient(var(--b), var(--b)) 100% 100% / 22% 5px no-repeat, linear-gradient(var(--b), var(--b)) 100% 100% / 5px 15% no-repeat;
  filter: drop-shadow(0 0 8px rgba(127, 240, 192, .9)); }
.bluff__lab.is-ask .bluff__brackets { --b: var(--gold-bright); filter: drop-shadow(0 0 8px rgba(241, 194, 78, .9)); }
.bluff__scan { position: absolute; left: 0; right: 0; top: 8%; height: 3px; background: var(--mint-bright); box-shadow: 0 0 14px 2px var(--mint-bright); opacity: .85; }
@media (prefers-reduced-motion: no-preference) { .bluff__scan { animation: bluffscan 3s ease-in-out infinite alternate; } }
@keyframes bluffscan { to { top: 92%; } }
.bluff__lab.is-ask .bluff__scan { background: var(--gold-bright); box-shadow: 0 0 14px 2px var(--gold-bright); }
.bluff__stamp { position: absolute; right: -9%; top: 36%; font: 400 clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem)/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--mint-bright); border: 5px solid currentColor; padding: .12em .38em .02em; transform: rotate(12deg); background: rgba(16, 17, 20, .82); box-shadow: 6px 6px 0 #000; z-index: 3; }
.bluff__lab.is-ask .bluff__stamp { color: var(--gold-bright); }
@media (prefers-reduced-motion: no-preference) { .bluff__stamp.is-stamp { animation: stamp .5s var(--spring); } }
@keyframes stamp { from { transform: rotate(12deg) scale(1.9); opacity: 0; } }
.bluff__control { background: var(--surface); border: 3px solid var(--line); box-shadow: 7px 7px 0 var(--shadow); padding: 1.1rem 1.25rem 1.15rem; margin-bottom: 1.25rem; }
.bluff__control label { display: block; font: 400 clamp(1.4rem, 1.2rem + .8vw, 1.9rem)/1 var(--display); letter-spacing: .03em; text-transform: uppercase; margin-bottom: .7rem; color: var(--head); }
.bluff__control input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2.4rem; background: transparent; cursor: pointer; margin: 0; }
.bluff__control input[type="range"]::-webkit-slider-runnable-track { height: 14px; background: linear-gradient(90deg, var(--mint-bright), var(--gold-bright) 55%, var(--gold-deep)); border: 2.5px solid var(--ink); }
.bluff__control input[type="range"]::-moz-range-track { height: 14px; background: linear-gradient(90deg, var(--mint-bright), var(--gold-bright) 55%, var(--gold-deep)); border: 2.5px solid var(--ink); }
.bluff__control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -11px; background: #FFFDF7; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); border-radius: 50%; }
.bluff__control input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; background: #FFFDF7; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); border-radius: 50%; }
.bluff__control input[type="range"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.bluff__scale { display: flex; justify-content: space-between; font: 600 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .35rem; }
.evidence { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .5rem; }
@media (min-width: 30rem) { .evidence { grid-template-columns: 1fr 1fr; } }
.ev { margin: 0; display: grid; grid-template-columns: 1.5rem auto 1fr; gap: .6rem; align-items: center; background: var(--surface); border: 2px solid var(--line); padding: .55rem .75rem; font-size: .95rem; transition: opacity .25s, background .25s; }
.ev svg { width: 1.35rem; height: 1.35rem; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; grid-column: 1; grid-row: 1; }
.ev b { grid-column: 2; }
.ev__ok { stroke: var(--mint-bright); }
.ev__no { stroke: var(--gold-bright); display: none; }
.ev.is-no .ev__ok { display: none; }
.ev.is-no .ev__no { display: block; }
.ev.is-no { opacity: .72; }
.ev.is-no b { text-decoration: line-through; text-decoration-thickness: 2px; }
.ev__note { grid-column: 3; font: 600 .7rem/1.25 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); justify-self: end; text-align: right; }
[data-tone="paper"]:not(.on-dark) .ev__ok { stroke: var(--mint-deep); }
.bluff__result, .bluff__ask { max-width: none; }
.bluff__ask { display: none; }
html:not(.js) .bluff__ask { display: block; margin-top: 1.5rem; }
html:not(.js) .bluff__control, html:not(.js) .bluff__stamp, html:not(.js) .bluff__who { display: none; }
.bluff__who { display: flex; align-items: flex-end; gap: .4rem; margin: 2.6rem 0 0 -.5rem; }
.bluff__who img { width: clamp(5.5rem, 9vw, 7rem); height: auto; flex: none; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .5)); }
.bluff__says { margin: 0 0 4.2rem; font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); letter-spacing: .03em; text-transform: uppercase; line-height: 1; padding: .8rem 1.1rem .65rem; }

/* ------------------------------ keys with receipts ------------------ */
.till { position: relative; width: min(100%, 23rem); margin-inline: auto; padding-top: .4rem; }
.till__printer { position: relative; height: 2.8rem; margin-inline: -7%; background: linear-gradient(180deg, #343946, #16171B); border: 3px solid var(--ink); border-radius: .7rem .7rem .25rem .25rem; box-shadow: 7px 7px 0 rgba(0, 0, 0, .4); z-index: 2; }
.till__slot { position: absolute; left: 8%; right: 8%; bottom: .5rem; height: .38rem; background: #050506; border-radius: 1rem; }
.till__led { position: absolute; right: 1rem; top: .65rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--mint-bright); box-shadow: 0 0 8px var(--mint-bright); }
.till__clip { position: relative; overflow: hidden; margin-top: -.55rem; padding: 0 1rem 2rem; margin-inline: -1rem; }
.receipt { position: relative; background: #FFFEFA; color: var(--ink); font: 400 .8rem/1.55 var(--mono); padding: 1.5rem 1.3rem 2rem; filter: drop-shadow(8px 10px 0 rgba(0, 0, 0, .25));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; }
html.js .till .receipt { transform: translateY(-102%); }
html.js .till.is-in .receipt { animation: print 2.8s steps(16, end) .25s forwards; }
@keyframes print { to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { html.js .till .receipt { transform: none; animation: none; } }
.receipt p { max-width: none; }
.receipt__brand { font: 400 1.75rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-align: center; margin: 0 0 .15rem; }
.receipt__sub { text-align: center; text-transform: uppercase; letter-spacing: .22em; font-size: .68rem; margin: 0; }
.receipt__rule { border-top: 2px dashed var(--ink); margin: .85rem 0; height: 0; }
.receipt__item { text-transform: uppercase; margin: 0; }
.receipt__lines { margin: 0; display: grid; gap: .3rem; }
.receipt__lines div { display: flex; gap: .4rem; align-items: baseline; text-transform: uppercase; }
.receipt__lines div::before { content: ""; order: 1; flex: 1; border-bottom: 2px dotted rgba(22, 23, 27, .55); min-width: .8rem; transform: translateY(-.25em); }
.receipt__lines dt { order: 0; flex: none; }
.receipt__lines dd { order: 2; margin: 0; text-align: right; font-weight: 600; max-width: 60%; }
.receipt__lines--total div:first-child dd { background: var(--gold-pale); padding: 0 .3em; }
.receipt__thanks { text-align: center; text-transform: uppercase; font-weight: 600; letter-spacing: .1em; margin: 0 0 1rem; }
.receipt .barcode { display: grid; width: max-content; margin: 0 auto; border: 0; padding: 0; background: transparent; }

/* ------------------------------ the price-box lens ------------------ */
.lens__row { display: grid; gap: clamp(1rem, 3vw, 2.4rem); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; max-width: 62rem; margin-inline: auto; padding-top: 1.5rem; }
.lens__item { position: relative; display: grid; gap: 1rem; justify-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; text-align: center; }
.lens__cover { position: relative; display: block; width: 100%; transform: rotate(var(--r, -2deg)); transition: transform .4s var(--spring); filter: drop-shadow(7px 7px 0 rgba(22, 23, 27, .35)); }
.lens__item:nth-child(2) .lens__cover { --r: 2.5deg; }
.lens__item:nth-child(3) .lens__cover { --r: -1deg; }
.lens__glass { position: absolute; left: -12%; top: -8%; width: 54%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF, #FBF0CF); border: 5px solid var(--ink); box-shadow: 0 0 0 4px var(--gold), 0 0 0 7px var(--ink), 8px 8px 0 4px rgba(22, 23, 27, .4); display: grid; place-items: center; opacity: 0; transform: scale(.4) rotate(-25deg); transition: opacity .25s, transform .5s var(--spring); }
.lens__glass::after { content: ""; position: absolute; right: -36%; bottom: -10%; width: 44%; height: 16%; background: var(--ink); border-radius: 8px; transform: rotate(45deg); transform-origin: left center; box-shadow: 0 0 0 3px var(--gold); }
.lens__glass .corner { width: 58%; filter: none; }
.lens__item.is-on .lens__glass { opacity: 1; transform: none; }
.lens__item.is-on .lens__cover { transform: rotate(0deg) translateY(-3%); }
.lens__said { display: grid; gap: .55rem; justify-items: center; }
.lens__said em { font-style: normal; font-size: .92rem; line-height: 1.45; max-width: 17rem; }
@media (max-width: 44rem) { .lens__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2rem 1rem 1.5rem; margin-inline: -1rem; } .lens__item { scroll-snap-align: center; } }

/* ------------------------------ screen alert: the cinema ----------- */
.cinema__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .cinema__grid { grid-template-columns: .85fr 1.15fr; } }
.cinema__scene { position: relative; width: 100%; max-width: 46rem; aspect-ratio: 5 / 4; margin-inline: auto; }
.cinema__screen { position: absolute; left: 2%; top: 4%; width: 80%; aspect-ratio: 16 / 9; display: grid; place-content: center; text-align: center; overflow: hidden; background: radial-gradient(120% 120% at 30% 20%, #FFFDF7 0%, #F8E7B8 45%, #E3A52A 100%); border: 4px solid var(--ink); box-shadow: 0 0 0 10px #0B1534, 0 0 80px 18px rgba(241, 194, 78, .32), 14px 14px 0 10px #050B22; transform: perspective(900px) rotateY(9deg); }
.cinema__screen::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(22, 23, 27, .12) 1.2px, transparent 1.6px) 0 0 / 7px 7px; }
.cinema__kicker { font: 600 clamp(.6rem, .5rem + .4vw, .85rem)/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--ink); margin: 0 0 .5em; max-width: none; }
.cinema__title { font: 400 clamp(2.4rem, 1.2rem + 4.4vw, 5.4rem)/.85 var(--display); letter-spacing: .04em; text-transform: uppercase; margin: 0; max-width: none; color: #FFFDF7; -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: .06em .06em 0 var(--blue), .1em .1em 0 var(--ink); }
.cinema__sub { font: 400 clamp(1rem, .7rem + 1vw, 1.7rem)/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: .45em 0 0; max-width: none; }
.cinema__beam { position: absolute; right: -6%; top: -16%; width: 92%; height: 92%; pointer-events: none; background: linear-gradient(222deg, rgba(255, 246, 216, .55), rgba(255, 246, 216, 0) 72%); clip-path: polygon(100% 0, 93% 0, 2% 58%, 8% 100%); mix-blend-mode: screen; opacity: .75; }
.cinema__beam i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #FFF6D8; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cinema__beam { animation: flicker 3.4s steps(2, end) infinite; }
  .cinema__beam i { animation: dust var(--t) linear infinite; animation-delay: var(--dl); }
}
@keyframes flicker { 0%, 100% { opacity: .75; } 40% { opacity: .64; } 42% { opacity: .8; } 70% { opacity: .68; } }
@keyframes dust { 0% { transform: translate(0, 0); opacity: 0; } 25% { opacity: .85; } 100% { transform: translate(-70px, 50px); opacity: 0; } }
.cinema__seats { position: absolute; left: -2%; right: 18%; bottom: 0; height: 20%; pointer-events: none; background: radial-gradient(ellipse 26px 30px at 50% 100%, #050B22 98%, transparent 100%) 0 100% / 58px 34px repeat-x, radial-gradient(ellipse 26px 30px at 50% 100%, #0B1534 98%, transparent 100%) 29px 70% / 58px 34px repeat-x; }
.cinema__menace { position: absolute; left: -3%; bottom: 4%; width: 27%; z-index: 2; filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, .45)); }
.cinema__burst { position: absolute; left: 13%; bottom: 30%; width: 30%; z-index: 3; transform: rotate(-9deg); }
.cinema__phone { position: absolute; right: 0; bottom: 0; width: 34%; transform: rotate(4deg); z-index: 4; }
.lock { background: linear-gradient(170deg, #2A55B0, #0B1638); padding: 16% 5% 5%; }
.lock__time { font: 700 17cqw/1 var(--sans); text-align: center; margin: 0; max-width: none; color: #FFFDF7; letter-spacing: -.02em; }
.lock__date { font: 600 4.2cqw/1 var(--sans); text-align: center; margin: 3% 0 12%; max-width: none; color: #DCE6FA; }
html.js .cinema__scene .lock__alert { opacity: 0; transform: translateY(-40%) scale(.9); transition: opacity .4s 1s, transform .7s var(--spring) 1s; }
html.js .cinema__scene.is-in .lock__alert { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .cinema__scene .lock__alert { opacity: 1; transform: none; transition: none; } }
.salert { background: rgba(255, 253, 247, .97); color: var(--ink); border: 3px solid var(--ink); border-radius: 1.25rem; box-shadow: 8px 8px 0 #050B22; padding: 1rem 1.15rem 1.1rem; max-width: 26rem; }
.salert__top { display: flex; justify-content: space-between; align-items: center; font: 600 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #4A4D57; margin-bottom: .6rem; }
.salert__app { display: inline-flex; align-items: center; gap: .4rem; }
.salert__icon { width: 1.5rem; height: 1.5rem; filter: none; }
.salert__head { font: 700 1.15rem/1.25 var(--sans); margin: 0 0 .3rem; }
.salert__body { font-size: .95rem; line-height: 1.45; margin: 0 0 .5rem; }
.salert__src { font: 600 .7rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin: 0; }
.salert--lg { max-width: 30rem; transform: rotate(1deg); }
.lock .salert { border-width: 2px; border-radius: 5cqw; padding: 5cqw 5.5cqw; box-shadow: 0 2.5cqw 0 rgba(0, 0, 0, .35); max-width: none; }
.lock .salert__top { font-size: 2.9cqw; margin-bottom: 2.5cqw; }
.lock .salert__icon { width: 6cqw; height: 6cqw; }
.lock .salert__head { font-size: 4.8cqw; }
.lock .salert__body { font-size: 3.9cqw; }
.lock .salert__src { font-size: 2.9cqw; }
@media (max-width: 40rem) { .cinema__scene { aspect-ratio: 4 / 5; } .cinema__screen { width: 96%; } .cinema__phone { width: 50%; } .cinema__menace { width: 38%; } .cinema__burst { left: 22%; bottom: 34%; width: 40%; } }

/* ------------------------------ signing lists: lanyards ------------- */
.lanyards { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.6rem); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 6.5rem; }
/* Columns follow the number of conventions (--n, set by the markup), so a
   short list never leaves one badge alone on a row. */
@media (min-width: 52rem) { .lanyards { grid-template-columns: repeat(min(var(--n, 3), 4), minmax(0, 1fr)); row-gap: 7.5rem; } }
@media (min-width: 90rem) { .lanyards { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); } }
.badge-wrap { display: grid; }
.badge-wrap { position: relative; transform-origin: 50% -6.5rem; perspective: 1400px; }
@media (prefers-reduced-motion: no-preference) { .badge-wrap { animation: swing calc(3.6s + var(--i) * .45s) ease-in-out infinite alternate; } }
@keyframes swing { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
.badge-wrap:hover, .badge-wrap:focus-within { animation-play-state: paused; }
.lanyard { position: absolute; left: 50%; top: -6.6rem; width: 2.2rem; height: 7.2rem; transform: translateX(-50%); border: 2.5px solid var(--ink); border-bottom: 0; --s: var(--mint-mid); background: repeating-linear-gradient(180deg, var(--s) 0 16px, color-mix(in srgb, var(--s) 78%, #000) 16px 18px); }
.lanyard::after { content: ""; position: absolute; left: 50%; bottom: -.9rem; width: .95rem; height: 1.6rem; transform: translateX(-50%); background: linear-gradient(90deg, #8B8F99, #DDE0E6 50%, #8B8F99); border: 2px solid var(--ink); border-radius: .3rem; }
.lanyard--gold { --s: var(--gold-bright); } .lanyard--blue { --s: var(--blue); } .lanyard--ink { --s: #2A2E38; }
.badge { position: relative; display: grid; transform-style: preserve-3d; transition: transform .75s var(--spring); height: 100%; }
.badge.is-flipped { transform: rotateY(180deg); }
.badge__face { position: relative; grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #FFFDF7; color: var(--ink); border: 3px solid var(--ink); border-radius: .7rem; box-shadow: 8px 8px 0 var(--ink); padding: 2.4rem 1.2rem 1.3rem; min-height: 19.5rem; display: grid; align-content: start; gap: .45rem; text-align: center; overflow: hidden; }
.badge__front::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .7rem; background: var(--gold); border-bottom: 2.5px solid var(--ink); }
.badge-wrap:nth-child(3n+2) .badge__front::before { background: var(--mint-mid); }
.badge-wrap:nth-child(3n) .badge__front::before { background: var(--blue); }
.badge__back { transform: rotateY(180deg); background: var(--gold-pale); text-align: left; }
.badge__hole { position: absolute; left: 50%; top: 1.15rem; width: 2.6rem; height: .7rem; transform: translateX(-50%); background: var(--ink); border-radius: 1rem; }
.badge__kicker { font: 600 .68rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #4A4D57; margin: .5rem 0 0; max-width: none; }
.badge__name { font-size: clamp(1.6rem, 1.3rem + .9vw, 2.15rem); color: var(--ink); margin: .2rem 0 0; }
.badge__city { font-weight: 700; margin: 0; }
.badge__count { font-size: .95rem; margin: .5rem auto .7rem; }
.badge__count b { font: 400 2.6rem/1 var(--display); color: var(--mint-deep); display: block; }
.badge__flip { justify-self: center; margin-top: auto; }
.badge__flip--back { justify-self: start; }
.badge__bring { margin: .3rem 0 .4rem; padding-left: 1.3em; font-size: .92rem; }
.badge__bring li { margin-bottom: .25em; }
.badge__who { font-size: .82rem; color: #4A3A14; margin: 0 0 .7rem; }
html:not(.js) .badge { transform: none; gap: 1rem; }
html:not(.js) .badge__face { grid-area: auto; backface-visibility: visible; -webkit-backface-visibility: visible; min-height: 0; }
html:not(.js) .badge__back { transform: none; }
html:not(.js) .badge__flip { display: none; }
@media (max-width: 40rem) { .lanyards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6.5rem 1rem 1.5rem; margin-inline: -1rem; } .badge-wrap { scroll-snap-align: center; } }

/* ------------------------------ my comics: the bookcase ------------- */
.mc { display: grid; gap: 1.6rem; }
.mc__search { background: var(--surface); border: 3px solid var(--line); box-shadow: 8px 8px 0 var(--shadow); padding: 1.15rem 1.25rem; }
.mc__label { display: block; font: 400 clamp(1.4rem, 1.2rem + .8vw, 1.9rem)/1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--head); margin-bottom: .75rem; }
.mc__field { display: flex; align-items: center; gap: .6rem; border: 3px solid var(--line); background: var(--field); padding: .15rem .8rem; }
.mc__field svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; flex: none; }
.mc__field input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1.1rem; color: var(--text); padding: .65rem 0; outline: none; }
.mc__field input::placeholder { color: var(--muted); opacity: 1; }
.mc__field:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.mc__try { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .85rem 0 0; font: 600 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); max-width: none; }
.mc__q { font: 600 .74rem/1 var(--mono); letter-spacing: .04em; background: var(--gold-pale); color: var(--ink); border: 2px solid var(--ink); padding: .45em .65em; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.mc__q:hover { background: var(--gold-bright); }
.mc__count { margin: .85rem 0 0; font: 600 .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; max-width: none; }
html:not(.js) .mc__search { display: none; }
.mc__body { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 58rem) { .mc__body { grid-template-columns: 1.35fr 1fr; } }
.mc__shelves { display: grid; gap: 1.2rem; background: linear-gradient(180deg, #6B4A2B, #4A321C); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--shadow); padding: 1.1rem 1rem .5rem; }
.shelf { display: grid; gap: .35rem; }
.shelf__pub { display: flex; justify-content: space-between; font: 600 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #F8E7B8; margin: 0; max-width: none; }
.shelf__pub span { color: var(--mint-bright); }
.shelf__row { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; min-height: 7.6rem; padding: 0 .3rem; border-bottom: 10px solid #2E1F10; box-shadow: 0 4px 0 #1E140A; }
.spine { position: relative; flex: 0 0 auto; width: 2.2rem; height: calc(7rem * var(--h) / 100); background: var(--c); border: 2.5px solid var(--ink); border-bottom-width: 0; cursor: pointer; padding: .35rem 0 0; display: grid; align-content: start; justify-items: center; transform-origin: bottom center; transition: transform .35s var(--spring), opacity .25s, filter .25s; box-shadow: inset -6px 0 0 rgba(0, 0, 0, .18), inset 3px 0 0 rgba(255, 255, 255, .35); font: inherit; color: var(--ink); }
.spine__no { font: 400 .95rem/1 var(--display); color: var(--ink); background: #FFFDF7; border: 2px solid var(--ink); padding: .12em .22em 0; }
.spine__mark { position: absolute; left: 50%; transform: translateX(-50%); font: 700 .68rem/1 var(--mono); color: var(--ink); background: #FFFDF7; border: 1.5px solid var(--ink); padding: .1em .2em; }
.spine__mark--key { bottom: .35rem; background: var(--gold-bright); }
.spine__mark--sig { bottom: 1.6rem; background: var(--blue-pale); }
.spine:hover, .spine:focus-visible { transform: translateY(-10px); }
.spine.is-hit { transform: translateY(-16px); filter: drop-shadow(0 0 9px rgba(127, 240, 192, .95)); }
.spine.is-miss { opacity: .3; filter: grayscale(.7); }
.spine.is-picked { outline: 3px solid var(--mint-bright); outline-offset: 2px; }
.mc__detail { max-width: none; }
.mc__stars { color: var(--gold-bright); font-size: 1.3rem; letter-spacing: .12em; margin: .7rem 0 0; }
.mc__run { background: var(--surface); border: 3px solid var(--line); box-shadow: 8px 8px 0 var(--shadow); padding: 1rem 1.2rem 1.25rem; }
.mc__runhead { margin: 0 0 .85rem; font-size: .95rem; max-width: none; }
.run { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(19, minmax(0, 2.3rem)); gap: 4px; }
.run li { margin: 0; aspect-ratio: 1; display: grid; place-items: center; font: 600 .66rem/1 var(--mono); border: 2px solid var(--line); color: var(--muted); }
.run li.is-own { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.run li.is-gap { background: var(--mint-bright); color: var(--ink); border-color: var(--ink); }
@media (max-width: 40rem) { .run { grid-template-columns: repeat(10, 1fr); } }
.mc__export { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin: 0; max-width: none; }
html:not(.js) .mc__export .btn { display: none; }

/* ------------------------------ private by design ------------------ */
.private__grid { display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 58rem) { .private__grid { grid-template-columns: minmax(14rem, 22rem) 1fr; } }
.private__menace { width: min(100%, 22rem, 62vw); margin-inline: auto; filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, .45)); -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 95%); mask-image: linear-gradient(180deg, #000 62%, transparent 95%); }
.private__line { font: 400 clamp(2.6rem, 1.3rem + 5.6vw, 7rem)/.9 var(--display); letter-spacing: .015em; text-transform: uppercase; margin: 0; max-width: none; color: #FFFDF7; -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill; text-shadow: .06em .06em 0 var(--mint-mid); }
.private__line--mint { color: var(--mint-bright); text-shadow: .06em .06em 0 var(--gold); margin-bottom: .4em; }
.pvt { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .pvt { grid-template-columns: 1fr 1fr; } }
.pvt li { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; background: rgba(31, 36, 48, .9); border: 2px solid var(--cream); box-shadow: 5px 5px 0 #000; padding: 1rem 1.1rem; font-size: .95rem; line-height: 1.5; color: #E4E1D8; }
.pvt b { color: #F3EFE4; }
.pvt__icon { width: 2.4rem; height: 2.4rem; }

/* ------------------------------ the numbers ------------------------- */
.stats { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; }
@media (min-width: 52rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: rgba(31, 36, 48, .9); border: 3px solid var(--cream); box-shadow: 8px 8px 0 #000; padding: 1.25rem 1.25rem 1.1rem; display: grid; gap: .4rem; transform: rotate(-1deg); }
.stat:nth-child(even) { transform: rotate(1deg); }
.stat__n { font: 400 clamp(2.3rem, 1.3rem + 3vw, 4rem)/1 var(--display); letter-spacing: .02em; color: var(--gold-bright); -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill; text-shadow: .05em .05em 0 var(--mint-deep), .08em .08em 0 var(--ink); font-variant-numeric: tabular-nums; }
.stat__l { font: 600 .74rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #B7BAC4; }
.stats__note { font-size: .9rem; color: #B7BAC4; margin-top: 1.4rem; }

/* ------------------------------ join: the finale -------------------- */
.join { padding-block: clamp(5rem, 10vw, 9rem); isolation: isolate; }
.join__rays { position: absolute; inset: -40%; z-index: -1; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 253, 247, .32) 0deg 6deg, transparent 6deg 14deg); -webkit-mask-image: radial-gradient(45% 45% at 50% 50%, #000 25%, transparent 75%); mask-image: radial-gradient(45% 45% at 50% 50%, #000 25%, transparent 75%); }
@media (prefers-reduced-motion: no-preference) { .join__rays { animation: rays 140s linear infinite reverse; } }
.join__grid { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 60rem) { .join__grid { grid-template-columns: 1.5fr .5fr; } }
.join__menace { height: min(36rem, 72vh); width: auto; margin-inline: auto; filter: drop-shadow(12px 12px 0 rgba(22, 23, 27, .35)); }
html.js .join__menace { transform: translateY(24%) rotate(5deg); opacity: 0; transition: transform 1.1s var(--spring), opacity .5s; }
html.js .join__menace.is-in { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.js .join__menace { transform: none; opacity: 1; transition: none; } }
@media (max-width: 59.99rem) { .join__menace { display: none; } }

/* ------------------------------ magnetic buttons -------------------- */
.btn--magnet { translate: var(--bx, 0px) var(--by, 0px); transition: translate .3s var(--out), transform .18s var(--out), box-shadow .18s var(--out), background .2s; }

/* ------------------------------ page layouts ------------------------ */
.keys__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 58rem) { .keys__grid { grid-template-columns: 1.1fr .9fr; } }
.pence__head, .comics__head, .sec-head { max-width: 56rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.pence__more, .comics__more, .bluff__more, .private__more { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.signing__head { display: grid; gap: 1rem 3rem; align-items: end; margin-bottom: clamp(1rem, 3vw, 2rem); }
@media (min-width: 60rem) { .signing__head { grid-template-columns: 1.1fr .9fr; } .signing__head .narration { margin-bottom: 2.4rem; } }
.signing__note { font-size: .92rem; margin: 2.5rem 0 0; max-width: 62ch; }
.join__panel { max-width: 46rem; }
.letterspage__more { margin-top: 2.5rem; }
.stepfig { position: relative; }
.stepfig .burst--corner { top: -1.5rem; right: -2.5rem; }
.panel .title--md { margin-bottom: .5em; }
.cta-grid { display: grid; gap: 1.5rem 3rem; align-items: start; }
@media (min-width: 54rem) { .cta-grid { grid-template-columns: 1fr 1fr; } }
.nav__motion:has(> [hidden]) { display: none; }