/* ==========================================================================
   Process story. Shared by the website and the brand guidelines.
   Every value comes from tokens.css. The resting state is the finished
   drawing; the .from class is the start of each animation.
   ========================================================================== */

.story-grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
}

/* stage icons */
.story-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); max-width: 520px; margin: var(--space-6) 0; padding: 0; list-style: none; }
/* Only the icon dims when a stage is not current. The label keeps its full
   colour, so every stage name can be read at any time. */
.story-tab { display: grid; justify-items: start; align-content: start; gap: var(--space-2); width: 100%; padding: 0; border: 0; background: none; color: var(--slate); font: inherit; text-align: left; cursor: pointer; transition: color var(--dur-base) var(--ease-out); }
.story-tab.is-on { color: var(--navy); }
.story-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
.story-tab svg { width: 40px; height: 40px; overflow: visible; opacity: .45; transition: opacity var(--dur-base) var(--ease-out); }
.story-tab:hover svg, .story-tab.is-on svg { opacity: 1; }
.story-tab .dot { fill: var(--signal); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform var(--dur-base) var(--ease-out) .15s; }
.story-tab.is-on .dot { transform: scale(1); }
.story-tab span { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.story-tab.is-on span { color: var(--ink); }

/* stage text: all five stack in one cell, so the column never jumps */
.story-stages { display: grid; }
.story-stage + .story-stage { margin-top: var(--space-6); }
.js .story-stage { grid-area: 1 / 1; margin: 0; visibility: hidden; }
.js .story-stage.on { visibility: visible; }
.story-n { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.story-h { margin: var(--space-3) 0 var(--space-4); min-height: 2.5em; font-family: var(--font-serif); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; font-weight: 400; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.story-stage p:last-child { margin: 0; max-width: 44ch; font-size: 17px; line-height: 28px; color: var(--ink-soft); transition: opacity .4s var(--ease-out) .15s, transform .4s var(--ease-out) .15s; }
.story-stage.from p:last-child { opacity: 0; transform: translateY(8px); transition: none; }

/* headlines, one medium each. All are short, and none blurs, tilts,
   stretches or re-wraps the words: the line reads while it arrives. */
.story-h.typing::after { content: ""; display: inline-block; width: 2px; height: .85em; margin-left: 3px; vertical-align: -.05em; background: var(--ink); }
[data-medium="hand"] .story-h { clip-path: inset(0 0 0 0); transition: clip-path .7s var(--ease-draw); }
[data-medium="hand"].from .story-h { clip-path: inset(0 100% 0 0); transition: none; }
[data-medium="drop"] .w { display: inline-block; transition: transform .5s var(--ease-out) calc(var(--i) * 50ms), opacity .3s var(--ease-out) calc(var(--i) * 50ms); }
[data-medium="drop"].from .w { opacity: 0; transform: translateY(-12px); transition: none; }
[data-medium="measure"] .story-h { transform-origin: left center; transition: transform .6s var(--ease-out), opacity .35s var(--ease-out); }
[data-medium="measure"].from .story-h { transform: scaleX(.94); opacity: 0; transition: none; }
[data-medium="focus"] .w { display: inline-block; transition: opacity .4s var(--ease-out) calc(var(--i) * 50ms), transform .5s var(--ease-out) calc(var(--i) * 50ms); }
[data-medium="focus"].from .w { opacity: 0; transform: translateY(8px); transition: none; }

/* the drawing */
.story-art { margin: 0; border-radius: var(--radius-md); background: var(--surface-paper); overflow: hidden; }
.story-art svg { display: block; width: 100%; height: auto; }
.story-art [data-art] { display: none; }
.story-art [data-art].on { display: inline; }
.a-gridline { fill: none; stroke: var(--line); stroke-width: .6; }
.a-mono { font-family: var(--font-mono); font-size: 15px; fill: var(--ink); }
.a-cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; fill: var(--ink-muted); }
.a-hand { font-family: var(--font-hand); font-size: 24px; font-weight: 500; fill: var(--slate); }
.a-ink { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.a-sk { fill: none; stroke: var(--slate); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.a-ghost { opacity: .35; }
.a-faint { fill: none; stroke: var(--ink-muted); stroke-width: .8; }
.a-dash { stroke-dasharray: 14 4 3 4; }
.a-tray { fill: var(--surface-sunk); }
.a-unit { fill: var(--ink); }
.a-dots { fill: var(--slate); }

/* animation states */
.draw { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-draw) var(--ease-draw) var(--d, 0s); }
.from .draw { stroke-dashoffset: 1; transition: none; }
.wipe { clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease-out) var(--d, 0s); }
.from .wipe { clip-path: inset(0 100% 0 0); transition: none; }
.fade { transition: opacity .6s var(--ease-out) var(--d, 0s); }
.from .fade { opacity: 0; transition: none; }
.drop { transform-box: fill-box; transform-origin: center; transition: transform .9s var(--ease-out) var(--d, 0s), opacity .35s var(--ease-out) var(--d, 0s); }
.from .drop { opacity: 0; transform: translateY(-40px) rotate(var(--r, 5deg)); transition: none; }
.extend { transform-box: fill-box; transform-origin: center; transition: transform .8s var(--ease-out) var(--d, 0s); }
.from .extend { transform: scaleX(0); transition: none; }
.from .extend.v { transform: scaleY(0); }
.unit { transition: opacity .5s var(--ease-out) var(--d, 0s), filter .9s var(--ease-out) var(--d, 0s); }
.from .unit { opacity: 0; filter: blur(6px); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .story-art *, .story-stage, .story-stage * { transition: none !important; }
}

/* scroll-driven on wide, tall-enough screens: the section is tall, the content pins.
   Windows under 700px high cannot show the whole text column at once,
   so they fall back to the icon tabs and nothing is cut off. */
@media (min-width: 900px) and (min-height: 700px) {
  [data-process-story][data-scroll] { height: 420vh; }
  [data-process-story][data-scroll] .story-pin { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; }
  [data-process-story][data-scroll] .story-pin > * { width: 100%; }
}