/* ===========================================================================
   Rogcol. Page styling only. The mechanism lives in scrollcraft.css and is
   never restyled here: no rule below targets .sc-world, .sc-copy or any
   [data-sc-*] selector except to hand it a position it cannot infer.
   ======================================================================== */

:root {
  --sc-canvas:     #0a0a0c;
  --sc-surface:    #16161a;
  --sc-ink:        #f4f1ec;
  --sc-ink-soft:   #9a948c;
  --sc-accent:     #ff5a14;
  --sc-accent-ink: #0a0a0c;

  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Light type on a dark ground is set one notch heavier and one notch looser
     than the same type would be on paper. Archivo is variable, so the weight
     compensation is a real axis position rather than a jump to the next cut. */
  --ink-weight: 430;

  --rail-w: 9.5rem;
}

body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-weight: var(--ink-weight);
  overflow-x: hidden;
}

/* ------------------------------------------------------------- the world -- */

.conduit {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* Depth haze. The conduit fades into black at both ends of the frame so the
   world has no top edge and no bottom edge to read as a boundary. */
.vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      var(--sc-canvas) 0%,
      color-mix(in oklab, var(--sc-canvas) 55%, transparent) 13%,
      transparent 30%, transparent 70%,
      color-mix(in oklab, var(--sc-canvas) 55%, transparent) 87%,
      var(--sc-canvas) 100%),
    radial-gradient(120% 78% at 50% 50%,
      transparent 42%,
      color-mix(in oklab, var(--sc-canvas) 62%, transparent) 100%);
}

/* The flood. One layer, driven from world.js: scroll velocity warms it a
   little, the fission ruptures it. Never on by itself. */
.grade {
  position: fixed; inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--flood, 0);
  background: radial-gradient(70% 46% at var(--flood-x, 50%) 50%,
    color-mix(in oklab, var(--sc-accent) 42%, transparent) 0%,
    color-mix(in oklab, var(--sc-accent) 12%, transparent) 38%,
    transparent 72%);
  mix-blend-mode: screen;
}

/* The scrim sits under the copy layer and only where copy actually lands: a
   soft floor and two soft flanks, transparent through the middle where the
   conduit does its work. */
.sc-world__scrim {
  background:
    linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 86%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 52%, transparent) 20%,
      transparent 46%),
    linear-gradient(to right,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 0%,
      transparent 34%),
    linear-gradient(to left,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 0%,
      transparent 34%);
}

/* The conduit terminates in the socket the CTA sits on, so the wire and the
   closing copy necessarily share the frame. Density goes exactly where the
   copy is and nowhere else. */
.scrim-close {
  position: absolute;
  left: 50%; bottom: 0;
  width: min(46rem, 96vw); height: min(34rem, 62vh);
  translate: -50% 0;
  pointer-events: none;
  opacity: var(--close, 0);
  background: radial-gradient(76% 66% at 50% 74%,
    color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 82%, transparent) 44%,
    color-mix(in oklab, var(--sc-canvas) 34%, transparent) 66%,
    transparent 84%);
}

.scrim-col {
  position: absolute; top: 0; bottom: 0;
  width: 62%;
  pointer-events: none;
}
.scrim-col--l {
  left: 0;
  opacity: var(--colL, 0);
  background: linear-gradient(to right,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 48%,
    transparent 100%);
}
.scrim-col--r {
  right: 0;
  opacity: var(--colR, 0);
  background: linear-gradient(to left,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 48%,
    transparent 100%);
}

/* --------------------------------------------------------------- the map -- */

.map {
  position: fixed;
  z-index: var(--sc-z-chrome);
  right: clamp(1rem, 2.6vw, 2.4rem);
  top: 50%; translate: 0 -50%;
  width: var(--rail-w);
  font-family: var(--sc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-align: right;
}
.map__depth {
  margin: 0 0 var(--sc-4) 0;
  color: var(--sc-ink-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.map__d { opacity: 0.42; margin-right: 0.6em; letter-spacing: 0.14em; }
.map__val { color: var(--sc-accent); }

.map__legs { list-style: none; margin: 0; padding: 0; }
.map__leg { display: block; }
.map__btn {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0.7rem;
  width: 100%;
  min-height: var(--tick-h, 34px);
  padding: 0;
  background: none; border: 0;
  color: color-mix(in oklab, var(--sc-ink) 34%, transparent);
  font: inherit; letter-spacing: inherit;
  text-align: right;
  cursor: pointer;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.map__name {
  opacity: 0;
  transition: opacity var(--sc-d-fast) var(--sc-ease-out);
  white-space: nowrap;
}
.map__tick {
  display: block;
  width: 14px; height: 1px;
  background: currentColor;
  transition: width var(--sc-d-base) var(--sc-ease-out),
              background-color var(--sc-d-base) var(--sc-ease-out);
}
.map__leg[data-passed="true"] .map__btn { color: color-mix(in oklab, var(--sc-ink) 62%, transparent); }
.map__leg[data-passed="true"] .map__tick { width: 20px; }
.map__leg[aria-current="true"] .map__btn { color: var(--sc-accent); }
.map__leg[aria-current="true"] .map__name { opacity: 1; }
.map__leg[aria-current="true"] .map__tick { width: 34px; }

@media (hover: hover) and (pointer: fine) {
  .map__btn:hover { color: var(--sc-ink); }
  .map__btn:hover .map__name { opacity: 1; }
  .map__btn:hover .map__tick { width: 34px; }
}
.map__btn:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.map__btn:active .map__tick { translate: 1px 0; }

.here { display: none; }

/* --------------------------------------------------------------- copy ---- */

.blk {
  position: absolute;
  max-width: min(38rem, 42vw);
}
.blk > * + * { margin-top: var(--sc-4); }

.blk--lead   { left: var(--sc-gutter); bottom: clamp(3.5rem, 13vh, 9rem); }
/* Held clear of the map rail, which owns the right edge for the whole page. */
.blk--trail  { right: calc(var(--sc-gutter) + 10rem); top: clamp(4.5rem, 16vh, 11rem); }
.blk--centre {
  left: 50%; top: 50%; translate: -50% -50%;
  max-width: min(34rem, 62vw);
  text-align: center;
}
/* Anchored low, so the tear opens in clear air above the words and the
   strands rain down behind them instead of through them. */
.blk--rupture {
  left: var(--sc-gutter);
  bottom: clamp(3.5rem, 13vh, 8rem);
  max-width: min(62rem, 84vw);
}
.blk--close {
  left: 50%; bottom: clamp(3rem, 11vh, 7rem);
  translate: -50% 0;
  max-width: min(34rem, 82vw);
  text-align: center;
}

/* Each company block is anchored to the side the camera is NOT on, so the
   strand it belongs to runs down the empty half of the frame beside it. */
.unit.blk--lead  { top: 50%; bottom: auto; translate: 0 -50%; }
.unit.blk--trail { top: 50%; translate: 0 -50%; }

/* ---------------------------------------------------------------- type --- */

.mark {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: clamp(3.6rem, 11vw, 9.5rem);
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: lowercase;
}
.lede {
  margin: 0;
  max-width: 34ch;
  font-size: var(--sc-t-lg);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--sc-ink);
  text-wrap: balance;
}
.h-md, .h-lg {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.h-md { font-size: var(--sc-t-2xl); }
.h-lg { font-size: var(--sc-t-3xl); letter-spacing: -0.042em; }

/* The rupture. The one place on the page the type is allowed off the leash,
   and the tracking is pulled in hard to pay for the size. */
.rupture {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: clamp(3.4rem, 12.5vw, 11rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.blk--rupture .body { margin-top: var(--sc-6); }

.body {
  margin: 0;
  max-width: 46ch;
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: 0.004em;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.body--wide { max-width: 52ch; }
.blk--centre .body, .blk--close .body { margin-inline: auto; }

.tag {
  margin: 0;
  display: flex; align-items: baseline; gap: 0.9rem;
  font-family: var(--sc-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.tag__i { color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.tag__s {
  color: color-mix(in oklab, var(--sc-ink) 52%, transparent);
  padding-left: 0.9rem;
  border-left: 1px solid var(--sc-hairline);
  text-transform: none;
  letter-spacing: 0.04em;
}
.unit .h-lg { margin-top: var(--sc-3); }

/* -------------------------------------------------------------- actions -- */

.link {
  display: inline-block;
  margin-top: var(--sc-5);
  color: var(--sc-ink);
  font-size: var(--sc-t-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--sc-accent);
  transition: color var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out);
}
.link::after { content: " \2192"; color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--sc-accent); }
}
.link:active { translate: 0 1px; }

.cta {
  display: inline-block;
  margin-top: var(--sc-6);
  padding: 0.95rem 1.6rem;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font-size: var(--sc-t-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out),
              translate var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: color-mix(in oklab, var(--sc-accent) 88%, white); }
}
.cta:active { translate: 0 1px; }

.link:focus-visible, .cta:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.fine {
  margin-top: var(--sc-7);
  font-family: var(--sc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: color-mix(in oklab, var(--sc-ink) 62%, transparent);
}
.fine__mark { color: var(--sc-ink-soft); }

/* -------------------------------------------------------------- mobile --- */

@media (max-width: 860px) {
  .blk {
    left: var(--sc-gutter); right: var(--sc-gutter);
    max-width: none;
    top: auto; bottom: clamp(5.5rem, 17vh, 9rem);
    translate: none;
    text-align: left;
  }
  .blk--centre, .blk--close, .unit.blk--lead, .unit.blk--trail {
    left: var(--sc-gutter); right: var(--sc-gutter);
    top: auto; bottom: clamp(5.5rem, 17vh, 9rem);
    translate: none; text-align: left;
  }
  .blk--centre .body { margin-inline: 0; }
  /* The close stays centred at every width, because the CTA is the object the
     conduit terminates in and the socket is drawn around wherever it sits. */
  .blk--close { bottom: clamp(3rem, 9vh, 6rem); text-align: center; }
  .blk--close .body { margin-inline: auto; }
  .mark { font-size: clamp(3.4rem, 22vw, 6rem); }
  .h-lg { font-size: var(--sc-t-2xl); }
  .h-md { font-size: var(--sc-t-xl); }
  .rupture { font-size: clamp(2.9rem, 17vw, 5rem); line-height: 0.92; }
  .body { max-width: none; }
  .lede { max-width: none; }

  /* On a phone the copy is a full width band across the bottom and there is no
     empty half to protect, so the side columns come off and the floor does the
     whole job. */
  .scrim-col { display: none; }
  .sc-world__scrim {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 78%, transparent) 26%,
      color-mix(in oklab, var(--sc-canvas) 34%, transparent) 48%,
      transparent 66%);
  }

  /* The rail keeps the right edge, the copy gives it up. Overlapping them is
     what a full-width copy band and a full-height rail do by default. */
  .blk, .blk--centre, .blk--close, .unit.blk--lead, .unit.blk--trail {
    right: calc(var(--sc-gutter) + 2.4rem);
  }
  .map { --rail-w: auto; right: 0.55rem; font-size: 0.62rem; }
  .map__depth { margin-bottom: var(--sc-2); }
  .map__name { display: none; }
  .map__btn { min-height: var(--tick-h, 40px); }
  .here {
    display: block;
    position: fixed; left: var(--sc-gutter); bottom: 1.1rem;
    z-index: var(--sc-z-chrome);
    margin: 0;
    font-family: var(--sc-font-mono); font-size: 0.62rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--sc-accent);
  }
}

/* ----------------------------------------------------- reduced motion ---- */
/* Fewer and gentler, not zero. The descent is the reader's own hand and it
   stays. Everything the page does on its own stops: no current running in the
   filament, no pointer sway, no velocity bloom, no rupture flash. */
@media (prefers-reduced-motion: reduce) {
  .grade { display: none; }
  .map__tick, .map__btn, .map__name, .link, .cta { transition-duration: 1ms; }
}