:root {
  --ivory: #f5f3eb;
  --green: #344b3e;
  --muted: #7a8276;
  --envelope-width: min(560px, calc(100vw - 88px));
  --envelope-height: calc(var(--envelope-width) * .615);
  --panel-height: calc(var(--envelope-width) * .475);
  --lower-height: 260px;
  --letter-rise: 50px;
  --script: 'Mea Culpa', 'Brush Script MT', cursive;
  color-scheme: light;
  font-family: 'Roboto', sans-serif;
  color: var(--green);
  background: var(--ivory);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(ellipse at 48% 38%, #fffef9 0%, #f5f3eb 58%, #eeeee3 100%); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid #60775b; outline-offset: 7px; }
button[hidden] { display: none; }
button { color: inherit; }
/* These are fixed to the viewport (not the page) for the hero. Once the
   sections below are revealed, body.sections-visible fades them out so they
   don't persist on top of that content for the rest of the scroll. */
.paper-grain, .page-frame, .botanical { transition: opacity .6s ease; }
body.sections-visible .paper-grain, body.sections-visible .page-frame, body.sections-visible .botanical { opacity: 0; }
.paper-grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .15; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23756f55' opacity='.38' filter='url(%23n)' d='M0 0h200v200H0z'/%3E%3C/svg%3E"); }
.page-frame { position: fixed; inset: 18px; border: 1px solid #77856624; pointer-events: none; z-index: 1; }
.page-frame::before, .page-frame::after { content: ''; position: absolute; width: 5px; height: 5px; background: #91977c; transform: rotate(45deg); top: -3px; }
.page-frame::before { left: -3px; } .page-frame::after { right: -3px; }
.botanical { --flower-size: clamp(220px, 24vw, 340px); position: fixed; inset: 0; overflow: hidden; pointer-events: none; user-select: none; opacity: .82; z-index: 0; }
.botanical img { position: absolute; display: block; width: var(--flower-size); height: auto; transform: rotate(var(--flower-angle)); animation: botanical-sway 10s ease-in-out infinite; }
.botanical-top img { right: -60px; top: 26px; --flower-angle: -8deg; animation-delay: -5s; }
.botanical-bottom img { left: -28px; bottom: -58px; --flower-angle: 8deg; }
@keyframes botanical-sway {
  0%, 100% { transform: translateY(2px) rotate(calc(var(--flower-angle) - 1deg)); }
  50% { transform: translateY(-2px) rotate(calc(var(--flower-angle) + 1deg)); }
}
.invitation-app { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding: 0 62px; overflow: clip; }
.masthead { height: 101px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 2; }
.wordmark { font-family: var(--script); font-size: 38px; color: var(--green); text-decoration: none; width: 110px; line-height: 1; }
.wordmark span { font-size: .75em; margin: 0 2px; }
.masthead-note { font-size: 9px; letter-spacing: 2.5px; opacity: .66; margin-left: 30px; }
.masthead-date { font-size: 10px; font-weight: 400; letter-spacing: 2px; }
.masthead-date span { color: #a0a58e; padding: 0 5px; }
.main-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 0 12px; }
.introduction { text-align: center; margin-bottom: 51px; position: relative; z-index: 2; transition: opacity .7s, transform .9s; }
.eyebrow { margin: 0; font-size: 9px; font-weight: 500; letter-spacing: 3px; line-height: 1.6; }
h1 { font-family: var(--script); font-size: clamp(58px, 6.2vw, 83px); line-height: 1.12; font-weight: 400; margin: 10px 0 8px; }
h1 span { font-size: .72em; padding: 0 5px; }
.intro-note { margin: 0; color: var(--muted); font-size: 12px; font-weight: 300; letter-spacing: .55px; }
.scene-shell { width: var(--envelope-width); height: var(--envelope-height); position: relative; isolation: isolate; z-index: 3; perspective: 1400px; transition: margin-bottom 1.2s ease; }
.scene { width: 100%; height: 100%; transform: perspective(1400px) rotateX(var(--sway-x, 0deg)) rotateY(var(--sway-y, 0deg)); transition: transform .5s ease-out; }
.floating-envelope { width: 100%; height: 100%; animation: envelope-float 7s ease-in-out infinite; }
.envelope { width: 100%; height: 100%; position: relative; isolation: isolate; }
.envelope-back { position: absolute; inset: 0; background: #dedfcf; border-radius: 5px; box-shadow: 0 2px 3px #51553b12, 0 20px 36px -12px #4b50342c; z-index: 10; }
.envelope-lining { position: absolute; inset: 2px; border-radius: 4px; background-color: #d5dbca; background-image: repeating-linear-gradient(45deg, transparent, transparent 7px, #6374580a 7px, #6374580a 8px), repeating-linear-gradient(-45deg, transparent, transparent 7px, #6374580a 7px, #6374580a 8px); z-index: 11; }
.envelope-wing { position: absolute; inset: 0; z-index: 30; }
.envelope-wing-left { clip-path: polygon(0 0, 55% 57%, 0 100%); background: linear-gradient(112deg, #eeeedf 5%, #e8e8d8 66%, #cecfbd 100%); border-radius: 4px 0 0 4px; }
.envelope-wing-right { clip-path: polygon(100% 0, 45% 57%, 100% 100%); background: linear-gradient(252deg, #eeeedf 5%, #e8e8d8 66%, #cecfbd 100%); border-radius: 0 4px 4px 0; }
.envelope-pocket { position: absolute; inset: 0; z-index: 31; clip-path: polygon(0 100%, 0 97%, 47% 45%, 50% 44%, 53% 45%, 100% 97%, 100% 100%); background: linear-gradient(0deg, #eeeede, #edecde); border-radius: 0 0 4px 4px; }
.envelope-pocket::before { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: #b5b5a13b; }
.envelope-flap { position: absolute; top: 0; left: 0; width: 100%; height: 63%; z-index: 40; transform-origin: center top; transform-style: preserve-3d; }
.flap-front, .flap-back { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 53% 96%, 51% 98%, 49% 98%, 47% 96%); backface-visibility: hidden; }
.flap-front { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 216' preserveAspectRatio='none'%3E%3Cpath d='M1 1 286 206Q300 219 314 206L599 1' fill='none' stroke='%2393977b' stroke-opacity='.27' stroke-width='1.1'/%3E%3C/svg%3E"), linear-gradient(166deg, #f3f1e5 2%, #e6e6d5 83%); background-size: 100% 100%; box-shadow: inset 0 1px #ffffff8c; }
.flap-back { background-color: #d5dbca; background-image: repeating-linear-gradient(45deg, transparent, transparent 7px, #6374580a 7px, #6374580a 8px); transform: rotateY(180deg); }
.ground-shadow { position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -47px; height: 21px; background: #566047; filter: blur(19px); border-radius: 50%; opacity: .15; animation: shadow-breathe 7s ease-in-out infinite; }

.seal-position { position: absolute; left: 50%; top: 56%; width: 92px; height: 92px; margin: -46px 0 0 -46px; z-index: 50; }
.wax-seal { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; touch-action: none; user-select: none; -webkit-user-select: none; transform: translateY(var(--seal-lift, 0px)) rotate(var(--seal-rotate, -8deg)) scale(var(--seal-scale, 1)); filter: drop-shadow(2px 5px 3px #42231442); transition: filter .25s; }
.wax-seal:hover { filter: drop-shadow(2px 7px 5px #42231466); }
.wax-seal:focus-visible { border-radius: 50%; }
.wax-edge { position: absolute; inset: 0; background: radial-gradient(ellipse at 29% 18%, #ba514b 0%, #a13834 23%, #8b282a 52%, #701e23 78%, #912e30 95%); border-radius: 46% 52% 47% 50% / 50% 43% 52% 47%; transform: rotate(14deg); box-shadow: inset 1px 2px 2px #e28b7959, inset -2px -3px 3px #51151ccc, 0 1px 1px #6c2425; }
.wax-edge::before { content: ''; position: absolute; inset: 3px; border: 1px solid #e8957833; border-radius: 46% 49% 45% 48%; }
.wax-face { position: absolute; inset: 10px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(ellipse at 70% 80%, #9d3336, #8a282d 68%); border: 1px solid #621c21b3; box-shadow: inset 0 2px 3px #54171e80, 0 1px 1px #d16d5b99, inset 0 -1px 2px #d26b6055; }
.wax-face::after { content: ''; position: absolute; inset: 4px; border: 1px solid #be5d534d; border-radius: 50%; }
.wax-initials { font-family: var(--script); font-size: 25px; transform: translate(-2px, -1px); color: #dda08a; text-shadow: 0 -1px 0 #461219, 0 1px 0 #eb9d7855; }
.wax-detail { position: absolute; bottom: 8px; font-size: 8px; color: #d48771; }

/* The paper starts behind the pocket. JS raises it only after its bottom clears the rim. */
.letter { position: absolute; left: 7%; top: 7%; width: 86%; height: var(--panel-height); z-index: 20; }
.letter-float, .letter-paper { position: relative; width: 100%; height: 100%; }
.letter-paper { perspective: 1500px; }
.letter-panel { background: #fffefa; width: 100%; position: relative; text-align: center; }
.letter-upper { height: var(--panel-height); box-shadow: 0 -1px 3px #77725b0d, 0 4px 16px #69665010; border-radius: 2px 2px 0 0; }
.letter-upper::before, .letter-lower-front::before { content: ''; position: absolute; inset: 13px 13px 0; border: 1px solid #9ca58845; border-bottom: 0; pointer-events: none; }
.paper-prompt { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 26px 5px; border: 0; background: transparent; cursor: grab; letter-spacing: 2.8px; font-size: 9px; font-weight: 500; touch-action: none; user-select: none; -webkit-user-select: none; }
.paper-prompt:disabled { cursor: default; }
.paper-prompt:focus-visible { outline: 1px solid #a7b097; outline-offset: -7px; }
.invitation-app[data-state="dragging"] .paper-prompt { cursor: grabbing; }
.paper-prompt-action { font-size: 10px; font-weight: 300; letter-spacing: .4px; margin-top: 10px; display: flex; align-items: center; gap: 5px; }
.paper-prompt-action svg { width: 15px; stroke: currentColor; fill: none; stroke-width: 1.2; animation: paper-nudge 2s ease-in-out infinite; }
.paper-prompt.is-armed .paper-prompt-action { color: #4f6b45; }
.paper-prompt.is-armed .paper-prompt-action svg { animation: none; transform: translateY(-3px); }
.invitation-heading { height: 100%; padding: 24px 18px 0; opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.invitation-heading .eyebrow { font-size: 8px; letter-spacing: 2.1px; }
.invitation-heading h2 { font-family: var(--script); font-weight: 400; font-size: 62px; line-height: 1.2; white-space: nowrap; margin: 10px 0 12px; outline: none; }
.invitation-heading h2 span { font-size: .68em; }
.invitation-intro { font-size: 11px; font-weight: 300; margin: 0; letter-spacing: .1px; line-height: 1.6; }
.guest-greeting { font-size: 12px; font-weight: 500; font-style: italic; margin: 0 0 9px; letter-spacing: .2px; }
.letter-lower { position: absolute; top: 100%; left: 0; width: 100%; height: var(--panel-height); transform-origin: center top; transform: rotateX(180deg); transform-style: preserve-3d; visibility: hidden; }
.letter-lower-front { height: 100%; padding: 24px 20px 20px; backface-visibility: hidden; box-shadow: 0 15px 28px #51573c12; border-radius: 0 0 2px 2px; overflow: hidden; }
.letter-lower-front::before { inset: 0 13px 13px; border: 1px solid #9ca58845; border-top: 0; }
.letter-lower-back { position: absolute; inset: 0; background: #fffefa; backface-visibility: hidden; transform: rotateX(180deg); box-shadow: 0 -8px 17px #3c46351c; }
.letter-lower-back::after { content: ''; position: absolute; inset: 13px; border: 1px solid #9ca58845; }
.fold-line { position: absolute; top: 0; left: 0; right: 0; height: 16px; background: linear-gradient(#d3d0be15, transparent); border-top: 1px solid #e4e2d438; }
.date-month { margin: 0 0 10px; font-size: 10px; letter-spacing: 3.4px; }
.wedding-date { display: flex; justify-content: center; align-items: center; gap: 22px; }
.wedding-date > span { font-size: 9px; letter-spacing: 1.6px; min-width: 80px; padding: 10px 0; border-top: 1px solid #b3baa380; border-bottom: 1px solid #b3baa380; }
.wedding-date strong { font-size: 46px; line-height: 1; font-weight: 300; letter-spacing: -2px; }
.date-rule { margin: 14px 0 12px; font-size: 13px; color: #8f997d; }
.invitation-message { font-size: 11px; line-height: 1.85; letter-spacing: .3px; font-weight: 300; margin: 0; }
.closing-note { font-size: 10px; font-weight: 300; margin: 11px 0 8px; letter-spacing: .2px; }
.letter-signature { font-size: 9px; letter-spacing: .7px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.letter-signature span { font-family: var(--script); font-size: 24px; letter-spacing: 0; }
.invitation-app:is([data-state="opening"], [data-state="ready"], [data-state="dragging"], [data-state="extracting"], [data-state="presenting"], [data-state="unfolding"], [data-state="reading"]) .introduction { opacity: 0; transform: translateY(-15px); pointer-events: none; }
.invitation-app:is([data-state="presenting"], [data-state="unfolding"], [data-state="reading"]) .scene-shell { margin-bottom: 16px; }
.invitation-app[data-state="reading"] .letter-float { animation: letter-float 8s ease-in-out infinite; }
.invitation-app:is([data-state="dragging"], [data-state="extracting"], [data-state="presenting"], [data-state="unfolding"]) .floating-envelope { animation-play-state: paused; }
.invitation-app[data-state="reading"] .envelope-back { box-shadow: 0 15px 26px #4b503422; }

.interaction-guide { position: relative; z-index: 5; text-align: center; margin-top: 57px; min-height: 83px; }
.instruction-row { display: flex; justify-content: center; align-items: center; gap: 9px; }
.interaction-icon { width: 18px; height: 22px; stroke: #66755e; stroke-width: 1.1; flex-shrink: 0; }
#interactionHint { font-size: 12px; font-weight: 400; letter-spacing: .45px; margin: 0; line-height: 1.5; }
.interaction-subtext { color: #8c9082; font-weight: 300; font-size: 10px; margin: 9px 0 19px; letter-spacing: .25px; }
.journey { display: flex; align-items: center; justify-content: center; gap: 7px; }
.journey-dot { width: 4px; height: 4px; border: 1px solid #a2aa94; border-radius: 50%; transition: background .4s, transform .4s; }
.journey-dot.is-current { background: #526548; border-color: #526548; transform: scale(1.25); }
.journey-dot.is-complete { background: #97a18a; }
.journey-line { height: 1px; width: 21px; background: #aab39c66; }
.replay-button { cursor: pointer; background: transparent; border: 0; border-bottom: 1px solid #87947877; padding: 6px 0; margin: 14px 0 0; font-size: 10px; letter-spacing: .5px; display: inline-flex; gap: 6px; align-items: center; }
.replay-button svg { height: 13px; width: 13px; stroke: currentColor; stroke-width: 1.1; }
.replay-button:hover { color: #71815a; }
.invitation-app[data-state="reading"] .journey { display: none; }
.invitation-app[data-state="reading"] .interaction-subtext { margin-bottom: 0; }
.page-footer { display: flex; justify-content: center; align-items: center; gap: 15px; min-height: 78px; padding: 24px 0; color: #858e7b; position: relative; z-index: 2; }
.page-footer span { font-size: 8px; letter-spacing: 2.1px; }
.page-footer svg { width: 13px; height: 13px; stroke: #7b896e; stroke-width: 1.1; }
.no-script { position: fixed; inset: auto 20px 20px; padding: 20px; background: #fffefa; z-index: 500; text-align: center; }

.scroll-cue { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 5px; width: fit-content; padding: 10px 14px 8px; border-radius: 20px; background: #fffefad9; box-shadow: 0 6px 16px #4b503433; color: var(--muted); text-decoration: none; font-size: 9px; letter-spacing: 2px; opacity: 0; pointer-events: none; transition: opacity .7s ease .3s; }
.scroll-cue.is-visible { opacity: 1; pointer-events: auto; }
.scroll-cue svg { width: 14px; stroke: currentColor; fill: none; stroke-width: 1.2; animation: scroll-bounce 1.8s ease-in-out infinite; }

.more-content { position: relative; z-index: 2; opacity: 0; transition: opacity .9s ease; }
.more-content.is-visible { opacity: 1; }
.site-section { padding: 88px 24px; display: flex; justify-content: center; }
.site-section:nth-of-type(even) { background: #eeeee3; }
.section-inner { max-width: 620px; width: 100%; text-align: center; }
.section-eyebrow { margin: 0; font-size: 10px; font-weight: 500; letter-spacing: 3px; color: var(--muted); }
.site-section h2 { font-family: var(--script); font-size: clamp(38px, 4.6vw, 54px); font-weight: 400; margin: 10px 0 20px; }
.section-lead { font-size: 15px; font-weight: 400; margin: 0; line-height: 1.6; }
.section-note { font-size: 12px; font-weight: 300; color: var(--muted); margin: 14px 0 0; line-height: 1.6; }

.map-embed { margin-top: 28px; border-radius: 6px; overflow: hidden; box-shadow: 0 12px 30px #4b503422; aspect-ratio: 16 / 10; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.schedule-list { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 16px; max-width: 320px; margin-inline: auto; }
.schedule-list li { display: flex; align-items: baseline; justify-content: center; gap: 18px; border-bottom: 1px solid #d8d5c5; padding-bottom: 14px; }
.schedule-time { font-size: 12px; letter-spacing: .8px; min-width: 74px; text-align: right; color: var(--muted); }
.schedule-title { font-size: 15px; font-weight: 500; text-align: left; min-width: 150px; }

.rsvp-deadline { font-size: 14px; font-weight: 300; margin: 18px 0 0; }
.rsvp-deadline strong { font-size: 17px; font-weight: 500; letter-spacing: .3px; }
.rsvp-contact-phone { margin: 16px 0 0; font-size: 15px; font-weight: 400; color: var(--green); }

.gallery-carousel { position: relative; margin-top: 30px; }
.gallery-track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: 6px; box-shadow: 0 12px 30px #4b503422; -ms-overflow-style: none; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fffefaf0; box-shadow: 0 4px 10px #4b503433; cursor: pointer; display: grid; place-items: center; color: var(--green); }
.gallery-arrow svg { width: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.gallery-arrow-prev { left: -14px; }
.gallery-arrow-next { right: -14px; }
.gallery-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.gallery-dot { width: 7px; height: 7px; border-radius: 50%; background: #c9c6b4; border: 0; padding: 0; cursor: pointer; }
.gallery-dot.is-current { background: var(--green); }

.site-footer { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 78px; padding: 24px 0; color: #858e7b; font-size: 8px; letter-spacing: 2.1px; }

@keyframes scroll-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

@keyframes envelope-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(.4deg); } }
@keyframes letter-float { 0%, 100% { transform: translateY(0) rotate(.4deg); } 50% { transform: translateY(-4px) rotate(-.4deg); } }
@keyframes shadow-breathe { 0%, 100% { transform: scaleX(1); opacity: .16; } 50% { transform: scaleX(.94); opacity: .12; } }
@keyframes paper-nudge { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }

@media (min-width: 761px) and (max-height: 820px) {
  :root { --envelope-width: min(490px, calc(100vw - 88px)); --lower-height: 244px; }
  .masthead { height: 77px; }
  .main-content { padding-top: 10px; }
  .introduction { margin-bottom: 37px; }
  h1 { font-size: 70px; }
  .interaction-guide { margin-top: 43px; }
  .page-footer { min-height: 61px; padding: 19px 0; }
  .invitation-heading h2 { font-size: 55px; }
  .letter-lower-front { padding-top: 20px; }
}

@media (max-width: 760px) {
  :root { --envelope-width: min(480px, calc(100vw - 48px)); --lower-height: 250px; --letter-rise: 0px; }
  .invitation-app { padding: 0 25px; }
  .page-frame { inset: 11px; }
  .masthead { height: 84px; gap: 10px; }
  .wordmark { font-size: 33px; }
  .masthead-note { display: none; }
  .masthead-date { font-size: 9px; letter-spacing: 1.5px; }
  .masthead-date span { padding: 0 3px; }
  .main-content { padding-top: 32px; padding-bottom: 20px; }
  .introduction { margin-bottom: 67px; }
  h1 { font-size: clamp(52px, 9.6vw, 72px); margin-top: 11px; }
  h1 span { padding: 0 1px; }
  .eyebrow { font-size: 8px; letter-spacing: 2.8px; }
  .intro-note { font-size: 11px; }
  .botanical { --flower-size: clamp(150px, 36vw, 200px); opacity: .72; }
  .botanical-top img { right: -25px; top: 12px; }
  .botanical-bottom img { left: -18px; bottom: -20px; }
  .seal-position { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
  .wax-face { inset: 8px; }
  .wax-initials { font-size: 21px; }
  .wax-detail { bottom: 6px; }
  .interaction-guide { margin-top: 53px; }
  .paper-prompt { padding-top: 17px; font-size: 8px; letter-spacing: 2px; }
  .paper-prompt-action { margin-top: 7px; font-size: 9px; }
  .invitation-heading { padding: 15px 12px 8px; }
  .invitation-heading .eyebrow { font-size: 6.5px; letter-spacing: 1.5px; }
  .invitation-heading h2 { font-size: clamp(31px, 8.7vw, 52px); margin: 6px 0 7px; }
  .invitation-intro { font-size: 9px; max-width: 210px; }
  .guest-greeting { font-size: 10px; margin-bottom: 6px; }
  .letter-lower-front { padding: 20px 16px; }
  .wedding-date { gap: 15px; }
  .wedding-date > span { font-size: 8px; min-width: 62px; letter-spacing: 1.1px; }
  .wedding-date strong { font-size: 43px; }
  .invitation-message { font-size: 10px; }
  .closing-note { font-size: 9px; }
  .invitation-app:is([data-state="presenting"], [data-state="unfolding"], [data-state="reading"]) .scene-shell { margin-bottom: 151px; }
  .page-footer { min-height: 65px; gap: 11px; }
  .page-footer span { font-size: 7px; letter-spacing: 1.6px; }
  .site-section { padding: 64px 20px; }
  .gallery-arrow-prev { left: 4px; }
  .gallery-arrow-next { right: 4px; }
  .scroll-cue { right: 12px; bottom: 12px; padding: 8px; border-radius: 50%; }
  .scroll-cue span { display: none; }
}

@media (max-width: 760px) and (max-height: 740px) {
  .invitation-app:is([data-state="presenting"], [data-state="unfolding"], [data-state="reading"]) .scene-shell { margin-top: -115px; }
  .scene-shell { transition: margin-bottom 1.2s ease, margin-top 1.2s ease; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scene { transform: none !important; }
}

/* Keep every personal detail concealed until the letter is fully open. */
.masthead { transition: opacity 1s ease; }
.invitation-app:not([data-state="reading"]) .masthead { opacity: 0; visibility: hidden; pointer-events: none; }

/* Suggested trip (Italian and English only) */
.trip-list { list-style: none; padding: 0; margin: 34px auto 0; max-width: 520px; display: flex; flex-direction: column; gap: 22px; text-align: left; }
.trip-list li { display: flex; gap: 22px; align-items: baseline; border-bottom: 1px solid #d8d5c5; padding-bottom: 20px; }
.trip-list li:last-child { border-bottom: 0; }
.trip-day { flex: 0 0 64px; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.trip-title { display: block; font-size: 15px; font-weight: 500; margin-bottom: 5px; }
.trip-desc { display: block; font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--muted); }
@media (max-width: 520px) { .trip-list li { flex-direction: column; gap: 6px; } .trip-day { flex-basis: auto; } }
.trip-extra { max-width: 520px; margin: 8px auto 0; padding: 22px 24px; border: 1px solid #d8d5c5; border-radius: 4px; background: #fffefa80; }
.trip-extra-title { font-family: var(--script); font-size: 30px; line-height: 1.2; margin: 0 0 8px; }
.trip-extra-text { font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--muted); margin: 0; }

/* Gallery: one portrait photo at a time */
.gallery-carousel { --gallery-gap: 14px; max-width: 400px; margin-inline: auto; }
.gallery-track { gap: var(--gallery-gap); }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: #e4e1d2; }
.gallery-slide img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-select: none; }
.gallery-arrow:disabled { opacity: .35; cursor: default; }

/* Pulling the letter must never scroll or pull-to-refresh the page on touch screens. */
html, body { overscroll-behavior-y: contain; }
.invitation-app:is([data-state="ready"], [data-state="dragging"], [data-state="extracting"]) .scene-shell { touch-action: none; }