:root{--ink:#080808;--paper:#fff;--muted:#777;--scale:1}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}p,h1,h2{margin:0;font-weight:400}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}#viewport{position:fixed;inset:0 0 56px;overflow:hidden;outline-offset:-4px;touch-action:pan-y}#track{display:flex;width:9699px;height:1117px;transform-origin:top left;will-change:transform}.panel{position:relative;flex:0 0 1748px;height:1117px;background:#fff;overflow:hidden}.intro,.bio{background:#000;color:#fff}.masthead{position:absolute;top:79px;left:24px;width:1680px;display:flex;justify-content:space-between;font:500 16px monospace;text-transform:uppercase;letter-spacing:.48px}.intro h1{position:absolute;top:410px;left:24px}.intro h1 img{position:absolute;display:block;max-width:none}.leslie{left:0;top:0}.williams{left:219.61px;top:314.12px}.bio{display:flex;align-items:center;justify-content:center;padding-top:63px}.bio>p{width:990.371px;font-size:48px;line-height:1.01;text-align:center;font-weight:300}.ruler{position:absolute;top:0;left:0;width:1748px;height:118px;overflow:hidden}.ruler img{position:absolute;max-width:none;transform-origin:0 0}.panel header{position:absolute;left:169px;top:192px}.panel h2{font-size:96px;line-height:1.01;letter-spacing:-4px}.panel header p{font-size:48px;line-height:1.01;margin-top:44px}.photo{display:block;object-fit:cover}.baby{position:absolute;left:742px;top:192px;width:604px;height:453px}.prose{font-size:24px;line-height:1.4}.birth-copy{position:absolute;left:744px;top:719px;width:694px}.class-photo{position:absolute;left:172px;top:412px;width:544.761px;height:386.924px}.childhood-copy{position:absolute;left:744px;top:839px;width:541.532px;line-height:1.2}.childhood-copy p+p{margin-top:29px}.school{flex-basis:2707px}.photo-strip{display:flex;gap:45px;position:absolute;left:169px;top:192px}.photo-strip img{width:528.297px;height:383.676px}.school-lead{position:absolute;left:703px;top:619.676px;width:693.151px;font-size:48px;line-height:1.2}.school-copy{position:absolute;left:1567px;top:619.676px;width:541.532px;line-height:1.2}.school-copy p+p{margin-top:85px}footer{position:fixed;bottom:0;left:0;right:0;height:56px;background:white;color:#111;border-top:1px solid #dedede;display:flex;justify-content:space-between;align-items:center;padding:0 24px;font:11px monospace;letter-spacing:.02em;z-index:5}nav{display:flex;gap:22px}button{border:0;background:none;color:inherit;min-height:44px;padding:0 4px;cursor:pointer}nav button{color:#777}nav button[aria-current=true]{color:#111;text-decoration:underline;text-underline-offset:5px}button:hover{color:#e13b31}button:focus-visible,a:focus-visible{outline:2px solid #d9392c;outline-offset:3px}#hint{min-width:140px}#hint span{margin-left:20px}.progress{position:absolute;left:0;top:-1px;width:100%;height:2px;pointer-events:none}.progress i{display:block;background:#ed3d33;width:100%;height:100%;transform:scaleX(0);transform-origin:left}.skip{position:fixed;top:-60px;left:12px;z-index:20;padding:12px;background:white;color:black}.skip:focus{top:12px}@media(max-width:600px){footer{padding:0 12px;font-size:10px}nav{gap:10px}#hint{display:none}#restart span{display:none}#restart{font-size:20px}#viewport{touch-action:pan-y}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
#track{width:max-content}.intro,.bio{flex-basis:var(--panel)}.intro h1{transform:scale(var(--name-scale));transform-origin:top left}.masthead{width:calc(var(--panel) - 68px)}.bio>p{max-width:calc(var(--panel) - 160px)}
@media(max-width:600px){.birth,.childhood{flex-basis:var(--panel)}.intro h1{top:420px}.bio>p{font-size:54px;line-height:1.1;max-width:calc(var(--panel) - 120px)}.panel header{left:60px;top:140px}.panel header p{margin-top:24px}.baby{left:60px;top:365px;width:500px;height:375px}.birth-copy{left:60px;top:790px;width:calc(var(--panel) - 120px);font-size:34px;line-height:1.25}.class-photo{left:60px;top:350px;width:520px;height:369.34px}.childhood-copy{left:60px;top:760px;width:calc(var(--panel) - 120px);font-size:34px;line-height:1.2}.childhood-copy p+p{margin-top:20px}.school-copy{width:900px;font-size:34px;line-height:1.25}.school-copy p+p{margin-top:35px}}
.timeline{position:absolute;inset:0 0 auto;height:82px;overflow:hidden;pointer-events:none;z-index:2;visibility:hidden}.timeline-ticks{position:absolute;inset:0;border-top:1px solid #e7e7e7}.timeline-ticks>i{position:absolute;left:0;top:0;width:1px;height:1px;transform-origin:top;will-change:transform}.timeline-playhead{position:absolute;left:var(--playhead);top:0;height:60px;border-left:1px solid #f05a24;color:#f05a24}.timeline-playhead>i{position:absolute;left:-5px;top:0;width:9px;height:6px;background:currentColor;clip-path:polygon(0 0,100% 0,50% 100%)}.timeline-playhead>span{position:absolute;top:63px;left:0;transform:translateX(-50%);white-space:nowrap;font:500 10px monospace;letter-spacing:.08em}.progress i{background:#f05a24}@media(max-width:600px){.timeline{height:48px}.timeline-playhead{height:31px}.timeline-playhead>span{top:35px;font-size:9px}}
.walking-character{position:absolute;left:14%;bottom:10px;width:200px;height:230px;margin:0;transform:translateX(-50%);z-index:3;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 180ms ease}.walking-character.is-visible{opacity:1;visibility:visible}.walking-character canvas{width:100%;height:100%;display:block;position:relative}.character-shadow{position:absolute;left:33%;right:24%;bottom:3%;height:7px;border-radius:50%;background:#000;opacity:.12;filter:blur(4px)}.character-toggle{position:absolute;bottom:0;left:0;font:11px monospace;min-height:28px;min-width:28px;pointer-events:auto;color:#777;border-radius:50%;background:#ffffffc9}.character-toggle:hover{color:#f05a24}.character-error{font:11px monospace;height:auto;max-width:180px}@media(max-width:600px){.walking-character{left:20%;width:130px;height:150px;bottom:4px}}@media(max-height:600px){.walking-character{width:120px;height:145px}}@media(prefers-reduced-motion:reduce){.walking-character{transition:none}}
@media(min-width:601px) and (min-height:601px){.walking-character{width:clamp(126px,26vh,226px);height:clamp(145px,30vh,260px)}}
#viewport{overflow:clip}
@media(max-width:600px){.walking-character{left:max(72px,20%)}}
.walking-character{transform:translateX(-50%) scale(1.6);transform-origin:50% 100%}
.story-photo-effects{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.story-photo-ready{opacity:0}
@media(prefers-reduced-motion:reduce){.story-photo-effects{display:none}.story-photo-ready{opacity:1}}

/* The ruler is a direct-manipulation surface; its visual proportions stay intact. */
.timeline{pointer-events:auto;cursor:grab;touch-action:none;user-select:none;outline-offset:-2px}
.timeline.is-dragging{cursor:grabbing}
.timeline:focus-visible{outline:1px solid #f05a24}
.timeline canvas.timeline-ticks{display:block;width:100%;height:100%;border:0;pointer-events:none}
.timeline-playhead{pointer-events:none}
.timeline-playhead>.timeline-label{width:132px;height:16px}
.timeline-label b{position:absolute;left:50%;top:0;transform:translate(-50%,0);font:inherit;white-space:nowrap;opacity:0}

/* The real text retains its original wrapping and accessible reading order. */
.text-motion{position:relative}
.hero-atmosphere{position:absolute;top:0;left:0;width:calc(var(--panel) * 2);height:100%;overflow:hidden;background:#000;pointer-events:none;z-index:0}
.hero-portrait{position:absolute;top:0;left:0;width:var(--panel);height:100%;display:block;pointer-events:none;will-change:transform}
.intro,.bio{background:transparent;z-index:1}
.intro h1,.intro .masthead{z-index:1}
.hero-portrait[hidden]{display:none}
.text-motion-layer{position:absolute;inset:0;pointer-events:none;user-select:none;visibility:hidden}
.text-motion-line{position:absolute;left:0;width:100%;display:block;overflow:clip}
.text-motion-copy{position:absolute;left:0;width:100%;display:block;font:inherit;letter-spacing:inherit;text-align:inherit}
@media(prefers-reduced-motion:reduce){.text-motion-source{opacity:1!important}.text-motion-layer{visibility:hidden!important}}