@font-face { font-family: 'Great Vibes'; src: url('../../../bukutamu/fonts/GreatVibes.ttf') format('truetype'); font-display: swap; }
:root {
    color-scheme: light;
    --pine: #101010;
    --charcoal: #1c1b1a;
    --ink: #453a35;
    --paper: #f5f0ea;
    --tone: #e4d5ca;
    --muted: #574b43;
    --brass: #b79570;
    --on-brass: #000;
    --line: #716050;
    --serif: 'Bodoni Moda', Georgia, serif;
    --sans: 'Source Sans 3', sans-serif;
    --script: 'Great Vibes', cursive;
    --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; color: var(--ink); background: var(--pine); font: 400 16px/1.75 var(--sans); }
body.ec-cover-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, summary { cursor: pointer; }
button { color: inherit; }
button:disabled { opacity: .45; cursor: default; }
:is(a, button, input, textarea, summary):focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
a { color: inherit; text-underline-offset: 5px; }
img { display: block; width: 100%; object-fit: cover; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font: 400 clamp(24px, 2.6vw, 34px)/1.25 var(--serif); overflow-wrap: anywhere; }
h3 { font-size: clamp(19px, 1.9vw, 25px); }
p, figcaption { overflow-wrap: anywhere; }
.ec-section { padding: clamp(80px, 10vw, 136px) max(7%, calc((100vw - 1120px) / 2)); background: var(--paper); }
.ec-kicker { font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .18em; text-transform: uppercase; }
.ec-editorial-title, .ec-heading h2, .ec-agenda h2, .ec-gifts h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.04; text-transform: uppercase; letter-spacing: -.01em; }
.ec-heading { margin-bottom: 48px; }
.ec-heading h2 { margin: 14px 0; }
.ec-heading > p:last-child:not(.ec-kicker) { color: var(--muted); }
.ec-button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 48px; padding: 13px 24px; border: 1px solid var(--pine); border-radius: 0; background: var(--pine); color: var(--paper); font-size: 13.5px; letter-spacing: .06em; line-height: 1.4; text-decoration: none; transition: background .25s, color .25s; }
.ec-button:hover { text-decoration: underline; }
.ec-text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; text-decoration: none; font-size: 14px; letter-spacing: .04em; }
.ec-text-link:hover { text-decoration: underline; }
.ec-skip { position: fixed; z-index: 50; left: 16px; top: -100px; padding: 10px 20px; background: var(--paper); color: var(--pine); }
.ec-skip:focus { top: 16px; }

/* The uploaded cover continues into the film; gallery originals keep their color. */
.ec-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--pine); }
.ec-backdrop-photo { height: 100%; object-position: center; }
.ec-backdrop-video { position: absolute; inset: 0; opacity: 0; transition: none; pointer-events: none; overflow: hidden; }
.ec-backdrop-video iframe { position: absolute; width: max(100vw, 177.78vh); height: max(100vh, 56.25vw); top: 50%; left: 50%; transform: translate(-50%, -46%) scale(1.5); border: 0; }   /* bagian bawah video (tempat subtitle YouTube) berada di luar layar */   /* diperbesar agar judul dan bilah kontrol YouTube di tepi terpotong */
.ec-backdrop-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ec-video-on .ec-backdrop-video { opacity: 1; transition: opacity .35s; }
.ec-backdrop-video { }
.ec-backdrop-shade { position: absolute; inset: 0; background: rgba(16, 16, 16, .66); }
.ec-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9; pointer-events: none; }
.ec-progress span { display: block; height: 100%; background: var(--line); transform: scaleX(0); transform-origin: left; }
.ec-cover { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: var(--paper); background: var(--pine); overflow-y: auto; }
.ec-cover[open] { display: flex; flex-direction: column; }
.ec-cover::backdrop { background: var(--pine); }
.ec-case { flex: 1 0 auto; min-height: 52svh; position: static; }
.ec-case-photo { position: absolute; inset: 0; overflow: hidden; }
.ec-case-photo img { height: 100%; object-position: center; }
.ec-case-photo::after { content: ''; position: absolute; inset: 0; background: rgba(16, 16, 16, .66); }
.ec-cover-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: inherit; text-align: center; padding: 80px 8% 35px; }
.ec-cover-title { font: 400 clamp(18px, 2.4vw, 26px)/1.3 var(--serif); text-transform: uppercase; letter-spacing: .12em; }
.ec-cover-copy h1 { font: 400 clamp(32px, 3.8vw, 48px)/1.5 var(--script); margin: 20px 0; max-width: 100%; }
.ec-cover-copy h1 i { font: italic .6em var(--serif); margin-inline: .3em; }
.ec-cover-copy > p:last-child { font-size: 13px; letter-spacing: .08em; }
.ec-cover-bottom { flex-shrink: 0; position: relative; z-index: 1; padding: 40px 24px max(70px, env(safe-area-inset-bottom)); text-align: center; }
.ec-cover-bottom strong { display: block; font-size: 17px; font-weight: 500; }
.ec-address { font-size: 13px; }
.ec-open { background: transparent; color: var(--paper); border-color: var(--paper); min-width: 220px; margin-top: 24px; }
.ec-cover .ec-button:focus-visible { outline-color: var(--paper); }
.ec-cover.opening { animation: ec-cover-out .35s ease-out both; }
@keyframes ec-cover-out { to { opacity: 0; } }

.ec-hero { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 100px 8% 110px; position: relative; color: var(--paper); text-align: center; }
.ec-hero-note { position: absolute; inset: 32px 7% auto; display: flex; justify-content: space-between; align-items: center; }
.ec-hero-note span { font: 21px var(--serif); }
.ec-hero-note p { font-size: 13px; letter-spacing: .08em; }
.ec-hero-copy { max-width: 900px; }
.ec-names { font-size: clamp(36px, 4.8vw, 62px); margin: 22px 0; text-transform: uppercase; line-height: 1.1; letter-spacing: -.005em; }
.ec-names > span { display: block; }
.ec-names i { display: block; font: 400 .7em/1.4 var(--script); text-transform: none; }
.ec-hero-date { margin: 0 0 40px; }
.ec-hero-copy .ec-text-link { min-width: 160px; }
.ec-started .ec-hero-copy .ec-names > span { animation: ec-name-in .35s ease-out both; }
.ec-started .ec-hero-copy .ec-names > span:last-child { animation-delay: .1s; }
@keyframes ec-name-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ec-nav { position: sticky; top: 0; z-index: 7; display: flex; align-items: center; justify-content: center; gap: clamp(22px, 5vw, 70px); min-height: 62px; padding: 6px 18px; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.ec-nav a { text-decoration: none; padding: 9px 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.ec-nav a[aria-current] { box-shadow: inset 0 -2px var(--ink); }
.ec-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12%; padding-block: 120px; background: var(--tone); }
.ec-intro-copy { max-width: 54ch; }
.ec-intro-copy > p { margin-bottom: 20px; }
.ec-arab { font: 22px/2.1 Georgia, serif; }
.ec-intro blockquote { font: italic 19px/1.75 var(--serif); margin-top: 32px; }
.ec-intro cite { display: block; margin-top: 16px; font: 13px/1.5 var(--sans); color: var(--muted); }

.ec-couple { background: var(--charcoal); color: var(--paper); }
.ec-couple > .ec-heading { text-align: left; margin-bottom: 80px; }
.ec-diptych { display: flex; flex-direction: column; gap: 100px; }
.ec-person { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 10%; }
.ec-person:nth-child(2) { grid-template-columns: 1fr 1.15fr; }
.ec-person:nth-child(2) .ec-portrait { order: 2; }
.ec-portrait { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--tone); }
.ec-portrait img { position: absolute; inset: 0; height: 100%; object-position: center; }
.ec-photo-next { position: absolute; right: 15px; bottom: 15px; z-index: 2; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .04em; }
.ec-portrait img { filter: grayscale(1); }
.ec-profile-title { font: 400 clamp(22px, 2.8vw, 34px)/1.15 var(--serif); text-transform: uppercase; letter-spacing: .06em; max-width: 14ch; }
.ec-person-name { font: 400 clamp(34px, 3.8vw, 48px)/1.4 var(--script); margin: 8px 0 16px; color: #c9ab89; }
.ec-person h3 { font: 500 15px/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.ec-person-copy > p:last-of-type { color: #d9cdc3; }
.ec-person-copy .ec-text-link { margin-top: 20px; }
.ec-interlude { min-height: 85svh; padding: 100px 7%; color: var(--paper); display: grid; place-items: center; text-align: center; }
.ec-interlude-date { font: 400 clamp(30px, 5.2vw, 62px)/1.3 var(--serif); letter-spacing: .02em; margin: 18px 0; }
.ec-agenda { display: grid; grid-template-columns: 1fr 1.4fr; align-items: start; gap: 10%; background: var(--charcoal); color: var(--paper); }
.ec-agenda .ec-button { background: transparent; border-color: #b6a397; }
.ec-agenda .ec-event, .ec-agenda .ec-event:last-of-type { border-color: #b6a397; }
.ec-agenda-intro { position: sticky; top: 120px; }
.ec-agenda h2 { margin: 20px 0 30px; }
.ec-countdown { display: flex; flex-wrap: wrap; gap: 22px; margin: 30px 0 8px; }
.ec-countdown b { display: block; font: 28px/1.3 var(--serif); font-variant-numeric: tabular-nums; }
.ec-countdown span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.ec-count-status { font-size: 13px; margin-bottom: 24px; }
.ec-event { border-top: 1px solid var(--line); }
.ec-event:last-of-type { border-bottom: 1px solid var(--line); }
.ec-event summary { list-style: none; display: grid; grid-template-columns: 68px 1fr 20px; gap: 16px; align-items: center; padding: 28px 0; }
summary::-webkit-details-marker { display: none; }
.ec-event summary time { font: 21px var(--serif); }
.ec-event summary > span:nth-child(2) { font: 21px var(--serif); }
.ec-event summary small { display: block; margin-top: 6px; font: 13px/1.5 var(--sans); letter-spacing: .04em; }
.ec-event-toggle { position: relative; width: 14px; height: 14px; transition: transform .25s; }
.ec-event-toggle::before, .ec-event-toggle::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; }
.ec-event-toggle::after { transform: rotate(90deg); }
.ec-event[open] .ec-event-toggle { transform: rotate(45deg); }
.ec-event-content { padding-bottom: 36px; }
.ec-event-content > img { aspect-ratio: 4/3; margin-bottom: 28px; filter: grayscale(1); }
.ec-event-content h3 { margin: 10px 0; font: 500 16px/1.6 var(--sans); letter-spacing: .04em; }
.ec-event-content p { font-size: 15px; }
.ec-event-content .ec-button { margin-top: 25px; }
.ec-map { margin-top: 30px; }
.ec-map summary { padding: 12px 0; text-decoration: underline; text-underline-offset: 5px; }
.ec-map iframe { width: 100%; height: 300px; border: 0; margin-top: 15px; }

.ec-story { background: var(--tone); }
.ec-chapter { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 8%; padding-bottom: 45px; transform-origin: left center; }
.ec-chapter-photo { aspect-ratio: 4/5; overflow: hidden; }
.ec-chapter-photo img { height: 100%; }
.ec-chapter-copy { padding: 25px 0; }
.ec-chapter-copy > p:first-child { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 24px; }
.ec-chapter-copy h3 { margin: 14px 0 22px; }
.ec-chapter-copy > p:last-child { white-space: pre-line; }
.ec-story-controls { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); padding-top: 16px; }
.ec-story-controls p { font-size: 13px; }
.ec-contact-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 30px; align-items: start; }
.ec-shot { display: block; position: relative; text-decoration: none; color: var(--muted); overflow: hidden; }
.ec-shot:nth-child(even) { margin-top: 75px; }
.ec-shot img { aspect-ratio: 4/5; }
.ec-shot:nth-child(3n) img { aspect-ratio: 1; }
.ec-shot span { display: block; font-size: 12px; letter-spacing: .1em; padding-top: 10px; }
.ec-shot:hover img { filter: brightness(.94); }
.ec-gallery > .ec-text-link { margin-top: 40px; }
.ec-live { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 10%; background: var(--tone); }
.ec-live > img { aspect-ratio: 4/3; }
.ec-live h2 { margin: 20px 0 30px; }
.ec-gifts { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12%; background: var(--charcoal); color: var(--paper); }
.ec-gifts h2 { margin: 18px 0 26px; }
.ec-gift-envelope { padding: 32px 0; border-block: 1px solid #b6a397; }
.ec-gift-envelope > summary { display: flex; flex-direction: column; align-items: center; gap: 22px; list-style: none; text-align: center; padding: 18px 0; }
.ec-gift-envelope > summary > span:last-child { font-size: 13px; letter-spacing: .08em; }
.ec-seal { font: 400 38px/1 var(--script); color: #c9ab89; }
.ec-account { border-top: 1px solid #b6a397; padding: 25px 0; }
.ec-account h3 { font: 500 19px/1.6 var(--sans); letter-spacing: .04em; margin: 4px 0; }
.ec-account .ec-text-link { margin-top: 12px; }
.ec-qris { max-width: 230px; max-height: 320px; object-fit: contain; margin: 22px auto 0; }
.ec-rsvp { background: var(--tone); color: var(--ink); display: grid; grid-template-columns: 1fr 1fr; gap: 50px 12%; }
.ec-rsvp h2 { text-transform: uppercase; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.2; }
.ec-rsvp-intro h2 { margin: 20px 0 26px; }
.ec-rsvp-intro > p:last-child { font-size: 13px; margin-top: 26px; }
.ec-form { display: flex; flex-direction: column; }
.ec-form > label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.ec-form input:not([type=radio]), .ec-form textarea { width: 100%; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 0; min-height: 48px; padding: 12px; font-size: 16px; resize: vertical; }
.ec-form input:focus-visible, .ec-form textarea:focus-visible { outline-color: var(--ink); }
.ec-form fieldset { display: flex; flex-wrap: wrap; gap: 12px 30px; border: 0; padding: 0; margin: 25px 0; }
.ec-form legend { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.ec-form fieldset label { display: flex; align-items: center; gap: 9px; min-height: 44px; cursor: pointer; }
.ec-form input[type=radio] { accent-color: var(--pine); width: 20px; height: 20px; }
.ec-form .ec-button { align-self: flex-start; background: var(--brass); color: var(--on-brass); border-color: var(--ink); margin-top: 24px; }
#form-message { min-height: 28px; font-size: 14px; margin-top: 12px; }
.ec-wishes { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-height: 380px; overflow: auto; overscroll-behavior: contain; padding: 8px; margin: -8px; }
.ec-wishes figure { border-top: 1px solid var(--line); padding-top: 24px; }
.ec-wishes blockquote { white-space: pre-line; overflow-wrap: anywhere; font: italic 18px/1.7 var(--serif); }
.ec-wishes figcaption { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-top: 14px; }
.ec-ticket { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12%; }
.ec-ticket h2 { margin: 15px 0 20px; }
.ec-qr { width: fit-content; padding: 28px; background: #fff; }
#qrcode img, #qrcode canvas { width: 176px; height: 176px; max-width: 176px; }
#qr-message { max-width: 210px; font-size: 13px; }
.ec-health { padding-top: 20px; text-align: center; }
.ec-health h2 { font-size: 20px; margin-bottom: 16px; }
.ec-health p { max-width: 640px; margin-inline: auto; }
.ec-end { position: relative; min-height: 100svh; color: var(--paper); display: grid; place-items: center; padding: 100px 8%; text-align: center; isolation: isolate; }
.ec-end-photo { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.ec-end-photo img { height: 100%; filter: grayscale(1); }
.ec-end-photo::after { content: ''; position: absolute; inset: 0; background: rgba(16, 16, 16, .66); }
.ec-end-copy { max-width: 650px; }
.ec-signature { font: 400 clamp(30px, 3.4vw, 40px)/1.6 var(--script); margin-top: 22px; }
.ec-end-copy .ec-names { font-size: clamp(30px, 3.8vw, 44px); }
.ec-end-copy .ec-text-link { margin: 30px 0; }
.ec-end-copy small { display: block; font-size: 12px; letter-spacing: .08em; }
.ec-music, .ec-motion-toggle { position: fixed; right: 12px; z-index: 8; height: 38px; width: 38px; display: grid; place-items: center; border: 1px solid rgba(245, 240, 234, .7); border-radius: 50%; background: rgba(16, 16, 16, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--paper); }
.ec-music svg, .ec-motion-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ec-motion-toggle .ec-i-play { fill: currentColor; stroke: none; display: none; }
.ec-motion-toggle[aria-pressed=true] .ec-i-pause { display: none; }
.ec-motion-toggle[aria-pressed=true] .ec-i-play { display: block; }
.ec-music { bottom: max(14px, env(safe-area-inset-bottom)); }
.ec-motion-toggle { bottom: max(60px, calc(env(safe-area-inset-bottom) + 46px)); }
.ec-music:focus-visible, .ec-motion-toggle:focus-visible { outline-color: var(--pine); box-shadow: 0 0 0 4px var(--paper); }
.ec-music[aria-pressed=true]::after { content: ''; position: absolute; inset: 5px; border: 1px solid var(--paper); border-radius: 50%; }
.ec-lightbox { border: 0; padding: 55px 14px 20px; background: var(--pine); color: var(--paper); width: min(1000px, 96vw); max-width: 96vw; max-height: 95dvh; overflow: auto; }
.ec-lightbox::backdrop { background: #191310ed; }
.ec-lightbox > div { display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; align-items: center; }
.ec-lightbox button { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: inherit; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
#photo-close { position: absolute; top: 4px; right: 8px; }
.ec-lightbox figure img { height: min(72dvh, 700px); object-fit: contain; }
.ec-lightbox figcaption { text-align: center; padding-top: 12px; font-size: 13px; }
.ec-toast { position: fixed; left: 50%; bottom: 26px; width: max-content; max-width: calc(100% - 40px); z-index: 50; transform: translate(-50%, 15px); padding: 12px 20px; border: 1px solid var(--paper); background: var(--pine); color: var(--paper); text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.ec-toast.on { opacity: 1; transform: translate(-50%, 0); }
.ec-noscript { padding: 20px; color: var(--paper); }
.ec-photo-missing { background: var(--tone); color: var(--ink); }
.ec-photo-missing-text { position: relative; padding: 20px; font: 14px/1.5 var(--sans); text-align: center; }

/* Reveal only media and headings; reading content never depends on animation. */
.ec-motion [data-reveal=photo] { opacity: 0; transition: opacity .35s ease-out; }
.ec-motion [data-reveal=heading] { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s ease-out; }
.ec-motion [data-reveal].ec-enter { clip-path: inset(0); opacity: 1; transform: none; }
.ec-cover-open .ec-progress { visibility: hidden; }
@media (max-width: 700px) {
    body { font-size: 15px; }
    .ec-section { padding: 72px 7%; }
    .ec-kicker { font-size: 10.5px; }
    .ec-heading { margin-bottom: 35px; }
    .ec-case { min-height: 53svh; }
    .ec-cover-copy { padding: 70px 7% 30px; }
    .ec-cover-copy h1 { font-size: clamp(32px, 8.6vw, 40px); }
    .ec-cover-bottom { padding-top: 30px; }
    .ec-cover-bottom strong { font-size: 16px; }
    .ec-open { margin-top: 14px; }
    .ec-hero { padding: 100px 9%; }
    .ec-hero-note { top: 26px; }
    .ec-names { font-size: clamp(34px, 10vw, 44px); }
    .ec-hero-date { font-size: 13px; letter-spacing: .08em; }
    .ec-nav { gap: clamp(18px, 6vw, 32px); min-height: 58px; }
    .ec-nav a { font-size: 12px; }
    .ec-intro { display: block; padding-block: 80px; }
    .ec-editorial-title { font-size: clamp(34px, 10vw, 44px); margin-bottom: 36px; }
    .ec-intro blockquote { font-size: 18px; }
    .ec-arab { font-size: 21px; }
    .ec-couple { padding-top: 80px; }
    .ec-couple > .ec-heading { margin-bottom: 40px; }
    .ec-diptych { gap: 65px; }
    .ec-person, .ec-person:nth-child(2) { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .ec-person:nth-child(2) .ec-portrait { order: 0; }
    .ec-portrait { aspect-ratio: 3/4; }
    .ec-person-copy { position: relative; width: 100%; padding: 32px 0 0; }
    .ec-person:nth-child(2) .ec-person-copy { text-align: right; }
    .ec-person:nth-child(2) .ec-profile-title { margin-left: auto; }
    .ec-person-name { font-size: 38px; margin-block: 6px 12px; }
    .ec-person h3 { font-size: 14px; margin-bottom: 14px; }
    .ec-person .ec-text-link { max-width: 100%; font-size: 13px; }
    .ec-photo-next { bottom: 12px; right: 12px; }
    .ec-interlude { min-height: 75svh; }
    .ec-interlude-date { font-size: clamp(28px, 8.4vw, 36px); }
    .ec-agenda { display: block; }
    .ec-agenda-intro { position: static; padding-bottom: 40px; }
    .ec-countdown { gap: 26px; }
    .ec-countdown b { font-size: 26px; }
    .ec-event summary { grid-template-columns: 62px 1fr 18px; gap: 10px; }
    .ec-event summary > span:nth-child(2) { font-size: 19px; }
    .ec-event-content > img { aspect-ratio: 4/5; }
    .ec-chapter { grid-template-columns: 1fr; gap: 0; padding-bottom: 25px; }
    .ec-chapter-photo { aspect-ratio: 4/5; }
    .ec-chapter-copy { padding-top: 24px; }
    .ec-chapter-copy > p:first-child { padding-bottom: 12px; margin-bottom: 16px; }
    .ec-story-controls .ec-text-link { font-size: 13px; gap: 8px; }
    .ec-story-controls p { font-size: 12px; white-space: nowrap; }
    .ec-contact-sheet { gap: 24px 18px; }
    .ec-shot:nth-child(even) { margin-top: 45px; }
    .ec-live { display: block; }
    .ec-live > img { margin-bottom: 30px; }
    .ec-gifts { display: block; }
    .ec-gift-envelope { margin-top: 36px; padding: 24px 0; }
    .ec-rsvp { grid-template-columns: 1fr; gap: 32px; }
    .ec-wishes { grid-template-columns: 1fr; max-height: 400px; }
    .ec-ticket { grid-template-columns: 1fr; gap: 32px; }
    .ec-qr { justify-self: center; }
    .ec-health { padding-top: 20px; }
    .ec-end { padding: 90px 10%; }
    .ec-end-copy .ec-names { font-size: 32px; }
}
@media (max-width: 360px) { .ec-section { padding-inline: 6%; } .ec-story-controls { gap: 8px; } .ec-story-controls .ec-text-link { font-size: 13px; } .ec-cover-copy { padding-inline: 10%; } }
@media (max-height: 700px) { .ec-case { min-height: 48svh; } .ec-cover-copy { padding-block: 40px 25px; } .ec-cover-copy h1 { font-size: 32px; margin-block: 12px; } .ec-cover-bottom { padding: 24px 20px 40px; } .ec-open { margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .ec-motion [data-reveal] { opacity: 1; clip-path: none; transform: none; }
}

/* =====================================================================
   ALIRAN: satu latar foto/video penuh dari sampul sampai penutup.
   Semua bagian isi transparan; teks terang; huruf sambung untuk nama dan judul.
   ===================================================================== */
:root {
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    --script: 'Pinyon Script', 'Great Vibes', cursive;
    --muted: rgba(245, 240, 234, .88);
    --line: rgba(245, 240, 234, .38);
    --glass: rgba(245, 240, 234, .07);
}
body { color: var(--paper); font: 300 16px/1.8 var(--sans); }
.ec-backdrop-shade { background: linear-gradient(180deg, rgba(14, 12, 11, .66) 0%, rgba(14, 12, 11, .62) 50%, rgba(14, 12, 11, .7) 100%); }
.ec-section, .ec-intro, .ec-couple, .ec-agenda, .ec-story, .ec-live, .ec-gifts, .ec-rsvp, .ec-ticket, .ec-gallery, .ec-health {
    background: transparent; color: var(--paper);
}
.ec-hero, .ec-section, .ec-interlude, .ec-end { text-shadow: 0 1px 16px rgba(8, 6, 5, .55), 0 0 2px rgba(8, 6, 5, .3); }
.ec-form input, .ec-form textarea, .ec-qr, .ec-qr *, .ec-photo-next, .ec-toast, .ec-button { text-shadow: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 300; }
p, figcaption { font-weight: 300; }

/* label kecil */
.ec-kicker, .ec-profile-title, .ec-nav a, .ec-countdown span, .ec-form > label, .ec-form legend, .ec-wishes figcaption, .ec-shot span, .ec-hero-note p, .ec-cover-title {
    font-family: var(--sans); font-weight: 400;
}
.ec-kicker { font-size: 10.5px; letter-spacing: .32em; }
.ec-cover-title { font-size: clamp(14px, 1.8vw, 18px); letter-spacing: .34em; }
.ec-profile-title { font-size: 12px; letter-spacing: .3em; max-width: none; }

/* nav kaca di atas video */
.ec-nav { background: rgba(14, 12, 11, .42); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--paper); border-bottom: 1px solid rgba(245, 240, 234, .22); text-shadow: none; }
.ec-nav a[aria-current] { box-shadow: inset 0 -1px var(--paper); }

/* judul bagian: tulisan sambung, satu alur */
.ec-editorial-title, .ec-heading h2, .ec-agenda h2, .ec-gifts h2, .ec-live h2, .ec-rsvp h2, .ec-health h2 {
    font-family: var(--script); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.2;
    font-size: clamp(38px, 9.4vw, 46px);
}
.ec-health h2 { font-size: 30px; }
.ec-rsvp-intro h2, .ec-agenda h2, .ec-gifts h2 { margin: 12px 0 22px; }

/* nama: tulisan sambung */
.ec-names { font-family: var(--script); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.12; font-size: clamp(50px, 13vw, 64px); }
.ec-names > span { display: block; }
.ec-names i { font: italic 300 .42em/1.6 var(--serif); letter-spacing: .1em; }
.ec-end-copy .ec-names { font-size: clamp(44px, 11vw, 56px); }
.ec-person-name { font-size: clamp(40px, 10vw, 48px); }
.ec-signature { font-size: clamp(34px, 8.6vw, 42px); }
.ec-hero-date, .ec-hero-note p { letter-spacing: .14em; }
.ec-interlude-date { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 8.2vw, 46px); letter-spacing: .1em; }
.ec-person h3 { font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .26em; }
.ec-countdown b { font-family: var(--serif); font-weight: 300; font-size: 30px; }
.ec-event summary time, .ec-event summary > span:nth-child(2) { font-family: var(--serif); font-weight: 300; }
.ec-event summary > span:nth-child(2) { font-size: 22px; }
.ec-event-content h3 { font-family: var(--sans); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; }
.ec-intro blockquote, .ec-wishes blockquote { font-family: var(--serif); font-weight: 300; font-style: italic; }
.ec-intro blockquote { font-size: 21px; }
.ec-wishes blockquote { font-size: 19px; }
.ec-account h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: .06em; }
.ec-seal { font-size: 36px; }
.ec-arab { font-size: 24px; }
.ec-chapter-copy h3, .ec-live h2 { font-family: var(--serif); }
.ec-chapter-copy h3 { font-size: clamp(24px, 6vw, 28px); font-weight: 400; }

/* kontrol dan formulir di atas latar gelap */
.ec-button { background: transparent; color: var(--paper); border: 1px solid rgba(245, 240, 234, .75); font-family: var(--sans); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
.ec-button:hover { background: var(--paper); color: var(--pine); text-decoration: none; }
.ec-form .ec-button { background: var(--brass); color: var(--on-brass); border-color: var(--brass); }
.ec-form .ec-button:hover { filter: brightness(1.1); background: var(--brass); color: var(--on-brass); }
.ec-text-link { font-family: var(--sans); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
.ec-form input:not([type=radio]), .ec-form textarea { background: var(--glass); color: var(--paper); border: 1px solid rgba(245, 240, 234, .5); }
.ec-form input:focus-visible, .ec-form textarea:focus-visible { outline-color: var(--paper); }
.ec-form input[type=radio] { accent-color: var(--paper); }
.ec-photo-next { background: rgba(14, 12, 11, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--paper); border-color: rgba(245, 240, 234, .5); }
.ec-qr { background: #fff; color: #222; }
.ec-wishes figure, .ec-event, .ec-account, .ec-chapter-copy > p:first-child { border-color: rgba(245, 240, 234, .35); }
.ec-chapter-copy > p:first-child { color: var(--muted); }
.ec-story-controls { border-top-color: rgba(245, 240, 234, .35); }
.ec-shot { color: var(--muted); }
.ec-health { padding-top: 40px; }

@media (min-width: 701px) {
    .ec-editorial-title, .ec-heading h2, .ec-agenda h2, .ec-gifts h2, .ec-live h2, .ec-rsvp h2 { font-size: clamp(46px, 4.6vw, 62px); }
    .ec-names { font-size: clamp(64px, 6.4vw, 92px); }
    .ec-end-copy .ec-names { font-size: clamp(54px, 5vw, 72px); }
    .ec-person-name { font-size: clamp(46px, 4.4vw, 60px); }
}

/* =====================================================================
   PANEL TERANG: tiap bagian punya latar krem tembus pandang (bukan gelap); video tetap terlihat samar di baliknya.
   ===================================================================== */
:root { --ink: #2b2420; --muted: #4d413a; --line: rgba(43, 36, 32, .3); --glass: rgba(255, 255, 255, .55); --panel: rgba(250, 246, 239, .2); }
main { padding-bottom: 8px; }
.ec-section, .ec-intro, .ec-couple, .ec-agenda, .ec-story, .ec-live, .ec-gifts, .ec-rsvp, .ec-ticket, .ec-gallery, .ec-health {
    background: var(--panel); -webkit-backdrop-filter: blur(12px) contrast(.3) brightness(2.8); backdrop-filter: blur(12px) contrast(.3) brightness(2.8);
    color: var(--ink); text-shadow: none;
    margin: 0 12px 22px; border: 1px solid rgba(255, 255, 255, .35);
}
@media (min-width: 1000px) { .ec-section, .ec-intro, .ec-couple, .ec-agenda, .ec-story, .ec-live, .ec-gifts, .ec-rsvp, .ec-ticket, .ec-gallery, .ec-health { margin-inline: auto; max-width: 1180px; } }
.ec-section { padding: clamp(56px, 8vw, 100px) clamp(22px, 6vw, 80px); }
.ec-intro { padding-block: clamp(56px, 8vw, 90px); }
.ec-health { padding-block: 44px; }
.ec-couple > .ec-heading, .ec-heading { margin-bottom: 40px; }
.ec-hero, .ec-interlude, .ec-end { text-shadow: 0 1px 16px rgba(8, 6, 5, .55), 0 0 2px rgba(8, 6, 5, .3); }

/* teks di panel terang */
.ec-kicker, .ec-profile-title { color: var(--muted); }
.ec-heading > p:last-child:not(.ec-kicker), .ec-intro cite, .ec-chapter-copy > p:first-child, .ec-shot, .ec-shot span { color: var(--muted); }
.ec-editorial-title, .ec-heading h2, .ec-agenda h2, .ec-gifts h2, .ec-live h2, .ec-rsvp h2, .ec-health h2 { color: #1f1814; }
.ec-person-name, .ec-seal { color: #5f4328; }
.ec-person-copy > p:last-of-type { color: var(--muted); }
.ec-person h3 { color: var(--ink); }
.ec-button { background: transparent; color: var(--ink); border: 1px solid rgba(43, 36, 32, .65); }
.ec-button:hover { background: #2b2420; color: #f5f0ea; }
.ec-form .ec-button { background: var(--brass); color: var(--on-brass); border-color: var(--brass); }
.ec-form .ec-button:hover { background: var(--brass); color: var(--on-brass); filter: brightness(.95); }
.ec-agenda .ec-button { background: transparent; border-color: rgba(43, 36, 32, .65); }
.ec-agenda .ec-event, .ec-agenda .ec-event:last-of-type, .ec-wishes figure, .ec-event, .ec-account, .ec-story-controls { border-color: rgba(43, 36, 32, .3); }
.ec-gift-envelope { border-block-color: rgba(43, 36, 32, .35); }
.ec-form input:not([type=radio]), .ec-form textarea { background: var(--glass); color: var(--ink); border: 1px solid rgba(43, 36, 32, .4); }
.ec-form input:focus-visible, .ec-form textarea:focus-visible { outline-color: #2b2420; }
.ec-form input[type=radio] { accent-color: #2b2420; }
.ec-map summary, .ec-text-link { color: inherit; }
.ec-event-toggle { color: var(--ink); }
.ec-qr { background: #fff; }
.ec-live > img, .ec-event-content > img, .ec-chapter-photo img, .ec-shot img { box-shadow: 0 10px 30px -18px rgba(30, 20, 10, .5); }

/* =====================================================================
   ALBUM BUKU TEBAL: sampul tertutup; satu gesekan membalik semua lembar beruntun
   ===================================================================== */
.ec-album { position: relative; aspect-ratio: auto; overflow: visible; background: transparent; }
.ec-book { position: relative; aspect-ratio: 4 / 5; margin: 0 20px 24px 0; perspective: 1500px; perspective-origin: 18% 40%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline-offset: 8px; }
.ec-book-block { position: absolute; inset: 0; border-radius: 3px 6px 6px 3px;
    box-shadow: 2px 2px 0 #eadfc5, 4px 4px 0 #c9b690, 6px 6px 0 #eee3cb, 8px 8px 0 #c4b088, 10px 10px 0 #ecdfc4, 12px 12px 0 #bfaa82, 14px 14px 0 #e8dbbf, 16px 16px 0 #b8a37b, 24px 26px 28px rgba(30, 20, 10, .5); }
.ec-base { position: absolute; inset: 0; }
.ec-leaf-page {
    position: absolute; inset: 0; padding: 8% 8% 6%;
    background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .45), transparent 55%), radial-gradient(circle at 80% 85%, rgba(150, 110, 60, .14), transparent 60%), linear-gradient(135deg, #f1e6d2, #e7d8bd);
    box-shadow: inset 0 0 38px rgba(120, 88, 48, .22);
}
.ec-leaf-page::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 7%; background: linear-gradient(90deg, rgba(70, 48, 24, .28), transparent); pointer-events: none; }
.ec-leaf-photo { position: relative; height: calc(100% - 38px); background: #d7c7aa; box-shadow: 0 0 0 1px rgba(80, 55, 30, .35), 0 3px 8px rgba(40, 25, 10, .28); }
.ec-leaf-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1) sepia(.28) contrast(1.02); }
.ec-pc { position: absolute; width: 22px; height: 22px; z-index: 2; background: #b9a47f; }
.ec-pc.a { left: -1px; top: -1px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.ec-pc.b { right: -1px; top: -1px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ec-pc.c { left: -1px; bottom: -1px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.ec-pc.d { right: -1px; bottom: -1px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.ec-leaf-cap { margin: 0; padding-top: 6px; height: 38px; text-align: center; font: 400 26px/1.1 var(--script); color: #5b4630; }
/* lembar yang dibalik: berporos di tulang punggung kiri */
.ec-flip { position: absolute; inset: 0; transform-origin: 0 50%; will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); border-radius: 3px 6px 6px 3px; pointer-events: none; }
.ec-flip[hidden] { display: none; }
.ec-paper { border-top: 1px solid rgba(120, 88, 48, .12); background: linear-gradient(90deg, rgba(70, 48, 24, .3), transparent 9%), linear-gradient(135deg, #f4e9d4, #e9dbbf); box-shadow: inset 0 0 22px rgba(120, 88, 48, .2), 1px 0 0 rgba(120, 88, 48, .35); }
.ec-paper[style*="--shade: 1"] { background: linear-gradient(90deg, rgba(70, 48, 24, .3), transparent 9%), linear-gradient(135deg, #efe2c9, #e3d2b2); }
.ec-paper[style*="--shade: 2"] { background: linear-gradient(90deg, rgba(70, 48, 24, .3), transparent 9%), linear-gradient(135deg, #f6ecd9, #ebdec5); }
.ec-topleaf { box-shadow: 1px 0 0 rgba(120, 88, 48, .35); }
.ec-topleaf .ec-leaf-page { border-radius: inherit; }
.ec-cover-leaf { pointer-events: auto; }
.ec-cover-face {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12% 12% 12% 16%; text-align: center; color: #dcc48f;
    border-radius: inherit;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px), linear-gradient(145deg, #5a4733, #3b2c1f 70%, #2f2318);
    box-shadow: inset 0 0 0 1px rgba(220, 196, 143, .5), inset 0 0 60px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .4);
}
.ec-cover-face::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 10%; background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .08)); border-right: 1px solid rgba(220, 196, 143, .4); border-radius: inherit; }
.ec-cover-face::after { content: ''; position: absolute; inset: 7% 6% 7% 14%; border: 1px solid rgba(220, 196, 143, .55); outline: 1px solid rgba(220, 196, 143, .25); outline-offset: 5px; pointer-events: none; }
.ec-cover-kicker { font: 400 10px/1.4 var(--sans); letter-spacing: .34em; text-transform: uppercase; }
.ec-cover-name { font: 400 clamp(40px, 11vw, 52px)/1.1 var(--script); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.ec-cover-rule { width: 44px; height: 1px; background: currentColor; opacity: .7; }
.ec-cover-hint { font: 300 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; opacity: .85; animation: ec-hint 2.6s ease-in-out infinite; }
@keyframes ec-hint { 0%, 100% { opacity: .5; transform: translateX(0); } 50% { opacity: 1; transform: translateX(-6px); } }
.ec-album-ui { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; font: 400 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ec-album-ui button { min-height: 44px; padding: 8px 2px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; font: inherit; letter-spacing: .12em; text-transform: uppercase; }
.ec-album-ui button:disabled { opacity: .35; border-bottom-color: transparent; cursor: default; }
@media (max-width: 700px) { .ec-leaf-cap { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .ec-cover-hint { animation: none; } }

/* ---- kertas realistis: tipis, melengkung, bergradasi, dengan serat dan tepi lembut ---- */
.ec-paper { background-color: #efe3cc; background-image: linear-gradient(90deg, rgba(60, 40, 18, .38) 0, rgba(60, 40, 18, .08) 7%, transparent 16%), radial-gradient(ellipse at 70% 30%, rgba(255, 255, 255, .35), transparent 60%), repeating-linear-gradient(7deg, rgba(120, 88, 48, .035) 0 1px, transparent 1px 3px); box-shadow: none; border-radius: 2px 7px 7px 2px; transform-style: preserve-3d; }
.ec-paper[style*="--shade: 1"] { background-color: #ead9bb; }
.ec-paper[style*="--shade: 2"] { background-color: #f3e8d2; }
.ec-seg { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: 0 50%; border-radius: 0 7px 7px 0; background-color: inherit; background-image: radial-gradient(ellipse at 40% 30%, rgba(255, 255, 255, .3), transparent 65%), repeating-linear-gradient(7deg, rgba(120, 88, 48, .035) 0 1px, transparent 1px 3px); box-shadow: 1px 0 1px rgba(90, 62, 30, .35); }
.ec-paper { background-color: inherit; }
.ec-paper[style*="--shade: 0"] .ec-seg, .ec-paper:not([style*="--shade"]) .ec-seg { background-color: #efe3cc; }
.ec-paper[style*="--shade: 1"] .ec-seg { background-color: #ead9bb; }
.ec-paper[style*="--shade: 2"] .ec-seg { background-color: #f3e8d2; }
.ec-seg-shade { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(50, 32, 12, .55), rgba(50, 32, 12, 0) 70%); opacity: 0; }
.ec-paper-shade { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(50, 32, 12, .35), rgba(50, 32, 12, 0) 55%); opacity: 0; pointer-events: none; }
.ec-topleaf { box-shadow: 0 0 0 1px rgba(120, 88, 48, .25), 2px 3px 6px rgba(40, 25, 10, .25); }
.ec-book-block { box-shadow: 1px 1px 0 #efe4cd, 2px 2px 0 #cdb996, 3px 3px 0 #f1e7d1, 4px 4px 0 #cfbb98, 5px 5px 0 #eee2c9, 6px 6px 0 #c8b38d, 7px 7px 0 #efe4cc, 8px 8px 0 #c3ad86, 9px 9px 0 #ecdfc5, 10px 10px 0 #beaa81, 14px 16px 20px rgba(30, 20, 10, .45); }
.ec-cover-face { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 2px), radial-gradient(ellipse at 30% 25%, rgba(120, 88, 56, .55), transparent 60%), linear-gradient(145deg, #5a4733, #3b2c1f 70%, #2c2016); box-shadow: inset 0 0 0 1px rgba(220, 196, 143, .35), inset 0 0 50px rgba(0, 0, 0, .45), inset 6px 0 10px rgba(0, 0, 0, .4); }
.ec-cover-face::before { border-right: 0; width: 7%; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .06) 55%, rgba(0, 0, 0, .35)); }

/* ---- huruf judul lebih kecil ---- */
.ec-editorial-title, .ec-heading h2, .ec-agenda h2, .ec-gifts h2, .ec-live h2, .ec-rsvp h2 { font-size: clamp(26px, 6.8vw, 32px); line-height: 1.25; }
.ec-health h2 { font-size: 24px; }
.ec-names { font-size: clamp(40px, 10.6vw, 48px); }
.ec-end-copy .ec-names { font-size: clamp(36px, 9.4vw, 44px); }
.ec-person-name { font-size: clamp(32px, 8.4vw, 38px); }
.ec-signature { font-size: clamp(28px, 7.4vw, 34px); }
.ec-interlude-date { font-size: clamp(26px, 6.6vw, 34px); }
.ec-cover-name { font-size: clamp(34px, 9.4vw, 42px); }
@media (min-width: 701px) { .ec-editorial-title, .ec-heading h2, .ec-agenda h2, .ec-gifts h2, .ec-live h2, .ec-rsvp h2 { font-size: clamp(34px, 3.2vw, 44px); } .ec-names { font-size: clamp(52px, 4.8vw, 70px); } }

/* ---- panel transparan penuh: latar diberi sapuan ivory tipis, teks gelap ---- */
:root { --ink: #231c18; --muted: #382e28; }
.ec-backdrop-shade { background: rgba(246, 241, 233, .74); }
.ec-section, .ec-intro, .ec-couple, .ec-agenda, .ec-story, .ec-live, .ec-gifts, .ec-rsvp, .ec-ticket, .ec-gallery, .ec-health {
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; margin: 0;
}
.ec-section + .ec-section { border-top: 1px solid rgba(43, 36, 32, .12); }
/* bagian bertulisan terang diberi tirai gelap sendiri agar tetap terbaca di atas latar terang */
.ec-hero, .ec-interlude, .ec-end { background: linear-gradient(180deg, rgba(14, 12, 11, 0) 0, rgba(14, 12, 11, .62) 14%, rgba(14, 12, 11, .62) 86%, rgba(14, 12, 11, 0) 100%); }
.ec-hero { background: rgba(14, 12, 11, .62); }
.ec-nav { background: rgba(246, 241, 233, .8); color: var(--ink); border-bottom: 1px solid rgba(43, 36, 32, .2); }
.ec-nav a[aria-current] { box-shadow: inset 0 -1px var(--ink); }
.ec-leaf-cap, .ec-qr, .ec-qr * { text-shadow: none; }
.ec-form input:not([type=radio]), .ec-form textarea { background: rgba(255, 255, 255, .5); }
.ec-music, .ec-motion-toggle { background: rgba(246, 241, 233, .85); color: var(--ink); border-color: rgba(43, 36, 32, .5); }
.ec-music[aria-pressed=true]::after { border-color: var(--ink); }

/* ---- lenturan kertas: tiga bagian berengsel beruntun ---- */
.ec-seg { left: 35%; width: 32.5%; border-radius: 0; box-shadow: none; }
.ec-seg2 { left: 100%; width: 100%; border-radius: 0 7px 7px 0; box-shadow: 1px 0 1px rgba(90, 62, 30, .35); }
.ec-seg-shade { background: linear-gradient(90deg, rgba(50, 32, 12, .5), rgba(50, 32, 12, 0) 85%); }

/* =====================================================================
   SAMPUL DEPAN: video terlihat jelas di balik sampul; komposisi minimal dan tenang
   ===================================================================== */
.ec-cover { background: transparent; }
.ec-cover::backdrop { background: transparent; }
.ec-case-photo { display: none; }
body.ec-cover-open main, body.ec-cover-open .ec-nav, body.ec-cover-open .ec-music, body.ec-cover-open .ec-motion-toggle { visibility: hidden; }
body.ec-cover-open .ec-backdrop-shade { background: linear-gradient(180deg, rgba(10, 8, 7, .5) 0%, rgba(10, 8, 7, .08) 34%, rgba(10, 8, 7, .08) 58%, rgba(10, 8, 7, .62) 100%); }
.ec-case { min-height: 0; flex: 1 1 auto; }
.ec-cover-copy { justify-content: flex-start; padding: max(56px, 9svh) 8% 0; }
.ec-cover-mono { font: 300 22px/1 var(--serif); letter-spacing: .5em; padding-left: .5em; margin-bottom: 30px; position: relative; }
.ec-cover-mono::after { content: ''; display: block; width: 1px; height: 38px; background: rgba(245, 240, 234, .7); margin: 22px auto 0; }
.ec-cover-title { font: 300 11px/1.6 var(--sans); letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; opacity: .92; }
.ec-cover-copy h1 { display: flex; flex-direction: column; align-items: center; font: 400 clamp(44px, 12.4vw, 56px)/1.12 var(--script); margin: 26px 0 22px; text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }
.ec-cover-copy h1 i { font: italic 300 20px/1.5 var(--serif); letter-spacing: .1em; margin: 2px 0; opacity: .9; }
.ec-cover-copy > p:last-child { font: 300 12px/1.6 var(--sans); letter-spacing: .36em; padding-left: .36em; text-transform: uppercase; }
.ec-cover-copy > p:last-child::before, .ec-cover-copy > p:last-child::after { content: ''; display: block; width: 28px; height: 1px; background: rgba(245, 240, 234, .6); margin: 14px auto; }
.ec-cover-bottom { padding: 0 24px max(48px, env(safe-area-inset-bottom)); text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }
.ec-cover-bottom > p:first-child { font: 300 10.5px/1.6 var(--sans); letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; opacity: .9; }
.ec-cover-bottom strong { font: 400 26px/1.25 var(--serif); letter-spacing: .02em; margin-top: 4px; }
.ec-address { font: 300 12px/1.6 var(--sans); letter-spacing: .1em; opacity: .85; }
.ec-open { min-width: 0; margin-top: 26px; border: 1px solid rgba(245, 240, 234, .8); background: rgba(245, 240, 234, .06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 400 11px/1.4 var(--sans); letter-spacing: .38em; padding: 15px 38px 15px calc(38px + .38em); text-shadow: none; }
.ec-open { color: #f5f0ea; }
.ec-open:hover { background: rgba(245, 240, 234, .94); color: #1c1815; }

/* =====================================================================
   COVER ALBUM PREMIUM: kain linen gading, cap timbul, tipografi foil champagne
   ===================================================================== */
.ec-cover-face {
    gap: 0; padding: 0 8% 0 14%; color: #8a6d45; justify-content: center;
    background:
        repeating-linear-gradient(0deg, rgba(120, 100, 70, .045) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(120, 100, 70, .04) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, .6), transparent 58%),
        linear-gradient(150deg, #f0e9dc, #e3d9c6 72%, #d8ccb5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset -3px 0 6px rgba(80, 60, 30, .08), 0 2px 8px rgba(40, 30, 15, .28);
}
.ec-cover-face::before { width: 8%; background: linear-gradient(90deg, rgba(90, 70, 40, .3), rgba(255, 255, 255, .25) 45%, rgba(90, 70, 40, .22)); border: 0; }
.ec-cover-face::after { inset: 9% 7% 9% 15%; border: 1px solid rgba(140, 115, 75, .28); outline: 0; box-shadow: inset 1px 1px 2px rgba(255, 255, 255, .7), 1px 1px 2px rgba(80, 60, 30, .12); }
.ec-cover-kicker { font: 400 9.5px/1.6 var(--sans); letter-spacing: .5em; padding-left: .5em; color: #9c8157; margin-bottom: 26px; }
.ec-cover-name { font: 300 clamp(20px, 5.6vw, 24px)/1.4 var(--serif); letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; color: #8a6a3c; text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(120, 90, 50, .25); }
.ec-cover-rule { width: 1px; height: 36px; margin: 22px 0; background: #b39a6e; opacity: .8; }
.ec-cover-hint { font: 300 9.5px/1.4 var(--sans); letter-spacing: .36em; padding-left: .36em; color: #9c8157; animation: none; }
.ec-book-block { box-shadow: 1px 1px 0 #f3ead7, 2px 2px 0 #d8c6a2, 3px 3px 0 #f5ecda, 4px 4px 0 #d5c29c, 5px 5px 0 #f3e9d5, 6px 6px 0 #cfbb94, 7px 7px 0 #f1e7d2, 8px 8px 0 #cbb68e, 14px 16px 22px rgba(30, 20, 10, .35); }

/* =====================================================================
   KERTAS LENTUR: enam engsel beruntun
   ===================================================================== */
.ec-flip, .ec-seg { transform-style: preserve-3d; }
.ec-seg { left: 24%; width: 6.33%; border-radius: 0; }
.ec-seg > .ec-seg { left: 100%; width: 100%; }
.ec-seg-shade { background: rgba(60, 40, 16, .5); }

/* ---- ringan: tanpa 3D bersarang, tanpa promosi lapisan berlebihan ---- */
.ec-flip, .ec-seg { transform-style: flat; }
.ec-flip { will-change: transform; transform: none; }
.ec-seg { left: 24%; width: 12.67%; will-change: auto; }
.ec-seg-shade { transition: none; }
.ec-book { perspective: 1200px; }
.ec-paper { box-shadow: none; }

/* ---- sampul depan: nama tamu lebih kecil ---- */
.ec-cover-bottom strong { font-size: 19px; letter-spacing: .06em; text-transform: none; font-weight: 400; }
.ec-cover-bottom > p:first-child { font-size: 10px; }

/* ---- halaman "The story of two": tanpa tirai gelap agar video bersih ---- */
.ec-hero { background: none; text-shadow: 0 1px 18px rgba(0, 0, 0, .7), 0 0 3px rgba(0, 0, 0, .45); }
/* sapuan ivory latar dilepas selama halaman hero terlihat; scrim gelap tipis menjaga teks terbaca */
.ec-backdrop-shade { transition: background-color .6s ease; }
.ec-backdrop-shade::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 7, .42), rgba(10, 8, 7, .1) 40%, rgba(10, 8, 7, .1) 60%, rgba(10, 8, 7, .46)); opacity: 0; transition: opacity .6s ease; }
body.ec-on-hero .ec-backdrop-shade { background-color: transparent; }
body.ec-on-hero .ec-backdrop-shade::before { opacity: 1; }

/* =====================================================================
   PANEL KACA (seperti versi sebelumnya): krem 20% + latar dilembutkan; latar dasar gelap tipis
   ===================================================================== */
:root { --ink: #2b2420; --muted: #4d413a; --line: rgba(43, 36, 32, .3); --panel: rgba(250, 246, 239, .2); }
.ec-backdrop-shade { background: linear-gradient(180deg, rgba(14, 12, 11, .66) 0%, rgba(14, 12, 11, .62) 50%, rgba(14, 12, 11, .7) 100%); }
.ec-section, .ec-intro, .ec-couple, .ec-agenda, .ec-story, .ec-live, .ec-gifts, .ec-rsvp, .ec-ticket, .ec-gallery, .ec-health {
    background: var(--panel); -webkit-backdrop-filter: blur(12px) contrast(.3) brightness(2.8); backdrop-filter: blur(12px) contrast(.3) brightness(2.8);
    border: 1px solid rgba(255, 255, 255, .35); margin: 0 12px 22px; color: var(--ink);
}
@media (min-width: 1000px) { .ec-section, .ec-intro, .ec-couple, .ec-agenda, .ec-story, .ec-live, .ec-gifts, .ec-rsvp, .ec-ticket, .ec-gallery, .ec-health { margin-inline: auto; max-width: 1180px; } }
.ec-section + .ec-section { border-top: 1px solid rgba(255, 255, 255, .35); }
.ec-nav { background: rgba(14, 12, 11, .42); color: var(--paper); border-bottom: 1px solid rgba(245, 240, 234, .22); }
.ec-nav a[aria-current] { box-shadow: inset 0 -1px var(--paper); }
.ec-music, .ec-motion-toggle { background: rgba(14, 12, 11, .72); color: var(--paper); border-color: rgba(245, 240, 234, .7); }
.ec-music[aria-pressed=true]::after { border-color: var(--paper); }
.ec-hero, .ec-interlude, .ec-end { background: none; }

/* =====================================================================
   LEMBAR BERFOTO MELENGKUNG + 3D BERSARANG (lebih lentur)
   ===================================================================== */
.ec-flip, .ec-seg { transform-style: preserve-3d; }
.ec-topleaf .ec-leaf-page { display: none; }
.ec-tl-base { position: absolute; left: 0; top: 0; bottom: 0; width: 24%; }
.ec-tl-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.ec-tl-clone { position: absolute; top: 0; height: 100%; }
.ec-tl-clone .ec-leaf-page { display: block; position: absolute; inset: 0; }
.ec-topleaf .ec-seg { background: none; box-shadow: none; }
.ec-topleaf .ec-seg-shade { z-index: 2; pointer-events: none; }

/* =====================================================================
   KACA NYARIS TRANSPARAN + TRANSISI MASUK: awalnya tanpa latar, lalu memudar menjadi kaca tipis saat digulir
   ===================================================================== */
:root { --panel: rgba(250, 246, 239, .12); }
.ec-section, .ec-intro, .ec-couple, .ec-agenda, .ec-story, .ec-live, .ec-gifts, .ec-rsvp, .ec-ticket, .ec-gallery, .ec-health {
    background: rgba(250, 246, 239, 0);
    -webkit-backdrop-filter: blur(0) contrast(1) brightness(1); backdrop-filter: blur(0) contrast(1) brightness(1);
    border-color: rgba(255, 255, 255, 0);
    transition: background-color 1.1s ease, backdrop-filter 1.1s ease, -webkit-backdrop-filter 1.1s ease, border-color 1.1s ease;
}
.ec-section.ec-glass-in, .ec-intro.ec-glass-in, .ec-couple.ec-glass-in, .ec-agenda.ec-glass-in, .ec-story.ec-glass-in, .ec-live.ec-glass-in, .ec-gifts.ec-glass-in, .ec-rsvp.ec-glass-in, .ec-ticket.ec-glass-in, .ec-gallery.ec-glass-in, .ec-health.ec-glass-in {
    background: var(--panel);
    -webkit-backdrop-filter: blur(10px) contrast(.4) brightness(2.4); backdrop-filter: blur(10px) contrast(.4) brightness(2.4);
    border-color: rgba(255, 255, 255, .3);
}
@media (prefers-reduced-motion: reduce) { .ec-section, .ec-intro, .ec-couple, .ec-agenda, .ec-story, .ec-live, .ec-gifts, .ec-rsvp, .ec-ticket, .ec-gallery, .ec-health { transition: none; } }

/* =====================================================================
   KEMBALI KE VERSI DISUKAI: panel transparan penuh, latar disapu ivory, dan sapuan itu muncul PERLAHAN mengikuti gulir
   (--p: 0 di hero = video bersih; 1 = sapuan ivory penuh). Tidak ada lompatan saat melewati ambang.
   ===================================================================== */
:root { --ink: #231c18; --muted: #382e28; --line: rgba(43, 36, 32, .3); }
.ec-backdrop-shade, body.ec-on-hero .ec-backdrop-shade { background: rgba(246, 241, 233, calc(.74 * var(--p, 1))); transition: none; }
.ec-backdrop-shade::before, body.ec-on-hero .ec-backdrop-shade::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 7, .46), rgba(10, 8, 7, .12) 40%, rgba(10, 8, 7, .12) 60%, rgba(10, 8, 7, .5)); opacity: calc(1 - var(--p, 1)); transition: none; }
body.ec-cover-open .ec-backdrop-shade { background: linear-gradient(180deg, rgba(10, 8, 7, .5) 0%, rgba(10, 8, 7, .08) 34%, rgba(10, 8, 7, .08) 58%, rgba(10, 8, 7, .62) 100%); }
body.ec-cover-open .ec-backdrop-shade::before { opacity: 0; }
.ec-section, .ec-intro, .ec-couple, .ec-agenda, .ec-story, .ec-live, .ec-gifts, .ec-rsvp, .ec-ticket, .ec-gallery, .ec-health, .ec-section.ec-glass-in, .ec-intro.ec-glass-in, .ec-couple.ec-glass-in, .ec-agenda.ec-glass-in, .ec-story.ec-glass-in, .ec-live.ec-glass-in, .ec-gifts.ec-glass-in, .ec-rsvp.ec-glass-in, .ec-ticket.ec-glass-in, .ec-gallery.ec-glass-in, .ec-health.ec-glass-in {
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; margin: 0; transition: none; color: var(--ink);
}
.ec-section + .ec-section { border-top: 1px solid rgba(43, 36, 32, .12); }
.ec-hero { background: none; }
.ec-interlude, .ec-end { background: linear-gradient(180deg, rgba(14, 12, 11, 0) 0, rgba(14, 12, 11, .62) 14%, rgba(14, 12, 11, .62) 86%, rgba(14, 12, 11, 0) 100%); }
.ec-nav { background: rgba(246, 241, 233, .8); color: var(--ink); border-bottom: 1px solid rgba(43, 36, 32, .2); }
.ec-nav a[aria-current] { box-shadow: inset 0 -1px var(--ink); }
.ec-music, .ec-motion-toggle { background: rgba(246, 241, 233, .85); color: var(--ink); border-color: rgba(43, 36, 32, .5); }
.ec-music[aria-pressed=true]::after { border-color: var(--ink); }
.ec-form input:not([type=radio]), .ec-form textarea { background: rgba(255, 255, 255, .5); }

/* =====================================================================
   EFEK MASUK BAGIAN ISI: foto tersingkap (kiri/kanan/bawah) sambil mengendap, judul naik dari buram, teks naik berurutan
   ===================================================================== */
.ec-motion [data-reveal=photo] { opacity: 1; clip-path: inset(0 0 100% 0); transform: scale(1.06); transition: clip-path 1.25s cubic-bezier(.77, 0, .18, 1), transform 1.9s cubic-bezier(.2, .7, .2, 1); }
.ec-motion [data-reveal=photo][data-dir=l] { clip-path: inset(0 100% 0 0); }
.ec-motion [data-reveal=photo][data-dir=r] { clip-path: inset(0 0 0 100%); }
.ec-motion [data-reveal=heading] { opacity: 0; transform: translateY(24px); filter: blur(7px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1), filter 1s ease; }
.ec-motion [data-reveal=text] { opacity: 0; transform: translateY(28px); transition: opacity .95s ease var(--d, 0s), transform 1.05s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.ec-motion [data-reveal].ec-enter { clip-path: inset(0); opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .ec-motion [data-reveal] { opacity: 1; clip-path: none; transform: none; filter: none; } }

/* ---- bagian salam pembuka: huruf lebih kecil ---- */
.ec-intro .ec-editorial-title { font-size: clamp(22px, 5.6vw, 27px); line-height: 1.3; }
.ec-intro-copy > p { font-size: 13.5px; line-height: 1.75; margin-bottom: 14px; }
.ec-intro .ec-arab { font-size: 19px; line-height: 2; }
.ec-intro blockquote { font-size: 16px; line-height: 1.7; margin-top: 24px; }
.ec-intro cite { font-size: 11.5px; margin-top: 12px; }
@media (min-width: 701px) { .ec-intro .ec-editorial-title { font-size: clamp(28px, 2.6vw, 36px); } .ec-intro-copy > p { font-size: 14.5px; } .ec-intro .ec-arab { font-size: 21px; } .ec-intro blockquote { font-size: 18px; } }

/* ---- lembar foto: tanpa bingkai/bayangan kaku di induknya (kertas yang melengkung membawa bayangannya sendiri) ---- */
.ec-topleaf { box-shadow: none; border-radius: 0; }

/* ---- garis tegak di lembar yang melengkung: tiap irisan melebar 1,5px menimpa sambungan ke irisan berikutnya ---- */
.ec-topleaf .ec-tl-clip { right: -1.5px; }

.ec-topleaf .ec-seg-shade { background: linear-gradient(90deg, rgba(60, 40, 16, var(--sa, 0)), rgba(60, 40, 16, var(--sb, 0))); opacity: 1; }
.ec-topleaf .ec-seg-shade { display: none; }   /* lapisan bayangan per irisan memunculkan garis tegak di sambungan; kelengkungan cukup terbaca dari bentuknya */

/* ---- foto album berwarna (bukan hitam-putih); irisan lembar saling menimpa 3px agar tak ada celah garis tegak di Safari ---- */
.ec-leaf-photo img { filter: none; }
.ec-topleaf .ec-tl-clip { right: -3px; }

/* ---- sudut foto halaman di bawah tidak boleh menembus ke atas lembar yang sedang dibalik ---- */
.ec-base { isolation: isolate; z-index: 0; }

/* tombol musik / gerak: kecil, tembus pandang, tidak menarik mata */
.ec-music, .ec-motion-toggle { width: 26px; height: 26px; opacity: .55; border-width: 0; box-shadow: none; }
.ec-music svg, .ec-motion-toggle svg { width: 12px; height: 12px; }
.ec-music:hover, .ec-motion-toggle:hover { opacity: .9; }
.ec-music[aria-pressed=true]::after { inset: 4px; }
.ec-motion-toggle { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 34px); }