/* =====================================================================
   Nik & Oli — Editorial Sunset
   Alternate design build. Shared stylesheet for all pages.
   Palette: terracotta / ocean teal / cream
   Type: Nik's self-hosted fonts (same as the original site) —
   TAN Mignon/Grandeur/Paradiso (display caps), Hatton (names/dates/numerals),
   Breathing (script), Comfortaa (body).
   ===================================================================== */

/* ---------- self-hosted fonts (match the original site) ---------- */
@font-face { font-family:'TAN Mignon';   src:url('../fonts/TAN-Mignon.woff2') format('woff2');     font-weight:400; font-display:block; }
@font-face { font-family:'TAN Grandeur'; src:url('../fonts/TAN-Grandeur.woff2') format('woff2');   font-weight:400; font-display:block; }
@font-face { font-family:'TAN Paradiso'; src:url('../fonts/TAN-Paradiso.woff2') format('woff2');   font-weight:400; font-display:block; }
@font-face { font-family:'Breathing';    src:url('../fonts/Breathing.woff2') format('woff2');      font-weight:400; font-display:block; }
@font-face { font-family:'Best Light';   src:url('../fonts/Best-Light.woff2') format('woff2');     font-weight:400; font-display:block; }
@font-face { font-family:'Hatton';       src:url('../fonts/Hatton-Regular.woff2') format('woff2'); font-weight:400; font-display:block; }
@font-face { font-family:'Hatton';       src:url('../fonts/Hatton-Bold.woff2') format('woff2');    font-weight:700; font-display:block; }
@font-face { font-family:'Comfortaa';    src:url('../fonts/Comfortaa-Light.woff2') format('woff2');   font-weight:300; font-display:swap; }
@font-face { font-family:'Comfortaa';    src:url('../fonts/Comfortaa-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Comfortaa';    src:url('../fonts/Comfortaa-Bold.woff2') format('woff2');    font-weight:700; font-display:swap; }

:root{
  /* surfaces */
  --cream:#F7F0E2;        /* page background */
  --card:#FCF8EE;         /* cards / invitation / postcards */
  --card2:#faf3e4;        /* gradient pair */
  --card3:#f4ead4;
  --sand:#efe6d2;         /* alternating band */
  /* accents — Nik's jewel-tone palette (from her Pinterest mood board):
     deep burgundy + olive green + aubergine + raspberry + gold.
     NOTE: legacy var names kept (--terra now = burgundy, --teal now = olive). */
  --terra:#6E1F3A;        /* primary: deep burgundy / wine */
  --terra-l:#8a2c4c;
  --terra-d:#531428;
  --teal:#5a6630;         /* secondary: olive green */
  --teal-l:#74813f;
  --ink:#2E1622;          /* aubergine — dark text / footer */
  --magenta:#9d2257;      /* raspberry pop */
  --gold:#c1974a;         /* gilt accent */
  --gold-d:#a9772f;
  --foil:linear-gradient(100deg,#a9772f 0%,#e4c178 16%,#c1974a 34%,#f1d894 52%,#b8863a 70%,#e2bf6a 86%,#a9772f 100%);
  /* text */
  --body:#3a342c;
  --body2:#5a5346;
  --muted:#8A7E68;
  --muted2:#9a8f78;
  --muted3:#6a6253;
  /* on-dark */
  --peach:#edc8cf;        /* blush rose — scripts/eyebrows on dark bands */
  --peach2:#f3d8dc;
  --cream-on-dark:#F4EFE2;
  --cream2:#FBF5E9;
  --teal-text:#e8e6d4;    /* body text on olive bands */
  /* lines */
  --hair:#cdbf9f;
  --hair2:#e7dcc4;
  --hair3:#ece1c9;
  --hair-soft:#b6ab92;
  /* type — Nik's self-hosted fonts */
  --mignon:'TAN Mignon', Georgia, serif;       /* section / page display caps */
  --grand:'TAN Grandeur', Georgia, serif;      /* big statement caps: RSVP, Request your room */
  --paradiso:'TAN Paradiso', Georgia, serif;   /* hero + footer couple name */
  --hatton:'Hatton', Georgia, serif;           /* names, dates, numerals, running serif */
  --script:'Breathing', cursive;               /* romantic script accents (was Ballet) */
  --bestlight:'Best Light', cursive;           /* secondary script */
  --serif:var(--hatton);                        /* default serif = mixed-case Hatton */
  --display:var(--mignon);                      /* default display = TAN Mignon (uppercase) */
  --sans:'Comfortaa', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;   /* clip (not hidden) so position:sticky keeps working */
}
/* ---- paper texture overlay (revert: remove these two rules) ---- */
body::after{
  content:'';
  position:fixed; inset:0;
  background:url('../images/paper.png') center/cover no-repeat;
  mix-blend-mode:overlay;
  opacity:.12;
  pointer-events:none;
  z-index:9000;
}
h1,h2,h3,h4,p{ margin:0; }
img{ display:block; max-width:100%; }
a{ color:inherit; }

/* ---------- keyframes ---------- */
@keyframes sway{ 0%,100%{ transform:rotate(-3deg);} 50%{ transform:rotate(3deg);} }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-10px) rotate(var(--r,0deg)); } }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; }
.reveal.d2{ transition-delay:.24s; }
.reveal.d3{ transition-delay:.36s; }

/* =====================================================================
   LOADER
   ===================================================================== */
.loader{
  position:fixed; inset:0; z-index:1000;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .9s ease, visibility .9s;
}
body.ready .loader{ opacity:0; visibility:hidden; }
.loader-mark{
  font-family:var(--hatton); font-weight:300;
  font-size:2rem; letter-spacing:.4em;
  color:var(--gold); text-indent:.4em;
  opacity:0; animation:markIn 1.4s ease .2s forwards;
}
@keyframes markIn{ from{opacity:0;transform:translateY(8px)} to{opacity:.95;transform:none} }

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 3rem;
  transition:background .5s ease, padding .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.nav.scrolled{
  background:#5d2133;
  backdrop-filter:blur(10px);
  padding:1rem 3rem;
  box-shadow:0 1px 0 rgba(0,0,0,.2);
}
.nav-logo{
  font-family:var(--mignon); font-weight:400; font-size:1.05rem;
  letter-spacing:.28em; text-indent:.28em; text-decoration:none;
  color:var(--cream-on-dark); transition:color .5s ease;
  line-height:1; padding-top:.22em;
}
.nav-logo .amp{ font-family:var(--script); font-size:1.3em; letter-spacing:0; color:var(--gold); transition:color .5s ease; }
.nav-links{
  display:flex; gap:2.4rem; list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-family:var(--sans); font-size:.62rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--cream-on-dark); text-decoration:none; opacity:.78;
  position:relative; padding-bottom:3px;
  transition:opacity .3s, color .5s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .4s ease;
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ width:100%; }
.nav-links a.active{ opacity:1; }
.nav-links a.active::after{ width:100%; }
.nav.scrolled .nav-links a{ opacity:.82; }
.nav.scrolled .nav-links a:hover{ opacity:1; }

.nav-right{
  display:flex; align-items:center; gap:1.4rem;
}
.nav-rsvp{
  font-family:var(--hatton); font-size:.7rem; font-weight:700;
  letter-spacing:.18em; text-indent:.18em; text-transform:uppercase; text-decoration:none;
  background:transparent; color:var(--cream-on-dark);
  border:1px solid rgba(244,239,226,.55); padding:.55em 1.5em; border-radius:30px;
  transition:background .5s ease, color .5s ease, border-color .5s ease, box-shadow .3s ease;
}
.nav-rsvp:hover{ background:rgba(244,239,226,.12); }
.nav.scrolled .nav-rsvp{
  background:#fff; color:var(--ink); border-color:transparent;
}
.nav.scrolled .nav-rsvp:hover{ background:var(--cream2); box-shadow:0 6px 18px rgba(0,0,0,.18); }

.nav-toggle{
  display:none; background:none; border:0; cursor:pointer;
  width:28px; height:20px; position:relative; z-index:120;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:1.5px;
  background:var(--cream-on-dark); transition:transform .4s ease, opacity .3s, background .5s ease;
}
.nav.scrolled .nav-toggle span{ background:var(--cream-on-dark); }
.nav-toggle span:nth-child(1){ top:2px; }
.nav-toggle span:nth-child(2){ top:9px; }
.nav-toggle span:nth-child(3){ top:16px; }
body.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:110;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.8rem;
  opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s;
}
body.menu-open .mobile-menu{ opacity:1; visibility:visible; }
.mobile-menu a{
  font-family:var(--hatton); font-size:1.7rem; font-weight:400;
  color:var(--cream-on-dark); text-decoration:none; letter-spacing:.04em; opacity:.85;
}
.mobile-menu a:hover{ opacity:1; }

/* =====================================================================
   SHARED PRIMITIVES
   ===================================================================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--muted);
}
.eyebrow::before,.eyebrow::after{
  content:""; width:30px; height:1px; background:var(--hair-soft);
}
.eyebrow.solo::before,.eyebrow.solo::after{ display:none; }     /* label without rules */
.eyebrow.terra{ color:var(--terra); }
.eyebrow.teal{ color:var(--teal); }
.eyebrow.peach{ color:var(--peach); }

.script{ font-family:var(--script); color:var(--terra); line-height:.9; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:2px;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  border:0; border-radius:40px; padding:14px 32px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-3px); }
.btn-terra{ background:var(--terra); color:var(--cream2); box-shadow:0 12px 28px rgba(192,97,58,.3); }
.btn-terra:hover{ box-shadow:0 16px 34px rgba(192,97,58,.4); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--ink); font-weight:500; }
.btn-ghost:hover{ box-shadow:0 12px 26px rgba(42,37,32,.18); }
.btn-cream{ background:var(--cream-on-dark); color:var(--teal); }
.btn-cream:hover{ box-shadow:0 14px 30px rgba(0,0,0,.18); }
/* oversized serif CTA (RSVP HERE / SUBMIT REQUEST) */
.btn-display{
  display:inline-block; font-family:var(--serif); font-weight:700;
  color:var(--terra); background:var(--cream2);
  border-radius:50px; text-decoration:none;
  padding:15px 44px; font-size:15px; letter-spacing:2px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-display:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(0,0,0,.3); }

/* decorative leaf blobs */
.leaf{
  position:absolute; pointer-events:none;
  border-radius:60% 60% 58% 58% / 70% 70% 40% 40%;
  transform-origin:bottom center;
}
.leaf.teal{ background:linear-gradient(150deg,var(--teal),var(--teal-l)); }
.leaf.terra{ background:linear-gradient(150deg,var(--terra),var(--terra-l)); }
.leaf.sway{ animation:sway 8s ease-in-out infinite; }
.leaf.sway.rev{ animation:sway 9s ease-in-out infinite reverse; }
.leaf.float{ animation:floaty 6s ease-in-out infinite; }
.leaf.float.rev{ animation:floaty 7s ease-in-out infinite reverse; }

/* =====================================================================
   PAGE TITLE BLOCK (subpages)
   ===================================================================== */
.page-title{ position:relative; text-align:center; padding:64px 7vw 16px; }
.page-title.subpage-hero{
  height:clamp(360px,50vh,520px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-top:72px; /* clear fixed nav */
  background:
    linear-gradient(rgba(80,28,55,.60),rgba(58,20,40,.76)),
    url('../images/bg-tapestry.jpg') center/cover;
  overflow:hidden;
}
.page-title.subpage-hero h1{ color:var(--cream-on-dark); }
.hero-title-wrap{ display:flex; flex-direction:row; align-items:center; gap:16px; }
.pt-side{
  font-family:var(--script); color:var(--gold);
  font-size:clamp(1.6rem,3vw,2.4rem);
  writing-mode:vertical-rl; transform:rotate(180deg);
  white-space:nowrap; line-height:1;
}
.page-title.subpage-hero .eyebrow{ color:rgba(244,239,226,.72); }
.page-title.subpage-hero .eyebrow::before,
.page-title.subpage-hero .eyebrow::after{ background:rgba(244,239,226,.28); }
.page-title.subpage-hero .pt-script{ color:var(--gold); }
.page-title h1{
  font-family:var(--serif); font-weight:700; font-size:clamp(42px,8vw,72px);
  line-height:.95; letter-spacing:-1px; margin-top:16px;
}
.page-title .pt-script{
  font-family:var(--script); color:var(--terra);
  font-size:clamp(30px,5.5vw,44px); margin-top:6px;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-foot{ background:var(--ink); color:var(--cream-on-dark); padding:56px 7vw; text-align:center; }
.site-foot .ff-name{ font-family:var(--serif); font-size:32px; letter-spacing:1px; }
.site-foot .ff-name .amp{ color:var(--terra); font-style:italic; }
.site-foot .ff-tag{ font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--hair-soft); margin:16px 0 22px; }
.site-foot .ff-mail{ font-size:13px; letter-spacing:1px; color:var(--peach); text-decoration:none; }
.site-foot .ff-mail:hover{ text-decoration:underline; }
.site-foot .ff-phone{ font-size:12px; letter-spacing:1px; color:#cfc7b4; margin-top:8px; }

/* =====================================================================
   LANDING
   ===================================================================== */
.hero{ position:relative; text-align:center; padding:74px 7vw 58px; overflow:hidden; }
.hero .eyebrow{ margin-bottom:14px; }
.hero .hero-script{ font-family:var(--script); font-size:clamp(36px,7vw,52px); color:var(--terra); line-height:.9; margin-bottom:6px; }
.hero h1{
  font-family:var(--serif); font-weight:700; font-size:clamp(52px,12vw,96px);
  line-height:.92; letter-spacing:-1px; margin:6px 0 18px;
}
.hero h1 .amp{ font-style:italic; font-weight:500; color:var(--teal); }
.hero .hero-date{ font-size:12px; letter-spacing:5px; text-transform:uppercase; color:var(--muted); }
.hero .hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

.welcome{ max-width:660px; margin:0 auto; padding:18px 7vw 64px; text-align:center; }
.welcome .eyebrow{ margin-bottom:18px; }
.welcome p{ font-family:var(--serif); font-size:clamp(20px,3vw,23px); line-height:1.6; color:var(--body); }

.cd-card .cd-lead{ font-family:var(--mignon); text-transform:uppercase; letter-spacing:.08em; font-size:clamp(16px,2.5vw,24px); color:var(--ink); margin-bottom:22px; }
.cd-grid{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(18px,4vw,40px); }
.cd-unit .cd-num{ font-family:var(--hatton); font-weight:400; font-size:clamp(40px,8vw,64px); line-height:1; color:var(--ink); }
.cd-unit .cd-lbl{ font-size:11px; letter-spacing:3px; text-transform:uppercase; margin-top:8px; color:var(--ink); opacity:.6; }
.cd-sep{ font-family:var(--hatton); font-size:clamp(34px,6vw,56px); color:var(--ink); opacity:.3; line-height:1.1; }

.invitation-lay{ padding:64px 7vw; text-align:center; }
.invitation-lay .eyebrow{ margin-bottom:26px; }
.inv-row{ display:flex; align-items:center; justify-content:center; gap:clamp(28px,5vw,64px); flex-wrap:wrap; }
.flatlay{ position:relative; width:min(440px,100%); padding:40px 0; flex-shrink:0; }
.cd-card{
  background:var(--card);
  border:2px solid var(--teal);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(60,45,30,.16);
  padding:40px 44px; transform:rotate(2deg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:min(92vw,440px); box-sizing:border-box; overflow:hidden;
}
.cd-card .cd-lead{ white-space:nowrap; font-size:clamp(14px,1.9vw,21px); }
.cd-card .cd-grid{ gap:8px; flex-wrap:nowrap; width:100%; justify-content:center; }
.cd-card .cd-num{ font-size:clamp(24px,3.4vw,38px); font-variant-numeric:tabular-nums; text-align:center; }
.cd-card .cd-sep{ font-size:clamp(18px,2.8vw,30px); }
.cd-card .cd-lbl{ font-size:10px; letter-spacing:2px; }
.flatlay .leaf-a{ top:0; left:14px; width:90px; height:110px; background:var(--teal); opacity:.14; transform:rotate(-18deg); }
.flatlay .leaf-b{ bottom:4px; right:6px; width:80px; height:100px; background:var(--terra); opacity:.16; transform:rotate(24deg); }
.flatlay-card{
  position:relative; background:var(--card); border:1px solid #e4d8bf;
  box-shadow:0 18px 40px rgba(60,45,30,.16); padding:46px 38px; transform:rotate(-2deg);
}
.flatlay-card .fl-top{ font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--muted2); }
.flatlay-card .fl-name{ font-family:var(--serif); font-size:34px; color:var(--ink); }
.flatlay-card .fl-name.first{ margin:18px 0 4px; }
.flatlay-card .fl-name.last{ margin:4px 0 18px; }
.flatlay-card .fl-and{ font-family:var(--script); font-size:30px; color:var(--terra); margin:2px 0; }
.flatlay-card .fl-rule{ width:40px; height:1px; background:#c9bda2; margin:0 auto 18px; }
.flatlay-card .fl-lines{ font-size:12px; letter-spacing:1px; line-height:2; color:var(--body2); }
.flatlay-card .fl-foot{ font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--terra); margin-top:18px; }

.reel{ overflow:hidden; }
.reel .eyebrow{ display:flex; justify-content:center; margin-bottom:34px; }
/* film strip wrapper */
.film-strip-wrap{
  background:#1a100a; overflow:hidden;
  cursor:grab; touch-action:pan-x;
  position:relative; z-index:1;   /* sit above the footer panel, which overlaps
                                     the strip top — otherwise its wine bg shows
                                     through the gaps between frames */
}
.film-strip-wrap.is-dragging{ cursor:grabbing; }
/* reel-track carries the sprocket holes and is moved by JS transform */
.reel-track{
  position:relative;
  display:flex; gap:8px; width:max-content;
  padding:22px 8px;
  will-change:transform;
  user-select:none; -webkit-user-select:none;
}
.reel-track::before,
.reel-track::after{
  content:''; position:absolute; left:0; width:100%; height:22px; z-index:2; pointer-events:none;
  background:
    linear-gradient(to bottom, #1a100a 0 4px, transparent 4px calc(100% - 4px), #1a100a calc(100% - 4px) 100%),
    repeating-linear-gradient(90deg, #1a100a 0 7px, #5d2133 7px 17px, #1a100a 17px 24px);
}
.reel-track::before{ top:0; }
.reel-track::after{ bottom:0; }
/* individual film frame — square */
.film-frame{
  flex:none; position:relative; z-index:1;
  width:220px; height:220px; overflow:hidden;
  background:#b5a87a repeating-linear-gradient(45deg,#b2a575 0 9px,#c0b380 9px 18px);
}
.film-frame .pol-img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:sepia(0.35) contrast(1.08) brightness(0.86) saturate(0.82);
  pointer-events:none; -webkit-user-drag:none;
}

/* =====================================================================
   WEDDING
   ===================================================================== */
.invite-wrap{
  position:relative; padding:64px 1.5vw 80px;
  display:flex; align-items:center; justify-content:center;
  gap:0; flex-wrap:nowrap;
  max-width:1160px; margin:0 auto;
}
.invite-bg-palm{
  position:absolute; top:0; bottom:0;
  left:50%; transform:translateX(-50%);
  width:100vw; pointer-events:none; z-index:0;
  /* resolution-independent SVG paper grain over the warm cream base */
  background:var(--card) url('../images/paper-grain.svg') repeat;
}
/* soft inner shading so the paper reads with depth, not flat */
.invite-bg-palm::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(90,70,40,.07) 100%);
}
.invite-wrap > *:not(.invite-bg-palm){ position:relative; }
.invite-palm{ z-index:1; }
.invite-card{ z-index:2; }
.invite-palm{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
}
.invite-palm img{
  height:clamp(520px,72vh,820px); width:auto;
  filter:drop-shadow(0 18px 40px rgba(60,30,20,.18));
}
.invite-card{
  position:relative; flex:0 0 auto; width:clamp(400px,52vw,680px); text-align:center;
  background:linear-gradient(var(--card),var(--card2)); border:1px solid #e4d8bf;
  box-shadow:0 26px 60px rgba(60,45,30,.16); padding:60px 56px;
  margin-right:-120px; z-index:2;
}
.invite-card::before{ content:""; position:absolute; inset:14px; border:1px solid rgba(193,151,74,.42); pointer-events:none; }
.invite-card > *{ position:relative; }
.invite-card .ic-mono{
  font-family:var(--paradiso); font-size:20px; letter-spacing:.22em; text-indent:.22em;
  color:var(--gold-d); margin-bottom:18px;
}
.invite-card .ic-top{ font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--muted2); }
.invite-card .ic-name{ font-family:var(--serif); font-size:clamp(34px,6vw,46px); line-height:1.04; color:var(--ink); }
.invite-card .ic-name.first{ margin:22px 0 6px; }
.invite-card .ic-name.last{ margin:6px 0 22px; }
.invite-card .ic-and{ font-family:var(--script); font-size:40px; color:var(--terra); margin:2px 0; }
.invite-card .ic-invite{ font-size:13px; letter-spacing:1px; line-height:1.9; color:var(--body2); }
.invite-card .ic-rule{ width:60px; height:1px; background:var(--foil); margin:20px auto; }
.invite-card .ic-when{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:21px; letter-spacing:.5px; line-height:1.7; color:var(--ink); }
.invite-card .ic-venue{ font-weight:600; font-size:14px; letter-spacing:1px; color:var(--teal); }
.invite-card .ic-place{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.invite-card .ic-follow{ font-family:var(--script); font-size:30px; color:var(--terra); margin-top:22px; }

.intro-text{ max-width:720px; margin:0 auto; padding:0 7vw 76px; text-align:center; }
.intro-text p{ font-family:var(--serif); font-size:clamp(21px,3vw,25px); line-height:1.62; color:var(--body); }

.band-teal{ background:var(--teal); color:var(--cream-on-dark); padding:66px 7vw; }
.venue-grid{ max-width:920px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.venue-grid h2{ font-family:var(--serif); font-size:40px; line-height:1.05; }
.venue-grid .eyebrow{ margin-bottom:14px; }
.venue-grid p{ font-size:14px; line-height:1.85; color:var(--teal-text); margin:18px 0 24px; }
.note-box{ border:1px solid rgba(242,238,223,.32); padding:30px 32px; background:rgba(255,255,255,.05); }
.note-box .nb-script{ font-family:var(--script); font-size:34px; color:var(--peach); line-height:.9; }
.note-box p{ font-size:14px; line-height:1.9; color:#eef4f1; margin-top:16px; }

.rsvp{
  position:relative; color:var(--ink);
  padding:clamp(72px,10vw,128px) 7vw;
  display:flex; justify-content:center;
  background:linear-gradient(rgba(40,48,22,.34),rgba(40,48,22,.42)),
    url('../images/leaf-texture.jpg') center/cover no-repeat;
}
.rsvp-card{
  position:relative; width:100%; max-width:560px; text-align:center;
  background:linear-gradient(var(--card),var(--card2));
  padding:clamp(44px,5vw,60px) clamp(32px,5vw,64px);
  box-shadow:0 30px 70px rgba(20,24,10,.34);
}
/* gold double-rule frame */
.rsvp-card::before{
  content:""; position:absolute; inset:0;
  padding:1px; background:var(--foil);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.rsvp-card::after{
  content:""; position:absolute; inset:9px; border:1px solid rgba(193,151,74,.45);
  pointer-events:none;
}
.rsvp-card > *{ position:relative; }
.rsvp .rsvp-script{ font-family:var(--script); font-size:clamp(30px,4.5vw,40px); color:var(--terra); line-height:.9; }
.rsvp h2{ font-family:var(--serif); font-weight:700; font-size:clamp(40px,7vw,56px); letter-spacing:.04em; margin-top:.22em; }
.rsvp p{ font-size:14px; line-height:1.85; color:var(--body2); max-width:380px; margin:0 auto; }
.rsvp-by{ margin:22px 0 4px; }
.rsvp-by .rb-label{
  display:block; font-size:10.5px; letter-spacing:3.5px; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px;
}
.rsvp-by .rb-date{
  font-family:var(--serif); font-weight:700; font-size:17px;
  letter-spacing:.04em; color:var(--terra);
}
.rsvp .btn-display{ font-size:17px; letter-spacing:3px; padding:15px 46px; margin:26px 0 0; }

/* ---- shared rule motif (gold sprig divider) ---- */
.rule-motif{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:0 auto; max-width:340px;
}
.rule-motif .rm-line{
  flex:1 1 auto; height:1px; background:var(--foil); opacity:.85;
}
.rule-motif .rm-leaf{ flex:0 0 auto; width:46px; height:auto; color:var(--gold); }
.rsvp-card .rule-motif{ margin:18px auto 22px; max-width:240px; }
.details-head .rule-motif{ margin-top:6px; }

/* ---- details: typographic header on cream + centered blocks ---- */
.details-head{ text-align:center; max-width:860px; margin:0 auto; padding:clamp(64px,8vw,96px) 7vw 0; }
.dh-eyebrow{
  font-size:11px; letter-spacing:4px; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
}
.details-title{
  display:inline-flex; align-items:baseline; gap:.16em; line-height:1; margin-bottom:22px;
}
.db-serif{
  font-family:var(--mignon); font-size:clamp(2rem,5vw,3.6rem);
  color:var(--ink); letter-spacing:.12em; text-indent:.12em;
}
.db-script{
  font-family:var(--script); font-size:clamp(2.6rem,6.5vw,4.8rem);
  color:var(--terra); line-height:1;
}
.details-body{
  max-width:920px; margin:0 auto; padding:clamp(56px,7vw,80px) 7vw clamp(64px,8vw,90px);
  text-align:center;
}
.details-body .rule-motif{ max-width:460px; }
.ds-block{ padding:0; }
.ds-num{
  display:block; font-family:var(--serif); font-size:13px; letter-spacing:3px;
  color:var(--gold-d); margin-bottom:14px;
}
.ds-icon{ display:flex; justify-content:center; margin-bottom:14px; }
.ds-icon svg{ width:34px; height:34px; color:#5d2133; }
.ds-head{
  font-family:var(--mignon); font-size:clamp(1.6rem,3.4vw,2.4rem);
  color:var(--ink); letter-spacing:.08em; text-indent:.08em;
  margin-bottom:14px;
}
.ds-block .ds-script-sub{
  font-family:var(--script); font-size:clamp(1.5rem,2.8vw,2rem);
  color:#5d2133; margin-bottom:20px; display:block;
  text-align:center; line-height:1.45;
}
.ds-block p{ font-size:14.5px; line-height:1.95; color:var(--body2); max-width:600px; margin:0 auto 14px; }
.ds-block p:last-child{ margin-bottom:0; }
.ds-block p strong{ color:var(--ink); }
/* divider between detail blocks */
.ds-div{ margin:clamp(40px,5vw,56px) auto; }

.events{
  padding:56px 7vw 56px; text-align:center;
  background-image:url('../images/paperback.png'), url('../images/purp.jpg');
  background-repeat:repeat, no-repeat;
  background-position:top left, center;
  background-size:auto, cover;
  background-blend-mode:multiply, normal;
  position:relative;
}
.events-heading{
  display:flex; align-items:baseline; justify-content:center; gap:.3em;
  flex-wrap:wrap; margin-bottom:32px; line-height:1;
}
.ev-caps{
  font-family:var(--grand); font-size:clamp(1.6rem,3.5vw,2.8rem);
  color:var(--ink); letter-spacing:.05em;
}
.ev-script{
  font-family:var(--script); font-size:clamp(2rem,4.5vw,3.6rem);
  color:var(--ink); line-height:1;
}
.events-card{
  background:var(--card); border:1px solid var(--hair2);
  box-shadow:0 16px 48px rgba(60,45,30,.10);
  max-width:760px; margin:0 auto;
  padding:40px 32px 28px;
}
.timeline{ position:relative; max-width:760px; margin:56px auto 0; text-align:left; }
.timeline::before{
  content:""; position:absolute; left:50%; top:8px; bottom:8px; width:1px; transform:translateX(-50%);
  background:linear-gradient(var(--gold) 0%, var(--hair) 14%, var(--hair) 86%, var(--gold) 100%);
}
.tl-row{ position:relative; display:grid; grid-template-columns:1fr 64px 1fr; align-items:start; margin-bottom:24px; }
.tl-node{ padding-top:6px; }
.tl-row .tl-text{ padding:0 22px; grid-row:1; }
.tl-row.left .tl-text{ text-align:right; grid-column:1; }
.tl-row.left .tl-spacer{ grid-column:3; grid-row:1; }
.tl-row.right .tl-text{ text-align:left; grid-column:3; }
.tl-row.right .tl-spacer{ grid-column:1; grid-row:1; }
.tl-node{ grid-column:2; grid-row:1; display:flex; justify-content:center; }
.tl-node .tl-circle{
  width:58px; height:58px; border-radius:50%; background:var(--card); border:2px solid var(--terra);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(60,45,30,.12);
}
.tl-node svg{ width:28px; height:28px; color:#5d2133; }
.tl-time{ font-family:var(--serif); font-weight:700; font-size:26px; color:var(--terra); }
.tl-ampm{ font-size:13px; font-weight:400; letter-spacing:1px; }
.tl-detail{ font-size:15px; font-weight:600; letter-spacing:.3px; color:var(--ink); margin-top:4px; }
.tl-desc{ font-size:13px; line-height:1.75; color:var(--muted3); margin-top:6px; max-width:260px; }
.tl-row.left .tl-desc{ margin-left:auto; }
.events .ev-fine{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:24px; opacity:.7; }

.cards-2{ padding:30px 7vw 76px; }
.cards-2 .inner{ max-width:920px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.info-card{ background:var(--card); border:1px solid var(--hair2); padding:44px 40px; text-align:center; }
.info-card .ic-icon{ width:44px; height:44px; margin:0 auto 16px; color:var(--terra); }
.info-card .ic-icon svg{ width:100%; height:100%; }
.info-card .eyebrow{ display:block; margin-bottom:8px; }
.info-card h3{ font-family:var(--serif); font-size:30px; margin-bottom:12px; font-weight:500; }
.info-card p{ font-size:13.5px; line-height:1.85; color:var(--muted3); }

.children{ background:var(--sand); padding:70px 7vw; }
.children .inner{ max-width:820px; margin:0 auto; display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:start; }
.children .ch-script{ font-family:var(--script); font-size:clamp(40px,7vw,56px); color:var(--terra); line-height:.85; white-space:nowrap; }
.children .eyebrow{ margin-bottom:14px; }
.children p{ font-size:15px; line-height:1.9; color:#4a4339; }
.children p + p{ margin-top:14px; }

.transport{ padding:70px 7vw 80px; }
.transport .inner{ max-width:820px; margin:0 auto; text-align:center; }
.transport .tr-icon{ width:46px; height:46px; margin:0 auto 16px; color:var(--terra); }
.transport .tr-icon svg{ width:100%; height:100%; }
.transport .eyebrow{ margin-bottom:12px; }
.transport h2{ font-family:var(--serif); font-size:34px; margin-bottom:14px; font-weight:500; }
.transport p{ font-size:14.5px; line-height:1.9; color:var(--body2); }
.transport a.inline{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }

/* =====================================================================
   GETAWAY
   ===================================================================== */
.get-key{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted3);
}
.get-key .k{ display:inline-flex; align-items:center; gap:7px; }
.get-key .dot{ width:12px; height:12px; border-radius:50%; }
.get-key .dot.terra{ background:var(--terra); }
.get-key .dot.teal{ background:var(--teal); }
.get-key .div{ width:1px; height:14px; background:var(--hair); }

.postcards{ max-width:1040px; margin:0 auto; padding:8px 6vw 30px; }
.pc-row{ display:flex; margin-bottom:46px; }
.pc-row.left{ justify-content:flex-start; }
.pc-row.right{ justify-content:flex-end; }
.postcard{
  position:relative; width:720px; max-width:100%;
  box-shadow:0 18px 44px rgba(60,45,30,.18);
  display:grid; grid-template-columns:1.55fr 1fr;
  transition:transform .25s ease, box-shadow .25s ease;
}
.postcard:hover{ transform:translateY(-6px) rotate(0deg)!important; box-shadow:0 30px 60px rgba(60,45,30,.26); z-index:5; }
.pc-msg{ padding:38px 38px 34px; }
.pc-head{ display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.pc-day{ font-family:var(--serif); font-weight:900; font-size:15px; letter-spacing:4px; text-transform:uppercase; }
.pc-head .pc-line{ flex:1; height:1px; }
.pc-date{ font-size:11px; letter-spacing:2.5px; text-transform:uppercase; }
.pc-title{ font-family:var(--serif); font-weight:700; font-size:30px; line-height:1.06; margin:12px 0 8px; }
.pc-tag{ font-family:var(--script); font-size:26px; margin-bottom:16px; }
.pc-msg p{ font-size:13px; line-height:1.85; margin-bottom:11px; }
.pc-stampcol{ position:relative; padding:28px 30px; display:flex; flex-direction:column; align-items:flex-end; }
.pc-stamp{
  width:84px; height:100px; display:flex; align-items:center; justify-content:center;
  outline-offset:-6px; box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.pc-stamp svg{ width:40px; height:40px; }
.pc-postmark{
  margin-top:16px; width:92px; height:92px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; transform:rotate(-8deg); opacity:.8;
}
.pc-postmark .pm-top,.pc-postmark .pm-bot{ font-size:8px; letter-spacing:1.5px; text-transform:uppercase; }
.pc-postmark .pm-num{ font-family:var(--serif); font-weight:700; font-size:19px; line-height:1; }
.pc-aud{ margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:7px; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; }
.pc-aud .dot{ width:10px; height:10px; border-radius:50%; }

/* map */
.map-head{ text-align:center; margin-bottom:46px; }
.map-head .eyebrow{ margin-bottom:12px; }
.map-head h2{ font-family:var(--serif); font-weight:700; font-size:clamp(34px,5vw,46px); }
.map-head p{ font-size:14px; line-height:1.8; max-width:560px; margin:14px auto 0; color:var(--teal-text); }
.map-grid{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1.35fr 1fr; gap:40px; align-items:stretch; }
.map-fig{ position:relative; background:linear-gradient(160deg,var(--card),var(--card3)); border:8px solid var(--card); box-shadow:0 22px 50px rgba(0,0,0,.28); min-height:420px; overflow:hidden; }
.map-fig svg{ display:block; position:absolute; inset:0; width:100%; height:100%; }
.map-fig .map-cap{ position:absolute; bottom:12px; right:14px; font-family:var(--script); font-size:22px; color:var(--teal); opacity:.7; }
.map-pin{ position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; z-index:3; }
.map-pin .pin-lbl{ font-weight:600; font-size:9.5px; letter-spacing:.5px; white-space:nowrap; background:rgba(252,248,238,.92); padding:3px 8px; border-radius:20px; margin-bottom:4px; transition:all .2s ease; }
.map-pin .pin-dot{ width:16px; height:16px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 3px 6px rgba(0,0,0,.3); transition:transform .2s ease; }
.map-pin:hover .pin-dot{ transform:rotate(-45deg) scale(1.25); }
.map-pin:hover .pin-lbl{ background:var(--terra); color:var(--cream2)!important; }
.map-legend{ display:flex; flex-direction:column; gap:14px; }
.leg-item{ display:flex; align-items:flex-start; gap:14px; border-bottom:1px solid rgba(242,238,223,.2); padding-bottom:14px; }
.leg-item .leg-dot{ flex:none; width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); margin-top:4px; }
.leg-item .leg-name{ font-weight:600; font-size:13.5px; color:var(--cream2); }
.leg-item .leg-note{ font-size:11.5px; line-height:1.6; color:#c4dcd6; margin-top:2px; }
.leg-box{ background:rgba(255,255,255,.06); border:1px solid rgba(242,238,223,.22); padding:18px 20px; }
.leg-box .lb-script{ font-family:var(--script); font-size:26px; color:var(--peach); line-height:.9; margin-bottom:8px; }
.leg-box p{ font-size:12px; line-height:1.8; color:var(--teal-text); }

.cta-strip{ text-align:center; padding:66px 7vw 76px; }
.cta-strip .cs-script{ font-family:var(--script); font-size:clamp(32px,5vw,40px); color:var(--terra); line-height:.9; }
.cta-strip h2{ font-family:var(--serif); font-weight:700; font-size:clamp(30px,4.5vw,38px); margin:12px 0 14px; }
.cta-strip p{ font-size:14px; line-height:1.8; max-width:560px; margin:0 auto 28px; color:var(--muted3); }

/* =====================================================================
   ACCOMMODATION
   ===================================================================== */
.subnav{ position:sticky; top:72px; z-index:35; background:rgba(247,240,226,.94); backdrop-filter:blur(8px); border-top:1px solid rgba(42,37,32,.08); border-bottom:1px solid rgba(42,37,32,.12); }
.subnav .inner{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; padding:14px 7vw; }
.subnav a{ font-weight:500; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--muted3); text-decoration:none; transition:color .15s ease; }
.subnav a:hover{ color:var(--terra); }
.subnav .sub-cta{ font-weight:600; color:var(--cream2); background:var(--terra); padding:9px 20px; border-radius:30px; }
.subnav .sub-cta:hover{ color:var(--cream2); transform:translateY(-2px); box-shadow:0 10px 24px rgba(192,97,58,.35); }

.stay{ max-width:760px; margin:0 auto; padding:70px 7vw 60px; text-align:center; scroll-margin-top:140px; }
.stay .lead{ font-family:var(--serif); font-size:clamp(21px,3vw,25px); line-height:1.6; color:var(--body); }
.stay p.body{ font-size:15px; line-height:1.95; color:var(--body2); margin-top:24px; }
.stay p.aside{ font-size:13px; line-height:1.9; color:var(--muted); margin-top:18px; font-style:italic; }
.stay strong.teal{ color:var(--teal); }

.villa{ background:var(--teal); color:var(--cream-on-dark); padding:70px 7vw; scroll-margin-top:120px; }
.villa .inner{ max-width:1000px; margin:0 auto; }
.villa-top{ display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:center; margin-bottom:54px; }
.villa-hero{ width:100%; height:360px; object-fit:cover; box-shadow:0 22px 50px rgba(0,0,0,.3); }
.villa-hero.ph{ display:flex; align-items:center; justify-content:center; font:500 11px/1 ui-monospace,monospace; letter-spacing:2px; color:#8aa6a0; background:repeating-linear-gradient(45deg,#2f746d 0 12px,#357a73 12px 24px); color:#cfe3df; }
.villa-top h2{ font-family:var(--serif); font-size:clamp(34px,5vw,44px); line-height:1.04; }
.villa-top .eyebrow{ margin-bottom:14px; }
.villa-top p{ font-size:14px; line-height:1.9; color:var(--teal-text); margin:18px 0; }
.villa-times{ display:flex; gap:30px; margin-top:22px; }
.villa-times .vt-lbl{ font-family:var(--serif); font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--peach); }
.villa-times .vt-val{ font-family:var(--serif); font-size:30px; font-weight:700; }
.villa-times .vt-div{ width:1px; background:rgba(242,238,223,.3); }
.villa-lists{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.villa-list{ border-top:1px solid rgba(242,238,223,.3); padding-top:22px; }
.villa-list .vl-script{ font-family:var(--script); font-size:30px; color:var(--peach); margin-bottom:16px; }
.villa-list ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; }
.villa-list li{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px; line-height:1.6; color:#eef4f1; padding:3px 0; }
.villa-list li::before{ content:"✦"; color:var(--peach); margin-top:1px; }

.rooms{ padding:76px 7vw 60px; scroll-margin-top:130px; }
.rooms-head{ text-align:center; margin-bottom:16px; }
.rooms-head .eyebrow{ margin-bottom:12px; }
.rooms-head h2{ font-family:var(--serif); font-weight:700; font-size:clamp(34px,5vw,46px); }
.rooms-head p{ font-size:14px; line-height:1.8; max-width:560px; margin:14px auto 0; color:var(--muted3); }
.rooms-grid{ max-width:1060px; margin:40px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.room{ background:var(--card); border:1px solid var(--hair2); box-shadow:0 12px 30px rgba(60,45,30,.1); display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease; }
.room:hover{ transform:translateY(-4px); box-shadow:0 24px 50px rgba(60,45,30,.2); }
.room-img{ width:100%; height:200px; object-fit:cover; }
.room-img.ph{ display:flex; align-items:center; justify-content:center; font:500 10px/1 ui-monospace,monospace; letter-spacing:1px; color:#a4977d; background:repeating-linear-gradient(45deg,#e9e0cd 0 9px,#f1e9d6 9px 18px); }
.room-body{ padding:26px 28px 28px; }
.room-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.room-name{ font-family:var(--serif); font-weight:700; font-size:24px; line-height:1.1; color:var(--ink); }
.room-loc{ font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--teal); margin-top:5px; }
.room-price{ font-family:var(--serif); font-weight:700; font-size:26px; color:var(--terra); line-height:1; text-align:right; }
.room-pricesub{ font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--muted2); margin-top:3px; text-align:right; }
.room-stats{ display:flex; gap:22px; margin:18px 0 16px; padding:14px 0; border-top:1px solid var(--hair3); border-bottom:1px solid var(--hair3); }
.room-stats .rs-lbl{ font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted2); }
.room-stats .rs-val{ font-weight:600; font-size:13px; color:var(--body); margin-top:3px; }
.room-stats .rs-div{ width:1px; background:var(--hair3); }
.room-acc{ overflow:hidden; max-height:0; opacity:0; transition:max-height .4s ease, opacity .3s ease; }
.room-acc.open{ max-height:460px; opacity:1; }
.room-acc p{ font-size:13px; line-height:1.85; color:var(--body2); padding-bottom:12px; }
.room-acc .rx{ font-size:12px; line-height:1.7; color:var(--muted3); padding-bottom:4px; }
.room-acc .rx strong{ color:var(--teal); }
.room-toggle{ margin-top:14px; width:100%; font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--terra); background:transparent; border:1px solid #e0b9a4; padding:11px; border-radius:30px; cursor:pointer; transition:background .2s ease, color .2s ease; }
.room-toggle:hover{ background:var(--terra); color:var(--cream2); }

.howit{ background:var(--sand); padding:72px 7vw; scroll-margin-top:120px; }
.howit .inner{ max-width:940px; margin:0 auto; }
.howit-head{ text-align:center; margin-bottom:40px; }
.howit-head .eyebrow{ margin-bottom:12px; }
.howit-head h2{ font-family:var(--serif); font-weight:700; font-size:clamp(30px,4.5vw,40px); }
.howit-head p{ font-size:14px; line-height:1.8; max-width:600px; margin:14px auto 0; color:var(--muted3); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step{ background:var(--card); border:1px solid #e2d6bc; padding:26px 22px; text-align:center; }
.step .st-num{ font-family:var(--serif); font-weight:700; font-size:34px; color:var(--terra); }
.step .st-title{ font-weight:600; font-size:13px; color:var(--ink); margin:8px 0 6px; }
.step p{ font-size:11.5px; line-height:1.7; color:var(--muted3); }
.howit-dates{ text-align:center; margin-top:28px; font-size:12.5px; line-height:1.9; color:var(--body2); }

.included{ padding:72px 7vw; scroll-margin-top:120px; }
.included .inner{ max-width:940px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.incl-card{ background:var(--teal); color:var(--cream-on-dark); padding:40px 38px; }
.incl-card .ic-script{ font-family:var(--script); font-size:34px; color:var(--peach); margin-bottom:8px; }
.incl-card .ic-sub{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#a9c8c2; margin-bottom:20px; }
.incl-card ul{ list-style:none; margin:0; padding:0; }
.incl-card li{ display:flex; align-items:flex-start; gap:11px; font-size:13.5px; line-height:1.7; color:#eef4f1; padding:7px 0; border-bottom:1px solid rgba(242,238,223,.16); }
.incl-card li::before{ content:"✦"; color:var(--peach); }
.incl-card .ic-note{ font-size:11.5px; line-height:1.7; color:#c4dcd6; margin-top:16px; font-style:italic; }
.pay .eyebrow{ margin-bottom:12px; }
.pay h2{ font-family:var(--serif); font-weight:700; font-size:32px; margin-bottom:14px; }
.pay > p{ font-size:13px; line-height:1.9; color:var(--body2); }
.pay-fine{ margin-top:20px; background:var(--card); border:1px solid var(--hair2); padding:22px 24px; }
.pay-fine .pf-lbl{ font-weight:600; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--terra); margin-bottom:12px; }
.pay-fine p{ font-size:11.5px; line-height:1.75; color:var(--muted3); padding:5px 0; border-bottom:1px solid var(--hair3); }
.pay-fine p:last-child{ border-bottom:0; }

.big-cta{ position:relative; background:var(--terra); color:var(--cream2); padding:76px 7vw; text-align:center; overflow:hidden; }
.big-cta .blob{ position:absolute; width:180px; height:220px; border-radius:60% 60% 58% 58% / 70% 70% 40% 40%; background:#fff; opacity:.08; }
.big-cta .blob.a{ top:-30px; left:-20px; transform:rotate(-20deg); }
.big-cta .blob.b{ bottom:-40px; right:-20px; transform:rotate(24deg); }
.big-cta .inner{ position:relative; }
.big-cta .bc-script{ font-family:var(--script); font-size:clamp(34px,5vw,44px); color:var(--peach2); line-height:.9; margin-bottom:6px; }
.big-cta h2{ font-family:var(--serif); font-weight:700; font-size:clamp(36px,6vw,48px); }
.big-cta p{ font-size:14px; line-height:1.8; max-width:540px; margin:16px auto 0; }
.big-cta .btn-display{ font-size:20px; letter-spacing:2px; padding:20px 56px; margin-top:28px; }

/* =====================================================================
   COMING SOON (travel / koh tao / faqs)
   ===================================================================== */
.soon{ position:relative; text-align:center; padding:30px 7vw 110px; overflow:hidden; }
.soon .leaf-a{ top:10px; left:8vw; width:120px; height:150px; opacity:.12; }
.soon .leaf-b{ top:0; right:8vw; width:110px; height:140px; opacity:.14; }
.soon .inner{ position:relative; max-width:620px; margin:0 auto; }
.soon .soon-script{ font-family:var(--script); font-size:clamp(32px,5vw,42px); color:var(--terra); line-height:.9; margin-bottom:10px; }
.soon h2{ font-family:var(--serif); font-weight:700; font-size:clamp(28px,4.5vw,40px); }
.soon p{ font-size:14.5px; line-height:1.9; color:var(--body2); margin-top:18px; }
.soon .soon-tag{ display:inline-block; margin-top:28px; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--cream2); background:var(--terra); padding:10px 24px; border-radius:30px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1000px){
  .invite-palm{ display:none !important; }
  .invite-wrap{ padding:48px 5vw 64px; }
  .invite-card{ width:100%; max-width:520px; margin-right:0; }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-rsvp{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-menu{ display:flex; }
  .venue-grid,
  .villa-top,
  .villa-lists,
  .included .inner{ grid-template-columns:1fr; gap:30px; }
  .steps{ grid-template-columns:1fr 1fr; }
  .map-grid{ grid-template-columns:1fr; }
  .map-fig{ min-height:340px; }
  .cards-2 .inner{ grid-template-columns:1fr; }
  .rooms-grid{ grid-template-columns:1fr; }
  .postcard{ grid-template-columns:1fr; transform:none!important; }
  .pc-stampcol{ flex-direction:row; align-items:center; justify-content:flex-start; gap:24px; border-top:1px dashed var(--hair); }
  .pc-aud{ margin-top:0; padding-top:0; }
  .children .inner{ grid-template-columns:1fr; gap:16px; text-align:center; }
  .children .ch-script{ white-space:normal; }
  .subnav .inner{ gap:16px 18px; }
}
@media (max-width:560px){
  .nav,.hero,.welcome,.page-title{ padding-left:6vw; padding-right:6vw; }
  .cd-grid{ gap:14px; }
  .cd-sep{ display:none; }
  .invite-card{ padding:44px clamp(20px,6vw,30px); }
  .invite-card .ic-name{ font-size:clamp(27px,8vw,40px); }
  .invite-card .ic-and{ font-size:clamp(30px,9vw,40px); }
  .invite-card .ic-when{ font-size:clamp(17px,5vw,21px); }
  .invite-card .ic-follow{ font-size:clamp(24px,7vw,30px); }
  .invite-card .ic-top{ letter-spacing:2.5px; }
  .timeline::before{ left:24px; }
  .tl-row{ grid-template-columns:48px 1fr; margin-bottom:30px; }
  .tl-row .tl-text,
  .tl-row.left .tl-text,
  .tl-row.right .tl-text{ grid-column:2; text-align:left; padding:0 0 0 16px; }
  .tl-row.left .tl-desc{ margin-left:0; }
  .tl-desc{ max-width:none; }
  .tl-row .tl-spacer{ display:none; }
  .tl-node{ grid-column:1; }
  .tl-node .tl-circle{ width:46px; height:46px; }
  .tl-node svg{ width:22px; height:22px; }
  .steps{ grid-template-columns:1fr; }
  .reel-track{ animation-duration:38s; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .leaf,.reel-track{ animation:none!important; }
  .reveal{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* =====================================================================
   FONT-ROLE MAPPING (appended last so it wins on equal specificity)
   Big short headings -> TAN display caps (must be uppercase + spaced).
   Names / dates / numerals / running serif stay on Hatton (--serif).
   Scripts already routed to Breathing via --script.
   ===================================================================== */
.hero h1{ font-family:var(--mignon); font-weight:400; text-transform:uppercase; letter-spacing:0.04em; }
.hero h1 .amp{ font-family:var(--hatton); font-style:normal; }   /* guaranteed & glyph */
.page-title h1{ font-family:var(--mignon); font-weight:400; text-transform:uppercase; letter-spacing:0.05em; }
.site-foot .ff-name{ font-family:var(--paradiso); text-transform:uppercase; letter-spacing:0.1em; }
.site-foot .ff-name .amp{ font-family:var(--hatton); font-style:normal; }
.venue-grid h2,
.events h2,
.map-head h2,
.rooms-head h2,
.howit-head h2,
.cta-strip h2,
.transport h2,
.pay h2,
.villa-top h2,
.soon h2,
.info-card h3{ font-family:var(--mignon); font-weight:400; text-transform:uppercase; letter-spacing:0.06em; line-height:1.08; }
.rsvp h2,
.big-cta h2{ font-family:var(--grand); font-weight:400; text-transform:uppercase; letter-spacing:0.08em; }
.invite-card .ic-when{ font-style:normal; }   /* Hatton has no italic; avoid faux */

/* Breathing overflows its line-box ~0.6em below baseline — give script-above-caps
   headings real clearance so glyph tails don't collide with the caps underneath */
.hero .hero-script{ margin-bottom:0.5em; }
.rsvp .rsvp-script{ margin-bottom:0.34em; }
.big-cta .bc-script{ margin-bottom:0.34em; }
.cta-strip .cs-script{ margin-bottom:0.34em; }
.countdown .cd-lead{ margin-bottom:1.1rem; padding-bottom:0.3em; }

/* =====================================================================
   TYPOGRAPHY SPACING FIXES — Hatton/TAN have taller line boxes than Bodoni
   and Breathing overflows its box, so the design's tight line-heights and
   margins collided. Loosen line-heights + give every script real room.
   ===================================================================== */
/* headings: looser leading (these wrap to 2 lines on several pages) */
.hero h1{ line-height:1.05; }
.page-title h1{ line-height:1.12; }
.invite-card .ic-name{ line-height:1.14; }
.venue-grid h2{ line-height:1.14; }
.villa-top h2{ line-height:1.14; }
.pc-title{ line-height:1.16; margin:10px 0 12px; }
.room-name{ line-height:1.2; }
.events h2,.map-head h2,.rooms-head h2,.howit-head h2,.cta-strip h2,
.transport h2,.pay h2,.soon h2,.info-card h3,.rsvp h2,.big-cta h2{ line-height:1.16; }

/* scripts: give the line box room so flourishes don't hit neighbours */
.script,
.hero-script,.pt-script,.cd-lead,
.rsvp-script,.nb-script,.cs-script,.bc-script,.vl-script,
.incl-card .ic-script,.lb-script,.pc-tag,.soon-script{ line-height:1.22; }
.flatlay-card .fl-and,.invite-card .ic-and{ line-height:1.15; margin:0.12em 0; }
.invite-card .ic-follow{ line-height:1.2; margin-top:0.55em; }
.children .ch-script{ line-height:1.06; }

/* extra clearance where a script sits directly above body/caps */
.page-title .pt-script{ margin-top:0.12em; padding-bottom:0.18em; }
.pc-tag{ margin:6px 0 16px; }
.leg-box .lb-script{ margin-bottom:12px; }
.note-box .nb-script{ margin-bottom:0.32em; }
.incl-card .ic-script{ margin-bottom:0.32em; }
.villa-list .vl-script{ margin-bottom:0.5em; }
.soon .soon-script{ margin-bottom:0.34em; }

/* postcard header stack was cramped (Hatton 900 day label) */
.pc-head{ margin-bottom:14px; }
.pc-day{ line-height:1; }
.pc-date{ line-height:1.4; }

/* =====================================================================
   BACKGROUNDS — botanical texture from Nik's mood board
   (sage botanical on the cream, burgundy/olive/gold tapestry on dark moments)
   ===================================================================== */
/* faint sage botanical wallpaper across the cream of the whole site;
   the opaque jewel-tone bands paint straight over it */
body{ background-color:var(--cream); }
/* page-title headers are flat cream now (texture removed) */
/* key CTA bands: flat burgundy (texture removed) */
.big-cta{ background:var(--terra); }
/* flat burgundy footer — matches the photo frame colour */
.site-foot{ background:#5d2133; }
/* small raspberry pop on the hero ampersand */
.hero h1 .amp{ color:var(--magenta); }
/* gilt the invitation card's inner frame */
.invite-card::before{ border-color:var(--gold); opacity:.55; }

/* olive/green bands: flat colour (leaf-texture removed — was too much) */
.band-teal, .villa, .incl-card{ background:var(--teal); }

/* remove the decorative egg/leaf blobs everywhere (cleaner / more minimal) */
.leaf{ display:none; }

/* homepage hero — full-height, purple-veiled tapestry */
.hero{
  position:relative; height:100svh; min-height:640px;
  background:var(--ink); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.hero-texture{
  position:absolute; inset:-8%;
  background:linear-gradient(rgba(80,28,55,.58),rgba(58,20,40,.70)),
    url('../images/bg-tapestry.jpg') center/cover;
  animation:kenburns 28s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenburns{
  from{ transform:scale(1.06) translate(0,0); }
  to  { transform:scale(1.16) translate(-1.5%,-1.5%); }
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 38%, transparent 40%, rgba(60,18,40,.32) 100%),
    linear-gradient(180deg, rgba(60,18,40,.28) 0%, transparent 22%, transparent 70%, rgba(60,18,40,.44) 100%);
}
.hero-title{ position:relative; z-index:3; text-align:center; pointer-events:none; padding:0 1rem; }
/* FIXED LOCKUP: the original "NIKOLA / and OLIVER" composition (and = gold
   script to the left of OLIVER) treated like a picture — ONE composition that
   only scales with the viewport. white-space:nowrap + a single vw font size
   (no breakpoint) so it never wraps, re-stacks, or changes composition. */
.hero-title h1{
  font-family:var(--mignon); font-weight:400; text-transform:uppercase;
  font-size:min(14.5vw, 128px); line-height:1.18; white-space:nowrap;
  color:var(--cream-on-dark); letter-spacing:.05em;
  opacity:0; transform:translateY(40px);
}
body.ready .hero-title h1{ animation:riseIn 1.3s ease .35s forwards; }
@keyframes riseIn{ to{opacity:1;transform:none} }
.hero-and{
  display:inline-block; font-family:var(--script); text-transform:none;
  color:var(--gold); font-weight:400; letter-spacing:0;
  font-size:.42em; transform:rotate(-8deg) translateY(-0.38em);
}
.hero-foot{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  z-index:4; text-align:center; color:var(--cream-on-dark); white-space:nowrap;
  opacity:0;
}
body.ready .hero-foot{ animation:fadeIn 1.2s ease 1.1s forwards; }
@keyframes fadeIn{ to{opacity:1} }
.hero-loc{
  font-size:clamp(10px,2.2vw,13px); letter-spacing:.28em; text-transform:uppercase;
  opacity:.82; margin-bottom:1.1rem; white-space:normal; text-align:center;
  text-shadow:0 1px 14px rgba(41,9,27,.7);
}
.scroll-cue{
  width:1px; height:46px; margin:0 auto;
  background:linear-gradient(var(--gold),transparent);
  position:relative; overflow:hidden;
}
.scroll-cue::after{
  content:''; position:absolute; top:0; left:0; right:0; height:40%;
  background:var(--cream-on-dark); animation:cue 2.4s ease infinite;
}
@keyframes cue{ 0%{transform:translateY(-110%)} 60%,100%{transform:translateY(260%)} }

/* welcome — flat cream, couple photo left + text right */
.welcome{ max-width:none; background:#ede0c6; padding:clamp(56px,9vh,104px) 7vw; text-align:left; }
.welcome-grid{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:auto 1fr; gap:clamp(36px,5vw,66px); align-items:start; }
.welcome-head{ font-family:var(--grand); font-weight:400; color:var(--ink); font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:1.1; white-space:nowrap; margin-bottom:1.3rem; }
.welcome-text p{ font-family:var(--sans); font-size:clamp(.95rem,1.15vw,1.04rem); line-height:1.9; color:var(--body); max-width:620px; margin:0; }
.welcome-text p + p{ margin-top:1.05rem; }
.welcome-sig{ margin-top:1.6rem; text-align:center; transform:rotate(-4deg); }
.welcome-sig .sig-xoxo{ display:block; font-family:var(--script); color:var(--ink); font-size:1.5rem; line-height:1; transform:translate(0.3rem,-0.75rem); }
.welcome-sig .sig-name{ display:block; font-family:var(--script); color:var(--ink); font-size:clamp(2.2rem,3vw,2.8rem); line-height:1; }

/* polaroid reel merged into the footer — shares the dark tapestry background,
   sits snug under the footer details (no label, no dead space) */
.reel-foot-logo{
  font-family:var(--mignon); font-size:1.4rem; font-weight:400;
  letter-spacing:.32em; text-indent:.32em;
  color:var(--cream-on-dark); text-align:center;
  padding:28px 0 36px; opacity:.72;
}
.reel{
  background:#5d2133;
  margin-top:-34px;
  padding:0 0 26px;
}

/* footer "Contact Us" layout (matches Nik's contact section) */
.ff-title{
  font-family:var(--grand); text-transform:uppercase; letter-spacing:.08em;
  line-height:1; font-size:clamp(1.4rem,3vw,2rem);
  color:var(--cream-on-dark); margin-bottom:1.5rem;
}
.ff-contacts{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px clamp(28px,6vw,72px); }
.ff-item{ display:inline-flex; align-items:center; gap:13px; }
.ff-label{ font-family:var(--paradiso); text-transform:uppercase; letter-spacing:.1em; font-size:1.05rem; color:var(--cream-on-dark); }
.ff-sep{ width:6px; height:6px; flex:none; background:var(--gold); transform:rotate(45deg); }
.ff-item a{ font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,239,226,.85); text-decoration:none; transition:color .2s ease; }
.ff-item a:hover{ color:var(--peach); }

/* couple photo — burgundy double-rule only (no cream mat, no shadow) */
.welcome .photo-frame{ display:inline-block; margin:0; padding:8px; border:5px solid var(--terra); }
.welcome .pf-inner{ display:block; line-height:0; padding:8px; border:5px solid var(--terra); }
.welcome .photo-frame img{ display:block; width:320px; max-width:40vw; aspect-ratio:4/5; object-fit:cover; }


/* ===================================================================== */
/* leaf-texture on the invitation section */
.invitation-lay{
  background-color:var(--teal);
  background-image:
    linear-gradient(rgba(43,52,22,.5), rgba(34,42,16,.58)),
    url('../images/leaf-texture.jpg');
  background-repeat:no-repeat, repeat;
  background-size:cover, 440px auto;
  background-position:center, top center;
}

/* orchids around the invitation flat-lay (one behind, one overlapping) */
.flatlay-card{ z-index:1; }
.fl-flower{ position:absolute; width:46%; max-width:185px; pointer-events:none; filter:drop-shadow(0 10px 16px rgba(60,20,30,.28)); }
.fl-flower-tl{ top:-42px; left:-52px; transform:rotate(-14deg); z-index:0; }
.fl-flower-br{ bottom:-40px; right:-52px; transform:rotate(166deg); z-index:2; }

/* welcome stacks on small screens */
@media (max-width:760px){
  .welcome{ text-align:center; }
  .welcome-grid{ grid-template-columns:1fr; justify-items:center; gap:32px; }
  .welcome-text p{ margin:0 auto; }
  .welcome .photo-frame img{ width:280px; max-width:74vw; }
  .fl-flower{ max-width:130px; }
}

/* =====================================================================
   EDITORIAL REFINEMENT PASS  (the-wedding.html only)
   ---------------------------------------------------------------------
   Self-contained override block. To fully revert this pass:
     1. delete everything below this banner, AND
     2. restore the RSVP + details markup in the-wedding.html
        (backup: the-wedding.html.prerefine).
   No header/footer/nav/colour/type/copy changes — layout & rhythm only.
   Existing on-dark palette vars (--peach / --cream-on-dark / --gold) are
   reused for text that now sits on the green band; no new colours added.
   ===================================================================== */

/* ---- 1. RSVP — two-column editorial spread (was a centred card) ----
   Mobile-first: stacked & centred. Desktop (>=761px): orchid | content.
   The old .rsvp-card rules stay in the file but are now unused (dormant). */
.rsvp-spread{
  width:100%; max-width:1040px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(28px,5vw,48px); text-align:center;
}
.rsvp-figure img{
  display:block; width:100%; max-width:230px; height:auto; margin:0 auto;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.32));
}
/* recolour content for the green ground using existing on-dark tones */
.rsvp .rsvp-script{ color:var(--peach); }
.rsvp h2{ color:var(--cream-on-dark); }
.rsvp p{ color:var(--cream-on-dark); opacity:.92; max-width:430px; }
.rsvp .rb-label{ color:var(--peach); }
.rsvp .rb-date{ color:var(--cream-on-dark); }

@media (min-width:761px){
  .rsvp-spread{
    flex-direction:row; align-items:center; justify-content:center;
    gap:clamp(40px,6vw,84px); text-align:left;
  }
  .rsvp-figure{ flex:0 0 auto; }
  .rsvp-figure img{ max-width:330px; }
  .rsvp-content{ flex:0 1 460px; }
  .rsvp-content .rule-motif{ margin:18px 0 22px; }   /* left-align the motif */
  .rsvp p{ margin:0; }
}

/* ---- 2. ORDER OF EVENTS — ~20% larger & more prominent ----
   Scoped to >=561px so the (max-width:560px) mobile timeline is untouched. */
@media (min-width:561px){
  .events{ padding:74px 7vw 74px; }                       /* more breathing room */
  .events-card{ max-width:920px; padding:52px 46px 36px; }
  .timeline{ max-width:840px; margin:64px auto 0; }
  .timeline::before{ width:1px; }
  .tl-row{ grid-template-columns:1fr 78px 1fr; margin-bottom:30px; }
  .tl-node .tl-circle{ width:70px; height:70px; }
  .tl-node svg{ width:34px; height:34px; }
  .tl-time{ font-size:31px; }
  .tl-detail{ font-size:18px; margin-top:6px; }
  .tl-desc{ font-size:15px; line-height:1.8; max-width:300px; }
  .ev-caps{ font-size:clamp(2rem,4.2vw,3.4rem); }
  .ev-script{ font-size:clamp(2.4rem,5.4vw,4.3rem); }
}

/* ---- 3. DETAILS — lead / paired / finale rhythm (was 4 identical blocks) ---- */
/* 3a. Dress Code = prominent lead */
.ds-lead .ds-head{ font-size:clamp(1.9rem,4vw,2.8rem); }

/* 3b. Transport + Children = side-by-side pair (breaks the vertical stack) */
.ds-pair{ display:grid; gap:clamp(30px,5vw,56px); }
@media (min-width:761px){
  .ds-pair{ grid-template-columns:1fr 1fr; align-items:start; }
  .ds-pair .ds-block{ text-align:left; }
  .ds-pair .ds-num{ text-align:left; }
  .ds-pair .ds-icon{ justify-content:flex-start; }
  .ds-pair .ds-block p{ max-width:none; margin:0 0 14px; }
}

/* 3c. Gifts = finale + closing flourish */
.ds-finale .ds-head{ font-size:clamp(1.7rem,3.6vw,2.5rem); }
.ds-close{ text-align:center; margin-top:clamp(36px,5vw,56px); }
.ds-close .rm-leaf{ width:72px; height:auto; color:var(--gold); opacity:.9; }

/* ---- 4. RSVP ASSET REPLACEMENT (imagery only — layout untouched) ----
   floral: images/rsvp-floral.jpg (1855 Strelitzia antique plate — public domain, Wikimedia)
   ground: the events' deco-palm wallpaper (purp.jpg) recoloured to a sister GREEN
           colourway, so RSVP reads as the SAME printed wallpaper suite as the purple
           sections rather than a photograph.
   (rsvp-bg.jpg dark-palm photo is now UNUSED — kept on disk only as a backup.)
   Originals (orchid.png / leaf-texture.jpg) are left in place & still used elsewhere.
   Revert: delete this sub-block + restore the figure markup (orchid.png) in the-wedding.html. */
.rsvp{ position:relative; isolation:isolate; background:#28331a; }
.rsvp::before{   /* same wallpaper as Order-of-Events, hue-shifted burgundy -> deep green */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url('../images/purp.jpg') center/cover no-repeat;
  filter:sepia(1) saturate(1.9) hue-rotate(55deg) brightness(.72) contrast(1.04);
}
.rsvp::after{    /* soft wash keeps the cream text legible over the pattern */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(22,30,12,.30), rgba(22,30,12,.48));
}
/* floral now reads as a layered antique botanical print on aged paper */
.rsvp-figure.is-print{
  background:#f4ecd8; padding:12px 12px 10px;
  box-shadow:0 20px 44px rgba(0,0,0,.38);
  transform:rotate(-1.5deg);                                   /* subtle "placed" tilt */
}
.rsvp-figure.is-print img{
  display:block; width:100%; max-width:300px; height:auto; margin:0;
  border:1px solid rgba(120,95,55,.22); filter:none;
}
@media (min-width:761px){
  .rsvp-figure.is-print img{ max-width:340px; }
}
/* END EDITORIAL REFINEMENT PASS */

/* =====================================================================
   FINAL POLISH PASS  (the-wedding.html only)
   Asset-quality, depth & editorial texture — no layout/colour/type changes.
   Revert: delete this whole block (down to END FINAL POLISH PASS).
   ===================================================================== */

/* --- A. ORDER OF EVENTS: more presence + premium "printed itinerary" depth --- */
.events-card{
  position:relative;                                   /* for the gilt keyline */
  /* layered, softer shadow = paper lifted off the wallpaper */
  box-shadow:0 34px 74px rgba(35,24,15,.26), 0 8px 20px rgba(35,24,15,.12);
}
.events-card::after{                                   /* thin gilt inner rule, matches invite/RSVP */
  content:""; position:absolute; inset:13px;
  border:1px solid rgba(193,151,74,.30); pointer-events:none;
}
@media (min-width:561px){
  .events{ padding-top:90px; padding-bottom:90px; }    /* +breathing room */
  .events-card{ max-width:960px; padding:60px 56px 42px; }  /* ~+10-12% */
  .timeline{ max-width:860px; }
}

/* --- B. DETAILS: faint botanical engraving = printed-page editorial texture --- */
.details-body{ position:relative; overflow:hidden; }
.details-body::before{                                 /* large, very faint palm engraving, lower-right */
  content:""; position:absolute; right:-64px; bottom:-26px;
  width:clamp(220px,26vw,360px); height:clamp(300px,38vw,500px);
  background:url('../images/palm.png') right bottom/contain no-repeat;
  opacity:.05; pointer-events:none; z-index:0;
}
.details-body::after{                                  /* small mirrored sprig, upper-left, even fainter */
  content:""; position:absolute; left:-54px; top:40px;
  width:clamp(160px,18vw,240px); height:clamp(220px,26vw,340px);
  background:url('../images/palm.png') left top/contain no-repeat;
  opacity:.04; transform:scaleX(-1); pointer-events:none; z-index:0;
}
.details-body > *{ position:relative; z-index:1; }     /* keep all text crisply above the texture */
/* END FINAL POLISH PASS */

/* =====================================================================
   STATIONERY-SUITE PASS  (the-wedding.html only)
   Editorial layering + asymmetry so sections read as arranged printed
   objects, not stacked web blocks. No header/footer/colour/type/copy edits.
   New asset: images/rsvp-orchid.jpg (Vanda tricolor, Curtis's Bot. Mag.
   pl.4432 1849 — public domain, Wikimedia). Reuses palm.png / purp.jpg.
   Revert: `git checkout <base-branch> -- .`  (or delete this whole block
   + restore the single-print RSVP figure markup).
   ===================================================================== */

/* ---- RSVP: two collected antique prints arranged on the wallpaper ---- */
.rsvp-figure{ position:relative; }
.rsvp-print{                                   /* shared "framed print" treatment */
  background:#f4ecd8; padding:3.3% 3.3% 2.8%;   /* proportional mat so the frame doesn't look fatter on small (phone) prints */
  box-shadow:0 18px 40px rgba(0,0,0,.42);
}
.rsvp-print img{
  display:block; width:100%; height:auto;
  border:1px solid rgba(120,95,55,.22); filter:none;
}
/* subtle vintage fade on the couple photo (light, not yellow/sepia-heavy) */
.rsvp-print--main img{ filter:sepia(.12) saturate(.88) contrast(.96) brightness(1.04); }
.rsvp-print--main{                             /* hero: bird of paradise, tilted left */
  position:relative; z-index:2; width:300px; transform:rotate(-3deg);
}
.rsvp-print--orchid{                           /* second print (pink.jpg) — has its OWN border, so no added frame; slightly larger */
  position:absolute; z-index:1; width:240px;
  left:-94px; bottom:-74px; transform:rotate(9deg);
  background:none; padding:0; box-shadow:0 14px 32px rgba(0,0,0,.34);
}
.rsvp-print--orchid img{ height:auto; object-fit:fill; border:none; }  /* show full artwork incl. its own frame */
@media (min-width:761px){
  .rsvp-print--main{ width:330px; }
  .rsvp-print--orchid{ width:268px; left:-116px; bottom:-86px; }
}
@media (max-width:760px){                      /* mobile: scale prints to the viewport so the frame isn't oversized */
  .rsvp-print--main{ width:min(52vw,240px); }
  .rsvp-print--orchid{ left:-34px; bottom:24px; width:min(42vw,182px); transform:rotate(10deg); }
}

/* ---- ORDER OF EVENTS: bigger itinerary + a second sheet stacked behind ---- */
@media (min-width:561px){
  .events-card{ max-width:1000px; padding:64px 60px 46px; }
  .timeline{ max-width:900px; }
}
.events-card::before{                          /* tilted under-sheet = stack of stationery */
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--card3); border:1px solid var(--hair2);
  transform:rotate(-1.5deg) translate(-12px,12px);
  box-shadow:0 20px 46px rgba(35,24,15,.18);
}

/* ---- DETAILS: editorial "chapters" — faint engraved botanicals, asymmetric ---- */
.details-body::before{ opacity:.045; }         /* dial the section watermarks back a touch */
.details-body::after{ opacity:.035; }
.ds-lead, .ds-finale{ position:relative; }
.ds-lead::before,                              /* lead: palm engraving offset to the right */
.ds-finale::before{                            /* finale: mirrored palm offset to the left */
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:clamp(120px,15vw,180px); height:clamp(170px,21vw,250px);
  background:url('../images/palm.png') center/contain no-repeat;
  opacity:.07;
}
.ds-lead::before{ right:-72px; top:-10px; transform:rotate(6deg); }
.ds-finale::before{ left:-72px; bottom:-10px; transform:rotate(-6deg) scaleX(-1); }
.ds-lead > *, .ds-finale > *{ position:relative; z-index:1; }

/* =====================================================================
   HOMEPAGE STATIONERY PASS  (index.html only — scoped to .invitation-lay)
   Goal: make the homepage feel like the same printed suite as the wedding
   page. No header/footer/colour/type/copy changes.
   Assets reused: rsvp-orchid.jpg, rsvp-floral.jpg, palm.png, purp.jpg.
   Revert: `git checkout main -- .`  or delete just this block + restore
   the .fl-flower markup with orchid.png in index.html.
   ===================================================================== */

/* 1. Green section is now the SAME recoloured deco-palm wallpaper as the
      wedding-page RSVP (one fabric, one suite). Hides the old leaf texture. */
.invitation-lay{
  position:relative; isolation:isolate;
  background:#28331a !important;        /* override the old leaf-texture block */
  background-image:none !important;
}
.invitation-lay::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:url('../images/purp.jpg') center/cover no-repeat;
  filter:sepia(1) saturate(1.9) hue-rotate(55deg) brightness(.72) contrast(1.04);
}
.invitation-lay::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(22,30,12,.30), rgba(22,30,12,.48));
}

/* 2. Orchid PNGs → antique framed prints (same collection as the wedding page).
      The old .fl-flower IMG rules are overridden by being attached to new
      class-wrapped figures (.fl-print) — clean, fully revertible. */
.fl-print{
  position:absolute; z-index:0; pointer-events:none;
  background:#f4ecd8; padding:10px 10px 8px;
  box-shadow:0 18px 36px rgba(0,0,0,.40);
}
.fl-print img{
  display:block; width:100%; height:auto;
  border:1px solid rgba(120,95,55,.22);
}
.fl-print-tl{                                 /* Vanda orchid, tucked behind, upper-left */
  top:-30px; left:-92px; width:182px; transform:rotate(-10deg);
}
.fl-print-tl img{ height:226px; object-fit:cover; object-position:35% 30%; }
.fl-print-br{                                 /* Strelitzia, tucked behind, lower-right */
  bottom:-34px; right:-94px; width:188px; transform:rotate(9deg);
}
.fl-print-br img{ height:240px; object-fit:cover; object-position:50% 28%; }
@media (max-width:760px){
  .fl-print-tl{ width:128px; left:-32px; top:-18px; }
  .fl-print-br{ width:140px; right:-36px; bottom:-22px; }
  .fl-print-br img{ height:180px; }
}

/* 3. Invitation card — gilt double-frame to match the wedding-page invite.
      Keeps existing layout/type/copy; just upgrades the printed feel. */
.flatlay-card{ background:linear-gradient(var(--card),var(--card2)); border:none; }
.flatlay-card::before{
  content:""; position:absolute; inset:0; padding:1px; pointer-events:none;
  background:var(--foil);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.flatlay-card::after{                         /* inner gilt rule */
  content:""; position:absolute; inset:10px;
  border:1px solid rgba(193,151,74,.45); pointer-events:none;
}
.flatlay-card > *{ position:relative; }
.flatlay-card .fl-rule{ width:60px; background:var(--foil); }

/* 3b. Small RSVP-deadline line — restrained, additive, matches the suite. */
.flatlay-card .fl-rsvp{
  margin-top:18px; padding-top:14px;
  border-top:1px solid rgba(193,151,74,.30);
  font-family:var(--serif);
}
.fl-rsvp-lbl{ font-size:9.5px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
.fl-rsvp-date{ font-size:12px; letter-spacing:.04em; color:var(--terra); font-weight:700; display:block; margin-top:3px; }

/* 4. Countdown card — re-styled to match the invitation paper, NOT a widget.
      Removes bright teal border, removes 18px radius, adds the same gold
      double-frame + inner gilt rule. Opposite tilt = a companion piece. */
.cd-card{
  background:linear-gradient(var(--card),var(--card2)) !important;
  border:none !important; border-radius:0 !important;
  padding:46px 40px !important;
  box-shadow:0 18px 40px rgba(0,0,0,.30) !important;
  transform:rotate(-1.5deg) !important;
  position:relative; overflow:visible !important;
}
.cd-card::before{
  content:""; position:absolute; inset:0; padding:1px; pointer-events:none;
  background:var(--foil);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.cd-card::after{
  content:""; position:absolute; inset:10px;
  border:1px solid rgba(193,151,74,.45); pointer-events:none;
}
.cd-card > *{ position:relative; }
.cd-card .cd-lead{
  font-family:var(--script) !important; text-transform:none !important;
  letter-spacing:.01em !important; color:var(--terra) !important;
  font-size:clamp(20px,2.4vw,28px) !important; line-height:1.2 !important;
  margin-bottom:14px !important; padding-bottom:0 !important;
}
.cd-card .cd-num{ color:var(--ink); }
.cd-card .cd-lbl{ color:var(--muted); }
.cd-card .cd-sep{ color:var(--gold-d); opacity:.7; }

/* 5. Couple photo — very subtle film grade for editorial polish, not a filter. */
.welcome .pf-inner img{
  filter:brightness(1.02) contrast(.97) saturate(1.04) sepia(.06);
}

/* asymmetric pair: nudge the two cards slightly so they read as ARRANGED,
   not symmetrically placed. Desktop only — mobile stacks naturally. */
@media (min-width:761px){
  .invitation-lay .flatlay{ transform:translateY(-12px); }
  .invitation-lay .cd-card{ transform:rotate(-1.5deg) translateY(14px) !important; }
}
/* END HOMEPAGE STATIONERY PASS */

/* =====================================================================
   HOMEPAGE FINAL PASS  (index.html only)
   Story: the homepage is the SAVE THE DATE / travel-destination intro;
   the wedding page stays the formal invitation. No header/footer/colour/
   type-family changes.
   Save-the-Date supporting cards now use client artwork (paint.jpeg /
   paint1.jpg) — see the VENUE PASS block. (Earlier draft used antique
   Gulf-of-Siam map cards; superseded.)
   Revert: `git checkout refine/stationery-suite -- .`  or delete this
   block + restore the previous invitation markup in index.html.
   ===================================================================== */

/* 1. Supporting cards = two collected antique charts of the Gulf of Siam
      (unique to the homepage; the destination, not the wedding's florals). */
.fl-print-tl img,
.fl-print-br img{ filter:sepia(.10) saturate(.96) contrast(1.02); }
.fl-print-tl img{ height:236px; object-fit:cover; object-position:22% 34%; }   /* gulf coastline + rhumb lines */
.fl-print-br img{ height:240px; object-fit:cover; object-position:42% 40%; }   /* compass rose + coastline */
@media (max-width:760px){
  .fl-print-tl img{ height:184px; }
  .fl-print-br img{ height:184px; }
}

/* 2. Central card reads as a SAVE THE DATE overview (styling unchanged,
      hierarchy clarified — names larger, date promoted, destination clear). */
.flatlay-card .fl-top{ letter-spacing:5px; }                 /* SAVE THE DATE eyebrow */
.flatlay-card .fl-name{ font-size:40px; letter-spacing:.01em; }
.flatlay-card .fl-name.first{ margin:16px 0 2px; }
.flatlay-card .fl-name.last{ margin:2px 0 16px; }
.flatlay-card .fl-and{ font-size:34px; }
.flatlay-card .fl-lines{ line-height:1.7; }
.flatlay-card .fl-date{                                      /* the headline date */
  display:inline-block; font-family:var(--serif); font-weight:700;
  font-size:17px; letter-spacing:.06em; color:var(--ink); margin-bottom:2px;
}

/* 4. Filmstrip photos: lighter, warmer grade to match the welcome couple
      photo — one consistent editorial film tone across the page.
      (was sepia .35 / brightness .86 — too heavy & cool.) */
.film-frame .pol-img{
  filter:sepia(.16) saturate(.98) contrast(1.02) brightness(.99);
}
/* END HOMEPAGE FINAL PASS */
/* END STATIONERY-SUITE PASS */

/* =====================================================================
   GLOBAL FOOTER PASS  (shared .site-foot + .reel — every page)
   Elevate quality/cohesion only. No structure/colour/content changes.
   New asset: images/footer-sprig.svg (gold sprig — the site's recurring
   rule-motif, reused as the closing signature flourish).
   Revert: `git checkout refine/homepage-final -- .`  (or main), or delete
   this block + remove footer-sprig.svg.
   ===================================================================== */

/* 1. FILM STRIP — one cohesive warm, faded travel-film roll.
      Unifying grade (desaturate + warm + lifted blacks) PLUS a per-frame
      warm wash so disparate photos share one temperature & black level. */
.film-frame .pol-img{
  filter:sepia(.42) saturate(.66) contrast(.93) brightness(1.05) hue-rotate(-6deg);
}
.film-frame::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(155deg, rgba(120,72,40,.20), rgba(70,34,42,.26));
  mix-blend-mode:multiply;
}
/* couple shots (reel-1/3/5, same composition) cropped in a touch toward the
   couple — uniform zoom so they all match; scenery frames untouched */
.film-frame .pol-img[src*="reel-1"],
.film-frame .pol-img[src*="reel-3"],
.film-frame .pol-img[src*="reel-5"]{
  transform:scale(1.26); transform-origin:72% 64%;
}

/* 2. CONTACT TYPOGRAPHY — calmer rhythm, clearer hierarchy, more air. */
.site-foot{ position:relative; padding-top:66px; padding-bottom:74px; }
.ff-title{ letter-spacing:.1em; margin-bottom:2rem; }
.ff-contacts{ gap:18px clamp(34px,6vw,76px); }
.ff-label{ font-size:1rem; letter-spacing:.12em; }
.ff-item a{ font-size:.74rem; letter-spacing:.18em; color:rgba(244,239,226,.82); }
.ff-item{ gap:14px; }

/* 3. TRANSITION — a soft drop shadow from the section above marks the footer
      as a layer beneath it (replaces the gilt hairline; works on every page). */
.site-foot{ border-top:none; box-shadow:0 -7px 16px -3px rgba(0,0,0,.24); }

/* 4 + 5. CLOSING SIGNATURE — gold sprig above the N&O monogram + more air.
      The sprig is the site's recurring rule-motif, tying the footer to the
      invitation suite. */
.reel-foot-logo{
  position:relative; opacity:.82;
  letter-spacing:.4em; text-indent:.4em;
  font-size:clamp(1.4rem,2vw,1.6rem);
  padding:54px 0 42px;
}
.reel-foot-logo::before{
  content:""; position:absolute; left:50%; top:24px; transform:translateX(-50%);
  width:56px; height:22px; pointer-events:none;
  background:url('../images/footer-sprig.svg') center/contain no-repeat;
  opacity:.92;
}
/* END GLOBAL FOOTER PASS */

/* =====================================================================
   COMING-SOON PLACEHOLDER  (temporary — getaway/travel/accommodation/
   koh-tao/faqs while only Home + Wedding are published for review).
   Full page versions are preserved in /_full-pages/ and in git history.
   Revert: restore each page from /_full-pages/ (or `git checkout
   refine/footer -- <page>.html`) and delete this block.
   ===================================================================== */
.coming-soon{
  text-align:center; max-width:680px;
  margin:0 auto; padding:clamp(84px,12vw,150px) 7vw clamp(96px,13vw,160px);
}
.coming-soon .rule-motif{ margin-bottom:30px; }
.cs-eyebrow{
  font-size:11px; letter-spacing:4px; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px;
}
.cs-title{
  display:flex; align-items:baseline; justify-content:center; gap:.2em;
  line-height:1; margin-bottom:24px;
}
.cs-caps{
  font-family:var(--mignon); text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(2rem,5vw,3.4rem); color:var(--ink);
}
.cs-script{
  font-family:var(--script); font-size:clamp(2.6rem,6.5vw,4.6rem);
  color:var(--terra); line-height:1;
}
.cs-text{ font-size:15px; line-height:1.95; color:var(--body2); max-width:480px; margin:0 auto; }
.cs-text a{ color:var(--terra); text-decoration:none; border-bottom:1px solid rgba(110,31,58,.35); }
.cs-text a:hover{ border-color:var(--terra); }
/* long single-word hero titles (e.g. Accommodation) shrink to fit the band */
.page-title.subpage-hero h1.h1-long{ font-size:clamp(26px,5vw,48px); }
/* END COMING-SOON PLACEHOLDER */

/* =====================================================================
   VENUE PASS  (the-wedding venue feature + RSVP wording + 7-event timeline,
   and homepage Save-the-Date painterly cards). No palette/type/layout
   rebuilds — reuses existing tokens, textures and editorial language.
   New assets: images/venue.jpg (Koh Samui golden-hour beach — Unsplash,
   PLACEHOLDER for Nik's real Ban Sairee Villa photo), images/paint.jpeg,
   images/paint1.jpg (client-supplied painterly artwork).
   Revert: `git checkout deploy/coming-soon -- .` (or main), or delete this
   block + restore the prior the-wedding/index markup.
   ===================================================================== */

/* homepage Save-the-Date: show the painterly artwork true-colour & centred
   (overrides the aged/positioned treatment used for the old map cards) */
.fl-print-tl img, .fl-print-br img{ filter:none; object-position:center; }

/* ---- VENUE feature: luxury destination editorial, invite -> venue -> RSVP ---- */
.venue{ background:var(--cream); }
.venue-hero{ position:relative; height:clamp(360px,60vh,600px); overflow:hidden; }
.venue-hero img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; display:block; }
.venue-hero::after{                              /* legibility scrim, heavier at the base */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(rgba(30,18,14,.04), rgba(30,18,14,.18) 55%, rgba(28,18,12,.62));
}
.venue-hero::before{                             /* gilt-cream inset keyline — ties to the suite's framed plates */
  content:""; position:absolute; inset:clamp(14px,2vw,22px);
  border:1px solid rgba(244,239,226,.38); z-index:2; pointer-events:none;
}
.venue-hero-cap{
  position:absolute; left:0; right:0; bottom:clamp(30px,5vw,54px); z-index:3;
  text-align:center; padding:0 7vw; color:var(--cream-on-dark);
}
.vn-eyebrow{ font-size:11px; letter-spacing:5px; text-transform:uppercase; color:rgba(244,239,226,.82); margin-bottom:14px; }
.vn-title{
  font-family:var(--mignon); text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(2rem,5.2vw,3.8rem); line-height:1.14; color:var(--cream-on-dark);
}
.vn-place{ font-family:var(--serif); font-size:clamp(13px,1.8vw,17px); letter-spacing:.22em; text-transform:uppercase; margin-top:14px; color:rgba(244,239,226,.9); }
.venue-body{ max-width:600px; margin:0 auto; padding:clamp(44px,7vw,72px) 7vw clamp(54px,8vw,84px); text-align:center; }
.venue-body .rule-motif{ margin-bottom:26px; }
.vn-lead{ font-family:var(--serif); font-size:clamp(17px,2.3vw,21px); line-height:1.62; color:var(--ink); }
.vn-arrival{ font-size:14px; line-height:1.9; color:var(--body2); margin:22px auto 0; max-width:460px; }
.vn-map{
  display:inline-block; margin-top:26px; font-family:var(--serif); font-weight:700;
  font-size:12.5px; letter-spacing:2px; text-transform:uppercase; color:var(--terra);
  text-decoration:none; border-bottom:1px solid rgba(193,151,74,.55); padding-bottom:4px;
  transition:border-color .2s ease;
}
.vn-map:hover{ border-color:var(--terra); }

/* ---- RSVP 'wedding day only' note — understated, on the green ground ---- */
.rsvp .rsvp-note{ font-size:12px; line-height:1.7; letter-spacing:.02em; color:rgba(244,239,226,.7); max-width:380px; margin:18px auto 0; }
@media (min-width:761px){ .rsvp .rsvp-note{ margin-left:0; } }

/* ---- Order of Events intro line ---- */
.events .ev-intro{ font-size:14px; line-height:1.8; color:var(--body2); max-width:440px; margin:0 auto 6px; text-align:center; }

/* ---- MOBILE FIXES (Save-the-Date cards overflow) ----
   (hero lockup is now handled globally in .hero-title h1 — one fixed,
   uniformly-scaling composition, so no per-breakpoint hero rules here) */
@media (max-width:760px){
  /* keep the painterly cards inside the viewport (fixes slight right-scroll);
     overrides the desktop offsets from the HOMEPAGE FINAL PASS above */
  .fl-print-tl{ width:122px; left:-24px; top:-16px; }
  .fl-print-br{ width:132px; right:-22px; bottom:-20px; }
  .fl-print-br img{ height:170px; }
}
/* belt-and-braces: never allow sideways scroll (nav is fixed, no sticky on live
   pages, so clipping the page's x-axis is safe) */
html{ overflow-x:clip; }
.hero, .invitation-lay{ overflow-x:clip; }
/* END VENUE PASS */

/* =====================================================================
   TIMELINE PASS — handcrafted / editorial (icons + mobile rhythm)
   Keeps the timeline concept & content; refines feel + mobile layout.
   ===================================================================== */
/* hand-drawn event icons rendered with rough.js at runtime (see js/site.js) */
.tl-node svg{ overflow:visible; }

/* dotted-gold "route" rail (travel-journal) + seal-style double-ring circles */
.timeline::before{
  width:2px;
  background:repeating-linear-gradient(var(--gold) 0 2px, transparent 2px 9px);
  opacity:.75;
}
.tl-node .tl-circle{
  box-shadow:0 6px 16px rgba(60,45,30,.14), inset 0 0 0 1px rgba(193,151,74,.45);
}

/* ---- MOBILE: alternating centre-rail (zig-zag) instead of a flat single rail;
        bigger, airier, occupies more width ---- */
@media (max-width:560px){
  .events{ padding:48px 4vw 52px; }
  .events-card{ padding:34px 12px 30px; }
  .ev-intro{ padding:0 6vw; }
  .timeline{ max-width:none; margin-top:34px; }
  .timeline::before{ left:50%; }
  .tl-row{ grid-template-columns:1fr 54px 1fr; align-items:center; margin-bottom:42px; }
  .tl-node{ grid-column:2; padding-top:0; }
  .tl-node .tl-circle{ width:54px; height:54px; }
  .tl-node svg{ width:26px; height:26px; }
  .tl-row.left  .tl-text{ grid-column:1; text-align:right; padding:0 12px 0 2px; }
  .tl-row.right .tl-text{ grid-column:3; text-align:left;  padding:0 2px 0 12px; }
  .tl-row .tl-spacer{ display:none; }
  .tl-time{ font-size:28px; }
  .tl-ampm{ font-size:12px; }
  .tl-detail{ font-size:14px; line-height:1.35; margin-top:3px; }
}
/* END TIMELINE PASS */

/* =====================================================================
   ACCOMMODATION MEDIA — Villa Kalyana video + property gallery
   ===================================================================== */
.villa-video{ max-width:1000px; margin:0 auto; padding:24px 7vw 12px; text-align:center; }
.vv-head{ margin-bottom:22px; }
.vv-head h2{ font-family:var(--serif); font-size:clamp(28px,4.2vw,42px); line-height:1.05; color:var(--ink); margin-top:6px; }
.vv-frame{ position:relative; box-shadow:0 26px 60px rgba(40,28,18,.30); }
.vv-frame video{ display:block; width:100%; height:auto; background:#1a100a; }
.vv-frame::after{                                   /* gilt inset keyline, ties to the suite */
  content:""; position:absolute; inset:10px; border:1px solid rgba(244,239,226,.35);
  pointer-events:none; z-index:2;
}
.villa-gallery{ max-width:1120px; margin:0 auto; padding:28px 7vw 8px; }
.vg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.vg-grid img{ width:100%; height:230px; object-fit:cover; display:block; box-shadow:0 10px 24px rgba(60,45,30,.14); }
@media (max-width:760px){
  .vg-grid{ grid-template-columns:1fr 1fr; gap:9px; }
  .vg-grid img{ height:150px; }
}
/* END ACCOMMODATION MEDIA */

/* =====================================================================
   HOMEPAGE FEEDBACK PASS (Nik, round 1) — index.html
   ===================================================================== */
/* Envelope (her Canva design) sits ABOVE the countdown; countdown unchanged */
.inv-stack{ display:flex; flex-direction:column; align-items:center; gap:clamp(30px,5vw,54px); }
.envelope{ margin:0; width:min(440px,84vw); }
.envelope img{ display:block; width:100%; height:auto; filter:drop-shadow(0 22px 42px rgba(0,0,0,.34)); }

/* the painterly prints now peek from behind the COUNTDOWN card */
.cd-wrap{ position:relative; display:inline-block; }
.cd-wrap .fl-print-tl{ top:-34px; left:-52px; width:150px; bottom:auto; }
.cd-wrap .fl-print-br{ bottom:-36px; right:-52px; top:auto; width:160px; }
@media (max-width:600px){
  .cd-wrap .fl-print-tl{ left:-14px; top:-22px; width:104px; }
  .cd-wrap .fl-print-br{ right:-14px; bottom:-22px; width:110px; }
}

/* welcome: photo −20%, body copy ALL CAPS + smaller, signature smaller */
.welcome .photo-frame img{ width:256px; max-width:32vw; }
.welcome-text p{ text-transform:uppercase; letter-spacing:.045em; font-size:clamp(.78rem,.96vw,.9rem); line-height:1.95; }
.welcome-sig .sig-name{ font-size:clamp(1.85rem,2.5vw,2.45rem); }
@media (max-width:760px){
  .welcome .photo-frame img{ width:224px; max-width:60vw; }
}
/* END HOMEPAGE FEEDBACK PASS */

/* =====================================================================
   FEEDBACK PASS 2 — paper/green split, bigger envelope, photo mat,
   shell motif sizing, rectangular buttons
   ===================================================================== */
/* envelope sits on PAPER (green wallpaper removed here, moved to countdown) */
.invitation-lay{
  background:var(--cream2) url('../images/paper-texture.jpg') center/cover !important;
  isolation:auto;
  padding:clamp(40px,6vw,76px) 7vw clamp(48px,7vw,84px) !important;
  text-align:center;
}
.invitation-lay::before, .invitation-lay::after{ display:none !important; }
.envelope{ width:min(640px,100%); margin:0 auto; }     /* much bigger, fits the padded box so margin:auto can centre it */
/* keep it large on mobile by trimming the section's side padding */
@media (max-width:600px){
  .invitation-lay{ padding-left:clamp(12px,4vw,22px) !important; padding-right:clamp(12px,4vw,22px) !important; }
}

/* countdown keeps the green deco wallpaper, on its own band */
.countdown-band{
  position:relative; isolation:isolate; background:#28331a;
  padding:clamp(56px,9vw,98px) 7vw clamp(64px,10vw,108px); text-align:center;
}
.countdown-band::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:url('../images/purp.jpg') center/cover no-repeat;
  filter:sepia(1) saturate(1.9) hue-rotate(55deg) brightness(.72) contrast(1.04);
}
.countdown-band::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(22,30,12,.30), rgba(22,30,12,.48));
}

/* welcome photo: smaller PICTURE, transparent surround (no white mat) */
.welcome .pf-inner{ padding:30px !important; background:transparent !important; }
.welcome .photo-frame img{ width:186px !important; max-width:44vw !important; }
@media (max-width:760px){
  .welcome .pf-inner{ padding:22px !important; }
  .welcome .photo-frame img{ width:168px !important; max-width:50vw !important; }
}

/* shell motif = Nik's newshell.png used as-is (no effects) */
.rm-leaf{
  display:inline-block;
  background:url('../images/newshell.png') center/contain no-repeat;
}
.rule-motif .rm-leaf{ flex:0 0 auto; width:30px; height:30px; }
.ds-close .rm-leaf{ width:50px; height:50px; }
.reel-foot-logo{ display:flex; flex-direction:column; align-items:center; padding:28px 0 40px !important; text-indent:.2em !important; }
.reel-foot-logo::before{
  position:static !important; transform:none !important; left:auto !important; top:auto !important;
  width:26px; height:26px; margin:0 0 12px;
  background:url('../images/newshell.png') center/contain no-repeat;
}

/* ALL buttons rectangular OUTLINE (Baan Talay style): thin border, interior
   matches the ground, letter-spaced text */
.nav-rsvp, .nav.scrolled .nav-rsvp, .btn-display, .subnav .sub-cta, .room-toggle{
  border-radius:0 !important;
}
/* Nav RSVP — see-through with white outline + white text, fills gold on hover.
   inline-flex + line-height:1 optically centres the all-caps text in the bar. */
.nav-rsvp, .nav.scrolled .nav-rsvp{
  display:inline-flex !important; align-items:center; justify-content:center;
  background:transparent !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.75) !important; box-shadow:none !important;
  font-size:.82rem !important; line-height:1 !important;
  letter-spacing:.16em !important; text-indent:.16em !important;
  padding:.72em 1.7em !important;
}
.nav-rsvp:hover, .nav.scrolled .nav-rsvp:hover{
  background:var(--gold) !important; color:var(--terra) !important;
  border-color:var(--gold) !important;
}
/* Display CTAs (Request this room, etc.) — solid wine, white text, not see-through */
.btn-display{
  background:var(--terra) !important; color:#fff !important;
  border:1px solid var(--terra) !important;
  box-shadow:0 10px 26px rgba(110,31,58,.28) !important;
}
.btn-display:hover{
  background:var(--terra-d) !important; color:#fff !important; border-color:var(--terra-d) !important;
}
.subnav .sub-cta{                                           /* on light subnav */
  background:transparent !important; color:var(--terra) !important;
  border:1px solid var(--terra) !important;
}
.subnav .sub-cta:hover{ background:var(--terra) !important; color:var(--cream2) !important; }
/* END FEEDBACK PASS 2 */

/* =====================================================================
   ACCOMMODATION VIBE PASS — match the editorial suite + room subpages
   ===================================================================== */
/* villa band now uses the suite's green deco wallpaper (not flat olive) */
.villa{ position:relative; isolation:isolate; background:#28331a !important; }
.villa::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:url('../images/purp.jpg') center/cover no-repeat;
  filter:sepia(1) saturate(1.9) hue-rotate(55deg) brightness(.72) contrast(1.04);
}
.villa::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(22,30,12,.34), rgba(22,30,12,.52));
}

/* room cards: the toggle is now a link to the room's gallery subpage */
a.room-toggle{ display:block; text-align:center; text-decoration:none; }
/* whole room card is clickable — the View-details link stretches over the card */
.room{ position:relative; cursor:pointer; }
.room a.room-toggle::after{ content:""; position:absolute; inset:0; z-index:1; }
.room:hover a.room-toggle{ background:var(--terra); color:var(--cream2); }

/* ---- ROOM DETAIL SUBPAGE ---- */
.room-detail{ max-width:1040px; margin:0 auto; padding:clamp(28px,5vw,52px) 7vw clamp(50px,8vw,84px); text-align:center; }
.room-back{ display:inline-block; font-family:var(--sans); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--terra); text-decoration:none; margin-bottom:18px; }
.room-back:hover{ text-decoration:underline; }
.rd-head .eyebrow{ justify-content:center; }
.rd-head .rule-motif{ margin:14px auto 14px; }
.rd-price{ font-family:var(--serif); font-weight:700; font-size:clamp(22px,3vw,28px); color:var(--terra); }
.rd-price span{ font-family:var(--sans); font-weight:400; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); display:block; margin-top:3px; }
.rd-stats{ display:flex; justify-content:center; align-items:center; gap:clamp(16px,3vw,30px); flex-wrap:wrap; margin:22px 0 4px; }
.rd-stats .rs-lbl{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.rd-stats .rs-val{ font-family:var(--serif); font-size:16px; color:var(--ink); margin-top:3px; }
.rd-stats .rs-div{ width:1px; height:28px; background:var(--hair); }
.rd-desc{ font-family:var(--serif); font-size:clamp(16px,2vw,19px); line-height:1.7; color:var(--body); max-width:640px; margin:18px auto 0; }
.rd-extra{ font-size:13px; color:var(--body2); margin:14px auto 0; }
.rd-gallery{ margin-top:38px; }
.rd-cta{ margin-top:38px; }
.rd-cta .btn-display{ font-size:16px !important; letter-spacing:2px; padding:17px 52px !important; }
/* END ACCOMMODATION VIBE PASS */

/* ROOM SUBPAGES — simple (no tapestry hero; flat cream, clears fixed nav) */
.room-detail{ padding-top:clamp(96px,12vw,124px); }
.rd-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,5vw,46px); line-height:1.12; letter-spacing:.01em;
  color:var(--ink); margin:6px auto 0; max-width:14ch;
}
.room-detail .rd-head{ margin-top:18px; }
/* END ROOM SUBPAGES SIMPLE */

/* =====================================================================
   THE WEDDING — feedback v2
   Reorder: Invitation → Order of Events → Venue → RSVP → Other Details
   ===================================================================== */

/* ---- Invitation: feels like a physical card — linen ground, fewer fonts
        & colours, ALL CAPS structure, script "and"/"drinks", no N&O ---- */
.invite-card{
  background:var(--cream2) url('../images/paper-texture.jpg') center/cover;
  background-blend-mode:multiply;
}
.invite-card::before{ inset:12px; border-color:rgba(60,45,30,.30); }
.invite-card .ic-top{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:4px;
  font-size:11px; color:var(--ink);
}
.invite-card .ic-name{
  font-family:var(--mignon); font-weight:400; text-transform:uppercase;
  letter-spacing:.06em; text-indent:.06em; color:var(--ink);
  font-size:clamp(28px,5vw,42px); line-height:1.1;
}
.invite-card .ic-name.first{ margin:22px 0 2px; }
.invite-card .ic-name.last{ margin:2px 0 18px; }
.invite-card .ic-and{
  font-family:var(--script); color:var(--ink); font-size:clamp(34px,5vw,48px); margin:0;
}
.invite-card .ic-invite{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:2px;
  font-size:12px; line-height:1.8; color:var(--ink); margin-top:8px;
}
.invite-card .ic-when{
  font-family:var(--mignon); font-weight:400; font-style:normal;
  text-transform:uppercase; letter-spacing:.08em; text-indent:.08em;
  font-size:clamp(15px,2vw,18px); color:var(--ink); margin-top:26px;
}
.invite-card .ic-time{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:2px;
  font-size:11px; color:var(--body2); margin-top:9px;
}
.invite-card .ic-venue{
  font-family:var(--mignon); font-weight:400; text-transform:uppercase;
  letter-spacing:.1em; text-indent:.1em; font-size:14px; color:var(--ink); margin-top:26px;
}
.invite-card .ic-place{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:2.5px;
  font-size:11px; color:var(--body2); margin-top:7px;
}
.invite-card .ic-follow{
  font-family:var(--script); color:var(--ink); font-size:clamp(24px,3vw,32px); margin-top:24px;
}
/* her exact card text supplied as a transparent PNG — sits on the linen,
   keyline frames it (texture shows through the transparent areas) */
.invite-card--art{ padding:clamp(26px,3.6vw,44px); }
.invite-card .ic-art{ display:block; width:100%; height:auto; }

/* ---- Order of Events: horizontal timeline + fine hand-drawn line icons ---- */
.events .events-card{ max-width:min(1000px,94vw); }
.ev-timeline{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:clamp(22px,3vw,34px) clamp(8px,2vw,26px); margin-top:10px;
}
.ev-item{
  flex:1 1 120px; min-width:104px; max-width:164px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.ev-ico{ width:clamp(46px,5.4vw,62px); height:clamp(46px,5.4vw,62px); color:#5d2133; margin-bottom:12px; }
.ev-ico svg{ width:100%; height:100%; display:block; overflow:visible; }
.ev-time{ font-family:var(--serif); font-weight:700; font-size:clamp(20px,2.4vw,27px); color:var(--terra); line-height:1; }
.ev-time .ev-ampm{ font-size:.46em; font-weight:400; letter-spacing:1px; margin-left:3px; }
.ev-name{ font-family:var(--sans); font-weight:600; font-size:clamp(11px,1.15vw,13px); letter-spacing:.4px; color:var(--ink); margin-top:7px; line-height:1.3; }
/* keep the script word fully lowercase (the .events h2 rule forces uppercase) */
.events .ev-script{ text-transform:none; }

/* ---- shell dialled back: it's now a special accent (footer monogram +
        the page-header divider). Every other divider uses a small gold
        diamond so the shell stays meaningful instead of wallpaper. ---- */
.rule-motif .rm-leaf,
.ds-close .rm-leaf{
  background:var(--gold);
  width:8px; height:8px; transform:rotate(45deg); border-radius:1px;
}
.ds-close .rm-leaf{ width:11px; height:11px; opacity:.9; }
/* the one divider that keeps the shell: under the "OTHER details" header */
.rule-motif.rule-motif--shell .rm-leaf{
  background:url('../images/newshell.png') center/contain no-repeat;
  width:30px; height:30px; transform:none; border-radius:0;
}
/* END shell dial-back */

/* footer monogram: space the letters with a flex gap instead of letter-spacing,
   so there's no trailing gap after "O" — render AND selection both centre
   exactly under the shell */
.reel-foot-logo{ text-indent:0 !important; letter-spacing:0 !important; }
/* grid with the & as the centred middle column and N/O in equal side columns,
   so the & sits dead-centre under the shell regardless of N vs O width */
.reel-foot-logo .rfl-mono{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline;
  column-gap:.8em; width:100%; letter-spacing:0; margin-right:0;
}
.reel-foot-logo .rfl-mono > :nth-child(1){ justify-self:end; }
.reel-foot-logo .rfl-mono > :nth-child(3){ justify-self:start; }
/* END footer monogram centering */

/* ---- Venue note: tighter (arrival line removed in markup) ---- */
.venue-body .vn-lead{ margin-bottom:6px; }

/* ---- RSVP: "will you join us?" gold, button matches the nav, less busy ---- */
.rsvp .rsvp-script{ color:var(--gold) !important; }
#rsvpBtn{
  background:transparent !important; color:var(--cream-on-dark) !important;
  border:1px solid rgba(255,255,255,.75) !important; box-shadow:none !important;
}
#rsvpBtn:hover{
  background:var(--gold) !important; color:var(--terra) !important; border-color:var(--gold) !important;
}

/* ---- Other Details: heading matches Order-of-Events fonts, no icons,
        ALL-CAPS sub-headings, maps link in Transport ---- */
.details-head .dh-eyebrow{ margin-bottom:26px; }
.db-serif{ font-family:var(--grand); letter-spacing:.06em; text-indent:.06em; font-size:clamp(1.8rem,4vw,3rem); }
.db-script{ font-size:clamp(1.9rem,4.2vw,3rem); }
.details-body .ds-icon{ display:none; }
.details-body .ds-head{ text-transform:uppercase; }
.ds-map{ margin-top:16px; }
@media (min-width:761px){ .ds-pair .ds-map{ display:inline-block; } }
/* END THE WEDDING feedback v2 */

/* =====================================================================
   ACCOMMODATION ATMOSPHERE PASS — destination-suite feel, not boutique hotel.
   Strategic, low-opacity background treatments that echo the Home/Wedding
   deco-wallpaper + travel-paper language. No layout/type/palette changes.
   Clean breathing space kept on: Stay, video, gallery, Settling-up column.
   ===================================================================== */

/* 1. FIND YOUR ROOM — soft sage banana-leaf textile behind the card grid so the
      cards float on a green tropical atmosphere (covers naturally, no seams). */
.rooms{ position:relative; isolation:isolate; }
.rooms::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url('../images/bg-rooms-green.jpg') center/cover no-repeat;
  mix-blend-mode:multiply; opacity:.12;
}

/* 2. HOW IT WORKS — same travel-paper, warmed into the sand band (premium,
      editorial travel-guide page rather than a flat colour block). */
.howit{ position:relative; isolation:isolate; }
.howit::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url('../images/bg-palm-paper.jpg') center/cover no-repeat;
  mix-blend-mode:multiply; opacity:.18;
}

/* 3. WHAT'S INCLUDED — the teal panel reads as a luxury botanical textile. */
.incl-card{ position:relative; isolation:isolate; overflow:hidden; }
.incl-card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url('../images/bg-deco-green.jpg') center/cover no-repeat;
  mix-blend-mode:soft-light; opacity:.5;
}

/* 4. REQUEST YOUR ROOM — closing band on the suite's burgundy deco scallop
      (matches the Wedding RSVP / Order-of-Events grounds). */
.big-cta{ position:relative; isolation:isolate; overflow:hidden; }
.big-cta::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:url('../images/bg-deco-wine.jpg') center/cover no-repeat;
}
.big-cta::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(74,21,44,.52), rgba(74,21,44,.66));
}
.big-cta .blob{ display:none; }
/* END ACCOMMODATION ATMOSPHERE PASS */

/* =====================================================================
   ACCOMMODATION TYPOGRAPHY CONSISTENCY
   Content-section headings now use TAN Grandeur (--grand) to match the
   Home/Wedding section headings (welcome "we're getting MARRIED",
   "Order of events", "RSVP", "OTHER details"). Previously TAN Mignon.
   Band title (Villa Kalyana) intentionally stays Mignon — it matches the
   Wedding venue band ("Ban Sairee Villa"). Page title stays Mignon (matches).
   Revert: delete this block.
   ===================================================================== */
.rooms-head h2,
.howit-head h2,
.pay h2{ font-family:var(--grand); letter-spacing:.08em; }
/* END ACCOMMODATION TYPOGRAPHY CONSISTENCY */

/* =====================================================================
   ACCOMMODATION — STRUCTURAL CONSISTENCY PASS
   Hierarchy, spacing & section quality so the page reads as part of the
   wedding editorial suite. No new fonts, no new background art.
   Revert: delete this whole block (+ the small HTML/JS notes in commit).
   ===================================================================== */

/* 1. TYPOGRAPHY — bring the two stragglers onto the system (TAN Grandeur,
      uppercase) to match FIND YOUR ROOM / HOW IT WORKS / RSVP / OTHER details */
.vv-head h2{
  font-family:var(--grand); font-weight:400; text-transform:uppercase;
  letter-spacing:.06em; font-size:clamp(26px,4vw,40px); line-height:1.12; color:var(--ink);
}
.stay-title{
  font-family:var(--grand); font-weight:400; text-transform:uppercase;
  letter-spacing:.07em; font-size:clamp(2rem,4.4vw,3rem); line-height:1.1; color:var(--ink);
}

/* 2. OPENING ("Stay with us") — editorial hierarchy, copy unchanged */
.stay{ max-width:760px; padding:clamp(64px,8vw,92px) 7vw clamp(44px,6vw,64px); }
.stay .eyebrow{ justify-content:center; margin-bottom:14px; }
.stay .rule-motif{ max-width:240px; margin:16px auto clamp(26px,4vw,38px); }
.stay .lead{ font-family:var(--serif); font-size:clamp(22px,3vw,29px); line-height:1.55; color:var(--ink); }
.stay p.body{ margin-top:26px; }
.stay strong.teal{ color:var(--teal); font-weight:700; }

/* 3. VIDEO + GALLERY — one aligned container system, intentional spacing */
.villa-video{ max-width:1080px; margin:0 auto; padding:clamp(46px,6vw,78px) 7vw 0; text-align:center; }
.vv-head{ margin-bottom:clamp(20px,3vw,30px); }
.villa-gallery{ max-width:1080px; margin:0 auto; padding:clamp(16px,2.4vw,24px) 7vw clamp(46px,6vw,78px); }
.vg-grid{ gap:clamp(10px,1.4vw,16px); }

/* 4. VILLA KALYANA — curated blocks, not text on a backdrop */
.villa .inner{ max-width:1020px; }
.villa-top{ gap:clamp(32px,4.5vw,56px); margin-bottom:clamp(44px,6vw,64px); }
.villa .villa-times{
  margin-top:28px; padding-top:22px; gap:clamp(26px,4vw,46px);
  border-top:1px solid rgba(242,238,223,.22);
}
.villa .villa-times .vt-val{ font-size:clamp(26px,3.2vw,33px); }
.villa-lists{ gap:clamp(20px,3vw,32px); }
.villa-lists .villa-list{
  background:rgba(244,238,223,.045);
  border:1px solid rgba(242,238,223,.20);
  padding:clamp(26px,3vw,34px) clamp(24px,3vw,32px);
}
.villa-lists .villa-list .vl-script{
  font-size:clamp(27px,3.3vw,33px); color:var(--peach); margin-bottom:18px;
}
.villa-lists .villa-list ul{ gap:8px 22px; }

/* 5. HOW IT WORKS — editorial sequence, not SaaS cards */
.howit .steps{
  border-top:1px solid var(--hair2); border-bottom:1px solid var(--hair2);
  gap:0; margin-top:clamp(28px,4vw,40px);
}
.howit .step{
  background:transparent; border:0; position:relative;
  padding:clamp(26px,3vw,36px) clamp(16px,2vw,26px);
}
.howit .step .st-num{
  font-family:var(--grand); font-weight:400; font-size:clamp(38px,4.6vw,54px);
  color:var(--gold-d); line-height:1;
}
.howit .step .st-title{
  font-family:var(--serif); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:13px; color:var(--ink); margin:12px 0 8px;
}
.howit .step p{ font-size:12px; line-height:1.75; color:var(--muted3); }
.howit .howit-dates{ margin-top:clamp(26px,3.5vw,38px); }
@media (max-width:860px){ .howit .steps{ gap:clamp(8px,2vw,18px); } }
@media (min-width:861px){
  .howit .step + .step::before{
    content:""; position:absolute; left:0; top:20%; bottom:20%; width:1px; background:var(--hair3);
  }
}

/* 6. ROOMS — a little more breathing/rhythm around the head (cards untouched) */
.rooms-head{ margin-bottom:clamp(20px,3vw,30px); }
.rooms-head p{ margin-top:16px; }
/* END ACCOMMODATION STRUCTURAL CONSISTENCY PASS */

/* eyebrows: a little more clearance above the tall Grandeur headings */
.stay .eyebrow, .rooms-head .eyebrow, .howit-head .eyebrow,
.pay .eyebrow, .vv-head .eyebrow{ margin-bottom:22px; }

/* =====================================================================
   VILLA EXPERIENCE — EDITORIAL CENTERPIECE
   Villa Kalyana → cinematic film → curated gallery read as one spread.
   Composition only (same video, same 6 photos). Revert: delete this block
   + restore the old .villa-video markup.
   ===================================================================== */

/* tighten the lead-out of the green Villa band so it flows into the film */
.villa{ padding-bottom:clamp(40px,5vw,56px) !important; }

/* full-bleed cinematic film — the emotional peak */
.villa-video{ max-width:none !important; margin:0 !important; padding:0 !important; }
.vv-cinema{ position:relative; margin:0; width:100%; overflow:hidden; background:#1a100a; }
.vv-cinema video{ display:block; width:100%; height:clamp(380px,64vh,660px); object-fit:cover; background:#1a100a; }
.vv-cinema::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(24,15,9,.74), rgba(24,15,9,.20) 44%, rgba(24,15,9,0) 70%);
}
/* gilt-cream inset keyline — matches the Venue (Ban Sairee Villa) band */
.vv-cinema::before{
  content:""; position:absolute; inset:clamp(14px,2vw,22px);
  border:1px solid rgba(244,239,226,.38); z-index:2; pointer-events:none;
}
.vv-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(30px,5vw,64px) 7vw; text-align:center; color:var(--cream-on-dark);
}
.vv-cap .eyebrow{ color:rgba(244,239,226,.82); justify-content:center; margin-bottom:14px; }
.vv-cap .eyebrow::before, .vv-cap .eyebrow::after{ background:rgba(244,239,226,.4); }
.vv-cap h2{
  font-family:var(--mignon); font-weight:400; text-transform:uppercase; letter-spacing:.08em;
  color:var(--cream-on-dark); font-size:clamp(1.5rem,3.2vw,2.4rem); line-height:1.2; margin:0; max-width:18ch; margin-inline:auto;
}

/* curated gallery mosaic — the photo essay that continues the wander */
.villa-gallery{ max-width:1180px; margin:0 auto; padding:clamp(40px,5.5vw,72px) 7vw clamp(50px,7vw,84px) !important; }
.vg-grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(128px,14.5vw,188px); gap:clamp(10px,1.2vw,14px) !important;
}
.vg-grid img{ width:100%; height:100%; object-fit:cover; display:block; box-shadow:0 12px 30px rgba(60,45,30,.16); }
.vg-grid img:nth-child(1){ grid-column:span 4; grid-row:span 2; }
.vg-grid img:nth-child(2){ grid-column:span 2; }
.vg-grid img:nth-child(3){ grid-column:span 2; }
.vg-grid img:nth-child(4){ grid-column:span 2; }
.vg-grid img:nth-child(5){ grid-column:span 2; }
.vg-grid img:nth-child(6){ grid-column:span 2; }
@media (max-width:600px){
  .vg-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:clamp(118px,30vw,154px); }
  .vg-grid img{ grid-column:span 1 !important; grid-row:span 1 !important; }
  .vg-grid img:nth-child(1){ grid-column:span 2 !important; grid-row:span 2 !important; }
}
/* END VILLA EXPERIENCE CENTERPIECE */

/* =====================================================================
   RELOCATE GREEN TEXTURE
   Villa Kalyana → clean editorial (pattern removed, photography + content
   lead). Green tropical leaf → brought forward behind the room selection.
   Revert: delete this block.
   ===================================================================== */
/* Villa Kalyana: drop the patterned ground, keep the clean dark editorial band */
.villa::before, .villa::after{ display:none !important; }

/* Find Your Room: green leaf now reads as a rich-but-subtle tropical ground
   across heading + cards + supporting content (cards stay opaque on top) */
.rooms::before{ opacity:.17; }
/* END RELOCATE GREEN TEXTURE */

/* Find Your Room: use the Villa's green art-deco texture (purp.jpg hue-shifted
   to green) instead of the banana leaf — subtle on cream so cards stay primary */
.rooms::before{
  background:url('../images/purp.jpg') center/cover no-repeat;
  filter:sepia(1) saturate(1.9) hue-rotate(55deg) brightness(.72) contrast(1.04);
  mix-blend-mode:multiply;
  opacity:.15;
}

/* =====================================================================
   FIND YOUR ROOM — full green art-deco band (the old Villa Kalyana ground)
   Cards untouched (cream cards now pop on the green); head text → light.
   Revert: delete this block.
   ===================================================================== */
.rooms{ position:relative; isolation:isolate; background:#28331a; }
.rooms::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:url('../images/leaf-texture.jpg') top center/300px repeat;
  filter:none; mix-blend-mode:normal; opacity:1;
}
.rooms::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(22,30,12,.34), rgba(22,30,12,.52));
}
/* heading + intro read light on the green ground (room cards unchanged) */
.rooms-head h2{ color:var(--cream-on-dark) !important; }
.rooms-head .eyebrow, .rooms-head .eyebrow.terra{ color:rgba(244,239,226,.84) !important; }
.rooms-head p{ color:rgba(244,239,226,.82) !important; }
/* END FIND YOUR ROOM full green band */

/* =====================================================================
   ACCOMMODATION — heading spacing + room heading font + remove pink
   Revert: delete this block.
   ===================================================================== */
/* 1. SPACING: the tall TAN-Grandeur headings need vertical room that scales
   with size. Fixed 22px gaps were fine on mobile but let the desktop swashes
   overlap the eyebrow above and the divider/intro below. */
.stay-title, .rooms-head h2, .howit-head h2, .pay h2{
  margin-top:clamp(4px, 2vw, 26px) !important;
  margin-bottom:clamp(2px, 1.2vw, 16px) !important;
}

/* 2. ROOM HEADINGS: use the suite's display font (TAN Mignon) instead of the
   stray serif so the rooms read as part of the same site. */
.room-name{
  font-family:var(--mignon) !important; font-weight:400; text-transform:uppercase;
  letter-spacing:.03em; font-size:20px; line-height:1.16;
}
.rd-title{
  font-family:var(--mignon) !important; font-weight:400; text-transform:uppercase; letter-spacing:.04em;
}

/* 3. NO PINK: scripts/labels on the dark bands now read in cream (white). */
.incl-card .ic-script,
.villa-list .vl-script,
.big-cta .bc-script{ color:var(--cream-on-dark) !important; }
.villa-times .vt-lbl{ color:rgba(244,239,226,.78) !important; }
.villa-top .eyebrow.peach{ color:rgba(244,239,226,.80) !important; }
/* END ACCOMMODATION heading/font/pink pass */

/* =====================================================================
   VILLA KALYANA — light botanical editorial ground (test bg 18b8c4f4)
   Section flips from the dark band to a light cream botanical with dark
   text. Revert: delete this block (villa returns to the clean dark band).
   ===================================================================== */
.villa{ background:#f4ecd8 !important; color:var(--ink) !important; isolation:isolate; }
.villa::before{
  content:"" !important; position:absolute; inset:0; z-index:-2; pointer-events:none; display:block !important;
  background:url('../images/bg-villa-botanical.jpg') center/cover no-repeat !important;
  filter:none !important; opacity:1;
}
.villa::after{
  content:"" !important; position:absolute; inset:0; z-index:-1; pointer-events:none; display:block !important;
  background:rgba(245,237,219,.42) !important;
}
/* text re-coloured for the light ground */
.villa-top .eyebrow.peach{ color:var(--terra) !important; }
.villa-top p{ color:var(--body) !important; }
.villa-times .vt-lbl{ color:var(--terra) !important; }
.villa-times .vt-val{ color:var(--ink) !important; }
.villa-times .vt-div{ background:var(--hair2) !important; }
.villa-list{ border-top-color:var(--hair2) !important; }
.villa-list .vl-script{ color:var(--terra) !important; }
.villa-list li{ color:var(--body) !important; }
.villa-list li::before{ color:var(--gold-d) !important; }
/* END VILLA light botanical */

/* =====================================================================
   REQUEST YOUR ROOM (big-cta) — stop script/heading collision + white CTA
   Revert: delete this block.
   ===================================================================== */
.big-cta .bc-script{ line-height:1.05 !important; margin-bottom:clamp(20px, 2.6vw, 34px) !important; }
.big-cta h2{ margin-top:clamp(8px, 1.4vw, 16px) !important; }
/* wine button vanished on the wine band — make it cream so it reads */
.big-cta .btn-display{
  background:var(--cream-on-dark) !important; color:var(--terra) !important;
  border:1px solid var(--cream-on-dark) !important;
}
.big-cta .btn-display:hover{
  background:var(--gold) !important; color:var(--terra) !important; border-color:var(--gold) !important;
}
/* END big-cta fix */
/* big-cta heading wraps on mobile — Grandeur swashes need real line spacing */
.big-cta h2{ line-height:1.42 !important; }

/* =====================================================================
   STAY WITH US cream band + subnav sticky(desktop)/hidden(phone)
   Revert: delete this block (+ restore body overflow-x:hidden).
   ===================================================================== */
/* full-width cream band like the front-page welcome */
.stay{ max-width:none !important; background:#ede0c6 !important; }
.stay > *{ max-width:760px; margin-left:auto !important; margin-right:auto !important; }

/* subnav already position:sticky; now that body is overflow-x:clip it works.
   Hide it on phone (the main hamburger nav covers navigation there). */
@media (max-width:760px){ .subnav{ display:none !important; } }
/* END */

/* =====================================================================
   GRANDEUR HEADINGS — looser vertical line spacing sitewide
   (Stay With Us / Find Your Room / How It Works / Settling Up / RSVP /
   Request Your Room). The font's tall swashes crowded/overlapped when the
   heading wrapped. Revert: delete this block.
   ===================================================================== */
.stay-title, .rooms-head h2, .howit-head h2, .pay h2,
.rsvp h2, .big-cta h2, .vv-head h2{
  line-height:1.4 !important;
}
/* END GRANDEUR line spacing */

/* =====================================================================
   THE GETAWAY — intro + overlapping vintage postcards + Koh Samui map
   Revert: delete this block + restore the-getaway.html coming-soon stub.
   ===================================================================== */
/* intro — warm cream band like the front-page welcome / stay-with-us */
.getaway-intro{ background:#ede0c6; text-align:center; padding:clamp(56px,8vw,92px) 7vw clamp(46px,6vw,70px); }
.getaway-intro .eyebrow{ justify-content:center; margin-bottom:20px; }
.gi-lead{ font-family:var(--serif); font-size:clamp(19px,2.4vw,25px); line-height:1.62; color:var(--ink); max-width:760px; margin:0 auto; }
.getaway-intro .rule-motif{ max-width:240px; margin:clamp(28px,4vw,40px) auto 0; }

/* postcards — overlapping, slightly skewed, vintage postcard backs */
.postcards{ max-width:none; margin:0; padding:clamp(52px,7vw,86px) 7vw clamp(42px,6vw,72px); }
.postcard{
  position:relative; background:var(--card); border:1px solid var(--hair2);
  box-shadow:0 18px 42px rgba(60,45,30,.18);
  display:grid; grid-template-columns:1fr 240px;
  margin-left:auto; margin-right:auto;
}
.postcard::after{ content:""; position:absolute; inset:9px; border:1px solid rgba(110,31,58,.13); pointer-events:none; }
.postcard + .postcard{ margin-top:clamp(20px,3vw,34px); }
.postcard:nth-child(odd){ transform:rotate(-0.8deg); }
.postcard:nth-child(even){ transform:rotate(0.8deg); }
.pc-body{ padding:clamp(28px,3.6vw,46px); border-right:1px dashed var(--hair2); }
.pc-day{ font-family:var(--grand); font-weight:400; text-transform:none; font-size:clamp(34px,4vw,46px); line-height:1.0; color:var(--terra); margin:0.42em 0 8px; }
.pc-date{ font-family:var(--serif); font-weight:700; font-size:14px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ink); margin:0; }
.pc-date sup{ font-size:.6em; letter-spacing:.5px; }
.pc-sub{ font-family:var(--sans); font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin:9px 0 20px; }
.pc-body p{ font-family:var(--sans); font-size:14px; line-height:1.85; color:var(--body2); margin:0 0 15px; }
.pc-body p:last-child{ margin-bottom:0; }
.pc-aside{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px; }
.pc-art{ display:block; width:200px; height:200px; object-fit:contain; }
.pc-lines{ width:74%; }
.pc-lines span{ display:block; height:1px; background:var(--hair2); margin:12px 0; }
@media (max-width:760px){
  .postcard{ grid-template-columns:1fr; transform:none !important; }
  .pc-body{ border-right:0; border-bottom:1px dashed var(--hair2); }
  .pc-aside{ flex-direction:row; justify-content:center; gap:24px; padding:6px clamp(20px,6vw,30px) 26px; }
  .pc-art{ width:172px; height:172px; }
  .pc-lines{ display:none; }
}

/* Koh Samui map — framed plate + numbered legend (map art reserved) */
.samui-map{ max-width:1060px; margin:0 auto; padding:clamp(48px,6vw,80px) 7vw clamp(60px,8vw,96px); }
.sm-head{ text-align:center; margin-bottom:clamp(30px,4vw,48px); }
.sm-head .eyebrow{ justify-content:center; margin-bottom:14px; }
.sm-head h2{ font-family:var(--grand); font-weight:400; text-transform:uppercase; letter-spacing:.07em; font-size:clamp(28px,4.4vw,42px); line-height:1.4; color:var(--ink); }
.sm-grid{ display:grid; grid-template-columns:1.85fr 1fr; gap:clamp(30px,4vw,54px); align-items:center; }
.sm-frame{ position:relative; aspect-ratio:4/3; background:linear-gradient(160deg,var(--card),#f4ead4); border:8px solid var(--card); box-shadow:0 22px 50px rgba(0,0,0,.22); display:grid; place-items:center; }
.sm-frame::after{ content:""; position:absolute; inset:10px; border:1px solid rgba(193,151,74,.4); pointer-events:none; }
.sm-placeholder{ font-family:var(--sans); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.sm-legend{ list-style:none; margin:0; padding:0; }
.sm-legend li{ display:flex; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--hair3); }
.sm-legend li:last-child{ border-bottom:0; }
.sm-pin{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--terra); color:var(--cream2); display:grid; place-items:center; font-family:var(--serif); font-size:12px; font-weight:700; line-height:1; }
.sm-legend strong{ display:block; font-family:var(--serif); font-weight:700; font-size:15px; color:var(--ink); }
.sm-legend span{ display:block; font-size:12px; line-height:1.5; color:var(--muted3); margin-top:3px; }
@media (max-width:760px){ .sm-grid{ grid-template-columns:1fr; gap:30px; } }
/* END THE GETAWAY */

/* =====================================================================
   GETAWAY — editorial moments (section identities, existing language)
   Revert: delete this block.
   ===================================================================== */
/* 1. INTRO — barely-there foliage watermark on the warm cream band */
.getaway-intro{ position:relative; isolation:isolate; overflow:hidden; }
.getaway-intro::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url('../images/bg-getaway-foliage.jpg') center/cover no-repeat;
  mix-blend-mode:multiply; opacity:.08;
}

/* 2. POSTCARDS — bold green deco band so the cream postcards pop (breaks the
      flat cream rhythm; same green deco used on the Accommodation rooms) */
.postcards{ position:relative; isolation:isolate; background:#28331a; }
.postcards::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:url('../images/leaf-texture.jpg') top center/300px repeat;
}
.postcards::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(22,30,12,.42), rgba(22,30,12,.56));
}
/* each day = another postcard peeking out behind (alternating side) */
.postcard:nth-child(odd){ box-shadow:-12px 12px 0 -2px #f4ead4, -12px 12px 0 -1px var(--hair2), 0 22px 46px rgba(0,0,0,.30); }
.postcard:nth-child(even){ box-shadow:12px 12px 0 -2px #f4ead4, 12px 12px 0 -1px var(--hair2), 0 22px 46px rgba(0,0,0,.30); }
/* END GETAWAY editorial moments */

/* 3. MAP — vintage map plate (compass, grid, island label) */
.sm-frame{
  background:
    repeating-linear-gradient(0deg, transparent 0 40px, rgba(90,70,40,.05) 40px 41px),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(90,70,40,.05) 40px 41px),
    linear-gradient(160deg,#f7efde,#efe3ca) !important;
  overflow:hidden;
}
.sm-compass{ position:absolute; top:16px; right:16px; width:56px; height:56px; color:var(--gold-d); opacity:.72; }
.sm-label{ text-align:center; z-index:1; }
.sm-isle{ display:block; font-family:var(--script); font-size:clamp(30px,4vw,46px); color:var(--terra); line-height:1; }
.sm-label small{ display:block; font-family:var(--sans); font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-top:9px; }
.sm-note{ position:absolute; bottom:15px; left:0; right:0; text-align:center; font-family:var(--sans); font-size:9.5px; letter-spacing:2px; text-transform:uppercase; color:var(--muted2); }
/* END GETAWAY map plate */

/* =====================================================================
   GRANDEUR headings — much looser line spacing on mobile.
   TAN Grandeur's swashes overflow the line box by ~0.5em, so wrapped
   headings (MAP OF KOH SAMUI, FIND YOUR ROOM, STAY WITH US, REQUEST YOUR
   ROOM) overlapped. Desktop is mostly single-line so stays tighter.
   Revert: delete this block.
   ===================================================================== */
.stay-title, .rooms-head h2, .howit-head h2, .pay h2,
.rsvp h2, .big-cta h2, .vv-head h2, .sm-head h2{ line-height:1.45 !important; }
@media (max-width:640px){
  .stay-title, .rooms-head h2, .howit-head h2, .pay h2,
  .rsvp h2, .big-cta h2, .vv-head h2, .sm-head h2{ line-height:1.9 !important; }
}
/* END GRANDEUR mobile line spacing */

/* =====================================================================
   KOH SAMUI — interactive Leaflet map, re-skinned to the suite
   Revert: delete this block + the Leaflet tags/script in the-getaway.html
   ===================================================================== */
.sm-map{
  position:relative;
  width:100%; aspect-ratio:4/3; min-height:300px;
  background:#e9dcc0;
  border:1px solid var(--hair2);
  box-shadow:
    0 0 0 8px var(--cream2),
    0 0 0 9px rgba(193,151,74,.55),
    0 22px 46px rgba(60,45,30,.16);
  z-index:0;
}
/* editorial figure plate around the map */
.sm-plate{ margin:0; min-width:0; }
.sm-cap{ font-family:var(--sans); font-size:11px; letter-spacing:1.7px; text-transform:uppercase; color:var(--muted); text-align:center; line-height:1.5; margin-top:24px; }
@media (max-width:760px){ .sm-cap{ font-size:10px; letter-spacing:1px; margin-top:20px; } }
@media (min-width:761px){
  .samui-map{ max-width:1140px; padding-left:clamp(32px,3vw,52px); padding-right:clamp(32px,3vw,52px); }
}
/* keep the sea bluer (treasure-map feel); land warmth comes from the frame */
.sm-map .leaflet-tile-pane{ filter:saturate(1.24) brightness(1.0) contrast(.97); }
.sm-map .leaflet-container{ background:#e9dcc0; font-family:var(--sans); }
/* custom pins */
.map-pin-wrap{ background:none; border:0; }
.map-pin{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  font-family:var(--serif); font-weight:700; font-size:12px; line-height:1;
  color:var(--cream2); border:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 2px 7px rgba(0,0,0,.35);
}
.map-pin--key{ background:var(--terra); }
.map-pin--soft{ background:var(--teal); width:16px; height:16px; }
/* popup */
.leaflet-popup-content-wrapper{ background:var(--card2); border-radius:2px; box-shadow:0 14px 32px rgba(0,0,0,.26); }
.leaflet-popup-tip{ background:var(--card2); }
.leaflet-popup-content{ margin:14px 18px; }
.map-pop strong{ display:block; font-family:var(--serif); font-weight:700; font-size:15px; color:var(--ink); }
.map-pop span{ display:block; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin:4px 0 9px; }
.map-pop a{ font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--terra); text-decoration:none; }
.map-pop a:hover{ text-decoration:underline; }
/* zoom control + attribution to match */
.sm-map .leaflet-control-zoom a{ background:var(--card2); color:var(--terra); border-color:var(--hair2); }
.sm-map .leaflet-control-zoom a:hover{ background:var(--cream); }
.sm-map .leaflet-control-attribution{ display:none; }
.sm-map .leaflet-control-attribution a{ color:var(--terra); }
/* END KOH SAMUI map */

/* Koh Samui map — icon markers (ring / house / plane / 2 boats / stars) */
.map-ic{ background:none; border:0; }
.map-mk{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.92); box-shadow:0 2px 7px rgba(0,0,0,.4); color:var(--cream2); flex:0 0 auto; }
.map-mk svg{ width:17px; height:17px; display:block; }
.map-mk--wine{ background:var(--terra); }
.map-mk--teal{ background:#5a6630; }
.map-mk--gold{ background:#a9772f; }
.map-mk--star{ background:var(--gold); }
.map-star{ display:inline-grid; place-items:center; width:26px; height:26px; color:var(--gold); flex:0 0 auto;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.map-star svg{ width:24px; height:24px; display:block; }
.sm-legend .map-mk{ display:inline-grid; place-items:center; color:var(--cream2); margin-top:0; }
/* END Koh Samui icon markers */

/* =====================================================================
   THE TRAVEL — editorial article (arrivals route, entry checklist,
   TDAC fact-card, UK note band). Revert: delete this block + travel.html.
   ===================================================================== */
.travel-intro{ text-align:center; padding:clamp(50px,7vw,84px) 7vw clamp(16px,2.5vw,26px); }
.travel-intro .eyebrow{ justify-content:center; margin-bottom:18px; }
.tv-lead{ font-family:var(--serif); font-weight:400; font-size:clamp(18px,2.4vw,24px); line-height:1.65; color:var(--ink); max-width:620px; margin:0 auto; }
.travel-intro .rule-motif{ max-width:240px; margin:clamp(26px,4vw,38px) auto 0; }

.tv-wrap{ max-width:760px; margin:0 auto; padding:clamp(14px,3vw,30px) 7vw clamp(48px,7vw,76px); }
.tv-head{ text-align:center; margin-bottom:clamp(22px,3.2vw,34px); }
.tv-head .eyebrow{ justify-content:center; margin-bottom:13px; }
.tv-title{ font-family:var(--mignon); font-weight:400; text-transform:uppercase; letter-spacing:.05em; font-size:clamp(24px,3.4vw,33px); line-height:1.3; color:var(--ink); }
.tv-prose p{ font-family:var(--sans); font-size:14.5px; line-height:1.92; color:var(--body2); margin:0 0 16px; }
.tv-prose p:last-child{ margin-bottom:0; }
.tv-prose a.inline{ color:var(--terra); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.tv-wrap .ds-div{ margin:clamp(36px,5vw,54px) auto; max-width:340px; }

/* flight itinerary */
.route{ list-style:none; max-width:430px; margin:clamp(28px,4vw,40px) auto; padding:0; }
.route-stop{ display:flex; align-items:center; gap:18px; }
.route-dot{ flex:0 0 auto; width:16px; height:16px; border-radius:50%; background:var(--terra); border:3px solid var(--cream); box-shadow:0 0 0 1.5px var(--terra); position:relative; z-index:1; }
.route-dot--end{ background:var(--gold-d); box-shadow:0 0 0 1.5px var(--gold-d); }
.route-name{ display:block; font-family:var(--mignon); text-transform:uppercase; letter-spacing:.07em; font-size:16px; color:var(--ink); }
.route-sub{ display:block; font-family:var(--sans); font-size:11px; letter-spacing:.4px; color:var(--muted); margin-top:3px; }
.route-link{ display:flex; align-items:center; gap:18px; position:relative; padding:13px 0; }
.route-link::before{ content:""; position:absolute; left:7px; top:0; bottom:0; border-left:2px dashed var(--gold-d); opacity:.55; }
.route-plane{ position:relative; z-index:1; flex:0 0 auto; width:16px; display:grid; place-items:center; color:var(--terra); background:var(--cream); padding:5px 0; }
.route-plane svg{ width:15px; height:15px; transform:rotate(135deg); }
.route-meta{ font-family:var(--sans); font-style:italic; font-size:11.5px; letter-spacing:.3px; color:var(--muted); }

/* entry checklist */
.tv-checklist{ margin:clamp(24px,3.2vw,32px) 0 12px; }
.tvc-label{ font-family:var(--sans); font-size:11px; letter-spacing:2.4px; text-transform:uppercase; color:var(--terra); margin-bottom:12px; }
.tv-list{ list-style:none; margin:0; padding:6px 22px; background:var(--cream2); border:1px solid var(--hair2); }
.tv-list li{ display:flex; gap:14px; align-items:flex-start; padding:13px 0; border-bottom:1px dashed var(--hair2); }
.tv-list li:last-child{ border-bottom:0; }
.tv-tick{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--terra); color:var(--cream2); display:grid; place-items:center; margin-top:1px; }
.tv-tick svg{ width:13px; height:13px; display:block; }
.tv-list li > span:last-child{ font-family:var(--sans); font-size:13.5px; line-height:1.6; color:var(--body2); }
.tv-list strong{ color:var(--ink); font-weight:700; }
.tv-list sup, .tv-foot sup{ color:var(--terra); font-weight:700; }
.tv-foot{ font-family:var(--sans); font-style:italic; font-size:12px; line-height:1.7; color:var(--muted); margin:14px 0 0; }

/* TDAC fact card */
.tv-card{ display:flex; align-items:center; gap:clamp(16px,3vw,28px); margin:clamp(24px,3.4vw,34px) 0 4px;
  padding:clamp(18px,2.6vw,26px) clamp(20px,3vw,30px); background:var(--cream2); border:1px solid var(--hair2);
  box-shadow:0 14px 32px rgba(60,45,30,.10); }
.tv-card-tag{ flex:0 0 auto; font-family:var(--mignon); font-size:clamp(28px,4.4vw,42px); letter-spacing:.1em; color:var(--terra);
  border-right:1px solid var(--hair2); padding-right:clamp(16px,3vw,28px); }
.tv-card-facts{ display:flex; flex-direction:column; gap:8px; }
.tv-card-facts span{ position:relative; padding-left:18px; font-family:var(--sans); font-size:12.5px; letter-spacing:.3px; line-height:1.45; color:var(--body2); }
.tv-card-facts span::before{ content:""; position:absolute; left:0; top:6px; width:7px; height:7px; border-radius:50%; background:var(--gold-d); }
.tv-card-cta{ display:inline-block; margin-top:7px; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:var(--terra); text-decoration:none; }
.tv-card-cta:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:480px){
  .tv-card{ flex-direction:column; align-items:flex-start; gap:14px; }
  .tv-card-tag{ border-right:0; border-bottom:1px solid var(--hair2); padding-right:0; padding-bottom:12px; width:100%; }
}

/* UK note band */
.tv-note{ background:#ede0c6; padding:clamp(56px,8vw,92px) 7vw; }
.tv-note-inner{ max-width:660px; margin:0 auto; text-align:center; }
.tv-note-inner .eyebrow{ justify-content:center; margin-bottom:13px; }
.tv-note-inner .rule-motif{ max-width:230px; margin:18px auto clamp(22px,3vw,30px); }
.tv-note-inner p{ font-family:var(--sans); font-size:14px; line-height:1.95; color:var(--body); margin:0 auto 16px; max-width:600px; }
.tv-note-inner p:last-child{ margin-bottom:0; }
.tv-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin:4px auto 24px; }
.tv-tags span{ font-family:var(--sans); font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--terra);
  border:1px solid rgba(110,31,58,.32); border-radius:40px; padding:7px 15px; }
/* END THE TRAVEL */

/* =====================================================================
   FOOTER PAPER TEXTURE  (revert: delete this whole block)
   Subtle paperback grain across the entire footer (contact panel + reel),
   blended onto the existing wine so the colour is preserved. The film
   strip is left untouched. Asset: images/paperback.png
   ===================================================================== */
.site-foot, .reel{
  background-color:#5d2133;
  background-image:url('../images/paperback.png');
  background-repeat:repeat;
  background-blend-mode:multiply;
}
/* END FOOTER PAPER TEXTURE */

/* =====================================================================
   ACCOMMODATION — Villa hero caption overlaid on the image (matches the
   wedding venue hero: reuses .venue-hero / .venue-hero-cap / .vn-*).
   Description + check-in/out times sit centred below the hero.
   ===================================================================== */
.villa-hero-plate{ box-shadow:none; scroll-margin-top:clamp(80px,12vw,110px); }
.villa-intro{ max-width:680px; margin:clamp(28px,4vw,46px) auto 0; text-align:center; }
.villa-intro p{ font-family:var(--sans); font-size:14.5px; line-height:1.9; color:var(--body2); margin:0 0 clamp(22px,3vw,30px); }
.villa-intro .villa-times{ justify-content:center; margin-top:0; }
/* END ACCOMMODATION villa hero */

/* =====================================================================
   MOBILE NAV — "Menu" text button (RSVP border, menu font) replaces the
   hamburger; RSVP moves into the menu; menu gets an × to close.
   ===================================================================== */
@media (max-width:860px){
  .nav, .nav.scrolled{ padding-left:clamp(13px,3.4vw,20px); padding-right:clamp(13px,3.4vw,20px); }   /* tighter so logo + Menu sit near the edges */
  .nav .nav-rsvp, .nav.scrolled .nav-rsvp{ display:none !important; }   /* RSVP now lives in the menu */
  .nav-toggle{
    display:inline-flex !important; align-items:center; justify-content:center;
    width:auto; height:auto; position:static;
    padding:.62em 1.3em;
    background:transparent; border:1px solid rgba(255,255,255,.7); border-radius:0;
    font-family:var(--sans); font-weight:400; font-size:.62rem;
    letter-spacing:.24em; text-indent:.24em; text-transform:uppercase;
    color:var(--cream-on-dark);
  }
  .nav-toggle span{ display:none; }
  .nav-toggle::after{ content:"Menu"; }
}
/* hide the bar entirely while the full-screen menu is open (the × closes it) */
body.menu-open .nav{ opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
/* close (×) */
.menu-close{
  position:absolute; top:clamp(20px,5vw,30px); right:clamp(20px,6vw,32px);
  width:44px; height:44px; display:grid; place-items:center; z-index:130;
  background:none; border:0; cursor:pointer; line-height:1;
  font-family:var(--serif); font-size:36px; color:var(--cream-on-dark); opacity:.78;
  transition:opacity .3s ease;
}
.menu-close:hover{ opacity:1; }
/* RSVP inside the menu — bordered button, distinct from the plain links */
.mobile-menu a.mm-rsvp{
  margin-top:.7rem; font-family:var(--sans); font-size:.78rem; font-weight:400;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase; opacity:.95;
  border:1px solid rgba(244,239,226,.6); border-radius:0; padding:.8em 2.4em;
}
.mobile-menu a.mm-rsvp:hover{ background:var(--gold); color:var(--terra); border-color:var(--gold); opacity:1; }
/* END MOBILE NAV */

/* "stay with us" — script "stay" (lowercase Breathing) + "WITH US" (uppercase TAN Grandeur) */
.stay-title{
  display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap;
  gap:.2em; line-height:1.12 !important; color:var(--ink);
}
.stay-title .st-script{ font-family:var(--script); text-transform:none; font-size:clamp(2.7rem,6.6vw,4.2rem); letter-spacing:0; }
.stay-title .st-caps{ font-family:var(--grand); text-transform:uppercase; font-size:clamp(1.9rem,4.4vw,2.9rem); letter-spacing:.06em; text-indent:.06em; }