/* NEUCLIPS — CREATORS. Hero architecture B: Asymmetric Split.
   Seven sections, each its own container and grid. */

/* ══ C1 — HERO · Asymmetric Split ═══════════════════════════════
   The H1 and the support column deliberately do NOT share a baseline.
   That vertical tension is the feeling of being pulled between platforms. */
.chero {
  position: relative;
  min-height: 78svh;
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  align-items: center;
  gap: clamp(var(--s8), 4vw, var(--s20));
  max-width: 1440px; margin: 0 auto;
  padding: clamp(var(--s16), 9vh, var(--s24)) clamp(var(--s5), 4vw, var(--s16)) clamp(var(--s16), 7vw, var(--s24));
}
.chero__lead { align-self: center; }
.chero h1 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(44px, 6.6vw + 6px, 118px);
  line-height: 0.9; letter-spacing: -0.015em;
  margin-top: var(--s5);
}
.chero h1 em { font-style: normal; color: var(--signal); }
.chero__aside {
  align-self: end;               /* ← the offset. Not the same baseline. */
  padding-bottom: clamp(0px, 4vw, var(--s12));
  position: relative;
}
.chero__aside img {
  width: 100%; height: clamp(320px, 52svh, 620px); object-fit: cover; object-position: 50% 22%;
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}
.chero__aside p {
  margin-top: calc(-1 * clamp(var(--s10), 6vw, var(--s20)));
  position: relative;
  color: var(--ink-70); max-width: 34ch;
  font-size: var(--t-lg); line-height: 1.45;
}
.chero__act { margin-top: var(--s8); display: flex; flex-wrap: wrap; gap: var(--s4); }
@media (max-width: 900px) {
  .chero { grid-template-columns: 1fr; align-items: start; min-height: 0; }
  .chero__aside { align-self: start; padding-bottom: 0; }
  .chero__aside img { max-height: 44vh; object-fit: cover; }
}

/* ══ C2 — RELIEF · single spotlight, centred low ════════════════
   One sentence. Nothing else on the screen. */
.relief {
  min-height: 76svh;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 clamp(var(--s5), 4vw, var(--s16)) clamp(var(--s20), 12vh, var(--s40));
  border-top: 1px solid var(--ink-12);
  background:
    radial-gradient(80% 60% at 50% 118%, rgba(255,212,0,0.10) 0%, transparent 68%),
    var(--base);
}
.relief p {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(32px, 4.6vw + 8px, 82px);
  line-height: 0.98; letter-spacing: -0.01em;
  text-align: center; max-width: 20ch; text-wrap: balance;
}
.relief em { font-style: normal; color: var(--signal); }

/* ══ C3 — WHAT PLUGGING IN MEANS · stacked showcase ═════════════
   Three rows. Each row has a DIFFERENT internal structure — a shared
   component repeated three times would be the failure. */
.plug { padding: clamp(var(--s20), 8vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16)); background: var(--surface); }
.plug__inner { max-width: 1360px; margin: 0 auto; }
.plug > .plug__inner > h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-2xl); line-height: 0.96; margin-bottom: var(--s16); max-width: 20ch;
}
.plug__row { border-top: 1px solid var(--ink-12); padding: clamp(var(--s10), 4vw, var(--s16)) 0; }
.plug__row:last-child { border-bottom: 1px solid var(--ink-12); }

/* row 1 — the headline IS the row */
.plug__row--a h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 66px); line-height: 0.96; max-width: 18ch;
}
.plug__row--a p { margin-top: var(--s5); color: var(--ink-70); max-width: 52ch; }

/* row 2 — a two-column argument, label left, body right */
.plug__row--b { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: clamp(var(--s6), 4vw, var(--s16)); }
.plug__row--b h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 40px); line-height: 0.98; color: var(--signal);
}
.plug__row--b p { color: var(--ink-70); font-size: var(--t-lg); line-height: 1.5; }

/* row 3 — an indexed register, closer to a document than a card */
.plug__row--c h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 34px); margin-bottom: var(--s8);
}
.plug__reg li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: var(--s5); padding: var(--s4) 0;
  border-top: 1px solid var(--ink-06);
  color: var(--ink-70); font-size: var(--t-sm);
}
.plug__reg li b { color: var(--ink-30); font-weight: 600; font-family: var(--display); }
@media (max-width: 780px) { .plug__row--b { grid-template-columns: 1fr; } }

/* ══ C4 — SIMULTANEITY · full-bleed break ══════════════════════ */
.simul {
  position: relative; isolation: isolate;
  min-height: clamp(460px, 78vh, 820px);
  display: flex; align-items: center;
  padding: clamp(var(--s10), 6vw, var(--s24));
  overflow: hidden;
}
.simul img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.simul::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.72) 46%, rgba(10,10,10,0.45) 100%),
    linear-gradient(to bottom, var(--base) 0%, transparent 18%, transparent 82%, var(--base) 100%);
}
.simul__body { max-width: 1360px; margin: 0 auto; width: 100%; }
.simul h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(34px, 5.4vw, 96px); line-height: 0.92; max-width: 16ch;
}
.simul h2 em { font-style: normal; color: var(--signal); }
.simul p { margin-top: var(--s6); color: var(--ink-70); max-width: 42ch; font-size: var(--t-lg); }

/* ══ C5 — ALIGNMENT · pull-quote, offset bleed ═════════════════ */
.align {
  padding: clamp(var(--s20), 9vw, var(--s40)) 0;
  overflow: hidden;
}
.align__inner {
  max-width: 1360px; margin: 0 auto;
  padding: 0 clamp(var(--s5), 4vw, var(--s16));
}
.align blockquote {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 4.4vw + 4px, 84px);
  line-height: 0.98; letter-spacing: -0.01em;
  max-width: 24ch;
  margin-left: calc(-1 * clamp(0px, 2vw, 40px));   /* offset bleed */
}
.align blockquote em { font-style: normal; color: var(--signal); }
.align figcaption {
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid var(--ink-12);
  max-width: 46ch;
  color: var(--ink-52); font-size: var(--t-sm);
}

/* ══ C6 — HOW A PARTNERSHIP RUNS · time as typography ══════════ */
.years { background: var(--surface); padding: clamp(var(--s20), 8vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16)); }
.years__inner { max-width: 1360px; margin: 0 auto; }
.years h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-2xl); line-height: 0.96; margin-bottom: var(--s16);
}
.years__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink-12); border: 1px solid var(--ink-12); }
.years__y { background: var(--surface); padding: clamp(var(--s8), 3.4vw, var(--s16)); }
.years__y > b {
  display: block;
  font-family: var(--display); text-transform: uppercase;
  line-height: 0.86; letter-spacing: -0.02em;
  margin-bottom: var(--s6);
}
/* year one is loud; year two is quiet — the same face, two weights of attention */
.years__y--1 > b { font-size: clamp(46px, 7vw, 124px); color: var(--signal); }
.years__y--2 > b { font-size: clamp(30px, 4vw, 70px); color: var(--ink-30); }
.years__y h3 { font-family: var(--display); text-transform: uppercase; font-size: var(--t-lg); margin-bottom: var(--s4); }
.years__y p { color: var(--ink-70); font-size: var(--t-sm); max-width: 44ch; }
@media (max-width: 780px) { .years__pair { grid-template-columns: 1fr; } }

/* ══ C7 — CTA · split, image left, ask right ═══════════════════ */
.csplit { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: stretch; }
.csplit__img { position: relative; min-height: clamp(300px, 46vh, 560px); overflow: hidden; }
.csplit__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.62) contrast(1.06); }
.csplit__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 40%, var(--base) 100%);
}
.csplit__ask {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(var(--s12), 6vw, var(--s32)) clamp(var(--s6), 4vw, var(--s24));
}
.csplit__ask h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 3.8vw + 6px, 76px); line-height: 0.94; max-width: 16ch;
}
.csplit__ask p { margin-top: var(--s5); color: var(--ink-70); max-width: 40ch; }
.csplit__ask .btn { margin-top: var(--s8); align-self: flex-start; }
@media (max-width: 820px) { .csplit { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   PASS 2 — CREATORS
   The page opens in daylight. One NIGHT beat in the middle, for proof.
   ═══════════════════════════════════════════════════════════════════ */

/* C1 — the aside no longer fades into black; on paper it is a plate */
.chero__aside img {
  mask-image: none; -webkit-mask-image: none;
  height: clamp(360px, 58svh, 660px);
  object-position: 46% 30%;
}
.chero__aside p {
  margin-top: var(--s6);
  background: var(--day); padding-top: var(--s2);
}

/* C2 — RELIEF. No border, no rule, no edge. It is the only section on the
   site that touches nothing. That is its second-read moment. */
.relief {
  border-top: 0;
  min-height: 80svh;
  align-items: center;
  padding: clamp(var(--s20), 12vh, var(--s40)) clamp(var(--s5), 4vw, var(--s16));
  background:
    radial-gradient(70% 52% at 50% 50%, rgba(255,212,0,0.13) 0%, transparent 70%),
    var(--day);
}
.relief p { max-width: 22ch; }
/* Pass-2's highlighter block is REMOVED — the section is no longer on paper,
   and the strike/underline now carry the emphasis. */

/* C3 — every row gets a plate, and no two plates share a crop ratio */
.plug__row { display: grid; gap: clamp(var(--s6), 3.4vw, var(--s12)); align-items: center; }
.plug__row--a { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
.plug__row--b { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); }
.plug__row--c { grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); }
.plug__plate { overflow: hidden; background: var(--day-2); }
.plug__plate img { width: 100%; height: 100%; object-fit: cover; }
.plug__plate--wide { aspect-ratio: 21 / 9; }
.plug__plate--sq   { aspect-ratio: 1 / 1; }
.plug__plate--land { aspect-ratio: 16 / 10; }
.plug__row--a h3 { max-width: 14ch; }
.plug__row--b h3 {
  color: var(--day-ink); font-size: clamp(26px, 3.4vw, 52px);
  line-height: 0.98; margin-bottom: var(--s4);
}
.plug__row--b h3::after {
  content: ""; display: block; height: 6px; width: 64px;
  background: var(--signal); margin-top: var(--s4);
}
.plug__row--c h3 { margin-bottom: var(--s6); }
.plug__reg li b { color: var(--day-30); }
@media (max-width: 820px) {
  .plug__row--a, .plug__row--b, .plug__row--c { grid-template-columns: 1fr; }
  .plug__row--b .plug__plate { order: 2; }
}

/* C4 — the image now travels, so it must over-scan */
.simul img { height: calc(100% + 130px); top: -65px; }

/* C5 — the pull-quote is ours, and it gets a rule that draws in */
.align blockquote { max-width: 20ch; }
.align figcaption { max-width: 52ch; display: grid; gap: var(--s4); }
.align figcaption p { color: var(--ink-52); font-size: var(--t-sm); }

/* C6 — CTA on paper */
.csplit__img img { filter: none; }
.csplit__img::after {
  background: linear-gradient(90deg, transparent 40%, var(--day) 100%);
}

/* ═══ PASS 4 — C2 RELIEF, rebuilt ═════════════════════════════════
   The wall plays behind the sentence, and the two marks carry the meaning:
   a STRIKE through what you are leaving, an UNDERLINE under what you move to.
   Both are native text decorations, so they are positioned by the font's own
   metrics — not by hand-guessed offsets, which is what made the earlier
   highlight blocks sit wrong. They are also multi-line safe. */
.relief {
  position: relative; isolation: isolate;
  overflow: hidden;
  min-height: 86svh;
  align-items: center; justify-content: center;
  padding: clamp(var(--s16), 10vh, var(--s32)) clamp(var(--s5), 4vw, var(--s16));
  background: var(--base);
  border-top: 0;
}
.relief__wall {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: calc(100% + 120px); top: -60px;
  object-fit: cover;
  filter: brightness(0.72) contrast(1.05);
}
/* the screens keep changing: two drifting light fields plus a slow scan */
.relief__play {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(28% 34% at 18% 30%, rgba(255,255,255,0.16), transparent 70%),
    radial-gradient(24% 30% at 78% 66%, rgba(255,212,0,0.14), transparent 72%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.22) 0 2px, transparent 2px 4px);
  animation: play-drift 9s var(--spring-smooth) infinite alternate;
  mix-blend-mode: screen;
}
@keyframes play-drift {
  0%   { background-position: 0 0, 0 0, 0 0; opacity: 0.75; }
  50%  { opacity: 1; }
  100% { background-position: 14% -8%, -12% 10%, 0 3px; opacity: 0.8; }
}
/* the centre is scrimmed so the sentence stays readable over live screens */
.relief::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(52% 46% at 50% 50%, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.55) 62%, rgba(10,10,10,0.3) 100%),
    linear-gradient(to bottom, var(--base) 0%, transparent 16%, transparent 84%, var(--base) 100%);
}
.relief p {
  position: relative;
  color: var(--ink);
  max-width: 22ch;
  text-shadow: 0 2px 26px rgba(10,10,10,0.75);
}
.relief em { font-style: normal; color: var(--ink); }

/* the two marks.
   The UNDERLINE uses the native decoration — the font's own metric puts it in
   the right place. The STRIKE cannot: Anton's strikeout metric sits almost on
   the baseline, so `line-through` renders as a second underline. It is drawn
   explicitly instead, as a background rule at mid cap-height, with
   box-decoration-break so it survives the line break inside "one algorithm". */
.relief .strike {
  background-image: linear-gradient(var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-size: 100% 0.085em;
  background-position: 0 52%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.relief .under {
  /* also a background rule, for the same reason the strike is: the masked-word
     spans are `overflow: hidden`, so a native underline sitting below the
     baseline is clipped by the word box. A background on the em is painted
     behind those boxes and survives. */
  background-image: linear-gradient(var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-size: 100% 0.085em;
  background-position: 0 90%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* they draw in after the words have risen */
.js .relief .under { background-size: 0% 0.085em; }
.js .relief .strike { background-size: 0% 0.085em; }
.js .relief .wr.is-in .under {
  background-size: 100% 0.085em;
  transition: background-size 0.55s var(--spring-smooth) 0.95s;
}
.js .relief .wr.is-in .strike {
  background-size: 100% 0.085em;
  transition: background-size 0.55s var(--spring-smooth) 0.72s;
}
@media (prefers-reduced-motion: reduce) {
  .relief__play { animation: none; }
  .js .relief .under { background-size: 100% 0.085em; }
  .js .relief .strike { background-size: 100% 0.085em; }
}

/* ═══ C3b — THE PIPELINE ══════════════════════════════════════════
   A vertical spine with staged nodes. Not the numbered steps (horizontal,
   Home), not the transmission log (indexed rows, Network), not the plate rows
   above it. The spine draws down as you scroll and closes with a loop-back,
   because the returning arc is the argument. */
.rig {
  background: var(--base);
  padding: clamp(var(--s20), 8vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16));
}
.rig__inner { max-width: 1000px; margin: 0 auto; }
.rig .label { margin-bottom: var(--s5); }
.rig h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(28px, 3.4vw + 8px, 62px);
  line-height: 0.98; letter-spacing: -0.01em; max-width: 20ch;
}
.rig__lede { margin-top: var(--s5); color: var(--ink-70); max-width: 46ch; font-size: var(--t-lg); }

.rig__spine {
  margin-top: clamp(var(--s12), 5vw, var(--s20));
  position: relative;
  padding-left: clamp(46px, 7vw, 88px);
}
/* the spine itself */
.rig__spine::before {
  content: ""; position: absolute;
  left: clamp(15px, 2.4vw, 30px); top: 6px; bottom: 34px;
  width: 2px; background: var(--ink-12);
}
.rig__st { position: relative; padding-bottom: clamp(var(--s8), 3.4vw, var(--s16)); }
.rig__st:last-child { padding-bottom: 0; }
/* the node */
.rig__n {
  position: absolute;
  left: calc(-1 * clamp(46px, 7vw, 88px) + clamp(15px, 2.4vw, 30px) - 17px + 1px);
  top: -4px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--base);
  box-shadow: inset 0 0 0 2px var(--ink-12);
  font-family: var(--body); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--ink-30);
  transition: box-shadow var(--d-base) var(--ease-snap),
              color var(--d-base) var(--ease-snap),
              background var(--d-base) var(--ease-snap);
}
.rig__st.is-in .rig__n { color: var(--signal); box-shadow: inset 0 0 0 2px var(--signal); }
.rig__st h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(20px, 2.1vw, 32px); line-height: 1;
  margin-bottom: var(--s3);
}
.rig__st p { color: var(--ink-70); font-size: var(--t-sm); max-width: 56ch; }
/* the closing stage is the one that matters */
.rig__st--loop h3 { color: var(--signal); }
.rig__st--loop .rig__n,
.rig__st--loop.is-in .rig__n { background: var(--signal); color: var(--base); box-shadow: none; }

/* the loop-back: an arc returning to the top of the spine */
.rig__loop {
  position: relative;
  margin-top: clamp(var(--s8), 3vw, var(--s12));
  padding-left: clamp(46px, 7vw, 88px);
  color: var(--ink); font-size: var(--t-sm); max-width: 52ch;
}
.rig__loop span {
  position: absolute;
  left: clamp(15px, 2.4vw, 30px); top: -34px;
  display: block; width: clamp(26px, 4vw, 44px); height: 40px;
  border-left: 2px solid var(--signal);
  border-bottom: 2px solid var(--signal);
  border-bottom-left-radius: 22px;
  transform: translateX(-100%) scaleX(-1);
}
/* The node is 36px wide. On mobile it was offset -30px from a 44px indent, so it
   overlapped the first letters of every stage title. The indent now clears the
   node plus a real gap. */
@media (max-width: 620px) {
  .rig__spine { padding-left: 58px; }
  .rig__spine::before { left: 17px; }
  .rig__n { left: -58px; }
  .rig__loop { padding-left: 58px; }
  .rig__loop span { left: 17px; }
}