/* Colours are set from script.js (config.colors); these are fallbacks. */
:root{--bg1:#3a0d1b;--bg2:#141012;--wine:#7a1f37;--pink:#f0c4cb;--cream:#f7efe4;--ink:#2b1a1d;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;font:400 1rem/1.7 var(--sans);color:var(--cream);background:radial-gradient(120% 80% at 50% 0,var(--bg1),var(--bg2)) fixed}
#bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;line-height:1.25;margin:0 0 1rem}
h2{font-size:clamp(1.7rem,6vw,2.4rem);text-align:center;margin-bottom:2rem}
.big{font-size:clamp(1.25rem,4.5vw,1.6rem)}.c{text-align:center}.soft{color:var(--pink);opacity:.85}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.ed{display:none!important}body.edit .ed{display:inline-flex!important}body.edit .form.ed{display:flex!important}body.edit .view{display:none}

/* landing */
#landing{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;transition:opacity .8s}
#landing.out{opacity:0;pointer-events:none}
#landing h1{font-size:clamp(1.7rem,7vw,3rem);font-style:italic;max-width:18em;animation:rise 1.6s both .3s}
#landing .soft{animation:rise 1.2s both}
#hb{font-size:clamp(1.2rem,4vw,1.6rem);animation:rise 1.6s both 1.1s}
#gate{animation:rise 1.6s both 1.8s;display:flex;flex-direction:column;align-items:center;gap:.8rem}
#pass{padding:.7rem 1rem;border-radius:99px;border:1px solid var(--pink);background:transparent;color:var(--cream);text-align:center;font-size:1rem}
#perr{margin:0;min-height:1.5em;color:var(--pink)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.beat{display:inline-block;animation:beat 2.6s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.15)}}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.6rem 1.5rem;border:0;border-radius:99px;background:var(--cream);color:var(--wine);font:600 1rem var(--sans);cursor:pointer;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0006}.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid #f7efe455}

nav{position:sticky;top:0;z-index:4;display:flex;gap:.3rem;overflow-x:auto;padding:.6rem 1rem;background:#141012b3;backdrop-filter:blur(12px);scrollbar-width:none}
nav a{color:var(--cream);text-decoration:none;padding:.35rem .8rem;border-radius:99px;font-size:.9rem;white-space:nowrap;opacity:.8}nav a:hover{background:#ffffff18;opacity:1}
.s{max-width:760px;margin:0 auto;padding:5rem 1.25rem;scroll-margin-top:2rem}
.card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;padding:1.6rem;backdrop-filter:blur(10px)}
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s,transform 1s}.rv.in{opacity:1;transform:none}

/* letter */
.env{display:block;margin:0 auto;width:min(280px,80vw);height:180px;position:relative;border:0;border-radius:10px;background:var(--wine);color:var(--pink);cursor:pointer;box-shadow:0 20px 50px #0007;transition:opacity .6s,max-height .8s,margin .8s,transform .3s;max-height:200px;font:italic 1.05rem var(--serif)}
.env:hover{transform:translateY(-4px)}
.env::before{content:"";position:absolute;inset:0 0 auto;height:60%;background:#8f2a45;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .7s}
.env span{position:absolute;inset:auto 0 18px}
.open .env{opacity:0;max-height:0;margin:0;pointer-events:none;overflow:hidden}.open .env::before{transform:rotateX(180deg)}
.paper{display:none;background:var(--cream);color:var(--ink);border-radius:6px;padding:clamp(1.5rem,6vw,3rem);font:italic 1.12rem/1.95 var(--serif);box-shadow:0 30px 60px #0008;background-image:repeating-linear-gradient(transparent 0 calc(1.95em - 1px),#7a1f3718 calc(1.95em - 1px) 1.95em)}
.open .paper{display:block;animation:unfold 1.2s both}
@keyframes unfold{from{opacity:0;transform:translateY(20px) scaleY(.92)}}
.paper p{margin:0 0 1.95em}.paper p:last-child{margin:0;text-align:right}
.ph{background:#f0c4cb80;border-radius:4px;padding:0 .25em;font-style:normal;font-size:.9em}

/* timeline */
.tl{list-style:none;margin:0;padding:0 0 0 1.6rem;border-left:1px solid #f0c4cb55}
.tl li{position:relative;padding:0 0 2.4rem 1rem}
.tl li::before{content:"";position:absolute;left:-1.6rem;top:.55rem;width:11px;height:11px;margin-left:-5px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 5px #f0c4cb22}
.tl time{color:var(--pink);font-size:.9rem}.tl h3{font-size:1.4rem;margin:.1rem 0 .3rem}.tl p{margin:0;opacity:.85}
.tl img{width:100%;max-width:360px;border-radius:14px;margin-top:.8rem}

/* counter */
.count{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1rem}
.count div{text-align:center;padding:1.4rem 1rem;border-radius:20px;background:#ffffff0d;border:1px solid #ffffff1a}
.count b{display:block;font:400 clamp(1.7rem,7vw,2.4rem)/1.2 var(--serif);font-variant-numeric:tabular-nums}
.count span{color:var(--pink);font-size:.9rem}

/* gallery */
.grid{columns:2 150px;column-gap:.8rem}
figure{margin:0 0 .8rem;break-inside:avoid;overflow:hidden;border-radius:16px;background:#ffffff0d;position:relative}
figure img{display:block;width:100%;transition:transform .6s}figure:hover img{transform:scale(1.04)}
figcaption{padding:.6rem .8rem;font-size:.9rem}figcaption small{display:block;opacity:.6}
figcaption input{width:100%;margin:.15rem 0;padding:.4rem;border-radius:8px;border:1px solid #fff3;background:#0004;color:var(--cream);font:inherit}
.x{position:absolute;top:.5rem;right:.5rem;width:36px;height:36px;border-radius:50%;border:0;background:#000a;color:#fff;cursor:pointer}
#memories>label,#song>label{margin-top:1.5rem}

/* loves */
.lg{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.lg .card{transition:transform .35s,border-color .35s;position:relative}.lg .card:hover,.lg .card:active{transform:translateY(-5px);border-color:var(--pink)}
.lg .card h3{font-size:1.25rem;margin-bottom:.4rem}.lg .card p{margin:0;opacity:.85}.lg .em{font-size:1.6rem;display:block}
.form{gap:.5rem;flex-wrap:wrap;margin-top:1.2rem}.form input{flex:1 1 140px;padding:.7rem;border-radius:12px;border:1px solid #fff3;background:#0004;color:var(--cream);font:inherit}

/* song */
.song{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}.song img,.disc{width:96px;height:96px;border-radius:14px;object-fit:cover;background:var(--wine);display:grid;place-items:center;font-size:2rem}
.song h3{margin:0}.song audio{width:100%;margin-top:.8rem}

/* bucket list */
.ck{list-style:none;padding:0;margin:0 0 1.5rem}
.ck li{display:flex;gap:.8rem;align-items:center;padding:.9rem 1.1rem;margin-bottom:.5rem;border-radius:14px;background:#ffffff0d;animation:rise .7s both}
.ck label{flex:1;display:flex;gap:.8rem;align-items:center;cursor:pointer;min-height:32px}
.ck input{width:22px;height:22px;accent-color:var(--pink)}
.done label span{text-decoration:line-through;opacity:.6}.ck li.flash{animation:flash 1s}
@keyframes flash{30%{background:#f0c4cb55;transform:scale(1.02)}}
.ck .x{position:static;flex:none}

#msg{margin:2rem auto 0;max-width:24em;animation:rise 1.4s both}
footer{padding:3rem 1.25rem 4rem;opacity:.85}footer p{margin:.2rem}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* fixes */
[hidden]{display:none!important}
body.edit figcaption input.ed{display:block!important}