:root{
  --bg:#0A0A0A; --text:#EDEBE6; --soft:#BFBDB8; --meta:#96948F;
  --rule:rgba(150,148,143,.2);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'IBM Plex Mono',monospace;
  font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* ───────── NAV ───────── */
nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;
  justify-content:space-between;align-items:center;padding:22px 36px;
  background:rgba(10,10,10,.72);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rule)}
nav.floating{background:none;backdrop-filter:none;border:0}
nav .brand{font-family:'Cormorant Garamond',serif;font-size:16px;letter-spacing:.22em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap}
nav ul{display:flex;gap:26px;list-style:none}
nav a.lnk{text-decoration:none;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;opacity:.72;position:relative;padding-bottom:3px;
  transition:opacity .3s}
nav a.lnk::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--text);transition:width .45s cubic-bezier(.2,.8,.2,1)}
nav a.lnk:hover{opacity:1}
nav a.lnk:hover::after{width:100%}
nav a.lnk.on{opacity:1}

/* ───────── HOME OPENING ───────── */
#open{position:relative;height:100vh;overflow:hidden;background:#000}
#open video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;animation:cycle 44s infinite}
#open video:nth-of-type(1){animation-delay:0s}
#open video:nth-of-type(2){animation-delay:11s}
#open video:nth-of-type(3){animation-delay:22s}
#open video:nth-of-type(4){animation-delay:33s}
@keyframes cycle{0%{opacity:0}4.5%{opacity:1}22.5%{opacity:1}27%{opacity:0}100%{opacity:0}}
#open .grad{position:absolute;inset:0;z-index:2;
  background:linear-gradient(to bottom,rgba(0,0,0,.34) 0,transparent 24%,transparent 50%,rgba(0,0,0,.95) 100%)}
#lens{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(circle 420px at var(--mx,50%) var(--my,50%),
    transparent 0%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.52) 100%);
  transition:background .35s ease-out}
.tag-l{position:absolute;left:36px;bottom:36px;z-index:4;max-width:62vw}
.tag-l .name{font-family:'Cormorant Garamond',serif;font-size:21px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:300;color:#F2F0EB}
.tag-l .caption{font-size:10.5px;letter-spacing:.12em;color:#ACAAA5;margin-top:11px;
  height:15px;position:relative}
.tag-l .caption span{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;
  animation:cycle 44s infinite}
.tag-l .caption span:nth-child(1){animation-delay:0s}
.tag-l .caption span:nth-child(2){animation-delay:11s}
.tag-l .caption span:nth-child(3){animation-delay:22s}
.tag-l .caption span:nth-child(4){animation-delay:33s}
.tag-r{position:absolute;right:36px;bottom:36px;z-index:4;text-align:right;
  font-size:9.5px;letter-spacing:.26em;color:#A8A6A1;text-transform:uppercase;
  line-height:1.9}

/* ───────── PAGE ───────── */
section{max-width:1020px;margin:0 auto;padding:118px 36px}
.inner-top{padding-top:150px}
.label{font-size:10.5px;letter-spacing:.28em;color:var(--meta);text-transform:uppercase;
  margin-bottom:42px;display:flex;align-items:center;gap:14px}
.label::after{content:"";flex:1;height:1px;background:var(--rule)}

.work{border-top:1px solid var(--rule);padding:52px 0;display:grid;
  grid-template-columns:110px 1fr;gap:36px;text-decoration:none;
  opacity:0;transform:translateY(24px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1),border-color .4s}
.work.in{opacity:1;transform:none}
.work:hover{border-top-color:rgba(237,235,230,.5)}
.work .yr{font-size:11px;letter-spacing:.16em;color:var(--meta);padding-top:6px;
  transition:color .4s}
.work:hover .yr{color:var(--text)}
.work h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:29px;
  margin-bottom:9px}
.work .tech{font-size:11px;color:var(--meta);letter-spacing:.08em;margin-bottom:18px}
.work p{font-size:15px;line-height:1.85;color:var(--soft);max-width:645px}
.work em{font-style:italic;color:var(--text)}

/* work page */
header.wh{max-width:1100px;margin:0 auto;padding:150px 36px 52px}
header.wh h1{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(34px,5.4vw,58px);letter-spacing:.02em;line-height:1.1}
header.wh .sub{font-size:11px;letter-spacing:.22em;color:var(--meta);
  text-transform:uppercase;margin-top:20px;line-height:2}
.media{max-width:1400px;margin:0 auto;padding:0 36px}
.frame{position:relative;padding-top:56.25%;background:#000;margin-bottom:16px}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vcap,figcaption{font-size:10px;letter-spacing:.12em;color:var(--meta);
  margin-top:10px;text-transform:uppercase}
.vcap{margin-bottom:22px}
figure{margin:0 0 16px}
figure img{width:100%;display:block}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.square{max-width:620px;margin:0 auto}

.text{max-width:720px;margin:0 auto;padding:90px 36px 36px}
.text p{font-size:15.5px;line-height:1.95;color:var(--soft)}
.text p+p{margin-top:22px}
.text em{font-style:italic;color:var(--text)}
.text .lead{font-family:'Cormorant Garamond',serif;font-size:23px;line-height:1.6;
  color:var(--text);font-style:italic}
dl.spec{max-width:720px;margin:52px auto 0;padding:34px 36px 0;
  border-top:1px solid var(--rule);display:grid;grid-template-columns:150px 1fr;
  gap:12px 22px;font-size:12px}
dl.spec dt{color:var(--meta);text-transform:uppercase;letter-spacing:.16em;
  font-size:10px;padding-top:2px}
dl.spec dd{color:var(--soft)}
dl.spec em{font-style:italic;color:var(--text)}

/* about + cv */
.bio{font-size:15.5px;line-height:1.95;color:var(--soft);max-width:690px;
  opacity:0;transform:translateY(20px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.bio.in{opacity:1;transform:none}
.bio+.bio{margin-top:24px}
.bio em{font-style:italic;color:var(--text)}
.cv h2{font-size:10.5px;letter-spacing:.28em;color:var(--meta);text-transform:uppercase;
  margin:52px 0 20px;display:flex;align-items:center;gap:14px}
.cv h2::after{content:"";flex:1;height:1px;background:var(--rule)}
.cv h2:first-of-type{margin-top:0}
.cv .row{display:grid;grid-template-columns:96px 1fr;gap:10px 22px;
  font-size:14px;line-height:1.75;padding:7px 0;color:var(--soft)}
.cv .row .y{color:var(--meta);font-size:12px;padding-top:3px}
.cv .row em{font-style:italic;color:var(--text)}
.cv .row .curator{color:var(--meta);font-size:12.5px}

footer{border-top:1px solid var(--rule);margin-top:90px;padding:46px 36px;
  display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.22em;
  color:var(--meta);text-transform:uppercase;flex-wrap:wrap;gap:14px}
footer a{color:var(--meta);text-decoration:none;transition:color .4s}
footer a:hover{color:var(--text)}

@media(max-width:640px){
  nav{padding:15px 18px}nav ul{gap:14px}
  nav .brand{font-size:13px;letter-spacing:.16em}
  nav a.lnk{font-size:9.5px;letter-spacing:.16em}
  section{padding:84px 20px}.inner-top{padding-top:118px}
  header.wh{padding:118px 20px 36px}
  .media{padding:0 20px}.pair{grid-template-columns:1fr}
  .work{grid-template-columns:1fr;gap:10px}
  .text{padding:64px 20px 26px}
  dl.spec{grid-template-columns:1fr;gap:4px 0;padding:30px 20px 0}
  dl.spec dd{margin-bottom:12px}
  .cv .row{grid-template-columns:1fr;gap:2px}
  .tag-l{left:20px;bottom:22px;max-width:calc(100vw - 40px)}
  .tag-l .name{font-size:18px}
  .tag-l .caption{font-size:9.5px;height:42px;white-space:normal}
  .tag-l .caption span{white-space:normal;line-height:1.4}
  .tag-r{display:none}
  #lens{display:none}
}
@media(max-width:400px){
  nav{padding:13px 14px}
  nav .brand{font-size:11px;letter-spacing:.1em}
  nav ul{gap:9px}
  nav a.lnk{font-size:8px;letter-spacing:.08em}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .work,.bio,.press,.pr,.more{opacity:1;transform:none}
}

.pq{max-width:720px;margin:56px auto 0;padding:34px 36px 0;border-top:1px solid var(--rule)}
.pq blockquote{font-family:'Cormorant Garamond',serif;font-size:21px;line-height:1.55;
  font-style:italic;color:var(--text);margin-bottom:14px}
.pq .by{font-size:10px;letter-spacing:.2em;color:var(--meta);text-transform:uppercase}
.pq a{display:inline-block;margin-top:16px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--meta);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:3px}
.pq a:hover{color:var(--text)}
@media(max-width:640px){.pq{padding:30px 20px 0}}