/* ==========================================================================
   Wedding Wrapped — Instagram-stories / Spotify-Wrapped style thank-you.
   Palette follows css/style.css: cream --white, ink --black, green --primary,
   Fraunces (sturdy soft serif) for big display type only; Lora for reading text and Jost for
   small labels (chosen for legibility on phones: sturdier strokes, larger sizes).
   Everything inside .stage is sized in container units (cqw/cqh) so the 9:16
   stage looks identical on a phone and as a centred "phone" on desktop.
   ========================================================================== */

:root {
    --cream: hsl(36, 83%, 95%);
    --ink: #14131c;
    --ink-2: #1f1d2b;
    --green: #3d5347;
    --green-dark: #26332c;
    --gold: #e6b86a;
    --blush: #f0c9b8;
    --u: 1cqw;
    --display: 'Fraunces', Georgia, serif;
    --serif: 'Lora', Georgia, serif;
    --sans: 'Jost', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    height: 100%;
    background: #0b0a10;
    color: var(--cream);
    overscroll-behavior: none;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* ---- stage ----------------------------------------------------------- */
.stage {
    position: relative;
    container-type: size;
    width: min(100vw, calc(100vh * 9 / 16));
    height: min(100vh, calc(100vw * 16 / 9));
    background: var(--ink);
    overflow: hidden;
}
@supports (height: 100dvh) {
    .stage {
        width: min(100vw, calc(100dvh * 9 / 16));
        height: min(100dvh, calc(100vw * 16 / 9));
    }
}
@media (min-width: 700px) and (min-height: 600px) {
    .stage { border-radius: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
}

/* ---- chrome: progress bars, mute, hint --------------------------------- */
.progress {
    position: absolute;
    z-index: 30;
    top: calc(var(--u) * 3);
    left: calc(var(--u) * 3);
    right: calc(var(--u) * 3);
    display: flex;
    gap: calc(var(--u) * 1.2);
    pointer-events: none;
    transition: opacity .25s;
}
.seg {
    flex: 1;
    height: calc(var(--u) * .8);
    min-height: 3px;
    background: rgba(255, 255, 255, .28);
    border-radius: 4px;
    overflow: hidden;
}
.seg > i {
    display: block;
    height: 100%;
    width: 100%;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
}
.seg.done > i { transform: scaleX(1); }

.chrome-btn {
    position: absolute;
    z-index: 31;
    top: calc(var(--u) * 7);
    right: calc(var(--u) * 3);
    width: calc(var(--u) * 10);
    height: calc(var(--u) * 10);
    min-width: 36px;
    min-height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: calc(var(--u) * 4.5);
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.chrome-btn .icon-off { display: none; }
.chrome-btn.muted .icon-on { display: none; }
.chrome-btn.muted .icon-off { display: inline; }
.stage.paused .progress,
.stage.paused .chrome-btn { opacity: 0; }

.tap-hint {
    position: absolute;
    z-index: 30;
    bottom: calc(var(--u) * 6);
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--sans); font-weight: 500;
    font-size: calc(var(--u) * 3.9);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
    opacity: 0;
    pointer-events: none;
}
.tap-hint.on { animation: hint 3.2s ease both; }
@keyframes hint { 0% { opacity: 0; } 20%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---- start screen --------------------------------------------------------- */
.start {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--u) * 8);
    background:
        radial-gradient(120% 80% at 50% 0%, #4d6b5b 0%, transparent 60%),
        linear-gradient(160deg, var(--green) 0%, var(--green-dark) 55%, var(--ink) 100%);
    transition: opacity .5s, visibility .5s;
}
.start.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.start-swan { width: calc(var(--u) * 26); height: auto; margin-bottom: calc(var(--u) * 6); animation: float 5s ease-in-out infinite; }
.start-label { font-family: var(--sans); font-weight: 500; letter-spacing: .28em; text-transform: uppercase; font-size: calc(var(--u) * 3.8); color: var(--gold); }
.start-title {
    margin: calc(var(--u) * 4) 0 calc(var(--u) * 9);
    font-weight: 700;
    font-size: calc(var(--u) * 17);
    line-height: .95;
    letter-spacing: -.01em;
    font-style: italic;
}
.start-btn {
    appearance: none;
    border: 0;
    border-radius: 100px;
    padding: calc(var(--u) * 4) calc(var(--u) * 11);
    font: 700 calc(var(--u) * 4.4) 'Lora', Georgia, serif;
    background: var(--cream);
    color: var(--green-dark);
    cursor: pointer;
    transition: transform .15s, opacity .3s;
}
.start-btn:active { transform: scale(.96); }
.start-btn:disabled { opacity: .55; cursor: default; }
.start-sound { margin-top: calc(var(--u) * 5); font-family: var(--sans); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; font-size: calc(var(--u) * 3.5); opacity: .9; }

/* ---- frames --------------------------------------------------------------- */
.frames { position: absolute; inset: 0; }
.frame {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--u) * 16) calc(var(--u) * 9) calc(var(--u) * 14);
    overflow: hidden;
    animation: frame-in .45s ease both;
}
.frame.leaving { animation: frame-out .35s ease both; pointer-events: none; }
@keyframes frame-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes frame-out { to { opacity: 0; } }

.t-green { background: radial-gradient(110% 70% at 80% 0%, #587a68 0%, transparent 55%), linear-gradient(165deg, var(--green) 0%, var(--green-dark) 100%); color: var(--cream); }
.t-ink   { background: radial-gradient(90% 60% at 10% 100%, #3a2f52 0%, transparent 60%), linear-gradient(170deg, var(--ink-2) 0%, var(--ink) 100%); color: var(--cream); }
.t-cream { background: radial-gradient(100% 60% at 100% 100%, #f6d9c4 0%, transparent 55%), var(--cream); color: var(--green-dark); }
.t-gold  { background: linear-gradient(160deg, #f1cf93 0%, #d79d4b 100%); color: var(--ink); }
.t-party { background: radial-gradient(90% 55% at 85% 0%, #6b3f86 0%, transparent 62%), radial-gradient(80% 50% at 0% 100%, rgba(214, 120, 70, .4) 0%, transparent 60%), linear-gradient(170deg, #211a38 0%, #120f20 100%); color: var(--cream); }
.t-music { background: radial-gradient(90% 55% at 12% 0%, rgba(31, 111, 122, .55) 0%, transparent 62%), radial-gradient(80% 50% at 100% 100%, rgba(176, 58, 138, .45) 0%, transparent 60%), linear-gradient(170deg, #161a2e 0%, #0e1020 100%); color: var(--cream); }
.t-rose  { background: linear-gradient(165deg, #6b3a4a 0%, #2b1a2b 100%); color: var(--cream); }

.bg {
    position: absolute;
    inset: -4%;
    background-size: cover;
    background-position: center;
    animation: kenburns 14s ease-out both;
    z-index: 0;
}
.frame.photo { color: #fff; }
.frame.photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10, 10, 16, .55) 0%, rgba(10, 10, 16, .25) 35%, rgba(10, 10, 16, .78) 100%);
}
.frame > *:not(.bg):not(.slides):not(video):not(.bubbles):not(.mascot-stage):not(.vglow) { position: relative; z-index: 2; }
/* hold-to-pause freezes every CSS animation */
.stage.paused * { animation-play-state: paused !important; }

@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }

.frame.photo .label, .frame.photo .text, .frame.photo .big { text-shadow: 0 1px 14px rgba(0, 0, 0, .55), 0 0 3px rgba(0, 0, 0, .4); }

/* ---- type ------------------------------------------------------------------- */
.label {
    font-family: var(--sans); font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: calc(var(--u) * 3.9);
    opacity: .95;
    margin-bottom: calc(var(--u) * 4);
}
.t-cream .label, .t-gold .label { opacity: .85; }
.big, .start-title, .recap h3, .sign { font-family: var(--display); font-variation-settings: 'opsz' 9; }
.sign { font-weight: 600; }
.big {
    font-weight: 700;
    font-size: calc(var(--u) * 15);
    line-height: 1;
    letter-spacing: -.02em;
    margin: 0 0 calc(var(--u) * 4);
}
.big.xl { font-size: calc(var(--u) * 19); }
.big.md.fit { font-size: calc(var(--u) * 8.6); }
.big.sm { font-size: calc(var(--u) * 8.5); line-height: 1.12; letter-spacing: -.01em; }
.big.md { font-size: calc(var(--u) * 11); line-height: 1.05; }
.big em, .accent { font-style: italic; color: var(--gold); }
.t-cream .big em, .t-cream .accent, .t-gold .big em, .t-gold .accent { color: #b0603a; }
.t-gold .accent { color: var(--green-dark); }
.text {
    font-weight: 500;
    font-size: calc(var(--u) * 5.2);
    line-height: 1.35;
    margin: 0 0 calc(var(--u) * 3);
    max-width: 92%;
}
.text.sm { font-size: calc(var(--u) * 4.5); opacity: .95; }
.center { text-align: center; align-items: center; }
.foot-note { font-family: var(--sans); font-weight: 500; font-size: calc(var(--u) * 3.6); letter-spacing: .06em; opacity: .85; margin-top: calc(var(--u) * 6); }

/* entrance animations: add class 'a' plus --d delay */
.a { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
.a-pop { animation: pop .7s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: var(--d, 0s); }
.a-fade { animation: frame-in 1s ease both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(calc(var(--u) * 6)); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -2)); } }

/* ---- drinks report ---------------------------------------------------------------- */
.bubbles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bubbles i { position: absolute; bottom: calc(var(--u) * -5); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .07); animation: bubble-up var(--t) linear infinite; animation-delay: var(--d); }
@keyframes bubble-up { 0% { transform: translateY(0) scale(.8); opacity: 0; } 12% { opacity: .85; } 100% { transform: translateY(calc(var(--u) * -185)) scale(1.15); opacity: 0; } }
.drink-list { display: flex; flex-direction: column; gap: calc(var(--u) * 2.2); margin-top: calc(var(--u) * 3); }
.drink { display: grid; grid-template-columns: calc(var(--u) * 12.5) 1fr auto; align-items: center; gap: calc(var(--u) * 3.6); }
.drink .dicon { display: block; width: calc(var(--u) * 12.5); height: calc(var(--u) * 12.5); overflow: visible; transform-origin: 50% 90%; animation: wob 3.4s ease-in-out infinite; animation-delay: var(--d); }
.dicon .o { fill: none; stroke: var(--cream); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dicon .liq { transform-box: fill-box; transform-origin: 50% 100%; animation: liq-fill 1.1s cubic-bezier(.3, .8, .3, 1) both; animation-delay: calc(var(--d) + .3s); }
.dicon .bub circle { animation: fizz 1.8s ease-in infinite; }
.dicon .bub circle:nth-child(2) { animation-delay: .5s; } .dicon .bub circle:nth-child(3) { animation-delay: 1s; } .dicon .bub circle:nth-child(4) { animation-delay: 1.4s; }
@keyframes liq-fill { from { transform: scaleY(0); } to { transform: none; } }
@keyframes wob { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes fizz { 0% { transform: translateY(5px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-9px); opacity: 0; } }
.drink .nm { font-weight: 700; font-size: calc(var(--u) * 4.8); line-height: 1.1; }
.drink .nm small { display: block; margin-top: calc(var(--u) * .5); font-family: var(--sans); font-weight: 500; font-size: calc(var(--u) * 3.2); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.drink .bar { height: calc(var(--u) * 2.2); margin-top: calc(var(--u) * 1.4); border-radius: 100px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.drink .bar i { display: block; height: 100%; width: var(--w); border-radius: 100px; background: var(--c); transform-origin: left; animation: grow 1.2s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d) + .5s); }
.drink .ct { min-width: calc(var(--u) * 14); text-align: right; font-family: 'DM Serif Display', Georgia, serif; font-size: calc(var(--u) * 7); line-height: 1; font-variant-numeric: tabular-nums; }
.drink.top .ct { color: var(--gold); }

/* ---- the soundtrack ------------------------------------------------------------ */
.eq { display: inline-flex; align-items: flex-end; gap: calc(var(--u) * .8); height: calc(var(--u) * 3.6); margin-right: calc(var(--u) * 2.6); vertical-align: -.1em; }
.eq i { display: block; width: calc(var(--u) * .9); border-radius: 2px; background: var(--gold); height: 100%; transform-origin: bottom; animation: eq 1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.17s); }
@keyframes eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.m-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 3); }
.ms .km.sm { font-size: calc(var(--u) * 12); margin-bottom: 0; color: var(--gold); }
.ms .ml { font-family: var(--sans); font-weight: 600; font-size: calc(var(--u) * 3.3); letter-spacing: .1em; text-transform: uppercase; opacity: .92; margin-top: calc(var(--u) * 1); }
.gbar { display: flex; gap: calc(var(--u) * .8); height: calc(var(--u) * 6); margin-top: calc(var(--u) * 5); border-radius: 100px; overflow: hidden; }
.gbar i { display: block; background: var(--c); transform-origin: left; animation: grow 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d); border-radius: 100px; }
.glegend { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); margin-top: calc(var(--u) * 3.4); }
.gl { display: grid; grid-template-columns: calc(var(--u) * 3.4) 1fr auto; align-items: center; gap: calc(var(--u) * 2.6); font-size: calc(var(--u) * 4.2); font-weight: 500; }
.gl .sw { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); border-radius: 50%; }
.gl b { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: calc(var(--u) * 5.2); }
.facts { list-style: none; margin: calc(var(--u) * 4.6) 0 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.facts li { padding: calc(var(--u) * 1.9) calc(var(--u) * 3.4); border-radius: calc(var(--u) * 3); background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18); font-size: calc(var(--u) * 3.9); line-height: 1.3; }
.m-teaser { margin: calc(var(--u) * 4) 0 0; font-style: italic; font-size: calc(var(--u) * 4.2); color: var(--gold); }

/* ---- final slide: a music app's "Now playing" screen ---------------------------------- */
.frame.np { padding: calc(var(--u) * 12) calc(var(--u) * 6.5) calc(var(--u) * 3.6); justify-content: flex-start; font-family: var(--sans); }
.frame.np::before { background: linear-gradient(180deg, rgba(8, 8, 14, .35) 0%, rgba(8, 8, 14, .55) 55%, rgba(8, 8, 14, .85) 100%); }
.bg.np-blur { filter: blur(26px) brightness(.62) saturate(1.35); inset: -10%; animation: none; }
.np-top { display: grid; grid-template-columns: calc(var(--u) * 8) 1fr calc(var(--u) * 8); align-items: center; gap: calc(var(--u) * 2); }
.np-top svg { display: block; width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
.np-dots { visibility: hidden; } /* the sound button sits in this corner */
.np-from { text-align: center; min-width: 0; }
.np-from small { display: block; font-weight: 500; font-size: calc(var(--u) * 2.9); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.np-from b { display: block; margin-top: calc(var(--u) * .6); font-weight: 600; font-size: calc(var(--u) * 3.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-art { width: min(calc(var(--u) * 47), 100%); aspect-ratio: 1; margin: calc(var(--u) * 2.8) auto 0; border-radius: calc(var(--u) * 1.6); overflow: hidden; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0, 0, 0, .55); background: #222; }
.np-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.np-meta { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 3.4); }
.np-names { min-width: 0; }
.np-title { font-weight: 700; font-size: calc(var(--u) * 6.2); line-height: 1.1; letter-spacing: -.01em; }
.np-artist { margin-top: calc(var(--u) * .8); font-weight: 500; font-size: calc(var(--u) * 4.2); color: rgba(255, 255, 255, .7); text-shadow: none; }
.np-like svg { display: block; width: calc(var(--u) * 6.8); height: calc(var(--u) * 6.8); color: var(--gold); }
.np-time { margin-top: calc(var(--u) * 2.6); }
.np-bar { position: relative; height: calc(var(--u) * 1.1); border-radius: 99px; background: rgba(255, 255, 255, .28); }
.np-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: #fff; transition: width .25s linear; }
.np-bar b { position: absolute; top: 50%; left: 0; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); margin: calc(var(--u) * -1.6) 0 0 calc(var(--u) * -1.6); border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); transition: left .25s linear; }
.np-t { display: flex; justify-content: space-between; margin-top: calc(var(--u) * 1.8); font-size: calc(var(--u) * 3.1); font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .72); text-shadow: none; }
.np-ctrl { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--u) * 1); }
.np-ctrl svg { display: block; }
.np-sm svg { width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); opacity: .8; }
.np-sk { appearance: none; background: none; border: 0; padding: calc(var(--u) * 1.4); margin: calc(var(--u) * -1.4); color: inherit; cursor: pointer; }
.np-sk:active { opacity: .6; }
.np-sk svg { width: calc(var(--u) * 8.4); height: calc(var(--u) * 8.4); }
.np-play { appearance: none; border: 0; padding: 0; width: calc(var(--u) * 13.4); height: calc(var(--u) * 13.4); border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111; cursor: pointer; }
.np-play svg { width: calc(var(--u) * 8.2); height: calc(var(--u) * 8.2); }
.np-links { display: flex; flex-direction: column; gap: calc(var(--u) * 1.8); margin-top: calc(var(--u) * 3.4); }
.np-link { appearance: none; display: grid; grid-template-columns: calc(var(--u) * 7.8) 1fr calc(var(--u) * 5); align-items: center; gap: calc(var(--u) * 3.2); width: 100%; min-height: calc(var(--u) * 10.6); padding: calc(var(--u) * 1.2) calc(var(--u) * 3.2); border-radius: calc(var(--u) * 2.2); border: 1px solid rgba(255, 255, 255, .24); background: rgba(24, 24, 32, .72); color: #fff; font: 600 calc(var(--u) * 4.2) var(--sans); text-align: left; text-decoration: none; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.np-link:active { transform: scale(.985); background: rgba(60, 60, 74, .8); }
.np-link .ico { width: calc(var(--u) * 7.8); height: calc(var(--u) * 7.8); border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #14131c; }
.np-link .ico svg { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); }
.np-link .chev svg { display: block; width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); opacity: .7; }

/* ---- "in motion" clip: framed video that widens, over a blurred glow of itself ---------- */
.clip-slide { background: #0e0d14; }
.vglow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; filter: blur(16px) brightness(.6) saturate(1.4); transform: scale(1.25); pointer-events: none; }
.vzone { position: relative; width: calc(var(--u) * 88); height: calc(var(--u) * 88); margin: calc(var(--u) * 3) auto 0; display: flex; align-items: center; justify-content: center; }
.vframe { width: 100%; aspect-ratio: var(--ar, 1.7778); overflow: hidden; border-radius: calc(var(--u) * 2.4); background: #000; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0, 0, 0, .65); }
.vframe video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- the meal: menu card + courses ------------------------------------------------ */
@font-face { font-family: 'AlexBrush'; src: url('../fonts/alex/AlexBrush-Regular.ttf') format('truetype'); font-display: swap; }
.menu-wrap { width: calc(var(--u) * 56); margin: calc(var(--u) * 3) auto 0; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(0, 0, 0, .5)); }
.menu-card { position: relative; border-radius: calc(var(--u) * 1.2); overflow: hidden; opacity: 0; animation: menu-in 1.5s cubic-bezier(.2, .9, .25, 1) both, menu-float 4.2s ease-in-out infinite; animation-delay: .4s, 2s; }
.menu-img { display: block; width: 100%; height: auto; }
/* Covers the sample name printed on the graphic and writes this guest's own names there instead. */
.menu-tag { position: absolute; left: 6.94%; top: 11.46%; width: 13.7%; height: 34.9%; background: rgb(210, 225, 218); display: flex; align-items: center; justify-content: center; }
.menu-tag span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'AlexBrush', 'Snell Roundhand', cursive; color: #46584d; line-height: 1; white-space: nowrap; clip-path: inset(0 0 100% 0); animation: tag-write 1.8s ease-out both; animation-delay: 1.9s; }
.menu-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%); transform: translateX(-130%); animation: menu-shine 1.3s ease both; animation-delay: 3.4s; pointer-events: none; }
@keyframes menu-in { 0% { opacity: 0; transform: translateY(calc(var(--u) * 80)) rotate(8deg) scale(.88); } 55% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1); } }
@keyframes menu-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--u) * -1.2); } }
@keyframes tag-write { to { clip-path: inset(0 0 0 0); } }
@keyframes menu-shine { to { transform: translateX(130%); } }
.course-list { display: flex; flex-direction: column; gap: calc(var(--u) * 1.8); margin-top: calc(var(--u) * 3); }
.course { display: grid; grid-template-columns: calc(var(--u) * 25.5) 1fr; align-items: center; gap: calc(var(--u) * 3.4); }
.course .art { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.5); height: calc(var(--u) * 17); }
.course .art.plate img { width: 100%; height: auto; display: block; opacity: 0; animation: plate-in 1.15s cubic-bezier(.2, 1.15, .35, 1) both; animation-delay: var(--d); filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.6) rgba(0, 0, 0, .45)); }
@keyframes plate-in { 0% { opacity: 0; transform: translateX(calc(var(--u) * -36)) rotate(-230deg) scale(.4); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.course .cn { font-family: var(--sans); font-weight: 600; font-size: calc(var(--u) * 3.6); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.course .cd { margin-top: calc(var(--u) * .6); font-size: calc(var(--u) * 4.3); line-height: 1.25; font-weight: 500; }
.course-note { margin-top: calc(var(--u) * 3.4); padding: calc(var(--u) * 2.6) calc(var(--u) * 3.6); border-radius: calc(var(--u) * 4); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); font-style: italic; font-size: calc(var(--u) * 4.2); line-height: 1.35; }

/* ---- mascot joke ---------------------------------------------------------------- */
.mascot-stage { position: relative; /* no z-index: Nelly's multiply blend needs the slide background behind her */ height: calc(var(--u) * 68); margin: calc(var(--u) * 1) 0 calc(var(--u) * 2); }
.mascot-stage img { position: absolute; left: 50%; top: 50%; }
.m-swan { width: calc(var(--u) * 54); transform: translate(-50%, -50%); opacity: 0; animation: m-swan 3.7s ease both; animation-delay: .2s; }
@keyframes m-swan {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
    14%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    68%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
    76%  { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg); }
    100% { opacity: 0; transform: translate(-215%, -95%) rotate(-48deg); }
}
.m-nelly { width: calc(var(--u) * 82); transform: translate(-50%, -50%); mix-blend-mode: multiply; opacity: 0; animation: m-nelly 1s cubic-bezier(.2, 1.3, .4, 1) both, m-bob 3.6s ease-in-out infinite; animation-delay: 4.7s, 6s; }
@keyframes m-nelly { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-10deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
/* bobs with the separate `translate`/`rotate` properties so it doesn't fight the pop-in's transform */
@keyframes m-bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 calc(var(--u) * -1.4); rotate: -.8deg; } }
.m-lines { display: grid; min-height: calc(var(--u) * 14); }
.m-lines > * { grid-area: 1 / 1; margin: 0; }
.m-no { opacity: 0; animation: m-phase 1.9s ease both; animation-delay: 3s; }
@keyframes m-phase { 0% { opacity: 0; transform: translateY(calc(var(--u) * 3)); } 16%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(calc(var(--u) * -2)); } }
.m-this { opacity: 0; animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: 4.85s; }
.m-meet { opacity: 0; animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: 6s; margin-top: calc(var(--u) * 1); }
.m-cocktail { display: flex; align-items: center; gap: calc(var(--u) * 3.6); padding: calc(var(--u) * 2.6) calc(var(--u) * 3.6); border-radius: calc(var(--u) * 4); background: rgba(38, 51, 44, .09); border: 1px solid rgba(38, 51, 44, .18); font-size: calc(var(--u) * 4); line-height: 1.3; opacity: 0; animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: 6.6s; }
.m-cocktail svg { flex: none; width: calc(var(--u) * 13); height: calc(var(--u) * 13); overflow: visible; }
.m-cocktail .o { stroke: var(--green-dark); }
.m-cocktail span { font-size: calc(var(--u) * 6); font-weight: 700; line-height: 1.1; }

/* never let a tall slide squash fixed-height pieces (bars, frames, icons) to nothing */
.frame > * { flex-shrink: 0; }

/* ---- cover (photo-led) ------------------------------------------------------ */
.frame.cover-photo::before { background: linear-gradient(180deg, rgba(10, 10, 16, .3) 0%, rgba(10, 10, 16, 0) 30%, rgba(10, 10, 16, .55) 60%, rgba(10, 10, 16, .9) 100%); }
.bg.dim { filter: grayscale(.85) brightness(.8); }

/* ---- journey ---------------------------------------------------------------- */
.arc-wrap { position: relative; width: 100%; height: calc(var(--u) * 52); margin: calc(var(--u) * 4) 0 calc(var(--u) * 6); }
.arc-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arc-wrap path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.arc-pt { position: absolute; display: flex; flex-direction: column; align-items: center; font-family: var(--sans); font-weight: 500; font-size: calc(var(--u) * 3.8); letter-spacing: .1em; text-transform: uppercase; }
.arc-pt b { font-family: var(--serif); font-size: calc(var(--u) * 9); line-height: 1; margin-bottom: calc(var(--u) * 1); }
.arc-pt.from { left: 0; bottom: 0; }
.arc-pt.to   { right: 0; top: 0; }
.plane { position: absolute; left: 0; top: 0; margin: calc(var(--u) * -4) 0 0 calc(var(--u) * -4); font-size: calc(var(--u) * 8); opacity: 0; z-index: 3; will-change: transform; }
.km-row { display: flex; gap: calc(var(--u) * 5); }
.km-col { flex: 1; min-width: 0; }
.km-col .who { font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; font-size: calc(var(--u) * 3.8); opacity: .95; margin-bottom: calc(var(--u) * 1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km.sm { font-size: calc(var(--u) * 12); }
.km-row.n3 .km.sm { font-size: calc(var(--u) * 7); }
.km-row.n3 .km.sm small { font-size: calc(var(--u) * 3.2); }
.arc-wrap.n3 .arc-pt { font-size: calc(var(--u) * 2.5); letter-spacing: .02em; }
.arc-wrap.n3 .arc-pt b { font-size: calc(var(--u) * 7); }
.km.sm small { font-size: calc(var(--u) * 4.5); }
.km.md { font-size: calc(var(--u) * 16); }
.km { margin-bottom: calc(var(--u) * 2); font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: calc(var(--u) * 22); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.km small { font-size: calc(var(--u) * 7); font-weight: 400; font-style: italic; margin-left: calc(var(--u) * 1.5); }
.badge { display: inline-block; margin-top: calc(var(--u) * 3); padding: calc(var(--u) * 2) calc(var(--u) * 4.5); border-radius: 100px; background: var(--gold); color: var(--ink); font-family: var(--sans); font-weight: 500; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: calc(var(--u) * 3.7); }

/* ---- country bars ------------------------------------------------------------ */
.bars { display: flex; flex-direction: column; gap: calc(var(--u) * 3.2); margin-top: calc(var(--u) * 5); }
.bar-row { display: grid; grid-template-columns: calc(var(--u) * 9) 1fr calc(var(--u) * 11); align-items: end; gap: calc(var(--u) * 3); font-size: calc(var(--u) * 4.2); }
.bar-row .flag { font-size: calc(var(--u) * 7); text-align: center; }
.bar-track { position: relative; height: calc(var(--u) * 4); border-radius: 100px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 100px; background: linear-gradient(90deg, var(--gold), #f8dca8); width: var(--w); transform-origin: left; animation: grow 1.2s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
.bar-row.me .bar-fill { background: linear-gradient(90deg, #fff, var(--blush)); }
.bar-row .n { text-align: right; font-family: 'DM Serif Display', Georgia, serif; font-variant-numeric: tabular-nums; font-weight: 400; font-size: calc(var(--u) * 5); }
.bar-mid { display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.bar-name { font-family: var(--sans); font-weight: 500; font-size: calc(var(--u) * 3.8); letter-spacing: .1em; text-transform: uppercase; opacity: .95; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- event chips ------------------------------------------------------------- */
.ev-list { display: flex; flex-direction: column; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 5); }
.ev { display: flex; align-items: center; gap: calc(var(--u) * 4.5); padding: calc(var(--u) * 4.5) calc(var(--u) * 5); border-radius: calc(var(--u) * 4); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
.ev .tick { flex: none; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--u) * 5.5); background: var(--gold); color: var(--ink); font-weight: 700; }
.ev.no { opacity: .5; }
.ev.no .tick { background: transparent; border: 1px dashed rgba(255, 255, 255, .5); color: transparent; }
.ev b { display: block; font-size: calc(var(--u) * 5); }
.ev span { font-family: var(--sans); font-weight: 500; letter-spacing: .08em; font-size: calc(var(--u) * 3.7); text-transform: uppercase; opacity: .92; }

/* ---- table ------------------------------------------------------------------- */
.table-number { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: calc(var(--u) * 44); line-height: .9; color: var(--gold); margin: calc(var(--u) * 2) 0; }
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2.2); margin-top: calc(var(--u) * 3); }
.chip { padding: calc(var(--u) * 1.8) calc(var(--u) * 3.8); border-radius: 100px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .28); font-size: calc(var(--u) * 4.2); }

/* ---- photo slideshow (carousel / honeymoon) ---------------------------------- */
.slides { position: absolute; inset: 0; z-index: 0; }
.slides img, .slides video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: slide-in 1.1s ease both, kenburns 6s ease-out both; animation-delay: calc(var(--i) * var(--step, 1.7s)); }
@keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
.frame.show-frame { justify-content: flex-end; }
.frame.show-frame::before { background: linear-gradient(180deg, rgba(10, 10, 16, .35) 0%, rgba(10, 10, 16, 0) 28%, rgba(10, 10, 16, .55) 55%, rgba(10, 10, 16, .92) 100%); }
/* caption at the top so it doesn't sit over the couple (subjects tend to be in the lower half) */
.frame.caption-top { justify-content: flex-start; padding-top: calc(var(--u) * 17); }
.frame.caption-top::before { background: linear-gradient(180deg, rgba(10, 10, 16, .78) 0%, rgba(10, 10, 16, .35) 28%, rgba(10, 10, 16, 0) 50%, rgba(10, 10, 16, .25) 100%); }

/* ---- recap card -------------------------------------------------------------- */
.recap { margin-top: calc(var(--u) * 3); padding: calc(var(--u) * 7) calc(var(--u) * 7); border-radius: calc(var(--u) * 5); background: var(--cream); color: var(--green-dark); box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(0, 0, 0, .35); transform: rotate(-1.5deg); }
.recap h3 { margin: 0 0 calc(var(--u) * 1); font-size: calc(var(--u) * 8.5); font-style: italic; line-height: 1; }
.recap .sub { font-family: var(--sans); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; font-size: calc(var(--u) * 3.5); opacity: .8; margin-bottom: calc(var(--u) * 5); }
.recap dl { margin: 0; }
.recap .row { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 3); padding: calc(var(--u) * 2.6) 0; border-top: 1px dashed rgba(38, 51, 44, .3); }
.recap dt { font-family: var(--sans); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: calc(var(--u) * 3.6); }
.recap dd { margin: 0; text-align: right; font-size: calc(var(--u) * 4.6); font-weight: 700; }

/* ---- note -------------------------------------------------------------------- */
.note { font-weight: 500; font-size: calc(var(--u) * 5.4); line-height: 1.4; font-style: italic; margin: 0 0 calc(var(--u) * 6); white-space: pre-line; }
.note.long { font-size: calc(var(--u) * 4.7); }
.sign { font-size: calc(var(--u) * 7); font-style: italic; color: var(--gold); }
.frame.photo-framed { padding: calc(var(--u) * 15) calc(var(--u) * 6) calc(var(--u) * 11); justify-content: flex-start; }
.frame.photo-framed::before { background: linear-gradient(180deg, rgba(10, 10, 16, .5) 0%, rgba(10, 10, 16, .1) 30%, rgba(10, 10, 16, .1) 70%, rgba(10, 10, 16, .5) 100%); }
.pf { flex: 1 1 0; min-height: 0; display: grid; grid-template: 100% / 100%; place-items: center; }
.pf-media { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; min-width: 0; min-height: 0; object-fit: contain; border: calc(var(--u) * 1.1) solid #fff; border-radius: calc(var(--u) * 1.8); background: #000; box-shadow: 0 calc(var(--u) * 2.5) calc(var(--u) * 8) rgba(0, 0, 0, .6); }

/* ---- final ------------------------------------------------------------------- */
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; }

.error { text-align: center; align-items: center; }
.error a { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
    .np-bar i, .np-bar b { transition: none; }
    .eq i, .gbar i { animation-duration: .01s !important; animation-delay: 0s !important; }
    .menu-card, .menu-tag span, .course .art img { animation-duration: .01s !important; animation-delay: 0s !important; }
    .menu-card::after { display: none; }
    .m-swan { display: none; } .m-no { display: none; } .m-nelly { animation: m-nelly .01s 0s both !important; }
    .bubbles { display: none; }
    .drink .dicon, .dicon .liq, .dicon .bub circle, .drink .bar i { animation-duration: .01s !important; animation-delay: 0s !important; }
    .a, .a-pop, .a-fade, .bg, .plane, .bar-fill, .cover .swan, .start-swan { animation-duration: .01s !important; animation-delay: 0s !important; }
    .slides img { animation-duration: .5s !important; }
}