/* ============================================================================
   THE CERULEAN — cinematic full-bleed system. ogroup format: no centered frame,
   near-zero gutters, image-forward. No italics anywhere. WCAG-AA contrast.
   ============================================================================ */

:root{
  /* ===== BRAND: Turquoise + Coral. Deep teal inks, ivory paper. =====
     Primary = turquoise (structure, links, eyebrows, borders).
     Accent  = coral (calls to action, energy, pins, stars). */
  --ink:#06282e; --ink2:#0b3b43;                 /* deep teal darks */
  --sea:#0a6270;                                  /* mid teal */
  --cerulean:#0a7c8c; --cerulean-hi:#15aec2; --turq:#3ad2e0;  /* turquoise ramp */
  --cerulean-true:#3098e0;                        /* true cerulean, sampled from the recolored crest (hue 204) */
  --coral:#ff6f5e; --coral-hi:#ff8b7c; --coral-deep:#d94a37; --coral-btn:#ef5b45;  /* coral ramp */
  --sand:#f3ede2; --sand2:#e9decd; --paper:#fdfaf4; --cream:#f7f2e9; --shell:#efe7d8;

  --tx:#0a2429;                       /* body text on light (teal-ink) */
  --tx-soft:rgba(10,36,41,.74);
  --tx-dim:rgba(10,36,41,.54);
  --on-dark:#f4f1e8;                  /* text on dark/photo */
  --on-dark-soft:rgba(244,241,232,.80);
  --hair:rgba(10,36,41,.14);
  --hair-d:rgba(244,241,232,.22);

  --serif:"Marcellus",Georgia,"Times New Roman",serif;  /* display — elegant Roman titling serif */
  --sans:"Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  /* layout primitives (portfolio baseline — full-width, near-zero gutter) */
  --gutter:clamp(18px,3vw,52px);
  --readw:44rem;                      /* ~700px reading measure — used INSIDE sections */
  --dirw:70rem;                       /* directory category column — centered editorial measure */
  --railw:clamp(220px,20vw,320px);  /* rail = at most 1/5 of the viewport */
  --railgap:clamp(28px,4vw,72px);
  --head-h:104px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------------------------------ reset */
*{margin:0;padding:0;box-sizing:border-box}
/* NO global scroll-behavior:smooth — it makes Chromium animate every
   programmatic/JS scroll write (double-smoothing under any smooth-scroll lib)
   and fights GSAP ScrollTrigger. Native wheel/anchor scrolling stays crisp. */
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);color:var(--tx);background:var(--paper);
  line-height:1.6;font-size:clamp(1rem,.55vw + .9rem,1.12rem);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* Marcellus ships a single 400 weight — forbid synthetic faux-bold so display
     headings render as the intended refined serif regardless of font-weight rules. */
  font-synthesis:none;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--cerulean);color:#fff}
:focus-visible{outline:2.5px solid var(--cerulean-hi);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.06;
  letter-spacing:normal;font-optical-sizing:auto}
h1 b,h2 b,h3 b,h4 b{font-weight:400}
.serif{font-family:var(--serif)}

/* ------------------------------------------------------ layout primitives */
.wrap{width:100%;margin-inline:0;padding-inline:var(--gutter)}
.bleed{width:100vw;margin-inline:calc(50% - 50vw)}
.read{max-width:var(--readw)}
section{position:relative}

/* editorial: reading column + a FILLED rail (never empty second column) */
.editorial{display:grid;grid-template-columns:minmax(0,var(--readw)) minmax(0,var(--railw));
  gap:var(--railgap);align-items:start;padding-inline:var(--gutter)}
.editorial>.rail{position:sticky;top:calc(var(--head-h) + 22px)}
/* variant: reading column + a filler image + the rail, filling the full width
   so there is no empty gutter to the right of a short intro */
.editorial--img{grid-template-columns:minmax(0,30rem) minmax(0,1fr) minmax(0,var(--railw))}
.introfig{position:relative;align-self:stretch;margin:0;overflow:hidden;
  min-height:340px;border:1px solid var(--hair);border-radius:2px;background:var(--cream)}
.introfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:1020px){
  .editorial{display:block}
  .editorial>.rail{position:static;margin-top:40px}
  .rail .rail-card:has(.toc){display:none}
  .editorial--img{grid-template-columns:1fr}
  .introfig{align-self:auto;min-height:0;aspect-ratio:16/10;margin-top:28px}
}

/* eyebrow / chapter number — tracked mono-ish uppercase, no italics */
.eyebrow{font-family:var(--sans);font-weight:600;font-size:.72rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--cerulean)}
.eyebrow.on-dark{color:var(--turq)}
.chapno{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.28em;
  color:var(--tx-dim)}
.chapno.on-dark{color:var(--on-dark-soft)}

/* section rhythm */
.pad{padding-block:clamp(72px,9vw,168px)}
.pad-s{padding-block:clamp(48px,6vw,104px)}
.dark{background:var(--ink);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3{color:var(--paper)}
.dark .lead,.dark p{color:var(--on-dark-soft)}
.sea{background:var(--sea);color:var(--on-dark)}
.sand{background:var(--sand)}
.cream{background:var(--cream)}

.lead{font-size:clamp(1.14rem,1.1vw + .9rem,1.5rem);line-height:1.5;color:var(--tx-soft);
  font-weight:400}
.kicker{max-width:52rem}

/* ------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);
  font-weight:700;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;
  padding:1.12em 1.9em;border-radius:3px;transition:.4s var(--ease);
  border:1px solid transparent;white-space:nowrap}
.btn-primary{background:var(--coral-btn);color:#fff;box-shadow:0 10px 30px -12px rgba(217,74,55,.6)}
.btn-primary:hover{background:var(--coral-deep);transform:translateY(-2px);
  box-shadow:0 16px 38px -14px rgba(217,74,55,.7)}
.btn-ghost{border-color:currentColor;color:inherit}
.btn-ghost:hover{background:currentColor}
.btn-ghost.on-dark:hover{color:var(--ink)}
.btn-ghost:not(.on-dark):hover{color:var(--paper)}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ------------------------------------------------------------- header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--head-h);
  display:flex;align-items:center;transition:background .5s var(--ease),
  box-shadow .5s var(--ease),transform .45s var(--ease)}
/* darkening scrim — extends BELOW the bar for a smooth fade so the logo + nav
   stay legible over any hero frame (top ~110% is darkest) */
.hdr::before{content:"";position:absolute;top:0;left:0;right:0;bottom:auto;
  height:215%;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,20,.86) 0%,rgba(4,16,20,.62) 40%,
    rgba(4,16,20,.28) 72%,rgba(4,16,20,0) 100%);
  opacity:1;transition:opacity .5s var(--ease)}
.hdr.solid{background:rgba(251,248,241,.94);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--hair)}
.hdr.solid::before{opacity:0}
.hdr.hide{transform:translateY(-100%)}
.hdr__in{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-inline:var(--gutter);position:relative;z-index:1}
.brand{display:inline-block;line-height:1;color:var(--paper);transition:color .5s var(--ease)}
/* real logo wordmark — bright turquoise over the hero, deep turquoise on solid */
.brand__wm{display:block;height:clamp(1.55rem,2.5vw,2.05rem);width:auto;
  filter:drop-shadow(0 2px 10px rgba(4,16,20,.45))}
.hdr.solid .brand__wm{filter:none}
.brand__wm--solid{display:none}
.hdr.solid .brand__wm--hero{display:none}
.hdr.solid .brand__wm--solid{display:block}
.brand .mk{display:block;font-family:var(--sans);font-weight:700;font-size:.56rem;
  letter-spacing:.4em;text-transform:uppercase;margin-top:.62em;opacity:.85;color:var(--turq)}
.hdr.solid .brand .mk{color:var(--cerulean)}
.nav{display:flex;align-items:center;gap:clamp(16px,1.6vw,34px)}
.nav a{font-family:var(--sans);font-weight:600;font-size:.92rem;letter-spacing:.02em;
  color:var(--paper);position:relative;padding-block:6px;opacity:.94;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--turq);transition:width .4s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{width:100%}
.hdr.solid .nav a{color:var(--tx)}
.hdr__cta{display:flex;align-items:center;gap:14px}
.hdr .btn{padding:.82em 1.35em;font-size:.8rem}
.hdr:not(.solid) .btn-primary{box-shadow:0 8px 24px -10px rgba(6,18,25,.5)}
.hdr:not(.solid) .btn-primary:hover{background:var(--coral-deep);color:#fff}
/* menu button — visible at every breakpoint, with a label (cavmir-style) */
.menu-btn{display:inline-flex;align-items:center;gap:11px;padding:8px 4px;z-index:1;
  color:var(--paper);font-family:var(--sans);font-weight:700;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase}
.menu-btn__lines{display:flex;flex-direction:column;gap:5px;width:26px}
.menu-btn__lines span{height:2px;width:100%;background:currentColor;border-radius:2px;
  transition:.4s var(--ease)}
.menu-btn__lines span:nth-child(2){width:64%;margin-left:auto}
.menu-btn:hover .menu-btn__lines span:nth-child(2){width:100%}
.hdr.solid .menu-btn{color:var(--ink)}

/* tighten the row in the mid band so nothing wraps before the burger takes over */
@media(max-width:1280px){
  .nav{gap:clamp(14px,1.35vw,22px)}
  .nav a{font-size:.86rem}
}
@media(max-width:1080px){
  .nav,.hdr__cta .btn-ghost{display:none}
}
@media(max-width:640px){
  .brand{font-size:1.5rem}
  .brand .mk{display:none}
  .hdr__in{gap:12px}
  .hdr__cta{gap:8px}
  .hdr .btn{padding:.66em 1em;font-size:.7rem;letter-spacing:.08em}
  .hero h1{font-size:clamp(2.5rem,10.5vw,4.2rem)}
}
@media(max-width:540px){ .menu-btn__label{display:none} }

/* ===== fullscreen overlay menu — featured image + grouped links ===== */
.overlay{position:fixed;inset:0;z-index:70;background:var(--ink);
  clip-path:circle(0% at calc(100% - 40px) 40px);transition:clip-path .8s var(--ease);
  pointer-events:none;overflow:hidden}
.overlay.open{clip-path:circle(150% at calc(100% - 40px) 40px);pointer-events:auto}
.overlay__close{position:absolute;top:20px;right:var(--gutter);width:46px;height:46px;z-index:4;
  display:flex;align-items:center;justify-content:center;color:var(--paper);font-size:1.7rem;
  border:1px solid var(--hair-d);border-radius:50%;transition:.35s var(--ease)}
.overlay__close:hover{background:rgba(255,255,255,.08);transform:rotate(90deg)}

.ov2{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-rows:minmax(0,1fr);width:100%;height:100%}

/* left — featured image */
.ov2__feature{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  padding:clamp(28px,4vw,58px)}
.ov2__feature-img{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.09);opacity:0;transition:transform 1.3s var(--ease),opacity 1s var(--ease)}
.overlay.open .ov2__feature-img{transform:scale(1);opacity:1}
.ov2__feature::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,40,46,.15) 0%,rgba(6,40,46,.5) 52%,rgba(6,40,46,.92) 100%)}
.ov2__feature-body{position:relative;z-index:2;max-width:30rem;color:var(--on-dark);
  transform:translateY(24px);opacity:0;transition:.75s var(--ease) .3s}
.overlay.open .ov2__feature-body{transform:none;opacity:1}
.ov2__feature-eyebrow{display:block;font-family:var(--sans);font-weight:700;font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--turq);margin-bottom:15px}
.ov2__feature-title{font-family:var(--serif);font-weight:600;line-height:1.04;
  font-size:clamp(1.7rem,2.7vw,3rem);color:#fff;margin-bottom:15px}
.ov2__feature-desc{font-size:1rem;color:var(--on-dark-soft);line-height:1.55;
  margin-bottom:26px;max-width:26rem}

/* right — grouped nav */
.ov2__nav{position:relative;display:flex;flex-direction:column;justify-content:flex-start;
  min-height:0;padding:clamp(64px,7vh,110px) var(--gutter) clamp(28px,4vh,64px);
  overflow-y:auto;overscroll-behavior:contain}
.ov2__grid{margin-block:auto}
.ov2__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,3.4vh,40px) clamp(28px,4vw,72px)}
.ov2__grp{transform:translateY(20px);opacity:0}
.overlay.open .ov2__grp{transform:none;opacity:1;
  transition:opacity .55s var(--ease) var(--d,0s),transform .65s var(--ease) var(--d,0s)}
.ov2__head{display:inline-block;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.5rem,2.3vw,2.15rem);line-height:1.1;color:var(--paper);
  margin-bottom:13px;transition:color .3s}
.ov2__head:hover{color:var(--turq)}
.ov2__links{display:flex;flex-wrap:wrap;gap:6px 16px;max-width:30rem}
.ov2__links a{font-family:var(--sans);font-size:.9rem;color:var(--on-dark-soft);transition:color .25s}
.ov2__links a:hover{color:var(--turq)}
.ov2__foot{grid-column:1/-1;margin-top:clamp(12px,2vh,26px);padding-top:18px;
  border-top:1px solid var(--hair-d);display:flex;flex-wrap:wrap;gap:8px 32px;
  color:var(--on-dark-soft);font-size:.92rem;letter-spacing:.02em}
.ov2__foot a:hover{color:var(--turq)}

@media(max-width:900px){
  .ov2{grid-template-columns:1fr;grid-template-rows:32vh minmax(0,1fr)}
  .ov2__feature{align-items:flex-end}
  .ov2__feature-title{font-size:clamp(1.5rem,6vw,2rem)}
  .ov2__nav{justify-content:flex-start;padding-top:clamp(30px,5vh,48px)}
  /* Sections stack single-column on phones, so give each group its own tinted card —
     a per-section accent (colour of the heading + left bar + a faint background wash)
     makes "The Villa", "Gallery", "Dining"… read as distinct tabs, not one flat page. */
  .ov2__grid{grid-template-columns:1fr;gap:13px}
  .ov2__grp{--acc:var(--turq);
    background:rgba(255,255,255,.04);
    background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 17%,transparent),
      color-mix(in srgb,var(--acc) 6%,transparent));
    border:1px solid var(--hair-d);border-left:3px solid var(--acc);
    border-radius:14px;padding:15px 17px 16px}
  .ov2__head{color:var(--acc);margin-bottom:9px}
  .ov2__head:hover,.ov2__head:active{color:var(--acc);filter:brightness(1.15)}
  .ov2__links a:hover{color:var(--acc)}
  /* three-colour cycle so every adjacent section is a different shade */
  .ov2__grp:nth-child(3n+1){--acc:var(--turq)}        /* bright turquoise */
  .ov2__grp:nth-child(3n+2){--acc:var(--coral-hi)}    /* coral */
  .ov2__grp:nth-child(3n+3){--acc:var(--cerulean-hi)} /* cerulean */
}
@media(max-width:540px){
  .ov2{grid-template-rows:minmax(0,1fr)}
  .ov2__feature{display:none}
}

/* ------------------------------------------------------------- hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;color:var(--paper)}
.hero__bg{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,18,25,.42) 0%,rgba(6,18,25,0) 26%,
    rgba(6,18,25,.06) 52%,rgba(6,18,25,.72) 100%)}
.hero__in{position:relative;z-index:2;width:100%;padding:var(--gutter);
  padding-bottom:clamp(40px,7vh,92px)}
.hero__eyebrow{color:var(--turq);margin-bottom:22px}
.hero h1{font-size:clamp(3.2rem,9.8vw,10rem);font-weight:500;letter-spacing:-.025em;
  line-height:.92;max-width:15ch;text-shadow:0 2px 40px rgba(4,14,20,.35)}
.hero h1 b{font-weight:800;color:var(--turq)}
.hero__sub{margin-top:26px;max-width:40ch;font-size:clamp(1.05rem,1vw + .8rem,1.4rem);
  color:var(--on-dark-soft)}
.hero__row{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.hero__meta{margin-left:auto;display:flex;gap:26px;align-items:flex-end}
.hero__meta div{text-align:right}
.hero__meta b{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1}
.hero__meta span{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--on-dark-soft)}
.scrollcue{position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--on-dark-soft);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue::after{content:"";width:1px;height:34px;background:linear-gradient(var(--turq),transparent);
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:720px){.hero__meta{display:none}}

/* --------------------------------------------------- intro / section head */
.shead{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,60px);
  align-items:end;padding-inline:var(--gutter);margin-bottom:clamp(34px,4vw,60px)}
.shead__no{font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.26em;
  color:var(--tx-dim);white-space:nowrap;padding-bottom:.7rem}
.dark .shead__no{color:var(--on-dark-soft)}
.shead h1,.shead h2{font-size:clamp(2.1rem,4.6vw,4.5rem);max-width:18ch}
.shead__aside{grid-column:2;align-self:end;max-width:38ch;color:var(--tx-soft);
  padding-bottom:.5rem;justify-self:end;text-align:right}
.dark .shead__aside{color:var(--on-dark-soft)}
@media(max-width:820px){.shead{grid-template-columns:1fr}
  .shead__aside{grid-column:1;justify-self:start;text-align:left;max-width:46ch}}

/* --------------------------------------------------- split (text + media) */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:min(88vh,760px)}
.split__media{position:relative;overflow:hidden;min-height:52vh}
.split__media .pfx{position:absolute;inset:-8% 0;will-change:transform}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__body{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vw,110px) var(--gutter)}
.split__body .read{max-width:38rem}
.split h2{font-size:clamp(1.9rem,3.4vw,3.4rem);margin:16px 0 20px}
.split p + p{margin-top:1em}
.split--rev .split__media{order:2}
@media(max-width:900px){
  .split,.split--rev{grid-template-columns:1fr}
  .split__media{order:-1;min-height:62vh}
  .split--rev .split__media{order:-1}
}

/* --------------------------------------------------- quad hero band */
/* Four cinematic tiles, text over the image, scroll-parallax inside each
   frame. Not links — purely visual. Replaces the old two-column intro. */
.quad{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1vw,16px);
  padding:clamp(10px,1vw,16px);background:var(--paper)}
.qtile{position:relative;overflow:hidden;border-radius:14px;isolation:isolate;
  min-height:clamp(320px,44vh,540px)}
.qtile__media{position:absolute;inset:-11% 0;will-change:transform;
  transition:transform 1.2s var(--ease)}
.qtile__media img{width:100%;height:100%;object-fit:cover}
.qtile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(4,16,22,.74) 0%,rgba(4,16,22,.30) 34%,
    rgba(4,16,22,0) 64%)}
.qtile__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(22px,2.4vw,40px);color:var(--on-dark)}
.qtile__no,.qtile__k{font-family:var(--sans);font-weight:600;font-size:.7rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--turq);margin-bottom:11px}
.qtile__k{letter-spacing:.2em}
.qtile h2{font-family:var(--serif);font-weight:600;line-height:1.05;color:#fff;
  font-size:clamp(1.45rem,2.2vw,2.35rem);max-width:18ch;
  text-shadow:0 2px 34px rgba(4,14,20,.5)}
.qtile--lead h2{font-size:clamp(1.9rem,3vw,3rem);max-width:14ch}
@media(hover:hover){
  .qtile:hover .qtile__media{transform:scale(1.055)}
}
@media(max-width:820px){
  .quad{grid-template-columns:1fr}
  .qtile{min-height:56vh}
}

/* --------------------------------------------------- full-bleed statement */
.statement{position:relative;min-height:86vh;display:flex;align-items:center;
  overflow:hidden;color:var(--paper)}
.statement__bg{position:absolute;inset:-8% 0;z-index:0}
.statement__bg img{width:100%;height:100%;object-fit:cover}
.statement::after{content:"";position:absolute;inset:0;background:rgba(6,18,25,.5);z-index:1}
.statement .wrap{position:relative;z-index:2}
/* same fix as .cta .eyebrow: with no bottom margin the Marcellus h2 line box rode
   28% into the eyebrow at 1024px (text-over-text gate, 2026-09-25) */
.statement .eyebrow{display:block;margin-bottom:18px}
.statement h2{font-size:clamp(2.4rem,5.6vw,5.9rem);max-width:20ch;font-weight:500}
.statement h2 b{font-weight:800;color:var(--coral)}
.statement .lead{color:var(--on-dark-soft);margin-top:24px;max-width:46ch}

/* --------------------------------------------------- stat strip */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  background:var(--hair);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.dark .stats,.sea .stats{background:var(--hair-d);border-color:var(--hair-d)}
.stat{padding:clamp(26px,2.6vw,44px) clamp(18px,1.8vw,30px);background:var(--sand)}
.dark .stat{background:var(--ink)}.sea .stat{background:var(--sea)}
/* branded icon chip — same turquoise/coral language as the amenity grid */
.stat__i{display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:14px;margin-bottom:20px;color:var(--cerulean);
  background:linear-gradient(150deg,rgba(21,174,194,.16),rgba(10,124,140,.1));
  border:1px solid rgba(10,124,140,.18)}
.stat:nth-child(even) .stat__i{color:var(--coral-deep);
  background:linear-gradient(150deg,rgba(255,111,94,.17),rgba(217,74,55,.1));
  border-color:rgba(217,74,55,.2)}
.stat__i .ami-svg{width:25px;height:25px}
.stat b{display:block;font-family:var(--serif);font-size:clamp(2rem,3vw,3.1rem);
  line-height:1;font-weight:500;color:var(--ink);white-space:nowrap}
.dark .stat b,.sea .stat b{color:var(--paper)}
.stat span{display:block;margin-top:12px;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sea);font-weight:600}
.stat__sub{margin-top:6px!important;font-size:.82rem!important;letter-spacing:0!important;
  text-transform:none!important;font-weight:400!important;color:var(--tx-soft)!important}
.dark .stat span,.sea .stat span{color:var(--turq)}
.dark .stat__sub,.sea .stat__sub{color:var(--on-dark-soft)!important}
@media(max-width:980px){.stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}
  .stat b{font-size:clamp(1.9rem,7vw,2.4rem)}}

/* --------------------------------------------------- amenities columns */
.amgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border-block:1px solid var(--hair)}
.amgrid .col{background:var(--paper);padding:clamp(28px,3vw,48px) clamp(22px,2.4vw,40px)}
.amgrid h3{font-size:1.02rem;font-family:var(--sans);font-weight:600;letter-spacing:.02em;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--hair);
  display:flex;align-items:baseline;gap:10px}
.amgrid h3 i{font-style:normal;font-family:var(--serif);color:var(--cerulean);font-size:1.1rem}
.amgrid ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.amgrid li{color:var(--tx-soft);font-size:.98rem;padding-left:20px;position:relative}
.amgrid li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border:1px solid var(--turq);border-radius:50%}
@media(max-width:900px){.amgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.amgrid{grid-template-columns:1fr}}

/* amenities list with line-icons (full page). icon chip replaces the dot. */
.amgrid--icons li{padding-left:0;display:flex;align-items:center;gap:13px}
.amgrid--icons li::before{display:none}
.ami{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;color:var(--cerulean);
  background:rgba(10,124,140,.09);border:1px solid rgba(10,124,140,.16)}
.ami .ami-svg{width:19px;height:19px}

/* -------------------------------------- homepage "what this place offers" */
.amblk .shead{margin-bottom:clamp(30px,3.4vw,52px)}
.amgridh{display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
.amcard{display:flex;align-items:center;gap:16px;background:var(--cream);
  padding:clamp(22px,2vw,30px) clamp(20px,1.8vw,30px)}
.amcard__i{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:14px;color:var(--cerulean);
  background:linear-gradient(150deg,rgba(21,174,194,.14),rgba(10,124,140,.1));
  border:1px solid rgba(10,124,140,.16)}
.amcard:nth-child(4n+2) .amcard__i,.amcard:nth-child(4n) .amcard__i{
  color:var(--coral-deep);
  background:linear-gradient(150deg,rgba(255,111,94,.15),rgba(217,74,55,.09));
  border-color:rgba(217,74,55,.18)}
.amcard__i .ami-svg{width:26px;height:26px}
.amcard__t{display:flex;flex-direction:column;gap:3px;min-width:0}
.amcard__t b{font-family:var(--serif);font-weight:600;font-size:1.06rem;
  line-height:1.12;letter-spacing:-.01em;color:var(--tx)}
.amcard__t em{font-style:normal;font-size:.85rem;line-height:1.4;color:var(--tx-soft)}
.amblk__cta{display:flex;justify-content:center;padding-top:clamp(30px,3.4vw,48px)}
@media(max-width:1080px){.amgridh{grid-template-columns:repeat(3,1fr)}
  .amcard:nth-child(4n+2) .amcard__i,.amcard:nth-child(4n) .amcard__i{color:var(--cerulean);
    background:linear-gradient(150deg,rgba(21,174,194,.14),rgba(10,124,140,.1));
    border-color:rgba(10,124,140,.16)}
  .amcard:nth-child(3n+2) .amcard__i{color:var(--coral-deep);
    background:linear-gradient(150deg,rgba(255,111,94,.15),rgba(217,74,55,.09));
    border-color:rgba(217,74,55,.18)}}
@media(max-width:720px){.amgridh{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.amgridh{grid-template-columns:1fr}
  .amcard{padding:18px 20px}}

/* --------------------------------------------------- services */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-d)}
.svc .item{background:var(--ink);padding:clamp(30px,3vw,52px) clamp(22px,2.2vw,38px);
  min-height:230px;display:flex;flex-direction:column}
.svc .n{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.22em;
  color:var(--turq)}
.svc h3{margin:auto 0 12px;font-size:1.5rem;color:var(--paper)}
.svc p{color:var(--on-dark-soft);font-size:.95rem}
@media(max-width:940px){.svc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svc{grid-template-columns:1fr}}

/* --------------------------------------------------- spaces (layout) */
.spaces{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2vw,34px);
  padding-inline:var(--gutter)}
.spc{border-top:2px solid var(--ink);padding-top:22px}
.spc .n{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cerulean)}
.spc h3{font-size:clamp(1.5rem,2.2vw,2.1rem);margin:14px 0 12px}
.spc p{color:var(--tx-soft)}
/* On the dark homepage band the hairline motif and the light-mode body colour
   both vanish (ink-on-ink). Lift each "door" onto its own raised panel with a
   turquoise cap rule, and restore AA-legible copy. The light .sand version on
   /the-villa/ keeps the flat hairline treatment above. */
.dark .spaces{gap:clamp(16px,1.6vw,26px);align-items:stretch}
.dark .spc{border-top:0;padding:clamp(26px,2.4vw,40px);background:var(--ink2);
  border:1px solid var(--hair-d);border-radius:5px;position:relative;overflow:hidden;
  transition:transform .5s var(--ease),border-color .5s var(--ease)}
.dark .spc::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--turq),var(--cerulean))}
.dark .spc:hover{transform:translateY(-4px);border-color:rgba(58,210,224,.4)}
.dark .spc .n{color:var(--turq)}
.dark .spc h3{color:var(--paper)}
.dark .spc p{color:var(--on-dark-soft)}
/* "03 / The layout" homepage band: the brand's "Deep Lagoon Navy" ships as
   #06282e — technically a dark teal (hue ~191deg), so it reads GREEN. Retune it
   here to a true deep-ocean navy that reads the way the name intends. Scoped to
   this section only; the global --ink teal is unchanged elsewhere. */
.layout-navy.dark{background:#0a2540}
.layout-navy .spc{background:#123152}
@media(max-width:820px){.spaces{grid-template-columns:1fr}}

/* --------------------------------------------------- reviews */
.revs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair-d)}
.rev{background:var(--sea);padding:clamp(34px,4vw,64px) var(--gutter);
  display:flex;flex-direction:column;gap:22px}
.rev .stars{color:var(--turq);letter-spacing:.28em;font-size:.9rem}
.rev blockquote{font-family:var(--serif);font-size:clamp(1.3rem,1.7vw + .8rem,2rem);
  line-height:1.32;color:var(--paper);font-weight:400}
.rev cite{margin-top:auto;font-style:normal;font-size:.82rem;letter-spacing:.06em;
  color:var(--on-dark-soft)}
.rev cite b{color:var(--turq);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:.74rem}
@media(max-width:820px){.revs{grid-template-columns:1fr}}
.rev__who{margin-top:auto;display:flex;align-items:center;gap:.8rem}
.rev__who .rv-face,.rev__who .rv-mono{width:52px;height:52px;border-radius:50%;flex:none}
.rev__who .rv-face{object-fit:cover;background:rgba(255,255,255,.06)}
.rev__who .rv-mono{display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.10);border:1px solid var(--hair-d);
  color:var(--turq);font-weight:700;font-size:1rem;letter-spacing:.02em}
.rev__id{display:flex;flex-direction:column;gap:3px;min-width:0}
.rev__id b{color:var(--turq);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:.74rem}
.rev__meta{color:var(--on-dark-soft);font-size:.72rem;letter-spacing:.04em}

/* --------------------------------------------------- gallery (tiles exactly) */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.gal a{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sand2);display:block}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gal a:hover img{transform:scale(1.05)}
.gal a::after{content:"";position:absolute;inset:0;background:rgba(8,23,31,0);
  transition:background .4s}
.gal a:hover::after{background:rgba(8,23,31,.16)}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.gal{grid-template-columns:1fr;gap:2px}}

/* strip preview (home) — horizontal, fills width */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(78vw,1fr);gap:3px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip a{position:relative;aspect-ratio:16/10;scroll-snap-align:start;overflow:hidden}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.strip a:hover img{transform:scale(1.04)}
@media(min-width:900px){.strip{grid-auto-columns:minmax(34vw,1fr)}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(5,14,19,.96);display:none;
  align-items:center;justify-content:center;padding:clamp(14px,3vw,50px)}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:88vh;object-fit:contain;box-shadow:0 20px 80px rgba(0,0,0,.6)}
.lb__x{position:absolute;top:18px;right:24px;color:var(--paper);font-size:2rem;width:44px;height:44px}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);color:var(--paper);
  font-size:2.4rem;width:56px;height:56px;opacity:.8}
.lb__nav:hover{opacity:1}
.lb__prev{left:14px}.lb__next{right:14px}
.lb__cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:var(--on-dark-soft);
  font-size:.85rem;letter-spacing:.04em}

/* --------------------------------------------------- nearby cards */
.near{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair)}
.near .item{background:var(--cream);padding:clamp(30px,3.4vw,58px) var(--gutter)}
.near .m{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cerulean)}
.near h3{font-size:clamp(1.6rem,2.6vw,2.4rem);margin:10px 0 14px}
.near p{color:var(--tx-soft);max-width:44ch}
@media(max-width:820px){.near{grid-template-columns:1fr}}

/* --------------------------------------------------- CTA band */
.cta{position:relative;overflow:hidden;color:var(--paper);text-align:center}
.cta__bg{position:absolute;inset:-8% 0;z-index:0}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(6,18,25,.62),rgba(6,18,25,.78));z-index:1}
.cta .wrap{position:relative;z-index:2}
/* eyebrow had no bottom margin, so the Marcellus h2 line box rode 35-41% into it
   (text-over-text gate, 2026-09-04) */
.cta .eyebrow{display:block;margin-bottom:18px}
.cta h2{font-size:clamp(2.2rem,5vw,5rem);max-width:18ch;margin-inline:auto}
.cta .lead{color:var(--on-dark-soft);margin:22px auto 34px;max-width:44ch}
.cta__row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta__note{margin-top:22px;font-size:.8rem;letter-spacing:.04em;color:var(--on-dark-soft)}

/* --------------------------------------------------- footer */
.foot{position:relative;overflow:hidden;background:var(--ink);color:var(--on-dark-soft);
  padding:clamp(56px,6vw,96px) 0 34px}
/* soft brand watermark, centred behind the footer */
.foot__wm{position:absolute;z-index:0;pointer-events:none;top:50%;left:50%;
  width:min(760px,120vw);aspect-ratio:423/374;transform:translate(-50%,-50%);
  background:url(/assets/img/cerulean-crest.webp?v=67) center/contain no-repeat;
  opacity:.05}
.foot__logo{display:block;width:min(190px,52vw);height:auto;margin-bottom:20px}
.foot__top,.foot .cavband,.foot__bar{position:relative;z-index:1}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(30px,4vw,64px);
  padding-inline:var(--gutter);padding-bottom:clamp(40px,5vw,72px);
  border-bottom:1px solid var(--hair-d)}
.foot__brand .b{font-family:var(--serif);font-size:2rem;color:var(--paper)}
.foot__brand p{margin-top:16px;max-width:34ch;font-size:.95rem}
.foot h2{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--paper);margin-bottom:18px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot a:hover{color:var(--turq)}
.foot__bar{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  padding:26px var(--gutter) 0;font-size:.8rem;letter-spacing:.03em}
.foot__bar nav{display:flex;gap:22px;flex-wrap:wrap}
.foot__legal{position:relative;z-index:1;margin:34px 0 0;padding:0 var(--gutter);
  max-width:none;font-size:.74rem;line-height:1.6;letter-spacing:.01em;
  color:var(--on-dark-soft,rgba(244,241,236,.6))}
@media(max-width:820px){.foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}}
@media(max-width:520px){.foot__top{grid-template-columns:1fr}}

/* skip-to-content link — first focusable element, visible on keyboard focus */
.skip-link{position:fixed;top:10px;left:10px;z-index:2147483647;
  transform:translateY(-160%);transition:transform .18s ease;
  background:var(--paper,#f4f1ec);color:var(--ink,#06282e);
  padding:12px 20px;border-radius:8px;font-family:var(--sans);font-weight:600;
  font-size:.95rem;text-decoration:none;box-shadow:0 6px 24px rgba(0,0,0,.28)}
.skip-link:focus{transform:translateY(0);outline:3px solid var(--turq,#3ad2e0);
  outline-offset:2px}
main:focus{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --------------------------------------------------- article / journal */
.post-hero{position:relative;min-height:74svh;display:flex;align-items:flex-end;
  color:var(--paper);overflow:hidden}
.post-hero__bg{position:absolute;inset:-8% 0;z-index:0}
.post-hero__bg img{width:100%;height:100%;object-fit:cover}
.post-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,18,25,.34),rgba(6,18,25,.16) 40%,rgba(6,18,25,.82))}
.post-hero__in{position:relative;z-index:2;width:100%;padding:var(--gutter);
  padding-bottom:clamp(34px,5vw,64px)}
.post-hero h1{font-size:clamp(2.4rem,5.4vw,5rem);max-width:20ch;font-weight:600}
.post-meta{margin-bottom:18px;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--turq);display:flex;gap:16px;flex-wrap:wrap}
.article{padding-block:clamp(52px,6vw,104px)}
/* article/guide body: reading column FILLS the width instead of a narrow ribbon
   that leaves a big empty gap on the right. Chunks with the TOC keep the condensed
   rail on the right; prose-only chunks run the text full width. */
.article .editorial{align-items:start;grid-template-columns:minmax(0,1fr)}
.article .editorial:has(.rail){grid-template-columns:minmax(0,1fr) minmax(0,var(--railw))}
.article .prose,.article .lf-prose{max-width:none}
.prose{max-width:44rem;font-size:clamp(1.06rem,.5vw + .95rem,1.2rem);color:var(--tx)}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:clamp(1.7rem,2.6vw,2.4rem);margin-top:1.7em;line-height:1.1}
.prose h3{font-size:1.3rem;margin-top:1.5em;font-family:var(--sans);font-weight:600}
.prose p{color:var(--tx-soft)}
.prose strong{color:var(--tx);font-weight:600}
.prose a{color:var(--cerulean);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.prose blockquote{border-left:2px solid var(--turq);padding-left:22px;
  font-family:var(--serif);font-size:1.5rem;line-height:1.35;color:var(--tx)}
.prose ul,.prose ol{padding-left:1.2em;color:var(--tx-soft)}
.prose li+li{margin-top:.5em}
.prose .pfig{margin:1.7em 0}
.prose .pfig img{width:100%;height:auto;display:block;border-radius:14px;background:var(--cream)}
.prose .pfig figcaption{margin-top:.6em;font-family:var(--sans);font-size:.82rem;
  line-height:1.4;letter-spacing:.01em;color:var(--tx-soft)}
.rail-card{background:var(--cream);border:1px solid var(--hair);padding:26px}
.rail-card h3{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cerulean);margin-bottom:16px}
.rail-card ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:.92rem}
.rail-card li{display:flex;justify-content:space-between;gap:16px;color:var(--tx-soft);
  padding-bottom:12px;border-bottom:1px solid var(--hair)}
.rail-card li b{color:var(--tx);font-weight:600;text-align:right}
.rail-card li:last-child{border-bottom:none;padding-bottom:0}
.rail-card .btn{width:100%;justify-content:center;margin-top:6px}

/* journal index — featured lead + grid */
.jfeature{display:grid;grid-template-columns:1.25fr 1fr;background:var(--ink);color:var(--paper)}
.jfeature__img{position:relative;overflow:hidden;min-height:52vh}
.jfeature__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease)}
.jfeature:hover .jfeature__img img{transform:scale(1.04)}
.jfeature__b{padding:clamp(34px,4vw,72px) var(--gutter);display:flex;flex-direction:column;
  justify-content:center;gap:16px}
.jfeature .tag{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--turq);
  font-weight:600}
.jfeature h2{font-size:clamp(2rem,3.4vw,3.4rem);line-height:1.04;color:var(--paper)}
.jfeature p{color:var(--on-dark-soft);max-width:52ch}
.jfeature .more{margin-top:6px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--turq)}
@media(max-width:820px){.jfeature{grid-template-columns:1fr}.jfeature__img{min-height:46vh}}

/* journal index cards */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair)}
.jcard{background:var(--paper);display:flex;flex-direction:column}
.jcard__img{aspect-ratio:3/2;overflow:hidden}
.jcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.jcard:hover .jcard__img img{transform:scale(1.05)}
.jcard__b{padding:clamp(22px,2vw,34px);display:flex;flex-direction:column;gap:12px;flex:1}
.jcard .tag{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cerulean);
  font-weight:600}
.jcard h2{font-size:clamp(1.3rem,1.6vw,1.7rem);line-height:1.12}
.jcard p{color:var(--tx-soft);font-size:.94rem}
.jcard .more{margin-top:auto;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--cerulean)}
@media(max-width:900px){.jgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.jgrid{grid-template-columns:1fr}}
.jcard[hidden]{display:none}

/* ============================ JOURNAL INDEX v2 ============================ */
/* the sticky search + topic band reuses .gcmd/.gsearch/.gchips/.gchip/.gcount */
.jcmd{margin-bottom:clamp(8px,1.4vw,22px)}
.jgrid-sec{padding-top:1px}

/* cards: a hairline frame that lifts, warms to white, and draws a coral top
   edge on hover so every box reads as clearly clickable */
#jall .jgrid{background:transparent;gap:1px}
#jall .jcard{position:relative;background:var(--paper);box-shadow:0 0 0 1px var(--hair);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s var(--ease)}
#jall .jcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:4;
  background:var(--coral);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
#jall .jcard:hover,#jall .jcard:focus-within{background:#fff;transform:translateY(-6px);
  box-shadow:0 26px 52px -28px rgba(6,40,46,.6),0 0 0 1px var(--hair);z-index:2}
#jall .jcard:hover::before,#jall .jcard:focus-within::before{transform:scaleX(1)}
#jall .jcard:hover h3 a{color:var(--cerulean)}
#jall .jcard .more{color:var(--coral-deep)}
#jall .jcard[hidden],#jall .jfeature[hidden]{display:none}
.jarr{display:inline-block;transition:transform .35s var(--ease)}
.jcard:hover .jarr,.jfeature:hover .jarr{transform:translateX(6px)}

/* feature: same lift language, coral edge cue */
#jall .jfeature{transition:box-shadow .5s var(--ease)}
#jall .jfeature:hover{box-shadow:0 30px 66px -32px rgba(6,40,46,.75)}

/* empty state tint */
#jall .gempty{background:var(--cream)}

@media(prefers-reduced-motion:reduce){
  #jall .jcard,#jall .jcard::before,.jarr,#jall .jfeature{transition:none}
  #jall .jcard:hover,#jall .jcard:focus-within{transform:none}
}

/* ---------- guides hub: featured mosaic ---------- */
.gfeature{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(220px,1fr);
  gap:2px;background:var(--hair)}
.gfeature .fcard{position:relative;display:block;overflow:hidden;background:var(--ink)}
.gfeature .fcard:first-child{grid-column:span 2;grid-row:span 2}
.gfeature .fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease)}
.gfeature .fcard:hover img{transform:scale(1.06)}
.gfeature .fcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,20,26,0) 34%,rgba(6,20,26,.5) 66%,rgba(6,20,26,.86) 100%)}
.gfeature .fcard__b{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(16px,1.8vw,30px);color:#fff}
.gfeature .fcard .tag{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--turq);font-weight:600}
.gfeature .fcard h3{font-size:clamp(1.1rem,1.5vw,1.7rem);line-height:1.1;margin-top:8px;
  color:#fff;font-weight:400}
.gfeature .fcard:first-child h3{font-size:clamp(1.6rem,2.5vw,2.7rem);max-width:16ch}
@media(max-width:820px){.gfeature{grid-template-columns:repeat(2,1fr)}
  .gfeature .fcard:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/9}}
@media(max-width:520px){.gfeature{grid-template-columns:1fr}
  .gfeature .fcard:first-child{grid-column:auto}}

/* ============================ GUIDES HUB v2 ============================ */

/* ---------- cinematic hero ---------- */
.ghero{position:relative;min-height:clamp(440px,66svh,700px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink)}
.ghero__bg{position:absolute;inset:-6% 0;z-index:0}
.ghero__bg img{width:100%;height:100%;object-fit:cover}
.ghero__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(6,40,46,.34) 0%,rgba(6,40,46,.08) 32%,rgba(6,40,46,.5) 62%,rgba(6,26,30,.86) 100%)}
.ghero__in{position:relative;z-index:2;width:100%;max-width:1500px;margin-inline:auto;
  padding:clamp(34px,6vw,84px) var(--gutter)}
.ghero__t{color:var(--paper);font-family:var(--serif);font-weight:400;
  font-size:clamp(2.7rem,6.4vw,5.6rem);line-height:1;margin:16px 0 0;letter-spacing:-.005em;
  text-shadow:0 2px 40px rgba(0,0,0,.35)}
.ghero__lead{color:var(--on-dark);opacity:.92;font-size:clamp(1.04rem,1.35vw,1.34rem);
  line-height:1.5;max-width:48ch;margin-top:20px;font-weight:400}
.ghero__cue{display:inline-flex;align-items:center;gap:10px;margin-top:28px;color:var(--turq);
  font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase}
.ghero__cue svg{width:18px;height:18px;animation:ghcue 1.9s var(--ease) infinite}
@keyframes ghcue{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.ghero__cue svg{animation:none}}

/* ---------- brand divider ornament (the "lines that separate them") ---------- */
.bdiv{display:flex;align-items:center;gap:16px;justify-content:center}
.bdiv>span{height:1.5px;flex:1;max-width:180px;background:linear-gradient(90deg,transparent,var(--cerulean))}
.bdiv>span:last-child{background:linear-gradient(90deg,var(--cerulean),transparent)}
.bdiv__wave{width:54px;height:12px;flex:none}
.bdiv--head{margin-top:22px}

/* ---------- sticky search + filter COMMAND band (the star) ---------- */
.gcmd{position:sticky;top:var(--head-h);z-index:40;background:var(--paper);
  border-bottom:1px solid var(--hair);box-shadow:0 14px 34px -26px rgba(6,40,46,.6);
  padding-block:clamp(15px,1.7vw,22px)}
.gcmd .wrap{max-width:1500px;margin-inline:auto}
.gcmd__in{display:flex;align-items:center;gap:16px 26px;flex-wrap:wrap}
.gsearch{position:relative;flex:1 1 440px;min-width:min(100%,300px);display:flex;align-items:center}
.gsearch>svg{position:absolute;left:24px;top:50%;transform:translateY(-50%);width:24px;height:24px;
  color:var(--cerulean);pointer-events:none}
.gsearch input{width:100%;padding:19px 128px 19px 62px;font-family:var(--sans);
  font-size:clamp(1.08rem,1.15vw,1.28rem);font-weight:600;color:var(--tx);
  border:2px solid var(--hair);border-radius:60px;background:#fff;
  -webkit-appearance:none;appearance:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.gsearch input::placeholder{color:var(--tx-soft);font-weight:400}
.gsearch input:focus{outline:none;border-color:var(--cerulean);box-shadow:0 0 0 5px rgba(10,124,140,.15)}
.gcount{position:absolute;right:24px;top:50%;transform:translateY(-50%);font-family:var(--sans);
  font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--cerulean);
  pointer-events:none;white-space:nowrap}
.gchips{display:flex;flex-wrap:wrap;gap:9px}
.gchip{font-family:var(--sans);font-weight:600;font-size:.84rem;letter-spacing:.01em;padding:11px 18px;
  border-radius:60px;border:1.5px solid var(--hair);background:#fff;color:var(--tx-soft);
  cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.gchip:hover{border-color:var(--cerulean);color:var(--cerulean)}
.gchip.on{background:var(--cerulean);border-color:var(--cerulean);color:#fff;
  box-shadow:0 8px 20px -12px rgba(10,124,140,.7)}
@media(max-width:900px){
  .gsearch{flex:1 1 100%}
  .gsearch input{padding:16px 118px 16px 56px}
  .gchips{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:2px}
  .gchips::-webkit-scrollbar{display:none}
}

/* ---------- featured mosaic header ---------- */
.ghead{max-width:760px;margin-inline:auto;text-align:center}
.ghead .eyebrow{display:block}
.ghead__t{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.4vw,3rem);
  line-height:1.08;margin-top:14px}

/* ---------- category BANDS (organized, alternating tint) ---------- */
.gband{padding-block:clamp(42px,5.2vw,82px)}
.gband.cream{background:var(--cream)}
.gband>.wrap{max-width:1500px;margin-inline:auto}
.gband__head{display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  margin-bottom:clamp(24px,3vw,44px)}
.gband__no{font-family:var(--sans);font-weight:800;font-size:.82rem;letter-spacing:.08em;
  color:var(--coral);flex:none}
.gband__name{font-family:var(--serif);font-weight:400;line-height:1;flex:none;
  font-size:clamp(1.55rem,3vw,2.6rem)}
.gband__rule{flex:1;height:1.5px;min-width:22px;
  background:linear-gradient(90deg,var(--cerulean),rgba(10,124,140,.06))}
.gband__ct{font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx-soft);flex:none;white-space:nowrap}
/* transparent gap + hairline-outlined cards: keeps the tight edge-to-edge look
   but a partial last row shows the band tint, never a phantom teal cell */
.gband .jgrid{background:transparent;gap:1px}
.gband[hidden]{display:none}

/* card polish inside bands: hairline frame + coral hover accent */
.gband .jcard{position:relative;box-shadow:0 0 0 1px var(--hair);
  transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.gband .jcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;
  background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.gband .jcard:hover{background:#fff;box-shadow:0 20px 44px -26px rgba(6,40,46,.55),0 0 0 1px var(--hair)}
.gband .jcard:hover::before{transform:scaleX(1)}
.gband .jcard .more{color:var(--coral-deep)}

.gempty{text-align:center;color:var(--tx-soft);padding:clamp(48px,7vw,96px) 0}
.gempty h3{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,2rem);color:var(--tx);margin-bottom:10px}

/* --------------------------------------------------- legal (privacy) */
.legal{display:grid;grid-template-columns:minmax(0,46rem) 1fr;align-items:stretch}
.legal .prose{max-width:none;padding:clamp(40px,5vw,80px) var(--railgap) clamp(48px,6vw,96px) var(--gutter)}
.legal .prose>*{max-width:46rem}
.legal__rail{background:var(--sand);border-left:1px solid var(--hair)}
.legal__rail-in{position:sticky;top:calc(var(--head-h) + 22px);
  padding:clamp(28px,3vw,44px) var(--gutter);display:flex;flex-direction:column;gap:22px}
.toc,.rail-card .toc{list-style:none;display:flex;flex-direction:column;gap:2px}
.toc li,.rail-card .toc li{display:block;padding:0;border:0}
.toc a{display:block;padding:3px 0;font-size:.82rem;line-height:1.35;color:var(--tx-soft)}
/* the "In this guide" director: quiet, at most 1/5 of the width, never taller than the viewport */
.rail-card:has(.toc){padding:16px 18px;max-height:calc(100vh - var(--head-h) - 48px);overflow-y:auto;scrollbar-width:thin}
.rail-card:has(.toc) h3{margin-bottom:8px}
.toc a:hover{color:var(--cerulean)}
@media(max-width:1020px){.legal{grid-template-columns:1fr}
  .legal .prose{padding-inline:var(--gutter)}
  .legal__rail-in{position:static}}

/* --------------------------------------------------- forms */
.form{display:grid;gap:20px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--tx-dim)}
.field input,.field textarea,.field select{font:inherit;font-size:1rem;padding:.9em 1em;
  background:var(--paper);border:1px solid var(--hair);border-radius:2px;color:var(--tx);
  transition:border .3s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--cerulean);outline:none}
.field textarea{min-height:150px;resize:vertical}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--tx-soft)}
.consent input{margin-top:.28em;width:18px;height:18px;accent-color:var(--cerulean)}
.consent a{color:var(--cerulean);text-decoration:underline;text-underline-offset:2px}
.form__msg{font-size:.92rem;padding:14px 16px;border-radius:2px;display:none}
.form__msg.ok{display:block;background:rgba(10,124,140,.12);color:var(--sea)}
.form__msg.err{display:block;background:rgba(180,60,50,.12);color:#8f2f26}
@media(max-width:640px){.form .row{grid-template-columns:1fr}}

/* --------------------------------------------------- Hollywood title card
   Cinematic intro on the HOME page only. boot.js adds html.pre-on (sync,
   before paint) so other pages never flash it; app.js runs the timeline.
   Curtains split + film grain + spotlight sweep + a light-sweep shimmer
   that crosses the crest (masked to its shape) — the cavmir.com effect,
   in the Cerulean's turquoise + coral. */
.pre{position:fixed;inset:0;z-index:2147483600;overflow:hidden;opacity:0;visibility:hidden;
  pointer-events:none}  /* above the consent banner so the title card stays clean */
html.pre-on .pre{opacity:1;visibility:visible;pointer-events:auto}
html.pre-lock{overflow:hidden}
/* must out-specify `html.pre-on .pre` (0,2,1) or the intro never clears on home */
.pre.done,html.pre-on .pre.done{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s ease,visibility 0s .5s}

/* curtains — two dark halves that split open at the reveal */
.pre__curtain{position:absolute;left:-2%;right:-2%;height:51%;z-index:2;
  background:radial-gradient(ellipse at center,#0b3b43 0%,#06282e 60%,#041b20 100%);
  box-shadow:inset 0 0 140px rgba(0,0,0,.45);
  transition:transform .95s cubic-bezier(.86,0,.07,1)}
.pre__curtain--top{top:0;transform:translateY(0)}
.pre__curtain--bottom{bottom:0;transform:translateY(0)}
.pre__curtain--top::after{content:"";position:absolute;left:14%;right:14%;bottom:-.5px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(58,210,224,.55) 30%,rgba(255,111,94,.7) 50%,
  rgba(58,210,224,.55) 70%,transparent);opacity:0;transition:opacity .4s ease}
.pre.is-intro .pre__curtain--top::after{opacity:1}

/* film grain */
.pre__grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.16;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  animation:pre-grain 1.8s steps(6) infinite}
@keyframes pre-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-2%)}60%{transform:translate(-2%,-1%)}
  80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}

/* stage */
.pre__stage{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);padding:0 24px;
  text-align:center;pointer-events:none}
.pre.is-opening .pre__stage{opacity:0;transform:scale(1.05);
  transition:opacity .5s ease-out,transform .95s ease-out}

/* spotlight beam sweeping behind the crest */
.pre__spot{position:absolute;top:50%;left:0;width:80vmax;height:80vmax;
  max-width:1200px;max-height:1200px;transform:translate(-100%,-50%);opacity:0;
  mix-blend-mode:screen;pointer-events:none;filter:blur(18px);
  background:radial-gradient(circle at center,rgba(180,245,255,.30) 0%,
  rgba(120,230,245,.16) 26%,rgba(120,230,245,.05) 46%,transparent 64%)}
.pre.is-intro .pre__spot{animation:pre-spot 1600ms cubic-bezier(.32,.06,.4,1) forwards}
@keyframes pre-spot{0%{transform:translate(-100%,-50%);opacity:0}10%{opacity:.55}
  50%{transform:translate(0,-50%);opacity:1}90%{opacity:.5}
  100%{transform:translate(100%,-50%);opacity:0}}

/* the crest — the exact logo — scales + fades in with a glow */
.pre__mark{position:relative;display:inline-block;line-height:0;
  width:min(300px,64vw)}
.pre__crest{display:block;width:100%;height:auto;opacity:0;transform:scale(.86);
  filter:drop-shadow(0 18px 60px rgba(0,0,0,.5))}
.pre.is-intro .pre__crest{animation:pre-crest 1500ms cubic-bezier(.22,.61,.36,1) forwards}
@keyframes pre-crest{0%{opacity:0;transform:scale(.86)}
  60%{opacity:1}100%{opacity:1;transform:scale(1)}}

/* light-sweep shimmer — a bright bar that crosses the crest, masked to its shape */
.pre__shine{position:absolute;inset:0;pointer-events:none;opacity:0;
  -webkit-mask:url(/assets/img/cerulean-crest.webp?v=67) center/contain no-repeat;
  mask:url(/assets/img/cerulean-crest.webp?v=67) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.15) 46%,
  rgba(255,255,255,.9) 50%,rgba(255,255,255,.15) 54%,transparent 62%);
  background-size:260% 100%;background-position:120% 0;mix-blend-mode:screen}
.pre.is-intro .pre__shine{animation:pre-shine 1700ms 500ms cubic-bezier(.5,.05,.2,1) forwards}
@keyframes pre-shine{0%{opacity:0;background-position:120% 0}
  12%{opacity:1}88%{opacity:1}100%{opacity:.9;background-position:-40% 0}}

/* hairline rule + tagline */
.pre__rule{width:0;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(58,210,224,.9) 22%,#3ad2e0 50%,
  rgba(58,210,224,.9) 78%,transparent);box-shadow:0 0 10px rgba(58,210,224,.45)}
.pre.is-intro .pre__rule{animation:pre-rule 700ms 1500ms cubic-bezier(.65,0,.35,1) forwards}
@keyframes pre-rule{0%{width:0;opacity:0}15%{opacity:1}
  100%{width:clamp(200px,30vw,360px);opacity:1}}
.pre__sub{font-family:var(--sans);font-weight:600;font-size:clamp(.62rem,1.1vw,.76rem);
  letter-spacing:.5em;text-indent:.5em;text-transform:uppercase;color:rgba(244,241,236,.85);
  opacity:0;white-space:nowrap}
.pre.is-intro .pre__sub{animation:pre-fade 600ms 1950ms cubic-bezier(.25,.46,.45,.94) forwards}
@keyframes pre-fade{from{opacity:0;transform:translateY(8px)}to{opacity:.85;transform:none}}
@media(max-width:640px){.pre__sub{letter-spacing:.34em;text-indent:.34em}}

/* --------------------------------------------------- reveal */
[data-reveal]{opacity:0;transform:translateY(30px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-d]{transition-delay:var(--rd,0s)}

/* --------------------------------------------------- consent banner */
.cc{position:fixed;left:var(--gutter);right:var(--gutter);bottom:20px;z-index:80;
  max-width:560px;background:var(--paper);border:1px solid var(--hair);
  box-shadow:0 18px 60px rgba(6,18,25,.28);padding:24px 26px;border-radius:3px;
  transform:translateY(140%);transition:transform .6s var(--ease)}
.cc.show{transform:none}
.cc p{font-size:.9rem;color:var(--tx-soft);margin-bottom:16px}
.cc a{color:var(--cerulean);text-decoration:underline}
.cc__row{display:flex;gap:10px}
.cc .btn{padding:.7em 1.2em;font-size:.72rem}

/* --------------------------------------------------- misc */
.center{text-align:center}
.mt{margin-top:clamp(28px,3vw,44px)}
.hr{height:1px;background:var(--hair);border:none}
/* MOTION-FIRST (Dan's standing decision, from the Stargaze frozen-page wall):
   full motion is the default for everyone; Calm is the explicit toggle
   (footer button or ?calm) — we do NOT auto-gate on prefers-reduced-motion.
   These rules fire only in explicit Calm mode. */
html.m-calm *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
html.m-calm [data-reveal]{opacity:1;transform:none}
html.m-calm .pre{display:none}
html.m-calm .hero__bg,html.m-calm .statement__bg,html.m-calm .cta__bg,
html.m-calm .post-hero__bg{inset:0}
html.m-calm .marq__track{animation:marqloop 60s linear infinite !important;
  animation-duration:60s !important}

/* ============================================================================
   MOTION KIT + NAV DROPDOWNS (v9)
   ============================================================================ */

/* ---------------- desktop dropdown nav — cinematic dark mega-panel ---------------- */
.ndd{position:relative}
.ndd__top{display:inline-flex;align-items:center;gap:7px}
.ndd__c{width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease);opacity:.7}
.ndd:hover .ndd__c,.ndd:focus-within .ndd__c{transform:rotate(225deg) translateY(-1px)}

.ndd__panel{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  padding-top:18px;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s;z-index:65}
.ndd:hover .ndd__panel,.ndd:focus-within .ndd__panel{opacity:1;visibility:visible}
/* Edge groups: a wide panel centred on an edge trigger crosses the viewport border
   (measured: the 650px "The Villa" panel clipped the LEFT edge by up to 165px below
   ~1440px). Anchor the first dropdown to its LEFT and open rightward; anchor the last
   to its RIGHT and open leftward — so neither can run off-screen. (Same trick the
   Dining .ndd--dine panel already uses.) The panel transform is static, so one rule
   per side is enough. */
.ndd--edgeL .ndd__panel{left:0;right:auto;transform:translateX(-24px)}
.ndd--edgeR .ndd__panel{left:auto;right:0;transform:translateX(24px)}

/* light, airy Caribbean glass card — frosted sea-foam over sand, soft shadow */
/* NO backdrop-filter: the bg is ~97% opaque so a blur(22px) was invisible but
   cost 3-4 dropped frames per open on Chromium (Kurt's "hover lag"). Solid bg
   instead — reads identical, zero blur repaint. */
.ndd__card{position:relative;overflow:hidden;
  background:linear-gradient(168deg,rgb(255,253,248) 0%,rgb(247,242,233) 60%,rgb(233,244,245) 100%);
  border:1px solid rgba(10,124,140,.16);border-radius:22px;
  box-shadow:0 40px 90px -34px rgba(10,50,58,.34),
    0 12px 34px -20px rgba(10,50,58,.22),inset 0 1px 0 rgba(255,255,255,.7);
  padding:26px 24px 22px;min-width:352px;
  display:flex;flex-direction:column;
  transform:translateY(14px) scale(.985);transform-origin:top center;
  transition:transform .55s var(--ease)}
.ndd:hover .ndd__card,.ndd:focus-within .ndd__card{transform:none}
/* Dining (single-column) panel: much larger, more generous rows */
.ndd__card--roomy{min-width:440px;padding:32px 30px 28px}
.ndd__card--roomy .ndd__eyebrow{font-size:.76rem;letter-spacing:.28em;padding:2px 16px 16px}
.ndd__card--roomy .ndd__lead{margin:20px 0 14px;padding:20px 24px !important;
  font-size:1.24rem !important;border-radius:17px}
.ndd__card--roomy .ndd__list{gap:5px}
.ndd__card--roomy .ndd__list a{padding:17px 19px;font-size:1.16rem;gap:15px;border-radius:14px}
.ndd__card--roomy .ndd__list a::before{width:8px;height:8px}
/* soft seafoam wash at the top instead of a neon hairline */
.ndd__card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--cerulean-hi) 28%,var(--turq) 55%,transparent);
  opacity:.5}
.ndd__card::after{content:"";position:absolute;top:-40%;left:50%;width:82%;height:78%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(58% 62% at 50% 0,rgba(21,174,194,.12),transparent 72%)}

.ndd__eyebrow{position:relative;z-index:1;display:block;
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--cerulean);padding:2px 14px 14px;
  border-bottom:1px solid rgba(10,124,140,.14)}

/* featured lead row (villa overview / full directory / all guides) */
.ndd__lead{display:flex !important;align-items:center;justify-content:space-between;
  gap:18px;margin:16px 0 12px;padding:16px 20px !important;border-radius:15px;
  background:linear-gradient(120deg,rgba(21,174,194,.10),rgba(10,124,140,.07));
  border:1px solid rgba(10,124,140,.20);
  color:var(--tx) !important;font-weight:700 !important;font-size:1.12rem !important;
  letter-spacing:0;transition:background .3s var(--ease),border-color .3s,transform .3s var(--ease),box-shadow .3s}
.ndd__lead::before{display:none !important}
.ndd__lead .ndd__arr{color:var(--cerulean);font-size:1.1em;transition:transform .3s var(--ease),color .3s}
.ndd__lead:hover{background:linear-gradient(120deg,rgba(21,174,194,.18),rgba(10,124,140,.12)) !important;
  border-color:rgba(10,124,140,.34);transform:translateY(-1px);
  box-shadow:0 10px 24px -14px rgba(10,80,90,.4)}
.ndd__lead:hover .ndd__arr{transform:translateX(6px);color:var(--coral)}

/* foot leads (The Villa): Concierge + All amenities as two blue boxes that
   close the panel — one ending each column, set apart by a soft divider. */
.ndd__foots{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  gap:12px;margin-top:16px;padding-top:16px;
  border-top:1px solid rgba(10,124,140,.14)}
.ndd__foots .ndd__lead{margin:0;font-size:1.06rem !important}

.ndd__list{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px}
.ndd__list--cols{display:grid;grid-template-columns:1fr 1fr;column-gap:26px;min-width:600px}

.ndd__card a{position:relative;display:flex;align-items:center;gap:13px;
  padding:13px 15px;border-radius:12px;color:var(--tx-soft) !important;
  font-family:var(--sans);font-size:1.02rem;font-weight:500;letter-spacing:.005em;
  opacity:0;transform:translateY(8px);
  transition:background .28s var(--ease),color .28s,transform .6s var(--ease),opacity .6s var(--ease)}
.ndd__list a::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--cerulean-hi);opacity:.42;transform:scale(.72);
  transition:transform .28s var(--ease),opacity .28s,background .28s,box-shadow .28s}
.ndd__card a::after{display:none}
.ndd__list a:hover{background:rgba(21,174,194,.12);color:var(--ink) !important}
.ndd__list a:hover::before{background:var(--coral);opacity:1;transform:scale(1.2);
  box-shadow:0 0 12px rgba(255,111,94,.5)}
/* staggered cascade — delay only on the OPEN state so closing is instant */
.ndd:hover .ndd__card a,.ndd:focus-within .ndd__card a{opacity:1;transform:none;
  transition-delay:calc(var(--i,0)*.03s)}

/* ---------------- overlay accordion groups ---------------- */
.ovg{display:flex;flex-direction:column}
.ovg__btn{display:flex;align-items:baseline;gap:18px;font-family:var(--serif);
  color:var(--paper);font-size:clamp(2rem,7vw,4.2rem);line-height:1.08;text-align:left;
  transition:color .3s}
.ovg__btn:hover{color:var(--turq)}
.ovg__btn span{font-family:var(--sans);font-size:.5em;transition:transform .4s var(--ease);
  color:var(--turq)}
.ovg__btn[aria-expanded="true"] span{transform:rotate(45deg)}
.ovg__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.ovg__subin{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.ovg[data-open] .ovg__sub{grid-template-rows:1fr}
.ovg__sub a{font-family:var(--sans) !important;font-size:1.02rem !important;
  color:var(--on-dark-soft) !important;padding:8px 0 8px 26px;line-height:1.3 !important;
  transform:none !important;opacity:1 !important}
.ovg__sub a:hover{color:var(--turq) !important}

/* ---------------- depth hero ---------------- */
.dh{position:relative;min-height:100svh;overflow:hidden;color:var(--paper);
  display:flex;align-items:flex-end}
.dh__base,.dh__fg{position:absolute;inset:-6% 0;z-index:1;pointer-events:none}
.dh__base img,.dh__fg img{width:100%;height:100%;object-fit:cover;object-position:center}
.dh__video{position:absolute;inset:-6% 0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.1s ease}
.dh__video video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
html.m-full .dh__video{opacity:1}
/* Hide the hero video only in the site's own Calm mode — NOT on the raw OS
   reduce-motion flag (boot.js deliberately ignores that flag; obeying it here
   hid the playing video behind its poster for reduce-motion users). */
html.m-calm .dh__video{display:none}
.dh__fg{z-index:3}
.dh__title{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);
  top:clamp(76px,9vh,112px);overflow:hidden;pointer-events:none}
.dh__title h1{font-size:clamp(3rem,6.6vw,8.2rem);font-weight:500;letter-spacing:-.02em;
  line-height:.95;max-width:14ch;color:#fff;text-shadow:0 2px 46px rgba(4,14,20,.3)}
.dh-rise{display:block}
html.m-full .dh-rise{transform:translateY(112%)}
html.m-full.fx-fallback .dh-rise{transform:none;transition:transform .8s var(--ease)}
html.m-calm .dh-rise{transform:none}
.dh__in{position:relative;z-index:4;width:100%;padding:var(--gutter);
  padding-bottom:clamp(40px,7vh,92px)}
.dh__sub{max-width:44ch;font-size:clamp(1.05rem,1vw + .8rem,1.4rem);
  color:#fff;text-shadow:0 1px 22px rgba(4,14,20,.55)}
.dh__row{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.dh .hero__meta{margin-left:auto;display:flex;gap:26px;align-items:flex-end}
.dh::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;z-index:3;
  background:linear-gradient(180deg,rgba(6,18,25,0),rgba(6,18,25,.62));pointer-events:none}
/* No colour wash over the hero film or its still (Dan's call, 2026-09-25): the
   cerulean layer (v68 flat 10%, v69 30% `color` blend) looked awful -- the
   footage ships as shot. Don't re-add a tint here. */
.dh .scrollcue{z-index:4}
@media(max-width:600px){
  .dh{align-items:flex-end}
  .dh__title{top:clamp(76px,11vh,120px)}
  .dh__title h1{font-size:clamp(2.7rem,13vw,3.6rem)}
  .dh__in{padding-bottom:76px}
}
/* Mobile hero legibility: the copy block (eyebrow + sub + buttons) sits low
   over bright video frames (water, sunlit pergola), where the small 34% scrim
   didn't reach. Deepen the bottom scrim into a tall, smooth ramp so all the
   copy stays readable while the sky up top stays clear + cinematic. Scoped to
   the same width where the mobile hero video loads (<=768px). */
@media(max-width:768px){
  .dh::after{height:82%;background:linear-gradient(180deg,
    rgba(6,18,25,0) 0%,
    rgba(6,18,25,.22) 20%,
    rgba(6,18,25,.48) 50%,
    rgba(6,18,25,.70) 78%,
    rgba(6,18,25,.90) 100%)}
  .dh__sub{text-shadow:0 1px 2px rgba(4,14,20,.6),0 2px 30px rgba(4,14,20,.7)}
  .dh .eyebrow.on-dark{text-shadow:0 1px 2px rgba(4,14,20,.6),0 1px 16px rgba(4,14,20,.85)}
}

/* ---------------- word band ---------------- */
.wband{position:relative;min-height:92vh;overflow:hidden;display:flex;align-items:flex-end}
.wband__base,.wband__fg{position:absolute;inset:0;pointer-events:none}
.wband__base img,.wband__fg img{width:100%;height:100%;object-fit:cover}
.wband__base{z-index:1}
.wband__fg{z-index:3}
/* Marcellus is a single-weight (400) titling serif — forcing 900 faux-bolds it
   and blurs the edges. Keep the true weight so the letters stay razor-sharp;
   presence comes from size + caps, not synthetic weight. */
.wband__word{position:absolute;z-index:2;top:24%;left:0;right:0;text-align:center;
  font-family:var(--serif);font-weight:400;line-height:1;color:#f4feff;
  letter-spacing:.02em;pointer-events:none;text-transform:uppercase;
  text-shadow:0 1px 2px rgba(6,20,28,.4),0 10px 44px rgba(6,20,28,.5);
  will-change:transform}
.wband__word span{display:block;white-space:nowrap}
.wband__word-sm{font-size:clamp(1.35rem,4vw,2.7rem);letter-spacing:.4em;
  padding-left:.4em;opacity:.94;margin-bottom:.14em}
.wband__word-lg{font-size:clamp(3.4rem,13vw,9.5rem);letter-spacing:.015em}
html.m-calm .wband__word{left:0;right:0}
/* Desktop: the big "ST. CROIX" straddles the colonnade so the centre pillar
   lands in the gap between "ST." and "CROIX" — "ST." tucks behind the columns,
   "CROIX" reads clean in the open archway. That IS the behind-the-columns depth. */
@media(min-width:900px){
  /* v2 (2026-09-04): anchored to the OPEN bay of the big arch, not the arch top.
     The block hangs from bottom:41% so the caps straddle the horizon (sky above,
     sea below) and clear both the arch soffit and the balustrade rail; the
     small line sits in open sky. Right-aligned at 97vw and the big line is
     sized (8.9vw = 41.4vw of ink for "ST. CROIX") so its LEFT ink edge lands
     ~0.4vw behind the pillar's right edge (pillar = 56.0% of the photo width;
     object-fit:cover on a wider-than-3:2 stage crops only top/bottom, so photo
     x% == viewport x%). Scrolling rises + slides the word right, so it emerges
     from behind the pillar instead of disappearing behind it. Every letter stays
     readable at every scroll position - that was the v1 failure. */
  .wband__word{top:auto;bottom:41%;left:auto;right:3%;text-align:right}
  html.m-calm .wband__word{top:auto;bottom:41%;left:auto;right:3%}
  .wband__word-sm{font-size:2.4vw;letter-spacing:.4em;padding-left:0;
    margin-right:-.4em;margin-bottom:.22em}
  .wband__word-lg{font-size:8.9vw;letter-spacing:.015em}
}
.wband__cap{position:relative;z-index:4;padding:var(--gutter);
  padding-bottom:clamp(30px,5vh,64px);color:#fff;max-width:52ch;
  text-shadow:0 1px 20px rgba(4,14,20,.6)}
.wband__cap .eyebrow{color:var(--turq);margin-bottom:12px}
.wband__cap p{font-size:clamp(1.02rem,.9vw + .85rem,1.3rem)}
.wband::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;z-index:3;
  background:linear-gradient(180deg,rgba(6,18,25,0),rgba(6,18,25,.55));pointer-events:none}
/* Below the desktop breakpoint: no single arch opening is as wide as the word,
   so the behind-the-columns effect breaks it into fragments. Lift the word in
   front of the columns and center it — legibility beats the depth trick here. */
@media(max-width:899.98px){
  .wband__word{top:32%;left:0;right:0;z-index:5;text-align:center}
  html.m-calm .wband__word{left:0;right:0}
  .wband__word-sm{font-size:clamp(1.1rem,2.4vw,1.7rem)}
  .wband__word-lg{font-size:clamp(3.4rem,8.6vw,6rem)}}
@media(max-width:600px){.wband{min-height:72vh}
  .wband__word{top:34%}
  .wband__word-sm{font-size:clamp(1.1rem,4.6vw,1.6rem)}
  .wband__word-lg{font-size:clamp(3rem,15vw,4.4rem)}}

/* ---------------- pinned strip ---------------- */
.pstrip{position:relative;background:var(--ink);color:var(--on-dark)}
.pstrip__head{padding:clamp(60px,7vw,110px) var(--gutter) clamp(28px,3vw,46px)}
.pstrip__head h2{font-size:clamp(2.1rem,4.6vw,4.5rem);color:var(--paper);max-width:22ch}
.pstrip__head .eyebrow{margin-bottom:14px}
.pstrip__stage{overflow:hidden}
.pstrip__track{display:flex;gap:clamp(14px,1.6vw,26px);padding:0 var(--gutter)
  clamp(60px,7vw,110px);will-change:transform;width:max-content}
.pcard{position:relative;width:clamp(300px,34vw,560px);flex:none;overflow:hidden;
  border-radius:3px;background:var(--ink2);display:block}
.pcard img{width:100%;height:clamp(360px,52vh,560px);object-fit:cover;
  transition:transform .8s var(--ease)}
.pcard:hover img{transform:scale(1.05)}
.pcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,18,25,.05) 40%,rgba(6,18,25,.78))}
.pcard__b{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2vw,30px);z-index:2}
.pcard__b .k{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  font-weight:600;color:var(--turq)}
.pcard__b h3{font-family:var(--serif);font-size:clamp(1.4rem,2vw,2rem);color:#fff;
  margin-top:8px;line-height:1.1}
.pcard__b p{color:rgba(244,241,232,.85);font-size:.92rem;margin-top:8px;max-width:38ch}
html.m-calm .pstrip__stage{overflow-x:auto;scrollbar-width:none}
@media(max-width:900px){
  .pstrip__stage{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pstrip__stage::-webkit-scrollbar{display:none}
  .pcard{width:78vw}
  .pcard img{height:60vh}
}

/* ---------------- velocity marquee ---------------- */
.marq{overflow:hidden;padding-block:clamp(22px,2.6vw,40px);border-block:1px solid var(--hair);
  background:var(--paper)}
.marq__track{display:inline-flex;white-space:nowrap;will-change:transform;
  font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3.2vw,3.2rem);
  color:var(--ink)}
.marq__track span{padding-right:1.2em}
.marq__track .dot{color:var(--cerulean)}
html.m-calm .marq__track{animation:marqloop 60s linear infinite}
@keyframes marqloop{to{transform:translateX(-50%)}}

/* ---------------- counters ---------------- */
.stat b[data-count]{font-variant-numeric:tabular-nums}

/* ---------------- magnetic buttons ---------------- */
@media(pointer:fine){.btn-mag{will-change:transform}}

/* ---------------- motion toggle ---------------- */
.mtoggle{font-size:.8rem;letter-spacing:.03em;color:inherit;display:inline-flex;gap:6px;
  align-items:baseline;padding:0;border-bottom:1px solid transparent;transition:color .3s}
.mtoggle:hover{color:var(--turq)}
.mtoggle b{font-weight:600;color:var(--turq)}

/* ---------------- cross-page view transitions ---------------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtfade .32s ease both}
::view-transition-new(root){animation:vtin .42s ease both}
@keyframes vtfade{to{opacity:0}}
@keyframes vtin{from{opacity:0}}

/* ============================================================================
   DIRECTORY (v10) — list rows, photo bands, credits
   ============================================================================ */
.dirlist{border-top:1px solid var(--hair)}
.dirrow{display:grid;grid-template-columns:70px minmax(220px,340px) 1fr auto;
  gap:clamp(16px,2.4vw,44px);align-items:baseline;
  padding:clamp(22px,2.6vw,40px) var(--gutter);border-bottom:1px solid var(--hair);
  position:relative}
.dirrow__no{font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.22em;
  color:var(--cerulean)}
.dirrow__id h3{font-size:clamp(1.3rem,1.9vw,1.9rem);line-height:1.12}
.dirrow__id .a{margin-top:6px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--tx-dim)}
.dirrow__p{color:var(--tx-soft);max-width:62ch}
.dirrow--hub{transition:background .3s}
.dirrow--hub:hover{background:var(--cream)}
.dirrow--hub h3{color:var(--tx);transition:color .3s}
.dirrow--hub:hover h3{color:var(--cerulean)}
.dirrow__arr{font-size:1.4rem;color:var(--cerulean);align-self:center;
  transition:transform .35s var(--ease)}
.dirrow--hub:hover .dirrow__arr{transform:translateX(6px)}
@media(max-width:900px){
  .dirrow{grid-template-columns:44px 1fr;grid-template-rows:auto auto}
  .dirrow__p{grid-column:2}
  .dirrow__arr{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%)}
}
/* v12 — align the directory to the portfolio's full-width, gutter-aligned grid
   (the hero, photo bands and "good to know" band all sit at the gutter; the intro
   + filter + list now share that exact left edge instead of floating in a centered
   column ~35px further in). Reading measure is held INSIDE each block: the intro
   copy by .read, each blurb by a ch cap — not by narrowing the whole page. */
.dwrap{width:100%;padding-inline:var(--gutter)}
.dlistwrap{width:100%}
/* v13 — category rows given more presence: a large coral index numeral, the area
   as a turquoise tag, a comfortable blurb measure that fills the width, and a
   coral edge that rises on hover. Fills the row (no floating-in-empty-space feel)
   without turning the list into a card grid (a deliberate directory choice). */
.dirlist--cat{border-top:2px solid var(--ink)}
.dirlist--cat .dirrow{grid-template-columns:clamp(48px,5vw,84px) minmax(220px,300px) 1fr;
  gap:clamp(18px,3vw,52px);align-items:center;transition:background .35s var(--ease)}
.dirlist--cat .dirrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--coral);transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease)}
.dirlist--cat .dirrow:hover{background:var(--cream)}
.dirlist--cat .dirrow:hover::before{transform:scaleY(1)}
.dirlist--cat .dirrow__no{font-family:var(--serif);font-size:clamp(1.6rem,2.4vw,2.5rem);
  font-weight:400;letter-spacing:0;color:var(--coral);line-height:1;align-self:center}
.dirlist--cat .dirrow__id h3{font-size:clamp(1.25rem,1.7vw,1.65rem)}
.dirlist--cat .dirrow__id .a{margin-top:8px;display:inline-block;color:var(--sea);
  background:rgba(10,124,140,.09);border:1px solid rgba(10,124,140,.2);
  padding:3px 10px;border-radius:100px;font-size:.64rem;letter-spacing:.14em}
.dirlist--cat .dirrow__p{max-width:70ch;color:var(--tx-soft)}
@media(max-width:900px){
  .dirlist--cat .dirrow{grid-template-columns:44px 1fr;grid-template-rows:auto auto}
  .dirlist--cat .dirrow__no{align-self:start}
  .dirlist--cat .dirrow__p{grid-column:2;max-width:none}
}
/* clickable fly-from list rows — same coral-edge + serif numeral language so the
   directory and the "getting here" hub read as one system, arrow kept for affordance */
.dirlist .dirrow--hub{position:relative;align-items:center;
  grid-template-columns:clamp(48px,5vw,84px) minmax(220px,300px) 1fr auto}
.dirlist .dirrow--hub::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--coral);transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease)}
.dirlist .dirrow--hub:hover::before{transform:scaleY(1)}
.dirlist .dirrow--hub .dirrow__no{font-family:var(--serif);font-size:clamp(1.6rem,2.4vw,2.5rem);
  font-weight:400;letter-spacing:0;color:var(--coral);line-height:1}
.dirlist .dirrow--hub .dirrow__id .a{margin-top:8px;display:inline-block;color:var(--sea);
  background:rgba(10,124,140,.09);border:1px solid rgba(10,124,140,.2);
  padding:3px 10px;border-radius:100px;font-size:.64rem;letter-spacing:.14em}
.dirlist .dirrow--hub .dirrow__p{max-width:66ch}
@media(max-width:900px){
  .dirlist .dirrow--hub{grid-template-columns:44px 1fr}
  .dirlist .dirrow--hub .dirrow__no{align-self:start}
}

/* photo band with visible Commons credits */
.pband{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.pband__f{position:relative;margin:0;overflow:hidden;background:var(--ink2)}
.pband__f img{width:100%;height:clamp(280px,38vh,460px);object-fit:cover;
  transition:transform .8s var(--ease)}
.pband__f:hover img{transform:scale(1.04)}
.pband__f figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;
  background:linear-gradient(180deg,transparent,rgba(6,18,25,.72));text-align:right}
@media(max-width:820px){.pband{grid-template-columns:1fr}.pband__f img{height:52vw}}
.pcredit{font-size:.66rem;letter-spacing:.04em;color:rgba(244,241,232,.75)}
a.pcredit:hover{color:var(--turq);text-decoration:underline}
.post-hero .pcredit{position:absolute;right:var(--gutter);bottom:12px;z-index:3}

/* rail tip list */
.tiplist{list-style:none;display:flex;flex-direction:column;gap:14px}
.tiplist li{display:flex;flex-direction:column;gap:3px;font-size:.92rem;
  border-bottom:1px solid var(--hair);padding-bottom:12px}
.tiplist li:last-child{border-bottom:none;padding-bottom:0}
.tiplist b{color:var(--tx);font-weight:600}
.tiplist span{color:var(--tx-soft)}

/* ---------------- flight table (v11) ---------------- */
.fl-table{border-top:1px solid var(--hair)}
.fl-row{display:grid;grid-template-columns:1.2fr 1.2fr 1.6fr .8fr;
  gap:clamp(14px,2vw,40px);padding:18px var(--gutter);border-bottom:1px solid var(--hair);
  align-items:baseline}
.fl-row--h{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tx-dim)}
.fl-air{font-weight:600;color:var(--tx)}
.fl-org{color:var(--tx)}
.fl-freq,.fl-dur{color:var(--tx-soft);font-size:.95rem}
@media(max-width:820px){
  .fl-row{grid-template-columns:1fr 1fr}
  .fl-row--h{display:none}
  .fl-freq{grid-column:1/-1;margin-top:-6px}
}

/* ============================================================================
   LONG-FORM GUIDES (v12) — motion hero, chunked editorial, graphics blocks
   ============================================================================ */
/* ---- guide hero (.gh): base photo z1 → title z2 → cutout z3 → meta z4 ---- */
.gh{position:relative;min-height:88svh;overflow:hidden;color:var(--paper);
  display:flex;align-items:flex-end;background:var(--ink)}
.gh__base,.gh__fg{position:absolute;inset:-6% 0;z-index:1;pointer-events:none}
.gh__base img,.gh__fg img{width:100%;height:100%;object-fit:cover;object-position:center}
.gh__fg{z-index:3}
.gh::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,18,25,.36),rgba(6,18,25,.06) 38%,rgba(6,18,25,.14) 62%,rgba(6,18,25,.86))}
.gh--depth::before{background:linear-gradient(180deg,rgba(6,18,25,.30),rgba(6,18,25,0) 40%,rgba(6,18,25,0) 62%,rgba(6,18,25,.84))}
/* AI-art heroes (bright, high-key paintings) — deepen the scrim through the title
   band and add a tighter shadow so the white H1 stays legible. */
.gh--art::before{background:linear-gradient(180deg,rgba(6,18,25,.5),rgba(6,18,25,.34) 34%,rgba(6,18,25,.5) 60%,rgba(6,18,25,.9))}
.gh--art .gh__title h1{text-shadow:0 2px 30px rgba(4,14,20,.55),0 1px 4px rgba(4,14,20,.6)}
.gh__title{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);
  top:calc(var(--head-h) + 3vh);bottom:38%;display:flex;align-items:flex-end;
  overflow:hidden;pointer-events:none}
.gh--hz .gh__title{bottom:calc(100% - var(--hz,52%));align-items:flex-end}
.gh--depth .gh__title{bottom:calc(100% - var(--hz,52%));align-items:flex-end}
.gh--base .gh__title{bottom:34%}
.gh__title h1{font-size:clamp(2.4rem,5.4vw,6.4rem);font-weight:500;letter-spacing:-.018em;
  line-height:.98;max-width:16ch;color:#fff;text-shadow:0 2px 40px rgba(4,14,20,.34);
  margin:0;padding-bottom:.06em}
.gh-rise{display:block}
html.m-full .gh-rise{transform:translateY(112%)}
html.m-full.fx-fallback .gh-rise{transform:none;transition:transform .8s var(--ease)}
html.m-calm .gh-rise{transform:none}
.gh__in{position:relative;z-index:4;width:100%;padding:var(--gutter);
  padding-bottom:clamp(30px,5vh,64px);padding-top:clamp(20px,4vh,40px)}
.gh__in .post-meta{margin-bottom:14px}
.gh__in .post-meta span+span::before{content:"·";margin-right:16px;color:var(--on-dark-soft)}
.gh__sub{max-width:52ch;font-size:clamp(1.02rem,.9vw + .85rem,1.32rem);color:#fff;
  text-shadow:0 1px 22px rgba(4,14,20,.6)}
.gh .pcredit{position:absolute;right:var(--gutter);bottom:12px;z-index:4}
.gh--hz .gh__base img{object-position:center 40%}
@media(max-width:700px){
  .gh{min-height:78svh}
  .gh__title{top:calc(var(--head-h) + 2vh);bottom:44%}
  .gh--hz .gh__title,.gh--depth .gh__title{bottom:calc(100% - var(--hz,52%) + 2%)}
  .gh__title h1{font-size:clamp(2.1rem,9.5vw,3.2rem);max-width:14ch}
  .gh__sub{font-size:1rem}
}

/* ---- chunked editorial: subsequent chunks sit tighter ---- */
.article--cont{padding-top:clamp(28px,4vw,64px)}
@media(max-width:1020px){.article--cont .rail .rail-card:first-child{display:none}.article--cont .rail .rail-card{margin-top:0 !important}}
.lf-prose>*+*{margin-top:1.15em}
.lf-prose h2{margin-top:2em}
.lf-prose h2:first-child{margin-top:0}
.lf-prose h3{font-size:1.2rem;letter-spacing:-.005em}
.lf-prose .lede{font-size:clamp(1.18rem,1.1vw + .95rem,1.55rem);line-height:1.45;color:var(--tx);
  font-family:var(--serif);font-weight:400}
.lf-prose ul,.lf-prose ol{padding-left:1.25em}
.lf-prose li::marker{color:var(--cerulean)}

/* ---- figures ---- */
.lf-fig{margin:2.2em 0;background:var(--ink2);position:relative}
.lf-fig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.lf-fig figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 0 0;font-size:.86rem;line-height:1.45;color:var(--tx-soft);background:var(--paper)}
.lf-fig figcaption span:first-child{max-width:52ch}
.lf-fig figcaption .pcredit{color:var(--tx-dim);font-size:.66rem;align-self:flex-end;
  letter-spacing:.04em}
.lf-fig figcaption a.pcredit:hover{color:var(--cerulean)}
.lf-fig--villa img{aspect-ratio:16/10}
.pband--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.pband--2{grid-template-columns:1fr}}

/* ---- fact tiles (count-ups) ---- */
.lf-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);margin:2.2em 0}
.lf-fact{background:var(--cream);padding:clamp(18px,2vw,28px) clamp(16px,1.6vw,24px)}
.lf-fact b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,2.4vw,2.5rem);
  line-height:1;color:var(--sea);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lf-fact span{display:block;margin-top:8px;font-family:var(--sans);font-weight:600;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tx-dim)}

/* ---- tip callout ---- */
.lf-tip{margin:2.2em 0;padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,32px);
  background:var(--sand);border-left:3px solid var(--cerulean)}
.lf-tip__k{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cerulean);margin-bottom:10px}
.lf-tip p{color:var(--tx);font-size:1rem;line-height:1.55}

/* ---- pull quote ---- */
.lf-quote{margin:2.4em 0;padding:0 0 0 clamp(20px,2.4vw,32px);border-left:2px solid var(--turq)}
.lf-quote p{font-family:var(--serif);font-size:clamp(1.4rem,1.6vw + .8rem,2rem);line-height:1.3;
  color:var(--tx);letter-spacing:-.01em}
.lf-quote cite{display:block;margin-top:12px;font-style:normal;font-family:var(--sans);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-dim);font-weight:600}

/* ---- data table ---- */
.lf-table{margin:2.2em 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-top:1px solid var(--tx);border-bottom:1px solid var(--hair)}
.lf-table table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.lf-table table.cols-4{font-size:.88rem}
.lf-table table.cols-5,.lf-table table.cols-6{font-size:.8rem;min-width:600px}
.lf-table table.cols-5 th,.lf-table table.cols-5 td,.lf-table table.cols-6 th,.lf-table table.cols-6 td{padding:9px 9px}
.lf-table table.cols-5 thead th,.lf-table table.cols-6 thead th{font-size:.62rem;letter-spacing:.14em}
.lf-table th,.lf-table td{text-align:left;padding:12px 14px;vertical-align:top;
  border-bottom:1px solid var(--hair);color:var(--tx-soft)}
.lf-table thead th{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tx);background:var(--cream)}
.lf-table tbody th{font-weight:600;color:var(--tx);white-space:nowrap}
.lf-table tbody tr:nth-child(even) td,.lf-table tbody tr:nth-child(even) th{background:rgba(11,28,36,.025)}

/* ---- timeline ---- */
.lf-tl{list-style:none;padding:0;margin:2.2em 0;border-left:2px solid var(--hair);}
.lf-tl li{position:relative;padding:0 0 22px 28px;display:grid;gap:4px}
.lf-tl li::before{content:"";position:absolute;left:-7px;top:.45em;width:12px;height:12px;
  border-radius:50%;background:var(--cerulean);box-shadow:0 0 0 4px var(--paper)}
.lf-tl li:last-child{padding-bottom:0}
.lf-tl b{font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--sea);line-height:1}
.lf-tl span{color:var(--tx-soft);font-size:.98rem;line-height:1.5}

/* ---- steps ---- */
.lf-steps{margin:2.2em 0;padding:clamp(20px,2.4vw,30px);background:var(--cream);border:1px solid var(--hair)}
.lf-steps h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;margin:0 0 14px}
.lf-steps ol{list-style:none;padding:0;counter-reset:st;display:grid;gap:12px}
.lf-steps li{counter-increment:st;position:relative;padding-left:44px;color:var(--tx-soft);line-height:1.5}
.lf-steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.14em;color:var(--cerulean)}

/* ---- island locator ---- */
.lf-map{margin:2.2em 0;background:var(--ink);padding:clamp(14px,1.8vw,24px);border-radius:3px}
.lf-map svg{width:100%;height:auto;display:block}
.lf-map .m-isl{fill:#0b3b43;stroke:#3ad2e0;stroke-width:1.6;stroke-linejoin:round}
.lf-map .m-town{fill:#3ad2e0;opacity:.9}
.lf-map .m-lbl{fill:rgba(244,241,232,.82);font-family:var(--sans);font-size:19px;
  font-weight:500;letter-spacing:.02em}
.lf-map .m-lbl--v{fill:#fff;font-weight:600}
.lf-map .m-lbl--p{fill:#ff8b7c;font-weight:600;font-size:21px}
.lf-map .m-villa{fill:#fff;stroke:#06282e;stroke-width:2}
.lf-map .m-pin{fill:#ff6f5e}
.lf-map .m-pin-ring{fill:none;stroke:#ff6f5e;stroke-width:2;opacity:.6}
html.m-full .lf-map .m-pin-ring{animation:pinring 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pinring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.lf-map figcaption{margin-top:10px;font-size:.72rem;letter-spacing:.04em;color:rgba(244,241,232,.6)}

/* ---- FAQ ---- */
.lf-faq{margin-top:2.6em;border-top:1px solid var(--tx)}
.lf-faq h2{margin:1.2em 0 .6em !important}
.lf-faq__i{border-bottom:1px solid var(--hair)}
.lf-faq__i summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.15rem,1.2vw + .7rem,1.45rem);line-height:1.3;color:var(--tx)}
.lf-faq__i summary::-webkit-details-marker{display:none}
.lf-faq__i summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:1.5rem;color:var(--cerulean);transition:transform .35s var(--ease)}
.lf-faq__i[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.lf-faq__i summary:hover{color:var(--cerulean)}
.lf-faq__a{padding:0 0 20px;max-width:60ch}
.lf-faq__a p{color:var(--tx-soft)}

/* ---- sources ---- */
.lf-sources{margin-top:2.6em;padding-top:1.4em;border-top:1px solid var(--hair)}
.lf-sources h2{font-size:1.4rem !important;margin:0 0 .5em !important}
.lf-sources p{font-size:.92rem;color:var(--tx-dim)}
.lf-sources ol{margin-top:14px;padding-left:1.4em;font-size:.9rem;display:grid;gap:6px}
.lf-sources a{color:var(--cerulean);text-decoration:underline;text-underline-offset:3px;word-break:break-word}

/* ---- Cavmir credit band ---- */
.cavband{display:flex;align-items:center;justify-content:center;gap:18px 26px;flex-wrap:wrap;
  margin:clamp(40px,5vw,72px) var(--gutter) 22px;padding:22px clamp(16px,2vw,32px);
  border:1px solid var(--hair-d);border-radius:3px;color:var(--on-dark-soft);
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.cavband:hover{border-color:var(--turq);background:rgba(87,193,209,.06)}
.cavband__k{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--turq)}
.cavband__mk{width:clamp(130px,14vw,190px);height:auto;display:block;opacity:.96}
.cavband__t{font-size:.86rem;letter-spacing:.02em;color:var(--on-dark-soft)}
.cavband .arr{display:inline-block;transition:transform .4s var(--ease)}
.cavband:hover .arr{transform:translateX(4px)}
@media(max-width:600px){.cavband{flex-direction:column;gap:12px;text-align:center}}

/* ============================================================================
   RESTAURANT DIRECTORY — image card grid (the full island dining list)
   ============================================================================ */
.rest-jump{position:sticky;top:var(--head-h);z-index:20;display:flex;flex-wrap:wrap;
  gap:8px;padding:14px var(--gutter);background:rgba(251,248,241,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.rest-jump a{font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.04em;
  color:var(--tx-soft);padding:.5em .9em;border:1px solid var(--hair);border-radius:999px;
  transition:.3s var(--ease);white-space:nowrap}
.rest-jump a:hover{color:#fff;background:var(--cerulean);border-color:var(--cerulean)}
.rest-jump a b{font-weight:700;color:var(--cerulean);margin-left:.35em}
.rest-jump a:hover b{color:#fff}

.rest-region{padding-block:clamp(34px,4.4vw,66px);scroll-margin-top:calc(var(--head-h) + 60px)}
.rest-region:nth-of-type(even){background:var(--cream)}
.rest-region__h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid var(--hair)}
.rest-region__h .eyebrow{font-size:.82rem}
.rest-region__n{font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;color:var(--tx-dim)}

.rgrid{display:grid;gap:clamp(16px,1.6vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(238px,25vw,300px),1fr))}

.rcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--hair);
  border-radius:12px;overflow:hidden;transition:transform .4s var(--ease),
  box-shadow .4s var(--ease),border-color .4s var(--ease)}
.rcard:hover{transform:translateY(-5px);border-color:transparent;
  box-shadow:0 22px 46px -24px rgba(8,23,31,.55)}
.rcard__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--ink2)}
.rcard__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease)}
.rcard:hover .rcard__media img{transform:scale(1.07)}

/* branded nameplate for venues without a usable photo */
.rcard__plate{display:grid;place-items:center;
  background:linear-gradient(140deg,var(--sea),var(--cerulean) 62%,var(--cerulean-hi))}
.rcard__plate::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(120% 90% at 82% 12%,rgba(255,255,255,.22),transparent 60%)}
.rcard__mono{font-family:var(--serif);font-size:clamp(2.6rem,4vw,3.4rem);font-weight:400;
  color:rgba(255,255,255,.94);line-height:1;position:relative}
.rcard__plate-tag{position:absolute;bottom:12px;font-family:var(--sans);font-weight:600;
  font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.72)}

.rcard__body{display:flex;flex-direction:column;gap:9px;flex:1;padding:15px 17px 18px}
.rcard__body h3{font-size:1.16rem;line-height:1.12;color:var(--tx)}
.rcard__chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.36em .62em;border-radius:999px;
  background:var(--shell);color:var(--tx-soft);white-space:nowrap}
.rcard__note{font-size:.88rem;line-height:1.45;color:var(--tx-soft)}
.rcard__link{margin-top:auto;padding-top:4px;font-family:var(--sans);font-weight:600;
  font-size:.76rem;letter-spacing:.05em;color:var(--cerulean);
  display:inline-flex;align-items:center;gap:.4em;transition:color .3s var(--ease)}
.rcard__link span{transition:transform .3s var(--ease)}
.rcard:hover .rcard__link{color:var(--sea)}
.rcard:hover .rcard__link span{transform:translate(2px,-2px)}
.rcard__maps{margin-top:8px;font-family:var(--sans);font-weight:600;font-size:.72rem;
  letter-spacing:.03em;color:var(--sea);display:inline-flex;align-items:center;gap:.35em;
  text-decoration:underline;text-underline-offset:3px;transition:color .3s var(--ease)}
.rcard__maps span{transition:transform .3s var(--ease)}
.rcard__maps:hover{color:var(--cerulean)}
.rcard__maps:hover span{transform:translate(2px,-2px)}
@media(max-width:520px){.rest-region__h{flex-direction:column;gap:4px;align-items:flex-start}}

/* directory entry cards: location line + on-image photo credit + static (non-link) */
.rcard__area{font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sea)}
.rcard--static{cursor:default}
.rcard--static:hover{transform:none;border-color:var(--hair);
  box-shadow:0 10px 26px -20px rgba(8,23,31,.4)}
.rcard__cred{position:absolute;left:0;right:0;bottom:0;padding:16px 10px 5px;
  font-size:.58rem;line-height:1.2;color:rgba(255,255,255,.82);
  background:linear-gradient(to top,rgba(6,20,27,.72),transparent);
  opacity:0;transition:opacity .3s var(--ease)}
.rcard:hover .rcard__cred{opacity:1}
.rcard__cred .pcredit{color:rgba(255,255,255,.82);text-decoration:none}

/* ============================================================================
   RFIND — the big, on-brand search band that opens the dining + directory
   pages (replaces the small filter bar). Dark teal, glassy pill input, region
   pills. Shares the [data-dfilter] hooks so dir-search.js drives it unchanged.
   ============================================================================ */
.rfind{position:relative;overflow:hidden;background:var(--ink);color:var(--on-dark);
  padding-block:clamp(38px,5.2vw,84px)}
.rfind::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 130% at 12% -18%,rgba(21,174,194,.32),transparent 56%),
    radial-gradient(96% 96% at 94% 128%,rgba(255,111,94,.15),transparent 60%)}
.rfind__in{position:relative;z-index:1;max-width:930px}
.rfind__h{font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.02;color:var(--paper);
  margin:16px 0 12px}
.rfind__sub{max-width:58ch;color:var(--on-dark-soft);
  font-size:clamp(1.02rem,1.1vw + .8rem,1.24rem);line-height:1.5;
  margin-bottom:clamp(24px,3vw,36px)}
.rfind__box{position:relative}
.rfind__bar{position:relative;display:flex;align-items:center;max-width:760px}
.rfind__bar input{width:100%;font-family:var(--sans);font-weight:500;
  font-size:clamp(1.08rem,1.3vw + .5rem,1.34rem);
  padding:1.15em 3.3em 1.15em 3.5em;border:2px solid rgba(244,241,232,.5);
  border-radius:100px;background:rgba(253,250,244,.98);color:var(--tx);
  box-shadow:0 30px 66px -30px rgba(6,18,25,.85);transition:border-color .3s,box-shadow .3s}
.rfind__bar input::placeholder{color:var(--tx-dim);font-weight:400}
.rfind__bar input:focus{outline:none;border-color:var(--cerulean-hi);
  box-shadow:0 30px 72px -26px rgba(21,174,194,.7),0 0 0 4px rgba(21,174,194,.22)}
.rfind__ico{position:absolute;left:1.3em;top:50%;transform:translateY(-50%);
  width:26px;height:26px;color:var(--cerulean);pointer-events:none}
.rfind__clear{position:absolute;right:1.05em;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;display:none;place-items:center;
  color:var(--tx-dim);font-size:1.35rem;line-height:1;transition:.25s var(--ease)}
.rfind__clear.on{display:grid}
.rfind__clear:hover{color:var(--tx);background:var(--hair)}
.rfind__count{margin-top:16px;min-height:1.1em;font-family:var(--sans);font-weight:700;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--turq)}
.rfind__none{display:none;margin-top:4px;color:var(--on-dark-soft);font-size:1rem}
.rfind__none.on{display:block}
.rfind__regions{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(22px,2.8vw,32px)}
.rfind__lbl{width:100%;font-family:var(--sans);font-weight:600;font-size:.66rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-soft);margin-bottom:5px}
.rfind__regions a{font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.02em;
  color:var(--on-dark);padding:.56em 1.05em;border:1px solid var(--hair-d);border-radius:999px;
  background:rgba(244,241,232,.055);transition:.3s var(--ease);white-space:nowrap}
.rfind__regions a:hover{color:var(--ink);background:var(--turq);border-color:var(--turq)}
.rfind__regions a b{font-weight:800;color:var(--turq);margin-left:.42em}
.rfind__regions a:hover b{color:var(--ink)}

/* ---- GK: the "Good to know / More of the island" info band, relocated from a
   cramped top sidebar to a calm full-width closer near the foot of the page ---- */
.gk{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
@media(max-width:760px){.gk{grid-template-columns:1fr;gap:38px}}
.gk__col>.eyebrow{display:block;margin-bottom:20px;padding-bottom:14px;
  border-bottom:1px solid var(--hair)}
.gk__tips{list-style:none;display:flex;flex-direction:column;gap:17px}
.gk__tips li{display:flex;flex-direction:column;gap:4px}
.gk__tips b{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cerulean)}
.gk__tips span{color:var(--tx-soft);font-size:.98rem;line-height:1.5}
.gk__links{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px 26px}
@media(max-width:520px){.gk__links{grid-template-columns:1fr}}
.gk__links a{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--hair);color:var(--tx);
  font-family:var(--sans);font-weight:600;font-size:.98rem;transition:color .25s var(--ease)}
.gk__links a::after{content:"\2192";color:var(--cerulean);opacity:.45;transition:.25s var(--ease)}
.gk__links a:hover{color:var(--cerulean)}
.gk__links a:hover::after{transform:translateX(4px);opacity:1}
.gk__links a.gk__all{grid-column:1/-1;color:var(--cerulean);font-weight:700}

/* ============================================================================
   THE ST. CROIX DIRECTORY v2 — searchable, image-forward hub
   ============================================================================ */
/* --- hero search --- */
.dir-hero{min-height:72svh;align-items:center;text-align:center}
.dir-hero .post-hero__in{max-width:880px;margin-inline:auto;
  padding-bottom:clamp(28px,4vw,52px)}
.dir-hero .post-meta{justify-content:center}
.dir-hero h1{max-width:none;margin-inline:auto}
.dir-hero__sub{max-width:52ch;margin:16px auto 30px;color:var(--on-dark-soft);
  font-size:clamp(1.02rem,1.1vw + .8rem,1.24rem);line-height:1.5}
.dir-hero .dsearch{margin-inline:auto}
.dir-hero .dsearch__hint{justify-content:center}
.dsearch{position:relative;max-width:700px}
.dsearch input{width:100%;font-family:var(--sans);font-weight:500;font-size:clamp(1.08rem,1.5vw,1.24rem);
  padding:1.3em 3em 1.3em 3.35em;border:2px solid rgba(244,241,232,.5);border-radius:100px;
  background:rgba(253,250,244,.98);color:var(--tx);
  box-shadow:0 26px 60px -30px rgba(6,18,25,.8);transition:border-color .3s,box-shadow .3s}
.dsearch input::placeholder{color:var(--tx-dim);font-weight:400}
.dsearch input:focus{outline:none;border-color:var(--cerulean-hi);
  box-shadow:0 26px 66px -26px rgba(21,174,194,.7),0 0 0 4px rgba(21,174,194,.2)}
.dsearch__ico{position:absolute;left:1.25em;top:50%;transform:translateY(-50%);
  width:24px;height:24px;color:var(--cerulean);pointer-events:none}
.dsearch__clear{position:absolute;right:.8em;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;display:none;place-items:center;
  color:var(--tx-dim);font-size:1.1rem;line-height:1}
.dsearch__clear.on{display:grid}
.dsearch__clear:hover{color:var(--tx);background:var(--hair)}
.dsearch__hint{margin-top:16px;font-size:.82rem;color:var(--on-dark-soft);
  display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dsearch__hint b{color:var(--turq);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:.7rem}
.dchip{border:1px solid rgba(244,241,232,.4);border-radius:100px;padding:.3em .9em;
  font-size:.8rem;color:var(--on-dark);transition:.3s var(--ease)}
.dchip:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* --- live results --- */
.dresults{display:none}
.dresults.on{display:block}
.dres-head{font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tx-dim);margin-bottom:20px}
.dres-head b{color:var(--cerulean)}
.dres-list{border-top:1px solid var(--hair)}
.dres{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:18px 6px;border-bottom:1px solid var(--hair);transition:background .25s;width:100%}
.dres:hover{background:var(--cream)}
.dres__no{font-size:.72rem;letter-spacing:.16em;color:var(--cerulean);font-weight:600}
.dres h3{font-family:var(--serif);font-weight:400;line-height:1.12;
  font-size:clamp(1.15rem,1.7vw,1.5rem)}
.dres .m{margin-top:5px;font-size:.85rem;color:var(--tx-soft)}
.dres .tag{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cerulean);font-weight:600;white-space:nowrap;align-self:center}
.dnores{padding:44px 6px;color:var(--tx-soft);font-size:1.05rem}
.dnores b{color:var(--tx)}

/* --- category image grid --- */
.dcat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(13px,1.5vw,22px)}
.dcat{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:4px;background:var(--ink2);min-height:330px;isolation:isolate}
.dcat__img{position:absolute;inset:0;z-index:0}
.dcat__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.dcat::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,23,31,.06) 0%,rgba(8,23,31,.48) 52%,rgba(8,23,31,.92) 100%)}
.dcat:hover .dcat__img img{transform:scale(1.06)}
.dcat__b{position:relative;z-index:2;margin-top:auto;padding:26px 22px 22px;color:var(--on-dark)}
.dcat__count{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--turq);font-weight:600}
.dcat__b h3{color:var(--paper);font-size:clamp(1.4rem,2vw,1.72rem);margin:9px 0 9px;
  line-height:1.05}
.dcat__b p{color:var(--on-dark-soft);font-size:.9rem;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dcat__arr{position:absolute;z-index:2;top:20px;right:20px;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--hair-d);display:grid;place-items:center;
  color:var(--paper);font-size:1.2rem;background:rgba(8,23,31,.3);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:.4s var(--ease)}
.dcat:hover .dcat__arr{background:var(--cerulean);border-color:var(--cerulean);transform:translateY(-2px)}
.dcat[hidden]{display:none}

/* --- per-category entry filter --- */
.dfilter-wrap{padding-top:clamp(30px,4vw,56px)}
.dfilter{position:relative;max-width:520px}
.dfilter input{width:100%;padding:.9em 1em .9em 2.9em;border:1px solid var(--hair);
  border-radius:100px;background:var(--paper);font-family:var(--sans);font-size:.96rem;color:var(--tx)}
.dfilter input:focus{outline:none;border-color:var(--cerulean);
  box-shadow:0 0 0 4px rgba(10,124,140,.12)}
.dfilter__ico{position:absolute;left:1em;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--cerulean);pointer-events:none}
.dfilter__c{margin-top:12px;font-size:.8rem;letter-spacing:.06em;color:var(--tx-dim)}
.dirrow[hidden]{display:none}
.dfilter__none{display:none;padding:26px 0;color:var(--tx-soft);font-size:1.05rem}
.dfilter__none.on{display:block}

@media(max-width:640px){
  .dcat-grid{grid-template-columns:1fr}
  .dcat{min-height:290px}
  .dres{grid-template-columns:auto 1fr;gap:12px}
  .dres .tag{grid-column:2;justify-self:start;margin-top:2px}
}

/* ============================================================================
   ST. CROIX MAP — vector island, turquoise brand overlay, linked pins
   ============================================================================ */
.stx-map{position:relative;background:var(--ink);color:var(--on-dark);
  padding:clamp(48px,6vw,96px) var(--gutter);overflow:hidden}
.stx-map::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 80% at 50% 42%,rgba(87,193,209,.22),transparent 70%),
    radial-gradient(40% 60% at 82% 30%,rgba(26,126,160,.28),transparent 72%),
    linear-gradient(180deg,#06222b 0%,#08171f 100%)}
.stx-map__head{position:relative;z-index:2;max-width:640px;margin:0 auto clamp(26px,3vw,44px);
  text-align:center}
.stx-map__head .eyebrow{color:var(--turq)}
.stx-map__head h2{color:var(--paper);font-size:clamp(1.9rem,3.4vw,3rem);margin:14px 0 12px}
.stx-map__head p{color:var(--on-dark-soft);max-width:52ch;margin:0 auto;font-size:1.02rem}
.stx-map__stage{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto}
.stx-map__svg{display:block;width:100%;height:auto;overflow:visible}
.stx-isle{filter:drop-shadow(0 24px 44px rgba(4,14,20,.6))}

/* pins overlaid as crisp HTML (scale-independent, accessible links) */
.stx-map__pins{position:absolute;inset:0;z-index:3}
.mpin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;
  gap:9px;white-space:nowrap;color:var(--on-dark);transition:.35s var(--ease)}
.mpin__dot{position:relative;width:14px;height:14px;border-radius:50%;flex:none;
  background:var(--turq);box-shadow:0 0 0 4px rgba(87,193,209,.24),0 2px 8px rgba(0,0,0,.4);
  transition:.35s var(--ease)}
.mpin__lbl{font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.02em;
  text-shadow:0 1px 10px rgba(4,14,20,.85);transition:.35s var(--ease)}
.mpin:hover{z-index:5}
.mpin:hover .mpin__dot{background:var(--paper);transform:scale(1.18);
  box-shadow:0 0 0 6px rgba(87,193,209,.34),0 2px 10px rgba(0,0,0,.5)}
.mpin:hover .mpin__lbl{color:#fff}
/* label placement by side */
.mpin--left{flex-direction:row-reverse}
.mpin--left,.mpin--right{transform:translate(-50%,-50%)}
.mpin--top{flex-direction:column-reverse;gap:5px;align-items:center}
.mpin--top .mpin__lbl{text-align:center}
/* the villa — the anchor marker */
.mpin--home .mpin__dot{width:20px;height:20px;background:var(--cerulean-hi);
  box-shadow:0 0 0 5px rgba(47,166,198,.3),0 0 22px rgba(47,166,198,.7)}
.mpin--home .mpin__dot::after{content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1.5px solid rgba(87,193,209,.6);animation:mpulse 2.8s var(--ease) infinite}
.mpin--home .mpin__lbl{font-family:var(--serif);font-weight:400;font-size:1.02rem;
  color:#fff;letter-spacing:0}
@keyframes mpulse{0%{transform:scale(.7);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
html.m-calm .mpin--home .mpin__dot::after{animation:none}

.stx-map__cap{position:relative;z-index:2;text-align:center;margin-top:clamp(20px,2.4vw,34px);
  font-size:.76rem;color:var(--on-dark-soft);opacity:.72}
.stx-map__cap a{color:var(--turq);text-decoration:underline;text-underline-offset:2px}

@media(max-width:720px){
  .mpin__lbl{font-size:.68rem}
  .mpin--home .mpin__lbl{font-size:.82rem}
  .mpin__dot{width:11px;height:11px}
  .mpin--home .mpin__dot{width:16px;height:16px}
}

/* ============================================================================
   FLIGHT ROUTE MAP (home) — airline-magazine map of the US + Caribbean.
   HTML pins over an inline SVG; airlines highlight via :has(); motion gated
   by html.m-full. Airline highlight rules are generated by routemap.has_rules()
   and injected inline on the home page.
   ============================================================================ */
.rmap{position:relative;background:var(--ink);color:var(--on-dark);
  padding:clamp(64px,8vw,150px) var(--gutter);overflow:hidden}
.rmap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 40% at 82% 82%,rgba(255,111,94,.24),transparent 62%),
    radial-gradient(70% 62% at 20% 6%,rgba(21,174,194,.15),transparent 70%),
    radial-gradient(130% 120% at 50% 128%,rgba(4,17,23,0),rgba(3,14,19,.55) 100%),
    linear-gradient(176deg,#082a34 0%,#061d25 56%,#04141b 100%)}
.rmap>*{position:relative;z-index:1}

.rmap__head{max-width:940px;margin:0 auto clamp(28px,3vw,44px);text-align:center}
.rmap__no{font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--turq);margin-bottom:14px}
.rmap__head h2{color:var(--paper);font-size:clamp(2rem,4.2vw,3.7rem);line-height:1.02;
  margin:0 auto 16px;max-width:20ch}
.rmap__lead{color:var(--on-dark-soft);max-width:62ch;margin:0 auto;font-size:1.03rem;line-height:1.62}

/* airline logo strip */
.rmap__air{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:11px 13px;max-width:1120px;margin:0 auto clamp(30px,3.4vw,50px)}
.rmap__air-k{font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark-soft);margin-right:6px}
.ral{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border-radius:999px;
  background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.5);
  box-shadow:0 8px 22px rgba(0,0,0,.30);cursor:default;transition:.3s var(--ease)}
.ral:hover,.ral:focus-visible{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.42);outline:none}
.ral__mk{display:inline-flex;width:26px;justify-content:center;align-items:center}
.ral__g{height:22px;width:auto;display:block}
.ral__g--wide{height:14px}
.ral__n{font-family:var(--sans);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;white-space:nowrap}
.ral__b6{color:#0a6aa8}

/* two-column: map + detail rail */
.rmap__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);
  gap:clamp(22px,3vw,46px);max-width:1300px;margin:0 auto;align-items:start}

.rmap__stage{position:relative;width:100%}
.rmap__svg{display:block;width:100%;height:auto;overflow:visible}
.rmap__coast{stroke:rgba(58,210,224,.30);stroke-width:2.2;stroke-linejoin:round;
  filter:blur(5px);opacity:.6}
.rmap__land{fill:url(#rm-land);stroke:rgba(122,210,222,.40);stroke-width:.9;stroke-linejoin:round;
  filter:drop-shadow(0 18px 34px rgba(2,10,15,.6))}

.rmap__routes{fill:none}
.rt{fill:none;stroke-linecap:round;transition:opacity .3s var(--ease)}
.rt--us{stroke:var(--coral)}
.rt--isl{stroke:var(--turq)}
.rt--year{stroke-width:2.4}
.rt--seas{stroke-width:2.4;stroke-dasharray:1 13}
.rt-glow{fill:none;stroke-width:7;opacity:.11;filter:blur(5px);stroke-linecap:round;
  transition:opacity .3s var(--ease)}
.rt-glow.rt--us{stroke:var(--coral)}
.rt-glow.rt--isl{stroke:var(--turq)}
.rt-fly{fill:#fff;filter:drop-shadow(0 0 5px var(--coral));transition:opacity .3s var(--ease)}
html.m-calm .rmap__flights{display:none}
@media(prefers-reduced-motion:reduce){.rmap__flights{display:none}}

.rn-isl{fill:var(--turq);stroke:#08171f;stroke-width:1.6;transition:opacity .3s var(--ease)}
.rn-isl--seas{fill:#0b323b;stroke:var(--turq);stroke-width:2}
.rn-lbl{fill:rgba(244,241,232,.92);font-family:var(--sans);font-weight:600;font-size:19px;
  letter-spacing:.01em;paint-order:stroke;stroke:#08171f;stroke-width:3.4px;stroke-linejoin:round}
.rmap__halo{fill:url(#rm-hub)}

/* pins (crisp HTML over the svg) */
.rmap__pins{position:absolute;inset:0;z-index:4}
.rpin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;
  white-space:nowrap;transition:opacity .3s var(--ease);cursor:default}
.rpin__dot{position:relative;width:13px;height:13px;border-radius:50%;flex:none;background:var(--coral);
  box-shadow:0 0 0 4px rgba(255,111,94,.22),0 2px 8px rgba(0,0,0,.5)}
.rpin__dot--seas{background:#0a2b33;border:2px solid var(--coral);
  box-shadow:0 0 0 4px rgba(255,111,94,.14),0 2px 8px rgba(0,0,0,.5)}
.rpin__lbl{display:flex;flex-direction:column;line-height:1.06;font-family:var(--sans);font-weight:700;
  font-size:.82rem;letter-spacing:.01em;color:var(--on-dark);text-shadow:0 1px 10px rgba(4,14,20,.92)}
.rpin__lbl b{font-weight:600;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--turq);opacity:.92;margin-top:2px}
.rpin--left{flex-direction:row-reverse}
.rpin--left .rpin__lbl{text-align:right;align-items:flex-end}
.rpin--right .rpin__lbl{align-items:flex-start}
.rpin--top{flex-direction:column-reverse;gap:6px}
.rpin--top .rpin__lbl{text-align:center;align-items:center}
.rpin:hover,.rpin:focus-within{z-index:12;outline:none}
.rpin:hover .rpin__dot,.rpin:focus-within .rpin__dot{transform:scale(1.22)}
/* the hub — a coral beacon with a static hairline ring + one slow, soft pulse */
.rpin--home .rpin__dot--home{width:18px;height:18px;background:var(--coral);
  box-shadow:0 0 0 5px rgba(255,111,94,.20),0 0 22px rgba(255,111,94,.6)}
.rpin--home .rpin__dot--home::before{content:"";position:absolute;inset:-8px;border-radius:50%;
  border:1px solid rgba(255,139,124,.5)}
.rpin--home .rpin__dot--home::after{content:"";position:absolute;inset:-8px;border-radius:50%;
  border:1.4px solid rgba(255,139,124,.6);animation:rpulse 3.6s var(--ease) infinite}
html.m-calm .rpin--home .rpin__dot--home::after{animation:none}
@keyframes rpulse{0%{transform:scale(.72);opacity:.7}70%{transform:scale(1.9);opacity:0}100%{opacity:0}}
.rpin__lbl--home{font-size:1.02rem}
.rpin__lbl--home b{color:var(--coral-hi);opacity:1}

/* pin popovers */
.rpin__pop{position:absolute;left:50%;transform:translateX(-50%) translateY(6px);width:236px;
  background:rgba(8,28,33,.97);border:1px solid rgba(122,196,206,.28);border-radius:13px;
  padding:13px 14px;box-shadow:0 22px 48px rgba(0,0,0,.55);opacity:0;visibility:hidden;
  pointer-events:none;transition:.24s var(--ease);z-index:15}
.rpin--down .rpin__pop{top:calc(100% + 12px)}
.rpin--up .rpin__pop{bottom:calc(100% + 12px);transform:translateX(-50%) translateY(-6px)}
.rpin:hover .rpin__pop,.rpin:focus-within .rpin__pop{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0)}
.rpop__row+.rpop__row{margin-top:11px;padding-top:11px;border-top:1px solid rgba(122,196,206,.18)}
.rpop__city{font-family:var(--sans);font-weight:800;font-size:.94rem;color:var(--paper);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rpop__city b{font-weight:600;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--turq)}
.rpop__year,.rpop__seas{font-family:var(--sans);font-weight:700;font-size:.56rem;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px}
.rpop__year{background:rgba(58,210,224,.16);color:var(--turq)}
.rpop__seas{background:rgba(255,111,94,.16);color:var(--coral-hi)}
.rpop__air-wrap{display:flex;flex-wrap:wrap;gap:7px 12px;margin:9px 0 6px}
.rpop__air{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:700;font-size:.84rem;color:var(--paper)}
.rpop__g{display:inline-flex;width:20px;justify-content:center}
.rpop__g svg{height:15px;width:auto}
.rpop__meta{font-size:.78rem;color:var(--on-dark-soft)}

/* legend */
.rmap__legend{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:22px;
  font-family:var(--sans);font-size:.76rem;color:var(--on-dark-soft)}
.rlg{display:inline-flex;align-items:center;gap:9px}
.rlg__l{width:30px;height:2.4px;border-radius:2px;display:inline-block}
.rlg__l--year{background:var(--on-dark)}
.rlg__l--seas{height:4px;background:radial-gradient(circle,var(--on-dark) 40%,transparent 42%) 0 50%/8px 4px repeat-x}
.rlg__sw{width:12px;height:12px;border-radius:50%;display:inline-block}
.rlg__sw--us{background:var(--coral)}
.rlg__sw--isl{background:var(--turq)}

/* detail rail */
.rmap__side{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)}
.rside__card{background:rgba(9,32,37,.72);border:1px solid rgba(122,196,206,.2);border-radius:18px;
  padding:clamp(18px,2vw,26px)}
.rside__k{font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--turq);margin-bottom:8px}
.rside__card h3{font-family:var(--serif);font-weight:600;color:var(--paper);
  font-size:clamp(1.3rem,1.8vw,1.7rem);line-height:1.04;margin:0 0 14px}
.rhops__list{list-style:none;margin:0;padding:0}
.rhop{display:flex;align-items:center;gap:12px;padding:12px 6px;border-radius:10px;transition:.25s var(--ease)}
.rhop+.rhop{border-top:1px solid rgba(122,196,206,.14)}
.rhop:hover,.rhop:focus-within{background:rgba(122,196,206,.08)}
.rhop__gs{display:inline-flex;gap:5px;flex:none;width:46px;justify-content:center;align-items:center}
.rhop__g{display:inline-flex}
.rhop__g svg{height:17px;width:auto}
.rhop__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.rhop__city{font-family:var(--sans);font-weight:800;color:var(--paper);font-size:.98rem;
  display:flex;align-items:center;gap:7px}
.rhop__city b{font-weight:600;font-size:.58rem;letter-spacing:.12em;color:var(--turq)}
.rhop__meta{font-size:.8rem;color:var(--on-dark-soft)}
.rhop__badge{flex:none;font-family:var(--sans);font-weight:700;font-size:.56rem;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(58,210,224,.14);color:var(--turq)}
.rhop__badge--seas{background:rgba(255,111,94,.16);color:var(--coral-hi)}
.rhops__note{font-size:.82rem;color:var(--on-dark-soft);margin:14px 0 0;line-height:1.55}

.rseas__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rseas__list li{position:relative;padding-left:18px;font-size:.9rem;line-height:1.5;color:var(--on-dark-soft)}
.rseas__list li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;
  border-radius:50%;background:var(--coral)}
.rseas__list b{color:var(--paper);font-weight:700}
.rseas__list em{font-style:normal;color:var(--turq);font-weight:700}
.rseas__cta{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--sans);
  font-weight:700;color:var(--turq);text-decoration:none;font-size:.94rem}
.rseas__cta .arr{transition:transform .25s var(--ease)}
.rseas__cta:hover .arr{transform:translateX(4px)}

.rmap__foot{max-width:920px;margin:clamp(26px,3vw,42px) auto 0;text-align:center;font-size:.75rem;
  color:var(--on-dark-soft);opacity:.72;line-height:1.6}

@media(max-width:960px){
  .rmap__grid{grid-template-columns:1fr}
  .rmap__side{flex-direction:row;flex-wrap:wrap}
  .rside__card{flex:1 1 320px}
}
@media(max-width:640px){
  .rmap__side{flex-direction:column}
  .rpin__lbl{font-size:.66rem}
  .rpin__lbl b{font-size:.52rem}
  .rpin__dot{width:11px;height:11px}
  .rpin--home .rpin__dot--home{width:17px;height:17px}
  .rn-lbl{font-size:30px}
  .ral__n{font-size:.92rem}
  .rpin__pop{width:210px}
  .rmap__air-k{flex-basis:100%;text-align:center;margin:0 0 4px}
}

/* ---- Matterport 3D tour: contained (not full-bleed) + loading state ---- */
.mp-grid{display:grid;gap:44px;margin:12px auto 0;
  max-width:1120px;padding-inline:var(--gutter)}
.mp__stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;
  overflow:hidden;background:#06282e;box-shadow:0 18px 60px rgba(6,40,46,.28)}
.mp__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* loading layer sits above the (initially blank) iframe until it reports load */
.mp__load{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;
  background:radial-gradient(120% 120% at 50% 40%,#0b3b43,#06282e 70%);
  color:var(--on-dark);transition:opacity .6s var(--ease),visibility .6s}
.mp__stage.is-ready .mp__load{opacity:0;visibility:hidden}
.mp__loadtxt{font-family:var(--sans);font-size:.82rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-soft)}
.mp__spin{width:38px;height:38px;border-radius:50%;
  border:3px solid rgba(244,241,232,.22);border-top-color:var(--turq);
  animation:mpspin 1s linear infinite}
@keyframes mpspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mp__spin{animation-duration:2.4s}}

/* ============================================================================
   EDITORIAL POLISH (v13) — drop cap, pull-quotes, numbered "steps" rail list.
   Warms up the text-heavy pages (About, contact) so a reading column reads as
   designed rather than a bare slab. No new colors — turquoise + coral only.
   ============================================================================ */
.about-story{max-width:46rem}
.about-story.about-story{margin-inline:auto}
.about-story>p.lead::first-letter{float:left;font-family:var(--serif);
  font-size:3.6em;line-height:.76;padding:6px 14px 0 0;color:var(--coral)}
.about-story>p.lead{font-size:clamp(1.12rem,.6vw + 1rem,1.32rem)}

.pullquote{max-width:34rem;margin:clamp(30px,4vw,54px) auto;text-align:center;
  border:none;padding:0}
.pullquote p{font-family:var(--serif);font-weight:400;color:var(--sea);
  font-size:clamp(1.5rem,2.6vw,2.35rem);line-height:1.2}
.pullquote b{color:var(--cerulean);font-weight:400}
.pullquote::before{content:"";display:block;width:56px;height:2px;
  background:var(--coral);margin:0 auto 26px}

/* acknowledgements — a filled 2-column ledger (category label left, thanks right)
   so the page reads as a designed credits page, not a stack of centered slabs */
.ackrow{display:grid;grid-template-columns:minmax(0,var(--railw)) minmax(0,1fr);
  gap:var(--railgap);align-items:start;padding-inline:var(--gutter);
  max-width:1500px;margin-inline:auto}
.ackrow__cat{position:sticky;top:calc(var(--head-h) + 22px);
  display:flex;flex-direction:column;gap:14px}
.ackrow__cat .eyebrow{line-height:1.35}
.ackrow__no{font-family:var(--serif);font-size:2.2rem;color:var(--coral);line-height:1}
.ackrow__items{display:flex;flex-direction:column;gap:clamp(22px,3vw,34px)}
.ackrow__entry{max-width:60ch}
.ackrow__entry h3{font-family:var(--serif);font-size:clamp(1.25rem,1.7vw,1.5rem);
  line-height:1.2;margin-bottom:8px;color:var(--tx)}
.ackrow__entry p{color:var(--tx-soft)}
@media(max-width:820px){
  .ackrow{grid-template-columns:1fr;gap:20px}
  .ackrow__cat{position:static;flex-direction:row;align-items:baseline;gap:14px}
  .ackrow__no{font-size:1.5rem}
}

/* numbered steps in a rail card (contact "what happens next") */
.rail-card ol.steps{list-style:none;counter-reset:st;display:flex;
  flex-direction:column;gap:14px;font-size:.92rem}
.rail-card ol.steps li{counter-increment:st;position:relative;padding-left:34px;
  color:var(--tx-soft);border:none;line-height:1.45}
.rail-card ol.steps li::before{content:counter(st);position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;background:var(--coral);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:.72rem;
  display:flex;align-items:center;justify-content:center}


/* ============================================================================
   MAP EXPLORE  (/map/)  — a brand-drawn, filterable island atlas.
   A deliberately different animal from a slippy real-estate map: a vector
   St. Croix with categorised, linked markers + a live filter menu + a place
   list that hovers in sync. Section rhythm: dark hero -> cream studio -> dark cta.
   ========================================================================== */

/* ---- hero ---------------------------------------------------------------- */
.mpx-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--on-dark);
  padding:clamp(88px,13vh,164px) 0 clamp(46px,6vw,84px)}
.mpx-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 82% -10%,rgba(58,210,224,.20),transparent 60%),
    radial-gradient(80% 70% at 8% 120%,rgba(255,111,94,.14),transparent 60%)}
.mpx-hero .wrap{position:relative;z-index:1;max-width:1080px;margin-inline:auto}
.mpx-hero h1{font-family:var(--serif);font-weight:400;color:var(--paper);
  font-size:clamp(2.6rem,6.4vw,5.1rem);line-height:1.02;margin:.22em 0 .34em;letter-spacing:.01em}
.mpx-hero .lead{max-width:60ch;color:var(--on-dark-soft);font-size:clamp(1.02rem,1.5vw,1.2rem)}

/* ---- studio -------------------------------------------------------------- */
.mpx{--c-beach:#3ad2e0;--c-dining:#ff6f5e;--c-todo:#d94a37;--c-town:#0b3b43;--c-home:var(--coral);
  background:var(--cream);padding:clamp(40px,6vw,92px) 0}
.mpx__wrap{max-width:1520px;margin-inline:auto;padding-inline:var(--gutter)}

/* filter menu (the "nice menu") */
.mpx__menu{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-bottom:clamp(26px,3.4vw,44px)}
.mpx__chip{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:9px 17px;border-radius:999px;border:1.5px solid var(--hair);background:var(--paper);
  color:var(--tx);font-family:var(--sans);font-weight:600;font-size:.92rem;line-height:1;
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease)}
.mpx__chip::before{content:"";width:10px;height:10px;border-radius:50%;flex:none;background:var(--c,transparent)}
.mpx__chip[data-filter="all"]::before{background:
  conic-gradient(var(--c-beach) 0 25%,var(--c-dining) 0 50%,var(--c-todo) 0 75%,var(--c-town) 0)}
.mpx__chip--beach{--c:var(--c-beach)}.mpx__chip--dining{--c:var(--c-dining)}
.mpx__chip--todo{--c:var(--c-todo)}.mpx__chip--town{--c:var(--c-town)}
.mpx__chip:hover{border-color:var(--cerulean);color:var(--cerulean)}
.mpx__n{font-size:.74rem;font-weight:800;color:var(--tx-dim);background:var(--sand);
  border-radius:999px;padding:2px 8px;line-height:1}
.mpx__chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.mpx__chip.is-on:hover{color:#fff}
.mpx__chip.is-on .mpx__n{background:rgba(255,255,255,.20);color:#fff}

/* two-column: sticky map + scrolling place list */
.mpx__grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,30%,410px);
  gap:clamp(26px,3vw,52px);align-items:start}
.mpx__stage-wrap{position:sticky;top:calc(var(--head-h) + 18px);align-self:start}

.mpx__stage{position:relative;border-radius:20px;background:var(--ink);
  padding:clamp(18px,3.2vw,40px);
  box-shadow:0 26px 60px rgba(4,14,20,.28),inset 0 0 0 1px rgba(159,230,239,.12)}
.mpx__stage::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  pointer-events:none;background:
    radial-gradient(70% 120% at 50% 8%,rgba(58,210,224,.16),transparent 62%),
    radial-gradient(60% 100% at 88% 100%,rgba(10,124,140,.20),transparent 60%)}
.mpx__svg{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible}
.mpx-isle{filter:drop-shadow(0 18px 30px rgba(4,14,20,.55))}
.mpx__pins{position:absolute;inset:clamp(18px,3.2vw,40px);z-index:3}

/* markers */
.mpx-pin{position:absolute;transform:translate(-50%,-50%);width:16px;height:16px;z-index:2;
  text-decoration:none;line-height:0}
.mpx-pin__dot{position:relative;display:block;width:14px;height:14px;border-radius:50%;
  background:var(--c,#fff);box-shadow:0 0 0 2px #fff,0 3px 7px rgba(2,12,18,.5);
  transition:transform .18s var(--ease)}
.mpx-pin--beach{--c:var(--c-beach)}.mpx-pin--dining{--c:var(--c-dining)}
.mpx-pin--todo{--c:var(--c-todo)}.mpx-pin--town{--c:var(--c-town)}
.mpx-pin:hover,.mpx-pin.is-hot,.mpx-pin:focus-visible{z-index:7}
.mpx-pin:hover .mpx-pin__dot,.mpx-pin.is-hot .mpx-pin__dot,
.mpx-pin:focus-visible .mpx-pin__dot{transform:scale(1.45)}
.mpx-pin:focus-visible{outline:none}
.mpx-pin:focus-visible .mpx-pin__dot{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--turq),0 3px 7px rgba(2,12,18,.5)}

/* marker label — hover/focus only (the list carries names persistently) */
.mpx-pin__lbl{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translate(-50%,4px);
  background:var(--ink);color:#fff;font-family:var(--sans);font-weight:600;font-size:.72rem;
  letter-spacing:.01em;white-space:nowrap;padding:4px 10px;border-radius:8px;opacity:0;
  pointer-events:none;box-shadow:0 8px 18px rgba(2,12,18,.42);
  transition:opacity .16s var(--ease),transform .16s var(--ease)}
.mpx-pin:hover .mpx-pin__lbl,.mpx-pin.is-hot .mpx-pin__lbl,
.mpx-pin:focus-visible .mpx-pin__lbl{opacity:1;transform:translate(-50%,0)}
.mpx-pin--left .mpx-pin__lbl{left:auto;right:calc(100% + 10px);bottom:50%;transform:translate(4px,50%)}
.mpx-pin--left:hover .mpx-pin__lbl,.mpx-pin--left.is-hot .mpx-pin__lbl,
.mpx-pin--left:focus-visible .mpx-pin__lbl{transform:translate(0,50%)}
.mpx-pin--right .mpx-pin__lbl{left:calc(100% + 10px);right:auto;bottom:50%;transform:translate(-4px,50%)}
.mpx-pin--right:hover .mpx-pin__lbl,.mpx-pin--right.is-hot .mpx-pin__lbl,
.mpx-pin--right:focus-visible .mpx-pin__lbl{transform:translate(0,50%)}

/* the villa — the focal marker, always labelled, gentle pulse */
.mpx-pin--home{z-index:6}
.mpx-pin--home .mpx-pin__dot{width:18px;height:18px;background:#fff;
  box-shadow:0 0 0 3px var(--coral),0 3px 9px rgba(2,12,18,.55)}
.mpx-pin--home .mpx-pin__dot::after{content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid var(--coral);opacity:.7;animation:mpxpulse 2.6s var(--ease) infinite}
.mpx-pin--home .mpx-pin__lbl{opacity:1;transform:translate(-50%,0);background:var(--coral);
  font-family:var(--serif);font-weight:400;font-size:.86rem}
.mpx-pin--home.mpx-pin--left .mpx-pin__lbl{transform:translate(0,50%)}
.mpx-pin--home.mpx-pin--right .mpx-pin__lbl{transform:translate(0,50%)}
@keyframes mpxpulse{0%{transform:scale(.65);opacity:.7}70%{opacity:0}100%{transform:scale(1.75);opacity:0}}
html.m-calm .mpx-pin--home .mpx-pin__dot::after{animation:none}
@media (prefers-reduced-motion:reduce){.mpx-pin--home .mpx-pin__dot::after{animation:none}}

/* legend + caption */
.mpx__legend{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:center;
  margin-top:18px}
.mpx__key{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);
  font-size:.82rem;font-weight:600;color:var(--tx-soft)}
.mpx__ksw{width:12px;height:12px;border-radius:50%;background:var(--c,#fff);
  box-shadow:0 0 0 2px var(--cream),0 1px 3px rgba(0,0,0,.2)}
.mpx__key--beach{--c:var(--c-beach)}.mpx__key--dining{--c:var(--c-dining)}
.mpx__key--todo{--c:var(--c-todo)}.mpx__key--town{--c:var(--c-town)}
.mpx__key--home .mpx__ksw{background:#fff;box-shadow:0 0 0 2px var(--coral)}
.mpx__cap{margin-top:14px;text-align:center;font-size:.78rem;color:var(--tx-dim)}
.mpx__cap a{color:var(--cerulean);text-decoration:underline;text-underline-offset:2px}

/* place list rail */
.mpx__rail{min-width:0}
.mpx__rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:11px;border-bottom:1.5px solid var(--hair);margin-bottom:4px}
.mpx__rail-eyebrow{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;font-size:.72rem;color:var(--cerulean)}
.mpx__rail-count{font-family:var(--sans);font-weight:700;font-size:.9rem;color:var(--tx-soft)}
.mpx__group{margin-top:22px}
.mpx__group[data-cat="beach"]{--c:var(--c-beach)}
.mpx__group[data-cat="dining"]{--c:var(--c-dining)}
.mpx__group[data-cat="todo"]{--c:var(--c-todo)}
.mpx__group[data-cat="town"]{--c:var(--c-town)}
.mpx__group--home{--c:var(--coral);margin-top:16px}
.mpx__gh{display:flex;align-items:center;gap:9px;margin:0 0 4px;padding-bottom:7px;
  border-bottom:1px solid var(--hair);font-family:var(--serif);font-weight:400;
  font-size:1.16rem;color:var(--tx)}
.mpx__gh::before{content:"";width:11px;height:11px;border-radius:50%;flex:none;
  background:var(--c);box-shadow:0 0 0 2px var(--cream)}
.mpx__row{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;
  text-decoration:none;color:var(--tx);transition:background .15s var(--ease),box-shadow .15s var(--ease)}
.mpx__row:hover,.mpx__row.is-hot{background:var(--paper);box-shadow:0 3px 14px rgba(2,12,18,.09)}
.mpx__pip{width:9px;height:9px;border-radius:50%;flex:none;background:var(--c);
  box-shadow:0 0 0 2px var(--cream)}
.mpx__rb{display:flex;flex-direction:column;min-width:0;gap:1px}
.mpx__rb b{font-family:var(--sans);font-weight:700;font-size:.96rem;color:var(--tx);line-height:1.15}
.mpx__rb span{font-size:.82rem;color:var(--tx-soft);line-height:1.25}
.mpx__arr{margin-left:auto;color:var(--cerulean);font-size:1rem;opacity:0;
  transform:translateX(-4px);transition:opacity .15s var(--ease),transform .15s var(--ease)}
.mpx__row:hover .mpx__arr,.mpx__row.is-hot .mpx__arr{opacity:1;transform:none}

/* the villa row — a filled card at the top of the list */
.mpx__row--home{background:var(--ink);margin-bottom:2px}
.mpx__row--home:hover,.mpx__row--home.is-hot{background:var(--ink);box-shadow:0 6px 20px rgba(2,12,18,.22)}
.mpx__row--home .mpx__rb b{color:#fff}
.mpx__row--home .mpx__rb span{color:var(--on-dark-soft)}
.mpx__row--home .mpx__pip{background:var(--coral);box-shadow:0 0 0 2px rgba(255,255,255,.28)}
.mpx__row--home .mpx__arr{color:var(--turq);opacity:1;transform:none}
.mpx__empty{margin-top:20px;color:var(--tx-dim);font-style:normal}

/* hidden-by-filter */
.mpx__pins .mpx-pin[hidden],.mpx__row[hidden],.mpx__group[hidden]{display:none}

/* ---- closing cta --------------------------------------------------------- */
.mpx-cta{position:relative;overflow:hidden;background:var(--ink2);color:var(--on-dark);
  text-align:center;padding:clamp(58px,8vw,116px) 0}
.mpx-cta::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 120% at 50% -20%,rgba(58,210,224,.18),transparent 60%)}
.mpx-cta .wrap{position:relative;z-index:1;max-width:820px;margin-inline:auto}
.mpx-cta h2{font-family:var(--serif);font-weight:400;color:var(--paper);
  font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.05;margin:.2em 0 .3em}
.mpx-cta .lead{max-width:56ch;margin-inline:auto;color:var(--on-dark-soft)}
.mpx-cta__row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}
.mpx-cta__note{margin-top:20px;font-family:var(--sans);font-size:.86rem;
  letter-spacing:.02em;color:var(--on-dark-soft)}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:980px){
  .mpx__grid{grid-template-columns:1fr;gap:30px}
  .mpx__stage-wrap{position:static}
  .mpx__rail{max-width:660px;margin-inline:auto;width:100%}
}
@media (max-width:560px){
  .mpx__chip{font-size:.82rem;padding:8px 13px;gap:7px}
  .mpx__stage{padding:14px 12px}
  .mpx__pins{inset:14px 12px}
  .mpx-pin__lbl{font-size:.66rem}
  .mpx__legend{gap:10px 16px}
}

/* ============================================================================
   DINING MEGA-PANEL — image-forward nav dropdown (replaces the plain list)
   ============================================================================ */
.ndd__card--dine{width:min(780px,94vw);padding:24px 26px 22px}
/* a wide panel on a left-of-centre nav item: anchor its left edge to the item
   and open rightward so it never clips the viewport's left edge. */
.ndd--dine .ndd__panel{left:0;transform:translateX(-26px)}
.ndd--dine:hover .ndd__panel,.ndd--dine:focus-within .ndd__panel{transform:translateX(-26px)}
.ndd__card--dine .ndd__eyebrow{padding:2px 4px 14px}

/* fixed feature column + flexible tiles: an `fr` feature collapses to 0 because
   its content is all absolutely-positioned (zero min-content) while the tile
   column's min-content is large. A fixed track keeps the feature from vanishing. */
.ddine{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px;margin-top:16px}
/* nav links set white-space:nowrap; the panel's prose must wrap normally */
.ddine__feature-b,.ddine__t-b,.ddine__t-h,.ddine__g-b,.ddine__g-h,
.ddine__feature-b h3,.ddine__feature-b p{white-space:normal}

/* feature tile — the 84-venue directory.
   NB scoped under .ndd__card--dine so these anchors out-specify the generic
   `.ndd__card a` rule (display:flex/padding/gap) that styles list-link anchors. */
.ndd__card--dine .ddine__feature{position:relative;display:block;border-radius:16px;
  overflow:hidden;padding:0;min-height:238px;isolation:isolate;
  box-shadow:0 16px 34px -22px rgba(10,50,58,.5)}
.ddine__feature-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform .8s var(--ease)}
.ddine__feature:hover .ddine__feature-img{transform:scale(1.1)}
.ddine__feature-scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(6,40,46,.10) 0%,rgba(6,40,46,.28) 42%,rgba(6,40,46,.86) 100%)}
.ddine__feature-b{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:18px 18px 16px;color:#fff}
.ddine__count{display:inline-block;font-family:var(--sans);font-size:.67rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#fff;background:rgba(255,111,94,.94);
  padding:5px 11px;border-radius:999px;margin-bottom:9px}
.ddine__feature-b h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.05;
  color:#fff;margin:0 0 6px}
.ddine__feature-b p{font-family:var(--sans);font-size:.9rem;line-height:1.4;
  color:rgba(255,255,255,.9);margin:0 0 13px;max-width:34ch}
.ddine__cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);
  font-size:.9rem;font-weight:700;color:#fff}
.ddine__cta span{transition:transform .3s var(--ease)}
.ddine__feature:hover .ddine__cta span{transform:translateX(5px)}

/* category tiles — a single roomy column beside the feature (a 2-col inner grid
   can't shrink below the tiles' min-content and overflows the panel). */
.ddine__grid{display:grid;grid-template-columns:1fr;gap:10px;align-content:start}
.ndd__card--dine .ddine__t{display:flex;align-items:center;gap:12px;padding:9px;
  border-radius:14px;border:1px solid rgba(10,124,140,.16);background:rgba(255,255,255,.5);
  transition:background .28s var(--ease),border-color .28s,transform .28s var(--ease),box-shadow .28s}
.ddine__t:hover{background:#fff;border-color:rgba(10,124,140,.34);transform:translateY(-2px);
  box-shadow:0 12px 24px -16px rgba(10,80,90,.45)}
.ddine__t-img{flex:0 0 auto;width:58px;height:58px;border-radius:11px;overflow:hidden}
.ddine__t-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ddine__t:hover .ddine__t-img img{transform:scale(1.08)}
.ddine__t-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.ddine__t-h{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;
  font-size:.98rem;color:var(--ink);line-height:1.15}
.ddine__tag{flex:0 0 auto;font-size:.65rem;font-weight:700;letter-spacing:.03em;color:var(--cerulean);
  background:rgba(21,174,194,.14);padding:2px 7px;border-radius:999px}
.ddine__t-p{font-family:var(--sans);font-size:.82rem;color:var(--tx-dim);line-height:1.3}

/* guides row — the two food guides, full width */
.ddine__guides{grid-column:1/-1;margin-top:4px;padding-top:14px;
  border-top:1px solid rgba(10,124,140,.14)}
.ddine__guides-lbl{display:block;font-family:var(--sans);font-size:.65rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cerulean);margin-bottom:9px}
.ddine__guides-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ndd__card--dine .ddine__g{display:flex;align-items:center;gap:11px;padding:8px 12px 8px 8px;
  border-radius:12px;background:linear-gradient(120deg,rgba(21,174,194,.09),rgba(10,124,140,.05));
  border:1px solid rgba(10,124,140,.16);
  transition:background .28s,border-color .28s,transform .28s var(--ease)}
.ddine__g:hover{background:linear-gradient(120deg,rgba(21,174,194,.16),rgba(10,124,140,.10));
  border-color:rgba(10,124,140,.32);transform:translateY(-1px)}
.ddine__g-img{flex:0 0 auto;width:46px;height:46px;border-radius:9px;overflow:hidden}
.ddine__g-img img{width:100%;height:100%;object-fit:cover}
.ddine__g-b{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.ddine__g-h{font-family:var(--sans);font-weight:700;font-size:.92rem;color:var(--ink);line-height:1.15}
.ddine__g-p{font-family:var(--sans);font-size:.8rem;color:var(--tx-dim);line-height:1.25}
.ddine__g-arr{flex:0 0 auto;color:var(--cerulean);font-size:1.05rem;transition:transform .3s var(--ease)}
.ddine__g:hover .ddine__g-arr{transform:translateX(4px);color:var(--coral)}

/* narrower desktop: stack the feature over a single tile column */
@media (max-width:1180px){
  .ndd__card--dine{width:min(560px,94vw)}
  .ddine{grid-template-columns:1fr}
  .ddine__feature{min-height:190px}
}


/* MAP EXPLORE — v2: labelled filter menu + the map key doubles as a filter */
.mpx__menu-label{align-self:center;margin-right:4px;font-family:var(--sans);
  font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  color:var(--tx-dim)}
.mpx__legend-lead{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;font-size:.68rem;color:var(--tx-dim);align-self:center;margin-right:2px}
.mpx__key--btn{cursor:pointer;background:none;border:1.5px solid transparent;
  border-radius:999px;padding:5px 12px;font:inherit;color:var(--tx-soft);
  transition:color .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease)}
.mpx__key--btn:hover{color:var(--cerulean);border-color:var(--hair)}
.mpx__key--btn.is-on{color:var(--tx);border-color:currentColor;background:var(--paper)}
.mpx__key--btn.is-on .mpx__ksw{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--c)}
.mpx__key--btn:focus-visible{outline:2px solid var(--turq);outline-offset:2px}
@media (max-width:560px){
  .mpx__menu-label,.mpx__legend-lead{width:100%;text-align:center;margin:0 0 2px}
}

/* Image credits list — /acknowledgements/#image-credits (site-wide CC attribution) */
.imgcred-list{list-style:none;margin:22px auto 0;padding:0;max-width:1000px;
  columns:250px 3;column-gap:30px}
.imgcred-list li{break-inside:avoid;margin:0 0 8px;font-size:.8rem;line-height:1.5}
.imgcred-list li .pcredit{opacity:.9}

/* ============================================================================
   2026-09-02 -- Kurt's review round (see BUILD-STATE): static location grid,
   bigger layout labels, non-sticky search bands, compact restaurant rows,
   route-map logo fix, always-visible photo credits, hero scrim.
   ============================================================================ */
/* home "03 / The layout" door labels were .7rem -- Kurt scrolled past them twice */
.spc .n{font-size:1rem;letter-spacing:.2em}
/* "04 / The location": the East End cards as a static numbered grid (no scroll pin) */
.pstrip--static .pstrip__head{padding-bottom:clamp(20px,2.4vw,34px)}
.pstrip--static .pstrip__head .shead__no{color:var(--turq);margin-bottom:14px}
.pstrip__lead{max-width:56ch;margin-top:16px;color:var(--on-dark-soft);
  font-size:clamp(1.02rem,1vw + .8rem,1.3rem);line-height:1.5}
.pstrip--static .pstrip__stage{overflow:visible}
.pstrip--static .pstrip__track{display:grid;grid-template-columns:repeat(3,1fr);
  width:auto;gap:clamp(14px,1.6vw,26px);padding:0 var(--gutter) clamp(60px,7vw,110px);
  will-change:auto}
.pstrip--static .pcard{width:auto}
.pstrip--static .pcard img{height:clamp(300px,34vw,440px)}
@media(max-width:900px){
  .pstrip--static .pstrip__stage{overflow:visible}
  .pstrip--static .pstrip__track{grid-template-columns:repeat(2,1fr)}
  .pstrip--static .pcard{width:auto}
  .pstrip--static .pcard img{height:44vw}
}
@media(max-width:560px){
  .pstrip--static .pstrip__track{grid-template-columns:1fr}
  .pstrip--static .pcard img{height:62vw}
}
/* hero copy: no scroll-fade any more (fx.js) + a taller, darker scrim so the
   eyebrow / sub / buttons stay legible over bright interior frames of the film */
.dh::after{height:52%;
  background:linear-gradient(180deg,rgba(6,18,25,0),rgba(6,18,25,.32) 42%,rgba(6,18,25,.76))}
.dh .eyebrow.on-dark{text-shadow:0 1px 18px rgba(4,14,20,.7)}
/* guides + journal: the search / filter band no longer floats over the page */
.gcmd{position:static;box-shadow:none}
/* route map rail: 2-3 airline glyphs overflowed their 46px slot onto the text */
.rhop__gs{width:auto;min-width:46px;max-width:110px;flex-wrap:wrap;gap:4px 6px}
.rhop__g svg{height:15px}
/* directory cards: the on-image photo credit was hover-only -- attribution must be
   visible (Kurt asked; it is also the CC licence condition) */
.rcard__cred{opacity:1}

/* ---- restaurant directory: compact rows (was image tiles -- 84 venues took too
   much scrolling) + meal / owners'-pick filters ---- */
.rfind__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.rchip{font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.04em;
  padding:.55em 1em;border-radius:999px;border:1.5px solid rgba(244,241,232,.38);
  background:transparent;color:var(--on-dark);cursor:pointer;transition:.2s var(--ease)}
.rchip:hover{border-color:var(--turq);color:var(--turq)}
.rchip.on{background:var(--turq);border-color:var(--turq);color:var(--ink)}
.rchip--pick.on{background:var(--coral);border-color:var(--coral);color:#fff}
.rfind__pickline{margin-top:16px;font-size:.94rem;line-height:1.5;color:var(--on-dark-soft);max-width:64ch}
.rfind__pickline b{color:var(--coral-hi)}
.rlist{display:flex;flex-direction:column}
.rrow{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1.4fr);
  gap:10px clamp(16px,2vw,34px);align-items:center;padding:14px 12px;
  border-top:1px solid var(--hair);transition:background .25s var(--ease);
  scroll-margin-top:calc(var(--head-h) + 20px)}
.rrow:last-child{border-bottom:1px solid var(--hair)}
.rrow:hover{background:var(--paper)}
.rrow--pick{background:rgba(255,111,94,.07)}
.rrow__name{font-family:var(--serif);font-size:clamp(1.05rem,1.25vw,1.28rem);line-height:1.15;margin:0}
.rrow__name a{color:var(--tx);text-decoration:none}
.rrow__name a:hover{color:var(--cerulean)}
.rrow__name a span{color:var(--cerulean);font-size:.85em}
.rrow__pick{display:inline-block;margin-top:5px;font-family:var(--sans);font-weight:800;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep)}
.rrow__chips{display:flex;flex-wrap:wrap;gap:5px}
.rrow__note{margin:0;font-size:.88rem;line-height:1.4;color:var(--tx-soft)}
.rrow__note:empty{display:none}
.rrow__flag{display:inline-block;margin-top:6px;font-family:var(--sans);font-weight:700;
  font-size:.7rem;letter-spacing:.04em;line-height:1.3;color:#8a3b17;
  background:rgba(255,166,109,.24);padding:.3em .65em;border-radius:6px}
@media(max-width:820px){
  .rrow{grid-template-columns:1fr;gap:8px;padding:14px 4px}
}

/* ============================================================================
   JOURNAL FEATURE (jx) — the long-form journal template (v71). Hero reuses the
   Motion Kit guide hero (.gh). Deck -> chapter rail + chapters (reading column +
   sticky side) -> wide blocks -> FAQ/sources -> author -> keep reading.
   Interactive parts: assets/js/journal-x.js (localStorage only).
   ============================================================================ */
.jx-hero .gh__title h1{max-width:17ch}
.jx-hero .gh__sub{max-width:58ch}
/* food and table art is bright and busy: a neutral scrim (no colour wash) keeps the white type legible */
.jx-hero.gh--art::before{background:linear-gradient(90deg,rgba(6,18,25,.6) 0%,rgba(6,18,25,.32) 38%,rgba(6,18,25,0) 66%),linear-gradient(180deg,rgba(6,18,25,.38),rgba(6,18,25,0) 26%,rgba(6,18,25,.12) 55%,rgba(6,18,25,.86))}
.jx-hero .post-meta{color:#fff}
/* .gh::before shares z-index 1 with .gh__base and loses to it in DOM order; lift the jx scrim above the
   image (still under the title z2 and the meta z4, which come later in the DOM) */
.jx-hero::before{z-index:2}
@media(max-width:700px){.jx-hero{min-height:86svh}.jx-hero .gh__title{bottom:50%}.jx-hero .post-meta span:nth-child(3){display:none}.jx-hero.gh--art::before{background:linear-gradient(180deg,rgba(6,18,25,.5),rgba(6,18,25,.28) 30%,rgba(6,18,25,.58) 52%,rgba(6,18,25,.94))}}
.jx-k{font-family:var(--sans);font-weight:700;font-size:.72rem;line-height:1.2;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cerulean)}
.jx-fine{margin-top:12px;font-size:.78rem;color:var(--tx-dim)}
.jx-mini{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--hair);background:var(--paper);font-size:.84rem;font-weight:600;color:var(--tx);
  transition:background .2s,border-color .2s,color .2s}
.jx-mini:hover{border-color:var(--cerulean);color:var(--cerulean)}

/* ---- deck: the short version ---- */
.jx-deck{background:var(--sand);padding:clamp(26px,3.6vw,56px) var(--gutter)}
.jx-deck__in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(12px,1.4vw,22px);
  max-width:1440px;margin:0 auto}
.jx-card{background:var(--paper);padding:clamp(20px,2vw,30px);box-shadow:0 0 0 1px var(--hair);
  display:flex;flex-direction:column;gap:16px;border-radius:3px;min-width:0}
.jx-short{list-style:none;display:grid;gap:12px}
.jx-short li{position:relative;padding-left:24px;line-height:1.5;font-size:.98rem;color:var(--tx)}
.jx-short li::before{content:"";position:absolute;left:0;top:.7em;width:12px;height:2px;background:var(--coral)}
.jx-dates{list-style:none;display:grid;gap:10px}
.jx-dates li{display:grid;grid-template-columns:minmax(4.6em,auto) 1fr;gap:14px;align-items:baseline;
  padding-bottom:10px;border-bottom:1px solid var(--hair)}
.jx-dates li:last-child{border-bottom:0;padding-bottom:0}
.jx-dates b{font-family:var(--serif);font-weight:400;font-size:1.1rem;color:var(--ink);white-space:nowrap}
.jx-dates span{font-size:.93rem;line-height:1.45;color:var(--tx-soft)}
.jx-countdown{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;background:var(--ink);
  color:var(--on-dark);border-radius:999px;padding:8px 16px 8px 12px;font-size:.88rem;font-weight:600}
.jx-countdown::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 0 4px rgba(255,111,94,.28);flex:none}
html.m-full .jx-countdown::before{animation:jxpulse 2.2s ease-in-out infinite}
@keyframes jxpulse{50%{box-shadow:0 0 0 8px rgba(255,111,94,0)}}
.jx-card--villa{background:var(--ink);color:var(--on-dark);box-shadow:none}
.jx-card--villa .jx-k{color:var(--turq)}
.jx-card__lead{font-family:var(--serif);font-size:1.24rem;line-height:1.32;color:#fff}
.jx-vlist{list-style:none;display:grid;gap:9px;color:var(--on-dark-soft);font-size:.94rem;line-height:1.4}
.jx-vlist li{position:relative;padding-left:18px}
.jx-vlist li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;
  background:var(--turq)}
.jx-card__btns{margin-top:auto;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.jx-link{color:var(--turq);font-weight:700;font-size:.92rem}
.jx-link:hover{color:#fff}
@media(max-width:1080px){.jx-deck__in{grid-template-columns:1fr 1fr}.jx-card--short{grid-column:1/-1}}
@media(max-width:700px){.jx-deck__in{grid-template-columns:1fr}}

/* ---- the reading grid: sticky chapter rail | main ---- */
.jx{position:relative}
.jx-grid{display:grid;grid-template-columns:minmax(0,1fr);max-width:1440px;margin:0 auto;
  padding:0 var(--gutter)}
.jx-rail{display:none}
@media(min-width:1360px){
  .jx-grid{grid-template-columns:212px minmax(0,1fr);gap:clamp(36px,3.4vw,64px)}
  .jx-rail{display:block}
  .jx-fab,.jx-sheet,.jx-top{display:none !important}
}
.jx-rail__in{position:sticky;top:calc(var(--head-h) + 22px);padding:clamp(40px,4vw,64px) 0 32px;
  max-height:calc(100vh - var(--head-h) - 30px);overflow:auto;scrollbar-width:thin}
.jx-rail ol{list-style:none;margin-top:14px;display:grid;gap:1px}
.jx-rail a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--hair);font-size:.86rem;
  line-height:1.35;color:var(--tx-soft);transition:color .2s,border-color .2s,padding .3s var(--ease)}
.jx-rail a:hover{color:var(--tx);border-left-color:var(--cerulean-hi)}
.jx-rail a.on{color:var(--ink);border-left-color:var(--coral);font-weight:700;padding-left:18px}
.jx-rail__bar{margin-top:20px;height:3px;background:var(--hair);border-radius:3px;overflow:hidden}
.jx-rail__bar span{display:block;height:100%;width:100%;transform-origin:left;
  transform:scaleX(var(--jx-p,0));background:var(--cerulean-true)}
.jx-rail__cta{margin-top:22px}
.jx-rail__cta .btn{width:100%;justify-content:center}

/* below 1360: top progress line + floating Chapters button + bottom sheet */
.jx-top{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none;opacity:0;
  transition:opacity .3s}
.jx-top span{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--jx-p,0));
  background:var(--coral)}
.jx.is-reading .jx-top{opacity:1}
.jx-fab{position:fixed;left:var(--gutter);bottom:clamp(14px,3vh,26px);z-index:55;display:inline-flex;
  align-items:center;gap:8px;background:var(--ink);color:var(--on-dark);border-radius:999px;
  padding:11px 18px;font-size:.88rem;font-weight:700;box-shadow:0 12px 30px -8px rgba(6,40,46,.45);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease)}
.jx-fab::before{content:"";width:14px;height:10px;flex:none;
  background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 50%/70% 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/85% 2px no-repeat}
.jx.is-reading .jx-fab{opacity:1;transform:none;pointer-events:auto}
.jx-sheet{position:fixed;inset:0;z-index:70;background:rgba(6,24,30,.52);display:flex;align-items:flex-end}
.jx-sheet[hidden]{display:none}
.jx-sheet__in{background:var(--paper);width:100%;max-height:80vh;overflow:auto;border-radius:16px 16px 0 0;
  padding:24px var(--gutter) 26px}
.jx-sheet ol{list-style:none;margin:12px 0 18px;display:grid}
.jx-sheet a{display:block;padding:12px 0;border-bottom:1px solid var(--hair);font-size:1rem;color:var(--tx)}
.jx-sheet a.on{color:var(--cerulean);font-weight:700}

/* ---- main column + chapters ---- */
.jx-main{min-width:0;max-width:74rem;padding:clamp(40px,4.4vw,72px) 0 clamp(40px,5vw,80px)}
.jx-intro{max-width:44rem}
.jx-intro .lede{font-size:clamp(1.24rem,1.2vw + .95rem,1.7rem);line-height:1.42}
.jx-ch{padding-top:clamp(44px,5vw,80px);scroll-margin-top:calc(var(--head-h) + 12px)}
.jx-ch__h{border-top:1px solid var(--hair);padding-top:clamp(22px,2.4vw,34px);margin-bottom:clamp(18px,2vw,30px);
  position:relative}
.jx-ch__h::before{content:"";position:absolute;left:0;top:-1px;width:64px;height:3px;background:var(--coral);
  transform-origin:left;transform:scaleX(.001);transition:transform .9s var(--ease)}
.jx-ch.is-on .jx-ch__h::before,html.m-calm .jx-ch__h::before{transform:scaleX(1)}
.jx-ch__h h2{font-size:clamp(1.95rem,2.7vw,3rem);line-height:1.08;color:var(--ink);max-width:24ch}
.jx-run{display:grid;grid-template-columns:minmax(0,44rem);gap:clamp(28px,3.4vw,60px)}
.jx-read{min-width:0}
.jx-read>*:first-child{margin-top:0}
.jx-side{min-width:0}
.jx-side__in{position:sticky;top:calc(var(--head-h) + 26px)}
@media(min-width:1100px){.jx-run--side{grid-template-columns:minmax(0,44rem) minmax(250px,1fr)}}
@media(max-width:1099px){.jx-run--side{display:flex;flex-direction:column}.jx-side{order:-1}
  .jx-side__in{position:static}}
.jx-fig{margin:0}
.jx-fig img{aspect-ratio:auto;border-radius:2px}
.jx-side .jx-fig img{max-height:calc(100vh - var(--head-h) - 140px);object-fit:cover}
@media(max-width:1099px){.jx-side .jx-fig img{max-height:none}}
.jx-side .jx-fig{transition:transform 1.1s var(--ease),opacity 1.1s var(--ease)}
html.m-full .jx-ch:not(.is-on) .jx-side .jx-fig{opacity:.82;transform:scale(.985)}
.jx-note{background:var(--sand);border-left:3px solid var(--coral);padding:clamp(20px,2vw,28px)}
.jx-note__k{font-family:var(--serif);font-size:1.32rem;line-height:1.25;color:var(--ink);margin-bottom:10px}
.jx-note p:last-child{color:var(--tx-soft);line-height:1.55}

/* ---- wide blocks (chapter ends only) ---- */
.jx-wide{margin-top:clamp(30px,3.2vw,48px);max-width:74rem}
.jx-band .pband__f img{height:clamp(220px,30vh,380px)}
.jx-villa{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--ink);color:var(--on-dark);
  border-radius:3px;overflow:hidden}
.jx-villa__img img{width:100%;height:100%;object-fit:cover;min-height:280px;display:block;
  transition:transform 1.2s var(--ease)}
.jx-villa:hover .jx-villa__img img{transform:scale(1.035)}
.jx-villa__img{overflow:hidden}
.jx-villa__b{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.jx-villa .jx-k{color:var(--turq)}
.jx-villa h3{font-size:clamp(1.6rem,2.2vw,2.3rem);line-height:1.1;color:#fff}
.jx-villa p{color:var(--on-dark-soft);line-height:1.55}
.jx-villa__row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.jx-villa .btn-ghost{color:var(--on-dark)}
.jx-villa .btn-ghost:hover{color:var(--ink);background:var(--on-dark)}
@media(max-width:820px){.jx-villa{grid-template-columns:1fr}.jx-villa__img img{min-height:220px;max-height:300px}}

/* room planner */
.jx-rooms{background:var(--cream);box-shadow:0 0 0 1px var(--hair);padding:clamp(22px,2.6vw,40px);border-radius:3px}
.jx-rooms__head{max-width:44rem}
.jx-rooms__head h3{font-size:clamp(1.6rem,2.2vw,2.2rem);margin:8px 0 10px;color:var(--ink)}
.jx-rooms__head p{color:var(--tx-soft);line-height:1.55}
.jx-rooms__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.jx-room{background:var(--paper);box-shadow:0 0 0 1px var(--hair);padding:16px;display:grid;gap:12px;
  transition:box-shadow .25s,transform .25s var(--ease)}
.jx-room:focus-within{box-shadow:0 0 0 2px var(--cerulean-hi);transform:translateY(-2px)}
.jx-room__h{display:grid;gap:2px}
.jx-room__house{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--tx-dim)}
.jx-room__h b{font-family:var(--serif);font-weight:400;font-size:1.2rem;color:var(--ink)}
.jx-room__note{font-size:.82rem;color:var(--tx-soft)}
.jx-room__slots{display:grid;gap:8px}
.jx-room input{width:100%;font:inherit;font-size:.95rem;padding:10px 12px;border:1px solid var(--hair);
  border-radius:2px;background:var(--paper);color:var(--tx)}
.jx-room input:focus{outline:none;border-color:var(--cerulean)}
.jx-room.is-full{box-shadow:0 0 0 1px var(--cerulean-hi)}
.jx-rooms__foot{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:18px}
.jx-rooms__count{font-weight:700;color:var(--ink);margin-right:auto}
@media(max-width:1020px){.jx-rooms__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.jx-rooms__grid{grid-template-columns:1fr}}

/* holiday calendar */
.jx-cal{background:var(--ink);color:var(--on-dark);padding:clamp(22px,2.6vw,40px);border-radius:3px}
.jx-cal .jx-k{color:var(--turq)}
.jx-cal h3{font-size:clamp(1.6rem,2.2vw,2.2rem);margin:8px 0 16px;color:#fff}
.jx-cal__pick{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
.jx-cal__pick label{display:grid;gap:6px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--on-dark-soft)}
.jx-cal__pick input{font:inherit;font-size:.98rem;letter-spacing:0;text-transform:none;padding:9px 12px;
  border-radius:2px;border:1px solid var(--hair-d);background:rgba(255,255,255,.06);color:#fff;color-scheme:dark}
.jx-cal__n{font-size:.95rem;color:var(--on-dark-soft);flex:1 1 220px}
.jx-cal__list{list-style:none;margin-top:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.jx-cal__list li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:14px;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair-d);border-radius:2px;
  transition:opacity .3s,background .3s,box-shadow .3s}
.jx-cal__list time{display:grid;justify-items:center;min-width:3.2em;padding:6px 4px;border-radius:2px;
  background:rgba(255,255,255,.08)}
.jx-cal__list time b{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1;color:#fff}
.jx-cal__list time span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft)}
.jx-cal__list p{font-size:.92rem;line-height:1.45;color:var(--on-dark)}
.jx-cal.has-range .jx-cal__list li{opacity:.42}
.jx-cal.has-range .jx-cal__list li.in{opacity:1;background:rgba(58,210,224,.12);box-shadow:inset 0 0 0 1px var(--turq)}
.jx-cal .jx-fine{color:var(--on-dark-soft)}

/* checklist */
.jx-check{margin:2.2em 0;background:var(--paper);box-shadow:0 0 0 1px var(--hair);padding:clamp(20px,2.2vw,30px);
  border-radius:3px}
.jx-check__h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.jx-check__n{font-size:.84rem;font-weight:700;color:var(--tx-soft)}
.jx-check ul{list-style:none;padding:0;display:grid;gap:2px}
.jx-check li{margin:0}
.jx-check label{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:9px 0;
  border-bottom:1px solid var(--hair);cursor:pointer;color:var(--tx);line-height:1.45;font-size:.98rem}
.jx-check input{width:18px;height:18px;margin-top:.15em;accent-color:var(--coral-btn)}
.jx-check input:checked+span{color:var(--tx-dim);text-decoration:line-through;text-decoration-color:var(--coral)}
.jx-check__b{display:flex;gap:10px;margin-top:14px}

/* FAQ + sources as chapters */
.jx-faq{margin-top:0}
.jx-src{max-width:44rem}
.jx-src p{color:var(--tx-soft);line-height:1.55}
.jx-src ol{margin-top:14px;padding-left:1.3em;display:grid;gap:6px;font-size:.9rem}
.jx-src a{color:var(--cerulean);text-decoration:underline;text-underline-offset:3px;word-break:break-word}

/* author */
.jx-author{background:var(--cream);padding:clamp(30px,4vw,60px) var(--gutter)}
.jx-author__in{max-width:60rem;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,32px);
  align-items:start}
.jx-author__mark{width:clamp(64px,7vw,88px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--turq);font-family:var(--serif);font-size:clamp(1.4rem,2vw,1.9rem)}
.jx-author__n{font-family:var(--serif);font-size:clamp(1.5rem,2vw,2rem);color:var(--ink);margin:6px 0 8px}
.jx-author__r{color:var(--tx-soft);line-height:1.55;max-width:60ch}
.jx-author__d{margin-top:10px;font-size:.82rem;color:var(--tx-dim)}

/* keep reading */
.jx-more{padding:clamp(40px,5vw,80px) var(--gutter)}
.jx-more__in{max-width:1440px;margin:0 auto}
.jx-more__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);margin-top:18px}
.jx-more__c{background:var(--paper);box-shadow:0 0 0 1px var(--hair);transition:transform .45s var(--ease),box-shadow .45s}
.jx-more__c:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--hair),0 22px 40px -22px rgba(6,40,46,.4)}
.jx-more__img{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--ink2)}
.jx-more__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.jx-more__c:hover .jx-more__img img{transform:scale(1.05)}
.jx-more__b{padding:18px 20px 22px;display:grid;gap:8px}
.jx-more__b h3{font-size:1.35rem;line-height:1.15}
.jx-more__b h3 a:hover{color:var(--cerulean)}
.jx-more__b p{font-size:.92rem;color:var(--tx-soft);line-height:1.5}
@media(max-width:900px){.jx-more__grid{grid-template-columns:1fr}}

@media print{
  .jx-rail,.jx-fab,.jx-sheet,.jx-top,.jx-side,.jx-villa,.jx-more,.cta,.gh,header,footer{display:none !important}
  .jx-grid{display:block}.jx-run--side{display:block}
}