/* Homepage artwork and layout. Shared typography, buttons and cards are
   in chrome.css so the public site and Playroom use the same styles. */

/* Hero */


/* The illustration is two SVGs stacked: hero.svg is the full drawing,
   hero-top.svg is just the mascot's outline drawn again on top, so the
   animated sheen (clipped to the green part of the progress bar) shows
   through the bar but not through the mascot lying on it. Every position
   inside is a percentage of the 1277×1232 artwork. */
.hero-art-lines{position:absolute;inset:0;pointer-events:none}
.progress-window{position:absolute;left:9.30%;top:54.46%;width:62.95%;height:7.10%;overflow:hidden;border-radius:2.2% 0 0 2.2%;pointer-events:none}
.progress-sheen{position:absolute;top:0;bottom:0;left:0;width:36%;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.14) 30%,rgba(255,255,255,0.55) 50%,rgba(255,255,255,0.14) 70%,rgba(255,255,255,0) 100%);animation:sheen 3.4s linear infinite}
.progress-gloss{position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(180deg,rgba(255,255,255,0.14),rgba(255,255,255,0))}
.progress-shade{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(0deg,rgba(45,70,25,0.10),rgba(45,70,25,0))}
@keyframes sheen{
  0%  {transform:translateX(-110%)}
  36% {transform:translateX(290%)}
  100%{transform:translateX(290%)}
}
@media (prefers-reduced-motion: reduce){
  .progress-sheen{animation:none;opacity:0}
}

/* Handwritten notes over the artwork */
.note-almost{left:69.2%;top:18.4%;font-size:clamp(17px,2.3vw,33px);transform:rotate(-12deg)}
.note-almost-arrow{left:69.6%;top:28.3%;width:5.9%;stroke-width:4.4}
.note-progress{left:53.5%;top:69.8%;font-size:clamp(16px,2.2vw,31px);line-height:1.15;text-align:center;transform:rotate(-8deg)}
.note-progress-heart{left:79.0%;top:81.0%;width:5.2%;stroke-width:3}
.note-mission{left:55%;top:2%;font-size:clamp(14px,1.75vw,23px);line-height:1.3;transform:rotate(-12deg)}

/* About */
.about{background:#FBF9F0;padding:70px 0 80px}
.about-inner{display:flex;flex-wrap:wrap;gap:32px 56px;align-items:center}
.about-art{flex:1 1 360px;min-width:0;max-width:470px;position:relative}
.about-art img{width:100%;height:auto}
.about-copy{flex:1 1 340px;min-width:0;max-width:520px}
.about-title{font-weight:800;font-size:clamp(30px,3.4vw,44px);line-height:1.08}
.about-text{margin:20px 0 0;font-size:17px;line-height:1.7;color:#4A4C40;text-wrap:pretty}


.site-page{min-height:100vh;min-height:100dvh}
.not-found-page .hero{width:100%;max-width:1300px;box-sizing:border-box;min-height:calc(100dvh - 85px);padding:20px clamp(16px,3vw,40px) 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.not-found-page .hero-art{flex:none;width:min(100%,860px,calc(100dvh - 225px));position:relative;aspect-ratio:1277/1232}
.not-found-page .hero-cta{display:flex;justify-content:center;margin-top:6px}
.not-found-page .bar-unfilled{position:absolute;left:43.38%;top:54.46%;width:28.87%;height:7.10%;background:#fff;pointer-events:none}
.not-found-page .progress-window{width:34.08%}
.note-today{left:69.2%;top:18.4%;font-size:clamp(17px,2.3vw,33px);transform:rotate(-12deg)}
.note-today-arrow{left:69.6%;top:28.3%;width:5.9%;stroke-width:4.4}
.note-percent{left:34.5%;top:69%;font-size:clamp(16px,2.2vw,31px);transform:rotate(-6deg)}
.note-percent-arrow{left:41.8%;top:63.6%;width:1.9%;stroke-width:4}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:719px){.not-found-page .hero{min-height:calc(100dvh - 62px);padding-top:22px;padding-bottom:24px;gap:14px}.not-found-page .hero-art{width:min(100%,calc(100dvh - 185px))}}