/* Station pages. Colours and fonts match the homepage (dist/home.css). */
:root {
  --ground: #EEF7F2; --panel: #FFFFFF; --deep: #0C3B3A; --deep-soft: #4B6B68; --line: #CFE3DA; --on-deep: #EEF7F2;
  --pop: #FF6B4A; --f-centre-bg: #D3EFEA;
  --l-ns: #D42E12; --l-ew: #009645; --l-ne: #9900AA; --l-cc: #FA9E0D; --l-dt: #005EC4; --l-te: #9D5B25;
  --f-display: "Unbounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --ground: #08201F; --panel: #0F2E2C; --deep: #E6F4EE; --deep-soft: #9DBDB7; --line: #1F4441; --on-deep: #08201F; --pop: #FF8A6E; --f-centre-bg: #11403C; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--deep); font: 16px/1.55 var(--f-body); }
a { color: inherit; }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }
header { background: var(--panel); border-bottom: 1px solid var(--line); }
header .wrap, footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.logo { font: 800 18px/1 var(--f-display); text-decoration: none; }
.logo span { color: var(--pop); }
.all { font-weight: 700; }
main { padding-top: 20px; padding-bottom: 40px; }
.crumbs { font-size: 14px; color: var(--deep-soft); }
h1 { font: 800 clamp(28px, 6vw, 44px)/1.1 var(--f-display); margin: 14px 0 10px; letter-spacing: -0.01em; }
h2 { font: 700 20px/1.3 var(--f-display); margin: 30px 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h3 { font-size: 16px; margin: 16px 0 6px; }
.lead { font-size: 18px; max-width: 40em; }
.btn { display: inline-block; background: var(--pop); color: #fff; font-weight: 700; padding: 12px 18px; border-radius: 999px; text-decoration: none; }
.badge { display: inline-block; font: 700 12px/1 var(--f-body); color: #fff; padding: 4px 6px; border-radius: 5px; margin-right: 6px; }
.badge.ns { background: var(--l-ns); } .badge.ew { background: var(--l-ew); } .badge.ne { background: var(--l-ne); }
.badge.cc { background: var(--l-cc); color: #1d1300; } .badge.dt { background: var(--l-dt); } .badge.te { background: var(--l-te); }
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.list li { display: flex; justify-content: space-between; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.list li span { color: var(--deep-soft); white-space: nowrap; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; text-decoration: none; font-weight: 600; }
.chips a:hover, .btn:hover { outline: 3px solid var(--pop); outline-offset: 1px; }
.note { margin-top: 36px; font-size: 14px; color: var(--deep-soft); max-width: 44em; }
footer { border-top: 1px solid var(--line); font-size: 14px; color: var(--deep-soft); }