/* fonts: self-hosted via @fontsource (League Gothic 400 only, Schibsted Grotesk 400-700) */
@font-face { font-family: 'League Gothic'; font-style: normal; font-display: swap; font-weight: 400; src:url(/assets/fonts/league-gothic-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'League Gothic'; font-style: normal; font-display: swap; font-weight: 400; src:url(/assets/fonts/league-gothic-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 400; src:url(/assets/fonts/schibsted-grotesk-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 400; src:url(/assets/fonts/schibsted-grotesk-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 500; src:url(/assets/fonts/schibsted-grotesk-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 500; src:url(/assets/fonts/schibsted-grotesk-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 600; src:url(/assets/fonts/schibsted-grotesk-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 600; src:url(/assets/fonts/schibsted-grotesk-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 700; src:url(/assets/fonts/schibsted-grotesk-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 700; src:url(/assets/fonts/schibsted-grotesk-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root{
  --black:#000;--bg:#141312;--surface:#1C1B19;--raise:#252321;--line:#2F2D2A;
  --text:#F2EFEA;--dim:#A19D96;--faint:#67635D;
  --display:"League Gothic","Arial Narrow",Impact,sans-serif;
  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --s-1:clamp(.78rem,.75rem + .12vw,.86rem);
  --s0:clamp(.98rem,.94rem + .18vw,1.08rem);
  --s1:clamp(1.18rem,1.08rem + .45vw,1.42rem);
  --s2:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);
  --s3:clamp(2.6rem,1.4rem + 5vw,5.4rem);
  --s4:clamp(3.6rem,1rem + 13vw,15rem);
  --gutter:clamp(1.15rem,4.2vw,3.75rem);--maxw:1600px;--ease:cubic-bezier(.16,.84,.3,1);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 5rem);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:var(--s0);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}
img,video{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{position:fixed;left:0;right:0;top:0;z-index:80;padding-top:env(safe-area-inset-top,0px);transition:background .35s ease,border-color .35s ease;border-bottom:1px solid transparent}
.top.solid{background:rgba(20,19,18,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--line)}
.top .wrap{height:4.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mono{font-family:var(--display);font-weight:400;font-size:1.55rem;line-height:1}
.nav{display:flex;align-items:center;gap:clamp(.9rem,2.6vw,2.2rem);font-size:var(--s-1);font-weight:500}
.nav a{color:var(--dim);transition:color .2s ease}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav .cta{color:var(--text);border:1px solid var(--line);padding:.55rem 1rem;border-radius:0;transition:all .2s ease}
.nav .cta:hover{background:var(--text);color:var(--black);border-color:var(--text)}

/* shared type */
.h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:var(--s3);line-height:.96;margin:0}
.lede{color:var(--dim);max-width:40ch;margin:clamp(1rem,1.8vw,1.4rem) 0 0}
.sec{padding-block:clamp(4.5rem,12vh,8rem)}
.sec-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 2rem;margin-bottom:clamp(2.2rem,5vh,3.5rem)}
.link{display:inline-flex;align-items:center;gap:.7rem;padding:.75rem 1.05rem;border:1px solid var(--line);font-weight:600;font-size:var(--s-1);white-space:nowrap;transition:background .3s ease,color .3s ease,border-color .3s ease}
.link::after{content:"\2192";display:inline-block;animation:nudge 3.2s var(--ease) infinite}
@keyframes nudge{0%,78%,100%{transform:none}86%{transform:translateX(5px)}}
.link:hover,.link:focus-visible{background:var(--text);color:var(--black);border-color:var(--text)}
.link:hover::after,.link:focus-visible::after{animation:none;transform:translateX(4px);transition:transform .3s var(--ease)}
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.6rem;border:1px solid var(--line);border-radius:0;font-weight:600;font-size:var(--s-1);transition:all .25s ease}
.btn:hover{background:var(--text);color:var(--black);border-color:var(--text)}
.btn .n{color:var(--faint);font-weight:400}

/* render-style placeholder imagery */
.render{position:absolute;inset:0;overflow:hidden;background:#0d0c0b}
.render .l{position:absolute;inset:0}
.render .floor{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.035))}
.render .orb{position:absolute;width:22%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)}
.render .shadow{position:absolute;width:24%;height:4%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.75),transparent 70%);transform:translateX(-50%)}
.render .tag{position:absolute;right:.9rem;top:.8rem;font-size:.7rem;color:rgba(242,239,234,.3)}

/* hero */
.hero{position:relative;height:100svh;min-height:36rem;background:var(--black);overflow:hidden;display:flex;align-items:flex-end}
.reel{position:absolute;inset:0;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.b1{width:55vmax;height:55vmax;left:-10vmax;top:-15vmax;background:radial-gradient(circle,#3a2f28,transparent 65%);animation:d1 22s ease-in-out infinite alternate}
.b2{width:45vmax;height:45vmax;right:-12vmax;top:10vmax;background:radial-gradient(circle,#1f2a33,transparent 65%);animation:d2 26s ease-in-out infinite alternate}
.b3{width:35vmax;height:35vmax;left:30vw;bottom:-18vmax;background:radial-gradient(circle,#40302a,transparent 65%);animation:d3 30s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(18vw,10vh) scale(1.15)}}
@keyframes d2{to{transform:translate(-20vw,-6vh) scale(.9)}}
@keyframes d3{to{transform:translate(-12vw,-14vh) scale(1.2)}}
.grain{position:absolute;inset:-50%;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:gr 1.2s steps(6) infinite}
@keyframes gr{0%,100%{transform:none}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(5%,-2%)}}
.reel-note{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);font-size:var(--s-1);color:rgba(242,239,234,.26);text-align:center;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 38%,transparent 62%);pointer-events:none}
.hero-in{position:relative;z-index:2;width:100%;padding-bottom:clamp(1.5rem,5vh,3.25rem)}
.name{font-family:var(--display);font-weight:400;font-size:var(--s4);line-height:.8;text-transform:uppercase;margin:0 0 .1em -.027em;display:flex;flex-wrap:wrap;column-gap:.18em}
.name span{display:block;overflow:hidden;padding:.12em 0 .16em;margin:-.12em 0 -.16em}
.name i{display:block;font-style:normal;transform:translateY(105%);animation:up 1.1s var(--ease) forwards}
.name span:nth-child(2) i{animation-delay:.09s}
@keyframes up{to{transform:none}}
.hero-meta{margin-top:clamp(1rem,2.6vh,1.6rem);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2.5rem;opacity:0;animation:fade .9s ease .55s forwards}
@keyframes fade{to{opacity:1}}
.hero-block{width:fit-content;max-width:100%}
.hero-block .hero-meta{padding-right:calc(var(--s4) * .045)}
.play{display:inline-flex;align-items:center;gap:.75rem;padding:.45rem 1.1rem .45rem .45rem;border:1px solid rgba(242,239,234,.32);color:var(--text);font-weight:600;font-size:var(--s-1);transition:background .3s ease,color .3s ease,border-color .3s ease}
.play .dot{width:2rem;height:2rem;background:var(--text);display:grid;place-items:center;transition:background .3s ease}
.play .dot::before{content:"";margin-left:3px;border-left:9px solid var(--black);border-top:6px solid transparent;border-bottom:6px solid transparent;transition:border-color .3s ease}
.play:hover,.play:focus-visible{background:var(--text);color:var(--black);border-color:var(--text)}
.play:hover .dot,.play:focus-visible .dot{background:var(--black)}
.play:hover .dot::before,.play:focus-visible .dot::before{border-left-color:var(--text)}
.role{font-size:var(--s1);font-weight:500;line-height:1.3;margin:0}
.role small{display:block;font-size:var(--s-1);color:var(--dim);font-weight:400;margin-top:.25rem}





/* statement */
.intro{border-bottom:1px solid var(--line)}
.intro-grid{padding-block:clamp(4rem,11vh,7.5rem);display:grid;gap:clamp(2.5rem,5vw,5rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.intro-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}}
.intro-main{display:grid;gap:clamp(1.6rem,4vh,2.4rem);justify-items:start}
.intro-main .sub{margin:0;color:var(--dim);max-width:44ch}
/* intro: art archive piece, framed like a gallery wall label */
.art-cycle{display:block;width:100%;max-width:25rem;justify-self:end}
@media (max-width:979px){.art-cycle{justify-self:start;max-width:22rem}}
.art-cycle-frame{position:relative;aspect-ratio:4/5;overflow:hidden;outline:1px solid transparent;outline-offset:0;transition:outline-offset .5s var(--ease),outline-color .3s ease}
.art-cycle:hover .art-cycle-frame,.art-cycle:focus-visible .art-cycle-frame{outline-color:var(--text);outline-offset:.45rem}
.art-cycle:focus-visible{outline:none}
.art-cycle-stage{position:absolute;inset:0}
.art-cycle-stage > div{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.art-cycle-stage > div.on{opacity:1}
.art-cycle-stage img{width:100%;height:100%;object-fit:cover}
.art-cycle-bar{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;background:rgba(242,239,234,.12)}
.art-cycle-bar i{display:block;height:100%;width:100%;background:var(--text);transform-origin:left;transform:scaleX(0)}
.art-cycle-bar i.run{animation:artbar var(--art-t,3.5s) linear forwards}
@keyframes artbar{to{transform:scaleX(1)}}
.art-cycle-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.9rem;font-size:var(--s-1);color:var(--dim);transition:color .3s ease}
.art-cycle-meta b{color:var(--text);font-weight:600}
.art-cycle-meta b::after{content:"\2192";display:inline-block;margin-left:.45rem;transition:transform .3s var(--ease)}
.art-cycle:hover .art-cycle-meta,.art-cycle:focus-visible .art-cycle-meta{color:var(--text)}
.art-cycle:hover .art-cycle-meta b::after,.art-cycle:focus-visible .art-cycle-meta b::after{transform:translateX(4px)}
.art-cycle-meta .n{font-variant-numeric:tabular-nums;color:var(--faint)}
.intro p.big{margin:0;font-size:clamp(1.7rem,1.1rem + 2.4vw,3.4rem);line-height:1.12;font-weight:500;letter-spacing:-.022em;max-width:24ch}
.intro .side{color:var(--dim);font-size:var(--s-1);line-height:1.6;max-width:34ch}
.intro .side p{margin:0 0 1.2rem}

/* selected work */
.sel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vh,3rem) clamp(1rem,2vw,1.6rem)}
@media (max-width:760px){.sel{grid-template-columns:minmax(0,1fr)}}
.card a{display:block}
.frame{position:relative;aspect-ratio:16/9;overflow:hidden}
.frame .render{transition:transform 1.4s var(--ease)}

.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent 55%);pointer-events:none;z-index:2}
.frame .over{position:absolute;left:clamp(1rem,2vw,1.6rem);right:clamp(1rem,2vw,1.6rem);bottom:clamp(.9rem,2vw,1.4rem);z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.frame .ttl{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.96;font-size:clamp(1.7rem,1rem + 2.2vw,3.3rem);max-width:none}
.frame .ttl.long{font-size:clamp(1.35rem,.9rem + 1.5vw,2.3rem)}
.frame .go{position:absolute;right:0;bottom:.15em;font-size:.78rem;font-weight:600;background:var(--text);color:var(--black);padding:.55rem .9rem;opacity:0;transform:translateY(6px);transition:all .35s var(--ease)}
.card a:hover .go,.card a:focus-visible .go{opacity:1;transform:none}
@media (hover:none){.frame .go{display:none}}
.card-meta{display:flex;justify-content:space-between;gap:1rem;margin-top:.9rem;font-size:var(--s-1);color:var(--dim)}
.card-meta b{color:var(--text);font-weight:600}

/* selected work: hover = the whole card is being selected */
.card a{position:relative;transition:transform .5s var(--ease),opacity .45s ease,filter .45s ease}
.frame{isolation:isolate;outline:1px solid transparent;outline-offset:0;transition:outline-offset .5s var(--ease),outline-color .3s ease}
.frame .render,.frame .yt-thumb{transition:filter .5s ease}
.card-meta{transition:color .3s ease}
@media (hover:hover){
  .card a:hover,.card a:focus-visible{transform:translateY(-.5rem)}
  .card a:hover .frame,.card a:focus-visible .frame{outline-color:var(--text);outline-offset:.55rem}
  .card a:hover .frame .render,.card a:hover .yt-thumb,.card a:focus-visible .frame .render,.card a:focus-visible .yt-thumb{filter:brightness(1.12)}
  .card a:hover .card-meta,.card a:focus-visible .card-meta{color:var(--text)}
  .sel:has(.card a:hover) .card a:not(:hover){opacity:.38;filter:saturate(.5)}
}
.card a:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){.card a:hover,.card a:focus-visible{transform:none}}

/* award badge */
.award{position:absolute;left:clamp(.8rem,1.6vw,1.2rem);top:clamp(.8rem,1.6vw,1.2rem);z-index:3;display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .75rem .35rem .45rem;border-radius:0;background:rgba(242,239,234,.95);color:#000;font-size:.74rem;font-weight:600;line-height:1}
.award svg{width:1.05rem;height:1.05rem;flex:none}
.aw-inline{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--sans);font-size:.68rem;font-weight:600;vertical-align:middle;margin-left:.6rem;padding:.22rem .55rem .22rem .35rem;border-radius:0;background:var(--text);color:#000;text-transform:none;letter-spacing:0;line-height:1}
.aw-inline svg{width:.85rem;height:.85rem}

/* art archive */
.art-year{padding-top:clamp(1.6rem,4vh,2.4rem)}
.art-year h3{font-family:var(--display);font-weight:400;font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem);line-height:1;margin:0 0 1rem;display:flex;align-items:baseline;gap:.8rem}
.art-year h3 small{font-family:var(--sans);font-size:var(--s-1);font-weight:400;color:var(--faint)}
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:clamp(.5rem,1.2vw,1rem)}
.art-tile{position:relative;aspect-ratio:4/5;overflow:hidden;display:block;width:100%}
.art-tile .render{transition:transform 1.2s var(--ease)}
.art-tile:hover .render,.art-tile:focus-visible .render{transform:scale(1.06)}
.art-tile .kind{position:absolute;left:.7rem;bottom:.6rem;z-index:2;font-size:.7rem;font-weight:600;background:rgba(0,0,0,.6);padding:.25rem .55rem;border-radius:0}
.lb{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.95);display:none;align-items:center;justify-content:center;padding:clamp(3.5rem,8vh,5rem) clamp(1rem,6vw,5rem)}
.lb.open{display:flex}
.lb-stage{position:relative;height:min(100%,calc((100vw - 8rem) * 5 / 4));aspect-ratio:4/5;max-width:100%;overflow:hidden}
.lb-cap{position:absolute;left:0;right:0;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));text-align:center;font-size:var(--s-1);color:var(--dim)}
.lb .close{position:absolute;top:calc(1.2rem + env(safe-area-inset-top,0px));right:var(--gutter);font-size:var(--s-1);font-weight:600;padding:.6rem 1.1rem;border:1px solid var(--line);border-radius:0}
.lb .close:hover{background:var(--text);color:var(--black)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:3rem;height:3rem;border:1px solid var(--line);display:grid;place-items:center;font-size:1.2rem}
.lb-nav:hover{background:var(--text);color:var(--black)}
.lb-prev{left:clamp(.5rem,2vw,1.5rem)}.lb-next{right:clamp(.5rem,2vw,1.5rem)}

/* logo wall */
.wall{background:var(--black);border-block:1px solid var(--line);padding-block:clamp(3rem,8vh,5rem);overflow:hidden}
.wall .sec-top{margin-bottom:clamp(1.8rem,4vh,2.6rem)}
/* static grid with hairlines: the 1px gap shows the grid background as lines */
.logo-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#1d1c1a;border:1px solid #1d1c1a}
@media (min-width:900px){.logo-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
.logo{background:var(--black);aspect-ratio:3/2;display:grid;place-items:center;container-type:size}
.logo img{height:auto;max-width:none;filter:brightness(0) invert(1);opacity:.62;transition:opacity .25s ease}
.logo:hover img{opacity:1}

/* services */
.svc{display:grid;gap:0;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
@media (min-width:900px){.svc{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svc > div{padding:clamp(1.6rem,3vw,2.4rem) clamp(0rem,2vw,2rem) clamp(1.6rem,3vw,2.4rem) 0;border-bottom:1px solid var(--line)}
@media (min-width:900px){.svc > div{border-bottom:0;border-right:1px solid var(--line);padding-left:clamp(1rem,2vw,2rem)}.svc > div:first-child{padding-left:0}.svc > div:last-child{border-right:0}}
.svc h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:var(--s2);line-height:.9;margin:0 0 1rem}
.svc p{margin:0 0 1.2rem;color:var(--dim);max-width:34ch}
.svc ul{list-style:none;margin:0;padding:0;font-size:var(--s-1)}
.svc li{padding-block:.55rem;border-top:1px solid var(--line)}
.formats{display:flex;flex-wrap:wrap;gap:.45rem;margin:clamp(2rem,5vh,3rem) 0 0;padding:0;list-style:none}
.formats li{padding:.5rem .95rem;border:1px solid var(--line);border-radius:0;font-size:var(--s-1);color:var(--dim)}

/* process */
.process{background:var(--surface);border-block:1px solid var(--line)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));counter-reset:s}
.steps li{counter-increment:s;padding-top:1.4rem;border-top:2px solid var(--text)}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:400;font-size:3.2rem;line-height:1;display:block;margin-bottom:1rem;color:var(--faint)}
.steps h3{margin:0 0 .5rem;font-size:var(--s1);font-weight:600}
.steps p{margin:0;color:var(--dim);font-size:var(--s-1);line-height:1.6;max-width:32ch}

/* about teaser + about page */
.ab{display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.ab{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.portrait{position:relative;aspect-ratio:4/5;overflow:hidden;margin:0;background:radial-gradient(ellipse 55% 50% at 48% 36%,#4a3b31 0%,#1b1917 72%)}
.portrait .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--s-1);color:rgba(242,239,234,.35)}
.portrait figcaption{position:absolute;left:1rem;right:1rem;bottom:.9rem;display:flex;justify-content:space-between;font-size:.74rem;color:rgba(242,239,234,.6)}
@media (min-width:980px){.v-about .portrait{position:sticky;top:6.5rem}}
.statement{font-size:clamp(1.6rem,1.1rem + 2vw,2.9rem);line-height:1.15;font-weight:500;letter-spacing:-.02em;margin:0 0 clamp(1.6rem,4vh,2.4rem);max-width:22ch}
.bio p{color:var(--dim);max-width:60ch;margin:0 0 1.1em}
.bio p strong{color:var(--text);font-weight:500}
.subhead{font-size:var(--s-1);color:var(--faint);margin:clamp(2.4rem,6vh,3.4rem) 0 1rem;font-weight:500}
.path{list-style:none;margin:0;padding:0}
.path li{display:grid;grid-template-columns:4.2rem 1fr;gap:1rem;padding-block:.95rem;border-top:1px solid var(--line)}
.path li:last-child{border-bottom:1px solid var(--line)}
.path .y{font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1.1;color:var(--dim)}
.path .t{font-size:var(--s-1);line-height:1.5}
.path .t b{display:block;font-weight:600;font-size:var(--s0);margin-bottom:.1rem}

/* index list with cursor preview */
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.index a{display:grid;grid-template-columns:4rem minmax(0,1fr) auto;gap:1rem;align-items:baseline;padding-block:clamp(.95rem,2.2vh,1.35rem);border-bottom:1px solid var(--line);transition:padding .35s var(--ease)}
.index a:hover,.index a:focus-visible{padding-left:.9rem}
.index .yr{font-size:var(--s-1);color:var(--faint)}
.index .t{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.5rem,1rem + 2vw,2.9rem);line-height:1;transition:color .2s ease}
.index .who{font-size:var(--s-1);color:var(--dim);text-align:right}
.index .who em{display:block;font-style:normal;color:var(--faint)}
.index .sel-badge{font-family:var(--sans);font-size:.68rem;font-weight:600;vertical-align:middle;margin-left:.6rem;padding:.2rem .5rem;border:1px solid var(--line);border-radius:0;color:var(--dim);text-transform:none;letter-spacing:0}
@media (max-width:620px){.index a{grid-template-columns:minmax(0,1fr);gap:.25rem}.index .yr{order:2}.index .who{text-align:left;order:3}}
.peek{position:fixed;top:0;left:0;width:24rem;aspect-ratio:16/10;overflow:hidden;pointer-events:none;opacity:0;z-index:40;transform:translate(-50%,-50%) scale(.94);transition:opacity .25s ease,transform .35s var(--ease)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none),(max-width:900px){.peek{display:none}}

/* work page tools */
.tools{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding-block:1.1rem;margin-bottom:1rem;position:sticky;top:calc(4.5rem + env(safe-area-inset-top,0px));background:var(--bg);z-index:10;border-bottom:1px solid var(--line)}
.filters{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{padding:.5rem 1rem;border-radius:0;border:1px solid var(--line);font-size:var(--s-1);font-weight:500;color:var(--dim);transition:all .2s ease}
.chip:hover{color:var(--text);border-color:var(--faint)}
.chip[aria-pressed="true"]{background:var(--text);color:var(--black);border-color:var(--text)}
.chip .n{opacity:.55;margin-left:.3rem;font-weight:400}
.search{flex:1 1 14rem;max-width:22rem;background:var(--surface);border:1px solid var(--line);border-radius:0;padding:.6rem 1.1rem;color:var(--text);font:inherit;font-size:var(--s-1)}
.search::placeholder{color:var(--faint)}
.search:focus{outline:none;border-color:var(--dim)}
.empty{padding:3rem 0;color:var(--dim)}

/* contact */
.contact{background:var(--black)}
.contact .big{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(3rem,1rem + 9vw,10rem);line-height:.84;margin:0 0 clamp(2rem,5vh,3rem)}
.contact .big a{background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;transition:background-size .6s var(--ease)}
.contact .big a:hover{background-size:100% 3px}
.crow{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));padding-top:clamp(1.8rem,4vh,2.4rem);border-top:1px solid var(--line)}
.crow h3{margin:0 0 .5rem;font-size:var(--s-1);color:var(--faint);font-weight:500}
.crow p,.crow ul{margin:0;padding:0;list-style:none}
.crow a{border-bottom:1px solid var(--line);transition:border-color .2s ease}
.crow a:hover{border-color:var(--text)}
.crow li{margin-bottom:.3rem}
.foot{background:var(--black);border-top:1px solid var(--line);font-size:var(--s-1);color:var(--faint)}
.foot .wrap{padding-block:1.6rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1.5rem}

/* views */
.view{display:none}
body[data-view="home"] .v-home,body[data-view="work"] .v-work,body[data-view="about"] .v-about,body[data-view="project"] .v-project{display:block}
.page{padding-top:calc(4.5rem + clamp(2.5rem,8vh,5rem))}

/* project */
.back{font-size:var(--s-1);color:var(--dim);display:inline-block;margin-bottom:1.6rem}
.back:hover{color:var(--text)}
.p-title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(3rem,1.2rem + 8vw,9rem);line-height:.96;margin:0}
.p-client{font-size:var(--s1);color:var(--dim);margin:clamp(1.1rem,2.4vw,1.8rem) 0 clamp(1.8rem,4vh,2.6rem)}
.player{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.pbtn{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.pbtn span{width:5rem;height:5rem;background:rgba(242,239,234,.92);display:grid;place-items:center;transition:transform .3s var(--ease)}
.pbtn:hover span{transform:scale(1.08)}
.player .src{position:absolute;right:.9rem;top:.8rem;z-index:3;font-size:.72rem;font-weight:600;background:rgba(0,0,0,.6);padding:.3rem .6rem;border-radius:0;color:var(--dim)}
.pbtn span::before{content:"";margin-left:5px;border-left:18px solid var(--black);border-top:11px solid transparent;border-bottom:11px solid transparent}
.p-body{display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:minmax(0,1fr);padding-block:clamp(2.8rem,7vh,4.5rem)}
@media (min-width:900px){.p-body:not(.tall){grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
/* tall (9:16) player: capped to the viewport on mobile; on desktop sticky on the left, head, text and facts beside it */
.p-stage.tall .player{width:100%;max-width:calc((100svh - 9rem) * var(--r));margin-inline:auto}
.p-side{display:none}
.p-stage.tall .p-side{display:grid;gap:clamp(1.6rem,4vh,2.4rem);align-content:start;margin-top:clamp(2rem,5vh,3rem)}
.p-side .p-client{margin:clamp(.8rem,1.6vw,1.2rem) 0 0}
.p-side .p-text p:first-child{max-width:40ch}
.p-body.tall .stills{margin-top:0}
.p-body.tall .stills.v{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:899px){
  .p-stage.tall{display:flex;flex-direction:column;gap:clamp(1.6rem,4vh,2.4rem)}
  .p-stage.tall .p-side{display:contents}
  .p-stage.tall #pHead{order:-1}
  .p-stage.tall #pHead .p-client{margin-bottom:0}
}
@media (min-width:900px){
  .p-stage.tall{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(2.5rem,5vw,6rem);align-items:start}
  .p-stage.tall .player{width:min(calc((100svh - 8rem) * var(--r)),40vw);max-width:none;margin:0;position:sticky;top:calc(4.5rem + 1.5rem)}
  .p-stage.tall .p-side{margin-top:0}
  .p-side .p-title{font-size:clamp(3rem,1rem + 4.6vw,7rem)!important}
}
.facts{margin:0;display:grid;gap:1.1rem;align-content:start}
.facts div{padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.facts dt{font-size:.74rem;color:var(--faint);margin-bottom:.25rem}
.facts dd{margin:0}
.tracks-wrap{margin-top:clamp(1.4rem,3vh,2rem)}
.tracks-wrap:empty{display:none}
.tracks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:.5rem;counter-reset:tr}
.tracks li{counter-increment:tr}
.tracks button{width:100%;text-align:left;display:grid;grid-template-columns:2.2rem 1fr;column-gap:.4rem;padding:.8rem .9rem;border:1px solid var(--line);transition:all .2s ease}
.tracks button::before{content:counter(tr, decimal-leading-zero);grid-row:span 2;font-size:var(--s-1);color:var(--faint);padding-top:.1rem}
.tracks .tt{font-weight:600}
.tracks .tf{font-size:.76rem;color:var(--dim)}
.tracks button[data-yt]:hover{border-color:var(--faint)}
.tracks button[aria-current="true"]{background:var(--text);color:var(--black);border-color:var(--text)}
.tracks button[aria-current="true"] .tf,.tracks button[aria-current="true"]::before{color:#555}
.tracks button:disabled{opacity:.4;cursor:default}
.facts .me dt{color:var(--text);font-size:var(--s-1);font-weight:600;margin-bottom:.3rem}
.facts .me dd{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.6rem,1.1rem + 1.4vw,2.4rem);line-height:.95}
.facts .credits > dd > dl{margin:.4rem 0 0;display:grid;gap:.55rem}
.facts .credits > dd > dl > div{display:grid;grid-template-columns:minmax(7rem,40%) 1fr;gap:.8rem;padding:0;border:0;font-size:var(--s-1)}
.facts .credits > dd > dl dt{margin:0}
.facts .credits > dd > dl dd{color:var(--dim)}
.facts .credits > dd > dl > div:first-child dd{color:var(--text)}
.p-text p{font-size:var(--s1);line-height:1.5;max-width:44ch;margin:0 0 1em}
.p-text p + p{font-size:var(--s0);color:var(--dim);max-width:60ch}
.stills{display:grid;gap:clamp(.6rem,1.4vw,1.1rem);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2rem}
.stills .s{position:relative;aspect-ratio:16/10;overflow:hidden;margin:0}
.stills .s:first-child,.stills .s:last-child:nth-child(even){grid-column:1/-1;aspect-ratio:21/9}
.stills .s img,.stills .s video{width:100%;height:100%;object-fit:cover;background:#000}
/* vertical (social) clips: one row of 9:16 */
.stills.v{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.stills.v{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stills.v .s,.stills.v .s:first-child,.stills.v .s:last-child:nth-child(even){grid-column:auto;aspect-ratio:9/16}
.stills .s figcaption{position:absolute;left:.8rem;bottom:.7rem;font-size:.72rem;font-weight:600;background:rgba(0,0,0,.6);padding:.3rem .6rem}
.facts .links a{display:inline-block;margin-right:1rem;border-bottom:1px solid var(--line);transition:border-color .2s ease}
.facts .links a:hover{border-color:var(--text)}
.facts .links a::after{content:" \2197";color:var(--faint)}
.next{display:block;border-top:1px solid var(--line);padding-block:clamp(2.5rem,7vh,4rem)}
.next small{display:block;font-size:var(--s-1);color:var(--faint);margin-bottom:.6rem}
.next strong{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.4rem,1rem + 6vw,6.5rem);line-height:.96;display:block;transition:color .25s ease}
.next:hover strong{color:var(--dim)}


/* YouTube: thumbnails + lite-youtube-embed player (adapted from lite-yt-embed.css 0.3.4) */
.yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform 1.4s var(--ease)}
/* animated thumbnail: fades in over the cover still while hovered (cards, cursor preview) */
.hover-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .35s ease;pointer-events:none}
.hover-clip.on{opacity:1}

lite-youtube{position:absolute;inset:0;z-index:2;display:block;contain:content;background-color:transparent;background-position:center;background-size:cover;cursor:pointer}
lite-youtube::before{content:"";position:absolute;inset:0 0 auto 0;height:40%;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);pointer-events:none}
lite-youtube > iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
lite-youtube > .lyt-playbtn{position:absolute;inset:0;width:100%;height:100%;z-index:1;border:0;cursor:pointer;background:no-repeat center/5rem 5rem url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><rect width='80' height='80' fill='%23F2EFEA' fill-opacity='.92'/><path d='M33 26l22 14-22 14z' fill='%23000'/></svg>");transition:transform .3s var(--ease)}
lite-youtube:hover > .lyt-playbtn{transform:scale(1.06)}
lite-youtube.lyt-activated::before,lite-youtube.lyt-activated > .lyt-playbtn{opacity:0;pointer-events:none}
lite-youtube.lyt-activated{cursor:unset}
.lyt-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap}

/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.modal.open{display:flex}
.modal .player{width:min(100%,calc((100vh - 8rem) * 16 / 9))}
.modal .close{position:absolute;top:calc(1.2rem + env(safe-area-inset-top,0px));right:var(--gutter);font-size:var(--s-1);font-weight:600;padding:.6rem 1.1rem;border:1px solid var(--line);border-radius:0}
.modal .close:hover{background:var(--text);color:var(--black)}
.modal .note{position:absolute;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-size:var(--s-1);color:var(--faint)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .name i{transform:none}.hero-meta{opacity:1}
}

/* lite-vimeo-embed: same look as the adapted lite-youtube (square play button, own poster underneath) */
lite-vimeo{position:absolute!important;inset:0;z-index:2;display:block;aspect-ratio:auto!important;background:transparent!important;contain:content;cursor:pointer}
lite-vimeo > iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
lite-vimeo > .ltv-playbtn{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important;border:0!important;border-radius:0!important;opacity:1!important;background:no-repeat center/5rem 5rem url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><rect width='80' height='80' fill='%23F2EFEA' fill-opacity='.92'/><path d='M33 26l22 14-22 14z' fill='%23000'/></svg>")!important;transition:transform .3s var(--ease)}
lite-vimeo:hover > .ltv-playbtn{transform:scale(1.06)!important}
lite-vimeo > .ltv-playbtn::before{display:none!important}
lite-vimeo.ltv-activated > .ltv-playbtn{opacity:0!important;pointer-events:none}
.pbtn-none{display:none}
/* real showreel footage can be bright: darken the top edge so logo and navigation stay readable */
.reel::after{content:"";position:absolute;inset:0 0 auto;height:min(11rem,30%);background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);pointer-events:none}
/* the loop is decoration: never show the browser's own play button when autoplay is blocked (poster stays) */
.reel-video{pointer-events:none}
/* videos that wait for autoplay stay invisible (poster shows as background), so a blocked autoplay never shows
   a play button; they start on the first touch */
video.wait{opacity:0}
.reel-anim{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-video,.stills video{transition:opacity .4s}
/* gallery clips are stills in motion: no native play button over the poster when a phone blocks autoplay
   (they start on the first touch; a tap opens the viewer) */
.stills video::-webkit-media-controls,.stills video::-webkit-media-controls-start-playback-button,.stills video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0}
.reel-video::-webkit-media-controls,.reel-video::-webkit-media-controls-panel,.reel-video::-webkit-media-controls-start-playback-button,.reel-video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0}
/* square gallery (stillsLayout "square", e.g. Nike artwork + shirt pairs): 2 columns, no wide first image */
.stills.sq .s,.stills.sq .s:first-child,.stills.sq .s:last-child:nth-child(even){grid-column:auto;aspect-ratio:1/1}
/* video/track buttons: every box the same height, even when a subtitle wraps onto a second line */
.tracks{grid-auto-rows:1fr}
.tracks li{display:flex}
.tracks button{height:100%;align-content:start}
/* "fSmall": one long subtitle set smaller so it stays on one line (e.g. Shockwave, Bad Bitches) */
.tracks .tf.tf-sm{font-size:.62rem;white-space:nowrap;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* /work/ intro sentence: wider, so it reads in two lines on desktop */
.v-work .lede{max-width:none}
.v-work .lede span{display:block}
.work-head{display:grid;grid-template-columns:minmax(0,1fr) min(30rem,40vw);gap:2.2rem clamp(2rem,5vw,5rem);align-items:stretch}
.work-head > div:first-child{display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.work-awards .subhead{margin:0 0 .7rem}
.work-awards li{color:var(--dim);font-size:var(--s-1)}
.work-awards li a{color:var(--text);margin-left:.35rem;border-bottom:1px solid var(--line)}
.work-awards li a:hover{border-color:var(--text)}
@media (max-width:979px){.work-head{grid-template-columns:1fr}}
.work-head .h2 .count,body[data-view="art"] .h2 .count{font-family:var(--body);font-size:var(--s-1);font-weight:500;color:var(--faint);vertical-align:top;margin-left:.6rem;letter-spacing:0;font-variant-numeric:tabular-nums}
.work-cycle{max-width:none;justify-self:stretch;align-self:end}
.work-cycle .art-cycle-frame{aspect-ratio:16/9}
.work-cycle .art-cycle-meta #wcC{color:var(--faint);font-weight:400;margin-left:.35rem}
/* long titles wrap inside a fixed two-line caption, so the tile never jumps */
.work-cycle .art-cycle-meta{align-items:flex-start;min-height:2.9em;line-height:1.45}
.work-cycle .art-cycle-meta > span:first-child{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.work-cycle .art-cycle-meta .n{flex:none;white-space:nowrap}
@media (max-width:979px){.work-cycle{max-width:none;width:100%}}
/* index rows: year, title and client vertically centred on the row (baseline put the small text at the foot of the big title) */
.index a{align-items:center}
.index .t{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem}
.index .t .aw-inline,.index .t .sel-badge{margin-left:0}
/* /work/: the sticky filter bar already draws the line, so the list starts without a second one */
.v-work .tools{margin-bottom:0}
.v-work .index{border-top:0}
/* contact: big email left, location and profiles right (fills both halves evenly) */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2.5rem clamp(2rem,6vw,6rem);align-items:start;border-top:1px solid var(--line);padding-top:clamp(1.6rem,4vh,2.4rem)}
.contact-grid h3{font-size:var(--s-1);font-weight:500;color:var(--faint);margin:0 0 .8rem}
.big-mail{font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,1rem + 3.4vw,4.2rem);line-height:1;display:inline-block;border-bottom:2px solid var(--line);padding-bottom:.15em;transition:border-color .2s ease;overflow-wrap:anywhere}
.big-mail:hover{border-color:var(--text)}
.contact-note{color:var(--dim);margin:1rem 0 0}
.contact-side{display:grid;gap:2rem}
.contact-side p{margin:0}
.profile-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.profile-row a{display:inline-block;padding:.55rem .9rem;border:1px solid var(--line);transition:border-color .2s ease}
.profile-row a:hover{border-color:var(--text)}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}
/* image boxes: plain dark ground while a cover loads (the old placeholder sphere is gone) */
.frame,.peek,.stills .s{background:var(--surface)}
/* touch screens: no hover shifts (a tap while scrolling left rows indented / tiles outlined) */
@media (hover:none){.index a:hover{padding-left:0}.art-cycle:hover .art-cycle-frame{outline-color:transparent;outline-offset:0}.art-cycle:hover .art-cycle-meta b::after{transform:none}}
/* project gallery viewer (site.js): the item fits the screen, whatever its format */
.gv .lb-stage{width:100%;height:100%;aspect-ratio:auto;display:grid;place-items:center;overflow:visible}
.gv{background:rgba(0,0,0,.97)}
.gv .lb-stage img,.gv .lb-stage video{max-width:100%;max-height:calc(100svh - 9rem);width:auto;height:auto;object-fit:contain;display:block}
.gv .lb-cap{padding-inline:var(--gutter)}
.zoomable{cursor:zoom-in}
.zoomable:focus-visible{outline:2px solid var(--text);outline-offset:3px}
@media (max-width:620px){.gv{padding:3.8rem .5rem 3.2rem}.gv .lb-nav{display:none}.gv .lb-stage img,.gv .lb-stage video{max-height:calc(100svh - 8rem)}}
/* art archive: viewer shows each work whole; grid tiles may hold a muted loop */
.lb .lb-stage{width:100%;height:100%;aspect-ratio:auto;display:grid;place-items:center;overflow:visible}
.lb .lb-stage img,.lb .lb-stage video{max-width:100%;max-height:calc(100svh - 9rem);width:auto;height:auto;object-fit:contain;display:block}
/* breathing room between the page content and the contact block (same on every page) */
.page{padding-bottom:clamp(4.5rem,12vh,8rem)}
.v-project .page{padding-bottom:0}
/* tablet (700–979): intro + art tile and portrait + bio stay side by side instead of stacking */
@media (min-width:700px) and (max-width:979px){
  .intro-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:end}
  .intro p.big{font-size:clamp(1.6rem,.9rem + 2.2vw,2.4rem)}
  .intro .art-cycle{justify-self:end;max-width:none}
  .ab{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start}
  .v-home .ab{align-items:center}
  .v-about .portrait{position:sticky;top:5.5rem}
}
.art-intro{color:var(--dim);margin:clamp(1.4rem,3vh,2rem) 0 1rem}
#artView .art-grid{margin-top:0}
.art-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* /art/ reuses the work page shell */
body[data-view="art"] .v-work{display:block}
#artView{display:grid;gap:clamp(.5rem,1.2vw,1rem)}
.art-wide{width:100%;background:var(--line)}
/* "Next project": client, category, year and role under the title, so the name has context */
.next-meta{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin-top:1rem;font-size:var(--s0, 1rem);color:var(--dim)}
.next-meta b{font-weight:500;color:var(--text, inherit)}
.art-wide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-masonry{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:clamp(.5rem,1.2vw,1rem);align-items:start}
.art-col{display:grid;gap:clamp(.5rem,1.2vw,1rem)}
.art-masonry .art-tile{background:var(--line)}
.art-masonry .art-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.art-masonry .art-tile:hover img,.art-masonry .art-tile:hover video{transform:scale(1.03)}
.art-masonry .art-tile video{transition:transform 1.2s var(--ease)}
.award-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.award-list li{display:flex;gap:.6rem;align-items:flex-start}
.award-list svg{width:1.1rem;height:1.1rem;flex:none;margin-top:.12em;color:var(--dim)}
.p-section{margin-top:clamp(2.4rem,5vh,3.4rem)}
.p-section .subhead{margin:0 0 .4rem}
.p-section-note{font-size:var(--s-1);color:var(--dim);margin:0 0 .4rem;max-width:60ch}
.p-section .stills{margin-top:.8rem}
/* portrait (4:5) clips side by side, e.g. before/after BTS */
.stills.pt{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.stills.pt .s,.stills.pt .s:first-child,.stills.pt .s:last-child:nth-child(even){grid-column:auto;aspect-ratio:4/5}
/* w169: every tile 16:9, nothing cropped from 16:9 sources (screen recordings, iterations with frame) */
.stills.w169 .s,.stills.w169 .s:first-child,.stills.w169 .s:last-child:nth-child(even){aspect-ratio:16/9}
/* natural layout: diagrams/figures shown whole (no crop), two per row */
.stills.nt .s,.stills.nt .s:first-child,.stills.nt .s:last-child:nth-child(even){grid-column:auto;aspect-ratio:auto;background:#fff}
.stills.nt .s img{height:auto;object-fit:contain}
.stills.nt .s:only-child{grid-column:1/-1}
/* mosaic: big square clip left, 2x2 squares right (e.g. Lucky Duckies) */
.stills.mo{grid-template-columns:2fr 1fr 1fr}
.stills.mo .s,.stills.mo .s:last-child:nth-child(even){grid-column:auto;aspect-ratio:1/1}
.stills.mo .s:first-child{grid-column:1;grid-row:1/span 2;aspect-ratio:auto}
@media (max-width:620px){.stills.mo{grid-template-columns:1fr 1fr}.stills.mo .s:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:1/1}}
.refs{margin-top:2.4rem}
.refs .subhead{margin:0 0 .8rem}
.refs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:.6rem}
.refs-grid figure{margin:0;display:grid;gap:.4rem;align-content:start}
.refs-grid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:#000}
.refs-grid figcaption{font-size:.72rem;color:var(--dim)}
@media (max-width:620px){.refs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stills.sq .s:only-child{grid-column:1/-1;width:100%;max-width:34rem}
/* square or near-square main video (e.g. Oryon ads): cap the height to the screen like tall videos */
.p-stage:not(.tall) #pPlayer.player{max-width:calc((100svh - 9rem) * var(--r));margin-inline:auto}
/* self-hosted main video fills the player frame */
.player>video.own{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
/* two players side by side (videosLayout "pair"), stacked on mobile; height capped to the screen */
.player-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.75rem,1.6vw,1.5rem);max-width:calc((100svh - 9rem) * 2 + 1.5rem);margin-inline:auto}
.player-pair figure{margin:0;display:grid;gap:.7rem}
.player-pair figcaption{font-size:var(--s-1);font-weight:600}
.player-pair figcaption span{font-weight:400;color:var(--dim);margin-left:.4rem}
@media (max-width:620px){.player-pair{grid-template-columns:1fr}}
/* header logo (N1NO bars + dot): same optical height as the old site header */
.logo-mark{display:inline-flex;align-items:center;color:var(--text);transition:opacity .2s ease}
.logo-mark svg{display:block;height:1.35rem;width:auto}
.logo-mark:hover{opacity:.7}
/* press list on /about/: index-row look, sized to the narrow bio column and aligned with "Path" */
/* publisher sits under the title (not in its own column): every row is its own grid, so a long publisher name
   used to squeeze that row's title into a narrow column on tablets and half-width windows */
@media (min-width:621px){.press a{grid-template-columns:4.2rem minmax(0,1fr);row-gap:.4rem}.press .who{grid-column:2;text-align:left}}
.press .t{font-size:clamp(1.2rem,1rem + .7vw,1.6rem);line-height:1.05;text-wrap:balance}
/* project links: one per line (inline links wrapped raggedly once press titles got long) */
.facts .links dd{display:grid;gap:.5rem;justify-items:start}
.facts .links a{margin-right:0;text-wrap:pretty}
/* visually hidden, for search engines and screen readers ("Nino Accardi" in every H1 without changing the look) */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* portraits: several photos crossfade slowly (like the art tile); the first is the official portrait */
.portrait .pf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.portrait .pf.on{opacity:1}