/* 2 · Timetable — Swiss railway timetables (SBB) and Hans Hilfiker's station clock.
   White paper, black type, one signal red for "now"; times are the biggest thing on the page. */
:root {
  --bg: #FBFAF7; --card: #FFFFFF; --ink: #111111; --soft: #5E5E5B;
  --rule: rgba(0,0,0,.13); --rule-strong: rgba(0,0,0,.7);
  --accent: #D52B1E; --accent-ink: #B5231A; --accent-wash: rgba(213,43,30,.06); --now: #D52B1E;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif; --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --h1: clamp(40px, 8vw, 72px); --h1-weight: 700; --h1-case: none; --h1-track: -.015em;
  --header-pos: sticky; --day-tabs-top: 104px;
  --map-water: #D9E4EA; --map-marsh: #EFEBDD; --map-tree: #6E7F75;
}
@media (min-width: 760px) { :root { --day-tabs-top: 76px; } }
body { font-stretch: 100%; }
.big, .h-sec, .card-title, .r-title, .sheet-title, .mine-what, .big-fact { font-stretch: 82%; }
.brand-main { font-size: 21px; font-weight: 800; font-stretch: 85%; letter-spacing: -.01em; }
.brand-main i { color: var(--accent); }
.top { border-bottom: 2px solid var(--ink); padding-bottom: 0; }
@media (min-width: 760px) { .top { padding-bottom: 12px; } }
.tabs { border-bottom: 0; }
.tabs a { font-weight: 600; color: var(--ink); opacity: .55; }
.tabs a[aria-current] { opacity: 1; border-bottom-color: var(--accent); }
.r-time { font-weight: 700; color: var(--ink); font-size: 16px; font-stretch: 85%; }
@container (min-width: 381px) { .row a { grid-template-columns: 112px 1fr; } }
@container (min-width: 680px) { .row a { grid-template-columns: 170px 1fr 220px; } .r-time { font-size: 18px; } }
.r-title { font-size: 18px; font-weight: 600; }
.row.running a { background: none; box-shadow: inset 4px 0 var(--accent); }
.row.running .r-time { color: var(--accent); }
.row.yours .r-title::after { border-radius: 0; background: var(--ink); }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 4px 0 18px; }
.clock { width: 116px; height: 116px; flex: none; }
@media (min-width: 760px) { .clock { width: 168px; height: 168px; } }
.clock .rim { fill: #fff; stroke: var(--ink); stroke-width: 1.4; }
.clock .ticks line { stroke: var(--ink); }
.clock .hand-h { stroke: var(--ink); stroke-width: 6; }
.clock .hand-m { stroke: var(--ink); stroke-width: 4.2; }
.clock .hand-s line { stroke: var(--accent); stroke-width: 1.6; } .clock .hand-s circle { fill: var(--accent); }
.clock .pin { fill: var(--ink); }
.dep { font-size: 16px; }
.dep .t { font-size: 21px; font-stretch: 82%; }
.dep th { border-bottom-width: 2px; }
.dep tr.running .t { color: var(--accent); }
.card { border: 0; border-top: 2px solid var(--ink); background: transparent; padding: 10px 0 14px; }
.card-label { color: var(--ink); }
.ann { border-left: 0; border-top: 2px solid var(--accent); padding: 8px 0 0; }
.ann-item.new .ann-when { color: var(--accent); }
.face, .face.l, .face.xl, .face.xxl, .pc .face { border-radius: 0; }
.pc a { justify-items: start; text-align: left; }
.pc .face { width: 100%; height: auto; aspect-ratio: 1; }
.people { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.facts { border-top: 2px solid var(--ink); }
.btn { background: var(--ink); color: #fff; }
.g-ev { border-left-color: var(--ink); }
.g-ev.running { border-left-color: var(--accent); }
.h-sec { font-size: 26px; }
.pick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.topics li.on .tp b { color: var(--ink); }
.r-one { color: var(--ink); }
@media (max-width: 560px) { .board-head:has(.board-lead) .clock { width: 78px; height: 78px; } .board-lead .big { font-size: 38px; } }