/* ═══════════════════════════════════════════════════════════
   BOHO TERRACOTTA — modern bohemian: terracotta, burnt orange,
   sand, cream & dusty sage · pampas, palm spears, rainbow arches
   Fonts: Fraunces (display) · Mrs Saint Delafield (script) · DM Sans (body)
═══════════════════════════════════════════════════════════ */
:root {
    --bg:           #f6ede2;
    --bg-2:         #efe0cd;
    --surface:      #fcf7f1;
    --surface-2:    #fffaf4;
    --text:         #4a2c20;
    --muted:        #7a5644;
    --accent:       #c0643f;
    --accent-light: #e9a77e;
    --accent-dark:  #93442a;
    --terra-deep:   #a14f2e;
    --burnt:        #d9813f;
    --mustard:      #e3a54c;
    --sand:         #e6c9a8;
    --sage:         #9aa58a;
    --sage-dark:    #5c6a4f;
    --cream-ink:    #fbf0e2;
    --line:         rgba(192,100,63,.28);
    --line-soft:    rgba(192,100,63,.14);
    --sunset:       linear-gradient(180deg, #fbefe2 0%, #f8dfc6 34%, #f2c6a3 68%, #eaa883 100%);
    --sunset-end:   #eaa883;
    --shadow:       0 16px 40px rgba(147,68,42,.12);
    --display:      'Fraunces', Georgia, serif;
    --script:       'Mrs Saint Delafield', cursive;
    --sans:         'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --frame-w:      min(100vw, 560px);
    --pad-top:      calc(var(--frame-w) * .31 + 14px);
    --pad-bot:      calc(var(--frame-w) * .35 + 14px);
    --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(--sans);
    font-size: 1rem;
    background: var(--bg);
    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; }
::selection { background: var(--accent); color: var(--cream-ink); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Ambient dust canvas ── */
.dust-canvas {
    position: fixed; inset: 0; z-index: 10001;
    pointer-events: none;
}

/* ── Section frame + injected bingkai ── */
.section-frame {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--pad-top) 0 var(--pad-bot);
}
.section-frame-top, .section-frame-bottom,
.intro-frame-top, .intro-frame-bottom {
    position: absolute; left: 50%; margin-left: calc(var(--frame-w) / -2);
    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: 36vh; object-fit: cover; }
.intro-frame-top { object-position: top; }
.intro-frame-bottom { object-position: bottom; }
.divider { display: block; width: min(260px, 76%); height: auto; margin: 0 auto; }

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

/* ── Plumes (inline <use>) sway ── */
.plume-svg { position: absolute; overflow: visible; pointer-events: none; }
/* Sway dipindah dari <use> (transform di dalam SVG = repaint tiap frame) ke elemen <svg> luar lewat
   properti `rotate` (composited). Pivot sama (tengah-bawah) jadi rotasi = rotasi dasar (--pr) ± 3.2deg. */
.plume-svg {
    --pr: 0deg;
    --py: 0px; /* geseran vertikal dari GSAP (buka sampul / masuk hero), lewat variabel agar tidak bentrok dengan `rotate` */
    rotate: var(--pr);
    translate: 0 var(--py);
    animation: plumeSway 5.6s ease-in-out infinite alternate;
}
@keyframes plumeSway {
    from { rotate: calc(var(--pr) - 3.2deg); }
    to   { rotate: calc(var(--pr) + 3.2deg); }
}
/* rotasi 60s (6deg/detik) di dalam SVG tidak bisa di-composite: step 15x/detik (0.4deg) — tak terlihat beda, repaint 4x lebih jarang */
.sun-rays {
    transform-box: fill-box; transform-origin: center;
    animation: sunSpin 60s steps(900) infinite;
}
@keyframes sunSpin { to { transform: rotate(360deg); } }

/* ── Section heading ── */
.section-head { text-align: center; margin-bottom: 2.1rem; }
.mini-rainbow { display: block; width: 58px; height: auto; margin: 0 auto .5rem; overflow: visible; }
.mini-rainbow path { fill: none; stroke-width: 5; stroke-linecap: round; }
.eyebrow {
    display: block;
    font-family: var(--sans); font-weight: 600;
    font-size: .7rem; letter-spacing: .38em; text-transform: uppercase;
    color: var(--accent-dark); margin-bottom: .35rem;
}
.section-title {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(2rem, 8.6vw, 2.8rem);
    line-height: 1.12; letter-spacing: -.01em;
    color: var(--text);
    margin-bottom: .9rem;
    font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* ════════════════════════════
   BUTTONS
════════════════════════════ */
.btn-boho {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    position: relative; overflow: hidden; isolation: isolate;
    padding: .95rem 2rem;
    background: var(--accent);
    color: var(--cream-ink);
    border: none; border-radius: 999px; cursor: pointer;
    font-family: var(--sans); font-weight: 600;
    font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
    box-shadow: 0 0 0 4px rgba(192,100,63,.14), 0 12px 26px rgba(147,68,42,.28);
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background .3s;
}
.btn-boho::before {
    content: ''; position: absolute; z-index: -1;
    left: 50%; top: 100%; width: 140%; aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent-dark);
    transform: translate(-50%, 0) scale(.2);
    transition: transform .6s var(--ease-out), top .6s var(--ease-out);
}
.btn-boho:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(192,100,63,.16), 0 16px 32px rgba(147,68,42,.32); }
.btn-boho:hover::before { top: -20%; transform: translate(-50%, 0) scale(1); }
.btn-boho:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent-dark); }
.btn-boho:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.btn-boho.is-sent { background: var(--sage-dark); }
.btn-block { width: 100%; }

/* ════════════════════════════
   INTRO / COVER
════════════════════════════ */
.intro {
    position: fixed; inset: 0; z-index: 10000;
    background:
        radial-gradient(ellipse 70% 40% at 50% 46%, rgba(233,167,126,.22), transparent 70%),
        var(--bg);
    display: flex; align-items: center; justify-content: center;
    text-align: center; overflow: hidden auto;
}
.arch-portal {
    position: fixed; inset: 0; z-index: 1;
    background: var(--sunset);
    -webkit-clip-path: inset(50% 50% 50% 50%);
    clip-path: inset(50% 50% 50% 50%);
    pointer-events: none;
    will-change: clip-path;
}
.intro-blob {
    position: absolute; z-index: 0; pointer-events: none;
    border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%;
    filter: blur(2px);
}
.intro-blob.b1 { width: 62vw; max-width: 340px; aspect-ratio: 1; left: -18vw; top: 32%; background: rgba(230,201,168,.55); animation: blobMorph 14s steps(11) infinite alternate, blobTurn 14s ease-in-out infinite alternate; }
.intro-blob.b2 { width: 54vw; max-width: 300px; aspect-ratio: 1; right: -16vw; top: 52%; background: rgba(154,165,138,.22); animation: blobMorph 16s steps(11) infinite alternate-reverse, blobTurn 16s ease-in-out infinite alternate-reverse; }
/* Morph radius sangat lambat (~3px/detik): diperbarui ±6x/detik (steps) mengikuti kurva ease-in-out
   yang di-sampling, sedangkan rotasinya tetap halus di compositor — repaint blob turun ±10x */
@keyframes blobMorph {
    0%    { border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%; }
    12.5% { border-radius: 57.4% 42.6% 62.2% 37.8% / 45.5% 54.5% 45.5% 54.5%; }
    25%   { border-radius: 55.7% 44.3% 59.8% 40.2% / 46.9% 53.1% 46.9% 53.1%; }
    37.5% { border-radius: 52.7% 47.3% 55.7% 44.3% / 49.4% 50.6% 49.4% 50.6%; }
    50%   { border-radius: 49% 51% 50.5% 49.5% / 52.5% 47.5% 52.5% 47.5%; }
    62.5% { border-radius: 45.3% 54.7% 45.3% 54.7% / 55.6% 44.4% 55.6% 44.4%; }
    75%   { border-radius: 42.3% 57.7% 41.2% 58.8% / 58.1% 41.9% 58.1% 41.9%; }
    87.5% { border-radius: 40.6% 59.4% 38.8% 61.2% / 59.5% 40.5% 59.5% 40.5%; }
    100%  { border-radius: 40% 60% 38% 62% / 60% 40% 60% 40%; }
}
@keyframes blobTurn { from { transform: rotate(0deg); } to { transform: rotate(20deg); } }
.intro-frame-top, .intro-frame-bottom { z-index: 2; }
.intro-content {
    position: relative; z-index: 3;
    width: 100%; max-width: 420px;
    padding: min(23vh, calc(var(--frame-w) * .2)) 22px min(22vh, calc(var(--frame-w) * .25));
    margin: auto;
}
.intro-subtitle {
    font-family: var(--sans); font-weight: 600;
    font-size: .7rem; letter-spacing: .4em; text-transform: uppercase;
    color: var(--accent-dark);
}
.arch-wrap {
    position: relative;
    width: 160px; height: 212px;
    margin: 1.1rem auto 1.2rem;
}
.intro-arch {
    position: absolute; inset: 0;
    border-radius: 999px 999px 18px 18px;
    background: var(--sunset);
    box-shadow: 0 0 0 6px var(--bg), 0 0 0 7.5px var(--accent), 0 22px 40px rgba(147,68,42,.18);
}
.portal-ready .intro-arch { background: transparent; }
.arch-inner { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.arch-rainbow { position: absolute; left: 6%; bottom: 0; width: 88%; height: auto; opacity: .9; }
.arch-sun { position: absolute; left: 50%; bottom: -46px; width: 104px; margin-left: -52px; }
.arch-sun svg { width: 100%; height: auto; display: block; }
.boho-seal {
    position: absolute; left: 0; right: 0; top: 20%;
    display: flex; align-items: center; justify-content: center;
}
.boho-seal span {
    font-family: var(--script); font-size: 3.5rem; line-height: 1;
    color: var(--accent-dark);
    padding-right: .1em;
}
.pl-l1, .pl-l2, .pl-l3, .pl-r1, .pl-r2, .pl-r3 { bottom: -4px; width: 52px; height: 226px; transform-origin: 50% 100%; }
.pl-l1 { left: -50px; --pr: -18deg; }
.pl-l2 { left: -30px; --pr: -6deg; height: 196px; }
.pl-l3 { left: -58px; --pr: -32deg; height: 170px; }
.pl-r1 { right: -50px; --pr: 18deg; }
.pl-r2 { right: -30px; --pr: 6deg; height: 196px; }
.pl-r3 { right: -58px; --pr: 32deg; height: 170px; }
.pl-l2, .pl-r1 { animation-delay: -1.6s; animation-duration: 6.4s; }
.pl-l3, .pl-r2 { animation-delay: -3.1s; animation-duration: 5s; }
.pl-r3 { animation-delay: -.8s; }

.intro-names {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(2.1rem, 9.5vw, 2.9rem);
    line-height: 1.08; color: var(--text);
    margin-bottom: 1.1rem; overflow-wrap: anywhere;
    font-variation-settings: "SOFT" 100;
}
.intro-names em {
    font-family: var(--script); font-style: normal; font-weight: 400;
    color: var(--accent); font-size: 1.1em; padding: 0 .08em;
}
.guest-card {
    margin: 0 auto 1.4rem; max-width: 300px;
    padding: .9rem 1.2rem;
    background: rgba(252,247,241,.82);
    border: 1px solid var(--line);
    border-radius: 18px;
}
.to-label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .2rem; }
.guest-name {
    font-family: var(--display); font-weight: 500; font-style: italic;
    font-size: 1.25rem; color: var(--accent-dark); line-height: 1.3;
    overflow-wrap: anywhere;
}

/* ════════════════════════════
   NAVIGATION
════════════════════════════ */
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: transform .9s var(--ease-out), opacity .9s 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: 4px; align-items: center;
    padding: 6px;
    background: rgba(252,247,241,.92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 14px 30px rgba(147,68,42,.16);
}
nav a {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    color: var(--muted); display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: color .3s, background .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
nav a svg { width: 21px; height: 21px; flex: none; }
nav a.active { color: var(--cream-ink); background: var(--accent); box-shadow: 0 4px 10px rgba(147,68,42,.28); }
nav a:hover:not(.active) { color: var(--accent); background: rgba(192,100,63,.08); }
nav a:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
/* 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
════════════════════════════ */
.music-toggle-btn {
    position: fixed; top: calc(16px + env(safe-area-inset-top)); right: 16px; z-index: 1001;
    width: 44px; height: 44px;
    border: none; border-radius: 50%;
    background: var(--accent); color: var(--cream-ink);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(147,68,42,.3);
    transition: background .3s, transform .3s;
}
.music-toggle-btn::before {
    content: ''; position: absolute; inset: -6px;
    border-radius: 50%; border: 1.5px dashed rgba(192,100,63,.55);
}
.music-toggle-btn.is-playing::before { animation: sunSpin 12s linear infinite; }
.music-toggle-btn svg { width: 18px; height: 18px; }
.music-toggle-btn:hover { background: var(--accent-dark); }
.music-toggle-btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 7px; }

/* ════════════════════════════
   HERO
════════════════════════════ */
.hero {
    --hz: calc(var(--pad-bot) * .42);
    background: var(--sunset) top / 100% 100vh no-repeat, var(--sunset-end);
    align-items: center; text-align: center;
    padding-left: 16px; padding-right: 16px;
    overflow: hidden;
}
.hero-sky {
    position: absolute; left: 0; right: 0; top: 0; bottom: var(--hz);
    overflow: hidden; z-index: 0; pointer-events: none;
}
.hero-rainbow {
    --rw: min(118vw, 620px);
    position: absolute; bottom: 0; left: 50%;
    width: var(--rw); height: auto; margin-left: calc(var(--rw) / -2);
    opacity: .4;
}
.hero-rainbow path { stroke-linecap: butt; }
.hero-sun {
    --sun: min(46vw, 230px);
    position: absolute; left: 50%; bottom: calc(var(--sun) / -2);
    width: var(--sun); margin-left: calc(var(--sun) / -2);
}
.hero-sun svg { width: 100%; height: auto; display: block; }
.hero-plumes { position: absolute; inset: 0 0 var(--hz) 0; z-index: 1; pointer-events: none; }
.hero-plumes .plume-svg { bottom: -10px; height: min(36vh, 300px); width: calc(min(36vh, 300px) * .23); }
.hp-l1 { left: 2%; --pr: -14deg; }
.hp-l2 { left: 9%; --pr: -4deg; height: min(30vh, 250px) !important; }
.hp-l3 { left: -1%; --pr: -26deg; height: min(26vh, 220px) !important; }
.hp-r1 { right: 2%; --pr: 14deg; }
.hp-r2 { right: 9%; --pr: 4deg; height: min(30vh, 250px) !important; }
.hp-r3 { right: -1%; --pr: 26deg; height: min(26vh, 220px) !important; }
.hp-l2, .hp-r1 { animation-delay: -2.2s; animation-duration: 6.6s; }
.hp-l3, .hp-r3 { animation-delay: -4s; animation-duration: 4.8s; }
.hp-r2 { animation-delay: -1s; }
/* Plume hero: pivot sway = tengah-bawah. Rotasi dasar aslinya berporos di tengah, jadi dikompensasi dengan
   `translate` (setara persis). Browser tanpa sin()/cos() di CSS: plume tetap di posisi aslinya tanpa sway. */
.hero-plumes .plume-svg { --ph: min(36vh, 300px); }
.hero-plumes .hp-l2, .hero-plumes .hp-r2 { --ph: min(30vh, 250px); }
.hero-plumes .hp-l3, .hero-plumes .hp-r3 { --ph: min(26vh, 220px); }
@supports (translate: calc(1px * sin(1deg))) {
    .hero-plumes .plume-svg {
        transform-origin: 50% 100%;
        translate: calc(var(--ph) * -.5 * sin(var(--pr))) calc(var(--ph) * -.5 * (1 - cos(var(--pr))) + var(--py));
    }
}
@supports not (translate: calc(1px * sin(1deg))) {
    .hero-plumes .plume-svg { animation: none; }
}

.hero-content { position: relative; z-index: 3; width: 100%; max-width: 460px; margin: 0 auto; }
.hero-ornamen { width: min(56%, 210px); height: auto; margin: 0 auto .6rem; }
.hero-label {
    font-family: var(--sans); font-weight: 600;
    font-size: .72rem; letter-spacing: .38em; text-transform: uppercase;
    color: var(--accent-dark); margin-bottom: .5rem;
}
.hero-names {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(2.6rem, 12.5vw, 4.3rem);
    line-height: 1.02; letter-spacing: -.015em;
    color: var(--text);
    margin-bottom: .9rem;
    font-variation-settings: "SOFT" 100, "WONK" 1;
}
.hero-names .nm { display: block; }
.hero-names .wd { display: inline-block; white-space: nowrap; }
.hero-names .ch { display: inline-block; }
.hero-names .amp {
    display: block; font-family: var(--script); font-weight: 400;
    font-size: .95em; line-height: .85; color: var(--accent);
    margin: .02em 0 .06em;
}
.hero .divider { margin-bottom: 1rem; }
.hero-date {
    display: inline-flex; align-items: center; gap: .9rem;
    padding: .5rem 1.4rem .5rem 1.2rem;
    background: rgba(252,247,241,.72);
    border: 1px solid rgba(147,68,42,.22);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.hero-date .day {
    font-family: var(--display); font-weight: 500; font-size: 2.3rem; line-height: 1;
    color: var(--accent-dark);
    padding-right: .9rem; border-right: 1px solid rgba(147,68,42,.3);
}
.month-year { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.month-year .month { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--text); }
.month-year .year { font-size: .74rem; letter-spacing: .3em; font-weight: 600; color: var(--muted); }

/* ════════════════════════════
   QUOTE (terracotta)
════════════════════════════ */
.quote {
    background:
        radial-gradient(ellipse 60% 35% at 15% 30%, rgba(233,167,126,.22), transparent 70%),
        radial-gradient(ellipse 55% 30% at 90% 75%, rgba(227,165,76,.18), transparent 70%),
        var(--terra-deep);
    text-align: center;
}
.quote-card {
    position: relative;
    max-width: 420px; margin: 0 auto;
    padding: 2.6rem 1.6rem 2rem;
    background: var(--surface);
    border-radius: 999px 999px 28px 28px;
    box-shadow: 0 0 0 7px var(--terra-deep), 0 0 0 8.5px rgba(251,240,226,.55), 0 30px 60px rgba(60,20,10,.3);
}
.quote-sun { width: 92px; height: auto; margin: 1.2rem auto .6rem; display: block; overflow: visible; }
.quote-text {
    font-family: var(--display); font-style: italic; font-weight: 300;
    font-size: 1.12rem; line-height: 1.75; color: var(--text);
    margin-bottom: 1rem;
}
.quote-text .w { display: inline-block; }
.quote cite {
    display: block; font-style: normal;
    font-family: var(--sans); font-weight: 600; font-size: .76rem;
    letter-spacing: .26em; text-transform: uppercase;
    color: var(--accent-dark); margin-bottom: 1rem;
}

/* ════════════════════════════
   COUPLE
════════════════════════════ */
.couple {
    background:
        radial-gradient(ellipse 50% 30% at 0% 50%, rgba(230,201,168,.45), transparent 70%),
        radial-gradient(ellipse 45% 30% at 100% 70%, rgba(154,165,138,.16), transparent 70%),
        var(--bg);
    text-align: center;
}
.couple-flex {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: start; gap: .5rem;
    max-width: 560px; margin: 0 auto;
}
.couple-item { min-width: 0; }
.portrait-arch {
    position: relative;
    width: min(100%, 150px); aspect-ratio: 3 / 4.1;
    margin: 0 auto 1rem;
    border-radius: 999px 999px 16px 16px;
    overflow: hidden;
    box-shadow: 0 0 0 5px var(--bg), 0 0 0 6.5px var(--accent), var(--shadow);
}
.portrait-inner {
    position: absolute; inset: 0;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 22%;
    background:
        radial-gradient(circle at 50% 112%, #e3a54c 0 21%, transparent 21.5%),
        radial-gradient(circle at 50% 112%, transparent 0 25%, rgba(154,165,138,.75) 25% 31%, transparent 31% 34%, rgba(243,223,198,.95) 34% 40%, transparent 40% 43%, rgba(227,165,76,.7) 43% 49%, transparent 49% 52%, rgba(217,129,63,.65) 52% 58%, transparent 58% 61%, rgba(192,100,63,.65) 61% 67%, transparent 67%),
        var(--sunset);
}
.portrait-inner span {
    font-family: var(--script); font-size: 4.2rem; line-height: 1;
    color: var(--accent-dark); padding-right: .1em;
}
.name {
    font-family: var(--display); font-weight: 500; font-style: italic;
    font-size: clamp(1.3rem, 5.6vw, 1.7rem); line-height: 1.2;
    color: var(--accent-dark); margin-bottom: .45rem;
    overflow-wrap: anywhere;
}
.parent { font-size: .88rem; color: var(--muted); line-height: 1.6; }
.ampersand {
    font-family: var(--script); font-size: 3.2rem; line-height: 1;
    color: var(--accent); padding-top: 4.4rem;
}

/* ════════════════════════════
   EVENT
════════════════════════════ */
.event {
    background:
        radial-gradient(ellipse 60% 30% at 50% 0%, rgba(233,167,126,.2), transparent 70%),
        var(--bg-2);
    text-align: center;
}
.countdown-boho {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem;
    max-width: 400px; margin: 0 auto 2.2rem;
}
.time-box {
    position: relative; overflow: hidden;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 999px 999px 14px 14px;
    padding: 1.15rem .2rem .65rem;
    perspective: 300px;
    box-shadow: 0 8px 18px rgba(147,68,42,.08);
}
.time-box:nth-child(2) { border-color: rgba(227,165,76,.55); }
.time-box:nth-child(3) { border-color: rgba(154,165,138,.65); }
.time-box:nth-child(4) { border-color: rgba(217,129,63,.5); }
.time-box span {
    display: inline-block;
    font-family: var(--display); font-weight: 500;
    font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.1;
    color: var(--accent-dark);
    font-variant-numeric: tabular-nums;
    transform-origin: 50% 0;
}
.time-box label {
    display: block; margin-top: .2rem;
    font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted);
}
.event-grid { display: grid; gap: 1.3rem; max-width: 420px; margin: 0 auto; }
.event-card {
    position: relative;
    background: var(--surface);
    border-radius: 200px 200px 24px 24px;
    padding: 2.6rem 1.4rem 1.8rem;
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow);
}
.event-card::before {
    content: ''; position: absolute; inset: 8px; pointer-events: none;
    border-radius: 192px 192px 18px 18px;
    border: 1px dashed rgba(192,100,63,.32);
}
.card-content { position: relative; }
.event-icon { display: block; width: 72px; height: auto; margin: 0 auto .8rem; overflow: visible; }
.event-title {
    font-family: var(--display); font-weight: 400;
    font-size: 1.6rem; color: var(--text); margin-bottom: .45rem;
    font-variation-settings: "SOFT" 100;
}
.event-date { font-weight: 600; font-size: .95rem; color: var(--text); }
.event-time { font-size: .95rem; color: var(--accent-dark); margin: .15rem 0 .55rem; font-weight: 500; }
.event-location {
    font-family: var(--display); font-style: italic;
    font-size: 1.02rem; color: var(--muted); line-height: 1.45;
    padding-top: .6rem; border-top: 1px solid var(--line-soft);
}

/* ════════════════════════════
   MAP
════════════════════════════ */
.map-section { background: var(--bg); text-align: center; }
.map-card {
    max-width: 560px; margin: 0 auto;
    background: var(--surface);
    border-radius: 28px;
    padding: 1.1rem;
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow);
    text-align: left;
}
.map-info { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .3rem .2rem 1rem; }
.map-detail { display: flex; gap: .8rem; align-items: flex-start; min-width: 0; }
.map-icon {
    flex-shrink: 0; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--cream-ink);
    border-radius: 58% 42% 55% 45% / 50% 58% 42% 50%;
}
.map-venue { font-family: var(--display); font-weight: 500; font-size: 1.12rem; color: var(--text); line-height: 1.3; }
.map-address { font-size: .88rem; color: var(--muted); margin-top: .2rem; line-height: 1.5; }
.btn-map-nav {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .65rem 1.2rem;
    background: transparent; color: var(--accent-dark);
    border: 1.5px solid var(--accent); border-radius: 999px;
    font-family: var(--sans); font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
    text-decoration: none;
    transition: background .3s, color .3s;
}
.btn-map-nav:hover { background: var(--accent); color: var(--cream-ink); }
.btn-map-nav:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; }
.leaflet-map { width: 100%; height: 270px; border-radius: 20px; overflow: hidden; z-index: 1; }
.map-embed-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    height: 200px; border-radius: 20px;
    background: repeating-linear-gradient(135deg, var(--bg-2) 0 14px, var(--bg) 14px 28px);
    color: var(--accent-dark); text-decoration: none; font-size: .9rem;
}
.leaflet-popup-content-wrapper { border-radius: 14px; font-family: var(--sans); color: var(--text); }

/* ════════════════════════════
   GALLERY
════════════════════════════ */
.gallery {
    background:
        radial-gradient(ellipse 55% 30% at 100% 20%, rgba(233,167,126,.22), transparent 70%),
        var(--bg-2);
    text-align: center;
}
.gallery-subtitle {
    font-family: var(--display); font-style: italic;
    color: var(--muted); font-size: 1.05rem;
    margin: -1rem 0 1.6rem;
}
.gallery-layout {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: .6rem;
    max-width: 560px; margin: 0 auto;
}
.gallery-featured, .gallery-grid-item, .gallery-extra-item {
    position: relative; overflow: hidden; cursor: pointer;
    background: var(--sand);
}
.gallery-featured { border-radius: 999px 999px 18px 18px; aspect-ratio: 3 / 4.6; }
.gallery-grid-side { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; align-content: start; }
.gallery-grid-item { border-radius: 999px 999px 12px 12px; aspect-ratio: 3 / 4.4; }
.gallery-featured img, .gallery-grid-item img, .gallery-extra-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .9s var(--ease-out);
}
.gallery-featured:hover img, .gallery-grid-item:hover img, .gallery-extra-item:hover img { transform: scale(1.06); }
.gallery-featured-overlay, .gallery-item-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(147,68,42,.35);
    opacity: 0; transition: opacity .4s;
}
.gallery-featured:hover .gallery-featured-overlay,
.gallery-grid-item:hover .gallery-item-overlay,
.gallery-extra-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-row-extra {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
    max-width: 560px; margin: .6rem auto 0;
}
.gallery-extra-item { border-radius: 16px; aspect-ratio: 1; }
.placeholder {
    display: flex; align-items: center; justify-content: center; cursor: default;
    color: var(--accent);
    background: rgba(252,247,241,.7);
    border: 1.5px dashed var(--line);
}

/* Lightbox */
.gallery-lightbox {
    position: fixed; inset: 0; z-index: 10003;
    display: none; align-items: center; justify-content: center;
    background: rgba(48,24,15,.92);
    opacity: 0; transition: opacity .3s;
}
.lb-img-wrap { max-width: 92vw; max-height: 80vh; display: flex; }
.lb-img-wrap img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 22px; }
.lb-close, .lb-prev, .lb-next {
    position: fixed; z-index: 2;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(251,240,226,.4);
    background: rgba(251,240,226,.12); color: var(--cream-ink);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .3s, color .3s;
}
.lb-close { top: 1rem; right: 1rem; font-size: 1rem; }
.lb-prev { left: .8rem; top: 50%; margin-top: -22px; }
.lb-next { right: .8rem; top: 50%; margin-top: -22px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--accent); color: var(--cream-ink); }
.lb-counter {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    color: var(--cream-ink); font-size: .82rem; letter-spacing: .25em;
    padding: 4px 16px; border-radius: 999px; background: rgba(192,100,63,.55);
}

/* ════════════════════════════
   GIFT SECTION OVERRIDE
════════════════════════════ */
#gift-section {
    position: relative;
    background:
        radial-gradient(ellipse 60% 30% at 50% 50%, rgba(233,167,126,.18), transparent 70%),
        var(--bg) !important;
    padding: var(--pad-top) 0 var(--pad-bot) !important;
    font-family: var(--sans) !important;
}
#gift-section > *:not(.section-frame-top):not(.section-frame-bottom) { position: relative; z-index: 2; }
#gift-section .gs-heading h2 {
    color: var(--text) !important;
    font-family: var(--display) !important; font-weight: 400 !important;
    font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important;
}
#gift-section .gs-heading h2::after { background: var(--accent) !important; }
#gift-section .gs-heading p { color: var(--muted) !important; font-family: var(--sans) !important; font-size: .92rem !important; }
#gift-section .gs-sub-label { color: var(--accent-dark) !important; }
#gift-section .gs-card, #gift-section .gs-bank-card {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 26px rgba(147,68,42,.1) !important;
}
#gift-section .gs-btn-buy { background: var(--accent) !important; }

/* ════════════════════════════
   WISHES
════════════════════════════ */
.wishes-section {
    background:
        radial-gradient(ellipse 50% 30% at 0% 20%, rgba(154,165,138,.18), transparent 70%),
        var(--bg-2);
}
.wishes-section .section-head { text-align: center; }
.rsvp-form-container {
    max-width: 540px; margin: 0 auto 2.2rem;
    padding: 1.8rem 1.4rem 1.6rem;
    background: var(--surface);
    border-radius: 28px;
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow);
}
.input-row { margin-bottom: 1.25rem; }
.input-row > label {
    display: block; margin-bottom: .5rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: var(--accent-dark);
}
.input-row input[type="text"], .input-row textarea {
    width: 100%; padding: .85rem 1rem;
    background: var(--surface-2); color: var(--text);
    border: 1.5px solid var(--line); border-radius: 14px;
    font-family: var(--sans); font-size: 1rem;
    transition: border-color .3s, box-shadow .3s;
    resize: vertical;
}
.input-row input::placeholder, .input-row textarea::placeholder { color: rgba(122,86,68,.6); }
.input-row input:focus, .input-row textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(192,100,63,.14);
}
.attend-options { display: flex; gap: .5rem; flex-wrap: wrap; }
.attend-opt {
    display: flex; align-items: center; gap: .4rem; cursor: pointer;
    padding: .5rem .9rem; border-radius: 999px;
    border: 1.5px solid var(--line);
    font-size: .92rem; color: var(--text);
    transition: border-color .3s, background .3s, color .3s;
}
.attend-opt:hover { border-color: var(--accent); }
.attend-opt:has(input:checked) { border-color: var(--accent); background: var(--accent); color: var(--cream-ink); }
.attend-opt input[type="radio"] { accent-color: var(--accent-dark); width: 15px; height: 15px; }

.wishes-list { max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; gap: .8rem; }
.wish-item {
    display: flex; gap: .85rem; align-items: flex-start;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border-radius: 22px 22px 22px 6px;
    border: 1px solid var(--line-soft);
    box-shadow: 0 6px 16px rgba(147,68,42,.06);
}
.wish-avatar {
    width: 42px; height: 42px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    color: var(--cream-ink);
    font-family: var(--display); font-weight: 600; font-size: 1.1rem;
    border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%;
}
.wish-item:nth-child(3n+2) .wish-avatar { background: linear-gradient(135deg, #b9c2a8, var(--sage-dark)); }
.wish-item:nth-child(3n) .wish-avatar { background: linear-gradient(135deg, #f0c987, var(--burnt)); }
.wish-body { flex: 1; min-width: 0; }
.wish-header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
.wish-name { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--text); }
.wish-badge {
    font-size: .68rem; font-weight: 600; letter-spacing: .06em;
    padding: 2px 10px; border-radius: 999px;
}
.wish-badge.hadir { color: #3f5234; background: rgba(154,165,138,.35); }
.wish-badge.tidak { color: #8a3a22; background: rgba(233,167,126,.35); }
.wish-badge.ragu  { color: #7a5416; background: rgba(227,165,76,.3); }
.wish-message { font-size: .95rem; color: var(--text); line-height: 1.55; margin-bottom: .25rem; word-break: break-word; }
.wish-time { font-size: .78rem; color: var(--muted); }
.wish-empty { text-align: center; color: var(--muted); font-family: var(--display); font-style: italic; padding: 2rem 0; }

/* ════════════════════════════
   FOOTER (terracotta)
════════════════════════════ */
.footer {
    background:
        radial-gradient(ellipse 60% 40% at 50% 40%, rgba(233,167,126,.25), transparent 70%),
        var(--terra-deep);
    color: var(--cream-ink);
    text-align: center; align-items: center;
    padding-left: 1.5rem; padding-right: 1.5rem;
}
.footer-inner { position: relative; z-index: 2; max-width: 440px; margin: 0 auto; }
.footer-sun { width: 110px; height: auto; display: block; margin: 0 auto -54px; overflow: visible; opacity: .9; }
.boho-seal.small {
    position: relative; top: auto;
    width: 86px; height: 86px; margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--cream-ink);
    box-shadow: 0 0 0 4px var(--terra-deep), 0 0 0 5.5px rgba(251,240,226,.55);
}
.boho-seal.small span { font-size: 2.5rem; color: var(--accent-dark); }
.footer .eyebrow { color: #f6d6b8; }
.footer-names {
    font-family: var(--display); font-weight: 400; font-style: italic;
    font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.12;
    color: var(--cream-ink);
    margin: .3rem 0 1rem; overflow-wrap: anywhere;
}
.footer-names .amp { display: block; font-family: var(--script); font-style: normal; font-size: .95em; line-height: 1; color: #f2c27a; }
.footer-copy { font-family: var(--display); font-style: italic; font-weight: 300; color: #f6dcc4; font-size: 1.08rem; margin-bottom: 1.6rem; }
.footer .divider { filter: brightness(0) invert(.95) sepia(.35); opacity: .85; }
.footer-credit { margin-top: 2rem; font-size: .78rem; color: #f3d3b6; opacity: .85; letter-spacing: .05em; }

/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */
@media (max-width: 520px) {
    .container { padding: 0 1.25rem; }
    .couple-flex { gap: .35rem; }
    .portrait-arch { width: min(100%, 132px); }
    .portrait-inner span { font-size: 3.6rem; }
    .ampersand { font-size: 2.5rem; padding-top: 4rem; }
    .parent { font-size: .82rem; }
    .countdown-boho { gap: .4rem; }
    .map-info { flex-direction: column; align-items: stretch; }
    .btn-map-nav { width: 100%; }
    .rsvp-form-container { padding: 1.6rem 1.15rem 1.4rem; }
}
@media (max-width: 360px) {
    .portrait-arch { width: min(100%, 112px); }
    .hero-date .day { font-size: 2rem; }
}
@media (max-height: 700px) {
    .arch-wrap { width: 132px; height: 176px; margin: .8rem auto 1rem; }
    .boho-seal span { font-size: 2.9rem; }
    .intro-names { font-size: 2rem; margin-bottom: .8rem; }
    .guest-card { margin-bottom: 1rem; padding: .7rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .plume-svg, .sun-rays, .intro-blob, .music-toggle-btn.is-playing::before { animation: none !important; }
    .btn-boho, .btn-boho::before, nav, nav a, .gallery-featured img, .gallery-grid-item img, .gallery-extra-item img { transition: none !important; }
    .dust-canvas { display: none; }
}