/* Coastal — Cape Cod Surf Report's light nautical default theme (mockup-driven).
   Legacy arcade themes remain opt-in via the theme picker. */

.coastal-only { display: none; }

html[data-theme="coastal"] {
  color-scheme: light;
  --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: "Inter", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: "Inter", "Segoe UI", sans-serif;

  --bg: #f3f0ea;
  --bg-deep: #e8e3da;
  --panel: #faf8f4;
  --panel-soft: #f2efe8;
  --text: #26323b;
  --text-dim: #55616b;
  --ink: #1d2830;
  --line: rgba(30, 45, 55, 0.1);
  --brass: #a07f4f;
  --brass-dark: #6f5636;
  --slate: #3d5a6c;
  --slate-deep: #2f4856;
  --sage: #7a9a8b;
  --sage-deep: #5f8172;
  --sage-soft: #dfe9df;
  --fair: #c9a45a;
  --fair-soft: #f3e8c6;
  --cold: #5d87a3;
  --cold-soft: #d9e6ee;
  --choppy: #b06a4a;
  --choppy-soft: #f1dccf;
  --shadow: 0 14px 34px rgba(40, 50, 55, 0.08), 0 1px 2px rgba(40, 50, 55, 0.05);
  --radius: 10px;
  --radius-sm: 6px;

  /* Base-theme accent variables remapped to AA-safe tones (they color text in app.css). */
  --cyan: var(--slate);
  --magenta: #7b5e32;
  --yellow: #7a5a1c;
  --red: #a4402f;
  --green: #3f6a4d;
  --blue: #2f5f7c;
  --orange: #8a5a1e;
  --border-chonk: 1px;
  --shadow-pixel: none;
  --focus: 0 0 0 3px #f7f2ea, 0 0 0 5px var(--slate);
  --meta-theme: #efe8dc;

  /* Grit: scattered speckles, dust and faint smudges (seeded, tiled). */
  --speckle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520'><filter id='b'><feGaussianBlur stdDeviation='3'/></filter><circle cx='168' cy='78' r='13' fill='%23554838' opacity='0.037' filter='url(%23b)'/><circle cx='279' cy='190' r='7' fill='%23554838' opacity='0.048' filter='url(%23b)'/><circle cx='19' cy='225' r='7' fill='%23554838' opacity='0.037' filter='url(%23b)'/><circle cx='221' cy='430' r='7' fill='%23554838' opacity='0.041' filter='url(%23b)'/><circle cx='326' cy='493' r='12' fill='%23554838' opacity='0.045' filter='url(%23b)'/><circle cx='508' cy='24' r='15' fill='%23554838' opacity='0.042' filter='url(%23b)'/><line x1='75.0' y1='61.3' x2='77.8' y2='61.3' stroke='%234a3f33' stroke-width='0.70' opacity='0.35' transform='rotate(103 75.0 61.3)'/><circle cx='50.7' cy='370.3' r='1.18' fill='%2327313a' opacity='0.30'/><circle cx='222.3' cy='163.4' r='1.20' fill='%2327313a' opacity='0.26'/><circle cx='93.5' cy='405.5' r='0.60' fill='%2327313a' opacity='0.22'/><line x1='379.3' y1='149.7' x2='385.0' y2='149.7' stroke='%2327313a' stroke-width='1.34' opacity='0.17' transform='rotate(62 379.3 149.7)'/><circle cx='219.3' cy='500.2' r='0.59' fill='%2327313a' opacity='0.29'/><circle cx='182.1' cy='258.3' r='1.46' fill='%234a3f33' opacity='0.16'/><circle cx='246.5' cy='345.4' r='0.57' fill='%236b5a42' opacity='0.32'/><line x1='354.2' y1='231.7' x2='356.9' y2='231.7' stroke='%2327313a' stroke-width='1.09' opacity='0.37' transform='rotate(83 354.2 231.7)'/><circle cx='60.9' cy='30.7' r='1.42' fill='%234a3f33' opacity='0.17'/><circle cx='476.7' cy='258.2' r='0.70' fill='%2327313a' opacity='0.24'/><circle cx='426.0' cy='449.3' r='0.83' fill='%2327313a' opacity='0.25'/><circle cx='197.8' cy='120.0' r='0.60' fill='%236b5a42' opacity='0.18'/><circle cx='252.2' cy='306.3' r='0.82' fill='%2327313a' opacity='0.14'/><circle cx='317.1' cy='165.7' r='0.65' fill='%236b5a42' opacity='0.36'/><circle cx='384.7' cy='237.5' r='1.55' fill='%236b5a42' opacity='0.39'/><circle cx='204.0' cy='207.5' r='0.62' fill='%234a3f33' opacity='0.30'/><line x1='512.0' y1='229.1' x2='514.4' y2='229.1' stroke='%234a3f33' stroke-width='0.51' opacity='0.30' transform='rotate(27 512.0 229.1)'/><circle cx='189.1' cy='13.3' r='1.55' fill='%234a3f33' opacity='0.30'/><circle cx='496.8' cy='313.2' r='1.07' fill='%2327313a' opacity='0.17'/><circle cx='242.3' cy='251.6' r='0.60' fill='%2327313a' opacity='0.17'/><circle cx='248.9' cy='359.9' r='1.12' fill='%236b5a42' opacity='0.19'/><circle cx='358.8' cy='475.4' r='1.41' fill='%236b5a42' opacity='0.22'/><circle cx='362.0' cy='135.8' r='0.94' fill='%234a3f33' opacity='0.18'/><circle cx='405.1' cy='171.4' r='0.77' fill='%234a3f33' opacity='0.35'/><circle cx='425.5' cy='384.7' r='0.77' fill='%2327313a' opacity='0.27'/><circle cx='514.6' cy='410.9' r='1.07' fill='%236b5a42' opacity='0.19'/><line x1='232.6' y1='487.3' x2='236.4' y2='487.3' stroke='%2327313a' stroke-width='1.35' opacity='0.39' transform='rotate(18 232.6 487.3)'/><circle cx='175.6' cy='251.0' r='1.68' fill='%234a3f33' opacity='0.30'/><circle cx='339.5' cy='415.8' r='0.60' fill='%2327313a' opacity='0.31'/><line x1='390.1' y1='248.6' x2='395.0' y2='248.6' stroke='%2327313a' stroke-width='0.57' opacity='0.35' transform='rotate(170 390.1 248.6)'/><line x1='240.8' y1='386.5' x2='244.7' y2='386.5' stroke='%234a3f33' stroke-width='0.48' opacity='0.18' transform='rotate(106 240.8 386.5)'/><line x1='341.0' y1='318.0' x2='343.1' y2='318.0' stroke='%2327313a' stroke-width='0.97' opacity='0.26' transform='rotate(99 341.0 318.0)'/><circle cx='415.7' cy='377.7' r='0.62' fill='%234a3f33' opacity='0.33'/><circle cx='453.3' cy='429.6' r='0.75' fill='%2327313a' opacity='0.21'/><circle cx='397.1' cy='169.5' r='1.15' fill='%234a3f33' opacity='0.36'/><circle cx='184.0' cy='238.2' r='1.20' fill='%2327313a' opacity='0.38'/><circle cx='456.6' cy='68.0' r='0.68' fill='%2327313a' opacity='0.27'/><circle cx='316.4' cy='403.5' r='0.68' fill='%236b5a42' opacity='0.18'/><circle cx='289.4' cy='169.5' r='1.12' fill='%234a3f33' opacity='0.28'/><circle cx='29.5' cy='99.5' r='0.55' fill='%2327313a' opacity='0.17'/><circle cx='395.2' cy='474.5' r='1.03' fill='%236b5a42' opacity='0.30'/><circle cx='103.7' cy='144.1' r='1.11' fill='%236b5a42' opacity='0.35'/><circle cx='363.6' cy='455.8' r='1.63' fill='%236b5a42' opacity='0.21'/><line x1='105.3' y1='232.7' x2='107.6' y2='232.7' stroke='%2327313a' stroke-width='0.80' opacity='0.24' transform='rotate(43 105.3 232.7)'/><circle cx='348.1' cy='407.6' r='1.58' fill='%236b5a42' opacity='0.18'/><circle cx='190.4' cy='131.6' r='0.66' fill='%236b5a42' opacity='0.26'/><circle cx='207.1' cy='253.4' r='1.69' fill='%234a3f33' opacity='0.36'/><circle cx='516.9' cy='210.0' r='1.01' fill='%234a3f33' opacity='0.23'/><circle cx='10.1' cy='288.1' r='1.03' fill='%2327313a' opacity='0.14'/><circle cx='153.6' cy='499.6' r='0.64' fill='%234a3f33' opacity='0.38'/><circle cx='54.5' cy='138.1' r='0.55' fill='%2327313a' opacity='0.34'/><line x1='426.3' y1='441.8' x2='430.6' y2='441.8' stroke='%2327313a' stroke-width='1.05' opacity='0.39' transform='rotate(165 426.3 441.8)'/><circle cx='364.2' cy='46.5' r='0.57' fill='%2327313a' opacity='0.32'/><circle cx='139.8' cy='8.8' r='0.61' fill='%236b5a42' opacity='0.21'/><circle cx='34.6' cy='448.6' r='1.04' fill='%236b5a42' opacity='0.23'/><circle cx='476.0' cy='323.3' r='0.55' fill='%234a3f33' opacity='0.32'/><circle cx='136.2' cy='94.2' r='1.62' fill='%236b5a42' opacity='0.30'/><circle cx='150.8' cy='260.0' r='0.71' fill='%234a3f33' opacity='0.23'/><circle cx='19.2' cy='9.6' r='1.11' fill='%236b5a42' opacity='0.39'/><circle cx='486.0' cy='55.3' r='1.48' fill='%2327313a' opacity='0.25'/><circle cx='462.1' cy='504.6' r='0.87' fill='%234a3f33' opacity='0.20'/><circle cx='432.8' cy='367.5' r='1.26' fill='%2327313a' opacity='0.25'/><line x1='435.2' y1='7.4' x2='440.6' y2='7.4' stroke='%2327313a' stroke-width='1.00' opacity='0.37' transform='rotate(15 435.2 7.4)'/><line x1='452.7' y1='348.7' x2='455.8' y2='348.7' stroke='%2327313a' stroke-width='0.67' opacity='0.20' transform='rotate(33 452.7 348.7)'/><circle cx='1.9' cy='189.4' r='0.89' fill='%2327313a' opacity='0.40'/><line x1='502.1' y1='161.0' x2='506.8' y2='161.0' stroke='%2327313a' stroke-width='0.74' opacity='0.14' transform='rotate(50 502.1 161.0)'/><circle cx='129.1' cy='403.6' r='0.61' fill='%234a3f33' opacity='0.35'/><circle cx='21.7' cy='11.7' r='0.87' fill='%236b5a42' opacity='0.20'/><circle cx='443.7' cy='80.7' r='1.57' fill='%236b5a42' opacity='0.34'/><line x1='169.6' y1='512.1' x2='174.5' y2='512.1' stroke='%236b5a42' stroke-width='0.54' opacity='0.33' transform='rotate(148 169.6 512.1)'/><circle cx='266.8' cy='223.2' r='1.34' fill='%236b5a42' opacity='0.27'/><circle cx='295.6' cy='422.7' r='0.52' fill='%236b5a42' opacity='0.32'/><circle cx='360.5' cy='119.6' r='0.54' fill='%2327313a' opacity='0.17'/><circle cx='195.8' cy='234.7' r='0.56' fill='%236b5a42' opacity='0.14'/><circle cx='254.4' cy='1.7' r='1.46' fill='%236b5a42' opacity='0.33'/><circle cx='47.8' cy='273.5' r='1.39' fill='%234a3f33' opacity='0.26'/><circle cx='122.1' cy='393.3' r='0.78' fill='%2327313a' opacity='0.31'/><circle cx='198.9' cy='249.1' r='1.32' fill='%236b5a42' opacity='0.34'/><circle cx='103.1' cy='311.8' r='0.90' fill='%236b5a42' opacity='0.31'/><line x1='295.2' y1='6.5' x2='299.2' y2='6.5' stroke='%236b5a42' stroke-width='0.46' opacity='0.21' transform='rotate(39 295.2 6.5)'/><circle cx='368.6' cy='148.5' r='1.06' fill='%236b5a42' opacity='0.34'/><circle cx='508.6' cy='486.9' r='0.52' fill='%236b5a42' opacity='0.26'/><line x1='233.7' y1='139.7' x2='238.7' y2='139.7' stroke='%234a3f33' stroke-width='0.60' opacity='0.39' transform='rotate(16 233.7 139.7)'/></svg>");
  --speckle-soft: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><circle cx='76.1' cy='174.2' r='0.75' fill='%236b5a42' opacity='0.21'/><circle cx='193.8' cy='290.8' r='0.83' fill='%234a3f33' opacity='0.20'/><circle cx='150.5' cy='267.7' r='0.83' fill='%234a3f33' opacity='0.22'/><line x1='48.5' y1='296.3' x2='50.7' y2='296.3' stroke='%234a3f33' stroke-width='0.61' opacity='0.11' transform='rotate(172 48.5 296.3)'/><circle cx='249.6' cy='263.5' r='0.67' fill='%2327313a' opacity='0.21'/><circle cx='294.8' cy='126.4' r='1.09' fill='%234a3f33' opacity='0.19'/><circle cx='31.2' cy='43.5' r='0.62' fill='%2327313a' opacity='0.27'/><circle cx='273.7' cy='134.8' r='1.12' fill='%236b5a42' opacity='0.21'/><circle cx='187.0' cy='289.3' r='1.00' fill='%2327313a' opacity='0.27'/><circle cx='214.8' cy='52.2' r='1.14' fill='%236b5a42' opacity='0.27'/><line x1='228.4' y1='67.6' x2='233.0' y2='67.6' stroke='%2327313a' stroke-width='0.89' opacity='0.21' transform='rotate(87 228.4 67.6)'/><circle cx='154.7' cy='110.1' r='0.50' fill='%234a3f33' opacity='0.26'/><circle cx='246.0' cy='279.3' r='0.49' fill='%234a3f33' opacity='0.21'/><circle cx='187.6' cy='176.3' r='1.19' fill='%234a3f33' opacity='0.16'/><circle cx='99.1' cy='24.6' r='0.93' fill='%234a3f33' opacity='0.12'/><circle cx='93.3' cy='84.3' r='1.00' fill='%2327313a' opacity='0.28'/><circle cx='306.8' cy='286.9' r='0.75' fill='%236b5a42' opacity='0.19'/><circle cx='277.4' cy='217.9' r='0.53' fill='%236b5a42' opacity='0.28'/><circle cx='203.0' cy='229.0' r='1.20' fill='%2327313a' opacity='0.18'/><circle cx='175.5' cy='3.7' r='0.78' fill='%234a3f33' opacity='0.21'/><circle cx='188.5' cy='42.6' r='0.96' fill='%2327313a' opacity='0.17'/><circle cx='112.8' cy='226.2' r='1.04' fill='%234a3f33' opacity='0.11'/><circle cx='6.8' cy='118.1' r='0.95' fill='%236b5a42' opacity='0.16'/><circle cx='116.5' cy='100.1' r='0.75' fill='%2327313a' opacity='0.21'/><circle cx='33.6' cy='260.2' r='1.23' fill='%234a3f33' opacity='0.23'/><circle cx='71.2' cy='257.2' r='0.64' fill='%2327313a' opacity='0.14'/></svg>");
}

/* Whitewashed shiplap: ~108px planks, soft shadow groove + top-edge highlight, faint grain */
html[data-theme="coastal"] body {
  background-color: #f6f4f0;
  background-image:
    var(--speckle),
    radial-gradient(420px 300px at 14% 22%, rgba(90, 72, 50, 0.05), transparent 70%),
    radial-gradient(520px 360px at 82% 58%, rgba(70, 80, 90, 0.045), transparent 70%),
    radial-gradient(380px 280px at 46% 88%, rgba(90, 72, 50, 0.04), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='108'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.003 0.4' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.13' intercept='-0.02'/></feComponentTransfer></filter><rect width='720' height='108' filter='url(%23g)'/></svg>"),
    repeating-linear-gradient(
      180deg,
      #fcfbf9 0px,
      #f7f5f1 2px,
      #f6f4ef 88px,
      #f1eee8 97px,
      #e6e2da 103px,
      #d9d4ca 106px,
      #cfc9be 107px,
      #e4e0d8 108px
    );
  background-size: 520px 520px, auto, auto, auto, 720px 108px, auto 108px;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-attachment: scroll, fixed, fixed, fixed, scroll, scroll;
  color: var(--text);
  text-shadow: none;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.55;
}

/* Light dusting on cards */
html[data-theme="coastal"] :is(.panel, .spot-picker, .surf-guide-panel, .beach-wire-panel, .nws-alert-panel,
  .cape-spots, .week-panel, .cape-conditions, .surf-cam-card, .day-card article, .gear-feature) {
  background-image: var(--speckle-soft);
  background-size: 320px 320px;
}

/* Paper grit over everything */
html[data-theme="coastal"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.14'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

html[data-theme="coastal"] *,
html[data-theme="coastal"] *::before,
html[data-theme="coastal"] *::after {
  text-shadow: none;
}

html[data-theme="coastal"] a { color: inherit; }
html[data-theme="coastal"] button,
html[data-theme="coastal"] select,
html[data-theme="coastal"] input { font: inherit; }
html[data-theme="coastal"] :focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 3px;
}
html[data-theme="coastal"] [id] { scroll-margin-top: 96px; }

html[data-theme="coastal"] .coastal-only { display: flex; }
html[data-theme="coastal"] .coastal-only.coastal-block { display: block; }
html[data-theme="coastal"] .coastal-grid { display: grid; }
html[data-theme="coastal"] .cape-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Hide arcade / photo-hero chrome */
html[data-theme="coastal"] .ocean-bg,
html[data-theme="coastal"] .beach-scene,
html[data-theme="coastal"] .beach-tint,
html[data-theme="coastal"] .starfield,
html[data-theme="coastal"] .grid-floor,
html[data-theme="coastal"] .wave,
html[data-theme="coastal"] .scanlines-overlay,
html[data-theme="coastal"] .crt-overlay,
html[data-theme="coastal"] .rainbow-bar,
html[data-theme="coastal"] .july4-only,
html[data-theme="coastal"] .breadcrumbs,
html[data-theme="coastal"] .coastal-location,
html[data-theme="coastal"] .vibe-block,
html[data-theme="coastal"] .stat-bento,
html[data-theme="coastal"] .hero-actions,
html[data-theme="coastal"] .hero-top,
html[data-theme="coastal"] .giphy-reaction,
html[data-theme="coastal"] .vector-field,
html[data-theme="coastal"] .current-readout,
html[data-theme="coastal"] .start-surf-button {
  display: none !important;
}

html[data-theme="coastal"] .app-shell {
  margin: 0;
  padding: 0 0 48px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

html[data-theme="coastal"] .container {
  width: 100%;
  max-width: 1760px;
  padding-inline: clamp(20px, 5.4vw, 92px);
}

/* ─── Header ─── */
html[data-theme="coastal"] .site-header {
  z-index: 20;
  padding: 0;
  border-bottom: 1px solid rgba(40, 55, 65, 0.1);
  background: rgba(251, 250, 247, 0.9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 18px rgba(40, 50, 55, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
}

html[data-theme="coastal"] .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  min-height: 90px;
}

html[data-theme="coastal"] .brand { flex: 0 1 auto; min-width: 0; }
html[data-theme="coastal"] .brand-box {
  position: relative;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

html[data-theme="coastal"] .brand-title,
html[data-theme="coastal"] .brand-sub { position: relative; z-index: 1; }

html[data-theme="coastal"] .brand-kicker { display: none; }

html[data-theme="coastal"] .brand-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.38rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

html[data-theme="coastal"] .brand-title a { text-decoration: none; }
html[data-theme="coastal"] .brand-title span { display: inline; }

html[data-theme="coastal"] .brand-sub {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: -2px 0 0 2px;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #4a5258;
}

html[data-theme="coastal"] .brand-sub span { padding-bottom: 1px; }

html[data-theme="coastal"] .coastal-nav {
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 44px;
}

/* Header tools only hold legacy-theme controls, which the coastal theme hides. */
html[data-theme="coastal"] .header-tools { display: none; }

html[data-theme="coastal"] .coastal-nav a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #4a5258;
  padding: 7px 0 6px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

html[data-theme="coastal"] .coastal-nav a:hover { color: var(--ink); }
html[data-theme="coastal"] .coastal-nav a.is-active {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--ink);
}

html[data-theme="coastal"] .header-tools {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  width: auto;
  min-width: 0;
  max-width: none;
  flex: 0 0 auto;
  padding-left: 0;
  border-left: 0;
}

/* Legacy theme picker stays available via ?theme=, but is not shown in the coastal header. */
html[data-theme="coastal"] .theme-picker { display: none; }

html[data-theme="coastal"] .theme-picker-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  gap: 0;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

html[data-theme="coastal"] .theme-picker-summary:hover { background: rgba(40, 55, 65, 0.08); }
html[data-theme="coastal"] .theme-picker-summary::after { display: none; }
html[data-theme="coastal"] .theme-picker-icon { display: inline-flex; width: 20px; height: 20px; }
html[data-theme="coastal"] .theme-picker-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

html[data-theme="coastal"] .theme-picker-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

html[data-theme="coastal"] .theme-picker[open] { border-radius: 999px; }
html[data-theme="coastal"] .theme-picker-fieldset {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: 320px;
  max-height: min(70vh, 540px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

html[data-theme="coastal"] .theme-picker-legend {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 0 10px;
}

html[data-theme="coastal"] .theme-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

html[data-theme="coastal"] .theme-chip span {
  font-size: 0.78rem;
  padding: 9px;
  white-space: normal;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: transparent;
  text-transform: none;
}

html[data-theme="coastal"] .theme-chip.is-selected span {
  color: #fff;
  background: var(--slate);
  border-color: var(--slate);
}

/* ─── Main shell ─── */
html[data-theme="coastal"] .main { padding: 0 0 40px; }
html[data-theme="coastal"] .main > .container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
html[data-theme="coastal"] .main > .container > * { order: 20; min-width: 0; }
html[data-theme="coastal"] .main > .container > .hero-panel { order: 0; }
html[data-theme="coastal"] .main > .container > .cape-lower { order: 1; }
html[data-theme="coastal"] .main > .container > .nws-alert-panel { order: 2; }
html[data-theme="coastal"] .main > .container > .hourly-panel { order: 3; }
html[data-theme="coastal"] .main > .container > .surf-cams-panel { order: 4; }
html[data-theme="coastal"] .main > .container > .weekly-summary { order: 5; }
html[data-theme="coastal"] .main > .container > .gear-panel { order: 6; }
html[data-theme="coastal"] .main > .container > .swell-tracker-teaser { order: 7; }
html[data-theme="coastal"] .main > .container > .spot-picker { order: 8; }
html[data-theme="coastal"] .main > .container > .pexels-gallery-panel { order: 9; }
html[data-theme="coastal"] .main > .container > .surf-guide-panel { order: 10; }
html[data-theme="coastal"] .main > .container > .beach-wire-panel { order: 11; }
html[data-theme="coastal"] .main > .container > .error-panel { order: 0; }

html[data-theme="coastal"] .panel,
html[data-theme="coastal"] .spot-picker,
html[data-theme="coastal"] .surf-guide-panel,
html[data-theme="coastal"] .beach-wire-panel,
html[data-theme="coastal"] .nws-alert-panel {
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  content-visibility: visible;
  contain-intrinsic-size: none;
}

html[data-theme="coastal"] .panel::before,
html[data-theme="coastal"] .panel::after { display: none; }

html[data-theme="coastal"] .hero-panel {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ─── Cape hero + portholes ─── */
html[data-theme="coastal"] .cape-hero {
  display: grid;
  grid-template-columns: minmax(300px, 480px) minmax(0, 1fr);
  gap: 28px 36px;
  align-items: center;
  padding: 26px 0 14px;
}

html[data-theme="coastal"] .cape-hero-copy { display: flex; flex-direction: column; gap: 18px; }
html[data-theme="coastal"] .cape-kicker {
  margin: 0 0 -16px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #4a5258;
}

html[data-theme="coastal"] .cape-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 4.75vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.95;
  color: var(--ink);
}

html[data-theme="coastal"] .cape-title--spot {
  font-size: clamp(2.3rem, 3.6vw, 3.4rem);
  text-wrap: balance;
}

html[data-theme="coastal"] .cape-lead {
  margin: 2px 0 0;
  max-width: 40ch;
  font-size: 1rem;
  line-height: 1.5;
  color: #4a5258;
}

html[data-theme="coastal"] .cape-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: 10px;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4a5258;
}

html[data-theme="coastal"] .cape-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html[data-theme="coastal"] .cape-meta .cape-meta-date-short { display: none; }

@media (max-width: 1280px) {
  html[data-theme="coastal"] .cape-meta { gap: 12px; }
  html[data-theme="coastal"] .cape-meta .cape-meta-date-full { display: none; }
  html[data-theme="coastal"] .cape-meta .cape-meta-date-short { display: inline; }
}

@media (max-width: 1100px) {
  html[data-theme="coastal"] .cape-meta .cape-meta-date-full { display: inline; }
  html[data-theme="coastal"] .cape-meta .cape-meta-date-short { display: none; }
}

@media (max-width: 560px) {
  html[data-theme="coastal"] .cape-meta { gap: 10px; letter-spacing: 0.1em; }
  html[data-theme="coastal"] .cape-meta span { gap: 6px; }
  html[data-theme="coastal"] .cape-meta .cape-meta-date-full { display: none; }
  html[data-theme="coastal"] .cape-meta .cape-meta-date-short { display: inline; }
  html[data-theme="coastal"] .cape-meta-place,
  html[data-theme="coastal"] .cape-meta-air { font-size: 0.8rem; }
  html[data-theme="coastal"] .cape-meta-air .cape-meta-air-label { display: none; }
  html[data-theme="coastal"] .cape-meta-sun { width: 22px; height: 19px; }
}

@media (max-width: 380px) {
  html[data-theme="coastal"] .cape-meta { gap: 8px; }
  html[data-theme="coastal"] .cape-meta-sun { display: none; }
}

html[data-theme="coastal"] .cape-meta-place {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
}

html[data-theme="coastal"] .cape-meta-divider {
  width: 1px;
  height: 22px;
  background: rgba(40, 55, 65, 0.35);
}

html[data-theme="coastal"] .cape-meta-sun {
  width: 26px;
  height: 22px;
  flex-shrink: 0;
  stroke: #c9953a;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}

html[data-theme="coastal"] .cape-meta-air {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  gap: 6px;
}

html[data-theme="coastal"] .cape-meta-air .cape-meta-air-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4a5258;
}

html[data-theme="coastal"] .cape-meta-therm {
  width: 18px;
  height: 18px;
  stroke: #c9953a;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}

html[data-theme="coastal"] .cape-meta-pin {
  width: 16px;
  height: 16px;
  fill: var(--ink);
}

html[data-theme="coastal"] .porthole-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 166px));
  gap: 36px;
  align-items: start;
  justify-content: center;
  width: 100%;
}

html[data-theme="coastal"] .porthole {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  min-width: 0;
}

html[data-theme="coastal"] .porthole-face {
  position: relative;
  width: 100%;
  max-width: 166px;
  aspect-ratio: 1;
  margin-bottom: 14px;
  border-radius: 50%;
  filter: drop-shadow(0 9px 14px rgba(55, 42, 20, 0.24)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

html[data-theme="coastal"] .cape-gauge {
  display: block;
  width: 100%;
  height: 100%;
}

html[data-theme="coastal"] .cape-gauge text {
  text-anchor: middle;
  dominant-baseline: central;
}

html[data-theme="coastal"] .cape-gauge-ticks line {
  stroke: #6b767d;
  opacity: 0.6;
}

html[data-theme="coastal"] .cape-gauge-compass text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  fill: #27333b;
}

html[data-theme="coastal"] .cape-gauge-value {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
  letter-spacing: -0.02em;
  fill: #1f2a33;
}

html[data-theme="coastal"] .cape-gauge-value--lg { font-size: 42px; }
html[data-theme="coastal"] .cape-gauge-value-unit {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.02em;
  fill: #27333b;
}

html[data-theme="coastal"] .cape-gauge-unit,
html[data-theme="coastal"] .cape-gauge-inner-label {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  fill: #3a444b;
}

html[data-theme="coastal"] .cape-gauge-state {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  fill: #27333b;
}

html[data-theme="coastal"] .cape-gauge-tick-num text {
  font-family: var(--font-display);
  font-size: 8.5px;
  fill: #5c6b75;
}

html[data-theme="coastal"] .cape-gauge-needle { transition: transform 0.6s ease; }

/* Gentle gust sway for winds over 10 mph; --wobble (degrees) is set per gauge. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="coastal"] .cape-gauge-needle-wobble {
    transform-origin: 0 0;
    animation: cape-needle-wobble 7s ease-in-out infinite;
  }
}

/* Waves dial: each water band drifts a few units at its own slow tempo. The clip stays fixed. */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="coastal"] .cape-gauge--waves .cape-sea-band {
    animation: cape-sea-drift 8s ease-in-out infinite alternate;
  }
  html[data-theme="coastal"] .cape-gauge--waves .cape-sea-band:nth-child(1) { --drift: 4.5; --bob: 0.9; animation-duration: 6.5s; }
  html[data-theme="coastal"] .cape-gauge--waves .cape-sea-band:nth-child(2) { --drift: -3.5; --bob: 0.7; animation-duration: 8.2s; animation-delay: -2.1s; }
  html[data-theme="coastal"] .cape-gauge--waves .cape-sea-band:nth-child(3) { --drift: 2.8; --bob: 0.5; animation-duration: 9.6s; animation-delay: -4.7s; }
  html[data-theme="coastal"] .cape-gauge--waves .cape-sea-band:nth-child(4) { --drift: -2.2; --bob: 0.4; animation-duration: 11.3s; animation-delay: -1.3s; }
}

@keyframes cape-sea-drift {
  from { transform: translate(calc(var(--drift, 3) * -1px), 0); }
  to { transform: translate(calc(var(--drift, 3) * 1px), calc(var(--bob, 0.6) * 1px)); }
}

@keyframes cape-needle-wobble {
  0%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(calc(var(--wobble, 2) * 1deg)); }
  37% { transform: rotate(calc(var(--wobble, 2) * -0.45deg)); }
  58% { transform: rotate(calc(var(--wobble, 2) * 0.7deg)); }
  79% { transform: rotate(calc(var(--wobble, 2) * -1deg)); }
}

html[data-theme="coastal"] .porthole-label {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}

html[data-theme="coastal"] .porthole-sub {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #3a444b;
}

html[data-theme="coastal"] .porthole-sub--pair {
  display: flex;
  gap: 10px;
  justify-content: center;
}

html[data-theme="coastal"] .porthole-sub--pair span:first-child { color: #3a444b; }
html[data-theme="coastal"] .porthole-sub--pair span:last-child { color: var(--ink); font-weight: 500; }
html[data-theme="coastal"] .porthole .badge { margin-top: 6px; }

html[data-theme="coastal"] .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 15px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}

html[data-theme="coastal"] .badge-clean { background: #d2e5d2; color: #2f5a3d; }
html[data-theme="coastal"] .badge-fair { background: #f1e6c4; color: #6f5620; }
html[data-theme="coastal"] .badge-cold { background: #d2e2ee; color: #2f5068; }
html[data-theme="coastal"] .badge-small { background: #e6e6e2; color: #55606a; }
html[data-theme="coastal"] .badge-choppy { background: #efd9cb; color: #8a4a2c; }
html[data-theme="coastal"] .badge-good { background: #c9e0cc; color: #27553a; }
html[data-theme="coastal"] .badge-big { background: #d2e2ee; color: #2f5068; }
html[data-theme="coastal"] .badge-heavy { background: #e9d3cf; color: #7d3b32; }

/* ─── Dashboard: map / spots / featured ─── */
html[data-theme="coastal"] .cape-dashboard {
  display: grid;
  grid-template-columns: minmax(300px, 1.25fr) minmax(270px, 0.8fr) minmax(380px, 1.6fr);
  gap: 16px;
  align-items: stretch;
}

html[data-theme="coastal"] .cape-map,
html[data-theme="coastal"] .cape-spots,
html[data-theme="coastal"] .cape-featured {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 330px;
}

html[data-theme="coastal"] .cape-map {
  position: relative;
  aspect-ratio: 918 / 689;
  width: 100%;
  min-width: 0;
  min-height: 0;
  background: #e3d3ad;
}

html[data-theme="coastal"] .cape-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

html[data-theme="coastal"] .cape-map-pin { cursor: pointer; }
html[data-theme="coastal"] .cape-map-pin-halo {
  fill: rgba(255, 255, 255, 0.28);
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
  transition: fill 0.16s ease;
}

html[data-theme="coastal"] .cape-map-pin-dot {
  fill: #3b5a66;
  stroke: #f4f1ea;
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

html[data-theme="coastal"] .cape-map-pin:hover .cape-map-pin-halo,
html[data-theme="coastal"] .cape-map-pin:focus-visible .cape-map-pin-halo { fill: rgba(255, 255, 255, 0.55); }
html[data-theme="coastal"] .cape-map-pin.is-active .cape-map-pin-dot {
  fill: var(--brass);
  stroke: #fff;
  stroke-width: 3;
}

html[data-theme="coastal"] .cape-map-pin.is-active .cape-map-pin-halo {
  fill: rgba(255, 255, 255, 0.3);
  stroke: rgba(255, 255, 255, 0.6);
  transform-box: fill-box;
  transform-origin: center;
  animation: cape-pin-pulse 2.4s ease-out infinite;
}

@keyframes cape-pin-pulse {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

html[data-theme="coastal"] .cape-spots {
  display: flex;
  flex-direction: column;
  padding: 20px 18px 14px;
  gap: 10px;
}

html[data-theme="coastal"] .cape-spots-head,
html[data-theme="coastal"] .cape-forecast-head,
html[data-theme="coastal"] .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 8px;
}

html[data-theme="coastal"] .cape-spots-title,
html[data-theme="coastal"] .cape-forecast-title,
html[data-theme="coastal"] .section-title.cape-forecast-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

html[data-theme="coastal"] .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

html[data-theme="coastal"] .cape-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}

html[data-theme="coastal"] .cape-link:hover { color: var(--slate); text-decoration: underline; text-underline-offset: 3px; }

html[data-theme="coastal"] .cape-spot-list {
  list-style: none;
  margin: 0 -6px;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: auto;
  flex: 1 1 auto;
  max-height: 300px;
  scrollbar-width: thin;
  scrollbar-color: #c4a15a rgba(160, 127, 79, 0.12);
}

/* Brass scrollbar to match the porthole gauges. Chromium and Safari get the polished gradient
   (the standard scrollbar-* properties would override it there); Firefox keeps the flat brass above. */
@supports selector(::-webkit-scrollbar) {
  html[data-theme="coastal"] .cape-spot-list {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  html[data-theme="coastal"] .cape-spot-list::-webkit-scrollbar { width: 9px; }
  html[data-theme="coastal"] .cape-spot-list::-webkit-scrollbar-track {
    margin: 4px 0;
    border-radius: 9px;
    background: rgba(160, 127, 79, 0.1);
    box-shadow: inset 0 1px 2px rgba(80, 60, 30, 0.18);
  }
  html[data-theme="coastal"] .cape-spot-list::-webkit-scrollbar-thumb {
    border: 1px solid #8a6c3c;
    border-radius: 9px;
    background: linear-gradient(90deg, #f6e6b8 0%, #dfc17f 28%, #c4a15a 55%, #d9ba78 78%, #f1dca4 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(60, 45, 20, 0.25);
  }
  html[data-theme="coastal"] .cape-spot-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #f1dca4 0%, #d4b26a 30%, #b8954d 55%, #cfae69 78%, #ead193 100%);
  }
}

html[data-theme="coastal"] .cape-spot-item a {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.14s ease;
}

html[data-theme="coastal"] .cape-spot-item + .cape-spot-item { border-top: 1px solid rgba(40, 55, 65, 0.07); }
html[data-theme="coastal"] .cape-spot-item a:hover,
html[data-theme="coastal"] .cape-spot-item.is-active a {
  background: var(--panel-soft);
}

html[data-theme="coastal"] .cape-spot-thumb {
  width: 56px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: #d7dfd8;
}

html[data-theme="coastal"] .cape-spot-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

html[data-theme="coastal"] .cape-spot-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="coastal"] .cape-spot-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

html[data-theme="coastal"] .cape-spot-wave {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  white-space: nowrap;
}

html[data-theme="coastal"] .cape-spot-line .badge {
  padding: 0;
  background: transparent;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}

html[data-theme="coastal"] .cape-spot-line .badge-clean { color: #2f6b45; }
html[data-theme="coastal"] .cape-spot-line .badge-fair { color: #7a5a1c; }
html[data-theme="coastal"] .cape-spot-line .badge-cold { color: #2f5068; }
html[data-theme="coastal"] .cape-spot-line .badge-small { color: #55616b; }
html[data-theme="coastal"] .cape-spot-line .badge-choppy { color: #8a4a2c; }
html[data-theme="coastal"] .cape-spot-line .badge-good { color: #27553a; }
html[data-theme="coastal"] .cape-spot-line .badge-big { color: #2f5068; }
html[data-theme="coastal"] .cape-spot-line .badge-heavy { color: #7d3b32; }

html[data-theme="coastal"] .cape-spot-chevron {
  color: var(--text-dim);
  font-size: 1.1rem;
  line-height: 1;
}

html[data-theme="coastal"] .cape-featured {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 340px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(249, 246, 240, 0.92) 0%, rgba(249, 246, 240, 0.7) 32%, rgba(249, 246, 240, 0) 62%),
    url('../images/nauset-beach-featured.webp') center 70% / cover no-repeat;
}

html[data-theme="coastal"] .cape-featured-body {
  position: relative;
  z-index: 1;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  max-width: 70%;
}

html[data-theme="coastal"] .cape-featured-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dim);
}

html[data-theme="coastal"] .cape-featured-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.3vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--ink);
}

html[data-theme="coastal"] .cape-featured-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

html[data-theme="coastal"] .cape-featured-meta span + span::before {
  content: "|";
  margin: 0 14px;
  color: rgba(40, 55, 65, 0.35);
  font-weight: 300;
}

html[data-theme="coastal"] .cape-featured-cta {
  position: absolute;
  z-index: 2;
  top: 26px;
  right: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 7px;
  border: 1px solid rgba(40, 55, 65, 0.1);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(40, 50, 55, 0.12);
  transition: background-color 0.16s ease, transform 0.16s ease;
}

html[data-theme="coastal"] .cape-featured-cta:hover {
  background: #fff;
  transform: translateY(-1px);
}

/* ─── Forecast + conditions row ─── */
html[data-theme="coastal"] .cape-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: stretch;
}

html[data-theme="coastal"] .cape-lower .week-panel { order: 0; }
html[data-theme="coastal"] .cape-lower .cape-conditions { order: 1; }

html[data-theme="coastal"] .arcade-week-title { display: none; }
html[data-theme="coastal"] .cape-forecast-head .section-desc { display: none; }

html[data-theme="coastal"] .week-panel,
html[data-theme="coastal"] .cape-conditions {
  margin: 0;
  padding: 18px 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

html[data-theme="coastal"] .week-panel .section-desc { display: none; }
html[data-theme="coastal"] .week-scroller { padding: 0; overflow: visible; }
html[data-theme="coastal"] .week-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
  margin: 0;
}

html[data-theme="coastal"] .day-card { flex: none; min-width: 0; }
html[data-theme="coastal"] .day-card:nth-child(n+6) { display: none; }

html[data-theme="coastal"] .day-card article,
html[data-theme="coastal"] .day-card:nth-child(2) article,
html[data-theme="coastal"] .day-card:first-child article,
html[data-theme="coastal"] .day-card:has(.day-vibe) article:hover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  height: 100%;
  min-height: 100%;
  padding: 14px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf7;
  box-shadow: none;
  text-align: left;
  transform: none;
}

html[data-theme="coastal"] .day-card:first-child article {
  background: #e9f0e8;
  border-color: #bcd0bd;
}

html[data-theme="coastal"] .day-name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

html[data-theme="coastal"] .day-date {
  margin: 0 0 10px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

html[data-theme="coastal"] .day-wx-wrap {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
}

html[data-theme="coastal"] .cape-wx {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-theme="coastal"] .day-emoji { display: none; }
html[data-theme="coastal"] .day-vibe {
  order: 9;
  margin: 10px 0 0;
  padding: 4px 11px;
  border-radius: 4px;
  background: var(--sage-soft);
  color: #3f6a4d;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html[data-theme="coastal"] .day-vibe--fair { background: #f1e6c4; color: #6f5620; }
html[data-theme="coastal"] .day-vibe--small { background: #e6e6e2; color: #55606a; }
html[data-theme="coastal"] .day-vibe--choppy { background: #efd9cb; color: #8a4a2c; }
html[data-theme="coastal"] .day-vibe--good { background: #c9e0cc; color: #27553a; }
html[data-theme="coastal"] .day-vibe--big { background: #d2e2ee; color: #2f5068; }
html[data-theme="coastal"] .day-vibe--heavy { background: #e9d3cf; color: #7d3b32; }

html[data-theme="coastal"] .day-waves {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}

html[data-theme="coastal"] .day-stoke-bar,
html[data-theme="coastal"] .day-dirs,
html[data-theme="coastal"] .day-tides { display: none; }

html[data-theme="coastal"] .day-meta,
html[data-theme="coastal"] .day-fog {
  margin: 2px 0 0;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.35;
}

html[data-theme="coastal"] .day-fog span {
  border: 0;
  background: none;
  padding: 0;
  color: var(--text-dim);
}

html[data-theme="coastal"] .cape-conditions-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

html[data-theme="coastal"] .cape-conditions-updated {
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-dim);
}

html[data-theme="coastal"] .cape-conditions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  height: calc(100% - 50px);
  align-items: start;
}

html[data-theme="coastal"] .cape-cond {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 14px 8px 8px;
  text-align: center;
}

html[data-theme="coastal"] .cape-cond + .cape-cond { border-left: 1px solid rgba(40, 55, 65, 0.1); }

html[data-theme="coastal"] .cape-cond-label {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

html[data-theme="coastal"] .cape-cond-label svg {
  width: 28px;
  height: 28px;
  stroke: var(--slate);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-theme="coastal"] .cape-cond-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}

html[data-theme="coastal"] .cape-cond-sub {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-dim);
  line-height: 1.35;
}

/* ─── Shared sections below the fold ─── */
html[data-theme="coastal"] .section-desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-dim);
  max-width: 54ch;
}

html[data-theme="coastal"] .hourly-panel,
html[data-theme="coastal"] .surf-cams-panel,
html[data-theme="coastal"] .spot-picker,
html[data-theme="coastal"] .gear-panel,
html[data-theme="coastal"] .weekly-summary,
html[data-theme="coastal"] .swell-tracker-teaser,
html[data-theme="coastal"] .pexels-gallery-panel,
html[data-theme="coastal"] .surf-guide-panel,
html[data-theme="coastal"] .beach-wire-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 28px;
}

html[data-theme="coastal"] .surf-cams-panel,
html[data-theme="coastal"] .spot-picker {
  display: block;
}

html[data-theme="coastal"] .chart-tablist {
  justify-content: flex-start;
  margin-bottom: 16px;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 0;
}

html[data-theme="coastal"] .chart-tab,
html[data-theme="coastal"] .btn,
html[data-theme="coastal"] .brand-tag,
html[data-theme="coastal"] .share-social,
html[data-theme="coastal"] .gear-tab {
  padding: 9px 14px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--text);
  box-shadow: none;
  font-size: 0.84rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

html[data-theme="coastal"] .chart-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 4px 0 10px;
  color: var(--text-dim);
}

html[data-theme="coastal"] .chart-tab.is-active,
html[data-theme="coastal"] .chart-tab[aria-selected="true"],
html[data-theme="coastal"] .gear-tab[aria-selected="true"] {
  color: var(--ink);
  background: transparent;
  border-color: var(--slate);
}

html[data-theme="coastal"] .btn:hover,
html[data-theme="coastal"] .brand-tag:hover,
html[data-theme="coastal"] .share-social:hover {
  background: #e4ddd1;
  border-color: #b8c2b5;
  color: var(--ink);
  transform: none;
  box-shadow: none;
}

html[data-theme="coastal"] .btn-primary {
  background: var(--slate);
  color: #f7f4ee;
  border-color: var(--slate);
}

html[data-theme="coastal"] .chart-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  background: #fbf8f2;
}

html[data-theme="coastal"] .line-chart {
  border: 0;
  background: linear-gradient(180deg, rgba(111, 143, 120, 0.08), transparent);
}

html[data-theme="coastal"] .line-grid { stroke: rgba(40, 55, 65, 0.1); }
html[data-theme="coastal"] .line-stroke { stroke: var(--slate); filter: none; stroke-width: 2.5; }
html[data-theme="coastal"] .line-area { fill: rgba(61, 90, 108, 0.1); }
html[data-theme="coastal"] .line-point { fill: #fbf8f2; stroke: var(--slate); }
html[data-theme="coastal"] .line-label,
html[data-theme="coastal"] .line-axis-label,
html[data-theme="coastal"] .line-time-label { fill: var(--text-dim); }
html[data-theme="coastal"] .line-tide-label {
  fill: var(--brass-dark);
  paint-order: normal;
  stroke: none;
  font-weight: 600;
}
html[data-theme="coastal"] .line-tide-marker { stroke: rgba(160, 127, 79, 0.55); }
html[data-theme="coastal"] .hbar-track { background: rgba(40, 55, 65, 0.08); border: 0; }
html[data-theme="coastal"] .hbar-fill,
html[data-theme="coastal"] .vbar-stick { background: var(--slate); box-shadow: none; }
html[data-theme="coastal"] .hbar-time,
html[data-theme="coastal"] .hbar-value,
html[data-theme="coastal"] .vbar-time { color: var(--text-dim); }

html[data-theme="coastal"] .surf-cam-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

html[data-theme="coastal"] .surf-cam-card {
  position: relative;
  min-height: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  box-shadow: none;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

html[data-theme="coastal"] .surf-cam-card:hover {
  background: #ebe4d8;
  border-color: #b7c4b8;
  transform: none;
  box-shadow: none;
}

html[data-theme="coastal"] .surf-cam-tag {
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 10px;
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

html[data-theme="coastal"] .surf-cam-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}

html[data-theme="coastal"] .surf-cam-area,
html[data-theme="coastal"] .surf-cam-note {
  font-size: 0.875rem;
  color: var(--text-dim);
}

html[data-theme="coastal"] .surf-cam-cta {
  color: var(--slate);
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-theme="coastal"] .spot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}

html[data-theme="coastal"] .spot-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 28px 16px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="coastal"] .spot-card::after {
  content: "›";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--text-dim);
  background: none;
  border: 0;
  padding: 0;
}

html[data-theme="coastal"] .spot-icon { display: none; }
html[data-theme="coastal"] .spot-card.is-active,
html[data-theme="coastal"] .spot-card:hover {
  background: transparent;
  border-color: #b7c4b8;
  box-shadow: none;
  transform: none;
}

html[data-theme="coastal"] .spot-card.is-active .spot-name { color: var(--slate); }
html[data-theme="coastal"] .spot-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
  font-weight: 500;
}

html[data-theme="coastal"] .spot-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
}

html[data-theme="coastal"] .nws-alert-panel {
  background: var(--panel);
  padding: 20px 28px;
}

html[data-theme="coastal"] .nws-alert-panel.has-alerts {
  border-color: #d4aa75;
  background: #f7efe0;
}

html[data-theme="coastal"] .nws-alert-head { background: none; border: 0; padding: 0; }
html[data-theme="coastal"] .nws-alert-kicker,
html[data-theme="coastal"] .nws-alert-area {
  color: var(--text-dim);
  font-size: 0.75rem;
}

html[data-theme="coastal"] .nws-alert-title,
html[data-theme="coastal"] .nws-alert-panel.is-clear .nws-alert-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-shadow: none;
  text-transform: none;
}

html[data-theme="coastal"] .nws-alert-track {
  display: flex;
  flex-wrap: wrap;
  width: auto;
  min-width: 0;
  transform: none;
  animation: none;
  gap: 12px;
}

html[data-theme="coastal"] .nws-alert-ticker {
  overflow: visible;
  background: none;
  border: 0;
  padding: 0;
}

html[data-theme="coastal"] .nws-alert-tow,
html[data-theme="coastal"] .nws-alert-clear[aria-hidden="true"] { display: none; }

html[data-theme="coastal"] .nws-alert-card {
  min-width: 0;
  width: auto;
  flex: 1 1 260px;
  white-space: normal;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 8px 0 0;
  color: var(--text-dim);
  font-weight: 400;
}

html[data-theme="coastal"] .nws-alert-chip {
  background: var(--slate);
  color: #f7f4ee;
  border: 0;
  font-size: 0.68rem;
  padding: 4px 8px;
  border-radius: 4px;
}

html[data-theme="coastal"] .nws-alert-card h3 {
  font-size: 1rem;
  color: var(--ink);
}

html[data-theme="coastal"] .nws-alert-link {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 12px;
  border: 1px solid var(--slate);
  border-radius: 6px;
  background: var(--slate);
  box-shadow: none;
  color: #f7f4ee;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease;
}

html[data-theme="coastal"] .nws-alert-link:hover {
  background: var(--slate-deep);
  border-color: var(--slate-deep);
  color: #fff;
}

html[data-theme="coastal"] .nws-alert-link:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  box-shadow: none;
}

html[data-theme="coastal"] .nws-alert-clear { font-size: 0.875rem; }
html[data-theme="coastal"] .nws-alert-panel.is-clear {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}
html[data-theme="coastal"] .nws-alert-panel.is-clear .nws-alert-title { font-size: 1rem; }
html[data-theme="coastal"] .nws-alert-panel.is-clear .nws-alert-kicker,
html[data-theme="coastal"] .nws-alert-panel.is-clear .nws-alert-area,
html[data-theme="coastal"] .nws-alert-panel.is-clear .nws-alert-chip { display: none; }
html[data-theme="coastal"] .nws-alert-panel.is-clear .nws-alert-card { padding: 0; font-size: 0.82rem; }

html[data-theme="coastal"] .weekly-summary {
  background: #e9efe6;
  border: 0;
  color: var(--ink);
}

html[data-theme="coastal"] .weekly-summary .section-head {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(40, 55, 65, 0.12);
}

html[data-theme="coastal"] .weekly-summary .section-title { color: var(--ink); }
html[data-theme="coastal"] .weekly-summary .section-desc { color: var(--text-dim); }
html[data-theme="coastal"] .weekly-summary .summary-brief {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  align-items: start;
  gap: 28px;
  border: 0;
  background: transparent;
  padding: 0;
}

html[data-theme="coastal"] .weekly-summary .summary-lead {
  padding: 0;
  color: var(--ink);
  background: transparent;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  min-height: 0;
  border: 0;
}

html[data-theme="coastal"] .weekly-summary .summary-list { grid-column: auto; color: var(--text-dim); }
html[data-theme="coastal"] .weekly-summary .summary-list li {
  border-top: 1px solid rgba(40, 55, 65, 0.12);
  padding-top: 12px;
  gap: 16px;
}

html[data-theme="coastal"] .weekly-summary .summary-list li:first-child {
  border: 0;
  padding-top: 0;
}

html[data-theme="coastal"] .weekly-summary .summary-label {
  color: var(--slate-deep);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html[data-theme="coastal"] .weekly-summary .summary-text {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.55;
}

html[data-theme="coastal"] .swell-tracker-teaser { background: #e8eef1; border-color: rgba(61, 90, 108, 0.18); }
html[data-theme="coastal"] .swell-teaser-stats {
  gap: 0;
  border-block: 1px solid var(--line);
  margin-top: 18px;
}

html[data-theme="coastal"] .swell-teaser-stat {
  background: none;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 18px;
  box-shadow: none;
}

html[data-theme="coastal"] .swell-teaser-stat:first-child { padding-left: 0; }
html[data-theme="coastal"] .swell-teaser-stat:last-child { border: 0; }
html[data-theme="coastal"] .swell-teaser-label { font-size: 0.78rem; color: var(--text-dim); }
html[data-theme="coastal"] .swell-teaser-value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.02em;
}

html[data-theme="coastal"] .swell-insight {
  background: none;
  border: 0;
  padding: 14px 0 0;
  color: var(--text-dim);
  box-shadow: none;
}

html[data-theme="coastal"] .gear-feature,
html[data-theme="coastal"] .gear-card {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

html[data-theme="coastal"] .gear-feature-title,
html[data-theme="coastal"] .summary-title,
html[data-theme="coastal"] .summary-vibe {
  color: var(--ink);
  text-shadow: none;
}

html[data-theme="coastal"] .gear-feature-copy,
html[data-theme="coastal"] .gear-feature-desc,
html[data-theme="coastal"] .gear-feature-note,
html[data-theme="coastal"] .gear-feature-reason,
html[data-theme="coastal"] .affiliate-disclosure {
  color: var(--text-dim);
}

html[data-theme="coastal"] .gear-link,
html[data-theme="coastal"] .gear-link--primary {
  background: var(--slate);
  border: 1px solid var(--slate);
  color: #f7f4ee;
  box-shadow: none;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
}

html[data-theme="coastal"] .affiliate-disclosure {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-dim);
}

html[data-theme="coastal"] .beach-wire-panel summary,
html[data-theme="coastal"] .surf-guide-panel summary {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  color: var(--ink);
}

html[data-theme="coastal"] .beach-wire-panel summary::after,
html[data-theme="coastal"] .surf-guide-panel summary::after {
  color: var(--slate);
}

html[data-theme="coastal"] .gear-mini-link {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  box-shadow: none;
}

html[data-theme="coastal"] .pexels-thumb-card figcaption { color: var(--text-dim); }
html[data-theme="coastal"] .pexels-thumb-button { border-color: var(--line); box-shadow: none; }

html[data-theme="coastal"] .surf-guide-panel,
html[data-theme="coastal"] .beach-wire-panel {
  color: var(--text-dim);
}

html[data-theme="coastal"] .surf-guide-panel summary,
html[data-theme="coastal"] .beach-wire-panel summary {
  padding: 0;
  color: var(--ink);
}

html[data-theme="coastal"] .surf-guide-fact dt,
html[data-theme="coastal"] .surf-guide-safety-title,
html[data-theme="coastal"] .surf-guide-faq-title,
html[data-theme="coastal"] .beach-wire-item h3 { color: var(--ink); }
html[data-theme="coastal"] .surf-guide-fact { background: var(--panel-soft); border: 1px solid var(--line); box-shadow: none; }

html[data-theme="coastal"] .skip-link { background: var(--ink); color: #fff; }
html[data-theme="coastal"] .gear-tag,
html[data-theme="coastal"] .gear-tag--primary,
html[data-theme="coastal"] .gear-tab-kicker { background: var(--sage-soft); color: #2f5a3d; border: 0; }
html[data-theme="coastal"] .surf-guide-fact dd,
html[data-theme="coastal"] .surf-guide-intro,
html[data-theme="coastal"] .surf-guide-alt { color: var(--text); }
html[data-theme="coastal"] .surf-guide-safety,
html[data-theme="coastal"] .surf-guide-faq-item {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: none;
  color: var(--text);
}
html[data-theme="coastal"] .surf-guide-faq-item summary { color: var(--ink); }
html[data-theme="coastal"] .surf-guide-faq-item p,
html[data-theme="coastal"] .surf-guide-safety-blurb,
html[data-theme="coastal"] .surf-guide-safety-list li { color: var(--text); }
html[data-theme="coastal"] .surf-guide-safety-links a { color: var(--slate); }

html[data-theme="coastal"] .beach-wire-item {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: none;
  color: var(--text);
}

html[data-theme="coastal"] .beach-wire-item h3 a { color: var(--ink); }
html[data-theme="coastal"] .beach-wire-item h3 a:hover { color: var(--slate); }
html[data-theme="coastal"] .beach-wire-desc,
html[data-theme="coastal"] .beach-wire-meta { color: var(--text-dim); }
html[data-theme="coastal"] .beach-wire-meta time { color: var(--text-dim); }

html[data-theme="coastal"] .vector-modal {
  background: rgba(247, 242, 234, 0.92);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html[data-theme="coastal"] .vector-modal::backdrop { background: rgba(40, 50, 55, 0.28); }
html[data-theme="coastal"] .vector-modal-close {
  background: var(--panel-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

html[data-theme="coastal"] .site-footer {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  background: rgba(249, 246, 240, 0.92);
  padding: 28px 0;
  color: var(--text-dim);
}

html[data-theme="coastal"] .site-footer p { font-size: 0.82rem; line-height: 1.7; }
html[data-theme="coastal"] .footer-fun {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  color: var(--text);
}

html[data-theme="coastal"] .footer-top-link {
  color: var(--slate);
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 0.82rem;
}

html[data-theme="coastal"] .error-panel { background: #f8ece8; border-color: #e0b2a4; }
html[data-theme="coastal"] .period-cheat { animation: none; color: var(--fair); }
html[data-theme="coastal"] .blink { animation: none; }
html[data-theme="coastal"] .lite-banner { background: var(--panel-soft); color: var(--text); }

/* Motion accents */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="coastal"] .porthole-face {
    animation: cape-porthole-in 0.7s ease both;
  }
  html[data-theme="coastal"] .porthole:nth-child(3) .porthole-face { animation-delay: 0.06s; }
  html[data-theme="coastal"] .porthole:nth-child(4) .porthole-face { animation-delay: 0.12s; }
  html[data-theme="coastal"] .porthole:nth-child(5) .porthole-face { animation-delay: 0.18s; }
  html[data-theme="coastal"] .cape-featured,
  html[data-theme="coastal"] .cape-map,
  html[data-theme="coastal"] .cape-spots {
    animation: cape-fade-up 0.65s ease both;
  }
  html[data-theme="coastal"] .cape-hero-copy {
    animation: cape-fade-up 0.55s ease both;
  }
}

@keyframes cape-porthole-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes cape-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="coastal"] *,
  html[data-theme="coastal"] *::before,
  html[data-theme="coastal"] *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── Responsive ─── */
@media (max-width: 1280px) {
  html[data-theme="coastal"] .coastal-nav { gap: 22px; }
  html[data-theme="coastal"] .cape-hero { grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: 28px; }
  html[data-theme="coastal"] .cape-title { font-size: clamp(2.6rem, 4.3vw, 3.8rem); }
  html[data-theme="coastal"] .porthole-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  html[data-theme="coastal"] .cape-dashboard {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  html[data-theme="coastal"] .cape-featured { grid-column: 1 / -1; min-height: 300px; }
  html[data-theme="coastal"] .cape-featured-body { max-width: 80%; }
}

@media (max-width: 1100px) {
  html[data-theme="coastal"] .container { padding-inline: 28px; }
  html[data-theme="coastal"] .coastal-nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    gap: 26px;
    border-top: 1px solid var(--line);
    padding: 4px 0 0;
    min-height: 44px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html[data-theme="coastal"] .coastal-nav::-webkit-scrollbar { display: none; }
  html[data-theme="coastal"] .header-inner { min-height: 0; padding-top: 14px; gap: 12px 24px; }
  html[data-theme="coastal"] .cape-hero { grid-template-columns: 1fr; padding-top: 28px; }
  html[data-theme="coastal"] .cape-lead { max-width: 48ch; }
  html[data-theme="coastal"] .porthole-row { gap: 16px; }
  html[data-theme="coastal"] .cape-lower { grid-template-columns: 1fr; }
  html[data-theme="coastal"] .cape-conditions-grid { height: auto; }
}

@media (max-width: 860px) {
  html[data-theme="coastal"] .porthole-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  html[data-theme="coastal"] .porthole-face { max-width: 160px; }
  html[data-theme="coastal"] .cape-dashboard { grid-template-columns: 1fr; }
  html[data-theme="coastal"] .cape-map { min-height: 0; }
  html[data-theme="coastal"] .cape-spots { min-height: 0; }
  html[data-theme="coastal"] .cape-spot-list { max-height: none; overflow: visible; }
  html[data-theme="coastal"] .cape-featured { min-height: 280px; }
  html[data-theme="coastal"] .week-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-theme="coastal"] .day-card:nth-child(n+6) { display: list-item; }
  html[data-theme="coastal"] .cape-conditions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 0; }
  html[data-theme="coastal"] .cape-cond:nth-child(3) { border-left: 0; }
  html[data-theme="coastal"] .cape-cond:nth-child(n+3) { border-top: 1px solid rgba(40, 55, 65, 0.1); }
  html[data-theme="coastal"] .weekly-summary .summary-brief { grid-template-columns: 1fr; gap: 20px; }
  html[data-theme="coastal"] .surf-cams-panel,
  html[data-theme="coastal"] .spot-picker { display: block; }
  html[data-theme="coastal"] .surf-cam-grid,
  html[data-theme="coastal"] .spot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  html[data-theme="coastal"] .container { padding-inline: 18px; }
  html[data-theme="coastal"] .panel,
  html[data-theme="coastal"] .spot-picker,
  html[data-theme="coastal"] .surf-guide-panel,
  html[data-theme="coastal"] .beach-wire-panel,
  html[data-theme="coastal"] .nws-alert-panel,
  html[data-theme="coastal"] .week-panel,
  html[data-theme="coastal"] .cape-conditions,
  html[data-theme="coastal"] .hourly-panel,
  html[data-theme="coastal"] .surf-cams-panel,
  html[data-theme="coastal"] .gear-panel,
  html[data-theme="coastal"] .weekly-summary,
  html[data-theme="coastal"] .swell-tracker-teaser,
  html[data-theme="coastal"] .pexels-gallery-panel { padding: 20px 18px; }
  html[data-theme="coastal"] .header-inner { gap: 10px 16px; }
  html[data-theme="coastal"] .brand-title { font-size: 1.02rem; letter-spacing: 0.16em; }
  html[data-theme="coastal"] .brand-sub { font-size: 0.56rem; letter-spacing: 0.22em; }
  html[data-theme="coastal"] .coastal-nav { gap: 20px; }
  html[data-theme="coastal"] .coastal-nav a { font-size: 0.68rem; }
  html[data-theme="coastal"] .cape-title { font-size: clamp(2.3rem, 11vw, 3rem); }
  html[data-theme="coastal"] .cape-featured-body { max-width: 100%; padding: 22px 20px 90px; }
  html[data-theme="coastal"] .cape-featured-cta { top: auto; bottom: 22px; left: 20px; right: auto; }
  html[data-theme="coastal"] .week-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html[data-theme="coastal"] .theme-picker-fieldset { width: min(320px, calc(100vw - 36px)); }
  html[data-theme="coastal"] .swell-teaser-stat {
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
  }
}

@media (max-width: 480px) {
  html[data-theme="coastal"] .container { padding-inline: 16px; }
  html[data-theme="coastal"] .porthole-row { gap: 18px 12px; }
  html[data-theme="coastal"] .porthole-face { max-width: 140px; }
  html[data-theme="coastal"] .porthole-sub { font-size: 0.78rem; }
  html[data-theme="coastal"] .cape-featured-title { font-size: 2rem; }
  html[data-theme="coastal"] .cape-featured-meta { font-size: 0.9rem; }
  html[data-theme="coastal"] .cape-featured-meta span + span::before { margin: 0 8px; }
  html[data-theme="coastal"] .cape-conditions-grid { grid-template-columns: 1fr 1fr; }
}