:root{color-scheme:dark;--ink:#e9e9e4;--muted:#a5a5a0;--quiet:#81817d;--gutter:clamp(24px,6vw,100px);--mono:11px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}html{background:#000;color:var(--ink);scroll-behavior:smooth}body{margin:0;font-family:Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased}::selection{background:#ddd;color:#000}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:6px}button{border:0;background:none;color:inherit;font:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:1px solid #eee;outline-offset:6px}button:disabled{cursor:default}.skip{position:absolute;top:-100px}.skip:focus{top:18px;z-index:10;background:black;padding:12px}
header,main,footer{width:min(100%,1600px);margin-inline:auto;padding-inline:var(--gutter)}header{padding-block:35px;display:flex;align-items:center;justify-content:space-between;gap:30px}.mark{font-size:23px;line-height:1.05;letter-spacing:-.035em}.mark span{display:block;color:var(--muted);font-style:italic}nav{display:flex;align-items:center;gap:32px;font:var(--mono)}nav a{padding-block:8px}section,[id]{scroll-margin-top:35px}.eyebrow,.stack,.action,.project-note,footer{font:var(--mono);letter-spacing:.04em}.eyebrow,.stack{color:var(--quiet)}.eyebrow{margin:0 0 24px}.action{display:inline-block;padding-block:10px}.action:hover,summary:hover{color:#fff}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:400}h1{font-size:clamp(60px,7.4vw,112px);line-height:.98;letter-spacing:-.055em;margin-block:24px 32px}h2{font-size:clamp(42px,5vw,72px);letter-spacing:-.045em;line-height:1.06;margin-bottom:28px}em{color:#a2a29d;font-weight:400}.intro,.copy>p:not(.eyebrow):not(.stack):not(.project-note),.about p:not(.eyebrow),.contact>p:not(.eyebrow){font-size:18px;line-height:1.8;color:#aaa;max-width:40ch}.intro{max-width:34ch;margin-bottom:25px}
.chapter{position:relative;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:clamp(32px,5vw,80px)}.hero{grid-template-columns:1.12fr 1fr;min-height:min(850px,calc(100svh - 115px));gap:0;padding-block:35px 60px}.hero-copy{position:relative;z-index:1}.hero-art{height:min(80vh,790px);width:110%!important;margin-left:-7%}.hero-links{display:flex;gap:28px;flex-wrap:wrap}.hero .eyebrow{color:#aaa}.art{position:relative;width:100%;height:600px;min-width:0}.art canvas,.art img,.art video{position:absolute;width:100%;height:100%;object-fit:contain}.art canvas{opacity:0}.art.ready canvas{opacity:1}.art.ready img{display:none}.hero-art.ready canvas{display:none}.art[data-playback="video"] video,.art[data-playback="video"] img{mix-blend-mode:screen}
.work-label{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;padding-block:130px 65px}.work-label h2{font-size:clamp(38px,4.3vw,62px);max-width:16ch;margin:0}.work-intro>p{font-size:17px;line-height:1.8;color:var(--muted);max-width:43ch}.work-label nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;margin-top:28px;font-size:11px}.work-label nav a{display:flex;gap:14px}.index-number{color:#70706b;font-size:10px}.work-label .eyebrow{margin-bottom:24px}
.project{padding-block:90px;min-height:780px}.chapter-label{position:absolute;top:35px;left:0;font-size:10px;color:#777}.chapter-number{display:none}.project .art{height:640px;max-height:78vh}.copy{position:relative;max-width:460px}.copy .eyebrow{color:#deded7;margin-bottom:24px;display:flex;align-items:center;gap:12px}.copy .eyebrow:before{content:'';width:4px;height:4px;border-radius:50%;background:#ddd;flex:none}.copy h2{font-size:clamp(43px,4.8vw,70px)}.copy .stack{margin:27px 0 8px;font-size:10px;color:#7f7f79}.project-note{color:var(--quiet);font-size:11px;margin:8px 0 0}.reverse{grid-template-columns:1fr 1.25fr}.reverse .art{grid-column:2;grid-row:1}.reverse .copy{grid-column:1;grid-row:1}#karteideck .art{transform:scale(1.04)}#kane .art{transform:scale(.96)}#trifallax{padding-block:120px}#pointloom .art{height:690px;max-height:82vh}
details{margin-top:14px;font-size:15px;line-height:1.8;color:#aaa}summary{cursor:pointer;font:var(--mono);color:#c9c9c3;width:fit-content;padding:8px 0}details p{margin:14px 0 0;max-width:43ch}details[open]{padding-bottom:8px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-block:155px 100px}.about h2{max-width:15ch}.about-body>p{margin-bottom:26px}.interests{display:flex;flex-wrap:wrap;gap:12px 25px;padding:0;margin:34px 0 0;list-style:none;font:var(--mono);color:#cecec5}.interests li{display:flex;align-items:center;gap:9px}.interests li:before{content:'·';color:#777}.contact{padding-block:100px 150px;max-width:1150px}.contact h2{font-size:clamp(48px,6.4vw,96px);max-width:19ch}.contact>a{font-size:clamp(20px,2.5vw,35px);display:inline-block;margin-top:15px;overflow-wrap:anywhere}footer{padding-block:30px 70px;display:flex;justify-content:space-between;gap:25px;font-size:10px;color:#85857f}#motion{position:fixed;bottom:20px;right:var(--gutter);z-index:5;background:#000;padding:7px 0;font:10px/1.6 monospace;color:#aaa}
@media(min-width:1500px){.hero{min-height:830px}}
@media(max-width:1000px){.chapter{gap:25px}.hero{gap:0}h1{font-size:clamp(55px,7vw,80px)}.project{min-height:650px}.project .art,#pointloom .art{height:510px}.copy h2{font-size:46px}.about,.work-label{gap:40px}.intro,.copy>p:not(.eyebrow):not(.stack):not(.project-note){font-size:17px}}
@media(max-width:700px){header{padding-block:25px;gap:16px}nav{gap:18px;font-size:10px}.mark{font-size:20px}.chapter,.hero,.reverse{display:flex;flex-direction:column;align-items:stretch;gap:24px;min-height:0}.hero{padding-top:40px;gap:0;padding-bottom:10px}.hero h1{font-size:clamp(56px,13.5vw,82px);max-width:12ch}.hero .intro{font-size:17px;max-width:34ch}.hero-art{width:100%!important;margin:15px 0 0;height:460px;max-height:65svh;order:2}.hero-links{gap:20px}.eyebrow{font-size:10px}.work-label{display:block;padding-block:70px 25px}.work-label h2{font-size:43px;max-width:16ch;margin-bottom:28px}.work-intro>p{font-size:16px}.work-label nav{gap:5px 18px}.project,#trifallax{padding-block:65px 45px;gap:25px}.chapter-label{top:22px;font-size:9px}.project .art,#pointloom .art{height:380px;max-height:55svh}.copy{max-width:100%}.copy h2{font-size:clamp(42px,11vw,60px)}.copy .eyebrow{margin-bottom:18px}.copy>p:not(.eyebrow):not(.stack):not(.project-note){font-size:17px}.about{display:block;padding-block:85px 45px}.about h2{font-size:46px;max-width:17ch;margin-bottom:32px}.about p:not(.eyebrow){font-size:17px}.contact{padding-block:60px 85px}.contact h2{font-size:clamp(46px,11.5vw,65px)}.contact>p:not(.eyebrow){font-size:17px}footer{font-size:10px;flex-wrap:wrap;padding-bottom:75px}footer span:nth-child(2){display:none}#motion{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Let the portrait share the headline's space; dissolve the recording boundary. */
.hero{isolation:isolate;min-height:850px;overflow:clip;grid-template-columns:1.15fr 1fr;padding-bottom:100px}
.hero-copy{z-index:2;pointer-events:none}
.hero-copy a{pointer-events:auto}
.hero h1{position:relative;text-shadow:0 2px 22px #000,0 0 5px #000;max-width:10ch}
.hero .intro,.hero .eyebrow,.hero-links{text-shadow:0 0 12px #000,0 0 5px #000}
.hero-art{position:absolute;z-index:0;right:-6%;top:-35px;width:90%!important;height:980px;max-height:none;margin:0;pointer-events:none;mask-image:linear-gradient(to right,transparent 0%,#000 20%,#000 79%,transparent 97%),linear-gradient(to bottom,transparent 0%,#000 18%,#000 68%,transparent 96%);mask-composite:intersect}
@media(min-width:1500px){.hero{min-height:940px}.hero-art{height:1090px}}
@media(min-width:701px) and (max-width:1000px){.hero{min-height:770px}.hero-art{right:-22%;width:100%!important;height:900px;top:0}}
@media(max-width:700px){.hero{display:flex;min-height:0;padding-bottom:0;overflow:clip}.hero-copy{z-index:2}.hero h1{font-size:clamp(56px,13.5vw,82px)}.hero-art{position:relative;right:auto;top:auto;order:2;width:135%!important;align-self:center;height:580px;max-height:none;margin:-95px 0 -65px;mask-image:linear-gradient(to right,transparent 0%,#000 17%,#000 79%,transparent 99%),linear-gradient(to bottom,transparent 0%,#000 18%,#000 67%,transparent 94%)}.hero .intro{max-width:30ch}}

/* Typography and artwork occupy a shared field, with quiet interaction cues. */
.hero-art{right:0%;width:96%!important}
.hero h1{max-width:11ch}
header nav a,.hero-links a,.work-label nav a,footer a{position:relative}
header nav a:after,.hero-links a:after,.work-label nav a:after,footer a:after{content:'';position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease;opacity:.6}
header nav a:hover:after,header nav a[aria-current]:after,.hero-links a:hover:after,.work-label nav a:hover:after,footer a:hover:after{transform:scaleX(1)}
header nav a:hover,.hero-links a:hover,.work-label nav a:hover,footer a:hover{text-decoration:none}
.work-label nav a{transition:transform .3s ease,color .3s ease}.work-label nav a:hover{transform:translateX(5px);color:#fff}
summary{transition:color .25s ease}.contact>a{transition:color .3s ease}.contact>a:hover{color:#fff}
.project .copy{z-index:2}.project .copy h2{text-shadow:0 0 16px #000}
@media(min-width:1001px){.project{column-gap:20px}.project .art{width:110%;margin-left:-4%}.reverse .art{margin-left:-7%}.project .copy{margin-left:-18px}.reverse .copy{margin-left:0;margin-right:-18px}}
@media(min-width:701px) and (max-width:1000px){.hero-art{right:-12%;width:105%!important}}
@media(max-width:700px){.hero-art{right:auto;width:140%!important}.hero h1{max-width:12ch}}
.motion-still *, .motion-still *:before,.motion-still *:after{transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}

/* Rebalance the hero and shorten the pauses between chapters. */
@media(min-width:1001px){.hero-copy{margin-left:clamp(35px,5vw,80px)}.hero-art{right:-9%}.hero{grid-template-columns:1.3fr 1fr}.project{min-height:680px;padding-block:55px}.project .art{height:590px}#trifallax{padding-block:60px}#pointloom .art{height:630px}.work-label{padding-block:85px 35px}.about{padding-block:95px 65px}.contact{padding-block:65px 110px}}
@media(min-width:701px) and (max-width:1000px){.hero-copy{margin-left:20px}.hero-art{right:-19%}.project{padding-block:55px}#trifallax{padding-block:65px}.work-label{padding-block:85px 35px}}
@media(max-width:700px){.project,#trifallax{padding-block:42px 28px}.chapter-label{top:8px}.work-label{padding-bottom:10px}.about{padding-top:60px}.contact{padding-top:40px}}

/* Compose around visible sculpture silhouettes rather than canvas boundaries. */
@media(min-width:1001px){
 .project{min-height:630px;padding-block:35px;grid-template-columns:1.15fr 1fr;column-gap:0}
 .project.reverse{grid-template-columns:1fr 1.15fr}
 .project .copy{max-width:500px}
 .project.reverse .copy{margin-left:clamp(35px,5vw,80px);margin-right:-70px;max-width:510px}
 .project.reverse .art{margin-left:-17%;width:117%}
 #kane .art{transform:scale(1.05)}
 #pointloom .art{margin-left:-21%;width:120%;height:620px}
 #karteideck .art{margin-left:2%;width:112%}
 #karteideck .copy{margin-left:-35px}
 #trifallax{padding-block:35px}
 .chapter-label{top:12px}
 .about{padding-block:65px 40px;column-gap:45px}
 .contact{padding-block:50px 85px}
}
@media(min-width:701px) and (max-width:1000px){.reverse .art{margin-left:-12%;width:112%}.reverse .copy{margin-left:15px}.project{column-gap:0}.copy h2{font-size:43px}}
@media(max-width:700px){.project,.project.reverse,#trifallax{gap:8px;padding-bottom:20px}.project .art,#pointloom .art{height:330px}.project .copy{margin-top:-18px}.project .copy h2{text-shadow:0 0 20px #000}}
/* Native scroll timelines run only as the page moves, with no JS render loop. */
@supports (animation-timeline:view()){
 @keyframes sculpture-drift{from{transform:translateY(24px) scale(.97)}to{transform:translateY(-24px) scale(1.025)}}
 .project .art{view-timeline-name:--sculpture;view-timeline-axis:block}
 .project .art>canvas,.project .art>video,.project .art>img{animation:sculpture-drift linear both;animation-timeline:--sculpture;animation-range:entry 0% exit 100%}
 .motion-still .project .art>*{animation:none!important}
 @media(prefers-reduced-motion:reduce){.project .art>*{animation:none!important}}
 @media(max-width:700px){@keyframes sculpture-drift{from{transform:translateY(12px)}to{transform:translateY(-12px)}}}
}

.type-line{display:block}
.reading-rail{position:fixed;right:22px;top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:8px;pointer-events:none;z-index:4}
.reading-rail i{width:2px;height:2px;border-radius:50%;background:#444}
@supports (animation-timeline:view()){
 .project,.work-label,.about,.contact{view-timeline-name:--chapter;view-timeline-axis:block}
 @keyframes line-arrival{from{opacity:.3;translate:0 24px}to{opacity:1;translate:0 0}}
 @keyframes line-follow{from{opacity:.25;translate:0 34px}to{opacity:1;translate:0 0}}
 .type-line{animation:line-arrival linear both;animation-timeline:--chapter;animation-range:entry 5% entry 70%}
 .type-line:nth-child(2){animation-name:line-follow;animation-range:entry 15% entry 90%}
 @keyframes copy-flow{from{translate:0 14px}to{translate:0 -14px}}
 .project .copy>p:not(.eyebrow),.project .copy>details{animation:copy-flow linear both;animation-timeline:--chapter;animation-range:entry 0% exit 100%}
 @keyframes point-progress{from{background:#444}to{background:#eee}}
 .reading-rail i{animation:point-progress linear both;animation-timeline:scroll(root block);animation-range:calc(var(--step)*5%) calc(var(--step)*5% + 5%)}
 .motion-still .type-line,.motion-still .copy>p,.motion-still .copy>details,.motion-still .reading-rail i{animation:none!important}
 @media(prefers-reduced-motion:reduce){.type-line,.copy>p,.copy>details,.reading-rail i{animation:none!important}}
}
@media(max-width:700px){.reading-rail{right:9px;gap:6px}.reading-rail i{width:2px;height:2px}}

.type-line{position:relative}.solid-type{display:block}.sampled-type{position:absolute;inset:0;pointer-events:none;opacity:0;color:transparent;background:radial-gradient(circle,#ddd .85px,transparent 1.05px) 0 0/3px 3px;background-clip:text;-webkit-background-clip:text}.sampled-type em{color:transparent}
a:has(.point-trail){position:relative}.point-trail{position:absolute;left:0;bottom:0;display:flex;gap:5px;pointer-events:none}.point-trail i{width:2px;height:2px;background:#ddd;border-radius:50%;opacity:0}
@supports (animation-timeline:view()){
 @keyframes solid-resolve{from{opacity:0}to{opacity:1}}
 @keyframes dots-resolve{0%,25%{opacity:.85}100%{opacity:0}}
 .solid-type{animation:solid-resolve linear both;animation-timeline:--chapter;animation-range:entry 12% entry 65%}
 .sampled-type{animation:dots-resolve linear both;animation-timeline:--chapter;animation-range:entry 5% entry 65%}
 .type-line:nth-child(2) .solid-type,.type-line:nth-child(2) .sampled-type{animation-range:entry 22% entry 80%}
 /* Dissolve the actual rendered surface; do not add unrelated particles. */
 @keyframes surface-resolve{0%{opacity:.18;filter:brightness(1.35);mask-size:6px 6px}22%,72%{opacity:1;filter:brightness(1);mask-size:1px 1px}100%{opacity:.12;filter:brightness(1.25);mask-size:6px 6px}}
 .project .art{mask-image:radial-gradient(circle,#000 1.4px,transparent 2px);mask-repeat:repeat;animation:surface-resolve linear both;animation-timeline:--chapter;animation-range:entry 0% exit 100%}
 .motion-still .solid-type{animation:none!important;opacity:1}.motion-still .sampled-type{animation:none!important;opacity:0}.motion-still .project .art{animation:none!important;mask-image:none;filter:none;opacity:1}
 @media(prefers-reduced-motion:reduce){.solid-type{animation:none!important;opacity:1}.sampled-type{animation:none!important;opacity:0}.project .art{animation:none!important;mask-image:none;filter:none;opacity:1}}
}

/* Final contrast and navigation polish. */
:root{--ink:#f5f5f0;--muted:#bcbcb6;--quiet:#a1a19a}
header{padding-block:30px;align-items:center}
.mark{font-family:'Times New Roman',Times,serif;font-size:28px;line-height:.95;font-weight:600;letter-spacing:-.055em;color:#fff}
.mark span{display:inline;color:#fff;font-style:normal;margin-left:.22em}
.mark:hover{text-decoration:none}
header nav{gap:30px;font-size:11px;letter-spacing:.055em}
header nav a{color:#bcbcb6;padding:12px 0;transition:color .2s ease}
header nav a:hover,header nav a:focus-visible,header nav a[aria-current]{color:#fff}
header nav a:after{bottom:4px;height:1px;opacity:1}
h1,h2{color:#f7f7f2}em{color:#c2c2bb}
.intro,.copy>p:not(.eyebrow):not(.stack):not(.project-note),.about p:not(.eyebrow),.contact>p:not(.eyebrow){color:#bdbdb6}
.work-intro>p{color:#bdbdb6}.eyebrow,.chapter-label,.copy .stack,.stack{color:#a1a19a}.copy .eyebrow{color:#f2f2eb}.index-number{color:#aaa}
.action,summary{color:#e5e5dc}details{color:#bcbcb5}.project-note{color:#a6a69e}footer{color:#aaa99f}
#motion{color:#c5c5bd;padding:9px 0}#motion:hover{color:#fff}.reading-rail i{background:#686860}
.contact>a{color:#f5f5ee}.interests{color:#dddcd3}
@media(max-width:700px){header{gap:15px;padding-block:25px}.mark{font-size:22px;line-height:.95;flex:none}.mark span{display:block;margin:2px 0 0}header nav{gap:17px;font-size:10px;letter-spacing:.015em}}
@media(min-width:701px) and (max-width:900px){.mark{font-size:25px}}


/* Clean editorial identity with selective italic contrast. */
.mark{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:29px;letter-spacing:-.045em;line-height:1.05}
.mark span{font-style:italic;font-weight:400;color:#d1d1c9;margin-left:.18em}
.copy>.eyebrow{font-family:Georgia,'Times New Roman',serif;font-size:25px;font-weight:400;letter-spacing:-.025em;line-height:1.2;margin-bottom:22px}
@media(max-width:700px){.mark{font-size:23px}.mark span{margin-left:0}.copy>.eyebrow{font-size:24px}}
.games{padding:70px 0}.games>h2{max-width:18ch}.game-entry{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin:65px 0 95px}.game-entry figure{margin:0;text-align:center}.game-entry figure>img{max-height:540px;max-width:100%;width:auto}.game-entry h3{font-size:48px;line-height:1.08;letter-spacing:-.04em}.game-entry p{color:#bdbdb6;max-width:42ch;font-size:18px;line-height:1.8}.game-entry .eyebrow,.game-entry .stack{font:var(--mono)}figcaption{font:10px/1.8 monospace;color:#999;margin-top:20px}.landscape-shot{position:relative;aspect-ratio:2622/1206;overflow:hidden}.landscape-shot img{position:absolute;width:46%;height:217.4%;object-fit:contain;left:27%;top:-58.7%;transform:rotate(-90deg)}@media(max-width:700px){.games{padding:45px 0}.game-entry{display:flex;flex-direction:column;gap:30px;margin:40px 0 65px}.game-entry figure{width:100%}.game-entry figure>img{max-height:440px}.game-entry h3{font-size:40px}}