: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;
  /* BUILD MỚI (anh Nấng 22/08 12:55): nền peach phẳng khớp mockup TH → mép khung block hoà tan */
  background:#F4E2CD;
  padding:10px 0}
/* KHÔNG viền trang (mockup TH: nền peach sạch, không đường kẻ) */
.cover__pageline{display:none}
.cover__pageline::after{content:none}

/* ===== FULL-ART COVER (anh Nấng 22/08 13:06): dùng nguyên mockup TH sắc nét, KHÔNG feather/seam.
   Ảnh 1280x2560 (ratio .5) fit theo màn, nút thật overlay lên nút baked theo % của STAGE. ===== */
.cover--fullart{background:#F8E7D5; padding:0}
.cover--fullart .cover__stage{position:relative; width:min(100vw, 50svh, 50vh); aspect-ratio:1/2; max-height:100svh; margin:auto}
.cover--fullart .cover__full{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 50%; background:#F8E6D8; display:block; z-index:0}
/* Cach 2 (anh Nấng): bìa TĨNH — nút/chữ/ngôn ngữ đã in trong ảnh, ẩn overlay thật, cả bìa là 1 nút mở thiệp */
.cover--fullart.cover--static .cover__lang,
.cover--fullart.cover--static .cover__eyebrow,
.cover--fullart.cover--static #openBtn,
.cover--fullart.cover--static .cover__corner,
.cover--fullart.cover--static .feathers,
.cover--static .cover__lang,
.cover--static .cover__eyebrow,
.cover--static #openBtn,
.cover--static .cover__corner,
.cover--static .feathers{display:none !important}
.cover--static .cover__stage{cursor:pointer}
/* Hybrid (anh Nấng): nền ảnh tĩnh (đã patỉch xoá lang+tên baked), overlay THẬT lang switcher + tên khách, giữ nút baked (ẩn nút/góc thật) */
.cover--fullart.cover--hybrid #openBtn,
.cover--fullart.cover--hybrid .cover__corner,
.cover--fullart.cover--hybrid .feathers{display:none !important}
.cover--fullart.cover--hybrid .cover__lang{display:block !important; position:absolute; top:2.6%; left:50%; transform:translateX(-50%); z-index:9; pointer-events:auto}
.cover--fullart.cover--hybrid .cover__eyebrow{position:absolute; left:50%; top:87.2%; transform:translate(-50%,-50%); width:76%; text-align:center; z-index:8; pointer-events:none}
/* 2-person name: A / và / B, each centered on its own line (anh Nấng) */
.cover--fullart .cover__eyebrow.cover__to--pair .to-name{display:block; line-height:1.15; margin:0}
.cover--fullart .cover__eyebrow.cover__to--pair .to-and{display:block; font-family:'Parisienne', var(--font-display), cursive; font-size:clamp(16px,4.2vw,22px); color:#8c7a63; line-height:1.2; margin:1px 0}
.cover--hybrid .cover__stage{cursor:pointer}
/* lang buttons must be tappable above the whole-cover click layer */
.cover--hybrid .cover__lang .lang__btn{pointer-events:auto}
/* anh Nấng: tạm ẩn dòng tên khách (Mrs Khách) để soi — giữ 'KÍNH GỞ1I' */
.cover--hybrid.cover--noname .cover__eyebrow .to-name{display:none !important}
/* Wedding photo tucked INSIDE the frame window, clipped to the panel shape
   (top V-notch under the filigree + bottom center bump). Measured from cover-full.webp.
   Window bbox on stage: left 28.5% top 41% right 71.5% bottom 71%. anh Nấng 24/08 */
/* (photo inset + frame overlay removed 24/08 — anh Nấng: xoá hình đặt trong, để ô trống) */
.cover--fullart .cover__inner{position:absolute; inset:0; max-width:none; z-index:2; pointer-events:none}
.cover--fullart .cover__photo,
.cover--fullart .cover__hint{display:none !important}
/* HD frame v6 (anh Nấng 22/08 15:41): ảnh khung chỉ có frame, KHÔNG baked buttons → hiện NÚT THẬT. */
.cover--fullart .lang-hit{display:none !important}
.cover--fullart .cover__lang{display:block !important; position:absolute; top:2.2%; left:50%; transform:translateX(-50%); z-index:9; pointer-events:auto}
.cover--fullart #openBtn{position:absolute; top:auto; bottom:5%; left:50%; transform:translateX(-50%); margin:0; z-index:9; pointer-events:auto;
  width:auto; height:auto; opacity:1 !important; animation:none !important; padding:15px 38px; border:0; cursor:pointer; white-space:nowrap}
.cover--fullart #openBtn span{display:inline}
/* Guest greeting placed inside the blank cartouche of the cover frame (below the ornate frame) */
.cover--fullart .cover__eyebrow{position:absolute; left:50%; top:84%; transform:translate(-50%,-50%); width:70%; text-align:center; margin:0; z-index:7; pointer-events:none}
.js .cover--fullart .cover__eyebrow{animation:fade-in 1s var(--ease-out) .25s both}
.cover--fullart .cover__eyebrow .to-word{display:block; font-size:clamp(8px,2.1vw,10px); letter-spacing:.38em; color:#7c6a57; opacity:.9; margin:0 0 5px}
.cover--fullart .cover__eyebrow .to-name{display:block; font-family:'Parisienne', var(--font-display), cursive; font-weight:400; font-size:clamp(20px,5.4vw,27px); line-height:1.18; color:#5c4a3a; letter-spacing:.005em; text-transform:none; transform:skewX(-6deg)}
/* 4 hoa văn góc vàng ở 4 góc màn hình (anh Nấng 22/08 15:48: "khung viền 4 góc như này nữa chứ"). PNG RGBA trong suốt, blend sạch trên nền ngà. */
.cover--fullart .cover__corner{display:block !important; position:absolute; z-index:6; pointer-events:none; width:23%; height:auto}
.cover--fullart .cover__corner--tl{top:-0.4%; left:-0.6%; right:auto; bottom:auto}
.cover--fullart .cover__corner--tr{top:-0.4%; right:-0.6%; left:auto; bottom:auto}
.cover--fullart .cover__corner--bl{bottom:-0.4%; left:-0.6%; top:auto; right:auto}
.cover--fullart .cover__corner--br{bottom:-0.4%; right:-0.6%; top:auto; left:auto}
/* 4 hoa văn góc đẩy SÁT CẠNH MÀN HìNH (anh Nấng 22/08 11:36: đưa ra 4 góc ngoài cùng, ôm mép safe-area) */
.cover__corner{position:absolute; z-index:3; pointer-events:none; width:min(24vw,100px); height:auto}
.cover__corner--tl{top:calc(env(safe-area-inset-top,0px) + 2px); left:calc(env(safe-area-inset-left,0px) + 2px)}
.cover__corner--tr{top:calc(env(safe-area-inset-top,0px) + 2px); right:calc(env(safe-area-inset-right,0px) + 2px)}
.cover__corner--bl{bottom:calc(env(safe-area-inset-bottom,0px) + 2px); left:calc(env(safe-area-inset-left,0px) + 2px)}
.cover__corner--br{bottom:calc(env(safe-area-inset-bottom,0px) + 2px); right:calc(env(safe-area-inset-right,0px) + 2px)}
.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:min(96vw, 720px)}
.cover__lang{position:fixed; top:calc(env(safe-area-inset-top, 0px) + 14px); left:50%; transform:translateX(-50%); z-index:9}
.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}

/* ---------- cover photo of Jolie (replaces names+date, 17/08 anh Nấng) ---------- */
.cover__names--hidden,.cover__date--hidden{display:none !important}
.cover__eyebrow--hidden{display:none !important}
.cover__photo{margin:0 auto; position:relative; display:flex; justify-content:center; z-index:2}
/* page-0 art (anh Nấng 17/08 v2): FULL source artwork = bg + border + monogram +
   frame + "To ___" line. Photo sits UNDER the cutout window; guest name types onto the To line. */
/* royal plaster frame PNG (anh Nấng 17/08 v4): photo sits UNDER the frame,
   snapped to the frame's real transparent window (flood-fill measured:
   left 11.90%% top 14.06%% w 75.40%% h 73.75%%). No mix-blend (was causing the
   frame+logo to look layered/detached from the paper) — frame PNG is already
   on transparent paper-toned background, so it composites cleanly. */
/* composed artwork = single image (anh Nấng's ready-made concept, photo already inside).
   NO absolute stretching — img keeps natural ratio 552/865, so it can never squash. */
.cover__art{position:relative; width:min(88vw, calc(56svh * .668), calc(56vh * .668)); margin:0 auto}
.cover__art-frame{position:static; display:block; width:100%; height:auto; pointer-events:none;
  max-height:none !important} /* beat legacy .cover__photo img{max-height:38-46svh} that squashed the artwork */
/* photo lives in its OWN clipped window so nothing can bleed past the frame's
   semi-transparent lower plaster (that was the "dải váy tràn" bleed). */
/* NEW rococo frame (anh Nấng 17/08 v6): clean rectangular window, full-frame cut.
   Window measured (flood): left 27.12%% top 20.82%% w 46.19%% h 63.21%% — photo fills
   it edge-to-edge (cut full frame). Frame PNG window is punched transparent. */
.cover__art-window{position:absolute; z-index:1; overflow:hidden;
  left:24.85%; top:38.32%; width:43.79%; height:51.68%; border-radius:2px}
.cover__art-photo{width:100%; height:100%; display:block;
  object-fit:cover; object-position:center 30%;
  filter:sepia(.05) saturate(.98) brightness(1.02)}
@media (max-width:480px){.cover__art{width:min(88vw, calc(58svh * .668), calc(58vh * .668))}}

/* ---------- NEW baroque frame (anh Nấng 21/08) — empty panel + text overlay ----------
   Frame p0-cover-frame.webp 960x1280 (ratio .75). Full ornament preserved, no blur.
   Text sits INSIDE the blank inner panel: left 30.7%% right 69.3%% top 28.9%% bottom 80.5%%. */
/* BUILD MỚI khung TH theo mockup (anh Nấng 22/08 12:55): khung nhỏ thanh thoát, margin rộng, ratio .80 */
.cover__art--frame2{width:min(80vw, calc(52svh * .80), calc(52vh * .80))}
@media (max-width:480px){.cover__art--frame2{width:min(84vw, calc(50svh * .80), calc(50vh * .80))}}
.cover__panel{position:absolute; z-index:2; left:33%; right:33%; top:39%; bottom:23%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:0.5% 1%; pointer-events:none}
.cover__panel-eyebrow{margin:0 0 3%; font-family:var(--font-ui); font-weight:300;
  letter-spacing:.28em; text-transform:uppercase; color:var(--brown);
  font-size:clamp(7px, 1.7vw, 11px); line-height:1.2}
.cover__panel-to{margin:0 0 4%; font-family:var(--font-ui); font-weight:300;
  letter-spacing:.06em; color:var(--ink-2); line-height:1.35}
.cover__panel-to-word{display:block; font-weight:300; letter-spacing:.24em; text-transform:uppercase;
  font-size:clamp(7px, 1.5vw, 10px); color:var(--ink-3); margin-bottom:.3em}
.cover__panel-to-name{display:block; font-family:var(--font-script);
  font-size:clamp(20px, 5.4vw, 34px); color:var(--ink); line-height:1}
.cover__panel-names{margin:6% 0 4%; font-family:var(--font-script); font-weight:400;
  font-size:clamp(30px, 8.2vw, 56px); line-height:.98; color:var(--ink)}
.cover__panel-names .amp{font-size:.62em; color:var(--brown)}
.cover__panel-rule{width:38%; height:1px; background:linear-gradient(90deg,transparent,var(--champagne),transparent); margin:2% 0 5%}
.cover__panel-date{margin:0; font-family:var(--font-ui); font-weight:300;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brown);
  font-size:clamp(7px, 1.5vw, 10px); line-height:1.3; white-space:nowrap}
.js .cover__panel{opacity:0; animation:fade-up 1.1s var(--ease-out) .8s both}
@media (prefers-reduced-motion: reduce){.js .cover__panel{animation:none; opacity:1}}

.js .cover .cover__photo{opacity:0; animation:photo-in 2.2s var(--ease-out) .55s both}
@keyframes photo-in{
  0%{opacity:0; transform:translateY(26px) scale(.96); filter:sepia(.14) saturate(.92) brightness(1.03) blur(10px)}
  55%{opacity:1}
  100%{opacity:1; transform:none; filter:sepia(.14) saturate(.92) brightness(1.03) blur(0)}
}
@media (max-width:480px){.cover__photo img{max-height:38vh; max-height:38svh}}

/* ---------- full-page ornate frame on cover ---------- */
.cover__frame{display:none}
.cover__inner{position:relative; z-index:3}

/* ---------- floating feathers on cover ---------- */
.feathers{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2}
.feather{position:absolute; top:-8vh; color:#D8C6A6; opacity:0;
  animation:feather-fall linear infinite}
.feather svg{width:100%; height:100%; display:block; filter:drop-shadow(0 1px 2px rgba(90,70,48,.12))}
.feather--soft{color:#E7DCC8}
.feather--rose{color:#C99C90}
@keyframes feather-fall{
  0%{opacity:0; transform:translate3d(0,0,0) rotate(0deg)}
  8%{opacity:.85}
  50%{transform:translate3d(var(--sway),46vh,0) rotate(var(--tilt))}
  92%{opacity:.7}
  100%{opacity:0; transform:translate3d(calc(var(--sway)*-.6),108vh,0) rotate(calc(var(--tilt)*2.2))}
}
@media (prefers-reduced-motion: reduce){.feather{display:none}.js .cover .cover__photo{animation:none; opacity:1}}

/* ---------- crest logo (replaces laurel monogram, 17/08 anh Nấng) ---------- */
.monogram--hidden{display:none !important}
.crest-logo{width:min(30vw,118px); margin:0 auto 2px; position:relative; z-index:4}

/* ---------- "To · Tên Khách" art treatment (sits below the photo) ---------- */
.cover__eyebrow{margin-top:10px}
.cover__to{display:block; margin:8px 0 0}
.cover__to .to-word{display:block; font-family:var(--font-ui); font-weight:300; letter-spacing:.5em;
  text-transform:uppercase; font-size:10px; color:var(--ink-3); padding-left:.5em}
.cover__to .to-name{display:block; font-family:var(--font-script); font-size:clamp(26px,7.5vw,34px);
  color:var(--ink); line-height:1.3; letter-spacing:.01em; margin-top:3px; text-transform:none}
.crest-logo img{width:100%; height:auto; display:block;
  /* crest-th2-flat.jpg is baked on the SAME #F0E5D8 paper as the page — its bg blends
     seamlessly; soft radial mask feathers the square jpg edge into the page */
  -webkit-mask-image:radial-gradient(ellipse 86% 88% at 50% 50%, #000 68%, transparent 100%);
  mask-image:radial-gradient(ellipse 86% 88% at 50% 50%, #000 68%, transparent 100%)}
.js .cover .crest-logo{opacity:0; animation:fade-up 1.1s var(--ease-out) .35s both}
@media (max-width:480px){.crest-logo{width:min(38vw,140px)}}

/* ---------- 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.85;
  color:var(--ink); margin:0 auto 46px; max-width:34ch; white-space:pre-line; text-wrap:balance}
.couple{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(10px,2.4vw,18px)}
.couple__side{width:100%; max-width:none}
.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-script); font-weight:400; font-size:clamp(34px,7vw,52px);
  color:var(--ink); margin:0; line-height:1.1; letter-spacing:.01em}
.couple__label:empty{display:none}
.eyebrow:empty,.hero__eyebrow:empty{display:none !important; margin:0 !important}
.couple__amp{font-family:var(--font-script); font-size:clamp(38px,6vw,54px); color:var(--rose); line-height:1; margin:2px 0}

/* ==========================================================================
   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; white-space:pre-line; line-height:1.7; text-wrap:balance}
/* Hide chapter/quote sections whose quote text is empty (anh Nấng bỏ q.2 + q.3 24/08) */
.chapter:has(.chapter__text:empty){display:none !important}

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

/* --- Expanded RSVP: disclosure + rows + small stepper + notes --- */
.disclosure{display:flex; align-items:center; justify-content:space-between; width:100%;
  font-family:var(--font-ui); font-weight:400; letter-spacing:.08em; text-transform:uppercase;
  font-size:11px; color:var(--brown); background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; cursor:pointer; transition:border-color .2s,background .2s}
.disclosure:hover{border-color:var(--brown)}
.disclosure__chev{transition:transform .25s var(--ease-out); color:var(--brown)}
.disclosure.is-open .disclosure__chev{transform:rotate(180deg)}
.disclosure__panel{padding:12px 4px 2px}
.check--row{display:flex; align-items:center; gap:10px; margin:2px 0 12px; font-size:14px; color:var(--ink-2)}
.check--stepper{justify-content:space-between}
.check--stepper > span{font-family:var(--font-ui); font-weight:300; font-size:14px; color:var(--ink-2)}
.stepper--sm{transform:scale(.82); transform-origin:right center}
.field__note{font-family:var(--font-body); font-size:13px; line-height:1.55; color:var(--brown);
  background:var(--ivory-2,#f3ece1); border-left:2px solid var(--champagne); border-radius:0 8px 8px 0;
  padding:10px 12px; margin:8px 0 0}

.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}}