:root{
  --void:#0A0A0C;
  --raised:#141418;
  --bone:#EDEAE3;
  --fog:#8A8A90;
  --fog-dim:#4E4E54;
  --amber:#C99A3C;
  --crimson:#7A2E33;
  --crimson-bright:#B44A52;
  --line:rgba(237,234,227,0.08);
  --serif: 'Fraunces', serif;
  --sans: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scrollbar-width:thin;}

body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer;}

@media (prefers-reduced-motion: no-preference){
  .fade-in{animation:fadeIn 0.7s ease both;}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4vw,48px);
  background:rgba(10,10,12,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-mark{
  font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--bone);
  cursor:pointer;text-transform:uppercase;white-space:nowrap;
}
.nav-link{
  font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--bone);
  text-transform:uppercase;
}
.nav-right{display:flex;gap:24px;}

/* ---------- SECTION HEADER ---------- */
.filters{
  display:flex;gap:10px;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
}
.filter-tab{color:var(--fog-dim);padding:2px 0;position:relative;}
.filter-tab.active{color:var(--bone);}
.filter-tab:hover{color:var(--bone);}
.filter-sep{color:var(--fog-dim);}

.category-section{
  padding-top:56px;
}
.category-heading{
  display:flex;align-items:baseline;gap:12px;
  padding:0 clamp(20px,4vw,48px) 26px;
}
.category-heading h2{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(26px,3.4vw,40px);letter-spacing:-0.01em;
}

/* ---------- GALLERY GRID (full-bleed, 2 col) ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  background:var(--void);
}
@media (max-width:760px){ .gallery{grid-template-columns:1fr;} }

.frame{
  display:block;
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  cursor:pointer;
  background:var(--raised);
}
.frame.hidden{display:none;}

.still-inner{
  position:absolute;inset:0;
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.still-inner img, .still-inner video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.frame:hover .still-inner{transform:scale(1.045);}

.preview-video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;
  transition:opacity 0.45s ease;
  pointer-events:none;
}
.frame.video-active .preview-video{opacity:1;}

.placeholder-mark{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;letter-spacing:0.12em;
  color:var(--fog-dim);text-transform:uppercase;
}

.frame-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px 28px;
  background:linear-gradient(to top, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.15) 45%, transparent 75%);
  opacity:0;
  transition:opacity 0.4s ease;
}
.frame:hover .frame-overlay{opacity:1;}
.frame-overlay-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.frame-name{
  font-family:var(--sans);font-weight:500;font-size:clamp(20px,2.4vw,28px);
  letter-spacing:-0.005em;text-transform:uppercase;
  color:var(--bone);
}
.frame-role{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;
  color:var(--fog);text-transform:uppercase;white-space:nowrap;
}
.frame[data-accent="crimson"] .frame-role{color:var(--crimson-bright);}

/* ---------- FOOTER ---------- */
footer{
  padding:60px clamp(20px,4vw,48px) 70px;
  display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:24px;
}
.footer-left .role-line{
  font-family:var(--sans);font-weight:400;font-size:15px;color:var(--fog);
  margin-bottom:6px;
}
.footer-left .clock-line{
  font-family:var(--mono);font-size:11px;color:var(--fog-dim);letter-spacing:0.06em;
}
.footer-name{
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(28px,4vw,44px);
}
.footer-links{
  display:flex;gap:20px;flex-wrap:wrap;
}
.footer-links a{
  font-family:var(--mono);font-size:11px;color:var(--fog);letter-spacing:0.06em;
  text-transform:uppercase;
}
.footer-links a:hover{color:var(--amber);}

#home-view{padding-top:64px;}
#home-view, #detail-view, #about-view, #contact-view{display:none;}
#home-view.active, #detail-view.active, #about-view.active, #contact-view.active{display:block;}

/* ---------- DETAIL PAGE ---------- */
/* The hero is pinned to the viewport (not the document), and stays ABOVE the
   rest of the page (z-index higher than .detail-content-scroll) — it never
   gets covered as you scroll, video playing the whole time, for as long as
   you're on the page. .detail-hero-spacer reserves --hero-h worth of space in
   the document flow (the hero itself is out of flow once fixed) purely so the
   page starts below it at rest; past that, .detail-content-scroll just
   continues scrolling underneath the pinned hero, same as content scrolling
   under a fixed nav bar. The title overlay still fades out over that first
   --hero-h of scroll (see updateHeroFade() in main.js) so it doesn't linger
   once the video becomes a plain persistent banner. */
#detail-view{ --hero-h: clamp(320px, 50vh, 640px); }

.detail-hero{
  position:fixed;
  top:0; left:0; right:0;
  width:100%;
  height:var(--hero-h);
  background:var(--raised);
  overflow:hidden;
  z-index:30;
}
.detail-hero-spacer{height:var(--hero-h);}
.detail-content-scroll{
  position:relative;
  z-index:20;
  background:var(--void);
}
.detail-hero .frame-overlay{
  opacity:1;
  /* Overrides the grid tile's hover transition — this opacity is driven by
     scroll position every frame (see updateHeroFade in main.js), so a CSS
     transition on top would lag behind the scroll instead of tracking it. */
  transition:none;
  background:linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.1) 50%, transparent 80%);
  padding:32px clamp(20px,4vw,48px);
}
.detail-hero .frame-name{font-size:clamp(30px,5vw,52px);}
.detail-hero .frame-role{font-size:12px;}

/* Fixed rather than sitting in the hero, so it's still reachable after
   scrolling past the banner — the nav's "← Back" is fixed too, this is a more
   visible second way to leave the page. */
.detail-close{
  position:fixed;top:80px;right:clamp(16px,3vw,28px);z-index:55;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:24px;line-height:1;
  color:var(--bone);
  background:rgba(10,10,12,0.55);
  backdrop-filter:blur(6px);
  border:1px solid rgba(237,234,227,0.14);
  transition:background 0.25s, border-color 0.25s;
}
.detail-close:hover{background:rgba(10,10,12,0.85);border-color:var(--amber);color:var(--amber);}

.detail-body-wrap{
  max-width:720px;margin:0 auto;
  padding:64px clamp(20px,4vw,48px) 40px;
}
.detail-meta{
  display:flex;gap:32px;flex-wrap:wrap;margin-bottom:36px;
  padding-bottom:28px;border-bottom:1px solid var(--line);
}
.meta-item .label{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--fog-dim);text-transform:uppercase;margin-bottom:4px;}
.meta-item .val{font-family:var(--mono);font-size:12.5px;color:var(--bone);}
.watch-link{
  font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--bone);
  border-bottom:1px solid var(--line);
  transition:color 0.2s, border-color 0.2s;
}
.watch-link:hover{color:var(--amber);border-color:var(--amber);}
.detail-body{
  font-size:15.5px;line-height:1.8;color:var(--fog);margin-bottom:8px;
}
.detail-body p + p{margin-top:14px;}

.gated-panel{
  border:1px solid var(--crimson);padding:30px;margin-top:12px;
}
.gated-panel .g-label{
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--crimson-bright);
  text-transform:uppercase;margin-bottom:14px;
}
.gated-panel p{font-size:14px;line-height:1.7;color:var(--fog);max-width:52ch;}
.request-btn{
  display:inline-block;margin-top:20px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--bone);border:1px solid var(--fog-dim);padding:11px 18px;
  transition:border-color 0.25s, color 0.25s;
}
.request-btn:hover{border-color:var(--amber);color:var(--amber);}

.detail-footer-space{height:60px;}

/* ---------- ABOUT / CONTACT (shared page shell) ---------- */
.page-shell{
  max-width:720px;margin:0 auto;
  padding:150px clamp(20px,4vw,48px) 100px;
}
.page-shell-top{padding-bottom:0;}
.page-shell-bottom{padding-top:44px;}
.page-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--amber);
  text-transform:uppercase;margin-bottom:20px;
}
/* About */
.bio-text p{
  font-size:16px;line-height:1.85;color:var(--fog);margin-bottom:18px;max-width:60ch;
}
.bio-cta{margin-top:40px;}
.bio-cta .request-btn{margin-top:0;}

.media-collage{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:220px;
  gap:3px;
  width:100%;
}
@media (max-width:900px){
  .media-collage{grid-template-columns:repeat(3,1fr); grid-auto-rows:180px;}
}
@media (max-width:560px){
  .media-collage{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
}
.collage-item{
  position:relative;overflow:hidden;background:var(--raised);
  display:flex;align-items:center;justify-content:center;
}
.collage-item.tall{grid-row:span 2;}
.collage-item.wide{grid-column:span 2;}
.collage-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.3s ease;
}
.media-collage.grayscale .collage-item img{
  filter:grayscale(1) contrast(1.05);
}
.collage-item.clickable{cursor:zoom-in;}
.collage-item.clickable:hover img{transform:scale(1.04);opacity:0.82;}
.collage-item .placeholder-mark{position:absolute;inset:0;}

/* Contact */
/* Labels and dividers here use --fog / a lighter line tint rather than the
   site-wide --fog-dim / --line — those read as too low-contrast against the
   page background specifically in this much-emptier form layout. Scoped to
   .contact-form / .contact-direct rather than changing --line itself, so
   dividers elsewhere (detail-page meta rows, etc.) are unaffected. */
.contact-form{margin-top:8px;}
.form-row{margin-bottom:22px;}
.form-row label{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:0.1em;
  color:var(--fog);text-transform:uppercase;margin-bottom:8px;
}
.form-row input, .form-row textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(237,234,227,0.18);
  color:var(--bone);font-family:var(--sans);font-size:15px;font-weight:300;
  padding:10px 0;outline:none;transition:border-color 0.25s;
  resize:vertical;
}
.form-row input:focus, .form-row textarea:focus{border-color:var(--amber);}
.form-row textarea{min-height:110px;}
.form-row input::placeholder, .form-row textarea::placeholder{color:var(--fog-dim);}

.send-btn{
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--void);background:var(--bone);border:none;
  padding:13px 26px;cursor:pointer;transition:background 0.25s;
}
.send-btn:hover{background:var(--amber);}

.contact-direct{
  margin-top:56px;padding-top:28px;border-top:1px solid rgba(237,234,227,0.18);
  display:flex;gap:32px;flex-wrap:wrap;
}
.contact-direct .item .label{
  font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--fog);
  text-transform:uppercase;margin-bottom:6px;
}
.contact-direct .item .val{
  font-family:var(--mono);font-size:13px;color:var(--bone);
}
.contact-direct .item .val:hover{color:var(--amber);}

/* LinkedIn/Instagram: the label itself is the link (no handle line under it). */
.contact-direct .item a.link-label{display:inline-block;transition:color 0.2s;}
.contact-direct .item a.link-label:hover{color:var(--amber);}

/* ---------- DETAIL PAGE MEDIA FADE-IN ---------- */
/* The hero and every collage still load at their own pace; letting each pop in
   the instant it decodes reads as a jarring, uncoordinated flicker. Each one
   starts invisible and is faded in individually by revealMedia() in main.js
   once it's actually ready, after a brief hold. */
#detail-content .media-fade{opacity:0;}
#detail-content .media-fade.media-in{opacity:1;}
@media (prefers-reduced-motion: no-preference){
  #detail-content .media-fade.media-in{transition:opacity 0.45s ease;}
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed;inset:0;z-index:90;
  display:none;
  align-items:center;justify-content:center;
  /* Near-opaque plus a blur: at 0.96 alone the nav bar ghosted through as
     readable text behind the image. */
  background:rgba(6,6,8,0.985);
  backdrop-filter:blur(10px);
}
.lightbox.open{display:flex;}
@media (prefers-reduced-motion: no-preference){
  .lightbox.open{animation:fadeIn 0.22s ease both;}
}
.lightbox img{
  max-width:calc(100vw - 96px);
  max-height:calc(100vh - 112px);
  object-fit:contain;
  display:block;
}
/* Opened from a grayscale collage (the About BTS photos) — keep it
   black-and-white at full size too, or zooming in would suddenly reveal the
   original color and undercut that deliberate choice. */
.lightbox.mono img{filter:grayscale(1) contrast(1.05);}
.lb-btn{
  position:absolute;
  font-family:var(--mono);color:var(--fog);
  line-height:1;
  transition:color 0.2s;
}
.lb-btn:hover{color:var(--bone);}
.lb-close{top:18px;right:24px;font-size:26px;}
.lb-prev, .lb-next{
  top:50%;transform:translateY(-50%);
  font-size:40px;padding:20px 14px;
}
.lb-prev{left:10px;}
.lb-next{right:10px;}
.lb-count{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--fog-dim);
}
@media (max-width:560px){
  .lightbox img{max-width:calc(100vw - 24px);max-height:calc(100vh - 120px);}
  .lb-prev, .lb-next{font-size:30px;}
}

/* ---------- NARROW SCREENS ---------- */
/* Below ~700px the three nav groups can't share one 64px row: the mark wraps
   to three lines and the filter tabs run straight into About/Contact. Drop the
   filters (the Commercial/Film/Corporate headings down the page still work as
   navigation) and shorten the mark to just the name.
   Kept at the end of the file so it wins over the base .filters display:flex. */
@media (max-width:700px){
  .filters{display:none;}
  .nav-mark .mark-suffix{display:none;}
  .nav-right{gap:18px;}
}