:root{--bg:#faf9f6;--ink:#252522;--muted:#81817a;--line:#deded6;--accent:#59654b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:0.8125rem/1.6 Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}button:focus-visible,a:focus-visible{outline:0.125rem solid var(--accent);outline-offset:0.375rem}header,main,footer{max-width:100rem;margin:auto;padding-left:5.4%;padding-right:5.4%}header{height:7.25rem;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:0.875rem;align-items:center;font-size:0.75rem;line-height:1.5}.brand img{width:2.6875rem;height:2.5rem;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s}.brand:hover img{transform:rotate(-12deg)}.muted{color:var(--muted)}nav{display:flex;gap:2.125rem}nav a{position:relative;padding:0.5625rem 0;color:var(--muted);font-size:0.75rem}nav a.active{color:var(--ink)}nav a.active:before{content:'';position:absolute;left:-0.625rem;top:1.125rem;width:0.25rem;height:0.25rem;border-radius:50%;background:var(--ink)}.nav-count{font-size:0.5625rem;vertical-align:super;margin-left:0.3125rem;opacity:.65}.contact{font-size:0.75rem}.contact span{margin-left:1.125rem}.intro{padding-top:5.4375rem;padding-bottom:5.125rem}.eyebrow,.section-label,.step,.place,.timeline-label{font-size:0.625rem;letter-spacing:0.075rem}.eyebrow{display:flex;align-items:center;gap:0.625rem;color:var(--muted)}.dot{width:0.3125rem;height:0.3125rem;border-radius:50%;background:#7b8c63}.clock{margin-left:0.375rem;font-variant-numeric:tabular-nums}.intro-grid{display:grid;grid-template-columns:1.3fr 1fr 7.5rem;gap:1.875rem;align-items:center;margin-top:1.875rem}h1{font-size:clamp(1.625rem,2.55vw,2.5rem);line-height:1.25;font-weight:400;letter-spacing:-0.08125rem;margin:0}.intro-grid p{font-size:0.75rem;color:#66665f;line-height:1.9;margin:0}.text-link{margin-top:1.375rem;border-bottom:0.0625rem solid #aaa99f;color:var(--ink);padding-bottom:0.125rem}.text-link span{margin-left:1.4375rem}.key-button{width:7.1875rem;justify-self:end;transition:transform .2s}.key-button img{width:100%;height:5.9375rem;object-fit:contain;mix-blend-mode:multiply}.key-button span{display:block;font-size:0.5625rem;color:var(--muted);letter-spacing:0.025rem}.key-button.pressed{transform:translateY(0.375rem) rotate(7deg)}.section-label{display:flex;justify-content:space-between;padding:0.9375rem 0;border-top:0.0625rem solid var(--line);color:var(--muted)}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.625rem 1.5rem}.project{text-align:left;min-width:0}.media{aspect-ratio:1.29;overflow:hidden;position:relative;background:#e7e7e1}.media>img,.media>video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s,opacity .4s}.media>video{position:absolute;inset:0;opacity:0}.project:hover .media>img{transform:scale(1.025)}.project.playing video{opacity:1}.open-icon{position:absolute;right:1rem;bottom:1rem;width:1.875rem;height:1.875rem;display:grid;place-items:center;background:var(--bg);border-radius:50%;opacity:0;transform:translateY(0.5rem);transition:.25s}.project:hover .open-icon,.project:focus-visible .open-icon{opacity:1;transform:none}.caption{position:relative;padding:0.9375rem 2.1875rem 0 0;font-size:0.625rem;color:var(--muted)}h2{font-size:0.75rem;font-weight:400;color:var(--ink);margin:0 0 0.1875rem}.caption .year{position:absolute;right:0;top:0.9375rem}.work-end{margin:4.25rem 0 7.8125rem;display:flex;justify-content:space-between;font-size:0.6875rem;color:var(--muted)}.work-end a{color:var(--ink)}footer{padding-top:2.625rem;border-top:0.0625rem solid var(--line)}footer>div>span{font-size:0.6875rem}.footer-mail{display:block;font-size:1.5rem;letter-spacing:-0.0375rem;margin-top:0.5625rem}.footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:0.625rem;margin-top:4.0625rem;padding-bottom:2.375rem}.footer-bottom button{font-size:0.625rem}.study-tag{position:fixed;bottom:0.875rem;left:0.75rem;writing-mode:vertical-rl;transform:rotate(180deg);font-size:0.5rem;letter-spacing:0.09375rem;color:#9b9b92;pointer-events:none}.page-intro{padding:5.9375rem 0 4.6875rem;display:flex;justify-content:space-between;align-items:center}.page-intro h1{margin:1.5625rem 0}.section-key{width:8.125rem;height:8.125rem;object-fit:contain;mix-blend-mode:multiply}.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.375rem}.lab-item{text-align:left}.lab-item img{width:100%;aspect-ratio:.86;object-fit:cover;display:block;transition:transform .3s}.lab-item:hover img{transform:translateY(-0.25rem)}.lab-item>div{display:flex;justify-content:space-between;font-size:0.625rem;padding:0.875rem 0;color:var(--muted)}.lab-note,.timeline-note{font-size:0.625rem;color:var(--muted)}.lab-note{margin:3.125rem 0 8.125rem}.about-layout{display:grid;grid-template-columns:1fr 2fr;gap:4.375rem;margin:0.75rem 0 7.5rem}.about-layout aside{font-size:0.6875rem}.about-logo{width:4.6875rem;mix-blend-mode:multiply;margin-bottom:0.9375rem}.about-lead{font-size:1.375rem;line-height:1.6;letter-spacing:-0.025rem;margin:0 0 1.5625rem;max-width:40rem}.about-copy{max-width:35rem;color:#72726b;line-height:1.9}.timeline-label{display:flex;justify-content:space-between;margin-top:4.375rem;padding-bottom:1rem;border-bottom:0.0625rem solid var(--line);color:var(--muted)}.timeline article{display:grid;grid-template-columns:9.0625rem 1fr;border-bottom:0.0625rem solid var(--line);padding:1.875rem 0;gap:1.25rem}.step{color:var(--muted);font-size:0.5625rem}.timeline h2{font-size:1rem}.timeline p{color:var(--muted);font-size:0.75rem;max-width:25rem}.place{font-size:0.5625rem}.socials{display:flex;gap:1.75rem;font-size:0.6875rem;margin-top:2.5rem}dialog{border:0;background:var(--bg);color:var(--ink);width:min(68.75rem,94vw);max-height:92vh;padding:4.0625rem 3.125rem 2.8125rem}dialog::backdrop{background:#1d201cb8;backdrop-filter:blur(0.4375rem)}.close{position:absolute;right:1.5rem;top:1.25rem;font-size:0.75rem}dialog h1{margin:1.125rem 0;font-size:2rem}dialog p{max-width:40.625rem;color:#74746b;line-height:1.9}dialog img,dialog video{display:block;width:100%;max-height:68vh;object-fit:contain;background:#eeeee8;margin:1.875rem 0}dialog .detail-meta{display:flex;gap:1.875rem;border-top:0.0625rem solid var(--line);padding-top:1rem;margin-top:1.5625rem;font-size:0.6875rem;color:var(--muted)}.original-link{display:inline-block;margin-top:1.125rem;font-size:0.75rem;border-bottom:0.0625rem solid var(--line)}[hidden]{display:none!important}@media(min-width:1500px){.intro{padding-top:6.25rem}.project-grid{gap:4.375rem 1.875rem}}@media(max-width:760px){header,main,footer{padding-left:6%;padding-right:6%}header{height:5.9375rem}.brand{font-size:0.625rem;gap:0.5625rem}.brand img{width:2rem;height:2rem}nav{gap:1.25rem}nav a{font-size:0.6875rem}.nav-count,.contact{display:none}.intro{padding-top:3.4375rem;padding-bottom:3.125rem}.intro-grid{grid-template-columns:1fr 5.625rem;gap:1.875rem 0.625rem;margin-top:1.4375rem}.intro-grid h1{grid-column:1/3;font-size:2rem}.intro-grid p{font-size:0.6875rem}.key-button{width:5.3125rem}.key-button img{height:4.6875rem}.project-grid{grid-template-columns:1fr;gap:2.1875rem}.media{aspect-ratio:1.2}.open-icon{opacity:1;transform:none}.work-end{margin:2.8125rem 0 5.3125rem;font-size:0.625rem}.footer-mail{font-size:1.4375rem}.footer-bottom{margin-top:3.125rem}.footer-bottom>.muted{display:none}.page-intro{padding:4.0625rem 0 2.5rem}.page-intro h1{font-size:1.875rem}.section-key{width:4.375rem;height:5.625rem}.lab-grid{grid-template-columns:1fr;gap:1.75rem}.lab-item img{aspect-ratio:1.1}.about-layout{grid-template-columns:1fr;gap:2.1875rem;margin-bottom:4.375rem}.about-layout aside{display:none}.about-lead{font-size:1.25rem}.timeline article{grid-template-columns:1fr;gap:0.75rem}.socials{gap:1.1875rem;flex-wrap:wrap}.study-tag{display:none}dialog{padding:3.75rem 1.375rem 1.75rem}dialog h1{font-size:1.625rem}dialog .detail-meta{flex-wrap:wrap;gap:0.625rem 1.25rem}.desktop{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Study 02 — reel first, tactile navigation, a guided timeline. */
header{height:8.5rem}.brand{gap:0.625rem}.brand picture{display:block;width:5.125rem;height:2.875rem}.brand img{width:5.125rem;height:2.875rem;object-fit:contain}.brand-name{font-size:0.8125rem;animation:name-breath 9s infinite}.brand:hover img{transform:none}@keyframes name-breath{0%,40%,51%,100%{opacity:1}45%{opacity:.38}}
nav{gap:1.4375rem;align-items:center}nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4.5rem;height:5.8125rem;padding:0;font-size:0.8125rem;isolation:isolate;color:#76766f}nav a>img{width:4.375rem;height:3.875rem;object-fit:contain;mix-blend-mode:multiply;transition:transform .3s cubic-bezier(.2,.8,.3,1),filter .3s}nav a>span{font-size:0.6875rem;line-height:1.4;position:relative;z-index:2}nav sup{font-size:0.5rem;opacity:.6;margin-left:0.25rem}nav a::after{content:'';position:absolute;width:4.0625rem;height:1.25rem;top:3.375rem;left:0.25rem;background:radial-gradient(ellipse,rgba(var(--key-color),.55),rgba(var(--key-color),0) 72%);filter:blur(0.5rem);opacity:0;z-index:-1;transition:opacity .3s,transform .3s}nav a:hover img,nav a:focus-visible img{transform:translateY(-0.4375rem) rotate(-4deg);filter:saturate(1.12)}nav a:hover::after,nav a:focus-visible::after{opacity:1;transform:scaleX(1.4)}nav a.active::before{display:none}nav a.active>span{color:var(--ink)}nav a.active>span::after{content:'';display:block;margin:0.3125rem auto 0;width:0.1875rem;height:0.1875rem;border-radius:50%;background:rgba(var(--key-color),1)}nav a.key-pressed img{animation:key-press .35s ease}@keyframes key-press{0%{transform:translateY(-0.375rem)}45%{transform:translateY(0.3125rem) scale(.93)}100%{transform:translateY(0)}}
.contact{font-size:0.8125rem}.reel-header{display:flex;justify-content:space-between;align-items:center;font-size:0.625rem;letter-spacing:0.0625rem;color:var(--muted);padding:1.3125rem 0 0.8125rem}.live-dot{display:inline-block;width:0.25rem;height:0.25rem;background:#7c8b66;border-radius:50%;vertical-align:middle;margin-left:0.5rem}.hero-reel{position:relative;overflow:hidden;background:#e6e5de}.hero-reel>video{display:block;width:100%;aspect-ratio:2.2;max-height:38.75rem;object-fit:cover}.reel-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:2.125rem 1.375rem 1.0625rem;background:linear-gradient(transparent,#0008);color:white;font-size:0.625rem;letter-spacing:0.0375rem}.reel-controls>div{display:flex;gap:1.375rem}.reel-controls button{font-size:0.6875rem;text-shadow:0 0.0625rem 0.5rem #0006}.reel-controls button:hover{opacity:.65}.intro{padding:2.75rem 0 4.0625rem}.intro-grid{grid-template-columns:1.2fr 1fr auto;gap:1.875rem;margin:0}.intro-grid h1{font-size:clamp(1.625rem,2.4vw,2.375rem)}.intro-grid p{font-size:0.8125rem}.intro-location{text-align:right}.intro-location .eyebrow{font-size:0.5625rem;gap:0.4375rem}.intro-location .clock{font-size:0.6875rem;color:var(--muted);display:block;margin-top:0.5rem}.caption{font-size:0.6875rem}h2{font-size:0.8125rem}.section-label{font-size:0.6875rem}.page-index{font-size:1.625rem;letter-spacing:-0.0625rem;align-self:flex-start;color:#aaa99f;margin-top:0.75rem}.page-index span{display:block;font-size:0.5625rem;letter-spacing:0.0625rem;margin-top:0.375rem;color:var(--muted)}
.lab-grid{grid-template-columns:repeat(12,1fr);align-items:start;gap:1.5625rem}.lab-item{grid-column:span 5;position:relative}.lab-item:nth-child(2){grid-column:span 3;margin-top:7.1875rem}.lab-item:nth-child(3){grid-column:span 4;margin-top:2.8125rem}.lab-item img{aspect-ratio:.85;transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s}.lab-item:nth-child(2) img{aspect-ratio:.78}.lab-item:nth-child(3) img{aspect-ratio:1}.lab-item:hover img{transform:translateY(-0.4375rem) rotate(-1deg);box-shadow:0 1.0625rem 1.875rem #20202012}.lab-item:nth-child(2):hover img{transform:translateY(-0.4375rem) rotate(1deg)}.lab-item>div{font-size:0.6875rem;flex-wrap:wrap;gap:0.1875rem 0.75rem}.lab-note{font-size:0.6875rem;margin-bottom:6.875rem}
.about-copy{font-size:0.875rem}.timeline{position:relative;margin-left:0.375rem;padding-left:1.875rem}.timeline-rail{position:absolute;left:0;top:0;bottom:0;width:0.0625rem;background:var(--line)}.timeline-rail>span{position:absolute;left:0;top:0;width:0.0625rem;height:0;background:linear-gradient(#b368bc,#d58952,#68a4a4)}.timeline article{position:relative;padding:2rem 0;grid-template-columns:8.125rem 1fr;gap:1.25rem}.timeline article>.step,.timeline article>div{opacity:0;transform:translateY(0.75rem)}.timeline-node{position:absolute;left:-2.3125rem;top:2rem;display:grid;place-items:center;width:0.9375rem;height:0.9375rem;font-size:0.9375rem;font-style:normal;line-height:1;background:var(--bg);color:var(--tone);opacity:0;transform:translateY(-0.75rem) scale(.3);filter:drop-shadow(0.0625rem 0.125rem 0.0625rem #0002)}.timeline.drawing .timeline-rail>span{animation:line-draw 2.5s ease-out forwards}.timeline.drawing .timeline-node{animation:node-dock .6s cubic-bezier(.16,1,.3,1) var(--delay) both}.timeline.drawing article>.step,.timeline.drawing article>div{animation:story-appear .7s ease calc(var(--delay) + .16s) both}.timeline p{font-size:0.8125rem}.timeline h2{font-size:1.0625rem}.timeline-note{font-size:0.6875rem}@keyframes line-draw{to{height:100%}}@keyframes node-dock{to{opacity:1;transform:translateY(0) scale(1)}}@keyframes story-appear{to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){header{height:7.1875rem;gap:0.75rem}.brand{gap:0.125rem}.brand picture,.brand img{width:3.5625rem;height:2.5rem}.brand-name{font-size:0.625rem}.brand-name .muted{font-size:0.5rem}nav{gap:0.3125rem}nav a{width:2.6875rem;height:4.8125rem}nav a>img{width:3.0625rem;height:3rem}nav a>span{font-size:0.625rem}nav sup{display:none}nav a::after{width:2.625rem;left:0;top:2.6875rem}.reel-header{padding-top:0.625rem;font-size:0.5rem;letter-spacing:0.03125rem}.hero-reel>video{aspect-ratio:1.35;object-fit:cover}.reel-controls{padding:1.875rem 0.6875rem 0.75rem}.reel-controls>span{display:none}.reel-controls>div{gap:0.9375rem}.reel-controls button{font-size:0.625rem}.intro{padding:1.875rem 0 2.5rem}.intro-grid{grid-template-columns:1fr;gap:1.1875rem}.intro-grid h1{font-size:1.8125rem;grid-column:auto}.intro-grid p{font-size:0.75rem}.intro-location{display:none}.section-label{font-size:0.625rem}.lab-grid{grid-template-columns:repeat(2,1fr);gap:1.875rem 1.125rem}.lab-item{grid-column:1/3;max-width:86%}.lab-item:nth-child(2){grid-column:1;max-width:none;margin-top:0}.lab-item:nth-child(3){grid-column:2;max-width:none;margin-top:4.0625rem}.lab-item img{aspect-ratio:1.1}.lab-item>div{font-size:0.625rem}.lab-item:nth-child(2) img{aspect-ratio:.8}.lab-item:nth-child(3) img{aspect-ratio:1}.page-index{font-size:1.375rem}.timeline article{grid-template-columns:1fr;gap:0.75rem}.timeline article>.step{font-size:0.5625rem}.timeline{padding-left:1.625rem}.timeline-node{left:-2.0625rem}.about-copy{font-size:0.8125rem}.timeline h2{font-size:1rem}.timeline p{font-size:0.75rem}}
@media(prefers-reduced-motion:reduce){.brand-name{animation:none}.timeline article>.step,.timeline article>div,.timeline-node{opacity:1;transform:none}.timeline-rail>span{height:100%}.timeline.drawing *{animation:none!important}nav a.key-pressed img{animation:none}nav a:hover img{transform:none}}
.hero-reel>video{aspect-ratio:16/9;max-height:68vh;object-fit:contain;background:#e6e5de}
#about .page-intro{padding-top:3.4375rem;padding-bottom:2.625rem}#about .page-intro h1{margin-bottom:0.75rem}.timeline-label{margin-top:2.8125rem}
@media(max-width:760px){.hero-reel>video{aspect-ratio:16/9;max-height:none;object-fit:contain}#about .page-intro{padding-top:2.5rem;padding-bottom:1.875rem}}
/* Study 03 — quiet landing, visible motion, an intentional reel screen. */
#work .intro{padding-top:4.875rem;padding-bottom:4.75rem}#work .intro-grid{grid-template-columns:1.25fr 1fr 14.0625rem;gap:2rem;margin-top:1.5rem;align-items:center}#work .intro-grid h1{font-size:clamp(1.75rem,2.55vw,2.5rem)}#work .intro-grid p{font-size:0.8125rem;line-height:1.9}.reel-entry{width:14.0625rem;justify-self:end}.reel-preview{position:relative;display:block;width:100%;overflow:hidden;aspect-ratio:16/9;background:#e4e4de;text-align:left}.reel-preview>video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s,filter .5s}.reel-play{display:grid;place-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2.125rem;height:2.125rem;border:0.0625rem solid #fff9;background:#16191628;color:white;border-radius:50%;font-size:0.625rem;padding-left:0.125rem;backdrop-filter:blur(0.3125rem);transition:background .25s,transform .25s}.reel-preview:hover video{transform:scale(1.035);filter:brightness(.92)}.reel-preview:hover .reel-play{background:#16191660;transform:translate(-50%,-50%) scale(1.12)}.preview-caption{display:flex;align-items:center;justify-content:space-between;padding-top:0.625rem;gap:0.625rem}.preview-caption #reel-label{font-size:0.75rem;text-align:left;flex:1}.preview-caption #reel-label span{margin-left:1.125rem;display:inline-block;transition:transform .2s}.preview-caption #reel-label:hover span{transform:translate(0.125rem,-0.125rem)}.preview-caption #reel-pause{font-size:0.6875rem;color:var(--muted);width:1.5rem;min-height:1.5625rem}.reel-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:4.0625rem 5vw 1.5rem;background:#171816;color:#efeee9}.reel-dialog::backdrop{background:#171816}.reel-dialog .close{color:#efeee9;top:1.5rem;right:5vw}.reel-screen-heading{display:flex;justify-content:space-between;max-width:93.75rem;margin:0 auto;font-size:0.625rem;letter-spacing:0.0625rem;color:#b2b3a9}.reel-dialog video{width:100%;height:calc(100dvh - 8.75rem);max-height:none;object-fit:contain;background:#171816;margin:1.25rem auto 0}.reel-dialog #detail-content{max-width:93.75rem;margin:auto}.reel-dialog .close:focus-visible{outline-color:#eee}
@media(max-width:1000px) and (min-width:761px){#work .intro-grid{grid-template-columns:1.2fr 1fr 11.5625rem;gap:1.25rem}.reel-entry{width:11.5625rem}#work .intro-grid h1{font-size:1.75rem}#work .intro-grid p{font-size:0.75rem}}
@media(max-width:760px){#work .intro{padding-top:2.625rem;padding-bottom:2.375rem}#work .intro-grid{grid-template-columns:1fr 9.0625rem;gap:1.625rem 0.9375rem;margin-top:1.4375rem}#work .intro-grid h1{grid-column:1/3;font-size:1.875rem}#work .intro-grid p{font-size:0.6875rem;line-height:1.8}.reel-entry{width:9.0625rem}.preview-caption{padding-top:0.3125rem;gap:0.25rem}.preview-caption #reel-label{font-size:0.6875rem}.preview-caption #reel-label span{margin-left:0.5rem}.reel-play{width:1.75rem;height:1.75rem;font-size:0.5rem}.reel-dialog{padding:4.0625rem 4vw 1.25rem}.reel-dialog video{height:calc(100dvh - 8.125rem)}.reel-screen-heading{font-size:0.5625rem}}
@media(max-width:360px){#work .intro-grid{grid-template-columns:1fr 7.8125rem;gap:1.4375rem 0.75rem}#work .intro-grid h1{font-size:1.6875rem}.reel-entry{width:7.8125rem}}
@media(prefers-reduced-motion:reduce){.reel-preview:hover video,.reel-preview:hover .reel-play{transform:none}.reel-play{transform:translate(-50%,-50%)!important}}
/* Typography study — Inter, with the original quiet labels and calls to action. */
@font-face{font-family:Inter;src:url('assets/fonts/InterVariable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
body{font-family:Inter,Arial,Helvetica,sans-serif;font-optical-sizing:auto;font-feature-settings:'liga' 1,'calt' 1}
h1{font-weight:450;letter-spacing:-.025em}
.brand-name{font-weight:500;letter-spacing:-.01em}.brand-name .muted{font-weight:400;letter-spacing:0}
nav a>span{font-weight:500;letter-spacing:-.005em}
.intro-grid p,.about-copy{font-weight:400;letter-spacing:-.008em}
.eyebrow,.section-label,.step,.place,.timeline-label,.clock,.contact,.preview-caption #reel-label,.preview-caption #reel-pause,.reel-screen-heading{font-family:Arial,Helvetica,sans-serif;font-weight:400;font-feature-settings:normal;font-optical-sizing:auto}
/* Work thumbnails — viewport-aware loops and a quiet invitation to open. */
.section-controls{display:flex;align-items:center;gap:1.4375rem}.section-controls #project-motion{font:0.625rem Arial,Helvetica,sans-serif;letter-spacing:0;color:var(--muted);text-transform:none}.section-controls #project-motion:hover{color:var(--ink)}
.project .open-icon{width:auto;min-width:1.875rem;gap:0.875rem;padding:0 0.6875rem;height:1.9375rem;border:0.0625rem solid #fff7;background:#faf9f6ed;color:var(--ink);border-radius:0.125rem;font:0.8125rem Arial,Helvetica,sans-serif;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(0.5rem);box-shadow:0 0.125rem 0.625rem #00000008}
.project .open-icon::before{content:'View project';font-size:0.625rem;letter-spacing:0.00625rem}.project:hover .media>video{transform:scale(1.025)}.project:focus-visible .open-icon{opacity:1;transform:none}
@media(hover:none){.project .open-icon{opacity:1;transform:none;width:1.8125rem;min-width:1.8125rem;padding:0;right:0.75rem;bottom:0.75rem}.project .open-icon::before{display:none}.project:hover .media>video,.project:hover .media>img{transform:none}}
@media(max-width:760px){.section-controls{gap:0.875rem}.section-controls #project-motion{font-size:0.5625rem}.project .open-icon{right:0.75rem;bottom:0.75rem}}
@media(prefers-reduced-motion:reduce){.project:hover .media>video{transform:none}}
/* Transparent project affordances and a quieter home for local time. */
.project .open-icon{background:rgba(250,249,246,.14);color:#fff;border-color:rgba(255,255,255,.5);border-radius:0.25rem;-webkit-backdrop-filter:blur(0.75rem) saturate(1.2);backdrop-filter:blur(0.75rem) saturate(1.2);box-shadow:inset 0 0.0625rem 0 #ffffff14,0 0.125rem 0.625rem #0000000a;text-shadow:0 0.0625rem 0.3125rem #000b}
#work .intro{padding-top:5.875rem}
.footer-location{display:inline-flex;align-items:center;gap:0.5rem;font:0.5625rem Arial,Helvetica,sans-serif;letter-spacing:0.05rem;color:var(--muted)}.footer-location .dot{width:0.25rem;height:0.25rem}.footer-location .clock{margin-left:0.25rem;letter-spacing:0.0125rem;font-size:0.625rem}
@media(max-width:760px){#work .intro{padding-top:3.625rem}.footer-bottom{flex-wrap:wrap;gap:1.125rem 0.75rem}.footer-location{order:3;flex-basis:100%;font-size:0.5625rem}}

/* Reel occupies the full project width; selected work follows its own divider. */
header,main,footer{width:100%;max-width:none}
#work .intro-grid{grid-template-columns:1.25fr 1.75fr;gap:2rem}
#work .intro{padding-bottom:3.5rem}
#work .work-reel{width:100%;margin:0 0 3rem;justify-self:stretch}
#work .work-reel .reel-preview{width:100%;aspect-ratio:16/9}
#work .work-reel .reel-preview>video{object-fit:contain;background:#171816}
#work .work-reel .reel-play{width:3.875rem;height:3.875rem;font-size:0.9375rem}
#work .work-reel .preview-caption{padding-top:0.8125rem}
#work .work-reel .preview-caption #reel-pause{min-width:2.25rem;min-height:2rem}
@media(min-width:1025px){.project-grid{gap:3.625rem 1.5rem}.intro{padding-top:5.4375rem}}
@media(max-width:760px){#work .intro-grid{grid-template-columns:1fr;gap:1.25rem}#work .intro-grid h1{grid-column:auto}#work .intro{padding-bottom:2rem}#work .work-reel{margin-bottom:1.875rem}#work .work-reel .reel-play{width:2.625rem;height:2.625rem;font-size:0.6875rem}}

html{font-size:16px}
@media(min-width:1025px){html{font-size:calc(100vw / 90)}}

/* Reel heading follows the same divider system as Selected Work. */
#work .intro{padding-bottom:6rem}
#work .work-reel .preview-caption{justify-content:flex-end}
@media(max-width:760px){#work .intro{padding-bottom:3rem}}
/* A quiet gallery frame: consistent ten-percent desktop margins. */
@media(min-width:1025px){header,main,footer{padding-left:10%;padding-right:10%}}
/* Give the original keycaps a clearer presence in the header. */
nav a{width:5.75rem;height:6.625rem}
nav a>img{width:6rem;height:5.25rem}
nav a::after{width:5rem;left:.375rem;top:4.5rem}
@media(max-width:760px){nav a{width:2.6875rem;height:5.625rem}nav a>img{width:4rem;height:3.875rem}nav a::after{width:3rem;left:-.15625rem;top:3.625rem}}
/* Selected Work uses a consistent widescreen frame on every device. */
#work .project .media{aspect-ratio:16/9}
/* A brief, first-visit entrance; the portfolio remains the destination. */
.entry-screen{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--bg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility .6s ease}
.is-entering .entry-screen{opacity:1;visibility:visible;pointer-events:auto}
.is-entering{overflow:hidden}
.entry-mark{display:flex;flex-direction:column;align-items:center;animation:entry-mark-in .65s cubic-bezier(.2,.7,.3,1) both}
.entry-mark img{width:6.5rem;height:5.7rem;object-fit:contain;mix-blend-mode:multiply;margin-bottom:1.5rem}
.entry-mark>span{font:500 .6875rem Inter,Arial,sans-serif;letter-spacing:.12em}
.entry-mark small{margin-top:.9rem;font:400 .5rem Arial,sans-serif;letter-spacing:.16em;color:var(--muted)}
.entry-track{position:relative;overflow:hidden;width:7rem;height:1px;background:var(--line);margin-top:1rem}
.entry-track i{display:block;height:100%;width:100%;background:#747d68;transform:scaleX(0);transform-origin:left;animation:entry-line-in 1.15s cubic-bezier(.3,.2,.2,1) forwards}
.entry-arriving body>header,.entry-arriving body>main{animation:entry-page-in .65s cubic-bezier(.2,.7,.3,1) both}
@keyframes entry-mark-in{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
@keyframes entry-line-in{to{transform:scaleX(1)}}
@keyframes entry-page-in{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.entry-screen{transition:none}.entry-mark,.entry-track i,.entry-arriving body>header,.entry-arriving body>main{animation:none}}
/* Original name-to-smile identity, played once before entry. */
.entry-mark{animation:none}
.entry-mark video{display:block;width:18rem;max-width:72vw;height:auto;aspect-ratio:2/1;object-fit:contain;mix-blend-mode:multiply}
.entry-mark .entry-track{width:8rem;margin-top:1.25rem}
.entry-mark .entry-track i{animation:none;transition:transform .15s linear}
/* Center the entrance as one composition, at half its previous size. */
.entry-screen{place-items:center}
.entry-screen .entry-mark{justify-self:center;align-self:center;transform:scale(.5);transform-origin:50% 50%}
/* Blend the entire transformed composition against the off-white overlay. */
.entry-screen .entry-mark{mix-blend-mode:multiply}
.entry-screen .entry-mark video{mix-blend-mode:normal}

/* Lab: two featured interactions, followed by a quiet square sketchbook. */
.lab-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.lab-feature .media{aspect-ratio:16/9}
.lab-experiments-label{margin-top:4.75rem}
.lab-experiment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-bottom:7.5rem}
.lab-experiment{position:relative;aspect-ratio:1;min-width:0;background:#eeede7;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;isolation:isolate}
.lab-experiment img,.lab-experiment video{display:block;width:100%;height:100%;object-fit:cover}
.lab-experiment video{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.lab-experiment.playing video{opacity:1}
@media(hover:hover){.lab-experiment:hover{transform:translateY(-.4rem);box-shadow:0 .9rem 1.6rem -.9rem rgba(37,37,34,.19)}}
@media(max-width:760px){.lab-feature-grid{grid-template-columns:1fr;gap:2.2rem}.lab-experiment-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-bottom:4rem}.lab-experiments-label{margin-top:3rem}}
@media(prefers-reduced-motion:reduce){.lab-experiment:hover{transform:none}}

/* About timeline: a simple black line and small round markers. */
.timeline-rail{background:transparent}
.timeline-rail>span{background:#000}
.timeline-node{background:transparent;color:#000;font-size:0;filter:none}
.timeline-node::before{content:'';display:block;width:.375rem;height:.375rem;border-radius:50%;background:#000}

/* Entrance progress follows the logo frames without a trailing transition. */
.entry-mark .entry-track i{transition:none}
.entry-screen{transition:none}

/* Match the visible smile mark to the unchanged two-line brand text. */
.brand picture{position:relative;width:5.35rem;height:2.4375rem;flex:none;overflow:hidden}
.brand img,.brand:hover img{position:absolute;left:50%;top:50%;width:8.22rem;height:4.11rem;max-width:none;object-fit:contain;transform:translate(-50%,-59.5%);transition:none}
@media(max-width:760px){.brand picture{width:3.65rem;height:1.6875rem}.brand img,.brand:hover img{width:5.7rem;height:2.85rem}}
@media(prefers-reduced-motion:reduce){.brand img,.brand:hover img{width:auto;height:100%;transform:translate(-50%,-50%)}}

/* Keep every frame of the brand animation visible. */
.brand picture{overflow:visible}
/* Independent project pages share the portfolio's type and spacing. */
a.project{display:block;cursor:pointer}
.project-intro{padding:3.5rem 0 0}
.project-back{display:inline-block;font-size:.75rem;color:var(--muted)}
.project-back:hover{color:var(--ink)}
.project-title-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:5rem;align-items:end;margin:4rem 0 3rem}
.project-title-grid h1{font-size:clamp(2rem,3.6vw,3.5rem);line-height:1.12;letter-spacing:-.055em;margin:1rem 0 0;max-width:40rem}
.project-title-grid p{margin:0;font-size:.875rem;line-height:1.85;color:var(--muted);max-width:29rem}
.project-facts{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:2rem;border-top:1px solid var(--line);padding:1.25rem 0 1.75rem;font-size:.75rem}
.project-facts>div{display:flex;flex-direction:column;gap:.5rem}
.fact-label,.project-note-label{font:400 .625rem/1.5 Arial,Helvetica,sans-serif;letter-spacing:.075rem;color:var(--muted)}
.project-hero{background:#eeede7}
.project-film,.project-still{display:block;width:100%;height:auto;max-height:none;object-fit:contain;background:transparent}
.project-notes{display:grid;grid-template-columns:1fr 2fr;gap:4rem;padding:4.5rem 0}
.project-notes h2{font-size:1.5rem;letter-spacing:-.035em;margin:0 0 1.25rem}
.project-notes p{max-width:39rem;color:var(--muted);font-size:.875rem;line-height:1.9;margin:0}
.project-tools{display:flex;gap:2rem;align-items:baseline;font-size:.75rem;margin-top:2rem;line-height:1.8}
.project-notes .original-link{color:var(--muted);font-size:.6875rem}
.project-stills{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.project-stills figure{margin:0}
.project-stills img{display:block;width:100%;height:auto}
.project-next{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--line);padding:2rem 0;margin:5rem 0 5rem;font-size:.75rem;gap:2rem}
.next-project-link{text-align:right;display:flex;flex-direction:column;gap:.75rem;font-size:1.5rem;letter-spacing:-.025em}
@media(max-width:760px){.project-intro{padding-top:2rem}.project-title-grid{grid-template-columns:1fr;gap:1.5rem;margin:2.5rem 0 2rem}.project-title-grid h1{font-size:2.25rem}.project-facts{grid-template-columns:1fr 1fr;gap:1.25rem}.project-facts>div:last-child{display:none}.project-notes{grid-template-columns:1fr;gap:1.25rem;padding:2.5rem 0}.project-stills{grid-template-columns:1fr;gap:1rem}.project-next{margin:3rem 0}.next-project-link{font-size:1.125rem;max-width:65%}.project-film,.project-still{max-height:none}.project-tools{gap:1rem}}

/* Three quiet neon accents echo the navigation keycaps. */
.timeline article:nth-of-type(1){--node-glow:213,67,217}
.timeline article:nth-of-type(2){--node-glow:246,104,49}
.timeline article:nth-of-type(3){--node-glow:92,180,187}
.timeline-node::before{width:.4375rem;height:.4375rem;background:rgb(var(--node-glow));box-shadow:0 0 .22rem rgba(var(--node-glow),.85),0 0 .65rem rgba(var(--node-glow),.42);border:.035rem solid rgba(255,255,255,.65)}

/* Reusable process content blocks; existing project layouts stay intact. */
.project-blocks{display:grid;gap:2.5rem}
.project-blocks:empty{display:none}
.project-blocks figure{margin:0}
.content-image img,.content-video video{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.project-blocks figcaption{font-size:.6875rem;color:var(--muted);margin-top:.75rem;line-height:1.6}
.content-copy{max-width:42rem;margin-left:auto;width:100%}
.content-copy h2{font-size:1.5rem;margin:0 0 1rem;letter-spacing:-.035em}
.content-copy p{font-size:.875rem;line-height:1.9;color:var(--muted);margin:0 0 1rem}
@media(max-width:760px){.project-blocks{gap:1.5rem}}