/* Rockbridge 2026 — Version B, "the wall chart".
   Light-locked by design: this is the bright counterpart to Version A's dark
   cinematic treatment, and the pair exists so one can be chosen over the other.
   Palette sampled from Calvin's own photographs (streambank foliage, creek shadow,
   blown sky), converted to OKLCH. The off-white is tinted toward the WATER's hue,
   never toward warm, so it reads as cool paper and not as cream.
   Radius is 0 everywhere. Accent is moss, and moss only. */

:root {
  --paper:   oklch(0.975 0.005 195);
  --paper-2: oklch(0.943 0.008 190);
  --panel:   oklch(0.998 0.001 195);
  --ink:     oklch(0.245 0.032 187);   /* creek in shadow. 14.9:1 on paper */
  --ink-2:   oklch(0.440 0.026 186);   /* 7.6:1 on paper */
  --ink-3:   oklch(0.520 0.022 186);   /* measured 4.62:1 worst case (on --paper-2) */
  --moss:    oklch(0.450 0.100 138);   /* streambank foliage. The only accent.
                                          measured 6.07:1 worst case */
  --moss-lo: oklch(0.450 0.100 138 / 0.10);
  --rule:    oklch(0.875 0.010 190);   /* decorative hairlines only */
  --edge:    oklch(0.615 0.018 188);   /* control borders. measured 3.13:1 worst
                                          case (on --paper-2), clearing WCAG 1.4.11 */

  --display: 'Big Shoulders Display', 'Archivo Narrow', ui-sans-serif, sans-serif;
  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;

  --s--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.93rem);
  --s-0:  clamp(1rem, 0.96rem + 0.20vw, 1.13rem);
  --s-1:  clamp(1.2rem, 1.13rem + 0.34vw, 1.44rem);
  --s-2:  clamp(1.85rem, 1.55rem + 1.45vw, 2.9rem);
  --s-3:  clamp(3.4rem, 2.3rem + 5.4vw, 7.6rem);

  --gut: clamp(1.15rem, 0.8rem + 1.8vw, 2.5rem);
  --sec: clamp(3.5rem, 2.2rem + 6vw, 6.5rem);

  --e: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--s-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--moss); outline-offset: 2px;
}

.skip {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 40;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem;
  font-weight: 700; text-decoration: none; transition: top 0.18s var(--e);
}
.skip:focus { top: 0.5rem; }

.wrap { width: min(1200px, 100% - (var(--gut) * 2)); margin-inline: auto; }

/* ── Hero: asymmetric split ────────────────────────────────── */

.hero { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); align-items: stretch; min-height: min(88svh, 820px); }
}

.hero__type {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gut);
  padding-top: clamp(2.5rem, 7vw, 6rem);
}
@media (min-width: 900px) {
  .hero__type { padding-left: max(var(--gut), calc((100vw - 1200px) / 2)); padding-right: clamp(2rem, 4vw, 4rem); }
}

.hero__place {
  margin: 0 0 1.4rem; font-size: var(--s--1); font-weight: 600;
  color: var(--moss); letter-spacing: 0.01em;
}
.hero__title {
  margin: 0; font-family: var(--display); font-size: var(--s-3); font-weight: 900;
  line-height: 0.82; letter-spacing: -0.012em; text-transform: uppercase;
  color: var(--ink); text-wrap: balance;
}
.hero__dates {
  margin: 1rem 0 0; font-family: var(--display); font-size: var(--s-2);
  font-weight: 700; line-height: 1; text-transform: uppercase; color: var(--moss);
  letter-spacing: -0.005em;
}
.hero__lede { margin: 1.3rem 0 0; color: var(--ink-2); max-width: 42ch; text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
@media (max-width: 559px) { .hero__cta .btn { flex: 1 1 100%; } }

.hero__shot { margin: 0; position: relative; min-height: 46svh; }
.hero__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 55%; }
@media (min-width: 900px) { .hero__shot { min-height: 100%; } }

/* ── Buttons ───────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.8rem 1.6rem; border: 2px solid transparent;
  font-family: var(--sans); font-size: var(--s-0); font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s var(--e), color 0.2s var(--e),
              border-color 0.2s var(--e), transform 0.12s var(--e);
}
.btn--go { background: var(--ink); color: var(--paper); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn--go:hover { background: var(--moss); }
  .btn--line:hover { background: var(--ink); color: var(--paper); }
}
.btn--wide { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: progress; }

/* ── Sections ──────────────────────────────────────────────── */

.sec { padding-block: var(--sec); }
.sec--tint { background: var(--paper-2); border-block: 1px solid var(--rule); }

.h2 {
  margin: 0 0 0.9rem; font-family: var(--display); font-size: var(--s-2);
  font-weight: 800; line-height: 0.92; letter-spacing: -0.008em;
  text-transform: uppercase; text-wrap: balance;
}
.h2--tight { margin-bottom: 0.6rem; }
.lede { margin: 0 0 clamp(2rem, 4vw, 3rem); color: var(--ink-2); max-width: 58ch; text-wrap: pretty; }
.lede--wide { max-width: 68ch; }

/* ── Water facts: 2-col grid, no cards, no per-row hairlines ── */

.facts { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 2.6vw, 2.2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 236px), 1fr)); align-items: start; }
.fact__fig { margin: 0 0 1rem; overflow: hidden; }
.fact__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.5s var(--e); }
@media (hover: hover) and (pointer: fine) { .fact:hover .fact__fig img { transform: scale(1.03); } }
.fact h3 {
  margin: 0 0 0.5rem; font-family: var(--display); font-size: var(--s-1);
  font-weight: 800; line-height: 1.05; text-transform: uppercase;
  letter-spacing: -0.004em; color: var(--ink);
  padding-top: 0.85rem; border-top: 3px solid var(--moss);
}
.fact p { margin: 0; color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }

/* ── Full-bleed photo band ─────────────────────────────────── */

.band { margin: 0; }
.band img { width: 100%; height: clamp(240px, 42vw, 520px); object-fit: cover; object-position: 50% 58%; }

/* ── RSVP ──────────────────────────────────────────────────── */

.rsvp { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .rsvp { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }

.panel { background: var(--panel); border: 1px solid var(--rule); padding: clamp(1.5rem, 3.5vw, 2.6rem); }

.form { display: flex; flex-direction: column; gap: 1.3rem; margin-top: 1.8rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend {
  font-size: var(--s--1); font-weight: 700; color: var(--ink); padding: 0;
}
.opt { font-weight: 400; color: var(--ink-3); }
.hint { margin: 0.15rem 0 0; font-size: var(--s--1); color: var(--ink-3); min-height: 1.3em; }

input[type=text], textarea {
  width: 100%; padding: 0.85rem 1rem; background: var(--paper);
  color: var(--ink); border: 1px solid var(--edge); border-radius: 0;
  font-family: var(--sans); font-size: var(--s-0); line-height: 1.5;
  transition: border-color 0.18s var(--e), background-color 0.18s var(--e);
}
input[type=text]:hover, textarea:hover { border-color: var(--ink-3); }
input[type=text]:focus, textarea:focus { border-color: var(--moss); background: var(--panel); }
::placeholder { color: var(--ink-3); opacity: 1; }
textarea { resize: vertical; min-height: 66px; }

.seg { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, 1fr); }
.seg--three { grid-template-columns: repeat(3, 1fr); }
.seg__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg__opt span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 0.55rem 0.6rem; background: var(--paper);
  border: 1px solid var(--edge); font-weight: 600; font-size: var(--s--1); cursor: pointer;
  transition: background-color 0.2s var(--e), border-color 0.2s var(--e), color 0.2s var(--e);
}
@media (hover: hover) and (pointer: fine) { .seg__opt:hover span { border-color: var(--ink-3); } }
.seg__opt:active span { transform: scale(0.97); }
.seg__opt span { transition: background-color 0.2s var(--e), border-color 0.2s var(--e), color 0.2s var(--e), transform 0.14s var(--e); }
.seg__opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--moss); outline-offset: 2px; }

.formmsg { margin: 0; min-height: 1.4em; font-size: var(--s--1); color: var(--ink-2); }
.formmsg[data-tone=ok]  { color: var(--moss); font-weight: 700; }
.formmsg[data-tone=bad] { color: oklch(0.48 0.16 28); font-weight: 700; }

.roster { background: var(--panel); border: 1px solid var(--rule); padding: 1.4rem; }
@media (min-width: 900px) { .roster { position: sticky; top: 1.5rem; } }
.roster__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 3px solid var(--moss); }
.roster__head h3 { margin: 0; font-family: var(--display); font-size: var(--s-1); font-weight: 800; text-transform: uppercase; }
.count { font-family: var(--display); font-size: var(--s-2); font-weight: 900; line-height: 1; color: var(--moss); }
.roster__list { list-style: none; margin: 0; padding: 0; }
.rperson { display: flex; align-items: baseline; gap: 0.75rem; padding-block: 0.6rem; border-bottom: 1px solid var(--rule); }
.rperson__name { font-weight: 600; }
.rperson__tag { margin-left: auto; font-size: 0.72rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.rperson--out .rperson__name { color: var(--ink-3); text-decoration: line-through; }
.roster__empty { margin: 0.9rem 0 0; color: var(--ink-3); font-size: var(--s--1); }

/* ── Bring board ───────────────────────────────────────────── */

.bring { display: grid; gap: 1.1rem; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.cat { background: var(--panel); border: 1px solid var(--rule); padding: 1.2rem; }
.cat h3 {
  margin: 0 0 0.3rem; font-family: var(--display); font-size: var(--s-1);
  font-weight: 800; line-height: 1.05; text-transform: uppercase; text-wrap: balance;
}
.cat__note { margin: 0 0 1rem; font-size: var(--s--1); color: var(--ink-3); text-wrap: pretty; }
.cat__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.claim {
  width: 100%; display: flex; align-items: center; gap: 0.65rem; text-align: left;
  min-height: 48px; padding: 0.55rem 0.75rem; background: var(--paper);
  color: var(--ink); border: 1px solid var(--edge); border-radius: 0;
  font-family: var(--sans); font-size: var(--s--1); cursor: pointer;
  transition: border-color 0.18s var(--e), background-color 0.18s var(--e), transform 0.12s var(--e);
}
@media (hover: hover) and (pointer: fine) { .claim:hover { border-color: var(--ink-3); } }
.claim:not([data-state=taken]):active { transform: scale(0.97); }
.claim__box { width: 16px; height: 16px; flex: none; border: 1.5px solid var(--edge); display: grid; place-items: center; transition: background-color 0.18s var(--e), border-color 0.18s var(--e); }
.claim__box svg { width: 10px; height: 10px; opacity: 0; transform: scale(0.5); transition: opacity 0.18s var(--e), transform 0.18s var(--e); }
.claim__who { margin-left: auto; font-size: 0.7rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }

.claim[data-state=mine] { border-color: var(--moss); background: var(--moss-lo); }
.claim[data-state=mine] .claim__box { background: var(--moss); border-color: var(--moss); }
.claim[data-state=mine] .claim__box svg { opacity: 1; transform: scale(1); stroke: var(--panel); }
.claim[data-state=mine] .claim__who { color: var(--moss); }
.claim[data-state=taken] { opacity: 0.6; cursor: not-allowed; }
.claim[data-state=taken] .claim__box { background: var(--ink-3); border-color: var(--ink-3); }
.claim[data-state=taken] .claim__box svg { opacity: 1; transform: scale(1); stroke: var(--panel); }
.claim[data-state=taken]:active { transform: none; }
.claim[data-busy] { opacity: 0.55; cursor: progress; filter: blur(1.5px); }
.claim { transition: border-color 0.18s var(--e), background-color 0.18s var(--e), transform 0.14s var(--e), filter 0.2s var(--e), opacity 0.2s var(--e); }

/* ── The chart: both permits side by side ──────────────────── */

.daypick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; max-width: 560px; margin-bottom: 1.4rem; }
.daytab {
  min-height: 56px; padding: 0.5rem; background: var(--paper); color: var(--ink-2);
  border: 1px solid var(--edge); border-radius: 0; cursor: pointer;
  font-family: var(--display); font-size: 1.15rem; font-weight: 800; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  transition: background-color 0.2s var(--e), border-color 0.2s var(--e), color 0.2s var(--e);
}
.daytab small { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; text-transform: none; opacity: 0.85; }
@media (hover: hover) and (pointer: fine) { .daytab:hover { border-color: var(--ink-3); color: var(--ink); } }
.daytab:active { transform: scale(0.97); }
.daytab { transition: background-color 0.2s var(--e), border-color 0.2s var(--e), color 0.2s var(--e), transform 0.14s var(--e); }
.daytab[aria-selected=true] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* No side stripe. The day brief carries weight through size and measure. */
.daybrief {
  margin: 0 0 2.2rem; font-size: var(--s-1); line-height: 1.45;
  color: var(--ink); max-width: 62ch; text-wrap: pretty;
}

.chart { border-top: 2px solid var(--ink); }

.chrow { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--rule); }
@media (min-width: 880px) { .chrow { grid-template-columns: 232px minmax(0,1fr) minmax(0,1fr); } }

.chrow--head { border-bottom: 2px solid var(--ink); }
.chrow--head .chcell { padding-block: 0.8rem; }
.chhead { font-family: var(--display); font-size: 1.3rem; font-weight: 800; text-transform: uppercase; line-height: 1; }
.chhead small { display: block; font-family: var(--sans); font-size: 0.74rem; font-weight: 600; text-transform: none; color: var(--moss); margin-top: 0.3rem; }
.chrules { margin: 0.55rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.2rem; }
.chrules li { font-size: 0.8rem; color: var(--ink-2); padding-left: 0.85rem; position: relative; }
.chrules li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 4px; height: 4px; background: var(--moss); }

.chcell { padding: 1.3rem 0; }
@media (min-width: 880px) {
  .chcell { padding: 1.5rem clamp(1rem, 2vw, 1.8rem); border-left: 1px solid var(--rule); }
  .chcell:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 879px) {
  .chcell { padding-bottom: 0.4rem; }
  .chcell:last-child { padding-bottom: 1.3rem; }
}

.chwhen__time { font-size: 0.82rem; font-weight: 700; color: var(--moss); }
.chwhen__label { margin: 0.15rem 0 0.5rem; font-family: var(--display); font-size: var(--s-1); font-weight: 800; text-transform: uppercase; line-height: 1; }
.chwhen__read { margin: 0; font-size: var(--s--1); color: var(--ink-2); text-wrap: pretty; }

.chcell__for {
  display: none; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--moss); margin-bottom: 0.5rem;
}
@media (max-width: 879px) { .chcell__for { display: block; } }

.gitems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.gitem__t { font-weight: 700; line-height: 1.3; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.gitem__d { font-size: var(--s--1); color: var(--ink-2); text-wrap: pretty; }

.local {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--panel); background: var(--moss); padding: 0.16rem 0.42rem; white-space: nowrap;
}

/* ── Kit: grouped chunks ───────────────────────────────────── */

.kit { display: grid; gap: 1.6rem clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.kitem__t { font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.2rem; }
.kitem__d { font-size: var(--s--1); color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }

.sec--strip { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.strip {
  display: flex; gap: 0.85rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding-bottom: 1.2rem;
  /* Start on the same left edge as the section heading, bleed off the right. */
  padding-left: max(var(--gut), calc((100vw - 1200px) / 2));
  padding-right: var(--gut);
  scrollbar-color: var(--edge) transparent;
}
.strip figure { margin: 0; flex: 0 0 auto; scroll-snap-align: start; width: clamp(230px, 40vw, 400px); }
.strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.strip:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; }

/* Chart rows carry a frame of the light they describe. */
.chwhen__fig { margin: 0.85rem 0 0; overflow: hidden; }
.chwhen__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (max-width: 879px) { .chwhen__fig img { aspect-ratio: 16 / 9; } }

/* ── Footer ────────────────────────────────────────────────── */

.foot { background: var(--ink); color: oklch(0.93 0.008 200); padding-block: clamp(3rem, 6vw, 4.5rem) 2.2rem; }
.foot__grid { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.foot h3 { margin: 0 0 0.9rem; font-family: var(--display); font-size: 1.25rem; font-weight: 800; text-transform: uppercase; color: oklch(0.80 0.11 135); }
.foot p { margin: 0 0 0.7rem; font-size: var(--s--1); line-height: 1.6; color: oklch(0.88 0.010 200); }
.foot a { color: oklch(0.96 0.006 200); text-decoration: underline; text-underline-offset: 3px; }
.foot a:hover { color: oklch(0.83 0.11 135); }

.lighttab { border-collapse: collapse; font-size: 0.78rem; font-variant-numeric: tabular-nums; color: oklch(0.88 0.010 200); }
.lighttab th { text-align: left; font-weight: 600; color: oklch(0.78 0.012 200); padding: 0.2rem 0.85rem 0.2rem 0; font-size: 0.7rem; }
.lighttab td { padding: 0.2rem 0.85rem 0.2rem 0; }
.lighttab td:first-child { font-weight: 700; color: oklch(0.96 0.006 200); }

.openq { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.openq li { font-size: var(--s--1); color: oklch(0.88 0.010 200); padding-left: 0.9rem; position: relative; text-wrap: pretty; }
.openq li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 4px; height: 4px; background: oklch(0.80 0.11 135); }

.foot__fine { margin: 2.4rem 0 0; padding-top: 1.4rem; border-top: 1px solid oklch(0.96 0.006 200 / 0.2); font-size: 0.76rem; color: oklch(0.82 0.010 200); max-width: 80ch; }
.foot__fine em { font-style: normal; color: oklch(0.80 0.11 135); font-weight: 600; }

/* ── Motion: entrance only, and only where sequence matters ── */

/* Transform only, and no fill mode. A reveal must ENHANCE an already-visible
   default: fading opacity from 0 gates the content on the animation firing, which
   leaves text unreadable in a headless render, a hidden tab, or mid-flight. axe-core
   caught exactly that, measuring blended colours at 2.23:1. */
@keyframes rise { from { transform: translateY(12px); } to { transform: none; } }
.reveal { animation: rise 0.5s var(--e); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { animation: none; transform: none; }
}

/* ── The water column ──────────────────────────────────────────
   A drawing. Depth bands are colour-coded, trout are drawn in the water at the
   modelled depth and sized by the size class predicted there. The particle field
   is the moving water texture behind the drawing. */

.wc {
  --wc-air:     oklch(0.90 0.020 200);
  /* Distinct hues, not three opacities of one teal. Sunlit shallows run warm and
     green, the middle sits true teal, the bottom goes cold blue and dark. */
  --wc-film:    oklch(0.72 0.105 150 / 0.42);
  --wc-mid:     oklch(0.46 0.080 196 / 0.50);
  --wc-deep:    oklch(0.26 0.060 236 / 0.68);
  --wc-bed:     oklch(0.33 0.030 120);
  --wc-surface: oklch(0.93 0.030 195);
  --wc-shaft:   oklch(0.95 0.055 190);
  --wc-trout:   oklch(0.16 0.020 200);
  --wc-hold:    oklch(0.86 0.130 135);
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
  padding-block: var(--sec);
}
.wc__lede { margin: 0 0 clamp(1.6rem, 3vw, 2.2rem); color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }

.wc__stage { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .wc__stage { grid-template-columns: minmax(0, 1fr) 310px; } }

.wc__glass { position: relative; overflow: hidden; border: 1px solid var(--ink); background: oklch(0.30 0.040 190); }
.wc__glass .wf__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wc__svg { position: relative; display: block; width: 100%; height: auto; }

/* Band names sit on the water at the depth they describe. */
.wc__bands { position: absolute; inset: 0; pointer-events: none; }
.wc__bands span {
  position: absolute; left: 0.7rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: oklch(0.97 0.010 200 / 0.82);
}
.wc__bands span[data-b=film] { top: 10.5%; }
.wc__bands span[data-b=mid]  { top: 34%; }
.wc__bands span[data-b=deep] { top: 66%; }

.wc__viz { position: relative; min-width: 0; }
.wc__tags { position: absolute; inset: 0; pointer-events: none; }
.wc__tag {
  position: absolute; top: calc(8% + var(--at) * 0.78); right: 0.7rem;
  transform: translateY(-50%);
  background: oklch(0.16 0.026 195 / 0.80); color: oklch(0.97 0.008 200);
  font-size: 0.66rem; font-weight: 600; padding: 0.2rem 0.5rem; white-space: nowrap;
  border-left: 2px solid oklch(0.97 0.008 200 / 0.7);
}
.wc__tag { border-left: 0; border-right: 2px solid oklch(0.97 0.008 200 / 0.7); }
.wc__tag--stated { border-color: oklch(0.90 0.010 205); font-weight: 500; }
.wc__tag--model { border-color: var(--wc-hold); color: oklch(0.90 0.13 135); background: oklch(0.18 0.045 150 / 0.85); }

/* Fish drift very slightly so the picture is alive without being busy. */
@keyframes wcHover { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
.wc-fish { animation: wcHover 4.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.37s); }
.wc-fish path { paint-order: stroke fill; stroke: oklch(0.97 0.02 150 / 0.62); stroke-width: 2.0; stroke-linejoin: round; }
.wc-fish--lg { animation-duration: 6.5s; }
@media (prefers-reduced-motion: reduce) { .wc-fish { animation: none; } }

.wc__rig { border: 1px solid var(--rule); background: var(--panel); padding: 1.1rem 1.2rem; }
.wc__rigHead {
  font-family: var(--display); font-size: 1.28rem; font-weight: 800; text-transform: uppercase;
  line-height: 1.05; color: var(--ink); padding-bottom: 0.7rem; margin-bottom: 0.8rem;
  border-bottom: 3px solid var(--moss);
}
.wc__rigList { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.9rem; }
.wc__rigList dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.15rem; }
.wc__rigList dd { margin: 0; font-size: var(--s--1); font-weight: 600; color: var(--ink); }

.wc__controls { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end; margin-top: 1.2rem; }
.wc__time { flex: 1 1 320px; display: flex; flex-direction: column; gap: 0.4rem; }
.wc__timeLabel { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.wc__timeLabel b { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0; color: var(--ink); margin-left: 0.5rem; }
.wc__slider { width: 100%; accent-color: var(--moss); height: 28px; }

.wc__permit { display: flex; gap: 0.4rem; }
.wc__permit input { position: absolute; opacity: 0; width: 0; height: 0; }
.wc__permit span {
  display: block; min-height: 44px; padding: 0.6rem 1rem; border: 1px solid var(--edge);
  font-size: var(--s--1); font-weight: 700; cursor: pointer; background: var(--paper);
}
.wc__permit input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.wc__permit input:focus-visible + span { outline: 2px solid var(--moss); outline-offset: 2px; }

.wc__readout { margin-top: 1rem; }
.wc__note { margin: 0; font-size: var(--s--1); color: var(--ink-2); max-width: 82ch; }
.wc__note b { font-family: var(--display); font-size: 1.15em; color: var(--ink); }
.wc__disc { display: block; margin-top: 0.35rem; color: var(--ink-3); font-size: 0.78rem; }

.wf__toggle {
  min-height: 44px; padding: 0.55rem 1rem; background: transparent; color: var(--ink);
  border: 1px solid var(--edge); font-family: var(--sans); font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.wf__toggle:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .wf__toggle:hover { background: var(--paper-2); border-color: var(--ink-3); }
}
.wc[data-still] .wf__toggle, .wc[data-fallback] .wf__toggle { display: none; }

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

/* ── Footer ────────────────────────────────────────────────── */

.foot { background: var(--ink); color: oklch(0.93 0.008 200); padding-block: clamp(3rem, 6vw, 4.5rem) 2.2rem; }
.foot__grid { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.foot h3 { margin: 0 0 0.9rem; font-family: var(--display); font-size: 1.25rem; font-weight: 800; text-transform: uppercase; color: oklch(0.80 0.11 135); }
.foot p { margin: 0 0 0.7rem; font-size: var(--s--1); line-height: 1.6; color: oklch(0.88 0.010 200); }
.foot a { color: oklch(0.96 0.006 200); text-decoration: underline; text-underline-offset: 3px; }
.foot a:hover { color: oklch(0.83 0.11 135); }

.lighttab { border-collapse: collapse; font-size: 0.78rem; font-variant-numeric: tabular-nums; color: oklch(0.88 0.010 200); }
.lighttab th { text-align: left; font-weight: 600; color: oklch(0.78 0.012 200); padding: 0.2rem 0.85rem 0.2rem 0; font-size: 0.7rem; }
.lighttab td { padding: 0.2rem 0.85rem 0.2rem 0; }
.lighttab td:first-child { font-weight: 700; color: oklch(0.96 0.006 200); }

.openq { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.openq li { font-size: var(--s--1); color: oklch(0.88 0.010 200); padding-left: 0.9rem; position: relative; text-wrap: pretty; }
.openq li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 4px; height: 4px; background: oklch(0.80 0.11 135); }

.foot__fine { margin: 2.4rem 0 0; padding-top: 1.4rem; border-top: 1px solid oklch(0.96 0.006 200 / 0.2); font-size: 0.76rem; color: oklch(0.82 0.010 200); max-width: 80ch; }
.foot__fine em { font-style: normal; color: oklch(0.80 0.11 135); font-weight: 600; }

/* ── Motion: entrance only, and only where sequence matters ── */

/* Transform only, and no fill mode. A reveal must ENHANCE an already-visible
   default: fading opacity from 0 gates the content on the animation firing, which
   leaves text unreadable in a headless render, a hidden tab, or mid-flight. axe-core
   caught exactly that, measuring blended colours at 2.23:1. */
@keyframes rise { from { transform: translateY(12px); } to { transform: none; } }
.reveal { animation: rise 0.5s var(--e); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { animation: none; transform: none; }
}

/* ── The water right now ────────────────────────────────────────
   The field is the section. Type sits on it, the readout reads off it.
   Dark on purpose: this is the one place the page goes underwater, and the
   deep teal is the same creek-in-shadow value the rest of the palette came from. */

.wf {
  position: relative; isolation: isolate;
  background: oklch(0.20 0.030 188);
  color: oklch(0.96 0.008 220);
  overflow: hidden;
  border-block: 1px solid var(--rule);
}
.wf__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}
/* Poster underneath, so a page with no WebGL, no JS or save-data still has a
   surface here rather than an empty band. */
.wf::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 0%, oklch(0.42 0.055 190) 0%, transparent 62%),
    linear-gradient(to bottom, oklch(0.30 0.040 188), oklch(0.15 0.026 190));
}
.wf__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, oklch(0.14 0.026 190 / 0.52) 0%, oklch(0.14 0.026 190 / 0.06) 30%, oklch(0.14 0.026 190 / 0.30) 68%, oklch(0.13 0.026 190 / 0.46) 100%);
}
/* Where the model says fish are holding, drawn on the water itself rather than
   as a labelled marker. Position comes from --holding-depth, set in JS. */
.wf::after {
  content: ''; position: absolute; z-index: 1; left: 0; right: 0;
  top: calc(var(--holding-depth, 0.45) * 100%);
  height: clamp(70px, 12vh, 130px); transform: translateY(-50%);
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, oklch(0.84 0.12 135 / 0.26) 45%, transparent);
  transition: top 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.wf__body {
  position: relative; z-index: 2;
  padding-block: clamp(2.6rem, 6vw, 4.6rem) clamp(1.8rem, 3vw, 2.4rem);
}
.wf .h2 { color: oklch(0.97 0.008 220); }
.wf__lede {
  margin: 0 0 clamp(1.8rem, 4vw, 2.6rem);
  color: oklch(0.88 0.012 205); max-width: 56ch; text-wrap: pretty;
}

.wf__grid {
  display: grid; gap: 1px; background: oklch(0.96 0.008 220 / 0.16);
  border: 1px solid oklch(0.96 0.008 220 / 0.16);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.wf__cell { background: oklch(0.16 0.028 190 / 0.72); backdrop-filter: blur(3px); padding: 1.1rem 1.2rem; }
.wf__label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(0.78 0.014 205); margin-bottom: 0.5rem;
}
.wf__value {
  font-family: var(--display); font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800;
  line-height: 1; text-transform: uppercase; color: oklch(0.97 0.008 220);
}
.wf__unit { font-size: 0.44em; font-weight: 700; margin-left: 0.3em; opacity: 0.8; }
.wf__sub { margin-top: 0.55rem; font-size: 0.78rem; line-height: 1.45; color: oklch(0.80 0.012 205); text-wrap: pretty; }

/* Measured, stated and modelled must never look the same. */
.wf__cell[data-kind=modelled] { background: oklch(0.20 0.045 148 / 0.80); }
.wf__cell[data-kind=modelled] .wf__value { color: oklch(0.86 0.13 135); font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.2; }
.wf__cell[data-kind=stated] { border-top: 2px solid oklch(0.88 0.010 205 / 0.55); }
.wf__cell[data-kind=stated] .wf__value { color: oklch(0.90 0.010 205); }
.wf__cell[data-kind=modelled] { border-top: 2px solid oklch(0.86 0.13 135); }

.wf__legend {
  display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 1rem 0 0;
  font-size: 0.72rem; color: oklch(0.76 0.014 205);
}
.wf__legend span { display: flex; align-items: center; gap: 0.4rem; }
.wf__legend span::before {
  content: ''; width: 11px; height: 11px; flex: none;
  background: oklch(0.94 0.008 220);
}
.wf__legend span[data-kind=stated]::before {
  background: transparent; border: 1.5px solid oklch(0.88 0.010 205);
}
.wf__legend span[data-kind=modelled]::before {
  background: oklch(0.86 0.13 135);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}


@media (prefers-reduced-motion: reduce) { .wf::after { transition: none; } }

/* ── The column on a phone ─────────────────────────────────────
   Depth is the axis that carries the meaning, so the picture goes PORTRAIT and
   leads the section. Wide geometry crushed it to a 183px letterbox where the
   size difference between fish stopped reading entirely. */
@media (max-width: 939px) {
  .wc__stage { gap: 0.9rem; }

  /* The drawing gets real height and comes first. */
  .wc__viz { order: -1; }
  .wc__svg { width: 100%; height: auto; max-height: 62svh; }

  /* Band names sit tight to the left edge at a size that does not eat the water. */
  .wc__bands span { left: 0.5rem; font-size: 0.56rem; letter-spacing: 0.06em; }
  .wc__bands span[data-b=film] { top: 7%; }
  .wc__bands span[data-b=mid]  { top: 30%; }
  .wc__bands span[data-b=deep] { top: 62%; }

  /* Tags leave the picture entirely: on a 350px stage they covered the water and
     collided with the band names. They become a wrapping strip underneath. */
  .wc__tags {
    position: static; display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin-top: 0.6rem;
  }
  .wc__tag {
    position: static; transform: none; top: auto; right: auto;
    background: var(--panel); color: var(--ink);
    /* The full border carries the provenance, not a thick left stripe: a one-sided
       accent bar is the banned side-tab pattern. Colour + weight still separate
       measured from stated-by-the-ranch from modelled. */
    border: 1px solid var(--ink-3);
    font-size: 0.7rem; padding: 0.3rem 0.55rem;
  }
  .wc__tag--stated { border-color: var(--ink-3); border-style: dashed; }
  .wc__tag--model {
    border-left-color: var(--moss); background: var(--moss-lo);
    color: oklch(0.36 0.10 138);
  }

  /* Controls before the rig: you scrub the hours, THEN read what to tie on. */
  .wc__controls { margin-top: 1rem; }
  .wc__rig { order: 2; }
  .wc__rigList { grid-template-columns: auto 1fr; gap: 0.4rem 0.8rem; }

  /* A range input is a poor touch target at 28px. */
  .wc__slider { height: 44px; }
  .wc__permit span { min-height: 48px; }
}

/* Very narrow: stack the rig rows so long values stop wrapping mid-phrase. */
@media (max-width: 400px) {
  .wc__rigList { grid-template-columns: 1fr; gap: 0.1rem; }
  .wc__rigList dt { padding-top: 0.5rem; }
  .wc__rigList dd { padding-bottom: 0.2rem; }
  .wc__controls { flex-direction: column; align-items: stretch; }
  .wc__permit { display: grid; grid-template-columns: 1fr 1fr; }
  .wc__permit span { text-align: center; }
}

/* ── Cast map ─────────────────────────────────────────────────────────────────
   The satellite view plus the ranked zone list. Two rules drive the styling:

   1. Score is carried by BAR WIDTH, never by colour alone. The heat ramp tops out
      near white so it stays legible over dark satellite imagery, and a near-white
      fill on cool paper would be invisible. Colour accompanies the value; width IS
      the value. Same reason every heat dot gets a dark ring.
   2. The list is styled to stand on its own, because it is what remains if Google
      Maps never loads. It is not a legend for the map; it is the content. */

.cm { margin: 0 0 clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.cm__lede {
  font-size: var(--s-1); line-height: 1.45; max-width: 54ch;
  margin: 0 0 1.25rem; color: var(--ink);
}

.cm__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.cm__chip {
  font: inherit; font-size: var(--s--1); font-weight: 600; letter-spacing: 0.01em;
  padding: 0.5rem 0.95rem; border: 1px solid var(--edge); background: transparent;
  color: var(--ink-2); cursor: pointer; border-radius: 0;
  transition: background 0.16s var(--e), color 0.16s var(--e), border-color 0.16s var(--e);
}
.cm__chip:hover { border-color: var(--ink-2); color: var(--ink); }
.cm__chip[aria-pressed='true'] {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.cm__srcNote { font-size: var(--s--1); color: var(--ink-3); margin: 0 0 1.5rem; }

.cm__viz { position: relative; background: var(--paper-2); border: 1px solid var(--rule); }
.cm__map { width: 100%; aspect-ratio: 4 / 3; min-height: 320px; }
.cm__fallback {
  display: none; margin: 0; padding: clamp(1.5rem, 4vw, 3rem);
  font-size: var(--s--1); color: var(--ink-2); text-align: center;
}
/* Only admit failure once we know it failed: no key, blocked script, rejected key. */
.cm[data-map='failed'] .cm__map { display: none; }
.cm[data-map='failed'] .cm__fallback { display: block; }

.cm__listH {
  font-family: var(--display); font-size: var(--s-1); font-weight: 700;
  letter-spacing: 0.005em; margin: 1.75rem 0 0.75rem; color: var(--ink);
}

.cm__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.cm__list li { border-bottom: 1px solid var(--rule); }

.cm__zone {
  display: grid; grid-template-columns: auto 1fr 4.5rem; align-items: center;
  gap: 0.8rem; width: 100%; padding: 0.85rem 0.25rem;
  font: inherit; text-align: left; background: transparent; border: 0;
  cursor: pointer; color: var(--ink);
  transition: background 0.16s var(--e);
}
.cm__zone:hover { background: var(--moss-lo); }

/* The ring is what guarantees the dot is visible whatever the heat colour does. */
.cm__dot {
  width: 0.85rem; height: 0.85rem; border-radius: 50%;
  background: var(--heatc, var(--edge)); border: 1px solid var(--ink-2);
}

.cm__zoneMain { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cm__zoneName { font-weight: 650; line-height: 1.25; }
.cm__zoneMeta { font-size: var(--s--1); color: var(--ink-3); }
.cm__zone.is-top .cm__zoneMeta { color: var(--moss); font-weight: 600; }

.cm__bar { display: block; height: 0.4rem; background: var(--paper-2); border: 1px solid var(--rule); }
/* Scale, not width: animating width relayouts the row on every frame. transform-origin
   pins the growth to the left edge so it still reads as a bar filling. */
.cm__bar i {
  display: block; height: 100%; width: 100%; background: var(--moss);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.3s var(--e);
}

.cm__detail {
  padding: 1.15rem 0 1.4rem; border-bottom: 1px solid var(--rule);
  animation: cmIn 0.24s var(--e);
}
@keyframes cmIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cm__dName {
  font-family: var(--display); font-size: var(--s-1); font-weight: 700;
  margin: 0 0 0.5rem; color: var(--ink);
}
.cm__detail p { margin: 0 0 0.7rem; line-height: 1.55; }
.cm__dEv { font-size: var(--s--1); color: var(--ink-2); margin-bottom: 0; }

.cm__disc {
  font-size: var(--s--1); line-height: 1.5; color: var(--ink-3);
  margin: 1.25rem 0 0; max-width: 58ch;
}

@media (min-width: 940px) {
  .cm { display: grid; grid-template-columns: 1fr minmax(360px, 27rem); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
  /* Placement is explicit, not left to auto-flow. The legend sits between the map and
     the list in the markup, and auto-flow would drop it into the right-hand column
     and push the whole ranked list down a row. */
  .cm__intro  { grid-column: 1 / -1; grid-row: 1; }
  .cm__viz    { grid-column: 1; grid-row: 2; }
  .cm__legend { grid-column: 1; grid-row: 3; }
  .cm__side   { grid-column: 2; grid-row: 2 / span 2; }
  .cm__map { aspect-ratio: auto; height: clamp(30rem, 46vh, 40rem); }
  .cm__side { position: sticky; top: 1.5rem; }
  .cm__listH { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cm__bar i, .cm__chip, .cm__zone { transition: none; }
  .cm__detail { animation: none; }
}

.cm__legend {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0.6rem 0 0; font-size: var(--s--1); color: var(--ink-3);
}
.cm__legBar {
  flex: 1; height: 0.5rem; border: 1px solid var(--rule);
  background: linear-gradient(to right, #3d6f9e, #2f8f7d 40%, #c2701a 70%, #b5350f);
}
.cm__legEnd { white-space: nowrap; }