/* ===========================================================================
   Railyard Games — one stylesheet for the whole site.

   The design is not invented here. Every colour is lifted from the game's own
   palette (docs/design/DESIGN-SPEC.md §2), and the furniture — dot-grid paper,
   navy signage, brass roundels, dashed lane guides, split-flap boards — is the
   furniture the game already uses. The site should look like the thing it sells.

   No build step and no framework. The only outside request is the webfont, and
   the stack degrades to system faces if it never arrives.
   =========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  /* The game's palette, verbatim. */
  --navy:       #1e2333;
  --navy-soft:  #2c3346;
  --cream:      #efebe3;
  --ivory:      #ece7dc;
  --plate:      #dcd5c5;
  --plate-edge: #bcb39e;
  --siding:     #ebe5d6;
  --dash:       #b5ab92;
  --stone:      #a79c84;
  --accent:     #f2415c;
  --muted:      #7e88a0;
  --brass:      #d9a544;
  --brass-lt:   #f0c877;
  --brass-dk:   #a87508;

  /* Liveries. Used as section keys and card rules, in the game's own order. */
  --green:      #2e7d68;
  --green-dk:   #1d5344;
  --orange:     #de6433;
  --crimson:    #b32840;
  --yellow:     #e6a820;
  --slate:      #4d6b82;
  --purple:     #5f3882;
  --wood:       #996030;

  /* Semantic, so dark mode is a remap rather than a rewrite. */
  --paper:      var(--cream);
  --paper-2:    var(--siding);
  --panel:      #f6f3ec;
  --ink:        var(--navy);
  --ink-soft:   #5a6376;
  --ink-faint:  #8d8571;
  --edge:       var(--plate-edge);
  --edge-soft:  #d9d2c2;
  --dotted:     rgba(124, 114, 92, .28);
  --link:       #b4502a;
  --link-hover: #8a3a1b;

  --maxw: 70rem;
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --shadow: 0 1px 2px rgba(30, 35, 51, .06), 0 12px 32px rgba(30, 35, 51, .09);

  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Night yard. Same furniture, lights off. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #141a28;
    --paper-2:   #1a2130;
    --panel:     #1c2434;
    --ink:       var(--ivory);
    --ink-soft:  #a8b0c2;
    --ink-faint: #78819a;
    --edge:      #2f3950;
    --edge-soft: #273044;
    --dotted:    rgba(236, 231, 220, .10);
    --link:      var(--brass-lt);
    --link-hover: var(--brass);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 36px rgba(0, 0, 0, .45);
  }
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--paper);
  /* The journey screen's dot grid, at web scale. */
  background-image: radial-gradient(var(--dotted) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: -11px -11px;
  color: var(--ink);
  font: 400 16.5px/1.68 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.wrap-narrow { max-width: 47rem; margin: 0 auto; padding: 0 1.5rem; }

/* -------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.021em;
  line-height: 1.08;
  margin: 0 0 .6rem;
  color: var(--ink);
}

h1 { font-size: clamp(2.4rem, 6.4vw, 4.1rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); margin-top: 0; }
h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.012em; }

p, ul, ol { margin: 0 0 1.1rem; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: .45rem; }

a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }

strong { font-weight: 650; color: var(--ink); }

/* Station signage: the small letterspaced caps the game uses above every
   heading ("MARSHALLING YARD" over "SIDING 04"). */
.sign {
  font-family: var(--display);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .7rem;
  display: block;
}

.sign-brass { color: var(--brass-dk); }

@media (prefers-color-scheme: dark) { .sign-brass { color: var(--brass); } }

.lede {
  font-size: clamp(1.1rem, 2vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 40ch;
}

/* ------------------------------------------------------------------ header */

header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--edge-soft);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .01em;
}

.brand svg { width: 2.1rem; height: 2.1rem; flex: none; }

nav.site { display: flex; gap: 1.5rem; flex-wrap: wrap; }

nav.site a {
  font-family: var(--display);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: .2rem 0;
  border-bottom: 2px solid transparent;
}

nav.site a:hover { color: var(--ink); }
nav.site a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* -------------------------------------------------------------------- rail */

/* Two rails and a run of sleepers, drawn in CSS so it costs no request. */
.rails {
  height: 14px;
  background:
    linear-gradient(var(--edge), var(--edge)) 0 3px / 100% 2px repeat-x,
    linear-gradient(var(--edge), var(--edge)) 0 9px / 100% 2px repeat-x,
    repeating-linear-gradient(90deg,
      var(--edge) 0 3px, transparent 3px 17px) 0 0 / auto 14px;
  opacity: .75;
}

/* -------------------------------------------------------------------- hero */

.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 0; overflow: hidden; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero h1 { margin-bottom: 1.1rem; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.9rem;
}

@media (max-width: 60rem) {
  /* Text first on a phone: the headline is the point, and a full device shot
     is tall enough to push it off the screen entirely. */
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-art .phone { max-width: 230px; }
}

/* ------------------------------------------------------------------ phones */

/* A device frame drawn in CSS. The screenshots are real 1179x2556 renders, so
   the frame only has to be the right shape around them. */
.phone {
  position: relative;
  background: var(--navy);
  border-radius: 2.6rem;
  padding: .52rem;
  box-shadow: var(--shadow);
  max-width: 310px;
  margin: 0 auto;
  line-height: 0;
}

.phone::before {
  content: "";
  position: absolute;
  top: .95rem; left: 50%;
  transform: translateX(-50%);
  width: 32%; height: .62rem;
  background: #0b0f1a;
  border-radius: 999px;
  z-index: 2;
}

.phone img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2.1rem;
}

.phone-tilt { transform: rotate(-2.2deg); }
.phone-tilt-r { transform: rotate(2deg); }

.phone-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

.phone-pair .phone { max-width: 100%; }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
  text-decoration: none;
  padding: .82rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform .12s ease, background-color .12s ease;
}

.btn:active { transform: translateY(1px); }

.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dk); color: #fff; }

.btn-brass { background: var(--brass); color: var(--navy); }
.btn-brass:hover { background: var(--brass-lt); color: var(--navy); }

.btn-ghost { border-color: var(--edge); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* Store badges, as plates rather than borrowed logos. */
.badges { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.badges li { margin: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: var(--navy);
  color: var(--ivory);
  border-radius: 14px;
  padding: .62rem 1.15rem;
  text-decoration: none;
  line-height: 1.2;
  border: 2px solid var(--navy);
}

.badge:hover { background: var(--navy-soft); color: var(--ivory); }

.badge svg { width: 1.5rem; height: 1.5rem; flex: none; }

.badge span { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.badge strong { display: block; font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--ivory); }

.badge[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* -------------------------------------------------------------- departures */

/* The games list as a departure board — the same split-flap the game's daily
   yard screen uses. Each game is a service, and the destination is the pitch. */
.board {
  background: var(--navy);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  box-shadow: var(--shadow);
}

.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .2rem .6rem 1rem;
  border-bottom: 2px solid var(--navy-soft);
  flex-wrap: wrap;
}

.board-head .sign { color: var(--brass); margin: 0; }
.board-head .clock { font-family: var(--mono); font-size: .8rem; color: var(--muted); letter-spacing: .08em; }

.departure {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.15rem .6rem;
  border-bottom: 1px solid var(--navy-soft);
  text-decoration: none;
  color: var(--ivory);
}

.departure:last-child { border-bottom: 0; }
.departure:hover { background: rgba(255, 255, 255, .035); color: var(--ivory); }

.flap {
  font-family: var(--mono);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--brass-lt);
  background: #11151f;
  border: 1px solid #000;
  border-radius: 6px;
  padding: .42rem .3rem;
  text-align: center;
  /* The seam across the middle of a real flap. */
  background-image: linear-gradient(transparent 49%, rgba(0, 0, 0, .55) 49%, rgba(0, 0, 0, .55) 51%, transparent 51%);
}

.departure h3 { color: var(--ivory); margin: 0 0 .2rem; font-size: 1.3rem; }
.departure p { color: var(--muted); margin: 0; font-size: .94rem; line-height: 1.45; }

.status {
  font-family: var(--display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .34rem .75rem;
  border-radius: 999px;
  white-space: nowrap;
}

.status-soon { background: rgba(217, 165, 68, .16); color: var(--brass-lt); }
.status-live { background: rgba(46, 125, 104, .22); color: #6ed3ae; }

@media (max-width: 44rem) {
  .departure { grid-template-columns: 4.2rem minmax(0, 1fr); row-gap: .7rem; align-items: start; }
  .departure .flap { margin-top: .2rem; }
  .departure .status { grid-column: 2; justify-self: start; }

  /* Two rows of chrome stuck to the top of a phone screen is most of the
     viewport gone before the page starts. Let it scroll away. */
  header.site { position: static; }
}

@media (prefers-color-scheme: dark) {
  .board { border: 1px solid var(--edge); }
  .badge { border-color: var(--edge); }
}

/* ----------------------------------------------------------------- panels */

section.band { padding: clamp(3.4rem, 7vw, 5.5rem) 0; }

section.band-paper { background: var(--paper-2); border-top: 1px solid var(--edge-soft); border-bottom: 1px solid var(--edge-soft); }

section.band-navy {
  background: var(--navy);
  color: var(--ivory);
  border: 0;
}

section.band-navy h2, section.band-navy h3 { color: var(--ivory); }
section.band-navy p { color: #aab2c4; }
section.band-navy .sign { color: var(--brass); }

.band-head { max-width: 42rem; margin-bottom: 2.6rem; }
.band-head p { color: var(--ink-soft); font-size: 1.06rem; margin: 0; }

/* ------------------------------------------------------------------- cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.card {
  background: var(--panel);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r);
  padding: 1.5rem 1.4rem 1.6rem;
  margin: 0;
  position: relative;
  overflow: hidden;
}

/* A livery stripe along the top, the way a car carries its colour. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--livery, var(--brass));
}

.card h3 { margin-bottom: .45rem; }
.card p { color: var(--ink-soft); margin: 0; font-size: .97rem; }

.card-num {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .1em;
  color: var(--ink-faint);
  display: block;
  margin-bottom: .9rem;
}

/* --------------------------------------------------------------- showcase */

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(2.2rem, 5vw, 3.6rem) 0;
}

.showcase + .showcase { border-top: 1px solid var(--edge-soft); }

.showcase.flip .showcase-art { order: 2; }

.showcase h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.showcase p { color: var(--ink-soft); }

@media (max-width: 58rem) {
  .showcase { grid-template-columns: 1fr; }
  .showcase.flip .showcase-art { order: 0; }
}

/* ------------------------------------------------------------------ ticket */

/* The clear-screen ticket, as a pull-quote. Notches cut with gradients. */
.ticket {
  background: var(--siding);
  border: 2px dashed var(--dash);
  border-radius: var(--r);
  padding: 1.6rem 1.8rem;
  position: relative;
  color: var(--navy);
}

@media (prefers-color-scheme: dark) {
  .ticket { background: var(--navy-soft); border-color: #44506b; color: var(--ivory); }
}

.ticket p:last-child { margin-bottom: 0; }

.ticket .sign { color: var(--brass-dk); }

@media (prefers-color-scheme: dark) { .ticket .sign { color: var(--brass); } }

/* ------------------------------------------------------------------- prose */

.prose { max-width: 44rem; }
.prose h2 { margin-top: 3rem; font-size: 1.55rem; }
.prose h3 { margin-top: 2rem; }
.prose h2:first-of-type { margin-top: 1.5rem; }

.prose .updated { color: var(--ink-faint); font-size: .92rem; margin-bottom: 2.4rem; font-family: var(--mono); }

/* The page title plate for notices — privacy, terms, support. */
.plate {
  background: var(--navy);
  color: var(--ivory);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.2rem) clamp(1.5rem, 4vw, 2.8rem);
  margin: clamp(2rem, 5vw, 3rem) 0 2.6rem;
  border: 3px solid var(--brass);
  box-shadow: var(--shadow);
}

.plate h1 { color: var(--ivory); margin-bottom: .5rem; }
.plate .sign { color: var(--brass); }
.plate p { color: #aab2c4; margin: 0; max-width: 46ch; }

.toc {
  border: 1px solid var(--edge);
  border-left: 4px solid var(--brass);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--panel);
  padding: 1.3rem 1.6rem .9rem;
  margin-bottom: 2.8rem;
}

.toc .sign { margin-bottom: .6rem; }
.toc ol { margin: 0; columns: 2; column-gap: 2rem; }
.toc li { break-inside: avoid; }

@media (max-width: 36rem) { .toc ol { columns: 1; } }

.data {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6rem;
  font-size: .94rem;
  display: block;
  overflow-x: auto;
}

.data th, .data td { border: 1px solid var(--edge); padding: .7rem .85rem; text-align: left; vertical-align: top; }
.data th { background: var(--panel); font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; }

.note {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.15rem 1.4rem;
  margin: 0 0 1.6rem;
}

.note p:last-child { margin-bottom: 0; }

code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--panel);
  border: 1px solid var(--edge-soft);
  border-radius: 5px;
  padding: .1em .38em;
}

/* ------------------------------------------------------------------ footer */

footer.site {
  background: var(--navy);
  color: #9aa3b6;
  padding: 3.2rem 0 2.6rem;
  font-size: .93rem;
}

footer.site a { color: var(--ivory); text-decoration: none; }
footer.site a:hover { color: var(--brass); }

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--navy-soft);
  margin-bottom: 1.6rem;
}

.foot-grid .brand { color: var(--ivory); }
.foot-grid p { color: #7c8699; margin: .9rem 0 0; max-width: 32ch; font-size: .9rem; }

.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: .55rem; }
.foot-grid .sign { color: var(--brass); }

.foot-base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: #6d7788; font-size: .84rem; }

@media (max-width: 48rem) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------- misc */

.center { text-align: center; }
.mt-0 { margin-top: 0; }

.inline-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.inline-list li { margin: 0; }

.fact {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: .6rem 1.2rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--edge-soft);
  align-items: baseline;
}

.fact dt { font-family: var(--display); font-weight: 700; font-size: .76rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); }
.fact dd { margin: 0; }

@media (max-width: 36rem) { .fact { grid-template-columns: 1fr; gap: .15rem; } }