/* ============================================================
   How I work — a scroll-driven process timeline.

   Left column holds the heading and stays put. Right column is the
   flow: a vertical hairline threaded through four markers, with the
   ink filling downward as the reader scrolls. The step the reader is
   on lifts onto a card; steps ahead of the fill sit flat.

   Geometry rule that matters: the marker owns its own grid column and
   the card owns the next one. Nothing ever overlaps the rail, so the
   line stays continuous behind the markers and in front of nothing.

   Nothing animates on a timer or a click. The fill is bound to scroll
   position, so it can only move as fast as the reader does.

   Behaviour lives in components/site.js (the `howIWork` IIFE).
   ============================================================ */

.hiw {
  --hiw-marker: 44px;
  --hiw-gutter: var(--space-lg);
  /* One curve for everything that changes as a step becomes current.
     Long and flat: this reacts to scrolling, and anything quick would
     flicker as the reader moves through it. */
  --hiw-ease: var(--dur-med) var(--ease-out-expo);

  display: grid;
  /* the copy column gets real weight; the earlier 0.85fr left the
     heading stranded in a narrow gutter */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-3xl);
  align-items: start;
}

/* ---- left column ---- */
/* Sticky, not fixed: it releases at the end of the flow instead of
   riding over the next section. The offset clears the 72px bar. */
.hiw__aside {
  position: sticky;
  top: calc(72px + var(--space-2xl));
  /* drop the heading to the first card's optical centre */
  padding-top: var(--space-xs);
}
.hiw__aside .section-title,
.hiw__aside .section-intro { margin-inline: 0; }
.hiw__aside .section-intro { max-width: 42ch; }

/* ---- the flow ---- */
.hiw__flow {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The rail runs down the centre of the marker column, so it is never
   underneath a card. Both layers share one geometry and one radius, so
   the fill cannot drift off the track. */
.hiw__rail {
  position: absolute;
  /* Aligned to the markers, which now live inside the cards: their centre is
     the card's --space-lg inset plus half a marker. Runs from the FIRST
     marker's centre; the last card is opaque and covers the tail, so the line
     stops at the last marker instead of running on past it. */
  left: calc(var(--space-lg) + var(--hiw-marker) / 2 - 1px);
  top: calc(var(--space-lg) + var(--hiw-marker) / 2);
  /* Measured, not inset. Relying on the last card to cover the tail only
     works while that card is opaque, which it is not until the reader
     reaches it, so the line ran on past the final disc. site.js writes the
     exact first-centre-to-last-centre distance here instead. */
  height: var(--hiw-height, 0);
  /* above the cards so it reaches each marker, below the markers themselves */
  z-index: 1;
  width: 2px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.hiw__rail::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  /* --hiw-fill is written by site.js, 0 to 1 */
  height: calc(var(--hiw-fill, 0) * 100%);
  /* Neither --ink nor --accent. Near-black reads as a scar down a pale
     tint, and the accent turns a piece of structure into a feature: the
     rail is the quietest thing here, it just marks position.
     --ink-3 is the system's large/decorative-only tier, which is exactly
     what this is: a 2px rule carrying no text. --ink-2 was still doing
     too much work at this weight. */
  background: var(--ink-3);
  border-radius: inherit;
}

/* ---- a step ---- */
/* The card spans the whole step and the marker sits INSIDE it, in its left
   inset. It used to own a separate grid column, which is what put the icon
   outside the component it belongs to. Two consequences worth stating:
   the card is opaque, so it hides the rail behind it and the line survives
   only in the gaps between steps — which is also what stops the rail running
   on past the last marker, since the last card covers its tail. */
.hiw-step { position: relative; }
/* The gap is what makes the pinned column worth pinning. At --space-md the
   whole flow fitted inside one viewport, so all four steps arrived at once,
   the rail filled in a flicker and the aside released almost as soon as it
   caught. The flow has to run about two screens for the fill to read as
   progress and for each step to land on its own. */
.hiw-step + .hiw-step { margin-top: var(--space-3xl); }

/* ---- marker ---- */
/* Always a filled disc. It has to be opaque to mask the rail behind it,
   and it has to stay visible once the reader has passed it, which the
   earlier --section-tint fill did not: it matched the band exactly and
   the discs simply vanished. */
.hiw-step__marker {
  position: absolute;
  z-index: 2;
  /* pinned to the card's own inset, so it reads as part of the card */
  left: var(--space-lg);
  top: var(--space-lg);
  width: var(--hiw-marker);
  height: var(--hiw-marker);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  /* Same object as .theme-toggle: a surface, a hairline and a small shadow,
     so the disc sits ON the section rather than being a ring drawn on it.
     Every icon-only circle on the site is the same thing. */
  background: var(--bg-raised);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: var(--shadow-chip);
  transition: border-color var(--hiw-ease), box-shadow var(--hiw-ease);
  /* Never fades. Fading the disc fades its background with it, and the
     rail then shows straight through the middle of the icon. The icon
     dims on its own below. */
  opacity: 1;
}
/* dim the glyph, never the disc it sits on */
.hiw-step__marker svg {
  display: block;
  opacity: 0.4;
  transition: opacity var(--hiw-ease);
}
.hiw-step[data-reached="true"] .hiw-step__marker svg { opacity: 1; }
/* the toggle's own dark-mode hairline */
[data-theme="dark"] .hiw-step__marker { border-color: rgba(255,255,255,0.10); }

/* Current is a firmer hairline, not a second ring. The disc keeps the same
   volume all the way down; only its edge and its glyph strengthen. */
.hiw-step[data-current="true"] .hiw-step__marker { border-color: var(--line-strong); }

/* ---- card ---- */
/* Only the second column. It starts after the marker and the gutter, so
   it can never cross the rail. Padding is constant across states: only
   the surface changes, which is what keeps the text from shifting as
   the reader scrolls past. */
.hiw-step__body {
  /* room for the marker on the left; the other three keep the stock inset */
  padding: var(--space-xl) var(--space-xl) var(--space-xl)
           calc(var(--space-lg) + var(--hiw-marker) + var(--hiw-gutter));
  border-radius: var(--radius-media);
  /* Always opaque, never transparent. The card has to be a solid surface to
     mask the rail running behind it — that is what turns one long line into
     segments between steps.
     Opaque does not have to mean visible, though: at rest the fill IS the
     band, so the step masks the rail while reading as unboxed. Only the
     current step lifts to --bg-raised. */
  background: var(--section-tint);
  box-shadow: none;
  transition:
    background-color var(--hiw-ease),
    box-shadow var(--hiw-ease);
}
/* The dim moved off the card and onto its CONTENT. Fading the card itself
   would have made it translucent and let the rail read straight through. */
.hiw-step__body > * { opacity: 0.55; transition: opacity var(--hiw-ease); }
.hiw-step[data-reached="true"] .hiw-step__body > * { opacity: 1; }
.hiw-step[data-current="true"] .hiw-step__body {
  /* --shadow-rest, not --shadow-chip. Chip is the control tier: two layers
     with a tight -2px spread, scaled for a 36px button, and that tightness
     is what made this card's edge read hard. Rest is the tier for surfaces
     sitting ON the page (case cards, the portrait frame): three layers out
     to a -24px ambient, so the card lifts without a defined edge.
     The marker keeps chip, because a 44px disc IS a control. */
  background: var(--bg-raised);
  box-shadow: var(--shadow-rest);
}

.hiw-step .hiw-title { margin-bottom: var(--space-2xs); }
.hiw-step .decisions { max-width: none; margin-top: var(--space-sm); }
.hiw-step .decisions li { margin-bottom: var(--space-2xs); }
.hiw-step .decisions li:last-child { margin-bottom: 0; }

/* ---- narrower ---- */
@media (max-width: 1000px) {
  .hiw { grid-template-columns: 1fr; gap: var(--space-xl); }
  .hiw__aside { position: static; padding-top: 0; }
  .hiw__aside .section-intro { max-width: 60ch; }
}
@media (max-width: 640px) {
  .hiw { --hiw-marker: 38px; --hiw-gutter: var(--space-sm); }
  .hiw-step__body { padding: var(--space-md); }
}

/* The dim is decorative, not information: with reduced motion every
   step sits at full contrast and only the rail still fills. */
@media (prefers-reduced-motion: reduce) {
  .hiw-step__body, .hiw-step__marker { opacity: 1; transition-duration: 1ms; }
}