/* ════════════════════════════════════════════════════════
   DESIGN TOKENS — personal variant of the EDF system
   ════════════════════════════════════════════════════════ */
:root{
  --ink:   #0B0B0C;              /* screening-room black            */
  --ink-2: #121214;              /* raised black                    */
  --bone:  #E9E6E0;              /* projector-light off-white       */
  --dim:   #8B8880;              /* secondary text                  */
  --peak:  #E8973A;              /* focus-peaking amber (accent)    */
  --hair:  rgba(233,230,224,.14);
  --mono:  "IBM Plex Mono", ui-monospace, monospace;
  --sans:  "Archivo", system-ui, sans-serif;
  --pad: clamp(20px, 4vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background:var(--ink); color:var(--bone);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--peak); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
img,video,iframe{ display:block; max-width:100%; border:0; }

.mono{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.mono strong{ color:var(--bone); font-weight:500; }

.display{
  font-family:var(--sans);
  font-variation-settings:"wdth" 118;
  font-weight:800; text-transform:uppercase;
  line-height:.92; letter-spacing:-.01em;
}

/* ════════════════════════════════════════════════════════
   VIEWFINDER HUD (shared signature)
   ════════════════════════════════════════════════════════ */
.hud{ position:fixed; inset:0; pointer-events:none; z-index:90; }
.hud .corner{ position:absolute; width:22px; height:22px; border:1px solid rgba(233,230,224,.5); }
.hud .c-tl{ top:14px; left:14px; border-right:0; border-bottom:0; }
.hud .c-tr{ top:14px; right:14px; border-left:0; border-bottom:0; }
.hud .c-bl{ bottom:14px; left:14px; border-right:0; border-top:0; }
.hud .c-br{ bottom:14px; right:14px; border-left:0; border-top:0; }

.hud-item{
  position:absolute; font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bone);
  display:flex; align-items:center; gap:10px;
}
.hud-brand{ top:26px; left:44px; pointer-events:auto; }
.hud-tc{ top:26px; right:44px; text-align:right; display:block; }
.hud-tc .fps{ display:block; color:var(--dim); font-size:9px; margin-top:3px; }
.hud-reel{ bottom:26px; left:44px; color:var(--dim); }
.hud-reel strong{ color:var(--bone); font-weight:500; }
.hud-scroll{ bottom:26px; right:44px; color:var(--dim); transition:opacity .6s; }

/* peaking dot: amber, steady (this is a monitor, not a recorder) */
.peak-dot{ width:8px; height:8px; border-radius:50%; background:var(--peak); flex:none; }

.grain{
  position:fixed; inset:-100px; z-index:80; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(4) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-40px,30px); }
  50%{ transform:translate(30px,-50px); } 75%{ transform:translate(-30px,-20px); }
  100%{ transform:translate(0,0); }
}

.loader{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:opacity .7s ease, visibility .7s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader .slate{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--dim); text-transform:uppercase; }
.loader .bar{ width:120px; height:1px; background:var(--hair); overflow:hidden; }
.loader .bar i{ display:block; height:100%; width:0%; background:var(--bone); transition:width .4s; }

/* ════════════════════════════════════════════════════════
   VIDEO SLOTS — local file OR Vimeo (data-vimeo)
   ════════════════════════════════════════════════════════ */
.slot{ position:relative; overflow:hidden; background:var(--ink-2); }
.slot-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .8s ease;
}
.slot iframe.slot-embed{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  opacity:0; transition:opacity .8s ease;
  pointer-events:none; /* background footage, not a player UI */
}
.slot.live .slot-video, .slot.live iframe.slot-embed{ opacity:1; }
.slot.live .slot-ph{ opacity:0; }

.slot-ph{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s ease;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(233,230,224,.07), transparent 55%),
    radial-gradient(100% 100% at 80% 90%, rgba(232,151,58,.05), transparent 50%),
    var(--ink-2);
}
.slot-ph::before{ content:""; position:absolute; inset:8%; border:1px dashed rgba(233,230,224,.15); }
.slot-ph::after{
  content:"+"; position:absolute; top:50%; left:50%; transform:translate(-50%,-55%);
  color:rgba(233,230,224,.3); font-family:var(--mono); font-size:18px;
}
.slot-ph .ph-label{
  position:absolute; left:10%; bottom:10%;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); line-height:1.9;
}
.slot-ph .ph-label strong{ color:var(--bone); font-weight:500; display:block; }

/* ════════════════════════════════════════════════════════
   STILL IMAGES — filmography thumbs + BTS galleries.
   Same fade-in-when-loaded language as video slots.
   ════════════════════════════════════════════════════════ */
.slot-still{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity .8s ease, transform .6s ease;
}
.slot.live .slot-still{ opacity:1; }
.filmo-thumb{ display:block; }
.filmo-thumb:hover .slot-still{ transform:scale(1.045); }

/* Masonry-style columns: each image keeps its own aspect ratio
   (width/height attributes set by site.js reserve the right box
   before it even loads) instead of being cropped into a fixed shape. */
.g-item{
  position:relative; border-radius:4px; overflow:hidden;
  background:var(--ink-2); break-inside:avoid;
  margin-bottom:clamp(10px, 1.6vw, 20px);
}
.g-img{ display:block; width:100%; height:auto; opacity:0; transition:opacity .8s ease; }
.g-item.live .g-img{ opacity:1; }
.g-item.live .slot-ph{ opacity:0; }

/* ════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding:calc(var(--pad) * 2) var(--pad) calc(var(--pad) * 1.6);
}
.hero .slot{ position:absolute; inset:0; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(11,11,12,.88) 0%, rgba(11,11,12,.15) 45%, rgba(11,11,12,.35) 100%);
}
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero h1{ font-size:clamp(48px, 11vw, 170px); }
.hero h1 .w{ display:inline-block; overflow:hidden; vertical-align:top; }
.hero h1 .w > span{ display:inline-block; }
.hero-sub{
  margin-top:28px; display:flex; flex-wrap:wrap; gap:24px;
  align-items:flex-end; justify-content:space-between;
  border-top:1px solid var(--hair); padding-top:20px;
}
.hero-sub p{ max-width:44ch; font-size:15px; }

/* ── Project-page hero: same visual language, extra controls row ── */
.proj-hero-controls{ margin-bottom:26px; }
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); transition:color .25s ease;
}
.back-link:hover{ color:var(--bone); }
.proj-hero .reel-no{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.proj-hero .reel-no i{ display:block; width:44px; height:1px; background:var(--peak); }

/* ════════════════════════════════════════════════════════
   MANIFESTO
   ════════════════════════════════════════════════════════ */
.manifesto{ padding:calc(var(--pad) * 2.4) var(--pad); }
.manifesto .kicker{ margin-bottom:38px; }
.manifesto p{
  font-family:var(--sans); font-variation-settings:"wdth" 105;
  font-weight:650; font-size:clamp(26px, 4.4vw, 62px);
  line-height:1.12; letter-spacing:-.015em; max-width:22ch;
  color:rgba(233,230,224,.22);
}
.manifesto p + p{ margin-top:.55em; }

/* ════════════════════════════════════════════════════════
   BRAND MARQUEE
   ════════════════════════════════════════════════════════ */
.marquee{
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  overflow:hidden; padding:22px 0;
}
.marquee .track{ display:flex; gap:64px; width:max-content; animation:marquee 28s linear infinite; }
.marquee span{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dim); white-space:nowrap;
}
.marquee span::after{ content:"·"; margin-left:64px; color:var(--peak); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ════════════════════════════════════════════════════════
   CHAPTERS (pinned reels)
   ════════════════════════════════════════════════════════ */
.chapter{ position:relative; }
.chapter-pin{
  height:100svh; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.chapter .slot{ position:absolute; inset:0; transform:scale(.6); border-radius:6px; }
.chapter .veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:rgba(11,11,12,.6); opacity:0;
}
.chapter-copy{
  position:relative; z-index:3; width:100%; padding:0 var(--pad);
  display:flex; flex-direction:column; gap:26px;
}
.chapter-copy .reel-no{ display:flex; align-items:center; gap:14px; }
.chapter-copy .reel-no i{ display:block; width:44px; height:1px; background:var(--peak); }
.chapter-copy h2{ font-size:clamp(40px, 8vw, 124px); max-width:12ch; }
.chapter-copy .body{
  max-width:52ch; font-size:15px;
  display:flex; flex-direction:column; gap:14px;
}
.chapter-copy .body .clients{ color:var(--dim); }
.chapter-copy .body a{
  text-decoration:underline; text-decoration-color:var(--hair);
  text-underline-offset:3px;
  transition:color .25s ease, text-decoration-color .25s ease;
}
.chapter-copy .body a:hover{ color:var(--peak); text-decoration-color:var(--peak); }

/* ════════════════════════════════════════════════════════
   FILMOGRAPHY INDEX — the personal-site centrepiece.
   A long credits list; each row carries its own still + CTA.
   ════════════════════════════════════════════════════════ */
.filmo{ padding:calc(var(--pad) * 2.4) var(--pad); }
.filmo .kicker{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:44px; }

.filmo-cat{
  display:flex; align-items:center; gap:16px;
  margin-top:64px; padding-top:8px;
}
.filmo-cat:first-of-type{ margin-top:0; }
.filmo-cat i{ display:block; width:44px; height:1px; background:var(--peak); flex:none; }
.filmo-cat b{
  font-family:var(--sans); font-variation-settings:"wdth" 112;
  font-weight:750; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(20px, 2.8vw, 32px); color:var(--bone);
}
.filmo-cat .count{ margin-left:auto; }

.filmo-item{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px, 3vw, 48px); align-items:center;
  padding:30px 0; border-top:1px solid var(--hair);
}
.filmo-item:last-child{ border-bottom:1px solid var(--hair); }
.filmo-item .slot{ aspect-ratio:16/9; border-radius:4px; }
.filmo-item h3{
  font-family:var(--sans); font-variation-settings:"wdth" 112;
  font-weight:750; text-transform:uppercase; line-height:1;
  font-size:clamp(22px, 3vw, 40px); letter-spacing:-.01em;
  margin:10px 0 12px;
}
.filmo-item p{ color:var(--dim); font-size:14px; max-width:44ch; }
.filmo-item p.tbc{ font-style:italic; color:rgba(139,136,128,.55); }
.filmo-item:nth-child(even) .filmo-meta{ order:-1; }

.view-btn{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:18px; font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bone);
  padding-bottom:3px; border-bottom:1px solid var(--hair);
  transition:color .25s ease, border-color .25s ease; width:max-content;
}
.view-btn:hover{ color:var(--peak); border-color:var(--peak); }
.view-btn .arrow{ display:inline-block; transition:transform .25s ease; }
.view-btn:hover .arrow{ transform:translateX(4px); }

/* ════════════════════════════════════════════════════════
   ABOUT
   ════════════════════════════════════════════════════════ */
.about{
  padding:calc(var(--pad) * 2.4) var(--pad);
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(28px, 5vw, 90px);
}
.about h2{ font-size:clamp(30px, 4.6vw, 66px); max-width:18ch; margin-top:18px; }
.about .facts{ display:flex; flex-direction:column; align-self:end; }
.about .fact{
  display:flex; justify-content:space-between; gap:20px;
  padding:16px 0; border-top:1px solid var(--hair); font-size:14px;
}
.about .fact:last-child{ border-bottom:1px solid var(--hair); }
.about .fact b{ font-weight:600; }
.about .fact span{ color:var(--dim); text-align:right; }

/* ════════════════════════════════════════════════════════
   PROJECT DETAIL PAGE
   ════════════════════════════════════════════════════════ */
.section-kicker{ margin-bottom:24px; }

.proj-copy{ padding:calc(var(--pad) * 2) var(--pad) calc(var(--pad) * 1.2); max-width:74ch; }
.proj-copy p{ font-size:clamp(17px, 1.8vw, 22px); line-height:1.6; }
.proj-copy p + p{ margin-top:1em; }
.proj-copy p.tbc{ font-style:italic; color:var(--dim); }
.proj-copy a{
  text-decoration:underline; text-decoration-color:var(--hair);
  text-underline-offset:3px;
  transition:color .25s ease, text-decoration-color .25s ease;
}
.proj-copy a:hover{ color:var(--peak); text-decoration-color:var(--peak); }

.proj-gallery{ padding:0 var(--pad) calc(var(--pad) * 2.4); }
.gallery-grid{
  column-count:3;
  column-gap:clamp(10px, 1.6vw, 20px);
}

/* ════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════ */
.footer{
  position:relative; min-height:92svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--pad);
}
.footer .slot{ position:absolute; inset:0; }
.footer::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(11,11,12,.92), rgba(11,11,12,.35));
}
.footer-inner{ position:relative; z-index:2; }
.footer .cta{ margin-bottom:8vh; }
.footer .cta .mono{ margin-bottom:16px; display:block; }
.footer .cta a.email{
  font-family:var(--sans); font-variation-settings:"wdth" 110;
  font-weight:750; text-transform:lowercase;
  font-size:clamp(22px, 4.4vw, 58px); letter-spacing:-.01em;
  border-bottom:2px solid var(--peak); transition:color .3s;
}
.footer .cta a.email:hover{ color:var(--peak); }
.footer .wordmark{ font-size:clamp(48px, 12.5vw, 210px); line-height:.85; margin:6vh 0 26px; }
.footer .legal{
  display:flex; flex-wrap:wrap; gap:18px 32px; justify-content:space-between;
  border-top:1px solid var(--hair); padding-top:18px;
}
.footer .legal a:hover{ color:var(--bone); }

/* ════════════════════════════════════════════════════════
   RESPONSIVE + ACCESSIBILITY
   ════════════════════════════════════════════════════════ */
:focus-visible{ outline:2px solid var(--peak); outline-offset:3px; }

@media (max-width:820px){
  .about{ grid-template-columns:1fr; }
  .filmo-item{ grid-template-columns:1fr; }
  .filmo-item:nth-child(even) .filmo-meta{ order:0; }
  .hud-reel{ display:none; }
  .hud .corner{ width:14px; height:14px; }
  .hud-brand{ left:36px; } .hud-tc{ right:36px; }
  .chapter .slot{ transform:scale(.82); }
  .gallery-grid{ column-count:2; }
}

@media (max-width:520px){
  .gallery-grid{ column-count:1; }
}

@media (prefers-reduced-motion:reduce){
  .grain{ animation:none; }
  .marquee .track{ animation:none; }
  .chapter .slot{ transform:none; }
  .manifesto p{ color:var(--bone); }
}