:root{--paper:#faf8f2;--ink:#352e27;--gold:#917447;--line:#d8c8ac}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,'Times New Roman',serif;font-size:18px;line-height:1.7}header,main{position:relative;max-width:680px;margin:auto}header{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 24px 70px;text-align:center}.eyebrow{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.24em;font-weight:600;color:#735b39}.date{display:flex;flex-direction:column;align-items:center;font-size:clamp(62px,14vw,88px);font-weight:400;line-height:.98;margin:26px 0 12px;letter-spacing:-.05em}.date i{font-size:24px;color:var(--gold);line-height:1.2;font-style:normal}.date span:last-child{font-size:.76em}h1{font-weight:400;font-size:clamp(34px,8vw,49px);font-style:italic;line-height:1.3;margin:25px 0 12px}h1 em{font-size:.65em;color:var(--gold)}.cover-place{font-size:11px;letter-spacing:.18em;margin:4px 0 28px}.small{font-size:13px;letter-spacing:.08em;color:#6d6254}.button{display:inline-flex;justify-content:center;align-items:center;gap:20px;background:#65503a;color:#fffdf6;text-decoration:none;border:1px solid #65503a;border-radius:2px;padding:13px 23px;font-family:Arial,sans-serif;font-size:14px;cursor:pointer;line-height:1.5;min-height:48px}.button:hover{background:#493a2a}.button:disabled{opacity:.6;cursor:wait}.secondary{background:transparent;color:var(--ink)}.secondary:hover{background:#eee7d9}section{text-align:center;padding:72px 28px;border-top:1px solid var(--line)}section p{max-width:480px;margin:18px auto}h2{font-weight:400;line-height:1.45;font-size:29px;margin:22px 0}h2 em{color:var(--gold);font-size:22px}.couple{font-size:30px}.arabic{font-size:30px;line-height:1.8}.rule{display:flex;align-items:center;gap:18px;color:var(--gold);margin:35px auto;max-width:300px}.rule:before,.rule:after{content:'';height:1px;background:var(--line);flex:1}.details{margin:36px 0}.details>div{margin:30px 0}.details span{display:block;text-transform:uppercase;letter-spacing:.18em;font:11px Arial,sans-serif;color:#735b39;margin-bottom:12px}.details strong{font-size:21px;font-weight:400}.details p{margin:6px auto}.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}form{max-width:440px;margin:32px auto 0;text-align:left;font-family:Arial,sans-serif}label{display:block;margin:20px 0;font-size:14px;font-weight:600}label span{font-weight:400;color:#756a5e}input,select,textarea{display:block;width:100%;margin-top:8px;padding:14px;border:1px solid #bfb29d;background:#fffefa;color:var(--ink);border-radius:3px;font:16px Arial,sans-serif;min-height:48px}input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:2px}textarea{resize:vertical}.privacy{font:12px/1.7 Arial,sans-serif;color:#6d6254}form button{width:100%}#status{font:14px/1.6 Arial,sans-serif}.trap{position:absolute;left:-10000px}.closing{padding-bottom:120px}.closing h2{font-style:italic;font-size:35px}nav{position:fixed;bottom:0;left:0;right:0;background:#faf8f2f5;border-top:1px solid var(--line);display:flex;justify-content:center;gap:55px;padding:17px 20px;backdrop-filter:blur(10px);z-index:3}nav a{font:12px Arial,sans-serif;letter-spacing:.09em;color:var(--ink);text-decoration:none;padding:6px}.botanical{position:absolute;right:0;top:0;width:180px;height:310px;color:#a48c65;opacity:.4;transform:rotate(180deg);pointer-events:none}body:after{content:'';position:absolute;top:530px;left:0;width:90px;height:240px;background:repeating-linear-gradient(65deg,transparent 0 15px,#a48c6524 16px 17px,transparent 18px 30px);clip-path:polygon(0 0,100% 100%,0 80%);pointer-events:none}@media(min-width:800px){body{background:#eee9df}header,main{background:var(--paper);box-shadow:0 0 50px #63523b08}.botanical{right:calc(50% - 340px);z-index:1}header{min-height:850px}body:after{left:calc(50% - 340px)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.music-panel{max-width:680px;margin:auto;background:var(--paper);text-align:center;padding:22px 24px}.music-panel iframe{display:block;width:100%;max-width:480px;height:270px;margin:20px auto 0;border:0}.music-panel a{color:var(--ink)}.calendar-options{margin:16px auto;display:grid;gap:10px;max-width:330px}.calendar{width:100%;margin-top:12px}.calendar summary{list-style:none}.calendar summary::-webkit-details-marker{display:none}

.music-control{position:fixed;right:14px;bottom:76px;z-index:4;border:1px solid var(--line);background:#faf8f2f5;color:var(--ink);border-radius:24px;padding:12px 17px;min-height:44px;font:12px Arial,sans-serif;box-shadow:0 3px 14px #352e2714;cursor:pointer}.music-control:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Larger type and gold detailing inspired by the supplied printed invitation. */
:root{--paper:#fbf8ef;--ink:#3d291f;--gold:#9b7c3e;--line:#c9b47a}
body{font-size:21px;line-height:1.75}
header,main{border-left:double 5px var(--line);border-right:double 5px var(--line)}
header{border-top:double 5px var(--line);padding-top:65px}
.eyebrow{font-size:17px;line-height:1.7;letter-spacing:.1em;color:#624820}
.cover-place{font-size:17px;letter-spacing:.08em;line-height:1.6;max-width:340px}
.small{font-size:17px;letter-spacing:.02em;color:#615040}
.button{font-size:17px;min-height:52px}
section{padding:65px 27px}
section p{max-width:520px}
h2{font-size:33px}.parents{font-size:27px;font-weight:600;line-height:1.7}.couple{font-size:30px;font-weight:500;line-height:1.6}
.honorifics{font-size:20px;line-height:1.9;color:var(--ink)}
.arabic{font-size:49px}.rule{max-width:400px;font-size:25px}
.details{max-width:520px;margin:35px auto;text-align:left}
.details>.detail-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;align-items:start;margin:0;padding:25px 0;border-bottom:1px solid #c9b47a66}
.detail-icon{width:37px;height:37px;color:var(--gold);margin-top:5px}
.details span{font:600 18px/1.5 Arial,sans-serif;letter-spacing:.06em;color:#674c23;margin-bottom:7px}
.details strong{font-size:23px;line-height:1.6}.details p{font-size:21px;line-height:1.7}
label{font-size:18px}input,select,textarea{font-size:18px;line-height:1.5}.privacy{font-size:16px}#status{font-size:17px}
nav{gap:35px;padding:14px 15px}nav a{font-size:16px;padding:9px}.music-control{font-size:15px;bottom:82px}
.closing{border-bottom:double 5px var(--line);padding-bottom:150px}
@media(max-width:380px){section{padding-left:20px;padding-right:20px}.details>.detail-row{grid-template-columns:34px minmax(0,1fr);gap:12px}.detail-icon{width:31px}.parents{font-size:24px}.couple{font-size:27px}.eyebrow{font-size:16px}}

/* A quieter, proportionate type scale; names lead the written invitation. */
body{font-size:19px;line-height:1.75}
.eyebrow{font-size:15px;letter-spacing:.08em}.cover-place{font-size:15px}.small{font-size:15px}
h1{font-size:clamp(32px,8vw,43px)}
h2{font-size:26px}.parents{font-size:24px;line-height:1.65}.couple{font-size:27px;line-height:1.55}.closing h2{font-size:30px}
.honorifics{font-size:18px;line-height:1.85}.arabic{font-size:40px}
.details span{font-size:16px}.details strong{font-size:21px}.details p{font-size:19px}
.button{font-size:15px;padding:11px 18px;min-height:46px}.details .button{font-size:14px}
label{font-size:16px}input,select,textarea{font-size:17px}.privacy{font-size:14px}#status{font-size:16px}
nav a{font-size:14px}.music-control{font-size:13px}
.date span:last-child{font-size:1em}
.location-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.details .calendar{margin-top:14px}.details .calendar summary{display:inline-flex}.details .calendar-options{margin:12px 0 0;max-width:100%;text-align:left}.details .calendar-options .small{font-size:14px}
@media(max-width:380px){.eyebrow{font-size:14px}.parents{font-size:22px}.couple{font-size:25px}.details strong{font-size:20px}}

/* Cover gate, followed by a single continuous invitation. */
[hidden]{display:none!important}
body.invitation-closed{overflow:hidden;height:100svh}
body.invitation-closed:after{display:none}
#cover{height:100svh;min-height:0;overflow:auto;padding:24px 22px;gap:0}
#cover .eyebrow{margin:0 0 12px}
#cover .date{font-size:clamp(48px,10svh,76px);margin:10px 0;flex-shrink:0}
#cover h1{margin:12px 0 8px}
#cover .cover-place{margin:0 0 18px}
#cover .small{margin:14px 0 0}
#invitation-content{outline:none;border-top:double 5px var(--line);background:var(--paper)}
#invitation-content section{border-top:0;padding-top:30px;padding-bottom:30px}
#invitation-content #jemputan{padding-top:35px;padding-bottom:5px}
#invitation-content #majlis{padding-top:0}
#invitation-content #majlis>.eyebrow{display:none}
#invitation-content #majlis>h2{margin-top:0}
#invitation-content #rsvp{padding-top:22px}
#invitation-content .closing{padding-top:15px;padding-bottom:145px}
.details{margin-top:20px;margin-bottom:0}.details>.detail-row{padding-top:18px;padding-bottom:18px}
section p{margin-top:14px;margin-bottom:14px}.rule{margin-top:23px;margin-bottom:23px}
body:not(.invitation-closed):after{display:none}

.closing .small{font-size:23px;letter-spacing:.1em;color:var(--ink)}.field-note{display:block;font-size:14px;line-height:1.6;margin-top:9px;font-weight:400}

.preview-tag{font:13px/1.6 Arial,sans-serif;padding:10px;border:1px dashed var(--line);color:#6c5630}.wish-card{text-align:left;border-bottom:1px solid var(--line);padding:20px 0}.wish-card p{margin:8px 0;font-size:19px}.wish-card strong{font-size:18px}.wish-compose{margin-top:25px}.consent{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.6;font-weight:400}.consent input{width:20px;min-height:20px;flex-shrink:0;margin-top:3px}.preview-review{text-align:left;margin-top:28px;border:1px dashed var(--line);padding:15px;font:15px/1.7 Arial,sans-serif}.preview-review summary{cursor:pointer}.review-item{border-top:1px solid var(--line);padding:12px 0;overflow-wrap:anywhere}.review-item button{margin:8px 10px 0 0}.review-item p{font:15px/1.7 Arial,sans-serif}.review-item mark{background:#f3e4be;color:#523b13;padding:3px 6px}.wish-card{overflow-wrap:anywhere}nav{gap:17px}nav a{font-size:13px}#wish-status{font:15px/1.7 Arial,sans-serif}

/* Dried palm leaflets in warm gold, at opposite cover corners. */
.botanical{position:absolute;top:0;right:0;width:190px;height:290px;transform:none;color:#967b57;opacity:.78;z-index:1;pointer-events:none}
.botanical-bottom{position:absolute;bottom:0;left:0;width:150px;height:260px;transform:rotate(180deg);opacity:.73;pointer-events:none;z-index:0}
#cover{position:relative}.invitation-closed:after{display:none!important}body:not(.invitation-closed) .botanical-bottom{display:none}
#cover>.eyebrow,#cover>.date,#cover>h1,#cover>.cover-place,#cover>.button,#cover>.small{position:relative;z-index:2}
@media(min-width:800px){.botanical{right:calc(50% - 340px)}}
@media(max-width:480px){.botanical{width:145px;height:245px;right:-20px;opacity:.68}.botanical-bottom{width:120px;height:215px;left:-20px;opacity:.65}}

#invitation-content .closing{padding-bottom:30px;border-bottom:0}#invitation-content #guestbook{padding-top:25px;padding-bottom:150px}

/* V2: a paper envelope and embossed wax seal, with restrained motion. */
#envelope{position:fixed;inset:0;z-index:20;overflow:hidden;display:grid;place-items:center;background:#f6f0e3}
.envelope-half{position:absolute;top:0;bottom:0;width:50.2%;background:repeating-linear-gradient(89deg,#ffffff10 0 1px,transparent 1px 5px),linear-gradient(130deg,#fffdf7,#eee4cf);transition:transform 1.35s cubic-bezier(.65,0,.2,1)}
.envelope-left{left:0;border-right:1px solid #b7a47c;box-shadow:6px 0 24px #5b43241c;z-index:2}.envelope-right{right:0}
.envelope-half:after{content:'';position:absolute;inset:18px;border:1px solid #c7b17a80}
.seal-wrap{position:relative;z-index:3;text-align:center;transition:opacity .45s,transform .6s}
.seal-caption{font:14px/1.8 Georgia,serif;letter-spacing:.23em;color:#69522e;margin-bottom:35px}
#break-seal{position:relative;width:122px;height:122px;border-radius:48% 52% 45% 55% / 53% 46% 54% 47%;border:4px solid #b49858;background:radial-gradient(circle at 35% 25%,#ecd8a1,#bc9550 60%,#92703a);box-shadow:0 9px 16px #61471f35,inset 0 2px 5px #fff4ca,inset 0 -4px 8px #79542080;color:#62441e;cursor:pointer;animation:seal-breathe 4s ease-in-out infinite}
#break-seal:focus-visible{outline:3px solid #523a1d;outline-offset:8px}.seal-monogram{font:italic 29px Georgia,serif;text-shadow:0 1px #f9e9b8}.seal-ring{position:absolute;inset:10px;border:1px solid #85622e;border-radius:50%;box-shadow:0 1px #f2dda6}
.seal-hint{font:16px/1.8 Georgia,serif;color:#59482e;margin-top:30px}.seal-date{font:16px Georgia,serif;letter-spacing:.24em;color:#795f37;margin-top:12px}
body.v2-opening .envelope-left{transform:translateX(-104%)}body.v2-opening .envelope-right{transform:translateX(104%)}body.v2-opening .seal-wrap{opacity:0;transform:scale(1.12);pointer-events:none}
body.v2-sealed #cover{visibility:hidden}body.v2-sealed>.botanical{visibility:hidden}body.v2-sealed #music-toggle{visibility:hidden}
.v2-cover-reveal .date,.v2-cover-reveal h1,.v2-cover-reveal .eyebrow,.v2-cover-reveal .cover-place,.v2-cover-reveal #open-invitation{animation:cover-arrive 1.2s both}.v2-cover-reveal h1{animation-delay:.16s}.v2-cover-reveal .cover-place{animation-delay:.3s}.v2-cover-reveal #open-invitation{animation-delay:.4s}
.botanical{transform-origin:top right;animation:palm-drift 9s ease-in-out infinite alternate}.botanical-bottom{transform-origin:bottom left;animation:palm-drift-bottom 10s ease-in-out infinite alternate}
.reveal-pending{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}.reveal-pending.is-visible{opacity:1;transform:none}
@keyframes seal-breathe{50%{box-shadow:0 12px 24px #61471f42,inset 0 2px 5px #fff4ca,inset 0 -4px 8px #79542080}}
@keyframes cover-arrive{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
@keyframes palm-drift{from{transform:rotate(-1deg)}to{transform:rotate(1.5deg)}}
@keyframes palm-drift-bottom{from{transform:rotate(179deg)}to{transform:rotate(181.5deg)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal-pending{opacity:1;transform:none}}

.seal-open{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;width:116px;height:116px;min-height:116px;margin:4px 0;border:4px solid #b49858;border-radius:48% 52% 45% 55% / 53% 46% 54% 47%;background:radial-gradient(circle at 35% 25%,#ecd8a1,#bc9550 60%,#92703a);box-shadow:0 7px 14px #61471f30,inset 0 2px 5px #fff4ca,inset 0 -4px 8px #79542080;color:#523a1d;cursor:pointer;z-index:3}
.seal-open:before{content:'';position:absolute;inset:7px;border:1px solid #85622e;border-radius:50%;pointer-events:none}.seal-open-monogram{font:italic 25px Georgia,serif;text-shadow:0 1px #f9e9b8}.seal-open-label{font:13px/1.5 Georgia,serif;margin-top:5px}.seal-open:focus-visible{outline:3px solid #523a1d;outline-offset:6px}
#cover.cover-opening{animation:open-cover 1.05s cubic-bezier(.65,0,.2,1) both;transform-origin:left center;pointer-events:none}.cover-opening .seal-open{animation:release-seal .7s both}
@keyframes release-seal{to{transform:scale(1.15) rotate(-9deg);opacity:0}}
@keyframes open-cover{0%{opacity:1;transform:perspective(1400px) rotateY(0)}100%{opacity:0;transform:perspective(1400px) rotateY(-80deg) translateX(-15%)}}
@media(prefers-reduced-motion:reduce){#cover.cover-opening,.cover-opening .seal-open{animation:none!important}}

.seal-open-label{font:italic 19px/1.4 Georgia,serif;max-width:85px;margin:0}

body:not(.invitation-closed) .botanical,body:not(.invitation-closed) .botanical-bottom{display:none!important}

/* A clean oval opening button, with no botanical decoration. */
.seal-open{width:auto;height:auto;min-height:54px;min-width:185px;padding:14px 28px;border:1px solid #9b7c3e;border-radius:999px;background:#fbf8ef;box-shadow:0 3px 12px #61471f12;color:#624820}
.seal-open:before{display:none}.seal-open-label{max-width:none;font:italic 20px/1.4 Georgia,serif}.seal-open:hover{background:#f1e8d4}.seal-open:focus-visible{outline:2px solid #9b7c3e;outline-offset:5px}

/* Lift the cover upward, then reveal the invitation gently. */
#cover.cover-opening{transform-origin:center bottom;animation:lift-cover 1.15s cubic-bezier(.55,0,.2,1) both}
.cover-opening .seal-open{animation:soften-button .6s both}
@keyframes lift-cover{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-105svh)}}
@keyframes soften-button{to{opacity:0;transform:translateY(-8px)}}
#invitation-content.invitation-arrives #jemputan>.arabic{animation:words-arrive 1.3s .1s both}
#invitation-content.invitation-arrives #jemputan>p:not(.arabic){animation:words-arrive 1.4s .35s both}
#invitation-content.invitation-arrives #jemputan>.parents{animation:words-arrive 1.5s .6s both}
#invitation-content.invitation-arrives #jemputan>.couple{animation:words-arrive 1.5s .85s both}
#invitation-content.invitation-arrives #jemputan>.rule{animation:words-arrive 1.5s .65s both}
.reveal-pending{transition-duration:1.3s}
@keyframes words-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#cover.cover-opening,#invitation-content.invitation-arrives #jemputan>*{animation:none!important}}

/* Closing signature proportions matched to the supplied reference. */
#invitation-content .closing h2{margin-bottom:7px}
#invitation-content .closing .small{font-family:Arial,sans-serif;font-size:27px;font-style:normal;font-weight:400;letter-spacing:0;line-height:1.4;margin-top:0}

.title-together{white-space:nowrap}

/* Smaller, regular-weight names in the invitation text. */
#jemputan .parents,#jemputan .couple{font-size:22px;font-weight:400;line-height:1.6}
@media(max-width:380px){#jemputan .parents,#jemputan .couple{font-size:21px}}