/* ═══════════════════════════════════════════════════════════
   CINEMATIC FILM — "Cinematic Love Story"
   Charcoal screen · warm cream · cinema red · vintage gold
   Fonts: Bebas Neue (poster display) · Playfair Display (serif) · Courier Prime (credits)
═══════════════════════════════════════════════════════════ */
:root {
    --bg:           #0d0b0a;
    --bg-2:         #14110f;
    --surface:      #1b1714;
    --surface-2:    #241e1a;
    --text:         #f2e8d5;
    --muted:        #b9aa91;
    --accent:       #c9a45c;   /* vintage gold */
    --accent-light: #e6cf95;
    --accent-dark:  #7a5f2e;
    --red:          #a8323a;   /* muted cinema red */
    --red-light:    #d0575c;
    --red-dark:     #6e1f25;
    --paper:        #efe4cb;   /* ticket stock */
    --ink:          #1f1915;
    --line:         rgba(201,164,92,.34);
    --line-soft:    rgba(201,164,92,.16);
    --display:      'Bebas Neue', 'Oswald', Impact, sans-serif;
    --serif:        'Playfair Display', Georgia, serif;
    --mono:         'Courier Prime', 'Courier New', monospace;
    --frame-w:      min(100vw, 640px);
    --pad-section:  calc(var(--frame-w) * .24 + 18px);
    --ease-out:     cubic-bezier(.16, 1, .3, 1);
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--serif);
    font-size: 1rem;
    background:
        radial-gradient(ellipse 120% 60% at 50% -10%, rgba(201,164,92,.07), transparent 60%),
        radial-gradient(ellipse 90% 50% at 50% 110%, rgba(168,50,58,.08), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    width: 100%;
}
body.no-scroll { overflow: hidden; height: 100vh; }
img { max-width: 100%; display: block; }
main { overflow: hidden; position: relative; }
::selection { background: var(--red); color: var(--text); }

/* ════════════════════════════
   AMBIENT: grain + vignette flicker
════════════════════════════ */
.cine-grain {
    position: fixed; top: -20%; left: -20%; width: 140%; height: 140%;
    z-index: 10060; pointer-events: none; opacity: .085;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainShift .8s steps(6) infinite;
    will-change: transform;
}
@keyframes grainShift {
    0%   { transform: translate(0, 0); }
    17%  { transform: translate(-8.57%, 6.43%); }
    33%  { transform: translate(6.43%, -10.71%); }
    50%  { transform: translate(-12.86%, -4.29%); }
    67%  { transform: translate(10.71%, 8.57%); }
    83%  { transform: translate(-4.29%, 12.86%); }
    100% { transform: translate(0, 0); }
}
.cine-vignette {
    position: fixed; inset: 0; z-index: 10055; pointer-events: none;
    background: radial-gradient(ellipse 85% 75% at 50% 48%, transparent 55%, rgba(0,0,0,.5) 100%);
    animation: projFlicker 5.5s infinite;
}
@keyframes projFlicker {
    0%, 100% { opacity: 1; }
    8%  { opacity: .86; } 9% { opacity: 1; }
    37% { opacity: .93; } 38% { opacity: 1; }
    61% { opacity: .82; } 62% { opacity: .97; } 63% { opacity: .88; } 64% { opacity: 1; }
}
.is-hidden .cine-grain, .is-hidden .cine-vignette, .is-hidden .intro-beam { animation-play-state: paused; }

/* ── Section frame + injected bingkai (SVG assets) ── */
.section-frame {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--pad-section) 0;
}
.section-frame-top, .section-frame-bottom,
.intro-frame-top, .intro-frame-bottom {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: var(--frame-w); line-height: 0;
    pointer-events: none; user-select: none; z-index: 1;
    display: block;
}
.section-frame-top, .intro-frame-top { top: 0; }
.section-frame-bottom, .intro-frame-bottom { bottom: 0; }
.section-frame-top img, .section-frame-bottom img { width: 100%; height: auto; display: block; }
.intro-frame-top, .intro-frame-bottom { height: auto; max-height: 40vh; object-fit: cover; }
.intro-frame-top { object-position: top; }
.intro-frame-bottom { object-position: bottom; }
.divider { display: block; width: min(260px, 74%); height: auto; margin: 0 auto; }

/* ── Container ── */
.container {
    width: 100%; max-width: 760px; margin: 0 auto; padding: 0 1.5rem;
    position: relative; z-index: 2;
}

/* ── Title card heading ── */
.section-head { text-align: center; margin-bottom: 2.25rem; }
.scene-label {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--mono); font-weight: 700;
    font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--text);
    padding: .38rem .85rem .38rem .7rem;
    background: linear-gradient(180deg, rgba(168,50,58,.92), rgba(110,31,37,.92));
    border: 1px solid rgba(230,207,149,.4);
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
    margin-bottom: 1rem;
}
.scene-label i { width: 14px; height: 1px; background: currentColor; opacity: .7; }
.scene-ico { width: 16px; height: 16px; color: var(--accent-light); flex: none; }
.eyebrow {
    display: block;
    font-family: var(--mono); font-weight: 400;
    font-size: .74rem; letter-spacing: .38em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .35rem;
}
.section-title {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.15; color: var(--text);
    margin-bottom: .9rem;
    text-shadow: 0 0 30px rgba(230,207,149,.15);
}

/* ════════════════════════════
   BUTTONS
════════════════════════════ */
.btn-cine {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    position: relative; overflow: hidden;
    padding: .95rem 2.1rem;
    background: linear-gradient(180deg, #b93b43 0%, var(--red) 50%, var(--red-dark) 100%);
    color: var(--text);
    border: 1px solid rgba(230,207,149,.55); border-radius: 4px; cursor: pointer;
    font-family: var(--display); font-weight: 400;
    font-size: 1.12rem; letter-spacing: .2em; text-transform: uppercase; line-height: 1;
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line), 0 14px 34px rgba(168,50,58,.35);
    transition: transform .3s var(--ease-out), box-shadow .3s, filter .3s;
}
.btn-cine::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255,240,210,.4), transparent);
    transform: skewX(-20deg);
    animation: btnSheen 4.5s ease-in-out infinite;
}
@keyframes btnSheen { 0%, 60% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(475%) skewX(-20deg); } }
.btn-cine:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-cine:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent-light), 0 0 24px rgba(230,207,149,.4);
}
.btn-cine:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.btn-cine.is-sent { background: linear-gradient(180deg, #5f9a6b, #3d6e48); }
.btn-block { width: 100%; }

/* ════════════════════════════
   INTRO / COVER
════════════════════════════ */
.intro {
    position: fixed; inset: 0; z-index: 10000;
    background: radial-gradient(ellipse 90% 60% at 50% 40%, #1d1814 0%, var(--bg) 72%);
    display: flex; align-items: center; justify-content: center;
    text-align: center; overflow: hidden auto;
    transition: opacity .3s ease;
}
.intro-beam {
    position: absolute; top: -10%; left: 50%; width: 160%; height: 120%;
    transform-origin: 50% 0;
    transform: translateX(-50%);
    background: conic-gradient(from 165deg at 50% 0%, transparent 0deg, rgba(255,240,210,.09) 12deg, rgba(255,240,210,.14) 15deg, rgba(255,240,210,.09) 18deg, transparent 30deg);
    pointer-events: none;
    animation: beamSway 9s ease-in-out infinite alternate;
}
@keyframes beamSway {
    from { transform: translateX(-50%) rotate(-4deg); opacity: .8; }
    to   { transform: translateX(-50%) rotate(4deg);  opacity: 1; }
}
.intro-content {
    position: relative; z-index: 2;
    width: 100%; max-width: 420px;
    padding: calc(var(--frame-w) * .17) 22px calc(var(--frame-w) * .22); margin: auto;
}
.intro-presents {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .4rem;
}
.intro-ornamen { width: min(54%, 184px); height: auto; margin: 0 auto 6px; }

/* Clapper-slate monogram */
.slate-seal {
    width: 112px; margin: 0 auto 1rem; position: relative;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.5));
}
.slate-top {
    height: 13px; border-radius: 2px 2px 0 0;
    background: repeating-linear-gradient(-55deg, var(--text) 0 8px, #15110e 8px 16px);
    border: 1px solid var(--accent);
    transform-origin: 3px 100%; transform: rotate(-10deg);
    margin-bottom: 2px;
}
.slate-body {
    background: linear-gradient(180deg, #1d1814, #110e0c);
    border: 1px solid var(--accent); border-radius: 0 0 4px 4px;
    padding: .25rem .5rem .35rem;
    display: flex; flex-direction: column; align-items: center;
}
.slate-body small {
    font-family: var(--mono); font-size: .52rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--line-soft); width: 100%; padding-bottom: 1px;
}
.slate-body span {
    font-family: var(--display); font-size: 2.1rem; line-height: 1.05; letter-spacing: .12em;
    color: var(--accent-light); padding-left: .12em;
}
.slate-seal.small { width: 80px; }
.slate-seal.small .slate-body span { font-size: 1.6rem; }

.intro-subtitle {
    font-family: var(--mono); font-weight: 700;
    font-size: .74rem; letter-spacing: .5em; text-transform: uppercase;
    color: var(--red-light); margin-bottom: .3rem; padding-left: .5em;
}
.intro-names {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(2.6rem, 13vw, 3.8rem); line-height: .95; letter-spacing: .04em;
    color: var(--text); margin-bottom: 1.2rem; overflow-wrap: anywhere;
    text-shadow: 0 0 40px rgba(230,207,149,.18);
}
.intro-names em {
    display: block; font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: .55em; color: var(--accent); line-height: 1.2; letter-spacing: 0;
}

/* Guest ticket (admit one) */
.guest-ticket {
    display: flex; max-width: 330px; margin: 0 auto 1.6rem;
    background: var(--paper); color: var(--ink);
    border-radius: 6px; position: relative; text-align: left;
    box-shadow: 0 18px 40px rgba(0,0,0,.55);
    -webkit-mask: radial-gradient(circle 8px at calc(100% - 66px) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle 8px at calc(100% - 66px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle 8px at calc(100% - 66px) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle 8px at calc(100% - 66px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.ticket-main { flex: 1; min-width: 0; padding: .85rem 1rem .9rem 1.1rem; border-right: 2px dashed rgba(31,25,21,.3); }
.to-label { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: #6b5a45; }
.guest-name {
    font-family: var(--serif); font-weight: 600; font-style: italic;
    font-size: clamp(1.2rem, 5.2vw, 1.45rem); line-height: 1.25;
    margin-top: .2rem; color: var(--red-dark);
    overflow-wrap: anywhere;
}
.ticket-stub {
    width: 66px; flex: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: var(--display); color: var(--red); line-height: 1;
}
.ticket-stub span { font-size: .85rem; letter-spacing: .14em; }
.ticket-stub b { font-weight: 400; font-size: 1.5rem; letter-spacing: .08em; }

/* ════════════════════════════
   LETTERBOX + FILM LEADER
════════════════════════════ */
.letterbox { display: none; position: fixed; inset: 0; z-index: 10010; pointer-events: none; }
.letterbox-bar {
    position: absolute; left: 0; right: 0; height: 50.5%;
    background: #050404;
    transform: translateY(-100%);
}
.letterbox-top { top: 0; box-shadow: 0 1px 0 rgba(201,164,92,.25); }
.letterbox-bottom { bottom: 0; transform: translateY(100%); box-shadow: 0 -1px 0 rgba(201,164,92,.25); }
.film-leader {
    display: none; position: fixed; inset: 0; z-index: 10020;
    align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 50%, #3a332c 0%, #221d19 60%, #141110 100%);
    cursor: pointer; overflow: hidden;
}
/* 1px projector jitter: translate a pseudo copy of the backdrop instead of animating background-position */
.film-leader::before {
    content: ''; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
    background: radial-gradient(circle at 50% 50%, #3a332c 0%, #221d19 60%, #141110 100%);
    animation: leaderJitter .18s steps(2) infinite;
}
@keyframes leaderJitter { 0% { transform: translate(0, 0); } 50% { transform: translate(1px, -1px); } }
.leader-cross::before, .leader-cross::after {
    content: ''; position: absolute; background: rgba(242,232,213,.42);
}
.leader-cross::before { left: 0; right: 0; top: 50%; height: 1px; }
.leader-cross::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.leader-dial { position: absolute; width: min(78vw, 360px); height: auto; overflow: visible; }
.leader-sweep { fill: none; stroke: rgba(242,232,213,.16); }
.leader-ring { fill: none; stroke: rgba(242,232,213,.85); stroke-width: 2; }
.leader-ring.thin { stroke-width: 1; stroke: rgba(242,232,213,.5); }
.leader-num {
    position: relative; font-family: var(--display);
    font-size: min(40vw, 190px); line-height: 1; color: var(--text);
    text-shadow: 0 0 30px rgba(0,0,0,.6);
}
.leader-skip {
    position: absolute; bottom: 9vh; left: 0; right: 0; text-align: center;
    font-family: var(--mono); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
    color: rgba(242,232,213,.6);
}

/* ════════════════════════════
   NAVIGATION (film strip pill)
════════════════════════════ */
nav {
    position: fixed; left: 0; right: 0; margin: 0 auto;
    width: max-content; max-width: calc(100% - 24px);
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateY(140px);
    z-index: 1000; opacity: 0;
    transition: .8s var(--ease-out);
}
nav.visible { transform: translateY(0); opacity: 1; }
/* lift above the guest QR button (#qr-fab, bottom-right) only when it exists */
body:has(#qr-fab) nav, body.has-qr nav { bottom: calc(84px + env(safe-area-inset-bottom)); }
.nav-inner {
    display: flex; gap: 2px; align-items: center;
    padding: 7px 10px;
    background:
        radial-gradient(circle, rgba(242,232,213,.55) 1.2px, transparent 1.6px) 0 3px / 9px 9px repeat-x,
        radial-gradient(circle, rgba(242,232,213,.55) 1.2px, transparent 1.6px) 0 calc(100% - 3px) / 9px 9px repeat-x,
        linear-gradient(180deg, #221c17, #120f0d);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(0,0,0,.6);
}
nav a {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 4px;
    color: var(--muted); display: flex; align-items: center; justify-content: center; position: relative;
    text-decoration: none; transition: color .3s, background .3s;
}
nav a svg { width: 21px; height: 21px; flex: none; }
nav a::after {
    content: ''; position: absolute; left: 50%; bottom: 3px;
    width: 4px; height: 4px; border-radius: 50%; background: var(--red-light);
    transform: translateX(-50%) scale(0); transition: transform .3s;
}
nav a.active { color: var(--accent-light); background: rgba(201,164,92,.1); }
nav a.active::after { transform: translateX(-50%) scale(1); }
nav a:hover { color: var(--accent); }
nav a:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
/* keep the last block clear of the fixed nav */
main > .footer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
body:has(#qr-fab) main > .footer, body.has-qr main > .footer { padding-bottom: calc(168px + env(safe-area-inset-bottom)); }

/* ════════════════════════════
   MUSIC BUTTON (reel)
════════════════════════════ */
.music-toggle-btn {
    position: fixed; top: calc(16px + env(safe-area-inset-top)); right: 16px; z-index: 1001;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--accent);
    background: radial-gradient(circle, #241e1a 0 45%, #15110e 46%);
    color: var(--accent-light);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.5);
    transition: background .3s, color .3s;
}
.music-toggle-btn::before {
    content: ''; position: absolute; inset: 3px; border-radius: 50%;
    border: 2px dashed rgba(201,164,92,.55);
}
.music-toggle-btn.is-playing::before { animation: reelSpin 4s linear infinite; }
@keyframes reelSpin { to { transform: rotate(360deg); } }
.music-toggle-btn svg { width: 16px; height: 16px; position: relative; }
.music-toggle-btn:hover { background: var(--red); color: var(--text); }
.music-toggle-btn:focus-visible { outline: 1px solid var(--accent-light); outline-offset: 4px; }

/* ════════════════════════════
   HERO (movie poster)
════════════════════════════ */
.hero { align-items: center; padding-left: 16px; padding-right: 16px; text-align: center; }
.hero-frame {
    width: min(100%, 440px);
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
}
.hero-presents {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--muted); min-height: 1.2em; margin-bottom: .2rem;
}
.hero-ornamen { width: min(52%, 190px); height: auto; margin: 0 auto .1rem; }
.hero-content { position: relative; width: 100%; }
.hero-label {
    font-family: var(--mono); font-weight: 700;
    font-size: .78rem; letter-spacing: .55em; text-transform: uppercase;
    color: var(--red-light); margin-bottom: .2rem; padding-left: .55em;
}
.hero-names {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(3.4rem, 17vw, 5.6rem); line-height: .92; letter-spacing: .04em;
    display: flex; flex-direction: column; align-items: center;
    color: var(--text); margin-bottom: .6rem; overflow-wrap: anywhere;
}
.hero-names .nm { display: block; max-width: 100%; }
.hero-names .word { display: inline-block; overflow: hidden; white-space: nowrap; padding: 0 .02em; vertical-align: top; }
.hero-names .ch { display: inline-block; }
.hero-names .amp {
    display: block; font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: .45em; line-height: 1.2; color: var(--accent); letter-spacing: 0;
}
.hero-tagline {
    font-style: italic; font-size: 1rem; color: var(--muted); margin: 0 auto .8rem; max-width: 300px;
}
.hero-billing {
    margin: .9rem auto .9rem; max-width: 340px;
    font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; line-height: 1.75;
    color: rgba(242,232,213,.78); text-transform: uppercase;
}
.hero-billing .tw { min-height: 1.75em; overflow-wrap: anywhere; }
.hero-date { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.in-theaters {
    font-family: var(--display); font-size: 1rem; letter-spacing: .4em; color: var(--accent);
    padding-left: .4em;
}
.date-row {
    display: flex; align-items: center; gap: .9rem;
    padding: .2rem 1.1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hero-date .day { font-family: var(--display); font-size: 3.4rem; line-height: 1; color: var(--accent-light); }
.month-year { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.month { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--text); }
.year { font-family: var(--mono); font-size: .8rem; letter-spacing: .35em; color: var(--muted); }
.scroll-cue {
    position: absolute; left: 50%; bottom: calc(var(--pad-section) * .55); transform: translateX(-50%);
    width: 22px; height: 34px; border: 1px solid var(--line); border-radius: 12px; z-index: 2;
}
.scroll-cue span {
    position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px;
    border-radius: 2px; background: var(--accent-light);
    animation: cueDrop 1.8s var(--ease-out) infinite;
}
@keyframes cueDrop { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(12px); opacity: 0; } }

/* Typewriter */
.tw-ch { opacity: 0; }
.tw-caret {
    display: inline-block; width: .55em; height: 1em; margin-left: 2px; vertical-align: -.15em;
    background: var(--red-light); animation: caretBlink .7s steps(1) infinite;
}
.tw-done .tw-caret { animation: caretBlink .7s steps(1) 3 forwards; opacity: 0; }
@keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ════════════════════════════
   QUOTE
════════════════════════════ */
.quote .container { text-align: center; max-width: 560px; }
.quote-mark {
    font-family: var(--serif); font-size: 5.5rem; line-height: .6; height: 2.6rem;
    color: var(--red-light); margin: .6rem 0 .4rem;
}
.quote p {
    font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.85;
    color: var(--text); margin-bottom: 1.2rem;
}
.quote cite {
    display: block; font-style: normal; font-family: var(--mono);
    font-size: .78rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 1.4rem;
}

/* ════════════════════════════
   COUPLE
════════════════════════════ */
.couple-flex { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.couple-item { text-align: center; max-width: 340px; }
.portrait-deco {
    position: relative; width: 150px; height: 180px; margin: 0 auto 1rem;
    padding: 0 18px;
    background:
        linear-gradient(180deg, #2c231b, #1c1612);
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--line), 0 20px 40px rgba(0,0,0,.5);
}
.portrait-deco::before, .portrait-deco::after {
    content: ''; position: absolute; top: 6px; bottom: 6px; width: 8px;
    background: repeating-linear-gradient(180deg, rgba(246,236,217,.85) 0 7px, transparent 7px 14px);
    border-radius: 1px;
}
.portrait-deco::before { left: 5px; }
.portrait-deco::after { right: 5px; }
.portrait-deco span {
    display: flex; align-items: center; justify-content: center;
    height: 100%; border-radius: 2px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 35%, rgba(255,236,200,.28), transparent 70%),
        linear-gradient(160deg, #4a3826 0%, #2a1f17 60%, #3a1d1f 100%);
    border: 1px solid rgba(230,207,149,.35);
    font-family: var(--serif); font-style: italic; font-size: 4.6rem; line-height: 1;
    color: var(--accent-light);
    text-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.portrait-deco em {
    position: absolute; bottom: -1.3rem; left: 0; right: 0;
    font-family: var(--mono); font-style: normal; font-size: .62rem; letter-spacing: .3em; color: var(--muted);
}
.role {
    display: block; margin-top: 1.4rem;
    font-family: var(--mono); font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--red-light);
}
.couple-item .name {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(2.2rem, 10vw, 2.9rem); line-height: 1; letter-spacing: .05em;
    color: var(--text); margin: .3rem 0 .5rem; overflow-wrap: anywhere;
}
.parent { font-size: .98rem; color: var(--muted); line-height: 1.7; }
.ampersand {
    font-family: var(--serif); font-style: italic; font-size: 3.4rem; line-height: 1;
    color: var(--accent);
}

/* ════════════════════════════
   EVENT — countdown + tickets
════════════════════════════ */
.countdown-deco {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
    max-width: 420px; margin: 0 auto 2.4rem; perspective: 600px;
}
.time-box {
    position: relative; text-align: center;
    padding: .7rem .2rem .55rem;
    background: linear-gradient(180deg, #221c17 0 50%, #1a1512 50% 100%);
    border: 1px solid var(--line); border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,240,210,.06), 0 10px 22px rgba(0,0,0,.45);
}
.time-box::before {
    content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 8px); height: 1px; background: rgba(0,0,0,.6);
}
.time-box span {
    display: inline-block; font-family: var(--display); font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1;
    color: var(--accent-light); letter-spacing: .04em;
    transform-origin: 50% 0;
}
.time-box label {
    display: block; margin-top: .3rem;
    font-family: var(--mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.event-grid { display: grid; gap: 1.6rem; max-width: 420px; margin: 0 auto; }
.event-card {
    position: relative; text-align: center;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.35), transparent 60%),
        var(--paper);
    color: var(--ink);
    border-radius: 8px;
    box-shadow: 0 22px 44px rgba(0,0,0,.55);
    -webkit-mask: radial-gradient(circle 11px at 0 calc(100% - 52px), transparent 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle 11px at 100% calc(100% - 52px), transparent 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle 11px at 0 calc(100% - 52px), transparent 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle 11px at 100% calc(100% - 52px), transparent 98%, #000) right / 51% 100% no-repeat;
}
.event-card .card-content { padding: 1.2rem 1.4rem 1.3rem; position: relative; }
.event-card .card-content::before {
    content: ''; position: absolute; inset: 8px 8px 0; border: 1px solid rgba(110,31,37,.25); border-bottom: 0; border-radius: 4px 4px 0 0;
    pointer-events: none;
}
.ticket-head {
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red);
    margin-bottom: .5rem;
}
.event-title {
    font-family: var(--display); font-weight: 400; font-size: 2.3rem; line-height: 1; letter-spacing: .06em;
    color: var(--red-dark); margin-bottom: .55rem;
}
.event-date { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.08rem; }
.event-time {
    font-family: var(--mono); font-weight: 700; font-size: .92rem; letter-spacing: .08em; margin: .2rem 0 .5rem;
    color: #4d3f31;
}
.event-location { font-size: .96rem; line-height: 1.5; color: #3d3127; overflow-wrap: anywhere; }
.ticket-foot {
    height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0 1.4rem; border-top: 2px dashed rgba(31,25,21,.28);
    font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: #6b5a45;
}
.barcode {
    width: 92px; height: 24px; flex: none;
    background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px);
    opacity: .75;
}

/* ════════════════════════════
   MAP — viewfinder card
════════════════════════════ */
.map-card {
    position: relative; max-width: 560px; margin: 0 auto;
    padding: 1.4rem 1.1rem 1.1rem;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--line-soft), 0 22px 44px rgba(0,0,0,.5);
}
.map-card::before {
    content: ''; position: absolute; inset: 7px; pointer-events: none; z-index: 3;
    background:
        linear-gradient(var(--accent-light), var(--accent-light)) top left / 18px 2px,
        linear-gradient(var(--accent-light), var(--accent-light)) top left / 2px 18px,
        linear-gradient(var(--accent-light), var(--accent-light)) top right / 18px 2px,
        linear-gradient(var(--accent-light), var(--accent-light)) top right / 2px 18px,
        linear-gradient(var(--accent-light), var(--accent-light)) bottom left / 18px 2px,
        linear-gradient(var(--accent-light), var(--accent-light)) bottom left / 2px 18px,
        linear-gradient(var(--accent-light), var(--accent-light)) bottom right / 18px 2px,
        linear-gradient(var(--accent-light), var(--accent-light)) bottom right / 2px 18px;
    background-repeat: no-repeat;
}
.rec-badge {
    position: absolute; top: 14px; right: 18px; z-index: 4;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--mono); font-weight: 700; font-size: .62rem; letter-spacing: .2em; color: var(--text);
}
.rec-badge i { width: 8px; height: 8px; border-radius: 50%; background: #e0464d; animation: recBlink 1.2s steps(1) infinite; }
@keyframes recBlink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.map-info { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; padding: .3rem .4rem 0; }
.map-detail { display: flex; gap: .8rem; align-items: flex-start; text-align: left; padding-right: 3rem; }
.map-icon {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(168,50,58,.18); color: var(--red-light); border: 1px solid rgba(208,87,92,.4);
}
.map-venue { font-family: var(--display); font-size: 1.45rem; letter-spacing: .05em; line-height: 1.1; color: var(--text); overflow-wrap: anywhere; }
.map-address { font-size: .92rem; color: var(--muted); line-height: 1.55; margin-top: .25rem; overflow-wrap: anywhere; }
.btn-map-nav {
    align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1.1rem; border-radius: 4px;
    border: 1px solid var(--accent); color: var(--accent-light); text-decoration: none;
    font-family: var(--mono); font-weight: 700; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
    transition: background .3s, color .3s;
}
.btn-map-nav:hover, .btn-map-nav:focus-visible { background: var(--accent); color: var(--bg); outline: none; }
.leaflet-map {
    height: 260px; border-radius: 4px; overflow: hidden; position: relative; z-index: 1;
    filter: sepia(.35) saturate(.85) contrast(1.05);
    border: 1px solid var(--line-soft);
}
.map-embed-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    height: 200px; border-radius: 4px; text-decoration: none;
    border: 1px dashed var(--line); color: var(--accent-light);
    background: repeating-linear-gradient(45deg, rgba(201,164,92,.04) 0 10px, transparent 10px 20px);
    font-family: var(--mono); font-size: .8rem; letter-spacing: .1em;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--paper); color: var(--ink); }

/* ════════════════════════════
   GALLERY — film strip
════════════════════════════ */
.gallery-subtitle { text-align: center; font-style: italic; color: var(--muted); margin: -1rem 0 1.6rem; }
.gallery-layout, .gallery-row-extra {
    position: relative;
    margin-left: -1.5rem; margin-right: -1.5rem;
    padding: 24px 0;
    background:
        radial-gradient(ellipse 2.6px 2.1px at 50% 50%, rgba(246,236,217,.88) 98%, transparent) 0 7px / 14px 10px repeat-x,
        radial-gradient(ellipse 2.6px 2.1px at 50% 50%, rgba(246,236,217,.88) 98%, transparent) 0 calc(100% - 7px) / 14px 10px repeat-x,
        linear-gradient(180deg, #2f251c, #1f1914 50%, #2f251c);
    border-top: 1px solid rgba(201,164,92,.45);
    border-bottom: 1px solid rgba(201,164,92,.45);
    box-shadow: 0 18px 40px rgba(0,0,0,.5);
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.gallery-layout::-webkit-scrollbar, .gallery-row-extra::-webkit-scrollbar { display: none; }
.gallery-layout.is-scrub, .gallery-row-extra.is-scrub { overflow: hidden; }
.gallery-row-extra { margin-top: 1.2rem; padding: 20px 0; transform: rotate(-1.2deg); }
.strip-track {
    display: flex; gap: 10px; width: max-content; margin: 0 auto;
    padding: 0 12px; counter-reset: frame;
}
.gallery-grid-side { display: contents; }
.gallery-featured, .gallery-grid-item, .gallery-extra-item {
    position: relative; flex: none; cursor: pointer; overflow: hidden;
    height: 200px; aspect-ratio: 4 / 5;
    border-radius: 3px;
    background: #120f0d;
    box-shadow: 0 0 0 1px rgba(230,207,149,.3);
    counter-increment: frame;
}
.gallery-featured { aspect-ratio: 4 / 5; }
.gallery-extra-item { height: 140px; aspect-ratio: 1; }
.gallery-featured::after, .gallery-grid-item::after, .gallery-extra-item::after {
    content: counter(frame, decimal-leading-zero) "A";
    position: absolute; left: 6px; bottom: 4px; z-index: 2;
    font-family: var(--mono); font-size: .58rem; letter-spacing: .15em; color: rgba(242,232,213,.8);
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.gallery-featured img, .gallery-grid-item img, .gallery-extra-item img {
    width: 100%; height: 100%; object-fit: cover;
    filter: sepia(.18) contrast(1.04);
    transition: transform .8s var(--ease-out), filter .5s;
}
.gallery-featured:hover img, .gallery-grid-item:hover img, .gallery-extra-item:hover img { transform: scale(1.06); filter: none; }
.gallery-featured-overlay, .gallery-item-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, transparent 40%, rgba(13,11,10,.55));
    opacity: 0; transition: opacity .3s;
}
.gallery-featured:hover .gallery-featured-overlay, .gallery-grid-item:hover .gallery-item-overlay, .gallery-extra-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-featured.placeholder, .gallery-grid-item.placeholder {
    display: flex; align-items: center; justify-content: center; cursor: default;
    color: rgba(230,207,149,.45);
    background: radial-gradient(ellipse at 50% 40%, rgba(255,236,200,.12), transparent 70%), #1a1512;
}
.gallery-hint {
    text-align: center; margin-top: 1.1rem;
    font-family: var(--mono); font-size: .66rem; letter-spacing: .25em; text-transform: uppercase; color: var(--muted);
}

/* Lightbox — the big screen */
.gallery-lightbox {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(5,4,4,.96);
    align-items: center; justify-content: center;
    opacity: 0; transition: opacity .3s;
}
.lb-img-wrap { max-width: min(90vw, 620px); max-height: 85vh; display: flex; align-items: center; justify-content: center; }
.lb-img-wrap img {
    max-width: 100%; max-height: 78vh; object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(230,207,149,.35), 0 0 80px rgba(255,236,200,.12), 0 30px 80px rgba(0,0,0,.7);
}
.lb-close, .lb-prev, .lb-next {
    position: fixed; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: rgba(20,17,15,.8); border-radius: 50%;
    color: var(--accent-light); cursor: pointer; transition: background .2s, color .2s;
}
.lb-close { top: 1.1rem; right: 1.1rem; width: 40px; height: 40px; font-size: 1rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 42px; height: 42px; font-size: 1.8rem; line-height: 1; }
.lb-prev { left: .75rem; }
.lb-next { right: .75rem; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--red); color: var(--text); }
.lb-counter {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    font-family: var(--mono); color: var(--accent-light); font-size: .8rem; letter-spacing: .25em;
    padding: 4px 14px; border: 1px solid var(--line); border-radius: 3px; background: rgba(20,17,15,.8);
}

/* ════════════════════════════
   GIFT SECTION OVERRIDE (dark)
════════════════════════════ */
#gift-section {
    position: relative;
    background:
        radial-gradient(ellipse 70% 40% at 50% 50%, rgba(201,164,92,.07), transparent 70%),
        transparent !important;
    padding: var(--pad-section) 0 !important;
    min-height: auto !important;
    z-index: 2;
}
#gift-section .gs-heading h2 {
    color: var(--text) !important;
    font-family: var(--serif) !important; font-style: italic !important; font-weight: 500 !important;
    font-size: clamp(1.7rem, 7vw, 2.3rem) !important;
}
#gift-section .gs-heading h2::after { background: var(--red) !important; width: 60px !important; }
#gift-section .gs-heading p { color: var(--muted) !important; font-family: var(--mono) !important; font-size: .82rem !important; letter-spacing: .06em; }
#gift-section .gs-sub-label { color: var(--accent) !important; }
#gift-section .gs-card, #gift-section .gs-bank-card { box-shadow: 0 0 0 1px var(--line), 0 12px 30px rgba(0,0,0,.45) !important; }

/* ════════════════════════════
   WISHES — screenplay page
════════════════════════════ */
.rsvp-form-container {
    max-width: 560px; margin: 0 auto 2.4rem;
    padding: 1.2rem 1.4rem 1.6rem;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line-soft); border-radius: 6px;
    box-shadow: 0 22px 44px rgba(0,0,0,.5);
    position: relative;
}
.rsvp-form-container::before {
    content: ''; position: absolute; left: 14px; top: 46px; bottom: 16px; width: 1px; background: rgba(168,50,58,.45);
}
.script-head {
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-weight: 700; font-size: .66rem; letter-spacing: .14em; color: var(--accent);
    padding-bottom: .7rem; margin-bottom: 1.2rem; border-bottom: 1px dashed var(--line);
}
.input-row { margin-bottom: 1.3rem; padding-left: .5rem; }
.input-row > label {
    display: block; margin-bottom: .45rem;
    font-family: var(--mono); font-weight: 700;
    font-size: .7rem; letter-spacing: .26em; text-transform: uppercase;
    color: var(--accent-light);
}
.input-row input[type="text"], .input-row textarea {
    width: 100%; padding: .75rem .9rem;
    background: rgba(13,11,10,.6); color: var(--text);
    border: 1px solid var(--line-soft); border-radius: 4px;
    font-family: var(--mono); font-size: 1rem; line-height: 1.5;
    transition: border-color .3s, box-shadow .3s;
}
.input-row textarea { resize: vertical; min-height: 110px; }
.input-row input::placeholder, .input-row textarea::placeholder { color: rgba(185,170,145,.55); }
.input-row input[type="text"]:focus, .input-row textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,164,92,.18);
}
.attend-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.attend-opt { position: relative; cursor: pointer; }
.attend-opt input { position: absolute; opacity: 0; pointer-events: none; }
.attend-opt span {
    display: inline-block; padding: .45rem .9rem;
    font-family: var(--mono); font-size: .8rem; letter-spacing: .06em;
    border: 1px solid var(--line); border-radius: 3px; color: var(--muted);
    transition: background .25s, color .25s, border-color .25s;
}
.attend-opt input:checked + span { background: var(--red); border-color: var(--red-light); color: var(--text); }
.attend-opt input:focus-visible + span { outline: 1px solid var(--accent-light); outline-offset: 2px; }

.wishes-list { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: .9rem; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.wish-item {
    display: flex; gap: .85rem; align-items: flex-start;
    padding: 1rem 1rem; text-align: left;
    background: rgba(27,23,20,.85);
    border-left: 3px solid var(--red); border-radius: 0 6px 6px 0;
    box-shadow: 0 0 0 1px var(--line-soft);
}
.wish-avatar {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-size: 1.3rem; color: var(--bg);
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
}
.wish-body { flex: 1; min-width: 0; }
.wish-header { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .25rem; }
.wish-name { font-family: var(--serif); font-weight: 600; font-size: 1rem; color: var(--text); overflow-wrap: anywhere; }
.wish-badge {
    font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 2px;
}
.wish-badge.hadir { background: rgba(95,154,107,.2); color: #9fd4aa; }
.wish-badge.tidak { background: rgba(168,50,58,.22); color: #f0a0a4; }
.wish-badge.ragu  { background: rgba(201,164,92,.2); color: var(--accent-light); }
.wish-message { font-size: .96rem; line-height: 1.6; color: rgba(242,232,213,.88); overflow-wrap: anywhere; }
.wish-time { display: block; margin-top: .35rem; font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.wish-empty { text-align: center; padding: 1.5rem; font-style: italic; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; }

/* ════════════════════════════
   FOOTER — The End + credits
════════════════════════════ */
.footer { text-align: center; }
.footer-inner { position: relative; z-index: 2; padding: 0 1.5rem; max-width: 560px; margin: 0 auto; }
.the-end { margin-bottom: .6rem; }
.end-title {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: clamp(3rem, 15vw, 4.4rem); line-height: 1; color: var(--text);
    text-shadow: 0 0 40px rgba(230,207,149,.2);
    margin: .3rem 0 .4rem;
}
.footer-names {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(2rem, 9vw, 2.8rem); letter-spacing: .06em; line-height: 1.05;
    color: var(--accent-light); margin-bottom: .6rem; overflow-wrap: anywhere;
}
.footer-names .amp { font-family: var(--serif); font-style: italic; color: var(--red-light); font-size: .7em; margin: 0 .3em; }
.footer-copy { font-style: italic; color: var(--muted); margin-bottom: 1.2rem; }
.end-credits { margin: 1.6rem auto 1.4rem; }
.credit-role {
    font-family: var(--mono); font-size: .64rem; letter-spacing: .38em; text-transform: uppercase;
    color: var(--red-light); margin-top: 1rem;
}
.end-credits .tw {
    font-family: var(--mono); font-size: .9rem; color: var(--text); letter-spacing: .04em; min-height: 1.6em;
    overflow-wrap: anywhere;
}
.footer-credit { font-family: var(--mono); font-size: .7rem; color: rgba(185,170,145,.6); margin-top: 1.6rem; }

/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */
@media (min-width: 720px) {
    .couple-flex { flex-direction: row; justify-content: center; align-items: flex-start; gap: 2.4rem; }
    .ampersand { align-self: center; }
    .event-grid { grid-template-columns: 1fr 1fr; max-width: 720px; }
    .gallery-featured, .gallery-grid-item { height: 260px; }
}
@media (max-width: 360px) {
    .countdown-deco { gap: .4rem; }
    .hero-names { font-size: 3rem; }
}

/* ════════════════════════════
   REDUCED MOTION
════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .cine-grain, .cine-vignette, .intro-beam, .btn-cine::after, .rec-badge i,
    .scroll-cue span, .music-toggle-btn.is-playing::before, .tw-caret, .film-leader, .film-leader::before {
        animation: none !important;
    }
    .gallery-row-extra { transform: none; }
    * { transition-duration: .01ms !important; }
}