/* ==========================================================================
   shellfall.com — page layout and composition only.
   Every colour, face, size step, radius and duration comes from the design system
   (docs/design-system: tokens.css + bundle.css, served from /assets/ds/).
   Components are the design system's sf- classes; this file arranges them.
   Layout concept: the site is the map table. Paper sheets on paper, hairline rules,
   no shadows; one lamp per screen; the painted world is the only colour.
   ========================================================================== */

:root {
  --page-max: 1200px;
  --prose-max: 68ch;
  --gutter: clamp(16px, 4vw, 48px);
  --bleed: max(var(--gutter), calc((100% - var(--page-max)) / 2));
  --masthead-h: 60px;
  --grid-line: color-mix(in srgb, var(--rule) 60%, transparent);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--masthead-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); }
.site { display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; }
main { flex: 1; outline: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a.sf-btn { text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: var(--space-2) var(--space-3); background: var(--surface-raised); border: 1px solid var(--rule-strong); }
.skip-link:focus { left: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-muted); }
.lede { margin: 0; max-width: 62ch; font-size: 19px; line-height: 28px; color: var(--ink-muted); }
.table-wrap { max-width: 100%; overflow-x: auto; }

/* ---------------------------------------------------------------- masthead */

.masthead { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--surface); border-bottom: 1px solid var(--rule-strong); }
.masthead__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); max-width: var(--page-max); margin: 0 auto; padding: 10px var(--gutter); }
.masthead__brand { font-family: var(--font-display); font-size: 30px; line-height: 38px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.masthead__nav { display: flex; gap: var(--space-1) var(--space-5); margin-left: auto; }
.masthead__link { padding: 6px 0 4px; font-size: 15px; font-weight: 700; color: var(--ink-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.masthead__link:hover { color: var(--ink); }
.masthead__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.theme-toggle[data-mode="night"] .theme-toggle__moon,
.theme-toggle:not([data-mode="night"]) .theme-toggle__sun { display: none; }

@media (max-width: 640px) {
  .masthead { position: static; }
  .masthead__brand { font-size: 26px; }
  .masthead__nav { order: 3; width: 100%; margin-left: 0; gap: var(--space-4); overflow-x: auto; }
  .theme-toggle { margin-left: auto; }
}

/* ---------------------------------------------------------------- hero: the fog-of-war map */

.hero { position: relative; padding-bottom: var(--space-7); }
.hero__map {
  position: relative; height: clamp(380px, 52vw, 640px); overflow: hidden;
  background-color: var(--surface);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  border-bottom: 1px solid var(--rule-strong);
  touch-action: pan-y;
}
.hero__art { width: 100%; height: 100%; object-fit: cover; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__map.is-live .hero__art { opacity: 0; }
.hero__map.is-interactive { cursor: crosshair; }
.hero__plane {
  position: absolute; left: 0; top: 0; z-index: 2; color: var(--pigment-ink); pointer-events: none; opacity: 0;
  filter: drop-shadow(0 0 2px var(--pigment-paper)) drop-shadow(0 0 1px var(--pigment-paper));
  transition: opacity var(--duration-ui);
}
.hero__plane.is-flying { opacity: 1; }
.hero__legend {
  position: absolute; right: var(--bleed); bottom: var(--space-4); z-index: 3;
  display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2);
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-paper);
}
.hero__hint {
  position: absolute; left: var(--bleed); top: var(--space-4); z-index: 3; margin: 0; max-width: calc(100% - 2 * var(--gutter));
  padding: var(--space-1) var(--space-3); font-size: 14px; line-height: 20px; color: var(--ink-muted);
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-paper);
}
.hero__slip {
  position: relative; z-index: 4; max-width: 500px; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-5);
  margin: -168px 0 0 var(--bleed);
}
.hero__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 7.4vw, 96px); line-height: 0.95; letter-spacing: -0.015em; }
.hero__lede { margin: 0; font-size: 18px; line-height: 28px; }
.hero__platforms { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.steam-soon { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-muted); }

@media (max-width: 760px) {
  .hero__map { height: clamp(340px, 96vw, 480px); }
  .hero__hint { right: var(--gutter); }
  .hero__legend { top: 56px; bottom: auto; left: var(--gutter); right: auto; padding: var(--space-1); }
  .hero__slip { margin: -44px var(--gutter) 0; max-width: none; padding: var(--space-5) var(--space-4) var(--space-4); }
}

/* ---------------------------------------------------------------- bands and sections */

.quote-band { padding: var(--space-7) var(--bleed); }
.fantasy { margin: 0; max-width: 820px; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fantasy blockquote { margin: 0; }
.fantasy p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.32; }
.fantasy figcaption { font-size: 14px; color: var(--ink-muted); }

.feature {
  display: flex; align-items: flex-start; gap: var(--space-7);
  max-width: var(--page-max); margin: 0 auto; padding: var(--space-8) var(--gutter);
  border-top: 1px solid var(--rule);
}
.feature--flip { flex-direction: row-reverse; }
.feature__text { flex: 1 1 420px; min-width: 0; max-width: 560px; display: flex; flex-direction: column; gap: var(--space-4); }
.feature__text p { margin: 0; }
.feature__title, .section-head__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.12; }
.feature__media { flex: 1.25 1 480px; min-width: 0; margin: 0; position: sticky; top: calc(var(--masthead-h) + var(--space-5)); }
.feature .sf-radio { max-width: 460px; }
.feature .sf-steps { max-width: 440px; }
.feature caption { text-align: left; padding-bottom: var(--space-2); }
.feature--letters .feature__media { display: flex; justify-content: center; padding-top: var(--space-5); }

@media (max-width: 900px) {
  .feature, .feature--flip { flex-direction: column; gap: var(--space-5); padding-block: var(--space-7); }
  .feature__text { max-width: none; flex-basis: auto; }
  .feature__media { position: static; flex-basis: auto; width: 100%; }
  .feature--letters .feature__media { justify-content: flex-start; }
}

/* A print mounted on card: the way concept art and mock-ups sit on the table. */
.plate { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-paper); }
.plate img { width: 100%; border: 1px solid var(--rule-strong); background: var(--surface-sunk); }
.plate figcaption { padding: 0 var(--space-1) var(--space-1); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.plate figcaption .sf-label, .gallery__caption .sf-label, .press-art .sf-label { margin-right: var(--space-2); color: var(--ink); }

/* The shot loop: seven steps in order, the quiet beat lit. */
.loop { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; counter-reset: loop; font-family: var(--font-mono); font-size: 14px; line-height: 20px; }
.loop li { counter-increment: loop; display: flex; gap: 6px; padding: var(--space-1) var(--space-2); margin: 0 -1px -1px 0; border: 1px solid var(--rule-strong); background: var(--surface); }
.loop li::before { content: counter(loop); color: var(--ink-muted); }
.loop .loop__quiet { background: var(--lamp); color: var(--on-lamp); border-color: var(--ink); position: relative; z-index: 1; }
.loop .loop__quiet::before { color: var(--on-lamp); }

.factions { --gap: var(--space-4); }
.facts { max-width: 420px; min-width: 0; }

.crew { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.crew li { display: flex; align-items: center; gap: var(--space-3); }
.crew b { margin-right: var(--space-2); }

.letter-wrap { position: relative; max-width: 440px; width: 100%; padding-top: var(--space-3); }
.letter-wrap .sf-letter { max-width: none; }
.letter-stamp { position: absolute; top: 0; right: -6px; background: var(--surface-raised); }

.section-head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 720px; }
.section-head p { margin: 0; }

.styles, .seasons, .gallery { display: flex; flex-direction: column; gap: var(--space-6); max-width: var(--page-max); margin: 0 auto; padding: var(--space-8) var(--gutter); border-top: 1px solid var(--rule); }
.styles__pair { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.styles__pair .plate { flex: 1 1 360px; min-width: 0; }
.styles__more { margin: 0; }

.seasons__grid { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-7); }
.seasons__grid .sf-season { flex: 1 1 420px; min-width: 0; max-width: none; }
@media (max-width: 480px) { .seasons__grid .sf-season__title { font-size: 36px; line-height: 40px; } }

.gallery__grid { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.gallery__grid li { flex: 1 1 300px; min-width: 0; }
.gallery__item { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-2); color: inherit; text-decoration: none; background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-paper); transition: border-color var(--duration-ui); }
.gallery__item:hover { border-color: var(--ink); }
.gallery__item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--rule-strong); }
.gallery__caption { padding: 0 var(--space-1) var(--space-1); font-size: 14px; line-height: 20px; color: var(--ink-muted); }

.dev { display: flex; flex-wrap: wrap; gap: var(--space-7); padding: var(--space-8) var(--bleed); background: var(--surface-raised); border-top: 3px double var(--rule-strong); border-bottom: 1px solid var(--rule); }
.dev__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.dev__text p { margin: 0; }
.dev__track { flex: 1 1 440px; min-width: 0; }

.window { padding: var(--space-8) var(--bleed); }
.window__inner { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; }
.window__inner p { margin: 0; }

.now-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.now-line__date { font-size: 14px; color: var(--ink-muted); }
.latest-dispatch { max-width: 520px; }
.latest-dispatch p { margin: 0; }
.latest-dispatch .sf-card__title a { text-decoration: none; }
.latest-dispatch .sf-card__title a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- roadmap */

.roadmap { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.roadmap__phase { position: relative; display: flex; gap: var(--space-4); padding-bottom: var(--space-5); }
.roadmap__phase:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; border-left: 1.5px solid var(--rule-strong); }
.roadmap__marker { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 2px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--rule-strong); border-radius: var(--radius-pill); }
.roadmap__phase.is-done .roadmap__marker { background: var(--surface-sunk); border-color: var(--ink); }
.roadmap__phase.is-now .roadmap__marker { background: var(--lamp); border-color: var(--ink); box-shadow: var(--shadow-lamp); }
.roadmap__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.roadmap__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 28px; }
.roadmap__line, .roadmap__gate { margin: 0; }
.roadmap__gate { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.roadmap__gate .sf-label { margin-right: var(--space-2); }

.milestones td { vertical-align: top; }
.milestones td.title { font-family: var(--font-body); font-weight: 700; white-space: normal; }
.milestones td.gate { min-width: 240px; font-family: var(--font-body); font-size: 15px; white-space: normal; }

/* ---------------------------------------------------------------- page heads */

.page-head { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--page-max); margin: 0 auto; padding: var(--space-7) var(--gutter) var(--space-5); }
.page-head__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- handbook index */

.hb-search { position: relative; display: flex; flex-direction: column; gap: var(--space-2); max-width: 560px; margin-top: var(--space-3); }
.hb-search .sf-search { width: 100%; min-width: 0; }
.hb-search .sf-search input { width: 100%; }
.hb-search__results { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; background: var(--surface-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-paper); }
.hb-search__results:empty { display: none; }
.hb-search__results li + li { border-top: 1px solid var(--rule); }
.hb-search__results a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); text-decoration: none; }
.hb-search__results a:hover, .hb-search__results a:focus-visible { background: var(--surface-sunk); }
.hb-search__results b { font-size: 16px; }
.hb-search__results span { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.hb-search__results .is-empty { padding: var(--space-2) var(--space-3); color: var(--ink-muted); }

.status-help { max-width: var(--page-max); margin: 0 auto var(--space-6); padding: 0 var(--gutter); border-bottom: 0; }
.status-help > summary { width: fit-content; }
.status-legend { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-3) 0 0; }
.status-legend__row { display: flex; align-items: center; gap: var(--space-4); }
.status-legend dt { flex: 0 0 132px; }
.status-legend dd { margin: 0; color: var(--ink); }
.status-help .sf-disclosure__body p { margin: 0; }

.hb-sections { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter) var(--space-8); columns: 3 320px; column-gap: var(--space-7); }
.hb-section { break-inside: avoid; display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-7); padding-top: var(--space-3); border-top: 2px solid var(--ink); }
.hb-section__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 32px; }
.hb-section__summary { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.hb-list { display: flex; flex-direction: column; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.hb-list__item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0; border-top: 1px solid var(--rule); }
.hb-list__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.hb-list__link { font-weight: 700; text-decoration: none; }
.hb-list__link:hover { text-decoration: underline; }
.hb-list__summary { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Small status mark: the stamp's letterforms, without the stamp. */
.hb-status { flex: none; font-family: var(--font-display-sc); font-size: 12px; line-height: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.hb-status--planned { color: var(--lamp-ink); }
.hb-status--prototyped { color: var(--hearthguard); }
.hb-status--built { color: var(--live); }

/* ---------------------------------------------------------------- handbook page */

.hb { display: flex; align-items: flex-start; gap: var(--space-7); max-width: var(--page-max); margin: 0 auto; padding: var(--space-6) var(--gutter) var(--space-8); }
.hb-article { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.hb-nav { order: -1; flex: 0 0 210px; position: sticky; top: calc(var(--masthead-h) + var(--space-5)); max-height: calc(100vh - var(--masthead-h) - var(--space-7)); overflow: auto; display: flex; flex-direction: column; gap: var(--space-4); font-size: 15px; line-height: 20px; }
.hb-nav__title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 26px; }
.hb-nav__title a { text-decoration: none; }
.hb-nav__group { display: flex; flex-direction: column; gap: var(--space-1); }
.hb-nav ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.hb-nav li a { display: block; padding: 3px 0 3px var(--space-3); color: var(--ink-muted); text-decoration: none; border-left: 2px solid transparent; }
.hb-nav li a:hover { color: var(--ink); }
.hb-nav li a[aria-current="page"] { color: var(--ink); font-weight: 700; border-left-color: var(--ink); }
.hb-toc { order: 2; flex: 0 0 190px; position: sticky; top: calc(var(--masthead-h) + var(--space-5)); display: flex; flex-direction: column; gap: var(--space-2); font-size: 14px; line-height: 20px; }
.hb-toc ol { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.hb-toc a { color: var(--ink-muted); text-decoration: none; }
.hb-toc a:hover { color: var(--ink); text-decoration: underline; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.hb-head, .dispatch__head { display: flex; flex-direction: column; gap: var(--space-3); }
.hb-title, .dispatch__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.01em; }
.hb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-top: var(--space-1); }
.hb-meta__date { font-size: 14px; color: var(--ink-muted); }
.hb-foot { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-5); border-top: 3px double var(--rule-strong); max-width: var(--prose-max); }
.hb-foot .sf-notice { max-width: none; }

@media (max-width: 1240px) { .hb-toc { display: none; } }
@media (max-width: 900px) {
  .hb { flex-direction: column; gap: var(--space-6); padding-top: var(--space-5); }
  .hb-nav { order: 2; position: static; max-height: none; width: 100%; flex-basis: auto; flex-direction: row; flex-wrap: wrap; gap: var(--space-5) var(--space-6); padding-top: var(--space-5); border-top: 3px double var(--rule-strong); }
  .hb-nav__title { flex-basis: 100%; }
  .hb-nav__group { flex: 1 1 220px; }
}

/* ---------------------------------------------------------------- prose (handbook and dispatches) */

.prose { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--prose-max); font-size: 17px; line-height: 28px; }
.prose > * { margin: 0; }
.prose > h2 { margin-top: var(--space-5); font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 36px; }
.prose > h3 { margin-top: var(--space-3); font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 28px; }
.prose ul, .prose ol:not(.sf-steps) { display: flex; flex-direction: column; gap: var(--space-2); padding-left: 1.4em; }
.prose li > ul, .prose li > ol { margin-top: var(--space-2); }
.prose li::marker { color: var(--ink-muted); }
.prose strong { font-weight: 700; }
.prose code { font-family: var(--font-mono); font-size: 0.88em; padding: 1px 4px; background: var(--surface-sunk); border-radius: var(--radius-paper); }
.prose pre.code { overflow-x: auto; padding: var(--space-3) var(--space-4); font-size: 14px; line-height: 20px; background: var(--surface-sunk); border: 1px solid var(--rule); border-radius: var(--radius-paper); }
.prose pre.code code { padding: 0; background: none; }
.prose blockquote { margin: 0; padding-left: var(--space-4); border-left: 3px double var(--rule-strong); font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 28px; }
.prose blockquote p { margin: 0; }
.prose hr { margin: var(--space-3) 0; }
.prose .figure { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-paper); }
.prose .figure img { width: 100%; border: 1px solid var(--rule-strong); }
.prose figcaption { padding: 0 var(--space-1) var(--space-1); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.prose .sf-notice { max-width: none; }
.prose .notice-body { display: flex; flex-direction: column; gap: var(--space-2); }
.prose .notice-body p { margin: 0; }
.prose .sf-radio { max-width: 520px; }
.prose .sf-steps { max-width: 560px; margin: var(--space-2) 0; }
.prose .letter-wrap { margin: var(--space-2) 0; }
.prose .table-wrap { margin: var(--space-1) 0; }
.prose .sf-kbd { vertical-align: 1px; }

.wiki-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.wiki-table th { padding: var(--space-1) var(--space-3) var(--space-1) 0; text-align: left; vertical-align: bottom; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--rule-strong); }
.wiki-table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; vertical-align: top; border-bottom: 1px solid var(--rule); }
.wiki-table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }

.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); }
.pager__link { display: flex; flex-direction: column; gap: 2px; max-width: 48%; text-decoration: none; }
.pager__link--next { margin-left: auto; text-align: right; }
.pager__link span:last-child { font-family: var(--font-display); font-size: 20px; line-height: 26px; }
.pager__link:hover span:last-child { text-decoration: underline; }

/* ---------------------------------------------------------------- dispatches */

.dispatch-list { display: flex; flex-direction: column; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter) var(--space-8); list-style: none; }
.dispatch-item { display: flex; flex-direction: column; gap: var(--space-2); max-width: 760px; padding: var(--space-5) 0; border-top: 1px solid var(--rule); }
.dispatch-item__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 36px; }
.dispatch-item__title a { text-decoration: none; }
.dispatch-item__title a:hover { text-decoration: underline; }
.dispatch-item__summary { margin: 0; color: var(--ink-muted); }

.dispatch { display: flex; flex-direction: column; gap: var(--space-5); max-width: calc(var(--prose-max) + 2 * var(--gutter)); margin: 0 auto; padding: var(--space-6) var(--gutter) var(--space-8); }
.dispatch__foot { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.dispatch__foot p { margin: 0; }

/* ---------------------------------------------------------------- press kit */

.press { display: flex; flex-wrap: wrap; gap: var(--space-7); max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter) var(--space-8); }
.press__block { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-3); border-top: 2px solid var(--ink); }
.press__block--wide { flex-basis: 100%; }
.press__block > p { margin: 0; }
.press__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 34px; }
.press-facts { min-width: 0; }
.press-facts .sf-kv__val { white-space: normal; text-align: right; }

.copy-block { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.copy-block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.copy-block__text { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.copy-block__text p { margin: 0; }
[data-copy][data-copied] { border-color: var(--live); color: var(--live); }

.features-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.features-list li { position: relative; padding-left: var(--space-5); }
.features-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border: 1.5px solid var(--ink-muted); transform: rotate(45deg); }

.press-art { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.press-art li { flex: 1 1 240px; min-width: 0; }
.press-art a { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); text-decoration: none; background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-paper); }
.press-art a:hover { border-color: var(--ink); }
.press-art img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--rule-strong); }

.wordmark { margin: 0; padding: var(--space-4) var(--space-5); font-family: var(--font-display); font-size: clamp(56px, 8vw, 80px); line-height: 1; color: var(--pigment-ink); background: var(--pigment-paper); border: 1px solid var(--rule-strong); border-radius: var(--radius-paper); }
.swatches { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.swatches li { display: flex; align-items: center; gap: var(--space-3); }
.swatches b { margin-right: var(--space-1); }
.swatch { flex: none; width: 28px; height: 28px; border: 1px solid var(--ink); border-radius: var(--radius-paper); }
.swatch--hearthguard { background: var(--pigment-hearthguard); }
.swatch--rustcoats { background: var(--pigment-rustcoats); }
.swatch--mustard { background: var(--pigment-mustard); }
.swatch--lamp { background: var(--pigment-lamp); }
.swatch--paper { background: var(--pigment-paper); }
.swatch--ink { background: var(--pigment-ink); }

/* ---------------------------------------------------------------- play and 404 */

.viewport { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter) var(--space-7); }
.viewport__frame {
  position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; max-height: 70vh; width: 100%;
  background-color: var(--surface);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  border: 1px solid var(--rule-strong);
}
.viewport__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.viewport__waiting { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: 420px; margin: var(--space-4); padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-paper); }
.viewport__waiting p { margin: 0; }
.play-notes { display: flex; flex-wrap: wrap; gap: var(--space-7); max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter) var(--space-8); }
.play-notes__col { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-3); border-top: 2px solid var(--ink); }

.lost {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-8) var(--bleed);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ---------------------------------------------------------------- colophon */

.colophon { margin-top: auto; background: var(--surface-raised); border-top: 3px double var(--rule-strong); }
.colophon__inner { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8); max-width: var(--page-max); margin: 0 auto; padding: var(--space-7) var(--gutter) var(--space-5); }
.colophon__about { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.colophon__about p { margin: 0; max-width: 46ch; color: var(--ink-muted); }
.colophon__about .colophon__name { font-family: var(--font-display); font-size: 30px; line-height: 36px; color: var(--ink); }
.colophon__col { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.colophon__col ul { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.colophon__fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); max-width: var(--page-max); margin: 0 auto; padding: var(--space-4) var(--gutter) var(--space-6); font-size: 14px; line-height: 20px; color: var(--ink-muted); border-top: 1px solid var(--rule); }
.colophon__fine p { margin: 0; max-width: 72ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__plane, .gallery__item { transition: none; }
}