@font-face{font-family:"Basel Grotesk";src:url("fonts/BaselGrotesk-Book.otf") format("opentype");font-weight:100 400;font-display:swap}
@font-face{font-family:"Basel Grotesk";src:url("fonts/BaselGrotesk-Medium.otf") format("opentype");font-weight:500 600;font-display:swap}
@font-face{font-family:"Basel Grotesk";src:url("fonts/BaselGrotesk-Bold.otf") format("opentype");font-weight:700 900;font-display:swap}
@property --tint{syntax:"<color>";inherits:true;initial-value:#000}
:root{--bg:#000;--fg:#fff;--t-deep:oklch(from var(--tint) .195 calc(min(c * 1.1,.175) * .92) h);--t-glow:oklch(from var(--tint) .57 min(calc(c * 1.4),.195) h);--t-soft:oklch(from var(--tint) .78 calc(min(c,.1) * .6) h);--dim:var(--t-soft);--line:oklch(from var(--tint) .86 calc(min(c,.1) * .5) h);transition:--tint 1600ms cubic-bezier(.4,0,.2,1);--pad:16px;--ff:"Basel Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--t-deep);color:var(--fg);font-family:var(--ff);font-weight:400;font-size:14px;line-height:1.35;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}a:hover{color:var(--dim)}
button{background:none;border:0;color:inherit;font:inherit;cursor:pointer}
img{display:block;max-width:100%}
.sm{font-size:11px;letter-spacing:.02em;text-transform:uppercase}
.logo{display:block;aspect-ratio:1334/147;background:currentColor;-webkit-mask:url("images/logo.png") center/contain no-repeat;mask:url("images/logo.png") center/contain no-repeat}
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--pad);mix-blend-mode:difference;color:#fff;pointer-events:none}
.hdr a,.hdr button{pointer-events:auto}
.hdr .brand{width:min(36vw,460px)}
.hdr .brand .logo{width:100%}
.hdr .meta{display:flex;justify-content:flex-end;align-items:start;gap:24px;padding-top:0;margin-top:-2px;font-size:13px;line-height:1}
.hdr .meta .where{display:flex;gap:16px;font-weight:700}
.hdr nav{display:flex;gap:14px;font-weight:700}
.hdr nav a{padding:1px 4px;margin:-1px -4px}.hdr nav a.on{background:#fff;color:#000}.hdr nav a.on:hover{color:#000;opacity:1}
.hdr nav a:hover{color:#fff;opacity:.6}
.view{display:none}.view.on{display:block}
/* hero */
.hero{position:relative;height:100vh;overflow:hidden}
.hero .sl{position:absolute;opacity:0;transition:opacity 500ms ease}
.hero .sl.in{opacity:1}
.hero .sl img{width:100%;height:100%;object-fit:cover}
.scroll-row{margin-top:72px;display:flex;justify-content:space-between;align-items:end;padding:0 var(--pad) 6px;font-size:clamp(28px,3.4vw,48px);line-height:1;letter-spacing:-.01em;border-bottom:1px solid var(--line)}
.scroll-row .ar{font-size:.9em}
/* grid */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px}
.card{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#111}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 900ms cubic-bezier(.2,.7,.2,1),filter 400ms}

.card .cap{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:6px 10px;background:none;color:#fff;font-weight:700;opacity:0;transition:opacity 300ms}
.card:hover .cap{opacity:1}
.card:hover{color:inherit}
/* index */
.idx-wrap{padding:160px var(--pad) 0}
.idx-head{display:flex;justify-content:space-between;align-items:end;font-size:clamp(28px,3.4vw,48px);line-height:1;letter-spacing:-.01em;padding-bottom:6px;border-bottom:1px solid var(--line)}
.idx-row{display:grid;grid-template-columns:48px 80px minmax(0,2fr) minmax(0,1.4fr) minmax(0,1.4fr);gap:16px;align-items:baseline;padding:7px 0 6px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase}
.idx-row .t{font-size:clamp(14px,1.2vw,17px);font-weight:500}
.idx-row:hover{color:var(--dim)}
.idx-prev{position:fixed;width:280px;aspect-ratio:4/3;pointer-events:none;z-index:40;opacity:0;transition:opacity 200ms;overflow:hidden}
.idx-prev.on{opacity:1}
.idx-prev img{width:100%;height:100%;object-fit:cover}
/* project */
.pj{padding:calc(var(--pad) + 14vw) var(--pad) 0}
.pj h1{font-size:clamp(40px,6.4vw,104px);font-weight:400;line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.pj .sub{font-size:clamp(16px,1.4vw,20px);font-weight:500;margin-top:8px}
.pj-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.pj-meta .l{display:flex;justify-content:space-between;gap:16px}
.pj-meta .r{display:flex;justify-content:space-between;gap:16px}
.pj-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.pj-body .txt{font-size:clamp(14px,1.05vw,16px);line-height:1.4;max-width:62ch;text-wrap:pretty}
.pj-body .txt p+p{margin-top:12px}
.pj-stage{position:relative;height:max(360px,calc(100vh - 120px));margin:64px 0 0;touch-action:pan-y;user-select:none;cursor:grab}
.pj-stage .sl{position:absolute;opacity:0;transition:opacity 450ms ease}
.pj-stage .sl.in{opacity:1}
.pj-stage .sl img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.pj-ctl{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.pj-ctl .btns{display:flex;gap:16px}
.next{display:grid;grid-template-columns:40px minmax(0,1fr) auto 64px;align-items:center;gap:16px;margin:0 0 120px;padding:8px 0;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase}
.next .t{font-size:clamp(14px,1.2vw,17px);font-weight:500}
.next .img{width:64px;aspect-ratio:16/10;overflow:hidden;justify-self:end;filter:grayscale(1) brightness(.8);transition:filter 300ms,width 400ms cubic-bezier(.2,.7,.2,1)}
.next .img img{width:100%;height:100%;object-fit:cover}
.next:hover{color:inherit}.next:hover .img{filter:none}
.next .ar{color:var(--dim)}
/* about */
.ab{padding:160px var(--pad) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 48px;align-items:start}
.ab .lead{font-size:clamp(16px,1.35vw,20px);line-height:1.35;letter-spacing:-.01em;text-wrap:pretty}
.ab .lead p+p{margin-top:18px;color:var(--dim)}
.ab dl{display:grid;grid-template-columns:120px 1fr;gap:14px 16px;align-content:start;border-top:1px solid var(--line);padding-top:12px;font-size:11px}
.ab dt{color:var(--dim)}
.ab dd small{display:block;color:var(--dim);font-size:10px;margin:2px 0 8px}
.press{grid-column:1/-1;margin-top:96px}
.press .h{padding-bottom:6px;border-bottom:1px solid var(--line);font-size:clamp(28px,3.4vw,48px);line-height:1}
.press .row{display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,2fr) 120px;gap:16px;padding:7px 0 6px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase}
.press .row .t{font-weight:500}
/* footer: fixed contact bar */
.ft{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:space-between;align-items:end;gap:24px;padding:var(--pad);mix-blend-mode:difference;color:#fff;pointer-events:none;font-weight:700}
.ft a{pointer-events:auto}.ft a:hover{color:#fff;opacity:.6}
.ft{font-size:13px}.ft .people{display:grid;grid-template-columns:repeat(3,max-content);gap:3px 24px}
.ft .right{display:flex;gap:20px;align-items:end}
.ft .so{display:flex;gap:12px}
main{padding-bottom:80px}
@media (max-width:760px){
.grid{grid-template-columns:1fr}
.hdr{grid-template-columns:1fr}.hdr .meta{position:absolute;right:var(--pad);top:var(--pad)}.hdr .meta .where{display:none}.hdr .brand{width:52vw}
.idx-row{grid-template-columns:36px minmax(0,1fr) minmax(0,1fr)}.idx-row .y,.idx-row .c{display:none}
.pj-meta,.pj-body,.ab{grid-template-columns:1fr}.ft{flex-direction:column;align-items:start;gap:6px}.ft .people{grid-template-columns:repeat(2,max-content)}.ft .people span:nth-child(3n+2){display:none}
.next .ar{display:none}.next{grid-template-columns:40px minmax(0,1fr) 64px}
.press .row{grid-template-columns:60px 1fr}.press .row :nth-child(n+3){display:none}
}
body::before{content:"";position:absolute;left:-20%;right:-20%;top:-20vh;height:160vh;z-index:0;pointer-events:none;background:radial-gradient(closest-side at 50% 34%,color-mix(in oklch,var(--t-glow) 38%,transparent),color-mix(in oklch,var(--t-glow) 34%,transparent) 30%,color-mix(in oklch,var(--t-glow) 24%,transparent) 60%,color-mix(in oklch,var(--t-glow) 10%,transparent) 85%,transparent),radial-gradient(closest-side at 22% 85%,color-mix(in oklch,var(--t-glow) 16%,transparent),color-mix(in oklch,var(--t-glow) 12%,transparent) 50%,transparent);-webkit-mask-image:linear-gradient(#000 55%,transparent 95%);mask-image:linear-gradient(#000 55%,transparent 95%);opacity:.9;animation:drift 18s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-3%) scale(1.08)}100%{transform:translate(-3%,4%) scale(1.02)}}
body.on-hero::before{opacity:1}
body::after{content:"";position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.13;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(6) infinite}
body{position:relative;isolation:isolate}main,footer{position:relative;z-index:1}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.scroll-row,.idx-head,.idx-row,.pj-ctl,.press .h,.press .row,.ab dl{border-color:var(--line)!important}
::selection{background:transparent;color:oklch(from var(--tint) .78 max(min(calc(c * 1.6),.2),.12) h)}
@media (prefers-reduced-motion:reduce){body::after,body::before{animation:none}}
html,body,a,button,.pj-stage{cursor:none}
.cursor{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:#fff;pointer-events:none;z-index:9999;mix-blend-mode:difference;transition:width 260ms cubic-bezier(.2,.7,.2,1),height 260ms cubic-bezier(.2,.7,.2,1)}
.cursor.is-link{width:14px;height:14px}
.cursor-label{position:fixed;top:0;left:0;pointer-events:none;z-index:10000;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;margin-left:22px;opacity:0;transition:opacity 200ms}
.cursor-label.on{opacity:1}
@media (hover:none){html,body,a,button,.pj-stage{cursor:auto}.cursor,.cursor-label{display:none}}
.ab .lead p{text-align:justify;text-wrap:wrap;hyphens:auto}
.idx-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.idx-pv{position:sticky;top:90px;margin-top:8px;aspect-ratio:4/5;max-height:calc(100vh - 160px);width:100%;overflow:hidden}
.idx-pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 450ms ease}
.idx-pv img.on{opacity:1}
.idx-pv .cap{position:absolute;left:8px;bottom:8px;z-index:2;font-size:11px;font-weight:700;text-transform:uppercase;color:#fff;mix-blend-mode:difference}
.idx-row.on{color:var(--fg)}
#idxList .idx-row{color:var(--dim)}#idxList .idx-row.on{color:var(--fg)}
.idx-row{grid-template-columns:40px 56px minmax(0,2fr) minmax(0,1.3fr) minmax(0,1.2fr)}
@media (max-width:760px){.idx-body{grid-template-columns:1fr}.idx-pv{display:none}#idxList .idx-row{color:var(--fg)}}
/* index preview modes */
.idx-row .th{display:none}
.idx-bg,.idx-fl{display:none}
.idx-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:brightness(.5);transition:opacity 500ms ease}
.idx-bg img.on{opacity:1}
.idx-row{grid-template-columns:48px 64px minmax(0,2fr) minmax(0,1.3fr) minmax(0,1.2fr) 96px;align-items:center}
.idx-row .th{display:block;justify-self:end;width:64px;aspect-ratio:16/10;overflow:hidden;filter:grayscale(1) brightness(.8);transition:filter 300ms,width 400ms cubic-bezier(.2,.7,.2,1)}
.idx-row .th img{width:100%;height:100%;object-fit:cover}
.idx-row:hover .th{filter:none}
#idxList .idx-row{color:var(--fg)}
#idxList:hover .idx-row:not(:hover){color:var(--dim)}
.idx-fl img{width:100%;height:100%;object-fit:cover}
.idx-head{padding-right:0}
@media (max-width:760px){.idx-row{grid-template-columns:36px minmax(0,1fr) minmax(0,1fr) 72px}}
.card .cap>span:nth-child(2){text-align:center}.card .cap>span:nth-child(3){text-align:right}
.pj-gal{columns:2;column-gap:4px;margin:72px calc(var(--pad) * -1 + 4px) 4px}
.pj-gal figure{break-inside:avoid;margin:0 0 4px;overflow:hidden;background:#111;opacity:0;transform:translateY(24px);transition:opacity 700ms ease,transform 900ms cubic-bezier(.2,.7,.2,1)}
.pj-gal figure.in{opacity:1;transform:none}
.pj-gal img{width:100%;height:100%;object-fit:cover;display:block}
.pj .next{margin-top:72px}
@media (max-width:760px){.pj-gal{columns:1}}
.ab{border-top:0;margin:0!important;padding:12px 0 0!important}
.ab dl{border-top:0!important;padding-top:0!important}
.idx-row .n{font-size:clamp(14px,1.2vw,17px);font-weight:500}
.idx-row .y{font-size:clamp(14px,1.2vw,17px);font-weight:400}
#v-work .hero,#v-work .scroll-row{display:none}
@property --ct{syntax:"<color>";inherits:true;initial-value:#111}
.card{--ct:#111;background:oklch(from var(--ct) .2 calc(min(c,.16)*.9) h);transition:--ct 900ms ease}
.card img{position:absolute;inset:0;object-fit:cover;opacity:0;transition:opacity 600ms ease,filter 400ms}
.card img.in{opacity:1}
.card .cap{z-index:2}
.card .cap{text-shadow:0 0 18px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.4)}
#v-work .grid{height:100vh;grid-template-rows:repeat(2,minmax(0,1fr))}
#v-work .card{aspect-ratio:auto;height:100%}
@media (max-width:760px){#v-work .grid{grid-template-columns:1fr 1fr}}
.card .cap{text-shadow:none}
.card .cap>span:not(:empty){justify-self:start;background:#fff;color:#000;padding:2px 5px}
.card .cap>span:nth-child(3):not(:empty){justify-self:end}
#idxList .idx-row>.t{justify-self:start;padding:2px 5px;margin:-2px -5px;transition:background 150ms,color 150ms}
#idxList .idx-row:hover>.t{background:#fff;color:#000}
@keyframes logoBlink{0%,100%{opacity:1}16.66%,50%,83.33%{opacity:0}33.33%,66.66%{opacity:1}}
@keyframes blink2{0%,100%{opacity:1}25%,75%{opacity:0}50%{opacity:1}}
@keyframes glowGreen{0%,100%{text-shadow:none;color:#fff}10%,90%{color:#7dffa8;text-shadow:0 0 4px rgba(40,255,110,.95),0 0 12px rgba(40,255,110,.75),0 0 26px rgba(40,255,110,.45)}}
.ft{isolation:auto}
.ft a{transition:color 200ms,text-shadow 250ms}
.ft{mix-blend-mode:normal!important;text-shadow:0 0 10px rgba(0,0,0,.35)}
.ft a:hover{opacity:1!important;color:#3fd477!important;text-shadow:0 0 3px rgba(20,190,80,.75),0 0 10px rgba(20,190,80,.5),0 0 20px rgba(20,190,80,.28)}
.ft a[href^="mailto:"]:hover{color:#5b86f0!important;text-shadow:0 0 3px rgba(30,80,220,.75),0 0 10px rgba(30,80,220,.5),0 0 20px rgba(30,80,220,.3)}
.ft a.ig:hover{color:#ff4f9a!important;background:linear-gradient(45deg,#feda75,#fa7e1e 30%,#d62976 60%,#962fbf 85%,#4f5bd5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none!important;filter:drop-shadow(0 0 4px rgba(214,41,118,.6)) drop-shadow(0 0 10px rgba(250,126,30,.3))}
.ft a.in:hover{color:#2d8cf0!important;text-shadow:0 0 3px rgba(10,102,194,.8),0 0 10px rgba(10,102,194,.55),0 0 20px rgba(10,102,194,.3)}
@keyframes logoGlow{0%,100%{filter:none}10%,90%{filter:drop-shadow(0 0 6px rgba(255,255,255,.35)) drop-shadow(0 0 14px rgba(255,255,255,.15))}}
.hdr .brand.blink .logo{animation:logoBlink 540ms steps(1) 1}
.hdr .brand.blink{animation:logoGlow 540ms ease 1}
html.snap{scroll-snap-type:y mandatory;scroll-padding-top:0}
#v-work,#v-index,#v-about{scroll-snap-align:start;scroll-snap-stop:always}
#v-index,#v-about{min-height:100vh}
.idx-wrap{padding-top:120px}
.sec-in .idx-head,.sec-in .ab,.sec-in .idx-body{transition:opacity 700ms ease,transform 900ms cubic-bezier(.2,.7,.2,1)}
#v-index:not(.seen) .idx-head,#v-about:not(.seen) .idx-head{opacity:0;transform:translateY(28px)}
.cv-list{margin-top:72px;display:grid;gap:40px}
.cv-h{font-size:clamp(28px,3.4vw,48px);line-height:1;letter-spacing:-.01em;padding-bottom:6px;border-bottom:1px solid var(--line)}
.cv-row{grid-template-columns:64px minmax(0,2fr) minmax(0,1.3fr) minmax(0,1.2fr)!important}
.cv-row .t{color:var(--dim)}
.ft .people a[href^="#cv"]:hover{color:#fff!important;text-shadow:none!important}
.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 600ms ease}
.card video.in{opacity:1}
.pj-gal video{width:100%;height:100%;object-fit:cover;display:block}
#clock{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;font-weight:700;padding:0;font-variant-numeric:tabular-nums}
#clock .colon{animation:colonBlink 1s steps(1) infinite}
@keyframes colonBlink{50%{opacity:0}}
.pager{display:flex;gap:16px;padding:12px 0 0;margin-bottom:0;font-weight:700}
.pager button{padding:1px 4px;margin:0;color:var(--dim)}
.pager button:hover{color:var(--fg)}
.pager button.on{background:#fff;color:#000}
.press .h{display:flex;align-items:center;justify-content:space-between}
.parr{display:flex;gap:6px}
.parr button{width:28px;height:22px;padding:0;margin:0;background:#fff;color:#000;font:inherit;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer}
.parr svg{width:10px;height:10px;fill:none;stroke:#000;stroke-width:1.2}
main{padding-bottom:0!important}
#v-about,#v-index{padding-bottom:calc(var(--ft-h,64px) + 20px)}
html,body{overscroll-behavior:none}
html,body{overflow-x:clip}
.ab dd a.fd{position:relative;display:block;width:max-content}
.ab dd a.fd::after{content:"CV";position:absolute;right:calc(100% + 12px);top:50%;font-size:clamp(26px,2.6vw,40px);line-height:.8;font-weight:700;letter-spacing:-.02em;color:#fff;opacity:0;transform:translate(-6px,-50%);transition:opacity 200ms,transform 300ms cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ab dd a.fd:hover::after{opacity:1;transform:translate(0,-50%)}
.ab dd a.fd:hover{color:var(--fg)}
.ab dd a[href^="mailto:"]{transition:color 200ms,text-shadow 250ms}
.ab dd a[href^="mailto:"]:hover{color:#5b86f0;text-shadow:0 0 3px rgba(30,80,220,.75),0 0 10px rgba(30,80,220,.5),0 0 20px rgba(30,80,220,.3)}
.ab dt,.ab dd small{color:#9a9a9a!important;transition:none}
.ab dd,.ab dd a.fd,.ab dd a.fd span{color:#fff!important;opacity:1!important}
#v-about .idx-wrap{display:flex;flex-direction:column;min-height:calc(100vh - var(--ft-h,64px) - 20px)}
#v-about .ab{flex:1 0 auto;grid-template-rows:auto 1fr}
#v-about .press{align-self:end;margin-top:64px}
.pj-gal img,.pj-gal video{height:auto}
.idx-pv,.idx-bg,.idx-fl{display:none!important}
.idx-body{grid-template-columns:1fr}
.idx-row .th{display:block}
.empty{padding:12px 0;color:var(--dim)}
.cv-row .t{color:var(--fg)}
body{min-height:100vh;display:flow-root}main{display:flow-root}
.next{display:flex!important;align-items:center;gap:16px;border:0!important;padding:12px 0 0!important;margin:72px 0 0!important;font-weight:700;font-size:11px;text-transform:uppercase}
.next>span:first-child{background:#fff;color:#000;padding:1px 4px}
.next .t{font-size:11px!important;font-weight:700;color:var(--dim)}
.next .ar,.next .img{display:none!important}
.next:hover .t{color:var(--fg)}
.pj,.cv{padding-bottom:calc(var(--ft-h,64px) + 20px)}
.next{margin-top:0!important;padding-top:calc(20px + var(--pad))!important}
a[href^="mailto:"]{text-transform:lowercase!important}
.ft a[href^="mailto:"]{text-transform:uppercase!important}
.ft .copy{position:absolute;left:calc(50% + 24px);bottom:var(--pad);max-width:calc(50% - 24px - 260px);display:grid;gap:3px;font-weight:400;color:#bdbdbd;opacity:0;transform:translateY(6px);transition:opacity 500ms ease,transform 600ms cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ft .copy.on{opacity:1;transform:none}
@media (max-width:760px){.ft .copy{display:none}}
.ft .copy{height:100%;font-size:inherit;line-height:inherit}
.ft .copy{max-width:none!important;right:auto;width:1px;overflow:visible}
.ft .copy span{white-space:nowrap!important}
.ft .copy span{max-width:var(--copy-max,40vw);overflow:hidden;text-overflow:ellipsis}
#idxList .idx-row,#idxList .idx-row:hover,#idxList:hover .idx-row:not(:hover),#idxList .idx-row.on{color:#fff!important}
#idxList .idx-row:hover>.t{color:#000!important}
#idxList .idx-row>span:nth-child(4){color:#c4c4c4!important}
#idxList .idx-row{border-bottom-color:color-mix(in oklch,var(--line) 30%,transparent)!important}
#pressList .row{border-bottom-color:color-mix(in oklch,var(--line) 30%,transparent)!important}
#pressList a.row{cursor:none}
#pressList a.row .t{justify-self:start;padding:2px 5px;margin:-2px -5px;transition:background 150ms,color 150ms}
#pressList a.row:hover{color:#fff}
#pressList a.row:hover .t{background:#fff;color:#000}
#pressList a.row>span:last-child::after{content:" ↗";opacity:.6}
/* project page heading — same language as Index / About */
#v-project .pj{padding-top:120px}
#v-project .pj-head{font-size:clamp(28px,3.4vw,48px)}
#v-project .pj-head span:last-child{font-size:clamp(14px,1.2vw,17px);font-weight:500}
#v-project .pj-row{grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,1.2fr) 64px!important;border-bottom-color:color-mix(in oklch,var(--line) 30%,transparent)!important;color:#fff}
#v-project .pj-row .t{font-weight:500}
#v-project .pj-row .loc{color:#c4c4c4}
#v-project .pj-row .y{justify-self:end}
#v-project .pj-body{margin-top:28px}
@media (max-width:760px){#v-project .pj-row{grid-template-columns:1fr 1fr!important}}
#v-work .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:760px){#v-work .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr))!important}}
#v-work .grid{grid-template-columns:1fr!important;grid-template-rows:1fr!important}
@media (max-width:760px){#v-work .grid{grid-template-columns:1fr!important;grid-template-rows:1fr!important}}
#v-work .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important}
@media (max-width:760px){#v-work .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important}}
/* project page entrance */
@keyframes pjCurtain{0%{transform:translateY(0)}100%{transform:translateY(-100%)}}
@keyframes pjRise{0%{opacity:0;transform:translateY(40px);clip-path:inset(0 0 100% 0)}100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes pjFade{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes pjLine{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
#v-project.enter::before{content:"";position:fixed;inset:0;z-index:45;background:var(--t-glow);animation:pjCurtain 900ms cubic-bezier(.77,0,.18,1) 120ms both;pointer-events:none}
#v-project.enter .pj-head{border-bottom-color:transparent!important;position:relative}
#v-project.enter .pj-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);transform-origin:left;transform:scaleX(0);animation:pjLine 1000ms cubic-bezier(.2,.7,.2,1) 700ms forwards}
#v-project.enter .pj-head>span{display:inline-block;opacity:0;animation:pjRise 1000ms cubic-bezier(.2,.7,.2,1) 650ms forwards}
#v-project.enter .pj-head>span:last-child{animation-delay:800ms}
#v-project.enter .pj-row{opacity:0;animation:pjFade 700ms ease 950ms forwards}
#v-project.enter .pj-body{opacity:0;animation:pjFade 800ms ease 1100ms forwards}
@media (prefers-reduced-motion:reduce){#v-project.enter *,#v-project.enter::before{animation:none!important;opacity:1!important}}
/* project heading stays fixed while text + images scroll beneath */
#v-project .pj{padding-top:0!important}
#v-project .pj-fix{position:sticky;top:0;z-index:3;padding-top:120px;background:var(--t-deep);transition:background-color 1000ms ease}
#v-project .pj-fix::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px;background:linear-gradient(var(--t-deep),transparent);pointer-events:none}
#v-project .pj-fix::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--pad));right:calc(-1 * var(--pad));background:inherit;z-index:-1}
#v-project .pj-body,#v-project .pj-gal,#v-project .next{position:relative;z-index:1}
#v-project .pj-fix{background:none!important;mix-blend-mode:difference;color:#fff;pointer-events:none}
#v-project .pj-fix::before,#v-project .pj-fix::after{display:none!important}
#v-project .pj-fix .pj-head,#v-project .pj-fix .pj-row,#v-project .pj-fix .pj-row .t{color:#fff!important}
#v-project .pj-fix .pj-head{border-bottom-color:rgba(255,255,255,.55)!important}
#v-project .pj-fix .pj-row{border-bottom-color:rgba(255,255,255,.22)!important}
#v-project .pj-fix .pj-row .loc{color:#c4c4c4!important}
#v-project.enter::before{display:none!important;animation:none!important}
.pj-nav2{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:calc(20px + var(--pad))}
.pj-nav2 .next{padding-top:0!important;margin:0!important}
.pj-nav2 .next.prev{flex-direction:row}
.pj-nav2 .next:not(.prev){flex-direction:row-reverse}
.pj-nav2{justify-content:flex-start!important;gap:40px!important}
.pj-nav2 .next:not(.prev){flex-direction:row-reverse!important}
@keyframes pjEmerge{0%{transform:translateY(105%)}100%{transform:translateY(0)}}
#v-project .pj-head{overflow:hidden}
#v-project.enter .pj-head::after{bottom:0!important}
#v-project.enter .pj-head>span{opacity:1!important;clip-path:none!important;animation:pjEmerge 900ms cubic-bezier(.2,.7,.2,1) 250ms both!important}
#v-project.enter .pj-head>span:last-child{animation-delay:380ms!important}
#v-project.enter .pj-head>span{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
#v-project.enter .pj-head{border-bottom-color:rgba(255,255,255,.55)!important}
#v-project.enter .pj-head::after{display:none!important}
#v-project .pj-gal figure{opacity:1!important;transform:none!important;transition:none!important}
.pj-nav2 .next .t,.pj-nav2 .next:hover .t,.pj-nav2:hover .next .t{color:#fff!important;opacity:1!important}
#v-project .pj-head>span:first-child{text-transform:uppercase}
#v-project .pj-head>span:first-child{font-weight:700}
@keyframes pjFadeOnly{0%{opacity:0}100%{opacity:1}}
#v-project.enter .pj-row{animation:pjFadeOnly 800ms ease 300ms both!important;transform:none!important}
#v-project.enter .pj-body{animation:pjFadeOnly 900ms ease 450ms both!important;transform:none!important}
#v-project .pj-body .txt,#v-project .pj-body .txt p{text-align:left;hyphens:manual}
#v-project.enter .pj-body{animation:pjFadeOnly 900ms ease 800ms both!important}
#v-project .pj-fix{display:contents!important}
#v-project .pj-head{position:sticky;top:0;z-index:3;padding-top:120px;mix-blend-mode:difference;color:#fff;pointer-events:none;overflow:visible}
#v-project .pj-row{position:relative;z-index:1;mix-blend-mode:normal}
#v-project .pj-head,#v-project.enter .pj-head{position:sticky!important;top:0!important}
@keyframes pjSnap{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
#v-project.enter .pj-row,#v-project.enter .pj-body{animation:pjSnap 260ms cubic-bezier(.16,1,.3,1) 60ms both!important}
#v-project.enter .pj-body{animation-delay:120ms!important}
.ab dd.addr{display:flex;flex-direction:column;gap:0}
.ab dd.addr span{display:block;line-height:inherit;margin:0;padding:0}
.hdr .brand{width:min(39vw,500px)!important}
.hdr .meta{font-size:14px!important}
@media (max-width:760px){.hdr .brand{width:56vw!important}.hdr .meta{font-size:13px!important}}
.ab .lead b.disc{font-weight:700;color:#fff}
.ab .lead,.ab .lead p{hyphens:manual!important;-webkit-hyphens:manual!important;word-break:normal;overflow-wrap:normal}
.ab .lead,.ab .lead p{text-align:left!important;text-align-last:auto!important}
.ft .copy,.ft .copy span{color:#c4c4c4!important}
/* contacts: the cursor lights up instead of the text */
.ft a:hover,.ft a[href^="mailto:"]:hover,.ft a.ig:hover,.ft a.in:hover,.ab dd a[href^="mailto:"]:hover{color:inherit!important;text-shadow:none!important;background:none!important;-webkit-text-fill-color:currentColor!important;filter:none!important}
.ft .people a:hover,.ft .right a:hover{color:#fff!important}
.cursor.c-tel,.cursor.c-mail,.cursor.c-ig,.cursor.c-in{mix-blend-mode:normal!important;width:14px;height:14px}
.cursor.c-tel{background:#1fa34f!important;box-shadow:0 0 6px rgba(31,163,79,.9),0 0 16px rgba(31,163,79,.55),0 0 30px rgba(31,163,79,.3)}
.cursor.c-mail{background:#2a55d6!important;box-shadow:0 0 6px rgba(42,85,214,.9),0 0 16px rgba(42,85,214,.55),0 0 30px rgba(42,85,214,.3)}
.cursor.c-ig{background:linear-gradient(45deg,#feda75,#fa7e1e 30%,#d62976 60%,#962fbf 85%,#4f5bd5)!important;box-shadow:0 0 6px rgba(214,41,118,.85),0 0 16px rgba(150,47,191,.5),0 0 30px rgba(250,126,30,.3)}
.cursor.c-in{background:#0a66c2!important;box-shadow:0 0 6px rgba(10,102,194,.9),0 0 16px rgba(10,102,194,.55),0 0 30px rgba(10,102,194,.3)}
.cursor.c-in{background:radial-gradient(circle at 35% 35%,#5aa9ff,#0a66c2 55%,#004182)!important;box-shadow:0 0 6px rgba(10,102,194,1),0 0 16px rgba(10,102,194,.75),0 0 32px rgba(10,102,194,.45),0 0 48px rgba(0,65,130,.3)!important}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
#v-index .idx-head>span:first-child{display:inline-flex;align-items:baseline;cursor:none}
#v-index .idx-q{font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;background:none;border:0;outline:0;padding:0;margin:0 0 0 .28em;width:0;caret-color:transparent;cursor:none}
#v-index .idx-q.has{margin-left:.28em}
#v-index .idx-caret{display:inline-block;width:.07em;height:.82em;margin-left:.12em;background:currentColor;align-self:center;animation:caretBlink 1s steps(1) infinite}
#v-index .idx-q:not(.has)+.idx-caret{margin-left:-.16em}
#v-index .idx-q::selection{background:#fff;color:#000}
#idxList .idx-row.hide{display:none!important}
#idxList .idx-empty{padding:12px 0;font-size:11px;font-weight:700;text-transform:uppercase;color:#c4c4c4;display:none}
#idxList.none .idx-empty{display:block}
#v-index .idx-q,#v-index .idx-q.has{margin-left:.28em!important}
#v-index .idx-q:not(.has)+.idx-caret{margin-left:0!important}
#v-index .idx-caret{margin-left:.02em!important}
#v-index .idx-caret.typing{animation:none;opacity:1}
#v-index .idx-mirror{position:absolute;visibility:hidden;white-space:pre;pointer-events:none;font:inherit;letter-spacing:inherit}
#v-index .idx-q,#v-index .idx-mirror{text-transform:uppercase!important}
#v-index .idx-q:not(.has){margin-left:0!important}
#v-index .idx-q.has{margin-left:.28em!important}
#v-index .idx-q:not(.has)+.idx-caret{margin-left:.04em!important}
#v-index .idx-q,#v-index .idx-q.has,#v-index .idx-q:not(.has){margin-left:0!important}
#v-index .idx-caret,#v-index .idx-q:not(.has)+.idx-caret{margin-left:.04em!important}
@keyframes pjSnap{0%{opacity:0}100%{opacity:1}}
#v-project.enter .pj-row,#v-project.enter .pj-body{animation:pjSnap 1ms linear 350ms both!important;transform:none!important}
#v-project.enter .pj-row,#v-project.enter .pj-body{animation:pjSnap 260ms cubic-bezier(.3,0,.2,1) 300ms both!important}
.cv-row{grid-template-columns:150px minmax(0,1.4fr) minmax(0,1fr) minmax(0,2fr)!important;align-items:baseline;border-bottom-color:color-mix(in oklch,var(--line) 30%,transparent)!important}
.cv-row .n{white-space:normal}
.cv-row .t{color:#fff!important;font-weight:700}
.cv-row .pl{color:#c4c4c4}
.cv-row .d{color:#fff;text-transform:none;font-weight:400;font-size:13px;line-height:1.35}
@media (max-width:760px){.cv-row{grid-template-columns:90px minmax(0,1fr)!important}.cv-row .pl,.cv-row .d{grid-column:2}}
#v-cv .cv-list{margin-bottom:0}
#v-cv .cv .next{margin-top:0!important;padding-top:calc(20px + var(--pad))!important}
#v-cv .cv .next{margin-top:4px!important}
.cv-row{grid-template-columns:120px minmax(0,1fr) minmax(0,1fr) minmax(0,2.3fr)!important}
.cv-row .d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.cv-row .d{white-space:normal}}
.cv-row .t,.cv-row .pl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html{overflow-x:hidden;overflow-y:auto}
body{overflow:clip;position:relative}
::selection{background:#fff;color:#000;text-shadow:none;-webkit-text-fill-color:#000}
::-moz-selection{background:#fff;color:#000;text-shadow:none}
@media (min-width:761px){#v-about .idx-head{box-sizing:border-box;min-height:var(--head-h,0)}#v-project .pj-head{box-sizing:border-box;height:var(--line-y,206px)!important;padding-top:0!important;display:flex;align-items:flex-end}}
@media (min-width:761px){.pj-nav2{display:flex!important;justify-content:space-between!important;width:100%;box-sizing:border-box}.pj-nav2 .next:not(.prev){margin-left:auto!important;text-align:right}}

/* desktop: shared vertical axis at the centre of the page */
@media (min-width:761px){
#idxList .idx-row{grid-template-columns:48px 64px calc(50% - 112px) minmax(0,1fr) minmax(0,1fr) 96px!important;column-gap:0!important}
#idxList .idx-row>span:not(.th){padding-right:16px;min-width:0}
.ab{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:0!important}
.ab .lead{max-width:min(36vw,460px)}
html .ab .lead,html .ab .lead p{text-align:left!important;text-align-last:auto!important}
.ab dl{grid-column:2}
.press .row{grid-template-columns:80px calc(50% - 80px) minmax(0,1fr) 120px!important;column-gap:0!important}
.press .row>span{padding-right:16px;min-width:0}
.ft .copy{left:50%!important}
}
.ft .copy.tight{visibility:hidden!important}
.card img,.card video{transition:filter 400ms!important}
/* Keep the preview free of the hosting toolbar. */
#nl-hud-frame{display:none!important}

/* CV: compact heading position and stable text colours. */
@media (min-width:761px){
#v-cv .cv{padding-top:calc(var(--pad) + 9vw)}
#v-cv .cv{display:flex;flex-direction:column;min-height:calc(100dvh - var(--ft-h,64px) - 20px);padding-bottom:0}
#v-cv .cv-list{margin-top:auto;padding-top:58px}
#v-cv .cv .next{padding-top:12px!important}
#v-cv .cv-h{font-size:clamp(28px,3vw,44px)}
#v-cv .cv-row{padding:5px 0 4px}
}
#v-cv .cv-row,#v-cv .cv-row:hover{color:var(--fg)}
#v-cv .pj-meta a:hover{color:inherit}
#v-cv .cv .next{margin-top:0!important}
@media(max-width:760px){#v-cv .cv .next{padding-top:32px!important}}
#v-cv .cv .next .t,#v-cv .cv .next:hover .t{color:var(--fg)}

/* Match the CV and publication gap before desktop end navigation. */
@media(min-width:761px){#v-project .pj-gal{margin-bottom:0}#v-project .pj-nav2{padding-top:12px}}

/* Index: thumbnails always in colour. */
#idxList .idx-row .th{filter:none}

/* Lighter rendering, same look: smaller grain layer, isolated fixed layers. */
body::after{inset:-10%;will-change:transform}
.cursor,.cursor-label{will-change:transform}
body::before{contain:strict}

/* While the wheel glide runs, pause the ambient drift and grain (invisible in under a second). */
html.gliding body::before,html.gliding body::after{animation-play-state:paused}

/* While the page scrolls, the grain and halo drift rest for a moment (not visible). */
html.is-scrolling body::before,html.is-scrolling body::after{animation-play-state:paused}

/* Menu: clicks just beside WORK / INDEX / ABOUT (or the clock) stay in the menu zone
   instead of reaching the image or row behind it. Invisible, same position. */
@media (min-width:761px){
.hdr .meta{pointer-events:auto;padding:16px 16px 14px 24px;margin:-18px -16px -14px -24px}
.hdr nav a{position:relative}
.hdr nav a::after{content:"";position:absolute;inset:-8px -7px}
}

/* Section titles (Index, About) fade in on arrival without sliding up:
   the slide read as the page bobbing while scrolling. */
.sec-in .idx-head,.sec-in .ab,.sec-in .idx-body{transition:opacity 700ms ease}
#v-index:not(.seen) .idx-head,#v-about:not(.seen) .idx-head{transform:none}

/* Rich text from the admin: bold reads like the highlighted disciplines, links stay discreet. */
.ab .lead strong,.ab .lead b{font-weight:700;color:#fff}
.pj-body .txt strong,.pj-body .txt b{font-weight:700}
.ab .lead em,.ab .lead i,.pj-body .txt em,.pj-body .txt i{font-style:italic}
.ab .lead u,.pj-body .txt u,.ab .lead a,.pj-body .txt a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.ab .lead mark,.pj-body .txt mark{background:#fff;color:#000;padding:0 .15em}

/* Project gallery appears all at once (see app.js): hidden while its pictures load, then a short fade. */
#v-project #pjGal figure{transition:opacity 350ms ease!important}
#v-project .pj-gal.pj-wait figure{opacity:0!important}

/* CV name sits on the text edge: the big M / P of Basel Grotesk carry 0.083em of built-in space on their
   left, which pushed the name ~8px right of "arch. Dipl.", the logo and the rest of the column. */
#v-cv .cv h1{margin-left:-.06em}

/* Grain only on the background: it sits under the page content (main), so images, plans and text stay sharp. */
body::after{z-index:0}