/* A live paper theatre. Text, controls and character remain separate layers. */
@font-face{font-family:Anton;src:url('assets/fonts/Anton-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.site-header{max-width:none;min-height:64px;height:64px;padding:0 4.5%;border:0;flex-wrap:nowrap;gap:20px}.site-header .wordmark{font-size:11px;letter-spacing:.17em;padding-right:30px}.site-header .wordmark-dot{font-size:30px;top:0}.site-header nav{font-size:14px;gap:30px}.site-header nav a{padding:12px 0}
#room{--char-size:clamp(450px,68svh,660px);scroll-margin-top:0}
#room .playroom{height:clamp(620px,calc(100svh - 64px),920px);border-radius:0;background:#a8d5d9 url('assets/hero/stage.webp') center/100% 100% no-repeat;isolation:isolate}
#room .playroom:after{display:none}
.stage-kicker{position:absolute;top:28px;left:0;width:100%;text-align:center;font-size:12px;letter-spacing:.24em;font-weight:600;margin:0;z-index:1}
#room h1{position:absolute;top:52px;left:50%;transform:translateX(-50%);font-family:Anton,'Arial Narrow',sans-serif;font-size:clamp(150px,22.7vw,390px);font-weight:400;line-height:1.08;letter-spacing:-.035em;white-space:nowrap;z-index:1}
#room .character{width:var(--char-size);height:var(--char-size);left:calc(50% - var(--char-size)/2);bottom:calc(18% - var(--char-size)*.078125);z-index:3}
#room .character>img{animation:none}
#room .character.reacting>img{animation:pop .42s ease-out}
#room .walker{left:calc(50% - 96px);bottom:calc(var(--char-size)*.078125 - var(--sprite-scale)*5px);transform:scale(var(--sprite-scale));transform-origin:center bottom}
#room .cloud{left:19%;top:9%;width:65%;height:40%}#room .pocket{left:52%;top:55%;width:22%;height:24%}#room .shoes{left:31%;top:79%;width:38%;height:14%}
.stage-intro{position:absolute;left:8%;bottom:29%;z-index:2}.stage-intro p{font-family:Georgia,serif;font-style:italic;font-size:clamp(24px,3vw,43px);line-height:1.1;letter-spacing:-.04em;margin:0 0 25px}.stage-intro>span{font-size:12px;letter-spacing:.13em}
#room .speech{top:auto;left:72%;bottom:48%;transform:rotate(-5deg);background:none;box-shadow:none;padding:0;min-width:0;max-width:220px;width:20%;text-align:left;font-size:21px;line-height:1.4;z-index:2}
#room .mood-note{position:absolute;right:7%;bottom:24%;width:205px;padding:20px 22px;margin:0;display:block;background:#f2d27f;transform:rotate(-6deg);z-index:2;box-shadow:3px 6px 0 #244c4720}
#room .mood-note .eyebrow{font-size:11px;letter-spacing:.12em;margin:0 0 15px}#room .mood-note p:nth-child(2){font-style:italic;font-size:26px;line-height:1.1;text-align:left;margin:0 0 20px}.ticket-number{display:block;border-top:1px dashed #123f4955;padding-top:10px;font-size:10px;letter-spacing:.11em}
.hero-dock{position:absolute;z-index:5;bottom:43px;left:50%;transform:translateX(-50%) rotate(-1deg);display:flex;align-items:center;background:#faf7ed;border:1px solid #123f4925;border-radius:5px;box-shadow:2px 4px 0 #123f4912;padding:8px 15px;gap:0;white-space:nowrap}.hero-dock button{background:none;border:0;border-left:1px solid #123f4925;padding:8px 24px;font-family:Georgia,serif;font-style:italic;font-size:23px;min-height:44px}.hero-dock button:hover,.hero-dock button[aria-pressed=true]{color:#a74027;background:#e7755210}.dock-star{font-size:32px;color:#d45a3c;padding-right:15px;line-height:1}
.stage-next{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.02em;white-space:nowrap;z-index:5}.stage-next span{padding-left:12px}.stage-next:hover{text-decoration:underline;text-underline-offset:4px}
#room #treasures{position:absolute;left:8%;bottom:19%;display:flex;align-items:center;gap:4px;z-index:4;min-height:44px}#room .treasure{position:relative;left:auto;bottom:auto;font-size:29px;padding:7px;min-width:44px;min-height:44px}#room .tidy{left:8%;right:auto;bottom:13%;background:#f7f3e9cc;font-size:12px;padding:8px 14px;min-height:36px;border-color:#123f4933}
@media(min-width:1700px){#room h1{font-size:22.7vw}.stage-intro{left:10%}#room .mood-note{right:10%}}
@media(max-width:1050px) and (min-width:701px){#room{--char-size:clamp(440px,58svh,560px)}.stage-intro{left:5%;bottom:30%}.stage-intro p{font-size:28px}#room .mood-note{right:4%;width:170px;padding:17px}#room .mood-note p:nth-child(2){font-size:23px}#room .speech{left:77%;font-size:17px;width:19%}}
@media(max-width:700px){.site-header{height:72px;min-height:72px;padding:0 5%;gap:12px}.site-header .wordmark{font-size:9px;letter-spacing:.08em;padding-right:0}.site-header .wordmark-dot{display:none}.site-header nav{gap:14px;font-size:12px;flex-wrap:nowrap}.site-header nav a{padding:12px 0}#room{--char-size:min(108vw,440px)}#room .playroom{height:clamp(620px,calc(100svh - 72px),760px)}.stage-kicker{top:25px;font-size:10px;letter-spacing:.17em}#room h1{top:57px;font-size:22.7vw}.stage-intro{left:0;top:calc(70px + 24vw);bottom:auto;width:100%;text-align:center}.stage-intro p{font-size:20px;margin:0}.stage-intro p br{display:none}.stage-intro p br:after{content:' '}.stage-intro>span{display:block;font-size:10px;margin-top:12px;letter-spacing:.13em}#room .character{bottom:calc(24% - var(--char-size)*.078125)}#room .speech{left:15%;bottom:auto;top:calc(140px + 24vw);width:70%;max-width:none;transform:none;text-align:center;font-size:15px;line-height:1.3;z-index:4;pointer-events:none}#room .mood-note{right:6%;bottom:14%;width:160px;padding:12px 14px;transform:rotate(-4deg)}#room .mood-note .eyebrow{font-size:9px;margin:0 0 5px}#room .mood-note p:nth-child(2){font-size:18px;margin:0}.ticket-number{display:none}.hero-dock{bottom:40px;padding:5px 8px;max-width:94%}.hero-dock button{font-size:20px;padding:7px 16px}.dock-star{font-size:27px;padding:0 10px 0 4px}.stage-next{bottom:15px;font-size:11px}#room #treasures{left:4%;bottom:16%;gap:0}#room .treasure{font-size:23px;padding:3px;min-width:32px;min-height:44px}#room .tidy{left:5%;bottom:11%;font-size:10px;min-height:28px;padding:5px 10px}}
@media(prefers-reduced-motion:reduce){#room .character.reacting>img{animation:none}}
/* Reserve a text lane above the cloud, including on shorter phones. */
@media(max-width:700px){#room{--stage-height:clamp(620px,calc(100svh - 72px),760px);--char-size:min(108vw,440px,calc((var(--stage-height)*.76 - 185px - 24vw)*1.19))}#room .playroom{height:var(--stage-height)}#room .mood-note{bottom:17%}#room .speech{top:calc(130px + 24vw)}#room .stage-intro p{word-spacing:.02em}}
@media(max-width:380px){.hero-dock button{font-size:19px;padding:7px 12px}.hero-dock{padding:5px 6px}.dock-star{padding-right:8px}}
@media(max-width:700px){#room .mood-note{bottom:15.5%;padding:9px 12px}#room .mood-note p:nth-child(2){font-size:17px}.hero-dock{bottom:29px}.stage-next{bottom:8px}}

/* Pocket surprises fall from above the stage and settle on its paper floor. */
#room #treasures{inset:0;display:block;min-height:0;pointer-events:none;z-index:4}
#room .treasure{position:absolute;bottom:auto;width:180px;height:180px;min-width:0;min-height:0;padding:12px;font-size:144px;line-height:1;pointer-events:auto;animation:none;transform:rotate(var(--tilt));transform-origin:50% 85%;filter:drop-shadow(3px 7px 3px #123f4930)}
#room .treasure.falling{animation:stage-fall 1.35s both;will-change:transform}
#room .treasure:hover{scale:1.1}#room .tidy{z-index:6}
@keyframes stage-fall{
  0%{transform:translate(var(--fall-drift),var(--fall-y)) rotate(-40deg);animation-timing-function:cubic-bezier(.42,0,.85,.55)}
  65%{transform:translate(0,0) rotate(var(--tilt)) scale(1.12,.86);animation-timing-function:cubic-bezier(.15,.65,.35,1)}
  79%{transform:translate(0,-40px) rotate(10deg) scale(.98,1.02);animation-timing-function:ease-in}
  91%{transform:translate(0,0) rotate(var(--tilt)) scale(1.05,.95);animation-timing-function:ease-out}
  96%{transform:translate(0,-8px) rotate(var(--tilt))}
  100%{transform:translate(0,0) rotate(var(--tilt))}
}
@media(max-width:700px){#room .treasure{width:110px;height:110px;padding:7px;font-size:88px}#room .tidy{bottom:11.5%;font-size:12px;min-height:32px}}
@media(prefers-reduced-motion:reduce){#room .treasure.falling{animation:none}}