:root{--bg:#FBF6EF;--rose:#C97B84;--gold:#C9A66B;--ink:#3B2A26}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,b,.note p{font-family:Fraunces,Georgia,serif;font-weight:400}
section{padding:72px 24px;max-width:720px;margin:0 auto}
.opener{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.opener h1{font-size:clamp(3rem,14vw,6rem);line-height:1.1}
.opener h1 span{display:block}
.l1{opacity:0;animation:fade 1.2s ease .3s forwards}
.l2{color:var(--rose);opacity:0;animation:fade 1.6s ease 2.2s forwards}
.since{margin-top:28px;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;opacity:0;animation:fade 1.2s ease 3.6s forwards}
.since::before{content:"";display:block;width:40px;height:1px;background:var(--gold);margin:0 auto 18px}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.counters{display:grid;gap:20px;grid-template-columns:1fr}
.counters:has(#married:not([hidden])){grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{border:1px solid var(--gold);border-radius:18px;padding:28px 20px;text-align:center;background:var(--bg)}
.card h2{font-size:1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin-bottom:16px}
.nums{display:flex;justify-content:center;gap:24px}
.nums b{display:block;font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums}
.nums span{font-size:.8rem;letter-spacing:.08em;opacity:.75}
.timeline ol{list-style:none;position:relative;padding-left:32px}
.timeline ol::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;border-left:2px dotted var(--rose)}
.timeline li{position:relative;margin-bottom:44px;opacity:0;transform:translateY(16px);transition:.8s ease}
.timeline li.in{opacity:1;transform:none}
.timeline li::before{content:"\2764\FE0E";position:absolute;left:-32px;top:0;width:20px;text-align:center;color:var(--rose);background:var(--bg);font-size:14px}
.timeline time{font-family:Fraunces,serif;color:var(--rose)}
.timeline img{display:block;width:100%;border-radius:16px;margin-top:12px;box-shadow:0 8px 24px rgba(59,42,38,.12)}
.note{text-align:center}
.note p{font-size:clamp(1.6rem,6vw,2.4rem);line-height:1.35}
.note .sig{font-family:Caveat,cursive;color:var(--rose);margin-top:24px;font-size:2.2rem}
.end{text-align:center;padding-bottom:120px}
.heart{border:1px solid var(--gold);background:none;color:var(--rose);width:72px;height:72px;border-radius:50%;font-size:30px;cursor:pointer}
.heart:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
.float{position:fixed;pointer-events:none;color:var(--rose);animation:up 2.4s ease-out forwards}
@keyframes up{to{transform:translate(var(--x),-220px);opacity:0}}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}.l1,.l2,.since,.timeline li{opacity:1;transform:none}}
.gate{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px}
.gname{font-size:2.4rem}
.glabel{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose)}
.gcode{font:400 3rem/1.2 Fraunces,Georgia,serif;letter-spacing:.5em;text-indent:.5em;width:7.5ch;text-align:center;color:var(--ink);background:none;border:0;border-bottom:2px solid var(--gold);border-radius:0;padding:6px 0;outline:none;font-variant-numeric:tabular-nums}
.gcode:focus{border-bottom-color:var(--gold)}
.gerr{min-height:1.6em;color:var(--rose);font-size:.95rem}
.shake{animation:shake .45s ease}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:12px;padding-bottom:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip img{flex:0 0 86%;width:86%;height:auto;aspect-ratio:4/5;object-fit:cover;margin:0;scroll-snap-align:center}
.strip.one img{flex-basis:100%;width:100%;aspect-ratio:auto}
.timeline li.nodate::before{top:4px}
@media (max-width:480px){.timeline ol{padding-left:28px}.strip{margin-right:-24px}}