@font-face { font-family: StarsSerif; src: url("../../../theme-v2/fonts/cormorant-garamond-latin-v21.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400 700; }
/* The leads, the countdown label and the closing line are italic: give them the real italic, not a slanted roman. */
@font-face { font-family: StarsSerif; src: url("../../../theme-v2/fonts/cormorant-garamond-italic-latin-v21.woff2") format("woff2"); font-display: swap; font-style: italic; font-weight: 400 700; }
@font-face { font-family: StarsSans; src: url("../../../theme-v2/fonts/inter-latin-v20.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 100 900; }

:root {
    --void: #03060f;
    --ink: #080f25;
    --ivory: #f8f3e8;
    --muted: #c4cada;
    --gold: #d9b980;
    --gold-bright: #f0d39d;
    --line: rgba(217, 185, 128, .5);
    --hairline: rgba(217, 185, 128, .24);
    --field: rgba(8, 15, 37, .86);
    --error: #ffb7a8;
    /* The couple's own fonts (custom font add-on) take over the page when set; see
       x-theme-custom-fonts. The scene keeps drawing its film cards in StarsSerif. */
    --serif: var(--invie-font-heading, StarsSerif), Georgia, "Times New Roman", serif;
    --sans: var(--invie-font-body, StarsSans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --edge: clamp(1.25rem, 6vw, 6.5rem);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--void); }
body { margin: 0; min-width: 280px; background: var(--void); color: var(--ivory); font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
button, a, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
/* Headings take focus only to announce a new station; the station itself is the cue. */
[tabindex="-1"]:focus { outline: none; }
.voyage-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Without the voyage (no JavaScript or no WebGL) the stations read as one page. */
.voyage { position: relative; min-height: 100svh; background: radial-gradient(ellipse at 62% 28%, #10204a 0%, #070e26 46%, var(--void) 100%); }
.voyage-canvas, .voyage-progress, .voyage-chapter, .voyage-line, .voyage-next, .voyage-start, .voyage-hint, .voyage-gallery-hit, .voyage-film-hit { display: none; }
.voyage-header { display: flex; align-items: center; gap: 1rem; padding: calc(1.1rem + var(--safe-top)) var(--edge) 0; }
.voyage-tools { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.voyage-station { position: relative; max-width: 54rem; padding: clamp(2.5rem, 9vh, 5.5rem) var(--edge); }
.voyage-memory-photo { display: block; width: 100%; max-height: 70vh; margin: 0 0 1.5rem; object-fit: contain; }

.voyage-mark { color: var(--ivory); font: 500 1.15rem/1 var(--serif); letter-spacing: .14em; text-decoration: none; }
.voyage-mark span { padding-inline: .12em; color: var(--gold); }
.voyage-tool { min-height: 44px; padding: 0 .6rem; border: 0; background: none; color: var(--muted); font: 500 .88rem/1 var(--sans); letter-spacing: .02em; }
.voyage-tool:hover { color: var(--ivory); }
.voyage-sound[aria-pressed="true"] { color: var(--gold-bright); }

.voyage-lead { margin: 0 0 .8rem; color: var(--gold-bright); font: italic 400 clamp(1.15rem, 1.7vw, 1.4rem)/1.3 var(--serif); }
.voyage-names { margin: 0; font: 400 clamp(3rem, 7vw, 6.2rem)/.96 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.voyage-amp { color: var(--gold); font-style: italic; }
.voyage-station-title { margin: 0 0 1rem; font: 400 clamp(2.1rem, 3.8vw, 3.4rem)/1.06 var(--serif); text-wrap: balance; }
.voyage-date { margin: 1.1rem 0 0; color: var(--gold-bright); font: 500 1rem/1.4 var(--sans); letter-spacing: .02em; }
.voyage-guest { margin: 1.5rem 0 0; color: var(--muted); }
.voyage-guest strong { display: block; color: var(--ivory); font: 500 1.15rem/1.4 var(--sans); }
.voyage-text { max-width: 60ch; margin: 1rem 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.75; white-space: pre-line; }
.voyage-meta { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.voyage-note { margin: .8rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.voyage-start { margin-top: 2rem; min-height: 48px; padding: .9rem 1.7rem; border: 1px solid var(--gold); border-radius: 999px; background: rgba(240, 211, 157, .1); color: var(--ivory); font: 500 1rem/1 var(--sans); letter-spacing: .02em; transition: background-color .2s ease; }
.voyage-start:hover { background: rgba(240, 211, 157, .2); }
.voyage-hint { margin: 1rem 0 0; color: var(--muted); font-size: .9rem; }

.voyage-partners { display: grid; gap: 1.25rem; }
.voyage-partner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; }
.voyage-partner-photo { width: 4.5rem; height: 4.5rem; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px rgba(240, 211, 157, .07), 0 0 32px rgba(240, 211, 157, .22); }
.voyage-partner-name { margin: 0; font: 400 clamp(1.7rem, 2.5vw, 2.5rem)/1.08 var(--serif); text-wrap: balance; overflow-wrap: anywhere; }
.voyage-partner-amp { margin: 0; color: var(--gold); font: italic 400 2.2rem/1 var(--serif); }

/* One countdown for the day, then a compact card per event (one to six). */
.voyage-countdown-hero { margin: .1rem 0 .9rem; padding: .75rem 1rem .8rem; border: 1px solid var(--hairline); border-radius: 14px; background: linear-gradient(120deg, rgba(240, 211, 157, .09), rgba(240, 211, 157, .03)); }
.voyage-countdown-label { margin: 0; color: var(--gold-bright); font: italic 400 1.12rem/1.3 var(--serif); }
.voyage-countdown-hero .voyage-countdown-units { margin-top: .35rem; }
.voyage-event-list { display: grid; gap: 0 1.5rem; }
.voyage-event-item { min-width: 0; padding: .8rem 0 .35rem; border-top: 1px solid var(--hairline); }
.voyage-event-item h3 { margin: 0; font: 400 clamp(1.4rem, 1.9vw, 1.8rem)/1.15 var(--serif); overflow-wrap: anywhere; }
.voyage-address { font-size: .88rem; overflow-wrap: anywhere; }
.voyage-event-actions { gap: 0 1.1rem; margin-top: .35rem; }
.voyage-when { display: flex; flex-wrap: wrap; column-gap: .8rem; margin: .4rem 0 0; color: var(--gold-bright); font-weight: 500; }
.voyage-when span { white-space: nowrap; color: var(--ivory); }
.voyage-place { margin: .35rem 0 0; color: var(--ivory); }
.voyage-countdown-units { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .8rem 0 0; color: var(--muted); font-size: .85rem; }
.voyage-countdown-units b { margin-right: .2rem; color: var(--ivory); font: 500 1.35rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
/* Narrow phones: tighter steps, so the four units stay on one line instead of leaving "36 detik" alone below. */
@media (max-width: 400px) { .voyage-countdown-units { column-gap: .75rem; } .voyage-countdown-units b { margin-right: .15rem; } }
.voyage-actions { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; margin-top: .8rem; }
.voyage-actions a, .voyage-actions button, .voyage .text-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--gold-bright); font: 500 .95rem/1.3 var(--sans); text-decoration: none; }
.voyage-actions a:hover, .voyage-actions button:hover, .voyage .text-button:hover { border-bottom-color: var(--gold-bright); }
.voyage-actions [hidden] { display: none !important; }

/* Forms keep their own surface so every field reads against the sky. */
.voyage-form { display: grid; gap: .25rem; margin-top: 1.2rem; }
.voyage-form label { display: grid; gap: .4rem; margin-top: .6rem; color: var(--ivory); font: 500 .95rem/1.4 var(--sans); }
.voyage-form :is(input, select, textarea) { width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1px solid rgba(217, 185, 128, .35); border-radius: 10px; background: var(--field); color: var(--ivory); font: 400 1rem/1.5 var(--sans); }
.voyage-form textarea { min-height: 6rem; resize: vertical; }
.voyage-form :is(input, select, textarea):focus { border-color: var(--gold-bright); outline: none; box-shadow: 0 0 0 3px rgba(240, 211, 157, .18); }
.voyage-form [aria-invalid="true"] { border-color: var(--error); }
.voyage-form [hidden] { display: none !important; }
.voyage-error { margin: .2rem 0 0; color: var(--error); font-size: .88rem; }
.voyage-status { min-height: 1.4em; margin: .6rem 0 0; color: var(--muted); font-size: .9rem; }
.voyage-status[data-state="error"] { color: var(--error); }
.voyage-status[data-state="success"] { color: var(--gold-bright); }
.voyage-submit { margin-top: .6rem; min-height: 48px; padding: .8rem 1.4rem; border: 1px solid var(--gold); border-radius: 999px; background: rgba(240, 211, 157, .12); color: var(--ivory); font: 500 1rem/1.2 var(--sans); }
.voyage-submit:not(:disabled):hover { background: rgba(240, 211, 157, .22); }

.voyage-guestbook { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); }
.voyage-guestbook h3 { margin: 0; color: var(--gold-bright); font: italic 400 1.35rem/1.3 var(--serif); }
.voyage-notes { margin: .6rem 0 0; padding: 0; list-style: none; }
.voyage-notes .guest-note { padding: .9rem 0; border-bottom: 1px solid rgba(217, 185, 128, .14); }
.guest-note-name { margin: 0; color: var(--ivory); font: 500 1.05rem/1.4 var(--sans); }
.guest-note-text { margin: .25rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.guest-note-time { margin: .3rem 0 0; color: rgba(196, 202, 218, .72); font-size: .8rem; }

/* Gifts and information reuse the theme's partials. */
.gift-list { display: grid; gap: .4rem; margin-top: 1rem; }
.gift-card { padding: 1rem 0; border-top: 1px solid var(--hairline); }
.gift-bank { margin: 0; color: var(--gold-bright); font: 400 1.5rem/1.2 var(--serif); }
.gift-number { margin: .4rem 0 0; color: var(--ivory); font: 500 1.3rem/1.3 var(--sans); letter-spacing: .05em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gift-recipient { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; }
.gift-recipient span { display: block; color: rgba(196, 202, 218, .75); font-size: .8rem; }
.copy-status { min-height: 1.2em; margin: .3rem 0 0; color: var(--muted); font-size: .85rem; }
.copy-status[data-state="success"] { color: var(--gold-bright); }
.copy-status[data-state="error"] { color: var(--error); }
.copy-manual { display: grid; gap: .3rem; margin-top: .5rem; color: var(--muted); font-size: .85rem; }
.copy-manual[hidden] { display: none; }
.copy-manual input { min-height: 44px; padding: .5rem .8rem; border: 1px solid rgba(217, 185, 128, .35); border-radius: 8px; background: var(--field); }
/* Kirim Kado: a mailing label under the accounts. */
.gift-address { margin-top: 1.2rem; }
.gift-address-title { margin: 0 0 .3rem; color: var(--gold-bright); font: 400 1.5rem/1.2 var(--serif); }
.gift-address-lead { margin: 0 0 .8rem; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.gift-label { position: relative; margin-top: .7rem; padding: 1rem 1.1rem .7rem; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(135deg, rgba(240, 211, 157, .08), rgba(8, 15, 37, .55)); box-shadow: inset 0 0 0 5px rgba(3, 6, 15, .55), inset 0 0 0 6px rgba(240, 211, 157, .22); }
.gift-label::after { content: "\2726"; position: absolute; top: .7rem; right: .9rem; width: 2.2rem; height: 2.2rem; border: 1px dashed rgba(240, 211, 157, .5); border-radius: 50%; color: var(--gold); font-size: 1rem; line-height: 2.1rem; text-align: center; transform: rotate(-12deg); }
.gift-label-tag { margin: 0; color: var(--gold); font: 600 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.gift-label-name { margin: .25rem 2.6rem 0 0; color: var(--ivory); font: 400 1.45rem/1.2 var(--serif); overflow-wrap: anywhere; }
.gift-label-phone { margin: .2rem 0 0; }
.gift-label-phone a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.gift-label-address { margin: .1rem 0 0; color: var(--ivory); font-style: normal; line-height: 1.6; overflow-wrap: anywhere; }
.gift-label-note { margin: .45rem 0 0; color: var(--muted); font-size: .9rem; font-style: italic; }
.copy-manual textarea { min-height: 5.5rem; padding: .5rem .8rem; border: 1px solid rgba(217, 185, 128, .35); border-radius: 8px; background: var(--field); resize: vertical; }
.extra-information { display: grid; gap: .2rem; }
.extra-section { padding: 1rem 0; border-top: 1px solid var(--hairline); }
.extra-section h3 { margin: 0 0 .5rem; color: var(--gold-bright); font: 400 1.45rem/1.25 var(--serif); }
.extra-section h4 { margin: .6rem 0 0; font: 500 1rem/1.4 var(--sans); }
.extra-section p, .extra-section li { color: var(--muted); font-size: .98rem; line-height: 1.65; }
.extra-section blockquote { margin: 0; }
.extra-section blockquote p { margin: 0; color: var(--ivory); font: italic 400 1.25rem/1.55 var(--serif); }
.extra-section cite { display: block; margin-top: .5rem; color: var(--gold); font: 500 .9rem/1.4 var(--sans); font-style: normal; }
.extra-section ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.dresscode-colors { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 0 !important; list-style: none; }
.dresscode-colors li { display: flex; align-items: center; gap: .45rem; }
.dresscode-swatch { width: 1.2rem; height: 1.2rem; border: 1px solid var(--line); border-radius: 50%; background: var(--dresscode-color); }
.extra-links, .vendor-list, .extra-people, .testimonial-list { display: grid; gap: .3rem; padding: 0 !important; list-style: none; }
.extra-people li, .vendor-list li { display: grid; gap: .1rem; }
.extra-people strong, .vendor-list strong { color: var(--ivory); font-weight: 500; }
.testimonial-photo, .vendor-logo { margin: 0; }
.testimonial-photo img, .vendor-logo img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; }
.response-note { color: var(--muted); font-size: .85rem; }
.stars-footer { margin-top: 2.2rem; color: rgba(196, 202, 218, .75); font-size: .85rem; }
.stars-footer a { color: var(--gold-bright); }

/* Films: without the scene each one is a poster button; in the voyage they play in a dialog. */
.voyage-film-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.voyage-film-poster { position: relative; display: grid; place-items: end start; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: radial-gradient(ellipse at 50% 40%, #1d2c63, #060b1d); color: var(--ivory); text-decoration: none; }
.voyage-film-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voyage-film-glyph, .voyage-film-hit::after { position: absolute; top: 50%; left: 50%; width: 3.6rem; height: 3.6rem; border: 1px solid rgba(248, 243, 232, .8); border-radius: 50%; background: rgba(3, 6, 15, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f8f3e8' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") 56% 50% / 1.5rem no-repeat; box-shadow: 0 0 24px rgba(240, 211, 157, .35); transform: translate(-50%, -50%); }
.voyage-film-glyph--out { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23f8f3e8' stroke-width='2' d='M8 16 16 8M10 8h6v6'/%3E%3C/svg%3E"); background-position: 50% 50%; }
/* The page edition lists every film, so it needs no stepping. */
.voyage[data-renderer="dom"] .voyage-video :is(.voyage-film-now, .voyage-actions) { display: none; }
.voyage-film-caption { position: relative; margin: .5rem; padding: .25rem .6rem; border-radius: 6px; background: rgba(3, 6, 15, .72); font: 500 .9rem/1.3 var(--sans); }
.voyage-film-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: calc(.8rem + var(--safe-top)) 1rem calc(1rem + var(--safe-bottom)); border: 0; background: rgba(2, 4, 10, .97); color: var(--ivory); }
.voyage-film-dialog::backdrop { background: rgba(2, 4, 10, .9); }
.voyage-film-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .6rem; }
.voyage-film-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100%, 72rem); margin: 0 auto; }
.voyage-film-head h2 { margin: 0; overflow: hidden; font: 400 clamp(1.4rem, 3vw, 2rem)/1.2 var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.voyage-film-close { flex: 0 0 auto; min-width: 6rem; min-height: 46px; padding: .6rem 1.2rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(3, 6, 15, .6); color: var(--ivory); }
.voyage-film-close:hover { border-color: var(--gold-bright); }
.voyage-film-frame { display: grid; place-items: center; min-height: 0; }
.voyage-film-player { display: block; width: min(100%, 72rem, calc((100dvh - 9rem) * 16 / 9)); aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 8px; background: #000; }
.voyage-film-status { min-height: 1.4em; margin: 0; color: var(--error); font-size: .9rem; text-align: center; }
.voyage-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.voyage-gallery-grid button { display: block; width: 100%; padding: 0; border: 1px solid var(--hairline); background: none; }
.voyage-gallery-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* The map and the photo viewer are the only modal surfaces. */
.voyage-map { width: min(26rem, calc(100vw - 2rem)); max-height: min(82vh, 46rem); padding: 0 0 1rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(6, 11, 28, .97); color: var(--ivory); overscroll-behavior: contain; touch-action: pan-y; }
.voyage-map::backdrop { background: rgba(2, 4, 10, .62); }
.voyage-map-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem .6rem 1.4rem; background: rgba(6, 11, 28, .97); }
.voyage-map-head h2 { margin: 0; font: 400 2rem/1.1 var(--serif); }
.voyage-map-list, .voyage-map-list ol { margin: 0; padding: 0 .8rem; list-style: none; }
.voyage-map-list ol { padding: 0 0 0 .9rem; }
.voyage-map-group > p { margin: .8rem 0 .2rem .6rem; color: var(--gold-bright); font: italic 400 1.15rem/1.3 var(--serif); }
.voyage-map-list button { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 46px; padding: .5rem .6rem; border: 0; border-radius: 10px; background: none; color: var(--ivory); font: 400 1rem/1.35 var(--sans); text-align: left; }
.voyage-map-list button:hover { background: rgba(240, 211, 157, .08); }
.voyage-map-list button span { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(240, 211, 157, .65); }
.voyage-viewer { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: calc(1rem + var(--safe-top)) 1rem calc(1rem + var(--safe-bottom)); border: 0; background: rgba(2, 4, 10, .97); color: var(--ivory); }
.voyage-viewer::backdrop { background: rgba(2, 4, 10, .9); }
.voyage-viewer[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .8rem; }
.voyage-viewer figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: .6rem; min-height: 0; margin: 0; touch-action: pan-y; }
.voyage-viewer img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.voyage-viewer img[data-failed] { display: none; }
.voyage-viewer figcaption { color: var(--muted); font-size: .9rem; }
.voyage-viewer-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.voyage-viewer-controls button { min-width: 7rem; min-height: 46px; padding: .6rem 1.2rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(3, 6, 15, .6); color: var(--ivory); }

/* The voyage: one station at a time over the sky. */
.voyage-js body { overflow: hidden; overscroll-behavior: none; }
.voyage-js .voyage:not([data-renderer="dom"]) { position: fixed; inset: 0; height: var(--voyage-height, 100svh); min-height: 0; overflow: hidden; touch-action: none; background: var(--void); }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-header { position: absolute; z-index: 5; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(1.1rem + var(--safe-top)) var(--edge) 0; pointer-events: none; text-shadow: 0 0 14px rgba(3, 6, 15, .95), 0 0 3px rgba(3, 6, 15, .8); }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-header > * { pointer-events: auto; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-mark { grid-column: 1; grid-row: 1; justify-self: start; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-progress { grid-column: 2; grid-row: 1; display: block; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-tools { grid-column: 3; grid-row: 1; justify-self: end; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-line { position: absolute; top: 0; left: 0; display: block; width: calc(var(--voyage-progress, 0) * 100%); height: 2px; background: linear-gradient(90deg, rgba(240, 211, 157, .2), var(--gold-bright)); transition: width .6s ease; pointer-events: none; }
/* A reading area that continues below fades out at its edge. */
.voyage-js .voyage:not([data-renderer="dom"]) [data-voyage-scroll][data-overflow]:not([data-at-end]) { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.voyage-progress ol { position: relative; display: flex; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.voyage-progress ol::before { content: ""; position: absolute; top: 50%; right: 16px; left: 16px; height: 1px; background: rgba(217, 185, 128, .28); }
.voyage-progress button { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; }
.voyage-progress button span { width: 7px; height: 7px; border-radius: 50%; background: #4b5677; transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.voyage-progress button[data-visited] span { background: var(--gold); }
.voyage-progress button[aria-current="step"] span { background: var(--ivory); transform: scale(1.45); box-shadow: 0 0 0 3px rgba(240, 211, 157, .25), 0 0 14px rgba(240, 211, 157, .7); }

.voyage-js .voyage:not([data-renderer="dom"]) .voyage-stations { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-station { position: absolute; inset: 0; max-width: none; padding: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-station[data-active] { opacity: 1; visibility: visible; transition: opacity .7s ease .1s, visibility 0s; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-station > * { pointer-events: auto; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-station::before { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.voyage-js .voyage:not([data-renderer="dom"]) :is(.voyage-memory-photo, .voyage-gallery-grid, .voyage-film-grid) { display: none; }
.voyage-js .voyage:not([data-renderer="dom"]) :is(.voyage-start, .voyage-hint) { display: block; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-copy { position: absolute; }
.voyage-js .voyage:not([data-renderer="dom"]) [data-voyage-scroll] { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(217, 185, 128, .5) transparent; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-gallery-hit { position: absolute; display: block; padding: 0; border: 0; border-radius: 6px; background: none; cursor: zoom-in; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-gallery-hit[hidden] { display: none; }
/* The film screen in the sky plays its film; a round play mark sits at its centre. */
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-film-hit { position: absolute; display: block; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-film-hit::after { content: ""; transition: transform .2s ease, box-shadow .2s ease; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-film-hit:hover::after { box-shadow: 0 0 34px rgba(240, 211, 157, .6); transform: translate(-50%, -50%) scale(1.06); }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-film-hit[hidden] { display: none; }
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-next { position: absolute; z-index: 4; left: 50%; bottom: calc(1.4rem + var(--safe-bottom)); display: block; transform: translateX(-50%); }
.voyage-next button { min-width: 8.5rem; min-height: 46px; padding: .75rem 1.6rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(3, 6, 15, .55); color: var(--ivory); font: 500 .95rem/1 var(--sans); letter-spacing: .02em; transition: opacity .3s ease, border-color .2s ease; }
.voyage-next button:hover { border-color: var(--gold-bright); }
.voyage-next[hidden] { display: none !important; }
.voyage[data-flying="true"] .voyage-next button { opacity: .3; pointer-events: none; }

/* Landscape: the sky object takes one side, the reading the other. */
@media (min-aspect-ratio: 1/1) {
    .voyage-js .voyage:not([data-renderer="dom"]) :is(.voyage-cover, .voyage-reveal, .voyage-event, .voyage-gallery, .voyage-video, .voyage-reading)::before { inset: 0 auto 0 0; width: 58%; background: linear-gradient(90deg, rgba(3, 6, 15, .8) 0%, rgba(3, 6, 15, .52) 58%, transparent); }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-memory::before { inset: 0 0 0 auto; width: 52%; background: linear-gradient(270deg, rgba(3, 6, 15, .8) 0%, rgba(3, 6, 15, .5) 60%, transparent); }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-cover .voyage-copy { top: 50%; left: var(--edge); width: min(40rem, 44vw); transform: translateY(-50%); }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-reveal .voyage-copy { top: 50%; left: var(--edge); width: min(40rem, 44vw); max-height: calc(100% - 13rem); padding-right: 1rem; transform: translateY(-50%); }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-memory .voyage-copy { top: 50%; right: var(--edge); width: min(31rem, 38vw); max-height: 70%; transform: translateY(-50%); }
    .voyage-js .voyage:not([data-renderer="dom"]) :is(.voyage-gallery, .voyage-video) .voyage-copy { top: 50%; left: var(--edge); width: min(24rem, 30vw); transform: translateY(-50%); }
    .voyage-js .voyage:not([data-renderer="dom"]) :is(.voyage-event, .voyage-reading) .voyage-copy { top: calc(7rem + var(--safe-top)); bottom: 6.5rem; left: var(--edge); width: min(33rem, 42vw); padding-right: 1rem; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-event .voyage-copy { width: min(36rem, 44vw); container-type: inline-size; }
    .voyage-js .voyage:not([data-renderer="dom"]) :is(.voyage-event, .voyage-reading) .voyage-station-title { font-size: clamp(2rem, 3vw, 2.9rem); }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-couple .voyage-station-title { position: absolute; top: calc(6rem + var(--safe-top)); left: 0; right: 0; text-align: center; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-couple .voyage-partners { position: absolute; top: 50%; left: var(--edge); right: var(--edge); grid-template-columns: minmax(0, 1fr) minmax(14rem, 26vw) minmax(0, 1fr); align-items: center; gap: 0; transform: translateY(-38%); }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-couple .voyage-partner:first-child { grid-column: 1; grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-couple .voyage-partner:first-child > img { order: 2; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-couple .voyage-partner:last-child { grid-column: 3; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-couple .voyage-partner-amp { display: none; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-memory[data-photo="page"] .voyage-memory-photo { position: absolute; top: 50%; left: var(--edge); display: block; width: 42vw; max-height: 62vh; margin: 0; transform: translateY(-50%); }
}

/* Portrait: the sky object sits above, the reading below it. */
@media (max-aspect-ratio: 1/1) {
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-station::before { inset: auto 0 0; height: 66%; background: linear-gradient(0deg, rgba(3, 6, 15, .95) 0%, rgba(3, 6, 15, .84) 50%, rgba(3, 6, 15, .4) 80%, transparent); }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-copy,
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-couple .voyage-partners { position: absolute; right: 1.25rem; bottom: calc(5.4rem + var(--safe-bottom)); left: 1.25rem; max-height: 50%; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-cover .voyage-copy { bottom: calc(1.6rem + var(--safe-bottom)); max-height: none; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-reveal .voyage-copy { bottom: calc(1.4rem + var(--safe-bottom)); max-height: 60%; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-event .voyage-copy { max-height: 54%; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-video .voyage-copy { max-height: 40%; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-reading .voyage-copy { max-height: 54%; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-gallery .voyage-copy { max-height: 34%; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-names { font-size: clamp(2.7rem, 12.5vw, 4.4rem); }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-station-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-couple .voyage-station-title { position: absolute; top: calc(4.6rem + var(--safe-top)); right: 1.25rem; left: 1.25rem; text-align: center; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-couple .voyage-partners { gap: .9rem; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-partner-photo { width: 3.6rem; height: 3.6rem; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-partner-name { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-partner-amp { padding-left: 4.6rem; font-size: 1.7rem; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-memory[data-photo="page"] .voyage-memory-photo { position: absolute; top: calc(5rem + var(--safe-top)); right: 1.25rem; left: 1.25rem; display: block; width: auto; height: 34%; margin: 0; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-header { grid-template-columns: auto 1fr auto; gap: .5rem; padding-inline: 1.25rem .6rem; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-progress { display: none; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-chapter { grid-column: 2; grid-row: 1; display: block; overflow: hidden; margin: 0; color: var(--muted); font: italic 400 1.05rem/1.2 var(--serif); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-tool { padding-inline: .45rem; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-sound::before { content: "\266A"; font-size: 1.25rem; line-height: 1; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-form { margin-top: .6rem; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-names { font-size: clamp(2.2rem, 7vw, 3.2rem); }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-guest { margin-top: .7rem; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-start { margin-top: 1.1rem; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-hint { display: none; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-couple .voyage-station-title { top: calc(3.3rem + var(--safe-top)); font-size: 1.55rem; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-couple .voyage-partners { transform: translateY(-30%); }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-partner-name { font-size: 1.45rem; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-memory .voyage-copy { max-height: 74%; }
    .voyage-js .voyage:not([data-renderer="dom"]) :is(.voyage-event, .voyage-reading) .voyage-copy { top: calc(3.6rem + var(--safe-top)); bottom: 4.4rem; }
    .voyage-js .voyage:not([data-renderer="dom"]) :is(.voyage-event, .voyage-reading) .voyage-station-title { font-size: 1.7rem; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-reveal .voyage-copy { max-height: calc(100% - 7rem); }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-next { bottom: calc(.7rem + var(--safe-bottom)); }
}
@media (max-aspect-ratio: 1/1) and (max-height: 640px) {
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-copy,
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-couple .voyage-partners { max-height: 54%; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-hint { display: none; }
}
/* Three or more events pair up when the reading column has room. */
@container (min-width: 30rem) {
    .voyage-event-list:is([data-event-count="3"], [data-event-count="4"], [data-event-count="5"], [data-event-count="6"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .voyage-film-hit::after { transition: none !important; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-station,
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-station[data-active] { transition-duration: .01s; transition-delay: 0s; }
    .voyage-js .voyage:not([data-renderer="dom"]) .voyage-line { transition: none; }
}

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

/* Teks & Font: a text the couple writes may hold one long word (Bapak/Ibu/Saudara/i). Body text and
   buttons break instead of pushing past their panel (headings shrink first: text-fit.js). Zero
   specificity, so the voyage's own wrapping rules win. */
:where(.voyage) :where(h4, p, small, li, blockquote, figcaption, button, a) { overflow-wrap: break-word; }
/* The cover's opening words are the couple's own and may run long: the immersive cover shows their
   first lines so the names and the start button stay in view (the information station reads them
   whole). */
.voyage-js .voyage:not([data-renderer="dom"]) .voyage-cover .voyage-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }