/*
 * Template "Boarding Pass" (Pernikahan): a first-class ticket to the wedding.
 * Colors from the variant (x-inv.head): --inv-primary (the airline color: ticket band, codes,
 * buttons), --inv-accent (gold/coral: hairlines, the plane, italic words), --inv-background
 * (warm ivory), --inv-text, --inv-paper (cards, the ticket), --inv-night (night sections, cover).
 * Accents are thin solid lines and perforations only; no stripes.
 */

:root {
    --inv-primary: #0f2a52;
    --inv-accent: #c9a24c;
    --inv-background: #f5efe3;
    --inv-text: #17202f;
    --inv-paper: #fffbf3;
    --inv-night: #0a1b36;
    --inv-radius: 12px;

    --bd-col: min(100vw, 460px);
    --bd-serif: 'Bodoni Moda', 'Didot', Georgia, 'Times New Roman', serif;
    --bd-script: 'Imperial Script', 'Brush Script MT', cursive;
    --bd-sans: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;

    --bd-paper: var(--inv-paper);
    --bd-night: var(--inv-night, color-mix(in srgb, var(--inv-primary) 72%, #000));
    --bd-on-dark: color-mix(in srgb, var(--inv-paper) 94%, #fff);
    --bd-on-dark-soft: color-mix(in srgb, var(--bd-on-dark) 74%, transparent);
    --bd-muted: color-mix(in srgb, var(--inv-text) 70%, var(--inv-paper));
    --bd-line: color-mix(in srgb, var(--inv-text) 12%, transparent);
    --bd-dash: color-mix(in srgb, var(--inv-text) 26%, transparent);
    --bd-ink: color-mix(in srgb, var(--inv-primary) 90%, var(--inv-text));
    /* the accent darkened enough to read on ivory */
    --bd-accent-ink: color-mix(in srgb, var(--inv-accent) 62%, var(--inv-text));
    --bd-accent-light: color-mix(in srgb, var(--inv-accent) 78%, #fff);
    --bd-hair: color-mix(in srgb, var(--inv-accent) 55%, transparent);
    --bd-shadow: 0 1px 0 rgb(0 0 0 / .02), 0 22px 40px -30px color-mix(in srgb, var(--inv-text) 60%, transparent);
    --bd-ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
p, h1, h2, h3, figure, blockquote, dl, dd, ol { margin: 0; }
img { max-width: 100%; }
a { color: inherit; }

body.bd-body {
    min-height: 100vh;
    color: var(--inv-text);
    font-family: var(--bd-serif);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* wide screens: a calm night backdrop with a faint glow */
    background:
        radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--inv-accent) 12%, transparent), transparent 70%),
        linear-gradient(170deg, var(--bd-night), color-mix(in srgb, var(--bd-night) 70%, #000));
    background-attachment: fixed;
}

.bd-preview {
    position: fixed; top: 0; left: 50%; z-index: 60; transform: translateX(-50%);
    padding: .3rem .9rem; border-radius: 0 0 10px 10px; white-space: nowrap;
    background: var(--inv-accent); color: #161616; font: 500 .68rem/1.4 var(--bd-sans);
}

/* small letter-spaced label used across sections */
.bd-label {
    font: 500 .6rem/1.3 var(--bd-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bd-accent-ink);
}

/* ======================================================= cover */
.bd-cover {
    /* z-index above the music buttons (40) until the pass is opened */
    position: fixed; top: 0; bottom: 0; left: 50%; z-index: 42; width: var(--bd-col); transform: translateX(-50%);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    color: var(--bd-on-dark);
    background:
        radial-gradient(110% 45% at 50% 0%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 70%),
        linear-gradient(180deg, var(--bd-night) 0%, var(--inv-primary) 58%, color-mix(in srgb, var(--inv-primary) 82%, var(--bd-night)) 100%);
}
.bd-cover--leave { transition: transform .8s cubic-bezier(.6, 0, .3, 1), opacity .65s ease; }
.bd-cover--gone { transform: translateX(-50%) translateY(-10%); opacity: 0; }

.bd-cover__inner {
    position: relative; min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
    padding: calc(1.6rem + env(safe-area-inset-top)) 1.15rem calc(1.6rem + env(safe-area-inset-bottom));
}
.bd-cover__kicker {
    display: flex; align-items: center; gap: .8rem; max-width: 100%;
    font: 500 .66rem/1.3 var(--bd-sans); letter-spacing: .34em; text-transform: uppercase; text-align: center;
    color: var(--bd-accent-light);
}
.bd-cover__kicker::before, .bd-cover__kicker::after { content: ''; flex: none; width: 1.6rem; border-top: 1px solid var(--bd-hair); }

/* airplane window: a slim paper frame with a gold hairline */
.bd-window {
    position: relative; flex: none;
    height: clamp(6.5rem, 24svh, 13.5rem); aspect-ratio: 3 / 4;
    padding: .42rem; border-radius: 46% / 36%;
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-paper) 96%, #fff), color-mix(in srgb, var(--inv-paper) 78%, #9a9080));
    box-shadow: 0 0 0 1px var(--bd-hair), 0 0 0 7px color-mix(in srgb, var(--inv-accent) 10%, transparent), 0 22px 44px -18px rgb(0 0 0 / .6);
}
.bd-window__glass {
    position: relative; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 44% / 34%; overflow: hidden;
    background: var(--bd-photo, linear-gradient(180deg, #24406e 0%, #d98f62 62%, #f7d5a6 100%)) center / cover no-repeat;
}
/* the glass: an inner shadow and a soft glare */
.bd-window::after {
    content: ''; position: absolute; inset: .42rem; border-radius: 44% / 34%; pointer-events: none;
    box-shadow: inset 0 0 0 2px rgb(0 0 0 / .12), inset 0 8px 20px rgb(0 0 0 / .32);
    background: linear-gradient(125deg, rgb(255 255 255 / .28) 0 14%, transparent 28% 100%);
}
/* the opening moment: the view fades in while drawing slightly closer */
.bd-window--cover .bd-window__glass { background: none; }
.bd-window--cover .bd-window__glass::before {
    content: ''; position: absolute; inset: 0;
    background: var(--bd-photo, linear-gradient(180deg, #24406e 0%, #d98f62 62%, #f7d5a6 100%)) center / cover no-repeat;
}
html.inv-anim .bd-window--cover .bd-window__glass::before { animation: bd-view 2.1s .2s var(--bd-ease) both; }
@keyframes bd-view { from { opacity: 0; transform: scale(1.16); } to { opacity: 1; transform: none; } }

/* ---------- the boarding pass ---------- */
.bd-pass-wrap { width: 100%; max-width: 24.5rem; }
.bd-pass { filter: drop-shadow(0 26px 34px rgb(0 0 0 / .4)); color: var(--inv-text); }
.bd-pass__main, .bd-pass__stub {
    --notch: 12px;
    position: relative; background: var(--bd-paper);
}
/* the two notches where the stub tears off: cut with masks, so they are real holes */
.bd-pass__main {
    border-radius: 16px 16px 0 0; padding-bottom: 1.05rem;
    -webkit-mask:
        radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.bd-pass__stub {
    display: grid; gap: .85rem; padding: 1.05rem 1.2rem 1.15rem; border-radius: 0 0 16px 16px;
    -webkit-mask:
        radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
}
/* the perforation */
.bd-pass__stub::before {
    content: ''; position: absolute; top: 0; left: calc(var(--notch) + 6px); right: calc(var(--notch) + 6px);
    border-top: 1.5px dashed var(--bd-dash);
}

.bd-pass__top {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem 1.1rem; border-radius: 16px 16px 0 0;
    background: var(--inv-primary); color: var(--bd-on-dark);
    border-bottom: 2px solid var(--inv-accent);
}
.bd-logo {
    display: inline-grid; grid-auto-flow: column; place-content: center; flex: none;
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    border: 1px solid var(--bd-accent-light); color: var(--bd-accent-light);
    font: 500 .9rem/1 var(--bd-serif); letter-spacing: .02em;
}
.bd-pass__airline {
    flex: 1; min-width: 0; font: 500 .66rem/1.2 var(--bd-sans); letter-spacing: .3em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-pass__class {
    flex: none; font: italic 400 .92rem/1 var(--bd-serif); color: var(--bd-accent-light);
}

.bd-route {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem;
    padding: 1.05rem 1.2rem .45rem;
}
.bd-route__end { min-width: 0; }
.bd-route__end--to { text-align: right; }
.bd-route__code { font: 500 clamp(2.4rem, 12.5vw, 2.9rem)/1 var(--bd-serif); letter-spacing: .04em; color: var(--bd-ink); }
.bd-route__city {
    max-width: 7.5rem; margin-top: .1rem; font: 400 1.5rem/1.15 var(--bd-script); color: var(--bd-accent-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-route__end--to .bd-route__city { margin-left: auto; }
.bd-route__path { position: relative; height: 2.5rem; color: var(--bd-dash); }
.bd-route__arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd-route__plane { position: absolute; left: 50%; top: 2px; translate: -50% 0; rotate: 90deg; color: var(--inv-accent); }

.bd-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem .6rem;
    margin: .5rem 1.2rem 0; padding-top: .85rem; border-top: 1px solid var(--bd-line);
}
.bd-grid__wide { grid-column: 1 / -1; }
.bd-grid dt { font: 500 .56rem/1.3 var(--bd-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--bd-muted); }
.bd-grid dd { margin-top: .15rem; font: 500 .84rem/1.25 var(--bd-sans); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.bd-pass__guest { font: 500 1.3rem/1.15 var(--bd-serif); letter-spacing: 0; color: var(--bd-ink); text-transform: none; }

.bd-pass__quote {
    margin: .85rem 1.2rem 0; padding-top: .7rem; border-top: 1px solid var(--bd-line);
    font: italic 400 .86rem/1.55 var(--bd-serif); color: var(--bd-muted);
}

/* the barcode on the stub */
.bd-barcode { display: grid; gap: .3rem; color: color-mix(in srgb, var(--inv-text) 88%, transparent); }
.bd-barcode svg { display: block; width: 100%; height: 2rem; }
.bd-barcode span { font: 400 .58rem/1 var(--bd-sans); letter-spacing: .4em; text-align: center; color: var(--bd-muted); }

.bd-checkin {
    width: 100%; padding: .95rem 1.2rem; border-radius: 10px;
    background: var(--inv-primary); color: var(--bd-on-dark);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 45%, transparent);
    font: 500 .76rem/1.2 var(--bd-sans); letter-spacing: .24em; text-transform: uppercase;
}
/* calm: no endless pulse on the check-in button */
html.inv-anim .bd-checkin { animation: none; }

/* ======================================================= the itinerary */
.bd-app {
    position: relative; width: var(--bd-col); min-height: 100vh; margin: 0 auto;
    /* night shows below the last section (branding, check-in QR) */
    background: var(--bd-night);
    box-shadow: 0 0 80px rgb(0 0 0 / .4);
}
/* wide screens: gold hairlines along the column */
@media (min-width: 520px) {
    .bd-app { box-shadow: 0 0 0 1px var(--bd-hair), 0 0 80px rgb(0 0 0 / .4); }
}

/* flight-status bar */
.bd-status {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: .7rem;
    padding: calc(.6rem + env(safe-area-inset-top)) 1rem .6rem;
    background: var(--bd-night); color: var(--bd-on-dark);
    border-bottom: 1px solid var(--bd-hair);
}
.bd-status__code { font: 500 1.05rem/1 var(--bd-serif); letter-spacing: .1em; }
.bd-status__track { position: relative; flex: 1; height: 16px; }
.bd-status__track::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed color-mix(in srgb, var(--bd-on-dark) 35%, transparent);
}
.bd-status__fill {
    position: absolute; left: 0; top: calc(50% - .5px); height: 1px; width: calc(var(--bd-progress, 0) * 100%);
    background: var(--inv-accent);
}
.bd-status__plane {
    position: absolute; top: 0; left: calc(var(--bd-progress, 0) * (100% - 16px)); rotate: 90deg; color: var(--inv-accent);
}
.bd-status__flight {
    flex: none; display: inline-flex; align-items: center; gap: .1rem;
    font: 500 .64rem/1.2 var(--bd-sans); letter-spacing: .16em; color: var(--bd-accent-light);
}
.bd-status__mono { display: inline-flex; margin-right: .25rem; }

.bd-main { padding: 0 0 4.8rem; }
/* the branding line sits below the last section: keep the same distance to the end of the page */
.bd-main:has(> .bd-branding) { padding-bottom: 7.6rem; }

/* ---------- section scaffolding: ivory sections and night sections alternate ---------- */
.bd-sec { padding: 3.6rem 1.35rem 3.4rem; background: var(--inv-background); }
.bd-sec--night { background: var(--bd-night); color: var(--bd-on-dark); }
.bd-sec--night + .bd-sec--night { border-top: 1px solid color-mix(in srgb, var(--inv-accent) 18%, transparent); }

.bd-head { display: grid; justify-items: center; gap: .55rem; margin-bottom: 2rem; text-align: center; }
.bd-head__kicker { font: 500 .64rem/1.3 var(--bd-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--bd-accent-ink); }
.bd-head__title { font: 400 clamp(2rem, 9.4vw, 2.4rem)/1.12 var(--bd-serif); letter-spacing: -.005em; color: var(--bd-ink); text-wrap: balance; }
.bd-head__title em { font-style: italic; color: var(--bd-accent-ink); }
.bd-head__rule { display: block; width: 3.2rem; height: 1px; margin-top: .35rem; background: var(--inv-accent); }
.bd-sec--night .bd-head__kicker { color: var(--bd-accent-light); }
.bd-sec--night .bd-head__title { color: var(--bd-on-dark); }
.bd-sec--night .bd-head__title em { color: var(--bd-accent-light); }
/* variety: the route sections read left-aligned, like an itinerary */
.bd-events .bd-head, .bd-story .bd-head { justify-items: start; text-align: left; }

.bd-card {
    position: relative; padding: 1.3rem 1.2rem; border-radius: 14px;
    background: var(--bd-paper); border: 1px solid var(--bd-line); box-shadow: var(--bd-shadow);
}

/* ---------- opening: the captain's announcement, then a night band for the quote ---------- */
.bd-opening:has(> .bd-quote) { padding-bottom: 0; }
.bd-announce {
    position: relative; display: grid; justify-items: center; gap: .75rem; margin-top: 2.6rem; padding: 3.2rem 1.4rem 1.8rem; text-align: center;
    background: var(--bd-paper); border-radius: 4px; box-shadow: var(--bd-shadow);
}
/* a double gold hairline frame inside the panel */
.bd-announce::before {
    content: ''; position: absolute; inset: .5rem; pointer-events: none;
    border: 1px solid var(--bd-hair); outline: 1px solid color-mix(in srgb, var(--inv-accent) 25%, transparent); outline-offset: -5px;
}
.bd-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.75rem; line-height: 1.8; color: var(--bd-ink); }
.bd-announce__greeting { font: italic 400 1.2rem/1.45 var(--bd-serif); color: var(--bd-ink); }
.bd-announce__message { font-size: 1rem; line-height: 1.75; color: color-mix(in srgb, var(--inv-text) 88%, transparent); }

.bd-quote {
    position: relative; isolation: isolate; overflow: hidden; margin: 3rem -1.35rem 0; padding: 3.4rem 2rem 3.8rem; text-align: center;
    background: var(--bd-night); color: var(--bd-on-dark);
}
.bd-quote__mark { display: block; height: 2.6rem; font: 400 5.2rem/1 var(--bd-serif); color: var(--inv-accent); }
.bd-quote blockquote { margin: 0; font: italic 400 1.1rem/1.7 var(--bd-serif); }
.bd-quote figcaption {
    margin-top: 1.2rem; font: 500 .64rem/1.4 var(--bd-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--bd-accent-light);
}

/* ---------- couple: window portraits, mirrored ---------- */
.bd-pax { display: grid; grid-template-columns: 8rem 1fr; gap: 1.25rem; align-items: center; }
.bd-pax__frame {
    width: 8rem; aspect-ratio: 3 / 4; padding: .35rem; border-radius: 46% / 36%;
    background: var(--bd-paper); box-shadow: 0 0 0 1px var(--bd-hair), 0 18px 30px -20px rgb(0 0 0 / .55);
}
.bd-pax__photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 44% / 34%; }
.bd-pax__photo--empty {
    display: grid; place-items: center;
    background: linear-gradient(180deg, var(--inv-primary), var(--bd-night));
    color: var(--bd-accent-light); font: 500 1.6rem/1 var(--bd-serif); letter-spacing: .06em;
}
.bd-pax__info { min-width: 0; }
.bd-pax__top { font: 500 .58rem/1.4 var(--bd-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--bd-accent-ink); }
.bd-pax__nick { margin-top: .2rem; font: 400 2.9rem/1.05 var(--bd-script); color: var(--bd-ink); overflow-wrap: anywhere; }
.bd-pax__name { margin-top: .15rem; font: 500 1.06rem/1.35 var(--bd-serif); }
.bd-pax__parents { margin-top: .55rem; font-size: .9rem; line-height: 1.5; color: var(--bd-muted); }
.bd-pax__parents strong { display: block; font-weight: 500; color: var(--inv-text); }
.bd-pax--bride { grid-template-columns: 1fr 8rem; }
.bd-pax--bride .bd-pax__frame { order: 2; }
.bd-pax--bride .bd-pax__info { text-align: right; }
.bd-pax__ig {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .75rem;
    padding: .38rem .8rem; border-radius: 999px; text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--bd-hair);
    color: var(--bd-ink); font: 500 .74rem/1.2 var(--bd-sans); letter-spacing: .04em;
}
.bd-couple__and {
    display: flex; align-items: center; gap: .8rem; margin: 2.2rem 0;
    font: 500 .66rem/1 var(--bd-sans); letter-spacing: .26em;
}
.bd-couple__and::before, .bd-couple__and::after { content: ''; flex: 1; border-top: 1px dashed var(--bd-dash); }
.bd-couple__code { color: var(--bd-muted); }

/* ---------- countdown: the departure board (night) ---------- */
.bd-board {
    padding: 1.2rem 1rem 1.25rem; border-radius: 16px;
    background: color-mix(in srgb, var(--bd-night) 55%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 28%, transparent);
}
.bd-board__row {
    display: flex; justify-content: space-between; gap: .5rem; margin-bottom: 1rem;
    font: 500 .62rem/1.2 var(--bd-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--bd-on-dark-soft);
}
.bd-board__status { color: var(--bd-accent-light); }
.bd-board .inv-countdown { gap: .45rem; }
.bd-board .inv-countdown__item {
    position: relative; flex: 1; min-width: 0; padding: .8rem .15rem .6rem; border-radius: 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bd-on-dark) 9%, var(--bd-night)) 0 50%, color-mix(in srgb, var(--bd-on-dark) 5%, var(--bd-night)) 50% 100%);
    box-shadow: 0 2px 0 rgb(0 0 0 / .35);
}
/* the split of the flap */
.bd-board .inv-countdown__item::after {
    content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 6px); height: 1px; background: rgb(0 0 0 / .45);
}
.bd-board .inv-countdown__value { font: 500 clamp(1.6rem, 7.5vw, 2rem)/1.1 var(--bd-serif); color: var(--bd-accent-light); }
.bd-board .inv-countdown__label {
    margin-top: .3rem; font: 500 .54rem/1.2 var(--bd-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bd-on-dark-soft); opacity: 1;
}
.bd-board .inv-countdown__actions { margin-top: 1.1rem; gap: .45rem; }
.bd-board .inv-countdown__actions .inv-button {
    padding: .6rem .95rem; font: 500 .64rem/1.2 var(--bd-sans); letter-spacing: .12em; text-transform: uppercase;
    color: var(--bd-on-dark); background: transparent; box-shadow: inset 0 0 0 1px var(--bd-hair);
}
.bd-board .inv-countdown__done { text-align: center; font-style: italic; }
.bd-board__date {
    margin-top: 1rem; padding-top: .85rem; border-top: 1px solid color-mix(in srgb, var(--bd-on-dark) 14%, transparent);
    text-align: center; font: italic 400 1rem/1.45 var(--bd-serif); color: var(--bd-on-dark);
}

/* ---------- events: flight legs ---------- */
.bd-legs { display: grid; gap: 2rem; }
.bd-leg { padding: 0; overflow: hidden; }
.bd-leg__photo {
    position: relative; height: 10.5rem;
    background: var(--bd-photo) center / cover no-repeat, color-mix(in srgb, var(--inv-primary) 25%, #ccc);
}
.bd-leg__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--bd-night) 45%, transparent));
}
.bd-leg__tag {
    position: absolute; z-index: 1; bottom: .8rem; left: 1.2rem;
    color: var(--bd-on-dark); font: 500 .62rem/1.2 var(--bd-sans); letter-spacing: .28em; text-transform: uppercase;
}
.bd-leg__tag--plain { position: static; display: block; margin: 1.3rem 0 0 1.2rem; color: var(--bd-accent-ink); }
.bd-leg__body { padding: 1.15rem 1.2rem 1.3rem; border-top: 2px solid var(--inv-accent); }
.bd-leg__tag--plain + .bd-leg__body { border-top: 0; padding-top: .4rem; }
.bd-leg__name { font: 500 1.75rem/1.15 var(--bd-serif); color: var(--bd-ink); }
.bd-leg__date { margin-top: .35rem; font: 500 .66rem/1.4 var(--bd-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bd-muted); }
/* the times on a navy panel with gold figures: the accent block of the card */
.bd-leg__times {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: .5rem;
    margin: 1.1rem -.2rem; padding: .95rem 1rem; border-radius: 10px;
    background: linear-gradient(135deg, var(--inv-primary), var(--bd-night)); color: var(--bd-on-dark);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 30%, transparent);
}
.bd-leg__times .bd-label { color: var(--bd-on-dark-soft); }
.bd-leg__time { font: 400 2.3rem/1 var(--bd-serif); color: var(--bd-accent-light); }
.bd-leg__arrive { text-align: right; }
.bd-leg__line { display: grid; justify-items: center; gap: .15rem; padding-bottom: .3rem; color: var(--inv-accent); }
.bd-leg__line svg { rotate: 90deg; }
.bd-leg__line small { font: 500 .58rem/1 var(--bd-sans); letter-spacing: .18em; color: var(--bd-on-dark-soft); }
.bd-leg__info { display: grid; gap: .85rem; }
.bd-leg__info dt { font: 500 .58rem/1.3 var(--bd-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--bd-accent-ink); }
.bd-leg__info dd { margin-top: .15rem; font-size: .96rem; line-height: 1.55; }
.bd-leg__venue { font-weight: 500; font-size: 1.08rem !important; }
.bd-leg__baggage { padding-left: .8rem; border-left: 2px solid var(--inv-accent); }
.inv-maps .inv-button {
    width: 100%; margin-top: 1.1rem; padding: .85rem 1rem; border-radius: 10px;
    font: 500 .72rem/1.2 var(--bd-sans); letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- love story: stops along one dashed route ---------- */
.bd-log { position: relative; display: grid; gap: 2.2rem; padding: 0 0 0 1.8rem; list-style: none; }
.bd-log::before {
    content: ''; position: absolute; left: .42rem; top: .5rem; bottom: .5rem;
    border-left: 1px dashed color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.bd-entry { position: relative; }
.bd-entry__dot {
    position: absolute; left: -1.8rem; top: .3rem; width: .85rem; height: .85rem; border-radius: 50%;
    background: var(--inv-background); border: 1.5px solid var(--inv-accent);
}
.bd-entry__dot::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--inv-accent); }
.bd-entry__date {
    display: inline-block; padding: .3rem .7rem; border-radius: 4px;
    background: color-mix(in srgb, var(--inv-accent) 18%, var(--inv-background));
    font: 500 .62rem/1.4 var(--bd-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--bd-accent-ink);
}
.bd-entry__title { margin-top: .5rem; font: 500 1.35rem/1.25 var(--bd-serif); color: var(--bd-ink); }
.bd-entry__photo { display: block; width: 100%; aspect-ratio: 4 / 3; margin-top: .85rem; object-fit: cover; border-radius: 12px; box-shadow: var(--bd-shadow); }
.bd-entry__text { margin-top: .6rem; font-size: .97rem; line-height: 1.7; color: color-mix(in srgb, var(--inv-text) 88%, transparent); }

/* ---------- gallery: postcards on the night sky ---------- */
.bd-postcards .inv-gallery { gap: .7rem; }
.bd-postcards .inv-gallery__item {
    border-radius: 4px; box-shadow: 0 0 0 3px var(--bd-paper), 0 14px 26px -14px rgb(0 0 0 / .7);
    background: color-mix(in srgb, var(--bd-on-dark) 8%, var(--bd-night));
}
/* the first photo opens wide, the rest sit two by two */
.bd-postcards .inv-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

/* ---------- live streaming: the seat-back screen ---------- */
.bd-screen {
    display: grid; justify-items: center; gap: .7rem; padding: 1.8rem 1.3rem; text-align: center;
    border-radius: 16px; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--inv-primary) 80%, #fff 6%), var(--bd-night) 75%);
    color: var(--bd-on-dark); box-shadow: inset 0 0 0 1px var(--bd-hair), var(--bd-shadow);
}
.bd-screen__badge {
    display: inline-flex; align-items: center; gap: .5rem;
    font: 500 .64rem/1.2 var(--bd-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--bd-accent-light);
}
.bd-screen__badge span { width: .5rem; height: .5rem; border-radius: 50%; background: #ff7d6e; }
.bd-screen__text { font: italic 400 1.1rem/1.55 var(--bd-serif); }
.bd-screen__note { font: 400 .8rem/1.45 var(--bd-sans); color: var(--bd-on-dark-soft); }
.bd-screen__button {
    margin-top: .4rem; padding: .8rem 1.4rem; font: 500 .7rem/1.2 var(--bd-sans); letter-spacing: .2em; text-transform: uppercase;
    background: var(--inv-accent) !important; color: var(--bd-night) !important;
}

/* ---------- gift: the luggage tag ---------- */
.bd-gift { background: color-mix(in srgb, var(--inv-accent) 9%, var(--inv-background)); }
.bd-tag { padding-top: 2.8rem; border-radius: 20px 20px 14px 14px; }
.bd-tag__hole {
    position: absolute; top: 1rem; left: 50%; width: 1rem; height: 1rem; translate: -50% 0; border-radius: 50%;
    background: color-mix(in srgb, var(--inv-accent) 9%, var(--inv-background));
    box-shadow: inset 0 1px 3px rgb(0 0 0 / .2), 0 0 0 3px var(--bd-paper), 0 0 0 4px var(--bd-hair);
}
.bd-tag__intro { margin-bottom: 1.2rem; text-align: center; font: italic 400 .98rem/1.65 var(--bd-serif); color: color-mix(in srgb, var(--inv-text) 88%, transparent); }
/* accounts: two small stubs per row, an odd last one spans the row */
.inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inv-gift__account {
    min-width: 0; padding: .85rem .75rem; border-radius: 12px; text-align: center;
    background: color-mix(in srgb, var(--inv-primary) 4%, var(--bd-paper));
    border: 1px dashed var(--bd-hair);
}
.inv-gift__account + .inv-gift__account { margin-top: 0; }
.inv-gift__address { margin-top: .6rem; }
.inv-gift__bank { margin: 0 0 .45rem; font: 500 .6rem/1.3 var(--bd-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bd-accent-ink); overflow-wrap: anywhere; }
.inv-gift__logo { height: 1.7rem; padding: .25rem .5rem; max-width: 100%; }
.inv-gift__logo img { max-width: 100%; }
.inv-gift__number { margin: 0; font: 500 .84rem/1.3 var(--bd-sans); letter-spacing: 0; overflow-wrap: anywhere; color: var(--bd-ink); }
.inv-gift__holder { margin: .2rem 0 .6rem; font: 500 .6rem/1.35 var(--bd-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--bd-muted); overflow-wrap: anywhere; }
.inv-gift__address > p:not([class]) { margin: 0 0 .7rem; font-size: .94rem; }
.inv-gift__address .inv-gift__holder { font-size: .64rem; }
.inv-gift__account .inv-button { padding: .38rem .75rem; font: 500 .6rem/1.2 var(--bd-sans); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- buttons ---------- */
.inv-button { background: var(--inv-primary); color: var(--bd-on-dark); font-weight: 500; font-family: var(--bd-sans); }
.inv-button--outline { background: transparent; color: var(--bd-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 45%, transparent); }

/* ---------- rsvp & wishes ---------- */
.inv-rsvp__deadline {
    margin: 0 0 1rem; padding: .6rem .8rem; border-radius: 10px;
    background: color-mix(in srgb, var(--inv-accent) 13%, transparent);
    font: 500 .72rem/1.45 var(--bd-sans); letter-spacing: .04em; color: var(--bd-accent-ink);
}
.bd-formcard__intro { margin-bottom: 1.1rem; font: italic 400 .98rem/1.65 var(--bd-serif); color: color-mix(in srgb, var(--inv-text) 88%, transparent); }
.bd-formcard .inv-form label, .bd-formcard .inv-form__choices legend {
    font: 500 .62rem/1.3 var(--bd-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bd-ink);
}
.bd-formcard .inv-form__choices label { font: 400 .86rem/1.3 var(--bd-sans); letter-spacing: .02em; text-transform: none; color: var(--inv-text); }
.bd-formcard .inv-form input:not([type=radio]):not([type=checkbox]), .bd-formcard .inv-form select, .bd-formcard .inv-form textarea {
    padding: .72rem .85rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--inv-text) 18%, transparent);
    background: #fff; color: #1d1d1d; font: 400 .96rem/1.4 var(--bd-sans); letter-spacing: 0;
}
.bd-formcard .inv-form input:focus, .bd-formcard .inv-form select:focus, .bd-formcard .inv-form textarea:focus {
    outline: none; border-color: var(--inv-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 15%, transparent);
}
.bd-formcard .inv-form > .inv-button, .bd-formcard .inv-form button[type=submit] {
    width: 100%; padding: .92rem 1rem; border-radius: 10px;
    font: 500 .74rem/1.2 var(--bd-sans); letter-spacing: .22em; text-transform: uppercase;
}
.inv-wishes__list { gap: .6rem; }
.inv-wishes { --inv-wishes-height: 19.5rem; }
.inv-wish {
    padding: .7rem .85rem; border-radius: 10px;
    background: color-mix(in srgb, var(--inv-background) 60%, var(--bd-paper));
    border-left: 2px solid var(--inv-accent);
}
.inv-wish__name { font: 500 .72rem/1.3 var(--bd-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--bd-ink); }
.inv-wish__message { font-size: .92rem; line-height: 1.5; }
.inv-wish__time { margin-top: .25rem; font-family: var(--bd-sans); font-size: .66rem; }
.inv-wishes__more { font: 500 .66rem/1.2 var(--bd-sans); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- closing: arrival (night) ---------- */
.bd-window--closing { margin: 0 auto 2rem; height: 14rem; }
.bd-arrival { display: grid; justify-items: center; text-align: center; }
.bd-arrival__message { font-size: 1.02rem; line-height: 1.75; color: var(--bd-on-dark); }
.bd-arrival__sign { margin-top: 1.6rem; font: 500 .62rem/1.4 var(--bd-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--bd-accent-light); }
.bd-arrival__names { margin-top: .3rem; font: 400 3.1rem/1.1 var(--bd-script); color: var(--bd-on-dark); }
.bd-arrival__names span { font: italic 400 .55em/1 var(--bd-serif); color: var(--bd-accent-light); }
.bd-arrival__thanks { margin-top: .9rem; font: 500 .6rem/1.5 var(--bd-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--bd-on-dark-soft); }

.bd-branding { padding: 1.4rem 1rem 0; font: 400 .7rem/1.4 var(--bd-sans); color: var(--bd-on-dark-soft); opacity: 1; }
.inv-checkin { color: var(--inv-text); background: var(--bd-paper); }

/* ---------- music: inside the column, above the bottom padding of the page ---------- */
.bd-body .inv-music { right: max(1rem, calc(50vw - 230px + 1rem)); }
.bd-body .inv-music__space { display: none; }
.bd-body .inv-music__button {
    background: var(--inv-primary); color: var(--bd-on-dark);
    box-shadow: 0 0 0 1px var(--bd-hair), 0 8px 18px -6px rgb(0 0 0 / .45);
}


/* ======================================================= round 2: richer surfaces */
.bd-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- heading art: a gold dot map of the world and a flight route with a gliding plane ---------- */
.bd-head { position: relative; isolation: isolate; padding-top: 1.4rem; }
.bd-head__map {
    position: absolute; z-index: -1; left: 50%; top: -1rem; width: 23rem; height: 10rem; translate: -50% 0; pointer-events: none;
    background: var(--inv-accent); opacity: .28;
    -webkit-mask: url(../img/world-dots.svg) center / contain no-repeat; mask: url(../img/world-dots.svg) center / contain no-repeat;
}
.bd-sec--night .bd-head__map { opacity: .3; }
.bd-head__route { position: absolute; z-index: -1; left: 50%; top: -.6rem; width: 300px; height: 80px; translate: -50% 0; color: var(--inv-accent); pointer-events: none; }
.bd-head__route > svg:first-child { display: block; }
.bd-head__route circle { fill: currentColor; }
.bd-events .bd-head__map, .bd-story .bd-head__map { left: 0; translate: -18% 0; }
.bd-events .bd-head__route, .bd-story .bd-head__route { left: -1rem; translate: 0 0; }
.bd-head__plane {
    position: absolute; left: 0; top: 0; color: var(--inv-accent);
    offset-path: path('M16 66C80 8 214 2 284 46'); offset-distance: 100%; offset-rotate: auto 90deg;
    filter: drop-shadow(0 2px 2px rgb(0 0 0 / .2));
}
html.inv-anim .bd-head__route > svg:first-child { clip-path: inset(0 100% 0 0); }
html.inv-anim .bd-head.is-revealed .bd-head__route > svg:first-child { animation: bd-trail 2.4s .25s ease-in-out both; }
html.inv-anim .bd-head__plane { offset-distance: 0%; }
html.inv-anim .bd-head.is-revealed .bd-head__plane { animation: bd-glide 2.4s .25s ease-in-out both; }
@keyframes bd-trail { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bd-glide { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* ---------- embossed gold seal ---------- */
.bd-seal { display: block; flex: none; width: 5.4rem; height: 5.4rem; overflow: visible; filter: drop-shadow(0 6px 9px rgb(0 0 0 / .28)); }
.bd-seal__shade { stroke: color-mix(in srgb, var(--inv-accent) 40%, #2a1a04); opacity: .6; }
.bd-seal__light { stroke: rgb(255 248 226 / .75); }
.bd-seal__ring { font: 600 8px/1 var(--bd-sans); letter-spacing: 1.6px; fill: color-mix(in srgb, var(--inv-accent) 38%, #2a1a04); }
.bd-seal__center { font: 500 19px/1 var(--bd-serif); letter-spacing: 1px; fill: color-mix(in srgb, var(--inv-accent) 38%, #2a1a04); }
.bd-seal__ring--light, .bd-seal__center--light { fill: rgb(255 246 220 / .6); }
.bd-seal--announce { position: absolute; top: -2.7rem; left: 50%; translate: -50% 0; }
.bd-seal--and { width: 4.6rem; height: 4.6rem; }
.bd-seal--arrived { width: 7.4rem; height: 7.4rem; margin: 1.8rem auto .4rem; rotate: -8deg; }
.bd-seal--corner { position: absolute; top: -1.8rem; right: -.4rem; width: 4.8rem; height: 4.8rem; rotate: 10deg; }
.bd-formcard--sealed .bd-formcard__intro { padding-right: 3.6rem; }
html.inv-anim .is-revealed .bd-seal, html.inv-anim .bd-seal.is-revealed { animation: bd-press .9s .35s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes bd-press { from { opacity: 0; scale: 1.25; } to { opacity: 1; scale: 1; } }

/* ---------- photo-gradient backdrops (countdown, quote band, closing) and clouds ---------- */
.bd-sec--photo { position: relative; isolation: isolate; overflow: hidden; }
.bd-photobg {
    position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--inv-primary) 88%, var(--inv-accent)), var(--bd-night) 72%);
}
.bd-photobg__img { position: absolute; inset: -40px 0; background: var(--bd-bg) center / cover no-repeat; }
/* deep gradient over the photo: text stays readable everywhere */
.bd-photobg::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bd-night) 86%, transparent) 0%,
        color-mix(in srgb, var(--inv-primary) 85%, transparent) 45%,
        color-mix(in srgb, var(--bd-night) 94%, transparent) 100%);
}
.bd-clouds {
    position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: 42%; object-fit: cover; object-position: center 72%;
    mix-blend-mode: screen; opacity: .34; pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, #000 30%, transparent); mask-image: linear-gradient(to top, #000 30%, transparent);
}
.bd-photobg--closing .bd-clouds { height: 30%; }
/* the departure board sits on its own glass panel, so the photo may show a little more here */
.bd-countdown .bd-photobg::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bd-night) 88%, transparent) 0%,
        color-mix(in srgb, var(--inv-primary) 70%, transparent) 55%,
        color-mix(in srgb, var(--bd-night) 90%, transparent) 100%);
}
.bd-gallery { position: relative; isolation: isolate; overflow: hidden; }
.bd-clouds--top {
    z-index: -1; top: 0; bottom: auto; height: 16rem; scale: 1 -1; opacity: .3;
    -webkit-mask-image: linear-gradient(to top, #000 20%, transparent); mask-image: linear-gradient(to top, #000 20%, transparent);
}

/* ---------- light section over a soft photo (opening): the photo shows through an ivory gradient ---------- */
.bd-sec--soft { position: relative; isolation: isolate; overflow: hidden; }
.bd-softbg {
    position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    /* fallback without photos: a warm ivory-to-gold gradient with a hint of the primary */
    background:
        radial-gradient(90% 50% at 85% 10%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 70%),
        radial-gradient(80% 45% at 0% 70%, color-mix(in srgb, var(--inv-primary) 10%, transparent), transparent 70%),
        var(--inv-background);
}
.bd-softbg__img { position: absolute; inset: -40px 0; background: var(--bd-bg) center / cover no-repeat; filter: blur(1.5px) saturate(.8); }
/* about 25-30% of the photo shows at the edges, less behind the text column; text stays dark on ivory */
.bd-softbg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(70% 55% at 50% 40%, color-mix(in srgb, var(--inv-background) 88%, transparent), transparent 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 78%, transparent), color-mix(in srgb, var(--inv-background) 70%, transparent) 50%, color-mix(in srgb, var(--inv-background) 92%, transparent));
}

/* ---------- cover sky: world map and a sea of clouds ---------- */
.bd-cover__sky { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.bd-cover__inner { z-index: 1; }
.bd-cover__map {
    position: absolute; top: 3%; left: 50%; width: 150%; aspect-ratio: 480 / 210; translate: -50% 0;
    background: var(--inv-accent); opacity: .17;
    -webkit-mask: url(../img/world-dots.svg) center / contain no-repeat; mask: url(../img/world-dots.svg) center / contain no-repeat;
}
.bd-clouds--cover { height: 58%; opacity: .5; }
html.inv-anim .bd-clouds--cover { animation: bd-mist 2.4s ease-out both; }
@keyframes bd-mist { from { opacity: 0; translate: 0 18px; } to { opacity: .5; translate: 0 0; } }

/* ---------- couple: a tinted panel bleeding to the edge behind each passenger ---------- */
.bd-pax { position: relative; padding: 1.2rem 0; }
.bd-pax > * { position: relative; z-index: 1; }
.bd-pax::before {
    content: ''; position: absolute; z-index: 0; top: 2.4rem; bottom: 0; left: 4rem; right: -1.35rem;
    background: linear-gradient(120deg, color-mix(in srgb, var(--inv-primary) 9%, var(--inv-background)), color-mix(in srgb, var(--inv-accent) 20%, var(--inv-background)));
}
.bd-pax--bride::before { left: -1.35rem; right: 4rem; }
.bd-pax__info { padding: .8rem .2rem .4rem; }

@media (prefers-reduced-motion: reduce) {
    .bd-window--cover .bd-window__glass::before, .bd-checkin { animation: none !important; }
    .bd-cover--leave { transition: none !important; }
    .bd-head__plane, .bd-head__route > svg, .bd-seal, .bd-clouds { animation: none !important; }
    .bd-photobg__img, .bd-softbg__img { animation: none !important; transform: none !important; }
}

/* ======================================================= fit: the whole pass (route, passenger, check-in) fits one phone screen */
.bd-pass__quote { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-height: 760px) {
    .bd-cover__inner { gap: .75rem; padding-block: calc(1rem + env(safe-area-inset-top)) calc(1.5rem + env(safe-area-inset-bottom)); }
    .bd-window { height: clamp(6rem, 19svh, 13rem); }
    .bd-route { padding: .8rem 1.2rem .3rem; }
    .bd-route__city { font-size: 1.35rem; }
    .bd-grid { gap: .55rem .6rem; padding-top: .65rem; }
    .bd-pass__quote { -webkit-line-clamp: 5; margin-top: .65rem; padding-top: .55rem; font-size: .82rem; }
    .bd-pass__stub { gap: .65rem; padding: .85rem 1.2rem 1rem; }
    .bd-barcode svg { height: 1.6rem; }
    .bd-checkin { padding: .82rem 1.2rem; }
}
@media (max-height: 660px) {
    .bd-cover__inner { gap: .55rem; padding-top: calc(.8rem + env(safe-area-inset-top)); }
    .bd-window { height: clamp(5.5rem, 17svh, 13rem); padding: .35rem; }
    .bd-window::after { inset: .35rem; }
    .bd-pass__top { padding: .5rem 1.1rem; }
    .bd-logo { width: 1.8rem; height: 1.8rem; font-size: .8rem; }
    .bd-route__code { font-size: clamp(2.1rem, 11vw, 2.5rem); }
    .bd-route__path { height: 2rem; }
    .bd-grid { gap: .45rem .6rem; margin-top: .35rem; }
    .bd-pass__guest { font-size: 1.15rem; }
    .bd-pass__main { padding-bottom: .8rem; }
    .bd-pass__quote { -webkit-line-clamp: 3; }
    .bd-pass__stub { gap: .5rem; padding: .7rem 1.2rem .85rem; }
    .bd-barcode svg { height: 1.3rem; }
    .bd-checkin { padding: .72rem 1.2rem; }
}