@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;600;700&family=Inter:wght@400;500;600;700&display=swap');
@font-face{font-family:'TWK Lausanne';src:url('assets/fonts/TWKLausanne-400.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'TWK Lausanne';src:url('assets/fonts/TWKLausanne-700.otf') format('opentype');font-weight:700;font-display:swap}
:root{--nav:117px;--home-scale:.3;--ink:#0c0a08;--solar:#e4f222;--paper:#fff;color:var(--ink);background:#fff;font-family:'TWK Lausanne',Inter,Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;overflow-x:clip}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #193b32;outline-offset:4px}.skip{position:fixed;left:16px;top:-100px;z-index:100;background:var(--solar);padding:12px}.skip:focus{top:12px}
header{position:fixed;inset:0 0 auto;z-index:20;background:#fffffffa;border-bottom:1px solid #d4d8d2}.masthead{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 34px 10px}.wordmark img{display:block;width:112px;height:auto}.collection{position:absolute;left:50%;transform:translateX(-50%);font:10px 'IBM Plex Mono',monospace;letter-spacing:1.2px}.home-link{font:10px 'IBM Plex Mono',monospace;padding:7px 10px;border:1px solid #cfd2c9}nav{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;padding:8px 20px 15px}header nav a{display:block;font:400 12px Inter,Arial,sans-serif;padding:9px 18px;border:1px solid #cfd2c9;white-space:nowrap}header nav a:hover{background:#193b32;color:#fff;border-color:#193b32}
main{padding-top:var(--nav)}.home-wrap{position:relative;width:100%;height:calc(3251px * var(--home-scale));overflow:hidden}.home-scene{position:absolute;top:0;left:0;width:3636px;height:3251px;background:#fff;transform:scale(var(--home-scale));transform-origin:top left;isolation:isolate}
.scene-grid{position:absolute;inset:0;z-index:1;pointer-events:none}.scene-grid img{position:absolute}.home-art,.blueprint,.handwriting,.diagram{position:absolute;display:block}.home-art{z-index:2}.home-art:focus-visible{outline:calc(3px / var(--home-scale)) solid #193b32;outline-offset:calc(4px / var(--home-scale))}.home-art img{position:absolute;max-width:none;pointer-events:none}
.blueprint{left:-201px;top:1333px;width:1437px;height:966px;background:#609aff;z-index:0}.blueprint img{display:block;width:1437px;height:966px;object-fit:cover;mix-blend-mode:color-dodge}
.handwriting{left:2220px;top:-556px;width:1948px;height:1100px;overflow:hidden;mix-blend-mode:multiply;opacity:.4}.handwriting img{position:absolute;left:-1px;top:-106.04px;width:1950px;height:1300px;object-fit:fill}
.binoculars{left:0;top:1608px;width:600px;height:502px;background:var(--solar)}.binoculars img{width:600px;height:502px;object-position:bottom}
.mountain{left:2436px;top:806px;width:1050px;height:1058px;overflow:hidden;transform:scaleX(-1)}.mountain img{left:0;top:-251.5px;width:1050px;height:1310px}
.typewriter{left:90px;top:756px;width:696px;height:452px;background:#609aff;overflow:hidden}.typewriter img{left:0;top:-67.67px;width:777.92px;height:519.67px}
.solar-square{position:absolute;width:50px;height:50px;background:var(--solar);z-index:3;pointer-events:none}.block-title{position:absolute;inset:0;z-index:4;margin:0;pointer-events:none}#title-blocks i{position:absolute;display:block;width:50px;height:50px;background:var(--ink)}
.train-dot{position:absolute;left:831px;top:2072px;width:222px;height:222px;border-radius:170px;background:#1a1919;z-index:5}.train{left:923px;top:1969px;width:813px;height:625px;overflow:hidden;z-index:6}.train img{left:-67.97px;top:0;width:1024px;height:625px}
.quarterback{left:2862px;top:1283px;width:697px;height:581px;z-index:6}.quarterback img{width:697px;height:581px;object-position:bottom}
.melissa{left:1875px;top:1689px;width:1172px;height:722px;overflow:hidden;z-index:6}.melissa-circle{left:136.8px;top:151.2px}.melissa-photo{left:0;top:0;width:1079.2px;height:722.4px;object-position:bottom}
.diagram{left:-421px;top:-501px;width:1244px;height:729px;opacity:.3;mix-blend-mode:multiply;z-index:7;pointer-events:none}.diagram img{display:block;width:1244px;height:729px;object-fit:cover}
.tiny-label{position:absolute;z-index:7;transform:translateX(-50%);font:300 25px/1.32 'IBM Plex Mono',monospace;letter-spacing:-.5px;white-space:nowrap;pointer-events:none}.distance{left:2210.5px;top:1065px}.html-label{left:411px;top:514px}.date-label{left:864.5px;top:111px}
.first-story{position:absolute;z-index:10;left:1536px;top:1709px;width:450px;height:150px;display:flex;align-items:center;justify-content:center;background:var(--solar);font:400 40px/1.1 'TWK Lausanne',Inter,sans-serif;transition:background .15s,color .15s}.first-story:hover{background:#193b32;color:#fff}.first-story:focus-visible{outline:calc(3px / var(--home-scale)) solid #193b32;outline-offset:calc(4px / var(--home-scale))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){header nav a{font-size:10px;padding:8px 12px}.home-link{font-size:9px}.home-wrap{min-height:calc(100svh - var(--nav))}.first-story{left:calc(1761px - 75px / var(--home-scale));width:calc(150px / var(--home-scale));height:calc(44px / var(--home-scale));font-size:calc(14px / var(--home-scale))}.tiny-label{font-size:34px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* One filled silhouette prevents fractional scaling seams in the block lettering. */
#title-blocks svg{position:absolute;inset:0;display:block;color:var(--ink);shape-rendering:crispEdges}

#title-blocks .title-square{pointer-events:all;cursor:default}

#title-blocks .title-jump{pointer-events:none;animation:title-square-hop 120ms steps(2,end) forwards}
@keyframes title-square-hop{from{transform:translate(0,0)}to{transform:translate(var(--jump-x),var(--jump-y))}}

/* Updated home collage, using the supplied exports at their native aspect ratios. */
.binoculars{background:#609aff}
.mattress-fill{left:90px;top:756px;width:696px;height:452px;overflow:hidden;background:#5e540e}
.mattress-fill img{inset:0;width:100%;height:100%;object-fit:cover}
.cupcake-hand{left:806px;top:1760px;width:700px;height:941.704px;z-index:6}
.cupcake-hand img{inset:0;width:100%;height:100%;object-fit:contain}
.ivan{left:2012px;top:1709px;width:1006px;height:706.289px;z-index:6}
.ivan img{inset:0;width:100%;height:100%;object-fit:contain}
.orange-accent{position:absolute;z-index:3;background:#e96516;pointer-events:none}
.hand-step-one{left:786px;top:2511.8px;width:150px;height:50.2px}
.hand-step-two{left:936px;top:2562px;width:150px;height:50.2px}
.football-square{left:3336px;top:1864px;width:50px;height:50px}

/* A taller mobile composition gives the block title and each story room to breathe. */
@media(max-width:700px){
 .home-wrap{min-height:0}
 .home-scene{width:390px;height:1376px}
 .scene-grid{background-image:linear-gradient(to right,#bbb8b3 1px,transparent 1px),linear-gradient(to bottom,#bbb8b3 1px,transparent 1px);background-size:27px 9px;background-position:19.5px 2px}
 .scene-grid img{display:none}
 #title-blocks svg{left:-121.98px;top:1.28px;transform:scale(.18);transform-origin:top left}
 .first-story{left:105px;top:315px;width:180px;height:46px;font-size:16px}
 .solar-square{display:none}
 .home-scene:before{content:'';position:absolute;left:167px;top:391px;width:27px;height:9px;background:var(--solar);z-index:3}
 .mattress-fill{left:20px;top:400px;width:174px;height:113.25px}
 .binoculars{left:220px;top:540px;width:150px;height:125.5px}
 .binoculars img{width:150px;height:125.5px}
 .mountain{left:0;top:720px;width:255px;height:257px}
 .mountain img{left:0;top:-61px;width:255px;height:318.14px}
 .quarterback{left:190px;top:810px;width:190px;height:158.38px}
 .quarterback img{width:190px;height:158.38px}
 .football-square{left:352px;top:977px;width:13.5px;height:13.5px}
 .blueprint{left:-30px;top:1010px;width:430px;height:289.06px}
 .blueprint img{width:430px;height:289.06px}
 .cupcake-hand{left:15px;top:1110px;width:180px;height:242.152px}
 .ivan{left:190px;top:1080px;width:190px;height:133.392px}
 .hand-step-one{left:19.5px;top:1280px;width:27px;height:9px}
 .hand-step-two{left:46.5px;top:1289px;width:27px;height:9px}
 .handwriting{left:230px;top:-30px;width:450px;height:250px}
 .handwriting img{inset:0;width:100%;height:100%;object-fit:cover}
 .diagram{left:-60px;top:-75px;width:230px;height:135px}
 .diagram img{width:230px;height:135px}
 .tiny-label{font-size:9px;letter-spacing:0}
 .date-label{left:34px;top:20px}
 .html-label{left:35px;top:302px}
 .distance{left:290px;top:702px}
}

/* Keep the mobile title near the upper center, with story imagery bleeding in above. */
@media(max-width:700px){
 #title-blocks svg{top:calc(1.28px + var(--mobile-title-drop,72px))}
 .first-story{top:calc(315px + var(--mobile-title-drop,72px))}
 .html-label{top:calc(302px + var(--mobile-title-drop,72px))}
 .mattress-fill{left:-35px;top:-35px}
 .binoculars{left:270px;top:-40px}
 .ivan{top:540px}
 .home-scene:before{left:112px;top:78px}
}

/* Mobile annotation adjustments use whole 27×9px grid cells. */
@media(max-width:700px){
 .first-story{left:100.5px;top:calc(317px + var(--mobile-title-drop,72px));width:189px;height:45px;clip-path:inset(calc(1px / var(--home-scale)))}
 .html-label{left:19.5px;top:calc(299px + var(--mobile-title-drop,72px));width:54px;height:18px;transform:none;display:flex;align-items:center;justify-content:center;background:#fff;line-height:1;padding:0;clip-path:inset(calc(1px / var(--home-scale)))}
 .mattress-fill{left:270px;top:-40px}
 .binoculars{left:0;top:470px}
 .home-scene:before{left:262.5px;top:74px}
 .mountain{top:612px}
 .quarterback{top:747px}
 .football-square{top:914px}
 .blueprint{top:947px}
 .cupcake-hand{top:1047px}
 .hand-step-one{top:1217px}
 .hand-step-two{top:1226px}
 .home-scene{height:1313px}
}

@media(max-width:700px){
 .distance,.date-label{width:54px;height:18px;transform:none;display:flex;align-items:center;justify-content:center;background:#fff;line-height:1;padding:0;clip-path:inset(calc(1px / var(--home-scale)))}
 .distance{left:262.5px;top:704px}
 .date-label{left:19.5px;top:20px}
 .blueprint{top:920px}
 .cupcake-hand{top:1020px}
 .hand-step-one{top:1190px}
 .hand-step-two{top:1199px}
 .football-square{left:352.5px;top:911px;width:18px;height:18px}
 .home-scene{height:1286px}
}