/* 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: calc(100svh - var(--navh, 76px));
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
  padding: clamp(var(--s12), 8vh, var(--s20)) clamp(var(--s5), 4vw, var(--s16));
  overflow: hidden;
  perspective: 1400px;
  background:
    radial-gradient(58% 46% at 50% 44%, rgba(255,212,0,0.10) 0%, transparent 70%),
    var(--base);
}
/* COMPOSITION FIX. The object, the ghost planes and the headline were three
   things stacked with gaps between them, which is why the hero read as
   disconnected. Layered Depth wants ONE composition: everything occupies the
   same grid cell and the type sits IN FRONT OF the object, overlapping its
   lower edge, exactly as the architecture's blueprint specifies. */
.depth__planes, .depth__obj, .depth__front { grid-area: stack; }

.depth__planes { position: relative; width: 100%; display: grid; place-items: center; 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(92px, 24vw, 340px);
  color: transparent; -webkit-text-stroke: 1px var(--ink-06);
  transform: translateY(-6%);
}
.depth__p--mid {
  font-size: clamp(56px, 13vw, 190px);
  color: var(--ink-06);
  transform: translateY(-6%);
}
/* the object sits high in the cell so the headline crosses its lower third */
.depth__obj {
  position: relative; z-index: 1;
  width: clamp(150px, 20vw, 260px);
  aspect-ratio: 1;
  background-image: url("../img/mark-turntable.webp");
  background-size: 600% 600%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 26px 54px rgba(0,0,0,0.72));
  margin: 0;
  transform: translateY(clamp(-190px, -22vh, -120px));
}
.depth__front {
  position: relative; z-index: 2; text-align: center;
  max-width: 880px;
  transform: translateY(clamp(40px, 7vh, 84px));
}
.depth__front h1 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 3.9vw + 8px, 74px);
  line-height: 0.98; letter-spacing: -0.012em;
  margin-top: var(--s4); text-wrap: balance;
  text-shadow: 0 4px 40px rgba(10,10,10,0.9);
}
.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(--s5), 3vw, var(--s8));
  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));
}
@media (max-width: 820px) {
  .depth__obj { width: min(56vw, 220px); transform: translateY(-24vh); opacity: 0.65; }
  .depth__front { transform: translateY(6vh); }
  .depth__scrub { display: none; }
}
/* 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: CARD GALLERY ══════════════════════════
   Rebuilt. It was heading + lede + hairline rows, byte-for-byte the shape of the
   log beneath it: two adjacent sections carrying one component, which is
   R-UNIFORM. This is a picture-led gallery — a different information class, not
   the same rows at another size. */
.wgrid {
  padding: clamp(var(--s20), 8vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16));
  background: var(--surface);
}
.wgrid__head { max-width: 1360px; margin: 0 auto clamp(var(--s10), 5vw, var(--s16)); }
.wgrid .label { margin-bottom: var(--s5); }
.wgrid 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;
}
.wgrid__lede { margin-top: var(--s5); color: var(--ink-70); max-width: 48ch; font-size: var(--t-lg); }
.wgrid__grid {
  max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s5), 2.4vw, var(--s8));
}
.wgrid__c { display: flex; flex-direction: column; }
.wgrid__img {
  margin: 0 0 var(--s5); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--base);
}
.wgrid__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.45) contrast(1.04);
  transition: filter var(--d-smooth) var(--ease-snap), transform 1s var(--spring-smooth);
}
.wgrid__c:hover .wgrid__img img { filter: grayscale(0) contrast(1.06); transform: scale(1.05); }
.wgrid__c h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(19px, 1.9vw, 30px); line-height: 1;
  margin-bottom: var(--s3);
  transition: color var(--d-base) var(--ease-snap);
}
.wgrid__c:hover h3 { color: var(--signal); }
.wgrid__c p { color: var(--ink-70); font-size: var(--t-sm); }
/* the first card is the loudest so the row is not six identical things */
.wgrid__c:first-child .wgrid__img { aspect-ratio: 4 / 5; }
.wgrid__c:first-child h3 { font-size: clamp(23px, 2.5vw, 38px); }
@media (max-width: 900px) { .wgrid__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) {
  .wgrid__grid { grid-template-columns: 1fr; }
  .wgrid__c:first-child .wgrid__img { aspect-ratio: 4 / 3; }
}

/* ═══ N3 — THE LOG, made dense ════════════════════════════════════
   Small, tabular, tight. Deliberately the quietest information on the page so
   the gallery above it is unmistakably a different class of thing. */
.reg__row {
  grid-template-columns: 2.6rem minmax(0, 0.8fr) minmax(0, 1.5fr);
  padding: var(--s4) 0;
  gap: var(--s3) var(--s6);
}
.reg__row h3 { font-size: clamp(15px, 1.3vw, 20px); letter-spacing: 0.01em; }
.reg__row p { font-size: var(--t-label); letter-spacing: 0.01em; text-transform: none; }
.reg__row > b { font-size: 11px; }
.reg__head { grid-template-columns: 2.6rem minmax(0, 0.8fr) minmax(0, 1.5fr); gap: var(--s3) var(--s6); }
.reg h2 { font-size: clamp(24px, 2.4vw + 8px, 44px); }
@media (max-width: 800px) {
  .reg__row { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .reg__row p { grid-column: 2; }
}