/* ================================================================
   the85 — shared layer.
   One file, three pages: the wall, the film case, the brand case.
   Everything below is what has to read the same on all of them:
   the palette, the mono, the chrome, the leader, the ending.
   Anything a page does on its own — its physics, its grid — stays
   in that page. This file is the studio's voice, not its content.
   ================================================================ */

:root{
  --paper:#DEDEDB;
  --ink:#0B0B0B;
  --red:#E5261B;

  /* one logo for the whole site */
  --logo:url("assets/ef51c251d6f6.png");

  /* radii: a tile is small and reads as a card, a plate is large and
     reads as a frame. Two values, not five. */
  --r-tile:10px;
  --r-media:15px;

  /* the strip the fixed chrome owns, top and bottom */
  --chrome-x:26px;
  --chrome-y:22px;

  /* section rhythm, carried over from the case template */
  --gap-sec:104px;
  --gap-text:64px;
  --gap-quote:78px;
  --gap-cred:96px;
  --gap-next:120px;
}

/* mono is the studio's second voice and never varies */
.mono,.s-mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:400}

/* the whole site is a viewfinder */
html{background:var(--paper)}
body{cursor:crosshair}

/* ================================================================
   ACADEMY LEADER
   Colour bars are the site's page turn. On arrival they lift away
   top to bottom; on leaving they drop back the same way. The page
   underneath is swapped while they are down, so a navigation reads
   as one continuous gesture rather than two loads.
   ================================================================ */
.s-leader{position:fixed;inset:0;z-index:200;display:flex;pointer-events:none}
.s-leader b{flex:1;transform-origin:top;will-change:transform}
/* A flex row of seven bars lands on fractional pixels and the background
   shows through the joins as hairlines. Every set of bars on the site
   therefore overlaps its neighbour by a pixel. The static divider does
   not need this at all — it is drawn as one gradient, see .s-bars.    */
.s-leader b + b,
#intro .bars b + b,
.k-bars .in b + b{margin-left:-1px}
.s-leader.out b{transform:scaleY(1);animation:s-lead-up .55s cubic-bezier(.66,0,.16,1) forwards}
@keyframes s-lead-up{to{transform:scaleY(0)}}
.s-leader.in b{transform:scaleY(0);animation:s-lead-down .42s cubic-bezier(.66,0,.16,1) forwards}
@keyframes s-lead-down{to{transform:scaleY(1)}}

/* ================================================================
   MARK
   The wordmark is artwork, not type: every layer is the same
   silhouette masked from one file, so the mark can change without
   the effects changing with it.
   ================================================================ */
.s-mark{position:relative;display:block;width:92px;aspect-ratio:900/290;user-select:none;
  cursor:pointer;pointer-events:auto}
.s-mark i{position:absolute;inset:0;display:block;pointer-events:none;
  -webkit-mask-image:var(--logo);mask-image:var(--logo);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center}
.s-mark .base{background:var(--ink)}
.s-mark .sw{
  background:linear-gradient(90deg,#FF004D,#FF8A00,#FFD400,#25C55E,#00B7FF,#7C3AED,#FF004D);
  -webkit-mask-image:var(--logo),linear-gradient(90deg,transparent 0%,#000 10%,#000 20%,transparent 32%);
          mask-image:var(--logo),linear-gradient(90deg,transparent 0%,#000 10%,#000 20%,transparent 32%);
  -webkit-mask-size:contain,300% 100%;mask-size:contain,300% 100%;
  -webkit-mask-position:left center,-70% 0;mask-position:left center,-70% 0;
  -webkit-mask-composite:source-in;mask-composite:intersect;
  animation:s-sweep 9s linear infinite}
@keyframes s-sweep{
  0%{-webkit-mask-position:left center,-70% 0;mask-position:left center,-70% 0}
  42%,100%{-webkit-mask-position:left center,170% 0;mask-position:left center,170% 0}}

/* ================================================================
   TOP BAR — identical geometry on every page
   ================================================================ */
.s-bar{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;align-items:flex-start;
  justify-content:space-between;padding:var(--chrome-y) var(--chrome-x);pointer-events:none}
.s-bar>*{pointer-events:auto}
.s-bar-right{display:flex;align-items:center;gap:22px;padding-top:6px}
.s-bar-label{color:rgba(11,11,11,.45)}
.s-lnk{color:var(--ink);text-decoration:none;position:relative;background:none;border:0;padding:0;
  font:inherit;cursor:pointer;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase}
.s-lnk::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.s-lnk:hover::after{transform:none}
.s-back span{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.s-back:hover span{transform:translateX(-5px)}

/* ================================================================
   RIGHT RAIL
   Same instrument on every page, different unit: a film is measured
   in time, a brand in sheets. The form is shared so the reader knows
   where they are; the reading tells them what they are looking at.
   ================================================================ */
.s-rail{position:fixed;right:var(--chrome-x);top:50%;transform:translateY(-50%);z-index:60;
  display:flex;align-items:center;gap:12px;pointer-events:none}
.s-rail .tcv{writing-mode:vertical-rl;color:rgba(11,11,11,.5)}
.s-rail .bar{width:1px;height:180px;background:rgba(11,11,11,.18);position:relative}
.s-rail .bar i{position:absolute;left:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--red);top:0;transition:top .1s linear}

/* ================================================================
   TICKER — the bottom edge of every page
   ================================================================ */
.s-ticker{position:fixed;left:0;right:0;bottom:0;height:24px;z-index:62;background:var(--ink);
  color:var(--paper);overflow:hidden;display:flex;align-items:center}
.s-ticker .run{display:flex;white-space:nowrap;animation:s-run 48s linear infinite}
.s-ticker span{padding-right:46px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;opacity:.9}
@keyframes s-run{to{transform:translateX(-50%)}}

/* ================================================================
   FILM STOCK — scan lines and grain, under the content on every page
   ================================================================ */
.s-scan{position:fixed;inset:0;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(180deg,#000 0 1px,transparent 1px 3px)}
.s-grain{position:fixed;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.42'/></svg>")}

/* ================================================================
   COLOUR BARS AS A DIVIDER
   The same seven bars that open the page close its argument.
   ================================================================ */
.s-bars{height:22px;border-radius:3px;overflow:hidden}
/* the divider that closes a case, right above the lane of other work */
.s-ending-bars{margin:var(--gap-sec) 0 0}

/* ================================================================
   ENDING — the divider, the lane of other work, the colophon.
   Every case closes the same way, so leaving one case and entering
   another is one move rather than a decision. There is no "next case"
   block: the lane already runs along the bottom and offers all of it.
   ================================================================ */
/* the lane is the wall, quoted: same tiles, same drift, one row of it */
.s-lane-head{margin:22px 0 14px;color:rgba(11,11,11,.42)}
.s-lane{position:relative;height:300px;overflow:hidden}
.s-lane-track{position:absolute;left:0;top:0;height:300px;will-change:transform}
.s-lane-tile{position:absolute;display:block;border-radius:var(--r-tile);overflow:hidden;
  text-decoration:none;background:#111112;
  transition:translate .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s cubic-bezier(.2,.8,.2,1)}
.s-lane-tile:hover{box-shadow:0 18px 40px -18px rgba(0,0,0,.4)}
.s-lane-tile img{display:block;width:100%;height:100%;object-fit:cover}
.s-lane-tile.bare{background:none;border-radius:0;overflow:visible;
  filter:drop-shadow(0 16px 20px rgba(11,11,11,.26))}
.s-lane-tile.bare:hover{box-shadow:none}
.s-lane-tile.bare img{object-fit:contain}
.s-lane-cap{position:absolute;left:10px;bottom:9px;z-index:4;opacity:0;transform:translateY(5px);
  transition:.32s ease;pointer-events:none;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.85)}
.s-lane-tile:hover .s-lane-cap{opacity:1;transform:none}
.s-lane-tile.bare .s-lane-cap{color:rgba(11,11,11,.5)}

.s-colophon{display:flex;justify-content:space-between;gap:24px;margin:44px 0 0;
  color:rgba(11,11,11,.55);line-height:1.9}
.s-colophon .r{text-align:right}

@media (max-width:900px){
  .s-rail{display:none}
  .s-bar{padding:16px}
  .s-bar-right{gap:16px}
  .s-lane,.s-lane-track{height:250px}
  .s-colophon{flex-direction:column;gap:10px}
  .s-colophon .r{text-align:left}
}

/* On a phone the bar has room for the mark and the way out, and nothing
   else — the case name is already the first thing under it. */
@media (max-width:640px){
  .s-bar-label{display:none}
  .s-mark{width:72px}
  .s-bar-right{gap:14px;white-space:nowrap}
}