/* Landing composition. Shared typography, colours and primitives live in
   style.css. This file gives the homepage its illustrated editorial rhythm. */

:root {
    --landing-cream: var(--bg);
    --landing-green: var(--accent);
    --landing-blue: var(--sig-alt);
    --landing-orange: var(--sig-late);
    --landing-green-soft: var(--green-soft);
    --landing-blue-soft: var(--blue-soft);
    --landing-orange-soft: var(--orange-soft);
}

main { position: relative; }
.wrap { min-width: 0; }

.hero-home {
    padding: clamp(64px, 7vw, 76px) 0 clamp(52px, 6vw, 64px);
    background: var(--landing-cream);
}
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr);
    gap: clamp(34px, 7vw, 104px);
    align-items: center;
}
.hero-copy { min-width: 0; }
.eyebrow {
    margin: 0 0 12px;
    color: var(--landing-green);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.35;
    text-transform: uppercase;
}
.hero-copy h1 {
    max-width: 15ch;
    margin: 0 0 22px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(44px, 6vw, 76px);
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: .98;
    text-wrap: balance;
}
.hero-lead {
    max-width: 57ch;
    margin: 0;
    color: var(--ink-soft);
    font-size: clamp(17px, 1.3vw, 21px);
    line-height: 1.55;
    text-wrap: pretty;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 30px 0 22px;
}
.button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 10px 18px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
    transition: transform 140ms ease;
}
.button:hover { text-decoration: none; transform: translateY(-1px); }
.button.primary {
    background: var(--landing-green);
    color: var(--bg);
}
.button.primary:hover { background: var(--ink); color: var(--bg); }
.button.secondary {
    border-color: var(--rule-strong);
    color: var(--ink);
}
.button.secondary:hover { border-color: var(--landing-green); color: var(--landing-green); }
.hero-note {
    display: flex;
    max-width: 50ch;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.5;
}
.dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; }
.dot-green { background: var(--landing-green); }

.hero-visual { min-width: 0; }
.hero-illustration {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.hero-sky { fill: var(--landing-blue-soft); }
.hero-sun { fill: var(--landing-orange); opacity: .86; }
.hero-cloud { fill: var(--surface); opacity: .72; }
.hero-track-back, .hero-track-front {
    fill: none;
    stroke: var(--landing-green);
    stroke-linecap: round;
}
.hero-track-back { stroke-width: 19; opacity: .22; }
.hero-track-front { stroke-width: 7; }
.hero-sleeper { fill: none; stroke: var(--landing-orange); stroke-linecap: round; stroke-width: 4; opacity: .72; }
.board-shadow { fill: var(--landing-green); opacity: .17; }
.board-body { fill: var(--surface); stroke: var(--landing-green); stroke-width: 3; }
.board-top, .board-top-fill { fill: var(--landing-green); }
.board-label { fill: var(--bg); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.board-small { fill: var(--ink-soft); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.board-station { fill: var(--ink-soft); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
.board-time { fill: var(--ink); font-family: var(--serif); font-size: 28px; font-weight: 700; }
.board-delay { fill: var(--landing-orange); font-family: var(--mono); font-size: 16px; font-weight: 600; }
.train-shadow { fill: var(--ink); opacity: .2; }
.train-body { fill: var(--landing-green); }
.train-nose { fill: var(--landing-green); }
.train-window { fill: var(--landing-blue-soft); }
.train-stripe { fill: var(--landing-orange); }
.train-wheel { fill: var(--ink); }
.train-wheel-inner { fill: var(--surface); }
.train-light { fill: none; stroke: var(--landing-orange); stroke-linecap: round; stroke-width: 4; }
.signal-post { fill: var(--ink-soft); }
.signal-box { fill: var(--ink); }
.signal-dot--green { fill: var(--landing-green); }
.signal-dot--orange { fill: var(--landing-orange); }
.fiction-label {
    margin: 12px 0 0;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 11px;
    text-align: right;
}
.fiction-label span { color: var(--landing-orange); }

.story-section {
    padding: clamp(64px, 9vw, 126px) 0 clamp(72px, 10vw, 142px);
    background: var(--surface);
    border-top: 1px solid var(--rule);
}
.section-intro { max-width: 70ch; }
.section-intro h2 {
    margin: 0 0 14px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(34px, 4.6vw, 62px);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.04;
    text-wrap: balance;
}
.section-intro > p:not(.eyebrow) {
    max-width: 64ch;
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.65;
    text-wrap: pretty;
}
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 7px 11px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}
.badge-orange { margin-top: 20px; background: var(--landing-orange-soft); color: var(--landing-orange); }

.story { margin-top: clamp(40px, 6vw, 74px); }
.story-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule);
}
.story-step-link {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    min-width: 0;
    align-items: baseline;
    padding: 15px 16px 14px 0;
    color: var(--ink);
    text-decoration: none;
}
.story-step-link + .story-step-link { border-left: 1px solid var(--rule); padding-left: 16px; }
.story-step-link:hover { color: var(--landing-green); }
.story-step-link[aria-current="step"] { color: var(--landing-green); }
.story-step-no { grid-row: span 2; color: var(--landing-green); font-family: var(--mono); font-size: 11px; }
.story-step-name { min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.story-step-value { min-width: 0; color: var(--ink-soft); font-family: var(--mono); font-size: 11px; overflow-wrap: anywhere; }
.story-panels { min-width: 0; }
.story-panel {
    display: grid;
    grid-template-columns: minmax(46px, 8%) minmax(0, 1fr) minmax(175px, 24%);
    gap: clamp(16px, 3vw, 40px);
    align-items: start;
    padding: clamp(28px, 5vw, 62px) 0;
    border-bottom: 1px solid var(--rule);
    border-left: 5px solid var(--story-color, var(--landing-green));
}
.story-panel--plan { --story-color: var(--landing-green); }
.story-panel--notice { --story-color: var(--landing-blue); }
.story-panel--late { --story-color: var(--landing-orange); }
.story-panel--history { --story-color: var(--landing-green); }
.story-panel-number { padding-left: 12px; color: var(--story-color); font-family: var(--serif); font-size: clamp(28px, 4vw, 48px); line-height: 1; }
.story-panel-copy { min-width: 0; }
.story-label { margin: 0 0 7px; color: var(--story-color); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.story-panel h3 { margin: 0 0 12px; color: var(--ink); font-family: var(--serif); font-size: clamp(24px, 3vw, 38px); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
.story-panel-copy > p:not(.story-label):not(.fiction-note) { max-width: 52ch; margin: 0; color: var(--ink-soft); text-wrap: pretty; }
.fiction-note { margin: 20px 0 0; color: var(--story-color); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.story-facts { display: grid; gap: 14px; margin: 0; }
.story-facts div { padding-top: 8px; border-top: 1px solid var(--rule); }
.story-facts dt { color: var(--ink-soft); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.story-facts dd { margin: 2px 0 0; color: var(--ink); font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.story-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 22px; }
.story-controls .text-button { padding-left: 0; color: var(--ink-soft); }
.story-controls .text-button:hover { color: var(--landing-green); }
.story-status { margin: 0; color: var(--ink-soft); font-family: var(--mono); font-size: 11px; text-align: center; }
.story-disclaimer { margin: 24px 0 0; color: var(--ink-soft); font-size: 13px; text-wrap: pretty; }

/* JavaScript progressively enhances the server-rendered stack into one panel. */
.story.story--enhanced .story-panel:not(.is-active) { display: none; }
.story.story--enhanced .story-panel.is-active { animation: story-in 180ms ease-out both; }
@keyframes story-in { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.section-block { padding: clamp(72px, 10vw, 144px) 0; }
.research-section { background: var(--landing-cream); }
.concept-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(40px, 6vw, 72px); background: var(--rule); border: 1px solid var(--rule); }
.concept { min-width: 0; padding: clamp(22px, 3vw, 34px); background: var(--surface); border-top: 5px solid var(--concept-color); }
.concept-green { --concept-color: var(--landing-green); }
.concept-blue { --concept-color: var(--landing-blue); }
.concept-orange { --concept-color: var(--landing-orange); }
.concept-number { color: var(--concept-color); font-family: var(--mono); font-size: 11px; }
.concept h3 { margin: 34px 0 8px; color: var(--ink); font-family: var(--serif); font-size: clamp(21px, 2vw, 28px); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.concept p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.search-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 72px); align-items: end; margin-top: clamp(38px, 6vw, 72px); padding: clamp(24px, 4vw, 40px); background: var(--landing-green-soft); }
.search-panel h3 { margin: 0 0 6px; color: var(--ink); font-family: var(--serif); font-size: clamp(23px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.search-panel p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-size: 14px; text-wrap: pretty; }
.station-search label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 600; }
.search-row { display: flex; gap: 10px; align-items: stretch; }
.search-row input { min-width: 0; flex: 1; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface); color: var(--ink); padding: 11px 15px; font: inherit; }
.search-row input::placeholder { color: var(--ink-soft); opacity: .85; }
.search-row input:focus-visible { border-color: var(--landing-green); outline: 2px solid var(--landing-green); outline-offset: 2px; }

.data-section { background: var(--surface); border-top: 1px solid var(--rule); }
.data-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; max-width: none; }
.data-heading .freshness { margin: 0 0 5px; text-align: right; }
.data-stand { margin: 18px 0 0; color: var(--ink-soft); font-family: var(--mono); font-size: 11px; }
.data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin-top: clamp(38px, 6vw, 72px); }
.data-card, .radar-card { min-width: 0; border-top: 4px solid var(--landing-green); background: var(--landing-cream); padding: clamp(20px, 3vw, 30px); }
.data-card:nth-child(2) { border-top-color: var(--landing-blue); }
.data-card-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; min-width: 0; }
.data-card-head > div { min-width: 0; }
.data-card-head h3 { margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(22px, 2.5vw, 31px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.data-value { display: grid; flex: 0 0 auto; text-align: right; }
.data-value strong { color: var(--landing-green); font-family: var(--serif); font-size: clamp(22px, 3vw, 34px); font-variant-numeric: tabular-nums; line-height: 1; }
.data-value small { color: var(--ink-soft); font-family: var(--mono); font-size: 10px; }
.chart-frame { min-width: 0; margin-top: 28px; overflow-x: auto; }
.chart-frame .chart { display: block; min-width: 490px; width: 100%; height: auto; }
.chart-frame .chart text { fill: var(--ink-soft); font-family: var(--mono); }
.chart-frame .chart .grid { stroke: var(--rule); }
.chart-frame .chart .bar--vol { fill: var(--landing-blue); opacity: .34; }
.chart-frame .chart .bar--late { fill: var(--landing-orange); opacity: .76; }
.chart-frame .chart .bar--empty { fill: var(--rule); opacity: .45; }
.chart-frame .chart .bar--cancel, .chart-frame .chart .bar--hi { fill: var(--landing-orange); }
.chart-frame .chart .line, .chart-frame .chart .dot { stroke: var(--landing-green); fill: var(--landing-green); }
.chart-frame .chart .line { fill: none; }
.data-caption { margin: 17px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.data-details { margin-top: 22px; border-top: 1px solid var(--rule); }
.data-details summary { cursor: pointer; padding: 13px 0 0; color: var(--landing-green); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.data-details summary:hover { color: var(--ink); }
.data-table, .plain-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.data-table caption, .plain-table caption { margin-bottom: 8px; color: var(--ink-soft); font-family: var(--mono); font-size: 11px; text-align: left; }
.data-table th, .data-table td, .plain-table th, .plain-table td { padding: 8px 7px 8px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.data-table th, .plain-table th { color: var(--ink); font-weight: 600; }
.data-table td.num, .data-table th.num { color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.data-table tbody tr:last-child td, .plain-table tbody tr:last-child td, .plain-table tbody tr:last-child th { border-bottom: 0; }
.radar-card { margin-top: clamp(20px, 3vw, 36px); border-top-color: var(--landing-orange); }
.radar-date { min-width: 0; max-width: 24ch; flex: 0 1 24ch; color: var(--ink-soft); font-family: var(--mono); font-size: 11px; overflow-wrap: anywhere; text-align: right; }
.radar-video { display: block; width: 100%; height: auto; margin-top: 26px; background: var(--code-bg); }
.radar-preview { display: block; width: 100%; height: auto; margin-top: 26px; }
.radar-unavailable { margin-top: 26px; padding: 24px; border: 1px dashed var(--rule-strong); color: var(--ink-soft); font-size: 14px; }

.model-section { background: var(--landing-cream); border-top: 1px solid var(--rule); }
.narrow-wrap { max-width: 920px; }
.metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: clamp(34px, 5vw, 58px) 0 34px; }
.metric-card { min-width: 0; padding: 20px; border-top: 4px solid var(--metric-color); background: var(--surface); }
.metric-card-green { --metric-color: var(--landing-green); }
.metric-card-blue { --metric-color: var(--landing-blue); }
.metric-card-orange { --metric-color: var(--landing-orange); }
.metric-card strong { display: block; color: var(--metric-color); font-family: var(--serif); font-size: clamp(25px, 3vw, 38px); font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1; overflow-wrap: anywhere; }
.metric-card span { display: block; margin-top: 8px; color: var(--ink-soft); font-family: var(--mono); font-size: 11px; line-height: 1.45; }
.plain-table th { width: 31%; }
.method-note { max-width: 68ch; margin: 26px 0 0; color: var(--ink-soft); font-size: 14px; text-wrap: pretty; }
.method-note a { color: var(--landing-green); }
.source-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 0; font-family: var(--mono); font-size: 12px; }
.source-links a { overflow-wrap: anywhere; }

.about-section { background: var(--surface); border-top: 1px solid var(--rule); }
.about-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(26px, 7vw, 100px); }
.about-grid p:not(.eyebrow) { max-width: 64ch; color: var(--ink-soft); text-wrap: pretty; }

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr); gap: 32px; }
    .hero-copy h1 { font-size: clamp(42px, 7vw, 70px); }
    .story-panel { grid-template-columns: 48px minmax(0, 1fr); }
    .story-facts { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .search-panel { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 700px) {
    .hero-grid, .data-grid, .concept-grid, .about-grid { grid-template-columns: 1fr; }
    .hero-visual { max-width: 600px; }
    .hero-copy h1 { max-width: 13ch; }
    .story-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .story-step-link { padding-right: 10px; }
    .story-step-link + .story-step-link { border-left: 0; padding-left: 0; }
    .story-step-link:nth-child(n + 3) { border-top: 1px solid var(--rule); }
    .story-step-link:nth-child(even) { border-left: 1px solid var(--rule); padding-left: 10px; }
    .data-heading { display: block; }
    .data-heading .freshness { margin-top: 22px; text-align: left; }
    .radar-date { max-width: 18ch; }
}
@media (max-width: 520px) {
    .hero-home { padding-top: 52px; }
    .hero-copy h1 { font-size: clamp(40px, 13vw, 62px); }
    .hero-actions, .search-row { align-items: stretch; flex-direction: column; }
    .hero-actions .button, .search-row .button { width: 100%; }
    .button { width: auto; }
    .fiction-label { text-align: left; }
    .story-panel { grid-template-columns: 34px minmax(0, 1fr); padding-left: 0; }
    .story-panel-number { padding-left: 8px; font-size: 27px; }
    .story-facts { grid-column: 2; grid-template-columns: 1fr; }
    .story-controls { flex-wrap: wrap; }
    .story-status { order: -1; width: 100%; }
    .data-card, .radar-card { padding: 18px; }
    .data-card-head { gap: 9px; }
    .data-card-head h3 { font-size: 24px; }
    .data-value strong { font-size: 25px; }
    .metric-row { grid-template-columns: 1fr; }
    .plain-table { font-size: 12px; }
    .plain-table th { width: 37%; }
}
@media (max-width: 360px) {
    .story-step-link { grid-template-columns: 1fr; gap: 2px; }
    .story-step-no { grid-row: auto; }
    .story-step-link:nth-child(even) { padding-left: 8px; }
    .story-step-link:nth-child(odd) { padding-right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .button { transition: none; }
    .button:hover { transform: none; }
    .story.story--enhanced .story-panel.is-active { animation: none; }
}

@media print {
    .hero-actions, .story-controls, .station-search, .radar-video { display: none; }
    .story.story--enhanced .story-panel:not(.is-active) { display: grid; }
    .data-card, .radar-card, .concept, .metric-card { break-inside: avoid; }
}