/* Super Havoc Squad: the website. Everything here comes from the game: the colours are the title screen's sky, the
   logo's chrome and the menus' panels and buttons, the display type is the game's own bitmap font
   (Tools/Website/pixelfont.py: set at whole multiples of its pixel, 16 px a line for the big font and 11 for the small
   one), and the pictures are its art, drawn at whole multiples too. */

@font-face {
  font-family: "Havoc Pixel";
  src: url("../fonts/havoc-pixel.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Havoc Pixel Small";
  src: url("../fonts/havoc-pixel-small.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* The title screen's sky, top to the horizon, and the ground under it. */
  --sky-1: #0c0620;
  --sky-2: #160a34;
  --sky-3: #24104a;
  --sky-4: #3a145c;
  --sky-5: #5a1a68;
  --sky-6: #86206e;
  --sky-7: #b02c6c;
  --sky-8: #d8466a;
  --ground: #12081e;
  /* The logo: its outline, its chrome (sky blue down to sunset gold) and its pink extrusion. */
  --ink: #100821;
  --chrome: #3963c6;
  --chrome-light: #9cc0ff;
  --gold: #de8c39;
  --gold-light: #ffc860;
  --pink: #f752ad;
  --pink-deep: #ad2184;
  --text: #f4ecff;
  --muted: #b8a7d4;
  --panel: #1b0f33;
  /* The game's menus (Game/Engine/BitmapFont.swift's Palette, Game/UI/Widgets.swift's panels and buttons): a panel's
     fill, its edges (an ink line; cyan above and to the left, pink below and to the right; a light line inside the
     cyan, a shade inside the pink), a button's bands top to bottom, and the text's colours. The dim grey and the pink
     are a shade lighter than the game's, to be read on the panel at a website's size. */
  --g-panel: #31296b;
  --g-panel-dark: #14102b;
  --g-ink: #180821;
  --g-cyan-edge: #adffff;
  --g-pink-edge: #e74aa5;
  --g-light: #4a429c;
  --g-shade: #181842;
  --g-button-1: #9c84ef;
  --g-button-2: #5a4abd;
  --g-button: #4a39a5;
  --g-button-3: #39298c;
  --g-button-4: #291863;
  --g-picked-1: #ffffff;
  --g-picked-2: #ff6bb5;
  --g-picked: #e7399c;
  --g-picked-3: #c62184;
  --g-picked-4: #9c1063;
  --g-picked-edge: #ffef73;
  --g-text: #f8f0e0;
  --g-outline: #17081d;
  --g-gold: #f8d048;
  --g-cyan: #48e0f0;
  --g-pink: #f87ccc;
  --g-orange: #f89838;
  --g-dim: #b0b0cc;
  --g-pip-off: #3a2a48;

  --body: "Avenir Next", Avenir, Futura, "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --pixel: "Havoc Pixel", "Avenir Next", system-ui, sans-serif;
  --pixel-small: "Havoc Pixel Small", "Avenir Next", system-ui, sans-serif;
  --measure: 62ch;
  --gutter: 24px;
  --page: 1180px;
}

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

html { background: var(--ground); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }

/* Pixel art and pixel type stay crisp. */
.px, .lineup img, .logo img, .icon, .rides img, .tile img, .dossier-portrait, .walker img, .stat img,
.device-screen img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.pixel, .pixel-small {
  font-weight: normal;
  -webkit-font-smoothing: none;
  font-smooth: never;
  letter-spacing: 0;
}
.pixel { font-family: var(--pixel); }
.pixel-small { font-family: var(--pixel-small); }

a { color: var(--chrome-light); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-light); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  padding: 8px 14px;
  background: var(--gold-light);
  color: var(--ink);
  z-index: 10;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- The sky: the title screen's eight bands down to the horizon, its stars, and the squad on the horizon. */

.sky {
  position: relative;
  overflow: hidden;
  background:
    url("../img/stars.png") repeat-x top center / 720px 216px,
    linear-gradient(to bottom,
      var(--sky-1) 0 12.5%, var(--sky-2) 0 25%, var(--sky-3) 0 37.5%, var(--sky-4) 0 50%,
      var(--sky-5) 0 62.5%, var(--sky-6) 0 75%, var(--sky-7) 0 87.5%, var(--sky-8) 0 100%);
  image-rendering: pixelated;
  border-bottom: 4px solid var(--ink);
}

.topbar {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  padding-top: 20px;
  font-size: 16px;
}
.topbar a { color: var(--text); text-decoration: none; }
.topbar a:hover { color: var(--gold-light); text-decoration: underline; }

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 0 0;
}

.logo { margin: 0; line-height: 0; }
.logo img { width: 858px; }        /* three times the logo's pixels */

.tagline {
  margin: 28px 0 0;
  max-width: 24ch;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 600;
  text-wrap: balance;
}

/* The OMEGA DEVICE's readout: the time left till midnight on New Year's Eve, wherever you are. */
.omega {
  margin: 36px 0 0;
  padding: 16px 28px 14px;
  background: var(--ink);
  border: 4px solid var(--pink);
  box-shadow: 0 0 0 4px var(--ink);
  color: var(--gold-light);
  display: inline-flex;
  align-items: baseline;
  gap: 32px;
}
.omega-days { font-size: 32px; line-height: 1; }
.omega-clock { font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; }
.omega-note {
  margin: 14px 0 0;
  max-width: 44ch;
  color: var(--text);
  font-size: 17px;
}

.store {
  margin: 34px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px 18px;
}
/* Coming soon, as the title screen's menu has it: the selected item, its caret before it. When the game's on the
   App Store, Apple's own "Download on the App Store" badge (linked to it) goes here instead. */
.store-soon {
  font-size: 32px;
  line-height: 1;
  color: var(--gold-light);
}
.store-soon::before { content: "> "; color: var(--gold); }
.store-platforms { color: var(--text); font-size: 17px; }

.lineup {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 40px;
  line-height: 0;
}
.lineup img { width: 104px; margin: 0 2px; }          /* twice the sprites' pixels */
.lineup .wide { width: 112px; }
.lineup .wider { width: 120px; }

/* ---------- The sections under the sky, on the ground. */

main { display: block; }

.section { padding: 112px 0 0; }
.section:last-of-type { padding-bottom: 112px; }

.h2 {
  margin: 0;
  font-size: 48px;                   /* three times the font's pixels */
  line-height: 1;
  color: var(--gold-light);
  text-wrap: balance;
}
.lede {
  margin: 20px 0 0;
  max-width: var(--measure);
  color: var(--muted);
  font-size: 20px;
}

/* The premise beside a screenshot, framed as the game frames its panels: the pink rule, ink either side of it. (Drawn
   from four times the game's pixels down to whatever fits: smoothly, as it's never a whole multiple.) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.split-text p { margin: 18px 0 0; max-width: var(--measure); }
.split-text .h2 + p { margin-top: 24px; }

.shot { margin: 0; }
.shot img {
  display: block;
  width: 100%;
  border: 3px solid var(--ink);
  outline: 3px solid var(--pink-deep);
  background: var(--ink);
}
.shot figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* A button as the game's menus draw theirs, at twice its pixels: bands of purple, top to bottom, in an ink line; the
   one under the cursor hot pink in a yellow line. */
.arrow {
  display: inline-grid;
  place-items: center;
  min-width: 60px;
  height: 52px;
  margin: 2px;
  padding: 4px 16px 0;
  border: 0;
  border-radius: 0;
  background: var(--g-button);
  color: var(--g-text);
  font-size: 32px;
  line-height: 1;
  text-shadow: 0 2px 0 var(--g-outline);
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 var(--g-button-1), inset 0 8px 0 var(--g-button-2),
    inset 0 -2px 0 var(--g-button-4), inset 0 -6px 0 var(--g-button-3),
    0 0 0 2px var(--g-ink);
}
.arrow:hover {
  background: var(--g-picked);
  box-shadow:
    inset 0 2px 0 var(--g-picked-1), inset 0 8px 0 var(--g-picked-2),
    inset 0 -2px 0 var(--g-picked-4), inset 0 -6px 0 var(--g-picked-3),
    0 0 0 2px var(--g-picked-edge);
}
.arrow:active { translate: 0 2px; }
.arrow:disabled {
  background: #39394a;
  color: #8888a8;
  text-shadow: none;
  cursor: default;
  translate: none;
  box-shadow:
    inset 0 2px 0 #6b6b84, inset 0 8px 0 #4a4a63,
    inset 0 -2px 0 #292139, inset 0 -6px 0 #39394a,
    0 0 0 2px var(--g-ink);
}
.arrow[hidden] { display: none; }

/* ---------- The devices: the game on each, in a row that scrolls sideways. Each screen shows the game's own pixels
   (the shots are at them) at a whole multiple where there's room: the Mac's twice, the iPad's one and a half, the
   iPhone's once, each a whole number of a Retina screen's pixels; and shrinks to fit a phone's width. */

.devices-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
}
.devices-nav { display: flex; gap: 16px; padding: 0 2px 2px; }
.devices-nav[hidden] { display: none; }

.devices {
  --edge: max(var(--gutter), calc((100% - var(--page)) / 2));
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 72px;
  margin-top: 40px;
  padding: 8px var(--edge) 28px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: thin;
  scrollbar-color: var(--sky-5) transparent;
}
.devices:focus-visible { outline-offset: -3px; }

.device {
  /* The game's pixels across and down its screen (--gw, --gh), a CSS pixel's worth of them (--scale), the bezel; the
     screen's width (--sw) as big as that or as the window allows, and its shorter side (--ss). */
  --fit: calc(100vw - 2 * var(--gutter) - 2 * var(--bezel) - 4px);
  --tallest: 10000px;
  --sw: min(calc(var(--gw) * var(--scale) * 1px), var(--fit), calc(var(--tallest) * var(--gw) / var(--gh)));
  --ss: calc(var(--sw) * var(--gh) / var(--gw));
  flex: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  scroll-snap-align: start;
}
.device.tall { --ss: var(--sw); }

.mac { --gw: 360; --gh: 225; --scale: 2; --bezel: 14px; }
.ipad { --scale: 1.5; --bezel: 16px; }
.ipad.wide { --gw: 344; --gh: 258; }
.ipad.tall { --gw: 258; --gh: 344; }
.iphone { --scale: 1; --bezel: 10px; }
.iphone.wide { --gw: 478; --gh: 220; }
.iphone.tall { --gw: 220; --gh: 478; }

/* The glass round the screen, in its metal edge. */
.device-body {
  position: relative;
  padding: var(--bezel);
  background: #06040b;
  border-radius: calc(var(--radius) + var(--bezel));
  box-shadow: 0 0 0 2px #5a5076, 0 0 0 4px #251d38;
}
.device-screen {
  position: relative;
  width: var(--sw);
  aspect-ratio: var(--gw) / var(--gh);
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
}
.device-screen img { display: block; width: 100%; height: 100%; }

.iphone { --radius: calc(var(--ss) * .125); }
.ipad { --radius: calc(var(--ss) * .045); }
.mac { --radius: 0px; }
.mac .device-body { border-radius: 14px 14px 4px 4px; padding-bottom: calc(var(--bezel) + 8px); }
.mac .device-screen { border-radius: 4px 4px 0 0; }

/* iPhone's Dynamic Island, over the top of the screen held upright, at its left held sideways. */
.iphone .device-screen::after {
  content: "";
  position: absolute;
  background: #000;
  border-radius: 999px;
}
.iphone.tall .device-screen::after {
  width: calc(var(--ss) * .286);
  height: calc(var(--ss) * .084);
  top: calc(var(--ss) * .025);
  left: calc(50% - var(--ss) * .143);
}
.iphone.wide .device-screen::after {
  width: calc(var(--ss) * .084);
  height: calc(var(--ss) * .286);
  left: calc(var(--ss) * .025);
  top: calc(50% - var(--ss) * .143);
}

/* The camera, in the bezel: on an iPad's long edge, over a Mac's screen. */
.ipad .device-body::before, .mac .device-body::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #241d36;
}
.ipad.wide .device-body::before, .mac .device-body::before { top: calc(var(--bezel) / 2 - 3px); left: calc(50% - 3px); }
.ipad.tall .device-body::before { left: calc(var(--bezel) / 2 - 3px); top: calc(50% - 3px); }

/* A Mac's base under its lid: a little wider, lit along the top, the notch to open it by. */
.device-base {
  --overhang: calc(var(--sw) * .045);
  position: relative;
  width: calc(var(--sw) + 2 * var(--bezel) + 2 * var(--overhang));
  height: calc(var(--sw) * .03 + 6px);
  margin: 2px 0 0 calc(-1 * var(--overhang));
  background: linear-gradient(to bottom, #a69fc0 0 2px, #6e6590 2px calc(100% - 4px), #3d3558 calc(100% - 4px));
  border-radius: 2px 2px 14px 14px / 2px 2px 10px 10px;
}
.device-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 42%;
  width: 16%;
  height: 45%;
  background: #4a4167;
  border-radius: 0 0 8px 8px;
}

.device figcaption {
  min-height: 3em;
  margin-top: 18px;
  max-width: calc(var(--sw) + 2 * var(--bezel));
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.device-name { margin-right: 8px; color: var(--text); font-size: 22px; line-height: 1; }

/* ---------- The rides, as the game draws them, three times over, on one line. */

.rides {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 40px 64px;
  --px: 3px;
}
.rides li { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.rides img { width: calc(var(--w) * var(--px)); }
.ride-jeep { --w: 51; }
.ride-tank { --w: 62; }
.ride-bike { --w: 34; }
.ride-hovercraft { --w: 48; }
.ride-chopper { --w: 67; }
.ride-name { font-size: 22px; line-height: 1; color: var(--text); }

/* ---------- Choose your operative: the Recruitment Office's panel, at twice the game's pixels. The faces along the
   top are radio buttons (a native group: Tab to it, arrow keys along it), each showing its operative's dossier below
   it; the arrows either side step through them as the game's do. */

.select {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  grid-template-areas:
    ".    roster  ."
    "prev dossier next";
  gap: 36px 20px;
  margin-top: 48px;
  padding: 32px 20px 40px;
  background: var(--g-panel);
  border: 2px solid;
  border-color: var(--g-cyan-edge) var(--g-pink-edge) var(--g-pink-edge) var(--g-cyan-edge);
  box-shadow: 0 0 0 2px var(--g-ink), inset 2px 2px 0 var(--g-light), inset -2px -2px 0 var(--g-shade);
}
.select > input {
  position: absolute;
  top: 32px;
  left: 50%;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.roster {
  grid-area: roster;
  display: grid;
  grid-template-columns: repeat(8, 120px);
  justify-content: center;
  gap: 16px;
}
.tile {
  position: relative;
  display: block;
  padding: 4px;
  line-height: 0;
  background: var(--g-panel-dark);
  box-shadow: inset 0 0 0 2px var(--g-light), 0 0 0 2px var(--g-ink);
  cursor: pointer;
}
.tile img { width: 112px; height: 112px; }
.tile:hover { box-shadow: inset 0 0 0 2px var(--g-cyan-edge), 0 0 0 2px var(--g-ink); }

/* The operative picked: hot pink, in the yellow line, the first player's tag on it. */
#op-rex:checked ~ .roster .tile-rex,
#op-viper:checked ~ .roster .tile-viper,
#op-bulldozer:checked ~ .roster .tile-bulldozer,
#op-sparks:checked ~ .roster .tile-sparks,
#op-midnight:checked ~ .roster .tile-midnight,
#op-chrome:checked ~ .roster .tile-chrome,
#op-blaze:checked ~ .roster .tile-blaze,
#op-colonel:checked ~ .roster .tile-colonel {
  background: var(--g-picked);
  box-shadow: inset 0 0 0 2px var(--g-picked-2), 0 0 0 2px var(--g-picked-edge), 0 0 0 4px var(--g-ink);
}
#op-rex:checked ~ .roster .tile-rex::after,
#op-viper:checked ~ .roster .tile-viper::after,
#op-bulldozer:checked ~ .roster .tile-bulldozer::after,
#op-sparks:checked ~ .roster .tile-sparks::after,
#op-midnight:checked ~ .roster .tile-midnight::after,
#op-chrome:checked ~ .roster .tile-chrome::after,
#op-blaze:checked ~ .roster .tile-blaze::after,
#op-colonel:checked ~ .roster .tile-colonel::after {
  content: "P1";
  content: "P1" / "";
  position: absolute;
  top: -12px;
  left: -10px;
  padding: 3px 6px 1px;
  background: var(--g-picked-edge);
  color: var(--g-ink);
  font: 22px/1 var(--pixel-small);
  -webkit-font-smoothing: none;
  box-shadow: 0 0 0 2px var(--g-ink);
}
#op-rex:focus-visible ~ .roster .tile-rex,
#op-viper:focus-visible ~ .roster .tile-viper,
#op-bulldozer:focus-visible ~ .roster .tile-bulldozer,
#op-sparks:focus-visible ~ .roster .tile-sparks,
#op-midnight:focus-visible ~ .roster .tile-midnight,
#op-chrome:focus-visible ~ .roster .tile-chrome,
#op-blaze:focus-visible ~ .roster .tile-blaze,
#op-colonel:focus-visible ~ .roster .tile-colonel {
  outline: 3px solid var(--g-text);
  outline-offset: 5px;
}

.select-prev { grid-area: prev; align-self: center; justify-self: start; }
.select-next { grid-area: next; align-self: center; justify-self: end; }

.dossiers { grid-area: dossier; min-width: 0; }
.dossier {
  display: none;
  grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas:
    "portrait id    id    walker"
    "stats    stats words words";
  gap: 36px 32px;
  align-items: start;
}
#op-rex:checked ~ .dossiers .dossier-rex,
#op-viper:checked ~ .dossiers .dossier-viper,
#op-bulldozer:checked ~ .dossiers .dossier-bulldozer,
#op-sparks:checked ~ .dossiers .dossier-sparks,
#op-midnight:checked ~ .dossiers .dossier-midnight,
#op-chrome:checked ~ .dossiers .dossier-chrome,
#op-blaze:checked ~ .dossiers .dossier-blaze,
#op-colonel:checked ~ .dossiers .dossier-colonel { display: grid; }

.dossier p, .dossier h3 { margin: 0; }
.dossier-portrait { grid-area: portrait; width: 200px; }

/* The game's lines: each in its colour, in an ink outline. */
.dossier-id, .stats, .dossier-words {
  text-transform: uppercase;
  text-shadow: 2px 0 var(--g-outline), -2px 0 var(--g-outline), 0 2px var(--g-outline), 0 -2px var(--g-outline),
    2px 2px var(--g-outline), -2px 2px var(--g-outline), 2px -2px var(--g-outline), -2px -2px var(--g-outline);
}
.dossier-id { grid-area: id; padding-top: 4px; font-size: 22px; line-height: 26px; }
.dossier .dossier-name { margin-bottom: 14px; font-size: 32px; line-height: 36px; color: var(--g-gold); }
.dossier-callsign { color: var(--g-pink); }
.dossier-role { color: var(--g-cyan); }
.dossier-special { color: var(--g-orange); }
.dossier-weapon { color: var(--g-text); }

/* Walking on the spot, as in the Recruitment Office: the walk's six frames side by side, slid one along each tenth of a
   second; three times over. */
.walker {
  grid-area: walker;
  display: block;
  height: 144px;
  aspect-ratio: 52 / 48;
  overflow: hidden;
  justify-self: end;
}
.walker.wide { aspect-ratio: 56 / 48; }
.walker.wider { aspect-ratio: 60 / 48; }
.walker img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  animation: walk .6s steps(6) infinite;
}
@keyframes walk { to { transform: translateX(-100%); } }

.stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 8px 20px;
  margin: 0;
  font-size: 22px;
  line-height: 26px;
}
.stat { display: contents; }
.stat dt { display: flex; align-items: center; gap: 10px; color: var(--g-dim); }
.stat dt img { width: 18px; height: 18px; }
.stat dd { display: flex; align-items: center; gap: 16px; margin: 0; color: var(--g-text); }

/* The pips: twelve, each three of the game's pixels wide and five high, filled one after another when a dossier
   opens. */
.pips {
  position: relative;
  width: 94px;
  height: 10px;
  background: repeating-linear-gradient(to right, var(--g-pip-off) 0 6px, transparent 6px 8px);
}
.pips::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--v) * 8px - 2px);
  background: repeating-linear-gradient(to right, var(--g-gold) 0 6px, transparent 6px 8px);
  animation: pips calc(var(--v) * 50ms) steps(var(--v), jump-start) both;
}
@keyframes pips { from { width: 0; } }
.v0 { --v: 0; }
.v1 { --v: 1; }
.v2 { --v: 2; }
.v3 { --v: 3; }
.v4 { --v: 4; }
.v5 { --v: 5; }
.v6 { --v: 6; }
.v7 { --v: 7; }
.js .select:not(.seen) .pips::before { animation-play-state: paused; }

.dossier-words { grid-area: words; max-width: 40ch; font-size: 22px; line-height: 28px; color: var(--g-dim); }
.dossier-words p:first-child { text-transform: none; }
.dossier .dossier-quote { margin-top: 24px; color: var(--g-text); }

/* What you can count on: plain heads, plain words. */
.facts {
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 48px;
}
.fact-head { margin: 0; font-size: 22px; line-height: 1; color: var(--text); }
.fact p { margin: 12px 0 0; color: var(--muted); max-width: 52ch; }

/* ---------- The sign-off: the icon, where to get it, where to get help. */

.signoff {
  border-top: 4px solid var(--ink);
  background: var(--sky-2);
  padding: 64px 0 56px;
}
.signoff-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
}
.icon { width: 128px; height: 128px; display: block; border: 3px solid var(--ink); outline: 3px solid var(--pink-deep); }
.signoff .store { justify-content: flex-start; margin: 0; }
.signoff p { margin: 12px 0 0; color: var(--muted); }

.footer {
  padding: 28px 0 40px;
  font-size: 15px;
  color: var(--muted);
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; }
.footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.footer .legal { margin-left: auto; }

/* ---------- The pages Apple asks for (support, privacy): a plain column under a slim band of sky. */

.band {
  background:
    linear-gradient(to bottom,
      var(--sky-1) 0 25%, var(--sky-3) 0 50%, var(--sky-5) 0 75%, var(--sky-7) 0 100%);
  border-bottom: 4px solid var(--ink);
}
.band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;          /* (top and bottom only: the gutter's the wrap's) */
  padding-bottom: 18px;
}
.band .home { line-height: 0; }
.band .home img { width: 286px; }   /* twice the small logo's pixels */
.band nav { display: flex; gap: 24px; font-size: 16px; }
.band nav a { color: var(--text); text-decoration: none; }
.band nav a:hover, .band nav a[aria-current="page"] { color: var(--gold-light); }
.band nav a[aria-current="page"] { text-decoration: underline; }

.doc { padding: 72px 0 96px; }
.doc-col { max-width: 68ch; }
.doc h1 { margin: 0; font-size: 48px; line-height: 1; color: var(--gold-light); }
.doc .updated { margin: 16px 0 0; color: var(--muted); font-size: 15px; }
.doc h2 { margin: 56px 0 0; font-size: 32px; line-height: 1; color: var(--text); }
.doc h3 { margin: 32px 0 0; font-size: 19px; line-height: 1.4; }
.doc p, .doc ul, .doc dl { margin: 14px 0 0; }
.doc li + li { margin-top: 8px; }
.doc dd { margin: 4px 0 0; color: var(--muted); }
.doc dt { margin-top: 18px; font-weight: 600; }

.contact {
  margin: 28px 0 0;
  padding: 24px 28px;
  background: var(--panel);
  border: 3px solid var(--ink);
  outline: 3px solid var(--chrome);
}
.contact > :first-child { margin-top: 0; }
.contact .mail { font-size: 22px; font-weight: 600; overflow-wrap: anywhere; }

.lost { padding: 120px 0 140px; text-align: center; }
.lost .h2 { color: var(--text); }
.lost p { margin: 20px auto 0; max-width: 40ch; color: var(--muted); }

/* ---------- Smaller screens. */

/* (Narrower than the eight faces in a row and the arrows beside the dossier: the faces in two rows of four, the
   arrows under it.) */
@media (max-width: 1180px) {
  .select {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "roster  roster"
      "dossier dossier"
      "prev    next";
    padding: 28px 24px 28px;
  }
  .roster { grid-template-columns: repeat(4, 120px); }
}

@media (max-width: 1020px) {
  .logo img { width: 572px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .walker { height: 96px; }
  .dossier {
    grid-template-columns: 200px minmax(0, 1fr) auto;
    grid-template-areas:
      "portrait id    walker"
      "stats    stats stats"
      "words    words words";
  }
}

@media (max-width: 700px) {
  :root { --gutter: 16px; }
  body { font-size: 17px; }
  .topbar { gap: 20px; padding-top: 14px; font-size: 15px; }
  .hero { padding-top: 32px; }
  .logo img { width: 286px; }
  .tagline { font-size: 23px; }
  .omega { gap: 16px; padding: 12px 16px 10px; flex-direction: column; align-items: center; }
  .omega-clock { font-size: 48px; }
  .store-soon { font-size: 22px; }
  .lineup img, .lineup .wide, .lineup .wider { width: 52px; margin: 0 -2px; }
  .lineup .wide { width: 56px; }
  .lineup .wider { width: 60px; }
  .section { padding-top: 80px; }
  .section:last-of-type { padding-bottom: 80px; }
  .h2, .doc h1 { font-size: 32px; }
  .doc h2 { font-size: 22px; }
  .lede { font-size: 18px; }
  .devices { gap: 40px; margin-top: 28px; }
  .device { --tallest: 380px; justify-content: center; }      /* (one at a time: each centred in the row) */
  .mac, .ipad { --bezel: 10px; }
  .iphone { --bezel: 8px; }
  .device figcaption { font-size: 15px; }
  .rides { --px: 2px; gap: 32px 40px; }
  .select { gap: 28px 12px; padding: 20px 14px 22px; }
  .dossier {
    grid-template-columns: 100px minmax(0, 1fr);
    grid-template-areas:
      "portrait walker"
      "id       id"
      "stats    stats"
      "words    words";
    gap: 24px 16px;
  }
  .dossier-portrait { width: 100px; }
  .walker { height: 96px; align-self: end; }
  .stats { gap: 8px 14px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .signoff-inner { grid-template-columns: minmax(0, 1fr); }
  .footer .legal { margin-left: 0; }
  .band .home img { width: 144px; }
  .band-inner { flex-wrap: wrap; }
  .contact { padding: 20px; }
  .contact .mail { font-size: 19px; }
}

/* (The faces at their own size where four of them twice over don't fit across.) */
@media (max-width: 560px) {
  .roster { grid-template-columns: repeat(4, 64px); justify-content: space-between; gap: 14px 8px; }
  .tile img { width: 56px; height: 56px; }
}

/* (The squad on the horizon at their own size where twice it doesn't fit.) */
@media (min-width: 701px) and (max-width: 900px) {
  .lineup img { width: 52px; margin: 0 4px; }
  .lineup .wide { width: 56px; }
  .lineup .wider { width: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .walker img, .pips::before { animation: none; }
  .devices { scroll-behavior: auto; }
}