/* ============================================================
   Norlys Kystlinjen · FY2026 annual report · web edition
   One design system, declared once, deviated from nowhere.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* palette · cool neutrals + one warm accent */
  --paper:  #EEF1F1;   /* page */
  --panel:  #E3E8E8;   /* raised surfaces */
  --sea:    #D7E1E1;   /* map sea */
  --land:   #E6EBE6;   /* map land */
  --ink:    #1B2528;   /* body text · 13.8:1 on paper */
  --muted:  #4A585C;   /* secondary text · 6.5:1 on paper */
  --line:   #C4CFCF;   /* hairlines */
  --deep:   #12212B;   /* chart fills, masthead */
  --accent: #8C3E10;   /* warm accent, text-safe · 6.6:1 on paper */
  --warm:   #B0571E;   /* warm accent, graphics only · 4.4:1, used >= 3:1 contexts */

  /* type · 3 local stacks, one scale (ratio 1.25, base 16px) */
  --font-serif:   Georgia, "Times New Roman", Times, serif;
  --font-grotesk: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --font-mono:    "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --step--2: 0.64rem;    /* 10.2px  captions, legend */
  --step--1: 0.8rem;     /* 12.8px  tables, nav, mono labels */
  --step0:   1rem;       /* 16px    body */
  --step1:   1.25rem;    /* 20px    subheads */
  --step2:   1.5625rem;  /* 25px    stat values */
  --step3:   1.9531rem;  /* 31px    section title (mobile) */
  --step4:   2.4414rem;  /* 39px    section title */
  --step5:   3.0518rem;  /* 49px    hero number (mobile) */
  --step6:   3.8147rem;  /* 61px    hero number / opening */

  /* spacing · 8px grid, line-heights 1.5 (16px) and 1.6 (20px) land on it */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px;
  --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 96px;

  --maxw: 1200px;
  --navh: 56px;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-grotesk);
  font-size: var(--step0);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

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

.skip {
  position: absolute; left: var(--sp-2); top: -48px; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--font-mono); font-size: var(--step--1);
  text-decoration: none;
}
.skip:focus { top: var(--sp-2); }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-2), 4vw, var(--sp-6));
}

/* ---------- masthead ---------- */
.masthead { padding-block: var(--sp-5) var(--sp-3); }
.masthead__inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  align-items: baseline; justify-content: space-between;
}
.masthead__brand {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step2);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.masthead__brand span { font-style: italic; font-weight: 400; color: var(--accent); }
.masthead__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- persistent nav ---------- */
.sail {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  height: var(--navh);
}
.sail__inner {
  height: 100%;
  display: flex; align-items: center; gap: var(--sp-2);
}
.sail__pos {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
  min-width: 4ch; text-align: right;
}
.sail__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.sail__list::-webkit-scrollbar { display: none; }
.sail__list li { flex: none; }
.sail__list a {
  display: inline-block;
  padding: var(--sp-1) 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 120ms linear, border-color 120ms linear;
}
.sail__list a:hover { color: var(--ink); }
.sail__list a.is-active {
  color: var(--accent);
  border-bottom-color: var(--warm);
}
.sail__bar {
  position: absolute; left: 0; bottom: -1px;
  width: 0%; height: 2px;
  background: var(--warm);
}

/* ---------- sections ---------- */
main section {
  padding-block: var(--sp-6);
  scroll-margin-top: calc(var(--navh) + var(--sp-3));
}
[id] {
  scroll-margin-top: calc(var(--navh) + var(--sp-3));
}
.sec-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-serif);
  font-size: var(--step3);
  font-weight: 700;
  line-height: 1.15;
}
@media (min-width: 900px) {
  .sec-title { font-size: var(--step4); }
}
.sec-lede {
  margin: 0 0 var(--sp-4);
  max-width: 72ch;
  font-size: var(--step1);
  line-height: 1.6;
}

/* ---------- opening ---------- */
.opening { padding-top: var(--sp-7); }
.kicker {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.opening__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-serif);
  font-size: var(--step5);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
}
@media (min-width: 900px) {
  .opening__title { font-size: var(--step6); }
}
.opening__lede {
  margin: 0;
  max-width: 58ch;
  font-size: var(--step1);
  line-height: 1.6;
}

.voyage { margin: var(--sp-5) 0 0; }
.voyage svg { display: block; width: 100%; height: auto; }
.vline   { stroke: var(--line); stroke-width: 1.5; }
.vtrack  { stroke: var(--ink);  stroke-width: 3; }
.vtick   { stroke: var(--ink);  stroke-width: 2.5; }
.vdot    { fill: var(--warm); stroke: var(--paper); stroke-width: 2.5; }
.vport   { font-family: var(--font-grotesk); font-size: 24px; fill: var(--ink); font-weight: 600; }
.vtime   { font-family: var(--font-mono); font-size: 21px; fill: var(--muted); }
.vdist   { font-family: var(--font-mono); font-size: 19px; fill: var(--muted); }
.t-mid   { text-anchor: middle; }
.ferry-hull { fill: var(--deep); }
.ferry-deck { fill: var(--paper); stroke: var(--deep); stroke-width: 1.5; }
.ferry-wake { stroke: var(--line); stroke-width: 2; }
.ferry {
  animation: sail 16s linear infinite;
}
@keyframes sail {
  from { transform: translate(120px, 150px); }
  to   { transform: translate(1080px, 150px); }
}

.figcap {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
  max-width: 80ch;
}

/* ---------- key figures ---------- */
.hero-fig { margin-top: var(--sp-2); }
.hero-fig__num {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step5);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
@media (min-width: 900px) {
  .hero-fig__num { font-size: var(--step6); }
}
.hero-fig__cap {
  margin: var(--sp-2) 0 0;
  font-size: var(--step1);
  color: var(--muted);
}
.delta {
  display: inline-block;
  margin-left: var(--sp-1);
  padding: 2px var(--sp-1);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent);
}
.delta--up::before { content: "▲ "; }

.stat-grid {
  margin: var(--sp-5) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4) var(--sp-3);
}
.stat {
  margin: 0;
  border-top: 2px solid var(--ink);
  padding-top: var(--sp-2);
}
.stat dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat dd {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-serif);
  font-size: var(--step2);
  font-variant-numeric: tabular-nums;
}
.stat__note {
  font-family: var(--font-grotesk);
  font-size: var(--step--1);
  color: var(--muted);
}

/* ---------- routes ---------- */
.routes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}
.routes__grid > * { min-width: 0; }
@media (min-width: 980px) {
  .routes__grid {
    grid-template-columns: minmax(360px, 5fr) minmax(400px, 7fr);
  }
}
.mapfig { margin: 0; }
.mapfig__frame {
  border: 1px solid var(--line);
  background: var(--sea);
}
#map-svg { display: block; width: 100%; height: auto; }

.mapfig__legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
}
.lg { display: inline-flex; align-items: center; gap: var(--sp-1); }
.lg__line { display: inline-block; width: 32px; border-top: 3px solid; }
.lg__line--express { border-color: var(--warm); }
.lg__line--coastal { border-color: var(--ink); }
.lg__line--fjord   { border-color: var(--muted); border-top-style: dashed; }
.lg__dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; background: var(--ink);
}
.lg--hint { color: var(--muted); }

/* map svg internals (classes set by app.js) */
.m-sea   { fill: var(--sea); }
.m-land  { fill: var(--land); stroke: var(--ink); stroke-width: 2.5; }
.m-karmoy{ fill: var(--land); stroke: var(--ink); stroke-width: 2; }
.m-bridge{ stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 4; }
.m-lat   { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 8; }
.m-lab-sea  { font-family: var(--font-mono); font-size: 26px; letter-spacing: 0.5em; fill: #93A5A5; }
.m-lab-land { font-family: var(--font-mono); font-size: 26px; letter-spacing: 0.42em; fill: #A9B4AE; }
.m-latlab   { font-family: var(--font-mono); font-size: 19px; fill: var(--muted); }
.m-scale    { stroke: var(--ink); stroke-width: 3; }
.m-scaletxt { font-family: var(--font-mono); font-size: 20px; fill: var(--ink); }
.m-portlab  { font-family: var(--font-grotesk); font-size: 23px; font-weight: 600; fill: var(--ink); }
.m-port     { fill: var(--ink); }
.m-port-halo{ fill: var(--paper); }
.m-arc      { fill: none; stroke-linecap: round; cursor: pointer;
              transition: stroke-width 120ms linear, opacity 120ms linear; }
.m-arc--express { stroke: var(--warm);  stroke-width: 8; }
.m-arc--coastal { stroke: var(--ink);   stroke-width: 4.5; }
.m-arc--fjord   { stroke: var(--muted); stroke-width: 4.5; stroke-dasharray: 12 8; }
.m-arc--express:hover, .m-arc--express:focus-visible { stroke-width: 13; }
.m-arc--coastal:hover, .m-arc--coastal:focus-visible,
.m-arc--fjord:hover,   .m-arc--fjord:focus-visible   { stroke-width: 8; }
.m-arc.is-sel { stroke-width: 15; }
.m-arc.is-dim { opacity: 0.18; }
.m-compass { stroke: var(--muted); stroke-width: 2.5; fill: none; }
.m-compasslab { font-family: var(--font-mono); font-size: 22px; fill: var(--muted); }

.selectbox {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: var(--sp-2);
}
.selectbox__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-1);
}
.selectbox__select {
  width: 100%;
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--font-grotesk);
  font-size: var(--step0);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  appearance: auto;
}
.details { margin-top: var(--sp-2); border-top: 1px solid var(--line); padding-top: var(--sp-2); }
.details__name {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-serif);
  font-size: var(--step2);
  font-weight: 700;
}
.details__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-2);
}
.details__grid dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.details__grid dd {
  margin: 2px 0 0;
  font-size: var(--step1);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ---------- charts (shared) ---------- */
.chart { margin: 0 0 var(--sp-5); }
.chart__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step1);
  font-weight: 700;
}
.chart__sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--muted);
}
.chart__box { margin-top: var(--sp-2); }
.chart__box svg { display: block; width: 100%; height: auto; }
.chart .data { margin-top: var(--sp-2); }
.noscript-note {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
}

/* chart svg internals */
.c-grid   { stroke: var(--line); stroke-width: 1; }
.c-axis   { stroke: var(--ink); stroke-width: 2; }
.c-ticklab{ font-family: var(--font-mono); font-size: 17px; fill: var(--muted); }
.c-endlab { font-family: var(--font-mono); font-size: 17px; fill: var(--muted); }
.c-val    { font-family: var(--font-mono); font-size: 17px; fill: var(--ink); }
.c-bar-a  { fill: var(--deep); }
.c-bar-b  { fill: var(--warm); }
.c-line   { fill: none; stroke: var(--ink); stroke-width: 3; }
.c-line--warm { stroke: var(--warm); }
.c-dot    { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.c-band   { fill: var(--warm); opacity: 0.16; }
.c-wf-pos { fill: var(--deep); }
.c-wf-neg { fill: var(--warm); }
.c-wf-end { fill: var(--warm); stroke: var(--ink); stroke-width: 2; }
.c-conn   { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 5; }
.c-leglab { font-family: var(--font-grotesk); font-size: 17px; fill: var(--muted); }
.c-legsw  { stroke-width: 12; }
.c-legsw--a { stroke: var(--deep); }
.c-legsw--b { stroke: var(--warm); }

/* ---------- data tables ---------- */
.data {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.data th, .data td { padding: var(--sp-1) var(--sp-2); text-align: left; }
.data thead th {
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--step--1);
  color: var(--muted);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.data tbody th {
  font-family: var(--font-grotesk);
  font-weight: 500;
  font-size: var(--step--1);
}
.data tbody tr { border-bottom: 1px solid var(--line); }
.data tbody tr:hover { background: var(--panel); }
.data .num { text-align: right; white-space: nowrap; }
.data .strong { font-weight: 700; }
.data--routes { min-width: 860px; }
.data--routes tbody tr:hover { background: transparent; }
.data--routes tbody tr:hover th { background: var(--panel); }

.route-pick {
  appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.route-pick:hover { color: var(--accent); border-bottom-color: var(--warm); }
.route-kind {
  margin-left: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.route-row.is-sel { background: var(--panel); }
.route-row.is-sel .route-pick { color: var(--accent); border-bottom-color: var(--warm); }
#fleet-tbody tr.is-sel { background: var(--panel); }

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--line);
}

/* ---------- fleet ---------- */
.fleet-tools {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.chip {
  appearance: none;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  padding: 6px var(--sp-2);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background 100ms linear, color 100ms linear;
}
.chip:hover { background: var(--panel); }
.chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fleet-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
}

.th-sort {
  appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.th-sort:hover { color: var(--ink); }
th.is-sorted .th-sort { color: var(--accent); }
.th-sort__i { display: inline-block; width: 1.2em; text-align: left; }

.fuel-tag {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--line);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fuel-battery { color: var(--accent); border-color: var(--warm); }
.fuel-lng     { color: var(--muted); }
.fuel-hybrid  { color: var(--muted); border-style: dashed; }
.fuel-diesel  { color: var(--deep); border-color: var(--deep); }

.chart--ships svg { margin-top: var(--sp-2); }
.ship-water { stroke: var(--line); stroke-width: 2; }
.s-hull    { fill: var(--deep); }
.s-deck    { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.s-deck--old { fill: var(--panel); }
.s-windows { stroke: var(--deep); stroke-width: 3; stroke-dasharray: 7 8; }
.s-bridge  { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.s-mast    { stroke: var(--ink); stroke-width: 2; }
.s-batt    { fill: var(--warm); }
.s-gas     { fill: var(--muted); stroke: var(--ink); stroke-width: 2; }
.s-gas-seam{ stroke: var(--paper); stroke-width: 2; }
.s-funnel  { fill: var(--ink); }
.s-funnel-band { fill: var(--warm); }
.s-name    { font-family: var(--font-mono); font-size: 21px; fill: var(--muted); }
.scale-line { stroke: var(--ink); stroke-width: 2; }
.scale-txt  { font-family: var(--font-mono); font-size: 17px; fill: var(--muted); }

/* ---------- financials ---------- */
.data--summary { margin-bottom: var(--sp-5); }
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--sp-5) var(--sp-4);
}
.chart-grid .chart { margin-bottom: 0; }

/* ---------- sustainability ---------- */
.excludes {
  margin: 0 0 var(--sp-5);
  max-width: 76ch;
  background: var(--panel);
  border-left: 4px solid var(--warm);
  padding: var(--sp-3);
}
.excludes__h {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.excludes p { margin: 0; }

.sm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.sm-grid figure { margin: 0; }
.sm-grid svg { display: block; width: 100%; height: auto; }
.sm-grid figcaption {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--muted);
  text-align: center;
}
.sm-bar-battery { fill: var(--warm); }
.sm-bar-hybrid  { fill: #7C8B90; }
.sm-bar-lng     { fill: var(--muted); }
.sm-bar-diesel  { fill: var(--deep); }

/* ---------- footnotes ---------- */
.fnref {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.75em;
}
.fnref:hover { text-decoration: underline; }
.footnotes {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-2) 0 0;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
}
.footnotes li { margin-bottom: var(--sp-1); }
.fnback { color: var(--accent); text-decoration: none; margin-left: var(--sp-1); }
.fnback:hover { text-decoration: underline; }

/* ---------- letter ---------- */
.letter {
  max-width: 68ch;
  font-family: var(--font-serif);
  font-size: var(--step0);
  line-height: 1.5;
}
.letter p { margin: 0 0 var(--sp-2); }
.letter p:first-of-type { margin-top: 0; }
.letter__from {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-3) !important;
}
.letter__sign {
  margin-top: var(--sp-3);
  font-size: var(--step1);
}
.letter .fnref, .letter .footnotes .fnref { color: var(--accent); }
.letter .footnotes { font-family: var(--font-grotesk); }

/* ---------- board ---------- */
.board-sec .sec-lede { max-width: 80ch; }
.data--board { min-width: 620px; }
.data--board tbody th { white-space: nowrap; }

.colophon {
  margin-top: var(--sp-6);
  border-top: 2px solid var(--ink);
  padding-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
}
.colophon p { margin: 0; max-width: 90ch; }

/* ---------- 320px: stacked tables ---------- */
@media (max-width: 640px) {
  .data--fleet, .data--board { min-width: 0; }
  .data--fleet thead, .data--board thead { display: none; }
  .data--fleet tbody tr, .data--board tbody tr {
    display: block;
    border-bottom: 2px solid var(--ink);
  }
  .data--fleet tbody th, .data--fleet tbody td,
  .data--board tbody th, .data--board tbody td {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    text-align: right;
    border-bottom: 1px solid var(--line);
  }
  .data--fleet tbody th::before,
  .data--board tbody th::before {
    content: attr(data-th);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
  }
  .data--fleet tbody td::before,
  .data--board tbody td::before {
    content: attr(data-th);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
  }
}

/* ---------- motion discipline ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ferry { animation: none; transform: translate(600px, 150px); }
  .m-arc, .chip, .sail__list a, .route-pick, .data tbody tr { transition: none; }
}

/* ---------- print · A4 ---------- */
@page { size: A4; margin: 12mm 11mm; }
@media print {
  body { background: #fff; color: #000; font-size: 10pt; }
  .sail, .skip, .fleet-tools, .selectbox__select, .selectbox__label,
  .fleet-count, .noscript-note, .m-arc { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  main section { padding-block: 16pt; scroll-margin-top: 0; }
  .opening { padding-top: 0; }
  .opening__title { font-size: 26pt; }
  .hero-fig__num { font-size: 30pt; }
  .sec-title { font-size: 16pt; }
  .ferry { animation: none; transform: translate(600px, 150px); }

  /* keep visual objects whole */
  figure, .stat, .details, .excludes, .data { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .data { font-size: 7.5pt; }
  .data th, .data td { padding: 3pt 6pt; }
  .data--routes { min-width: 0; }
  .routes__grid { display: block; }
  #map-svg { max-height: 170mm; width: auto; display: block; margin: 0 auto; }
  .voyage svg { max-height: 52mm; }
  .chart-grid { display: block; }
  .chart-grid .chart { margin-bottom: 14pt; }
  .chart__box svg { max-height: 70mm; }
  .data--fleet thead, .data--fleet tbody th,
  .data--fleet tbody td, .data--board thead,
  .data--board tbody th, .data--board tbody td { display: table-cell; }
  .data--fleet tbody th::before, .data--fleet tbody td::before,
  .data--board tbody th::before, .data--board tbody td::before { content: none; }
  .data--fleet { min-width: 0; }
  .colophon { margin-top: 24pt; }
  a { color: inherit; text-decoration: none; }
  .fnref { color: var(--accent); }
}