@font-face { font-family: "Big Shoulders"; font-weight: 800; font-display: swap; src: url(fonts/BigShoulders-800.woff2) format("woff2"); }
@font-face { font-family: Overpass; font-weight: 400; font-display: swap; src: url(fonts/Overpass-400.woff2) format("woff2"); }
@font-face { font-family: "Overpass Mono"; font-weight: 400; font-display: swap; src: url(fonts/OverpassMono-400.woff2) format("woff2"); }

* { box-sizing: border-box; }
html { background: var(--color-bg-canvas); color: var(--color-text-primary); font-family: var(--font-family-sans); line-height: 1.55; }
body { margin: 0; }
a { color: var(--color-accent-text); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
code, pre { font-family: var(--font-family-mono); }
code { font-size: 0.92em; }

.top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border-subtle); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-primary); text-decoration: none; font-weight: var(--font-weight-semibold); }
.top nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.top nav a { color: var(--color-text-secondary); text-decoration: none; }
.top nav a:hover { color: var(--color-text-primary); }

main { max-width: 960px; margin: 0 auto; padding: 0 var(--space-6); }
section { padding: var(--space-12) 0; border-bottom: 1px solid var(--color-border-subtle); }
section:last-child { border-bottom: 0; }
h1, h2 { font-family: var(--font-family-display); font-weight: var(--font-weight-heavy); line-height: 1.05; letter-spacing: 0.01em; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin: var(--space-4) 0; }
h2 { font-size: 2rem; margin: 0 0 var(--space-6); }
h3 { font-size: 1.05rem; margin: 0 0 var(--space-1); }
p { margin: 0 0 var(--space-3); color: var(--color-text-secondary); }

.plate { display: inline-block; margin: 0; padding: var(--space-1) var(--space-3); background: var(--color-plate-fill); color: var(--color-plate-on); border: 1px solid var(--color-plate-keyline); border-radius: var(--radius-sm); font-family: var(--font-family-display); font-weight: var(--font-weight-heavy); text-transform: uppercase; letter-spacing: 0.06em; }
.lede { font-size: 1.15rem; max-width: 46rem; }
.actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.btn { display: inline-block; padding: var(--space-2) var(--space-5); border: 1px solid var(--color-border-control); border-radius: var(--radius-md); color: var(--color-text-primary); text-decoration: none; font-weight: var(--font-weight-semibold); }
.btn.primary { background: var(--color-accent-fill); color: var(--color-accent-on-fill); border-color: var(--color-accent-fill); }

.dim .bar { position: relative; height: 12px; border-left: 2px solid var(--color-chart-axis); border-right: 2px solid var(--color-chart-axis); margin-bottom: var(--space-3); }
.dim .bar::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; border-top: 1px dashed var(--color-chart-previous); }
.dim .fill { position: absolute; left: 0; top: 2px; height: 8px; background: var(--color-accent-fill); }
.note { font-size: 0.85rem; color: var(--color-text-tertiary); }

.route { list-style: none; margin: 0; padding: 0; position: relative; }
.route::before { content: ""; position: absolute; left: 9px; top: 24px; bottom: 40px; width: 3px; background: var(--color-route-line); }
.route li { display: flex; gap: var(--space-5); padding: var(--space-3) 0; position: relative; }
.station { flex: none; width: 21px; height: 21px; margin-top: 2px; border-radius: var(--radius-full); background: var(--color-bg-canvas); border: 3px solid var(--color-route-station); z-index: 1; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--space-4); }
.grid article { padding: var(--space-5); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); }
pre { background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; color: var(--color-text-primary); }

footer { max-width: 960px; margin: 0 auto; padding: var(--space-8) var(--space-6); }
footer p { font-size: 0.9rem; color: var(--color-text-tertiary); }

h1, h2, p, li { overflow-wrap: break-word; }
@media (max-width: 600px) { .top { padding: var(--space-3) var(--space-4); } .top nav { gap: var(--space-3); font-size: 0.9rem; } main { padding: 0 var(--space-4); } section { padding: var(--space-8) 0; } }