/* ==========================================================================
   Oops History! — public shell
   Cinematic discovery surfaces, game detail, chapter detail and the player.
   The owner control room keeps its own block at the end of this file and
   admin.css; nothing here is scoped to .admin-body.
   ========================================================================== */

@font-face { font-family:"DM Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/static/fonts/dm-sans-latin.woff2") format("woff2"); }
/* Fraunces (OFL, variable: weight 500–900, optical size 9–144), Latin subset, self-hosted. */
/* Libre Caslon Display remains for the owner control room only; public pages never request it. */
@font-face { font-family:"Libre Caslon Display"; font-style:normal; font-weight:400; font-display:swap; src:url("/static/fonts/libre-caslon-display-latin.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:500 900; font-display:swap; src:url("/static/fonts/fraunces-latin.woff2") format("woff2"); }

:root {
  /* Brand palette, sampled from the approved logo (D11): burgundy disc, antique gold ring and laurel,
     parchment scroll, warm ink. Components use the semantic --c-* names below, not these directly. */
  --brand-burgundy: #7a1219;
  --brand-burgundy-deep: #4a0a0e;
  --brand-burgundy-bright: #a3212a;
  --brand-red: #8e1a1f;
  --brand-red-hover: #a8232a;
  --brand-gold: #d4982f;
  --brand-gold-deep: #b07a1e;
  --brand-gold-bright: #ecb84f;
  --brand-gold-ink: #f3d382;
  --brand-parchment: #f6e4bb;
  --brand-parchment-shade: #e2c58c;
  --brand-cream: #f8efdd;
  --brand-ink: #24140c;

  /* Semantic tokens: a dark cinematic page where the artwork carries the colour */
  --c-bg: #110908;
  --c-bg-deep: #0b0605;
  --c-burgundy: var(--brand-burgundy);
  --c-gold: var(--brand-gold);
  --c-parchment: var(--brand-parchment);
  --c-surface: #1b100e;
  --c-surface-2: #251512;
  --c-surface-3: #321b17;
  --c-band: #2a0b0d;
  --c-text: #f4ead6;
  --c-text-2: #d8c7ab;
  --c-muted: #a99479;
  --c-gold-bright: var(--brand-gold-bright);
  --c-gold-ink: var(--brand-gold-ink);
  --c-line: rgb(244 234 214 / .1);
  --c-line-strong: rgb(244 234 214 / .22);
  --c-line-gold: rgb(212 152 47 / .45);
  --c-error: #ffb4a8;
  --c-overlay: rgb(17 9 8 / .82);
  /* Actions: Play/primary is burgundy-red with parchment text; gold is kept for focus, the active nav pill,
     rules and sparing gold buttons. */
  --c-action: var(--brand-red);
  --c-action-hover: var(--brand-red-hover);
  --c-on-action: var(--c-text);
  --c-on-gold: var(--brand-ink);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  /* Fraunces is set bold for dramatic, game-poster titles. */
  --fw-display: 700;
  --font-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Legacy names still used by older fragments */
  --font-heading: var(--font-display);
  --font-body: var(--font-ui);
  --cm-background: var(--c-bg); --cm-crimson: var(--c-burgundy); --cm-gold: var(--c-gold); --cm-ink: var(--c-parchment);
  --cm-muted: var(--c-muted); --cm-copy: var(--c-text-2);

  /* 4px spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;

  --content-max: 1440px;
  --gutter: clamp(16px, 4vw, 48px);
  --shell: min(100% - 2 * var(--gutter), var(--content-max));
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-lift: 0 24px 48px -24px rgb(0 0 0 / .85);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-4)); }
html, body { min-height: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font: 400 16px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; font-synthesis: none; }
a { color: inherit; }
img, video, svg { max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
/* Native media controls focus inside the element's shadow tree, so the host never matches
   :focus-visible; app.ts marks keyboard navigation so mouse and touch use stay ring-free. */
:root[data-keyboard-nav] video:is(:focus, :focus-within) { outline: 2px solid var(--c-gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 20px; height: 20px; flex: none; }

.wh-app { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(1200px 600px at 85% -10%, rgb(139 26 26 / .22), transparent 70%), var(--c-bg); }
.wh-app :where(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: var(--fw-display); }
.site-content { flex: 1; outline: none; }
.skip-link { position: absolute; left: var(--s-4); top: -80px; z-index: 100; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--c-parchment); color: var(--c-bg); font-weight: 700; }
.skip-link:focus { top: var(--s-3); }

/* ---------- Shared type and controls ---------- */
.eyebrow { margin: 0; color: var(--c-gold); font: 700 12px/1.4 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.page-title { margin: var(--s-2) 0 var(--s-3); font: var(--fw-display) clamp(36px, 4.4vw, 56px)/1.05 var(--font-display); letter-spacing: -.01em; text-wrap: balance; overflow-wrap: break-word; }
.lead { margin: 0; max-width: 62ch; color: var(--c-text-2); font-size: 18px; line-height: 1.6; }
.back-link { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 40px; color: var(--c-text-2); font-size: 15px; font-weight: 600; text-decoration: none; }
.back-link .icon { width: 18px; height: 18px; }
.back-link:hover { color: var(--c-gold-bright); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--r-md); font: 600 15px/1.15 var(--font-ui); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease); }
.btn .icon { width: 18px; height: 18px; }
.btn--primary { border-color: rgb(212 152 47 / .4); background: var(--c-action); color: var(--c-on-action); box-shadow: 0 1px 0 rgb(255 255 255 / .08) inset; }
.btn--primary:hover { background: var(--c-action-hover); box-shadow: 0 0 0 1px rgb(212 152 47 / .5), 0 8px 24px -8px rgb(168 35 42 / .8); transform: translateY(-1px); }
.btn--gold { background: var(--c-gold); color: var(--c-on-gold); }
.btn--gold:hover { background: var(--c-gold-bright); transform: translateY(-1px); }
.btn--ghost { border-color: rgb(244 234 214 / .6); background: rgb(11 6 5 / .55); color: var(--c-text); }
.btn--ghost:hover { border-color: var(--c-gold); color: var(--c-gold-ink); }
.btn--lg { min-height: 52px; padding: 14px 26px; font-size: 16px; }
.btn--block { width: 100%; }
.btn:active { transform: translateY(1px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); color: var(--c-text-2); box-shadow: inset 0 0 0 1px var(--c-line-strong); transition: color .2s, box-shadow .2s, background-color .2s; }
.icon-btn:hover:not(:disabled) { color: var(--c-gold-ink); box-shadow: inset 0 0 0 1px var(--c-gold); }
.icon-btn:disabled { opacity: .35; }

.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 10px; border-radius: var(--r-pill); font: 700 12px/1.2 var(--font-ui); letter-spacing: .03em; white-space: nowrap; }
.badge--play { background: var(--c-gold); color: var(--c-bg); }
.badge--soon { color: var(--c-text-2); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.badge--new { background: var(--c-burgundy); color: var(--c-gold-ink); box-shadow: inset 0 0 0 1px var(--c-line-gold); }

.age { display: inline-flex; align-items: flex-start; gap: var(--s-2); min-width: 0; }
.age__label { padding: 2px 8px; border-radius: var(--r-pill); color: var(--c-gold-ink); box-shadow: inset 0 0 0 1px var(--c-line-gold); font-size: 12px; font-weight: 700; white-space: nowrap; }
.age__note { color: var(--c-text-2); font-size: 14px; }

.field { display: grid; gap: 6px; flex: 1 1 220px; color: var(--c-text-2); font-size: 14px; font-weight: 600; }
.field :is(input, textarea) { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-bg-deep); color: var(--c-text); font: 400 16px/1.4 var(--font-ui); }
.field textarea { resize: vertical; }
.field :is(input, textarea):focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgb(212 152 47 / .22); }
.form-error { margin: var(--s-2) 0 0; color: var(--c-error); font-size: 14px; }
.form-error:empty { display: none; }
.form-success { margin: var(--s-4) 0 0; padding: var(--s-4); border-radius: var(--r-md); background: rgb(212 152 47 / .1); color: var(--c-gold-ink); }

/* ---------- Artwork with branded fallback ---------- */
.art { position: relative; overflow: hidden; container-type: inline-size; background: radial-gradient(110% 90% at 72% 28%, #4b1411 0%, #2a0907 52%, #170404 100%); }
.art__fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(212 152 47 / .3); font: var(--fw-display) clamp(28px, 30cqi, 220px)/1 var(--font-display); letter-spacing: -.04em; user-select: none; }
.art__fallback i { font-style: normal; color: rgb(212 152 47 / .55); }
.art__fallback::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgb(212 152 47 / .14); border-radius: inherit; }
.art__img.is-broken { display: none; }
.art__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-cover-empty { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--c-surface-2); color: var(--c-gold); font: var(--fw-display) 32px var(--font-display); }

/* HTMX indicators are external CSS; its injected inline styles are disabled
   in the layout so the existing strict Content Security Policy stays intact. */
.htmx-indicator { opacity: 0; visibility: hidden; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; visibility: visible; transition: opacity 200ms ease-in; }
@media (prefers-reduced-motion: reduce) { .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { transition: none; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgb(17 9 8 / .86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); transition: background-color .3s, border-color .3s; }
.site-header__inner { width: var(--shell); height: var(--header-h); margin-inline: auto; display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.wh-brand { display: flex; align-items: center; flex: none; min-height: 44px; color: var(--brand-ink); text-decoration: none; }
/* Lockup: the logo's medallion in a gold ring, overlapping a parchment scroll that carries the HTML wordmark. */
.wh-brand__medallion { position: relative; z-index: 1; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--brand-burgundy-deep); box-shadow: 0 0 0 2px var(--c-gold), 0 0 0 4px var(--brand-burgundy-deep), 0 6px 14px rgb(0 0 0 / .5); }
.wh-brand__medallion img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.wh-brand__scroll { margin-left: -12px; padding: 7px 14px 7px 22px; border-radius: 3px 10px 10px 3px; background: linear-gradient(180deg, var(--brand-cream), var(--brand-parchment) 55%, var(--brand-parchment-shade)); box-shadow: inset 0 0 0 1px rgb(176 122 30 / .55), 0 4px 10px rgb(0 0 0 / .35); font: 900 21px/1 var(--font-display); letter-spacing: -.01em; white-space: nowrap; transition: box-shadow .2s; }
.wh-brand__oops { color: var(--brand-burgundy); }
.wh-brand__history { color: var(--brand-ink); }
.wh-brand:focus-visible { outline-offset: 5px; border-radius: 30px 12px 12px 30px; }
.wh-brand:hover .wh-brand__scroll { box-shadow: inset 0 0 0 1px var(--c-gold), 0 4px 14px rgb(212 152 47 / .3); }
.site-nav { display: flex; align-items: center; gap: var(--s-1); flex: 1; min-width: 0; }
.site-nav__link { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 8px 14px; border-radius: var(--r-pill); color: var(--c-text-2); font: 500 15px/1 var(--font-ui); text-decoration: none; white-space: nowrap; transition: color .2s, background-color .2s, box-shadow .2s; }
.site-nav__link .icon { width: 18px; height: 18px; }
.site-nav__link:hover { color: var(--c-text); background: rgb(244 234 214 / .06); }
/* The current page is a gold-outlined pill (approved mockup). */
.site-nav__link[aria-current="page"] { color: var(--c-gold-ink); background: rgb(212 152 47 / .08); box-shadow: inset 0 0 0 1px var(--c-gold); }
/* Search navigates to /search: use the same compact link treatment as its neighbours, not an input affordance. */
.site-nav__search { margin-left: auto; margin-right: var(--s-1); }
.site-nav__settings { width: 40px; padding: 0; justify-content: center; }
.site-nav__settings-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Phones and tablets keep a search shortcut outside the menu. */
.site-header__search { display: none; place-items: center; width: 44px; height: 44px; margin-left: auto; border-radius: var(--r-md); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.site-header__search .icon { width: 20px; height: 20px; }
.site-header__search[aria-current="page"] { color: var(--c-gold-ink); box-shadow: inset 0 0 0 1px var(--c-gold); }
/* The narrowest phones keep the medallion alone; the link's accessible name still says "Oops History!". */
@media (max-width: 340px) { .wh-brand__scroll { display: none; } }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: var(--r-md); place-items: center; color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.nav-toggle__bars { display: grid; gap: 5px; width: 20px; }
.nav-toggle__bars span { height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Pages that open with a hero let the header float over the artwork. */
.wh-app:has(.hero) .site-header:not([data-scrolled]) { background: linear-gradient(180deg, rgb(17 9 8 / .78), rgb(17 9 8 / 0)); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* The player keeps its controls clear of a sticky header. */
.wh-app:has(.player-page) .site-header { position: relative; }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--s-16); border-top: 1px solid var(--c-line); }
.site-footer__inner { width: var(--shell); margin-inline: auto; padding-block: var(--s-8) var(--s-10); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-4) var(--s-12); }
.site-footer__name { display: inline-flex; align-items: center; min-height: 44px; font: 900 22px/1 var(--font-display); text-decoration: none; }
.site-footer__name span { color: var(--c-gold); }
.site-footer__brand p { margin: var(--s-2) 0 0; color: var(--c-muted); font-size: 14px; }
.site-footer__note { max-width: 52ch; margin: 0; color: var(--c-muted); font-size: 14px; line-height: 1.6; }
.site-footer__links { flex-basis: 100%; font-size: 14px; }
.site-footer__links a { color: var(--c-text-2); }
.site-footer__links a:hover { color: var(--c-gold-ink); }
.setting-line input:disabled { opacity: .4; cursor: not-allowed; }
.consent-link { padding: 0; border: 0; background: none; color: var(--c-text-2); font: inherit; text-decoration: underline; cursor: pointer; }
/* Standalone text links get a comfortable target without looking like buttons. */
.site-footer__links :is(a, .consent-link), .standalone-link, .source a { display: inline-flex; align-items: center; min-height: 44px; }
.consent-link:hover { color: var(--c-gold-ink); }
.consent-banner { box-sizing: border-box; position: fixed; z-index: 90; inset: auto 12px max(12px, env(safe-area-inset-bottom)); width: min(920px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; margin-inline: auto; display: flex; align-items: center; gap: 20px; padding: 16px 20px; border: 1px solid var(--c-line-gold); border-radius: 12px; background: var(--c-surface); box-shadow: 0 12px 36px rgb(0 0 0 / .65); }
/* An expanded mobile menu must remain usable above first-visit consent. */
.site-header:has(.site-nav.is-open) { z-index: 95; }
.consent-banner[hidden], .consent-banner [hidden] { display: none; }
.consent-banner__copy { flex: 1; min-width: 0; }
.consent-banner .eyebrow { margin: 0; }
.consent-banner h2 { margin: 2px 0; font: var(--fw-display) 24px/1.15 var(--font-display); color: var(--c-parchment); }
.consent-banner p { margin: 4px 0; font-size: 13px; line-height: 1.4; color: var(--c-text-2); }
.consent-banner a { color: var(--c-gold-ink); }
.consent-banner__actions { display: grid; flex: 0 0 320px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.consent-banner__actions .btn { min-height: 44px; padding: 8px 10px; line-height: 1.2; }
.consent-banner__actions [data-consent-customize] { grid-column: 1 / -1; }
.consent-banner [data-consent-detail] { margin-top: 12px; padding: 14px; border: 1px solid var(--c-line-gold); border-radius: 8px; background: rgb(255 255 255 / .04); }
.consent-banner [data-consent-detail] h3 { margin: 0 0 8px; color: var(--c-parchment); font: var(--fw-display) 22px/1.2 var(--font-display); }
.consent-banner [data-consent-save] { margin-top: 10px; }
.consent-banner--expanded { align-items: flex-start; }
.consent-banner--expanded .consent-banner__actions,
.consent-banner--expanded .consent-banner__copy > :is(.eyebrow, h2, #consent-copy) { display: none; }
.consent-banner--expanded [data-consent-detail] { margin-top: 0; }
.consent-banner__toggle { display: flex; align-items: center; gap: 10px; margin: 10px 0; cursor: pointer; }
.consent-banner__toggle input { width: 20px; height: 20px; accent-color: var(--c-gold); }
/* On play pages keep the first-visit choice with the footer, never over the frame or toolbar. */
.consent-banner--player { position: static; order: 4; flex: none; width: min(920px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin-block: 16px; }
@media (max-width: 760px) { .consent-banner { display: block; padding: 12px 16px; } .consent-banner .eyebrow { display: none; } .consent-banner__actions { margin-top: 8px; } }
@media (max-height: 440px) { .consent-banner { padding-block: 8px; } .consent-banner .eyebrow { display: none; } .consent-banner h2 { font-size: 21px; } }
@media (min-width: 560px) and (max-height: 440px) { .consent-banner { display: flex; gap: 12px; } .consent-banner__actions { flex: 0 0 250px; margin: 0; } .consent-banner h2 { margin: 0; } }
@media (max-width: 400px) { .consent-banner h2 { font-size: 22px; } .consent-banner__actions .btn { font-size: 13px; } }
@media (max-width: 260px) { .consent-banner__actions { grid-template-columns: 1fr; } }

/* ---------- Hero (home and game detail) ---------- */
/* ---------- Home hero (B2): the approved "Weird Tales in Play" branded hero ----------
   Full-bleed artwork (the featured game's cover until the brand collage is approved) under an HTML logo
   lockup and tagline ribbon. The centre glow keeps the lockup legible on any art; nothing is baked in. */
.hero { position: relative; isolation: isolate; display: flex; min-height: clamp(440px, 33vw, 580px); margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); overflow: hidden; background: var(--c-bg); }
.hero__art { position: absolute; inset: 0; z-index: -2; }
.hero__art .art__img { object-position: 50% 38%; }
.hero--no-art .hero__art .art__fallback { opacity: .35; font-size: clamp(160px, 30cqi, 420px); }
.hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(ellipse 30% 52% at 50% 44%, rgb(74 10 14 / .72) 0%, rgb(42 8 9 / .42) 50%, rgb(17 9 8 / 0) 100%),
  linear-gradient(0deg, var(--c-bg) 0%, rgb(17 9 8 / .82) 15%, rgb(17 9 8 / 0) 44%),
  linear-gradient(180deg, rgb(17 9 8 / .55) 0%, rgb(17 9 8 / 0) 24%),
  linear-gradient(90deg, rgb(17 9 8 / .3), rgb(17 9 8 / 0) 20% 80%, rgb(17 9 8 / .3)); }
.hero__content { position: relative; width: var(--shell); margin-inline: auto; display: grid; grid-template-rows: 1fr auto; gap: var(--s-5); padding-block: var(--s-3) var(--s-6); }
.hero__brand { align-self: center; display: grid; justify-items: center; gap: var(--s-4); text-align: center; }

/* The lockup: the medallion overlapping a parchment scroll that carries the live wordmark. */
.hero-lockup { position: relative; margin: 0; display: grid; justify-items: center; font-size: 1rem; }
.hero-lockup__medallion { position: relative; z-index: 1; width: clamp(100px, 8.6vw, 132px); aspect-ratio: 1; border-radius: 50%; background: var(--brand-burgundy-deep); box-shadow: 0 0 0 3px var(--c-gold), 0 0 0 7px var(--brand-burgundy-deep), 0 0 0 8px rgb(212 152 47 / .55), 0 18px 36px rgb(0 0 0 / .6); }
.hero-lockup__medallion img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.hero-lockup__scroll { position: relative; margin-top: calc(-1 * clamp(18px, 1.8vw, 26px)); padding: clamp(14px, 1.4vw, 20px) clamp(28px, 3.2vw, 48px) clamp(10px, 1vw, 14px); border-radius: 8px; background: linear-gradient(180deg, var(--brand-cream) 0%, var(--brand-parchment) 52%, var(--brand-parchment-shade) 100%); box-shadow: inset 0 0 0 1px rgb(176 122 30 / .6), inset 0 -6px 12px rgb(176 122 30 / .22), 0 14px 30px rgb(0 0 0 / .55); font: 900 clamp(40px, 4.9vw, 76px)/.95 var(--font-display); letter-spacing: -.02em; white-space: nowrap; text-shadow: 0 2px 0 rgb(255 255 255 / .35); }
/* Rolled ends of the scroll. */
.hero-lockup__scroll::before, .hero-lockup__scroll::after { content: ""; position: absolute; top: 10%; bottom: 10%; width: clamp(12px, 1.2vw, 18px); border-radius: 50%; background: linear-gradient(90deg, var(--brand-parchment-shade), var(--brand-cream) 45%, var(--brand-gold-deep)); box-shadow: 0 4px 10px rgb(0 0 0 / .45); }
.hero-lockup__scroll::before { left: calc(-1 * clamp(6px, .6vw, 9px)); }
.hero-lockup__scroll::after { right: calc(-1 * clamp(6px, .6vw, 9px)); }
.hero-lockup__oops { color: var(--brand-burgundy); }
.hero-lockup__history { color: var(--brand-ink); }

/* The tagline ribbon: HTML on parchment, with swallow-tail ends. */
.hero__ribbon { margin: 0; padding: 10px clamp(36px, 4vw, 56px); background: linear-gradient(180deg, var(--brand-parchment), var(--brand-parchment-shade)); color: var(--brand-ink); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%); filter: drop-shadow(0 8px 16px rgb(0 0 0 / .5)); font: 700 clamp(16px, 1.45vw, 21px)/1.25 var(--font-display); text-wrap: balance; }
.hero__ribbon span { display: block; }
.hero__ribbon span:first-child { color: var(--brand-burgundy); font-weight: 800; font-size: 1.12em; }

/* The featured game is named before its actions (DOM and reading order). Where both fit on one row the
   approved composition keeps the actions left and the featured line right; otherwise the line sits above them. */
.hero__foot { display: grid; justify-items: start; gap: var(--s-4); }
@media (min-width: 1180px) {
  .hero__foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-8); }
  .hero__actions { grid-area: 1 / 1; }
  .hero__featured { grid-area: 1 / 2; justify-self: end; justify-content: flex-end; text-align: right; }
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__featured { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; color: var(--c-text-2); font-size: 15px; text-shadow: 0 1px 8px rgb(0 0 0 / .7); }
.hero__featured a { color: var(--c-text); font: 700 18px/1.2 var(--font-display); text-decoration: underline; text-decoration-color: var(--c-line-gold); text-underline-offset: 4px; }
.hero__featured a:hover { color: var(--c-gold-ink); text-decoration-color: currentColor; }
.hero__place { color: var(--c-muted); }
.hero__flag { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-gold); font: 700 12px/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.hero__flag::after { content: ""; width: 20px; height: 1px; background: var(--c-line-gold); }

/* Brand collage hero: the approved collage, whole and uncropped, below a solid header. Its wordmark and tagline
   are painted in, so the HTML lockup and ribbon are visually hidden (still read by assistive technology). The
   collage keeps the featured game's line and actions on the dark band beneath it; on short or very wide screens
   it is contained, never cropped, and a blurred copy fills the sides. */
.hero--collage { --hero-foot-h: 100px; display: block; min-height: 0; margin-top: 0; padding-top: 0; }
.wh-app:has(.hero--collage) .site-header:not([data-scrolled]) { background: rgb(17 9 8 / .96); }
.hero-collage { position: relative; isolation: isolate; display: grid; justify-items: center; overflow: hidden; background: var(--brand-burgundy-deep); }
.hero-collage picture { display: contents; }
.hero-collage__backdrop { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) brightness(.5) saturate(1.15); }
.hero-collage__img { display: block; width: max(min(100%, 560px), min(100%, calc((100svh - var(--header-h) - var(--hero-foot-h)) * 1672 / 941))); height: auto; }
.hero--collage .hero__content { display: block; padding-block: var(--s-5) var(--s-6); }
.hero--collage :is(.hero-lockup, .hero__ribbon) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: none; white-space: nowrap; filter: none; }
/* If the collage fails to load, the HTML lockup and ribbon take its place on the brand ground. */
.hero--collage:has(.hero-collage__img.is-broken) .hero-collage { display: none; }
.hero--collage:has(.hero-collage__img.is-broken) .hero__content { padding-top: var(--s-10); background: radial-gradient(ellipse 60% 70% at 50% 30%, rgb(74 10 14 / .8), rgb(17 9 8 / 0) 70%); }
.hero--collage:has(.hero-collage__img.is-broken) .hero__brand { margin-bottom: var(--s-8); }
.hero--collage:has(.hero-collage__img.is-broken) :is(.hero-lockup, .hero__ribbon) { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
.hero--collage:has(.hero-collage__img.is-broken) .hero__ribbon { clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%); filter: drop-shadow(0 8px 16px rgb(0 0 0 / .5)); }

/* ---------- Home ---------- */
.home-intro { width: var(--shell); margin-inline: auto; padding-block: clamp(40px, 6vw, 72px) var(--s-4); }
.home-intro__title { margin: var(--s-2) 0 0; max-width: 20ch; font: var(--fw-display) clamp(40px, 5.2vw, 72px)/1.02 var(--font-display); letter-spacing: -.015em; }
.home-intro__title em { color: var(--c-gold); font-style: normal; }
.home-intro__copy { margin: var(--s-4) 0 0; color: var(--c-text-2); font-size: 18px; max-width: 46ch; }
.shelves { position: relative; z-index: 1; display: grid; gap: clamp(36px, 4vw, 56px); padding-top: var(--s-6); }
/* The hero's own bottom padding separates it from the first shelf; no overlap at any width. */
.hero + .shelves { padding-top: 0; }

/* A wide viewport needs a deliberate second act: let the featured story breathe,
   then begin the catalog on its own line instead of stacking it over the hero. */
@media (min-width: 1200px) {
  /* Keep the shell fluid: a centered width cap grows the desktop side margins. */
  :root { --content-max: 100vw; }
  .hero + .shelves { margin-top: 0; }
  .hero--collage .hero__content { padding-block: var(--s-5) var(--s-6); }
}

@media (min-width: 1600px) {
  .hero { min-height: clamp(560px, 32vw, 700px); }
}

/* ---------- Shelves ---------- */
/* --card-w is the width of one card; --art-h is its artwork height, which centres the rail arrows on the art. */
.shelf { container-type: inline-size; --card-gap: 16px; --shelf-w: min(100cqw - 2 * var(--gutter), var(--content-max)); --card-w: calc((var(--shelf-w) - var(--card-gap)) / 1.55); --art-h: calc(var(--card-w) * .8); }
.shelf--wide { --card-w: calc((var(--shelf-w) - var(--card-gap)) / 1.15); --art-h: calc(var(--card-w) * .5625); }
.shelf__head { width: var(--shell); margin-inline: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-2); }
.shelf__title { margin: var(--s-2) 0 0; font: var(--fw-display) clamp(26px, 2.5vw, 34px)/1.1 var(--font-display); }
.shelf__desc { margin: 2px 0 0; max-width: 60ch; color: var(--c-muted); font-size: 15px; }
.shelf__rail { position: relative; }
/* Round chevrons on the rail's edges (approved reference); they appear only when the shelf overflows. */
.shelf__controls { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.shelf__arrow { position: absolute; top: calc(var(--s-2) + var(--art-h) / 2); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--c-line-gold); border-radius: 50%; background: rgb(17 9 8 / .86); color: var(--c-text); box-shadow: 0 8px 20px rgb(0 0 0 / .55); cursor: pointer; pointer-events: auto; translate: 0 -50%; transition: opacity .2s, background-color .2s, border-color .2s, color .2s; }
.shelf__arrow--prev { left: max(4px, calc(var(--gutter) - 22px)); }
.shelf__arrow--next { right: max(4px, calc(var(--gutter) - 22px)); }
.shelf__arrow:hover { border-color: var(--c-gold); background: var(--c-surface-3); color: var(--c-gold-ink); }
.shelf__arrow:disabled { opacity: 0; visibility: hidden; }
.shelf__arrow .icon { width: 22px; height: 22px; }
/* The scrollport, not just the first card, shares the heading's bounds.
   Desktop uses whole cards; phones retain a next-card preview inside these bounds. */
.shelf__track { list-style: none; width: var(--shell); margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w); gap: var(--card-gap); padding: var(--s-2) 0 var(--s-5); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-width: thin; scrollbar-color: var(--c-surface-3) transparent; }
.shelf__item { min-width: 0; scroll-snap-align: start; }
.continue-list { list-style: none; width: var(--shell); margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s-3); }
.continue-card { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-2); padding-right: var(--s-4); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); text-decoration: none; transition: background-color .2s, box-shadow .2s; }
.continue-card:hover { background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--c-line-gold); }
.continue-card__art { aspect-ratio: 16 / 10; border-radius: var(--r-md); }
.continue-card__text { display: grid; gap: 2px; min-width: 0; }
.continue-card__text b { font: var(--fw-display) 20px/1.15 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continue-card__text span { color: var(--c-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continue-card__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-gold); color: var(--c-bg); }

/* ---------- Game card ---------- */
/* ---------- Game cards (B2) ----------
   Poster: a portrait card with 5:4 art; wide: 16:9 art for games coming soon. The HTML title sits on the art's
   lower edge with layered shadows and a hairline outline, so it reads on any illustration. The art stays text-free. */
.game-card { height: 100%; }
.game-card__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--r-md); background: var(--c-surface); box-shadow: inset 0 0 0 1px rgb(212 152 47 / .22), 0 0 0 1px rgb(0 0 0 / .6); color: inherit; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s, background-color .3s; }
.game-card__media { position: relative; container-type: inline-size; }
.game-card__art { aspect-ratio: 5 / 4; }
.game-card__art--wide { aspect-ratio: 16 / 9; }
.game-card__art .art__img { transition: transform .6s var(--ease); }
/* Bottom scrim for the title; a faint top scrim keeps a Coming soon tag clear of bright skies. */
.game-card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(0deg, rgb(17 9 8 / .94) 0%, rgb(17 9 8 / .66) 22%, rgb(17 9 8 / .12) 50%, rgb(17 9 8 / 0) 62%),
  linear-gradient(180deg, rgb(17 9 8 / .32) 0%, rgb(17 9 8 / 0) 22%); }
.game-card__title { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 9px; margin: 0; color: var(--brand-parchment); font: 800 clamp(19px, 11.4cqi, 32px)/.98 var(--font-display); letter-spacing: -.015em; overflow-wrap: break-word; text-wrap: balance;
  text-shadow: 1px 0 0 var(--brand-ink), -1px 0 0 var(--brand-ink), 0 1px 0 var(--brand-ink), 0 -1px 0 var(--brand-ink), 0 3px 0 rgb(0 0 0 / .6), 0 4px 18px rgb(0 0 0 / .75); }
.game-card__lead { display: block; margin-bottom: .04em; color: var(--brand-gold-ink); font-size: .6em; font-weight: 700; letter-spacing: .01em; }
.game-card__name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: .06em; }
.game-card--wide .game-card__title { left: 16px; right: 16px; bottom: 12px; font-size: clamp(22px, 7.6cqi, 38px); }
.game-card--wide .game-card__name { -webkit-line-clamp: 2; }
.game-card__tag { position: absolute; z-index: 1; top: 10px; right: 10px; padding: 4px 9px; border-radius: 4px; background: linear-gradient(180deg, var(--brand-gold-bright), var(--c-gold)); color: var(--c-on-gold); box-shadow: 0 2px 8px rgb(0 0 0 / .45); font: 800 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.game-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--s-3); padding: 12px 14px 14px; }
.game-card__copy { margin: 0; color: var(--c-text-2); font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.game-card__chips { display: flex; flex-wrap: wrap; gap: 5px; margin: auto 0 0; padding: 0; list-style: none; }
.game-card__chips li { padding: 3px 8px; border-radius: var(--r-pill); background: rgb(244 234 214 / .06); box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-text-2); font: 600 12px/1.3 var(--font-ui); white-space: nowrap; }
.game-card__link:hover, .game-card__link:focus-visible { transform: translateY(-4px); background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--c-gold), 0 0 0 1px rgb(0 0 0 / .6), var(--shadow-lift); }
.game-card__link:hover .art__img, .game-card__link:focus-visible .art__img { transform: scale(1.04); }
.game-card__link:focus-visible { outline-offset: 4px; }
.game-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--s-5); }
@media (forced-colors: active) {
  .game-card__link { border: 1px solid CanvasText; }
  .game-card__title, .game-card__lead { color: CanvasText; text-shadow: none; background: Canvas; }
  .game-card__tag, .game-card__chips li { border: 1px solid CanvasText; }
}

/* ---------- Empty state ---------- */
.empty-state { width: var(--shell); margin: var(--s-4) auto 0; padding: clamp(32px, 6vw, 64px) var(--s-6); display: grid; justify-items: center; gap: var(--s-2); text-align: center; border-radius: var(--r-xl); background: linear-gradient(180deg, var(--c-surface), transparent); box-shadow: inset 0 0 0 1px var(--c-line); }
.empty-state__mark { color: var(--c-gold); font: var(--fw-display) 44px/1 var(--font-display); }
.empty-state__mark i { font-style: normal; color: var(--c-gold-ink); }
.empty-state h2 { margin: var(--s-2) 0 0; font-size: clamp(26px, 3vw, 34px); }
.empty-state p { margin: 0 0 var(--s-3); color: var(--c-text-2); }
.search-results .empty-state { width: auto; }

/* ---------- Generic pages ---------- */
.page { width: var(--shell); margin-inline: auto; padding-block: clamp(28px, 4vw, 48px) var(--s-8); }
.page--narrow { width: min(100% - 2 * var(--gutter), 880px); }
.page-head { margin-bottom: var(--s-8); }
.page-head--center { text-align: center; }
.page-head--center .page-title { margin-bottom: 0; }
.panel { padding: var(--s-6); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); }
.panel + .panel { margin-top: var(--s-4); }
.panel__title { margin: 0 0 var(--s-3); font: var(--fw-display) 24px/1.2 var(--font-display); }
.panel__label { margin: 0 0 var(--s-3); color: var(--c-gold); font: 700 12px/1.4 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.panel__prose { margin: 0; color: var(--c-text-2); font-size: 16px; line-height: 1.65; white-space: pre-line; }
.panel__note { margin: var(--s-2) 0 0; color: var(--c-muted); font-size: 14px; line-height: 1.55; }
.panel--quiet { background: transparent; }
.policy__lede { max-width: 65ch; margin: 0 0 var(--s-3); color: var(--c-text-2); font-size: 18px; line-height: 1.6; }
.policy .panel { color: var(--c-text-2); line-height: 1.65; overflow-wrap: anywhere; }
.policy .panel p, .policy .panel ul { margin: 0 0 var(--s-3); }
.policy .panel ul { padding-left: 1.25em; }
.policy .panel li + li { margin-top: var(--s-2); }
.policy .panel h3 { margin: var(--s-5) 0 var(--s-2); color: var(--c-text); font: 700 16px/1.4 var(--font-ui); }
.policy .panel b { color: var(--c-text); }
.policy .panel a, .modal__note a { color: var(--c-gold-ink); }
.policy code { font-size: .9em; }
.reminder-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); margin-top: var(--s-4); }
.reminder-form .btn { flex: none; min-height: 46px; }

/* ---------- Search ---------- */
.search-page .page-head { margin-bottom: var(--s-6); }
.search-box { display: flex; align-items: center; gap: var(--s-3); max-width: 760px; height: 64px; margin: 0 auto; padding: 0 var(--s-5); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line-strong), 0 20px 40px -28px #000; transition: box-shadow .2s; }
.search-box:focus-within { box-shadow: inset 0 0 0 1px var(--c-gold), 0 0 0 4px rgb(212 152 47 / .16); }
.search-box .icon { width: 24px; height: 24px; color: var(--c-gold); }
.search-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--c-text); font-size: 20px; }
.search-box input::placeholder { color: var(--c-muted); opacity: .8; }
.search-hint { margin: var(--s-3) 0 0; text-align: center; color: var(--c-muted); font-size: 14px; }
.search-count { margin: var(--s-10) 0 var(--s-5); font: var(--fw-display) clamp(22px, 2.2vw, 28px)/1.2 var(--font-display); }

/* ---------- Detail pages (game and chapter) ---------- */
/* One composition for every lifecycle state: a framed hero (copy beside cover
   artwork), then full-width sections that each size to their own content. No
   column spans two sections, so a short chapter list never strands empty space. */
.detail-page { --content-max: 1440px; --shell: min(100% - 2 * var(--gutter), var(--content-max)); --section-gap: clamp(48px, 5vw, 72px); width: var(--shell); margin-inline: auto; }
.detail-back { display: flex; width: fit-content; margin: var(--s-4) 0 var(--s-2); }
.detail-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); align-items: center; gap: clamp(24px, 3vw, 48px); }
.detail-hero__text { grid-column: 1; grid-row: 1; min-width: 0; padding-block: var(--s-6); }
.detail-hero__art { grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--c-line-gold), var(--shadow-lift); }
/* Contain preserves the whole composition; letterboxing shows the crimson art ground. */
.detail-hero__art .art__img, .gallery__art .art__img { object-fit: contain; object-position: center; }
.detail-hero__art:has(.art__img:not(.is-broken)) .art__fallback { visibility: hidden; }
.detail-hero__art .art__fallback { font-size: clamp(72px, 24cqi, 220px); }
.detail-hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-2); color: var(--c-gold-ink); font: 600 14px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.detail-hero__title { margin: 0; font: var(--fw-display) clamp(36px, 4vw, 64px)/1.04 var(--font-display); letter-spacing: -.015em; text-wrap: balance; overflow-wrap: anywhere; }
.detail-hero__copy { margin: var(--s-4) 0 0; max-width: 34em; color: var(--c-text-2); font-size: 17px; line-height: 1.55; overflow-wrap: break-word; }
.detail-hero__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: var(--s-4) 0 0; color: var(--c-muted); font-size: 14px; }
.detail-hero__meta { display: inline-flex; align-items: center; gap: var(--s-2); }
.detail-hero__meta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-gold); }
/* The Follow control joins the action row: its toggle is a peer button, and its
   form, note and status wrap onto full-width lines beneath the actions. */
.detail-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.detail-hero__actions .player-reminder { display: contents; }
/* Messages follow every button visually; DOM order keeps the form right after its toggle. */
.detail-hero__actions :is(.reminder-form, [data-reminder-delivery-note], [data-reminder-status], noscript) { flex: 1 0 100%; order: 1; margin: 0; }
.detail-hero__actions .reminder-form { margin-top: var(--s-1); }
.detail-hero__actions [data-reminder-status]:empty { display: none; }
.detail-hero__actions [data-reminder-status] { color: var(--c-text-2); line-height: 1.6; overflow-wrap: anywhere; }
.detail-hero__notice { margin: var(--s-4) 0 0; color: var(--c-text-2); font-size: 15px; }
.detail-hero__notice a { color: var(--c-gold-ink); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }

.detail-section { margin-top: var(--section-gap); min-width: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.section-title { margin: 0; font: var(--fw-display) clamp(28px, 2.6vw, 36px)/1.1 var(--font-display); }
.section-meta { margin: 0; color: var(--c-muted); font-size: 14px; }
.chapters__empty { margin: 0; padding: var(--s-6); border-radius: var(--r-lg); color: var(--c-text-2); box-shadow: inset 0 0 0 1px var(--c-line); }

/* Episode rows: art, copy and one action column. The action column has a fixed
   track so Play and Follow line up; Follow's messages never get an intrinsic track. */
.chapter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.chapter-row { display: grid; grid-template-columns: clamp(160px, 16vw, 216px) minmax(0, 1fr) 200px; grid-template-areas: "art body action"; align-items: center; gap: var(--s-3) var(--s-5); padding: var(--s-4); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); scroll-margin-top: calc(var(--header-h) + var(--s-4)); transition: background-color .2s, box-shadow .2s; }
.chapter-row--quiet { grid-template-columns: clamp(160px, 16vw, 216px) minmax(0, 1fr); grid-template-areas: "art body"; }
.chapter-row--playable:is(:hover, :focus-within), .chapter-row:target { background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--c-line-gold); }
.chapter-row__art { grid-area: art; position: relative; overflow: hidden; border-radius: var(--r-md); }
.chapter-row__img { aspect-ratio: 16 / 10; }
.chapter-row__img .art__fallback { font-size: 0; }
.chapter-row__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(17 9 8 / .72), rgb(17 9 8 / .05) 70%); }
.chapter-row:not(.chapter-row--playable) .chapter-row__art .art__img { filter: grayscale(.55) brightness(.75); }
.chapter-row__number { position: absolute; z-index: 1; left: var(--s-3); bottom: var(--s-1); color: var(--c-parchment); font: var(--fw-display) clamp(36px, 3.4vw, 48px)/1 var(--font-display); text-shadow: 0 2px 12px rgb(0 0 0 / .6); }
.chapter-row__body { grid-area: body; min-width: 0; }
.chapter-row__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 6px; color: var(--c-muted); font-size: 14px; font-weight: 600; }
.chapter-row__title { margin: 0; font: var(--fw-display) clamp(21px, 1.8vw, 26px)/1.15 var(--font-display); overflow-wrap: break-word; }
.chapter-row__title a { text-decoration: none; }
.chapter-row__title a:hover { color: var(--c-gold-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.chapter-row__summary { margin: 6px 0 0; max-width: 68ch; color: var(--c-text-2); font-size: 15px; line-height: 1.5; overflow-wrap: break-word; }
.chapter-row__action { grid-area: action; min-width: 0; }
.chapter-row__action > .btn, .chapter-row__action [data-reminder-toggle] { width: 100%; }
.chapter-row__action :is([data-reminder-status], [data-reminder-delivery-note]) { overflow-wrap: break-word; }
.chapter-row__action [data-reminder-cancel] { margin-top: var(--s-2); }
/* An open email form gets the card's full width rather than the action column; its toggle keeps its own width. */
.chapter-row:has([data-reminder-form]:not([hidden])) { grid-template-areas: "art body body" "action action action"; }
.chapter-row:has([data-reminder-form]:not([hidden])) .chapter-row__action [data-reminder-toggle] { width: auto; }

.history__grid { display: grid; gap: var(--s-6) clamp(24px, 4vw, 56px); }
.history--split .history__grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); align-items: start; }
.history__story { margin: 0; max-width: 68ch; color: var(--c-text-2); font-size: 17px; line-height: 1.7; white-space: pre-line; overflow-wrap: break-word; }
.history__sources { padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); }
.history__source-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.history__source-list li { display: grid; gap: 2px; min-width: 0; }
.history__source-list :is(a, span) { color: var(--c-text); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.history__source-list a { justify-self: start; display: inline-flex; align-items: center; min-height: 24px; text-decoration-color: var(--c-line-gold); text-underline-offset: 3px; }
@media (pointer: coarse) { .history__source-list a { min-height: 44px; } }
.history__source-list a:hover { color: var(--c-gold-ink); }
.history__source-list small { color: var(--c-muted); font-size: 13px; }
.history__groups { list-style: none; margin: var(--s-4) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--c-line); }
.history__groups a { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; color: var(--c-gold-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.history__groups a:hover { text-decoration: underline; text-underline-offset: 4px; }
.chapter-sources .source-list { margin: 0; }

.gallery__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 440px)); gap: var(--s-4); }
.gallery__item { margin: 0; }
.gallery__art { aspect-ratio: 16 / 10; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--c-line); }
.gallery__item figcaption { margin-top: var(--s-2); color: var(--c-muted); font-size: 14px; }

.concept__media { margin: 0; }
.concept video { display: block; width: min(100%, 960px); aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: #000; }
.concept figcaption { margin-top: var(--s-2); color: var(--c-muted); font-size: 14px; }
.concept .age-gate { margin: 0; }
.chapter-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.chapter-nav__link { display: grid; gap: 2px; min-width: 0; min-height: 44px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line); text-decoration: none; }
.chapter-nav__link small { color: var(--c-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter-nav__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.chapter-nav__link:hover { box-shadow: inset 0 0 0 1px var(--c-line-gold); color: var(--c-gold-ink); }
.chapter-nav__link--all { grid-column: 2; text-align: center; }
.chapter-nav__link--next { grid-column: 3; text-align: right; }

/* Watch Opening dialog. The video is sized so its controls stay on screen. */
.opening-dialog { width: min(1040px, 100%); padding: var(--s-8) var(--s-6) var(--s-6); }
.opening-dialog h2 { margin-bottom: var(--s-4); padding-right: var(--s-10); overflow-wrap: anywhere; }
.opening-dialog__media video { display: block; width: min(100%, (100dvh - 220px) * 16 / 9); min-width: min(100%, 280px); aspect-ratio: 16 / 9; margin-inline: auto; border-radius: var(--r-md); background: #000; }
.opening-dialog__media [data-video-error] { margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); color: var(--c-error); box-shadow: inset 0 0 0 1px var(--c-line-gold); }
.opening-dialog .age-gate { max-width: none; margin: 0; padding: var(--s-8) var(--s-6); }
.opening-dialog .age-gate h3 { margin: var(--s-2) 0 var(--s-3); font: var(--fw-display) clamp(26px, 3.4vw, 36px)/1.1 var(--font-display); text-wrap: balance; }
.opening__actions { margin-top: var(--s-5); }

@media (max-width: 1100px) {
  .chapter-row { grid-template-columns: clamp(140px, 18vw, 200px) minmax(0, 1fr); grid-template-areas: "art body" "art action"; align-items: start; }
  .chapter-row__art { align-self: center; }
  /* Below the fixed desktop action column, actions keep their natural width under the copy. */
  .chapter-row__action > .btn, .chapter-row__action [data-reminder-toggle] { width: auto; }
  .chapter-row:has([data-reminder-form]:not([hidden])) { grid-template-areas: "art body" "action action"; }
  .chapter-row--quiet { grid-template-areas: "art body"; align-items: center; }
  .history--split .history__grid { grid-template-columns: minmax(0, 1fr); }
  .history__sources { max-width: 68ch; }
}
@media (max-width: 860px) {
  .detail-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); }
  .detail-hero__title { font-size: clamp(30px, 4.5vw, 40px); }
  .detail-hero__copy { font-size: 16px; }
}
@media (max-width: 700px) {
  .detail-page { --section-gap: var(--s-10); }
  .detail-hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .detail-hero__art { grid-row: 1; grid-column: 1; border-radius: var(--r-lg); }
  .detail-hero__text { grid-row: 2; grid-column: 1; padding: var(--s-5) 0 0; }
  .detail-hero__kicker { font-size: 13px; }
  .detail-hero__title { font-size: clamp(32px, 9vw, 46px); }
  .detail-hero__copy { margin-top: var(--s-3); }
  .detail-hero__actions { margin-top: var(--s-5); }
  .detail-hero__actions > .btn, .detail-hero__actions [data-reminder-toggle], .detail-hero__actions [data-reminder-cancel] { flex: 1 1 140px; max-width: 320px; padding-inline: var(--s-4); }
  /* Outranks the generic .player-reminder .btn { max-width: 100% } so a lone Follow never spans the screen. */
  .detail-hero__actions .player-reminder .btn { max-width: 320px; }
  /* Phones: thumbnail beside the kicker and title; summary and action use the card's full width. */
  .chapter-row, .chapter-row--quiet, .chapter-row:has([data-reminder-form]:not([hidden])) { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art kicker" "art title" "summary summary" "action action"; align-items: start; gap: var(--s-1) var(--s-3); padding: var(--s-3); }
  .chapter-row__body { display: contents; }
  .chapter-row__art { align-self: center; }
  .chapter-row__kicker { grid-area: kicker; align-self: end; margin: 0; }
  .chapter-row__title { grid-area: title; }
  .chapter-row__summary { grid-area: summary; max-width: none; margin-top: var(--s-2); font-size: 14px; }
  .chapter-row__action { margin-top: var(--s-2); }
  .chapter-row__number { font-size: 26px; left: var(--s-2); }
  .chapter-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .chapter-nav__link--all { grid-column: 1 / -1; grid-row: 2; }
  .chapter-nav__link--next { grid-column: 2; }
  .opening-dialog { padding: var(--s-10) var(--s-4) var(--s-5); }
  .opening-dialog .age-gate { padding: var(--s-6) var(--s-4); }
}
@media (max-width: 380px) {
  .detail-hero__actions > .btn, .detail-hero__actions [data-reminder-toggle] { flex-basis: 100%; }
  .chapter-row, .chapter-row--quiet, .chapter-row:has([data-reminder-form]:not([hidden])) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kicker" "title" "summary" "action"; }
  .chapter-row__art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-row, .chapter-row__title a { transition: none; }
}

/* ---------- Sources, opening, settings, errors ---------- */
.source-list { display: grid; gap: var(--s-3); margin: var(--s-6) 0; }
.source-list__empty { margin: 0; padding: var(--s-6); border-radius: var(--r-lg); color: var(--c-text-2); box-shadow: inset 0 0 0 1px var(--c-line); }
.source { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); text-align: left; }
.source__index { color: var(--c-gold); font: var(--fw-display) 28px/1 var(--font-display); }
.source h3 { margin: 0; font-size: 22px; line-height: 1.25; overflow-wrap: break-word; }
.source p { margin: 6px 0 0; color: var(--c-muted); font-size: 14px; }
.source a { margin-top: var(--s-1); color: var(--c-gold-ink); font-size: 15px; font-weight: 600; }
.opening { margin-top: var(--s-4); }
.opening video { width: 100%; margin-top: var(--s-4); aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: #000; }
.setting-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 56px; border-top: 1px solid var(--c-line); color: var(--c-text-2); }
.setting-line input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--c-gold); }
.setting-line input[type="range"] { width: min(240px, 50%); accent-color: var(--c-gold); }
.error-page { display: grid; justify-items: center; align-content: center; min-height: 60vh; text-align: center; }
.error-page__code { margin: 0; color: rgb(212 152 47 / .25); font: var(--fw-display) clamp(96px, 16vw, 180px)/.9 var(--font-display); }
.error-page .lead { margin-bottom: var(--s-6); }

/* ---------- Support & inquiries ---------- */
.completion-support { margin-top: var(--s-6); padding: var(--s-4); border-top: 1px solid var(--c-line-gold); }
.completion-support > p { margin: 0 0 var(--s-3); color: var(--c-text-2); }
.site-footer__support { max-width: 40ch; border-left: 2px solid var(--c-gold); padding-left: var(--s-4); }
.site-footer__support > p:first-child { margin: 0 0 var(--s-3); font: var(--fw-display) 20px/1.25 var(--font-display); }
.site-footer__support .modal__note { margin: var(--s-2) 0 0; }
.support-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.support-actions .btn { min-height: 44px; }
.partner-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.has-open-modal { overflow: hidden; }
.feedback-form .field { display: grid; gap: var(--s-2); }
.feedback-form .field :is(input, select, textarea) { width: 100%; min-height: 44px; font: inherit; padding: 10px 12px; color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); }
.feedback-form .field :is(input, select, textarea):focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
/* Safari's native menulist ignores min-height (23px target); draw the chevron ourselves. */
.feedback-form .field select { -webkit-appearance: none; appearance: none; padding-right: 40px; background: var(--c-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4a017' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
/* ---------- Modals ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: max(var(--s-4), env(safe-area-inset-top)) max(var(--s-4), env(safe-area-inset-right)) max(var(--s-4), env(safe-area-inset-bottom)) max(var(--s-4), env(safe-area-inset-left)); overflow-y: auto; background: var(--c-overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: var(--s-10) var(--s-8) var(--s-8); border-radius: var(--r-xl); background: linear-gradient(180deg, #2a0a08, var(--c-bg) 60%); box-shadow: inset 0 0 0 1px var(--c-line-gold), 0 40px 80px -30px #000; }
.modal h2 { font-family: var(--font-display); font-weight: var(--fw-display); margin: var(--s-2) 0 var(--s-3); font-size: clamp(30px, 4vw, 40px); line-height: 1.05; }
.modal > p { margin: 0 0 var(--s-3); color: var(--c-text-2); line-height: 1.6; }
/* The heading owns this gap; do not combine it with the generic paragraph margin. */
.modal > .eyebrow { margin: 0; color: var(--c-gold); line-height: 1.4; }
.modal__note { color: var(--c-muted); font-size: 14px; line-height: 1.6; }
.modal > .modal__note { padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.modal > .btn { margin-top: var(--s-3); }
.modal__close { position: absolute; top: var(--s-3); right: var(--s-3); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-text-2); }
.modal__close:hover { color: var(--c-gold-ink); background: rgb(244 234 214 / .06); }
/* Keep the final action clear of the dialog edge, including iPhone safe areas.
   Internal scrolling preserves the gap even in short landscape viewports. */
.feedback-modal { padding-bottom: max(var(--s-10), calc(env(safe-area-inset-bottom) + var(--s-6))); scroll-padding-block: var(--s-6); overscroll-behavior: contain; }
.feedback-form > .btn { margin-top: var(--s-2); }
.feedback-form { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.feedback-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.feedback-form legend { margin-bottom: var(--s-3); padding: 0; font-weight: 700; }
.feedback-form fieldset .modal__note { margin: calc(-1 * var(--s-2)) 0 var(--s-3); }
.choice-grid { display: flex; flex-wrap: wrap; gap: var(--s-2); color: var(--c-muted); font-size: 14px; }
.choice-grid label { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 8px 14px; border-radius: var(--r-pill); color: var(--c-text-2); box-shadow: inset 0 0 0 1px var(--c-line-strong); cursor: pointer; transition: background-color .2s, box-shadow .2s, color .2s; }
.choice-grid input { width: 16px; height: 16px; margin: 0; accent-color: var(--c-gold); }
.choice-grid label:has(input:checked) { background: rgb(212 152 47 / .14); box-shadow: inset 0 0 0 1px var(--c-gold); color: var(--c-text); }
.choice-grid label:has(input:focus-visible) { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.feedback-form .btn { justify-self: start; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: var(--s-6); transform: translateX(-50%); padding: var(--s-3) var(--s-5); border-radius: var(--r-md); background: var(--c-parchment); color: var(--c-bg); font-weight: 600; box-shadow: var(--shadow-lift); }

/* ---------- Fictional quote banner ---------- */
/* The gallery of history's figures (B2): a gold cameo and museum nameplate beside an imagined, labelled quote,
   on the cinematic burgundy ground of the approved reference. */
.quotes { margin-top: clamp(48px, 6vw, 80px); border-block: 1px solid rgb(212 152 47 / .18); background: radial-gradient(52% 120% at 20% 50%, rgb(122 18 25 / .42), rgb(122 18 25 / 0) 72%), radial-gradient(40% 90% at 88% 30%, rgb(176 122 30 / .1), rgb(176 122 30 / 0) 70%), var(--c-bg-deep); }
.quotes__inner { width: var(--shell); margin-inline: auto; padding-block: var(--s-10) var(--s-8); }
.quotes__title { margin: var(--s-2) 0 0; color: var(--c-text); font: var(--fw-display) clamp(26px, 2.5vw, 34px)/1.1 var(--font-display); letter-spacing: 0; text-transform: none; }
.cm-quote-stage { display: grid; margin-top: var(--s-6); }
.cm-quote { grid-area: 1 / 1; min-height: 260px; margin: 0; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.cm-quote.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.cm-quote-cameo { display: grid; justify-items: center; gap: var(--s-5); min-width: 0; }
.cm-quote-portrait-wrap { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--brand-burgundy), var(--brand-burgundy-deep) 70%); color: rgb(212 152 47 / .45); font: var(--fw-display) 72px/1 var(--font-display); box-shadow: 0 0 0 3px var(--c-gold), 0 0 0 9px var(--brand-burgundy-deep), 0 0 0 10px rgb(212 152 47 / .55), 0 24px 50px rgb(0 0 0 / .6); }
.cm-quote-portrait-wrap > span i { font-style: normal; color: var(--c-gold); }
.cm-quote-portrait-wrap:has(.cm-quote-portrait:not(.is-broken)) > span { visibility: hidden; }
.cm-quote-portrait.is-broken { display: none; }
.cm-quote-portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: inherit; }
.cm-quote-nameplate { display: grid; justify-items: center; gap: 2px; margin: 0; padding: 8px 18px 7px; border-radius: 4px; background: linear-gradient(180deg, var(--c-surface-3), var(--c-surface)); box-shadow: inset 0 0 0 1px var(--c-line-gold), 0 6px 14px rgb(0 0 0 / .45); text-align: center; }
.cm-quote-nameplate b { color: var(--brand-parchment); font: 700 18px/1.15 var(--font-display); }
.cm-quote-nameplate span { color: var(--c-muted); font: 700 10px/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.cm-quote-label { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); color: var(--c-gold-ink); box-shadow: inset 0 0 0 1px var(--c-line-gold); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cm-quote blockquote { position: relative; margin: var(--s-4) 0; }
.cm-quote blockquote::before { content: "\201C"; display: block; height: .5em; color: var(--c-gold); font: 900 clamp(72px, 7vw, 112px)/1 var(--font-display); }
.cm-quote blockquote p { margin: 0; max-width: 28ch; font: var(--fw-display) clamp(26px, 2.8vw, 40px)/1.2 var(--font-display); text-wrap: balance; }
.cm-quote figcaption { color: var(--c-text-2); font-size: 15px; }
.cm-quote figcaption span { color: var(--c-muted); font-style: italic; }
.cm-quote-controls { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-2); color: var(--c-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px), (pointer: coarse) { .cm-quote-controls .icon-btn { width: 44px; height: 44px; } }
.quotes__empty { color: var(--c-muted); }
.carousel-toggle__play, [data-carousel-toggle][data-paused] .carousel-toggle__pause { display: none; }
[data-carousel-toggle][data-paused] .carousel-toggle__play { display: contents; }
.carousel-toggle__pause { display: contents; }

/* ---------- Age gate ---------- */
.age-gate { max-width: 640px; margin: var(--s-10) auto; padding: var(--s-10) var(--s-8); border-radius: var(--r-xl); text-align: center; background: linear-gradient(180deg, #2a0a08, var(--c-bg)); box-shadow: inset 0 0 0 1px var(--c-line-gold); }
.age-gate__mark { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--s-4); border-radius: 50%; color: var(--c-gold); box-shadow: inset 0 0 0 1px var(--c-line-gold); font: var(--fw-display) 26px/1 var(--font-display); }
.age-gate h1 { margin: var(--s-2) 0 var(--s-3); font: var(--fw-display) clamp(28px, 4vw, 40px)/1.1 var(--font-display); text-wrap: balance; }
.age-gate > p:not(.eyebrow) { margin: 0 0 var(--s-6); color: var(--c-text-2); line-height: 1.65; }
.age-gate .btn-row { justify-content: center; }
.age-gate__noscript { margin: 0 0 var(--s-6); color: var(--c-gold-ink); line-height: 1.6; }

/* ---------- Player ---------- */
.player-page { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; padding-block: var(--s-5) var(--s-12); font-family: var(--font-ui); color: var(--c-text); }
.player-page :where(h1, h2, h3) { font-family: var(--font-display); font-weight: var(--fw-display); }
.player-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-5); }
.player-title__exit { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.player-title__exit:hover { color: var(--c-gold-ink); box-shadow: inset 0 0 0 1px var(--c-gold); }
.player-title__text { flex: 1 1 280px; min-width: 0; }
.player-title__game { margin: 0; color: var(--c-gold-ink); font-size: 14px; font-weight: 600; }
.player-title__game span { color: var(--c-muted); font-weight: 500; }
.player-title h1 { margin: 2px 0 0; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; overflow-wrap: break-word; }
.player-steps { list-style: none; display: flex; gap: 2px; margin: 0; padding: var(--s-1); border-radius: var(--r-pill); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); }
.player-steps li { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); color: var(--c-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.player-steps li b { color: var(--c-muted); font-variant-numeric: tabular-nums; opacity: .8; }
.player-steps li.active { background: var(--c-burgundy); color: var(--c-parchment); }
.player-steps li.active b { color: var(--c-gold-ink); opacity: 1; }
.game-journey { position: relative; }
/* Keep the server's default opening from flashing before local viewing history is read. */
.game-journey:not([data-player-ready]) [data-phase] { visibility: hidden; }
.phase { position: relative; isolation: isolate; display: grid; place-items: center; min-height: clamp(420px, 60vh, 640px); padding: var(--s-12) var(--s-6); overflow: hidden; border-radius: var(--r-xl); text-align: center; background: var(--c-bg-deep); box-shadow: inset 0 0 0 1px var(--c-line); }
.phase__art { position: absolute; inset: 0; z-index: -2; }
.phase__art .art__fallback { opacity: .35; }
.phase__shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgb(27 16 14 / .62), rgb(27 16 14 / .94) 72%), linear-gradient(0deg, var(--c-bg-deep), transparent 50%); }
.phase__content { display: grid; justify-items: center; gap: var(--s-4); width: 100%; max-width: 680px; }
.phase__content:has(video) { max-width: 920px; }
.phase h2 { margin: 0; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; text-wrap: balance; }
.phase h2 span { color: var(--c-gold); }
.phase__content > p:not(.eyebrow) { margin: 0; max-width: 46ch; color: var(--c-text-2); font-size: 17px; line-height: 1.6; }
.phase__content > .btn { margin-top: var(--s-3); }
.phase__content > .btn-row { justify-content: center; margin-top: var(--s-3); }
/* Touch compatibility: unsupported is the only warning; unknown is stated plainly, not as a guess. */
.compat { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 10px; border-radius: var(--r-pill); font: 600 12px/1.2 var(--font-ui); letter-spacing: .03em; white-space: nowrap; color: var(--c-text-2); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.compat--desktop { color: var(--c-error); box-shadow: inset 0 0 0 1px rgb(255 180 168 / .5); }
.compat--untested { color: var(--c-muted); box-shadow: inset 0 0 0 1px var(--c-line); }
.phase__content > p.compat-note--unsupported { color: var(--c-error); }
.phase video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: #000; }
.reaction { display: grid; justify-items: center; gap: var(--s-3); margin-top: var(--s-2); padding: var(--s-4) var(--s-6); border-radius: var(--r-lg); background: rgb(17 9 8 / .55); box-shadow: inset 0 0 0 1px var(--c-line); }
.reaction__prompt { margin: 0; color: var(--c-text-2); font-weight: 600; }
.reaction__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.reaction__btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 8px 18px; border-radius: var(--r-pill); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line-strong); font-weight: 600; transition: background-color .2s, box-shadow .2s, color .2s; }
.reaction__btn:hover:not(:disabled) { color: var(--c-gold-ink); box-shadow: inset 0 0 0 1px var(--c-gold); background: rgb(212 152 47 / .1); }
.reaction__status { margin: 0; min-height: 1.4em; color: var(--c-gold-ink); font-size: 14px; }
.reaction__status:empty { display: none; }
.chapter-completion .completion-name { font-size: 18px; }
.chapter-completion .reaction small { max-width: 32ch; color: var(--c-text-2); font-size: 12px; }
/* Game-level discovery at the end of a play-through. */
.completion-related { width: min(100%, 520px); margin-top: var(--s-4); text-align: left; }
.completion-related h3 { margin: 0 0 var(--s-2); color: var(--c-gold-ink); font: 600 13px/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.completion-related ul { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.completion-related a { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 8px 14px; border-radius: var(--r-md); background: rgb(240 230 210 / .05); box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-text); font: 400 18px/1.2 var(--font-display); text-decoration: none; }
.completion-related a:hover { box-shadow: inset 0 0 0 1px var(--c-line-gold); }
.completion-related small { color: var(--c-muted); font: 400 13px/1.3 var(--font-ui); }
.reaction__btn[aria-pressed="true"] { color: var(--c-gold-ink); background: rgb(212 152 47 / .15); box-shadow: inset 0 0 0 2px var(--c-gold); }
.completion-feedback { width: min(100%, 480px); text-align: left; color: var(--c-text-2); }
.completion-feedback summary { cursor: pointer; min-height: 44px; padding: 12px 0; text-align: center; }
.completion-feedback summary span { font-size: 12px; }
.completion-feedback form { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: rgb(17 9 8 / .8); }
.completion-feedback fieldset { min-width: 0; border: 0; padding: 0; }
.completion-feedback legend { margin-bottom: var(--s-2); }
.completion-feedback [data-chapter-features] { display: grid; gap: var(--s-1); }
.completion-feedback [data-chapter-features] label { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; }
.completion-feedback textarea { width: 100%; }
/* Follow controls keep their natural width (never a stretched column); notes,
   the email form and status messages each take their own line. */
.player-reminder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; }
.player-reminder > :not(button) { flex: 1 1 100%; min-width: 0; }
.player-reminder [data-reminder-status]:empty { display: none; }
/* One delivery note per page; the open form carries its own, and an unavailable
   service does not advertise what it cannot do. */
.player-reminder:has([data-reminder-form]:not([hidden])) [data-reminder-delivery-note],
.player-reminder:is([data-following="unavailable"], [data-following="error"]) [data-reminder-delivery-note] { display: none; }
.player-reminder [role="status"] { margin: 0; max-width: 60ch; color: var(--c-text-2); font-size: 14px; }
.player-reminder .reminder-form { min-width: 0; }
.player-reminder .reminder-form > p { flex-basis: 100%; }
.player-reminder .btn { white-space: normal; max-width: 100%; }
.my-reminders { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.my-reminders > li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
[data-verify-email] form { display: grid; gap: var(--s-4); margin: var(--s-4) 0; }
[data-verify-email] input { width: 100%; }
[data-verify-email] form > .btn, .completion-feedback form > .btn { justify-self: start; }
@media (max-width: 600px) { .my-reminders > li { align-items: stretch; flex-direction: column; } }
.completion-feedback [role="status"] { margin: 0; font-size: 14px; }
.wh-game { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); background: #0d0202; box-shadow: inset 0 0 0 1px var(--c-line), var(--shadow-lift); }
.game-frame { position: relative; height: min(70vh, 680px); min-height: 400px; background: #000; }
.game-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.game-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-6); text-align: center; background: radial-gradient(ellipse at center, rgb(42 10 8 / .96), rgb(13 2 2 / .98)); }
.game-overlay[hidden] { display: none; }
.game-overlay h2 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); }
.game-overlay p { margin: 0 0 var(--s-2); color: var(--c-muted); font-size: 15px; }
.loader { width: 32px; height: 32px; border: 2px solid rgb(212 152 47 / .25); border-top-color: var(--c-gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.game-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); min-height: 56px; padding: var(--s-2) var(--s-4); border-top: 1px solid var(--c-line); background: var(--c-surface); }
.game-toolbar__status { color: var(--c-muted); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.game-toolbar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.game-toolbar__volume { display: inline-flex; align-items: center; gap: var(--s-2); margin-right: var(--s-2); color: var(--c-text-2); font-size: 14px; }
.game-toolbar__volume input { width: 96px; height: 40px; accent-color: var(--c-gold); }
.game-completion-notice { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-line); background: rgb(17 9 8 / .82); }
.game-completion-notice p { margin: 0; color: var(--c-text-2); font-size: 14px; }
.game-completion-notice__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
.tool-btn { min-height: 40px; padding: 8px 14px; border-radius: var(--r-md); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line-strong); font-size: 14px; font-weight: 600; transition: box-shadow .2s, color .2s; }
.tool-btn:hover { color: var(--c-gold-ink); box-shadow: inset 0 0 0 1px var(--c-gold); }
.game-toolbar__note { color: var(--c-muted); font-size: 13px; }
.game-toolbar__note:empty { display: none; }
.wh-game:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.wh-game:fullscreen .game-frame { flex: 1; height: auto; }
.sources-panel { max-width: 860px; margin: 0 auto; padding: var(--s-10) 0; text-align: center; }
.sources-panel h2 { margin: var(--s-2) 0 0; font-size: clamp(34px, 4.4vw, 52px); }
.sources-panel .btn-row { justify-content: center; }

/* ---------- Responsive ---------- */
/* Poster shelves show whole cards from tablet up (3, 4, 5, then 6 as in the approved reference); wide shelves
   show 2, 3, then 4. Phones keep a next-card peek inside the shelf bounds to advertise swiping. */
@media (min-width: 480px) { .shelf { --card-w: calc((var(--shelf-w) - 2 * var(--card-gap)) / 2.4); } }
@media (min-width: 701px) { .shelf { --card-w: calc((var(--shelf-w) - 2 * var(--card-gap)) / 3); } .shelf--wide { --card-w: calc((var(--shelf-w) - var(--card-gap)) / 2); } }
@media (min-width: 900px) { .shelf { --card-gap: 20px; --card-w: calc((var(--shelf-w) - 3 * var(--card-gap)) / 4); } .shelf--wide { --card-w: calc((var(--shelf-w) - var(--card-gap)) / 2); } }
@media (min-width: 1100px) { .shelf { --card-w: calc((var(--shelf-w) - 4 * var(--card-gap)) / 5); } .shelf--wide { --card-w: calc((var(--shelf-w) - 2 * var(--card-gap)) / 3); } }
@media (min-width: 1400px) { .shelf { --card-w: calc((var(--shelf-w) - 5 * var(--card-gap)) / 6); } .shelf--wide { --card-w: calc((var(--shelf-w) - 3 * var(--card-gap)) / 4); } }

@media (max-width: 1080px) {
  .site-header__inner { gap: var(--s-5); }
  .site-nav__link { padding-inline: 10px; }
}
@media (max-width: 960px) {
  .player-steps { order: 3; width: 100%; justify-content: space-between; }
}
@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .nav-toggle { display: grid; margin-left: var(--s-2); }
  .site-header__search { display: grid; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--s-3) var(--gutter) var(--s-5); background: rgb(17 9 8 / .98); box-shadow: 0 30px 40px -20px #000; }
  .site-nav.is-open { display: flex; }
  .site-nav__link { min-height: 48px; padding: 12px 14px; border-radius: var(--r-md); font-size: 17px; }
  .site-nav__search { margin-inline: 0; background: none; box-shadow: none; }
  .site-nav__settings { width: auto; margin-left: 0; padding: 12px 14px; justify-content: flex-start; }
  .site-nav__settings-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .wh-app:has(.hero) .site-header:has(.site-nav.is-open) { background: rgb(17 9 8 / .98); }
  .wh-brand__medallion { width: 42px; height: 42px; }
  .wh-brand__scroll { margin-left: -10px; padding: 6px 11px 6px 17px; font-size: 18px; }
}
@media (max-width: 700px) {
  .hero { min-height: 0; }
  .hero__art { inset: 0 0 auto 0; height: min(118vw, 500px); }
  .hero__art .art__img { object-position: 50% 30%; }
  .hero__shade { background:
    radial-gradient(ellipse 70% 32% at 50% min(56vw, 240px), rgb(74 10 14 / .8) 0%, rgb(42 8 9 / .45) 60%, rgb(17 9 8 / 0) 100%),
    linear-gradient(180deg, rgb(17 9 8 / .55) 0%, rgb(17 9 8 / 0) 22%),
    linear-gradient(0deg, var(--c-bg) 0, var(--c-bg) calc(100% - min(118vw, 500px)), rgb(17 9 8 / .7) calc(100% - min(118vw, 500px) + 90px), rgb(17 9 8 / 0) calc(100% - min(118vw, 500px) + 220px)); }
  .hero__content { grid-template-rows: auto auto; gap: var(--s-6); padding-block: max(var(--s-10), calc(min(118vw, 500px) - var(--header-h) - 250px)) var(--s-8); }
  .hero-lockup__medallion { width: clamp(84px, 24vw, 108px); }
  .hero-lockup__scroll { font-size: clamp(30px, 10.4vw, 46px); padding-inline: clamp(20px, 6vw, 30px); }
  .hero__ribbon { padding-inline: 32px; font-size: clamp(14px, 4.2vw, 17px); }
  .hero__foot { justify-items: stretch; gap: var(--s-5); }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .hero__featured { justify-content: center; text-align: center; }
  .hero + .shelves { margin-top: 0; }
  /* With no arrow controls, a next-card peek advertises native swiping.
     Keep it inside the bounded scrollport, never in the outer page gutters. */
  .shelf__controls { display: none; }
  .shelf__track { scrollbar-width: none; }
  .shelf__track::-webkit-scrollbar { display: none; }
  /* MOB-05, option A: the whole square portrait, centred at about 240px, above centred copy. */
  .cm-quote { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); justify-items: center; text-align: center; }
  .cm-quote-portrait-wrap { width: min(240px, 68vw); }
  .cm-quote blockquote p { margin-inline: auto; }
  .cm-quote-controls { justify-content: center; }

  .modal { padding: var(--s-10) var(--s-5) var(--s-6); }
  .feedback-modal { padding-bottom: max(var(--s-10), calc(env(safe-area-inset-bottom) + var(--s-6))); }
  .search-box { height: 56px; padding-inline: var(--s-4); }
  .search-box input { font-size: 18px; }
  .source { padding: var(--s-4); gap: var(--s-4); }
  .game-frame { height: min(74vh, 620px); min-height: 360px; }
  .game-completion-notice { align-items: stretch; flex-direction: column; }
  .game-completion-notice__actions { width: 100%; }
  .game-completion-notice .tool-btn { flex: 1 1 160px; }
  .phase { min-height: 440px; padding: var(--s-10) var(--s-4); }
  .player-steps span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .player-steps li { flex: 1; justify-content: center; }
  .game-toolbar { padding: var(--s-2) var(--s-3); }
}
@media (max-width: 380px) {
  .wh-brand__scroll { font-size: 16px; padding-inline: 15px 9px; }
  .btn--lg { padding-inline: var(--s-4); }
  .game-card__foot { flex-wrap: wrap; }
}

/* Phones held sideways (MOB-04, MOB-12). The step bar and game line collapse, the game panel fills the dynamic
   viewport inside the safe areas with its toolbar on screen, and openings fit. Desktop heights never match. */
@media (orientation: landscape) and (max-height: 500px) {
  .player-page { padding-block: var(--s-2) var(--s-6); }
  .player-title { flex-wrap: nowrap; gap: var(--s-3); margin-bottom: var(--s-2); }
  .player-title__game, .player-steps { display: none; }
  .player-title h1 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wh-game { height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .game-frame { flex: 1; height: auto; min-height: 0; }
  .game-toolbar { min-height: 0; padding: var(--s-1) var(--s-3); padding-bottom: max(var(--s-1), env(safe-area-inset-bottom)); }
  .game-toolbar__status { font-size: 12px; }
  .tool-btn { min-height: 40px; padding-block: 6px; }
  .phase { min-height: 0; padding: var(--s-5) var(--s-4); }
  .phase h2 { font-size: clamp(24px, 4vw, 34px); }
  .phase video { max-height: 52dvh; }
  .phase__content { gap: var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .game-card__link:hover, .game-card__link:focus-visible, .btn--primary:hover { transform: none; }
  .game-card__link:hover .art__img, .game-card__link:focus-visible .art__img { transform: none; }
}

/* Owner control room: a restrained editorial operations surface. */
.admin-body { --admin-bg:#130505; --admin-panel:#210909; --admin-line:#5e2924; --admin-gold:#d4a017; --admin-paper:#f0e6d2; --admin-muted:#b99d8b; margin:0; min-height:100vh; color:var(--admin-paper); background:radial-gradient(circle at 85% 0,#6d16162e,transparent 34%),linear-gradient(145deg,#130505,#260909 60%,#130505); font-family:"DM Sans",sans-serif; }
.admin-body :is(h1,h2,h3) { font-family:"Libre Caslon Display",Georgia,serif; font-weight:400; }
.admin-body :is(input,textarea,select,button) { font:inherit; }
.admin-header { min-height:72px; padding:0 max(24px,calc((100vw - 1280px)/2)); display:flex; align-items:center; justify-content:space-between; gap:25px; border-bottom:1px solid var(--admin-line); background:#130505e8; position:sticky; top:0; z-index:10; backdrop-filter:blur(16px); }
.admin-brand { display:flex; align-items:center; gap:12px; color:var(--admin-paper); text-decoration:none; font-size:10px; letter-spacing:.19em; }
.admin-brand span,.admin-seal { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--admin-gold); color:var(--admin-gold); font:700 19px "Libre Caslon Display",Georgia,serif; letter-spacing:-.12em; padding-right:4px; transform:rotate(-4deg); }
.admin-monogram { color:var(--admin-gold); }
.admin-header nav { display:flex; align-items:center; gap:22px; }
.admin-header nav a,.admin-header nav button { padding:9px 0; color:var(--admin-muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; }
.admin-header nav a:hover,.admin-header nav button:hover { color:var(--admin-gold); }
.admin-header nav form { margin:0; }
.admin-main { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:58px 0 90px; }
.admin-title { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:35px; }
.admin-title h1,.admin-error h1 { font-size:clamp(48px,7vw,82px); line-height:.95; letter-spacing:-.045em; margin:10px 0 12px; }
.admin-title p:not(.admin-kicker),.admin-error>p { max-width:620px; color:var(--admin-muted); line-height:1.7; }
.admin-kicker { margin:0; color:var(--admin-gold); font-size:9px; font-weight:700; letter-spacing:.2em; }
.admin-primary { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:12px 19px; border:1px solid var(--admin-gold); background:var(--admin-gold); color:var(--admin-bg); text-decoration:none; font-size:11px; font-weight:700; white-space:nowrap; }
.admin-primary:hover { background:var(--admin-paper); border-color:var(--admin-paper); }
.admin-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) 2fr; gap:14px; margin-bottom:38px; }
.admin-stats article { min-height:145px; padding:24px; border:1px solid var(--admin-line); background:#210909b8; display:flex; flex-direction:column; justify-content:space-between; }
.admin-stats span { color:var(--admin-gold); font:52px/1 "Libre Caslon Display",Georgia,serif; }
.admin-stats p { margin:0; color:var(--admin-muted); font-size:11px; line-height:1.6; }
.admin-stats b { color:var(--admin-paper); font-size:15px; }
.admin-panel { padding:28px; border:1px solid var(--admin-line); background:#210909c4; }
.admin-panel-head { display:flex; justify-content:space-between; align-items:end; gap:20px; padding-bottom:19px; border-bottom:1px solid var(--admin-line); }
.admin-panel-head h2,.admin-hero-preview h2 { font-size:34px; margin:7px 0 0; }
.admin-panel-head>a { color:var(--admin-gold); font-size:11px; }
.admin-order,.admin-members ol { list-style:none; margin:0; padding:0; }
.admin-order li,.admin-members li { display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:18px; padding:18px 0; border-bottom:1px solid #5e292488; }
.admin-order li>span,.admin-members li>span { color:var(--admin-gold); font:27px "Libre Caslon Display",Georgia,serif; }
.admin-order b,.admin-members b { display:block; font-size:14px; }
.admin-order small,.admin-members small,.admin-table small { display:block; margin-top:5px; color:var(--admin-muted); font-size:10px; }
.admin-notice { padding:13px 16px; margin:0 0 22px; border-left:3px solid #6fa46d; background:#203a2055; color:#cfe1c9; font-size:12px; }
.admin-alert { padding:16px 18px; margin:18px 0 24px; border:1px solid #c25f4f; border-left:3px solid #d56b58; background:#501b1788; color:#f2d6cd; font-size:12px; line-height:1.6; }
.admin-alert ul { margin:8px 0 0; padding-left:18px; }
.admin-table-wrap { overflow-x:auto; border:1px solid var(--admin-line); background:#210909b8; }
.admin-table { width:100%; border-collapse:collapse; text-align:left; }
.admin-table th { padding:13px 18px; border-bottom:1px solid var(--admin-line); color:var(--admin-gold); font-size:9px; letter-spacing:.16em; text-transform:uppercase; }
.admin-table td { padding:18px; border-bottom:1px solid #5e292477; font-size:12px; vertical-align:top; }
.admin-table td:last-child { text-align:right; }
.admin-table a { color:var(--admin-gold); }
.admin-table code { color:#dfc9b9; font-size:10px; }
.admin-status { display:inline-flex; padding:5px 8px; border:1px solid var(--admin-line); font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.admin-back { display:inline-flex; margin-bottom:30px; color:var(--admin-muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.admin-form { display:grid; gap:18px; }
.admin-form-section { display:grid; grid-template-columns:minmax(210px,.7fr) minmax(0,1.7fr); gap:42px; padding:30px; border:1px solid var(--admin-line); background:#210909c4; }
.admin-form-section h2 { margin:8px 0 12px; font-size:31px; }
.admin-form-section>div:first-child>p:last-child { color:var(--admin-muted); font-size:11px; line-height:1.7; }
.admin-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.admin-fields label,.admin-add-member label,.admin-hero-setting form label,.admin-login label { display:flex; flex-direction:column; gap:8px; color:var(--admin-muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.admin-fields .span-2 { grid-column:1/-1; }
.admin-body :is(input,textarea,select) { width:100%; border:1px solid var(--admin-line); border-bottom-color:#a76a45; border-radius:0; padding:12px 13px; background:#130505; color:var(--admin-paper); outline:none; }
.admin-body :is(input,textarea,select):focus { border-color:var(--admin-gold); box-shadow:0 0 0 1px var(--admin-gold); }
.admin-body input:disabled { opacity:.6; }
.admin-code { min-height:440px; resize:vertical; font:11px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace !important; tab-size:2; }
.admin-check { flex-direction:row !important; align-items:center; }
.admin-check input { width:18px; height:18px; accent-color:var(--admin-gold); }
.admin-form-actions { display:flex; align-items:center; gap:20px; padding:12px 0 25px; }
.admin-form-actions a { color:var(--admin-muted); font-size:11px; }
.admin-collection-list { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.admin-collection-list>li { display:grid; grid-template-columns:110px 1fr auto; align-items:center; gap:26px; padding:24px; border:1px solid var(--admin-line); background:#210909bd; }
.admin-collection-list h2 { margin:5px 0 7px; font-size:30px; }
.admin-collection-list p:not(.admin-kicker) { margin:0 0 9px; color:var(--admin-muted); font-size:12px; }
.admin-collection-list small { color:var(--admin-gold); font-size:10px; }
.admin-collection-list>li>a { color:var(--admin-gold); font-size:11px; }
.admin-collection-order { display:flex; align-items:center; gap:17px; }
.admin-collection-order>span { color:var(--admin-gold); font:38px "Libre Caslon Display",Georgia,serif; }
.admin-collection-order form { display:inline; }
.admin-collection-order button { width:28px; height:28px; border:1px solid var(--admin-line); color:var(--admin-gold); }
.admin-members { margin-top:28px; }
.admin-member-actions { display:flex; gap:6px; flex-wrap:wrap; }
.admin-member-actions form { margin:0; }
.admin-member-actions button { padding:7px 9px; border:1px solid var(--admin-line); color:var(--admin-muted); font-size:9px; }
.admin-member-actions .danger { color:#d99785; }
.admin-add-member { margin-top:25px; padding-top:24px; border-top:1px solid var(--admin-line); display:grid; grid-template-columns:1fr auto; align-items:end; gap:15px; }
.admin-empty { color:var(--admin-muted); }
.admin-hero-preview { display:grid; grid-template-columns:210px 1fr; gap:28px; align-items:center; margin-bottom:28px; }
.admin-hero-preview img { width:100%; aspect-ratio:16/10; object-fit:cover; border:1px solid var(--admin-line); }
.admin-hero-preview p:last-child { color:var(--admin-muted); line-height:1.6; }
.admin-hero-setting form { display:grid; grid-template-columns:1fr auto; align-items:end; gap:15px; padding-top:24px; border-top:1px solid var(--admin-line); }
.admin-error { min-height:55vh; display:flex; flex-direction:column; align-items:start; justify-content:center; }
.admin-login-body { display:grid; place-items:center; padding:24px; }
.admin-login { width:min(470px,100%); padding:42px; border:1px solid var(--admin-line); border-top:3px solid var(--admin-gold); background:#210909e8; box-shadow:0 30px 90px #0008; }
.admin-login .admin-seal { margin-bottom:34px; }
.admin-login h1 { margin:12px 0; font-size:58px; letter-spacing:-.045em; }
.admin-login>p:not(.admin-kicker) { color:var(--admin-muted); line-height:1.7; }
.admin-login form { margin-top:28px; display:grid; gap:16px; }
.admin-title-actions { display:flex; align-items:center; gap:18px; }
.admin-title-actions>a:not(.admin-primary) { color:var(--admin-gold); font-size:11px; }
.admin-file { display:grid; gap:8px; margin-top:24px; color:var(--admin-gold); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.admin-file input { padding:9px; }
.admin-file+small { display:block; margin-top:9px; color:var(--admin-muted); }
.admin-example { margin-top:28px; padding:22px; border:1px solid var(--admin-line); background:#21090988; }
.admin-example summary { cursor:pointer; color:var(--admin-gold); font-size:11px; font-weight:700; }
.admin-example p { color:var(--admin-muted); font-size:12px; }
.admin-example pre { max-height:360px; overflow:auto; padding:18px; background:#100303; border:1px solid var(--admin-line); color:#dfc9b9; font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }
.admin-example button,.admin-approval button:not(.admin-primary) { padding:11px 16px; border:1px solid var(--admin-line); color:var(--admin-paper); }
.admin-inferred { margin-bottom:22px; padding:22px; border-left:3px solid var(--admin-gold); background:#4b310d55; }
.admin-inferred ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 22px; margin:15px 0 0; padding:0; list-style:none; }
.admin-inferred li { display:flex; gap:10px; color:var(--admin-muted); font-size:11px; }
.admin-inferred code { color:var(--admin-gold); }
.admin-preview-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:18px; margin-bottom:18px; }
.admin-preview-list { display:grid; grid-template-columns:145px minmax(0,1fr); gap:0; margin:20px 0 0; }
.admin-preview-list dt,.admin-preview-list dd { margin:0; padding:11px 0; border-bottom:1px solid #5e292466; }
.admin-preview-list dt { color:var(--admin-muted); font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.admin-preview-list dd { overflow-wrap:anywhere; font-size:12px; line-height:1.55; }
.preview-subhead { margin-top:28px; }
.admin-tag-list { display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none; }
.admin-tag-list li { padding:7px 10px; border:1px solid var(--admin-line); color:var(--admin-gold); font-size:10px; text-transform:uppercase; }
.admin-preview-chapters { margin-bottom:18px; }
.admin-manifest-chapters { list-style:none; padding:0; margin:0; }
.admin-manifest-chapters>li { display:grid; grid-template-columns:52px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid var(--admin-line); }
.admin-manifest-chapters>li>span { color:var(--admin-gold); font:28px "Libre Caslon Display",Georgia,serif; }
.admin-manifest-chapters h3 { margin:0 0 6px; font-size:25px; }
.admin-manifest-chapters code { color:var(--admin-gold); font-size:11px; }
.admin-approval { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:24px 28px; border:1px solid var(--admin-gold); background:#35220755; }
.admin-approval p:not(.admin-kicker) { max-width:650px; color:var(--admin-muted); font-size:12px; line-height:1.6; }
.admin-approval .admin-form-actions { padding:0; margin:0; }
@media (max-width:800px) { .admin-header { position:static; padding:16px 20px; align-items:flex-start; }.admin-header nav { justify-content:flex-end; flex-wrap:wrap; gap:10px 16px; }.admin-brand b { display:none; }.admin-main { width:min(100% - 32px,1180px); padding-top:38px; }.admin-title { align-items:flex-start; flex-direction:column; }.admin-preview-grid { grid-template-columns:1fr; }.admin-inferred ul { grid-template-columns:1fr; }.admin-approval { align-items:flex-start; flex-direction:column; }.admin-stats { grid-template-columns:1fr 1fr; }.admin-stat-wide { grid-column:1/-1; }.admin-form-section { grid-template-columns:1fr; gap:18px; }.admin-collection-list>li { grid-template-columns:90px 1fr; }.admin-collection-list>li>a { grid-column:2; }.admin-member-actions { grid-column:2; }.admin-hero-preview { grid-template-columns:1fr; }.admin-hero-preview img { max-height:260px; }}
@media (max-width:520px) { .admin-header { flex-direction:column; }.admin-header nav { justify-content:flex-start; }.admin-stats,.admin-fields { grid-template-columns:1fr; }.admin-stat-wide,.admin-fields .span-2 { grid-column:auto; }.admin-panel,.admin-form-section,.admin-login { padding:22px; }.admin-collection-list>li { grid-template-columns:1fr; }.admin-collection-list>li>a { grid-column:auto; }.admin-add-member,.admin-hero-setting form { grid-template-columns:1fr; }.admin-order li,.admin-members li { grid-template-columns:42px 1fr; }}

/* Phones held upright see the collage's mosaic, which leaves out the painted tagline: set it in HTML after the
   actions, so the featured game and Play stay near the top of the screen. */
@media (max-width: 699px) and (orientation: portrait) {
  .hero--collage .hero__content { display: flex; flex-direction: column; gap: var(--s-6); padding-top: var(--s-4); }
  .hero--collage .hero__foot { gap: var(--s-4); }
  .hero--collage .hero__brand { order: 1; }
  .hero--collage .hero__ribbon { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%); filter: drop-shadow(0 8px 16px rgb(0 0 0 / .5)); }
  /* Short phones keep Play on the first screen: the mosaic is contained (never cropped) on the brand burgundy. */
  .hero-collage__img { width: min(100%, max(240px, calc((100svh - var(--header-h) - 230px) * 710 / 1029))); }
  .hero-collage__backdrop { display: none; }
}