/* ==========================================================================
   08 PROCESS — the page's only light band. Not five numbered circles on a
   line: a depth scale. The five steps sit on one graduated axis and only the
   two that move material carry a reading. Amber may fill a shape here but may
   never set text — on bone it measures 1.9:1. 0 images.
   ========================================================================== */

.process {
  position: relative;
  background: var(--surface-invert);
  color: var(--text-on-invert);
}
.process::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain-image);
  background-size: var(--grain-size) var(--grain-size);
  opacity: var(--grain-opacity-invert);
  pointer-events: none;
}

.process__inner { position: relative; z-index: var(--z-content); }

/* the light band flips every ink in the annotation layer */
.process .sec-title { color: var(--text-on-invert); }
.process .sec-lead { color: var(--text-on-invert-muted); }
.process .sec-spec { color: var(--text-on-invert-muted); }
.process .sec-spec b { color: var(--text-on-invert-accent); }
.process .eyebrow { color: var(--text-on-invert-muted); --bracket-color: var(--border-on-invert-strong); }
.process .eyebrow__idx { color: var(--text-on-invert); }
/* the light band recolours the tick language locally — the composed rules are
   now declared per-element, so the inks a section sets are the inks it gets */
.process {
  --tick-ink: var(--tick-ink-invert);
  --tick-ink-major: var(--tick-ink-invert-major);
}

/* --------------------------------------------------------------------------
   THE SCALE
   -------------------------------------------------------------------------- */
.process__steps {
  position: relative;
  display: grid;
  gap: var(--space-lg);
}

/* THE AXIS AT NARROW WIDTHS. Below 900 the scale used to disappear entirely —
   no axis, no graduations — which removed the clearest statement of the
   positioning on the width most visitors use. Same tick construction as the
   stat band and the desktop axis, stood on end and run through the marker
   gutter; the gap is bridged so the axis is continuous between steps.
   */
.process__steps::before {
  content: "";
  position: absolute;
  z-index: var(--z-below);
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--marker-dot-lg);
  background: var(--tick-rule-vertical);
  background-position-x: calc(var(--marker-dot-lg) / 2);
}

.process__step {
  display: grid;
  /* a fixed gutter, not auto: an auto column sizes to the marker in THAT step,
     so the small dots and the large ones would sit on different axes */
  grid-template-columns: var(--marker-dot-lg) minmax(0, 1fr);
  grid-template-areas:
    "marker depth"
    "marker title"
    "marker desc";
  column-gap: var(--space-md);
  align-items: center;
}


.process__depth {
  grid-area: depth;
  font-family: var(--font-mono);
  font-size: var(--text-spec);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-mono-tight);
  color: var(--text-on-invert-accent);
}
.process__depth:empty { display: none; }

.process__marker {
  grid-area: marker;
  width: var(--marker-dot);
  height: var(--marker-dot);
  border-radius: var(--radius-round);
  background: var(--surface-invert-ink);
  align-self: center;
  justify-self: center;
  transition: transform var(--dur-fast) var(--ease-lift);
}
.process__step--major .process__marker {
  width: var(--marker-dot-lg);
  height: var(--marker-dot-lg);
  background: var(--surface-accent);
}
.process__step:hover .process__marker { transform: scale3d(var(--scale-media-hover), var(--scale-media-hover), 1); }

.process__title {
  grid-area: title;
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-size: var(--text-h4);
  color: var(--text-on-invert);
  margin-block-end: var(--space-3xs);
}
.process__idx {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono-label);
  color: var(--text-on-invert-muted);
}

.process__desc {
  grid-area: desc;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-on-invert-muted);
}

.process__foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-stack);
  padding-block-start: var(--space-md);
}
.process__foot::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--tick-rule-h);
  background: var(--tick-rule);
}
.process__foot-note { font-size: var(--text-body-sm); color: var(--text-on-invert-muted); }

.process :focus-visible { outline-color: var(--focus-ring-color-invert); }

@media (min-width: 900px) {
  /* four rows: reading · marker on the axis · title · description.
     subgrid keeps all five titles and descriptions on one baseline; without
     it they auto-size per column and read as a mistake rather than a stagger. */
  /* the track count follows the step count. A five-track scale carrying four
     steps insets the first marker and leaves a quarter of the axis bare after
     the last, which reads as a missing step rather than as a scale. */
  .process__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto var(--marker-dot-lg) auto auto;
    column-gap: var(--grid-gap);
    row-gap: var(--space-2xs);
  }
  /* The track count follows the step count, and it is stated in the markup
     rather than counted with :has(). Firefox has no :has() before 121 and
     Firefox 115 ESR is still the managed-desktop build; there the selector is
     invalid, the whole rule is dropped, a five-step scale keeps four tracks
     and .process__step:nth-child(5) below asks for a fifth column that does
     not exist — an implicit track, the axis short by a fifth, and the last
     step off the end of it. A class cannot fail that way in any engine. */
  .process__steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .process__step {
    grid-row: 1 / span 4;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-template-areas: "depth" "marker" "title" "desc";
    text-align: center;
    justify-items: center;
  }
  .process__step:nth-child(1) { grid-column: 1; }
  .process__step:nth-child(2) { grid-column: 2; }
  .process__step:nth-child(3) { grid-column: 3; }
  .process__step:nth-child(4) { grid-column: 4; }
  .process__step:nth-child(5) { grid-column: 5; }

  /* the axis itself: same tick construction as the stat band, running the
     full width of the scale behind the markers */
  .process__steps::before {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: center;
    width: auto;
    height: var(--tick-rule-h);
    background: var(--tick-rule);
    background-position: 0 0;
  }

  .process__depth { align-self: end; padding-block-end: var(--space-2xs); }
  .process__depth:empty { display: block; }
  .process__title { justify-content: center; margin-block-end: 0; }
  .process__foot { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   NO ROW SUBGRID — Chrome before 117, Safari before 16. Firefox has had it
   since 71 and is not affected.
   Without it `grid-template-rows: subgrid` is dropped and the step becomes its
   own four-row grid inside a four-row span of the scale's. The scale's row 2
   still holds the continuous axis, but the step's marker row no longer lines
   up with it, so the rule crosses the titles and the markers sit off it — the
   one thing this section must not do, because the axis IS the argument.
   The fallback keeps the columns and the readings and drops the continuous
   rule: five markers, no line between them. The empty depth line is reserved
   rather than removed so the markers still land on one level across the row.
   -------------------------------------------------------------------------- */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .process__steps { grid-template-rows: auto; }
    .process__steps::before { content: none; }
    .process__step {
      grid-row: auto;
      grid-template-rows: auto var(--marker-dot-lg) auto auto;
      /* the step is stretched by the tallest step in the row, and a grid
         container distributes that free space across its auto tracks — which
         put every step's marker at a different height even after the reading
         line was reserved. Packed to the start, the tracks are content-sized
         and only the reading line varies. */
      align-content: start;
    }
    /* Measured out rather than calculated: a hidden non-breaking space gives
       the empty reading exactly one line box at this element's own font-size
       and line-height, so the reservation cannot drift from --text-spec. */
    .process__depth:empty { display: block; visibility: hidden; }
    .process__depth:empty::before { content: "\00a0"; }
  }
}