/* =========================================================================
   Norlys Kystlinjen — FY2026 web edition
   base.css — design tokens, type system, layout, section styles.
   Pure CSS. No frameworks.
   ========================================================================= */

/* ---- Token layer -------------------------------------------------------
   Everything is declared once here and referenced everywhere else.
   The type scale, spacing scale and palette are the single source of truth.
   ------------------------------------------------------------------------- */
:root {
  /* Cool-neutral paper and ink, one warm accent (terracotta). */
  --bg: #ECEEF1;
  --surface: #FFFFFF;
  --ink: #162027;
  --ink-soft: #4A5560;
  --ink-faint: #76828D;
  --line: #D4D9DE;
  --line-strong: #B6BEC6;
  --sea: #2E5C69;
  --sea-weak: #DCE7EA;
  --accent: #C0462B;
  --accent-weak: #F1DDD4;
  --accent-deep: #9A341D;
  --paper-line: #DCE1E5;

  /* Type system — one ascending scale, referenced as --fs-* everywhere.
     Ratio ~1.333 (perfect fourth) on a 16px baseline. */
  --fs-280: 0.8125rem;   /* 13  mono tags, captions, table meta */
  --fs-360: 0.9375rem;   /* 15  small body, footnotes */
  --fs-440: 1rem;        /* 16  body */
  --fs-md: 1.125rem;     /* 18  lead text */
  --fs-lg: 1.3125rem;    /* 21  */
  --fs-xl: 1.625rem;     /* 26  section titles */
  --fs-2xl: 2.125rem;    /* 34  */
  --fs-3xl: 2.75rem;     /* 44  */
  --fs-4xl: 3.5rem;      /* 56  section counters */
  --fs-cover: 4.25rem;   /* 68  cover headline */

  /* Faces. Three families: serif (reading/display), grotesque (UI/headings),
     mono (figures/meta). All system stacks, nothing fetched. */
  --serif: "Iowan Old Style", "Palatino Linotype", "Palatino", "Book Antiqua", Georgia, serif;
  --grotesque: "Helvetica Neue", "Inter", "Avenir", Helvetica, Arial, system-ui, sans-serif;
  --mono: "SFMono-Regular", "BM Mono", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Reading metrics. */
  --measure: 62ch;
  --line-body: 1.7;
  --line-tight: 1.12;

  /* Spacing scale — multiples of an 8px unit. */
  --u1: 0.5rem;  /* 8 */
  --u2: 1rem;    /* 16 */
  --u3: 1.5rem;  /* 24 */
  --u4: 2rem;    /* 32 */
  --u5: 3rem;    /* 48 */
  --u6: 4rem;    /* 64 */
  --u7: 6rem;    /* 96 */
  --u8: 8rem;    /* 128 */

  /* Structure. */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 1240px;
  --masthead-h: 4.25rem;
  --ink-h: 3.5rem;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(22, 32, 39, 0.06), 0 8px 24px rgba(22, 32, 39, 0.06);
}

/* ------------------------------------------------------------------ Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--grotesque);
  font-size: var(--fs-440);
  line-height: var(--line-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--sea); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); line-height: var(--line-tight); margin: 0; font-weight: 600; }
p { margin: 0 0 var(--u3); }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }

/* Skip link: real focus order, off-screen until focused. */
.skip {
  position: absolute; left: var(--u2); top: -3rem;
  background: var(--ink); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius);
  z-index: 200; font-family: var(--grotesque);
}
.skip:focus { top: 0.5rem; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Visually hidden but available to screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- Masthead */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.masthead-inner {
  position: relative;
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--masthead-h);
  display: flex; align-items: center; gap: var(--u3);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--grotesque); font-weight: 700; letter-spacing: 0.01em;
  color: var(--ink); font-size: var(--fs-360);
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 2rem; height: 2rem; flex: 0 0 auto; }
.brand-mark .water { fill: var(--sea); }
.brand-mark .wake { fill: var(--accent); }

.topnav {
  display: flex; gap: 0.25rem; margin-left: auto;
  font-size: var(--fs-280); font-weight: 500;
}
.topnav a {
  color: var(--ink-soft); padding: 0.4rem 0.65rem; border-radius: var(--radius);
  white-space: nowrap; transition: color 0.15s ease, background 0.15s ease;
}
.topnav a:hover { color: var(--ink); background: var(--sea-weak); text-decoration: none; }
.topnav a[aria-current="true"] {
  color: var(--accent-deep); background: var(--accent-weak); font-weight: 600;
}

/* Reading progress — reflects actual scroll position, set by JS via --sv. */
.readahead {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--line); overflow: hidden;
}
.readahead span {
  display: block; height: 100%; width: calc(var(--sv, 0) * 100%);
  background: var(--accent);
}

/* --------------------------------------------------------------- Layout --- */
.page { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--u7) 0 var(--u6); border-top: 1px solid var(--paper-line); scroll-margin-top: calc(var(--ink-h) + 1rem); }
.section:first-of-type { border-top: 0; }
.section-head {
  display: grid; grid-template-columns: auto 1fr; gap: var(--u3); align-items: baseline;
  margin-bottom: var(--u4);
}
.eyebrow {
  font-family: var(--mono); font-size: var(--fs-280); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-deep); font-weight: 600;
}
.section-head h2 { font-size: var(--fs-xl); letter-spacing: -0.01em; }
.section-head .counter {
  font-family: var(--mono); font-size: var(--fs-280); color: var(--ink-faint);
}
.lead { color: var(--ink-soft); font-size: var(--fs-md); max-width: 58ch; }

/* -------------------------------------------------------------- Cover --- */
.cover {
  position: relative; overflow: hidden;
  padding: var(--u7) var(--gutter) var(--u6);
  border-bottom: 1px solid var(--paper-line);
  background:
    linear-gradient(180deg, var(--bg) 0%, #E9ECEE 100%);
}
.cover-grid { position: relative; max-width: var(--container); margin: 0 auto; display: grid; gap: var(--u4); }
.cover-eyebrow { font-family: var(--mono); font-size: var(--fs-280); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sea); }
.cover h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 7vw, var(--fs-cover));
  letter-spacing: -0.02em; font-weight: 500; max-width: 16ch; margin: var(--u2) 0;
}
.cover h1 em { font-style: italic; color: var(--accent-deep); }
.cover-standfirst { font-family: var(--serif); font-size: var(--fs-lg); color: var(--ink-soft); max-width: 44ch; line-height: 1.45; }
.cover-meta {
  display: flex; flex-wrap: wrap; gap: var(--u3) var(--u4);
  font-family: var(--mono); font-size: var(--fs-280); color: var(--ink-faint);
  margin-top: var(--u3); padding-top: var(--u3); border-top: 1px solid var(--line);
}
.cover-meta span b { color: var(--ink); font-weight: 600; }
.cover-scene { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--sea-weak); }
.cover-scene .coast { fill: var(--sea); }
.cover-scene .water { fill: #DAE6EA; }
.cover-scene .arc { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.75; }
.cover-scene .dot { fill: var(--accent); }
.cover-scene .port { fill: var(--ink); }
.cover-timetable {
  font-family: var(--mono); font-size: var(--fs-280); color: var(--ink-soft);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem 1rem;
  padding: var(--u2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.cover-timetable b { color: var(--ink); }
.masthead.cover-stuck .brand { color: var(--ink); }

/* ------------------------------------------------ Key figures --- */
.hero-number { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; line-height: 0.9;
  font-size: clamp(3.5rem, 16vw, var(--fs-4xl)); color: var(--ink); }
.hero-number .unit { font-family: var(--mono); font-size: 0.4em; color: var(--accent-deep); margin-left: 0.25em; }
.hero-note { color: var(--ink-soft); font-size: var(--fs-360); max-width: 42ch; margin-top: var(--u2); }
.statgrid { display: grid; gap: var(--u3); grid-template-columns: repeat(4, 1fr); margin-top: var(--u5); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--u3); }
.stat .value { font-family: var(--mono); font-size: var(--fs-xl); letter-spacing: -0.01em; color: var(--ink); }
.stat .value.up::before { content: "\2191 "; color: var(--sea); }
.stat .value.down::before { content: "\2193 "; color: var(--accent); }
.stat .label { font-size: var(--fs-280); color: var(--ink-faint); margin-top: 0.35rem; font-family: var(--grotesque); }
.stat.accent { border-color: var(--accent); }
.stat.accent .value { color: var(--accent-deep); }
/* Cross-highlight target: updates when a route is selected. */
.stat.route-shift .value { transition: color 0.2s ease; }

/* ------------------------------------------------- Route map --- */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--u4); align-items: start; }
.map-frame {
  position: relative; background: var(--sea-weak); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
#route-map { width: 100%; height: auto; display: block; touch-action: manipulation; }
#route-map .arc { fill: none; stroke: #6f7d85; stroke-width: 1.5; opacity: 0.32; cursor: pointer; transition: stroke 0.15s ease, stroke-width 0.15s ease, opacity 0.15s ease; }
#route-map .arc:hover, #route-map .arc:focus-visible { stroke: var(--accent); stroke-width: 3.5; opacity: 1; }
#route-map .arc.is-active { stroke: var(--accent); stroke-width: 4; opacity: 1; filter: drop-shadow(0 1px 2px rgba(154, 52, 29, 0.4)); }
#route-map .arc.is-faint { opacity: 0.16; }
#route-map rect.water { fill: var(--sea-weak); }
#route-map .coast { fill: var(--sea); }
#route-map .coast-stroke { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
#route-map .port { fill: var(--ink); cursor: pointer; transition: fill 0.15s ease, r 0.15s ease; }
#route-map .port:hover, #route-map .port:focus-visible { fill: var(--accent); }
#route-map .port.is-active { fill: var(--accent); }
#route-map .port-label { fill: var(--ink); font-family: var(--grotesque); font-size: 10px; font-weight: 600; letter-spacing: 0.01em; pointer-events: none; paint-order: stroke; stroke: var(--sea-weak); stroke-width: 3px; stroke-linejoin: round; }
#route-map .region-label { fill: var(--sea); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; pointer-events: none; }
.map-legend { display: grid; gap: var(--u2); }
.map-legend h3 { font-size: var(--fs-360); font-weight: 600; }
.legend-item { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-360); color: var(--ink-soft); cursor: pointer; padding: 0.3rem 0.4rem; border-radius: var(--radius); }
.legend-item:hover, .legend-item.is-active { background: var(--surface); text-decoration: none; }
.legend-item.is-active { color: var(--accent-deep); font-weight: 600; }
.legend-swatch { width: 26px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.route-detail {
  margin-top: var(--u3); padding: var(--u3); background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius);
  min-height: 5.5rem;
}
.route-detail .rname { font-family: var(--serif); font-size: var(--fs-lg); }
.route-detail .rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u2); margin-top: var(--u2); }
.route-detail .rgrid .v { font-family: var(--mono); font-size: var(--fs-xl); }
.route-detail .rgrid .l { font-size: var(--fs-280); color: var(--ink-faint); }
.route-detail .hint { font-size: var(--fs-360); color: var(--ink-faint); margin: 0; }

/* ------------------------------------------------ Route overview table --- */
.table-shell { margin-top: var(--u4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-360); }
table.data thead th {
  text-align: left; font-family: var(--mono); font-size: var(--fs-280); letter-spacing: 0.04em;
  color: var(--ink-faint); text-transform: uppercase; padding: 0.75rem var(--u2);
  border-bottom: 1px solid var(--line); background: var(--sea-weak); position: sticky; top: var(--ink-h);
  cursor: pointer; user-select: none;
}
table.data tbody td { padding: 0.6rem var(--u2); border-bottom: 1px solid var(--paper-line); }
table.data tbody tr { cursor: pointer; transition: background 0.12s ease; }
table.data tbody tr:hover { background: #F4F6F8; }
table.data tbody tr.is-active { background: var(--accent-weak); }
table.data tbody tr.is-selected-cell td { border-left: 3px solid var(--accent); padding-left: calc(var(--u2) - 3px); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr .rname { font-weight: 600; color: var(--ink); }
.badge { display: inline-block; font-family: var(--mono); font-size: var(--fs-280); color: var(--sea); }

/* ------------------------------------------------- Fleet --- */
.fleet-controls { display: flex; flex-wrap: wrap; gap: var(--u3); align-items: flex-end; margin-bottom: var(--u3); }
.filter-group { display: grid; gap: 0.4rem; }
.filter-group > span.flabel { font-family: var(--mono); font-size: var(--fs-280); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-360); padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; background: var(--surface); color: var(--ink-soft); transition: all 0.12s ease; }
.chip:hover { border-color: var(--line-strong); }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip[aria-pressed="true"] { border-color: var(--sea); background: var(--sea-weak); color: var(--ink); font-weight: 600; }
.chip .dotc { width: 9px; height: 9px; border-radius: 50%; }
.sort-select { font-family: var(--grotesque); font-size: var(--fs-360); padding: 0.4rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; }
.fleet-meta { font-family: var(--mono); font-size: var(--fs-280); color: var(--ink-faint); margin: 0 0 var(--u3); }
.fleet-table-shell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fleet-table-shell caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fleet-ships tr.is-hidden { display: none; }
.fleet-ships tr.selected-fuel td { background: var(--sea-weak); }
.fleet-ships tr.selected-fuel .fuel-tag { color: var(--sea); font-weight: 700; }

.profiles { margin-top: var(--u5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u3); }
.profile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--u3); }
.profile svg { width: 100%; height: auto; }
.profile .pname { font-family: var(--serif); font-size: var(--fs-lg); margin-top: var(--u2); }
.profile .pspec { font-family: var(--mono); font-size: var(--fs-280); color: var(--ink-faint); line-height: 1.5; }
.scalebar { margin-top: var(--u3); font-family: var(--mono); font-size: var(--fs-280); color: var(--ink-faint); display: flex; align-items: center; gap: var(--u2); }
.scalebar .bar { height: 3px; flex: 1 1 auto; background: var(--line-strong); position: relative; }
.scalebar .bar::before, .scalebar .bar::after { content: ""; position: absolute; top: -3px; width: 1px; height: 9px; background: var(--line-strong); }
.scalebar .bar::before { left: 0; }
.scalebar .bar::after { right: 0; }

/* ------------------------------------------------ Financials charts --- */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u4); }
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--u3); }
.chart-card.wide { grid-column: 1 / -1; }
.chart-card h3 { font-size: var(--fs-md); font-weight: 600; margin-bottom: 0.25rem; }
.chart-card .chart-sub { font-family: var(--mono); font-size: var(--fs-280); color: var(--ink-faint); margin-bottom: var(--u3); }
.chart svg { width: 100%; height: auto; display: block; }
.chart-text { font-family: var(--mono); font-size: 10px; fill: var(--ink-faint); }
.chart-val { font-family: var(--mono); font-size: 11px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.bar-diesel { fill: var(--sea); }
.bar-accent { fill: var(--accent); }
.axis line { stroke: var(--line); }
.axis path { stroke: var(--line); }
.grid line { stroke: var(--paper-line); stroke-dasharray: 2 4; }
.line-path { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.line-band { fill: var(--accent); opacity: 0.12; }
.line-pt { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.bridge-pos { fill: var(--sea); }
.bridge-neg { fill: var(--accent); }
.bridge-base { fill: var(--line-strong); opacity: 0.4; }
.lgd { display: flex; flex-wrap: wrap; gap: var(--u2); margin-top: var(--u2); font-size: var(--fs-280); color: var(--ink-soft); }
.lgd span { display: inline-flex; align-items: center; gap: 0.4rem; }
.lgd i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

/* ------------------------------------------------ Sustainability --- */
.sust-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--u4); align-items: start; }
.smallmultiples { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--u2); margin-top: var(--u3); }
.sm { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--u2); }
.sm .sm-title { font-family: var(--mono); font-size: var(--fs-280); color: var(--ink-soft); margin-bottom: 0.35rem; }
.sm .sm-value { font-family: var(--mono); font-size: var(--fs-lg); }
.sm svg { width: 100%; height: auto; display: block; margin-top: 0.35rem; }
.footnote-block { margin-top: var(--u5); padding-top: var(--u3); border-top: 1px solid var(--paper-line); }
.footnote-block ol { list-style: none; counter-reset: fn; padding-left: 0; }
.footnote-block li { counter-increment: fn; font-size: var(--fs-360); color: var(--ink-soft); padding: 0.4rem 0; border-bottom: 1px dotted var(--line); }
.footnote-block li::before { content: counter(fn); font-family: var(--mono); font-size: var(--fs-280); color: var(--accent-deep); margin-right: 0.5rem; }
p.footnote-inline > sup > a { color: var(--accent-deep); font-weight: 600; }
p.footnote-inline > sup > a[aria-hidden="true"] { text-decoration: none; }
.back { font-family: var(--mono); font-size: var(--fs-280); color: var(--accent-deep); margin-left: 0.4rem; }

/* ------------------------------------------------ Governance --- */
.board-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--u3); }
.member { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--u2); background: var(--surface); }
.member .avatar { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--sea-weak); display: grid; place-items: center; font-family: var(--serif); font-size: var(--fs-lg); color: var(--sea); margin-bottom: 0.75rem; }
.member .mname { font-weight: 600; font-size: var(--fs-360); }
.member .mrole { font-family: var(--mono); font-size: var(--fs-280); color: var(--accent-deep); margin-top: 0.15rem; }
.member .mbg { font-size: var(--fs-360); color: var(--ink-soft); margin-top: 0.5rem; line-height: 1.4; }
.board-statement { margin-top: var(--u5); padding: var(--u4); background: var(--sea-weak); border-radius: var(--radius); font-family: var(--serif); font-size: var(--fs-lg); line-height: 1.55; color: var(--ink); }

/* ------------------------------------------------ CEO letter --- */
 letter-body { font-family: var(--serif); font-size: var(--fs-md); line-height: 1.72; max-width: var(--measure); color: var(--ink); }
.letter-wrap { max-width: var(--measure); }
.letter-wrap .letter-head { font-family: var(--mono); font-size: var(--fs-280); color: var(--sea); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--u4); }
.letter-body p { margin-bottom: var(--u3); }
.letter-body .sig { margin-top: var(--u5); font-family: var(--serif); font-style: italic; }
.letter-body .sig b { font-style: normal; font-family: var(--grotesque); display: block; margin-top: 0.25rem; font-size: var(--fs-360); }
.letter-body sup .fna { color: var(--accent-deep); cursor: pointer; font-weight: 600; }
.footnotes-list { margin-top: var(--u5); padding-top: var(--u3); border-top: 1px solid var(--paper-line); }
.footnotes-list ol { list-style: none; counter-reset: fn; padding-left: 0; }
.footnotes-list li { counter-increment: fn; font-size: var(--fs-360); color: var(--ink-soft); padding: 0.5rem 0; border-bottom: 1px dotted var(--line); }
.footnotes-list li::before { content: counter(fn); font-family: var(--mono); font-size: var(--fs-280); color: var(--accent-deep); margin-right: 0.5rem; }

/* ------------------------------------------------ Footer --- */
.foot { border-top: 1px solid var(--paper-line); padding: var(--u5) var(--gutter); color: var(--ink-faint); font-size: var(--fs-360); }
.foot-inner { max-width: var(--container); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--u2); justify-content: space-between; }

/* -------------------------------------------------- Responsive --- */
@media (max-width: 980px) {
  .statgrid { grid-template-columns: repeat(2, 1fr); }
  .chart-grid { grid-template-columns: 1fr; }
  .map-layout, .sust-layout { grid-template-columns: 1fr; }
  .board-grid { grid-template-columns: repeat(2, 1fr); }
  .profiles { grid-template-columns: 1fr 1fr; }
  .topnav { gap: 0; }
  .topnav a { padding: 0.4rem 0.45rem; }
}
@media (max-width: 620px) {
  .masthead-inner { height: 3.5rem; gap: 0.5rem; }
  .topnav { flex-wrap: wrap; align-items: center; }
  .statgrid { grid-template-columns: 1fr 1fr; }
  .board-grid { grid-template-columns: 1fr; }
  .profiles { grid-template-columns: 1fr; }
  .smallmultiples { grid-template-columns: 1fr 1fr; }
  .cover-timetable { grid-template-columns: 1fr 1fr; }
  .section-head { grid-template-columns: 1fr; gap: 0.25rem; }
  .nav-hint { display: none; }
}
/* 320px minimum usability: keep the fleet table readable. */
@media (max-width: 420px) {
  table.data { font-size: var(--fs-280); }
  table.data thead th, table.data tbody td { padding: 0.5rem 0.45rem; }
  .stat .value { font-size: var(--fs-md); }
}

/* ------------------------------------------------ Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  .readahead span { transition: none !important; }
}