:root {
  --ink: #130d0d;
  --wine: #5c2428;
  --wine-deep: #2b1014;
  --silk: #8f3134;
  --gold: #efc464;
  --gold-soft: #f5d58c;
  --paper: #fbf1d5;
  --cream: #fff7e9;
  --muted: #d8c69f;
  --line: rgba(239, 196, 100, .64);
  --sans: "DM Sans", sans-serif;
  --display: "Bodoni Moda", Georgia, serif;
  --editorial: "Cormorant Garamond", Georgia, serif;
  --script: "Pinyon Script", "Apple Chancery", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 320px; margin: 0; color: var(--paper); background: #0e0a09; font-family: var(--sans); overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: default; opacity: .58; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.hidden { display: none !important; }

#snow, #fireworks { pointer-events: none; position: fixed; inset: 0; z-index: 20; }
#snow { z-index: 22; }
#fireworks { z-index: 21; }

.reveal-page { isolation: isolate; position: relative; min-height: 100svh; overflow: hidden; background: #0e0a09; }
.reveal-page::before {
  position: absolute; z-index: -3; inset: 0; content: "";
  background:
    linear-gradient(90deg, rgba(17, 8, 7, .45), transparent 24% 76%, rgba(17, 8, 7, .45)),
    radial-gradient(ellipse at 50% 27%, transparent 8%, rgba(11, 7, 8, .18) 44%, rgba(7, 5, 6, .75) 100%),
    url("royal-palace-wedding.png") center / cover;
  animation: camera-push 16s ease-in-out infinite alternate; transform: scale(1.02);
}
.reveal-page::after { position: absolute; z-index: -1; inset: 15px; border: 1px solid rgba(235, 190, 91, .44); content: ""; pointer-events: none; }
.opening-screen::before { position: fixed; }
.invitation { overflow: visible; }
.invitation::before { position: fixed; }
.cinema-section { position: relative; }

.screen-shell { display: grid; place-items: center; min-height: 100svh; padding: 82px 22px 54px; }
.screen-intro { position: absolute; top: 42px; left: 50%; width: min(720px, calc(100% - 120px)); transform: translateX(-50%); text-align: center; text-shadow: 0 2px 13px #130707; }
.screen-intro .eyebrow { margin-bottom: 5px; }
.top-names { margin: 0; font: 500 clamp(1.05rem, 2vw, 1.45rem)/1 var(--editorial); letter-spacing: .035em; }
.top-names span { color: var(--gold); font-family: var(--display); }

.sound-button { position: fixed; z-index: 30; top: max(30px, env(safe-area-inset-top)); right: 34px; display: inline-flex; align-items: center; gap: 9px; min-height: 53px; padding: 12px 18px; border: 1px solid var(--line); background: rgba(21, 16, 15, .72); color: var(--paper); box-shadow: 0 12px 28px rgba(0, 0, 0, .23); backdrop-filter: blur(10px); transition: transform .25s ease, background .25s ease; }
.sound-button:hover { transform: translateY(-2px); background: rgba(91, 35, 38, .78); }
.sound-button span { color: var(--gold); font-size: 1.15rem; }
.sound-button i { font: 600 .91rem/1 var(--sans); font-style: normal; }

.reveal-stage { display: grid; place-items: center; min-height: 100svh; padding: 96px 20px 44px; }
.ambient-lanterns { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.reveal-stage > .reveal-invitation, .auth-screen .screen-shell { position: relative; z-index: 1; }
.invitation > :not(.ambient-lanterns) { position: relative; z-index: 1; }
.lantern { position: absolute; top: 0; width: 54px; height: 82px; border: 1px solid rgba(248, 203, 98, .72); border-radius: 7px 7px 14px 14px; background: radial-gradient(circle at 50% 47%, rgba(255, 239, 160, .96) 0 8%, rgba(236, 171, 69, .76) 23%, rgba(116, 51, 27, .2) 57%, transparent 74%); box-shadow: 0 20px 39px rgba(226, 153, 44, .34), inset 0 0 15px rgba(255, 233, 152, .32); transform-origin: 50% -65px; animation: lantern-sway 5.6s ease-in-out infinite alternate; }
.lantern::before { position: absolute; top: -70px; left: 50%; width: 1px; height: 70px; background: linear-gradient(transparent, rgba(248, 203, 98, .85)); content: ""; }
.lantern::after { position: absolute; inset: 8px; border: 1px solid rgba(255, 232, 168, .5); border-radius: 4px 4px 10px 10px; content: ""; }
.lantern:nth-child(1) { left: 8%; animation-delay: -1.1s; }
.lantern:nth-child(2) { left: calc(50% - 27px); top: -38px; transform: scale(.72); animation-delay: -3.4s; opacity: .82; }
.lantern:nth-child(3) { right: 9%; animation-delay: -2.2s; }
.invitation-lanterns { position: fixed; z-index: 0; height: 100svh; }
.invitation-lanterns .lantern:nth-child(2) { display: none; }
.reveal-silks { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.reveal-silk { position: absolute; top: -5%; width: 43%; height: 110%; overflow: hidden; background: linear-gradient(90deg, rgba(44, 13, 16, .94), rgba(124, 43, 40, .5) 48%, rgba(22, 6, 8, .9)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 26px); box-shadow: inset -20px 0 70px rgba(0, 0, 0, .42), 0 0 40px rgba(46, 4, 8, .35); transition: transform 2.05s cubic-bezier(.16,.78,.12,1), opacity 1.65s ease; }
.reveal-silk::before { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 8%, rgba(255, 222, 142, .03) 36%, rgba(255, 235, 185, .20) 48%, rgba(255, 222, 142, .03) 60%, transparent 84%); content: ""; transform: translateX(-120%); animation: silk-sheen 5.5s ease-in-out infinite; }
.reveal-silk::after { position: absolute; top: 0; width: 4px; height: 100%; background: linear-gradient(180deg, transparent, rgba(255, 215, 115, .82) 15% 85%, transparent); box-shadow: 0 0 17px rgba(255, 199, 88, .62); content: ""; }
.reveal-silk.left::after { right: 0; }
.reveal-silk.right::after { right: 0; }
.reveal-silk.left { left: 0; transform-origin: left; }
.reveal-silk.right { right: 0; transform: scaleX(-1); transform-origin: right; }
.opening-exit .reveal-silk.left { transform: translateX(-112%) rotate(-3deg); opacity: .42; }
.opening-exit .reveal-silk.right { transform: translateX(112%) scaleX(-1) rotate(-3deg); opacity: .42; }
.opening-exit .opening-card { opacity: 0; transform: scale(.97) translateY(-18px); transition: opacity .75s ease .62s, transform .75s ease .62s; }

.reveal-invitation { display: grid; position: relative; width: min(670px, 100%); padding: clamp(31px, 6vw, 66px) clamp(26px, 7vw, 72px); border: 1px solid rgba(245, 205, 110, .75); border-radius: 48% 48% 3px 3px / 12% 12% 3px 3px; background: linear-gradient(145deg, rgba(30, 22, 18, .94), rgba(7, 7, 8, .80)), rgba(20, 17, 16, .72); box-shadow: 0 30px 80px rgba(0, 0, 0, .50), inset 0 0 0 9px rgba(240, 191, 89, .06); overflow: hidden; text-align: center; backdrop-filter: blur(8px); }
.reveal-invitation::before { display: grid; position: relative; z-index: 1; width: 42px; height: 42px; margin: 0 auto 22px; border: 1px solid rgba(239, 196, 100, .65); border-radius: 50%; color: var(--gold); content: "✦"; font-size: 1rem; line-height: 1; place-items: center; animation: soft-pulse 3.2s ease-in-out infinite; }
.reveal-invitation::after { position: absolute; inset: -35%; z-index: 0; background: radial-gradient(circle at 50% 35%, rgba(255, 226, 152, .11), transparent 31%), linear-gradient(115deg, transparent 35%, rgba(248, 212, 128, .08) 50%, transparent 64%); content: ""; transform: translateX(-24%); animation: card-lustre 9s ease-in-out infinite; pointer-events: none; }
.reveal-invitation > * { position: relative; z-index: 1; }
.opening-card { opacity: 0; transform: translateY(20px) scale(.985); transition: opacity .85s ease, transform .85s ease; }
.opening-card.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.opening-card.is-visible .eyebrow { animation: ceremonial-rise .65s .12s both ease-out; }
.opening-card.is-visible .reveal-rule { animation: ceremonial-rise .65s .24s both ease-out; }
.opening-card.is-visible .display-names { animation: ceremonial-rise .8s .35s both cubic-bezier(.19,.78,.17,1); }
.opening-card.is-visible .event-date { animation: ceremonial-rise .6s .56s both ease-out; }
.opening-card.is-visible .reveal-copy { animation: ceremonial-rise .65s .68s both ease-out; }
.opening-card.is-visible .reveal-actions { animation: ceremonial-rise .65s .8s both ease-out; }
.eyebrow { margin: 0; color: var(--gold); font: 700 clamp(.66rem, 1.45vw, .8rem)/1.45 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.reveal-rule { display: flex; align-items: center; gap: 16px; width: min(100%, 390px); margin: 21px auto 25px; color: var(--gold); }
.reveal-rule::before, .reveal-rule::after { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); content: ""; }
.reveal-rule::after { background: linear-gradient(90deg, var(--line), transparent); }
.reveal-rule span { font-size: .86rem; }
.display-names { display: grid; gap: 0; justify-items: center; }
.display-names strong { max-width: 100%; overflow-wrap: anywhere; color: var(--paper); font: 500 clamp(3.2rem, 9.8vw, 6.6rem)/.78 var(--display); letter-spacing: .025em; text-shadow: 0 3px 18px rgba(0,0,0,.38); }
.display-names .amp { position: relative; z-index: 1; margin: .01em 0 -.08em; color: var(--gold); font: 400 clamp(2.4rem, 6vw, 4rem)/.72 var(--script); font-style: normal; text-shadow: 0 2px 14px rgba(120, 58, 15, .35); }
.display-names.smaller strong { font-size: clamp(3rem, 8vw, 5.5rem); }
.reveal-invitation .event-date { margin: 27px 0 0; color: var(--gold-soft); font: 700 clamp(.74rem, 1.7vw, .95rem)/1.5 var(--sans); letter-spacing: .25em; text-transform: uppercase; }
.reveal-copy { max-width: 505px; margin: 27px auto 0; color: #f0e5cf; font: 400 clamp(1rem, 2.05vw, 1.2rem)/1.65 var(--editorial); }
.reveal-actions { display: grid; gap: 13px; justify-items: center; margin-top: 34px; }
.action-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; width: min(100%, 370px); min-height: 57px; padding: 14px 20px 14px 24px; border: 1px solid #f0c15c; border-radius: 2px; background: linear-gradient(90deg, #4b171d, #7a2e34 55%, #4b171d); color: #fff3d8; box-shadow: inset 0 0 0 4px rgba(255, 234, 180, .06), 0 10px 0 rgba(116, 67, 17, .62), 0 17px 33px rgba(0, 0, 0, .28); font: 700 .78rem/1 var(--sans); letter-spacing: .19em; text-decoration: none; text-transform: uppercase; transition: transform .23s ease, box-shadow .23s ease, filter .23s ease; }
.action-button:hover { filter: brightness(1.12); transform: translateY(-3px); box-shadow: inset 0 0 0 4px rgba(255, 234, 180, .10), 0 13px 0 rgba(116, 67, 17, .62), 0 20px 38px rgba(0, 0, 0, .35); }
.action-button:active { transform: translateY(3px); box-shadow: inset 0 0 0 4px rgba(255, 234, 180, .1), 0 5px 0 rgba(116, 67, 17, .62); }
.action-button b { color: var(--gold); font: 400 1.5rem/1 var(--display); }
.reveal-hint { color: #dacba9; font: 400 .82rem/1.5 var(--editorial); font-style: italic; }

.auth-screen { min-height: 100svh; }
.auth-screen::before { filter: saturate(.78) brightness(.72); }
.login-card { width: min(610px, 100%); animation: card-arrival .9s both ease-out; }
.login-card h1 { margin: 0; color: var(--paper); font: 400 clamp(2.6rem, 7vw, 4.7rem)/.9 var(--display); letter-spacing: .02em; }
.login-card h1 em { display: inline-block; margin-top: .08em; font-family: var(--script); font-size: 1.16em; line-height: .75; }
.login-card h1 em, .section-heading h2 em, .rsvp-intro h2 em { color: var(--gold); font-family: var(--editorial); font-style: italic; font-weight: 400; }
.login-copy { max-width: 390px; margin: 22px auto 26px; color: #e7d9bb; font: 400 1rem/1.6 var(--editorial); }
.pin-form { display: grid; gap: 12px; text-align: left; }
.pin-form label, .form-field label, .meal-field legend { color: var(--gold-soft); font: 700 .7rem/1.3 var(--sans); letter-spacing: .17em; text-transform: uppercase; }
.pin-form input, .form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid rgba(241, 204, 121, .75); border-radius: 2px; outline: 0; background: rgba(17, 11, 12, .82); color: var(--paper); box-shadow: inset 0 0 0 3px rgba(245, 202, 107, .035); transition: border-color .2s ease, background .2s ease; }
.pin-form input { min-height: 61px; padding: 14px 18px; font: 500 1.02rem/1 var(--sans); letter-spacing: .18em; text-align: center; }
.pin-form input::placeholder { color: #bda987; letter-spacing: .08em; }
.pin-form input:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #ffe5a2; background: rgba(55, 24, 27, .78); }
.pin-form .action-button { width: 100%; margin-top: 9px; }
.form-message { min-height: 1.35em; margin: 2px 0 0; color: #ffd6b5; font-size: .86rem; text-align: center; }
.mini-countdown { margin-top: 27px; padding-top: 20px; border-top: 1px solid rgba(239, 196, 100, .35); }
.mini-countdown p { margin: 0 0 13px; color: #d9c299; font: .78rem/1 var(--editorial); font-style: italic; }
.mini-countdown div, .grand-countdown { display: grid; grid-template-columns: repeat(4, 1fr); }
.mini-countdown span { display: grid; gap: 6px; padding: 0 5px; border-right: 1px solid rgba(239, 196, 100, .3); text-align: center; }
.mini-countdown span:last-child { border-right: 0; }
.mini-countdown b { color: var(--paper); font: 400 1.55rem/1 var(--display); }
.mini-countdown small { color: var(--gold); font: 700 .57rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }

.guest-hero { display: grid; place-items: center; min-height: max(760px, 100svh); }
.guest-hero .screen-shell { min-height: auto; padding-top: 115px; }
.personal-card { width: min(720px, 100%); animation: card-arrival 1s .15s both ease-out; }
.personal-greeting { max-width: 100%; margin: 0; overflow-wrap: anywhere; color: var(--gold-soft); font: 400 clamp(2rem, 6vw, 3.4rem)/.95 var(--script); font-style: normal; }
.personal-greeting strong { color: #fff4d8; font-weight: 500; overflow-wrap: anywhere; text-shadow: 0 2px 12px rgba(238, 180, 75, .25); }
.guest-invite-copy { max-width: 470px; margin: 21px auto 18px; color: #ebe0c9; font: 400 clamp(.95rem, 2vw, 1.13rem)/1.55 var(--editorial); }
.scroll-link { margin: 34px auto 0; }

.countdown-band { padding: 90px 24px 96px; border-top: 1px solid rgba(240, 196, 100, .28); border-bottom: 1px solid rgba(240, 196, 100, .28); background: linear-gradient(90deg, rgba(43, 12, 17, .73), rgba(17, 12, 12, .72), rgba(43, 12, 17, .73)); }
.section-heading { width: min(750px, 100%); margin: 0 auto 42px; text-align: center; }
.section-heading.compact { margin-bottom: 40px; }
.section-heading h2, .rsvp-intro h2 { margin: 16px 0 0; color: var(--paper); font: 400 clamp(2.7rem, 7vw, 5.5rem)/.96 var(--display); letter-spacing: .015em; }
.section-heading p:not(.eyebrow), .rsvp-intro > p:not(.eyebrow) { max-width: 620px; margin: 24px auto 0; color: #eadfc7; font: 400 clamp(.98rem, 1.9vw, 1.16rem)/1.65 var(--editorial); }
.grand-countdown { width: min(830px, 100%); margin: 0 auto; border-block: 1px solid rgba(239, 196, 100, .55); }
.grand-countdown span { display: grid; gap: 10px; min-height: 128px; padding: 20px 8px; border-right: 1px solid rgba(239, 196, 100, .38); place-content: center; text-align: center; }
.grand-countdown span:last-child { border-right: 0; }
.grand-countdown b { color: var(--paper); font: 400 clamp(2.35rem, 7vw, 4.3rem)/.9 var(--display); text-shadow: 0 4px 13px #120707; }
.grand-countdown small { color: var(--gold); font: 700 .68rem/1 var(--sans); letter-spacing: .17em; text-transform: uppercase; }

.celebrations { padding: 110px 26px; }
.event-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; width: min(1240px, 100%); margin: 0 auto; }
.event-card { display: grid; min-height: 455px; border: 1px solid rgba(239, 196, 100, .68); border-radius: 17px 17px 3px 3px; background: linear-gradient(145deg, rgba(48, 16, 22, .95), rgba(13, 10, 11, .92)); box-shadow: inset 0 0 0 5px rgba(240, 190, 86, .045), 0 20px 46px rgba(0, 0, 0, .28); overflow: hidden; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; animation: event-arrival .7s both ease-out; animation-delay: calc(var(--event-index) * 70ms); }
.event-card:nth-child(3n+2) { background: linear-gradient(145deg, rgba(62, 27, 20, .95), rgba(20, 12, 11, .92)); }
.event-card:nth-child(3n) { background: linear-gradient(145deg, rgba(58, 21, 34, .95), rgba(15, 9, 14, .93)); }
.event-card:hover, .event-card:focus-visible { transform: translateY(-8px); border-color: #ffe19a; box-shadow: inset 0 0 0 5px rgba(240, 190, 86, .08), 0 27px 58px rgba(0, 0, 0, .4); outline: 0; }
.event-calendar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; min-height: 100px; padding: 18px 24px; border-bottom: 2px solid #ae6d2f; background: linear-gradient(105deg, #eec45e, #f6d98e 46%, #c78937); color: #341920; }
.event-calendar strong { font: 400 3.45rem/.7 var(--display); }
.event-calendar span, .event-calendar small { font: 700 .68rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.event-calendar small { padding-left: 13px; border-left: 1px solid rgba(69, 26, 29, .52); }
.event-details { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 27px 25px 24px; }
.event-details .event-date { margin: 0; color: #f0cb73; font-size: .66rem; letter-spacing: .17em; }
.event-details h3 { max-width: 100%; margin: 12px 0 17px; overflow-wrap: anywhere; color: #fff2d7; font: 500 clamp(2.1rem, 3.8vw, 3.25rem)/.96 var(--display); }
.event-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.event-facts span { display: inline-flex; gap: 7px; align-items: center; padding: 8px 11px; border: 1px solid rgba(239, 196, 100, .48); border-radius: 30px; color: #f2e3c6; font-size: .86rem; }
.event-facts b { color: var(--gold); font: 700 .61rem/1 var(--sans); letter-spacing: .11em; text-transform: uppercase; }
.event-place { margin: auto 0 19px; color: #e2d6be; font: 400 .87rem/1.55 var(--sans); }
.event-place b { display: block; margin-bottom: 4px; color: #fff0d2; font-weight: 700; }
.event-directions { display: inline-flex; align-items: center; gap: 11px; color: var(--gold-soft); font: 700 .68rem/1 var(--sans); letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.event-directions span { font: 400 1.3rem/1 var(--display); transition: transform .2s ease; }
.event-directions:hover span { transform: translate(3px, -3px); }

.story-section { padding: 105px 26px; background: linear-gradient(90deg, rgba(53, 17, 22, .72), rgba(13, 10, 10, .76), rgba(53, 17, 22, .72)); }
.story-layout { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1fr); gap: clamp(45px, 9vw, 130px); align-items: start; width: min(1100px, 100%); margin: 0 auto; }
.story-heading { position: sticky; top: 80px; width: auto; margin: 0; text-align: left; }
.story-heading p:not(.eyebrow) { margin-inline: 0; }
.story-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-left: 1px solid rgba(239, 196, 100, .66); }
.story-timeline li { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 20px; padding: 0 0 42px 29px; }
.story-timeline li::before { position: absolute; top: 6px; left: -6px; width: 11px; height: 11px; border: 2px solid #31151b; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(239, 196, 100, .1); content: ""; }
.story-timeline time { color: var(--gold); font: 400 1.25rem/1 var(--display); }
.story-timeline h3 { margin: -2px 0 7px; color: var(--paper); font: 500 1.3rem/1.15 var(--editorial); }
.story-timeline p { margin: 0; color: #e7dbc4; font: 400 .95rem/1.55 var(--sans); }

.rsvp-section { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 620px); gap: clamp(40px, 9vw, 120px); align-items: center; min-height: 870px; padding: 112px 26px; }
.rsvp-intro { text-align: left; }
.rsvp-intro h2 { margin-top: 15px; }
.rsvp-intro > p:not(.eyebrow) { margin-inline: 0; }
.rsvp-card { width: 100%; padding: 37px; border-radius: 34px 34px 3px 3px; background: linear-gradient(145deg, rgba(35, 17, 18, .85), rgba(13, 10, 11, .79)); }
.rsvp-card::before { width: 36px; height: 36px; margin-bottom: 18px; }
#rsvpForm { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.form-field { display: grid; gap: 8px; }
.form-field.wide, .attendance-details, .submit-rsvp { grid-column: 1 / -1; }
.form-field input, .form-field select { min-height: 48px; padding: 10px 12px; }
.form-field select { appearance: auto; }
.form-field textarea { min-height: 114px; padding: 12px; resize: vertical; }
.attendance-details { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.meal-field { grid-column: 1 / -1; display: grid; gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
.meal-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.meal-option { display: block; cursor: pointer; }
.meal-option input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.meal-option span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 47px; border: 1px solid rgba(239,196,100,.5); border-radius: 2px; color: #f6e8d1; font: 700 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.meal-option i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.meal-option.veg span { color: #dff5ce; }
.meal-option.nonveg span { color: #ffd1d1; }
.meal-option.veg input:checked + span { border-color: #5ad27c; background: rgba(19, 123, 65, .65); }
.meal-option.nonveg input:checked + span { border-color: #f06b72; background: rgba(150, 34, 43, .7); }
.meal-option input:focus-visible + span { outline: 2px solid #fff0bd; outline-offset: 2px; }
.submit-rsvp { width: 100%; margin-top: 4px; }
.rsvp-actions { display: flex; justify-content: center; gap: 16px; margin-top: 19px; }
.text-button { border: 0; border-bottom: 1px solid rgba(239, 196, 100, .65); background: transparent; color: var(--gold-soft); font: 700 .66rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.text-button:hover { color: #fff1cc; }
.status-message { margin-top: 16px; }

.site-footer { padding: 82px 25px max(82px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(239, 196, 100, .35); background: linear-gradient(90deg, rgba(45, 12, 17, .88), rgba(15, 10, 10, .95), rgba(45, 12, 17, .88)); text-align: center; }
.footer-names { margin: 0; color: var(--paper); font: 500 clamp(2.4rem, 6vw, 4.4rem)/1 var(--display); }
.footer-names span { color: var(--gold); font-family: var(--script); font-size: 1.24em; font-style: normal; }
.site-footer p:last-child { max-width: 420px; margin: 17px auto 0; color: #e4d5bc; font: 400 1rem/1.6 var(--editorial); }

.auth-screen.login-enter .login-card { animation: card-arrival .9s both ease-out; }
.invitation.is-ready .guest-hero .personal-card { animation: card-arrival 1s both ease-out; }

@keyframes camera-push { from { transform: scale(1.02); } to { transform: scale(1.09); } }
@keyframes card-arrival { from { opacity: 0; transform: translateY(26px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes event-arrival { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ceremonial-rise { from { opacity: 0; transform: translateY(15px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes soft-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(242, 194, 87, 0); } 50% { box-shadow: 0 0 24px rgba(242, 194, 87, .4); } }
@keyframes silk-sheen { 0%, 58%, 100% { transform: translateX(-120%); } 78% { transform: translateX(160%); } }
@keyframes card-lustre { 0%, 100% { transform: translateX(-27%) rotate(-8deg); opacity: .38; } 50% { transform: translateX(25%) rotate(-8deg); opacity: .9; } }
@keyframes lantern-sway { from { rotate: -3deg; } to { rotate: 3deg; } }

@media (max-width: 860px) {
  .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-layout, .rsvp-section { grid-template-columns: 1fr; }
  .story-heading { position: static; max-width: 590px; text-align: center; }
  .story-heading p:not(.eyebrow), .rsvp-intro > p:not(.eyebrow) { margin-inline: auto; }
  .rsvp-intro { text-align: center; }
  .rsvp-section { min-height: 0; }
}

@media (max-width: 640px) {
  .reveal-page::after { inset: 10px; }
  .reveal-page::before, .opening-screen::before, .invitation::before { position: absolute; background-position: 50% center; animation: none; transform: none; }
  .opening-screen::before, .invitation::before { position: fixed; }
  .sound-button { top: max(20px, env(safe-area-inset-top)); right: 20px; min-height: 45px; padding: 10px 13px; }
  .sound-button i { font-size: .78rem; }
  .screen-shell, .reveal-stage { min-height: 100svh; padding: 86px 16px 34px; }
  .screen-intro { top: 29px; width: calc(100% - 120px); }
  .screen-intro .eyebrow { font-size: .55rem; letter-spacing: .16em; }
  .top-names { font-size: .95rem; }
  .reveal-silk { width: 28%; }
  .lantern { width: 43px; height: 68px; }
  .lantern:nth-child(1) { left: 5%; }
  .lantern:nth-child(3) { right: 5%; }
  .reveal-invitation { padding: 29px 20px 27px; border-radius: 35% 35% 3px 3px / 8% 8% 3px 3px; }
  .reveal-invitation::before { width: 35px; height: 35px; margin-bottom: 16px; }
  .eyebrow { font-size: .59rem; letter-spacing: .18em; }
  .reveal-rule { gap: 10px; margin: 16px auto 20px; }
  .display-names strong { font-size: clamp(3.2rem, 16vw, 4.75rem); line-height: .82; }
  .display-names.smaller strong { font-size: clamp(2.9rem, 15vw, 4.4rem); }
  .display-names .amp { font-size: clamp(2rem, 11vw, 3rem); }
  .reveal-invitation .event-date { margin-top: 20px; font-size: .62rem; letter-spacing: .17em; }
  .reveal-copy { margin-top: 20px; font-size: .95rem; line-height: 1.55; }
  .action-button { min-height: 54px; gap: 16px; padding: 12px 16px 12px 19px; font-size: .66rem; letter-spacing: .13em; }
  .reveal-actions { margin-top: 27px; }
  .reveal-hint { font-size: .73rem; }
  .login-card h1 { font-size: clamp(2.55rem, 12vw, 3.7rem); }
  .login-copy { margin: 17px auto 22px; font-size: .93rem; }
  .pin-form input { min-height: 55px; font-size: .9rem; }
  .mini-countdown { margin-top: 21px; }
  .mini-countdown b { font-size: 1.3rem; }
  .guest-hero { min-height: 100svh; }
  .guest-hero .screen-shell { padding-top: 85px; }
  .personal-greeting { font-size: clamp(2rem, 11vw, 3rem); }
  .guest-invite-copy { margin-top: 16px; font-size: .91rem; }
  .countdown-band { padding: 66px 18px; }
  .section-heading { margin-bottom: 29px; }
  .section-heading h2, .rsvp-intro h2 { font-size: clamp(2.5rem, 12vw, 3.9rem); }
  .section-heading p:not(.eyebrow), .rsvp-intro > p:not(.eyebrow) { margin-top: 17px; font-size: .92rem; }
  .grand-countdown span { min-height: 99px; padding: 14px 3px; }
  .grand-countdown b { font-size: clamp(1.75rem, 10vw, 2.65rem); }
  .grand-countdown small { font-size: .52rem; letter-spacing: .09em; }
  .celebrations { padding: 75px 16px; }
  .event-list { grid-template-columns: 1fr; gap: 16px; }
  .event-card { min-height: 388px; }
  .event-calendar { min-height: 84px; padding: 16px 19px; }
  .event-calendar strong { font-size: 3rem; }
  .event-details { padding: 22px 20px 21px; }
  .event-details h3 { margin-block: 10px 14px; font-size: 2.5rem; }
  .event-place { font-size: .81rem; }
  .story-section { padding: 74px 20px; }
  .story-timeline li { grid-template-columns: 59px 1fr; gap: 13px; padding-left: 21px; padding-bottom: 31px; }
  .story-timeline time { font-size: 1.08rem; }
  .story-timeline h3 { font-size: 1.15rem; }
  .story-timeline p { font-size: .87rem; }
  .rsvp-section { gap: 32px; padding: 75px 16px; }
  .rsvp-card { padding: 25px 18px; border-radius: 30px 30px 3px 3px; }
  #rsvpForm, .attendance-details { grid-template-columns: 1fr; gap: 15px; }
  .form-field input, .form-field select { min-height: 46px; }
  .form-field textarea { min-height: 108px; }
  .meal-options { gap: 8px; }
  .meal-option span { min-height: 45px; font-size: .64rem; }
  .site-footer { padding: 65px 20px max(65px, env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
  .screen-shell, .reveal-stage { padding-inline: 12px; }
  .reveal-invitation { padding-inline: 16px; }
  .display-names strong { font-size: 3.12rem; }
  .event-calendar { gap: 10px; padding-inline: 15px; }
  .event-calendar strong { font-size: 2.7rem; }
  .event-calendar span, .event-calendar small { font-size: .57rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}