/* The website's style, shared by its pages: the game's orange on a dark blue-black, headings in
   the game's menu font, the display's corner brackets and cut corners. */

/* Newtown, by Roger White, from Roger's Fonts: the face OpenReliant draws the game's menus in
   (deps/newtown), which the Pages workflow writes into website/fonts in a form browsers accept
   (.github/scripts/web_font.py). */
@font-face { font-family: "Newtown"; src: url("fonts/Newtown.ttf") format("truetype"); font-display: swap; }

:root {
  --bg: #07080c; --card: #10131b; --card-edge: #232938; --text: #e8eaf0; --muted: #9aa3b5;
  --accent: #f08a2c; --accent-dim: #8a4a14;
  --display: "Rajdhani", system-ui, sans-serif;
  --title: "Newtown", "Rajdhani", system-ui, sans-serif;
  /* The display's corner brackets, as round the wing's icons in the game. */
  --brackets:
    linear-gradient(var(--accent), var(--accent)) top left / 18px 2px,
    linear-gradient(var(--accent), var(--accent)) top left / 2px 18px,
    linear-gradient(var(--accent), var(--accent)) top right / 18px 2px,
    linear-gradient(var(--accent), var(--accent)) top right / 2px 18px,
    linear-gradient(var(--accent), var(--accent)) bottom left / 18px 2px,
    linear-gradient(var(--accent), var(--accent)) bottom left / 2px 18px,
    linear-gradient(var(--accent), var(--accent)) bottom right / 18px 2px,
    linear-gradient(var(--accent), var(--accent)) bottom right / 2px 18px;
  /* A panel with its corners cut, as the game's windows have. */
  --cut: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; color: var(--text); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 9%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 62%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 44%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 88%, #fff4 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 25% 80%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 76%, #fff5 50%, transparent 51%),
    radial-gradient(ellipse at 80% -10%, #3a1d0c 0%, transparent 55%),
    radial-gradient(ellipse at -10% 110%, #101a3a 0%, transparent 50%),
    var(--bg);
  background-attachment: fixed; min-height: 100vh;
}
main { max-width: 1040px; margin: 0 auto; padding: 0 16px 64px; }
a { color: var(--accent); text-underline-offset: 2px; }
nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-family: var(--display); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
nav .brand { color: var(--text); text-decoration: none; font-family: var(--title); font-weight: normal; font-size: 19px; letter-spacing: 0.03em; }
nav .brand span { color: var(--accent); }
nav .links a { color: var(--muted); text-decoration: none; margin-left: 22px; font-size: 15px; }
nav .links a:hover { color: var(--accent); }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding: 40px 0 48px; }
h1 { font-family: var(--title); font-weight: normal; margin: 4px 0 14px; font-size: clamp(44px, 8vw, 76px); line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; }
.lead { font-size: 19px; color: #cfd3dd; margin: 0 0 24px; max-width: 560px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-block; font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; padding: 10px 22px; clip-path: var(--cut);
  background: #141824; color: var(--text); box-shadow: inset 0 0 0 1px var(--card-edge);
}
.button.primary { background: var(--accent); color: #140a02; box-shadow: none; }
.button:hover { filter: brightness(1.12); }
.hero img { width: 100%; height: auto; }
section { margin-top: 56px; }
h2 { font-family: var(--title); font-weight: normal; font-size: 30px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 6px; }
h1 span, h2 span { color: var(--accent); }
.intro { color: var(--muted); margin: 0 0 20px; max-width: 720px; }
.panel { padding: 22px; background: var(--brackets), linear-gradient(180deg, #141824, var(--card)); background-repeat: no-repeat; box-shadow: inset 0 0 0 1px var(--card-edge); }
.builds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.build {
  font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; color: var(--text); padding: 7px 14px; background: #141824; box-shadow: inset 0 0 0 1px var(--card-edge);
  clip-path: var(--cut);
}
.build:hover { color: var(--accent); }
.build.yours { background: var(--accent); color: #140a02; box-shadow: none; }
.build.yours::before { content: "For this computer: "; }
.small { color: var(--muted); font-size: 14px; margin: 12px 0 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.two h3 { font-family: var(--title); font-weight: normal; font-size: 17px; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 6px; color: var(--accent); }
.two p { margin: 0; color: #cfd3dd; }
.two p + p { margin-top: 10px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps .panel { padding: 20px; }
.steps h3 { font-family: var(--title); font-weight: normal; font-size: 17px; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 6px; color: var(--accent); }
.steps p { margin: 0; color: #cfd3dd; }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.timeline .panel { padding: 20px; }
.timeline h3 { font-family: var(--title); font-weight: normal; font-size: 19px; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 6px; }
.timeline p { margin: 0; color: #cfd3dd; }
.when { font-family: var(--display); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-size: 14px; margin-bottom: 4px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.three .panel { padding: 20px; }
.three h3 { font-family: var(--title); font-weight: normal; font-size: 17px; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 6px; color: var(--accent); }
.three p { margin: 0; color: #cfd3dd; }
.story { margin-top: 8px; max-width: 820px; }
.story p { font-size: 18px; color: #d6dae3; margin: 0 0 14px; }
.about { margin: 6px 0 0; color: #cfd3dd; max-width: 820px; }
.status p { margin: 6px 0 0; color: #cfd3dd; max-width: 820px; }
.step { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--accent-dim); margin-bottom: 6px; }
.milestone { margin-bottom: 14px; }
.milestone .label { display: flex; justify-content: space-between; font-family: var(--display); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.milestone .label span:last-child { color: var(--muted); }
.bar { height: 8px; background: #1a1f2c; margin-top: 4px; }
.bar div { height: 100%; background: var(--accent); }
code { background: #1a1f2c; padding: 1px 6px; border-radius: 4px; font-size: 14px; }
footer { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--card-edge); color: var(--muted); font-size: 14px; }
footer p { margin: 0 0 8px; }
@media (max-width: 820px) {
  .hero, .two, .three, .steps, .timeline { grid-template-columns: 1fr; }
  .hero { padding-top: 16px; }
  nav .links a { margin-left: 14px; }
}
@media (max-width: 520px) { nav .links a:not(.keep) { display: none; } }
nav .links a.current { color: var(--accent); }
.page-head { padding: 32px 0 8px; }
/* The war's story, with Captain Foster's words as the manual's command transmission gives them. */
.lore blockquote { margin: 18px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); font-family: var(--title); font-size: 24px; letter-spacing: 0.02em; color: var(--text); }
.lore cite { display: block; margin-top: 6px; font-family: var(--display); font-style: normal; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }