/* ===========================================================================
   Boat Tracker — site stylesheet
   ---------------------------------------------------------------------------
   Implements the house design system: the Friday Long Post handoff
   (FLP Design/README.md), whose tokens, type and rules this site shares
   exactly. Every colour, size and space in §1–§4 is a value from that handoff,
   under the handoff's own name; the components after §4 that the handoff never
   drew — the map, the boats table, the update strip — are built from those
   same tokens, and each is recorded in docs/DESIGN-IMPLEMENTATION.md §4.

   Two rules the design is emphatic about, worth stating up front because they
   are easy to erode — and a map, with its default shadows and its instinct to
   give every boat a colour, erodes both:
     1. NO SHADOWS anywhere, except the header's backdrop blur. Structure comes
        from hairline rules, not elevation. Leaflet's shadows are removed in §6.
     2. ONE accent hue. Boats are told apart by their bow number, not by
        colour; the accent marks the one boat you are looking at.

   Layer order: tokens -> reset -> primitives -> shared furniture -> views ->
   responsive. Responsive lives at the end in one block so the breakpoints can
   be read together.
   =========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  /* Colour */
  --paper:          #fbfaf7;
  --paper-sunk:     #f6f3ec;
  --ink:            #23201c;
  --ink-soft:       #2c2823;
  --ink-muted:      #55504a;
  --ink-faint:      #8c8578;
  --ink-faintest:   #9a9284;
  --accent:         #b0522c;
  --accent-dark:    #7d3a1f;
  --accent-pale:    #d6b7a6;
  --accent-wash:    #f0d9cd;
  --rule:           #e6e1d8;
  --rule-light:     #f0ece4;
  --border-field:   #d8d2c7;
  --border-chip:    #e0dbd1;
  --stripe-a:       #efebe3;
  --stripe-b:       #f6f3ec;
  --white:          #ffffff;

  /* Type. Self-host both families in production (docs/DEPLOY-DEBIAN.md); the
     font stacks name them first, so a self-hosted install needs no change here. */
  --font-sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Layout */
  --container:   1240px;
  --gutter:      56px;
  --measure:     40em;
  --radius:      2px;       /* buttons, inputs, chips. Nothing else. */
  --sticky-top:  116px;     /* header height + breathing room */

  /* The one permitted "elevation": the sticky header's blur. */
  --header-bg:   rgba(251, 250, 247, 0.92);
}

/* ----------------------------------------------------------------- 2. Reset */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent-wash); }

/* Not inside a map: Leaflet sizes its tiles and its SVG overlay with width and
   height attributes, and height:auto here would override them — stretched
   tiles, and markers ten times their size. */
img:not(.leaflet-container *),
svg:not(.leaflet-container *) { max-width: 100%; height: auto; display: block; }

/* Global anchor colours, so no link can fall back to browser-default blue. */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }

/* Keyboard focus is visible everywhere; pointer focus is not. The design's
   inputs show focus by borrowing the accent border (see .field). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Visually hidden but available to assistive tech. */
.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;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-size: 14.5px;
}
.skip-link:focus { left: 0; text-decoration: none; color: var(--paper); }

/* ------------------------------------------------------------ 3. Primitives */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Mono is the design's signature: the cadence always speaks in mono — here,
   every time, split, rate and count. Never below 10px, at any breakpoint. */
.mono {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

/* Section kicker — "ON THE WATER", "RECENT SESSIONS" */
.kicker {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

/* Mono metadata, two sizes. */
.meta-lg {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.meta-sm {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The meta row: STATUS · rule · date · rule · mode · rule · venue */
.meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  row-gap: 8px;
  white-space: nowrap;
  color: var(--accent);
}
.meta-row .issue { color: var(--accent); }
.meta-row .dim   { color: var(--ink-faint); }
.meta-tick { width: 22px; height: 1px; flex-shrink: 0; }
.meta-tick--accent { background: var(--accent-pale); }
.meta-tick--rule   { background: var(--border-chip); }

/* Headlines. text-wrap: balance on headlines, pretty on standfirsts/deks. */
.h-display, .h-article, .h-page {
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0;
}
.h-display { font-size: 62px; line-height: 1.03; }
.h-article { font-size: 58px; line-height: 1.05; max-width: 21em; }
.h-page    { font-size: 52px; line-height: 1.05; }

.standfirst-hero { font-size: 22px;   line-height: 1.50; color: var(--ink-muted); max-width: 30em; text-wrap: pretty; }
.standfirst-art  { font-size: 23px;   line-height: 1.48; color: var(--ink-muted); max-width: 28em; text-wrap: pretty; }
.standfirst-page { font-size: 20px;   line-height: 1.50; color: var(--ink-muted); max-width: 34em; text-wrap: pretty; }

/* Buttons. Dark fill hovers to accent; secondary borders darken to ink. */
.btn {
  display: inline-block;
  border-radius: var(--radius);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--ink);
  color: var(--paper);
  padding: 15px 30px;
  font-size: 15px;
}
.btn--primary:hover { background: var(--accent); color: var(--paper); }

.btn--secondary {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--border-field);
  padding: 10px 18px;
  font-size: 14px;
}
.btn--secondary:hover { border-color: var(--ink); color: var(--ink); }

.field {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-field);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 150ms ease;
}
.field:focus { border-color: var(--accent); }
.field::placeholder { color: var(--ink-faintest); }

/* Image placeholders — here, the map's no-JavaScript state: the house striped
   field with a mono caption saying where the same information is as text. */
.imgph {
  background: repeating-linear-gradient(135deg,
    var(--stripe-a) 0 12px, var(--stripe-b) 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.imgph-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-faintest);
  background: var(--paper);
  padding: 8px 14px;
  text-align: center;
}

/* --------------------------------------------------- 4. Shared furniture */

/* Header — the only element with any blur, and no shadow even so. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header .container {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.wordmark {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
  color: var(--ink);
}
.wordmark:hover { color: var(--ink); text-decoration: none; }
.wordmark-name { font-size: 19px; font-weight: 700; letter-spacing: -0.025em; }
.wordmark-tag  { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); }

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
  row-gap: 8px;
  justify-content: flex-end;
  min-width: 0;
  margin-left: auto;
  font-size: 14.5px;
  font-weight: 500;
}
/* Active state is a 2px accent bar below the label; label and bar stack in a
   5px-gap column so the bar never shifts the row's baseline. */
.nav-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--ink);
}
.nav-item:hover { color: var(--accent); text-decoration: none; }
.nav-item .bar { height: 2px; background: transparent; display: block; }
.nav-item.is-active .bar { background: var(--accent); }

.cta {
  background: var(--ink);
  color: var(--paper);
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: var(--radius);
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
}
.cta:hover { background: var(--accent); color: var(--paper); text-decoration: none; }

/* Mobile menu toggle — hidden until the nav can no longer fit (see Responsive). */
.nav-toggle { display: none; }

.site-footer {
  border-top: 1px solid var(--ink);
  background: var(--paper-sunk);
}
.site-footer .container {
  padding: 52px var(--gutter) 60px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.footer-mark { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.footer-blurb { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); max-width: 22em; }
.footer-status { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
.footer-col a { color: var(--ink); }
.footer-col a:hover { color: var(--accent); text-decoration: none; }
.footer-copy { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faintest); }

/* Notice — "Starts at 10:00", "Nothing heard since 11:42". */
.notice {
  border-left: 2px solid var(--accent);
  background: var(--paper-sunk);
  padding: 14px 18px;
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.notice--error { border-left-color: var(--accent-dark); }

/* Section separators: hard ink rules open a section, --rule divides internally. */
.band       { border-bottom: 1px solid var(--rule); }
.band--top  { border-top: 1px solid var(--rule); }

/* Vertical rhythm modifiers, applied alongside .container so the horizontal
   gutter is never restated (and so the breakpoints only have to change it once). */
.section-pad      { padding-top: 68px; padding-bottom: 76px; }
.section-pad--end { padding-top: 68px; padding-bottom: 96px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}
.section-more { font-size: 14px; font-weight: 500; color: var(--accent); }

/* ------------------------------------------------------------ 5. Live (/) */

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 72px;
}
.hero-main { padding: 76px 0 84px; }
.hero-main .meta-row { margin-bottom: 30px; }
.hero-main .h-display { margin-bottom: 28px; }
.hero-main .standfirst-hero { margin-bottom: 36px; }
.hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-readtime { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

.hero-rail {
  border-left: 1px solid var(--rule);
  padding: 76px 0 84px 44px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.hero-proposition { font-size: 16px; line-height: 1.6; color: var(--ink-muted); }

/* Update strip — the cadence motif, after the week strip. Twelve five-second
   cells make a minute; a cell is accent when a fix lands in it. A regatta fills
   the strip; a river piece lights one cell in twelve. */
.update-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.update-cell  { height: 7px; background: var(--rule-light); }
.update-cell--fix { background: var(--accent); }

/* A mode, named, with its strip — the idle home rail and the About rail. */
.mode { display: flex; flex-direction: column; gap: 12px; }
.mode + .mode { border-top: 1px solid var(--rule); padding-top: 26px; }
.mode-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mode-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.mode-cadence {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.mode-text { font-size: 15.5px; line-height: 1.55; color: var(--ink-muted); }

/* Recent sessions — the house card, without an image slot (a session has no
   picture of its own). */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--ink);
  padding-top: 20px;
  color: var(--ink);
}
.card:hover { color: var(--ink); text-decoration: none; }
.card-meta {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card-meta .issue { color: var(--accent); }
.card-title { font-size: 23px; line-height: 1.20; letter-spacing: -0.020em; font-weight: 600; text-wrap: pretty; }
.card:hover .card-title { color: var(--accent); }
.card-dek { font-size: 15.5px; line-height: 1.55; color: var(--ink-muted); text-wrap: pretty; }
.card-topic {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: auto;
}

/* ------------------------------------------------------------------- 6. Map */

/* The map takes the place the design gives the hero and lead images, at the
   same heights: 420px under the home hero, 520px on a session. */
/* isolation keeps Leaflet's own z-indexes (panes at 400, controls at 1000)
   inside the frame, so the sticky header still passes over the map. */
.map-frame { position: relative; isolation: isolate; background: var(--paper-sunk); overflow: hidden; }
.map--hero {
  height: 420px;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.map--lead { height: 520px; margin-bottom: 18px; }
.map-fallback { position: absolute; inset: 0; }
.leaflet-container .map-fallback { z-index: 1100; }   /* over Leaflet's panes, if loading fails */
.lead-credit { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faintest); margin-bottom: 72px; }

/* Leaflet, brought into the house style. Its container font, its controls'
   shadows and rounded corners, and its tooltip arrows all go. */
.leaflet-container {
  font-family: var(--font-sans);
  background: var(--paper-sunk);
}
/* Tiles pulled toward the paper palette, so the only colour on the map is the
   accent. */
.leaflet-tile-pane { filter: grayscale(1) sepia(0.12) contrast(0.92) brightness(1.04); }
.leaflet-bar,
.leaflet-touch .leaflet-bar {
  box-shadow: none;
  border: 1px solid var(--border-field);
  border-radius: var(--radius);
}
.leaflet-bar a,
.leaflet-bar a:first-child,
.leaflet-bar a:last-child {
  color: var(--ink);
  background: var(--white);
  border-bottom-color: var(--rule);
  border-radius: 0;
}
.leaflet-bar a:hover { color: var(--accent); background: var(--white); text-decoration: none; }
.leaflet-container .leaflet-control-attribution {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  background: rgba(251, 250, 247, 0.85);
}
.leaflet-control-attribution a { color: var(--ink-faint); }

/* A boat's label: its bow number, in mono, on a paper chip with a hairline. */
.leaflet-tooltip.boat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 1px 5px;
}
.leaflet-tooltip.boat-label::before { display: none; }
.leaflet-tooltip.boat-label.is-highlight { color: var(--accent); border-color: var(--accent); }
.leaflet-tooltip.boat-label.is-stale { color: var(--ink-faint); border-color: var(--ink-faint); }
.leaflet-tooltip.boat-label.is-lost  { color: var(--ink-faintest); border-color: var(--border-field); }

/* ------------------------------------------------- 7. Session (/sessions/<slug>) */

.article-head { padding-top: 64px; }
.article-head .meta-row { margin-bottom: 34px; }
.article-head .h-article { margin-bottom: 26px; }
.article-head .standfirst-art { margin-bottom: 44px; }
.article-head .notice { max-width: 40em; margin-bottom: 44px; }

.article-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 88px;
  align-items: start;
  padding-bottom: 96px;
}
.session-main { min-width: 0; }
.session-main .section-head { margin-bottom: 26px; }

/* The boats table. Header row in mono meta over a hard ink rule, rows divided
   by rule-light — the archive row's treatment, set as a table because the
   numbers are genuinely tabular and should line up. */
.board-wrap { overflow-x: auto; }
.board { width: 100%; border-collapse: collapse; }
.board th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: 0 20px 12px 0;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.board td {
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--rule-light);
  vertical-align: baseline;
  transition: background-color 150ms ease;
}
.board th:last-child, .board td:last-child { padding-right: 0; }
.board tbody tr:hover td,
.board tbody tr.is-highlight td { background: var(--paper-sunk); }
.board-no {
  width: 56px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
}
th.board-no { color: var(--ink-faint); font-size: 10.5px; }
.board-name {
  display: block;
  font-size: 20.5px;
  line-height: 1.30;
  letter-spacing: -0.018em;
  font-weight: 500;
}
.board-sub { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-muted); }
.board .num {
  font-family: var(--font-mono);
  font-size: 15.5px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.board th.num { font-size: 10.5px; letter-spacing: 0.13em; }
.board .num.dim,
.board-age {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* A boat's last fix reads by its age against the mode's interval
   (App\Support\Mode::freshness): current in accent, stale faint, lost fainter. */
.board tr.is-live  .board-age { color: var(--accent); }
.board tr.is-lost  td { color: var(--ink-faint); }
.board tr.is-lost  .board-no { color: var(--ink-faint); }
.board tr.is-silent .board-no { color: var(--ink-faint); }

.board-empty {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding: 24px 0;
  border-top: 1px solid var(--ink);
}
.board-note { margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-faint); max-width: 40em; }

/* Session rail */
.rail {
  position: sticky;
  top: var(--sticky-top);
  display: flex;
  flex-direction: column;
  gap: 34px;
  font-size: 14.5px;
}
.rail-block { display: flex; flex-direction: column; gap: 12px; }
.rail-block + .rail-block { border-top: 1px solid var(--rule); padding-top: 26px; }
.rail-related { display: flex; flex-direction: column; gap: 14px; }
.rail-related a { color: var(--ink); line-height: 1.4; }
.rail-related a:hover { color: var(--accent); text-decoration: none; }
.hero-rail .rail-block { border-top: 1px solid var(--rule); padding-top: 26px; }

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 18px;
  margin: 0;
  align-items: baseline;
}
.facts dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.facts dd { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--ink); }

/* ------------------------------------------------------ 8. Sessions (/sessions) */

.page-head { padding-top: 72px; }
.page-head .h-page { margin-bottom: 20px; }
.page-head .standfirst-page { margin-bottom: 46px; }

.filterbar {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--ink);
}
.filterbar .field { flex: 1; min-width: 260px; width: auto; }
.filter-chip {
  background: var(--white);
  border: 1px solid var(--border-chip);
  border-radius: var(--radius);
  padding: 11px 17px;
  font-size: 14px;
  color: var(--ink-muted);
  white-space: nowrap;
  transition: border-color 150ms ease, color 150ms ease;
}
.filter-chip:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.filter-chip.is-active { border-color: var(--ink); color: var(--ink); }

.month-group {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 48px;
  padding: 40px 0;
  border-bottom: 1px solid var(--rule);
}
.month-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  position: sticky;
  top: var(--sticky-top);
  align-self: start;
}

/* The archive row. Left column is the day ("Sat 12") in accent mono, where
   the publication had its issue number; the 240px right column follows the
   recorded deviation that widened it from the design's 200px. */
.arch-row {
  display: grid;
  grid-template-columns: 64px 1fr 240px;
  gap: 28px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-light);
  color: var(--ink);
  transition: background-color 150ms ease;
}
.arch-row:last-child { border-bottom: 0; }
.arch-row:hover { background: var(--paper-sunk); color: var(--ink); text-decoration: none; }
.arch-no { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); white-space: nowrap; }
.arch-title { font-size: 20.5px; line-height: 1.30; letter-spacing: -0.018em; font-weight: 500; text-wrap: pretty; }
.arch-row:hover .arch-title { color: var(--accent); }
.arch-venue { font-size: 15.5px; font-weight: 400; letter-spacing: 0; color: var(--ink-muted); }
.arch-row:hover .arch-venue { color: var(--ink-muted); }
.arch-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: right;
  white-space: nowrap;
}

.rows { min-width: 0; }

.arch-empty {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding: 40px 0;
}
.arch-foot { padding: 44px 0 96px; text-align: center; }

/* ----------------------------------------------------------- 9. About (/about) */

.about-grid {
  padding-top: 72px;
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 88px;
  align-items: start;
}
.about-grid .h-page { max-width: 20em; margin-bottom: 32px; }
.about-body { max-width: 38em; font-size: 19.5px; line-height: 1.72; color: var(--ink-soft); }
.about-body p { margin: 0 0 28px; }

.stat-row {
  border-top: 1px solid var(--ink);
  margin-top: 44px;
  padding-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.stat-figure { font-family: var(--font-mono); font-size: 34px; letter-spacing: -0.03em; }
.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 6px;
}

.about-work { border-top: 1px solid var(--rule); margin-top: 44px; padding-top: 30px; }
.about-work .kicker { margin-bottom: 18px; }
.about-work p { font-size: 18px; line-height: 1.65; color: var(--ink-muted); margin: 0 0 22px; max-width: 34em; }

/* The rail the About page gives a portrait holds the two modes instead. */
.about-rail {
  display: flex;
  flex-direction: column;
  gap: 26px;
  border-top: 1px solid var(--ink);
  padding-top: 26px;
}

/* ------------------------------------------------------------ 10. Not found */

.notfound { padding-top: 96px; padding-bottom: 120px; }
.notfound > * { max-width: 34em; }
.notfound .h-page { margin-bottom: 20px; }
.notfound p { font-size: 19.5px; line-height: 1.7; color: var(--ink-muted); margin-bottom: 30px; }

/* ---------------------------------------------------------- 11. Responsive
   The handoff's breakpoints, as the sibling site implements them: 1100 / 820 /
   700px. Mono metadata never scales below 10px.                              */

/* <=1100px — collapse every "1fr Npx" two-column grid. The session rail moves
   above the boats table as a row of blocks, so the facts survive on a tablet. */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }

  .hero-grid,
  .article-grid,
  .about-grid { grid-template-columns: 1fr; gap: 0; }

  .hero-main { padding-bottom: 44px; }
  .hero-rail {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding: 40px 0 60px;
  }

  .article-grid { gap: 40px; }

  .rail {
    position: static;
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px 40px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 24px;
  }
  .rail-block + .rail-block { border-top: 0; padding-top: 0; }
  .rail-block { flex: 1 1 220px; }

  .cards { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .about-rail { margin-top: 44px; }
  .month-group { grid-template-columns: 120px 1fr; gap: 28px; }
}

/* <=820px — single column throughout; the archive row's right-hand column drops
   under the title; gutters tighten to 24px. */
@media (max-width: 820px) {
  :root { --gutter: 24px; --sticky-top: 92px; }

  .site-header .container { gap: 16px; }

  .cards { grid-template-columns: 1fr; gap: 40px; }

  .map--hero { height: 320px; border-left: 0; border-right: 0; }
  .map--lead { height: 360px; }

  .stat-row { grid-template-columns: 1fr 1fr; gap: 24px; }

  .month-group { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .month-label { position: static; }

  /* Day and name on one line, meta beneath. */
  .arch-row {
    grid-template-columns: 56px 1fr;
    gap: 6px 16px;
    padding: 14px 0;
  }
  .arch-meta { grid-column: 2; text-align: left; white-space: normal; }

  /* Boats table: the sub-line goes, the figures stay. */
  .board td { padding-top: 12px; padding-bottom: 12px; }
  .board-sub { display: none; }
  .board-name { font-size: 17px; }
  .board .num { font-size: 14px; }

  .site-footer .container { grid-template-columns: 1fr; gap: 34px; padding: 40px var(--gutter) 48px; }

  /* Vertical rhythm compresses with the gutter; the horizontal padding is
     .container's and needs no restating here. */
  .section-pad      { padding-top: 48px; padding-bottom: 52px; }
  .section-pad--end { padding-top: 48px; padding-bottom: 64px; }
  .article-head     { padding-top: 40px; }
  .page-head        { padding-top: 48px; }
  .about-grid       { padding-top: 48px; padding-bottom: 64px; }
  .lead-credit      { margin-bottom: 44px; }
  .article-head .standfirst-art { margin-bottom: 32px; }
}

/* <=700px — the type scale steps down. Mono metadata deliberately does not. */
@media (max-width: 700px) {
  .h-display { font-size: 38px; letter-spacing: -0.03em; }
  .h-article { font-size: 36px; letter-spacing: -0.03em; }
  .h-page    { font-size: 34px; letter-spacing: -0.03em; }

  .standfirst-hero { font-size: 19px; }
  .standfirst-art  { font-size: 19px; }
  .standfirst-page { font-size: 18px; }

  .about-body { font-size: 18px; }
  .card-title { font-size: 21px; }
  .arch-title { font-size: 18px; }
  .h-article { max-width: none; }

  /* The nav becomes a disclosure menu once JavaScript has marked the page
     (html.js). Without it the nav stays a visible list of links. The CTA stays
     visible beside the toggle. */
  .js .nav-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
  }
  .js .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 8px var(--gutter) 16px;
  }
  .site-header .container { position: relative; }
  .js .nav.is-open { display: flex; }
  .js .nav-item { padding: 12px 0; border-bottom: 1px solid var(--rule-light); }
  .js .nav-item .bar { display: none; }
  .js .nav-item.is-active { color: var(--accent); }
  .nav { gap: 20px; }

  .stat-row { grid-template-columns: 1fr; gap: 20px; }
  .filterbar .field { min-width: 0; flex: 1 1 100%; }
}

/* Users who ask for less motion get none. The design is barely animated
   anyway — only hover colour and the nav disclosure. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  .site-header, .site-footer, .rail, .cta, .map-frame { display: none; }
  body { background: #fff; }
}