:root {
  /* Seafoam Coast — bright, airy, summer-beach daytime palette */
  --ink: #14333F;          /* deep ink navy — primary text */
  --ink-soft: #4A6B76;     /* muted navy — secondary text */
  --paper: #F4FAFB;        /* sea mist — page background */
  --paper-warm: #E6F4F4;   /* deeper mist — cards/wells */
  --gold: #F2A93B;         /* sand gold — accents/dots (deepened for contrast) */
  --gold-warm: #F4C95D;    /* sunlit sand */
  --sea: #2E9CC4;          /* ocean blue */
  --sea-deep: #1E7A9C;     /* deep ocean */
  --seafoam: #4FB89F;      /* seafoam green */
  --coral: #FF7A5C;        /* coral */
  --rose: #FF7A5C;         /* coral (legacy alias) */
  --line: rgba(20, 51, 63, 0.10);
  --card-bg: rgba(255, 255, 255, 0.92);
  --card-border: rgba(20, 51, 63, 0.08);
  --shadow-sm: 0 1px 3px rgba(20, 51, 63, 0.05);
  --shadow: 0 6px 24px rgba(20, 51, 63, 0.09);
  --shadow-lg: 0 20px 60px rgba(20, 51, 63, 0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Visible keyboard focus (a11y) — only on keyboard nav, not mouse clicks.
   Inputs zero out their outline in their own rules, so give them a ring too. */
:focus-visible {
  outline: 2px solid var(--sea);
  outline-offset: 2px;
  border-radius: 4px;
}
.chat-input-row input:focus-visible,
.share-form input:focus-visible,
.share-form textarea:focus-visible,
.planner-controls input:focus-visible {
  outline: 2px solid var(--sea);
  outline-offset: 1px;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Soft sky → sea-mist wash for a bright beach-day feel */
  background: linear-gradient(180deg, #E8F5F8 0%, var(--paper) 22%, var(--paper) 100%) fixed;
}
body {
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--ink);
  background: transparent;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  line-height: 1.5;
  /* Keep Fraunces from defaulting to its wonky low-opsz "Text" forms (curly
     J, curled lowercase j, flared fi) — use its calm high-opsz "Display"
     forms everywhere instead. Fraunces' opsz axis runs backwards from most
     variable fonts' intuition: LOW opsz is the quirky/traditional-flourish
     end, HIGH opsz (144, its max) is the clean/restrained end — verified by
     actually instancing the variable font and rendering both extremes side
     by side (a prior fix pinned opsz LOW assuming the opposite, which is why
     it never visually worked). This only covers pages that load style.css
     (home + the /fw-* single-event pages); the guide pages and /advertise
     have their own separate inline <style> blocks in server.js with the
     same fix applied there directly (see those files' body{} rules) — this
     was the gap that made the wonky j look "fixed" on some pages and not
     others. */
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 144;
}

/* ═══ WEATHER FX ═════════════════════════════════════════════════════════════ */

/* Rain layer — fixed, full viewport */
.rain-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2s ease;
}
.rain-layer.active { opacity: 1; }

@keyframes raindrop-fall {
  0% { transform: translateY(-30px); opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translateY(110vh); opacity: 0; }
}
.raindrop {
  position: absolute;
  top: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(180,210,235,0.55));
  border-radius: 1px;
  animation: raindrop-fall linear infinite;
}
body.wx-heavy .raindrop { background: linear-gradient(transparent, rgba(160,195,225,0.75)); }



/* Fog over webcam */
.fog-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 4s ease;
  background: radial-gradient(ellipse 120% 80% at 50% 60%,
    rgba(230,235,240,0.55) 0%,
    rgba(220,228,235,0.3) 50%,
    transparent 100%);
}
@keyframes fog-drift {
  0%, 100% { opacity: 0.45; transform: translateX(0) scale(1); }
  33%       { opacity: 0.7;  transform: translateX(2%) scale(1.02); }
  66%       { opacity: 0.5;  transform: translateX(-1%) scale(0.99); }
}
.fog-layer.active {
  animation: fog-drift 12s ease-in-out infinite;
  opacity: 0.45;
}

/* Sandbar at low tide */
.sandbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 38px;
  background: linear-gradient(transparent, rgba(190,155,80,0.55));
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding-bottom: 6px;
  transform: translateY(100%);
  transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.sandbar.visible { transform: translateY(0); }
.sandbar-creature { font-size: 18px; }
.sandbar-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Wind drift on condition cards */
@keyframes wind-drift {
  0%, 100% { transform: translateX(0); }
  25%  { transform: translateX(-3px) rotate(-0.3deg); }
  75%  { transform: translateX(3px) rotate(0.3deg); }
}
body.wx-windy .cond-card { animation: wind-drift 4s ease-in-out infinite; }
body.wx-windy .cond-card:nth-child(2) { animation-delay: -0.8s; }
body.wx-windy .cond-card:nth-child(3) { animation-delay: -1.6s; }
body.wx-windy .cond-card:nth-child(4) { animation-delay: -0.4s; }

/* ─── Blotter map ─────────────────────────────────────────────────────────── */
.blotter-map-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  padding: 28px clamp(24px, 4vw, 72px) 32px;
  border-top: 1px solid var(--line);
  background: rgba(20,36,47,0.025);
}
.blotter-map-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.35;
  margin-bottom: 14px;
}
.blotter-hood-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.blotter-hood {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  flex: 1;
  min-width: 130px;
  transition: background 0.3s;
}
.blotter-hood--quiet {
  background: rgba(20,36,47,0.03);
  border-color: rgba(20,36,47,0.06);
}
.blotter-hood--low, .blotter-hood--mid, .blotter-hood--high {
  background: rgba(20,36,47,0.05);
  border-color: rgba(20,36,47,0.1);
}
.blotter-hood-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: background 0.3s, box-shadow 0.3s;
}
.blotter-hood--quiet .blotter-hood-dot {
  background: transparent;
  border: 1.5px solid rgba(42,136,152,0.35);
}
.blotter-hood--low .blotter-hood-dot {
  background: rgba(184,133,58,0.65);
  box-shadow: 0 0 0 3px rgba(184,133,58,0.12);
}
.blotter-hood--mid .blotter-hood-dot {
  background: rgba(208,128,48,0.85);
  box-shadow: 0 0 0 3px rgba(208,128,48,0.15);
}
.blotter-hood--high .blotter-hood-dot {
  background: #C07060;
  box-shadow: 0 0 0 3px rgba(192,112,96,0.2), 0 0 8px rgba(192,112,96,0.28);
  animation: hood-pulse 2s ease-in-out infinite;
}
@keyframes hood-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(192,112,96,0.2), 0 0 6px rgba(192,112,96,0.22); }
  50%       { box-shadow: 0 0 0 5px rgba(192,112,96,0.1), 0 0 12px rgba(192,112,96,0.32); }
}
.blotter-hood-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.blotter-hood-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
  line-height: 1.2;
}
.blotter-hood-count {
  font-size: 10px;
  color: var(--ink);
  opacity: 0.35;
  line-height: 1.2;
}
.blotter-hood--low .blotter-hood-count,
.blotter-hood--mid .blotter-hood-count,
.blotter-hood--high .blotter-hood-count {
  opacity: 0.55;
  font-weight: 500;
}
@media (max-width: 600px) {
  .blotter-hood { min-width: calc(50% - 5px); }
}

/* Time-of-day background — only visible behind bento section */
.sky-gradient {
  position: fixed;
  inset: 0;
  z-index: -1;
  transition: background 4s ease;
  pointer-events: none;
}
.time-dawn    .sky-gradient { background: linear-gradient(180deg, #4a3a6b 0%, #d77e7a 35%, #f5c89b 65%, #F7F2E8 100%); }
.time-morning .sky-gradient { background: linear-gradient(180deg, #c5dcec 0%, #e8eef0 50%, #F7F2E8 100%); }
.time-day     .sky-gradient { background: linear-gradient(180deg, #b8d4e3 0%, #e3ebec 45%, #F7F2E8 100%); }
.time-golden  .sky-gradient { background: linear-gradient(180deg, #5a3a4a 0%, #d96a47 30%, #f0a868 55%, #F7F2E8 100%); }
.time-dusk    .sky-gradient { background: linear-gradient(180deg, #1a2540 0%, #5a3a6b 30%, #d96a47 55%, #f0c89b 100%); }
.time-night   .sky-gradient { background: linear-gradient(180deg, #0a1428 0%, #1a2540 50%, #2e3a52 100%); }

/* ═══ MASTHEAD ═══════════════════════════════════════════════════════════════ */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: white;
  transition: background 0.3s, backdrop-filter 0.3s, padding 0.2s, color 0.3s;
}
.masthead.scrolled {
  background: rgba(247, 242, 232, 0.93);
  backdrop-filter: blur(14px);
  padding: 12px 32px;
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s;
}
.masthead.scrolled .brand-mark {
  background: var(--ink);
  color: var(--paper);
  border-color: transparent;
}

.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-name {
  font-family: 'Fraunces', serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand-dot { color: var(--gold); margin: 0 2px; }
.brand-sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.ask-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}
.ask-pill:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}
.masthead.scrolled .ask-pill {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.ask-icon { color: var(--gold-warm); font-size: 15px; }
.ask-text { font-weight: 500; }

/* Sound button */
.sound-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.sound-btn:hover { background: rgba(255,255,255,0.22); color: white; }
.sound-btn.active { background: rgba(200,151,58,0.25); border-color: rgba(200,151,58,0.5); color: var(--gold-warm); }
.sound-btn.active .sound-wave { animation: wave-pulse 1.2s ease-in-out infinite; }
.sound-wave-2 { animation-delay: 0.2s; }
@keyframes wave-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.masthead.scrolled .sound-btn { border-color: var(--line); color: var(--ink-soft); background: transparent; }
.masthead.scrolled .sound-btn.active { background: rgba(200,151,58,0.1); color: var(--gold); }
.ask-kbd {
  background: rgba(255, 255, 255, 0.15);
  padding: 3px 9px;
  border-radius: 14px;
  font-size: 11px;
  font-family: monospace;
}
.masthead.scrolled .ask-kbd { background: rgba(255, 255, 255, 0.15); }

/* ═══ HERO ═══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  width: 100%;
  overflow: hidden;
  background: #0E2330;
}

/* Fallback behind the cam iframe: if the livestream doesn't load/play, the
   hero shows the time-of-day sky gradient instead of flat navy. Same gradients
   the page background uses; the hero's dark overlays keep the text legible. */
body.time-dawn    .hero { background: linear-gradient(180deg, #4a3a6b 0%, #d77e7a 35%, #f5c89b 65%, #F7F2E8 100%); }
body.time-morning .hero { background: linear-gradient(180deg, #c5dcec 0%, #e8eef0 50%, #F7F2E8 100%); }
body.time-day     .hero { background: linear-gradient(180deg, #b8d4e3 0%, #e3ebec 45%, #F7F2E8 100%); }
body.time-golden  .hero { background: linear-gradient(180deg, #5a3a4a 0%, #d96a47 30%, #f0a868 55%, #F7F2E8 100%); }
body.time-dusk    .hero { background: linear-gradient(180deg, #1a2540 0%, #5a3a6b 30%, #d96a47 55%, #f0c89b 100%); }
body.time-night   .hero { background: linear-gradient(180deg, #0a1428 0%, #1a2540 50%, #2e3a52 100%); }

.hero-cam {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-cam iframe {
  /* Oversize so the iframe always covers the viewport regardless of aspect ratio */
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(177.78vh, 100vw);  /* 16:9 by viewport height OR full width */
  height: max(56.25vw, 100vh);  /* 16:9 by viewport width OR full height */
  transform: translate(-50%, -50%) scale(1.02);
  border: 0;
  pointer-events: none;  /* don't capture clicks; cam is ambient */
}
/* Refreshing still-image cam (e.g. WHOI/MVCO) — cover the hero like the iframe. */
.hero-cam-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}


.hero-gradient-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(14, 35, 48, 0.6) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}
.hero-gradient-bottom {
  position: absolute;
  bottom: -80px; left: 0; right: 0;
  height: 75%;
  background: linear-gradient(0deg, rgba(14, 35, 48, 0.94) 0%, rgba(14, 35, 48, 0.82) 28%, rgba(14,35,48,0.45) 60%, rgba(14,35,48,0.12) 82%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.hero-content {
  position: absolute;
  bottom: 96px; /* clear the absolutely-positioned scroll cue below */
  left: 0; right: 0;
  z-index: 3;
  padding: 0 32px;
  color: white;
  max-width: 1280px;
  margin: 0 auto;
}

.hero-text { margin-bottom: 32px; }
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(14, 35, 48, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
  padding: 5px 12px 5px 9px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}
.live-dot {
  width: 7px;
  height: 7px;
  background: #ff4444;
  border-radius: 50%;
  animation: livePulse 1.6s infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.6); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 7px rgba(255, 68, 68, 0); }
}

.hero-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin-bottom: 14px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 400;
  letter-spacing: 0.005em;
  max-width: 540px;
}
.hero-credit {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.hero-credit:hover { color: #fff; border-bottom-color: #fff; }

/* Cam switcher — built from a town's cams[] when it has 2+; sits in the hero
   content flow, just above the title, so it never overlaps the headline. */
.cam-toggle {
  display: flex;
  width: fit-content;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  border-radius: 22px;
  background: rgba(10, 18, 30, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 100%;
}
.cam-btn {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  border: none;
  padding: 7px 13px;
  border-radius: 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.cam-btn:hover { color: #fff; }
.cam-btn.active { background: rgba(255, 255, 255, 0.92); color: var(--ink); }
.hero-vibe-line {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(14px, 1.8vw, 18px);
  color: rgba(255,255,255,0.78);
  margin-top: 14px;
  max-width: 520px;
  line-height: 1.5;
  text-shadow: 0 1px 10px rgba(0,0,0,0.3);
  min-height: 1.5em;
}

/* Golden hour banner */
.golden-banner {
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(200,151,58,0.18);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(200,151,58,0.35);
  border-radius: 24px;
  padding: 7px 16px;
  color: #f0d080;
  font-size: 13px;
  font-weight: 500;
  margin-top: 18px;
  width: fit-content;
}
.golden-banner.visible { display: flex; }
.golden-banner-icon { font-size: 16px; animation: golden-pulse 2s ease-in-out infinite; }
@keyframes golden-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.golden-banner-link { opacity: 0.65; font-size: 12px; }

/* Golden hour body pulse */
.golden-approaching .masthead:not(.scrolled) {
  background: rgba(200,100,20,0.08);
}
.golden-approaching .sky-gradient {
  transition: background 60s ease;
}

/* Condition card hover whisper tooltip */
.cond-card { position: relative; }
.cond-card[data-aside]:hover::after {
  content: attr(data-aside);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(10, 18, 30, 0.82);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.88);
  font-size: 10.5px;
  font-style: italic;
  font-family: 'Fraunces', serif;
  padding: 5px 12px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 10;
  animation: whisperIn 0.2s ease;
}
@keyframes whisperIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* On touch devices a tap sticks the :hover state, so the no-wrap whisper
   spills across neighboring cards — only show it where real hover exists. */
@media (hover: none) {
  .cond-card[data-aside]:hover::after { content: none; }
}

/* Glass condition strip */
.condition-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 10px;
  max-width: 1020px;
}

/* Wind card spans 2 rows, compass layout */
.cond-card--wind {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}
.wind-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  margin: 4px 0 6px;
}
.wind-compass {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
/* The SVG ships with white strokes for a dark card; these cards are light
   glass, so recolor the ring, ticks, needle tail and hub to dark ink. */
.wind-compass circle { stroke: rgba(20, 36, 47, 0.18); }
.wind-compass line   { stroke: rgba(20, 36, 47, 0.32); }
.wind-compass text   { fill:   rgba(20, 36, 47, 0.62); }
#wind-needle line    { stroke: rgba(20, 36, 47, 0.30); }
#wind-needle circle  { fill:   rgba(20, 36, 47, 0.45); }
.wind-text { flex: 1; }
.wind-context {
  margin-top: 2px;
  font-style: italic;
  opacity: 0.8;
}

/* Aurora card — glows green when active */
#aurora-card.aurora-active {
  background: rgba(80, 200, 120, 0.15);
  border-color: rgba(80, 200, 120, 0.4);
}
#aurora-card.aurora-active .cond-value { color: #6AEEA0; }
@keyframes aurora-pulse {
  0%, 100% { border-color: rgba(80,200,120,0.4); }
  50% { border-color: rgba(80,200,120,0.8); box-shadow: 0 0 12px rgba(80,200,120,0.2); }
}
#aurora-card.aurora-active { animation: aurora-pulse 2.5s ease-in-out infinite; }
.cond-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  padding: 14px 18px;
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(20, 51, 63, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.cond-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px;
}
.cond-value {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 2px;
}
.cond-detail {
  font-size: 12px;
  opacity: 0.75;
  line-height: 1.35;
}

/* ─── Condition card urgency states ─────────────────────────────────────────── */
@keyframes urgent-pulse {
  0%, 100% { border-color: rgba(255,255,255,0.14); }
  50% { border-color: rgba(200,151,58,0.7); box-shadow: 0 0 0 1px rgba(200,151,58,0.25); }
}
.cond-card.cond-urgent {
  animation: urgent-pulse 1.6s ease-in-out infinite;
}
.cond-card.cond-urgent .cond-value {
  color: #C0801A;
}
.cond-card.cond-golden {
  background: rgba(242, 201, 93, 0.35);
  border-color: rgba(216, 146, 90, 0.45);
}
.cond-card.cond-golden .cond-value {
  color: #2E1600;
}

/* ─── Hyperlocal intel strip ─────────────────────────────────────────────────── */
.intel-strip {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 12px;
  max-width: 840px;
}
.intel-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
}
.intel-text {
  font-size: 12.5px;
  color: rgba(255,255,255,0.68);
  font-style: italic;
  font-family: 'Fraunces', serif;
  opacity: 0;
  transition: opacity 0.4s ease;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.intel-text.intel-visible { opacity: 1; }

.scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 3;
  animation: scrollNudge 2.4s ease-in-out infinite;
}
@keyframes scrollNudge {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.65; }
  50%      { transform: translateX(-50%) translateY(4px); opacity: 1; }
}

/* ─── Gossip toasts ────────────────────────────────────────────────────────── */
.gossip-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  background: rgba(14, 24, 38, 0.88);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 13px 20px 13px 15px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 290px;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
}
.gossip-toast.visible { opacity: 1; transform: translateY(0) scale(1); }
.gossip-icon { font-size: 17px; flex-shrink: 0; line-height: 1.5; }
.gossip-text {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

/* ─── Seagull ─────────────────────────────────────────────────────────────── */
.seagull {
  position: absolute;
  top: 20%;
  left: 0;
  z-index: 4;
  pointer-events: none;
  animation: gull-fly var(--dur, 12s) linear forwards;
}
@keyframes gull-fly {
  0%   { transform: translate(-80px, 0px);    opacity: 0; }
  4%   { opacity: 0.85; }
  22%  { transform: translate(22vw, -22px); }
  48%  { transform: translate(48vw,  10px); }
  72%  { transform: translate(72vw, -14px); }
  96%  { opacity: 0.85; }
  100% { transform: translate(calc(100vw + 80px), 4px); opacity: 0; }
}

/* ─── Logo Easter egg burst ───────────────────────────────────────────────── */
.burst-emoji {
  position: fixed;
  bottom: 16px;
  font-size: 26px;
  z-index: 300;
  pointer-events: none;
  animation: burst-up 2.4s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes burst-up {
  0%   { transform: translateY(0) rotate(0deg) scale(0.4); opacity: 1; }
  70%  { opacity: 0.9; }
  100% { transform: translateY(-75vh) rotate(var(--rot, 180deg)) scale(1.1); opacity: 0; }
}

/* ═══ EDITORIAL LAYOUT ══════════════════════════════════════════════════════ */
.ed-main { display: block; }

.ed-section {
  border-top: 1px solid var(--line);
  position: relative;
}

.ed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px clamp(24px, 4vw, 72px) 16px;
  flex-wrap: wrap;
}

.ed-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(20, 51, 63, 0.5);
  opacity: 1;
}

.ed-fresh {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(20, 51, 63, 0.38);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ed-fresh::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: ed-fresh-pulse 2.4s ease-out infinite;
}

@keyframes ed-fresh-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  70%  { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.ed-range {
  margin-left: 6px;
  color: var(--sea-deep);
  font-weight: 800;
}

.ed-meta {
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.4;
  font-style: italic;
}

/* ─── Today's Falmouth banner ────────────────────────────────────────────── */
.today-banner {
  background: linear-gradient(120deg, #EAF6FC 0%, #E3F3EE 100%);
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 72px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.today-inner { max-width: 900px; }
.today-eyebrow {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sea-deep);
  margin-bottom: 18px;
  opacity: 1;
}
.today-line {
  font-family: 'Fraunces', serif;
  font-size: clamp(24px, 3.5vw, 42px);
  font-weight: 400;
  line-height: 1.22;
  color: var(--ink);
  letter-spacing: -0.01em;
  min-height: 1.22em;
  transition: opacity 0.4s ease;
}
.today-line.loading { opacity: 0.3; }
.today-date {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.6;
  margin-top: 16px;
  letter-spacing: 0.04em;
}

/* ─── Morning Brief — the daily check-in (4–10am only) ─────────────────────── */
.morning-brief {
  /* soft sunrise: warm gold/coral easing into sea mist */
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #FFF1DD 0%, #FFE3D6 42%, #EAF6FC 100%);
  padding: clamp(18px, 3vw, 34px) clamp(24px, 4vw, 72px);
  border-bottom: 1px solid var(--line);
}
/* Dawn animation — plays once on first load only (JS adds .mb-dawn). The sky
   itself warms up (a cool pre-dawn wash dissolves away) while a warm glow
   rises behind the card, so it reads as the sky changing, not just a light
   appearing in front of a static background. */
.morning-brief::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -46%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 201, 93, 0.39) 0%, rgba(255, 167, 90, 0.18) 45%, transparent 72%);
  transform: translate(-50%, 0) scale(1);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
/* Cool pre-dawn wash — same gradient shape/angle as the base sky, just a
   cooler blue-gray palette. Sits on top of the base gradient and dissolves
   away on .mb-dawn, revealing today's warm sky underneath. */
.morning-brief::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #E4ECF1 0%, #D9E5EC 42%, #EAF4F6 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.morning-brief.mb-dawn { animation: mbSkyIn 1.3s ease-out both; }
.morning-brief.mb-dawn::before { animation: mbSunrise 1.8s cubic-bezier(.22,.9,.32,1) both; animation-delay: .05s; }
.morning-brief.mb-dawn::after { animation: mbSkyWarm 1.7s ease-out both; }
@keyframes mbSkyIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mbSunrise {
  0%   { opacity: 0;    transform: translate(-50%, 34%) scale(0.6); }
  60%  { opacity: 0.6; }
  100% { opacity: 0.35; transform: translate(-50%, 0) scale(1); }
}
@keyframes mbSkyWarm {
  0%   { opacity: 1; }
  65%  { opacity: 0.4; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .morning-brief.mb-dawn { animation: none; }
  .morning-brief.mb-dawn::before { animation: none; }
  .morning-brief.mb-dawn::after { animation: none; }
}
.mb-inner { position: relative; z-index: 1; max-width: 900px; padding-bottom: 22px; }
.mb-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
}
.mb-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral);
}
.mb-date {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  opacity: 0.7;
}
.mb-headline {
  font-family: 'Fraunces', serif;
  font-size: clamp(19px, 2.4vw, 27px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 7px;
}
.mb-greeting {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(13.5px, 1.5vw, 15.5px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.mb-verdict {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}
.mb-score {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  background: var(--seafoam);
  box-shadow: 0 4px 14px rgba(20, 51, 63, 0.14);
}
.mb-score[data-tone="high"] { background: var(--seafoam); }
.mb-score[data-tone="mid"]  { background: var(--gold); }
.mb-score[data-tone="low"]  { background: #8aa0a8; }
.mb-verdict-text { display: flex; flex-direction: column; gap: 4px; }
.mb-label {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mb-detail {
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0.85;
}
.mb-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mb-hl {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.mb-hl-icon { flex: none; font-size: 14px; line-height: 1.55; }

/* Good-morning tap-back — quiet, bottom-right, easy to miss on purpose. A tiny
   ritual for regulars: tap it, the sun pops, and two staggered rings ripple
   outward and dissolve — like the greeting radiating out into the ether.
   One tap per visitor per day, resets daily (see app.js/server.js). */
.mb-gm {
  position: absolute;
  right: clamp(16px, 3vw, 28px);
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.25s ease, transform 0.2s ease, background 0.25s ease;
}
.mb-gm:hover { opacity: 0.95; transform: translateY(-1px); }
.mb-gm:active { transform: translateY(0) scale(0.96); }
.mb-gm-label { white-space: nowrap; }
.mb-gm-icon { display: inline-block; font-size: 12.5px; }
.mb-gm-count { font-variant-numeric: tabular-nums; min-width: 0.6ch; opacity: 0.85; }
/* Two rings (::before + ::after), staggered — the second bigger, fainter, and
   slower, so it reads as one greeting rippling outward and dissolving. */
.mb-gm::before, .mb-gm::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 167, 90, 0.6);
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}
.mb-gm.pop .mb-gm-icon { animation: mbGmPop 0.55s cubic-bezier(.34,1.7,.64,1); }
.mb-gm.pop::before { animation: mbGmRing1 0.9s ease-out; }
.mb-gm.pop::after  { animation: mbGmRing2 1.5s ease-out 0.15s; }
@keyframes mbGmPop {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.45) rotate(-14deg); }
  65%  { transform: scale(0.92) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes mbGmRing1 {
  0%   { opacity: 0.65; transform: scale(0.85); }
  100% { opacity: 0;    transform: scale(1.9); }
}
@keyframes mbGmRing2 {
  0%   { opacity: 0.4;  transform: scale(0.9); }
  100% { opacity: 0;    transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
  .mb-gm.pop .mb-gm-icon, .mb-gm.pop::before, .mb-gm.pop::after { animation: none; }
}

/* ─── Plan your visit — AI itinerary ──────────────────────────────────────── */
/* Section content must supply its own horizontal padding — .ed-section has none
   (each .ed-head does). Match the eyebrow's padding and cap widths so the
   control cluster reads tidy instead of sprawling full-bleed. */
.planner { padding-bottom: clamp(28px, 5vw, 48px); }
.planner-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px clamp(24px, 4vw, 72px) 0;
}
.planner-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.planner-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  min-width: 42px;
}
.planner-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.plan-chip {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.plan-chip:hover { border-color: var(--sea); color: var(--ink); }
.plan-chip.active { background: var(--sea); border-color: var(--sea); color: #fff; }
.planner-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; max-width: 560px; }
.planner-actions input {
  flex: 1;
  min-width: 200px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  padding: 11px 16px;
  border: 1.5px solid var(--line);
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
  outline: none;
}
.plan-build {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 22px;
  border: none;
  border-radius: 22px;
  background: var(--coral);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s, opacity 0.15s;
}
.plan-build:hover { filter: brightness(1.05); }
.plan-build:disabled { opacity: 0.6; cursor: default; }
.planner-result { display: none; padding: 22px clamp(24px, 4vw, 72px) 0; max-width: 820px; }
.planner-result.open { display: block; }
.plan-loading { color: var(--ink-soft); font-size: 14px; font-style: italic; }
.plan-day {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 6px 0 12px;
}
.plan-stops {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-stops li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
}
.plan-stops li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--seafoam);
}
.plan-tip {
  font-size: 13.5px;
  color: var(--ink-soft);
  background: var(--paper-warm);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 4px;
}

/* ─── What to do when it's ___ — weather-led, between Beaches & This Week ──── */
.ed-condition {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 4vw, 44px) 0 clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* base wash — overridden per data-theme below */
  background: linear-gradient(120deg, #EAF6FC 0%, var(--paper) 60%, var(--paper) 100%);
  transition: background 0.6s ease;
}
.ed-condition[data-theme="rain"] { background: linear-gradient(120deg, #E4ECF1 0%, #D9E5EC 45%, var(--paper) 100%); }
.ed-condition[data-theme="sun"]  { background: linear-gradient(120deg, #FFF1DD 0%, #FFE3D6 42%, #EAF6FC 100%); }
.ed-condition[data-theme="calm"] { background: linear-gradient(120deg, #DDF3EA 0%, #C3E8D8 45%, var(--paper) 100%); }
.ed-condition[data-theme="warm"] { background: linear-gradient(120deg, #FDEDE6 0%, #FBE1D6 45%, var(--paper) 100%); }
.ed-condition[data-theme="coast"]{ background: linear-gradient(120deg, #E8F5F8 0%, #DCEEF3 45%, var(--paper) 100%); }
.cp-inner { position: relative; z-index: 1; padding: 0 clamp(24px, 4vw, 72px); max-width: 760px; }
/* Themed glow accent — plays once when the section scrolls into view. */
.cp-fx {
  position: absolute; top: -12%; right: -6%;
  width: clamp(220px, 30vw, 420px); height: clamp(220px, 30vw, 420px);
  border-radius: 50%;
  opacity: 0; transform: scale(0.7);
  pointer-events: none; z-index: 0;
}
.ed-condition[data-theme="rain"]  .cp-fx { background: radial-gradient(circle, rgba(120,160,190,0.30), transparent 70%); }
.ed-condition[data-theme="sun"]   .cp-fx { background: radial-gradient(circle, rgba(255,201,93,0.38), transparent 70%); }
.ed-condition[data-theme="calm"]  .cp-fx { background: radial-gradient(circle, rgba(79,184,159,0.36), transparent 70%); }
.ed-condition[data-theme="warm"]  .cp-fx { background: radial-gradient(circle, rgba(255,140,110,0.30), transparent 70%); }
.ed-condition[data-theme="coast"] .cp-fx { background: radial-gradient(circle, rgba(46,156,196,0.26), transparent 70%); }
.ed-condition.cp-reveal .cp-fx { animation: cpFxIn 1.6s cubic-bezier(.22,.9,.32,1) both; }
@keyframes cpFxIn {
  0%   { opacity: 0;   transform: scale(0.7); }
  55%  { opacity: 0.9; }
  100% { opacity: 1;   transform: scale(1); }
}
.ed-condition.cp-no-motion .cp-fx { opacity: 1; transform: scale(1); }
/* Top row: stamp badge + heading, side by side */
.cp-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.cp-stamp {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 12px; margin-top: 2px;
  background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(255, 255, 255, 0.85);
  outline: 1.5px dashed rgba(20, 51, 63, 0.16); outline-offset: -5px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 16px rgba(20, 51, 63, 0.08);
}
.cp-stamp-temp { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 17px; color: var(--ink); line-height: 1; }
.cp-stamp-icon { font-size: 13px; margin-top: 3px; line-height: 1; }
.cp-heading { flex: 1; min-width: 0; }
.cp-headline {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(21px, 3.4vw, 30px); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink); margin: 4px 0 6px;
}
.cp-mood {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(14px, 1.6vw, 16px); color: var(--ink-soft);
  margin: 0; max-width: 46ch;
}
body.time-night .cp-headline, body.time-dusk .cp-headline { color: rgba(230,222,205,0.95); }
body.time-night .cp-stamp, body.time-dusk .cp-stamp { background: rgba(20,40,54,0.5); border-color: rgba(255,255,255,0.14); }
body.time-night .cp-stamp-temp, body.time-dusk .cp-stamp-temp { color: rgba(230,222,205,0.95); }

/* Card row — simple, flat, side by side. One is picked per day (rain → the
   rainy card, gorgeous → the beach card, otherwise a daily rotation); tapping
   any card swaps it in. No fan, no rotation — just a clean row. */
.cp-deck {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 6px 0 26px;
}
.cp-card {
  flex: 1 1 74px; min-width: 68px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 13px 6px 11px;
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(20, 51, 63, 0.06);
  cursor: pointer; font-family: 'Inter', sans-serif;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.cp-card-icon { font-size: clamp(19px, 2.6vw, 23px); line-height: 1; }
.cp-card-label { font-size: 11px; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.02em; }
.cp-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(20, 51, 63, 0.10); }
.cp-card.is-active {
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(214, 158, 46, 0.55);
  box-shadow: 0 8px 18px rgba(20, 51, 63, 0.11);
}
.cp-card.is-active .cp-card-label { color: var(--ink); }
body.time-night .cp-card { background: rgba(20,40,54,0.5); border-color: rgba(255,255,255,0.14); }
body.time-night .cp-card-label { color: rgba(200,215,225,0.8); }
body.time-night .cp-card.is-active { background: rgba(20,40,54,0.75); border-color: rgba(232,180,74,0.6); }
body.time-night .cp-card.is-active .cp-card-label { color: #fff; }

/* The single confident pick — today's answer, not a list. */
.cp-pick { margin: 0 0 4px; }
.cp-pick-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: #C99A3E; border-radius: 999px; padding: 3px 10px; margin-bottom: 10px;
}
.cp-pick-text {
  font-family: 'Fraunces', serif; font-size: clamp(17px, 2.4vw, 21px); line-height: 1.45;
  color: var(--ink); margin: 0;
}
body.time-night .cp-pick-text, body.time-dusk .cp-pick-text { color: rgba(230,222,205,0.95); }
/* A real one-off happening today — supplements the evergreen pick above. */
.cp-event { font-size: 13.5px; color: var(--ink-soft); margin: 10px 0 0; }
.cp-event a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid currentColor; }
.cp-event a:hover { color: var(--ink); }
body.time-night .cp-event, body.time-dusk .cp-event { color: rgba(200,215,225,0.75); }
.dp-body { max-width: 680px; }
.dp-loading { color: var(--ink-soft); font-size: 14px; font-style: italic; }
/* New content (a fresh pick after switching category) fades/rises in instead
   of snapping into place — slow and soft, barely a drift. */
.cp-fade-in { opacity: 0; animation: cpFadeIn 0.6s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes cpFadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cp-fade-in { opacity: 1; animation: none; } }
/* Subtle editorial motion: stops fade in one after another. */
.dp-plan .plan-stops li { opacity: 0; animation: dpStopIn 0.45s ease forwards; }
.dp-plan .plan-stops li:nth-child(1) { animation-delay: 0.05s; }
.dp-plan .plan-stops li:nth-child(2) { animation-delay: 0.16s; }
.dp-plan .plan-stops li:nth-child(3) { animation-delay: 0.27s; }
.dp-plan .plan-stops li:nth-child(4) { animation-delay: 0.38s; }
.dp-plan .plan-tip { opacity: 0; animation: dpStopIn 0.45s ease 0.5s forwards; }
@keyframes dpStopIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dp-plan .plan-stops li, .dp-plan .plan-tip { animation: none; opacity: 1; }
  .ed-condition.cp-reveal .cp-fx { animation: none; opacity: 1; transform: scale(1); }
}
/* Rotating daily aside — one curated local intel tip, changes each day. */
.dp-flourish {
  font-family: 'Fraunces', serif; font-style: italic; font-size: 13.5px;
  color: var(--ink-soft); margin: 14px 0 0; opacity: 0.85;
}
/* Link from the live plan to its evergreen guide page. */
.dp-guide-link {
  display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600;
  color: #B8842E; text-decoration: none;
}
.dp-guide-link:hover { text-decoration: underline; }
/* Visual-forward on desktop: bigger glow/stamp, roomier card deck and type. */
@media (min-width: 900px) {
  .ed-condition { padding: clamp(36px, 5vw, 56px) 0 clamp(44px, 5vw, 64px); }
  .cp-inner { max-width: min(58vw, 980px); }
  .cp-fx { width: clamp(320px, 24vw, 480px); height: clamp(320px, 24vw, 480px); top: -18%; right: -4%; }
  .cp-mood { font-size: 17px; }
  .cp-stamp { width: 68px; height: 68px; border-radius: 14px; }
  .cp-stamp-temp { font-size: 20px; }
  .cp-stamp-icon { font-size: 15px; }
  .cp-card-label { font-size: 11.5px; }
}

/* ─── Beaches ────────────────────────────────────────────────────────────── */
.ed-beaches .beach-row {
  display: flex;
  flex-wrap: wrap;           /* wrap to a 2nd row when a town has many beaches */
  gap: 12px;
  padding: 0 clamp(24px, 4vw, 72px) clamp(28px, 3vw, 48px);
  scrollbar-width: none;
}
.ed-beaches .beach-row::-webkit-scrollbar { display: none; }

.beach-card {
  border-radius: 14px;
  min-height: 200px;
  flex: 0 0 clamp(220px, 26vw, 320px);
  padding: 20px 22px 18px;
  cursor: default;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.beach-card:hover { filter: brightness(1.04); transform: translateY(-2px); }
.beach-card:hover .beach-card-temp { transform: scale(1.04); }
.beach-card-temp { transition: transform 0.2s ease; }

/* "Best beach right now" pick — a confident one-liner above the beach row */
.beach-pick {
  margin: 0 clamp(24px, 4vw, 72px) 14px;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px;
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.4;
}
.beach-pick-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--coral); border-radius: 999px; padding: 3px 10px;
}
.beach-pick-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; color: var(--ink); }
.beach-pick-why { color: var(--ink-soft); }
body.time-night .beach-pick-name, body.time-dusk .beach-pick-name { color: rgba(218,208,185,0.95); }
body.time-night .beach-pick-why,  body.time-dusk .beach-pick-why  { color: rgba(150,175,200,0.75); }

/* Frosted-glass beach cards (high specificity so it wins) + share the row width
   so all beaches stay on one row on desktop, scroll on mobile. */
.ed-beaches .beach-row .beach-card {
  flex: 1 1 clamp(180px, 19%, 280px);  /* ~5 per row on desktop → 2 rows for 8-10 beaches; grows to fill for fewer */
  max-width: 280px;  /* caps how far flex-grow can stretch a lone leftover card on the last row (e.g. 6 beaches = 5 + 1) */
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 12px 30px rgba(20, 51, 63, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* Mobile: horizontal swipe with readable card widths (placed AFTER the base
   rule above so it wins — equal specificity is decided by source order). */
@media (max-width: 600px) {
  .ed-beaches .beach-row { flex-wrap: nowrap; overflow-x: auto; }
  .ed-beaches .beach-row .beach-card { flex: 0 0 clamp(200px, 72%, 260px); }
}

/* ─── Tonight ────────────────────────────────────────────────────────────── */
.ed-tonight { padding-bottom: 4px; }
.ed-tonight .vibe-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 0 clamp(24px, 4vw, 72px) clamp(24px, 3vw, 48px);
}
.ed-tonight .vibe-tile { border-radius: 14px; overflow: hidden; }
.vibe-constellation .constellation-star {
  font-size: 24px;
  margin-bottom: 8px;
}
.vibe-constellation .constellation-body { flex: none; width: 100%; }

/* ─── Open Now ───────────────────────────────────────────────────────────── */
.ed-open .ed-head { align-items: center; }
.ed-open .open-list {
  padding: 4px clamp(24px, 4vw, 72px) clamp(32px, 3vw, 56px);
  max-width: 860px;
}
.ed-open .open-filters { margin: 0; }

/* ─── Tides ──────────────────────────────────────────────────────────────── */
.ed-tides .tide-chart {
  display: block;
  width: 100%;
  height: 130px;
  overflow: visible;
}
.ed-tides .tide-extremes {
  padding: 10px clamp(24px, 4vw, 72px) clamp(32px, 3vw, 48px);
}
.ed-tides .tide-status { display: none; } /* moved into ed-head as ed-meta */

/* ─── Community ──────────────────────────────────────────────────────────── */
.ed-community {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ed-community .community-air {
  grid-column: 1 / -1;
  padding: 0 clamp(24px, 4vw, 72px) clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line);
  margin-top: 0;
}
.ed-community-col {
  padding-bottom: clamp(24px, 3vw, 40px);
  border-right: 1px solid var(--line);
}
.ed-community-col:last-of-type { border-right: none; }
.ed-community-col .community-list {
  padding: 0 clamp(24px, 4vw, 72px);
}

/* ─── Locals ─────────────────────────────────────────────────────────────── */
.ed-locals-head { align-items: center; }
.ed-locals .share-form {
  margin: 0 clamp(24px, 4vw, 72px) 20px;
  max-width: 680px;
}
.ed-locals .locals-feed {
  padding-top: 0;
}

/* Community board — sectioned layout */
.community-section {
  margin-bottom: 16px;
}
.community-section:last-of-type { margin-bottom: 0; }
.community-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.4;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.community-empty {
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.45;
  font-style: italic;
  padding: 2px 0 4px;
}

.community-list { display: flex; flex-direction: column; gap: 10px; }
.community-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.community-item:last-child { border-bottom: none; padding-bottom: 0; }
.community-item--link { cursor: pointer; }
.community-item--link:hover .community-title { text-decoration: underline; }
.community-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.community-body { flex: 1; min-width: 0; }
.community-title { font-size: 13px; font-weight: 600; }
.community-detail { font-size: 11px; color: var(--ink-soft); opacity: 0.75; margin-top: 1px; line-height: 1.45; }

/* In the air section */
.community-air {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.community-air-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 4px;
}
.community-air-text {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 680px;
}

/* TIDE */
.tide-status {
  font-family: 'Fraunces', serif;
  font-size: 42px;
  font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--sea-deep);
}
.tide-chart {
  width: 100%;
  height: 90px;
  display: block;
  overflow: visible;
}
.tide-extremes {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.tide-extremes span { display: inline-flex; align-items: center; gap: 5px; }
.tide-extremes b { font-weight: 600; color: var(--ink); }

/* BEACHES — mini scene cards */
.beach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.beach-card {
  border-radius: 14px;
  padding: 13px 13px 11px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 118px;
  cursor: default;
  transition: transform 0.18s ease;
}
.beach-card:hover { transform: translateY(-2px); }
.beach-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 40%);
  pointer-events: none;
}
.beach-card > * { position: relative; z-index: 1; }

.beach-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: auto;
}
.beach-card-vibe {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.beach-card-name {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 6px;
  margin-bottom: 10px;
}
.beach-card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.beach-card-temp {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.beach-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.beach-card-swim {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.beach-card-crowd {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.55);
  padding: 2px 7px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.parking-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.parking-dot.open { background: #4ade80; box-shadow: 0 0 0 2px rgba(74,222,128,0.3); }
.parking-dot.medium { background: #fbbf24; }
.parking-dot.full { background: #ef4444; }

/* EVENTS */
.open-list { display: flex; flex-direction: column; gap: 12px; }
.open-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.open-item:last-child { border-bottom: none; padding-bottom: 0; }

/* ── VIBE GRID ───────────────────────────────────────────────────────────── */
.vibe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  flex: 1;
}
.vibe-tile {
  border-radius: 18px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: default;
  min-height: 168px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 12px 30px rgba(20, 51, 63, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.vibe-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(20,51,63,0.13), inset 0 1px 0 rgba(255,255,255,0.8); }

/* Frosted-glass tiles tinted only in coral / ocean / seafoam — no top accent
   line. Translucent white + single-hue wash over the page's colored backdrop. */
.vibe-music    { background: linear-gradient(160deg, rgba(79,184,159,0.15), rgba(79,184,159,0.03)), rgba(255,255,255,0.5); }   /* seafoam */
.vibe-family   { background: linear-gradient(160deg, rgba(46,156,196,0.14), rgba(46,156,196,0.03)), rgba(255,255,255,0.5); }   /* ocean */
.vibe-arts     { background: linear-gradient(160deg, rgba(46,156,196,0.14), rgba(46,156,196,0.03)), rgba(255,255,255,0.5); }   /* ocean */
.vibe-market   { background: linear-gradient(160deg, rgba(79,184,159,0.15), rgba(79,184,159,0.03)), rgba(255,255,255,0.5); }   /* seafoam */
.vibe-outdoors { background: linear-gradient(160deg, rgba(79,184,159,0.15), rgba(79,184,159,0.03)), rgba(255,255,255,0.5); }   /* seafoam */
.vibe-community,
.vibe-event    { background: linear-gradient(160deg, rgba(255,122,92,0.14), rgba(255,122,92,0.03)), rgba(255,255,255,0.5); }   /* coral */
.vibe-bar      { background: linear-gradient(160deg, rgba(255,122,92,0.14), rgba(255,122,92,0.03)), rgba(255,255,255,0.5); }   /* coral */

/* Watermark icon in corner */
.vibe-music::after     { content: '♩'; }
.vibe-family::after    { content: '◉'; }
.vibe-bar::after       { content: '▲'; }
.vibe-arts::after      { content: '❖'; }
.vibe-market::after    { content: '◎'; }
.vibe-outdoors::after  { content: '▲'; }
.vibe-community::after,
.vibe-event::after     { content: '◆'; }
.vibe-music::after, .vibe-family::after, .vibe-bar::after, .vibe-arts::after,
.vibe-market::after, .vibe-outdoors::after, .vibe-community::after, .vibe-event::after {
  position: absolute;
  right: -4px; bottom: -10px;
  font-size: 78px;
  color: #14333F;
  opacity: 0.06;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

/* Lift content above watermark */
.vibe-tile > * { position: relative; z-index: 1; }

/* Clickable tiles → link to the event's source detail page */
a.vibe-tile { text-decoration: none; color: inherit; }
.vibe-tile.has-link { cursor: pointer; }
.vibe-tile.has-link:hover { box-shadow: var(--shadow); }
.vibe-tile .vibe-go {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.vibe-tile.has-link:hover .vibe-go { opacity: 1; }

.vibe-icon {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 4px;
}
.vibe-music    .vibe-icon { color: #2E8E76; }  /* seafoam */
.vibe-family   .vibe-icon { color: #1E7292; }  /* ocean */
.vibe-bar      .vibe-icon { color: #D2503C; }  /* coral */
.vibe-arts     .vibe-icon { color: #1E7292; }  /* ocean */
.vibe-market   .vibe-icon { color: #2E8E76; }  /* seafoam */
.vibe-outdoors .vibe-icon { color: #2E8E76; }  /* seafoam */
.vibe-community .vibe-icon,
.vibe-event    .vibe-icon { color: #D2503C; }  /* coral */

.vibe-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vibe-music    .vibe-label { color: #2A8670; }  /* seafoam */
.vibe-family   .vibe-label { color: #1E6E8C; }  /* ocean */
.vibe-bar      .vibe-label { color: #C84A38; }  /* coral */
.vibe-arts     .vibe-label { color: #1E6E8C; }  /* ocean */
.vibe-market   .vibe-label { color: #2A8670; }  /* seafoam */
.vibe-outdoors .vibe-label { color: #2A8670; }  /* seafoam */
.vibe-community .vibe-label,
.vibe-event    .vibe-label { color: #D2553A; }  /* coral */

.vibe-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin-top: auto;
  padding-top: 10px;
}
.vibe-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 5px;
  letter-spacing: 0.01em;
}
.vibe-detail {
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.85;
  line-height: 1.45;
  margin-top: 5px;
}

/* Dated events show a plain time; ongoing/recurring ones get a pill so they
   read as "a standing thing", not a one-off. */
.vibe-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(20,51,63,0.07);
  color: var(--ink-soft);
  border: 1px solid rgba(20,51,63,0.12);
}

.vibe-empty {
  grid-column: 1 / -1;
  padding: 30px clamp(24px, 4vw, 72px);
  color: var(--ink-soft);
  font-size: 13px;
  font-style: italic;
}

/* Events filter chips — same shape as Open Now */
.events-filters {
  padding: 0 clamp(24px, 4vw, 72px);
  margin: -2px 0 14px;
  flex-wrap: wrap;
}


/* OPEN NOW */
.open-note {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 0 clamp(24px, 4vw, 72px) 14px;
}
/* "Opens soon" rows read as upcoming, not currently open */
.open-item--soon { opacity: 0.62; }
.open-item--soon .open-dot { background: #f0a868; }
.open-dot {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
  animation: openPulse 2.4s ease-in-out infinite;
}
@keyframes openPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
}
.open-item[data-audience="dinner"] { box-shadow: inset 3px 0 0 rgba(184,133,58,0.5); padding-left: 10px; }
.open-item[data-audience="drinks"] { box-shadow: inset 3px 0 0 rgba(192,112,96,0.5); padding-left: 10px; }
.open-item[data-audience="family"] { box-shadow: inset 3px 0 0 rgba(42,136,152,0.5); padding-left: 10px; }
.open-info { flex: 1; }
.open-info strong {
  font-family: 'Fraunces', serif;
  font-size: 15.5px;
  font-weight: 600;
  display: block;
  letter-spacing: -0.01em;
}
.open-info span { font-size: 11px; color: var(--ink-soft); opacity: 0.8; }
.open-name-link {
  font-family: 'Fraunces', serif;
  font-size: 15.5px;
  font-weight: 600;
  display: block;
  letter-spacing: -0.01em;
  color: inherit;
  text-decoration: none;
}
.open-name-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.open-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.open-closes { font-size: 11px; color: var(--ink-soft); white-space: nowrap; font-weight: 500; }
.open-audience {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
}
.open-audience--coffee { background: rgba(120,85,60,0.12);  color: #6B4A2E; }
.open-audience--lunch  { background: rgba(110,150,70,0.14);  color: #4C7020; }
.open-audience--dinner { background: rgba(184,133,58,0.12); color: #8A6018; }
.open-audience--drinks { background: rgba(192,112,96,0.12); color: #A04030; }
.open-audience--family { background: rgba(42,136,152,0.12); color: #1A7080; }
.open-empty { font-size: 12px; color: var(--ink-soft); opacity: 0.5; text-align: center; padding: 16px 0; }

/* Open now filter chips */
.open-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.open-filter {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s ease;
}
.open-filter:hover { border-color: var(--ink); color: var(--ink); }
.open-filter.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* LOCALS */
/* ─── Post of the Day — illustrated ─────────────────────────────────────────── */
.daily-local {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0;
  padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 72px);
  background: var(--paper-warm);
  border-bottom: 1px solid var(--line);
}
.daily-local-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.daily-local-quote {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 2.8vw, 34px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  max-width: 680px;
  margin-bottom: 14px;
}
.daily-local-handle {
  font-size: 12px;
  color: var(--ink);
  opacity: 0.38;
  font-weight: 500;
}
.daily-local-art {
  width: clamp(180px, 22vw, 300px);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.daily-local-art.loaded { opacity: 1; }
.daily-local-art svg {
  width: 100%;
  height: auto;
}

/* ─── Locals feed — text-first bulletin board ─────────────────────────────── */
.locals-feed {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.local-post {
  padding: 22px clamp(24px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s;
}
.local-post:nth-child(even) { border-right: none; }
.local-post:hover { background: rgba(20, 36, 47, 0.03); }
.local-post-cat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.local-post-cat--reddit { color: var(--sea); }
.local-post-cat--shared { color: var(--rose); }
.local-post-body {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.local-post-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.local-post-handle {
  font-size: 11px;
  color: var(--ink);
  opacity: 0.38;
  font-weight: 500;
}
.local-post-score {
  font-size: 10px;
  font-weight: 600;
  color: var(--gold);
  opacity: 0.7;
  letter-spacing: 0.02em;
}

/* Cape chatter indicator (locals header) */
.ed-locals-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.chatter-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.5;
}
.chatter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sea);
  flex-shrink: 0;
}
.chatter-dot--hot {
  background: var(--rose);
  animation: openPulse 2.2s ease-in-out infinite;
}
body.time-night .chatter-meta,
body.time-dusk  .chatter-meta { color: rgba(140,168,195,0.6); opacity: 1; }

/* Locals card header + share form */
.locals-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.locals-header .card-eyebrow { margin-bottom: 0; }

.share-btn {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.share-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.share-form {
  display: none;
  background: rgba(20,36,47,0.03);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
  flex-direction: column;
  gap: 8px;
}
.share-form.open { display: flex; }
.share-form input,
.share-form textarea {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: white;
  outline: none;
  resize: none;
  transition: border-color 0.15s;
  color: var(--ink);
  line-height: 1.5;
}
.share-form input:focus, .share-form textarea:focus { border-color: var(--ink); }
.share-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.share-chars {
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.5;
  flex: 1;
  transition: color 0.15s;
}
.share-cancel {
  font-size: 12px;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.share-cancel:hover { border-color: var(--ink); color: var(--ink); }
.share-submit {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 20px;
  border: none;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  white-space: nowrap;
}
.share-submit:hover { background: var(--sea-deep); }
.share-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Police blotter ────────────────────────────────────────────────────────── */
.ed-community { grid-template-columns: 1fr 1fr 1fr; }
.ed-community.no-blotter { grid-template-columns: 1fr 1fr; }
.ed-blotter-col { background: rgba(20,36,47,0.02); }
.blotter-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 clamp(24px, 4vw, 72px) clamp(24px, 3vw, 40px);
}
.blotter-entry { display: flex; flex-direction: column; gap: 2px; }
.blotter-time {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.4;
}
.blotter-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  border-left: 2px solid var(--line);
  padding-left: 10px;
  margin: 0;
}

/* ─── Drama ticker ───────────────────────────────────────────────────────────── */
.drama-ticker {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--ink);
  color: var(--paper);
  height: 36px;
  overflow: hidden;
  position: relative;
}
.ticker-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--ink);
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.ticker-track {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
}
.ticker-inner {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  padding-left: 100%;
  animation: ticker-scroll 55s linear infinite;
  color: rgba(245,239,227,0.85);
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* cam narrator toast variant */
.cam-toast .gossip-icon { filter: grayscale(0); }

/* ─── Gerald the Seagull ──────────────────────────────────────────────────── */
.seagull-gerald { z-index: 5; }
.gerald-label {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200,151,58,0.75);
  white-space: nowrap;
  pointer-events: none;
}
.gerald-bubble {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  z-index: 202;
  background: rgba(14, 24, 38, 0.9);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(200,151,58,0.3);
  border-radius: 28px;
  padding: 10px 20px 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34,1.4,0.64,1);
  pointer-events: none;
  max-width: 420px;
}
.gerald-bubble.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.gerald-bubble-name {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200,151,58,0.85);
  white-space: nowrap;
  flex-shrink: 0;
}
.gerald-bubble-text {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(245,239,227,0.88);
  line-height: 1.45;
}

/* ─── Dot from Teaticket ──────────────────────────────────────────────────── */
.dot-toast {
  background: rgba(245,239,227,0.96) !important;
  border-color: rgba(200,151,58,0.18) !important;
}
.dot-toast .gossip-text {
  color: var(--ink);
}
.dot-attribution {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3px;
}

/* ─── The Tide Oracle ─────────────────────────────────────────────────────── */
.tide-oracle {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 201;
  background: rgba(8,14,26,0.93);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(200,151,58,0.4);
  border-radius: 16px;
  padding: 18px 28px 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34,1.2,0.64,1);
  pointer-events: none;
  max-width: 480px;
}
.tide-oracle.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tide-oracle-icon { font-size: 30px; flex-shrink: 0; }
.tide-oracle-name {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(200,151,58,0.75);
  margin-bottom: 5px;
}
.tide-oracle-text {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14.5px;
  color: rgba(245,239,227,0.9);
  line-height: 1.5;
}

/* ─── The Parking Vigilante ───────────────────────────────────────────────── */
.parking-vigilante {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 150;
  background: rgba(245,239,227,0.94);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(20,36,47,0.09);
  border-radius: 14px;
  padding: 11px 15px;
  max-width: 210px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  cursor: default;
  box-shadow: 0 4px 20px rgba(20,36,47,0.08);
}
.parking-vigilante.visible { opacity: 1; transform: translateY(0); }
.pv-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.pv-dot {
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  animation: openPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.pv-badge {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.pv-text {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.5;
  transition: opacity 0.4s ease;
}

/* ═══ FOOTER ═══════════════════════════════════════════════════════════════ */
/* ─── Island map ────────────────────────────────────────────────────────────── */
.island-map-wrap {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
  text-align: center;
}
.island-map-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 12px 26px rgba(20, 51, 63, 0.12));
}
/* Two calm tones: down-island (ocean) vs up-island (seafoam), soft white coast. */
.mv-town { stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.5px; stroke-linejoin: round; transition: fill 0.2s ease; }
.mv-town--down { fill: rgba(46, 156, 196, 0.18); }
.mv-town--up   { fill: rgba(79, 184, 159, 0.20); }
/* Single-tone island (one town, e.g. Nantucket): no internal borders so the
   ZIP-boundary polygons read as one seamless landmass. */
.mv-town--island { fill: rgba(46, 156, 196, 0.16); stroke: none; }
.mv-town-label {
  font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 500;
  fill: var(--ink); text-anchor: middle; letter-spacing: 0.015em;
  paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 3px;
}
.mv-ferry-core { fill: var(--coral); stroke: #fff; stroke-width: 2px; }
.mv-ferry-ring { fill: none; stroke: var(--coral); stroke-width: 2px; }
.mv-ferry-glyph { font-size: 17px; text-anchor: middle; paint-order: stroke; stroke: rgba(255,255,255,0.9); stroke-width: 2.5px; }
/* Live "next boat" callout, anchored at the ferry landing (Vineyard Haven). */
.mv-boat-time {
  font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 600;
  fill: var(--coral); text-anchor: middle; letter-spacing: 0.01em;
  paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 3px;
}
.mv-boat-status {
  font-family: 'Fraunces', Georgia, serif; font-size: 14px; font-weight: 500;
  fill: var(--ink-soft); text-anchor: middle; letter-spacing: 0.01em;
  paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 2.5px;
}
body.time-night .mv-boat-status, body.time-dusk .mv-boat-status { fill: rgba(160,180,200,0.9); stroke: rgba(14,35,48,0.55); }
/* Live "next boat" pill, floated over the map's top-right. */
.island-map-live {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 auto 16px;
  font-family: 'Fraunces', Georgia, serif; font-size: 14px; font-weight: 500; letter-spacing: 0.015em; color: var(--ink);
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 8px 20px rgba(20, 51, 63, 0.08);
}
.island-map-live .live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--coral);
  box-shadow: 0 0 0 0 rgba(255, 122, 92, 0.6); animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 122, 92, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 122, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 122, 92, 0); }
}
.island-map-note {
  max-width: 560px; margin: 12px auto 0; padding: 0 clamp(16px, 3vw, 40px);
  font-size: 12px; color: var(--ink-soft); opacity: 0.75; font-style: italic; line-height: 1.45; text-align: center;
}
body.time-night .mv-town-label, body.time-dusk .mv-town-label { fill: rgba(230,222,205,0.95); stroke: rgba(14,35,48,0.55); }
body.time-night .island-map-live, body.time-dusk .island-map-live { background: rgba(20,40,54,0.55); border-color: rgba(255,255,255,0.14); color: rgba(230,222,205,0.95); }

/* ─── Road closures ─────────────────────────────────────────────────────────── */
.ed-closures { padding-bottom: clamp(24px, 3vw, 48px); }
.closures-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 0 clamp(24px, 4vw, 72px);
}
.closure-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(150deg, rgba(46,156,196,0.10), rgba(46,156,196,0.03)), rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 8px 22px rgba(20, 51, 63, 0.07), inset 0 1px 0 rgba(255,255,255,0.7);
  color: inherit; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.closure-row:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(20, 51, 63, 0.11), inset 0 1px 0 rgba(255,255,255,0.7); }
.closure-map { font-size: 11px; font-weight: 500; color: var(--coral); letter-spacing: 0.02em; white-space: nowrap; }
/* Full road closures get a coral emphasis (the urgent ones). */
.closure-row.closure--8 {
  background: linear-gradient(150deg, rgba(255,122,92,0.14), rgba(255,122,92,0.04)), rgba(255,255,255,0.55);
}
.closure-icon { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.closure-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.closure-where { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.closure-kind { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.closures-note, .closures-empty {
  font-size: 11px; color: var(--ink-soft); opacity: 0.75;
  padding: 12px clamp(24px, 4vw, 72px) 0; line-height: 1.45; font-style: italic;
}
.closures-empty { font-style: normal; opacity: 0.85; }
body.time-night .closure-where, body.time-dusk .closure-where { color: rgba(218,208,185,0.95); }

.footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0.6;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-tag { font-size: 11px; opacity: 0.7; }
.footer-disclaimer { font-size: 11px; opacity: 0.6; font-style: italic; margin-top: 2px; }
.blotter-source { font-size: 10px; opacity: 0.55; font-style: italic; margin-top: 8px; line-height: 1.4; }
.footer-links { font-size: 11px; opacity: 0.7; margin-top: 2px; }
.footer-links a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.footer-credit { font-size: 11px; opacity: 0.8; margin-top: 2px; }
.footer-credit a { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.footer-credit a:hover { opacity: 0.7; }
.footer-cta { font-size: 11px; opacity: 0.55; margin-top: 2px; }
.footer-cta a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.footer-cta a:hover { opacity: 0.75; }

/* ═══ CHAT MODAL ═══════════════════════════════════════════════════════════ */
.chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 36, 47, 0.4);
  backdrop-filter: blur(10px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.chat-overlay.open { opacity: 1; pointer-events: all; }

.chat-modal {
  background: var(--paper);
  border-radius: 24px;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateY(30px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chat-overlay.open .chat-modal { transform: translateY(0) scale(1); }

.chat-header {
  padding: 22px 26px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.chat-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.chat-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.chat-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(20,36,47,0.06);
  font-size: 22px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
}
.chat-close:hover { background: rgba(20,36,47,0.1); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100px;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(20,36,47,0.15); border-radius: 2px; }

.msg { display: flex; max-width: 88%; }
.msg.user { align-self: flex-end; }
.msg.bot { align-self: flex-start; }
.msg-bubble { padding: 11px 16px; border-radius: 18px; font-size: 14px; line-height: 1.55; }
.msg.user .msg-bubble { background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
.msg.bot .msg-bubble { background: rgba(20,36,47,0.06); color: var(--ink); border-bottom-left-radius: 4px; }
.msg.bot .msg-bubble strong { font-weight: 600; }

.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ink-soft);
  border-radius: 50%;
  margin: 0 2px;
  animation: typingBounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 26px;
  border-top: 1px solid var(--line);
}
.chat-suggestions button {
  background: rgba(20,36,47,0.04);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
}
.chat-suggestions button:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
}
#chat-input {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 18px;
  border: 1.5px solid var(--line);
  border-radius: 24px;
  background: white;
  outline: none;
  transition: border-color 0.15s;
}
#chat-input:focus { border-color: var(--ink); }
.chat-send {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-send:hover { background: var(--sea-deep); }
.chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══ NIGHTTIME MODE ══════════════════════════════════════════════════════ */
/*
  At night/dusk: sections flip to a dark ink palette with light text.
  The sky gradient already supplies the dark background — we just need
  sections to go transparent-to-dark and text to flip to cream/slate.
*/

.ed-main {
  background:
    radial-gradient(38% 26% at 8% 2%, rgba(255,122,92,0.10), transparent 60%),
    radial-gradient(40% 28% at 94% 10%, rgba(46,156,196,0.10), transparent 60%),
    radial-gradient(46% 34% at 50% 98%, rgba(79,184,159,0.10), transparent 60%),
    var(--paper);
}

body.time-night .ed-main,
body.time-dusk  .ed-main {
  background: #0b1826;
}

/* Section borders */
body.time-night .ed-section,
body.time-dusk  .ed-section {
  border-color: rgba(255,255,255,0.07);
}

/* Masthead scrolled — go dark at night */
body.time-night .masthead.scrolled,
body.time-dusk  .masthead.scrolled {
  background: rgba(11,24,38,0.94);
  color: rgba(220,210,185,0.9);
  box-shadow: 0 1px 0 rgba(255,255,255,0.07);
}
body.time-night .masthead.scrolled .brand-name,
body.time-dusk  .masthead.scrolled .brand-name { color: rgba(220,210,185,0.9); }
body.time-night .masthead.scrolled .brand-sub,
body.time-dusk  .masthead.scrolled .brand-sub   { opacity: 0.6; color: rgba(220,210,185,0.9); }
body.time-night .masthead.scrolled .brand-mark,
body.time-dusk  .masthead.scrolled .brand-mark {
  background: rgba(255,255,255,0.1);
  color: rgba(220,210,185,0.85);
}
body.time-night .masthead.scrolled .ask-pill,
body.time-dusk  .masthead.scrolled .ask-pill {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: rgba(220,210,185,0.85);
}
body.time-night .masthead.scrolled .sound-btn,
body.time-dusk  .masthead.scrolled .sound-btn {
  border-color: rgba(255,255,255,0.12);
  color: rgba(200,190,165,0.7);
}

/* Section labels */
body.time-night .ed-eyebrow,
body.time-dusk  .ed-eyebrow {
  color: rgba(180,158,110,0.6);
  opacity: 1;
}
body.time-night .ed-meta,
body.time-dusk  .ed-meta {
  color: rgba(140,170,195,0.55);
  opacity: 1;
}

/* ─── Tonight vibes: already dark, no change needed ────────────────────── */

/* ─── Open now ──────────────────────────────────────────────────────────── */
body.time-night .open-item,
body.time-dusk  .open-item { border-color: rgba(255,255,255,0.06); }
body.time-night .open-info strong,
body.time-night .open-name-link,
body.time-dusk  .open-info strong,
body.time-dusk  .open-name-link { color: rgba(218,208,185,0.9); }
body.time-night .open-info span,
body.time-night .open-closes,
body.time-dusk  .open-info span,
body.time-dusk  .open-closes { color: rgba(140,168,195,0.65); }
body.time-night .open-filter,
body.time-dusk  .open-filter {
  border-color: rgba(255,255,255,0.1);
  color: rgba(185,175,150,0.7);
}
body.time-night .open-filter.active,
body.time-dusk  .open-filter.active {
  background: rgba(200,151,58,0.25);
  border-color: rgba(200,151,58,0.4);
  color: var(--gold-warm);
}

/* ─── Tides ─────────────────────────────────────────────────────────────── */
body.time-night .tide-extremes,
body.time-dusk  .tide-extremes { color: rgba(140,168,195,0.65); }
body.time-night .tide-extremes b,
body.time-dusk  .tide-extremes b { color: rgba(218,208,185,0.8); }

/* ─── Community ─────────────────────────────────────────────────────────── */
body.time-night .community-title,
body.time-dusk  .community-title { color: rgba(218,208,185,0.88); }
body.time-night .community-detail,
body.time-dusk  .community-detail { color: rgba(140,168,195,0.65); }
body.time-night .community-item,
body.time-dusk  .community-item { border-color: rgba(255,255,255,0.06); }
body.time-night .community-section-label,
body.time-dusk  .community-section-label { color: rgba(140,168,195,0.5); opacity: 1; }
body.time-night .community-air-text,
body.time-dusk  .community-air-text { color: rgba(170,195,215,0.75); }
body.time-night .community-air-label,
body.time-dusk  .community-air-label { color: rgba(140,168,195,0.4); opacity: 1; }

/* Blotter */
body.time-night .blotter-time,
body.time-dusk  .blotter-time { color: rgba(170,150,100,0.45); opacity: 1; }
body.time-night .blotter-text,
body.time-dusk  .blotter-text {
  color: rgba(200,192,172,0.82);
  border-left-color: rgba(255,255,255,0.1);
}
body.time-night .blotter-map-wrap,
body.time-dusk  .blotter-map-wrap { background: rgba(0,0,0,0.12); }
body.time-night .blotter-map-label,
body.time-dusk  .blotter-map-label { color: rgba(180,160,110,0.45); opacity: 1; }
body.time-night .ed-community-col,
body.time-dusk  .ed-community-col { border-color: rgba(255,255,255,0.06); }
body.time-night .ed-blotter-col,
body.time-dusk  .ed-blotter-col { background: rgba(0,0,0,0.08); }

/* ─── Today banner: already dark ink, just nudge for night ──────────────── */
body.time-night .today-banner,
body.time-dusk  .today-banner {
  background: rgba(6,14,24,0.85);
  border-color: rgba(255,255,255,0.06);
}

/* ─── Daily local post ───────────────────────────────────────────────────── */
body.time-night .daily-local,
body.time-dusk  .daily-local {
  background: rgba(6,14,24,0.7);
  border-color: rgba(255,255,255,0.07);
}
body.time-night .daily-local-quote,
body.time-dusk  .daily-local-quote { color: rgba(218,208,185,0.88); }
body.time-night .daily-local-handle,
body.time-dusk  .daily-local-handle { color: rgba(140,168,195,0.38); opacity: 1; }

/* ─── Locals feed ───────────────────────────────────────────────────────── */
body.time-night .local-post,
body.time-dusk  .local-post {
  border-color: rgba(255,255,255,0.07);
}
body.time-night .local-post:nth-child(even),
body.time-dusk  .local-post:nth-child(even) { border-right: none; }
body.time-night .local-post:hover,
body.time-dusk  .local-post:hover { background: rgba(255,255,255,0.04); }
body.time-night .local-post-body,
body.time-dusk  .local-post-body { color: rgba(218,208,185,0.88); }
body.time-night .local-post-handle,
body.time-dusk  .local-post-handle { color: rgba(140,168,195,0.4); opacity: 1; }

/* Parking vigilante stays cream — it pops at night */
/* Dot toast stays cream — by design */

/* Footer */
body.time-night footer,
body.time-dusk  footer { color: rgba(140,168,195,0.45); }

/* ─── Drama ticker (already dark) ────────────────────────────────────────── */
/* No change needed */

/* ─── Cape Meter ─────────────────────────────────────────────────────────── */
/* ── MOMENT STRIP ───────────────────────────────────────────────────────── */
.moment-strip {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 14px clamp(24px, 4vw, 72px);
  background: #E9F5F3;
  border-bottom: 1px solid var(--line);
}
.moment-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C0801A;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}
.moment-tag.tag-swim    { color: #1E92A8; }
.moment-tag.tag-sunset  { color: #C0801A; }
.moment-tag.tag-rain    { color: #5A7585; }
.moment-tag.tag-fog     { color: #5A7585; }
.moment-tag.tag-wind    { color: #3E8E66; }
.moment-tag.tag-tide    { color: #1E92A8; }
.moment-tag.tag-evening { color: #8A52A0; }
.moment-tag.tag-morning { color: #B0860F; }
.moment-tag.tag-ferry   { color: #C06848; }
.moment-text {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.moment-headline {
  font-family: 'Fraunces', serif;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.moment-body {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}
@media (max-width: 700px) {
  .moment-strip { flex-direction: column; gap: 6px; }
  .moment-text  { flex-direction: column; gap: 4px; }

  /* Community board: stack the 3 columns instead of cramming them side-by-side */
  .ed-community { grid-template-columns: 1fr; }
  .ed-community-col {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .ed-community-col:last-of-type { border-bottom: none; }
}

.ed-cape-meter {
  background: linear-gradient(135deg, #EAF6F8 0%, #E2F2EE 60%, #EAF6F2 100%);
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.ed-cape-meter::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(46,156,196,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 30%, rgba(242,169,59,0.08) 0%, transparent 50%);
  pointer-events: none;
}

.cape-meter-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 72px);
  position: relative;
}

.cape-meter-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 36px;
}

.cape-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sea);
  opacity: 0.7;
  margin-bottom: 14px;
}

.cape-score-display {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.cape-score-num {
  font-family: 'Fraunces', serif;
  font-size: clamp(72px, 10vw, 112px);
  font-weight: 500;
  color: var(--ink);
  line-height: 0.85;
  letter-spacing: -0.04em;
  transition: opacity 0.4s ease;
}

.cape-score-num.loading { opacity: 0.25; }

.cape-score-den {
  font-family: 'Fraunces', serif;
  font-size: clamp(18px, 2.5vw, 26px);
  color: rgba(20,51,63,0.28);
  font-weight: 400;
  margin-bottom: 12px;
}

.cape-label {
  font-family: 'Fraunces', serif;
  font-size: clamp(17px, 2.5vw, 24px);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cape-context {
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.45;
}

/* Bridge indicators */
.cape-bridges {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 4px;
}

.cape-bridge {
  display: block;
  padding: 18px 24px 16px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--card-border);
  text-align: center;
  min-width: 110px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}

a.cape-bridge:hover { background: rgba(255,255,255,0.9); }

.cape-bridge:first-child { border-radius: 12px 0 0 12px; }
.cape-bridge:last-child  { border-radius: 0 12px 12px 0; }

.cape-bridge-name {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.cape-bridge-delay {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 5px;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.cape-bridge-delay.delay-light  { color: #C0801A; }
.cape-bridge-delay.delay-medium { color: #f97316; }
.cape-bridge-delay.delay-heavy  { color: #ef4444; }

.cape-bridge-sub {
  font-size: 10px;
  color: rgba(20,51,63,0.42);
  line-height: 1.4;
}

/* Gauge */
.cape-gauge-section { position: relative; }

.cape-gauge-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    #2A8898 0%,
    #4ade80 22%,
    #B8853A 45%,
    #f97316 70%,
    #ef4444 100%
  );
  margin-bottom: 10px;
  overflow: visible;
}

/* Dim overlay covers unfilled right portion (light wash so it mutes, not darkens) */
.cape-gauge-dim {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  background: rgba(234, 246, 244, 0.82);
  border-radius: 0 3px 3px 0;
  transition: width 1.2s cubic-bezier(0.34, 1, 0.64, 1);
}

.cape-gauge-thumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--sea-deep);
  transform: translate(-50%, -50%);
  transition: left 1.2s cubic-bezier(0.34, 1, 0.64, 1);
  box-shadow: 0 2px 8px rgba(20,51,63,0.28);
  z-index: 1;
}

.cape-gauge-zones {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(20,51,63,0.32);
  margin-top: 8px;
}

.cape-source {
  font-size: 9px;
  color: rgba(20,51,63,0.28);
  margin-top: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Night/dusk mode — already dark, just subtle adjustments */
body.time-night .ed-cape-meter,
body.time-dusk  .ed-cape-meter {
  border-color: rgba(255,255,255,0.05);
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .masthead { padding: 14px 16px; }
  .hero-content { padding: 0 16px; bottom: 72px; }
  .hero-title { font-size: clamp(36px, 11vw, 60px); }
  .condition-strip { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(4, 1fr); padding: 32px 16px; }
  .card-tide, .card-beaches, .card-events, .card-open, .card-community { grid-column: span 4; grid-row: span 2; }
  .locals-feed { grid-template-columns: 1fr; }
  .ask-text { display: none; }

  .cape-meter-top {
    flex-direction: column;
    gap: 24px;
  }
  .cape-bridges {
    align-self: stretch;
  }
  .cape-bridge {
    flex: 1;
    padding: 14px 16px;
  }
  .cape-gauge-zones {
    font-size: 7.5px;
  }
  .ed-tonight .vibe-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Event tiles were stuck at the base 3-col and never collapsed on phones */
  #events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile hero (placed AFTER the 900px block so it wins the cascade) ──────────
   No video on phones (the cam embed shows an un-autoplayable play button) — show
   the time-of-day gradient instead. The dashboard lives inside hero-content,
   normally bottom-anchored over a 100vh cam; let the hero grow and the content
   flow so nothing overlaps the nav. */
@media (max-width: 700px) {
  .hero { height: auto; min-height: 0; overflow: visible; position: relative; }

  .hero-cam,
  .cam-toggle,
  .scroll-cue,
  .fog-layer,
  .sandbar,
  .hero-gradient-top,
  .hero-gradient-bottom { display: none; }

  /* No scrim — each gradient stays dark at the TOP (headline) and BOTTOM
     (intel strip) for white-text legibility, with the vivid sky glow as a
     band in the middle. Like a real sky: bright at the horizon, darker above
     and over the water below. */
  .hero::after { display: none; }

  /* "body" prefix matches the specificity of the desktop fallback rule
     (body.time-day .hero, 0-2-1) above — without it, that higher-specificity
     desktop rule always wins here too, even inside this media query, leaving
     mobile with the pale flat gradient AND no scrim (stripped out above):
     washed-out, low-contrast hero text. Equal specificity + later in the
     file = this rule correctly wins on mobile. */
  body .hero.time-day     { background: linear-gradient(180deg, #0d2840 0%, #2f86ab 44%, #2f86ab 64%, #123347 100%); }
  body .hero.time-morning { background: linear-gradient(180deg, #0d2030 0%, #5fa8cf 44%, #5fa8cf 64%, #122f44 100%); }
  body .hero.time-dawn    { background: linear-gradient(180deg, #1a1030 0%, #d56b58 42%, #e08a64 64%, #241634 100%); }
  body .hero.time-golden  { background: linear-gradient(180deg, #1a0f20 0%, #cf5a30 40%, #e89048 62%, #2a1410 100%); }
  body .hero.time-dusk    { background: linear-gradient(180deg, #08091e 0%, #7a3a55 40%, #b56848 64%, #0c1126 100%); }
  body .hero.time-night   { background: linear-gradient(180deg, #02050d 0%, #0a1428 50%, #0c1830 100%); }

  .hero-content {
    position: relative;
    z-index: 2;
    bottom: auto;
    padding: 108px 16px 36px; /* top clears the fixed masthead */
  }

  /* The intel strip sits over the darker bottom band — give white text a
     shadow and a touch more opacity so it stays readable at every hour. */
  .intel-text {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  }
  .hero-sub { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }
}

/* ─── Touch-friendly tap targets (≥44px) on touch devices ─────────────────── */
@media (hover: none) and (max-width: 700px) {
  .sound-btn { width: 44px; height: 44px; }
  .ask-pill { padding: 11px 16px; }
  .chat-close { width: 40px; height: 40px; }
  .open-filter { padding: 9px 14px; }
}

/* ─── Small-phone tuning (≤420px) ─────────────────────────────────────────── */
@media (max-width: 420px) {
  .masthead { padding: 12px 14px; gap: 12px; }
  .brand { gap: 9px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-name { font-size: 19px; }
  .brand-sub { font-size: 10px; letter-spacing: 0.1em; }
}

/* ─── Fireworks page (/fireworks) ─────────────────────────────────────────── */
/* Seasonal ribbon on the homepage. Fixed above the masthead (z 50) so it stays
   clickable; the masthead is pushed down by its height via .has-fw-ribbon. */
.fw-ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 42px; box-sizing: border-box; padding: 0 14px;
  text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden;
  background: linear-gradient(90deg, #E0492E, #FF7A5C);
  color: #fff; font-family: 'Inter', sans-serif; font-size: 14px; letter-spacing: 0.01em;
  box-shadow: 0 2px 14px rgba(224, 73, 46, 0.32);
}
.fw-ribbon strong { font-weight: 600; }
.fw-ribbon:hover { filter: brightness(1.05); }
.has-fw-ribbon .masthead { top: 42px; }
@media (max-width: 600px) { .fw-ribbon-more { display: none; } }

/* ─── Day-trip callout ────────────────────────────────────────────────────── */
/* Homepage link to an itinerary-shaped guide (e.g. Nantucket's /day-trip) —
   evergreen, so an in-flow card rather than the fireworks ribbon's fixed bar. */
.daytrip-callout { padding: 20px clamp(24px, 4vw, 72px); }
.daytrip-callout-link {
  display: block; text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  padding: 20px 24px;
  box-shadow: 0 12px 30px rgba(20, 51, 63, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform .15s ease;
}
.daytrip-callout-link:hover { transform: translateY(-2px); }
.daytrip-callout-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--coral); border-radius: 999px; padding: 4px 12px; margin-bottom: 10px;
}
.daytrip-callout-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(19px, 3vw, 24px); margin: 0 0 6px; color: var(--ink); }
.daytrip-callout-sub { margin: 0; font-size: 14.5px; color: var(--ink-soft); }

/* ── Page shell ── */
.fw-page { background: var(--paper); color: var(--ink); }
.fw-page .masthead { position: sticky; top: 0; padding: 13px 20px;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); color: var(--ink); }
.fw-home { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--ink); text-decoration: none; }
.fw-home:hover { color: var(--coral); }

/* ── Full-bleed night-sky hero with the fireworks canvas ── */
.fw-hero {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  padding: clamp(44px, 8vw, 104px) 20px clamp(36px, 6vw, 80px);
  background: radial-gradient(130% 120% at 50% 0%, #16263d 0%, #0b1626 55%, #060b15 100%);
}
.fw-canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.95; }

/* ── Photo hero (Nantucket Race Week) ── a real photo instead of the plain
   dark gradient, with the same gradient laid over it as a dark scrim so the
   white hero text stays legible. Stacked backgrounds (gradient first, image
   second) let one background-position/-size pair serve both layers. */
.fw-hero--photo {
  background-image:
    linear-gradient(180deg, rgba(6,11,21,0.35) 0%, rgba(6,11,21,0.62) 55%, rgba(6,11,21,0.88) 100%),
    url('/race-week-hero.jpg');
  background-size: cover;
  background-position: center 60%;
}
.fw-photo-credit {
  position: relative; z-index: 1; margin: 18px 0 0; font-family: 'Inter', sans-serif;
  font-size: 11.5px; color: rgba(255,255,255,0.55);
}
.fw-photo-credit a { color: rgba(255,255,255,0.75); }

/* ── Ferris wheel (Barnstable County Fair hero) ── */
.fw-ferris { position: absolute; z-index: 0; pointer-events: none; opacity: 0.55; }
.fw-ferris-rim { animation: fw-ferris-spin 34s linear infinite; transform-origin: 100px 100px; }
@keyframes fw-ferris-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fw-ferris-rim { animation: none; } }
.fw-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.fw-eyebrow { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); margin: 0 0 14px; }
.fw-hero h1 { font-family: 'Fraunces', serif; font-weight: 600; line-height: 1.06;
  font-size: clamp(32px, 6.4vw, 62px); margin: 0 0 14px; color: #fff;
  text-shadow: 0 2px 40px rgba(0,0,0,0.4);
  /* Pin the calmest optical size + weight so big Fraunces stops using its
     wonky "Text"-end display forms (curly J, curled j, flared fi). Verified
     by actually instancing the variable font at opsz 9/38/90/144 and
     rendering "July" with each: opsz 9 (this selector's original value) has
     the MOST elaborate curl on the capital J, not the least — Fraunces'
     opsz axis runs backwards from the intuitive assumption. 144 (the font's
     documented max) is the genuinely calm end. This selector is MORE
     SPECIFIC than the body{} rule above, so it silently overrode that
     rule's opsz value this whole time — a body-level fix alone was never
     enough for this element. */
  font-optical-sizing: none; font-variation-settings: 'opsz' 144, 'wght' 600; }
.fw-sub { font-family: 'Inter', sans-serif; font-size: clamp(15px, 2.2vw, 19px);
  line-height: 1.5; color: #c6d2de; margin: 0 auto 6px; max-width: 640px; }
.fw-sub strong { color: #fff; }

/* ── Big countdown ── */
.fw-count { display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(12px, 4vw, 34px); margin: clamp(22px, 4vw, 38px) 0 10px; }
.fw-count-u { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.fw-count-n { font-family: 'Fraunces', serif; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; color: #fff;
  font-size: clamp(46px, 13vw, 104px); text-shadow: 0 2px 34px rgba(255,122,92,0.45); }
.fw-count-l { font-family: 'Inter', sans-serif; font-size: clamp(10px, 2.4vw, 13px);
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #93a4b8; margin-top: 10px; }
.fw-count-cap { font-family: 'Inter', sans-serif; font-size: 13px; color: #8090a4; margin: 4px 0 0; }

.fw-btn { display: inline-block; margin-top: 14px; text-decoration: none;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; color: #fff;
  background: var(--coral); padding: 12px 22px; border-radius: 12px; }
.fw-btn:hover { filter: brightness(1.06); }

/* ── Body content: full-width background, centred column, grids on desktop ── */
/* Soft coral/ocean/seafoam washes give the frosted panels something to refract. */
.fw-main {
  background:
    radial-gradient(42% 32% at 10% 4%, rgba(255,122,92,0.12), transparent 60%),
    radial-gradient(42% 32% at 92% 16%, rgba(46,156,196,0.12), transparent 60%),
    radial-gradient(52% 42% at 50% 102%, rgba(79,184,159,0.12), transparent 60%),
    var(--paper);
}
.fw-wrap { max-width: 1080px; margin: 0 auto; padding: clamp(22px, 4vw, 46px) 20px 76px; }

.fw-notice { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5;
  background: #FFF4E6; border: 1px solid var(--gold); border-radius: 12px;
  padding: 13px 16px; margin: 0 0 24px; color: #7a4a00; }
.fw-notice a { color: #7a4a00; }

.fw-unc { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: #9a6300;
  background: rgba(242, 169, 59, 0.18); border-radius: 6px; padding: 1px 6px;
  margin-left: 6px; vertical-align: middle; cursor: help; white-space: nowrap; }

.fw-essentials { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; margin: 0 0 clamp(24px, 4vw, 40px); }
.fw-card { background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.fw-card-wide { grid-column: 1 / -1; }
.fw-k { display: block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px; }
.fw-v { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; color: var(--ink); }

.fw-cols { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 3vw, 28px); }
.fw-sec { margin: 0 0 clamp(20px, 3vw, 28px); }
.fw-cols > .fw-sec { margin-bottom: 0; }
.fw-sec h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(21px, 2.6vw, 27px);
  color: var(--ink); margin: 0 0 12px; display: flex; align-items: center; }
.fw-ico { font-size: 0.85em; margin-right: 11px; line-height: 1; }

/* Frosted-glass panels — one per section, tinted only in coral / ocean /
   seafoam so the set stays calm. Translucent white over a soft colored wash
   on .fw-main gives the Apple-glass depth; no hard accent lines. */
.fw-panel {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  padding: clamp(20px, 2.8vw, 30px);
  box-shadow: 0 12px 34px rgba(20, 51, 63, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  height: 100%;
}
.fw-panel .fw-list li { border-bottom-color: rgba(20, 51, 63, 0.08); }
.fw-history p { margin: 0 0 14px; }
.fw-history p:last-child { margin-bottom: 0; }
.fw-watch   { background: linear-gradient(155deg, rgba(255,122,92,0.14), rgba(255,122,92,0.03)), rgba(255,255,255,0.5); }
.fw-parking { background: linear-gradient(155deg, rgba(46,156,196,0.14), rgba(46,156,196,0.03)), rgba(255,255,255,0.5); }
.fw-ferry   { background: linear-gradient(155deg, rgba(79,184,159,0.16), rgba(79,184,159,0.03)), rgba(255,255,255,0.5); }
.fw-weather { background: linear-gradient(155deg, rgba(255,122,92,0.14), rgba(255,122,92,0.03)), rgba(255,255,255,0.5); }
.fw-food    { background: linear-gradient(155deg, rgba(46,156,196,0.14), rgba(46,156,196,0.03)), rgba(255,255,255,0.5); }
.fw-h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: 0.02em; color: var(--sea-deep); margin: 16px 0 8px; }

/* Open-late hierarchy: "Walkable" is the featured pick (inset tinted block,
   serif heading, larger rows); "Elsewhere" is a quieter secondary list. */
.fw-walkable { background: rgba(46,156,196,0.10); border: 1px solid rgba(46,156,196,0.22);
  border-radius: 14px; padding: 4px 16px 8px; margin: 6px 0 4px; }
.fw-walkable .fw-list li { border-bottom-color: rgba(46,156,196,0.16); }
.fw-h3-lead { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 600;
  color: var(--ink); text-transform: none; letter-spacing: 0; margin: 8px 0 2px; }
.fw-pin { margin-right: 7px; }
.fw-list-lead li { font-size: 16.5px; padding: 11px 0; }
.fw-h3-sub { color: var(--ink-soft); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; margin: 22px 0 4px; }
.fw-list-sub li { padding: 8px 0; }
.fw-list-sub a { font-weight: 500; }
.fw-list-sub .fw-meta { opacity: 0.85; }

.fw-list { list-style: none; margin: 0; padding: 0; }
.fw-list li { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.5;
  color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--line); }
.fw-list li:last-child { border-bottom: none; }
/* A label (strong) immediately followed by detail text (.fw-meta) ran
   together on one line with no separator (e.g. "Thu, Aug 6Youth Opti
   Regatta") — stack them instead of relying on template-string whitespace
   that isn't always there. */
.fw-list li strong { display: block; margin-bottom: 3px; }
.fw-list a { color: var(--sea-deep); text-decoration: none; font-weight: 600; }
.fw-list a:hover { text-decoration: underline; }
.fw-meta { font-size: 13px; color: var(--ink-soft); font-weight: 400; }
.fw-note { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--ink-soft); margin: 0 0 8px; }
.fw-live { font-family: 'Inter', sans-serif; font-size: 16px; color: var(--ink); }
.fw-big { font-size: 18px; font-weight: 600; margin: 0 0 2px; }

.fw-source p { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.fw-source a { color: var(--sea-deep); }
.fw-foot { text-align: center; font-family: 'Inter', sans-serif; font-size: 13px;
  color: var(--ink-soft); padding: 24px; border-top: 1px solid var(--line); }
.fw-foot a { color: var(--sea-deep); text-decoration: none; }

@media (min-width: 760px) {
  .fw-cols { grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .fw-canvas { display: none; }
}

/* ─── Easter-egg shoutout (confetti + frosted toast) ──────────────────────── */
.egg-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9998; }
.egg-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px);
  max-width: min(92vw, 470px); z-index: 9999; opacity: 0;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 16px;
  box-shadow: 0 18px 40px rgba(20, 51, 63, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  padding: 14px 18px; color: var(--ink);
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.45; text-align: center;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.egg-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ─── Add to Home Screen prompt ─────────────────────────────────────────────
   Android/Chrome: real install via the captured beforeinstallprompt event.
   iOS Safari has no such API (Apple doesn't allow programmatic install
   prompts) — same banner shell, but with manual Share-sheet instructions and
   no action button beyond dismiss. */
.a2hs-banner {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 24px);
  width: min(94vw, 460px); z-index: 9999; opacity: 0;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 16px;
  box-shadow: 0 18px 40px rgba(20, 51, 63, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  padding: 14px 14px 14px 16px; color: var(--ink);
  font-family: 'Inter', sans-serif;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.a2hs-banner.show { opacity: 1; transform: translate(-50%, 0); }
.a2hs-icon { font-size: 26px; flex: 0 0 auto; line-height: 1; }
.a2hs-text { flex: 1 1 auto; margin: 0; font-size: 14px; line-height: 1.4; }
.a2hs-text strong { color: var(--coral, #FF7A5C); }
.a2hs-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.a2hs-install {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px; white-space: nowrap;
  color: #fff; background: var(--coral, #FF7A5C); border: none; border-radius: 999px;
  padding: 9px 16px; cursor: pointer; box-shadow: 0 4px 12px rgba(255, 122, 92, 0.35);
  transition: transform .15s ease;
}
.a2hs-install:hover { transform: translateY(-1px); }
.a2hs-dismiss {
  width: 30px; height: 30px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--ink-soft, #4A6B76); background: rgba(20, 51, 63, 0.06);
  border: none; border-radius: 50%; cursor: pointer; line-height: 1;
}
.a2hs-dismiss:hover { background: rgba(20, 51, 63, 0.12); }
@media (max-width: 420px) { .a2hs-text { font-size: 13px; } }

/* ─── Cam-less hero (towns without a verified live webcam) ─────────────────── */
.hero.no-cam .hero-cam,
.hero.no-cam .live-badge { display: none; }
.hero.no-cam {
  background: radial-gradient(130% 120% at 50% 0%, #1E7A9C 0%, #14333F 62%, #0B1B26 100%);
}