/* ===================================================================
   SHEARWATER COLLECTIVE — styles.css
   Unified stylesheet — all pages
   =================================================================== */

/* ── FONTS ──────────────────────────────────────────────────────── */
/* Self-hosted 2026-07-14 — was a Google Fonts @import, which serialized
   behind an extra DNS/CSS/font round-trip and left headline text (every
   H1 sitewide uses Fraunces) swapping fonts late, driving a 0.925 CLS
   score. Latin-subset variable files only, matching the weight/opsz
   range the @import requested (300-700). See decisions/log.md 2026-07-14. */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-VariableFont_opsz_wght.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/FrauncesVariable-Italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ── DESIGN TOKENS ──────────────────────────────────────────────── */
:root {
  --color-navy:          #0B1F3B;
  --color-coral:         #E07A5F;
  --color-sand:          #E8DDC9;
  --color-sea-glass:     #4FB6B2;
  --color-white:         #FFFFFF;

  --color-navy-900:      #0B1F3B;
  --color-navy-700:      #1E3A5F;
  --color-navy-500:      #3D5478;
  --color-navy-300:      #8094B4;
  --color-navy-100:      #E4EAF4;

  --color-coral-700:     #C96647;
  --color-coral-500:     #E07A5F;
  --color-coral-300:     #EDAA98;
  --color-coral-100:     #FAF0EC;
  /* Added 2026-07-14: coral fails WCAG AA as text on white/light (2.95:1,
     needs 4.5:1). Use this specifically wherever coral is TEXT on a light
     background — card tags, links, badges. Leave --color-coral-500/700 for
     backgrounds, fills, dots, dividers, and anything over a dark background
     (coral-500 on navy is already 5.59:1, no change needed there). See
     decisions/log.md 2026-07-14. */
  --color-coral-text:    #C04625;

  --color-sand-500:      #E8DDC9;
  --color-sand-300:      #F2EDE3;

  --color-sea-glass-700: #3A9E9A;
  --color-sea-glass-500: #4FB6B2;
  --color-sea-glass-100: #E3F5F5;
  /* Added 2026-07-14: same problem as coral, worse (2.42:1 vs white). Use for
     sea-glass TEXT on light backgrounds only. Leave 500/700 for fills, dots,
     and anything already on the dark navy background (weather widget, CTA
     band) where sea-glass-500 already passes at 6.81:1. */
  --color-sea-glass-text: #307371;

  --fg-primary:          var(--color-navy-900);
  --fg-secondary:        var(--color-navy-500);
  --fg-muted:            var(--color-navy-500);  /* was navy-300, failed text contrast at 3.08:1; see decisions/log.md 2026-07-14 */
  --fg-inverted:         var(--color-white);
  --fg-accent:           var(--color-coral-500);

  --bg-page:             var(--color-white);
  --bg-navy:             var(--color-navy-900);
  --bg-coral-tint:       var(--color-coral-100);

  --border-subtle:       rgba(11, 31, 59, 0.09);
  --border-default:      rgba(11, 31, 59, 0.20);

  --shadow-card:         0 2px 12px rgba(11, 31, 59, 0.08);
  --shadow-card-hover:   0 10px 36px rgba(11, 31, 59, 0.13);
  --shadow-nav:          0 1px 0 rgba(11, 31, 59, 0.09);

  --font-display:        'Fraunces', Georgia, serif;
  --font-body:           'Inter', system-ui, sans-serif;

  --radius-sm:           4px;
  --radius-md:           8px;
  --radius-lg:           12px;
  --radius-pill:         9999px;

  --transition-fast:     150ms ease;
  --transition-base:     200ms ease;
  --transition-slow:     400ms ease;

  --container-max:       1200px;
  --nav-height:          68px;
}

/* ── BASE ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

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

/* ── NAV ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 52px;
  transition: background 300ms, box-shadow 300ms;
}

/* Homepage nav starts transparent; all other pages start opaque */
.nav.nav-opaque,
.nav.scrolled {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-nav);
}

.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 36px; width: auto; }

.nav-links { display: flex; gap: 36px; align-items: center; }

.nav-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: color var(--transition-base);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}
.nav.nav-opaque .nav-link,
.nav.scrolled .nav-link { color: var(--color-navy-900); }
.nav-link:hover { color: var(--color-coral-text); border-bottom-color: var(--color-coral-500); }
.nav-link.active { color: var(--color-coral-text); border-bottom-color: var(--color-coral-500); }

.nav-right { display: flex; align-items: center; gap: 20px; }

.nav-instagram {
  display: flex;
  align-items: center;
  color: #fff;
  transition: color var(--transition-base);
  opacity: 0.8;
}
.nav.nav-opaque .nav-instagram,
.nav.scrolled .nav-instagram { color: var(--color-navy-900); }
.nav-instagram:hover { color: var(--color-coral-text); opacity: 1; }

.nav-cta {
  background: var(--color-coral-500);
  color: var(--color-navy-900);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition-base), transform 120ms;
}
.nav-cta:hover { background: var(--color-coral-700); color: var(--color-navy-900); }
.nav-cta:active { transform: scale(0.97); }

/* ── MOBILE NAV: HAMBURGER + OVERLAY ─────────────────────────────── */
.nav-hamburger {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  width: 30px;
  height: 22px;
  cursor: pointer;
  position: relative;
}
.nav-hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: top 240ms ease, transform 240ms ease, opacity 200ms ease, background 240ms ease;
}
.nav-hamburger span:nth-child(1) { top: 2px; }
.nav-hamburger span:nth-child(2) { top: 10px; }
.nav-hamburger span:nth-child(3) { top: 18px; }
.nav.nav-opaque .nav-hamburger span,
.nav.scrolled  .nav-hamburger span { background: var(--color-navy-900); }
.nav-hamburger.open span { background: #fff; }
.nav-hamburger.open span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-navy-900);
  display: flex;
  flex-direction: column;
  padding: 88px 32px 40px;
  transform: translateX(100%);
  transition: transform 280ms ease;
  visibility: hidden;
}
.mobile-menu.open {
  transform: translateX(0);
  visibility: visible;
}
.mobile-menu-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu-close:hover { color: var(--color-coral-text); }
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 8px;
}
.mobile-menu-links a {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #fff;
  text-decoration: none;
  transition: color 160ms ease;
}
.mobile-menu-links a:hover,
.mobile-menu-links a.active { color: var(--color-coral-text); }
.mobile-menu-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.mobile-menu-instagram {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 160ms ease;
}
.mobile-menu-instagram:hover { color: var(--color-coral-text); }
.mobile-menu-cta {
  display: inline-block;
  background: var(--color-coral-500);
  color: var(--color-navy-900);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background 160ms ease;
}
.mobile-menu-cta:hover { background: var(--color-coral-700); color: var(--color-navy-900); }
body.menu-open { overflow: hidden; }

/* ── HERO (homepage) ─────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(11,31,59,0.15) 0%,
      rgba(11,31,59,0.10) 30%,
      rgba(30,20,10,0.55) 65%,
      rgba(11,31,59,0.82) 100%
    ),
    linear-gradient(160deg,
      #E8A87C 0%, #E07A5F 18%, #C4614A 34%,
      #7A4A6E 52%, #2B3F6B 68%, #0B1F3B 100%
    );
  background-size: cover;
  background-position: center;
}

.hero-bg::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(to top, rgba(11,31,59,0.6) 0%, transparent 100%);
}

.hero-glow {
  position: absolute;
  top: 32%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%; height: 200px;
  background: radial-gradient(ellipse, rgba(232,168,124,0.35) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  padding: 0 52px 96px;
}

.hero-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 76px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 820px;
  margin-bottom: 24px;
  text-wrap: pretty;
}

.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  max-width: 520px;
  margin-bottom: 40px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-coral-500);
  color: var(--color-navy-900);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--transition-base), transform 120ms;
}
.hero-cta:hover { background: var(--color-coral-700); color: var(--color-navy-900); }
.hero-cta:active { transform: scale(0.97); }

.hero-scroll {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.45;
  animation: bobscroll 2.4s ease-in-out infinite;
}
.hero-scroll span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.hero-scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, #fff, transparent);
}
@keyframes bobscroll {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(5px); }
}

/* ── INTRO SECTION ───────────────────────────────────────────────── */
.intro {
  background: #fff;
  padding: 96px 52px;
}
.intro-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.intro-rule {
  width: 40px; height: 2px;
  background: var(--color-coral-500);
  border-radius: 1px;
  margin: 0 auto 36px;
}
.intro-text {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-navy-900);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.intro-text em {
  font-style: italic;
  color: var(--color-navy-500);
}

/* ── ARTICLES / CARDS GRID ───────────────────────────────────────── */
.articles {
  background: #fff;
  padding: 0 52px 104px;
}
.articles-header {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 48px;
}
.articles-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  color: var(--color-navy-900);
  letter-spacing: -0.01em;
}
.articles-all {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-coral-text);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color var(--transition-base);
}
.articles-all:hover { color: var(--color-coral-text); }
.articles-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* ── CARD ────────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 220ms ease, transform 220ms ease;
  cursor: pointer;
  display: block;
  text-decoration: none;
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.card-img {
  width: 100%; aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}
.card-img-inner {
  width: 100%; height: 100%;
  transition: transform 400ms ease;
  background-size: cover;
  background-position: center;
}
.card:hover .card-img-inner { transform: scale(1.03); }
.card-body { padding: 22px 24px 28px; }
.card-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-coral-text);
  margin-bottom: 12px;
}
.card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-navy-900);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.card-excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-navy-500);
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.card-meta {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-navy-500);
  letter-spacing: 0.03em;
}

/* ── PAGE HEADER (interior pages) ───────────────────────────────── */
.page-header {
  padding: 148px 52px 24px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.page-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sea-glass-text);
  margin-bottom: 18px;
}
.page-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-navy-900);
  margin-bottom: 24px;
}
.page-subhead {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-navy-500);
  max-width: 600px;
  text-wrap: pretty;
}
.header-rule {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 52px;
  border: none;
  border-top: 1px solid rgba(11,31,59,0.10);
}
.divider {
  max-width: var(--container-max);
  margin: 0 auto;
  height: 1px;
  background: var(--border-subtle);
  margin-bottom: 64px;
}

/* ── DESTINATIONS — REGION CARDS ─────────────────────────────────── */
.regions {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 52px 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.region-card {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(11,31,59,0.08);
  transition: box-shadow 240ms ease, transform 240ms ease;
}
.region-card:hover {
  box-shadow: 0 12px 40px rgba(11,31,59,0.13);
  transform: translateY(-4px);
}
.region-img {
  width: 100%; height: 320px;
  position: relative;
  overflow: hidden;
}
.region-img-inner {
  width: 100%; height: 100%;
  transition: transform 500ms ease;
  background-size: cover;
  background-position: center;
}
.region-card:hover .region-img-inner { transform: scale(1.04); }
.region-img-bvi {
  background: linear-gradient(160deg, #4FB6B2 0%, #1E6B8A 35%, #0B2E5C 70%, #0B1F3B 100%);
}
.region-img-usvi {
  background: linear-gradient(155deg, #E8A87C 0%, #C96647 30%, #7A4A6E 60%, #0B1F3B 100%);
}
.region-img-label {
  position: absolute; bottom: 14px; left: 16px;
  font-size: 10px; font-style: italic;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-body);
}
.region-img::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: linear-gradient(to top, rgba(11,31,59,0.18), transparent);
  pointer-events: none;
}
.region-body {
  background: #fff;
  padding: 28px 32px 34px;
}
.region-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-navy-900);
  margin-bottom: 10px;
}
.region-desc {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-navy-500);
  margin-bottom: 22px;
}
.region-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-coral-text);
  transition: gap 200ms;
}
.region-card:hover .region-link { gap: 10px; }

/* ── ISLAND LIST ─────────────────────────────────────────────────── */
.island-list {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 52px 112px;
}
.island-list-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.island-list-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-navy-900);
  letter-spacing: -0.01em;
}
.island-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.island-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 20px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 180ms;
}
.island-item:hover { background: rgba(11,31,59,0.03); }
.island-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}
.island-dot-bvi  { background: var(--color-sea-glass-500); }
.island-dot-usvi { background: var(--color-coral-500); }
.island-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--color-navy-900);
  margin-bottom: 4px;
}
.island-region {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy-500);
  margin-bottom: 6px;
}
.island-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-navy-500);
}

/* ── MAP ─────────────────────────────────────────────────────────── */
.map-section {
  background: #fff;
  padding: 0 52px 72px;
}
.map-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
/* (Removed .map-wrap svg rule — it was for the old SVG schematic and was breaking Leaflet's internal SVG layer.) */
.map-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px 14px;
  border-bottom: 1px solid rgba(11,31,59,0.07);
  background: #fff;
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-navy-900);
}
.map-legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.map-legend-dot-bvi  { background: var(--color-sea-glass-500); }
.map-legend-dot-usvi { background: var(--color-coral-500); }
.map-info-bar {
  background: #fff;
  border-top: 1px solid rgba(11,31,59,0.07);
  padding: 13px 24px;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.map-info-name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 400; color: var(--color-navy-900);
}
.map-info-region {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
}
.map-info-region-bvi  { background: var(--color-sea-glass-100); color: var(--color-sea-glass-text); }
.map-info-region-usvi { background: var(--color-coral-100); color: var(--color-coral-text); }
.map-info-note {
  font-family: var(--font-body);
  font-size: 13px; color: var(--color-navy-500); line-height: 1.4;
}
.map-info-default {
  font-family: var(--font-body);
  font-size: 13px; font-style: italic; color: var(--color-navy-500);
}
.island-marker { cursor: pointer; }
.island-marker .dot-ring { opacity: 0; transition: opacity 180ms; }
.island-marker:hover .dot-ring { opacity: 1; }
.island-marker .label-text { transition: fill 180ms; }
.island-marker:hover .label-text { fill: var(--color-coral-500) !important; }

/* ── READING PROGRESS ────────────────────────────────────────────── */
.progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.progress-fill {
  height: 100%;
  background: var(--color-coral-500);
  width: 0%;
  transition: width 60ms linear;
}

/* ── ARTICLE HERO IMAGE ──────────────────────────────────────────── */
.hero-img-wrap {
  margin-top: var(--nav-height);
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 3 / 2;
  min-height: 320px;
  max-height: 500px;
  overflow: hidden;
  position: relative;
}
.hero-img {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #1E3A5F 0%, #0B2A4A 45%, #4FB6B2 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-img-bvi  { background-image: linear-gradient(160deg, #4FB6B2 0%, #1E6B8A 30%, #0B2E5C 65%, #0B1F3B 100%); }
.hero-img-usvi { background-image: linear-gradient(155deg, #E8A87C 0%, #C96647 30%, #7A4A6E 60%, #0B1F3B 100%); }
.hero-img-caption {
  position: absolute; bottom: 12px; right: 16px;
  font-family: var(--font-body);
  font-size: 11px; font-style: italic;
  color: rgba(255,255,255,0.5);
}

/* ── ARTICLE HEADER ──────────────────────────────────────────────── */
.article-header {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 32px 0;
}
.article-tag {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-coral-text);
  margin-bottom: 16px;
  display: block;
}
.article-headline {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-navy-900);
  margin-bottom: 24px;
  text-wrap: pretty;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-navy-500);
  letter-spacing: 0.02em;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.meta-author {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-navy-500);
  font-weight: 500;
}
.meta-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-sea-glass-500), var(--color-navy-900));
  flex-shrink: 0;
}
.meta-sep { margin: 0 10px; color: rgba(11,31,59,0.2); }
.meta-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
}
.meta-badge-bvi  { background: var(--color-sea-glass-100); color: var(--color-sea-glass-text); }
.meta-badge-usvi { background: var(--color-coral-100); color: var(--color-coral-text); }

/* ── WEATHER WIDGET ──────────────────────────────────────────────── */
.weather-widget-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 32px 0;
}
.weather-widget {
  position: relative;
}
.weather-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-navy-900);
  border-radius: 10px;
  padding: 14px 22px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-base);
  position: relative;
  overflow: hidden;
}
.weather-strip::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--transition-base);
  pointer-events: none;
}
.weather-strip:hover::after { background: rgba(255,255,255,0.03); }
.strip-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.strip-location {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.strip-divider {
  width: 1px; height: 20px;
  background: rgba(255,255,255,0.12);
}
.strip-temp {
  font-size: 22px; font-weight: 300;
  color: #fff; letter-spacing: -0.02em;
  line-height: 1;
}
.strip-icon {
  color: var(--color-sea-glass-500);
  display: flex; align-items: center;
}
.strip-condition {
  font-size: 13px; font-weight: 400;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.01em;
}
.strip-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.strip-feels {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.03em;
}
.strip-toggle {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-sea-glass-500);
  transition: color var(--transition-base);
}
.strip-toggle svg { transition: transform 300ms cubic-bezier(0.34,1.56,0.64,1); }
.weather-widget.open .strip-toggle svg { transform: rotate(180deg); }
.weather-widget.open .weather-strip { border-radius: 10px 10px 0 0; }

.weather-expanded {
  background: var(--color-navy-900);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 420ms cubic-bezier(0.4,0,0.2,1), opacity 300ms ease;
  opacity: 0;
}
.weather-widget.open .weather-expanded { max-height: 200px; opacity: 1; }
.forecast-inner {
  padding: 0 22px 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.forecast-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding-top: 16px;
}
.forecast-day {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  transition: background var(--transition-base);
}
.forecast-day:hover { background: rgba(255,255,255,0.04); }
.forecast-day-name {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.forecast-day.today .forecast-day-name { color: var(--color-sea-glass-500); }
.forecast-icon {
  color: var(--color-sea-glass-500);
  display: flex; align-items: center; justify-content: center;
}
.forecast-day:not(.today) .forecast-icon { color: rgba(79,182,178,0.65); }
.forecast-temps { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.forecast-hi { font-size: 15px; font-weight: 400; color: #fff; letter-spacing: -0.01em; }
.forecast-lo { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.35); }
.forecast-bar {
  width: 28px; height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-pill);
  overflow: hidden; position: relative;
}
.forecast-bar-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--color-sea-glass-500);
  border-radius: var(--radius-pill);
  opacity: 0.6;
}
.weather-loading {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  font-style: italic;
}
.weather-error { color: rgba(255,255,255,0.4); font-size: 12px; }

/* ── ARTICLE BODY ────────────────────────────────────────────────── */
.article-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 32px 0;
}
.article-lede {
  font-family: var(--font-body);
  font-size: 19px; font-weight: 400;
  line-height: 1.75; color: var(--color-navy-900);
  margin-bottom: 28px;
}
.article-p {
  font-family: var(--font-body);
  font-size: 16px; font-weight: 400;
  line-height: 1.875; color: var(--color-navy-900);
  margin-bottom: 22px;
}
.article-h2 {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 400;
  line-height: 1.25; color: var(--color-navy-900);
  margin: 48px 0 14px;
  letter-spacing: -0.01em;
}
.affiliate-link {
  color: var(--color-navy-900);
  text-decoration: underline;
  text-decoration-color: rgba(11,31,59,0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-base), color var(--transition-base);
}
.affiliate-link:hover {
  color: var(--color-coral-text);
  text-decoration-color: var(--color-coral-text);
}

.article-p a,
.article-lede a {
  color: var(--color-navy-900);
  text-decoration: underline;
  text-decoration-color: rgba(11,31,59,0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-base), color var(--transition-base);
}
.article-p a:hover,
.article-lede a:hover {
  color: var(--color-coral-text);
  text-decoration-color: var(--color-coral-text);
}
.affiliate-note {
  font-size: 11px; font-weight: 500;
  color: var(--color-navy-500);
  vertical-align: super;
  letter-spacing: 0.02em;
  margin-left: 2px;
}
.pull-quote {
  margin: 44px 0;
  padding: 24px 28px;
  border-left: 3px solid var(--color-coral-500);
  background: var(--color-coral-100);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.pull-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400; line-height: 1.4;
  color: var(--color-navy-900);
}
.pull-quote-attr {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500;
  color: var(--color-navy-500); letter-spacing: 0.04em;
}
.article-list {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.7;
  color: var(--color-navy-900);
  list-style: none; padding: 0;
  margin-bottom: 22px;
}
.article-list li {
  padding: 7px 0 7px 22px;
  position: relative;
  border-bottom: 1px solid rgba(11,31,59,0.06);
}
.article-list li:first-child { border-top: 1px solid rgba(11,31,59,0.06); }
.article-list li::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-sea-glass-500);
}
.author-bio {
  margin-top: 48px; padding-top: 36px;
  border-top: 1px solid var(--border-subtle);
  display: flex; gap: 18px; align-items: flex-start;
}
.author-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-sea-glass-500), var(--color-navy-900));
}
.author-name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 400; color: var(--color-navy-900);
  margin-bottom: 5px;
}
.author-desc {
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.65; color: var(--color-navy-500);
}

/* ── ARTICLE DIVIDER ─────────────────────────────────────────────── */
.article-divider {
  max-width: 760px; margin: 64px auto 0;
  padding: 0 32px;
  display: flex; align-items: center; gap: 16px;
}
.divider-line { flex: 1; height: 1px; background: var(--border-subtle); }
.divider-mark { width: 48px; height: 2px; background: var(--color-coral-500); border-radius: 1px; flex-shrink: 0; }

/* ── RELATED ARTICLES / ISLANDS ──────────────────────────────────── */
.related {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px 52px 80px;
}
.related-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.related-title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 400;
  color: var(--color-navy-900); letter-spacing: -0.01em;
}
.related-all {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  color: var(--color-coral-text); text-decoration: none;
  transition: color var(--transition-base);
}
.related-all:hover { color: var(--color-coral-text); }
.related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.filter-tabs {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 32px;
}
.filter-tab {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--color-navy-500); background: var(--color-navy-100);
  padding: 9px 18px; border-radius: var(--radius-pill);
  text-decoration: none; white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
}
.filter-tab:hover { background: var(--color-coral-100); color: var(--color-coral-text); }
.filter-tab.is-active { background: var(--color-coral-500); color: var(--color-navy-900); }
.related-card {
  background: #fff; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none; display: block;
  transition: box-shadow 220ms, transform 220ms;
}
.related-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.related-img {
  width: 100%; aspect-ratio: 1 / 1;
  transition: transform 400ms ease;
  transform-origin: center;
  background-size: cover;
  background-position: center;
}
.related-card:hover .related-img { transform: scale(1.03); }
.related-body { padding: 18px 20px 22px; }
.related-tag {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-coral-text); margin-bottom: 8px;
  display: block;
}
.related-name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 400; line-height: 1.3;
  color: var(--color-navy-900); margin-bottom: 10px;
}
.related-meta {
  font-family: var(--font-body);
  font-size: 11px; color: var(--color-navy-500);
}

/* ── ABOUT PAGE ──────────────────────────────────────────────────── */
.content {
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 32px 0;
}
.about-headline {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400; line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-navy-900);
  margin-bottom: 32px; text-wrap: pretty;
}
.about-lede {
  font-family: var(--font-body);
  font-size: 18px; font-weight: 400;
  line-height: 1.8; color: var(--color-navy-900);
  margin-bottom: 48px; text-wrap: pretty;
}
.island-photo-wrap {
  max-width: 840px; margin: 0 auto 72px; padding: 0 32px;
}
.island-photo {
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--radius-md); overflow: hidden; position: relative;
  background: linear-gradient(160deg, #4FB6B2 0%, #1E6B8A 30%, #0B2E5C 65%, #0B1F3B 100%);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.island-photo-placeholder {
  position: absolute; bottom: 14px; left: 18px;
  font-family: var(--font-body); font-size: 11px; font-style: italic;
  color: rgba(255,255,255,0.45);
}
.island-photo-caption {
  margin-top: 12px;
  font-family: var(--font-body); font-size: 13px; font-style: italic;
  color: var(--color-navy-500); line-height: 1.5;
}
.what-section { max-width: 680px; margin: 0 auto; padding: 0 32px 96px; }
.what-eyebrow {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-sea-glass-text); margin-bottom: 16px;
}
.what-headline {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px); font-weight: 400; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--color-navy-900); margin-bottom: 44px;
}
.what-item {
  padding: 32px 0;
  border-top: 1px solid var(--border-subtle);
  display: grid; grid-template-columns: 28px 1fr; gap: 20px; align-items: flex-start;
}
.what-item:last-child { border-bottom: 1px solid var(--border-subtle); }
.what-number {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 400; color: var(--color-coral-text); line-height: 1.6; padding-top: 2px;
}
.what-item-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 400; color: var(--color-navy-900); margin-bottom: 8px; line-height: 1.25;
}
.what-item-desc {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 400; line-height: 1.75; color: var(--color-navy-500); text-wrap: pretty;
}

/* ── RESOURCES PAGE ──────────────────────────────────────────────── */
.directory {
  max-width: var(--container-max); margin: 0 auto;
  padding: 40px 52px 96px; display: flex; flex-direction: column; gap: 64px;
}
.category {
  display: grid; grid-template-columns: 220px 1fr; gap: 0 64px; align-items: start;
}
.category-label {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-coral-text); padding-top: 6px; position: sticky; top: 88px;
}
.category-entries { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.category-entries .entry:nth-child(odd)  { padding-right: 40px; border-right: 1px solid var(--border-subtle); }
.category-entries .entry:nth-child(even) { padding-left: 40px; }
.entry {
  padding: 28px 0; border-top: 1px solid var(--border-subtle);
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start;
}
.entry:last-child { border-bottom: 1px solid var(--border-subtle); }
.entry-name {
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  color: var(--color-navy-900); margin-bottom: 6px; line-height: 1.3;
}
.entry-desc {
  font-family: var(--font-body); font-size: 14px; font-weight: 400;
  line-height: 1.7; color: var(--color-navy-500); text-wrap: pretty; max-width: 560px;
}
.entry-link {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--color-coral-text); text-decoration: none; white-space: nowrap; padding-top: 4px;
  transition: color var(--transition-base); display: flex; align-items: center; gap: 5px;
}
.entry-link:hover { color: var(--color-coral-text); }
.entry-link svg { opacity: 0.7; transition: transform var(--transition-base); }
.entry-link:hover svg { transform: translate(2px, -2px); }
.entry-placeholder .entry-name { color: var(--color-navy-500); }
.entry-placeholder .entry-desc { color: var(--color-navy-500); font-style: italic; }
.entry-placeholder .entry-link { color: var(--color-navy-500); pointer-events: none; }
.entry-region {
  display: inline-block; margin-left: 10px; padding: 2px 9px;
  background: var(--color-sea-glass-500); color: var(--color-navy-900);
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px;
  vertical-align: middle; white-space: nowrap;
}
.entry-region + .entry-region { margin-left: 4px; }
.entry-region-usvi { background: var(--color-coral-500); }

/* ── CTA BAND ────────────────────────────────────────────────────── */
.cta-band {
  background: var(--color-navy-900);
  padding: 60px 52px;
  text-align: center;
}
.cta-eyebrow {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-sea-glass-500); margin-bottom: 18px;
}
.cta-headline {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px); font-weight: 300; line-height: 1.1;
  letter-spacing: -0.02em; color: #fff; margin-bottom: 18px;
}
.cta-subhead {
  font-family: var(--font-body);
  font-size: 17px; font-weight: 400; line-height: 1.6;
  color: rgba(255,255,255,0.65); max-width: 480px; margin: 0 auto 36px; text-wrap: pretty;
}
.cta-form { display: flex; gap: 10px; justify-content: center; max-width: 460px; margin: 0 auto; }
.cta-input {
  flex: 1; font-family: var(--font-body); font-size: 14px; padding: 13px 18px;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill); color: #fff; outline: none; transition: border-color var(--transition-base);
}
.cta-input::placeholder { color: rgba(255,255,255,0.4); }
.cta-input:focus { border-color: rgba(255,255,255,0.4); }
.cta-btn {
  background: var(--color-coral-500); color: var(--color-navy-900); font-family: var(--font-body);
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em; padding: 13px 26px;
  border-radius: var(--radius-pill); border: none; cursor: pointer; white-space: nowrap;
  transition: background var(--transition-base), transform 120ms;
}
.cta-btn:hover { background: var(--color-coral-700); }
.cta-btn:active { transform: scale(0.97); }
.cta-legal { margin-top: 14px; font-family: var(--font-body); font-size: 11px; color: rgba(255,255,255,0.3); }

/* ── FOOTER ──────────────────────────────────────────────────────── */
.footer {
  background: var(--color-navy-900);
  padding: 48px 52px 40px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.footer-inner {
  max-width: var(--container-max); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 260px; }
.footer-brand img { height: 46px; width: auto; }
.footer-tagline { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,0.45); }
.footer-links { display: flex; gap: 56px; }
.footer-col-head {
  font-size: 10px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-bottom: 16px;
}
.footer-link {
  display: block; font-size: 13px; color: rgba(255,255,255,0.65);
  text-decoration: none; margin-bottom: 9px; transition: color var(--transition-base);
}
.footer-link:hover { color: var(--color-coral-500); }
.footer-bottom {
  max-width: var(--container-max); margin: 32px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; align-items: center;
}
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.28); }
.footer-legal { display: flex; gap: 22px; }
.footer-legal a { font-size: 12px; color: rgba(255,255,255,0.35); text-decoration: none; transition: color var(--transition-base); }
.footer-legal a:hover { color: var(--color-coral-500); }

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .regions { grid-template-columns: 1fr; }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .island-list-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-right { display: none; }
  .nav-hamburger { display: inline-block; }
  .hero-content { padding: 0 24px 72px; }
  .intro { padding: 64px 24px; }
  .articles { padding: 0 24px 72px; }
  .articles-grid { grid-template-columns: 1fr; }
  .page-header { padding: 120px 24px 60px; }
  .map-section { padding: 0 24px 48px; }
  .regions { padding: 0 24px 80px; }
  .island-list { padding: 0 24px 72px; }
  .island-list-grid { grid-template-columns: 1fr; }
  .related { padding: 48px 24px 64px; }
  .related-grid { grid-template-columns: 1fr; }
  .article-header { padding: 36px 20px 0; }
  .weather-widget-wrap { padding: 20px 20px 0; }
  .article-body { padding: 28px 20px 0; }
  .article-divider { padding: 0 20px; }
  .content { padding: 48px 20px 0; }
  .island-photo-wrap { padding: 0 20px; }
  .what-section { padding: 0 20px 72px; }
  .directory { padding: 48px 24px 72px; gap: 48px; }
  .category { grid-template-columns: 1fr; gap: 20px 0; }
  .category-label { position: static; }
  .category-entries { grid-template-columns: 1fr; }
  .category-entries .entry:nth-child(odd)  { padding-right: 0; border-right: none; }
  .category-entries .entry:nth-child(even) { padding-left: 0; }
  .entry { grid-template-columns: 1fr; gap: 12px; }
  .footer { padding: 48px 24px 32px; }
  .footer-inner { flex-direction: column; gap: 32px; }
  .footer-links { gap: 32px; }
  .cta-band { padding: 64px 24px; }
  .cta-form { flex-direction: column; }
  .strip-condition { display: none; }
  .strip-feels { display: none; }
}


/* ── DESTINATIONS LEAFLET MAP ────────────────────────────────────── */
.vi-map {
  width: 100%;
  height: 520px;
  background: #EAF6F6;
}
@media (max-width: 768px) {
  .vi-map { height: 360px; }
}
.leaflet-container { font-family: var(--font-body); }
.vi-map-tooltip {
  background: var(--color-navy-900);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(11,31,59,0.18);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 4px;
}
.vi-map-tooltip::before { display: none; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #fff; }

/* ── DESTINATIONS LEAFLET MAP — INSET OVERLAY ────────────────────── */
.vi-map-wrap { position: relative; }
.vi-map-wrap .leaflet-control-attribution { display: none; }
.vi-map-inset {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 240px;
  height: 200px;
  background: #fff;
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(11,31,59,0.32);
  z-index: 401;
  overflow: hidden;
}
.vi-map-inset-map { width: 100%; height: 100%; }
.vi-map-inset-label {
  position: absolute;
  top: 6px; left: 6px;
  z-index: 500;
  background: rgba(11,31,59,0.92);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.vi-map-attribution {
  font-size: 10px;
  color: var(--color-navy-500);
  padding: 8px 24px;
  background: #fff;
  border-top: 1px solid rgba(11,31,59,0.07);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.vi-map-attribution a { color: var(--color-navy-500); text-decoration: none; }
.vi-map-attribution a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .vi-map-inset { width: 160px; height: 130px; bottom: 10px; right: 10px; }
  .vi-map-inset-label { font-size: 8px; padding: 3px 6px; }
}


/* ── NAV DROPDOWN — DESKTOP ──────────────────────────────────────── */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-trigger {
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid transparent;
  padding: 0 0 2px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color var(--transition-base), border-bottom-color var(--transition-base);
}
.nav.nav-opaque .nav-dropdown-trigger,
.nav.scrolled .nav-dropdown-trigger { color: var(--color-navy-900); }
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.active { color: var(--color-coral-text); border-bottom-color: var(--color-coral-500); }
.nav-chevron { transition: transform 200ms ease; position: relative; top: 1px; }
.nav-dropdown.open .nav-chevron { transform: rotate(180deg); }

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 460px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(11,31,59,0.16), 0 2px 8px rgba(11,31,59,0.08);
  padding: 20px 24px 16px;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, transform 200ms ease, visibility 180ms ease;
}
.nav-dropdown.open .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-panel::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
}
.nav-dropdown-group { margin-bottom: 14px; }
.nav-dropdown-group:last-of-type { margin-bottom: 8px; }
.nav-dropdown-heading {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-navy-500);
  margin-bottom: 8px;
}
.nav-dropdown-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 18px; }
.nav-dropdown-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-900);
  padding: 6px 0;
  text-decoration: none;
  transition: color var(--transition-base);
}
.nav-dropdown-link:hover { color: var(--color-coral-text); }
.nav-dropdown-map-link {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-coral-text);
  padding: 12px 0 4px;
  border-top: 1px solid rgba(11,31,59,0.07);
  margin-top: 8px;
  text-decoration: none;
  transition: color var(--transition-base);
}
.nav-dropdown-map-link:hover { color: var(--color-coral-text); }

@media (max-width: 768px) {
  .nav-dropdown { display: none; }
}

/* ── MOBILE MENU EXPANDABLE GROUP ────────────────────────────────── */
.mobile-menu-group { display: flex; flex-direction: column; }
.mobile-menu-group-trigger {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #fff;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: color 160ms ease;
}
.mobile-menu-group-trigger:hover { color: var(--color-coral-text); }
.mobile-chevron { transition: transform 200ms ease; position: relative; top: 3px; }
.mobile-menu-group.open .mobile-chevron { transform: rotate(180deg); }

.mobile-menu-sublinks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms ease, margin-top 280ms ease;
}
.mobile-menu-group.open .mobile-menu-sublinks {
  max-height: 900px;
  margin-top: 14px;
}
.mobile-menu-subheading {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 8px;
  margin-bottom: 2px;
}
.mobile-menu-subheading:first-child { margin-top: 0; }
.mobile-menu-sublinks a {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  padding: 4px 0;
  text-decoration: none;
  transition: color 160ms ease;
}
.mobile-menu-sublinks a:hover { color: var(--color-coral-text); }
.mobile-menu-sublinks .mobile-menu-map-link {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-coral-text);
  font-weight: 600;
  padding-top: 12px;
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.12);
}


/* ── DESTINATIONS MAP — PERMANENT MARKER LABELS ──────────────────── */
.leaflet-tooltip.vi-map-label-permanent {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--color-navy-900);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  text-shadow:
    0 0 3px #fff, 0 0 2px #fff,
    -1px -1px 0 #fff, 1px -1px 0 #fff,
    -1px 1px 0 #fff, 1px 1px 0 #fff;
  pointer-events: none;
}
.leaflet-tooltip.vi-map-label-permanent::before,
.leaflet-tooltip.vi-map-label-permanent:before { display: none; }


/* ── CONTACT FORM ─────────────────────────────────────────────────── */
.contact-section { padding: 0 24px 96px; }
.contact-form {
  max-width: 560px;
  margin: 0 auto;
}
.contact-honeypot { position: absolute; left: -10000px; top: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-field { display: block; margin-bottom: 22px; }
.contact-label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-navy-500);
  margin-bottom: 8px;
}
.contact-input,
.contact-textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-navy-900);
  transition: border-color var(--transition-base);
}
.contact-input:focus,
.contact-textarea:focus {
  outline: none;
  border-color: var(--color-coral-500);
}
.contact-textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.5;
  font-family: var(--font-body);
}
.contact-submit {
  background: var(--color-coral-500);
  color: var(--color-navy-900);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 13px 36px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  transition: background var(--transition-base), transform 120ms;
}
.contact-submit:hover { background: var(--color-coral-700); }
.contact-submit:active { transform: scale(0.97); }

/* ── 404 PAGE ─────────────────────────────────────────────────────── */
.not-found {
  text-align: center;
  padding: 96px 24px 120px;
  max-width: 900px;
  margin: 0 auto;
}
.not-found-code {
  font-family: var(--font-display);
  font-size: 140px;
  font-weight: 200;
  letter-spacing: -0.03em;
  color: var(--color-coral-text);
  line-height: 0.9;
  margin-bottom: 24px;
}
.not-found-headline {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--color-navy-900);
  margin-bottom: 18px;
}
.not-found-subhead {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-navy-500);
  max-width: 600px;
  margin: 0 auto 56px;
  line-height: 1.55;
}
.not-found-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.not-found-card {
  display: block;
  text-align: left;
  padding: 22px 22px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.not-found-card:hover {
  border-color: var(--color-coral-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.not-found-card-label {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-navy-900);
  margin-bottom: 4px;
}
.not-found-card-desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-navy-500);
}
@media (max-width: 768px) {
  .not-found-code { font-size: 96px; }
  .not-found-headline { font-size: 30px; }
  .not-found-subhead { font-size: 15px; }
  .not-found-actions { grid-template-columns: 1fr; }
}


/* ── THANKS PAGE ──────────────────────────────────────────────────── */
.thanks {
  text-align: center;
  padding: 96px 24px 120px;
  max-width: 900px;
  margin: 0 auto;
}
.thanks-check {
  display: inline-block;
  color: var(--color-sea-glass-500);
  margin-bottom: 24px;
  line-height: 0;
}
.thanks-headline {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--color-navy-900);
  margin-bottom: 16px;
}
.thanks-subhead {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-navy-500);
  max-width: 560px;
  margin: 0 auto 56px;
  line-height: 1.55;
}
.thanks-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.thanks-card {
  display: block;
  text-align: left;
  padding: 22px 22px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.thanks-card:hover {
  border-color: var(--color-coral-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.thanks-card-label {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-navy-900);
  margin-bottom: 4px;
}
.thanks-card-desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-navy-500);
}
@media (max-width: 768px) {
  .thanks-headline { font-size: 38px; }
  .thanks-subhead { font-size: 15px; }
  .thanks-actions { grid-template-columns: 1fr; }
}


/* ── NAV DROPDOWN HEADINGS AS LINKS ──────────────────────────────── */
a.nav-dropdown-heading-link {
  text-decoration: none;
  display: block;
  transition: color var(--transition-base);
}
a.nav-dropdown-heading-link:hover {
  color: var(--color-coral-text);
}
a.mobile-menu-subheading-link {
  text-decoration: none;
  display: block;
  transition: color 160ms ease;
}
a.mobile-menu-subheading-link:hover {
  color: var(--color-coral-text);
}


/* Linked CTA button (for newsletter signup link) */
a.cta-btn,
.cta-btn-link {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}


/* ── HOMEPAGE START HERE ─────────────────────────────────────────── */
.start-here {
  background: #fff;
  padding: 64px 52px 72px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.start-here-headline {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--color-navy-900);
  text-align: center;
  margin-bottom: 36px;
}
.start-here-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.start-here-card {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-subtle);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.start-here-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-coral-500);
}
.start-here-card-img {
  height: 220px;
  background-size: cover;
  background-position: center;
  background-color: #EAF6F6;
}
.start-here-card-body { padding: 24px 28px 28px; }
.start-here-card-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-navy-500);
  margin-bottom: 8px;
}
.start-here-card-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--color-navy-900);
  margin-bottom: 10px;
  line-height: 1.2;
}
.start-here-card-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-navy-500);
  line-height: 1.55;
  margin-bottom: 14px;
}
.start-here-card-cta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-coral-text);
  transition: color var(--transition-base);
}
.start-here-card:hover .start-here-card-cta { color: var(--color-coral-text); }
@media (max-width: 768px) {
  .start-here { padding: 48px 24px 56px; }
  .start-here-headline { font-size: 28px; margin-bottom: 24px; }
  .start-here-grid { grid-template-columns: 1fr; }
  .start-here-card-img { height: 180px; }
  .start-here-card-title { font-size: 22px; }
}


/* Start Here simple variant — single CTA */
.start-here-simple { text-align: center; }
.start-here-simple .start-here-headline { margin-bottom: 16px; }
.start-here-subhead {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-navy-500);
  max-width: 600px;
  margin: 0 auto 28px;
  line-height: 1.55;
}
.start-here-simple .cta-btn-link {
  padding: 14px 36px;
  font-size: 14px;
}


/* ── ARTICLE PATTERNS (migrated from per-article inline CSS) ─────── */

/* Article-without-hero register (locked 2026-05-21). Add class to <body>. */
body.article-no-hero .article-header { margin-top: var(--nav-height); }

.article-subhead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-navy-500);
  margin-bottom: 24px;
  text-wrap: pretty;
}

.article-h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-coral-text);
  margin: 32px 0 10px;
  letter-spacing: -0.005em;
}

.article-figure { margin: 36px 0; }
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.article-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-navy-500);
  letter-spacing: 0.01em;
}

.article-recap-list {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-navy-900);
  padding-left: 22px;
  margin: 8px 0 22px;
}
.article-recap-list li { margin-bottom: 6px; }

.external-link::after {
  content: " \2197";
  font-size: 0.85em;
  color: var(--color-navy-500);
}

/* Season-comparison table (sand 15% alpha zebra — sand role still deferred) */
.season-table-wrap {
  margin: 32px 0 36px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid rgba(11,31,59,0.08);
}
.season-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-navy-900);
  background: #fff;
}
.season-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-navy-900);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
}
.season-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(11,31,59,0.08);
  vertical-align: top;
  line-height: 1.5;
}
.season-table tbody tr:nth-child(odd) td { background: rgba(232, 221, 201, 0.15); }
.season-table tbody tr:last-child td { border-bottom: none; }
@media (max-width: 600px) {
  .season-table { font-size: 13px; }
  .season-table thead th { padding: 10px 12px; }
  .season-table tbody td { padding: 10px 12px; }
}

/* Emphasis callout box (was duplicated per-article as local CSS; consolidated for the Astro content collection) */
.article-callout {
  margin: 40px 0;
  padding: 22px 26px 24px;
  background: rgba(232, 221, 201, 0.30);
  border-left: 3px solid var(--color-coral-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.article-callout h3.article-h3,
.article-callout .article-h3 { margin-top: 0; color: var(--color-navy-900); }
.article-callout .article-p:last-child,
.article-callout ul:last-child { margin-bottom: 0; }

/* Affiliate disclosure aside (was local to one article; consolidated since any affiliate content needs it) */
.article-affiliate-disclosure {
  margin: 48px auto 0;
  max-width: 720px;
  padding: 14px 18px;
  background: rgba(232, 221, 201, 0.25);
  border-left: 3px solid var(--color-sea-glass-700);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-navy-500);
  border-radius: 4px;
}
.article-affiliate-disclosure a { color: var(--color-navy-900); text-decoration: underline; }

/* ── ARTICLE BODY, PLAIN MARKDOWN TAGS ─────────────────────────────
   The rules above this point require explicit classes (article-p,
   article-h2, etc.) because they were written for hand-authored HTML.
   The Astro content collection renders plain markdown instead, so
   these tag selectors give a bare <p>/<h2>/<ul>/<table> inside
   .article-body the same look without the author typing any class. */
.article-body > p:first-of-type { font-family: var(--font-body); font-size: 19px; font-weight: 400; line-height: 1.75; color: var(--color-navy-900); margin-bottom: 28px; }
.article-body > p:not(:first-of-type) { font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.875; color: var(--color-navy-900); margin-bottom: 22px; }
.article-body h2 { font-family: var(--font-display); font-size: 26px; font-weight: 400; line-height: 1.25; color: var(--color-navy-900); margin: 48px 0 14px; letter-spacing: -0.01em; }
.article-body h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; line-height: 1.3; color: var(--color-coral-text); margin: 32px 0 10px; letter-spacing: -0.005em; }
.article-body ul, .article-body ol { font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: var(--color-navy-900); padding-left: 22px; margin: 8px 0 22px; }
.article-body li { margin-bottom: 6px; }
.article-body p a, .article-body li a { color: var(--color-navy-900); text-decoration: underline; text-decoration-color: rgba(11,31,59,0.3); text-underline-offset: 3px; transition: text-decoration-color var(--transition-base), color var(--transition-base); }
.article-body p a:hover, .article-body li a:hover { color: var(--color-coral-text); text-decoration-color: var(--color-coral-text); }
.article-body blockquote { margin: 44px 0; padding: 24px 28px; border-left: 3px solid var(--color-coral-500); background: var(--color-coral-100); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.4vw, 26px); font-weight: 400; line-height: 1.4; color: var(--color-navy-900); }
.article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; width: max-content; border-collapse: collapse; font-family: var(--font-body); font-size: 14px; color: var(--color-navy-900); background: #fff; margin: 32px 0 36px; border-radius: var(--radius-md); border: 1px solid rgba(11,31,59,0.08); }
@media (min-width: 700px) { .article-body table { width: 100%; } }
.article-body table thead th { position: sticky; top: 0; background: var(--color-navy-900); color: #fff; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.12); white-space: nowrap; }
.article-body table td { padding: 12px 14px; border-bottom: 1px solid rgba(11,31,59,0.08); vertical-align: top; line-height: 1.5; }
.article-body table tbody tr:nth-child(odd) td { background: rgba(232, 221, 201, 0.15); }
.article-body table tbody tr:last-child td { border-bottom: none; }


/* ── CATEGORY INTRO (one-line section intro on Resources page) ───── */
/* Optional <p class="category-intro"> sits between .category-label
   and .category-entries inside a .category. Renders in column 2 of
   the .category grid, above the entries grid. Collapses cleanly to
   single-column on mobile. */
.category-intro {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-navy-500);
  margin-bottom: 28px;
  max-width: 720px;
  text-wrap: pretty;
}
@media (max-width: 768px) {
  .category-intro { margin-bottom: 20px; font-size: 14px; }
}

/* ── DIRECTORY NAV (sticky in-page section nav on Resources page) ─ */
.directory-nav {
  position: sticky;
  top: var(--nav-height);
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(11, 31, 59, 0.09);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 14px 52px;
  display: flex;
  gap: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.directory-nav::-webkit-scrollbar { display: none; }

/* Released by initDirectoryNavRelease (main.js) once the listing has
   scrolled past, so the nav doesn't linger over the CTA band/footer. */
.directory-nav-released {
  position: static;
  box-shadow: none;
}

.directory-nav-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-navy-500);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: color var(--transition-base), border-bottom-color var(--transition-base);
}
.directory-nav-link:hover {
  color: var(--color-coral-text);
  border-bottom-color: var(--color-coral-500);
}

/* Offset scroll-to anchors so the section heading lands below the
   fixed nav + sticky directory-nav, not behind them. */
.directory .category { scroll-margin-top: calc(var(--nav-height) + 60px); }

/* 3-card grid quirk: when a 2-col row has only one entry (odd-count
   section), suppress the right border that would otherwise hang into
   empty space. Generic — works for any odd-count category-entries. */
.category-entries .entry:last-child:nth-child(odd) {
  border-right: none;
  padding-right: 0;
}

@media (max-width: 768px) {
  .directory-nav { padding: 12px 24px; gap: 20px; }
}


/* ── REDUCED MOTION ──────────────────────────────────────────────── */
/* Respect prefers-reduced-motion (WCAG 2.3.3). Collapses animations
   and transitions to near-instant (0.01ms) so JS that depends on
   transition events still fires, but no perceptible motion remains.
   Covers hero scroll bob, mobile menu slide, dropdown chevron rotate,
   card lifts, image scales, weather expand, smooth-scroll anchors. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------------------------------------------------------------
   Cookie consent banner (Shearwater)
   Persists choice in localStorage as sw_consent. Dispatches a
   custom event 'sw:consent-change' for any non-GTM listeners and
   pushes 'sw_consent_change' to dataLayer for GTM consent gating.
--------------------------------------------------------------- */
#sw-consent {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: 560px;
  width: calc(100% - 32px);
  background: #ffffff;
  color: #0B1F3B;
  border: 1px solid #0B1F3B;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  padding: 18px 20px;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  display: none;
}
#sw-consent.is-visible { display: block; }
#sw-consent p { margin: 0 0 12px; }
#sw-consent .sw-consent-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
#sw-consent button {
  appearance: none;
  border: 1px solid #0B1F3B;
  background: transparent;
  color: #0B1F3B;
  padding: 8px 16px;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
#sw-consent button.sw-consent-accept {
  background: #E7634E;
  border-color: #E7634E;
  color: #0B1F3B;
}
#sw-consent button.sw-consent-accept:hover { background: #D35341; border-color: #D35341; }
#sw-consent button.sw-consent-decline:hover { background: #0B1F3B; color: #ffffff; }
@media (prefers-reduced-motion: reduce) {
  #sw-consent button { transition: none; }
}
@media (max-width: 480px) {
  #sw-consent { bottom: 12px; padding: 14px 16px; }
  #sw-consent button { flex: 1 1 auto; }
}