:root{color-scheme:only light}
/* ==========================================================================
   Henry & Jolie — v2 · trilingual, scroll-cinematic
   Progressive enhancement: everything is visible with no JS; the .js class
   (added by head.js) unlocks sealed/hidden/scroll states.
   ========================================================================== */
:root{
  --ivory:#F5EFE6; --ivory-2:#EFE7DA; --paper:#FBF7F0;
  --ink:#3B322A; --ink-2:#6A5E51; --ink-3:#9C8F7E;
  --brown:#8C6A4E; --rose:#C99C90; --champagne:#C8B48C; --line:#DCCFB7; --black:#1A1714;
  --font-script:'Pinyon Script', cursive;
  --font-display:'Cormorant Garamond', 'Songti SC', 'Noto Serif SC', Georgia, serif;
  --font-body:'EB Garamond', 'Songti SC', 'Noto Serif SC', Georgia, serif;
  --font-ui:'Be Vietnam Pro', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --maxw:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--font-body); font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-sealed{overflow:hidden; height:100svh}
.js body.is-sealed{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
::selection{background:var(--rose); color:#fff}

.wrap{width:min(100% - 44px, var(--maxw)); margin-inline:auto}
.wrap--narrow{width:min(100% - 44px, 640px)}
.eyebrow{
  font-family:var(--font-ui); font-weight:400; letter-spacing:.34em; text-transform:uppercase;
  font-size:11.5px; color:var(--brown); text-align:center; margin:0 0 22px; padding-left:.34em;
}
.eyebrow--light{color:rgba(255,255,255,.8)}
.amp{font-family:var(--font-script); font-style:normal}

/* ---------- progress bar ---------- */
.progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:120;
  background:linear-gradient(90deg,var(--champagne),var(--brown)); transition:width .1s linear}

/* ---------- top bar ---------- */
.topbar{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center;
  gap:18px; padding:14px clamp(16px,4vw,34px);
  background:linear-gradient(to bottom, rgba(245,239,230,.92), rgba(245,239,230,0));
  backdrop-filter:blur(6px); transform:translateY(-102%); transition:transform .5s var(--ease-out)}
.topbar.is-show{transform:none}
.topbar__brand{font-family:var(--font-script); font-size:26px; color:var(--ink); line-height:1}
.topbar__nav{display:none; gap:22px; margin-left:auto; font-family:var(--font-ui); font-weight:300;
  letter-spacing:.12em; text-transform:uppercase; font-size:11px; color:var(--ink-2)}
.topbar__nav a{position:relative; padding:4px 0}
.topbar__nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--brown); transition:right .3s var(--ease-out)}
.topbar__nav a:hover::after{right:0}
.topbar__tools{margin-left:auto; display:flex; align-items:center; gap:12px}
@media (min-width:820px){ .topbar__nav{display:flex} .topbar__tools{margin-left:24px} }

/* ---------- language switch ---------- */
.lang{display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.5)}
.lang__btn{border:none; background:none; cursor:pointer; width:34px; height:26px; border-radius:999px;
  font-family:var(--font-ui); font-weight:500; font-size:12px; letter-spacing:.04em; color:var(--ink-2);
  transition:.25s}
.lang__btn.is-active{background:var(--ink); color:var(--ivory)}
.lang--cover{border-color:rgba(60,50,42,.24)}

/* ---------- music ---------- */
.music{width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.5);
  cursor:pointer; display:grid; place-items:center}
.music__bars{display:flex; gap:2px; align-items:flex-end; height:13px}
.music__bars i{width:2px; height:5px; background:var(--brown); animation:eq 1s ease-in-out infinite}
.music__bars i:nth-child(2){animation-delay:.2s} .music__bars i:nth-child(3){animation-delay:.4s}
.music[aria-pressed="false"] .music__bars i{animation-play-state:paused; height:5px}
@keyframes eq{0%,100%{height:4px}50%{height:12px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  font-family:var(--font-ui); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  font-size:12px; border-radius:999px; border:1px solid transparent; padding:15px 30px; transition:.3s var(--ease-out)}
.btn__arrow{transition:transform .3s var(--ease-out)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn--seal{background:var(--ink); color:var(--ivory)}
.btn--seal:hover{background:var(--black)}
.btn--solid{background:var(--brown); color:#fff}
.btn--solid:hover{background:#7a5a40}
.btn--ghost{border-color:currentColor; color:var(--ink); background:transparent}
.btn--ghost:hover{background:var(--ink); color:var(--ivory); border-color:var(--ink)}
.btn--block{width:100%; margin-top:6px}

/* ==========================================================================
   COVER
   ========================================================================== */
.cover{position:fixed; inset:0; z-index:90; display:grid; place-items:center; text-align:center;
  background:radial-gradient(120% 90% at 50% 20%, var(--paper), var(--ivory) 70%);
  padding:40px 22px}
.js .cover{opacity:1}
.cover.is-open{animation:cover-out 1.1s var(--ease-out) forwards}
@keyframes cover-out{to{opacity:0; transform:scale(1.04); visibility:hidden}}
.cover__inner{position:relative; max-width:560px}
.cover__lang{position:fixed; top:20px; left:50%; transform:translateX(-50%)}
.cover__eyebrow{font-family:var(--font-ui); font-weight:300; letter-spacing:.4em; text-transform:uppercase;
  font-size:11px; color:var(--brown); margin:0 0 30px; padding-left:.4em}
.cover__names{font-family:var(--font-script); font-weight:400; font-size:clamp(58px,14vw,120px);
  line-height:1; color:var(--ink); margin:2px 0 0}
.cover__names .amp{font-size:.66em; color:var(--brown)}
.cover__date{font-family:var(--font-ui); font-weight:300; letter-spacing:.42em; font-size:13px;
  color:var(--brown); margin-top:20px; padding-left:.42em}
.cover__hint{position:absolute; bottom:26px; left:0; right:0; text-align:center; font-family:var(--font-ui);
  font-weight:300; letter-spacing:.3em; text-transform:uppercase; font-size:10px; color:var(--ink-3)}
.js .cover__eyebrow,.js .cover .monogram,.js .cover__names,.js .cover__date,.js .btn--seal,.js .cover__hint{opacity:0}
.js .cover__eyebrow{animation:fade-up 1s var(--ease-out) .25s both}
.js .cover .monogram{animation:fade-up 1.1s var(--ease-out) .35s both}
.js .cover__names{animation:fade-up 1.1s var(--ease-out) .5s both}
.js .cover__date{animation:fade-up 1.1s var(--ease-out) .66s both}
.js .btn--seal{animation:fade-up 1.1s var(--ease-out) .82s both; margin-top:38px}
.js .cover__hint{animation:fade-in 1s ease 1.5s both}

/* ---------- monogram (laurel) ---------- */
.monogram{position:relative; width:200px; height:150px; margin:0 auto 6px; color:var(--brown)}
.monogram__arch{width:100%; height:100%; overflow:visible}
.monogram__amp{position:absolute; left:0; right:0; top:52%; transform:translateY(-50%);
  font-family:var(--font-script); font-size:62px; color:var(--ink); line-height:1}
.monogram__initials{position:absolute; left:0; right:0; bottom:16px; font-family:var(--font-ui);
  font-weight:300; letter-spacing:.4em; font-size:13px; color:var(--brown); padding-left:.4em}
.monogram__initials .dot{color:var(--rose); margin:0 .15em}
.laurel-stem{stroke-dasharray:100; stroke-dashoffset:100; animation:draw 1.9s var(--ease-out) .4s forwards}
.laurel-stem--r{animation-delay:.55s}
.laurel-leaf{opacity:0; animation:fade-in .5s ease 1.15s forwards}
.arch-dot{opacity:0; animation:fade-in .6s ease 1.6s forwards}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative; height:100svh; min-height:560px; overflow:hidden; display:flex;
  align-items:flex-end; justify-content:center; text-align:center; color:#fff}
.hero__media{position:absolute; inset:0; overflow:hidden}
.hero__media img{width:100%; height:100%; object-fit:cover; transform:translate3d(0,var(--py,0),0) scale(1.14); will-change:transform}
.hero__scrim{position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,18,16,.72) 4%, rgba(20,18,16,.18) 42%, rgba(20,18,16,.30) 100%)}
.hero__content{position:relative; z-index:2; padding:0 22px clamp(78px,14vh,150px)}
.hero__eyebrow{font-family:var(--font-ui); font-weight:300; letter-spacing:.36em; text-transform:uppercase;
  font-size:11px; color:rgba(255,255,255,.86); margin:0 0 18px}
.hero__names{font-family:var(--font-script); font-weight:400; font-size:clamp(56px,13vw,108px);
  line-height:1; margin:0; text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero__names .amp{font-size:.66em; opacity:.9}
.hero__rule{display:flex; justify-content:center; margin:24px 0 18px}
.hero__rule span{width:64px; height:1px; background:rgba(255,255,255,.6); position:relative}
.hero__rule span::before{content:"❧"; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-size:12px; color:rgba(255,255,255,.8); background:transparent}
.hero__date{font-family:var(--font-ui); font-weight:300; letter-spacing:.4em; font-size:13px; margin:0}
.hero__place{font-family:var(--font-ui); font-weight:300; letter-spacing:.2em; font-size:12px;
  color:rgba(255,255,255,.78); margin:10px 0 0}
.hero__scroll{position:absolute; bottom:26px; left:0; right:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; gap:8px; font-family:var(--font-ui); font-weight:300; letter-spacing:.28em;
  text-transform:uppercase; font-size:9.5px; color:rgba(255,255,255,.7)}
.hero__scroll i{width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.7),transparent);
  animation:scrolldot 1.9s ease-in-out infinite}
@keyframes scrolldot{0%{transform:scaleY(0); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}
  50.1%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

/* ==========================================================================
   CHAPTERS (focus-blur "book page")
   ========================================================================== */
.chapter{position:relative; height:100svh; min-height:520px; overflow:hidden; display:flex;
  align-items:flex-end; justify-content:center; text-align:center; color:#fff}
.chapter__media{position:absolute; inset:0; overflow:hidden}
.chapter__media img{width:100%; height:100%; object-fit:cover; object-position:center 42%; transform:scale(1.06)}
.js .chapter__media img{transform:scale(1.16); filter:blur(11px) brightness(.62);
  transition:filter 1.2s var(--ease-out), transform 1.8s var(--ease-out)}
.js .chapter.is-focus .chapter__media img{filter:blur(0) brightness(.74); transform:scale(1.04)}
.chapter__veil{position:absolute; inset:0; background:linear-gradient(to top,
  rgba(18,15,13,.86) 0%, rgba(18,15,13,.66) 20%, rgba(18,15,13,.12) 52%, rgba(18,15,13,.04) 74%, rgba(18,15,13,.22) 100%)}
.chapter__quote{position:relative; z-index:2; margin:0 0 clamp(60px,12vh,112px); max-width:min(80%, 600px); padding:0 12px}
.chapter__mark{display:block; font-family:var(--font-display); font-size:46px; line-height:.3;
  color:var(--rose); opacity:.92; margin-bottom:6px}
.chapter__text{font-family:var(--font-display); font-weight:500; font-style:italic;
  font-size:clamp(20px,4.3vw,32px); line-height:1.36; letter-spacing:.01em; margin:0; color:#F6EFE8;
  text-shadow:0 2px 22px rgba(0,0,0,.55)}

/* ==========================================================================
   INVITE
   ========================================================================== */
.invite{padding:clamp(88px,15vh,150px) 0; text-align:center; background:var(--paper)}
.invite__req{font-family:var(--font-display); font-size:clamp(21px,3.4vw,28px); line-height:1.6;
  color:var(--ink); margin:0 auto 46px; max-width:30ch}
.couple{display:flex; align-items:center; justify-content:center; gap:clamp(18px,5vw,54px)}
.couple__side{flex:1; max-width:260px}
.couple__label{font-family:var(--font-ui); font-weight:300; letter-spacing:.28em; text-transform:uppercase;
  font-size:10.5px; color:var(--brown); margin:0 0 8px}
.couple__name{font-family:var(--font-display); font-weight:500; font-size:clamp(20px,3.4vw,27px);
  color:var(--ink); margin:0; line-height:1.25}
.couple__amp{font-family:var(--font-script); font-size:clamp(40px,7vw,60px); color:var(--rose); line-height:1}

/* ==========================================================================
   COUNTDOWN
   ========================================================================== */
.count{position:relative; padding:clamp(80px,13vh,132px) 0; text-align:center; color:#fff;
  background:linear-gradient(rgba(20,18,16,.90),rgba(20,18,16,.90)), var(--brown)}
.count__grid{display:flex; justify-content:center; gap:clamp(14px,5vw,46px); margin:6px 0 22px}
.count__cell{min-width:58px}
.count__num{display:block; font-family:var(--font-display); font-weight:500; font-size:clamp(38px,8vw,64px);
  line-height:1; color:#fff; font-variant-numeric:tabular-nums}
.count__unit{display:block; margin-top:8px; font-family:var(--font-ui); font-weight:300; letter-spacing:.24em;
  text-transform:uppercase; font-size:10px; color:rgba(255,255,255,.66)}
.count__note{font-family:var(--font-display); font-style:italic; font-size:clamp(16px,2.6vw,20px);
  color:rgba(255,255,255,.82); margin:0}

/* ==========================================================================
   MOMENTS · corridor gallery (horizontal scroll-snap = "walk the hall")
   ========================================================================== */
.moments{padding:clamp(84px,14vh,140px) 0; background:var(--ivory)}
.moments__hint{font-family:var(--font-ui); font-weight:300; letter-spacing:.2em; text-transform:uppercase;
  font-size:10.5px; color:var(--ink-3); text-align:center; margin:-8px 0 30px}
.corridor{display:flex; gap:clamp(14px,3vw,26px); overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding:6px clamp(22px,8vw,12vw) 24px; scrollbar-width:none}
.corridor::-webkit-scrollbar{display:none}
.shot{flex:0 0 auto; width:clamp(230px,64vw,320px); aspect-ratio:2/3; margin:0; scroll-snap-align:center;
  position:relative; overflow:hidden; cursor:pointer; background:var(--ivory-2);
  border-radius:50% 50% 8px 8px / 20% 20% 4px 4px;
  box-shadow:0 14px 34px -18px rgba(40,30,20,.5); transition:transform .5s var(--ease-out)}
.shot::after{content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.5);
  border-radius:inherit; pointer-events:none; mix-blend-mode:overlay}
.shot img{width:100%; height:100%; object-fit:cover}
.shot:hover{transform:translateY(-4px)}
@media (min-width:820px){ .shot:hover{transform:translateY(-8px) scale(1.01)} }

/* ==========================================================================
   DETAILS
   ========================================================================== */
.details{position:relative; padding:clamp(96px,16vh,170px) 0; overflow:hidden; color:#fff; text-align:center}
.details__bg{position:absolute; inset:0; overflow:hidden}
.details__bg img{width:100%; height:100%; object-fit:cover; transform:translate3d(0,var(--py,0),0) scale(1.14); will-change:transform}
.details__veil{position:absolute; inset:0; background:linear-gradient(rgba(18,15,13,.66),rgba(18,15,13,.78))}
.details__card{position:relative; z-index:2}
.details__card .eyebrow{color:rgba(255,255,255,.82)}
.details__venue{font-family:var(--font-script); font-weight:400; font-size:clamp(44px,9vw,72px);
  line-height:1; margin:0 0 14px}
.details__hall{font-family:var(--font-display); font-size:clamp(18px,3vw,23px); margin:0 0 4px}
.details__addr{font-family:var(--font-ui); font-weight:300; letter-spacing:.06em; font-size:13.5px;
  color:rgba(255,255,255,.78); margin:0 0 30px}
.sched{display:inline-flex; flex-direction:column; gap:12px; margin:0 auto 30px; padding:22px 34px;
  border-top:1px solid rgba(255,255,255,.28); border-bottom:1px solid rgba(255,255,255,.28)}
.sched__row{display:flex; align-items:center; gap:14px; justify-content:center}
.sched__label{font-family:var(--font-ui); font-weight:300; letter-spacing:.24em; text-transform:uppercase;
  font-size:11px; color:rgba(255,255,255,.8); min-width:96px; text-align:right}
.sched__dot{width:4px; height:4px; border-radius:50%; background:var(--rose)}
.sched__time{font-family:var(--font-display); font-weight:500; font-size:20px; min-width:96px; text-align:left}
.details__presence{font-family:var(--font-display); font-style:italic; font-size:clamp(17px,2.8vw,21px);
  color:rgba(255,255,255,.9); max-width:26ch; margin:0 auto 30px}
.details__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.details__actions .btn--ghost{color:#fff; border-color:rgba(255,255,255,.6)}
.details__actions .btn--ghost:hover{background:#fff; color:var(--ink); border-color:#fff}

/* ==========================================================================
   DRESS CODE  (swatches only — no hex text)
   ========================================================================== */
.dress{padding:clamp(84px,14vh,140px) 0; text-align:center; background:var(--paper)}
.swatches{list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(20px,6vw,48px);
  padding:0; margin:0 0 26px}
.swatch{display:flex; flex-direction:column; align-items:center; gap:12px}
.swatch__chip{width:clamp(42px,11vw,58px); height:clamp(42px,11vw,58px); border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(60,50,42,.12); background:var(--ivory-2)}
.swatch__name{font-family:var(--font-ui); font-weight:300; letter-spacing:.16em; text-transform:uppercase;
  font-size:10.5px; color:var(--ink-2)}
.dress__line{font-family:var(--font-display); font-style:italic; font-size:clamp(16px,2.6vw,20px);
  color:var(--ink-2); margin:0}

/* ==========================================================================
   RSVP
   ========================================================================== */
.rsvp{position:relative; padding:clamp(90px,15vh,160px) 0; overflow:hidden}
.rsvp__bg{position:absolute; inset:0; overflow:hidden}
.rsvp__bg img{width:100%; height:100%; object-fit:cover; transform:translate3d(0,var(--py,0),0) scale(1.14); will-change:transform}
.rsvp__veil{position:absolute; inset:0; background:linear-gradient(rgba(245,239,230,.86),rgba(245,239,230,.94))}
.rsvp__card{position:relative; z-index:2; background:var(--paper); border:1px solid var(--line);
  border-radius:6px; padding:clamp(30px,6vw,52px); text-align:center;
  box-shadow:0 30px 70px -40px rgba(60,40,20,.4)}
.rsvp__title{font-family:var(--font-display); font-weight:500; font-size:clamp(26px,5vw,38px);
  color:var(--ink); margin:0 0 8px}
.rsvp__deadline{font-family:var(--font-ui); font-weight:300; letter-spacing:.08em; font-size:12.5px;
  color:var(--brown); margin:0 0 32px}
.field{text-align:left; margin-bottom:20px}
.field__label{display:block; font-family:var(--font-ui); font-weight:400; letter-spacing:.08em;
  font-size:12px; color:var(--ink-2); text-transform:uppercase; margin-bottom:9px}
.field__input{width:100%; font-family:var(--font-body); font-size:16px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:4px; padding:13px 15px; transition:border-color .2s}
.field__input:focus{outline:none; border-color:var(--brown)}
.field__area{resize:vertical; min-height:84px; line-height:1.55}
.field__err{display:block; min-height:15px; font-family:var(--font-ui); font-size:11.5px; color:#b0432f; margin-top:5px}
.field__input[aria-invalid="true"]{border-color:#c76a55}
.choice{display:flex; gap:10px}
.choice--3{flex-wrap:wrap}
.choice__opt{flex:1; min-width:88px; position:relative; cursor:pointer; text-align:center;
  font-family:var(--font-ui); font-weight:400; font-size:13px; color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; padding:11px 10px; transition:.2s; background:#fff}
.choice__opt input{position:absolute; opacity:0; inset:0; cursor:pointer}
.choice__opt:has(input:checked){background:var(--ink); color:var(--ivory); border-color:var(--ink)}
.choice__opt--yes:has(input:checked){background:var(--brown); border-color:var(--brown); color:#fff}
.choice__opt--no:has(input:checked){background:var(--ink-2); border-color:var(--ink-2); color:#fff}
.stepper{display:inline-flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:#fff}
.stepper__btn{width:46px; height:46px; border:none; background:none; cursor:pointer; font-size:22px; color:var(--brown); line-height:1}
.stepper__btn:hover{background:var(--ivory-2)}
.stepper__val{width:56px; text-align:center; border:none; font-family:var(--font-display); font-size:20px;
  color:var(--ink); background:none; -moz-appearance:textfield}
.stepper__val::-webkit-outer-spin-button,.stepper__val::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.check{display:flex; align-items:flex-start; gap:10px; text-align:left; font-family:var(--font-ui);
  font-weight:300; font-size:13px; color:var(--ink-2); margin:6px 0 22px; cursor:pointer}
.check input{margin-top:2px; accent-color:var(--brown); width:16px; height:16px; flex:0 0 auto}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.btn__spin{width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; display:none}
.is-sending .btn__label{opacity:.5}
.is-sending .btn__spin{display:inline-block; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.form__status{font-family:var(--font-ui); font-size:12.5px; color:#b0432f; margin:14px 0 0; min-height:16px}
.thanks{text-align:center}
.thanks__seal{font-size:40px; color:var(--rose); animation:pop .6s var(--ease-out) both}
@keyframes pop{from{transform:scale(0); opacity:0}to{transform:scale(1); opacity:1}}
.thanks__title{font-family:var(--font-script); font-size:clamp(34px,7vw,52px); color:var(--ink); margin:6px 0 12px; line-height:1}
.thanks__msg{font-family:var(--font-body); font-size:16.5px; color:var(--ink-2); margin:0 auto 26px; max-width:40ch; line-height:1.6}

/* ==========================================================================
   GUESTBOOK
   ========================================================================== */
.wishes{padding:clamp(84px,14vh,140px) 0; background:var(--ivory)}
.wishes__count{font-family:var(--font-display); font-style:italic; font-size:clamp(16px,2.6vw,20px);
  color:var(--brown); text-align:center; margin:-8px 0 34px}
.wishlist{columns:2 260px; column-gap:20px}
.wishes__empty{font-family:var(--font-display); font-style:italic; color:var(--ink-3); text-align:center;
  column-span:all; margin:0}
.wish{break-inside:avoid; background:var(--paper); border:1px solid var(--line); border-radius:5px;
  padding:20px 22px; margin:0 0 20px}
.wish--new{animation:fade-up .6s var(--ease-out) both; border-color:var(--rose)}
.wish__msg{font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--ink); margin:0 0 12px}
.wish__foot{display:flex; align-items:center; gap:9px; font-family:var(--font-ui); font-size:11.5px}
.wish__name{font-weight:500; letter-spacing:.04em; color:var(--ink)}
.wish__dot{width:3px; height:3px; border-radius:50%; background:var(--rose)}
.wish__side{font-weight:300; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{position:relative; padding:clamp(90px,15vh,150px) 22px; overflow:hidden; text-align:center; color:#fff}
.foot__bg{position:absolute; inset:0; overflow:hidden}
.foot__bg img{width:100%; height:100%; object-fit:cover; transform:scale(1.08)}
.foot__veil{position:absolute; inset:0; background:linear-gradient(rgba(18,15,13,.62),rgba(18,15,13,.78))}
.foot__inner{position:relative; z-index:2}
.monogram--foot{width:150px; height:112px; color:rgba(255,255,255,.9); margin:0 auto 6px}
.monogram--foot .monogram__amp{font-size:48px; color:#fff; top:56%}
.foot__names{font-family:var(--font-script); font-size:clamp(40px,9vw,64px); margin:0 0 16px; line-height:1}
.foot__names .amp{color:var(--rose)}
.foot__line{font-family:var(--font-ui); font-weight:300; letter-spacing:.2em; font-size:12.5px; margin:4px 0; color:rgba(255,255,255,.86)}
.foot__line--soft{color:rgba(255,255,255,.62)}
.foot__thanks{font-family:var(--font-display); font-style:italic; font-size:clamp(16px,2.8vw,20px); margin:22px auto 18px; max-width:34ch}
.foot__credit{font-family:var(--font-ui); font-weight:300; letter-spacing:.18em; text-transform:uppercase; font-size:10px; color:rgba(255,255,255,.6); margin:0}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(16,13,11,.94); opacity:0; transition:opacity .3s}
.lightbox.is-open{opacity:1}
.lightbox[hidden]{display:none}
.lightbox__stage{margin:0; max-width:92vw; max-height:82vh}
.lightbox__stage img{max-width:92vw; max-height:82vh; object-fit:contain; border-radius:3px; transition:opacity .16s}
.lightbox__close{position:absolute; top:20px; right:22px; width:44px; height:44px; border:none; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; font-size:18px; cursor:pointer}
.lightbox__nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:none;
  border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-size:26px; cursor:pointer}
.lightbox__nav--prev{left:14px} .lightbox__nav--next{right:14px}
.lightbox__nav:hover,.lightbox__close:hover{background:rgba(255,255,255,.2)}
.lightbox__count{position:absolute; bottom:22px; left:0; right:0; text-align:center; font-family:var(--font-ui);
  font-weight:300; letter-spacing:.2em; font-size:12px; color:rgba(255,255,255,.7)}

/* ==========================================================================
   Reveal / media / petals
   ========================================================================== */
[data-reveal]{transition:opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out)}
.js [data-reveal]{opacity:0; transform:translateY(30px); filter:blur(6px)}
.js [data-reveal].is-in{opacity:1; transform:none; filter:none}

[data-stem]{background-size:cover; background-position:center}
[data-stem] img{opacity:0; transition:opacity .8s var(--ease-out)}
[data-stem].media-loaded img{opacity:1}
.no-js [data-stem] img{opacity:1}

.petals{position:fixed; inset:0; z-index:80; pointer-events:none; overflow:hidden}
.petal{position:absolute; top:-6vh; will-change:transform, opacity; opacity:.85;
  animation:petal linear forwards}
.petal svg{width:100%; height:100%}
@keyframes petal{
  0%{transform:translateY(-10vh) translateX(0) rotate(0); opacity:0}
  10%{opacity:.9}
  100%{transform:translateY(112vh) translateX(var(--drift,0)) rotate(var(--spin,180deg)); opacity:0}
}

/* ---------- keyframes ---------- */
@keyframes fade-up{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .laurel-stem{animation:none; stroke-dashoffset:0}
  .laurel-leaf,.arch-dot{animation:none; opacity:1}
  .js [data-reveal]{opacity:1; transform:none; filter:none}
  .js .chapter__media img{filter:none; transform:scale(1.04)}
  .hero__media img,.details__bg img,.rsvp__bg img{transform:scale(1.06)}
  .hero__scroll i,.music__bars i{animation:none}
  .js .cover__eyebrow,.js .cover .monogram,.js .cover__names,.js .cover__date,.js .btn--seal,.js .cover__hint{animation:none; opacity:1}
  .petal{display:none}
}

/* WJP2: true WebGL camera fly-through moments corridor */
.moments--webgl{position:relative; padding:clamp(72px,10vh,110px) 0 0; min-height:360vh; background:linear-gradient(180deg,var(--ivory),#eee4d6 45%,var(--ivory)); overflow:clip}
.moments__intro{position:sticky; top:72px; z-index:3; pointer-events:none; mix-blend-mode:multiply}
.corridor3d{position:sticky; top:0; height:100vh; min-height:620px; margin-top:-84px; overflow:hidden; background:radial-gradient(circle at 50% 42%,rgba(255,251,244,.92),rgba(225,210,190,.75) 52%,rgba(196,176,154,.42))}
.corridor3d__canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.corridor3d__vignette{position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 45%,transparent 0 48%,rgba(70,48,34,.18) 78%,rgba(40,28,20,.28) 100%),linear-gradient(90deg,rgba(237,225,207,.64),transparent 18% 82%,rgba(237,225,207,.64))}
.corridor3d__caption{position:absolute; left:50%; bottom:clamp(28px,8vh,74px); transform:translateX(-50%); display:flex; align-items:center; gap:.35em; font-family:var(--font-script); font-size:clamp(38px,8vw,80px); color:rgba(72,55,44,.22); pointer-events:none; white-space:nowrap}
.corridor3d__caption i{font-family:var(--font-display); font-style:italic; font-size:.55em; color:rgba(201,156,144,.42)}
.moments--enhanced .corridor--fallback{position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important}
.moments--fallback{min-height:auto; padding-bottom:clamp(84px,14vh,140px)}
.moments--fallback .corridor3d{display:none}
.moments--fallback .corridor--fallback{display:flex}
@media (max-width:700px){.moments--webgl{min-height:320vh}.corridor3d{min-height:100svh; margin-top:-70px}.moments__intro{top:58px}.corridor3d__vignette{background:radial-gradient(circle at 50% 45%,transparent 0 54%,rgba(70,48,34,.16) 86%,rgba(40,28,20,.24) 100%)}}
@media (prefers-reduced-motion:reduce){.moments--webgl{min-height:auto; padding-bottom:clamp(84px,14vh,140px)}.corridor3d{display:none}.corridor--fallback{display:flex}}