/* Metric-matched fallbacks (T-187 F-1): while a web font loads, text sets in a local system face scaled to the
   same average advance and line box, so the swap to Barlow / Lora does not reflow the page (CLS). They are
   local() only: no request, nothing third-party (C-2). Values: Barlow family vs Arial, Lora italic vs Georgia. */
@font-face {
  font-family: "Barlow Fallback";
  font-weight: 400;
  font-style: normal;
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  size-adjust: 96.8%;
  ascent-override: 103.3%;
  descent-override: 20.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow Fallback";
  font-weight: 600;
  font-style: normal;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 92.0%;
  ascent-override: 108.7%;
  descent-override: 21.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow Condensed Fallback";
  font-weight: 500;
  font-style: normal;
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  size-adjust: 76.8%;
  ascent-override: 130.2%;
  descent-override: 26.0%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow Condensed Fallback";
  font-weight: 700;
  font-style: normal;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 74.9%;
  ascent-override: 133.5%;
  descent-override: 26.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Lora Fallback";
  font-weight: 400;
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia-Italic");
  size-adjust: 98.7%;
  ascent-override: 101.9%;
  descent-override: 27.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Lora Fallback";
  font-weight: 600;
  font-style: italic;
  src: local("Georgia Bold Italic"), local("Georgia-BoldItalic");
  size-adjust: 86.2%;
  ascent-override: 116.7%;
  descent-override: 31.8%;
  line-gap-override: 0%;
}

/* Shared stylesheet, the hybrid look (DESIGN.md, owner pick Q-20): a paper window on a graphite stage,
   Barlow Condensed headings, one cobalt accent. Every colour, size and radius comes from tokens.css;
   tests/site/test_style.py fails on a hex that is not a token. No scripts, no external hosts, no shadows.
   Every page links tokens.css first, then this file (the stylesheet pulls in nothing itself, and the site tests ban imports). */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; scrollbar-color: var(--stage-border) var(--stage); }
body {
  margin: 0;
  color: var(--text-on-dark);
  background-color: var(--stage);
  /* Contour texture: frame only (the stage). Closed loops that never touch the tile edge, so it tiles
     seamlessly. Stroke is --stage-contour (#343a3f). Paper windows paint over it. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cdefs%3E%3Cpath id='b' d='M0,-60 C40,-70 80,-30 70,10 C60,50 10,70 -30,55 C-70,40 -80,-10 -55,-40 C-40,-55 -20,-58 0,-60Z'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23343a3f' stroke-width='1.5'%3E%3Cg transform='translate(190 200)'%3E%3Cuse href='%23b' transform='scale(1.6 1.35)' vector-effect='non-scaling-stroke'/%3E%3Cuse href='%23b' transform='translate(6 4) scale(1.28 1.08)' vector-effect='non-scaling-stroke'/%3E%3Cuse href='%23b' transform='translate(10 8) scale(.98 .82)' vector-effect='non-scaling-stroke'/%3E%3Cuse href='%23b' transform='translate(12 10) scale(.7 .58)' vector-effect='non-scaling-stroke'/%3E%3Cuse href='%23b' transform='translate(12 12) scale(.42 .34)' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3Cg transform='translate(450 440)'%3E%3Cuse href='%23b' transform='rotate(40) scale(1.25 1)' vector-effect='non-scaling-stroke'/%3E%3Cuse href='%23b' transform='translate(-4 4) rotate(40) scale(.98 .78)' vector-effect='non-scaling-stroke'/%3E%3Cuse href='%23b' transform='translate(-6 6) rotate(40) scale(.7 .54)' vector-effect='non-scaling-stroke'/%3E%3Cuse href='%23b' transform='translate(-8 8) rotate(40) scale(.42 .3)' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3Cg transform='translate(500 110)'%3E%3Cuse href='%23b' transform='rotate(-30) scale(.75 .6)' vector-effect='non-scaling-stroke'/%3E%3Cuse href='%23b' transform='rotate(-30) scale(.5 .38)' vector-effect='non-scaling-stroke'/%3E%3Cuse href='%23b' transform='rotate(-30) scale(.26 .18)' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 640px 640px;
  font-family: var(--font-text);
  font-size: var(--text-15);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--accent-fill); color: var(--paper); }
img { max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: 62rem; margin: 0 auto; padding: 0 var(--space-4); }
main.wrap { flex: 1; padding-top: var(--space-4); padding-bottom: calc(var(--space-4) * 3); }

/* Links: accent-on-dark on the stage, accent-on-paper on paper. */
a { color: var(--accent-on-dark); text-underline-offset: 0.2em; }
a:hover { color: var(--text-on-dark); }
a:focus-visible { outline: 3px solid var(--accent-on-dark); outline-offset: 3px; border-radius: 4px; }
.window a { color: var(--accent-on-paper); }
.window a:hover { color: var(--ui-text); }
.window a:focus-visible { outline-color: var(--accent-on-paper); }

/* Header and footer sit on the stage with a hairline. */
header { border-bottom: var(--hairline) solid var(--stage-border); }
header .wrap, footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
header .wrap { justify-content: space-between; }
.brand {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-24); line-height: 1;
  text-transform: uppercase; letter-spacing: var(--upper-tracking);
  color: var(--text-on-dark); text-decoration: none;
}
.brand:hover { color: var(--accent-on-dark); }
.brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 22%; }
nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
nav a {
  display: inline-flex; align-items: center; min-height: var(--touch-target);
  font-family: var(--font-display); font-weight: 500; font-size: 18px; text-transform: uppercase;
  letter-spacing: var(--upper-tracking); color: var(--text-on-dark); text-decoration: none;
  border-bottom: 2px solid transparent;
}
nav a:hover { color: var(--accent-on-dark); }
/* Current page: heavier weight and an underline, never colour alone. */
nav a[aria-current="page"] { font-weight: 700; border-bottom-color: var(--accent-on-dark); }
footer { border-top: var(--hairline) solid var(--stage-border); color: var(--text-dim); font-size: var(--text-13); }
footer .wrap { padding-top: var(--space-2); padding-bottom: var(--space-4); justify-content: space-between; }
footer p { margin: 0; }
footer nav a { font-size: 16px; color: var(--text-dim); }
footer nav a:hover { color: var(--text-on-dark); }
footer nav a[aria-current="page"] { color: var(--text-on-dark); }

/* Headings. Display faces: Barlow Condensed, uppercase, tracked. */
h1, h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--upper-tracking); }
h1 { font-weight: 700; font-size: var(--text-30); line-height: 1.05; margin: var(--space-4) 0 var(--space-3); letter-spacing: 0.02em; }
h2 { font-weight: 700; font-size: 26px; line-height: 1.15; margin: 0 0 var(--space-2); }
.window h2 { margin-top: calc(var(--space-4) * 2); padding-top: var(--space-4); border-top: var(--dotted-rule) dotted var(--ink); }
.window h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
p, ul { margin: 0 0 var(--space-3); }
.window > :last-child { margin-bottom: 0; }
li { margin-bottom: var(--space-2); }

/* The paper window: the one place long text lives. Paper ground, UI text, no texture, no shadow. */
.window {
  background: var(--paper); color: var(--ui-text);
  border-radius: var(--radius-window); padding: var(--space-4) var(--space-4) calc(var(--space-4) * 1.5);
  margin: var(--space-4) 0;
}
.window .measure { max-width: 70ch; }
.window.measure { max-width: 46rem; }
.window .lede { font-size: 17px; }
.window .note { color: var(--label-ink); font-size: var(--text-13); }
.window ul { padding-left: 1.25em; }
.window ul.plain { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.window ul.plain li { padding: var(--space-3) 0; margin: 0; border-top: var(--dotted-rule) dotted var(--ink); }
.window ul.plain li:last-child { padding-bottom: 0; }
.window ul.plain li:first-child { border-top: 0; padding-top: 0; }
.window ul.plain strong { font-family: var(--font-display); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: var(--upper-tracking); display: block; color: var(--accent-on-paper); }
.window table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.window th, .window td { border: var(--hairline) solid var(--ink); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }

/* Hero on the stage (home, game page). */
.hero { padding: var(--space-4) 0 var(--space-2); }
.hero h1 { font-size: clamp(var(--text-30), 9vw, var(--text-76)); line-height: 1; margin-top: var(--space-3); }
.hero .lede { max-width: 56ch; font-size: 18px; margin-bottom: var(--space-4); }
.hero .mark { width: 96px; height: 96px; border-radius: 22%; display: block; }
.hero .status {
  display: inline-block; margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3);
  background: var(--stage-tone); border: var(--hairline) solid var(--stage-border); border-radius: var(--radius-control);
  font-family: var(--font-display); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: var(--upper-tracking);
}

/* Pace-note strip, decorative (aria-hidden): driven solid accent, planned paper dots, the car node. */
.strip { display: flex; align-items: center; margin: var(--space-4) 0; height: 16px; }
.strip .driven { flex: 0 0 22%; height: var(--route-driven); background: var(--accent-on-dark); border-radius: 2px; }
.strip .node { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--car-node-ring); }
.strip .planned {
  flex: 1; height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6'%3E%3Ccircle cx='3' cy='3' r='2.3' fill='%23fefffe'/%3E%3C/svg%3E") repeat-x 0 50%;
}

/* Dotted rule on paper: the planned route in accent-on-paper. */
.trail {
  height: 6px; margin: var(--space-4) 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6'%3E%3Ccircle cx='3' cy='3' r='2.3' fill='%232a43a0'/%3E%3C/svg%3E") repeat-x 0 50%;
}

/* Product row inside a window. */
.product { display: flex; gap: var(--space-4); align-items: flex-start; }
.product img { flex: none; border-radius: 22%; }
.product h2 { border: 0; padding: 0; margin: 0 0 var(--space-2); }
.product h2 a { text-decoration: none; }
.grid { display: grid; gap: var(--space-4); }

/* Buttons: accent-fill with a paper label and a 2px accent-on-dark ring (the fill alone fails against graphite). */
.button, .window a.button {
  text-align: center;
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-target);
  padding: 0 var(--space-4); border-radius: var(--radius-control);
  background: var(--accent-fill); color: var(--paper); border: var(--button-ring) solid var(--accent-on-dark);
  font-family: var(--font-display); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: var(--upper-tracking);
  text-decoration: none; transition: border-color 120ms var(--ease-out), background-color 120ms var(--ease-out);
}
.button:hover, .window a.button:hover { color: var(--paper); border-color: var(--text-on-dark); }
.button:active { background: var(--accent-on-paper); }
.button:focus-visible { outline: 3px solid var(--text-on-dark); outline-offset: 3px; }
.window a.button:focus-visible { outline-color: var(--ui-text); }

@media (min-width: 48rem) {
  .wrap { padding: 0 calc(var(--space-4) * 2); }
  .window { padding: calc(var(--space-4) * 2) calc(var(--space-4) * 2.5) calc(var(--space-4) * 2.5); }
  h1 { font-size: 40px; }
  .hero { padding-top: calc(var(--space-4) * 3); }
  .grid.two { grid-template-columns: 3fr 2fr; }
  .grid.two .window { margin: 0; }
}
@media (max-width: 30rem) {
  .product { flex-direction: column; }
  .hero .mark { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}