html,body{margin:0;padding:0;background:#4A0F15;color:#2A211B;font-family:'Jost',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#7A1E25}a:hover{color:#2A211B}
input,textarea,button,select{font-family:inherit}
button{cursor:pointer}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
[hidden]{display:none!important}

.serif{font-family:'Cormorant Garamond',serif}
.mono{font-family:'IBM Plex Mono',monospace}
.muted{color:#6B5D52}
.lbl{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#7A1E25}
.fill{width:100%;height:100%;object-fit:cover;display:block}
.ph{width:100%;height:100%;background:repeating-linear-gradient(135deg,#E9E0D2 0 10px,#F0E9DE 10px 20px);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#6B5D52;letter-spacing:.06em}

/* tombol & input */
.btn{padding:15px;background:#2A211B;color:#FBF8F2;border:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.btn.red{background:#7A1E25}
.btn-o{padding:9px 18px;border:1px solid #2A211B;background:transparent;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#2A211B}
.tog{padding:8px 16px;border:1px solid #2A211B;background:transparent;color:#2A211B;font-size:13px}
.tog.on{background:#2A211B;color:#FBF8F2}
.in{padding:14px;border:1px solid #DCCFBC;background:#fff;font-size:15px;color:#2A211B;width:100%}
textarea.in{resize:vertical}

/* layout undangan */
.wrap{display:flex;flex-wrap:wrap;min-height:100vh;background:#4A0F15}
.hero{flex:1 1 560px;height:100vh;position:sticky;top:0;align-self:flex-start;overflow:hidden;background:#3D0C11}
.hero .media{position:absolute;inset:0}
.hero .ph{align-items:flex-start;padding-top:22vh}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(61,12,17,0) 35%,rgba(61,12,17,.82) 100%)}
.hero .foot{position:absolute;left:0;right:0;bottom:0;height:34px;background:#4A0F15;border-top:1px solid #B8924F}
.hero .txt{position:absolute;left:0;right:0;bottom:34px;padding:clamp(28px,5vw,64px);color:#FBF8F2;display:flex;flex-direction:column;gap:10px}
.kicker{font-size:12px;letter-spacing:.32em;text-transform:uppercase}
.hero .names{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(52px,7vw,96px);line-height:.95}
.amp{font-style:normal;color:#D9BE8C}
.hero .meta{display:flex;align-items:center;gap:12px;font-size:15px;letter-spacing:.08em}
.dia{width:5px;height:5px;transform:rotate(45deg);background:#D9BE8C}
.col{flex:1 1 420px;max-width:520px;margin:0 auto;position:relative;z-index:2;background:#FBF8F2;border-left:1px solid #B8924F;border-right:1px solid #B8924F;box-shadow:0 -20px 40px rgba(61,12,17,.35);text-align:center}
.col section{padding:56px 28px}
.bt{border-top:1px solid #E4D9C8}
.alt{background:#F4EEE4}

.band{height:30px;background:#4A0F15;border-top:1px solid #B8924F;border-bottom:1px solid #B8924F;display:flex;align-items:center;justify-content:center;gap:8px}
.band i{width:60px;height:1px;background:#B8924F}
.band b{width:14px;height:14px;border-radius:50%;border:1px solid #D4AF6A;display:flex;align-items:center;justify-content:center}
.band b::after{content:'';width:4px;height:4px;border-radius:50%;background:#D4AF6A}
.orn{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0}
.orn i{width:40px;height:1px;background:#B8924F}
.orn b{width:7px;height:7px;transform:rotate(45deg);border:1px solid #B8924F}
.orn.sm{margin:2px 0 6px}.orn.sm i{width:28px}.orn.sm b{width:6px;height:6px;background:#B8924F;border:0}

.quote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;line-height:1.5;margin:0 0 14px;text-wrap:pretty}
.arch{width:180px;height:230px;border-radius:999px 999px 6px 6px;overflow:hidden;border:1px solid #B8924F;padding:6px;background:#FBF8F2}
.arch>div{width:100%;height:100%;border-radius:999px 999px 3px 3px;overflow:hidden}
.arch.sm{width:150px;height:190px;padding:5px;margin:8px 0}
.person{display:flex;flex-direction:column;align-items:center;gap:10px}
.person .nick{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:44px;line-height:1;margin-top:8px}
.person .ig{font-size:13px;letter-spacing:.06em;text-decoration:none;border-bottom:1px solid #B8924F;padding-bottom:2px}

.cd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:22px 0 48px}
.cd div{border:1px solid #E4D9C8;padding:14px 4px;background:#F4EEE4}
.cd b{display:block;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:38px;line-height:1}
.cd span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6B5D52;margin-top:6px}
.event{border:1px solid #E4D9C8;padding:30px 22px;display:flex;flex-direction:column;align-items:center;gap:8px}
.event .t{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:500}
.event .go{margin-top:12px;padding:11px 22px;background:#2A211B;color:#FBF8F2;text-decoration:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase}

.story{display:flex;flex-direction:column;margin-top:30px;text-align:left;border-left:1px solid #B8924F;margin-left:8px}
.story>div{position:relative;padding:0 0 30px 26px}
.story>div::before{content:'';position:absolute;left:-5px;top:6px;width:9px;height:9px;transform:rotate(45deg);background:#7A1E25}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gal>div{aspect-ratio:4/5;overflow:hidden;cursor:pointer;background:#F4EEE4}
.gal>div.wide{grid-column:1/-1;aspect-ratio:16/10}

.card{background:#FBF8F2;border:1px solid #E4D9C8;padding:22px}
.wish{padding:16px 2px;border-bottom:1px solid #E4D9C8}

.orns{position:absolute;inset:0;overflow:hidden;pointer-events:none;--s:380px}
.orns i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 11px,rgba(212,175,106,.42) 11px 12px);-webkit-mask-image:radial-gradient(circle,#000 25%,transparent 70%);mask-image:radial-gradient(circle,#000 25%,transparent 70%)}
.orns b{position:absolute;width:calc(var(--s)/2);height:calc(var(--s)/2);border-radius:50%;border:1px dashed rgba(222,190,124,.75)}
.orns .tl{top:calc(var(--s)/-2);left:calc(var(--s)/-2)}
.orns .br{bottom:calc(var(--s)/-2);right:calc(var(--s)/-2)}
.orns b.tl{top:calc(var(--s)/-4);left:calc(var(--s)/-4)}
.orns b.br{bottom:calc(var(--s)/-4);right:calc(var(--s)/-4)}
.orns.lg{--s:560px}

.cover{position:fixed;inset:0;z-index:50;background:#4A0F15;display:flex;overflow-y:auto;padding:24px}
.cover .box{margin:auto;position:relative;background:#FBF8F2;outline:1px solid #B8924F;outline-offset:6px;border:1px solid #E4D9C8;padding:40px 32px;max-width:420px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;animation:fadeUp .8s ease both}
.music{position:fixed;right:18px;bottom:18px;z-index:40;width:48px;height:48px;border-radius:50%;border:1px solid #B8924F;background:#FBF8F2;color:#2A211B;font-size:15px;box-shadow:0 6px 18px rgba(61,12,17,.18)}
.lb{position:fixed;inset:0;z-index:60;background:rgba(20,14,10,.92);display:flex;align-items:center;justify-content:center;padding:24px}
.lb img{max-width:100%;max-height:90vh;object-fit:contain}
.toast{position:fixed;left:50%;top:20px;transform:translateX(-50%);z-index:80;background:#2A211B;color:#FBF8F2;padding:11px 18px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.2);max-width:90vw}