@font-face{font-family:'Anybody';src:url(../fonts/Anybody.woff) format('woff');font-weight:100 900;font-stretch:50% 150%;font-display:swap}
:root{
  --bg:#000;--fg:#f4f3ef;--mute:#8d8c88;--rule:#262626;--panel:#111;
  --pad:4vw;--gap:clamp(4px,.6vw,9px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);overflow-x:hidden;
  font-family:'Anybody','Arial Black',Impact,sans-serif;font-weight:300;font-size:clamp(15px,1.15vw,18px);line-height:1.5}
[hidden]{display:none!important}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
main:focus{outline:none}

/* heat layer: sits between the big letters (z 1) and everything else (z 4) */
#heat{position:fixed;inset:0;width:100%;height:100%;z-index:2;mix-blend-mode:multiply;filter:blur(12px);transform:scale(1.08);pointer-events:none}
.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.2;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='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#app section>*{position:relative;z-index:4}
#app section>.hl{z-index:1}

/* navigation */
.nav{position:fixed;top:0;left:0;right:0;z-index:8;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:calc(16px + env(safe-area-inset-top,0px)) var(--pad) 16px;mix-blend-mode:difference;color:#fff;pointer-events:none}
.nav a{pointer-events:auto;text-decoration:none;font-weight:600;font-variation-settings:'wdth' 110;font-size:clamp(14px,1.2vw,17px);letter-spacing:.02em}
.nav .links{display:flex;gap:clamp(14px,2.2vw,32px)}
.nav a:hover,.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

.foot{position:relative;z-index:4;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:8vw var(--pad) calc(4vw + env(safe-area-inset-bottom,0px));color:var(--mute);font-size:.9rem}
.foot a{text-decoration:none}.foot a:hover{color:var(--fg)}

/* big heat letters */
.hl{margin:0;display:flex;flex-direction:column;align-items:center;gap:.06em;font-weight:inherit}
.line{display:flex;width:max-content;font-size:var(--fs,12vw);line-height:0;white-space:nowrap;user-select:none}
.line .c{position:relative;display:block;flex:none;height:.578em}
.line .c svg{display:block;width:100%;height:100%;overflow:visible;fill:#fff}
.line .sp{width:.2em}
.line .fb{display:flex;align-items:flex-end;justify-content:center}
.line .fb b{font:700 .76em/.578 'Arial Narrow','Helvetica Neue',Arial,sans-serif;font-stretch:condensed;color:#fff;transform:translateY(-.07em)}

section{padding:0 var(--pad)}
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2vw;padding-top:10vh;padding-bottom:6vh}
.role{margin:0;font-size:clamp(14px,1.6vw,22px);font-weight:200;letter-spacing:.04em;text-align:center}
.sec{padding-top:max(10vw,88px)}
.sec .hl{margin-bottom:5vw}
.page{padding-top:max(10vw,96px);min-height:80svh}
.page .hl{margin-bottom:5vw}

/* gallery */
.grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:var(--gap)}
.tile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;color:#fff;text-decoration:none;background:var(--panel)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile:hover img,.tile:focus-visible img{transform:scale(1.045)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:2.4rem 1.1rem 1rem;
  background:linear-gradient(transparent,rgba(0,0,0,.62))}
.tile b{font-weight:600;font-variation-settings:'wdth' 110;font-size:clamp(15px,calc(2.4vw*2/var(--cols,3)),40px);letter-spacing:.02em;line-height:1.1;color:#fff;text-shadow:0 0 18px rgba(0,0,0,.55)}
.tile .cap{inset:0;padding:1rem;display:flex;align-items:center;justify-content:center;text-align:center;background:none;z-index:2;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1;transform:none}
@media (pointer:coarse){.tile .cap{opacity:1;transform:none;align-items:flex-end;justify-content:flex-start;text-align:left;background:linear-gradient(transparent 60%,rgba(0,0,0,.6))}}
.tile.noimg{background:#0d0d0d;border:1px solid var(--rule);transition:background .3s}
.tile.noimg:hover{background:#181818}

/* filmography */
.filmo{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.filmo li{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding:clamp(12px,1.5vw,22px) 0;border-bottom:1px solid var(--rule)}
.filmo .t{font-weight:700;font-variation-settings:'wdth' 110;font-size:clamp(18px,2.4vw,38px);line-height:1.1;text-decoration:none}
.filmo a.t:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.filmo .r{color:var(--mute);text-align:right}

/* project page */
.back{display:inline-block;margin-bottom:2vw;text-decoration:none;border-bottom:1px solid currentColor;font-weight:600}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.6rem;max-width:60rem;margin:0 auto 6vw}
.meta dt{color:var(--mute);text-align:right}
.meta dd{margin:0;font-weight:600;text-align:left}
.rows{display:block}
.row{display:flex;gap:var(--gap);margin-top:var(--gap)}
.row:first-child{margin-top:0}
.im{display:block;flex:var(--ar) 1 0;min-width:0;background:var(--panel);cursor:zoom-in;overflow:hidden}
.im img{display:block;width:100%;height:auto;transition:transform .5s ease}
.im:hover img{transform:scale(1.02)}
.pn{display:flex;justify-content:space-between;gap:2rem;padding:8vw 0 0}
.pn a{text-decoration:none}
.pn small{display:block;color:var(--mute)}
.pn b{font-weight:700;font-variation-settings:'wdth' 110;font-size:clamp(18px,2.4vw,38px);line-height:1.1}
.pn a:hover b{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.pn .nx{text-align:right;margin-left:auto}

/* drawing / set slider */
.cmp{position:relative;margin:var(--gap) 0 0;aspect-ratio:var(--ar);overflow:hidden;background:#fff;touch-action:pan-y;cursor:ew-resize;user-select:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cmp .top{clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.cmp .bar{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;margin-left:-1px;background:#fff;mix-blend-mode:difference}
.cmp .knob{position:absolute;top:50%;left:var(--p,50%);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#000;color:#fff;border:1px solid #fff;display:grid;place-items:center}
.cmp .tag{position:absolute;bottom:.8rem;padding:.2rem .6rem;background:#000;color:#fff;font-size:.85rem}
.cmp .tag.l{left:.8rem}.cmp .tag.r{right:.8rem}
.cmp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0}
.cmp:focus-within{outline:2px solid #fff;outline-offset:3px}
.cmp-cap{color:var(--mute);font-size:.85rem;margin:.5rem 0 0}

/* about / contact / legal */
.about-grid{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:6vw;align-items:start}
.about-grid img{display:block;width:100%;height:auto}
.bio{margin:0 0 3rem;max-width:44rem}
.bio p{margin:0 0 1.1rem;font-size:clamp(16px,1.3vw,20px);line-height:1.6;font-weight:200;letter-spacing:.04em}
.group{margin:0 0 2.4rem}
.group h3{margin:0 0 .8rem;font-weight:700;font-variation-settings:'wdth' 110;font-size:clamp(18px,1.8vw,28px)}
.group dl{display:grid;grid-template-columns:minmax(6rem,10rem) 1fr;gap:.35rem 1.5rem;margin:0;border-top:1px solid var(--rule);padding-top:.8rem}
.group dt{color:var(--mute)}.group dd{margin:0}
.contact .btn{margin:.3rem .15rem 0}
.btn{display:inline-block;margin-top:1rem;padding:.7em 1.4em;border:1px solid #fff;border-radius:999px;text-decoration:none;font-weight:700;font-variation-settings:'wdth' 110}
.btn:hover{background:#fff;color:#000}
.big-link{display:block;font-weight:700;font-variation-settings:'wdth' 110;font-size:clamp(20px,2.4vw,36px);line-height:1.15;text-decoration:none;word-break:break-word}
.big-link:hover{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:2px}
.contact{display:grid;gap:1.8rem;max-width:60rem;margin:0 auto;text-align:center;justify-items:center}
.contact small{display:block;color:var(--mute);margin-bottom:.3rem}
.legal{max-width:50rem;margin:0 auto;font-size:clamp(11.5px,.85vw,13.5px);line-height:1.65;letter-spacing:.02em}
.legal h3{margin:2.2rem 0 .6rem;font-weight:700;font-variation-settings:'wdth' 110;font-size:1.15em;letter-spacing:.04em}
.legal h3:first-child{margin-top:0}
.legal h4{margin:1.4rem 0 .4rem;font-weight:600;font-size:1em;color:var(--mute)}
.legal p{margin:0 0 .9rem}
.legal ul{margin:0 0 .9rem;padding-left:1.1rem}
.flinks{display:flex;gap:1.4rem}

/* lightbox */
.lb{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;touch-action:pan-y pinch-zoom}
.lb-fig{margin:0;max-width:94vw;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.lb-fig img{max-width:94vw;max-height:calc(100svh - 7rem);object-fit:contain;display:block}
.lb-fig figcaption{color:#cfcec9;font-size:.95rem;text-align:center;min-height:1.4em}
.lb-btn{position:absolute;z-index:2;width:56px;height:56px;border:0;background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center}
.lb-btn:hover{background:rgba(255,255,255,.12)}
.lb-close{top:calc(10px + env(safe-area-inset-top,0px));right:10px}
.lb-prev{left:6px;top:50%;margin-top:-28px}.lb-next{right:6px;top:50%;margin-top:-28px}

@media (max-width:760px){
  .grid{grid-template-columns:repeat(var(--colsm,1),1fr)}
  .row{flex-direction:column}.row .im{flex:none;width:100%}
  .meta{gap:.45rem 1rem}
  .about-grid{grid-template-columns:1fr;gap:2rem}
  .about-grid figure{max-width:260px}
  .group dl{grid-template-columns:1fr;gap:0}.group dd{margin-bottom:.6rem}
  .filmo li{flex-direction:column;gap:.2rem}.filmo .r{text-align:left}
  .lb-prev,.lb-next{top:auto;bottom:8px;margin:0}
  .lb-fig img{max-height:calc(100svh - 10rem)}
}
@media (prefers-reduced-motion:reduce){
  .tile img,.im img{transition:none}
}