/* The story strip: one shared "How it fits together" rail, rendered from partials/story-strip.inc.
   A system graphic, not a row of cards: hairline segments join five nodes. The current step is
   carried by weight and a filled ink node, never by colour. Horizontal from 960px; below that a
   vertical list with the hairline running down the left. Values come from the Brain's tokens. */
.story-strip { position:relative; z-index:1; padding:clamp(88px,11vw,150px) 0; background:var(--surface-canvas); color:var(--text-primary); font-family:var(--font-body) }
.story-inner { box-sizing:border-box; width:min(100%,var(--container-max)); margin-inline:auto; padding-inline:var(--pad,var(--gutter)) }
.story-head { display:grid; gap:var(--space-4) }
.story-eyebrow { margin:0; color:var(--text-muted); font-family:var(--font-mono); font-size:var(--text-eyebrow); font-weight:var(--weight-medium); letter-spacing:var(--tracking-eyebrow); line-height:var(--leading-normal); text-transform:uppercase }
.story-title { max-width:16ch; margin:0; font-size:clamp(1.8rem,5vw,4.4rem); font-weight:var(--weight-display); letter-spacing:-.035em; line-height:1.02; text-wrap:balance }
.story-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin:clamp(56px,7vw,92px) 0 0; padding:0; list-style:none }
.story-step { position:relative; min-width:0; margin:0; padding:0 }
/* The node sits on the rail; the segment runs from this node to the next one. */
.story-step::before { content:""; position:absolute; left:0; top:0; z-index:1; box-sizing:border-box; width:11px; height:11px; border:1px solid var(--text-primary); border-radius:var(--radius-full); background:var(--surface-canvas); transform:translateY(-50%) }
.story-step:not(:last-child)::after { content:""; position:absolute; left:var(--space-5); right:var(--space-3); top:0; height:1px; background:var(--border-strong) }
.story-step[aria-current="step"]::before { width:13px; height:13px; margin-left:-1px; background:var(--text-primary) }
.story-body { display:flex; flex-direction:column; gap:var(--space-2); min-height:44px; padding:var(--space-6) var(--space-6) 0 0; color:inherit; text-decoration:none }
.story-num { color:var(--text-muted); font-family:var(--font-mono); font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); line-height:var(--leading-normal) }
.story-label { font-size:clamp(1.6rem,2.3vw,2.15rem); font-weight:var(--weight-display); letter-spacing:-.03em; line-height:var(--leading-snug) }
.story-step[aria-current="step"] .story-label { font-weight:var(--weight-semibold) }
.story-line { max-width:24ch; color:var(--text-secondary); font-size:var(--text-body); line-height:var(--leading-normal); text-wrap:pretty }
.story-line a { color:var(--text-primary); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:var(--space-1) }
.story-line [aria-current="page"] { color:var(--text-primary) }
a.story-body:hover .story-label { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em }
.story-body:focus-visible, .story-line a:focus-visible { outline:2px solid var(--text-primary); outline-offset:var(--space-1); border-radius:var(--radius-sm) }
.story-close { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3) var(--space-7); margin:clamp(48px,6vw,72px) 0 0; padding-top:var(--space-5); border-top:1px solid var(--border-hairline) }
.story-close p { max-width:44ch; margin:0; color:var(--text-secondary); font-size:var(--text-body); line-height:var(--leading-normal) }
.story-close p:first-child { color:var(--text-primary) }
@media (max-width:959px) {
  .story-steps { grid-template-columns:minmax(0,1fr) }
  .story-step { padding:0 0 var(--space-6) var(--space-6) }
  .story-step:last-child { padding-bottom:0 }
  .story-step::before { top:calc(var(--space-2) + 2px); transform:none }
  .story-step[aria-current="step"]::before { margin-left:-1px; top:calc(var(--space-2) + 1px) }
  .story-step:not(:last-child)::after { left:5px; right:auto; top:calc(var(--space-5) + 3px); bottom:var(--space-1); width:1px; height:auto }
  .story-body { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-1); padding:0 }
  .story-num { line-height:1.9 }
  .story-line { max-width:46ch }
  .story-close { grid-template-columns:minmax(0,1fr) }
}
@media (min-width:600px) and (max-width:959px) {
  .story-body { grid-template-columns:minmax(150px,.45fr) minmax(0,1fr); column-gap:var(--space-6); align-items:baseline }
  .story-num { grid-column:1 / -1 }
}
@media (prefers-reduced-motion:reduce) {
  .story-strip * { transition:none !important }
}