/* ============================================================
   Windswept Waterfront Vacation Rentals
   Design system: Bright (default) / Pass-a-Grille Sunset
   Motion law: transform and opacity only, one easing pair
   ============================================================ */

:root {
  /* plaque constants */
  --plaque-teal: #4ac1aa;
  --plaque-navy: #17323a;
  --gold: #f0c010;
  --fiji: #6fe0cf;
  --gulf-bright: #0084a8;

  /* one easing pair for everything */
  --ease-out: cubic-bezier(.22, .61, .21, 1);
  --ease-in: cubic-bezier(.64, .04, .68, .44);

  --r-card: 18px;
  --r-btn: 12px;
  --header-h: 64px;
}

/* ---------- Bright theme: royal sea blue from the option-1 logo ---------- */
html[data-theme="bright"], html[data-theme="light"] {
  color-scheme: dark;
  --sand: #f6f1e8;
  --sand-2: #12343c;
  --raised: #f6f1e8;
  --ink: #f6f1e8;
  --ink-soft: #f3eee4;
  --muted: #e7efe8;
  --teal: #4ac1aa;
  --gulf: #7ed9c6;
  --aqua: #4ac1aa;
  --accent: #4ac1aa;
  --hairline: rgba(246, 241, 232, .22);
  --band-shallows: rgba(8, 32, 40, .28);
  --band-gulf: rgba(74, 193, 170, .16);
  --glow-rest: rgba(74, 193, 170, .22);
  --glow-hot: rgba(74, 193, 170, .42);
  --page-bg: linear-gradient(180deg, #0f3d4a 0%, #17323a 24%, #1a4a56 52%, #143844 78%, #102f38 100%);
  --halo: rgba(23, 50, 58, .92);
  --btn-ink: #17323a;
  --shadow-ink: rgba(0, 0, 0, .28);
}

/* ---------- Pass-a-Grille Sunset: a lagoon night ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --sand: #0d2630;
  --sand-2: #091a22;
  --raised: #14333f;
  --ink: #f6f1e8;
  --ink-soft: #e8fff8;
  --muted: #dceee8;
  --teal: #4ac1aa;
  --gulf: #00a0e0;
  --aqua: #6fe0cf;
  --accent: #6fe0cf;
  --hairline: rgba(111, 224, 207, .18);
  --band-shallows: rgba(0, 160, 224, .10);
  --band-gulf: rgba(74, 193, 170, .12);
  --glow-rest: rgba(111, 224, 207, .20);
  --glow-hot: rgba(111, 224, 207, .45);
  --page-bg: linear-gradient(180deg, #0a2a33 0%, #0d2630 30%, #091a22 68%, #0c232c 100%);
  --halo: rgba(9, 26, 34, .92);
  --btn-ink: #06222b;
  --shadow-ink: rgba(0, 0, 0, .35);
}

/* ---------- PAG Sunset: the red-orange ball over the gulf ---------- */
html[data-theme="sunset"] {
  color-scheme: dark;
  --sand: #2a1a2e;
  --sand-2: #1c1020;
  --raised: #3a2340;
  --ink: #fff6ea;
  --ink-soft: #f8eee2;
  --muted: #f4dccb;
  --teal: #ff8a5c;
  --gulf: #ff5e78;
  --aqua: #ffb27a;
  --accent: #ffb27a;
  --hairline: rgba(255, 160, 120, .22);
  --band-shallows: rgba(255, 94, 120, .08);
  --band-gulf: rgba(255, 138, 92, .10);
  --glow-rest: rgba(255, 120, 100, .22);
  --glow-hot: rgba(255, 120, 100, .46);
  --page-bg: linear-gradient(180deg, #3d1f33 0%, #2a1a2e 28%, #1c1020 66%, #2b1626 100%);
  --halo: rgba(28, 16, 32, .92);
  --btn-ink: #3a0f16;
  --shadow-ink: rgba(0, 0, 0, .4);
}

/* hero headline: Miami Vice neon breathe, crisp core + warm neon halo */
.hero h1,
main h1 {
  text-shadow: none;
  color: #fdfbf6;
  animation: heroNeon 4s var(--ease-out) infinite;
}
html[data-theme="bright"] main > .band h1,
html[data-theme="light"] main > .band h1 {
  color: #f6f1e8;
}
@keyframes heroNeon {
  0%, 100% {
    text-shadow:
      0 0 1px #fdfbf6,
      0 0 10px rgba(255, 94, 158, .85),
      0 0 26px rgba(255, 94, 158, .6),
      0 0 54px rgba(255, 94, 158, .4);
  }
  50% {
    text-shadow:
      0 0 1px #fdfbf6,
      0 0 16px rgba(255, 110, 190, 1),
      0 0 40px rgba(255, 94, 158, .85),
      0 0 84px rgba(255, 94, 158, .55);
  }
}
@keyframes heroNeonSunset {
  0%, 100% {
    text-shadow:
      0 0 1px #fff6ea,
      0 0 10px rgba(255, 94, 66, .9),
      0 0 26px rgba(255, 94, 66, .65),
      0 0 54px rgba(232, 80, 58, .45);
  }
  50% {
    text-shadow:
      0 0 1px #fff6ea,
      0 0 16px rgba(255, 138, 92, 1),
      0 0 40px rgba(255, 94, 66, .9),
      0 0 84px rgba(255, 94, 66, .55);
  }
}
@keyframes heroNeonLagoon {
  0%, 100% {
    text-shadow:
      0 0 1px #fdfbf6,
      0 0 10px rgba(111, 224, 207, .85),
      0 0 26px rgba(74, 193, 170, .6),
      0 0 54px rgba(0, 160, 224, .35);
  }
  50% {
    text-shadow:
      0 0 1px #fdfbf6,
      0 0 16px rgba(111, 224, 207, 1),
      0 0 40px rgba(74, 193, 170, .85),
      0 0 84px rgba(111, 224, 207, .5);
  }
}
html[data-theme="sunset"] .hero h1,
html[data-theme="sunset"] main h1 { animation: heroNeonSunset 4s var(--ease-out) infinite; color: #fff6ea; }
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] main h1 { animation: heroNeonLagoon 4s var(--ease-out) infinite; }
html[data-motion="reduce"] .hero h1,
html[data-motion="reduce"] main h1 { animation: none; text-shadow: 0 0 1px #fdfbf6, 0 0 14px rgba(255, 94, 158, .8), 0 0 34px rgba(255, 94, 158, .5); }
html[data-motion="reduce"][data-theme="sunset"] .hero h1,
html[data-motion="reduce"][data-theme="sunset"] main h1 { text-shadow: 0 0 1px #fff6ea, 0 0 14px rgba(255, 94, 66, .85), 0 0 34px rgba(255, 94, 66, .5); }
html[data-motion="reduce"][data-theme="dark"] .hero h1,
html[data-motion="reduce"][data-theme="dark"] main h1 { text-shadow: 0 0 1px #fdfbf6, 0 0 14px rgba(111, 224, 207, .85), 0 0 34px rgba(74, 193, 170, .5); }
@media (prefers-reduced-motion: reduce) {
  .hero h1, main h1 { animation: none; text-shadow: 0 0 1px #fdfbf6, 0 0 14px rgba(255, 94, 158, .8), 0 0 34px rgba(255, 94, 158, .5); }
  html[data-theme="sunset"] .hero h1,
  html[data-theme="sunset"] main h1 { text-shadow: 0 0 1px #fff6ea, 0 0 14px rgba(255, 94, 66, .85), 0 0 34px rgba(255, 94, 66, .5); }
  html[data-theme="dark"] .hero h1,
  html[data-theme="dark"] main h1 { text-shadow: 0 0 1px #fdfbf6, 0 0 14px rgba(111, 224, 207, .85), 0 0 34px rgba(74, 193, 170, .5); }
}

/* ---------- High contrast overlays ---------- */
html[data-contrast="high"][data-theme="bright"], html[data-contrast="high"][data-theme="light"] {
  --ink: #ffffff;
  --ink-soft: #f6f1e8;
  --muted: #e7efe8;
  --hairline: rgba(246, 241, 232, .55);
  --teal: #4ac1aa;
  --gulf: #b6f0e4;
}
html[data-contrast="high"][data-theme="dark"] {
  --ink: #ffffff;
  --ink-soft: #fdfbf6;
  --muted: #cfe4de;
  --hairline: rgba(111, 224, 207, .55);
  --teal: #6fe0cf;
  --gulf: #4fc3f7;
}
html[data-contrast="high"][data-theme="sunset"] {
  --ink: #fff6e8;
  --ink-soft: #f8ead6;
  --muted: #e0c0b2;
  --hairline: rgba(255, 170, 130, .55);
  --teal: #ff9a70;
  --gulf: #ff7a92;
}

/* ---------- Text size ---------- */
html { font-size: 16px; }
html[data-text="110"] { font-size: 17.6px; }
html[data-text="125"] { font-size: 20px; }

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand-2);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: var(--page-bg);
}

h1, h2, h3, .wordmark {
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  line-height: 1.15;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin: 0 0 .5em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 .6em; }
h3 { font-size: 1.15rem; margin: 0 0 .4em; }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: var(--gulf); }
img { max-width: 100%; height: auto; display: block; }

/* focus rings everywhere interactive */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gulf);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--plaque-navy);
  color: #fdfbf6;
  padding: .6rem 1rem;
  border-radius: 8px;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: .75rem; }

/* ============================================================
   Header: plaque teal, navy text, 2px gold hairline
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--plaque-teal);
  color: var(--plaque-navy);
  border-bottom: 2px solid var(--gold);
}
html[data-theme="sunset"] .site-header {
  background: #3a1624;
  color: #fff6ea;
  border-bottom-color: #ff8a5c;
}
html[data-theme="sunset"] .brand,
html[data-theme="sunset"] .brand .wordmark,
html[data-theme="sunset"] .site-nav a,
html[data-theme="sunset"] .site-nav summary {
  color: #fff6ea;
}
html[data-theme="sunset"] .site-nav a:hover,
html[data-theme="sunset"] .site-nav summary:hover {
  background: rgba(255, 246, 234, .12);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: var(--header-h);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--plaque-navy);
  flex-shrink: 0;
}
.brand img,
.brand-logo {
  width: auto;
  height: 46px;
  max-height: calc(var(--header-h) - 16px);
  animation: logoBreathe 4s var(--ease-out) infinite;
  transform-origin: left center;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
}
.brand .wordmark {
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.15;
  letter-spacing: .01em;
  flex-shrink: 0;
  color: inherit;
}
.brand .wordmark small {
  display: block;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: 1;
}
.book-cue {
  display: inline-block;
  margin-top: .75rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: var(--teal);
  color: var(--btn-ink);
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .01em;
}
html[data-theme="sunset"] .card .book-cue {
  background: #ffb27a;
  color: #2a1520;
}
.host-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .2rem 0 1.1rem;
}
.host-badge {
  display: inline-flex;
  align-items: center;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: #fff6ea;
  color: #17323a;
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(23, 50, 58, .25);
}
.hero .host-badges { margin-top: -.4rem; }
a.host-badge,
html[data-theme="bright"] main a.host-badge,
html[data-theme="light"] main a.host-badge,
html[data-theme="dark"] main a.host-badge,
html[data-theme="sunset"] main a.host-badge {
  background: #fff6ea;
  color: #17323a;
}
.site-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.site-nav a, .site-nav summary {
  color: var(--plaque-navy);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  padding: .45rem .7rem;
  border-radius: 8px;
  list-style: none;
  cursor: pointer;
}
.site-nav a:hover, .site-nav summary:hover { background: rgba(23, 50, 58, .12); }
.site-nav details { position: relative; }
.site-nav details ul {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 14px 40px var(--shadow-ink), 0 0 24px var(--glow-rest);
  min-width: 180px;
}
.site-nav details ul a { display: block; color: var(--ink); }
.nav-toggle { display: none; }

.site-header { overflow: visible; }
.header-cta {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
}
.site-nav .theme-switch { display: none; }
.theme-switch { position: relative; }
.theme-switch > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  height: calc(var(--header-h) - 16px);
  min-height: 0;
  max-height: calc(var(--header-h) - 16px);
  padding: 0 1.15rem;
  border-radius: var(--r-btn);
  white-space: nowrap;
  background: rgba(23, 50, 58, .1);
  color: var(--plaque-navy);
}
.theme-switch > summary::-webkit-details-marker { display: none; }
.theme-switch[open] > summary { background: rgba(23, 50, 58, .16); }
.theme-switch ul {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 120;
  margin: 0;
  padding: .35rem;
  list-style: none;
  min-width: 10.5rem;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.theme-switch li { margin: 0; }
.theme-switch button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: #17323a;
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  padding: .5rem .65rem;
  border-radius: 8px;
  cursor: pointer;
}
.theme-switch button[aria-pressed="true"] {
  background: var(--plaque-teal);
  color: #17323a;
}
html[data-theme="sunset"] .theme-switch > summary {
  background: rgba(255, 246, 234, .12);
  color: #fff6ea;
}
html[data-theme="sunset"] .theme-switch[open] > summary {
  background: rgba(255, 246, 234, .2);
}
html[data-theme="dark"] .theme-switch > summary {
  background: rgba(111, 224, 207, .14);
  color: #e8fff8;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--r-btn);
  padding: .7rem 1.35rem;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn-primary { background: var(--teal); color: #fdfbf6; }
html[data-theme="dark"] .btn-primary { color: var(--btn-ink); }
.btn-secondary {
  background: transparent;
  color: var(--teal);
  box-shadow: inset 0 0 0 2px var(--teal);
}
html[data-theme="sunset"] .btn-secondary {
  background: #3a1624;
  color: #fff6ea;
  box-shadow: inset 0 0 0 2px #ffb27a;
}
html[data-theme="dark"] .btn-secondary {
  background: #0d2630;
  color: #e8fff8;
  box-shadow: inset 0 0 0 2px #6fe0cf;
}
/* Hero pair: identical box on every theme. Rings stay on .breathe / .breathe-alt. */
.hero .actions {
  display: flex;
  gap: 2.75rem;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}
.hero .actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 16rem;
  width: 16rem;
  max-width: 16rem;
  min-height: 3.15rem;
  height: 3.15rem;
  padding: 0 1.4rem;
  border-radius: var(--r-btn);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.hero .actions .btn,
html[data-theme="sunset"] .hero .actions .btn,
html[data-theme="dark"] .hero .actions .btn {
  background: #4ac1aa;
  color: #17323a;
}
@media (max-width: 42rem) {
  .hero .actions {
    justify-content: center;
    gap: 1.65rem;
  }
}
.site-header .btn-primary,
.site-nav .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  align-self: center;
  height: calc(var(--header-h) - 16px);
  min-height: 0;
  max-height: calc(var(--header-h) - 16px);
  padding: 0 1.15rem;
  border-radius: var(--r-btn);
  line-height: 1;
  white-space: nowrap;
}
/* Header Check Dates: same neon language as the hero pair.
   Fill stays the hero teal, with a navy edge so the pill does not
   vanish into the plaque-teal bar. Rings keep cycling + breathing. */
.site-header .btn.breathe,
.site-header .btn.breathe-alt,
.site-nav .btn.breathe,
.site-nav .btn.breathe-alt {
  overflow: visible;
  background: #4ac1aa;
  color: #17323a;
  box-shadow:
    0 0 0 2px #17323a,
    0 0 18px 3px rgba(0, 160, 224, .55),
    0 0 0 3px rgba(111, 224, 207, .55);
}
.site-header .btn.breathe::before,
.site-nav .btn.breathe::before {
  box-shadow: 0 0 30px 8px rgba(240, 255, 248, .98), inset 0 0 0 3px #6fe0cf;
}
.site-header .btn.breathe::after,
.site-nav .btn.breathe::after {
  box-shadow: 0 0 34px 9px rgba(0, 160, 224, .95), inset 0 0 0 3px #00a0e0;
}
html[data-theme="sunset"] .site-header .btn.breathe,
html[data-theme="sunset"] .site-nav .btn.breathe {
  background: #4ac1aa;
  color: #17323a;
  box-shadow:
    0 0 0 2px #fff6ea,
    0 0 18px 3px rgba(255, 94, 66, .6),
    0 0 0 3px rgba(255, 178, 122, .55);
}
html[data-theme="sunset"] .site-header .btn.breathe::before,
html[data-theme="sunset"] .site-nav .btn.breathe::before {
  box-shadow: 0 0 30px 8px rgba(255, 178, 122, .98), inset 0 0 0 3px #ffb27a;
}
html[data-theme="sunset"] .site-header .btn.breathe::after,
html[data-theme="sunset"] .site-nav .btn.breathe::after {
  box-shadow: 0 0 34px 9px rgba(255, 94, 66, .95), inset 0 0 0 3px #ff5e42;
}
html[data-theme="dark"] .site-header .btn.breathe,
html[data-theme="dark"] .site-nav .btn.breathe {
  box-shadow:
    0 0 0 2px #e8fff8,
    0 0 18px 3px rgba(111, 224, 207, .6),
    0 0 0 3px rgba(0, 160, 224, .5);
}
html[data-theme="sunset"] main a:not(.btn):not(.card) { color: #ffc4a0; }
html[data-theme="dark"] main a:not(.btn):not(.card) { color: #6fe0cf; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
main .band .btn-secondary.breathe-alt {
  background: var(--teal);
  color: #fdfbf6;
  box-shadow: none;
}
html[data-theme="dark"] main .band .btn-secondary.breathe-alt { color: var(--btn-ink); }
html[data-theme="sunset"] main .band .btn-secondary.breathe-alt {
  background: #ff8a5c;
  color: #2a1528;
}

/* ============================================================
   The Breathe: the ONLY neon on the site
   3px ring just outside the border, glow travels
   plaque teal -> gulf -> fiji aqua, 4s cycle, 4% swell
   ============================================================ */
.breathe {
  position: relative;
  z-index: 0;
  box-shadow: 0 0 16px 2px rgba(0, 132, 168, .5), 0 0 0 3px rgba(0, 132, 168, .35);
  animation: breatheScale 4s var(--ease-out) infinite;
}
.breathe::before, .breathe::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: calc(var(--r-btn) + 7px);
  pointer-events: none;
  z-index: -1;
}
.breathe-card.breathe::before, .breathe-card.breathe::after { border-radius: calc(var(--r-card) + 7px); }
.booking-card.breathe,
.booking-card.breathe-alt {
  animation: none;
  transform: none;
}
.breathe::before {
  box-shadow: 0 0 22px 4px rgba(74, 193, 170, .85), inset 0 0 0 3px #4ac1aa;
  animation: ringA 4s var(--ease-out) infinite;
}
.breathe::after {
  box-shadow: 0 0 26px 6px rgba(111, 224, 207, .9), inset 0 0 0 3px #6fe0cf;
  opacity: 0;
  animation: ringB 4s var(--ease-out) infinite;
}
@keyframes ringA { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ringB { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes breatheScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes logoBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.01); } }

/* Gold / ember pulse, 2s late so it swells when Check Dates rests */
.breathe-alt {
  position: relative;
  z-index: 0;
  box-shadow: 0 0 16px 2px rgba(0, 132, 168, .5), 0 0 0 3px rgba(0, 132, 168, .35);
  animation: breatheScale 4s var(--ease-out) 2s infinite;
}
.breathe-alt::before, .breathe-alt::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: calc(var(--r-btn) + 7px);
  pointer-events: none;
  z-index: -1;
}
.breathe-card.breathe-alt::before,
.breathe-card.breathe-alt::after { border-radius: calc(var(--r-card) + 7px); }
.breathe-alt::before {
  box-shadow: 0 0 22px 4px rgba(74, 193, 170, .85), inset 0 0 0 3px #4ac1aa;
  animation: ringA 4s var(--ease-out) 2s infinite;
}
.breathe-alt::after {
  box-shadow: 0 0 26px 6px rgba(111, 224, 207, .9), inset 0 0 0 3px #6fe0cf;
  opacity: 0;
  animation: ringB 4s var(--ease-out) 2s infinite;
}
html[data-theme="sunset"] .breathe {
  box-shadow: 0 0 16px 2px rgba(255, 94, 66, .5), 0 0 0 3px rgba(255, 94, 66, .35);
}
html[data-theme="sunset"] .breathe::before {
  box-shadow: 0 0 22px 4px rgba(255, 138, 92, .88), inset 0 0 0 3px #ff8a5c;
}
html[data-theme="sunset"] .breathe::after {
  box-shadow: 0 0 26px 6px rgba(255, 178, 122, .9), inset 0 0 0 3px #ffb27a;
}
html[data-theme="sunset"] .breathe-alt {
  box-shadow: 0 0 18px 3px rgba(255, 138, 92, .55), 0 0 0 3px rgba(255, 178, 122, .4);
}
html[data-theme="sunset"] .breathe-alt::before {
  box-shadow: 0 0 24px 5px rgba(255, 178, 122, .9), inset 0 0 0 3px #ffb27a;
}
html[data-theme="sunset"] .breathe-alt::after {
  box-shadow: 0 0 28px 7px rgba(255, 94, 66, .85), inset 0 0 0 3px #ff5e42;
}
html[data-theme="dark"] .breathe,
html[data-theme="dark"] .breathe-alt {
  box-shadow: 0 0 16px 2px rgba(111, 224, 207, .45), 0 0 0 3px rgba(111, 224, 207, .35);
}

/* ============================================================
   Ambient light pools (transform/opacity only)
   ============================================================ */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.ambient span {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .5;
}
.ambient span:first-child {
  left: -18vmax;
  top: -12vmax;
  background: radial-gradient(circle, rgba(111, 224, 207, .30), transparent 62%);
  animation: driftA 46s var(--ease-out) infinite alternate;
}
.ambient span:last-child {
  right: -22vmax;
  bottom: -16vmax;
  background: radial-gradient(circle, rgba(0, 132, 168, .26), transparent 62%);
  animation: driftB 58s var(--ease-out) infinite alternate;
}
@keyframes driftA { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(9vmax, 6vmax, 0); } }
@keyframes driftB { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-8vmax, -7vmax, 0); } }

/* Home Sunset: same ball + dusk as drawSunset, GPU layer, never over photos */
.sunset-follow {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(90, 40, 72, 0.92) 0%, rgba(210, 80, 90, 0.92) 34%, rgba(255, 140, 96, 0.9) 60%, rgba(72, 28, 58, 0.94) 100%);
}
body.paint-dark .sunset-follow {
  background: linear-gradient(180deg, rgba(58, 18, 52, 0.97) 0%, rgba(150, 44, 74, 0.95) 34%, rgba(232, 90, 78, 0.94) 60%, rgba(48, 16, 46, 0.97) 100%);
}
body.home.show-sunset .sunset-follow { display: block; }
body.home.show-follow .ambient { visibility: hidden; }
body.home.show-follow .light-show-wrap,
html[data-theme="bright"] body.gulf-bg .light-show-wrap,
html[data-theme="light"] body.gulf-bg .light-show-wrap { display: none; }
body.home.show-follow .card,
body.home.show-follow .booking-card,
body.home.show-follow .split img {
  position: relative;
  z-index: 1;
}

/* Home Gulf: same water as drawGulf, GPU layer, works on Bright */
.gulf-follow {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  contain: strict;
  background:
    linear-gradient(180deg, rgba(214, 244, 238, 0.94) 0%, rgba(148, 222, 208, 0.95) 30%, rgba(90, 196, 176, 0.96) 62%, rgba(74, 193, 170, 0.97) 100%);
}
body.paint-dark .gulf-follow {
  background: linear-gradient(180deg, rgba(9, 26, 34, 0.96) 0%, rgba(13, 58, 66, 0.95) 30%, rgba(16, 84, 92, 0.95) 62%, rgba(8, 40, 52, 0.97) 100%);
}
.gulf-follow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  height: 2px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 8px rgba(111, 224, 207, 0.35);
}
body.home.show-gulf .gulf-follow { display: block; }

/* Home Moon Path: same night as drawMoon, GPU layer, works on Bright */
.moon-follow {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  contain: strict;
  background: linear-gradient(180deg, rgba(28, 64, 78, 0.88) 0%, rgba(42, 110, 118, 0.88) 50%, rgba(56, 140, 148, 0.9) 100%);
}
body.paint-dark .moon-follow {
  background: linear-gradient(180deg, rgba(9, 26, 34, 0.96) 0%, rgba(13, 58, 66, 0.95) 50%, rgba(16, 84, 92, 0.95) 100%);
}
.moon-follow span {
  position: absolute;
  left: 50%;
  top: 16%;
  width: min(12vw, 6.5rem);
  height: min(12vw, 6.5rem);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f4fffA 0%, #b4f0e4 40%, rgba(180, 240, 228, 0) 72%);
  box-shadow: 0 0 30px rgba(190, 245, 232, 0.9), 0 0 90px rgba(180, 240, 228, 0.45);
  transform: translate3d(-50%, -50%, 0);
  animation: sunsetFollow 10s var(--ease-out) infinite;
}
body.home.show-moon .moon-follow { display: block; }
body.home.show-moon,
body.home.show-sunset,
body.show-glow {
  --muted: #f4dccb;
  --ink-soft: #f8eee2;
}
body.home.show-moon main > .band h2,
body.home.show-moon main > .band > .wrap > p,
body.home.show-moon main > .band .split > div > p,
body.home.show-moon main > .band .awards,
body.home.show-sunset main > .band h2,
body.home.show-sunset main > .band > .wrap > p,
body.home.show-sunset main > .band .split > div > p,
body.home.show-sunset main > .band .awards,
body.show-glow main > .band h2,
body.show-glow main > .band > .wrap > p,
body.show-glow main > .band .split > div > p,
body.show-glow main > .band .awards,
html[data-theme="bright"] body.home.gulf-bg main > .band h2,
html[data-theme="bright"] body.home.gulf-bg main > .band > .wrap > p,
html[data-theme="bright"] body.home.gulf-bg main > .band .split > div > p,
html[data-theme="bright"] body.home.gulf-bg main > .band .awards,
html[data-theme="light"] body.home.gulf-bg main > .band h2,
html[data-theme="light"] body.home.gulf-bg main > .band > .wrap > p,
html[data-theme="light"] body.home.gulf-bg main > .band .split > div > p,
html[data-theme="light"] body.home.gulf-bg main > .band .awards {
  color: #f6f1e8;
  text-shadow: none;
}
html[data-theme="sunset"] main > .band h2,
html[data-theme="sunset"] main > .band h3,
html[data-theme="sunset"] main > .band > .wrap > p,
html[data-theme="sunset"] main > .band .split > div > p,
html[data-theme="sunset"] main > .band .awards,
html[data-theme="sunset"] .brand .wordmark,
html[data-theme="sunset"] .brand .wordmark small {
  color: #fff6ea;
  opacity: 1;
  text-shadow: none;
}
/* Bright cards stay dark ink. Sunset / Lagoon cards stay cream. Never mix. */
html[data-theme="bright"] body.home.gulf-bg .card,
html[data-theme="bright"] body.home.gulf-bg .card p,
html[data-theme="bright"] body.home.gulf-bg .card span,
html[data-theme="bright"] body.home.gulf-bg .booking-card,
html[data-theme="bright"] body.home.gulf-bg .booking-card p,
html[data-theme="bright"] body.home.gulf-bg .booking-card h2,
html[data-theme="light"] body.home.gulf-bg .card,
html[data-theme="light"] body.home.gulf-bg .card p,
html[data-theme="light"] body.home.gulf-bg .card span,
html[data-theme="light"] body.home.gulf-bg .booking-card,
html[data-theme="light"] body.home.gulf-bg .booking-card p,
html[data-theme="light"] body.home.gulf-bg .booking-card h2,
html[data-theme="bright"] body.home.show-moon .card,
html[data-theme="bright"] body.home.show-moon .card p,
html[data-theme="bright"] body.home.show-moon .card span,
html[data-theme="bright"] body.home.show-moon .booking-card,
html[data-theme="bright"] body.home.show-moon .booking-card p,
html[data-theme="bright"] body.home.show-moon .booking-card h2,
html[data-theme="bright"] body.home.show-sunset .card,
html[data-theme="bright"] body.home.show-sunset .card p,
html[data-theme="bright"] body.home.show-sunset .card span,
html[data-theme="bright"] body.home.show-sunset .booking-card,
html[data-theme="bright"] body.home.show-sunset .booking-card p,
html[data-theme="bright"] body.home.show-sunset .booking-card h2,
html[data-theme="light"] body.home.show-moon .card,
html[data-theme="light"] body.home.show-moon .card p,
html[data-theme="light"] body.home.show-moon .card span,
html[data-theme="light"] body.home.show-moon .booking-card,
html[data-theme="light"] body.home.show-moon .booking-card p,
html[data-theme="light"] body.home.show-moon .booking-card h2,
html[data-theme="light"] body.home.show-sunset .card,
html[data-theme="light"] body.home.show-sunset .card p,
html[data-theme="light"] body.home.show-sunset .card span,
html[data-theme="light"] body.home.show-sunset .booking-card,
html[data-theme="light"] body.home.show-sunset .booking-card p,
html[data-theme="light"] body.home.show-sunset .booking-card h2,
html[data-theme="bright"] body.show-glow .card,
html[data-theme="bright"] body.show-glow .card p,
html[data-theme="bright"] body.show-glow .card span,
html[data-theme="bright"] body.show-glow .booking-card,
html[data-theme="bright"] body.show-glow .booking-card p,
html[data-theme="bright"] body.show-glow .booking-card h2,
html[data-theme="light"] body.show-glow .card,
html[data-theme="light"] body.show-glow .card p,
html[data-theme="light"] body.show-glow .card span,
html[data-theme="light"] body.show-glow .booking-card,
html[data-theme="light"] body.show-glow .booking-card p,
html[data-theme="light"] body.show-glow .booking-card h2 {
  color: #17323a;
  text-shadow: none;
}
html[data-theme="bright"] body.home.gulf-bg .card .unit-meta,
html[data-theme="bright"] body.home.gulf-bg .booking-note,
html[data-theme="bright"] body.home.gulf-bg .booking-card .fallback,
html[data-theme="light"] body.home.gulf-bg .card .unit-meta,
html[data-theme="light"] body.home.gulf-bg .booking-note,
html[data-theme="light"] body.home.gulf-bg .booking-card .fallback,
html[data-theme="bright"] body.home.show-moon .card .unit-meta,
html[data-theme="bright"] body.home.show-moon .booking-note,
html[data-theme="bright"] body.home.show-moon .booking-card .fallback,
html[data-theme="bright"] body.home.show-sunset .card .unit-meta,
html[data-theme="bright"] body.home.show-sunset .booking-note,
html[data-theme="bright"] body.home.show-sunset .booking-card .fallback,
html[data-theme="light"] body.home.show-moon .card .unit-meta,
html[data-theme="light"] body.home.show-moon .booking-note,
html[data-theme="light"] body.home.show-moon .booking-card .fallback,
html[data-theme="light"] body.home.show-sunset .card .unit-meta,
html[data-theme="light"] body.home.show-sunset .booking-note,
html[data-theme="light"] body.home.show-sunset .booking-card .fallback {
  color: #3d4a4c;
}
html[data-theme="sunset"] .card,
html[data-theme="sunset"] .card p,
html[data-theme="sunset"] .card span,
html[data-theme="sunset"] .booking-card,
html[data-theme="sunset"] .booking-card p,
html[data-theme="sunset"] .booking-card h2,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .card span,
html[data-theme="dark"] .booking-card,
html[data-theme="dark"] .booking-card p,
html[data-theme="dark"] .booking-card h2 {
  color: var(--ink);
  text-shadow: none;
}
html[data-theme="sunset"] .unit-meta,
html[data-theme="sunset"] .booking-note,
html[data-theme="sunset"] .booking-card .fallback,
html[data-theme="dark"] .unit-meta,
html[data-theme="dark"] .booking-note,
html[data-theme="dark"] .booking-card .fallback {
  color: var(--muted);
}
body.home.show-moon .site-footer .footer-wordmark,
body.home.show-moon .site-footer h3,
body.home.show-moon .site-footer .footer-cols p,
body.home.show-moon .site-footer .footer-cols li,
body.home.show-moon .site-footer .footer-cols a,
body.home.show-moon .site-footer .pill-group,
body.home.show-moon .site-footer > .wrap > p,
body.home.show-sunset .site-footer .footer-wordmark,
body.home.show-sunset .site-footer h3,
body.home.show-sunset .site-footer .footer-cols p,
body.home.show-sunset .site-footer .footer-cols li,
body.home.show-sunset .site-footer .footer-cols a,
body.home.show-sunset .site-footer .pill-group,
body.home.show-sunset .site-footer > .wrap > p,
body.show-glow .site-footer .footer-wordmark,
body.show-glow .site-footer h3,
body.show-glow .site-footer .footer-cols p,
body.show-glow .site-footer .footer-cols li,
body.show-glow .site-footer .footer-cols a,
body.show-glow .site-footer .pill-group,
body.show-glow .site-footer > .wrap > p,
html[data-theme="sunset"] .site-footer .footer-wordmark,
html[data-theme="sunset"] .site-footer h3,
html[data-theme="sunset"] .site-footer .footer-cols p,
html[data-theme="sunset"] .site-footer .footer-cols li,
html[data-theme="sunset"] .site-footer .footer-cols a,
html[data-theme="sunset"] .site-footer .pill-group,
html[data-theme="sunset"] .site-footer > .wrap > p {
  color: #fff8f0;
  text-shadow: 0 1px 10px rgba(20, 8, 16, 0.72);
}
body.home.show-sunset .site-footer .footer-cols a:hover,
html[data-theme="sunset"] .site-footer .footer-cols a:hover {
  color: #ffe0c2;
}
html[data-theme="sunset"] .ambient { visibility: visible; }
html[data-theme="sunset"] .ambient span:first-child {
  background: radial-gradient(circle, rgba(255, 94, 66, .34), transparent 62%);
}
html[data-theme="sunset"] .ambient span:last-child {
  background: radial-gradient(circle, rgba(120, 28, 64, .36), transparent 62%);
}
.sunset-follow span {
  position: absolute;
  left: 50%;
  top: 34%;
  width: min(17vw, 9.5rem);
  height: min(17vw, 9.5rem);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #ffbe6e 0%, #ff5e42 38%, #e8503a 72%);
  box-shadow:
    0 0 42px rgba(255, 120, 70, 0.95),
    0 0 120px rgba(255, 110, 80, 0.55),
    0 0 220px rgba(255, 110, 80, 0.3);
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
  animation: sunsetFollow 8s var(--ease-out) infinite;
}
@keyframes sunsetFollow {
  0%, 100% { transform: translate3d(-50%, -50%, 0) scale(1); }
  50% { transform: translate3d(-50%, -46%, 0) scale(1.04); }
}
html[data-motion="reduce"] .sunset-follow span,
html[data-motion="reduce"] .moon-follow span { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .sunset-follow span,
  .moon-follow span { animation: none; }
}
/* ============================================================
   Light show canvas
   ============================================================ */
.light-show-wrap {
  display: none;
  position: relative;
  height: 62vh;
  min-height: 380px;
  border-top: 1px solid var(--hairline);
  overflow: hidden;
  pointer-events: none;
}
body.show-on .light-show-wrap { display: block; }
body.show-glow .light-show-wrap {
  position: fixed;
  inset: 0;
  z-index: -1;
  height: auto;
  min-height: 0;
  border-top: 0;
}
.light-show {
  pointer-events: none;
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
}
.light-show[hidden] { display: none; }
.gulf-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.gulf-backdrop[hidden] { display: none !important; }
html[data-theme="bright"] body.home.gulf-bg .gulf-backdrop,
html[data-theme="light"] body.home.gulf-bg .gulf-backdrop,
html[data-theme="bright"] body.gulf-bg .gulf-backdrop,
html[data-theme="light"] body.gulf-bg .gulf-backdrop {
  display: block;
}
html[data-theme="bright"] body.gulf-bg:not(.home) .card,
html[data-theme="light"] body.gulf-bg:not(.home) .card,
html[data-theme="bright"] body.gulf-bg:not(.home) .card p,
html[data-theme="light"] body.gulf-bg:not(.home) .card p {
  color: #17323a;
  text-shadow: none;
}
html[data-theme="bright"] body.home.gulf-bg,
html[data-theme="light"] body.home.gulf-bg,
html[data-theme="bright"] body.gulf-bg,
html[data-theme="light"] body.gulf-bg {
  background: transparent;
}
html[data-theme="bright"] body.gulf-bg:not(.home) .band,
html[data-theme="light"] body.gulf-bg:not(.home) .band {
  background: transparent;
  border-top-color: rgba(253, 251, 246, .22);
}
html[data-theme="bright"] body.gulf-bg:not(.home) main > .band h1,
html[data-theme="light"] body.gulf-bg:not(.home) main > .band h1,
html[data-theme="bright"] body.gulf-bg:not(.home) main > .band h2,
html[data-theme="light"] body.gulf-bg:not(.home) main > .band h2,
html[data-theme="bright"] body.gulf-bg:not(.home) main > .band > .wrap > p,
html[data-theme="light"] body.gulf-bg:not(.home) main > .band > .wrap > p {
  color: #f6f1e8;
  text-shadow: none;
}
html[data-theme="bright"] body.home.gulf-bg .ambient,
html[data-theme="light"] body.home.gulf-bg .ambient,
html[data-theme="bright"] .gulf-follow,
html[data-theme="light"] .gulf-follow {
  visibility: hidden;
}

/* ============================================================
   Layout bands and cards
   ============================================================ */
main { display: block; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.band { padding: 4rem 0; border-top: 1px solid var(--hairline); }
.band:first-of-type { border-top: 0; }
.band--shallows { background: var(--band-shallows); }
.band--gulf { background: var(--band-gulf); }

.card {
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px var(--shadow-ink), 0 10px 34px var(--glow-rest);
  transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
html[data-theme="sunset"] .card {
  background: #2a1528;
  border-color: rgba(255, 138, 92, .4);
  box-shadow: 0 0 0 2px rgba(255, 94, 66, .55), 0 0 22px rgba(255, 94, 66, .38), 0 10px 34px var(--shadow-ink);
  color: #fff6ea;
}
html[data-theme="sunset"] .card h3,
html[data-theme="sunset"] .card p {
  color: #fff6ea;
}
html[data-theme="sunset"] .review-card h2 { color: #fff6ea; }
html[data-theme="bright"] .review-card h2,
html[data-theme="light"] .review-card h2 { color: var(--teal); }
html[data-theme="bright"] body.home.gulf-bg .review-card,
html[data-theme="light"] body.home.gulf-bg .review-card {
  background: #fdfbf6;
  color: #17323a;
}
html[data-theme="bright"] body.home.gulf-bg main > .band .review-card h2,
html[data-theme="light"] body.home.gulf-bg main > .band .review-card h2 {
  color: #0f6e74;
  text-shadow: none;
}
html[data-theme="bright"] body.home.gulf-bg .review-card p,
html[data-theme="light"] body.home.gulf-bg .review-card p {
  color: #17323a;
  text-shadow: none;
}
html[data-theme="dark"] .card {
  background: #14333f;
  color: #f6f1e8;
}
.site-footer > .wrap > p:last-of-type {
  display: inline-block;
  padding: .35rem .8rem;
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--teal), 0 0 16px var(--glow-rest);
}
html[data-theme="sunset"] .site-footer > .wrap > p:last-of-type {
  box-shadow: 0 0 0 2px #ff5e42, 0 0 18px rgba(255, 94, 66, .5);
  color: #fff6ea;
}
html[data-theme="dark"] .site-footer > .wrap > p:last-of-type {
  box-shadow: 0 0 0 2px #6fe0cf, 0 0 16px rgba(111, 224, 207, .4);
}
.ls-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  margin: .85rem 0 0;
}
.ls-tools button {
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  padding: .35rem .7rem;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--raised);
  color: var(--ink);
  cursor: pointer;
}
.card:hover, .card:focus-within {
  box-shadow: 0 2px 4px var(--shadow-ink), 0 16px 54px var(--glow-hot);
}

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } }

.unit-card { overflow: visible; display: flex; flex-direction: column; }
.unit-card picture {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.unit-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.unit-card .pad { padding: 1.1rem 1.2rem 1.3rem; }
.unit-card h3 { margin-bottom: .15rem; }
.unit-card.breathe,
.unit-card.breathe-alt {
  animation: none;
  transform: none;
}
.unit-card.breathe::before,
.unit-card.breathe-alt::before {
  box-shadow: 0 0 30px 6px rgba(74, 193, 170, .95), inset 0 0 0 3px #4ac1aa;
}
.unit-card.breathe::after,
.unit-card.breathe-alt::after {
  box-shadow: 0 0 36px 8px rgba(111, 224, 207, 1), inset 0 0 0 3px #6fe0cf;
}
html[data-theme="sunset"] .unit-card.breathe::before,
html[data-theme="sunset"] .unit-card.breathe-alt::before {
  box-shadow: 0 0 30px 6px rgba(255, 138, 92, .95), inset 0 0 0 3px #ff8a5c;
}
html[data-theme="sunset"] .unit-card.breathe::after,
html[data-theme="sunset"] .unit-card.breathe-alt::after {
  box-shadow: 0 0 36px 8px rgba(255, 178, 122, .95), inset 0 0 0 3px #ffb27a;
}
.unit-meta { color: var(--muted); font-size: .92rem; margin-bottom: .8rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1rem; list-style: none; }
.chip {
  background: var(--sand-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .88rem;
  color: var(--ink-soft);
}
html[data-theme="sunset"] .chip,
html[data-theme="sunset"] .card .chip {
  background: #fff6ea;
  color: #2a1528;
  border-color: #ffb27a;
}
html[data-theme="dark"] .chip,
html[data-theme="dark"] .card .chip {
  background: #e8fff8;
  color: #0d2630;
  border-color: rgba(111, 224, 207, 0.35);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  z-index: 0;
  isolation: isolate;
  min-height: 78vh;
  display: grid;
  align-items: end;
  color: #fdfbf6;
  overflow: visible;
}
.hero picture {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-photo--dusk { display: none; }
html[data-theme="sunset"] .hero-photo--day { display: none; }
html[data-theme="sunset"] .hero {
  background: linear-gradient(180deg, #3d1f33 0%, #2a1a2e 42%, #1c1020 100%);
}
html[data-theme="sunset"] .hero-photo--dusk {
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: none;
}
html[data-theme="sunset"] .hero-photo--dusk .hero-img {
  max-width: none;
  object-fit: cover;
  object-position: center 48%;
}
html[data-theme="sunset"] .hero .scrim {
  background: linear-gradient(180deg, rgba(28, 16, 32, .08) 32%, rgba(28, 16, 32, .52) 100%);
}
.hero img.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero .scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(9, 26, 34, .05) 40%, rgba(9, 26, 34, .62) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding-bottom: 4rem; padding-top: 8rem; width: 100%; }
.hero h1, .hero p { color: #fdfbf6; }
.hero h1 {
  font-family: "Arial Black", "Avenir Next Heavy", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 8.5vw, 6rem);
  letter-spacing: -0.03em;
  line-height: 0.96;
  max-width: 11ch;
  text-shadow: 0 3px 26px rgba(9, 26, 34, .55);
}
.hero p.sub { font-size: 1.25rem; margin-bottom: 1.6rem; font-weight: 500; text-shadow: 0 1px 12px rgba(9, 26, 34, .6); }

/* unit page hero */
.hero-unit { min-height: 46vh; }
.hero-unit .wrap { padding-bottom: 2.5rem; padding-top: 6rem; }

/* ============================================================
   Booking mounts
   ============================================================ */
.booking-card {
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 1.5rem;
  box-shadow: 0 1px 2px var(--shadow-ink), 0 10px 34px var(--glow-rest);
}
.booking-card .widget-tag {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--muted);
  border: 1px dashed var(--hairline);
  border-radius: 999px;
  padding: .15rem .7rem;
  margin-bottom: .9rem;
}
.booking-form { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.booking-form label { font-size: .85rem; font-weight: 600; color: var(--ink-soft); display: grid; gap: .3rem; }
.booking-form input, .booking-form select {
  font: inherit;
  padding: .55rem .7rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--sand);
  color: var(--ink);
}
.booking-note { font-size: .85rem; color: var(--muted); margin: .8rem 0 0; }
.booking-card .fallback { font-size: .85rem; color: var(--muted); margin: .8rem 0 0; }
.lodgify-mount { min-height: 0; }
.lodgify-mount iframe,
iframe.lodgify-frame {
  display: block;
  width: 100%;
  border: 0;
  min-height: 220px;
  background: transparent;
}
.quote-results { display: grid; gap: .4rem; margin-top: 1rem; }
.quote-result { border-top: 1px solid var(--hairline); padding-top: 1rem; }
.quote-result h3 { margin: 0 0 .35rem; font-size: 1.2rem; }
.quote-total { font-weight: 700; margin: 0 0 .45rem; }
.quote-lines { list-style: none; padding: 0; margin: 0 0 .7rem; }
.quote-lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .92rem;
  padding: .18rem 0;
}
.quote-error { margin: .4rem 0 0; }
.from-rate { display: block; margin-top: .4rem; color: var(--muted); font-size: .85rem; }
#lodgify-search-bar, #lodgify-book-now-box { margin: .9rem 0 1.1rem; }

/* ribbon calendar stub */
.ribbon-cal {
  display: grid;
  grid-template-columns: 130px repeat(7, 1fr);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  font-size: .82rem;
  margin-top: 1rem;
}
.ribbon-cal > div {
  padding: .55rem .5rem;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  text-align: center;
  min-height: 2.4rem;
}
.ribbon-cal .rc-name { font-weight: 700; text-align: left; background: var(--sand-2); }
.ribbon-cal .rc-head { font-weight: 700; background: var(--sand-2); color: var(--muted); }
.ribbon-cal .rc-open { background: rgba(111, 224, 207, .28); }
.ribbon-cal .rc-booked { background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0, 132, 168, .18) 6px, rgba(0, 132, 168, .18) 8px); color: var(--muted); }

/* seasons table */
.seasons { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.seasons th, .seasons td {
  text-align: left;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--hairline);
}
.seasons th { font-size: .82rem; text-transform: none; color: var(--muted); }
.seasons tr:last-child td { border-bottom: 0; }

/* ============================================================
   Awards line
   ============================================================ */
.awards {
  text-align: center;
  font-size: .98rem;
  color: var(--ink-soft);
  letter-spacing: .01em;
}
.awards strong { color: var(--teal); font-weight: 700; }

/* ============================================================
   Split blocks
   ============================================================ */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .history-photo {
    position: static !important;
    top: auto !important;
    margin-bottom: 1.6rem;
    z-index: 0;
  }
  .timeline { position: relative; z-index: 1; }
}
.split picture { display: block; width: 100%; min-width: 0; }
.split img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 46%;
  border-radius: var(--r-card);
  box-shadow: 0 12px 40px var(--shadow-ink), 0 0 30px var(--glow-rest);
}

/* ============================================================
   Gallery
   ============================================================ */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.gallery figure { margin: 0; }
.gallery img { border-radius: 14px; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery figcaption { font-size: .85rem; color: var(--muted); margin-top: .4rem; }

/* ============================================================
   Timeline (History)
   ============================================================ */
.timeline { list-style: none; margin: 2rem 0 0; padding: 0 0 0 1.4rem; border-left: 3px solid var(--teal); }
.timeline li { position: relative; padding: 0 0 2rem 1.4rem; }
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1.4rem - 9px);
  top: .35rem;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 12px var(--glow-hot);
}
.timeline .year { font-family: Georgia, serif; font-weight: 700; color: var(--teal); font-size: 1.1rem; }
.history-island figure { margin: 0; }
.history-island img {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  box-shadow: 0 16px 50px var(--shadow-ink), 0 0 34px var(--glow-rest);
}
.history-island figcaption { font-size: .88rem; color: var(--muted); margin-top: .55rem; }

/* ============================================================
   Map with tappable pins
   ============================================================ */
.poster-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 720px;
  margin: 1.4rem auto 0;
}
.poster-row figure { margin: 0; }
.poster-row img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 16px 50px var(--shadow-ink), 0 0 34px var(--glow-rest);
  background: #f6f1e8;
}
.poster-row figcaption { font-size: .88rem; color: var(--muted); margin-top: .55rem; }
@media (max-width: 640px) { .poster-row { grid-template-columns: 1fr; max-width: 360px; } }
.photo-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 1.2rem auto 0;
}
.photo-row figure { margin: 0; }
.photo-row img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 12px 36px var(--shadow-ink);
}
.photo-row figcaption { font-size: .88rem; color: var(--muted); margin-top: .45rem; }
@media (max-width: 720px) { .photo-row { grid-template-columns: 1fr; max-width: 420px; } }
.map-wrap { position: relative; max-width: 560px; margin: 0 auto; overflow: visible; }
.map-wrap img { border-radius: var(--r-card); box-shadow: 0 16px 50px var(--shadow-ink), 0 0 34px var(--glow-rest); width: 100%; }
.pin {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--teal);
  border: 2px solid #fdfbf6;
  box-shadow: 0 3px 10px rgba(9, 26, 34, .35);
  cursor: pointer;
  padding: 0;
}
.pin-glyph {
  position: absolute;
  inset: 3px;
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  pointer-events: none;
  color: #fdfbf6;
}
.pin-glyph svg { width: 13px; height: 13px; display: block; }
.pin.pin-home {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  background: #4ac1aa;
  border: 3px solid #f0c010;
  z-index: 4;
}
.pin.pin-home.breathe { animation: none; }
.pin.pin-home.breathe::before,
.pin.pin-home.breathe::after {
  border-radius: 50%;
  inset: -8px;
}
.pin.pin-home .pin-glyph { color: #17323a; }
.pin.pin-home .pin-glyph svg { width: 15px; height: 15px; }
html[data-theme="sunset"] .pin.pin-home,
html[data-theme="dark"] .pin.pin-home {
  background: #4ac1aa;
  border-color: #f0c010;
}
html[data-theme="sunset"] .pin.pin-home.breathe {
  box-shadow: 0 0 14px 2px rgba(74, 193, 170, .45), 0 0 0 2px rgba(240, 192, 16, .55);
}
html[data-theme="sunset"] .pin.pin-home.breathe::before {
  box-shadow: 0 0 18px 3px rgba(74, 193, 170, .8), inset 0 0 0 2px #4ac1aa;
}
html[data-theme="sunset"] .pin.pin-home.breathe::after {
  box-shadow: 0 0 20px 4px rgba(240, 192, 16, .75), inset 0 0 0 2px #f0c010;
}
.pin:hover, .pin:focus-visible { background: var(--gulf); }
.pin.pin-home:hover, .pin.pin-home:focus-visible { background: #4ac1aa; }
.pin-card {
  position: absolute;
  z-index: 5;
  width: min(260px, 80vw);
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: .9rem 1rem;
  box-shadow: 0 14px 44px var(--shadow-ink), 0 0 26px var(--glow-hot);
  font-size: .9rem;
}
.pin-card h3 { margin: 0 0 .25rem; }
.pin-card p { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.pin-card a { display: inline-block; margin-top: .55rem; font-weight: 650; }
.pin-card button.close {
  position: absolute;
  top: .3rem;
  right: .5rem;
  background: none;
  border: 0;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--muted);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 4;
  pointer-events: auto;
  border-top: 1px solid var(--hairline);
  padding: 3.5rem 0 2rem;
  background: transparent;
}
html[data-theme="bright"] body.gulf-bg .site-footer,
html[data-theme="light"] body.gulf-bg .site-footer {
  background: rgba(253, 251, 246, 0.94);
  border-top: 1px solid rgba(23, 50, 58, 0.12);
}
.pet-note {
  margin-top: 1.1rem;
  max-width: 42rem;
  padding: .85rem 1.15rem;
  border-radius: 12px;
  background: #ffffff;
  color: #17323a;
  font-size: .9rem;
  line-height: 1.45;
  text-shadow: none;
}
html[data-theme="bright"] body.gulf-bg main > .band > .wrap > p.pet-note,
html[data-theme="light"] body.gulf-bg main > .band > .wrap > p.pet-note,
html[data-theme="bright"] body.home.gulf-bg main > .band > .wrap > p.pet-note,
html[data-theme="light"] body.home.gulf-bg main > .band > .wrap > p.pet-note {
  color: #17323a;
  text-shadow: none;
}
.footer-cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
@media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr; } }
.footer-cols h3 { font-size: 1rem; margin-bottom: .6rem; }
.footer-cols p, .footer-cols li { font-size: .92rem; color: var(--ink-soft); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.footer-cols a { color: var(--ink-soft); text-decoration: none; }
.footer-cols a:hover { color: var(--teal); text-decoration: underline; }
.footer-wordmark { font-family: "Iowan Old Style", Georgia, serif; font-weight: 700; font-size: 1.05rem; color: var(--ink); }

.pref-pills { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; padding-top: 1.6rem; border-top: 1px solid var(--hairline); }
.pill-group { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); }
.pill-group .pills { display: flex; border: 1px solid var(--hairline); border-radius: 999px; overflow: hidden; }
.pill-group .pills button {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: .82rem;
  padding: .3rem .75rem;
  cursor: pointer;
}
.pill-group .pills button[aria-pressed="true"] { background: var(--teal); color: #fdfbf6; }
html[data-theme="dark"] .pill-group .pills button[aria-pressed="true"] { color: var(--btn-ink); }

/* ============================================================
   Floating accessibility control + panel
   ============================================================ */
.a11y-fab {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 120;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--raised);
  color: var(--teal);
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 8px 26px var(--shadow-ink), 0 0 20px var(--glow-rest);
}
.a11y-panel {
  position: fixed;
  left: 1rem;
  bottom: 4.6rem;
  z-index: 120;
  width: min(320px, calc(100vw - 2rem));
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 18px 60px var(--shadow-ink), 0 0 34px var(--glow-hot);
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-size: 1.05rem; margin-bottom: .8rem; }
.a11y-panel fieldset { border: 0; margin: 0 0 .9rem; padding: 0; }
.a11y-panel legend { font-size: .85rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .35rem; }
.a11y-panel .opts { display: flex; gap: .4rem; flex-wrap: wrap; }
.a11y-panel .opts button {
  font: inherit;
  font-size: .85rem;
  border: 1px solid var(--hairline);
  background: var(--sand-2);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: .28rem .8rem;
  cursor: pointer;
}
.a11y-panel .opts button[aria-pressed="true"] { background: var(--teal); color: #fdfbf6; border-color: var(--teal); }
html[data-theme="dark"] .a11y-panel .opts button[aria-pressed="true"] { color: var(--btn-ink); }

/* ============================================================
   Arrival intro
   ============================================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #0d2630, #17323a);
  cursor: pointer;
  transition: opacity .5s var(--ease-out);
}
.intro.done { opacity: 0; pointer-events: none; }
.intro .horizon {
  position: absolute;
  left: 10vw;
  right: 10vw;
  top: 58%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6fe0cf, #4ac1aa, #6fe0cf, transparent);
  transform: scaleX(0);
  box-shadow: 0 0 24px 4px rgba(111, 224, 207, .7);
  animation: horizonDraw 1.1s var(--ease-out) .2s forwards;
}
.intro .plaque {
  width: min(720px, 92vw);
  height: auto;
  max-height: min(240px, 36vh);
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transform: translateY(46px);
  animation: plaqueRise 1.2s var(--ease-out) .8s forwards;
}
.intro .skip {
  position: absolute;
  bottom: 1.4rem;
  right: 1.6rem;
  color: #f6f1e8;
  opacity: .75;
  font-size: .9rem;
  background: none;
  border: 1px solid rgba(246, 241, 232, .4);
  border-radius: 999px;
  padding: .35rem 1rem;
  cursor: pointer;
}
@keyframes horizonDraw { to { transform: scaleX(1); } }
@keyframes plaqueRise { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   Success ring (transform/opacity only)
   ============================================================ */
.success-ring {
  position: fixed;
  z-index: 250;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 3px solid var(--fiji);
  box-shadow: 0 0 26px 6px rgba(111, 224, 207, .8);
  pointer-events: none;
  animation: ringExpand 1.1s var(--ease-out) forwards;
}
@keyframes ringExpand {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(14); opacity: 0; }
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 240;
  background: var(--raised);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: .8rem 1.2rem;
  box-shadow: 0 14px 44px var(--shadow-ink), 0 0 26px var(--glow-hot);
  font-size: .95rem;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
  max-width: min(520px, calc(100vw - 2rem));
  text-align: center;
}
.toast.show { opacity: 1; }

/* ============================================================
   Reduced motion: everything pauses, rim stays lit but static
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .breathe, .breathe::before, .breathe::after,
  .breathe-alt, .breathe-alt::before, .breathe-alt::after, .brand img,
  .ambient span, .intro .horizon, .intro .plaque { animation: none !important; }
}
html[data-motion="reduce"] .breathe,
html[data-motion="reduce"] .breathe::before,
html[data-motion="reduce"] .breathe::after,
html[data-motion="reduce"] .breathe-alt,
html[data-motion="reduce"] .breathe-alt::before,
html[data-motion="reduce"] .breathe-alt::after,
html[data-motion="reduce"] .brand img,
html[data-motion="reduce"] .ambient span { animation: none !important; }

@media (prefers-reduced-motion: reduce), (prefers-reduced-motion: no-preference) { }
html[data-motion="reduce"] .breathe::before, .breathe.no-anim::before,
html[data-motion="reduce"] .breathe-alt::before { opacity: 1; }
html[data-motion="reduce"] .breathe::after,
html[data-motion="reduce"] .breathe-alt::after { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .breathe::before, .breathe-alt::before { opacity: 1; }
  .breathe::after, .breathe-alt::after { opacity: .55; }
  .intro { display: none; }
}
html[data-motion="reduce"] .intro { display: none; }

/* ============================================================
   Responsive nav
   ============================================================ */
@media (max-width: 860px) {
  .nav-toggle {
    display: block;
    margin-left: auto;
    background: rgba(23, 50, 58, .12);
    border: 0;
    border-radius: 10px;
    color: var(--plaque-navy);
    font: inherit;
    font-weight: 700;
    padding: .45rem .8rem;
    cursor: pointer;
  }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: var(--plaque-teal);
    border-bottom: 2px solid var(--gold);
    padding: .6rem 1rem 1rem;
  }
  .site-nav.open { display: flex; }
  .site-nav a, .site-nav summary { padding: .7rem .5rem; }
  .site-nav details ul { position: static; margin: 0 0 .4rem; box-shadow: none; }
  .brand .wordmark small { display: none; }
  .header-cta { display: none; }
  .site-nav .btn { display: inline-flex; margin-top: .4rem; align-self: flex-start; height: 2.5rem; max-height: none; min-height: 2.5rem; width: auto; padding: 0 1.15rem; white-space: nowrap; }
  .brand img, .brand-logo { height: 36px; }
  .site-nav .theme-switch { display: block; margin-top: .45rem; align-self: flex-start; }
  .site-nav .theme-switch > summary {
    height: 2.5rem;
    min-height: 2.5rem;
    max-height: none;
    padding: 0 1.15rem;
    font-size: 1rem;
  }
  html[data-theme="sunset"] .site-nav {
    background: #3a1624;
    border-bottom-color: #ff8a5c;
  }
  html[data-theme="sunset"] .nav-toggle {
    background: rgba(255, 246, 234, .12);
    color: #fff6ea;
  }
  html[data-theme="dark"] .site-nav {
    background: #0d2630;
    border-bottom-color: #6fe0cf;
  }
}
@media (min-width: 861px) {
  .site-nav .btn,
  .site-nav .theme-switch { display: none; }
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .grid-3 { grid-template-columns: 1fr; } }

/* visible pin labels: small hand-lettered tags, placed to the side,
   pushed into the water where the landmark sits near an edge */
.pin { overflow: visible; }
.pin-tag {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%) rotate(-1.2deg);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: .62rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.2;
  padding: .1rem .42rem .14rem;
  background: #fdf6e3;
  color: #3b3227;
  border: 1.5px solid #b09b72;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(60, 45, 20, .25);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.pin-tag::after { content: none; }
.pin:nth-child(odd) .pin-tag { transform: translateY(-50%) rotate(1.4deg); }
.pin:nth-child(3n) .pin-tag { background: #eef6e7; border-color: #8fa876; }
.pin:nth-child(4n) .pin-tag { background: #e8f3f4; border-color: #7ba3a3; }

/* per-pin placements, tuned against the artwork */
.pin[data-title="The Don CeSar"] .pin-tag { left: auto; right: calc(100% + 8px); top: -30%; transform: rotate(-2deg); }
.pin[data-title="The Wharf and Red, White & Booze"] .pin-tag {
  left: auto;
  right: calc(100% + 8px);
  top: 4%;
  transform: rotate(-2deg);
  white-space: nowrap;
  width: auto;
  text-align: center;
}
.pin[data-title="8th Avenue"] .pin-tag { left: auto; right: calc(100% + 8px); }
.pin[data-title="The Hurricane"] .pin-tag { left: auto; right: calc(100% + 16px); top: 10%; }
.pin[data-title="The Walkover"] .pin-tag { left: auto; right: calc(100% + 8px); }
.pin[data-title="Paradise Grille and the Sunset Bell"] .pin-tag { left: auto; right: calc(100% + 8px); white-space: normal; width: 9.5em; text-align: center; }
.pin[data-title="Gulf Beaches Historical Museum"] .pin-tag { left: calc(100% + 6px); right: auto; white-space: normal; width: 8.4em; text-align: center; }
.pin[data-title="Dog Beach"] .pin-tag { left: 8%; top: calc(100% + 10px); transform: none; }
.pin[data-title="The South Tip"] .pin-tag { left: auto; right: calc(100% + 6px); top: auto; bottom: calc(100% + 6px); }
.pin.pin-shell { background: #f0c010; color: #17323a; }
.pin.pin-shell .pin-glyph { color: #17323a; }
.map-shells { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.map-shell {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  color: #f6f1e8;
  filter: drop-shadow(0 1px 1px rgba(23, 50, 58, .45));
}
.map-shell svg { width: 14px; height: 14px; display: block; }
html[data-theme="sunset"] .map-shell { color: #fff6ea; }
html[data-theme="dark"] .map-shell { color: #e8fff8; }
@media (max-width: 720px) {
  .map-shell:nth-child(n+4) { display: none; }
  .map-shell { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
  .map-shell svg { width: 12px; height: 12px; }
}
.pin[data-title="Merry Pier"] .pin-tag { left: calc(100% + 18px); top: 80%; }
.pin[data-title="The Brass Monkey"] .pin-tag { left: auto; right: calc(100% + 8px); top: -20%; white-space: nowrap; width: auto; text-align: center; }
.pin[data-title="Wind Swept"] .pin-tag { left: calc(100% + 8px); top: -30%; white-space: nowrap; }
.pin[data-title="The Walkover"] .pin-tag { left: auto; right: calc(100% + 8px); top: 8%; }
.pin[data-title="Historic Pass-a-Grille Way"] .pin-tag {
  left: 50%;
  top: 118%;
  transform: translateX(-50%) rotate(-2deg);
  white-space: nowrap;
  width: auto;
  text-align: center;
}
.pin[data-title="Hurley Park"] .pin-tag { left: calc(100% + 8px); right: auto; top: 28%; white-space: nowrap; width: auto; text-align: left; }

.pin[data-title="Home Base"] .pin-tag {
  background: #f0c010;
  border-color: #9a7a08;
  color: #17323a;
  font-size: .72rem;
  padding: .14rem .55rem .18rem;
  left: calc(100% + 14px);
  right: auto;
  top: 8%;
  transform: rotate(-1.4deg);
}

.pin:hover .pin-tag, .pin:focus-visible .pin-tag, .pin.active .pin-tag {
  background: var(--teal);
  border-color: var(--teal);
  color: #fdfbf6;
  opacity: 1;
  visibility: visible;
  z-index: 6;
}
html[data-theme="dark"] .pin-tag { background: #14333f; color: #f6f1e8; border-color: #6fe0cf; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
html[data-theme="dark"] .pin:nth-child(3n) .pin-tag { background: #173f33; border-color: #7fd4a8; }
html[data-theme="dark"] .pin:nth-child(4n) .pin-tag { background: #12303f; border-color: #6fb3cf; }
html[data-theme="dark"] .pin[data-title="Home Base"] .pin-tag { background: #f0c010; color: #17323a; border-color: #f0c010; }

@media (max-width: 720px) { .pin-tag { display: none; } }

/* water names: old-timey map lettering in the open water */
.map-watername {
  position: absolute;
  top: 47%;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: .22em;
  font-weight: 600;
  color: rgba(59, 50, 39, .62);
  text-shadow: 0 1px 2px rgba(253, 246, 227, .55);
  pointer-events: none;
  white-space: nowrap;
}
.map-watername-gulf {
  left: 9.5%;
  top: 24%;
  width: auto;
  writing-mode: horizontal-tb;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  font-size: .95rem;
  letter-spacing: .16em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  color: rgba(24, 30, 36, .9);
  text-shadow: 0 1px 2px rgba(253, 246, 227, .75), 0 0 10px rgba(253, 246, 227, .4);
  z-index: 3;
}
.map-watername-bay {
  left: 91.5%;
  right: auto;
  top: 42%;
  writing-mode: horizontal-tb;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
  font-size: 1.02rem;
  letter-spacing: .14em;
  color: rgba(24, 30, 36, .88);
  text-shadow: 0 1px 2px rgba(253, 246, 227, .7), 0 0 10px rgba(253, 246, 227, .35);
}
html[data-theme="sunset"] .map-watername { color: rgba(255, 246, 234, .86); text-shadow: 0 1px 6px rgba(20, 8, 16, .7); }
html[data-theme="dark"] .map-watername { color: rgba(232, 255, 248, .72); text-shadow: 0 1px 2px rgba(9, 26, 34, .6); }
@media (max-width: 720px) {
  .map-watername-gulf { font-size: .68rem; letter-spacing: .1em; top: 24%; left: 9.5%; width: auto; }
  .map-watername-bay { font-size: .72rem; top: 42%; left: 91.5%; right: auto; }
}
.map-roadname {
  position: absolute;
  right: auto;
  left: 63%;
  top: 14%;
  writing-mode: horizontal-tb;
  transform: rotate(90deg);
  transform-origin: top left;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(23, 50, 58, .72);
  text-shadow: 0 1px 0 rgba(253, 246, 227, .75);
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}
html[data-theme="sunset"] .map-roadname {
  color: rgba(255, 246, 234, .86);
  text-shadow: 0 1px 8px rgba(20, 8, 16, .7);
}
html[data-theme="dark"] .map-roadname {
  color: rgba(232, 255, 248, .8);
  text-shadow: 0 1px 8px rgba(9, 26, 34, .7);
}
@media (max-width: 720px) { .map-roadname { font-size: .56rem; left: 61%; top: 12%; } }

/* map life: water shimmer stays in the gulf / bay, never the island */
.map-waterlife {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.map-waterlife-gulf {
  left: 2.5%;
  top: 3%;
  bottom: 3%;
  width: 18.5%;
}
.map-waterlife-bay {
  right: 1%;
  top: 7%;
  bottom: 5%;
  width: 14.5%;
}
.map-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .68;
  background: linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, .46) 50%, transparent 82%);
  animation: mapShimmer 7.5s var(--ease-out) infinite;
}
.map-waterlife-bay .map-shimmer { animation-delay: -3.8s; }
@keyframes mapShimmer {
  0% { transform: translateX(-22%); opacity: .22; }
  50% { opacity: .7; }
  100% { transform: translateX(22%); opacity: .22; }
}
.pin:not(.pin-home)::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  box-shadow: 0 0 10px 2px rgba(74, 193, 170, .7);
  opacity: .25;
  animation: pinGlow 4s var(--ease-out) infinite;
}
@keyframes pinGlow { 0%, 100% { opacity: .15; } 50% { opacity: .55; } }
.pin:hover { transform: rotate(-45deg) scale(1.12); }
.pin:not(.pin-home):hover::after, .pin:not(.pin-home):focus-visible::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .map-shimmer { animation: none; opacity: .18; }
  .pin::after { animation: none; opacity: .3; }
}
html[data-motion="reduce"] .map-shimmer { animation: none; opacity: .18; }
html[data-motion="reduce"] .pin::after { animation: none; opacity: .3; }
@media (max-width: 390px) {
  .gulf-backdrop { opacity: .7; }
  .ambient { opacity: .4; }
  .map-watername-gulf {
    font-size: .58rem;
    letter-spacing: .08em;
    left: 9.5%;
    top: 24%;
  }
  .map-watername-bay {
    font-size: .6rem;
    letter-spacing: .08em;
    left: 91.5%;
    right: auto;
    top: 42%;
  }
  .pin { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .pin.pin-home { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .pin-glyph svg { width: 11px; height: 11px; }
  .pin.pin-home .pin-glyph svg { width: 13px; height: 13px; }
}
html[data-theme="sunset"] main a.host-badge:not(.card),
html[data-theme="dark"] main a.host-badge:not(.card) {
  color: #17323a;
}


/* Bright header chrome matches the Wind Swept house wall #7ec4d4. Navy ink on that plaque. */
html[data-theme="bright"] .site-header,
html[data-theme="light"] .site-header {
  background: #7ec4d4;
  color: #17323a;
  border-bottom-color: #f0c010;
}
html[data-theme="bright"] .site-nav a,
html[data-theme="bright"] .site-nav summary,
html[data-theme="bright"] .nav-toggle,
html[data-theme="light"] .site-nav a,
html[data-theme="light"] .site-nav summary,
html[data-theme="light"] .nav-toggle {
  color: #17323a;
}
html[data-theme="bright"] .site-nav a:hover,
html[data-theme="bright"] .site-nav summary:hover,
html[data-theme="light"] .site-nav a:hover,
html[data-theme="light"] .site-nav summary:hover {
  background: rgba(23, 50, 58, .12);
}
html[data-theme="bright"] .theme-switch > summary,
html[data-theme="light"] .theme-switch > summary,
html[data-theme="bright"] .theme-switch[open] > summary,
html[data-theme="light"] .theme-switch[open] > summary,
html[data-theme="bright"] .site-nav .theme-switch > summary:hover,
html[data-theme="light"] .site-nav .theme-switch > summary:hover {
  background: #4ac1aa;
  color: #17323a;
  box-shadow: 0 0 0 2px #17323a;
}
html[data-theme="bright"] .btn-primary,
html[data-theme="light"] .btn-primary {
  background: #4ac1aa;
  color: #17323a;
}
html[data-theme="bright"] .site-header .btn.breathe,
html[data-theme="bright"] .site-nav .btn.breathe,
html[data-theme="light"] .site-header .btn.breathe,
html[data-theme="light"] .site-nav .btn.breathe {
  background: #4ac1aa;
  color: #17323a;
  box-shadow:
    0 0 0 2px #17323a,
    0 0 16px 2px rgba(74, 193, 170, .5);
}
html[data-theme="bright"] .card,
html[data-theme="bright"] .card h2,
html[data-theme="bright"] .card h3,
html[data-theme="bright"] .card p,
html[data-theme="bright"] .card li,
html[data-theme="bright"] .card span,
html[data-theme="bright"] .booking-card,
html[data-theme="bright"] .booking-card h2,
html[data-theme="bright"] .booking-card p,
html[data-theme="bright"] .booking-card label,
html[data-theme="bright"] .pin-card,
html[data-theme="bright"] .pin-card h3,
html[data-theme="bright"] .pin-card p,
html[data-theme="bright"] body.home.gulf-bg main .card h2,
html[data-theme="bright"] body.home.gulf-bg main .card h3,
html[data-theme="bright"] body.gulf-bg main .card h2,
html[data-theme="bright"] body.gulf-bg main .card h3,
html[data-theme="light"] .card,
html[data-theme="light"] .card h2,
html[data-theme="light"] .card h3,
html[data-theme="light"] .card p,
html[data-theme="light"] .card li,
html[data-theme="light"] .card span,
html[data-theme="light"] .booking-card,
html[data-theme="light"] .booking-card h2,
html[data-theme="light"] .booking-card p,
html[data-theme="light"] .booking-card label,
html[data-theme="light"] .pin-card,
html[data-theme="light"] .pin-card h3,
html[data-theme="light"] .pin-card p,
html[data-theme="light"] body.home.gulf-bg main .card h2,
html[data-theme="light"] body.home.gulf-bg main .card h3,
html[data-theme="light"] body.gulf-bg main .card h2,
html[data-theme="light"] body.gulf-bg main .card h3 {
  color: #17323a;
}
html[data-theme="bright"] .card,
html[data-theme="bright"] .booking-card,
html[data-theme="bright"] .pin-card,
html[data-theme="light"] .card,
html[data-theme="light"] .booking-card,
html[data-theme="light"] .pin-card {
  background: #f6f1e8;
}
html[data-theme="bright"] .card .unit-meta,
html[data-theme="bright"] .booking-note,
html[data-theme="bright"] .booking-card .fallback,
html[data-theme="light"] .card .unit-meta,
html[data-theme="light"] .booking-note,
html[data-theme="light"] .booking-card .fallback {
  color: #1c3f46;
}
html[data-theme="bright"] .site-footer,
html[data-theme="light"] .site-footer {
  background: #f6f1e8;
  color: #17323a;
  border-top-color: rgba(23, 50, 58, .16);
}
html[data-theme="bright"] .site-footer .footer-wordmark,
html[data-theme="bright"] .site-footer h3,
html[data-theme="bright"] .site-footer .footer-cols p,
html[data-theme="bright"] .site-footer .footer-cols li,
html[data-theme="bright"] .site-footer .footer-cols a,
html[data-theme="bright"] .site-footer .pill-group,
html[data-theme="bright"] .site-footer > .wrap > p,
html[data-theme="light"] .site-footer .footer-wordmark,
html[data-theme="light"] .site-footer h3,
html[data-theme="light"] .site-footer .footer-cols p,
html[data-theme="light"] .site-footer .footer-cols li,
html[data-theme="light"] .site-footer .footer-cols a,
html[data-theme="light"] .site-footer .pill-group,
html[data-theme="light"] .site-footer > .wrap > p {
  color: #17323a;
  text-shadow: none;
}
html[data-theme="bright"] .site-footer .footer-cols a:hover,
html[data-theme="light"] .site-footer .footer-cols a:hover {
  color: #0f6e74;
}
html[data-theme="bright"] .a11y-panel,
html[data-theme="bright"] .a11y-panel h2,
html[data-theme="bright"] .a11y-panel legend,
html[data-theme="light"] .a11y-panel,
html[data-theme="light"] .a11y-panel h2,
html[data-theme="light"] .a11y-panel legend {
  color: #17323a;
  background: #f6f1e8;
}
html[data-theme="bright"] .a11y-panel .opts button,
html[data-theme="light"] .a11y-panel .opts button {
  background: #ffffff;
  color: #17323a;
}
html[data-theme="bright"] .a11y-fab,
html[data-theme="light"] .a11y-fab {
  background: #f6f1e8;
  color: #17323a;
}
html[data-theme="bright"] input,
html[data-theme="bright"] select,
html[data-theme="bright"] textarea,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #ffffff;
  color: #17323a;
}
html[data-theme="bright"] figcaption,
html[data-theme="light"] figcaption {
  color: #f6f1e8;
}
@media (max-width: 860px) {
  html[data-theme="bright"] .site-nav,
  html[data-theme="light"] .site-nav {
    background: #7ec4d4;
    border-bottom-color: #f0c010;
  }
  html[data-theme="bright"] .nav-toggle,
  html[data-theme="light"] .nav-toggle {
    background: rgba(23, 50, 58, .12);
    color: #17323a;
  }
  .site-header .site-nav a.btn.breathe {
    height: 2.5rem;
    min-height: 2.5rem;
    max-height: none;
    width: auto;
    align-self: flex-start;
    padding: 0 1.15rem;
    white-space: nowrap;
    line-height: 1;
  }
}