/*
  Daricheh — one stylesheet, no build step.

  Direction: a game menu held to a product standard. The covers are the
  scene: full-bleed, alive, fading into the interface. The interface is
  near-black, cut from hairlines and bevelled corners, with corner brackets
  on whatever can be chosen, segmented meters and numbered sections, lit by
  one light — lantern amber, or a world's own colour on its pages.

  Rules
  - Every colour, size, radius and duration is a token in :root.
  - Layout uses logical properties only, so right-to-left Persian and a
    future left-to-right language share every rule.
  - No inline styles anywhere: the content security policy forbids them.
  - Bevelled corners are an enhancement (corner-shape): without it corners
    are square, never rounded, so the shapes stay one family.
  - Persian is never letter-spaced: it breaks the joins between letters.
*/

/* ================================================================ fonts */

@font-face {
  font-family: "Estedad";
  src: url("../fonts/estedad-arabic-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: "Estedad";
  src: url("../fonts/estedad-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* The logo's name: Noto Naskh Arabic Bold, cut down to the letters of «دریـچـه» by tools/make-icons.py.
   Three KB and preloaded, so it holds the space rather than flashing another face first. */
@font-face {
  font-family: "Daricheh Wordmark";
  src: url("../fonts/wordmark.woff2") format("woff2");
  font-weight: 700;
  font-display: block;
}

/* Two-digit Persian numbers for indexes: ۰۱، ۰۲ … */
@counter-style index {
  system: extends persian;
  pad: 2 "۰";
}

/* ================================================================ tokens */

:root {
  /* Ground: near-black with a warm cast, so the lantern reads as light. */
  --bg-0: #060607;
  --bg-1: #0b0b0d;
  --bg-2: #111114;
  --bg-3: #18181c;
  --bg-4: #222227;

  /* Hairlines, warm like the text */
  --line-1: rgb(255 248 235 / 0.06);
  --line-2: rgb(255 248 235 / 0.1);
  --line-3: rgb(255 248 235 / 0.17);
  --line-4: rgb(255 248 235 / 0.3);

  /* Text */
  --text-1: #f3f0ea;
  --text-2: #aaa59c;
  --text-3: #716d66;

  /* The one light. Inside a world, --accent takes over from it. */
  --signal: #f3b544;
  --signal-ink: #161003;
  --signal-soft: rgb(243 181 68 / 0.12);
  --signal-glow: rgb(243 181 68 / 0.45);
  /* The logo's own gold, softer than the signal: the frame of its doorway (tools/make-icons.py). */
  --champagne: #d2b07f;

  /* Meaning, used sparingly: safe, danger, discussion. */
  --good: #7dd3ae;
  --bad: #ff6370;
  --calm: #a4b4ff;

  --accent: var(--signal);
  --accent-deep: #a8702a;
  --accent-cool: #8d8678;
  --accent-soft: var(--signal-soft);
  --accent-glow: var(--signal-glow);
  --accent-ink: var(--signal-ink);

  --panel: rgb(12 12 14 / 0.74);
  --panel-strong: rgb(13 13 16 / 0.95);

  /* Corner brackets in currentColor at the four corners of a box. */
  --brackets:
    linear-gradient(currentColor 0 0) 0 0 / 14px 2px no-repeat,
    linear-gradient(currentColor 0 0) 0 0 / 2px 14px no-repeat,
    linear-gradient(currentColor 0 0) 100% 0 / 14px 2px no-repeat,
    linear-gradient(currentColor 0 0) 100% 0 / 2px 14px no-repeat,
    linear-gradient(currentColor 0 0) 0 100% / 14px 2px no-repeat,
    linear-gradient(currentColor 0 0) 0 100% / 2px 14px no-repeat,
    linear-gradient(currentColor 0 0) 100% 100% / 14px 2px no-repeat,
    linear-gradient(currentColor 0 0) 100% 100% / 2px 14px no-repeat;

  /* Type */
  --font-display: "Estedad", "Vazirmatn", system-ui, sans-serif;
  --font-body: "Vazirmatn", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  --size-2xs: 0.72rem;
  --size-xs: 0.78rem;
  --size-s: 0.875rem;
  --size-m: 1rem;
  --size-l: 1.125rem;
  --size-xl: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  --size-title: clamp(1.85rem, 1.1rem + 2.4vw, 3.1rem);
  --size-display: clamp(2.6rem, 1.2rem + 5vw, 6.25rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(4rem, 3rem + 4vw, 7rem);
  --space-9: clamp(5rem, 3.5rem + 5vw, 9rem);
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --width: 80rem;
  --hud-h: 4rem;
  /* The content column's distance from the viewport edge, for things placed inside full-bleed boxes. */
  --edge: max(var(--gutter), (100vw - var(--width)) / 2);

  /* Shape: bevel sizes, and the corner used where bevels are not supported. */
  --square: 2px;
  --cut-s: 6px;
  --cut: 10px;
  --cut-l: 16px;

  --shadow-deep: 0 30px 80px -30px rgb(0 0 0 / 0.9);
  /*
    Lit bars on the start side of a bevelled box are inset shadows, not
    borders: Chrome draws a stray line across a bevelled box whose borders
    differ. This is the bar's offset toward the start side.
  */
  --bar-x: 2px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fast: 140ms;
  --medium: 280ms;
  --slow: 700ms;
}
:root:dir(rtl) { --bar-x: -2px; }

/* ================================================================ base */

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem;
  /* A warm horizon over the ground, fixed while the page moves. */
  background: radial-gradient(80rem 34rem at 50% -6rem, rgb(243 181 68 / 0.07), transparent 65%) fixed, var(--bg-0);
}

body {
  margin: 0;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--size-m);
  line-height: 1.85;
  color: var(--text-1);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  counter-reset: block;
}

/* A faint survey grid under everything, fading out from the top. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(var(--line-1) 1px, transparent 1px) 50% 0 / 100% 88px,
    linear-gradient(90deg, var(--line-1) 1px, transparent 1px) 50% 0 / 88px 100%;
  opacity: 0.55;
  mask: radial-gradient(ellipse 80% 65% at 50% 0%, #000 10%, transparent 72%);
}

/* Film grain, so the gradients never band and the surface feels made. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 850;
  line-height: 1.25;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection { background: var(--signal); color: var(--signal-ink); }

kbd {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.55rem;
  padding: 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.45rem;
  color: var(--text-2);
  background: var(--bg-3);
  border: 1px solid var(--line-3);
  border-block-end-width: 2px;
  border-radius: 3px;
  direction: ltr;
}

.sprite { display: none; }

/* `hidden` must win over any component's own display, or script cannot hide things. */
[hidden] { display: none !important; }

.icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Arrows are drawn pointing forward in right-to-left text. */
.icon-flip:dir(ltr) { transform: scaleX(-1); }

.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Email addresses are long and have no spaces; let them break rather than widen the page. */
.ltr { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.muted { color: var(--text-2); }
.center { text-align: center; }

.skip {
  position: fixed;
  inset-inline-start: var(--space-4);
  inset-block-start: -5rem;
  z-index: 50;
  padding: var(--space-2) var(--space-4);
  color: var(--signal-ink);
  background: var(--signal);
}
.skip:focus { inset-block-start: var(--space-4); }
.skip:not(:focus) { clip-path: inset(50%); }

/* ================================================================ type */

.display {
  font-size: var(--size-display);
  font-weight: 900;
  line-height: 1.08;
}

.title {
  font-size: var(--size-title);
  font-weight: 900;
  line-height: 1.22;
}

.lead {
  font-size: var(--size-xl);
  line-height: 1.9;
  color: var(--text-2);
  max-inline-size: 38rem;
}
.lead-small { font-size: var(--size-l); }

.text-gold { color: var(--signal); text-shadow: 0 0 36px var(--signal-glow); }

/* A label above a heading: a lit diamond, then the words. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--size-xs);
  font-weight: 700;
  line-height: 1.6;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  inline-size: 0.42rem;
  block-size: 0.42rem;
  flex: none;
  rotate: 45deg;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.eyebrow-danger { color: var(--bad); }

/* Section heads are numbered down the page, like the entries of a menu. */
.block-head { counter-increment: block; }
.block-head > .eyebrow::before {
  content: counter(block, index) / "";
  inline-size: auto;
  block-size: auto;
  padding-inline-end: 2.6rem;
  rotate: none;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-1);
  background: linear-gradient(var(--line-4) 0 0) right center / 1.8rem 1px no-repeat;
  box-shadow: none;
}
.block-head > .eyebrow:dir(rtl)::before { background-position: left center; }

/* ================================================================ surfaces */

/* A panel: a dark translucent plate with a hairline edge and one bevelled corner. */
.glass {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, rgb(255 248 235 / 0.03), rgb(255 248 235 / 0.008)), var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--square);
  box-shadow: inset 0 1px 0 rgb(255 248 235 / 0.04);
  backdrop-filter: blur(14px) saturate(130%);
}

/* A soft light that follows the pointer across a card (position set by site.js). */
[data-spot]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(26rem circle at var(--mx, 50%) var(--my, -20%), color-mix(in srgb, var(--accent) 9%, transparent), transparent 45%);
  opacity: 0;
  transition: opacity var(--medium) var(--ease-out);
  pointer-events: none;
}
[data-spot]:hover::after { opacity: 1; }

/* Corner brackets close in on whatever is about to be chosen, like a target in a game menu. */
:is(.popular-card, .mood-card, .cast-card:not(.is-locked), .journey-tab, .continue-card, .way-step, .mood-panel)::before {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: 2;
  color: var(--accent);
  background: var(--brackets);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fast) var(--ease-out), inset var(--medium) var(--ease-out);
}
:is(.popular-card, .mood-card, .cast-card:not(.is-locked), .journey-tab, .continue-card, .way-step, .mood-panel):is(:hover, :focus-visible, :focus-within)::before,
.journey-input:is(:checked, :focus-visible) + .journey-tab::before {
  inset: -5px;
  opacity: 1;
}

/* ================================================================ buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-block-size: 2.875rem;
  padding: 0.5rem 1.4rem;
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--size-m);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--square);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    translate var(--fast) var(--ease-out),
    box-shadow var(--medium) var(--ease-out),
    background-color var(--fast) var(--ease-out),
    border-color var(--fast) var(--ease-out),
    color var(--fast) var(--ease-out);
}
.btn:active { translate: 0 1px; transition-duration: 60ms; }
.btn .icon { transition: translate var(--medium) var(--ease-spring); }
.btn:hover .icon-flip { translate: -3px 0; }
.btn:hover .icon-flip:dir(ltr) { translate: 3px 0; }

/* The one action on a screen: a solid plate of the light, its arrow behind a seam. */
.btn-primary {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 10px 30px -14px var(--accent-glow);
}
.btn-primary:hover {
  color: var(--accent-ink);
  background: color-mix(in oklab, var(--accent), white 16%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), 0 14px 40px -12px var(--accent-glow);
}
.btn-primary .icon {
  box-sizing: content-box;
  padding-inline-start: 0.65rem;
  border-inline-start: 1px solid rgb(0 0 0 / 0.18);
}
/* A sheen passes over it on hover. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.5) 50%, transparent 62%);
  translate: 120% 0;
  transition: translate var(--slow) var(--ease-out);
}
.btn-primary:hover::after { translate: -120% 0; }

.btn-glass {
  background: rgb(255 248 235 / 0.035);
  border-color: var(--line-3);
  backdrop-filter: blur(10px);
}
.btn-glass:hover { color: var(--text-1); background: rgb(255 248 235 / 0.08); border-color: var(--line-4); }

.btn-danger { color: var(--bad); border-color: rgb(255 99 112 / 0.4); background: rgb(255 99 112 / 0.06); }
.btn-danger:hover { color: #fff; background: rgb(255 99 112 / 0.18); border-color: var(--bad); }

.btn-danger-solid { color: #fff; background: #d8404f; border-color: #d8404f; box-shadow: 0 10px 30px -14px rgb(255 99 112 / 0.8); }
.btn-danger-solid:hover { color: #fff; background: #e85361; }

.btn-small { min-block-size: 2.3rem; padding-inline: 0.95rem; font-size: var(--size-s); }
.btn-large { min-block-size: 3.25rem; padding-inline: 1.75rem; font-size: var(--size-l); }
.btn-block { inline-size: 100%; }

.link {
  padding: 0;
  font: inherit;
  font-size: var(--size-s);
  color: var(--text-2);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 0.35em;
  transition: color var(--fast), text-decoration-color var(--fast);
}
.link:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ================================================================ header */

.hud {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background-color: rgb(6 6 7 / 0.8);
  border-block-end: 1px solid var(--line-1);
  backdrop-filter: blur(18px) saturate(140%);
  view-transition-name: hud;
}

/* Over a cover the header starts clear and settles into a bar as the page scrolls. */
@supports (animation-timeline: scroll()) {
  :is(.is-home, .is-world) .hud {
    animation: hud-settle linear both;
    animation-timeline: scroll(root);
    animation-range: 0 45vh;
  }
}
@keyframes hud-settle {
  from { background-color: rgb(6 6 7 / 0); border-block-end-color: transparent; backdrop-filter: blur(0) saturate(100%); }
}

.hud-bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  block-size: var(--hud-h);
  max-inline-size: calc(var(--width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-1);
}
.brand:hover { color: var(--text-1); }
.hud .brand { align-self: stretch; padding-inline-end: var(--space-6); border-inline-end: 1px solid var(--line-1); }
.logo-mark { inline-size: auto; block-size: 2.25rem; }
.brand-word { font-family: "Daricheh Wordmark", var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.brand-full { gap: 0.8rem; }
.brand-full .logo-mark { block-size: 3.25rem; }
.brand-name { display: grid; gap: 0.35rem; }
.brand-full .brand-word { font-size: 2.2rem; }
.brand-latin { font-size: 0.6rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.45em; color: var(--champagne); direction: ltr; text-align: end; margin-inline-end: -0.45em; }

.hud-nav { display: flex; align-self: stretch; gap: var(--space-1); }
.hud-nav a {
  position: relative;
  display: flex;
  align-items: center;
  padding-inline: 0.9rem;
  font-size: var(--size-s);
  font-weight: 600;
  color: var(--text-2);
  transition: color var(--fast);
}
.hud-nav a:hover { color: var(--text-1); }
.hud-nav a[aria-current="page"] { color: var(--text-1); }
/* The current tab is lit along the header's lower edge. */
.hud-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0.9rem;
  inset-block-end: -1px;
  block-size: 2px;
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal);
  scale: 0 1;
  transition: scale var(--medium) var(--ease-out);
}
.hud-nav a:hover::after { scale: 0.4 1; }
.hud-nav a[aria-current="page"]::after { scale: 1; }

.hud-end { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }

.hud-search {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.4rem;
  padding-inline: 0.8rem 0.45rem;
  font: inherit;
  font-size: var(--size-s);
  color: var(--text-3);
  background: rgb(255 248 235 / 0.035);
  border: 1px solid var(--line-2);
  border-radius: var(--square);
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast), background-color var(--fast);
}
.hud-search:hover { color: var(--text-2); border-color: var(--line-3); background: rgb(255 248 235 / 0.06); }
.hud-search-label { min-inline-size: 9rem; text-align: start; }

.player {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem;
  padding-inline-end: 0.85rem;
  font-size: var(--size-s);
  font-weight: 600;
  color: var(--text-1);
  background: rgb(255 248 235 / 0.035);
  border: 1px solid var(--line-2);
  border-radius: var(--square);
  transition: border-color var(--fast), box-shadow var(--medium);
}
.player:hover { color: var(--text-1); border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.player-name { max-inline-size: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  flex: none;
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--signal-ink);
  background: var(--signal);
  border-radius: var(--square);
}
.avatar-sm { inline-size: 1.75rem; block-size: 1.75rem; font-size: var(--size-s); }
.avatar-xl {
  inline-size: 6rem;
  block-size: 6rem;
  font-size: 2.6rem;
  box-shadow: 0 0 0 6px var(--bg-1), 0 0 0 7px var(--line-3), 0 0 60px -10px var(--signal-glow);
}

/* ================================================================ page */

.page {
  flex: 1;
  inline-size: 100%;
  max-inline-size: calc(var(--width) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-6) var(--gutter) var(--space-8);
  display: grid;
  gap: var(--space-7);
  align-content: start;
}
.page > * { min-inline-size: 0; }
.is-home .page { gap: var(--space-9); padding-block-start: 0; }
.is-world .page { padding-block-start: 0; }

.section { display: grid; gap: var(--space-6); }

/*
  A titled part of a page sits under a hairline with a short lit tick at its
  start, like a panel in a game's menu.
*/
:is(.block, .fog-section, .continue, .library, .moods) {
  position: relative;
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--line-1);
}
:is(.block, .fog-section, .continue, .library, .moods)::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 3.5rem;
  block-size: 1px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ================================================================ worlds: themes */

/*
  One theme per world, sampled from its cover and set in the editor:
  .theme-<slug> rules are generated into /css/themes.css (CatalogStore).
  --accent is the light in the picture; --accent-deep is its darker edge;
  --accent-cool is the picture's own shadow colour, used for secondary lines.
*/

/* ================================================================ title screen */

/*
  The home page opens on a title screen, as a game does: the name and the
  promise over a row of arched windows, each one a world. The featured
  covers are lit from the middle out and dim toward the ends, where the
  windows are still dark: the worlds still to come. Full-bleed and under the
  header, like a world's own hero.
*/
.title-screen {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template: minmax(0, 1fr) auto / minmax(0, 1fr);
  justify-items: center;
  min-block-size: min(100svh, 68rem);
  margin-inline: calc(50% - 50vw);
  margin-block-start: calc(-1 * var(--hud-h));
  padding: calc(var(--hud-h) + clamp(0.75rem, 3svh, 2.5rem)) var(--gutter) clamp(2.5rem, 7svh, 4.5rem);
  overflow: hidden;
}
/* A shade under the header, so it reads over any picture. */
.title-screen::before,
.world-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  block-size: 9rem;
  background: linear-gradient(rgb(6 6 7 / 0.7), transparent);
  pointer-events: none;
}
/* The middle window's light, spilling over the floor under the words. */
.title-screen::after {
  content: "";
  position: absolute;
  inset: 25% 0 0;
  z-index: -1;
  background: radial-gradient(ellipse 34% 46% at 50% 46%, rgb(243 181 68 / 0.15), transparent 72%);
  pointer-events: none;
}

/* --- the windows */

.arcade {
  /* The middle window's height: what is left of the first screen once the words are placed. */
  --window-h: clamp(13rem, calc(100svh - var(--hud-h) - 25rem), 30rem);
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.6rem, 1.8vw, 1.6rem);
  /* Wider than a small screen: centred, its ends fall off both edges (the windows do not shrink). */
  inline-size: 100%;
}

.window {
  position: relative;
  display: block;
  flex: none;
  block-size: calc(var(--window-h) * var(--size));
  aspect-ratio: 100 / 190;
  /* Each window fades into the floor; the far ones shift most with the pointer (site.js), as if seen in depth. */
  mask-image: linear-gradient(#000 52%, transparent 92%);
  translate: calc(var(--px, 0) * var(--shift) * -1) calc(var(--py, 0) * var(--shift) * -0.35);
  transition: translate 1.4s var(--ease-out);
  animation: window-in 1.6s var(--ease-out) both;
  animation-delay: calc(0.2s + var(--d) * 0.24s);
}
.window-d0 { --d: 0; --size: 1; --shift: 5px; --light: 0.95; --tint: 1; }
.window-d1 { --d: 1; --size: 0.8; --shift: 11px; --light: 0.62; --tint: 0.85; }
.window-d2 { --d: 2; --size: 0.66; --shift: 17px; --light: 0.42; --tint: 0.6; }
.window-d3 { --d: 3; --size: 0.56; --shift: 23px; --light: 0.3; --tint: 0.5; }
/* The windows light up from the middle out, one after another. */
@keyframes window-in { from { opacity: 0; filter: brightness(0.15); } }

.window-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(var(--bg-2), var(--bg-0));
  mask: url("../img/window.svg") 0 0 / 100% 100% no-repeat;
  -webkit-mask: url("../img/window.svg") 0 0 / 100% 100% no-repeat;
}
.window-view img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: brightness(var(--light)) saturate(var(--tint));
  transition: filter var(--slow) var(--ease-out);
}
/* The middle window's picture drifts closer, slowly, like a held shot. */
.window-d0 .window-view img { animation: held-shot 26s ease-in-out infinite alternate; }
@keyframes held-shot { to { scale: 1.1; } }
/* A glimpse shows a detail of a cover, so the row reads as more worlds than it holds. */
.window.is-glimpse img { scale: 2.1; object-position: 30% 68%; }
.window.is-glimpse:nth-child(n + 5) img { object-position: 72% 38%; }

.window-frame { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
.window-frame path { fill: none; stroke: var(--line-3); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke var(--medium); }
.window-d0 .window-frame path { stroke: var(--signal); filter: drop-shadow(0 0 6px var(--signal-glow)); }
/* One light travelling the middle window's rim; it scales with the arch, so its dash follows pathLength. */
.window-frame .window-run {
  stroke: #fff;
  stroke-width: 0.7;
  vector-effect: none;
  stroke-dasharray: 7 93;
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px var(--signal));
  animation: rim 9s linear infinite;
}

a.window:hover { --light: 1; --tint: 1; }
a.window:hover .window-frame path:first-child { stroke: var(--accent); }

/* A window not yet lit: a little night sky, and a glow at the sill as if a light were coming. */
.window.is-dark .window-view {
  background:
    radial-gradient(1.5px 1.5px at 32% 26%, rgb(255 248 235 / 0.55), transparent),
    radial-gradient(1px 1px at 66% 34%, rgb(255 248 235 / 0.4), transparent),
    radial-gradient(1px 1px at 48% 50%, rgb(255 248 235 / 0.3), transparent),
    radial-gradient(1px 1px at 24% 60%, rgb(255 248 235 / 0.25), transparent),
    linear-gradient(var(--bg-1), var(--bg-0));
}
.window.is-dark .window-view::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 34% at 50% 78%, rgb(243 181 68 / 0.16), transparent);
  animation: kindle 5s ease-in-out infinite alternate;
}
@keyframes kindle { from { opacity: 0.25; } }
.window.is-dark .window-frame path { stroke: var(--line-2); stroke-dasharray: 3 4; }

/* --- the words */

.title-head {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(0.7rem, 2svh, 1.2rem);
  max-inline-size: 52rem;
  /* Over the faded lower edge of the windows. */
  margin-block-start: calc(-1 * clamp(1.5rem, 6svh, 4rem));
  text-align: center;
}
.title-head > * { animation: rise var(--slow) var(--ease-out) both; animation-delay: 0.5s; }
.title-head > :nth-child(2) { animation-delay: 0.58s; }
.title-head > :nth-child(3) { animation-delay: 0.66s; }
.title-head > :nth-child(n + 4) { animation-delay: 0.74s; }

/* A label between two hairlines, like the subtitle on a game's title screen. */
.title-kicker { display: inline-flex; align-items: center; gap: 0.9rem; font-size: var(--size-xs); font-weight: 700; color: var(--text-2); }
.title-kicker::before,
.title-kicker::after { content: ""; inline-size: clamp(1.5rem, 4vw, 3rem); block-size: 1px; background: linear-gradient(to left, transparent, var(--line-4)); }
.title-kicker::after,
.title-kicker:dir(ltr)::before { background: linear-gradient(to right, transparent, var(--line-4)); }
.title-kicker:dir(ltr)::after { background: linear-gradient(to left, transparent, var(--line-4)); }
.title-name { font-size: var(--size-display); font-weight: 900; line-height: 1.1; text-shadow: 0 4px 40px rgb(0 0 0 / 0.6); }
.title-lead { max-inline-size: 46rem; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); line-height: 1.95; color: var(--text-2); text-wrap: balance; }
.title-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-block-start: var(--space-2); }
.title-head .resume-chip { margin-inline-start: 0; }

.resume-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
  padding: 0.3rem 0.85rem;
  font-size: var(--size-xs);
  font-weight: 700;
  color: var(--text-1);
  background: var(--panel-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: inset var(--bar-x) 0 0 var(--accent);
}
.resume-chip .icon { inline-size: 0.9rem; block-size: 0.9rem; color: var(--accent); }

/* ================================================================ what daricheh is */

/*
  What Daricheh does, in the three steps every world offers: a panel each,
  with a picture of the step and its number drawn large over it, like the
  stages of a briefing. Then the catalog's shelves, so it is plain that the
  worlds shown further down are examples, not the whole of it.
*/
.way { gap: var(--space-7); }
.way-head { max-inline-size: 62rem; }
.way-title { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.9rem); line-height: 1.25; }
.way-lead { max-inline-size: 46rem; font-size: var(--size-l); }

.way-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: way; }
.way-step { display: grid; grid-template-rows: auto 1fr; counter-increment: way; transition: border-color var(--fast); }
.way-step:hover { border-color: var(--line-3); }

.way-art { position: relative; isolation: isolate; aspect-ratio: 16 / 11; overflow: hidden; background: var(--bg-1); border-block-end: 1px solid var(--line-1); }
/* The step's number, large and drawn in outline over its picture. */
.way-art::after {
  content: counter(way, index) / "";
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 1rem;
  z-index: 3;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.2rem + 2.2vw, 4.5rem);
  font-weight: 900;
  line-height: 1.1;
  color: transparent;
  -webkit-text-stroke: 1px rgb(255 248 235 / 0.42);
  transition: -webkit-text-stroke-color var(--medium);
}
.way-step:hover .way-art::after { -webkit-text-stroke-color: var(--signal); }

.way-body { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-5); }
.way-index::after { content: ""; flex: 1; min-inline-size: 2rem; block-size: 1px; background: linear-gradient(to left, var(--line-3), transparent); }
.way-index:dir(ltr)::after { background: linear-gradient(to right, var(--line-3), transparent); }
.way-name { font-size: var(--size-xl); font-weight: 900; }
.way-text { font-size: var(--size-s); line-height: 1.95; color: var(--text-2); }
.way-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block-start: var(--space-3);
  font-size: var(--size-s);
  font-weight: 700;
  color: var(--text-1);
  border-block-start: 1px solid var(--line-1);
  transition: color var(--fast);
}
.way-link .icon { color: var(--signal); transition: translate var(--medium) var(--ease-spring); }
.way-link:hover { color: var(--signal); }
.way-link:hover .icon-flip { translate: -3px 0; }
.way-link:hover .icon-flip:dir(ltr) { translate: 3px 0; }

/* --- 1: a hand of covers, and one more card for the worlds still to come */

.way-art-discover { background: radial-gradient(70% 70% at 50% 100%, rgb(243 181 68 / 0.13), transparent 70%), var(--bg-1); }
.way-fan { position: absolute; inset: 16% 0 -8%; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: end center; }
.way-fan > * {
  grid-area: 1 / 1;
  block-size: 78%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transform-origin: 50% 130%;
  rotate: calc(var(--i) * 8deg);
  translate: calc(var(--i) * 26%) 0;
  filter: brightness(0.8);
  box-shadow: 0 0 0 1px var(--line-3), 0 24px 40px -14px rgb(0 0 0 / 0.95);
  transition: rotate var(--slow) var(--ease-out), translate var(--slow) var(--ease-out), filter var(--medium);
}
.way-fan > :nth-child(1) { --i: -1.5; }
.way-fan > :nth-child(2) { --i: -0.5; }
.way-fan > :nth-child(3) { --i: 0.5; }
.way-fan > :nth-child(4) { --i: 1.5; }
.way-fan > :last-child { filter: none; }
.way-step:hover .way-fan > * { rotate: calc(var(--i) * 11deg); translate: calc(var(--i) * 36%) -5%; }
.way-fan-more {
  display: grid;
  place-items: center;
  color: var(--signal);
  background: repeating-linear-gradient(-45deg, rgb(255 248 235 / 0.03) 0 6px, transparent 6px 12px), var(--bg-2);
  border: 1px dashed var(--line-4);
}
.way-fan-more .icon { inline-size: 1.6rem; block-size: 1.6rem; }

/* --- 2: a story map in fog, lit up to where the reader is */

@property --fog {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 34%;
}
.way-art-map {
  background:
    linear-gradient(var(--line-1) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, var(--line-1) 1px, transparent 1px) 0 0 / 22px 100%,
    var(--bg-1);
}
/* The fog draws back a little while the step is looked at: the next part of the map comes into view. */
.way-art-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 48% 58%, transparent var(--fog), rgb(11 11 13 / 0.94) calc(var(--fog) + 32%));
  transition: --fog 1.1s var(--ease-out);
  pointer-events: none;
}
.way-step:hover .way-art-map::before { --fog: 48%; }
.way-map { position: absolute; inset: 6% 4% 20%; inline-size: 92%; block-size: 74%; overflow: visible; }
.way-links path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: opacity var(--slow) var(--ease-out); }
.way-links .is-lit { stroke: var(--line-4); }
.way-links .is-near { stroke: var(--line-4); stroke-dasharray: 4 4; opacity: 0; }
.way-links .is-far { stroke: var(--line-3); stroke-dasharray: 2 5; }
.way-nodes circle { stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: opacity var(--slow) var(--ease-out); }
.way-nodes .is-lit { fill: var(--bg-4); stroke: var(--text-2); }
.way-nodes .is-near { fill: var(--bg-3); stroke: var(--text-3); opacity: 0; }
.way-nodes .is-far { fill: none; stroke: var(--line-4); stroke-dasharray: 2 3; }
.way-nodes .is-you { fill: var(--signal); stroke: none; filter: drop-shadow(0 0 8px var(--signal-glow)); }
.way-step:hover :is(.way-links, .way-nodes) .is-near { opacity: 1; transition-delay: 0.25s; }
.way-lock { fill: none; stroke: var(--text-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Where the reader is, as a segmented meter: lit up to their stage. */
.way-meter {
  position: absolute;
  inset-inline: 1rem;
  inset-block-end: 0.85rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--size-2xs);
  font-weight: 700;
  color: var(--text-2);
}
.way-segments { display: flex; gap: 3px; }
.way-segments i { inline-size: 1.35rem; block-size: 5px; background: var(--line-2); transition: background-color var(--medium), box-shadow var(--medium); }
.way-segments .is-on { background: var(--signal); box-shadow: 0 0 8px var(--signal-glow); }
.way-step:hover .way-segments .is-next { background: var(--signal); box-shadow: 0 0 8px var(--signal-glow); transition-delay: 0.15s; }

/* --- 3: the work itself, and every form it takes */

.way-art-work img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 80%;
  scale: 1.12;
  filter: brightness(0.72);
  transition: scale 1.6s var(--ease-out), filter var(--medium);
}
.way-step:hover .way-art-work img { scale: 1.2; filter: brightness(0.86); }
.way-art-work::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgb(6 6 7 / 0.35), transparent 35%, transparent 45%, rgb(6 6 7 / 0.85)); }
.way-media { position: absolute; inset-inline: 0.85rem; inset-block-end: 0.85rem; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.way-media li {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.2rem 0.45rem;
  font-size: var(--size-2xs);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--text-2);
  background: rgb(6 6 7 / 0.66);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
  transition: color var(--medium), border-color var(--medium);
}
.way-media .icon { inline-size: 1.25rem; block-size: 1.25rem; color: var(--text-1); transition: color var(--medium); }
.way-step:hover .way-media li { color: var(--text-1); border-color: color-mix(in srgb, var(--signal) 55%, transparent); }
.way-step:hover .way-media .icon { color: var(--signal); }
.way-media li:nth-child(2), .way-media li:nth-child(2) .icon { transition-delay: 60ms; }
.way-media li:nth-child(3), .way-media li:nth-child(3) .icon { transition-delay: 120ms; }
.way-media li:nth-child(4), .way-media li:nth-child(4) .icon { transition-delay: 180ms; }

/* --- the catalog keeps growing */

.growing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--space-6) var(--space-8);
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
  box-shadow: inset var(--bar-x) 0 0 var(--signal), inset 0 1px 0 rgb(255 248 235 / 0.04);
}
.growing-text { display: grid; gap: var(--space-3); }
/* A live light: the catalog is still being added to. */
.growing-tag { display: inline-flex; align-items: center; gap: 0.7rem; font-size: var(--size-xs); font-weight: 700; color: var(--signal); }
.growing-tag::before { content: ""; inline-size: 0.45rem; block-size: 0.45rem; rotate: 45deg; background: var(--signal); animation: live 2.4s var(--ease-out) infinite; }
@keyframes live { from { box-shadow: 0 0 0 0 rgb(243 181 68 / 0.6); } to { box-shadow: 0 0 0 8px rgb(243 181 68 / 0); } }
.growing-title { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 900; }
.growing-text .muted { max-inline-size: 34rem; line-height: 1.95; }

/* The shelves as a menu: numbered rows between hairlines, lit along the start edge when chosen. */
.growing-shelves ul { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: shelf; border-block-start: 1px solid var(--line-2); }
.growing-shelves li { counter-increment: shelf; }
.growing-shelves a {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: 0.8rem 0.75rem;
  color: var(--text-1);
  border-block-end: 1px solid var(--line-1);
  transition: background-color var(--fast), box-shadow var(--fast);
}
.growing-shelves a::before { content: counter(shelf, index) / ""; font-family: var(--font-display); font-size: var(--size-2xs); font-weight: 800; color: var(--text-3); transition: color var(--fast); }
.growing-shelves a.is-all::before { content: "+" / ""; font-size: var(--size-l); line-height: 1; color: var(--signal); }
.growing-shelves span { display: grid; min-inline-size: 0; line-height: 1.6; }
.growing-shelves strong { font-family: var(--font-display); font-weight: 800; }
.growing-shelves small { overflow: hidden; font-size: var(--size-xs); color: var(--text-3); text-overflow: ellipsis; white-space: nowrap; }
.growing-shelves .icon { color: var(--text-3); transition: color var(--fast), translate var(--medium) var(--ease-spring); }
.growing-shelves a:hover { background: rgb(255 248 235 / 0.03); box-shadow: inset var(--bar-x) 0 0 var(--signal); }
.growing-shelves a:hover::before, .growing-shelves a:hover .icon { color: var(--signal); }
.growing-shelves a:hover .icon-flip { translate: -3px 0; }
.growing-shelves a:hover .icon-flip:dir(ltr) { translate: 3px 0; }

/* ================================================================ showcase */

/*
  The featured worlds, as examples of the three steps: a world select, as a
  game has. The chosen world's living cover fills the end side of the screen
  edge to edge and fades into the menu on the start side; the worlds line
  the bottom like levels. Each world is a radio button, so choosing one needs
  no script and arrow keys move between them; :has() shows the matching
  world and backdrop. Rules exist for up to six worlds — add a line below
  for more.
*/
.showcase {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(1rem, 3svh, 2.25rem);
  min-block-size: calc(100svh - var(--hud-h));
  /* Full-bleed; the padding brings the menu back to the content column. */
  margin-inline: calc(50% - 50vw);
  padding: clamp(2rem, 6svh, 4rem) calc(50vw - 50%) clamp(0.75rem, 2.5svh, 1.75rem);
  overflow: hidden;
}

.showcase-backdrops {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
/* Faded at the top as well as the bottom: the showcase sits between other parts of the page. */
.showcase-backdrops::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, var(--bg-0) 0%, rgb(6 6 7 / 0.85) 30%, rgb(6 6 7 / 0.3) 60%, transparent 85%),
    linear-gradient(
      to bottom,
      var(--bg-0) 0%,
      rgb(6 6 7 / 0.95) 6%,
      rgb(6 6 7 / 0.78) 14%,
      rgb(6 6 7 / 0.55) 24%,
      rgb(6 6 7 / 0.35) 34%,
      rgb(6 6 7 / 0.35) 65%,
      rgb(6 6 7 / 0.55) 78%,
      rgb(6 6 7 / 0.82) 90%,
      var(--bg-0) 98%
    );
}
.showcase-backdrops::after:dir(ltr) {
  background:
    linear-gradient(to right, var(--bg-0) 0%, rgb(6 6 7 / 0.85) 30%, rgb(6 6 7 / 0.3) 60%, transparent 85%),
    linear-gradient(
      to bottom,
      var(--bg-0) 0%,
      rgb(6 6 7 / 0.95) 6%,
      rgb(6 6 7 / 0.78) 14%,
      rgb(6 6 7 / 0.55) 24%,
      rgb(6 6 7 / 0.35) 34%,
      rgb(6 6 7 / 0.35) 65%,
      rgb(6 6 7 / 0.55) 78%,
      rgb(6 6 7 / 0.82) 90%,
      var(--bg-0) 98%
    );
}
.showcase-backdrop {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.2;
  filter: blur(60px) saturate(120%) brightness(0.42);
  transition: opacity var(--slow) var(--ease-out);
}

.stage { display: grid; align-items: center; min-block-size: 0; }

.world {
  display: none;
  grid-template-columns: minmax(0, 40rem);
  align-content: center;
  inline-size: 100%;
}

.showcase:has(.picker-input:nth-of-type(1):checked) :is(.world:nth-child(1), .showcase-backdrop:nth-child(1)),
.showcase:has(.picker-input:nth-of-type(2):checked) :is(.world:nth-child(2), .showcase-backdrop:nth-child(2)),
.showcase:has(.picker-input:nth-of-type(3):checked) :is(.world:nth-child(3), .showcase-backdrop:nth-child(3)),
.showcase:has(.picker-input:nth-of-type(4):checked) :is(.world:nth-child(4), .showcase-backdrop:nth-child(4)),
.showcase:has(.picker-input:nth-of-type(5):checked) :is(.world:nth-child(5), .showcase-backdrop:nth-child(5)),
.showcase:has(.picker-input:nth-of-type(6):checked) :is(.world:nth-child(6), .showcase-backdrop:nth-child(6)) {
  &.world { display: grid; }
  &.showcase-backdrop { opacity: 0.85; }
}

/* --- the cover: the scene itself */

/*
  On wide screens the cover is placed against the full-bleed box (the
  showcase, or a world's hero), filling its end side from top to bottom and
  fading out toward the words. Its box is not 4:5; the image and the living
  cover both crop to it from the centre.
*/
.world-art {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 0;
  display: block;
  inline-size: 66%;
  overflow: hidden;
  background: var(--bg-1);
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, #000 24%, rgb(0 0 0 / 0.98) 36%, rgb(0 0 0 / 0.92) 46%, rgb(0 0 0 / 0.8) 56%, rgb(0 0 0 / 0.62) 67%, rgb(0 0 0 / 0.42) 77%, rgb(0 0 0 / 0.22) 86%, rgb(0 0 0 / 0.07) 94%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 58%, rgb(0 0 0 / 0.8) 72%, rgb(0 0 0 / 0.5) 83%, rgb(0 0 0 / 0.18) 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 0%, #000 24%, rgb(0 0 0 / 0.98) 36%, rgb(0 0 0 / 0.92) 46%, rgb(0 0 0 / 0.8) 56%, rgb(0 0 0 / 0.62) 67%, rgb(0 0 0 / 0.42) 77%, rgb(0 0 0 / 0.22) 86%, rgb(0 0 0 / 0.07) 94%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 58%, rgb(0 0 0 / 0.8) 72%, rgb(0 0 0 / 0.5) 83%, rgb(0 0 0 / 0.18) 93%, transparent 100%);
  mask-composite: intersect;
  animation: art-in 1.2s var(--ease-out) both;
}
.world-art:dir(ltr) {
  -webkit-mask-image:
    linear-gradient(to left, #000 0%, #000 24%, rgb(0 0 0 / 0.98) 36%, rgb(0 0 0 / 0.92) 46%, rgb(0 0 0 / 0.8) 56%, rgb(0 0 0 / 0.62) 67%, rgb(0 0 0 / 0.42) 77%, rgb(0 0 0 / 0.22) 86%, rgb(0 0 0 / 0.07) 94%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 58%, rgb(0 0 0 / 0.8) 72%, rgb(0 0 0 / 0.5) 83%, rgb(0 0 0 / 0.18) 93%, transparent 100%);
  mask-image:
    linear-gradient(to left, #000 0%, #000 24%, rgb(0 0 0 / 0.98) 36%, rgb(0 0 0 / 0.92) 46%, rgb(0 0 0 / 0.8) 56%, rgb(0 0 0 / 0.62) 67%, rgb(0 0 0 / 0.42) 77%, rgb(0 0 0 / 0.22) 86%, rgb(0 0 0 / 0.07) 94%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 58%, rgb(0 0 0 / 0.8) 72%, rgb(0 0 0 / 0.5) 83%, rgb(0 0 0 / 0.18) 93%, transparent 100%);
}
.showcase .world-art {
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, #000 24%, rgb(0 0 0 / 0.98) 36%, rgb(0 0 0 / 0.92) 46%, rgb(0 0 0 / 0.8) 56%, rgb(0 0 0 / 0.62) 67%, rgb(0 0 0 / 0.42) 77%, rgb(0 0 0 / 0.22) 86%, rgb(0 0 0 / 0.07) 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.04) 5%, rgb(0 0 0 / 0.18) 12%, rgb(0 0 0 / 0.45) 20%, rgb(0 0 0 / 0.76) 28%, #000 36%, #000 62%, rgb(0 0 0 / 0.78) 74%, rgb(0 0 0 / 0.48) 84%, rgb(0 0 0 / 0.18) 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 0%, #000 24%, rgb(0 0 0 / 0.98) 36%, rgb(0 0 0 / 0.92) 46%, rgb(0 0 0 / 0.8) 56%, rgb(0 0 0 / 0.62) 67%, rgb(0 0 0 / 0.42) 77%, rgb(0 0 0 / 0.22) 86%, rgb(0 0 0 / 0.07) 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.04) 5%, rgb(0 0 0 / 0.18) 12%, rgb(0 0 0 / 0.45) 20%, rgb(0 0 0 / 0.76) 28%, #000 36%, #000 62%, rgb(0 0 0 / 0.78) 74%, rgb(0 0 0 / 0.48) 84%, rgb(0 0 0 / 0.18) 93%, transparent 100%);
  mask-composite: intersect;
}
.showcase .world-art:dir(ltr) {
  -webkit-mask-image:
    linear-gradient(to left, #000 0%, #000 24%, rgb(0 0 0 / 0.98) 36%, rgb(0 0 0 / 0.92) 46%, rgb(0 0 0 / 0.8) 56%, rgb(0 0 0 / 0.62) 67%, rgb(0 0 0 / 0.42) 77%, rgb(0 0 0 / 0.22) 86%, rgb(0 0 0 / 0.07) 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.04) 5%, rgb(0 0 0 / 0.18) 12%, rgb(0 0 0 / 0.45) 20%, rgb(0 0 0 / 0.76) 28%, #000 36%, #000 62%, rgb(0 0 0 / 0.78) 74%, rgb(0 0 0 / 0.48) 84%, rgb(0 0 0 / 0.18) 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left, #000 0%, #000 24%, rgb(0 0 0 / 0.98) 36%, rgb(0 0 0 / 0.92) 46%, rgb(0 0 0 / 0.8) 56%, rgb(0 0 0 / 0.62) 67%, rgb(0 0 0 / 0.42) 77%, rgb(0 0 0 / 0.22) 86%, rgb(0 0 0 / 0.07) 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.04) 5%, rgb(0 0 0 / 0.18) 12%, rgb(0 0 0 / 0.45) 20%, rgb(0 0 0 / 0.76) 28%, #000 36%, #000 62%, rgb(0 0 0 / 0.78) 74%, rgb(0 0 0 / 0.48) 84%, rgb(0 0 0 / 0.18) 93%, transparent 100%);
  mask-composite: intersect;
}
.world-art img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* A soft vignette, so the picture's edges settle into the page. */
.world-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 45%, rgb(6 6 7 / 0.55));
  pointer-events: none;
}

@keyframes art-in { from { opacity: 0; } }

/* The living cover (scene.js): drawn over the <img>, which stays as the fallback. */
.world-art canvas.scene {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
  pointer-events: none;
}
.world-art canvas.scene.is-on { opacity: 1; }

.world-status {
  position: absolute;
  inset-block-start: calc(var(--hud-h) + 1.25rem);
  inset-inline-end: var(--edge);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.8rem;
  font-size: var(--size-xs);
  font-weight: 700;
  color: var(--text-1);
  background: rgb(6 6 7 / 0.62);
  border: 1px solid rgb(255 248 235 / 0.18);
  backdrop-filter: blur(10px);
}
.world-status .icon { color: var(--accent); }
.showcase .world-status { inset-block-start: clamp(2rem, 6svh, 4rem); }

/* --- the words beside it */

.world-info { position: relative; z-index: 2; display: grid; align-content: center; justify-items: start; gap: clamp(0.65rem, 2svh, 1.15rem); }
.world-info > * { animation: rise var(--slow) var(--ease-out) both; }
.world-info > *:nth-child(2) { animation-delay: 60ms; }
.world-info > *:nth-child(3) { animation-delay: 100ms; }
.world-info > *:nth-child(4) { animation-delay: 140ms; }
.world-info > *:nth-child(5) { animation-delay: 180ms; }
.world-info > *:nth-child(6) { animation-delay: 220ms; }
.world-info > *:nth-child(7) { animation-delay: 260ms; }
.world-info > *:nth-child(n + 8) { animation-delay: 300ms; }

.world-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) 0.9rem; font-size: var(--size-s); font-weight: 600; color: var(--text-2); }
.world-kicker:not(:has(.world-index))::before { content: ""; inline-size: 0.42rem; block-size: 0.42rem; rotate: 45deg; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.world-index {
  padding-inline-end: 0.9rem;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.3;
  color: var(--accent);
  border-inline-end: 1px solid var(--line-3);
}
/* The name comes in with a wipe from the start side, as a menu title does. */
.world-title {
  font-size: clamp(2.6rem, min(5.4vw, 10svh), 6.5rem);
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 4px 40px rgb(0 0 0 / 0.55);
}
.world-info > .world-title { animation: rise var(--slow) var(--ease-out) both, wipe 0.9s var(--ease-out) both; animation-delay: 60ms; }
@keyframes wipe { from { clip-path: inset(-20% 0 -20% 100%); } to { clip-path: inset(-20% 0 -20% 0); } }
.world-info > .world-title:dir(ltr) { animation-name: rise, wipe-ltr; }
@keyframes wipe-ltr { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }

.world-original { margin-block-start: calc(-0.5 * var(--space-3)); font-size: var(--size-xs); font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-3); }
.world-pitch { font-size: clamp(1rem, 0.75rem + 0.9svh, 1.25rem); line-height: 1.9; color: var(--text-2); max-inline-size: 34rem; }

/* Facts as a row of stats between two hairlines. */
.world-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) 0;
  min-inline-size: min(100%, 28rem);
  margin: 0;
  padding: 0.6rem 0;
  list-style: none;
  border-block: 1px solid var(--line-1);
}
.world-facts li { display: inline-flex; align-items: center; padding-inline-end: 1rem; font-size: var(--size-s); font-weight: 600; color: var(--text-1); }
.world-facts li + li { padding-inline-start: 1rem; border-inline-start: 1px solid var(--line-2); }
.world-facts .world-media { color: var(--accent); }

.world-start {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  max-inline-size: 34rem;
  padding: var(--space-3) var(--space-4);
  font-size: var(--size-s);
  color: var(--text-2);
  background: var(--accent-soft);
  border-inline-start: 2px solid var(--accent);
}
.world-start .icon { margin-block-start: 0.3rem; color: var(--accent); }

.world-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: clamp(0rem, 1svh, 0.5rem); }

/* --- the picker: a level select along the bottom */

.picker {
  position: relative;
  z-index: 2;
  display: flex;
  /* A fieldset will not shrink below its content unless told to. */
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-block-start: 1px solid var(--line-2);
  counter-reset: pick;
}
/* Hidden, but kept inside the picker: focusing a radio scrolls to it, so it must sit where the reader tapped. */
.picker-input { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; opacity: 0; pointer-events: none; }
.picker-card {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-inline-size: 0;
  padding: 0.95rem 0.9rem 0.85rem;
  color: var(--text-2);
  border-inline-start: 1px solid var(--line-1);
  cursor: pointer;
  counter-increment: pick;
  transition: background-color var(--fast), color var(--fast);
}
.picker-input:first-of-type + .picker-card { border-inline-start: 0; }
.picker-card::before {
  content: counter(pick, index) / "";
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: var(--size-2xs);
  font-weight: 800;
  line-height: 1.4;
  color: var(--text-3);
  transition: color var(--fast);
}
.picker-card:hover { color: var(--text-1); background: rgb(255 248 235 / 0.03); }
.picker-card img {
  inline-size: 2.6rem;
  block-size: 3.25rem;
  flex: none;
  object-fit: cover;
  border-radius: var(--square);
  filter: grayscale(0.75) brightness(0.6);
  transition: filter var(--medium), box-shadow var(--medium);
}
.picker-card:hover img { filter: grayscale(0.2) brightness(0.85); }
.picker-text { display: grid; min-inline-size: 0; line-height: 1.5; }
.picker-text strong { overflow: hidden; font-family: var(--font-display); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); }
.picker-text small { font-size: var(--size-xs); color: var(--text-3); }
/* The chosen world lights up in its own colour, with a bar drawn along the top like a selected level. */
.picker-input:checked + .picker-card { color: var(--text-1); background: linear-gradient(var(--accent-soft), transparent 85%); }
.picker-input:checked + .picker-card::before { color: var(--accent); }
.picker-input:checked + .picker-card img { filter: none; box-shadow: 0 0 0 1px var(--accent), 0 0 24px -6px var(--accent-glow); }
.picker-input:checked + .picker-card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -1px;
  block-size: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
  transform-origin: right;
  animation: bar-in 0.6s var(--ease-out) both;
}
.picker-card:dir(ltr)::after { transform-origin: left; }
@keyframes bar-in { from { scale: 0 1; } }
.picker-input:focus-visible + .picker-card { outline: 2px solid var(--accent); outline-offset: -2px; }

.picker-more { counter-increment: none; flex-grow: 0.8; }
.picker-more::before { content: none; }
.picker-more-icon {
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 3.25rem;
  flex: none;
  color: var(--signal);
  border: 1px dashed var(--line-3);
  transition: border-color var(--fast);
}
.picker-more:hover .picker-more-icon { border-color: var(--signal); }
.picker-more-icon .icon { inline-size: 1.3rem; block-size: 1.3rem; }

/* The key hint above the strip, shown by site.js once the keys work. */
.picker-hint {
  position: absolute;
  inset-block-end: calc(100% + 0.6rem);
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--size-2xs);
  color: var(--text-3);
}
.picker-hint span { margin-inline-start: 0.3rem; }
.picker-nav {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
}
.picker-nav kbd {
  transition: background-color var(--fast), color var(--fast), border-color var(--fast);
}
.picker-nav:hover kbd {
  color: var(--text-1);
  background: var(--bg-2);
  border-color: var(--line-2);
}
.picker-nav:active kbd {
  transform: translateY(1px);
}
.picker-nav:focus:not(:focus-visible) {
  outline: none;
}
.picker-nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.picker-nav:focus-visible kbd {
  color: var(--text-1);
  background: var(--bg-2);
  border-color: var(--line-2);
}

/* Short laptop screens: everything stays, a little tighter. */
@media (min-width: 64rem) and (max-height: 760px) {
  .world-facts { padding-block: 0.4rem; }
  .world-pitch { line-height: 1.75; }
  .picker-card { padding-block: 0.7rem 0.6rem; }
  .picker-card img { inline-size: 2.2rem; block-size: 2.75rem; }
}

/* ================================================================ portal */

.portal { position: relative; inline-size: min(100%, 25rem); }

.portal-frame {
  position: relative;
  aspect-ratio: 100 / 125;
  filter: drop-shadow(0 30px 60px rgb(0 0 0 / 0.6));
}

.portal-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mask: url("../img/arch.svg") center / 100% 100% no-repeat;
  -webkit-mask: url("../img/arch.svg") center / 100% 100% no-repeat;
  transform: translate3d(0, 0, 0);
}

.portal-sky {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(60% 40% at 68% 24%, rgb(243 181 68 / 0.22), transparent 70%),
    radial-gradient(70% 30% at 50% 82%, rgb(243 181 68 / 0.38), transparent 70%),
    linear-gradient(180deg, #07080c 0%, #10121b 42%, #261d19 74%, #3d2817 100%);
  translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -10px);
  animation: sky 18s ease-in-out infinite alternate;
}

@keyframes sky { to { filter: brightness(1.12); } }

.portal-stars { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }

.portal-orb {
  position: absolute;
  inset-block-start: 26%;
  inset-inline-start: 50%;
  inline-size: 34%;
  aspect-ratio: 1;
  translate: calc(50% + var(--px, 0) * -18px) calc(var(--py, 0) * -14px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff8e6, #ffe3a8 30%, var(--signal) 55%, rgb(224 154 51 / 0) 72%);
  box-shadow: 0 0 60px 20px rgb(243 181 68 / 0.3), 0 0 140px 60px rgb(243 181 68 / 0.12);
}
.portal-orb:dir(ltr) { translate: calc(-50% + var(--px, 0) * -18px) calc(var(--py, 0) * -14px); }

.portal-land { position: absolute; inset-inline: -6%; inline-size: 112%; }
.portal-land-far {
  inset-block-end: 14%;
  block-size: 30%;
  fill: #1c1815;
  translate: calc(var(--px, 0) * -14px) 0;
}
.portal-land-near {
  inset-block-end: -2%;
  block-size: 30%;
  fill: #0a0908;
  translate: calc(var(--px, 0) * -26px) 0;
}
.portal-mist {
  position: absolute;
  inset: auto 0 18% 0;
  block-size: 22%;
  background: linear-gradient(180deg, transparent, rgb(243 181 68 / 0.16), transparent);
  filter: blur(6px);
}

.portal-rim { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.portal-rim path { fill: none; stroke-linecap: round; }
.portal-rim-base { stroke: url(#rim-light); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0.85; filter: drop-shadow(0 0 6px rgb(243 181 68 / 0.7)); }
/* Scales with the arch (no non-scaling stroke), so its dash follows pathLength: one light travelling the rim. */
.portal-rim-run {
  stroke: #fff;
  stroke-width: 0.55;
  stroke-dasharray: 9 91;
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px var(--signal));
  animation: rim 7s linear infinite;
}

@keyframes rim { to { stroke-dashoffset: -100; } }

.portal-floor {
  position: absolute;
  inset-inline: -10%;
  inset-block-end: -9%;
  block-size: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(243 181 68 / 0.32), rgb(243 181 68 / 0.06) 55%, transparent);
  filter: blur(8px);
  z-index: -1;
}

/* ================================================================ worlds: shared blocks */

/* A titled block of a page: start-aligned heading, then content. */
.block { grid-template-columns: minmax(0, 1fr); }
.block-head { display: grid; gap: var(--space-3); max-inline-size: 50rem; }

.world-chip-dot { inline-size: 0.45rem; block-size: 0.45rem; flex: none; rotate: 45deg; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* --- starter questions */

.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.answer { padding: 0; transition: border-color var(--fast); }
.answer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 1.1rem 1.4rem;
  font-family: var(--font-display);
  font-size: var(--size-l);
  font-weight: 800;
  list-style: none;
  cursor: pointer;
  transition: color var(--fast);
}
.answer summary::-webkit-details-marker { display: none; }
.answer summary:hover { color: var(--accent); }
.answer-toggle { color: var(--text-3); rotate: -90deg; transition: rotate var(--medium) var(--ease-out), color var(--fast); }
.answer[open] .answer-toggle { rotate: 90deg; color: var(--accent); }
.answer p { padding: 0 1.4rem 1.4rem; color: var(--text-2); }
.answer[open] { border-color: color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: inset var(--bar-x) 0 0 var(--accent); }

/* --- the journey: new, in the middle, finished; over one page */

.journey { display: grid; gap: var(--space-4); }

/* The shield: a status bar of where the reader is, and what that lets the page show. */
.shield {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-3) var(--space-6);
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.25rem, 3vw, 2rem);
  box-shadow: inset 0 2px 0 var(--accent);
}
.shield-where { display: grid; gap: var(--space-1); min-inline-size: 0; }
.shield-title { margin: 0; font-family: var(--font-display); font-size: var(--size-xl); font-weight: 850; }
.shield-title strong { color: var(--accent); }
.shield-means { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; padding-block-start: var(--space-3); font-size: var(--size-s); color: var(--text-2); border-block-start: 1px solid var(--line-1); }
.shield-means > .icon { color: var(--good); }
.shield-locked { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-3); }
.shield-locked .icon { inline-size: 0.95rem; block-size: 0.95rem; }

/* Three ways in, as a mode select. */
.journey-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.journey-input { position: absolute; opacity: 0; pointer-events: none; }
.journey-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: rgb(255 248 235 / 0.025);
  border: 1px solid var(--line-2);
  border-radius: var(--square);
  cursor: pointer;
  transition: border-color var(--fast), background-color var(--fast), box-shadow var(--medium);
}
.journey-tab > .icon {
  box-sizing: content-box;
  inline-size: 1.3rem;
  block-size: 1.3rem;
  padding: 0.55rem;
  color: var(--text-3);
  background: rgb(255 248 235 / 0.03);
  border: 1px solid var(--line-2);
  transition: color var(--fast), background-color var(--fast), border-color var(--fast);
}
.journey-tab span { display: grid; gap: 0.1rem; min-inline-size: 0; }
.journey-tab strong { font-family: var(--font-display); font-size: var(--size-l); font-weight: 800; }
.journey-tab small { font-size: var(--size-xs); color: var(--text-3); }
.journey-tab:hover { border-color: var(--line-3); background: rgb(255 248 235 / 0.04); }
.journey-input:checked + .journey-tab {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: linear-gradient(var(--accent-soft), transparent 90%);
  box-shadow: 0 0 40px -16px var(--accent-glow);
}
.journey-input:checked + .journey-tab > .icon { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.journey-input:focus-visible + .journey-tab { outline: 2px solid var(--accent); outline-offset: 2px; }

.journey-panel { display: none; padding: clamp(1.25rem, 3vw, 2rem); animation: dossier-in var(--medium) var(--ease-out); }
.journey:has(#j-new:checked) [data-journey="new"],
.journey:has(#j-reading:checked) [data-journey="reading"],
.journey:has(#j-done:checked) [data-journey="done"] { display: grid; gap: var(--space-5); }
.journey-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5) var(--space-7); }
.journey-head { display: block; margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--size-l); font-weight: 800; color: var(--text-1); }

.why { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.why li { position: relative; padding-inline-start: 1.4rem; line-height: 1.9; color: var(--text-2); }
.why li::before { content: ""; position: absolute; inset-block-start: 0.72em; inset-inline-start: 0.1rem; inline-size: 0.4rem; block-size: 0.4rem; rotate: 45deg; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.journey-start { display: grid; align-content: start; gap: var(--space-3); }
.journey-start p { margin: 0; }
.journey-work { display: flex; align-items: center; gap: var(--space-3); }
.journey-work > .icon { inline-size: 1.6rem; block-size: 1.6rem; color: var(--accent); }
.journey-work span { display: grid; }
.journey-work strong { font-family: var(--font-display); font-size: var(--size-xl); font-weight: 900; }
.journey-work small { font-size: var(--size-xs); color: var(--text-3); }
.journey-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.journey-begin { margin: 0; }

.where-form { display: grid; align-content: start; gap: var(--space-3); }
.where-select {
  inline-size: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  color: var(--text-1);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--square);
}
.where-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.where-form .btn { justify-self: start; }
.where-caveat { display: flex; gap: var(--space-2); margin: 0; font-size: var(--size-s); line-height: 1.8; color: var(--text-2); }
.where-caveat .icon { flex: none; margin-block-start: 0.2rem; color: var(--good); }
.where-saved { margin: 0; font-size: var(--size-xs); }
.where-next { margin: 0; font-size: var(--size-s); color: var(--text-2); }
.where-next strong { color: var(--accent); }
.where-done { grid-column: 1; margin: 0; }
.recap { grid-column: 2; grid-row: 1 / span 2; display: grid; align-content: start; gap: var(--space-3); }
.recap-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--size-s); line-height: 1.9; color: var(--text-2); }
.recap-list strong { color: var(--text-1); margin-inline-end: 0.3rem; }
.recap-met { margin: 0; font-size: var(--size-s); color: var(--text-1); }
.recap-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--size-s); }
.recap-links a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-2); }
.recap-links a:hover { color: var(--accent); }
.recap-links .icon { inline-size: 1rem; block-size: 1rem; color: var(--accent); }
.recent-asks h4 { margin: 0 0 var(--space-2); font-size: var(--size-xs); font-weight: 700; color: var(--text-3); }
.recent-asks ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--size-s); }
.recent-asks a { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--accent-soft); text-underline-offset: 0.3em; }

.guide-only { border-block-start: 1px solid var(--line-1); padding-block-start: var(--space-4); }
.guide-only summary { cursor: pointer; font-size: var(--size-s); color: var(--text-2); }
.guide-only summary:hover { color: var(--text-1); }
.guide-only[open] { display: grid; gap: var(--space-3); }
.guide-only p { margin: 0; font-size: var(--size-s); }

.after-gate { display: flex; gap: var(--space-4); align-items: start; }
.after-gate > .icon { flex: none; inline-size: 1.8rem; block-size: 1.8rem; color: var(--accent); }
.after-gate p { margin: 0 0 var(--space-3); }
.after-ends { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.after-ends form { margin: 0; }
.after-head p { margin: 0; }
.insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.insight { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: rgb(255 248 235 / 0.025); border: 1px solid var(--line-1); border-radius: var(--square); }
.insight h4 { margin: 0; font-family: var(--font-display); font-size: var(--size-l); font-weight: 800; }
.insight p { margin: 0; font-size: var(--size-s); line-height: 1.9; color: var(--text-2); }
.insight-kind, .insight-beyond { justify-self: start; padding: 0 0.55rem; font-size: var(--size-xs); font-weight: 700; border: 1px solid currentColor; }
.insight-kind { color: var(--accent); background: var(--accent-soft); }
.insight.is-fact .insight-kind { color: var(--good); background: rgb(125 211 174 / 0.08); }
.insight.is-discussion .insight-kind { color: var(--calm); background: rgb(164 180 255 / 0.08); }
.insight-beyond { color: var(--bad); background: rgb(255 99 112 / 0.08); }
.insight .insight-source { font-size: var(--size-xs); color: var(--text-3); }
.after-more { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--size-s); }
.after-next { margin: 0; font-size: var(--size-s); }
.after-next a { color: var(--accent); }

/* --- experience this work: where to get it */

.access { display: grid; gap: var(--space-4); }
.access:has(#use-read:checked) :is(.access-work:not([data-uses~="read"]), .access-item:not([data-uses~="read"]), .access-missing),
.access:has(#use-listen:checked) :is(.access-work:not([data-uses~="listen"]), .access-item:not([data-uses~="listen"]), .access-missing),
.access:has(#use-watch:checked) :is(.access-work:not([data-uses~="watch"]), .access-item:not([data-uses~="watch"]), .access-missing),
.access:has(#use-play:checked) :is(.access-work:not([data-uses~="play"]), .access-item:not([data-uses~="play"]), .access-missing) { display: none; }
.access-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); gap: var(--space-3); align-items: start; }
.access-work { display: grid; gap: var(--space-3); padding: var(--space-5); }
.access-work.is-main { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: inset 0 2px 0 var(--accent); }
.access-work-head { display: flex; gap: var(--space-3); align-items: center; }
.access-work-head h3 { margin: 0; font-family: var(--font-display); font-size: var(--size-xl); font-weight: 850; }
.access-icon { display: grid; place-items: center; flex: none; inline-size: 2.6rem; block-size: 2.6rem; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.access-work-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem var(--space-3); margin: 0.2rem 0 0; font-size: var(--size-xs); color: var(--text-3); }
.access-pitch { margin: 0; font-size: var(--size-s); line-height: 1.9; color: var(--text-2); }
.access-pitch.is-locked { display: flex; align-items: center; gap: var(--space-2); color: var(--text-3); }
.access-items { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.access.access .access-work.is-main .access-items { grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); }
.access-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: rgb(255 248 235 / 0.025); border: 1px solid var(--line-1); border-radius: var(--square); transition: border-color var(--fast); }
.access-item:hover { border-color: var(--line-3); }
.access-media { color: var(--text-3); }
.access-body { display: grid; gap: 0.15rem; min-inline-size: 0; }
.access-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem var(--space-2); margin: 0; font-size: var(--size-s); color: var(--text-2); }
.access-title strong { color: var(--text-1); }
.access-meta { display: flex; flex-wrap: wrap; gap: 0.2rem var(--space-3); margin: 0; font-size: var(--size-xs); color: var(--text-3); }
.access-check.is-verified { color: var(--good); }
.access-check.is-unverified { color: var(--signal); }
.access-note { margin: 0.2rem 0 0; font-size: var(--size-xs); line-height: 1.8; color: var(--text-3); }
.access-go { white-space: nowrap; }
.access-go .icon { inline-size: 0.95rem; block-size: 0.95rem; }
.access-missing summary { cursor: pointer; font-size: var(--size-s); color: var(--text-3); }
.access-missing summary:hover { color: var(--text-1); }
.access-missing ul { margin: var(--space-2) 0; padding-inline-start: 1.2rem; font-size: var(--size-s); color: var(--text-2); }
.access-missing p, .access-none { margin: 0; font-size: var(--size-xs); }
.access-foot { margin: 0; font-size: var(--size-xs); }

/* --- about this guide */

.about-card { display: grid; gap: var(--space-4); padding: clamp(1.25rem, 3vw, 2rem); }
.about-title { margin: 0; font-family: var(--font-display); font-size: var(--size-l); font-weight: 800; }
.about-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.about-sections li { display: flex; gap: var(--space-2); align-items: start; }
.about-sections .icon { flex: none; inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: 0.2rem; }
.about-sections .is-ready .icon { color: var(--good); }
.about-sections .is-pending .icon { color: var(--signal); }
.about-sections span { display: grid; }
.about-sections strong { font-size: var(--size-s); }
.about-sections small { font-size: var(--size-xs); color: var(--text-3); }
.about-editorial { display: grid; gap: var(--space-2); margin: 0; padding-block-start: var(--space-3); font-size: var(--size-xs); line-height: 1.9; color: var(--text-3); border-block-start: 1px solid var(--line-1); }

@media (max-width: 52rem) {
  .journey-grid { grid-template-columns: minmax(0, 1fr); }
  .recap, .where-done { grid-column: auto; grid-row: auto; }
}
@media (max-width: 40rem) {
  /* Three side by side still, as compact tiles. */
  .journey-tabs { gap: var(--space-2); }
  .journey-tab { flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-2); text-align: center; }
  .journey-tab strong { font-size: var(--size-s); }
  .journey-tab small { display: none; }
  .shield { grid-template-columns: minmax(0, 1fr); }
  .access-item { grid-template-columns: auto minmax(0, 1fr); }
  .access-go { grid-column: 1 / -1; justify-content: center; }
}

/* --- the question box */

/* A command line: one long field, lit when it has focus. */
.ask-form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-inline-size: 52rem;
  padding: var(--space-2);
  padding-inline-start: var(--space-4);
  transition: border-color var(--fast), box-shadow var(--medium);
}
.ask-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 48px -12px var(--accent-glow); }
.ask-icon { flex: none; color: var(--accent); }
.ask-form input {
  flex: 1;
  min-inline-size: 0;
  padding: var(--space-3) 0;
  font: inherit;
  font-size: var(--size-l);
  color: var(--text-1);
  background: none;
  border: 0;
  outline: none;
}
.ask-form input::placeholder { color: var(--text-3); }
.ask-form input::-webkit-search-cancel-button { display: none; }
.ask-form .btn { flex: none; }

.ask-examples { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.ask-result { display: grid; gap: var(--space-4); max-inline-size: 52rem; }
.ask-result:empty { display: none; }
.ask-result[aria-busy="true"] { opacity: 0.55; transition: opacity var(--fast); }

.ask-answer, .ask-miss, .ask-care { padding: var(--space-5); animation: ask-in var(--medium) var(--ease-out); }
.ask-answer { box-shadow: inset var(--bar-x) 0 0 var(--accent); }
.ask-answer h3, .ask-miss h3, .ask-care h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--size-xl); font-weight: 800; }
.ask-answer p:last-child { margin: 0; color: var(--text-2); line-height: 1.9; }
.ask-asked { margin: 0 0 var(--space-2); font-size: var(--size-s); color: var(--accent); }
.ask-miss p { margin: 0; }

.ask-care { display: flex; gap: var(--space-4); align-items: start; border-color: rgb(125 211 174 / 0.4); box-shadow: inset var(--bar-x) 0 0 var(--good); }
.ask-care > .icon { flex: none; inline-size: 1.75rem; block-size: 1.75rem; color: var(--good); }
.ask-care p { margin: 0 0 var(--space-2); color: var(--text-2); line-height: 1.9; }
.ask-care a { color: var(--good); }

.ask-nearby h4 { margin: 0 0 var(--space-2); font-size: var(--size-s); font-weight: 700; color: var(--text-3); }
.ask-nearby ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ask-nearby a { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--accent-soft); text-underline-offset: 0.3em; }
.ask-nearby a:hover { text-decoration-color: var(--accent); }

@keyframes ask-in { from { opacity: 0; translate: 0 6px; } }

@media (max-width: 34rem) {
  .ask-form { flex-wrap: wrap; padding: var(--space-3); }
  .ask-form input { flex-basis: calc(100% - 3rem); }
  .ask-form .btn { inline-size: 100%; justify-content: center; }
}

/* --- reading paths: a chain of steps, like a quest line */

.route {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(10rem, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  padding-block-end: var(--space-2);
  scrollbar-width: thin;
}
.route-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-block-start: 0.25rem;
}
/* The line joining each step to the next. */
.route-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 1.6rem;
  inset-inline-start: 3.5rem;
  inset-inline-end: calc(-1 * var(--space-3) + 0.5rem);
  block-size: 1px;
  background: linear-gradient(90deg, var(--accent), var(--line-2));
  opacity: 0.7;
}
.route-step:not(:last-child):dir(rtl)::after { background: linear-gradient(-90deg, var(--accent), var(--line-2)); }
.route-mark {
  display: grid;
  place-items: center;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--square);
  box-shadow: 0 0 22px -6px var(--accent-glow);
}
.route-mark .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.route-step strong { font-family: var(--font-display); font-weight: 800; line-height: 1.5; }
.route-note { font-size: var(--size-s); color: var(--text-2); }
.route-tag { justify-self: start; padding: 0 0.6rem; font-size: var(--size-xs); color: var(--text-3); border: 1px dashed var(--line-3); }
.route-step.is-optional .route-mark { border-style: dashed; background: transparent; box-shadow: none; color: var(--text-3); border-color: var(--line-3); }

/* --- the cast: a codex of everyone met so far */

.codex { display: grid; gap: var(--space-4); }
.codex-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.codex-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin: 0; color: var(--text-2); font-size: var(--size-s); }
.codex-count strong { font-family: var(--font-display); font-size: 2rem; font-weight: 900; line-height: 1; color: var(--accent); }

/* Meters are made of lit segments, like a health bar. */
:is(.codex-meter, .stage-meter) {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: rgb(255 248 235 / 0.08);
  overflow: hidden;
  mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 9px);
}
.codex-meter { flex-basis: 100%; inline-size: min(18rem, 100%); block-size: 6px; }
.codex-meter::-webkit-meter-bar { background: rgb(255 248 235 / 0.08); border: 0; border-radius: 0; block-size: 6px; }
.codex-meter::-webkit-meter-optimum-value { background: var(--accent); border-radius: 0; }
.codex-meter::-moz-meter-bar { background: var(--accent); border-radius: 0; }

.codex-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.codex-filter { position: absolute; opacity: 0; pointer-events: none; }
.codex-filters label {
  padding: 0.3rem 0.95rem;
  font-size: var(--size-s);
  font-weight: 600;
  color: var(--text-2);
  background: rgb(255 248 235 / 0.03);
  border: 1px solid var(--line-2);
  border-radius: var(--square);
  cursor: pointer;
  transition: color var(--fast), border-color var(--fast), background-color var(--fast);
}
.codex-filters label:hover { color: var(--text-1); border-color: var(--line-3); }
.codex-filter:checked + label { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); box-shadow: 0 0 20px -6px var(--accent-glow); }
.codex-filter:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.codex:has(#cast-g0:checked) .cast-card:not([data-g="0"]),
.codex:has(#cast-g1:checked) .cast-card:not([data-g="1"]),
.codex:has(#cast-g2:checked) .cast-card:not([data-g="2"]),
.codex:has(#cast-g3:checked) .cast-card:not([data-g="3"]),
.codex:has(#cast-g4:checked) .cast-card:not([data-g="4"]),
.codex:has(#cast-g5:checked) .cast-card:not([data-g="5"]) { display: none; }

.cast {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  grid-auto-flow: dense;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cast-card { position: relative; transition: border-color var(--fast), box-shadow var(--medium); }
.cast-card:not(.is-locked):hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
/* An open card becomes a dossier across the whole row. */
.cast-card:has(details[open]) { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 0 70px -30px var(--accent-glow); }

.cast-card summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-5);
  list-style: none;
  cursor: pointer;
}
.cast-card summary::-webkit-details-marker { display: none; }
.cast-card summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cast-head { display: grid; gap: 0.1rem; min-inline-size: 0; }
.cast-name { font-family: var(--font-display); font-size: var(--size-l); font-weight: 800; line-height: 1.4; color: var(--text-1); }
.cast-role { font-size: var(--size-xs); color: var(--accent); }
.cast-open { color: var(--text-3); rotate: -90deg; transition: rotate var(--medium) var(--ease-out), color var(--fast); }
.cast-card summary:hover .cast-open { color: var(--accent); }
details[open] .cast-open { rotate: 90deg; color: var(--accent); }
.cast-intro { grid-column: 1 / -1; font-size: var(--size-s); line-height: 1.9; color: var(--text-2); }
.cast-known { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--size-xs); color: var(--text-3); }
.cast-known span { display: inline-flex; align-items: center; gap: 0.3rem; }
.cast-known .icon { inline-size: 0.9rem; block-size: 0.9rem; color: var(--accent); }

/* A portrait tile: the initial, lit in the world's colours. */
.cast-portrait {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 3.4rem;
  block-size: 3.4rem;
  background: linear-gradient(145deg, var(--accent-soft), transparent 70%), var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: var(--square);
  box-shadow: 0 10px 28px -12px var(--accent-glow);
}
.cast-portrait.has-face { overflow: hidden; padding: 0; }
.cast-portrait img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.cast-portrait > span {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 18px var(--accent-glow);
}

.dossier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-5);
  padding: 0 var(--space-5) var(--space-5);
  animation: dossier-in var(--medium) var(--ease-out);
}
@keyframes dossier-in { from { opacity: 0; translate: 0 -6px; } }
.dossier small { display: block; margin-block-end: var(--space-2); font-size: var(--size-xs); font-weight: 700; color: var(--text-3); }
.dossier-facts { display: grid; align-content: start; gap: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--line-1); }
.dossier-first { margin: 0; }
/* How they have looked so far, oldest first: the reader's own record of a change. */
.dossier-faces ol { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.dossier-faces li { display: grid; justify-items: center; gap: var(--space-1); inline-size: 5rem; font-size: var(--size-xs); line-height: 1.5; text-align: center; color: var(--text-2); }
.dossier-faces img { inline-size: 5rem; block-size: 6.25rem; object-fit: cover; border: 1px solid var(--line-3); }
.dossier-faces li:last-child img { border-color: var(--accent); box-shadow: 0 0 20px -6px var(--accent-glow); }
.dossier-first strong { font-family: var(--font-display); color: var(--text-1); }
.dossier-aka ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.dossier-aka li { padding: 0.15rem 0.7rem; font-size: var(--size-s); color: var(--text-1); background: rgb(255 248 235 / 0.04); border: 1px solid var(--line-2); }
.dossier-links ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--size-s); color: var(--text-2); }
.dossier-links strong { color: var(--text-1); }
.dossier-ask { justify-self: start; }
.dossier-story { padding-block-start: var(--space-4); border-block-start: 1px solid var(--line-1); }
.dossier-timeline { position: relative; display: grid; gap: var(--space-4); margin: 0; padding: 0; padding-inline-start: var(--space-5); list-style: none; }
/* The thread of the story, with a marker for each thing learned. */
.dossier-timeline::before { content: ""; position: absolute; inset-block: 0.4rem; inset-inline-start: 0.3rem; inline-size: 1px; background: linear-gradient(var(--accent), var(--line-1)); }
.dossier-timeline li { position: relative; }
.dossier-timeline li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: calc(-1 * var(--space-5) + 0.08rem);
  inline-size: 0.5rem;
  block-size: 0.5rem;
  rotate: 45deg;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}
.dossier-timeline p { margin: var(--space-1) 0 0; font-size: var(--size-s); line-height: 1.9; color: var(--text-1); }

/* Everyone not met yet: one card, faces in the fog, nothing else. */
.cast-card.is-locked {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px dashed var(--line-2);
  background: repeating-linear-gradient(135deg, rgb(255 248 235 / 0.02) 0 10px, transparent 10px 20px);
}
.cast-ghosts { display: flex; inline-size: auto; background: none; border: 0; box-shadow: none; }
.cast-ghosts > span {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-inline-start: -0.7rem;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
}
.cast-ghosts > span:first-child { margin-inline-start: 0; }
.cast-ghosts .icon { inline-size: 1rem; block-size: 1rem; }
.cast-card.is-locked .cast-name { color: var(--text-2); }
.cast-card.is-locked .cast-role { color: var(--text-3); }

@media (max-width: 40rem) {
  .dossier { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ worlds: pages, cards, shelves */

.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--size-xs); font-weight: 600; color: var(--text-3); }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--line-4); }
.crumbs a { color: var(--text-2); transition: color var(--fast); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--text-1); }

.page-intro { display: grid; gap: var(--space-3); max-inline-size: 50rem; padding-block: var(--space-4) var(--space-2); }
.page-intro .title { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.75rem); line-height: 1.12; }

/* --- a world's own page */

/* Its hero is the home page's stage at full size: the cover fills the end side, the words the start. */
.world-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  gap: clamp(1.25rem, 4svh, 2.5rem);
  min-block-size: min(100svh, 64rem);
  margin-inline: calc(50% - 50vw);
  margin-block-start: calc(-1 * var(--hud-h));
  padding: calc(var(--hud-h) + var(--space-5)) calc(50vw - 50%) var(--space-7);
  overflow: hidden;
}
.world-hero .crumbs { position: relative; z-index: 2; align-self: start; }
.world-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.world-hero-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(6 6 7 / 0.3), var(--bg-0) 97%); }
.world-hero-backdrop img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0.85;
  scale: 1.25;
  filter: blur(60px) saturate(120%) brightness(0.42);
}
.world.is-page { display: grid; grid-template-columns: minmax(0, 42rem); }
.world-hero .world-art { inline-size: 62%; }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tag-link {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.8rem;
  font-size: var(--size-s);
  font-weight: 600;
  color: var(--text-2);
  background: rgb(255 248 235 / 0.03);
  border: 1px solid var(--line-2);
  border-radius: var(--square);
  transition: color var(--fast), border-color var(--fast), background-color var(--fast);
}
.tag-link:hover { color: var(--text-1); border-color: var(--line-4); background: rgb(255 248 235 / 0.07); }
.tag-link.is-mood::before { content: ""; inline-size: 0.35rem; block-size: 0.35rem; margin-inline-end: 0.5rem; rotate: 45deg; background: var(--accent); }

.world-sections { display: grid; gap: var(--space-9); }

/* --- world cards: the same card on shelves, grids and home rows */

.world-card {
  display: grid;
  gap: var(--space-3);
  color: var(--text-1);
}
.world-card:hover { color: var(--text-1); }
.world-card-art {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-2);
  border-radius: var(--square);
  box-shadow: 0 0 0 1px var(--line-2), var(--shadow-deep);
  transition: box-shadow var(--medium) var(--ease-out), translate var(--medium) var(--ease-out);
}
.world-card-art img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 1s var(--ease-out), filter var(--medium); filter: brightness(0.9); }
/* A target locks onto the cover under the pointer. */
.world-card-art::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 2;
  color: var(--accent);
  background: var(--brackets);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fast), inset var(--medium) var(--ease-out);
}
.world-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgb(6 6 7 / 0.55)); pointer-events: none; }
.world-card:hover .world-card-art { translate: 0 -4px; box-shadow: 0 0 0 1px var(--accent), 0 30px 60px -24px rgb(0 0 0 / 0.95), 0 0 50px -16px var(--accent-glow); }
.world-card:hover .world-card-art img { scale: 1.05; filter: none; }
.world-card:is(:hover, :focus-visible) .world-card-art::before { opacity: 1; inset: 10px; }
.world-card-status {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 1;
  padding: 0.15rem 0.6rem;
  font-size: var(--size-xs);
  font-weight: 700;
  background: rgb(6 6 7 / 0.7);
  border: 1px solid rgb(255 248 235 / 0.16);
  backdrop-filter: blur(8px);
}
.world-card-body { display: grid; line-height: 1.5; }
.world-card-body strong { font-family: var(--font-display); font-size: var(--size-l); font-weight: 800; }
.world-card-body small { font-size: var(--size-s); color: var(--text-3); }

.shelf-more-art {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
  font-size: var(--size-s);
  color: var(--text-2);
  background: repeating-linear-gradient(-45deg, rgb(255 248 235 / 0.025) 0 8px, transparent 8px 16px), var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.shelf-more-art::after { content: none; }
.shelf-more-art .icon { inline-size: 1.6rem; block-size: 1.6rem; color: var(--signal); }
.shelf-more:hover .shelf-more-art { box-shadow: inset 0 0 0 1px var(--signal), 0 0 40px -16px var(--signal-glow); }
.shelf-more .world-card-body small { color: var(--text-3); }

.world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-6) var(--space-4); }

/* --- shelves: a row of cards that scrolls sideways */

.shelf { display: grid; gap: var(--space-4); min-inline-size: 0; }
/* Wide screens: the shelf's name and words stand beside its covers, so a short shelf still fills its row. */
@media (min-width: 64rem) {
  .shelf { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; gap: var(--space-6); }
  .shelf-head { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-3); }
  .shelf-head .muted { max-inline-size: none; }
}
.shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.shelf-head > div { position: relative; display: grid; gap: var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--line-2); inline-size: 100%; }
.shelf-head > div::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0; inline-size: 2.5rem; block-size: 1px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.shelf-title { font-size: var(--size-xl); font-weight: 900; }
.shelf-head .muted { font-size: var(--size-s); max-inline-size: 40rem; }
.shelf-all { display: inline-flex; flex: none; align-items: center; gap: var(--space-1); font-size: var(--size-s); font-weight: 700; color: var(--text-2); transition: color var(--fast); }
.shelf-all:hover { color: var(--accent); }
.shelf-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(11rem, 13rem);
  gap: var(--space-4);
  overflow-x: auto;
  /* A scroll container clips what spills past its edge: room for the first card's ring and hover glow. */
  padding: var(--space-3) var(--space-6);
  margin-inline: calc(-1 * var(--space-6));
  scroll-padding-inline: var(--space-6);
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
}
.shelf-row > * { scroll-snap-align: start; }

/* --- popular questions on the home page */

.popular { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.popular-card { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5); transition: border-color var(--fast); }
.popular-card:hover { border-color: var(--line-3); }
.popular-world { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--size-xs); font-weight: 700; color: var(--accent); }
.popular-world:hover { color: var(--text-1); }
.popular-card h3 { font-size: var(--size-l); font-weight: 800; }
.popular-card p { display: -webkit-box; overflow: hidden; font-size: var(--size-s); color: var(--text-2); -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.popular-more { display: inline-flex; align-items: center; gap: var(--space-2); margin-block-start: auto; padding-block-start: var(--space-3); font-size: var(--size-s); font-weight: 700; color: var(--text-2); border-block-start: 1px solid var(--line-1); transition: color var(--fast); }
.popular-more:hover { color: var(--accent); }

/* --- moods on the worlds index */

.moods { display: grid; gap: var(--space-5); }
.mood-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.mood-card { display: grid; gap: var(--space-2); block-size: 100%; padding: var(--space-5); color: var(--text-1); transition: border-color var(--fast); }
.mood-card:hover { color: var(--text-1); border-color: var(--line-3); }
.mood-card strong { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: var(--size-xl); font-weight: 850; }
.mood-card strong::before { content: ""; inline-size: 0.42rem; block-size: 0.42rem; rotate: 45deg; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.mood-card span { font-size: var(--size-s); color: var(--text-2); }
.mood-card small { font-size: var(--size-xs); color: var(--text-3); }

.other-shelves { display: grid; gap: var(--space-3); }

/* ================================================================ reading progress */

/* The map's gradients take the world's colours, so every world's map matches its cover. */
.fog-stop-accent { stop-color: var(--accent); }
.fog-stop-deep { stop-color: var(--accent-deep); }
.fog-stop-cool { stop-color: var(--accent-cool); }

.fog-feed-empty { font-size: var(--size-s); color: var(--text-3); }
.fog-ahead {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: center;
  font-size: var(--size-s);
  color: var(--text-2);
}
.fog-ahead .icon { color: var(--accent); }

/* "Where are you?" */
.progress-now { display: grid; justify-items: end; gap: var(--space-1); min-inline-size: 13rem; }
.progress-now small { font-size: var(--size-xs); color: var(--text-3); }
.progress-now strong { font-family: var(--font-display); font-size: var(--size-xl); font-weight: 900; color: var(--accent); }

.stage-meter { inline-size: 100%; block-size: 8px; }
.stage-meter::-webkit-progress-bar { background: rgb(255 248 235 / 0.08); border-radius: 0; }
.stage-meter::-webkit-progress-value { background: var(--accent); border-radius: 0; }
.stage-meter::-moz-progress-bar { background: var(--accent); border-radius: 0; }

.stage-picker { display: grid; gap: var(--space-4); }
.stage-picker fieldset { display: flex; flex-wrap: wrap; gap: var(--space-2); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.stage-picker input { position: absolute; opacity: 0; pointer-events: none; }
.stage-picker label {
  padding: 0.4rem 0.9rem;
  font-size: var(--size-s);
  font-weight: 700;
  color: var(--text-2);
  background: rgb(255 248 235 / 0.03);
  border: 1px solid var(--line-2);
  border-radius: var(--square);
  cursor: pointer;
  transition: color var(--fast), background-color var(--fast), border-color var(--fast), box-shadow var(--medium);
}
.stage-picker label:hover { color: var(--text-1); border-color: var(--line-3); }
.stage-picker label.is-start { border-style: dashed; }
.stage-picker label.is-reached { color: var(--text-1); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.stage-picker input:checked + label { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: 0 0 22px -6px var(--accent-glow); }
.stage-picker input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.stage-picker .btn { justify-self: start; }

/* Later facts on a character card, each with the stage it came from. */
.cast-note-at { display: inline-block; margin-inline-end: var(--space-2); padding: 0 0.5rem; font-size: var(--size-xs); font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }

/* My library and the home page's "continue" row */
.library, .continue { display: grid; gap: var(--space-5); }
.library-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.library-empty { padding: var(--space-5); color: var(--text-2); }
.continue-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); padding-inline-end: var(--space-5); color: var(--text-1); transition: border-color var(--fast); }
.continue-card:hover { color: var(--text-1); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.continue-card img { inline-size: 3.6rem; block-size: 4.5rem; flex: none; object-fit: cover; box-shadow: 0 0 0 1px var(--line-3); }
.continue-body { display: grid; flex: 1; gap: 0.25rem; min-inline-size: 0; }
.continue-body strong { font-family: var(--font-display); font-size: var(--size-l); font-weight: 800; }
.continue-body small { font-size: var(--size-s); color: var(--accent); }
.continue-go { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--size-s); font-weight: 700; color: var(--text-2); }
.continue-card:hover .continue-go { color: var(--accent); }

/* ================================================================ story fog */

/*
  Fog of war over a story, on a tactical map. Everything a reader has not
  reached sits under drifting fog as a "?"; moving along the track clears
  it: the fog puff fades, the character ignites with a burst, its
  relationships draw themselves, and the discovery feed logs what was
  learned. site.js toggles .is-on (reached) and .is-new (just reached) on
  every [data-at] element.
*/

.fog {
  --thumb: 1.25rem;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-5);
  padding: clamp(1rem, 3vw, 2rem);
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 45%, var(--accent-soft), transparent 70%),
    linear-gradient(var(--line-1) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--line-1) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--square);
  box-shadow: var(--shadow-deep), 0 0 120px -60px var(--accent-glow);
}
/* The map's frame: brackets at its corners. */
.fog::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  color: var(--line-4);
  background: var(--brackets);
  pointer-events: none;
}

/* --- heads-up display */

.fog-hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-block-end: var(--space-4); border-block-end: 1px solid var(--line-1); }

.fog-world {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.9rem;
  font-size: var(--size-s);
  font-weight: 700;
  border: 1px solid var(--line-2);
  background: rgb(255 248 235 / 0.03);
}
.fog-dot { inline-size: 0.45rem; block-size: 0.45rem; rotate: 45deg; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

.fog-where { display: grid; justify-items: center; line-height: 1.3; }
.fog-where small { font-size: var(--size-xs); color: var(--text-3); }
.fog-where strong {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 30px var(--accent-glow);
}

.fog-count { display: flex; gap: var(--space-4); font-size: var(--size-s); color: var(--text-2); }
.fog-count strong { font-family: var(--font-display); font-size: var(--size-l); color: var(--text-1); }

/* --- the map */

.fog-body { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-4); align-items: stretch; }

.fog-map {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  background: radial-gradient(70% 80% at 50% 45%, rgb(255 248 235 / 0.03), transparent 70%);
  scrollbar-width: thin;
}
.fog-svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; font-family: var(--font-body); }
.fog-edge text:empty { display: none; }

/* Only on phones, where the map is wider than the screen. */
.fog-pan {
  position: sticky;
  inset-inline-start: 50%;
  display: none;
  inline-size: max-content;
  margin-block-start: calc(-1 * var(--space-6));
  padding: 0.25rem 0.75rem;
  font-size: var(--size-xs);
  color: var(--text-2);
  background: rgb(6 6 7 / 0.85);
  border: 1px solid var(--line-2);
  translate: 50% 0;
}
.fog-pan:dir(ltr) { translate: -50% 0; }

.fog-clouds ellipse { fill: rgb(255 240 220 / 0.07); animation: drift 26s ease-in-out infinite alternate; }
.fog-clouds ellipse:nth-child(2) { animation-duration: 31s; animation-delay: -8s; }
.fog-clouds ellipse:nth-child(3) { animation-duration: 23s; animation-delay: -4s; }
.fog-clouds ellipse:nth-child(4) { animation-duration: 35s; animation-delay: -12s; }

@keyframes drift { to { translate: 60px -24px; } }

/* Relationships draw themselves (pathLength is 1, so the dash is the whole line). */
.fog-edge path {
  fill: none;
  stroke: url(#fog-edge);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.85;
  transition: stroke-dashoffset 1.1s var(--ease-out) 0.25s;
}
.fog-edge text {
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--text-2);
  stroke: var(--bg-1);
  stroke-width: 7px;
  stroke-linejoin: round;
  paint-order: stroke;
  opacity: 0;
  transition: opacity 0.5s ease 0.9s;
}
.fog-edge.is-on path { stroke-dashoffset: 0; }
.fog-edge.is-on text { opacity: 1; }

/* Characters: a "?" under fog until reached, then they ignite. */
.fog-node, .fog-node * { transform-box: fill-box; transform-origin: center; }

.fog-puff { fill: rgb(230 220 200 / 0.14); animation: breathe 6s ease-in-out infinite; transition: opacity 0.9s var(--ease-out), scale 0.9s var(--ease-out); }
@keyframes breathe { 50% { scale: 1.12; opacity: 0.75; } }

.fog-ghost { fill: rgb(255 248 235 / 0.04); stroke: rgb(255 248 235 / 0.2); stroke-width: 1.5; stroke-dasharray: 4 5; }
.fog-ghost-mark { font-size: 24px; font-weight: 800; text-anchor: middle; fill: rgb(255 248 235 / 0.35); }

.fog-hidden { transition: opacity 0.4s ease; }
.fog-shown { opacity: 0; scale: 0.4; transition: opacity 0.5s ease 0.1s, scale 0.8s var(--ease-spring) 0.1s; }

.fog-core { fill: url(#fog-core); filter: drop-shadow(0 0 14px var(--accent-glow)); }
.fog-halo { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 8; opacity: 0.55; animation: spin-halo 14s linear infinite; }
@keyframes spin-halo { to { rotate: 360deg; } }
.fog-burst { fill: none; stroke: #ffe0c4; stroke-width: 3; opacity: 0; }
.fog-initial { font-family: var(--font-display); font-size: 28px; font-weight: 900; text-anchor: middle; fill: #2a0d04; }
.fog-name { font-family: var(--font-display); font-size: 19px; font-weight: 800; text-anchor: middle; fill: var(--text-1); stroke: var(--bg-1); stroke-width: 6px; paint-order: stroke; }
.fog-role { font-size: 13px; text-anchor: middle; fill: var(--text-3); stroke: var(--bg-1); stroke-width: 5px; paint-order: stroke; }

.fog-node.is-on .fog-puff { opacity: 0; scale: 1.8; animation: none; }
.fog-node.is-on .fog-hidden { opacity: 0; }
.fog-node.is-on .fog-shown { opacity: 1; scale: 1; }
.fog-node.is-new .fog-burst { animation: burst 1.1s var(--ease-out) 0.15s; }
@keyframes burst { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 2.8; } }

/* --- discoveries: a log, newest first */

.fog-feed {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  max-block-size: 30rem;
  padding: var(--space-4);
  overflow-y: auto;
  background: rgb(0 0 0 / 0.28);
  border: 1px solid var(--line-1);
  border-radius: var(--square);
  scrollbar-width: thin;
}
.fog-feed-title { display: flex; align-items: center; gap: var(--space-2); padding-block-end: var(--space-2); font-size: var(--size-s); font-weight: 700; color: var(--accent); border-block-end: 1px solid var(--line-1); }
.fog-feed ol { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.fog-find {
  display: none;
  gap: 0.15rem;
  padding: var(--space-3);
  font-size: var(--size-s);
  background: rgb(255 248 235 / 0.025);
  border: 1px solid var(--line-1);
  border-radius: var(--square);
}
.fog-find.is-on { display: grid; }
.fog-find.is-new {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), transparent 70%);
  box-shadow: 0 0 24px -10px var(--accent-glow);
  animation: find-in 0.6s var(--ease-out) both;
}
.fog-find.is-new::before {
  content: "تازه";
  justify-self: start;
  padding: 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--accent-ink);
  background: var(--accent);
}
.fog-find-at { font-size: var(--size-xs); color: var(--text-3); }
.fog-find strong { font-family: var(--font-display); font-weight: 800; }
.fog-find p { color: var(--text-2); line-height: 1.8; }

@keyframes find-in { from { opacity: 0; translate: 0 -10px; } }

/* --- the reading track */

.fog-track { position: relative; display: grid; gap: var(--space-2); padding-block-start: var(--space-2); }

.fog-rail { position: relative; padding-inline: calc(var(--thumb) / 2); }
.fog-stops { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.fog-stops li {
  display: flex;
  justify-content: center;
  inline-size: 0;
  font-size: var(--size-xs);
  font-weight: 700;
  color: var(--text-3);
  white-space: nowrap;
  transition: color var(--fast);
}
.fog-stops li.is-reached { color: var(--accent); }
.fog-stops li.is-locked { color: rgb(255 248 235 / 0.2); }

/* The part of the book the demo will not open: hatched, under a lock. */
.fog-locked-zone {
  position: absolute;
  inset-block: -0.4rem calc(-1 * (var(--thumb) + 1rem));
  /* Where the lock starts, as a share of the track; set from the map's data by site.js. */
  inset-inline-start: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--lock-from, 0.375));
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  color: rgb(255 248 235 / 0.35);
  background: repeating-linear-gradient(-45deg, rgb(255 248 235 / 0.035) 0 6px, transparent 6px 14px);
  border-inline-start: 1px dashed var(--line-3);
  pointer-events: none;
}
.fog-locked-zone .icon { inline-size: 1.1rem; block-size: 1.1rem; translate: 0 0.9rem; }

.fog-range {
  --fill: 0%;
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: calc(var(--thumb) + 0.5rem);
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: grab;
}
.fog-range:active { cursor: grabbing; }
.fog-range:focus-visible { outline: none; }

/* Track and thumb, once per engine. The fill runs from the start side; the thumb is a diamond. */
.fog-range::-webkit-slider-runnable-track {
  block-size: 4px;
  background: linear-gradient(to left, var(--accent) 0 var(--fill), rgb(255 248 235 / 0.1) var(--fill));
  box-shadow: 0 0 18px -4px var(--accent-glow);
}
.fog-range:dir(ltr)::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--accent) 0 var(--fill), rgb(255 248 235 / 0.1) var(--fill));
}
.fog-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  inline-size: var(--thumb);
  block-size: var(--thumb);
  margin-block-start: calc((4px - var(--thumb)) / 2);
  border: 2px solid var(--bg-0);
  border-radius: 1px;
  background: var(--accent);
  rotate: 45deg;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 24px var(--accent-glow);
  transition: box-shadow var(--medium), scale var(--medium) var(--ease-spring);
}
.fog-range:hover::-webkit-slider-thumb, .fog-range:focus-visible::-webkit-slider-thumb {
  scale: 1.2;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 36px var(--accent-glow);
}
.fog-range::-moz-range-track { block-size: 4px; background: rgb(255 248 235 / 0.1); }
.fog-range::-moz-range-progress { block-size: 4px; background: var(--accent); }
.fog-range::-moz-range-thumb {
  inline-size: var(--thumb);
  block-size: var(--thumb);
  border: 2px solid var(--bg-0);
  border-radius: 1px;
  background: var(--accent);
  rotate: 45deg;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 24px var(--accent-glow);
}

.fog-lock {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
  font-size: var(--size-s);
  color: var(--text-3);
  transition: color var(--fast);
}
.fog-lock.is-hit { color: var(--bad); animation: shake 0.5s var(--ease-out); }
.fog-lock.is-hit .icon { filter: drop-shadow(0 0 8px var(--bad)); }

@keyframes shake {
  20% { translate: -6px 0; }
  40% { translate: 5px 0; }
  60% { translate: -3px 0; }
  80% { translate: 2px 0; }
}

/* ================================================================ mood board */

/*
  The moods the editor puts on the home page, as a board of panels: each lit
  by one of its covers cropped close, with its name, its line and the worlds
  in it. Two moods make two wide panels, four make four tall ones; a mood
  with many worlds names three, so the board keeps its size.
*/
.board-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.board-all { flex: none; }
.board-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: mood; }
.board-panels li { counter-increment: mood; }

.mood-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  block-size: 100%;
  min-block-size: clamp(22rem, 52svh, 32rem);
  padding: var(--space-5);
  color: var(--text-1);
  border: 1px solid var(--line-2);
  transition: border-color var(--medium);
}
.mood-panel:hover { color: var(--text-1); border-color: color-mix(in srgb, var(--signal) 55%, transparent); }
.mood-panel-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg-1); }
.mood-panel-art img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  scale: 1.18;
  filter: brightness(0.5) saturate(0.85);
  transition: scale 1.6s var(--ease-out), filter var(--slow) var(--ease-out);
}
/* Each panel crops its cover differently, so panels sharing a cover still differ. */
.board-panels li:nth-child(4n + 1) .mood-panel-art img { object-position: 50% 30%; }
.board-panels li:nth-child(4n + 2) .mood-panel-art img { object-position: 30% 65%; }
.board-panels li:nth-child(4n + 3) .mood-panel-art img { object-position: 70% 45%; }
.board-panels li:nth-child(4n + 4) .mood-panel-art img { object-position: 50% 82%; }
.mood-panel-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(6 6 7 / 0.55), transparent 26%, transparent 36%, rgb(6 6 7 / 0.72) 62%, rgb(6 6 7 / 0.96)); }
.mood-panel:hover .mood-panel-art img { scale: 1.26; filter: brightness(0.74) saturate(1); }
/* A lit bar runs along the top of the panel under the pointer, as on a chosen level. */
.mood-panel::after {
  content: "";
  position: absolute;
  inset-inline: -1px;
  inset-block-start: -1px;
  block-size: 2px;
  background: var(--signal);
  box-shadow: 0 0 14px var(--signal-glow);
  scale: 0 1;
  transform-origin: right;
  transition: scale var(--medium) var(--ease-out);
}
.mood-panel:dir(ltr)::after { transform-origin: left; }
.mood-panel:hover::after { scale: 1; }

.mood-panel-top { display: flex; align-items: center; justify-content: space-between; }
.mood-panel-index { display: inline-flex; align-items: center; gap: 0.6rem; }
.mood-panel-index::before { content: counter(mood, index) / ""; font-family: var(--font-display); font-size: var(--size-xs); font-weight: 800; color: var(--signal); }
.mood-panel-index::after { content: ""; inline-size: 1.8rem; block-size: 1px; background: var(--line-4); }
.mood-panel-top .icon { color: var(--text-2); transition: color var(--fast), translate var(--medium) var(--ease-spring); }
.mood-panel:hover .mood-panel-top .icon { color: var(--signal); translate: -4px 0; }
.mood-panel:dir(ltr):hover .mood-panel-top .icon { translate: 4px 0; }

.mood-panel-body { display: grid; align-content: end; gap: var(--space-3); }
.mood-panel-title { font-family: var(--font-display); font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.6rem); font-weight: 900; line-height: 1.2; text-shadow: 0 4px 30px rgb(0 0 0 / 0.6); }
.mood-panel-text { max-inline-size: 30rem; font-size: var(--size-s); line-height: 1.9; color: var(--text-2); }
.mood-panel-worlds { display: flex; align-items: center; gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--line-2); }
.mood-panel-covers { display: flex; flex: none; }
.mood-panel-covers img { inline-size: 2rem; block-size: 2.5rem; object-fit: cover; box-shadow: 0 0 0 2px var(--bg-0); transition: margin var(--medium) var(--ease-out); }
.mood-panel-covers img + img { margin-inline-start: -0.7rem; }
.mood-panel:hover .mood-panel-covers img + img { margin-inline-start: 0.25rem; }
.mood-panel-worlds small { min-inline-size: 0; font-size: var(--size-xs); font-weight: 600; color: var(--text-2); }

/* ================================================================ finale */

/*
  The last screen: one tall window, its panes the featured covers between
  dark mullions, lighting up pane by pane as it scrolls into view; beside it,
  what an account keeps for the reader, and one button.
*/
.finale {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7) var(--space-8);
  padding-block: var(--space-6) var(--space-4);
}
/* The window's light across the whole width, strongest around the window. */
.finale::before {
  content: "";
  position: absolute;
  inset-block: -15% -25%;
  inset-inline: calc(50% - 50vw);
  z-index: -1;
  background: radial-gradient(ellipse 32% 55% at 27% 55%, rgb(243 181 68 / 0.13), transparent 70%);
  pointer-events: none;
}
.finale:dir(ltr)::before { background: radial-gradient(ellipse 32% 55% at 73% 55%, rgb(243 181 68 / 0.13), transparent 70%); }

/* The words on the start side, the window on the end side, as on the stage. */
.finale-window {
  position: relative;
  order: 1;
  justify-self: center;
  inline-size: min(100%, 25rem);
  aspect-ratio: 100 / 125;
}
/* Light pooling on the floor under the window. */
.finale-window::after {
  content: "";
  position: absolute;
  inset-inline: -30%;
  inset-block-end: -9%;
  z-index: -1;
  block-size: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(243 181 68 / 0.32), rgb(243 181 68 / 0.06) 60%, transparent);
  filter: blur(8px);
}
.finale-panes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  /* The gaps between panes are the mullions, dark against the light. */
  background: var(--bg-0);
  mask: url("../img/arch.svg") 0 0 / 100% 100% no-repeat;
  -webkit-mask: url("../img/arch.svg") 0 0 / 100% 100% no-repeat;
}
/* The transom: a bar across the panes where the arch springs. */
.finale-panes::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: 4px; background: var(--bg-0); }
.finale-pane { position: relative; overflow: hidden; }
.finale-pane img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; filter: brightness(0.85); transition: filter var(--slow); }
.finale-pane:nth-child(2) img { object-position: 40% 50%; }
.finale-pane:nth-child(3) img { object-position: 60% 50%; }
.finale-frame { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
.finale-frame path { fill: none; stroke: var(--signal); stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px var(--signal-glow)); }

/* The panes open one after another, in reading order, as the window comes into view. */
@supports (animation-timeline: view()) {
  .finale-pane img { animation: pane-open linear both; animation-timeline: view(); animation-range: entry 30% cover 42%; }
  .finale-pane:nth-child(2) img { animation-range: entry 60% cover 48%; }
  .finale-pane:nth-child(3) img { animation-range: entry 90% cover 54%; }
}
@keyframes pane-open { from { filter: brightness(0.05) saturate(0.3); } }

.finale-body { display: grid; justify-items: start; gap: var(--space-4); }
.finale-title { font-size: clamp(2.2rem, 1.3rem + 3vw, 4.25rem); line-height: 1.15; }
.finale-perks { display: grid; inline-size: 100%; margin: var(--space-2) 0 0; padding: 0; list-style: none; border-block-start: 1px solid var(--line-2); }
.finale-perks li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-4); padding-block: var(--space-4); border-block-end: 1px solid var(--line-1); }
.finale-perk-icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; color: var(--signal); background: var(--signal-soft); border: 1px solid rgb(243 181 68 / 0.3); }
.finale-perk-icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.finale-perks li > span:last-child { display: grid; gap: 0.15rem; }
.finale-perks strong { font-family: var(--font-display); font-size: var(--size-l); font-weight: 800; }
.finale-perks small { font-size: var(--size-s); line-height: 1.85; color: var(--text-2); }
.finale-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-3); }

/* ================================================================ footer */

.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block-start: auto;
  padding: var(--space-8) var(--gutter) var(--space-5);
  border-block-start: 1px solid var(--line-1);
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.45));
}
.footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -1px;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgb(243 181 68 / 0.55), transparent);
}
.footer::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: -2;
  block-size: 18rem;
  background: radial-gradient(ellipse 45% 100% at 50% 0%, rgb(243 181 68 / 0.07), transparent);
  pointer-events: none;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  max-inline-size: var(--width);
  margin: 0 auto var(--space-7);
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--line-1);
}
.footer-line { font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem); font-weight: 900; line-height: 1.3; }
.footer-more { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); color: var(--text-1); }
.footer-more:hover { color: var(--signal); }
.footer-more-go { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--size-s); font-weight: 700; }
.footer-more-go .icon { color: var(--signal); transition: translate var(--medium) var(--ease-spring); }
.footer-more:hover .icon-flip { translate: -3px 0; }
.footer-more:hover .icon-flip:dir(ltr) { translate: 3px 0; }
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space-7);
  max-inline-size: var(--width);
  margin-inline: auto;
}
.footer-brand { display: grid; align-content: start; gap: var(--space-3); }
.footer-brand p { font-size: var(--size-s); color: var(--text-3); }
.footer-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.footer-col-title { margin-block-end: var(--space-3); padding-block-end: var(--space-2); font-size: var(--size-xs); font-weight: 700; color: var(--text-3); border-block-end: 1px solid var(--line-1); }
.footer-col ul { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.footer-col a { font-size: var(--size-s); color: var(--text-2); transition: color var(--fast); }
.footer-col a:hover { color: var(--text-1); }
.footer-fine { max-inline-size: var(--width); margin: var(--space-8) auto 0; padding-block-start: var(--space-4); font-size: var(--size-xs); color: var(--text-3); border-block-start: 1px solid var(--line-1); }
/* The name, very large and barely there, as the floor of every page. */
.footer-word {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.32em;
  z-index: -1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(8rem, 24vw, 22rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: transparent;
  /* Lit from above by the same light as the rest of the page. */
  background: linear-gradient(rgb(243 181 68 / 0.13), rgb(255 248 235 / 0.035) 45%, transparent 75%);
  background-clip: text;
  -webkit-background-clip: text;
  pointer-events: none;
  user-select: none;
}

/* ================================================================ forms */

.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.form-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }

.field { display: grid; gap: var(--space-2); }
.field > label { font-size: var(--size-s); font-weight: 700; color: var(--text-2); }

.field input {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 3.1rem;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: var(--size-l);
  color: var(--text-1);
  background: rgb(0 0 0 / 0.4);
  border: 1px solid var(--line-2);
  border-radius: var(--square);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.4) inset;
  transition: border-color var(--fast), box-shadow var(--medium), background-color var(--fast);
}
.field input::placeholder { color: var(--text-3); }
.field input:hover { border-color: var(--line-3); }
.field input:focus {
  outline: none;
  border-color: var(--signal);
  background: rgb(0 0 0 / 0.55);
  box-shadow: 0 0 0 3px var(--signal-soft), 0 0 28px -8px var(--signal-glow);
}
.field .input-validation-error { border-color: rgb(255 99 112 / 0.7); }
.field-error { font-size: var(--size-s); color: var(--bad); }
.field-error:empty { display: none; }

.input-wrap { position: relative; display: grid; }
.input-wrap > .icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 1rem;
  translate: 0 -50%;
  color: var(--text-3);
  pointer-events: none;
  transition: color var(--fast);
}
.input-wrap input { padding-inline-start: 2.75rem; }
.input-wrap:focus-within > .icon { color: var(--signal); }
/* Left-to-right inputs (emails) keep their icon on the right of the field in a right-to-left page. */
.input-wrap input[dir="ltr"] { padding-inline: 1rem 2.75rem; text-align: left; }

/* Six-box code entry. Without JavaScript it is one large input. */
.otp { position: relative; }
.otp-input {
  font-family: var(--font-mono) !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.5em;
  text-align: center;
}
.otp.is-enhanced .otp-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  block-size: 100%;
  color: transparent;
  caret-color: transparent;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  letter-spacing: 0;
}
.otp.is-enhanced .otp-input::selection { background: transparent; }
.otp-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); direction: ltr; }
.otp-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1.15;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 2vw, 2rem);
  font-weight: 800;
  color: var(--text-1);
  background: rgb(0 0 0 / 0.4);
  border: 1px solid var(--line-2);
  border-radius: var(--square);
  transition: border-color var(--fast), box-shadow var(--medium), translate var(--medium) var(--ease-spring);
}
.otp-slot.is-filled { border-color: rgb(243 181 68 / 0.5); translate: 0 -2px; }
.otp:focus-within .otp-slot.is-active {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft), 0 0 22px -6px var(--signal-glow);
}
.otp:focus-within .otp-slot.is-active:empty::after {
  content: "";
  inline-size: 2px;
  block-size: 40%;
  background: var(--signal);
  animation: caret 1s steps(1) infinite;
}

@keyframes caret { 50% { opacity: 0; } }

/* ================================================================ auth */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--space-7);
  min-block-size: calc(100dvh - 15rem);
}

.auth-art { display: grid; justify-items: center; gap: var(--space-6); }
.auth-art .portal { inline-size: min(100%, 19rem); }

.steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-s);
  font-weight: 600;
  color: var(--text-3);
}
.steps li + li::before {
  content: "";
  inline-size: 2rem;
  block-size: 1px;
  margin-inline-end: var(--space-2);
  background: var(--line-3);
}
.step-mark {
  display: grid;
  place-items: center;
  inline-size: 1.85rem;
  block-size: 1.85rem;
  font-size: var(--size-xs);
  font-weight: 800;
  border: 1px solid var(--line-3);
}
.steps .is-done { color: var(--good); }
.steps .is-done .step-mark { border-color: rgb(125 211 174 / 0.5); background: rgb(125 211 174 / 0.1); }
.steps .is-current { color: var(--text-1); }
.steps .is-current .step-mark { color: var(--signal-ink); background: var(--signal); border-color: var(--signal); box-shadow: 0 0 24px -6px var(--signal-glow); }

.auth-card {
  display: grid;
  gap: var(--space-4);
  inline-size: 100%;
  max-inline-size: 30rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: inset 0 2px 0 var(--signal);
}
.auth-card .form { margin-block-start: var(--space-2); }

.auth-icon {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  color: var(--signal);
  background: var(--signal-soft);
  border: 1px solid rgb(243 181 68 / 0.35);
  box-shadow: 0 0 30px -8px var(--signal-glow);
}
.auth-icon .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.auth-icon-danger { color: var(--bad); background: rgb(255 99 112 / 0.08); border-color: rgb(255 99 112 / 0.35); box-shadow: 0 0 30px -8px rgb(255 99 112 / 0.5); }

.address {
  display: block;
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-block-start: var(--space-2);
  padding: 0.25rem 0.75rem;
  font-weight: 600;
  color: var(--text-1);
  background: rgb(255 248 235 / 0.04);
  border: 1px solid var(--line-2);
}

.dev-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.6rem 1rem;
  font-size: var(--size-s);
  color: var(--signal);
  border: 1px dashed rgb(243 181 68 / 0.4);
  background: var(--signal-soft);
}
.code-sample { font-family: var(--font-mono); font-size: var(--size-l); font-weight: 700; letter-spacing: 0.25em; color: var(--text-1); }

.auth-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.auth-links form { margin: 0; }
.fine { font-size: var(--size-xs); color: var(--text-3); }

.narrow {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  inline-size: 100%;
  max-inline-size: 32rem;
  margin: var(--space-6) auto;
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.narrow.center { justify-items: center; }
.narrow .form { inline-size: 100%; }
.card-danger { border-color: rgb(255 99 112 / 0.35); box-shadow: inset 0 2px 0 var(--bad); }

/* ================================================================ account */

.profile { overflow: hidden; }
.profile-banner {
  block-size: 9rem;
  background:
    radial-gradient(45% 140% at 80% 0%, rgb(243 181 68 / 0.28), transparent 70%),
    linear-gradient(var(--line-1) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--line-1) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(180deg, #17140f, var(--bg-1));
  mask: linear-gradient(180deg, #000 55%, transparent);
}
.profile-body {
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
  margin-block-start: -3.5rem;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
}
.profile-id { display: grid; gap: var(--space-1); min-inline-size: 0; }
.profile-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); font-size: var(--size-s); color: var(--text-2); }
.profile-meta span { display: inline-flex; align-items: center; gap: var(--space-2); min-inline-size: 0; }
.profile-meta .icon { color: var(--text-3); }

.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

.setting { display: grid; align-content: space-between; gap: var(--space-5); padding: clamp(1.25rem, 3vw, 1.85rem); }
.setting-head { display: flex; gap: var(--space-4); align-items: flex-start; }
.setting-head h2 { font-size: var(--size-l); font-weight: 800; }
.setting-head p { font-size: var(--size-s); }
.setting-icon {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  color: var(--signal);
  background: var(--signal-soft);
  border: 1px solid rgb(243 181 68 / 0.25);
}
.setting-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.setting-actions form { margin: 0; }
.setting-danger { border-color: rgb(255 99 112 / 0.25); }
.setting-danger .setting-icon { color: var(--bad); background: rgb(255 99 112 / 0.07); border-color: rgb(255 99 112 / 0.25); }

/* ================================================================ legal & policy */

.legal-layout {
  display: grid;
  gap: var(--space-6);
  max-inline-size: 58rem;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-block-end: 1px solid var(--line-2);
  padding-block-end: var(--space-1);
}

.legal-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.65rem 1.15rem;
  font-size: var(--size-s);
  font-weight: 700;
  color: var(--text-2);
  border: 1px solid transparent;
  transition: color var(--fast), background-color var(--fast), border-color var(--fast);
}

.legal-nav a:hover {
  color: var(--text-1);
  border-color: var(--line-3);
}

.legal-nav a[aria-current="page"] {
  color: var(--text-1);
  background: var(--signal-soft);
  border-color: rgb(243 181 68 / 0.35);
}

.legal-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 0.75rem;
  inset-block-end: -2px;
  block-size: 2px;
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal);
}

.legal-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.legal-pillar {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
}

.legal-pillar-icon {
  display: grid;
  place-items: center;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  color: var(--signal);
  background: var(--signal-soft);
  border: 1px solid rgb(243 181 68 / 0.25);
}

.legal-pillar h3 {
  margin: 0;
  font-size: var(--size-m);
  font-weight: 800;
  color: var(--text-1);
}

.legal-pillar p {
  margin: 0;
  font-size: var(--size-xs);
  line-height: 1.8;
  color: var(--text-2);
}

.legal-sections {
  display: grid;
  gap: var(--space-4);
}

.legal-card {
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.legal-card-head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.legal-card-head h2 {
  margin: 0;
  font-size: var(--size-l);
  font-weight: 800;
  color: var(--text-1);
}

.legal-card-head p {
  margin: var(--space-1) 0 0;
  font-size: var(--size-s);
  color: var(--text-3);
}

.legal-card-icon {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex: none;
  color: var(--signal);
  background: var(--signal-soft);
  border: 1px solid rgb(243 181 68 / 0.25);
}

.legal-card-body {
  display: grid;
  gap: var(--space-3);
  font-size: var(--size-s);
  line-height: 2;
  color: var(--text-2);
}

.legal-card-body p {
  margin: 0;
}

.legal-card-body ul, .legal-card-body ol {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-inline-start: 1.5rem;
}

.legal-card-body strong {
  color: var(--text-1);
}

.legal-card-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.15rem 0.45rem;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--signal);
}

.legal-callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: rgb(243 181 68 / 0.05);
  border: 1px solid rgb(243 181 68 / 0.3);
  box-shadow: inset var(--bar-x) 0 0 var(--signal);
}

.legal-callout-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 800;
  color: var(--signal);
  font-size: var(--size-s);
}

.legal-callout-text {
  font-size: var(--size-s);
  line-height: 1.85;
  color: var(--text-1);
}

.legal-date {
  font-size: var(--size-xs);
  color: var(--text-3);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--line-1);
}

/* ================================================================ removal form & admin management */

.form-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.removal-form {
  gap: var(--space-5);
  margin-block-start: var(--space-2);
}

.field label .required {
  color: var(--bad);
}

.field-check {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgb(255 248 235 / 0.03);
  border: 1px solid var(--line-2);
  border-radius: var(--square);
}

.check-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--size-s);
  line-height: 1.8;
  color: var(--text-2);
}

.check-label input[type="checkbox"] {
  margin-block-start: 0.25rem;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: none;
  accent-color: var(--signal);
  cursor: pointer;
}

.form-actions {
  display: flex;
  justify-content: flex-start;
  margin-block-start: var(--space-2);
}

.tracking-lookup {
  padding: var(--space-3) var(--space-4);
  margin-block-end: var(--space-4);
}

.tracking-lookup-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.tracking-lookup-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-s);
  font-weight: 700;
  color: var(--text-2);
}

.tracking-lookup-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-inline-size: 16rem;
}

.tracking-lookup-row input {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 2.6rem;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.removal-success, #tracking, #submitted {
  scroll-margin-block-start: calc(var(--hud-h) + var(--space-5));
}

:is(#tracking, #submitted):focus {
  outline: none;
}

.removal-success {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-color: rgb(243 181 68 / 0.4);
  box-shadow: inset var(--bar-x) 0 0 var(--signal), 0 0 50px -20px var(--signal-glow);
}

.removal-not-found {
  border-color: rgb(255 99 112 / 0.4);
  box-shadow: inset var(--bar-x) 0 0 var(--bad), 0 0 50px -20px rgb(255 99 112 / 0.3);
}

.removal-not-found-icon {
  color: #fff;
  background: var(--bad);
  box-shadow: 0 0 25px rgb(255 99 112 / 0.5);
}

.removal-success-icon {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  flex: none;
  color: var(--signal-ink);
  background: var(--signal);
  box-shadow: 0 0 25px var(--signal-glow);
}

.removal-success-icon .icon {
  inline-size: 2rem;
  block-size: 2rem;
}

.removal-success-body {
  display: grid;
  gap: var(--space-4);
  flex: 1;
  min-inline-size: 0;
}

.removal-success-body h2 {
  margin: 0;
  font-size: var(--size-xl);
  font-weight: 850;
  color: var(--text-1);
}

.removal-ref-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: rgb(0 0 0 / 0.4);
  border: 1px dashed var(--signal);
  border-radius: var(--square);
  text-align: center;
}

.removal-ref-label {
  font-size: var(--size-xs);
  color: var(--text-3);
}

.removal-ref-code {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 900;
  color: var(--signal);
  letter-spacing: 0.1em;
}

.removal-ref-hint {
  font-size: var(--size-xs);
  color: var(--text-2);
}

.removal-summary {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  font-size: var(--size-s);
}

.removal-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  border-block-end: 1px solid var(--line-1);
}

.removal-summary-row:last-child {
  border-block-end: 0;
}

.removal-summary-row span {
  color: var(--text-3);
}

.removal-summary-row strong {
  color: var(--text-1);
}

.removal-actions {
  display: flex;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

/* Status Badges */

.badge-pending {
  color: #f7ca68;
  background: rgb(243 181 68 / 0.12);
  border-color: rgb(243 181 68 / 0.35);
}

.badge-progress {
  color: #9cbaff;
  background: rgb(164 180 255 / 0.12);
  border-color: rgb(164 180 255 / 0.35);
}

.badge-resolved {
  color: #7dd3ae;
  background: rgb(125 211 174 / 0.12);
  border-color: rgb(125 211 174 / 0.35);
}

.badge-rejected {
  color: #ff858f;
  background: rgb(255 99 112 / 0.12);
  border-color: rgb(255 99 112 / 0.35);
}

/* Admin Removals Management & Search Toolbar */

.stat-alert {
  border-color: rgb(243 181 68 / 0.4);
  box-shadow: 0 0 30px -10px var(--signal-glow);
}

.admin-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--panel);
  border: 1px solid var(--line-2);
}

.admin-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  background: rgb(0 0 0 / 0.45);
  border: 1px solid var(--line-3);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--fast), box-shadow var(--medium);
}

.admin-search-bar:focus-within {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft), 0 0 24px -8px var(--signal-glow);
}

.admin-search-bar .search-icon {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--text-3);
}

.admin-search-bar input[type="search"] {
  flex: 1;
  min-inline-size: 0;
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  font-size: var(--size-s);
  color: var(--text-1);
  padding: var(--space-1) var(--space-2);
}

.admin-search-bar input[type="search"]::placeholder {
  color: var(--text-3);
}

.admin-search-bar input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.8rem;
  block-size: 1.8rem;
  color: var(--text-3);
  border-radius: 50%;
  transition: color var(--fast), background-color var(--fast);
}

.search-clear:hover {
  color: var(--text-1);
  background: rgb(255 248 235 / 0.1);
}

.search-clear .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.admin-search-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  font-size: var(--size-xs);
  color: var(--text-2);
}

.admin-search-badge strong {
  color: var(--signal);
}

.ref-badge {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  padding: 0.2rem 0.5rem;
  color: var(--signal);
  background: rgb(0 0 0 / 0.5);
  border: 1px solid var(--line-2);
}

.cell-requester {
  display: grid;
  gap: 0.15rem;
  line-height: 1.4;
}

.cell-target {
  max-inline-size: 16rem;
  white-space: normal;
  line-height: 1.5;
}

.type-chip {
  font-size: var(--size-xs);
  color: var(--text-2);
}

/* ================================================================ admin modals */

.admin-modal {
  position: fixed;
  inset: 0;
  inline-size: min(48rem, calc(100% - 2rem));
  max-block-size: min(44rem, 90dvh);
  margin: auto;
  padding: 0;
  background: transparent;
  border: 0;
  overflow: visible;
  z-index: 100;
}

.admin-modal::backdrop {
  background: rgb(0 0 0 / 0.75);
  backdrop-filter: blur(10px);
}

.admin-modal[open] {
  animation: pop var(--medium) var(--ease-out);
}

.admin-modal-box {
  display: grid;
  grid-template-rows: auto 1fr;
  max-block-size: min(44rem, 90dvh);
  overflow: hidden;
  background: var(--panel-strong);
  border: 1px solid var(--line-3);
  box-shadow: inset 0 2px 0 var(--signal), 0 40px 100px -30px rgb(0 0 0 / 0.95), 0 0 80px -30px var(--signal-glow);
  backdrop-filter: blur(24px) saturate(160%);
}

.admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--line-2);
  background: rgb(0 0 0 / 0.25);
}

.admin-modal-title-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.admin-modal-title-wrap h2 {
  margin: 0;
  font-size: var(--size-l);
  font-weight: 800;
  color: var(--text-1);
}

.admin-modal-body {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  overflow-y: auto;
}

.modal-grid-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-1);
  border: 1px solid var(--line-1);
}

.info-block {
  display: grid;
  gap: 0.2rem;
  font-size: var(--size-s);
}

.info-label {
  font-size: var(--size-xs);
  color: var(--text-3);
}

.text-signal {
  color: var(--signal);
}

.modal-claim-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
}

.claim-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-xs);
  font-weight: 700;
  color: var(--signal);
}

.claim-content {
  margin: 0;
  font-size: var(--size-s);
  line-height: 1.9;
  color: var(--text-1);
  white-space: pre-wrap;
  word-break: break-word;
}

.modal-action-form {
  gap: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line-2);
}

.modal-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.modal-danger-zone {
  display: flex;
  justify-content: flex-end;
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--line-1);
}

.text-danger {
  color: var(--bad);
}

/* ================================================================ states */

.state {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding-block: var(--space-8);
  text-align: center;
}
.state-code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 10vw, 9rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, var(--text-1), var(--signal) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 40px var(--signal-glow));
}
.state .btn { margin-block-start: var(--space-3); }

/* ================================================================ admin */

.page-head { display: grid; gap: var(--space-2); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-4); align-items: center; padding: var(--space-5); }
.stat-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  color: var(--signal);
  background: var(--signal-soft);
  border: 1px solid rgb(243 181 68 / 0.22);
}
.stat-label { font-size: var(--size-s); color: var(--text-2); }
.stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 900; line-height: 1.2; }

.table-card { padding: var(--space-2); }
.admin-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.admin-nav [aria-current="page"] { color: var(--text-1); border-color: var(--signal); }
.table td.cell-question { white-space: normal; min-inline-size: 16rem; color: var(--text-1); }
.empty-note { margin: 0; padding: var(--space-5); color: var(--text-3); }
.content-report { display: grid; gap: var(--space-4); margin-block-start: var(--space-4); padding: var(--space-5); }
.content-report-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.content-report-head h2 { margin: 0; font-family: var(--font-display); font-size: var(--size-xl); }
.content-gaps { display: grid; gap: var(--space-2); margin: 0; font-size: var(--size-s); }
.content-gaps dt { font-weight: 700; color: var(--text-1); }
.content-gaps dd { margin: 0 0 var(--space-3); color: var(--text-2); }
.content-gaps ul { margin: 0; padding-inline-start: 1.2rem; }
.content-gaps a { color: var(--accent); }
.table-wrap { overflow-x: auto; }
.table { inline-size: 100%; border-collapse: collapse; font-size: var(--size-s); }
.table th, .table td { padding: 0.85rem 1rem; text-align: start; white-space: nowrap; }
.table th { font-size: var(--size-xs); font-weight: 700; color: var(--text-3); border-block-end: 1px solid var(--line-2); }
.table td { border-block-end: 1px solid var(--line-1); }
.table tbody tr { transition: background-color var(--fast); }
.table tbody tr:hover { background: rgb(255 248 235 / 0.03); }
.table tbody tr:last-child td { border-block-end: 0; }
.cell-user { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 600; }

.tag {
  display: inline-block;
  padding: 0.12rem 0.6rem;
  font-size: var(--size-xs);
  font-weight: 700;
  color: var(--text-2);
  border: 1px solid var(--line-2);
}
.tag-gold { color: var(--signal); border-color: rgb(243 181 68 / 0.35); background: var(--signal-soft); }

/* ================================================================ editor */

/*
  The content editor: long forms in panels, a stage picker on everything
  gated, rows that can be added and removed, and one sticky save bar.
*/
.field > span { font-size: var(--size-s); font-weight: 700; color: var(--text-2); }
.field :is(textarea, select) {
  inline-size: 100%;
  min-inline-size: 0;
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-size: var(--size-m);
  line-height: 1.8;
  color: var(--text-1);
  background: rgb(0 0 0 / 0.4);
  border: 1px solid var(--line-2);
  border-radius: var(--square);
  transition: border-color var(--fast), box-shadow var(--medium);
}
.field select { min-block-size: 3.1rem; }
.field :is(textarea, select):hover { border-color: var(--line-3); }
.field :is(textarea, select):focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.field textarea { resize: vertical; }
.field input[type="file"] { padding-block: 0.7rem; font-size: var(--size-s); }
.field input[type="color"] { inline-size: 5rem; padding: 0.25rem; cursor: pointer; }
.field-stage select { font-size: var(--size-s); }

.admin-world-head { gap: var(--space-3); }
.admin-world-head .eyebrow a { color: inherit; }
.admin-world-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 0; border-block-end: 1px solid var(--line-2); }
.admin-tabs a { position: relative; padding: 0.6rem 1rem; font-size: var(--size-s); font-weight: 700; color: var(--text-2); transition: color var(--fast); }
.admin-tabs a:hover { color: var(--text-1); }
.admin-tabs a[aria-current="page"] { color: var(--text-1); }
.admin-tabs a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 0.6rem; inset-block-end: -1px; block-size: 2px; background: var(--signal); box-shadow: 0 0 10px var(--signal); }

.admin-problems { display: flex; gap: var(--space-4); align-items: start; padding: var(--space-5); border-color: rgb(255 99 112 / 0.4); box-shadow: inset var(--bar-x) 0 0 var(--bad); }
.admin-problems > .icon { flex: none; inline-size: 1.6rem; block-size: 1.6rem; color: var(--bad); }
.admin-problems h2 { margin: 0 0 var(--space-2); font-size: var(--size-l); }
.admin-problems ul { display: grid; gap: var(--space-1); margin: 0; padding-inline-start: 1.1rem; font-size: var(--size-s); color: var(--text-2); }

.admin-form { display: grid; gap: var(--space-4); }
.admin-section { display: grid; gap: var(--space-4); padding: clamp(1.25rem, 3vw, 2rem); }
.admin-section > h2 { margin: 0; font-size: var(--size-xl); font-weight: 850; }
.admin-section > .muted { margin-block-start: calc(-1 * var(--space-2)); font-size: var(--size-s); max-inline-size: 60rem; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--space-4); align-items: end; }

.admin-checks { display: flex; flex-wrap: wrap; gap: var(--space-2); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.admin-checks legend { margin-block-end: var(--space-2); padding: 0; font-size: var(--size-s); font-weight: 700; color: var(--text-2); }
.admin-checks-column { flex-direction: column; align-items: flex-start; }
.check { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.35rem 0.85rem; font-size: var(--size-s); color: var(--text-2); background: rgb(255 248 235 / 0.03); border: 1px solid var(--line-2); cursor: pointer; transition: color var(--fast), border-color var(--fast), background-color var(--fast); }
.check:hover { color: var(--text-1); border-color: var(--line-3); }
.check input { inline-size: auto; min-block-size: 0; padding: 0; background: none; border: 0; box-shadow: none; accent-color: var(--signal); }
.check:has(input:checked) { color: var(--text-1); border-color: var(--signal); background: var(--signal-soft); }
.check-danger:has(input:checked) { border-color: var(--bad); background: rgb(255 99 112 / 0.1); }
.check:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
/* The save bar stays in reach at the bottom of a long form. */
.admin-sticky {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  padding: var(--space-3) var(--space-4);
  background: var(--panel-strong);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 2px 0 var(--signal), 0 -20px 40px -20px rgb(0 0 0 / 0.8);
  backdrop-filter: blur(14px);
}
.admin-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.admin-inline form { margin: 0; }

.admin-worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.admin-world { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-3); padding-inline-end: var(--space-5); color: var(--text-1); transition: border-color var(--fast); }
.admin-world:hover { color: var(--text-1); border-color: var(--line-4); }
.admin-world-art { flex: none; inline-size: 4rem; block-size: 5rem; overflow: hidden; background: repeating-linear-gradient(-45deg, rgb(255 248 235 / 0.03) 0 6px, transparent 6px 12px), var(--bg-2); box-shadow: 0 0 0 1px var(--line-2); }
.admin-world-art img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.admin-world-body { display: grid; gap: 0.2rem; min-inline-size: 0; }
.admin-world-body strong { font-family: var(--font-display); font-size: var(--size-l); font-weight: 800; }
.admin-world-body small { font-size: var(--size-xs); color: var(--text-3); }
.admin-world-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.admin-cover-grid { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.admin-cover-art { display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; background: repeating-linear-gradient(-45deg, rgb(255 248 235 / 0.03) 0 8px, transparent 8px 16px), var(--bg-2); box-shadow: 0 0 0 1px var(--line-2), 0 0 60px -20px var(--accent-glow); }
.admin-cover-art img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.admin-cover-empty, .admin-face-preview span { font-size: var(--size-s); color: var(--text-3); }
.admin-cover-fields { display: grid; gap: var(--space-4); }
.field-colour { align-content: end; }

.admin-stages { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.admin-stages li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.admin-stage-number { display: grid; place-items: center; block-size: 2.5rem; font-family: var(--font-display); font-weight: 800; color: var(--signal); border: 1px solid rgb(243 181 68 / 0.4); }

.admin-cast { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.admin-cast-row { display: flex; align-items: center; gap: var(--space-3); }
.admin-cast-link { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); min-inline-size: 0; padding: var(--space-2) var(--space-3); color: var(--text-1); border: 1px solid var(--line-1); transition: border-color var(--fast), background-color var(--fast); }
.admin-cast-link:hover { color: var(--text-1); border-color: var(--line-3); background: rgb(255 248 235 / 0.03); }
.admin-cast-link .cast-portrait { inline-size: 2.6rem; block-size: 2.6rem; }
.admin-cast-link .cast-portrait > span { font-size: 1.1rem; }
.admin-cast-body { display: grid; flex: 1; min-inline-size: 8rem; }
.admin-cast-body strong { font-family: var(--font-display); font-weight: 800; }
.admin-cast-body small { font-size: var(--size-xs); color: var(--text-3); }
.admin-cast-meta { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.admin-move { display: flex; gap: var(--space-1); margin: 0; }
.admin-move .btn { min-inline-size: 2.3rem; padding-inline: 0; }

/* «Experience this work»: each work a panel, its ways to get it as rows beneath. */
.admin-tally { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.admin-work-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.admin-work-name { display: grid; flex: 1; gap: 0.2rem; min-inline-size: 12rem; }
.admin-work-name h2 { margin: 0; font-size: var(--size-xl); font-weight: 850; }
.admin-work-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--size-xs); color: var(--text-3); }
.admin-access { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.admin-access-row { display: flex; align-items: center; gap: var(--space-3); }
.admin-access-link {
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--text-1);
  border: 1px solid var(--line-1);
  transition: border-color var(--fast), background-color var(--fast);
}
.admin-access-link:hover { color: var(--text-1); border-color: var(--line-3); background: rgb(255 248 235 / 0.03); }
.admin-access-body { display: grid; min-inline-size: 0; line-height: 1.6; }
.admin-access-body strong { overflow: hidden; font-size: var(--size-s); text-overflow: ellipsis; white-space: nowrap; }
.admin-access-body small { font-size: var(--size-xs); color: var(--text-3); }
.admin-access-link .access-check { font-size: var(--size-xs); white-space: nowrap; }
.admin-access-link .access-check.is-missing { color: var(--text-3); }
.admin-access-add { justify-self: start; }
.admin-rights { display: grid; gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--line-1); }
.admin-rights summary { cursor: pointer; font-size: var(--size-s); font-weight: 700; color: var(--text-2); }
.admin-rights summary:hover { color: var(--text-1); }

.admin-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.admin-face { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-3); border: 1px solid var(--line-1); }
.admin-face img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2); }
.admin-face-new { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-block-start: var(--space-4); border-block-start: 1px solid var(--line-1); }
.admin-face-preview { display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; text-align: center; border: 1px dashed var(--line-3); }
.admin-face-preview img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.admin-rows { display: grid; gap: var(--space-3); }
.admin-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr) auto; gap: var(--space-3); align-items: end; padding-block-end: var(--space-3); border-block-end: 1px solid var(--line-1); }
.admin-row-qa { grid-template-columns: minmax(0, 1fr); }
.admin-row-qa .check-danger { justify-self: start; }
.admin-row-shelf { grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) minmax(0, 2fr) auto auto; }
.admin-row.is-asked { padding: var(--space-4); border: 1px solid var(--signal); background: var(--signal-soft); }
.admin-slug { display: block; padding-block: 0.7rem; font-size: var(--size-s); color: var(--text-2); }
.admin-add-row { justify-self: start; }

.admin-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.admin-pick-world { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border: 1px solid var(--line-1); }
.admin-pick-world.is-picked { border-color: var(--signal); background: var(--signal-soft); }
.admin-pick-world img { inline-size: 2.6rem; block-size: 3.25rem; object-fit: cover; }
.admin-pick-world > span { display: grid; flex: 1; min-inline-size: 0; }
.admin-pick-world small { font-size: var(--size-xs); color: var(--text-3); }
.field-place input { inline-size: 4.5rem; min-block-size: 2.6rem; text-align: center; }

.admin-json { font-family: var(--font-mono) !important; font-size: var(--size-s) !important; line-height: 1.6 !important; tab-size: 2; }

.admin-danger { padding: var(--space-4) var(--space-5); border-color: rgb(255 99 112 / 0.25); }
.admin-danger summary { cursor: pointer; font-size: var(--size-s); font-weight: 700; color: var(--bad); }
.admin-danger[open] { display: grid; gap: var(--space-3); }
.admin-danger form { margin: 0; }

@media (max-width: 48rem) {
  .admin-cover-grid, .admin-face-new { grid-template-columns: minmax(0, 1fr); }
  .admin-access-link { grid-template-columns: auto minmax(0, 1fr); }
  .admin-access-link .access-check { grid-column: 2; }
  .admin-cover-art { max-inline-size: 14rem; }
  .admin-row, .admin-row-shelf { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ palette */

.palette {
  inline-size: min(36rem, calc(100% - 2rem));
  max-block-size: min(32rem, 80dvh);
  margin: 12dvh auto auto;
  padding: 0;
  color: var(--text-1);
  background: transparent;
  border: 0;
  overflow: visible;
}
.palette::backdrop { background: rgb(0 0 0 / 0.65); backdrop-filter: blur(6px); }
.palette[open] { animation: pop var(--medium) var(--ease-out); }

@keyframes pop { from { opacity: 0; translate: 0 -8px; scale: 0.98; } }

.palette-box {
  display: grid;
  overflow: hidden;
  background: var(--panel-strong);
  border: 1px solid var(--line-3);
  border-radius: var(--square);
  box-shadow: inset 0 2px 0 var(--signal), 0 40px 100px -30px rgb(0 0 0 / 0.95), 0 0 80px -30px var(--signal-glow);
  backdrop-filter: blur(24px) saturate(160%);
}
.palette-input { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--line-2); }
.palette-input > .icon { color: var(--text-3); inline-size: 1.3rem; block-size: 1.3rem; }
.palette-input input { flex: 1; min-inline-size: 0; font: inherit; font-size: var(--size-l); color: var(--text-1); background: none; border: 0; outline: none; }
.palette-input input::placeholder { color: var(--text-3); }
.palette-input input::-webkit-search-cancel-button { display: none; }
.palette-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin: -0.3rem 0;
  padding: 0;
  color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--square);
  cursor: pointer;
  transition: color var(--fast), background-color var(--fast), border-color var(--fast);
}
.palette-close:hover {
  color: var(--text-1);
  background: rgb(255 248 235 / 0.08);
  border-color: var(--line-3);
}
.palette-close:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
.palette-close .icon {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  color: inherit;
}

.palette-list { display: grid; gap: 2px; margin: 0; padding: var(--space-2); list-style: none; max-block-size: 20rem; overflow-y: auto; }
.palette-list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.65rem 0.9rem;
  color: var(--text-2);
  border-inline-start: 2px solid transparent;
}
.palette-list a .icon { color: var(--text-3); }
.palette-list a.is-active, .palette-list a:hover { color: var(--text-1); background: rgb(255 248 235 / 0.05); }
.palette-list a.is-active { border-inline-start-color: var(--signal); background: linear-gradient(to left, var(--signal-soft), transparent 70%); }
.palette-list a.is-active:dir(ltr) { background: linear-gradient(to right, var(--signal-soft), transparent 70%); }
.palette-list a.is-active .icon { color: var(--signal); }
.palette-empty { padding: var(--space-5); text-align: center; color: var(--text-3); }
.palette-foot { display: flex; gap: var(--space-5); padding: var(--space-3) var(--space-5); font-size: var(--size-xs); color: var(--text-3); border-block-start: 1px solid var(--line-1); }
.palette-foot span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* ================================================================ toast */

.toast {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-start: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.7rem 1.1rem;
  font-size: var(--size-s);
  font-weight: 600;
  background: var(--panel-strong);
  border: 1px solid rgb(125 211 174 / 0.3);
  box-shadow: inset var(--bar-x) 0 0 var(--good), 0 20px 50px -20px rgb(0 0 0 / 0.9), 0 0 30px -10px rgb(125 211 174 / 0.4);
  backdrop-filter: blur(16px);
  translate: 50% 0;
  animation: toast 4.5s var(--ease-out) both;
  pointer-events: none;
}
.toast:dir(ltr) { translate: -50% 0; }
.toast .icon { color: var(--good); }

@keyframes toast {
  0% { opacity: 0; transform: translateY(16px) scale(0.96); }
  8%, 85% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(8px); }
}

/* ================================================================ bevels */

/*
  Cut corners where the browser can draw them (corner-shape); square
  corners everywhere else. Controls lose two opposite corners, small parts
  the same at a smaller size, panels one corner at the end of the block.
*/
@supports (corner-shape: bevel) {
  :is(.btn, .hud-search, .player, .field input, .where-select, .resume-chip, .ask-form) {
    corner-shape: bevel;
    border-radius: 0;
    border-start-start-radius: var(--cut);
    border-end-end-radius: var(--cut);
  }
  :is(.btn-small, .tag-link, .tag, .codex-filters label, .stage-picker label, .world-status, .world-card-status, .avatar,
      .cast-portrait, .route-mark, .access-icon, .setting-icon, .stat-icon, .auth-icon, .journey-tab > .icon, .otp-slot,
      .cast-note-at, .insight-kind, .insight-beyond, .picker-card img, .picker-more-icon, .step-mark, .address, .dev-note,
      .fog-world, .continue-card img, .dossier-aka li, .way-fan > *, .way-media li, .finale-perk-icon, .mood-panel-covers img) {
    corner-shape: bevel;
    border-radius: 0;
    border-start-start-radius: var(--cut-s);
    border-end-end-radius: var(--cut-s);
  }
  .avatar-xl { border-start-start-radius: 18px; border-end-end-radius: 18px; }
  :is(.glass, .journey-tab, .fog, .fog-feed, .fog-find, .access-item, .insight, .world-card-art, .palette-box, .toast, .cast-card.is-locked, .mood-panel, .mood-panel-art) {
    corner-shape: bevel;
    border-radius: 0;
    border-end-end-radius: var(--cut-l);
  }
}

/* ================================================================ motion */

/* Page-to-page navigation cross-fades, with no JavaScript. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms var(--ease-out) both fade-out; }
::view-transition-new(root) { animation: 360ms var(--ease-out) both fade-in; }

@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; translate: 0 10px; } }

.page > * { animation: rise var(--slow) var(--ease-out) both; }
.page > *:nth-child(2) { animation-delay: 80ms; }
.page > *:nth-child(3) { animation-delay: 160ms; }
.page > *:nth-child(4) { animation-delay: 240ms; }

@keyframes rise { from { opacity: 0; translate: 0 18px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
    transition: none !important;
  }
}

/* ================================================================ smaller screens */

@media (max-width: 64rem) {
  /*
    The stage stacks: the cover becomes a full-width window at the top,
    under the header, and the words rise over its faded lower edge.
  */
  .showcase { grid-template-rows: none; min-block-size: 0; gap: var(--space-5); padding-block-start: 0; }
  .stage { order: -1; }
  .world, .world.is-page { grid-template-columns: minmax(0, 1fr); }
  .world-art,
  .world-hero .world-art {
    position: relative;
    inset: auto;
    inline-size: auto;
    block-size: min(72svh, 118vw);
    margin-inline: calc(50% - 50vw);
    margin-block-start: calc(-1 * var(--hud-h));
    mask-image: linear-gradient(#000 55%, transparent);
  }
  .world-art:dir(ltr) { mask-image: linear-gradient(#000 55%, transparent); }
  /* On the home page the stage is not under the header: its cover fades in from above instead. */
  .showcase .world-art,
  .showcase .world-art:dir(ltr) {
    margin-block-start: 0;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgb(0 0 0 / 0.04) 5%,
      rgb(0 0 0 / 0.2) 12%,
      rgb(0 0 0 / 0.52) 20%,
      rgb(0 0 0 / 0.82) 28%,
      #000 36%,
      #000 58%,
      rgb(0 0 0 / 0.8) 72%,
      rgb(0 0 0 / 0.45) 86%,
      rgb(0 0 0 / 0.12) 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgb(0 0 0 / 0.04) 5%,
      rgb(0 0 0 / 0.2) 12%,
      rgb(0 0 0 / 0.52) 20%,
      rgb(0 0 0 / 0.82) 28%,
      #000 36%,
      #000 58%,
      rgb(0 0 0 / 0.8) 72%,
      rgb(0 0 0 / 0.45) 86%,
      rgb(0 0 0 / 0.12) 95%,
      transparent 100%
    );
  }
  .showcase .world-status { inset-block-start: 2rem; }
  .world-info { margin-block-start: calc(-1 * clamp(5rem, 24vw, 10rem)); }
  .world-status { inset-block-start: calc(var(--hud-h) + 1rem); inset-inline-end: var(--gutter); }

  .world-hero { min-block-size: 0; padding-block: var(--hud-h) var(--space-5); align-content: start; }
  .world-hero .crumbs { order: 1; }
  .world-hero .world { order: 0; }

  .auth { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-5); min-block-size: 0; }
  .auth-art .portal { display: none; }
  .fog-body { grid-template-columns: minmax(0, 1fr); }
  .popular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .footer-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-now { justify-items: start; }
  .fog-feed { max-block-size: 15rem; }

  /* The title screen takes the height of what it holds. */
  .title-screen { min-block-size: 0; }
  .arcade { --window-h: min(28rem, 56vw); }

  /* The steps stack, each with its picture beside its words. */
  .way-steps { grid-template-columns: minmax(0, 1fr); }
  .way-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: none; }
  .way-art { aspect-ratio: auto; min-block-size: 16rem; border-block-end: 0; border-inline-end: 1px solid var(--line-1); }
  .growing { grid-template-columns: minmax(0, 1fr); }

  /* The finale stacks: the window above the words. */
  .finale { grid-template-columns: minmax(0, 1fr); }
  .finale-window { order: 0; inline-size: min(70%, 19rem); }
  .finale::before, .finale:dir(ltr)::before { background: radial-gradient(ellipse 60% 40% at 50% 25%, rgb(243 181 68 / 0.13), transparent 70%); }
}

@media (max-width: 48rem) {
  .hud-bar { gap: var(--space-3); }
  .hud .brand { padding-inline-end: 0; border-inline-end: 0; }
  .hud-nav { display: none; }
  .hud-search-label, .hud-search kbd { display: none; }
  .palette-esc { display: none; }
  .hud-search { padding-inline: 0.65rem; }
  .player-name { display: none; }
  .player { padding-inline-end: 0.25rem; }
  .settings, .stats, .legal-pillars { grid-template-columns: minmax(0, 1fr); }
  .form-row, .form-split { grid-template-columns: minmax(0, 1fr); }
  .removal-success { flex-direction: column; align-items: stretch; }
  .removal-drawer { position: fixed; inset-inline: var(--gutter); inset-block-end: var(--space-4); inline-size: auto; max-block-size: 80vh; overflow-y: auto; }
  .admin-removals-controls { flex-direction: column; align-items: stretch; }
  .admin-search-form { flex-direction: column; align-items: stretch; }
  .profile-body { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  /* On a phone the level select is a strip that scrolls sideways under the stage. */
  .picker { overflow-x: auto; scroll-snap-type: inline mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .picker-card { flex: 0 0 auto; min-inline-size: 11rem; padding-inline: 0.75rem; scroll-snap-align: start; }
  .picker-more { min-inline-size: 9.5rem; }

  /* The title screen: the windows sized to the phone's width, and the words in one column beneath. */
  .title-screen { min-block-size: 0; padding-block-end: var(--space-7); }
  .arcade { --window-h: min(66vw, 42svh); gap: 0.55rem; }
  .title-head { margin-block-start: calc(-1 * clamp(1.5rem, 9vw, 3rem)); }
  .title-actions { display: grid; inline-size: 100%; }

  /* Each step's picture above its words. */
  .way-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .way-art { aspect-ratio: 16 / 11; min-block-size: 0; border-inline-end: 0; border-block-end: 1px solid var(--line-1); }
  .growing-shelves small { white-space: normal; }

  /* The main action across the width; the rest share one row beneath it. */
  .world-actions { inline-size: 100%; gap: var(--space-2); }
  .world-actions .btn { flex: 1 1 0; min-inline-size: 0; padding-inline: 0.5rem; justify-content: center; }
  .world-actions .btn-primary { flex-basis: 100%; }
  .world-actions .btn-glass { font-size: var(--size-s); }
  .world-facts { min-inline-size: 0; inline-size: 100%; }

  /* On a phone the map keeps its size and pans sideways, like a game map. */
  .fog-svg { inline-size: 42rem; max-inline-size: none; }
  .fog-pan { display: flex; align-items: center; gap: 0.4rem; }
  .fog-hud { justify-content: center; }
  .answers { grid-template-columns: minmax(0, 1fr); }
  .popular { grid-template-columns: minmax(0, 1fr); }
  .shelf-row { grid-auto-columns: 9.5rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .world-sections { gap: var(--space-8); }
  .footer-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The path turns vertical, with the line running down the start side. */
  .route { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; gap: var(--space-4); }
  .route-step { grid-template-columns: auto 1fr; column-gap: var(--space-4); }
  .route-step > :not(.route-mark) { grid-column: 2; }
  .route-mark { grid-row: span 3; }
  .route-step:not(:last-child)::after { inset-block: 3.1rem calc(-1 * var(--space-4)); inset-inline: 1.4rem auto; inline-size: 1px; block-size: auto; background: linear-gradient(180deg, var(--accent), var(--line-2)); }
  .route-step:not(:last-child):dir(rtl)::after { background: linear-gradient(180deg, var(--accent), var(--line-2)); }
  .fog-lock { justify-self: center; text-align: center; }
  .mood-panel { min-block-size: 20rem; }
  .board-all { inline-size: 100%; }
  .finale-actions { inline-size: 100%; }
  .finale-actions .btn { flex: 1 1 auto; }
}