/* Layang Tresna (athaio) — a layered illustrated invitation from the foothills of Slamet. */
:root{--paper:#f7f1e4;--paper-deep:#eee3d0;--wine:#702631;--wine-dark:#4e1924;--ink:#432d29;--muted:#756353;--gold:#a38249;--line:#b4976560;--serif:'EB Garamond',Georgia,serif;--script:'Great Vibes','EB Garamond',cursive;--sans:'Manrope',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:#d6cebc;color:var(--ink);font:400 18px/1.7 var(--serif);-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{opacity:.55;cursor:not-allowed}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1}em{font-weight:400}svg{display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}::selection{background:#dec7ae;color:var(--wine-dark)}:focus-visible{outline:2px solid var(--wine);outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:8px;left:16px;transform:translateY(-150%);padding:12px 18px;background:var(--wine);color:var(--paper);z-index:200}.skip-link:focus{transform:none}
/* The page is full width on every screen. The old split "book" (a fixed cover beside a phone-width column) is retired. */
.invitation-book{position:relative;background:var(--paper);isolation:isolate}.desktop-cover{display:none}.script-intro{font:400 34px/1.4 var(--script);color:var(--wine)}.ornamental-line{display:block;width:80px;height:1px;background:var(--gold);margin:20px auto;position:relative}.ornamental-line::after{content:'✦';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--paper);padding:0 8px;font-size:15px;color:var(--gold)}
.header{position:absolute;top:0;right:0;width:100%;z-index:20;padding:20px 30px;display:flex;align-items:center;justify-content:space-between}.brand{font:500 15px/1 var(--serif);letter-spacing:.12em}.brand i{font-style:italic;font-size:20px;letter-spacing:0;color:var(--gold)}.header-rsvp{font:500 14px/1.7 var(--sans);border-bottom:1px solid var(--line);padding:8px 0}.reading-progress{position:fixed;top:0;right:0;width:100%;height:3px;z-index:101}.reading-progress span{display:block;height:100%;background:var(--wine);transform-origin:left;transform:scaleX(0)}
/* A three-layer scene. Native scrolling drives the scene without trapping the page. */
.hero{position:relative;height:235svh;min-height:1500px}.hero-stage{position:sticky;top:0;height:100svh;min-height:650px;overflow:hidden;isolation:isolate;background:var(--paper)}.hero-landscape{position:absolute;inset:-3% -6%;width:112%;max-width:none;height:106%;object-fit:cover;object-position:50% 62%;z-index:-3;will-change:transform}.hero-wash{position:absolute;inset:0;background:linear-gradient(#f7f1e400 15%,#f7f1e460 48%,transparent 75%);z-index:-2}.hero-heading{position:absolute;top:11%;left:24px;right:24px;text-align:center;z-index:3;will-change:transform,opacity}.hero-heading .script-intro{font-size:30px}.hero-heading h1{margin:14px 0 15px;font:400 clamp(74px,6.8vw,92px)/.94 var(--script);color:var(--wine);text-shadow:0 1px 16px #f7f1e482}.hero-heading h1>span{display:block}.hero-heading h1 em{display:block;font:italic 34px/.9 var(--serif);margin:3px 0 13px}.hero-date{font:500 13px/1.8 var(--sans);letter-spacing:.07em}.hero-place{font:500 12px/1.8 var(--sans);letter-spacing:.19em}.hero-heading .ornamental-line{margin:17px auto}.hero-pendopo{position:absolute;left:1%;bottom:2%;width:98%;max-width:none;z-index:1;transform-origin:50% 100%;will-change:transform,opacity}.hero-florals{position:absolute;left:-7%;bottom:-5%;width:114%;max-width:none;z-index:6;pointer-events:none;will-change:transform}.hero-scroll-copy{position:absolute;z-index:10;bottom:15%;left:22px;right:22px;text-align:center;will-change:opacity}.scroll-invitation{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:48px;padding:10px 23px;border:1px solid #d6c098;border-radius:3px;background:#fff8eaf2;box-shadow:0 3px 18px #45232c18;font:600 14px/1.5 var(--sans);letter-spacing:.08em;color:var(--wine)}.scroll-invitation>span:first-child{font:400 22px var(--serif)}.hero-scroll-copy>p{margin-top:9px;font-size:15px;color:#fff7e7;text-shadow:0 1px 5px #391e18}.hero-couple-reveal{position:absolute;left:20%;top:31%;width:60%;height:56%;z-index:4;opacity:0;overflow:hidden;border-radius:48% 48% 3px 3px /26% 26% 3px 3px;border:4px solid #f7f1e4;outline:1px solid #a58b5f;outline-offset:5px;box-shadow:0 16px 40px #34172030;will-change:transform,opacity}.hero-couple-reveal img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}.hero-reveal-copy{position:absolute;top:10%;left:25px;right:25px;text-align:center;z-index:5;opacity:0;will-change:transform,opacity}.hero-reveal-copy>p:last-child{font:400 43px/1.15 var(--script);color:var(--wine);margin-top:14px}.hero-reveal-copy>p:last-child em{font-style:normal}.hero-stage::after{content:'';position:absolute;inset:auto 0 0;height:35px;z-index:8;background:linear-gradient(transparent,var(--paper));pointer-events:none}
.section-pad{padding:75px 34px}.eyebrow{font:600 12px/1.8 var(--sans);letter-spacing:.2em;color:var(--gold)}.section-topline{text-align:center;margin-bottom:24px}.small-label{display:none}.tiny-rule{display:block;height:1px;width:45px;background:var(--line);margin:23px auto}.section-pad h2{font-size:42px;line-height:1.15}.section-pad h2 em{color:var(--wine)}.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:48px;padding:12px 20px;border:1px solid var(--wine);border-radius:3px;font:500 14px/1.6 var(--sans);transition:background .2s,transform .2s}.button:hover{transform:translateY(-2px)}.button svg{width:18px;height:18px}.button-dark{background:var(--wine);color:var(--paper)}.button-dark:hover{background:var(--wine-dark)}.button-outline{background:transparent;color:var(--wine)}.text-link{border:0;border-bottom:1px solid var(--gold);background:none;min-height:44px;font:500 14px/1.6 var(--sans);padding:8px 0;display:inline-flex;align-items:center;gap:18px}.text-link>span{font-size:23px}
/* The letter and the Quran verse are deliberately quiet reading surfaces. */
.invitation{text-align:center;padding-top:67px;padding-bottom:58px;background:var(--paper)}.invite-ornament{display:flex;align-items:center;justify-content:center;gap:19px;margin-bottom:28px}.invite-ornament img{width:42px;height:44px;opacity:.8}.invite-ornament span{height:1px;width:60px;background:var(--line)}.invitation h2{font-size:38px;margin-top:13px}.invitation-prose{font-size:18px;line-height:1.85;color:var(--muted);margin-top:23px}.desktop-only{display:none}.guest-card{position:relative;display:flex;align-items:center;flex-direction:column;margin:30px 10px 0;padding:24px 20px;border:1px solid var(--line);background:#fdf9ee}.guest-card::before{content:'';position:absolute;inset:5px;border:1px solid #b69a6740;pointer-events:none}.guest-card>p,.guest-card>small{font-size:15px;color:var(--muted)}.guest-card>span{font-size:28px;line-height:1.3;margin:8px 0;overflow-wrap:anywhere}.guest-card>img{position:absolute;width:47px;height:49px;right:-19px;bottom:-20px;transform:rotate(-10deg)}.small-diamond{font-size:16px;color:var(--gold);margin-top:45px}.quote-section{position:relative;isolation:isolate;overflow:hidden;min-height:min(150vw,900px);padding:75px 38px calc(36% + 24px)}.section-landscape{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;opacity:.34}.quote-section::before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(var(--paper),#f7f1e452 30%,#f7f1e45c 75%,var(--paper))}.quote-inner{position:relative;z-index:2;text-align:center;background:var(--wine);color:#f8efde;border-radius:46% 46% 8px 8px/12% 12% 8px 8px;padding:68px 31px 44px;box-shadow:0 0 0 5px var(--paper),0 0 0 6px var(--gold),0 10px 35px #35152116}.quote-inner::before{content:'';position:absolute;inset:9px;border:1px solid #dfbd864d;border-radius:46% 46% 3px 3px/11% 11% 3px 3px;pointer-events:none}.quote-inner>.eyebrow{font-size:11px;color:#e4c897;letter-spacing:.13em;margin-bottom:20px}.quran-quote{margin:0}.quran-quote>p{font:400 22px/1.55 var(--serif);text-wrap:pretty}.quran-quote footer img{width:140px;height:auto;margin:23px auto 15px}.quran-quote cite{font:500 12px/1.8 var(--sans);letter-spacing:.14em;font-style:normal;color:#ebd2ac}.section-florals{position:absolute;bottom:12px;left:12px;width:calc(100% - 24px);max-width:100%;height:auto;object-fit:contain;z-index:1;pointer-events:none}
/* Portraits retain the selected solo photographs in their natural 2:3 proportions. */
.couple-section{padding-top:52px;text-align:center;overflow:hidden;background:var(--paper)}.couple-intro{margin-bottom:48px}.couple-intro h2{font:400 58px/1.4 var(--script);color:var(--wine)}.couple-intro h2 em{font:italic 37px var(--serif)}.couple-intro>p{font-size:18px;line-height:1.65;color:var(--muted);margin-top:9px}.couple-grid{display:flex;flex-direction:column;align-items:center}.person{width:100%;max-width:340px}.portrait-wrap{position:relative;width:85%;max-width:296px;margin:0 auto 31px;isolation:isolate}.portrait-crop{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:49% 49% 2px 2px/32% 32% 2px 2px;background:var(--paper-deep)}.portrait-crop>img{width:100%;height:100%;object-fit:cover}.portrait-outline{position:absolute;inset:-10px;border:1px solid var(--gold);border-radius:49% 49% 2px 2px/32% 32% 2px 2px;z-index:-1}.portrait-outline::after{content:'';position:absolute;inset:-5px;border:1px solid var(--line);border-radius:inherit}.portrait-flowers{position:absolute;bottom:-16px;left:-16px;width:calc(100% + 32px);max-width:none;height:auto;object-fit:contain;z-index:2;pointer-events:none}.portrait-corner,.photo-label{display:none}.person-text>.eyebrow{font-size:11px;letter-spacing:.16em}.person-text h3{font-size:31px;line-height:1.22;margin:9px auto 15px;max-width:350px;text-wrap:balance;color:var(--wine)}.person-text>p:not(.eyebrow){font-size:17px;line-height:1.75;color:var(--muted);text-wrap:pretty}.couple-ampersand{font:italic 69px/1 var(--script);color:var(--gold);margin:24px 0 50px}.couple-ampersand>span{display:none}.couple-divider{width:155px;height:auto;margin:42px auto 0;opacity:.75}
/* A continuous timeline follows the eight chapters supplied by the couple. */
.story-section{background:#eee4d1;padding-top:65px;padding-bottom:70px}.story-section .section-topline{margin-bottom:32px}.story-sticky{text-align:center;margin-bottom:42px}.story-sticky h2{font-size:40px;margin-top:10px}.story-sticky>p:last-child{font-size:18px;line-height:1.65;color:var(--muted);margin-top:18px}.story-timeline{position:relative;margin-left:8px;padding-left:0;border-left:1px solid #bda8837d}.story-timeline::before{content:'';position:absolute;inset:0 auto 0 -1px;width:1px;background:var(--wine);transform:scaleY(var(--story-progress,0));transform-origin:top}.story-item{position:relative;padding:0 0 46px 28px}.story-item:last-child{padding-bottom:0}.story-dot{position:absolute;width:9px;height:9px;border:1px solid var(--wine);background:var(--paper-deep);border-radius:50%;left:-5px;top:9px}.story-item.is-visible .story-dot{background:var(--wine)}.story-year{font:italic 20px/1.2 var(--serif);color:var(--wine)}.story-item h3{font-size:22px;line-height:1.25;margin:8px 0 9px;text-wrap:balance}.story-item p{font-size:16px;line-height:1.75;color:var(--muted)}
.event-section{position:relative;isolation:isolate;padding:70px 30px;background:var(--wine);color:var(--paper);overflow:hidden;text-align:center}.event-pattern{position:absolute;inset:0;background:url('assets/kawung.svg') repeat;background-size:95px;opacity:.08;pointer-events:none;z-index:-1}.event-heading>.eyebrow{color:#ddbf89}.event-heading h2{font-size:48px;line-height:1.08;margin-top:20px}.event-heading h2 em{color:#e8cdaa}.event-date{font:500 14px/1.7 var(--sans);margin-top:24px}.countdown{display:flex;align-items:center;justify-content:center;gap:9px;margin:30px auto 0}.countdown>div{min-width:59px}.countdown>div>span{display:block;font:400 41px/1 var(--serif);font-variant-numeric:tabular-nums}.countdown>div>small{display:block;font:400 10px/1.8 var(--sans);letter-spacing:.12em;margin-top:10px;color:#eed6b4}.countdown>b{font:400 29px/1 var(--serif);padding-bottom:20px;color:#caa876}.countdown-status{font-size:15px;line-height:1.7;margin:15px 0}.event-grid{display:grid;gap:24px;margin-top:34px}.event-card{position:relative;background:var(--paper);color:var(--ink);padding:38px 22px 31px;border-radius:48% 48% 3px 3px/17% 17% 3px 3px;border:1px solid #b69458;box-shadow:0 0 0 5px #d8b77818}.event-card::before{content:'';position:absolute;inset:8px;border:1px solid var(--line);border-radius:47% 47% 1px 1px/16% 16% 1px 1px;pointer-events:none}.event-icon{width:44px;height:44px;color:var(--gold);margin:0 auto 14px}.event-icon svg{width:100%;height:100%}.event-number{position:absolute;right:24px;top:42px;font:italic 25px var(--serif);color:var(--gold)}.event-card h3{font:400 49px/1.3 var(--script);color:var(--wine)}.event-time{font:500 16px/1.7 var(--sans);margin-top:8px}.card-rule{display:block;width:35px;height:1px;background:var(--line);margin:21px auto}.event-card>p:not(.event-time){font-size:24px;line-height:1.3;max-width:300px;margin:auto}.event-card>small{display:block;font-size:16px;line-height:1.7;color:var(--muted);margin:9px auto 0;max-width:275px}.event-map{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:8px;padding:8px 0;font:500 13px/1.6 var(--sans);letter-spacing:.02em;color:var(--wine);text-decoration:none;border-bottom:1px solid var(--gold)}.event-map[hidden]{display:none}.event-bottom{margin-top:31px}.event-bottom .button{color:var(--wine);background:var(--paper);border-color:#dfc398}.dresscode{margin-top:24px}.dresscode>p{font-size:16px}.dresscode>p>span{display:block}.color-swatches{display:flex;justify-content:center;gap:5px;margin-bottom:10px}.color-swatches i{width:20px;height:20px;border-radius:50%;background:#2c201e}.color-swatches i:nth-child(2){background:#f4e8d2}.color-swatches i:nth-child(3){background:#b59864}.color-swatches i:nth-child(4){background:#a9c5cf}
.venue-section{text-align:center;padding-top:55px;padding-bottom:65px;background:linear-gradient(#ede1cc,var(--paper))}.venue-art{position:relative;margin:0 -28px 27px}.venue-art-circle{position:absolute;inset:0 12% 7%;border-radius:50%;opacity:.35;z-index:0;mask-image:radial-gradient(#000 35%,transparent 70%)}.venue-art>img{position:relative;width:100%;z-index:1}.venue-art>p{font:500 10px/1.8 var(--sans);letter-spacing:.17em;color:var(--muted);margin-top:12px}.venue-content h2{font-size:37px;line-height:1.15;margin:17px 0}.venue-content>p:not(.eyebrow){font-size:19px;color:var(--muted)}.venue-details{display:flex;flex-direction:column;gap:4px;margin:18px 0;font:400 14px/1.8 var(--sans);color:var(--muted)}.venue-content .text-link{margin-top:5px}
/* A justified mosaic: flex-grow mirrors each photo's ratio (2:3 → 2, 3:2 → 4.5), so a row shares one height without cropping. */
.gallery-section{padding:58px 0 46px;background:#ede1d1;overflow:hidden}.gallery-heading{text-align:center;padding:0 32px 31px}.gallery-heading h2{font:400 51px/1.1 var(--script);color:var(--wine);margin:15px 0 18px}.gallery-heading h2 em{font-style:normal}.gallery-heading>p{font-size:18px;line-height:1.7;color:var(--muted)}.gallery-hint{display:block;font:500 10px/1.8 var(--sans);letter-spacing:.12em;margin-top:18px}.gallery-mosaic{display:grid;gap:6px;padding:4px 28px 0}.gallery-row{display:flex;gap:6px}.gallery-item{flex:2 1 0;min-width:0;padding:0;border:0;background:#d9c8b1;overflow:hidden;cursor:zoom-in}.gallery-item>img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.gallery-landscape{flex-grow:4.5}.gallery-landscape>img{aspect-ratio:3/2}.gallery-item:focus-visible{outline:2px solid #fff8ec;outline-offset:-6px}@media(hover:hover){.gallery-item:hover>img{transform:scale(1.035)}}.gallery-note{font-size:15px;line-height:1.6;color:var(--muted);text-align:center;margin:24px 32px 0}
.rsvp-section{padding:66px 30px 70px}.rsvp-copy{text-align:center}.rsvp-copy>img{width:57px;height:61px;margin:0 auto 22px;transform:rotate(-8deg)}.rsvp-copy h2{font:400 58px/1.05 var(--script);color:var(--wine);margin-top:16px}.rsvp-copy h2 em{font-style:normal}.rsvp-copy>p:not(.eyebrow){font-size:18px;line-height:1.75;max-width:370px;margin:23px auto 0;color:var(--muted)}.rsvp-note{display:flex;align-items:center;justify-content:center;gap:13px;margin:23px 0;color:var(--gold)}.rsvp-note p{font-size:16px;line-height:1.5}.rsvp-form{margin-top:32px;padding:26px 24px;background:#fffaf0;border:1px solid var(--line);font-family:var(--sans)}.form-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:22px}.form-header .eyebrow{font-size:10px;letter-spacing:.12em}.form-number{font:italic 21px var(--serif);color:var(--gold)}.rsvp-form>label,.rsvp-form fieldset>legend,#guest-count-wrap>label{display:block;font:500 14px/1.6 var(--sans);margin:19px 0 8px}.rsvp-form small{font:400 12px/1.6 var(--sans);color:var(--muted)}.rsvp-form input[type=text],.rsvp-form textarea,.rsvp-form select{display:block;width:100%;padding:12px;border:1px solid #c4b192;border-radius:2px;background:#fffdf6;color:var(--ink);font:400 16px/1.6 var(--sans)}.rsvp-form textarea{resize:vertical;min-height:108px}.rsvp-form input::placeholder,.rsvp-form textarea::placeholder{font-size:14px;color:#887b6c}.rsvp-form fieldset{border:0;margin:0;padding:0;min-width:0}.attendance-options{display:grid;grid-template-columns:1fr;gap:8px}.attendance-options label{position:relative;cursor:pointer}.attendance-options input{position:absolute;opacity:0;width:1px;height:1px}.attendance-options span{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #c6b499;padding:12px 8px;min-height:48px;font:500 14px/1.6 var(--sans)}.attendance-options svg{width:17px;height:17px}.attendance-options input:checked+span{background:var(--wine);color:var(--paper);border-color:var(--wine)}.attendance-options input:focus-visible+span{outline:2px solid var(--wine);outline-offset:3px}.form-privacy,.form-demo-note{font:400 12px/1.75 var(--sans);color:var(--muted);margin:16px 0}.submit-button{width:100%;justify-content:space-between;margin-top:5px}.submit-button>span:last-child{font-size:21px}.form-status{font:400 14px/1.8 var(--sans);overflow-wrap:anywhere}.form-status:not(:empty){background:#f1e4d0;padding:13px;border-left:2px solid var(--gold);margin-top:15px}.form-status.is-error{background:#f5e4de;color:#7c2e30;border-color:#9e3c43}.form-status a{display:block;text-decoration:underline;margin-top:9px}.clear-rsvp{background:none;border:0;padding:14px 0 0;text-decoration:underline;font:400 12px/1.6 var(--sans)}
.gift-section{text-align:center;padding-top:10px;padding-bottom:65px}.gift-section h2{font-size:39px;margin:20px 0}.gift-section p:not(.eyebrow){font-size:18px;line-height:1.75;color:var(--muted)}.gift-section .button{margin-top:24px}.gift-rule{display:none}.footer{position:relative;isolation:isolate;overflow:hidden;min-height:860px;padding:68px 30px 410px;text-align:center;background:var(--paper)}.footer-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3;opacity:.8}.footer::before{content:'';position:absolute;inset:0;background:linear-gradient(var(--paper),#f7f1e487 45%,transparent);z-index:-2}.footer-content{position:relative;z-index:2}.footer-content h2{font:400 64px/1.4 var(--script);color:var(--wine);margin:15px 0}.footer-content>p:not(.eyebrow){font-size:19px;line-height:1.75;color:var(--muted)}.footer-names{display:flex;justify-content:center;align-items:baseline;gap:12px;font:400 48px/1.5 var(--script);color:var(--wine);margin-top:22px}.footer-names i{font:italic 29px var(--serif)}.footer-date{display:block;font:400 12px/1.8 var(--sans);letter-spacing:.08em;margin-top:5px}.footer-pendopo{position:absolute;bottom:100px;width:112%;max-width:none;left:-6%}.footer-florals{position:absolute;bottom:-8px;left:-5%;width:110%;max-width:none;pointer-events:none}.footer-bottom{display:flex;justify-content:center;align-items:center;gap:20px;position:absolute;z-index:5;bottom:98px;left:30px;right:30px;color:#fff6e5;text-shadow:0 1px 4px #231010}.footer-bottom a{font:400 12px/1.8 var(--sans)}
/* Navigation, motion and dialogs remain keyboard and touch accessible. */
.mobile-nav{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));right:50%;transform:translateX(50%);width:350px;display:flex;z-index:40;background:#fdf8eced;backdrop-filter:blur(12px);border:1px solid #bd9e6f;border-radius:40px;box-shadow:0 7px 30px #391d2020;padding:8px 10px}.mobile-nav a{display:flex;flex:1;align-items:center;justify-content:center;flex-direction:column;min-height:43px;gap:3px;font:500 13px/1.6 var(--sans);color:var(--muted)}.mobile-nav svg{width:18px;height:18px}.mobile-nav a.active{color:var(--wine)}.mobile-nav a.active svg{stroke-width:2.1}.floating-tools{position:fixed;z-index:35;bottom:96px;right:18px;display:flex;flex-direction:column;gap:8px}.tool-button{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid #c6ac85;border-radius:50%;background:#fff8eae8;backdrop-filter:blur(8px);color:var(--wine)}.tool-button svg{width:16px;height:16px}.music-bars{display:flex;gap:3px;align-items:center;height:17px}.music-bars i{width:2px;height:6px;background:currentColor;border-radius:2px}.music-bars i:nth-child(2){height:15px}.music-bars i:nth-child(3){height:11px}.music-toggle[aria-pressed=true] .music-bars i{animation:music-bars .9s ease-in-out infinite alternate}.music-bars i:nth-child(2){animation-delay:.25s!important}.music-bars i:nth-child(3){animation-delay:.45s!important}@keyframes music-bars{to{transform:scaleY(.3)}}.toast{position:fixed;bottom:90px;right:50%;width:min(430px,calc(100vw - 60px));z-index:120;background:var(--wine-dark);color:var(--paper);padding:13px 17px;border-radius:3px;font:400 14px/1.65 var(--sans);box-shadow:0 5px 25px #28151c30;transform:translate(50%,15px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(50%,0)}.js.motion-on .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}.js.motion-on .reveal.is-visible{opacity:1;transform:none}.motion-off .reveal{opacity:1;transform:none}.motion-off .hero,html:not(.js) .hero{height:100svh;min-height:650px}.motion-off .hero-stage,html:not(.js) .hero-stage{position:relative}.motion-off .hero-couple-reveal,.motion-off .hero-reveal-copy{display:none}.motion-off .music-bars i{animation:none!important}
dialog{border:0;padding:0;color:var(--ink)}dialog::backdrop{background:#21171cde;backdrop-filter:blur(4px)}.dialog-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border:1px solid #b99d7555;border-radius:50%;background:#fff9ee;z-index:5;font:400 30px/1 var(--serif);display:flex;align-items:center;justify-content:center}.lightbox{background:transparent;width:94vw;max-width:1250px;max-height:92svh;overflow:visible}.lightbox figure{text-align:center}.lightbox figure img{width:auto;height:auto;max-width:86vw;max-height:80svh;margin:auto;object-fit:contain}.lightbox figcaption{font:400 12px/1.7 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--paper);margin-top:14px}.lightbox-arrow{position:absolute;top:calc(50% - 24px);width:44px;height:44px;border:1px solid #fff5e788;border-radius:50%;background:#4e1924bb;color:#fff4e2;font-size:26px;z-index:3}.lightbox-prev{left:0}.lightbox-next{right:0}.detail-dialog{width:min(470px,calc(100vw - 30px));max-height:90svh;overflow:auto;background:var(--paper);text-align:center;padding:45px 26px 30px}.dialog-seal{width:50px;height:auto;margin:0 auto 20px}.detail-dialog h2{font-size:42px;line-height:1.13;margin:16px 0 23px}.detail-dialog>p:not(.eyebrow){font-size:17px;line-height:1.7}.gift-bank{padding:22px 15px;background:#eddfc9;border:1px solid var(--line);margin-top:25px}.gift-bank>span{font:400 12px/1.7 var(--sans)}.gift-bank>strong{display:block;font:400 34px/1.5 var(--serif);overflow-wrap:anywhere}.gift-bank>p{font-size:16px;margin-bottom:18px}.dialog-disclaimer{font:400 12px/1.7 var(--sans)!important;color:var(--muted);margin-top:19px}.map-image{width:100%;margin:20px auto}.noscript-note{background:var(--wine);color:var(--paper);padding:18px;font:400 14px/1.7 var(--sans)}
@media(max-width:599px){.header,.reading-progress{width:min(100%,600px);right:50%;transform:translateX(50%)}.floating-tools{right:max(12px,calc((100vw - 600px)/2 + 14px))}.hero-heading h1{font-size:92px}}
@media(max-width:540px){body{font-size:17px}.header{padding:17px 23px}.header-rsvp{font-size:14px}.hero-heading{top:12%}.hero-heading h1{font-size:82px;margin-top:11px}.hero-heading .script-intro{font-size:29px}.hero-date{font-size:12px}.hero-place{font-size:10px}.hero-heading .ornamental-line{margin:14px auto}.hero-pendopo{bottom:7%;width:100%;left:0}.hero-scroll-copy{bottom:15%}.hero-scroll-copy>p{font-size:14px}.hero-florals{bottom:-1%}.hero-reveal-copy{top:10%}.hero-reveal-copy>p:last-child{font-size:40px}.hero-couple-reveal{left:17%;width:66%;top:31%;height:53%}.section-pad{padding-left:28px;padding-right:28px}.section-pad h2{font-size:35px}.section-pad .script-intro{font-size:33px}.invitation h2{font-size:35px}.invitation-prose{font-size:17px}.invitation-prose br{display:none}.quote-section{padding:62px 29px calc(36% + 24px)}.quote-inner{padding:57px 23px 38px}.quran-quote>p{font-size:21px;line-height:1.55}.quote-inner>.eyebrow{font-size:10px;letter-spacing:.1em}.couple-intro h2{font:400 54px/1.4 var(--script)}.couple-intro h2 em{font-size:32px}.person-text h3{font-size:29px}.person-text>p:not(.eyebrow){font-size:17px}.story-item{padding-left:24px}.story-item h3{font-size:21px}.story-item p{font-size:16px}.event-heading h2{font-size:45px}.event-section{padding-inline:26px}.event-card>p:not(.event-time){font-size:24px}.countdown{gap:8px}.countdown>div{min-width:49px}.countdown>div>span{font-size:38px}.venue-content h2{font-size:34px}.gallery-heading h2{font:400 50px/1.1 var(--script)}.gallery-mosaic,.gallery-row{gap:5px}.gallery-mosaic{padding-inline:22px}.gallery-note{margin-inline:27px;font-size:14px}.rsvp-section{padding-inline:27px}.rsvp-copy h2{font:400 56px/1.06 var(--script)}.rsvp-form{padding:22px 18px}.form-number{display:none}.footer{min-height:790px;padding-inline:26px;padding-bottom:360px}.footer-content h2{font-size:57px}.footer-names{font-size:46px}.footer-pendopo{bottom:108px;width:100%;left:0}.footer-florals{bottom:24px;width:122%;left:-11%}.footer-bottom{bottom:105px;left:26px;right:26px}.mobile-nav{width:min(350px,calc(100vw - 32px));padding:7px 9px}.floating-tools{bottom:92px;right:10px}.tool-button{width:40px;height:40px}.lightbox-arrow{width:40px;height:40px}.lightbox-prev{left:-4px}.lightbox-next{right:-4px}.footer::after{content:'';position:absolute;inset:auto 0 0;height:100px;background:var(--wine-dark);z-index:-1}}
@media(max-height:740px){.hero-heading{top:12%}.hero-heading h1{font-size:67px}.hero-heading .script-intro{font-size:25px}.hero-heading .ornamental-line{margin:11px auto}.hero-pendopo{width:86%;left:7%;bottom:0}.hero-date{font-size:12px}.hero-scroll-copy{bottom:12%}.hero-reveal-copy>p:last-child{font-size:36px}.hero-couple-reveal{top:33%;height:54%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}
@media print{body{background:#fff}.desktop-cover,.header,.hero,.floating-tools,.mobile-nav,.reading-progress,.rsvp-section,.gallery-section,.gift-section,.footer-landscape,.footer-florals,.footer-pendopo{display:none!important}.invitation-book{width:100%;margin:0;box-shadow:none}.section-pad{padding:24px!important}.reveal{opacity:1!important;transform:none!important}.quote-inner{color:#222;background:#fff}.event-section{color:#222;background:#fff}.event-heading h2 em{color:#222}.event-card,.person{break-inside:avoid}.footer{min-height:0;padding:30px}.footer-bottom{display:none}.quran-quote cite,.quote-inner>.eyebrow{color:#222}}

/* Defer the venue background until this section approaches the viewport. */
.venue-art-circle{overflow:hidden}.venue-art-circle>img{width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.guest-zone{display:block;margin-top:10px;font:600 11px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--wine)}

/* Tablets and desktops (600px and wider): a full-width page. The opening scene fills the screen and each
   section keeps a comfortable reading measure through its side padding, so the markup needs no wrappers.
   Screen only: phones (<600px) and print keep the rules above untouched. */
@media screen and (min-width:600px){
body{background:var(--paper)}
.header{padding:24px clamp(30px,4vw,60px)}
.brand{font-size:16px}.brand i{font-size:22px}
.floating-tools{bottom:max(24px,env(safe-area-inset-bottom));right:24px}
.hero-landscape{object-position:50% 40%}
.hero-heading{top:max(10%,84px);left:40px;right:40px}
.hero-heading .script-intro{font-size:32px}
.hero-heading h1{font-size:clamp(64px,9.4svh,104px)}
.hero-date{font-size:14px}
.hero-place{font-size:12px}
.hero-pendopo{left:0;right:0;bottom:2%;width:min(92%,max(72svh,468px));margin:0 auto}
.hero-florals{left:0;right:0;bottom:-17%;width:min(114%,max(104svh,676px));margin:0 auto}
/* The rose frame is cut flat at its left and right image edges; on wide screens those edges fall inside the view, so they fade out. */
.hero-florals,.section-florals,.footer-florals{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hero-couple-reveal{left:0;right:0;top:31%;height:56%;width:min(62%,max(40svh,260px));margin:0 auto}
.hero-reveal-copy{top:9%}
.hero-reveal-copy>p:last-child{font-size:48px}
.hero-scroll-copy{bottom:14%}
.hero-scroll-copy>p{font-size:16px}
.section-pad{--measure:1120px;padding:100px max(40px,calc((100% - var(--measure))/2))}
.section-topline{margin-bottom:28px}
.invitation{--measure:720px;padding-top:110px;padding-bottom:84px}
.invitation h2{font-size:50px}
.invitation-prose{font-size:19px;max-width:620px;margin-inline:auto;text-wrap:pretty}
.guest-card{max-width:520px;margin:40px auto 0;padding:28px 24px}
.guest-card>span{font-size:32px}
.small-diamond{margin-top:52px}
/* Full-width landscapes become backgrounds that reuse the 1000px image the opening already loaded (the markup's sizes pick 600px). */
.quote-section{--measure:600px;--frame:min(calc(100% - 24px),700px);display:flex;flex-direction:column;justify-content:center;min-height:calc(min(100vw - 24px,700px)*1.5 + 36px);padding:100px max(40px,calc((100% - var(--measure))/2)) calc(var(--frame)*.38 + 24px);background:linear-gradient(#f7f1e4a8,#f7f1e4a8),url('assets/webp-v2/purwokerto/slamet-landscape.webp') 50% 50%/cover var(--paper)}
.section-landscape{display:none}
.section-florals{left:0;right:0;width:var(--frame);margin:0 auto}
.quote-inner{padding:84px 56px 54px}
.quote-inner>.eyebrow{font-size:12px;letter-spacing:.16em}
.quran-quote>p{font-size:24px}
.couple-section{--measure:1040px;padding-top:96px}
.couple-intro{margin-bottom:64px}
.couple-intro h2{font-size:72px}
.couple-intro h2 em{font-size:44px}
.couple-intro>p{font-size:19px}
.couple-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(48px,9vw,120px) minmax(0,1fr);align-items:start}
.person{max-width:400px;justify-self:center}
.couple-ampersand{display:flex;flex-direction:column;align-items:center;margin:0;padding-top:clamp(110px,15vw,180px);font-size:clamp(48px,7vw,88px)}
.couple-ampersand>span{display:block;width:1px;height:clamp(70px,9vw,120px);margin-top:24px;background:linear-gradient(var(--gold),transparent)}
.couple-divider{margin-top:56px}
.story-section{--measure:680px;padding-top:96px;padding-bottom:100px}
.story-sticky h2{font-size:48px}
.story-item h3{font-size:24px}
.story-item p{font-size:17px}
.event-section{padding-top:100px;padding-bottom:100px}
.event-pattern{background-size:110px}
.event-heading h2{font-size:60px}
.event-date{font-size:15px}
.countdown{gap:16px;margin-top:36px}
.countdown>div{min-width:84px}
.countdown>div>span{font-size:56px}
.countdown>div>small{font-size:11px}
.countdown>b{font-size:34px}
.event-grid{gap:28px;max-width:460px;margin:46px auto 0}
.event-bottom{margin-top:40px}
.venue-section{--measure:680px;padding-top:96px;padding-bottom:100px}
.venue-art{margin:0 0 32px}
.venue-content h2{font-size:46px}
.gallery-section{padding:100px 0 84px}
.gallery-heading{padding-top:0;padding-bottom:44px}
.gallery-heading h2{font-size:64px}
.gallery-mosaic{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0 max(40px,calc((100% - 1120px)/2))}
.gallery-row{display:contents}
.gallery-item{flex-basis:14.8%;max-width:19.3%}
.gallery-landscape{flex-basis:33.3%;max-width:43.3%}
.gallery-note{margin:30px 40px 0;font-size:16px}
.rsvp-section{--measure:600px;padding-top:100px;padding-bottom:110px}
.rsvp-copy h2{font-size:68px}
.rsvp-copy>p:not(.eyebrow){max-width:400px;text-wrap:pretty}
.rsvp-form{margin-top:40px;padding:32px 34px}
.attendance-options{grid-template-columns:1fr 1fr}
.gift-section{--measure:900px;display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,56px);padding-top:24px;padding-bottom:100px}
.gift-rule{display:block;flex:1;max-width:200px;height:1px;background:var(--line)}
.gift-section h2{font-size:46px}
.footer{--frame:min(calc(100% - 40px),760px,calc((100svh - 40px)/1.5));--pendopo:calc(var(--frame)*.84);min-height:calc(min(100vw - 40px,760px,(100svh - 40px)/1.5)*1.5 + 30px);padding:96px max(40px,calc((100% - 720px)/2)) calc(var(--pendopo)*.667 + 124px);background:linear-gradient(#f7f1e433,#f7f1e433),url('assets/webp-v2/purwokerto/slamet-landscape.webp') 50% 50%/cover var(--paper)}
.footer-landscape{display:none}
.footer-content h2{font-size:76px;margin:10px 0}
.footer-content>p:not(.eyebrow){font-size:20px}
.footer-names{font-size:56px;margin-top:16px}
.footer-names i{font-size:34px}
.footer-pendopo{left:0;right:0;bottom:96px;width:var(--pendopo);margin:0 auto}
.footer-florals{left:0;right:0;bottom:-8px;width:var(--frame);margin:0 auto}
.footer-bottom{bottom:96px}
}
/* Wider-than-portrait screens set the names on one line, as on a printed cover. */
@media screen and (min-width:600px) and (min-aspect-ratio:4/5){
.hero-heading h1{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:.24em;font-size:clamp(60px,min(7.4vw,13svh),124px);line-height:1.15}
.hero-heading h1 em{margin:0;font-size:.4em;line-height:1}
}
/* Event cards pair up once two arches fit; an odd last card sits centred below. */
@media screen and (min-width:700px){
.event-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
.event-card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 14px)}
}
/* Desktop: side-by-side arrangements where the width allows them. */
@media screen and (min-width:1000px){
.story-section{--measure:1080px}
.story-section .section-topline{text-align:left}
.story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,110px);align-items:start}
.story-sticky{position:sticky;top:max(14svh,96px);margin:0;text-align:left}
.story-sticky h2{font-size:56px}
.event-grid:has(>.event-card:nth-child(3):not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
.event-grid:has(>.event-card:nth-child(3):not([hidden]))>.event-card{grid-column:auto;width:auto}
.venue-section{--measure:1120px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;text-align:left}
.venue-art{margin:0;text-align:center}
.venue-content h2{font-size:52px}
.gallery-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;text-align:left}
.gallery-heading>p{max-width:360px}
.rsvp-section{--measure:1080px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(48px,7vw,110px);align-items:center}
.rsvp-copy{text-align:left}
.rsvp-copy>img{margin-left:0}
.rsvp-copy>p:not(.eyebrow){margin-left:0}
.rsvp-note{justify-content:flex-start}
.rsvp-form{margin-top:0}
}
/* Short screens (laptops with browser toolbars) keep the opening scene compact. */
@media screen and (min-width:600px) and (max-height:760px){
.hero-heading{top:max(11%,72px)}
.hero-heading .script-intro{font-size:26px}
.hero-heading .ornamental-line{margin:12px auto}
.hero-date{font-size:13px}
.hero-scroll-copy{bottom:11%}
.hero-reveal-copy>p:last-child{font-size:40px}
.footer{padding-top:72px}
.footer-content h2{font-size:64px}
.footer-names{font-size:48px}
}