/* ==========================================================================
   Hidden Waters
   --------------------------------------------------------------------------
   The page is a descent. It opens at the surface -- the lightest water, a
   faint depth chart behind the hero -- and gets darker the further down you
   read, the way the water does. The Ichthys "Hidden Current" mark is the
   signature; aqua is the discovery colour and is used sparingly; amber is
   kept for the few things that should catch the eye (active, featured,
   warm on a temperature scale).
   ========================================================================== */

:root {
  /* Brand palette */
  --navy-950: #04121a;
  --navy: #071c26;          /* Deep Water Navy */
  --navy-800: #0a2531;
  --navy-700: #0e3342;
  --slate: #24363d;         /* Deep Slate */
  --teal: #087e8b;          /* Hidden Water Teal */
  --aqua: #24b7c5;          /* Sonar / Discovery Aqua */
  --aqua-soft: #8fd6de;     /* aqua for small text on dark */
  --mist: #f4f7f6;          /* Mist */
  --amber: #e8a33d;         /* Sunrise amber: emphasis only */

  /* Text on dark */
  --text: #e4eced;
  --text-dim: rgba(228, 236, 237, 0.74);
  --text-faint: rgba(228, 236, 237, 0.52);

  /* Surfaces */
  --surface: rgba(10, 37, 49, 0.66);
  --surface-raised: rgba(14, 51, 66, 0.72);
  --line: rgba(143, 214, 222, 0.14);
  --line-strong: rgba(143, 214, 222, 0.32);
  --radius: 20px;
  --radius-sm: 12px;

  /* Data scales. Depth darkens as it goes down; temperature runs from a
     cool blue through the brand's aqua to a restrained warm. */
  --depth-0: #2aa7b3;
  --depth-1: #1a8190;
  --depth-2: #11606e;
  --depth-3: #0c4453;
  --depth-4: #082d3a;
  --temp-cold: #4f8fbf;
  --temp-cool: #45b2b8;
  --temp-mild: #a9bf86;
  --temp-warm: #e8a33d;
  --temp-hot: #d4704a;

  /* Type */
  --font-display: "Barlow Semi Condensed", "Barlow", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-read: "Source Serif 4", Georgia, serif;

  /* Older names, kept so every rule written before the rebrand follows it. */
  --bg-deep: var(--navy);
  --bg-mid: var(--navy-700);
  --water: var(--teal);
  --water-light: var(--aqua);
  --water-sheen: var(--aqua-soft);
  --sand: #d9d3be;
  --ink: var(--navy);
  --panel: var(--surface);
  --panel-soft: var(--surface-raised);
  --accent: var(--amber);
  --accent-strong: #d48a22;
  --shadow: rgba(2, 10, 17, 0.5);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* html gets its own colour so the body gradient stays on the body and does
   not repeat down the canvas below a short page. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: #04121a;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* The descent: surface-lit at the top of the page, deepest at the bottom.
   One gradient over the whole document height -- no scroll handlers. */
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--navy-950);
  background-image:
    radial-gradient(90% 520px at 72% -80px, rgba(42, 167, 179, 0.22), transparent 70%),
    linear-gradient(180deg, #0d3342 0, #0a2733 640px, #071c26 1500px, #051720 62%, #04121a 100%);
  -webkit-font-smoothing: antialiased;
}

/* A faint depth chart behind the top of every page. */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1100px;
  background: url("/assets/brand/contours.svg") center top / cover no-repeat;
  opacity: 0.07;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
  mask-image: linear-gradient(180deg, #000 30%, transparent);
  z-index: 0;
}

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

button,
a,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--aqua-soft);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--mist);
}

:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--mist);
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* Icons: the sprite in assets/brand/icons.svg. Stroke settings inherit into
   each <use>, so every icon is drawn the same way wherever it appears. */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.22em;
}

.page-shell {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 48px;
}

/* --------------------------------------------------------------- header */

.topbar,
.panel,
.site-footer {
  border: 1px solid var(--line);
  background: var(--surface);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px 12px 20px;
  border-radius: 18px;
  position: sticky;
  top: 10px;
  z-index: 20;
  background: rgba(7, 28, 38, 0.82);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}

.brand-lockup img {
  height: 26px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

.main-nav a {
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.98rem;
  transition: color 0.15s ease, background 0.15s ease;
}

.main-nav a:hover {
  color: var(--mist);
  background: rgba(143, 214, 222, 0.07);
}

.main-nav a[aria-current="page"] {
  color: var(--mist);
}

/* The current page gets a waterline under it, like the mark's. */
.main-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--aqua);
}

.text-link,
.story-body a {
  color: var(--aqua-soft);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}

.text-link:hover,
.story-body a:hover {
  color: var(--mist);
}

/* --------------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(143, 214, 222, 0.05);
  color: var(--mist);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.button:hover {
  border-color: var(--aqua);
  background: rgba(36, 183, 197, 0.1);
}

.button:active {
  transform: translateY(1px);
}

.button .icon {
  transition: transform 0.15s ease;
}

.button:hover .icon {
  transform: translateX(2px);
}

.button.primary {
  background: var(--aqua);
  border-color: var(--aqua);
  color: var(--navy);
}

.button.primary:hover {
  background: #3fc6d3;
  border-color: #3fc6d3;
}

.button.secondary,
.button.ghost {
  background: transparent;
}

.topbar .button {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------- type bits */

.eyebrow,
.kicker,
.story-tag,
.detail-kicker {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.74rem;
  color: var(--aqua-soft);
}

.compact {
  margin: 0;
}

.section-heading {
  margin-bottom: 22px;
}

.section-heading h2 {
  margin: 8px 0 0;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.04;
}

.section-heading .section-lede {
  margin: 10px 0 0;
  max-width: 62ch;
  color: var(--text-dim);
}

.section-heading.split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

/* Category label with its icon: SPECIES, WATER TEMPERATURE, LAKES ... */
.category {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aqua-soft);
}

.category .icon {
  width: 18px;
  height: 18px;
  color: var(--aqua);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pill.is-live {
  border-color: rgba(232, 163, 61, 0.55);
  color: var(--amber);
}

/* --------------------------------------------------------------- panels */

.panel {
  border-radius: 26px;
}

.scenery-strip,
.reason-panel,
.species-panel,
.feature-grid,
.shop-strip,
.home-paths,
.home-factors {
  margin-top: 24px;
  padding: 30px;
}

/* --------------------------------------------------------------- hero */

.hero {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  padding: 44px 40px;
  overflow: hidden;
  position: relative;
}

.hero-copy {
  align-self: center;
}

.hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aqua-soft);
}

.hero-brand img {
  width: 34px;
  height: auto;
}

.hero h1 {
  margin: 18px 0 18px;
  font-size: clamp(2.8rem, 6.2vw, 4.9rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.012em;
  max-width: 13ch;
}

.hero-text {
  max-width: 54ch;
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--text-dim);
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hero-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 30px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.9rem;
}

.hero-topics li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-topics .icon {
  color: var(--aqua);
  width: 18px;
  height: 18px;
}

/* The cross-section: what you see from the boat, and what is under it. */
.hero-section {
  margin: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: linear-gradient(180deg, #123f4f 0%, var(--depth-1) 20%, var(--depth-2) 42%, var(--depth-3) 66%, var(--depth-4) 100%);
}

.hero-section svg {
  display: block;
  width: 100%;
  height: auto;
  flex: 1;
}

.hero-section figcaption {
  padding: 10px 16px 12px;
  font-size: 0.78rem;
  color: var(--text-faint);
  background: rgba(4, 18, 26, 0.6);
}

.xs-surface {
  stroke: var(--aqua-soft);
  stroke-width: 2;
  fill: none;
}

.xs-sky {
  fill: #0f3a49;
}

.xs-bottom {
  fill: #06212b;
  stroke: rgba(143, 214, 222, 0.45);
  stroke-width: 1.5;
}

.xs-contour {
  fill: none;
  stroke: rgba(143, 214, 222, 0.16);
  stroke-width: 1;
}

.xs-thermo {
  fill: rgba(232, 163, 61, 0.08);
  stroke: rgba(232, 163, 61, 0.45);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.xs-weed {
  fill: none;
  stroke: #4f9a86;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.xs-brush {
  fill: none;
  stroke: rgba(143, 214, 222, 0.5);
  stroke-width: 1.3;
  stroke-linecap: round;
}

.xs-fish {
  fill: none;
  stroke: var(--mist);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.xs-tick {
  stroke: rgba(143, 214, 222, 0.35);
  stroke-width: 1;
}

.xs-depth,
.xs-label {
  font-family: var(--font-body);
  fill: rgba(228, 236, 237, 0.62);
  font-size: 11px;
}

.xs-label {
  fill: var(--mist);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.xs-label.is-warm {
  fill: var(--amber);
}

.xs-leader {
  stroke: rgba(244, 247, 246, 0.4);
  stroke-width: 1;
}

.xs-sonar {
  fill: none;
  stroke: var(--aqua);
  stroke-width: 1.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: sonar 4.8s ease-out infinite;
}

.xs-sonar:nth-of-type(2) {
  animation-delay: 1.6s;
}

.xs-sonar:nth-of-type(3) {
  animation-delay: 3.2s;
}

@keyframes sonar {
  0% { opacity: 0.55; transform: scale(0.15); }
  80% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* --------------------------------------------------------------- paths */

/* Questions as entry points. Each card says what kind of knowledge it is
   (the category row) before it says anything else. */
.path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 168px;
  padding: 20px 20px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(14, 51, 66, 0.55), rgba(8, 36, 48, 0.55));
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.path-card h3 {
  margin: 0;
  font-size: 1.42rem;
  line-height: 1.12;
}

.path-card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.97rem;
  line-height: 1.5;
}

.path-card .path-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--aqua-soft);
  font-weight: 600;
  font-size: 0.95rem;
}

a.path-card:hover {
  border-color: rgba(36, 183, 197, 0.6);
  background: linear-gradient(180deg, rgba(18, 64, 80, 0.7), rgba(10, 44, 58, 0.7));
  transform: translateY(-2px);
}

a.path-card:hover .path-go .icon {
  transform: translateX(3px);
}

.path-go .icon {
  transition: transform 0.15s ease;
}

/* Not written yet: shown, so the reader knows it is coming, but plainly not
   a link. */
.path-card.is-soon {
  background: transparent;
  border-style: dashed;
}

.path-card.is-soon h3 {
  color: var(--text-dim);
}

.path-card.is-soon .path-go {
  color: var(--text-faint);
  font-weight: 500;
}

/* --------------------------------------------------------------- factors */

.factor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
}

.factor {
  padding: 20px 18px 22px;
  background: rgba(7, 28, 38, 0.92);
}

.factor .icon {
  width: 26px;
  height: 26px;
  color: var(--aqua);
}

.factor h3 {
  margin: 12px 0 6px;
  font-size: 1.2rem;
}

.factor p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}

.factor-note {
  margin: 16px 0 0;
  color: var(--text-faint);
  font-size: 0.9rem;
  max-width: 70ch;
}

/* --------------------------------------------------------------- scenery */

.scenery-grid,
.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.reason-card {
  padding: 22px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-raised);
}

.reason-index {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aqua-soft);
}

.reason-index .icon {
  width: 20px;
  height: 20px;
  color: var(--aqua);
}

.reason-card h3 {
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.reason-card p {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.6;
}

.scenery-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-raised);
}

.scenery-image {
  height: 200px;
  background-size: cover;
  background-position: center;
}

/* Photo first; where there is no photo, a depth gradient with the depth
   chart over it instead of an invented landscape. */
.image-lake-one {
  background:
    linear-gradient(180deg, rgba(4, 18, 26, 0.05), rgba(4, 18, 26, 0.5)),
    url("/assets/lake-greenwood.jpg") center / cover;
}

.image-lake-two,
.image-lake-three {
  background:
    url("/assets/brand/contours.svg") 30% 40% / 260% auto no-repeat,
    linear-gradient(180deg, var(--depth-1), var(--depth-3));
}

.image-lake-three {
  background:
    url("/assets/brand/contours.svg") 80% 70% / 220% auto no-repeat,
    linear-gradient(180deg, var(--depth-2), var(--depth-4));
}

.scenery-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 18px;
}

.scenery-copy span {
  color: var(--aqua-soft);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scenery-copy strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--mist);
}

.photo-credit {
  margin: 12px 0 0;
  font-size: 0.75rem;
  color: var(--text-faint);
}

.photo-credit a {
  color: inherit;
}

/* --------------------------------------------------------------- species */

.species-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: start;
}

.species-menu {
  display: grid;
  gap: 10px;
}

/* Each species is an Ichthys. The shape is an inline SVG stretched to the
   button (non-scaling strokes keep the line weight honest); the label sits
   in the body, clear of the nose and the tail. Hover lets the fish swim a
   little; the chosen one fills with water. */
.species-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 460px;
  min-height: 84px;
  padding: 0 27% 0 13%;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.fish-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: -1;
}

.fish-shape .fish-body,
.fish-shape .fish-tail {
  fill: rgba(14, 51, 66, 0.6);
  transition: fill 0.2s ease;
}

.fish-shape .fish-tail {
  fill: rgba(14, 51, 66, 0.35);
}

.fish-shape .fish-line {
  fill: none;
  stroke: rgba(143, 214, 222, 0.42);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

/* The waterline, as in the mark: only on the chosen fish. */
.fish-shape .fish-water {
  fill: none;
  stroke: var(--aqua);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.species-item:hover {
  transform: translateX(-4px);
}

.species-item:hover .fish-line {
  stroke: var(--aqua-soft);
}

.species-item:hover .fish-body {
  fill: rgba(18, 64, 80, 0.75);
}

.species-item.active .fish-body {
  fill: rgba(36, 183, 197, 0.16);
}

.species-item.active .fish-tail {
  fill: rgba(36, 183, 197, 0.1);
}

.species-item.active .fish-line {
  stroke: var(--aqua);
  stroke-width: 2.5;
}

.species-item.active .fish-water {
  opacity: 0.55;
}

.species-item:focus-visible {
  outline: none;
}

.species-item:focus-visible .fish-line {
  stroke: var(--amber);
  stroke-width: 3;
}

.species-item strong,
.species-item small {
  display: block;
}

.species-item strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.1;
  color: var(--mist);
}

.species-item small {
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 0.86rem;
}

.species-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--aqua);
}

.species-icon .icon {
  width: 19px;
  height: 19px;
}

.species-item.active .species-icon {
  border-color: var(--aqua);
  background: rgba(36, 183, 197, 0.12);
}

/* --------------------------------------------------------------- detail card */

.detail-card {
  min-height: 300px;
  background: linear-gradient(180deg, rgba(14, 51, 66, 0.62), rgba(7, 28, 38, 0.82));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 26px 26px 24px;
}

.detail-card h3 {
  margin: 10px 0 4px;
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: 1.05;
}

.detail-card .detail-season,
.detail-season {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 14px;
  color: var(--amber);
  font-weight: 600;
}

.detail-card p {
  line-height: 1.65;
  color: var(--text-dim);
}

.detail-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--text);
}

.detail-list li {
  position: relative;
  padding-left: 22px;
}

/* A small depth tick instead of a bullet. */
.detail-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--aqua);
}

.detail-note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--text-faint) !important;
}

.map-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 22px;
  align-items: start;
}

.map-visual {
  background: rgba(11, 38, 52, 0.7);
  border: 2px solid rgba(174, 234, 246, 0.18);
  border-radius: 28px;
  padding: 18px;
}

.us-map-svg {
  width: 100%;
  height: auto;
  display: block;
}

.us-map-svg path {
  fill: rgba(110, 199, 214, 0.16);
  stroke: rgba(174, 234, 246, 0.35);
  stroke-width: 1.4;
  cursor: pointer;
  transition: fill 0.15s ease;
}

.us-map-svg path:hover,
.us-map-svg path:focus,
.us-map-svg path.active {
  fill: var(--water-light);
}

.us-map-svg path.built {
  fill: var(--accent);
}

.us-map-svg path.built:hover,
.us-map-svg path.built.active {
  fill: var(--accent-strong);
}

#map-zoom-group {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.lake-pin {
  cursor: pointer;
}

.lake-pin-needle {
  stroke: rgba(4, 18, 26, 0.9);
  stroke-width: 0.6;
  stroke-linecap: round;
  transition: stroke-width 0.15s ease;
}

.lake-pin-tip {
  fill: rgba(8, 22, 30, 0.85);
}

.lake-pin-ball {
  fill: var(--amber);
  stroke: #fff;
  stroke-width: 0.5;
  transition: r 0.15s ease, fill 0.15s ease;
}

.lake-pin:hover .lake-pin-ball,
.lake-pin.active .lake-pin-ball {
  fill: #f4bd62;
  r: 3.4;
}

.lake-pin:hover .lake-pin-needle,
.lake-pin.active .lake-pin-needle {
  stroke-width: 0.9;
}

.lake-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.lake-item {
  background: rgba(11, 38, 52, 0.7);
  border: 2px solid rgba(174, 234, 246, 0.18);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  color: white;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.lake-item strong,
.lake-item small {
  display: block;
}

.lake-item small {
  color: rgba(236, 247, 252, 0.68);
  margin-top: 4px;
}

.lake-item:hover,
.lake-item.active {
  background: linear-gradient(135deg, rgba(110, 199, 214, 0.12), rgba(10, 25, 35, 0.78));
  border-color: rgba(174, 234, 246, 0.45);
}

/* Bigger map when a state with lakes is zoomed in -- the map column takes
   the full width instead of sharing space with the detail panel. */
.map-layout:has(.map-visual.zoomed) {
  grid-template-columns: 1fr;
}

.map-layout:has(.map-visual.zoomed) .map-visual {
  max-width: 100%;
}

#map-back-button {
  font: inherit;
}

.map-legend {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  font-size: 0.85rem;
  color: rgba(236, 247, 252, 0.72);
}

.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.map-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.map-legend .swatch-live {
  background: var(--accent);
}

.map-legend .swatch-soon {
  background: rgba(110, 199, 214, 0.3);
}

/* Detailed state map: real shorelines with pins inside each lake. */
.state-detail-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* A tall state (Georgia, Illinois) at full width would run past the bottom
   of the screen. Cap it; the SVG keeps its aspect and centres in the box. */
.state-page-map .state-detail-svg,
.lake-page-maps .state-detail-svg {
  max-height: min(78vh, 760px);
}

/* Real USGS relief, toned down. The elevation service ships a bright
   cartographic green; pulling the saturation back and warming it a little
   reads like imagery instead of a wall map, and sits inside this site's
   darker palette. */
.detail-terrain {
  filter: saturate(0.42) brightness(0.78) contrast(1.12) sepia(0.14) hue-rotate(-6deg);
}

/* Satellite stays close to true colour -- the point is to see the real
   ground -- only dimmed enough that the shorelines and pins still lead. */
.detail-satellite {
  filter: saturate(0.85) brightness(0.8) contrast(1.05);
}

/* On imagery the rivers need a little more weight to hold their own. */
[data-layer="satellite"] .river-major { stroke: rgba(170, 232, 250, 0.8); }
[data-layer="satellite"] .river-mid { stroke: rgba(160, 226, 246, 0.62); }

.map-layer-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(7, 28, 38, 0.72);
}

.map-layer-switch[hidden] {
  display: none;
}

.map-layer-switch button {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(236, 247, 252, 0.72);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.map-layer-switch button:hover {
  color: #fff;
}

.map-layer-switch button[aria-pressed="true"] {
  background: var(--water-light);
  color: var(--ink);
}

.map-layer-switch button:focus-visible {
  outline: 2px solid var(--water-light);
  outline-offset: 2px;
}

/* With terrain underneath, the land shapes stop being fills and become
   edges: the state outlined clearly, its neighbours only suggested. */
.detail-neighbor {
  fill: rgba(6, 26, 36, 0.55);
  stroke: rgba(174, 234, 246, 0.14);
  stroke-width: 1;
}

.detail-state {
  fill: none;
  stroke: rgba(196, 244, 255, 0.62);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* Rivers, width by Strahler stream order from the NHD data. */
.detail-rivers {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.river-minor {
  stroke: rgba(126, 196, 222, 0.34);
  stroke-width: 0.5;
}

.river-mid {
  stroke: rgba(138, 208, 232, 0.5);
  stroke-width: 0.9;
}

.river-major {
  stroke: rgba(158, 222, 244, 0.68);
  stroke-width: 1.5;
}

.lake-shape {
  fill: rgba(17, 96, 110, 0.9);
  stroke: rgba(186, 238, 252, 0.5);
  stroke-width: 0.5;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.15s ease;
}

.lake-shape.covered {
  fill: var(--water-light);
  stroke: var(--water-sheen);
}

.lake-shape:hover,
.lake-shape.hover,
.lake-shape.active {
  fill: var(--accent);
  stroke: var(--accent-strong);
}

.detail-pin {
  cursor: pointer;
  outline: none;
}

.detail-pin .lake-pin-needle {
  stroke-width: 1.4;
}

.detail-pin .lake-pin-ball {
  stroke-width: 1.4;
}

.detail-pin:hover .lake-pin-ball,
.detail-pin:focus-visible .lake-pin-ball,
.detail-pin.active .lake-pin-ball {
  fill: #f4bd62;
  r: 8;
}

.detail-pin:hover .lake-pin-needle,
.detail-pin.active .lake-pin-needle {
  stroke-width: 2;
}

.detail-pin:focus-visible .lake-pin-ball {
  stroke: var(--accent);
  stroke-width: 2.5;
}

.detail-label {
  fill: #fff;
  font-size: 17px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(4, 27, 37, 0.9);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}

.map-legend .swatch-lake-covered {
  background: var(--water-light);
}

.map-legend .swatch-lake-queued {
  background: rgba(174, 234, 246, 0.32);
}

.map-legend[hidden],
.map-attribution[hidden] {
  display: none;
}

.map-attribution {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: rgba(236, 247, 252, 0.5);
}

/* --------------------------------------------------------------- story cards */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.story-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  transition: border-color 0.15s ease;
}

.story-card:hover {
  border-color: var(--line-strong);
}

.story-image {
  height: 180px;
  background-size: cover;
  background-position: center;
}

.image-one {
  background-image: linear-gradient(180deg, transparent 40%, rgba(4, 18, 26, 0.55)), url("https://images.unsplash.com/photo-1520637836862-4d197d17c90a?auto=format&fit=crop&w=900&q=80");
}

.image-two {
  background-image: linear-gradient(180deg, transparent 40%, rgba(4, 18, 26, 0.55)), url("https://images.unsplash.com/photo-1473448912268-2022ce9509d8?auto=format&fit=crop&w=900&q=80");
}

.image-three {
  background-image: linear-gradient(180deg, transparent 40%, rgba(4, 18, 26, 0.55)), url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=900&q=80");
}

.story-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}

.story-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.story-tag .icon {
  width: 18px;
  height: 18px;
  color: var(--aqua);
}

.story-body h3 {
  margin: 10px 0 8px;
  font-size: 1.5rem;
  line-height: 1.1;
}

.story-body p {
  margin: 0 0 14px;
  line-height: 1.6;
  color: var(--text-dim);
}

.story-body a {
  margin-top: auto;
}

.section-foot {
  margin: 20px 0 0;
  color: var(--text-dim);
}

/* --------------------------------------------------------------- footer */

.site-footer {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  align-items: start;
  gap: 24px 32px;
  border-radius: 22px;
  padding: 26px 28px;
  background: rgba(4, 18, 26, 0.7);
}

.footer-brand img {
  height: 24px;
  width: auto;
}

.footer-tagline {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--mist);
}

.site-footer p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.92rem;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 8px 28px;
  justify-content: start;
}

.footer-nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-nav a:hover {
  color: var(--mist);
}

.footer-meta {
  text-align: right;
}

.footer-meta p + p {
  margin-top: 6px;
}

.site-footer .footer-small {
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* --------------------------------------------------------------- mobile tab bar */

/* On a phone the header keeps only the logo; navigation moves to a bar at
   the bottom of the screen, where a thumb can reach it. */
.tabbar {
  display: none;
}

@media (max-width: 920px) {
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(4, 18, 26, 0.94);
    border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    border-radius: 12px;
    color: var(--text-faint);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .tabbar .icon {
    width: 24px;
    height: 24px;
  }

  .tabbar a[aria-current="page"] {
    color: var(--mist);
  }

  .tabbar a[aria-current="page"] .icon {
    color: var(--aqua);
  }

  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------- depth gauge */

/* A sounding line down the left margin on wide screens. The marker follows
   the reader down the page (script.js sets --depth from the scroll
   position); purely decoration, so hidden from assistive tech. */
.depth-gauge {
  display: none;
}

@media (min-width: 1340px) {
  .depth-gauge {
    display: block;
    position: fixed;
    left: 22px;
    top: 120px;
    bottom: 60px;
    width: 34px;
    z-index: 5;
    pointer-events: none;
    --depth: 0;
  }

  .depth-gauge::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(143, 214, 222, 0.4), rgba(143, 214, 222, 0.06));
  }

  .depth-gauge i {
    position: absolute;
    left: 2px;
    width: 9px;
    height: 1px;
    background: rgba(143, 214, 222, 0.3);
  }

  .depth-gauge span {
    position: absolute;
    left: 16px;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    transform: translateY(-50%);
    white-space: nowrap;
  }

  .depth-gauge b {
    position: absolute;
    left: 1px;
    top: calc(var(--depth) * 100%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--aqua);
    background: var(--navy);
    transform: translateY(-50%);
    transition: top 0.12s linear;
  }
}

/* --------------------------------------------------------------- loading */

/* While something loads, the mark's waterline sweeps across a faint fish. */
.hw-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 12px;
  color: var(--text-faint);
  font-size: 0.9rem;
}

.hw-loading svg {
  width: 72px;
  height: auto;
  overflow: visible;
}

.hw-loading .ld-fish {
  fill: none;
  stroke: rgba(143, 214, 222, 0.3);
  stroke-width: 5;
  stroke-linecap: round;
}

.hw-loading .ld-line {
  fill: none;
  stroke: var(--aqua);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 20 120;
  animation: ld-sweep 1.4s ease-in-out infinite;
}

@keyframes ld-sweep {
  from { stroke-dashoffset: 30; }
  to { stroke-dashoffset: -110; }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .factor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .hero,
  .species-layout,
  .map-layout,
  .card-grid,
  .scenery-grid,
  .reason-grid,
  .shop-strip {
    grid-template-columns: 1fr;
    display: grid;
  }

  .main-nav,
  .topbar .button {
    display: none;
  }

  .topbar {
    padding: 12px 16px;
    justify-content: center;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .footer-meta {
    text-align: left;
  }

  .hero {
    padding: 32px 26px;
  }

  /* Five fish stacked would push the pattern off the screen. Two across,
     a little shorter, keeps them all in view above it. */
  .species-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .species-item {
    max-width: none;
    min-height: 72px;
    padding: 0 26% 0 12%;
  }

  .species-item .species-icon {
    display: none;
  }

  .species-item strong {
    font-size: 1.12rem;
  }

  .species-item small {
    font-size: 0.78rem;
  }
}

@media (max-width: 640px) {
  .page-shell {
    width: calc(100% - 24px);
    padding-top: 10px;
  }

  .topbar {
    top: 6px;
    border-radius: 16px;
  }

  .brand-lockup img {
    height: 22px;
  }

  .hero,
  .species-panel,
  .feature-grid,
  .shop-strip,
  .scenery-strip,
  .reason-panel,
  .home-paths,
  .home-factors {
    padding: 22px 16px;
  }

  .hero {
    margin-top: 14px;
    gap: 22px;
  }

  .hero h1 {
    font-size: 2.75rem;
  }

  .hero-text {
    font-size: 1.05rem;
  }

  .hero-actions .button {
    flex: 1 1 100%;
  }

  .section-heading.split {
    flex-direction: column;
    align-items: flex-start;
  }

  .factor-grid {
    grid-template-columns: 1fr;
  }

  .path-card {
    min-height: 0;
  }

  .site-footer {
    padding: 22px 18px;
  }
}

@media (max-width: 400px) {
  .species-menu {
    grid-template-columns: 1fr;
  }
}

/* Lake report: a short, dated, sourced note on a single lake event. */
.lake-report {
  margin-top: 28px;
  border-radius: 30px;
  padding: 26px 28px;
}

.lake-report-body {
  max-width: 68ch;
  display: grid;
  gap: 16px;
}

.lake-report-body p {
  margin: 0;
  line-height: 1.7;
  color: rgba(236, 247, 252, 0.84);
}

.lake-report-body .lake-report-lede {
  font-size: 1.12rem;
  color: #fff;
}

.lake-report-body a {
  color: var(--water-light);
}

/* Sources and the reporting line: present, but not competing with the text. */
.lake-report-note {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 2px solid var(--line);
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(236, 247, 252, 0.62);
}

@media (max-width: 860px) {
  .lake-report {
    padding: 18px 16px;
  }
}


/* Lake and state pages (lake.html, state.html via /lakes/... and /states/...) */
.lake-page-panel {
  margin-top: 28px;
  border-radius: 30px;
  padding: 26px 28px;
}

.lake-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.85rem;
  color: rgba(236, 247, 252, 0.6);
  margin-bottom: 14px;
}

.lake-crumbs a {
  color: var(--water-light);
  text-decoration: none;
}

.lake-crumbs a:hover {
  text-decoration: underline;
}

.lake-page-title {
  margin: 6px 0 8px;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lake-page-headline {
  margin: 0 0 18px;
  font-size: 1.15rem;
  color: var(--accent);
  font-weight: 600;
}

.lake-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.lake-page-summary {
  margin: 0;
  max-width: 68ch;
  line-height: 1.75;
  font-size: 1.05rem;
  color: rgba(236, 247, 252, 0.88);
}

.lake-page-related h2,
.lake-page-panel > h2 {
  margin: 26px 0 12px;
  font-size: 1.2rem;
}

/* Tabs on a lake page. Only the tabs a lake has content for are built, so
   this never renders an empty panel. */
.lake-tabs {
  margin-top: 28px;
}

.lake-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 2px solid var(--line);
  padding-bottom: 0;
}

.lake-tab {
  appearance: none;
  background: transparent;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(236, 247, 252, 0.6);
  cursor: pointer;
  margin-bottom: -2px;
}

.lake-tab:hover {
  color: #fff;
}

.lake-tab.is-on {
  color: #fff;
  border-color: var(--line);
  background: rgba(11, 38, 52, 0.7);
}

.lake-tab:focus-visible {
  outline: 3px solid var(--water-light);
  outline-offset: 2px;
}

.lake-tabpanel {
  padding-top: 24px;
}

.lake-tab-intro {
  margin: 0 0 16px;
  max-width: 68ch;
  line-height: 1.7;
  color: rgba(236, 247, 252, 0.8);
}

.lake-tab-note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 2px solid var(--line);
  max-width: 68ch;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(236, 247, 252, 0.6);
}

/* A list of outside links, each with a line on why it is worth reading. */
.lake-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  max-width: 68ch;
}

.lake-links > li > a {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--water-light);
}

.lake-links > li > p {
  margin: 4px 0 0;
  line-height: 1.6;
  color: rgba(236, 247, 252, 0.7);
  font-size: 0.94rem;
}

/* Boat ramps: every ramp prints the same facts, so they can be compared
   rather than taken on adjectives. */
.ramp-list {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ramp {
  background: rgba(11, 38, 52, 0.7);
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 18px 20px;
}

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

.ramp-head h3 {
  margin: 0;
  font-size: 1.08rem;
  color: #fff;
}

.ramp-access {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(236, 247, 252, 0.6);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.ramp-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 14px 0 0;
  font-size: 0.93rem;
}

.ramp-facts dt {
  color: rgba(236, 247, 252, 0.5);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 2px;
}

.ramp-facts dd {
  margin: 0;
  color: rgba(236, 247, 252, 0.9);
}

.ramp-note {
  margin: 12px 0 0;
  line-height: 1.6;
  font-size: 0.94rem;
  color: rgba(236, 247, 252, 0.72);
}

/* Catch photos: the gallery, and the form that feeds it. */
.catch-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 26px;
}

.catch {
  margin: 0;
  background: rgba(11, 38, 52, 0.7);
  border: 2px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.catch img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.catch figcaption {
  padding: 12px 14px;
  font-size: 0.9rem;
  color: rgba(236, 247, 252, 0.78);
}

.catch-form {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 2px solid var(--line);
  max-width: 62ch;
}

.catch-form-intro {
  margin: 0 0 18px;
  line-height: 1.7;
  color: rgba(236, 247, 252, 0.82);
}

.catch-form-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.catch-form-grid p {
  margin: 0;
  display: grid;
  gap: 6px;
}

.catch-form-wide {
  grid-column: 1 / -1;
}

.catch-form label {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(236, 247, 252, 0.6);
}

.catch-form input[type="text"],
.catch-form input[type="email"],
.catch-form input[type="file"],
.catch-form textarea {
  font: inherit;
  width: 100%;
  color: #fff;
  background: rgba(4, 22, 32, 0.8);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}

.catch-form textarea {
  resize: vertical;
  line-height: 1.6;
}

.catch-form input:focus-visible,
.catch-form textarea:focus-visible,
.catch-form button:focus-visible {
  outline: 3px solid var(--water-light);
  outline-offset: 2px;
}

.catch-form-hint {
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(236, 247, 252, 0.55);
}

.catch-form-consent {
  margin: 18px 0;
}

.catch-form-consent label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  color: rgba(236, 247, 252, 0.82);
}

.catch-form-consent input {
  margin-top: 3px;
  flex: none;
  width: 18px;
  height: 18px;
}

@media (max-width: 560px) {
  .lake-tab {
    padding: 9px 12px;
    font-size: 0.9rem;
  }
}

/* Long-form body for a lake we have written up properly. Each section
   carries its own sources, so the reader can check any claim without
   hunting for a bibliography. */
.lake-sections {
  margin-top: 30px;
  max-width: 68ch;
  display: grid;
  gap: 26px;
}

.lake-section h2 {
  margin: 0 0 10px;
  font-size: 1.18rem;
  color: #fff;
}

.lake-section p {
  margin: 0 0 10px;
  line-height: 1.75;
  color: rgba(236, 247, 252, 0.86);
}

.lake-section p:last-child {
  margin-bottom: 0;
}

.lake-section-sources {
  font-size: 0.86rem;
  color: rgba(236, 247, 252, 0.55);
}

.lake-section-sources a {
  color: var(--water-light);
}

.lake-page-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.lake-page-related li {
  display: grid;
  gap: 2px;
}

.lake-page-related a {
  color: var(--water-light);
  font-weight: 600;
}

.lake-page-maps {
  display: grid;
  gap: 14px;
}

.lake-page-maps figure {
  margin: 0;
  background: rgba(11, 38, 52, 0.7);
  border: 2px solid var(--line);
  border-radius: 22px;
  padding: 14px;
}

.lake-page-maps figcaption {
  margin-top: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--water-sheen);
}

.lake-closeup-svg {
  width: 100%;
  height: auto;
  max-height: 340px;
  display: block;
}

.lake-closeup-svg .lake-shape {
  stroke-width: 1.5px;
  cursor: default;
}

/* The closeup has no terrain behind it, so the dark water fill used on the
   imagery maps would disappear into the panel. The state page now draws the
   full base, so it uses the map page's fills. */
.lake-closeup-svg .lake-shape {
  fill: rgba(174, 234, 246, 0.32);
  stroke: rgba(174, 234, 246, 0.45);
}

.lake-closeup-svg .lake-shape.covered {
  fill: var(--water-light);
  stroke: var(--water-sheen);
}

a.lake-item {
  text-decoration: none;
}

.lake-page-panel .lake-list:not(:empty) {
  margin-top: 6px;
}

.state-page-map {
  margin: 22px 0;
  background: rgba(11, 38, 52, 0.7);
  border: 2px solid var(--line);
  border-radius: 24px;
  padding: 16px;
}

.state-page-map a .lake-shape {
  cursor: pointer;
}

.map-detail-link {
  margin-top: 6px;
}

/* Home: recent lakes and state picker */
.home-for-you {
  margin-top: 28px;
  border-radius: 30px;
  padding: 26px 28px;
}

.home-subhead {
  display: block;
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--water-sheen);
  font-weight: 500;
}

.home-for-you [data-slot="recent"] {
  margin-bottom: 26px;
}

.home-state-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.home-state-select {
  width: 100%;
  max-width: 360px;
  font: inherit;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid rgba(174, 234, 246, 0.3);
  background: rgba(11, 38, 52, 0.9);
  color: #ecf7fc;
  margin-bottom: 14px;
}

.home-state-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.home-us-map svg {
  width: 100%;
  height: auto;
  display: block;
}

.home-us-map path {
  fill: rgba(110, 199, 214, 0.16);
  stroke: rgba(174, 234, 246, 0.35);
  stroke-width: 1.2;
  cursor: pointer;
  transition: fill 0.15s ease;
}

.home-us-map path.built {
  fill: var(--accent);
}

.home-us-map path:hover,
.home-us-map path.active {
  fill: var(--water-light);
}

.home-us-map path.built.active,
.home-us-map path.built:hover {
  fill: var(--accent-strong);
}

.home-for-you .detail-card .lake-list {
  grid-template-columns: 1fr;
  margin: 12px 0;
}

.home-state-link {
  font-weight: 600;
}

@media (max-width: 860px) {
  .lake-page-panel,
  .home-for-you {
    padding: 18px 16px;
  }

  .lake-page-layout,
  .home-state-layout {
    grid-template-columns: 1fr;
  }
}

/* The hidden attribute always wins over component display rules. */
[hidden] {
  display: none !important;
}

/* The lake map is the site's deepest resource: its card leads, wider, on
   the one real photograph of the water. */
.path-card.path-feature {
  grid-column: span 2;
  min-height: 220px;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(4, 18, 26, 0.1) 0%, rgba(4, 18, 26, 0.55) 45%, rgba(4, 18, 26, 0.92) 100%),
    url("/assets/lake-greenwood.jpg") center 40% / cover;
}

.path-card.path-feature:hover {
  background:
    linear-gradient(180deg, rgba(4, 18, 26, 0) 0%, rgba(4, 18, 26, 0.5) 45%, rgba(4, 18, 26, 0.9) 100%),
    url("/assets/lake-greenwood.jpg") center 40% / cover;
}

.path-card.path-feature h3 {
  font-size: 1.8rem;
}

.path-card.path-feature p {
  max-width: 46ch;
  color: var(--text);
}

.path-card.path-feature .path-go {
  margin-top: 4px;
}

.home-for-you {
  margin-top: 24px;
  padding: 30px;
}

@media (max-width: 640px) {
  .path-card.path-feature {
    grid-column: auto;
  }

  .home-for-you {
    padding: 22px 16px;
  }
}

.site-footer .footer-small a {
  color: inherit;
}

.site-footer .footer-small a:hover {
  color: var(--mist);
}

/* Water temperature on the brand scale: cool blue to restrained warm. */
.temp-para {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 14px;
  align-items: start;
}

.temp-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 12px 8px;
  border-radius: 10px;
  border-left: 4px solid var(--chip, var(--temp-cool));
  background: rgba(14, 51, 66, 0.6);
  line-height: 1.2;
}

.temp-chip strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--mist);
}

.temp-chip span {
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--chip, var(--temp-cool));
  font-weight: 600;
}

.temp-cold { --chip: var(--temp-cold); }
.temp-cool { --chip: var(--temp-cool); }
.temp-mild { --chip: var(--temp-mild); }
.temp-warm { --chip: var(--temp-warm); }
.temp-hot { --chip: var(--temp-hot); }

@media (max-width: 560px) {
  .temp-para {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .temp-chip {
    flex-direction: row;
    gap: 10px;
    align-items: baseline;
    justify-self: start;
  }
}

.temp-none { --chip: rgba(143, 214, 222, 0.35); }

.map-legend {
  flex-wrap: wrap;
  gap: 6px 18px;
}

.map-legend span {
  white-space: nowrap;
}

/* Mapped states: a detail map, no written lakes yet. Teal, between the
   untouched states and the amber of live coverage. Placed after the base
   rules so hover and active still win. */
.us-map-svg path.mapped,
.home-us-map path.mapped {
  fill: rgba(8, 126, 139, 0.55);
}

.us-map-svg path.mapped:hover,
.us-map-svg path.mapped.active,
.home-us-map path.mapped:hover,
.home-us-map path.mapped.active {
  fill: var(--water-light);
}

.map-legend .swatch-mapped {
  background: rgba(8, 126, 139, 0.85);
}

/* Local shop write-up: the shop's own badge beside the text. */
.shop-card img {
  width: 76px;
  height: auto;
  margin-bottom: 2px;
}

.shop-feature-body {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.shop-feature-logo {
  margin: 0;
  position: sticky;
  top: 96px;
}

.shop-feature-logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

.shop-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 4px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(14, 51, 66, 0.45);
}

.shop-facts dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aqua-soft);
}

.shop-facts dd {
  margin: 2px 0 0;
  color: var(--mist);
}

@media (max-width: 720px) {
  .shop-feature-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .shop-feature-logo {
    position: static;
    width: 180px;
  }
}

/* ---------------------------------------------------------------- species */

/* Four fish in a row across the top, the full profile under them. */
#species-app .species-layout {
  grid-template-columns: 1fr;
  gap: 22px;
}

#species-app .species-menu {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#species-app .species-item {
  max-width: none;
  min-height: 80px;
  padding: 0 24% 0 12%;
}

@media (max-width: 1080px) {
  #species-app .species-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 400px) {
  #species-app .species-menu {
    grid-template-columns: 1fr;
  }
}

.species-profile {
  scroll-margin-top: 90px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.species-profile:focus {
  outline: none;
}

.sp-head h3 {
  margin: 6px 0 0;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
}

.sp-sci {
  margin: 6px 0 0;
  font-family: var(--font-read);
  font-style: italic;
  color: var(--text-dim);
}

.sp-overview {
  max-width: 72ch;
  margin-top: 16px;
}

.sp-overview p {
  margin: 0 0 12px;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--text);
}

/* A small, quiet source link: the name of the agency, not a footnote hunt. */
.src-link {
  display: inline-block;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--aqua-soft);
  text-decoration: none;
  vertical-align: 0.1em;
}

.src-link:hover {
  border-color: var(--aqua);
  color: var(--mist);
}

.src-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  margin-left: 6px;
  border-radius: 50%;
  border: 0;
  background: var(--aqua);
  opacity: 0.55;
  vertical-align: 0.05em;
}

.src-dot:hover {
  opacity: 1;
}

.sp-glance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
}

.sp-glance div {
  padding: 12px 14px;
  background: rgba(7, 28, 38, 0.92);
}

.sp-glance dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aqua-soft);
}

.sp-glance dd {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--mist);
}

/* Look-alike tables */
.sp-compare {
  margin-top: 28px;
}

.sp-compare h4,
.sp-findings-intro h4,
.sp-section h4 {
  margin: 0;
  font-size: 1.4rem;
}

.table-scroll {
  margin-top: 12px;
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.table-scroll table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.table-scroll th,
.table-scroll td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.table-scroll tr:last-child th,
.table-scroll tr:last-child td {
  border-bottom: 0;
}

.table-scroll thead th {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--mist);
  background: rgba(14, 51, 66, 0.6);
}

.table-scroll thead th a {
  color: inherit;
  text-decoration: none;
}

.table-scroll thead th a:hover {
  color: var(--aqua-soft);
}

.table-scroll tbody th {
  width: 150px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aqua-soft);
}

.table-scroll td {
  color: var(--text);
}

.table-scroll .na {
  color: var(--text-faint);
  font-style: italic;
}

.sp-note {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: var(--text-faint);
  max-width: 72ch;
}

/* Findings */
.sp-findings-intro {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.sp-findings-intro p {
  margin: 8px 0 0;
  color: var(--text-dim);
  max-width: 72ch;
}

.sp-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 6px;
}

.sp-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}

.sp-jump a span {
  font-size: 0.78rem;
  color: var(--aqua-soft);
  font-variant-numeric: tabular-nums;
}

.sp-jump a:hover {
  border-color: var(--aqua);
}

.sp-section {
  margin-top: 30px;
  scroll-margin-top: 90px;
}

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

.sp-count {
  font-size: 0.82rem;
  color: var(--text-faint);
}

.findings {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.finding {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(10, 37, 49, 0.55);
}

.finding p {
  margin: 0;
  line-height: 1.6;
  color: var(--text);
}

.finding-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 10px;
  font-size: 0.78rem;
}

.finding-meta .ev,
.finding-meta .tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Evidence strength, strongest first: research, agency, field, guide. */
.ev-research { background: rgba(36, 183, 197, 0.22); color: #bff0f5; }
.ev-agency { background: rgba(36, 183, 197, 0.14); color: var(--aqua-soft); }
.ev-field { background: rgba(143, 214, 222, 0.1); color: var(--text-dim); }
.ev-guide { background: rgba(143, 214, 222, 0.06); color: var(--text-dim); }

.finding-meta .tag {
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-weight: 500;
}

.finding-meta .tag-reviewed {
  border-color: rgba(232, 163, 61, 0.5);
  color: var(--amber);
}

.finding-meta .tag-temp {
  border-color: var(--chip, var(--line));
  color: var(--chip, var(--text-dim));
}

.finding-src {
  margin-left: auto;
  color: var(--aqua-soft);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finding-src:hover {
  color: var(--mist);
  text-decoration: underline;
}

.sp-more {
  margin-top: 12px;
}

.sp-built {
  margin: 26px 0 0;
  font-size: 0.8rem;
  color: var(--text-faint);
}

.species-glance {
  margin-top: 24px;
  padding: 30px;
}

@media (max-width: 720px) {
  .sp-glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finding-src {
    margin-left: 0;
    white-space: normal;
  }

  .species-glance {
    padding: 22px 16px;
  }
}

/* Grid children default to their content's minimum width, so a wide table
   inside the profile stretched the whole page past a phone's edge. Letting
   them shrink keeps each table scrolling inside its own box instead. */
#species-app .species-layout > *,
.species-profile,
.sp-compare,
.table-scroll {
  min-width: 0;
}

.table-scroll {
  max-width: 100%;
}

/* Two fish to a row: four across left each too narrow for its name. */
#species-app .species-menu {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 400px) {
  #species-app .species-menu {
    grid-template-columns: 1fr;
  }
}