/* eevie evals story preview. Loaded only for data-design="story".
   Layout: a quiet, centred opening; then a sticky, decorative stage (artifacts) + narrative beats in normal flow.
   Each artifact ("piece") is placed per scene with --x/--y/--s/--o; transitions do the storytelling. */
[data-design="story"] {
  --paper: #102533;
  --surface: #173240;
  --ink: #f7f3ee;
  --muted: #bdc9cf;
  --line: #344b59;
  --blue: #b64b24;
  --blue-hover: #983b1b;
  --blue-wash: #f8e9de;
  --green: #efa678;
  --green-strong: #f5bc95;
  --green-wash: #263d49;
  --red: #a3391f;
  --red-wash: #fcece6;
  --green-light: #25424f;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --gutter: clamp(20px, 4.4vw, 64px);
  --header: 64px;
  background: var(--paper);
}
[data-design="story"] ::selection { background: #f1c3a7; color: #102533; }
[data-design="story"] :focus-visible { outline-color: var(--green); }
[data-design="story"] .skip-link { background: var(--ink); color: var(--paper); border-radius: 999px; }
html:has(body[data-design="story"]) { scroll-padding-top: 88px; }

/* Header: quiet identity, the playback control and a constant route to the enquiry form.
   The fresh opening shows none of it (nor the scene index or preview switcher): just the name and question. */
.story-header {
  position: fixed; inset: 0 0 auto; z-index: 30; height: var(--header);
  --ink: #f7f3ee; --muted: #c1cbd0; --line: #344b59;
  --green: #efa678; --green-strong: #f5bc95; --green-wash: #263d49;
  background: #102533f2; border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  transition: opacity 0.4s, visibility 0s;
}
body.is-opening .story-header, body.is-opening .design-switcher { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
[data-design="story"] .design-switcher {
  position: static; transform: none; width: max-content; max-width: calc(100% - 40px); margin: 0 auto 32px;
  background: var(--surface); color: var(--muted); border-color: var(--line); transition: opacity 0.4s, visibility 0s;
}
[data-design="story"] .design-switcher nav a { color: var(--muted); }
[data-design="story"] .design-switcher nav a:hover { background: var(--green-wash); color: var(--ink); }
[data-design="story"] .design-switcher a[aria-current] { background: var(--blue); color: #fff; }
[data-design="story"] .design-switcher a[aria-current]:hover { background: var(--blue-hover); color: #fff; }
.story-header-inner { height: 100%; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.story-wordmark { font-size: 19px; font-weight: 650; letter-spacing: -0.04em; color: var(--ink); padding: 8px 0; }
.name-accent { color: var(--green); }
.story-actions { display: flex; align-items: center; gap: 6px; }
.story-play {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 12px;
  border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 13px var(--sans); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.story-play[hidden], body.is-past-story .story-play { display: none; }
.story-play:hover { background: var(--green-wash); color: var(--green-strong); }
.play-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green-wash); color: var(--green); }
.play-icon svg { width: 12px; height: 12px; fill: currentColor; }
.story-play[data-state="playing"] .icon-play, .story-play:not([data-state="playing"]) .icon-pause { display: none; }
.story-contact {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 16px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.story-contact:hover { border-color: var(--green); color: var(--green-strong); background: var(--green-wash); }
.story-contact .lucide { width: 16px; height: 16px; }
.contact-short { display: none; }

/* Scene index: vertical rail on desktop; on small screens a segmented bar that only shows while focused. */
.story-index {
  position: fixed; z-index: 25; right: clamp(10px, 1.6vw, 24px); top: 50%; transform: translateY(-50%);
  display: block; margin: 0; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s;
}
body:not(.is-opening) .story.in-view .story-index { opacity: 1; visibility: visible; transition: opacity 0.3s; }
.story-index ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.story-index a {
  position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  min-height: 30px; padding: 3px 22px 3px 8px; font: 11px/1 var(--mono); letter-spacing: 0.04em; color: var(--muted); border-radius: 6px;
}
/* styles.css hides the first and last link of any nav on small screens; the index needs all seven. */
.story-index li > a:is(:first-child, :last-child) { display: flex; }
.story-index a::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: #526773; transition: background 0.25s, transform 0.25s;
}
.story-index li.is-past a::after { background: #bd7954; }
.story-index a[aria-current]::after { background: var(--green); transform: scale(1.45); }
.story-index a[aria-current] { color: var(--green-strong); }
.index-label {
  position: absolute; right: 100%; white-space: nowrap; padding: 4px 8px; border-radius: 5px; background: var(--paper); color: var(--ink);
  clip-path: inset(50%); opacity: 0; transition: opacity 0.2s;
}
.story-index a:hover .index-label, .story-index a:focus-visible .index-label, .story-index a[aria-current] .index-label { clip-path: none; opacity: 1; }
.story-index a:hover { color: var(--ink); }
.index-track { display: none; }

/* Stage */
.story {
  --paper: #102533; --ink: #f7f3ee; --muted: #bdc9cf; --line: #344b59;
  --green: #efa678; --green-strong: #f5bc95; --green-wash: #263d49;
  position: relative; background: var(--paper); color: var(--ink);
}
.story-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 0.5s;
}
.story.is-ready .story-stage { opacity: 1; }
.stage-region { position: absolute; top: calc(var(--header) + 28px); bottom: 36px; left: 43%; right: 120px; }
/* A soft blue glow adds depth behind the evidence; the opening stays a solid navy. */
.stage-region::before {
  content: ""; position: absolute; inset: -2% -4%; border-radius: 40px;
  background: radial-gradient(closest-side, var(--green-light) 0%, #1a3543aa 55%, #10253300 100%);
  opacity: 0; transition: opacity 0.9s ease;
}
.story:not([data-scene="1"]) .stage-region::before { opacity: 1; }
.stage-canvas {
  --cw: 560; --ch: 600;
  position: absolute; left: 50%; top: 50%; width: calc(var(--cw) * 1px); height: calc(var(--ch) * 1px);
  transform: translate(-50%, -50%) scale(var(--fit, 1));
}
.piece {
  position: absolute; left: 0; top: 0; width: calc(var(--w, 300) * 1px); margin: 0;
  transform: translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px)) scale(var(--s, 1));
  transform-origin: 0 0; opacity: var(--o, 0);
  transition: transform 0.8s var(--ease), opacity 0.45s ease, border-color 0.4s, box-shadow 0.4s;
  transition-delay: var(--d, 0s);
}
.story-stage .lucide { width: 16px; height: 16px; flex: none; }

/* Artifacts */
.card {
  --ink: #17293b; --muted: #566674; --line: #d8e0e5;
  --green: #b64b24; --green-strong: #983b1b; --green-wash: #f8e9de;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  font-size: 14px; line-height: 1.5; color: var(--ink);
  box-shadow: 0 1px 2px #12261c0d, 0 22px 44px -26px #12261c42;
}
.card-quiet { background: #fbfcfb; box-shadow: 0 1px 2px #12261c0a; }
.card-head {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 650;
  padding-bottom: 11px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.card-head .tag { margin-left: auto; }
.card-head .lucide { color: var(--green); }
.tag {
  font: 10.5px/1 var(--mono); letter-spacing: 0.02em; color: var(--muted); font-weight: 400;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; white-space: nowrap; background: #fff;
}
.tag-green { color: var(--green-strong); border-color: #e9c6b0; background: var(--green-wash); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-wash); }
.who { display: block; font: 10.5px/1.4 var(--mono); letter-spacing: 0.02em; color: var(--muted); }
.bubble { display: flex; flex-direction: column; gap: 3px; width: fit-content; max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.bubble-q { margin-left: auto; background: #f0f4f1; border-bottom-right-radius: 4px; }
.bubble-a { margin-top: 10px; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; transition: opacity 0.35s; }
.typing { display: inline-flex; gap: 5px; align-items: center; height: 22px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #93a199; animation: story-typing 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes story-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.6; } 30% { transform: translateY(-3px); opacity: 1; } }
.story[data-scene="1"] .p-chat .answer, .story:not([data-scene="1"]) .p-chat .typing { opacity: 0; }
/* Entering scene 2 the assistant "types" for a moment before its answer appears. */
.p-chat .typing { transition-delay: 0.9s; }
.p-chat .answer { transition-delay: 1s; }
mark { color: inherit; background: none; }
.claim { font-weight: 650; padding: 0 2px; border-radius: 4px; transition: background 0.4s, color 0.4s, box-shadow 0.4s; }
.story[data-scene="3"] .claim, .story[data-scene="4"] .claim { background: var(--red-wash); color: var(--red); box-shadow: inset 0 -2px 0 #e5a08c; }

.p-policy { border-left: 3px solid var(--green); }
.policy-label { display: flex; align-items: center; gap: 7px; font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-strong); }
.policy-ref { font-size: 12px; color: var(--muted); margin-top: 6px; }
.policy-text { font-size: 15.5px; font-weight: 500; margin-top: 4px; }
.truth, .claim { white-space: nowrap; }
.truth { color: var(--pass); background: var(--pass-bg); font-weight: 650; padding: 0 3px; border-radius: 4px; }

.p-versus { display: flex; align-items: center; height: 30px; }
.versus-line { flex: 1; border-top: 1.5px dashed #d99886; }
.versus-badge { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1.5px solid var(--red); color: var(--red); font-size: 16px; font-weight: 600; line-height: 1; }

.p-flag { display: flex; align-items: flex-start; gap: 10px; border-color: #efcdc2; background: #fffaf8; padding: 12px 14px; }
.p-flag > .lucide { color: var(--red); margin-top: 2px; }
.flag-title { font-weight: 650; font-size: 14px; color: #7a2a16; }
.flag-meta { font: 11px var(--mono); color: #7f4232; margin-top: 3px; }
.flag-meta s { text-decoration-color: var(--red); }

.thread-us { width: fit-content; max-width: 82%; margin: 0 0 12px auto; padding: 9px 12px; border-radius: 12px; border-bottom-right-radius: 4px; background: #f0f4f1; }
.thread-row p { font-size: 14.5px; line-height: 1.45; }
.thread-expert { display: flex; gap: 10px; align-items: flex-start; }
.thread-expert .who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.avatar { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--green-wash); color: var(--green); }

.p-notes ul, .p-related ul, .p-package ul { list-style: none; margin: 0; padding: 0; }
.p-notes li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; padding: 4px 0; }
.p-notes li .lucide { color: var(--green); margin-top: 2px; }

.p-test { padding: 0; overflow: hidden; }
.p-test .card-head { padding: 12px 16px; margin: 0; background: #fafcfb; }
.p-test dl { margin: 0; }
.p-test dl > div { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); }
.p-test dl > div:first-child { border-top: 0; }
.p-test dt { font: 10.5px/1.9 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.p-test dd { margin: 0; font-size: 14px; }
.run-row { background: #fcfdfc; }
.run { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; }
.run > span:last-child { font-size: 13px; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px 3px 6px; font-size: 12.5px; font-weight: 650; }
.pill .lucide { width: 15px; height: 15px; }
.pill-fail { background: var(--red-wash); color: var(--red); }
.pill-pass { background: var(--pass-bg); color: var(--pass); }
.run-pass, .story[data-scene="6"] .run-fail, .story[data-scene="7"] .run-fail { opacity: 0; }
.story[data-scene="6"] .run-pass, .story[data-scene="7"] .run-pass { opacity: 1; }
.story[data-scene="6"] .p-test { border-color: #b9d8c4; box-shadow: 0 0 0 4px var(--green-wash), 0 22px 44px -26px #12261c42; }

.quiet-label { font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 4px; }
.p-related li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.p-related li .tag { flex: none; }

.p-change { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.p-change > div { flex: 1; min-width: 0; }
.avatar-eng { background: #eef1ef; color: var(--ink); }
.change-title { font-weight: 650; font-size: 14px; }
.change-meta { font: 11px var(--mono); color: var(--muted); margin-top: 1px; }
.p-rerun { display: flex; justify-content: center; }
.rerun { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--green-wash); color: var(--green-strong); font-size: 12px; font-weight: 650; white-space: nowrap; }
.rerun .lucide { width: 14px; height: 14px; }

.p-workspace { height: calc(var(--h, 420) * 1px); background: #f5f8fa; border-color: #cbd9e1; }
.ws-foot { position: absolute; left: 16px; right: 16px; bottom: 13px; font: 11px var(--mono); color: var(--muted); }
.pkg-head { display: flex; align-items: center; gap: 8px; font: 13px var(--mono); padding-bottom: 9px; }
.pkg-head .lucide { color: var(--green); }
.p-package li { display: grid; grid-template-columns: 16px auto 1fr; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.p-package li .lucide { width: 15px; height: 15px; color: #7d685b; }
.p-package b { font: 12.5px var(--mono); font-weight: 400; }
.p-package li span { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.chip {
  --ink: #17293b; --muted: #566674; --line: #d8e0e5; --green: #b64b24;
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px #0718230d, 0 12px 26px -20px #07182340;
}
.chip .lucide { color: var(--green); width: 18px; height: 18px; }
.chip b { display: block; font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.chip span { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.chip::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: calc(var(--link, 22) * 1px);
  border-top: 1.5px dashed #c08b6b; transform-origin: right; transform: scaleX(0); transition: transform 0.5s var(--ease) 0.3s;
}
.story[data-scene="7"] .chip::before { transform: scaleX(1); transition-delay: 0.75s; }

/* Choreography — desktop canvas 560 × 600 */
.p-chat { --w: 324; --x: 118; --y: 30; }
.story[data-scene="2"] .p-chat { --x: 118; --y: 150; --o: 1; }
.story[data-scene="3"] .p-chat { --x: 0; --y: 110; --o: 1; }
.p-policy { --w: 206; --x: 380; --y: 200; }
.story[data-scene="3"] .p-policy { --x: 354; --y: 205; --o: 1; --d: 0.15s; }
.story[data-scene="4"] .p-policy { --x: 370; --y: 24; --s: 0.92; --o: 1; }
.p-versus { --w: 30; --x: 324; --y: 252; }
.story[data-scene="3"] .p-versus { --o: 1; --d: 0.35s; }
.p-flag { --w: 330; --x: 115; --y: 400; }
.story[data-scene="3"] .p-flag { --x: 115; --y: 372; --o: 1; --d: 0.5s; }
.story[data-scene="4"] .p-flag { --x: 0; --y: 40; --s: 0.92; --o: 1; }
.p-expert { --w: 410; --x: 0; --y: 230; }
.story[data-scene="4"] .p-expert { --y: 160; --o: 1; --d: 0.15s; }
.p-notes { --w: 350; --x: 200; --y: 430; }
.story[data-scene="4"] .p-notes { --y: 370; --o: 1; --d: 0.35s; }
.p-test { --w: 460; --x: 50; --y: 50; --s: 0.97; }
.story[data-scene="5"] .p-test { --y: 60; --s: 1; --o: 1; --d: 0.2s; }
.story[data-scene="6"] .p-test { --y: 150; --s: 1; --o: 1; }
.p-related { --w: 460; --x: 50; --y: 360; }
.story[data-scene="5"] .p-related { --y: 330; --o: 1; --d: 0.4s; }
.p-change { --w: 460; --x: 50; --y: 0; }
.story[data-scene="6"] .p-change { --y: 30; --o: 1; --d: 0.1s; }
.p-rerun { --w: 460; --x: 50; --y: 100; }
.story[data-scene="6"] .p-rerun { --y: 108; --o: 1; --d: 0.3s; }
.p-workspace { --w: 540; --h: 350; --x: 10; --y: 110; --s: 0.97; }
.p-package { --w: 272; --x: 70; --y: 210; --s: 0.9; }
.p-github { --w: 204; --x: 340; --y: 170; }
.p-env { --w: 204; --x: 340; --y: 300; }
.story[data-scene="7"] .p-workspace { --y: 90; --s: 1; --o: 1; }
.story[data-scene="7"] .p-package { --x: 36; --y: 160; --s: 1; --o: 1; --d: 0.15s; }
.story[data-scene="7"] .p-github { --x: 330; --y: 180; --o: 1; --d: 0.45s; }
.story[data-scene="7"] .p-env { --x: 330; --y: 316; --o: 1; --d: 0.6s; }
/* Exits: artifacts fold into whatever comes next instead of simply vanishing. */
.story[data-scene="4"] .p-chat, .story[data-scene="5"] .p-chat, .story[data-scene="6"] .p-chat, .story[data-scene="7"] .p-chat { --x: 0; --y: 30; --s: 0.9; }
.story[data-scene="5"] .p-policy, .story[data-scene="6"] .p-policy, .story[data-scene="7"] .p-policy { --x: 140; --y: 150; --s: 0.6; }
.story[data-scene="5"] .p-notes, .story[data-scene="6"] .p-notes, .story[data-scene="7"] .p-notes { --x: 140; --y: 110; --s: 0.6; }
.story[data-scene="5"] .p-expert, .story[data-scene="6"] .p-expert, .story[data-scene="7"] .p-expert { --x: 50; --y: 80; --s: 0.92; }
.story[data-scene="5"] .p-flag, .story[data-scene="6"] .p-flag, .story[data-scene="7"] .p-flag { --x: 50; --y: 40; --s: 0.9; }
.story[data-scene="7"] .p-test { --x: 70; --y: 200; --s: 0.42; }
.story[data-scene="7"] .p-related { --x: 70; --y: 280; --s: 0.42; }
.story[data-scene="7"] .p-change, .story[data-scene="7"] .p-rerun { --y: -30; }

/* Narrative beats */
.story-beats { position: relative; z-index: 2; list-style: none; margin: -100vh 0 0; margin-top: -100svh; padding: 0; pointer-events: none; }
.beat { display: flex; align-items: center; min-height: 86vh; min-height: 86svh; padding-inline: var(--gutter); outline: none; }
.beat-card { width: min(39vw, 450px); pointer-events: auto; }
.beat:last-child { min-height: 100vh; min-height: 100svh; }
/* Opening: the name and the question, centred in a navy viewport.
   The settled state is the default (no JavaScript, reduced motion, deep links, a reader who takes over). With motion,
   the first view is the name alone, centred and set as "eevie - evals". Like ash being tapped from a cigarette, the
   right end of "evals" lifts a little and comes back down; that small impact knocks the hyphen loose, it drops away
   and the words close up into the wordmark, then the name glides up as the smaller question arrives beneath it. All
   of it is transforms and opacity on a fixed layout, so nothing reflows. Played once; story.js begins the storyboard
   after the question has had time to be read. */
.beat.beat-opening { min-height: 100vh; min-height: 100svh; align-items: center; justify-content: center; text-align: center; padding: 32px 24px; }
.opening-copy {
  --name-size: clamp(52px, calc(2.9vw + 26px), 68px); --question-size: clamp(18px, calc(1.1vw + 7px), 23px);
  --rhythm: clamp(22px, 3.4svh, 34px);
  /* Open spacing either side of the hyphen; the space between the words, hyphen centred in it (Manrope at -0.05em). */
  --spread: 0.3em; --space: 0.2em;
  /* How far the name sits below its final place so that, alone, it is centred: half the question block. */
  --lift: calc((var(--rhythm) + 2 * 1.32 * var(--question-size)) / 2);
  position: relative; pointer-events: auto;
}
.story-name { font-size: var(--name-size); font-weight: 640; line-height: 1.1; letter-spacing: -0.05em; white-space: nowrap; }
.story-name > span { display: inline-block; }
/* "evals" pivots on its left foot, at the baseline, so only its right end rises. */
.story-name .name-accent { transform-origin: 0 82%; }
/* A zero-width box at the end of "eevie"; the glyph is centred in the space that follows. Hidden once settled. */
.name-hyphen { width: 0; margin-inline: calc(var(--space) / 2) calc(var(--space) / -2); text-align: left; color: var(--green); opacity: 0; user-select: none; }
.name-hyphen::before { content: "-"; display: inline-block; translate: -50% 0; }
.opening-line { margin: var(--rhythm) auto 0; max-width: none; font-size: var(--question-size); font-weight: 480; line-height: 1.32; letter-spacing: -0.028em; color: var(--ink); }
.opening-line span { display: block; }
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .story-name { animation: name-in 0.7s ease 0.05s both, name-lift 0.9s var(--ease) 2.5s both; }
  .name-lead { animation: lead-close 0.7s cubic-bezier(0.45, 0, 0.2, 1) 1.85s both; }
  .story-name .name-accent { animation: accent-tilt 0.7s 1s both, accent-close 0.7s cubic-bezier(0.45, 0, 0.2, 1) 1.85s both; }
  .name-hyphen { animation: hyphen-fall 0.65s cubic-bezier(0.45, 0, 0.7, 0.4) 1.7s both; }
  .opening-line { animation: question-in 0.8s var(--ease) 2.6s both; }
  /* A tab opened in the background holds its opening until it is first shown (story.js). */
  .story.is-held .opening-copy * { animation-play-state: paused; }
  /* Once the reader takes over (after a brief fast-forward), or on arrival by deep link, the opening is simply settled. */
  .story.is-settled .opening-copy * { animation: none; }
}
@keyframes name-in { from { opacity: 0; } }
@keyframes name-lift { from { translate: 0 var(--lift); } }
@keyframes lead-close { from { translate: calc(-1 * var(--spread)) 0; } }
@keyframes accent-close { from { translate: var(--spread) 0; } }
/* One calm tilt: the right end eases up a few degrees, then comes back down a little faster, landing (no bounce)
   at the moment the hyphen is released. */
@keyframes accent-tilt {
  0% { transform: none; animation-timing-function: cubic-bezier(0.37, 0, 0.3, 1); }
  55% { transform: rotate(-3.5deg); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.45); }
  100% { transform: none; }
}
/* Knocked loose by that landing: it falls under gentle gravity, tipping slightly, and fades as it goes. */
@keyframes hyphen-fall {
  0% { opacity: 1; transform: none; }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(0.85em) rotate(14deg); }
}
@keyframes question-in { from { opacity: 0; translate: 0 10px; } }
.beat-kicker { display: flex; align-items: center; gap: 10px; font: 11px var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--green-strong); }
.beat-kicker span { padding: 3px 7px; border-radius: 999px; background: var(--green-wash); color: var(--green-strong); letter-spacing: 0.02em; }
.beat h2 { margin-top: 16px; font-size: clamp(31px, 3.1vw, 46px); font-weight: 540; line-height: 1.08; letter-spacing: -0.045em; text-wrap: balance; }
.beat-detail { margin-top: 18px; max-width: 38ch; font-size: 16px; line-height: 1.65; color: var(--muted); }
.beat-example { margin-top: 18px; max-width: 46ch; padding: 12px 14px; border-left: 2px solid var(--green); background: #1b3442; font-size: 14px; line-height: 1.6; }
.story.is-ready .beat-example {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.story-cta { margin-top: 30px; border-radius: 999px; padding-inline: 22px; gap: 16px; font-size: 13px; }
.story-cta .lucide { width: 17px; height: 17px; }
.beat:focus-visible .beat-card, .beat:focus-visible .opening-copy { outline: 2px solid var(--green); outline-offset: 12px; border-radius: 6px; }

/* One visual language from the opening through the handover, questions and contact form. */
[data-design="story"] .container { width: calc(100% - 2 * var(--gutter)); max-width: 1440px; }
[data-design="story"] :is(.deliverables, .faq-section) { padding-block: clamp(60px, 6vw, 88px); }
[data-design="story"] .deliverables { border-top: 1px solid var(--line); }
[data-design="story"] .section-intro { display: block; }
[data-design="story"] :is(.section-intro, .faq-intro, .enquiry-copy) h2 {
  margin-top: 18px; font-size: clamp(30px, 3.1vw, 46px); font-weight: 540;
  line-height: 1.12; letter-spacing: -0.045em; text-wrap: balance;
}
[data-design="story"] .eyebrow { color: var(--green); font-size: 11px; letter-spacing: 0.07em; }
[data-design="story"] .section-index { padding-top: 0; }
[data-design="story"] :is(.section-intro > div > p, .faq-intro > p:last-child, .enquiry-copy > p:not(.eyebrow)) {
  color: var(--muted); font-size: 16px; line-height: 1.65; margin-top: 20px; max-width: 54ch;
}
[data-design="story"] .deliverables-table { margin-top: 40px; }
[data-design="story"] .deliverables-table thead th { color: var(--muted); border-color: var(--line); font-size: 11px; padding-bottom: 16px; }
[data-design="story"] .deliverables-table tbody th { font-size: 18px; line-height: 1.4; font-weight: 550; letter-spacing: -0.025em; }
[data-design="story"] .deliverables-table :is(tbody th, td) { padding-block: 28px; }
[data-design="story"] .deliverables-table th:first-child { width: 62%; padding-right: 40px; }
[data-design="story"] .deliverables-table small { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 9px; max-width: 58ch; }
[data-design="story"] .deliverables-table td { color: var(--muted); font-size: 15px; line-height: 1.7; }
[data-design="story"] .table-index { width: 46px; color: var(--green); font-size: 11px; }
[data-design="story"] .deliverables-table tbody th > span:last-child { width: calc(100% - 52px); }
[data-design="story"] .faq-section { gap: clamp(32px, 6vw, 88px); }
[data-design="story"] .faq-list summary { font-size: 16px; padding-block: 23px; }
[data-design="story"] .faq-list summary > span,
[data-design="story"] .faq-list summary:hover { color: var(--green); }
[data-design="story"] .faq-list details > p { color: var(--muted); font-size: 15px; line-height: 1.7; }
[data-design="story"] .enquiry-section { padding-block: clamp(60px, 6vw, 88px); background: var(--surface); border-color: var(--line); }
[data-design="story"] .enquiry-grid { gap: clamp(32px, 6vw, 88px); }
[data-design="story"] .next-step { border-color: var(--line); }
[data-design="story"] .next-step p { color: var(--muted); font-size: 14px; }
[data-design="story"] :is(.next-step > span, .contact-link) { color: var(--green); }
[data-design="story"] .form-notice { background: var(--green-wash); color: var(--muted); border-color: var(--green); border-radius: 0 10px 10px 0; font-size: 13px; }
[data-design="story"] .field label { color: var(--ink); font-size: 14px; }
[data-design="story"] .field :is(input, textarea) {
  border-color: #57707f; border-radius: 12px; background: var(--paper); color: var(--ink);
  font-size: 16px; padding: 13px 15px; min-height: 48px;
}
[data-design="story"] .field :is(input, textarea)::placeholder { color: #a4b5bf; }
[data-design="story"] .field :is(input, textarea):disabled { color: var(--muted); opacity: 1; }
[data-design="story"] .field :is(input, textarea):hover { border-color: #8da1ae; }
[data-design="story"] .field :is(input, textarea):focus { border-color: var(--green); outline-color: var(--green); }
[data-design="story"] .field :is(input, textarea)[aria-invalid="true"] { border-color: #f1a68f; }
[data-design="story"] .field-error { color: #f1a68f; font-size: 13px; }
[data-design="story"] :is(.field-hint, .privacy-notice, .noscript-note) { color: var(--muted); font-size: 13px; line-height: 1.7; }
[data-design="story"] .button { min-height: 48px; border-radius: 999px; padding: 13px 22px; font-size: 13px; }
[data-design="story"] .button-primary:disabled { background: #8b6551; }
[data-design="story"] .form-feedback { background: #173c37; color: #b6dfc4; border-color: #486e5e; border-radius: 12px; font-size: 14px; }
[data-design="story"] .form-feedback[data-kind="error"] { background: #472d2a; color: #f3c8b9; border-color: #946256; }
[data-design="story"] .site-footer { padding-block: 34px; }
[data-design="story"] .site-footer .story-wordmark { font-size: 22px; }
[data-design="story"] .site-footer p,
[data-design="story"] .site-footer > a:last-child { color: var(--muted); font-size: 13px; }
[data-design="story"] .site-footer > a:last-child:hover { color: var(--green); }
body[data-design="story"]:has(.design-switcher) { padding-bottom: 0; }
[data-design="story"] .site-footer .name-accent { color: var(--green); }

@media (max-width: 600px) {
  [data-design="story"] .deliverables-table thead th { font-size: 10px; }
  [data-design="story"] .deliverables-table th:first-child { width: 60%; padding-right: 20px; }
  [data-design="story"] .deliverables-table tbody th { font-size: 15px; }
  [data-design="story"] .deliverables-table tbody th > span:last-child { width: auto; }
  [data-design="story"] .deliverables-table :is(small, td) { font-size: 13px; }
  [data-design="story"] .faq-list summary { font-size: 15px; }
}

/* Small screens: stage on top, beats as cards that pass beneath it. */
@media (max-width: 900px) {
  [data-design="story"] { --header: 56px; }
  .story-header-inner { padding-inline: 16px; }
  /* Phones repaint a blurred backdrop on every scrolled frame; the header is near-opaque, so the blur adds nothing. */
  .story-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* Keep the stage's moving artifacts from invalidating paint or layout outside it while the page scrolls. */
  .story-stage { contain: layout paint; }
  .story-contact { min-height: 36px; padding: 6px 12px 6px 14px; font-size: 12.5px; }
  .contact-long { display: none; }
  .contact-short { display: inline; }
  .story-actions { gap: 2px; }
  .story-play { min-height: 36px; padding: 6px 10px 6px 8px; font-size: 12.5px; }
  .play-object { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* On phones the segmented index read as a progress bar, so it stays out of sight; the beats carry the story as the
     reader scrolls. It is still in the page for keyboard and assistive technology, and appears while it has focus. */
  .story-index { left: 0; right: 0; top: var(--header); transform: none; background: #102533f2; padding: 0 12px; }
  .story-index:not(:focus-within) { clip-path: inset(50%); }
  .story-index ol { flex-direction: row; gap: 4px; }
  .story-index li { flex: 1; }
  .story-index a { min-height: 24px; padding: 0; justify-content: center; }
  .story-index a::after { inset: 50% 0 auto; width: auto; height: 3px; margin-top: -1.5px; border-radius: 2px; }
  .story-index a[aria-current]::after { transform: none; }
  .index-num, .index-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .story-index a:hover .index-label, .story-index a:focus-visible .index-label, .story-index a[aria-current] .index-label { clip-path: inset(50%); }
  .stage-region { top: calc(var(--header) + 36px); bottom: 36svh; left: 12px; right: 12px; }
  /* Top-aligned so a short viewport lets the canvas run under the cards rather than shrink too far. */
  .stage-canvas { --cw: 340; --ch: 420; top: 0; transform: translate(-50%, 0) scale(var(--fit, 1)); transform-origin: 50% 0; }
  .beat { min-height: 88svh; align-items: flex-end; justify-content: center; padding-inline: 12px; }
  .beat-card { width: min(100%, 560px); padding: 16px 18px 18px; background: #183341fa; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 -10px 34px -24px #07182355, 0 18px 40px -26px #07182355; }
  .beat:last-child { min-height: 100svh; padding-bottom: 10svh; }
  .beat.beat-opening { align-items: center; padding: 24px 20px; }
  .opening-copy { --name-size: clamp(38px, calc(8vw + 15px), 52px); --question-size: clamp(16px, calc(2.4vw + 7px), 19px); }
  .beat-kicker { font-size: 10.5px; }
  .beat h2 { margin-top: 8px; font-size: clamp(22px, 6.4vw, 28px); }
  .beat-detail { margin-top: 8px; font-size: 14.5px; line-height: 1.55; }
  .story-cta { margin-top: 16px; width: 100%; min-height: 48px; padding-block: 12px; }
  .beat:focus-visible .beat-card { outline-offset: 3px; border-radius: 18px; }

  /* Choreography — compact canvas 340 × 420 */
  .card { font-size: 13.5px; padding: 12px 13px; border-radius: 13px; }
  .card-head { padding-bottom: 9px; margin-bottom: 10px; }
  .bubble { font-size: 14.5px; padding: 9px 12px; }
  .p-chat { --w: 300; --x: 20; --y: 30; }
  .p-test .card-head { margin: 0; }
  .story[data-scene="2"] .p-chat { --x: 20; --y: 20; }
  .story[data-scene="3"] .p-chat { --x: 0; --y: 0; --s: 0.9; }
  .p-policy { --w: 196; --x: 150; --y: 210; }
  .story[data-scene="3"] .p-policy { --x: 140; --y: 196; }
  .story[data-scene="4"] .p-policy { --x: 150; --y: -10; --s: 0.8; --o: 0; }
  .policy-text { font-size: 15px; }
  .p-versus { --w: 30; --x: 100; --y: 232; }
  .p-flag { --w: 330; --x: 5; --y: 340; }
  .story[data-scene="3"] .p-flag { --x: 5; --y: 318; }
  .story[data-scene="4"] .p-flag { --x: 5; --y: -20; --s: 1; --o: 0; }
  .p-expert { --w: 330; --x: 5; --y: 30; }
  .story[data-scene="4"] .p-expert { --y: 0; }
  .p-notes { --w: 310; --x: 25; --y: 210; }
  .story[data-scene="4"] .p-notes { --y: 188; }
  .p-notes li { font-size: 13px; padding: 3px 0; }
  .p-test { --w: 330; --x: 5; --y: 30; }
  .story[data-scene="5"] .p-test { --y: 0; }
  .story[data-scene="6"] .p-test { --y: 106; }
  .p-test .card-head { padding: 10px 12px; }
  .p-test dl > div { grid-template-columns: 64px 1fr; gap: 8px; padding: 8px 12px; }
  .p-test dt { font-size: 10px; }
  .p-test dd { font-size: 13px; line-height: 1.45; }
  .p-related { --w: 330; --x: 5; --y: 280; }
  .story[data-scene="5"] .p-related { --y: 256; }
  .p-related li { font-size: 12.5px; padding: 6px 0; }
  .p-related li:nth-child(3) { display: none; }
  .p-change { --w: 330; --x: 5; --y: -10; }
  .story[data-scene="6"] .p-change { --y: 0; }
  .p-change .tag { display: none; }
  .p-rerun { --w: 330; --x: 5; --y: 66; }
  .story[data-scene="6"] .p-rerun { --y: 70; }
  .p-workspace { --w: 336; --h: 372; --x: 2; --y: 20; }
  .story[data-scene="7"] .p-workspace { --y: 0; }
  /* Small screens: GitHub and environment sit above the package so a tall final card never hides them. */
  .p-package { --w: 304; --x: 18; --y: 150; }
  .story[data-scene="7"] .p-package { --x: 16; --y: 136; }
  .p-package li { padding: 4px 0; }
  .p-package li span { font-size: 11.5px; }
  .pkg-head { padding-bottom: 6px; }
  .p-github, .p-env { --w: 148; --y: 60; }
  .p-github { --x: 16; }
  .p-env { --x: 172; }
  .story[data-scene="7"] .p-github { --x: 16; --y: 46; }
  .story[data-scene="7"] .p-env { --x: 172; --y: 46; }
  .ws-foot { bottom: 10px; font-size: 10.5px; }
  .chip { flex-direction: column; min-height: 84px; padding: 10px 11px; gap: 6px; align-items: flex-start; }
  .chip b { font-size: 12.5px; }
  .chip span { font-size: 11px; }
  .chip::before { right: auto; left: 50%; top: 100%; width: 0; height: calc(var(--link-v, 14) * 1px); border-top: 0; border-left: 1.5px dashed #94bfa3; transform-origin: top; transform: scaleY(0); }
  .story[data-scene="7"] .chip::before { transform: scaleY(1); }
  .story[data-scene="4"] .p-chat, .story[data-scene="5"] .p-chat, .story[data-scene="6"] .p-chat, .story[data-scene="7"] .p-chat { --x: 0; --y: -30; }
  .story[data-scene="5"] .p-policy, .story[data-scene="6"] .p-policy, .story[data-scene="7"] .p-policy { --x: 100; --y: 110; --s: 0.6; }
  .story[data-scene="5"] .p-notes, .story[data-scene="6"] .p-notes, .story[data-scene="7"] .p-notes { --x: 100; --y: 70; --s: 0.6; }
  .story[data-scene="5"] .p-expert, .story[data-scene="6"] .p-expert, .story[data-scene="7"] .p-expert { --x: 5; --y: 20; --s: 0.92; }
  .story[data-scene="5"] .p-flag, .story[data-scene="6"] .p-flag, .story[data-scene="7"] .p-flag { --x: 5; --y: -20; }
  .story[data-scene="7"] .p-test { --x: 30; --y: 170; --s: 0.42; }
  .story[data-scene="7"] .p-related { --x: 30; --y: 230; --s: 0.42; }
  /* The switcher sits at the very end of the page on small screens, so it never covers story text. */
  [data-design="story"] .design-switcher { position: static; transform: none; width: fit-content; margin: 0 auto 20px; }
  body[data-design="story"]:has(.design-switcher) { padding-bottom: 0; }
}
@media (max-width: 360px) {
  .story-contact { padding-inline: 11px 10px; }
  .story-wordmark { font-size: 18px; }
  .story-play { padding-inline: 7px; }
  .play-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Short phones: the headline carries each beat; the supporting line stays available to screen readers. */
@media (max-width: 900px) and (max-height: 700px) {
  .beat:not(.beat-opening) .beat-detail { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .beat h2 { font-size: clamp(21px, 6.2vw, 26px); }
}
@media (max-width: 1200px) and (min-width: 901px) {
  .stage-region { left: 41%; right: 92px; }
  .beat-card { width: min(37vw, 420px); }
}

/* No JavaScript: a plain, readable sequence with the example text visible. */
@media (scripting: none) {
  .story-stage, .story-index { display: none; }
  .story-beats { margin-top: 0; padding-bottom: 40px; }
  .beat, .beat:last-child { min-height: 0; padding-block: 36px; align-items: flex-start; }
  .beat.beat-opening { min-height: 70svh; padding-top: calc(var(--header) + 24px); }
  .beat-card { width: min(100%, 640px); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .typing i { animation: none; }
}