@font-face{font-family:Belgan;src:url('assets/belgant.woff') format('woff');font-display:swap}@font-face{font-family:Metropolis;src:url('assets/metropolis.woff') format('woff');font-weight:300 500;font-display:swap}@font-face{font-family:Metropolis;src:url('assets/metropolis-bold.woff') format('woff');font-weight:600 800;font-display:swap}@font-face{font-family:Antura;src:url('assets/antura.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:0}body{margin:0;background:#171914;color:white;font-family:Metropolis,Arial,sans-serif;font-size:14px;line-height:1.5}body.sealed{overflow:hidden}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid white;outline-offset:5px}p{margin:0 0 16px}h1,h2,h3{margin:0}h2{font-family:Belgan,Georgia,serif;font-size:42px;font-weight:400;line-height:1.05}img{display:block;width:100%;object-fit:cover}.eyebrow{font-size:14px;line-height:1.4;font-weight:700;letter-spacing:1px;margin:0 0 12px}.date-line{font-size:14px;font-weight:600;margin:18px 0 0}.names{font-family:Belgan,Georgia,serif;font-size:60px;line-height:1;position:relative;width:fit-content;text-align:left;font-weight:400}.names>span{display:block;position:relative;z-index:1}.names i{position:absolute;right:-50px;bottom:-10px;font-family:Belgan,serif;font-style:normal;font-size:100px;color:#ffffff50;line-height:1}.button{border:0;border-radius:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#ffffff50;padding:12px 30px;color:#fff;font-weight:700;font-size:13px;line-height:1.1;box-shadow:0 10px 20px #0001;backdrop-filter:blur(6px);transition:background .25s,transform .25s}.button:hover{background:#ffffff75;transform:translateY(-2px)}.text-link{display:inline-block;color:inherit;background:transparent;border:0;border-bottom:1px solid #ffffff70;padding:8px 0;font-size:12px}.cover{position:fixed;inset:0;z-index:100;color:#fff;background:#181b16;transition:transform 1.5s cubic-bezier(.77,0,.175,1),visibility 1.5s;overflow:hidden}.cover-photo{height:100%;object-position:50% 48%}.cover-shade{position:absolute;inset:0;background:#0005}.cover-top{position:absolute;top:19%;left:50%;transform:translateX(-50%);text-align:center;min-width:290px}.cover-top .names{margin:auto}.cover-top .names i{right:-55px}.cover-bottom{position:absolute;top:64%;left:50%;transform:translateX(-50%);width:360px;max-width:88%;text-align:center}.cover-bottom p{font-size:14px;margin:0 0 3px}.cover-bottom strong{display:block;font-size:18px;font-weight:700}.cover-bottom small{display:block;font-size:10px;font-style:italic;border-top:1px solid #ffffff60;padding-top:8px;margin:8px 0 12px}.cover-bottom .button{border-radius:6px;font-size:14px;padding:12px 24px}.cover.opened{transform:translateY(-105%);visibility:hidden;pointer-events:none}.desktop-story{position:fixed;inset:0 auto 0 0;width:60%;height:100dvh;overflow:hidden}.desktop-story>img{height:100%;object-position:50% 48%}.shade{position:absolute;inset:0;background:linear-gradient(#0004,#0005 45%,#0009)}.desktop-story>.shade{background:#0005}.desktop-title{position:absolute;left:7%;top:7%}.desktop-title .names{font-size:80px}.desktop-title .names i{left:-15px;right:auto;bottom:35px;font-size:100px}.desktop-title .eyebrow{margin-bottom:20px}main{position:relative;width:40%;margin-left:60%;isolation:isolate;overflow:clip}.film-background{position:fixed;inset:0 0 0 60%;z-index:-1;background:#33352e}.film-background video{width:100%;height:100%;object-fit:cover}.film-shade{position:absolute;inset:0;background:#0009}.scene{position:relative;min-height:100svh;padding:65px 32px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.scene-image{position:absolute;inset:0;height:100%;z-index:-2}.scene>.shade{z-index:-1}.scene:has(>.scene-image){isolation:isolate}.hero{align-items:center;text-align:center}.hero-heading{position:absolute;top:29%;left:0;right:0}.hero .names{margin:auto}.scroll-hint{position:absolute;left:50%;top:63%;font-size:9px;letter-spacing:1px;writing-mode:vertical-rl;transform:translateX(-50%)}.scroll-hint span{font-size:35px;line-height:1;padding-top:16px}.verse{justify-content:space-between;padding-top:80px;padding-bottom:90px}.initials{position:relative;font-family:Belgan,serif;width:140px;height:150px;margin:0 auto;font-size:80px;line-height:1}.initials span:first-child{position:absolute;top:0;left:20px}.initials span:last-child{position:absolute;right:5px;bottom:0}.initials i{position:absolute;font-family:Antura,cursive;font-size:95px;color:#ffffff88;left:38px;top:17px}.verse-copy h2{margin-bottom:25px}.verse-copy blockquote{font-size:16px;line-height:1.5;margin:0}.person{padding:0 25px 80px;justify-content:flex-end}.person .shade{background:linear-gradient(transparent,#0001 20%,#0009 70%,#000c)}.groom-photo{object-position:73% center;transform:scale(1.25);transform-origin:78% 70%}.bride-photo{object-position:30% center;transform:scale(1.2);transform-origin:28% 65%}.person-copy{position:relative;margin-bottom:8vh}.person-name{position:relative}.person-name h2{font-size:70px;position:relative}.script-name{position:absolute;left:35px;top:33px;font-family:Antura,cursive;font-size:100px;color:#ffffff45;line-height:1;pointer-events:none}.person h3{font-size:20px;line-height:1.3;margin:15px 0 10px;font-weight:700;position:relative}.person p{font-size:14px;line-height:1.7;position:relative}.rule{height:1px;background:#ffffff80;margin:15px 0}.vertical-label{position:absolute;top:40px;left:14px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:20px;font-weight:600;color:#ffffffa0;display:flex;align-items:center;gap:15px}.vertical-label:before{content:'';height:70px;width:1px;background:#ffffff70}.bride .person-copy{text-align:right}.bride .script-name{left:auto;right:40px}.bride .vertical-label{left:auto;right:14px}.lovestory{padding:80px 35px}.lovestory h2{font-size:42px;margin-bottom:40px}.lovestory .shade{background:#000a}.story-scroll{max-height:310px;overflow:auto;padding-right:15px;scrollbar-width:thin;scrollbar-color:#ffffff80 transparent}.story-scroll article{margin-bottom:45px}.story-scroll h3{font-family:Belgan,serif;font-size:27px;margin-bottom:14px}.story-scroll p{font-size:14px;line-height:1.8}.lovestory>small{margin-top:22px;font-size:10px;font-style:italic}.save-date{padding-left:60px}.date-rail{position:absolute;top:0;bottom:0;left:20px;width:1px;background:#ffffff80}.date-rail span{position:absolute;top:15%;left:-20px;font-family:Belgan,serif;font-size:35px;line-height:1;padding:12px 0;background:#46463f;width:40px;text-align:center}.countdown-content h2{font-size:36px;margin-bottom:25px}.countdown{display:flex;gap:22px;margin-bottom:28px}.countdown b{display:block;font-size:29px;font-weight:400;line-height:1.1}.countdown span{font-size:12px}.event{padding:60px 30px;text-align:center}.event>.shade{background:#0009}.event-content{position:relative;z-index:2}.event h2{font-size:36px}.event-date{display:grid;grid-template-columns:1fr 65px 1fr;align-items:center;gap:15px;margin:30px 0}.event-date>span{border-top:1px solid #fff;border-bottom:1px solid #fff;padding:17px 0;font-size:12px}.event-date>div{font-family:Belgan,serif;font-size:16px;line-height:1.1}.event-date strong{font-size:42px;font-weight:400;display:block}.event h3{font-size:16px;line-height:1.5;margin-bottom:7px}.event p{font-size:14px;margin-bottom:25px}.event-watermark{position:absolute;right:10px;top:48%;font-family:Belgan,serif;font-size:48px;color:#ffffff30;line-height:.9}.event-watermark i{font-size:25px;display:inline-block;padding:25px}.reception .scene-image{object-position:50% 60%}.rsvp{padding:70px 35px;min-height:115svh;overflow:visible}.section-label{display:flex;align-items:center;justify-content:flex-end;gap:20px;font-size:14px;font-weight:700;margin-bottom:35px}.section-label:before{content:'';flex:1;height:1px;background:#ffffff80}.rsvp h2{font-size:42px;margin:0 0 25px}.rsvp>p{font-size:14px;line-height:1.6}.rsvp form{margin-top:20px}label{display:block;font-size:12px;margin-bottom:20px}input,select,textarea{font:inherit;color:white;background:#fff1;border:1px solid #ffffffa0;border-radius:0;display:block;padding:12px;width:100%;margin-top:8px}select option{color:#222;background:#eee}input[readonly]{opacity:.8}input:focus,textarea:focus,select:focus{outline:1px solid white;outline-offset:3px}textarea::placeholder{color:#ffffffa0}label small{font-size:10px;float:right}.rsvp form>small{display:block;font-size:10px;opacity:.8;margin-bottom:20px}.rsvp .button{width:100%;border-radius:4px}.notice{border:1px solid #ffffff60;padding:18px}.wishes{margin-top:65px;border-top:1px solid #ffffff60;padding-top:30px}.wishes>.eyebrow{font-family:Belgan,serif;font-size:32px;font-weight:400}.wish{border-bottom:1px solid #ffffff40;padding:20px 0}.wish b{font-size:15px}.wish p{white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 0;font-size:13px}.gallery{padding:25px 0;background:#151713c9;min-height:100svh}.gallery-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 12px}.gallery-track button{flex:0 0 42%;height:210px;padding:0;border:0;background:#343b31;scroll-snap-align:center;overflow:hidden}.gallery-track img{height:100%;transition:transform .6s}.gallery-track button:hover img{transform:scale(1.05)}.gallery-track.reverse{direction:rtl}.gallery-title{text-align:center;padding:30px 20px}.gallery-title h2{font-size:40px}.gallery-title p{font-size:11px;margin:10px 0}.gallery-title small{font-size:10px;opacity:.7}.gallery-quote{font-family:Belgan,serif;font-size:20px;text-align:center;font-style:italic;padding:25px 20px 0;margin:0}.gift{padding:70px 35px}.gift>p{font-size:14px;line-height:1.7}.gift>.button{align-self:flex-start;margin-top:15px}.bank{padding:24px 0;border-bottom:1px solid #ffffff70;text-align:left}.bank-name{font-family:Georgia,serif;font-size:28px;font-weight:bold}.bank p{font-size:22px;letter-spacing:2px;margin:15px 0 5px}.bank small{display:block;font-size:11px}.bank .text-link{margin-top:10px}.closing{padding:60px 30px 100px;justify-content:center;text-align:center}.closing>.shade{background:#0009}.closing h2{font-size:34px;line-height:1.1}.closing p{font-size:14px;margin:25px 0}.closing h3{font-family:Belgan,serif;font-size:32px;font-weight:400}.closing-foot{position:absolute;bottom:35px;left:0;right:0;display:flex;flex-direction:column;gap:5px}.mini-monogram{font-family:Belgan,serif;font-size:27px}.closing-foot small{font-size:8px;letter-spacing:1px}#menu-toggle{position:fixed;right:25px;top:25px;width:30px;height:24px;background:none;border:0;padding:3px;z-index:50}#menu-toggle span{display:block;height:2px;background:#fff;margin:6px 0;width:24px;transition:transform .3s}#menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}#menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}#menu{position:fixed;inset:0 0 0 60%;z-index:40;background:#20231ef5;backdrop-filter:blur(20px);padding:55px 25px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:17px;text-align:center}#menu a{font-family:Belgan,serif;font-size:28px;line-height:1.2}#menu a:hover{color:#d4c6b3}.menu-monogram{font-family:Belgan,serif;font-size:42px;margin-bottom:12px}.menu-monogram i{color:#ffffff60;font-style:normal}#menu small{font-size:10px;opacity:.6;margin-top:20px}#motion-toggle{position:fixed;left:18px;bottom:20px;width:34px;height:34px;border:0;border-radius:50%;background:#ffffff50;color:#fff;z-index:35;backdrop-filter:blur(6px);font-size:18px}dialog{border:0;padding:0;background:#121511;max-width:95vw;max-height:95dvh;color:white}dialog::backdrop{background:#000e}dialog img{height:90dvh;max-width:95vw;object-fit:contain}dialog button{position:absolute;right:10px;top:10px;background:#fff;color:#222;border:0;border-radius:50%;width:38px;height:38px;font-size:25px}.toast{position:fixed;bottom:65px;left:50%;transform:translateX(-50%);background:#fff;color:#222;padding:12px 22px;z-index:200;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90%;font-size:12px}.toast.show{opacity:1}[hidden]{display:none!important}.reveal{transition:opacity 1.2s,transform 1.2s}.js-reveal{opacity:0;transform:translateY(35px)}.js-reveal.visible{opacity:1;transform:none}
@media(max-width:1024px){.desktop-story{display:none}main{width:100%;margin:0}.film-background{left:0}#menu{left:0}.scene{padding-left:8%;padding-right:8%}.hero .names,.cover .names{font-size:60px}.person{padding-left:5%;padding-right:5%}.person-copy{margin-bottom:8vh}.groom-photo{transform:scale(1.25)}.bride-photo{transform:scale(1.15)}.verse{padding-top:100px;padding-bottom:100px}.save-date{padding-left:12%}.event{padding-left:8%;padding-right:8%}.gallery{padding-left:0;padding-right:0}.gallery-track button{flex-basis:35%;height:230px}.rsvp{min-height:100svh}.closing h2{font-size:40px}.cover-photo{object-position:50% center}}
@media(max-width:600px){body{font-size:13px}.scene{min-height:100svh}.cover-top{top:20%}.cover-bottom{top:65%;width:330px}.cover-bottom small{font-size:9px}.eyebrow{font-size:13px}.date-line{font-size:12px}.hero-heading{top:30%}.verse{padding-top:65px;padding-bottom:70px}.verse h2{font-size:36px}.verse blockquote{font-size:14px}.initials{transform:scale(.9)}.person-copy{margin-bottom:5vh}.person h3{font-size:17px}.person p{font-size:13px}.person-name h2{font-size:65px}.person .vertical-label{font-size:16px}.groom-photo{transform:scale(1.4);transform-origin:82% 65%}.bride-photo{transform:scale(1.4);transform-origin:20% 65%}.lovestory h2{font-size:36px}.save-date{padding-left:65px}.countdown-content h2{font-size:32px}.countdown{gap:17px}.countdown b{font-size:26px}.countdown span{font-size:11px}.event h2{font-size:32px}.event-date{grid-template-columns:1fr 55px 1fr;gap:10px}.event-date>span{font-size:10px}.event h3{font-size:15px}.event p{font-size:13px}.event-watermark{font-size:42px}.rsvp{padding-top:80px;padding-bottom:60px}.rsvp h2{font-size:36px}.gallery-track button{flex-basis:47%;height:200px}.gallery-title h2{font-size:35px}.gallery-quote{font-size:18px}.closing h2{font-size:31px}.closing h3{font-size:30px}.closing p{font-size:13px}#menu-toggle{right:18px;top:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.js-reveal{opacity:1;transform:none}}


#menu{overflow-y:auto;justify-content:flex-start;padding-top:50px;padding-bottom:30px;gap:12px}#menu a{font-size:24px}#menu .menu-monogram{margin-bottom:8px}

/* Gulir vertikal per halaman; konten panjang tetap dapat dibaca penuh. */
html{scroll-snap-type:y mandatory}
.page.scene{min-height:100dvh;scroll-snap-align:start;scroll-snap-stop:always}

/* Potret individual pilihan pasangan. */
.person .groom-photo,.person .bride-photo{transform:none;object-position:50% 25%}.person .shade{background:linear-gradient(transparent 35%,#0003 50%,#000b 80%,#000d)}