@layer reset{*,:before,:after{box-sizing:border-box}body,h1,h2,h3,p{margin:0}img,svg{max-width:100%;display:block}button,input{font:inherit}button{color:inherit}[hidden]{display:none!important}}@layer tokens{:root{color-scheme:light;--paper:#f5f2eb;--ink:#26372e;--muted:#62675d;--accent:#b33d25;--line:#d8d6ca;--surface:#e8eddf;--font-body:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-display:Georgia,"Times New Roman",serif;--ease-out:cubic-bezier(.22,1,.36,1)}}@layer base{html{scroll-padding-top:2rem}body{background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.6}a{color:inherit;text-underline-offset:.25em}button{cursor:pointer}a:focus-visible,button:focus-visible,canvas:focus-visible,[tabindex="0"]:focus-visible{outline:3px solid var(--accent);outline-offset:5px;border-radius:3px}main:focus{outline:none}::selection{color:var(--ink);background:#e3c9a8}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:10;background:var(--ink);color:var(--paper);padding:.75rem 1rem;position:absolute;top:1rem;left:1rem;transform:translateY(-200%)}.skip-link:focus{transform:translateY(0)}.only-js{display:none}.js-ready .only-js{display:flex}.js-ready canvas.only-js{display:block}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.65rem;font-weight:650}.handwritten{font:italic 1.1rem/1.25 var(--font-display)}.text-link{align-items:center;gap:1rem;font-size:.85rem;text-decoration:none;display:inline-flex}.text-link:hover{text-decoration:underline}.round-link{border:1px solid;border-radius:100px;justify-content:space-between;align-items:center;gap:2.4rem;padding:.8rem 1.3rem;font-size:.85rem;text-decoration:none;display:inline-flex}.round-link:hover{background:var(--ink);color:var(--paper)}}@layer layout{.page-shell{width:min(1160px,100% - 6rem);margin-inline:auto}.site-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding-block:1.5rem;display:flex}.wordmark{letter-spacing:-.075em;font-size:1.8rem;font-weight:750;text-decoration:none}.wordmark span{color:var(--accent)}nav{align-items:center;gap:2.5rem;font-size:.78rem;display:flex}nav a{align-items:center;gap:.6rem;min-height:44px;text-decoration:none;display:flex}nav a:hover{text-decoration:underline}.intro{padding-top:2.3rem}.intro-top{justify-content:space-between;align-items:center;display:flex}.little-label{color:var(--muted);font-size:.65rem}.intro-main{grid-template-columns:1.4fr 1fr;align-items:center;padding-block:2.5rem 3rem;display:grid}h1{font:400 clamp(5rem,10.3vw,8.5rem)/1.02 var(--font-display);letter-spacing:-.065em}h1 em{color:var(--accent);font-weight:400}.title-period{vertical-align:top;font:2rem/1 var(--font-body);color:var(--accent);margin:.6rem 0 0 .7rem;display:inline-block;transform:rotate(12deg)}.intro-copy{color:var(--muted);margin-top:1.7rem;font-size:.95rem;line-height:1.8}.sun-corner{justify-self:end;width:100%;max-width:340px;padding-top:3rem;position:relative}.little-sun{-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:50%;width:235px;margin-inline:auto;padding:0;display:block}.little-sun svg{width:100%;overflow:visible}.sun-note{color:var(--muted);position:absolute;top:-.6rem;right:-.5rem;transform:rotate(7deg)}.note-arrow{width:70px;height:70px;color:var(--muted);position:absolute;top:1.5rem;right:3rem;transform:rotate(15deg)}.sun-eyes{transform:translate(var(--eye-x,0px),var(--eye-y,0px))}.sun-speech{text-align:center;min-height:1.5rem;color:var(--accent);font-size:.8rem;position:absolute;bottom:-2rem;left:0;right:0}.intro-bottom{justify-content:space-between;align-items:center;padding-block:1rem 2.8rem;display:flex}.intro-bottom .handwritten{color:var(--accent);transform:rotate(-5deg)}.projects{border-top:1px solid var(--line);padding-top:2.5rem;scroll-margin-top:2rem}.section-heading{justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.8rem;display:flex}.section-heading h2{letter-spacing:-.04em;font-size:1.35rem;font-weight:550}.heading-dot{color:var(--accent)}.small-note{color:var(--muted);font-size:.75rem}.project-stage{background:#dfe8dc;border:1px solid #d4ddce;border-radius:12px;padding:1.5rem 2rem 1.15rem;overflow:hidden}.stage-topline{color:#3f5547;justify-content:space-between;align-items:center;gap:1rem;font-size:.73rem;display:flex}.stage-topline>span:first-child{align-items:center;gap:.5rem;display:flex}.status-dot{background:#347653;border-radius:50%;width:6px;height:6px}.stage-version{font:italic .9rem var(--font-display)}.screens-composition{padding:2.5rem 8% 2.6rem 1%;position:relative}.desktop-window{background:#fff;border:1px solid #bdc9b9;border-radius:8px;overflow:hidden;box-shadow:0 20px 40px -25px #31433366}.window-chrome{color:#6b7367;background:#f7f8f4;border-bottom:1px solid #e8ebe5;justify-content:space-between;align-items:center;padding:.6rem .8rem;font-size:.58rem;display:flex}.window-dots{gap:4px;display:flex}.window-dots i{background:#c5cabe;border-radius:50%;width:5px;height:5px;display:block}.screen-panel{position:relative}.screen-panel img{aspect-ratio:1412/764;object-fit:cover;object-position:top;width:100%;height:auto}.screen-panel+.screen-panel{border-top:1px solid var(--line)}.js-ready .screen-panel+.screen-panel{border:0}.image-zoom{background:#fffefaed;border:1px solid #d8dfd3;border-radius:100px;align-items:center;gap:.65rem;min-height:36px;padding:.45rem .8rem;font-size:.65rem;position:absolute;bottom:12px;right:12px}.phone-window{background:#273b31;border:5px solid #273b31;border-radius:24px;width:19%;position:absolute;bottom:.8rem;right:1%;overflow:hidden;transform:rotate(5deg);box-shadow:0 14px 25px -10px #26372e66}.phone-window img{border-radius:17px;width:100%;height:auto}.phone-camera{z-index:1;background:#273b31;border-radius:10px;width:30%;height:7px;position:absolute;top:5px;left:35%}.phone-note{color:#4c654e;font-size:.95rem;position:absolute;bottom:.1rem;right:20%;transform:rotate(-5deg)}.gallery-bottom{justify-content:space-between;align-items:center;gap:1rem;display:flex}.screen-tabs{border:1px solid #bfceba;border-radius:100px;flex-wrap:wrap;gap:4px;padding:3px}.screen-tabs button{background:0 0;border:0;border-radius:100px;min-height:38px;padding:.55rem .9rem;font-size:.7rem}.screen-tabs button[aria-selected=true]{color:#f8f7f0;background:#2f4938}.stage-footnote{color:#52694f;font-size:.6rem}.screen-captions{color:#52694f;min-height:1.3rem;margin-top:.9rem;font-size:.72rem}.project-editorial{grid-template-columns:1fr 1fr;gap:3rem;padding-block:2.8rem 4rem;display:grid}.project-title-block h3{font:400 clamp(2.4rem,4.5vw,3.6rem)/1.15 var(--font-display);letter-spacing:-.055em;margin:.6rem 0 1.5rem}.project-story{color:var(--muted);padding-top:1.6rem;font-size:.88rem;line-height:1.9}.project-story p+p{margin-top:.8rem}.project-tags{flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0;padding:0;list-style:none;display:flex}.project-tags li{border:1px solid var(--line);border-radius:100px;padding:.25rem .65rem;font-size:.65rem}.interlude{border-block:1px solid var(--line);grid-template-columns:1fr 1.15fr;align-items:center;gap:3rem;padding-block:4rem;display:grid}.interlude h2{font:400 clamp(2rem,3.2vw,2.8rem)/1.2 var(--font-display);letter-spacing:-.04em;margin:1rem 0}.interlude-copy>p{color:var(--muted);font-size:.85rem}.doodle-card{background:#eee8db;border:1px solid #e0d9ca;border-radius:5px;padding:1.3rem 1.5rem;transform:rotate(-2deg)}.doodle-heading{color:#6d6352;justify-content:space-between;align-items:center;display:flex}.doodle-number{color:var(--accent);font-size:1.6rem}.doodle-preview{width:100%;height:auto;color:var(--accent)}.js-ready .doodle-preview{display:none}.doodle-canvas{aspect-ratio:5/2;touch-action:none;cursor:crosshair;width:100%;height:auto}.doodle-actions{justify-content:space-between;align-items:center;gap:1rem}.doodle-actions button{background:0 0;border:0;min-height:44px;padding:.5rem 0;font-size:.7rem}.doodle-actions button:first-child{color:var(--accent)}.quiet-button{color:var(--muted)}.endnote{text-align:center;padding-block:5rem}.endnote-star{color:var(--accent);margin-bottom:1.2rem;font-size:2rem;display:block}.endnote p{font:400 clamp(2.5rem,5vw,4rem)/1.2 var(--font-display);letter-spacing:-.045em}.endnote p em{color:var(--accent)}.endnote .text-link{color:var(--muted);margin-top:1.5rem;font-size:.75rem}footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;align-items:center;gap:1rem;padding-block:1.5rem;font-size:.65rem;display:flex}.footer-name{color:var(--ink);font-weight:600;text-decoration:none}.footer-name span{margin-left:.75rem}.image-dialog{background:var(--paper);width:min(96vw,1500px);max-height:95dvh;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:1rem;overflow:auto}.image-dialog::backdrop{backdrop-filter:blur(6px);background:#13281fe0}.dialog-top{justify-content:space-between;align-items:center;gap:1rem;padding:0 .4rem 1rem;font-size:.8rem;display:flex}.close-button{border:1px solid var(--line);background:0 0;border-radius:100px;min-height:44px;padding:.5rem 1rem}.close-button span{margin-left:1rem}.dialog-image-wrap img{border-radius:5px;width:100%;height:auto}html:has(dialog[open]){overflow:hidden}.not-found{max-width:900px;margin:10vh auto;padding:2rem}.not-found h1{margin:2rem 0;font-size:clamp(3rem,7vw,6rem)}.not-found .round-link{margin-top:2rem}@media (width>=1600px){.page-shell{width:min(1240px,100% - 8rem)}}@media (width<=800px){.page-shell{width:calc(100% - 3rem)}.little-label{display:none}.sun-corner{max-width:240px}.little-sun{width:190px}.sun-note{font-size:.9rem;right:0}.note-arrow{width:50px;right:2rem}.title-period{display:none}.project-stage{padding:1.2rem}.stage-footnote{display:none}.project-editorial,.interlude{gap:2rem}}@media (width<=580px){.page-shell{width:calc(100% - 2.5rem)}.site-header{padding-block:.8rem}nav{gap:1rem;font-size:.66rem}.wordmark{font-size:1.65rem}.intro{padding-top:1.8rem}.eyebrow{font-size:.58rem}.intro-main{padding-block:2rem 1.5rem;display:block;position:relative}h1{font-size:clamp(4.4rem,17vw,6rem)}.intro-copy{margin-top:1.5rem;font-size:.8rem}.sun-corner{width:140px;height:130px;margin:1.4rem 0 0 auto;padding:0}.little-sun{width:125px}.sun-note{width:115px;font-size:1rem;top:2.1rem;right:145px;transform:rotate(-7deg)}.note-arrow{width:50px;top:4.3rem;right:110px;transform:rotate(-75deg)}.sun-speech{font-size:.65rem;bottom:-1.5rem}.intro-bottom{padding-block:2rem}.intro-bottom .text-link{gap:.6rem;font-size:.68rem}.intro-bottom .handwritten{font-size:.9rem}.projects{padding-top:1.8rem}.section-heading h2{font-size:1.15rem}.small-note{font-size:.63rem}.project-stage{border-radius:8px;margin-inline:-.4rem;padding:1rem .7rem}.stage-topline{font-size:.6rem}.stage-version{font-size:.7rem}.screens-composition{padding:1.5rem 10% 2.2rem 0}.desktop-window{border-radius:5px}.window-chrome{padding:.35rem .5rem;font-size:.4rem}.window-dots i{width:3px;height:3px}.phone-window{border-width:3px;border-radius:12px;width:22%;bottom:.8rem;right:0}.phone-window img{border-radius:8px}.phone-camera{height:4px;top:2px}.phone-note{font-size:.75rem;bottom:.4rem;right:24%}.image-zoom{min-height:32px;padding:.25rem .5rem;font-size:.55rem;bottom:5px;right:5px}.screen-tabs{flex-wrap:nowrap;gap:2px}.screen-tabs button{padding:.45rem .75rem;font-size:.6rem}.screen-captions{font-size:.63rem}.project-editorial{grid-template-columns:1fr;gap:1.5rem;padding-block:2rem 2.8rem}.project-title-block h3{margin:.5rem 0 1rem;font-size:2.6rem}.project-story{padding:0;font-size:.83rem}.round-link{padding:.65rem 1.1rem;font-size:.75rem}.interlude{grid-template-columns:1fr;gap:2rem;padding-block:2.8rem}.interlude h2{font-size:2.3rem}.doodle-card{margin:.3rem;padding:1rem}.endnote{padding-block:3.5rem}.endnote .text-link{gap:.5rem;font-size:.64rem}footer{flex-wrap:wrap;gap:.5rem 1rem;font-size:.58rem}footer>span:not(.footer-year){order:3;width:100%}}.intro-main{gap:2rem;padding-block:2rem 2.8rem}.pegboard{background:#ece8de;border:1px solid #dfdace;border-radius:120px 120px 12px 12px;justify-self:end;width:min(100%,360px);padding:.8rem .7rem .5rem;transform:rotate(3deg)}.pegboard-heading{width:65%;color:var(--muted);justify-content:space-between;align-items:center;margin:0 auto;font-size:.6rem;display:flex}.pegboard-heading>span:first-child{color:var(--accent);font-size:1.2rem}.pegboard-canvas,.pegboard-fallback{aspect-ratio:6/5;touch-action:none;width:100%;height:auto}.pegboard-canvas{cursor:grab}.pegboard-canvas:active{cursor:grabbing}.js-ready .pegboard-fallback{display:none}.pegboard-actions{justify-content:space-between;padding:0 .6rem}.pegboard-actions button{background:0 0;border:0;min-height:44px;padding:.5rem 0;font-size:.65rem}.pegboard-actions button:first-child{color:var(--accent)}.pegboard-actions button:last-child{color:var(--muted)}.endnote .sun-corner{max-width:100px;height:100px;margin:0 auto 1.8rem;padding:0}.endnote .little-sun{width:95px}.endnote .sun-speech{font-size:.7rem;bottom:-1.2rem;left:-70px;right:-70px}@media (width<=800px){.pegboard{width:280px}.intro-main{grid-template-columns:1.2fr 1fr;gap:1rem}}@media (width<=580px){.intro-main{padding-top:1rem;display:block}.pegboard{width:245px;margin:2.3rem auto .3rem}.intro-bottom{padding-block:.8rem 2rem}.intro-copy{max-width:260px}.endnote .sun-corner{width:100px;margin-inline:auto}}}@layer motion{@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}.little-sun{transition:transform .8s var(--ease-out)}.little-sun:hover{transform:rotate(9deg)}.little-sun.is-poked{animation:sun-pop .7s var(--ease-out)}.sun-eyes{transition:transform .2s ease-out}.round-link,.screen-tabs button{transition:background-color .25s,color .25s}.text-link span,.round-link span{transition:transform .4s var(--ease-out)}.text-link:hover span,.round-link:hover span{transform:translate(3px,-2px)}.reveal-arrived{animation:arrive .9s var(--ease-out) both}.screen-panel:not([hidden]) img{animation:.35s ease-out screen-in}.image-dialog[open]{animation:arrive .3s var(--ease-out)}@keyframes arrive{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes screen-in{0%{opacity:.65}to{opacity:1}}@keyframes sun-pop{0%,to{transform:rotate(0)scale(1)}35%{transform:rotate(-12deg)scale(.93,1.07)}65%{transform:rotate(7deg)scale(1.04,.96)}}}}
