@font-face{font-family:Fraunces;src:url(assets/fraunces-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(assets/fraunces-latin-wght-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:Figtree;src:url(assets/figtree-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:Caveat;src:url(assets/caveat-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Caveat;src:url(assets/caveat-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{--top:rgb(8,11,36);--bot:rgb(20,26,69);--fg:rgb(243,239,255);--h1:rgb(14,20,56);--h2:rgb(10,15,44);--h3:rgb(7,11,32);
  --amber:#ffc978;--blush:#ffb3bd}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--top);scrollbar-width:none}
html::-webkit-scrollbar{display:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:Figtree,system-ui,sans-serif;color:var(--fg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.serif{font-family:Fraunces,Georgia,serif}

/* fixed world */
#sky{position:fixed;inset:0;z-index:0;background:linear-gradient(var(--top),var(--bot))}
.aurora{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:var(--aur,1)}
.aurora i{position:absolute;width:70vmax;height:34vmax;border-radius:50%;filter:blur(70px);opacity:.38;mix-blend-mode:screen}
.aurora i:nth-child(1){left:-20vmax;top:-8vmax;background:radial-gradient(closest-side,#5b4bd6,transparent);animation:drift1 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){right:-25vmax;top:8vmax;background:radial-gradient(closest-side,#e0709c,transparent);animation:drift2 28s ease-in-out infinite alternate}
.aurora i:nth-child(3){left:10vmax;top:22vmax;background:radial-gradient(closest-side,#3a8fd1,transparent);animation:drift1 31s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(14vmax,6vmax) rotate(18deg)}}
@keyframes drift2{to{transform:translate(-16vmax,4vmax) rotate(-14deg)}}
#moon{position:fixed;z-index:2;top:0;left:0;width:13vmin;height:13vmin;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#fffbea,#f4e6b8 62%,#dccb94);box-shadow:0 0 90px 24px rgba(255,244,205,.28);opacity:0;will-change:transform}
#moon:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 62% 60%,rgba(150,130,90,.22) 0 9%,transparent 10%),radial-gradient(circle at 30% 66%,rgba(150,130,90,.18) 0 6%,transparent 7%),radial-gradient(circle at 58% 24%,rgba(150,130,90,.16) 0 5%,transparent 6%)}
#sun{position:fixed;z-index:2;left:50%;top:66vh;width:40vmin;height:40vmin;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fffdf0 0,#ffe9a8 45%,#ffc36b 78%,#ff9f6e 100%);box-shadow:0 0 120px 50px rgba(255,205,120,.55)}
#rays{position:absolute;left:50%;top:50%;width:190vmax;height:190vmax;margin:-95vmax 0 0 -95vmax;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,240,190,.55) 0 5deg,transparent 5deg 15deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.55) 18%,transparent 52%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.55) 18%,transparent 52%);
  animation:spin 120s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
#fx{position:fixed;inset:0;z-index:3;pointer-events:none}
.hill{position:fixed;left:-12vw;width:124vw;bottom:0;z-index:4;pointer-events:none;will-change:transform}
.hill svg{display:block;width:100%;height:100%}
#hl1{height:30vh}#hl1 path{fill:var(--h1)}
#hl2{height:23vh}#hl2 path{fill:var(--h2)}
#hl3{height:16vh}#hl3 path{fill:var(--h3)}
#bar{position:fixed;z-index:50;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--blush),var(--amber));transform:scaleX(0);transform-origin:left}

main{position:relative;z-index:10}
.w{display:inline-block}
.kick{font-family:Caveat,cursive;font-weight:700;font-size:clamp(1.6rem,5vw,2.3rem);color:var(--amber)}

/* intro */
#intro{height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 6vw}
.intro-in{will-change:transform,opacity}
#intro h1{font-weight:500;font-size:clamp(2.5rem,9.6vw,6.2rem);line-height:1.02;letter-spacing:-.02em;margin:.25em auto .5em;max-width:11em}
.ln{display:block;overflow:hidden;padding:0 .05em .14em;margin-bottom:-.14em}
.ln>span{display:block}
#intro em{font-weight:300;color:var(--blush)}
.cue{font-size:clamp(.95rem,2.6vw,1.1rem);opacity:.75;margin-top:2.4rem}
.cue:after{content:"";display:block;margin:1rem auto 0;width:1px;height:54px;background:linear-gradient(var(--fg),transparent);transform-origin:top;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* statements */
.stmt{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:10vh 7vw;max-width:62rem;margin:0 auto}
.stmt p:first-child{font-family:Fraunces,serif;font-weight:400;font-size:clamp(1.9rem,6.4vw,4.1rem);line-height:1.12;letter-spacing:-.015em}
.stmt .huge{font-size:clamp(3.4rem,15vw,10rem)!important;font-weight:300!important;font-style:italic}
.aside{margin-top:1.6rem;font-size:clamp(.95rem,2.5vw,1.1rem);opacity:.7;font-style:italic}

/* weeks */
#weeks{height:100vh;height:100svh;position:relative;overflow:hidden}
.wk-top{position:absolute;left:6vw;top:7vh;line-height:1}
.wk-top small{display:block;font-family:Caveat,cursive;font-weight:700;font-size:clamp(1.5rem,4.4vw,2.1rem);color:var(--amber);margin-bottom:.1em}
#wkNum{font-family:Fraunces,serif;font-weight:200;font-size:clamp(5rem,20vmin,12rem);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.fruits{position:absolute;left:0;right:0;top:41%;height:0}
.fruit{position:absolute;left:50%;top:0;width:0;height:0;display:flex;align-items:center;justify-content:center}
.emo{display:block;font-size:clamp(7rem,40vmin,22rem);line-height:1;transform:translate(-50%,-50%);position:absolute;left:0;top:0;white-space:nowrap;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));animation:bobE 5s ease-in-out infinite}
@keyframes bobE{50%{margin-top:-1.4vmin}}
.rings i{position:absolute;left:0;top:0;width:60vmin;height:60vmin;margin:-30vmin 0 0 -30vmin;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);animation:ring 3.6s ease-out infinite}
.rings i:nth-child(2){animation-delay:1.8s}
@keyframes ring{0%{transform:scale(.45);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.caps{position:absolute;left:0;right:0;bottom:8vh;height:0}
.cap{position:absolute;left:50%;bottom:0;width:min(34rem,88vw);transform:translateX(-50%);text-align:center}
.cap h3{font-weight:500;font-style:italic;font-size:clamp(1.5rem,4.8vw,2.2rem);margin-bottom:.3em}
.cap p{font-size:clamp(1rem,2.8vw,1.18rem);line-height:1.55;text-shadow:0 1px 14px rgba(8,11,36,.55)}
.rule{position:absolute;left:6vw;right:6vw;bottom:3.2vh;height:2px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden}
#wkBar{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--blush),var(--amber));transform:scaleX(0);transform-origin:left}

/* lab */
.sec{padding:14vh 6vw;max-width:62rem;margin:0 auto}
.sec h2{font-weight:400;font-size:clamp(2rem,7vw,4rem);line-height:1.08;letter-spacing:-.015em;margin-bottom:.35em}
.sub{font-size:clamp(1rem,2.8vw,1.2rem);line-height:1.6;opacity:.85;max-width:38rem}
.glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:26px;box-shadow:0 30px 80px rgba(5,8,30,.35)}
.lab-card{margin-top:2.4rem;padding:clamp(1.2rem,4vw,2.2rem)}
.fields{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.fields{grid-template-columns:1.4fr 1fr}}
.fields label{display:block;font-size:.95rem;opacity:.9}
.fields input{display:block;width:100%;margin-top:.4rem;padding:.85rem 1rem;border-radius:14px;border:1px solid rgba(255,255,255,.28);background:rgba(8,11,36,.35);color:var(--fg);font:inherit;font-size:1.1rem;outline:none;color-scheme:dark}
.fields input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,201,120,.25)}
.out{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;margin-top:1.8rem;min-height:7.5rem}
.blk{display:flex;gap:1.1rem;align-items:center;flex:1 1 15rem}
.bn{font-family:Fraunces,serif;font-weight:200;font-size:clamp(4.4rem,16vw,7rem);line-height:1;min-width:1.1ch;color:var(--amber);font-variant-numeric:tabular-nums}
.bl{font-family:Caveat,cursive;font-weight:700;font-size:1.5rem;color:var(--blush);line-height:1}
.bm{margin-top:.3rem;line-height:1.45;font-size:1.02rem}
.keep{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
button{font:inherit;cursor:pointer}
.btn{padding:.75rem 1.3rem;border-radius:99px;border:0;background:var(--amber);color:#2a1a40;font-weight:600;font-size:1rem}
.btn:hover{filter:brightness(1.07)}
.btn:focus-visible,.chip:focus-visible{outline:3px solid #fff;outline-offset:2px}
.chip{padding:.45rem .5rem .45rem .9rem;border-radius:99px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:var(--fg);font-size:.95rem}
.chip b{font-weight:600;color:var(--amber);margin-left:.2rem}
.chip u{text-decoration:none;opacity:.6;margin-left:.5rem;padding:0 .3rem}
.fine{margin-top:1.2rem;font-size:.9rem;opacity:.6;font-style:italic}

/* audit */
.ledger{margin-top:2.2rem}
.lrow{display:flex;align-items:baseline;gap:.7rem;padding:.95rem 0;border-bottom:1px solid rgba(255,255,255,.14);opacity:0;font-size:clamp(1rem,2.8vw,1.2rem)}
.lrow .lab{flex:0 1 auto}
.lrow .dots{flex:1;border-bottom:2px dotted rgba(255,255,255,.22);transform:translateY(-.25em);min-width:1rem}
.lrow .before{opacity:.6;font-variant-numeric:tabular-nums;text-decoration:line-through;text-decoration-thickness:1px}
.lrow .arr{color:var(--amber)}
.lrow .after{font-family:Fraunces,serif;font-weight:500;color:var(--amber);font-variant-numeric:tabular-nums;text-align:right}
.stamp{margin:3rem auto 0;width:min(26rem,100%);padding:1.6rem 1.4rem;text-align:center;border:3px double var(--blush);border-radius:18px;color:var(--blush);opacity:0;transform-origin:center}
.stamp b{display:block;font-family:Fraunces,serif;font-weight:700;font-size:clamp(1.9rem,7vw,2.8rem);letter-spacing:.02em;margin:.2rem 0 .5rem}
.stamp span{display:block;font-size:1rem;line-height:1.5;color:var(--fg);opacity:.9}
.stamp small{font-size:.95rem;opacity:.85}

/* letter */
#letter{padding:12vh 5vw 26vh}
.paper{position:relative;max-width:36rem;margin:0 auto;padding:clamp(1.6rem,6vw,3rem) clamp(1.5rem,6vw,3rem);background:#fbf6ff;color:#2d2447;border-radius:6px;transform:rotate(-1.2deg);
  box-shadow:0 2px 0 #ece3f6,0 30px 70px rgba(15,10,40,.5);
  background-image:repeating-linear-gradient(transparent 0 2.05rem,rgba(120,100,170,.13) 2.05rem 2.1rem)}
.paper:before{content:"";position:absolute;left:clamp(2.2rem,9vw,3.6rem);top:0;bottom:0;width:1px;background:rgba(224,112,156,.35)}
.paper p{font-family:Caveat,cursive;font-weight:600;font-size:clamp(1.55rem,5.2vw,2.15rem);line-height:2.05rem;margin-bottom:2.05rem;padding-left:clamp(.9rem,3.4vw,1.4rem)}
.paper .sig{font-weight:700;font-size:clamp(1.9rem,6.2vw,2.5rem)}
.paper .ps{font-size:clamp(1.35rem,4.4vw,1.8rem);line-height:1.8rem}

/* dawn */
#dawn{height:100vh;height:100svh;position:relative;overflow:hidden}
.dline{position:absolute;left:0;right:0;top:30%;text-align:center;padding:0 7vw;font-family:Fraunces,serif;font-weight:400;font-size:clamp(2rem,7vw,4.6rem);line-height:1.1;letter-spacing:-.015em;opacity:0}
.dline em{font-weight:300}
.welcome{position:absolute;left:50%;top:4%;width:min(92vw,34rem);transform:translateX(-50%);overflow:visible}
.welcome text{font-family:Caveat,cursive;font-weight:700;font-size:150px;color:var(--fg);fill:transparent;stroke:var(--fg);stroke-width:2.4;stroke-linejoin:round}
.dend{position:absolute;left:0;right:0;top:calc(4% + min(92vw,34rem)*.47 + 1rem);text-align:center;padding:0 7vw;opacity:0}
.dend p{font-size:clamp(1.05rem,3vw,1.35rem);line-height:1.6;max-width:34rem;margin:0 auto .9rem}
.blank{display:inline-block;border-bottom:2px solid currentColor;padding:0 .5em;font-style:italic;font-family:Fraunces,serif}
.wishbtn{margin-top:.6rem;padding:.9rem 1.6rem;border-radius:99px;border:2px solid var(--fg);background:rgba(255,255,255,.28);color:var(--fg);font-weight:600;font-size:1.05rem;pointer-events:auto;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.wishbtn:hover{background:rgba(255,255,255,.5)}
.wishbtn:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
#lcount{display:block;margin-top:.8rem;font-size:.98rem;opacity:.85;min-height:1.4em}
.signoff{margin-top:1.6rem;font-family:Caveat,cursive;font-weight:700;font-size:1.7rem}
.lantern{position:fixed;z-index:40;width:44px;height:56px;left:0;bottom:-70px;pointer-events:none;border-radius:10px 10px 14px 14px;
  background:linear-gradient(#ffe6a6,#ffb455);box-shadow:0 0 40px 14px rgba(255,190,100,.7),inset 0 -10px 16px rgba(255,120,60,.55)}
.lantern:before{content:"";position:absolute;left:8px;right:8px;top:-4px;height:6px;border-radius:4px;background:#c6733a}

@media (prefers-reduced-motion:reduce){.aurora i,#rays,.emo,.rings i,.cue:after{animation:none}}