:root{--paper:#e8e6e0;--ink:#22231f;--pad:clamp(22px,3.5vw,65px)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 Helvetica,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;padding:0;border:0;background:none}a:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible,button:focus-visible{outline:2px solid #9ca095;outline-offset:6px}header{position:absolute;z-index:2;top:0;width:100%;display:flex;align-items:center;gap:34px;padding:25px var(--pad);color:#fff;font-size:12px}.monogram{font-size:30px;font-weight:700;letter-spacing:-2px}header>span{font-size:10px;line-height:1.3}nav{display:flex;gap:7px;margin:auto}header .email{border-bottom:1px solid #ffffff80;padding-bottom:3px}.hero{height:100svh;min-height:680px;position:relative;color:#f5f4ee;background:#171717;overflow:hidden}.hero>video,.shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.shade{background:linear-gradient(#0006,transparent 35%,#0005 65%,#000b)}.hero-top{position:absolute;top:120px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;font:9px monospace;letter-spacing:1px}.hero-top button{font:9px monospace;text-transform:uppercase;border-bottom:1px solid #ffffff70;padding-bottom:5px}.hero-caption{position:absolute;bottom:clamp(210px,22vw,340px);left:var(--pad);font:10px monospace;display:flex;flex-direction:column;gap:10px}.hero-caption button{text-align:left;font:12px Helvetica,Arial,sans-serif;border-bottom:1px solid #fff8;padding-bottom:5px;width:max-content}.hero h1{position:absolute;bottom:64px;left:var(--pad);right:var(--pad);margin:0;font-size:clamp(70px,12.8vw,230px);font-weight:500;line-height:.86;letter-spacing:-.075em;white-space:nowrap}.hero h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.075em}.hero-foot{position:absolute;bottom:22px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;font-size:10px}.work{padding:58px var(--pad) 75px}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:28px}.section-head h2{font-size:24px;font-weight:400;letter-spacing:-1px;margin:0}.section-head sup{font:10px monospace;margin-left:10px}.section-head>span{font-size:10px}.projects{display:grid;grid-template-columns:1fr 1fr;gap:40px 20px}.project{text-align:left;min-width:0}.picture{aspect-ratio:1.65;position:relative;overflow:hidden;background:#141414}.picture img{width:100%;height:100%;object-fit:cover;transition:transform .65s,filter .65s}.project:hover img{transform:scale(1.025);filter:brightness(.85)}.picture>span{position:absolute;right:18px;bottom:18px;color:white;font-size:11px;border-bottom:1px solid white;opacity:0;transition:opacity .2s}.project:hover .picture>span,.project:focus-visible .picture>span{opacity:1}.caption{display:flex;align-items:center;justify-content:space-between;margin-top:13px;gap:15px}.caption h3{font-size:19px;letter-spacing:-.5px;font-weight:400;margin:0}.caption>span{font:9px monospace;color:#64655e}.archive{font-size:11px;display:inline-block;margin-top:32px;border-bottom:1px solid #909187;padding-bottom:5px}.info{border-top:1px solid #bcbeb3;margin:0 var(--pad);padding:65px 0 90px;display:grid;grid-template-columns:1fr 2fr 1fr;gap:40px}.label{font:9px monospace;letter-spacing:.7px}.info h2{font-size:clamp(36px,4.4vw,68px);line-height:1.02;letter-spacing:-.055em;font-weight:400;margin:0 0 25px}.info p{max-width:520px;font-size:16px;color:#66685f;line-height:1.65}.info a{display:inline-block;margin-top:18px;border-bottom:1px solid #999b91;padding-bottom:5px}.margin-note{font:italic 17px Georgia,serif;align-self:end;text-align:right;color:#77796f}.notes{padding:50px var(--pad) 65px;background:#222420;color:var(--paper)}.notes .section-head>span{color:#aaa}.notebook{display:grid;grid-template-columns:1fr 1fr;gap:20px}.notebook>a,.notebook>article{padding:30px;min-height:340px;display:flex;flex-direction:column;background:#30332d}.notebook .lab-note{background:#d7d9cf;color:#252820}.lab-note:hover{text-decoration:none;background:#e3e5db}.notebook h3{font-size:clamp(45px,6vw,90px);line-height:.95;letter-spacing:-.065em;font-weight:400;margin:42px 0}.lab-note h3{font-weight:600}.lab-note h3>span{font-weight:300}.video-note h3 em{font-family:Georgia,serif}.note-bottom{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-top:auto;font-size:11px}.note-bottom p{margin:0}.note-bottom>span{font-size:10px;white-space:nowrap;border-bottom:1px solid #92978a;padding-bottom:3px}.contact{padding:70px var(--pad) 80px}.contact h2{font-size:clamp(72px,12vw,180px);font-weight:400;letter-spacing:-.065em;line-height:1;margin:26px 0}.contact h2 em{font-family:Georgia,serif;font-weight:400}.contact>a{font-size:20px;border-bottom:1px solid #8c8f81;padding-bottom:5px}footer{border-top:1px solid #bcbeb3;margin:0 var(--pad);padding:22px 0;display:flex;justify-content:space-between;gap:20px;font-size:10px}footer>div{display:flex;gap:22px}footer>span:last-child{color:#797b72}dialog{width:min(1000px,94vw);border:0;background:#242521;color:white;padding:20px}dialog::backdrop{background:#000e}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{font-size:18px;font-weight:400}.dialog-head button{padding:12px}dialog video{width:100%;max-height:75vh}body:has(dialog[open]){overflow:hidden}@media(max-width:750px){header{gap:20px;padding-top:20px}header>span{display:none}.email{font-size:10px}nav{font-size:11px}.hero{min-height:600px}.hero-top{top:100px;font-size:8px;letter-spacing:0}.hero-top button{font-size:8px}.hero h1{font-size:18vw;white-space:normal;line-height:.9;bottom:75px}.hero h1 em{display:block;font-size:20vw}.hero-caption{bottom:260px}.hero-foot{font-size:9px}.work{padding-top:35px;padding-bottom:45px}.section-head>span{display:none}.projects{grid-template-columns:1fr;gap:28px}.picture>span{opacity:1}.info{grid-template-columns:1fr;gap:25px;padding-top:35px;padding-bottom:45px}.info h2{font-size:42px}.info p{font-size:15px}.margin-note{text-align:left}.notes{padding-top:35px;padding-bottom:35px}.notebook{grid-template-columns:1fr}.notebook>a,.notebook>article{min-height:300px;padding:24px}.notebook h3{font-size:64px}.contact{padding-top:40px;padding-bottom:50px}footer{flex-wrap:wrap;font-size:9px}footer>span:last-child{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Personal wordmark and a simple, responsive navigation. */
header{justify-content:space-between;gap:24px;background:linear-gradient(#0005,transparent)}.monogram{font-size:22px;letter-spacing:-.8px;font-weight:500;white-space:nowrap}header nav{margin:0;gap:28px;font-size:12px}header nav a{padding:8px 0}.archive-cover{background:#343831;display:flex;align-items:end;padding:24px}.archive-cover>strong{position:relative;z-index:1;color:#e8e6e0;font-size:clamp(24px,3vw,45px);font-weight:400;letter-spacing:-1.5px}.folder-sheets{position:absolute;inset:15% 17% 26% 20%}.folder-sheets img{position:absolute;width:68%;height:100%;object-fit:cover;border:4px solid #e8e6e0;box-shadow:0 6px 20px #0005}.folder-sheets img:nth-child(1){transform:rotate(-13deg);left:0}.folder-sheets img:nth-child(2){transform:rotate(3deg);left:20%}.folder-sheets img:nth-child(3){transform:rotate(13deg);left:38%}.collection:hover .folder-sheets img{filter:none}.notebook .video-note{background:#30332d;color:var(--paper)}.video-note:hover{text-decoration:none;background:#3a3e35}.archive-intro{color:#c0c3b9}.archive-items{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:15px 0}.archive-items button{text-align:left}.archive-items img{display:block;width:100%;aspect-ratio:1.6;object-fit:cover;margin-bottom:8px}#archive-dialog{max-height:90svh;overflow:auto}@media(max-width:750px){header{flex-wrap:wrap;gap:12px;padding-top:18px;padding-bottom:18px}.monogram{font-size:20px}header nav{width:100%;justify-content:space-between;gap:10px;font-size:11px}header nav a{padding:5px 0}.hero-top{top:125px}.archive-cover{padding:20px}.archive-cover>strong{font-size:30px}.archive-items{gap:15px}}
/* Sticky header: name and title left, nav right. Blend mode keeps it readable on dark and light sections. */
html{scroll-padding-top:80px}
header{position:fixed;inset:0 0 auto 0;width:100%;z-index:20;justify-content:space-between;align-items:center;background:none;mix-blend-mode:difference;color:#fff;padding:20px var(--pad)}
.monogram{display:flex;flex-direction:column;line-height:1.25;letter-spacing:0;font-size:inherit;font-weight:400}
.monogram:hover{text-decoration:none}.monogram strong{font-size:16px;font-weight:600;letter-spacing:.01em}.monogram span{font-size:11px;letter-spacing:.04em}
header>span{display:inline}
@media(max-width:750px){header{flex-wrap:nowrap;justify-content:space-between;gap:16px;padding:16px var(--pad)}header nav{width:auto;gap:14px;font-size:11px}.monogram strong{font-size:14px}.monogram span{font-size:10px}.hero-top{top:90px}}

/* Hero project switcher. */
.hero h1{bottom:104px}
.hero-foot{bottom:0;left:var(--pad);right:var(--pad);height:78px;align-items:center;gap:32px;border-top:1px solid #ffffff45;font-size:11px}
.tabs-label{font:9px/1.5 monospace;letter-spacing:.06em;color:#c4c4bd;flex:0 0 70px}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;flex:1;height:100%;max-width:640px}
.tabs button{text-align:left;color:#aaa;font-size:12px;border-top:2px solid transparent;margin-top:-1px;padding-top:14px}
.tabs button span{font:9px monospace;margin-right:10px}
.tabs button:hover{color:#fff}.tabs button[aria-pressed=true]{color:#fff;border-color:#fff}
.hero-foot>a{white-space:nowrap}
.hero-video-swap{transition:opacity .3s}
@media(max-width:750px){.hero h1{bottom:100px}.hero-foot{gap:14px;height:70px}.tabs-label{display:none}.tabs{gap:10px}.tabs button{font-size:11px;padding-top:12px}.tabs button span{display:block;margin:0 0 4px}.hero-foot>a{font-size:9px;white-space:normal;text-align:right;max-width:70px}.hero-caption{bottom:285px}}

/* Role cards and NEDS.AI product list. */
.projects.roles{grid-template-columns:repeat(3,1fr);gap:40px 24px;align-items:start}.projects.roles .picture{aspect-ratio:1.5}.role{margin:10px 0 0;font-size:13px;line-height:1.55;color:#5d5f57;max-width:36ch}.role strong{display:block;font-weight:500;color:var(--ink);margin-bottom:4px;font-size:12px;letter-spacing:.02em}
.notebook>div.lab-note{padding:30px;min-height:340px;display:flex;flex-direction:column;background:#d7d9cf;color:#252820;min-width:0}.notebook .lab-note{cursor:default}.lab-note .products{list-style:none;margin:auto 0 0;padding:0}.lab-note .products li{border-top:1px solid #aeb1a4}.lab-note .products li:last-child{border-bottom:1px solid #aeb1a4}.lab-note .products a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;font-size:17px}.lab-note .products a:hover{text-decoration:none;padding-left:8px}.lab-note .products a{transition:padding .2s}.lab-note .products em{font-style:normal;font-size:12px;color:#5c5f53}.lab-note h3{margin:30px 0 28px}
@media(max-width:750px){.projects.roles{grid-template-columns:1fr}.role{max-width:none}}

/* Let the hero name carry the identity; keep navigation quiet. */
header{justify-content:flex-end}header nav{gap:30px}@media(max-width:750px){header{justify-content:center}header nav{width:100%;gap:16px;justify-content:space-between}.hero-top{top:88px}}
/* Review refinements: single identity, readable navigation and clear lab context. */
header nav{gap:22px;font-size:14px}header nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 8px}header{padding-top:10px;padding-bottom:10px}.lab-description{font-size:15px;line-height:1.5;max-width:34ch;margin:0 0 8px}.lab-status{font:10px/1.5 monospace;color:#5c5f53;margin:0 0 24px}.lab-note h3{margin-bottom:16px}.archive span{color:#66685f}.role{max-width:40ch}@media(max-width:750px){header nav{gap:8px;font-size:14px}header nav a{min-width:48px}.hero-top{top:88px}.archive span{display:block;margin-top:4px}}
/* Identity stays in the header; the hero belongs to the current project. */
header{justify-content:space-between}.site-name{font-size:20px;font-weight:500;letter-spacing:-.6px;white-space:nowrap}.hero #project-title{font-size:clamp(65px,10.7vw,190px);letter-spacing:-.065em}.hero #project-title em{letter-spacing:-.065em}@media(max-width:750px){header{flex-wrap:wrap;gap:4px;justify-content:space-between}.site-name{font-size:19px}header nav{width:100%;justify-content:space-between;gap:6px;font-size:13px}header nav a{padding:8px 0}.hero-top{top:115px}.hero #project-title{font-size:16vw;line-height:.95;white-space:normal}.hero #project-title em{display:inline;font-size:inherit}.hero-caption{bottom:260px}}
.archive-feature{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;margin-top:65px;padding:38px 0 0;border:0;border-top:1px solid #bcbeb3}.archive-feature:hover{text-decoration:none}.archive-feature h2{font-size:clamp(50px,7vw,105px);font-weight:400;letter-spacing:-.065em;line-height:1;margin:20px 0}.archive-feature h2 em{font-family:Georgia,serif;font-weight:400}.archive-feature p{font-size:15px;color:#63665b}.archive-feature .archive-action{display:inline-block;font-size:12px;border-bottom:1px solid;padding-bottom:5px;margin-top:15px;color:var(--ink)}.archive-teaser{display:flex;align-items:center;padding:20px}.archive-teaser img{width:58%;aspect-ratio:1.2;object-fit:cover;border:6px solid var(--paper);box-shadow:0 10px 25px #0002;transform:rotate(-8deg);transition:transform .3s}.archive-teaser img+img{margin-left:-18%;transform:rotate(8deg)}.archive-feature:hover img{transform:rotate(-4deg)}.archive-feature:hover img+img{transform:rotate(4deg)}@media(max-width:750px){.archive-feature{grid-template-columns:1fr;gap:20px;margin-top:40px}.archive-teaser{max-width:360px}.archive-feature .label{display:block}}

/* Slimmer video pop-ups: a thin frame instead of a thick slab. */
dialog{padding:0;background:#111;width:min(1180px,94vw);max-height:92svh;border:0}
dialog::backdrop{background:#000d}
dialog .dialog-head{padding:10px 14px;margin:0}
dialog .dialog-head h2{font-size:13px;letter-spacing:.01em}
dialog .dialog-head button{padding:6px 2px;font-size:12px;color:#c4c4bd}
dialog .dialog-head button:hover{color:#fff}
dialog video,#vimeo-player,#archive-still{border-radius:0}
#clip-list{margin:0;padding:0 14px 10px}
#clip-list button{padding:6px 12px;font-size:12px}
#vimeo-player{max-height:76svh}
@media(max-width:750px){dialog{width:100vw;max-width:100vw;max-height:100svh}dialog .dialog-head{padding:8px 12px}}

/* LinkedIn beside the email in the contact section. */
.contact>a+a.contact-social{margin-left:28px;font-size:20px;border-bottom:1px solid #8c8f81;padding-bottom:5px}
@media(max-width:750px){.contact>a+a.contact-social{display:inline-block;margin:22px 0 0;font-size:16px}}

/* Name wordmark: sans first name, italic serif last name, echoing the hero. */
.site-name{font-size:24px;font-weight:600;letter-spacing:-.045em;line-height:1}
.site-name em{font-family:Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.04em;margin-left:.08em}
@media(max-width:750px){.site-name{font-size:21px}}

/* Demo reel player inside the film pop-up. */
#reel-frame{display:block;width:100%;aspect-ratio:16/9;max-height:76svh;border:0;background:#111}

/* Demo reel button: its own spot, separate from the changing project label. */
.hero-reel{position:absolute;z-index:2;right:var(--pad);bottom:clamp(120px,15vh,170px);display:inline-flex;align-items:center;gap:12px;padding:14px 24px 14px 20px;border:1px solid #ffffffa6;border-radius:40px;background:#0004;color:#fff;font-size:13px;letter-spacing:.01em;backdrop-filter:blur(6px);transition:background .25s,color .25s,border-color .25s}
.hero-reel::before{content:"";width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.hero-reel:hover{background:#f0efe8;color:#171717;border-color:#f0efe8}
@media(max-width:750px){.hero-reel{right:auto;left:var(--pad);bottom:clamp(100px,14vh,130px);padding:12px 20px 12px 16px;font-size:12px}}
@media(max-width:750px){.hero-reel{top:158px;bottom:auto;right:auto;left:var(--pad)}}
html{scroll-padding-top:72px}@media(max-width:750px){html{scroll-padding-top:104px}}

/* Archive block: a clean strip of straight, full-bleed tiles instead of tilted photos. */
.archive-feature{display:block;margin-top:70px;padding-top:34px}
.af-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:34px}
.af-head h2{margin:14px 0 0;font-size:clamp(56px,9vw,140px);line-height:.9}
.af-side{max-width:300px;padding-bottom:10px}
.af-side p{margin:0;font-size:15px;line-height:1.5;color:#63665b}
.af-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.af-strip img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s}
.af-strip{overflow:hidden}
.af-strip img{transform:none;margin:0;box-shadow:none;border:0}
.archive-feature:hover .af-strip img{transform:scale(1.04);filter:brightness(.92)}
.archive-feature:hover .af-strip img+img,.archive-feature:hover .af-strip img{transform:scale(1.04)}
@media(max-width:750px){.af-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:24px}.af-strip{grid-template-columns:1fr 1fr}.archive-feature{margin-top:44px}}

/* Portrait in About. */
.info{grid-template-columns:1fr 2fr 1.15fr;align-items:start}
.portrait{margin:0}
.portrait img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.portrait figcaption{font:italic 15px Georgia,serif;color:#77796f;margin-top:12px}
@media(max-width:750px){.info{grid-template-columns:1fr}.portrait{max-width:360px}.portrait img{aspect-ratio:1/1}}

/* Header: clear over the hero, solid bar once you scroll so content never runs behind the name. */
header{transition:background .25s,color .25s,border-color .25s}
header.scrolled{mix-blend-mode:normal;background:#e8e6e0f2;color:#22231f;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #c4c5bb}
.archive-page header{position:sticky;top:0;z-index:20}

/* Archive: one interactive strip, same height as the three project pictures. */
:root{--cw:calc(100vw - 2 * var(--pad));--pic-h:calc((var(--cw) - 48px) / 4.5)}
.archive-feature.af{margin-top:56px;padding-top:30px}
.af-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:22px}
.af-head h2{margin:10px 0 0;font-size:clamp(44px,5.2vw,78px);line-height:.92}
.af-side{display:flex;align-items:flex-end;gap:26px;max-width:520px;padding-bottom:6px}
.af-side p{margin:0;font-size:14px;line-height:1.5;color:#63665b;max-width:26ch}
.af-side .archive-action{margin-top:0;white-space:nowrap;font-size:12px;border-bottom:1px solid;padding-bottom:5px}
.af-panels{display:flex;gap:10px;height:var(--pic-h)}
.af-panel{position:relative;flex:1;min-width:0;overflow:hidden;background:#222 var(--img) center/cover no-repeat;transition:flex .65s cubic-bezier(.2,.7,.2,1);color:#fff}
.af-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,#000b);opacity:.55;transition:opacity .4s}
.af-panel:hover,.af-panel:focus-visible{text-decoration:none}
.af-title,.af-meta{position:absolute;left:16px;z-index:1;white-space:nowrap}
.af-title{bottom:34px;font-size:20px;letter-spacing:-.04em;opacity:0;transform:translateY(8px);transition:opacity .35s .1s,transform .35s .1s}
.af-meta{bottom:16px;font:10px monospace;letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .35s .15s}
@media(hover:hover){
 .af-panels:hover .af-panel{flex:.7}
 .af-panels .af-panel:hover,.af-panels .af-panel:focus-visible{flex:3.2}
 .af-panel:hover::after,.af-panel:focus-visible::after{opacity:1}
 .af-panel:hover .af-title,.af-panel:focus-visible .af-title,.af-panel:hover .af-meta,.af-panel:focus-visible .af-meta{opacity:1;transform:none}
}
@media(hover:none){.af-title,.af-meta{opacity:1;transform:none}.af-panel::after{opacity:1}}
@media(max-width:750px){
 .af-head{flex-direction:column;align-items:flex-start;gap:14px}.af-side{gap:18px;flex-wrap:wrap}
 .af-panels{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
 .af-panel{flex:0 0 72%;aspect-ratio:1.5;scroll-snap-align:start}
 .af-title,.af-meta{opacity:1;transform:none}.af-panel::after{opacity:1}
}

/* About: tabs, and the block matches the project-card row height. */
.info{align-items:stretch;padding:56px 0 64px}
.about-main{display:flex;flex-direction:column;min-width:0}
.about-main h2{margin-bottom:22px}
.about-tabs{display:flex;gap:8px;margin:0 0 20px;flex-wrap:wrap}
.about-tabs button{padding:9px 18px;border:1px solid #aaad9f;border-radius:30px;font-size:13px;min-height:40px;transition:background .2s,color .2s,border-color .2s}
.about-tabs button:hover{border-color:#252721}
.about-tabs button[aria-selected=true]{background:#252721;color:var(--paper);border-color:#252721}
.info .about-panels p{margin:0;font-size:clamp(18px,1.55vw,23px);line-height:1.45;letter-spacing:-.015em;color:var(--ink);max-width:30em;min-height:4.4em}
.info .about-panels p:not([hidden]){animation:aboutIn .45s ease both}
@keyframes aboutIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.about-mail{align-self:flex-start;margin-top:auto!important}
.portrait{display:flex;flex-direction:column}
.portrait img{overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
.portrait{overflow:hidden}
@media(min-width:751px){
 .info{--block-h:calc(var(--pic-h) + 112px)}
 .info .about-main,.info .portrait{min-height:var(--block-h);max-height:var(--block-h)}
 .portrait img{flex:1;min-height:0;aspect-ratio:auto;height:100%}
 .portrait figcaption{flex:none}
}
@media(max-width:750px){.about-tabs button{flex:1;text-align:center}.info .about-panels p{min-height:5.6em}.portrait{overflow:visible}}

/* Exact sizing from the page's own width (no scrollbar drift). */
main{container-type:inline-size}
:root{--pic-h:calc((100cqw - 2 * var(--pad) - 48px) / 4.5)}
@media(min-width:751px){.info{--block-h:calc(var(--pic-h) + 130px)}}

/* About tabs hold a fuller paragraph, so the text steps down a size. */
.info .about-panels p{font-size:clamp(15px,1.18vw,17px);line-height:1.62;letter-spacing:0;max-width:44em;min-height:0}
@media(max-width:750px){.info .about-panels p{font-size:16px;min-height:0}}

/* Equal-length descriptions also get equal space, so the three cards end on the same line. */
@media(min-width:751px){.projects.roles .role{min-height:6.5em}}

/* Four hero tabs now: Reel, LG, EA, Oculus. */
.tabs{grid-template-columns:repeat(4,1fr);max-width:760px}

/* Vimeo background: fills the hero like object-fit:cover, sits under the shade, never takes clicks. */
.bg-vimeo{position:absolute;inset:0;overflow:hidden;background:#111 url(assets/demoreel.webp) center/cover no-repeat;pointer-events:none}
@media(max-width:750px){.bg-vimeo{background-image:url(assets/demoreel-m.webp)}}
.bg-vimeo iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78svh;transform:translate(-50%,-50%);border:0}

/* Texture: soft light gradient on the paper, plus fine film grain over the whole page. */
body{background:
  radial-gradient(1100px 650px at 8% -8%,#f4f2ec 0%,transparent 62%),
  radial-gradient(900px 620px at 104% 38%,#d9d6cc 0%,transparent 58%),
  radial-gradient(1000px 700px at -6% 78%,#dedbd2 0%,transparent 60%),
  linear-gradient(180deg,#e9e7e1 0%,#e0ddd5 100%);
  background-attachment:scroll;background-color:#e6e4de}
body::before{content:"";position:fixed;inset:0;z-index:15;pointer-events:none;opacity:.085;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px}
.archive-page header{background:#e8e6e0e8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media(prefers-reduced-motion:reduce){body::before{opacity:.08}}

/* NEDS.AI tagline stays on one line at every width. */
.lab-description{max-width:none;white-space:nowrap;font-size:clamp(12px,3.3vw,15px)}

/* Project cards are links to their case studies now. */
a.project{display:block;color:inherit}
a.project:hover{text-decoration:none}

/* Contact: email and LinkedIn stack on their own lines on phones instead of touching. */
@media(max-width:750px){.contact>a{display:block;width:fit-content}.contact>a+a.contact-social{margin-top:22px}}

/* Highlights play in the hero itself, not in a pop-up. */
.hero-player{position:absolute;z-index:3;inset:68px 0 0 0;background:#000}
.hero-player iframe{display:block;width:100%;height:100%;border:0}
.hero-player[hidden],.hero-close[hidden]{display:none!important}
.hero-close{position:absolute;z-index:4;top:86px;right:var(--pad);display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border:1px solid #ffffffa6;border-radius:40px;background:#0007;color:#fff;font-size:13px;letter-spacing:.01em;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s,color .25s,border-color .25s}
.hero-close:hover{background:#f0efe8;color:#171717;border-color:#f0efe8}
.hero .shade,.hero .hero-top,.hero .hero-caption,.hero h1,.hero .hero-foot,.hero .hero-reel{transition:opacity .4s ease,visibility .4s}
.hero.playing .shade,.hero.playing .hero-top,.hero.playing .hero-caption,.hero.playing h1,.hero.playing .hero-foot,.hero.playing .hero-reel{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:750px){.hero-player{inset:90px 0 0 0}.hero-close{top:104px}}
.hero.playing{background:#000}
.hero.playing .bg-vimeo,.hero.playing #background-film{visibility:hidden}

/* Header lockup: name with what I do, on every page and in every state (hero, scrolled bar, mobile). */
.site-name{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1}
.site-name .site-first{display:block;white-space:nowrap}
.site-name .site-role{display:block;font:10px/1 monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.74;white-space:nowrap}
.site-name em{font-style:italic}
@media(max-width:750px){
  .site-name{flex-direction:row;align-items:baseline;gap:10px;flex-wrap:nowrap;min-width:0}
  .site-name .site-role{font-size:9px;letter-spacing:.08em}
}
@media(max-width:360px){.site-name .site-role{display:none}}

/* Logo hover: a single underline, under the name only (the role line never gets one). */
.site-name:hover{text-decoration:none}
.site-name:hover .site-first{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.site-name:hover .site-role{text-decoration:none}

/* Home page: the hero already states what I do, so the header role appears once you scroll past it. */
body.home header .site-role{transition:opacity .35s ease}
body.home header:not(.scrolled) .site-role{opacity:0}