/*
conceit  the coast as a surf check: the map is the answer, every spot is a light that is green, orange or red for your level at the hour you are looking at
shape    demo: the first screen is the product working, the verdict on the left and the live coast on the right, the hours under it
type     Unbounded (display, 300 to 800) for the verdict and the headings; Recursive for everything else, its MONO axis on every number
colour   night sea #0B2230 and panel #0F2C3D, foam ink #EAF1EE, sand shoreline #C8B27E; verdicts go #5BE39A (the accent), meh #F2B33D, no #F0573F, night #5F7380
grid     two columns on the first screen (copy 34rem, map sized to the viewport height), then a 82rem column with hairline-ruled tiles; content runs to 1rem from the edge on a phone
texture  the swell itself: crest lines drawn from the hour's two swell trains behind the coast, a graticule every tenth of a degree, no grain and no gradient
motion   the crests travel toward the coast at their period and turn with the hour; each green spot rings once per wave period in real time; the card opens in 200 ms; sections arrive once on scroll
move     la barre des heures en bas de la carte: drag through eight days and the coast, the crests, the hero and every row answer for that hour
details  hero lands in order (stagger by --i); green spots ring at the period; the dot grows and its leader line lights on hover; the selected hour cell lifts with a thumb that slides; each row carries its map dot, which grows when the row is pointed at; the strip cells grow under the pointer; level radios slide their indicator; questions turn plus to cross and open by height; sections reveal on scroll with their children staggered; tide line draws itself in; every number in Recursive MONO tabular; selection in sea on green; focus ring in the accent
*/

@font-face {
  font-family: "Unbounded";
  src: url("fonts/unbounded.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Recursive";
  src: url("fonts/recursive.woff2") format("woff2");
  font-weight: 300 1000;
  font-display: swap;
}

:root {
  --sea: #0B2230;
  --sea-deep: #081A25;
  --panel: #0F2C3D;
  --panel-2: #133548;
  --ink: #EAF1EE;
  --ink-2: #BACBCA;
  --ink-3: #88A2A6;
  --sand: #C8B27E;
  --go: #5BE39A;
  --meh: #F2B33D;
  --no: #F0573F;
  --night: #5F7380;
  --line: rgba(234, 241, 238, .13);
  --line-2: rgba(234, 241, 238, .26);
  --ease: cubic-bezier(.12, .6, .18, 1);
  --t1: 120ms;
  --t2: 200ms;
  --t3: 300ms;
  --t6: 600ms;
  --t9: 900ms;
  --bar-h: 3.6rem;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Recursive", ui-sans-serif, system-ui, sans-serif;
  --pad: clamp(1rem, 3vw, 2.5rem);
  color-scheme: dark;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  accent-color: var(--go);
  interpolate-size: allow-keywords;
}

.v-g { --v: var(--go); }
.v-m { --v: var(--meh); }
.v-n { --v: var(--no); }
.v-x, .v-u { --v: var(--night); }

* { box-sizing: border-box; }
html { background: var(--sea); }
body {
  margin: 0;
  background: var(--sea);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  font-variation-settings: "CASL" 0, "MONO" 0;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; -webkit-tap-highlight-color: transparent; }
a:hover { text-decoration-color: var(--go); }
::selection { background: var(--go); color: var(--sea); }
:focus-visible { outline: 2px solid var(--go); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
.num, dd, td, .tide-list, .hour-marks, .kicker, .readings, small[data-h] {
  font-variant-numeric: tabular-nums slashed-zero;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--go); color: var(--sea); padding: .6rem 1rem; border-radius: 4px;
  transition: top var(--t2) var(--ease);
}
.skip:focus-visible { top: calc(env(safe-area-inset-top, 0px) + .6rem); }

/* ---------------------------------------------------------------- the bar */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: clamp(.8rem, 2vw, 2rem);
  min-height: var(--bar-h);
  padding: calc(env(safe-area-inset-top, 0px) + .45rem) var(--pad) .45rem;
  background: rgba(11, 34, 48, .96);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t3) var(--ease), background-color var(--t3) var(--ease);
}
.bar.is-scrolled { border-bottom-color: var(--line); background: var(--sea-deep); }
.mark {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
}
.mark svg { width: 1.75rem; height: 1.25rem; fill: none; stroke: var(--go); stroke-width: 2.4; stroke-linecap: round; transition: transform var(--t3) var(--ease); }
.mark .mark-back { stroke: var(--ink); opacity: .45; }
.mark:hover svg { transform: translateX(3px); }

.levels {
  position: relative;
  display: flex; align-items: center; gap: 0;
  margin: 0; padding: 0; border: 0; min-width: 0;
}
.levels legend {
  float: left; padding: 0 .7rem 0 0;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  font-variation-settings: "MONO" 1;
}
.levels .track {
  position: relative; display: flex;
  border: 1px solid var(--line-2); border-radius: 999px; padding: 3px;
}
.levels label { position: relative; z-index: 1; cursor: pointer; }
.levels input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.levels span {
  display: block; padding: .32rem .8rem; border-radius: 999px;
  font-size: .84rem; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  transition: color var(--t2) var(--ease), background-color var(--t2) var(--ease);
}
.levels label:hover span { color: var(--ink); }
.levels input:checked + span { color: var(--sea); }
.levels input:focus-visible + span { outline: 2px solid var(--go); outline-offset: 2px; }
.no-js .levels input:checked + span, .levels:not(.ready) input:checked + span { background: var(--go); }
.levels .thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0;
  width: var(--tw, 0); transform: translateX(var(--tx, 0));
  background: var(--go); border-radius: 999px;
  transition: transform var(--t3) var(--ease), width var(--t3) var(--ease);
}
.nav { margin-left: auto; display: flex; gap: 1.2rem; font-size: .86rem; }
.nav a {
  position: relative; text-decoration: none; color: var(--ink-2); padding-block: .3rem;
  transition: color var(--t2) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--go);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t3) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- the first screen */
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(18rem, 34rem) auto; justify-content: space-between;
  align-items: center; gap: clamp(1.5rem, 3vw, 3.5rem);
  min-height: calc(100svh - var(--bar-h));
  padding: clamp(1rem, 2.5vh, 2rem) var(--pad) 1.2rem;
}
.swell { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero-copy { position: relative; }
.hero-copy > * { margin: 0; }
.kicker {
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  font-variation-settings: "MONO" 1;
}
h1 {
  margin-top: .9rem !important;
  font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 2.1vw, 2rem);
  line-height: 1.15; letter-spacing: -.015em; color: var(--ink-2);
}
.verdict { margin-top: clamp(.8rem, 2vh, 1.4rem) !important; color: var(--v); }
.verdict b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(3.8rem, 8.6vw, 8.4rem); line-height: .92; letter-spacing: -.035em;
  transition: color var(--t3) var(--ease);
}
.verdict span {
  display: block; margin-top: .55rem; color: var(--ink);
  font-family: var(--display); font-weight: 500; font-size: clamp(1.05rem, 1.55vw, 1.45rem); letter-spacing: -.01em;
}
.sub { margin-top: 1rem !important; color: var(--ink-2); font-size: .98rem; max-width: 33rem; }
.cta { margin-top: 1.4rem !important; }
.button {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .82rem 1.15rem .82rem 1.3rem; border-radius: 6px;
  background: var(--go); color: var(--sea); text-decoration: none;
  font-weight: 700; font-size: .98rem;
  transition: transform var(--t1) var(--ease), background-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.button::after {
  content: ""; width: .9rem; height: .9rem; flex: none;
  background: currentColor;
  clip-path: polygon(0 42%, 62% 42%, 62% 12%, 100% 50%, 62% 88%, 62% 58%, 0 58%);
  transition: transform var(--t3) var(--ease);
}
.button:hover { background: #7BF0B1; }
.button:hover::after { transform: translateX(4px); }
.button:active { transform: scale(.98); }
.friction { margin-top: .65rem !important; font-size: .8rem; color: var(--ink-3); }
.readings {
  margin-top: clamp(1.2rem, 3vh, 2rem) !important;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.4rem;
  border-top: 1px solid var(--line); padding-top: 1rem;
}
.readings dt { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-variation-settings: "MONO" 1; }
.readings dd { margin: .1rem 0 0; font-size: .86rem; font-variation-settings: "MONO" 1; }

/* the first screen lands in order */
/* the verdict, the title and the button are readable from the first frame: they only settle into place */
.js .hero-copy > * { animation: land var(--t6) var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.js .hero-copy > .sub, .js .hero-copy > .readings { animation-name: unmask; animation-duration: var(--t9); }
.js .hero-copy > :nth-child(1) { --i: 0; }
.js .hero-copy > :nth-child(2) { --i: 1; }
.js .hero-copy > :nth-child(3) { --i: 2; }
.js .hero-copy > :nth-child(4) { --i: 3; }
.js .hero-copy > :nth-child(5) { --i: 4; }
.js .hero-copy > :nth-child(6) { --i: 5; }
.js .hero-copy > :nth-child(7) { --i: 6; }
.js .map { animation: rise var(--t9) var(--ease) both; animation-delay: 160ms; }
@keyframes land { from { opacity: .6; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes unmask { from { opacity: 0; transform: translateY(10px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); } }
@keyframes rise { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- the map */
.map { position: relative; display: flex; flex-direction: column; gap: .8rem; justify-self: end; }
.map-frame {
  position: relative;
  width: min(58vw, calc((100svh - var(--bar-h) - 7.6rem) * 834 / 870));
  aspect-ratio: 834 / 870;
}
.map-inner { position: absolute; inset: 0; }
.land-svg, .inset-svg { display: block; width: 100%; height: 100%; }
.inset-svg { overflow: hidden; border-radius: 4px; }
.land { fill: #163845; }
.shore { fill: none; stroke: var(--sand); stroke-width: 1.3px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.grid line { stroke: rgba(234, 241, 238, .06); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.grid text { fill: var(--ink-3); font-size: 9px; font-family: var(--body); font-variation-settings: "MONO" 1; }
.places text { fill: var(--ink-3); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-family: var(--body); font-weight: 600; }
.places .sea-name { fill: rgba(234, 241, 238, .2); font-size: 15px; letter-spacing: .5em; font-weight: 400; font-variation-settings: "slnt" -12; }
.buoy rect { fill: none; stroke: var(--meh); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.buoy text { fill: var(--ink-2); font-size: 9.5px; font-family: var(--body); font-variation-settings: "MONO" 1; }
.buoy .buoy-read { fill: var(--ink); }
.zoom, .zoom-line { fill: none; stroke: var(--ink-3); stroke-width: 1px; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.leaders line { stroke: var(--line-2); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: stroke var(--t2) var(--ease); }
.leaders line.hot { stroke: var(--ink); }

.layer { position: absolute; inset: 0; }
.spot { color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.spot .dot {
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--v); box-shadow: 0 0 0 2.5px var(--sea);
  transition: transform var(--t2) var(--ease), background-color var(--t3) var(--ease);
}
.spot .dot::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.spot.v-g .dot::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 2px solid var(--go); opacity: 0;
  animation: ring calc(var(--per, 10) * 1s) var(--ease) infinite;
  animation-delay: calc(var(--per, 10) * -73ms);
}
@keyframes ring {
  0% { transform: scale(1); opacity: .95; }
  20% { transform: scale(3.6); opacity: 0; }
  100% { transform: scale(3.6); opacity: 0; }
}
.spot .lab {
  position: absolute; left: var(--lx); top: var(--ly); z-index: 1;
  display: flex; align-items: baseline; gap: .4rem; white-space: nowrap;
  font-size: .76rem; line-height: 1.1;
  -webkit-text-stroke: 4px var(--sea); paint-order: stroke fill;
  transition: transform var(--t2) var(--ease);
}
.spot .lab.l { transform: translate(-100%, -50%); flex-direction: row; }
.spot .lab.r { transform: translate(0, -50%); }
.spot .lab.c { transform: translate(-50%, -50%); }
.spot .lab b { font-weight: 650; transition: color var(--t2) var(--ease); }
.spot .lab small { font-size: .72rem; color: var(--v); font-variation-settings: "MONO" 1; }
.spot:hover .dot, .spot.hot .dot, .spot:focus-visible .dot { transform: scale(1.45); }
.spot:hover .lab b, .spot.hot .lab b { color: var(--v); }
.spot:hover .lab.l, .spot.hot .lab.l { transform: translate(calc(-100% - 3px), -50%); }
.spot:hover .lab.r, .spot.hot .lab.r { transform: translate(3px, -50%); }
.spot:focus-visible { outline: none; }
.spot:focus-visible .dot { outline: 2px solid var(--ink); outline-offset: 3px; }
.mini {
  position: absolute; left: var(--x); top: var(--y);
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--v); box-shadow: 0 0 0 1.5px var(--sea);
}

.inset {
  position: absolute; left: 1.8%; top: 75.9%; width: 48%;
  aspect-ratio: 2 / 1;
  background: var(--sea-deep); border: 1px solid var(--line-2); border-radius: 4px;
}
.inset-title {
  position: absolute; left: 0; bottom: calc(100% + .35rem); margin: 0;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  font-variation-settings: "MONO" 1;
}
.inset .spot .dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.inset .spot .lab { font-size: .7rem; }

/* the hours */
.hours { width: 100%; }
.hours-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 .45rem; font-size: .8rem; color: var(--ink-2);
}
.hours-head b { color: var(--ink); font-weight: 650; }
.legend { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--ink-3); }
.legend i { display: inline-block; width: .55rem; height: .55rem; border-radius: 2px; background: var(--v); margin-left: .45rem; }
.hourbar {
  position: relative;
  display: grid; grid-template-columns: repeat(128, minmax(0, 1fr));
  height: 1.55rem; cursor: ew-resize; touch-action: pan-y; user-select: none;
  border-radius: 3px; outline-offset: 4px;
}
.hourbar i {
  display: block; background: var(--v); opacity: .62;
  transition: opacity var(--t1) var(--ease), transform var(--t2) var(--ease);
}
.hourbar i:nth-child(16n+1) { box-shadow: inset 2px 0 0 var(--sea); }
.hourbar i:hover { opacity: 1; transform: scaleY(1.25); }
.hourbar i.sel { opacity: 1; transform: scaleY(1.45); box-shadow: 0 0 0 1.5px var(--ink); z-index: 1; }
.hourbar.dragging i.sel { transform: scaleY(1.6); }
.hour-marks { position: relative; height: 1.1rem; margin-top: .3rem; font-size: .68rem; color: var(--ink-3); font-variation-settings: "MONO" 1; }
.hour-marks span { position: absolute; left: calc(var(--k) / 128 * 100%); white-space: nowrap; padding-left: 3px; }
.hour-marks i { font-style: normal; }
@media (max-width: 559px) { .hour-marks i { display: none; } }

/* ---------------------------------------------------------------- the card */
.peek {
  position: fixed; z-index: 30; left: 0; top: 0;
  width: min(23.5rem, calc(100vw - 2rem));
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden;
  box-shadow: 0 22px 60px rgba(2, 10, 16, .55), 0 2px 8px rgba(2, 10, 16, .4);
  opacity: 0; transform: translateY(6px) scale(.985); transform-origin: var(--ox, 50%) var(--oy, 0);
  transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease);
  pointer-events: none;
}
.peek.open { opacity: 1; transform: none; pointer-events: auto; }
.peek .screen { position: relative; aspect-ratio: 16 / 9; background: #04111A; }
.peek .screen iframe, .peek .screen img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.peek .screen .none {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem;
  color: var(--ink-3); font-size: .8rem; text-align: center;
}
.peek .camsel { display: flex; flex-wrap: wrap; gap: .3rem; padding: .55rem .9rem 0; }
.cam-from { margin: 0; padding: .55rem .9rem 0; font-size: .74rem; color: var(--ink-3); }
.peek .camsel button {
  font: inherit; font-size: .72rem; color: var(--ink-2);
  background: transparent; border: 1px solid var(--line-2); border-radius: 4px; padding: .2rem .5rem; cursor: pointer;
  transition: color var(--t2) var(--ease), border-color var(--t2) var(--ease), background-color var(--t2) var(--ease);
}
.peek .camsel button:hover { color: var(--ink); border-color: var(--ink-2); }
.peek .camsel button[aria-pressed="true"] { color: var(--sea); background: var(--ink); border-color: var(--ink); }
.peek .pv { padding: .75rem .95rem .95rem; }
.peek .pv-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.peek h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; }
.peek .pv-word { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--v); line-height: 1; }
.peek .pv-when { margin: .15rem 0 0; font-size: .72rem; color: var(--ink-3); font-variation-settings: "MONO" 1; }
.peek .pv-why { margin: .5rem 0 0; font-size: .86rem; color: var(--ink-2); }
.peek dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1rem; margin: .7rem 0 0; }
.peek dt { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-variation-settings: "MONO" 1; }
.peek dd { margin: 0; font-size: .82rem; font-variation-settings: "MONO" 1; }
.peek .pv-win { margin: .7rem 0 .35rem; font-size: .82rem; }
.peek .pv-win b { color: var(--go); font-weight: 650; }
.peek .strip { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; height: .5rem; }
.peek .strip i { background: var(--v); border-radius: 1px; }
.peek .strip-hours { display: flex; justify-content: space-between; font-size: .62rem; color: var(--ink-3); margin-top: .2rem; font-variation-settings: "MONO" 1; }
.peek .pv-go { display: inline-block; margin-top: .75rem; font-size: .8rem; color: var(--ink-2); }
.peek .pv-go:hover { color: var(--go); }
.peek-close {
  position: absolute; right: .5rem; top: .5rem; z-index: 2;
  width: 2rem; height: 2rem; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(4, 17, 26, .75); color: var(--ink); font: inherit; font-size: 1.1rem; line-height: 1;
  display: none;
  transition: background-color var(--t2) var(--ease);
}
.peek-close:hover { background: var(--sea-deep); }

/* ---------------------------------------------------------------- the sections */
.block {
  max-width: 82rem; margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--pad) 0;
  scroll-margin-top: var(--bar-h);
}
.head {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.head h2, .close h2 {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.45rem, 2.7vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em;
}
.head p { margin: 0; color: var(--ink-2); font-size: .94rem; max-width: 34rem; }
.head > :only-child { grid-column: 1 / -1; }

.rows {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.row {
  position: relative; display: flex; flex-direction: column; gap: .6rem;
  padding: 1rem 1.1rem 1.1rem; background: var(--sea);
  scroll-margin-top: calc(var(--bar-h) + 1rem);
  transition: background-color var(--t2) var(--ease), transform var(--t2) var(--ease);
}
.row h3::before {   /* the spot's dot from the map, in its colour */
  content: ""; display: inline-block; width: .62rem; height: .62rem; margin-right: .5rem; vertical-align: .08em;
  border-radius: 50%; background: var(--v); box-shadow: 0 0 0 2px var(--sea);
  transition: transform var(--t3) var(--ease), box-shadow var(--t2) var(--ease);
}
.row:hover, .row.hot, .row:target { background: var(--panel); }
.row:hover h3::before, .row.hot h3::before, .row:target h3::before { transform: scale(1.35); box-shadow: 0 0 0 2px var(--panel); }
.row h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.02rem; letter-spacing: -.01em; }
.row h3 small { display: block; margin-top: .15rem; font-family: var(--body); font-weight: 400; font-size: .74rem; color: var(--ink-3); letter-spacing: 0; }
.row-verdict { margin: 0; font-size: .86rem; color: var(--ink-2); }
.row-verdict .word { font-family: var(--display); font-weight: 700; color: var(--v); margin-right: .2rem; }
.row-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .9rem; margin: 0; }
.row-nums dt { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-variation-settings: "MONO" 1; }
.row-nums dd { margin: 0; font-size: .82rem; font-variation-settings: "MONO" 1; }
.row-nums small { color: var(--ink-3); }
.row-win { margin: 0; font-size: .8rem; }
.row-strip { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; height: .45rem; }
.row-strip i { background: var(--v); border-radius: 1px; transition: transform var(--t1) var(--ease); transform-origin: bottom; }
.row-strip i:hover { transform: scaleY(2); }
.row-cams { margin: auto 0 0; font-size: .76rem; color: var(--ink-3); }
.row-cams a { color: var(--ink-2); transition: color var(--t2) var(--ease); }
.row-cams a:hover { color: var(--go); }
.row-open {
  align-self: flex-start; font: inherit; font-size: .76rem; color: var(--ink);
  background: transparent; border: 1px solid var(--line-2); border-radius: 4px; padding: .25rem .6rem; cursor: pointer;
  transition: border-color var(--t2) var(--ease), color var(--t2) var(--ease);
}
.row-open:hover { border-color: var(--go); color: var(--go); }

.scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }
.scroll:focus-visible { outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; font-size: .8rem; }
th, td { padding: .5rem .65rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
thead th { font-weight: 600; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-variation-settings: "MONO" 1; }
tbody th { font-weight: 600; }
tbody th small { display: block; font-weight: 400; color: var(--ink-3); }
td { font-variation-settings: "MONO" 1; }
.week tbody th, .week thead th:first-child, .buoys-table tbody th, .buoys-table thead th:first-child { position: sticky; left: 0; background: var(--sea); z-index: 1; }
.swipe { display: none; margin: .45rem 0 0; font-size: .74rem; color: var(--ink-3); }
@media (max-width: 700px) { .swipe { display: block; } }
.week tbody th a { text-decoration: none; transition: color var(--t2) var(--ease); }
.week tbody th a:hover { color: var(--go); }
.week td.v-g { color: var(--go); background: rgba(91, 227, 154, .1); }
.week td.v-m { color: var(--meh); }
.week td.v-n { color: rgba(240, 87, 63, .55); }
.week tbody tr { transition: background-color var(--t1) var(--ease); }
.week tbody tr:hover, .buoys-table tbody tr:hover { background: var(--panel); }
.week tbody tr:hover th, .buoys-table tbody tr:hover th { background: var(--panel); }
.bands td.v-g { color: var(--go); }
.bands td.v-m { color: var(--meh); }
.bands td.v-n { color: var(--no); }
.bands tr.cur th { color: var(--go); }
caption { caption-side: top; text-align: left; padding: .6rem .65rem; font-size: .76rem; color: var(--ink-3); }

.tides { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 2rem; }
.tide { margin: 0; }
.tide figcaption { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.tide figcaption b { font-family: var(--display); font-weight: 500; font-size: 1rem; }
.tide figcaption small { color: var(--ink-3); font-size: .72rem; font-variation-settings: "MONO" 1; }
.tide svg { display: block; width: 100%; height: auto; overflow: visible; border-bottom: 1px solid var(--line); }
.night rect { fill: rgba(2, 10, 16, .45); }
.tide-area { fill: rgba(234, 241, 238, .07); }
.tide-line { fill: none; stroke: var(--ink); stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.js .tide-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .in .tide-line { animation: draw 1.6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.now { stroke: var(--go); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.mid { stroke: var(--line-2); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.tide-marks text { font-size: 11px; fill: var(--ink-2); font-family: var(--body); font-variation-settings: "MONO" 1; }
.tide-marks .hi { fill: var(--ink); }
.tide-marks text { text-anchor: middle; }
.tide-list {
  list-style: none; margin: .7rem 0 0; padding: 0;
  display: grid; grid-template-columns: auto auto auto 1fr; gap: .15rem 1.1rem;
  font-size: .78rem; color: var(--ink-2); font-variation-settings: "MONO" 1;
}
.tide-list li { display: contents; }
.tide-list span:first-child { color: var(--ink-3); }
.tide-list span:last-child { color: var(--ink); text-align: right; }

.cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.2rem; }
@media (max-width: 559px) {
  .cams { grid-template-columns: 1fr 1fr; gap: 1rem .7rem; }
  .cams .play { font-size: .72rem; padding: .5rem; }
  .cam figcaption { font-size: .72rem; }
}
.cam { margin: 0; }
.cam-screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px;
  background: #04111A; border: 1px solid var(--line);
}
.cam-screen img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t6) var(--ease); }
.cam-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cam:hover .cam-screen img { transform: scale(1.03); }
.cam-blank {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--ink-3);
  background: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(234, 241, 238, .03) 9px 10px);
}
.play {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; gap: .5rem;
  padding: .65rem .75rem; border: 0; background: linear-gradient(to top, rgba(4, 17, 26, .78), transparent 50%);
  color: var(--ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; text-align: left;
}
.play::before {
  content: ""; flex: none; width: 0; height: 0; margin-bottom: .2rem;
  border-style: solid; border-width: .4rem 0 .4rem .65rem; border-color: transparent transparent transparent var(--go);
  transition: transform var(--t2) var(--ease);
}
.play:hover::before { transform: scale(1.35); }
.cam figcaption { margin-top: .45rem; font-size: .8rem; }
.cam figcaption a { color: var(--ink-2); text-decoration: none; transition: color var(--t2) var(--ease); }
.cam figcaption a:hover { color: var(--go); text-decoration: underline; }

.buoys-table tbody tr { transition: background-color var(--t1) var(--ease); }

.steps {
  list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 1.6rem;
}
.steps li { position: relative; counter-increment: step; padding-top: 1rem; }
.steps li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line-2);
}
.steps li::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--go);
  transform: scaleX(0); transform-origin: left;
}
.js .in .steps li::after { animation: fill-line var(--t9) var(--ease) forwards; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
@keyframes fill-line { to { transform: scaleX(1); } }
.steps h3 { margin: 0 0 .4rem; font-family: var(--display); font-weight: 500; font-size: 1rem; letter-spacing: -.01em; }
.steps h3::before { content: counter(step); display: block; margin-bottom: .4rem; color: var(--go); font-size: 1.6rem; font-weight: 700; }
.steps p { margin: 0; font-size: .88rem; color: var(--ink-2); }
.calib { margin: 1.2rem 0 0; font-size: .9rem; color: var(--ink-2); max-width: 44rem; border-left: 2px solid var(--go); padding-left: .9rem; }

.faq { border-top: 1px solid var(--line); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 0; cursor: pointer; list-style: none; font-weight: 600; font-size: .98rem;
  transition: color var(--t2) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--ink-3);
  transition: transform var(--t3) var(--ease), color var(--t2) var(--ease);
}
.faq summary:hover { color: var(--go); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--go); }
.faq details::details-content { height: 0; overflow: hidden; transition: height var(--t3) var(--ease), content-visibility var(--t3) allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq details p { margin: 0 0 1.1rem; color: var(--ink-2); font-size: .92rem; max-width: 44rem; }

.close { padding-bottom: clamp(3rem, 7vw, 5rem); }
.close h2 { max-width: 48rem; }
.close .cta { margin: 1.4rem 0 0; }
.close .friction { margin-top: .65rem; }

.foot {
  max-width: 82rem; margin-inline: auto;
  padding: 1.6rem var(--pad) calc(2rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); font-size: .76rem; color: var(--ink-3);
}
.foot p { margin: 0 0 .4rem; max-width: 60rem; }
.foot a { color: var(--ink-2); transition: color var(--t2) var(--ease); }
.foot a:hover { color: var(--go); }

/* sections arrive once */
/* the heading of a section is there before it arrives; what it introduces opens under it like a page */
.js .block > :not(.head):not(h2) { opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity var(--t6) var(--ease), clip-path var(--t9) var(--ease); }
.js .block.in > :not(.head):not(h2) { opacity: 1; clip-path: inset(-2rem -2rem -2rem -2rem); }
.js .block.in > :nth-child(2) { transition-delay: 80ms; }
.js .block.in > :nth-child(3) { transition-delay: 160ms; }
.js .block.in > :nth-child(4) { transition-delay: 240ms; }
.steps li:nth-child(1) { --i: 0; }
.steps li:nth-child(2) { --i: 1; }
.steps li:nth-child(3) { --i: 2; }
.steps li:nth-child(4) { --i: 3; }
.steps li:nth-child(5) { --i: 4; }

/* ---------------------------------------------------------------- narrower */
@media (max-width: 1100px) {
  .nav { display: none; }
}
@media (max-width: 900px) {
  :root { --bar-h: 6.2rem; }
  .bar { flex-wrap: wrap; row-gap: .45rem; }
  .levels { width: 100%; }
  .levels legend { display: none; }
  .levels .track { width: 100%; }
  .levels label { flex: 1; }
  .levels span { text-align: center; padding-inline: .4rem; }
  .stage { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 1.2rem; row-gap: 0; }
  .hero-copy { display: contents; }
  .kicker { order: 1; }
  h1 { order: 2; }
  .verdict { order: 3; }
  .cta { order: 4; }
  .friction { order: 5; }
  .map { order: 6; margin-top: 1.6rem; }
  .sub { order: 7; margin-top: 1.6rem !important; }
  .readings { order: 8; }
  .map { justify-self: stretch; margin-inline: calc(var(--pad) * -1); }
  .map-frame { width: 100%; aspect-ratio: auto; overflow: hidden; }
  .map-inner { position: relative; inset: auto; width: 100%; aspect-ratio: 834 / 870; }
  .inset { position: relative; left: auto; top: auto; width: auto; margin: 2.2rem var(--pad) 0; }
  .hours { padding-inline: var(--pad); }
  .head { grid-template-columns: minmax(0, 1fr); }
  .peek {
    left: 0 !important; top: auto !important; right: 0; bottom: 0; width: auto;
    border-radius: 14px 14px 0 0; max-height: 88svh; overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(24px);
  }
  .peek-close { display: block; }
}
@media (max-width: 559px) {
  /* the window from x -125 to 380 of the map: every label on the San Mateo coast, Santa Cruz in the inset below */
  .map-inner { width: 165.15%; margin-left: -20.79%; }
  .spot .lab.flip { left: var(--mlx); transform: translate(-100%, -50%); }
  .spot:hover .lab.flip, .spot.hot .lab.flip { transform: translate(calc(-100% - 3px), -50%); }
  .leaders line.flip { display: none; }
}
@media (max-width: 520px) {
  .verdict b { font-size: clamp(3.3rem, 17vw, 4.6rem); }
  .readings { grid-template-columns: minmax(0, 1fr); }
  .legend { display: none; }
  .hourbar { height: 2rem; }
}
@media (hover: none) {
  .peek-close { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  .js .hero-copy > *, .js .map, .js .block > :not(.head):not(h2) { opacity: 1; transform: none; clip-path: none; }
  .js .tide-line { stroke-dashoffset: 0; }
  .js .steps li::after { transform: scaleX(1); }
  .spot.v-g .dot::after { display: none; }
  :root { scroll-behavior: auto; }
}