/* ─── 00 opening slate ────────────────────────────── */
html.is-loading, html.is-loading body { overflow: hidden; }
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--gutter) * 0.6 + 18px) calc(var(--gutter) * 0.6 + 18px);
  background: #050505;
  color: var(--fg);
  transition: transform 1s cubic-bezier(0.7, 0, 0.2, 1);
  /* if the script never runs, the slate still gets out of the way */
  animation: loader-failsafe 0s linear 10s forwards;
}
.loader.is-out { transform: translateY(-101%); }
.loader::after {
  /* the tally edge the curtain lifts on */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--tally);
  opacity: 0;
  transition: opacity 0.2s;
}
.loader.is-out::after { opacity: 1; }
@keyframes loader-failsafe { to { visibility: hidden; } }
.loader .corner { position: absolute; width: 26px; height: 26px; border-color: var(--hairline-strong); border-style: solid; border-width: 0; }
.loader .corner.tl { top: calc(var(--gutter) * 0.6); left: calc(var(--gutter) * 0.6); border-top-width: 1px; border-left-width: 1px; }
.loader .corner.tr { top: calc(var(--gutter) * 0.6); right: calc(var(--gutter) * 0.6); border-top-width: 1px; border-right-width: 1px; }
.loader .corner.bl { bottom: calc(var(--gutter) * 0.6); left: calc(var(--gutter) * 0.6); border-bottom-width: 1px; border-left-width: 1px; }
.loader .corner.br { bottom: calc(var(--gutter) * 0.6); right: calc(var(--gutter) * 0.6); border-bottom-width: 1px; border-right-width: 1px; }
.loader-top, .loader-foot {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: rgb(236 233 226 / 0.75);
  font-size: 10px;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.8);
}
.loader-foot { grid-row: 3; }
.loader-rec { color: var(--tally); display: inline-flex; align-items: center; gap: 8px; }
/* the reel: every shot stacked, one on at a time — a hard cut, no fades */
.loader-stage { position: absolute; inset: 0; z-index: 0; background: #050505; }
.loader-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: contrast(1.1) saturate(0.85);
}
.loader-shot.is-on { opacity: 1; animation: loader-punch 140ms ease-out both; }
@keyframes loader-punch { from { transform: scale(1.06); } to { transform: scale(1); } }
.loader-stage::after {
  /* scanlines and a vignette: it reads as a monitor, not a slideshow */
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 40%, rgb(0 0 0 / 0.7) 100%);
}
.loader-word {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(72px, 17vw, 260px);
  line-height: 0.85;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
.loader-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
  opacity: 0;
}
.loader.is-title .loader-title { opacity: 1; }
.loader.is-title .loader-stage { background: #050505; }
.loader-title-k { color: var(--muted); font-size: 10px; }
.loader-title-n { font-family: var(--display); font-size: clamp(56px, 11vw, 170px); line-height: 0.88; text-transform: uppercase; }
.loader-title-r { color: var(--tally); font-size: 10px; }
.loader-track { flex: 1; max-width: 320px; height: 2px; background: rgb(255 255 255 / 0.18); overflow: hidden; }
.loader-track i { display: block; height: 100%; background: var(--tally); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.25s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .loader { transition: none; }
  .loader.is-out { visibility: hidden; }
  .loader .loader-title { opacity: 1; }
}

/* ─── shared bits ─────────────────────────────────── */
.rule {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  vertical-align: middle;
  margin: 0 12px;
}
.rec-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

/* ─── 01 hero ─────────────────────────────────────── */
/* The track runs long: the shot plays, then the manifesto slides up over
   the pinned hero like a card dealt onto the table. */
.hero-track {
  position: relative;
  height: 260lvh;
}
.hero {
  position: sticky;
  top: 0;
  isolation: isolate;
  height: 100lvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--gutter);
  /* clear the frame's bottom corner labels */
  padding-bottom: calc(var(--gutter) * 0.6 + 44px);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  transform-origin: 50% 35%;
  transform: scale(calc(1 - var(--recede, 0) * 0.07));
}
/* as the card arrives, the frame under it falls back into the dark */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: #000;
  opacity: calc(var(--recede, 0) * 0.75);
}
.hero-content, .hero-frame { transform: translateY(calc(var(--recede, 0) * -7vh)); }
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.55;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Once the canvas is drawing the footage, the <video> is only its source. */
.hero.is-graded .hero-video { opacity: 0; }
.hero-vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 35%, rgb(6 6 6 / 0.8) 100%),
    linear-gradient(to bottom, rgb(6 6 6 / 0) 58%, rgb(6 6 6 / 0.7) 80%, var(--bg) 100%);
}

.hero-frame {
  position: absolute;
  inset: calc(var(--gutter) * 0.6);
  pointer-events: none;
}
.hero-frame .corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--hairline-strong);
}
.hero-frame .corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hero-frame .corner.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hero-frame .corner.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hero-frame .corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.frame-meta {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.frame-meta.tl { top: 14px; left: 14px; }
.frame-meta.tr { top: 14px; right: 14px; }
.frame-meta.bl { bottom: 14px; left: 14px; }
.frame-meta.br { bottom: 14px; right: 14px; }
.frame-meta.rec { color: var(--tally); }

.hero-content {
  position: relative;
  margin-bottom: clamp(28px, 5vh, 64px);
}
/* the slate above the title: a tally chip and the roles, legible on any frame */
.hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(16px, 2.4vh, 26px);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-meta .onair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  background: var(--tally);
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}
.hero-meta .onair .rec-dot { background: #fff; }
.hero-meta .roles {
  padding: 7px 12px;
  color: var(--fg);
  background: rgb(6 6 6 / 0.62);
  border: 1px solid var(--hairline-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}
.hero-meta .roles b { color: var(--tally); font-weight: 500; margin-right: 10px; }
.hero-meta .sep { font-style: normal; color: var(--muted); margin: 0 0.6em; }

/* title left, copy right, both on the floor of the frame — the face stays clear */
.hero-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 22rem);
  justify-content: space-between;
  align-items: end;
  gap: clamp(24px, 4vw, 72px);
}
.hero-h {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 6.2vw, 112px);
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.35);
}
.hero-line { display: block; }
.hero-h em { font-style: normal; color: var(--tally); }
.hero-sub {
  padding-left: 16px;
  border-left: 2px solid var(--tally);
  color: var(--silver);
  font-size: 14px;
  line-height: 1.6;
}
.hero-sub em { font-style: normal; font-weight: 500; color: var(--fg); }
/* the line of faith: set apart from the intro and lit once as the page
   opens — a light that sweeps across the words, then rests. Pointer over it
   lights it again. Nothing loops. */
.hero-faith {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgb(255 214 140 / 0.25);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.45;
  font-weight: 400;
  color: var(--fg);
}
.hero-faith b {
  display: inline;
  font-weight: 600;
  color: transparent;
  background-image: linear-gradient(100deg, #f3e3c3 0 38%, #fff8e6 46%, #ffd98a 50%, #fff8e6 54%, #f3e3c3 62% 100%);
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 0 rgb(255 210 120 / 0));
}
.hero-faith.is-lit b { animation: faith-shine 2.2s cubic-bezier(0.3, 0.1, 0.2, 1) 1 both; }
@keyframes faith-shine {
  0% { background-position: 100% 0; filter: drop-shadow(0 0 0 rgb(255 210 120 / 0)); }
  45% { filter: drop-shadow(0 0 14px rgb(255 210 120 / 0.55)); }
  100% { background-position: 0% 0; filter: drop-shadow(0 0 6px rgb(255 210 120 / 0.22)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-faith b { background-position: 50% 0; filter: drop-shadow(0 0 6px rgb(255 210 120 / 0.22)); }
  .hero-faith.is-lit b { animation: none; }
}

.hero-foot {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  color: var(--muted);
  font-size: 10px;
}
.hf-l { display: flex; align-items: center; gap: 10px; }
.hf-tick { width: 10px; height: 1px; background: currentColor; }
.hf-c { display: flex; gap: 18px; opacity: 0.7; }
.hf-r { text-align: right; }

/* ─── 02 manifesto ────────────────────────────────── */
.mf {
  position: relative;
  z-index: 2;
  margin-top: -100lvh;
  padding: clamp(80px, 12vw, 180px) var(--gutter);
  background: var(--bg);
  border-top: 1px solid var(--hairline-strong);
  box-shadow: 0 -50px 90px rgb(0 0 0 / 0.7);
}
/* a tally stripe on the card's leading edge */
.mf::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--gutter);
  width: clamp(80px, 12vw, 180px);
  height: 3px;
  background: var(--tally);
}
.mf-head, .mf-leader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
}
.mf-progress {
  height: 1px;
  margin: 28px 0 clamp(56px, 8vw, 120px);
  background: var(--hairline);
}
.mf-progress i {
  display: block;
  height: 100%;
  background: var(--tally);
  transform-origin: left;
  transform: scaleX(0);
}
.mf-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.mf-figure-inner {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--char);
}
/* the picture stays with the reader while the statement runs past it */
.mf-figure { position: sticky; top: calc(var(--gutter) + 24px); }
.mf-figure-inner img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  transition: filter 600ms var(--ease-entrance);
  will-change: transform;
}
.mf-figure:hover img { filter: grayscale(0) contrast(1.05); }
.mf-tape {
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--tally);
  font-size: 10px;
}
.mf-slate {
  margin-top: 16px;
  border-top: 1px solid var(--hairline-strong);
  font-size: 10px;
}
.mf-slate div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.mf-slate dt { color: var(--muted); }

.mf-byline { color: var(--muted); font-size: 10px; margin-bottom: 40px; }
.mf-quote {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(42px, 6vw, 104px);
  line-height: 0.92;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 0.18em;
}
.mf-line { display: flex; align-items: baseline; gap: 0.4em; }
.mf-num { font-size: 11px; color: var(--muted); flex: none; width: 2.5em; }
.mf-quote em { font-style: normal; color: var(--tally); }
.mf-essay {
  margin-top: clamp(40px, 5vw, 72px);
  max-width: 36em;
  display: grid;
  gap: 20px;
  color: var(--silver);
  font-size: 16px;
  line-height: 1.6;
}
.mf-essay em { font-style: normal; font-weight: 500; color: var(--fg); box-shadow: inset 0 -0.35em 0 var(--tally-soft); }
.mf-credits {
  margin-top: clamp(48px, 6vw, 88px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline-strong);
}
.mf-credits > div { padding: 18px 0 0; }
.mf-credits dt { color: var(--muted); font-size: 10px; margin-bottom: 10px; }
.mf-credits dd {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 5vw, 84px);
  line-height: 0.9;
}
.mf-leader { margin-top: clamp(80px, 10vw, 140px); }
.mf-leader .rule { flex: 1; margin: 0 16px; }

/* ─── 03 timeline ─────────────────────────────────── */
/* Pinned for four screens of scroll; the edit slides under a fixed playhead
   and the viewer shows whichever chapter the playhead is parked on. */
.tl {
  position: relative;
  height: 1150lvh;
  border-top: 1px solid var(--hairline);
}
.tl-pin {
  position: sticky;
  top: 0;
  height: 100lvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--gutter);
  gap: clamp(16px, 3vh, 36px);
}
.tl-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
}
.tl-tc { color: var(--fg); letter-spacing: 0.12em; }

.tl-viewer { position: relative; }
.tl-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 5vw, 96px);
  align-items: end;
  pointer-events: none;
}
.tl-panel.is-active { pointer-events: auto; }
/* the chapter number, huge and hollow, fills the head of the viewer */
.tl-panel::before {
  content: attr(data-n);
  position: absolute;
  top: -2vh;
  left: -0.04em;
  font-family: var(--display);
  font-size: clamp(120px, 26vh, 300px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgb(255 42 31 / 0.5);
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 500ms var(--ease-entrance), transform 800ms var(--ease-plate);
}
.tl-panel.is-active::before { opacity: 1; transform: none; }
.tl-panel > * > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 420ms var(--ease-entrance), transform 700ms var(--ease-plate);
}
.tl-panel.is-active > * > * { opacity: 1; transform: none; }
.tl-panel.is-active > * > :nth-child(2) { transition-delay: 60ms; }
.tl-panel.is-active > * > :nth-child(3) { transition-delay: 120ms; }
.tl-panel.is-active .tl-panel-b > * { transition-delay: 160ms; }
.tl-panel.is-active .tl-panel-b > :nth-child(2) { transition-delay: 220ms; }

.tl-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: clamp(12px, 2vh, 22px);
}
.tl-ch { color: var(--tally); }
.tl-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  padding: 4px 8px;
  background: var(--tally);
  color: #fff;
}
.tl-live .rec-dot { background: #fff; }
.tl-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(48px, 8.4vw, 150px);
  line-height: 0.88;
  text-transform: uppercase;
}
.tl-role { margin-top: 14px; color: var(--silver); font-size: clamp(14px, 1.2vw, 17px); }

/* the chapter's monitor: what the playhead is parked on, scrubbed by --local */
.tl-media {
  position: relative;
  height: clamp(150px, 30vh, 300px);
  margin-bottom: 18px;
  overflow: hidden;
  background: #0b0b0c;
  border: 1px solid var(--hairline-strong);
}
.tl-media-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgb(0 0 0 / 0.7);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--fg);
}
.tl-media-tag .rec-dot { color: var(--tally); }
.tl-media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  /* a slow pull-back that lasts the whole chapter, tied to the scroll */
  transform: scale(calc(1.4 - var(--raw, 0) * 0.4));
  transform-origin: 40% 40%;
  will-change: transform;
}
.tl-media--photo { border-color: var(--tally); }
/* the apps, one after another: each phone slides in, its screen scrolls
   with the reader, and the next one pushes it out — a switcher, by hand */
.tl-media--reel {
  background:
    radial-gradient(ellipse at 22% 110%, rgb(255 42 31 / 0.22), transparent 55%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px),
    #0b0b0c;
}
.tl-reel { position: absolute; inset: 0; }
/* reel items size themselves from the monitor (cq units) */
.tl-media--reel { container-type: size; }
.tl-reel-item {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 30% minmax(0, 1fr);
  grid-template-columns: 50cqh minmax(0, 1fr);
  align-items: center;
  gap: 7%;
  padding: 0 9%;
  opacity: var(--o, 0);
  transform: translateX(var(--x, 100%));
  will-change: transform, opacity;
}
.tl-reel-phone {
  height: 84%;
  aspect-ratio: 0.6;
  justify-self: start;
  border: 4px solid #1b1b1b;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.06);
  transform: rotate(calc(var(--tilt, 0) * 1deg));
}
.tl-reel-phone img { display: block; width: 100%; transform: translateY(calc(var(--s, 0) * -22%)); }
.tl-reel-item figcaption { display: grid; gap: 10px; }
.tl-reel-n { color: var(--tally); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.tl-reel-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 2.7vw, 46px);
  line-height: 0.95;
  text-transform: uppercase;
}
.tl-reel-line { color: var(--silver); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.tl-reel-dots { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.tl-reel-dots i { width: 18px; height: 2px; background: var(--hairline-strong); }
.tl-reel-dots i.is-on { background: var(--tally); }
.tl-clip--long { width: calc(clamp(320px, 46vw, 760px) * 2.6); }
.tl-clip--mid { width: calc(clamp(320px, 46vw, 760px) * 2); }
/* stills: full-frame photos with a lower third, cut one after another */
.tl-shot { padding: 0; display: block; }
.tl-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.12 - var(--s, 0) * 0.12));
}
.tl-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.75), transparent 55%);
}
.tl-lower {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  display: grid;
  gap: 4px;
  padding-left: 10px;
  border-left: 3px solid var(--tally);
}
.tl-lower-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1;
  text-transform: uppercase;
}
.tl-media-tag--top { top: 10px; bottom: auto; z-index: 2; }
.tl-media-tag--tr { top: 10px; right: 10px; left: auto; bottom: auto; z-index: 2; }
/* a portrait still shown whole, every face in frame: the photo sits in the
   middle, the same picture blurred fills the sides. The scroll starts close
   on the faces and pulls back until the whole team is in frame, then holds. */
.tl-shot--fit { --k: calc(1 - min(1, var(--s, 0) / 0.7)); }
.tl-shot--fit img {
  object-fit: contain;
  transform-origin: 50% 36%;
  transform: scale(calc(1 + 0.9 * var(--k) * var(--k)));
}
/* the lower third clears off once the shot is wide, so it covers no one */
.tl-shot--fit .tl-lower, .tl-shot--clear .tl-lower { opacity: calc(1 - min(1, max(0, (var(--s, 0) - 0.5) / 0.2))); }
.tl-shot--fit img.tl-shot-bg { object-fit: cover; filter: blur(22px) brightness(0.45); transform: scale(1.2); }
.tl-shot--fit::after { background: linear-gradient(to top, rgb(0 0 0 / 0.6), transparent 35%); }
/* honest placeholder: bars and a NO SIGNAL slate until the stills arrive */
.tl-media--nosignal { display: grid; place-items: center; }
.tl-bars {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #c0c0c0 0 14.28%, #c0c000 0 28.57%, #00c0c0 0 42.85%, #00c000 0 57.14%, #c000c0 0 71.42%, #c00000 0 85.71%, #0000c0 0);
  opacity: 0.18;
  transform: translateX(calc(var(--local, 0) * -6%)) scaleX(1.12);
}
.tl-nosig {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 12px 16px;
  background: rgb(0 0 0 / 0.8);
  border: 1px solid var(--hairline-strong);
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.tl-nosig b { color: var(--fg); font-weight: 500; }
/* a title card, set like an opening credit */
.tl-media--card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 0 8%;
  text-align: center;
  background: radial-gradient(ellipse at 50% 50%, #1a1a1c, #070707 70%);
}
.tl-card-k { color: var(--tally); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; }
.tl-card-t {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 40px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: calc((1 - var(--local, 0)) * 0.2em);
}
.tl-card-s { color: var(--muted); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
/* a title card as the first shot of a reel */
.tl-reel-item.tl-card-item { grid-template-columns: minmax(0, 1fr); }

.tl-slate { border-top: 1px solid var(--hairline-strong); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.tl-slate div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.tl-slate dt { color: var(--muted); }
.tl-slate dd { text-align: right; }
.tl-points { list-style: none; margin-top: 18px; display: grid; gap: 10px; color: var(--silver); font-size: 15px; line-height: 1.5; }
.tl-points li { padding-left: 18px; position: relative; }
.tl-points li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 1px; background: var(--tally); }
.tl-link { display: inline-block; margin-top: 18px; color: var(--tally); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }

/* the edit */
.tl-edit {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  border-top: 1px solid var(--hairline-strong);
  padding-top: 10px;
}
.tl-labels { display: grid; grid-template-rows: 18px 52px 30px; row-gap: 6px; padding-top: 22px; color: var(--muted); font-size: 9px; }
.tl-labels span { display: flex; align-items: center; }
.tl-window { position: relative; overflow: hidden; height: 140px; }
.tl-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  gap: 4px;
  padding-top: 22px;
  will-change: transform;
}
.tl-ruler {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  background:
    repeating-linear-gradient(90deg, var(--hairline-strong) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 20px);
  background-size: 100% 16px, 100% 8px;
  background-repeat: repeat-x;
  background-position: 0 0, 0 8px;
}
.tl-clip {
  position: relative;
  flex: none;
  width: clamp(320px, 46vw, 760px);
  display: grid;
  grid-template-rows: 18px 52px 30px;
  row-gap: 6px;
}
/* V2: the chapter's name tag */
.tl-clip::before {
  content: "";
  grid-row: 1;
  background: var(--smoke);
  border-left: 2px solid var(--muted);
}
/* V1: the clip itself */
.tl-clip-v {
  grid-row: 2;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: linear-gradient(180deg, #1d1d20, #141416);
  border: 1px solid var(--hairline-strong);
  color: var(--silver);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color 300ms, color 300ms, background 300ms;
}
.tl-clip-v b { color: var(--fg); font-weight: 500; margin-right: 10px; }
/* A1: a waveform */
.tl-clip-a {
  grid-row: 3;
  background:
    linear-gradient(90deg, transparent, transparent),
    repeating-linear-gradient(90deg, rgb(47 211 107 / 0.55) 0 2px, transparent 2px 5px);
  -webkit-mask: radial-gradient(ellipse 60% 50% at 30% 50%, #000 40%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 75% 50%, #000 30%, transparent 70%);
  mask: radial-gradient(ellipse 60% 50% at 30% 50%, #000 40%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 75% 50%, #000 30%, transparent 70%);
  opacity: 0.6;
}
.tl-clip-fill {
  position: absolute;
  left: 0;
  top: 24px;
  height: 52px;
  width: 100%;
  background: rgb(255 42 31 / 0.14);
  transform-origin: left;
  transform: scaleX(var(--fill, 0));
  pointer-events: none;
}
.tl-clip.is-active .tl-clip-v { border-color: var(--tally); color: var(--fg); background: linear-gradient(180deg, #2a1514, #1a1010); }
.tl-clip.is-active::before { border-left-color: var(--tally); background: rgb(255 42 31 / 0.35); }
.tl-clip.is-live .tl-clip-a { opacity: 1; }

.tl-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--playhead, 30%);
  width: 2px;
  margin-left: -1px;
  background: var(--tally);
  box-shadow: 0 0 18px rgb(255 42 31 / 0.6);
  pointer-events: none;
}
.tl-playhead span {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--tally);
  font-size: 12px;
}

/* ─── 04 lab ──────────────────────────────────────── */
.hero-meta .roles .ai { color: var(--tally); font-weight: 500; }
.lab {
  position: relative;
  padding: clamp(80px, 12vw, 180px) var(--gutter);
  border-top: 1px solid var(--hairline);
}
.lab-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
  margin-bottom: clamp(56px, 8vw, 120px);
}
.lab-intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 110px);
  align-items: end;
}
.lab-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(48px, 7.6vw, 136px);
  line-height: 0.9;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
}
.lab-title em { font-style: normal; color: var(--tally); }
.lab-lede {
  color: var(--silver);
  font-size: 16px;
  line-height: 1.6;
  max-width: 30em;
}
.lab-lede em { font-style: normal; font-weight: 500; color: var(--fg); }

.lab-grid {
  list-style: none;
  margin-top: clamp(56px, 7vw, 110px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.lab-card {
  padding: 10px 10px 18px;
  border: 1px solid var(--hairline-strong);
  background: rgb(255 255 255 / 0.015);
  transition: border-color var(--duration-normal) var(--ease-entrance);
}
.lab-card:hover { border-color: var(--tally); }
/* each project sits in its own monitor, like a window on the multiview */
.lab-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 30% 20%, rgb(255 42 31 / 0.18), transparent 60%),
    #0d0d0e;
  margin-bottom: 18px;
}
.lab-tag, .lab-status {
  position: absolute;
  top: 10px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lab-tag { left: 10px; color: var(--muted); }
.lab-status { right: 10px; display: flex; align-items: center; gap: 6px; color: var(--tally); }
.lab-glyph {
  position: absolute;
  right: 6%;
  bottom: -6%;
  font-family: var(--display);
  font-size: clamp(90px, 11vw, 190px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgb(236 233 226 / 0.18);
  transition: -webkit-text-stroke-color var(--duration-normal) var(--ease-entrance);
}
.lab-card:hover .lab-glyph { -webkit-text-stroke-color: var(--tally); }
.lab-name {
  padding: 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 38px);
  text-transform: uppercase;
  line-height: 1;
}
.lab-line { padding: 10px 8px 0; color: var(--silver); font-size: 14px; line-height: 1.55; }
.lab-meta { padding: 14px 8px 0; color: var(--muted); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }

/* lab cards: one clean, branded screen each */
.lab-screen { isolation: isolate; }
.lab-logo { display: none; }
.lab-screen--hubpro { background: radial-gradient(ellipse at 70% 30%, #f6b21a33, transparent 55%), linear-gradient(160deg, #2a0f24, #120710); }
.lab-screen--ck { background: linear-gradient(180deg, #1f2420 0 78%, #f2b705 78%); }
.lab-screen--shield { background: radial-gradient(ellipse at 50% 35%, #e2674a26, transparent 60%), #0f1424; }
.lab-device {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 34%;
  transform: translateX(-50%);
  border: 4px solid #1a1a1a;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.55);
  transition: transform 700ms var(--ease-plate);
}
.lab-device img, .lab-window img { display: block; width: 100%; }
.lab-window {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 16%;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.55);
  transition: transform 700ms var(--ease-plate);
}
.lab-window-bar { display: flex; gap: 5px; padding: 6px 8px; background: #e9e6df; }
.lab-window-bar i { width: 7px; height: 7px; border-radius: 50%; background: #c9c4ba; }
.lab-card:hover .lab-device { transform: translate(-50%, -5%); }
.lab-card:hover .lab-window { transform: translateY(-5%); }
/* Cyber Shield: the app's entry screen, drawn here */
.shield-login {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.shield-login img { width: clamp(54px, 6vw, 84px); margin-bottom: 8px; filter: drop-shadow(0 8px 24px rgb(226 103 74 / 0.35)); transition: transform 700ms var(--ease-plate); }
.lab-card:hover .shield-login img { transform: scale(1.06); }
.shield-name { font-family: var(--sans); font-weight: 700; font-size: clamp(20px, 1.8vw, 28px); color: #fff1d6; letter-spacing: -0.01em; }
.shield-sub { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: #e8a33d; }
.shield-btn { margin-top: 12px; padding: 7px 26px; border-radius: 999px; background: #e2674a; color: #fff; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.lab-status.is-ok { color: #2fd36b; }
.lab-facts { padding: 12px 8px 0; color: var(--fg); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ─── 05 services ─────────────────────────────────── */
.sv {
  padding: clamp(80px, 12vw, 180px) var(--gutter);
  border-top: 1px solid var(--hairline);
}
.sv-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(48px, 7.6vw, 136px);
  line-height: 0.9;
  text-transform: uppercase;
  margin-bottom: clamp(40px, 6vw, 96px);
}
.sv-title em { font-style: normal; color: var(--tally); }
.sv-list { list-style: none; border-top: 1px solid var(--hairline-strong); }
.sv-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
  padding: clamp(22px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--hairline-strong);
  transition: background 300ms;
}
.sv-row:hover { background: linear-gradient(90deg, rgb(255 42 31 / 0.08), transparent 60%); }
.sv-n { color: var(--tally); font-size: 11px; }
.sv-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 64px);
  line-height: 0.95;
  text-transform: uppercase;
}
.sv-line { color: var(--silver); font-size: 15px; line-height: 1.6; }

/* ─── 04 selected work: the rundown ──────────────── */
.wk { position: relative; padding: clamp(80px, 12vw, 180px) var(--gutter); border-top: 1px solid var(--hairline); }
.wk-list { list-style: none; border-top: 1px solid var(--hairline-strong); }
.wk-row { border-bottom: 1px solid var(--hairline-strong); }
.wk-hit {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 6fr) minmax(0, 3fr) 5rem 6rem;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  padding: clamp(18px, 2.4vw, 30px) 0;
  transition: background 300ms, padding 300ms;
}
.wk-hit:hover, .wk-hit:focus-visible { background: linear-gradient(90deg, rgb(255 42 31 / 0.1), transparent 70%); padding-left: 12px; }
.wk-n { color: var(--tally); font-size: 11px; }
.wk-thumb { display: none; }
.wk-main { display: grid; gap: 6px; }
.wk-name { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.4vw, 60px); line-height: 0.95; text-transform: uppercase; }
.wk-sub { color: var(--silver); font-size: 14px; }
.wk-role { color: var(--fg); font-size: 10px; }
.wk-year { color: var(--muted); font-size: 10px; }
.wk-play { display: inline-flex; align-items: center; gap: 8px; justify-self: end; color: var(--fg); font-size: 10px; }
.wk-tri { width: 0; height: 0; border-left: 8px solid var(--tally); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
/* the preview monitor that follows the pointer over the list */
.wk-float {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: clamp(240px, 24vw, 380px);
  aspect-ratio: 16 / 9;
  border: 2px solid var(--tally);
  background: #000;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--fx, 0), var(--fy, 0), 0) scale(0.9);
  transition: opacity 200ms, transform 120ms ease-out;
  overflow: hidden;
}
.wk-float.is-on { opacity: 1; transform: translate3d(var(--fx, 0), var(--fy, 0), 0) scale(1); }
.wk-float img { width: 100%; height: 100%; object-fit: cover; }
.wk-float-tag { position: absolute; left: 8px; top: 8px; display: inline-flex; gap: 6px; align-items: center; padding: 3px 6px; background: rgb(0 0 0 / 0.7); font-size: 9px; }
.wk-float-tag .rec-dot { background: var(--tally); }
/* the player */
.wk-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--gutter); background: rgb(0 0 0 / 0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wk-modal[hidden] { display: none; }
.wk-modal-box { width: min(1100px, 100%); border: 1px solid var(--hairline-strong); background: #000; }
.wk-modal-bar { display: flex; align-items: center; gap: 16px; padding: 10px 12px; border-bottom: 1px solid var(--hairline-strong); font-size: 10px; }
.wk-modal-t { flex: 1; color: var(--fg); }
.wk-modal-yt { color: var(--tally); }
.wk-close { appearance: none; border: 0; background: none; color: var(--fg); font-size: 16px; cursor: pointer; padding: 4px 8px; }
.wk-frame { aspect-ratio: 16 / 9; }
.wk-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.end-links { display: inline-flex; flex-wrap: wrap; gap: 8px 18px; }
.end-links a { color: var(--fg); }
.end-links a:hover { color: var(--tally); }
@media (max-width: 1023px) {
  .wk-hit { grid-template-columns: 2.4rem minmax(0, 1fr) auto; row-gap: 10px; }
  .wk-role { grid-column: 2; }
  .wk-year { grid-column: 3; grid-row: 1; }
  .wk-play { grid-column: 3; grid-row: 2; }
}
@media (max-width: 639px) {
  /* phones: the still sits in the row — there is no pointer to follow */
  .wk-hit { grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 14px; }
  .wk-n { display: none; }
  .wk-thumb { display: block; grid-row: 1 / span 3; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--hairline-strong); align-self: start; }
  .wk-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .wk-main, .wk-role, .wk-year, .wk-play { grid-column: 2; grid-row: auto; justify-self: start; }
  .wk-name { font-size: 24px; }
  .wk-sub { font-size: 13px; }
  .wk-year { display: none; }
}

/* ─── 07 end credits: created to create ────────────── */
.end {
  position: relative;
  padding: clamp(80px, 12vw, 160px) var(--gutter) 28px;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}
/* static (no JS / reduced motion): the text, in order */
.end-stage { position: relative; }
.end-body {
  display: grid;
  justify-items: center;
  gap: clamp(28px, 4vw, 56px);
  max-width: 64rem;
  margin: clamp(48px, 8vw, 120px) auto;
  text-align: center;
}
.end-light, .end-tc, .end-count, .end-bar { display: none; }
.end-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(64px, 13vw, 240px);
  line-height: 0.86;
  text-transform: uppercase;
}
.end-title em, .end-sdg span:last-child { font-style: normal; }
/* solid gold with a soft glow — no clipped gradient: Safari paints clipped
   text twice under the scene's blur, and that read as a doubled word */
.end-title em, .end-sdg { color: #ecc987; text-shadow: 0 0 0 rgb(255 205 120 / 0); }
.end-line { max-width: 44rem; color: var(--silver); font-size: clamp(20px, 2.9vw, 46px); line-height: 1.3; text-wrap: balance; }
.end-line b { color: var(--fg); font-weight: 500; }
.end-final { display: grid; justify-items: center; gap: 22px; }
.end-sdg { font-family: var(--display); font-size: clamp(54px, 10vw, 190px); line-height: 0.9; text-transform: uppercase; }
.end-sign { display: inline-flex; align-items: center; gap: 14px; color: var(--fg); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; }
.end-rule { width: 36px; height: 1px; background: #e9c98a; }

/* the scene: a long track, a pinned stage, one beat at a time */
.end.is-scene .end-scene { height: 720lvh; }
.end.is-scene .end-stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; margin: 0 calc(var(--gutter) * -1); }
.end.is-scene .end-body { position: absolute; inset: 0; margin: 0; max-width: none; display: block; }
.end.is-scene .end-beat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(64rem, calc(100% - 2 * var(--gutter)));
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: opacity, transform, filter;
}
.end.is-scene .end-title { width: max-content; max-width: 96vw; }
.end.is-scene .end-w { display: inline-block; }
.end.is-scene .end-light, .end.is-scene .end-tc, .end.is-scene .end-count, .end.is-scene .end-bar { display: block; }
.end-light {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160vmax;
  height: 160vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 214 140 / 0.42) 0, rgb(255 190 110 / 0.14) 22%, rgb(255 170 90 / 0.04) 45%, transparent 62%);
  opacity: var(--glow, 0);
  transform: translate(-50%, -50%) scale(calc(0.25 + var(--glow, 0) * 0.85));
  pointer-events: none;
}
.end-tc, .end-count { position: absolute; top: 24px; color: var(--muted); font-size: 10px; letter-spacing: 0.16em; }
.end-tc { left: var(--gutter); }
.end-tc b, .end-count b { color: var(--fg); font-weight: 400; }
.end-count { right: var(--gutter); }
.end-bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; height: 1px; background: var(--hairline); }
.end-bar i { display: block; height: 100%; background: #e9c98a; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
/* the last word catches the light, once, as it lands */
.end.is-lit .end-title em, .end-final.is-lit .end-sdg { animation: end-glow 2.4s cubic-bezier(0.3, 0.1, 0.2, 1) 1 both; }
@keyframes end-glow {
  0% { color: #ecc987; text-shadow: 0 0 0 rgb(255 205 120 / 0); }
  40% { color: #fff3d6; text-shadow: 0 0 28px rgb(255 205 120 / 0.75), 0 0 2px rgb(255 240 210 / 0.9); }
  100% { color: #f1d297; text-shadow: 0 0 18px rgb(255 205 120 / 0.3); }
}
.end-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.end-fade { color: var(--tally); }
@media (max-width: 639px) {
  .end.is-scene .end-scene { height: 640lvh; }
  .end-title { font-size: 19vw; }
  .end.is-scene .end-title { width: 92vw; white-space: normal; }
  .end-line { font-size: 22px; }
  .end-sdg { font-size: 17vw; }
  .end-tc, .end-count { top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .end-title em, .end-sdg { text-shadow: 0 0 18px rgb(255 205 120 / 0.3); }
}

/* ─── short screens (laptops, a browser with toolbars): the timeline is
   pinned to one screen, so its chapter has to fit what is left above the
   edit. Sizes follow the height here; a last fit-scale (timeline.js) covers
   whatever is still over. ─── */
.tl-panel > * { transform: scale(var(--fit, 1)); transform-origin: left bottom; }
.tl-panel > .tl-panel-b { transform-origin: right bottom; }
@media (min-width: 640px) and (max-height: 900px) {
  .tl-pin { gap: clamp(10px, 2vh, 24px); padding-top: clamp(16px, 3vh, 40px); padding-bottom: clamp(14px, 2.4vh, 32px); }
  .tl-title { font-size: clamp(44px, min(8.4vw, 12.5vh), 150px); }
  .tl-kicker { margin-bottom: 10px; }
  .tl-role { margin-top: 10px; }
  .tl-media { height: clamp(110px, 24vh, 260px); margin-bottom: 12px; }
  .tl-slate div { padding: 6px 0; }
  .tl-points { margin-top: 12px; gap: 6px; font-size: 14px; line-height: 1.45; }
  .tl-link { margin-top: 10px; }
  .tl-panel::before { font-size: clamp(90px, 22vh, 300px); }
}
@media (min-width: 640px) and (max-height: 760px) {
  .tl-points li:nth-child(n + 3) { display: none; }
  .tl-window { height: 116px; }
  .tl-clip { grid-template-rows: 14px 44px 24px; }
  .tl-labels { grid-template-rows: 14px 44px 24px; }
  .tl-clip-fill { height: 44px; top: 20px; }
}
@media (min-width: 640px) and (max-height: 620px) {
  .tl-points { display: none; }
  .tl-slate div:nth-child(3) { display: none; }
}

/* ─── narrow ──────────────────────────────────────── */
@media (max-width: 1023px) {
  .hero-row { grid-template-columns: 1fr; gap: 20px; }
  .hero-sub { max-width: 30rem; }
  .lab-intro { grid-template-columns: 1fr; }
  .tl-panel { grid-template-columns: 1fr; align-content: end; gap: 20px; }
  .tl-points { font-size: 14px; }
  .lab-grid { grid-template-columns: 1fr 1fr; }
  .sv-row { grid-template-columns: 3rem minmax(0, 1fr); }
  .sv-line { grid-column: 2; }
  .mf-grid { grid-template-columns: 1fr; }
  .mf-figure { max-width: 480px; position: relative; top: 0; }
}
@media (max-width: 639px) {
  /* the copy lands on the footage here, so the floor rises to carry it */
  .hero-vignette {
    background:
      radial-gradient(ellipse at center, transparent 30%, rgb(6 6 6 / 0.85) 100%),
      linear-gradient(to bottom, rgb(6 6 6 / 0) 30%, rgb(6 6 6 / 0.82) 52%, var(--bg) 100%);
  }
  .hero-foot { grid-template-columns: 1fr 1fr; }
  .hero-row { grid-template-columns: 1fr; gap: 18px; }
  /* phones: a calmer first screen — one quiet slate line, a two-line
     title, the name and the line of faith; the rest waits for the scroll */
  .hero-h { font-size: clamp(34px, 10.2vw, 52px); }
  .hero-line { white-space: nowrap; }
  .hero-meta { gap: 10px; font-size: 9px; letter-spacing: 0.14em; margin-bottom: 14px; }
  .hero-meta .onair { padding: 4px 8px 4px 7px; gap: 6px; }
  .hero-meta .roles { padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; white-space: normal; color: var(--silver); }
  .hero-meta .roles b { display: none; }
  .hero-sub-more { display: none; }
  .hero-sub { font-size: 13px; }
  .hero-faith { font-size: 15px; margin-top: 10px; padding-top: 10px; }
  .hf-r { display: none; }
  .hf-c { display: none; }
  .frame-meta.bl, .frame-meta.br { display: none; }
  .mf-credits { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .mf-head > span:last-child { display: none; }
  .lab-head > span:last-child { display: none; }
  .tl-head > span:last-child { display: none; }
  .tl-title { font-size: clamp(40px, 13vw, 64px); }
  .tl-points { display: none; }
  .tl-media { height: 24vh; margin-bottom: 12px; }
  .tl-panel::before { font-size: 110px; }
  .tl-slate div:nth-child(3) { display: none; }
  .tl-window { height: 116px; }
  .tl-clip { width: 72vw; grid-template-rows: 14px 44px 24px; }
  .tl-clip--long { width: calc(72vw * 2.6); }
  .tl-clip--mid { width: calc(72vw * 2); }
  .tl-reel-line { display: none; }
  .tl-reel-item { padding: 0 6%; }
  .tl-labels { grid-template-rows: 14px 44px 24px; }
  .tl-clip-fill { height: 44px; top: 20px; }
  .lab-grid { grid-template-columns: 1fr; }
}

/* photo framing (kept out of inline styles, for the content security policy) */
.tl-panel img.op-40 { object-position: 50% 40%; }
.tl-panel img.op-55 { object-position: 50% 55%; }
.tl-panel img.op-12 { object-position: 50% 12%; }