@font-face { font-family: 'Mrs Saint Delafield'; src: url('../fonts/MrsSaintDelafield-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
:root { color-scheme: only light; font-family: Georgia, 'Times New Roman', serif; color: #e8d9bd; background: #140d0a; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; color: #e8d9bd; background: #140d0a; }
body { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; overflow-x: hidden; }
button, input, select, textarea { color: inherit; font: inherit; -webkit-text-fill-color: currentColor; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { display: block; user-select: none; pointer-events: none; }
.invitation-stage {
  position: relative; isolation: isolate; width: 100%; height: 100vh; height: 100dvh;
  overflow: hidden; color: #e8d9bd; background: #21130e url('../images/bg-main.jpg') center center / cover no-repeat;
}
.scene-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 30%, #10070570 100%); opacity: .6; }
.card-backdrop { position: absolute; inset: 0; background: #160d09; opacity: 0; pointer-events: none; }
.envelope-position { position: absolute; width: 84%; left: 50%; top: 55.5%; transform: translate(-50%, -35%); }
.envelope-scene { position: relative; width: 100%; aspect-ratio: 1460 / 940; transform-origin: 50% 55%; }
.envelope-scene img { position: absolute; max-width: none; }
/* The front is 6% taller than its raster crop. The two flap textures are fitted
   into one shared physical rectangle and clipped to mirrored outlines below. */
.envelope-shadow { position: absolute; z-index: -1; left: -10%; top: 66%; width: 120%; height: 32%; opacity: .34; }
.envelope-shadow img { width: 100%; height: auto; top: 0; }
.envelope-back { position: absolute; z-index: 0; inset: -.35% .2% 1.3%; border: 1px solid #ccb48d; border-radius: 0; background: linear-gradient(180deg, #d9c6a3 0%, #eadcc3 25%, #eee1c9 100%); box-shadow: 0 10px 24px #12070330; }
.pocket-interior { position: absolute; z-index: 1; left: .4%; right: .4%; top: 0; height: 53%; overflow: hidden; background: #eee1c9; box-shadow: inset 0 4px 8px #5135162b; }
.pocket-interior img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 47%; opacity: .82; }
.pocket-interior::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #38200f4d 0%, #67462324 17%, transparent 52%), linear-gradient(90deg, #63421f1f, transparent 17%, transparent 83%, #63421f1f); box-shadow: inset 0 3px 7px #51351630; pointer-events: none; }
.flap-cast-shadow { position: absolute; z-index: 1; left: 7%; top: 0; width: 86%; height: 13%; border-radius: 50%; background: radial-gradient(ellipse at 50% 0%, #25100c70 0%, #42251a38 42%, transparent 76%); filter: blur(5px); opacity: 0; transform: translateY(-18%) scaleX(.82); }
.card-slot { position: absolute; z-index: 2; inset: 0; clip-path: inset(-300% -10% 2% -10%); }
.card-slot.is-released { z-index: 6; clip-path: none; }
.invitation-card { position: absolute; top: 62%; left: 20%; width: 60%; aspect-ratio: 2 / 3; transform-origin: top left; filter: drop-shadow(0 2px 2px #27110830); }
.invitation-card > .card-paper { inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* This print layer counteracts the paper's X/Y stretch. Its actual dimensions
   follow the visible card, so the portrait and letterforms retain their proportions. */
.card-content { --layout: 0; position: absolute; inset: 0 auto auto 0; width: 100%; height: 100%; transform-origin: top left; container-type: size; color: #51331e; text-align: center; }
.card-monogram { position: absolute; top: calc(13% - var(--layout) * 11%); left: calc(38% + var(--layout) * 6%); width: calc(24% - var(--layout) * 12%); aspect-ratio: 1; display: grid; place-items: center; filter: drop-shadow(0 1px 2px #50301628); }
.card-monogram img { position: static; width: 100%; height: 100%; object-fit: contain; }
.portrait-paper-halo { position: absolute; z-index: 0; top: 12.33%; left: 15.5%; width: 69%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #f4e7cf80 42%, #ead7b8ad 63%, #d4b98900 74%); box-shadow: 0 0 14px #e8d2ac8c, inset 0 0 12px #fff4df70; visibility: hidden; opacity: 0; pointer-events: none; transform-origin: center; }
.portrait-circle-frame { z-index: 1; top: calc(8.848% + 4px); left: 8.7665%; width: 82.467%; height: auto; object-fit: contain; visibility: hidden; opacity: 0; pointer-events: none; transform-origin: center; filter: drop-shadow(0 2px 3px #5634172b); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 47%, #000 48% 100%); mask-image: radial-gradient(circle at 50% 50%, transparent 0 47%, #000 48% 100%); }
.card-title { position: absolute; z-index: 3; top: calc(37% + var(--layout) * 26.6%); left: 12%; width: 76%; margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: min(8cqw, calc(6cqh - var(--layout) * 2cqh)); line-height: 1.18; letter-spacing: .055em; font-weight: 400; }
.card-title span { display: block; }
.card-title-middle { font-size: .75em; letter-spacing: .085em; margin: .20em 0 .15em; }
.card-title-last { font-size: .9em; letter-spacing: .12em; text-indent: .12em; }
.card-divider { position: absolute; z-index: 3; top: calc(61% + var(--layout) * 12.6%); left: 18%; width: 64%; aspect-ratio: 3 / 1; }
.card-divider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.card-divider-small { opacity: calc(1 - var(--layout)); }
.card-divider-hero { opacity: var(--layout); }
.card-details { position: absolute; z-index: 3; top: 83.6%; left: 12%; width: 76%; visibility: hidden; opacity: 0; font-size: min(3.65cqw, 1.8cqh); line-height: 1.55; letter-spacing: .075em; color: #604125; }
.card-details p { margin: 0; }
.card-details .card-venue { margin-top: .65em; font-size: .97em; letter-spacing: .18em; text-indent: .18em; }
.card-portrait { position: absolute; z-index: 2; top: 15%; left: 18%; width: 64%; aspect-ratio: 1; margin: 0; overflow: hidden; visibility: hidden; opacity: 0; border: 1px solid #b995648f; border-radius: 50%; box-shadow: inset 0 0 8px #5d38162e, 0 0 0 3px #b9956417, 0 3px 9px #62472124; transform-origin: center center; }
.card-portrait.is-cinematic { border: 0; border-radius: 0; box-shadow: none; transform-origin: 0 0; will-change: clip-path; }
.card-portrait.is-cinematic .portrait-video-layer { will-change: transform; }
.card-portrait.is-cinematic::after { display: none; }
.portrait-video-layer { position: absolute; inset: 0 auto auto 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; transform-origin: 0 0; }
.portrait-reveal-stage { position: absolute; z-index: 10; width: 0; height: 0; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; visibility: hidden; opacity: 0; pointer-events: none; }
/* The same square video surface and focal position continue from card to stage.
   Only the circular wrapper's single diameter grows. */
.portrait-video, .portrait-last-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform-origin: 0 0; pointer-events: none; }
.portrait-last-frame { opacity: 0; }
.card-portrait::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 9px #55362125; background: linear-gradient(180deg, transparent 83%, #eee1c925 93%, #eee1c98a 100%); opacity: calc(1 - var(--portrait-expansion, 0)); }
.portrait-message { position: absolute; z-index: 20; top: max(5.5%, calc(env(safe-area-inset-top) + 20px)); right: max(7.5%, calc(env(safe-area-inset-right) + 20px)); width: 27%; margin: 0; color: #ead9bd; font-family: 'Mrs Saint Delafield', 'Snell Roundhand', cursive; font-size: clamp(28px, 9.2vw, 44px); font-weight: 400; line-height: 1.04; text-align: center; text-shadow: 0 1px 5px #1b0c0850; visibility: hidden; opacity: 0; pointer-events: none; }
.portrait-message span { display: block; transform: rotate(-12deg); }
.portrait-message .portrait-heart { margin-top: .55em; font-family: Georgia, serif; font-size: .31em; line-height: 1; transform: none; }
/* The final chapter has its own opaque surface; preceding scenes remain intact. */
.final-screen { position: absolute; z-index: 25; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(16px, 3vh, 30px); padding: max(28px, env(safe-area-inset-top)) max(30px, env(safe-area-inset-right)) max(60px, calc(env(safe-area-inset-bottom) + 44px)) max(30px, env(safe-area-inset-left)); color: #e8d9bd; background: radial-gradient(ellipse at 50% 36%, #35241955, transparent 65%), radial-gradient(ellipse at 50% 100%, #33211544, transparent 65%), #100b09; container-type: size; opacity: 0; visibility: hidden; }
.final-screen[hidden] { display: none; }
.final-screen::before { content: ''; position: absolute; inset: 16px; border: 1px solid #ad875923; pointer-events: none; }
.final-content { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(7px, 1.8cqh, 15px); text-align: center; }
.final-ornament { position: relative; flex: 0 0 auto; }
.final-ornament img { position: absolute; left: 50%; top: 50%; width: 100%; height: auto; transform: translate(-50%, -50%); object-fit: contain; }
.final-top-ornament { width: min(78cqw, 34cqh); height: min(11cqh, 66px); }
.final-title { margin: 0; font-weight: 400; font-size: min(9.8cqw, 5.2cqh); letter-spacing: .065em; line-height: 1.25; }
.final-title:focus { outline: none; }
.final-title span { display: block; }
.final-title-middle { font-size: .69em; letter-spacing: .095em; margin: .27em 0 .2em; }
.final-title-last { font-size: .84em; letter-spacing: .16em; text-indent: .16em; }
.final-divider { width: min(72cqw, 34cqh); height: min(5cqh, 32px); }
.final-details { font-size: min(4.1cqw, 2.1cqh); letter-spacing: .09em; line-height: 1.65; }
.final-details p { margin: 0; }
.final-venue { padding-top: .5em; letter-spacing: .21em; text-indent: .21em; }
.final-dress { margin: 0; font-size: min(3.05cqw, 1.65cqh); letter-spacing: .17em; color: #c1a67e; }
.final-heart { color: #bd9867; font-size: min(5.8cqw, 2.6cqh); line-height: 1; margin-top: .3cqh; }
.final-motto { margin: 0; font-size: min(6.3cqw, 3.3cqh); line-height: 1.6; letter-spacing: .12em; text-indent: .12em; }
.final-bottom-ornament { width: min(66cqw, 31cqh); height: min(5.5cqh, 36px); }
.gold-button { min-height: 50px; padding: 15px 18px; border: 1px solid #a88350; border-radius: 0; background: #18100bb3; color: #e8d9bd; font-family: Georgia, 'Times New Roman', serif; font-size: 11px; line-height: 1.5; letter-spacing: .16em; cursor: pointer; transition: border-color .25s, box-shadow .25s, background .25s; }
.gold-button:hover, .gold-button:active { background: #35251688; border-color: #d5b887; box-shadow: 0 0 20px #b792491b, inset 0 0 14px #b7924912; }
.gold-button:focus-visible { outline: 1px solid #ecd4ac; outline-offset: 4px; }
.gold-button:disabled { opacity: .55; cursor: wait; }
.final-rsvp { width: 100%; max-width: 340px; justify-self: center; }
.final-rsvp:disabled { cursor: not-allowed; }
.rsvp-dialog { position: fixed; inset: 0; margin: auto; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; padding: 0; border: 0; color: #e8d9bd; background: radial-gradient(ellipse at 50% 15%, #38271966, transparent 65%), #100b09; }
.rsvp-dialog[open] { display: flex; flex-direction: column; }
.rsvp-dialog::backdrop { background: #090604d9; backdrop-filter: blur(4px); }
.rsvp-panel { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: max(52px, calc(env(safe-area-inset-top) + 36px)) max(30px, env(safe-area-inset-right)) max(68px, calc(env(safe-area-inset-bottom) + 52px)) max(30px, env(safe-area-inset-left)); }
.rsvp-close { position: absolute; z-index: 2; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #c7a877; font-size: 27px; font-weight: 400; cursor: pointer; }
.rsvp-close:focus-visible { outline: 1px solid #c7a877; outline-offset: -4px; }
.rsvp-heading { text-align: center; margin-bottom: clamp(22px, 3.4vh, 32px); }
.rsvp-heading > .rsvp-panel-ornament { width: min(250px, 72%); height: auto; margin: 0 auto 8px; object-fit: contain; }
.rsvp-heading p { margin: 10px 0 16px; font-size: 9px; line-height: 1.7; letter-spacing: .15em; color: #c6ab82; }
.rsvp-heading h2 { margin: 0; font-size: clamp(20px, 2.9vh, 25px); font-weight: 400; letter-spacing: .075em; line-height: 1.5; }
.rsvp-heading h2:focus, .rsvp-result:focus { outline: none; }
.rsvp-form { display: grid; gap: clamp(22px, 3.4vh, 32px); }
.rsvp-form label, .rsvp-form legend { display: block; min-width: 0; font-size: 12px; letter-spacing: .07em; }
.rsvp-attendance { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rsvp-attendance legend { width: 100%; padding: 0; margin-bottom: 24px; text-align: center; font-size: 17px; line-height: 1.6; letter-spacing: .015em; }
.rsvp-attendance label { position: relative; display: grid; place-items: center; min-height: 64px; padding: 18px 36px; border: 1px solid #99744766; background: #b7924905; cursor: pointer; font-size: 11px; line-height: 1.6; letter-spacing: .13em; text-align: center; transition: border-color .25s, background .25s, box-shadow .25s; }
/* Keep native radio semantics and arrow-key behavior; the visible control is a gold-edged choice tile. */
.rsvp-attendance input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rsvp-attendance label::before, .rsvp-attendance label::after { content: '◆'; position: absolute; top: 50%; transform: translateY(-50%); color: #d9ba85; font-size: 7px; opacity: 0; transition: opacity .25s; }
.rsvp-attendance label::before { left: 18px; }
.rsvp-attendance label::after { right: 18px; }
.rsvp-attendance label:hover { border-color: #c2a06d; }
.rsvp-attendance label:has(input:checked) { border-color: #c9a46c; background: radial-gradient(ellipse at center, #aa804422, #aa804408); box-shadow: inset 0 0 18px #b792490d, 0 0 18px #b7924910; color: #f0dfbf; }
.rsvp-attendance label:has(input:checked)::before, .rsvp-attendance label:has(input:checked)::after { opacity: 1; }
.rsvp-attendance label:has(input:focus-visible) { outline: 1px solid #e4c99c; outline-offset: 4px; }
.rsvp-panel-divider { position: relative; width: 82%; height: 26px; margin: -3px auto; }
.rsvp-panel-divider img { position: absolute; left: 50%; top: 50%; width: 100%; height: auto; transform: translate(-50%, -50%); object-fit: contain; }
.rsvp-note { text-align: center; margin: 20px 0 0; color: #ad9677; font-size: 10px; line-height: 1.6; letter-spacing: .03em; }
.rsvp-note.is-error { color: #ddb7ae; }
.rsvp-result { text-align: center; padding: 5vh 0; }
.rsvp-result > span { color: #ba9562; font-size: 26px; }
.rsvp-result h3 { font-weight: 400; font-size: 27px; letter-spacing: .13em; }
.rsvp-result p { font-size: 14px; line-height: 1.8; color: #c8b291; }
.rsvp-result .gold-button { width: 100%; margin-top: 25px; }
.rsvp-form[hidden], .rsvp-result[hidden], .rsvp-heading[hidden] { display: none; }
.rsvp-panel:has(.rsvp-result:not([hidden])) { display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 600px) { .rsvp-dialog { width: min(100vw, 56.25vh); width: min(100vw, 56.25dvh); } }
@media (max-height: 650px) { .final-screen { padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 36px)); gap: 12px; } .final-content { gap: 1.25cqh; } .final-top-ornament { width: min(68cqw, 28cqh); height: 8cqh; } .final-divider { height: 3.5cqh; } .final-bottom-ornament { height: 4cqh; } .final-rsvp { min-height: 44px; padding: 11px 12px; font-size: 10px; } .rsvp-heading { margin-bottom: 22px; } }
.envelope-front { position: absolute; z-index: 3; inset: 0; pointer-events: none; filter: drop-shadow(0 4px 3px #321e0d2e); }
.envelope-front img { width: 100%; height: 100%; left: 0; top: 0; }
.envelope-front-open { visibility: hidden; }
/* Mirrored versions of one physical outline. The full-width hinge has no notches.
   Keep clips on the individual faces; clipping the 3D wrapper flattens the flip. */
.flap-depth { position: absolute; z-index: 4; inset: 0; perspective: 1100px; perspective-origin: 50% 0%; pointer-events: none; }
.envelope-flap-3d { position: absolute; top: 0; left: 0; width: 100%; height: 84.043%; transform-origin: top center; transform-style: preserve-3d; }
.flap-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap-face-front { transform: translateZ(.3px); background: #eee1c9; clip-path: polygon(0 0,100% 0,98% 16%,94% 24%,53% 98%,50% 100%,47% 98%,6% 24%,2% 16%); }
.flap-face img { inset: 0; width: 100%; height: 100%; }
.flap-face-inner { transform: rotateX(180deg) translateZ(.3px); background: #eee1c9; clip-path: polygon(0 100%,100% 100%,98% 84%,94% 76%,53% 2%,50% 0,47% 2%,6% 76%,2% 84%); }
.flap-face-inner img { top: -1%; height: 102%; }
.flap-print { position: absolute; top: 52%; width: 100%; margin: 0; text-align: center; color: #644321; font-size: clamp(9px, 2.7vw, 14px); font-weight: 400; line-height: 1.65; letter-spacing: .13em; }
[data-baked-text='true'] .flap-print { display: none; }
.seal-layer { position: absolute; z-index: 5; left: 39.25%; top: 58.3%; width: 21.5%; aspect-ratio: 1; }
.seal-button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; outline-offset: 5px; }
.seal-button:focus-visible { outline: 1px solid #f4dba0; }
.seal-button[aria-disabled='true'] { cursor: default; }
.seal-visual { display: block; position: absolute; inset: 0; filter: drop-shadow(0 3px 3px #2b070951); }
.seal-intact, .seal-pressed { inset: 0; width: 100%; height: 100%; }
.seal-pressed { visibility: hidden; }
/* Every seal state is pre-registered on the same 900 x 900 transparent canvas. */
.seal-fragment { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.seal-fragment img { inset: 0; height: 100%; width: 100%; }
.seal-hint { margin: 34px 0 0; text-align: center; color: #e4cfaa; font-size: 9px; line-height: 1.5; letter-spacing: .30em; text-indent: .30em; opacity: .72; }
.load-message { position: absolute; bottom: max(12%, env(safe-area-inset-bottom)); left: 8%; right: 8%; text-align: center; font-size: 12px; color: #e4cfaa; letter-spacing: .03em; }
.load-message[hidden] { display: none; }
.reset-button { position: absolute; z-index: 30; right: max(10px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); min-width: 44px; min-height: 44px; padding: 10px; border: 0; background: none; color: #ead4b1; opacity: .42; letter-spacing: .18em; font-family: Arial, sans-serif; font-size: 8px; cursor: pointer; }
.reset-button:hover, .reset-button:focus-visible { opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.noscript-message { position: absolute; bottom: 15%; width: 100%; text-align: center; color: #e4cfaa; }
[data-state='loading'] .seal-hint, [data-state='error'] .seal-hint { visibility: hidden; }
@media (hover: hover) { [data-state='idle'] .seal-button:hover .seal-visual { filter: drop-shadow(0 2px 4px #2b070950) drop-shadow(0 0 7px #d6a65f66); } }
@media (hover: none) and (prefers-reduced-motion: no-preference) { [data-state='idle'] .seal-visual { animation: seal-breathe 3.6s ease-in-out infinite; } }
@keyframes seal-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
/* Desktop keeps the 1080 × 1920 design ratio. Phones use their actual viewport. */
@media (min-width: 600px) { .invitation-stage { width: min(100vw, 56.25vh); width: min(100vw, 56.25dvh); box-shadow: 0 0 80px #0009; } }
@media (max-height: 500px) and (orientation: landscape) { .invitation-stage { width: 56.25vh; width: 56.25dvh; } .seal-hint { margin-top: 16px; font-size: 7px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }