: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 auto-switching to its wonky display forms (curly j,
     flared fi) at large sizes — use its calmer text optical forms everywhere. */
  font-optical-sizing: none;
}

/* ═══ 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 */
}


.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;
}

/* 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 */
  background: linear-gradient(120deg, #FFF1DD 0%, #FFE3D6 42%, #EAF6FC 100%);
  padding: clamp(28px, 4.5vw, 56px) clamp(24px, 4vw, 72px);
  border-bottom: 1px solid var(--line);
}
.mb-inner { max-width: 900px; }
.mb-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}
.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-greeting {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 22px;
}
.mb-verdict {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.mb-score {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  font-family: 'Fraunces', serif;
  font-size: 26px;
  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: 3px; }
.mb-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mb-detail {
  font-size: 13px;
  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: 11px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
}
.mb-hl-icon { flex: none; font-size: 15px; line-height: 1.4; }

/* ─── 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;
}

/* ─── Beaches ────────────────────────────────────────────────────────────── */
.ed-beaches .beach-row {
  display: flex;
  gap: 12px;
  padding: 0 clamp(24px, 4vw, 72px) clamp(28px, 3vw, 48px);
  overflow-x: auto;
  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(168px, 18vw, 280px);
  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);
}

/* ─── 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 ═══════════════════════════════════════════════════════════════ */
.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; }

/* ═══ 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 {
  padding: 18px 24px 16px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--card-border);
  text-align: center;
  min-width: 110px;
}

.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; }

  .hero.time-day     { background: linear-gradient(180deg, #0d2840 0%, #2f86ab 44%, #2f86ab 64%, #123347 100%); }
  .hero.time-morning { background: linear-gradient(180deg, #0d2030 0%, #5fa8cf 44%, #5fa8cf 64%, #122f44 100%); }
  .hero.time-dawn    { background: linear-gradient(180deg, #1a1030 0%, #d56b58 42%, #e08a64 64%, #241634 100%); }
  .hero.time-golden  { background: linear-gradient(180deg, #1a0f20 0%, #cf5a30 40%, #e89048 62%, #2a1410 100%); }
  .hero.time-dusk    { background: linear-gradient(180deg, #08091e 0%, #7a3a55 40%, #b56848 64%, #0c1126 100%); }
  .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; } }

/* ── 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; }
.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 a calmer optical size + weight so big Fraunces stops using its wonky
     display forms (curly j, flared fi). */
  font-optical-sizing: none; font-variation-settings: 'opsz' 38, '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-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; }
.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); }

/* ─── 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%);
}