/* Coastal: the default photographic theme. Legacy themes remain opt-in. */
.coastal-only { display: none; }
html[data-theme="coastal"] {
  color-scheme: dark;
  --font-display: "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Helvetica Neue", Arial, sans-serif;
  --bg: #101515;
  --panel: #171d1c;
  --text: #f4f5f0;
  --text-dim: #aab7b3;
  --cyan: #abcbbb;
  --magenta: #91b9bb;
  --yellow: #e0c798;
  --red: #ef9d8f;
  --green: #abcbbb;
  --blue: #8db0c7;
  --orange: #dcb18c;
  --border-chonk: 1px;
  --radius: 12px;
  --shadow-pixel: none;
  --focus: 0 0 0 3px #101515, 0 0 0 5px #c4e1d4;
  --line: rgba(224, 238, 230, .16);
}
html[data-theme="coastal"] body { background: var(--bg); color: var(--text); text-shadow: none; font-size: 1rem; line-height: 1.55; }
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 #d2e8db; outline-offset: 5px; }
html[data-theme="coastal"] [id] { scroll-margin-top: 1.5rem; }
html[data-theme="coastal"] .coastal-only { display: flex; }
html[data-theme="coastal"] .ocean-bg { position: absolute; height: 780px; z-index: 0; background: #101515; pointer-events: none; }
html[data-theme="coastal"] .beach-scene { background: linear-gradient(180deg, rgba(8,20,23,.48), rgba(12,22,23,.20) 35%, #101515 98%), linear-gradient(90deg, rgba(8,20,23,.35), transparent 80%), url('../images/nauset-beach.jpg') center 58% / cover no-repeat; filter: saturate(.48); }
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 { display: none; }
html[data-theme="coastal"] .app-shell { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
html[data-theme="coastal"] .container { width: min(100%, 1280px); padding-inline: 48px; }
html[data-theme="coastal"] .site-header { padding: 22px 0; }
html[data-theme="coastal"] .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
html[data-theme="coastal"] .brand { flex: 0 1 auto; }
html[data-theme="coastal"] .brand-box { padding: 0; background: none; border: 0; box-shadow: none; }
html[data-theme="coastal"] .brand-kicker { color: #d0dbd8; font-size: .75rem; letter-spacing: .16em; margin: 0 0 5px; font-weight: 400; }
html[data-theme="coastal"] .brand-title { font-size: 1.32rem; font-weight: 500; letter-spacing: -.045em; line-height: 1.15; white-space: normal; margin: 0; text-transform: none; color: var(--text); }
html[data-theme="coastal"] .brand-title a { text-decoration: none; }
html[data-theme="coastal"] .brand-title span { font-weight: 400; color: #c2d0ca; }
html[data-theme="coastal"] .brand-sub { display: none; }
html[data-theme="coastal"] .brand-lead { max-width: 55ch; color: var(--text-dim); font: inherit; }
html[data-theme="coastal"] .coastal-nav { align-items: center; gap: 28px; margin-left: auto; }
html[data-theme="coastal"] .coastal-nav a { font-size: .875rem; text-decoration: none; color: #e1e8e3; padding-block: 10px; }
html[data-theme="coastal"] .coastal-nav a:hover { color: white; text-decoration: underline; text-underline-offset: 5px; }
html[data-theme="coastal"] .header-tools { position: relative; width: auto; min-width: 0; max-width: none; }
html[data-theme="coastal"] .header-tools .start-surf-button { display: none; }
html[data-theme="coastal"] .theme-picker { min-width: 0; border: 1px solid rgba(255,255,255,.32); background: rgba(15,25,24,.35); border-radius: 30px; }
html[data-theme="coastal"] .theme-picker-summary { padding: 10px 16px; color: var(--text); font-size: .875rem; text-transform: none; gap: 14px; }
html[data-theme="coastal"] .theme-picker-summary::after { color: inherit; }
html[data-theme="coastal"] .theme-picker[open] { border-radius: 20px 20px 0 0; }
html[data-theme="coastal"] .theme-picker-fieldset { position: absolute; top: 100%; right: 0; z-index: 20; width: 290px; padding: 16px; border: 1px solid var(--line); border-radius: 12px 0 12px 12px; background: #19211f; box-shadow: 0 15px 50px #0008; }
html[data-theme="coastal"] .theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html[data-theme="coastal"] .theme-chip span { font-size: .8125rem; padding: 10px; white-space: normal; border: 1px solid var(--line); border-radius: 6px; color: #d6e0db; background: transparent; text-transform: none; }
html[data-theme="coastal"] .theme-chip.is-selected span { color: #101515; background: #d7e5dc; border-color: #d7e5dc; }
html[data-theme="coastal"] .theme-chip input:focus-visible + span { outline: 2px solid white; outline-offset: 2px; }
html[data-theme="coastal"] .main { padding: 0 0 40px; }
html[data-theme="coastal"] .main > .container { gap: 24px; }
html[data-theme="coastal"] .main > .container > * { order: 0; min-width: 0; }
html[data-theme="coastal"] .breadcrumbs { display: none; }
html[data-theme="coastal"] .coastal-location { align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0 16px; border-bottom: 1px solid rgba(255,255,255,.2); }
html[data-theme="coastal"] .coastal-location > p { font-size: .75rem; letter-spacing: .15em; color: #d0dcd7; margin: 0; }
html[data-theme="coastal"] .coastal-location > p span { margin: 0 14px; opacity: .5; }
html[data-theme="coastal"] .beach-select { display: flex; align-items: center; gap: 12px; }
html[data-theme="coastal"] .beach-select label { font-size: .8125rem; color: #d0dcd7; }
html[data-theme="coastal"] .beach-select select { max-width: 240px; padding: 11px 32px 11px 14px; border: 1px solid #ffffff40; border-radius: 6px; background: #1d2c2b; color: white; font-size: .875rem; }
html[data-theme="coastal"] .beach-select button { padding: 11px 16px; border: 1px solid #e9eee7; border-radius: 6px; background: #e9eee7; color: #15211c; font-size: .875rem; cursor: pointer; }
html[data-theme="coastal"] .beach-select button:hover { background: white; }
html[data-theme="coastal"] .beach-select button span { margin-left: 12px; }
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: 28px; border: 1px solid var(--line); border-radius: 12px; background: #151c1b; box-shadow: 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: 4px 0 0; background: transparent; display: flex; flex-direction: column; gap: 0; box-shadow: none; }
html[data-theme="coastal"] .hero-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 0 0 16px; }
html[data-theme="coastal"] .eyebrow { display: block; margin: 0 0 12px; color: #d3e0d8; font-size: .8125rem; letter-spacing: .04em; text-transform: none; }
html[data-theme="coastal"] .eyebrow #active-spot-name { display: none; }
html[data-theme="coastal"] .hero-title { font-size: clamp(2.6rem, 5.3vw, 4.3rem); line-height: 1.05; font-weight: 400; letter-spacing: -.055em; margin: 0; color: #f5f6f1; text-transform: none; }
html[data-theme="coastal"] .hero-sub { display: block; font-size: 1rem; color: #d2dfd8; margin: 14px 0 0; }
html[data-theme="coastal"] .hero-top .meta-pill { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; background: transparent; border: none; box-shadow: none; padding: 0; font-size: .8125rem; color: #d2dfd8; white-space: normal; }
html[data-theme="coastal"] .meta-cache { border: none; padding: 0; background: none; font-size: .75rem; color: #b7c6bd; }
html[data-theme="coastal"] .vibe-block { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: 24px; padding: 6px 0 20px; background: none; border: 0; margin: 0; }
html[data-theme="coastal"] .vibe-label { display: inline-block; font-size: .875rem; font-weight: 500; color: #e6eee7; letter-spacing: .01em; padding: 5px 12px; border: 1px solid #b9d5c766; border-radius: 30px; background: #1d332a80; line-height: 1.5; margin: 0 0 12px; text-transform: none; }
html[data-theme="coastal"] .vibe-pep { max-width: 46ch; font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 400; line-height: 1.5; color: #f0f4ed; margin: 0; }
html[data-theme="coastal"] .vibe-blurb, html[data-theme="coastal"] .vibe-emoji, html[data-theme="coastal"] .giphy-reaction, html[data-theme="coastal"] #btn-stoke { display: none; }
html[data-theme="coastal"] .vector-field { border: 0; border-radius: 0; background: none; padding: 0; min-width: 0; }
html[data-theme="coastal"] .vector-field::before { display: none; }
html[data-theme="coastal"] .vector-svg { width: 232px; height: 232px; filter: none; }
html[data-theme="coastal"] .vf-ring, html[data-theme="coastal"] .vf-cross { stroke: #c5dbce38; }
html[data-theme="coastal"] .vf-card { fill: #d3e3d8; font-size: 14px; }
html[data-theme="coastal"] .vf-legend { gap: 6px; margin-top: 10px; font-size: .875rem; line-height: 1.4; }
html[data-theme="coastal"] .vf-key { color: #d5e3da; }
html[data-theme="coastal"] .vf-sandbar-label { fill: #d3c8ab; }
html[data-theme="coastal"] .vf-sandbar-shoal { stroke: #d3c8ab55; }
html[data-theme="coastal"] .current-readout { display: none; border: 0; border-left: 1px solid #dce9df33; border-radius: 0; background: none; padding: 0 0 0 24px; gap: 6px; align-content: center; }
html[data-theme="coastal"] .current-updated { display: none; }
html[data-theme="coastal"] .stoke-ring { width: 78px; height: 78px; filter: none; }
html[data-theme="coastal"] .stoke-svg { width: 100%; height: 100%; }
html[data-theme="coastal"] .stoke-track { stroke: #dae5dc26; }
html[data-theme="coastal"] .stoke-fill { stroke: #b7d4bd; filter: none; }
html[data-theme="coastal"] .stoke-value { font-size: 1.5rem; color: #edf1e9; }
html[data-theme="coastal"] .stoke-unit { font-size: .6875rem; color: #c1d2c6; text-transform: none; }
html[data-theme="coastal"] .current-list div { border-color: #dce9df26; gap: 8px; padding: 5px 0; }
html[data-theme="coastal"] .current-list dt { color: #c1d2c6; font-size: .75rem; }
html[data-theme="coastal"] .current-list dd { color: #f0f4ed; font-size: .875rem; font-weight: 500; }
html[data-theme="coastal"] .current-list dd span { font-size: .75rem; }
html[data-theme="coastal"] .stat-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #d6e5da33; border-radius: 12px; background: rgba(23,32,29,.93); margin-top: 0; overflow: hidden; }
html[data-theme="coastal"] .stat-card, html[data-theme="coastal"] .stat-card--hero, html[data-theme="coastal"] .stat-card--wide { display: block; padding: 18px 22px; min-width: 0; text-align: left; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; grid-column: auto; box-shadow: none; }
html[data-theme="coastal"] .stat-card:nth-child(4n) { border-right: 0; }
html[data-theme="coastal"] .stat-card:nth-child(n+5) { padding-top: 16px; padding-bottom: 16px; border-bottom: 0; }
html[data-theme="coastal"] .stat-label { margin: 0 0 8px; color: #b3c5b9; font-size: .8125rem; font-weight: 400; letter-spacing: .01em; text-transform: none; }
html[data-theme="coastal"] .stat-value { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
html[data-theme="coastal"] .stat-num, html[data-theme="coastal"] .stat-card--hero .stat-num { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 400; letter-spacing: -.05em; line-height: 1.1; color: #f2f4ec; }
html[data-theme="coastal"] .stat-card:nth-child(n+5) .stat-num { font-size: 1.5rem; }
html[data-theme="coastal"] .stat-unit { font-size: .875rem; color: #bbcbbf; }
html[data-theme="coastal"] .stat-sub { margin: 7px 0 0; color: #b2c2b7; font-size: .75rem; line-height: 1.4; }
html[data-theme="coastal"] .stat-card--lightning .stat-num { display: none; }
html[data-theme="coastal"] .lightning-risk-action { color: #d0dece; }
html[data-theme="coastal"] .lightning-risk--high, html[data-theme="coastal"] .lightning-risk--danger { background: #472c26; }
html[data-theme="coastal"] .period-cheat { font-size: .75rem; animation: none; color: #dbc997; }
html[data-theme="coastal"] .blink { animation: none; }
html[data-theme="coastal"] .hero-actions { display: flex; margin-top: 16px; gap: 10px; align-items: center; }
html[data-theme="coastal"] .btn, html[data-theme="coastal"] .brand-tag, html[data-theme="coastal"] .share-social, html[data-theme="coastal"] .chart-tab, html[data-theme="coastal"] .gear-tab { padding: 10px 16px; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: #1c2622; color: #d8e4db; box-shadow: none; font-size: .875rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
html[data-theme="coastal"] .btn:hover, html[data-theme="coastal"] .brand-tag:hover, html[data-theme="coastal"] .share-social:hover { background: #2a3932; border-color: #94b6a1; color: white; transform: none; box-shadow: none; }
html[data-theme="coastal"] .btn-primary { background: #d5e6d8; color: #18251d; }
html[data-theme="coastal"] .share-pack { margin-left: auto; }
html[data-theme="coastal"] .share-socials { gap: 5px; }
html[data-theme="coastal"] .share-social { min-width: 36px; padding: 8px 10px; }
html[data-theme="coastal"] .section-head { align-items: baseline; gap: 20px; margin: 0 0 16px; }
html[data-theme="coastal"] .section-title { font-size: clamp(1.3rem, 1.8vw, 1.6rem); color: #edf1e9; font-weight: 400; letter-spacing: -.035em; text-transform: none; line-height: 1.25; }
html[data-theme="coastal"] .section-desc { font-size: .875rem; color: #a9bcb0; line-height: 1.5; max-width: 54ch; }
html[data-theme="coastal"] .week-panel, html[data-theme="coastal"] .hourly-panel, html[data-theme="coastal"] .surf-cams-panel, html[data-theme="coastal"] .spot-picker { padding: 4px 0 0; background: transparent; border: 0; border-radius: 0; }
html[data-theme="coastal"] .week-scroller { padding-bottom: 5px; }
html[data-theme="coastal"] .week-track { gap: 8px; padding: 0; }
html[data-theme="coastal"] .day-card { flex: 1 0 132px; }
html[data-theme="coastal"] .day-card article { padding: 16px 12px; border: 1px solid var(--line); border-radius: 10px; box-shadow: none; background: #19211e; text-align: left; }
html[data-theme="coastal"] .day-card:nth-child(2) article { border-color: var(--line); box-shadow: none; }
html[data-theme="coastal"] .day-card:first-child article { background: #26362c; border-color: #90af9770; }
html[data-theme="coastal"] .day-card:has(.day-vibe) article:hover { box-shadow: none; border-color: #9dbca7; }
html[data-theme="coastal"] .day-name { color: #e4ece2; font-size: .875rem; font-weight: 400; }
html[data-theme="coastal"] .day-emoji { display: none; }
html[data-theme="coastal"] .day-vibe { color: #afc5b4; font-size: .875rem; margin-top: 12px; font-weight: 400; }
html[data-theme="coastal"] .day-waves { font-size: 1.45rem; letter-spacing: -.04em; color: #f3f4eb; margin: 6px 0 12px; }
html[data-theme="coastal"] .day-stoke-bar { height: 3px; border: 0; background: #ffffff15; border-radius: 3px; margin: 10px 0; }
html[data-theme="coastal"] .day-stoke-bar span { background: #b2cdb5; }
html[data-theme="coastal"] .day-meta, html[data-theme="coastal"] .day-dirs, html[data-theme="coastal"] .day-tides, html[data-theme="coastal"] .day-fog { color: #afc2b4; font-size: .75rem; }
html[data-theme="coastal"] .day-dirs { justify-content: flex-start; }
html[data-theme="coastal"] .day-dir-icon { display: none; }
html[data-theme="coastal"] .day-dir:first-child::before { content: 'Wind '; }
html[data-theme="coastal"] .day-dir:last-child::before { content: 'Swell '; }
html[data-theme="coastal"] .day-tides { border-top: 1px solid var(--line); padding-top: 10px; }
html[data-theme="coastal"] .day-tides span, html[data-theme="coastal"] .day-fog span { border: 0; background: none; padding: 0; color: #afc2b4; }
html[data-theme="coastal"] .chart-tablist { justify-content: flex-start; margin-bottom: 16px; gap: 8px; }
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: #19241c; background: #d6e3d4; border-color: #d6e3d4; }
html[data-theme="coastal"] .chart-panel { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: #171f1b; }
html[data-theme="coastal"] .line-chart { border: 0; background: linear-gradient(180deg, #b1c8b30a, transparent); }
html[data-theme="coastal"] .line-grid { stroke: #d3e4d51a; }
html[data-theme="coastal"] .line-stroke { stroke: #b9d4bd; filter: none; }
html[data-theme="coastal"] .line-area { fill: #a3c5aa18; }
html[data-theme="coastal"] .line-point { fill: #17261b; stroke: #c5ddc3; }
html[data-theme="coastal"] .line-label, html[data-theme="coastal"] .line-axis-label, html[data-theme="coastal"] .line-tide-label { fill: #b8cbbb; }
html[data-theme="coastal"] .surf-cam-grid { gap: 12px; }
html[data-theme="coastal"] .surf-cam-card { border: 1px solid var(--line); border-radius: 10px; padding: 20px; background: #1b2520; box-shadow: none; }
html[data-theme="coastal"] .surf-cam-card:hover { background: #26362b; border-color: #9bb9a3; box-shadow: none; transform: translateY(-2px); }
html[data-theme="coastal"] .surf-cam-tag { background: none; border: 0; padding: 0; color: #b0c6b4; font-size: .75rem; letter-spacing: .06em; }
html[data-theme="coastal"] .surf-cam-name { font-size: 1.2rem; color: #eff2e7; font-weight: 400; letter-spacing: -.025em; }
html[data-theme="coastal"] .surf-cam-area, html[data-theme="coastal"] .surf-cam-note { font-size: .875rem; color: #b4c6b6; }
html[data-theme="coastal"] .surf-cam-cta { color: #e4ebdc; border-top: 1px solid var(--line); font-size: .875rem; }
html[data-theme="coastal"] .spot-grid { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 12px; }
html[data-theme="coastal"] .spot-card { background: #1b251f; border: 1px solid var(--line); padding: 20px; border-radius: 10px; box-shadow: none; }
html[data-theme="coastal"] .spot-card:hover, html[data-theme="coastal"] .spot-card.is-active { background: #283c2d; border-color: #a2bca5; box-shadow: none; transform: none; }
html[data-theme="coastal"] .spot-card.is-active::after, html[data-theme="coastal"] .spot-icon { display: none; }
html[data-theme="coastal"] .spot-name { font-size: 1rem; color: #e6edde; font-weight: 400; }
html[data-theme="coastal"] .spot-meta { font-size: .8125rem; color: #adbfaf; }
html[data-theme="coastal"] .nws-alert-panel { background: #1b241e; padding: 20px 24px; }
html[data-theme="coastal"] .nws-alert-panel.has-alerts { border-color: #d4aa75; background: #2b251b; }
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: #b3c4b5; font-size: .75rem; }
html[data-theme="coastal"] .nws-alert-title,
html[data-theme="coastal"] .nws-alert-panel.is-clear .nws-alert-title {
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: #e3ece5;
  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: 12px 0 0; color: #c1d0bd; }
html[data-theme="coastal"] .nws-alert-chip { background: #d5e0c9; color: #1e2d1d; border: 0; font-size: .75rem; padding: 4px 8px; border-radius: 4px; }
html[data-theme="coastal"] .nws-alert-card h3 { font-size: 1rem; color: #f0dec1; }
html[data-theme="coastal"] .nws-alert-clear { font-size: .875rem; }
html[data-theme="coastal"] .nws-alert-panel.is-clear { display: block; }
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"] .weekly-summary .summary-brief, html[data-theme="coastal"] .weekly-summary .summary-lead, html[data-theme="coastal"] .gear-feature, html[data-theme="coastal"] .gear-card, html[data-theme="coastal"] .swell-teaser-stat, html[data-theme="coastal"] .swell-insight { background: #1c281f; border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
html[data-theme="coastal"] .weekly-summary .summary-brief { display: block; }
html[data-theme="coastal"] .weekly-summary .summary-lead { min-height: 0; padding: 20px; border: 0; background: none; }
html[data-theme="coastal"] .summary-title, html[data-theme="coastal"] .summary-vibe, html[data-theme="coastal"] .summary-lead-text, html[data-theme="coastal"] .gear-feature-title { color: #e3ecdb; text-shadow: none; }
html[data-theme="coastal"] .summary-list { color: #c0d0b9; font-size: 1rem; }
html[data-theme="coastal"] .gear-feature-title { font-size: 1.4rem; letter-spacing: -.025em; }
html[data-theme="coastal"] .gear-feature-copy, html[data-theme="coastal"] .gear-feature-desc, html[data-theme="coastal"] .gear-feature-note { color: #bdcdb5; font-size: 1rem; }
html[data-theme="coastal"] .gear-link, html[data-theme="coastal"] .gear-link--primary { background: #243526; border: 1px solid var(--line); color: #dce7d3; box-shadow: none; border-radius: 6px; font-size: .875rem; }
html[data-theme="coastal"] .swell-teaser-label { font-size: .8125rem; color: #b0c3a9; }
html[data-theme="coastal"] .swell-teaser-value { font-size: 1.5rem; color: #e3ecd7; }
html[data-theme="coastal"] .surf-guide-summary, html[data-theme="coastal"] .beach-wire-summary { padding: 0; color: #dae7cf; }
html[data-theme="coastal"] .surf-guide-panel, html[data-theme="coastal"] .beach-wire-panel { color: #c1d0b8; }
html[data-theme="coastal"] .vector-modal { background: linear-gradient(135deg, #d8eee512, transparent 55%), rgba(18, 32, 28, .64); border: 1px solid #d5eee54a; border-radius: 18px; color: #eef6ed; box-shadow: inset 0 1px 0 #ffffff24, 0 24px 80px #0006; backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter: blur(24px) saturate(135%); }
html[data-theme="coastal"] .vector-modal-close { background: #d3ede514; color: white; border: 1px solid var(--line); border-radius: 6px; }
html[data-theme="coastal"] .vector-modal .vector-svg { width: min(72vw, 540px); height: auto; }
html[data-theme="coastal"] .site-footer { margin-top: 12px; border-top: 1px solid var(--line); background: #111912; padding: 28px 0; color: #aabc9f; }
html[data-theme="coastal"] .site-footer p { font-size: .8125rem; line-height: 1.7; }
html[data-theme="coastal"] .footer-fun { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; color: #c4d2b8; }
html[data-theme="coastal"] .footer-top-link { color: #d8e4cc; border: 0; background: none; box-shadow: none; font-size: .8125rem; }
@media (max-width: 1000px) {
  html[data-theme="coastal"] .container { padding-inline: 28px; }
html[data-theme="coastal"] .header-inner { gap: 20px; }
html[data-theme="coastal"] .coastal-nav { gap: 16px; }
html[data-theme="coastal"] .coastal-location > p { display: none; }
html[data-theme="coastal"] .coastal-location { justify-content: flex-end; }
html[data-theme="coastal"] .vibe-block { grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; }
html[data-theme="coastal"] .current-readout { display: none; }
html[data-theme="coastal"] .stat-card, html[data-theme="coastal"] .stat-card--hero, html[data-theme="coastal"] .stat-card--wide { padding: 18px; }
}
@media (max-width: 640px) {
  html[data-theme="coastal"] .container { padding-inline: 20px; }
html[data-theme="coastal"] .ocean-bg { height: 730px; }
html[data-theme="coastal"] .site-header { padding: 18px 0 8px; }
html[data-theme="coastal"] .header-inner { gap: 14px 12px; }
html[data-theme="coastal"] .brand { flex: 1; }
html[data-theme="coastal"] .brand-kicker { font-size: .6875rem; letter-spacing: .09em; }
html[data-theme="coastal"] .brand-title { font-size: 1.2rem; }
html[data-theme="coastal"] .brand-title span { display: block; margin-top: 3px; }
html[data-theme="coastal"] .coastal-nav { order: 3; flex-basis: 100%; justify-content: space-between; gap: 16px; border-top: 1px solid #ffffff24; padding-top: 6px; }
html[data-theme="coastal"] .coastal-nav a { font-size: .8125rem; }
html[data-theme="coastal"] .theme-picker-summary { font-size: .8125rem; padding: 10px 12px; }
html[data-theme="coastal"] .theme-picker-fieldset { width: min(290px, 85vw); }
html[data-theme="coastal"] .main > .container { gap: 24px; }
html[data-theme="coastal"] .coastal-location { padding: 8px 0 14px; }
html[data-theme="coastal"] .beach-select { width: 100%; gap: 8px; flex-wrap: wrap; }
html[data-theme="coastal"] .beach-select label { width: 100%; }
html[data-theme="coastal"] .beach-select select { min-width: 0; max-width: none; flex: 1; font-size: 1rem; }
html[data-theme="coastal"] .beach-select button { padding: 12px; font-size: .8125rem; }
html[data-theme="coastal"] .beach-select button span { margin-left: 4px; }
html[data-theme="coastal"] .hero-panel { padding-top: 0; }
html[data-theme="coastal"] .hero-top { display: block; margin-bottom: 14px; }
html[data-theme="coastal"] .hero-title { font-size: clamp(2.3rem, 10vw, 3.5rem); }
html[data-theme="coastal"] .hero-sub { font-size: .875rem; margin-top: 10px; }
html[data-theme="coastal"] .hero-top .meta-pill { margin-top: 10px; align-items: flex-start; flex-direction: row; flex-wrap: wrap; column-gap: 8px; }
html[data-theme="coastal"] .hero-top .meta-cache { font-size: .75rem; }
html[data-theme="coastal"] .vibe-block { display: block; padding: 0 0 18px; }
html[data-theme="coastal"] .vibe-pep { font-size: 1rem; }
html[data-theme="coastal"] .vector-field { display: none; }
html[data-theme="coastal"] .stat-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-theme="coastal"] .stat-card:nth-child(n) { padding: 16px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
html[data-theme="coastal"] .stat-card:nth-child(2n) { border-right: 0; }
html[data-theme="coastal"] .stat-card:nth-last-child(-n+2) { border-bottom: 0; }
html[data-theme="coastal"] .stat-num, html[data-theme="coastal"] .stat-card--hero .stat-num { font-size: 2.2rem; }
html[data-theme="coastal"] .stat-label { font-size: .8125rem; }
html[data-theme="coastal"] .stat-card:nth-child(n+5) .stat-num { font-size: 1.5rem; }
html[data-theme="coastal"] .hero-actions { flex-wrap: wrap; }
html[data-theme="coastal"] .share-socials { display: none; }
html[data-theme="coastal"] .section-head { display: block; margin-bottom: 14px; }
html[data-theme="coastal"] .section-desc { margin-top: 8px; }
html[data-theme="coastal"] .panel:not(.hero-panel):not(.week-panel):not(.hourly-panel):not(.surf-cams-panel), html[data-theme="coastal"] .surf-guide-panel, html[data-theme="coastal"] .beach-wire-panel, html[data-theme="coastal"] .nws-alert-panel { padding: 20px; }
html[data-theme="coastal"] .chart-panel { padding: 10px; }
html[data-theme="coastal"] .chart-tablist { flex-wrap: wrap; }
html[data-theme="coastal"] .chart-tab { flex: 1; padding: 10px; }
html[data-theme="coastal"] .surf-cam-grid, html[data-theme="coastal"] .spot-grid { grid-template-columns: 1fr; }
html[data-theme="coastal"] .swell-teaser-stats { grid-template-columns: 1fr; }
html[data-theme="coastal"] .weekly-summary .summary-brief { display: block; }
html[data-theme="coastal"] .footer-fun { justify-content: flex-start; gap: 12px 24px; }
}
@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; }
}
/* Keep header controls above the report and neutralize inherited arcade spacing. */
html[data-theme="coastal"] .site-header { z-index: 3; }
html[data-theme="coastal"] .header-tools { flex: 0 0 auto; }
html[data-theme="coastal"] .vibe-block,
html[data-theme="coastal"] .stat-label,
html[data-theme="coastal"] .stat-sub { text-align: left; }
html[data-theme="coastal"] .vibe-block { box-shadow: none; }
html[data-theme="coastal"] .swell-tracker-page .brand-title { font-size: clamp(2rem, 5vw, 3.6rem); text-transform: none; }

/* Reading hierarchy: wave height leads, supporting measurements remain compact. */
html[data-theme="coastal"] .stat-value { font-variant-numeric: tabular-nums; }
html[data-theme="coastal"] .stat-card--hero { background: linear-gradient(140deg, #b8d4c51a, #b8d4c506); }
html[data-theme="coastal"] .stat-card--hero .stat-label { color: #d8e9de; font-weight: 500; }
html[data-theme="coastal"] .stat-card--hero .stat-num { font-size: clamp(3.2rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.06em; font-weight: 500; color: #f4f8ee; }
html[data-theme="coastal"] .stat-card--hero .stat-unit { font-size: 1rem; color: #c9ddcf; }
html[data-theme="coastal"] .stat-card:nth-child(-n+4) .stat-value { min-height: 68px; align-items: baseline; align-content: center; }
html[data-theme="coastal"] .stat-label { font-size: .875rem; }
html[data-theme="coastal"] .photo-credit { gap: 5px; flex-wrap: wrap; }
html[data-theme="coastal"] .theme-picker-fieldset { max-height: min(70vh, 520px); overflow-y: auto; }
html[data-theme="coastal"] .beach-select button,
html[data-theme="coastal"] .btn,
html[data-theme="coastal"] .coastal-nav a { transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
@media (min-width: 1001px) {
  html[data-theme="coastal"] .main > .container { gap: 28px; }
}
@media (max-width: 640px) {
  html[data-theme="coastal"] .stat-card--hero .stat-num { font-size: clamp(2.8rem, 12vw, 3.5rem); }
  html[data-theme="coastal"] .stat-card:nth-child(-n+4) .stat-value { min-height: 56px; }
  html[data-theme="coastal"] .stat-card:nth-child(n) { padding: 14px 16px; }
  html[data-theme="coastal"] .hero-title { font-size: clamp(2.25rem, 9vw, 3.2rem); }
  html[data-theme="coastal"] .hero-sub { margin-top: 8px; }
}

/* Section compositions: forecast console, chart canvas, editorial reports. */
html[data-theme="coastal"] .main > .container { gap: 36px; }
html[data-theme="coastal"] .section-title { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.045em; }
html[data-theme="coastal"] .section-head { margin-bottom: 24px; }
html[data-theme="coastal"] .week-panel {
  padding: 28px; border: 1px solid #b9d5cf2e; border-radius: 16px;
  background: linear-gradient(135deg, #263835, #192524 65%);
  box-shadow: inset 0 1px 0 #e3f5eb0f, 0 16px 40px #00000024;
}
html[data-theme="coastal"] .week-panel .section-title { color: #f0f6ef; }
html[data-theme="coastal"] .week-track { gap: 0; border: 1px solid #cce2d620; border-radius: 10px; overflow: hidden; background: #0b14143d; }
html[data-theme="coastal"] .day-card { flex: 1 0 125px; }
html[data-theme="coastal"] .day-card article,
html[data-theme="coastal"] .day-card:nth-child(2) article {
  border: 0; border-right: 1px solid #bed8cd24; border-radius: 0;
  background: transparent; padding: 20px 14px; box-shadow: none;
}
html[data-theme="coastal"] .day-card:last-child article { border-right: 0; }
html[data-theme="coastal"] .day-card:first-child article { background: #dce9dd; box-shadow: inset 0 3px 0 #fcfff8; }
html[data-theme="coastal"] .day-card:first-child :is(.day-name, .day-vibe, .day-waves, .day-meta, .day-dirs, .day-tides, .day-tides span, .day-fog span) { color: #253c34; }
html[data-theme="coastal"] .day-card:first-child .day-waves { color: #10251e; }
html[data-theme="coastal"] .day-card:first-child .day-stoke-bar { background: #254c3526; }
html[data-theme="coastal"] .day-card:first-child .day-stoke-bar span { background: #3f6b52; }
html[data-theme="coastal"] .day-card:first-child .day-tides { border-color: #294b3433; }
html[data-theme="coastal"] .day-card:has(.day-vibe) article:hover { box-shadow: inset 0 3px 0 #c5dacc; }
html[data-theme="coastal"] .day-waves { font-size: 1.85rem; margin: 10px 0 18px; }
html[data-theme="coastal"] .day-name { font-weight: 500; }
html[data-theme="coastal"] .hourly-panel {
  padding: 28px; border: 1px solid #9bb2b62b; border-radius: 16px;
  background: #131c20; box-shadow: inset 0 1px 0 #d4ecf00a;
}
html[data-theme="coastal"] .hourly-panel .section-desc { color: #a2b8bf; }
html[data-theme="coastal"] .chart-tablist { border-bottom: 1px solid #a9c3cf26; gap: 24px; margin-bottom: 20px; padding: 0; }
html[data-theme="coastal"] .chart-tab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 4px 0 12px; color: #afc2ca; }
html[data-theme="coastal"] .chart-tab.is-active,
html[data-theme="coastal"] .chart-tab[aria-selected="true"] { color: #edf5f7; background: transparent; border-color: #add5d4; }
html[data-theme="coastal"] .chart-panel { background: #0b1418; border: 1px solid #a5c4d017; border-radius: 8px; padding: 16px; }
html[data-theme="coastal"] .line-chart { background: linear-gradient(180deg, #9fc5c70c, transparent); }
html[data-theme="coastal"] .line-stroke { stroke: #afd9d5; stroke-width: 3; }
html[data-theme="coastal"] .line-point { stroke: #afd9d5; fill: #15252b; }
html[data-theme="coastal"] .surf-cams-panel,
html[data-theme="coastal"] .spot-picker {
  display: grid; grid-template-columns: minmax(185px, .7fr) minmax(0, 2fr);
  gap: 36px; padding: 30px 0; border-top: 1px solid #cfdfd729;
}
html[data-theme="coastal"] .surf-cams-panel .section-head,
html[data-theme="coastal"] .spot-picker .section-head { display: block; margin: 0; }
html[data-theme="coastal"] .surf-cams-panel .section-title,
html[data-theme="coastal"] .spot-picker .section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); max-width: 10ch; line-height: 1.04; }
html[data-theme="coastal"] .surf-cams-panel .section-desc,
html[data-theme="coastal"] .spot-picker .section-desc { margin-top: 16px; max-width: 27ch; }
html[data-theme="coastal"] .surf-cam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html[data-theme="coastal"] .surf-cam-card {
  position: relative; padding: 24px; min-height: 225px; align-content: start;
  border: 1px solid #bfdbd433; border-radius: 10px;
  background: linear-gradient(155deg, #30443f, #182725 80%);
  transition: border-color .18s ease, background-color .18s ease;
}
html[data-theme="coastal"] .surf-cam-card:nth-child(even) { background: linear-gradient(155deg, #2c3c43, #182328 80%); }
html[data-theme="coastal"] .surf-cam-card:hover { transform: none; border-color: #b1d3c5; box-shadow: inset 0 1px 0 #d4f2e626; }
html[data-theme="coastal"] .surf-cam-tag { margin-bottom: 16px; letter-spacing: .12em; color: #b4d0c6; }
html[data-theme="coastal"] .surf-cam-name { font-size: 1.55rem; line-height: 1.1; }
html[data-theme="coastal"] .surf-cam-area { font-size: .75rem; font-weight: 400; letter-spacing: .06em; margin: 4px 0 10px; }
html[data-theme="coastal"] .surf-cam-note { color: #bfcdc6; }
html[data-theme="coastal"] .surf-cam-cta { padding: 14px 0 0; margin-top: 16px; color: #f0f4e9; }
html[data-theme="coastal"] .weekly-summary { padding: 32px; background: #e0e4d9; border: 0; border-radius: 14px; color: #27372e; }
html[data-theme="coastal"] .weekly-summary .section-head { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #29453233; }
html[data-theme="coastal"] .weekly-summary .section-title { color: #1d3126; }
html[data-theme="coastal"] .weekly-summary .section-desc { color: #4e6154; }
html[data-theme="coastal"] .weekly-summary .summary-brief { display: grid; grid-template-columns: .85fr 1.3fr; align-items: start; gap: 40px; border: 0; background: transparent; padding: 0; }
html[data-theme="coastal"] .weekly-summary .summary-lead { padding: 0; color: #253b2c; background: transparent; font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 400; line-height: 1.35; letter-spacing: -.025em; }
html[data-theme="coastal"] .weekly-summary .summary-list { grid-column: auto; }
html[data-theme="coastal"] .weekly-summary .summary-list li { border-top: 1px solid #29453233; 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: #304f39; font-size: .75rem; }
html[data-theme="coastal"] .weekly-summary .summary-text { color: #354c3b; font-size: .9375rem; line-height: 1.55; }
html[data-theme="coastal"] .swell-tracker-teaser { padding: 30px; background: #1e2b30; border-color: #abc8cd30; }
html[data-theme="coastal"] .swell-teaser-stats { gap: 0; border-block: 1px solid #c3dce029; margin-top: 24px; }
html[data-theme="coastal"] .swell-teaser-stat { background: none; border: 0; border-right: 1px solid #c3dce029; border-radius: 0; padding: 22px; }
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-value { font-size: clamp(1.8rem, 3vw, 2.6rem); color: #e1ece6; font-weight: 400; letter-spacing: -.04em; }
html[data-theme="coastal"] .swell-insight { background: none; border: 0; padding: 14px 0 0; color: #b8d0cb; }
html[data-theme="coastal"] .spot-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: 6px; padding: 20px 30px 20px 0; background: none; border: 0; border-bottom: 1px solid #c7ded52b; border-radius: 0; }
html[data-theme="coastal"] .spot-card::after { content: '↗'; position: absolute; right: 5px; top: 22px; color: #93b4a7; }
html[data-theme="coastal"] .spot-card.is-active::after { display: block; content: '↗'; background: none; border: 0; padding: 0; }
html[data-theme="coastal"] .spot-card.is-active,
html[data-theme="coastal"] .spot-card:hover { background: transparent; border-color: #accbb6; box-shadow: none; }
html[data-theme="coastal"] .spot-card.is-active .spot-name { color: #c7e9d0; }
html[data-theme="coastal"] .spot-name { font-size: 1.1rem; }
html[data-theme="coastal"] .gear-panel { background: #181e1b; border-color: #ced7cb24; padding: 28px; }
html[data-theme="coastal"] .gear-feature { background: #242f27; border-color: #d0ddc92e; }
html[data-theme="coastal"] .surf-guide-panel,
html[data-theme="coastal"] .beach-wire-panel { border-radius: 0; border: 0; border-top: 1px solid #c7ded52b; background: transparent; padding: 24px 0; }
@media (max-width: 800px) {
  html[data-theme="coastal"] .surf-cams-panel,
  html[data-theme="coastal"] .spot-picker { grid-template-columns: 1fr; gap: 24px; }
  html[data-theme="coastal"] .surf-cams-panel .section-title,
  html[data-theme="coastal"] .spot-picker .section-title { max-width: none; }
  html[data-theme="coastal"] .surf-cams-panel .section-desc,
  html[data-theme="coastal"] .spot-picker .section-desc { max-width: 48ch; }
  html[data-theme="coastal"] .weekly-summary .summary-brief { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  html[data-theme="coastal"] .main > .container { gap: 28px; }
  html[data-theme="coastal"] .week-panel,
  html[data-theme="coastal"] .hourly-panel { padding: 20px 16px; border-radius: 12px; }
  html[data-theme="coastal"] .section-head { margin-bottom: 20px; }
  html[data-theme="coastal"] .surf-cam-grid { grid-template-columns: 1fr; }
  html[data-theme="coastal"] .surf-cam-card { min-height: 0; }
  html[data-theme="coastal"] .spot-grid { grid-template-columns: 1fr; }
  html[data-theme="coastal"] .swell-teaser-stat { border: 0; border-bottom: 1px solid #c3dce029; padding: 16px 0; }
  html[data-theme="coastal"] .surf-guide-panel,
  html[data-theme="coastal"] .beach-wire-panel { padding: 24px 0; }
}

/* Translucent compass dialog; preserve a clear view of the page behind it. */
html[data-theme="coastal"] .vector-modal::backdrop { background: rgba(4, 12, 10, .32); }
html[data-theme="coastal"] .vector-modal-head { background: #d8eee509; border-bottom: 1px solid #d5eee529; padding: 18px 22px; }
html[data-theme="coastal"] .vector-modal-head h2 { color: #edf6ef; font-weight: 400; letter-spacing: -.025em; }
html[data-theme="coastal"] .vector-modal-stage,
html[data-theme="coastal"] .vector-modal-stage .vector-field { background: transparent; }
html[data-theme="coastal"] .vector-modal-close:hover { background: #d3ede52b; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="coastal"] .vector-modal { background: rgba(18, 32, 28, .92); }
}