@font-face { font-family: 'Invitation Serif'; src: url('assets/invitation-serif.ttf') format('truetype'); font-weight: 500; font-display: swap; }
.kiosk { position: relative; isolation: isolate; container-type: inline-size; width: min(100%, 66.6667dvh); min-height: 100dvh; margin-inline: auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--ivory); overflow: clip; }
.couple-photo, .photo-veil, .snowfall { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.couple-photo { object-fit: cover; object-position: 53% 50%; z-index: -3; }
.photo-veil { z-index: -2; background: linear-gradient(180deg, rgba(245,248,252,.80), rgba(245,248,252,.52) 18%, rgba(245,248,252,0) 40%); }
.invitation { padding: 6cqi 5cqi 0; text-align: center; }
.invitation-eyebrow { font-size: clamp(12px, 2.4cqi, 20px); letter-spacing: .05em; font-weight: 500; }
.rotating-message { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 21cqi; margin-top: 3cqi; }
.rotating-message p { grid-area: 1/1; font-size: clamp(32px, 9.5cqi, 80px); font-weight: 700; letter-spacing: -.035em; line-height: 1.22; }
.hero-line { display: block; white-space: nowrap; }
.couple-names { font-family: 'Invitation Serif', 'AppleMyungjo', serif; font-weight: 500; font-size: clamp(23px, 5cqi, 40px); margin-top: 1.4cqi; }
.couple-names span { font-family: Georgia, serif; font-style: italic; padding-inline: 1cqi; font-weight: 400; }
.wedding-details { margin-top: 2.8cqi; font-size: clamp(12px, 2.5cqi, 20px); line-height: 1.8; }
.wedding-details time { font-family: Georgia, serif; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.gift-selection { --choice-inset: 7cqi; grid-row: 3; position: relative; padding: 20cqi var(--choice-inset) max(5cqi, env(safe-area-inset-bottom)); text-align: center; background: linear-gradient(180deg, rgba(245,248,252,0), rgba(245,248,252,.84) 27%, rgba(245,248,252,.95) 58%, rgba(245,248,252,.98)); }
.gift-selection h2 { font-size: clamp(20px, 4.6cqi, 38px); font-weight: 500; letter-spacing: -.045em; line-height: 1.5; }
.selection-description { margin-top: 1.5cqi; color: var(--secondary); font-size: clamp(14px, 2.8cqi, 22px); line-height: 1.7; }
.family-grid { --choice-gap: 8cqi; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--choice-gap); margin-top: 5cqi; }
.family-information { margin-bottom: 3.5cqi; }
.family-label { color: var(--secondary); font-size: clamp(12px, 2.5cqi, 20px); }
.parent-names { margin-top: 1.4cqi; font-size: clamp(17px, 3.7cqi, 30px); font-weight: 500; letter-spacing: -.045em; white-space: nowrap; }
.parent-names span { margin-inline: .4cqi; color: var(--secondary); font-weight: 400; }
.family-button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(6px, 1.5cqi, 18px); width: 100%; aspect-ratio: 1; min-height: 0; padding: 12%; border: 0; border-radius: 50%; text-align: center; box-shadow: 0 8px 24px rgba(23,44,72,.06); }
.groom-button { color: var(--groom); background: #e3eefb; }
.groom-button:hover { color: var(--groom-hover); background: #d6e6f9; }
.bride-button { color: var(--bride); background: #fbe8f0; }
.bride-button:hover { color: var(--bride-hover); background: #f5d9e5; }
.family-button-title { display: block; font-size: clamp(14px, 3cqi, 24px); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.family-button-name { display: block; font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; color: #000; font-size: clamp(22px, 5.2cqi, 42px); font-weight: 700; letter-spacing: -.04em; line-height: 1.3; white-space: nowrap; }
.family-button-action { display: flex; align-items: center; justify-content: center; gap: 2cqi; font-size: clamp(16px, 3.3cqi, 30px); line-height: 1.5; }
.family-button-action svg { width: 4.5cqi; max-width: 30px; }
.motion-toggle { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); background: rgba(245,248,252,.78); border: 0; border-radius: 50%; z-index: 2; }
.motion-toggle:hover { background: var(--ivory); }
.motion-toggle svg { width: 20px; height: 20px; }
.motion-toggle .play-icon { display: none; }
.motion-toggle[aria-pressed=true] .play-icon { display: block; }
.motion-toggle[aria-pressed=true] .pause-icon { display: none; }
@media (max-width: 350px) { .parent-names { font-size: 15px; } .gift-selection { --choice-inset: 6cqi; } }
@media (max-height: 650px) { .rotating-message { margin-top: 2cqi; min-height: 18cqi; } .rotating-message p { font-size: clamp(26px, 6.6cqi, 48px); } .wedding-details { margin-top: 1cqi; } }
@media (min-aspect-ratio: 1/1) { .kiosk { box-shadow: 0 0 60px rgba(23,44,72,.06); } .rotating-message p { font-size: clamp(32px, 8cqi, 64px); } .gift-selection { padding-top: 17cqi; } }