/* ==========================================================================
   Three Forks of the Flathead - Wild & Scenic River Access Guide
   Design direction: "Confluence"
   Tokens lifted verbatim from docs/design/HANDOFF.md
   ========================================================================== */

:root {
  /* color - dark ground */
  --color-spruce-black: #0E1D18;
  --color-pool: #17332D;
  --color-pool-deep: #12281F;
  --color-pool-highlight: #1D4038;

  /* color - light surfaces */
  --color-stone: #EDE9E0;
  --color-stone-bright: #FAF8F2;
  --color-ink: #12221E;

  /* color - text on dark */
  --color-text: #EDE9E0;
  --color-text-secondary: #C4CFC9;
  --color-text-tertiary: #D8DFDA;
  --color-mono-dim: #93A8A2;
  /* Handoff value was #748882, which reads 3.61:1 on the raised pool surface -
     under the 4.5:1 AA floor for the small mono type it is used for. Lifted
     until it clears AA on the ground, the pool, AND the red-tinted whitewater
     row in the float table, which is the darkest surface this type sits on. */
  --color-mono-faint: #90A49E;

  /* color - accents */
  --color-glacier: #63B4AB;
  --color-glacier-bright: #9FE0D6;
  --color-glacier-deep: #1D6E67;
  --color-mercantile: #9C3B2A;
  --color-mercantile-dark: #C8563F;  /* graphics only: dots, rules, rail segments (3:1 floor) */
  /* Same red pulled down until white text on it clears 4.5:1 - the handoff
     value gives 4.32:1, which fails for the Donate button. */
  --color-mercantile-btn: #C4523B;
  --color-flag-tint: #E8A796;
  --color-flag-tint-bright: #EFC3B5;

  /* partners */
  --color-fra-blue: #3C74C4;
  --color-dream-orange: #E08A4C;

  /* type */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Public Sans', system-ui, -apple-system, sans-serif;
  --font-data: 'Space Mono', ui-monospace, Menlo, Consolas, monospace;

  /* type scale */
  --text-h1-hero: 66px;
  --text-h1: 58px;
  --text-h2: 34px;
  --text-h3: 24px;
  --text-data-xl: 46px;
  --text-data-lg: 34px;
  --text-body-lg: 18.5px;
  --text-body: 16px;
  --text-card: 13.5px;
  --text-mono: 11px;
  --text-mono-label: 10px;

  /* space + radius */
  --space-gutter: 44px;
  --gap-seam: 6px;
  --gap-card: 18px;
  --radius-band: 10px;
  --radius-card: 12px;
  --radius-media: 14px;
  --radius-btn: 6px;
  --radius-pill: 999px;
  --page-max: 1360px;

  /* scrim used over photography, consistent across heroes */
  --scrim-deep: rgba(8, 16, 13, .94);
  --scrim-mid: rgba(8, 16, 13, .6);
  --scrim-light: rgba(8, 16, 13, .35);
}

/* --------------------------------------------------------------------------
   Fonts - self-hosted (open license: SIL OFL)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4-variable.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('fonts/public-sans-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/space-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/space-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--color-spruce-black);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* `clip`, not `hidden`: it contains the full-bleed breakout without creating
     a scroll container, so position:sticky on the site rail still works. */
  overflow-x: clip;
}

img, video { max-width: 100%; display: block; }

a { color: var(--color-glacier); }
a:hover { color: var(--color-glacier-bright); }

:focus-visible {
  outline: 3px solid var(--color-glacier);
  outline-offset: 3px;
  border-radius: 3px;
}
/* On stone surfaces the teal ring needs the deeper value to hold contrast */
.on-stone :focus-visible,
.site-header :focus-visible,
.survey-card :focus-visible {
  outline-color: var(--color-glacier-deep);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; }
p { margin: 0; }

/* Skip link - first tab stop */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  background: var(--color-stone-bright);
  color: var(--color-ink);
  font: 600 15px var(--font-body);
  padding: 12px 20px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: top .12s ease;
}
.skip-link:focus { top: 8px; color: var(--color-ink); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Page shell - contained at 1360, dark gutters
   -------------------------------------------------------------------------- */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  background: var(--color-spruce-black);
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Full-bleed bands
   The page grid is contained at 1360, but the header, the heroes, and the
   footer run the full width of the window so they read as bands rather than
   floating cards. Their CONTENTS stay on the 1360 grid.
   -------------------------------------------------------------------------- */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.bleed-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  width: 100%;
}

.band { padding: 56px var(--space-gutter) 70px; }
.band--quiet { padding: 96px var(--space-gutter) 88px; }
.band--tight { padding: 34px var(--space-gutter) 12px; }
.band--flush { padding: 0 var(--space-gutter) 84px; }

/* --------------------------------------------------------------------------
   Typography utilities
   -------------------------------------------------------------------------- */
.mono {
  font-family: var(--font-data);
  font-size: var(--text-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-mono-dim);
}
.mono--label { font-size: var(--text-mono-label); letter-spacing: .16em; }
.mono--wide  { letter-spacing: .22em; }
.mono--faint { color: var(--color-mono-faint); }
.mono--glacier { color: var(--color-glacier-bright); }
.mono--flag { color: var(--color-flag-tint); }

.eyebrow {
  font-family: var(--font-data);
  font-size: var(--text-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-glacier);
}

.lede {
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.h2 { font-size: var(--text-h2); color: var(--color-stone-bright); }
.h3 { font-size: var(--text-h3); color: var(--color-stone-bright); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Buttons + pills
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font: 600 15.5px var(--font-body);
  padding: 13px 24px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  /* <button> otherwise inherits the UA's grey field background */
  background: none;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.btn--solid { background: var(--color-stone-bright); color: var(--color-ink); }
.btn--solid:hover { background: #fff; color: var(--color-ink); }
.btn--ghost { border-color: rgba(250, 248, 242, .7); color: var(--color-stone-bright); }
.btn--ghost:hover { border-color: var(--color-stone-bright); color: var(--color-stone-bright); }
.btn--red { background: var(--color-mercantile-btn); color: #fff; }
.btn--red:hover { background: #b0492f; color: #fff; }
.btn--sm { font-size: 14.5px; padding: 12px 22px; }

/* Chips carry the designation facts - class, designated miles, where Wild
   becomes Recreational - and an outline alone put them straight onto a sunlit
   hero where they disappeared. Frosted glass: a dark translucent fill, a blur
   behind it, and a light top edge so each chip reads as a raised pane. */
.chip {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-stone-bright);
  background: rgba(10, 22, 19, .42);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(237, 233, 224, .22);
  border-top-color: rgba(255, 255, 255, .34);
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  box-shadow: 0 2px 12px rgba(8, 16, 13, .3);
  text-shadow: 0 1px 2px rgba(8, 16, 13, .5);
}
/* Where the blur is unsupported the fill has to carry the contrast alone. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chip { background: rgba(10, 22, 19, .72); }
}
.chip-row { display: flex; gap: 9px; flex-wrap: wrap; }

.pill-on-photo {
  font-family: var(--font-data);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-stone);
  background: var(--scrim-mid);
  padding: 6px 11px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Header - stone band
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--color-stone);
  color: var(--color-ink);
}

.site-title-block {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 560px;
}
.site-title-block > * { overflow-wrap: anywhere; }
.site-header__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px var(--space-gutter);
}
.site-header__logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--color-ink);
}
.site-header__name {
  font: 600 20px var(--font-display);
  letter-spacing: .005em;
}
.site-header__tag {
  font: 400 10px var(--font-data);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #4d5a53;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font: 600 14.5px var(--font-body);
}
.site-nav a { color: #26302a; text-decoration: none; }
.site-nav a:hover { color: var(--color-ink); }
.site-nav a[aria-current] {
  color: var(--color-ink);
  border-bottom: 2.5px solid var(--color-mercantile);
  padding-bottom: 3px;
}
.site-nav .btn--support {
  background: var(--color-mercantile);
  color: #fff;
  padding: 9px 18px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  text-decoration: none;
}
.site-nav .btn--support:hover { background: #b04531; color: #fff; }

/* Mobile nav toggle - hidden on desktop */
.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid rgba(18, 34, 30, .3);
  border-radius: var(--radius-btn);
  color: var(--color-ink);
  font: 600 14px var(--font-body);
  padding: 9px 14px;
  cursor: pointer;
}

/* Rivers dropdown ----------------------------------------------------------
   Opens on hover, on focus, and on click. The :focus-within rule is what makes
   it work with JavaScript blocked - the trigger is a real <button>, so a tap or
   a Tab focuses it and the menu appears without a script. */
.nav-drop { position: relative; }
.nav-drop__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: #26302a;
  font: 600 14.5px var(--font-body);
  cursor: pointer;
}
.nav-drop__btn:hover { color: var(--color-ink); }
.nav-drop__btn.is-current {
  color: var(--color-ink);
  border-bottom: 2.5px solid var(--color-mercantile);
  padding-bottom: 3px;
}
.nav-drop__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .55;
  transition: transform .14s ease;
}
.nav-drop__btn[aria-expanded="true"] .nav-drop__caret { transform: rotate(180deg); }

.nav-drop__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  z-index: 60;
  min-width: 268px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--color-stone-bright);
  border: 1px solid rgba(18, 34, 30, .12);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 44px rgba(8, 16, 13, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
/* The strip closes the 14px gap between button and menu so the pointer can
   travel down without the menu flickering shut. */
.nav-drop__menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu,
.nav-drop__btn[aria-expanded="true"] + .nav-drop__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-drop__menu a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 13px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  color: #26302a;
}
.nav-drop__menu a:hover,
.nav-drop__menu a:focus-visible { background: rgba(29, 110, 103, .09); color: var(--color-ink); }
.nav-drop__name { font: 600 15px var(--font-body); }
.nav-drop__meta {
  font: 400 var(--text-mono-label) var(--font-data);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5b675f;
}
/* Glacier is a neighbour, not a fork; a rule says so without a heading. */
.nav-drop__aside { margin-top: 6px; border-top: 1px solid rgba(18, 34, 30, .12); padding-top: 12px; border-radius: 0 0 var(--radius-btn) var(--radius-btn); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 680px;
  overflow: hidden;
  background-color: #0a1512;
  /* full-bleed: the photograph runs to the window edges */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* ...but the words stay on the 1360 grid */
.hero__body {
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}
.hero--short { height: 480px; }
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* The film sits over its own first frame and fades in on `playing`, so a slow
   connection or a blocked autoplay just leaves the poster in place. */
.hero__video {
  opacity: 0;
  transition: opacity .7s ease;
}
.hero__video.is-playing { opacity: 1; }

/* Pause control - WCAG 2.2.2. Hidden until the film actually starts. */
.hero__motion {
  position: absolute;
  top: 18px;
  right: max(var(--space-gutter), calc(50vw - var(--page-max) / 2));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  border: 1px solid rgba(237, 233, 224, .28);
  border-radius: var(--radius-pill);
  background: rgba(8, 16, 13, .55);
  backdrop-filter: blur(6px);
  color: var(--color-stone-bright);
  font: 600 12px var(--font-body);
  cursor: pointer;
}
.hero__motion::before {
  content: "";
  width: 9px;
  height: 11px;
  flex: none;
  background: currentColor;
  /* two bars = pause */
  clip-path: polygon(0 0, 3.5px 0, 3.5px 11px, 0 11px, 0 0, 5.5px 0, 9px 0, 9px 11px, 5.5px 11px);
}
.hero__motion.is-paused::before {
  /* triangle = play */
  clip-path: polygon(0 0, 9px 5.5px, 0 11px);
}
.hero__motion:hover { background: rgba(8, 16, 13, .78); }
.hero__motion:focus-visible {
  outline: 2px solid var(--color-glacier-bright);
  outline-offset: 2px;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--scrim-deep) 0%,
    rgba(8, 16, 13, .62) 38%,
    rgba(8, 16, 13, .3) 62%,
    rgba(8, 16, 13, .08) 82%);
}
.hero__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 112px;
  padding: 0 var(--space-gutter);
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.hero__body > * { max-width: 820px; }
.hero--short .hero__body { bottom: 40px; }
.hero__eyebrow {
  align-self: flex-start;
  font: 400 11.5px var(--font-data);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-glacier-bright);
  background: rgba(8, 16, 13, .55);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
}
.hero__title {
  font-size: var(--text-h1-hero);
  line-height: 1.03;
  color: var(--color-stone-bright);
  text-wrap: balance;
}
.hero__lede {
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: #E2E8E2;
  max-width: 640px;
}
.hero__actions { display: flex; gap: 14px; margin-top: 4px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Instrument bar - live flows on the hero's bottom edge
   -------------------------------------------------------------------------- */
/* The band runs the full width of the hero; the readouts sit on the grid. */
.instruments {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(8, 16, 13, .78);
  border-top: 1px solid rgba(237, 233, 224, .16);
  backdrop-filter: blur(3px);
}
.instruments__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  padding: 0 var(--space-gutter);
}
.instrument {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 26px;
  border-right: 1px solid rgba(237, 233, 224, .12);
  text-decoration: none;
}
.instrument:first-child { padding-left: 0; }
.instrument__label {
  font: 400 9.5px var(--font-data);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-mono-dim);
}
.instrument__value {
  font: 400 12px var(--font-data);
  color: var(--color-mono-dim);
}
.instrument__value b {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-stone);
}
.instrument__status { border-right: 0; margin-left: auto; padding-right: 0; justify-content: center; }
.trend--rising  { color: var(--color-glacier-bright); }
.trend--holding { color: var(--color-glacier-bright); }
.trend--dropping{ color: var(--color-flag-tint); }
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-glacier-bright);
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Fork triptych
   -------------------------------------------------------------------------- */
.triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-seam);
  padding: 18px var(--gap-seam) 0;
}
.fork-card {
  position: relative;
  height: 600px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: var(--color-text);
  background-color: #0a1512;
}
.fork-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.fork-card:hover .fork-card__img { transform: scale(1.03); }
.fork-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(8, 16, 13, .92) 0%,
    rgba(8, 16, 13, .42) 38%,
    rgba(8, 16, 13, .05) 62%);
}
.fork-card__tag {
  position: absolute; top: 18px; left: 18px;
  font: 700 11px var(--font-data);
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--scrim-mid);
  border: 1px solid rgba(237, 233, 224, .25);
  color: var(--color-stone);
  padding: 6px 11px;
  border-radius: 4px;
}
.fork-card__body {
  position: absolute;
  left: 22px; right: 22px; bottom: 20px;
  display: flex; flex-direction: column; gap: 9px;
}
.fork-card__title { font-size: 38px; color: var(--color-stone-bright); }
.fork-card__desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}
.fork-card__meta {
  font: 400 11.5px var(--font-data);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-glacier-bright);
}

/* --------------------------------------------------------------------------
   River-mile rail - the signature element
   left% = (1 - rm / designated_miles) x 100
   -------------------------------------------------------------------------- */
.rail {
  position: relative;
  height: 30px;
  margin-top: 4px;
}
.rail__line {
  position: absolute;
  left: 0; right: 0; top: 4px;
  height: 1.5px;
  background: rgba(237, 233, 224, .4);
}
.rail__line--dashed {
  height: 0;
  background: none;
  border-top: 1.5px dashed rgba(237, 233, 224, .35);
}
.rail__whitewater {
  position: absolute;
  top: 3.25px;
  height: 3px;
  background: var(--color-mercantile-dark);
  border-radius: 2px;
}
.rail__tick {
  position: absolute;
  top: 0;
  width: 2px;
  height: 10px;
  background: var(--color-stone);
}
/* Break in the rail where a reservoir interrupts the designated reach */
.rail__reservoir {
  position: absolute;
  top: 33px;
  width: 26px;
  height: 16px;
  transform: translateX(-50%) skewX(-18deg);
  background: var(--color-spruce-black);
  border-left: 1.5px solid rgba(237, 233, 224, .3);
  border-right: 1.5px solid rgba(237, 233, 224, .3);
}
.rail__label {
  position: absolute;
  top: 14px;
  white-space: nowrap;
  font: 400 10px var(--font-data);
  color: var(--color-mono-dim);
}
.rail__label--mid { transform: translateX(-50%); }
.rail__label--end { transform: translateX(-100%); }
.rail__label--flag { color: var(--color-flag-tint); }

/* Large rail on fork pages - interactive ticks */
/* 152px, not 132: label rows are 32px apart so a two-line label clears the row
   under it, and three-row forks still need to fit inside the box. */
.rail--full { height: 152px; margin: 0; }
.rail--full .rail__line { top: 40px; }
.rail--full .rail__whitewater { top: 39.25px; height: 3.5px; }
.rail--full .rail__tick {
  top: 33px;
  height: 16px;
  width: 2.5px;
  cursor: pointer;
}
.rail--full a.rail__tick:hover,
.rail--full a.rail__tick:focus-visible { background: var(--color-glacier-bright); height: 24px; top: 29px; }
.rail--full .rail__label { top: 54px; font-size: 10.5px; }
.rail__pin {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  font: 700 10px var(--font-data);
  letter-spacing: .1em;
  color: var(--color-glacier-bright);
  white-space: nowrap;
}

/* Neighbour flow-rail on site pages */
.flow-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-card);
  background: var(--color-pool);
  border-radius: var(--radius-band);
  padding: 22px 26px;
}
.flow-rail__side { display: flex; flex-direction: column; gap: 5px; max-width: 32%; }
.flow-rail__side--next { text-align: right; align-items: flex-end; }
.flow-rail__name {
  font: 600 16px var(--font-body);
  color: var(--color-stone-bright);
  text-decoration: none;
}
.flow-rail__name:hover { color: var(--color-glacier-bright); }
.flow-rail__mid { flex: 1; position: relative; height: 52px; margin-top: 20px; }

/* The rail is a to-scale diagram of the fork, so it needs a legend: which end
   is which, where you are standing, and what the empty upstream run means. */
.rail__tick--link {
  cursor: pointer;
  transition: background .15s ease, height .15s ease, top .15s ease;
}
.rail__tick--link:hover,
.rail__tick--link:focus-visible {
  background: var(--color-glacier-bright);
  height: 15px;
  top: -3px;
}
.rail__tick--link:focus-visible { outline: 2px solid var(--color-glacier-bright); outline-offset: 3px; }

/* The shared rail geometry puts the line at top:4px and ticks at top:0, so
   everything below anchors to that, not to 50% of the taller flow-rail box. */
.rail__roadless-note {
  position: absolute;
  left: 0;
  top: 15px;
  text-align: center;
  font: 400 9.5px var(--font-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-mono-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* you-are-here */
.rail__here {
  position: absolute;
  top: 5px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.rail__here-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-glacier-bright);
  box-shadow: 0 0 0 4px rgba(159, 224, 214, .22);
}
.rail__here-label {
  position: absolute;
  top: 13px;
  text-align: center;
  white-space: nowrap;
  font: 700 10.5px var(--font-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-glacier-bright);
  line-height: 1.5;
}
.rail__here-rm {
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--color-mono-dim);
}

/* end-of-rail scale, sat above the line so it never fights the site labels */
.rail__scale {
  position: absolute;
  top: -16px;
  font: 400 9.5px var(--font-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-mono-faint);
  white-space: nowrap;
}
.rail__scale--start { left: 0; }
.rail__scale--end { right: 0; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--gap-card);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.site-card {
  background: var(--color-pool);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Fills its grid row, so the body takes up the slack and the pictures all
     start and finish at the same line across a row of cards. */
  height: 100%;
  text-decoration: none;
  color: var(--color-text);
  border: 1px solid transparent;
  transition: border-color .15s ease, transform .15s ease;
}
.site-card:hover {
  border-color: rgba(159, 224, 214, .35);
  transform: translateY(-2px);
}
/* Row variant: the roomier listing card on the fork and access-index pages.
   Same stacked shape as the tile, picture on top; grid-auto-rows: 1fr is what
   makes every card in the listing the same height, not just the ones sharing
   a row. It stays out of the way when the grid drops to one column (1080px). */
.card-grid--two {
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  grid-auto-rows: 1fr;
}
.site-card--row .site-card__body { padding: 20px 22px; gap: 7px; }
.site-card--row .site-card__title { font-size: var(--text-h3); }

.site-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-pool-deep);
  overflow: hidden;
  flex: none;
}
/* 🔴 The img carries width/height attributes, which are presentational hints,
   and a hinted height is a DEFINITE height that beats aspect-ratio outright
   (the same trap that rendered the galleries 166x495). Two guards: the
   attributes are themselves 16/9, and height:100% here resolves against the
   frame so the hint never gets a say. Verify by geometry, not by eye -
   getBoundingClientRect().width / .height must be 1.78. */
.site-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Four upper South Fork sites have no capture and no photo. They keep the
   frame so the row still lines up, and read as pending rather than broken. */
.site-card__media--empty {
  background:
    linear-gradient(150deg, var(--color-pool-highlight) 0%, var(--color-pool-deep) 62%);
}
.site-card__badge {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--scrim-mid);
  color: var(--color-stone);
  padding: 5px 9px;
  border-radius: 3px;
}
.site-card__badge--pending {
  background: rgba(156, 59, 42, .82);
  color: #fff;
}
.site-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.site-card__rm {
  font: 400 10px var(--font-data);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-mono-dim);
}
.site-card__title { font-size: 20px; color: var(--color-stone-bright); }
.site-card__desc {
  font-size: var(--text-card);
  line-height: 1.55;
  color: var(--color-text-tertiary);
}
.site-card__flags { margin-top: auto; padding-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.flag {
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid rgba(237, 233, 224, .22);
  color: var(--color-mono-dim);
}
.flag--access { border-color: rgba(99, 180, 171, .5); color: var(--color-glacier-bright); }
.flag--caution { border-color: rgba(200, 86, 63, .55); color: var(--color-flag-tint); }

/* Panel: raised block on dark */
.panel {
  background: var(--color-pool);
  border-radius: var(--radius-band);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.panel--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-seam); padding: 0 var(--gap-seam) var(--gap-seam); background: none; }

/* --------------------------------------------------------------------------
   Live conditions band - fork pages
   Used to be three flat panels butted 6px under the hero. Now it clears the
   hero, and each panel carries a picture of its number rather than the number
   alone: flow against its own long-term normal, a real forecast strip, and an
   alert panel that names what it watches even when it is clear.
   -------------------------------------------------------------------------- */
.conditions-band {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: var(--gap-seam);
  /* the breathing room the old 6px seam never gave it */
  padding: 30px var(--gap-seam) var(--gap-seam);
}
.cond {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px 24px;
  border-radius: var(--radius-band);
  background:
    linear-gradient(168deg, rgba(99, 180, 171, .09), rgba(99, 180, 171, 0) 46%),
    var(--color-pool);
  border: 1px solid rgba(99, 180, 171, .13);
}
/* A hairline of glacier light along the top edge, brightest on the flow panel */
.cond::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--radius-band) var(--radius-band) 0 0;
  background: linear-gradient(90deg, rgba(159, 224, 214, 0), rgba(159, 224, 214, .38), rgba(159, 224, 214, 0));
}
.cond .eyebrow { font-size: 10px; letter-spacing: .18em; }

.cond__readout { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cond__value {
  font: 700 var(--text-data-xl) var(--font-data);
  color: var(--color-stone-bright);
  letter-spacing: -.02em;
  line-height: 1;
}
.cond__value--dim { color: var(--color-mono-dim); font-size: var(--text-data-lg); }
.cond__unit { font: 400 14px var(--font-data); color: var(--color-mono-dim); }
.cond__unit--words { font-size: 12.5px; line-height: 1.5; text-transform: uppercase; letter-spacing: .04em; }
.cond__pill {
  border: 1px solid var(--color-glacier);
  color: var(--color-glacier-bright);
  font: 400 11px var(--font-data);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}
.cond__pill--flag { border-color: var(--color-flag-tint); color: var(--color-flag-tint-bright); }
.cond__foot {
  font-family: var(--font-data);
  font-size: var(--text-mono);
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--color-mono-faint);
  margin-top: auto;
}
.cond__alert {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 600 15px var(--font-body);
  color: var(--color-flag-tint-bright);
}
.cond__alert--clear { color: var(--color-text-tertiary); font-weight: 400; }
.cond__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--color-glacier-bright); }
.cond__dot--flag { background: var(--color-mercantile-dark); }

/* Flow against its own normal ---------------------------------------------- */
.flowbar { display: flex; flex-direction: column; gap: 9px; }
.flowbar__track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(8, 16, 13, .5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.flowbar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-glacier-deep), var(--color-glacier));
}
.flowbar__tick {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: rgba(237, 233, 224, .3);
}
.flowbar__tick i {
  position: absolute;
  top: 15px;
  left: 0;
  transform: translateX(-50%);
  font: 400 8.5px var(--font-data);
  letter-spacing: .1em;
  font-style: normal;
  color: var(--color-mono-faint);
  white-space: nowrap;
}
.flowbar__tick--median { background: rgba(237, 233, 224, .5); }
.flowbar__now {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--color-stone-bright);
  box-shadow: 0 0 0 3px rgba(99, 180, 171, .35), 0 2px 6px rgba(8, 16, 13, .5);
}
.flowbar__caption {
  margin-top: 12px;
  font-family: var(--font-data);
  font-size: var(--text-mono);
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.flowbar__caption b { color: var(--color-glacier-bright); font-weight: 700; }

/* Five days forward -------------------------------------------------------- */
.forecast {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.forecast__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 2px 8px;
  border-radius: var(--radius-btn);
  background: rgba(8, 16, 13, .3);
}
.forecast__label {
  font: 400 9px var(--font-data);
  letter-spacing: .12em;
  color: var(--color-mono-faint);
}
.forecast__glyph { font-size: 13px; line-height: 1; color: var(--color-glacier); }
.forecast__hi { font: 700 15px var(--font-data); color: var(--color-stone-bright); letter-spacing: -.02em; }
.forecast__lo { font: 400 10.5px var(--font-data); color: var(--color-mono-dim); }
.forecast__pop {
  font: 400 9px var(--font-data);
  letter-spacing: .04em;
  color: var(--color-mono-faint);
  min-height: 12px;
}
.forecast__pop.is-wet { color: var(--color-glacier-bright); }

/* --------------------------------------------------------------------------
   360 media frame
   -------------------------------------------------------------------------- */
.viewer {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--color-pool-deep);
}
.viewer iframe { width: 100%; height: 100%; border: 0; display: block; }
.viewer__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewer__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(8,16,13,.5) 100%);
  pointer-events: none;
}
.viewer__cta {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  padding: 0;
}
.viewer__glyph {
  width: 66px; height: 66px;
  border-radius: 50%;
  border: 2.5px solid rgba(250, 248, 242, .9);
  display: flex; align-items: center; justify-content: center;
  background: var(--scrim-light);
  color: var(--color-stone-bright);
  font: 600 23px var(--font-display);
}
.viewer__cta:hover .viewer__glyph { background: rgba(8,16,13,.55); border-color: #fff; }
.viewer__label {
  font: 600 14.5px var(--font-body);
  color: var(--color-stone-bright);
  background: rgba(8, 16, 13, .5);
  padding: 7px 15px;
  border-radius: var(--radius-pill);
}
.viewer__tl { position: absolute; left: 16px; top: 14px; }
.viewer__bl {
  position: absolute;
  left: 16px;
  bottom: 14px;
  max-width: calc(100% - 32px);
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
.viewer__br { position: absolute; right: 16px; bottom: 14px; color: rgba(237,233,224,.75); }

/* --------------------------------------------------------------------------
   Audio description player
   -------------------------------------------------------------------------- */
.ad-player {
  background: var(--color-pool);
  border-radius: var(--radius-card);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ad-player__head { display: flex; flex-direction: column; gap: 6px; }
.ad-player__title { font-size: 18px; color: var(--color-stone-bright); }
.ad-player audio { width: 100%; }
.ad-player__transcript {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-tertiary);
  max-height: 220px;
  overflow-y: auto;
  border-top: 1px solid rgba(237, 233, 224, .14);
  padding-top: 12px;
}

/* --------------------------------------------------------------------------
   Measured Access card - light surface, spec-sheet typography
   Display surface for FRA survey data + Terrain360 Lens fields
   -------------------------------------------------------------------------- */
.survey-card {
  background: var(--color-stone);
  color: var(--color-ink);
  border-radius: var(--radius-card);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.survey-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1.5px solid rgba(18, 34, 30, .18);
  padding-bottom: 12px;
}
.survey-card__title { font-size: 21px; color: var(--color-ink); }
.survey-card__source {
  font: 400 9.5px var(--font-data);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5b6862;
}
.spec-list { display: flex; flex-direction: column; gap: 0; }
.spec {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(18, 34, 30, .1);
}
.spec:last-child { border-bottom: 0; }
.spec__label {
  font: 400 10px var(--font-data);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #5b6862;
}
.spec__value {
  font: 700 14px var(--font-data);
  color: var(--color-ink);
  text-align: right;
}
.spec__value--flag { color: var(--color-mercantile); }
.spec--lens .spec__label::after {
  content: 'LENS';
  margin-left: 8px;
  font-size: 8.5px;
  letter-spacing: .1em;
  color: var(--color-glacier-deep);
  border: 1px solid rgba(29, 110, 103, .4);
  border-radius: 2px;
  padding: 1px 4px;
}
.survey-sheet {
  display: block;
  border-radius: var(--radius-btn);
  overflow: hidden;
  border: 1px solid rgba(18, 34, 30, .15);
}
.survey-card__note {
  font-size: 12.5px;
  line-height: 1.55;
  color: #3d4a44;
}

/* Verbatim concerns block */
.concerns {
  background: var(--color-pool);
  border-left: 3px solid var(--color-mercantile-dark);
  border-radius: 0 var(--radius-band) var(--radius-band) 0;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.concerns h3 { font-size: 18px; color: var(--color-stone-bright); }
.concerns ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.concerns li { font-size: 15px; line-height: 1.6; color: var(--color-text-tertiary); }

/* --------------------------------------------------------------------------
   Terrain360 Access-Site Assessment
   Site-level RAPG findings are kept visually distinct from FRA measurements.
   -------------------------------------------------------------------------- */
.assessment {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border: 1px solid rgba(159, 224, 214, .22);
  border-radius: var(--radius-card);
  background: linear-gradient(145deg, rgba(29, 64, 56, .8), rgba(18, 40, 31, .92));
}
.assessment__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(237, 233, 224, .14);
}
.assessment__head > div { display: flex; flex-direction: column; gap: 6px; }
.assessment__head h2 { font-size: 30px; color: var(--color-stone-bright); }
.assessment__source {
  font: 400 9.5px var(--font-data);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-mono-faint);
  text-align: right;
}
.assessment__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.assessment__panel {
  padding: 18px;
  border-radius: var(--radius-btn);
  background: rgba(8, 16, 13, .28);
}
.assessment__panel h3 {
  margin-bottom: 12px;
  font: 700 11px var(--font-data);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-glacier-bright);
}
.assessment__panel dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.assessment__panel dl > div { display: flex; flex-direction: column; gap: 2px; }
.assessment__panel dt {
  font: 400 9px var(--font-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-mono-faint);
}
.assessment__panel dd { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--color-stone-bright); }
.assessment__sequence {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(237, 233, 224, .14);
}
.assessment__head + .assessment__sequence {
  padding-top: 0;
  border-top: 0;
}
.assessment__sequence-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.assessment__sequence-head h3 {
  font-size: 18px;
  color: var(--color-stone-bright);
}
.assessment__coverage-flag {
  padding: 5px 8px;
  border: 1px solid rgba(232, 167, 150, .38);
  border-radius: 999px;
  font: 700 9px var(--font-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-flag-tint-bright);
}
.assessment__note {
  padding-top: 14px;
  border-top: 1px solid rgba(237, 233, 224, .14);
  font: 400 10px/1.6 var(--font-data);
  color: var(--color-mono-faint);
}

/* --------------------------------------------------------------------------
   Tables - float planning
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
table.data caption {
  text-align: left;
  font-family: var(--font-data);
  font-size: var(--text-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-mono-dim);
  padding-bottom: 12px;
}
table.data th {
  text-align: left;
  font: 400 10px var(--font-data);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-mono-dim);
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid rgba(237, 233, 224, .2);
  white-space: nowrap;
}
table.data td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid rgba(237, 233, 224, .09);
  color: var(--color-text-tertiary);
  vertical-align: baseline;
}
table.data td.num { font-family: var(--font-data); font-size: 13px; white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(200, 86, 63, .12);
  border: 1px solid rgba(200, 86, 63, .4);
  border-radius: var(--radius-band);
  padding: 16px 20px;
}
.alert__label {
  font: 700 10px var(--font-data);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-flag-tint-bright);
  white-space: nowrap;
  padding-top: 2px;
}
.alert__body { font-size: 14.5px; line-height: 1.55; color: var(--color-text-tertiary); }
.alert--clear {
  background: rgba(99, 180, 171, .08);
  border-color: rgba(99, 180, 171, .3);
}
.alert--clear .alert__label { color: var(--color-glacier-bright); }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  /* Site pages set --gallery-cols from the photo count: three photos go three
     across, four go two-by-two. Anything that does not set it falls back to
     the old auto-fill behaviour. */
  grid-template-columns: repeat(var(--gallery-cols, auto-fill), minmax(220px, 1fr));
  gap: var(--gap-card);
}
.gallery figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gallery img {
  width: 100%;
  /* height:auto is load-bearing, not tidiness. Every gallery img carries
     width/height attributes for layout stability, and those map to
     presentational hints - a DEFINITE height, which beats aspect-ratio
     outright. Without this the square below is silently ignored and
     object-fit never engages: the images were rendering 166x495, a third as
     wide as they were tall. */
  height: auto;
  /* Square. At 4/3 a three-across row ran tall enough to push the rest of the
     site page below the fold, and these are landscape river photographs - a
     square crop keeps the water and loses only sky. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-btn);
}
.gallery figcaption {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-mono-dim);
}
/* An explicit `repeat(3, minmax(220px, 1fr))` cannot shrink below its 220px
   floor, so a three-photo gallery needs about 736px of viewport before it
   fits. The two-across override used to start at 560px, which left the whole
   561px to 780px band overflowing: at 640px the third figure ran to right=724
   and the page scrolled sideways. Tablets and small laptop windows, on every
   access page with three photos. Two across from here down, and minmax(0, 1fr)
   so these tracks can actually shrink. */
@media (max-width: 780px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   River long profile
   Replaces the flat neighbour rail. Elevation against river mile, with the
   access sites standing on the line and a panorama on hover.
   -------------------------------------------------------------------------- */
.profile { margin: 0; display: flex; flex-direction: column; gap: 0; }
.profile__plot {
  position: relative;
  height: 210px;
  /* room for the markers and their labels to sit proud of the drawing */
  margin: 26px 0 0;
}
.profile--compact .profile__plot { height: 150px; }
.profile__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.profile__site {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  z-index: 2;
  text-decoration: none;
  border-radius: 50%;
}
.profile__dot {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--color-stone-bright);
  box-shadow: 0 0 0 2px rgba(8, 16, 13, .75), 0 1px 4px rgba(8, 16, 13, .6);
  transition: transform .16s ease, background .16s ease;
}
.profile__site:hover .profile__dot,
.profile__site:focus-visible .profile__dot { transform: scale(1.45); background: var(--color-glacier-bright); }
.profile__site.is-here { z-index: 4; }
.profile__site.is-here .profile__dot {
  inset: 3px;
  background: var(--color-mercantile-dark);
  box-shadow: 0 0 0 3px rgba(8, 16, 13, .8), 0 0 0 6px rgba(200, 86, 63, .32);
}

/* Hover card - the panorama nearest the water at that site */
.profile__card {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 5px);
  width: 216px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px;
  border-radius: var(--radius-card);
  background: rgba(10, 22, 19, .93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(159, 224, 214, .26);
  box-shadow: 0 14px 34px rgba(8, 16, 13, .55);
  pointer-events: none;
  /* display, not visibility: a hidden-but-laid-out card is still 216px wide,
     and the ones near the right hand end of the plot pushed the whole page
     34px past the viewport on a phone. display:none contributes no layout.
     The fade is progressive - browsers without allow-discrete just snap. */
  display: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease, display .15s allow-discrete;
}
.profile__site:hover .profile__card,
.profile__site:focus-visible .profile__card {
  display: flex;
  opacity: 1;
  transform: translate(-50%, 0);
}
@starting-style {
  .profile__site:hover .profile__card,
  .profile__site:focus-visible .profile__card { opacity: 0; transform: translate(-50%, 5px); }
}
.profile__card img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--radius-btn);
  margin-bottom: 4px;
}
.profile__card b { font: 600 14px var(--font-body); color: var(--color-stone-bright); }
.profile__card i,
.profile__card u {
  font: 400 10px var(--font-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-style: normal;
  text-decoration: none;
  color: var(--color-mono-dim);
}
.profile__card u { color: var(--color-glacier-bright); }
/* Cards near either end would hang off the plot, so they lean inward. */
.profile__site--left .profile__card { left: 0; transform: translate(0, 5px); }
.profile__site--left:hover .profile__card,
.profile__site--left:focus-visible .profile__card { transform: translate(0, 0); }
.profile__site--right .profile__card { left: auto; right: 0; transform: translate(0, 5px); }
.profile__site--right:hover .profile__card,
.profile__site--right:focus-visible .profile__card { transform: translate(0, 0); }

@media (max-width: 560px) {
  /* A 216px card centred on its marker cannot stay inside a 390px screen from
     most positions on the plot, so on phones it pins to the left of the plot
     and narrows instead of tracking the marker. */
  .profile__plot { height: 165px; }
  .profile--compact .profile__plot { height: 135px; }
  .profile__card,
  .profile__site--left .profile__card,
  .profile__site--right .profile__card {
    left: 0;
    right: auto;
    width: min(216px, calc(100vw - 62px));
    transform: translate(0, 5px);
  }
  .profile__site:hover .profile__card,
  .profile__site:focus-visible .profile__card,
  .profile__site--left:hover .profile__card,
  .profile__site--left:focus-visible .profile__card,
  .profile__site--right:hover .profile__card,
  .profile__site--right:focus-visible .profile__card { transform: translate(0, 0); }
  .profile__foot { gap: 12px; }
  .profile__mid { text-align: left; flex-basis: 100%; order: 3; }
}

/* Elevation gridline labels, drawn in HTML so they keep their size */
.profile__gridlabel {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  padding-left: 2px;
  font: 400 9px var(--font-data);
  letter-spacing: .1em;
  color: var(--color-mono-faint);
  opacity: .75;
  pointer-events: none;
}

.profile__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 14px;
  margin-top: 10px;
  border-top: 1px solid rgba(237, 233, 224, .14);
}
.profile__end,
.profile__mid {
  font-family: var(--font-data);
  font-size: var(--text-mono-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-mono-faint);
}
.profile__end { display: flex; flex-direction: column; gap: 3px; }
.profile__end--right { text-align: right; }
.profile__end b {
  font-size: 19px;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--color-stone-bright);
}
.profile__mid { text-align: center; color: var(--color-text-secondary); }
.profile__key { color: var(--color-flag-tint); }
.profile__key::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 2px;
  background: var(--color-mercantile-dark);
  opacity: .5;
}
.profile__source { margin-top: 12px; line-height: 1.6; }

/* Today's conditions, site page rail ---------------------------------------- */
.today {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 20px;
  border-radius: var(--radius-media);
  background:
    linear-gradient(168deg, rgba(99, 180, 171, .1), rgba(99, 180, 171, 0) 55%),
    var(--color-pool);
  border: 1px solid rgba(99, 180, 171, .14);
}
.today__row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.today__figure {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font: 700 var(--text-data-lg) var(--font-data);
  letter-spacing: -.02em;
  color: var(--color-stone-bright);
  line-height: 1;
}
.today__figure i { font: 400 12px var(--font-data); font-style: normal; color: var(--color-mono-dim); }
.today__figure--dim { color: var(--color-mono-dim); }
.today__context {
  font-family: var(--font-data);
  font-size: var(--text-mono);
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.today__context b { color: var(--color-glacier-bright); }
.today__weather {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 12px;
  margin-top: 2px;
  border-top: 1px solid rgba(237, 233, 224, .13);
}
.today__temp { font: 700 30px var(--font-data); letter-spacing: -.02em; color: var(--color-stone-bright); line-height: 1; }
.today__sky {
  flex: 1;
  font: 400 10.5px var(--font-data);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--color-mono-dim);
}
.today__tomorrow {
  text-align: right;
  font: 400 9px var(--font-data);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--color-mono-faint);
}
.today__tomorrow b { font-size: 15px; color: var(--color-stone-bright); letter-spacing: -.01em; }
.today__foot {
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: .09em;
  line-height: 1.6;
  color: var(--color-mono-faint);
}

/* Upstream / downstream pair under the profile on a site page */
.neighbours {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(237, 233, 224, .14);
}
.neighbours__side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  min-width: 0;
}
.neighbours__side--right { text-align: right; align-items: flex-end; }
.neighbours__name { font: 600 19px var(--font-display); color: var(--color-glacier-bright); }
a.neighbours__side:hover .neighbours__name { color: var(--color-stone-bright); }
.neighbours__name--quiet { color: var(--color-mono-dim); font-weight: 400; }

/* --------------------------------------------------------------------------
   Map page
   -------------------------------------------------------------------------- */
.map-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: var(--gap-seam);
  padding: 0 var(--gap-seam) var(--gap-seam);
  min-height: 720px;
}
.map-rail {
  background: var(--color-pool-deep);
  border-radius: var(--radius-band);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.map-rail__head {
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(237, 233, 224, .1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.map-rail__list {
  overflow-y: auto;
  flex: 1;
  max-height: 620px;
  margin: 0; padding: 0;
  list-style: none;
}
.map-rail__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(237, 233, 224, .07);
  padding: 14px 22px;
  cursor: pointer;
  color: var(--color-text);
  font: inherit;
}
.map-rail__item:hover { background: var(--color-pool); }
.map-rail__item[aria-current="true"] { background: var(--color-pool-highlight); }
.map-rail__item h3 { font-size: 16px; color: var(--color-stone-bright); }
.map-canvas {
  border-radius: var(--radius-band);
  overflow: hidden;
  background: var(--color-pool-deep);
  min-height: 720px;
}
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.filter {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid rgba(237, 233, 224, .3);
  border-radius: var(--radius-pill);
  color: var(--color-mono-dim);
  padding: 6px 12px;
  cursor: pointer;
}
.filter[aria-pressed="true"] {
  background: var(--color-stone);
  border-color: var(--color-stone);
  color: var(--color-ink);
}
/* MapLibre's attribution control ships links with no underline, which fails
   WCAG 1.4.1 (colour alone conveying the link). Vendor markup, our page.
   maplibre-gl.css loads after this file, so the selector needs the extra
   specificity to win the cascade. */
.map-canvas .maplibregl-ctrl-attrib a,
.maplibregl-ctrl-attrib a { text-decoration: underline; }

.legend { display: flex; flex-direction: column; gap: 7px; }
.legend__row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--color-text-secondary); }
.legend__swatch { width: 18px; height: 3px; border-radius: 2px; flex: none; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid rgba(237, 233, 224, .1);
  margin-top: 40px;
}
.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px var(--space-gutter) 32px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font: 400 11px var(--font-data);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-mono-faint);
}
.site-footer a { color: var(--color-mono-dim); text-decoration: none; }
.site-footer a:hover { color: var(--color-glacier-bright); }
/* Who publishes this site. Its own line, and in sentence case rather than the
   footer's mono caps, because it is a statement and not a data readout. */
.site-footer__provenance {
  flex-basis: 100%;
  text-transform: none;
  letter-spacing: .01em;
  font: 400 12.5px/1.65 var(--font-body);
  color: var(--color-mono-dim);
  border-top: 1px solid rgba(237, 233, 224, .1);
  padding-top: 16px;
}
.site-footer__provenance a { text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Flow context - today's reading against the day-of-year median
   -------------------------------------------------------------------------- */
.flow-context {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.flow-context__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  font: 700 13px var(--font-data);
  letter-spacing: .04em;
  border: 1px solid transparent;
}
.flow-context__pill--normal {
  background: rgba(99, 180, 171, .14);
  border-color: rgba(99, 180, 171, .4);
  color: var(--color-glacier-bright);
}
.flow-context__pill--high {
  background: rgba(200, 86, 63, .14);
  border-color: rgba(200, 86, 63, .45);
  color: var(--color-flag-tint);
}
.flow-context__pill--low {
  background: rgba(224, 196, 122, .12);
  border-color: rgba(224, 196, 122, .4);
  color: #E0C47A;
}
.flow-context__pill--unknown {
  background: rgba(237, 233, 224, .08);
  border-color: rgba(237, 233, 224, .2);
  color: var(--color-mono-dim);
}

/* Two-up: a picture beside the panel that explains it. */
.cam-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--gap-seam);
  align-items: start;
}
.cam-split--wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

.forecast-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.forecast-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: var(--radius-btn);
  background: rgba(8, 16, 13, .32);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Live webcam panel
   -------------------------------------------------------------------------- */
.webcam {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-pool-deep);
  border: 1px solid rgba(237, 233, 224, .14);
}
.webcam img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.webcam__stamp {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(8, 16, 13, .72);
  backdrop-filter: blur(5px);
  font: 400 10.5px var(--font-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-stone-bright);
}
.webcam__live {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-glacier-bright);
  margin-right: 7px;
  vertical-align: 1px;
}

/* --------------------------------------------------------------------------
   Map popup call-to-action
   MapLibre moves focus into the popup when it opens, so the browser's default
   focus ring was landing on this link the moment a pin was clicked and reading
   as a stray border. It is a solid button now, with a focus ring we chose.
   -------------------------------------------------------------------------- */
.map-popup__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  padding: 9px 15px;
  border-radius: var(--radius-btn);
  background: #17605A;
  color: #FFFFFF;
  font: 600 13px var(--font-body);
  text-decoration: none;
  transition: background .15s ease;
}
.map-popup__cta:hover,
.map-popup__cta:visited { color: #FFFFFF; }
.map-popup__cta:hover { background: #0F4A45; }
.map-popup__cta:focus { outline: none; }
.map-popup__cta:focus-visible {
  outline: 2px solid #0F4A45;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Partner marks
   FRA's mark is deep blue, DREAM's is navy and rust. Both are drawn for white
   paper, so on this dark ground each sits on a light chip rather than being
   recoloured - their brands stay their brands.
   -------------------------------------------------------------------------- */
.partner-marks {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.partner-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: var(--radius-btn);
  background: #F4F2ED;
  border: 1px solid rgba(237, 233, 224, .16);
  transition: background .18s ease, transform .18s ease;
}
.partner-mark img {
  display: block;
  height: 30px;
  width: auto;
}
.partner-mark--sm { padding: 8px 12px; }
.partner-mark--sm img { height: 24px; }
a.partner-mark:hover { background: #FFFFFF; transform: translateY(-1px); }
a.partner-mark:focus-visible {
  outline: 2px solid var(--color-glacier-bright);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Glacier band - home page
   Lake McDonald is the largest single capture on this site by an order of
   magnitude. It used to be a paragraph with a 300px thumbnail. It gets the
   full width and a real photograph now, and the numbers come from the trail
   metadata so they cannot drift from what is published.
   -------------------------------------------------------------------------- */
.glacier-band {
  position: relative;
  display: block;
  min-height: 460px;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}
.glacier-band__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  transition: transform 1.1s cubic-bezier(.2, .7, .3, 1);
}
.glacier-band:hover .glacier-band__media { transform: scale(1.035); }
.glacier-band__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, var(--scrim-deep) 4%, rgba(8, 16, 13, .74) 42%, rgba(8, 16, 13, .12) 82%),
    linear-gradient(to top, rgba(8, 16, 13, .55), rgba(8, 16, 13, 0) 45%);
}
.glacier-band__body {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 70px var(--space-gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}
.glacier-band__body > * { max-width: 620px; }
.glacier-band__title {
  font-size: 46px;
  line-height: 1.1;
  color: var(--color-stone-bright);
  text-wrap: balance;
}
.glacier-band__lede {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.glacier-band__stats {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 20px;
  border-top: 1px solid rgba(237, 233, 224, .2);
  width: 100%;
}
.glacier-band__stats span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: 400 var(--text-mono-label) var(--font-data);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-mono-dim);
}
.glacier-band__stats b {
  font: 700 32px var(--font-data);
  letter-spacing: -.02em;
  color: var(--color-stone-bright);
}
.glacier-band__cta {
  margin-top: 4px;
  font: 400 var(--text-mono) var(--font-data);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-glacier-bright);
}
.glacier-band:hover .glacier-band__cta { color: var(--color-stone-bright); }

/* --------------------------------------------------------------------------
   Partnership + support pair - home page
   Two grey boxes of text before. The partnership half now leads with the
   marks and the support half carries the red so the pair has a near and a far
   side instead of reading as one flat row.
   -------------------------------------------------------------------------- */
.duo { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--gap-seam); padding: 0 var(--gap-seam) var(--gap-seam); }
.duo__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 38px;
  border-radius: var(--radius-band);
  background:
    linear-gradient(165deg, rgba(99, 180, 171, .1), rgba(99, 180, 171, 0) 52%),
    var(--color-pool);
  border: 1px solid rgba(99, 180, 171, .14);
  overflow: hidden;
}
.duo__panel--support {
  background:
    radial-gradient(ellipse 520px 300px at 88% -10%, rgba(200, 86, 63, .26), rgba(200, 86, 63, 0) 68%),
    var(--color-pool-deep);
  border-color: rgba(200, 86, 63, .26);
  /* The partnership half is taller (marks plus figures), so this one gets
     stretched. Centring splits the leftover space evenly instead of stranding
     the buttons under a hole. */
  justify-content: center;
  gap: 24px;
}
.duo__lede { font-size: 16px; line-height: 1.65; color: var(--color-text-tertiary); }
.duo__figures {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.duo__figures span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 400 var(--text-mono-label) var(--font-data);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-mono-dim);
}
.duo__figures b {
  font: 700 27px var(--font-data);
  letter-spacing: -.02em;
  color: var(--color-glacier-bright);
}
.duo__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Responsive - the comps are desktop-only; these are the build's own rules.
   Most river research happens on phones, so this matters.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --space-gutter: 28px; --text-h1-hero: 48px; --text-h1: 42px; --text-h2: 28px; }
  /* One column: forcing every row to the tallest card would only pad the
     stack out, so heights go back to what the copy needs. */
  .card-grid--two { grid-template-columns: 1fr; grid-auto-rows: auto; }
  /* Two up on tablets, flow across the top where the bar has room to read.
     Full stack does not come until the 640px block below. */
  .conditions-band { grid-template-columns: 1fr 1fr; }
  .cond--flow { grid-column: 1 / -1; }
  /* Site pages: the 360 + measured-data rails are fixed 340px columns on
     desktop. They must stack, or the content column collapses to nothing. */
  .site-hero-grid, .site-main-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .site-rail { position: static !important; }
  .glacier-band { min-height: 0; }
  .glacier-band__body { padding: 48px var(--space-gutter); }
  .glacier-band__title { font-size: 34px; }
  /* The 96deg scrim leaves the right side of the photo clear, which only works
     while the text sits in a column beside it. Once it spans, darken evenly. */
  .glacier-band__scrim { background: linear-gradient(to top, var(--scrim-deep) 12%, rgba(8, 16, 13, .68) 62%, rgba(8, 16, 13, .45)); }
  .duo { grid-template-columns: 1fr; }
  .triptych { grid-template-columns: 1fr; }
  .fork-card { height: 420px; }
  .panel--split { grid-template-columns: 1fr; }
  .map-layout { grid-template-columns: 1fr; }
  .map-rail__list { max-height: 320px; }
  .map-canvas { min-height: 460px; }
  .hero { height: 560px; }
}

@media (max-width: 820px) {
  .site-header__inner { flex-wrap: wrap; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 12px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 10px 0; width: 100%; }
  .site-nav a[aria-current] { border-bottom: 0; color: var(--color-mercantile); }

  /* On a phone there is nowhere to float a menu, and hover does not exist.
     The dropdown becomes an indented list that is simply part of the nav. */
  .nav-drop { width: 100%; }
  .nav-drop__btn { width: 100%; justify-content: flex-start; padding: 10px 0; }
  .nav-drop__btn.is-current { border-bottom: 0; color: var(--color-mercantile); }
  .nav-drop__caret { display: none; }
  .nav-drop__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    width: 100%;
    padding: 0 0 6px 14px;
    margin: 0;
    background: none;
    border: 0;
    border-left: 2px solid rgba(18, 34, 30, .16);
    border-radius: 0;
    box-shadow: none;
    transition: none;
  }
  .nav-drop__menu::before { display: none; }
  .nav-drop__menu a { padding: 8px 10px; }
  .nav-drop__aside { border-top: 0; margin-top: 0; padding-top: 8px; }

  /* On phones the instrument band drops out of the hero overlay and becomes a
     block beneath it. That only works if the hero also stops being a
     fixed-height box with an absolutely-positioned body - otherwise the flow
     readouts render at the top of the hero and sit straight on the H1.
     So: hero grows to its content, the body returns to normal flow, and the
     media plus scrim stay behind as a backdrop. */
  .hero {
    height: auto;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .hero--short { height: auto; min-height: 340px; }
  .hero__body {
    /* relative + z-index, never static: the media and the scrim are absolutely
       positioned, so in-flow content without a stacking context paints behind
       them and the title disappears entirely. */
    position: relative;
    z-index: 1;
    bottom: auto;
    padding: 200px var(--space-gutter) 30px;
  }
  .hero--short .hero__body { padding-top: 130px; }

  .instruments {
    /* relative, not static: the scrim is absolutely positioned and would
       otherwise paint over these readouts. */
    position: relative;
    z-index: 1;
    background: var(--color-pool-deep);
  }
  .instruments__inner { flex-wrap: wrap; }
  .instrument { padding: 12px 18px 12px 0; border-right: 0; flex: 1 1 45%; }
  .instrument__status { margin-left: 0; flex-basis: 100%; padding-bottom: 14px; }

  /* Keep the pause control clear of the header and the hero copy. */
  .hero__motion { top: 14px; right: var(--space-gutter); }

  .band { padding: 40px var(--space-gutter) 48px; }
  .band--quiet { padding: 60px var(--space-gutter) 56px; }
  .band--flush { padding: 0 var(--space-gutter) 48px; }

  .panel { padding: 30px 26px; }
  .flow-rail { flex-direction: column; align-items: stretch; gap: 14px; }
  .flow-rail__side, .flow-rail__side--next { max-width: none; text-align: left; align-items: flex-start; }
  .flow-rail__mid { display: none; }

  /* New two-up blocks on /plan/ stack rather than squeezing a webcam and a
     panel into a phone's width. */
  .cam-split, .cam-split--wide { grid-template-columns: minmax(0, 1fr); }
  .forecast-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .assessment__grid { grid-template-columns: minmax(0, 1fr); }

  .site-footer__inner { flex-direction: column; gap: 10px; }
}

@media (max-width: 560px) {
  :root { --text-h1-hero: 38px; --text-h1: 34px; --text-h2: 25px; --space-gutter: 20px; }
  /* min-height, not height: the 820px rule put the hero body back in flow, so
     a fixed height here would clip the title again. */
  .hero { height: auto; min-height: 380px; }
  .hero__body { padding-top: 168px; }
  .card-grid { grid-template-columns: 1fr; }
  .conditions-band { grid-template-columns: 1fr; padding-top: 20px; }
  .cond { padding: 22px 20px 20px; }
  .cond__value { font-size: 38px; }
  /* Overrides the per-page --gallery-cols: three across is unreadable here. */
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .survey-card { padding: 20px 18px; }
  .assessment { padding: 22px 18px; }
  .assessment__head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .assessment__source { text-align: left; }
  .spec { grid-template-columns: 1fr; gap: 2px; }
  .spec__value { text-align: left; }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .fork-card:hover .fork-card__img { transform: none; }
  .site-card:hover { transform: none; }
  /* Hero video is replaced by its poster in markup under reduced motion */
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .instruments, .viewer, .map-canvas { display: none; }
  .page { max-width: none; background: #fff; }
  .survey-card { border: 1px solid #999; }
  * { color: #000 !important; background: transparent !important; }
}