/* Layout: one reading column; a tide-gauge table up top, then each figure as a plate with its vector PDF beneath. */
/* Palette follows the cover graphics: cream land, teal sea, aqua flood, vermilion landmarks.
   The gauge keeps the figures' blue and orange so it reads with Figures 1 and 2. */
:root {
  --bg: #f5f1e8;       /* land on the covers */
  --surface: #fffcf6;
  --ink: #2b3136;
  --muted: #6a6f6c;
  --rule: #e2d9c8;
  --teal: #0f6e7a;     /* headline teal of the covers */
  --flood: #18a7b5;    /* new flood water on the covers */
  --slr: #2a78d6;      /* ocean-connected, same blue as the figures */
  --low: #eb6834;      /* low-lying unconnected, same orange as the figures */
  --today: #a9a8a2;    /* already inundated at 0 ft */
  --track: #ebe4d6;
  --focus: #0f6e7a;
  --accent: #e4472b;   /* landmarks and the compare handle, same vermilion as the covers */
  --shadow: 0 1px 2px rgba(60, 50, 30, 0.06), 0 8px 28px rgba(60, 50, 30, 0.08);
  --font-display: "Libre Baskerville", Baskerville, Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121819; --surface: #1a2224; --ink: #ece7dc; --muted: #a2a9a6; --rule: #2c3639;
    --teal: #5cc6d1; --flood: #3cc3cf; --slr: #5b9cf0; --low: #f08257; --today: #7d7c77;
    --track: #253033; --focus: #5cc6d1; --accent: #f0664c; --shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121819; --surface: #1a2224; --ink: #ece7dc; --muted: #a2a9a6; --rule: #2c3639;
  --teal: #5cc6d1; --flood: #3cc3cf; --slr: #5b9cf0; --low: #f08257; --today: #7d7c77;
  --track: #253033; --focus: #5cc6d1; --accent: #f0664c; --shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
img { max-width: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
}
.wrap {
  max-width: 68rem; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 2.5rem 3rem;
  display: grid; gap: 3rem;
}
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; line-height: 1.15; font-weight: 400; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: -0.015em; line-height: 1.05; }
h1 em, h2 em { font-style: italic; color: var(--teal); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0; max-width: 65ch; }
.eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
/* section numbers, as on a portfolio board */
.num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--accent); }
header { display: grid; gap: 1.1rem; padding-top: 1rem; }
header .eyebrow { color: var(--accent); }
.lede { font-size: 1.2rem; color: var(--ink); max-width: 52ch; }
.meta { color: var(--muted); font-size: 0.9rem; }
/* a hand-drawn tide line under the title */
.tide { display: block; width: min(22rem, 70%); height: 14px; color: var(--flood); }
a { color: var(--teal); }
a:focus-visible, button:focus-visible, a.button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Tide gauge: each row is a level, the bar is newly inundated share of city land on a 0-100% scale. */
.gauge { display: grid; gap: 1rem; }
.gauge-head { display: grid; gap: 0.4rem; }
.rows { display: grid; gap: 0.55rem; font-variant-numeric: tabular-nums; }
.row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 4rem; gap: 0.75rem; align-items: center; }
.lvl { font-family: var(--font-mono); font-size: 0.95rem; text-align: right; }
.track { height: 1.4rem; background: var(--track); border-radius: 999px; display: flex; overflow: hidden; }
.seg-slr { background: var(--slr); }
.seg-low { background: var(--low); }
.pct { font-family: var(--font-mono); font-weight: 500; }
.scale { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 4rem; gap: 0.75rem; }
.ticks { position: relative; height: 1.2rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
.ticks span { position: absolute; transform: translateX(-50%); }
.ticks span:first-child { transform: none; }
.ticks span:last-child { transform: translateX(-100%); }
.key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.85rem; color: var(--muted); }
.key i { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; margin-right: 0.4rem; vertical-align: -0.1rem; }
.note { font-size: 0.9rem; color: var(--muted); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.fact { border-top: 1px solid var(--ink); padding-top: 0.8rem; display: grid; gap: 0.3rem; min-width: 0; }
.fact b { font-family: var(--font-display); font-size: 2.2rem; font-weight: 400; color: var(--teal); font-variant-numeric: tabular-nums; }
.fact span { font-size: 0.9rem; color: var(--muted); }

/* Figure plates */
.plates { display: grid; gap: 3rem; }
.plate { display: grid; gap: 0.9rem; }
.plate-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; }
.plate-head > div { min-width: 0; display: grid; gap: 0.2rem; }
.sheet {
  background: #ffffff;  /* the figures are printed on white in both themes */
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow);
}
.sheet img { display: block; width: 100%; height: auto; }
.caption { font-size: 0.95rem; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
button {
  font: 500 0.9rem/1 var(--font-body); color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.6rem 1rem; cursor: pointer;
}
button:hover, a.button:hover { border-color: var(--muted); }
a.button {
  font: 500 0.9rem/1 var(--font-body); color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.6rem 1rem; text-decoration: none;
}
button.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
button[disabled] { opacity: 0.5; cursor: default; }
.status { font-size: 0.85rem; color: var(--muted); align-self: center; }

.viewer { display: grid; gap: 0.6rem; }
.viewer-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.zoom { font-family: var(--font-mono); font-size: 0.85rem; min-width: 3.5rem; text-align: center; }
.canvas-box {
  overflow: auto; max-height: 80vh; background: #ffffff;
  border: 1px solid var(--rule); border-radius: 3px;
}
.canvas-box canvas { display: block; }

.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem; }
.details section { display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.details ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
footer { border-top: 1px solid var(--rule); padding-top: 1rem; font-size: 0.85rem; color: var(--muted); display: grid; gap: 0.4rem; }
code { font-family: var(--font-mono); font-size: 0.9em; }
/* gauge rows open that level in the comparison above */
.row { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.row:hover { background: var(--track); }
.row.on .lvl button { color: var(--accent); font-weight: 600; }
.row.on .track { box-shadow: 0 0 0 2px var(--accent); }
.lvl button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; border-radius: 3px; cursor: pointer;
  text-decoration: underline dotted var(--muted); text-underline-offset: 3px;
}

/* Rising story: step through the levels with Next, the timeline, arrow keys or a swipe */
.story { display: grid; gap: 1rem; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(16rem, 1fr); gap: 1.5rem; align-items: center; }
.story-fig { margin: 0; }
.story-frame {
  position: relative; aspect-ratio: 12 / 7; overflow: hidden; background: #ffffff; cursor: pointer; touch-action: pan-y;
  border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow);
}
.story-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* tide staff in the frame: fills from 0 to 9 ft */
.staff {
  position: absolute; right: 16px; top: 12%; bottom: 12%; width: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(51, 57, 63, 0.18);
}
.staff i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 999px; background: #18a7b5; }
.staff b {
  position: absolute; right: 14px; transform: translateY(50%); bottom: 0; white-space: nowrap;
  font: 600 0.78rem/1 var(--font-mono); color: #ffffff; background: #0f6e7a; padding: 0.3rem 0.45rem; border-radius: 4px;
}
.story-side { display: grid; gap: 0.9rem; min-width: 0; }
.story-count { font: 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.step {
  background: var(--surface); border: 1px solid var(--accent); border-radius: 8px; padding: 1.1rem 1.2rem;
  display: grid; gap: 0.4rem; min-height: 13rem; align-content: start;
}
.step .lv { font: 400 2.2rem/1 var(--font-display); color: var(--teal); }
.step .big { font-family: var(--font-display); font-size: 1.05rem; }
.step .big b { font-size: 1.5rem; font-weight: 400; color: var(--accent); font-variant-numeric: tabular-nums; }
.step .reach { font-size: 0.92rem; color: var(--muted); }
.step .reach em { font-family: var(--font-display); color: var(--ink); }
.story-nav { display: flex; gap: 0.5rem; }
.story-nav .play { flex: 1; justify-content: center; padding-block: 0.8rem; }
/* level timeline: a line that fills as the water rises, one stop per step */
.story-dots {
  --done: 0%;
  position: relative; display: flex; justify-content: space-between; gap: 0.25rem; padding-top: 0.2rem;
}
.story-dots::before, .story-dots::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; top: calc(0.2rem + 0.95rem); height: 2px; background: var(--rule);
}
.story-dots::after { right: auto; width: calc((100% - 2rem) * var(--done) / 100%); background: var(--flood); }
.story-dots button {
  position: relative; z-index: 1; font: 500 0.78rem/1 var(--font-mono); padding: 0.55rem 0.45rem; min-width: 2.2rem;
  border-radius: 999px; background: var(--surface);
}
.story-dots button.done { background: var(--flood); border-color: var(--flood); color: #ffffff; }
.story-dots button[aria-current="step"] { background: var(--accent); border-color: var(--accent); color: #ffffff; }
@media (prefers-reduced-motion: no-preference) {
  .staff i, .staff b { transition: height 0.6s ease, bottom 0.6s ease; }
  .story-dots::after { transition: width 0.6s ease; }
  .step.in { animation: card-in 0.35s ease; }
  @keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 760px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .step { min-height: 0; }
}

@media (max-width: 480px) {
  .row, .scale { grid-template-columns: 2.8rem minmax(0, 1fr) 3.4rem; gap: 0.5rem; }
  .levels button { padding: 0.5rem 0.62rem; font-size: 0.82rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .seg-slr, .seg-low { transition: width 0.6s ease; }
}

/* Drag to compare: today (left) against a chosen level (right). The range input
   covers the image, so mouse, touch and arrow keys all move the divider. */
.compare { display: grid; gap: 1rem; position: relative; }
.compare-head { display: grid; gap: 0.5rem; }
/* level picker drawn as a tide staff: one track, the chosen mark filled vermilion */
.levels {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; justify-self: start;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 999px;
}
.levels button { font-family: var(--font-mono); border: 0; background: transparent; padding: 0.5rem 0.95rem; }
.levels button:hover { background: var(--track); }
.levels button[aria-pressed="true"] { background: var(--accent); color: #ffffff; }
.levels .unit { align-self: center; padding: 0 0.75rem 0 0.25rem; font: 0.85rem/1 var(--font-mono); color: var(--muted); }
.cmp {
  --pos: 50%;
  position: relative; aspect-ratio: 12 / 7; overflow: hidden; user-select: none;
  background: #ffffff; border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow);
}
.cmp .layer { position: absolute; inset: 0; }
.cmp .before-layer { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
/* captions live inside each layer, so dragging reveals the one for the side you are looking at */
.cmp .cap {
  position: absolute; bottom: 4%; display: grid; gap: 0.15rem; max-width: 46%;
  font-family: var(--font-body); color: #33393f; pointer-events: none;
}
.cmp .cap b { font: 700 clamp(1.4rem, 4.2vw, 3rem)/1 var(--font-display); }
.cmp .cap span { font-size: clamp(0.75rem, 1.6vw, 1rem); }
.cmp .cap-before { left: 3.5%; }
.cmp .cap-after { right: 3.5%; text-align: right; }
.cmp .cap-after b { color: #0f6e7a; }
.cmp .blade {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px;
  background: #ffffff; box-shadow: 0 0 10px rgba(20, 40, 45, 0.45); pointer-events: none;
}
.cmp .knob {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #ffffff; border: 2.5px solid var(--accent);
  display: grid; place-items: center; box-shadow: 0 2px 10px rgba(20, 40, 45, 0.3);
}
.cmp .tag {
  position: absolute; top: 12px; font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.08em;
  color: #ffffff; padding: 0.45rem 0.6rem; border-radius: 4px; pointer-events: none;
}
.cmp .tag-before { left: 12px; background: #33393f; }
.cmp .tag-after { right: 12px; background: var(--accent); }
.cmp input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
}
.cmp:has(input:focus-visible) .knob { outline: 3px solid var(--focus); outline-offset: 3px; }
/* stacked stills that cross-fade when the level changes */
.stills { position: absolute; inset: 0; }
.stills img { opacity: 0; }
.stills img.on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .stills img { transition: opacity 0.45s ease; }
}
.cmp-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.play {
  display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono);
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.play:hover { border-color: var(--ink); opacity: 0.88; }
.play svg { width: 0.8rem; height: 0.8rem; fill: currentColor; }
.cmp-stat { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.7; min-height: 3.6em; }
.cmp-stat b { font-size: 1.7rem; font-weight: 400; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Your spot: tap the map, read the first level that floods it */
.spot { display: grid; gap: 1rem; position: relative; }
.spot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 1fr); gap: 1.5rem; align-items: start; }
.spot-map {
  position: relative; margin: 0; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
  background: #fbfaf7; box-shadow: var(--shadow); cursor: crosshair; touch-action: manipulation;
}
.spot-map { justify-self: center; max-width: calc(82vh * 820 / 1147); width: 100%; }
.spot-map img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.spot-pin {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: var(--accent); border: 3px solid #ffffff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.spot-mark {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; padding: 0;
  background: #ffffff; border: 3px solid var(--accent); cursor: pointer;
}
.spot-mark:hover { transform: scale(1.25); }
.spot-side { display: grid; gap: 0.9rem; min-width: 0; position: sticky; top: 1rem; }
.spot-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 1.1rem 1.2rem; display: grid; gap: 0.4rem; min-height: 10rem; align-content: start; }
.spot-card .lv { font: 400 2.2rem/1 var(--font-display); color: var(--teal); }
.spot-card .what { font-family: var(--font-display); font-size: 1.05rem; }
.spot-card .why { font-size: 0.9rem; color: var(--muted); }
.legend { display: grid; gap: 0.35rem; font-size: 0.82rem; color: var(--muted); }
.legend .ramp { display: grid; grid-template-columns: repeat(9, 1fr); border-radius: 4px; overflow: hidden; height: 0.9rem; }
.legend .ramp-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.72rem; }
.legend .keys { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.legend i { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: -0.1rem; border: 1px solid var(--rule); }

/* Guess first: the gauge stays veiled until the reader commits to a number */
.guess { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1.2rem; display: grid; gap: 0.7rem; }
.guess-q { font-family: var(--font-display); font-size: 1.15rem; }
.guess-q b { color: var(--accent); font-weight: 400; }
.guess-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.guess-row input { flex: 1 1 12rem; accent-color: var(--accent); }
.guess-row output { font: 400 1.6rem/1 var(--font-display); min-width: 3.5ch; color: var(--teal); font-variant-numeric: tabular-nums; }
.guess-result { font-family: var(--font-display); font-size: 1.05rem; }
.guess-result b { color: var(--accent); font-weight: 400; font-size: 1.4rem; }
.guess .skip { font-size: 0.85rem; color: var(--muted); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; justify-self: start; }
.gauge.veiled .rows, .gauge.veiled .key { filter: blur(7px); opacity: 0.6; pointer-events: none; user-select: none; }
@media (prefers-reduced-motion: no-preference) { .gauge .rows, .gauge .key { transition: filter 0.6s ease, opacity 0.6s ease; } }
.track { position: relative; }
.guess-tick { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; background: var(--ink); border-radius: 2px; }

/* Storms: every track that passed within the radius, by year and closest approach */
.storms { display: grid; gap: 1rem; }
.storm-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.storm-chart { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 0.5rem 0.5rem 0.25rem; }
.storm-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.storm-chart .axis { font: 11px var(--font-mono); fill: var(--muted); }
.storm-chart .grid { stroke: var(--rule); }
.storm-chart .dot { cursor: pointer; stroke: var(--surface); stroke-width: 1; }
.storm-chart .dot.on { stroke: var(--ink); stroke-width: 2; }
.storm-chart .lbl { font: italic 12px var(--font-display); fill: var(--ink); pointer-events: none; }
.storm-info { font-family: var(--font-display); font-size: 1.05rem; min-height: 1.7em; }
.storm-info b { color: var(--accent); font-weight: 400; }
@media (max-width: 760px) { .spot-grid { grid-template-columns: minmax(0, 1fr); } }

/* landmark rings on the comparison, and the card they open */
.cmp .hotspots { position: absolute; inset: 0; pointer-events: none; }
.cmp .hot {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border-radius: 50%;
  background: transparent; border: 2px solid rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 2px rgba(228, 71, 43, 0.75);
  pointer-events: auto; cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .cmp .hot { animation: hot-pulse 2.4s ease-in-out infinite; }
  @keyframes hot-pulse { 50% { box-shadow: 0 0 0 7px rgba(228, 71, 43, 0.15); } }
}
.lm-card {
  position: absolute; z-index: 5; width: min(300px, 80%); background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); overflow: hidden;
  display: grid; font-size: 0.9rem;
}
.lm-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; position: static; height: auto; }
.lm-card .body { padding: 0.8rem 0.9rem 0.9rem; display: grid; gap: 0.3rem; }
.lm-card h3 { font-size: 1.15rem; padding-right: 1.6rem; }
.lm-card .lm-when { color: var(--muted); }
.lm-card .lm-when b { color: var(--accent); font-weight: 600; }
.lm-card .credit { font-size: 0.72rem; color: var(--muted); }
.lm-card .x {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: #33393f; font-size: 1rem; line-height: 1;
}
.when { display: grid; gap: 1rem; }
.when-chart-line { fill: none; stroke-width: 1.5; }

/* Hero: the old town rising behind the title, full bleed */
body { overflow-x: clip; }
.hero {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: -2.5rem;
  min-height: min(92vh, 62vw); display: grid; align-items: center; overflow: hidden; padding: 0;
}
.hero-media { position: absolute; inset: 0; background: #ffffff; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; display: block; }
.hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 26%, color-mix(in srgb, var(--bg) 70%, transparent) 42%, transparent 64%),
              linear-gradient(0deg, var(--bg) 0%, transparent 18%);
}
.hero-text {
  position: relative; z-index: 1; display: grid; gap: 1.1rem; max-width: 42rem;
  padding: 4rem 16px 4.5rem max(16px, calc((100vw - 68rem) / 2 + 16px));
}
.hero-badge {
  position: absolute; z-index: 1; right: max(16px, calc((100vw - 68rem) / 2 + 16px)); bottom: 2.2rem;
  display: grid; justify-items: end; gap: 0.2rem; text-align: right; color: #33393f;
  background: rgba(255, 255, 255, 0.82); padding: 0.6rem 0.85rem; border-radius: 8px; backdrop-filter: blur(4px);
}
.hero-badge b { font: 400 clamp(1.6rem, 3.4vw, 2.6rem)/1 var(--font-display); color: #0f6e7a; font-variant-numeric: tabular-nums; }
.hero-badge span { font-size: 0.85rem; }
.hero-cue {
  justify-self: start; font: 500 0.9rem/1 var(--font-mono); color: var(--bg); background: var(--ink);
  padding: 0.75rem 1.1rem; border-radius: 999px; text-decoration: none;
}
.hero-cue span { display: inline-block; margin-left: 0.3rem; }
@media (prefers-reduced-motion: no-preference) {
  .hero-cue span { animation: cue 1.8s ease-in-out infinite; }
  @keyframes cue { 50% { transform: translateY(4px); } }
}
@media (max-width: 760px) {
  .hero { min-height: 0; align-items: start; }
  .hero-media { position: relative; aspect-ratio: 12 / 7; }
  .hero-media::after { background: linear-gradient(0deg, var(--bg) 0%, transparent 30%); }
  .hero-text { padding: 0.5rem 16px 1rem; }
  .hero-badge { bottom: 0.8rem; right: 12px; padding: 0.4rem 0.6rem; }
}

/* the string of pearls: each landmark on a 0-9 ft line, hollow where low-lying ground floods, solid where the sea arrives */
.pearl-line { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 0.8rem 0.9rem 0.4rem; }
.pearl-line h3 { font-size: 1.1rem; margin-bottom: 0.2rem; }
.pearl-line svg { display: block; width: 100%; height: auto; overflow: visible; }
.pearl-line .axis { font: 11px var(--font-mono); fill: var(--muted); }
.pearl-line .grid { stroke: var(--rule); }
.pearl-line .name { font: italic 14px var(--font-display); fill: var(--ink); }
.pearl-line .thread { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.pearl-line .pearl { cursor: pointer; }
.pearl-line .pearl:focus-visible { outline: none; stroke: var(--focus); stroke-width: 3; }

/* plan view: water at a chosen level, painted from the data image */
.spot-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.spot-tools { display: grid; gap: 0.6rem; }
.spot-tools .row2 { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.spot-tools input[type="range"] { flex: 1 1 10rem; accent-color: var(--flood); }
.spot-tools output { font: 400 1.4rem/1 var(--font-display); color: var(--teal); min-width: 4ch; font-variant-numeric: tabular-nums; }
.spot-tools .sub { font-size: 0.88rem; color: var(--muted); }

/* cross-section */
.cut { display: grid; gap: 1rem; }
.cut-chart { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 0.5rem; }
.cut-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cut-chart .axis { font: 11px var(--font-mono); fill: var(--muted); }
.cut-chart .lbl { font: italic 13px var(--font-display); fill: var(--ink); }
.cut-chart .wname { font: italic 13px var(--font-display); fill: #0f6e7a; }
.cut-tools { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
.cut-tools input[type="range"] { flex: 1 1 12rem; accent-color: var(--flood); }
.cut-tools output { font: 400 1.6rem/1 var(--font-display); color: var(--teal); min-width: 4ch; font-variant-numeric: tabular-nums; }

/* birth year */
.age { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: center; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 0.9rem 1.1rem; }
.age label { font-family: var(--font-display); font-size: 1.1rem; }
.age input { font: 400 1.3rem/1 var(--font-display); width: 6ch; padding: 0.35rem 0.5rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg); color: var(--ink); }
.age p { flex: 1 1 18rem; font-family: var(--font-display); font-size: 1.05rem; }
.age p b { color: var(--accent); font-weight: 400; font-size: 1.3rem; }

.copied { font-size: 0.82rem; color: var(--teal); }
@media (max-width: 480px) {
  .cmp-bar .levels { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); width: 100%; }
  .cmp-bar .levels button { padding: 0.55rem 0; font-size: 0.8rem; }
  .cmp-bar .levels .unit { display: none; }
}