/* ============================================================
   OLD HAT — oldhat.css
   Palette, type and layout sampled directly from the
   Old Hat Tales portfolio. Cream + rust + hat-brown.
   ============================================================ */

:root{
  /* --- brand, sampled from the portfolio PDF --- */
  --cream:      #FFEFE2;
  --bone:       #F3E2D4;
  --orange:     #EB562E;   /* the loud one — "Why Old hat?" */
  --rust:       #C4551E;   /* the deep field orange */
  --ink:        #2F2420;   /* the hat brown */
  --black:      #100C0A;   /* warm cinema black, never #000 */
  --grey:       #8A776C;

  /* --- type --- */
  /* Acumin Variable Concept is an Adobe Fonts family and cannot be bundled.
     "acumin-variable-concept" is the name an Adobe Fonts web kit serves;
     "Acumin Variable Concept" matches a desktop install via local(). Anton
     stays behind both so nothing breaks before the kit is added. */
  /* ONE tracking value for every major headline. Expressed in em so it
     scales with font-size, which is what makes a 168px headline and an
     88px headline feel like the same typeface. Slightly positive: Acumin
     Variable Concept Bold Italic is wider than Anton, and negative
     tracking is what made letters collide. */
  --track-display: .008em;
  --display: "acumin-variable-concept", "Acumin Variable Concept", "Anton", "Haettenschweiler", "Impact", "Arial Narrow", sans-serif;
  --ui:      "Oswald", "Arial Narrow", sans-serif;
  --prose:   "Barlow", -apple-system, "Segoe UI", sans-serif;

  /* the title-sequence video sits on its own slightly warmer cream;
     the hero uses that exact value so no seam is ever visible */
  --film:       #FFFEEA;

  /* --- spacing system: everything derives from these --- */
  --pad:  clamp(20px, 4.5vw, 72px);   /* page margin       */
  --gut:  clamp(14px, 1.6vw, 28px);   /* grid gutter       */
  --sec:  clamp(80px, 12vw, 190px);   /* section spacing   */
  --band: clamp(48px, 7vw, 110px);    /* block spacing     */
  --head: clamp(36px, 5.5vw, 88px);   /* heading -> content*/
  --cap:  clamp(12px, 1vw, 18px);     /* frame -> metadata */
  --row:  clamp(38px, 5vw, 84px);     /* grid row rhythm   */
  --ease: cubic-bezier(.22,1,.36,1);
  --slow: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; overscroll-behavior-y:none; }

body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--prose);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.55;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9998;
  opacity:.032; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  transform:translateZ(0); backface-visibility:hidden;
}

body.is-locked{ overflow:hidden; }

img{ display:block; width:100%; height:100%; object-fit:cover; }

a{ color:inherit; text-decoration:none; }

button{
  font:inherit; color:inherit; background:none;
  border:0; padding:0; cursor:pointer;
}

::selection{ background:var(--orange); color:var(--cream); }

/* ------------------------------------------------------------
   Shared type roles
   ------------------------------------------------------------ */

/* Acumin from a desktop install, for when there is no Adobe Fonts web kit */
@font-face{
  font-family:"Acumin Variable Concept";
  /* Adobe ships this family under several names depending on whether it
     was activated through Creative Cloud desktop sync or installed
     manually, so every plausible face name is listed. */
  src:local("Acumin Variable Concept Bold Italic"),
      local("AcuminVariableConcept-BoldItalic"),
      local("Acumin Variable Concept Bold Ital"),
      local("AcuminVariableConcept-BoldItal"),
      local("Acumin Variable Concept Italic"),
      local("AcuminVariableConcept-Italic"),
      local("AcuminVariableConcept"),
      local("Acumin Variable Concept");
  font-weight:700; font-style:italic; font-display:swap;
}

.display{
  font-family:var(--display);
  font-weight:400;
  line-height:.84;
  letter-spacing:var(--track-display);
  text-transform:uppercase;
  margin:0;
}

/* the portfolio sets its section heads in a heavy oblique —
   this is that gesture, not a decoration */
.oblique{ transform:skewX(-9deg); transform-origin:left bottom; }

/* Bold Italic is applied only once Acumin has actually resolved. Setting it
   unconditionally would leave Anton — which has no bold and no italic —
   synthetically emboldened and slanted, changing every headline before the
   Adobe Fonts kit is in place. `.has-acumin` is set by the loader in
   oldhat.js after measuring real glyph widths. */
.has-acumin .display,
.has-acumin .menu__list a,
.has-acumin .detail__next b{ font-weight:700; font-style:italic; }

/* THE DOUBLE-SKEW GUARD.
   Every -9deg skew on this site is a FAUX italic, needed only because
   Anton has no italic cut. The moment the genuine Acumin Bold Italic
   resolves, that skew must come off or the headlines slant roughly
   twice as far as intended. Every skew site is listed here; if a new
   obliqued headline is ever added, add it to this list too. */
.has-acumin .oblique,
.has-acumin .hero__line,
.has-acumin .about__w,
.has-acumin .think__l i,
.has-acumin .crew__line,
.has-acumin .detail__title{ transform:none; }

.label{
  font-family:var(--ui);
  font-weight:400;
  font-size:clamp(10px,.72vw,12px);
  letter-spacing:.22em;
  text-transform:uppercase;
}

.meta{
  font-family:var(--ui);
  font-weight:300;
  font-size:clamp(12px,.85vw,14px);
  letter-spacing:.06em;
}

/* masked line reveal — the line sits in a clipped box and slides up */
.mask{ display:block; overflow:hidden; }
.mask > span{ display:block; will-change:transform; transform:translateY(108%); }
.no-gsap .mask > span{ transform:none; }

/* ------------------------------------------------------------
   Loader
   ------------------------------------------------------------ */

.loader{
  position:fixed; inset:0; z-index:9000;
  background:var(--film);
  display:grid; place-items:center;
}
.loader__mark{ overflow:hidden; }
.loader__mark img{
  width:clamp(74px,7.5vw,116px); height:auto;
  object-fit:contain; will-change:transform;
}
.loader__bar{
  position:absolute; left:var(--pad); right:var(--pad); bottom:calc(var(--pad) * .9);
  height:1px; background:rgba(47,36,32,.14);
}
.loader__bar i{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:var(--orange); display:block;
}


/* ------------------------------------------------------------
   Chrome — header, menu button, cursor
   ------------------------------------------------------------ */

.chrome{
  position:fixed; z-index:260; top:0; left:0; right:0;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:calc(var(--pad) * .62) var(--pad);
  mix-blend-mode:normal;
  pointer-events:none;
}
.chrome > *{ pointer-events:auto; }
.chrome.is-tight{ padding-top:calc(var(--pad) * .38); }
/* with the menu open the chrome floats over it — only the mark and Close stay */
.chrome.over-menu .nav a{ opacity:0; pointer-events:none; }
.chrome.over-menu .menu-btn{ color:var(--cream); }
.nav a{ transition:opacity .4s var(--ease); }

.wordmark{ display:block; line-height:0; will-change:transform; }
.wordmark{ position:relative; }
.wordmark img{
  width:clamp(38px,3.4vw,54px);
  height:auto; object-fit:contain;
  transition:opacity .5s var(--ease);
}
/* the rust field would swallow the orange mark, so a cream one crossfades in */
.wordmark__cream{ position:absolute; inset:0; opacity:0; }
.chrome.on-rust .wordmark__ink{ opacity:0; }
.chrome.on-rust .wordmark__cream{ opacity:1; }
.chrome.on-rust .nav a,
.chrome.on-rust .menu-btn{ color:var(--cream); }
.wordmark:hover img{ opacity:.7; }

.nav{ display:flex; align-items:center; gap:clamp(16px,2vw,34px); }
.nav a{
  position:relative;
  font-family:var(--ui); font-weight:300;
  font-size:clamp(11px,.78vw,13px);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream);
  padding-bottom:3px;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.menu-btn{
  font-family:var(--ui); font-weight:400;
  font-size:clamp(11px,.78vw,13px);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream);
  display:flex; align-items:center; gap:9px;
}
.menu-btn i{
  width:22px; height:7px; display:block; position:relative;
}
.menu-btn i::before,.menu-btn i::after{
  content:""; position:absolute; left:0; width:100%; height:1px;
  background:currentColor; transition:transform .5s var(--ease);
}
.menu-btn i::before{ top:0; }
.menu-btn i::after{ bottom:0; }
.menu-btn:hover i::before{ transform:translateY(3px); }
.menu-btn:hover i::after{ transform:translateY(-3px); }

/* chrome inverts while the page is on cream */
.chrome.on-light .nav a,
.chrome.on-light .menu-btn{ color:var(--ink); }


/* --- custom cursor (fine pointers only) --- */
.cursor,.cursor-l{ display:none; }
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:block; position:fixed; z-index:9500; top:0; left:0;
    width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
    border-radius:50%; background:var(--cream);
    pointer-events:none; mix-blend-mode:difference;
    transition:width .4s var(--ease),height .4s var(--ease),
               margin .4s var(--ease),background .4s var(--ease);
  }
  .cursor.is-wide{
    width:74px; height:74px; margin:-37px 0 0 -37px;
    background:var(--orange); mix-blend-mode:normal;
  }
  .cursor-l{
    display:grid; place-items:center;
    position:fixed; z-index:9501; top:0; left:0;
    width:74px; height:74px; margin:-37px 0 0 -37px;
    pointer-events:none; color:var(--cream);
    font-family:var(--ui); font-size:11px; letter-spacing:.2em;
    text-transform:uppercase;
    opacity:0; transform:scale(.7);
    transition:opacity .35s var(--ease),transform .35s var(--ease);
  }
  .cursor-l.is-on{ opacity:1; transform:scale(1); }
  body.has-cursor,body.has-cursor *{ cursor:none !important; }
}

/* ------------------------------------------------------------
   ACT I — the gate
   One frame. It never leaves. Only its shape and its film change.
   ------------------------------------------------------------ */

.reel{ position:relative; height:340vh; }
@media (max-width:860px){ .reel{ height:300vh; } }

.reel__stage{
  position:sticky; top:0; height:100svh;
  overflow:hidden;
}

/* two stacked ground colours; we cross-fade instead of tweening bg-color */
.ground{ position:absolute; inset:0; }
.ground--cream{ background:var(--film); }
.ground--black{ background:var(--black); opacity:0; }

.gate{
  position:absolute; inset:0;
  clip-path:inset(0% 0% 0% 0%);
  will-change:clip-path;
  background:var(--black);
}
.gate__film{
  position:absolute; inset:0;
  /* no transform here: the push-in belongs to layer 1 alone, and a scale
     on the shared wrapper oversizes the Old Hats field too */
}
.gate__film picture{ display:block; position:absolute; inset:0; }
.gate__film img{ filter:contrast(1.04) saturate(.98); }
.gate__layer{ position:absolute; inset:0; backface-visibility:hidden; transform:translateZ(0); }
.gate__layer--1{ will-change:transform; }
.gate__layer--2{ opacity:0; inset:0; z-index:2; will-change:clip-path,opacity; }
.gate__vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:radial-gradient(circle at var(--ax,50%) var(--ay,43%),
      transparent var(--ar,18%), rgba(16,12,10,.92) 100%);
}

/* ---- the Old Hats field: full bleed, three moving layers ---- */
.hats{ background:var(--rust); overflow:hidden; }
.hats__world{ position:absolute; inset:0; will-change:transform; backface-visibility:hidden; transform:translateZ(0); }
/* Centred by layout, not by a transform: a translate here gets clobbered
   the moment GSAP touches the element, and hard-coding the artwork ratio
   is what clipped the Malayalam when the source was recut. */
.hats__type{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:min(2.2vh,18px);
  padding:6vh 6vw;                              /* breathing room at any size */
  will-change:transform;
}
.hats__t{
  display:block; width:auto; height:auto;
  object-fit:contain; will-change:transform, opacity;
}
.hats__t--we { max-height:3.2vh;  max-width:34vw; }
.hats__t--mal{ max-height:34vh;   max-width:62vw; }
.hats__t--old{ max-height:24vh;   max-width:40vw; margin-top:min(1.2vh,10px); }
.hats__hat{
  position:absolute; top:0; display:block;
  width:clamp(84px,11vw,190px);
  will-change:transform;               /* scroll parallax lives here */
}
.hats__swing{
  display:block;
  transform-origin:50% -60vh;          /* hangs from far above, like a thread */
  will-change:transform;               /* the sway lives here, on its own axis */
}
.hats__hat img{ width:100%; height:auto; object-fit:contain; }
/* the thread it hangs from */
.hats__hat i{
  position:absolute; left:50%; bottom:100%;
  width:1px; height:60vh;
  background:linear-gradient(180deg,transparent,rgba(47,36,32,.42));
}
.hats__hat--l{ left:20%;  top:56%; }
.hats__hat--r{ left:76%;  top:68%; width:clamp(96px,13vw,220px); }

@keyframes hat-sway-a{
  0%,100%{ transform:rotate(-1.5deg); }
  50%    { transform:rotate(1.4deg); }
}
@keyframes hat-sway-b{
  0%,100%{ transform:rotate(1.2deg); }
  50%    { transform:rotate(-1.6deg); }
}
.hats__hat--l .hats__swing{ animation:hat-sway-a 13s cubic-bezier(.45,0,.55,1) infinite; }
.hats__hat--r .hats__swing{ animation:hat-sway-b 17s cubic-bezier(.45,0,.55,1) infinite -4s; }

@media (max-width:760px){
  .hats__t--we { max-height:2.4vh; max-width:56vw; }
  .hats__t--mal{ max-height:30vh;  max-width:80vw; }
  .hats__t--old{ max-height:20vh;  max-width:58vw; margin-top:min(0.9vh,8px); }
  .hats__hat--l{ left:8%;  top:60%; }
  .hats__hat--r{ left:70%; top:72%; }
}
.gate__video{
  width:100%; height:100%; object-fit:cover; display:block;
  background:var(--film);
}

/* hero copy sits over the gate */
.hero{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) calc(var(--pad) * .95);
  will-change:transform,opacity;
}
.hero__line{
  font-size:clamp(19px,2.1vw,32px);
  line-height:1.02;
  color:var(--rust);
  margin:6px 0 0;
  max-width:22ch;
  transform:skewX(-9deg); transform-origin:left bottom;
}
.hero__line em{ font-style:normal; color:var(--ink); }
.hero__eyebrow{ color:var(--ink); opacity:.62; margin:0; }
/* the set fills the middle of the frame, so every word lives in the
   lower third — a title card under the picture, not over it */
.hero__foot{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; color:var(--ink);
}
.hero__say{ max-width:min(44ch,52vw); }
.scroll-cue{ display:flex; align-items:center; gap:10px; white-space:nowrap; opacity:.62; }
.scroll-cue i{
  width:32px; height:1px; background:currentColor; display:block;
  transform-origin:left; animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ transform:scaleX(.3);} 50%{ transform:scaleX(1);} }

/* the first project's card, revealed as the gate closes down to 16:9 */
.first{
  position:absolute; z-index:5;
  left:var(--pad); right:var(--pad);
  bottom:calc(var(--pad) * .8);
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; opacity:0; color:var(--cream);
}
.first__cred{ text-align:right; color:var(--bone); margin:0; }
.first__cred--l{ text-align:left; }
.first__idx{ margin:0 0 .5em; color:rgba(255,239,226,.68); }
.first__l{ max-width:46ch; }

/* ------------------------------------------------------------
   ACT II — the work
   ------------------------------------------------------------ */

.work{ background:var(--black); padding:calc(var(--sec) + 100px) var(--pad) var(--sec); }

.sec-head{ margin-bottom:var(--head); }
/* OUR FILMS is the largest headline on the site (up to 168px). Two things
   need loosening at that scale that are fine everywhere else: the shared
   .display line-height of .84 lets the two stacked words collide, and the
   shared negative tracking reads as squeezed. Both are opened here only. */
.sec-head__title{
  font-size:clamp(52px,10vw,168px); color:var(--rust);
  letter-spacing:var(--track-display);
  line-height:.98;
}

/* One 12-column grid. Every tile snaps to it. Variation comes from
   column span and aspect ratio only — never from a nudge. */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gut);
  row-gap:var(--band);   /* between grid rows only, so the triptych stays level */
  align-items:start;
  perspective:1200px;
}

.tile{ position:relative; display:block; transform-style:preserve-3d; }
.tile__frame{
  position:relative; overflow:hidden; background:#1a1512;
  transform-style:preserve-3d; will-change:transform;
}
.tile__frame img{
  transform:scale(1.001);
  transition:transform 1.2s var(--slow), filter 1.2s var(--slow);
  filter:saturate(.92) brightness(.94);
}
.tile:hover .tile__frame img{ transform:scale(1.035); filter:saturate(1) brightness(1); }

.tile__rule{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--slow);
}
.tile:hover .tile__rule{ transform:scaleX(1); }

/* metadata: one shared block, one shared baseline, always flush left */
.tile__cap{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding-top:var(--cap);
  border-top:1px solid rgba(255,239,226,.14);
  margin-top:var(--cap);
}
.tile__name{
  font-family:var(--ui); font-weight:500;
  font-size:clamp(14px,1.35vw,22px);
  letter-spacing:.01em; text-transform:uppercase;
  color:var(--cream); margin:0; line-height:1.1;
  transition:color .5s var(--ease);
}
.tile:hover .tile__name{ color:var(--orange); }
.tile__note{ color:var(--grey); text-align:right; white-space:nowrap; line-height:1.1; }

.r219{ aspect-ratio:21/9; }
.r21{ aspect-ratio:1800/1013; }   /* the Khatarnak poster's true ratio — never cropped */
.r34{ aspect-ratio:3/4; }

/* Row 1 — the reel, full measure.
   Row 2 — a triptych of films: identical width, ratio and baseline.
   Row 3 — the second feature, full measure again. Wide / three-up / wide
   gives the section a rhythm without a single offset anywhere. */
.tile--feature{ grid-column:1 / 13; }
.tile--third{ grid-column:span 4; }

/* ------------------------------------------------------------
   ACT III — Zing Ads, read sideways
   ------------------------------------------------------------ */

.zing{
  background:var(--black);
  overflow:hidden;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(60px,9vh,120px) 0;
  box-sizing:border-box;
}
.zing__intro{ padding:0 var(--pad) clamp(20px,3.5vh,44px); }
.zing__intro h2{ font-size:clamp(44px,8.4vw,140px); color:var(--rust); }
.zing__intro p{ margin:12px 0 0; max-width:44ch; color:var(--bone); }

.zing__pin{ position:relative; width:100%; display:flex; align-items:center; touch-action:pan-y; }
.zing__track{
  display:flex; align-items:flex-start;
  gap:var(--gut); padding:0 var(--pad); will-change:transform;
  backface-visibility:hidden; transform:translateZ(0);
}

/* Every frame is the same width and the same ratio, so the strip reads as
   sprocketed film rather than as cards. The caption block is a fixed
   height, which puts every number and every label on one baseline. */
.frame{
  flex:0 0 clamp(280px,80vw,520px);
  display:block;
  backface-visibility:hidden;
}
@media (min-width:760px){
  .frame{ flex:0 0 clamp(300px,34vw,520px); }
}
.frame__img{
  aspect-ratio:16/9; overflow:hidden; background:#1a1512;
  width:100%;
  backface-visibility:hidden;
  transform:translateZ(0);
}
/* the frame itself is the link: no underline, no colour, no affordance
   beyond the hover brightness the frames already had */
.frame__link{
  display:block; width:100%; height:100%;
  color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.frame__img img{ filter:saturate(.94) brightness(.95); transition:filter .9s var(--slow); }
.frame:hover .frame__img img{ filter:saturate(1) brightness(1); }

/* no-JS / reduced-motion: the strip just scrolls sideways by hand */
.zing.is-flat{ min-height:auto; display:block; }
.zing.is-flat .zing__intro{ padding:clamp(50px,8vw,120px) var(--pad) clamp(28px,4vw,56px); }
.zing.is-flat .zing__pin{ height:auto; padding-bottom:clamp(40px,6vw,90px); }
.zing.is-flat .zing__track{ overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; }
.zing.is-flat .frame{ scroll-snap-align:center; }

/* ------------------------------------------------------------
   ACT IV — house lights up. Cream again.
   ------------------------------------------------------------ */

.light{ background:var(--cream); color:var(--ink); }

.story{ padding:clamp(80px,12vw,170px) var(--pad); }
.story h2{ font-size:clamp(44px,9vw,150px); color:var(--rust); }
.story__list{ margin:clamp(40px,6vw,80px) 0 0; padding:0; list-style:none; }
.story__row{
  display:grid; grid-template-columns:minmax(72px,9vw) 1fr;
  gap:clamp(16px,3vw,48px);
  padding:clamp(20px,2.6vw,34px) 0;
  border-top:1px solid rgba(47,36,32,.16);
}
.story__row:last-child{ border-bottom:1px solid rgba(47,36,32,.16); }
.story__yr{ font-family:var(--display); font-size:clamp(18px,1.9vw,30px); color:var(--rust); line-height:1; }
.story__what{
  font-family:var(--ui); font-weight:500; text-transform:uppercase;
  font-size:clamp(16px,1.7vw,28px); letter-spacing:.01em; margin:0 0 6px;
}
.story__body{ margin:0; max-width:56ch; color:#5d4b42; }

.fellows{ padding:var(--band) var(--pad) var(--sec); }
.fellows h2{ font-size:clamp(40px,7.6vw,124px); color:var(--rust); }
.fellows__sub{ margin:10px 0 clamp(38px,5vw,70px); color:#6b584e; max-width:40ch; }
.fellows__row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  column-gap:var(--gut);
  row-gap:var(--band);
  align-items:start;
}
.fellow__img{
  aspect-ratio:3/4; overflow:hidden; background:#e6d3c4;
  filter:grayscale(1) contrast(1.03);
  transition:filter .9s var(--slow);
}

.fellow:hover .fellow__img{ filter:grayscale(0) contrast(1); }
.fellow__img img{ transition:transform 1.1s var(--slow); }
.fellow:hover .fellow__img img{ transform:scale(1.05); }
.fellow{ transition:opacity .55s var(--ease); }
/* casting board: hovering one fellow quietens the rest */
.fellows__row:hover .fellow{ opacity:.42; }
.fellows__row:hover .fellow:hover{ opacity:1; }
.fellow h3{
  font-family:var(--ui); font-weight:500; text-transform:uppercase;
  font-size:clamp(12px,.95vw,15px); letter-spacing:.03em; line-height:1.2;
  margin:var(--cap) 0 3px; color:var(--ink);
  padding-top:var(--cap); border-top:1px solid rgba(47,36,32,.18);
}
.fellow p{
  margin:0; color:var(--rust);
  font-family:var(--ui); font-weight:300;
  font-size:clamp(10px,.72vw,12px); letter-spacing:.08em;
  line-height:1.35; text-transform:uppercase;
}

/* ------------------------------------------------------------
   ACT IV — About, told as a chapter
   ------------------------------------------------------------ */

/* 01 — the manifesto. Headline, then the letter. Nothing else competes.
   Ground and orange both come from the existing tokens: --cream so it
   meets the cream sections either side without a seam, --rust because
   that is the brand orange every other heading already uses. */
.about{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(140px,18vh,220px) var(--pad) clamp(80px,10vh,140px);
  overflow-x:clip;
}

/* the oversized duplicate sitting behind both blocks — decorative only,
   scaled far past reading size and dropped to near-nothing opacity so it
   reads as texture, not text. Spans the full section; overflow-x:clip on
   .about crops it naturally at the viewport edges. */
.about__ghost{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; justify-content:center;
  margin:0; padding:0 var(--pad);
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(80px,13.5vw,220px);
  line-height:.86; letter-spacing:var(--track-display);
  color:var(--ink); opacity:.05;
  white-space:nowrap;
}
.about__say{ position:relative; z-index:1; }

.about__head{
  /* sized so the big words' cap-height and the line pitch match the
     reference board: big cap ~115px and ~129px pitch at a 1920 stage. */
  font-size:clamp(30px,7.2vw,148px);
  max-width:none;
  display:flex; flex-direction:column; align-items:flex-start;
  letter-spacing:var(--track-display);
  color:var(--ink);
  /* the letter and the headline read as one composition, so this gap
     tracks the tightened leading above instead of sitting at a fixed
     large value. */
  margin:clamp(18px,2.1vw,32px) 0 0;
}
/* Each line is: .mask (clips) > span (GSAP moves this) > i (carries the
   skew). Putting the skew on the span means the reveal tween overwrites
   the transform and the letters stand up straight. */
.about__l{ display:block; padding-right:.16em; }
/* the two words on a line sit on one shared baseline, exactly as in the
   reference — not stacked, not centred. */
.about__l > span{
  display:flex; align-items:baseline;
  gap:.18em;
  line-height:.82;
  padding-bottom:.06em;   /* room for the descender the mask would clip */
}
.about__w{
  display:inline-block;
  font-style:normal;
  transform:skewX(-9deg); transform-origin:left bottom;
  white-space:nowrap;
}
/* big : small measured off the board at 115px vs 75px cap-height */
.about__w--big{ color:var(--rust); font-size:1em; }
.about__w--sm { color:var(--ink);  font-size:.643em; }

/* the letter — now set in a script face, no quote marks, and no longer
   hung off an opening quote, so it sits flush with the headline below. */
.about__letter{ margin:0; max-width:clamp(320px,60vw,1120px); }
.about__letter blockquote{ margin:0; }
.about__letter p{
  margin:0 0 .34em;
  /* matched to the client's board: a thin, wide-spaced, semi-connected
     hand — Caveat's marker weight was too heavy and too tight. Caveat is
     kept next in the chain as the nearest fallback. */
  font-family:"La Belle Aurore", "Caveat", cursive;
  font-weight:400;
  font-size:clamp(24px,2.72vw,42px);
  /* leading, not type size: La Belle Aurore's glyphs fill little of the
     em, so 1.62 left a large optical gap between the lines. */
  line-height:1.4;
  color:var(--ink);
}
.about__letter p:last-child{ margin-bottom:0; }

@media (max-width:900px){
  .about{
    min-height:auto;
    padding:clamp(120px,18vh,180px) var(--pad) clamp(60px,8vh,100px);
  }
  .about__head{ max-width:none; }
  .about__letter{ max-width:none; }
}

/* 02 — how we think: the one black beat in the chapter */
.think{
  background:var(--black); color:var(--cream);
  padding:var(--sec) var(--pad);
}
.think__stage{ will-change:transform; }
.think__idx{ color:var(--grey); margin:0 0 var(--head); }
.think__idx span{ display:inline-block; will-change:transform,opacity; }
.think__line{
  font-size:clamp(30px,6.1vw,110px);
  line-height:.94;
  letter-spacing:var(--track-display);
  word-spacing:.02em;
  max-width:24ch;
  color:var(--rust);
  margin:0;
  will-change:transform,opacity;
}
.think__l{ display:block; overflow:hidden; padding-right:.14em; }
.think__l > span{
  display:block; will-change:transform,filter,clip-path;
  /* left open by default: with JS off nothing would ever reveal it */
}
.think__l i{
  display:block; font-style:normal;
  transform:skewX(-9deg); transform-origin:left bottom;
}
.think__line em{ font-style:normal; color:var(--cream); }



/* 04 — a group of fellows */
/* Two columns that share one top edge: the heading holds the left seven,
   the copy sits in the right five and is optically aligned to the
   heading's first baseline rather than dropped underneath it. */
.crew{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gut); row-gap:var(--band);
  align-items:start;
  padding:var(--sec) var(--pad) var(--band);
}
.crew__line{
  grid-column:1 / 8;
  font-size:clamp(34px,6vw,104px);
  line-height:.88;
  letter-spacing:var(--track-display);
  color:var(--rust);
  margin:0;
  transform:skewX(-9deg); transform-origin:left bottom;
}
.crew__line .mask{ display:block; }
.crew__body{
  grid-column:8 / 13;
  margin:0;
  padding-top:.34em;                 /* meets the heading's cap height */
  max-width:38ch;
}
.crew__body p{
  margin:0 0 .9em;
  color:#5d4b42;
  font-size:clamp(15px,1.12vw,19px);
  line-height:1.55;
}
.crew__body p:last-child{ margin-bottom:0; }
.crew__body em{ font-style:normal; font-weight:500; color:var(--rust); }

/* the tape runs to both edges — it is a band, not a picture in a margin */
.crew__vis{
  position:relative;
  grid-column:1 / 13; margin:0;
  margin-inline:calc(var(--pad) * -1);
  overflow:hidden;
  /* pinned to the artwork's ratio so percentage coordinates inside this
     box map 1:1 onto the illustration at every width — without it the
     beam drifts off the lens as the viewport changes */
  aspect-ratio:1774 / 559;
}
.crew__vis img{ object-fit:contain; }
/* light through dust, thrown from the lens. Brand orange rather than white,
   because on a cream ground a white beam is invisible. */
/* Positioned from JS in pixels against the illustration's own box, so the
   origin stays welded to the lens at any viewport. Measured: the lens
   snout centres at 54.2% / 24.2% of the artwork. */
.crew{ position:relative; }
.crew__dark{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:rgb(46,29,19);
  mix-blend-mode:multiply;          /* darkens warm, instead of washing grey */
  opacity:var(--dim,0);
  /* feathered top and bottom so the section does not end on a hard band */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
.beam{
  position:absolute; z-index:6; pointer-events:none;
  opacity:0; transform-origin:0 50%;
  background:linear-gradient(90deg,
      rgba(255,222,180,.85) 0%, rgba(255,206,150,.42) 34%,
      rgba(255,196,140,.14) 68%, rgba(255,190,135,0) 100%);
  clip-path:polygon(0 47.5%, 100% 4%, 100% 96%, 0 52.5%);
  filter:blur(18px);
  mix-blend-mode:screen;
}
/* the lamp itself, right at the glass */
.beam__hot{
  position:absolute; left:-4%; top:50%;
  width:16%; aspect-ratio:1; transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,232,200,.9), rgba(255,210,160,0) 70%);
  filter:blur(6px);
}

/* the record sits tighter than it did as a standalone section */
.story{ padding:var(--band) var(--pad) var(--sec); }
/* the archive rail: drawn down as the years arrive, held afterwards */
.story__list{ position:relative; }
.story__rail{
  position:absolute; left:0; top:0; bottom:0; width:1px;
  background:rgba(47,36,32,.14);
}
.story__rail i{
  position:absolute; left:0; top:0; width:100%; height:100%;
  transform-origin:top; transform:scaleY(0);
  background:linear-gradient(180deg,var(--rust),var(--orange));
  display:block;
}
.story__row{ position:relative; }
.story h2{ font-size:clamp(38px,6.4vw,106px); }

@media (max-width:900px){
  .crew{ grid-template-columns:1fr; row-gap:var(--head); }
  .crew__line,.crew__body,.crew__vis{ grid-column:1 / -1; }
  .crew__body{ padding-top:0; max-width:52ch; }

}

/* ------------------------------------------------------------
   Footer — the last frame
   ------------------------------------------------------------ */

.end{
  background:var(--black); color:var(--cream);
  padding:var(--sec) var(--pad) calc(var(--pad) * 1.1);
}
.end__line{
  font-size:clamp(40px,9.4vw,164px);
  line-height:.9;
  letter-spacing:var(--track-display);
  max-width:13ch;
  color:var(--rust);
}
.end__line .mask{ display:block; }
.end h2 em{ font-style:normal; color:var(--cream); }

/* the sentence keeps thinking: . -> .. -> ... -> away -> repeat */
.dots{ display:inline; }
.dots i{ font-style:normal; opacity:0; }
.dots i:nth-child(1){ animation:dot-1 6s ease-in-out infinite; }
.dots i:nth-child(2){ animation:dot-2 6s ease-in-out infinite; }
.dots i:nth-child(3){ animation:dot-3 6s ease-in-out infinite; }
@keyframes dot-1{ 0%{opacity:0} 6%,70%{opacity:1} 79%,100%{opacity:0} }
@keyframes dot-2{ 0%,18%{opacity:0} 26%,70%{opacity:1} 79%,100%{opacity:0} }
@keyframes dot-3{ 0%,38%{opacity:0} 46%,70%{opacity:1} 79%,100%{opacity:0} }

.end__grid{
  display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,80px);
  justify-content:space-between; align-items:flex-end;
  margin-top:clamp(46px,7vw,110px);

}
/* one shared baseline for every label + value pair, so phone, email and
   Instagram sit on the same grid rather than each column setting its
   own rhythm */
.end__col{ display:flex; flex-direction:column; }
.end__label{ opacity:.75; margin:0 0 12px; }
.end__link{
  font-family:var(--ui); font-weight:400; text-transform:uppercase;
  font-size:clamp(16px,2.2vw,34px); letter-spacing:.01em;
  display:block; position:relative; width:max-content;
  color:var(--cream);
  transition:color .45s var(--ease);
}
/* the same --rust every heading and the logo already use — no new orange */
.end__link:hover,
.end__link:focus-visible{ color:var(--rust); }
.end__link::after{
  content:""; position:absolute; left:0; bottom:2px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .6s var(--ease);
}
.end__link:hover::after{ transform:scaleX(1); transform-origin:left; }
/* the email stays lower-case — the same typeface as the other links,
   just without the uppercase transform, which reads oddly on an address */
.end__link[href^="mailto:"]{ text-transform:none; }
.end__base{
  display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between;
  margin-top:clamp(46px,7vw,110px);
  color:rgba(255,239,226,.6);
}
.end__base a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(255,239,226,.25);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.end__base a:hover,
.end__base a:focus-visible{
  color:var(--cream);
  border-color:var(--orange);
}

/* ------------------------------------------------------------
   Full-screen menu
   ------------------------------------------------------------ */

.menu{
  position:fixed; inset:0; z-index:200;
  background:var(--black);
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  display:grid; grid-template-rows:1fr auto;
  padding:calc(var(--pad) * 2.4) var(--pad) var(--pad);
}
.menu.is-open{ visibility:visible; }
.menu__bg{ position:absolute; inset:0; opacity:.2; }
.menu__bg figure{
  position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity .9s var(--slow);
}
.menu__bg figure.is-on{ opacity:1; }
.menu__bg img{ filter:grayscale(.4); transform:scale(1.06); }
.menu__inner{ position:relative; display:flex; align-items:center; }
.menu__list{ margin:0; padding:0; list-style:none; }
.menu__list li{ overflow:hidden; }
.menu__list a{
  display:block; font-family:var(--display);
  font-size:clamp(42px,9.4vw,148px); line-height:.94;
  text-transform:uppercase; color:var(--cream);
  transform:translateY(105%);
  transition:color .5s var(--ease);
}
.menu__list a:hover{ color:var(--orange); }
.menu__foot{
  position:relative;
  display:flex; flex-wrap:wrap; gap:12px 34px; justify-content:space-between;
  color:var(--grey);
  padding-top:20px; border-top:1px solid rgba(255,239,226,.16);
}

/* ------------------------------------------------------------
   Project detail — the frame opens and you walk in
   ------------------------------------------------------------ */

.flip{ position:fixed; z-index:290; overflow:hidden; background:#1a1512; pointer-events:none; }

.detail{
  position:fixed; inset:0; z-index:300;
  background:var(--black); color:var(--cream);
  overflow-y:auto; overscroll-behavior:contain;
  visibility:hidden; opacity:0;
}
.detail.is-open{ visibility:visible; opacity:1; }
.detail__close{
  position:fixed; z-index:320; top:calc(var(--pad) * .62); right:var(--pad);
  font-family:var(--ui); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream); display:flex; align-items:center; gap:9px;
}
.detail__close i{ width:15px; height:15px; position:relative; display:block; }
.detail__close i::before,.detail__close i::after{
  content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background:currentColor;
}
.detail__close i::before{ transform:rotate(45deg); }
.detail__close i::after{ transform:rotate(-45deg); }
.detail__close:hover i{ transform:rotate(90deg); transition:transform .6s var(--ease); }

.detail__hero{ position:relative; height:74svh; overflow:hidden; background:#1a1512; }
/* full-bleed OTT hero: the still fills the box edge-to-edge and crops its
   own outer edges as needed. object-fit:cover is inherited from the global
   img rule; object-position is stated here so the crop stays centred. */
.detail__hero img{
  filter:contrast(1.03) brightness(.9);
  object-position:center center;
}
/* the gradient, title and watch action all sit above whichever fills the
   hero — the still image (default) or .detail__media (when a project
   carries a youtube/instagram url). z-index climbs in that reading order. */
.detail__hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(16,12,10,.35),rgba(16,12,10,.9));
  pointer-events:none;
}
.detail__media{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  /* transparent until a player actually mounts. This box sits after the
     <img> in DOM order at the same z-index, so an opaque background here
     paints straight over the fallback poster and hides it. */
  background:transparent;
}
.detail__media.is-on{ background:#1a1512; }
/* Anything mounted in the media layer fills the hero edge to edge and
   sits BEHIND the gradient and the title. No card, no border, no frame. */
.detail__media--yt iframe,
.detail__media--file video{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
/* the film is a background, so it crops rather than letterboxes */
.detail__media--file video{ object-fit:cover; }

.detail__title{
  position:absolute; z-index:2; left:var(--pad); right:var(--pad); bottom:clamp(24px,4vw,54px);
  font-size:clamp(38px,8.4vw,140px); color:var(--cream);
  transform:skewX(-9deg); transform-origin:left bottom;
  pointer-events:none;
}
/* the understated external-platform action — label typography, no button
   chrome, tucked lower-right so it never competes with the title */
.detail__watch{
  position:absolute; z-index:3; right:var(--pad); bottom:clamp(24px,4vw,54px);
  display:none; align-items:center; gap:8px;
  font-family:var(--ui); font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  font-size:clamp(10px,.78vw,12px); color:var(--bone);
  padding-bottom:2px; border-bottom:1px solid rgba(255,239,226,.34);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.detail__watch:hover{ color:var(--orange); border-color:var(--orange); }
.detail__watch.is-on{ display:inline-flex; }
.detail__body{
  padding:clamp(40px,6vw,90px) var(--pad) clamp(70px,10vw,140px);
  display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gut); row-gap:clamp(30px,4vw,60px);
}
.detail__facts{ grid-column:1/4; }
.detail__facts dl{ margin:0; }
.detail__facts dt{
  font-family:var(--ui); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--grey); margin-top:18px;
}
.detail__facts dt:first-child{ margin-top:0; }
.detail__facts dd{ margin:3px 0 0; font-family:var(--ui); font-weight:300; letter-spacing:.03em; }
.detail__text{ grid-column:5/12; }
.detail__text p{ margin:0 0 1.1em; font-size:clamp(16px,1.35vw,22px); line-height:1.5; color:var(--bone); max-width:52ch; }
.detail__stills{ grid-column:1/13; display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut); }
.detail__stills figure{ margin:0; overflow:hidden; background:#1a1512; }
.detail__stills figure:nth-child(1){ grid-column:1/8; aspect-ratio:16/9; }
.detail__stills figure:nth-child(2){ grid-column:9/13; aspect-ratio:3/4; }
.detail__stills figure:nth-child(3){ grid-column:3/11; aspect-ratio:16/9; }
.detail__next{
  grid-column:1/13; border-top:1px solid rgba(255,239,226,.18);
  padding-top:clamp(22px,3vw,40px); display:flex; justify-content:space-between;
  align-items:baseline; gap:20px; flex-wrap:wrap;
}
.detail__next b{ font-family:var(--display); font-weight:400; font-size:clamp(24px,4.4vw,64px); text-transform:uppercase; }

/* ------------------------------------------------------------
   Responsive — rebuilt for touch, not shrunk
   ------------------------------------------------------------ */

@media (max-width:1100px){
  .fellows__row{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:900px){
  /* hide the inline links, never the Menu button — it lives inside .nav
     and is the only way into navigation on a phone */
  .nav a{ display:none; }
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:14px; }
  /* tablet: the triptych becomes a pair, the feature stays full measure */
  .grid{ grid-template-columns:repeat(12,1fr); }
  .tile--third{ grid-column:span 6; }
  .r219{ aspect-ratio:16/9; }
  .first{ flex-direction:column; align-items:flex-start; gap:6px; }
  .first__cred{ text-align:left; }
  .detail__hero{ height:56svh; }
  .detail__facts,.detail__text,.detail__stills{ grid-column:1/13; }
  .detail__stills figure:nth-child(n){ grid-column:1/13; }

  .story__row{ grid-template-columns:1fr; gap:6px; }
}

@media (max-width:560px){
  .fellows__row{ grid-template-columns:repeat(2,1fr); row-gap:var(--head); }
  .frame{ flex:0 0 78vw; }
  .grid{ grid-template-columns:1fr; row-gap:clamp(30px,8vw,52px); }
  .tile--feature,.tile--third{ grid-column:1 / -1; margin-top:0; }
  .r219{ aspect-ratio:16/9; }
  .tile__cap{ flex-direction:column; align-items:flex-start; gap:2px; }
  .tile__note{ text-align:left; }
  .hero__foot{ flex-direction:row; align-items:flex-end; }
}

/* ------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------ */

:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:4px;
}
/* Tiles get an inset ring on their own frame instead of the offset outline
   above — with three posters side by side, an outdented outline on one
   tile reads as a stray line running down into its neighbour's gutter.
   Keyboard focus is still clearly visible, just contained to the tile. */
.tile:focus-visible{ outline:none; }
.tile:focus-visible .tile__frame{
  box-shadow:inset 0 0 0 2px var(--orange);
}
.skip{
  position:absolute; left:-9999px; z-index:9999;
  background:var(--orange); color:var(--cream);
  padding:10px 16px; font-family:var(--ui); letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus, .skip:focus-visible{
  left:var(--pad); top:12px;
  outline:2px solid var(--cream); outline-offset:2px;
}

/* Visually hidden utility for screen-reader semantic landmarks (zero visual layout impact) */
.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reel{ height:auto; }
  .reel__stage{ position:relative; height:88svh; }
  .gate{ clip-path:none; }
  .gate__film{ transform:none !important; }
  .gate__layer--2{ display:none; }
  .hats__swing{ animation:none !important; }
  .hero{ opacity:1 !important; transform:none !important; }
  .first,.first__idx{ display:none; }
  .scroll-cue i{ animation:none; transform:scaleX(1); }
  /* the global animation reset freezes the dots on their final frame, which
     leaves the sentence with no full stop at all — hold one instead */
  .dots i{ animation:none !important; }
  .dots i:nth-child(1){ opacity:1; }
  .dots i:nth-child(2),.dots i:nth-child(3){ opacity:0; }
  .mask > span{ transform:none !important; }
  .menu__list a{ transform:none; }
}

/* If GSAP never arrives, nothing stays hidden. */
.no-gsap .mask > span{ transform:none !important; }
.no-gsap .reel{ height:auto; }
.no-gsap .reel__stage{ position:relative; height:92svh; }
.no-gsap .ground--black{ opacity:1; }
.no-gsap .first,.no-gsap .first__idx{ display:none; }
.no-gsap .gate__layer--2{ display:none; }
.no-gsap .ground--black{ opacity:0; }
.no-gsap .menu__list a{ transform:none; }
.no-gsap .beam{ opacity:.6; }