/* Cornflower Doodle: coretan pena biru di kertas putih, hati merah, liontin hati, foto oval berpita sobek. */
:root{
--dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1' fill='%232E4A7D' fill-opacity='.13'/%3E%3C/svg%3E");
--heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 86C18 62 4 46 4 28 4 14 15 5 28 5c9 0 17 5 22 13C55 10 63 5 72 5c13 0 24 9 24 23 0 18-14 34-46 58z' fill='%23fff' stroke='%232E4A7D' stroke-width='3.2' stroke-linejoin='round'/%3E%3C/svg%3E");
--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10'%3E%3Cpath d='M0 5q10-8 20 0t20 0' fill='none' stroke='%232E4A7D' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
--torn:polygon(2% 0,98% 0,100% 16%,98% 32%,100% 48%,98% 64%,100% 80%,98% 100%,2% 100%,0 84%,2% 68%,0 52%,2% 36%,0 20%);
--red:#E23D4B;--wob:22px 8px 24px 8px/8px 24px 8px 22px;
--bg:#fff;--bg2:#E8EFFA;--ink:#243B66;--mut:#5C6F93;--acc:#2E4A7D;--acc2:#8FAEDD;--on-acc:#fff;--card:#fff;--inp:transparent;--line:#2E4A7D;
--r:22px;--rb:22px;--rp:50%;--sh:none;--hf:"Gaegu","Comic Sans MS",cursive;--bf:"Nunito",system-ui,sans-serif;
--cover-ink:#243B66;--cover-btn-bg:#2E4A7D;--cover-btn-bd:#2E4A7D;--cover-btn-ink:#fff;--arch:50%;--arch-bd:5px solid #fff;
--body-bg:var(--dots),#fff;--cover-amp:#E23D4B;--nav-bg:#fff}
body{font-size:17px}
h1,h2,h3{font-weight:700}
.names{color:var(--acc);font-weight:700;letter-spacing:0}
.amp{color:var(--red);font-style:normal}
h2{font-size:clamp(2.3rem,9vw,3.2rem)}
h2::after{content:"";display:block;width:120px;height:10px;margin:4px auto 0;background:var(--wave) repeat-x}
.hero .names::after{display:none}
.hero .names{font-size:clamp(3.6rem,16vw,6rem)}
.kicker{color:var(--red);font-weight:700;letter-spacing:.14em}
.hero-date::before,.hero-date::after{content:"♥";color:var(--red);margin:0 .5em;font-size:.9em}
.hero-date{color:var(--ink);font-weight:600}

/* Cover */
.cover-bg{background:var(--dots),#fff!important}
.cover-in::before{content:"";position:absolute;z-index:-1;left:-12%;right:-12%;top:150px;height:76px;background:#BFD3F2;transform:rotate(-4deg);clip-path:var(--torn)}
.cover-arch{position:relative;box-shadow:0 0 0 2.5px var(--acc),0 0 0 8px #fff,0 0 0 10px var(--acc2)!important}
.cover-arch::after{content:"♥";position:absolute;right:-16px;bottom:22px;font-size:2.7rem;line-height:1;color:var(--red);transform:rotate(14deg);text-shadow:0 2px 0 #fff}
.cover .names{font-size:clamp(3.1rem,14vw,4.8rem)}
.cover .eyebrow{color:var(--red);font-weight:700;letter-spacing:.2em}
.cover .cover-date{font-weight:700;color:var(--ink)}
.cover .cover-date::before,.cover .cover-date::after{content:"♥";color:var(--red);margin:0 .5em}
.cover .to strong{color:var(--acc)}

/* Ornamen dan kartu bergaya coretan */
.orn b{color:var(--red)}
.orn::before,.orn::after{height:0;background:none;border-top:2.5px dotted var(--acc);opacity:.7}
.ev,.acct,.rsvp form,.verse blockquote{border:2.5px solid var(--acc);border-radius:var(--wob);background:#fff;box-shadow:5px 5px 0 var(--acc2)}
.verse blockquote{font-style:normal;font-family:var(--bf);font-size:1rem}
.ev .time,.cd b{color:var(--red)}
.ev h3{font-size:1.9rem}
.wishes blockquote{border:2.5px solid var(--acc);border-radius:var(--wob);background:#fff}
.wishes cite{color:var(--acc)}

/* Hitung mundur dalam liontin hati */
.cd{gap:6px;max-width:430px}
.cd div{background:var(--heart) center/contain no-repeat;border:0;box-shadow:none;border-radius:0;aspect-ratio:1/.95;display:grid;align-content:center;padding:0 0 12%}
.cd b{font-size:clamp(1.5rem,7vw,2rem)}
.cd span{font-size:.58rem;letter-spacing:.05em;font-weight:700;color:var(--acc)}

/* Foto oval berenda di pita biru sobek */
.person{position:relative;isolation:isolate}
.person::before{content:"";position:absolute;z-index:-1;left:-6%;right:-6%;top:36%;height:72px;background:#BFD3F2;transform:rotate(-3deg);clip-path:var(--torn)}
.person:nth-child(2)::before{transform:rotate(3deg)}
.person img{aspect-ratio:3/4;border:5px solid #fff;box-shadow:0 0 0 2.5px var(--acc),0 0 0 8px #fff;outline:3px dotted var(--acc);outline-offset:9px;margin-bottom:26px}
.person strong{font-size:1.9rem;color:var(--acc)}
.person .role{color:var(--red)}

/* Galeri seperti foto tempel */
.grid{gap:12px}
.grid img{border:5px solid #fff;box-shadow:0 0 0 2px var(--acc);border-radius:6px}
.grid img:nth-child(odd){rotate:-2deg}.grid img:nth-child(even){rotate:2deg}

/* Tombol dan isian */
.btn{border:2.5px solid var(--acc);border-radius:var(--wob);box-shadow:3px 3px 0 var(--acc2);font-weight:700}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--acc2)}
.btn.sec{background:#fff;color:var(--acc)}
.cover .btn{backdrop-filter:none;box-shadow:3px 3px 0 var(--acc2)}
input,select,textarea{border:0;border-bottom:2.5px solid var(--acc);border-radius:0;background:transparent;padding-inline:4px}
label{color:var(--acc)}
.bnav{border:2.5px solid var(--acc);box-shadow:3px 3px 0 var(--acc2);border-radius:26px}
.bnav a.on{background:var(--acc)}
.fab button{border:2.5px solid var(--acc);background:#fff;color:var(--red)}
.foot .names{font-size:2.4rem}