/* ═══════════════════════════════════════════════════════════════
   MẠNH PHONG & MỸ UYÊN — LUXURY EUROPEAN EDITORIAL
   Static · vanilla CSS/JS
   ═══════════════════════════════════════════════════════════════ */

/* ---------- TOKENS ---------- */
:root{
  --ivory:#F7F2EA;
  --warm-ivory:#F8F3EB;
  --beige:#E6D8C5;
  --paper-hi:#FCF8F2;
  --paper:#F8F2E8;
  --paper-warm:#F5ECDF;
  --paper-low:#F1E5D5;
  --champagne:#C6A878;
  --gold:#C6A878;
  --gold-deep:#947A5C;
  --mocha:#6B5143;
  --espresso:#382A24;
  --white:#FFFFFF;
  --line:rgba(198,168,120,.38);
  --line-soft:rgba(198,168,120,.22);
  --hairline:rgba(198,168,120,.30);
  --shadow-soft:0 18px 50px rgba(56,42,36,.08);
  --shadow-card:0 30px 80px rgba(56,42,36,.13);
  --ink-soft:rgba(56,42,36,.72);
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease:cubic-bezier(.22,.61,.24,1);
  --ease-soft:cubic-bezier(.33,.1,.2,1);
  --header-ease:cubic-bezier(.22,1,.36,1);
  --header-gold:#B59A72;
  --gutter:clamp(22px,5vw,72px);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper-hi);
  color:var(--mocha);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;height:100svh}
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;
  background-image:var(--grain);opacity:.035;mix-blend-mode:multiply;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,figcaption,blockquote,ol,ul,dl,dd,dt{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
::selection{background:var(--beige);color:var(--espresso)}
:focus-visible{outline:1px solid var(--gold-deep);outline-offset:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.container{width:min(1240px,100% - var(--gutter)*2);margin-inline:auto}
section[id]{scroll-margin-top:78px}

/* ---------- SMALL TYPOGRAPHIC PARTS ---------- */
.label{
  font-family:var(--sans);font-size:.61rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);
  display:flex;align-items:center;gap:12px;
}
.label::before{content:"";width:26px;height:1px;background:currentColor;opacity:.65;display:inline-block}
.label--light{color:var(--champagne)}
.label--light::before{background:var(--champagne)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;padding:12px 19px;border:1px solid var(--line);
  font-family:var(--sans);font-size:.58rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;line-height:1.2;
  color:var(--espresso);background:transparent;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
  cursor:pointer;
}
.btn svg{width:14px;height:14px;flex:none}
.btn:hover{background:var(--espresso);color:var(--ivory);border-color:var(--espresso)}
.btn--line{border-color:rgba(107,81,67,.45)}
.btn--ghost{border-color:transparent;padding-inline:10px}
.btn--ghost:hover{background:transparent;color:var(--espresso);border-color:transparent;text-decoration:underline;text-underline-offset:4px}
.btn--solid{
  width:100%;justify-content:space-between;background:var(--espresso);
  color:var(--ivory);border-color:var(--espresso);padding:17px 22px;
}
.btn--solid svg{width:17px;height:17px}
.btn--solid:hover{background:var(--mocha);border-color:var(--mocha);color:var(--white)}
.btn:disabled{opacity:.55;cursor:wait;pointer-events:none}

.error{
  font-family:var(--sans);font-size:.64rem;line-height:1.6;
  color:#8A3B32;min-height:1.1em;letter-spacing:.01em;
}
.error:empty{min-height:0}
.error--form{margin-top:2px}

/* ---------- SITE VISIBILITY / OPENING ---------- */
.site{
  position:relative;visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity 1.2s var(--ease);
}
.site.is-visible{visibility:visible;opacity:1;pointer-events:auto}

/* ══════════════════ 01. OPENING ══════════════════ */
.opening{
  position:fixed;inset:0;z-index:200;overflow:hidden;isolation:isolate;
  background:var(--espresso);
  transition:opacity 1s var(--ease),visibility 1s var(--ease);
}
.opening.is-done{display:none}
.opening.is-leaving{opacity:0;visibility:hidden;pointer-events:none}

.opening__bg{position:absolute;inset:0;z-index:0}
.opening__bg img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.48) sepia(.16) contrast(1.04) brightness(.72);
  transform:scale(1.04);
  animation:gardenBreath 22s ease-in-out infinite alternate;
}
@keyframes gardenBreath{from{transform:scale(1.04)}to{transform:scale(1.09)}}

.opening__shade{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(70% 62% at 50% 42%, transparent 0%, rgba(24,18,14,.2) 58%, rgba(24,18,14,.82) 100%),
    linear-gradient(180deg, rgba(24,18,14,.46) 0%, rgba(24,18,14,.16) 34%, rgba(24,18,14,.58) 100%);
}
.opening__glow{
  position:absolute;left:50%;top:44%;width:min(70vw,760px);height:min(56vh,520px);
  transform:translate(-50%,-50%);z-index:1;pointer-events:none;
  background:radial-gradient(ellipse,rgba(246,221,176,.2),rgba(246,221,176,.05) 45%,transparent 70%);
  filter:blur(18px);
}

.opening__petals{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.opening__petals span{
  position:absolute;left:var(--x);top:var(--y);
  width:calc(13px * var(--s));height:calc(8px * var(--s));
  border-radius:62% 38% 56% 44% / 66% 52% 48% 40%;
  background:linear-gradient(135deg,#FBF4E7,#E6D8C5 62%,#C6A878);
  opacity:.34;filter:blur(.3px);transform:rotate(var(--r));
  animation:petalFloat var(--dur) ease-in-out var(--delay) infinite alternate;
}
.opening__petals span:nth-child(2n){opacity:.22;background:linear-gradient(135deg,#FFFDF7,#D8C3A3)}
@keyframes petalFloat{
  0%{transform:rotate(var(--r)) translate3d(0,0,0)}
  50%{transform:rotate(calc(var(--r) + 16deg)) translate3d(12px,-16px,0)}
  100%{transform:rotate(calc(var(--r) - 10deg)) translate3d(-9px,10px,0)}
}

.opening__inner{
  position:relative;z-index:3;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,3.4vh,38px);
  padding:12vh var(--gutter) 11vh;
  transition:opacity .8s var(--ease),transform 1.1s var(--ease);
}
.opening__line{
  position:relative;z-index:4;
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1rem,3.6vw,3.05rem);line-height:1.15;
  color:var(--ivory);text-align:center;max-width:calc(100vw - 2 * var(--gutter));
  white-space:nowrap;letter-spacing:.005em;
  min-height:1.15em;
  text-shadow:0 3px 26px rgba(0,0,0,.32);
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}
.opening__line::after{
  content:"";display:block;width:44px;height:1px;background:rgba(198,168,120,.72);
  margin:clamp(18px,2.7vh,28px) auto 0;
}
.opening__typed{white-space:pre-line}
.opening__caret{
  display:inline-block;width:1px;height:.86em;margin-left:.14em;
  background:rgba(247,242,234,.85);vertical-align:-.04em;
  animation:caretBlink 1s step-end infinite;
  transition:opacity .5s var(--ease);
}
.opening__caret.is-done{opacity:0}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.opening__hint{
  position:relative;z-index:4;
  font-family:var(--sans);font-size:.64rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(247,242,234,.66);
  display:flex;align-items:center;gap:12px;
  transition:opacity .6s var(--ease),transform .7s var(--ease);
}
.opening__hint::before,.opening__hint::after{content:"";width:24px;height:1px;background:rgba(247,242,234,.28)}
.opening__hint::after{animation:hintPulse 2.8s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.3;transform:scaleX(.6)}50%{opacity:.9;transform:scaleX(1)}}

/* — stage + wooden table — */
.opening__stage{
  position:relative;z-index:2;width:min(82vw,460px);
  display:flex;align-items:flex-end;justify-content:center;
  transition:transform 1.3s var(--ease-soft);
  transform-origin:50% 64%;
}
.opening__table{
  position:fixed;left:0;right:0;bottom:0;height:39vh;z-index:2;
  background:
    repeating-linear-gradient(2deg, rgba(255,232,195,.026) 0 1px, transparent 1px 37px),
    radial-gradient(80% 65% at 50% 0%, rgba(255,226,180,.2), transparent 64%),
    linear-gradient(180deg,#654936 0%,#4B3326 32%,#332318 68%,#1D130E 100%);
  transform:perspective(1000px) rotateX(17deg);
  transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 100%);
  box-shadow:0 -26px 60px rgba(15,10,7,.5), inset 0 1px 0 rgba(255,235,200,.22);
}
.opening__table::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(20,12,8,.35), transparent 14%, transparent 86%, rgba(20,12,8,.35)),
    repeating-linear-gradient(2deg, transparent 0 52px, rgba(20,12,8,.12) 52px 53px, transparent 53px 104px);
  opacity:.75;
}
.opening__lace{
  position:absolute;left:50%;top:0;width:min(45vw,590px);height:37%;
  transform:translateX(-50%);
  background:
    repeating-linear-gradient(90deg, rgba(255,250,238,.13) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(4deg, rgba(255,250,238,.07) 0 1px, transparent 1px 26px),
    radial-gradient(ellipse at 50% 18%, rgba(247,242,234,.3), transparent 68%);
  filter:blur(.35px);opacity:.62;mix-blend-mode:soft-light;
  clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);
}

/* — ring box — */
.ringbox{
  position:relative;width:100%;aspect-ratio:1.13;
  perspective:1200px;perspective-origin:50% 30%;
  cursor:pointer;outline:none;z-index:2;
  -webkit-tap-highlight-color:transparent;
  transform:rotateY(-6deg) rotateX(4deg);
  transform-style:preserve-3d;
  transition:transform 1.1s var(--ease);
}
.ringbox:focus-visible{outline:1px solid rgba(247,242,234,.7);outline-offset:20px}
.ringbox__beam{
  position:absolute;left:50%;top:5%;width:90%;height:56%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 62%, rgba(255,244,215,.96), rgba(255,240,208,.42) 44%, transparent 72%);
  opacity:0;filter:blur(12px);pointer-events:none;
  transition:opacity 1.5s .35s var(--ease);
}
.ringbox__shadow{
  position:absolute;left:7%;right:7%;bottom:-3%;height:10%;
  background:radial-gradient(ellipse,rgba(12,8,5,.58),rgba(12,8,5,.2) 48%,transparent 72%);
  filter:blur(11px);
}
.ringbox__base{position:absolute;inset:0}
.ringbox__base::after{
  content:"";position:absolute;top:40%;bottom:1.5%;right:-5.2%;width:5.8%;z-index:-1;
  background:linear-gradient(180deg,#4E3828 0%,#33231A 42%,#1D130E 100%);
  border-radius:0 3px 5px 0;transform:skewY(-4deg);
  box-shadow:inset 1px 0 0 rgba(255,235,200,.08), 10px 14px 26px rgba(8,5,3,.28);
}

.box-interior{
  position:absolute;left:4%;right:4%;top:22.5%;height:30%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 42%, #3C2E27 0%, #211814 46%, #0C0908 100%);
  box-shadow:
    inset 0 10px 24px rgba(0,0,0,.65),
    inset 0 -13px 28px rgba(0,0,0,.55),
    0 0 0 1px rgba(198,168,120,.45);
  overflow:hidden;
}
.box-interior__lining{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(96deg, rgba(255,255,255,.045) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 50% 20%, rgba(255,214,170,.12), transparent 60%);
  mix-blend-mode:soft-light;
}
.cushion{
  position:absolute;left:16%;right:16%;top:26%;height:58%;border-radius:50%;
  background:radial-gradient(ellipse at 40% 22%, #322620, #1A1310 58%, #0A0706);
  box-shadow:inset 0 3px 9px rgba(255,225,195,.1), inset 0 -9px 16px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.45);
}
.rings{
  position:absolute;left:50%;top:36%;width:48%;height:auto;
  transform:translate(-50%,-42%) scale(.94);
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.5));
  opacity:0;transition:opacity .9s .48s, transform 1.3s .42s var(--ease);
  z-index:3;
}
.box-interior__spark{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(ellipse at 50% 45%, rgba(255,246,220,.8), transparent 62%);
  opacity:0;transition:opacity 1.1s .5s;mix-blend-mode:screen;
}

.box-front{
  position:absolute;left:0;right:0;top:39%;bottom:0;
  border-radius:48% 52% 7px 7px / 7% 7% 7px 7px;
  background:
    var(--grain),
    radial-gradient(110% 90% at 24% 0%, rgba(255,238,205,.2), transparent 55%),
    radial-gradient(80% 70% at 82% 100%, rgba(12,8,5,.5), transparent 62%),
    linear-gradient(108deg,#453125 0%,#634A37 18%,#33231A 46%,#523B2B 70%,#2A1C14 100%);
  background-size:190px 190px, auto, auto, auto;
  background-blend-mode:soft-light, normal, normal, normal;
  box-shadow:
    inset 0 0 0 1px rgba(198,168,120,.55),
    inset 0 3px 0 rgba(255,240,210,.1),
    inset 0 -1px 0 rgba(10,7,5,.4),
    0 26px 42px -18px rgba(15,10,7,.72),
    0 8px 18px rgba(15,10,7,.2);
  overflow:hidden;
}
.box-front__satin{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(100deg, rgba(255,236,205,.085) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(94deg, rgba(10,7,5,.08) 0 1px, transparent 1px 33px),
    radial-gradient(60% 90% at 18% 0%, rgba(255,236,205,.12), transparent 60%);
  mix-blend-mode:soft-light;
}
.box-front__frame{
  position:absolute;inset:11% 7% 9%;
  border:1px solid rgba(198,168,120,.26);border-radius:4px;pointer-events:none;
}
.box-front__frame::before{
  content:"";position:absolute;inset:4px;border:1px solid rgba(198,168,120,.12);border-radius:3px;
}
.box-front__mark{
  position:absolute;left:50%;bottom:42%;transform:translateX(-50%);
  display:none;align-items:center;gap:clamp(8px,1.6vw,15px);
  color:rgba(226,200,155,.88);white-space:nowrap;
}
.box-front__mono{
  font-family:var(--serif);font-size:clamp(1rem,2.2vw,1.3rem);
  font-weight:400;letter-spacing:.16em;line-height:1;text-indent:.16em;
}
.box-front__mono span{font-style:italic;font-size:.72em;color:rgba(226,200,155,.65);margin:0 .04em}
.box-front__date{display:none}
.box-front__rule{width:clamp(16px,3.2vw,34px);height:1px;background:linear-gradient(90deg,transparent,rgba(198,168,120,.55))}
.box-front__rule:last-child{transform:scaleX(-1)}
.box-front__edge{position:absolute;left:6%;right:6%;top:14%;height:1px;background:linear-gradient(90deg,transparent,rgba(198,168,120,.42),transparent)}
.box-front__trim{position:absolute;left:50%;top:88%;width:9%;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(198,168,120,.38),transparent)}
.box-corner{position:absolute;width:54px;height:54px;color:rgba(198,168,120,.55);z-index:3;pointer-events:none}
.box-corner--tl{left:11px;top:9px}
.box-corner--tr{right:11px;top:9px;transform:scaleX(-1)}
.box-corner--bl{left:11px;bottom:8px;transform:scaleY(-1)}
.box-corner--br{right:11px;bottom:8px;transform:scale(-1)}

.ringbox__lid{
  position:absolute;left:-2.2%;right:-2.2%;top:-1.5%;height:43.5%;
  transform-origin:50% 100%;transform:rotateX(0deg);
  transform-style:preserve-3d;
  transition:transform 1.65s var(--ease-soft);
  z-index:5;
}
.lid-top-face{
  position:absolute;left:0;right:0;top:0;height:24%;z-index:0;
  transform-origin:50% 0;transform:rotateX(90deg);
  background:
    var(--grain),
    linear-gradient(180deg,#6D513B 0%,#4A3325 58%,#2D1E15 100%);
  background-size:170px 170px, auto;
  background-blend-mode:soft-light, normal;
  border:1px solid rgba(198,168,120,.42);border-bottom:0;
  border-radius:8px 8px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,240,210,.22);
}
.ringbox__lid::before{
  content:"";position:absolute;left:0;right:0;top:-3.4%;height:5.4%;z-index:-1;
  background:linear-gradient(180deg,#9A7858 0%,#654936 55%,#4B3425 100%);
  border-radius:10px 10px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,236,205,.28);
}
.ringbox__lid::after{
  content:"";position:absolute;left:0;right:0;bottom:-1.3%;height:2.4%;z-index:-1;
  background:linear-gradient(180deg,#72543E,#3A281D);border-radius:0 0 3px 3px;
}
.lid-face{
  position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;
  border-radius:11px 11px 4px 4px;
}
.lid-face--out{
  background:
    var(--grain),
    radial-gradient(110% 90% at 22% 0%, rgba(255,238,205,.22), transparent 55%),
    radial-gradient(80% 70% at 82% 100%, rgba(10,7,5,.5), transparent 62%),
    linear-gradient(112deg,#463226 0%,#6A503B 16%,#36251B 40%,#5E4633 62%,#2C1D15 86%,#4B3627 100%);
  background-size:190px 190px, auto, auto, auto;
  background-blend-mode:soft-light, normal, normal, normal;
  box-shadow:
    inset 0 0 0 1px rgba(198,168,120,.65),
    inset 0 0 0 6px rgba(255,240,210,.045),
    inset 0 2px 0 rgba(255,240,210,.14),
    inset 0 -6px 14px rgba(10,7,5,.38),
    0 24px 42px -14px rgba(15,10,7,.7),
    0 7px 14px rgba(15,10,7,.26);
}
.lid-satin{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(98deg, rgba(255,236,205,.075) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(86deg, rgba(10,7,5,.07) 0 1px, transparent 1px 29px),
    radial-gradient(50% 60% at 30% 20%, rgba(255,236,205,.12), transparent 60%);
  mix-blend-mode:soft-light;
}
.lid-rim{
  position:absolute;inset:9px;border:1px solid rgba(198,168,120,.42);
  border-radius:6px 6px 3px 3px;pointer-events:none;
}
.lid-rim::before{content:"";position:absolute;inset:4px;border:1px solid rgba(198,168,120,.15);border-radius:4px}
.lid-filigree{position:absolute;width:72px;height:72px;color:rgba(198,168,120,.6)}
.lid-filigree--tl{left:13px;top:11px}
.lid-filigree--tr{right:13px;top:11px;transform:scaleX(-1)}
.lid-filigree--bl{left:13px;bottom:9px;transform:scaleY(-1)}
.lid-filigree--br{right:13px;bottom:9px;transform:scale(-1)}
.lid-plate{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:auto;height:auto;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
.lid-plate__mono{
  font-family:var(--serif);font-size:clamp(1.25rem,2.7vw,1.62rem);
  font-weight:400;letter-spacing:.13em;line-height:1;color:#EDD39C;
  text-shadow:0 1px 0 rgba(0,0,0,.62), 0 0 18px rgba(198,168,120,.14);
  display:flex;align-items:center;gap:.08em;
}
.lid-plate__mono span{font-style:italic;font-size:.7em;color:rgba(237,211,156,.78)}
.lid-plate__sub{
  font-family:var(--sans);font-size:.34rem;font-weight:500;letter-spacing:.26em;
  color:rgba(227,199,143,.62);margin-top:4px;text-indent:.26em;
}
.lid-clasp{
  position:absolute;left:50%;bottom:-9px;width:38px;height:17px;transform:translateX(-50%);
  border-radius:2px 2px 4px 4px;
  background:linear-gradient(180deg,#E7CD97,#B89152 48%,#8D6B36 100%);
  box-shadow:0 2px 5px rgba(15,10,7,.5), inset 0 1px 0 rgba(255,250,230,.65);
  z-index:2;
}
.lid-clasp::after{content:"";position:absolute;left:50%;top:5px;width:5px;height:7px;transform:translateX(-50%);border-radius:3px;background:rgba(30,20,12,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.lid-face--in{
  transform:rotateX(180deg);
  background:radial-gradient(ellipse at 50% 15%, #352821 0%, #211713 44%, #0B0807 100%);
  box-shadow:inset 0 0 0 1px rgba(198,168,120,.35), inset 0 0 32px rgba(0,0,0,.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
.lid-in__linen{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(96deg, rgba(255,255,255,.035) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 50% 20%, rgba(255,214,170,.08), transparent 60%);
  mix-blend-mode:soft-light;
}
.lid-in__mono{font-family:var(--serif);font-size:2rem;font-weight:400;color:rgba(227,199,143,.85);line-height:1;position:relative;letter-spacing:.08em}
.lid-in__mono span{font-size:.7em;vertical-align:.15em;padding:0 .05em}
.lid-in__text{
  font-family:var(--sans);font-size:.42rem;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:rgba(227,199,143,.5);position:relative;
}

/* opening states */
.opening.is-opening .ringbox__lid{transform:rotateX(-112deg)}
.opening.is-opening .ringbox__beam{opacity:.88}
.opening.is-opening .rings{opacity:1;transform:translate(-50%,-56%) scale(1)}
.opening.is-opening .box-interior__spark{opacity:.8}
.opening.is-opening .box-interior{box-shadow:inset 0 10px 24px rgba(0,0,0,.55), inset 0 -13px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(198,168,120,.7), 0 0 42px rgba(255,240,200,.26)}
.opening.is-opening .opening__stage{transform:scale(1.12) translateY(-1.5%)}
.opening.is-opening .opening__line{opacity:0;transform:translateY(-10px)}
.opening.is-opening .opening__hint{opacity:0;transform:translateY(8px)}
.opening.is-film .opening__inner{opacity:0;transform:scale(1.04)}
.opening.is-film .opening__film{opacity:1}
.opening.is-film .opening__stage{transition-duration:.9s}

/* — opening film — */
.opening__film{
  position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  background:#140F0C;
  transition:opacity .55s var(--ease);
}
.opening__video{width:100%;height:100%;object-fit:cover;object-position:center 52%;display:block;filter:saturate(.92) contrast(1.02)}
.opening__film-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,13,10,.12) 0%,transparent 30%,rgba(18,13,10,.18) 100%);
}

/* — initial opening entrance — */
.opening__line,.opening__hint,.opening__stage{opacity:0}
.opening__line{animation:openingText 1.8s .35s var(--ease) forwards}
.opening__stage{animation:openingBox 1.9s .65s var(--ease-soft) forwards}
.opening__hint{animation:openingText 1.6s 1.35s var(--ease) forwards}
@keyframes openingText{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes openingBox{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}

/* ══════════════════ HEADER — LIQUID GLASS ══════════════════ */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:100;
  color:#F8F3EB;
  transition:color .42s var(--header-ease);
}
.site-head::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border:1px solid transparent;border-radius:0;
  background-color:transparent;
  box-shadow:0 0 0 rgba(77,57,44,0);
  transition:
    background-color .42s var(--header-ease),
    border-color .42s var(--header-ease),
    box-shadow .42s var(--header-ease),
    border-radius .42s var(--header-ease);
}
.site-head.is-glass,
.site-head.is-menu{color:#4D392C}
.site-head::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:0;
  background:linear-gradient(180deg,rgba(255,252,247,.30) 0%,rgba(255,252,247,.07) 46%,transparent 100%);
  opacity:0;
  transition:opacity .42s var(--header-ease),border-radius .42s var(--header-ease);
}
.site-head.is-glass::after,
.site-head.is-menu::after{
  opacity:1;
  border-radius:0 0 12px 12px;
}
.site-head.is-glass::before,
.site-head.is-menu::before{
  background-color:rgba(248,243,235,.97);
  border-color:rgba(181,154,114,.24);
  border-radius:0 0 12px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(181,154,114,.08),
    0 10px 26px -24px rgba(77,57,44,.38);
}
.site-head__inner{
  position:relative;z-index:1;
  width:min(1400px,100% - var(--gutter)*2);margin-inline:auto;
  height:50px;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:clamp(14px,1.8vw,26px);
  padding-top:env(safe-area-inset-top, 0px);
}
.brand{
  grid-column:1;justify-self:start;display:inline-flex;align-items:center;
  line-height:1;color:inherit;
}
.brand__mono{
  font-family:var(--serif);font-size:1.35rem;font-weight:300;
  letter-spacing:.055em;color:currentColor;
}
.site-nav{
  grid-column:2;justify-self:center;display:flex;align-items:center;
  gap:clamp(18px,2.2vw,32px);
}
.site-nav a{
  position:relative;font-family:var(--sans);font-size:.54rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;padding:6px 0;color:inherit;
  transition:color .3s var(--header-ease);
}
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--header-gold);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--header-ease);
}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--header-gold)}
.site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.site-head__meta{
  grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px;
  margin:0;font-family:var(--sans);font-size:.46rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;line-height:1;
  color:rgba(248,243,235,.68);
  transition:color .42s var(--header-ease);
}
.site-head__meta-rule{
  width:18px;height:1px;background:rgba(181,154,114,.62);
  transition:background-color .42s var(--header-ease);
}
.site-head__place{white-space:nowrap}
.site-head__date{white-space:nowrap;font-variant-numeric:tabular-nums}
.site-head.is-glass .site-head__meta,
.site-head.is-menu .site-head__meta{color:rgba(77,57,44,.7)}
.site-head.is-glass .site-head__meta-rule,
.site-head.is-menu .site-head__meta-rule{background:rgba(181,154,114,.8)}
.menu-toggle{
  grid-column:3;justify-self:end;display:none;position:relative;
  width:36px;height:36px;border:1px solid rgba(248,243,235,.28);
  border-radius:50%;padding:0;color:inherit;
  transition:border-color .42s var(--header-ease);
}
.menu-toggle::before{content:"";position:absolute;inset:-5px;border-radius:50%}
.menu-toggle span{
  position:absolute;left:50%;top:50%;width:14px;height:1px;
  background:currentColor;transform:translate(-50%,-50%);
  transition:transform .3s var(--header-ease);
}
.menu-toggle span:first-child{transform:translate(-50%,calc(-50% - 2.5px))}
.menu-toggle span:last-child{transform:translate(-50%,calc(-50% + 2.5px))}
.site-head.is-glass .menu-toggle,
.site-head.is-menu .menu-toggle{border-color:rgba(181,154,114,.34)}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
.mobile-nav{
  position:relative;z-index:1;display:none;background:transparent;
  border-top:1px solid rgba(181,154,114,.2);
  padding:8px var(--gutter) 18px;
}
.mobile-nav a{
  display:block;padding:14px 0;border-bottom:1px solid rgba(181,154,114,.2);
  font-family:var(--sans);font-size:.64rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:inherit;
}
.mobile-nav a:last-child{border-bottom:0}
.site-head.is-menu .mobile-nav{color:#4D392C}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-head.is-glass::before,
  .site-head.is-menu::before{background-color:#F8F3EB}
}

/* ══════════════════ 02. HERO ══════════════════ */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  background:var(--espresso);color:var(--ivory);
  display:flex;align-items:stretch;
}
.hero__media{position:absolute;inset:0;z-index:0;background:#1B1511 url("../img/opening-poster.jpg") center/cover no-repeat}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;
  filter:saturate(.88) contrast(1.03);
  opacity:1;
  transition:opacity .7s var(--ease);
}
/* Video B nằm trên, ẩn sẵn; JS cho hai video hoà mờ vào nhau ở điểm nối. */
.hero__video--b{opacity:0}
.hero__shade{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(24,18,14,.82) 0%,rgba(24,18,14,.55) 40%,rgba(24,18,14,.18) 76%,rgba(24,18,14,.32) 100%),
    linear-gradient(180deg,rgba(24,18,14,.42) 0%,transparent 28%,rgba(24,18,14,.22) 58%,rgba(24,18,14,.78) 100%);
}
.hero__content{
  position:relative;z-index:2;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:132px;padding-bottom:34px;
}
.hero__main{max-width:1080px;margin-top:auto;margin-bottom:clamp(60px,9vh,98px)}
.hero__names{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.12em;
  font-family:var(--serif);font-size:clamp(3rem,6.7vw,6.6rem);
  font-weight:300;line-height:.9;letter-spacing:.005em;
  color:var(--ivory);text-shadow:0 4px 34px rgba(0,0,0,.28);
  text-wrap:balance;
}
.hero__names-pair{display:inline-flex;align-items:baseline;gap:.12em}
.hero__names i{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:.62em;line-height:.7;color:var(--champagne);
  margin:0 .16em;transform:translateY(.05em);
}
.hero__date{
  margin-top:clamp(20px,3vh,30px);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--champagne);
}
.hero__dot{font-size:.8rem;opacity:.55}
.hero__quote{
  margin-top:clamp(16px,2.4vh,22px);max-width:28ch;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.3rem,2.15vw,1.78rem);line-height:1.5;
  color:rgba(247,242,234,.85);
}
.count{
  margin-top:clamp(28px,4.6vh,46px);
  display:flex;align-items:stretch;width:max-content;max-width:100%;
}
.count__item{
  min-width:clamp(62px,6.4vw,92px);padding:0 clamp(12px,1.9vw,25px);
  border-left:1px solid rgba(247,242,234,.2);
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
}
.count__item:first-child{border-left:0;padding-left:0}
.count__num{
  font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,3vw,2.55rem);
  line-height:1;letter-spacing:.02em;color:var(--ivory);
  font-variant-numeric:lining-nums tabular-nums;
}
.count__label{
  font-family:var(--sans);font-size:.45rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(247,242,234,.55);
}
.hero__scroll{
  display:inline-flex;align-items:center;gap:14px;align-self:flex-start;
  font-family:var(--sans);font-size:.52rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(247,242,234,.75);
  transition:color .35s var(--ease);
}
.hero__scroll:hover{color:var(--champagne)}
.hero__scroll-line{
  position:relative;display:block;width:48px;height:1px;background:rgba(247,242,234,.4);
}
.hero__scroll-line::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);
  animation:scrollArrow 2.2s ease-in-out infinite;
}
@keyframes scrollArrow{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5}50%{transform:rotate(45deg) translate(3px,-3px);opacity:1}}

/* hero entrance */
.hero__names,.hero__date,.hero__quote,.count,.hero__scroll{
  opacity:0;transform:translateY(18px);
  transition:opacity 1.2s var(--ease),transform 1.4s var(--ease);
}
.hero.is-ready .hero__names{opacity:1;transform:none;transition-delay:.28s}
.hero.is-ready .hero__date{opacity:1;transform:none;transition-delay:.42s}
.hero.is-ready .hero__quote{opacity:1;transform:none;transition-delay:.54s}
.hero.is-ready .count{opacity:1;transform:none;transition-delay:.66s}
.hero.is-ready .hero__scroll{opacity:1;transform:none;transition-delay:.8s}

/* ══════════════════ 03. INVITATION — WEDDING INVITATION ══════════════════ */
.invitation{
  position:relative;overflow:visible;
  background:transparent;
  padding:clamp(150px,19vw,250px) 0 clamp(90px,11vw,150px);
}
/* ══════════════════ 04. RSVP ══════════════════ */
.rsvp{
  background:radial-gradient(62% 58% at 74% 38%, rgba(255,251,245,.46), transparent 72%);
  padding:clamp(90px,11vw,155px) 0;
}
.rsvp__grid{
  display:grid;grid-template-columns:5fr 7fr;gap:clamp(46px,8vw,100px);
  align-items:start;
}
.rsvp__intro{position:sticky;top:120px}
.rsvp__intro h2{
  margin:20px 0 24px;font-family:var(--serif);font-weight:300;
  font-size:clamp(2.65rem,4.8vw,4.2rem);line-height:1.02;
  color:var(--espresso);text-wrap:balance;
}
.rsvp__lead{max-width:43ch;font-size:.9rem;line-height:1.95;color:var(--mocha)}
.rsvp__guest{
  margin-top:30px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-family:var(--sans);font-size:.55rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
}
.rsvp__guest strong{font-weight:600;color:var(--espresso);letter-spacing:.08em;text-transform:none;font-size:.8rem}

.rsvp__panel{
  position:relative;
  padding:clamp(24px,4vw,42px);
  background:
    radial-gradient(100% 70% at 15% 0%, rgba(255,255,255,.50), transparent 66%),
    linear-gradient(160deg, #FBF5EC 0%, #F3E8D9 100%);
  border:1px solid rgba(148,122,92,.30);
  box-shadow:
    0 30px 80px rgba(56,42,36,.13),
    inset 0 1px 0 rgba(255,255,255,.58);
}
.rsvp__form{display:flex;flex-direction:column;gap:20px}
.rsvp__form-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--line-soft);
}
.rsvp__form-kicker{
  font-family:var(--sans);font-size:.55rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
}
.rsvp__form-number{
  font-family:var(--serif);font-size:1.1rem;line-height:1;
  letter-spacing:.08em;color:rgba(148,122,92,.72);
}

.rsvp-field{
  display:flex;flex-direction:column;gap:5px;
  margin:0;padding:0;border:0;min-width:0;
}
.rsvp-field > label,.rsvp-field > legend{
  display:block;width:100%;padding:0;
  font-family:var(--sans);font-size:.58rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.5;
  color:var(--gold-deep);
}
.rsvp-field > label em,.rsvp-field > legend em{
  font-style:normal;color:var(--gold-deep);
}
.rsvp-field > label span,.rsvp-field > legend span{
  font-weight:400;letter-spacing:.04em;text-transform:none;
  color:rgba(107,81,67,.62);
}
.rsvp-field input,.rsvp-field textarea{
  width:100%;min-height:46px;padding:8px 0;
  border:0;border-bottom:1px solid rgba(148,122,92,.30);border-radius:0;
  background:transparent;font-family:var(--sans);font-size:.9rem;
  line-height:1.6;color:var(--espresso);
  transition:border-color .25s var(--ease);
}
.rsvp-field input::placeholder,.rsvp-field textarea::placeholder{
  color:rgba(107,81,67,.48);
}
.rsvp-field textarea{resize:vertical;min-height:100px}
.rsvp-select{position:relative}
.rsvp-select__button{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:46px;padding:8px 0;border:0;
  border-bottom:1px solid rgba(148,122,92,.30);background:none;
  font-family:var(--sans);font-size:.9rem;line-height:1.6;color:var(--espresso);
  text-align:left;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.rsvp-select__button svg{width:12px;height:8px;flex:none;color:var(--gold-deep);transition:transform .25s var(--ease)}
.rsvp-select__button[aria-expanded="true"] svg{transform:rotate(180deg)}
.rsvp-select__button:hover,.rsvp-select__button:focus-visible{outline:none;border-bottom-color:var(--espresso)}
.rsvp-select__button[aria-invalid="true"]{border-bottom-color:#8A3B32}
.rsvp-select__button:disabled{opacity:.55;cursor:not-allowed}
.rsvp-select__menu{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  padding:4px;background:var(--paper-hi);border:1px solid var(--line);
  box-shadow:var(--shadow-card);max-height:260px;overflow:auto;
}
.rsvp-select__option{
  display:block;width:100%;padding:10px 12px;border:0;background:none;
  font-family:var(--sans);font-size:.82rem;line-height:1.5;color:var(--mocha);
  text-align:left;cursor:pointer;transition:background .2s,color .2s;
}
.rsvp-select__option:hover,.rsvp-select__option.is-active{background:rgba(198,168,120,.13);color:var(--espresso)}
.rsvp-select__option[aria-selected="true"]{font-weight:600;color:var(--espresso)}
.rsvp-select__option[aria-selected="true"]:not(:hover):not(.is-active){background:rgba(198,168,120,.07)}
.rsvp-select__option:focus-visible{outline:1px solid var(--gold-deep);outline-offset:-2px}
.rsvp-field input:focus,.rsvp-field textarea:focus{
  outline:none;border-bottom-color:var(--espresso);
}
.rsvp-field input[aria-invalid="true"],.rsvp-field textarea[aria-invalid="true"]{
  border-bottom-color:#8A3B32;
}
.rsvp-field__error{
  margin:0;font-family:var(--sans);font-size:.67rem;line-height:1.55;
  color:#8A3B32;
}
.rsvp-field__error:empty{display:none}
.rsvp-field__error--form{margin-top:-8px}
.rsvp-field__meta{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  min-height:1em;font-family:var(--sans);font-size:.58rem;
  letter-spacing:.08em;color:rgba(107,81,67,.58);
}
.rsvp-field__meta .rsvp-field__error{flex:1}

.rsvp-field--choice{margin-top:2px}
.rsvp-field--choice legend{margin-bottom:2px}
.rsvp-choices{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;margin-top:4px;
}
.rsvp-choice{
  position:relative;display:flex;align-items:flex-start;gap:10px;
  padding:13px 12px;border:1px solid rgba(148,122,92,.24);
  background:rgba(255,252,247,.36);cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.rsvp-choice:hover{border-color:rgba(148,122,92,.5)}
.rsvp-choice.is-selected{
  border-color:rgba(148,122,92,.72);
  background:rgba(198,168,120,.13);
}
.rsvp-choice input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.rsvp-choice__dot{
  flex:none;width:16px;height:16px;margin-top:2px;border:1px solid rgba(148,122,92,.7);
  border-radius:50%;position:relative;transition:border-color .25s var(--ease);
}
.rsvp-choice.is-selected .rsvp-choice__dot{border-color:var(--espresso)}
.rsvp-choice.is-selected .rsvp-choice__dot::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--espresso);
}
.rsvp-choice:has(input:focus-visible){outline:1px solid var(--gold-deep);outline-offset:2px}
.rsvp-choice__copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.rsvp-choice__copy strong{
  font-family:var(--sans);font-size:.7rem;font-weight:500;line-height:1.45;
  color:var(--espresso);
}
.rsvp-choice__copy small{
  font-family:var(--sans);font-size:.61rem;line-height:1.5;
  color:rgba(107,81,67,.68);
}

.rsvp-conditional{
  display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:18px;
}

.rsvp__gift{
  display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;
  align-items:center;margin-top:2px;padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.rsvp__gift-visual{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.rsvp__gift-image{
  width:112px;height:auto;display:block;
  box-shadow:0 12px 28px -20px rgba(56,42,36,.5);
}
.rsvp__gift-caption{
  font-family:var(--sans);font-size:.48rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);
  text-align:center;
}
.rsvp__gift-text h3{
  font-family:var(--serif);font-size:1.5rem;font-weight:300;line-height:1.05;
  color:var(--espresso);
}
.rsvp__gift-copy{
  margin-top:5px;font-size:.69rem;line-height:1.7;color:rgba(107,81,67,.76);
}

.rsvp__submit-row{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.rsvp__submit{width:100%}
.rsvp__nojs{display:none;font-size:.8rem;line-height:1.8;color:#8A3B32}

.rsvp__success{
  min-height:440px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(26px,5vw,50px) 10px;outline:none;
}
.rsvp__success-mark{
  width:64px;height:64px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(148,122,92,.4);
  background:rgba(198,168,120,.16);color:var(--gold-deep);
}
.rsvp__success-mark svg{width:23px;height:23px}
.rsvp__success-kicker{
  margin-top:20px;font-family:var(--sans);font-size:.54rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);
}
.rsvp__success-title{
  margin-top:7px;font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;color:var(--espresso);
  outline:none;
}
.rsvp__success-note{
  max-width:39ch;margin-top:13px;font-size:.7rem;line-height:1.8;
  color:rgba(107,81,67,.68);
}
.rsvp__success-detail{
  margin-top:10px;font-family:var(--serif);font-style:italic;
  font-size:1.05rem;line-height:1.5;color:var(--mocha);
}
.rsvp__reset{margin-top:20px;border-color:var(--line);color:var(--espresso)}

@media (max-width:760px){
  .rsvp__form{gap:18px}
  .rsvp__panel{padding:24px 20px}
  .rsvp-choices,.rsvp-conditional{grid-template-columns:1fr}
  .rsvp__gift{grid-template-columns:92px minmax(0,1fr);gap:13px}
  .rsvp__gift-image{width:92px}
  .rsvp__gift-text h3{font-size:1.35rem}
  .rsvp__success{min-height:380px}
}

@media (prefers-reduced-motion: reduce){
  .rsvp-choice,.rsvp-field input,.rsvp-field textarea{transition:none}
}

/* ══════════════════ 05. OUR STORY + GALLERY ══════════════════ */
/* ══════════════════ 06. THANK YOU ══════════════════ */
.thankyou{
  position:relative;min-height:94svh;overflow:hidden;
  background:var(--espresso);color:var(--ivory);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:clamp(100px,13vw,160px) 0 clamp(110px,13vw,160px);
}
.thankyou__bg{position:absolute;inset:0;z-index:0;background:#1A1310}
.thankyou__bg img{width:100%;height:100%;object-fit:cover;object-position:center 54%;filter:saturate(.72) contrast(1.02) brightness(.7)}
.thankyou__shade{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(24,18,14,.58) 0%,rgba(24,18,14,.28) 36%,rgba(24,18,14,.76) 100%),
    radial-gradient(70% 60% at 50% 50%, transparent 0%, rgba(24,18,14,.2) 70%, rgba(24,18,14,.55) 100%);
}
.thankyou__content{position:relative;z-index:2;max-width:890px}
.thankyou .label{justify-content:center}
.thankyou .label::before{background:var(--champagne)}
.thankyou__title{
  margin:22px auto 25px;font-family:var(--serif);font-weight:300;
  font-size:clamp(2.4rem,4vw,3.55rem);line-height:1.06;
  color:var(--ivory);text-wrap:balance;text-shadow:0 4px 30px rgba(0,0,0,.25);
}
.thankyou__text{
  max-width:53ch;margin:0 auto;font-size:.86rem;line-height:1.95;
  color:rgba(247,242,234,.76);
}
.thankyou__names{
  margin-top:clamp(38px,6vw,58px);font-family:var(--serif);font-weight:300;
  font-size:clamp(1.9rem,3.5vw,2.7rem);line-height:1;color:var(--ivory);
  display:flex;align-items:baseline;justify-content:center;gap:.12em;
}
.thankyou__names i{font-style:italic;color:var(--champagne);font-size:.7em}
.thankyou__date{
  margin-top:13px;font-family:var(--sans);font-size:.56rem;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--champagne);
}
.site-footer{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:17px;
  padding:22px var(--gutter);
  font-family:var(--sans);font-size:.48rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(247,242,234,.5);
}
.footer__mono{font-family:var(--serif);font-size:1.1rem;letter-spacing:.05em;color:rgba(247,242,234,.8)}
.footer__line{width:34px;height:1px;background:rgba(247,242,234,.22)}
.site-footer a{transition:color .3s}
.site-footer a:hover{color:var(--champagne)}

/* ══════════════════ UI: SOUND / TOAST / LIGHTBOX / REVEAL ══════════════════ */
.sound-toggle{
  position:fixed;right:clamp(14px,2vw,22px);
  bottom:calc(clamp(14px,2vw,22px) + env(safe-area-inset-bottom, 0px));
  z-index:300;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(198,168,120,.30);
  background:rgba(247,242,234,.55);color:var(--espresso);
  display:grid;place-items:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:.45;
  transition:color .3s var(--ease),background .3s var(--ease),opacity .5s var(--ease);
}
.sound-toggle::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.sound-toggle:hover,.sound-toggle:focus-visible,.sound-toggle.is-awake{opacity:1;background:rgba(247,242,234,.92)}
.sound-toggle.is-playing{opacity:.8}
.sound-toggle.is-playing.is-awake,.sound-toggle.is-playing:hover{opacity:1}
.sound-toggle svg{width:15px;height:15px}
.sound-toggle__off{display:none}
.sound-toggle[aria-pressed="false"] .sound-toggle__on{display:none}
.sound-toggle[aria-pressed="false"] .sound-toggle__off{display:block}
.sound-toggle.is-loading svg{animation:soundPulse 1.2s ease-in-out infinite}
.sound-toggle.is-error{border-color:rgba(140,74,60,.55)}
@keyframes soundPulse{0%,100%{opacity:.55}50%{opacity:1}}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);
  z-index:500;max-width:min(90vw,430px);padding:12px 18px;
  background:var(--espresso);color:var(--ivory);
  font-family:var(--sans);font-size:.62rem;font-weight:500;letter-spacing:.04em;
  text-align:center;opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

.lightbox{
  position:fixed;inset:0;z-index:400;background:rgba(18,13,10,.96);
  display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto;
  align-items:center;justify-content:center;gap:18px;
  padding:clamp(18px,4vw,42px);color:var(--ivory);
}
.lightbox__figure{
  grid-column:1 / 4;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-width:0;max-height:calc(100svh - 110px);
}
.lightbox__image{
  max-width:min(88vw,1200px);max-height:calc(100svh - 160px);
  width:auto;height:auto;object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.lightbox__figure figcaption{
  display:flex;align-items:center;gap:18px;
  font-family:var(--sans);font-size:.55rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(247,242,234,.62);
}
.lightbox__figure figcaption span:first-child{color:rgba(247,242,234,.85)}
.lightbox__close{
  position:fixed;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);
  width:44px;height:44px;border:1px solid rgba(247,242,234,.22);
  display:grid;place-items:center;color:var(--ivory);z-index:2;
}
.lightbox__close svg{width:18px;height:18px}
.lightbox__nav{
  width:44px;height:44px;border:1px solid rgba(247,242,234,.22);
  display:grid;place-items:center;color:var(--ivory);z-index:2;
}
.lightbox__nav svg{width:18px;height:18px}
.lightbox__nav--prev{grid-column:1;grid-row:2;justify-self:start}
.lightbox__nav--next{grid-column:3;grid-row:2;justify-self:end}
.lightbox__nav--prev svg{transform:rotate(180deg)}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(247,242,234,.1)}

[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease),transform 1.2s var(--ease);
  transition-delay:var(--d,0s);
}
[data-reveal].is-in{opacity:1;transform:none}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width:1100px){
  .rsvp__grid{gap:54px}
  .hero__names{font-size:clamp(2.8rem,7vw,5.8rem)}
}

@media (max-width:980px){
  .site-nav{display:none}
  .site-head__meta{display:none}
  .menu-toggle{display:grid}
  .mobile-nav{display:block}
  .site-head__inner{height:50px}

  .hero__content{padding-top:116px;padding-bottom:28px}
  .hero__main{max-width:720px;margin-bottom:60px}
  .hero__names{font-size:clamp(2.7rem,7.1vw,4.8rem)}
  .hero__quote{max-width:32ch}

  .rsvp__grid{grid-template-columns:1fr;gap:38px}
  .rsvp__intro{position:static;max-width:680px}
  .rsvp__intro h2{font-size:clamp(2.7rem,6vw,4rem)}
  .rsvp__panel{max-width:680px}

}

@media (max-width:760px){
  :root{--gutter:20px}
  .section,[id]{scroll-margin-top:64px}
  .site-head__inner{height:54px;gap:16px}
  .brand__mono{font-size:1.2rem}
  .menu-toggle{width:36px;height:36px}
  .site-head.is-glass::before,.site-head.is-menu::before,
  .site-head.is-glass::after,.site-head.is-menu::after{border-radius:0 0 10px 10px}
  .mobile-nav{padding-inline:var(--gutter)}
  .sound-toggle{width:32px;height:32px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
  .sound-toggle svg{width:14px;height:14px}

  .opening__inner{padding:9vh 20px 10vh;gap:18px}
  .opening__line{font-size:clamp(1rem,4.2vw,2rem);max-width:calc(100vw - 32px)}
  .opening__stage{width:min(78vw,320px)}
  .ringbox{transform:none}
  .box-corner{width:38px;height:38px}
  .opening__table{height:36vh;transform:perspective(900px) rotateX(10deg)}
  .opening__hint{font-size:.57rem;letter-spacing:.2em}
  .opening__hint::before,.opening__hint::after{width:17px}
  .lid-filigree{width:52px;height:52px}
  .lid-filigree--tl{left:10px;top:8px}.lid-filigree--tr{right:10px;top:8px}
  .lid-filigree--bl{left:10px;bottom:6px}.lid-filigree--br{right:10px;bottom:6px}
  .lid-plate{min-width:84px}
  .box-front__date{font-size:.34rem}

  .hero__content{padding-top:104px;padding-bottom:26px}
  .hero__main{margin-bottom:54px;max-width:none}
  .hero__names{flex-direction:column;align-items:flex-start;gap:0;font-size:clamp(2.35rem,11.8vw,3.45rem);line-height:.92}
  .hero__names i{font-size:.54em;margin:.02em 0 .01em;line-height:.7;align-self:flex-start}
  .hero__date{margin-top:23px;font-size:.54rem;letter-spacing:.22em;gap:8px}
  .hero__quote{margin-top:15px;font-size:1.2rem;max-width:26ch}
  .count{margin-top:27px;width:100%}
  .count__item{flex:1;min-width:0;padding:0 10px}
  .count__item:first-child{padding-left:0}
  .count__num{font-size:1.62rem}
  .count__label{font-size:.4rem;letter-spacing:.15em}
  .hero__scroll{font-size:.45rem;letter-spacing:.18em;gap:10px}
  .hero__scroll-line{width:32px}
  .hero__shade{background:linear-gradient(90deg,rgba(24,18,14,.7) 0%,rgba(24,18,14,.3) 70%,rgba(24,18,14,.42) 100%),linear-gradient(180deg,rgba(24,18,14,.45) 0%,transparent 30%,rgba(24,18,14,.8) 100%)}

  .btn{font-size:.52rem;padding:12px 14px;letter-spacing:.14em}

  .rsvp{padding:76px 0}
  .rsvp__grid{gap:30px}
  .rsvp__intro h2{font-size:clamp(2.4rem,9.5vw,3.25rem);line-height:1.02;margin:15px 0 18px}
  .rsvp__lead{font-size:.83rem;line-height:1.9}
  .rsvp__guest{font-size:.49rem;margin-top:22px;padding-top:16px}
  .thankyou{min-height:90svh;padding:84px 0 100px}
  .thankyou__title{font-size:clamp(2.2rem,9.5vw,3.2rem);margin:18px auto 20px}
  .thankyou__text{font-size:.79rem;max-width:40ch}
  .thankyou__names{font-size:1.8rem;margin-top:34px}
  .thankyou__date{font-size:.5rem}
  .site-footer{font-size:.43rem;gap:12px;padding-bottom:18px}
  .site-footer .footer__line{width:24px}
}

@media (max-width:520px){
  .opening__stage{width:min(82vw,292px)}
  .opening__line{font-size:clamp(.98rem,4.1vw,1.35rem)}
  .opening__hint{font-size:.55rem}
  .lid-plate__sub{font-size:.3rem}
  .box-front__mono{font-size:1.05rem}
  .hero__names{font-size:clamp(2.25rem,11.4vw,3.2rem)}
  .count__num{font-size:1.5rem}
  .count__item{padding:0 8px}
  .count__label{font-size:.37rem;letter-spacing:.12em}
  .hero__quote{font-size:1.12rem}
  .rsvp__intro h2{font-size:2.35rem}
  .thankyou__title{font-size:2.15rem}
  .lightbox{padding:12px;gap:10px}
  .lightbox__image{max-width:94vw;max-height:70svh}
  .lightbox__close{top:12px;right:12px}
  .lightbox__nav{width:40px;height:40px}
}

/* ══════════════════ REDUCED MOTION ══════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .opening__bg img{animation:none}
  .opening__line,.opening__stage,.opening__hint{opacity:1!important;transform:none!important}
  .opening__caret{display:none!important}
  .opening.is-opening .opening__stage{transform:none}
  [data-reveal],.hero__names,.hero__date,.hero__quote,.count,.hero__scroll{
    opacity:1!important;transform:none!important;
  }
  .hero__scroll-line::after{animation:none}
}

/* ══════════════════ MAIN PAGE SCROLLBAR — DESKTOP GLASS / TOUCH HIDDEN ══════════════════ */
/* Chỉ áp dụng cho thanh cuộn của trang chính (html), không đụng scrollbar trong lightbox hay vùng cuộn riêng. */
@media (hover:hover) and (pointer:fine){
  @supports selector(::-webkit-scrollbar){
    html::-webkit-scrollbar{
      width:6px;height:6px;background:transparent;
    }
    html::-webkit-scrollbar-track{
      background:transparent;border:0;
    }
    html::-webkit-scrollbar-thumb{
      min-height:44px;
      background-color:rgba(198,168,120,.28);
      background-image:linear-gradient(180deg,rgba(238,226,208,.38),rgba(198,168,120,.22));
      border:0;
      border-radius:999px;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
      transition:background-color .25s ease,box-shadow .25s ease;
    }
    html::-webkit-scrollbar-thumb:hover{
      background-color:rgba(198,168,120,.46);
      background-image:linear-gradient(180deg,rgba(238,226,208,.58),rgba(198,168,120,.36));
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
    }
    html::-webkit-scrollbar-thumb:active{
      background-color:rgba(148,122,92,.56);
      background-image:linear-gradient(180deg,rgba(214,190,156,.7),rgba(148,122,92,.5));
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
    }
    html::-webkit-scrollbar-button{display:none;width:0;height:0}
    html::-webkit-scrollbar-corner{background:transparent}
  }
}
@supports not selector(::-webkit-scrollbar){
  @media (hover:hover) and (pointer:fine){
    html{scrollbar-width:thin;scrollbar-color:rgba(198,168,120,.42) transparent}
    body,body *{scrollbar-width:auto;scrollbar-color:auto}
  }
}
/* Mobile / tablet / touch: ẩn phần hiển thị thanh cuộn; vẫn cuộn bằng vuốt và bàn phím. */
@media (hover:none), (pointer:coarse){
  html{scrollbar-width:none;-ms-overflow-style:none}
  body,body *{scrollbar-width:auto;scrollbar-color:auto}
  html::-webkit-scrollbar{display:none;width:0;height:0}
}

/* utility states */
body.lightbox-open{overflow:hidden}
.hero__names:focus,.hero__names:focus-visible{outline:none}

/* ══════════════════ OPENING — REAL PHOTO PAIR ══════════════════ */
.opening{background:#17120E}
.opening__scene{position:absolute;inset:0;z-index:2;overflow:hidden;background:#17120E}
.opening__photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:64% center;
  transform-origin:64% 58%;
  transition:opacity .25s var(--ease),transform .25s var(--ease-soft);
  will-change:opacity,transform;
}
.opening__photo--closed{z-index:1;opacity:1;transform:scale(1.015)}
.opening__photo--open{z-index:2;opacity:0;transform:scale(1.035)}
.opening__shade{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(15,11,8,.68) 0%,rgba(15,11,8,.3) 27%,rgba(15,11,8,.04) 55%,rgba(15,11,8,.42) 100%),
    radial-gradient(85% 75% at 50% 46%,transparent 0%,rgba(15,11,8,.16) 100%);
}
.opening__flash{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 64% 60%,rgba(255,241,205,.58),rgba(255,241,205,.15) 27%,transparent 56%);
  mix-blend-mode:screen;transition:opacity .8s var(--ease);
}
.opening__inner{
  position:relative;z-index:5;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  gap:0;padding:clamp(92px,15vh,150px) var(--gutter) clamp(38px,8vh,78px);
  pointer-events:none;transition:opacity 1s var(--ease);
}
.opening__line{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(.98rem,3.25vw,2.8rem);line-height:1.18;
  color:var(--ivory);text-align:center;max-width:calc(100vw - 2 * var(--gutter));
  white-space:pre-line;letter-spacing:.005em;min-height:3.55em;
  text-shadow:0 3px 30px rgba(0,0,0,.48),0 1px 4px rgba(0,0,0,.28);
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}
.opening__line::after{content:"";display:block;width:42px;height:1px;background:rgba(198,168,120,.66);margin:clamp(14px,2.2vh,22px) auto 0}
.opening__hint{
  position:relative;z-index:5;margin:0;
  font-family:var(--sans);font-size:.58rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(247,242,234,.74);
  display:flex;align-items:center;gap:12px;text-shadow:0 1px 12px rgba(0,0,0,.4);
  transition:opacity .6s var(--ease),transform .7s var(--ease);
}
.opening__hint::before,.opening__hint::after{content:"";width:24px;height:1px;background:rgba(247,242,234,.34)}
.opening__hint::after{animation:hintPulse 2.8s ease-in-out infinite}
.opening__tap{
  position:absolute;inset:0;z-index:4;width:100%;height:100%;
  border:0;border-radius:0;background:transparent;padding:0;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.opening__tap:focus-visible{outline:1px solid rgba(247,242,234,.55);outline-offset:-12px}
.opening.is-opening .opening__photo--open{opacity:1;transform:scale(1.06)}
.opening.is-opening .opening__photo--closed{transform:scale(1.035)}
.opening.is-opening .opening__flash{opacity:0;animation:openingFlash 1.45s var(--ease) forwards}
.opening.is-opening .opening__line,.opening.is-opening .opening__hint{opacity:0;transform:translateY(-7px)}
.opening.is-opening .opening__tap{pointer-events:none}
.opening.scene-ready.is-film .opening__scene{opacity:0;transition:opacity 1.7s var(--ease)}
.opening.is-film .opening__inner{opacity:0}
.opening.is-film .opening__film{opacity:1}
.opening.is-film .opening__tap{pointer-events:none}

@media (max-width:760px){
  .opening__photo{object-position:68% center;transform-origin:68% 58%}
  .opening__inner{padding:11vh 20px 9vh}
  .opening__line{font-size:clamp(.78rem,3.15vw,1.35rem);max-width:calc(100vw - 32px);min-height:3.55em;line-height:1.22}
  .opening__hint{font-size:.57rem;letter-spacing:.2em}
  .opening__hint::before,.opening__hint::after{width:17px}
}
@media (max-width:420px){
  .opening__line{font-size:clamp(.78rem,3.1vw,1.05rem);letter-spacing:0}
}

/* mobile safety for the closing frame */
@media (max-width:760px){
  .thankyou__content{width:100%;padding-inline:2px}
  .thankyou__title{
    font-size:clamp(1.75rem,7.2vw,2.6rem);line-height:1.1;max-width:100%;
    margin-inline:auto;padding-inline:6px;overflow-wrap:break-word;
  }
  .thankyou__text{max-width:100%;padding-inline:6px}
  .thankyou__names{
    font-size:clamp(1.45rem,6.1vw,2rem);flex-wrap:wrap;justify-content:center;
    row-gap:2px;padding-inline:6px;
  }
}

/* ══════════════════ OPENING — CINEMATIC LINE REVEAL ══════════════════ */
.opening__scene{
  opacity:0;transform:scale(1.02);transform-origin:64% 58%;
  animation:openingScene 1.45s var(--ease) forwards;
}
@keyframes openingScene{to{opacity:1;transform:scale(1)}}

.opening__line{
  opacity:1!important;animation:none!important;transform:none!important;
  width:min(74%,1000px);align-self:flex-start;text-align:left;
  white-space:normal;min-height:0;
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(.86rem,3.2vw,2.8rem);line-height:1.24;
  letter-spacing:.005em;color:#F7F0E5;
  text-shadow:0 2px 16px rgba(0,0,0,.38),0 1px 2px rgba(0,0,0,.18);
}
.opening__line::after{
  content:"";display:block;width:40px;height:1px;background:rgba(247,240,229,.55);
  margin:clamp(14px,2.2vh,22px) 0 0;opacity:0;
  animation:openingRule .9s var(--ease) 3.05s forwards;
}
.opening__line-span{
  display:block;opacity:0;transform:translateY(10px);filter:blur(3px);
  animation:openingLine 1.1s var(--ease) forwards;
}
.opening__line-span:nth-of-type(1){animation-delay:1s}
.opening__line-span:nth-of-type(2){animation-delay:1.55s}
.opening__line-span:nth-of-type(3){animation-delay:2.1s}
.opening__heart{
  display:inline-block;width:.68em;height:.68em;margin-left:.14em;
  color:#B79372;vertical-align:-.02em;
  opacity:0;transform:scale(.92);
  animation:openingHeart .75s var(--ease) 2.95s forwards;
  font-style:normal;
}
.opening__heart path{fill:currentColor}
.opening__hint{
  opacity:0;transform:translateY(6px);
  animation:openingHint .9s var(--ease) 3.5s forwards;
  gap:0;letter-spacing:.22em;color:rgba(247,240,229,.68);
}
.opening__hint-action{font-style:normal;color:var(--champagne);font-weight:600}
.opening__hint::before,.opening__hint::after{display:none}
.opening:has(.opening__tap:hover) .opening__hint{color:rgba(247,240,229,.95)}
.opening:has(.opening__tap:active) .opening__hint{transform:scale(.985)}
@keyframes openingLine{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes openingHeart{to{opacity:1;transform:scale(1)}}
@keyframes openingRule{to{opacity:1}}
@keyframes openingFlash{0%{opacity:0}34%{opacity:.48}100%{opacity:0}}
@keyframes openingHint{to{opacity:1;transform:none}}
.opening.is-opening .opening__line,
.opening.is-opening .opening__hint{opacity:0!important;transform:translateY(-7px);transition:opacity .6s var(--ease),transform .7s var(--ease)}

@media (max-width:980px){
  .opening__line{width:min(84%,1000px)}
}
@media (max-width:760px){
  .opening__line{
    width:100%;align-self:center;font-size:clamp(.82rem,3.35vw,1.32rem);
    line-height:1.3;text-align:left;
  }
  .opening__line::after{width:32px;margin-top:13px}
  .opening__hint{font-size:.57rem;letter-spacing:.18em}
}
@media (prefers-reduced-motion: reduce){
  .opening__scene,.opening__line-span,.opening__heart,.opening__line::after,.opening__hint{
    opacity:1!important;transform:none!important;filter:none!important;animation:none!important;
  }
}



/* — anticipation hold: box open, surroundings darken, champagne bloom — */
.opening__anticipation{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:
    radial-gradient(circle at 64% 60%,rgba(255,235,190,.19) 0%,rgba(255,235,190,.06) 20%,transparent 42%),
    radial-gradient(ellipse at 50% 50%,transparent 0%,transparent 38%,rgba(39,35,22,.2) 72%,rgba(25,23,14,.38) 100%);
  transition:opacity .35s var(--ease);
}
.opening.is-holding .opening__anticipation{opacity:1}
.opening.scene-ready .opening__scene{animation:none;opacity:1}
.opening__flash{display:none!important}

/* ── Opening → Hero: coordinated cinematic crossfade ── */
.site.is-visible{transition:none;opacity:1}
.site:focus,.site:focus-visible{outline:none}
.opening{
  transform-origin:50% 52%;
  transition:opacity .9s var(--ease),visibility .9s var(--ease),transform 1.35s var(--ease-soft);
}
.opening.is-leaving{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(1.015);
}
.opening.is-done{display:none}

.hero:focus,.hero:focus-visible{outline:none}

/* ══════════════════ INVITATION — REVEAL ══════════════════ */
.invite-reveal{opacity:1;transform:none}
#invitation.is-reveal-armed .invite-reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity 1.05s var(--ease),transform 1.25s var(--ease);
  transition-delay:var(--d,0s);
}
#invitation.is-reveal-armed .invite-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  #invitation.is-reveal-armed .invite-reveal{opacity:1;transform:none;transition:none}
}

/* ══════════════════ 04. WEDDING DETAILS ══════════════════ */
.wedding-details{
  position:relative;
  background:transparent;
  padding:clamp(80px,10vw,140px) 0 clamp(88px,11vw,150px);
}
.details-head{
  max-width:880px;margin:0 auto clamp(40px,6vw,70px);text-align:center;
}
.details-title{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(2.8rem,5vw,4.8rem);line-height:1;letter-spacing:-.02em;
  color:var(--espresso);text-wrap:balance;
}
.details-events{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.detail-event{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(30px,4vw,48px) clamp(22px,4vw,54px);
}
.detail-event + .detail-event{border-left:1px solid var(--line-soft)}
.detail-event__top{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.detail-event__index{
  font-family:var(--serif);font-size:clamp(2rem,3vw,2.8rem);font-weight:300;
  line-height:.8;color:var(--gold-deep);
}
.detail-event__eyebrow{
  font-family:var(--sans);font-size:.53rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);
}
.detail-event__title{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,3.2vw,3rem);line-height:1.05;color:var(--espresso);
}
.detail-event__when{
  margin-top:clamp(24px,3.5vw,36px);padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.detail-event__date{
  margin:0;font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
}
.detail-event__times{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:12px}
.detail-event__time-label{
  display:block;font-family:var(--sans);font-size:.52rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(107,81,67,.72);
}
.detail-event__time-value{
  display:block;margin-top:7px;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.95rem,3vw,2.6rem);line-height:1.05;letter-spacing:.02em;
  color:var(--espresso);font-variant-numeric:lining-nums tabular-nums;
}
.detail-event__place{
  display:flex;gap:12px;margin-top:clamp(24px,3.5vw,34px);
  padding-top:18px;border-top:1px solid var(--line-soft);
}
.detail-event__pin{
  width:17px;height:17px;flex:none;margin-top:3px;color:var(--gold-deep);
}
.detail-event__venue{
  margin:0;font-family:var(--serif);font-size:1.25rem;font-weight:400;
  line-height:1.25;color:var(--espresso);
}
.detail-event__room{
  margin:4px 0 0;font-family:var(--sans);font-size:.53rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
}
.detail-event__address{
  display:block;width:100%;margin:5px 0 0;padding:4px 0 5px;
  border:0;border-bottom:1px solid transparent;background:none;
  font-family:var(--sans);font-size:.72rem;line-height:1.8;
  color:var(--mocha);text-align:left;overflow-wrap:anywhere;
  cursor:copy;min-height:32px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.detail-event__address:hover{color:var(--gold-deep);border-bottom-color:var(--line)}
.detail-event__address:focus-visible{outline:1px solid var(--gold-deep);outline-offset:3px}
.detail-event__actions{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:flex-start;
  margin-top:auto;padding-top:clamp(28px,4vw,40px);
}
.detail-action{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:6px 0;border:0;border-bottom:1px solid transparent;
  background:none;color:var(--espresso);text-align:left;text-decoration:none;
  font-family:var(--sans);font-size:.6rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.detail-action svg{width:16px;height:16px;flex:none;color:var(--gold-deep)}
.detail-action:hover{color:var(--gold-deep);border-bottom-color:var(--line)}
.detail-action:focus-visible{outline:1px solid var(--gold-deep);outline-offset:4px}
.detail-action[aria-expanded="true"]{color:var(--gold-deep);border-bottom-color:var(--line)}
.detail-action.is-disabled{color:rgba(107,81,67,.5);cursor:not-allowed;pointer-events:none}
.calendar-wrap{position:relative}
.calendar-menu{
  position:absolute;left:0;top:calc(100% + 8px);z-index:30;
  width:250px;min-width:250px;max-width:calc(100vw - 40px);padding:16px;
  background:var(--ivory);border:1px solid var(--line);
  box-shadow:0 18px 40px -28px rgba(56,42,36,.5);
}
.calendar-menu[hidden]{display:none}
.calendar-menu__title{
  margin:0 0 8px;font-family:var(--sans);font-size:.51rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);
}
.calendar-menu__item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:42px;padding:10px 0;border:0;border-bottom:1px solid var(--line-soft);
  background:none;color:var(--espresso);text-align:left;text-decoration:none;
  font-family:var(--sans);font-size:.61rem;font-weight:500;letter-spacing:.04em;
  cursor:pointer;transition:color .3s var(--ease);
}
.calendar-menu__item:last-child{border-bottom:0}
.calendar-menu__item:hover{color:var(--gold-deep)}
.calendar-menu__item:focus-visible{outline:1px solid var(--gold-deep);outline-offset:2px}
.calendar-menu__item svg{width:14px;height:14px;flex:none;color:var(--gold-deep)}
.details-gallery{
  margin:clamp(42px,6vw,72px) 0 0;
}
.details-gallery__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,2.2vw,22px);
  width:min(100%,980px);margin-inline:auto;
  align-items:start;
}
.details-gallery__item{
  margin:0;overflow:hidden;background:var(--beige);
  border-radius:clamp(14px,2vw,20px);
  box-shadow:var(--shadow-soft);
}
.details-gallery__item img{
  display:block;width:100%;height:100%;aspect-ratio:3/4;
  object-fit:cover;object-position:center 48%;
  filter:saturate(.78) sepia(.05) contrast(.99) brightness(1.01);
}
.details-gallery__item:nth-child(2) img{object-position:center 52%}
.details-gallery.is-single .details-gallery__grid{grid-template-columns:minmax(0,1fr);max-width:460px}
.details-gallery[hidden]{display:none}
.details-nojs{
  max-width:60ch;margin:0 auto;padding:20px;border-top:1px solid var(--line-soft);
  font-family:var(--sans);font-size:.72rem;line-height:1.8;color:var(--mocha);text-align:center;
}
.details-reveal{opacity:1;transform:none}
#details.is-reveal-armed .details-reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity 1s var(--ease),transform 1.2s var(--ease);
  transition-delay:var(--d,0s);
}
#details.is-reveal-armed .details-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  #details.is-reveal-armed .details-reveal{opacity:1;transform:none;transition:none}
}
@media (max-width:980px){
  .details-events{grid-template-columns:1fr}
  .detail-event + .detail-event{border-left:0;border-top:1px solid var(--line-soft)}
}
@media (max-width:760px){
  .wedding-details{padding-top:62px;padding-bottom:82px}
  .details-head{margin-bottom:36px}
  .details-title{font-size:clamp(2.35rem,10vw,3.4rem)}
  .detail-event{padding:30px 2px}
  .detail-event__title{font-size:clamp(2rem,8vw,2.5rem)}
  .detail-event__date{font-size:.62rem;letter-spacing:.16em}
  .detail-event__times{gap:12px 26px}
  .detail-event__time-value{font-size:1.85rem;margin-top:6px}
  .detail-event__actions{flex-direction:column;align-items:stretch;gap:4px;padding-top:26px}
  .detail-action{width:100%;justify-content:flex-start}
  .calendar-wrap{width:100%}
  .calendar-menu{left:0;right:0;width:auto;min-width:0;max-width:none}
  .details-gallery{margin-top:34px}
  .details-gallery__grid{gap:12px}
}

/* ══════════════════ SITE ATMOSPHERE — CHIFFON / WARM IVORY ══════════════════ */
.content-shell{
  position:relative;
  border-top:1px solid var(--hairline);
  background:
    radial-gradient(90% 42% at 50% 0%, rgba(255,252,246,.58), transparent 72%),
    linear-gradient(180deg, var(--paper-hi) 0%, var(--paper) 30%, var(--paper-warm) 70%, var(--paper-low) 100%);
}
.content-shell::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(70px,9vh,110px);
  z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(24,18,14,.20) 0%, rgba(24,18,14,0) 100%);
}
.content-atmosphere{
  position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
}
.content-shell > section > .container{position:relative;z-index:2}
.content-atmosphere::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(130px,19vh,250px);
  pointer-events:none;mix-blend-mode:multiply;
  background:
    radial-gradient(62% 80% at 14% 0%, rgba(198,168,120,.12), transparent 70%),
    linear-gradient(180deg, rgba(198,168,120,.08) 0%, rgba(255,251,245,.04) 48%, transparent 100%);
}
.atmosphere-veil{
  position:absolute;pointer-events:none;
  filter:blur(34px) saturate(.9);
  opacity:.5;mix-blend-mode:normal;
  will-change:transform;
  animation-duration:48s;animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;animation-direction:alternate;
}
.atmosphere-veil::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(99deg,rgba(255,255,255,.075) 0 2px,transparent 2px 28px);
  opacity:.45;mix-blend-mode:soft-light;
}
.atmosphere-veil--left{
  left:-22vw;top:-12%;width:64vw;height:124%;
  background:
    linear-gradient(102deg,rgba(255,253,248,0) 0%,rgba(255,253,248,.4) 16%,rgba(255,252,246,.08) 29%,rgba(196,176,146,.12) 41%,rgba(255,253,248,.3) 55%,rgba(255,252,246,.06) 69%,rgba(181,154,114,.1) 82%,transparent 100%),
    radial-gradient(70% 55% at 6% 38%,rgba(255,249,237,.48),transparent 72%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 30%,rgba(0,0,0,.42) 62%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 30%,rgba(0,0,0,.42) 62%,transparent 100%);
  animation-name:chiffonLeft;
}
.atmosphere-veil--right{
  right:-24vw;top:4%;width:62vw;height:130%;
  background:
    linear-gradient(258deg,rgba(255,253,248,0) 0%,rgba(255,253,248,.36) 18%,rgba(255,252,246,.07) 31%,rgba(196,176,146,.1) 44%,rgba(255,253,248,.26) 58%,rgba(255,252,246,.05) 72%,rgba(181,154,114,.08) 84%,transparent 100%),
    radial-gradient(70% 55% at 94% 62%,rgba(255,249,237,.44),transparent 72%);
  -webkit-mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.9) 30%,rgba(0,0,0,.4) 62%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.9) 30%,rgba(0,0,0,.4) 62%,transparent 100%);
  animation-name:chiffonRight;
  animation-duration:58s;
  animation-delay:-18s;
}
@keyframes chiffonLeft{
  0%{transform:translate3d(-3%,0,0) rotate(-7deg) scale(1.04)}
  50%{transform:translate3d(1.5%,-1.4%,0) rotate(-4.5deg) scale(1.07)}
  100%{transform:translate3d(-1%,1.2%,0) rotate(-8deg) scale(1.03)}
}
@keyframes chiffonRight{
  0%{transform:translate3d(3%,0,0) rotate(7deg) scale(1.04)}
  50%{transform:translate3d(-1.5%,1.2%,0) rotate(4.5deg) scale(1.07)}
  100%{transform:translate3d(1%,-1.4%,0) rotate(8deg) scale(1.03)}
}
@media (max-width:760px){
  .atmosphere-veil{filter:blur(24px) saturate(.88);opacity:.42;width:74vw}
  .atmosphere-veil--left{left:-34vw;top:-8%;height:116%}
  .atmosphere-veil--right{right:-36vw;top:8%;height:116%;animation-duration:64s}
}
@media (prefers-reduced-motion: reduce){
  .atmosphere-veil{animation:none}
}

/* Chiffon edge light on the final dark section, under its content. */
.thankyou::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 85% at 0% 46%, rgba(248,243,235,.15), transparent 62%),
    radial-gradient(52% 80% at 100% 38%, rgba(248,243,235,.11), transparent 62%);
  mix-blend-mode:soft-light;
}

/* ══════════════════ OUR STORY + GALLERY — VERTICAL CARD ══════════════════ */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.story{
  background:transparent;
  padding:clamp(54px,8vw,110px) 0;
}
.story-stage{display:flex;justify-content:center}
.story-card{
  width:min(1120px,100%);
  position:relative;
  background:
    linear-gradient(138deg,rgba(255,250,242,.60) 0%,rgba(244,234,220,.44) 55%,rgba(198,168,120,.12) 100%);
  border:1px solid rgba(198,168,120,.22);
  border-radius:clamp(18px,3vw,26px);
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(16px) saturate(1.04);
  backdrop-filter:blur(16px) saturate(1.04);
  overflow:hidden;
}
.gallery-layout{
  display:flex;align-items:flex-start;gap:12px;padding:12px;
}
.gallery-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.gallery-col--wide{flex:5}
.gallery-col--mid{flex:4}
.gallery-col--narrow{flex:3}
.gallery-item{margin:0;min-width:0}
.gallery-item__button{
  display:block;width:100%;padding:0;border:0;border-radius:10px;
  overflow:hidden;background:var(--beige);cursor:zoom-in;
}
.gallery-item__button img{
  display:block;width:100%;height:auto;object-fit:cover;
  border-radius:10px;
  filter:saturate(.88) contrast(.99) sepia(.025);
  transition:transform .35s var(--ease),opacity .35s var(--ease),filter .35s var(--ease);
}
.gallery-item__button:hover img{transform:scale(1.02);opacity:.96;filter:saturate(.96) contrast(1.01) sepia(.015)}
.gallery-item__button:focus-visible{outline:1px solid var(--gold-deep);outline-offset:3px}
.gallery-item[data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .9s var(--ease);
}
.gallery-item[data-reveal].is-in{opacity:1;transform:none}

/* Cinematic gallery video — no visible copy */
.gallery-item--video{position:relative}
.gallery-video__frame{
  position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;
  border-radius:10px;background:#17110D;
}
.gallery-video__media{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center 50%;
  filter:saturate(.9) contrast(1.01) sepia(.02);
}
.gallery-video__frame::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:30%;
  background:linear-gradient(180deg,transparent,rgba(18,13,10,.5));
  pointer-events:none;z-index:1;
}
.gallery-video__controls{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:2;
  display:flex;align-items:center;gap:7px;
}
.gallery-video__btn,.video-lightbox__btn{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:grid;place-items:center;color:var(--ivory);
  border:1px solid rgba(247,242,234,.26);
  background:rgba(24,18,14,.46);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.gallery-video__btn:hover,.video-lightbox__btn:hover{background:rgba(247,242,234,.18);border-color:rgba(247,242,234,.5)}
.gallery-video__btn:focus-visible,.video-lightbox__btn:focus-visible{outline:1px solid var(--champagne);outline-offset:3px}
.gallery-video__btn svg,.video-lightbox__btn svg{width:15px;height:15px}
.gallery-video__expand{margin-left:auto}
.gallery-video__sound[hidden]{display:none}

.gallery-masonry{display:grid;gap:10px;padding:10px}
.gallery-masonry__feature{min-width:0}
.gallery-masonry__feature--video{width:100%;margin-inline:0}
.gallery-masonry__cols{display:flex;align-items:flex-start;gap:10px}
.gallery-masonry__col{display:flex;flex-direction:column;gap:10px;flex:1 1 0;min-width:0}
.gallery-masonry .gallery-item{order:0}
.gallery-masonry .gallery-item--video{width:100%;justify-self:auto}
.gallery-masonry .gallery-video__frame{aspect-ratio:4/5;max-height:70svh}
.gallery-masonry .gallery-item__button img{width:100%;height:auto}

/* Image lightbox: no caption, no count */
.lightbox__figure{gap:0;touch-action:none}
.lightbox__figure figcaption{display:none}
.lightbox__image{max-height:calc(100svh - 130px)}

/* Video viewing mode */
.video-lightbox{
  position:fixed;inset:0;z-index:450;background:rgba(18,13,10,.97);
  display:grid;place-items:center;padding:clamp(16px,4vw,42px);
}
.video-lightbox__stage{
  position:relative;width:min(92vw, calc((100svh - 180px) * .8), 430px);
  aspect-ratio:4/5;max-height:calc(100svh - 140px);
  background:#0F0B09;border:1px solid rgba(247,242,234,.16);
  overflow:hidden;
}
.video-lightbox__media{width:100%;height:100%;display:block;object-fit:cover;background:#0F0B09}
.video-lightbox__close{
  position:fixed;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);
  width:44px;height:44px;border:1px solid rgba(247,242,234,.22);
  display:grid;place-items:center;color:var(--ivory);z-index:3;background:rgba(18,13,10,.3);
}
.video-lightbox__close svg{width:18px;height:18px}
.video-lightbox__controls{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:center;gap:10px;padding:18px;
  background:linear-gradient(180deg,transparent,rgba(18,13,10,.62));
}
.video-lightbox__btn{width:44px;height:44px}
.video-lightbox__stage:fullscreen{width:100vw;height:100vh;max-height:none;border:0;background:#000}
.video-lightbox__stage:fullscreen .video-lightbox__media{object-fit:contain}

@media (max-width:980px){
  .story{padding:36px 16px 52px}
  .story .container.story-stage{width:100%}
  .story-card{width:min(760px,100%);border-radius:20px}
  .gallery-layout{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px;
  }
  .gallery-col{display:contents}
  .gallery-item{order:var(--m,0)}
  .gallery-item__button img,.gallery-video__frame{border-radius:8px}
}
@media (max-width:760px){
  .story-card{
    -webkit-backdrop-filter:blur(14px) saturate(1.06);
    backdrop-filter:blur(14px) saturate(1.06);
    background:
      linear-gradient(138deg,rgba(255,250,242,.64) 0%,rgba(244,234,220,.48) 55%,rgba(198,168,120,.14) 100%);
  }
}
@media (max-width:600px){
  .story{padding:26px 12px 42px}
  .story-card{width:100%;border-radius:18px}
  .gallery-item--lead,.gallery-item--last{grid-column:1 / -1}
  .gallery-item--video{grid-column:1 / -1;width:75%;justify-self:center}
  .gallery-video__btn{width:44px;height:44px}
}
@media (prefers-reduced-motion: reduce){
  .gallery-item__button img,.gallery-item[data-reveal]{transition:none}
  .gallery-item[data-reveal]{opacity:1;transform:none}
  .gallery-item__button:hover img{transform:none}
}

/* ══════════════════ 06. THANK YOU — CINEMATIC WARM BROWN ══════════════════ */
#thankyou{
  position:relative;z-index:2;
  background:#281810;
  border-top:1px solid var(--hairline);
  min-height:94svh;
  padding:clamp(104px,13vw,160px) 0 clamp(112px,13vw,160px);
}
#thankyou .thankyou__bg{background:#2A1911}
#thankyou .thankyou__content{max-width:1080px}
#thankyou .thankyou__bg img{
  position:absolute;left:0;right:0;bottom:0;width:100%;height:74%;
  object-fit:cover;object-position:center 58%;
  filter:brightness(.52) saturate(.84) sepia(.14) contrast(1.06);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 100%);
}
#thankyou .thankyou__shade{
  background:
    linear-gradient(180deg,rgba(37,22,14,.96) 0%,rgba(49,29,18,.84) 28%,rgba(61,36,22,.52) 54%,rgba(37,22,14,.76) 100%),
    radial-gradient(72% 56% at 50% 83%,rgba(224,158,88,.25),transparent 72%);
}
#thankyou::after{display:none}
#thankyou .label{justify-content:center;color:var(--champagne)}
#thankyou .label::before{background:rgba(198,168,120,.62)}
#thankyou .label::after{
  content:"";display:inline-block;width:26px;height:1px;
  background:rgba(198,168,120,.62);
}
#thankyou .thankyou__title{
  max-width:100%;margin:24px auto 24px;font-size:clamp(2.5rem,3.2vw,3.05rem);
  color:#FAF3E7;text-shadow:0 5px 34px rgba(0,0,0,.28);
}
#thankyou .thankyou__text{
  max-width:59ch;color:rgba(250,243,231,.78);font-size:.86rem;line-height:1.95;
}
#thankyou .thankyou__names{color:#FAF3E7;margin-top:clamp(34px,5vw,52px)}
#thankyou .thankyou__names i{color:var(--champagne)}
#thankyou .thankyou__date{color:var(--champagne)}
#thankyou .site-footer{color:rgba(250,243,231,.52)}
#thankyou .footer__mono{color:rgba(250,243,231,.85)}
@media (max-width:980px){
  #thankyou .thankyou__title{max-width:100%;font-size:clamp(2.35rem,6.4vw,3.25rem)}
  #thankyou .thankyou__text{max-width:46ch}
}
@media (max-width:760px){
  #thankyou{padding:90px 0 104px}
  #thankyou .thankyou__bg img{height:70%;object-position:center 60%}
  #thankyou .thankyou__title{max-width:100%;font-size:clamp(2.15rem,8.8vw,3.1rem);margin:18px auto 20px}
  #thankyou .thankyou__text{font-size:.79rem;line-height:1.85;max-width:40ch}
  #thankyou .thankyou__names{font-size:1.8rem;margin-top:34px}
  #thankyou .site-footer{font-size:.43rem;gap:12px;padding-bottom:18px}
  #thankyou .site-footer .footer__line{width:24px}
}

/* Gallery glass — fallbacks must come after responsive overrides */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .story-card{background:rgba(246,238,227,.94)}
}
@media (prefers-reduced-transparency:reduce){
  .story-card{
    background:#F5EDE1;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-color:rgba(198,168,120,.16);
  }
}

/* ══════════════════ 03. INVITATION — STATIONERY LETTER ══════════════════ */
#invitation{
  padding:clamp(90px,11vw,150px) 0 clamp(78px,9vw,120px);
}
.invite-stage{display:flex;justify-content:center}
.invite-letter{
  position:relative;isolation:isolate;
  width:min(620px,100%);
  padding:46px clamp(20px,4.2vw,36px) 38px;
  background:
    radial-gradient(80% 55% at 20% 0%,rgba(255,255,255,.72),transparent 66%),
    linear-gradient(150deg,#FCF8F1 0%,#F5EDE1 100%);
  border:1px solid rgba(198,168,120,.32);
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 rgba(255,255,255,.62);
  overflow:visible;
}
.invite-letter::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.28;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(107,81,67,.14) .45px,transparent .6px);
  background-size:5px 5px;
}
.invite-letter__frame{
  position:absolute;inset:12px;z-index:0;pointer-events:none;
  width:calc(100% - 24px);height:calc(100% - 24px);
  overflow:visible;
}
.invite-letter__inner{position:relative;z-index:1;text-align:left}
.invite-rule{
  display:flex;align-items:center;justify-content:flex-start;gap:14px;
  margin:4px 0 22px;color:var(--champagne);
}
.invite-rule span{display:block;width:74px;height:1px;background:rgba(198,168,120,.34)}
.invite-rule i{display:block;width:5px;height:5px;border:1px solid var(--champagne);transform:rotate(45deg)}
.invite-letter__quote{
  margin:0;max-width:100%;font-family:var(--serif);font-weight:300;
  font-style:italic;font-size:clamp(1.15rem,5.8vw,2.5rem);line-height:1.22;
  letter-spacing:-.018em;color:var(--espresso);text-wrap:balance;
}
.invite-letter__quote em{font-style:italic;color:var(--mocha)}
.invite-rule--small{margin:20px 0 18px}
.invite-rule--small span{width:44px}
.invite-letter__copy{
  max-width:100%;margin:22px 0 0;
  font-family:var(--serif);font-size:.96rem;line-height:1.85;color:var(--mocha);
  text-wrap:pretty;hyphens:none;word-break:normal;
}
.invite-letter__copy p{margin:0 0 14px;text-wrap:pretty;hyphens:none;word-break:normal}
.invite-letter__copy p:last-child{margin-bottom:0}
.invite-letter__copy .invite-letter__salutation{font-style:italic;color:var(--mocha);margin-bottom:17px}
.invite-letter__closing{margin-top:28px;padding-top:0}
.invite-rule--tiny{margin:0 0 14px}
.invite-rule--tiny span{width:34px}
.invite-letter__with{
  margin:0;font-family:var(--sans);font-size:.47rem;font-weight:600;
  letter-spacing:.27em;text-transform:uppercase;color:var(--gold-deep);
}
.invite-letter__names{
  display:flex;align-items:baseline;justify-content:flex-start;flex-wrap:wrap;gap:.25em;
  margin:15px 0 0;font-family:var(--serif);font-size:1.08rem;line-height:1.2;
  color:var(--espresso);
}
.invite-letter__names i{
  font-style:italic;color:var(--champagne);font-size:.82em;padding:0 .1em;
}
.invite-letter__date{
  display:block;margin-top:7px;font-family:var(--sans);font-size:.46rem;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);
}
.invite-letter__seal{
  position:absolute;right:24px;bottom:24px;z-index:2;
  width:78px;height:78px;display:block;pointer-events:none;
  opacity:.7;transform:rotate(-4deg);
}
.invite-letter__seal img{width:100%;height:100%;display:block}
@media (max-width:980px){
  #invitation{padding:90px 0 100px}
  .invite-letter{width:min(600px,100%)}
  .invite-letter__quote{font-size:clamp(1.2rem,5.6vw,2.25rem)}
}
@media (max-width:760px){
  #invitation{padding:76px 0 92px}
  .invite-letter{padding:32px 20px 30px;box-shadow:0 20px 48px rgba(56,42,36,.11),inset 0 1px 0 rgba(255,255,255,.58)}
  .invite-letter__frame{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px)}
  .invite-rule{margin:2px 0 18px}
  .invite-rule span{width:48px}
  .invite-letter__quote{font-size:clamp(1.15rem,5.6vw,2.1rem);max-width:100%}
  .invite-letter__copy{font-size:.82rem;line-height:1.78;max-width:100%;margin-top:18px}
  .invite-letter__closing{margin-top:23px}
  .invite-letter__names{font-size:.98rem}
  .invite-letter__seal{left:auto;right:12px;bottom:14px;width:56px;height:56px;opacity:.7}
}
@media (prefers-reduced-motion: reduce){
  .invite-letter{transition:none}
}

/* Display type: Cormorant Garamond 400 for Vietnamese legibility */
.hero__names,
.hero__quote,
.invite-letter__quote,
.details-title,
.detail-event__title,
.rsvp__intro h2,
.rsvp__success-title,
.thankyou__title,
.thankyou__names{font-weight:400}