@import url('../../../theme-v2/theme-fonts.css');

:root {
    --station-green: #173d35;
    --station-ink: #253c33;
    --station-muted: #5f6c63;
    --station-cream: #f5f0e6;
    --station-paper: #fbf7ee;
    --station-gold: #a68b53;
    --station-line: #d7ccb4;
    /* The couple's own fonts (custom font add-on) take over the HTML when set; see x-theme-custom-fonts.
       The signs painted into the station keep Cormorant and Manrope (station-architecture.js). */
    --station-serif: var(--invie-font-heading, 'Cormorant Garamond'), Georgia, serif;
    --station-sans: var(--invie-font-body, 'Manrope'), Arial, sans-serif;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* The document never scrolls smoothly by itself: in the animated edition its scroll is the camera's
   rail, and the browser's own smooth jump to a shared #chapter link kept going after the station's
   jump and left the guest pages further on. Script asks for a smooth scroll where it wants one. */
html { scroll-padding-top: 105px; }
body { margin: 0; color: var(--station-ink); background: #eae6d9; font-family: var(--station-sans); font-size: 14px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { color: inherit; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.station-cover-flowers, .station-panel-flowers { height: auto; }
button:disabled { cursor: default; opacity: .48; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #c29c56; outline-offset: 5px; }
button[hidden], [hidden] { display: none !important; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-weight: 500; }
h1, h2, h3 { font-family: var(--station-serif); }

.station-skip { position: fixed; z-index: 100; left: 12px; top: 12px; padding: 12px 20px; border-radius: 8px; color: white; background: var(--station-green); transform: translateY(-150%); }
.station-skip:focus { transform: translateY(0); }
.station-stage { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.station-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.station-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, #f4eee9c7 0, #f4eee908 18%, #173d3500 70%, #173d3529 100%); pointer-events: none; }
.station-header { position: fixed; z-index: 20; top: 0; left: 0; width: 100%; padding: 20px max(30px, 4vw); padding-top: max(20px, env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(180deg, #f5f0e6f2, #f5f0e68a 85%, #f5f0e600); }
.station-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; }
.station-brand-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 43px; height: 43px; border: 1px solid #a68b5380; border-radius: 50%; font-family: var(--station-serif); font-size: 30px; font-style: italic; line-height: 1; }
.station-brand-mark span { margin: 8px 0 0 -8px; font-size: 25px; }
.station-brand-name { font-size: 12px; line-height: 1.65; text-transform: uppercase; letter-spacing: .2em; }
.station-header-caption { margin: 0 0 0 20px; font-size: 12px; text-align: center; letter-spacing: .25em; color: #486052; }
.station-controls { display: flex; align-items: center; gap: 9px; }
.station-mode-switch { display: flex; padding: 4px; background: #fbf7eee8; border: 1px solid #b7ad9675; border-radius: 30px; box-shadow: 0 5px 20px #193d3508; }
.station-mode-switch button { padding: 9px 13px; min-height: 44px; border: 0; border-radius: 24px; font-size: 12px; font-weight: 600; white-space: nowrap; background: transparent; transition: color .2s, background .2s; }
.station-mode-switch button[aria-pressed='true'] { color: #fff8e9; background: var(--station-green); }
.station-motion-icon { margin-right: 3px; }
.station-audio-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 44px; height: 44px; border: 1px solid #b7ad9699; border-radius: 50%; background: #fbf7eee8; font-size: 20px; flex-shrink: 0; }
.station-audio-button[aria-pressed='true'] { background: var(--station-green); color: #fff8e9; }
.station-audio-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.station-journey { position: relative; z-index: 1; }
.station-stop { position: relative; min-height: 100vh; min-height: 100svh; padding: 135px max(48px, 6vw) 150px; display: flex; align-items: center; scroll-margin-top: 0; }
.station-eyebrow { margin-bottom: 18px; color: #636b58; font-size: 12px; line-height: 1.65; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.station-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 145px 24px 125px; min-height: 100svh; isolation: isolate; overflow: hidden; }
.station-cover::before { position: absolute; z-index: -1; content: ''; inset: 0; background: radial-gradient(ellipse 37% 65% at 50% 52%, #f6f0e6ea 0%, #f6f0e6d9 62%, #f6f0e614 100%); }
.station-cover-frame { position: absolute; z-index: -1; top: 118px; bottom: 112px; width: min(680px, 69vw); border: 1px solid #a58c5563; border-top-left-radius: 330px 180px; border-top-right-radius: 330px 180px; }
.station-cover-frame::before { position: absolute; content: ''; inset: 10px; border: 1px solid #a58c553a; border-top-left-radius: 320px 178px; border-top-right-radius: 320px 178px; }
.station-cover-copy { position: relative; width: min(100%, 600px); text-align: center; padding: 42px 25px 34px; }
.station-cover-copy > .station-eyebrow { letter-spacing: .32em; margin-bottom: 10px; }
.station-cover-flourish { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--station-gold); font-size: 13px; margin-bottom: 22px; }
.station-cover-flourish span { width: 67px; border-top: 1px solid #a68b5380; }
.station-cover h1 { margin: 0; font-size: clamp(4rem, 6.3vw, 6.9rem); line-height: .94; letter-spacing: -.045em; overflow-wrap: anywhere; text-wrap: balance; }
.station-cover-subtitle { margin: 22px 0 13px; font-family: var(--station-serif); font-size: 25px; line-height: 1.15; font-weight: 500; color: #6d775e; }
.station-cover-subtitle em { font-weight: 400; }
.station-cover-date { margin: 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.station-guest-dedication { margin: 28px 0 23px; padding: 15px 15px 0; border-top: 1px solid #a68b533b; }
.station-guest-dedication p { margin-bottom: 2px; font-size: 12px; color: var(--station-muted); }
.station-guest-dedication strong { display: block; font-family: var(--station-serif); font-size: 24px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.station-button { position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 26px; padding: 15px 25px; min-height: 49px; max-width: 100%; border: 1px solid var(--station-green); border-radius: 2px; color: #fff9eb; background: var(--station-green); font-size: 12px; text-decoration: none; letter-spacing: .03em; line-height: 1.5; transition: background .2s, transform .2s, box-shadow .2s; }
.station-button span:last-child { font-size: 19px; line-height: 1; }
.station-button:hover:not(:disabled) { background: #245447; box-shadow: 0 5px 15px #173d3526; transform: translateY(-2px); }
.station-start { width: 260px; }
.station-cover-walk-cue { display: none; }
body[data-mode='animated'] .station-start { display: none; }
body[data-mode='animated'] [data-station-go] { display: none; }
body[data-mode='animated'] .station-cover-walk-cue { display: block; margin: 18px 0 0; font-size: 13px; line-height: 1.6; letter-spacing: .03em; color: inherit; }
.station-cover-walk-cue > span { display: block; margin-top: 4px; font-size: 22px; line-height: 1; }
.station-cover-hint { margin: 14px 0 0; font-size: 12px; color: #626d5f; }
.station-cover-flowers { position: absolute; pointer-events: none; z-index: -1; width: clamp(230px, 26vw, 465px); max-width: none; filter: drop-shadow(0 9px 8px #2843360e); }
.station-cover-flowers-left { left: calc(50% - min(51vw, 810px)); top: 24%; transform: rotate(17deg); }
.station-cover-flowers-right { right: calc(50% - min(51vw, 810px)); top: 24%; transform: scaleX(-1) rotate(17deg); }
.station-scroll-cue { position: absolute; bottom: 83px; display: flex; align-items: center; gap: 14px; font-size: 12px; text-decoration: none; letter-spacing: .17em; }
.station-scroll-cue span:last-child { font-size: 22px; animation: station-cue 2.6s ease-in-out infinite; }
@keyframes station-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.station-panel { position: relative; margin-left: auto; width: min(49vw, 690px); border: 1px solid #dccdb4; border-radius: 170px 170px 3px 3px / 46px 46px 3px 3px; background: linear-gradient(150deg, #fffcf5fa, #f5efdfed); box-shadow: 0 18px 80px #0a2c2320, inset 0 0 0 8px #fbf5e580; }
.station-panel::before { position: absolute; content: ''; inset: 10px; border: 1px solid #b9a17042; border-radius: 160px 160px 0 0 / 40px 40px 0 0; pointer-events: none; }
.station-panel-content { position: relative; z-index: 1; padding: 65px 52px 58px; }
.station-panel h2 { font-size: clamp(44px, 4.5vw, 65px); line-height: 1; letter-spacing: -.025em; margin: 0 0 23px; text-wrap: balance; }
.station-panel h2 em { display: block; font-weight: 400; color: #778369; }
.station-introduction { font-size: 13px; line-height: 1.9; max-width: 470px; color: #5b695f; margin-bottom: 30px; }
.station-panel-ornaments { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.station-panel-flowers { position: absolute; max-width: none; width: 190px; opacity: .55; }
.station-panel-flowers-top { left: -65px; top: -92px; transform: rotate(42deg); }
.station-panel-flowers-bottom { right: -65px; bottom: -82px; transform: rotate(210deg); width: 230px; opacity: .5; }
.station-couple-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 30px 0 22px; }
.station-person { text-align: center; min-width: 0; }
.station-portrait { aspect-ratio: 4 / 5; margin-bottom: 16px; padding: 6px; border: 1px solid #b3a079; border-radius: 130px 130px 3px 3px; background: #e5e6d8; }
.station-portrait img { height: 100%; width: 100%; object-fit: cover; border-radius: 125px 125px 0 0; }
.station-portrait-empty { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #f5eddc, #cdd7c5); }
.station-portrait-empty span { font-family: var(--station-serif); font-size: 78px; color: #8b9a82; font-style: italic; }
.station-person h3 { margin: 0 0 6px; font-size: 31px; line-height: 1; }
.station-person-name { margin-bottom: 6px; font-size: 12px; font-weight: 600; line-height: 1.65; }
.station-person-parents { color: #666a5f; font-size: 12px; line-height: 1.8; white-space: pre-line; }
.station-quote { position: relative; margin: 30px 0; padding: 20px 0 16px; border-top: 1px solid #bba27350; border-bottom: 1px solid #bba27350; text-align: center; }
.station-quote > span { position: absolute; top: -8px; left: calc(50% - 12px); background: #faf5e9; padding: 0 8px; font-family: var(--station-serif); font-size: 34px; line-height: 1; color: var(--station-gold); }
.station-quote p { margin: 0; font-size: 15px; line-height: 1.9; color: #616c5b; white-space: pre-line; }
.station-quote__source { display: block; margin-top: 10px; font-family: var(--station-sans); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--station-gold); overflow-wrap: break-word; }
.station-text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 17px; min-height: 44px; padding: 6px 0; font-size: 12px; text-decoration: none; border-bottom: 1px solid #a68b535e; }
.station-text-link > span { font-size: 18px; }
.station-ticket { position: relative; padding: 22px 25px 20px; margin: 30px 0 40px; border: 1px solid #b29b67; background: #ede6d64d; }
.station-ticket::before, .station-ticket::after { content: ''; position: absolute; left: -7px; top: calc(63% - 7px); width: 13px; height: 13px; border: 1px solid #b29b67; border-left-color: transparent; border-bottom-color: transparent; background: #fcf7eb; border-radius: 50%; transform: rotate(45deg); }
.station-ticket::after { left: auto; right: -7px; transform: rotate(225deg); }
.station-ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; letter-spacing: .11em; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid #b29b6761; }
.station-ticket-top > span:nth-child(2) { font-size: 16px; }
.station-ticket > p { font-size: 15px; letter-spacing: .15em; margin: 0 0 4px; }
.station-ticket > strong { display: block; font-family: var(--station-serif); font-size: 27px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.station-ticket-route { display: flex; align-items: center; gap: 12px; margin: 20px 0 15px; padding-bottom: 19px; border-bottom: 1px dashed #b29b678c; font-size: 12px; letter-spacing: .1em; }
.station-ticket-route i { flex: 1; border-bottom: 1px solid #b29b67; position: relative; }
.station-ticket-route i::after { position: absolute; right: 0; top: -4px; content: ''; border: 4px solid transparent; border-left-color: #b29b67; }
.station-ticket-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12px; line-height: 1.5; }
.station-events { display: grid; gap: 28px; }
.station-event { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 0 0 29px; border-bottom: 1px solid #d4c4a94f; }
.station-event:last-child { margin-bottom: 14px; }
.station-event-number { font-family: var(--station-serif); font-size: 25px; font-variant-numeric: lining-nums; line-height: 1.2; color: #a68b53; }
.station-event-content { min-width: 0; }
.station-event h3 { margin: 0 0 9px; font-size: 34px; line-height: 1; }
.station-event-date { margin-bottom: 18px; font-size: 12px; line-height: 1.9; }
.station-event-date span { color: #6a7567; }
.station-event h4 { margin: 0 0 6px; font-family: var(--station-sans); font-size: 12px; font-weight: 700; }
.station-event-address { margin-bottom: 15px; font-size: 12px; line-height: 1.8; color: #616b61; }
.station-event-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.station-small-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; border: 1px solid #a68b5380; border-radius: 1px; padding: 10px 15px; min-height: 44px; background: transparent; text-decoration: none; font-size: 12px; line-height: 1.4; }
.station-small-button:hover { background: #e4dac944; }
.station-story-timeline { padding: 0; margin: 32px 0 22px; list-style: none; }
.station-story { position: relative; margin-left: 7px; padding: 2px 0 31px 28px; border-left: 1px solid #b4a5776e; }
.station-story:last-child { border-left-color: transparent; padding-bottom: 8px; }
.station-story-mark { position: absolute; top: -3px; left: -8px; width: 16px; background: #faf6ec; color: #a68b53; font-size: 19px; line-height: 1.1; }
.station-story .station-eyebrow { font-size: 12px; margin-bottom: 6px; letter-spacing: .14em; }
.station-story h3 { font-size: 31px; margin: 0 0 14px; line-height: 1.05; }
/* A story's photograph is a mounted print at its own shape, never cut down to a strip, and opens large. */
.station-story-photo { display: block; width: 100%; margin: 17px 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: zoom-in; container-type: inline-size; }
.station-story-print { position: relative; display: inline-block; vertical-align: top; padding: 5px; border: 1px solid #cbbfa2; background: #eee7d7; }
.station-story-image { display: block; width: auto; height: auto; max-width: calc(100cqw - 12px); max-height: min(62vh, 460px); }
.station-story-print .station-photo-enlarge { right: 10px; bottom: 10px; }
.station-story-photo:focus-visible { outline: 2px solid #c29c56b3; outline-offset: 4px; }
.station-story-body { margin: 0; font-size: 12px; line-height: 1.95; color: #606c5f; white-space: pre-line; }
.station-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0; }
.station-photo { position: relative; display: block; padding: 5px; border: 1px solid #cbbfa2; background: #eee7d7; aspect-ratio: 4 / 5; overflow: hidden; }
.station-photo:nth-child(3n + 1) { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.station-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.station-photo:hover img { transform: scale(1.04); }
.station-photo-enlarge { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 30px; height: 30px; color: white; background: #173d35b8; border-radius: 50%; font-size: 19px; }
.station-photo-empty { grid-column: 1 / -1; text-align: center; padding: 30px 10px; background: #e8e8da55; border: 1px solid #b6ab9050; }
.station-photo-empty > span { color: #a68b53; font-size: 50px; }
.station-photo-empty p { font-size: 15px; }
.station-guestbook { display: grid; gap: 28px; }
.station-demo-note { font-size: 12px; line-height: 1.9; color: #59614f; padding: 14px 17px; background: #e9e5d4a6; border-left: 2px solid #b29b67; margin: 25px 0; }
.station-form { border-top: 1px solid #c9b99280; padding-top: 25px; }
.station-form h3, .station-notes-wrap h3, .station-gifts h3 { margin: 0 0 23px; font-size: 29px; line-height: 1.15; }
.station-field { margin-bottom: 18px; }
.station-field label { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 600; }
.station-field input, .station-field select, .station-field textarea { display: block; width: 100%; min-height: 48px; border: 1px solid #c4b99f; padding: 12px 14px; border-radius: 2px; color: #253c33; background: #fffdf6b3; font-size: 13px; line-height: 1.6; }
.station-field select { padding-right: 28px; }
.station-field textarea { resize: vertical; min-height: 112px; }
.station-field input:focus, .station-field textarea:focus, .station-field select:focus { border-color: #8e9b79; }
.station-field-help { margin: 7px 0 0; font-size: 12px; line-height: 1.7; color: #616c61; }
.station-form-status { margin: 0 0 12px; font-size: 12px; white-space: pre-line; }
.station-form-status:empty { display: none; }
.station-notes-wrap { padding-top: 32px; margin-top: 30px; border-top: 1px solid #c9b99280; }
.station-notes { margin: 0; padding: 0; list-style: none; }
.station-note { padding: 16px 0; margin: 0; border-bottom: 1px solid #c9b99255; }
.station-note p { color: #566555; font-size: 15px; margin: 0 0 5px; line-height: 1.85; white-space: pre-line; overflow-wrap: anywhere; }
.station-note cite { display: inline; font-family: var(--station-serif); font-size: 21px; font-style: normal; }
.station-note small { display: block; font-size: 12px; color: #616c61; margin-top: 3px; }
.station-notes-status { font-size: 12px; }
.station-notes-status:empty { display: none; }
.station-gifts { margin-top: 38px; padding-top: 32px; border-top: 1px solid #c9b99280; }
.station-gifts .station-eyebrow { margin-bottom: 8px; }
.station-gifts h3 { margin-bottom: 14px; }
.station-gifts > p:not(.station-eyebrow) { font-size: 12px; line-height: 1.9; color: #616c61; }
.station-gift-grid { display: grid; gap: 14px; margin-top: 20px; }
.station-gift { padding: 22px; border: 1px solid #b8aa8569; background: #ebe5d455; }
.station-gift .station-eyebrow { display: block; }
.station-gift strong { display: block; margin-bottom: 5px; font-size: 20px; letter-spacing: .04em; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.station-gift > p { font-size: 15px; margin-bottom: 14px; }
.station-closing { position: relative; text-align: center; padding: 25px 0 15px; margin-top: 32px; }
.station-closing > img { width: 100%; height: auto; max-height: 165px; object-fit: contain; margin: 0 auto -2px; }
.station-closing > .station-eyebrow { font-size: 12px; margin-bottom: 12px; }
.station-closing-message { color: #616c61; font-size: 15px; line-height: 1.9; white-space: pre-line; }
.station-closing-names { margin: 20px 0 12px; font-family: var(--station-serif); font-size: 38px; line-height: 1; text-wrap: balance; }
.station-navigation { position: fixed; z-index: 20; bottom: max(19px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px 12px; border: 1px solid #baa7815c; border-radius: 40px; background: #fbf7eef5; box-shadow: 0 7px 32px #102a212b; backdrop-filter: blur(12px); max-width: calc(100% - 24px); }
.station-navigation > .station-room-progress { position: relative; display: flex; align-items: center; gap: 6px; text-align: center; justify-content: center; text-decoration: none; font-size: 12px; min-height: 44px; min-width: 58px; padding: 8px 10px; border-radius: 30px; color: #626c5c; white-space: nowrap; transition: color .2s, background .2s; }
.station-navigation > .station-room-progress[aria-current] { background: var(--station-green); color: #fff8e9; }
.station-navigation > button.station-room-progress { border: 0; background: transparent; font-family: inherit; line-height: inherit; cursor: pointer; }
.station-navigation > button.station-room-progress[aria-current] { background: var(--station-green); }
@media (hover: hover) { .station-navigation > button.station-room-progress:not([aria-current]):hover { background: #e9e1cf; color: #24392f; } }
/* Shortcut jumps cut through a brief veil instead of walking every plaque. */
.station-jump-veil { position: fixed; inset: 0; z-index: 12; background: #f4efe3; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
body[data-jumping='true'] .station-jump-veil { opacity: 1; }
body[data-mode='still'] .station-jump-veil { display: none; }
.station-nav-number { font-size: 12px; opacity: .9; }
.station-navigation i { display: none; }
.station-progress { position: fixed; z-index: 22; bottom: 0; left: 0; right: 0; height: 3px; background: #b3a27466; }
.station-progress > span { display: block; width: 0; height: 100%; background: #b5985b; transition: width .15s linear; }
.station-status { position: fixed; z-index: 30; right: max(24px, env(safe-area-inset-right)); bottom: max(94px, calc(env(safe-area-inset-bottom) + 75px)); max-width: min(320px, calc(100vw - 40px)); background: #173d35f2; color: #fff8e9; font-size: 12px; line-height: 1.6; padding: 12px 17px; margin: 0; border-radius: 3px; box-shadow: 0 6px 25px #173d3522; }
.station-status:empty { display: none; }
.station-photo-dialog { padding: 0; border: 1px solid #a68b5369; width: min(1000px, calc(100vw - 32px)); max-height: calc(100svh - 32px); background: #f8f2e7; color: var(--station-green); box-shadow: 0 20px 100px #08221880; overflow: auto; }
.station-photo-dialog::backdrop { background: #102b25dc; backdrop-filter: blur(6px); }
.station-photo-dialog-inner { padding: 50px 24px 22px; }
.station-photo-dialog img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100svh - 150px); object-fit: contain; margin: auto; }
.station-photo-dialog button { position: absolute; right: 8px; top: 6px; width: 44px; height: 44px; font-size: 27px; background: transparent; border: 0; }
.station-photo-dialog p { margin: 14px 0 0; font-size: 12px; text-align: center; }
.station-photo-dialog p:empty { display: none; }
.station-noscript-note { font-size: 12px; margin-top: 18px; }

body[data-mode='still'] { background: var(--station-paper); }
body[data-mode='still'] *, body[data-mode='still'] *::before, body[data-mode='still'] *::after { animation: none !important; transition: none !important; }
body[data-mode='still'] .station-stage { display: none; }
body[data-mode='still'] .station-header { background: #fbf7eef2; border-bottom: 1px solid #baa78138; }
body[data-mode='still'] .station-cover { min-height: 92svh; background: linear-gradient(#f8f2e785, #fbf7eef7 90%), url('../img/station-still.svg') center / cover no-repeat; }
body[data-mode='still'] .station-cover { background-image: linear-gradient(#f8f2e725, #fbf7eebf 70%, #fbf7eef7), url('../img/scenes/cover.webp'); }
body[data-mode='still'] .station-stop:not(.station-cover) { display: block; min-height: 0; padding: 45px 24px; }
body[data-mode='still'] .station-panel { width: min(100%, 760px); margin: auto; box-shadow: 0 8px 40px #123d3508; background: linear-gradient(150deg, #fffcf5, #f5efdf); }
body[data-mode='still'] .station-panel-content { padding: 65px 75px 58px; }
body[data-mode='still'] .station-cover-flowers { opacity: .9; }
body[data-mode='still'] .station-scroll-cue span:last-child { animation: none; }
body[data-mode='still'] .station-lounge { padding-bottom: 130px; }
body[data-mode='still'] .station-photo:hover img { transform: none; }
body[data-mode='still'] .station-button:hover:not(:disabled) { transform: none; }
.station-status.station-status-quiet { width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; box-shadow: none; }

@media (min-width: 1500px) {
    .station-panel { width: min(47vw, 760px); }
    .station-panel-content { padding-left: 65px; padding-right: 65px; }
    .station-introduction, .station-story-body { font-size: 13px; }
    .station-person-name, .station-event-date, .station-event-address, .station-story-body, .station-form label { font-size: 12px; }
    .station-person-parents { font-size: 12px; }
}

@media (max-width: 1099px) {
    .station-header { padding: 17px 28px; padding-top: max(17px, env(safe-area-inset-top)); }
    .station-header-caption { display: none; }
    .station-stop { padding: 130px 36px 130px; }
    .station-panel { width: 55vw; }
    .station-panel-content { padding: 58px 34px 45px; }
    .station-panel h2 { font-size: 49px; }
    .station-cover { padding: 145px 24px 125px; }
    .station-cover-flowers { width: 33vw; }
    .station-cover-flowers-left { left: -5vw; }
    .station-cover-flowers-right { right: -5vw; }
    .station-couple-grid { gap: 16px; }
}

@media (max-width: 820px) {
    .station-stop:not(.station-cover) { display: block; padding: 37svh 6vw 120px; }
    .station-panel { width: min(100%, 630px); margin: 0 auto; }
    .station-panel-content { padding: 60px 48px 45px; }
    .station-panel h2 { font-size: 56px; }
    .station-cover-frame { width: 75vw; }
    .station-cover-copy { width: min(77vw, 550px); padding: 40px 15px; }
    .station-cover h1 { font-size: clamp(65px, 9.3vw, 95px); }
    .station-cover-flowers { width: 40vw; top: 31%; }
    .station-cover-flowers-left { left: -12vw; }
    .station-cover-flowers-right { right: -12vw; }
    .station-couple-grid { gap: 26px; }
    body[data-mode='still'] .station-panel-content { padding: 60px 48px 45px; }
}

@media (max-width: 540px) {
    html { scroll-padding-top: 92px; }
    .station-header { padding: 13px 14px; padding-top: max(13px, env(safe-area-inset-top)); gap: 9px; }
    .station-brand { gap: 7px; }
    .station-brand-mark { width: 33px; height: 33px; font-size: 23px; }
    .station-brand-mark span { font-size: 21px; margin: 6px 0 0 -7px; }
    .station-brand-name { font-size: 12px; letter-spacing: .13em; }
    .station-controls { gap: 5px; }
    .station-mode-switch { padding: 3px; }
    .station-mode-switch button { padding: 9px 9px; font-size: 12px; min-height: 44px; }
    .station-motion-icon { display: none; }
    .station-audio-button { width: 44px; height: 44px; font-size: 19px; }
    .station-cover { min-height: max(720px, 100svh); padding: 110px 16px 110px; }
    .station-cover::before { background: radial-gradient(ellipse 75% 57% at 50% 48%, #f6f0e6f2 0%, #f6f0e6cf 65%, #f6f0e617 100%); }
    .station-cover-copy { width: 100%; padding: 36px 27px 24px; }
    .station-cover-copy > .station-eyebrow { font-size: 12px; letter-spacing: .22em; }
    .station-cover-frame { top: 100px; bottom: 100px; width: calc(100% - 44px); border-top-left-radius: 220px 145px; border-top-right-radius: 220px 145px; }
    .station-cover h1 { font-size: clamp(56px, 15.5vw, 82px); line-height: .97; letter-spacing: -.035em; }
    .station-cover-subtitle { font-size: 24px; margin-top: 18px; }
    .station-cover-date { font-size: 12px; letter-spacing: .1em; }
    .station-cover-flourish { margin-bottom: 21px; }
    .station-cover-flowers { width: 245px; top: auto; bottom: 13%; opacity: .95; }
    .station-cover-flowers-left { left: -137px; transform: rotate(3deg); }
    .station-cover-flowers-right { right: -137px; transform: scaleX(-1) rotate(3deg); }
    .station-guest-dedication { margin: 23px 0 22px; padding: 13px 0 0; }
    .station-guest-dedication p { font-size: 12px; }
    .station-guest-dedication strong { font-size: 25px; }
    .station-start { width: 230px; }
    .station-button { min-height: 48px; padding: 14px 21px; font-size: 12px; gap: 24px; }
    .station-cover-hint { font-size: 12px; }
    .station-scroll-cue { bottom: 83px; font-size: 12px; gap: 12px; }
    .station-stop:not(.station-cover) { padding: 35svh 16px 95px; }
    .station-panel { border-radius: 130px 130px 3px 3px / 35px 35px 3px 3px; }
    .station-panel::before { inset: 8px; border-radius: 130px 130px 0 0 / 30px 30px 0 0; }
    .station-panel-content, body[data-mode='still'] .station-panel-content { padding: 50px 28px 40px; }
    .station-eyebrow { font-size: 12px; letter-spacing: .14em; margin-bottom: 16px; }
    .station-panel h2 { font-size: 49px; margin-bottom: 21px; }
    .station-introduction { font-size: 13px; line-height: 1.9; margin-bottom: 25px; }
    .station-panel-flowers-top { width: 160px; left: -65px; top: -70px; }
    .station-panel-flowers-bottom { width: 170px; right: -63px; bottom: -65px; }
    .station-couple-grid { grid-template-columns: 1fr; gap: 27px; margin-top: 25px; }
    .station-person { max-width: 260px; width: 100%; margin: 0 auto; }
    .station-portrait { max-width: 220px; margin: 0 auto 17px; }
    .station-person h3 { font-size: 37px; }
    .station-person-name { font-size: 13px; }
    .station-person-parents { font-size: 12px; }
    .station-quote p { font-size: 13px; line-height: 1.95; }
    .station-text-link { font-size: 12px; }
    .station-ticket { margin: 27px 0 32px; padding: 18px 17px; }
    .station-ticket-top { font-size: 12px; letter-spacing: .07em; padding-bottom: 12px; margin-bottom: 15px; gap: 6px; }
    .station-ticket-top > span:nth-child(2) { font-size: 12px; }
    .station-ticket > strong { font-size: 26px; }
    .station-ticket-route { font-size: 12px; gap: 8px; }
    .station-ticket-bottom { flex-direction: column; gap: 3px; font-size: 12px; }
    .station-event { grid-template-columns: 26px 1fr; gap: 8px; }
    .station-event-number { font-size: 23px; }
    .station-event h3 { font-size: 34px; }
    .station-event-date, .station-event h4 { font-size: 13px; }
    .station-event-address { font-size: 13px; }
    .station-event-actions { gap: 12px; }
    .station-small-button { font-size: 12px; padding: 10px 13px; }
    .station-story { padding-left: 22px; margin-left: 4px; padding-bottom: 30px; }
    .station-story h3 { font-size: 32px; }
    .station-story-body { font-size: 13px; line-height: 1.9; }
    .station-photo-grid { gap: 9px; }
    .station-photo { padding: 4px; }
    .station-photo-enlarge { width: 26px; height: 26px; bottom: 10px; right: 10px; }
    .station-form h3, .station-notes-wrap h3, .station-gifts h3 { font-size: 32px; }
    .station-field label { font-size: 12px; }
    .station-field input, .station-field select, .station-field textarea { font-size: 16px; }
    .station-field-help { font-size: 12px; }
    .station-demo-note { font-size: 13px; padding: 14px; }
    .station-note p { font-size: 13px; }
    .station-note cite { font-size: 24px; }
    .station-note small { font-size: 12px; }
    .station-gifts > p:not(.station-eyebrow), .station-closing-message { font-size: 13px; }
    .station-gift { padding: 19px; }
    .station-closing { margin-top: 22px; }
    .station-closing-names { font-size: 39px; }
    .station-navigation { padding: 5px 7px; gap: 0; bottom: max(13px, env(safe-area-inset-bottom)); width: min(390px, calc(100% - 20px)); justify-content: space-between; }
    .station-navigation > .station-room-progress { min-width: 0; flex: 1; padding: 8px 4px; font-size: 12px; min-height: 44px; }
    /* Eight shortcuts share a phone-width bar: the gate walk-through is only a passage. */
    .station-navigation > [data-station-room-progress='entrance'] { display: none; }
    .station-nav-number { display: none; }
    .station-navigation i { display: block; position: absolute; bottom: 5px; width: 2px; height: 2px; border-radius: 50%; background: currentColor; opacity: .6; }
    .station-status { right: 16px; bottom: max(78px, calc(env(safe-area-inset-bottom) + 65px)); font-size: 12px; }
    .station-photo-dialog { width: calc(100vw - 20px); max-height: calc(100svh - 20px); }
    .station-photo-dialog-inner { padding: 48px 12px 20px; }
    body[data-mode='still'] .station-cover { min-height: max(720px, 95svh); }
    body[data-mode='still'] .station-stop:not(.station-cover) { padding: 25px 16px; }
    body[data-mode='still'] .station-lounge { padding-bottom: 105px; }
}

@media (max-width: 359px) {
    .station-brand-name { display: none; }
    .station-header { padding-right: 10px; padding-left: 10px; }
    .station-mode-switch button { font-size: 12px; padding: 9px 8px; }
    .station-cover-copy { padding-left: 22px; padding-right: 22px; }
    .station-cover h1 { font-size: 52px; }
    .station-panel-content, body[data-mode='still'] .station-panel-content { padding-left: 23px; padding-right: 23px; }
    .station-panel h2 { font-size: 44px; }
    .station-navigation > .station-room-progress { font-size: 12px; padding: 8px 3px; }
}

.station-form-status[data-state='error'], .station-notes-status[data-state='error'] { color: #914a35; }
.station-form-status[data-state='success'], .station-notes-status[data-state='success'] { color: #315c40; }
.station-form-status[data-state='pending'], .station-notes-status[data-state='pending'] { color: #746443; }
.station-status[data-state='error'] { background: #79432df5; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .station-photo:hover img, .station-button:hover:not(:disabled) { transform: none; }
}

@media print {
    .station-header, .station-navigation, .station-stage, .station-scroll-cue, .station-status, .station-progress, .station-start { display: none !important; }
    .station-stop, body[data-mode='still'] .station-stop { display: block !important; min-height: 0 !important; padding: 20px !important; break-inside: avoid; }
    .station-panel, body[data-mode='still'] .station-panel { width: 100%; box-shadow: none; }
    .station-panel-content { padding: 35px; }
    .station-cover-copy { margin: auto; }
    body { background: white; }
}

/* Live invitation content belongs to stationary plaques inside the 3D world. */
.station-spatial { position: fixed; inset: 0; z-index: 5; overflow: clip; pointer-events: none; }
.station-spatial-renderer { position: absolute; inset: 0; pointer-events: none; }
.station-spatial-toolbar, .station-look-hint { display: none; }
/* The loading screen covers the station while it is built; plaques and canvas wait under it. */
body[data-mode='animated'][data-booting='true'] .station-journey { visibility: hidden; }
body[data-mode='animated'][data-booting='true'] .station-spatial-plaque { visibility: hidden; }
body[data-mode='animated'] .station-stage { z-index: 2; }
body[data-mode='animated']:not([data-scene-ready='true']) #station-canvas { opacity: 0; }
}
/* The canvas lies over the plaques and opens windows onto them; clicks pass through to the plaques. */
body[data-mode='animated'][data-spatial='true'] .station-stage { pointer-events: none; }
body[data-mode='animated'][data-spatial='true'] { touch-action: pinch-zoom; }
body[data-mode='animated'][data-spatial='true'] .station-stage canvas { pointer-events: none; }
body[data-mode='animated'][data-spatial='true'] { cursor: grab; }
body[data-mode='animated'][data-spatial='true'] :is(.station-spatial-plaque, .station-header, .station-navigation, .station-status) { cursor: auto; }
body[data-mode='animated'][data-spatial='true'] .station-vignette { background: linear-gradient(#f4eee959, transparent 14%, transparent 84%, #173d3529); }
body[data-mode='animated'][data-spatial='true'] .station-journey { pointer-events: none; }
body[data-mode='animated'][data-spatial='true'] .station-stop { display: block; height: var(--station-scroll-span, 180svh); min-height: var(--station-scroll-span, 180svh); padding: 0; pointer-events: none; }
body[data-mode='animated'][data-spatial='true'] .station-cover { isolation: auto; overflow: visible; }
body[data-mode='animated'][data-spatial='true'] .station-cover::before,
body[data-mode='animated'][data-spatial='true'] .station-cover-frame,
body[data-mode='animated'][data-spatial='true'] .station-cover-flowers,
body[data-mode='animated'][data-spatial='true'] .station-scroll-cue { display: none; }

.station-spatial-plaque { position: absolute; margin: 0; padding: 9px; overflow: visible; background: #4d3525; border: 3px solid #b69b62; border-radius: 3px; box-shadow: inset 0 0 0 2px #3c271b, 0 1px 10px #172b2329; pointer-events: auto; backface-visibility: hidden; }
.station-spatial-plaque::before { position: absolute; content: ''; inset: 5px; border: 1px solid #c9b47c; background: url('../img/plaque-filigree.svg') center/100% 100% no-repeat; pointer-events: none; z-index: 2; }
body[data-mode='animated'] #station-spatial .station-world-content { position: relative; margin: 0; width: 100%; min-height: 100%; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
body[data-mode='animated'] #station-spatial .station-panel::before { display: none; }
body[data-mode='animated'] #station-spatial .station-panel-content { padding: 27px 29px 30px; }
body[data-mode='animated'] #station-spatial .station-panel-flowers-top { width: 155px; top: -70px; left: -73px; opacity: .32; }
body[data-mode='animated'] #station-spatial .station-panel-flowers-bottom { width: 155px; bottom: -65px; right: -73px; opacity: .34; }
body[data-mode='animated'] #station-spatial .station-eyebrow { font-size: 12px; margin-bottom: 14px; letter-spacing: .12em; }
body[data-mode='animated'] #station-spatial .station-panel h2 { font-size: 44px; line-height: 1; margin-bottom: 18px; }
body[data-mode='animated'] #station-spatial .station-introduction,
body[data-mode='animated'] #station-spatial .station-story-body,
body[data-mode='animated'] #station-spatial .station-event-date,
body[data-mode='animated'] #station-spatial .station-event-address,
body[data-mode='animated'] #station-spatial .station-quote p,
body[data-mode='animated'] #station-spatial .station-closing-message,
body[data-mode='animated'] #station-spatial .station-note p,
body[data-mode='animated'] #station-spatial .station-gifts > p:not(.station-eyebrow) { font-size: 14px; line-height: 1.8; }
body[data-mode='animated'] #station-spatial .station-person-name,
body[data-mode='animated'] #station-spatial .station-person-parents,
body[data-mode='animated'] #station-spatial .station-field label,
body[data-mode='animated'] #station-spatial .station-field-help,
body[data-mode='animated'] #station-spatial .station-gift > p,
body[data-mode='animated'] #station-spatial .station-event h4 { font-size: 12px; line-height: 1.75; }
body[data-mode='animated'] #station-spatial .station-button,
body[data-mode='animated'] #station-spatial .station-small-button,
body[data-mode='animated'] #station-spatial .station-text-link { font-size: 13px; min-height: 48px; }
body[data-mode='animated'] #station-spatial .station-button { padding: 13px 18px; }
body[data-mode='animated'] #station-spatial .station-field input,
body[data-mode='animated'] #station-spatial .station-field select,
body[data-mode='animated'] #station-spatial .station-field textarea { font-size: 16px; }
body[data-mode='animated'] #station-spatial .station-demo-note { font-size: 12px; line-height: 1.8; padding: 13px; }
body[data-mode='animated'] #station-spatial .station-ticket { padding: 18px 20px; margin: 23px 0 28px; }
body[data-mode='animated'] #station-spatial .station-ticket-top { font-size: 12px; letter-spacing: .06em; }
body[data-mode='animated'] #station-spatial .station-ticket > p,
body[data-mode='animated'] #station-spatial .station-ticket-route { font-size: 15px; letter-spacing: .05em; }
body[data-mode='animated'] #station-spatial .station-ticket-bottom { font-size: 12px; }
body[data-mode='animated'] #station-spatial .station-ticket > strong { font-size: 30px; }
body[data-mode='animated'] #station-spatial .station-couple-grid { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
body[data-mode='animated'] #station-spatial .station-portrait { max-width: 185px; margin: 0 auto 14px; }
body[data-mode='animated'] #station-spatial .station-person h3 { font-size: 33px; }
body[data-mode='animated'] #station-spatial .station-photo-grid { margin-top: 22px; gap: 10px; }
body[data-mode='animated'] #station-spatial .station-story h3 { font-size: 31px; }
body[data-mode='animated'] #station-spatial .station-event { padding-bottom: 23px; }
body[data-mode='animated'] #station-spatial .station-note cite { font-size: 25px; }
body[data-mode='animated'] #station-spatial .station-note small { font-size: 12px; }

.station-spatial-plaque-cover { background: #153c32; border-color: #b59b62; }
body[data-mode='animated'] #station-spatial .station-cover-copy { padding: 24px 26px; text-align: center; color: #f4ead1; }
body[data-mode='animated'] #station-spatial .station-cover h1,
body[data-mode='animated'] #station-spatial .station-cover-copy h1 { font-size: 48px; line-height: .98; margin: 0; text-shadow: none; }
body[data-mode='animated'] #station-spatial .station-cover-copy > .station-eyebrow,
body[data-mode='animated'] #station-spatial .station-cover-flourish,
body[data-mode='animated'] #station-spatial .station-cover-subtitle,
body[data-mode='animated'] #station-spatial .station-cover-hint { display: none; }
body[data-mode='animated'] #station-spatial .station-cover-date { margin-top: 13px; font-size: 12px; letter-spacing: .08em; }
body[data-mode='animated'] #station-spatial .station-guest-dedication { margin: 17px 0; padding: 12px 0 0; border-color: #b39a6366; }
body[data-mode='animated'] #station-spatial .station-guest-dedication p { margin-bottom: 3px; font-size: 12px; color: #d1d3b8; }
body[data-mode='animated'] #station-spatial .station-guest-dedication strong { font-size: 29px; color: #f9edce; }
body[data-mode='animated'] #station-spatial .station-start { width: 270px; background: #f1e5c8; color: #173d35; border-color: #b89e62; }
body[data-mode='animated'] #station-spatial .station-start:hover { background: #fff5dc; }

body[data-mode='animated'][data-spatial='true'] .station-spatial-toolbar { position: fixed; z-index: 21; right: max(24px, env(safe-area-inset-right)); bottom: 86px; display: flex; align-items: center; padding: 3px; gap: 8px; border: 1px solid #b49a6359; border-radius: 30px; background: #fbf7eef0; box-shadow: 0 4px 20px #173d3520; }
.station-spatial-toolbar button { width: 44px; height: 44px; padding: 0; border: 1px solid #b19c6b54; border-radius: 50%; background: transparent; color: #173d35; font-size: 23px; line-height: 1; }
.station-spatial-toolbar button:hover { background: #e8dfca; }
.station-spatial-toolbar > span { min-width: 100px; max-width: 145px; text-align: center; font-size: 12px; line-height: 1.4; }
body[data-mode='animated'][data-spatial='true'] .station-look-hint { position: fixed; z-index: 20; left: 24px; bottom: 104px; display: block; margin: 0; max-width: 270px; padding: 7px 12px; border-radius: 3px; background: #173d35dc; color: #f2e8cf; font-size: 12px; line-height: 1.7; pointer-events: none; }
body[data-opened='false'] .station-look-hint { display: none !important; }
body[data-mode='still'] .station-spatial { display: none; }

@media (max-width: 820px) {
    body[data-mode='animated'] #station-spatial .station-panel-content { padding: 21px 19px 28px; }
    body[data-mode='animated'] #station-spatial .station-panel h2 { font-size: 36px; }
    body[data-mode='animated'] #station-spatial .station-couple-grid { grid-template-columns: 1fr; gap: 21px; }
    body[data-mode='animated'] #station-spatial .station-portrait { max-width: 160px; }
    body[data-mode='animated'] #station-spatial .station-person h3 { font-size: 32px; }
    body[data-mode='animated'] #station-spatial .station-introduction,
    body[data-mode='animated'] #station-spatial .station-story-body,
    body[data-mode='animated'] #station-spatial .station-event-date,
    body[data-mode='animated'] #station-spatial .station-event-address,
    body[data-mode='animated'] #station-spatial .station-quote p,
    body[data-mode='animated'] #station-spatial .station-note p,
    body[data-mode='animated'] #station-spatial .station-closing-message { font-size: 14px; }
    body[data-mode='animated'] #station-spatial .station-panel-flowers-top { opacity: .22; }
    body[data-mode='animated'] #station-spatial .station-ticket { padding: 15px; }
    body[data-mode='animated'] #station-spatial .station-ticket-top { flex-wrap: wrap; justify-content: center; text-align: center; font-size: 12px; }
    body[data-mode='animated'] #station-spatial .station-ticket-bottom { display: block; }
    body[data-mode='animated'] #station-spatial .station-ticket-bottom > span { display: block; margin-top: 3px; }
    body[data-mode='animated'] #station-spatial .station-cover-copy { padding: 14px; }
    body[data-mode='animated'] #station-spatial .station-cover-copy h1 { font-size: 38px; }
    body[data-mode='animated'] #station-spatial .station-cover-date { margin-top: 8px; font-size: 12px; letter-spacing: .04em; }
    body[data-mode='animated'] #station-spatial .station-guest-dedication { margin: 10px 0 12px; padding-top: 8px; }
    body[data-mode='animated'] #station-spatial .station-guest-dedication p { font-size: 12px; }
    body[data-mode='animated'] #station-spatial .station-guest-dedication strong { font-size: 24px; }
    body[data-mode='animated'] #station-spatial .station-start { width: 100%; font-size: 12px; }
    body[data-mode='animated'][data-spatial='true'] .station-spatial-toolbar { right: 14px; bottom: 77px; gap: 3px; }
    .station-spatial-toolbar > span { min-width: 68px; max-width: 91px; font-size: 12px; }
    body[data-mode='animated'][data-spatial='true'] .station-look-hint { left: 14px; right: 14px; bottom: 133px; max-width: none; padding: 5px 8px; font-size: 12px; text-align: center; background: #173d35ba; }
}
@media (min-width: 541px) and (max-width: 820px) {
    body[data-mode='animated'] #station-spatial .station-couple-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 540px) {
    body[data-mode='animated'] #station-spatial .station-cover-copy { padding: 10px 12px; }
    body[data-mode='animated'] #station-spatial .station-cover-date { margin-top: 6px; }
    body[data-mode='animated'] #station-spatial .station-guest-dedication { margin: 8px 0 10px; padding-top: 6px; }
    body[data-mode='animated'] #station-spatial .station-guest-dedication p { display: none; }
    body[data-mode='animated'] #station-spatial .station-guest-dedication strong { line-height: 1.25; }
}
@media print { .station-spatial, .station-spatial-toolbar, .station-look-hint { display: none !important; } }


/* One subject per banner; every continuation is a page, never a scrolling card. */
body[data-mode='animated'] .station-spatial-plaque { padding: 9px; border-width: 2px; border-color: #b59b63; border-radius: 2px; background: #405a45; box-shadow: inset 0 0 0 2px #273f32, 0 3px 18px #173d351c; }
.station-banner-archive { display: none !important; }
.station-banner-shell { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 20px 23px 12px; gap: 10px; overflow: clip; background: linear-gradient(135deg, #fffaf0, #f3ecd9); box-shadow: inset 0 0 0 1px #b59b633b, inset 0 0 0 5px #fffaf04d; }
.station-banner-shell::before, .station-banner-shell::after { position: absolute; content: ''; pointer-events: none; z-index: 0; width: 176px; height: 188px; background: url('../img/floral-bouquet.svg') center/contain no-repeat; opacity: .24; }
.station-banner-shell::before { top: -66px; left: -76px; transform: rotate(34deg); }
.station-banner-shell::after { bottom: -75px; right: -81px; transform: rotate(211deg); }
.station-banner-shell > :not(.station-banner-archive) { position: relative; z-index: 1; }
.station-banner-heading { flex: 0 0 auto; text-align: center; padding-bottom: 9px; border-bottom: 1px solid #b59b6345; }
.station-banner-eyebrow { margin: 0 0 4px; font-size: 12px; line-height: 1.35; letter-spacing: .12em; color: #746847; }
.station-banner-heading h2 { margin: 0; font-size: 32px; line-height: 1.05; color: #315543; }
.station-banner-pages { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; overflow: visible; }
.station-banner-page { position: absolute; inset: 0; width: 100%; height: 100%; }
body[data-mode='animated'] .station-banner-page:not([hidden]) { animation: station-banner-reveal .4s ease both; }
body[data-mode='animated'][data-spatial='true'] .station-banner-page { animation: none; }
@keyframes station-banner-reveal { from { opacity: .2; } to { opacity: 1; } }
.station-banner-page-content { width: 100%; height: 100%; min-height: 0; overflow: visible; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.station-banner-page-content > * { max-width: 100%; }
.station-banner-pagination { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; border-top: 1px solid #b59b6345; padding-top: 6px; }
.station-banner-pagination span { font-size: 12px; line-height: 1.3; font-variant-numeric: tabular-nums; letter-spacing: .08em; color: #766946; }
.station-banner-pagination .station-banner-scroll-cue { max-width: 75%; text-align: right; font-size: 12px; letter-spacing: .02em; text-wrap: balance; }
body[data-mode='animated'] #station-spatial .station-banner-page h3 { font-size: 36px; line-height: 1.1; margin: 0 0 10px; }
body[data-mode='animated'] #station-spatial .station-banner-page p { font-size: 14px; line-height: 1.6; margin-bottom: 10px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-eyebrow { font-size: 12px; line-height: 1.5; letter-spacing: .1em; margin-bottom: 8px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-introduction { max-width: none; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-person { width: 100%; text-align: center; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-portrait { width: 185px; height: 232px; max-height: 45vh; aspect-ratio: auto; margin: 0 auto 14px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-person-name { font-size: 14px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-person-parents { font-size: 13px; line-height: 1.65; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-event { display: block; margin: 0; padding: 0; border: 0; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-event-number { display: none; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-event h4 { font-size: 14px; line-height: 1.6; margin: 0 0 7px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-event-actions { flex-wrap: wrap; gap: 10px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-button,
body[data-mode='animated'] #station-spatial .station-banner-page .station-small-button,
body[data-mode='animated'] #station-spatial .station-banner-page .station-text-link { min-height: 48px; font-size: 13px; line-height: 1.4; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-button { padding: 11px 16px; gap: 15px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-small-button { padding: 10px 14px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-story { margin: 0; padding: 0; border: 0; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-story-mark { display: none; }
/* On a plaque the photograph takes the room its story's words leave, and is shown whole. */
body[data-mode='animated'] #station-spatial .station-banner-page-content > .station-story { display: flex; flex-direction: column; height: 100%; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-story-photo { flex: 1 1 0; min-height: clamp(130px, 30cqh, 200px); container-type: size; display: grid; place-items: center; margin: 12px 0; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-story-image { max-width: calc(100cqw - 12px); max-height: calc(100cqh - 12px); }
body[data-mode='animated'] #station-spatial .station-banner-page .station-story-print .station-photo-enlarge { width: 32px; height: 32px; right: 9px; bottom: 9px; font-size: 17px; }
/* Where a page is about as wide as it is tall (station-displays.js decides once the photograph's shape
   is known), a portrait photograph stands as tall as the page beside its story's words. */
body[data-mode='animated'] #station-spatial .station-banner-page-content > .station-story-portrait:has(> .station-story-photo) {
    display: grid; column-gap: clamp(12px, 4.5cqw, 22px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
}
body[data-mode='animated'] #station-spatial .station-banner-page-content > .station-story-portrait:has(> .station-story-photo) > * { grid-column: 2; }
body[data-mode='animated'] #station-spatial .station-banner-page-content > .station-story-portrait:has(> .station-story-photo) > .station-eyebrow { grid-row: 2; }
body[data-mode='animated'] #station-spatial .station-banner-page-content > .station-story-portrait:has(> .station-story-photo) > h3 { grid-row: 3; }
body[data-mode='animated'] #station-spatial .station-banner-page-content > .station-story-portrait:has(> .station-story-photo) > .station-story-body { grid-row: 4; }
body[data-mode='animated'] #station-spatial .station-banner-page-content > .station-story-portrait:has(> .station-story-photo) > .station-story-photo { grid-column: 1; grid-row: 1 / -1; min-height: 0; margin: 0; }
}
body[data-mode='animated'] #station-spatial .station-banner-page .station-story-body { font-size: 14px; line-height: 1.65; margin: 0; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-photo { display: block; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; padding: 7px; border-color: #b9a579; background: #ece7d7; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-photo img { width: 100%; height: 100%; object-fit: contain; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-photo-enlarge { width: 44px; height: 44px; right: 13px; bottom: 13px; }
/* A stationary pointer can cross a travelling plaque. Keep its content still
   while retaining the buttons' colour and shadow feedback. */
body[data-mode='animated'][data-spatial='true'] #station-spatial .station-button:hover:not(:disabled),
body[data-mode='animated'][data-spatial='true'] #station-spatial .station-photo:hover img { transform: none; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-quote { margin: 0; padding: 14px 0; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-quote p { font-size: 14px; line-height: 1.8; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket { margin: 0; padding: 17px 15px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket-top { font-size: 12px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket > strong { font-size: 32px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket-bottom { font-size: 12px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; border: 0; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-form h3 { margin: 0 0 4px; font-size: 36px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-field { min-width: 0; margin: 0; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-field label { font-size: 12px; line-height: 1.45; margin: 0 0 4px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-field input,
body[data-mode='animated'] #station-spatial .station-banner-page .station-field select,
body[data-mode='animated'] #station-spatial .station-banner-page .station-field textarea { min-height: 48px; height: 48px; padding: 9px 11px; font-size: 16px; line-height: 1.5; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-field textarea { min-height: 96px; height: 96px; max-height: 96px; resize: none; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-field-help { margin: 5px 0 0; font-size: 12px; line-height: 1.45; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-form-status { margin: 0; font-size: 12px; line-height: 1.45; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-note { padding: 0; margin: 0; border: 0; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-note cite { font-size: 29px; line-height: 1.2; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-note small { font-size: 12px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-gift { padding: 15px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-gift strong { font-size: 22px; line-height: 1.6; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-closing { margin: 0; padding: 0; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-closing > img { max-height: 100px; margin: 0 auto 10px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-closing-names { font-family: var(--station-serif); font-size: 38px; line-height: 1.1; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-demo-note { padding: 12px; margin: 0; font-size: 14px; line-height: 1.65; }
body[data-mode='animated'] .station-spatial-plaque-cover { border-color: #b89d64; background: #173d35; }
.station-spatial-plaque-cover .station-banner-shell { padding: 14px 18px; background: radial-gradient(ellipse at top, #315741, #163c32); color: #f6edda; }
.station-spatial-plaque-cover .station-banner-shell::before, .station-spatial-plaque-cover .station-banner-shell::after { opacity: .13; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-copy { width: 100%; padding: 0; color: #f6edda; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-walk-cue { margin: 8px 0 0; font-size: 12px; line-height: 1.3; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-walk-cue > span { display: inline-block; margin: 0 0 0 7px; font-size: 17px; vertical-align: middle; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-copy h1 { font-size: 46px; line-height: 1.02; margin: 0; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-copy > .station-eyebrow,
body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-flourish,
body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-subtitle,
body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-hint { display: none; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-date { font-size: 12px; line-height: 1.3; margin: 10px 0 0; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-guest-dedication { padding-top: 8px; margin: 10px 0; border-color: #b49c6555; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-guest-dedication p { display: none; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-guest-dedication strong { color: #f7ecd1; font-size: 26px; line-height: 1.2; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-start { width: 100%; background: #f4e8c9; color: #173d35; }
.station-spatial-plaque-cover .station-banner-pagination { border-color: #c2a76d66; }
.station-spatial-plaque-cover .station-banner-pagination span { color: #d7c7a0; }

@media (max-width: 820px) {
    .station-banner-shell { padding: 12px 13px 8px; gap: 8px; }
    .station-banner-heading { padding-bottom: 7px; }
    .station-banner-heading h2 { font-size: 27px; }
    body[data-mode='animated'] #station-spatial .station-banner-page h3 { font-size: 30px; margin-bottom: 8px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-portrait { width: 112px; height: 140px; margin-bottom: 10px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-person-parents { font-size: 13px; line-height: 1.6; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-story-photo { margin: 8px 0; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form { gap: 7px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form h3 { font-size: 29px; margin: 0 0 3px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='rsvp'] { grid-template-columns: minmax(0, 1fr) 80px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='rsvp'] h3,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='rsvp'] .station-field:first-of-type,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='rsvp'] .station-form-status,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='rsvp'] > button { grid-column: 1 / -1; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field textarea { height: 64px; min-height: 64px; max-height: 64px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field-help { font-size: 12px; line-height: 1.4; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-event-actions { flex-direction: column; align-items: stretch; gap: 6px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket { padding: 12px 10px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-copy h1 { font-size: 37px; }
    .station-spatial-plaque-cover .station-banner-shell { padding: 9px 11px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-guest-dedication strong { font-size: 23px; }
}
@media (max-width: 340px), (max-height: 620px) {
    body[data-mode='animated'] .station-spatial-plaque { padding: 7px; }
    .station-banner-shell { padding: 9px 10px 6px; gap: 6px; }
    .station-banner-heading { padding-bottom: 6px; }
    .station-banner-heading h2 { font-size: 24px; }
    .station-banner-eyebrow { font-size: 12px; }
    .station-banner-pagination { min-height: 49px; padding-top: 5px; }
    body[data-mode='animated'] #station-spatial .station-banner-page h3 { font-size: 28px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-portrait { width: 80px; height: 100px; margin-bottom: 8px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-person-parents { font-size: 13px; line-height: 1.55; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-button,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-small-button,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-text-link { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form { gap: 6px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form h3 { font-size: 27px; margin: 0; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='rsvp'] { grid-template-columns: minmax(0, 1fr) 68px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field label { font-size: 12px; line-height: 1.35; margin-bottom: 3px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field input,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field select,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field textarea { height: 44px; min-height: 44px; padding: 8px 9px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field textarea { height: 52px; min-height: 52px; max-height: 52px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field-help { font-size: 12px; line-height: 1.35; margin-top: 3px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form-status { font-size: 12px; line-height: 1.35; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-copy h1 { font-size: 32px; }
    .station-spatial-plaque-cover .station-banner-shell { padding: 6px 9px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-date { margin-top: 6px; font-size: 12px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-guest-dedication { margin: 7px 0; padding-top: 5px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-guest-dedication strong { font-size: 21px; }
}
body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='rsvp'] h3,
body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='rsvp'] .station-field:first-of-type,
body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='rsvp'] .station-form-status,
body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='rsvp'] > button { grid-column: 1 / -1; }
.station-spatial-plaque-cover .station-banner-page-content { display: flex; align-items: center; justify-content: center; }
.station-spatial-plaque-cover .station-banner-page-content > .station-cover-copy { flex: 0 0 auto; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket::before,
body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket::after { display: none; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket-top { flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
.station-banner-page-content[data-compact='true'] { display: flex; flex-direction: column; justify-content: center; }
.station-banner-page-content[data-compact='true'] > * { flex: 0 0 auto; width: 100%; }
@media (max-width: 340px), (max-height: 620px) {
    .station-banner-pagination { min-height: 51px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-button,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-small-button,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-text-link { min-height: 48px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form { gap: 5px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field input,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field select { min-height: 48px; height: 48px; }
}
@media (max-width: 340px), (max-height: 620px) {
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form { gap: 2px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form h3 { font-size: 25px; line-height: 1.05; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field label { line-height: 1.2; margin-bottom: 2px; }
}
@media (max-width: 820px) {
    body[data-mode='animated'][data-spatial='true'] .station-spatial-toolbar,
    body[data-mode='animated'][data-spatial='true'] .station-look-hint { display: none; }
}

body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket > span { display: block; margin: 7px 0; font-size: 14px; line-height: 1.6; }
@media (orientation: landscape) and (max-height: 440px) {
    body[data-mode='animated'][data-spatial='true'] .station-header { padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)); background: none; }
    body[data-mode='animated'][data-spatial='true'] .station-header-caption,
    body[data-mode='animated'][data-spatial='true'] .station-spatial-toolbar,
    body[data-mode='animated'][data-spatial='true'] .station-look-hint { display: none; }
    body[data-mode='animated'] .station-spatial-plaque { padding: 5px; }
    .station-banner-shell { padding: 5px; gap: 3px; }
    .station-banner-heading { padding-bottom: 3px; }
    .station-banner-eyebrow { display: none; }
    .station-banner-heading h2 { font-size: 21px; line-height: 1; }
    .station-banner-pagination { min-height: 54px; padding-top: 4px; }
    body[data-mode='animated'] #station-spatial .station-banner-page h3 { font-size: 25px; line-height: 1.05; margin-bottom: 6px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-button,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-small-button,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-text-link { min-height: 52px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form { gap: 2px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form h3 { font-size: 21px; line-height: 1; margin: 0; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='rsvp'] { grid-template-columns: minmax(0, 1fr) 76px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field label { font-size: 12px; line-height: 1; margin: 0; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field input,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field select,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-field textarea { height: 52px; min-height: 52px; max-height: 52px; padding: 8px 9px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form-status { font-size: 12px; line-height: 1.2; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='rsvp']:has(.station-form-status:not(:empty)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='rsvp']:has(.station-form-status:not(:empty)) .station-field:first-of-type { grid-column: auto; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='wishes']:has(.station-form-status:not(:empty)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='wishes']:has(.station-form-status:not(:empty)) h3,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='wishes']:has(.station-form-status:not(:empty)) .station-form-status,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-form[data-station-form='wishes']:has(.station-form-status:not(:empty)) > button { grid-column: 1 / -1; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-person > .station-portrait { width: 70px; height: 88px; margin-bottom: 4px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-copy h1 { font-size: 38px; }
    .station-spatial-plaque-cover .station-banner-shell { padding: 7px 10px; }
}

/* A dedicated clock plaque waits at the entrance, before the couple's lobby. */
.station-countdown { text-align: center; }
.station-countdown > .station-eyebrow { margin-bottom: 10px; }
.station-countdown-seal { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--station-gold); font-size: 21px; line-height: 1; margin-bottom: 18px; }
.station-countdown-seal > span { width: 42px; border-top: 1px solid #a68b5370; }
.station-countdown-clock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 15px 0; margin: 25px 0 18px; border-block: 1px solid #a68b5360; }
.station-countdown-unit { position: relative; min-width: 0; padding: 6px 2px; }
.station-countdown-unit + .station-countdown-unit::before { content: ''; position: absolute; left: -4px; top: 24%; height: 52%; border-left: 1px solid #a68b533d; }
.station-countdown-unit > strong { display: block; font-family: var(--station-serif); font-size: clamp(30px, 4.5vw, 52px); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; line-height: 1; letter-spacing: -.025em; }
.station-countdown-unit > span { display: block; margin-top: 7px; color: var(--station-muted); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.station-countdown-date { margin: 0 0 12px; font-size: 12px; letter-spacing: .05em; }
.station-countdown-status { max-width: 340px; margin: 0 auto; color: var(--station-muted); font-size: 12px; line-height: 1.7; }
body[data-mode='animated'] #station-spatial .station-countdown-clock { margin: 14px 0 12px; padding: 8px 0; gap: 4px; }
body[data-mode='animated'] #station-spatial .station-countdown-unit > strong { font-size: 37px; }
body[data-mode='animated'] #station-spatial .station-countdown-unit > span { font-size: 12px; letter-spacing: .06em; }
body[data-mode='animated'] #station-spatial .station-countdown-seal { margin-bottom: 10px; font-size: 17px; }
body[data-mode='animated'] #station-spatial .station-countdown-date { margin-bottom: 8px; font-size: 12px; }
body[data-mode='animated'] #station-spatial .station-countdown-status { font-size: 12px; line-height: 1.5; }
@media (max-width: 340px), (max-height: 620px) {
    body[data-mode='animated'] #station-spatial .station-countdown-clock { margin: 8px 0; padding: 5px 0; }
    body[data-mode='animated'] #station-spatial .station-countdown-unit > strong { font-size: 29px; }
    body[data-mode='animated'] #station-spatial .station-countdown-unit > span { margin-top: 4px; font-size: 12px; letter-spacing: .02em; }
    body[data-mode='animated'] #station-spatial .station-countdown-seal { margin-bottom: 7px; }
    body[data-mode='animated'] #station-spatial .station-countdown-date { font-size: 12px; margin-bottom: 4px; }
    body[data-mode='animated'] #station-spatial .station-countdown-status { font-size: 12px; line-height: 1.4; }
}
/* A phone's quarter column holds "SECONDS" whole (it broke as "SECOND / S" at 390px in English). */
@media (max-width: 540px) {
    body[data-mode='animated'] #station-spatial .station-countdown-unit > span { letter-spacing: .02em; }
}
@media (max-width: 389px) {
    body[data-mode='animated'] #station-spatial .station-countdown-unit { padding-inline: 0; }
    body[data-mode='animated'] #station-spatial .station-countdown-unit > span { letter-spacing: 0; }
}
/* Once the day has come the zero clock gives way to its status message. */
.station-countdown[data-station-countdown-state='arrived'] .station-countdown-clock { display: none; }

/* A ticket, event or story is tightened before it is ever split across two
   plaques, so a date or its buttons never stand alone. */
body[data-mode='animated'] #station-spatial .station-banner-page-content[data-dense='true'] { line-height: 1.45; }
body[data-mode='animated'] #station-spatial .station-banner-page-content[data-dense='true'] p { line-height: 1.45; margin-bottom: 6px; }
body[data-mode='animated'] #station-spatial .station-banner-page-content[data-dense='true'] h3 { font-size: 30px; margin-bottom: 6px; }
body[data-mode='animated'] #station-spatial .station-banner-page-content[data-dense='true'] .station-event h4 { margin-bottom: 4px; }
body[data-mode='animated'] #station-spatial .station-banner-page-content[data-dense='true'] .station-event-actions { gap: 8px; margin-top: 6px; }
body[data-mode='animated'] #station-spatial .station-banner-page-content[data-dense='true'] :is(.station-button, .station-small-button, .station-text-link) { min-height: 44px; padding-block: 8px; }
/* A tightened story gives its photograph up first, so a standard story stays on one page; only a long one goes on to a page of its own words. */
body[data-mode='animated'] #station-spatial .station-banner-page-content[data-dense='true'] .station-story-photo { min-height: clamp(72px, 16cqh, 140px); margin: 8px 0; }
body[data-mode='animated'] #station-spatial .station-banner-page-content[data-dense='true'] .station-story-body { line-height: 1.5; }
body[data-mode='animated'] #station-spatial .station-banner-page-content[data-dense='true'] .station-ticket { padding: 12px; }
body[data-mode='animated'] #station-spatial .station-banner-page-content[data-dense='true'] .station-ticket > strong { font-size: 26px; }
body[data-mode='animated'] #station-spatial .station-banner-page-content[data-dense='true'] .station-portrait { width: 160px; height: 200px; margin-bottom: 10px; }

/* Plaque labels follow the 12px floor. */
.station-banner-eyebrow { font-size: 12px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket-top { font-size: 12px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-eyebrow { font-size: 12px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-walk-cue { font-size: 12px; }

/* Phone plaques are 300px wide: slimmer heading and footer chrome leave about
   a fifth more room for the content itself. */
.station-spatial-plaque[data-mobile='true'] .station-banner-shell { padding: 14px 18px 8px; gap: 8px; }
.station-spatial-plaque[data-mobile='true'] .station-banner-heading { padding-bottom: 6px; }
.station-spatial-plaque[data-mobile='true'] .station-banner-heading h2 { font-size: 24px; }
.station-spatial-plaque[data-mobile='true'] .station-banner-pagination { min-height: 44px; padding-top: 4px; }

/* At 12px the brand name no longer fits beside the mode switch on the
   narrowest phones; the monogram carries the identity there. */
@media (max-width: 400px) {
    .station-brand-name { display: none; }
}


/* One board per chapter: its pages turn in place like a departure-board flap. */
body[data-mode='animated'] .station-banner-pages { perspective: 1100px; }
body[data-mode='animated'][data-spatial='true'] .station-banner-page[data-flip] { backface-visibility: hidden; will-change: transform, opacity; }
body[data-mode='animated'][data-spatial='true'] .station-banner-page[data-flip='in-next'] { transform-origin: 50% 0; animation: station-flap-in .52s cubic-bezier(.3, .7, .3, 1) both; }
body[data-mode='animated'][data-spatial='true'] .station-banner-page[data-flip='out-next'] { transform-origin: 50% 100%; animation: station-flap-out .3s cubic-bezier(.5, 0, .9, .5) both; }
body[data-mode='animated'][data-spatial='true'] .station-banner-page[data-flip='in-back'] { transform-origin: 50% 100%; animation: station-flap-in-back .52s cubic-bezier(.3, .7, .3, 1) both; }
body[data-mode='animated'][data-spatial='true'] .station-banner-page[data-flip='out-back'] { transform-origin: 50% 0; animation: station-flap-out-back .3s cubic-bezier(.5, 0, .9, .5) both; }
@keyframes station-flap-in { from { opacity: 0; transform: rotateX(-74deg); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes station-flap-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: rotateX(38deg); } }
@keyframes station-flap-in-back { from { opacity: 0; transform: rotateX(74deg); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes station-flap-out-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: rotateX(-38deg); } }

/* The first page of a board carries the chapter's opening line under its headline. */
.station-banner-lede { margin: 6px auto 0; max-width: 34em; font-size: 13px; line-height: 1.55; color: #5f6a5d; text-wrap: balance; }
.station-banner-lede[hidden] { display: none; }

/* The page counter and the cue sit clear of the corner filigree, on one line each. */
.station-banner-pagination { padding-inline: 20px; }
.station-banner-pagination span { white-space: nowrap; }
.station-banner-pagination .station-banner-scroll-cue { overflow: hidden; text-overflow: ellipsis; }
.station-spatial-plaque[data-mobile='true'] .station-banner-pagination { padding-inline: 18px; }

/* The quotation mark sits on the rule above the verse instead of over its first line. */
body[data-mode='animated'] #station-spatial .station-banner-page .station-quote { padding-top: 28px; }

/* "Muat ulang ucapan" is a text link, not the browser's grey button. */
.station-reload-notes { appearance: none; background: transparent; border: 0; border-bottom: 1px solid #a68b535e; border-radius: 0; padding: 6px 0; color: inherit; font: inherit; }

/* The cover's own cue already says how to begin; no second floating hint. */
body[data-mode='animated'][data-spatial='true'] .station-look-hint { display: none; }

/* Photographs share a page, up to four on large boards and two on phones, each print whole at its own shape:
   station-displays.js (arrangePhotos) picks the rows that show them largest and places them in --photo-x/y/w/h. */
body[data-mode='animated'] #station-spatial .station-banner-page[data-station-banner-kind='photo'] .station-banner-page-content { position: relative; display: block; }
body[data-mode='animated'] #station-spatial .station-banner-page[data-station-banner-kind='photo'] .station-photo { position: absolute; left: var(--photo-x, 0); top: var(--photo-y, 0); width: var(--photo-w, 50%); height: var(--photo-h, 50%); min-height: 0; aspect-ratio: auto; padding: 5px; }
body[data-mode='animated'] #station-spatial .station-banner-page[data-station-banner-kind='photo'] .station-photo img { object-fit: cover; }
body[data-mode='animated'] #station-spatial .station-banner-page[data-station-banner-kind='photo'] .station-photo-enlarge { width: 34px; height: 34px; right: 9px; bottom: 9px; font-size: 16px; }

/* Phone chapter bar: each pill as wide as its label, so the active one is never clipped. */
@media (max-width: 540px) {
    .station-navigation { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
    .station-navigation::-webkit-scrollbar { display: none; }
    .station-navigation > .station-room-progress { flex: 1 0 auto; padding: 8px 7px; }
}
/* At 360px the seven labels fit whole with a little less air, instead of clipping "Hadiah" at the edge. */
@media (max-width: 389px) {
    .station-navigation > .station-room-progress { padding-inline: 5px; }
}

/* The cover says what it is and greets its guest before naming them. */
body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-copy > .station-eyebrow { display: block; margin: 0 0 8px; color: #d9cfae; font-size: 12px; letter-spacing: .24em; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-guest-dedication p { display: block; margin: 0 0 2px; font-size: 12px; color: #d6d8be; }
body[data-mode='animated'] #station-spatial .station-banner-page .is-long-names h1 { font-size: 38px; }
body[data-mode='animated'] #station-spatial .station-banner-page .is-long-guest .station-guest-dedication strong { font-size: 21px; line-height: 1.25; }
body[data-mode='animated'] #station-spatial .station-banner-page .is-very-long-guest .station-guest-dedication strong { font-size: 18px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket.is-long-guest > strong { font-size: 24px; line-height: 1.25; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket.is-very-long-guest > strong { font-size: 20px; }
@media (max-width: 820px) {
    body[data-mode='animated'] #station-spatial .station-banner-page .is-long-names h1 { font-size: 30px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .is-long-guest .station-guest-dedication strong { font-size: 18px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .is-very-long-guest .station-guest-dedication strong { font-size: 16px; }
}

/* Plaque type follows the plaque's own size, not the window's: a short laptop and a phone both
   read a board about 340px wide, and neither should meet desktop-sized photos and headings on it. */
body[data-mode='animated'] .station-spatial-plaque { container: plaque / size; }
@container plaque (max-width: 420px) {
    body[data-mode='animated'] .station-spatial-plaque .station-banner-shell { padding: 14px 16px 8px; gap: 8px; }
    body[data-mode='animated'] .station-spatial-plaque .station-banner-heading { padding-bottom: 6px; }
    body[data-mode='animated'] .station-spatial-plaque .station-banner-eyebrow { margin-bottom: 2px; letter-spacing: .1em; }
    body[data-mode='animated'] .station-spatial-plaque .station-banner-heading h2 { font-size: 25px; line-height: 1.08; }
    body[data-mode='animated'] .station-spatial-plaque .station-banner-lede { margin-top: 4px; font-size: 12px; line-height: 1.5; }
    body[data-mode='animated'] .station-spatial-plaque .station-banner-pagination { min-height: 40px; padding-top: 4px; }
    body[data-mode='animated'] #station-spatial .station-banner-page h3 { font-size: 29px; margin-bottom: 6px; }
    body[data-mode='animated'] #station-spatial .station-banner-page p { font-size: 13px; line-height: 1.55; margin-bottom: 8px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-portrait { width: clamp(80px, 24cqh, 124px); height: clamp(100px, 30cqh, 155px); margin: 0 auto 10px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-person-name { margin-bottom: 4px; font-size: 13px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-person-parents { font-size: 12px; line-height: 1.55; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-story-photo { min-height: clamp(110px, 26cqh, 170px); margin: 8px 0; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-story-body { font-size: 13px; line-height: 1.55; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-event h4 { margin-bottom: 4px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-event-actions { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 6px; }
    body[data-mode='animated'] #station-spatial .station-banner-page :is(.station-button, .station-small-button, .station-text-link) { min-height: 44px; padding-block: 8px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-quote p { font-size: 15px; line-height: 1.6; }
    body[data-mode='animated'] #station-spatial .station-countdown-unit > strong { font-size: 32px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-copy h1 { font-size: 37px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-guest-dedication strong { font-size: 23px; }
    /* The ticket keeps the guest's name on two lines and its stub details at reading size. */
    body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket { padding: 12px 10px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket > strong { font-size: 24px; line-height: 1.22; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket.is-long-guest > strong { font-size: 20px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket.is-very-long-guest > strong { font-size: 17px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket > p,
    body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket-route { font-size: 13px; letter-spacing: .04em; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket-route { margin: 12px 0 10px; padding-bottom: 12px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket-top { padding-bottom: 8px; margin-bottom: 10px; }
    /* A gift card keeps its number on the full width and puts the copy button beside the holder,
       so two accounts share a phone page without breaking a 15-digit number. */
    body[data-mode='animated'] #station-spatial .station-banner-page .station-gift { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'bank bank' 'number number' 'holder copy'; column-gap: 10px; align-items: center; padding: 12px 14px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-gift .station-eyebrow { grid-area: bank; margin-bottom: 3px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-gift strong { grid-area: number; margin-bottom: 2px; font-size: 20px; line-height: 1.35; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-gift > p { grid-area: holder; margin: 0; font-size: 12px; line-height: 1.5; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-gift > button { grid-area: copy; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-gift-grid { gap: 10px; margin-top: 12px; }
}
@container plaque (max-height: 430px) {
    body[data-mode='animated'] .station-spatial-plaque .station-banner-shell { padding: 10px 12px 6px; gap: 6px; }
    body[data-mode='animated'] .station-spatial-plaque .station-banner-heading { padding-bottom: 4px; }
    body[data-mode='animated'] .station-spatial-plaque .station-banner-heading h2 { font-size: 22px; line-height: 1.05; }
    body[data-mode='animated'] .station-spatial-plaque .station-banner-pagination { min-height: 36px; padding-top: 3px; }
    body[data-mode='animated'] #station-spatial .station-banner-page h3 { font-size: 26px; margin-bottom: 4px; }
    body[data-mode='animated'] #station-spatial .station-banner-page p { margin-bottom: 6px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-eyebrow { margin-bottom: 4px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket-route { margin: 8px 0 6px; padding-bottom: 8px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-ticket-top { padding-bottom: 6px; margin-bottom: 6px; }
}

/* A story moved out of its timeline keeps no list bullet; a page focused after a jump shows the theme's ring. */
body[data-mode='animated'] #station-spatial .station-banner-page .station-story { list-style: none; }
.station-banner-page:focus { outline: none; }
.station-banner-page:focus-visible { outline: 2px solid #c29c56b3; outline-offset: 7px; border-radius: 2px; }

/* The corner filigree stretches with the plaque, so the footer keeps clear of it in plaque units. */
body[data-mode='animated'] .station-spatial-plaque .station-banner-pagination { padding-inline: max(14px, calc(13.5cqw - 10px)); }
/* The lounge opens with one sentence, set as the chapter's greeting rather than body copy. */
body[data-mode='animated'] #station-spatial .station-banner-page[data-station-banner-kind='introduction'] .station-introduction { margin: 0 auto 18px; max-width: 22em; text-align: center; font-family: var(--station-serif); font-size: 22px; line-height: 1.4; color: #315543; text-wrap: balance; }
@container plaque (max-width: 420px) {
    body[data-mode='animated'] #station-spatial .station-banner-page[data-station-banner-kind='introduction'] .station-introduction { font-size: 19px; margin-bottom: 14px; }
}
/* The livestream link says who it is for, so it never stands alone as a bare button. */
.station-livestream { margin-top: 26px; }
.station-livestream > p { margin: 0 0 12px; color: var(--station-muted); font-size: 13px; line-height: 1.7; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-livestream { margin-top: 4px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-livestream > p { margin-bottom: 10px; font-size: 13px; line-height: 1.55; }
/* The couple's health reminders close the gate, set like a station notice: an opening line, then
   numbered reminders ruled off like a timetable. On a board the heading carries the title. */
.station-health { margin-top: 38px; padding-top: 32px; border-top: 1px solid #c9b99280; }
.station-health-intro .station-eyebrow { margin-bottom: 8px; }
.station-health-intro h3 { margin: 0 0 12px; font-size: 29px; line-height: 1.15; }
.station-health-seal { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--station-gold); font-size: 15px; line-height: 1; }
.station-health-seal > span { width: 30px; border-top: 1px solid #a68b5370; }
.station-health-description { margin: 0 0 20px; color: var(--station-muted); font-size: 13px; line-height: 1.8; }
.station-health-list { margin: 0; padding: 0; list-style: none; }
.station-health-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 12px 0; border-top: 1px dashed #b29b678c; }
.station-health-list > li:last-child > .station-health-item { border-bottom: 1px dashed #b29b678c; }
.station-health-number { font-family: var(--station-serif); font-size: 23px; font-weight: 500; font-variant-numeric: lining-nums; line-height: 1; color: var(--station-gold); }
.station-health-item > p { grid-column: 2; margin: 0; font-size: 13px; line-height: 1.75; overflow-wrap: break-word; }
@media (max-width: 540px) {
    .station-health { margin-top: 30px; padding-top: 28px; }
    .station-health-intro h3 { font-size: 32px; }
    .station-health-item { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; }
    .station-health-number { font-size: 21px; }
}
body[data-mode='animated'] #station-spatial .station-banner-page .station-health-intro { margin: 0 0 14px; text-align: center; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-health-intro h3 { display: none; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-health-intro .station-eyebrow { margin-bottom: 8px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-health-seal { justify-content: center; margin-bottom: 10px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-health-description { margin: 0 auto; max-width: 22em; font-family: var(--station-serif); font-size: 20px; line-height: 1.4; color: #315543; text-wrap: balance; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-health-item { padding: 11px 0; }
body[data-mode='animated'] #station-spatial .station-banner-page-content > .station-health-item:last-child { border-bottom: 1px dashed #b29b678c; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-health-number { font-size: 24px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-health-item > p { margin: 0; font-size: 14px; line-height: 1.6; }
/* A phone's board keeps the opening line and the theme's three reminders on one page. */
@container plaque (max-width: 420px) {
    body[data-mode='animated'] #station-spatial .station-banner-page .station-health-intro { margin-bottom: 10px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-health-intro .station-eyebrow { margin-bottom: 6px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-health-seal { display: none; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-health-description { font-size: 17px; line-height: 1.38; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-health-item { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; padding: 8px 0; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-health-number { font-size: 21px; }
}
/* A phone held sideways gets a board only 300px tall: suggest turning it upright, beside the board, then fade. */
.station-rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 440px) and (pointer: coarse) {
    body[data-mode='animated'][data-spatial='true'] .station-rotate-hint { position: fixed; z-index: 30; top: 50%; left: max(16px, env(safe-area-inset-left)); display: block; max-width: calc(50vw - 150px); margin: 0; padding: 9px 14px; border: 1px solid #c2a76d80; border-radius: 14px; background: #173d35e6; color: #f6edda; font-size: 12px; line-height: 1.45; letter-spacing: .02em; pointer-events: none; transform: translateY(-50%); animation: station-rotate-hint 7s ease 1s both; }
}
@keyframes station-rotate-hint { 0% { opacity: 0; } 8%, 80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* An empty guest book invites the first wish instead of showing a bare status line. */
body[data-mode='animated'] #station-spatial .station-banner-page[data-station-banner-kind='notes-status'] .station-notes-status { margin: 0 auto 14px; max-width: 18em; text-align: center; font-family: var(--station-serif); font-size: 21px; font-style: italic; line-height: 1.4; color: #315543; }
/* The journey ends with a few petals drifting once across the closing board. */
.station-petals { display: none; }
body[data-mode='animated'] #station-spatial .station-banner-page[data-station-banner-kind='closing'] .station-closing { position: static; }
body[data-mode='animated'] #station-spatial .station-banner-page[data-station-banner-kind='closing'] .station-petals { position: absolute; inset: 0; z-index: 2; display: block; overflow: hidden; pointer-events: none; }
.station-petals i { position: absolute; top: -20px; left: var(--x); width: var(--size, 15px); height: calc(var(--size, 15px) * .72); border-radius: 70% 30% 70% 30%; background: radial-gradient(circle at 30% 30%, #fff7f2, #e9bdb2 75%); box-shadow: 0 1px 2px #8d5a4d26; opacity: 0; }
.station-petals i:nth-child(1) { --x: 8%; --drift: 34px; --delay: .1s; }
.station-petals i:nth-child(2) { --x: 21%; --drift: -22px; --delay: .9s; }
.station-petals i:nth-child(3) { --x: 33%; --drift: 28px; --delay: .4s; }
.station-petals i:nth-child(4) { --x: 46%; --drift: -30px; --delay: 1.5s; }
.station-petals i:nth-child(5) { --x: 57%; --drift: 24px; --delay: .2s; }
.station-petals i:nth-child(6) { --x: 68%; --drift: -18px; --delay: 1.1s; }
.station-petals i:nth-child(7) { --x: 79%; --drift: 30px; --delay: .6s; }
.station-petals i:nth-child(8) { --x: 89%; --drift: -26px; --delay: 1.8s; }
.station-petals i:nth-child(9) { --x: 38%; --drift: 20px; --delay: 2.3s; }
.station-petals i:nth-child(10) { --x: 14%; --drift: 26px; --delay: 2.8s; --size: 12px; }
.station-petals i:nth-child(11) { --x: 63%; --drift: -24px; --delay: 3.2s; --size: 17px; }
.station-petals i:nth-child(12) { --x: 84%; --drift: 18px; --delay: 2.6s; --size: 13px; }
.station-petals i:nth-child(3n) { --size: 18px; }
.station-banner-page-content[data-finale='true'] .station-petals i { animation: station-petal 6s cubic-bezier(.3, .1, .6, 1) var(--delay) both; }
.station-banner-page-content[data-finale='true'] .station-closing-names { animation: station-finale-names 1.6s ease .3s both; }
@keyframes station-petal { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 10% { opacity: .95; } 85% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--drift), 115cqh) rotate(420deg); } }
@keyframes station-finale-names { from { opacity: 0; transform: translateY(8px); letter-spacing: .02em; } to { opacity: 1; transform: none; letter-spacing: 0; } }
@media (prefers-reduced-motion: reduce) { .station-banner-page-content[data-finale='true'] :is(.station-petals i, .station-closing-names) { animation: none; } }

/* The cover's cue is a real button: a tap begins the walk and lets the music start with it. */
body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-walk-cue { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 8px 0 0; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-walk-cue:hover { background: #f6edda14; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-cover-walk-cue > span { display: inline-block; margin: 0; font-size: 17px; }

/* The page sits recessed in its frame: the frame's lip shades its top edge, a little less below. */
body[data-mode='animated'] .station-spatial-plaque .station-banner-shell { box-shadow: inset 0 0 0 1px #b59b633b, inset 0 0 0 5px #fffaf04d, inset 0 14px 22px -16px #2b241647, inset 0 -12px 20px -16px #2b24162b, inset 12px 0 20px -18px #2b241626, inset -12px 0 20px -18px #2b241626; }

/* In the animated edition the page's scroll is the camera's rail, not something to drag. A classic
   scrollbar would narrow the canvas but not the boards' layer and pull distant boards off their frames. */
html:has(> body[data-mode='animated']) { scrollbar-width: none; }
html:has(> body[data-mode='animated'])::-webkit-scrollbar { display: none; }

/* Loading: the invitation appears whole, once the station, its boards and their first photographs
   are ready. The clock's hand turns on the compositor, so it keeps moving while the station is built. */
.station-loading { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 32px max(20px, env(safe-area-inset-right, 0px)) 32px max(20px, env(safe-area-inset-left, 0px)); text-align: center; color: #f6edda; background: radial-gradient(ellipse at 50% 42%, #285744 0%, #173d35 58%, #0f2b24 100%); opacity: 0; visibility: hidden; transition: opacity .6s ease .2s, visibility 0s linear .8s; }
body[data-mode='animated'] .station-loading { display: flex; }
/* Leaving, the lettering goes first and the green after it, so the names never lie doubled over
   the welcome board's own lettering. */
.station-loading > * { transition: opacity .25s ease; }
body[data-mode='animated']:not([data-loading='true']) .station-loading > * { opacity: 0; }
body[data-mode='animated'][data-loading='true'] .station-loading,
body[data-mode='animated'][data-loading='true'] .station-loading > * { opacity: 1; visibility: visible; transition: none; }
.station-loading-clock { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 26px; border: 1px solid #c9ad7499; border-radius: 50%; box-shadow: inset 0 0 0 5px #173d35, inset 0 0 0 6px #c9ad7440; }
.station-loading-clock i { position: absolute; left: calc(50% - .5px); top: 12px; width: 1px; height: 36px; background: linear-gradient(#e2c98f, #c9ad7400); transform-origin: 50% 36px; animation: station-loading-hand 3.2s linear infinite; }
@keyframes station-loading-hand { to { transform: rotate(360deg); } }
.station-loading-clock span { position: relative; font: italic 500 34px/1 var(--station-serif); color: #f3e6c6; }
.station-loading-clock em { position: relative; top: 8px; margin-left: -4px; font-size: 26px; }
.station-loading-eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: .32em; color: #d7c7a0; }
.station-loading-names { margin: 0; max-width: 18em; font: 500 clamp(32px, 7vw, 46px)/1.08 var(--station-serif); overflow-wrap: anywhere; text-wrap: balance; }
.station-loading-message { margin: 18px 0 0; min-height: 1.5em; font-size: 13px; line-height: 1.5; color: #cfd3bb; }
.station-loading-track { position: relative; width: 168px; height: 1px; margin: 22px 0 10px; background: #ffffff26; overflow: hidden; }
.station-loading-track span { position: absolute; inset: 0; background: #d8bd84; transform: scaleX(var(--loading, .04)); transform-origin: left; transition: transform .5s ease; }
.station-loading-percent { font-size: 12px; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: #b9bfa7; }
.station-loading-still { min-height: 44px; margin-top: 26px; padding: 10px 14px; border: 0; background: none; color: #d7c7a0; font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.station-loading-still:focus-visible { outline: 2px solid #d8bd84; outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .station-loading-clock i { animation: none; } }

/* Names wrap only between words: a name shrinks to its line instead (the template estimates --station-name-em). */
.station-cover h1 { container-type: inline-size; }
.station-cover h1 > span { display: block; font-size: min(1em, max(1rem, 92cqi / var(--station-name-em, 3))); overflow-wrap: break-word; }

/* "Turut mengundang" beside the couple and the vendors before the closing. */
.station-participants { margin: 28px 0 8px; padding: 18px 0 14px; border-top: 1px solid #bba27350; text-align: center; }
.station-participants ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.station-participants li { display: flex; flex-direction: column; line-height: 1.4; }
.station-participants strong { font-family: var(--station-serif); font-size: 18px; font-weight: 500; color: var(--station-ink); }
.station-participants span { font-size: 12px; color: var(--station-muted); }
.station-participants a { color: inherit; text-decoration: underline; text-decoration-color: var(--station-gold); text-underline-offset: 4px; }

/* The carriage's films: each hangs as a poster under a play mark and plays in a dialog outside the boards. */
.station-films { margin: 30px 0 24px; }
.station-films-title { margin: 0 0 16px; font-size: 29px; line-height: 1.15; }
.station-film-list { display: grid; gap: 16px; }
.station-film { display: flex; flex-direction: column; gap: 9px; width: 100%; margin: 0; padding: 5px 5px 10px; border: 1px solid #cbbfa2; border-radius: 0; background: #eee7d7; color: inherit; font: inherit; line-height: 1.5; text-align: start; text-decoration: none; cursor: pointer; }
.station-film-screen { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(ellipse at 50% 38%, #315741, #163c32 72%); }
.station-film-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.station-film-screen::after { position: absolute; inset: 0; content: ''; background: radial-gradient(ellipse at center, #0f2b2440, #0f2b2400 62%), linear-gradient(#0f2b2400 58%, #0f2b2452); pointer-events: none; }
.station-film-play { position: relative; z-index: 1; display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid #e8d6a6; border-radius: 50%; background: #173d35d1; box-shadow: 0 8px 24px #0b231c66, inset 0 0 0 4px #173d3566; transition: transform .25s ease, background .25s ease; }
.station-film-play::before { content: ''; margin-left: 6px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #f6edda; }
.station-film-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 7px; }
.station-film-caption strong { min-width: 0; font-family: var(--station-serif); font-size: 21px; font-weight: 500; font-variant-numeric: lining-nums; line-height: 1.2; overflow-wrap: anywhere; }
.station-film-caption > span { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6c6547; }
@media (hover: hover) { .station-film:hover .station-film-play { background: #173d35; transform: scale(1.05); } }
body[data-mode='animated'][data-spatial='true'] #station-spatial .station-film:hover .station-film-play { transform: none; }
/* On a board the poster keeps its 16:9 screen and grows to the page: one to a page on a phone, two on a large board. */
body[data-mode='animated'] #station-spatial .station-banner-page[data-station-banner-kind='film'] .station-banner-page-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; container-type: size; }
body[data-mode='animated'] #station-spatial .station-banner-page[data-station-banner-kind='film'] .station-film { flex: 0 0 auto; width: min(100%, calc((100cqh - 54px) * 16 / 9 + 10px)); }
body[data-mode='animated'] #station-spatial .station-banner-page[data-station-banner-kind='film'] [data-films='2'] > .station-film { width: min(100%, calc(((100cqh - 12px) / 2 - 54px) * 16 / 9 + 10px)); }

/* The film dialog: the player is made when it opens and removed when it closes. */
.station-film-dialog { width: min(1040px, calc(100vw - 32px)); }
.station-film-dialog-inner { padding: 46px 24px 20px; text-align: center; }
.station-film-dialog .station-eyebrow { margin: 0 0 4px; }
.station-film-dialog h2 { margin: 0 52px 16px; font-size: clamp(24px, 3vw, 32px); font-variant-numeric: lining-nums; line-height: 1.15; overflow-wrap: anywhere; }
.station-film-stage { position: relative; width: 100%; max-width: calc((100svh - 200px) * 16 / 9); margin: 0 auto; aspect-ratio: 16 / 9; background: #0f2b24; }
.station-film-player { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #0f2b24; }
video.station-film-player { object-fit: contain; }
.station-film-elsewhere { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 6px; font-size: 13px; text-decoration: underline; text-decoration-color: var(--station-gold); text-underline-offset: 4px; }
@media (max-width: 540px) {
    .station-film-dialog { width: calc(100vw - 20px); }
    .station-film-dialog-inner { padding: 48px 12px 16px; }
    .station-film-dialog h2 { margin-inline: 40px; font-size: 24px; }
}
/* A phone held sideways gives the film nearly the whole height. */
@media (orientation: landscape) and (max-height: 500px) {
    .station-film-dialog { max-height: calc(100svh - 16px); }
    .station-film-dialog-inner { padding: 8px 56px 6px; }
    .station-film-dialog .station-eyebrow { display: none; }
    .station-film-dialog h2 { margin: 2px 0 6px; font-size: 20px; }
    .station-film-stage { max-width: calc((100svh - 96px) * 16 / 9); }
    .station-film-elsewhere { min-height: 44px; margin-top: 0; }
}

/* Kirim Kado: a card beside the gift accounts, with its own copy button. */
.station-gift-address { margin-top: 14px; padding: 22px; border: 1px solid #b8aa8569; background: #ebe5d455; }
.station-gift-address > .station-eyebrow { display: block; margin-bottom: 6px; }
.station-gift-address > strong { display: block; margin-bottom: 2px; font-family: var(--station-serif); font-size: 23px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.station-gift-address-phone { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; letter-spacing: .03em; text-decoration-color: var(--station-gold); text-underline-offset: 4px; }
.station-gift-address-text { margin: 0 0 8px; font-size: 14px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.station-gift-address-note { margin: 0 0 14px; padding-left: 10px; border-left: 2px solid #b29b6780; color: #59614f; font-size: 13px; line-height: 1.65; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-gift-address { margin: 0; padding: 15px; }
/* Under the board's own "Kirim kado" heading the card needs no label of its own. */
body[data-mode='animated'] #station-spatial .station-banner-page[data-station-banner-kind='gift-address'] .station-gift-address > .station-eyebrow { display: none; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-gift-address + .station-gift-address,
body[data-mode='animated'] #station-spatial .station-banner-page .station-gift-grid + .station-gift-address,
body[data-mode='animated'] #station-spatial .station-banner-page .station-gift + .station-gift-address { margin-top: 12px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-gift-address > strong { font-size: 24px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-gift-address-text { margin-bottom: 6px; font-size: 14px; line-height: 1.6; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-gift-address-note { margin-bottom: 10px; font-size: 13px; line-height: 1.5; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-gift-address + .station-gift,
body[data-mode='animated'] #station-spatial .station-banner-page .station-gift + .station-gift { margin-top: 10px; }
@container plaque (max-width: 420px) {
    body[data-mode='animated'] #station-spatial .station-banner-page .station-gift-address { padding: 12px 14px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-gift-address > strong { font-size: 21px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-gift-address-text { font-size: 13px; line-height: 1.55; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-gift-address-note { font-size: 12px; }
    body[data-mode='animated'] #station-spatial .station-banner-page .station-film-caption strong { font-size: 18px; }
}

/* On a board the family who also invite, and the vendors, have a page of their own under the board's heading. */
body[data-mode='animated'] #station-spatial .station-banner-page .station-participants { margin: 0; padding: 0; border: 0; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-participants > .station-eyebrow { display: none; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-participants ul { margin: 0; gap: 14px; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-participants strong { font-size: 22px; line-height: 1.25; }
body[data-mode='animated'] #station-spatial .station-banner-page .station-participants span { font-size: 13px; }

/* Events sharing a page are set apart by a hairline, so a second event never reads as part of the first. */
body[data-mode='animated'] #station-spatial .station-banner-page .station-event + .station-event { margin-top: 16px; padding-top: 14px; border-top: 1px solid #b59b6352; }

/* The wedding organizer that ordered the invitation, under the couple's names. */
.station-closing-credit { margin-top: .4rem; font-size: .78rem; letter-spacing: .06em; opacity: .72; }