/* ============================================================================
   site.css  -  extracted from index.html 2026-08-12
   Was 14 separate <style> blocks appended to the HTML over time: one 90KB base
   sheet plus 13 patch sheets, each added with a feature. Concatenated here in
   their original document order, so the cascade is byte-identical to before.
   ADD NEW RULES TO THE RELEVANT SECTION BELOW - do not append another block.
   ========================================================================== */


/* ==== 1/14  base stylesheet ============================= */


/* =============================================
   DESIGN TOKENS
   ============================================= */
:root {
  /* Anchored Mist palette — grounded in Aethos photos, locked April 2026 */
  --cream:    #F6F4F1;  /* Eggshell — neutral off-white canvas */
  --cream-2:  #FBFAF8;  /* Pale Eggshell — lighter layered surface */
  --cream-3:  #E2DFDA;  /* Stone border — neutral dividers, borders */
  --ink:      #1F1814;
  --ink-2:    #4A3D35;
  --ink-3:    #8C7D72;
  --terra:    #C67855;  /* Rust — dusty clay, settled */
  --sand:     #E6C896;  /* Honey — warm honey accent (butter retired, consolidated into sand) */
  --atlantic: #24394C;  /* Ink — deep Atlantic navy anchor */
  --atl-mid:  #3A5163;  /* Slate — softer navy for mid-tones and hovers */
  --splash-bg: #F3F1ED; /* Splash — gate background */
  --denim:    #B4C8D4;  /* Mist — pale Atlantic light blue */
  --navy-deep: #16222E; /* Deep navy — footer anchor (June 2026) */

  --ff-heading: 'freight-big-pro', Georgia, serif;
  --ff-detail:  'freight-big-pro', Georgia, serif;
  --ff-brand:   'freight-big-pro', Georgia, serif;
  --ff-sans:    'aktiv-grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ^ this closing brace was MISSING in the original inline stylesheet. Chromium
   recovered and still applied everything, so nothing looked broken, but the whole
   sheet parsed as one giant :root rule - invisible to devtools and a landmine the
   moment anything got concatenated after it. */



/* =============================================
   RESET
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* REMOVED 2026-08-12 - this rule never took effect. It sat immediately after the
   unclosed :root brace and was being swallowed, so the site has always run
   WITHOUT overflow-x:clip. Enabling it now would change today's rendering, and
   the brief is to keep the site exactly as it looks. If horizontal overflow ever
   needs fixing on iOS, this is the rule to bring back - use clip, never hidden,
   because hidden breaks position:sticky.
   was: html { scroll-behavior: auto; overflow-x: clip; max-width: 100vw; } */
body {
  font-family: var(--ff-sans);
  background: var(--cream);
  color: var(--ink);
  overflow-x: clip;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; object-fit: cover; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea { font-family: inherit; }
a { text-decoration: none; color: inherit; }

/* =============================================
   SCROLL ANIMATIONS
   ============================================= */
.fade-up {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.fade-up.d1 { transition-delay: 0.15s; }
.fade-up.d2 { transition-delay: 0.3s; }
.fade-up.d3 { transition-delay: 0.45s; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* =============================================
   SPLASH / PASSWORD GATE — arch reveal
   ============================================= */
#gate {
  position: fixed; inset: 0;
  background: var(--splash-bg);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: background-color 2.2s cubic-bezier(0.42, 0, 1, 1);
}
#gate.out { background-color: transparent; pointer-events: none; }

/* ── Arch composition wrapper ── */
.arch-wrap {
  position: relative;
  height: 82vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* OUTER arch — stone frame, goes UP */
.arch-img {
  display: block;
  height: 70vh;
  width: auto;
  max-width: 72vw;
  position: relative;
  z-index: 1;
  transition: transform 3.8s cubic-bezier(0.5, 0, 0.5, 1), opacity 1.7s ease 1.3s;
  will-change: transform;
}

/* INNER arch — door+ground, slightly larger → depth effect, goes DOWN */
.arch-abs {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  height: 82vh;
  width: auto;
  max-width: 78vw;
  z-index: 3;
  transition: transform 3.8s cubic-bezier(0.5, 0, 0.5, 1) 0s, opacity 1.7s ease 1.3s;
  will-change: transform;
}

/* Exit animations — OUTER up, INNER down */
.arch-outer-leaving {
  transform: translateY(-115vh) !important;
  opacity: 0 !important;
}
.arch-inner-leaving {
  transform: translateX(-50%) translateY(115vh) !important;
  opacity: 0 !important;
}


/* ── Password below the arch images ── */
.arch-pw {
  text-align: center;
  width: min(190px, 70vw);
  animation: gateIn 1.0s var(--ease) 1.2s both;
  position: relative;
  z-index: 20;
  margin-top: -12vh;
}
/* Enter button — sits below password input */
.arch-enter-btn {
  display: block;
  margin: 8px auto 0;
  background: transparent;
  color: var(--ink);
  border: none;
  border-radius: 0;
  padding: clamp(8px, 1.1vh, 12px) clamp(22px, 3vh, 36px);
  font-family: "pfp", var(--ff-heading);
  font-size: clamp(26px, 4vh, 44px);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, opacity 0.2s;
  animation: gateIn 1.0s var(--ease) 1.2s both;
}
.arch-enter-btn:hover {
  color: var(--atlantic);
}
@keyframes gateIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gate-pw-wrap { position: relative; width: 100%; }
.gate-pw-input {
  width: 100%; background: transparent; border: none;
  padding: 10px 0 12px; color: var(--ink); font-size: 15px;
  font-weight: 400; outline: none; text-align: center;
  letter-spacing: 0.34em; text-indent: 0.34em; transition: color 0.3s;
  font-family: var(--ff-sans); font-style: normal;
}
.gate-pw-underline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(31,24,20,0.42);
  pointer-events: none;
  transition: opacity 0.3s;
}
.gate-pw-input::placeholder {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  font-style: normal;
  text-transform: uppercase;
  font-family: var(--ff-sans);
}
.gate-pw-input:focus + .gate-pw-underline { opacity: 0.85; }
.gate-pw-input.shake { animation: shake 0.4s ease; }
.gate-err {
  margin-top: 10px; font-size: 8px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--atlantic);
  opacity: 0; transition: opacity 0.3s;
}
.gate-err.show { opacity: 1; }
.gate-btn {
  margin-top: 18px; padding: 12px 40px;
  background: transparent;
  border: 1px solid rgba(31,24,20,0.25);
  color: var(--ink); font-size: 8px;
  font-weight: 600; letter-spacing: 0.32em;
  text-transform: uppercase; cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  font-family: var(--ff-sans);
}
.gate-btn:hover { background: var(--ink); color: var(--splash-bg); border-color: var(--ink); }
@keyframes shake {
  0%,100%{ transform: translateX(0); }
  20%    { transform: translateX(-8px); }
  40%    { transform: translateX(8px); }
  60%    { transform: translateX(-5px); }
  80%    { transform: translateX(5px); }
}

@media (max-width: 600px) {
  .arch-wrap  { height: 62vh; }
  .arch-img   { height: 52vh; max-width: 92vw; }
  .arch-abs   { height: 62vh; max-width: 96vw; }
  .arch-pw    { width: min(190px, 75vw); margin-top: -10vh; }
}
@media (pointer: coarse) {
  .gate-pw-input { font-size: 16px; }
}

/* =============================================
   NAVIGATION
   ============================================= */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  padding: 22px 48px;
  display: flex; align-items: center; justify-content: flex-end; gap: 28px;
  transition: background 0.4s, padding 0.35s, border-color 0.4s;
  border-bottom: none;
}
#nav.scrolled {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Nav auto-hide */
#nav.nav-hidden { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
#nav.nav-visible { opacity: 1; pointer-events: auto; transition: opacity 0.3s ease; }

/* Nav over dark sections — cream text */
#nav.nav-light .nav-logo { color: var(--cream); }
#nav.nav-light .nav-hamburger { color: var(--ink); }

.nav-logo {
  font-family: var(--ff-brand);
  font-size: 24px; font-weight: 400; font-style: normal;
  color: var(--ink); letter-spacing: 0.005em;
  line-height: 1;
  position: relative;
  white-space: nowrap;
  transition: color 0.4s;
}
.nav-logo .f { margin-right: -0.19em; }
.nav-logo .amp {
  position: absolute;
  left: 0.375em; bottom: 0.155em;
  font-size: 0.495em;
  font-style: normal; font-weight: 400;
  line-height: 1;
}
.nav-links { display: none; }
.nav-links a {
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2); transition: color 0.2s;
}
.nav-links a:hover { color: var(--atlantic); }
#nav.nav-light .nav-links a:hover { color: var(--denim); }
.nav-rsvp {
  display: none;
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 10px 22px;
  border: 1px solid var(--ink); color: var(--ink);
  transition: background 0.2s, color 0.2s;
}
.nav-rsvp:hover { background: var(--ink); color: var(--cream); }

/* =============================================
   HERO
   ============================================= */
.hero-wrap {
  width: 100%;
  position: relative; overflow: hidden;
}
.hero-wrap picture { display: contents; }
.hero-wrap img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 24%;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.hero-wrap.loaded img { transform: scale(1); }
.hero-overlay {
  position: absolute; inset: 0;
  background: none;
}
.hero-content {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh; /* dvh: track the visible viewport as mobile URL bars show/hide (Chrome resizes; Safari overlays) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 2;
  padding: clamp(32px,5vw,56px) clamp(28px,6vw,72px);
}
.hero-kicker {
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: 12px;
}
.hero-names {
  position: absolute; top: 21%; left: 50%; transform: translate(-50%, -50%);
  font-family: "canto", var(--ff-brand);
  font-size: clamp(38px, 13vw, 200px);
  font-weight: 400; font-style: normal; color: var(--cream);
  line-height: 1; letter-spacing: -0.075em;
  text-transform: uppercase; white-space: nowrap;
}
.hero-names .hn-kern{ letter-spacing: -0.14em; }
.hero-names .hn-n2{ letter-spacing: -0.16em; }
.hero-names .nm { display: block; }
.hero-names .hn-abbr { display: none; }
.hero-names .hn-abbr i { font-style: italic; }
.hero-names .hero-and {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.30em; color: var(--denim);
  letter-spacing: 0.06em; line-height: 1;
}
.hero-meta {
  position: absolute; bottom: clamp(30px,6vh,60px); left: 0; right: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0; justify-content: center;
}
.hero-meta span {
  position: relative;
  font-family: "canto", var(--ff-brand);
  font-size: clamp(18px, 1.8vw, 26px); font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(246,244,241,0.78);
  padding: 0 16px;
}
.hero-meta span:first-child { padding-left: 16px; }
.hero-meta span:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translate(50%, -50%);
  width: 10px; height: 22px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 24' fill='none' stroke='%23F6F4F1' stroke-width='1' stroke-linecap='round'><path d='M 5 1 C 4.3 6, 5.7 12, 4.6 18 C 5.1 22, 4.8 23, 5 23' /></svg>") no-repeat center / contain;
  opacity: 0.45;
  pointer-events: none;
}

/* =============================================
   COUNTDOWN — compact, inside RSVP section
   ============================================= */
.countdown-compact {
  text-align: center;
  margin-bottom: 20px;
}
.cd-compact-row {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(10px, 2.5vw, 24px);
}
.cd-compact-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cd-compact-num {
  font-family: var(--ff-heading);
  font-size: clamp(26px, 3.8vw, 44px);
  font-weight: 400;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.01em;
  min-width: 2ch;
  text-align: center;
}
.cd-compact-label {
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.cd-compact-sep {
  font-family: var(--ff-detail);
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 300;
  color: rgba(255,255,255,0.15);
  line-height: 1;
  padding-bottom: 14px;
}

/* Scroll offset — nav is transparent/auto-hide, so snap to top */
section[id], div[id] {
  scroll-margin-top: 0;
}


/* =============================================
   SECTION COMMONS
   ============================================= */
.section {
  padding: clamp(80px,11vw,148px) clamp(24px,4vw,48px);
}
.section-eyebrow {
  font-size: 9px; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--atlantic); margin-bottom: 14px;
}
.section-heading {
  font-family: var(--ff-heading);
  font-size: clamp(34px,5.2vw,62px); font-weight: 400;
  line-height: 1.08; color: var(--ink);
}
.section-body {
  margin-top: 20px; font-size: 15px; font-weight: 300;
  color: var(--ink-2); line-height: 1.85; max-width: 520px;
}

/* =============================================
   SECTION DIVIDERS
   ============================================= */
/* Thin line divider with terracotta diamond — between same-bg sections */
.section-divider {
  display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(28px,6vw,80px);
  background: var(--cream);
}
.section-divider-inner {
  width: 100%; max-width: 480px;
  display: flex; align-items: center; gap: 16px;
}
.section-divider-line {
  flex: 1; height: 1px;
  background: var(--cream-3);
}
.section-divider-dot {
  width: 6px; height: 6px;
  background: var(--denim);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Organic wave — between dark and light sections */
.wave-divider {
  position: relative;
  line-height: 0;
  overflow: hidden;
  margin: 0; padding: 0;
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: clamp(48px, 6vw, 80px);
}
/* Navy wave exiting a dark section — background matches the cream section BELOW */
.wave-divider-out-dark {
  background: var(--cream);
}
/* Cream wave entering a dark section — bg is atlantic, SVG fills cream from top down */
.wave-divider-into-dark {
  background: var(--atlantic);
}
/* New Anchored Mist wave types */
.wave-divider-cream-to-mist { background: var(--denim); } /* on mist, cream wave on top */
.wave-divider-mist-to-cream { background: var(--cream); } /* on cream, mist wave on top */
.wave-divider-mist-to-navy { background: var(--atlantic); } /* on navy, mist wave on top */

/* =============================================
   SCHEDULE — TRIPTYCH (Sept 2026)
   ============================================= */
.schedule-section{ position:relative; width:100%; overflow:hidden; background:var(--atlantic); }

/* 3 horizontal photo bands, framed in cream */
.tript{ position:absolute; top:0; left:0; right:0; height:100dvh; z-index:2;
  display:flex; flex-direction:column; background:var(--cream); gap:9px; padding:9px 0; }
.panel{ position:relative; flex:1 1 0; width:100%; min-height:0; cursor:pointer; overflow:hidden; }
.panel-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  transform:scale(1.03); transition:transform 1.1s var(--ease); }
.panel:hover .panel-img{ transform:scale(1.06); }

.panel-label{ position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; justify-content:center; padding:0 clamp(26px,4.5vw,72px); }
.panel-date{ font-family:"canto",var(--ff-heading); font-weight:400; text-transform:uppercase; color:var(--cream);
  font-size:clamp(34px, 6vw, 72px); line-height:0.9; letter-spacing:-0.06em; }
.panel[data-day="0"] .panel-label{ align-items:flex-start; text-align:left; }
.panel[data-day="1"] .panel-label{ align-items:center; text-align:center; }
.panel[data-day="2"] .panel-label{ align-items:flex-end; text-align:right; }

.panel-cue{ position:absolute; left:50%; bottom:clamp(16px,2.2vw,30px); transform:translateX(-50%);
  z-index:2; color:var(--cream); opacity:0.85; pointer-events:none;
  display:flex; align-items:center; justify-content:center; transition:opacity .35s var(--ease); }
.panel-cue svg{ width:clamp(20px,1.9vw,26px); height:clamp(20px,1.9vw,26px); display:block;
  filter:drop-shadow(0 1px 10px rgba(0,0,0,0.5)); animation:cueBob 1.8s ease-in-out infinite; }
.panel:hover .panel-cue{ opacity:1; }

/* baked crops — strip (desktop) */
.panel[data-day="0"] .panel-img{ object-position:50% 17%; }
.panel[data-day="1"] .panel-img{ object-position:50% 51%; }
.panel[data-day="2"] .panel-img{ object-position:50% 73%; }

/* expanded layer */
.sched-expanded{ position:absolute; top:0; left:0; right:0; height:100dvh; z-index:6;
  opacity:0; pointer-events:none; transition:opacity .34s var(--ease); }
.sched-expanded.open{ opacity:1; pointer-events:auto; touch-action:pinch-zoom; }
.exp-imgs{ position:absolute; inset:0; z-index:0; background:var(--navy-deep); }
.exp-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  opacity:0; transition:opacity .85s ease-in-out; }
.exp-img[data-day="0"]{ object-position:50% 43%; }
.exp-img[data-day="1"]{ object-position:50% 43%; }
.exp-img[data-day="2"]{ object-position:50% 58%; }
.exp-grad{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(15,23,31,0) 38%, rgba(15,23,31,0.34) 68%, rgba(15,23,31,0.80) 100%); }

.exp-text{ position:absolute; inset:0; z-index:2; pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease); }
.sched-expanded.text-hidden .exp-text{ opacity:0; transform:translateY(12px); }
.exp-label{ position:absolute; left:clamp(30px,5vw,76px); top:clamp(46px,7vw,96px);
  display:flex; flex-direction:column; align-items:flex-start; }
.exp-accent{ font-family:"pfp",cursive; font-size:clamp(34px,4vw,66px); font-weight:400;
  text-transform:none; color:var(--cream); line-height:0.9; margin:0 0 clamp(-12px,-0.9vw,-4px) 2px; }
.exp-date{ font-family:"canto",var(--ff-heading); font-weight:400; text-transform:uppercase; color:var(--cream);
  font-size:clamp(48px,8vw,140px); line-height:0.84; letter-spacing:-0.06em; margin-left:-0.035em; }

.sched-detail{ position:absolute; left:clamp(30px,5vw,78px); bottom:clamp(46px,6vw,80px); max-width:720px; }
.sched-events{ display:flex; flex-direction:column; gap:clamp(18px,1.9vw,28px); }
.sched-event{ display:flex; align-items:baseline; gap:clamp(22px,2.4vw,36px); }
.sched-time{ font-family:var(--ff-sans); font-size:clamp(13px,1.25vw,17px); font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--cream); white-space:nowrap; min-width:clamp(128px,13vw,180px); flex-shrink:0; }
.sched-desc{ font-family:"canto",var(--ff-heading); font-weight:400; font-size:clamp(20px,2.2vw,30px);
  color:var(--cream); line-height:1.12; letter-spacing:-0.01em; }
.sched-note{ font-family:var(--ff-sans); font-size:clamp(13px,1.2vw,16px); font-weight:300; color:var(--cream); opacity:0.82; margin-top:7px; }

.sched-close{ position:absolute; z-index:5; bottom:clamp(42px,6vw,68px); right:clamp(24px,4vw,56px);
  width:44px; height:44px; background:none; border:none; color:var(--cream);
  display:flex; align-items:center; justify-content:center; opacity:0.85; transition:opacity .3s; }
.sched-close:hover{ opacity:1; }
.sched-close svg{ width:24px; height:24px; filter:drop-shadow(0 1px 8px rgba(0,0,0,0.5)); }
.sched-arrow{ position:absolute; z-index:5; bottom:clamp(42px,6vw,68px); width:44px; height:44px; background:none; border:none;
  color:var(--cream); display:flex; align-items:center; justify-content:center; opacity:0.85; transition:opacity .3s, transform .3s; }
.sched-arrow:hover{ opacity:1; }
.sched-arrow svg{ width:26px; height:26px; filter:drop-shadow(0 1px 8px rgba(0,0,0,0.5)); }
.sched-next{ right:calc(clamp(24px,4vw,56px) + 56px); }
.sched-prev{ right:calc(clamp(24px,4vw,56px) + 112px); }

@media(max-width:768px){
  .panel-label{ padding:0 22px; }
  .panel-date{ font-size:clamp(40px,11vw,60px); letter-spacing:-0.05em; }
  .panel[data-day="0"] .panel-img{ object-position:50% 39%; }
  .panel[data-day="1"] .panel-img{ object-position:50% 40%; }
  .panel[data-day="2"] .panel-img{ object-position:50% 36%; }
  .exp-img[data-day="0"]{ object-position:50% 47%; }
  .exp-img[data-day="1"]{ object-position:50% 50%; }
  .exp-img[data-day="2"]{ object-position:50% 50%; }
  .exp-label{ left:24px; top:78px; }
  .exp-date{ font-size:clamp(40px,12vw,72px); }
  .exp-accent{ font-size:clamp(30px,8vw,48px); }
  .sched-detail{ left:24px; right:24px; bottom:104px; max-width:none; }
  .sched-time{ flex:0 0 130px; width:130px; white-space:nowrap; font-size:12px; }
  .sched-event{ gap:16px; }
  .sched-desc{ font-size:clamp(19px,5.2vw,26px); }
  .sched-note{ font-size:13px; }
  .sched-arrow{ width:44px; height:44px; }
}

/* =============================================
   STAY SECTION — MASONRY GRID
   ============================================= */
.stay-section {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 4.5vh, 60px) clamp(24px,4vw,48px);
  box-sizing: border-box;
}
.stay-inner {
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.cap-br { display: none; }
.stay-caption {
  flex: 0 0 auto;
  font-family: "pfp", cursive;
  font-size: clamp(18px, 6vw, 50px);
  font-weight: 400; font-style: normal;
  color: var(--ink-2, rgba(36,57,76,0.7));
  line-height: 1.25; letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  margin: clamp(-10px, -0.7vw, -2px) auto clamp(16px, 1.9vw, 24px);
  max-width: none;
}
/* ============================================= 
   STAY — ARCH ARCADE (June 2026)
   ============================================= */
.stay-arcade-viewport{
  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.stay-arcade-viewport::-webkit-scrollbar{display:none;}
.stay-arcade-viewport.drag{cursor:grabbing;}
.stay-arcade-track{
  display:inline-flex;
  gap:clamp(52px,5.4vw,84px);
  padding:0;
}
.stay-arch{
  flex:0 0 auto;
  width:252px; height:324px;
  overflow:hidden;
  border-radius:50% 50% 0 0 / 38% 38% 0 0;
  background:var(--cream-3);
}
.stay-arch img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);}
.stay-arch:hover img{transform:scale(1.045);}
.stay-arcade-head{
  font-family:var(--ff-heading);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  font-size:clamp(34px, 6vw, 72px);
  text-align:center;
  line-height:1.0;
  color:var(--ink);
  margin:clamp(22px,3.4vh,40px) auto 0;
}
@media(max-width:600px){
  .stay-arch{ width:clamp(186px, 50vw, 244px); height:auto; aspect-ratio:252 / 324; }
  .stay-arcade-head{ font-size:clamp(42px,11vw,58px); margin-top:clamp(30px,4.4vh,48px); }
  .stay-caption{ white-space:normal; font-size:clamp(34px,9.5vw,46px); line-height:0.82; max-width:none; }
  .cap-br{ display:inline; }
  .stay-detail-text{ font-size:14.5px; line-height:1.5; }
  .stay-detail-label{ font-size:11px; }
  /* center content in the live viewport so the real section matches the split clones (no jump at connect) */
  .stay-section{ align-items:flex-start; padding-top:0; }
  .stay-inner{ min-height:var(--vph, 100svh); justify-content:center; }
}
/* Ticker-tape details row — hand-drawn ink hairlines, all-ink type */
.stay-details {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  padding-top: clamp(22px, 2.8vw, 34px);
  margin-top: 0;
}
.stay-details-divider {
  display: none; /* birds hidden 2026-06-09 — revert by removing this line */
  position: absolute;
  top: clamp(-14px, -1.6vw, -8px); left: 0;
  width: 100%;
  height: clamp(34px, 4.2vw, 48px);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='212 168 608 280'><path d='M0 0 C0.66 0.165 0.66 0.165 4 1 C5.518 10.274 5.549 19.616 0.312 27.75 C-0.761 29.19 -1.866 30.607 -3 32 C-3.55 32.688 -4.101 33.377 -4.668 34.086 C-8.172 38.271 -11.997 41.876 -16.148 45.41 C-21.975 50.413 -27.07 55.821 -30 63 C-30 64.98 -30 66.96 -30 69 C-24.06 70.65 -18.12 72.3 -12 74 C-11.67 75.32 -11.34 76.64 -11 78 C-12.897 79.897 -16.272 79.763 -18.812 80.188 C-25.279 81.364 -30.621 83.409 -36.414 86.598 C-38.899 87.945 -41.377 88.956 -44 90 C-45.86 90.969 -47.713 91.949 -49.562 92.938 C-61.502 98.9 -73.85 100.768 -87 98 C-92.159 97.366 -96.928 96.869 -101.605 99.422 C-103.855 101.185 -105.942 103.018 -108 105 C-110.812 107.5 -110.812 107.5 -113 109 C-115.312 108.75 -115.312 108.75 -117 108 C-116.502 103.9 -115.608 102.131 -112.438 99.5 C-111.797 98.953 -111.156 98.407 -110.496 97.844 C-109.672 97.235 -108.849 96.627 -108 96 C-107.523 95.56 -107.045 95.119 -106.553 94.666 C-99.175 88.768 -89.029 90.742 -80.148 91.178 C-62.977 91.951 -50.462 87.258 -36 78 C-36.506 75.831 -37 74 -38 72 C-38.646 65.673 -36.865 61.464 -34 56 C-33.673 55.34 -33.345 54.68 -33.008 54 C-28.739 46.272 -21.538 40.757 -14.688 35.375 C-9.61 30.888 -5.549 25.298 -3 19 C-3.33 18.34 -3.66 17.68 -4 17 C-4.308 17.45 -4.616 17.9 -4.934 18.363 C-11.724 27.165 -21.901 32.313 -31.27 37.977 C-42.659 44.954 -49.994 54.541 -58 65 C-59.816 67.357 -61.634 69.711 -63.477 72.047 C-64.459 73.306 -65.414 74.586 -66.336 75.891 C-70.559 81.505 -76.403 84.721 -83 87 C-85.305 86.781 -85.305 86.781 -87 86 C-87.33 85.34 -87.66 84.68 -88 84 C-85.611 81.213 -83.349 79.585 -80.062 78.062 C-76.3 76.269 -73.64 74.3 -71 71 C-71 69.68 -71 68.36 -71 67 C-77.99 65.981 -84.944 65.684 -92 65.438 C-93.156 65.394 -94.313 65.351 -95.504 65.307 C-98.336 65.201 -101.168 65.099 -104 65 C-103.427 67.867 -103.139 68.861 -101 71 C-101 71.99 -101 72.98 -101 74 C-106.284 73.384 -111.463 72.582 -116.688 71.562 C-119.458 71.038 -122.229 70.519 -125 70 C-126.121 69.789 -127.243 69.577 -128.398 69.359 C-138.311 67.646 -148.253 67.329 -158.25 68.562 C-162 69 -162 69 -165 68 C-165.33 67.01 -165.66 66.02 -166 65 C-164 62 -164 62 -161 61 C-147.797 59.597 -134.39 59.418 -121.132 58.905 C-118.551 58.802 -115.97 58.691 -113.39 58.573 C-99.519 57.941 -86.276 57.553 -72.616 60.317 C-69.588 60.889 -67.054 61.326 -64 61 C-61.57 58.875 -61.57 58.875 -59.125 56 C-58.691 55.5 -58.257 54.999 -57.809 54.484 C-56.526 53.001 -55.263 51.501 -54 50 C-52.775 48.559 -51.546 47.121 -50.312 45.688 C-49.834 45.114 -49.356 44.54 -48.863 43.949 C-43.439 38.275 -37.301 34.131 -30.625 30.062 C-20.914 24.015 -12.42 18.657 -6 9 C-5.439 8.172 -4.879 7.345 -4.301 6.492 C-2.852 4.338 -1.419 2.174 0 0 Z ' fill='%23B4C8D4' transform='translate(597,184)'/><path d='M0 0 C2.562 1.062 2.562 1.062 4.117 4.148 C14.017 29.125 7.94 56.639 -1.419 80.595 C-3.592 86.214 -4.606 91.111 -4.75 97.125 C-4.769 97.636 -4.769 97.636 -4.863 100.223 C-4.438 103.062 -4.438 103.062 -3.051 105.145 C0.882 108.031 5.211 109.788 9.688 111.688 C11.504 112.467 13.32 113.251 15.133 114.039 C15.935 114.38 16.737 114.721 17.563 115.073 C19.562 116.062 19.562 116.062 21.562 118.062 C21.43 120.094 21.43 120.094 20.562 122.062 C18.883 122.969 18.883 122.969 16.688 123.562 C15.868 123.805 15.048 124.047 14.203 124.297 C13.767 124.423 13.767 124.423 11.562 125.062 C5.979 126.901 0.633 128.987 -4.643 131.588 C-19.088 138.681 -33.613 142.162 -49.688 142 C-63.775 141.864 -77.977 143.06 -91.66 146.477 C-94.345 147.043 -96.704 147.173 -99.438 147.062 C-100.125 144.809 -100.125 144.809 -100.438 142.062 C-99.25 140.035 -99.25 140.035 -97.438 138.125 C-96.79 137.442 -96.143 136.759 -95.477 136.055 C-84.226 125.062 -84.226 125.062 -79.438 125.062 C-79.438 124.072 -79.438 123.082 -79.438 122.062 C-80.216 122.072 -80.995 122.081 -81.797 122.09 C-93.189 121.788 -102.908 118.152 -113.438 114.062 C-110.59 120.06 -107.928 123.171 -101.688 125.562 C-98.438 127.062 -98.438 127.062 -97.5 129.25 C-97.479 129.848 -97.459 130.446 -97.438 131.062 C-100.914 132.408 -103.308 132.022 -106.688 130.75 C-111.656 128.384 -114.491 124.818 -117.973 120.656 C-121.457 116.99 -125.495 114.568 -129.746 111.875 C-133.174 109.567 -135.279 107.579 -137.438 104.062 C-137.31 101.707 -137.094 100.719 -135.438 99.062 C-129.091 99.423 -124.263 101.167 -118.562 103.875 C-116.972 104.605 -115.381 105.335 -113.789 106.062 C-113.035 106.411 -112.282 106.759 -111.505 107.117 C-98.936 112.864 -87.15 116.057 -73.312 116.312 C-72.631 116.334 -71.95 116.356 -71.248 116.378 C-65.131 116.417 -61.41 114.377 -56.438 111.062 C-56.17 108.995 -55.921 106.923 -55.77 104.843 C-53.646 77.627 -35.788 49.725 -17.539 30.012 C-10.553 22.401 -6.107 14.633 -4.859 4.277 C-4.241 1.032 -3.324 0.085 0 0 Z M-4.438 22.062 C-5.824 23.898 -5.824 23.898 -7.125 26.438 C-9.312 30.356 -11.593 33.502 -14.688 36.75 C-30.174 53.453 -44.806 78.416 -48.438 101.062 C-48.609 102.099 -48.78 103.135 -48.957 104.203 C-49.306 106.32 -49.645 108.438 -49.973 110.559 C-50.438 113.062 -50.438 113.062 -51.438 115.062 C-53.42 116.097 -55.426 117.086 -57.438 118.062 C-60.94 119.979 -64.407 121.959 -67.875 123.938 C-68.791 124.454 -69.707 124.971 -70.65 125.504 C-75.803 128.441 -80.682 131.517 -85.438 135.062 C-85.107 135.722 -84.778 136.382 -84.438 137.062 C-82.5 137.09 -80.563 137.109 -78.625 137.125 C-77.546 137.137 -76.467 137.148 -75.355 137.16 C-72.29 137.084 -69.339 136.884 -66.293 136.582 C-61.154 136.084 -56.045 135.898 -50.885 135.772 C-40.734 135.513 -31.15 135.248 -21.438 132.062 C-20.506 131.774 -19.574 131.485 -18.613 131.188 C-12.661 129.195 -7.349 126.483 -1.898 123.391 C0.838 121.914 3.561 120.874 6.562 120.062 C6.562 119.072 6.562 118.082 6.562 117.062 C5.743 116.699 4.923 116.335 4.078 115.961 C3.539 115.71 3.539 115.71 0.812 114.438 C-0.255 113.95 -1.322 113.463 -2.422 112.961 C-6.099 110.646 -7.556 108.991 -9.438 105.062 C-9.993 101.649 -10.007 98.327 -9.938 94.875 C-9.927 93.936 -9.916 92.997 -9.905 92.03 C-9.713 85.022 -8.495 79.397 -5.438 73.062 C0.098 60.013 5.977 40.77 1.879 26.719 C1.062 24.75 1.062 24.75 -0.438 22.062 C-1.757 22.062 -3.077 22.062 -4.438 22.062 Z ' fill='%23B4C8D4' transform='translate(785.4375,246.9375)'/><path d='M0 0 C1.688 1.383 1.688 1.383 3.812 3.57 C-0.921 8.642 -4.291 9.775 -11.188 10.57 C-10.858 9.972 -10.528 9.374 -10.188 8.758 C-9.188 6.57 -9.188 6.57 -9.188 3.57 C-11.205 2.748 -13.226 1.938 -15.25 1.133 C-16.375 0.68 -17.501 0.228 -18.66 -0.238 C-26.531 -2.897 -34.63 -2.616 -42.838 -2.615 C-44.984 -2.617 -47.13 -2.635 -49.275 -2.654 C-56.775 -2.685 -63.899 -2.387 -71.188 -0.43 C-71.669 -0.301 -71.669 -0.301 -74.105 0.352 C-74.854 0.589 -75.603 0.826 -76.375 1.07 C-77.191 1.324 -78.007 1.578 -78.848 1.84 C-79.234 1.96 -79.234 1.96 -81.188 2.57 C-83.517 3.25 -85.852 3.91 -88.188 4.57 C-85.772 7.477 -83.946 8.074 -80.25 8.633 C-79.274 8.789 -78.298 8.945 -77.293 9.105 C-76.268 9.259 -75.243 9.412 -74.188 9.57 C-62.424 11.469 -62.424 11.469 -57.125 12.508 C-56.779 12.574 -56.779 12.574 -55.027 12.91 C-52.139 13.947 -50.694 15.622 -49.266 18.297 C-49.129 18.61 -49.129 18.61 -48.438 20.195 C-46.907 23.389 -45.166 26.007 -42.938 28.758 C-29.453 45.52 -23.35 62.407 -21.314 83.549 C-20.363 92.912 -19.169 100.642 -12.039 107.195 C-9.578 109.023 -7.168 109.916 -4.188 110.57 C-4.283 109.878 -4.378 109.186 -4.477 108.473 C-5.13 102.703 -5.167 97.614 -4.188 91.883 C-2.244 79.299 -3.23 66.038 -4.793 53.438 C-5.188 49.57 -5.188 49.57 -4.188 47.57 C-3.197 47.57 -2.207 47.57 -1.188 47.57 C5.251 62.243 4.647 78.831 3.351 94.577 C2.713 102.355 3.179 109.265 4.438 116.949 C4.827 120.712 4.5 123.863 3.812 127.57 C-0.472 127.277 -2.345 125.759 -5.133 122.571 C-5.584 122.034 -6.035 121.498 -6.5 120.945 C-9.714 117.271 -12.885 113.792 -16.625 110.633 C-27.306 101.565 -27.811 91.076 -28.916 77.832 C-30.706 59.039 -39.234 44.859 -49.758 29.663 C-50.677 28.317 -51.571 26.953 -52.43 25.568 C-55.875 20.205 -59.616 18.357 -65.744 17.007 C-68.615 16.459 -71.489 15.972 -74.375 15.508 C-76.328 15.189 -78.28 14.865 -80.23 14.535 C-81.087 14.397 -81.943 14.259 -82.825 14.117 C-85.188 13.57 -85.188 13.57 -87.169 12.575 C-89.592 11.369 -91.773 10.975 -94.441 10.535 C-95.462 10.366 -96.482 10.196 -97.533 10.021 C-98.064 9.937 -98.064 9.937 -100.75 9.508 C-101.267 9.421 -101.267 9.421 -103.885 8.982 C-109.914 7.997 -115.816 7.314 -121.926 7.112 C-124.188 6.57 -124.188 6.57 -125.976 4.678 C-127.415 2.174 -127.501 0.683 -127.375 -2.18 C-127.348 -2.979 -127.321 -3.778 -127.293 -4.602 C-127.258 -5.205 -127.223 -5.808 -127.188 -6.43 C-123.583 -7.742 -121.75 -7.108 -118.312 -5.555 C-104.095 0.819 -85.789 -1.836 -71.625 -7.055 C-66.891 -8.754 -62.18 -8.963 -57.188 -9.246 C-54.188 -9.43 -54.188 -9.43 -50.562 -9.992 C-34.943 -12.017 -13.397 -8.756 0 0 Z ' fill='%23B4C8D4' transform='translate(356.1875,309.4296875)'/><path d='M0 0 C0.99 0.33 1.98 0.66 3 1 C1.259 12.509 -2.936 23.1 -9 33 C-9.342 33.56 -9.683 34.121 -10.035 34.698 C-17.966 47.666 -26.092 60.465 -35.509 72.41 C-39.117 77.03 -42.157 81.881 -45 87 C-46.65 86.67 -48.3 86.34 -50 86 C-49.977 85.215 -49.954 84.43 -49.93 83.621 C-49.912 82.571 -49.894 81.52 -49.875 80.438 C-49.852 79.405 -49.829 78.372 -49.805 77.309 C-50 74 -50 74 -50.98 70.762 C-54.377 58.23 -53.254 43.345 -47 32 C-45.091 28.712 -43.117 25.488 -41.062 22.289 C-38.289 17.866 -35.874 13.301 -33.445 8.68 C-32 6 -32 6 -30 3 C-29.01 3 -28.02 3 -27 3 C-27.746 13.94 -33.633 23.463 -39.133 32.676 C-43.358 40.198 -45.172 46.364 -45.125 55 C-45.129 55.712 -45.133 56.423 -45.137 57.156 C-45.13 60.575 -45.072 63.733 -44 67 C-40.589 66.441 -39.265 65.559 -37.23 62.789 C-36.984 62.458 -36.984 62.458 -35.737 60.782 C-35.226 60.07 -34.714 59.358 -34.188 58.625 C-33.655 57.898 -33.122 57.172 -32.573 56.423 C-28.463 50.766 -24.653 44.962 -21 39 C-19.794 37.124 -18.585 35.249 -17.375 33.375 C-12.875 26.278 -9.051 19.362 -6.047 11.508 C-4.368 7.485 -2.21 3.75 0 0 Z ' fill='%23B4C8D4' transform='translate(285,341)'/></svg>") no-repeat center / auto 100%;
  pointer-events: none;
}
.stay-detail-col {
  position: relative;
  flex: 1;
  padding: 0 clamp(14px, 1.8vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.stay-detail-col:first-child { padding-left: 0; }
.stay-detail-col:last-child { padding-right: 0; }
.stay-detail-col .col-divider {
  position: absolute;
  top: 8%; right: 0;
  width: 1px; height: 84%;
  background: var(--denim);
  pointer-events: none;
}
.stay-detail-col:last-child .col-divider { display: none; }
.stay-detail-col .col-divider svg { display: none; }
.stay-detail-label {
  font-family: var(--ff-sans);
  font-size: clamp(10px, 0.85vw, 11.5px);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink, var(--atlantic));
}
.stay-detail-text {
  font-family: var(--ff-sans);
  font-size: clamp(13px, 1.05vw, 15px);
  font-style: normal;
  font-weight: 400;
  color: var(--ink, var(--atlantic));
  line-height: 1.5;
}
.stay-detail-text strong {
  font-style: normal;
  font-weight: 600;
  color: var(--ink, var(--atlantic));
}
.stay-panel {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 0;
  transition:
    flex-grow 1.6s cubic-bezier(0.45, 0, 0.25, 1),
    flex-basis 1.6s cubic-bezier(0.45, 0, 0.25, 1);
}
.stay-panel.active {
  flex-grow: 10;
}
/* Above mobile: size the expanded panel to the photo's 2:3 ratio (width = height × 2/3) via an interpolatable flex-basis, so the full image is always visible and the reveal eases smoothly — no aspect-ratio snap. */
@media (min-width: 700px) {
  .stay-panel.active {
    flex-grow: 0;
    flex-basis: calc(var(--bs-h, 420px) * 2 / 3);
  }
}
.stay-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.stay-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.04), transparent 25%, transparent 75%, rgba(0,0,0,0.04));
  opacity: 1;
  transition: opacity 1.6s cubic-bezier(0.45, 0, 0.25, 1);
  pointer-events: none;
}
.stay-panel.active::after {
  opacity: 0;
}

/* ── Lightbox ── */
.lightbox {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 90vw; max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  transition: transform 0.3s ease;
}
.lightbox-close {
  position: absolute; top: 24px; right: 28px;
  background: none; border: none; color: rgba(255,255,255,0.7);
  font-size: 32px; cursor: pointer; line-height: 1;
  transition: color 0.2s;
}
.lightbox-close:hover { color: #fff; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,0.6);
  font-size: 36px; cursor: pointer; padding: 12px;
  transition: color 0.2s;
}
.lightbox-nav:hover { color: #fff; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

/* =============================================
   RSVP SECTION (C4 Kinetic Type — April 2026)
   ============================================= */
/* Modal shell: rises from bottom, locks body behind */
#rsvp-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--cream-2);
  padding: clamp(36px, 4vw, 56px) clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
}
#rsvp-modal.open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}
body.rsvp-open {
  overflow: hidden;
  padding-right: var(--sbw, 0px);
}
body.rsvp-open #nav {
  right: var(--sbw, 0px);
}
/* Hand-drawn squiggle X close button */
.rsvp-close {
  position: fixed;
  top: clamp(16px, 2.5vw, 26px);
  left: clamp(16px, 2.5vw, 26px);
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 30;
  color: var(--atlantic);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  opacity: 0;
  transition: opacity 280ms ease 260ms, color 220ms ease;
}
#rsvp-modal.open .rsvp-close { opacity: 1; }
.rsvp-close:hover { color: var(--denim); }
.rsvp-close span {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 1.5px;
  top: 50%;
  margin-top: -0.75px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.35s var(--ease), opacity 0.25s;
}
.rsvp-close span svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* always X (matches .nav-hamburger.open state) */
.rsvp-close span:nth-child(1) { transform: rotate(45deg); }
.rsvp-close span:nth-child(2) { display: none; }
.rsvp-close span:nth-child(3) { transform: rotate(-45deg); }
@media (max-width: 480px) {
  .rsvp-close { top: 14px; left: 14px; }
}
#rsvp-modal .rsvp-top {
  position: absolute;
  top: clamp(70px, 9vh, 110px);
  right: clamp(24px, 5vw, 72px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 24px;
}
@media (max-width: 480px) {
  #rsvp-modal .rsvp-top { top: 62px; right: 14px; }
}
#rsvp-modal .rsvp-progress-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--atl-mid);
}
#rsvp-modal .rsvp-progress-mini .pm-bar {
  width: 96px;
  height: 1px;
  background: var(--cream-3);
  position: relative;
  overflow: hidden;
}
#rsvp-modal .rsvp-progress-mini .pm-bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ink);
  width: var(--p, 0%);
  transition: width 0.6s var(--ease);
}
#rsvp-modal .rsvp-progress-mini .pm-num {
  font-family: var(--ff-heading);
  font-style: italic;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

/* marginalia (prior answers) */
#rsvp-modal .rsvp-margin {
  position: absolute;
  top: clamp(120px, 16vh, 180px);
  right: clamp(24px, 5vw, 72px);
  max-width: 240px;
  text-align: right;
  pointer-events: none;
  z-index: 5;
}
#rsvp-modal .rsvp-margin .m-row {
  font-family: var(--ff-sans);
  font-size: 11px;
  line-height: 1.6;
  color: var(--atl-mid);
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  margin-bottom: 6px;
}
#rsvp-modal .rsvp-margin .m-row.show { opacity: 1; transform: translateY(0); }
#rsvp-modal .rsvp-margin .m-row .k {
  font-family: var(--ff-sans);
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
  margin-right: 6px;
}

/* question zone */
#rsvp-modal .rsvp-q-zone {
  display: flex;
  align-items: flex-start;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  min-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
  padding: 4px 0;
}
#rsvp-modal .rsvp-q {
  font-family: "canto", var(--ff-heading);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(34px, 4.8vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  max-width: 18ch;
}
#rsvp-modal .rsvp-q-answer {
  display: block;
  margin-top: 20px;
  font-family: "canto", var(--ff-heading);
  font-style: italic;
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1.18;
  color: var(--ink);
  letter-spacing: 0;
  max-width: none;
}
#rsvp-modal .rsvp-q .italic { font-style: italic; }
#rsvp-modal .rsvp-q .echo {
  font-family: "canto", var(--ff-heading);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 22px);
  letter-spacing: normal;
  color: var(--atl-mid);
  display: block;
  margin-bottom: 22px;
  line-height: 1;
}
#rsvp-modal .rsvp-q .dim { color: var(--cream-3); }
#rsvp-modal .rsvp-q .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
#rsvp-modal .rsvp-q.active .letter { opacity: 1; transform: translateY(0); }

/* block-fill stamp (hover + selected) */
#rsvp-modal .word-pick {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: var(--ink);
  font-family: "pfp", var(--ff-heading);
  font-style: normal;
  padding: 0 0.14em 0.02em 0.14em;
  transition: color 0.35s var(--ease);
  z-index: 0;
  isolation: isolate;
  vertical-align: baseline;
}
#rsvp-modal .word-pick::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: var(--atlantic);
  transition: height 0.38s var(--ease), opacity 0.3s var(--ease);
  opacity: 0;
  z-index: -1;
}
#rsvp-modal .word-pick[data-advance] { font-family: var(--ff-sans); font-style: normal; font-size: clamp(15px, 1.6vw, 19px); letter-spacing: 0.04em; }
/* advance buttons (Continue / Send it / All set): plain, no fill */
#rsvp-modal .word-pick[data-advance]::before { display: none; }
#rsvp-modal .word-pick[data-advance]:hover { opacity: 0.6; }
#rsvp-modal .attend-list { margin-top: clamp(20px, 3vw, 34px); }
#rsvp-modal .attend-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: clamp(14px, 2.5vw, 34px); margin-bottom: clamp(4px, 0.9vw, 10px); }
#rsvp-modal .attend-row:last-child { margin-bottom: 0; }
#rsvp-modal .attend-name { font-family: "canto", var(--ff-heading); font-style: normal; font-size: clamp(24px, 2.8vw, 42px); color: var(--ink); min-width: 4ch; }
#rsvp-modal .attend-picks { font-size: clamp(30px, 3.8vw, 54px); }
/* selection options get a hand-drawn circle instead of a fill */
#rsvp-modal .wp-circle {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
  color: var(--atlantic);
  opacity: 0;
  transform: rotate(-0.8deg);
}
#rsvp-modal .wp-circle path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.62s var(--ease);
}
#rsvp-modal .word-pick.picked:not([data-advance]) .wp-circle { opacity: 1; }
#rsvp-modal .word-pick.picked:not([data-advance]) .wp-circle path { stroke-dashoffset: 0; }
#rsvp-modal .word-pick + .sep {
  display: inline-block;
  color: var(--cream-3);
  margin: 0 0.16em;
  font-style: normal;
}

/* inline inputs */
#rsvp-modal .rsvp-info {
  font-family: "canto", var(--ff-heading);
  font-style: normal;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.45;
  color: var(--ink-3);
  margin-top: 10px;
  max-width: 42ch;
}
#rsvp-modal .inline-in {
  font: inherit;
  font-family: "pfp", var(--ff-heading);
  font-style: normal;
  font-size: clamp(30px, 3.6vw, 52px);
  color: var(--ink);
  line-height: 0.75;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 2px solid var(--cream-3);
  padding: 0.14em 0.12em 0.34em;
  min-width: 7ch;
  width: auto;
  max-width: min(92vw, 1100px);
  transition: border-color 0.3s var(--ease);
  caret-color: var(--atlantic);
}
#rsvp-modal .inline-in:focus { border-color: var(--ink); }
#rsvp-modal .inline-in::placeholder { color: var(--cream-3); font-style: italic; }

/* dropdown */
#rsvp-modal .rsvp-dropdown {
  position: absolute;
  background: var(--cream);
  border: 1px solid var(--cream-3);
  border-top: none;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-style: normal;
  min-width: 240px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 30;
  display: none;
}
#rsvp-modal .rsvp-dropdown.show { display: block; }
#rsvp-modal .rsvp-dropdown .opt {
  padding: 12px 14px;
  cursor: pointer;
  color: var(--ink);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--cream-2);
  transition: background 0.2s var(--ease);
}
#rsvp-modal .rsvp-dropdown .opt:last-child { border-bottom: none; }
#rsvp-modal .rsvp-dropdown .opt:hover { background: var(--cream-2); }
#rsvp-modal .rsvp-dropdown .empty {
  padding: 12px 14px;
  color: var(--atl-mid);
  font-style: italic;
}

/* inline textarea — flush to text, auto-grows */
#rsvp-modal .inline-ta {
  font: inherit;
  color: var(--ink);
  font-style: italic;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--cream-3);
  outline: none;
  resize: none;
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  padding: 0.05em 0 8px 0;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 0.9;
  margin-top: 12px;
  min-height: 1.4em;
  height: auto;
  overflow: hidden;
  font-family: "pfp", var(--ff-heading);
  font-style: normal;
  display: block;
  transition: border-color 0.3s var(--ease);
}
#rsvp-modal .inline-ta:focus { border-color: var(--ink); }
#rsvp-modal .inline-ta::placeholder { color: var(--cream-3); }

/* dietary per-person stacked */
#rsvp-modal .diet-row { margin-bottom: 12px; }
#rsvp-modal .diet-label {
  font-family: "pfp", var(--ff-heading);
  font-style: normal;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0;
}
#rsvp-modal .diet-block { margin-top: 30px; }
#rsvp-modal .diet-block + .diet-block { border-top: 1px solid var(--cream-3); padding-top: 28px; }
#rsvp-modal .diet-eyebrow { font-family: var(--ff-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin: 16px 0 12px; }
#rsvp-modal .diet-picks { line-height: 1.9; font-size: clamp(22px, 2.6vw, 36px); }
#rsvp-modal .diet-picks .word-pick { margin-right: 0.55em; }
#rsvp-modal .diet-text { width: 100%; max-width: 560px; font-size: clamp(22px, 2.6vw, 36px); }
#rsvp-modal .diet-other { margin-top: 14px; }

/* bottom bar */
#rsvp-modal .rsvp-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 32px;
}
#rsvp-modal .nav-back {
  font-family: var(--ff-sans);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--atl-mid);
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), color 0.2s var(--ease);
}
#rsvp-modal .nav-back.show { opacity: 1; pointer-events: auto; }
#rsvp-modal .nav-back:hover { color: var(--ink); }
#rsvp-modal .nav-fwd { font-family: var(--ff-sans); font-style: normal; font-size: 13px; letter-spacing: 0.04em; color: var(--atl-mid); cursor: pointer; background: none; border: none; padding: 6px 2px; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); }
#rsvp-modal .nav-fwd.show { opacity: 1; pointer-events: auto; }
#rsvp-modal .nav-fwd:hover { color: var(--ink); }

/* question transitions */
#rsvp-modal .question {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: clamp(36px, 11vh, 150px) 20px 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
#rsvp-modal .question.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}
#rsvp-modal .question.leaving {
  opacity: 0;
  transform: translateY(-18px);
}

/* success screens — absolute-fill overlay inside the section */
#rsvp-modal .rsvp-success-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s var(--ease);
  background: var(--cream-2);
  z-index: 10;
}
#rsvp-modal .rsvp-success-screen.show { opacity: 1; pointer-events: auto; }
#rsvp-modal .success-yes h1,
#rsvp-modal .success-no h1 {
  font-family: "canto", var(--ff-heading);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: 0;
  color: var(--ink);
}
#rsvp-modal .success-yes h1 em { color: var(--ink); font-style: normal; }
#rsvp-modal .success-no h1 em { color: var(--ink); font-style: normal; }
#rsvp-modal .success-yes .kicker {
  font-family: "pfp", var(--ff-heading);
  font-style: normal;
  font-size: clamp(30px, 4.5vw, 58px);
  line-height: 1.15;
  color: var(--ink);
  margin-top: -0.14em;   /* tucks up under the headline so they read as one unit */
  margin-bottom: 52px;
}
#rsvp-modal .success-no p {
  font-family: "canto", var(--ff-heading);
  font-style: normal;
  font-size: clamp(18px, 1.8vw, 26px);
  color: var(--ink);
  margin-top: 18px;
  max-width: 30ch;
}

/* countdown */
#rsvp-modal .rsvp-countdown {
  display: flex;
  gap: 14px;
  margin-bottom: 44px;
}
#rsvp-modal .rsvp-countdown .cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 86px;
}
#rsvp-modal .rsvp-countdown .cd-num {
  font-family: "canto", var(--ff-heading);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
#rsvp-modal .rsvp-countdown .cd-lbl {
  font-family: var(--ff-sans);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--atl-mid);
  margin-top: 10px;
}

/* calendar row */
#rsvp-modal .cal-eyebrow {
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
#rsvp-modal .cal-row {
  display: flex;
  justify-content: center;
  gap: 22px;
}
#rsvp-modal .cal-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
#rsvp-modal .cal-ico svg { width: 60px; height: 60px; display: block; }
#rsvp-modal .cal-ico:hover { transform: translateY(-3px); opacity: 0.72; }

/* already-rsvpd banner (shown inside name step when duplicate detected) */
#rsvp-modal .rsvp-plusone {
  margin-top: clamp(18px, 2.6vw, 30px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4em;
}
#rsvp-modal .rsvp-plusone[hidden] { display: none; }
#rsvp-modal .rsvp-plusone .po-label {
  font-family: "pfp", var(--ff-heading);
  font-size: clamp(26px, 3.2vw, 44px);
  color: var(--ink-3);
  line-height: 1.1;
}
#rsvp-modal .rsvp-plusone .po-in {
  flex: 1 1 12ch;
  min-width: 12ch;
  max-width: 460px;
  margin-top: 0;
}
#rsvp-modal .rsvp-plusone .po-go { flex: 1 0 100%; margin-top: clamp(14px, 2vw, 22px); }
@media (max-width: 900px) {
  #rsvp-modal .rsvp-plusone { gap: 0; }
  #rsvp-modal .rsvp-plusone .po-label { font-size: clamp(24px, 6.5vw, 34px); }
  #rsvp-modal .rsvp-plusone .po-in { flex: 1 0 100%; max-width: 100%; }
}
#rsvp-modal .rsvp-already {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--cream-3);
  background: var(--cream);
  font-family: var(--ff-sans);
  font-size: 14px;
  color: var(--atl-mid);
  max-width: 460px;
  display: none;
}
#rsvp-modal .rsvp-already.show { display: block; }
#rsvp-modal .rsvp-already a { color: var(--denim); text-decoration: underline; }

/* mobile */
@media (max-width: 720px) {
  #rsvp-modal { padding: 20px 24px; }
  #rsvp-modal .rsvp-q { font-size: clamp(35px, 9.8vw, 54px); max-width: 100%; }
  #rsvp-modal .rsvp-q-answer { font-size: clamp(38px, 9.4vw, 60px); }
  #rsvp-modal .rsvp-info { font-size: 18px; }
  #rsvp-modal .word-pick[data-advance] { font-size: 19px; }
  #rsvp-modal .diet-picks { font-size: clamp(30px, 8vw, 44px); }
  #rsvp-modal .attend-picks { font-size: clamp(40px, 9.6vw, 56px); }
  #rsvp-modal .diet-label { font-size: clamp(42px, 10.5vw, 56px); }
  #rsvp-modal .success-yes .kicker { font-size: clamp(38px, 10.5vw, 58px); margin-top: -0.14em; margin-bottom: 40px; }
  #rsvp-modal .rsvp-margin { display: none; }
  #rsvp-modal .inline-in { font-size: clamp(40px, 9.5vw, 54px); }
  #rsvp-modal .inline-ta { font-size: clamp(38px, 9vw, 52px); }
  #rsvp-modal .diet-text { font-size: clamp(30px, 8vw, 44px); }
  #rsvp-modal .attend-row { flex-direction: column; align-items: flex-start; gap: clamp(2px, 1vw, 8px); }
  #rsvp-modal .attend-name { font-size: clamp(30px, 7vw, 42px); }
  #rsvp-modal .rsvp-choices { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 2.4vw, 18px); }
  #rsvp-modal .rsvp-choices .sep { display: none; }
  #rsvp-modal .rsvp-or .sep { display: block; font-size: 0; line-height: 1; margin: clamp(3px,1.4vw,10px) 0; }
  #rsvp-modal .rsvp-or .sep::after { content: 'or'; font-family: var(--ff-sans); font-style: italic; font-size: 19px; letter-spacing: 0.06em; color: var(--ink-3); }
  #rsvp-modal .question { padding-bottom: clamp(48px, 9vh, 96px); }
  #rsvp-modal .cal-row { gap: 16px; }
  #rsvp-modal .cal-ico { width: 64px; height: 64px; } #rsvp-modal .cal-ico svg { width: 52px; height: 52px; }
  #rsvp-modal .rsvp-countdown { gap: 10px; }
  #rsvp-modal .rsvp-countdown .cd-cell { min-width: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  #rsvp-modal *,
  #rsvp-modal *::before,
  #rsvp-modal *::after {
    transition-duration: 0.001s !important;
    animation-duration: 0.001s !important;
  }
}

/* =============================================
   FAQ
   ============================================= */
#faq {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 5vh, 56px) clamp(24px, 4vw, 48px) clamp(48px, 6vw, 80px);
  box-sizing: border-box;
}
.faq-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.faq-header { flex: 0 0 auto; }
.faq-heading {
  font-family: "canto", var(--ff-heading);
  font-size: clamp(34px, 6vw, 72px); font-weight: 400;
  color: var(--ink); line-height: 1.0;
  letter-spacing: -0.01em; margin-bottom: 0;
  text-align: left;
  text-transform: uppercase;
}
.faq-subtitle {
  font-family: "pfp", cursive;
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: 400; font-style: normal;
  color: var(--ink-2, rgba(36,57,76,0.6)); line-height: 1.1;
  text-align: left;
  margin: clamp(-16px, -1.1vw, -6px) 0 0;
}
.faq-list {
  margin-top: clamp(20px, 2.4vw, 36px);
  width: 100%;
}
@media(max-width:600px){
  .faq-heading{ font-size:clamp(42px,11vw,58px); }
  .faq-subtitle{ font-size:clamp(34px,9.5vw,46px); margin-top:clamp(-12px,-2vw,-6px); }
  /* clearance so the RSVP marquee (negative margin) tucks into empty space, not over the last divider */
  .faq-list{ padding-bottom:clamp(18px,3.4vh,34px); }
}
.faq-item {
  position: relative;
  border-top: none;
}
/* Divider straddles item's top edge so spacing above/below the line is symmetric */
.faq-item::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--denim);
  pointer-events: none;
}
.faq-item:first-child::before { top: 0; }
.faq-item:last-child::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--denim);
  pointer-events: none;
}
.faq-q {
  width: 100%; text-align: left;
  padding: clamp(10px, 1.1vw, 14px) 0;
  display: flex; justify-content: space-between;
  align-items: center; cursor: pointer; background: none; border: none;
}
.faq-qtext {
  font-family: "canto", var(--ff-heading);
  font-size: clamp(15px, 1.5vw, 19px); font-weight: 400; color: var(--ink);
  text-align: left; line-height: 1.3;
}
.faq-arrow { font-size: 14px; color: var(--ink-3); flex-shrink: 0; margin-left: 24px; transition: transform 0.35s var(--ease); }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-ans { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); }
.faq-item.open .faq-ans { max-height: 1000px; }
.faq-ans-inner {
  font-family: var(--ff-sans);
  padding-bottom: clamp(16px, 1.8vw, 24px);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 300; color: var(--ink-2); line-height: 1.7; max-width: 720px;
}
.faq-ans-inner strong { font-weight: 500; color: var(--ink); }

/* =============================================
   MOBILE NAV OVERLAY
   ============================================= */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px; height: 28px;
  cursor: pointer; background: none; border: none; padding: 0;
  color: var(--ink);
  z-index: 600;
  color: var(--ink);
  transition: color 0.4s;
}
.nav-hamburger span {
  display: block; width: 100%; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav-overlay {
  position: fixed; inset: 0; z-index: 580;
  background: rgba(246,244,241,0.97);
  /* NO backdrop-filter here. The background above is already 97% opaque, so a blur
     behind it is invisible (max 5/255 per channel) - but a full-screen fixed element
     with backdrop-filter forces WebKit to snapshot and blur the whole viewport on
     every frame, even at opacity 0, and pinch-zoom multiplies that area. It was
     crashing iOS on zoom. Do not reintroduce. */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
  padding: 100px 24px 60px;
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-nav-overlay a {
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 10px 0;
  transition: color 0.2s;
}
.mobile-nav-overlay a:hover { color: var(--atlantic); }
.mobile-nav-overlay .mobile-nav-rsvp {
  font-family: var(--ff-sans);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); padding: 10px 0; border: none; font-style: normal;
  transition: color 0.2s;
}
.mobile-nav-overlay .mobile-nav-rsvp:hover { color: var(--atlantic); }

@media (max-width: 900px) {
  .nav-hamburger { display: flex; }
  .nav-rsvp { display: none; }
}

/* =============================================
   OUR STORY — POLAROID STACK (June 2026)
   Years nav + stacked instax photos.
   ============================================= */
.story-section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 4.5vh, 60px) clamp(24px, 4vw, 48px);
}
.story-inner {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(28px, 4vw, 56px);
}

/* ---- polaroid stack ---- */
.ys-stack {
  position: relative;
  flex: 0 0 auto;
  height: clamp(420px, 66vh, 600px);
  width: auto;
  aspect-ratio: 1431 / 2151;
}
.ys-pol {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: rotate(calc(var(--rot) + 9deg)) translate(var(--tx), calc(var(--ty) - 6%)) scale(1.05);
  transition: transform 1.15s var(--ease), opacity 0.95s var(--ease);
  pointer-events: none;
}
.ys-pol.placed {
  opacity: 1;
  transform: rotate(var(--rot)) translate(var(--tx), var(--ty)) scale(1);
}
/* raw instax PNGs (2020) */
.ys-pol.raw img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: none;
}
/* framed: photo positioned in the cutout's transparent window, frame PNG on top */
.ys-pol.framed .ph {
  position: absolute;
  left: 10.3%; top: 10.5%;
  width: 77.2%; height: 69.2%;
  object-fit: cover;
}
.ys-pol.framed .fr {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: none;
}
.ys-pol[data-i="0"] { --rot: -2.2deg; --tx: -1%;  --ty: 0%;   --sx: -7%; --sy: 1.5%; --i: 0; --vj: 0px;   z-index: 1; }
.ys-pol[data-i="1"] { --rot: 3deg;    --tx: 3%;   --ty: -1%;  --sx: 6.5%; --sy: 2%; --i: 1; --vj: -11px; z-index: 2; }
.ys-pol[data-i="2"] { --rot: -2.8deg; --tx: -2.5%; --ty: 1.5%; --sx: -6.5%; --sy: 2%; --i: 2; --vj: 8px;  z-index: 3; }
.ys-pol[data-i="3"] { --rot: 2.2deg;  --tx: 1.5%; --ty: -2%;  --sx: 6%; --sy: 1.5%; --i: 3; --vj: -6px; z-index: 4; }

/* subtle shadow on the stacked (non-top) photos only */
.ys-pol.placed:not(.is-top) { filter: drop-shadow(2px 4px 5px rgba(31,24,20,0.13)); }
/* hover the stack: the photos underneath fan out a touch and become clickable */
.ys-stack:hover .ys-pol.placed:not(.is-top) {
  transform: rotate(var(--rot)) translate(calc(var(--tx) + var(--sx)), calc(var(--ty) + var(--sy))) scale(0.992);
  pointer-events: auto;
  cursor: pointer;
}
/* the top photo lifts and drifts just slightly on hover */
.ys-stack:hover .ys-pol.is-top {
  transform: rotate(var(--rot)) translate(calc(var(--tx) + 1.5%), calc(var(--ty) - 2%)) scale(1.012);
}
.ys-pol.placed:not(.is-top) { pointer-events: auto; cursor: pointer; }

/* ---- text column ---- */
.ys-text { width: clamp(300px, 42vw, 580px); display: flex; flex-direction: column; padding-top: 0; }
.story-heading {
  font-family: "canto", var(--ff-heading);
  font-size: clamp(34px, 6vw, 72px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 0;
}
.ys-tagline {
  font-family: "pfp", cursive;
  font-size: clamp(30px, 3.8vw, 52px);
  color: var(--ink-2);
  line-height: 1.05;
  margin: clamp(-26px, -1.8vw, -12px) 0 clamp(8px, 1.2vh, 14px);
}
.ys-years {
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
  margin-bottom: clamp(10px, 1.4vh, 16px);
}
.ys-year {
  background: none; border: none; cursor: pointer;
  font-family: "canto", var(--ff-heading);
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: 0.2em;
  color: var(--ink-3);
  padding: 2px 1px;
  transition: color 0.35s var(--ease);
}
.ys-year:hover { color: var(--ink-2); }
.ys-year.active { color: var(--ink); }

.ys-panels { position: relative; min-height: 200px; overflow: hidden; }
.ys-scroll { position: relative; will-change: transform; }
.ys-panel { position: static; opacity: 1; }
.ys-panel + .ys-panel { margin-top: 0; }
.ys-panel + .ys-panel::before { content: "\B7\B7\B7"; display: block; text-align: center; color: var(--ink-3); letter-spacing: 0.6em; font-size: 20px; line-height: 1; margin: 30px 0 28px; }
@keyframes ysIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ys-headline {
  font-family: var(--ff-heading);
  font-size: clamp(16px, 1.8vw, 22px);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.35;
  margin-bottom: 20px;
}
.ys-body { max-width: 580px; font-family: var(--ff-sans); font-size: clamp(13px, 1.2vw, 16px); line-height: 1.55; letter-spacing: 0; color: var(--ink-2); }
.ys-body p { margin-bottom: 12px; }
.ys-body p:last-child { margin-bottom: 0; }
.ys-note { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 10px; }

/* ---- mobile ---- */
@media (max-width: 900px) {
  .story-inner {
    flex-direction: column;
    width: 100%;
    gap: 16px;
  }
  .ys-panels { flex: none; min-height: 0; max-height: calc(60svh - 235px); overflow: hidden; }
  .ys-panel.active { position: relative; }
  .ys-stack {
    order: 1;
    justify-self: center;
    align-self: center;
    width: 100%;
    max-width: none;
    height: min(44vh, 376px);
    aspect-ratio: auto;
    overflow: visible;
    --step: clamp(44px, 15vw, 104px);
  }
  .ys-pol {
    inset: auto;
    left: 50%; top: 50%;
    width: auto;
    height: clamp(220px, 40vh, 360px);
    aspect-ratio: 1431 / 2151;
    transform:
      translate(-50%, -50%)
      translate(var(--tx), calc(var(--ty) - 6%))
      rotate(calc(var(--rot) + 7deg)) scale(1.04);
  }
  .ys-pol.placed {
    transform:
      translate(-50%, -50%)
      translate(var(--tx), var(--ty))
      rotate(var(--rot)) scale(1);
  }
  /* stack (not fan) on narrow windows; fan out slightly on hover */
  .ys-stack:hover .ys-pol.placed:not(.is-top) {
    transform:
      translate(-50%, -50%)
      translate(calc(var(--tx) + var(--sx)), calc(var(--ty) + var(--sy)))
      rotate(var(--rot)) scale(0.992);
  }
  .ys-stack:hover .ys-pol.is-top {
    transform:
      translate(-50%, -50%)
      translate(calc(var(--tx) + 1.5%), calc(var(--ty) - 2%))
      rotate(var(--rot)) scale(1.012);
  }
  .ys-text { order: 2; text-align: center; width: 100%; max-width: none; padding-top: 0; }
  .ys-years { justify-content: center; }
  .ys-year { font-size: clamp(18px, 4.5vw, 26px); }
  .ys-tagline { font-size: clamp(34px, 9.5vw, 46px); margin-top: -6px; margin-bottom: 4px; }
  .story-heading { font-size: clamp(42px, 11vw, 58px); }
  .ys-years { margin-bottom: 8px; }
  .ys-body { margin: 0 auto; max-width: 36ch; font-size: clamp(14px, 3.7vw, 16px); line-height: 1.5; }
  .ys-headline { font-size: clamp(14px, 3.5vw, 18px); }
}

/* =============================================
   TRAVEL — KINFOLK CARDS (June 2026)
   Three portrait cards on cream; click opens an
   editorial spread (image left, content right).
   ============================================= */
.travel-cards-section {
  position: relative;
  width: 100%;
  background: var(--cream);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(44px, 6vh, 72px) clamp(16px, 2.5vw, 40px);
}
.tvc-grid {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tvc-grid::-webkit-scrollbar { display: none; }
.tvc-grid.is-overflowing { cursor: grab; }
.tvc-grid.dragging { cursor: grabbing; scroll-snap-type: none; }
.tvc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: none; border: none; cursor: pointer;
  font-family: var(--ff-heading);
  font-size: 44px; line-height: 1;
  color: var(--ink);
  opacity: 0.5;
  padding: 8px 14px;
  transition: opacity 0.3s var(--ease);
  display: none;
}
.tvc-nav:hover { opacity: 1; }
.tvc-nav.show { display: block; }
.tvc-nav[disabled] { opacity: 0.15; cursor: default; }
.tvc-prev { left: clamp(2px, 1vw, 18px); }
.tvc-next { right: clamp(2px, 1vw, 18px); }
.tvc-card {
  position: relative;
  flex: 0 0 auto;
  width: min(clamp(320px, calc(33vw - 48px), 540px), calc((100svh - 200px) * 0.7273));
  scroll-snap-align: center;
  aspect-ratio: 8 / 11;
  overflow: hidden;
  cursor: pointer;
}
.tvc-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--ease);
}
.tvc-card:hover img { transform: scale(1.045); }
.tvc-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,26,33,0.55) 0%, rgba(20,26,33,0.12) 38%, rgba(20,26,33,0) 60%);
  transition: background 0.8s var(--ease);
}
.tvc-card:hover .tvc-shade {
  background: linear-gradient(to top, rgba(20,26,33,0.62) 0%, rgba(20,26,33,0.18) 42%, rgba(20,26,33,0.04) 70%);
}
.tvc-card-label {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(36px, 7%, 72px);
  text-align: center;
  color: var(--cream);
}
.tvc-card-title {
  font-family: var(--ff-heading);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 40px);
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}
.tvc-card-more {
  display: inline-block;
  font-family: var(--ff-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--cream);
  opacity: 0.82;
  transition: opacity 0.4s var(--ease);
}
.tvc-card:hover .tvc-card-more { opacity: 1; }

/* Detail — editorial spread on cream */
body.tv-lock { overflow: hidden; }
.tvd-frame {
  position: absolute; inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(48px, 8vh, 88px) clamp(24px, 5vw, 80px);
}
.tvd-media {
  display: none; /* image removed from detail view 2026-06-09 */
  aspect-ratio: 8 / 11;
  max-height: 78vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.tvd-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0;
}
.tvd-media.filled img { opacity: 1; }
.tvd-content {
  min-width: 0;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  max-height: 84vh;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 8px 4px 8px 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease) 0.35s, transform 0.55s var(--ease) 0.35s;
}
.tvd-content::-webkit-scrollbar { display: none; }
.tvd-title {
  font-family: var(--ff-heading);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 64px);
  color: var(--ink);
  line-height: 1.02;
  margin-bottom: 8px;
}
.tvd-subtitle {
  font-family: var(--ff-heading);
  font-style: italic;
  font-size: 21px;
  color: var(--atlantic);
  margin-bottom: 22px;
}
.tvd-panel { display: none; }
.tvd-panel.active { display: block; }
.tvd-intro {
  font-family: var(--ff-sans);
  font-size: 14.5px; line-height: 1.7;
  color: var(--ink-2);
  max-width: 54ch;
  margin-bottom: 26px;
}
.tvd-intro strong { color: var(--ink); font-weight: 600; }
.tvd-row {
  padding: 16px 0;
}
.tvd-row:last-of-type { border-bottom: 1px solid var(--cream-3); }
.tvd-row-label {
  font-family: var(--ff-sans);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.tvd-row-label .rec { color: var(--atlantic); letter-spacing: 0.1em; margin-left: 8px; }
.tvd-row-value { font-family: var(--ff-sans); font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.tvd-row-value strong { font-weight: 600; }
.tvd-row-note { font-family: var(--ff-sans); font-size: 13px; color: var(--ink-3); line-height: 1.6; margin-top: 4px; }
.tvd-tool {
  margin-top: 26px;
  border: 1px solid var(--cream-3);
  background: var(--cream-2);
  padding: 20px 22px;
}
.tvd-tool-label {
  font-family: var(--ff-sans);
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3); display: block; margin-bottom: 14px;
}
.tvd-tool-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tvd-endpoint { position: relative; cursor: pointer; }
.tvd-code {
  font-family: var(--ff-heading); font-size: 30px; color: var(--ink);
  display: block; line-height: 1;
}
.tvd-city { font-family: var(--ff-sans); font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; }
.tvd-endpoint select {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
}
.tvd-arrow { color: var(--atlantic); font-size: 18px; }
.tvd-result { font-family: var(--ff-sans); font-size: 13px; color: var(--atlantic); letter-spacing: 0.04em; }
.tvd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tvd-chip {
  font-family: var(--ff-sans);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  background: none; border: 1px solid var(--cream-3);
  color: var(--ink-2);
  padding: 7px 14px; cursor: pointer;
  transition: all 0.3s var(--ease);
}
.tvd-chip:hover { border-color: var(--atlantic); color: var(--atlantic); }
.tvd-chip.active { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.tvd-fav { padding: 14px 0; border-top: 1px solid var(--cream-3); }
.tvd-fav-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tvd-fav-name { font-family: var(--ff-heading); font-size: 19px; color: var(--ink); }
.tvd-fav-cat { font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.tvd-fav-desc { font-family: var(--ff-sans); font-size: 13px; line-height: 1.6; color: var(--ink-2); margin-top: 4px; }
.tvd-fav.hide { display: none; }
.tvd-close {
  position: absolute;
  top: clamp(20px, 3.5vh, 36px);
  right: clamp(20px, 3vw, 40px);
  z-index: 5;
  background: none; border: none; cursor: pointer;
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  opacity: 0.65;
  transition: opacity 0.3s var(--ease);
  padding: 8px;
}
.tvd-close:hover { opacity: 1; }
.tvd-close .x { font-size: 22px; line-height: 1; font-weight: 300; }

@media (max-width: 900px) {
  .travel-cards-section { padding: 56px 16px 32px; }
  .tvc-nav { color: var(--cream); opacity: 0.85; text-shadow: 0 1px 10px rgba(20,26,33,0.4); }

  .tvd-frame {
    padding: 68px 22px 28px;
    align-items: flex-start;
  }
  .tvd-media { aspect-ratio: auto; max-height: none; height: 100%; }
  .tvd-content { max-height: none; }
  .tvd-title { font-size: 36px; }
  .tvd-subtitle { font-size: 18px; margin-bottom: 16px; }
}
@media (max-width: 480px) {
  .tvc-card-title { font-size: 26px; }
  .tvd-code { font-size: 24px; }
  .tvd-tool-row { gap: 12px; }
}
/* =============================================
   SCROLL ARROWS (all viewports)
   ============================================= */
.scroll-wrap {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
  overflow: hidden;
}
.scroll-wrap > .favorites-grid {
  flex: 1; min-width: 0;
}
.scroll-arrow {
  flex: 0 0 40px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(246,244,241,0.92); border: 1px solid var(--cream-3);
  color: var(--ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 12px rgba(31,24,20,0.1);
  transition: background 0.2s, color 0.2s;
}
.scroll-arrow:hover { background: var(--ink); color: #fff; }
.scroll-arrow svg { width: 16px; height: 16px; pointer-events: none; }
/* Stay section now lives on cream — arrows use default cream/ink styles */

/* =============================================
   FOOTER
   ============================================= */
footer {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  padding: clamp(20px, 3vw, 30px) clamp(28px, 5vw, 72px) clamp(12px, 1.5vw, 18px);
}
.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1320px; margin: 0 auto;
}
.footer-cols {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding-bottom: clamp(8px, 1vw, 12px);
}
.footer-squiggle {
  position: relative; width: 100%; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 10' preserveAspectRatio='none' fill='none' stroke='%231F1814' stroke-width='1' stroke-linecap='round' stroke-opacity='0.3'><path d='M 2 5.1 C 60 4.0, 130 6.3, 210 4.5 S 360 6.4, 440 4.3 S 600 6.1, 690 5.0 S 850 4.4, 998 5.5'/></svg>") no-repeat center / 100% 100%;
  pointer-events: none;
  margin-bottom: clamp(12px, 1.6vw, 18px);
}
.footer-col-label {
  font-family: var(--ff-sans);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(31,24,20,0.38);
  margin-bottom: 8px;
}
.footer-links {
  display: flex; flex-direction: column; gap: 10px;
}
.footer-links.horizontal {
  flex-direction: row; flex-wrap: wrap; gap: 0 24px;
}
.footer-links a {
  font-family: var(--ff-sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.25s;
  line-height: 1.8;
}
.footer-links a:hover { color: var(--atlantic); }
.footer-links a .ext {
  display: inline-block; margin-left: 6px;
  font-size: 10px; opacity: 0.6;
}
.footer-meta {
  display: flex; justify-content: flex-end; align-items: center;
}
@media (max-width: 900px) {
  .footer-cols { grid-template-columns: 1fr; gap: 14px; }
  .footer-cols .footer-col:nth-child(3) { display: none; } /* drop Jump-to on mobile (nav covers it) */
  .footer-meta { display: none; }
}
@media (max-width: 480px) {
  footer { padding: 18px 20px 12px; }
  .footer-cols { gap: 12px; padding-bottom: 10px; }
  .footer-links a { font-size: 10px; letter-spacing: 0.2em; }
  .footer-links.horizontal { gap: 0 18px; }
}

/* =============================================
   ADMIN
   ============================================= */
.dash-header { background: var(--ink); padding: 28px 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.dash-title { font-family: var(--ff-heading); font-size: 24px; font-weight: 400; color: #fff; }
.dash-title span { font-size: 11px; font-weight: 300; font-style: normal; color: rgba(255,255,255,0.3); letter-spacing: 0.12em; margin-left: 12px; vertical-align: middle; }
.dash-actions { display: flex; gap: 10px; }
.btn-export { padding: 10px 20px; background: var(--atlantic); color: #fff; font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; border: none; cursor: pointer; transition: background 0.2s; }
.btn-export:hover { background: var(--atl-mid); }
.btn-logout { padding: 10px 20px; background: transparent; color: rgba(255,255,255,0.4); font-size: 9px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.15); cursor: pointer; transition: all 0.2s; }
.btn-logout:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.dash-body { padding: 40px 48px 80px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; margin-bottom: 40px; }
.stat-card { background: var(--cream-2); padding: 24px 20px; }
.stat-n { font-family: var(--ff-heading); font-size: 44px; font-weight: 400; line-height: 1; color: var(--ink); }
.stat-lbl { font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.capacity-bar-wrap { background: var(--cream-2); padding: 24px 28px; margin-bottom: 40px; }
.cap-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cap-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); }
.cap-num { font-family: var(--ff-heading); font-size: 20px; color: var(--ink); }
.cap-track { width: 100%; height: 4px; background: var(--cream-3); }
.cap-fill { height: 100%; background: var(--atlantic); transition: width 0.8s var(--ease); }
.table-section-title { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead tr { border-bottom: 1.5px solid var(--ink); }
th { text-align: left; padding: 10px 14px 10px 0; font-size: 8.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--cream-3); color: var(--ink-2); font-weight: 300; vertical-align: top; }
tr:last-child td { border-bottom: none; }
.badge { display: inline-block; padding: 3px 9px; font-size: 8.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.badge-yes { background: rgba(107,124,94,0.15); color: #435233; }
.badge-no  { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
.dash-empty { text-align: center; padding: 64px 0; font-size: 14px; font-weight: 300; color: var(--ink-3); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  #nav { padding: 18px 24px; }
  .nav-links { display: none; }
  .dash-header { padding: 24px; }
  .dash-body { padding: 32px 24px 60px; }

  /* Mobile card sizing overrides */
    .fav-card { flex: 0 0 220px; }

  /* Smaller arrows on mobile */
  .scroll-arrow { flex: 0 0 32px; width: 32px; height: 32px; }
  .scroll-wrap { gap: 6px; }
  }
@media (max-width: 540px) {
  .hero-content { padding: 28px 24px; }
  /* Stack hero meta vertically on mobile — no pipes */
  .hero-meta { flex-direction: column; align-items: center; gap: 6px; }
  .hero-meta span { padding: 0; }
  .hero-meta span:not(:last-child)::after { display: none; }
}

/* =============================================
   COMPREHENSIVE MOBILE FIX
   ============================================= */

/* -- Prevent iOS Safari horizontal viewport expansion -- */
#main-site { max-width: 100vw; overflow-x: clip; }

/* -- 900px: Tablet / large phone -- */
@media (max-width: 900px) {
  /* Hero: tame the scale that leaks on iOS */
  .hero-wrap img { transform: none; }
  .hero-wrap.loaded img { transform: none; }

  /* Hero names: scale down for narrower screens */
  .hero-names { font-size: clamp(44px, 10vw, 88px); letter-spacing: -0.02em; }
  .rsvp-mq-group { font-size: clamp(44px, 10vw, 88px); }
  /* Hero meta: slightly smaller on tablet */
  .hero-meta span { font-size: clamp(13px, 3.6vw, 18px); }

  /* Schedule day cards: reduce generous padding */
        
  /* Stay cards: reduce padding */

  /* Section headings: scale gracefully */
  .section-heading { font-size: clamp(26px, 5.5vw, 40px); }
  .travel-heading { font-size: clamp(34px, 9vw, 52px); }
  /* RSVP: collapse to single column on mobile */
  #rsvp-modal { grid-template-columns: 1fr; }
  .rsvp-left {
    position: relative; height: auto;
    flex-direction: row; justify-content: center; gap: 24px;
    padding-top: 0; padding-bottom: 0;
    margin-bottom: 8px;
  }
  .rsvp-ocean-cutout { display: none; }
  .rsvp-progress { flex-direction: row; }
  .pdot { flex-direction: column; gap: 8px; }
  .pdot-line { width: auto; flex: 1; height: 1px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 10' preserveAspectRatio='none' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='1' stroke-linecap='round'><path d='M 2 5.1 C 60 4.0, 130 6.3, 210 4.5 S 360 6.4, 440 4.3 S 600 6.1, 690 5.0 S 850 4.4, 998 5.5'/></svg>") no-repeat center / 100% 100%;
    margin: 0 0 22px 0; align-self: flex-start; margin-top: 4px;
  }
  .rsvp-right { padding-left: 0; padding-top: 0; }
  .rsvp-heading { font-size: clamp(40px, 11vw, 64px); }
  .travel-subtitle, .rsvp-subtext { font-size: clamp(15px, 3.5vw, 20px); }

  /* RSVP person cards: fit narrow screens */
  .person-card { padding: 24px 0; }
  .event-toggle { padding: 12px 14px; gap: 12px; }
  .party-member-row { padding: 18px 0; }


  /* Footer: handled by inline media queries */
}

/* -- 480px: Standard phone -- */
@media (max-width: 480px) {
  /* Hero names: even smaller */
  .hero-names { font-size: clamp(36px, 9.5vw, 56px); letter-spacing: -0.02em; }
  .hero-meta span { font-size: 10.5px; letter-spacing: 0.16em; }

  /* Section padding: tighter on phones */
  .section,
  .story-section,
  .travel-section { padding: clamp(36px, 5vw, 56px) 20px; }
  #rsvp-modal { padding: clamp(28px, 4vw, 44px) 20px; }
  .rsvp-heading { font-size: clamp(36px, 10vw, 52px); }

  /* Schedule: compact for phones */        .excursion-tags { gap: 5px; }
  .etag { font-size: 9px; padding: 4px 9px; }

  /* Compact countdown: smaller on phones */
  .cd-compact-num { font-size: clamp(24px, 7vw, 32px); }
  .cd-compact-sep { font-size: clamp(16px, 5vw, 24px); padding-bottom: 10px; }
  .cd-compact-row { gap: 8px; }

  /* RSVP: tighter */
  .rsvp-inner { padding: 0; }
  .person-card { padding: 22px 0; }
  .event-toggle { padding: 11px 12px; }

  /* FAQ: comfortable tapping */
  .faq-q { padding: 20px 0; }
  .faq-qtext { font-size: clamp(15px, 4vw, 19px); }
  .faq-ans-inner { font-size: 14px; }

  /* Story photo: smaller on phones */

  /* Nav: tighter padding */
  #nav { padding: 16px 18px; }
  .nav-logo { font-size: 19px; letter-spacing: 0; }

  /* Wave dividers: shorter on mobile */
  .wave-divider svg { height: clamp(32px, 5vw, 48px); }

  /* Section divider: smaller */
  .section-divider { padding: 0 20px; }
}

/* -- 360px: Very small phones -- */
@media (max-width: 360px) {
  .hero-names { font-size: 34px; letter-spacing: -0.02em; }
  .hero-meta span { font-size: 9.5px; letter-spacing: 0.14em; }
    #nav { padding: 14px 14px; }
  .section,
  .story-section,
  .travel-section,
  #rsvp-modal { padding-left: 16px; padding-right: 16px; }
  .schedule-section,
}

/* Stay masonry responsive */
@media (max-width: 768px) {
  .stay-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 28px;
  }
  .stay-detail-col {
    padding: 0 !important;
  }
  .stay-detail-col .col-divider { display: none; }
  [data-pos="1"] { grid-column: 1/3 !important; grid-row: 1/3 !important; }
  [data-pos="2"] { grid-column: 1/2 !important; grid-row: 3/4 !important; }
  [data-pos="3"] { grid-column: 2/3 !important; grid-row: 3/4 !important; }
  [data-pos="4"] { grid-column: 1/2 !important; grid-row: 4/6 !important; }
  [data-pos="5"] { grid-column: 2/3 !important; grid-row: 4/5 !important; }
  [data-pos="6"] { grid-column: 2/3 !important; grid-row: 5/6 !important; }
  [data-pos="7"] { grid-column: 1/3 !important; grid-row: 6/7 !important; }
  [data-pos="8"] { grid-column: 1/3 !important; grid-row: 7/8 !important; }
  [data-pos="9"] { grid-column: 1/2 !important; grid-row: 8/9 !important; }
  [data-pos="10"] { grid-column: 2/3 !important; grid-row: 8/9 !important; }
  [data-pos="11"] { grid-column: 1/2 !important; grid-row: 9/11 !important; }
  [data-pos="12"] { grid-column: 2/3 !important; grid-row: 9/10 !important; }
  [data-pos="13"] { grid-column: 2/3 !important; grid-row: 10/11 !important; }
  [data-pos="14"] { grid-column: 1/3 !important; grid-row: 11/12 !important; }
}
@media (max-width: 480px) {
  .stay-masonry { grid-template-rows: repeat(12, 150px); gap: 8px; }
  .stay-masonry-wrap { padding: 0 12px 48px; }
  .stay-card-inner { padding: 16px 12px; gap: 8px; }
  .stay-card-title { font-size: 17px; }
  .stay-card-body { font-size: 11.5px; max-width: 200px; }
  .stay-details { grid-template-columns: 1fr 1fr; gap: 20px 20px; }
}


/* === Our Story handwritten blurb (Postcards From Portugal, Regular 3) — added 2026-06-12 === */
.ys-headline{ display:none; }   /* taglines removed per Finn — blurb stands alone */
/* === end handwritten blurb === */

/* === Sticky stacking sections — added 2026-06-12 === */
#home, #our-story, #stay, #schedule { position: sticky; top: 0; }
#home { z-index: 1; }
#our-story { z-index: 2; }
#stay { z-index: 4; }
#schedule { z-index: 3; }
#faq { position: relative; z-index: 6; background: var(--cream); min-height: 100vh; min-height: 100svh; }
#our-story { background: var(--cream); }
#main-site > footer { position: relative; z-index: 7; }
/* === end sticky stacking === */

/* === Custom cursor: minimal dot — 2026-07-31 === */
@media (pointer: fine){
  body.fc, body.fc * { cursor: none; }
  body.fc input, body.fc textarea, body.fc [contenteditable="true"], body.fc select { cursor: text; }
}
#cur-dot{ position: fixed; top: 0; left: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 2000000; opacity: 0; will-change: transform; transition: opacity .18s ease, width .18s var(--ease), height .18s var(--ease), margin .18s var(--ease); }
body.fc.fr-on #cur-dot{ opacity: 1; }
body.cur-hover #cur-dot{ width: 16px; height: 16px; margin: -8px 0 0 -8px; }
body.cur-down #cur-dot{ width: 6px; height: 6px; margin: -3px 0 0 -3px; }
/* === end custom cursor === */


/* ==== 2/14  mobile-zoom-safety ========================== */

/* ---- Mobile zoom stability -------------------------------------------------
   Pinch-zoom forces the browser to re-rasterise everything at the new scale.
   Blend modes, permanent GPU layers and hundreds of image-clipped glyphs made
   that exceed memory on phones and killed the tab. These are touch-only. */
@media (pointer: coarse) {
  /* the custom cursor is desktop-only, but its blend mode forced the whole
     page backdrop to composite on every device */
  #cur-dot { display: none !important; }

  /* release permanently-promoted layers we don't animate on touch */
  .arch-img, .arch-abs, .ys-scroll, .ss-clone { will-change: auto !important; }
}


/* ==== 3/14  stack-pause ================================= */

/* anchor pause — each sticky section holds a beat before the next pulls up. Tune --stack-pause. */
:root { --stack-pause: 24vh; }
#our-story, #stay, #schedule { min-height: calc(100svh + var(--stack-pause)) !important; }
#our-story, #stay { padding-bottom: calc(clamp(36px, 4.5vh, 60px) + var(--stack-pause)) !important; }


/* ==== 4/14  hero-final ================================== */

/* hero meta dividers: clean straight lines (not squiggles), everywhere */
.hero-meta span:not(:last-child)::after { background: #F6F4F1 !important; width: 1px !important; height: 0.95em !important; }
/* hamburger: 2 lines, scalable via --hb (desktop 25px / mobile 20px), thickness 1.5px */
.nav-hamburger { --hb: 25px; width: var(--hb) !important; height: var(--hb) !important; position: relative !important; gap: 0 !important; }
.nav-hamburger span { position: absolute !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 1.5px !important; top: 50% !important; margin-top: -0.75px !important; transition: transform 0.35s var(--ease, ease) !important; }
.nav-hamburger span:nth-child(2) { display: none !important; }
.nav-hamburger span:nth-child(1) { transform: translateY(calc(var(--hb) * -0.13)) !important; }
.nav-hamburger span:nth-child(3) { transform: translateY(calc(var(--hb) * 0.13)) !important; }
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) !important; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) !important; }
/* phone hero: tighter photo crop + bigger title + one-line info */
@media (max-width: 820px) {
  .hero-wrap img { object-position: center center !important; transform: none !important; } /* crop baked into hero-mobile.webp */
  .hero-names { top: 23% !important; font-size: 14.5vw !important; } /* 23.8% puts the wordmark's ink on the same baseline the typed "F&R" sat on */
  .hero-names .hn-full { display: none !important; }
  /* The wordmark replaces the typed "F&R" on phones. Plain <img> rather than a
     CSS mask: masks are treated as cross-origin resources on file:// previews
     and need extra support on older iOS. */
  .hero-names .hn-abbr { display: block !important; width: 45vw; margin: 0 auto 0 3vw; font-size: 0 !important; letter-spacing: 0 !important; }
  /* .hero-wrap img is absolutely positioned and inset:0 for the background photo,
     so the wordmark has to opt out of that or it contributes no height. */
  .hero-names .hn-abbr img { position: static !important; inset: auto !important; transform: none !important;
    width: 100%; height: auto; display: block; object-fit: contain; }
  .rsvp-mq-group { font-size: 25vw !important; } /* targets the GROUP, as it did before the strip rebuild */
  .hero-meta { flex-direction: row !important; flex-wrap: nowrap !important; gap: 0 !important; align-items: center !important; justify-content: center !important; }
  .hero-meta span { padding: 0 11px !important; font-size: clamp(7px, 2.1vw, 10px) !important; letter-spacing: 0.13em !important; }
  .hero-meta span:first-child { padding-left: 11px !important; }
  .hero-meta span:not(:last-child)::after { display: block !important; }
  .nav-hamburger { --hb: 20px; }
}


/* ==== 5/14  stay-split ================================== */

/* === Stay split reveal (Our Story -> Stay) — 2026-06-13 === */
/* the split IS the entrance, so make Stay + clone content fully visible (bypass fade-up stagger) */
#stay .fade-up, .ss-clone .fade-up { opacity: 1 !important; transform: none !important; }
/* layout tweak: lift carousel 3vh + tighten details -32px (real Stay AND clones) — after the reset so transform wins */
#stay .stay-arcade-viewport, .ss-clone .stay-arcade-viewport { margin-top: -3vh !important; }
#stay .stay-details, .ss-clone .stay-details { margin-top: -12px !important; }
#stay .stay-arcade-head, .ss-clone .stay-arcade-head { font-family: "canto", var(--ff-heading) !important; }
#stay .stay-detail-col, .ss-clone .stay-detail-col { text-align: center; align-items: center; }
/* transition track + sticky stage + two clipped copies of the exact Stay */
.stay-split-stage { position: fixed; inset: 0; z-index: 50; overflow: hidden; pointer-events: none; visibility: hidden; }
.ss-clone { position: absolute; inset: 0; min-height: 0 !important; height: var(--vph, 100lvh); will-change: transform; }


/* ==== 6/14  sched-entrance ============================== */

/* === Schedule entrance (alt-sides) — real section, no clone — 2026-06-13 === */
/* Cream frame is drawn as bars ON each band, present at REST and DURING entrance, so a band
   looks final the instant it slides in (cream travels with it) and nothing changes at lock-in. */
#schedule .tript { gap: 0; padding: 0; background: var(--cream); }
#schedule .panel::before, #schedule .panel::after { content: ''; position: absolute; left: 0; right: 0; height: 4.5px; background: var(--cream); z-index: 4; pointer-events: none; }
#schedule .panel::before { top: 0; }
#schedule .panel::after { bottom: 0; }
#schedule .panel[data-day="0"]::before { height: 9px; }
#schedule .panel[data-day="2"]::after { height: 9px; }
/* during entrance ONLY: pin the real tript to the viewport + section transparent so Our Story shows behind while the real bands slide in from alternating sides */
#schedule.sched-entering { background: transparent !important; }
#schedule.sched-entering .tript { position: fixed; top: 0; left: 0; right: 0; height: 100dvh; z-index: 50; pointer-events: none; background: transparent; }
#schedule.sched-entering .panel { will-change: transform; pointer-events: auto; cursor: pointer; }
#schedule.sched-entering .sched-expanded { position: fixed; z-index: 2000001; }
#schedule { min-height: calc(100svh + 70vh) !important; }


/* ==== 7/14  rsvp-marquee ================================ */

/* === RSVP marquee banner (above footer) — restored 2026-08-12 ===
   Each letter is its own element with the photo showing through via
   background-clip:text. It was replaced in August by a single pre-rendered
   tiling strip while chasing the pinch-zoom crash - but the crash turned out to
   be the mounted full-screen overlays, not this. Restored, with one change: the
   track no longer forces its own compositing layer (will-change / translateZ /
   backface-visibility removed), since it is ~4500px wide and that is the one
   thing here worth keeping off the GPU.
   NOTE the background-color on .rsvp-ltr: if the texture ever fails to load the
   letters still render in ink. The strip version had no fallback, which is why
   a failed image left an empty band. */
.rsvp-mq{ position: relative; z-index: 7; background: var(--cream); overflow: hidden; padding: clamp(16px,3vh,34px) 0; margin-top: clamp(-64px, -6vh, -30px); cursor: pointer; contain: layout paint; }
.rsvp-mq-track{ display: flex; width: max-content; white-space: nowrap; animation: rsvpMq 32s linear infinite; }
.rsvp-mq-group{ font-family: "canto", var(--ff-heading); text-transform: uppercase; font-size: clamp(38px, 13vw, 200px); line-height: 1; color: var(--ink); word-spacing: 0.35em; padding-right: 0.35em; }
.rsvp-word{ display: inline-block; transition: transform .25s var(--ease, ease); }
.rsvp-ltr{ display: inline-block; font-weight: 700; background-color: var(--ink); background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("img/rsvp-tex.jpg"); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.rsvp-word.grow{ transform: scale(1.2); }
/* see open()/close() in the schedule script: while a day is expanded the whole
   schedule section has to outrank the sections that slide over it, because the
   expanded layer is trapped in #schedule's stacking context. */
#schedule.sched-open{ z-index: 9; }
@keyframes rsvpMq{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (max-width: 600px){ .rsvp-mq-group .rsvp-word:nth-child(n+9){ display: none; } .rsvp-mq-track{ animation-duration: 22s; } }
@media (prefers-reduced-motion: reduce){ .rsvp-mq-track{ animation: none; } }


/* ==== 8/14  sched-cue =================================== */

@keyframes cueBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }


/* ==== 9/14  our-story-scroll ============================ */

/* Our Story scroll-through-years: extra pinned runway, content stays viewport-centered */
#our-story { min-height: calc(100svh + 180svh) !important; padding-bottom: calc(clamp(36px, 4.5vh, 60px) + 180svh) !important; }


/* ==== 10/14  moodboard-kf ================================ */
@keyframes mbSpin{ to{ transform: rotate(360deg); } }

/* ==== 11/14  moodboard-css =============================== */

.mb-modal{ position: fixed; inset: 0; z-index: 9100; background: var(--cream); overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity .3s ease; -webkit-overflow-scrolling: touch; }
.mb-modal.open{ opacity: 1; pointer-events: auto; }
.mb-inner{ max-width: 1180px; margin: 0 auto; padding: clamp(56px,9vh,104px) clamp(20px,4vw,52px) 72px; }
.mb-head{ text-align: center; margin-bottom: clamp(30px,4.5vw,50px); }
.mb-title{ font-family: "canto", var(--ff-heading); text-transform: uppercase; font-weight: 400; font-size: clamp(34px,6vw,68px); line-height: 1.0; letter-spacing: -0.01em; color: var(--ink); }
.mb-grid{ columns: 4; column-gap: 16px; }
.mb-item{ break-inside: avoid; margin: 0 0 16px; display: block; border-radius: 4px; overflow: hidden; background: var(--cream-2); border: 1px solid var(--cream-3); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.mb-item img{ display: block; width: 100%; height: auto; }
a.mb-item{ text-decoration: none; }
a.mb-item:hover{ transform: translateY(-3px); box-shadow: 0 14px 34px rgba(31,24,20,0.14); }
.mb-state{ text-align: center; padding: clamp(60px,12vh,140px) 0; font-family: var(--ff-sans); font-size: 14px; color: var(--ink-3); letter-spacing: 0.02em; }
.mb-spin{ width: 30px; height: 30px; margin: 0 auto 18px; border: 2px solid var(--cream-3); border-top-color: var(--atlantic); border-radius: 50%; animation: mbSpin 0.85s linear infinite; }
.mb-foot{ text-align: center; margin-top: clamp(30px,5vw,52px); }
.mb-foot a{ font-family: var(--ff-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; transition: color .25s; }
.mb-foot a:hover{ color: var(--atlantic); }
.mb-foot a .ext{ display: inline-block; margin-left: 6px; font-size: 10px; opacity: 0.6; }
@media (max-width: 1000px){ .mb-grid{ columns: 3; } }
@media (max-width: 680px){ .mb-grid{ columns: 2; column-gap: 12px; } .mb-item{ margin-bottom: 12px; } }
@media (max-width: 380px){ .mb-grid{ columns: 2; } }


/* ==== 12/14  travel-modal-css ============================ */

/* === Travel popup (getting there) — 2026-06-15 === */
.travel-modal{ position: fixed; inset: 0; z-index: 9000; background: var(--cream); overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.travel-modal.open{ opacity: 1; pointer-events: auto; }
.travel-inner{ max-width: 760px; margin: 0 auto; padding: clamp(64px,10vh,120px) clamp(24px,5vw,56px) 80px; }
#travel-modal .travel-sec2{ margin-top: clamp(44px,7vw,80px); }
#travel-modal .tv-tabs{ display:flex; align-items:baseline; gap: clamp(20px,4vw,42px); margin-bottom: clamp(16px,2.4vw,26px); }
#travel-modal .tv-tab{ font-family:"canto",var(--ff-heading); text-transform:uppercase; font-size: clamp(30px,5vw,60px); line-height:1; letter-spacing:0; color: var(--ink-3); background:none; border:none; padding:0; cursor:pointer; transition: color .25s var(--ease); }
#travel-modal .tv-tab.active{ color: var(--ink); }
#travel-modal .tv-tab:hover{ color: var(--ink-2); }
#travel-modal .tv-tab.active:hover{ color: var(--ink); }
#travel-modal .tv-panel[hidden]{ display:none; }
#travel-modal .tv-panel .tv-ap:first-child{ margin-top: 0; }
#travel-modal .tv-tab-sep{ font-family:"canto",var(--ff-heading); font-size: clamp(30px,5vw,60px); line-height:1; color: var(--cream-3); }
#travel-modal .tvd-result{ flex: 1 1 auto; min-width: 130px; margin-left: 10px; display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap: 2px; }
#travel-modal .tvd-r-time{ font-family:"canto",var(--ff-heading); font-size: 32px; color: var(--ink); line-height: 1; }
#travel-modal .tvd-r-status{ font-family:"canto",var(--ff-heading); font-size: 18px; color: var(--atl-mid); line-height: 1.1; }
#travel-modal .tv-rec-badge{ display:inline-block; font-family:var(--ff-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--atlantic); vertical-align: middle; margin-left: 14px; }
#travel-modal .tv-link{ color: var(--atlantic); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: opacity .2s; }
#travel-modal .tv-link:hover{ opacity: 0.65; }
#travel-modal .tv-ap{ margin-top: clamp(30px,4.5vw,48px); }
#travel-modal .tv-ap-name{ font-family:"canto",var(--ff-heading); font-size: clamp(24px,3vw,40px); color: var(--ink); margin-bottom: 8px; }
#travel-modal .tv-ap-note{ font-family: var(--ff-sans); font-size: clamp(14px,1.5vw,16px); color: var(--ink-2); line-height: 1.6; max-width: 58ch; }
#travel-modal .tv-meta{ margin-top: 20px; }
#travel-modal .tv-line{ display:flex; gap: clamp(14px,3vw,28px); padding: 14px 0; border-top: 1px solid var(--cream-3); }
#travel-modal .tv-line:first-child{ border-top: none; padding-top: 0; }
#travel-modal .tv-k{ font-family: var(--ff-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); flex: 0 0 120px; padding-top: 3px; }
#travel-modal .tv-rec{ display:block; color: var(--atlantic); font-weight: 600; letter-spacing: 0.18em; margin-top: 3px; }
#travel-modal .tv-v{ font-family: var(--ff-sans); font-size: 15px; color: var(--ink); line-height: 1.5; }
#travel-modal .tv-note{ display:block; font-size: 13px; color: var(--ink-3); margin-top: 5px; line-height: 1.5; }
#travel-modal .tv-tool{ margin-top: 22px; padding: 20px 22px; background: var(--cream-2); border: 1px solid var(--cream-3); border-radius: 10px; }
#travel-modal .tv-tool-label{ display:block; font-family: var(--ff-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
#travel-modal .tv-tool-row{ display:flex; align-items:center; gap: 14px; flex-wrap: wrap; }
#travel-modal .tv-select{ font-family: var(--ff-sans); font-size: 15px; color: var(--ink); background: var(--cream); border: 1px solid var(--cream-3); border-radius: 7px; padding: 11px 13px; min-width: 220px; cursor: pointer; }
#travel-modal .tv-arrow{ color: var(--ink-3); font-size: 18px; }
#travel-modal .tv-dest{ font-family:"canto",var(--ff-heading); font-style: italic; font-size: 20px; color: var(--ink); }
#travel-modal .tv-result{ font-family: var(--ff-sans); font-size: 15px; font-weight: 600; color: var(--atlantic); margin-top: 14px; min-height: 1em; }
.travel-title{ font-family: "canto", var(--ff-heading); text-transform: uppercase; font-size: clamp(34px,6vw,68px); color: var(--ink); line-height: 1; margin-bottom: clamp(20px,3vh,34px); }
.travel-sec2{ margin-top: clamp(36px,6vh,64px); }
.travel-close{ position: fixed; top: clamp(16px,2.5vw,28px); right: clamp(16px,2.5vw,28px); z-index: 10; width: 24px; height: 24px; padding: 0; background: none; border: none; color: var(--ink); cursor: pointer; }
.travel-close span{ position: absolute; left: 0; right: 0; width: 100%; height: 1.5px; top: 50%; margin-top: -0.75px; background: currentColor; border-radius: 1px; }
.travel-close span:nth-child(1){ transform: rotate(45deg); }
.travel-close span:nth-child(2){ display: none; }
.travel-close span:nth-child(3){ transform: rotate(-45deg); }
.faq-link{ font-weight: 600; cursor: pointer; transition: opacity .2s; }
/* Dropped from this rule 2026-08-12 - these declarations never took effect on the
   live site (font-weight did, colour and underline did not), so applying them now
   would visibly change the FAQ links. Dropped: color: var(--atlantic); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; text-decoration-thickness: 2px */
.faq-link:hover{ opacity: 0.7; }


/* ==== 13/14  wc-swatch-css =============================== */
.wc-swatches{ display:flex; gap:22px; margin-top:16px; flex-wrap:wrap; }.wc-sw{ margin:0; }.wc-chip{ display:block; width:104px; height:104px; border-radius:5px; background-size:cover; background-position:center; }.wc-sw figcaption{ margin-top:10px; display:flex; flex-direction:column; gap:1px; }.wc-role{ font-family:var(--ff-sans); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-3); }.wc-color{ font-family:var(--ff-heading); font-size:16px; color:var(--ink); }@media(max-width:480px){ .wc-chip{ width:88px; height:88px; } }

/* ==== 14/14  jump-pt-css ================================= */
.jump-pt{display:block;height:0;margin:0;padding:0;border:0;font-size:0;line-height:0;visibility:hidden;}