/* NEUCLIPS — NETWORK. Hero architecture D: Typographic Poster.
   No photograph at all in the hero. The type IS the visual. */

/* ══ N1 — HERO · Typographic Poster ════════════════════════════ */
.poster {
  min-height: 92svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(var(--s12), 7vh, var(--s20)) clamp(var(--s5), 4vw, var(--s16)) clamp(var(--s10), 5vw, var(--s16));
  overflow: hidden;
}
.poster__top { display: flex; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
.poster__type { padding: clamp(var(--s6), 4vw, var(--s16)) 0; }
.poster__type span {
  display: block;
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-poster);
  line-height: 0.82; letter-spacing: -0.028em;
}
/* opposing alignment creates the diagonal read */
.poster__type span:nth-child(1) { text-align: left; }
.poster__type span:nth-child(2) { text-align: right; color: var(--signal); }
.poster__bottom {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s8);
  align-items: end;
  border-top: 1px solid var(--ink-12); padding-top: var(--s6);
}
.poster__bottom p { color: var(--ink-70); max-width: 46ch; font-size: var(--t-lg); }
@media (max-width: 700px) {
  .poster__bottom { grid-template-columns: 1fr; align-items: start; }
  .poster__type span:nth-child(2) { text-align: left; }
}

/* ══ N2 — OWN · giant statement, restraint after the poster ════ */
.own {
  background: var(--surface);
  padding: clamp(var(--s24), 12vw, var(--s56)) clamp(var(--s5), 4vw, var(--s16));
}
.own__inner { max-width: 1100px; margin: 0 auto; }
.own p {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 3.9vw + 6px, 76px);
  line-height: 1.0; letter-spacing: -0.008em;
}
.own em { font-style: normal; color: var(--signal); }

/* ══ N3 — SURFACES · an indexed register of holdings ═══════════ */
.reg { padding: clamp(var(--s20), 8vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16)); }
.reg__inner { max-width: 1360px; margin: 0 auto; }
.reg h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-2xl); line-height: 0.96; margin-bottom: var(--s12);
}
.reg__row {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: var(--s5) var(--s8);
  align-items: baseline;
  padding: var(--s6) 0;
  border-top: 1px solid var(--ink-12);
  transition: padding-left var(--d-base) var(--ease-snap);
}
.reg__row:last-child { border-bottom: 1px solid var(--ink-12); }
.reg__row:hover { padding-left: var(--s4); }
.reg__row > b { font-family: var(--display); color: var(--ink-30); font-weight: 400; font-size: var(--t-sm); letter-spacing: 0.06em; }
.reg__row h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 34px); line-height: 1;
  transition: color var(--d-base) var(--ease-snap);
}
.reg__row:hover h3 { color: var(--signal); }
.reg__row p { color: var(--ink-52); font-size: var(--t-sm); }
@media (max-width: 800px) {
  .reg__row { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .reg__row p { grid-column: 2; }
}

/* ══ N4 — LIFECYCLE · three streams converging ═════════════════
   The only diagram on the site. */
.flow {
  background: var(--surface);
  padding: clamp(var(--s20), 8vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16));
  border-top: 1px solid var(--ink-12); border-bottom: 1px solid var(--ink-12);
}
.flow__inner { max-width: 1200px; margin: 0 auto; }
.flow h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-2xl); line-height: 0.96; margin-bottom: var(--s5); max-width: 20ch;
}
.flow__lede { color: var(--ink-70); max-width: 50ch; margin-bottom: var(--s16); }
.flow__d { display: grid; grid-template-columns: minmax(0, 1fr) clamp(90px, 16vw, 220px) minmax(0, 0.9fr); gap: var(--s6); align-items: center; }
.flow__streams { display: flex; flex-direction: column; gap: var(--s6); }
.flow__s {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s6);
  border: 1px solid var(--ink-12);
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(16px, 1.5vw, 24px); line-height: 1;
}
.flow__s b { display: block; height: 2px; width: 26px; background: var(--signal); }
.flow__join { position: relative; height: 100%; min-height: 160px; }
.flow__join svg { width: 100%; height: 100%; display: block; overflow: visible; }
.flow__join path {
  fill: none; stroke: var(--signal); stroke-width: 2; opacity: 0.62;
  stroke-dasharray: 400; stroke-dashoffset: 400;
}
.flow__d.is-in .flow__join path { animation: join 1.6s var(--spring-smooth) forwards; }
.flow__d.is-in .flow__join path:nth-child(2) { animation-delay: 0.12s; }
.flow__d.is-in .flow__join path:nth-child(3) { animation-delay: 0.24s; }
@keyframes join { to { stroke-dashoffset: 0; } }
.flow__out {
  background: var(--signal); color: var(--base);
  padding: clamp(var(--s6), 2.4vw, var(--s10));
}
.flow__out h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(20px, 2.2vw, 34px); line-height: 1; }
.flow__out p { margin-top: var(--s3); font-size: var(--t-sm); opacity: 0.8; }
@media (max-width: 860px) {
  .flow__d { grid-template-columns: 1fr; }
  .flow__join { display: none; }
}

/* ══ N5 — MEASURED · metric bar, a different register from Home ═ */
.meas {
  padding: clamp(var(--s16), 6vw, var(--s24)) clamp(var(--s5), 4vw, var(--s16));
}
.meas__inner {
  max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink-12);
}
.meas__c { padding: clamp(var(--s6), 2.6vw, var(--s10)); }
.meas__c + .meas__c { border-left: 1px solid var(--ink-12); }
.meas__c b {
  display: block;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(28px, 3.6vw, 60px); line-height: 1;
  color: var(--signal); font-variant-numeric: tabular-nums;
  margin-bottom: var(--s3);
}
.meas__c span { display: block; font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-30); }
.meas[data-state="unavailable"] .meas__c--views b { display: none; }
.meas__c--views i { display: none; font-style: normal; }
.meas[data-state="unavailable"] .meas__c--views i {
  display: block; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 34px); color: var(--signal); margin-bottom: var(--s3);
}
@media (max-width: 760px) {
  .meas__inner { grid-template-columns: 1fr; }
  .meas__c + .meas__c { border-left: 0; border-top: 1px solid var(--ink-12); }
}

/* ══ N6 — AUTONOMY · the empty room ════════════════════════════ */
.auto {
  position: relative; isolation: isolate;
  min-height: clamp(460px, 80vh, 840px);
  display: flex; align-items: flex-end;
  padding: clamp(var(--s10), 5vw, var(--s24));
  overflow: hidden;
}
.auto img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.auto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--base) 5%, rgba(10,10,10,0.72) 42%, rgba(10,10,10,0.3) 100%);
}
.auto__body { max-width: 1360px; margin: 0 auto; width: 100%; }
.auto h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 82px); line-height: 0.94; max-width: 18ch;
}
.auto h2 em { font-style: normal; color: var(--signal); }
.auto p { margin-top: var(--s5); color: var(--ink-70); max-width: 44ch; font-size: var(--t-lg); }

/* ══ N7 — CTA · split ══════════════════════════════════════════ */
.nsplit {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s10);
  align-items: end;
  max-width: 1360px; margin: 0 auto;
  padding: clamp(var(--s20), 8vw, var(--s32)) clamp(var(--s5), 4vw, var(--s16));
}
.nsplit h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 4vw + 6px, 82px); line-height: 0.94; max-width: 16ch;
}
.nsplit p { margin-top: var(--s5); color: var(--ink-70); max-width: 42ch; }
@media (max-width: 780px) { .nsplit { grid-template-columns: 1fr; align-items: start; } }

/* ═══ PASS 2 — NETWORK. Stays pure NIGHT. ═══════════════════════ */

/* N1 — the two words drift apart on scroll, so THE NETWORK is never
   twice in the same place. This page's second-read moment. */
.poster__type span { will-change: transform; }
.js .poster__type span[data-r="wipe"] { clip-path: inset(0 100% 0 0); }
.js .poster__type span[data-r="wipe"].is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s var(--spring-smooth);
}
.js .poster__type span:nth-child(2)[data-r="wipe"] { clip-path: inset(0 0 0 100%); }

/* N3 — the register behaves like accordion slices */
.reg__row {
  transition: padding var(--d-smooth) var(--spring-smooth),
              background var(--d-base) var(--ease-snap);
}
.reg__row:hover { padding-left: var(--s6); padding-top: var(--s10); padding-bottom: var(--s10); background: var(--ink-06); }
.reg__row p { transition: color var(--d-base) var(--ease-snap); }
.reg__row:hover p { color: var(--ink-70); }
/* vertical rhythm lines behind the register */
.reg__inner { position: relative; }
.reg__inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, var(--ink-06) 1px, transparent 1px);
  background-size: 25% 100%;
}

/* N4 — pulses travel the join paths */
.flow__join path { stroke-linecap: round; }
.flow__d.is-in .flow__join path {
  animation: join 1.6s var(--spring-smooth) forwards, pulse-flow 3.4s linear 1.8s infinite;
}
@keyframes pulse-flow {
  0%   { stroke-dasharray: 6 300; stroke-dashoffset: 300; opacity: 0.62; }
  100% { stroke-dasharray: 6 300; stroke-dashoffset: 0;   opacity: 0.62; }
}

/* N5 — the figure and the fact that it is climbing. Nothing else: the provenance
   detail belongs on the home page, and repeating it here was noise. */
.meas { padding: clamp(var(--s16), 7vw, var(--s32)) clamp(var(--s5), 4vw, var(--s16)); text-align: center; }
.meas__inner { max-width: 1100px; margin: 0 auto; border: 0; display: block; }
.meas__n {
  display: inline-flex; align-items: flex-start; gap: 0.3em;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(52px, 11vw, 170px); line-height: 0.84;
  letter-spacing: -0.026em; color: var(--signal);
  font-variant-numeric: tabular-nums;
  margin-top: var(--s5);
}
.meas__pulse {
  display: block; width: clamp(7px, 0.8vw, 12px); aspect-ratio: 1; flex: none;
  border-radius: 50%; background: var(--signal); margin-top: 0.44em;
  animation: live-pulse 2.4s var(--spring-smooth) infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 0.28; transform: scale(0.8); }
  40%      { opacity: 1;    transform: scale(1); }
}
.meas__fallback { display: none; }
.meas[data-state="unavailable"] .meas__n { display: none; }
.meas[data-state="unavailable"] .meas__fallback {
  display: block; font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-2xl); color: var(--signal); margin-top: var(--s5);
}

/* N6 — over-scan for the parallax */
.auto img { height: calc(100% + 145px); top: -72px; }

/* ═══════════════════════════════════════════════════════════════════
   PASS 3 — N1: Architecture F, LAYERED DEPTH
   Real geometry (Blender/Cycles), not a CSS approximation. The mark is a
   36-frame turntable composited to one sprite sheet and scrubbed by scroll —
   the render quality of WebGL at the weight of a single image.
   ═══════════════════════════════════════════════════════════════════ */
.depth {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(var(--s4), 2vh, var(--s8));
  padding: clamp(var(--s16), 11vh, var(--s20)) clamp(var(--s5), 4vw, var(--s16)) clamp(var(--s12), 7vh, var(--s16));
  overflow: hidden;
  perspective: 1400px;
  background:
    radial-gradient(58% 46% at 50% 46%, rgba(255,212,0,0.09) 0%, transparent 70%),
    var(--base);
}
/* the receding z-planes — the word at three depths, never the same size twice */
.depth__planes { position: absolute; inset: 0; display: grid; place-items: center; z-index: -2; pointer-events: none; }
.depth__p {
  position: absolute; pointer-events: none; user-select: none;
  font-family: var(--display); text-transform: uppercase;
  line-height: 0.8; letter-spacing: -0.03em;
  white-space: nowrap;
}
.depth__p--far {
  font-size: clamp(100px, 26vw, 380px);
  color: transparent; -webkit-text-stroke: 1px var(--ink-06);
}
.depth__p--mid {
  font-size: clamp(60px, 14vw, 210px);
  color: var(--ink-06);
}
/* the focal object, front and centre */
.depth__obj {
  position: relative; z-index: -1;
  width: clamp(150px, 22vw, 300px);
  aspect-ratio: 1;
  background-image: url("../img/mark-turntable.webp");
  background-size: 600% 600%;            /* 6 x 6 sheet */
  background-position: 0% 0%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
  margin: 0;
}
.depth__front { position: relative; z-index: 2; text-align: center; max-width: 820px; }
.depth__front h1 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 3.6vw + 8px, 68px);
  line-height: 1.0; letter-spacing: -0.012em;
  margin-top: var(--s4); text-wrap: balance;
}
.depth__front p {
  margin: var(--s5) auto 0; max-width: 44ch;
  color: var(--ink-70); font-size: var(--t-lg);
}
.depth__front .btn { margin-top: var(--s6); }
.depth__scrub {
  position: absolute; left: 50%; bottom: clamp(var(--s6), 3vw, var(--s10));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-30);
}
.depth__scrub b {
  display: block; width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal));
}
/* the object sits behind the type on narrow screens, where there is no room beside it */
@media (max-width: 820px) {
  .depth__obj {
    position: absolute; top: 16%; left: 50%; transform: translateX(-50%);
    width: min(78vw, 380px); opacity: 0.4;
  }
}
/* a rendered sprite sheet is 1.6 MB — do not ship it to a metered connection */
@media (prefers-reduced-data: reduce) {
  .depth__obj { background-image: none; background: radial-gradient(circle, rgba(255,212,0,0.18), transparent 62%); }
}

/* N3 — the transmission log */
.reg__lede { color: var(--ink-70); max-width: 52ch; margin: calc(-1 * var(--s6)) 0 var(--s10); }
.reg__head {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: var(--s5) var(--s8);
  padding-bottom: var(--s3);
  font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-30);
}
.reg__head b { font-weight: 600; }
.reg__row > b {
  font-variant-numeric: tabular-nums;
  font-family: var(--body); font-size: var(--t-label);
  letter-spacing: 0.14em;
}


/* ═══ N2b — THE AUDIENCES ═════════════════════════════════════════
   Full-width bands, name at display scale with the behaviour note beside it.
   Deliberately not the transmission log below it, which is small indexed rows;
   this is the same information class at a completely different scale. */
.aud {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(var(--s20), 8vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16));
}
.aud__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; opacity: 0.16;
}
.aud::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, var(--base) 0%, rgba(10,10,10,0.82) 30%, rgba(10,10,10,0.82) 70%, var(--base) 100%);
}
.aud__inner { max-width: 1240px; margin: 0 auto; }
.aud .label { margin-bottom: var(--s5); }
.aud h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(28px, 3.6vw + 8px, 64px);
  line-height: 0.98; letter-spacing: -0.01em; max-width: 20ch;
}
.aud__lede { margin-top: var(--s5); color: var(--ink-70); max-width: 48ch; font-size: var(--t-lg); }
.aud__rows { margin-top: clamp(var(--s10), 5vw, var(--s16)); }
.aud__r {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s4) clamp(var(--s6), 4vw, var(--s16));
  align-items: baseline;
  padding: clamp(var(--s6), 2.6vw, var(--s10)) 0;
  border-top: 1px solid var(--ink-12);
  transition: padding-left var(--d-base) var(--ease-snap);
}
.aud__r:last-child { border-bottom: 1px solid var(--ink-12); }
.aud__r:hover { padding-left: var(--s4); }
.aud__r h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(24px, 3.1vw, 50px); line-height: 0.94;
  transition: color var(--d-base) var(--ease-snap);
}
.aud__r:hover h3 { color: var(--signal); }
.aud__r p { color: var(--ink-70); font-size: var(--t-sm); max-width: 58ch; }
@media (max-width: 780px) {
  .aud__r { grid-template-columns: 1fr; }
}