:root{--paper:#f5f5f1;--ink:#1a1a1a;--muted:#6d6d67;--line:#d8d8d1}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}a:focus-visible,button:focus-visible{outline:2px solid #e55231;outline-offset:6px}header{height:100px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;gap:25px;background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:10}.brand{font-weight:700;letter-spacing:-.7px;font-size:19px}.brand span{font-weight:400;display:block;font-size:9px;letter-spacing:1.7px;margin-top:6px}nav{display:flex;gap:30px;font-size:14px}nav a{padding:8px 0;border-bottom:1px solid transparent}nav a:hover,nav a[aria-current]{border-color:var(--ink)}.contact,.button{background:var(--ink);color:white;padding:14px 20px;font-size:14px;display:inline-flex;gap:30px}.eyebrow{font-size:11px;letter-spacing:1.5px;line-height:1.6;font-weight:400;text-transform:uppercase;margin:0 0 24px;color:var(--muted)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(40px,4.7vw,75px);line-height:1.04;letter-spacing:-3.5px;font-weight:400;margin-bottom:30px}h2{font-size:clamp(32px,3.2vw,51px);line-height:1.12;letter-spacing:-2px;font-weight:400}h3{font-weight:400}p{line-height:1.65}.journey{height:470vh}.stage{position:sticky;top:0;height:100svh;min-height:700px;padding:35px 4% 0;display:flex;flex-direction:column}.hero-top{position:relative;padding-bottom:24px;flex-shrink:0}.hero-top .eyebrow{margin-bottom:18px}.hero-top h1{font-size:clamp(34px,3.8vw,61px);letter-spacing:-2.7px;line-height:1.04;margin-bottom:0;max-width:76%}.hero-intro{position:absolute;right:0;bottom:26px;color:var(--muted);font-size:13px;line-height:1.6;margin:0}.sequence-wrap{position:relative;flex:1;min-height:0;overflow:hidden;background:#d4d3ca}.sequence-wrap canvas{width:100%;height:100%;object-fit:cover;display:block}.sequence-wrap::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#0009,transparent 65%)}.scene-caption{position:absolute;bottom:40px;left:40px;color:white;z-index:1}.scene-caption>span{font-size:11px;letter-spacing:1.5px}.scene-caption h2{font-size:clamp(30px,3vw,48px);margin:14px 0 16px;letter-spacing:-1.5px}.scene-caption a{font-size:14px;border-bottom:1px solid #fff7;padding-bottom:5px}.sequence-hint{position:absolute;right:25px;top:25px;font-size:10px;letter-spacing:1px;color:#fff;text-shadow:0 1px 4px #000;z-index:1}.sequence-progress{position:absolute;bottom:0;height:3px;width:100%;background:#ffffff40;z-index:2}.sequence-progress i{display:block;height:100%;background:#f3643d;width:0}.sequence-controls{display:flex;justify-content:space-between;align-items:center;min-height:61px;font-size:12px;gap:20px}.sequence-controls>div{display:flex;gap:25px}.sequence-controls button{border:0;background:none;padding:9px 0;color:var(--muted);font-size:12px}.sequence-controls button[aria-pressed=true]{color:var(--ink);box-shadow:0 1px var(--ink)}.section{padding:100px 7%}.manifesto{padding-top:130px;padding-bottom:110px;border-bottom:1px solid var(--line)}.manifesto h2{font-size:clamp(36px,4.3vw,68px);max-width:1000px}.manifesto>p:not(.eyebrow){max-width:490px;font-size:18px;color:var(--muted);margin-left:42%}.text-link{display:inline-block;font-size:14px;border-bottom:1px solid;padding:0 0 7px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:35px}.section-title h2{margin:0}.section-title>a{font-size:13px;white-space:nowrap}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.project-image{height:380px;position:relative;overflow:hidden;background:#ddd}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.project-card:hover img{transform:scale(1.035)}.image-arrow{position:absolute;right:16px;bottom:16px;background:var(--paper);width:40px;height:40px;display:grid;place-items:center}.card-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 6px}.card-label h3{font-size:20px;letter-spacing:-.5px;margin:0}.card-label>span{font-size:11px;color:var(--muted)}.project-card>p{font-size:14px;color:var(--muted)}.type-art{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;background:#dfe3cf;color:#252b19;overflow:hidden}.type-art>span{font-size:clamp(45px,6vw,95px);font-weight:600;letter-spacing:-5px}.type-art small{position:absolute;bottom:28px;font-size:10px;letter-spacing:2px}.ascii{background:#292b26;color:#c9d6a9;font-family:monospace}.haiper{background:#e3e2fa;color:#403658}.salo{background:#edb5a0;color:#62301d}.color{background:#d9e383;color:#42481e}.dark{background:#1b1b1a;color:#f0f0ea}.work-row{border-top:1px solid #ffffff30;padding:40px 0;display:grid;grid-template-columns:1fr 1fr 20px;align-items:center;gap:20px}.work-row h3{font-size:38px;letter-spacing:-1.3px;margin:0}.work-row>span{font-size:15px;color:#bcbcb2}.work-row:hover h3{color:#f1b895}.article-row{display:grid;grid-template-columns:60px 1fr 25px;gap:20px;border-top:1px solid var(--line);padding:32px 0;align-items:center}.article-row:last-child{border-bottom:1px solid var(--line)}.article-row h3{font-size:28px;letter-spacing:-.8px;margin:10px 0 0}.article-row .eyebrow{font-size:10px}.index{font-size:12px;color:var(--muted)}.article-row:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}.ending{background:#e7e8e1}.ending>a{display:block;font-size:clamp(46px,6.8vw,110px);line-height:1.02;letter-spacing:-4px}footer{padding:40px 4%;display:flex;justify-content:space-between;gap:25px;align-items:center;border-top:1px solid var(--line)}footer p,footer>a:not(.brand),footer>span{font-size:12px;color:var(--muted);margin:0}.route-page{min-height:75vh;padding-top:70px}.page-heading{padding:35px 0 55px;max-width:1000px}.page-heading h1{max-width:950px}.lead{font-size:21px;line-height:1.5;color:var(--muted);max-width:680px}.back{font-size:13px;display:inline-block;margin-bottom:15px}.detail-visual{height:530px;background:#e4e4de;overflow:hidden}.detail-visual img{width:100%;height:100%;object-fit:contain}.detail-visual .type-art>span{font-size:140px}.project-body{display:grid;grid-template-columns:1fr 2fr;gap:80px;padding:70px 0}.project-body aside{font-size:14px;color:var(--muted)}.project-body aside a{display:inline-block;border-bottom:1px solid;margin-top:25px}.project-body h2,.prose h2{font-size:30px;letter-spacing:-1px;margin-bottom:20px}.project-body section,.prose section{margin-bottom:45px}.project-body section p,.prose p{font-size:19px;color:#55554e;line-height:1.8}.draft-note{border-left:2px solid #bbbcaf;padding:10px 0 10px 18px;font-size:13px;color:var(--muted);line-height:1.65}.next-project{border-top:1px solid var(--line);padding-top:30px;display:block;font-size:26px;letter-spacing:-.6px}.reading{max-width:1050px;margin:auto}.reading .page-heading{padding-bottom:20px}.prose{margin:55px 0}.about-columns{display:grid;grid-template-columns:1.2fr 1fr;gap:100px}.about-columns p{font-size:20px;color:#5b5b53}.about-columns .experience{font-size:16px;padding:18px 0;border-bottom:1px solid var(--line);margin:0}.about-columns .eyebrow{font-size:11px}.about-columns .button{margin-top:20px}.skip{position:fixed;top:-100px;left:10px;background:white;padding:15px;z-index:100}.skip:focus{top:10px}main:focus{outline:none}@media(max-width:800px){header{height:95px;flex-wrap:wrap;padding:15px 5%;gap:12px}.brand{font-size:16px}.brand span{font-size:8px}nav{gap:20px;font-size:12px;order:3;width:100%;justify-content:space-between}.contact{font-size:12px;padding:10px 14px}.stage{padding:25px 5% 0;min-height:650px}.hero-top h1{max-width:100%;font-size:36px;letter-spacing:-1.7px}.hero-top .eyebrow{font-size:9px;margin-bottom:15px}.hero-intro{position:static;font-size:12px;margin-top:15px}.hero-intro br{display:none}.sequence-wrap canvas{object-fit:cover;object-position:57% center}.sequence-controls{gap:10px;min-height:65px}.sequence-controls>div{gap:12px}.sequence-controls button,.sequence-controls>a{font-size:10px}.scene-caption{bottom:30px;left:20px;right:15px}.scene-caption h2{font-size:30px}.sequence-hint{font-size:8px;right:15px;top:15px}.section{padding:65px 6%}.section h2{letter-spacing:-1.4px}.manifesto>p:not(.eyebrow){margin-left:0;font-size:17px}.grid{grid-template-columns:1fr;gap:35px}.project-image{height:440px}.section-title{align-items:flex-end}.section-title h2{font-size:30px}.section-title>a{font-size:12px}.work-row{grid-template-columns:1fr 20px;gap:12px;padding:30px 0}.work-row h3{font-size:32px}.work-row>span:first-of-type{grid-column:1;grid-row:2;font-size:14px}.work-row>span:last-child{grid-column:2;grid-row:1}.article-row{grid-template-columns:25px 1fr 15px;gap:10px}.article-row h3{font-size:24px}.ending>a{letter-spacing:-2px}.page-heading{padding-bottom:30px}.page-heading h1{font-size:45px;letter-spacing:-2px}.lead{font-size:18px}.project-body,.about-columns{grid-template-columns:1fr;gap:40px}.project-body{padding-top:40px}.detail-visual{height:420px}.detail-visual .type-art>span{font-size:70px}.type-art>span{font-size:80px}.about-columns p{font-size:18px}footer{flex-wrap:wrap;gap:22px;padding:30px 6%}footer p{width:100%;order:4}.reading .page-heading h1{font-size:42px}.prose p,.project-body section p{font-size:17px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.journey{height:240vh}}

.footer-links{display:flex;flex-wrap:wrap;gap:16px}.footer-links a{font-size:12px;color:var(--muted)}.footer-links a:hover,.social-item a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 70px}.social-item{border-top:1px solid var(--line);padding:25px 0}.social-item>a{font-size:27px;letter-spacing:-.6px}.social-item p{font-size:14px;color:var(--muted);margin:10px 0 0}.about-socials{margin-top:40px}.about-socials .social-item>a{font-size:19px}.about-socials .social-item p{font-size:13px}.project-body aside .project-external{display:block;width:fit-content;color:var(--ink);margin-bottom:22px}.writing-elsewhere{margin-top:65px}.writing-elsewhere h2{font-size:30px}.writing-elsewhere .text-link{margin-right:25px}.writing-elsewhere>p{color:var(--muted)}@media(max-width:800px){.contact-grid{grid-template-columns:1fr}.footer-links{width:100%}.social-item>a{font-size:24px}}

/* Full-viewport cinematic home. Other routes retain the editorial layout. */
.home-view header{position:absolute;inset:0 0 auto;color:#fff;background:transparent;border-color:#ffffff30;z-index:10}
.home-view header .contact{background:#f5f5f1;color:#1a1a1a}
.home-view nav a:hover{border-color:#fff}
.home-view .stage{height:100dvh;min-height:0;padding:0;display:block;background:#151714}
.home-view .sequence-wrap{position:absolute;inset:0;width:100%;height:100%;min-height:0}
.home-view .sequence-wrap canvas{width:100%;height:100%;object-fit:cover}
.home-view .sequence-wrap::after{background:linear-gradient(180deg,#0009 0%,#0007 34%,transparent 58%,#000b 100%)}
.home-view .hero-top{position:absolute;z-index:2;top:clamp(125px,17vh,190px);left:5%;right:5%;padding:0;color:#fff;pointer-events:none}
.home-view .hero-top .eyebrow{color:#ffffffb8}
.home-view .hero-top h1{max-width:100%;font-size:clamp(35px,4.7vw,76px);line-height:1.05;letter-spacing:-2.5px}
.home-view .hero-intro{position:static;color:#ffffffe0;margin:22px 0 0;font-size:15px}
.home-view .hero-intro br{display:none}
.home-view .scene-caption{left:5%;right:5%;bottom:100px}
.home-view .scene-caption h2{font-size:clamp(28px,3vw,48px)}
.home-view .sequence-hint{top:auto;bottom:112px;right:5%;font-size:10px}
.home-view .sequence-controls{position:absolute;bottom:0;left:5%;right:5%;z-index:3;min-height:70px;color:#fff;border-top:1px solid #ffffff40}
.home-view .sequence-controls button{color:#ffffffb8}
.home-view .sequence-controls button[aria-pressed=true]{color:#fff;box-shadow:0 1px #fff}
@media(max-width:800px){.home-view .hero-top{top:140px}.home-view .hero-top h1{font-size:clamp(30px,6.7vw,48px);letter-spacing:-1.2px}.home-view .hero-top .eyebrow{font-size:9px;max-width:300px}.home-view .hero-intro{font-size:12px;max-width:310px;margin-top:17px}.home-view .scene-caption{bottom:95px}.home-view .scene-caption h2{font-size:28px;margin-top:12px}.home-view .sequence-hint{display:none}.home-view .sequence-controls{min-height:65px}}
@media(max-height:600px){.home-view .hero-top{top:108px}.home-view .hero-top h1{font-size:clamp(25px,4vw,43px)}.home-view .hero-top .eyebrow,.home-view .hero-intro{display:none}.home-view .scene-caption{bottom:70px}.home-view .scene-caption h2{font-size:24px;margin:8px 0}.home-view .sequence-controls{min-height:50px}.home-view .sequence-hint{display:none}}

/* Motion has one calm rhythm across navigation, content and interaction. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--motion-ease) var(--reveal-delay,0ms),transform .9s var(--motion-ease) var(--reveal-delay,0ms)}
.reveal.is-visible,.reveal:focus-within{opacity:1;transform:none}
.project-image{transition:transform .55s var(--motion-ease),box-shadow .55s var(--motion-ease)}
.project-card:hover .project-image{box-shadow:0 20px 40px -25px #0005}
.project-image img{transition:transform 1.1s var(--motion-ease)}
.project-card:hover img{transform:scale(1.055)}
.image-arrow{transition:transform .5s var(--motion-ease),background .3s,color .3s}
.project-card:hover .image-arrow{transform:rotate(-8deg);background:var(--ink);color:var(--paper)}
nav a{position:relative;border-color:transparent!important}
nav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--motion-ease)}
nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.contact,.button{transition:transform .4s var(--motion-ease),background .3s,color .3s}
.contact:hover,.button:hover{transform:translateY(-3px);background:#343731}
.home-view header .contact:hover{background:#e5e9dc;color:#111}
.contact span{transition:transform .4s var(--motion-ease)}
.contact:hover span{transform:translate(3px,-3px)}
.work-row,.article-row,.social-item{transition:padding .5s var(--motion-ease),opacity .8s var(--motion-ease),transform .8s var(--motion-ease),background .4s}
.work-row:hover,.article-row:hover{padding-left:14px;padding-right:14px}
.work-row>span:last-child,.article-row>span:last-child{transition:transform .4s var(--motion-ease)}
.work-row:hover>span:last-child,.article-row:hover>span:last-child{transform:translate(3px,-3px)}
.scene-caption a,.text-link,.next-project{transition:opacity .3s}
.scene-caption a:hover,.text-link:hover,.next-project:hover{opacity:.65}
.sequence-progress i{transition:width .12s linear}
.sequence-controls button{transition:color .3s,transform .35s var(--motion-ease)}
.sequence-controls button:hover{transform:translateY(-3px)}
.ending>a{transition:letter-spacing .7s var(--motion-ease)}
.ending>a:hover{letter-spacing:-2px}
::view-transition-old(root){animation:page-out .3s ease both}
::view-transition-new(root){animation:page-in .55s var(--motion-ease) both}
@keyframes page-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes page-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.project-card:hover .project-image,.project-card:hover img,.project-card:hover .image-arrow,.contact:hover,.button:hover,.sequence-controls button:hover{transform:none}.work-row:hover,.article-row:hover{padding-left:0;padding-right:0}.ending>a:hover{letter-spacing:inherit}::view-transition-old(root),::view-transition-new(root){animation:none!important}}

/* The entire home route is one continuous, full-screen world. */
.home-view>footer{display:none}.home-view header{position:fixed;background:linear-gradient(#0005,transparent)}
.home-view .world-journey{height:1050vh}.world-journey .hero-top{transition:opacity .55s,transform .75s var(--motion-ease)}
.world-journey .hero-top.departed{opacity:0;transform:translateY(-30px)}
.home-view .world-journey .scene-caption{bottom:18%;max-width:780px;right:12%}
.home-view .world-journey .scene-caption h2{font-size:clamp(38px,5.7vw,88px);letter-spacing:-3px;line-height:1.02;margin:22px 0}
#scene-description{max-width:480px;font-size:17px;line-height:1.6;color:#ffffffe0;margin-bottom:28px}
.world-journey [data-chapter="0"] .scene-caption h2,.world-journey [data-chapter="0"] #scene-description{display:none}
.world-journey [data-chapter="0"] .scene-caption{bottom:19%}
.world-counter{position:absolute;right:5%;top:50%;z-index:2;font-size:12px;letter-spacing:2px;color:#ffffffb3}.world-counter>span{color:white;font-size:35px;letter-spacing:-1px}
.home-view .world-journey .sequence-controls{gap:25px}.world-stops{flex:1;justify-content:space-between;gap:10px!important}
.world-stops button{display:flex;gap:10px;align-items:center;position:relative;padding:18px 0!important;box-shadow:none!important}
.world-stops button::before{content:'';position:absolute;left:0;right:0;bottom:5px;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .4s}
.world-stops button[aria-pressed=true]::before{transform:scaleX(1)}.stop-number{font-size:10px;opacity:.55}.stop-name{font-size:12px}
.world-prev,.world-next{background:none;border:0;color:white;font-size:20px!important;padding:12px!important}.world-prev:disabled,.world-next:disabled{opacity:.25;cursor:default}
.restart-world{position:absolute;right:5%;bottom:115px;z-index:4;background:none;color:white;border:0;border-bottom:1px solid #fff8;padding:10px 0;cursor:pointer}.restart-world[hidden]{display:none}
.world-journey .sequence-hint{bottom:90px;right:5%}
@media(max-width:800px){.home-view .world-journey .scene-caption{bottom:22%;max-width:90%;right:5%}.home-view .world-journey .scene-caption h2{font-size:clamp(34px,8vw,58px);letter-spacing:-1.5px}#scene-description{font-size:15px;max-width:95%}.world-counter{top:115px;right:5%;font-size:10px}.world-counter>span{font-size:23px}.home-view .world-journey .sequence-controls{gap:8px}.stop-name{display:none}.stop-number{font-size:12px}.world-stops{gap:8px!important}.restart-world{bottom:90px;left:5%;right:auto}.world-journey .hero-top{top:180px}.world-journey [data-chapter="0"] .scene-caption{bottom:22%}}
@media(max-height:600px){.home-view .world-journey .scene-caption{bottom:65px;left:5%;max-width:80%}.home-view .world-journey .scene-caption h2{font-size:30px;margin:10px 0}.world-journey #scene-description{font-size:13px;line-height:1.4;max-width:600px;margin-bottom:12px}.world-counter{top:120px}.world-journey .hero-top{top:125px}.restart-world{right:5%;left:auto;bottom:75px}.world-journey [data-chapter="0"] .scene-caption{bottom:70px}}
@media(prefers-reduced-motion:reduce){.home-view .world-journey{height:700vh}.world-journey .hero-top{transition:none}}

.app-icon-cover{width:100%;height:100%;display:grid;place-items:center}.icon-fridge{background:#f4df9f}.icon-pet{background:#eee8df}.icon-ascii{background:#20231f}.project-image .real-app-icon,.detail-visual .real-app-icon{width:clamp(140px,55%,240px);height:auto;aspect-ratio:1;object-fit:contain;border-radius:23%;box-shadow:0 24px 42px -20px #0006;transition:transform .8s var(--motion-ease)}.detail-visual .real-app-icon{width:min(280px,55%)}.project-card:hover .real-app-icon{transform:translateY(-7px) scale(1.025)}@media(prefers-reduced-motion:reduce){.project-card:hover .real-app-icon{transform:none}}
