/* ============================================================
   ADNAN PEER MOHAMED — DESIGN STUDIO
   Cinematic dark portfolio. Mobile / iPad / desktop.
   ============================================================ */

/* ── FONTS ─────────────────────────────────────────────────
   Self-hosted from the supplied OTFs, converted to woff2.
   Glorien is a high-contrast display face with ONE light weight
   and no punctuation glyphs — it is for large uppercase titles
   only. Anything small, lowercase, or containing punctuation
   uses Avenir, which is also the display fallback.
   ────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Glorien'; font-style:normal; font-weight:400;
  font-display:swap;
  src:url('../fonts/GlorienSansSerif-FREE.woff2') format('woff2');
}
@font-face{
  font-family:'Avenir LT Std'; font-style:normal; font-weight:400;
  font-display:swap;
  src:url('../fonts/AvenirLTStd-Book.woff2') format('woff2');
}
@font-face{
  font-family:'Avenir LT Std'; font-style:normal; font-weight:500;
  font-display:swap;
  src:url('../fonts/AvenirLTStd-Roman.woff2') format('woff2');
}
@font-face{
  font-family:'Avenir LT Std'; font-style:normal; font-weight:800;
  font-display:swap;
  src:url('../fonts/AvenirLTStd-Black.woff2') format('woff2');
}

/* ── TOKENS ────────────────────────────────────────────── */
:root{
  --bg:            #050505;
  --bg-soft:       #0c0c0d;
  --ink:           #f2f0ec;
  --ink-dim:       #8d8a85;
  --ink-faint:     #4a4845;
  --line:          rgba(242,240,236,.14);
  --line-soft:     rgba(242,240,236,.07);

  /* deliberately monochrome — the only colour on the site comes from the work
     itself. Interaction is expressed through weight, dimming and motion. */
  --acc:           var(--ink);

  /* titles — always uppercase, always large */
  --display: 'Glorien', 'Avenir LT Std', 'Helvetica Neue', Arial, sans-serif;
  /* everything else: body copy, buttons, small labels */
  --body:    'Avenir LT Std', 'Helvetica Neue', Arial, sans-serif;
  --ui:      var(--body);

  --ease:    cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);

  --pad:     clamp(18px, 4vw, 56px);
  /* Card width also answers to the viewport height, so a short laptop does
     not end up with a filmstrip eating half the screen.
     The strip height is derived from the card rather than guessed, so the
     selected card at 1.35x can never be clipped at any size. A 16:11 card
     scaled 1.35 is 0.928 of its base width tall. */
  --card-w:  min(clamp(188px, 22vw, 320px), 34vh);
  --card-w-active: calc(var(--card-w) * 1.35);
  --card-gap: clamp(12px, 1.2vw, 20px);
  --strip-pad: clamp(12px, 1.8vh, 22px);
  --strip-h: calc(var(--card-w) * 0.93 + var(--strip-pad) + clamp(14px, 1.8vh, 24px));
  --chrome-h: clamp(64px, 9vh, 84px);

  --vh: 1vh;
}

/* ── RESET ─────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-loading,body.nav-open,body.lock{ overflow:hidden; }
img,video,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--acc); color:#000; }

/* thin dark scrollbar */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:#000; }
::-webkit-scrollbar-thumb{ background:#242424; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#3a3a3a; }

/* ── TYPE HELPERS ──────────────────────────────────────── */
.display{
  font-family:var(--display);
  font-weight:400;
  line-height:.9;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.label{
  font-family:var(--ui); font-size:clamp(9px,1.1vw,11px);
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim);
}
.lede{ font-size:clamp(15px,1.35vw,19px); line-height:1.65; color:#cbc8c3; font-weight:300; }

/* ── GRAIN + VIGNETTE ──────────────────────────────────── */
.grain{
  position:fixed; inset:-120px; z-index:9000; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 700ms steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:8999; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0,0,0,.55) 100%);
}

/* ── PRELOADER ─────────────────────────────────────────── */
.preloader{
  position:fixed; inset:0; z-index:9500; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(40px,10vh,90px);
}
.preloader__mark{ text-align:center; }
/* logo.png is white line art on transparent — sized by height so the
   aspect ratio is never touched */
.preloader__logo{
  display:block; margin:0 auto;
  height:clamp(78px,13vh,150px); width:auto;
}
.preloader__sub{
  display:block; margin-top:22px; font-family:var(--ui);
  font-size:clamp(8px,1.1vw,11px); letter-spacing:.42em; text-transform:uppercase; color:var(--ink-dim);
}
.preloader__meter{ width:min(330px,62vw); text-align:center; }
.preloader__count{ font-family:var(--ui); font-size:12px; letter-spacing:.2em; margin-bottom:12px; }
.preloader__track{ height:1px; background:var(--line-soft); overflow:hidden; }
.preloader__bar{ height:100%; width:0%; background:var(--ink); transition:width .18s linear; }
.preloader__curtain{
  position:absolute; inset:0; background:var(--bg); transform:translateY(100%);
}
body.preload-done .preloader{ pointer-events:none; }
body.preload-done .preloader__mark,
body.preload-done .preloader__meter{ opacity:0; transform:translateY(-14px); transition:.5s var(--ease); }
body.preload-done .preloader{ transform:translateY(-100%); transition:transform .95s var(--ease) .35s; }

/* ── CHROME ────────────────────────────────────────────── */
.chrome{
  position:fixed; top:0; left:0; right:0; z-index:600; height:var(--chrome-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  text-shadow:0 1px 14px rgba(0,0,0,.85);
}
.chrome::before{
  content:''; position:absolute; left:0; right:0; top:0; z-index:-1;
  height:calc(var(--chrome-h) * 2.1); pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.72), transparent);
}
.chrome__mark{ display:flex; align-items:center; }
/* the mark is fine 1px line art, so it needs a bit of size to stay legible */
.chrome__logo{
  height:clamp(36px,5vh,52px); width:auto;
  filter:drop-shadow(0 1px 10px rgba(0,0,0,.85));
  transition:opacity .3s var(--ease);
}
.chrome__mark:hover .chrome__logo{ opacity:.65; }
/* also reused as a generic small underlined link inside document views */
.chrome__mail{
  display:inline-block;
  font-family:var(--ui); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.35);
  transition:border-color .3s, color .3s;
}
.chrome__mail:hover{ border-color:#fff; color:#fff; }

.menuBtn{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  font-family:var(--ui); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  padding:9px 15px; border:1px solid rgba(255,255,255,.28); border-radius:2px;
  transition:border-color .3s, background .3s;
}
.menuBtn:hover{ border-color:#fff; }
.menuBtn__bars{ display:inline-flex; flex-direction:column; gap:3px; width:13px; }
.menuBtn__bars i{ display:block; height:1px; background:currentColor; transition:transform .35s var(--ease); }
body.nav-open .menuBtn__bars i:first-child{ transform:translateY(2px) rotate(45deg); }
body.nav-open .menuBtn__bars i:last-child{ transform:translateY(-2px) rotate(-45deg); }

/* ── NAV OVERLAY ───────────────────────────────────────── */
.navOverlay{
  position:fixed; inset:0; z-index:550; visibility:hidden; pointer-events:none;
}
.navOverlay__bg{
  position:absolute; inset:0; background:#000;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease);
}
.navOverlay__inner{
  position:relative; height:100%; padding:calc(var(--chrome-h) + 4vh) var(--pad) var(--pad);
  display:flex; flex-direction:column; justify-content:space-between; gap:36px;
}
body.nav-open .navOverlay{ visibility:visible; pointer-events:auto; }
body.nav-open .navOverlay__bg{ clip-path:inset(0 0 0 0); }

.navOverlay__list{ display:flex; flex-direction:column; gap:clamp(2px,1vh,10px); }
.navLink{
  position:relative; display:block; overflow:hidden;
  font-family:var(--display); font-weight:400;
  font-size:clamp(42px,9.5vw,132px); line-height:1.02; letter-spacing:.01em; text-transform:uppercase;
  color:var(--ink);
}
.navLink span{ display:block; transform:translateY(105%); transition:transform .7s var(--ease); }
body.nav-open .navLink span{ transform:translateY(0); }
body.nav-open .navLink:nth-child(1) span{ transition-delay:.18s }
body.nav-open .navLink:nth-child(2) span{ transition-delay:.25s }
body.nav-open .navLink:nth-child(3) span{ transition-delay:.32s }
body.nav-open .navLink:nth-child(4) span{ transition-delay:.39s }
.navLink::before{
  content:attr(data-i); position:absolute; top:.22em; left:0;
  font-family:var(--ui); font-size:11px; letter-spacing:.2em; color:var(--ink-faint);
  transform:translateX(-140%);
}
/* monochrome hover: hovering the list dims every item, the one under the
   cursor stays bright */
.navOverlay__list:hover .navLink{ color:var(--ink-faint); }
.navOverlay__list .navLink:hover{ color:var(--ink); }

.navOverlay__meta{
  display:flex; flex-wrap:wrap; gap:26px 48px; justify-content:space-between;
  align-items:flex-end; padding-top:22px; border-top:1px solid var(--line-soft);
  opacity:0; transform:translateY(16px); transition:.6s var(--ease) .45s;
}
body.nav-open .navOverlay__meta{ opacity:1; transform:none; }
.navOverlay__cats,.navOverlay__social{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.navOverlay__cats a,.navOverlay__social a{
  font-family:var(--ui); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .25s;
}
.navOverlay__cats a:hover,.navOverlay__social a:hover{ color:var(--ink); }

/* ── VIEW TRANSITIONS ──────────────────────────────────── */
/* NOTE: never animate transform / filter / will-change on .view — either
   would make it a containing block and break `position:fixed` for the
   stage, filmstrip and caption that live inside it. Opacity only. */
.view{ animation:viewIn .7s var(--ease) both; }
@keyframes viewIn{ from{ opacity:0 } to{ opacity:1 } }

/* ============================================================
   HOME  /  WORK  — cinematic stage + filmstrip
   ============================================================ */
.stage{
  position:fixed; inset:0; z-index:1; overflow:hidden; background:#000;
}
.stage__media{
  position:absolute; inset:0;
}
.stage__slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity .85s var(--ease-io);
}
.stage__slide.is-live{ opacity:1; }
/* Never blurred. Stills get a slow drift so they don't sit dead on screen,
   and the scrim below carries all the darkening the type needs. */
.stage__img,.stage__vid{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.82) saturate(1.04);
}
.stage__img{ transform:scale(1.02); transition:transform 11s linear; }
.stage__slide.is-live .stage__img{ transform:scale(1.1); }

/* the showreel — already graded down in the export, so it only needs a light
   touch, unlike the low-res project stills above */
.stage__reel{
  position:absolute; inset:0; opacity:0;
  transition:opacity .9s var(--ease-io);
}
.stage__reel.is-live{ opacity:1; }
.stage__reelVid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.8) saturate(1.04);
}
.stage__frame{
  position:absolute; top:50%; left:50%;
  width:100vw; height:56.25vw; min-height:100%; min-width:177.77vh;
  transform:translate(-50%,-50%); border:0; pointer-events:none;
}
.stage__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(80% 64% at 50% 46%, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 60%, transparent 100%),
    linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.42) 32%, rgba(0,0,0,.34) 58%, rgba(0,0,0,.82) 100%);
}

/* headline sitting over the stage */
/* fixed, not absolute — it lives outside .stage now, and the whole hero is
   meant to hold still while scrolling drives the filmstrip underneath it */
.stage__head{
  position:fixed; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:var(--chrome-h) var(--pad) var(--strip-h);
  pointer-events:none;
}
/* the head sits over live video, so everything in it carries its own shadow */
.stage__head *{ text-shadow:0 2px 22px rgba(0,0,0,.92), 0 0 60px rgba(0,0,0,.6); }
.stage__eyebrow{
  font-family:var(--ui); font-size:clamp(8px,1vw,11px); letter-spacing:.4em;
  text-transform:uppercase; color:#cbc7c2; margin-bottom:clamp(14px,2.4vh,26px);
}
.stage__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(40px,10vw,150px); line-height:.94; letter-spacing:.012em;
  text-transform:uppercase; text-wrap:balance;
  text-shadow:0 8px 60px rgba(0,0,0,.6);
}
.stage__title em{ font-style:normal; display:block; }
.stage__sub{
  margin-top:clamp(16px,2.6vh,30px); max-width:44ch;
  font-family:var(--ui); font-size:clamp(9px,1.05vw,11.5px);
  letter-spacing:.16em; text-transform:uppercase; color:#d2cec9;
}
/* solid white pill — Avenir, all caps */
.btn{
  pointer-events:auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--ui); font-weight:800;
  font-size:clamp(11px,1.05vw,13.5px); letter-spacing:.13em; text-transform:uppercase;
  color:#050505; background:var(--ink); border:0; border-radius:999px;
  padding:clamp(14px,1.9vh,20px) clamp(28px,3.2vw,44px);
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  transition:transform .4s var(--ease), background .35s var(--ease);
}
.btn:hover{ background:#fff; transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.stage__head .btn{ margin-top:clamp(24px,4.5vh,52px); }

/* ── HOME HERO ─────────────────────────────────────────── */
.stage__head--home{ justify-content:center; }
/* eyebrow is pinned near the top, the mark + button stay optically centred */
.stage__head--home .stage__eyebrow{
  position:absolute; left:0; right:0; margin:0;
  top:calc(var(--chrome-h) + clamp(20px,5vh,58px));
}
.stage__mark{
  height:clamp(84px,15vh,168px); width:auto;
  filter:drop-shadow(0 6px 44px rgba(0,0,0,.75));
}
/* Once the showreel hands over to the project media the opening statement
   steps aside, leaving the name, the role and the work. Scrolling back to
   the top brings it home again. */
.stage__head--home{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
.is-browsing .stage__head--home{
  opacity:0; transform:translateY(-16px); pointer-events:none;
}

.heroName,.heroRole{
  position:fixed; z-index:4; pointer-events:none;
  bottom:calc(var(--strip-h) + clamp(16px,3vh,34px));
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(26px,3.7vw,56px); line-height:.98; letter-spacing:.015em;
  text-shadow:0 2px 26px rgba(0,0,0,.92);
  max-width:40vw;
}
.heroName span,.heroRole span{ display:block; }
.heroName{ left:var(--pad); }
.heroRole{ right:var(--pad); text-align:right; }

/* ── SEE WORK ──────────────────────────────────────────────
   Sits bottom centre, between the name and the role, and only
   appears once you are actually looking at a piece. */
.seeWork{
  position:fixed; z-index:6; left:50%;
  bottom:calc(var(--strip-h) + clamp(16px,3vh,34px));
  transform:translateX(-50%);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s, transform .4s var(--ease), background .35s;
}
.is-browsing .seeWork,
.view:not(.is-home) .seeWork{ opacity:1; visibility:visible; }
.seeWork:hover{ transform:translateX(-50%) translateY(-2px); }

/* now-playing caption (bottom-left, above strip) */
.nowPlaying{
  position:fixed; z-index:4; left:var(--pad);
  bottom:calc(var(--strip-h) + 20px);
  max-width:min(380px,30vw); pointer-events:none;
  text-shadow:0 2px 18px rgba(0,0,0,.92);
  transition:opacity .5s var(--ease);
}
/* on the home page the caption moves to the centre, directly above the
   See work button, so it never fights the name in the bottom-left corner */
.is-home .nowPlaying{
  left:50%; right:auto; transform:translateX(-50%); text-align:center;
  max-width:min(560px,84vw);
  bottom:calc(var(--strip-h) + clamp(84px,11vh,124px));
}
.is-home:not(.is-browsing) .nowPlaying{ opacity:0; }
.nowPlaying__idx{
  font-family:var(--ui); font-size:10px; letter-spacing:.2em; color:var(--ink-dim);
}
.nowPlaying__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(18px,2.3vw,30px); line-height:1.06; letter-spacing:.015em; text-transform:uppercase; margin:8px 0 6px;
}
.nowPlaying__meta{ font-family:var(--ui); font-size:10px; letter-spacing:.14em; color:var(--ink-dim); text-transform:uppercase; }

/* ── FILMSTRIP ─────────────────────────────────────────── */
.strip{
  position:fixed; left:0; right:0; bottom:0; z-index:5;
  height:var(--strip-h);
  border-top:1px solid var(--line-soft);
  background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.15));
  overflow:hidden;
}
/* The rail repeats the works several times over, so it is full at both ends
   and can wrap without ever showing a gap. app.js positions it from the
   selected card's real measured position, so no padding is needed here.
   Bottom aligned: the selected card grows upward off a common baseline. */
.strip__rail{
  display:flex; align-items:flex-end; height:100%;
  gap:var(--card-gap);
  padding:0 0 var(--strip-pad);
  will-change:transform;
}
/* Width is real layout, not a transform, so the cards either side are pushed
   apart to make room instead of being covered over. */
.card{
  position:relative; flex:0 0 auto;
  width:var(--card-w); aspect-ratio:16/11;
  overflow:hidden; border-radius:2px; cursor:pointer;
  filter:grayscale(1) brightness(.5); opacity:.5;
  transition:width .5s var(--ease),filter .5s var(--ease),opacity .5s var(--ease);
  background:#111;
}
.card img{ width:100%; height:100%; object-fit:cover; }
/* the selected card: full colour, 35% wider, growing up off the baseline.
   No outline, the size and colour already say which one it is. */
.card.is-active{
  width:var(--card-w-active);
  filter:none; opacity:1; z-index:2;
  box-shadow:0 20px 56px rgba(0,0,0,.7);
}
.card:hover{ filter:none; opacity:.85; }
.card__no{
  position:absolute; top:7px; left:8px; z-index:2;
  font-family:var(--ui); font-size:9px; letter-spacing:.14em;
  color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.card__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:8px 9px;
  font-family:var(--ui); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(to top,rgba(0,0,0,.9),transparent);
  opacity:0; transform:translateY(6px); transition:.35s var(--ease);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card.is-active .card__cap,.card:hover .card__cap{ opacity:1; transform:none; }

.strip__progress{
  position:absolute; left:0; bottom:0; height:1px; background:var(--ink); width:0%;
}
.strip__hint{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%);
  font-family:var(--ui); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); pointer-events:none; display:none;
}

/* scroll driver — invisible tall element that gives us scroll distance */
.scrollDriver{ position:relative; z-index:0; }

/* ── FILTER BAR (work view) ────────────────────────────── */
.filters{
  position:fixed; z-index:6; right:var(--pad);
  bottom:calc(var(--strip-h) + 20px);
  display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end;
}
.filters button{
  font-family:var(--ui); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:8px 13px; border:1px solid var(--line); border-radius:2px;
  color:var(--ink-dim); background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
  transition:.28s var(--ease);
}
.filters button:hover{ color:var(--ink); border-color:rgba(255,255,255,.4); }
.filters button.is-on{ color:#000; background:var(--ink); border-color:var(--ink); }

/* Below ~1024px the bottom-right filter row starts colliding with the
   bottom-left now-playing caption, so it moves up under the header and
   becomes a horizontally scrollable strip. */
@media (max-width:1024px){
  .filters{
    left:var(--pad); right:var(--pad); justify-content:flex-start;
    bottom:auto; top:calc(var(--chrome-h) + 10px);
    overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; padding-bottom:2px;
  }
  .filters::-webkit-scrollbar{ display:none; }
  .filters button{ flex:0 0 auto; }
}

/* ============================================================
   DOCUMENT VIEWS (project / about / contact)
   ============================================================ */
.doc{ position:relative; z-index:10; background:var(--bg); }
.doc__inner{ max-width:1240px; margin:0 auto; padding:0 var(--pad); }

.doc__hero{
  position:relative; min-height:min(88vh,760px);
  display:flex; align-items:flex-end;
  padding:calc(var(--chrome-h) + 8vh) 0 clamp(36px,7vh,80px);
  overflow:hidden;
}
.doc__heroBg{ position:absolute; inset:0; z-index:0; }
.doc__heroBg img{
  width:100%; height:100%; object-fit:cover;
  filter:blur(14px) saturate(.9) brightness(.5); transform:scale(1.15);
}
.doc__heroBg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,var(--bg) 2%,rgba(5,5,5,.72) 45%,rgba(5,5,5,.5) 100%);
}
.doc__heroInner{ position:relative; z-index:1; width:100%; }

.backLink{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:clamp(20px,4vh,40px);
  font-family:var(--ui); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim);
  transition:color .25s;
}
.backLink:hover{ color:var(--ink); }
.backLink::before{ content:'←'; }

h1.docTitle{
  font-family:var(--display); font-weight:400; overflow-wrap:anywhere;
  font-size:clamp(34px,7vw,104px); line-height:.96; letter-spacing:.012em;
  text-transform:uppercase; text-wrap:balance;
}
.docMeta{
  display:flex; flex-wrap:wrap; gap:10px 34px; margin-top:clamp(20px,3.4vh,34px);
  padding-top:20px; border-top:1px solid var(--line);
}
.docMeta div{ min-width:110px; }
.docMeta dt{ font-family:var(--ui); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.docMeta dd{ font-size:14px; color:#ddd9d4; }

.section{ padding:clamp(46px,9vh,110px) 0; border-top:1px solid var(--line-soft); }
.section:first-of-type{ border-top:0; }
.sectionHead{ margin-bottom:clamp(24px,4vh,48px); }
.sectionHead .label{ display:block; margin-bottom:14px; }
.sectionHead h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(24px,4vw,52px); line-height:1; text-transform:uppercase; letter-spacing:.015em;
}

.videoWrap{
  position:relative; width:100%; aspect-ratio:16/9; background:#000;
  border:1px solid var(--line-soft); overflow:hidden;
}
.videoWrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.stillWrap{ border:1px solid var(--line-soft); background:#0a0a0a; overflow:hidden; }
.stillWrap img{ width:100%; height:auto; }

.prose{ max-width:66ch; }
.prose p + p{ margin-top:1.05em; }

.cols{ display:grid; gap:clamp(22px,3.5vw,54px); grid-template-columns:1fr; }
@media (min-width:860px){ .cols--2{ grid-template-columns:1.15fr .85fr; } }

.svcList{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.svcItem{ background:var(--bg); padding:clamp(20px,3vw,32px); }
.svcItem h3{
  font-family:var(--ui); font-weight:800;
  font-size:clamp(14px,1.55vw,18px); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px;
}
.svcItem p{ font-size:14px; color:var(--ink-dim); line-height:1.6; }
@media (min-width:760px){ .svcList{ grid-template-columns:1fr 1fr; } }

.portrait{ border:1px solid var(--line-soft); overflow:hidden; background:#0a0a0a; }
.portrait img{ width:100%; height:auto; filter:grayscale(.25) contrast(1.05); }

/* next / prev project */
.pager{ display:grid; gap:1px; background:var(--line-soft); border-top:1px solid var(--line-soft); }
@media (min-width:760px){ .pager{ grid-template-columns:1fr 1fr; } }
.pagerLink{
  position:relative; background:var(--bg); padding:clamp(26px,5vw,54px) var(--pad);
  display:flex; flex-direction:column; gap:10px; overflow:hidden;
  transition:background .4s;
}
.pagerLink:hover{ background:#0f0f10; }
.pagerLink .label{ color:var(--ink-faint); }
.pagerLink strong{
  font-family:var(--display); font-weight:400;
  font-size:clamp(19px,2.7vw,34px); text-transform:uppercase; line-height:1.05; letter-spacing:.015em;
}
.pagerLink--next{ text-align:right; align-items:flex-end; }

/* related grid */
.grid{
  display:grid; gap:clamp(10px,1.4vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr));
}
.tile{ position:relative; display:block; overflow:hidden; background:#0d0d0d; border:1px solid var(--line-soft); }
.tile__img{ aspect-ratio:16/11; overflow:hidden; }
.tile__img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.62); transform:scale(1.02);
  transition:filter .55s var(--ease),transform .8s var(--ease);
}
.tile:hover .tile__img img{ filter:none; transform:scale(1.09); }
.tile__body{ padding:13px 14px 16px; }
.tile__t{
  font-family:var(--ui); font-weight:800;
  font-size:12px; text-transform:uppercase; line-height:1.25; letter-spacing:.07em;
}
.tile__m{ margin-top:6px; font-family:var(--ui); font-size:9px; letter-spacing:.15em; color:var(--ink-faint); text-transform:uppercase; }

/* contact */
/* an address is data, not a title: Avenir, lower case, and allowed to wrap.
   Glorien has no '@' or '.' and would set it far too wide to fit. */
.bigMail{
  display:inline-block; max-width:100%;
  font-family:var(--ui); font-weight:500;
  font-size:clamp(19px,3.5vw,46px); line-height:1.18;
  letter-spacing:-.01em; overflow-wrap:anywhere;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .55s var(--ease);
}
.bigMail:hover{ background-size:100% 2px; }
.contactList{ display:grid; gap:1px; background:var(--line-soft); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.contactRow{
  background:var(--bg); display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline;
  padding:18px 0; transition:background .3s;
}
.contactRow .label{ flex:0 0 130px; }
.contactRow a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .45s var(--ease);
}
.contactRow a:hover{ background-size:100% 1px; }

/* footer */
.foot{
  border-top:1px solid var(--line-soft); padding:clamp(28px,5vh,54px) var(--pad);
  display:flex; flex-wrap:wrap; gap:14px 32px; justify-content:space-between; align-items:center;
  font-family:var(--ui); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
}
.foot a:hover{ color:var(--ink); }
.foot__links{ display:flex; flex-wrap:wrap; gap:18px; }

/* reveal on scroll */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }

/* ============================================================
   LIGHTBOX
   Work opens over the page rather than replacing it, so you never
   lose your place in the strip.
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:800;
  visibility:hidden; opacity:0;
  transition:opacity .4s var(--ease), visibility .4s;
}
.lb.is-open{ visibility:visible; opacity:1; }
.lb__scrim{
  position:absolute; inset:0; background:rgba(3,3,3,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.lb__panel{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  transform:translateY(18px); transition:transform .5s var(--ease);
}
.lb.is-open .lb__panel{ transform:none; }

/* toolbar */
.lb__bar{
  flex:0 0 auto; position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:clamp(12px,2vh,20px) var(--pad);
  border-bottom:1px solid var(--line-soft);
}
.lb__back,.lb__step,.lb__x{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ui); font-weight:500;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim);
  padding:10px 14px; border:1px solid var(--line); border-radius:999px;
  transition:color .25s, border-color .25s, background .25s;
  min-height:42px;
}
.lb__back{ color:var(--ink); padding-left:12px; }
.lb__back:hover,.lb__step:hover,.lb__x:hover{
  color:#000; background:var(--ink); border-color:var(--ink);
}
.lb__arrow{
  width:16px; height:1px; background:currentColor; position:relative;
}
.lb__arrow::before{
  content:''; position:absolute; left:0; top:0;
  width:7px; height:7px; border-left:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-3px) rotate(45deg);
}
.lb__nav{ display:flex; align-items:center; gap:10px; }
.lb__count{
  font-family:var(--ui); font-size:11px; letter-spacing:.16em; color:var(--ink-faint);
  min-width:74px; text-align:center;
}
.lb__x{ padding:0; width:42px; justify-content:center; font-size:20px; letter-spacing:0; }

/* body */
.lb__scroll{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(18px,3.4vh,42px) var(--pad) clamp(40px,8vh,90px);
}
.lb__media{ max-width:1180px; margin:0 auto; }
.lb__frame{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border:1px solid var(--line-soft); overflow:hidden;
}
.lb__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lb__still{ border:1px solid var(--line-soft); background:#0a0a0a; overflow:hidden; }
.lb__still img{ width:100%; height:auto; display:block; }
/* local files keep their own shape, so vertical pieces are not letterboxed
   into a 16:9 hole */
.lb__video{
  display:block; margin:0 auto; background:#000;
  max-width:100%; max-height:72vh; width:auto; height:auto;
  border:1px solid var(--line-soft);
}

.lb__info{ max-width:1180px; margin:clamp(22px,4vh,44px) auto 0; }
.lb__meta{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-dim);
}
.lb__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(26px,4.6vw,64px); line-height:1; letter-spacing:.012em;
  text-transform:uppercase; margin:14px 0 0; overflow-wrap:anywhere;
}
.lb__blurb{
  margin-top:18px; max-width:66ch;
  font-size:clamp(15px,1.3vw,18px); line-height:1.65; color:#cbc8c3;
}
.lb__links{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center;
}
.lb__role{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-dim);
}
.lb__out{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.35);
  transition:border-color .3s;
}
.lb__out:hover{ border-color:#fff; }

@media (max-width:720px){
  .lb__bar{ padding:10px var(--pad); }
  .lb__back span:last-child{ display:none; }     /* arrow only, saves width */
  .lb__back{ padding:0 14px; width:46px; justify-content:center; }
  .lb__step{ padding:10px 12px; font-size:10px; }
  .lb__count{ min-width:0; font-size:10px; }
}

/* ── CUSTOM CURSOR (pointer devices only) ──────────────── */
.cursor{ display:none; }
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:grid; place-items:center; position:fixed; top:0; left:0; z-index:9200;
    width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%;
    border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.04);
    backdrop-filter:blur(2px);
    pointer-events:none; opacity:0; transform:scale(.3);
    transition:opacity .3s,transform .35s var(--ease),background .3s;
  }
  .cursor.is-on{ opacity:1; transform:scale(1); }
  .cursor__label{
    font-family:var(--ui); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  }
}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width:900px){
  .chrome__mail{ display:none; }
  .menuBtn{ position:static; transform:none; }
}

@media (max-width:720px){
  :root{ --card-w:166px; --card-gap:11px; }
  .nowPlaying{ left:var(--pad); right:var(--pad); max-width:none; bottom:calc(var(--strip-h) + 14px); }
  /* no autoplaying video layer on phones, so the still has to carry the
     frame on its own — less blur, more light */
  .stage__img{ filter:blur(22px) saturate(1.45) brightness(.72) contrast(1.08); }
  .stage__head{
    justify-content:center;
    padding:calc(var(--chrome-h) + 2vh) var(--pad) calc(var(--strip-h) + 110px);
  }
  .stage__title{ font-size:clamp(34px,11vw,64px); }

  /* home: name and role stack above the strip instead of sitting in the
     bottom corners, which collide at phone widths */
  /* stacking order off the bottom edge on a phone:
     strip / role / name / See work / caption */
  .stage__head--home{ padding-bottom:calc(var(--strip-h) + 100px); }
  .seeWork{ bottom:calc(var(--strip-h) + 102px); }
  .stage__mark{ height:clamp(72px,13vh,110px); }
  /* on a phone there are no corners to sit in, so name and role stack
     centred above the strip as one block */
  .heroName,.heroRole{
    left:var(--pad); right:var(--pad); max-width:none; text-align:center;
    font-size:clamp(22px,6.6vw,34px);
  }
  .heroName{ bottom:calc(var(--strip-h) + 52px); }
  .heroRole{ bottom:calc(var(--strip-h) + 16px); color:var(--ink-dim); font-size:clamp(15px,4.4vw,22px); }
  .heroName span,.heroRole span{ display:inline; }
  .is-home .nowPlaying{ bottom:calc(var(--strip-h) + 158px); max-width:none; }
  .is-home.is-browsing .heroName,
  .is-home.is-browsing .heroRole{ opacity:.55; }
  .navOverlay__meta{ gap:18px; }
  .navOverlay__inner{ padding-top:calc(var(--chrome-h) + 2vh); }
  .docMeta div{ min-width:calc(50% - 17px); }
  .contactRow .label{ flex:0 0 100%; }
}

@media (max-width:400px){
  .stage__sub{ display:none; }
}

/* landscape phones — very short viewports */
@media (max-height:520px) and (orientation:landscape){
  /* card width has to come down with the strip, or the selected card at
     1.35x gets clipped by the strip's overflow */
  :root{ --card-w:120px; --card-gap:10px; --chrome-h:48px; }
  .stage__sub,.stage__eyebrow{ display:none; }
  .nowPlaying{ display:none; }
  .stage__mark{ height:64px; }
  .heroName{ bottom:calc(var(--strip-h) + 44px); font-size:22px; }
  .heroRole{ bottom:calc(var(--strip-h) + 14px); font-size:15px; }
  .seeWork{ bottom:calc(var(--strip-h) + 84px); }
}

/* ── ACCESSIBILITY ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .grain{ display:none; }
  .rv{ opacity:1; transform:none; }
}
:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }