/* =====================================================================
   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:swap; }
@font-face { font-family:'TAN Grandeur'; src:url('../fonts/TAN-Grandeur.woff2') format('woff2');   font-weight:400; font-display:swap; }
@font-face { font-family:'TAN Paradiso'; src:url('../fonts/TAN-Paradiso.woff2') format('woff2');   font-weight:400; font-display:swap; }
@font-face { font-family:'Breathing';    src:url('../fonts/Breathing.woff2') format('woff2');      font-weight:400; font-display:swap; }
@font-face { font-family:'Best Light';   src:url('../fonts/Best-Light.woff2') format('woff2');     font-weight:400; font-display:swap; }
@font-face { font-family:'Hatton';       src:url('../fonts/Hatton-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Hatton';       src:url('../fonts/Hatton-Bold.woff2') format('woff2');    font-weight:700; font-display:swap; }
@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:hidden;
}
/* ---- 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;
  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;
}
.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:url('../images/purp.jpg') center/cover no-repeat;
  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; }
.hero-title h1{
  font-family:var(--mignon); font-weight:400; text-transform:uppercase;
  font-size:clamp(58px,13vw,128px); line-height:1.28;
  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:11px 11px 9px;
  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;
}
.rsvp-print--main{                             /* hero: bird of paradise, tilted left */
  position:relative; z-index:2; width:300px; transform:rotate(-3deg);
}
.rsvp-print--orchid{                           /* second print peeks from behind, lower-left */
  position:absolute; z-index:1; width:200px;
  left:-86px; bottom:-66px; transform:rotate(9deg);
}
.rsvp-print--orchid img{ height:200px; object-fit:cover; object-position:50% 16%; }  /* crop spray to a portrait */
@media (min-width:761px){
  .rsvp-print--main{ width:330px; }
  .rsvp-print--orchid{ width:224px; left:-104px; bottom:-74px; }
  .rsvp-print--orchid img{ height:224px; }
}
@media (max-width:760px){                      /* mobile: scale prints to the viewport so the frame isn't oversized */
  .rsvp-print--main{ width:min(62vw,272px); }
  .rsvp-print--orchid{ left:-30px; bottom:30px; width:min(34vw,148px); transform:rotate(10deg); }
  .rsvp-print--orchid img{ height:auto; aspect-ratio:5/6; }
}

/* ---- 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.
   New homepage-only assets: home-chart-a.jpg (Carte du Golfe de Siam,
   G-N. Delahaye c.1770) + home-chart-b.jpg (Admiralty Chart No.2414,
   Gulf of Siam, 1855) — both public domain via Wikimedia Commons.
   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;
}

/* 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 hairline gilt edge marks the footer as an intentional
      panel, however different the content above it is (works on every page). */
.site-foot{ border-top:1px solid rgba(193,151,74,.30); }

/* 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 */