/* L2 story rows. Tokens only. */
.story-list { display: grid; gap: var(--sp-8); list-style: none; margin: 0; padding: 0; }
.story { display: grid; gap: var(--sp-5); align-items: center; min-width: 0; }
.story__art { min-width: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-3); padding: var(--sp-4); box-shadow: var(--shadow-1); }
.story__text { min-width: 0; max-width: var(--measure); }
.story__text > :last-child { margin-bottom: 0; }
.story__text p { color: var(--c-text-muted); font-size: var(--fs-1); line-height: var(--lh-body); }
.story__link { display: inline-flex; align-items: center; min-height: 2.75rem; }
.story__svg { display: block; width: 100%; height: auto; max-height: 16rem; color: var(--c-text); }
@media (min-width: 48rem) {
  .story { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .story:nth-child(even) .story__art { order: 2; }
}
/* illustration palette */
.sv-frame { fill: var(--c-surface-2); stroke: var(--c-border-strong); stroke-width: 2; }
.sv-panel { fill: var(--c-bg); stroke: var(--c-border-strong); stroke-width: 1.5; }
.sv-ink { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-line { fill: var(--c-border-strong); }
.sv-mute { fill: var(--c-text-muted); }
.sv-acc { fill: var(--c-accent); }
.sv-acc-stroke { fill: none; stroke: var(--c-accent); stroke-width: 3; stroke-linecap: round; }
.sv-soft { fill: var(--c-accent-soft); stroke: var(--c-accent); stroke-width: 1.5; }
.sv-warn { fill: var(--c-warn); }
.sv-warn-soft { fill: var(--c-warn-bg); stroke: var(--c-warn); stroke-width: 1.5; }
.sv-ok { fill: var(--c-success); }
.sv-on { fill: var(--c-on-accent); }
.sv-text { fill: var(--c-text); font-family: var(--font-sans); font-size: 11px; font-weight: 600; }
.sv-text--on { fill: var(--c-on-accent); }
.sv-text--mid { text-anchor: middle; }