/* Starquest. The page borrows the game's own parts: the HUD's bevelled metal,
   its annunciator lamps, the broadcast blues and the pixel title. */

@font-face { font-family: "Departure Mono"; src: url(/fonts/DepartureMono-Regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/fonts/Barlow-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/fonts/Barlow-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/fonts/Barlow-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Jersey 15"; src: url(/fonts/Jersey15-Regular.woff2) format("woff2"); font-display: swap; }

:root {
  /* Broadcast blues, dark to light (the game's intro ramp) */
  --space: #03060e;
  --navy: #0b1630;
  --navy-2: #1a2f5c;
  --blue: #34548f;
  --blue-2: #6f93c8;
  --pale: #c8dcf5;
  --ice: #9fe1ff;
  --text: #e8f4ff;
  --dim: #9fb2cc;
  /* Metal, sampled from the ChatGPT interface art (public/img/ui/): outline, the rim and its
     light and dark bevels, the flat face, and its shade. */
  --m-out: #020407;
  --m-rim: #44546a;
  --m-hi: #5c6e86;
  --m-lo: #2c3a4b;
  --m-body: #1a2838;
  --m-shade: #101820;
  --m-recess: #070c12;
  /* Lamps */
  --amber: #ffb32e;
  --amber-hi: #ffd27a;
  --amber-lo: #c77d12;
  --amber-ink: #2a1803;
  /* Factions */
  --federation: #5a8ff5;
  --carbon: #f2a23a;
  --meridian: #3fd8c8;
  --conclave: #e6c25a;

  --display: "Departure Mono", ui-monospace, monospace;
  --body: "Barlow", system-ui, sans-serif;
  /* The column: the hero rig's outer edges (see Hero). The masthead bar and every panel
     share it. */
  --col: 962px;
  --gutter: 24px;
  --measure: 66ch;
  /* The masthead's height: 10 px above the bar, and the bar. */
  --head: 60.5px;
}

* { box-sizing: border-box; }
html { background: var(--space); scroll-padding-top: calc(var(--head) + 24px); }
body {
  margin: 0;
  background: var(--space) url(/img/stars.png) repeat;
  background-size: 480px 480px;
  image-rendering: pixelated;
  color: var(--text);
  font: 400 1.1875rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { image-rendering: auto; }
.px { image-rendering: pixelated; }
a { color: var(--ice); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; letter-spacing: 0; margin: 0 0 0.6em; }
h1 { font-size: 44px; }
h2 { font-size: 44px; }
h3 { font-size: 22px; }
p { margin: 0 0 1em; }
.lede { font-size: 1.3125rem; line-height: 1.55; color: var(--pale); max-width: var(--measure); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 14px; background: var(--ice); color: var(--space); font-family: var(--display); }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.js [data-hidden] { display: none !important; }

/* Housing: a plate in the interface art's metal: a dark outline, a bevelled rim, a dark
   inner line and a flat face, with chamfered corners. */
.housing {
  --cut: 8px;
  position: relative;
  isolation: isolate;
  background: var(--m-out);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  padding: 16px;
}
.housing::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: var(--m-body);
  clip-path: polygon(calc(var(--cut) - 1px) 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px), 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, calc(var(--cut) - 1px) 100%, 0 calc(100% - var(--cut) + 1px), 0 calc(var(--cut) - 1px));
  box-shadow: inset 2px 2px 0 var(--m-hi), inset -2px -2px 0 var(--m-lo), inset 0 0 0 6px var(--m-rim), inset 0 0 0 8px var(--m-out);
}
.recess { background: var(--m-recess); box-shadow: inset 2px 2px 0 #020407, inset -2px -2px 0 var(--m-hi); }

/* Lamps: a lit annunciator is the one loud control on any screen. */
.lamp {
  --cut: 4px;
  display: inline-block;
  padding: 12px 18px 10px;
  font: 22px/1 var(--display);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--amber-ink);
  background: var(--amber);
  box-shadow: inset 0 0 0 2px var(--m-out), inset 0 4px 0 0 var(--amber-hi), inset 0 -4px 0 0 var(--amber-lo);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.lamp:hover { color: var(--amber-ink); background: #ffc24f; }
/* A disabled lamp: amber means a control you can use, so it has none. The face is
   sunk into the metal and stippled with a 2 px checker, and the letters are dim. */
.lamp-soon, .lamp-soon:hover {
  border: 0;
  cursor: not-allowed;
  color: #7d8fa8;
  background: conic-gradient(var(--m-body) 25%, var(--m-shade) 0 50%, var(--m-body) 0 75%, var(--m-shade) 0) 0 0 / 4px 4px;
  box-shadow: inset 0 0 0 2px var(--m-out), inset 4px 4px 0 0 var(--m-recess);
}
.lamp:active { box-shadow: inset 0 0 0 2px var(--m-out), inset 0 4px 0 0 var(--amber-lo), inset 0 -2px 0 0 var(--amber-hi); }
.lamp-big { padding: 18px 26px 16px; }

.button {
  --cut: 4px;
  display: inline-block;
  padding: 12px 18px 10px;
  font: 22px/1 var(--display);
  color: var(--pale);
  text-decoration: none;
  background: var(--m-body);
  box-shadow: inset 0 0 0 2px var(--m-out), inset 2px 4px 0 0 var(--m-hi), inset -2px -4px 0 0 var(--m-shade);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.lamp-big + .button { padding: 18px 24px 16px; }
.button:hover { color: var(--text); background: #223040; }

/* Masthead */
.masthead { position: fixed; inset: 0 0 auto; z-index: 20; padding: 10px 12px 0; pointer-events: none; }
.masthead .bar { pointer-events: auto; max-width: var(--col); margin: 0 auto; display: flex; align-items: center; gap: 28px; padding: 12px 22px; }
.masthead-logo { display: block; line-height: 0; position: relative; top: 2px; }
.masthead-logo img { width: 202px; height: 26px; }
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a { font: 16.5px/1 var(--display); color: var(--pale); text-decoration: none; padding: 6px 0 4px; }
.nav a:hover, .nav a[aria-current] { color: var(--ice); }
.nav a[aria-current] { box-shadow: 0 2px 0 var(--ice); }
.nav-toggle { display: none; }
.masthead-lamp { font-size: 16.5px; padding: 6px 12px 4px; }

main { display: block; }

/* Hero: the rig (public/img/ui/rig.webp, ChatGPT's art cut to its 1203x896 art pixels) is
   the interface, and its outer edges are the column: the masthead bar and every panel
   below use the same two lines. --u is screen pixels per art pixel, and every part of the
   rig sits at its measured place in the art: the black opening at 70,80 (1063x474), the
   panel's flat face at 57,690 (1089x146), the top plate's face at 419,7 (364x55).
   --col steps so the intro video stays crisp: 777 px in a 962 px rig (three device pixels
   a picture pixel on 2x screens), 1036 in 1283 on big tall screens, 518 in 642 on tablets.
   The gaps above and below the headline share the free height, from 96 to 144 px.
   The background (public/img/bg/home.webp, a separate ChatGPT picture) covers the hero
   from the top and dithers out into the page at its foot. Its side bands hold only stars,
   nebula and dust: rocks over 8 art pixels sit between x 440 and 1232 of 1672, so the
   hero is never narrower than 0.86 of its height (min-height at most 116vw), where the
   crop is x 431 to 1241. Below the desktop column the hero stacks its parts and grows too
   tall for the wide picture, so it takes portrait ones (1024x1536): home-tablet.webp, whose
   planet top (about y 300) shows above the rig on upright tablets and stays below the
   headline from 511 px, and home-phone.webp (planet top y 410) at 510 px and under, where
   the headline is bigger against the picture or wraps. Their objects sit inside x 110 to
   914 and x 240 to 784, the narrowest crops at those widths. The picture is on ::before,
   which site.js moves down at half the scroll (--drift), so the rig passes over a scene
   farther away while the fade stays at the hero's foot. */
.hero {
  --u: calc(var(--col) / 1203);
  --fp: 5px;
  --video: 777px;
  --gap: clamp(96px, (100svh - var(--head) - 13 * var(--fp) - 896 * var(--u) - 48px) / 2, 144px);
  position: relative;
  min-height: min(100svh, 116vw);
  padding: calc(var(--head) + var(--gap)) 0 48px;
  overflow: clip;
}
.hero-bg {
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 224px + 2px) no-repeat, url(/img/fade.svg) bottom / 16px 224px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 224px + 2px) no-repeat, url(/img/fade.svg) bottom / 16px 224px repeat-x;
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/img/bg/home.webp) center top / cover no-repeat;
  transform: translate3d(0, var(--drift, 0px), 0);
  will-change: transform;
}
@media (max-width: 1009px) { .hero-bg::before { background-image: url(/img/bg/home-tablet.webp); } }
@media (max-width: 510px) { .hero-bg::before { background-image: url(/img/bg/home-phone.webp); } }
/* Wide screens (16:9 and wider, from 1922 px, where the hero is never taller than the
   picture at the screen's width) scale the picture by its width, which would sink the
   planet behind the rig. As at tablet widths, the picture is set so the planet's top
   (y 225 of 941, 13.457vw) falls 24 px under the headline, never moving down. */
@media (min-width: 1922px) and (min-aspect-ratio: 16/9) {
  .hero-bg::before {
    background-color: #0d0404;
    background-size: 100% auto;
    background-position: center min(0px, var(--head) + var(--gap) + 13 * var(--fp) + 24px - 13.457vw);
  }
}
/* At tablet widths the rig sits a known way down (masthead, gaps, headline), so the tablet
   picture scales with the width and is set so its planet's top (y 317 of 1536, 30.957vw)
   falls 24 px under the headline: the cap shows above the rig in every window shape. The
   picture never moves down, so its top never leaves a gap; any strip it leaves at the
   foot, inside the fade, takes its bottom colour. Narrower windows on their side (phones)
   are short enough for the same rule; narrower upright ones keep the cover. */
@media (min-width: 674px) and (max-width: 1009px), (min-width: 560px) and (min-aspect-ratio: 1/1) and (max-width: 673px) {
  .hero-bg::before {
    background-color: #030305;
    background-size: 100% auto;
    background-position: center min(0px, var(--head) + var(--gap) + 13 * var(--fp) + 24px - 30.957vw);
  }
}
.hero-title { position: relative; margin: 0 24px var(--gap); }
/* Pixel headlines wear the pixel title's colours: near-white, three blue rows at the foot
   of the letters, and the dark shadow one pixel down and right. Jersey 15 is drawn on a
   15 pixel em, so --fp, screen pixels a font pixel, keeps it whole. A 13 row line lifts
   the letters one row: caps on rows 3 to 10, blues on rows 8, 9 and 10 and below. */
.pixel-title {
  --fp: 4px;
  text-align: center;
  font: 400 calc(var(--fp) * 15)/calc(var(--fp) * 13) "Jersey 15", var(--display);
  color: transparent;
  background: linear-gradient(#f4fcff 0 calc(var(--fp) * 8), #c9f2fc 0 calc(var(--fp) * 9), #9de4f7 0 calc(var(--fp) * 10), #5ecff0 0) 0 0 / 100% calc(var(--fp) * 13) repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(var(--fp) var(--fp) 0 #143a4e);
}
.hero .pixel-title { --fp: inherit; }
.pixel-title span { display: inline-block; }
.rig { position: relative; width: var(--col); height: calc(896 * var(--u)); margin: 0 auto; }
.rig-art { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The top plate names what is on the screen, beside a lit amber pin. */
.rig-plate {
  position: absolute;
  left: calc(419 * var(--u));
  top: calc(7 * var(--u));
  width: calc(364 * var(--u));
  height: calc(55 * var(--u));
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 2px;
  font: 16.5px/1 var(--display);
  color: var(--pale);
}
.rig-plate::before { content: ""; width: 8px; height: 8px; background: var(--amber); box-shadow: 0 0 0 2px #5a3a08; }
.rig-screen {
  position: absolute;
  left: calc(70 * var(--u));
  top: calc(80 * var(--u));
  width: calc(1063 * var(--u));
  height: calc(474 * var(--u));
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.intro-screen { line-height: 0; }
.intro-screen:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.intro video { display: block; width: var(--video); height: auto; aspect-ratio: 1036 / 412; background: var(--space); cursor: pointer; }
.intro video.px { image-rendering: pixelated; }
.intro video.on-band { cursor: ew-resize; }
.intro-controls { display: flex; gap: 8px; width: var(--video); }
.intro-controls button { font-size: 16.5px; padding: 7px 12px 5px; border: 0; cursor: pointer; }
.intro-play { min-width: 7em; }
.intro-play.lamp::before { content: ""; display: inline-block; width: 8px; height: 10px; margin-right: 10px; background: currentColor; clip-path: polygon(0 0, 25% 0, 25% 10%, 50% 10%, 50% 20%, 75% 20%, 75% 40%, 100% 40%, 100% 60%, 75% 60%, 75% 80%, 50% 80%, 50% 90%, 25% 90%, 25% 100%, 0 100%); }
.intro-sound { margin-left: auto; }
.intro-sound[aria-pressed="false"] { color: var(--dim); }
.rig-panel {
  position: absolute;
  left: calc(57 * var(--u));
  top: calc(690 * var(--u));
  width: calc(1089 * var(--u));
  height: calc(146 * var(--u));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 0 26px;
}
.pitch { font-size: 1.0625rem; line-height: 1.5; color: var(--pale); margin: 0; }
.hero-actions { display: grid; justify-items: center; gap: 10px; }
.hero-actions .lamp-big { font-size: 16.5px; padding: 11px 14px 9px; }
.status { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 0.875rem; color: var(--pale); }
.status li { display: inline-flex; align-items: center; gap: 10px; }
.status li::before { content: ""; width: 8px; height: 8px; background: var(--ice); }

/* Wall screen (public/img/ui/screen.webp, ChatGPT's art cut to 1431x728 art pixels): the
   black opening at 84,85 (1262x521) holds a dithered picture at two CSS pixels an art
   pixel; the name plate's face is at 428,635 (571x68). */
.screen { position: relative; display: block; aspect-ratio: 1431 / 728; }
.screen-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen-view {
  position: absolute;
  left: calc(84 / 1431 * 100%);
  top: calc(85 / 728 * 100%);
  width: calc(1262 / 1431 * 100%);
  height: calc(521 / 728 * 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.screen-view picture, .terminal-view picture { display: contents; }
.screen-view img { display: block; zoom: 2; image-rendering: pixelated; }
.screen-view canvas, .terminal-view canvas { display: block; image-rendering: pixelated; }
.screen-view.drawn img, .terminal-view.drawn img { display: none; }
.screen-plate {
  position: absolute;
  left: calc(428 / 1431 * 100%);
  top: calc(635 / 728 * 100%);
  width: calc(571 / 1431 * 100%);
  height: calc(68 / 728 * 100%);
  display: grid;
  place-items: center;
  padding-top: 2px;
  font: 16.5px/1 var(--display);
  color: var(--pale);
  white-space: nowrap;
}

/* Signposts: two wall screens under the hero, their outer edges on the column's lines. */
.signposts { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; width: var(--col); margin: 0 auto; padding: 24px 0 112px; }
.signpost { display: grid; gap: 16px; text-decoration: none; }
.signpost-note { text-align: center; font: 16.5px/1.3 var(--display); color: var(--dim); }
.signpost:hover .screen-plate, .signpost:focus-visible .screen-plate { color: var(--ice); }
.signpost:hover .signpost-note, .signpost:focus-visible .signpost-note { color: var(--pale); }
.signpost:focus-visible { outline: none; }
.signpost:focus-visible .screen { outline: 2px solid var(--ice); outline-offset: 4px; }

/* Pages: each major page has its own ChatGPT background (public/img/bg/) behind the
   column, and a portrait version (1024x1536) for screens narrower than 9/10. The picture
   is as small as it can be while its subject (from y 90 of the wide pictures' 941, y 150
   of the portrait ones' 1536) clears the masthead by 12 px, and never narrower than the
   screen. It is never so wide that the sides cut the subject (the wide pictures' sit
   inside x 413 to 1259 of 1672, the portrait ones' inside x 240 to 784), nor so tall that
   the headline falls below 60% of a short screen. Where the screen is taller than the
   picture, its foot dithers out into the star field (the hero's fade). site.js makes the
   layer long enough and drifts it up at a tenth of the scroll (--drift), so the interface
   passes over a scene far away. */
:root { --bg-w: max(100vw, min((var(--head) + 12px) * 1672 / 90, 197.6vw, 266.7svh)); }
@media (max-aspect-ratio: 9/10) { :root { --bg-w: max(100vw, min((var(--head) + 12px) * 1024 / 150, 188.2vw, 125svh)); } }
.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100lvh;
  overflow: hidden;
  background: var(--space) url(/img/stars.png) 0 0 / 480px 480px;
  transform: translate3d(0, var(--drift, 0px), 0);
  will-change: transform;
}
.page-bg::before {
  content: "";
  display: block;
  width: var(--bg-w);
  margin-left: calc((100% - var(--bg-w)) / 2);
  aspect-ratio: 1672 / 941;
  background: center top / 100% auto no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 224px + 2px) no-repeat, url(/img/fade.svg) bottom / 16px 224px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 224px + 2px) no-repeat, url(/img/fade.svg) bottom / 16px 224px repeat-x;
}
.page-bg[data-bg="story"]::before { background-image: url(/img/bg/story.webp); }
.page-bg[data-bg="factions"]::before { background-image: url(/img/bg/factions.webp); }
.page-bg[data-bg="devlog"]::before { background-image: url(/img/bg/devlog.webp); }
.page-bg[data-bg="early-access"]::before { background-image: url(/img/bg/early-access.webp); }
.page-bg ~ main, .page-bg ~ .foot { position: relative; z-index: 1; }
@media (max-aspect-ratio: 9/10) {
  .page-bg::before { aspect-ratio: 1024 / 1536; }
  .page-bg[data-bg="story"]::before { background-image: url(/img/bg/story-phone.webp); }
  .page-bg[data-bg="factions"]::before { background-image: url(/img/bg/factions-phone.webp); }
  .page-bg[data-bg="devlog"]::before { background-image: url(/img/bg/devlog-phone.webp); }
  .page-bg[data-bg="early-access"]::before { background-image: url(/img/bg/early-access-phone.webp); }
}
/* Each page opens on its scene: the background's subject sits in the top third (above
   y 350 of the wide pictures' 941 in the headline's middle band), so the headline starts
   just below it, at 40% of the picture's height. The portrait pictures' subjects end by
   y 448 of 1536, so there it starts at 32% of the picture's height. */
.page-head { width: var(--col); margin: 0 auto; padding: max(var(--head) + 96px, var(--bg-w) * 0.225) 0 var(--gap-page); }
@media (max-aspect-ratio: 9/10) { .page-head { padding-top: max(var(--head) + 64px, var(--bg-w) * 0.48); } }
.page-head h1 { margin: 0; }
.page-head .lede { max-width: none; margin: 40px 0 0; padding: 30px 48px 28px; text-align: center; text-wrap: balance; }
.page-body { width: var(--col); margin: 0 auto; padding-bottom: 112px; }
.page-head .kicker { margin: 0 0 24px; text-align: center; }
.page-head .byline { justify-content: center; margin: 32px 0 0; }
/* Long text reads in a column of about 68 characters in the middle of its plate. */
.prose.housing { padding: 56px max(56px, (100% - 68ch) / 2) 36px; }
.post-list.housing { padding: 12px 40px; border-top: 0; }
.post-list.housing .post-row { border-bottom-color: var(--m-lo); }
.post-list.housing li:last-child .post-row { border-bottom: 0; }
.lost.housing { min-height: 0; padding: 48px 56px 36px; text-align: center; }
.lost .lede { margin: 0 auto 1.4em; }
.page-next { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; width: var(--col); margin: 0 auto; padding: 128px 0 72px; font: 22px/1.3 var(--display); }
:root { --gap-page: clamp(72px, 10svh, 128px); }

/* Story: one chapter a wall screen, its title on the screen's plate and its words on a
   plate below, both on the column's lines. */
.chapters { display: grid; gap: 120px; width: var(--col); margin: 0 auto; }
.chapter { display: grid; gap: 16px; }
.chapter .screen-plate h2 { margin: 0; font: 22px/1 var(--display); color: var(--pale); }
.chapter-text { columns: 2; column-gap: 48px; padding: 36px 44px 30px; }
.chapter-text p { color: var(--pale); }

/* Factions: one dossier a faction, its terminal beside its plate, alternating sides. */
.dossiers { display: grid; gap: 96px; width: var(--col); margin: 0 auto; }
.dossier { --t: 330px; display: grid; grid-template-columns: var(--t) minmax(0, 1fr); gap: 24px; }
.dossier:nth-child(even) { grid-template-columns: minmax(0, 1fr) var(--t); }
.dossier:nth-child(even) .terminal { order: 2; }
.terminal { position: relative; align-self: center; }
.terminal-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.terminal-view { position: absolute; display: grid; place-items: center; overflow: hidden; }
.terminal-view img { display: block; zoom: 2; image-rendering: pixelated; }
.terminal-plate { position: absolute; margin: 0; display: grid; place-items: center; padding-top: 2px; font: 22px/1 var(--display); color: var(--c); }
.dossier-text { display: grid; align-content: center; gap: 28px; padding: 40px 44px; }
.dossier-text p { margin: 0; color: var(--pale); }
.dossier .facts { grid-template-columns: repeat(3, auto); justify-content: start; gap: 16px 40px; min-width: 0; }
.dossier .facts dt { font-size: 16.5px; color: var(--c); }
.dossier .facts dd { font-size: 1.0625rem; }

/* Scenes: a fixed stage behind the home page. site.js dithers each section's scene in
   over the one before as the section comes up the screen, through the same 8x8 Bayer
   matrix as the hero's fade, in 2 px cells. The veil keeps text readable on the art. */
.stage { position: fixed; inset: 0; z-index: 0; background: var(--space); }
.scene { position: absolute; inset: 0; background: center / cover no-repeat; -webkit-mask-size: 16px 16px; mask-size: 16px 16px; }
.stage::after { content: ""; position: absolute; inset: 0; background: rgb(3 6 14 / 0.5); }
.scene[data-name="mining"] { background-image: url(/img/scenes/mining.webp); }
.scene[data-name="crossing"] { background-image: url(/img/scenes/crossing.webp); }
.scene[data-name="capital"] { background-image: url(/img/scenes/capital.webp); }
.scene[data-name="far"] { background-image: url(/img/scenes/far.webp); }

/* Sections */
.section { position: relative; padding: 104px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-head h2 { margin: 0; }
.section-head a { font: 22px/1 var(--display); }
.more { margin: 28px 0 0; font: 22px/1.4 var(--display); }

/* Game: five slots of the action bar, and the readout window. */
.game-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.slots { display: flex; gap: 10px; padding: 14px; }
.slot {
  position: relative;
  flex: 1;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--m-recess);
}
/* The slot's frame sits over the icon, so the art fills the slot at a whole scale. */
.slot::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px var(--m-out), inset 4px 4px 0 0 #020407, inset -2px -2px 0 2px var(--m-hi); }
.slot img { display: block; width: calc(32px * 3); height: calc(32px * 3); max-width: none; opacity: 0.72; transition: opacity 120ms; }
.slot-n { position: absolute; left: 8px; top: 6px; z-index: 2; font: 22px/1 var(--display); color: var(--text); text-shadow: 2px 2px 0 var(--m-out); }
.slot:hover img { opacity: 1; }
.slot[aria-selected="true"]::after { box-shadow: inset 0 0 0 2px var(--m-out), inset 0 0 0 4px var(--amber), inset 0 0 0 6px var(--m-out); }
.slot[aria-selected="true"] img { opacity: 1; }
.readout { margin-top: 12px; padding: 26px 28px 22px; min-height: 196px; }
.feature { display: grid; grid-template-columns: calc(32px * 3) minmax(0, 1fr); gap: 4px 22px; align-items: start; }
.feature-icon { grid-row: 1 / 3; width: calc(32px * 3); height: calc(32px * 3); box-shadow: 0 0 0 2px var(--m-out), 0 0 0 4px var(--m-hi); }
.feature h3 { margin: 4px 0 8px; color: var(--amber); }
.feature p { margin: 0; color: var(--pale); }
html:not(.js) .feature + .feature { margin-top: 24px; }

/* Story */
.story-head .lede { margin: 6px 0 0; }

/* Factions */
.faction-list { display: flex; gap: 8px; margin: 36px 0 0; }
.faction-tab {
  --c: var(--pale);
  flex: 1;
  padding: 16px 12px 18px;
  border: 0;
  cursor: pointer;
  font: 22px/1 var(--display);
  color: var(--dim);
  background: var(--m-recess);
  box-shadow: inset 0 0 0 2px var(--m-out), inset 0 -6px 0 0 var(--m-out), inset 0 -8px 0 0 color-mix(in srgb, var(--c) 35%, var(--m-recess));
}
.faction-tab:hover { color: var(--text); }
.faction-tab[aria-selected="true"] { color: var(--c); background: var(--m-body); box-shadow: inset 0 0 0 2px var(--m-out), inset 2px 2px 0 2px var(--m-hi), inset 0 -6px 0 0 var(--m-out), inset 0 -8px 0 0 var(--c); }
[data-faction="federation"] { --c: var(--federation); }
[data-faction="carbon"] { --c: var(--carbon); }
[data-faction="meridian"] { --c: var(--meridian); }
[data-faction="conclave"] { --c: var(--conclave); }
.faction { margin-top: 8px; padding: 36px 40px 40px; }
.faction h3 { font-size: 33px; color: var(--c); margin-bottom: 24px; }
.faction-hud { margin: 0 0 28px; line-height: 0; }
.faction-hud img { width: calc(325px * 2); height: calc(55px * 2); }
.faction-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: start; }
.faction-copy p { margin: 0; color: var(--pale); max-width: var(--measure); }
.facts { display: grid; gap: 20px; margin: 0; min-width: 12rem; }
.facts dt { font: 22px/1 var(--display); color: var(--dim); margin-bottom: 6px; }
.facts dd { margin: 0; font-size: 1.25rem; color: var(--text); }
html:not(.js) .faction { margin-top: 16px; }

/* Devlog */
.post-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--m-hi); }
.post-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  grid-template-areas: "date title" "date summary";
  gap: 6px 32px;
  padding: 26px 4px;
  border-bottom: 2px solid #142030;
  text-decoration: none;
  color: var(--text);
}
.post-row time { grid-area: date; color: var(--dim); font-size: 1rem; padding-top: 4px; }
.post-title { grid-area: title; font: 22px/1.3 var(--display); color: var(--ice); }
.post-summary { grid-area: summary; color: var(--pale); max-width: var(--measure); }
.post-row:hover .post-title { color: var(--text); }

/* Early access */
.launch-inner { display: grid; gap: 24px; justify-items: start; padding: 40px 44px; }
.launch-badge { width: calc(154px * 2); height: calc(29px * 2); }
.launch-copy h2 { font-size: 33px; margin-bottom: 0.4em; }
.launch-copy p { margin: 0 0 0.6em; color: var(--pale); max-width: 46ch; }
.launch-links { font: 22px/1.3 var(--display); }

/* Pages */
.page-top { padding-top: calc(var(--head) + 88px); }
.page-top h1 { font-size: 44px; }
.kicker { font: 22px/1 var(--display); margin: 0 0 18px; }
.kicker a { text-decoration: none; }
.byline { display: flex; align-items: center; gap: 16px; margin: 0 0 40px; color: var(--dim); font-size: 1rem; }
.byline img { width: 48px; height: 48px; box-shadow: 0 0 0 2px var(--m-out), 0 0 0 4px var(--m-hi); }
.byline-name { color: var(--text); font-weight: 600; margin-right: 8px; }
.prose { color: #d6e3f3; }
.prose .lede { color: var(--text); margin-bottom: 1.4em; }
.prose h2 { font-size: 33px; margin: 1.6em 0 0.6em; }
.prose h3 { margin: 1.6em 0 0.5em; }
.prose p, .prose ul, .prose ol { max-width: var(--measure); }
.prose li { margin-bottom: 0.4em; }
.prose img { display: block; max-width: 100%; height: auto; margin: 0; box-shadow: 0 0 0 2px var(--m-out), 0 0 0 4px var(--m-hi); }
.prose figure { margin: 2em 0; }
.prose figcaption { margin-top: 0.9em; color: var(--dim); font-size: 0.95rem; line-height: 1.5; max-width: var(--measure); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--amber); color: var(--text); }
.post-nav { display: flex; justify-content: space-between; gap: 24px; margin-top: 72px; padding-top: 28px; border-top: 2px solid var(--m-hi); }
.post-nav a { font: 22px/1.35 var(--display); text-decoration: none; max-width: 48%; }
.post-nav span { display: block; font: 600 0.9375rem/1.4 var(--body); color: var(--dim); margin-bottom: 6px; }
.post-nav .newer { text-align: right; margin-left: auto; }
.lost { min-height: 50vh; }

/* Footer */
.foot { position: relative; margin-top: 40px; padding: 36px 0 44px; border-top: 2px solid var(--m-out); box-shadow: inset 0 2px 0 var(--m-hi); background: var(--m-body); }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.studio { display: inline-flex; align-items: center; gap: 14px; color: #fdf5e1; text-decoration: none; font-size: 1.0625rem; }
.studio img { width: 44px; height: auto; }
.studio strong { font-weight: 600; }
.studio:hover { color: #fff; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot-nav a { color: var(--pale); text-decoration: none; font-size: 1.0625rem; }
.foot-nav a:hover { color: var(--ice); }

/* Width steps keep the pixel art on whole multiples and the intro video crisp. */
@media (min-width: 1331px) and (min-height: 1340px) {
  :root { --col: 1283px; }
  .hero { --fp: 6px; --video: 1036px; }
  .rig-plate { font-size: 22px; gap: 12px; }
  .rig-panel { gap: 44px; padding: 0 36px; }
  .pitch { font-size: 1.3125rem; }
  .hero-actions { gap: 14px; }
  .hero-actions .lamp-big { font-size: 22px; padding: 16px 20px 14px; }
  .status { font-size: 1.0625rem; }
  .intro-controls { gap: 10px; }
  .intro-controls button { font-size: 22px; padding: 10px 16px 8px; }
  .signposts { gap: 40px; }
  .signpost .screen-plate { font-size: 16.5px; }
  .chapter .screen-plate h2 { font-size: 33px; }
  .chapter-text { padding: 44px 56px 38px; font-size: 1.3125rem; }
  .dossier { --t: 440px; }
  .dossier-text { padding: 52px 56px; }
  .pixel-title { --fp: 5px; }
}
@media (max-width: 1009px) {
  :root { --head: 78px; --col: 642px; }
  .nav-toggle {
    display: grid;
    gap: 4px;
    margin-left: auto;
    padding: 12px 10px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav-toggle span { display: block; width: 24px; height: 4px; background: var(--pale); }
  /* The open menu is a second plate under the bar, in the same housing. */
  .nav {
    --cut: 8px;
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    isolation: isolate;
    flex-direction: column;
    gap: 0;
    padding: 14px 30px 18px;
    background: var(--m-out);
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  }
  .nav::before {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    background: var(--m-body);
    clip-path: polygon(calc(var(--cut) - 1px) 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px), 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, calc(var(--cut) - 1px) 100%, 0 calc(100% - var(--cut) + 1px), 0 calc(var(--cut) - 1px));
    box-shadow: inset 2px 2px 0 var(--m-hi), inset -2px -2px 0 var(--m-lo), inset 0 0 0 6px var(--m-rim), inset 0 0 0 8px var(--m-out);
  }
  .masthead .bar { clip-path: none; }
  .masthead-lamp { display: none; }
  .masthead.open .nav { display: flex; }
  .nav a { padding: 14px 0; font-size: 22px; }
  .nav a[aria-current] { box-shadow: none; }
  /* Here the rig's panel is too small for the pitch. The opening holds only the picture,
     the controls move onto the panel's face, and the pitch drops below the rig into a
     metal plate the width of the column. */
  .hero { --fp: 3px; --video: 518px; --gap: clamp(48px, 7svh, 80px); min-height: 0; padding-bottom: 40px; }
  .rig { height: auto; padding-top: calc(896 * var(--u) + 16px); }
  .rig-art { height: calc(896 * var(--u)); }
  .rig-plate { font-size: 11px; gap: 8px; }
  .rig-plate::before { width: 6px; height: 6px; }
  .intro-controls { position: absolute; left: calc(-13 * var(--u)); top: calc(610 * var(--u)); width: calc(1089 * var(--u)); height: calc(146 * var(--u)); align-items: center; justify-content: center; }
  .intro-sound { margin-left: 0; }
  .rig-panel { --cut: 8px; position: relative; isolation: isolate; left: 0; top: 0; width: 100%; height: auto; grid-template-columns: 1fr; gap: 18px; padding: 26px 24px; background: var(--m-out); clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); }
  .rig-panel::before { content: ""; position: absolute; inset: 2px; z-index: -1; background: var(--m-body); box-shadow: inset 2px 2px 0 var(--m-hi), inset -2px -2px 0 var(--m-lo), inset 0 0 0 6px var(--m-rim), inset 0 0 0 8px var(--m-out); clip-path: polygon(calc(var(--cut) - 1px) 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px), 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, calc(var(--cut) - 1px) 100%, 0 calc(100% - var(--cut) + 1px), 0 calc(var(--cut) - 1px)); }
  .hero-actions { justify-items: stretch; gap: 12px; }
  .hero-actions .lamp-big { font-size: 22px; padding: 18px 12px 16px; text-align: center; }
  .status { font-size: 1rem; }
  .slot img { width: calc(32px * 2); height: calc(32px * 2); }
  .faction-list { display: grid; grid-template-columns: 1fr 1fr; }
  .faction-hud img { width: 325px; height: 55px; }
  .faction-copy { grid-template-columns: 1fr; gap: 24px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .post-row { grid-template-columns: 1fr; grid-template-areas: "date" "title" "summary"; }
  .signposts { gap: 24px; }
  .signpost .screen-plate { font-size: 11px; }
  .pixel-title { --fp: 3px; }
  .chapter .screen-plate h2 { font-size: 16.5px; }
  .chapter-text { columns: 1; }
  .dossier { --t: 250px; gap: 20px; }
  .dossier-text { padding: 28px 30px; gap: 22px; }
  .dossier .facts { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 673px) {
  :root { --col: calc(100vw - 32px); }
  .hero { --video: calc(1063 * var(--u) - 20px); }
  /* The top plate is too small for its words here; it stays a plain plate. */
  .rig-plate { display: none; }
  .intro-controls { gap: 6px; }
  .intro-controls button { padding: 7px 8px 5px; }
  .intro-play { min-width: 4.8em; }
  .signposts { grid-template-columns: 1fr; gap: 40px; padding-bottom: 80px; }
  .screen-view img, .terminal-view img { zoom: normal; width: 100%; height: 100%; }
  .chapter .screen-plate h2 { font-size: 11px; }
  .chapter-text { padding: 26px 24px 20px; }
  .dossier, .dossier:nth-child(even) { grid-template-columns: 1fr; gap: 16px; }
  .dossier:nth-child(even) .terminal { order: 0; }
  .dossier .terminal-plate { font-size: 33px; }
  .dossier-text { padding: 26px 24px; }
  .prose.housing { padding: 32px 24px 16px; }
  .post-list.housing { padding: 4px 24px; }
  .lost.housing { padding: 32px 24px 20px; }
}
@media (max-width: 480px) {
  .foot-nav { display: grid; grid-template-columns: repeat(3, max-content); }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; --head: 68px; }
  body { font-size: 1.125rem; }
  h1, h2, .page-top h1 { font-size: 33px; }
  .prose h2 { font-size: 22px; text-wrap: balance; }
  .lede { font-size: 1.1875rem; }
  .section { padding: 80px 0; }
  .masthead { padding: 8px 8px 0; }
  .masthead .bar { gap: 12px; padding: 8px 8px 8px 14px; }
  .masthead-logo img { width: 101px; height: 13px; }
  .slots { gap: 6px; padding: 10px; }
  .faction-hud img { max-width: 100%; height: auto; }
  .slot-n { font-size: 11px; left: 6px; top: 5px; }
  .readout { padding: 20px; }
  .feature { grid-template-columns: 1fr; }
  .feature-icon { display: none; }
  .faction { padding: 24px 20px; }
  .launch-inner { padding: 28px 22px; }
  .launch-badge { width: 154px; height: 29px; }
  .post-nav a { max-width: none; }
  .post-nav { flex-direction: column; }
  .post-nav .newer { margin-left: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}