@font-face{font-family:Pen;src:url('assets/pen.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Reader;src:url('assets/reader.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--type-display:Pen,'Comic Sans MS',cursive;--type-reading:Reader,Georgia,serif}
body{font-family:var(--type-reading);font-size:19.08px;font-optical-sizing:auto}
button,a,input,select{font-family:inherit}
h1,h2,.wordmark{font-family:var(--type-display);font-weight:400;letter-spacing:-.035em}
#world h1{font:400 clamp(78.44px,6.89vw,108.12px)/1 var(--type-display);letter-spacing:-.035em}
#world h1 em{font-style:normal}
.name{font:26.5px/1.2 var(--type-display)}.name span{font:15.9px/1.4 var(--type-reading);letter-spacing:0;margin-top:5px}
.eyebrow,.index-toggle{font:15.9px/1.3 var(--type-reading);letter-spacing:0}
.introduction>p:last-child{font:19.08px/1.45 var(--type-reading);margin-top:24px}
.pencil-note{font:28.62px/1.23 var(--type-reading);width:290px;max-width:290px}
.pencil-note button{font:14.84px/1.3 var(--type-reading)}
.play-hint{font:21.2px/1.25 var(--type-display)}.small-life{font:19.08px/1.25 var(--type-display)}
.knot{font:16.96px/1.2 var(--type-reading)}.knot small{font:14.84px/1.25 var(--type-reading)}
.toys button,.wander-link{font:15.9px/1.3 var(--type-reading)}
.chapter-copy h2{font:48.76px/1.14 var(--type-display);letter-spacing:-.025em;margin-bottom:22px}
.chapter-copy p{font:20.14px/1.5 var(--type-reading)}.chapter-copy small{font:13.78px/1.3 var(--type-reading);letter-spacing:.05em}
.sketchbook>p{font:25.44px/1.3 var(--type-display)}.sketch-foot{font-size:15.9px}
#panel-title{font:48.76px/1.15 var(--type-display);letter-spacing:-.035em}
#panel-content>p{font:20.14px/1.45 var(--type-reading)}.panel-top,.panel-links,.back-projects{font:15.9px/1.3 var(--type-reading)}
.project-list button{font:30.74px/1.2 var(--type-reading)}.project-list small{font:16.96px/1.4 var(--type-reading)}
.scene-note{font-size:14.84px!important}.more-scene{font-size:16.96px}
#demo{font:18.02px/1.4 var(--type-reading)}#demo .caption{font:21.2px/1.25 var(--type-display)}
#demo .question{font-size:18.02px}#demo .portrait p{font:18.02px/1.3 var(--type-reading)}
#demo .cue p{font-size:19.08px}#demo .cue header{font-family:var(--type-reading);font-size:15.9px}
#demo .timer{font:31.8px/1 'Courier New',monospace;font-variant-numeric:tabular-nums}
#demo .controls{font-size:15.9px}#demo .disclosure{font:13.78px/1.4 var(--type-reading)}
#demo .toy-note{font:20.14px/1.3 var(--type-reading)}
.poetato-sticker{display:flex;align-items:center;gap:13px;margin-top:24px;max-width:260px}
.poetato-sticker img{width:68px;height:72px;object-fit:contain;transform:rotate(-12deg)}
.poetato-sticker p{font:16.96px/1.25 var(--type-reading);margin:0}.poetato-sticker span{display:block;font:19.08px var(--type-display);margin-bottom:6px}.poetato-sticker a{font-size:14.84px}
@media(max-width:760px){
 .name{font-size:23.32px}.name span{font-size:14.84px}.index-toggle{font-size:14.84px;max-width:140px}
 #world h1{font-size:clamp(57.24px,15.9vw,72.08px);line-height:1.03}
 .introduction{top:14%}.eyebrow{font-size:13.78px;margin-bottom:12px}.introduction>p:last-child{font-size:16.96px;line-height:1.35;margin-top:15px}
 .pencil-note{font-size:21.2px;line-height:1.22;width:220px;max-width:62%;top:40%}.pencil-note button{font-size:13.78px;margin-top:10px}
 .play-hint{font-size:16.96px}.small-life{font-size:15.9px}.knot{font-size:14.84px}
 .toys{gap:3px 15px}.toys button,.wander-link{font-size:14.84px}
 .chapter-copy h2{font-size:41.34px}.chapter-copy p{font-size:19.08px}.sketchbook>p{font-size:23.32px}
 #panel-title{font-size:40.28px}#panel-content>p{font-size:18.02px}
 #demo .caption{font-size:19.08px}#demo .question{font-size:16.96px}#demo .cue p{font-size:18.02px}#demo .controls{font-size:14.84px}
}
@media(max-width:760px) and (max-height:700px){
 .name{font-size:21.2px}.index-toggle{font-size:13.78px;max-width:130px}
 .introduction{top:15%}#world h1{font-size:41.34px}.introduction>p:last-child{font-size:14.84px;margin-top:11px}
 .pencil-note{font-size:19.08px;top:36%;width:215px;max-width:68%}.pencil-note button{font-size:12.72px;margin-top:7px}
 .toys button,.wander-link{font-size:13.78px}.small-life{font-size:14.84px}
}

/* Project identity leads. Handwriting stays with the drawings and personal notes. */
.chapter-copy h2{font:400 clamp(44.52px,4.35vw,61.48px)/1.06 Reader,Georgia,serif;letter-spacing:-.025em;max-width:15ch;margin:0 0 24px}
.chapter-copy>p{font:23.32px/1.4 Reader,Georgia,serif;color:#41463b;max-width:30ch;margin:0 0 17px}
.chapter-copy .project-detail{font-size:19.08px;line-height:1.45;color:#64685a}
.chapter-copy small{font:14.84px/1.3 Reader,Georgia,serif;letter-spacing:.055em;margin-bottom:16px}
#panel-title{font-family:Reader,Georgia,serif;letter-spacing:-.02em}
@media(max-width:760px){.chapter-copy h2{font-size:45.58px;max-width:15ch}.chapter-copy>p{font-size:22.26px;line-height:1.4}.chapter-copy small{font-size:13.78px}}

#world .introduction{top:20svh}#world .pencil-note{top:22svh}#world .play-hint{top:46svh}
@media(max-width:760px){#world .introduction{top:14svh}#world .pencil-note{top:40svh}#world .play-hint{top:55svh}}
@media(max-width:760px) and (max-height:700px){#world .introduction{top:15svh}#world .pencil-note{top:36svh}}
/* Atul's corner: the visible voice stays lowercase, including project labels. */
body{text-transform:lowercase}