/* ============================================================
   RESIDENCE XII — design system
   Deep-ocean identity: strong ocean blue dominates; tropical green and
   flame orange appear only as touches. No warm/ivory tones, no gold.
   Faena register: Fraunces display, Montserrat text.
   (Faena Hotels use Chronicle Display + Gotham — proprietary Hoefler & Co.
    Fraunces is the closest license-clean match to Chronicle Display: a
    high-contrast Scotch/Didone serif with ball terminals, self-hosted as a
    variable font with optical sizing so big headings pick up Chronicle's
    dramatic display contrast. Montserrat stands in for Gotham.
    Drop in licensed Chronicle/Gotham woff2 here to use the originals.)
   Built by Cavmir. No italics in UI. No gold text. Full-bleed law.
   ============================================================ */

/* ---------- fonts (self-hosted, latin) ---------- */
/* Fraunces — variable (wght 300–700), optical sizing on; SOFT/WONK at 0 (clean cut). */
@font-face { font-family: 'Marcellus'; src: url('../fonts/marcellus-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Marcellus'; src: url('../fonts/marcellus-400-latinext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  /* deep ocean — grounds & dark surfaces */
  --ink: #03202F;
  --ink-2: #052A3D;
  --ink-3: #073A52;
  /* cool porcelain — light surfaces (replaces warm cream) */
  --paper: #EEF3F6;
  --paper-2: #DFE9EE;
  --white: #FFFFFF;
  --mist: #E3EDF2;
  --mist-dim: #93AEBC;
  /* SIGNATURE OCEAN BLUE — dominant accent. Token names kept (teal/sea) so all
     40 pages inherit the new blue without touching 80+ usages. */
  --teal: #0C6E9E;        /* strong ocean blue — accent on light */
  --teal-deep: #084E77;   /* deep ocean blue — link text on light (AA) */
  --sea: #45B6E8;         /* bright surf blue — accent on dark */
  /* TOUCHES — used sparingly, on purpose */
  --green: #17A67C;       /* tropical green — on dark */
  --green-deep: #0C7355;  /* tropical green — on light */
  --flame: #FF6A2B;       /* flame orange — on dark */
  --flame-deep: #C24A12;  /* flame orange — on light (AA) */
  --line-d: rgba(227, 237, 242, 0.16);
  --line-l: rgba(3, 32, 47, 0.14);
  --serif: 'Marcellus', 'Iowan Old Style', Georgia, serif;
  --sans: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --pad: clamp(16px, 2vw, 40px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 76px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  font-family: var(--sans);
  /* Marcellus ships one true weight (400); never let the browser fake-bold it */
  font-synthesis: none;
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.72;
  letter-spacing: 0.002em;
  color: var(--ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--sea); color: var(--ink); }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: fixed; top: -4rem; left: 1rem; z-index: 300;
  background: var(--paper); color: var(--ink);
  padding: 0.7rem 1.2rem; font-weight: 700; font-size: 0.9rem;
  border-radius: 3px; transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* subtle grain over everything */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 250; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.035; mix-blend-mode: overlay;
}

/* ---------- typography helpers ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--teal);
}
.on-dark .kicker { color: var(--sea); }
.kicker::before { content: ''; width: 2.4rem; height: 1px; background: currentColor; opacity: 0.7; }
.kicker.bare::before { display: none; }

.display {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3rem, 7.8vw, 7.4rem);
  line-height: 1.0; letter-spacing: -0.018em;
}
.h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 4.7vw, 4rem);
  line-height: 1.06; letter-spacing: -0.014em;
}
.h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.16; letter-spacing: -0.008em;
}
.lead { font-family: var(--serif); font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.58; font-weight: 400; letter-spacing: -0.003em; }
.muted { color: rgba(11, 23, 29, 0.68); }
.on-dark .muted { color: var(--mist-dim); }

/* ---------- layout ---------- */
.wrap { width: 100%; margin-inline: 0; padding-inline: var(--pad); }
.section { position: relative; padding-block: clamp(5rem, 11vw, 9.5rem); }
.section.tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.bg-paper { background: var(--paper); color: var(--ink); }
.bg-ink { background: var(--ink); color: var(--mist); }
.bg-ink-2 { background: var(--ink-2); color: var(--mist); }

.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.sec-head .h2 { max-width: 18em; }
.sec-num {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3.2rem, 6vw, 5.4rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(11,23,29,0.34);
}
.on-dark .sec-num, .bg-ink .sec-num, .bg-ink-2 .sec-num { -webkit-text-stroke: 1px rgba(234,240,237,0.32); }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  padding: 1.02rem 2.1rem; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.05em; text-transform: uppercase;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
  overflow: hidden; white-space: nowrap;
}
.btn .arr { transition: transform 0.35s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }
.btn-solid { background: var(--paper); color: var(--ink); }
.btn-solid:hover { background: var(--white); }
.btn-ink { background: var(--ink); color: var(--mist); }
.btn-ink:hover { background: var(--ink-3); }
.btn-line { border: 1px solid var(--line-d); color: var(--mist); background: rgba(11,23,29,0.25); backdrop-filter: blur(6px); }
.btn-line:hover { border-color: var(--sea); color: var(--white); }
.bg-paper .btn-line, .on-light .btn-line { border-color: rgba(11,23,29,0.35); color: var(--ink); background: transparent; backdrop-filter: none; }
.bg-paper .btn-line:hover, .on-light .btn-line:hover { border-color: var(--teal); color: var(--teal-deep); }

/* ---------- preloader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 400; background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
  /* auto-lift on a CSS timer so the curtain never depends on JS to clear —
     it was gating LCP on the deferred app.js finishing. Lifts at ~0.35s. */
  animation: ldr-out 0.7s cubic-bezier(0.76, 0, 0.24, 1) 0.35s forwards;
}
@keyframes ldr-out { to { transform: translateY(-100%); } }
#loader .xii {
  font-family: var(--serif); font-weight: 400; color: var(--mist);
  font-size: clamp(4rem, 12vw, 7.5rem); line-height: 1; letter-spacing: 0.06em;
  opacity: 0; transform: translateY(18px); animation: ldr-in 0.9s var(--ease) 0.1s forwards;
}
#loader .sub {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.34em; text-transform: uppercase; color: var(--sea);
  opacity: 0; animation: ldr-in 0.9s var(--ease) 0.32s forwards;
}
#loader .rule { width: 0; height: 1px; background: var(--line-d); animation: ldr-rule 1s var(--ease) 0.2s forwards; }
@keyframes ldr-in { to { opacity: 1; transform: translateY(0); } }
@keyframes ldr-rule { to { width: min(300px, 60vw); } }
body.loaded #loader { transform: translateY(-100%); }
body.loaded #loader * { animation-play-state: paused; }

/* ---------- header ---------- */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
/* scrim so nav stays legible over the hero before it goes solid */
#header::before {
  content: ''; position: absolute; inset: 0 0 -70% 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 13, 17, 0.62), rgba(6, 13, 17, 0));
  opacity: 1; transition: opacity 0.4s var(--ease);
}
#header.solid { background: rgba(11, 23, 29, 0.9); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-d); }
#header.solid::before { opacity: 0; }
#header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; position: relative; }

.brand { display: inline-flex; align-items: baseline; gap: 0.7rem; color: var(--mist); z-index: 220; }
.brand .mono {
  font-family: var(--serif); font-weight: 600; font-size: 1.55rem; line-height: 1; letter-spacing: 0.04em;
}
.brand .name { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mist-dim); }

#nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
#nav a.nl {
  position: relative; font-size: 0.83rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mist); padding: 0.4rem 0; opacity: 0.92;
}
#nav a.nl::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--sea); transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease);
}
#nav a.nl:hover::after, #nav a.nl:focus-visible::after { transform: scaleX(1); transform-origin: left; }
#nav .btn { padding: 0.72rem 1.5rem; font-size: 0.8rem; }

/* menu button — visible at every breakpoint, with a label */
#menu-btn { display: inline-flex; align-items: center; gap: 11px; z-index: 220; position: relative;
  width: auto; height: auto; color: var(--mist); font-family: var(--sans); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; }
#menu-btn .menu-btn__lines { display: flex; flex-direction: column; gap: 5px; width: 24px; }
#menu-btn .menu-btn__lines span { position: static; height: 2px; width: 100%; background: currentColor;
  border-radius: 2px; transition: 0.35s var(--ease); }
#menu-btn .menu-btn__lines span:nth-child(2) { width: 62%; margin-left: auto; }
#menu-btn:hover .menu-btn__lines span:nth-child(2) { width: 100%; }
/* solid header is dark ink — keep the menu control light so it never
   goes dark-on-dark (it matches the nav links and the wordmark). */
#header.solid #menu-btn { color: var(--mist); }

/* ===== fullscreen overlay menu — featured image + links ===== */
#mobile-menu {
  position: fixed; inset: 0; z-index: 210; background: var(--ink); overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0s 0.4s;
}
body.menu-open #mobile-menu { opacity: 1; visibility: visible; transition-delay: 0s; }
#mobile-menu .overlay__close { position: absolute; top: 16px; right: var(--pad); width: 46px; height: 46px; z-index: 4;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-d); border-radius: 50%;
  color: var(--mist); font-size: 1.7rem; background: transparent; transition: 0.35s var(--ease); }
#mobile-menu .overlay__close:hover { background: rgba(255,255,255,0.08); transform: rotate(90deg); }
#mobile-menu .ov2 { display: grid; grid-template-columns: minmax(0,0.84fr) minmax(0,1.16fr); width: 100%; height: 100%; }
.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; }
body.menu-open .ov2__feature-img { transform: scale(1); opacity: 1; }
.ov2__feature::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,18,23,0.12) 0%, rgba(9,18,23,0.5) 52%, rgba(9,18,23,0.94) 100%); }
.ov2__feature-body { position: relative; z-index: 2; max-width: 30rem; transform: translateY(24px); opacity: 0;
  transition: 0.75s var(--ease) 0.3s; }
body.menu-open .ov2__feature-body { transform: none; opacity: 1; }
.ov2__feature-eyebrow { display: block; font-family: var(--sans); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--sea); margin-bottom: 15px; }
.ov2__feature-title { font-family: var(--serif); font-weight: 400; line-height: 1.05;
  font-size: clamp(1.7rem,2.7vw,3rem); color: var(--white); margin-bottom: 15px; }
.ov2__feature-desc { font-size: 1rem; color: var(--mist-dim); line-height: 1.55; margin-bottom: 26px; max-width: 26rem; }
.ov2__nav { position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(74px,8vh,120px) var(--pad) clamp(56px,7vh,80px); overflow-y: auto; }
.ov2__list { display: flex; flex-direction: column; gap: clamp(2px,0.6vh,8px); }
.ov2__head { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem,4vw,3rem); line-height: 1.25;
  color: var(--mist); transition: color 0.3s; transform: translateY(20px); opacity: 0; }
body.menu-open .ov2__head { transform: none; opacity: 1;
  transition: color 0.3s, transform 0.6s var(--ease) var(--d,0s), opacity 0.55s var(--ease) var(--d,0s); }
.ov2__head:hover { color: var(--sea); }
.ov2__list .ov2__head:nth-child(1){--d:0.14s}.ov2__list .ov2__head:nth-child(2){--d:0.19s}
.ov2__list .ov2__head:nth-child(3){--d:0.24s}.ov2__list .ov2__head:nth-child(4){--d:0.29s}
.ov2__list .ov2__head:nth-child(5){--d:0.34s}.ov2__list .ov2__head:nth-child(6){--d:0.39s}
.ov2__list .ov2__head:nth-child(7){--d:0.44s}
.ov2__foot { margin-top: clamp(26px,4vh,44px); padding-top: 22px; border-top: 1px solid var(--line-d);
  display: flex; flex-direction: column; gap: 16px; }
#mobile-menu .mm-foot { margin: 0; color: var(--mist-dim); font-size: 0.85rem; letter-spacing: 0.08em; }
@media (max-width: 900px) {
  #mobile-menu .ov2 { grid-template-columns: 1fr; grid-template-rows: 30vh 1fr; }
  .ov2__nav { justify-content: flex-start; padding-top: clamp(28px,5vh,44px); }
}
@media (max-width: 540px) {
  #mobile-menu .ov2 { grid-template-rows: 1fr; }
  .ov2__feature { display: none; }
  #menu-btn .menu-btn__label { display: none; }
}
body.menu-open { overflow: hidden; }

/* ---------- hero ---------- */
#hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: clip; color: var(--white); }
#hero .media { position: absolute; inset: -12% 0; z-index: 1; }
#hero .media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%;
  transform: scale(1.12); transition: transform 2.6s var(--ease);
}
body.loaded #hero .media img { transform: scale(1.02); }
/* hero video loop sits above the still (which stays as poster + Calm fallback) */
#hero .media video.hero-vid {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  background: var(--ink, #070e12);
}
html:not(.m-full) .hero-vid { display: none; }
#hero::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to bottom, rgba(7, 14, 18, 0.42) 0%, rgba(7, 14, 18, 0) 32%),
    linear-gradient(to top, rgba(7, 14, 18, 0.78) 0%, rgba(7, 14, 18, 0.18) 46%, rgba(7, 14, 18, 0) 68%);
}
#hero .wrap { position: relative; z-index: 3; padding-bottom: clamp(2.2rem, 6vh, 4.5rem); width: 100%; }
#hero .kicker { color: var(--sea); text-shadow: 0 1px 3px rgba(7, 14, 18, 0.9), 0 0 20px rgba(7, 14, 18, 0.55); }
#hero .display { max-width: 10.5em; margin-top: 1.3rem; text-shadow: 0 2px 30px rgba(7, 14, 18, 0.35); }
#hero .lead { max-width: 34em; margin-top: 1.4rem; font-weight: 500; color: rgba(255,255,255,0.94); }
#hero .cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
#hero .hero-stats {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2.6rem; margin-top: 2.6rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.22);
}
#hero .hs { display: flex; align-items: baseline; gap: 0.55rem; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.92); }
#hero .hs strong { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; letter-spacing: 0; color: var(--white); }
#scroll-cue {
  position: absolute; right: calc(var(--pad)); bottom: clamp(2.2rem, 6vh, 4.5rem); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.85);
}
#scroll-cue .line { width: 1px; height: 64px; background: rgba(255,255,255,0.4); overflow: hidden; position: relative; }
#scroll-cue .line::after { content: ''; position: absolute; top: -40%; left: 0; width: 100%; height: 40%; background: var(--white); animation: cue 2.1s var(--ease) infinite; }
@keyframes cue { 0% { top: -40%; } 60%, 100% { top: 110%; } }

/* hero text intro */
/* Entrance is CSS-only (autoplay) so the LCP headline NEVER waits on JS —
   the old body.loaded gate held the <h1> at opacity:0 until the deferred
   app.js ran, wrecking LCP. Transform-only (opacity stays 1) so the paint
   counts at first frame; the slide-up still reads as an entrance. */
.hi { transform: translateY(34px); }
html.m-full .hi { animation: hi-in 0.9s var(--ease) both; }
html.m-full .hi.d1 { animation-delay: 0.12s; }
html.m-full .hi.d2 { animation-delay: 0.24s; }
html.m-full .hi.d3 { animation-delay: 0.36s; }
html.m-full .hi.d4 { animation-delay: 0.48s; }
@keyframes hi-in { from { transform: translateY(34px); } to { transform: none; } }

/* ---------- reveals ---------- */
.rv { opacity: 0; transform: translateY(38px); transition: opacity 0.95s var(--ease), transform 0.95s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-group > * { opacity: 0; transform: translateY(30px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.rv-group.in > * { opacity: 1; transform: none; }
.rv-group.in > *:nth-child(2) { transition-delay: 0.1s; }
.rv-group.in > *:nth-child(3) { transition-delay: 0.2s; }
.rv-group.in > *:nth-child(4) { transition-delay: 0.3s; }
.rv-group.in > *:nth-child(5) { transition-delay: 0.4s; }
.rv-group.in > *:nth-child(6) { transition-delay: 0.5s; }

/* ---------- manifesto ---------- */
#manifesto .grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
#manifesto .statement { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3.3vw, 2.9rem); line-height: 1.28; letter-spacing: -0.008em; max-width: 21em; }
#manifesto .statement .accent { color: var(--flame-deep); }  /* touch: flame */
#manifesto .side p { max-width: 40em; }
#manifesto .side p + p { margin-top: 1.2rem; }
#manifesto .side .detail-img { margin-top: 2.2rem; overflow: clip; border-radius: 4px; }
#manifesto .side .detail-img img { transition: transform 1.2s var(--ease); }
#manifesto .side .detail-img:hover img { transform: scale(1.045); }
#manifesto .cap { margin-top: 0.8rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: rgba(11,23,29,0.55); }
#manifesto .wide-view { margin: clamp(2.6rem, 5vw, 4.6rem) 0 0; }
#manifesto .wide-view .ph { overflow: clip; border-radius: 4px; }
#manifesto .wide-view img { width: 100%; aspect-ratio: 12 / 5; object-fit: cover; object-position: center 42%; transition: transform 1.2s var(--ease); }
#manifesto .wide-view:hover img { transform: scale(1.03); }

.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-l);
  border-block: 1px solid var(--line-l); margin-top: clamp(3rem, 7vw, 5.5rem);
}
.stat { background: var(--paper); padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 2vw, 2rem); }
.stat .num { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1; color: var(--ink); display: flex; align-items: baseline; gap: 0.15em; }
.stat .num .unit { font-size: 0.42em; font-weight: 500; color: var(--teal); white-space: nowrap; }
.stat .lbl { margin-top: 0.7rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(11,23,29,0.6); }

/* ---------- rooms ---------- */
.room { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center; padding-block: clamp(2.6rem, 6vw, 5.2rem); }
.room + .room { border-top: 1px solid var(--line-l); }
.room .media { grid-column: 1 / 8; position: relative; padding-right: clamp(28px, 4vw, 76px); }
.room.flip .media { grid-column: 6 / 13; order: 2; padding-right: 0; padding-left: clamp(28px, 4vw, 76px); }
.room .media .main { overflow: clip; border-radius: 4px; }
.room .media .main img { transition: transform 1.3s var(--ease); }
.room .media:hover .main img { transform: scale(1.04); }
.room .media .float {
  position: absolute; right: 0; bottom: -12%; width: 30%; aspect-ratio: 4 / 3;
  border: 6px solid var(--paper); border-radius: 4px; overflow: clip;
  box-shadow: 0 30px 60px rgba(11, 23, 29, 0.22);
}
.room .media .float img { width: 100%; height: 100%; object-fit: cover; }
.room.flip .media .float { right: auto; left: 0; }
.room .body { grid-column: 8 / 13; }
.room.flip .body { grid-column: 1 / 6; order: 1; }
.room .idx { font-family: var(--serif); font-weight: 400; font-size: 1rem; letter-spacing: 0.28em; color: var(--teal); }
.room .h3 { margin-top: 0.7rem; }
.room p { margin-top: 1.1rem; color: rgba(11,23,29,0.75); max-width: 40em; }
.room .specs { margin-top: 1.6rem; border-top: 1px solid var(--line-l); }
.room .specs li {
  display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.72rem 0;
  border-bottom: 1px solid var(--line-l); font-size: 0.92rem;
}
.room .specs .k { font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.74rem; color: rgba(11,23,29,0.55); padding-top: 0.2em; }
.room .specs .v { font-weight: 600; text-align: right; }

/* ---------- full-bleed quote breaks ---------- */
.break { position: relative; min-height: 92svh; display: flex; align-items: center; overflow: clip; color: var(--white); }
.break .media { position: absolute; inset: -14% 0; z-index: 1; }
.break .media img { width: 100%; height: 100%; object-fit: cover; }
.break::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(7,14,18,0.72), rgba(7,14,18,0.28) 55%, rgba(7,14,18,0.2)); }
.break .wrap { position: relative; z-index: 3; }
.break blockquote { max-width: 17em; }
.break blockquote .q {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.18; letter-spacing: -0.01em;
  text-shadow: 0 2px 26px rgba(7, 14, 18, 0.45);
}
.break blockquote footer { margin-top: 1.6rem; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sea); }
.break .co { position: absolute; right: var(--pad); bottom: 2rem; z-index: 3; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.75); }

/* ---------- wellness / horizontal gallery ---------- */
#wellness { overflow: clip; }
#wellness .intro { max-width: 46em; }
#wellness .intro p { margin-top: 1.4rem; color: var(--mist-dim); max-width: 38em; }
#wellness .intro .lead { color: var(--mist); }

#hg { position: relative; margin-top: clamp(2.5rem, 6vw, 4.5rem); }
#hg-track {
  display: flex; gap: clamp(1rem, 2vw, 1.8rem);
  will-change: transform;
}
.hg-card { flex: 0 0 auto; width: clamp(280px, 34vw, 480px); }
.hg-card .ph { overflow: clip; border-radius: 4px; position: relative; aspect-ratio: 3 / 2; }
.hg-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.hg-card:hover .ph img { transform: scale(1.05); }
.hg-card .ph .n {
  position: absolute; top: 0.9rem; left: 1rem; z-index: 2;
  font-family: var(--serif); font-size: 0.95rem; letter-spacing: 0.2em; color: var(--white);
  text-shadow: 0 1px 12px rgba(7,14,18,0.6);
}
.hg-card .t { margin-top: 1rem; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--mist); }
.hg-card .d { margin-top: 0.3rem; font-size: 0.92rem; color: var(--mist-dim); line-height: 1.6; }

/* desktop: sticky scroll-driven track */
@media (min-width: 901px) {
  #hg.sticky-mode { height: auto; }
  #hg.sticky-mode .hg-viewport { position: sticky; top: var(--header-h); overflow: clip; padding-block: 1rem; }
}
/* mobile: native swipe */
@media (max-width: 900px) {
  #hg { margin-inline: calc(var(--pad) * -1); }
  #hg .hg-viewport { overflow-x: auto; padding: 0.5rem var(--pad) 1.5rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
  #hg .hg-viewport::-webkit-scrollbar { display: none; }
  .hg-card { scroll-snap-align: start; width: min(78vw, 420px); }
}
/* Fallback whenever the sticky scroll-jack is NOT engaged (reduced-motion, or
   before/without JS): keep every wellness card reachable by horizontal swipe
   instead of letting them clip off-screen unreachably. */
#hg:not(.sticky-mode) .hg-viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
#hg:not(.sticky-mode) .hg-card { scroll-snap-align: start; }

#hg-progress { margin-top: 1.8rem; height: 2px; background: var(--line-d); position: relative; overflow: hidden; }
#hg-progress .bar { position: absolute; inset: 0; background: var(--sea); transform: scaleX(0); transform-origin: left; }

.amenity-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-d);
  border: 1px solid var(--line-d); margin-top: clamp(3rem, 6vw, 5rem);
}
.amenity { background: var(--ink); padding: 1.7rem 1.5rem; }
.amenity .a-t { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--mist); }
.amenity .a-d { margin-top: 0.4rem; font-size: 0.85rem; color: var(--mist-dim); line-height: 1.6; }
.amenity .a-i { font-family: var(--serif); color: var(--green); font-size: 1.1rem; margin-bottom: 0.9rem; }  /* touch: tropical green */

/* ---------- reviews ---------- */
#reviews .grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; }
#reviews .score { position: sticky; top: calc(var(--header-h) + 2rem); }
#reviews .big {
  font-family: var(--serif); font-weight: 400; line-height: 0.9;
  font-size: clamp(6rem, 15vw, 12rem); letter-spacing: -0.03em;
}
#reviews .stars { margin-top: 1rem; color: var(--teal); font-size: 1.2rem; letter-spacing: 0.35em; }
#reviews .src { margin-top: 0.8rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(11,23,29,0.55); }
.rbars { margin-top: 2.4rem; display: grid; gap: 1rem; max-width: 24rem; }
.rbar .rk { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(11,23,29,0.65); }
.rbar .tr { margin-top: 0.45rem; height: 2px; background: rgba(11,23,29,0.14); overflow: hidden; }
.rbar .fl { height: 100%; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); }
.rbars.in .fl { transform: scaleX(var(--w)); }

.quote-stack { display: grid; }
.quote-stack .qs {
  grid-area: 1 / 1; opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  pointer-events: none;
}
.quote-stack .qs.active { opacity: 1; transform: none; pointer-events: auto; }
.qs .q { font-family: var(--serif); font-weight: 500; font-size: clamp(1.45rem, 2.6vw, 2.2rem); line-height: 1.4; letter-spacing: -0.005em; }
.qs footer { margin-top: 1.6rem; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }
.q-dots { display: flex; gap: 0.6rem; margin-top: 2.4rem; }
.q-dots button { width: 34px; height: 3px; background: rgba(11,23,29,0.18); transition: background 0.3s; border-radius: 2px; }
.q-dots button.active { background: var(--flame); }  /* touch: flame */
.q-dots button:hover { background: rgba(11,23,29,0.4); }

/* ---------- frames mosaic (full-bleed) ---------- */
#frames { padding-bottom: 0; }
.frames-band { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px; background: var(--paper); }
.frames-band .fr { flex: 1 1 clamp(170px, 23%, 470px); min-width: 0; aspect-ratio: 4 / 3; overflow: clip; position: relative; }
.frames-band .fr img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.frames-band .fr:hover img { transform: scale(1.045); }
.frames-band .fr figcaption {
  position: absolute; left: 1rem; bottom: 0.9rem; z-index: 2;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--white); text-shadow: 0 1px 10px rgba(7, 14, 18, 0.75);
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.frames-band .fr::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(7, 14, 18, 0.45), transparent 42%);
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.frames-band .fr:hover figcaption, .frames-band .fr:focus-within figcaption,
.frames-band .fr:hover::after, .frames-band .fr:focus-within::after { opacity: 1; }

/* ---------- location ---------- */
#location .grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
#location .media { overflow: clip; border-radius: 4px; position: relative; }
#location .media img { transition: transform 1.4s var(--ease); }
#location .media:hover img { transform: scale(1.04); }
#location .coords {
  position: absolute; left: 1.2rem; bottom: 1.1rem; z-index: 2;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.22em; color: var(--white);
  text-shadow: 0 1px 10px rgba(7,14,18,0.7);
}
#location .media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,14,18,0.38), transparent 40%); }
.dist { margin-top: 2.2rem; border-top: 1px solid var(--line-d); }
.dist li { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line-d); }
.dist .place { font-weight: 600; color: var(--mist); }
.dist .place small { display: block; font-size: 0.82rem; font-weight: 500; color: var(--mist-dim); margin-top: 0.15rem; }
.dist .time { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; color: var(--sea); white-space: nowrap; }

/* ---------- reserve / CTA ---------- */
#reserve { position: relative; min-height: 96svh; display: flex; align-items: center; overflow: clip; color: var(--white); }
#reserve .media { position: absolute; inset: -12% 0; z-index: 1; }
#reserve .media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
#reserve::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, rgba(7,14,18,0.82) 20%, rgba(7,14,18,0.42) 60%, rgba(7,14,18,0.3)); }
#reserve .wrap { position: relative; z-index: 3; }
#reserve .display { max-width: 9.5em; font-size: clamp(2.6rem, 6vw, 5.6rem); }
#reserve .lead { max-width: 30em; margin-top: 1.5rem; color: rgba(255,255,255,0.92); }
#reserve .cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }
#reserve .fine { margin-top: 2.6rem; font-size: 0.85rem; color: rgba(255,255,255,0.72); max-width: 44em; line-height: 1.7; }
#reserve .fine a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- footer ---------- */
#footer { background: var(--ink); color: var(--mist); border-top: 1px solid var(--line-d); }
#footer .top { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2.5rem, 6vw, 6rem); padding-block: clamp(3rem, 7vw, 5.5rem); }
#footer .wordmark { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1; letter-spacing: 0.01em; }
#footer .tag { margin-top: 1rem; color: var(--mist-dim); max-width: 26em; }
#footer .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
#footer .col h4 { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sea); margin-bottom: 1.1rem; }
#footer .col a { display: block; padding: 0.32rem 0; color: var(--mist-dim); transition: color 0.25s; font-size: 0.95rem; }
#footer .col a:hover { color: var(--white); }
#footer .legal {
  border-top: 1px solid var(--line-d); padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 0.8rem 2.4rem; align-items: center; justify-content: space-between;
  font-size: 0.8rem; color: var(--mist-dim);
}
#footer .legal a { text-decoration: underline; text-underline-offset: 3px; }
#footer .legal a:hover { color: var(--white); }

/* ---------- doc pages (privacy / credits / 404) ---------- */
.doc-main { background: var(--paper); color: var(--ink); min-height: 100vh; padding: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem)) 0 clamp(4rem, 8vw, 6rem); }
.doc { max-width: 46em; }
.doc h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.1; }
.doc h2 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin: 2.6rem 0 0.8rem; }
.doc p, .doc li { color: rgba(11,23,29,0.8); }
.doc p { margin-top: 1rem; }
.doc ul { margin-top: 1rem; padding-left: 1.2rem; list-style: disc; }
.doc li { margin-top: 0.5rem; }
.doc a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.doc .kicker { margin-bottom: 1.2rem; }
.doc-head-dark #header { background: rgba(11, 23, 29, 0.96); }
.doc-grid { display: grid; grid-template-columns: minmax(0, 46em) 1fr; gap: clamp(3rem, 6vw, 7rem); align-items: start; }
.doc-rail { position: sticky; top: calc(var(--header-h) + 2.2rem); display: grid; gap: 1.5rem; }
.doc-rail .ph { overflow: clip; border-radius: 4px; }
.doc-rail .facts { border-top: 1px solid var(--line-l); }
.doc-rail .facts li { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.72rem 0; border-bottom: 1px solid var(--line-l); font-size: 0.9rem; }
.doc-rail .facts .k { font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; color: rgba(11,23,29,0.55); padding-top: 0.2em; }
.doc-rail .facts .v { font-weight: 600; text-align: right; }
@media (max-width: 900px) { .doc-grid { display: block; } .doc-rail { position: static; margin-top: 3rem; max-width: 34rem; } }
.err-wrap { min-height: 100svh; display: flex; align-items: center; }
.err-num { font-family: var(--serif); font-weight: 600; font-size: clamp(6rem, 20vw, 14rem); line-height: 1; }
.err-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: clip; color: var(--white); }
.err-hero .media { position: absolute; inset: 0; z-index: 1; }
.err-hero .media img { width: 100%; height: 100%; object-fit: cover; }
.err-hero::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(7,14,18,0.8), rgba(7,14,18,0.4) 55%, rgba(7,14,18,0.28)); }
.err-hero .wrap { position: relative; z-index: 3; }
.err-hero .kicker { color: var(--sea); }

/* ---------- parallax base ---------- */
[data-plx] { will-change: transform; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .room .media { grid-column: 1 / 8; }
  .room .body { grid-column: 8 / 13; }
}
@media (max-width: 900px) {
  #nav { display: none; }
  /* HERO — never let the headline stack collide with the fixed header.
     Bottom-anchoring (flex-end) pulls a too-tall stack UP, sliding the kicker
     under the header (it overprinted the "XII · Residence Twelve" wordmark on
     phones). Top-anchor with header clearance and let the section grow so the
     overflow goes DOWNWARD (scroll), never up into the menu. */
  #hero, #hero.hero--depth { align-items: flex-start; }
  #hero .wrap { padding-top: calc(var(--header-h) + 1.6rem); padding-bottom: clamp(2rem, 6vh, 3.4rem); }
  #hero .display { margin-top: 0.9rem; }
  #hero .lead { margin-top: 1.1rem; }
  #manifesto .grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .room { grid-template-columns: 1fr; gap: 2rem; padding-block: 3rem; }
  .room .media, .room .body, .room.flip .media, .room.flip .body { grid-column: 1 / -1; }
  .room .media, .room.flip .media { padding: 0; }
  .room.flip .media { order: 0; }
  .room.flip .body { order: 1; }
  .room .media .float { right: 0.8rem; bottom: -1.6rem; width: 36%; border-width: 4px; }
  #manifesto .wide-view img { aspect-ratio: 3 / 2; }
  .room.flip .media .float { left: 0.8rem; }
  .amenity-grid { grid-template-columns: repeat(2, 1fr); }
  #reviews .grid { grid-template-columns: 1fr; }
  #reviews .score { position: static; }
  #location .grid { grid-template-columns: 1fr; }
  #footer .top { grid-template-columns: 1fr; }
  #scroll-cue { display: none; }
  .break { min-height: 74svh; }
}
@media (max-width: 560px) {
  :root { --header-h: 64px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .amenity-grid { grid-template-columns: 1fr; }
  /* hero stats read as tidy 2x2 tiles (value over label) instead of an
     uneven flex wrap that broke the star/number apart */
  #hero .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.3rem; }
  #hero .hs { flex-direction: column; align-items: flex-start; gap: 0.2rem; font-size: 0.72rem; }
  #hero .hs strong { font-size: 1.4rem; }
  .btn { padding: 0.95rem 1.7rem; font-size: 0.88rem; }
  /* full-width CTAs stack cleanly on the smallest phones */
  #hero .cta-row .btn { flex: 1 1 100%; }
}

/* ============================================================
   GUIDES — the Island Companion. Long-form local guides.
   Typography-led magazine reading. Reuses ink/paper/sea tokens.
   ============================================================ */

/* hub + article share a paper canvas that clears the fixed header */
.guide-main { background: var(--paper); color: var(--ink); }

/* ---------- breadcrumb ---------- */
.g-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(11,23,29,0.5); }
.g-crumb a { color: var(--teal); transition: color 0.25s; }
.g-crumb a:hover { color: var(--teal-deep); }
.g-crumb .sep { opacity: 0.5; }
.on-dark .g-crumb { color: rgba(234,240,237,0.6); }
.on-dark .g-crumb a { color: var(--sea); }

/* ---------- article hero ---------- */
.g-hero { position: relative; min-height: clamp(58vh, 62vh, 78vh); display: flex; align-items: flex-end; overflow: clip; color: var(--white); }
.g-hero .media { position: absolute; inset: 0; z-index: 1; }
.g-hero .media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.g-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to bottom, rgba(7,14,18,0.5) 0%, rgba(7,14,18,0) 34%),
    linear-gradient(to top, rgba(7,14,18,0.86) 0%, rgba(7,14,18,0.28) 48%, rgba(7,14,18,0) 74%);
}
.g-hero .wrap { position: relative; z-index: 3; width: 100%; padding-block: clamp(2.4rem, 6vh, 4.5rem) clamp(2.4rem, 5vh, 3.6rem); }
.g-hero .g-crumb { color: rgba(255,255,255,0.82); margin-bottom: 1.5rem; }
.g-hero .g-crumb a { color: var(--sea); }
.g-hero .kicker { color: var(--sea); text-shadow: 0 1px 3px rgba(7,14,18,0.9); }
.g-hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 5.2rem); line-height: 1.02; letter-spacing: -0.018em;
  max-width: 16em; margin-top: 1.2rem; text-shadow: 0 2px 30px rgba(7,14,18,0.4);
}
.g-stand { max-width: 40em; margin-top: 1.5rem; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.6; font-weight: 500; color: rgba(255,255,255,0.94); }
.g-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.24); }
.g-meta .m { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.86); }
.g-meta .m strong { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; letter-spacing: 0; color: var(--white); }

/* ---------- article shell ---------- */
.g-shell { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem); }
.g-col { max-width: 43rem; margin-inline: auto; }

/* ---------- in-this-guide ---------- */
.g-toc { border: 1px solid var(--line-l); border-radius: 5px; padding: clamp(1.4rem, 3vw, 2.1rem); background: rgba(255,255,255,0.5); margin-bottom: clamp(2.6rem, 5vw, 3.6rem); }
.g-toc h2 { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; letter-spacing: 0.02em; margin-bottom: 1rem; color: var(--ink); }
.g-toc ol { counter-reset: toc; display: grid; gap: 0.55rem; }
.g-toc li { counter-increment: toc; }
.g-toc a { display: flex; gap: 0.9rem; align-items: baseline; color: rgba(11,23,29,0.82); transition: color 0.2s; font-size: 0.98rem; }
.g-toc a::before { content: counter(toc, upper-roman) "."; font-family: var(--serif); color: var(--teal); font-size: 0.85rem; min-width: 2.4em; letter-spacing: 0.04em; }
.g-toc a:hover { color: var(--teal-deep); }

/* ---------- prose ---------- */
.prose { font-size: 1.09rem; line-height: 1.78; color: rgba(11,23,29,0.86); }
.prose > p { margin-top: 1.35rem; }
.prose > p:first-of-type { margin-top: 0; }
.prose .drop::first-letter {
  font-family: var(--serif); font-weight: 600; float: left;
  font-size: 3.7em; line-height: 0.78; padding: 0.05em 0.12em 0 0; color: var(--teal-deep);
}
.prose h2 {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.16; letter-spacing: -0.01em;
  margin-top: clamp(2.8rem, 6vw, 4rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--line-l);
}
.prose h2 .n { display: block; font-family: var(--sans); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.7rem; }
.prose h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.24; color: var(--ink); margin-top: 2.2rem; }
.prose h3 + p { margin-top: 0.7rem; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.2s; }
.prose a:hover { color: var(--teal); }
.prose ul, .prose ol { margin-top: 1.3rem; padding-left: 1.5rem; display: grid; gap: 0.6rem; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 1.5rem; }
.prose ul > li::before { content: ''; position: absolute; left: 0.15rem; top: 0.72em; width: 6px; height: 6px; background: var(--green-deep); border-radius: 50%; }  /* touch: tropical green */
.prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--teal); font-weight: 700; }
.prose li { padding-left: 0.2rem; }
.prose li strong { color: var(--ink); }

/* pull quote inside prose */
.g-quote { margin: clamp(2.4rem, 5vw, 3.4rem) 0; padding-left: clamp(1.2rem, 2.5vw, 1.8rem); border-left: 2px solid var(--teal); }
.g-quote p { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.32; letter-spacing: -0.006em; color: var(--ink); }
.g-quote cite { display: block; margin-top: 1rem; font-family: var(--sans); font-style: normal; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); }

/* callout — know before you go / local tip */
.g-callout { margin: clamp(2.2rem, 5vw, 3.2rem) 0; border: 1px solid var(--line-l); border-left: 3px solid var(--teal); border-radius: 5px; padding: clamp(1.4rem, 3vw, 2rem); background: rgba(12,110,158,0.05); }
.g-callout .lbl { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 0.7rem; }
.g-callout p { margin-top: 0.6rem; font-size: 1rem; color: rgba(11,23,29,0.85); }
.g-callout p:first-of-type { margin-top: 0; }
.g-callout ul { margin-top: 0.9rem; }

/* key facts strip */
.g-facts { margin: clamp(2.2rem, 5vw, 3rem) 0; border-top: 1px solid var(--line-l); }
.g-facts li { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line-l); }
.g-facts .k { font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.74rem; color: rgba(11,23,29,0.55); padding-top: 0.25em; }
.g-facts .v { font-weight: 600; text-align: right; }

/* figure + full-bleed break inside article */
.g-figure { margin: clamp(2.4rem, 5vw, 3.4rem) 0; }
.g-figure img { border-radius: 5px; width: 100%; }
.g-figure figcaption { margin-top: 0.8rem; font-size: 0.8rem; letter-spacing: 0.06em; color: rgba(11,23,29,0.55); font-weight: 600; }
.g-bleed { position: relative; margin: clamp(3rem, 7vw, 5rem) 0; height: clamp(46vh, 60vw, 66vh); overflow: clip; color: var(--white); display: flex; align-items: flex-end; }
.g-bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.g-bleed::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(7,14,18,0.6), rgba(7,14,18,0) 55%); }
.g-bleed figcaption { position: relative; z-index: 3; padding: 1.4rem clamp(16px, 3vw, 2.4rem); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(7,14,18,0.7); }

/* ---------- related guides ---------- */
.g-related { background: var(--ink); color: var(--mist); border-top: 1px solid var(--line-d); padding-block: clamp(3.5rem, 8vw, 6rem); }
.g-related .head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.g-related .head .kicker { color: var(--sea); }
.g-related .head a.all { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sea); }
.g-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.g-rel-card { display: block; background: var(--ink-2); border: 1px solid var(--line-d); border-radius: 6px; overflow: clip; transition: transform 0.4s var(--ease), border-color 0.4s var(--ease); }
.g-rel-card:hover { transform: translateY(-4px); border-color: rgba(143,193,184,0.5); }
.g-rel-card .ph { aspect-ratio: 16 / 10; overflow: clip; }
.g-rel-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.g-rel-card:hover .ph img { transform: scale(1.05); }
.g-rel-card .bd { padding: 1.3rem 1.4rem 1.6rem; }
.g-rel-card .k { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sea); }
.g-rel-card .t { font-family: var(--serif); font-weight: 500; font-size: 1.24rem; line-height: 1.2; color: var(--mist); margin-top: 0.6rem; }

/* ---------- back-to-residence CTA ---------- */
.g-back { position: relative; overflow: clip; color: var(--white); }
.g-back .media { position: absolute; inset: 0; z-index: 1; }
.g-back .media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.g-back::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(105deg, rgba(7,14,18,0.85) 22%, rgba(7,14,18,0.5) 62%, rgba(7,14,18,0.34)); }
.g-back .wrap { position: relative; z-index: 3; padding-block: clamp(4rem, 9vw, 7rem); }
.g-back .kicker { color: var(--sea); }
.g-back h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.04; letter-spacing: -0.012em; max-width: 12em; margin-top: 1.1rem; }
.g-back p { max-width: 34em; margin-top: 1.3rem; color: rgba(255,255,255,0.9); font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.g-back .cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.g-back .fine { margin-top: 2.4rem; font-size: 0.82rem; color: rgba(255,255,255,0.66); max-width: 46em; line-height: 1.7; }
.g-back .fine a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- guides hub ---------- */
.g-hub-intro { max-width: 40em; }
.g-hub-intro .lead { margin-top: 1.4rem; color: rgba(11,23,29,0.8); }
.g-group { margin-top: clamp(3rem, 7vw, 5rem); }
.g-group > .gt { display: flex; align-items: baseline; gap: 1rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.g-group > .gt h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--ink); }
.g-group > .gt .ln { flex: 1; height: 1px; background: var(--line-l); }
.g-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); }
.g-hub-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-l); border-radius: 7px; overflow: clip; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.g-hub-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px rgba(11,23,29,0.14); }
.g-hub-card .ph { aspect-ratio: 3 / 2; overflow: clip; position: relative; }
.g-hub-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.g-hub-card:hover .ph img { transform: scale(1.05); }
.g-hub-card .ph .num { position: absolute; top: 0.8rem; left: 1rem; z-index: 2; font-family: var(--serif); font-size: 0.95rem; letter-spacing: 0.16em; color: var(--white); text-shadow: 0 1px 12px rgba(7,14,18,0.7); }
.g-hub-card .bd { padding: 1.4rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.g-hub-card .k { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }
.g-hub-card .t { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.18; color: var(--ink); margin-top: 0.6rem; }
.g-hub-card .d { margin-top: 0.7rem; font-size: 0.94rem; line-height: 1.6; color: rgba(11,23,29,0.68); flex: 1; }
.g-hub-card .rd { margin-top: 1.2rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); display: inline-flex; align-items: center; gap: 0.5rem; }
.g-hub-card .rd .arr { transition: transform 0.3s var(--ease); }
.g-hub-card:hover .rd .arr { transform: translateX(4px); }

/* ---------- guides responsive ---------- */
@media (max-width: 900px) {
  .g-rel-grid { grid-template-columns: 1fr; }
  .g-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .g-hub-grid { grid-template-columns: 1fr; }
  .prose .drop::first-letter { font-size: 3.1em; }
  .g-meta { gap: 0.5rem 1.3rem; }
}

/* ============================================================
   ARTICLE — editorial two-column (prose + filled sticky media rail).
   Mirrors the proven .doc-grid pattern; fills the screen edge-to-edge,
   the 1fr rail always carries a large image so there is no dead band.
   ============================================================ */
.g-editorial { display: grid; grid-template-columns: minmax(0, 45rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.g-editorial > .prose { min-width: 0; }

.g-rail { position: sticky; top: calc(var(--header-h) + 1.4rem); display: grid; gap: 1.3rem; align-content: start; }
.g-rail .r-media { position: relative; overflow: clip; border-radius: 6px; }
.g-rail .r-media img { width: 100%; height: clamp(320px, 46vh, 540px); object-fit: cover; }
.g-rail .r-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,14,18,0.72), rgba(7,14,18,0) 56%); }
.g-rail .r-media .r-cap { position: absolute; left: 1rem; bottom: 0.9rem; z-index: 2; color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(7,14,18,0.8); }
.g-rail .r-card { border: 1px solid var(--line-l); border-radius: 6px; background: rgba(255,255,255,0.55); padding: clamp(1.2rem, 2.2vw, 1.6rem); }
.g-rail .r-card + .r-card { margin-top: 0; }
.g-rail .r-card h2 { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; letter-spacing: 0.01em; margin-bottom: 0.9rem; color: var(--ink); }
.g-rail .r-toc { counter-reset: rtoc; display: grid; gap: 0.5rem; }
.g-rail .r-toc a { display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.92rem; color: rgba(11,23,29,0.82); transition: color 0.2s; }
.g-rail .r-toc a::before { counter-increment: rtoc; content: counter(rtoc, decimal-leading-zero); font-family: var(--serif); color: var(--teal); font-size: 0.8rem; min-width: 1.6em; }
.g-rail .r-toc a:hover { color: var(--teal-deep); }
.g-rail .r-facts { border-top: 1px solid var(--line-l); }
.g-rail .r-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.62rem 0; border-bottom: 1px solid var(--line-l); font-size: 0.86rem; }
.g-rail .r-facts .k { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.68rem; color: rgba(11,23,29,0.55); padding-top: 0.25em; }
.g-rail .r-facts .v { font-weight: 600; text-align: right; }
.g-rail .r-cta { display: block; text-align: center; }
@media (max-width: 1020px) {
  .g-editorial { grid-template-columns: 1fr; gap: 2.4rem; }
  .g-rail { position: static; max-width: 42rem; }
}

/* section figure inside the reading column */
.prose .g-fig { margin: clamp(2.2rem, 4.5vw, 3rem) 0; }
.prose .g-fig .ph { aspect-ratio: 3 / 2; overflow: clip; border-radius: 6px; }
.prose .g-fig .ph img { width: 100%; height: 100%; object-fit: cover; }
.prose .g-fig figcaption { margin-top: 0.7rem; font-size: 0.78rem; letter-spacing: 0.06em; color: rgba(11,23,29,0.55); font-weight: 600; }

/* one true full-viewport image band, mid-to-late in the article */
.g-bleed-band { position: relative; height: clamp(46vh, 54vw, 66vh); overflow: clip; color: #fff; display: flex; align-items: flex-end; }
.g-bleed-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.g-bleed-band::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(7,14,18,0.62), rgba(7,14,18,0) 58%); }
.g-bleed-band figcaption { position: relative; z-index: 3; padding: 1.3rem var(--pad); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(7,14,18,0.7); }

/* medical disclaimer callout (health pages) */
.g-disclaimer { margin-top: clamp(2.6rem, 5vw, 3.6rem); border: 1px solid var(--line-l); border-left: 3px solid var(--teal-deep); border-radius: 6px; padding: clamp(1.3rem, 3vw, 1.9rem); background: rgba(11,23,29,0.035); }
.g-disclaimer .lbl { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 0.6rem; }
.g-disclaimer p { font-size: 0.92rem; color: rgba(11,23,29,0.72); margin-top: 0.5rem; }
.g-disclaimer p:first-of-type { margin-top: 0; }

/* FAQ */
.g-faq { margin-top: clamp(2.8rem, 6vw, 4rem); }
.g-faq > h2 { font-family: var(--serif); font-weight: 500; color: var(--ink); font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.16; margin-top: 0; padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--line-l); }
.g-faq .qa { border-bottom: 1px solid var(--line-l); padding: 1.25rem 0; }
.g-faq .qa .q { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; line-height: 1.3; color: var(--ink); }
.g-faq .qa .a { margin-top: 0.6rem; color: rgba(11,23,29,0.82); }

/* ---------- flat (screenshot/QA) mode ---------- */
body.flat #loader { display: none; }
body.flat .hi, body.flat .rv, body.flat .rv-group > * { opacity: 1 !important; transform: none !important; transition: none !important; }
body.flat #hero .media img { transform: scale(1.02); transition: none; }
body.flat .rbars .fl { transform: scaleX(var(--w)); transition: none; }
body.flat #scroll-cue .line::after { animation: none; }

/* ---------- motion-first fallback ----------
   boot.js sets <html class="m-full"> by DEFAULT and deliberately IGNORES the OS
   prefers-reduced-motion signal (that signal froze the whole page for Dan, who
   keeps reduce ON). The static/composed page shows whenever motion is NOT full:
   the Calm toggle (html.m-calm) OR JS disabled (neither class present). app.js
   and fx.js gate their motion on the same class. */
html:not(.m-full) { scroll-behavior: auto; }
html:not(.m-full) .hi,
html:not(.m-full) .rv,
html:not(.m-full) .rv-group > * { opacity: 1 !important; transform: none !important; filter: none !important; }
html:not(.m-full) #hero .media img { transform: none !important; }
html:not(.m-full) [data-plx] { transform: none !important; }
html:not(.m-full) #loader { display: none; }
html:not(.m-full) .quote-stack { display: block; }
html:not(.m-full) .quote-stack .qs { position: static; grid-area: auto; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 2rem; }
html:not(.m-full) .q-dots { display: none; }
html:not(.m-full) .rbar .fl { transform: scaleX(var(--w)) !important; }
html:not(.m-full) .dh-title,
html:not(.m-full) .vd-word,
html:not(.m-full) .vid-depth .vd-layer { transform: none !important; }
/* explicit Calm: settle any long transitions so nothing sits mid-move */
html.m-calm *, html.m-calm *::before, html.m-calm *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }

/* ============================================================
   DESIGNER FEATURES (2026-08-11)
   Lightbox gallery · scroll progress · back-to-top ·
   kinetic hero headline · nav-band hardening.
   Additive + progressive; global reduced-motion rule above
   already neutralises these transitions.
   ============================================================ */

/* ---- nav band: keep the wordmark on one line; free space 901–1160px ---- */
.brand { white-space: nowrap; }
@media (max-width: 1160px) and (min-width: 901px) {
  .brand .name { display: none; }
  #nav { gap: clamp(1rem, 1.7vw, 1.9rem); }
  #nav .btn { padding: 0.66rem 1.25rem; }
}

/* ---- scroll progress bar ---- */
#progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 260;
  background: linear-gradient(90deg, var(--teal-deep), var(--sea), var(--green));  /* ocean → surf → tropics */
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* ---- back to top ---- */
#to-top {
  position: fixed; right: clamp(16px, 2.4vw, 34px); bottom: clamp(16px, 2.4vw, 34px);
  z-index: 190; width: 48px; height: 48px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,23,29,0.72); color: var(--mist);
  border: 1px solid rgba(234,240,237,0.28); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(14px) scale(0.9); pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
#to-top svg { width: 18px; height: 18px; }
#to-top.show { opacity: 1; transform: none; pointer-events: auto; }
#to-top:hover { background: var(--flame); border-color: var(--flame); color: var(--white); }  /* touch: flame */

/* ---- lightbox gallery ---- */
.lb-able { cursor: zoom-in; }
body.lb-open { overflow: hidden; }
#lightbox {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  background: rgba(6,12,16,0.93); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0s 0.4s;
  padding: clamp(16px, 4vw, 64px);
}
#lightbox.open { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease); }
#lightbox .lb-stage { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
#lightbox img {
  max-width: min(1280px, 92vw); max-height: 82vh; width: auto; height: auto; border-radius: 4px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.5); opacity: 0; transform: scale(0.985);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
#lightbox.ready img { opacity: 1; transform: none; }
#lightbox .lb-cap { color: var(--mist); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; max-width: 44em; line-height: 1.5; }
#lightbox .lb-count { color: var(--mist-dim); font-weight: 800; margin-left: 0.6rem; }
#lightbox .lb-btn {
  position: absolute; z-index: 2; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
#lightbox .lb-btn:hover { background: rgba(255,255,255,0.2); border-color: var(--sea); }
#lightbox .lb-btn svg { width: 20px; height: 20px; }
#lightbox .lb-prev { left: clamp(8px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
#lightbox .lb-next { right: clamp(8px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
#lightbox .lb-close { top: clamp(14px, 3vw, 30px); right: clamp(14px, 3vw, 30px); width: 46px; height: 46px; }
@media (max-width: 640px) {
  #lightbox .lb-prev { left: 12px; top: auto; bottom: 10px; transform: none; }
  #lightbox .lb-next { right: 12px; top: auto; bottom: 10px; transform: none; }
}

/* ---- hero headline kinetic word cascade (flash-free: the .hi class keeps
       the H1 at opacity:0 from first paint, so words are wrapped while hidden) ---- */
#hero h1.kin .kin-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.04em; }
#hero h1.kin .kin-wi { display: inline-block; transform: translateY(0.92em); transition: transform 1s var(--ease); }
body.loaded #hero h1.kin .kin-wi { transform: none; }

/* ============================================================
   MOTION KIT (2026-08-15)  —  next-gen motion layer.
   Lenis smooth scroll + GSAP/ScrollTrigger depth hero, ATLANTIC word
   band, velocity marquee, magnetic buttons, cinematic reveals,
   cross-page view transitions. Gated on <html class="m-full">.
   ============================================================ */

/* ---- cross-page view transitions (same-origin nav fade) ---- */
@view-transition { navigation: auto; }
html.m-calm::view-transition-group(*),
html:not(.m-full)::view-transition-group(*) { animation-duration: 0.001s; }
::view-transition-old(root) { animation: vt-out 0.42s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.52s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-1.4vh); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(1.8vh); } }

/* ---- depth hero: photo drifts, headline rises at a different rate ---- */
#hero.hero--depth { min-height: 100svh; }
#hero .dh-photo { will-change: transform; }
#hero .dh-title { position: relative; will-change: transform; }
#hero .hero-inner { will-change: opacity; }
/* the headline leads; slightly tighter measure for the light serif */
#hero .display { max-width: 12.5em; }

/* ---- cinematic reveals (upgrade the plain fade-up under full motion) ---- */
/* Compositor-only reveals: translate + scale + opacity are GPU-cheap.
   Animated filter:blur() was re-rasterizing 30+ elements per scroll frame
   (the "slow/clunky" scroll) — removed while keeping the cinematic rise. */
html.m-full .rv {
  transform: translateY(46px) scale(0.986);
  transition: opacity 1.05s var(--ease-out), transform 1.15s var(--ease-out);
}
html.m-full .rv.in { transform: none; }
html.m-full .rv-group > * {
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease-out), transform 0.95s var(--ease-out);
}
html.m-full .rv-group.in > * { transform: none; }
/* image containers get a soft mask-wipe as their reveal lands */
html.m-full .room .media .main,
html.m-full #manifesto .detail-img,
html.m-full #location .media,
html.m-full .g-figure .ph { clip-path: inset(0 0 12% 0); transition: clip-path 1.2s var(--ease-out); }
html.m-full .rv.in .main,
html.m-full .rv.in.detail-img,
html.m-full .rv.in .g-fig .ph,
html.m-full .rv.in.media,
html.m-full #manifesto .rv.in .detail-img,
html.m-full #location .media.rv.in { clip-path: inset(0 0 0 0) !important; }
html.m-full #manifesto .wide-view .ph { clip-path: inset(0 0 12% 0); transition: clip-path 1.2s var(--ease-out); }
html.m-full #manifesto .wide-view.rv.in .ph { clip-path: inset(0 0 0 0); }

/* ---- ATLANTIC word band (kinetic type over ocean) ---- */
.vid-depth {
  position: relative; overflow: clip; color: var(--white);
  height: clamp(62vh, 78vw, 88vh); min-height: 440px; max-height: 920px;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.vid-depth .vd-layer {
  position: absolute; left: 0; right: 0; top: -6%; width: 100%; height: 112%;
  object-fit: cover; object-position: center 46%; z-index: 1; will-change: transform; max-width: none;
}
.vid-depth::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(7,14,18,0.42), rgba(7,14,18,0.10) 34%, rgba(7,14,18,0.52));
}
.vid-depth .vd-word {
  position: relative; z-index: 3; font-family: var(--serif); font-weight: 400;
  font-size: clamp(4.2rem, 21vw, 20rem); line-height: 0.9; letter-spacing: -0.02em;
  color: rgba(255,255,255,0.96); white-space: nowrap; will-change: transform;
  text-shadow: 0 2px 40px rgba(7,14,18,0.4);
}
.vid-depth .vd-note {
  position: absolute; z-index: 3; right: var(--pad); bottom: 1.6rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.82); text-shadow: 0 1px 10px rgba(7,14,18,0.7);
}
.vid-depth .vd-eyebrow {
  position: absolute; z-index: 3; left: var(--pad); top: calc(var(--header-h) + 1.4rem);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--sea); text-shadow: 0 1px 10px rgba(7,14,18,0.7);
}

/* ---- velocity-reactive marquee ---- */
.marquee {
  position: relative; overflow: hidden; background: var(--ink); color: var(--mist);
  border-block: 1px solid var(--line-d); padding-block: 1.15rem;
}
.marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; }
/* compositor-thread loop: fx.js doubles the track, so -50% is one seamless
   cycle. Runs off the main thread — no jank even on low-power machines. */
@keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html.m-full .marquee--css .marquee__track { animation: marquee-x 46s linear infinite; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 1.5rem; padding-inline: 1.5rem;
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.9rem);
  letter-spacing: -0.005em; color: var(--mist);
}
.marquee__item::after { content: '·'; color: var(--sea); font-size: 1.1em; }
.marquee--paper { background: var(--paper); color: var(--ink); border-color: var(--line-l); }
.marquee--paper .marquee__item { color: var(--ink); }

/* ---- motion Full/Calm toggle ---- */
.motion-toggle {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mist-dim); transition: color 0.25s var(--ease);
}
.motion-toggle:hover { color: var(--mist); }
.motion-toggle .dot {
  width: 30px; height: 16px; border-radius: 999px; position: relative;
  background: rgba(234,240,237,0.18); border: 1px solid var(--line-d); transition: background 0.3s var(--ease);
}
.motion-toggle .dot::after {
  content: ''; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--sea); transition: transform 0.3s var(--ease);
}
html.m-calm .motion-toggle .dot::after { transform: translateX(14px); background: var(--mist-dim); }
.motion-toggle .lbl-full { display: inline; }
.motion-toggle .lbl-calm { display: none; }
html.m-calm .motion-toggle .lbl-full { display: none; }
html.m-calm .motion-toggle .lbl-calm { display: inline; }
#mobile-menu .motion-toggle { margin-top: 1.8rem; color: var(--mist-dim); }

/* ---- Calm keeps the layout of the new components intact ---- */
html:not(.m-full) .marquee__track { transform: none !important; white-space: normal; flex-wrap: wrap; }
html:not(.m-full) .vid-depth { height: auto; min-height: 52vh; padding-block: clamp(3rem,10vw,6rem); }

@media (max-width: 640px) {
  .vid-depth .vd-word { font-size: clamp(3.4rem, 26vw, 8rem); }
  .marquee__item { font-size: 1.15rem; }
}

/* ============================================================
   v19 (2026-09-05) - next-generation UI layer
   Mega menu with image cards - overlay accordion - sticky book bar -
   footer v2 + Cavmir credit band - guides hub index layout -
   site pages (residence, amenities, gallery, reviews, FAQ, tiles) -
   glitch fixes (hero crumb under header, location dead band).
   Additive: everything below layers on the v18 system above.
   ============================================================ */

/* ---- fixes ---- */
/* article/hub heroes are bottom-anchored (flex-end); a tall text stack was
   sliding the breadcrumb UP under the fixed header at 1440x900. Reserve the
   header band at the top so overflow only ever grows the section downward. */
.g-hero .wrap { padding-top: calc(var(--header-h) + 1.6rem); }
/* location: the aerial sat centred beside a taller text column, leaving an
   empty band above and below it. Stretch the photo to the column height. */
#location .grid { align-items: stretch; }
#location .media { display: flex; min-height: 0; }
#location .media img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
@media (max-width: 900px) { #location .media img { min-height: 0; } }
/* drop cap: the floated first letter (line-height .78) overflowed above its paragraph into the
   heading box (text-overlap gate, 1024 + 390). Give the opening paragraph room under its heading
   and keep the letter inside its own line box. */
.prose h2 + p.drop, .prose h2 + p:first-of-type { margin-top: 1.1rem; }
.prose .drop::first-letter { line-height: 0.86; padding-top: 0.02em; }
/* balcony quote break: max-width was 17em of the 16px blockquote (272px), so the
   quote wrapped one to three words per line. Size it against the quote itself. */
.break blockquote { max-width: 46rem; }
/* solid header — deep-ocean ink */
#header.solid { background: rgba(3, 32, 47, 0.94); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-d); }
/* footer column headings are no longer <h4> (heading-order gate) */
#footer .col .col-h { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sea); margin-bottom: 1.1rem; }

/* ---- overlay: featured menu (portfolio "cavmir-style": one big image + large serif links) ---- */
/* many heads + sub-rows -> anchor to the top so the first head never clips */
#mobile-menu .ov2__nav { justify-content: flex-start; padding-top: clamp(64px, 8vh, 104px); }
.ov2__list { gap: clamp(6px, 1.2vh, 18px); }
.ov2__grp { display: flex; flex-direction: column; gap: 0.1rem; }
.ov2__grp.is-active > .ov2__head { color: var(--sea); }
.ov2__links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0.25rem 0 0.2rem; opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s var(--ease) calc(var(--d, 0s) + 0.1s), transform 0.5s var(--ease) calc(var(--d, 0s) + 0.1s); }
body.menu-open .ov2__links { opacity: 1; transform: none; }
.ov2__links a { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.03em; color: var(--mist-dim); transition: color 0.25s var(--ease); }
.ov2__links a:hover, .ov2__links a:focus-visible { color: var(--sea); }
/* the base file staggers `.ov2__list .ov2__head:nth-child(1)` (all heads are the 1st child of
   their group, so it would flatten every head to one delay). Make the head inherit the group's
   staggered --d instead; the group rules below drive the cascade (head + sub-links together). */
.ov2__list .ov2__head:nth-child(1) { --d: inherit; }
.ov2__list > .ov2__grp:nth-child(1) { --d: 0.12s; } .ov2__list > .ov2__grp:nth-child(2) { --d: 0.17s; }
.ov2__list > .ov2__grp:nth-child(3) { --d: 0.22s; } .ov2__list > .ov2__grp:nth-child(4) { --d: 0.27s; }
.ov2__list > .ov2__grp:nth-child(5) { --d: 0.32s; } .ov2__list > .ov2__grp:nth-child(6) { --d: 0.37s; }
.ov2__list > .ov2__grp:nth-child(7) { --d: 0.42s; } .ov2__list > .ov2__grp:nth-child(8) { --d: 0.47s; }
@media (max-width: 900px) { .ov2__head { font-size: clamp(1.7rem, 6vw, 2.4rem); } .ov2__links { gap: 0.3rem 0.9rem; } }

/* ---- social row (placeholder icons until the owner sends real handles) ---- */
.social { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.social__lbl { font-family: var(--sans); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sea); }
.social__row { display: inline-flex; gap: 10px; }
.soc { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-d); color: var(--mist); transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); }
a.soc:hover, a.soc:focus-visible { color: var(--ink); background: var(--sea); border-color: var(--sea); }
.soc--soon { color: var(--mist-dim); opacity: 0.6; cursor: default; }
.social--footer { margin-top: 1.7rem; }
.social--overlay { margin-bottom: 0.3rem; }
.social--overlay .social__lbl { color: var(--mist-dim); }

/* ---- sticky mobile book bar ---- */
#bookbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 185; display: none; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem var(--pad) calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(3, 32, 47, 0.94); backdrop-filter: blur(14px); border-top: 1px solid var(--line-d); color: var(--mist);
  transform: translateY(110%); transition: transform 0.45s var(--ease); }
#bookbar .bb-rate { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--mist-dim); line-height: 1.3; }
#bookbar .bb-rate strong { display: block; color: var(--white); font-family: var(--serif); font-size: 1.1rem; font-weight: 400; letter-spacing: 0; }
#bookbar .btn { padding: 0.78rem 1.25rem; font-size: 0.74rem; flex: none; }
@media (max-width: 900px) {
  #bookbar { display: flex; }
  #bookbar.show { transform: none; }
  body.menu-open #bookbar, body.lb-open #bookbar { transform: translateY(110%); }
  #to-top { bottom: 86px; }
  #footer .tm { padding-bottom: 76px; }
}

/* ---- footer v2 ---- */
#footer .top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
#footer .cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
#footer .ft-rate { margin-top: 1.5rem; color: var(--mist-dim); font-size: 0.9rem; }
#footer .ft-rate strong { color: var(--white); font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
#footer .ft-cta { margin-top: 1.3rem; }
#footer .tm { padding: 0 0 1.6rem; font-size: 0.74rem; line-height: 1.7; color: rgba(147, 174, 188, 0.78); max-width: 92em; }
#footer .legal span a { color: var(--mist-dim); }
@media (max-width: 900px) { #footer .top { grid-template-columns: 1fr; } #footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { #footer .cols { grid-template-columns: 1fr; } }

/* ---- Cavmir credit band (portfolio standard: real wordmark, never retyped) ---- */
.cavband { display: flex; align-items: center; justify-content: center; gap: 18px 26px; flex-wrap: wrap;
  margin: clamp(2.5rem, 5vw, 4rem) 0 1.4rem; padding: 22px clamp(16px, 2vw, 32px);
  border: 1px solid var(--line-d); border-radius: 4px; color: var(--mist-dim);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease); }
.cavband:hover { border-color: var(--sea); background: rgba(69, 182, 232, 0.06); }
.cavband__k { font-family: var(--sans); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sea); }
.cavband__mk { width: clamp(130px, 14vw, 190px); height: auto; display: block; opacity: 0.96; }
.cavband__t { font-size: 0.86rem; letter-spacing: 0.02em; color: var(--mist-dim); }
.cavband .arr { display: inline-block; transition: transform 0.4s var(--ease); }
.cavband:hover .arr { transform: translateX(4px); }
@media (max-width: 600px) { .cavband { flex-direction: column; gap: 12px; text-align: center; } }

/* anchors that sit under a sticky chips bar clear both the header and the bar */
.g-group, .faq-grp { scroll-margin-top: calc(var(--header-h) + 64px); }
/* 901-1160px: six heads + Reserve + Menu share the band with the mark */
@media (max-width: 1160px) and (min-width: 901px) {
  #nav a.nl { font-size: 0.72rem; letter-spacing: 0.08em; }
  #nav { gap: clamp(0.7rem, 1.5vw, 1.4rem); }
  #nav .btn { padding: 0.6rem 1.05rem; }
}

/* ---- chips (hub jump bar, gallery + FAQ filters) ---- */
.chips-bar { position: sticky; top: var(--header-h); z-index: 60; background: rgba(238, 243, 246, 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-l); }
.chips-bar .wrap { display: flex; gap: 0.5rem; overflow-x: auto; padding-block: 0.75rem; scrollbar-width: none; }
.chips-bar .wrap::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 1.05rem; border-radius: 999px;
  border: 1px solid rgba(3, 32, 47, 0.22); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); background: transparent; white-space: nowrap; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.chip:hover, .chip[aria-pressed="true"] { background: var(--ink); color: var(--mist); border-color: var(--ink); }
.chip .cnt { font-family: var(--serif); font-size: 0.92rem; letter-spacing: 0; color: var(--teal); }
.chip:hover .cnt, .chip[aria-pressed="true"] .cnt { color: var(--sea); }

/* ---- guides hub: index layout (sticky photo + numbered list; no card holes) ---- */
.g-group .gt .cnt { font-family: var(--serif); color: var(--teal); font-size: 1rem; letter-spacing: 0.06em; }
.g-group__blurb { max-width: 48em; margin: -0.4rem 0 1.8rem; color: rgba(3, 32, 47, 0.66); font-size: 1rem; line-height: 1.6; }
.g-group .gt .gl { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
.g-index { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.g-index__media { position: sticky; top: calc(var(--header-h) + 4.6rem); }
.g-index__media .ph { position: relative; aspect-ratio: 4 / 3; overflow: clip; border-radius: 6px; background: var(--ink-2); }
.g-index__media .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-index__media .cap { margin-top: 0.8rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(3, 32, 47, 0.55); }
.g-index__list { border-top: 1px solid var(--line-l); }
.g-ix { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-l); transition: background 0.3s var(--ease), padding-left 0.3s var(--ease); }
.g-ix:hover, .g-ix:focus-visible { padding-left: 0.6rem; background: rgba(12, 110, 158, 0.05); }
.g-ix .n { font-family: var(--serif); color: var(--teal); font-size: 1rem; letter-spacing: 0.06em; padding-top: 0.25em; }
.g-ix .k { display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }
.g-ix .t { display: block; font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.42rem); line-height: 1.2; color: var(--ink); margin-top: 0.35rem; }
.g-ix .d { display: block; font-size: 0.9rem; line-height: 1.55; color: rgba(3, 32, 47, 0.66); margin-top: 0.4rem; max-width: 46em; }
.g-ix .arr { font-family: var(--serif); color: var(--teal); font-size: 1.3rem; transition: transform 0.3s var(--ease); padding-top: 0.05em; }
.g-ix:hover .arr { transform: translateX(5px); }
@media (max-width: 900px) {
  .g-index { grid-template-columns: 1fr; }
  .g-index__media { position: static; }
  .g-index__media .ph { aspect-ratio: 16 / 9; }
  .g-ix { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
}

/* ---- image tiles (stays hub, plan hub, home stays strip) ---- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.7rem, 1.4vw, 1.3rem); }
.tile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: clip; background: var(--ink-2); color: var(--white); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.tile:hover img, .tile:focus-visible img { transform: scale(1.05); }
/* text sits over bright photographs: a full-height tint under the bottom gradient keeps the
   kicker and title legible wherever they land */
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(3, 32, 47, 0.94) 0%, rgba(3, 32, 47, 0.58) 45%, rgba(3, 32, 47, 0.24) 100%); }
.tiles--4 .tile { aspect-ratio: 1 / 1; }
.tile .bd { position: absolute; left: clamp(1rem, 2vw, 1.6rem); right: clamp(1rem, 2vw, 1.6rem); bottom: clamp(1rem, 2vw, 1.5rem); z-index: 2; }
.tile .k { display: block; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sea); }
.tile .t { display: block; font-family: var(--serif); font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1.1; margin-top: 0.5rem; text-shadow: 0 1px 14px rgba(3, 32, 47, 0.5); }
.tile .d { display: block; font-size: 0.88rem; line-height: 1.5; color: rgba(255, 255, 255, 0.84); margin-top: 0.45rem; max-width: 30em; }
.tile .rd { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); }
.tile .rd .arr { transition: transform 0.3s var(--ease); }
.tile:hover .rd .arr { transform: translateX(4px); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tiles, .tiles--4 { grid-template-columns: 1fr; } .tile { aspect-ratio: 3 / 2; } }

/* ---- site pages: shared ---- */
.site-page .g-hero.short { min-height: clamp(48vh, 54vh, 64vh); }
.site-page .g-hero h1 { max-width: 14em; }
.site-page .prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.site-intro { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 4vw, 3rem); }
.site-intro .g-editorial > .prose { font-size: 1.06rem; }
.site-band { padding-block: clamp(2.5rem, 6vw, 5rem); }
.site-band .bh { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem 2rem; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.site-band .bh h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.1; color: var(--ink); }
.site-band .bh .sub { font-size: 0.92rem; color: rgba(3, 32, 47, 0.62); max-width: 40em; }
.on-dark.site-band .bh h2 { color: var(--mist); }
.on-dark.site-band .bh .sub { color: var(--mist-dim); }

/* ---- residence page ---- */
.sleep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-l); border-block: 1px solid var(--line-l); }
.sleep { background: var(--paper); padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1rem, 2vw, 1.8rem); }
.sleep .n { font-family: var(--serif); color: var(--teal); font-size: 0.95rem; letter-spacing: 0.22em; }
.sleep .t { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.7rem); margin-top: 0.6rem; color: var(--ink); }
.sleep .d { margin-top: 0.5rem; font-size: 0.92rem; color: rgba(3, 32, 47, 0.68); line-height: 1.55; }
.incl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem 2rem; margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.incl li { position: relative; padding-left: 1.3rem; font-size: 0.95rem; color: rgba(3, 32, 47, 0.84); line-height: 1.5; }
.incl li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--green-deep); }
@media (max-width: 900px) { .sleep-grid { grid-template-columns: 1fr; } .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .incl { grid-template-columns: 1fr; } }

/* ---- amenities page ---- */
.amen-grp { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); gap: clamp(1.4rem, 3vw, 3rem); padding-block: clamp(2rem, 4vw, 3.2rem); border-top: 1px solid var(--line-l); }
.amen-grp:first-of-type { border-top: 0; }
.amen-grp .gh { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.amen-grp .gh h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.12; color: var(--ink); }
.amen-grp .gh p { margin-top: 0.7rem; font-size: 0.92rem; color: rgba(3, 32, 47, 0.64); max-width: 26em; line-height: 1.6; }
.amen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-l); border: 1px solid var(--line-l); border-radius: 6px; overflow: clip; }
.amen { background: var(--paper); padding: 1.1rem 1.25rem; }
.amen:last-child:nth-child(odd) { grid-column: span 2; }
.amen__t { font-weight: 700; color: var(--ink); font-size: 0.96rem; }
.amen__d { margin-top: 0.25rem; font-size: 0.86rem; line-height: 1.55; color: rgba(3, 32, 47, 0.64); }
@media (max-width: 900px) { .amen-grp { grid-template-columns: 1fr; } .amen-grp .gh { position: static; } }
@media (max-width: 560px) { .amen-grid { grid-template-columns: 1fr; } .amen:last-child:nth-child(odd) { grid-column: auto; } }

/* ---- gallery page ---- */
.gal { --cols: 3; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.gal__item { grid-column: span 2; position: relative; aspect-ratio: 4 / 3; overflow: clip; border-radius: 3px; background: var(--ink-2); margin: 0; }
.gal__item.span3 { grid-column: span 3; }
.gal__item.span6 { grid-column: span 6; aspect-ratio: 21 / 9; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gal__item:hover img { transform: scale(1.035); }
.gal__item figcaption { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.8rem; z-index: 2; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--white); text-shadow: 0 1px 10px rgba(3, 32, 47, 0.85); opacity: 0; transition: opacity 0.35s var(--ease); }
.gal__item::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(3, 32, 47, 0.5), transparent 45%); opacity: 0; transition: opacity 0.35s var(--ease); }
.gal__item:hover figcaption, .gal__item:hover::after { opacity: 1; }
/* the hover overlay and caption must never intercept the click that opens the lightbox */
.gal__item::after, .gal__item figcaption { pointer-events: none; }
.gal__item[hidden] { display: none; }
@media (max-width: 1100px) { .gal { --cols: 2; } .gal__item { grid-column: span 3; } .gal__item.span3 { grid-column: span 6; aspect-ratio: 16 / 9; } }
@media (max-width: 560px) { .gal { --cols: 1; } .gal__item, .gal__item.span3, .gal__item.span6 { grid-column: span 6; aspect-ratio: 4 / 3; } }

/* ---- reviews page ---- */
.rvw-head { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.rvw-score .big { font-family: var(--serif); font-weight: 400; font-size: clamp(5rem, 12vw, 9.5rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--ink); }
.rvw-score .stars { margin-top: 0.9rem; color: var(--teal); font-size: 1.15rem; letter-spacing: 0.32em; }
.rvw-score .src { margin-top: 0.8rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(3, 32, 47, 0.55); }
.rvw-score .rbars { margin-top: 2rem; }
.rvw-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.rvw-tags .tag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--line-l); font-size: 0.78rem; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, 0.5); }
.rvw-tags .tag .c { font-family: var(--serif); color: var(--teal); }
.rvw-intro .lead { color: rgba(3, 32, 47, 0.86); }
.rvw-intro p + p { margin-top: 1rem; }
.rvw-intro .fine { margin-top: 1.4rem; font-size: 0.86rem; color: rgba(3, 32, 47, 0.6); line-height: 1.6; }
.rvw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: clamp(3rem, 6vw, 5rem); }
.rvw { border: 1px solid var(--line-l); border-radius: 6px; background: rgba(255, 255, 255, 0.6); padding: clamp(1.3rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; }
.rvw:last-child:nth-child(odd) { grid-column: span 2; }
.rvw__top { display: flex; align-items: center; gap: 0.9rem; }
.rvw__av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: var(--paper-2); display: grid; place-items: center;
  font-family: var(--serif); color: var(--teal-deep); font-size: 1.2rem; }
.rvw__who strong { display: block; font-weight: 700; color: var(--ink); }
.rvw__who span { display: block; font-size: 0.72rem; color: rgba(3, 32, 47, 0.55); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-top: 0.15rem; }
.rvw__stars { margin-left: auto; color: var(--teal); letter-spacing: 0.14em; font-size: 0.82rem; white-space: nowrap; }
.rvw__txt { margin-top: 1rem; color: rgba(3, 32, 47, 0.85); line-height: 1.7; }
.rvw__txt p + p { margin-top: 0.6rem; }
@media (max-width: 900px) { .rvw-head { grid-template-columns: 1fr; } .rvw-grid { grid-template-columns: 1fr; } .rvw:last-child:nth-child(odd) { grid-column: auto; } }

/* ---- FAQ accordions (FAQ page, home teaser, stay pages) ---- */
.faq-grp { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); }
.faq-grp:first-child { margin-top: 0; }
.faq-grp > h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.55rem, 2.6vw, 2.15rem); line-height: 1.15; color: var(--ink); margin: 0 0 0.4rem; padding: 0; border: 0; }
.faq-grp > h2 .n { display: block; font-family: var(--sans); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.6rem; }
details.faq { border-bottom: 1px solid var(--line-l); }
details.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; padding: 1.05rem 0;
  font-family: var(--serif); font-size: clamp(1.08rem, 1.55vw, 1.3rem); line-height: 1.32; color: var(--ink); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; font-family: var(--serif); color: var(--teal); font-size: 1.5rem; line-height: 1; flex: none; transition: transform 0.3s var(--ease); }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq summary:hover { color: var(--teal-deep); }
details.faq .a { padding: 0 0 1.3rem; color: rgba(3, 32, 47, 0.82); max-width: 54em; line-height: 1.7; }
details.faq .a p + p { margin-top: 0.7rem; }
details.faq .a a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
details.faq .a ul { margin-top: 0.6rem; padding-left: 1.1rem; list-style: disc; }
details.faq .a li { margin-top: 0.3rem; }
.on-dark details.faq { border-color: var(--line-d); }
.on-dark details.faq summary { color: var(--mist); }
.on-dark details.faq .a { color: var(--mist-dim); }
.on-dark details.faq .a a { color: var(--sea); }

/* ---- home additions ---- */
#stays .tiles { margin-top: 0; }
#companion .comp-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
#companion .comp-h { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--ink); margin-bottom: 1rem; }
#companion .more { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-deep); }
#companion .more .arr { transition: transform 0.3s var(--ease); }
#companion .more:hover .arr { transform: translateX(4px); }
@media (max-width: 900px) { #companion .comp-grid { grid-template-columns: 1fr; } }

/* ---- doc pages: rail image fills, CTA ---- */
.doc-rail .ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.doc .toc { margin-top: 1.4rem; padding-left: 1.2rem; list-style: decimal; }
.doc .toc li { margin-top: 0.35rem; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: 0.92rem; }
.doc th, .doc td { text-align: left; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--line-l); vertical-align: top; }
.doc th { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(3, 32, 47, 0.55); }

/* ---- wellness hub ---- */
.well-feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; border-radius: 8px; overflow: clip;
  background: var(--ink-2); color: var(--mist); margin-bottom: clamp(2.2rem, 4vw, 3.6rem); }
.well-feature .ph { position: relative; min-height: 300px; overflow: clip; }
.well-feature .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.well-feature:hover .ph img { transform: scale(1.04); }
.well-feature .bd { padding: clamp(1.6rem, 3.2vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.well-feature .bd .k { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sea); }
.well-feature .bd h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.7vw, 2.3rem); line-height: 1.12; color: var(--white); margin: 0.7rem 0 0.6rem; }
.well-feature .bd .d { color: var(--mist-dim); line-height: 1.6; font-size: 0.95rem; }
.well-feature .bd .rd { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.3rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); }
.well-feature .bd .rd .arr { transition: transform 0.3s var(--ease); }
.well-feature:hover .bd .rd .arr { transform: translateX(4px); }
.well-grp { margin-top: clamp(2.6rem, 5vw, 4rem); scroll-margin-top: calc(var(--header-h) + 1rem); }
.well-grp:first-of-type { margin-top: 0; }
.well-grp .bh { margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem); }
@media (max-width: 760px) { .well-feature { grid-template-columns: 1fr; } .well-feature .ph { min-height: 0; aspect-ratio: 16 / 10; } }

/* ---- journal (blog) ---- */
.jr-list { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.4rem); }
.jr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.4rem); }
.jr-card { display: flex; flex-direction: column; border: 1px solid var(--line-l); border-radius: 8px; overflow: clip; background: rgba(255, 255, 255, 0.6);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); }
.jr-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(3, 32, 47, 0.5); border-color: var(--line-d); }
.jr-card .ph { display: block; aspect-ratio: 3 / 2; overflow: clip; background: var(--ink-2); }
.jr-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.jr-card:hover .ph img { transform: scale(1.04); }
.jr-card .bd { display: flex; flex-direction: column; flex: 1; padding: clamp(1.1rem, 1.8vw, 1.5rem); }
.jr-meta { display: flex; align-items: center; gap: 0.7rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(3, 32, 47, 0.5); margin-bottom: 0.7rem; flex-wrap: wrap; }
.jr-cat { color: var(--teal); }
.jr-meta time { color: rgba(3, 32, 47, 0.5); letter-spacing: 0.1em; }
.jr-card .t { font-family: var(--serif); font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.2; color: var(--ink); }
.jr-card .d { margin-top: 0.55rem; font-size: 0.92rem; line-height: 1.6; color: rgba(3, 32, 47, 0.66); }
.jr-card .rd { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 1rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-deep); }
.jr-card .rd .arr { transition: transform 0.3s var(--ease); }
.jr-card:hover .rd .arr { transform: translateX(4px); }
.jr-card--feat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.jr-card--feat .ph { aspect-ratio: auto; min-height: 260px; }
.jr-card--feat .bd { justify-content: center; padding: clamp(1.5rem, 3vw, 2.6rem); }
.jr-card--feat .t { font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
.jr-card--feat .d { font-size: 1rem; }
.jr-all { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-deep); white-space: nowrap; }
.jr-dateline { display: flex; align-items: center; gap: 0.8rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(3, 32, 47, 0.5); margin-bottom: 1.4rem; flex-wrap: wrap; }
.jr-dateline .jr-cat { color: var(--teal); }
@media (max-width: 1000px) { .jr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .jr-card--feat { grid-template-columns: 1fr; } .jr-card--feat .ph { aspect-ratio: 3 / 2; min-height: 0; } }
@media (max-width: 560px) { .jr-grid { grid-template-columns: 1fr; } }
/* ============================================================
   v21 (2026-09-11) - next-generation navigation + map + home teasers
   Desktop dark-glass image dropdowns on every head (the portfolio
   menu standard: title + blurb links, photo tiles, a utility bar with
   the booking pill), the Map item, the home "From the journal" and
   "The map" bands, and UI polish. Additive: layers on v19/v20 above.
   Deep-ocean palette only. No gold, no frames, no glow borders.
   ============================================================ */

/* ---- the top bar: seven heads + Reserve + Menu ---- */
#nav { gap: clamp(0.9rem, 1.55vw, 1.8rem); }
#nav a.nl { font-size: 0.78rem; letter-spacing: 0.12em; padding: 0.6rem 0; }
#nav .nav-it { position: relative; }
#nav .nav-it.is-active > a.nl, #nav .nav-it:hover > a.nl, #nav .nav-it:focus-within > a.nl, #nav .nav-it.is-open > a.nl { color: var(--white); }
#nav .nav-it.is-active > a.nl::after { transform: scaleX(1); transform-origin: left; background: var(--sea); }
/* a short caret-line under the head while its panel is open */
#nav .nav-it > a.nl::before { content: ''; position: absolute; left: 50%; bottom: -14px; width: 12px; height: 12px; transform: translate(-50%, 6px) rotate(45deg);
  background: rgba(4, 30, 45, 0.98); border-left: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; transition: opacity 0.25s var(--ease), transform 0.3s var(--ease); pointer-events: none; z-index: 231; }
#nav .nav-it:hover > a.nl::before, #nav .nav-it:focus-within > a.nl::before, #nav .nav-it.is-open > a.nl::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }
@media (max-width: 1160px) and (min-width: 1101px) { #nav a.nl { font-size: 0.72rem; letter-spacing: 0.08em; } #nav { gap: clamp(0.7rem, 1.3vw, 1.2rem); } .brand .name { display: none; } }
@media (max-width: 1100px) { #nav { display: none; } }

/* ---- the panel: deep ocean-glass ---- */
.dd { position: absolute; left: var(--ddl, 50%); top: calc(100% + 8px); z-index: 230; transform: translate(var(--ddx, -50%), 10px);
  width: max-content; min-width: 740px; max-width: min(900px, calc(100vw - 2 * var(--pad)));
  background: linear-gradient(178deg, rgba(5, 36, 54, 0.985), rgba(3, 24, 38, 0.99)); color: var(--mist);
  border: 1px solid rgba(255, 255, 255, 0.09); border-top: 2px solid var(--sea); border-radius: 18px; padding: 20px 20px 16px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75), 0 16px 44px -26px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0; visibility: hidden; transition: opacity 0.28s var(--ease), transform 0.34s var(--ease), visibility 0s 0.3s; text-align: left; }
.nav-it.has-dd:hover .dd, .nav-it.has-dd:focus-within .dd, .nav-it.is-open .dd { opacity: 1; visibility: visible; transform: translate(var(--ddx, -50%), 0); transition-delay: 0s; }
/* an invisible bridge so the pointer can travel from the head down into the panel */
.nav-it.has-dd::after { content: ''; position: absolute; left: -12px; right: -12px; top: 100%; height: 16px; }
.dd__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 0.9rem 1.1rem; }
.dd--journal .dd__grid, .dd--wellness .dd__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); }
.dd--map { min-width: 700px; }
.dd--map .dd__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dd__links { display: grid; grid-template-columns: 1fr; gap: 0.2rem; align-content: start; }
.dd--residence .dd__links, .dd--stays .dd__links, .dd--plan .dd__links { grid-template-columns: 1fr 1fr; }
.dd--residence, .dd--stays, .dd--plan { min-width: 860px; }
.dd__nav { display: block; position: relative; padding: 0.62rem 0.85rem 0.62rem 0.95rem; border-radius: 11px; transition: background 0.22s var(--ease); }
.dd__nav::before { content: ''; position: absolute; left: 1px; top: 0.7rem; bottom: 0.7rem; width: 2px; border-radius: 2px; background: var(--sea); opacity: 0; transition: opacity 0.2s var(--ease); }
.dd__nav:hover, .dd__nav:focus-visible { background: rgba(255, 255, 255, 0.06); }
.dd__nav:hover::before, .dd__nav:focus-visible::before { opacity: 1; }
.dd__n { display: block; font-family: var(--serif); font-size: 1.02rem; line-height: 1.2; letter-spacing: -0.005em; color: var(--white); }
.dd__nav:hover .dd__n { color: var(--white); }
.dd__d { display: block; margin-top: 0.12rem; font-size: 0.76rem; line-height: 1.35; color: rgba(227, 237, 242, 0.62); }
.dd__nav--all .dd__n { color: var(--sea); }
.dd__tiles { display: grid; gap: 0.6rem; align-content: start; }
.dd__tile { position: relative; display: block; overflow: clip; border-radius: 12px; aspect-ratio: 16 / 10; background: var(--ink-2); border: 1px solid rgba(255, 255, 255, 0.07); }
.dd__tile--tall { aspect-ratio: 8 / 5; }
.dd__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); background: var(--ink-2); }
.dd__tile:hover .dd__img { transform: scale(1.05); }
.dd__cap { position: absolute; inset: auto 0 0 0; padding: 2.4rem 0.9rem 0.8rem; display: grid; gap: 0.15rem;
  background: linear-gradient(to top, rgba(3, 20, 32, 0.92), rgba(3, 20, 32, 0.4) 58%, transparent); }
.dd__k { font-family: var(--sans); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sea); }
.dd__t { font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; color: var(--white); }
.dd__foot { display: flex; align-items: center; gap: 0.6rem 1.4rem; flex-wrap: wrap; margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.dd__fls { display: flex; align-items: center; gap: 0.5rem 1.3rem; flex-wrap: wrap; }
.dd a.dd__fl { font-family: var(--sans); font-weight: 800; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(227, 237, 242, 0.7); padding: 0.25rem 0; transition: color 0.2s var(--ease); }
.dd a.dd__fl:hover { color: var(--white); }
.dd a.dd__cta { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5em; background: var(--sea); color: var(--ink); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.62em 1.2em; border-radius: 999px; transition: background 0.25s var(--ease), transform 0.25s var(--ease); white-space: nowrap; }
.dd a.dd__cta:hover { background: var(--white); }
.dd a.dd__cta .arr { display: inline-block; transition: transform 0.3s var(--ease); }
.dd a.dd__cta:hover .arr { transform: translateX(4px); }
/* keep the panels off the hero-video paint budget until they open */
.dd { contain: layout paint; }
/* Calm: panels still open (hover), just without the slide */
html.m-calm .dd { transition: none; }

/* ---- home: "The map" band ---- */
#mapband { position: relative; overflow: clip; }
#mapband .mb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 3rem); align-items: center; }
#mapband .mb__ph { position: relative; display: block; border-radius: 10px; overflow: clip; background: var(--ink-2); aspect-ratio: 16 / 10; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7); }
#mapband .mb__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease); }
#mapband .mb__ph:hover img { transform: scale(1.04); }
#mapband .mb__pin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--sea); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 8px 20px rgba(0, 0, 0, 0.5); }
#mapband .mb__pin::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(69, 182, 232, 0.8); animation: mb-pulse 2.6s ease-out infinite; }
@keyframes mb-pulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
html:not(.m-full) #mapband .mb__pin::before { animation: none; opacity: 0.5; }
#mapband .mb__lbl { position: absolute; left: 50%; top: calc(50% + 18px); transform: translateX(-50%); white-space: nowrap; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7); }
#mapband .mb__cats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1.2rem; margin-top: 1.5rem; }
#mapband .mb__cats a { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line-d); color: var(--mist); font-size: 0.9rem; transition: color 0.25s var(--ease), padding-left 0.25s var(--ease); }
#mapband .mb__cats a:hover { color: var(--sea); padding-left: 0.3rem; }
#mapband .mb__cats a .mb__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sea); flex: none; }
#mapband .mb__cats a small { margin-left: auto; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist-dim); }
@media (max-width: 900px) { #mapband .mb { grid-template-columns: 1fr; } #mapband .mb__cats { grid-template-columns: 1fr; } }

/* ---- home: "From the journal" band ---- */
#fromjournal .jr-grid { margin-top: 0; }

/* ---- polish: section numbers and kickers a touch bolder, tiles with a finer edge ---- */
.tile, .jr-card .ph, .g-rel-card .ph { border-radius: 8px; }
.sec-num { -webkit-text-stroke-width: 1.2px; }