:root{
  --ink:#20294A; --ink2:#4A5478; --sun:#FFCB47; --sun2:#FFB627; --pink:#FF9DB8; --pinkd:#E8507F;
  --mint:#C5EBD6; --lilac:#DCD2F7; --butter:#FFF4CF; --sky:#DFF1FA; --white:#fff;
  --serif:"Fraunces",Georgia,serif; --sans:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;color:var(--ink);font:400 1.0625rem/1.6 var(--sans);
  background:linear-gradient(180deg,#D6EEFA 0,#EAF6FB 38%,#FFF6DC 78%,#FFE9B8 100%) fixed;min-height:100vh;overflow-x:hidden}
h1,h2{font-family:var(--serif);font-weight:650;letter-spacing:-.01em;line-height:1.08;margin:0}
h1{font-size:clamp(3.2rem,15vw,6.6rem);font-variation-settings:"SOFT" 100,"WONK" 1}
h2{font-size:clamp(1.55rem,6vw,2.1rem);font-variation-settings:"SOFT" 100}
p{margin:0}
:focus-visible{outline:3px solid var(--pinkd);outline-offset:3px;border-radius:8px}
.sub{color:var(--ink2);margin:.5rem 0 1.2rem;max-width:34rem}
main,.hero,footer{max-width:46rem;margin:0 auto;padding:0 1.25rem}

/* hero: the sun rises once */
.hero{position:relative;padding-top:2.2rem;padding-bottom:2rem}
.sunrise{position:absolute;right:-.6rem;top:-.2rem;width:min(42vw,13rem);pointer-events:none}
.sun{width:100%;height:auto;display:block;animation:rise 2.6s cubic-bezier(.2,.8,.25,1) both}
.rays{transform-origin:100px 100px;animation:spin 60s linear infinite}
.eyes{transform-origin:100px 94px;animation:blink 6s infinite 3s}
@keyframes rise{from{transform:translateY(7rem) scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.hero h1{position:relative;margin-top:6.4rem}
.lead{position:relative;font-size:1.2rem;line-height:1.55;margin:1.2rem 0 .9rem;max-width:30rem}
.today{position:relative;font-family:var(--serif);font-style:italic;color:var(--ink2);margin-bottom:1.6rem;max-width:30rem}
.today:empty{display:none}

.big{font:700 1.15rem/1 var(--sans);color:var(--ink);background:var(--sun);border:0;border-radius:999px;padding:1.05rem 1.9rem;cursor:pointer;
  box-shadow:0 4px 0 var(--sun2),0 12px 26px rgba(255,182,39,.35);transition:transform .12s,box-shadow .12s}
.big:hover{transform:translateY(-1px)}
.big:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sun2),0 4px 10px rgba(255,182,39,.3)}
.big.small{font-size:1rem;padding:.9rem 1.5rem}
.deal{margin-top:1.4rem;background:var(--white);border-radius:1.6rem 1.6rem 1.6rem .4rem;padding:1.4rem 1.5rem 1.3rem;box-shadow:0 10px 30px rgba(32,41,74,.1);transform-origin:20% 100%}
.deal[hidden]{display:none}
.deal.pop{animation:pop .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{from{transform:scale(.92) rotate(-1.5deg);opacity:.2}to{transform:none;opacity:1}}
.deal__kind{font-weight:800;font-size:.95rem;color:var(--pinkd);margin-bottom:.35rem}
.deal__text{font-family:var(--serif);font-size:clamp(1.35rem,5.4vw,1.75rem);line-height:1.3;font-weight:520}
.deal__from{margin-top:.7rem;color:var(--ink2);font-size:.95rem}
.deal__from:empty{display:none}
.deal.joke .deal__kind{color:#C77A00}.deal.fact .deal__kind{color:#2F8F68}.deal.kind .deal__kind{color:#7C5BD1}

section{padding:2.6rem 0 .4rem}

/* permission slips: paper strips with a torn edge */
.slipgrid{display:grid;grid-template-columns:1fr;gap:.9rem}
@media(min-width:34rem){.slipgrid{grid-template-columns:1fr 1fr}}
.slip{position:relative;text-align:left;font:500 1.02rem/1.4 var(--serif);color:var(--ink);background:var(--butter);border:2px dashed #E5C86B;border-radius:.9rem;padding:1.05rem 1.1rem 2.6rem;cursor:pointer;transition:transform .15s}
.slip:nth-child(3n+1){transform:rotate(-1.2deg);background:#FFF1C2}
.slip:nth-child(3n+2){transform:rotate(.9deg);background:#E4F6EC;border-color:#A7D9BF}
.slip:nth-child(3n){transform:rotate(-.5deg);background:#EFE9FC;border-color:#C3B4EE}
.slip:hover{transform:rotate(0) scale(1.01)}
.slip b{display:block;font-family:var(--sans);font-weight:800;font-size:.8rem;color:var(--ink2);margin-bottom:.25rem}
.slip .sig{position:absolute;left:1.1rem;bottom:.7rem;font:italic 600 1.35rem var(--serif);color:var(--pinkd);opacity:0;transform:rotate(-4deg) scale(1.4);transition:opacity .25s,transform .25s}
.slip.signed .sig{opacity:1;transform:rotate(-4deg) scale(1)}
.slip.signed::after{content:"\2713";position:absolute;right:.9rem;bottom:.6rem;font:700 1.3rem var(--sans);color:#2F8F68}

/* facts strip */
.strip{list-style:none;margin:0 -1.25rem;padding:.3rem 1.25rem 1.2rem;display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.card{flex:0 0 min(78vw,17rem);scroll-snap-align:start;border-radius:1.6rem;padding:1.3rem 1.3rem 1.4rem;min-height:15rem}
.card .em{font-size:2.8rem;line-height:1;display:block;margin-bottom:.8rem}
.card p{font-family:var(--serif);font-size:1.12rem;line-height:1.38;font-weight:500}
.card:nth-child(4n+1){background:#FFE3A1}.card:nth-child(4n+2){background:#CFEFE0}.card:nth-child(4n+3){background:#FBD3E0}.card:nth-child(4n){background:#DDD3F8}

/* breathing */
.breathe{display:grid;gap:1.4rem;align-items:center;grid-template-columns:1fr}
@media(min-width:36rem){.breathe{grid-template-columns:1fr auto}}
.soft{font:700 1rem var(--sans);color:var(--ink);background:var(--white);border:2px solid var(--ink);border-radius:999px;padding:.7rem 1.4rem;cursor:pointer}
.soft:hover{background:var(--ink);color:#fff}
.orb{width:11rem;height:11rem;margin:0 auto;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#BFE3F2 60%,#9ED0EA);box-shadow:0 14px 34px rgba(80,150,200,.3);font-family:var(--serif);font-size:1.2rem;color:var(--ink);transform:scale(.62);transition:transform 4s ease-in-out}
.orb.in{transform:scale(1);transition-duration:4s}
.orb.hold{transform:scale(1);transition-duration:0s}
.orb.out{transform:scale(.62);transition-duration:6s}

/* tiny todo */
.todo{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.todo label{display:flex;align-items:center;gap:.9rem;background:rgba(255,255,255,.75);border-radius:1.1rem;padding:.9rem 1.1rem;cursor:pointer;font-weight:600;transition:background .2s}
.todo input{appearance:none;flex:none;width:1.7rem;height:1.7rem;border:2.5px solid var(--ink);border-radius:50%;background:#fff;cursor:pointer;display:grid;place-items:center;margin:0}
.todo input:checked{background:var(--sun);border-color:var(--sun2)}
.todo input:checked::after{content:"\2713";font-weight:800;color:var(--ink);font-size:1rem;line-height:1}
.todo label:has(input:checked){background:#FFF1BE;text-decoration:line-through;text-decoration-color:rgba(32,41,74,.35)}
.done{margin-top:1rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:#2F8F68}

/* weekend list */
.kit details{background:rgba(255,255,255,.65);border-radius:1.3rem;padding:1rem 1.2rem}
.kit summary{font-family:var(--serif);font-weight:600;font-size:1.2rem;cursor:pointer}
.kit ul{margin:1rem 0 .2rem;padding-left:1.2rem;display:grid;gap:.6rem}

/* talk */
.quick{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.4rem}
.chip{font:700 1rem var(--sans);color:var(--ink);background:var(--pink);border:0;border-radius:999px;padding:.85rem 1.4rem;cursor:pointer;box-shadow:0 3px 0 #E8789A}
.chip:active{transform:translateY(2px);box-shadow:none}
.chip:disabled{opacity:.6}
.form{background:rgba(255,255,255,.75);border-radius:1.5rem;padding:1.3rem;display:grid;gap:.5rem}
.form label{font-weight:700;font-size:.95rem}
.form textarea,.form input{font:inherit;width:100%;border:2px solid #C9D5E8;border-radius:.9rem;padding:.75rem .9rem;background:#fff;color:var(--ink)}
.form textarea:focus,.form input:focus{border-color:var(--ink);outline:none}
.form .big{justify-self:start;margin-top:.7rem}
.status{min-height:1.6rem;margin-top:.9rem;font-weight:700}
.status.ok{color:#2F8F68}.status.err{color:#C0392B}

footer{padding-top:3rem;padding-bottom:3rem;color:var(--ink2);font-size:.92rem}

@media(prefers-reduced-motion:reduce){
  .sun,.rays,.eyes,.deal.pop{animation:none}
  .orb,.slip,.big{transition:none}
}