/* ===========================================================================
   TUZIN CREATIVE — "Screening Room"
   Pure black. The work is the only light in the room. One accent: none.
   Frames are letterboxed and full-bleed, presented one at a time down the
   page like reels, with type kept to the smallest useful whisper.
   =========================================================================== */

:root{
  --bg:#000;
  --ink:#F4F4F4;
  --muted:#7C7C7C;
  --dim:#4A4A4A;
  --hair:rgba(255,255,255,.10);
  --gut:clamp(18px,4vw,64px);
  --max:1680px;
}

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

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  font-size:16px;line-height:1.6;font-weight:300;
  -webkit-font-smoothing:antialiased;
  /* house lights down, then up */
  animation:houselights 1.1s ease-out both;
}
@keyframes houselights{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  body{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reel-item{opacity:1!important;transform:none!important}
}

img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* ---------- header: stays out of the way ------------------------------- */

.site-head{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:0;
  padding:22px var(--gut);
  mix-blend-mode:difference;   /* legible over any frame beneath it */
  pointer-events:none;
}
.site-head a,.site-head button{pointer-events:auto}
.logo{font-size:12px;letter-spacing:.42em;font-weight:400;text-transform:uppercase;white-space:nowrap}

/* the studio line, set beside the wordmark rather than under it */
.tagline{
  margin-right:auto;padding-left:22px;position:relative;
  font-size:11px;font-weight:300;letter-spacing:.01em;
  color:#8E8E8E;white-space:nowrap;
}
.tagline::before{
  content:"";position:absolute;left:0;top:50%;
  width:1px;height:12px;margin-top:-6px;background:rgba(255,255,255,.22);
}
@media (max-width:1080px){.tagline{display:none}}
.nav{display:flex;gap:26px;align-items:center}
.nav a{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#999;transition:color .25s;
}
.nav a:hover,.nav a.on{color:#fff}
.nav-toggle{display:none}

@media (max-width:1080px){
  /* nav would start wrapping past here — collapse it to a menu button so it
     never overlaps the wordmark, and drop the blend-mode for solid legibility */
  .site-head{
    mix-blend-mode:normal;
    background:rgba(0,0,0,.66);backdrop-filter:blur(14px);
    justify-content:space-between;
  }
  .nav-toggle{
    display:inline-block;background:none;border:1px solid var(--hair);
    color:var(--ink);font-family:inherit;font-size:10px;letter-spacing:.2em;
    text-transform:uppercase;padding:9px 14px;cursor:pointer;margin-left:auto;
  }
  .nav{
    position:fixed;inset:60px 0 auto 0;flex-direction:column;align-items:flex-start;
    gap:0;background:#000;padding:6px var(--gut) 22px;display:none;
    border-bottom:1px solid var(--hair);
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0;font-size:14px;width:100%;color:#CFCFCF}
}

/* ---------- the reel ----------------------------------------------------
   A twelve-column stage driven by each piece's own `size`:
     hero      -> full width, one per row (marquee work)
     standard  -> half width, two across  (deprioritised / cut the scroll)
   Verticals ignore size: consecutive 9:16 pieces are grouped and centred
   together as a couplet, so they never strand left. Every frame keeps its
   own real aspect ratio — nothing is cropped.
   ------------------------------------------------------------------------ */

.reel{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(16px,2.4vw,36px);
  row-gap:clamp(40px,7vh,92px);
  align-items:start;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gut) clamp(70px,12vh,150px);
}

.reel-item{
  position:relative;
  opacity:0;transform:translateY(26px);
  transition:opacity .9s ease,transform .9s ease;
}
.reel-item.lit{opacity:1;transform:none}

.reel-item.is-hero{grid-column:span 12}      /* full width           */
.reel-item.is-standard{grid-column:span 6}   /* half, two across      */
.reel-item.is-third{grid-column:span 4}      /* third, three across   */
.reel-item.is-vertical{grid-column:span 3}   /* narrow, shares a row   */

/* a lone half-width piece centres itself instead of hugging the left */
.reel-item.is-standard.is-centered{grid-column:4 / span 6}
/* a lone vertical centres too */
.reel-item.is-vertical.is-centered{grid-column:5 / span 3}

/* verticals sit top-aligned with their row-mates; the row's height comes from
   the tall portrait, so a landscape beside them floats at the top */
.reel-item.is-vertical .frame{aspect-ratio:9/16}

@media (max-width:1080px){
  .reel-item.is-standard,
  .reel-item.is-standard.is-centered{grid-column:span 12}
  .reel-item.is-third{grid-column:span 6}
  .reel-item.is-vertical,
  .reel-item.is-vertical.is-centered{grid-column:span 6}
}
@media (max-width:560px){
  .reel-item.is-third{grid-column:span 12}
}

/* equal-height strip: a mixed vertical + landscape row. Each frame's flex-grow
   is its aspect ratio, so with flex-basis 0 every frame lands the SAME height
   and the row fills the full width edge-to-edge — outer edges aligned to the
   column, exactly like the full-width rows above and below. */
.strip{
  grid-column:1/-1;
  display:flex;align-items:flex-start;
  gap:clamp(16px,2.4vw,36px);
}
.strip .reel-item{flex:var(--ratio,1) 1 0;min-width:0;margin:0}
.strip .frame{width:100%}
@media (max-width:560px){
  .strip{flex-direction:column;align-items:center}
  .strip .reel-item{flex:none;width:100%;max-width:82%}
}

/* the projection surface — shape comes from the piece itself */
.frame{
  position:relative;width:100%;
  aspect-ratio:var(--ar,16/9);
  background:#080808;overflow:hidden;cursor:pointer;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.frame img,.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame .gif{opacity:0;transition:opacity .45s}
.frame.playing .gif{opacity:1}
.frame:hover{transform:scale(1.006)}

/* the light spill: frames glow faintly onto the black, like a screen would */
.reel-item::before{
  content:"";position:absolute;inset:0;
  box-shadow:0 0 90px 10px rgba(255,255,255,.05);
  opacity:0;transition:opacity .6s;pointer-events:none;
}
.reel-item:hover::before{opacity:1}

/* caption: a slate, not a headline */
.cap{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:24px;margin-top:18px;
}
.cap h3{
  margin:0;font-size:clamp(15px,1.6vw,20px);font-weight:300;letter-spacing:-.01em;
}
.cap h3 .client{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;font-weight:400}
.cap .tc{font-size:10.5px;letter-spacing:.16em;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.credit{margin:7px 0 0;font-size:12px;color:var(--dim);font-weight:300}

/* running index down the right edge — desktop only.
   Compressed so all items fit any viewport; a fisheye (--f, set per-button in
   JS: 1 at the cursor, 0 far away) swells the nearest rows and reveals labels. */
.index-rail{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(6px,1.1vh,11px);align-items:flex-end;
  max-height:96vh;
}
@media (max-width:1180px){.index-rail{display:none}}

.index-rail button{
  --f:0;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;display:flex;align-items:center;justify-content:flex-end;gap:12px;
  height:calc(5px + 11px * var(--f));      /* tight at rest, opens up near cursor */
  transition:height .12s ease;
}

/* the tick — resting length encodes category; it also grows with --f */
.r-tick{
  height:1px;background:var(--dim);flex:none;
  width:calc(var(--base,9px) + 20px * var(--f));
  background:color-mix(in srgb, var(--ink) calc(var(--f) * 100%), var(--dim));
  transition:width .12s ease,background .12s ease;
}
[data-cat="film"]       .r-tick{--base:24px}
[data-cat="music"]      .r-tick{--base:18px}
[data-cat="broadcast"]  .r-tick{--base:13px}
[data-cat="commercial"] .r-tick{--base:9px}

/* label rides the fisheye: hidden at rest, fully open on the nearest row */
.r-text{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  text-align:right;overflow:hidden;
  max-width:calc(340px * var(--f));
  opacity:var(--f);
  transition:max-width .12s ease,opacity .12s ease;
}
.r-eyebrow{
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;
}
.r-title{
  font-size:11px;letter-spacing:.02em;color:var(--muted);white-space:nowrap;
}
.index-rail button.near .r-title{color:var(--ink)}
.index-rail button.near .r-eyebrow{color:var(--muted)}

/* the piece currently on screen stays marked even away from the cursor */
.index-rail button.on .r-tick{background:var(--ink)}

/* ---------- inner pages -------------------------------------------------- */

.page{max-width:var(--max);margin:0 auto;padding:130px var(--gut) clamp(70px,10vw,130px)}
.page h1{margin:0 0 clamp(28px,5vw,56px);font-size:clamp(30px,4.6vw,60px);font-weight:200;letter-spacing:-.02em}
.kicker{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}

.cols{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:900px){.cols{grid-template-columns:1fr}}

.prose{max-width:62ch}
.prose p{margin:0 0 18px;color:#B4B4B4;font-size:15.5px;font-weight:300}
.prose p.lead{color:var(--ink);font-size:clamp(17px,1.9vw,22px);line-height:1.65;font-weight:200;margin-bottom:30px}
.prose h2{margin:36px 0 12px;font-size:13px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.blurb{color:var(--muted)}

.rail dl{margin:0;border-top:1px solid var(--hair)}
.rail dl>div{display:grid;grid-template-columns:112px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--hair)}
.rail dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.rail dd{margin:0;font-size:14px;color:#B4B4B4;font-weight:300}
.rail-label{margin:34px 0 13px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.clients{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;padding:0;margin:0}
.clients li{font-size:11px;letter-spacing:.08em;border:1px solid var(--hair);padding:5px 9px;color:var(--muted)}

.hint{border-left:1px solid var(--hair);padding:11px 0 11px 18px;color:var(--dim);font-size:12.5px;margin:24px 0 40px;max-width:62ch}
.hint code{color:var(--muted)}

.slate{display:flex;flex-wrap:wrap;gap:8px 34px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:16px 0;margin:0 0 clamp(32px,6vw,60px)}
.slate span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.slate b{color:var(--ink);font-weight:400}
.case-frame{margin:0 0 clamp(44px,7vw,80px)}
.case-frame .frame{aspect-ratio:2.39/1}

/* ---------- grid used on Adventure Network ------------------------------ */

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,3.6vw,54px)}
@media (max-width:1080px){.grid{grid-template-columns:1fr}}
.grid .frame{aspect-ratio:16/9}

/* ---------- form -------------------------------------------------------- */

.form{max-width:560px}
.field{margin-bottom:20px}
.field label{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;background:transparent;color:var(--ink);
  border:0;border-bottom:1px solid var(--hair);
  padding:11px 0;font-family:inherit;font-size:16px;font-weight:300;border-radius:0;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--ink)}
.field select{background:#000}
.hp{position:absolute;left:-9999px}

.btn{
  display:inline-block;background:none;color:var(--ink);
  border:1px solid var(--hair);font-family:inherit;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;
  padding:15px 34px;cursor:pointer;transition:border-color .25s,background .25s,color .25s;
}
.btn:hover{border-color:var(--ink);background:var(--ink);color:#000}
.btn.ghost:hover{background:none;color:var(--ink)}

/* ---------- lightbox ---------------------------------------------------- */

.lightbox{position:fixed;inset:0;z-index:120;background:#000;display:none;align-items:center;justify-content:center;padding:var(--gut)}
.lightbox.open{display:flex;animation:houselights .4s ease-out both}
.lightbox-inner{width:min(1440px,100%)}
.lightbox-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.lightbox-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:16px}
.lightbox-bar h3{margin:0;font-size:17px;font-weight:300}
.lb-client{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lightbox-close{background:none;border:1px solid var(--hair);color:var(--ink);font-family:inherit;font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding:10px 16px;cursor:pointer}
.lightbox-close:hover{border-color:var(--ink)}
.empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--dim);font-size:11px;letter-spacing:.16em;padding:20px}

/* ---------- footer ------------------------------------------------------ */

.site-foot{border-top:1px solid var(--hair);padding:40px var(--gut) 54px}
.foot-inner{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 30px}
.wordmark{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted)}
.foot-meta{font-size:11px;color:var(--dim)}
.foot-inner a{font-size:11px;color:var(--muted)}
.foot-inner a:hover{color:var(--ink)}


/* ---------- opening frame ----------------------------------------------
   The first piece runs edge to edge at the very top of the page, under the
   floating header, so the footage is the first thing in the room.
   ---------------------------------------------------------------------- */

.reel-item.opening{
  grid-column:1/-1;
  margin:0 calc(var(--gut) * -1) clamp(10px,2vh,26px);
}
.reel-item.opening .frame{
  aspect-ratio:2.39/1;
  max-height:100svh;
  transition:none;
}
.reel-item.opening .frame:hover{transform:none}
.reel-item.opening::before{display:none}
.reel-item.opening .cap,
.reel-item.opening .credit{padding-inline:var(--gut)}

@media (max-width:640px){
  .reel-item.opening .frame{aspect-ratio:16/10}
}

/* ---------- feature film case studies ----------------------------------- */

.case h1{margin-bottom:clamp(20px,3vw,32px)}

/* film switcher */
.film-switch{
  display:flex;flex-wrap:wrap;gap:10px 8px;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:16px 0;margin-bottom:clamp(34px,5vw,60px);
}
.film-switch button{
  background:none;border:1px solid var(--hair);color:var(--muted);
  font-family:inherit;font-size:12px;letter-spacing:.04em;
  padding:9px 16px;cursor:pointer;display:flex;align-items:baseline;gap:9px;
  transition:border-color .25s,color .25s;
}
.film-switch button:hover{border-color:var(--muted);color:var(--ink)}
.film-switch button.on{border-color:var(--ink);color:var(--ink)}
.film-switch .fs-soon{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}

/* lede: intro + facts side by side */
.film-lede{
  display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,5vw,80px);
  align-items:start;margin-bottom:clamp(30px,5vw,56px);
}
@media (max-width:900px){.film-lede{grid-template-columns:1fr;gap:28px}}
.film-lede .intro{
  margin:0;color:var(--ink);font-weight:200;
  font-size:clamp(17px,2vw,23px);line-height:1.6;max-width:60ch;
}
.film-facts dl{margin:0;border-top:1px solid var(--hair)}
.film-facts dl>div{
  display:grid;grid-template-columns:96px 1fr;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--hair);
}
.film-facts dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.film-facts dd{margin:0;font-size:14px;color:#B4B4B4;font-weight:300}

/* pull quotes — their own section, clearly set apart from the walkthrough */
.film-quotes{
  margin:clamp(40px,6vw,72px) 0;
  padding:clamp(28px,4vw,44px) 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.quotes-label{
  margin:0 0 clamp(22px,3vw,34px);
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.quotes-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);
}
@media (max-width:820px){.quotes-grid{grid-template-columns:1fr;gap:32px}}

.film-quote{
  margin:0;padding:0;position:relative;
}
.film-quote .qmark{
  display:block;font-family:var(--display,inherit);
  font-size:44px;line-height:.4;color:var(--dim);margin-bottom:10px;
}
.film-quote p{
  margin:0 0 16px;font-weight:200;color:var(--ink);
  font-size:clamp(15px,1.55vw,18px);line-height:1.62;
}
.film-quote cite{
  font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

/* links inside case copy */
.clip-challenge a,.clip-body a{
  color:var(--ink);border-bottom:1px solid var(--dim);
  transition:border-color .2s;
}
.clip-challenge a:hover,.clip-body a:hover{border-bottom-color:var(--ink)}

/* clips */
.clips{display:flex;flex-direction:column;gap:clamp(40px,7vh,84px);margin-top:clamp(30px,5vw,50px)}
.clip .frame{
  position:relative;width:100%;aspect-ratio:16/9;background:#080808;
  overflow:hidden;cursor:pointer;margin-bottom:20px;
}
.clip .frame img,.clip .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip .frame .gif{opacity:0;transition:opacity .4s}
.clip .frame.playing .gif{opacity:1}
.clip-text{max-width:74ch}
.clip-n{
  margin:0 0 8px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.clip-text h3{margin:0 0 12px;font-size:clamp(19px,2.4vw,28px);font-weight:300;letter-spacing:-.01em}
.clip-body{margin:0 0 16px;color:#C4C4C4;font-size:15.5px;font-weight:300;line-height:1.65}
.clip-challenge{
  margin:0;color:#9A9A9A;font-size:14.5px;font-weight:300;line-height:1.65;
  padding-left:18px;border-left:1px solid var(--hair);
}
.clip-challenge span{
  display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}

/* coming soon */
.film-soon{padding:clamp(30px,6vh,70px) 0}
.soon-tag{
  margin:0 0 clamp(24px,4vw,40px);
  font-size:clamp(20px,3vw,34px);font-weight:200;color:var(--muted);letter-spacing:-.01em;
}
.film-facts.wide dl{max-width:640px}