:root {
  --paper: #eee2c8; --ink: #344022; --wine: #8e171c; --gold: #ad824b;
  --serif: 'Baskerville', 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color-scheme: light; font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--paper); }
body { color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, a, summary, input { outline-offset: 5px; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--wine); }
button:disabled { cursor: default; }
button svg { flex: 0 0 20px; width: 20px; height: 20px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.invitation-app { position: fixed; inset: 0; display: grid; place-items: center; isolation: isolate; overflow: hidden; background: var(--paper); }
.ambient { position: absolute; inset: -40px; z-index: -3; pointer-events: none; }
.ambient-paper { background: radial-gradient(ellipse at center, #f3e8d2 0, #e9dbc0 55%, #d8c6a6 100%); }
.ambient-hills { background: center / cover no-repeat; opacity: 0; transition: opacity 1.3s ease; filter: blur(25px) saturate(.72) brightness(.7); }
.paper-grain { position: absolute; inset: 0; z-index: -2; opacity: .38; pointer-events: none; background-size: 500px 150px; mix-blend-mode: multiply; transition: opacity 1s; }
.scene { position: relative; width: min(100%, calc(100svh * .6666667)); width: min(100%, calc(100dvh * .6666667)); height: 100%; max-width: 900px; overflow: hidden; background: var(--paper); isolation: isolate; box-shadow: 0 0 100px #75644815; }
.invitation-artwork, .courtyard, .opening-film, .video-atmosphere { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Mobile-only: the envelope, the film and the courtyard all fill the screen. */
.invitation-artwork { z-index: 3; object-fit: cover; object-position: 50% 50%; opacity: 1; transition: opacity .42s ease; transform-origin: 50% 50%; }
.courtyard { z-index: 0; object-fit: cover; object-position: 55% 50%; opacity: 0; transition: opacity .7s ease; }
.opening-film { z-index: 2; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity .35s ease; pointer-events: none; transform-origin: 50% 50%; }
/* The soft fill was only needed around a letterboxed film; it stays off now. */
.video-atmosphere { z-index: 1; display: none; pointer-events: none; }
.has-video-frame .opening-film, .has-video-frame .video-atmosphere { opacity: 1; }
.has-video-frame .invitation-artwork, [data-state='revealed'] .invitation-artwork { opacity: 0; pointer-events: none; }
[data-state='revealed'] .courtyard { opacity: 1; }
[data-state='revealed'] .ambient-hills { opacity: 1; }
[data-state='revealed'] .paper-grain { opacity: 0; }
.still-arrival .opening-film, .still-arrival .video-atmosphere { opacity: 0; }
/* Film end -> full-screen courtyard: the image is placed under the film at
   once (app.js lines it up with the film's last frame), the film fades
   quickly, and the image grows to fill the screen. No paper shows through. */
.film-to-still .courtyard { z-index: 2; transition: none; } /* above the soft fill, below the fading film */
.film-to-still .opening-film { transition: opacity .35s ease; }
.film-to-still .video-atmosphere { transition: opacity .5s ease .65s; }
/* While the film plays, the envelope artwork stays behind it (it lines up
   exactly with the film's first frame), so the tap only unties the ribbon.
   app.js sets --film-mix from 0 to 1 as the clouds arrive; the soft fill
   around the film then takes over from the artwork. */
#app.has-video-frame:not([data-state='revealed']) .invitation-artwork { z-index: 1; opacity: calc(1 - var(--film-mix, 1)); transition: none; }
.has-video-frame .video-atmosphere { opacity: var(--film-mix, 1); }
.open-invitation { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; border: 0; background: transparent; }
.open-invitation:focus-visible { outline: 2px solid var(--wine); outline-offset: -14px; border-radius: 4px; }
.initial-utility { position: absolute; z-index: 6; bottom: max(12px, env(safe-area-inset-bottom, 0px)); left: 0; width: 100%; display: flex; justify-content: center; }
.quiet-button { min-height: 44px; padding: 10px 18px; border: 0; border-radius: 30px; background: #eee2c8dd; font-size: 10px; letter-spacing: .08em; color: #4b5037; box-shadow: 0 1px 20px #eee2c83d; transition: background .2s; }
.quiet-button:hover { background: #fbf3e3; }
.playback-tools { position: absolute; right: 16px; top: max(16px, env(safe-area-inset-top, 0px)); z-index: 9; display: flex; gap: 8px; align-items: center; }
.glass-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 16px; border: 1px solid #fff8e3a3; border-radius: 28px; color: #3c3d27; background: #f7eddae8; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 11px; letter-spacing: .025em; box-shadow: 0 2px 16px #2217000c; transition: background .2s, transform .2s; }
.glass-button:hover { background: #fff8e9; transform: translateY(-1px); }
.square-button { width: 44px; padding: 0; }
.loading-message { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); z-index: 10; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border: 1px solid #c6af8890; border-radius: 30px; background: #f7eddbeF; box-shadow: 0 4px 22px #2e260913; font-size: 11px; letter-spacing: .035em; text-align: center; }
.spinner { display: block; flex: 0 0 13px; width: 13px; height: 13px; border: 1px solid #ae8c5355; border-top-color: var(--wine); border-radius: 100%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.film-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; z-index: 10; background: #f5e4bb3a; }
.film-progress span { display: block; width: 100%; height: 100%; background: #c7a166; transform: scaleX(0); transform-origin: left; }
.error-panel { position: absolute; z-index: 12; left: 20px; right: 20px; bottom: max(34px, env(safe-area-inset-bottom, 0px)); padding: 24px 20px; text-align: center; background: #fbf3e5f5; border: 1px solid #c8b083; border-radius: 8px; box-shadow: 0 16px 80px #21170036; }
.error-panel h2 { margin: 0 0 10px; font: 28px/1.14 var(--serif); font-weight: 400; }
.error-panel p { font-size: 12px; line-height: 1.7; margin: 0 0 18px; color: #62614d; }
.error-actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.button-outline, .button-solid { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 21px; font-size: 12px; border-radius: 3px; border: 1px solid #9b824e75; }
.button-outline { background: transparent; color: var(--ink); }
.button-solid { border-color: var(--ink); background: var(--ink); color: #fbf1dd; }
.button-solid:hover { background: #4b5836; }
.arrival-interface { position: absolute; z-index: 8; inset: 0; pointer-events: none; opacity: 0; }
[data-state='revealed'] .arrival-interface { animation: arrive 1.05s .28s ease forwards; }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.arrival-top { position: absolute; top: max(18px, env(safe-area-inset-top, 0px)); left: 24px; right: 20px; display: flex; justify-content: space-between; align-items: center; }
.little-monogram { padding: 8px 0; font: 23px/1 var(--serif); letter-spacing: .12em; color: #4d4026; text-shadow: 0 1px 8px #f3e1bc; }
.little-monogram i { color: var(--wine); font-size: 22px; }
.replay-button { pointer-events: auto; padding: 0 13px; background: #fbf0d4b5; border-color: #fbf0d4a8; }
.replay-button svg { width: 16px; height: 16px; flex-basis: 16px; }
.arrival-bottom { position: absolute; bottom: 0; left: 0; width: 100%; padding: 55px 20px max(26px, env(safe-area-inset-bottom, 0px)); text-align: center; color: #fff4df; background: linear-gradient(transparent, #20221572 30%, #1f2418bf 100%); text-shadow: 0 1px 16px #171c16aa; }
.eyebrow { font-size: 9px; line-height: 1.9; letter-spacing: .25em; font-weight: 400; }
.arrival-bottom .eyebrow { margin: 0 0 11px; }
.arrival-bottom h1 { font: 400 clamp(34px, 6vw, 49px)/1.1 var(--serif); margin: 0; white-space: nowrap; outline: none; letter-spacing: -.025em; }
.arrival-bottom h1 i { color: #e5c592; font-weight: 400; }
.arrival-date { margin: 12px 0 20px; font-family: var(--serif); font-size: 15px; letter-spacing: .08em; }
.invitation-button { pointer-events: auto; display: inline-flex; align-items: center; justify-content: space-between; min-width: 177px; min-height: 46px; gap: 21px; padding: 13px 20px; border: 1px solid #e7d1a9b5; border-radius: 2px; color: #fff6e6; background: #e2c68e10; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 10px var(--sans); letter-spacing: .15em; text-transform: uppercase; transition: background .2s; }
.invitation-button:hover { background: #e2c68e33; }
.invitation-button:focus-visible { outline-color: #fff4dc; }
.details-dialog { position: fixed; margin: auto; width: min(480px, calc(100% - 28px)); max-height: calc(100svh - 40px); max-height: calc(100dvh - 40px); overflow: auto; padding: 0; border: 1px solid #c9ad7d; border-radius: 5px; color: var(--ink); background: #f3e8d3; box-shadow: 0 28px 120px #14170970; }
.details-dialog::backdrop { background: #20241966; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.details-dialog[open] { animation: sheet-in .35s ease both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.dialog-inner { border: 1px solid #c9b38880; margin: 11px; padding: 33px 19px 26px; text-align: center; }
.close-dialog { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: none; border-radius: 50%; background: transparent; color: #65634b; }
.close-dialog:hover { background: #bca47620; }
.lotus { width: 51px; height: 40px; margin-bottom: 13px; }
.dialog-blessing { font-size: 9px; letter-spacing: .22em; line-height: 1.9; margin: 0 0 20px; }
.dialog-inner h2 { margin: 0 0 19px; font: 400 clamp(31px, 9vw, 46px)/1.16 var(--serif); letter-spacing: -.035em; white-space: nowrap; }
.dialog-inner h2 i { color: var(--wine); font-weight: 400; }
.invitation-copy { font: 15px/1.85 var(--serif); color: #646447; margin: 0 auto 20px; }
.fine-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px auto; color: var(--wine); max-width: 180px; font-size: 9px; }
.fine-divider::before, .fine-divider::after { content: ''; height: 1px; width: 65px; background: #bc9b6580; }
.date-label { margin: 0 0 12px; font-size: 9px; letter-spacing: .23em; color: #7e734f; }
.dialog-date { font: 23px/1.3 var(--serif); margin: 0 0 24px; }
.presence-note { font: italic 16px/1.65 var(--serif); margin: 0 0 23px; color: #666547; }
.calendar-button { min-width: 210px; font-size: 11px; }
.calendar-button svg { width: 17px; height: 17px; flex-basis: 17px; }
.calendar-note { font: 9px/1.5 var(--sans); color: #757056; margin: 11px 0 0; }
.studio-panel { position: fixed; z-index: 50; top: 14px; left: 14px; width: min(295px, calc(100vw - 28px)); padding: 18px; color: #ede5d2; background: #263021ed; border: 1px solid #d5bf8944; border-radius: 8px; font-size: 12px; box-shadow: 0 10px 40px #0003; }
.studio-panel summary { cursor: pointer; font-weight: 600; }
.studio-panel p { line-height: 1.6; font-size: 11px; }
.studio-panel .button-outline { color: #ece3d3; min-height: 44px; }
.file-label { display: block; padding: 14px 0; }
.file-label input { display: block; margin-top: 9px; max-width: 100%; font-size: 10px; }
.noscript-message { position: fixed; z-index: 50; bottom: 18px; left: 50%; transform: translateX(-50%); background: #faf0da; padding: 15px; font: 13px/1.6 var(--sans); width: min(90%, 440px); text-align: center; }
@media (min-width: 900px) { .scene { box-shadow: 0 0 110px #65502820; } .initial-utility { bottom: 8px; } }
/* Mobile-only: on tablets and laptops the invitation is shown as a phone screen
   (9:19.5), with the same text sizes a phone gets. Phones stay full-screen. */
@media (min-width: 600px) {
  .scene { --phone-h: min(calc(100vh - 40px), 900px); height: var(--phone-h); width: calc(var(--phone-h) * .4615); max-width: calc(100% - 32px); border-radius: 30px; box-shadow: 0 30px 90px #2b20102e, 0 0 0 1px #2b201014; }
  .arrival-bottom h1 { font-size: 34px; }
  .details-dialog { width: min(380px, calc(100% - 28px)); }
}
@media (max-height: 620px) { .arrival-bottom { padding-top: 32px; padding-bottom: 13px; } .arrival-bottom .eyebrow { margin-bottom: 5px; font-size: 8px; } .arrival-bottom h1 { font-size: 31px; } .arrival-date { margin: 6px 0 12px; font-size: 12px; } .arrival-top { left: 15px; right: 12px; top: 10px; } .arrival-top .little-monogram { font-size: 18px; } .replay-button span { display: none; } .initial-utility { bottom: 5px; } .quiet-button { font-size: 8px; } .dialog-inner { padding-top: 30px; } }
@media (max-width: 350px) { .dialog-inner { padding-inline: 12px; } .dialog-inner h2 { font-size: 30px; } .invitation-copy { font-size: 13px; } .arrival-bottom h1 { font-size: 33px; } .error-panel { left: 12px; right: 12px; padding: 19px 15px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }