/* ==========================================================================
   Boško Kosić — portfolio · "ON AIR"
   Desktop: living wall of work. Mobile (<768px): vertical reel + feed.
   ========================================================================== */

:root {
  --bg: #0a0a0b;
  --bg-2: #121214;
  --line: rgba(242, 239, 234, 0.12);
  --line-2: rgba(242, 239, 234, 0.24);
  --text: #f2efea;
  --muted: #8f8c86;
  --rec: #ff4d1f;

  --f-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --f-label: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; /* condensed caps for labels */

  --cut: cubic-bezier(0.75, 0, 0.15, 1);
  --out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pad: clamp(18px, 2vw, 32px);
  --gap: 14px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ol, ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: 0; font-stretch: 100%; }
::selection { background: var(--rec); color: #000; }
:focus-visible { outline: 2px solid var(--rec); outline-offset: 3px; }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--text); color: var(--bg); padding: 10px 14px; font-weight: 600;
}
.skip:focus { top: 12px; }

/* ---------- shared bits ---------- */
.mono, .eyebrow, .sec-head, .bar, .status, .row__tags, .row__year, .row__num,
.reel__note, .mail__hint, .foot, .dock, .tile::before {
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sec-head {
  display: flex; gap: 18px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted);
}
.sec-head__num { color: var(--rec); }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  transition: transform 0.4s var(--out), background-color 0.3s, color 0.3s, border-color 0.3s;
}
.btn:hover { transform: translateY(-2px); }
.btn--rec { background: var(--text); color: var(--bg); }
.btn--rec:hover { background: var(--rec); color: #000; }
.btn--ghost { border: 1px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--text); }
.btn__meta { font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12px; opacity: 0.6; }
.btn__play {
  width: 0; height: 0; border-style: solid;
  border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor;
}

/* ---------- top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 80px; padding: 0 var(--pad);
  transition: background-color 0.4s, backdrop-filter 0.4s;
}
.is-scrolled .topbar {
  background: rgba(10, 10, 11, 0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.mark { justify-self: start; display: inline-flex; align-items: center; gap: 12px; }
.mark__av { position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%; transition: transform 0.6s var(--out); }
.mark__av svg { display: block; width: 100%; height: 100%; overflow: visible; animation: avFloat 6s ease-in-out infinite; }
.mark__av::after { /* on-air ring */
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--rec); opacity: 0.0; transform: scale(0.92);
  transition: opacity 0.4s, transform 0.6s var(--out);
}
.mark:hover .mark__av { transform: scale(1.06); }
.mark:hover .mark__av::after { opacity: 1; transform: scale(1); }
.mark__txt { display: grid; line-height: 1; }
.mark__txt b { font-weight: 800; font-stretch: 112%; font-size: 17px; letter-spacing: -0.01em; }
.mark__txt small { margin-top: 5px; color: var(--muted); font-stretch: 80%; font-weight: 600; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; }

/* avatar: screen-print palette + blink / wink / tilt */
/* the cartoon avatar (tools/build_avatar.py): closed-eye patches swap in to blink and wink */
.av { --av-bg: var(--rec); }
.av-bg { fill: var(--av-bg); }
.av-head { transform-box: view-box; transform-origin: 100px 210px; transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.av-lid { opacity: 0; transition: opacity 0.05s; }
.av.is-blink .av-lid, .av.is-wink .av-lid--1, .mark:hover .av-lid--1 { opacity: 1; }
.mark:hover .av-head { transform: rotate(-8deg) translateY(-2px); }
@keyframes avFloat { 50% { transform: translateY(-1.5px) rotate(1.2deg); } }

.topnav {
  display: flex; gap: 2px; padding: 5px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(14, 14, 16, 0.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.topnav a {
  padding: 9px 16px; border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: 0;
  color: rgba(242, 239, 234, 0.82);
  transition: color 0.2s, background-color 0.25s, box-shadow 0.25s;
}
.topnav a:hover, .topnav a:focus-visible { color: #140805; background: var(--rec); box-shadow: 0 0 22px rgba(255, 77, 31, 0.45); }
/* Contact is always lit: the one thing the bar asks you to do */
.topnav a.topnav__cta { margin-left: 6px; color: #140805; background: var(--rec); font-weight: 700; box-shadow: 0 0 18px rgba(255, 77, 31, 0.4); }
.topnav a.topnav__cta:hover, .topnav a.topnav__cta:focus-visible { background: #ff6a40; box-shadow: 0 0 30px rgba(255, 77, 31, 0.7); }
.status {
  justify-self: end; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(14, 14, 16, 0.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 13px; transition: border-color 0.3s;
}
.status:hover { border-color: var(--text); }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: #39d353; box-shadow: 0 0 0 4px rgba(57, 211, 83, 0.15); }
.topbar__tc { display: none; }

@keyframes blink { 50% { opacity: 0.15; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 640px;
  --boot: 0.4s; /* the camera boots first, then the name is wiped in */
}
/* the cursor moves each part by its own property (js), so a frame restyles a handful of
   elements instead of the whole hero; these two stay on the plane, never inherited */
@property --px { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --py { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---- the wall ---- */
.wall {
  position: absolute; inset: -16vh -12vw;
  perspective: 1600px;
  z-index: -2;
}
.wall__plane {
  width: 100%; height: 100%;
  transform: rotateX(13deg) rotateZ(-4deg) translate3d(var(--px), var(--py), 0) scale(1.03);
  transform-origin: 50% 40%;
  will-change: transform;
}
/* 18 fine columns. Row 3 always starts just under the top bar (margin-top), so the clear band
   above the text is the same rows at every screen: rows 3–4 from column 3 to 16, and row 5 on
   the right. The projects are placed there (.p0–.p10, below); the older work fills the rest */
.wall__grid {
  --cols: 18;
  --cell: calc((124vw - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: var(--cell);
  grid-auto-flow: dense;
  gap: var(--gap);
  margin-top: calc(98px + 16vh - 2 * (var(--cell) + var(--gap)));
}
.tile {
  position: relative; overflow: hidden; border-radius: 4px;
  background: var(--bg-2);
  cursor: pointer;
  transition: transform 0.6s var(--out), filter 0.6s var(--out);
}
.wall { --gap: 10px; }
/* an upright tablet: twelve bigger columns, so the wall reaches the bottom of the screen */
@media (min-width: 768px) and (max-aspect-ratio: 1/1) {
  .wall__grid { --cols: 12; }
}
/* the older work, around the projects: a square, a wide, an upright and a big screen */
.tile { grid-column: span 2; grid-row: span 2; }
.tile.w { grid-column: span 4; }
.tile.v { grid-row: span 4; }
.tile.xl { grid-column: span 4; grid-row: span 4; }
.tile img, .tile video, .tile picture { width: 100%; height: 100%; object-fit: cover; }
.tile video { position: absolute; inset: 0; opacity: 0; }
.tile.has-video video { opacity: 1; }
.tile::after { /* frame + tally light */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(242, 239, 234, 0.08);
  transition: box-shadow 0.2s;
}
.tile::before { /* on-air label */
  content: "● Live — " attr(data-label);
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 5px 8px; border-radius: 3px;
  background: rgba(10, 10, 11, 0.78); color: var(--text);
  font-size: 10px; white-space: nowrap;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.3s var(--out);
}
.tile.is-tally::after { box-shadow: inset 0 0 0 2px var(--rec); }
.tile.is-tally::before { opacity: 1; transform: none; }
.tile:hover { transform: translateZ(40px) scale(1.04); z-index: 3; }
.tile.s:not(.p0):hover { transform: translateZ(60px) scale(1.12); } /* the small project screens come forward more */
.tile:hover::after { box-shadow: inset 0 0 0 2px var(--text); }

/* each screen is a layer of its own (capable devices): a hover lifts it, a cut flashes it and
   the director's tally lights it without repainting the wall around it. A filter layer, not a
   transform one: measured with the cursor over the wall, it costs the GPU the least */
html:not(.is-lite) .tile { will-change: filter; }

/* power-on intro (only when JS runs and motion is allowed) */
.js .tile { opacity: 0; }
.js .hero.is-on .tile { opacity: 1; animation: powerOn 0.7s steps(4, end) var(--d, 0ms) backwards; }
.is-lite .tile, .no-motion .tile { opacity: 1 !important; animation: none !important; }
@keyframes powerOn {
  0% { opacity: 0; filter: brightness(3) contrast(0.6); }
  35% { opacity: 0.7; filter: brightness(2.2); }
  60% { opacity: 0.25; filter: none; }
  100% { opacity: 1; filter: none; }
}

/* ---- veil: legibility gradient + a spotlight that follows the cursor ---- */
.hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.98) 0%, rgba(10, 10, 11, 0.9) 28%, rgba(10, 10, 11, 0.55) 46%, rgba(10, 10, 11, 0.08) 68%, rgba(10, 10, 11, 0.3) 100%);
}
/* twice the hero, centred on the cursor: painted once, then only moved (js: translate) */
.hero__spot {
  position: absolute; left: 0; top: 0; width: 200%; height: 200%;
  background: radial-gradient(circle 640px at 50% 50%, rgba(10, 10, 11, 0) 0%, rgba(10, 10, 11, 0.14) 55%, rgba(10, 10, 11, 0.3) 100%);
  translate: 70vw 40vh; transform: translate(-50%, -50%);
  will-change: transform;
}

/* ---- mobile reel layer (hidden on desktop) ---- */
.hero__reel { display: none; }

/* ---- content ---- */
.hero__content {
  position: absolute; left: 0; right: 0; bottom: 64px; z-index: 2;
  display: flex; flex-direction: column;
  padding: 0 var(--pad);
  pointer-events: none;
}
.hero__content > * { pointer-events: auto; }
.eyebrow { order: 1; color: var(--muted); margin-bottom: 18px; }
.eyebrow b { color: var(--rec); font-weight: inherit; }
@media (min-width: 768px) { .eyebrow__role { display: none; } } /* the logo says it already */
.hero__row {
  order: 2;
  display: grid; grid-template-columns: minmax(0, 600px) 1fr; align-items: end; gap: 40px;
}
.statement {
  font-size: clamp(20px, calc(1.1vw + 9px), 40px); line-height: 1.18; font-weight: 450; letter-spacing: -0.01em;
  text-wrap: balance;
}
.statement em { font-size: 1.08em; }
.proof { justify-self: end; display: flex; gap: clamp(20px, 2.6vw, 44px); }
.proof li { display: grid; gap: 4px; }
@media (min-width: 768px) {
  .proof { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.proof span { max-width: 150px; } /* the word may be wider than the line under it ("Teaching") */
.proof b { font-weight: 800; font-stretch: 112%; font-size: clamp(22px, 2vw, 32px); line-height: 1; }
.proof span { color: var(--muted); font-size: 13px; line-height: 1.3; }
.cta { order: 3; display: flex; gap: 12px; margin-top: 26px; }

.name {
  order: 4;
  margin-top: calc(0.16em + clamp(12px, 2vh, 24px)); /* the Š and Ć accents rise 0.16em above the box */
  font-weight: 900; font-stretch: 125%;
  font-size: 12.4vw; /* JS fits it to the exact width */
  line-height: 0.8; letter-spacing: -0.035em; text-transform: uppercase;
  white-space: nowrap;
  /* 3D: on desktop js tilts it towards the cursor and swings the extrusion (--ex/--ey) */
  --ex: 0; --ey: 0.9;
  --chrome: url("../media/fx/chrome.webp");
  position: relative;
  transform: perspective(1600px) rotateX(var(--nrx, 0deg)) rotateY(var(--nry, 0deg));
  transform-origin: 50% 100%;
}
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .name { --chrome: image-set(url("../media/fx/chrome.avif") type("image/avif"), url("../media/fx/chrome.webp") type("image/webp")); }
}
.name > span { position: relative; display: inline-block; }

/* face: liquid chrome (Freepik, tools/build_fx.py) over a chrome gradient that shows while it loads,
   warmed at the bottom by the red glow, with LED scanlines and a light sweep (.is-sheen) */
.name__t {
  position: relative; display: inline-block;
  padding: 0.18em 0.05em 0.08em; margin: -0.18em -0.05em -0.08em; /* room for the Š/Ć accents inside the clip */
  color: transparent; -webkit-text-fill-color: transparent;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(10, 10, 11, 0.16) 3px 4px),
    linear-gradient(to bottom, #fff 0%, #fff 50%, #ffae96 100%),
    var(--chrome),
    linear-gradient(to bottom, #fff 0%, #e9e5df 40%, #8d8780 52%, #f2efea 62%, #bdb6ae 100%);
  background-size: auto, auto, cover, auto;
  background-position: 0 0, 0 0, var(--cx, 50%) var(--cy, 50%), 0 0;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: normal, multiply, normal, normal;
  -webkit-background-clip: text; background-clip: text;
}
.name__b .name__t { --cx: 80%; --cy: 30%; } /* a different part of the chrome for the second word */
.name__t::before, .name__t::after {
  content: attr(data-t); position: absolute; inset: 0; padding: inherit; pointer-events: none;
  background: none;
}
/* extrusion */
.name__t::before, .name__x {
  z-index: -1; color: #1c0806; -webkit-text-fill-color: #1c0806;
  text-shadow:
    calc(var(--ex) * 0.0062em) calc(var(--ey) * 0.0062em) 0 rgb(168, 44, 20),
    calc(var(--ex) * 0.0124em) calc(var(--ey) * 0.0124em) 0 rgb(146, 38, 18),
    calc(var(--ex) * 0.0186em) calc(var(--ey) * 0.0186em) 0 rgb(130, 35, 16),
    calc(var(--ex) * 0.0248em) calc(var(--ey) * 0.0248em) 0 rgb(117, 31, 15),
    calc(var(--ex) * 0.0310em) calc(var(--ey) * 0.0310em) 0 rgb(104, 28, 14),
    calc(var(--ex) * 0.0372em) calc(var(--ey) * 0.0372em) 0 rgb(93, 25, 13),
    calc(var(--ex) * 0.0434em) calc(var(--ey) * 0.0434em) 0 rgb(82, 23, 12),
    calc(var(--ex) * 0.0496em) calc(var(--ey) * 0.0496em) 0 rgb(71, 20, 11),
    calc(var(--ex) * 0.0558em) calc(var(--ey) * 0.0558em) 0 rgb(61, 18, 10),
    calc(var(--ex) * 0.0620em) calc(var(--ey) * 0.0620em) 0 rgb(51, 15, 9),
    calc(var(--ex) * 0.0682em) calc(var(--ey) * 0.0682em) 0 rgb(42, 13, 8),
    calc(var(--ex) * 0.0744em) calc(var(--ey) * 0.0744em) 0 rgb(32, 10, 7),
    calc(var(--ex) * 0.0806em) calc(var(--ey) * 0.0806em) 0 rgb(23, 8, 6),
    calc(var(--ex) * 0.0868em) calc(var(--ey) * 0.0868em) 0 rgb(14, 6, 5);
}
/* red glow behind the letters, breathing slowly */
.name__t::after {
  z-index: -2; color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: 0 0.03em 0.12em rgba(255, 77, 31, 0.6), 0 0.06em 0.5em rgba(255, 77, 31, 0.32);
  animation: nameGlow 4.5s ease-in-out infinite alternate;
}
@keyframes nameGlow { from { opacity: 0.5; } to { opacity: 1; } }
/* light sweep: a white copy of the word seen through a soft band (a mask). The band sits on a box
   three words wide that slides across while the word inside it slides back just as far, so the
   word stays put and the band crosses it: two moves on the compositor, nothing repainted (js) */
.name__sh { opacity: 0; }
.name__sh > span {
  position: absolute; top: 0; bottom: 0; left: -100%; width: 300%;
  -webkit-mask: linear-gradient(100deg, transparent 38%, rgba(0, 0, 0, 0.3) 45%, #000 50%, rgba(0, 0, 0, 0.3) 55%, transparent 62%);
  mask: linear-gradient(100deg, transparent 38%, rgba(0, 0, 0, 0.3) 45%, #000 50%, rgba(0, 0, 0, 0.3) 55%, transparent 62%);
}
.name__sh > span > span {
  position: absolute; top: 0; bottom: 0; left: calc(100% / 3); width: calc(100% / 3);
  padding: 0.18em 0.05em 0.08em; color: #fff; -webkit-text-fill-color: #fff;
}
.name.is-sheen .name__sh { opacity: 1; }
.name.is-sheen .name__sh > span { animation: sheen 1.4s var(--cut) both; }
.name.is-sheen .name__sh > span > span { animation: sheenBack 1.4s var(--cut) both; }
@keyframes sheen { from { transform: translateX(calc(-100% / 3)); } to { transform: translateX(calc(100% / 3)); } }
@keyframes sheenBack { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
/* On capable desktops the swinging extrusion (.name__x, in place of the ::before) and the sweep
   (.name__sh) are copies of the word made by js, each on a layer of its own. They sit beside the
   chrome face as blocks below its line that take no room (a negative bottom margin) and are moved
   up over it (top), and each is a layout boundary: a change to one never re-lays-out the line,
   which would repaint the face. So a frame of the swing repaints the extrusion alone and a sweep
   only moves two layers; the chrome and the glow's wide blur stay as they were painted.
   Their box is the face's padding box (padding .18em .05em .08em around one line). */
.name__x, .name__sh {
  display: block; position: relative; top: calc(-1lh - 0.18em); height: calc(1lh + 0.26em);
  margin: 0 -0.05em calc(-1lh - 0.26em); padding: 0.18em 0.05em 0.08em;
  contain: layout size style; pointer-events: none; will-change: transform;
}
.name.has-swing .name__t::before { content: none; }
.name.has-swing, .name.has-swing .name__t::after { will-change: transform; }
/* living glow (capable desktops): red flares light up random spots behind the letters (js) */
.name > .name__fx { position: absolute; display: block; inset: -0.2em -0.1em -0.15em; z-index: -3; pointer-events: none; } /* beats .name > span */
.name__fx i {
  position: absolute; left: 0; top: 0; width: 2.1em; height: 1.1em; margin: -0.55em 0 0 -1.05em; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255, 104, 48), rgba(255, 60, 20, 0.5) 50%, transparent);
  opacity: 0; will-change: transform, opacity;
}
.name.has-flares .name__t::after { animation: none; opacity: 0.45; }

/* intro: broadcast wipe reveals each word */
.js .hero:not(.is-on) :is(.name__t, .name__x, .name__sh) { visibility: hidden; }
.js .hero.is-on :is(.name__t, .name__x, .name__sh) { transition: visibility 0s linear calc(var(--boot) + 0.52s); }
.js .hero.is-on .name__b :is(.name__t, .name__x, .name__sh) { transition-delay: calc(var(--boot) + 0.7s); }
.js .hero.is-on .name > span::after {
  content: ""; position: absolute; inset: 0.04em -0.02em 0.02em;
  background: var(--rec); transform: scaleX(0);
  animation: wipe 0.84s var(--cut) var(--boot) forwards;
}
.js .hero.is-on .name__b::after { animation-delay: calc(var(--boot) + 0.18s); }
@keyframes wipe {
  0% { transform: scaleX(0); transform-origin: 0 50%; }
  50% { transform: scaleX(1); transform-origin: 0 50%; }
  50.01% { transform: scaleX(1); transform-origin: 100% 50%; }
  99% { opacity: 1; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; opacity: 0; }
}

/* ---- bottom bar: on-air timeline ---- */
.bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 24px;
  height: 48px; padding: 0 var(--pad);
  border-top: 1px solid var(--line);
  background: rgba(10, 10, 11, 0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--muted);
}
.bar__rec { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.bar__rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); animation: blink 1.2s steps(2, jump-none) infinite; }
.bar__tc { color: var(--text); font-variant-numeric: tabular-nums; min-width: 11ch; }
/* timecode frames: a strip of 00–24, one step a frame, on the compositor (js builds it) */
.tc__ff { display: inline-block; height: 1lh; overflow: hidden; vertical-align: top; }
.tc__ff > span { display: block; animation: tcFrames 1s steps(25) infinite; }
.js .hero:not(.is-on) .tc__ff > span { animation-play-state: paused; }
@keyframes tcFrames { to { transform: translateY(-100%); } }
/* ticker: the proof points crawl through the on-air bar like a news line (two copies of the
   list, one move on the compositor; paused with the hero's other loops when it is out of view) */
.ticker {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker__run { display: inline-flex; animation: ticker 48s linear infinite; }
.ticker__run > span { display: inline-flex; align-items: center; gap: 0.6em; padding-right: 2.6em; }
.ticker__run > span::before { content: ""; width: 5px; height: 5px; background: var(--rec); }
.ticker b { color: var(--text); font-weight: 800; }
@keyframes ticker { to { transform: translateX(-50%); } }
.bar__track {
  position: relative; flex: 0 0 clamp(120px, 15vw, 300px); height: 18px;
  background:
    repeating-linear-gradient(to right, var(--line-2) 0 1px, transparent 1px 60px) bottom left / 100% 12px no-repeat,
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 12px) bottom left / 100% 6px no-repeat;
}
/* the head box is as wide as the track, so translateX(100%) crosses it on the compositor
   (no layout per frame); it steps whole device pixels like the old `left` did
   (js: --ph-w is the track width rounded to device pixels, --ph-steps that many pixels;
   the half-step delay rounds to the nearest pixel instead of the one behind) */
.bar__head {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--ph-w, 100%); pointer-events: none;
  animation: playhead 60s steps(var(--ph-steps, 1000), end) calc(-30s / var(--ph-steps, 1000)) infinite;
}
.bar__head::before {
  content: ""; position: absolute; top: -1px; left: -4px;
  border: 4.5px solid transparent; border-top: 6px solid var(--rec);
}
.bar__head::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--rec); }
.bar__clock b { color: var(--text); font-weight: 500; }
.bar__scroll { color: var(--text); }
.bar__scroll::after { content: " ↓"; }
.lite-chip {
  color: var(--text); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px;
}
@keyframes playhead { to { transform: translateX(100%); } }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.reel, .work, .contact { padding: clamp(80px, 12vh, 140px) var(--pad); content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ---- reel ---- */
.reel__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px;
  margin-top: 40px; align-items: start;
}
.reel__title, .work__title, .contact__title {
  font-weight: 800; font-stretch: 112%;
  font-size: clamp(48px, 6.4vw, 116px); line-height: 0.92; letter-spacing: -0.03em;
}
.reel__title em, .work__title em, .contact__title em { font-size: 1.06em; letter-spacing: -0.01em; }
.reel__sub { grid-column: 1; max-width: 38ch; color: var(--muted); font-size: 18px; }
.reel__player {
  grid-column: 2; grid-row: 1 / span 2;
  position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 16 / 9; width: 100%;
  background: var(--bg-2);
}
.reel__player img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--out), filter 0.6s; filter: brightness(0.72); }
.reel__player:hover img { transform: scale(1.04); filter: brightness(0.9); }
.reel__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 28px; border-radius: 999px;
  background: var(--text); color: var(--bg); font-weight: 700;
  transition: background-color 0.3s, transform 0.4s var(--out);
}
.reel__player:hover .reel__play { background: var(--rec); color: #000; transform: translate(-50%, -50%) scale(1.06); }
.reel__note { position: absolute; left: 16px; bottom: 14px; color: var(--text); opacity: 0.8; }
.reel__corners {
  position: absolute; inset: 14px; pointer-events: none; --c: rgba(242, 239, 234, 0.7);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 22px 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px 22px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 22px 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 22px,
    linear-gradient(var(--c), var(--c)) 0 100% / 22px 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px 22px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 22px 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 22px;
  background-repeat: no-repeat;
}

/* ---- selected work: six colour-coded cards, like sources on a multiviewer. Each project
   has its own signal colour (--c): the bar on top, the number, the glow on hover. One card
   at a time is on air and plays its loop; the rest wait on a still (js: setupWork). ---- */
.work__head { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 40px; align-items: end; margin: clamp(24px, 3.5vh, 40px) 0 clamp(22px, 3.5vh, 40px); }
.work__intro { color: var(--muted); font-size: 18px; }
.row { position: relative; transition: opacity 0.4s; }
.row__link { position: relative; display: grid; column-gap: 24px; align-items: center; }
.row__num { grid-area: num; }
.row__title { grid-area: title; font-weight: 800; letter-spacing: -0.03em; }
.row__line { grid-area: line; }
.row__tags { grid-area: tags; }
.row__year { grid-area: year; color: var(--muted); }
.row__go { grid-area: go; }
.row__num { color: var(--c, var(--rec)); }
.row__tags { color: var(--muted); }
.row__media, .row__art { display: none; }

@media (min-width: 768px) {
  .rundown {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px;
    height: clamp(480px, calc(100svh - 330px), 780px);
  }
  .row {
    grid-column: span var(--span, 4); overflow: hidden; isolation: isolate; border-radius: 14px; background: var(--bg-2);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: opacity 0.45s, box-shadow 0.45s, transform 0.6s var(--out);
  }
  .row::before { /* the source colour, like the tally strip of a monitor */
    content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 3px; background: var(--c);
  }
  .rundown:hover .row:not(:hover) { opacity: 0.55; }
  .row:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--c), 0 26px 60px -24px var(--c); }

  .row__art { position: absolute; inset: 0; z-index: -1; display: flex; gap: 3px; background: #000; }
  .row__shot { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; }
  .row__shot img, .row__shot picture, .row__shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .row__shot--face img { object-position: 50% 22%; } /* a portrait: keep the face in the band a wide card shows */
  .row__shot img, .row__shot video { filter: brightness(0.78) saturate(0.95); transform: scale(1.001); transition: transform 1.4s var(--out), filter 0.6s; }
  .row__shot video { opacity: 0; transition: opacity 0.5s, transform 1.4s var(--out), filter 0.6s; }
  .row__shot.has-video video { opacity: 1; }
  .row:is(:hover, .is-pgm) .row__shot img, .row:is(:hover, .is-pgm) .row__shot video { filter: none; transform: scale(1.04); }
  .row__art::after { /* type stays readable; the project's colour rises from the bottom */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to top, rgba(10, 10, 11, 0.96) 0%, rgba(10, 10, 11, 0.88) 30%, rgba(10, 10, 11, 0.42) 54%, rgba(10, 10, 11, 0) 76%),
      linear-gradient(to top, color-mix(in srgb, var(--c) 30%, transparent), transparent 60%),
      linear-gradient(to bottom, rgba(10, 10, 11, 0.55), rgba(10, 10, 11, 0) 26%);
    transition: opacity 0.5s;
  }

  .row__link {
    position: absolute; inset: 0; display: grid;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto auto auto;
    grid-template-areas: "num year" ". ." "title title" "line line" "tags go";
    row-gap: 8px; column-gap: 16px; padding: clamp(16px, 1.4vw, 22px);
  }
  .row__num {
    justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px;
    background: var(--c); color: #0a0a0b; font-weight: 700;
  }
  .row__num::after { /* on air: the card the director has cut to */
    content: "On air"; display: none; padding-left: 8px; border-left: 1px solid rgba(10, 10, 11, 0.35);
  }
  .row.is-pgm .row__num::after { display: inline; }
  .row__year { align-self: start; padding-top: 5px; color: rgba(242, 239, 234, 0.75); text-align: right; }
  .row__title {
    font-stretch: 112%; font-size: clamp(24px, 2.3vw, 42px); line-height: 0.98; text-wrap: balance;
    transition: font-stretch 0.6s var(--cut);
  }
  .row:hover .row__title { font-stretch: 125%; }
  .row__line {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    max-width: 46ch; color: rgba(242, 239, 234, 0.82); font-size: 14.5px; line-height: 1.4;
  }
  .row__tags { align-self: center; color: var(--c); }
  .row__go {
    display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(242, 239, 234, 0.3); border-radius: 50%;
    background: rgba(10, 10, 11, 0.45); font-size: 18px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--out);
  }
  .row:hover .row__go { border-color: var(--c); background: var(--c); color: #0a0a0b; transform: translateX(3px); }

  /* a narrow card keeps its words short */
  .row:is([style*="--span:3"]) .row__line { -webkit-line-clamp: 3; font-size: 14px; }
}
/* a tablet: two cards a row */
@media (min-width: 768px) and (max-width: 1023px) {
  .rundown { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 300px; height: auto; }
  .row { grid-column: auto; }
}

/* ---- contact: one obvious next step. The quick brief turns three taps into a ready email,
   and its send button is the only filled orange thing in the section; the face, the honest
   reply time and the three steps after it take the guesswork out of writing first. ---- */
.contact { position: relative; isolation: isolate; }
.contact::before { /* a warm light behind the brief */
  content: ""; position: absolute; z-index: -1; right: -10%; top: 12%; width: 70%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 77, 31, 0.11), transparent 72%);
}
.ct { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); gap: clamp(32px, 5vw, 96px); align-items: center; margin-top: clamp(24px, 3.5vh, 44px); }
.contact .contact__title { font-size: clamp(44px, 5.3vw, 100px); }
.contact__sub { margin-top: 20px; color: var(--muted); font-size: 18px; max-width: 42ch; }
.ct__me { display: flex; align-items: center; gap: 14px; margin-top: clamp(22px, 3.4vh, 34px); }
.ct__av { position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; }
.ct__av svg { display: block; width: 100%; height: 100%; }
.ct__av:hover .av-lid--1 { opacity: 1; }
.ct__av:hover .av-head { transform: rotate(-8deg) translateY(-2px); }
.ct__dot { position: absolute; z-index: 1; right: 0; bottom: 1px; width: 15px; height: 15px; border: 3px solid var(--bg); border-radius: 50%; background: #39d353; }
.ct__av.is-away .ct__dot { background: #f2b33d; }
.ct__me p { display: grid; gap: 2px; line-height: 1.3; }
.ct__me b { font-weight: 700; font-size: 16px; }
.ct__me span { color: var(--muted); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.mail {
  display: grid; justify-items: start; gap: 8px; margin-top: clamp(26px, 4vh, 44px); text-align: left;
}
.mail__k { color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.mail__addr {
  position: relative;
  font-weight: 800; font-stretch: 108%; font-size: clamp(26px, 3.2vw, 58px); line-height: 1.05; letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.mail__addr::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 0.06em; background: var(--rec);
  transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--cut);
}
.mail:hover .mail__addr::after, .mail:focus-visible .mail__addr::after { transform: scaleX(1); transform-origin: left; }
.mail__hint { color: var(--muted); }
.mail.is-copied .mail__hint { color: var(--rec); }
.ct__links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: clamp(22px, 3.4vh, 34px); }
.ct__links a { display: inline-flex; gap: 6px; font-weight: 600; font-size: 15px; color: var(--muted); transition: color 0.2s; }
.ct__links a i { font-style: normal; transition: transform 0.3s var(--out); }
.ct__links a:hover { color: var(--text); }
.ct__links a:hover i { transform: translate(2px, -2px); color: var(--rec); }

/* the quick brief */
.qb { padding: clamp(20px, 2.6vh, 28px) clamp(20px, 1.8vw, 30px); font-size: 15px; }
.qb__h {
  display: flex; align-items: center; gap: 10px; margin-bottom: clamp(14px, 2vh, 20px);
  color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.qb__h b { color: var(--text); font-weight: 700; }
.qb__h span:last-child { margin-left: auto; }
.qb__lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 4px rgba(255, 77, 31, 0.16), 0 0 12px rgba(255, 77, 31, 0.8); animation: blink 1.2s steps(2, jump-none) infinite; }
.qb__q + .qb__q { margin-top: clamp(12px, 1.8vh, 18px); padding-top: clamp(12px, 1.8vh, 16px); border-top: 1px solid var(--line); }
.qb__n { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; font-weight: 600; font-size: 15.5px; }
.qb__n i {
  display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-2); border-radius: 50%;
  color: var(--muted); font-style: normal; font-family: var(--f-label); font-stretch: 80%; font-weight: 700; font-size: 12px;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.qb__q.is-done .qb__n i { border-color: var(--text); background: var(--text); color: var(--bg); }
.qb__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.qb__chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  font-weight: 500; font-size: 14px; line-height: 1.2;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--out);
}
.qb__chip:hover { border-color: var(--text); }
.qb__chip:active { transform: scale(0.96); }
.qb__chip[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--bg); }
.qb__chip[aria-pressed="true"]::before { content: "✓"; font-weight: 800; font-size: 12px; }
.qb__send {
  display: grid; gap: 4px; padding: 15px 20px 14px; border-radius: 14px; background: var(--rec); color: #140805;
  transition: transform 0.35s var(--out), box-shadow 0.35s;
}
.qb__go { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-stretch: 112%; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.01em; }
.qb__go i { font-style: normal; transition: transform 0.35s var(--out); }
.qb__subj { overflow: hidden; font-weight: 500; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; opacity: 0.78; }
.qb__send:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(255, 77, 31, 0.32); }
.qb__send:hover .qb__go i { transform: translateX(5px); }
.qb.is-armed .qb__send { box-shadow: 0 0 0 4px rgba(255, 77, 31, 0.2), 0 14px 44px rgba(255, 77, 31, 0.3); }
.qb.is-armed .qb__send:hover { box-shadow: 0 0 0 4px rgba(255, 77, 31, 0.28), 0 18px 50px rgba(255, 77, 31, 0.4); }
.qb__or { margin-top: 12px; color: var(--muted); font-size: 14.5px; }
.qb__or a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: text-decoration-color 0.2s; }
.qb__or a:hover { text-decoration-color: var(--rec); }
.qb__avail {
  display: flex; align-items: center; gap: 9px; margin-top: clamp(14px, 2vh, 20px); padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.qb__avail i { width: 7px; height: 7px; border-radius: 50%; background: #39d353; box-shadow: 0 0 0 4px rgba(57, 211, 83, 0.15); }

/* what happens next */
.ct__next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: clamp(32px, 5.5vh, 64px); padding-top: 18px; border-top: 1px solid var(--line); }
.ct__next li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; }
.ct__next b { grid-row: span 2; color: var(--rec); font-family: var(--f-label); font-stretch: 80%; font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; }
.ct__next span { font-weight: 600; font-size: 17px; }
.ct__next small { margin-top: 2px; color: var(--muted); font-size: 14.5px; }
.foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(36px, 6vh, 72px); padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted);
}
.foot b { color: var(--text); font-weight: 500; }

/* ---- reel player dialog ---- */
.player {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(5, 5, 6, 0.96); color: var(--text);
}
.player::backdrop { background: rgba(0, 0, 0, 0.6); }
.player[open] { display: grid; place-items: center; }
.player__frame video { max-height: 86vh; max-width: 92vw; border-radius: 8px; background: #000; }
.player__close {
  position: absolute; top: 18px; right: 22px; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.player__close:hover { border-color: var(--text); }

.dock { display: none; }

/* ==========================================================================
   TABLET (touch, desktop layout)
   ========================================================================== */
@media (max-width: 1199px) and (min-width: 768px) {
  .topnav { gap: 18px; }
  .mark__txt small { display: none; } /* the eyebrow and the logo name are enough here */
  .mark__txt b, .status { white-space: nowrap; }
  .bar__track { display: none; } /* the ticker gets the room */
}
/* a narrow tablet: the logo, the menu and the status share one row without overlapping */
@media (max-width: 900px) and (min-width: 768px) {
  .topbar { grid-template-columns: auto 1fr auto; gap: 12px; }
  .topnav { justify-self: center; }
  .topnav a { padding: 8px 7px; font-size: 14px; }
  .status { padding: 8px 12px; gap: 8px; font-size: 11.5px; }
  .hero__row { grid-template-columns: 1fr; gap: 20px; }
  .proof { justify-self: start; }
}

/* ==========================================================================
   MOBILE — vertical reel + feed (a different site, not a shrunken one)
   ========================================================================== */
@media (max-width: 767px) {
  html { scroll-snap-type: y proximity; }
  body { font-size: 15px; }

  .topbar { height: 56px; grid-template-columns: auto 1fr auto; gap: 12px; }
  .mark { grid-column: 1; grid-row: 1; }
  .status { grid-column: 3; grid-row: 1; }
  .topnav { display: none; }
  .status { justify-self: end; padding: 6px 10px; font-size: 10px; }
  .topbar__tc { display: block; grid-column: 2; grid-row: 1; justify-self: center; color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 11.5px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

  .hero { min-height: 560px; }
  .wall { display: none; }
  .hero__reel { display: block; position: absolute; inset: 0; z-index: -2; background: var(--bg-2); }
  .hero__reel img, .hero__reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero__reel video { opacity: 0; transition: opacity 0.3s; }
  .hero__reel.has-video video { opacity: 1; }
  .hero__veil {
    background: linear-gradient(to top, rgba(10, 10, 11, 0.97) 4%, rgba(10, 10, 11, 0.7) 36%, rgba(10, 10, 11, 0.05) 64%, rgba(10, 10, 11, 0.55) 100%);
  }
  .hero__spot { display: none; }
  .hero__content { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .eyebrow { font-size: 10px; margin-bottom: 10px; align-self: flex-start; padding: 5px 8px; border-radius: 4px; background: rgba(10, 10, 11, 0.62); color: var(--text); }
  .name { order: 2; margin: 0 0 16px; line-height: 0.95; white-space: normal; --ey: 0.6; --chrome: url("../media/fx/chrome-s.webp"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .name { --chrome: image-set(url("../media/fx/chrome-s.avif") type("image/avif"), url("../media/fx/chrome-s.webp") type("image/webp")); }
  }
  .name > span { display: block; }
  .hero__row { order: 3; grid-template-columns: 1fr; gap: 14px; }
  .statement { font-size: 18px; }
  .proof { justify-self: stretch; gap: 14px; }
  .proof li { max-width: none; }
  .proof b { font-size: 18px; }
  .proof span { font-size: 11px; }
  .cta { order: 4; margin-top: 18px; }
  .cta .btn { height: 48px; padding: 0 18px; font-size: 14px; flex: 1; justify-content: center; }
  .btn__meta, .hide-m { display: none; }
  .bar { display: none; }

  .reel, .work, .contact { padding: 72px var(--pad); }
  .reel__grid { grid-template-columns: 1fr; margin-top: 28px; }
  .reel__player { grid-column: 1; grid-row: auto; }
  .reel__sub { font-size: 16px; }
  .reel__play { height: 52px; padding: 0 20px; }

  .work__head { grid-template-columns: 1fr; gap: 16px; margin: 28px 0 28px; }
  .work__intro { font-size: 16px; }
  .rundown { border: 0; display: grid; gap: 12px; }
  .rundown:hover .row:not(:hover) { opacity: 1; }
  .row {
    height: 82svh; min-height: 480px; border: 0; border-radius: 14px; overflow: hidden;
    background: var(--bg-2); scroll-snap-align: center;
  }
  .row__media { display: block; position: absolute; inset: 0; }
  .row__media img, .row__media video, .row__media picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .row__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 11, 0.95) 8%, rgba(10, 10, 11, 0.2) 55%, rgba(10, 10, 11, 0.35) 100%); }
  .row__link {
    position: absolute; inset: 0; z-index: 2;
    grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto auto auto;
    grid-template-areas: "num year" ". ." "title title" "line line" "tags go";
    row-gap: 10px; padding: 18px;
  }
  .row__link::before { display: none; }
  .row__num { padding: 0; }
  .row__title { font-size: 44px; font-stretch: 112%; white-space: normal; }
  .row:hover .row__title { font-stretch: 112%; }
  .row__line { font-size: 15px; }
  .row__tags { margin: 0; align-self: center; }
  .row__go { font-size: 0; }
  .row__go::before { content: "View case →"; font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: var(--text); color: var(--bg); }
  .row::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
  .row__tags { color: var(--c); }

  .contact { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  .contact::before { right: -40%; top: 40%; width: 140%; height: 50%; }
  .ct { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .mail { margin-top: 30px; }
  .mail__addr { font-size: calc((100vw - 2 * var(--pad)) / 14.6); } /* the address fits one line */
  .qb__h span:last-child { display: none; }
  .ct__next { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .foot { flex-direction: column; }

  .dock {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45;
    display: grid; grid-template-columns: repeat(3, 1fr);
    height: 56px; border-radius: 999px; overflow: hidden;
    background: rgba(18, 18, 20, 0.78); border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  .dock a { display: grid; place-items: center; font-size: 11px; }
  .dock a:nth-child(2) { color: var(--rec); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .js .hero .name__t { visibility: visible !important; }
}

/* ==========================================================================
   THE CUT between pages (js: setupCut; <head>: html.vt-in). The picture you click
   becomes the next page: a work card, a wall screen or the next case grows straight
   into the case's key visual while its title flies into the page title; the page you
   leave falls back into the dark and the new one rises into place around them. The
   browser carries it over (cross-document view transitions), so the next page is
   there at once: no cover, no hold. The top bar stays on air. Off with reduced
   motion, lite mode skips it (js); elsewhere a link is just a link.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
html.vt-in .topbar { view-transition-name: topbar; }
html.vt-in .case-title { view-transition-name: cut-title; }
html.vt-in .cover__item:first-child { view-transition-name: cut-pic; }
::view-transition-group(*) { animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
::view-transition-old(root) { animation: vtOut 0.42s cubic-bezier(0.4, 0, 0.2, 1) both; }
::view-transition-new(root) { animation: vtIn 0.7s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
::view-transition-group(topbar) { z-index: 3; animation: none; }
::view-transition-old(topbar) { display: none; }
::view-transition-new(topbar) { animation: none; }
::view-transition-group(cut-pic) { z-index: 1; overflow: clip; border-radius: 6px; }
::view-transition-group(cut-title) { z-index: 2; }
/* the picture keeps its frame filled while the frame changes shape */
::view-transition-old(cut-pic), ::view-transition-new(cut-pic) { height: 100%; object-fit: cover; }
::view-transition-old(cut-pic) { animation: none; } /* stays under the new one until it has faded in */
::view-transition-new(cut-pic) { animation: vtFade 0.35s 0.5s both; }
::view-transition-old(cut-title) { animation: vtFade 0.3s reverse both; }
::view-transition-new(cut-title) { animation: vtFade 0.4s 0.3s both; }
@keyframes vtOut { to { opacity: 0; transform: scale(0.94); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(48px); } }
@keyframes vtFade { from { opacity: 0; } }

/* ==========================================================================
   PROCESS (home)
   ========================================================================== */
.process, .about { padding: clamp(80px, 12vh, 140px) var(--pad); content-visibility: auto; contain-intrinsic-size: auto 1100px; }
.process__head, .about__head { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 40px; align-items: end; margin: 40px 0 0; }
.process__title, .about__title {
  font-weight: 800; font-stretch: 112%;
  font-size: clamp(48px, 6.4vw, 116px); line-height: 0.92; letter-spacing: -0.03em;
}
.process__title em, .about__title em { font-size: 1.06em; letter-spacing: -0.01em; }
/* the title on one line and the demo under it, all on one screen under the top bar */
.process { padding-top: 96px; }
.process .process__head { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; margin-top: 20px; }
.process__title { font-size: clamp(40px, 4.4vw, 80px); white-space: nowrap; }
/* which project the demo shows: one circle each, with the project's hero inside, in a pill
   at the head of the steps row (project first, then its step), right above the stage */
.pr__bar { grid-area: steps; display: flex; align-items: center; gap: 10px; }
.pr__bar .pr__steps { flex: 1; min-width: 0; }
.pj { flex: none; display: flex; gap: 10px; padding: 5px; border: 1px solid var(--line-2); border-radius: 999px; }
.pj__dot {
  --d: 44px;
  position: relative; display: grid; place-items: center; width: var(--d); height: var(--d); border-radius: 50%;
  border: 1px dashed rgba(242, 239, 234, 0.26); color: rgba(242, 239, 234, 0.4);
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em;
}
.pj__dot:disabled { cursor: default; }
.pj__dot--purr, .pj__dot--court, .pj__dot--fizz, .pj__dot--afterlight { border: 0; }
.pj__dot--court .pj__face { background: radial-gradient(80% 70% at 50% 30%, #2a3a9a 0%, #0a0e22 70%); }
.pj__dot--fizz .pj__face { background: radial-gradient(90% 80% at 34% 24%, #ff8ab2 0%, #ff4f8b 55%, #e8326f 100%); }
.pj__dot--afterlight .pj__face { background: radial-gradient(90% 70% at 50% 100%, #8c3a1b 0%, #2a1420 45%, #07080c 80%); }
.pj__dot:not(.is-active):not(:disabled) { opacity: 0.6; transition: opacity 0.25s; }
.pj__dot:not(.is-active):not(:disabled):hover { opacity: 1; }
.pj__face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 50%;
  background: radial-gradient(130% 95% at 26% 16%, #ffdc72 0%, #ffc83d 48%, #f4a92b 100%);
}
.pj__face svg { display: block; width: 100%; height: 100%; transition: transform 0.35s cubic-bezier(.2, .8, .2, 1); }
.pj__dot:not(:disabled):hover .pj__face svg { transform: translateY(-5%); }   /* the cat peeks up */
.pj__dot.is-active::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--rec); border-radius: 50%; pointer-events: none; }

/* ---------- the demo: steps on the side, a stage that plays them ----------
   data-step on .pr is the whole state: every step has a still frame in CSS (that is
   all the lite mode shows); full motion animates between those frames in JS. */
.pr {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "steps steps" "stage side";
  gap: 16px clamp(28px, 3vw, 48px); margin-top: 20px;
}
/* the five steps: buttons in a row that read as one progress bar (like Stories): the active
   one fills up while it plays and its label turns dark where the fill has passed; the ones
   already played keep a warm tint */
.pr__steps { grid-area: steps; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.pr__step {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 12px;
  width: 100%; height: 56px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 14px;
  color: var(--muted); text-align: left; transition: color 0.25s, border-color 0.25s;
}
.pr__step::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: rgba(242, 239, 234, 0.02); transition: background-color 0.25s; }
.pr__step:hover { color: var(--text); border-color: rgba(242, 239, 234, 0.4); }
.pr__step.is-done { color: rgba(242, 239, 234, 0.8); border-color: rgba(255, 77, 31, 0.4); }
.pr__step.is-done::after { background: rgba(255, 77, 31, 0.13); }
.pr__step.is-active { border-color: var(--rec); }
.pr__step.is-active::after { background: rgba(242, 239, 234, 0.07); }
/* the label spans the whole button, so its text gradient lines up with the fill */
.pr__lbl { position: absolute; inset: 0; display: flex; align-items: center; gap: inherit; padding: inherit; }
/* the active label is painted as a background clipped to the text (that keeps it as fine as it was) */
.pr__step.is-active > .pr__lbl, .pr__fill > .pr__lbl { color: transparent; -webkit-background-clip: text; background-clip: text; }
.pr__step.is-active > .pr__lbl { background-color: var(--text); }
/* the fill (js): a red layer slides in from the left, and in it a dark copy of the label moves
   the other way, so it holds still; both are transforms, so the compositor plays them */
.pr__fill { position: absolute; inset: 0; overflow: hidden; gap: inherit; padding: inherit; background: var(--rec); opacity: 0; transform: translateX(-100%); pointer-events: none; }
.pr__fill > .pr__lbl { background-color: #0a0a0b; transform: translateX(100%); }
.pr__step.is-active .pr__fill { opacity: 1; }
.pr__n { flex: none; font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; }
.pr__t { overflow: hidden; font-weight: 600; font-stretch: 105%; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
.pr__d { display: none; }   /* the active one is written out beside the stage */

/* beside the stage: which step, what it is, and the controls */
.pr__side { grid-area: side; display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 4px 0 2px; }
.pr__cap { max-width: 34ch; color: var(--muted); font-size: clamp(16px, 1.05vw, 21px); line-height: 1.5; }
.pr__cap span { display: block; color: var(--rec); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; }
.pr__cap b { display: block; margin: 10px 0 12px; color: var(--text); font-weight: 700; font-stretch: 108%; font-size: clamp(22px, 2vw, 38px); line-height: 1.15; }
/* what the whole demo is: stays put in a frame while the steps change above it */
.pr__foot { display: grid; gap: 14px; justify-items: start; margin-top: auto; }
/* the cat is interactive from step 2 on (full motion only) */
.pr__hint { display: none; margin-top: -10px; color: var(--muted); font-size: 14px; }
.pr__hint::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #ffc83d; vertical-align: 1px; }
.pr__hint-m, .pr__hint-fd, .pr__hint-fm { display: none; }
html:not(.is-lite) .pr[data-pj="purr"]:not([data-step="1"]) .pr__hint { display: block; }
/* fizz: the can opens on a click once it is a can (04, 05) */
html:not(.is-lite) .pr[data-pj="fizz"]:is([data-step="4"], [data-step="5"]) .pr__hint { display: block; }
.pr[data-pj="fizz"] .pr__hint::before { background: #ff4f8b; }
.pr[data-pj="fizz"] .pr__hint-d, .pr[data-pj="fizz"] .pr__hint-m { display: none; }
.pr[data-pj="fizz"] .pr__hint-fd { display: inline; }
html:not(.is-lite) .pr:is([data-step="4"], [data-step="5"]) .ab > .bn--label > :is(.fz__shade, .fz__neck, .fz__bot) { cursor: pointer; }
html:not(.is-lite) .pr:not([data-step="1"]) .bn__cat { cursor: pointer; }
.pr__about {
  max-width: 30em; padding: 18px 20px 20px; border: 1px solid var(--line-2); border-radius: 14px;
  background: rgba(242, 239, 234, 0.03); font-size: clamp(15px, 0.95vw, 18px);
}
.pr__about-k {
  display: flex; align-items: center; gap: 8px; color: var(--text);
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.pr__about-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rec); }
.pr__intro { margin-top: 10px; color: var(--muted); line-height: 1.5; }

.pr__stage {
  /* as big as fits under the steps on one screen (16:10); --pr-top is how far the stage
     sits below the top of the section (measured in js) */
  grid-area: stage; width: max(520px, calc((100vh - var(--pr-top, 320px) - 24px) * 1.6));
  width: min(max(520px, calc((100svh - var(--pr-top, 320px) - 24px) * 1.6)), calc(100vw - 2 * var(--pad) - 300px));
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size;
  border: 1px solid var(--line); border-radius: 6px; background-color: #0d0d0f;
  background-image: radial-gradient(rgba(242, 239, 234, 0.13) 1px, transparent 1.3px);
  background-size: 22px 22px; background-position: center;
}
.pr__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* one set of brief, board and artboards per project; only the current one is shown */
.pj-set { position: absolute; inset: 0; }
.pr:not([data-pj="purr"]) .pj-set[data-set="purr"], .pr:not([data-pj="court"]) .pj-set[data-set="court"],
.pr:not([data-pj="fizz"]) .pj-set[data-set="fizz"], .pr:not([data-pj="afterlight"]) .pj-set[data-set="afterlight"] { display: none; }
.pr__brief, .pr__board, .ab { position: absolute; visibility: hidden; opacity: 0; }
.pr[data-step="1"] .pr__brief,
.pr[data-step="2"] .pr__board,
.pr[data-step="2"] .ab--key, .pr[data-step="3"] .ab--key,
.pr[data-step="4"] .ab, .pr[data-step="5"] .ab { visibility: visible; opacity: 1; }

/* 01 · the brief, a sheet of paper */
.pr__brief {
  left: 15%; top: 50%; translate: 0 -50%; width: 70%; padding: 3.4cqw 3.8cqw 3.6cqw; border-radius: 0.8cqw;
  background: #f4efe6; color: #161616; box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.5);
}
.brief__top, .brief__list dt, .brief__line span {
  font-family: var(--f-label); font-stretch: 80%; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.brief__top { display: flex; justify-content: space-between; padding-bottom: 1.5cqw; border-bottom: 1px solid rgba(22, 22, 22, 0.16); font-size: 1.4cqw; color: #8a8478; }
.brief__top span:first-child { color: #d9381a; }
.brief__list { display: grid; gap: 1.05cqw; margin: 1.9cqw 0 0; }
.brief__list div { display: grid; grid-template-columns: 13cqw 1fr; gap: 1.5cqw; align-items: baseline; }
.brief__list dt { color: #8a8478; font-size: 1.35cqw; }
.brief__list dd { margin: 0; font-weight: 500; font-size: 2cqw; line-height: 1.3; }
.brief__list mark { position: relative; z-index: 0; padding: 0 0.15em; color: inherit; background: none; }
/* the highlighter (js): 64% of the line high, 70% of the way down, behind the word */
.brief__hl { position: absolute; z-index: -1; left: 0; top: 25.2%; width: 100%; height: 64%; background: #ffc83d; transform-origin: 0 0; }
.brief__line { margin-top: 2.6cqw; padding-top: 2cqw; border-top: 1px dashed rgba(22, 22, 22, 0.3); }
.brief__line span { display: block; color: #8a8478; font-size: 1.35cqw; }
.brief__line strong { display: inline-block; margin-top: 0.8cqw; font-weight: 900; font-stretch: 112%; font-size: 5.4cqw; line-height: 1; letter-spacing: -0.035em; }
.brief__caret { display: inline-block; width: 0.45cqw; height: 4.6cqw; margin-left: 0.6cqw; vertical-align: -0.4cqw; background: #d9381a; opacity: 0; }

/* 02 · the elements laid out on a board */
.pr__board { left: 4%; top: 6%; width: 92%; height: 88%; border-radius: 0.8cqw; background: #f4efe6; box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.5); }

/* artboards: 1:1 alone in the middle (02, 03), then four formats (04, 05) */
.ab { transform-origin: 0 0; }
.ab--1x1 { left: 25%; top: 10%; width: 50%; }
.ab--9x16 { left: 8.4%; top: 7.2%; width: 31.2%; }
.ab--4x5 { left: 70.7%; top: 7.2%; width: 20.9%; }
.ab--link { left: 42.1%; top: 54.6%; width: 49.5%; }
.pr[data-step="4"] .ab--1x1, .pr[data-step="5"] .ab--1x1 { left: 42.1%; top: 7.2%; width: 26.1%; }
.ab__label {
  position: absolute; left: 0; bottom: calc(100% + 6px); white-space: nowrap; color: var(--muted);
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.pr[data-step="2"] .ab__label { opacity: 0; }

/* ---------- the purr. banner (all sizes in cqw of the banner, so it scales as one piece) */
.bn {
  --y: #ffc83d; --ink: #161616; --cream: #fff3de; --coral: #ff5a4e;
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; container-type: inline-size;
  color: var(--ink); font-family: var(--f-sans); line-height: 1;
}
.bn--4x5 { aspect-ratio: 4 / 5; }
.bn--9x16 { aspect-ratio: 9 / 16; }
.bn--link { aspect-ratio: 1200 / 628; }
.bn > * { position: absolute; margin: 0; }
/* warm, soft paper: light from the top left, a warmer corner, a fine warm grain */
.bn__bg { inset: 0; background: radial-gradient(130% 95% at 26% 16%, #ffdc72 0%, var(--y) 48%, #f4a92b 100%); }
.bn__bg::after {
  content: ""; position: absolute; inset: 0; opacity: 0.6; background-size: 26cqw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .36 0 0 0 0 .12 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bn__logo { font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; }
.bn__logo small { display: block; margin-top: 0.09em; font-size: 0.27em; font-weight: 700; letter-spacing: 0.32em; }
.bn__head { font-weight: 900; font-stretch: 112%; line-height: 0.9; letter-spacing: -0.035em; white-space: nowrap; }
.bn__head span { display: inline-block; }
.bn__sub { font-weight: 600; font-stretch: 100%; line-height: 1.25; }
.bn__badge { z-index: 2; width: var(--bw); aspect-ratio: 1; font-size: calc(var(--bw) * 0.294); }
.bn__sticker {
  display: grid; place-content: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--coral); color: #fff; text-align: center; transform: rotate(-12deg);
}
.bn__sticker b { font-weight: 900; font-stretch: 112%; letter-spacing: -0.03em; }
.bn__sticker small { font-weight: 700; font-size: 0.3em; letter-spacing: 0.12em; text-transform: uppercase; }
.bn__cta { z-index: 2; padding: 0.73em 1.2em; border-radius: 999px; background: var(--ink); color: var(--cream); font-weight: 800; font-stretch: 110%; white-space: nowrap; }
.bn__cat svg, .bn__toy svg { display: block; width: 100%; height: auto; overflow: visible; }
/* the toy hangs from the cat's box so the paw always reaches it (knot at 84.2% / 28.2% of the cat);
   it swings from the top of its string (1 toy unit = 0.05cqw) */
.bn__toy { position: absolute; left: 71.05%; top: -122.9%; width: 26.3%; }
.t-swing { transform-origin: 0 -1600px; }
.bn__pal, .bn__guides, .bn__safe, .bn__scan { z-index: 3; pointer-events: none; }
.bn__pal { display: flex; gap: 1.6cqw; opacity: 0; }
.bn__pal i { width: 6cqw; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.14); }
.bn__pal i:nth-child(1) { background: var(--y); }
.bn__pal i:nth-child(2) { background: var(--cream); }
.bn__pal i:nth-child(3) { background: var(--ink); }
.bn__pal i:nth-child(4) { background: #c98a4b; }
.bn__pal i:nth-child(5) { background: var(--coral); }
.bn__guides { inset: 6cqw; opacity: 0; border: 1px solid rgba(226, 32, 140, 0.75); }
.bn__guides::before { content: ""; position: absolute; left: 50%; top: -6cqw; bottom: -6cqw; border-left: 1px solid rgba(226, 32, 140, 0.5); }
.pr[data-step="3"] .bn__guides { opacity: 1; }
.bn__safe { inset: 0; display: none; opacity: 0; }
.bn--9x16 .bn__safe, .bn--story .bn__safe, .bn--char .bn__safe { display: block; }
.pr[data-step="4"] .bn__safe { opacity: 1; }
.bn__safe i {
  position: absolute; left: 0; right: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, rgba(22, 22, 22, 0.16) 0 1.4cqw, transparent 1.4cqw 2.8cqw);
  color: rgba(22, 22, 22, 0.6); font: normal 600 3.6cqw/1 var(--f-label); font-stretch: 80%; letter-spacing: 0.1em; text-transform: uppercase;
}
.bn__safe i:first-child { top: 0; height: 14%; }
.bn__safe i:last-child { bottom: 0; height: 20%; }
.bn__scan { inset: 0; opacity: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%); }

/* 1:1 · 1080×1080 */
.bn--1x1 .bn__logo { left: 6cqw; top: 5.4cqw; font-size: 5.4cqw; }
.bn--1x1 .bn__head { left: 6cqw; top: 15cqw; font-size: 11.2cqw; }
.bn--1x1 .bn__sub { left: 6cqw; top: 38.5cqw; width: 34cqw; font-size: 3cqw; }
.bn--1x1 .bn__badge { left: 63cqw; top: 5cqw; --bw: 17cqw; }
.bn--1x1 .bn__cta { left: 6cqw; bottom: 6cqw; font-size: 3cqw; }
.bn--1x1 .bn__cat { left: 25cqw; bottom: 2cqw; width: 76cqw; }
/* 4:5 · 1080×1350 */
.bn--4x5 .bn__logo { left: 6cqw; top: 5.5cqw; font-size: 5.4cqw; }
.bn--4x5 .bn__head { left: 6cqw; top: 14cqw; font-size: 12.4cqw; }
.bn--4x5 .bn__sub { left: 6cqw; top: 39cqw; width: 52cqw; font-size: 3.3cqw; }
.bn--4x5 .bn__badge { left: 72cqw; top: 4.5cqw; --bw: 21cqw; }
.bn--4x5 .bn__cta { left: 6cqw; bottom: 5cqw; font-size: 3.3cqw; }
.bn--4x5 .bn__cat { left: 4cqw; bottom: 14cqw; width: 90cqw; }
/* 9:16 · 1080×1920, nothing in the top 14% and bottom 20% (Meta's safe zone) */
.bn--9x16 .bn__logo { left: 8cqw; top: 27cqw; font-size: 6cqw; }
.bn--9x16 .bn__head { left: 8cqw; top: 37cqw; font-size: 12.3cqw; }
.bn--9x16 .bn__sub { left: 8cqw; top: 64cqw; width: 64cqw; font-size: 4.2cqw; }
.bn--9x16 .bn__badge { left: 65cqw; top: 25.5cqw; --bw: 22cqw; }
/* here the string hangs from the sticker: it starts behind the sticker's centre (76, 36.5),
   which is also the point it swings from (67.5cqw = 1350 units above the knot) */
/* only the top is cut (the string behind the sticker); sideways and down the banner's edge clips it */
.bn--9x16 .bn__toy { clip-path: inset(12.5cqw -100cqw -100cqw -100cqw); }
.bn--9x16 .t-swing { transform-origin: 0 -1350px; }
.bn--9x16 .bn__cta { left: 8cqw; top: 78cqw; font-size: 4.2cqw; }
.bn--9x16 .bn__cat { left: 12cqw; top: 89cqw; width: 76cqw; }
/* 1.91:1 · 1200×628 */
.bn--link .bn__cat { left: 1cqw; bottom: 1cqw; width: 52cqw; }
.bn--link .bn__logo { left: 57cqw; top: 5.5cqw; font-size: 3.4cqw; }
.bn--link .bn__head { left: 57cqw; top: 12.5cqw; font-size: 7cqw; }
.bn--link .bn__sub { left: 57cqw; top: 27.5cqw; width: 27cqw; font-size: 2.1cqw; }
.bn--link .bn__badge { left: 84cqw; top: 31cqw; --bw: 12cqw; }
.bn--link .bn__cta { left: 57cqw; bottom: 6cqw; font-size: 2.2cqw; }

/* 02 · the board: no artboard yet, every element in its own slot with a caption */
.bn--1x1 .bn__logo { --bx: -40cqw; --by: -3.4cqw; --bs: 1.3; }
.bn--1x1 .bn__head { --bx: 30cqw; --by: -13cqw; --bs: 0.9; }
.bn--1x1 .bn__sub { --bx: 30cqw; --by: -11.5cqw; }
.bn--1x1 .bn__badge { --bx: 41cqw; --by: 15cqw; --bs: 1.3; }
.bn--1x1 .bn__cta { --bx: 30cqw; --by: -44.6cqw; }
.bn--1x1 .bn__cat { --bx: -61cqw; --by: -5.1cqw; --bs: 0.82; }
.bn--1x1 .bn__pal { left: -34cqw; top: 22cqw; }
.pr[data-step="2"] .ab--key .bn { overflow: visible; }
.pr[data-step="2"] .ab--key .bn__bg { opacity: 0; }
.pr[data-step="2"] .ab--key .bn__pal { opacity: 1; }
.pr[data-step="2"] .ab--key [data-part] { transform: translate(var(--bx, 0), var(--by, 0)) scale(var(--bs, 1)); transform-origin: 0 0; }
.pr[data-step="2"] .bn--1x1 .bn__toy { clip-path: inset(80% 0 0 0); }
.pr[data-step="2"] .ab--key [data-label]::after {
  content: attr(data-label); position: absolute; left: 0; top: calc(100% + 1.6cqw); white-space: nowrap;
  color: #8a8478; font: normal 600 1.9cqw/1 var(--f-label); font-stretch: 80%; letter-spacing: 0.1em; text-transform: uppercase;
}
.bn.is-flying { overflow: visible; }

/* ==========================================================================
   NIGHT COURT (Process, project 2): a streetball league under floodlights.
   Same machine as purr.: one template in four formats, positions in cqw of each
   banner; the player, the hoop and the ball come in later from js/pr-court.js.
   ========================================================================== */
.pj-set[data-set="court"] .pr__board { background-color: #0f1430; background-image: radial-gradient(rgba(242, 239, 230, 0.09) 1px, transparent 1.3px); background-size: 18px 18px; }
.pr[data-step="2"] .ab--key .nc [data-label]::after { color: rgba(242, 239, 230, 0.55); font-size: 3.2cqw; top: calc(100% + 2.4cqw); }
/* the passer on TV faces left, so the TV sits on the right and lobs the ball left into the poster */
.ab--story { left: 4.5%; top: 7.5%; width: 19.5%; }
.ab--poster { left: 27%; top: 7.5%; width: 22%; }
.ab--tv { left: 52%; top: 18.2%; width: 44%; }
.ab--led { left: 4%; top: 70%; width: 92%; }
.pr[data-step="2"] .ab--poster, .pr[data-step="3"] .ab--poster { left: 36%; top: 9%; width: 28%; }

.bn.nc {
  --night: #0a0e22; --court: #1e3cff; --chalk: #f2efe6; --ball: #ff6a1a; --lime: #d7ff3a;
  color: var(--chalk);
}
/* the pass: one ball that leaves the TV frame and lands in the poster (sized and moved in js) */
.nc-fly { position: absolute; left: 0; top: 0; z-index: 10; width: 0; height: 0; opacity: 0; pointer-events: none; }
.nc-fly svg { display: block; width: 100%; height: 100%; }
.bn--poster { aspect-ratio: 7 / 10; }
.bn--tv { aspect-ratio: 16 / 9; }
.bn--story { aspect-ratio: 9 / 16; }
.bn--led { aspect-ratio: 8 / 1; }
.nc .bn__pal, .nc .bn__guides, .nc .bn__safe, .nc .bn__scan { z-index: 9; }
.nc .bn__safe i { color: rgba(242, 239, 230, 0.6); background: repeating-linear-gradient(45deg, rgba(242, 239, 230, 0.14) 0 1.4cqw, transparent 1.4cqw 2.8cqw); }
.nc .bn__guides { border-color: rgba(215, 255, 58, 0.7); }
.nc .bn__guides::before { border-color: rgba(215, 255, 58, 0.45); }
.nc .bn__pal i:nth-child(1) { background: #0a0e22; box-shadow: inset 0 0 0 1px rgba(242, 239, 230, 0.3); }
.nc .bn__pal i:nth-child(2) { background: #1e3cff; }
.nc .bn__pal i:nth-child(3) { background: #f2efe6; }
.nc .bn__pal i:nth-child(4) { background: #ff6a1a; }
.nc .bn__pal i:nth-child(5) { background: #d7ff3a; }

/* night sky over a lit court: a haze behind the hoop, the floor from --hz down */
.nc .bn__bg {
  inset: 0;
  background:
    radial-gradient(58% 34% at var(--gx, 62%) var(--gy, 24%), rgba(165, 186, 255, 0.62), rgba(48, 78, 230, 0.22) 52%, transparent 78%),
    linear-gradient(180deg, #0d1640 0%, #0a0e22 calc(var(--hz, 68%) - 0.3%), #172a92 var(--hz, 68%), #0c1546 100%);
}
.nc .bn__bg::after { z-index: 3; opacity: 0.35; filter: invert(1); }
.nc__floor { position: absolute; left: 0; top: var(--hz, 68%); width: 100%; height: calc(100% - var(--hz, 68%)); z-index: 1; fill: none; stroke: rgba(242, 239, 230, 0.3); }
.nc__floor path { stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
/* two cones of light from the banks */
.nc__beam { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.nc__beam::before, .nc__beam::after {
  content: ""; position: absolute; top: var(--by, 8cqw); width: 64%; height: 130%;
  background: linear-gradient(rgba(232, 238, 255, 0.36), rgba(232, 238, 255, 0.08) 62%, transparent 85%);
}
.nc__beam::before { left: var(--b1, 8%); clip-path: polygon(6% 0, 38% 0, 100% 100%, 46% 100%); }
.nc__beam::after { right: var(--b1, 8%); clip-path: polygon(62% 0, 94% 0, 54% 100%, 0 100%); }
.nc__hero { left: var(--hx); top: var(--hy); width: var(--hw); z-index: 3; }
.nc__hero svg, .nc__passer svg { display: block; width: 100%; height: auto; overflow: visible; }
.nc__passer { display: none; z-index: 3; }
.nc__passer path { fill: #05070f; stroke: #24348c; stroke-width: 9; paint-order: stroke; }
.nc-passer .p-lob { opacity: 0; }   /* the overhead pose waits for the pass */
.nc__dark { inset: 0; z-index: 4; background: rgba(1, 2, 8, 0.93); opacity: 0; pointer-events: none; }
.nc__lights { left: 0; right: 0; top: var(--ly, 2.5cqw); height: var(--lh, 6.5cqw); z-index: 5; }
.nc__bank {
  position: absolute; top: 0; left: var(--l1, 9cqw); width: var(--lw, 24cqw); height: 100%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7%; padding: 2.4% 3%;
  border-radius: 0.6cqw; background: #171c36; box-shadow: 0 0 0 0.3cqw #0b0e1e;
}
.nc__bank + .nc__bank { left: auto; right: var(--l1, 9cqw); }
.nc__bank i { border-radius: 18%; background: #fffbe9; box-shadow: 0 0 1.2cqw 0.35cqw rgba(255, 250, 228, 0.8); }
.nc__logo {
  left: var(--ox); top: var(--oy); z-index: 3; display: grid; padding-left: 1.18em; font-size: var(--os);
  font-weight: 900; font-stretch: 62%; line-height: 0.82; letter-spacing: 0.01em; text-transform: uppercase;
}
.nc__logo::before { /* the ball as a moon */
  content: ""; position: absolute; left: 0; top: 0.06em; width: 0.98em; height: 0.98em; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffb07a, var(--ball) 62%); box-shadow: inset -0.3em -0.08em 0 rgba(10, 14, 34, 0.92);
}
.nc__logo small { margin-top: 0.42em; font-size: 0.29em; font-weight: 700; font-stretch: 85%; letter-spacing: 0.2em; color: var(--lime); }
.nc__head {
  left: var(--tx); top: var(--ty); z-index: 5; font-size: var(--ts); font-weight: 900; font-stretch: 62%;
  line-height: 0.84; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 0.22em rgba(205, 220, 255, 0.28);
}
.nc__head > span { display: block; }
.nc__head > span + span { color: var(--ball); }
.nc__head .l { display: inline-block; }
.nc__sub { left: var(--ux); top: var(--uy); z-index: 3; font: 700 var(--us)/1.1 var(--f-label); font-stretch: 85%; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(242, 239, 230, 0.78); }
.nc__badge {
  left: var(--dx); top: var(--dy); z-index: 3; width: var(--bw); aspect-ratio: 1; display: grid; place-content: center; border-radius: 50%;
  background: var(--lime); color: var(--night); font-size: calc(var(--bw) * 0.31); font-weight: 900; font-stretch: 62%; line-height: 0.88;
  text-align: center; text-transform: uppercase; transform: rotate(-10deg);
}
.nc__badge b { font-size: 0.62em; letter-spacing: 0.06em; }
.nc__cta {
  left: var(--cx, auto); right: var(--cr, auto); top: var(--cy); z-index: 3; padding: 0.72em 1.15em; border-radius: 999px;
  background: var(--ball); color: var(--night); font-size: var(--cs); font-weight: 800; font-stretch: 100%; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em;
}
.nc__cta i { font-style: normal; }
.nc__cta i + i, .bn--tv .nc__cta i:first-child { display: none; }
.bn--tv .nc__cta i + i { display: inline; }
/* the broadcast kit: score bug, lower third, live bug (TV) */
.nc__bug, .nc__l3, .nc__live { display: none; z-index: 6; font-weight: 800; font-stretch: 70%; text-transform: uppercase; white-space: nowrap; }
.nc__bug { transform-origin: 0 50%; left: 3.5cqw; top: 3.4cqw; height: 4.6cqw; align-items: stretch; font-size: 2.3cqw; line-height: 1; border-radius: 0.5cqw; overflow: hidden; }
.nc__bug > * { display: grid; place-items: center; padding: 0 1.1cqw; font-style: normal; }
.nc__bug b { background: var(--chalk); color: var(--night); }
.nc__bug b + b { background: #2a2f4c; color: var(--chalk); }
.nc__sc, .nc__sc2 { min-width: 4.2cqw; background: var(--lime); color: var(--night); font-size: 1.25em; }
.nc__sc { position: relative; }
.nc__sc i { grid-area: 1 / 1; font-style: normal; }
.nc__sc i + i { opacity: 0; }
.nc__sc2 { background: #12162c; color: var(--chalk); }
.nc__bug em { background: rgba(10, 14, 34, 0.85); color: rgba(242, 239, 230, 0.85); }
.nc__l3 { left: 3.5cqw; bottom: 4cqw; height: 4.6cqw; padding: 0 1.6cqw 0 1.3cqw; align-items: center; border-left: 0.8cqw solid var(--ball); background: var(--chalk); color: var(--night); font-size: 2.2cqw; }
.nc__l3 i { font-style: normal; }
.nc__l3 i + i { position: absolute; left: 1.3cqw; opacity: 0; }
.nc__live { right: 3.5cqw; top: 3.4cqw; height: 4.6cqw; align-items: center; gap: 0.8cqw; padding: 0 1.2cqw; border-radius: 0.5cqw; background: rgba(10, 14, 34, 0.8); font-size: 2.2cqw; }
.nc__live b { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #ff3b30; }
.nc__ticker, .nc__swish { display: none; }
.nc__flash { inset: 0; z-index: 8; background: #fff; opacity: 0; pointer-events: none; }

/* poster B1 · the key visual */
.bn--poster { --hz: 68%; --gx: 64%; --gy: 22%; --by: 8cqw; --hx: 2cqw; --hy: 7cqw; --hw: 96cqw;
  --ox: 6cqw; --oy: 12cqw; --os: 6.2cqw; --tx: 5.5cqw; --ty: 99cqw; --ts: 20.5cqw; --ux: 6cqw; --uy: 134.5cqw; --us: 2.9cqw;
  --dx: 72cqw; --dy: 66cqw; --bw: 19cqw; --cr: 6cqw; --cy: 131.5cqw; --cs: 3.1cqw; }
.bn--poster .bn__pal { left: 112cqw; top: 52cqw; gap: 2.4cqw; }
.bn--poster .bn__pal i { width: 7cqw; }
/* TV · the broadcast: the player who passes, the kit */
.bn--tv { --hz: 64%; --gx: 71%; --gy: 46%; --ly: 1.6cqw; --lh: 4cqw; --lw: 15cqw; --l1: 6cqw; --by: 5cqw; --b1: 40%;
  --tx: 5cqw; --ty: 13.5cqw; --ts: 10cqw; --ux: 5.3cqw; --uy: 32.4cqw; --us: 1.7cqw;
  --dx: 44.5cqw; --dy: 21cqw; --bw: 9cqw; --cx: 5cqw; --cy: 37cqw; --cs: 1.9cqw; }
/* the banks sit between the score bug and LIVE; each cone comes out of its own bank, one onto
   the court, one onto the passer (the cones span the whole frame here, the shape is the clip) */
.bn--tv .nc__bank { left: 40cqw; }
.bn--tv .nc__bank + .nc__bank { left: 66cqw; right: auto; }
/* the lamps' rows have no height of their own (only the glow shows): on this small bank that read
   as a blur, so they get a bright core as thick as the poster's (~1.5 px) and a glow to match */
.bn--tv .nc__bank i { min-height: 0.42cqw; box-shadow: 0 0 0.55cqw 0.16cqw rgba(255, 250, 228, 0.8); }
.bn--tv .nc__beam::before, .bn--tv .nc__beam::after { left: 0; right: auto; width: 100%; }
.bn--tv .nc__beam::before { clip-path: polygon(41% 0, 54% 0, 52% 100%, 20% 100%); }
.bn--tv .nc__beam::after { clip-path: polygon(67% 0, 80% 0, 96% 100%, 60% 100%); }
.bn--tv .nc__passer { display: block; left: 57cqw; bottom: 2.6cqw; width: 29cqw; }
.bn--tv .nc__bug, .bn--tv .nc__l3, .bn--tv .nc__live { display: flex; }
.bn--tv .nc__hero, .bn--tv .nc__logo { display: none; }
/* story 9:16 · Meta's safe zones: top 14%, bottom 20% */
.bn--story { --hz: 70%; --gx: 46%; --gy: 36%; --ly: 4cqw; --lh: 7.5cqw; --lw: 30cqw; --l1: 7cqw; --by: 11cqw;
  --hx: -2cqw; --hy: 34cqw; --hw: 104cqw; --ox: 7cqw; --oy: 28cqw; --os: 7cqw;
  --tx: 7cqw; --ty: 102cqw; --ts: 17cqw; --dx: 6cqw; --dy: 48cqw; --bw: 18cqw; --cx: 7cqw; --cy: 132.5cqw; --cs: 3.6cqw; }
.bn--story .nc__sub { display: none; }
/* the story's own moment: the dunk is done, he hangs on the rim. No ball here: there is one
   ball in the play, and it goes from the TV into the poster */
.bn--story .h-body, .bn--story .h-bodyB { transform: translate(-123px, 118px) rotate(3deg); }
.bn--story .h-armU, .bn--story .h-armUB { transform: rotate(60deg); }
.bn--story .h-armB { transform: rotate(-16deg); }
.bn--story .h-legB { transform: rotate(8deg); }
.bn--story .h-legF { transform: rotate(-12deg); }
.bn--story .h-head { transform: rotate(6deg); }
.bn--story .h-ball { display: none; }
.bn--story .nc__hero { transform-origin: 61% 23%; }   /* the rim: the camera pushes in on it */
.bn--story .nc__swish {
  display: grid; left: 56cqw; top: 27cqw; z-index: 7; width: 34cqw; aspect-ratio: 1; place-content: center; border-radius: 50%;
  background: var(--lime); color: var(--night); font-size: 7.4cqw; font-weight: 900; font-stretch: 62%; line-height: 0.9; text-align: center;
  text-transform: uppercase; opacity: 0; transform: rotate(-10deg);
}
/* LED board 8:1 · around the court: one line, then it runs */
.bn--led { --ox: 2.2cqw; --oy: 2.4cqw; --os: 3.4cqw; --tx: 16.5cqw; --ty: 3.3cqw; --ts: 6.3cqw; --dx: 72.5cqw; --dy: 1.3cqw; --bw: 9.9cqw; --cx: 85cqw; --cy: 4.4cqw; --cs: 1.7cqw; }
.bn--led .bn__bg { background: #05060c radial-gradient(rgba(242, 239, 230, 0.07) 0.12cqw, transparent 0.16cqw) 0 0 / 0.5cqw 0.5cqw; }
.bn--led .bn__bg::after { display: none; }
.bn--led .nc__head > span { display: inline; }
.bn--led .nc__head > span + span { margin-left: 0.3em; }
.bn--led .nc__floor, .bn--led .nc__beam, .bn--led .nc__hero, .bn--led .nc__lights, .bn--led .nc__sub, .bn--led .nc__dark { display: none; }
.bn--led .nc__logo small { display: none; }
.bn--led .nc__ticker {
  display: flex; left: 0; top: 0; bottom: 0; width: max-content; z-index: 6; align-items: center; white-space: nowrap; opacity: 0;
  font-size: 7.4cqw; font-weight: 900; font-stretch: 62%; text-transform: uppercase; color: var(--lime); text-shadow: 0 0 0.3em rgba(215, 255, 58, 0.45);
}
.bn--led .nc__ticker span { padding-right: 0.4em; }
.bn--led .nc__swish {
  display: grid; inset: 0; z-index: 7; place-items: center; background: var(--lime); color: var(--night); opacity: 0;
  font-size: 8.4cqw; font-weight: 900; font-stretch: 62%; letter-spacing: 0.04em; text-transform: uppercase;
}
/* on air: the LED runs its line (the motion moves it); its still parts make room */
.pr[data-step="5"] .bn--led .nc__ticker { opacity: 1; }
.pr[data-step="5"] .bn--led [data-part] { opacity: 0; }

/* 02 · the board (in poster cqw; the poster sits in the middle at 28% of the stage) */
.bn--poster .nc__hero { --bx: -110cqw; --by: 6cqw; --bs: 0.74; }
.bn--poster .nc__lights { --bx: -104cqw; --by: 112cqw; --bs: 0.62; }
.bn--poster .nc__logo { --bx: 4cqw; --by: -6cqw; --bs: 1.5; }
.bn--poster .nc__head { --bx: 3cqw; --by: -66cqw; --bs: 0.84; }
.bn--poster .nc__sub { --bx: 3cqw; --by: -61.5cqw; }
.bn--poster .nc__badge { --bx: -14cqw; --by: 26cqw; --bs: 1.25; }
.bn--poster .nc__cta { --bx: -57cqw; --by: -45.5cqw; }
.pr[data-step="2"] .bn--poster .nc__bug { display: flex; left: 112cqw; top: 22cqw; font-size: 3.4cqw; height: 6.8cqw; }
.pr[data-step="2"] .bn--poster .nc__dark { display: none; }

/* ==========================================================================
   FIZZ (Process, project 3): a pink lemonade in a can.
   The key visual is the can's label, flat (208×115 mm, sizes in cqw of the label). In 04 it
   rolls up into a 3D can: js cuts a copy of it into 30 strips, each a hinge turned 12° from
   the one before (a closed ring), and tilts the ring 13.7° so we look at it from above, like
   the lid; the metal (neck, lid, bottom) and the shading sit over it, flat. The other formats
   are a citylight, a shelf wobbler and the six-pack. Drawings come from js/pr-fizz.js as
   <use> symbols, so the copies of the label cost no paths.
   ========================================================================== */
.pj-set[data-set="fizz"] .pr__board { background-color: #fff4ea; background-image: radial-gradient(rgba(255, 79, 139, 0.3) 1px, transparent 1.3px); background-size: 18px 18px; }
.pr[data-step="2"] .ab--key .fz [data-label]::after { color: rgba(58, 10, 38, 0.62); font-size: 1.25cqw; top: calc(100% + 1.1cqw); text-shadow: none; -webkit-text-stroke: 0; }
.ab--label { left: 10%; top: 16.4%; width: 76%; }
.ab--city { left: 31%; top: 12.5%; width: 31.2%; }
.ab--wob { left: 71.5%; top: 10%; width: 19%; }
.ab--six { left: 67.5%; top: 63.5%; width: 28.5%; }
.pr[data-step="4"] .ab--label, .pr[data-step="5"] .ab--label { left: -17%; top: 23.8%; width: 64%; }
.ab--label .ab__label i { font-style: normal; }
.ab--label .ab__label i + i, .pr[data-step="4"] .ab--label .ab__label i:first-child, .pr[data-step="5"] .ab--label .ab__label i:first-child { display: none; }
.pr[data-step="4"] .ab--label .ab__label, .pr[data-step="5"] .ab--label .ab__label { left: 34.2%; bottom: calc(100% + 6.6cqw + 6px); }
.pr[data-step="4"] .ab--label .ab__label i + i, .pr[data-step="5"] .ab--label .ab__label i + i { display: inline; }

.bn.fz { --pink: #ff4f8b; --berry: #3a0a26; --mint: #a6ebd0; --lemon: #ffe45c; --cream: #fff4ea; color: var(--berry); }
.bn--label { aspect-ratio: 208 / 115; }
.bn--city { aspect-ratio: 2 / 3; }
.bn--wob { aspect-ratio: 1; border-radius: 50%; }
.bn--six { aspect-ratio: 3 / 2; }
:where(.fz) svg { display: block; width: 100%; height: 100%; overflow: visible; }   /* any class wins over this */
.fz .bn__bg { background: var(--pink); }
.fz .bn__bg::after { display: none; }
.fz .bn__pal, .fz .bn__guides, .fz .bn__scan { z-index: 9; }
.fz .bn__guides { border-color: rgba(58, 10, 38, 0.55); }
.fz .bn__guides::before { border-color: rgba(58, 10, 38, 0.35); }
.fz .bn__pal { gap: 1.1cqw; }
.fz .bn__pal i { width: 4.2cqw; box-shadow: inset 0 0 0 1px rgba(58, 10, 38, 0.18); }
.fz .bn__pal i:nth-child(1) { background: #ff4f8b; }
.fz .bn__pal i:nth-child(2) { background: #3a0a26; }
.fz .bn__pal i:nth-child(3) { background: #a6ebd0; }
.fz .bn__pal i:nth-child(4) { background: #ffe45c; }
.fz .bn__pal i:nth-child(5) { background: #fff4ea; }
/* what only some formats have */
.fz__back, .fz__band, .fz__can, .fz__cta, .fz__fall, .fz__lids, .fz__phases, .fz__sketch, .fz__ice, .fz__die,
.fz__shadow, .fz__shade, .fz__bot, .fz__neck, .fz__wet, .fz__crown, .fz__bubs, .fz__pssst, .fz__liq, .fz__w6, .fz__b2 { display: none; }

/* the parts, as the label has them */
.fz__splash { aspect-ratio: 0.911; }
.fz__hero { aspect-ratio: 1; z-index: 2; }
.fz__logo {
  z-index: 2; font-weight: 900; font-stretch: 125%; line-height: 0.78; letter-spacing: -0.05em; white-space: nowrap;
  color: var(--cream); text-shadow: 0.045em 0.055em 0 var(--berry); transition: color 0.5s;
}
.fz__logo small {
  display: block; margin-top: 0.34em; font-size: 0.15em; font-weight: 800; font-stretch: 100%; line-height: 1;
  letter-spacing: 0.34em; text-transform: uppercase; text-shadow: none; color: var(--berry);
}
.fz__head { z-index: 2; font-weight: 900; font-stretch: 112%; line-height: 0.86; letter-spacing: -0.035em; white-space: nowrap; }
.fz__head .fz__t { display: block; }
.fz__head em { display: block; font-size: 1.3em; line-height: 0.86; letter-spacing: -0.01em; color: var(--cream); transition: color 0.5s; }
.fz__w1 > span { display: block; }
.fz__sub { z-index: 2; font: 800 1.45cqw/1.4 var(--f-label); font-stretch: 85%; letter-spacing: 0.2em; text-transform: uppercase; }
.fz__badge {
  z-index: 2; width: var(--bw); aspect-ratio: 1; display: grid; place-content: center; border-radius: 50%; rotate: -12deg;
  background: var(--mint); color: var(--berry); font-size: calc(var(--bw) * 0.17); font-weight: 800; line-height: 0.9; text-align: center; text-transform: uppercase;
}
.fz__badge b { display: block; font-size: 2.1em; font-weight: 900; font-stretch: 112%; letter-spacing: -0.04em; }
.fz__cta {
  z-index: 2; padding: 0.7em 1.15em; border-radius: 999px; background: var(--mint); color: var(--berry);
  font-weight: 800; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.03em;
}
.fz__cta i { font-style: normal; }
.fz__cta i + i { display: none; }

/* the label · 208×115 mm: back panel, front (logo, lemon, splash), the line on the right */
.bn--label .bn__bg {
  background:
    radial-gradient(circle, transparent 0 0.85cqw, rgba(255, 244, 234, 0.5) 0.9cqw 1.12cqw, transparent 1.17cqw) 1.5cqw 3cqw / 11cqw 12cqw,
    radial-gradient(circle, rgba(255, 244, 234, 0.34) 0 0.42cqw, transparent 0.47cqw) 6.5cqw 8cqw / 7.5cqw 9cqw,
    radial-gradient(120% 100% at 50% 35%, #ff6c9f, var(--pink) 55%, #f53d7d);
}
.bn--label .fz__back, .bn--six .fz__band, .bn--label .fz__band { display: block; }
.fz__back { left: 4cqw; top: 6cqw; width: 22.5cqw; }
.fz__facts { display: grid; gap: 0.45cqw; padding: 1.2cqw 1.4cqw 1.3cqw; border-radius: 1cqw; background: var(--cream); font-size: 1.15cqw; line-height: 1.15; font-weight: 600; }
.fz__facts b { padding-bottom: 0.45cqw; border-bottom: 0.3cqw solid var(--berry); font-size: 1.9cqw; font-weight: 900; font-stretch: 112%; letter-spacing: -0.01em; text-transform: uppercase; }
.fz__facts span { display: flex; justify-content: space-between; gap: 1cqw; padding-bottom: 0.35cqw; border-bottom: 1px solid rgba(58, 10, 38, 0.2); }
.fz__facts em { font-style: normal; font-weight: 800; }
.fz__code { width: 14cqw; margin-top: 1.4cqw; padding: 0.8cqw 1cqw 0.55cqw; border-radius: 0.5cqw; background: #fff; }
.fz__code i {
  display: block; height: 4.6cqw;
  background: repeating-linear-gradient(90deg, var(--berry) 0 0.18cqw, transparent 0 0.36cqw, var(--berry) 0 0.66cqw, transparent 0 0.84cqw, var(--berry) 0 0.94cqw, transparent 0 1.26cqw);
}
.fz__code small { display: block; margin-top: 0.3cqw; font-size: 0.95cqw; font-weight: 600; letter-spacing: 0.14em; text-align: center; }
.fz__ing { margin-top: 1.2cqw; font-size: 1.02cqw; font-weight: 600; line-height: 1.4; }
.fz__band { left: 0; right: 0; bottom: 0; height: 5.2cqw; clip-path: inset(-2cqw 0 0 0); background: var(--mint); white-space: nowrap; }
.fz__band::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.15cqw;
  background: radial-gradient(circle at 50% 100%, var(--mint) 1.1cqw, transparent 1.15cqw) 0 0 / 3.2cqw 100% repeat-x;
}
.fz__band span { position: absolute; left: 0; top: 50%; translate: 0 -50%; font: 800 1.45cqw/1 var(--f-label); font-stretch: 80%; letter-spacing: 0.26em; text-transform: uppercase; }
.bn--label .fz__splash { left: 34.5cqw; top: 1.5cqw; width: 31cqw; }
.bn--label .fz__hero { left: 51.5cqw; top: 25.5cqw; width: 16cqw; }
.bn--label .fz__logo { left: 28cqw; width: 44cqw; top: 9.5cqw; font-size: 15.5cqw; text-align: center; }
.bn--label .fz__sub { left: 33cqw; width: 34cqw; top: 43cqw; text-align: center; }
.bn--label .fz__head { left: 71cqw; top: 9cqw; font-size: 5.6cqw; }
.bn--label .fz__badge { left: 79cqw; top: 31cqw; --bw: 11cqw; }

/* 02 · the board: every part in a slot of its own, and what the label is made of */
.bn--label .fz__logo { --bx: -28cqw; --by: -15.5cqw; --bs: 0.7; }
.bn--label .fz__head { --bx: -37cqw; --by: -15cqw; }
.bn--label .fz__sub { --bx: -2cqw; --by: -29.5cqw; }
.bn--label .fz__badge { --bx: 21cqw; --by: -30.5cqw; }
.bn--label .fz__splash { --bx: 40cqw; --by: -7.5cqw; --bs: 0.62; }
.bn--label .fz__hero { --bx: 9.5cqw; --by: 7.5cqw; --bs: 0.85; }
.bn--label .bn__pal { left: 0; top: 10.5cqw; }
.pr[data-step="2"] .ab > .bn--label > .fz__phases { display: flex; align-items: flex-end; gap: 3cqw; left: 15cqw; top: 32cqw; height: 15cqw; }
.fz__phases svg { width: auto; height: 100%; }
.fz__phases svg:nth-child(1) { aspect-ratio: 0.682; }
.fz__phases svg:nth-child(2) { aspect-ratio: 0.96; height: 88%; }
.fz__phases svg:nth-child(3) { aspect-ratio: 1.921; height: 50%; }
.pr[data-step="2"] .ab > .bn--label > .fz__sketch { display: block; left: -3cqw; top: 23cqw; width: 13cqw; aspect-ratio: 0.484; }
.pr[data-step="2"] .ab > .bn--label > .fz__ice { display: block; left: 99cqw; top: 33cqw; width: 11cqw; aspect-ratio: 0.989; }
.pr[data-step="2"] .ab > .bn--label > .fz__crown { display: block; left: 80cqw; top: 37cqw; width: 15cqw; opacity: 1; }
.pr[data-step="2"] .ab > .bn--label > :is(.fz__back, .fz__band) { opacity: 0; }
.pr[data-step="2"] .ab > .bn--label > .fz__logo, .pr[data-step="2"] .ab > .bn--label > .fz__head em { color: var(--pink); }

/* 03 · the key visual: the label as the printer gets it. Cut line (magenta), bleed (cyan),
   a strip for the glue, the sizes */
.pr[data-step="3"] .ab > .bn--label { overflow: visible; }
.pr[data-step="3"] .ab > .bn--label > .fz__die { display: block; }
.fz__die { inset: 0; z-index: 8; pointer-events: none; outline: 1px dashed #ff3dac; color: #ff3dac; font: 700 1.15cqw/1 var(--f-label); font-stretch: 80%; letter-spacing: 0.14em; text-transform: uppercase; }
.fz__die > * { position: absolute; }
.fz__bleed { inset: -1.44cqw; border: 1px solid rgba(64, 196, 255, 0.85); }
.fz__glue {
  left: 100%; top: 0; bottom: 0; width: 3.4cqw; outline: 1px dashed #ff3dac;
  background: repeating-linear-gradient(45deg, rgba(166, 235, 208, 0.75) 0 0.5cqw, rgba(166, 235, 208, 0.2) 0 1cqw);
}
.fz__glue span { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: 90deg; white-space: nowrap; color: #a6ebd0; }
.fz__dim { border-color: currentColor; }
.fz__dim--w { left: 0; right: 0; top: calc(100% + 3cqw); border-top: 1px solid; }
.fz__dim--h { top: 0; bottom: 0; right: calc(100% + 3cqw); border-left: 1px solid; }
.fz__dim::before, .fz__dim::after { content: ""; position: absolute; background: currentColor; }
.fz__dim--w::before, .fz__dim--w::after { top: -0.7cqw; width: 1px; height: 1.4cqw; left: 0; }
.fz__dim--w::after { left: auto; right: 0; }
.fz__dim--h::before, .fz__dim--h::after { left: -0.7cqw; height: 1px; width: 1.4cqw; top: 0; }
.fz__dim--h::after { top: auto; bottom: 0; }
.fz__dim span { position: absolute; left: 50%; top: 0; translate: -50% -50%; padding: 0 0.8cqw; background: #0d0d0f; white-space: nowrap; }
.fz__dim--h span { top: 50%; left: 0; rotate: -90deg; }
.fz__note { right: 0; bottom: calc(100% + 2.4cqw); color: rgb(64, 196, 255); }
.fz__front { left: 50%; bottom: calc(100% + 2.4cqw); translate: -50% 0; }
.fz__front::after { content: ""; position: absolute; left: 50%; top: calc(100% + 0.5cqw); height: 1.5cqw; border-left: 1px solid; }

/* 04 · the label rolls up into a can. The ring of strips (built in js) turns about the can's
   axis, 15.857cqw behind the front strip (the apothem of 30 strips 3.333cqw wide); the can is
   31.8cqw wide, its label's sides run from 0.785cqw to 54.51cqw (tilted 13.7°) */
.fz-3d { inset: 0; z-index: 2; display: none; pointer-events: none; }
.fz-roll, .fz-spin { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 50% -15.857cqw; }
.fz-h { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; }
.fz-h--r { left: 100%; transform-origin: 0 50%; }
.fz-h--l { right: 100%; transform-origin: 100% 50%; }
.fz-f { position: absolute; inset: 0 -0.15cqw; overflow: hidden; backface-visibility: hidden; }   /* a hair wider: no seams */
.fz-f > .bn { position: absolute; top: 0; width: 100cqw; }
.fz-b { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; background: linear-gradient(90deg, #ece6dc, #f7f2ea); }
/* a pink plane through the axis, a little shorter than the label (under the lid's arc at the top) */
.fz-core { position: absolute; left: 34.15cqw; width: 31.7cqw; top: 4.2cqw; height: 50.3cqw; transform: translateZ(-15.857cqw); background: #fb4b88; }
.pr[data-step="4"] .ab > .bn--label, .pr[data-step="5"] .ab > .bn--label { overflow: visible; }
.pr[data-step="4"] .ab > .bn--label > [data-print], .pr[data-step="5"] .ab > .bn--label > [data-print] { visibility: hidden; }
.pr[data-step="4"] .bn--label .fz-3d, .pr[data-step="5"] .bn--label .fz-3d { display: block; }
.pr[data-step="4"] .bn--label .fz-roll, .pr[data-step="5"] .bn--label .fz-roll { transform: rotateX(-13.7deg); }
.pr[data-step="4"] .bn--label .fz-h--r, .pr[data-step="5"] .bn--label .fz-h--r { transform: rotateY(12deg); }
.pr[data-step="4"] .bn--label .fz-h--l, .pr[data-step="5"] .bn--label .fz-h--l { transform: rotateY(-12deg); }
.pr[data-step="4"] .ab > .bn--label > :is(.fz__shadow, .fz__shade, .fz__bot, .fz__neck, .fz__wet, .fz__crown, .fz__bubs, .fz__pssst),
.pr[data-step="5"] .ab > .bn--label > :is(.fz__shadow, .fz__shade, .fz__bot, .fz__neck, .fz__wet, .fz__crown, .fz__bubs, .fz__pssst) { display: block; }
/* the metal, from the Freepik can: the neck and lid above the label, the bottom under it */
.fz__neck { left: 33.83cqw; top: -9.64cqw; width: 32.36cqw; height: 15.01cqw; z-index: 4; }
.fz__mouth { opacity: 0; }
.fz__tab { z-index: 5; transform-origin: 44.2% 27%; }
.fz__bot { left: 33.83cqw; top: 53.96cqw; width: 32.36cqw; height: 10.15cqw; z-index: 4; }
.fz__shade, .fz__cshade {
  background: linear-gradient(90deg, rgba(58, 0, 30, 0.42), rgba(58, 0, 30, 0.1) 8%, transparent 14%, rgba(255, 255, 255, 0.38) 21%,
    rgba(255, 255, 255, 0.08) 29%, transparent 44%, rgba(58, 0, 30, 0.08) 64%, rgba(58, 0, 30, 0.3) 85%, rgba(58, 0, 30, 0.52));
}
.fz__shade { left: 34.1cqw; width: 31.8cqw; top: 0.785cqw; height: 57.5cqw; z-index: 3; }
.fz__shadow { left: 27cqw; width: 46cqw; top: 58cqw; height: 9cqw; z-index: 1; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); }
/* cold: drops of condensation on the can */
.fz__wet { left: 34.1cqw; width: 31.8cqw; top: 3cqw; height: 50cqw; z-index: 5; pointer-events: none; }
.fz__wet i {
  position: absolute; width: 0.95cqw; height: 1.35cqw; border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%;
  background: radial-gradient(circle at 36% 34%, #fff 0 16%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.12) 64%, rgba(255, 255, 255, 0.5) 86%);
  box-shadow: 0.12cqw 0.18cqw 0 rgba(58, 10, 38, 0.3);
}
.fz__wet i:nth-child(1) { left: 22%; top: 14%; }
.fz__wet i:nth-child(2) { left: 61%; top: 30%; scale: 0.8; }
.fz__wet i:nth-child(3) { left: 76%; top: 8%; scale: 1.15; }
/* the pssst: a crown of lemonade out of the mouth, a word, bubbles. The mouth (the dark opening in
   the lid) is centred at 47.5cqw / -6.6cqw; the crown's pool (51% across its width) sits on it and
   reaches below its front rim, so no dark edge of the opening shows under the lemonade */
.fz__crown { left: 39.85cqw; top: -14.2cqw; width: 15cqw; aspect-ratio: 1.564; z-index: 6; transform-origin: 51% 100%; opacity: 0; pointer-events: none; }
.fz__bubs { left: 41.5cqw; top: -9cqw; width: 12cqw; height: 4cqw; z-index: 6; pointer-events: none; }
.fz__bubs i, .fz-fly i, .fz-lid b {
  position: absolute; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 32% 30%, #fff 0 13%, transparent 17%), radial-gradient(circle, rgba(255, 244, 234, 0.12) 0 56%, rgba(255, 244, 234, 0.85) 64% 70%, transparent 73%);
}
.fz__bubs i { width: 1.6cqw; aspect-ratio: 1; bottom: 0; }
.fz__bubs i:nth-child(1) { left: 30%; }
.fz__bubs i:nth-child(2) { left: 52%; width: 1.1cqw; }
.fz__bubs i:nth-child(3) { left: 44%; width: 2cqw; }
.fz__bubs i:nth-child(4) { left: 62%; width: 1.3cqw; }
.fz__bubs i:nth-child(5) { left: 36%; width: 0.9cqw; }
.fz__bubs i:nth-child(6) { left: 56%; width: 1.7cqw; }
.fz__pssst {
  left: 56cqw; top: -17cqw; z-index: 7; font-size: 4.6cqw; font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; color: var(--cream);
  -webkit-text-stroke: 0.05em var(--berry); paint-order: stroke fill; text-shadow: 0.05em 0.07em 0 var(--berry); transform: rotate(-10deg); opacity: 0; pointer-events: none;
}
/* the still of 05: the can is open */
.pr[data-step="5"] .ab > .bn--label > :is(.fz__crown, .fz__pssst, .fz__mouth) { opacity: 1; }
.pr[data-step="5"] .ab > .bn--label > .fz__tab { transform: translateY(-3%) rotate(-30deg); }
.fz-fly { position: absolute; left: 0; top: 0; z-index: 10; width: 0; height: 0; pointer-events: none; }
.fz-fly i { left: 0; top: 0; width: 20px; height: 20px; }

/* the small can (citylight): copies of the label bent round its front (strips built in js), the same metal */
.fz__can { z-index: 2; aspect-ratio: 1 / 1.6893; container-type: inline-size; }
.fz__can > * { position: absolute; }
.fz__cbody { left: 0; top: 0; width: 100%; height: calc(100% + 11.8cqw); overflow: hidden; container-type: inline-size; background: #fb4b88; }
.fz-cs { position: absolute; top: 0; height: calc(100% - 11.8cqw); overflow: hidden; transform-origin: 0 0; }
.fz-cs > .bn { position: absolute; top: 0; width: 314.16cqw; height: 100%; aspect-ratio: auto; }
.fz__cshade { left: 0; top: 0; width: 100%; height: calc(100% + 11.8cqw); }
.fz__cneck { left: -0.86cqw; top: -32.77cqw; width: 101.76cqw; height: 47.21cqw; }
.fz__cbot { left: -0.86cqw; top: calc(100% - 1.72cqw); width: 101.76cqw; height: 31.91cqw; }

/* citylight 4:6 · a bus stop at night: the letters are empty glass that fills with lemonade */
.bn--city > .bn__bg {
  background: radial-gradient(64% 40% at 50% 66%, rgba(255, 79, 139, 0.78), rgba(255, 79, 139, 0.16) 62%, transparent 82%),
    radial-gradient(100% 50% at 50% 0%, #5c1239, transparent 72%), var(--berry);
}
/* (child combinators here: the small can in the citylight holds a copy of the label, which these must not touch) */
.bn--city > :is(.fz__can, .fz__cta, .fz__fall), .bn--city > .fz__head .fz__liq, .bn--city > .fz__badge .fz__b2 { display: block; }
.bn--city > .fz__badge .fz__b1 { display: none; }
.bn--city > .fz__head { left: 7cqw; top: 7cqw; font-size: 15.5cqw; color: var(--cream); }
.bn--city > .fz__head > .fz__t { color: transparent; -webkit-text-stroke: 0.022em rgba(255, 244, 234, 0.85); }
.bn--city > .fz__head > .fz__t em { color: transparent; -webkit-text-stroke-color: rgba(255, 228, 92, 0.9); }
.bn--city > .fz__head em { font-size: 1.32em; color: var(--lemon); }
.fz__liq { position: absolute; inset: -0.2em -0.4em; overflow: hidden; }
.fz__liq > .fz__t {
  position: absolute; left: 0.4em; top: 0.2em; right: 0.4em; color: transparent; -webkit-text-stroke: 0.022em rgba(255, 244, 234, 0.85);
  background: radial-gradient(circle, rgba(255, 244, 234, 0.75) 0 0.035em, transparent 0.045em) 0 0 / 0.37em 0.41em,
    radial-gradient(circle, rgba(255, 244, 234, 0.5) 0 0.022em, transparent 0.03em) 0.19em 0.2em / 0.29em 0.33em,
    linear-gradient(#ff9cc0, var(--pink) 45%, #e8326f);
  -webkit-background-clip: text; background-clip: text;
}
.fz__liq > .fz__t em { color: var(--lemon); -webkit-text-stroke-color: rgba(255, 228, 92, 0.9); }
.bn--city > .fz__sub { left: 7.5cqw; top: 53cqw; font-size: 2.6cqw; color: rgba(255, 244, 234, 0.82); }
.bn--city > .fz__can { left: 35cqw; top: 75cqw; width: 30cqw; }
.bn--city > .fz__splash { left: 19cqw; top: 63cqw; width: 62cqw; }
.bn--city > .fz__hero { left: 61cqw; top: 112cqw; width: 21cqw; }
.bn--city > .fz__badge { left: 9cqw; top: 82cqw; --bw: 19cqw; background: var(--lemon); }
.bn--city > .fz__logo { left: 63cqw; top: 136.5cqw; font-size: 10cqw; }
.bn--city > .fz__logo small { display: none; }
.bn--city > .fz__cta { left: 7cqw; top: 137cqw; font-size: 3.4cqw; }
.fz__fall { inset: 0; z-index: 3; pointer-events: none; }
.fz__fall svg { position: absolute; width: var(--w); height: auto; aspect-ratio: 1; }
.fz__fall svg:nth-child(1) { left: 8cqw; top: 111cqw; --w: 17cqw; }
.fz__fall svg:nth-child(2) { left: 72cqw; top: 93cqw; --w: 14cqw; }
.fz__fall svg:nth-child(3) { left: 25cqw; top: 125cqw; --w: 13cqw; }

/* wobbler Ø 100 mm · on a clear stem at the shelf edge; it rocks when it gets hit */
.fz-swing { position: relative; transform-origin: 50% 132%; }
.fz-stem {
  position: absolute; left: 45.5%; width: 9%; top: 93%; height: 39%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.75) 30%, rgba(255, 255, 255, 0.22) 62%, rgba(255, 255, 255, 0.45));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.fz-shelf { position: absolute; left: -14%; right: -14%; top: 131%; height: 11%; border-radius: 2px; background: linear-gradient(#d9dce0, #a2a8ae); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); }
.fz-shelf b { position: absolute; right: 9%; top: 18%; bottom: 18%; display: grid; place-items: center; padding: 0 4%; background: #fff; color: #1d1d1f; font: 800 1.2cqw/1 var(--f-label); font-stretch: 85%; }
.bn--wob .bn__bg { background: radial-gradient(circle closest-side, var(--lemon) 0 76%, #ffd23e 80%, var(--cream) 80.5% 85%, var(--pink) 85.5%); }
.bn--wob .fz__logo { left: 0; right: 0; top: 14cqw; text-align: center; font-size: 13cqw; color: var(--pink); }
.bn--wob .fz__logo small, .bn--wob :is(.fz__head, .fz__sub, .fz__badge, .fz__splash) { display: none; }
.bn--wob .fz__cta {
  display: block; left: 8cqw; right: 8cqw; top: 31cqw; padding: 0; background: none; text-align: center; white-space: normal;
  font-size: 12.5cqw; font-weight: 900; font-stretch: 112%; line-height: 0.88; letter-spacing: -0.03em;
}
.bn--wob .fz__cta i:first-child { display: none; }
.bn--wob .fz__cta i + i { display: inline; }
.bn--wob .fz__hero { left: 38.5cqw; top: 63cqw; width: 23cqw; }

/* six-pack · the sleeve over six cans; their lids show above it and pop one by one */
.bn--six { overflow: visible; }
.bn--six .bn__bg { top: 24cqw; border-radius: 1cqw 1cqw 0 0; background: linear-gradient(#c3f5e2, var(--mint) 40%, #8ed9be); }
.bn--six .fz__lids, .bn--six .fz__w6 { display: block; }
.bn--six .fz__w1, .bn--six :is(.fz__badge, .fz__splash, .fz__cta) { display: none; }
.fz__lids { left: 0; top: 0; width: 100%; height: 26cqw; z-index: 0; }
.fz-lid { position: absolute; width: 30cqw; aspect-ratio: 2.156; }
.fz-lid > svg { position: absolute; inset: 0; }
.fz-lt { transform-origin: 44.2% 27%; }
.fz-lid:nth-child(-n+3) { top: 3.5cqw; }
.fz-lid:nth-child(n+4) { top: 10cqw; }
.fz-lid:nth-child(3n+1) { left: 5cqw; }
.fz-lid:nth-child(3n+2) { left: 35cqw; }
.fz-lid:nth-child(3n) { left: 65cqw; }
.fz-lid b { left: 47%; top: 10%; width: 3cqw; aspect-ratio: 1; }
.fz-lid b + b { left: 58%; width: 2cqw; }
.bn--six .fz__logo { left: 6cqw; top: 31cqw; font-size: 14cqw; color: var(--pink); }
.bn--six .fz__head { left: 47cqw; top: 31.5cqw; font-size: 7cqw; }
.bn--six .fz__head .fz__t { white-space: nowrap; }
.bn--six .fz__head em { display: inline; color: var(--pink); }
.bn--six .fz__sub { left: 47cqw; top: 44cqw; width: 28cqw; font-size: 1.75cqw; }
.bn--six .fz__hero { left: 79cqw; top: 41cqw; width: 15cqw; }
.bn--six .fz__band { height: 4.4cqw; background: var(--pink); }
.bn--six .fz__band::before { background: radial-gradient(circle at 50% 100%, var(--pink) 1.1cqw, transparent 1.15cqw) 0 0 / 3.2cqw 100% repeat-x; }
.bn--six .fz__band span { font-size: 1.3cqw; color: var(--cream); }
/* the render pass would sweep past the can (the label doesn't clip in 04/05): the can has its own shine */
.ab > .bn--label > .bn__scan { display: none; }

/* 05 · on air */
.pr__hud { display: flex; gap: 8px; align-items: center; }
.pr__live, .pr__pause {
  display: inline-flex; gap: 7px; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px;
  background: rgba(10, 10, 11, 0.72); border: 1px solid var(--line-2); color: var(--text);
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.pr__live { order: 2; display: none; }
.pr__live b { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); }
.pr[data-step="5"] .pr__live { display: inline-flex; }
html.is-lite .pr[data-step="5"] .pr__live { display: none; }  /* stills: nothing is live */
html:not(.is-lite) .pr[data-step="5"]:not(.is-paused) .pr__live b { animation: recBlink 1.1s steps(1) infinite; }
@keyframes recBlink { 50% { opacity: 0.2; } }
.pr__pause:hover { border-color: var(--text); }
.pr__icon { width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.pr.is-paused .pr__icon { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; }

/* ==========================================================================
   AFTERLIGHT (Process, project 4): key art for a made-up sci-fi film, composited from
   photographs (tools/build_afterlight.py cuts and grades them into media/process/afterlight).
   Every banner is the same stack of layers, back to front: sky, planet, dune, hero, dust,
   grade, title, billing block (and the app's chrome); sizes in cqw of each banner. In 03 the
   one-sheet comes apart into those layers in 3D and goes back together (js), so the layers
   are wrappers of their own: the parts inside them keep their transforms for the moves
   between the steps.
   ========================================================================== */
.pj-set[data-set="afterlight"] .pr__board {
  background-color: #121216; background-image: radial-gradient(rgba(241, 230, 210, 0.08) 1px, transparent 1.3px); background-size: 18px 18px;
}
.pj-set[data-set="afterlight"] .brief__line strong { font-size: 4.1cqw; }
/* the labels on the board: the parts are scaled there, the labels shouldn't be */
.pr[data-step="2"] .ab--key .al [data-label]::after {
  top: calc(100% + 1.6cqw / var(--bs, 1)); color: rgba(241, 230, 210, 0.6); font-size: calc(1.9cqw / var(--bs, 1)); text-shadow: none;
}
.ab--sheet { left: 32%; top: 6.5%; width: 36%; }
.ab--char { left: 28.7%; top: 7%; width: 14.4%; }
.ab--app { left: 46.1%; top: 7%; width: 45.5%; }
.ab--bull { left: 8.4%; top: 56.5%; width: 83.2%; }
.pr[data-step="4"] .ab--sheet, .pr[data-step="5"] .ab--sheet { left: 8.4%; top: 7%; width: 17.3%; }
.pj-set[data-set="afterlight"] .ab__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }   /* (narrow frames: never into the next one's) */

.bn.al { --ivory: #f1e6d2; --amber: #e08a3c; --rust: #8c3a1b; --space: #07080c; --visor: #8fd3e8; color: var(--ivory); perspective: 240cqw; }
.bn--sheet { aspect-ratio: 27 / 40; }
.bn--char { aspect-ratio: 9 / 16; }
.bn--app { aspect-ratio: 16 / 9; }
.bn--bull { aspect-ratio: 48 / 14; }
.al__stack { inset: 0; transform-style: preserve-3d; transform-origin: 50% 55%; }
.al__l { position: absolute; inset: 0; }
.al__l > *, .al__stack > .bn__guides { position: absolute; margin: 0; }
.al picture, .al img { display: block; width: 100%; height: auto; }
/* each layer's frame and name, seen only while the one-sheet is pulled apart */
.al__name {
  inset: 0; display: block; padding: 2.2cqw 2.6cqw; border: 1px solid rgba(241, 230, 210, 0.5); background: rgba(241, 230, 210, 0.025);
  opacity: 0; pointer-events: none; color: var(--ivory); font: normal 600 3.6cqw/1 var(--f-label); font-stretch: 80%; letter-spacing: 0.1em; text-transform: uppercase;
}
/* 01 sky: night over a warm horizon, --h is where the light sits; the stars fade out above it */
.al .bn__bg {
  --h: 64%; inset: 0;
  background: linear-gradient(180deg, #040509 0%, #0b0a12 calc(var(--h) - 30%), #261320 calc(var(--h) - 13%), #7a3218 calc(var(--h) - 4%), #e08a3c var(--h), #7a3218 calc(var(--h) + 8%), #1e0d0a 100%);
}
.al .bn__bg::after {
  opacity: 0.85; background: url("../media/process/afterlight/stars.webp") 0 0 / 40cqw repeat;
  -webkit-mask-image: linear-gradient(#000 calc(var(--h) - 36%), transparent calc(var(--h) - 10%)); mask-image: linear-gradient(#000 calc(var(--h) - 36%), transparent calc(var(--h) - 10%));
}
/* 02 the planet: the disc's centre is at 53.2% / 52.3% of the plate; it leans a little, and glows */
.al__planet { left: -51cqw; top: 20cqw; width: 190cqw; }
.al__planet picture { transform: rotate(-7deg); transform-origin: 53.2% 52.3%; }
.al__planet::before {
  content: ""; position: absolute; left: 53.2%; top: 52.3%; width: 52%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(224, 138, 60, 0.3), rgba(224, 138, 60, 0.1) 62%, transparent);
}
/* 03 the dune, 04 the hero walking up its lit side */
.al__dune { left: -118cqw; top: 66cqw; width: 230cqw; }
.al__hero { left: 31cqw; top: 88.4cqw; width: 8cqw; aspect-ratio: 537 / 1236; }
.al__hero > picture, .al__ants { position: absolute; inset: 0; }
.al__raw, .al__ants { opacity: 0; }
/* (the selection is drawn on with a clip-path on its wrapper: on the <svg> itself it wouldn't run on the compositor) */
.al__ants svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #18181b; stroke-width: 1.3px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.pr[data-step="5"] .al__hero { transform-origin: 50% 100%; }   /* he gets smaller from his feet */
.al__shadow { position: absolute; left: -36%; right: -16%; bottom: -3%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 4, 6, 0.8), transparent); }
/* the close-up (the character poster's hero); the visor (an ellipse at 44.5% / 7.8%, 34.5% × 49.3%
   of the photo) reflects the planet, mirrored */
.al__face { display: none; aspect-ratio: 1000 / 824; }
.al__visor { position: absolute; left: 44.5%; top: 7.8%; width: 34.5%; height: 49.3%; overflow: hidden; clip-path: ellipse(50% 50% at 50% 50%); mix-blend-mode: screen; }
.al__visor picture { position: absolute; left: 42%; top: 18.2%; width: 60%; scale: -1 1; opacity: 0.8; }
.al__glint {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 24%; transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 246, 232, 0.4), transparent);
}
/* 05 dust, 06 the grade */
.al__dust { left: -20cqw; top: 58cqw; width: 140cqw; }
.al__dust picture { opacity: 0.42; }
.al__grade { inset: 0; background: linear-gradient(180deg, rgba(4, 4, 7, 0.55) 0%, transparent 20%, transparent 66%, rgba(4, 4, 7, 0.86) 84%, #040407 100%); }
/* 07 the title: wide and light, like a film's; a hot copy of it shows through a window that
   crosses it (the shine), with an anamorphic streak (js) */
.al__tag, .al__title, .al__date { left: 0; width: 100cqw; text-align: center; white-space: nowrap; text-transform: uppercase; }
.al__tag { top: 9cqw; font-size: 2.4cqw; font-weight: 500; font-stretch: 110%; letter-spacing: 0.42em; text-indent: 0.42em; color: rgba(241, 230, 210, 0.82); }
.al__title {
  top: 116cqw; font-size: 9.2cqw; font-weight: 300; font-stretch: 125%; line-height: 1; letter-spacing: 0.2em; text-indent: 0.2em;
  text-shadow: 0 0 0.6em rgba(224, 138, 60, 0.35);
}
.al__title > span { display: block; }
.al__shine {
  position: absolute; left: 0; top: -0.3em; width: 26%; height: 1.6em; overflow: hidden; opacity: 0; transform: translateX(-100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent); mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
}
.al__shine > span { position: absolute; left: 0; top: 0.3em; width: calc(100% / 0.26); color: #fff8ec; text-shadow: 0 0 0.25em #ffd9a8, 0 0 0.8em rgba(224, 138, 60, 0.9); }
.al__flare {
  left: 8cqw; top: 120.4cqw; width: 84cqw; height: 0.45cqw; opacity: 0; border-radius: 50%; filter: blur(0.12cqw);
  background: linear-gradient(90deg, transparent, rgba(143, 211, 232, 0.85) 46%, #fff 50%, rgba(255, 196, 130, 0.85) 54%, transparent);
}
.al__date { top: 129.5cqw; font-size: 2.1cqw; font-weight: 600; font-stretch: 100%; letter-spacing: 0.32em; text-indent: 0.32em; color: var(--amber); }
.al__date i { font-style: normal; }
.al__date i + i { display: none; }
/* 08 the billing block: tall, narrow type, names in bold */
.al__bill {
  left: 13cqw; top: 135.5cqw; width: 74cqw; font-size: 1.32cqw; font-weight: 400; font-stretch: 62%; line-height: 1.15; letter-spacing: 0.04em;
  text-align: center; text-transform: uppercase; color: rgba(241, 230, 210, 0.58);
}
.al__bill b { font-weight: 700; font-size: 1.4em; }
/* the streaming app's chrome */
.al__l--ui { display: none; }
.al__nav {
  left: 0; right: 0; top: 0; height: 6.6cqw; display: flex; align-items: center; gap: 2.6cqw; padding: 0 4cqw;
  background: linear-gradient(rgba(4, 4, 7, 0.85), transparent); font-size: 1.45cqw; font-weight: 600; color: rgba(241, 230, 210, 0.66);
}
.al__nav b { margin-right: 1.5cqw; font-size: 2.4cqw; font-weight: 800; font-stretch: 125%; letter-spacing: -0.02em; color: var(--ivory); }
.al__nav span:first-of-type { color: var(--ivory); }
.al__new {
  left: 5cqw; top: 13cqw; display: flex; align-items: center; gap: 0.8cqw; color: var(--amber);
  font-size: 1.25cqw; font-weight: 700; font-stretch: 100%; letter-spacing: 0.24em; text-transform: uppercase;
}
.al__new::before { content: ""; width: 2.4cqw; height: 1px; background: currentColor; }
.al__btns { left: 5cqw; top: 33cqw; display: flex; gap: 1.2cqw; font-size: 1.45cqw; font-weight: 700; white-space: nowrap; }
.al__btns span { padding: 0.8em 1.4em; border-radius: 0.4em; background: var(--ivory); color: #0a0a0b; }
.al__btns span + span { background: rgba(241, 230, 210, 0.14); color: var(--ivory); }
.al__bar { left: 5cqw; top: 40.6cqw; width: 28cqw; height: 0.36cqw; background: rgba(241, 230, 210, 0.2); }
.al__bar i { position: absolute; inset: 0; background: var(--amber); transform: scaleX(0.18); transform-origin: 0 0; }
.al__row { left: 5cqw; top: 44.6cqw; display: flex; gap: 1.2cqw; }
.al__row i { flex: none; width: 15.4cqw; height: 8.66cqw; border-radius: 0.5cqw; box-shadow: inset 0 0 0 1px rgba(241, 230, 210, 0.08); }
.al__row i:nth-child(1) { background: linear-gradient(135deg, #6a2e1a, #1c0f0c); }
.al__row i:nth-child(2) { background: linear-gradient(160deg, #20345a, #0c1220); }
.al__row i:nth-child(3) { background: linear-gradient(135deg, #3d4a2c, #12160d); }
.al__row i:nth-child(4) { background: linear-gradient(150deg, #5a1f3c, #160a12); }
.al__row i:nth-child(5) { background: linear-gradient(135deg, #2c2c34, #0f0f12); }
.al__dark { inset: 0; z-index: 5; background: #020203; opacity: 0; pointer-events: none; }
.al .bn__pal, .al .bn__guides, .al .bn__safe, .al .bn__scan { z-index: 6; }
.al .bn__guides { border-color: rgba(143, 211, 232, 0.7); }
.al .bn__guides::before { border-color: rgba(143, 211, 232, 0.45); }
.al .bn__safe i { color: rgba(241, 230, 210, 0.6); background: repeating-linear-gradient(45deg, rgba(241, 230, 210, 0.13) 0 1.4cqw, transparent 1.4cqw 2.8cqw); }
.al .bn__pal i { box-shadow: inset 0 0 0 1px rgba(241, 230, 210, 0.25); }
.al .bn__pal i:nth-child(1) { background: #07080c; }
.al .bn__pal i:nth-child(2) { background: #e08a3c; }
.al .bn__pal i:nth-child(3) { background: #8c3a1b; }
.al .bn__pal i:nth-child(4) { background: #f1e6d2; }
.al .bn__pal i:nth-child(5) { background: #8fd3e8; }

/* character poster 9:16 · the close-up, the planet small above, Meta's safe zones */
.bn--char .bn__bg { --h: 62%; }
.bn--char .bn__safe { display: block; }
.bn--char .al__planet { left: -12cqw; top: 9cqw; width: 112cqw; }
.bn--char .al__dune { left: -70cqw; top: 84cqw; width: 210cqw; }
.bn--char .al__hero, .bn--char .al__bill { display: none; }
.bn--char .al__face { display: block; left: -36cqw; top: 55cqw; width: 150cqw; }
.bn--char .al__dust { left: -30cqw; top: 88cqw; width: 160cqw; }
.bn--char .al__grade { background: linear-gradient(180deg, rgba(4, 4, 7, 0.5), transparent 18%, transparent 52%, rgba(4, 4, 7, 0.86) 68%, #040407 84%); }
.bn--char .al__tag { top: 110cqw; font-size: 2.6cqw; }
.bn--char .al__title { top: 117cqw; }
.bn--char .al__flare { top: 121.4cqw; }
.bn--char .al__date { top: 130.5cqw; font-size: 2.6cqw; }
.al__cta { display: none; }
.bn--char .al__cta {
  display: block; left: 27cqw; top: 137cqw; width: 46cqw; padding: 0.75em 0; border: 1px solid rgba(241, 230, 210, 0.45); border-radius: 999px;
  background: rgba(241, 230, 210, 0.1); text-align: center; font-size: 2.5cqw; font-weight: 700; font-stretch: 100%; letter-spacing: 0.14em; text-transform: uppercase;
}
/* streaming app 16:9 · the art on the right, the app's type on the left */
.bn--app .bn__bg { --h: 70%; }
.bn--app .al__l--ui { display: block; }
.bn--app .al__planet { left: 18cqw; top: -12cqw; width: 125cqw; }
/* (the wide frames: the ring fades out before it reaches the type) */
.bn--app .al__planet picture, .bn--bull .al__planet picture { -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 40%); mask-image: linear-gradient(90deg, transparent 18%, #000 40%); }
.bn--app .al__dune { left: -8cqw; top: 28cqw; width: 125cqw; }
.bn--app .al__hero { left: 61cqw; top: 31cqw; width: 5cqw; }
.bn--app .al__dust { left: 20cqw; top: 16cqw; width: 90cqw; }
.bn--app .al__bill { display: none; }
.bn--app .al__grade { background: linear-gradient(90deg, rgba(4, 4, 7, 0.94) 0%, rgba(4, 4, 7, 0.7) 30%, transparent 58%), linear-gradient(0deg, #040407 0%, rgba(4, 4, 7, 0.8) 22%, transparent 45%); }
.bn--app :is(.al__tag, .al__title, .al__date), .bn--bull :is(.al__tag, .al__title, .al__date) { width: auto; text-align: left; text-indent: 0; }
.bn--app .al__title { left: 5cqw; top: 16.5cqw; font-size: 5.6cqw; }
.bn--app .al__tag { left: 5cqw; top: 25cqw; font-size: 1.45cqw; letter-spacing: 0.3em; }
.bn--app .al__date { left: 5cqw; top: 28.6cqw; font-size: 1.25cqw; letter-spacing: 0.14em; color: rgba(241, 230, 210, 0.7); }
.bn--app .al__date i:first-child { display: none; }
.bn--app .al__date i + i { display: inline; }
.bn--app .al__flare { left: 2cqw; top: 19.1cqw; width: 52cqw; height: 0.3cqw; }
/* bulletin 14×48 ft · the widest frame: the planet huge, the walker tiny, the title on the left */
.bn--bull .bn__bg { --h: 78%; }
.bn--bull .al__planet { left: 17cqw; top: -5cqw; width: 100cqw; }
.bn--bull .al__dune { left: -8cqw; top: 8cqw; width: 112cqw; }
.bn--bull .al__hero { left: 41cqw; top: 13.4cqw; width: 3cqw; }
.bn--bull .al__dust { left: 0; top: -4cqw; width: 100cqw; }
.bn--bull .al__bill { display: none; }
.bn--bull .al__grade { background: linear-gradient(90deg, rgba(4, 4, 7, 0.9) 0%, rgba(4, 4, 7, 0.5) 28%, transparent 46%); }
.bn--bull .al__tag { left: 5.4cqw; top: 6.4cqw; font-size: 1.05cqw; }
.bn--bull .al__title { left: 5cqw; top: 9.4cqw; font-size: 5cqw; }
.bn--bull .al__flare { left: 2cqw; top: 11.8cqw; width: 38cqw; height: 0.25cqw; }
.bn--bull .al__date { left: 5.4cqw; top: 17.6cqw; font-size: 1.1cqw; }

/* 02 · the board (in one-sheet cqw; the sheet sits in the middle at 36% of the stage): the
   plates on the left over a transparency grid, the hero being cut out in the middle, the close-up
   and the type on the right */
.bn--sheet .al__planet { --bx: -21cqw; --by: -14cqw; --bs: 0.35; }
.bn--sheet .al__dune { --bx: 46cqw; --by: -26cqw; --bs: 0.288; }
.bn--sheet .al__dust { --bx: -40cqw; --by: 34cqw; --bs: 0.3; }
.bn--sheet .al__hero { --bx: 0cqw; --by: -80.4cqw; --bs: 4.8; }
.bn--sheet .al__face { --bx: 107cqw; --by: 6cqw; --bs: 0.68; }
.bn--sheet .al__tag { --bx: 106cqw; --by: 65cqw; --bs: 0.72; }
.bn--sheet .al__title { --bx: 106cqw; --by: -34cqw; --bs: 0.72; }
.bn--sheet .al__date { --bx: 106cqw; --by: -31cqw; --bs: 0.72; }
.bn--sheet .al__bill { --bx: 95cqw; --by: -27cqw; --bs: 0.9; }
.bn--sheet .bn__pal { left: 108cqw; top: 128cqw; gap: 2.2cqw; }
.bn--sheet .bn__pal i { width: 7cqw; }
.pr[data-step="2"] .ab > .bn--sheet .al__face { display: block; left: 0; top: 0; width: 100cqw; }
.pr[data-step="2"] .ab > .bn--sheet :is(.al__planet, .al__dune, .al__dust, .al__hero) {
  background: repeating-conic-gradient(#1d1d23 0 25%, #26262d 0 50%) 0 0 / 6cqw 6cqw;
}
.pr[data-step="2"] .ab > .bn--sheet .al__dust picture { opacity: 1; }
.pr[data-step="2"] .ab > .bn--sheet :is(.al__grade, .al__shadow, .al__flare) { display: none; }
.pr[data-step="2"] .ab > .bn--sheet .al__tag, .pr[data-step="2"] .ab > .bn--sheet .al__title, .pr[data-step="2"] .ab > .bn--sheet .al__date { text-align: left; text-indent: 0; }

/* 03 · the key visual. Its layers clip themselves, so the sheet can come apart outside its frame
   (but not while the parts are still flying in from the board) */
.pr[data-step="3"] .ab > .bn--sheet { overflow: visible; }
.pr[data-step="3"] .ab > .bn--sheet .al__l { overflow: hidden; }
.pr[data-step="3"] .ab > .bn--sheet.is-flying .al__l { overflow: visible; }
/* beside it, the layers panel, as in the app it was made in: a pointer flips its view switch to
   3D, the sheet comes apart, and each row lights up while its layer is out (js) */
.al-panel {
  position: absolute; left: 71.5%; top: 17%; width: 20%; padding: 1cqw 0 0.4cqw; visibility: hidden; opacity: 0;
  border: 1px solid var(--line-2); border-radius: 0.6cqw; background: rgba(18, 18, 22, 0.94); color: rgba(241, 230, 210, 0.78);
  font: normal 600 1.05cqw/1 var(--f-label); font-stretch: 85%; letter-spacing: 0.06em; text-transform: uppercase;
}
.pr[data-step="3"] .al-panel { visibility: visible; opacity: 1; }
.al-panel__h { display: flex; align-items: center; justify-content: space-between; padding: 0 1.2cqw 0.9cqw; color: var(--text); letter-spacing: 0.1em; }
.al-3d { position: relative; display: flex; padding: 0.2cqw; border-radius: 999px; background: rgba(241, 230, 210, 0.08); letter-spacing: 0.04em; }
.al-3d i { position: relative; width: 2.6cqw; padding: 0.4cqw 0; text-align: center; font-style: normal; font-size: 0.92em; }
.al-3d em { position: absolute; left: 0.2cqw; top: 0.2cqw; bottom: 0.2cqw; width: 2.6cqw; border-radius: 999px; background: rgba(143, 211, 232, 0.24); box-shadow: inset 0 0 0 1px rgba(143, 211, 232, 0.65); }
.al-panel ol { margin: 0; padding: 0; list-style: none; }
.al-panel li { position: relative; z-index: 0; display: flex; align-items: center; gap: 0.9cqw; padding: 0.72cqw 1.2cqw; border-top: 1px solid rgba(241, 230, 210, 0.07); }
.al-panel li::before { content: ""; width: 0.9cqw; height: 0.55cqw; border-radius: 50%; border: 1px solid currentColor; opacity: 0.7; }   /* the eye */
.al-panel li b { position: absolute; inset: 0; z-index: -1; opacity: 0; background: rgba(143, 211, 232, 0.12); box-shadow: inset 0.2cqw 0 0 #8fd3e8; }
.al-panel li i { width: 2.6cqw; aspect-ratio: 1.45; border-radius: 0.2cqw; box-shadow: inset 0 0 0 1px rgba(241, 230, 210, 0.15); }
/* the pointer that works the switch; its tip is the box's corner, and it presses from there */
.al-cursor { position: absolute; left: 0; top: 0; z-index: 20; width: max(1.3cqw, 13px); opacity: 0; pointer-events: none; transform-origin: 0 0; }
.al-cursor svg { display: block; width: 100%; height: auto; overflow: visible; fill: #fff; stroke: #111; stroke-width: 1.1; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
.al-cursor i { position: absolute; left: -0.9cqw; top: -0.9cqw; width: 1.8cqw; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(143, 211, 232, 0.9); opacity: 0; }
.al-panel li:nth-child(1) i { background: repeating-linear-gradient(0deg, rgba(241, 230, 210, 0.5) 0 1px, #15151a 1px 3px); }
.al-panel li:nth-child(2) i { background: #15151a radial-gradient(60% 30% at 50% 50%, #f1e6d2, transparent); }
.al-panel li:nth-child(3) i { background: linear-gradient(#040407, transparent 40%, #040407); }
.al-panel li:nth-child(4) i { background: #15151a radial-gradient(closest-side, rgba(255, 226, 190, 0.6), transparent); }
.al-panel li:nth-child(5) i { background: #15151a radial-gradient(18% 40% at 50% 55%, #f1e6d2, transparent); }
.al-panel li:nth-child(6) i { background: linear-gradient(170deg, transparent 45%, #b8652c 46%, #3a160c); }
.al-panel li:nth-child(7) i { background: #07080c radial-gradient(circle at 50% 55%, #e0b07a 0 26%, transparent 28%); }
.al-panel li:nth-child(8) i { background: linear-gradient(#040509, #261320 70%, #e08a3c); }

/* ==========================================================================
   ABOUT (home). The portrait runs the whole height on the left. Beside it the
   intro stands free, big, with three numbers; under it two columns of cards,
   each card cut for what it holds: the experience on a rail with a dot per
   job (red while it runs), what I do set as one line of type, the toolkit as
   app tiles, education, the clients rolling by. A soft light follows the
   pointer over a card. Sizes are em of the section's font-size (on one
   screen it follows the window's height)
   ========================================================================== */
.about { font-size: 16px; }
.about__grid {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-areas: "head head" "photo intro" "cards cards";
  gap: 2.4em 1.6em; margin-top: 40px;
}
.about__head { grid-area: head; display: block; margin: 0; }
.about__photo { grid-area: photo; }
.about__intro { grid-area: intro; align-self: center; min-width: 0; }
/* the cards: the experience down the left, what I do over the toolkit on the right,
   education and the clients side by side at the foot */
.about__cards {
  grid-area: cards; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "xp xp" "do kit" "edu cl"; gap: 1.25em; min-width: 0;
}
.card--xp { grid-area: xp; }
.card--do { grid-area: do; }
.card--kit { grid-area: kit; }
.card--edu { grid-area: edu; }
.card--clients { grid-area: cl; }

/* the intro: free on the page, the numbers beside it when there's room */
.about__intro { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6em 3.2em; }
.about__lead { flex: 1 1 19em; max-width: 26em; font-size: 1.62em; line-height: 1.2; letter-spacing: -0.015em; }
.about__lead em { font-size: 1.08em; line-height: 1; }
.stats { flex: 1 1 100%; display: flex; }
.stats li { flex: 1 1 0; min-width: 0; padding: 0 1.6em; border-left: 1px solid rgba(242, 239, 234, 0.12); }
.stats li:first-child { padding-left: 0; border-left: 0; }
.stats li:last-child { padding-right: 0; }
.stats b { display: block; font-weight: 800; font-stretch: 112%; font-size: 2.35em; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stats b i { color: var(--rec); font-style: normal; }
.stats span { display: block; margin-top: 0.5em; color: var(--muted); font-size: 0.78em; line-height: 1.3; }

/* a card: a dark panel with a faint light from its top corner. Over it, the pointer
   carries a soft red light and lights the edge near it (js: --mx/--my) */
.card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; padding: 1.35em 1.5em;
  border-radius: 1.25em; border: 1px solid rgba(242, 239, 234, 0.07);
  background: radial-gradient(120% 90% at 0% 0%, rgba(242, 239, 234, 0.055), transparent 55%), #111113;
}
.card::before, .card::after {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(18em circle at var(--mx, 50%) var(--my, 0%), rgba(255, 77, 31, 0.09), transparent 65%);
}
.card::after {
  z-index: 1; inset: -1px; padding: 1px;
  background: radial-gradient(12em circle at var(--mx, 50%) var(--my, 0%), rgba(255, 128, 92, 0.6), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover::before, .card:hover::after { opacity: 1; }
}
.card__h {
  display: flex; align-items: center; gap: 0.75em; margin: 0 0 1.15em;
  color: rgba(242, 239, 234, 0.6); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase;
}
.card__h::before { content: ""; flex: none; width: 0.55em; height: 0.55em; border-radius: 0.12em; background: var(--rec); }
.card__h span { margin-left: auto; color: rgba(242, 239, 234, 0.34); letter-spacing: 0.06em; }

/* the portrait: the whole photo, the name at its foot, REC in the corner */
.about__photo {
  position: relative; min-height: 30em; margin: 0; overflow: hidden; border-radius: 1.25em; background: #111113;
  border: 1px solid rgba(242, 239, 234, 0.07);
}
.about__photo picture { position: absolute; inset: 0; display: block; }
.about__photo picture::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(6, 6, 7, 0.85)); }
.about__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: contrast(1.05); }
.about__rec {
  position: absolute; top: 1.1em; left: 1.1em; display: inline-flex; align-items: center; gap: 0.55em; padding: 0.4em 0.8em;
  border-radius: 99px; background: rgba(8, 8, 9, 0.6); color: rgba(242, 239, 234, 0.92);
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 0.68em; letter-spacing: 0.12em; text-transform: uppercase;
}
.about__rec i { width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0.8em rgba(255, 77, 31, 0.8); }
.about__photo figcaption { position: absolute; left: 1.4em; right: 1.4em; bottom: 1.3em; display: grid; gap: 0.3em; }
.about__photo figcaption b { font-weight: 800; font-stretch: 112%; font-size: 1.75em; line-height: 1; letter-spacing: -0.02em; }
.about__photo figcaption span { font-weight: 600; font-size: 0.92em; }
.about__photo figcaption small { color: rgba(242, 239, 234, 0.62); font-size: 0.8em; }

/* experience: when, a rail with a dot per job, what and where */
.xp { flex: 1; display: flex; flex-direction: column; }
.xp li { position: relative; flex: 1 1 auto; display: grid; grid-template-columns: 6.4em 1.7em minmax(0, 1fr); align-items: center; padding: 0.5em 0; }
.xp li::before { content: ""; position: absolute; left: 7.25em; top: 0; bottom: 0; width: 1px; background: rgba(242, 239, 234, 0.12); }
.xp li:first-child::before { top: 50%; }
.xp li:last-child::before { bottom: 50%; }
.xp li::after {
  content: ""; position: absolute; left: 7.25em; top: 50%; width: 0.62em; height: 0.62em; margin: -0.31em 0 0 -0.31em; border-radius: 50%;
  background: #111113; box-shadow: inset 0 0 0 1.5px rgba(242, 239, 234, 0.45);
}
.xp .is-now::after { background: var(--rec); box-shadow: 0 0 0 0.3em rgba(255, 77, 31, 0.16), 0 0 0.9em rgba(255, 77, 31, 0.6); }
.xp time {
  color: rgba(242, 239, 234, 0.5); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 0.72em; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
}
.xp .is-now time { color: var(--text); }
.xp div { grid-column: 3; min-width: 0; }
.xp b { display: block; font-weight: 700; font-size: 0.98em; line-height: 1.25; transition: color 0.2s; }
.xp span { display: block; margin-top: 0.15em; color: var(--muted); font-size: 0.8em; line-height: 1.3; }
.xp li:hover b { color: #fff; }

/* what I do: one line of type, sans and serif in turn */
.do { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 0.6em; font-size: 1.2em; line-height: 1.25; }
.do li { display: inline-flex; align-items: center; gap: 0.6em; font-weight: 700; letter-spacing: -0.01em; }
.do li:nth-child(even) { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.12em; letter-spacing: 0; }
.do li:not(:last-child)::after { content: ""; width: 0.26em; height: 0.26em; border-radius: 50%; background: var(--rec); }

/* toolkit: app tiles */
.kit { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: space-evenly; gap: 1.2em 0.4em; }
.kit li { display: grid; justify-items: center; align-content: start; gap: 0.6em; text-align: center; color: rgba(242, 239, 234, 0.72); font-size: 0.74em; line-height: 1.2; }
.kit i {
  display: grid; place-items: center; width: 3.1em; aspect-ratio: 1; border-radius: 0.72em;
  background: var(--b); color: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
  font-style: normal; font-weight: 800; font-size: 1.36em; letter-spacing: -0.02em; transition: transform 0.3s var(--out);
}
.kit li:hover i { transform: translateY(-0.12em) scale(1.05); }
.kit .is-learning i { box-shadow: none; outline: 1px dashed color-mix(in srgb, var(--c) 60%, transparent); outline-offset: -1px; }
.kit small { display: block; color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 0.82em; letter-spacing: 0.08em; text-transform: uppercase; }

/* education */
.edu li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1em; align-items: center; padding: 0.6em 0; border-top: 1px solid rgba(242, 239, 234, 0.07); }
.edu li:first-child { border-top: 0; padding-top: 0; }
.edu li:last-child { padding-bottom: 0; }
.edu b { font-weight: 600; font-size: 0.92em; line-height: 1.3; }
.edu em {
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.32em 0.75em; border: 1px solid rgba(242, 239, 234, 0.14); border-radius: 99px;
  color: rgba(242, 239, 234, 0.6); font-family: var(--f-label); font-stretch: 80%; font-style: normal; font-weight: 600; font-size: 0.64em;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.edu .is-now em { border-color: rgba(255, 77, 31, 0.45); background: rgba(255, 77, 31, 0.08); color: var(--rec); }
.edu .is-now em::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }

/* clients: big names rolling through on an orange band, edge to edge, while About is on screen */
.card--clients { padding-inline: 0; }
.card--clients .marquee { margin-block: auto; }
.card--clients .card__h { padding-inline: 1.5em; }
.marquee { min-width: 0; overflow: hidden; padding-block: 0.5em; background: var(--rec); color: #0a0a0b; }
.marquee__track { display: flex; width: max-content; animation: marquee 62s linear infinite; }   /* (the full school names made it longer: same speed) */
html.js .about:not(.is-on) .marquee__track, .marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  display: inline-flex; align-items: center; gap: 0.9em; padding-right: 0.9em; white-space: nowrap;
  font-weight: 800; font-stretch: 112%; font-size: 1.9em; line-height: 1.1; letter-spacing: -0.02em;
}
.marquee__track span:nth-child(even) { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: 0; }
.marquee__track span::after { content: ""; width: 0.2em; height: 0.2em; border-radius: 50%; background: currentColor; opacity: 0.55; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* motion (full mode only): REC and the master's dot blink while About is on screen.
   On one screen the first full look brings the portrait, the intro and the cards in
   one after another (the numbers count up: js) */
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-lite) .about.is-on .about__rec i, html:not(.is-lite) .about.is-on .edu .is-now em::before { animation: blink 1.2s steps(1) infinite; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) and (min-height: 600px) {
  html.js:not(.is-lite) .about:not(.is-seen) :is(.card, .about__photo, .about__intro) { opacity: 0; transform: translateY(1.4em); }
  html.js:not(.is-lite) .about:not(.is-seen) .about__photo img { transform: scale(1.06); }
  .about.is-seen :is(.card, .about__photo, .about__intro) { transition: opacity 0.6s calc(var(--i, 0) * 0.08s), transform 0.8s var(--out) calc(var(--i, 0) * 0.08s); }
  .about.is-seen .about__photo img { transition: transform 1.8s var(--out); }
}

/* one screen: the top bar's About lands on all of it at once. The title in one line
   with air under it; the portrait runs the whole height, beside it the intro, and
   under the intro the two columns of cards, each ending at the portrait's foot */
@media (min-width: 1024px) and (min-height: 600px) {
  .about {
    display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; contain-intrinsic-size: auto 100vh;
    padding: 92px var(--pad) clamp(14px, 2.4vh, 28px); font-size: clamp(11px, min(1.5vh, 1vw), 20px);
  }
  .about .sec-head { padding: 0.65em 0; }
  .about__grid {
    flex: 1; min-height: 0; margin-top: 0.4em;
    grid-template-columns: clamp(220px, calc((100vh - 240px) * 0.56), 28vw) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "head head" "photo intro" "photo cards";
    gap: 0 clamp(20px, 2.2vw, 40px);
  }
  .about__head { margin-bottom: clamp(18px, 3.4vh, 46px); }
  .about__title { font-size: min(3.5vw, 6vh); white-space: nowrap; }
  .about__title br { display: none; }
  .about__photo { min-height: 0; }
  .about__intro { align-self: start; margin: 0.2em 0 clamp(16px, 3vh, 40px); }
  .stats { flex: none; margin-left: auto; }
  .stats li { flex: none; }
  .stats span { white-space: nowrap; }
  .about__cards {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "xp do" "xp kit" "edu cl";
  }
  .about__cards { min-height: 0; gap: clamp(12px, 1.2vw, 22px); }
}
/* a short window: tighter cards, smaller tiles, less air between the blocks */
@media (min-width: 1024px) and (min-height: 600px) and (max-height: 760px) {
  .about__head { margin-bottom: 2.6vh; }
  .about__intro { margin-bottom: 2vh; }
  .about__cards { gap: 12px; }
  .card { padding: 1em 1.3em; }
  .card__h { margin-bottom: 0.75em; }
  .card--clients { padding-inline: 0; }
  .xp li { padding: 0.3em 0; }
  .do { font-size: 1.1em; }
  .kit { gap: 0.6em 0.5em; }
  .kit li { gap: 0.35em; }
  .kit i { width: 2.5em; }
  .edu li { padding: 0.4em 0; }
  .marquee__track span { font-size: 1.6em; }
}
/* narrow and short (a small laptop, a tablet on its side): the numbers step aside,
   the years are in the intro anyway */
@media (min-width: 1024px) and (max-width: 1279px) and (min-height: 600px) and (max-height: 800px) {
  .stats { display: none; }
}
/* a netbook: smaller type in the intro and the cards */
@media (min-width: 1024px) and (min-height: 600px) and (max-height: 640px) {
  .about__lead { font-size: 1.42em; }
  .card__h { margin-bottom: 0.6em; }
  .xp li { padding: 0.2em 0; }
  .do { font-size: 1em; }
  .marquee__track span { font-size: 1.35em; }
}


/* ==========================================================================
   CASE STUDY PAGES
   ========================================================================== */
.page-case main { padding-top: 80px; }
.case-hero { padding: clamp(32px, 7vh, 88px) var(--pad) clamp(36px, 6vh, 64px); }
.case-hero__top {
  display: flex; justify-content: space-between; margin-bottom: clamp(32px, 6vh, 64px);
  color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.back { color: var(--text); transition: color 0.2s; }
.back:hover { color: var(--rec); }
.case-title {
  margin-top: 14px; font-weight: 900; font-stretch: 125%;
  font-size: clamp(54px, 10.5vw, 196px); line-height: 0.84; letter-spacing: -0.04em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.case-line { margin-top: 28px; max-width: 34ch; font-size: clamp(20px, 2vw, 30px); line-height: 1.2; letter-spacing: -0.01em; }
.case-meta { display: grid; grid-template-columns: 0.8fr 0.6fr 1.2fr 1.4fr; gap: 28px; margin: 56px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.case-meta dt { margin-bottom: 8px; color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.case-meta dd { margin: 0; font-size: 15px; line-height: 1.45; }
.case-meta li + li { margin-top: 2px; }

.cover { padding: 0 var(--pad); }
.cover__item { position: relative; overflow: hidden; border-radius: 6px; background: var(--bg-2); aspect-ratio: var(--ar); }
.cover__item img, .cover__item video, .cover__item picture { width: 100%; height: 100%; object-fit: cover; }
.cover__item figcaption, .g-item figcaption {
  color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.cover__item figcaption { position: absolute; left: 14px; bottom: 12px; padding: 5px 8px; border-radius: 3px; background: rgba(10, 10, 11, 0.75); color: var(--text); }
.cover__item figcaption.is-right { left: auto; right: 14px; } /* the picture has its own type bottom left */
.cover.is-trio { display: flex; justify-content: center; gap: var(--gap); }
.cover.is-trio .cover__item { flex: 0 0 auto; height: min(78vh, 760px); }

.case-story, .case-system { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); padding: clamp(80px, 13vh, 150px) var(--pad); }
.story__label { display: flex; gap: 12px; margin-bottom: 20px; color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px;  letter-spacing: 0.08em; text-transform: uppercase; }
.story__label span { color: var(--rec); }
.story__text { font-size: clamp(22px, 2.15vw, 36px); line-height: 1.22; letter-spacing: -0.012em; text-wrap: pretty; }
.case-system { border-top: 1px solid var(--line); }
.hl { align-self: end; border-top: 1px solid var(--line); }
.hl li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.hl__a { font-weight: 600; font-size: 17px; }
.hl__b { flex: none; max-width: 45%; color: var(--muted); text-align: right; font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; }

.case-gallery, .case-breakdown { padding: 0 var(--pad) clamp(60px, 10vh, 120px); }
.gallery { display: grid; gap: var(--gap); margin-top: 28px; }
.g-row { display: flex; gap: var(--gap); align-items: flex-start; }
.g-item { flex: var(--ar) 1 0; min-width: 0; }
.g-open { position: relative; display: block; width: 100%; aspect-ratio: var(--ar); overflow: hidden; border-radius: 4px; background: var(--bg-2); cursor: zoom-in; }
.g-open img, .g-open video, .g-open picture { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--out); }
.g-open:hover img, .g-open:hover video { transform: scale(1.025); }
.g-item.is-matte .g-open { background: radial-gradient(circle at 50% 35%, #2b2b30, #121214 70%); }
.g-item.is-matte img { object-fit: contain; padding: 8%; }
.g-item.is-video .g-open::before {
  content: "● Motion"; position: absolute; left: 10px; top: 10px; z-index: 2; padding: 4px 7px; border-radius: 3px;
  background: rgba(10, 10, 11, 0.72); color: var(--text);
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.g-item figcaption { margin-top: 9px; }
.case-note { margin-top: 18px; color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; }

.bd { position: relative; margin-top: 28px; aspect-ratio: var(--ar); overflow: hidden; border-radius: 6px; --pos: 50%; user-select: none; touch-action: pan-y; }
.bd picture, .bd__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bd__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.bd__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--rec); pointer-events: none; }
.bd__line::after {
  content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--rec); color: #000; font-size: 20px; font-weight: 700;
}
.bd__label { position: absolute; top: 14px; padding: 5px 8px; border-radius: 3px; background: rgba(10, 10, 11, 0.75); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
.bd__label--l { left: 14px; }
.bd__label--r { right: 14px; }
.bd__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

.case-result { padding: clamp(60px, 10vh, 120px) var(--pad); border-top: 1px solid var(--line); }
.result__big { margin-top: 28px; color: var(--rec); font-weight: 900; font-stretch: 125%; font-size: clamp(120px, 22vw, 400px); line-height: 0.8; letter-spacing: -0.05em; }
.result__label { margin-top: 14px; font-family: var(--f-serif); font-style: italic; font-size: clamp(28px, 3.4vw, 58px); line-height: 1.05; }
.result__text { margin-top: 24px; max-width: 54ch; color: var(--muted); font-size: 18px; }

.case-next { position: relative; display: block; overflow: hidden; isolation: isolate; padding: clamp(80px, 16vh, 180px) var(--pad); border-top: 1px solid var(--line); }
.case-next__bg { position: absolute; inset: 0; z-index: -1; opacity: 0.22; transition: opacity 0.6s, transform 1.4s var(--out); }
.case-next__bg img { width: 100%; height: 100%; object-fit: cover; }
.case-next__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10, 10, 11, 0.9), rgba(10, 10, 11, 0.3)); }
.case-next:hover .case-next__bg { opacity: 0.6; transform: scale(1.04); }
.case-next__label { color: var(--rec); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.case-next__title { display: block; margin-top: 16px; font-weight: 900; font-stretch: 100%; font-size: clamp(56px, 10vw, 180px); line-height: 0.88; letter-spacing: -0.04em; text-transform: uppercase; transition: font-stretch 0.7s var(--cut); }
.case-next:hover .case-next__title { font-stretch: 125%; }
.case-next__line { display: block; margin-top: 18px; max-width: 42ch; font-size: 18px; opacity: 0.85; }
.contact--mini .contact__title { font-size: clamp(40px, 5.2vw, 92px); }

/* lightbox */
.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(5, 5, 6, 0.97); color: var(--text);
}
.lightbox[open] { display: grid; place-items: center; grid-template-rows: 1fr auto; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.6); }
.lightbox__frame { display: grid; place-items: center; width: 100%; height: 100%; padding: 64px 24px 0; }
.lightbox__frame img, .lightbox__frame video { max-width: 94vw; max-height: 82vh; width: auto; height: auto; border-radius: 6px; }
.lightbox__cap { padding: 14px 0 22px; color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- work blocks: one campaign, carousel or series per screen, grouped by kind.
   On a desktop every block is sticky, so the next one slides up over it (js: setupBlocks
   shrinks and darkens the one underneath). A carousel block stays pinned while the
   .blk-run after it scrolls by, and its rows move sideways. ---------- */
.case-gallery--blocks { padding-left: 0; padding-right: 0; }
.case-gallery--blocks > .sec-head { padding: 0 var(--pad); }
.blocks { position: relative; margin-top: 28px; }
.blk { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); }
.blk ~ .blk { border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; box-shadow: 0 -28px 60px rgba(0, 0, 0, 0.6); }
.blk.is-under { visibility: hidden; }
.blk__in { display: flex; flex-direction: column; height: 100%; padding: 100px var(--pad) 84px; transform-origin: 50% 0; }
.blk__shade { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; }
.blk__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 5vw; align-items: end; padding-bottom: clamp(16px, 2.6vh, 28px); }
.blk__kick {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px;
  color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.blk__n { color: var(--rec); font-variant-numeric: tabular-nums; }
.blk__kick span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 18px; vertical-align: 0.2em; background: var(--line-2); }
.blk__title { font-weight: 900; font-stretch: 125%; font-size: clamp(30px, 3.5vw, 68px); line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; text-wrap: balance; }
.blk__line { font-family: var(--f-serif); font-style: italic; font-size: clamp(19px, 1.55vw, 28px); line-height: 1.15; text-wrap: pretty; }
.blk__fmts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.blk__fmts li {
  padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted);
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
.blk__stage { position: relative; flex: 1 1 auto; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center; }

/* any piece of work in a block */
.b-item { flex: none; }
.b-item.is-video::before {
  content: "● Motion"; position: absolute; left: 8px; top: 8px; z-index: 2; padding: 4px 7px; border-radius: 3px;
  background: rgba(10, 10, 11, 0.72); color: var(--text);
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.b-tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 2; max-width: calc(100% - 16px); padding: 4px 7px; border-radius: 3px;
  background: rgba(10, 10, 11, 0.8); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.35s var(--out);
}
.b-item:hover .b-tag, .b-item:focus-visible .b-tag { opacity: 1; transform: none; }

/* board: every format of a campaign, true aspect ratios, sized to fill the stage exactly */
.board {
  --g: 10px;
  --bh: min(100cqh, calc((100cqw - var(--n1) * var(--g) + var(--g) * var(--B)) / var(--A)));
  display: flex; gap: var(--g); height: var(--bh);
}
.board__col { flex: none; display: flex; flex-direction: column; gap: var(--g); width: calc((var(--bh) - var(--k1) * var(--g)) / var(--S)); }

/* tracks: carousel rows */
.tracks { display: flex; flex-direction: column; gap: 14px; width: 100%; height: 100%; }
.track { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.track__name { display: flex; gap: 12px; font-weight: 600; font-size: 14px; }
.track__name span { color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.7; }
.track__view { flex: 1 1 auto; min-height: 0; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); overflow: hidden; }
.track__run { display: flex; gap: 12px; width: max-content; height: 100%; }
.track__run > .b-item { width: auto; height: 100%; }
.track__run > .b-item .b-tag { opacity: 1; transform: none; left: auto; right: 8px; background: rgba(10, 10, 11, 0.6); }
.tracks__bar { flex: none; height: 2px; background: var(--line); }
.tracks__bar i { display: block; height: 100%; background: var(--rec); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

/* marquee: a long series drifting in rows (copies make the loop seamless) */
.mq { display: flex; flex-direction: column; gap: 12px; width: calc(100% + var(--pad) * 2); height: 100%; margin: 0 calc(var(--pad) * -1); }
.mq__row { flex: 1 1 0; min-height: 0; overflow: hidden; }
.mq__run { display: flex; width: max-content; height: 100%; animation: mq var(--dur) linear infinite; animation-play-state: paused; }
.mq__row:nth-child(even) .mq__run { animation-direction: reverse; }
.mq__run > .b-item { width: auto; height: 100%; margin-right: 12px; }
.blk.is-live .mq__run { animation-play-state: running; }
.blk.is-live .mq__row:hover .mq__run { animation-play-state: paused; }
@keyframes mq { to { transform: translate3d(-33.3333%, 0, 0); } }

/* cards: a few projects, each cycling through its formats */
.cards {
  --cg: 16px; --cap: 52px;
  --cw: min(calc((100cqw - (var(--cols) - 1) * var(--cg)) / var(--cols)), calc(((100cqh - (var(--rows) - 1) * var(--cg)) / var(--rows) - var(--cap)) * var(--car)));
  display: grid; grid-template-columns: repeat(var(--cols), var(--cw)); justify-content: center; align-content: center; gap: var(--cg); width: 100%; height: 100%;
}
.card__frames { position: relative; aspect-ratio: var(--car); overflow: hidden; border-radius: 6px; background: var(--bg-2); }
.cards--contain .card__frames { background: radial-gradient(circle at 50% 35%, #2b2b30, #121214 72%); }
.card__f { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; background: none; opacity: 0; pointer-events: none; transition: opacity 0.9s var(--out); }
.card__f.is-on { opacity: 1; pointer-events: auto; }
.cards--contain .card__f img { object-fit: contain; padding: 7%; }
.card figcaption { display: flex; flex-direction: column; gap: 3px; height: var(--cap); padding-top: 10px; overflow: hidden; }
.card figcaption b { font-weight: 600; font-size: 15px; line-height: 1.2; }
.card figcaption span { color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the bar that jumps between kinds of work */
.chap {
  position: fixed; left: 50%; bottom: 18px; z-index: 30; display: flex; gap: 2px; max-width: calc(100vw - 2 * var(--pad)); padding: 5px; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(10, 10, 11, 0.8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translate(-50%, 130%); transition: transform 0.5s var(--out), opacity 0.3s, visibility 0s 0.5s;
}
.chap.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: transform 0.5s var(--out), opacity 0.3s; }
.chap a {
  display: flex; align-items: center; gap: 7px; flex: none; padding: 9px 14px; border-radius: 999px; color: var(--muted);
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
  transition: color 0.2s, background-color 0.3s;
}
.chap a i { font-style: normal; color: var(--rec); }
.chap a:hover { color: var(--text); }
.chap a.is-active { background: var(--text); color: var(--bg); }

/* lite (reduced motion, low-end): no pinning, rows scroll by hand */
.is-lite .blk-run { display: none; }
.is-lite .track__view, .is-lite .mq__row { overflow-x: auto; scrollbar-width: thin; }
.is-lite .mq__run { animation: none; }
.is-lite .g-dup { display: none; }

/* phones: blocks follow one another, every row swipes sideways */
@media (max-width: 767px) {
  .blk { position: relative; height: auto; overflow: visible; }
  .blk ~ .blk { border-radius: 0; box-shadow: none; }
  .blk.is-under { visibility: visible; }
  .blk__in { height: auto; padding: 44px var(--pad) 36px; }
  .blk__shade, .blk-run, .tracks__bar, .chap { display: none; }
  .blk__head { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .blk__title { font-size: 9.4vw; }
  .blk__stage { display: block; container-type: normal; }
  .board, .track__view { margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; }
  .board { --bh: 56svh; }
  .board__col, .track__run > .b-item { scroll-snap-align: start; }
  .tracks { height: auto; }
  .track { flex: none; }
  .track__view { height: 42svh; }
  .mq { height: auto; }
  .mq__row { flex: none; height: 34vw; }
  .cards { --cw: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
}

/* ---------- tablet + mobile for the new sections ---------- */
@media (max-width: 1199px) {
  .pr__step { gap: 8px; padding: 0 12px; }
  .pr__t { font-size: 14px; }
  .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* below 1280 the project circles leave the steps too little room for their names: numbers only
   (the active step's name is written out beside the stage) */
@media (min-width: 768px) and (max-width: 1279px) {
  .pr__t { display: none; }
  .pr__step, .pr__lbl { justify-content: center; }
}
@media (max-width: 767px) {
  .process, .about { padding: 72px var(--pad); }
  .process__head, .about__head { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  /* phones: numbered chips over the stage, the active step written out under it */
  .process { padding-top: 72px; }
  .process__title { font-size: clamp(26px, 7.4vw, 40px); white-space: normal; }
  .process .process__head { grid-template-columns: 1fr; gap: 14px; }
  .pj__dot { --d: 40px; }
  .pr { grid-template-columns: 1fr; grid-template-areas: "steps" "stage" "side"; gap: 12px; margin-top: 20px; }
  .pr__bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pr__bar .pr__steps { width: 100%; }
  .pr__steps { gap: 6px; }
  .pr__step { justify-content: center; height: 44px; padding: 0; border-radius: 12px; }
  .pr__lbl { justify-content: center; }
  .pr__hint { order: 1; margin: 8px 0 0; }
  .pr__hint-d { display: none; }
  .pr__hint-m { display: inline; }
  .pr[data-pj="fizz"] .pr__hint-fd { display: none; }
  .pr[data-pj="fizz"] .pr__hint-fm { display: inline; }
  .pr__n { font-size: 13px; }
  .pr__t { display: none; }
  .pr__stage { width: 100%; aspect-ratio: 10 / 7; background-size: 16px 16px; }
  .pr__side { gap: 4px; padding: 0; }
  .pr__foot { display: contents; }
  .pr__hud { order: -1; justify-content: flex-end; }
  .pr__about { order: 2; margin-top: 14px; max-width: none; font-size: 15px; }
  .pr__cap { min-height: 6.2em; max-width: none; font-size: 15px; line-height: 1.45; }
  .pr__cap b { margin: 4px 0 2px; font-size: 17px; }
  .pr__cap span { display: none; }
  .pr__brief { left: 3%; width: 94%; padding: 3.6cqw 4cqw 4cqw; }
  .brief__top, .brief__list dt, .brief__line span { font-size: 2.3cqw; }
  .brief__list { gap: 1.4cqw; margin-top: 2.6cqw; }
  .brief__list div { grid-template-columns: 17cqw 1fr; }
  .brief__list dd { font-size: 3.1cqw; }
  .brief__line { margin-top: 3cqw; padding-top: 2.4cqw; }
  .brief__line strong { font-size: 7.4cqw; }
  .pr__board { left: 2%; top: 3%; width: 96%; height: 94%; }
  .ab--1x1 { left: 19%; top: 5.7%; width: 62%; }
  .ab--9x16 { left: 2%; top: 2.9%; width: 36%; }
  .ab--4x5 { left: 41%; top: 2.9%; width: 27%; }
  .ab--link { left: 41%; top: 55%; width: 57%; }
  .pr[data-step="4"] .ab--1x1, .pr[data-step="5"] .ab--1x1 { left: 71%; top: 2.9%; width: 27%; }
  .ab__label { display: none; }
  .bn--1x1 .bn__logo { --bx: -23cqw; --by: -1.4cqw; --bs: 1.2; }
  .bn--1x1 .bn__head { --bx: 34cqw; --by: -11cqw; --bs: 0.8; }
  .bn--1x1 .bn__sub { --bx: 34cqw; --by: -12.5cqw; }
  .bn--1x1 .bn__badge { --bx: 33cqw; --by: 26cqw; --bs: 1; }
  .bn--1x1 .bn__cta { --bx: 34cqw; --by: -46cqw; }
  .bn--1x1 .bn__cat { --bx: -42cqw; --by: 2cqw; --bs: 0.72; }
  .bn--1x1 .bn__pal { left: -17cqw; top: 24cqw; }
  .ab--story { left: 2%; top: 9%; width: 20%; }
  .ab--poster { left: 24%; top: 9%; width: 27%; }
  .ab--tv { left: 53%; top: 18%; width: 45%; }
  .ab--led { left: 2%; top: 74%; width: 96%; }
  .pr[data-step="2"] .ab--poster, .pr[data-step="3"] .ab--poster { left: 30%; top: 4%; width: 40%; }
  .bn--poster .nc__hero { --bx: -68cqw; --by: 10cqw; --bs: 0.6; }
  .bn--poster .nc__lights { --bx: -70cqw; --by: 100cqw; --bs: 0.6; }
  .pr[data-step="2"] .bn--poster .nc__bug { left: 104cqw; top: 22cqw; }
  .bn--poster .bn__pal { left: 104cqw; top: 52cqw; }
  .al-panel, .al-cursor { display: none; }   /* (its type would be a few pixels high) */
  /* fizz: the label nearly as wide as the stage, the board squeezed into it; then the can on the left */
  .ab--label { left: 3%; top: 12%; width: 92%; }
  .pr[data-step="4"] .ab--label, .pr[data-step="5"] .ab--label { left: -23%; top: 23.9%; width: 72%; }
  .ab--city { left: 27%; top: 10%; width: 37.3%; }
  .ab--wob { left: 70.5%; top: 6%; width: 19%; }
  .ab--six { left: 67%; top: 59%; width: 31%; }
  .bn--label .fz__badge { --bx: 13cqw; }
  .bn--label .fz__splash { --bx: 33cqw; --by: -6.5cqw; --bs: 0.5; }
  .bn--label .fz__hero { --bx: 6.5cqw; }
  .pr[data-step="2"] .ab > .bn--label > .fz__phases { left: 13cqw; gap: 2.5cqw; }
  .pr[data-step="2"] .ab > .bn--label > .fz__sketch { left: 0; }
  .pr[data-step="2"] .ab > .bn--label > .fz__ice { left: 90cqw; }
  .pr[data-step="2"] .ab > .bn--label > .fz__crown { left: 72cqw; }
  .pr[data-step="2"] .ab--key .fz [data-label]::after { font-size: 1.6cqw; }
  .about { font-size: 15px; }
  /* phones: one column; the portrait, the intro, then the cards */
  .about__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "photo" "intro" "cards"; gap: 28px; margin-top: 28px; }
  .about__photo { min-height: 0; aspect-ratio: 4 / 5; }
  .about__lead { flex-basis: 100%; font-size: 1.42em; }
  .stats li { padding: 0 0.9em; }
  .about__cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; gap: 12px; }
  .about__cards .card { grid-area: auto; }
  .card { padding: 1.15em 1.2em; }
  .card--clients { padding-inline: 0; }
  .card--clients .card__h { padding-inline: 1.2em; margin-bottom: 0.9em; }
  .xp li { grid-template-columns: 5.8em 1.5em minmax(0, 1fr); }
  .xp li::before, .xp li::after { left: 6.55em; }

  .page-case main { padding-top: 56px; }
  .case-hero__top { margin-bottom: 28px; }
  .case-title { font-size: 14.5vw; }
  .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
  .case-meta > div:last-child, .case-meta > div:nth-child(3) { grid-column: 1 / -1; }
  .cover.is-trio { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(var(--pad) * -1); padding-right: var(--pad); scrollbar-width: none; }
  .cover.is-trio .cover__item { height: 68svh; scroll-snap-align: start; }
  .case-story, .case-system { grid-template-columns: 1fr; gap: 40px; padding: 72px var(--pad); }
  .story__text { font-size: 21px; }
  .g-row { flex-wrap: wrap; }
  .g-item { flex: 1 1 100%; }
  .g-row.is-small .g-item { flex: 1 1 calc(50% - var(--gap)); }
  .hl li { flex-direction: column; gap: 4px; }
  .hl__b { max-width: none; text-align: left; }
  .result__big { font-size: 34vw; }
  .case-next { padding: 72px var(--pad); }
  .case-next__title { font-size: 15vw; }
  .bd__line::after { width: 40px; height: 40px; }
}


/* ==========================================================================
   PIXEL SPARKS — single LED pixels, scattered over the empty black page background,
   each lighting up, flickering and going out on its own; more while scrolling (js:
   setupCyber). They sit in .field, behind every section, scroll with the page and
   never land on text. Each box is placed by its animation's transform.
   ========================================================================== */
body { position: relative; }
.hero { background: var(--bg); } /* the wall keeps its own black between the screens */
.field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cy { position: absolute; left: 0; top: 0; display: block; opacity: 0; background: currentColor;
  box-shadow: 0 0 3px currentColor, 0 0 10px color-mix(in srgb, currentColor 55%, transparent); }

/* ==========================================================================
   INTRO (home, first visit per session, capable desktops only — decided in <head>)
   The avatar from the logo pops up, winks, then flies into the logo while the
   black closes into it like a camera iris (js: setupIntro). ~1.5 s, skippable.
   ========================================================================== */
.intro { display: none; }
.is-intro .intro {
  display: block; position: fixed; inset: 0; z-index: 100; background: var(--bg);
  animation: introSafety 0.4s 3.2s forwards; /* never strand the page if the script fails */
}
@keyframes introSafety { to { opacity: 0; visibility: hidden; } }
.is-intro .mark__av { opacity: 0; animation: introSafetyAv 0s 3.2s forwards; }
@keyframes introSafetyAv { to { opacity: 1; } }
.intro__av {
  --s: min(440px, 52vh);
  position: fixed; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  will-change: transform;
}
.intro__av svg { display: block; width: 100%; height: 100%; overflow: visible; }
.intro__av .av-head { transition: none; }
.mark__av.is-landed::after { animation: ring 0.9s var(--out); }
@keyframes ring { 0% { opacity: 1; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.5); } }

/* ==========================================================================
   VIEWFINDER HUD
   ========================================================================== */

/* viewfinder HUD: vector parts from a Freepik camcorder frame, inlined by tools/build_fx.py */
.hud { position: absolute; inset: 96px var(--pad) 76px; z-index: 1; pointer-events: none; color: rgba(242, 239, 234, 0.62); }
.hud svg { position: absolute; fill: currentColor; overflow: visible; }
.hud__defs { width: 0; height: 0; }
.hud__c { width: 46px; height: 49px; }
.hud__c--tl { left: 0; top: 0; }
.hud__c--tr { right: 0; top: 0; transform: scaleX(-1); }
.hud__c--bl { left: 0; bottom: 0; transform: scaleY(-1); }
.hud__c--br { right: 0; bottom: 0; transform: scale(-1); }
.hud__tl { position: absolute; left: 22px; top: 18px; display: inline-flex; align-items: center; gap: 14px; }
.hud__tl .hud__bat { position: static; width: 27px; height: 11px; color: var(--text); }
.hud__bat rect { animation: bat 12s steps(1) infinite; }
.hud__bat rect:nth-of-type(7) { animation-delay: -9s; }
.hud__bat rect:nth-of-type(6) { animation-delay: -6s; }
.hud__bat rect:nth-of-type(n+1):nth-of-type(-n+5) { animation: none; }
@keyframes bat { 75% { opacity: 0; } }
.hud__meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600;
  font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.hud__meta b { color: var(--text); font-weight: 800; }
.hud__meta i { width: 1px; height: 11px; background: rgba(242, 239, 234, 0.35); }
.hud__rec { right: 22px; top: 16px; width: 46px; height: 21px; color: var(--text); }
.hud__dot { fill: var(--rec); animation: blink 1.1s steps(1) infinite; }
/* focus reticle: trails the cursor, locks (shrinks + turns red) over a screen */
.hud__focus {
  position: absolute; left: 0; top: 0; z-index: 1; width: 150px; height: 91px; margin: -45.5px 0 0 -75px; pointer-events: none;
  color: rgba(242, 239, 234, 0.75); fill: currentColor; stroke: currentColor; stroke-width: 2.5;
  translate: 70vw 40vh; /* js: the cursor */
  will-change: transform;
  transition: color 0.25s, scale 0.35s var(--cut);
}
.hero.is-aim .hud__focus { color: var(--rec); scale: 0.78; }
/* the reticle names the screen it has locked on (js: .hud__tag follows the cursor) */
.hud__tag {
  position: absolute; left: 0; top: 0; z-index: 1; margin: 46px 0 0 -58px; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 3px;
  background: rgba(10, 10, 11, 0.8); color: var(--text); white-space: nowrap;
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  translate: 70vw 40vh; will-change: transform;
  opacity: 0; transform: translateY(4px); transition: opacity 0.2s, transform 0.3s var(--out);
}
.hud__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rec); }
.hud__tag::after { content: "View \2197"; color: var(--rec); }
.hero.is-aim .hud__tag { opacity: 1; transform: none; }
@media (hover: none) { .hud__tag { display: none; } }
/* take: a click cuts to the screen (flash, the reticle snaps shut) before the page changes */
.hero.is-take .hud__focus { scale: 0.6; color: var(--text); transition-duration: 0.12s; }
.tile.is-take > img, .tile.is-take > picture, .tile.is-take > video:not(.fx-static) { animation: cutFlash 0.3s steps(3, end); }

/* the camera boots: corners snap in one by one, the readout flickers on, the wall pulls into
   focus, REC lights; then the name is wiped in (--boot). One-off, transform/opacity/filter only */
.js .hero.is-on .hud__c { animation: hudIn 0.45s var(--out) backwards; }
.js .hero.is-on .hud__c--tl { --hx: 16px; --hy: 16px; }
.js .hero.is-on .hud__c--tr { --hx: -16px; --hy: 16px; animation-delay: 0.08s; }
.js .hero.is-on .hud__c--br { --hx: -16px; --hy: -16px; animation-delay: 0.16s; }
.js .hero.is-on .hud__c--bl { --hx: 16px; --hy: -16px; animation-delay: 0.24s; }
@keyframes hudIn { from { opacity: 0; translate: var(--hx) var(--hy); } }
.js .hero.is-on .hud__tl { animation: hudFlick 0.36s steps(3, end) 0.3s backwards; }
.js .hero.is-on .hud__rec { animation: hudFlick 0.36s steps(3, end) 0.55s backwards; }
@keyframes hudFlick { 0% { opacity: 0; } 40% { opacity: 1; } 70% { opacity: 0.2; } }
html.js:not(.is-lite) .hero.is-on .wall__plane { animation: focusPull 1.1s var(--out) backwards; }
@keyframes focusPull { from { filter: blur(14px) brightness(0.55); } to { filter: blur(0) brightness(1); } }
@media (hover: none) { .hud__focus { display: none; } }

/* ==========================================================================
   FREEPIK OVERLAYS — light leak, static.
   Small re-encodes in media/fx (tools/build_fx.py); the heavy ones are desktop-only,
   start after load and never run in lite mode.
   ========================================================================== */
.hero__leak {
  /* it reaches 3vw past the right edge, so drifting left (keyframes) never uncovers its border */
  position: absolute; right: -3vw; bottom: 0; z-index: 0; width: calc(min(78vw, 1500px) + 3vw); height: 72%;
  pointer-events: none; mix-blend-mode: screen; opacity: 0.8;
  transform-origin: 100% 70%;
  animation: leak 7s ease-in-out infinite alternate;
  /* the photo is a crop: fade its top and left edges so the glow never shows a seam */
  -webkit-mask: linear-gradient(to bottom, transparent, #000 45%), linear-gradient(to right, transparent, #000 30%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to bottom, transparent, #000 45%) intersect, linear-gradient(to right, transparent, #000 30%);
}
.hero__leak img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
@keyframes leak {
  0% { opacity: 0.55; transform: scale(1) translateX(0); }
  55% { opacity: 0.95; transform: scale(1.06) translateX(-1.5%); }
  100% { opacity: 0.7; transform: scale(1.02) translateX(1%); }
}
.js .hero:not(.is-on) .hero__leak { opacity: 0; }
/* out of view, the hero's loops hold still: HUD, timeline, light leak (js: is-offscreen) */
.hero.is-offscreen *, .hero.is-offscreen *::before, .hero.is-offscreen *::after { animation-play-state: paused !important; }

/* TV static on the tile the director just cut to */
.tile video.fx-static { z-index: 1; mix-blend-mode: screen; opacity: 0; pointer-events: none; }
.tile.is-cut video.fx-static { opacity: 1; }
.tile.is-cut > img, .tile.is-cut > picture, .tile.is-cut > video:not(.fx-static) { animation: cutFlash 0.38s steps(3, end); }
@keyframes cutFlash { 0% { filter: brightness(2.2) contrast(1.4); } 60% { filter: brightness(0.7); } }

.tile::after { z-index: 2; } /* the frame and tally stay above the static */

/* a faint red ambience behind a section heading, faded in near the viewport (js: setupLit).
   The ellipse is sized in % of its box (a 40% radius fades out by 28%) and centred at 42%,
   so it dies out inside the box and never shows a hard edge at the section's top. */
[data-lit] { position: relative; isolation: isolate; }
[data-lit]::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: min(1000px, 120vh);
  pointer-events: none; opacity: 0; transition: opacity 1.6s var(--out);
  background: radial-gradient(min(48vw, 760px) 40% at 80% 42%, rgba(255, 77, 31, 0.11), transparent 70%);
}
.process[data-lit]::before, .about[data-lit]::before {
  background: radial-gradient(min(48vw, 760px) 40% at 14% 42%, rgba(255, 77, 31, 0.11), transparent 70%);
}
.work[data-lit]::before {
  background: radial-gradient(min(52vw, 820px) 40% at 86% 42%, rgba(255, 77, 31, 0.1), transparent 70%);
}
[data-lit].is-lit::before { opacity: 1; }
/* once lit, the glow breathes slowly (desktop only; the delay lets the fade-in finish). It breathes
   with filter: opacity(), not opacity: the fade-in is a transition of opacity, and two animations
   of one property would both drop off the compositor and tick on the main thread, all page long */
@media (min-width: 768px) {
  html:not(.is-lite) [data-lit].is-lit::before { animation: litBreath 7s ease-in-out 1.6s infinite alternate; }
}
@keyframes litBreath { to { filter: opacity(0.5); } }

/* sections come in as they scroll up, each part once (js: setupCues sets data-cue, adds
   html.cues and, as a part comes into view, .is-cued with --q, its place among the parts
   that came up with it). Without js or in lite mode none of this applies. The reveals are
   animations with backwards fill: once played they let go, so hover and the director keep
   their own transitions. Moves use translate/scale, which add to an element's transform. */
.ln { display: inline-block; vertical-align: top; overflow: hidden; padding: 0.1em 0.16em 0.2em; margin: -0.1em -0.16em -0.2em; }
.ln__i { display: inline-block; transform-origin: 0 100%; }

/* the rule over a section: a red playhead runs along it, the grey line stays behind,
   then the number and label slide in */
html.cues [data-cue="rule"] { position: relative; }
html.cues [data-cue="rule"]::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: var(--rec); transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
}
html.cues [data-cue="rule"]:not(.is-cued) { border-top-color: transparent; }
html.cues [data-cue="rule"]:not(.is-cued) > * { opacity: 0; }
html.cues [data-cue="rule"].is-cued { transition: border-top-color 0.5s calc(var(--q, 0) * 0.09s + 0.55s); }
html.cues [data-cue="rule"].is-cued::after { animation: cueRule 1.2s var(--cut) calc(var(--q, 0) * 0.09s) backwards; }
html.cues [data-cue="rule"].is-cued > * { animation: cueSlide 0.7s var(--out) calc(var(--q, 0) * 0.09s + 0.2s + var(--i, 0) * 0.08s) backwards; }

/* a title: each line rises out of its mask, tipping upright as it lands */
html.cues [data-cue="lines"]:not(.is-cued) .ln__i { transform: translateY(calc(100% + 0.3em)) rotate(4deg); }
html.cues [data-cue="lines"].is-cued .ln__i { animation: cueLine 1.05s var(--out) calc(var(--q, 0) * 0.09s + var(--l, 0) * 0.11s) backwards; }

/* a picture opens like a monitor switching on: a line through the middle, then the frame,
   while the image settles from a little closer */
html.cues [data-cue="screen"]:not(.is-cued) { clip-path: inset(50% 50% 50% 50%); }
html.cues [data-cue="screen"].is-cued { animation: cueScreen 1.1s linear calc(var(--q, 0) * 0.09s) backwards; }
html.cues [data-cue="screen"].is-cued img { animation: cueSettle 1.8s var(--out) calc(var(--q, 0) * 0.09s) backwards; }
html.cues .row[data-cue].is-cued .row__link > * { animation: cueRise 0.7s var(--out) calc(var(--q, 0) * 0.09s + 0.45s) backwards; }
html.cues .reel__player.is-cued .reel__corners { animation: cueFrame 0.9s var(--out) calc(var(--q, 0) * 0.09s + 0.55s) backwards; }
html.cues .reel__player.is-cued .reel__play { animation: cuePlay 0.7s var(--out) calc(var(--q, 0) * 0.09s + 0.7s) backwards; }

/* text and blocks rise; a group's parts follow one after another; a panel rises, then fills */
html.cues :is(.reel__sub, .work__intro, .result__label) { --d: 0.2s; }
html.cues .result__text { --d: 0.3s; }
html.cues [data-cue="rise"]:not(.is-cued),
html.cues [data-cue="panel"]:not(.is-cued) { opacity: 0; translate: 0 32px; }
html.cues [data-cue="rise"].is-cued { animation: cueRise 0.9s var(--out) calc(var(--q, 0) * 0.09s + var(--d, 0s)) backwards; }
html.cues [data-cue="stack"]:not(.is-cued) > :not([data-cue]),
html.cues [data-cue="panel"]:not(.is-cued) > * { opacity: 0; }
html.cues [data-cue="stack"].is-cued > :not([data-cue]) { animation: cueRise 0.8s var(--out) calc(var(--q, 0) * 0.09s + 0.25s + var(--i, 0) * 0.07s) backwards; }
html.cues [data-cue="panel"].is-cued { animation: cueRise 0.9s var(--out) calc(var(--q, 0) * 0.09s + 0.1s) backwards; }
html.cues [data-cue="panel"].is-cued > * { animation: cueRise 0.7s var(--out) calc(var(--q, 0) * 0.09s + 0.35s + var(--i, 0) * 0.07s) backwards; }

@keyframes cueRule { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes cueSlide { from { opacity: 0; translate: -14px 0; } }
@keyframes cueLine { from { transform: translateY(calc(100% + 0.3em)) rotate(4deg); } }
@keyframes cueScreen { /* the line draws out, then the frame opens fast and settles */
  0% { clip-path: inset(50% 50% 50% 50%); animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1); }
  30% { clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes cueSettle { from { scale: 1.14; } }
@keyframes cueFrame { from { opacity: 0; scale: 1.08; } }
@keyframes cuePlay { from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); } } /* the button sits centred by its transform */
@keyframes cueRise { from { opacity: 0; translate: 0 32px; } }

@media (max-width: 767px) {
  .topbar { height: 64px; }
  .page-case main { padding-top: 64px; }
  .mark { gap: 10px; }
  .mark__av { width: 42px; height: 42px; }
  .mark__txt b { font-size: 15px; }
  .mark__txt small { display: none; }
  .topbar__tc { display: none !important; }
  .status { font-size: 11.5px; padding: 8px 12px; }
  /* the frame ends 14px above the text block, whatever the phone's height (js: --ch, the block's height) */
  .hud { inset: 76px var(--pad) calc(84px + env(safe-area-inset-bottom) + var(--ch, 62svh) + 14px); }
  .hud__meta, .hud__focus { display: none; }
  .hud__c { width: 34px; height: 36px; }
  .hud__tl { left: 16px; top: 14px; }
  .hud__rec { right: 16px; top: 12px; width: 40px; height: 18px; }
  .hero__leak { width: 120vw; height: 60%; }
}

/* ==========================================================================
   PROJECTS IN PLACE (home): a screen on the wall opens its project right here.
   The screen grows into the program monitor (PGM) while the wall pushes in and goes dark,
   then the project's other formats light up as preview monitors under it; a click (or 1–9)
   cuts one to program. Markup: tools/build_projects.py; js: setupHome → projects
   ========================================================================== */
/* the projects own eleven fixed screens in the clear band (measured clear of the text at
   1024–2560 px and on an upright tablet). p0 is the program screen: the newest project, always
   on air. p1–p10 are the rest, wide (16:9) or upright (9:16); a project not made yet keeps its
   screen with older work in it (data-slot names whose it is). q1 plugs the gap under the status */
.tile.p0 { grid-column: 11 / span 4; grid-row: 3 / span 3; }
.tile.p1 { grid-column: 3 / span 2; grid-row: 3; }
.tile.p2 { grid-column: 3 / span 2; grid-row: 4; }
.tile.p3 { grid-column: 5; grid-row: 3 / span 2; }
.tile.p4 { grid-column: 6; grid-row: 3 / span 2; }
.tile.p5 { grid-column: 7 / span 2; grid-row: 3; }
.tile.p6 { grid-column: 7 / span 2; grid-row: 4; }
.tile.p7 { grid-column: 9; grid-row: 3 / span 2; }
.tile.p8 { grid-column: 10; grid-row: 3 / span 2; }
.tile.p9 { grid-column: 15 / span 2; grid-row: 4; }
.tile.p10 { grid-column: 15 / span 2; grid-row: 5; }
.tile.q1 { grid-column: 15 / span 2; grid-row: 3; }
/* the older work around them is the standby wall: dimmed, lit up again under the cursor */
.wall__grid > .tile:not(.s) > img, .wall__grid > .tile:not(.s) > picture { filter: brightness(0.32) saturate(0.5); transition: filter 0.3s; }
.wall__grid > .tile:not(.s):hover > img, .wall__grid > .tile:not(.s):hover > picture { filter: none; }
@media (min-width: 768px) and (max-aspect-ratio: 1/1) {
  .tile.p0 { grid-column: 3 / span 6; grid-row: 3 / span 3; }
  .tile.p3 { grid-column: 9; grid-row: 3 / span 2; }
  .tile.p4 { grid-column: 10; grid-row: 3 / span 2; }
  .tile.p9 { grid-column: 9 / span 2; grid-row: 5; }
  .tile.p1 { grid-column: 3 / span 2; grid-row: 6; }
  .tile.p2 { grid-column: 3 / span 2; grid-row: 7; }
  .tile.p7 { grid-column: 5; grid-row: 6 / span 2; }
  .tile.p8 { grid-column: 6; grid-row: 6 / span 2; }
  .tile.p5 { grid-column: 7 / span 2; grid-row: 6; }
  .tile.p6 { grid-column: 7 / span 2; grid-row: 7; }
  .tile.p10 { grid-column: 9 / span 2; grid-row: 6; }
  .tile.q1 { grid-column: 9 / span 2; grid-row: 7; }
}
.tile[data-hold]:not(:hover)::after { box-shadow: inset 0 0 0 2px var(--rec); }
.tile[data-hold]::before { content: "● On air — " attr(data-label); opacity: 1; transform: none; }

/* the page keeps its scrollbar's room, so locking the scroll under a project shifts nothing */
html { scrollbar-gutter: stable; }
html.is-proj { overflow: hidden; }
.hero.is-open > :not(.proj, .bar) { visibility: hidden; }
/* a hidden part has no layer to animate on, so its loops would tick on the main thread */
.hero.is-open > :not(.proj, .bar), .hero.is-open > :not(.proj, .bar) * { animation-play-state: paused; }

.proj {
  position: absolute; z-index: 5; inset: 80px 0 48px;
  container-type: size;
  background: radial-gradient(60% 70% at 30% 45%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), var(--bg);
  outline: none;
}
.proj__in {
  --g: 10px;
  --hh: 36px;
  /* one row of preview monitors as wide as the page; the program monitor takes what is left,
     beside a column for the words */
  --mw: clamp(100px, calc((100cqw - 2 * var(--pad) - (var(--n) - 1) * var(--g)) / var(--n)), 250px);
  --mh: calc(var(--mw) * 9 / 16);
  --pw: min(calc(100cqw - 2 * var(--pad) - clamp(270px, 27cqw, 520px) - 2 * var(--g)),
            calc((100cqh - 16px - var(--hh) - var(--mh) - 2 * var(--g)) * 16 / 9));
  height: 100%;
  padding: 4px var(--pad) 12px;
  display: grid; gap: var(--g) calc(var(--g) * 2);
  grid-template-columns: var(--pw) minmax(0, 1fr);
  grid-template-rows: var(--hh) minmax(0, 1fr) var(--mh);
  grid-template-areas: "head head" "pgm info" "pvw pvw";
}
.proj__head {
  grid-area: head; display: flex; align-items: center; gap: 24px; min-width: 0;
  color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.proj__kick { display: flex; align-items: center; gap: 16px; margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; }
.proj__air { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.proj__air i { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); animation: blink 1.2s steps(2, jump-none) infinite; }
.proj__keys { margin: 0 0 0 auto; white-space: nowrap; }
.proj__keys kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin: 0 2px;
  border: 1px solid var(--line-2); border-radius: 4px; color: var(--text); font: inherit; font-size: 10.5px;
}
.proj__close {
  display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--text); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.proj__close:hover, .proj__close:focus-visible { background: var(--rec); border-color: var(--rec); color: #000; outline: none; }
.proj__close span { font-size: 13px; }

/* program monitor */
.proj__pgm {
  grid-area: pgm; position: relative; align-self: start; margin: 0;
  width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #050506;
  box-shadow: 0 0 0 1px var(--line), 0 40px 90px -40px color-mix(in srgb, var(--accent) 55%, transparent);
}
.mv__screen { position: absolute; inset: 0; container-type: size; }
.mv__screen > :is(img, video, iframe) {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; border: 0; object-fit: contain;
}
.mv__screen.is-cover > :is(img, video) { object-fit: cover; }
/* lite mode: a live page waits behind its still until asked for */
.mv__ask { position: absolute; inset: 0; display: grid; place-items: center; }
.mv__ask img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mv__ask .btn { position: relative; }
.mv__note { position: relative; margin: 0; padding: 10px 18px; border-radius: 999px; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 14px; }
.proj__pgm.is-cut .mv__screen { animation: cutFlash 0.3s steps(3, end); }
/* a set: a grid of pieces on one monitor; a click puts one alone on it */
.mv__set { position: absolute; inset: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 8px; padding: 14px; }
.mv__cell {
  position: relative; flex: 0 0 calc((100% - (var(--cols) - 1) * 8px) / var(--cols)); height: calc((100% - (var(--rows) - 1) * 8px) / var(--rows));
  padding: 0; border: 0; background: none; cursor: zoom-in;
}
.mv__cell > * { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
/* pieces of one shape: each cell is the piece's own size, so every gutter is the same 8px */
.mv__set.is-fit .mv__cell {
  --cw: min((100cqw - 28px - (var(--cols) - 1) * 8px) / var(--cols), (100cqh - 28px - (var(--rows) - 1) * 8px) / var(--rows) * var(--ar));
  flex: 0 0 var(--cw); height: calc(var(--cw) / var(--ar));
}
.mv__set.is-solo { padding: 0; }
.mv__set.is-solo .mv__cell:not(.is-pick) { display: none; }
.mv__set.is-solo .mv__cell { flex-basis: 100%; height: 100%; cursor: zoom-out; }
.mv__umd {
  position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; max-width: calc(100% - 24px); pointer-events: none;
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.mv__tally { flex: none; padding: 5px 8px; border-radius: 3px 0 0 3px; background: var(--rec); color: #0a0a0b; font-weight: 800; }
.mv__umd [data-umd] { padding: 5px 9px; border-radius: 0 3px 3px 0; background: rgba(10, 10, 11, 0.8); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj__pgm.is-live .mv__umd { left: auto; right: 12px; } /* a live page has its own label top left */

/* the words */
.proj__info {
  grid-area: info; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  display: flex; flex-direction: column; gap: 16px; padding: 0 6px 30px 0;
  /* a long text fades out at the foot of the column instead of being cut */
  -webkit-mask: linear-gradient(#000 calc(100% - 34px), transparent); mask: linear-gradient(#000 calc(100% - 34px), transparent);
}
/* a long title (--tl letters, ~0.8em each) shrinks so it still fits the column on one line */
.proj__title { margin: 0; font-weight: 900; font-stretch: 125%; font-size: clamp(24px, min(17cqw, 112cqw / var(--tl, 6)), 96px); line-height: 0.84; letter-spacing: -0.04em; text-transform: uppercase; }
.proj__line { margin: 0; font-size: clamp(16px, 4.6cqw, 23px); line-height: 1.25; letter-spacing: -0.01em; text-wrap: pretty; }
.proj__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.proj__cta .btn { height: 44px; padding: 0 18px; font-size: 14px; cursor: pointer; }
/* the way into a project's live page: orange, with a blinking tally */
.btn--live { background: var(--rec); color: #000; }
.btn--live:hover { background: var(--text); color: var(--bg); }
.btn__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: liveDot 1.2s steps(2, jump-none) infinite; }
@keyframes liveDot { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .btn__dot { animation: none; } }
.proj__idea { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; text-wrap: pretty; }
.proj__facts { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.proj__facts li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.proj__facts b { flex: none; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.proj__facts span, .proj__role, .proj__note {
  color: var(--muted); font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5;
}
.proj__facts span { text-align: right; }
.proj__info { container-type: inline-size; } /* sizes in it follow the column (cqw) */
@container (max-width: 340px) {
  .proj__facts li { flex-direction: column; gap: 1px; }
  .proj__facts span { text-align: left; }
}
.proj__role { margin: 0; color: var(--text); }
.proj__role span { display: block; margin-bottom: 3px; color: var(--rec); }
.proj__note { margin: 0; font-size: 10.5px; opacity: 0.8; }

/* preview monitors */
.proj__pvw { grid-area: pvw; display: flex; gap: var(--g); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mv__mon {
  position: relative; flex: 0 0 var(--mw); height: var(--mh); padding: 0; border: 0; border-radius: 4px; overflow: hidden;
  background: #050506; color: var(--text); cursor: pointer;
}
.mv__mon img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; transition: opacity 0.2s; }
.mv__mon:hover img, .mv__mon:focus-visible img, .mv__mon[aria-pressed="true"] img { opacity: 1; }
.mv__mon::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(242, 239, 234, 0.12); transition: box-shadow 0.2s;
}
.mv__mon:focus-visible { outline: none; }
.mv__mon:hover::after, .mv__mon:focus-visible::after { box-shadow: inset 0 0 0 2px var(--text); }
.mv__mon[aria-pressed="true"]::after { box-shadow: inset 0 0 0 2px var(--rec); }
.mv__name {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 7px; padding: 16px 8px 6px;
  background: linear-gradient(transparent, rgba(5, 5, 6, 0.92)); text-align: left; white-space: nowrap; overflow: hidden;
  font-family: var(--f-label); font-stretch: 80%; font-weight: 600; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
}
.mv__name b { flex: none; display: grid; place-items: center; min-width: 17px; height: 17px; border-radius: 3px; background: rgba(242, 239, 234, 0.16); font-size: 10px; }
.mv__mon[aria-pressed="true"] .mv__name b { background: var(--rec); color: #0a0a0b; }
.mv__live {
  position: absolute; right: 6px; top: 6px; padding: 3px 6px; border-radius: 3px; background: var(--rec); color: #0a0a0b; font-style: normal;
  font-family: var(--f-label); font-stretch: 80%; font-weight: 800; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
}

/* the rest of the project lights up once the monitor has landed */
.proj.is-in .proj__head { animation: projUp 0.5s var(--out) 0.3s backwards; }
.proj.is-in .proj__info > * { animation: projUp 0.7s var(--out) calc(0.36s + var(--k, 0) * 0.06s) backwards; }
.proj.is-in .proj__info > :nth-child(2) { --k: 1; }
.proj.is-in .proj__info > :nth-child(3) { --k: 2; }
.proj.is-in .proj__info > :nth-child(4) { --k: 3; }
.proj.is-in .proj__info > :nth-child(n + 5) { --k: 4; }
.proj.is-in .mv__mon { animation: powerOn 0.6s steps(4, end) calc(0.42s + var(--i) * 0.06s) backwards; }
.proj.is-fade { animation: projFade 0.35s ease-out; }
@keyframes projUp { from { opacity: 0; transform: translateY(16px); } }
@keyframes projFade { from { opacity: 0; } }

/* the move (same-document view transition, js adds .vt-open / .vt-close to <html>):
   the clicked screen is "take" on the wall and the program monitor in the project. The wall
   is one snapshot that pushes in toward it and goes out of focus; the top bar and the
   on-air bar stay where they are */
html:is(.vt-open, .vt-close) .topbar { view-transition-name: topbar; }
html:is(.vt-open, .vt-close) .hero > .bar { view-transition-name: onair; }
::view-transition-group(topbar), ::view-transition-group(onair), ::view-transition-new(topbar), ::view-transition-new(onair) { animation: none; }
::view-transition-old(topbar), ::view-transition-old(onair) { display: none; }
html.vt-open::view-transition-old(root) { animation: vtWallIn 0.8s cubic-bezier(0.5, 0, 0.15, 1) both; transform-origin: var(--tx, 50%) var(--ty, 50%); }
html.vt-open::view-transition-new(root) { animation: projFade 0.5s ease-out 0.24s both; }
html.vt-close::view-transition-old(root) { animation: vtFadeOut 0.28s ease-in both; }
html.vt-close::view-transition-new(root) { animation: vtWallOut 0.75s cubic-bezier(0.2, 0.75, 0.12, 1) both; transform-origin: var(--tx, 50%) var(--ty, 50%); }
html.vt-open::view-transition-group(take) { animation-duration: 0.8s; animation-timing-function: cubic-bezier(0.22, 0.8, 0.12, 1); }
html.vt-close::view-transition-group(take) { animation-duration: 0.65s; animation-timing-function: cubic-bezier(0.3, 0.7, 0.1, 1); }
html:is(.vt-open, .vt-close)::view-transition-old(take), html:is(.vt-open, .vt-close)::view-transition-new(take) { height: 100%; object-fit: cover; }
@keyframes vtWallIn { to { transform: scale(1.16); filter: blur(10px) brightness(0.35); opacity: 0; } }
@keyframes vtWallOut { from { transform: scale(1.16); filter: blur(10px) brightness(0.35); opacity: 0; } }
@keyframes vtFadeOut { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* an upright tablet: the monitor on top, the formats in two rows, the words under them */
@media (min-width: 768px) and (max-aspect-ratio: 1/1) {
  .proj__in {
    --mw: calc((100cqw - 2 * var(--pad) - 4 * var(--g)) / 5);
    grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--hh) auto auto minmax(0, 1fr);
    grid-template-areas: "head" "pgm" "pvw" "info";
  }
  .proj__pvw { flex-wrap: wrap; }
  .proj__keys { display: none; }
}
/* a phone (no wall there: a link to /#slug opens it) — one column that scrolls */
@media (max-width: 767px) {
  .proj { position: fixed; inset: 64px 0 0; z-index: 39; overflow-y: auto; container-type: inline-size; }
  .proj__in {
    --mw: 42vw;
    display: flex; flex-direction: column; height: auto; padding-bottom: calc(100px + env(safe-area-inset-bottom)); /* clear of the dock */
  }
  .proj__keys { display: none; }
  .proj__kick > span:last-child { display: none; }
  .proj__head { justify-content: space-between; }
  .proj__pvw { order: 1; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); scroll-padding: 0 var(--pad); scroll-snap-type: x mandatory; }
  .mv__mon { scroll-snap-align: start; }
  .proj__info { order: 2; overflow: visible; padding: 8px 0 0; -webkit-mask: none; mask: none; }
  .proj__title { font-size: min(15vw, 105vw / var(--tl, 6)); }
  .proj__line { font-size: 18px; }
}