/* ==========================================================================
   responsive.css — mobile-first breakpoints
   base: 320–599 · sm ≥600 · md ≥768 · lg ≥1024 · xl ≥1240 · xxl ≥1440
   ========================================================================== */

@media (max-width: 767px) {
  :root { --header-h: 64px; }
  body { font-size: 1.0625rem; line-height: 1.68; } /* 17px */
  .brand__mark { width: 30px; height: 30px; }
  .brand__name { font-size: 1.2rem; }
  .menu-toggle__label { display: none; }
  /* stacked data table on phones */
  .record-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .record-table, .record-table tbody, .record-table tr, .record-table td { display: block; width: 100%; }
  .record-table tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .record-table td { border: 0; padding: 4px 0; }
  .record-table td[data-label]::before { content: attr(data-label); display: block; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--river-d); margin-bottom: 2px; }
  .record-table td:first-child { white-space: normal; }
  .home-hero__plate { left: 8px; bottom: 16px; }
  .k2p__facts { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  body { font-size: 1rem; }
  .brand__sub { display: none; }
  .seat-card { grid-template-columns: 1fr; }
  .seat-card div:nth-child(odd) { border-right: 0; }
  .seat-card div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .entry { grid-template-columns: 1fr; }
  .entry__day { display: flex; gap: 10px; align-items: baseline; font-size: 2rem; margin-bottom: 10px; }
  .entry__day small { margin: 0; }
  .register { padding: 22px 18px; }
  .record dl div { grid-template-columns: 1fr; gap: 0; }
}

@media (min-width: 600px) {
  .station { padding-left: 56px; }
  .flow-list { grid-template-columns: 1fr 1fr; }
  .drop-stats { grid-template-columns: 1fr 1fr; }
  .km__cols { grid-template-columns: 1fr 1fr; }
  .mosaic { grid-template-columns: repeat(6, 1fr); }
  .mosaic .tile { grid-column: span 6; }
  .mosaic .tile--half { grid-column: span 3; }
  .form__row { grid-template-columns: 1fr 1fr; }
  .explore__grid { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .factsheet div { grid-template-columns: 180px 1fr; gap: 16px; }
  .register dl div { grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; }
  .entry__facts { grid-template-columns: 1fr 1fr; }
  .media-grid { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .gallery-elsewhere { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .linemap-list { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

@media (min-width: 768px) {
  .home-hero__grid { grid-template-columns: 1.1fr .9fr; gap: 56px; }
  .home-hero__figure { justify-self: end; }
  .route-indicator ol { grid-template-columns: repeat(5, 1fr); }
  .route-indicator li { padding: 30px 16px 0 0; }
  .route-indicator li::before { left: 0; top: 0; }
  .route-indicator li::after { left: 12px; right: 0; top: 5px; bottom: auto; width: auto; height: 1.5px; }
  .duty__grid { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .duty__head { grid-template-columns: 1fr 1fr; align-items: end; }
  .k2p__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .rail-block__grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .water-block__grid { grid-template-columns: .9fr 1.1fr; gap: 56px; }
  .ledger__row { grid-template-columns: 180px 1fr; gap: 32px; }
  .numbers__grid { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .about-hero { grid-template-columns: 1fr 1fr; gap: 56px; }
  .doc-hero__grid { grid-template-columns: 1.1fr .9fr; gap: 64px; }
  .chapter { grid-template-columns: 200px 1fr; }
  .doc-strip { grid-template-columns: 1fr 1fr; }
  .stage { grid-template-columns: 64px 1fr; gap: 0 32px; }
  .stage__track::before { left: 30px; }
  .stage__track::after { left: 21px; }
  .stage--interchange .stage__track::after { left: 17px; }
  .stage__body { grid-template-columns: 200px 1fr; }
  .stage__rows li { grid-template-columns: 150px 1fr; }
  .parl-hero__grid { grid-template-columns: 1.2fr .8fr; gap: 56px; }
  .parl-hero .figure { justify-self: end; }
  .split-note { grid-template-columns: 240px 1fr; gap: 32px; }
  .rail-hero__sub { grid-template-columns: 1.1fr .9fr; gap: 56px; }
  .board__row { grid-template-columns: 200px 1fr; }
  .board__src { grid-column: 2; }
  .km { grid-template-columns: 180px 1fr; }
  .km__marker { flex-direction: column; }
  .platform { grid-template-columns: 180px 1fr; }
  .water-hero__grid { grid-template-columns: 1.2fr .8fr; gap: 56px; }
  .stream__grid { grid-template-columns: 220px 1fr; }
  .distinction { grid-template-columns: 1fr 1fr; }
  .journal-hero__grid { grid-template-columns: 1.3fr .7fr; gap: 56px; }
  .entry { grid-template-columns: 96px 1fr; gap: 0 28px; }
  .entry__day { font-size: 3rem; }
  .archive-tools__row { grid-template-columns: minmax(220px, 320px) 1fr; align-items: center; }
  .record { grid-template-columns: 150px 1fr; }
  .media-lead { grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
  .media-duo { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: .85fr 1.15fr; gap: 72px; }
  .footer__top { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer__top > :first-child { grid-column: 1 / -1; }
  .mosaic { grid-template-columns: repeat(12, 1fr); gap: 24px; }
  .mosaic .tile { grid-column: span 12; }
  .mosaic .tile--lg { grid-column: span 7; }
  .mosaic .tile--md { grid-column: span 5; }
  .mosaic .tile--half { grid-column: span 6; }
  .mosaic .tile--tall { grid-column: span 5; }
  .mosaic .tile--side { grid-column: span 7; }
  .mosaic .tile--third { grid-column: span 4; }
  .mosaic .tile--pano { grid-column: 2 / span 10; }
}

@media (min-width: 1024px) {
  .home-hero__grid { grid-template-columns: 1.15fr .85fr; gap: 80px; }
  .stations { grid-template-columns: repeat(6, 1fr); gap: 0; }
  .station { padding: 52px 22px 0 0; }
  .station::before { left: 9px; right: 0; top: 13px; bottom: auto; width: auto; height: 2px; }
  .station:last-child::before { display: block; right: auto; width: 40px; background: linear-gradient(90deg, var(--teal), transparent); }
  .station__node { left: 0; top: 4px; }
  .duty__grid { grid-template-columns: 1fr 1fr; column-gap: 72px; }
  .flow-list { grid-template-columns: 1fr; }
  .numbers__grid { grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
  .stat { padding: 36px 24px 36px 0; border-bottom: 0; border-right: 1px solid var(--line-inv); }
  .stat:last-child { border-right: 0; }
  .explore__grid { grid-template-columns: 1fr 1fr 1fr; }
  .longform { grid-template-columns: 240px 1fr; gap: 80px; }
  .toc { display: block; position: -webkit-sticky; position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
  .media-grid { grid-template-columns: repeat(3, 1fr); }
  .journal-layout { display: grid; grid-template-columns: 1fr 340px; gap: 72px; align-items: start; }
  .journal-aside { position: -webkit-sticky; position: sticky; top: calc(var(--header-h) + 40px); }
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer__top > :first-child { grid-column: auto; }
  .k2p__grid { grid-template-columns: 1.05fr .95fr; gap: 88px; }
}

@media (min-width: 1240px) {
  .route-nav { display: block; }
  .menu-toggle { display: none; }
}

@media (min-width: 1440px) {
  .route-nav a { padding-inline: 11px; font-size: .86rem; }
}

/* landscape phones: keep the menu usable */
@media (max-height: 520px) and (orientation: landscape) {
  .menu-list { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .menu-list::before { display: none; }
  .menu-list a { font-size: 1.2rem; min-height: 44px; padding-block: 8px; }
  .lightbox img { max-height: calc(100vh - 110px); }
}

@media print {
  .site-header, .menu-panel, .site-footer .social, .archive-tools, .lightbox, .next-stop { display: none !important; }
  body { background: #fff; }
  .reveal-ready .reveal { opacity: 1 !important; transform: none !important; }
}

@media (min-width: 768px) {
  .chips { flex-wrap: wrap; overflow: visible; }
}

@media (max-width: 699px) {
  .linemap svg { display: none; }
  .linemap { margin-top: 32px; }
}