/* ========================================================================
   AFTERMATH
   Monochrome chrome by design: the work is violently coloured, so nothing in
   the interface competes with it. There is no brand accent hue. Interactive
   states are signalled by RGB channel split instead — the same subpixel
   fringing the logo animation is built from.
   ======================================================================== */

:root {
  --void:    #050506;   /* page */
  --panel:   #0b0b0d;   /* raised surfaces */
  --rule:    #1c1c21;   /* hairlines */
  --dim:     #6c6c76;   /* mono labels, secondary */
  --chalk:   #e9e9ec;   /* primary text */

  /* Displaced channels. Never used as fills — only as ghosts either side of
     an element, which is what makes them read as aberration rather than colour. */
  --ghost-r: #ff0038;
  --ghost-c: #00e8ff;

  --grid:    12px;      /* dot pitch — tuned to the logo's LED matrix */
  --gut:     clamp(16px, 4vw, 56px);
  --ease:    cubic-bezier(.22, 1, .36, 1);

  --f-disp:  "Anybody", "Arial Black", system-ui, sans-serif;
  --f-body:  "Instrument Sans", system-ui, -apple-system, sans-serif;
  --f-mono:  "Martian Mono", ui-monospace, "SFMono-Regular", monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--chalk);
  font-family: var(--f-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* The logo animation sits on a dot-matrix field. Continuing that field across
   the whole document means the hero video isn't placed *on* the page — the page
   is made of the same material it is. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(255,255,255,.055) 1px, transparent 1.2px);
  background-size: var(--grid) var(--grid);
}

img, video { display: block; max-width: 100%; }

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

h1, h2, h3 { margin: 0; font-family: var(--f-disp); font-weight: 800; line-height: .88; }

p { margin: 0; }

ul, dl, dd, dt { margin: 0; padding: 0; }
li { list-style: none; }

::selection { background: var(--chalk); color: var(--void); }

:focus-visible {
  outline: 2px solid var(--chalk);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--chalk); color: var(--void);
  padding: 12px 18px; font-family: var(--f-mono); font-size: 12px;
}
.skip:focus { left: 8px; top: 8px; }

/* The hero is a video, so the page's h1 is carried here for screen readers and
   search rather than being absent. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}

/* Shared micro-label. Martian Mono, widely tracked — the voice of a show doc.
   Also worn by h2 section headings, hence the explicit line-height overriding
   the display line-height set on h1–h3. */
.eyebrow {
  font-family: var(--f-mono);
  font-size: clamp(9px, .72vw, 11px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------------- Boot ---------------- */

/* Only ever shown when scripting is available to take it away again — otherwise
   the overlay would sit over a black page forever. */
.boot { display: none; }
.js .boot {
  position: fixed; inset: 0; z-index: 150;
  background: var(--void);
  display: grid; place-items: center;
  transition: opacity .6s var(--ease), visibility .6s;
}
.boot.is-done { opacity: 0; visibility: hidden; }

.boot-inner {
  display: grid; gap: 18px; justify-items: center;
  width: min(320px, 70vw);
}
.boot-mark {
  font-family: var(--f-disp);
  font-variation-settings: "wdth" 135, "wght" 800;
  font-size: clamp(20px, 4vw, 32px);
  letter-spacing: .04em;
}
.boot-bar {
  display: block; width: 100%; height: 2px;
  background: var(--rule); overflow: hidden;
}
.boot-bar i {
  display: block; height: 100%; width: 0;
  background: var(--chalk);
  transition: width .25s linear;
}
.boot-pct {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .2em; color: var(--dim);
}

/* ---------------- Rail ---------------- */

.rail {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gut);
  font-family: var(--f-mono);
  font-size: clamp(9px, .72vw, 11px);
  letter-spacing: .2em;
  text-transform: uppercase;
  mix-blend-mode: difference;
  /* Difference blending keeps it legible over most footage, but a permanently
     fixed bar still lands on top of headings and body copy. It retracts on the
     way down and comes back the moment you scroll up. */
  transform: translateY(0);
  transition: transform .45s var(--ease);
}
.rail.is-tucked { transform: translateY(-115%); }
.rail-mark { font-weight: 700; }
.rail-mid { color: var(--dim); }
.rail-link { color: var(--dim); transition: color .3s var(--ease); }
.rail-link:hover { color: var(--chalk); }

@media (max-width: 700px) { .rail-mid { display: none; } }

/* ---------------- Hero ---------------- */

.hero {
  position: relative; z-index: 1;
  height: 100svh; min-height: 460px;
  display: grid; place-items: center;
  overflow: hidden;
}
.hero-loop {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* The wordmark occupies about two thirds of the 16:9 frame, so on a portrait
   phone `contain` strands it as a thin band in a tall black box. Scaling up
   crops the animation's own built-in margin rather than the artwork. */
/* Modest: the wordmark already runs to ~76% of the frame, so anything much past
   this puts it hard against both edges. */
@media (max-width: 700px) {
  .hero-loop { transform: scale(1.14); }
}
.hero-foot {
  position: absolute; left: var(--gut); right: var(--gut); bottom: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--f-mono);
  font-size: clamp(9px, .72vw, 11px);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim);
}
.hero-scroll { animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }

/* The hero foot carries two items — tagline and scroll cue — and both survive
   to the narrowest width. (A third slot here used to hold a founding year.) */

/* ---------------- Ribbon ---------------- */
/* Not decoration: arena ribbon boards are the actual hardware these packages
   run on, and this is what content looks like moving across one. */

.ribbon {
  position: relative; z-index: 1;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  overflow: hidden;
  padding: 13px 0;
}
.ribbon-track {
  display: flex; width: max-content;
  animation: slide 38s linear infinite;
}
.ribbon-run {
  display: flex; align-items: center; gap: 22px; padding-right: 22px;
  font-family: var(--f-mono);
  font-size: clamp(10px, .8vw, 12px);
  letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
}
.ribbon-run b { font-weight: 500; }
.ribbon-run i { color: var(--dim); font-size: .55em; font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------------- Statement ---------------- */

.statement {
  position: relative; z-index: 1;
  padding: clamp(72px, 13vh, 150px) var(--gut);
  max-width: 1500px; margin-inline: auto;
}
/* Line breaks come from the data, not from wrapping — the stacked block is the
   treatment. Short lines mean it can carry more size than a wrapped paragraph
   could, and a tighter leading than body-weight display type would normally take. */
.statement-lead {
  font-family: var(--f-disp);
  font-variation-settings: "wdth" 108, "wght" 600;
  /* 17vw holds the two lines at a steady ~73% of the column from 360px up, so
     the statement reads at the same weight on a phone as on a 27-inch display. */
  font-size: clamp(64px, 17vw, 250px);
  line-height: .86;
  letter-spacing: -.04em;
}
.statement-sub {
  margin-top: clamp(26px, 3.6vw, 56px);
  max-width: 42ch;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.55;
  color: var(--dim);
}

/* ---------------- Section heads ---------------- */

.sec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 0 var(--gut) 14px;
  border-bottom: 1px solid var(--rule);
}

/* ---------------- Work tiles ---------------- */

.work, .caps { position: relative; z-index: 1; }

.tiles { display: block; }

.tile {
  position: relative;
  display: block;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.tile-media {
  position: absolute; inset: 0;
  z-index: 0;
}
.tile-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* At rest the stack reads as one moody monochrome column; a tile only comes
     to full colour when it is the one being looked at. Five simultaneous loops
     at full saturation is noise, not energy. */
  opacity: .34;
  filter: grayscale(.85) contrast(1.05);
  transform: scale(1.04);
  transition: opacity .7s var(--ease), filter .7s var(--ease), transform 1.1s var(--ease);
}

.tile-body {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title go" "kicker go";
  align-items: center;
  gap: 4px 22px;
  padding: clamp(38px, 7.5vw, 92px) var(--gut);
  min-height: clamp(180px, 26vw, 330px);
  background: linear-gradient(90deg, rgba(5,5,6,.86) 0%, rgba(5,5,6,.55) 45%, rgba(5,5,6,.2) 100%);
  transition: background .7s var(--ease);
}

.tile-title {
  grid-area: title;
  font-variation-settings: "wdth" 116, "wght" 800;
  /* Capped well below the viewport-derived maximum: "Past, Present & Future"
     is three times the length of "Viacom" and has to wrap without colliding. */
  font-size: clamp(28px, 5.5vw, 82px);
  line-height: .94;
  letter-spacing: -.022em;
  text-transform: uppercase;
  text-wrap: balance;
  transition: text-shadow .35s var(--ease);
}
.tile-title em {
  font-style: normal;
  font-variation-settings: "wdth" 78, "wght" 400;
  color: var(--dim);
  transition: color .4s var(--ease);
}

.tile-kicker {
  grid-area: kicker;
  font-family: var(--f-mono);
  font-size: clamp(9px, .72vw, 11px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 12px;
}

.tile-go {
  grid-area: go;
  font-size: clamp(18px, 2vw, 28px);
  color: var(--dim);
  transition: transform .5s var(--ease), color .4s var(--ease);
}

/* `.is-live` is applied on hover/focus at desktop, and by app.js to whichever
   tile is centred in the viewport on touch — where there is no hover to give. */
.tile.is-live .tile-media video {
  opacity: 1;
  filter: grayscale(0) contrast(1);
  transform: scale(1);
}
.tile.is-live .tile-body {
  background: linear-gradient(90deg, rgba(5,5,6,.78) 0%, rgba(5,5,6,.3) 55%, rgba(5,5,6,0) 100%);
}
.tile.is-live .tile-title {
  text-shadow: -.028em 0 var(--ghost-r), .028em 0 var(--ghost-c);
}
.tile.is-live .tile-title em { color: var(--chalk); }
.tile.is-live .tile-go { transform: translate(5px, -5px); color: var(--chalk); }

@media (max-width: 720px) {
  .tile-body {
    grid-template-areas: "title go" "kicker kicker";
    align-items: start;
    gap: 12px 16px;
  }
}

/* ---------------- Capability ---------------- */

.caps { padding-block: clamp(72px, 12vh, 140px); }
.caps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cap {
  background: var(--void);
  padding: clamp(26px, 3vw, 42px) var(--gut);
}
.cap h3 {
  font-variation-settings: "wdth" 112, "wght" 700;
  font-size: clamp(17px, 1.5vw, 23px);
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-bottom: 18px;
}
.cap li {
  font-family: var(--f-mono);
  font-size: clamp(9.5px, .74vw, 11.5px);
  line-height: 2.1;
  letter-spacing: .06em;
  color: var(--dim);
}

/* ---------------- Frames ---------------- */

.frame {
  position: relative;
  background: var(--panel);
  overflow: hidden;
}
.frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* The centrepiece's caption. (A pixel-dimension tag used to sit opposite it,
   but 1920 x 1080 on every clip said nothing — the only dimension worth
   printing is the canvas one, which the rule under the halo carries.) */
.frame-label {
  position: absolute; bottom: 0; left: 0;
  font-family: var(--f-mono);
  font-size: clamp(8.5px, .66vw, 10px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chalk);
  background: rgba(5,5,6,.72);
  padding: 5px 9px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
.frame-label { color: var(--dim); }
.frame:hover .frame-label,
.frame.is-live .frame-label { opacity: 1; transform: translateY(0); }

/* ---------------- Project page ---------------- */

.proj { position: relative; z-index: 1; }

.proj-head {
  padding: clamp(110px, 20vh, 210px) var(--gut) clamp(26px, 4vw, 48px);
}
/* The title carries the year, the spec list carries scope and surface — so the
   eyebrow says the one thing neither of them does. */
.proj-kicker { display: block; margin-bottom: 18px; }
.proj-title {
  font-variation-settings: "wdth" 122, "wght" 800;
  font-size: clamp(38px, 9vw, 150px);
  letter-spacing: -.028em;
  text-transform: uppercase;
}
.proj-title em {
  display: block;
  font-style: normal;
  font-variation-settings: "wdth" 80, "wght" 400;
  color: var(--dim);
  letter-spacing: -.01em;
}
.proj-centre { padding-inline: var(--gut); }
.frame--centre video { aspect-ratio: 16 / 9; }

/* Two columns: the spec list reads like a job sheet, the prose sits beside it. */
.proj-read {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 90px);
  padding: clamp(56px, 10vh, 120px) var(--gut);
  max-width: 1500px; margin-inline: auto;
}
.specs { display: grid; gap: 0; align-content: start; border-top: 1px solid var(--rule); }
.spec {
  display: grid; gap: 5px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.spec dt {
  font-family: var(--f-mono);
  font-size: clamp(8.5px, .66vw, 10px);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim);
}
.spec dd {
  font-family: var(--f-mono);
  font-size: clamp(10px, .78vw, 12px);
  letter-spacing: .04em;
  line-height: 1.5;
}
.prose { display: grid; gap: 1.15em; max-width: 62ch; }
.prose p { font-size: clamp(15px, 1.15vw, 18.5px); line-height: 1.62; color: #c9c9cf; }
.prose p:first-child {
  font-family: var(--f-disp);
  font-variation-settings: "wdth" 104, "wght" 500;
  font-size: clamp(19px, 1.9vw, 30px);
  line-height: 1.28;
  letter-spacing: -.012em;
  color: var(--chalk);
}

@media (max-width: 820px) {
  .proj-read { grid-template-columns: 1fr; }
}

/* ---------------- The canvas ---------------- */
/* The signature. A 9.7:1 halo board shown at its real aspect ratio, full-bleed,
   dimensioned like a drawing. Cropping it to a comfortable 16:9 would throw away
   the only thing that makes it remarkable. */

.canvas { margin: 0 0 clamp(56px, 10vh, 110px); }
.canvas-head {
  padding: 0 var(--gut) 12px;
  display: flex; justify-content: space-between; gap: 16px;
}

.frame--canvas {
  border-block: 1px solid var(--rule);
  background: var(--void);
}
.frame--canvas video {
  /* Full-bleed and sized by width, so the entire 9.7:1 composition is legible
     edge to edge in a single look. The ratio decides the height — thin is the
     honest result, and the point. */
  width: 100%;
  height: auto;
  max-width: 100%;
  /* The proxy render's own ratio, passed in from the data. The dimension rule
     below states the delivered canvas (25800 × 2180), which is a different
     number — so the display ratio must not be hardcoded to either. */
  aspect-ratio: var(--canvas-ratio, 10422 / 1072);
  object-fit: contain;
}

.rule {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--gut) 0;
  color: var(--dim);
}
.rule-line { flex: 1; height: 1px; background: var(--rule); }
.rule-end { width: 1px; height: 9px; background: var(--rule); }
.rule-val {
  font-family: var(--f-mono);
  font-size: clamp(9px, .72vw, 11px);
  letter-spacing: .2em;
  white-space: nowrap;
}

/* ---------------- Gallery ---------------- */
/* Rows for three, a tight block for four — the layout follows the count. */

.proj-gallery { padding: 0 var(--gut) clamp(56px, 10vh, 110px); }
.gallery { display: grid; gap: 10px; }
.gallery--3 { grid-template-columns: repeat(3, 1fr); }
.gallery--4 { grid-template-columns: repeat(2, 1fr); }
.gallery--5 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 760px) {
  .gallery--3, .gallery--4, .gallery--5 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- Next ---------------- */

.next {
  position: relative; display: block;
  border-top: 1px solid var(--rule);
  overflow: hidden;
}
.next-media { position: absolute; inset: 0; }
.next-media video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .3; filter: grayscale(.85);
  transform: scale(1.04);
  transition: opacity .7s var(--ease), filter .7s var(--ease), transform 1.1s var(--ease);
}
.next-body {
  position: relative;
  display: grid; gap: 10px;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: clamp(46px, 8vw, 100px) var(--gut);
  background: linear-gradient(90deg, rgba(5,5,6,.85), rgba(5,5,6,.35));
}
.next-body .eyebrow { grid-column: 1 / -1; }
.next-title {
  font-family: var(--f-disp);
  font-variation-settings: "wdth" 116, "wght" 800;
  font-size: clamp(26px, 5vw, 76px);
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  transition: text-shadow .35s var(--ease);
}
.next-title em {
  font-style: normal;
  font-variation-settings: "wdth" 78, "wght" 400;
  color: var(--dim);
}
.next-go { font-size: clamp(18px, 2vw, 28px); color: var(--dim); transition: transform .5s var(--ease), color .4s var(--ease); }

.next:hover .next-media video, .next:focus-visible .next-media video {
  opacity: .62; filter: grayscale(0); transform: scale(1);
}
.next:hover .next-title, .next:focus-visible .next-title {
  text-shadow: -.026em 0 var(--ghost-r), .026em 0 var(--ghost-c);
}
.next:hover .next-go, .next:focus-visible .next-go { transform: translate(5px, -5px); color: var(--chalk); }

/* ---------------- Foot ---------------- */

.foot {
  position: relative; z-index: 1;
  border-top: 1px solid var(--rule);
  padding: clamp(72px, 13vh, 150px) var(--gut) 26px;
}
.foot-lead {
  font-family: var(--f-disp);
  font-variation-settings: "wdth" 128, "wght" 800;
  font-size: clamp(38px, 8.5vw, 132px);
  line-height: .86;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.foot-cta {
  display: inline-flex; align-items: baseline; gap: 14px;
  margin-top: clamp(26px, 4vw, 52px);
  font-family: var(--f-disp);
  font-variation-settings: "wdth" 96, "wght" 500;
  font-size: clamp(22px, 3.4vw, 50px);
  letter-spacing: -.015em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  transition: border-color .4s var(--ease), text-shadow .35s var(--ease);
}
.foot-cta:hover, .foot-cta:focus-visible {
  border-color: var(--chalk);
  text-shadow: -.02em 0 var(--ghost-r), .02em 0 var(--ghost-c);
}
.foot-cta-arrow { font-size: .55em; color: var(--dim); transition: transform .5s var(--ease); }
.foot-cta:hover .foot-cta-arrow { transform: translate(5px, -5px); }

.foot-meta {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin-top: clamp(56px, 10vh, 120px);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: clamp(9px, .7vw, 10.5px);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim);
}

/* ---------------- Reveal ---------------- */

/* Gated on scripting for the same reason: no JS, no observer, and the work
   would never fade back in. */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

/* ---------------- Reduced motion ---------------- */
/* Loops are the whole premise of the site, so they keep running — but every
   piece of decorative movement stops, and nothing slides, scales or reveals. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ribbon-track { animation: none; }
  .hero-scroll { animation: none; opacity: .7; }
  .js .reveal { opacity: 1; transform: none; }
  .tile-media video, .next-media video { transform: none; }
}