/* ============================================================
   Jordan & Zoe — Wedding Site
   Matched to Canva mockup (pages 2–4)
   Palette: cream #FCF9F7 · ink #292525 · dusty blue #9DB1B6
   ============================================================ */

/* Embedded fonts */
@font-face{
  font-family:"GFS Didot";
  src:url("../fonts/GFSDidot-Regular.woff2") format("woff2"),
      url("../fonts/GFSDidot-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Didot";
  src:url("../fonts/Didot-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Didot";
  src:url("../fonts/Didot-Italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Commuter Sans";
  src:url("../fonts/CommuterSans-Semibold.woff2") format("woff2"),
      url("../fonts/CommuterSans-Semibold.otf") format("opentype");
  font-weight:400 700;font-style:normal;font-display:swap;
}
/* Body face — drop fonts/BauerBodoni-Regular.woff2 (+ .woff) to activate; falls back to Bodoni Moda */
@font-face{
  font-family:"Bauer Bodoni";
  src:url("../fonts/BauerBodoni-Regular.woff2") format("woff2"),
      url("../fonts/BauerBodoni-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Bauer Bodoni";
  src:url("../fonts/BauerBodoni-Italic.woff2") format("woff2"),
      url("../fonts/BauerBodoni-Italic.ttf") format("truetype");
  font-weight:400;font-style:italic;font-display:swap;
}

:root{
  --cream:#FCF7F1;     /* Fig 01 — soft warm cream (between #FDF9F7 and #FBF5EB) */
  --sand:#DBD5C7;      /* Fig 02 */
  --taupe:#6D5E53;     /* Fig 02 accent */
  --sage:#D5D6C0;      /* Fig 03 */
  --olive:#B1B299;     /* Fig 03 accent */
  --blue:#B4C2C7;      /* Fig 04 — script */
  --slate:#67748D;     /* Fig 04 accent */
  --ink:#292525;       /* Fig 05 */
  --body-ink:#2E2A28;
  --line:rgba(41,37,37,.30);
  --line-light:rgba(253,249,247,.6);

  --display:"Didot","GFS Didot","Bodoni Moda",Georgia,serif;
  --body:"EB Garamond","Bodoni Moda","GFS Didot",Georgia,serif;
  --ui:"Commuter Sans","Montserrat","Helvetica Neue",Arial,sans-serif;
  --script:"Pinyon Script",cursive;
  --green:#7E8B56;     /* darker olive — "Learn more" / Book now links */
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ---------- shared type helpers ---------- */
.eyebrow{
  font-family:var(--ui);font-weight:500;text-transform:uppercase;
  letter-spacing:.28em;font-size:12px;color:var(--ink);
}
.display{font-family:var(--display);font-weight:400;}

/* ============================================================
   NAV  (7 items spread across the top)
   ============================================================ */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:30px 56px;gap:18px;
}
.nav__links{
  list-style:none;margin:0;padding:0;width:100%;
  display:flex;align-items:center;justify-content:space-between;
}
.nav__links a{
  font-family:var(--ui);font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:13px;white-space:nowrap;
  color:var(--ink);opacity:1;transition:opacity .4s ease;
}
.nav__links a:hover{opacity:.5;}
.nav--over{position:absolute;top:0;left:0;right:0;z-index:20;}
.nav--over .nav__links a{color:var(--cream);}
.nav--dark .nav__links a{color:var(--ink);}

.nav__toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;color:inherit;padding:6px 2px;
}
.nav__toggle span{display:block;width:24px;height:1.5px;background:currentColor;transition:transform .3s ease,opacity .3s ease;}
.nav__toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav__toggle.is-open span:nth-child(2){opacity:0;}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ============================================================
   HOME — full-bleed video hero
   ============================================================ */
.hero{
  position:relative;min-height:100vh;min-height:100dvh;width:100%;
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--cream);overflow:hidden;
  /* fallback mood if the video file is absent */
  background:linear-gradient(180deg,#1c1815 0%,#2b2723 45%,#100d0b 100%);
}
.hero__media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;filter:grayscale(.35) brightness(.85);
}
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,16,13,.35),rgba(20,16,13,.15) 40%,rgba(20,16,13,.45));}
.hero__center{position:relative;z-index:3;padding:0 24px;}
.hero__date{
  font-family:var(--ui);font-weight:500;letter-spacing:.42em;
  font-size:clamp(14px,1.4vw,18px);margin:0 0 22px;padding-left:.42em;
}
.hero__names{
  font-family:var(--display);font-weight:400;
  font-size:clamp(42px,5.4vw,68px);line-height:1;margin:0;letter-spacing:.01em;
}

/* ---------- password gate (Welcome page) ---------- */
.gate{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:14px;}
.gate__label{
  font-family:var(--ui);font-weight:500;text-transform:uppercase;letter-spacing:.28em;
  font-size:11px;color:rgba(253,249,247,.78);
}
.gate__row{display:flex;align-items:stretch;}
.gate__input{
  font-family:var(--ui);text-transform:uppercase;letter-spacing:.18em;font-size:12px;
  background:transparent;border:1px solid rgba(253,249,247,.5);border-right:none;
  color:var(--cream);padding:13px 18px;width:220px;outline:none;
}
.gate__input::placeholder{color:rgba(253,249,247,.5);letter-spacing:.18em;}
.gate__btn{
  font-family:var(--ui);font-weight:500;text-transform:uppercase;letter-spacing:.24em;font-size:12px;
  background:transparent;border:1px solid rgba(253,249,247,.5);color:var(--cream);
  padding:13px 22px;cursor:pointer;transition:background .35s ease,color .35s ease;
}
.gate__btn:hover{background:var(--cream);color:var(--ink);}
.gate__error{
  font-family:var(--ui);text-transform:uppercase;letter-spacing:.2em;font-size:10px;
  color:#E7C9C2;min-height:12px;opacity:0;transition:opacity .3s ease;
}
.gate__error.show{opacity:1;}
.is-hidden{display:none !important;}

/* ---------- full-screen cream password gate ---------- */
.gate-screen{
  position:fixed;inset:0;z-index:100;background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:40px 24px;
}
.gate-screen__inner{display:flex;flex-direction:column;align-items:center;width:100%;max-width:560px;}
.g-date{
  font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.34em;
  font-size:clamp(16px,1.8vw,21px);color:var(--ink);padding-left:.34em;
}
.g-names{
  font-family:var(--display);font-weight:400;color:var(--ink);
  font-size:clamp(34px,6vw,68px);line-height:1;margin:16px 0 0;
}
.g-form{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:clamp(44px,8vh,90px);}
.g-input{
  background:transparent;border:none;border-bottom:1px solid var(--ink);text-align:center;
  font-family:var(--ui);font-weight:500;text-transform:uppercase;letter-spacing:.4em;
  font-size:13px;color:var(--ink);padding:12px 6px;width:min(360px,78vw);outline:none;
}
.g-input::placeholder{color:#B7B0A6;letter-spacing:.4em;}
.g-error{
  font-family:var(--ui);text-transform:uppercase;letter-spacing:.2em;font-size:10px;
  color:var(--terracotta);min-height:12px;margin-top:14px;opacity:0;transition:opacity .3s ease;
}
.g-error.show{opacity:1;}
.g-enter{margin-top:clamp(36px,5vh,56px);position:relative;display:inline-block;background:none;border:none;cursor:pointer;padding:0;}
.g-enter svg{display:block;width:clamp(132px,34vw,172px);height:auto;}
.g-enter__label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.4em;
  font-size:clamp(14px,3.4vw,18px);color:var(--ink);padding-left:.4em;
}
.g-enter:hover svg path{fill:var(--ink);}
.g-enter:hover .g-enter__label{color:var(--cream);}

/* ---------- elegant transitions ---------- */
.gate-screen{transition:opacity 1.1s cubic-bezier(.4,0,.2,1);}
.gate-screen.fade-out{opacity:0;pointer-events:none;}

/* fade-up reveal (scroll + on-load) */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity 1.1s cubic-bezier(.33,0,.2,1),transform 1.1s cubic-bezier(.33,0,.2,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.12s;}
.reveal.d2{transition-delay:.24s;}
.reveal.d3{transition-delay:.36s;}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .gate-screen{transition:none;}
}

/* ============================================================
   ONE-PAGE LAYOUT
   ============================================================ */
html{scroll-behavior:smooth;}
section[id], div[id].anchor{scroll-margin-top:84px;}

/* sticky top nav */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:center;
  padding:24px 40px;transition:background .4s ease,padding .4s ease,box-shadow .4s ease;
}
.topnav__links{display:flex;gap:24px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center;}
.topnav__links a{
  font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  font-size:12px;color:var(--cream);opacity:1;transition:opacity .35s ease,color .4s ease;
}
.topnav__links a:hover{opacity:.5;}
.topnav.scrolled{background:var(--cream);padding:15px 40px;box-shadow:0 1px 0 var(--line);}
.topnav.scrolled .topnav__links a{color:var(--ink);}
.topnav__toggle{display:none;}

/* section scaffold */
.sec{padding:clamp(72px,9vw,124px) 32px;}
.sec__in{max-width:1080px;margin:0 auto;}
.sec--narrow .sec__in{max-width:760px;}
.sec--sand{background:var(--sand);}
.sec-eyebrow{
  font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.3em;
  font-size:12px;color:var(--ink);
}
.sec-title{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,60px);line-height:1.08;margin:14px 0 0;}
.sec-title--script{font-family:var(--script);text-transform:none;letter-spacing:0;font-size:clamp(40px,6vw,74px);}
.lead{font-family:var(--body);font-size:clamp(14px,1.05vw,16px);line-height:1.6;color:var(--body-ink);}

/* hero (one-page) */
.hero__kicker{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.36em;font-size:clamp(11px,1.2vw,14px);margin:0 0 22px;color:rgba(253,249,247,.9);}
.hero__tag{font-family:var(--script);font-size:clamp(28px,4vw,46px);margin:18px 0 0;color:var(--cream);}
.hero__meta{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.26em;font-size:clamp(11px,1.2vw,13px);margin:26px 0 0;color:rgba(253,249,247,.92);line-height:2;}

/* travel route */
.route{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:48px;}
.route__city{font-family:var(--display);font-size:clamp(24px,2.6vw,34px);margin:0 0 12px;}
.route__step .sec-eyebrow{display:block;margin-bottom:8px;letter-spacing:.24em;font-size:11px;color:var(--muted,#6E655A);}
.route p{font-family:var(--body);font-size:14px;line-height:1.55;color:var(--body-ink);margin:0;}

/* hotels */
.hotels{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,48px);margin-top:48px;}
.hotel{border-top:1px solid var(--line);padding-top:20px;}
.hotel h4{font-family:var(--display);font-weight:400;font-size:26px;margin:0 0 8px;}
.hotel p{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:#6E655A;margin:0 0 14px;}
.hotel a{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px;transition:opacity .35s;}
.hotel a:hover{opacity:.55;}

/* itinerary */
.itin{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,52px);margin-top:52px;}
.itin__day{text-align:center;border-top:1px solid var(--line);padding-top:26px;}
.itin__date{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.26em;font-size:12px;color:#6E655A;}
.itin__name{font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,38px);margin:12px 0 16px;}
.itin__body{font-family:var(--body);font-size:14px;line-height:1.55;color:var(--body-ink);margin:0 0 16px;}
.itin__attire{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;color:var(--ink);}

/* faq accordion */
.faq{max-width:780px;margin:44px auto 0;}
.faq__item{border-top:1px solid var(--line);}
.faq__item:last-child{border-bottom:1px solid var(--line);}
.faq__q{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:24px 2px;color:var(--ink);font-family:var(--display);font-size:clamp(20px,2.2vw,26px);}
.faq__q .pm{font-family:var(--ui);font-weight:400;font-size:22px;transition:transform .35s ease;flex:none;}
.faq__item.open .faq__q .pm{transform:rotate(45deg);}
.faq__a{max-height:0;overflow:hidden;transition:max-height .45s ease;}
.faq__item.open .faq__a{max-height:360px;}
.faq__a p{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--body-ink);margin:0;padding:0 2px 26px;}

/* custom RSVP button (laurel frame) */
.rsvp-btn{position:relative;display:inline-block;line-height:0;color:var(--ink);transition:opacity .4s ease;}
.rsvp-btn img{display:block;width:clamp(230px,44vw,330px);height:auto;}
.rsvp-btn__label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.42em;
  font-size:clamp(17px,2.4vw,24px);color:var(--ink);padding-left:.42em;line-height:1;
}
.rsvp-btn:hover{opacity:.55;}

/* rsvp section */
.rsvp-sec{text-align:center;}
.rsvp-sec .big-date{font-family:var(--display);font-size:clamp(46px,8vw,92px);line-height:1;margin:14px 0 0;}
.rsvp-sec .by{font-family:var(--display);font-style:italic;font-size:clamp(20px,3vw,30px);margin:16px 0 0;color:var(--ink);}
.rsvp-sec .email{display:inline-block;margin-top:30px;font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px;transition:opacity .35s;}
.rsvp-sec .email:hover{opacity:.55;}

@media (max-width:880px){
  .topnav{justify-content:flex-start;padding:18px 22px;}
  .topnav__links{display:none;}
  .topnav__links.is-open{display:flex;position:fixed;inset:0;z-index:50;margin:0;padding:0;background:var(--cream);flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,4vh,36px);}
  .topnav__links.is-open a{color:var(--ink);font-size:15px;letter-spacing:.3em;}
  .topnav__toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:6px 2px;position:relative;z-index:60;color:var(--cream);}
  .topnav.scrolled .topnav__toggle{color:var(--ink);}
  .topnav__toggle span{display:block;width:24px;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s;}
  .topnav__toggle.is-open span{background:var(--ink);}
  .topnav__toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .topnav__toggle.is-open span:nth-child(2){opacity:0;}
  .topnav__toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

  .route{grid-template-columns:1fr;gap:32px;}
  .hotels{grid-template-columns:1fr;gap:28px;}
  .itin{grid-template-columns:1fr;gap:32px;}
  .sec{padding:60px 22px;}
}

/* ============================================================
   RSVP — centered cream splash
   ============================================================ */
.splash{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:80px 24px;
}
.splash__date{
  font-family:var(--ui);font-weight:600;letter-spacing:.34em;
  font-size:clamp(16px,1.6vw,21px);margin:0 0 18px;padding-left:.34em;color:var(--ink);
}
.splash__stack{position:relative;display:inline-block;}
.splash__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(44px,7.4vw,92px);line-height:1;margin:0;letter-spacing:.005em;color:var(--ink);
}
.splash__script{
  font-family:var(--script);color:var(--blue);
  font-size:clamp(42px,7vw,82px);line-height:1;
  position:absolute;left:50%;bottom:-.62em;transform:translateX(-50%);
  white-space:nowrap;pointer-events:none;
}
.splash__place{
  font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.3em;
  font-size:clamp(14px,1.6vw,20px);margin:34px 0 0;color:var(--ink);
}

/* cartouche RSVP button */
.cartouche{display:inline-block;margin-top:48px;position:relative;}
.cartouche svg{display:block;width:clamp(132px,34vw,172px);height:auto;}
.cartouche__label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:400;letter-spacing:.4em;
  font-size:clamp(14px,3.4vw,18px);color:var(--ink);padding-left:.4em;
}
.cartouche:hover svg rect,.cartouche:hover svg path{fill:var(--ink);}
.cartouche:hover .cartouche__label{color:var(--cream);}

/* ============================================================
   LOCATION
   ============================================================ */
.section{padding:clamp(56px,7vw,96px) 56px;}
.wrap{max-width:1180px;margin:0 auto;}
.center{text-align:center;}

.page-head{
  font-family:var(--display);font-weight:400;
  font-size:clamp(38px,5vw,60px);line-height:1.12;
  margin:0 0 clamp(40px,5vw,68px);
}

.cols{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,7vw,108px);margin-top:0;
}
.cols p{
  margin:0;font-family:var(--body);font-size:clamp(12.5px,0.95vw,14px);
  line-height:1.55;text-align:justify;color:var(--body-ink);hyphens:auto;
}

/* full-bleed photo band */
.photoband{width:100%;height:clamp(360px,54vw,738px);}
.photo{
  width:100%;height:100%;position:relative;overflow:hidden;
  background:
    radial-gradient(130% 130% at 30% 20%,rgba(180,165,140,.5),transparent 55%),
    linear-gradient(160deg,#7d7568 0%,#544c40 55%,#2f2a23 100%);
}
.photo::after{
  content:attr(data-label);position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);font-family:var(--ui);text-transform:uppercase;
  letter-spacing:.26em;font-size:11px;color:rgba(255,255,255,.78);text-align:center;padding:0 16px;
}

.venue-block{text-align:center;}
.venue-block .eyebrow{display:block;margin-bottom:18px;}
.venue-name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(40px,6vw,72px);line-height:1.05;margin:0;
}
.venue-addr{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(18px,2vw,26px);margin:14px 0 0;color:var(--ink);
}
.learn-more{
  display:inline-block;margin-top:8px;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.26em;font-size:clamp(15px,1.5vw,19px);color:var(--ink);
  opacity:1;transition:opacity .4s ease;
}
.learn-more:hover{opacity:.55;}

/* ============================================================
   FOOTER (dark band + filigree)
   ============================================================ */
.footer{
  background:var(--ink);color:var(--cream);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:24px;padding:54px clamp(40px,8vw,140px);
}
.footer__name{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.34em;font-size:clamp(13px,1.4vw,17px);line-height:1.9;
}
.footer__name--l{text-align:left;}
.footer__name--r{text-align:right;}
.footer__crest{width:clamp(150px,18vw,260px);height:auto;justify-self:center;}
.footer__crest path,.footer__crest line{stroke:var(--cream);fill:none;stroke-width:1.1;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  body{font-size:17px;}
  .nav{padding:20px 22px;flex-wrap:wrap;justify-content:flex-start;}
  .nav__toggle{display:flex;position:relative;z-index:60;}
  .nav--over .nav__toggle{color:var(--cream);}
  .nav--dark .nav__toggle{color:var(--ink);}
  .nav__toggle.is-open span{background:var(--ink);}

  .nav__links{display:none;}
  .nav__links.is-open{
    display:flex;position:fixed;inset:0;z-index:50;margin:0;padding:0;
    flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(24px,4.4vh,38px);background:var(--cream);
  }
  .nav__links.is-open a{
    color:var(--ink);font-size:15px;letter-spacing:.3em;opacity:1;
  }
  .nav__links.is-open a:hover{opacity:.5;}

  .section{padding:56px 24px;}
  .cols{grid-template-columns:1fr;gap:8px;}
  .cols p{text-align:left;}

  .footer{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;padding:46px 24px;}
  .footer__name--l,.footer__name--r{text-align:center;}
  .footer__crest{order:-1;}
}

/* ============================================================
   MOCKUP MATCH (PDF) — overrides + new components
   ============================================================ */

/* nav: charcoal over the cream hero, subtle cream bg on scroll */
.topnav{justify-content:center;}
.topnav__links a{color:var(--ink);}
.topnav.scrolled{background:rgba(253,249,247,.97);}
.topnav.scrolled .topnav__links a{color:var(--ink);}

/* ---------- GATE (soft photo + title + password) ---------- */
.gate-screen{background:var(--cream);}
.gate-photo{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(120% 120% at 80% 90%, rgba(170,168,160,.45), transparent 60%),
    linear-gradient(160deg,#EDE8E0 0%,#D9D2C7 50%,#C9C2B6 100%);
}
.gate-screen__inner{position:relative;z-index:2;}
.g-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(28px,5.4vw,58px);line-height:1.04;letter-spacing:.02em;color:var(--ink);margin:0;
}
.g-title .amp{font-family:var(--script);text-transform:none;font-size:1.15em;line-height:0;letter-spacing:0;padding:0 .06em;}
.g-input{margin-top:clamp(34px,5vh,56px);}

/* ---------- HERO / LANDER (cream) ---------- */
.lander{
  background:var(--cream);text-align:center;
  padding:clamp(120px,17vh,210px) 24px clamp(70px,9vw,120px);
}
.lander__title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(38px,8vw,104px);line-height:1.0;letter-spacing:.012em;color:var(--ink);margin:0;
}
.lander__title .amp{font-family:var(--script);text-transform:none;font-size:1.18em;line-height:0;letter-spacing:0;padding:0 .04em;font-weight:400;}
.lander__sub{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.36em;font-size:clamp(12px,1.5vw,16px);margin:30px 0 0;padding-left:.36em;}
.lander__date{font-family:var(--ui);font-weight:600;letter-spacing:.22em;font-size:clamp(12px,1.3vw,15px);margin:8px 0 0;}
.lander__venue-wrap{position:relative;display:inline-block;margin-top:clamp(30px,4vw,46px);}
.lander__venue{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.6vw,56px);line-height:1;margin:0;}
.lander__venue-script{font-family:var(--script);color:var(--blue);font-size:clamp(26px,3.4vw,42px);line-height:1;position:absolute;left:50%;bottom:-.56em;transform:translateX(-50%);white-space:nowrap;}
.lander .rsvp-btn{margin-top:clamp(58px,8vw,96px);}

/* ---------- alternating image + text split ---------- */
.split2{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.split2__media{min-height:clamp(380px,46vw,660px);}
.split2__media .photo{width:100%;height:100%;}
.split2--mediaRight .split2__media{order:2;}
.split2__text{padding:clamp(40px,6vw,96px);display:flex;flex-direction:column;justify-content:center;}
.blocktitle{font-family:var(--display);font-weight:400;font-size:clamp(32px,4.6vw,58px);line-height:1.06;margin:14px 0 22px;}
.blockbody{font-family:var(--body);font-size:clamp(13px,1vw,15px);line-height:1.62;color:var(--body-ink);margin:0 0 1em;}
.blockbody:last-child{margin-bottom:0;}
.blockaddr{font-family:var(--display);font-style:italic;font-size:clamp(15px,1.4vw,19px);margin:0 0 22px;color:var(--ink);}

/* ---------- horizontal scroll sequence ---------- */
.hsec{padding:clamp(60px,7vw,100px) 0;}
.hsec__head{padding:0 clamp(28px,5vw,72px);max-width:1180px;margin:0 auto clamp(36px,5vw,60px);}
.hscroll{display:flex;gap:clamp(28px,4vw,64px);overflow-x:auto;scroll-snap-type:x proximity;padding:0 clamp(28px,5vw,72px) 26px;scrollbar-width:thin;}
.hscroll::-webkit-scrollbar{height:2px;}
.hscroll::-webkit-scrollbar-thumb{background:var(--line);}
.hcol{flex:0 0 clamp(248px,28vw,330px);scroll-snap-align:start;border-top:1px solid var(--line);padding-top:24px;position:relative;}
.hcol::before{content:"";position:absolute;top:-4.5px;left:0;width:8px;height:8px;border-radius:50%;background:var(--ink);}
.hcol__city{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.24em;font-size:13px;color:var(--ink);}
.hcol__date{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.24em;font-size:12px;color:#6E655A;}
.hcol__name{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,32px);line-height:1.1;margin:10px 0 16px;}
.hcol__body{font-family:var(--body);font-size:13px;line-height:1.58;color:var(--body-ink);margin:14px 0 0;}
.hcol__attire{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;color:var(--ink);margin:14px 0 0;}
.hcol--hotels .hotel-line{margin-bottom:16px;}
.hcol--hotels h4{font-family:var(--display);font-weight:400;font-size:19px;margin:0 0 4px;}
.hcol--hotels p{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:#6E655A;margin:0 0 6px;}
.hcol--hotels a{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;border-bottom:1px solid var(--ink);padding-bottom:2px;}
.hcol--hotels a:hover{opacity:.55;}

/* ---------- registry media ---------- */
.registry-media{background:var(--ink);position:relative;min-height:clamp(380px,46vw,660px);display:flex;align-items:flex-end;}
.registry-media .photo{position:absolute;inset:clamp(40px,5vw,72px);background:linear-gradient(160deg,#8a7d6b,#5a5044 60%,#3a342b);}
.registry-media__cap{position:relative;z-index:2;color:var(--cream);padding:clamp(40px,5vw,72px);font-family:var(--display);font-style:italic;font-size:18px;}
.registry-media__num{font-family:var(--ui);font-weight:600;letter-spacing:.2em;font-size:11px;display:block;margin-top:6px;font-style:normal;}

/* ---------- dress code blue panel ---------- */
.dress-panel{background:var(--blue);min-height:clamp(380px,46vw,660px);}

/* ---------- FAQ centered ---------- */
#faq .sec-title{font-family:var(--display);}

/* ---------- sand footer ---------- */
.footer-sand{background:var(--sand);text-align:center;padding:clamp(30px,4vw,42px) 24px;}
.footer-sand a{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.24em;font-size:13px;color:var(--ink);}
.footer-sand a:hover{opacity:.6;}

@media (max-width:880px){
  .topnav__toggle{color:var(--ink);}
  .topnav.scrolled .topnav__toggle{color:var(--ink);}
  .split2{grid-template-columns:1fr;}
  .split2--mediaRight .split2__media{order:0;}
  .split2__media{min-height:300px;}
  .split2__text{padding:40px 24px;}
  .registry-media,.dress-panel{min-height:300px;}
  .lander{padding:120px 22px 70px;}
}

/* ============================================================
   REFINEMENTS — closer to mockup (round 2)
   ============================================================ */

/* hero tagline + date in GFS Didot caps; bigger blue script */
.lander__sub{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.3em;font-size:clamp(13px,1.9vw,20px);}
.lander__date{font-family:var(--display);font-weight:400;letter-spacing:.22em;font-size:clamp(13px,1.7vw,18px);}
.lander__venue{font-size:clamp(30px,4.4vw,54px);}
.lander__venue-script{font-size:clamp(34px,5.6vw,66px);bottom:-.5em;}

/* body copy = Bauer Bodoni, narrower measure */
.blockbody{font-family:var(--body);max-width:430px;}
.blockaddr{max-width:430px;}
.split2__text .eyebrow{font-family:var(--ui);}

/* italic text → Didot italic */
.blockaddr{font-family:var(--display);font-style:italic;}
#dress-code .blockbody{font-family:var(--display);font-style:italic;}
.hcol__attire{font-family:var(--display);font-style:italic;text-transform:none;letter-spacing:.01em;font-size:clamp(13px,1.1vw,15px);}

/* "Learn more" — Didot italic, green */
.learn-more--green{
  font-family:var(--display);font-style:italic;text-transform:none;letter-spacing:.01em;
  border-bottom:none;color:var(--green);font-size:clamp(17px,1.7vw,21px);padding-bottom:0;
}
.learn-more--green:hover{opacity:.6;}

/* ---------- horizontal scroll: ONE continuous line + dots ---------- */
.hscroll{overflow-x:auto;padding:0 clamp(24px,5vw,72px) 30px;scroll-snap-type:x proximity;scrollbar-width:thin;}
.hrow{display:inline-flex;gap:clamp(30px,4vw,60px);position:relative;padding-top:36px;}
.hrow::before{content:"";position:absolute;top:6px;left:0;right:0;height:1px;background:var(--line);}
.hcol{flex:0 0 clamp(280px,30vw,360px);scroll-snap-align:start;border-top:none;padding-top:0;position:relative;}
.hcol::before{content:"";position:absolute;top:-33.5px;left:0;width:8px;height:8px;border-radius:50%;background:var(--ink);}
.hcol__body{font-family:var(--body);max-width:none;}

/* itinerary: transportation sits under arrival, then attire */
.hcol__trans{font-family:var(--body);font-size:13px;line-height:1.55;color:var(--body-ink);margin:12px 0 0;}

/* ---------- registry carousel (clickable, dots) ---------- */
.reg-carousel{display:flex;flex-direction:column;background:var(--cream);}
.reg-stage{position:relative;flex:1;min-height:clamp(360px,44vw,640px);}
.reg-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease;display:flex;align-items:center;justify-content:center;}
.reg-slide.is-active{opacity:1;pointer-events:auto;}
.reg-slide img{width:100%;height:100%;object-fit:contain;}
.reg-dots{display:flex;gap:11px;justify-content:center;padding:18px 0 6px;}
.reg-dot{width:7px;height:7px;border-radius:50%;background:rgba(41,37,37,.28);border:none;cursor:pointer;padding:0;transition:background .3s;}
.reg-dot.is-active{background:var(--ink);}

/* ---------- FAQ: smaller copy ---------- */
.faq__q{font-family:var(--body);font-size:clamp(14px,1.3vw,16px);padding:18px 2px;}
.faq__q .pm{font-size:16px;}
.faq__a p{font-family:var(--body);font-size:clamp(13px,1vw,14px);padding-bottom:18px;}
#faq .sec-title{font-size:clamp(34px,4.4vw,52px);}

/* ============================================================
   REFINEMENTS — round 3 (feedback on live site)
   ============================================================ */
/* hide placeholder labels once a real image loads */
.photo:has(img)::after{content:none;}

/* widen body copy again */
.blockbody{max-width:540px;}

/* left-align the split text blocks */
.split2__text{text-align:left;align-items:flex-start;}

/* address smaller, Didot italic (already italic) */
.blockaddr{font-size:clamp(13px,1.2vw,16px);}

/* travel header: no eyebrow, aligned to the same left as the venue copy */
.hsec__head{max-width:none;margin:0;padding:0 clamp(40px,6vw,96px);text-align:left;}
.hscroll{padding-left:clamp(40px,6vw,96px);padding-right:clamp(24px,5vw,72px);}

/* city labels → GFS Didot caps with spacing (match mockup) */
.hcol__city{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(16px,1.5vw,20px);}

/* wider columns so only ~2.5 show — 3rd is visibly cut off */
.hcol{flex-basis:clamp(300px,40vw,460px);}

/* hotels listed under the L'Isle column */
.hotels-list{margin-top:26px;}
.hotel-line{margin-bottom:16px;}
.hotel-line h4{font-family:var(--display);font-weight:400;font-size:20px;margin:0 0 4px;}
.hotel-line p{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:#6E655A;margin:0 0 6px;}
.hotel-line a{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;border-bottom:1px solid var(--ink);padding-bottom:2px;}
.hotel-line a:hover{opacity:.55;}

/* ============================================================
   REFINEMENTS — round 4
   ============================================================ */
/* hero: smaller title, lower blue script */
.lander__title{font-size:clamp(34px,7vw,90px);}
.lander__venue-script{bottom:-.72em;}

/* Learn more: Didot italic at body-copy size */
.learn-more--green{font-family:var(--display);font-style:italic;font-size:clamp(14px,1.05vw,16px);letter-spacing:.01em;}

/* Travel header: two lines, aligned left, generous space before the timeline */
.hsec__head{max-width:none;margin:0 0 clamp(58px,7vw,94px);padding:0 clamp(44px,6.5vw,104px);text-align:left;}
.hscroll{padding-left:clamp(44px,6.5vw,104px);}

/* itinerary timeline: narrower columns (shorter copy) */
.hscroll--itin .hcol{flex-basis:clamp(228px,24vw,300px);}

/* dress code copy → Bauer Bodoni (like all body copy) */
#dress-code .blockbody{font-family:var(--body);font-style:normal;}

/* registry: charcoal behind the image, light dots */
.reg-carousel{background:var(--ink);}
.reg-slide img{object-fit:contain;}
.reg-dot{background:rgba(253,249,247,.42);}
.reg-dot.is-active{background:var(--cream);}

/* footer email smaller */
.footer-sand a{font-size:clamp(10px,1vw,11px);}

/* ============================================================
   REFINEMENTS — round 5
   ============================================================ */
/* title lockup image (combines Didot + script &); white bg drops out via multiply on cream */
.lander__title-img{display:inline-block;width:clamp(320px,58vw,720px);height:auto;mix-blend-mode:multiply;}
.g-title-img{display:inline-block;width:clamp(280px,72vw,520px);height:auto;mix-blend-mode:multiply;}

/* itinerary day names → Didot caps, spaced (match mockup) */
.hcol__name{text-transform:uppercase;letter-spacing:.12em;font-size:clamp(17px,1.7vw,21px);margin:12px 0 16px;}

/* ============================================================
   REFINEMENTS — round 6
   ============================================================ */
/* shorter Location / Venue side images */
.split2__media{min-height:clamp(330px,38vw,520px);}

/* title image slightly smaller (reduce upscaling blur) */
.lander__title-img{width:clamp(320px,54vw,640px);}

/* Travel: narrower Paris/Avignon, wider L'Isle so it's cut off (scroll cue) */
.hcol{flex-basis:clamp(264px,30vw,360px);}
.hcol--lisle{flex-basis:clamp(430px,48vw,580px);}

/* hotels under L'Isle → two columns (Leos+Henri left, Maison+Prévôté right) */
.hotels-list{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-auto-flow:column;column-gap:30px;row-gap:22px;}
.stars{display:inline-block;margin-left:8px;font-size:10px;letter-spacing:.1em;color:var(--ink);vertical-align:1px;}

/* registry image: padding inside the charcoal block, smaller image */
.reg-slide{padding:clamp(36px,5vw,72px);}

@media (max-width:880px){
  .hotels-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;}
}

/* ---------- round 7: vector title (transparent SVG, no blend needed) ---------- */
.lander__title-img{mix-blend-mode:normal;width:clamp(340px,56vw,680px);}
.g-title-img{mix-blend-mode:normal;width:clamp(280px,72vw,520px);}

/* ============================================================
   REFINEMENTS — round 8 (big pass)
   ============================================================ */
/* tighter gap under the hero title */
.lander__sub{margin-top:14px;}

/* body copy +2pt across the site */
.blockbody{font-size:clamp(15px,1.1vw,17px);}
.cols p{font-size:clamp(14.5px,1.05vw,16px);}
.lead{font-size:clamp(15px,1.1vw,17px);}
.hcol__body{font-size:15px;}
.hcol__trans{font-size:15px;}

/* unify the four half-page blocks (location / venue / registry / dress) to one height */
.split2__media,.reg-stage,.dress-panel{min-height:clamp(330px,38vw,500px);}

/* full-bleed media columns */
.split2{width:100%;}
.split2__media{overflow:hidden;}

/* Travel columns: equal width; 3 across so L'Isle is partly cut (scroll cue) */
.hcol{flex-basis:clamp(300px,34vw,420px);}
.hcol--lisle{flex-basis:clamp(300px,34vw,420px);}

/* hotels stacked vertically again */
.hotels-list{display:block;}
.hotel-line{margin-bottom:18px;}
.hotel-line a{color:var(--green);border-bottom-color:var(--green);}

/* ---- timeline: title ABOVE the line, body BELOW (matches mockup) ---- */
.hcol{position:relative;border-top:none;padding-top:0;}
.hcol__head{min-height:var(--hh,40px);}
.hcol__rest{padding-top:24px;}
.hrow{position:relative;}
.hrow::before{content:"";position:absolute;left:0;right:0;top:var(--hh,40px);height:1px;background:var(--line);}
.hcol::before{content:"";position:absolute;left:0;top:calc(var(--hh,40px) - 3.5px);width:8px;height:8px;border-radius:50%;background:var(--ink);}
.hsec .hrow{--hh:40px;}
.hscroll--itin .hrow{--hh:68px;}
.hcol__name{margin:8px 0 0;}

/* registry: charcoal block, dots lifted up between image and bottom; auto-fade */
.reg-carousel{position:relative;}
.reg-dots{position:absolute;left:0;right:0;bottom:clamp(26px,4vw,52px);padding:0;z-index:2;}

/* zero letter-spacing on title-case Didot headlines (caps treatments keep their kerning) */
.blocktitle,.sec-title,.lander__venue,.venue-name,.blockaddr,.hotel-line h4,.rsvp-sec .big-date,.rsvp-sec .by{letter-spacing:0;}

/* more breathing room before the footer */
#faq{padding-bottom:clamp(76px,9vw,124px);}

/* ============================================================
   REFINEMENTS — round 8
   ============================================================ */
/* gate video: 3 across on desktop, 1 on mobile */
.gate-photo{display:flex;}
.gate-vid{flex:1 1 0;width:33.3333%;height:100%;object-fit:cover;display:block;}

/* tighten hero title → tagline gap */
.lander__sub{margin-top:14px;}

/* body copy +2pt across the site */
.blockbody{font-size:clamp(15px,1.1vw,17px);}
.cols p{font-size:clamp(14.5px,1.05vw,16px);}
.lead{font-size:clamp(15px,1.1vw,17px);}
.hcol__body,.hcol__trans{font-size:15px;}

/* all four half-page blocks the same height */
.split2__media,.reg-stage,.dress-panel{min-height:clamp(340px,40vw,520px);}

/* travel columns equal width (L'Isle no longer wider) */
.hcol{flex-basis:clamp(300px,34vw,420px);}
.hcol--lisle{flex-basis:clamp(300px,34vw,420px);}

/* hotels stacked vertically; Book now in green */
.hotels-list{display:block;}
.hotel-line{margin-bottom:18px;}
.hotel-line a{color:var(--green);border-bottom-color:var(--green);}

/* timeline: title above the line, body below it */
.hcol{position:relative;}
.hrow{padding-top:0;}
.hcol__head{min-height:var(--hh,42px);}
.hcol__rest{padding-top:24px;}
.hrow::before{top:var(--hh,42px);}
.hcol::before{top:calc(var(--hh,42px) - 3.5px);}
.hsec .hrow{--hh:42px;}
.hscroll--itin .hrow{--hh:66px;}
.hcol__name{margin:6px 0 0;}

/* registry: dots raised between image and bottom of the charcoal block */
.reg-carousel{position:relative;}
.reg-dots{position:absolute;left:0;right:0;bottom:clamp(26px,3.5vw,50px);padding:0;z-index:3;}

/* zero kerning on title-case Didot headlines (all-caps keep their tracking) */
.blocktitle,.sec-title,.lander__venue,.venue-name,.blockaddr,.hotel-line h4,.rsvp-sec .big-date,.rsvp-sec .by{letter-spacing:0;}

/* more space before the footer */
#faq{padding-bottom:clamp(72px,9vw,120px);}

@media (max-width:880px){
  .gate-vid--x{display:none;}
  .gate-vid{width:100%;flex:1 1 100%;}
}

/* gate video legibility scrim (kept light so the video still reads) */
.gate-photo::after{content:"";position:absolute;inset:0;background:rgba(253,249,247,.30);pointer-events:none;}

/* ============================================================
   REFINEMENTS — round 9
   ============================================================ */
/* hero: tighten title → RSVP button rhythm (closer to mockup) */
.lander{padding:clamp(108px,15vh,178px) 24px clamp(58px,7vw,92px);}
.lander__sub{margin-top:12px;}
.lander__date{margin-top:6px;}
.lander__venue-wrap{margin-top:clamp(20px,2.6vw,32px);}
.lander .rsvp-btn{margin-top:clamp(34px,4.5vw,58px);}

/* all four half-page blocks share ONE (shorter) height */
.split2__media,.reg-stage,.dress-panel{min-height:clamp(310px,34vw,460px);}

/* unified body copy everywhere: Bauer Bodoni, no kerning, tighter leading, −1pt */
.blockbody,.cols p,.lead,.hcol__body,.hcol__trans{
  font-family:var(--body);font-size:clamp(14px,1.02vw,16px);line-height:1.45;letter-spacing:0;
}

/* ---- unified button / link style: GFS Didot caps, hover → italic (nav excluded) ---- */
.learn-more--green,.hotel-line a,.footer-sand a{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-style:normal;
  border-bottom:none;transition:opacity .35s ease;
}
.learn-more--green:hover,.hotel-line a:hover,.footer-sand a:hover{font-style:italic;opacity:1;}
.rsvp-btn:hover .rsvp-btn__label{font-style:italic;}
.learn-more--green{font-size:clamp(13px,1vw,15px);color:var(--green);}
.hotel-line a{font-size:12px;color:var(--green);}
.footer-sand a{color:var(--ink);}
.hotel-line h4{font-size:18px;}

/* ---- timeline (travel + itinerary): title above line, dot on line, body below ---- */
.hrow{position:relative;padding-top:0;}
.hrow::before{content:"";position:absolute;left:0;right:0;top:var(--hh,36px);height:1px;background:var(--line);}
.hcol{position:relative;border-top:none;}
.hcol::before{content:"";position:absolute;left:0;top:calc(var(--hh,36px) - 4px);width:8px;height:8px;border-radius:50%;background:var(--ink);}
.hcol__head{min-height:var(--hh,36px);}
.hcol__rest{padding-top:22px;}
.hsec .hrow{--hh:36px;}
.hscroll--itin .hrow{--hh:56px;}

/* more space before the b&w photo so it matches the space after it */
.hsec .photoband{margin-top:clamp(46px,5.5vw,72px) !important;}

/* more space after FAQ, balanced before the footer */
#faq{padding-bottom:clamp(96px,11vw,150px);}

/* ============================================================
   REFINEMENTS — round 10 (splash to match new mockup)
   ============================================================ */
/* darker gate videos so the cream title/password read */
.gate-vid{filter:brightness(.6) saturate(.92);}
.gate-photo::after{background:linear-gradient(180deg,rgba(20,16,13,.34),rgba(20,16,13,.46));}

/* gate title + password in cream over the dark video */
.gate-screen .g-input{color:var(--cream);border-bottom-color:rgba(253,249,247,.6);}
.gate-screen .g-input::placeholder{color:rgba(253,249,247,.72);letter-spacing:.4em;}

/* ============================================================
   REFINEMENTS — round 11 (registry block to match new mockup)
   ============================================================ */
.reg-fig{position:absolute;top:clamp(24px,3.4vw,44px);left:0;right:0;text-align:center;
  font-family:var(--display);font-style:italic;font-size:clamp(13px,1.1vw,15px);color:var(--cream);z-index:5;pointer-events:none;}
.reg-arrow{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--cream);font-family:var(--display);font-size:30px;line-height:1;cursor:pointer;
  z-index:6;padding:8px 12px;opacity:.7;transition:opacity .3s ease;}
.reg-arrow:hover{opacity:1;}
.reg-arrow--prev{left:clamp(8px,1.4vw,24px);}
.reg-arrow--next{right:clamp(8px,1.4vw,24px);}
.reg-dots{display:none;}   /* mockup uses arrows + Fig caption */

/* ---------- round 12: gate password in GFS Didot caps, wide kerning ---------- */
.gate-screen .g-input{font-family:var(--display);font-weight:400;letter-spacing:.5em;font-size:14px;}
.gate-screen .g-input::placeholder{letter-spacing:.5em;}

/* ---------- round 13: title sizes tuned for the gate→hero morph ---------- */
.g-title-img{width:clamp(300px,58vw,540px);}
.lander__title-img{width:clamp(330px,54vw,600px);}

/* ============================================================
   REFINEMENTS — round 14
   ============================================================ */
/* nav text −2pt */
.topnav__links a{font-size:10px;}

/* hero: kill the big default <h1> margin so the tagline sits close under the title */
.lander__title{margin:0;line-height:1;}
.lander__sub{margin-top:6px;}

/* location / venue images shorter; registry & dress blocks taller */
.split2__media{min-height:clamp(270px,28vw,390px) !important;}
.reg-stage,.dress-panel{min-height:clamp(380px,44vw,560px) !important;}

/* registry: bring the dots back (bottom of the charcoal block) */
.reg-dots{display:flex !important;}

/* ---- TIMELINE (travel + itinerary): clean, authoritative layout ----
   title above the line · dot on the line · body below */
.hrow{position:relative !important;padding-top:0 !important;}
.hcol{position:relative !important;border-top:none !important;padding-top:0 !important;}
.hcol__city,.hcol__date,.hcol__name{white-space:nowrap;}
.hcol__head{min-height:var(--hh,40px) !important;display:block;}
.hcol__rest{padding-top:24px !important;}
.hrow::before{content:"" !important;position:absolute !important;left:0;right:0;top:var(--hh,40px) !important;height:1px !important;background:var(--line) !important;}
.hcol::before{content:"" !important;position:absolute !important;left:0;top:calc(var(--hh,40px) - 4px) !important;width:8px !important;height:8px !important;border-radius:50% !important;background:var(--ink) !important;}
.hsec .hrow{--hh:40px;}
.hscroll--itin .hrow{--hh:60px;}
.hcol__name{margin:6px 0 0;}

/* ============================================================
   REFINEMENTS — round 15
   ============================================================ */
/* timeline fix: zero default margins on the title elements so the line
   sits BELOW the name (with the dot on the line), not through it */
.hcol__city,.hcol__date{margin:0 !important;}
.hcol__name{margin:4px 0 0 !important;}
.hsec .hrow{--hh:42px;}
.hscroll--itin .hrow{--hh:62px;}

/* all four half-page blocks the SAME height (location/venue + registry/dress) */
.split2__media,.reg-stage,.dress-panel{min-height:clamp(400px,46vw,540px) !important;}
.split2__text{padding-top:clamp(34px,4.5vw,64px) !important;padding-bottom:clamp(34px,4.5vw,64px) !important;}

/* ============================================================
   REFINEMENTS — round 16 — EQUAL half-page block heights
   Location · Venue · Registry · Dress Code all share one height
   (matches the mockup where both blocks are ~590px).
   A locked grid row height means a long text column can no longer
   stretch its own row taller than the others.
   ============================================================ */
@media (min-width:881px){
  .split2{grid-template-rows:clamp(520px,60vw,640px) !important;}
  .split2__media,.reg-carousel,.split2__text{min-height:0 !important;height:auto !important;overflow:hidden;}
  .reg-stage,.dress-panel,.split2__media .photo{height:100% !important;min-height:0 !important;}
  .split2__text{
    padding-top:clamp(24px,2.8vw,44px) !important;
    padding-bottom:clamp(24px,2.8vw,44px) !important;
  }
  /* slightly smaller body copy in these four blocks (as in the mockup) so the
     long Location paragraph fits the shared height with room to spare */
  .split2 .blockbody{font-size:clamp(12.5px,0.95vw,14.5px) !important;line-height:1.48 !important;}
  .split2 .blocktitle{font-size:clamp(30px,4.2vw,52px) !important;margin:10px 0 16px !important;}
}

/* ============================================================
   REFINEMENTS — round 17
   Section headers ("Guest travel & accomodation", "Half wedding,
   Half vacation") forced LEFT-aligned, and the headers + timelines
   pulled tighter to the left edge (less inward indent).
   ============================================================ */
.hsec__head{
  text-align:left !important;
  max-width:none !important;
  margin-left:0 !important;margin-right:0 !important;
  padding-left:clamp(24px,5vw,76px) !important;
  padding-right:clamp(24px,5vw,76px) !important;
}
.hsec__head .blocktitle{text-align:left !important;margin-left:0 !important;}

#itinerary > div{
  padding-left:clamp(24px,5vw,76px) !important;
  padding-right:clamp(24px,5vw,76px) !important;
}
#itinerary .eyebrow,
#itinerary .blocktitle,
#itinerary .cols,
#itinerary .cols p{text-align:left !important;margin-left:0 !important;}

/* both horizontal timelines start at the same tighter left margin */
.hscroll{padding-left:clamp(24px,5vw,76px) !important;}

/* ============================================================
   REFINEMENTS — round 18
   - "Guest travel & accomodation" + "Half wedding, Half vacation"
     headers CENTER-aligned (per request; overrides round 17)
   - timelines restored to the deeper left indent
   - all four half-page blocks made slightly taller (kept equal)
   ============================================================ */
.hsec__head{
  text-align:center !important;
  max-width:none !important;
  margin:0 0 clamp(40px,5.5vw,80px) !important;
  padding-left:clamp(44px,6.5vw,104px) !important;
  padding-right:clamp(44px,6.5vw,104px) !important;
}
.hsec__head .blocktitle{text-align:center !important;margin-left:auto !important;margin-right:auto !important;}

#itinerary .eyebrow{display:block;text-align:center !important;}
#itinerary .blocktitle{text-align:center !important;}
#itinerary > div{
  padding-left:clamp(44px,6.5vw,104px) !important;
  padding-right:clamp(44px,6.5vw,104px) !important;
}

/* timelines: back to the more-inward left indent */
.hscroll{padding-left:clamp(44px,6.5vw,104px) !important;}

/* taller equal blocks */
@media (min-width:881px){
  .split2{grid-template-rows:clamp(560px,64vw,690px) !important;}
}

/* ============================================================
   REFINEMENTS — round 19
   - ALL body copy unified to one size across the site
   - registry controls: clean ARROWS (not the serif angle-glyphs)
   ============================================================ */
.blockbody,
.split2 .blockbody,
.hcol__body,
.hcol__trans,
.cols p,
.lead,
.faq__a p{
  font-size:clamp(13px,1vw,15px) !important;
  line-height:1.55 !important;
}

/* registry prev/next → real arrows in the UI (sans) face */
.reg-arrow{
  font-family:var(--ui) !important;
  font-weight:400 !important;
  font-size:clamp(20px,1.9vw,26px) !important;
  letter-spacing:0 !important;
}
.reg-dots{display:flex !important;}

/* ============================================================
   REFINEMENTS — round 20
   ============================================================ */
/* 1) make the four half-page blocks clearly taller (still all equal) */
@media (min-width:881px){
  .split2{grid-template-rows:clamp(640px,72vw,800px) !important;}
}

/* 2) both timelines start further from the left and scroll off the right
      edge so it's obvious there's more to see by scrolling right */
.hscroll{padding-left:clamp(72px,10vw,170px) !important;padding-right:0 !important;}
.hscroll--itin .hcol{flex-basis:clamp(280px,30vw,400px) !important;}

/* 3) itinerary intro: narrower two columns, centered under the centered header */
#itinerary .cols{
  max-width:720px !important;
  margin-left:auto !important;margin-right:auto !important;
  gap:clamp(34px,4vw,62px) !important;
}

/* 4) registry: daintier arrows + more breathing room around Fig / dots
      (more inner padding pushes the image away from the caption and dots) */
.reg-arrow{
  font-size:clamp(14px,1.2vw,18px) !important;
  opacity:.55 !important;
}
.reg-arrow:hover{opacity:1 !important;}
.reg-slide{padding:clamp(66px,8vw,112px) clamp(44px,5.5vw,84px) !important;}
.reg-fig{top:clamp(30px,4vw,52px) !important;}
.reg-dots{bottom:clamp(28px,3.6vw,50px) !important;}

/* ============================================================
   REFINEMENTS — round 21
   ============================================================ */
/* footer email: not bold */
.footer-sand a{font-weight:400 !important;}

/* itinerary date separator: serif middot so it always renders & reads */
.hcol__date .dsep{font-family:var(--display);letter-spacing:0;padding:0 .5em;color:inherit;}

/* timelines clearly overflow right: wider columns + bigger gaps so only the
   last item (L'Isle / Pool BBQ) peeks at the edge — an obvious scroll cue */
.hscroll{padding-left:clamp(64px,8.5vw,150px) !important;padding-right:0 !important;}
.hrow{gap:clamp(44px,5.5vw,90px) !important;}
.hsec .hcol,.hsec .hcol--lisle{flex-basis:clamp(330px,38vw,540px) !important;}
.hscroll--itin .hcol{flex-basis:clamp(320px,36vw,500px) !important;}

/* itinerary intro: a bit wider than v28 (between 720 and full width) */
#itinerary .cols{max-width:880px !important;}

/* registry arrows: daintier still */
.reg-arrow{font-size:clamp(11px,0.95vw,14px) !important;}

/* ============================================================
   REFINEMENTS — round 22
   ============================================================ */
/* ---- timelines: start further right (aligned with the itinerary body
        copy), wide+spaced columns so the last item barely peeks ---- */
.hscroll{padding-left:clamp(100px,13vw,240px) !important;padding-right:0 !important;}
.hrow{gap:clamp(40px,5vw,80px) !important;}
.hsec .hcol,.hsec .hcol--lisle{flex-basis:clamp(330px,35vw,500px) !important;}
.hscroll--itin .hcol{flex-basis:clamp(310px,34vw,470px) !important;}

/* itinerary intro: left-aligned at the same indent as the timeline,
   with generous space below before the timeline starts */
#itinerary .cols{
  margin-left:clamp(56px,6.5vw,136px) !important;
  margin-right:0 !important;
  max-width:760px !important;
  margin-bottom:0 !important;
}
.hscroll--itin{
  margin-top:clamp(50px,7vw,104px) !important;     /* space after paragraphs */
  margin-bottom:clamp(34px,5vw,80px) !important;   /* space before registry */
}

/* ---- registry "Contribute" matches the venue "Learn more" treatment ---- */
/* (uses .learn-more--green; nothing extra needed) */

/* ---- RSVP button: elegant hover — laurel fills with green, RSVP turns white ---- */
.rsvp-btn{overflow:visible;}
.rsvp-btn::before{
  content:"";position:absolute;top:50%;left:50%;
  width:clamp(150px,28vw,212px);height:clamp(150px,28vw,212px);
  transform:translate(-50%,-50%) scale(.86);
  border-radius:50%;background:var(--green);
  opacity:0;z-index:1;transition:opacity .5s ease,transform .5s ease;
  pointer-events:none;
}
.rsvp-btn:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1);}
.rsvp-btn__label{z-index:2;transition:color .45s ease,font-style 0s;}
.rsvp-btn:hover{opacity:1 !important;}
.rsvp-btn:hover .rsvp-btn__label{color:var(--cream) !important;font-style:normal !important;}

/* ============================================================
   REFINEMENTS — round 23 — match "Wedding Website Mockup (2)"
   ============================================================ */
/* eyebrows: same size as the navigation (10px) */
.eyebrow{font-size:10px !important;}
.hsec__head .eyebrow{display:block;margin-bottom:14px;}

/* travel + itinerary timelines: start at the body's left margin (~11.5%),
   three equal columns spanning the width so the last is mostly cut off
   — an obvious "scroll right for more" cue (per the mockup) */
.hscroll{padding-left:clamp(96px,11.5vw,200px) !important;padding-right:0 !important;}
.hrow{gap:clamp(14px,1.6vw,28px) !important;}
.hsec .hcol,.hsec .hcol--lisle,.hscroll--itin .hcol{flex-basis:clamp(330px,40vw,600px) !important;}

/* itinerary intro: two WIDE columns spanning the content width; left column
   aligned to the timeline's first column. Header stays centered. */
#itinerary > div{padding-left:0 !important;padding-right:0 !important;}
@media (min-width:881px){
  #itinerary .cols{
    margin-left:clamp(96px,11.5vw,200px) !important;
    margin-right:clamp(96px,11.5vw,200px) !important;
    max-width:none !important;
    gap:clamp(30px,3.2vw,58px) !important;
  }
}
@media (max-width:880px){
  #itinerary .cols{margin-left:24px !important;margin-right:24px !important;}
  #itinerary .eyebrow,#itinerary .blocktitle{padding:0 24px;}
}

/* registry: remove the side arrows (keep the dots) + slower, elegant cross-fade */
.reg-arrow{display:none !important;}
.reg-slide{transition:opacity 1.15s ease !important;}

/* ============================================================
   REFINEMENTS — round 24
   ============================================================ */
/* RSVP button: remove the green hover fill entirely */
.rsvp-btn::before{display:none !important;}
.rsvp-btn:hover .rsvp-btn__label{color:var(--ink) !important;font-style:normal !important;}
.rsvp-btn:hover{opacity:.6 !important;}

/* custom horizontal scrollbar under each timeline (matches the mockup:
   thin light track + dark thumb, inset to the content width) */
.hscroll{scrollbar-width:none !important;}
.hscroll::-webkit-scrollbar{display:none !important;}
.hbar{
  position:relative;height:2px;border-radius:2px;background:var(--line);
  margin:clamp(22px,2.8vw,40px) clamp(96px,11.5vw,200px) 0;
}
.hbar--itin{margin-bottom:clamp(48px,7vw,104px);}
.hbar__thumb{
  position:absolute;top:-2px;left:0;height:6px;width:64px;
  border-radius:3px;background:var(--ink);cursor:grab;
}
.hbar__thumb:active{cursor:grabbing;}

/* re-assert the timeline left indent (aligned with the body copy) */
.hscroll{padding-left:clamp(96px,11.5vw,200px) !important;padding-right:0 !important;}

/* itinerary intro columns: slightly narrower (wider centre gap, same left edge) */
@media (min-width:881px){
  #itinerary .cols{gap:clamp(56px,6vw,108px) !important;}
}

/* ============================================================
   REFINEMENTS — round 25
   ============================================================ */
/* ---- pinned horizontal auto-scroll (ruien.be style) ---- */
.pin{position:relative;}
.pin__sticky{position:relative;}
.pin__viewport{overflow-x:auto;overflow-y:visible;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.pin__viewport::-webkit-scrollbar{display:none;}
.pin__track{
  display:flex;width:max-content;align-items:flex-start;
  gap:clamp(14px,1.6vw,28px);
  padding-left:clamp(96px,11.5vw,200px);
  padding-right:clamp(96px,11.5vw,200px);
}
.pin--itin .hcol{flex-basis:clamp(330px,40vw,600px) !important;}
.pin__progress{display:none;}
.pin__bar{display:block;height:100%;background:var(--ink);border-radius:2px;
  transform-origin:left center;transform:scaleX(0);transition:transform .1s linear;}

/* active pin (desktop + JS) */
.pin.is-pinned .pin__sticky{
  position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
.pin.is-pinned .pin__viewport{overflow:hidden;}
.pin.is-pinned .pin__progress{
  display:block;position:absolute;
  left:clamp(96px,11.5vw,200px);right:clamp(96px,11.5vw,200px);
  bottom:clamp(38px,7vh,88px);height:2px;background:var(--line);border-radius:2px;
}

/* ---- hero: caps date + caps "Provence, France" (replaces blue script) ---- */
.lander__date{
  font-family:var(--ui) !important;font-weight:600 !important;text-transform:uppercase !important;
  letter-spacing:.3em !important;font-size:clamp(11px,1.1vw,13px) !important;
  color:var(--ink) !important;margin:0 0 16px !important;padding-left:.3em;
}
.lander__venue-wrap{display:block !important;position:static !important;}
.lander__venue-sub{
  display:block;font-family:var(--ui);font-weight:500;text-transform:uppercase;
  letter-spacing:.34em;font-size:clamp(11px,1.1vw,13px);color:var(--ink);
  margin-top:14px;padding-left:.34em;
}

/* ---- itinerary intro: narrower columns, closer together (centered) ---- */
@media (min-width:881px){
  #itinerary .cols{
    max-width:820px !important;
    margin-left:auto !important;margin-right:auto !important;
    gap:clamp(30px,3.2vw,50px) !important;
  }
}

/* ============================================================
   REFINEMENTS — round 26
   ============================================================ */
/* the sticky horizontal scroll replaces the scroll/progress bars — hide them */
.pin__progress,
.pin.is-pinned .pin__progress{display:none !important;}

/* itinerary timeline: the date + day-name are two lines and were overlapping
   the connector line/dots. Push the line lower so the headers sit fully above it. */
.pin--itin .hrow{--hh:68px !important;}

/* more white space between each timeline column (Paris · Avignon · L'Isle, etc.) */
.hrow{gap:clamp(48px,5.5vw,104px) !important;}

/* ============================================================
   REFINEMENTS — round 27
   ============================================================ */
/* header (eyebrow + title [+ itinerary intro]) now lives INSIDE the pinned
   sticky area, centered above the horizontally-scrolling columns */
.pin.is-pinned .pin__sticky{justify-content:center;gap:clamp(26px,4.5vh,60px);}
.pin__head{flex:none;text-align:center;padding:0 clamp(24px,5vw,72px);}
.pin__head .eyebrow{display:block;margin-bottom:14px;}
.pin__head .blocktitle{text-align:center;margin-left:auto;margin-right:auto;}
.pin__head--itin .cols{max-width:820px;margin:14px auto 0;gap:clamp(30px,3.2vw,52px);}
.pin__head--itin .cols p{text-align:left;}

/* connector line begins at the FIRST dot and never extends off-screen to the
   left of it (was spanning the full track including the left padding) */
.pin .hrow::before{
  left:clamp(96px,11.5vw,200px) !important;
  right:clamp(96px,11.5vw,200px) !important;
}

/* itinerary section now uses the same vertical rhythm as the travel section */
#itinerary{padding:clamp(60px,7vw,100px) 0 !important;}

/* ============================================================
   REFINEMENTS — round 28
   ============================================================ */
/* more space between the pinned header and the scrolling columns
   (under "Meet Us Under the Plane Trees"; after the itinerary intro) */
.pin.is-pinned .pin__sticky{gap:clamp(40px,5.5vh,88px) !important;}

/* narrower body copy in each timeline column */
.hcol__body{max-width:clamp(255px,22vw,340px) !important;}

/* itinerary intro: balance the two columns to equal amounts of text */
.pin__head--itin .cols{
  display:block !important;
  column-count:2;column-gap:clamp(40px,4vw,72px);column-fill:balance;
  max-width:780px;margin:14px auto 0;
}
.pin__head--itin .cols p{margin:0 0 1em;}

/* tighten the gap so the itinerary sits closer beneath the b&w photo */
#travel{padding-bottom:clamp(22px,3vw,44px) !important;}
#itinerary{padding-top:clamp(16px,2vw,30px) !important;}

/* ============================================================
   REFINEMENTS — round 29
   ============================================================ */
/* timeline body copy: a touch wider than r28, still short of the full column,
   and the SAME width across travel + itinerary (date arrival / transport / attire) */
.hcol__body,.hcol__trans,.hcol__attire{max-width:clamp(310px,28vw,420px) !important;}

/* more space under the pinned header before the columns begin scrolling */
.pin.is-pinned .pin__sticky{gap:clamp(52px,7vh,116px) !important;}

/* L'Isle: hotels listed to the RIGHT of the body copy, two per row, tops aligned */
.hcol--lisle .hcol__rest{display:flex !important;gap:clamp(34px,3.6vw,68px);align-items:flex-start;}
.hcol--lisle .hcol__body{flex:0 0 clamp(250px,22vw,330px);max-width:none !important;}
.hcol--lisle .hotels-list{
  margin-top:0 !important;
  display:grid !important;grid-auto-flow:row !important;grid-template-rows:none !important;
  grid-template-columns:repeat(2,minmax(150px,1fr)) !important;
  column-gap:clamp(22px,2.4vw,40px) !important;row-gap:clamp(18px,2vw,30px) !important;
}
.hsec .hcol--lisle{flex-basis:clamp(640px,64vw,900px) !important;}

/* itinerary intro: two balanced columns, equal lines, filling the width */
.pin__head--itin .cols{
  display:block !important;
  column-count:2 !important;column-fill:balance !important;
  column-gap:clamp(44px,4.5vw,80px) !important;
  max-width:860px !important;margin:14px auto 0 !important;
}
.pin__head--itin .cols p{margin:0 0 .8em !important;}

/* trim the blank space after the timeline before the b&w photo */
#travel{padding-bottom:clamp(6px,1.2vw,20px) !important;}
.hsec .photoband{margin-top:clamp(6px,1.2vw,18px) !important;}

/* hero "June 6, 2027" + "Provence, France" → GFS Didot caps (per mockup) */
.lander__date,.lander__venue-sub{
  font-family:var(--display) !important;font-weight:400 !important;letter-spacing:.26em !important;
}

/* ============================================================
   REFINEMENTS — round 30
   ============================================================ */
/* hero "June 6, 2027" + "Provence, France" → GFS Didot caps (per mockup) */
.lander__date,.lander__venue-sub{font-family:var(--display) !important;font-weight:400 !important;}

/* slightly tighter leading on the two-line headlines (per mockup) */
.blocktitle{line-height:1.0 !important;}

/* ============================================================
   REFINEMENTS — round 31
   ============================================================ */
/* extra space under the travel headline before the columns scroll */
#travel .pin__head{margin-bottom:clamp(30px,5.5vh,80px);}

/* L'Isle: hotels back to a VERTICAL list; body copy same width as the others */
.hcol--lisle .hcol__rest{display:block !important;}
.hcol--lisle .hcol__body{max-width:clamp(310px,28vw,420px) !important;flex:none !important;}
.hcol--lisle .hotels-list{display:block !important;margin-top:clamp(22px,2.4vw,34px) !important;}
.hsec .hcol--lisle{flex-basis:clamp(330px,40vw,600px) !important;}
.hotel-line{margin-bottom:clamp(15px,1.7vw,24px) !important;}
.hotel-line p{white-space:nowrap;}                 /* stars stay on the keys line */
.hotel-line h4{margin:0 0 3px !important;}
/* hotel title is the link now (Didot, not the green "Book now" button) */
.hotel-line h4 a{
  font-family:var(--display) !important;text-transform:none !important;letter-spacing:0 !important;
  font-size:inherit !important;color:var(--ink) !important;border-bottom:none !important;padding:0 !important;
}
.hotel-line h4 a:hover{font-style:italic;opacity:1;}

/* itinerary intro: two equal-width columns, text filling the full column width */
.pin__head--itin .cols{
  display:grid !important;grid-template-columns:1fr 1fr !important;column-count:auto !important;
  column-gap:clamp(40px,4vw,72px) !important;
  max-width:820px !important;margin:14px auto 0 !important;
}
.pin__head--itin .cols p{margin:0 !important;text-align:justify !important;}

/* ============================================================
   REFINEMENTS — round 32
   ============================================================ */
/* when pinned, anchor the content toward the top with clear breathing room
   ABOVE the eyebrow (per screenshot), rather than vertically centered */
.pin.is-pinned .pin__sticky{
  justify-content:flex-start !important;
  padding-top:clamp(54px,9vh,116px) !important;
  padding-bottom:clamp(20px,3vh,46px) !important;
}

/* ============================================================
   REFINEMENTS — round 33
   ============================================================ */
/* hero: smaller "La Bastide de Laurence"; date + Provence in GFS Didot
   (so the numerals/letterforms match the mockup) */
.lander__venue{font-size:clamp(24px,3.4vw,42px) !important;}
.lander__date,.lander__venue-sub{font-family:"GFS Didot",serif !important;}

/* more space above the eyebrow when the section pins (travel + itinerary);
   rebalance the under-headline gap + tighten the hotel list so it all fits */
.pin.is-pinned .pin__sticky{
  padding-top:clamp(66px,11vh,152px) !important;
  gap:clamp(40px,5vh,90px) !important;
}
#travel .pin__head{margin-bottom:clamp(20px,3vh,50px) !important;}
.hotel-line{margin-bottom:clamp(10px,1.2vw,16px) !important;}
.hotel-line h4{font-size:17px !important;}

/* itinerary intro: balanced two columns (equal rows), justified to full width */
.pin__head--itin .cols{
  display:block !important;grid-template-columns:none !important;
  column-count:2 !important;column-fill:balance !important;
  column-gap:clamp(40px,4vw,72px) !important;
  max-width:820px !important;margin:14px auto 0 !important;
}
#itinerary .cols p{text-align:justify !important;margin:0 !important;}

/* ============================================================
   REFINEMENTS — round 34
   ============================================================ */
/* RSVP laurel — smaller (per reference) */
.rsvp-btn img{width:clamp(165px,27vw,242px) !important;}
.rsvp-btn__label{font-size:clamp(12px,1.5vw,16px) !important;letter-spacing:.34em !important;}

/* even more space above the eyebrow when pinned, and more after the headline
   before the columns scroll (travel + itinerary) */
.pin.is-pinned .pin__sticky{
  padding-top:clamp(78px,12.5vh,172px) !important;
  gap:clamp(52px,6.5vh,112px) !important;
}
#travel .pin__head{margin-bottom:clamp(24px,3.5vh,60px) !important;}

/* compact the L'Isle hotel list so the added spacing still fits the pinned screen */
.hotel-line{margin-bottom:clamp(8px,1vw,13px) !important;}
.hotel-line h4{font-size:16px !important;margin:0 0 2px !important;}
.hcol--lisle .hotels-list{margin-top:clamp(16px,1.8vw,24px) !important;}

/* ============================================================
   REFINEMENTS — round 35
   ============================================================ */
/* "Provence, France" set larger than the "June 6, 2027" date (per mockup) */
.lander__date{font-size:clamp(11px,1.05vw,12.5px) !important;letter-spacing:.28em !important;}
.lander__venue-sub{font-size:clamp(14px,1.7vw,19px) !important;letter-spacing:.3em !important;margin-top:12px !important;}

/* ============================================================
   REFINEMENTS — round 36
   ============================================================ */
/* nudge "June 6, 2027" closer to "La Bastide de Laurence" (per mockup) */
.lander__date{margin:0 0 10px !important;}
.lander__venue-wrap{margin-top:clamp(2px,0.7vw,8px) !important;}

/* ============================================================
   REFINEMENTS — round 37 — RSVP form (Tally embed test)
   ============================================================ */
.rsvp-embed{padding:clamp(48px,7vw,92px) clamp(20px,5vw,72px) clamp(28px,4vw,48px);}
.rsvp-embed__wrap{max-width:680px;margin:clamp(18px,3vw,34px) auto 0;}
.rsvp-embed iframe{width:100%;border:0;background:transparent;display:block;}

/* ============================================================
   REFINEMENTS — round 38 — mobile gate/splash fixes
   ============================================================ */
@media (max-width:880px){
  .gate-screen{height:100dvh;min-height:100dvh;padding:34px 20px;}
  .gate-photo{display:flex;}
  .gate-vid--x{display:none !important;}
  .gate-vid{width:100% !important;flex:1 1 100% !important;height:100% !important;object-fit:cover;}
  .gate-screen__inner{position:relative;z-index:5;width:100%;max-width:none;}
  .g-title{position:relative;z-index:5;}
  .g-title-img{width:min(82vw,340px) !important;mix-blend-mode:normal !important;}
  .g-form{margin-top:clamp(26px,6vh,56px) !important;position:relative;z-index:5;}
  .gate-screen .g-input{position:relative;z-index:5;font-size:16px !important;}
}

/* ============================================================
   REFINEMENTS — round 39 — mobile-only tweaks
   ============================================================ */
@media (max-width:880px){
  /* hamburger menu links smaller (placeholder size — will match screenshot) */
  .topnav__links.is-open a{font-size:12px !important;letter-spacing:.26em !important;}

  /* itinerary intro: stack the two paragraphs in a single column on mobile */
  .pin__head--itin .cols{column-count:1 !important;max-width:none !important;}
  .pin__head--itin .cols p{text-align:left !important;margin:0 0 1em !important;}
  .pin__head--itin .cols p:last-child{margin-bottom:0 !important;}
}

/* ============================================================
   REFINEMENTS — round 40 — recommended drivers (travel section)
   ============================================================ */
.drivers-list{margin-top:clamp(22px,2.6vw,34px);}
.drivers-label{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:#6E655A;margin:0 0 12px;}
.driver-line{margin-bottom:clamp(12px,1.5vw,20px);}
.driver-name{font-family:var(--display);color:var(--ink);font-size:16px;display:block;line-height:1.2;}
.driver-name:hover{font-style:italic;}
.driver-meta{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.03em;color:#6E655A;margin-top:4px;line-height:1.55;}
.driver-meta a{color:var(--green);}
.driver-meta a:hover{opacity:.6;}

/* ============================================================
   REFINEMENTS — round 44 — splash: single full-bleed cover video
   (supersedes the conflicting rounds 41–43; high specificity so
   nothing overrides it)
   ============================================================ */
.gate-screen .gate-photo{position:absolute !important;inset:0 !important;display:block !important;overflow:hidden !important;background:#1b1714 !important;}
.gate-screen .gate-photo .gate-vid--x{display:block !important;}
.gate-screen .gate-photo .gate-vid{
  position:absolute !important;top:0 !important;height:100% !important;width:34% !important;max-width:none !important;
  object-fit:cover !important;object-position:center !important;
}
.gate-screen .gate-photo .gate-vid:nth-child(1){left:0 !important;}
.gate-screen .gate-photo .gate-vid:nth-child(2){left:33% !important;}
.gate-screen .gate-photo .gate-vid:nth-child(3){left:66% !important;}

/* ============================================================
   REFINEMENTS — round 45 — hero video card + blue title; unlock choreography
   ============================================================ */
.lander__hero{position:relative;width:100%;margin:0 auto clamp(22px,3vw,40px);}
.lander__vid{display:block;margin:0 auto;width:clamp(240px,27vw,380px);aspect-ratio:608 / 1080;object-fit:cover;background:#E8E2D8;}
.lander__title{position:absolute !important;top:24% !important;left:0 !important;right:0 !important;margin:0 !important;text-align:center;z-index:3;line-height:0;}
.lander__title-img{width:clamp(320px,46vw,600px) !important;display:inline-block;mix-blend-mode:normal !important;}

/* while unlocking: reveal cream by fading the dark overlay + gate-photo bg,
   and brighten the center video as it shrinks */
.gate-screen.unlocking .gate-photo{background:transparent !important;}
.gate-screen.unlocking .gate-photo::after{opacity:0 !important;transition:opacity 1s ease;}
.gate-screen.unlocking .gate-vid{filter:none !important;}

/* ============================================================
   REFINEMENTS — round 46 — hero title higher; RSVP block lower
   ============================================================ */
.lander__title{top:15% !important;}
.lander .rsvp-btn{margin-top:clamp(48px,7vw,96px) !important;}

/* ============================================================
   REFINEMENTS — round 47 — match new crop aspect; title higher
   ============================================================ */
.lander__vid{aspect-ratio:596 / 1072 !important;}
.lander__title{top:8% !important;}

/* ============================================================
   REFINEMENTS — round 48 — gate title blue overlay (for crossfade)
   ============================================================ */
.g-title{position:relative;display:inline-block;}
.g-title-blue{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:auto !important;opacity:0;mix-blend-mode:normal !important;}


/* ============================================================
   VERSION B — reversed: cream/charcoal splash -> 3-video/cream hero
   ============================================================ */
.gate-photo{display:none !important;}
.gate-screen{background:var(--cream) !important;}
.gate-screen .g-input{color:var(--ink) !important;border-bottom-color:rgba(41,37,37,.55) !important;}
.gate-screen .g-input::placeholder{color:rgba(41,37,37,.5) !important;}

.lander--b{padding:0 24px clamp(52px,7vw,104px) !important;text-align:center;min-height:0 !important;}
.lander--b .lander__hero{position:relative;left:50%;margin-left:-50vw;width:100vw;height:100vh;height:100dvh;margin-bottom:clamp(40px,6vw,88px);overflow:hidden;}
.lander--b .lander__vids{position:absolute;inset:0;overflow:hidden;background:#1b1714;}
.lander--b .lander__vid{position:absolute !important;top:0 !important;height:100% !important;width:34% !important;object-fit:cover !important;object-position:center !important;max-width:none !important;margin:0 !important;aspect-ratio:auto !important;background:transparent !important;}
.lander--b .lander__vid:nth-child(1){left:0 !important;}
.lander--b .lander__vid:nth-child(2){left:33% !important;}
.lander--b .lander__vid:nth-child(3){left:66% !important;}
.lander--b .lander__title{position:absolute !important;top:40% !important;left:0 !important;right:0 !important;text-align:center;z-index:3;margin:0 !important;line-height:0;}
.lander--b .lander__title-img{width:clamp(340px,54vw,660px) !important;mix-blend-mode:normal !important;}

/* ---- version B refinement: contained video box + single video on mobile ---- */
.lander--b .lander__hero{
  position:relative !important;left:auto !important;margin:clamp(6px,1.5vh,20px) auto clamp(40px,6vw,84px) !important;
  width:100% !important;max-width:1180px !important;height:auto !important;aspect-ratio:5 / 3 !important;overflow:hidden !important;
}
.lander--b .lander__title{top:22% !important;}

@media (max-width:880px){
  .lander--b .lander__hero{aspect-ratio:596 / 1072 !important;max-width:min(78vw,340px) !important;}
  .lander--b .lander__vid:nth-child(1),
  .lander--b .lander__vid:nth-child(3){display:none !important;}
  .lander--b .lander__vid:nth-child(2){left:0 !important;width:100% !important;}
  .lander--b .lander__title{top:14% !important;}
}

/* ---- version B: drop the video box lower, clearly under the nav (per mockup) ---- */
.lander--b{padding-top:clamp(22px,3.5vw,52px) !important;}
.lander--b .lander__hero{margin-top:clamp(28px,4.5vw,72px) !important;}

/* ---- version B: force the splash videos hidden (higher specificity) ---- */
.gate-screen .gate-photo{display:none !important;}
.gate-screen{background:var(--cream) !important;}


/* ---- version B: separate cream backdrop (so the title doesn't flicker on reveal) ---- */
.gate-screen{background:transparent !important;}
.gate-bg{position:absolute;inset:0;background:var(--cream);z-index:0;}
.gate-screen__inner{position:relative;z-index:2;}
/* RSVP a touch closer to "Provence, France" */
.lander .rsvp-btn{margin-top:clamp(30px,4.5vw,60px) !important;}


/* ---- version B: cream title underneath (full opacity), charcoal on top fades off ---- */
.g-title-img{position:relative !important;z-index:2 !important;}
.g-title-blue{opacity:1 !important;z-index:1 !important;}

/* ---- FIX: keep the cream title overlay absolutely positioned (was stacking + pushing password down) ---- */
.g-title-img:not(.g-title-blue){position:relative !important;z-index:2 !important;}
.g-title-blue{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:auto !important;z-index:1 !important;opacity:1 !important;}


/* ---- eyebrow: elegant French script -> English caps cross-dissolve ---- */
.eyebrow--fx{position:relative;display:inline-block;}
.eyebrow--fx .eyebrow__en{display:inline-block;opacity:0;transition:opacity 1.5s ease;}
.eyebrow--fx .eyebrow__fr{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;
  opacity:1;transition:opacity 1.5s ease;
  font-family:var(--script);text-transform:none;letter-spacing:.02em;font-size:1.9em;line-height:1;color:inherit;
}
.eyebrow--fx.is-en .eyebrow__en{opacity:1;}
.eyebrow--fx.is-en .eyebrow__fr{opacity:0;}


/* ---- eyebrow: hand-written left-to-right reveal, then dissolve to caps ---- */
.eyebrow--fx .eyebrow__fr{clip-path:inset(0 100% -20% 0);opacity:1 !important;transition:clip-path 1.9s cubic-bezier(.55,.08,.4,.98), opacity 1s ease;}
.eyebrow--fx.is-writing .eyebrow__fr{clip-path:inset(0 -2% -20% 0);}
.eyebrow--fx.is-en .eyebrow__fr{opacity:0 !important;}
.eyebrow--fx .eyebrow__en{transition:opacity 1s ease;}
.eyebrow--fx.is-en .eyebrow__en{opacity:1;}

/* RSVP nav anchor lands toward the middle of the screen */
#rsvp{scroll-margin-top:clamp(150px,36vh,380px) !important;}

.g-title-blue{display:none !important;}


/* ---- eyebrow: faster write, aligned to the English eyebrow position ---- */
.eyebrow--fx .eyebrow__fr{
  left:0 !important;right:auto !important;top:50% !important;transform:translateY(-50%) !important;transform-origin:left center !important;
  font-size:1.55em !important;
  transition:clip-path 1.35s cubic-bezier(.5,.06,.4,.98), opacity 1s ease !important;
}
.eyebrow--fx.is-writing .eyebrow__fr{clip-path:inset(0 -2% -25% 0) !important;}


/* ---- eyebrow: hug content so the centered script centers on the English; bigger ---- */
.eyebrow--fx{display:inline-block !important;}
.eyebrow--fx .eyebrow__fr{left:50% !important;right:auto !important;transform:translate(-50%,-50%) !important;transform-origin:center !important;font-size:1.75em !important;}

/* ---- dainty dotted travel path (replaces the straight connector in Travel) ---- */
#travel .hrow::before{display:none !important;}
.flightpath{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;}
.flightpath .fpPath{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:8 9;stroke-linecap:round;}


/* ---- eyebrow: bigger; left-aligned to the header in split sections, centered in pin heads ---- */
.eyebrow--fx .eyebrow__fr{left:0 !important;right:auto !important;transform:translateY(-50%) !important;transform-origin:left center !important;font-size:2.1em !important;}
.pin__head .eyebrow--fx .eyebrow__fr{left:50% !important;transform:translate(-50%,-50%) !important;transform-origin:center !important;}


/* ---- eyebrow: elegant hand-off — script dissolves w/ soft blur, caps settle in just after ---- */
.eyebrow--fx .eyebrow__fr{transition:clip-path 1.35s cubic-bezier(.5,.06,.4,.98), opacity .5s ease, filter .5s ease !important;}
.eyebrow--fx.is-en .eyebrow__fr{opacity:0 !important;filter:blur(4px) !important;}
.eyebrow--fx .eyebrow__en{opacity:0;transform:translateY(3px);transition:opacity .8s ease .3s, transform .8s cubic-bezier(.2,.7,.3,1) .3s !important;}
.eyebrow--fx.is-en .eyebrow__en{opacity:1 !important;transform:translateY(0) !important;}


/* ---- more breathing room before & after the hero date/venue/RSVP block ---- */
.lander--b .lander__date{margin-top:clamp(60px,8vw,124px) !important;}
.lander--b{padding-bottom:clamp(120px,15vw,210px) !important;}

/* ---- eyebrow: slower, more luxurious script -> caps hand-off ---- */
.eyebrow--fx .eyebrow__fr{transition:clip-path 2.15s cubic-bezier(.33,.02,.2,1), opacity .95s ease, filter .95s ease !important;}
.eyebrow--fx.is-en .eyebrow__fr{opacity:0 !important;filter:blur(5px) !important;}
.eyebrow--fx .eyebrow__en{transition:opacity 1.35s ease .55s, transform 1.35s cubic-bezier(.2,.7,.3,1) .55s !important;}

/* ---- itinerary: dainty dotted connector (thin, short dashes) ---- */
.pin--itin .hrow::before{height:1px !important;background:repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 8px) !important;}


/* ---- itinerary: same dotted line as Travel but daintier (thinner, shorter dashes), reveals on scroll ---- */
#itinerary .hrow::before{display:none !important;}
.flightpath--fine .fpPath{stroke-width:1 !important;stroke-dasharray:3.5 6 !important;}


/* ---- full-bleed grayscale photo marquee (continuous drift, no gaps) ---- */
.gallery-marquee{overflow:hidden;background:#000;line-height:0;width:100vw;margin-left:calc(50% - 50vw);margin-top:0;}
.gallery-marquee__track{display:flex;width:max-content;animation:galDrift 220s linear infinite;}
.gallery-marquee__track img{height:clamp(260px,32vw,460px);width:auto;display:block;filter:grayscale(1);}
@keyframes galDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gallery-marquee:hover .gallery-marquee__track{animation-play-state:paused;}


/* ---- footer sentence: body-copy scale (not the uppercase UI treatment) ---- */
.footer-sand span{font-family:var(--body);font-size:clamp(13px,1vw,15px);line-height:1.6;color:var(--body-ink);letter-spacing:normal;text-transform:none;}
/* ---- make the RSVP page link in the FAQ clearly clickable ---- */
.faq__a a{text-decoration:underline;text-underline-offset:2px;color:inherit;}
.faq__a a:hover{opacity:.6;}


/* =========================================================
   MOBILE FIXES — horizontal swipe, itinerary spacing, marquee
   ========================================================= */
@media (max-width:880px){
  /* pinned sections fall back to native horizontal swiping */
  .pin{height:auto !important;}
  .pin__sticky{position:static !important;height:auto !important;}
  .pin__viewport{
    overflow-x:auto !important;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
  }
  .pin__track{transform:none !important;width:max-content !important;}
  .pin__track .hcol{scroll-snap-align:start;}
  .pin__progress{display:none !important;}

  /* itinerary: more air above the date/title and below the paragraph */
  .pin--itin .hrow{--hh:92px !important;}
  .pin--itin .hcol__head{padding-top:24px !important;}
  .pin--itin .hcol__rest{padding-bottom:40px !important;}
}

/* marquee: never latch the pause on touch devices (only pause for real cursors) */
.gallery-marquee:hover .gallery-marquee__track{animation-play-state:running;}
@media (hover:hover) and (pointer:fine){
  .gallery-marquee:hover .gallery-marquee__track{animation-play-state:paused;}
}


/* ---- more air before & after the b&w photo marquee ---- */
.gallery-marquee{margin-top:clamp(70px,9vw,130px) !important;margin-bottom:clamp(42px,5.2vw,82px) !important;}

/* =========================================================
   MOBILE — make it obvious the timelines swipe sideways
   ========================================================= */
@media (max-width:880px){
  /* next card peeks in from the right so there's visibly more */
  .pin__track .hcol{flex:0 0 min(78vw,340px) !important;}

  /* soft fade at the right edge, hinting content continues */
  .pin__sticky{position:relative !important;}
  .pin__sticky::after{
    content:"";position:absolute;top:0;right:0;width:42px;height:100%;
    background:linear-gradient(to left,var(--cream),rgba(252,247,241,0));
    pointer-events:none;z-index:3;
  }

  /* gently nudging swipe hint under each heading */
  .pin__head{position:relative;}
  .pin__head::after{
    content:"Swipe for more →";
    display:block;margin-top:16px;
    font-family:var(--ui);font-weight:600;text-transform:uppercase;
    letter-spacing:.2em;font-size:10px;color:#8A8378;
    animation:swipeHint 2.4s ease-in-out infinite;
    transition:opacity .5s ease;
  }
  .pin.has-swiped .pin__head::after{opacity:0;animation:none;}
  @keyframes swipeHint{
    0%,100%{opacity:.5;transform:translateX(0)}
    50%{opacity:1;transform:translateX(5px)}
  }
}


/* ---- MOBILE hero fixes: centred logo + more air under the nav ---- */
@media (max-width:880px){
  /* logo min-width (340px) exceeded the hero box (<=340px) -> overflowed right and read off-centre */
  .lander--b .lander__title-img{width:80% !important;min-width:0 !important;max-width:80% !important;}
  /* more breathing room between the hamburger and the video */
  .lander--b .lander__hero{margin-top:clamp(40px,11vw,64px) !important;}
}


/* ---- FAQ: no hairline between a question and its answer, none under the last question ---- */
.faq__q,.faq__a,.faq__a p{border:0 !important;box-shadow:none !important;}
.faq__item:last-child{border-bottom:0 !important;}

/* ---- MOBILE: start the timelines in line with the body copy (24px head pad + 24px copy margin) ---- */
@media (max-width:880px){
  .pin__track{padding-left:48px !important;padding-right:24px !important;}
  .flightpath{left:48px !important;width:calc(100% - 48px) !important;}
}


/* ---- MOBILE: more white space above each section's eyebrow / between sections ---- */
@media (max-width:880px){
  .eyebrow{margin-top:clamp(30px,8vw,60px) !important;}
  #travel{padding-top:clamp(40px,10vw,72px) !important;}
  #itinerary{padding-top:clamp(44px,11vw,80px) !important;}

  /* timeline cards align with the section's body copy (24px head pad + 24px copy margin) */
  .pin__track{padding-left:48px !important;padding-right:24px !important;}
  .pin__track > .hcol:first-child{margin-left:0 !important;}
  .flightpath{left:48px !important;width:calc(100% - 48px) !important;}
}


/* ---- MOBILE: space AFTER body copy, mirroring the space above the eyebrows ---- */
@media (max-width:880px){
  .split2{padding-bottom:clamp(32px,8vw,60px) !important;}
  .blockbody:last-of-type{margin-bottom:clamp(24px,6vw,44px) !important;}
  .pin__head--itin .cols{margin-bottom:clamp(30px,8vw,56px) !important;}
  #travel .pin__head{margin-bottom:clamp(30px,8vw,56px) !important;}
  .hcol__rest{padding-bottom:clamp(26px,7vw,48px) !important;}
}


/* ============================================================
   DRESS CODE — interactive blue box (day toggle + popping grid)
   ============================================================ */
.dress-panel{
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(28px,3vw,52px) clamp(22px,2.4vw,44px) clamp(20px,2vw,36px);
  gap:clamp(10px,1.2vw,18px);height:100%;
}
.dress-day{font-family:var(--display);font-style:italic;font-size:clamp(13px,1.1vw,15px);line-height:1.2;color:var(--ink);text-align:center;margin:0;}
.dress-attire{font-family:var(--display);font-size:clamp(12.5px,1.02vw,15px);line-height:1.32;color:var(--ink);opacity:.82;text-align:center;max-width:34ch;min-height:2.64em;margin:0 auto;}
.dress-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;width:100%;max-width:min(100%,600px);margin-top:clamp(6px,1vw,16px);}
.dress-cell{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:0;}
.dress-grid.no-anim .dress-cell img{transition:none !important;}
.dress-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.3,1);}
.dress-cell.is-on img{opacity:1;transform:scale(1);}
.dress-dots{display:flex;gap:9px;margin-top:auto;padding-top:clamp(22px,3vw,40px);}
.dress-dot{width:7px;height:7px;border-radius:50%;border:none;background:rgba(41,37,37,.25);cursor:pointer;padding:0;transition:background .35s ease,transform .3s ease;}
.dress-dot:hover{background:rgba(41,37,37,.5);}
.dress-dot.is-active{background:var(--ink);}


/* ---- dress-code day toggle: registry "Fig" treatment (small italic serif) ---- */
.dress-tabs{display:flex;gap:clamp(16px,2vw,30px);margin-top:auto;padding-top:clamp(16px,1.8vw,24px);align-items:baseline;}
.dress-tab{background:none;border:none;cursor:pointer;padding:0;line-height:1;
  font-family:var(--display);font-style:italic;font-size:clamp(13px,1.1vw,16px);color:var(--ink);
  opacity:.34;transition:opacity .3s ease;}
.dress-tab:hover{opacity:.7;}
.dress-tab.is-active{opacity:1;}


/* ---- dress-code: let the panel grow so the enlarged collage never clips the dots ---- */
#dress-code .split2__media{overflow:hidden !important;height:auto !important;}
#dress-code .dress-panel{height:100% !important;}


/* ---- dress-code: attire type heading between the day caption and the details ---- */
.dress-type{font-family:var(--display);font-size:clamp(16px,1.5vw,21px);line-height:1.2;color:var(--ink);text-align:center;margin:2px 0 0;}


/* ---- dress-code text: all one size; day italic, attire-type bold, details normal ---- */
.dress-day{font-family:var(--display) !important;font-style:italic !important;font-weight:400 !important;font-size:clamp(13px,1.15vw,15.5px) !important;}
.dress-type{font-family:var(--display) !important;font-style:normal !important;font-weight:700 !important;font-size:clamp(13px,1.15vw,15.5px) !important;color:var(--ink) !important;line-height:1.32 !important;margin:3px 0 0 !important;}
.dress-attire{font-weight:400 !important;font-style:normal !important;font-size:clamp(13px,1.15vw,15.5px) !important;opacity:1 !important;margin-top:-13px !important;max-width:min(100%,640px) !important;min-height:0 !important;}


/* ---- MOBILE: taller photo marquee + more space between itinerary and registry ---- */
@media (max-width:880px){
  .gallery-marquee__track img{height:clamp(380px,72vw,500px) !important;}
  #registry{margin-top:clamp(64px,16vw,130px) !important;}
}


/* ---- itinerary date line: italic serif, matching the italics used elsewhere ---- */
.hcol__date{font-family:var(--body) !important;font-style:normal !important;font-weight:400 !important;text-transform:none !important;letter-spacing:normal !important;font-size:clamp(13px,1vw,15px) !important;color:var(--body-ink) !important;}


/* ---- more space after the itinerary intro paragraphs, before the timeline scrolls ---- */
.pin__head--itin .cols{margin-bottom:clamp(36px,4.6vw,72px) !important;}
@media (max-width:880px){ .pin__head--itin .cols{margin-bottom:clamp(58px,14vw,102px) !important;} }

/* marquee: on mobile the itinerary top-padding adds a lot below it, so trim its bottom margin further */
@media (max-width:880px){ .gallery-marquee{margin-bottom:clamp(12px,3vw,26px) !important;} }


/* ---- body copy up ~2px for readability (EB Garamond runs small) ---- */
.split2 .blockbody{font-size:clamp(14.5px,1.05vw,16.5px) !important;line-height:1.5 !important;}
.cols p,.lead,.faq__a p,.hcol__body,.hcol__trans{font-size:clamp(15px,1.1vw,17px) !important;line-height:1.55 !important;}
.blockbody{line-height:1.55;}
/* give the locked equal-height split blocks a touch more room so nothing clips at the larger size */
@media (min-width:881px){ .split2{grid-template-rows:clamp(560px,64vw,710px) !important;} }


/* ---- unify ALL body copy to a single size ---- */
.blockbody, .split2 .blockbody, .cols p, .lead, .faq__a p, .hcol__body, .hcol__trans{
  font-size:clamp(15px,1.1vw,17px) !important;line-height:1.55 !important;
}
@media (min-width:881px){ .split2{grid-template-rows:clamp(580px,66vw,740px) !important;} }

/* ---- more space after the itinerary intro paragraphs, before the timeline ---- */
.pin__head--itin .cols{margin-bottom:clamp(50px,6vw,92px) !important;}
@media (max-width:880px){ .pin__head--itin .cols{margin-bottom:clamp(74px,18vw,132px) !important;} }


/* ---- let split blocks size to their content (no clipping at the larger body size);
        blue (dress) & black (registry) are matched to each other via JS instead ---- */
@media (min-width:881px){ .split2{grid-template-rows:none !important;} }

/* ---- desktop: real space after the itinerary intro before the timeline (pinned layout) ---- */
@media (min-width:881px){ .pin--itin.is-pinned .pin__sticky{gap:clamp(74px,9vh,150px) !important;} }


/* ---- itinerary "break" card: ornate framed intro to the optional days ---- */
.hcol--break{display:flex;align-items:center;background:var(--cream);}
.hcol--break::before{display:none !important;}   /* no timeline dot */
.hcol__break-frame{position:relative;border:1px solid var(--ink);padding:clamp(24px,2.4vw,40px) clamp(22px,2.2vw,36px);}
.hcol__break-frame::before{content:"";position:absolute;inset:5px;border:1px solid var(--ink);opacity:.42;pointer-events:none;}
.hcol__break-body{font-family:var(--body);font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:var(--body-ink);margin:0;}
@media (min-width:881px){ .pin--itin .hcol--break{flex-basis:clamp(340px,34vw,470px) !important;margin-right:clamp(72px,8vw,150px) !important;} }
@media (max-width:880px){ .hcol--break{margin-right:clamp(24px,6vw,44px) !important;} }


/* keep the registry polaroid a sensible size regardless of block height */
.reg-slide img{max-height:clamp(360px,40vw,520px) !important;}


/* full-bleed the half-page split sections so images reach the true edges (matches hero/marquee) */
html,body{overflow-x:clip;}
@media (min-width:881px){ .split2{width:100vw !important;margin-left:calc(50% - 50vw) !important;} }


/* ---- dainty top arrows replacing the dots (registry + dress code) ---- */
.dress-dots,.reg-dots{display:none !important;}
.dress-arrows{display:flex;gap:clamp(22px,2.4vw,38px);justify-content:center;align-items:center;margin:3px 0 2px;}
.dress-arrow{background:none;border:none;cursor:pointer;padding:2px 6px;font-size:clamp(15px,1.4vw,19px);line-height:1;color:var(--ink);opacity:.5;transition:opacity .3s ease;}
.dress-arrow:hover{opacity:1;}
.reg-arrows{position:absolute;top:clamp(48px,5.6vw,80px);left:0;right:0;z-index:5;display:flex;gap:clamp(22px,2.4vw,38px);justify-content:center;align-items:center;}
.reg-toparrow{background:none;border:none;cursor:pointer;padding:2px 6px;font-size:clamp(15px,1.4vw,19px);line-height:1;color:var(--cream);opacity:.7;transition:opacity .3s ease;}
.reg-toparrow:hover{opacity:1;}


/* ---- dainty pointed side carets (CSS-drawn) on the registry & dress-code blocks ---- */
#dress-code .dress-panel{position:relative;}
.side-arrow{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;
  padding:10px 12px;line-height:0;z-index:6;opacity:.55;transition:opacity .3s ease;}
.side-arrow:hover{opacity:1;}
.side-arrow::before{content:"";display:block;width:clamp(6px,0.7vw,9px);height:clamp(6px,0.7vw,9px);
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;}
.side-arrow--l::before{transform:rotate(135deg);}
.side-arrow--r::before{transform:rotate(-45deg);}
.side-arrow--l{left:clamp(6px,1vw,22px);}
.side-arrow--r{right:clamp(6px,1vw,22px);}
#registry .side-arrow{color:var(--cream);}
#dress-code .side-arrow{color:var(--ink);}

#dress-code .dress-panel{justify-content:center !important;}


/* ---- half-page text columns: top-aligned, lowered a bit ---- */
.split2__text{justify-content:flex-start !important;padding-top:clamp(64px,8vw,120px) !important;}


/* ---- RSVP label grows elegantly on hover ---- */
.rsvp-btn__label{transform-origin:center;transition:color .45s ease, transform .5s cubic-bezier(.2,.7,.3,1) !important;}
.rsvp-btn:hover .rsvp-btn__label{transform:scale(1.14) !important;}


/* ---- itinerary break card: serpentine (Chippendale tray) frame instead of a square border ---- */
.hcol__break-frame{border:none !important;padding:clamp(34px,3.4vw,56px) clamp(38px,4vw,64px) !important;}
.hcol__break-frame::before{display:none !important;}
.hcol__break-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:var(--ink);}
.hcol__break-svg path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;}
.hcol__break-svg .in{opacity:.42;}

/* ---- eyebrow: French script down a touch (per Jordan) ---- */
.eyebrow--fx .eyebrow__fr{font-size:1.9em !important;}

/* ---- break card: ornate traced cartouche frame (Jordan's SVG) ---- */
.hcol--break{background:transparent !important;}
.pin--itin .hcol--break{flex-basis:clamp(320px,33vw,440px) !important;}
.hcol__break-frame{border:none !important;aspect-ratio:600 / 887;width:100%;display:flex !important;align-items:center;justify-content:center;padding:23% 17% !important;box-sizing:border-box;}
.hcol__break-frame::before{display:none !important;}
.hcol__break-svg{position:absolute;inset:0;width:100%;height:100%;color:var(--ink);pointer-events:none;overflow:visible;}
.hcol__break-svg path{fill:currentColor !important;stroke:none !important;opacity:1 !important;}
.hcol__break-body{position:relative;z-index:1;text-align:center;font-size:clamp(12px,0.95vw,14px) !important;line-height:1.5 !important;}

/* ---- tighten gap: itinerary sits closer under the B&W scroll ---- */
.gallery-marquee{margin-bottom:clamp(18px,2.4vw,38px) !important;}

/* ---- break card frame: rotated to horizontal (landscape) ---- */
.pin--itin .hcol--break{flex-basis:clamp(380px,40vw,540px) !important;}
.hcol__break-frame{aspect-ratio:887 / 600 !important;padding:15% 13% !important;}

/* ---- break card: bigger frame, mask dotted line behind, standard body size ---- */
.pin--itin .hcol--break{flex-basis:clamp(480px,50vw,680px) !important;background:var(--cream) !important;}
.hcol__break-body{font-size:clamp(15px,1.1vw,17px) !important;line-height:1.6 !important;}

/* ---- break card: revert to double-rectangle frame ---- */
.hcol--break{background:var(--cream) !important;display:flex !important;align-items:center !important;}
.pin--itin .hcol--break{flex-basis:clamp(340px,34vw,470px) !important;}
.hcol__break-frame{position:relative !important;border:1px solid var(--ink) !important;aspect-ratio:auto !important;width:auto !important;display:block !important;padding:clamp(24px,2.4vw,40px) clamp(22px,2.2vw,36px) !important;}
.hcol__break-frame::before{content:"" !important;display:block !important;position:absolute !important;inset:5px !important;border:1px solid var(--ink) !important;opacity:.42 !important;pointer-events:none !important;}
.hcol__break-body{font-size:clamp(15px,1.1vw,17px) !important;line-height:1.6 !important;text-align:left !important;}

/* ---- underline the RSVP link in the itinerary break card ---- */
.hcol__break-body a{text-decoration:underline !important;text-underline-offset:2px;}

/* ---- itinerary cards: broken-out meta fields (Location / Time / Transportation) ---- */
.hcol__meta{margin:0 0 clamp(12px,1.2vw,18px);}
.hcol__meta p{font-family:var(--body);font-size:clamp(14px,1vw,15.5px);line-height:1.45;color:var(--body-ink);margin:0 0 6px;}
.hcol__meta p:last-child{margin-bottom:0;}
.hcol__meta strong{font-weight:600;color:var(--ink);}

/* ---- itinerary meta: match body-copy width so lines wrap in line with paragraph ---- */
.hcol__meta{max-width:clamp(310px,28vw,420px) !important;}