/* In-game inlay screens for every page except home: painted scene backgrounds (BLOG, post, THE GAME,
   WHO IS THIS), the .inlay panel, title plaques, rows and the dialog box; a lighter panel for the
   legal and outcome pages. Loaded only by those pages, so home never references the scene art.
   Panel language follows design/ingame-menus-brief.md. */

/* ---------- Page base ---------- */

.doc-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--term);
  background:
    radial-gradient(1px 1px at 12% 18%, rgb(214 232 255 / 0.7) 99%, transparent),
    radial-gradient(1px 1px at 72% 9%, rgb(214 232 255 / 0.55) 99%, transparent),
    radial-gradient(2px 2px at 38% 31%, rgb(214 232 255 / 0.45) 99%, transparent),
    radial-gradient(1px 1px at 88% 41%, rgb(214 232 255 / 0.6) 99%, transparent),
    radial-gradient(1px 1px at 22% 62%, rgb(214 232 255 / 0.4) 99%, transparent),
    radial-gradient(2px 2px at 61% 74%, rgb(214 232 255 / 0.35) 99%, transparent),
    linear-gradient(180deg, var(--world-sky) 0%, #071a55 60%, var(--world-blue) 130%) fixed;
  background-color: var(--world-sky);
}

/* ---------- Painted scene (fixed, behind everything) ---------- */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--world-sky);
  pointer-events: none;
}

/* The art box keeps the image's own proportions and covers the viewport with a little headroom
   for pointer parallax, so effect layers placed in % land on the painted objects.
   Centred with negative margins, never `translate`/`transform`: pages-motion.js animates this
   element's transform (entrance scale, parallax x/y), and GSAP folds a CSS `translate` into its own
   transform when it first touches the element. That fold is lossy (it measured the box before the
   art had settled, dropping the -50% on one or both axes), which pushed the art right and down,
   leaving the left and top of the viewport uncovered on desktop. Margins keep layout and motion apart. */
/* .library__art (library.css) shares this box exactly, so the library's books stay on the painted desk. */
.scene__art, .library__art {
  /* At least 24px spare on every side, so the 14px pointer parallax never reveals an edge. */
  --art-w: max(104vw, 100vw + 48px, calc((100vh + 48px) * 1920 / 1072));
  --art-h: calc(var(--art-w) * 1072 / 1920);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--art-w);
  height: var(--art-h);
  margin: calc(var(--art-h) / -2) 0 0 calc(var(--art-w) / -2);
}
.scene__art { background: var(--world-sky) center / 100% 100% no-repeat; }
@media (orientation: portrait) {
  .scene__art, .library__art {
    --art-w: max(104vw, calc(104vh * 900 / 1600));
    --art-h: calc(var(--art-w) * 1600 / 900);
  }
}

.page-blog .scene__art { background-image: url("/media/pages/blog-desktop.webp?v=20261011c"); }
.page-game .scene__art { background-image: url("/media/pages/the-game-desktop.webp?v=20261011c"); }
.page-who .scene__art { background-image: url("/media/pages/who-is-this-desktop.webp?v=20261011c"); }
@media (orientation: portrait) {
  .page-blog .scene__art { background-image: url("/media/pages/blog-mobile.webp?v=20261011c"); }
  .page-game .scene__art { background-image: url("/media/pages/the-game-mobile.webp?v=20261011c"); }
  .page-who .scene__art { background-image: url("/media/pages/who-is-this-mobile.webp?v=20261011c"); }
}

.scene__fx { position: absolute; inset: 0; }

/* Vignette: edges and the band under the HUD fall to night so panels and the strip read. */
.scene__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(0 5 16 / 0.55) 0, rgb(0 5 16 / 0) 22%),
    radial-gradient(120% 110% at 50% 50%, rgb(0 5 16 / 0) 52%, rgb(0 5 16 / 0.75) 100%);
}
.page-post .scene__vignette {
  background:
    linear-gradient(180deg, rgb(0 5 16 / 0.6) 0, rgb(0 5 16 / 0.25) 30%),
    radial-gradient(120% 110% at 50% 50%, rgb(0 5 16 / 0.3) 40%, rgb(0 5 16 / 0.85) 100%);
}
.scene__veil { position: absolute; inset: 0; background: #000510; opacity: 0; }
/* Before the motion layer takes over (at most 1.1 s, see boot.js): dark scene, screen held back. */
.intro .scene__veil { opacity: 1; }
.intro .screen { opacity: 0; }

/* Warm light sources, flickered by pages-motion.js; still and soft without it. */
.glow {
  position: absolute;
  width: var(--r, 14%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 214 120 / 0.55), rgb(255 170 70 / 0.18) 55%, transparent);
  opacity: 0.6;
}
.page-blog .glow--a { left: 86%; top: 31%; --r: 16%; }
.page-blog .glow--b { left: 95.5%; top: 49%; --r: 10%; }
.page-game .glow--a { left: 61%; top: 60%; --r: 16%; }
.page-game .glow--b { left: 69.5%; top: 26%; --r: 9%; }
.page-game .glow--c { left: 96%; top: 31%; --r: 9%; }
.page-who .glow--a { left: 36.5%; top: 71%; --r: 18%; }
.page-who .glow--b { left: 11.5%; top: 36%; --r: 8%; }
@media (orientation: portrait) {
  .page-blog .glow--a { left: 88%; top: 31%; --r: 40%; }
  .page-blog .glow--b { display: none; }
  .page-game .glow--a { left: 79%; top: 60%; --r: 44%; }
  .page-game .glow--b { left: 105%; top: 26%; --r: 26%; }
  .page-game .glow--c { display: none; }
  .page-who .glow--a { left: 77%; top: 71%; --r: 50%; }
  .page-who .glow--b { display: none; }
}

/* Particles (dust in the library, embers from the campfire), created by pages-motion.js. */
.mote, .ember { position: absolute; width: 2px; height: 2px; }
.mote { background: rgb(246 215 124 / 0.55); box-shadow: 0 0 3px rgb(246 215 124 / 0.5); }
.ember { left: var(--fire-x); top: var(--fire-y); background: #ffb347; box-shadow: 0 0 4px #ff6a3d; }
.page-who .scene__fx { --fire-x: 36.5%; --fire-y: 69%; }
@media (orientation: portrait) { .page-who .scene__fx { --fire-x: 77%; } }

/* ---------- Screen layout ---------- */

.screen {
  position: relative;
  z-index: 1;
  width: min(47.5rem, 100% - 2rem);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) 0 3rem;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.page-post .screen { width: min(51.25rem, 100% - 2rem); }

/* ---------- The inlay panel (the game's panel: 3px neon edge, stepped pixel corners, inner rule) ---------- */

.inlay {
  --pad: clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
  isolation: isolate;
  padding: calc(var(--pad) + 0.5rem) var(--pad) var(--pad);
  color: #e6ecfb;
}
.inlay__frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Box shadows rather than filters: far cheaper to paint over the animated scene. */
  box-shadow: 0 0 9px var(--glow, rgb(62 200 255 / 0.5)), 0 12px 24px rgb(0 0 0 / 0.5);
  pointer-events: none;
}
.inlay__frame::before, .inlay__frame::after {
  content: "";
  position: absolute;
  clip-path: var(--px-clip);
}
.inlay__frame::before { inset: 0; background: var(--edge, var(--neon)); }
.inlay__frame::after {
  inset: 3px;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.02) 0 1px, transparent 1px 3px),
    var(--fill, rgb(3 10 31 / 0.94));
}
/* The 1px inner hairline, 4px inside the edge. */
.inlay__frame > i {
  position: absolute;
  inset: 7px;
  z-index: 1;
  border: 1px solid var(--rule, rgb(62 200 255 / 0.35));
  border-radius: 2px;
}

.inlay--magenta {
  --edge: #ff5fd8;
  --fill: rgb(28 3 44 / 0.94);
  --rule: rgb(255 95 216 / 0.4);
  --glow: rgb(255 95 216 / 0.5);
}

/* Header row: a pixel label with a rule running to the right edge. */
.inlay__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  font: 400 0.75rem/1.6 var(--pixel);
  color: var(--cyan-strong);
  text-transform: uppercase;
}
.inlay__label::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  background: rgb(62 200 255 / 0.45);
}
.inlay--magenta .inlay__label { color: #ffb3ef; }
.inlay--magenta .inlay__label::after { background: rgb(255 95 216 / 0.5); }

/* ---------- Title plaque: the page heading in a tab straddling the top border ---------- */

.doc .inlay__plaque, .inlay__plaque {
  position: relative;
  isolation: isolate;
  display: table;
  max-width: 100%;
  margin: calc(-1 * var(--pad) - 0.5rem - 1.65rem) 0 1.5rem -0.5rem;
  padding: 0.7rem 1.15rem 0.65rem;
  font: 400 2rem/1.4 var(--pixel);
  color: #fff;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--violet);
  text-wrap: balance;
  box-shadow: 0 0 8px rgb(62 200 255 / 0.5);
}
.inlay__plaque::before, .inlay__plaque::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: var(--px-clip);
}
.inlay__plaque::before { inset: 0; background: var(--neon); }
.inlay__plaque::after {
  inset: 3px;
  background: linear-gradient(180deg, #17398a 0%, var(--ui-select) 55%, #091d45 100%);
  box-shadow: inset 0 0 0 1px #000916, inset 0 2px 0 1px rgb(140 230 255 / 0.3);
}

/* ---------- Body copy inside panels: the terminal face ---------- */

.inlay p { margin: 0 0 0.9em; font: 400 1.5rem/1.4 var(--term); }
.inlay p:last-child { margin-bottom: 0; }
.inlay a { color: var(--cyan-strong); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.inlay a:hover { color: var(--lantern); }

/* Icon tile: a framed square with a pixel glyph, like the mockup's Mission panel and option rows. */
.icon-tile {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  background: var(--neon);
  clip-path: var(--px-clip);
}
.icon-tile::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: var(--px-clip);
  background: linear-gradient(180deg, #0c2a62, #061636);
}
.icon-tile__glyph {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 32px;
  height: 32px;
  background: var(--cyan-strong);
  -webkit-mask: url("/media/icon-clipboard.svg") center / 32px 32px no-repeat;
  mask: url("/media/icon-clipboard.svg") center / 32px 32px no-repeat;
}

/* ---------- BLOG: posts as selectable option rows ---------- */

.doc .posts { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.doc .posts__item {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 1.25rem;
  align-items: start;
  padding: 1.15rem 1.25rem 0.85rem 2.4rem;
  border: 0;
}
.doc .posts__item:last-child { border: 0; }
.posts__item > :not(.hud-pointer):not(.icon-tile) { grid-column: 2; }
.posts__item > .icon-tile { grid-column: 1; grid-row: 1 / span 4; margin-top: 0.15rem; }
.posts__item::before, .posts__item::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: var(--px-clip);
  transition: background-color 120ms;
}
.posts__item::before { inset: 0; background: var(--neon-dim); }
.posts__item::after { inset: 2px; background: rgb(5 17 46 / 0.96); }
.posts__item:hover::before, .posts__item:focus-within::before { background: var(--neon); }
.posts__item:hover::after, .posts__item:focus-within::after {
  background: linear-gradient(90deg, rgb(62 200 255 / 0.14), transparent 60%), var(--ui-select);
}
.posts__item:hover, .posts__item:focus-within { filter: drop-shadow(0 0 6px rgb(62 200 255 / 0.5)); }

.hud-pointer {
  position: absolute;
  left: 0.95rem;
  top: 2.1rem;
  width: 8px;
  height: 10px;
  background: var(--hero-eye);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  filter: drop-shadow(1px 1px 0 #8a5a00);
  opacity: 0.35;
}
.posts__item:hover .hud-pointer, .posts__item:focus-within .hud-pointer { opacity: 1; }

.doc .posts__date { order: -1; margin: 0 0 0.5rem; font: 400 0.75rem/1.6 var(--pixel); color: var(--ui-edge-hi); }
.doc .posts__title { margin: 0 0 0.6rem; font: 400 1rem/1.7 var(--pixel); }
.doc .posts__title a { color: #fff; text-decoration: none; text-shadow: 2px 2px 0 var(--violet); }
.doc .posts__title a:hover { color: var(--lantern); }
.doc .inlay .posts__excerpt { margin: 0 0 0.25rem; font: 400 1.4375rem/1.4 var(--term); color: #dbe3f8; }
.doc .posts__more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font: 400 0.75rem/1.4 var(--pixel);
  color: var(--cyan-strong);
  text-decoration: none;
}
.doc .posts__more::after { content: ""; width: 0; height: 0; border-block: 5px solid transparent; border-left: 6px solid currentColor; }
.doc .posts__more:hover { color: var(--lantern); }

/* Newsletter: the magenta panel (the mockup's NEXT STATE) with a PRESS START style key. */
.doc .doc__empty { margin: 0; padding: calc(var(--pad) - 0.25rem) var(--pad) var(--pad); border: 0; background: none; }
.doc .doc__empty p { margin: 0 0 1.25rem; }
.key-button {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 52px;
  padding: 0.9rem 1.4rem;
  border: 3px solid #ff5fd8;
  background: rgb(4 8 28 / 0.96);
  box-shadow: inset 0 0 0 2px rgb(4 8 28), inset 0 0 0 3px rgb(95 224 255 / 0.65), 0 0 10px rgb(255 95 216 / 0.5);
  font: 400 0.75rem/1.2 var(--pixel);
  text-transform: uppercase;
}
.key-button::before { content: ""; border-block: 7px solid transparent; border-left: 10px solid currentColor; }
.inlay a.key-button { color: #fff; text-decoration: none; }
.inlay a.key-button:hover { color: var(--lantern); border-color: #ff9be9; box-shadow: inset 0 0 0 2px rgb(4 8 28), inset 0 0 0 3px var(--neon), 0 0 14px rgb(255 95 216 / 0.7); }
.key-button:active { translate: 0 2px; }

/* ---------- Status bar: every sub-page ends with the game's bottom strip ---------- */

.statusbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem clamp(1rem, 4vw, 3rem) max(0.6rem, env(safe-area-inset-bottom));
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px),
    rgb(2 8 24 / 0.95);
  box-shadow: 0 -3px 0 var(--neon), 0 -4px 0 #000916, 0 -5px 0 rgb(62 200 255 / 0.3), 0 0 14px rgb(62 200 255 / 0.3);
}
.statusbar__i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--neon);
  border-radius: 2px;
  font: 400 0.75rem/1 var(--pixel);
  color: var(--cyan-strong);
}
.statusbar .doc__legal {
  margin: 0;
  padding: 0;
  border: 0;
  font: 400 1.125rem/1.4 var(--term);
  color: #c3cde8;
}
.statusbar .doc__legal a { display: inline-block; padding-block: 0.3rem; color: var(--cyan-strong); }
.statusbar .doc__legal a:hover { color: var(--lantern); }

/* ---------- Post: a wide reading inlay ---------- */

.doc .post { font: 400 1.5rem/1.45 var(--term); }
.doc .post p { max-width: 64ch; margin: 0 0 1em; font: inherit; }
.doc .post .post__title { font-size: 1.5rem; line-height: 1.55; text-shadow: 2px 2px 0 var(--violet); }
.post .post__byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
  border-image: none;
  font: 400 0.75rem/1.6 var(--pixel);
  color: var(--cyan-strong);
}
.post .post__byline::after { content: ""; flex: 1 1 auto; height: 2px; background: rgb(62 200 255 / 0.45); }
.post .post__salute { color: var(--cyan-strong); }
.doc .post .post__signoff { font: 400 1rem/1.4 var(--pixel); color: #fff; text-shadow: 2px 2px 0 var(--violet); }
.post .post__ps {
  max-width: none;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--lantern);
  background: rgb(246 215 124 / 0.07);
  color: #dbe3f8;
}
/* No scanlines under long reading text. */
.post.inlay > .inlay__frame::after { background: rgb(3 10 31 / 0.95); }
.screen > .post__back { margin: -1rem 0 0; }
.post__back a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font: 400 0.75rem/1.4 var(--pixel);
  color: var(--cyan-strong);
  text-shadow: 0 2px 0 #000;
}
.post__back a::before { content: ""; border-block: 5px solid transparent; border-right: 6px solid currentColor; }
.post__back a:hover { color: var(--lantern); }

/* ---------- THE GAME: a briefing card pinned to the war-room corkboard ---------- */

.page-game .screen { width: min(42rem, 100% - 2rem); }
@media (min-width: 64rem) {
  .page-game .screen { width: min(42rem, 46vw); margin-left: 8vw; padding-top: clamp(4.5rem, 13vh, 8rem); }
}
.briefing { padding-top: calc(var(--pad) + 0.25rem); }
/* Header row: the title plaque and a rule (the mockup's LEVEL 01 header). */
.briefing__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.5rem;
}
.briefing__head::after {
  content: "";
  flex: 1 1 auto;
  height: 3px;
  background: var(--neon);
  box-shadow: 0 0 6px rgb(62 200 255 / 0.6);
}
.doc .briefing .inlay__plaque { margin: 0; }
.briefing__body {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.25rem;
  align-items: start;
  min-height: 11rem;
  padding: 1.25rem;
  border: 2px solid rgb(62 200 255 / 0.4);
  border-radius: 2px;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(2rem - 1px), rgb(62 200 255 / 0.13) calc(2rem - 1px) 2rem) 0 1.25rem / 100% 100% no-repeat,
    rgb(2 8 26 / 0.6);
}
/* The opening section sits on the card's ruled lines: every line and gap is one 2rem rule. */
.briefing__copy { min-width: 0; }
.briefing__copy .chapter__title { margin: 0 0 2rem; padding: 0; line-height: 2rem; }
.briefing__copy .chapter__title::after { display: none; }
.page-game .briefing__copy p { margin: 0 0 2rem; font: 400 1.5rem/2rem var(--term); color: #dfe8ff; }
.briefing__copy .key-button { margin-top: 0.25rem; }
/* Red tacks pinning the card to the board. */
.briefing__pin {
  position: absolute;
  top: -5px;
  z-index: 2;
  width: 12px;
  height: 12px;
  background: #d8333f;
  box-shadow: inset 3px 3px 0 #ff8a8a, inset -3px -3px 0 #7d0f1d, 0 3px 0 rgb(0 0 0 / 0.45);
}
.briefing__pin--l { left: 18px; }
.briefing__pin--r { right: 18px; }
.game { display: flex; flex-direction: column; gap: 2.5rem; }

/* ---------- Long-form chapters (THE GAME and WHO IS THIS): one panel per section ---------- */

/* Reading text sits on a flat fill, no scanlines. */
.chapter > .inlay__frame::after { background: rgb(3 10 31 / 0.95); }
.chapter.inlay--magenta > .inlay__frame::after { background: rgb(28 3 44 / 0.95); }
.chapter__title {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0 0 1.5rem;
  font: 400 1rem/1.7 var(--pixel);
  color: #fff;
  text-shadow: 2px 2px 0 var(--violet);
  text-wrap: balance;
}
.chapter__title::after { content: ""; width: 4.5rem; height: 3px; background: var(--neon); box-shadow: 0 0 6px rgb(62 200 255 / 0.6); }
.inlay--magenta .chapter__title::after { background: #ff5fd8; box-shadow: 0 0 6px rgb(255 95 216 / 0.6); }
.chapter p, .dialog .inlay p { max-width: 62ch; color: #e6ecfb; }
.chapter--join .key-button { margin-top: 0.75rem; }
/* Kay's own asides inside the narrative: set apart by a lantern rule, never a quote card. */
.aside { margin: 1.4rem 0 1.6rem; padding: 0.15rem 0 0.15rem 1.25rem; border-left: 3px solid var(--lantern); }
.inlay .aside p { margin: 0; font-size: 1.75rem; line-height: 1.35; color: var(--lantern); }

/* ---------- WHO IS THIS: an RPG text box with the hero's bust portrait on its edge ---------- */

.page-who .screen {
  --tile: 134px;
  width: min(52rem, 100% - 2rem);
  margin-right: clamp(1rem, 5vw, 5rem);
  justify-content: flex-end;
  gap: 2.5rem;
  padding-bottom: 2rem;
}
.dialog { position: relative; margin-top: 5rem; }
.portrait {
  position: absolute;
  left: 1.5rem;
  top: calc(var(--tile) * -0.55);
  z-index: 3;
  width: var(--tile);
  height: var(--tile);
  margin: 0;
  overflow: hidden;
  clip-path: var(--px-clip);
  background: var(--neon);
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 0;
  clip-path: var(--px-clip);
  background:
    radial-gradient(70% 55% at 50% 45%, rgb(62 200 255 / 0.3), transparent 70%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #102f69, var(--ui-select) 60%, #071838);
}
/* Head and shoulders: the 64x114 sprite at exactly 2x, cropped to the hood. */
.portrait__sprite {
  position: absolute;
  z-index: 1;
  left: -5px;
  top: 3px;
  width: 128px;
  height: 228px;
  background: url("/media/hero-sprite.png") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.portrait__lids {
  position: absolute;
  z-index: 2;
  left: 67px;
  top: 59px;
  width: 36px;
  height: 20px;
  background:
    linear-gradient(#0c0a1f, #0c0a1f) 0 0 / 12px 20px no-repeat,
    linear-gradient(#0c0a1f, #0c0a1f) 28px 0 / 8px 20px no-repeat;
  opacity: 0;
}
.dialog .inlay { min-height: 15.5rem; }
/* The plaque and the name label sit to the right of the portrait. */
/* The plaque sits to the right of the portrait; the text starts below it. */
.doc.page-who .inlay__plaque, .page-who .inlay__plaque { margin-left: calc(1.5rem + var(--tile) + 0.75rem - var(--pad)); margin-bottom: 2.75rem; }

/* ---------- Legal and outcome pages: a dimmed stone wall behind the same panel ---------- */

.doc-page:not(.scene-page) {
  background:
    radial-gradient(120% 90% at 50% 30%, rgb(2 6 20 / 0.55), rgb(2 6 20 / 0.9)),
    url("/media/stone-tile.png") 0 0 / 128px 128px repeat,
    var(--world-sky);
}
.doc-page:not(.scene-page) .doc {
  position: relative;
  z-index: 1;
  isolation: isolate;
  flex: 1 0 auto;
  width: min(46rem, 100% - 2rem);
  margin: clamp(3rem, 8vh, 5rem) auto 3rem;
  padding: 2.75rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
  font: 400 1.3125rem/1.45 var(--term);
  color: #e6ecfb;
  background: none;
  box-shadow: 0 0 12px rgb(62 200 255 / 0.35), 0 16px 32px rgb(0 0 0 / 0.5);
}
.doc-page:not(.scene-page) .doc::before, .doc-page:not(.scene-page) .doc::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: var(--px-clip);
}
.doc-page:not(.scene-page) .doc::before { inset: 0; background: var(--neon); }
.doc-page:not(.scene-page) .doc::after {
  inset: 3px;
  background: rgb(3 10 31 / 0.97);
  box-shadow: inset 0 0 0 4px rgb(3 10 31), inset 0 0 0 5px rgb(62 200 255 / 0.35);
}
.doc-page:not(.scene-page) .doc h1 {
  position: relative;
  isolation: isolate;
  display: table;
  max-width: 100%;
  margin: -4.5rem 0 1.5rem -0.5rem;
  padding: 0.7rem 1rem 0.65rem;
  font: 400 clamp(1rem, 3.6vw, 1.5rem)/1.45 var(--pixel);
  color: #fff;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--violet);
  text-wrap: balance;
  box-shadow: 0 0 8px rgb(62 200 255 / 0.5);
}
.doc-page:not(.scene-page) .doc h1::before, .doc-page:not(.scene-page) .doc h1::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: var(--px-clip);
}
.doc-page:not(.scene-page) .doc h1::before { inset: 0; background: var(--neon); }
.doc-page:not(.scene-page) .doc h1::after { inset: 3px; background: linear-gradient(180deg, #17398a, var(--ui-select) 55%, #091d45); }
.doc-page:not(.scene-page) .doc h2 { font: 400 0.875rem/1.6 var(--pixel); color: var(--cyan-strong); margin: 2.25rem 0 0.75rem; }
.doc-page:not(.scene-page) .doc p, .doc-page:not(.scene-page) .doc li, .doc-page:not(.scene-page) .doc td,
.doc-page:not(.scene-page) .doc th { font-family: var(--term); font-size: 1.3125rem; line-height: 1.45; }
.doc-page:not(.scene-page) .doc table { font-size: 1.125rem; }
.doc-page:not(.scene-page) .doc .muted { color: #c3cde8; font-size: 1.125rem; }
.doc-page:not(.scene-page) .doc__art { border-radius: 0; box-shadow: 0 0 0 3px var(--neon); }
.doc-page:not(.scene-page) .doc__home { display: none; }

/* ---------- Narrow screens ---------- */

@media (max-width: 40rem) {
  .screen { padding-top: 2.75rem; gap: 2.25rem; }
  .inlay { --pad: 1.25rem; }
  .doc .inlay__plaque, .inlay__plaque { font-size: 1.5rem; margin-top: calc(-1 * var(--pad) - 0.5rem - 1.4rem); }
  .doc .post .post__title { font-size: 1rem; line-height: 1.7; }
  .inlay p, .doc .post { font-size: 1.375rem; line-height: 1.4; }
  .doc .posts__item { grid-template-columns: 44px 1fr; column-gap: 0.9rem; padding: 1rem 0.9rem 0.75rem 1.9rem; }
  .posts__item > .icon-tile { width: 44px; height: 44px; }
  .posts__item .icon-tile__glyph { width: 24px; height: 24px; -webkit-mask-size: 24px 24px; mask-size: 24px 24px; }
  .hud-pointer { left: 0.7rem; top: 1.85rem; }
  .doc .posts__title { font-size: 0.875rem; }
  .briefing__body { grid-template-columns: 44px 1fr; gap: 0.9rem; padding: 1rem; min-height: 10rem; }
  .briefing .icon-tile { width: 44px; height: 44px; }
  .briefing .icon-tile__glyph { width: 24px; height: 24px; -webkit-mask-size: 24px 24px; mask-size: 24px 24px; }
  .doc .briefing .inlay__plaque { font-size: 1.25rem; }
  .page-who .screen { --tile: 104px; margin: 0 auto; padding-top: 56svh; justify-content: flex-start; gap: 1.5rem; }
  .dialog { margin-top: 0; }
  .portrait { left: 1rem; top: -36px; }
  .portrait__sprite { left: -36px; top: 3px; }
  .portrait__lids { left: 36px; top: 59px; }
  .doc .page-who .inlay__plaque, .page-who .inlay__plaque { font-size: 0.875rem; padding-inline: 0.85rem; margin-top: calc(-1 * var(--pad) - 0.5rem - 1.1rem); }
  .page-who .inlay__plaque { margin-left: calc(1rem + var(--tile) + 0.5rem - var(--pad)); margin-bottom: 3rem; }
  .chapter__title { font-size: 0.875rem; }
  .briefing__copy .chapter__title { line-height: 2rem; }
  /* The long opening copy needs the card's full width on a phone. */
  .briefing__body { grid-template-columns: 1fr; }
  .briefing .icon-tile { display: none; }
  .key-button { padding-inline: 1rem; gap: 0.7rem; line-height: 1.5; }
  .inlay .aside p { font-size: 1.5rem; }
  .dialog .inlay { min-height: 0; padding-top: 2.25rem; }
  .statusbar { align-items: flex-start; }
  .statusbar .doc__legal { font-size: 1.0625rem; }
  .doc-page:not(.scene-page) .doc h1 { margin-top: -4.2rem; }
}

@media (forced-colors: active) {
  .inlay, .doc-page:not(.scene-page) .doc { border: 2px solid CanvasText; }
  .inlay__plaque, .key-button, .statusbar { border: 2px solid CanvasText; }
}