/* Luminance-to-alpha turns the existing mist into champagne-colored light.
   The normal-composited bloom, rather than tinted screen blending, covers the cut. */
/* The invitation fills its viewport; scrolling stays available without a rail. */
html{scrollbar-gutter:auto;scrollbar-width:none}
html::-webkit-scrollbar{display:none;width:0;height:0}
.entry-veil{position:fixed;inset:0;z-index:120;overflow:hidden;pointer-events:auto;isolation:isolate}
.entry-veil::before{
 content:'';position:absolute;z-index:0;pointer-events:none;
 left:var(--sg-light-x,50%);top:var(--sg-light-y,30%);width:100vmax;height:100vmax;
 background:radial-gradient(closest-side,#fff4d7 0%,#f8e1a8 36%,#efcb7e 52%,#d6a25780 78%,#d6a25700 100%);
 opacity:var(--entry-light-opacity,.52);
 transform:translate(-50%,-50%) scale(var(--entry-light-scale,.35));
 will-change:transform,opacity;animation-play-state:inherit;
}
.entry-veil video,.entry-veil img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;pointer-events:none;filter:url(#sg-golden-mist);opacity:.22}
.entry-veil img{opacity:0}
.entry-veil.mist-fallback video{visibility:hidden}
.entry-veil.mist-fallback img{animation:mist-still-pass 1600ms ease-in-out both}
.entry-veil.mist-fallback::before{animation-name:golden-light-pass;animation-duration:1600ms;animation-timing-function:ease-in-out;animation-fill-mode:both}
html[data-entry-active] body{overflow:hidden}
body.menu-open{overflow:hidden}
.menu-open .invitation-page .controls button{color:var(--ruby);text-shadow:none}
@keyframes mist-still-pass{0%{opacity:0;transform:scale(1)}42%,57%{opacity:.22;transform:scale(1.05)}100%{opacity:0;transform:scale(1.12)}}
@keyframes golden-light-pass{
 0%{opacity:var(--entry-light-opacity,.52);transform:translate(-50%,-50%) scale(var(--entry-light-scale,.35))}
 42%,57%{opacity:1;transform:translate(-50%,-50%) scale(4)}
 100%{opacity:0;transform:translate(-50%,-50%) scale(4.25)}
}

/* One gesture, one reveal. The keepsake screen carries no repeated invitation. */
.sg-object{top:56%;width:min(82vw,48svh,470px)}
.sg-object:focus-visible{outline:none}
.sg-gate:has(.sg-object:focus-visible) .sg-hint{text-decoration:underline;text-underline-offset:5px}
.sg-actions{bottom:max(12svh,calc(env(safe-area-inset-bottom) + 35px))}
.sg-hint{font-size:10px;letter-spacing:.15em;font-weight:400}
.sg-status{font-size:10px}
.sg-skip{font-size:9px;font-weight:400;opacity:.7}
.sg-gate.sg-opening .sg-skip{opacity:.7}

@font-face{
 font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;
 src:url('assets/fonts/pinyon-script.ttf') format('truetype');
}

/* Calligraphy emerges as the mist thins, with ruby, emerald and antique-gold ink. */
.hero{width:100%;height:100vh;height:100dvh;min-height:0}
.hero-world{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;filter:saturate(1.2) contrast(1.06) brightness(.98)}
.hero-world>.scene-picture,.hero-world>.scene-art,.hero-world>.scene-picture>.scene-art{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-wordmark{display:none}
.hero-inner{top:24%;left:8%;right:8%;max-width:680px;margin-inline:auto}
.hero-blessing{font-size:clamp(17px,2.2svh,21px);font-weight:500;line-height:1.22;letter-spacing:.025em;color:#284d43}
.hero-blessing span{display:block}
.hero h1{
 font-family:'Pinyon Script','Cormorant Garamond',Georgia,serif;
 font-style:normal;font-weight:400;font-size:clamp(72px,min(9vw,11.5svh),112px);
 letter-spacing:0;line-height:1.08;overflow-wrap:normal;
 margin:clamp(14px,2.5svh,25px) 0 8px;gap:0;
 color:#781839;
}
.hero-name{display:block;white-space:nowrap;padding-inline:.08em;max-width:none;-webkit-text-stroke:.16px currentColor;text-shadow:0 1px 1px rgba(255,243,219,.6)}
.hero h1 em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:.43em;font-weight:500;line-height:.85;color:#9d6726;margin:3px 0 5px}
.hero-flourish{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;line-height:1;letter-spacing:.24em;color:#a9762b;margin:0 0 7px}
.hero-date{font-size:clamp(18px,2.4svh,23px);font-weight:600;letter-spacing:.065em;line-height:1.4;color:#68243b}
.hero-venue{font-size:clamp(18px,2.25svh,21px);font-style:italic;font-weight:500;line-height:1.35;letter-spacing:.015em;max-width:340px;margin:9px auto 0;color:#284d43}
.hero.awaiting-copy .hero-inner,.hero.awaiting-copy .hero-bottom{visibility:hidden}
.hero.entered .hero-inner>*{animation:none}
.hero.entered .hero-blessing{animation:invitation-line 1000ms 0ms both}
.hero.entered .hero-name:first-of-type{animation:invitation-ink 1600ms 150ms cubic-bezier(.16,.75,.23,1) both}
.hero.entered #hero-title em{animation:invitation-amp 1200ms 500ms both}
.hero.entered .hero-name:last-of-type{animation:invitation-ink 1600ms 650ms cubic-bezier(.16,.75,.23,1) both}
.hero.entered .hero-flourish{animation:invitation-flourish 1200ms 1150ms both}
.hero.entered .hero-date{animation:invitation-line 1100ms 1300ms both}
.hero.entered .hero-venue{animation:invitation-line 1100ms 1500ms both}
.hero.entered .hero-bottom{animation:invitation-line 1100ms 1850ms both}
.hero-bottom{bottom:max(10svh,80px);left:10%;right:10%}
.hero-bottom .scroll-cue{color:#761d3c;gap:4px}
.scroll-cue>span:first-child{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-style:italic;font-weight:500;letter-spacing:.035em}
.hero.entered .scroll-cue>span:last-child{color:#9c6624;animation:invitation-scroll 2200ms 2900ms ease-in-out infinite}
@keyframes invitation-ink{
 from{opacity:0;transform:translateY(27px);filter:blur(2px);clip-path:inset(-25% 100% -30% -12%)}
 to{opacity:1;transform:none;filter:blur(0);clip-path:inset(-25% -12% -30% -12%)}
}
@keyframes invitation-line{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes invitation-amp{from{opacity:0;transform:translateY(16px) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes invitation-flourish{from{opacity:0;transform:scaleX(.45)}to{opacity:1;transform:scaleX(1)}}
@keyframes invitation-scroll{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(7px)}}
@media(orientation:portrait){
 .hero-inner{top:25.5%;left:8%;right:8%;max-width:560px}
 .hero-blessing{font-size:clamp(16px,2.2svh,20px)}
 .hero h1{font-size:clamp(58px,min(22vw,10.1svh),100px)}
 .hero-date{font-size:clamp(17px,2.4svh,22px)}
 .hero-venue{font-size:clamp(17px,2.2svh,20px);max-width:290px}
 .hero-bottom{bottom:max(10svh,76px)}
}
@media(max-width:759px){
 .scroll-cue>span:first-child{font-size:18px}
 .sg-hint{font-size:9px}
 .controls{left:16%;right:16%;gap:12px}
 .controls button{font-size:10px}
}
@media(max-height:680px) and (orientation:portrait){
 .hero h1{font-size:clamp(50px,min(20.5vw,9.5svh),64px);line-height:1.03;margin:12px 0 8px}
 .hero h1 em{margin:0 0 2px}
 .hero-blessing{line-height:1.18}
 .hero-date{font-size:16px}
 .hero-venue{font-size:16px;line-height:1.25;margin-top:6px}
 .hero-flourish{font-size:15px;margin-bottom:5px}
 .scroll-cue>span:first-child{font-size:17px}
}
@media(max-height:540px) and (orientation:portrait){.hero-bottom{display:none}}
@media(max-height:600px) and (orientation:landscape){
 .hero-inner{top:20%;left:6%;right:6%;max-width:760px}
 .hero-blessing{font-size:15px}.hero-blessing span{display:inline}
 .hero h1{font-size:62px;flex-direction:row;justify-content:center;gap:14px;margin:10px 0 13px}
 .hero h1 em{font-size:30px;margin:0}
 .hero-date,.hero-venue{font-size:16px}.hero-bottom{bottom:64px}.hero-venue{margin-top:4px}
 .hero-flourish{display:none}
 .scroll-cue>span:first-child{font-size:17px}
 .sg-object{top:50%;width:52svh}.sg-actions{bottom:5svh}.sg-hint{display:block;font-size:8px}
}
@media(prefers-reduced-motion:reduce){.entry-veil{display:none!important}.hero.entered #hero-title span,.hero.entered #hero-title em,.hero.entered .hero-inner>*,.hero.entered .hero-bottom{animation:none!important}}
@media(prefers-reduced-motion:reduce){.hero.entered .scroll-cue>span:last-child{animation:none}}
@media(max-height:330px) and (orientation:landscape){.hero-bottom{display:none}}
.motion-paused .hero.entered #hero-title span,.motion-paused .hero.entered #hero-title em,.motion-paused .hero.entered .hero-bottom{animation:none}

/* Motion owns these effects when its local dependency loads. CSS above remains
   the complete fallback; the courtyard itself is never a motion target. */
html[data-sargam-motion] .hero.entered .hero-inner>*,
html[data-sargam-motion] .hero.entered .hero-name,
html[data-sargam-motion] .hero.entered #hero-title em,
html[data-sargam-motion] .hero.entered .hero-bottom,
html[data-sargam-motion] .hero.entered .scroll-cue>span:last-child,
html[data-sargam-motion] .event-note.turning{animation:none}
html[data-sargam-motion] .arriving{opacity:1;transform:none;transition:none}
.sg-gate .sg-hint{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-style:italic;letter-spacing:.02em;text-transform:none;color:#573d28}
.sg-gate .sg-status{font-size:11px;color:#781839}
.sg-gate:has(.sg-object:focus-visible) .sg-hint{text-decoration:none}
.sg-gate .sg-skip{text-transform:none;font-size:11px;letter-spacing:.03em;min-height:44px}
.nav-menu .nav-heading{font:italic clamp(20px,3svh,28px) 'Cormorant Garamond',Georgia,serif;color:#284d43;margin:0 0 clamp(15px,3svh,30px)}
.nav-menu a{font-size:clamp(27px,3.8svh,39px);line-height:1.25;padding:8px 22px}
.nav-menu a>span{font-size:9px;color:#9d6726;opacity:.8}
.nav-menu a:focus-visible{outline:1px solid #9d6726;outline-offset:2px}
@media(max-height:680px){.nav-menu{padding-top:28px;padding-bottom:62px;gap:0}.nav-menu .nav-heading{font-size:20px;margin-bottom:8px}.nav-menu a{font-size:24px;padding-block:5px}.sg-gate .sg-hint{font-size:15px}}
@media(max-height:600px) and (orientation:landscape){.nav-menu{display:grid;grid-template-columns:repeat(2,minmax(0,230px));align-content:center;justify-content:center;justify-items:start;column-gap:32px}.nav-menu .nav-heading{grid-column:1/-1;justify-self:center;margin-bottom:6px}.nav-menu a{font-size:23px;width:100%;padding:7px 10px}.sg-gate .sg-hint{font-size:14px}}