.story-page {
  background: var(--site-paper, var(--color-light));
  color: var(--site-ink, var(--color-dark));
  font-family: Axiforma, Arial, sans-serif;
}
.story-page *, .story-page *::before, .story-page *::after { box-sizing: border-box; }
.story-page :is(h1, h2, h3, h4, p, ol, ul, figure) { margin: 0; }
.story-page :is(h1, h2, h3, h4) { color: inherit; font-family: Axiforma, Arial, sans-serif; font-style: normal; font-weight: 500; text-transform: none; }
.story-page h2 { max-width: 23ch; font-size: clamp(2rem, 4.2vw, 4.8rem); line-height: 1.02; letter-spacing: -.055em; }
.story-page h3 { font-size: clamp(1.3rem, 2vw, 2.1rem); line-height: 1.17; letter-spacing: -.035em; }
.story-page h4 { font-size: 1rem; line-height: 1.35; letter-spacing: -.015em; }
.story-page p { font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.7; }
.story-page a { color: inherit; }
.story-page [id] { scroll-margin-top: calc(var(--site-header-offset, 7rem) + 1.5rem); }
.story-page .story-kicker { color: var(--site-accent-ink); font-size: .75rem; font-weight: 500; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; }
.story-page .story-step { color: var(--site-accent-ink); font-size: .75rem; font-weight: 500; line-height: 1.5; }
.story-hero { position: relative; display: flex; align-items: flex-end; min-height: max(48rem, 100svh); padding: calc(var(--site-header-offset, 8rem) + 5rem) 0 5.5rem; isolation: isolate; color: var(--color-light); background: var(--color-dark); }
.story-page .story-image :is(picture, img) { display: block; width: 100%; }
.story-page .story-image img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.story-hero .story-hero__image { position: absolute; inset: 0; }
.story-hero__image picture { height: 100%; }
.story-hero .story-hero__image img { position: absolute; inset: 0; height: 100%; object-position: 60% center; }
.story-hero__shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--color-dark) 95%, transparent) 0%, color-mix(in srgb, var(--color-dark) 80%, transparent) 38%, color-mix(in srgb, var(--color-dark) 28%, transparent) 75%), linear-gradient(0deg, color-mix(in srgb, var(--color-dark) 84%, transparent), transparent 70%); }
.story-hero__inner { position: relative; z-index: 2; width: 100%; }
.story-hero h1 { max-width: 13ch; margin: 1.6rem 0 2.8rem; font-size: clamp(2.65rem, 9.5vw, 9rem); font-weight: 500; letter-spacing: -.065em; line-height: .94; }
.story-hero__lower { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: end; max-width: 74rem; border-top: 1px solid color-mix(in srgb, var(--color-light) 40%, transparent); padding-top: 1.5rem; }
.story-hero__lower > p { max-width: 47rem; color: var(--color-light); font-size: clamp(1rem, 1.55vw, 1.4rem); line-height: 1.6; }
.story-page .story-image figcaption, .story-flow figcaption { font-size: .75rem; line-height: 1.6; }
.story-hero__image figcaption { position: absolute; z-index: 3; right: max(1rem, 3vw); bottom: 1rem; max-width: 90%; padding: .3rem .55rem; color: var(--color-light); background: color-mix(in srgb, var(--color-dark) 78%, transparent); }
.story-section { padding: clamp(4rem, 7.5vw, 8rem) 0; border-bottom: 1px solid var(--site-rule); }
.story-chapter { margin-bottom: clamp(2rem, 4vw, 4rem); }
.story-chapter h2 { margin-top: 1.2rem; }
.story-page .story-lede { max-width: 68ch; margin-top: 1.4rem; font-size: clamp(1.05rem, 1.45vw, 1.3rem); }
.story-origin-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.story-prose { max-width: 67ch; min-width: 0; }
.story-prose h3 { margin-bottom: 1.4rem; }
.story-prose p + p { margin-top: 1.3rem; }
.story-scenario { min-width: 0; padding: clamp(1.5rem, 3vw, 3rem); border-left: 3px solid var(--color-primary); background: var(--site-panel); }
.story-scenario h3 { margin: .8rem 0 1.2rem; }
.story-needs { padding: 0; list-style: none; }
.story-scenario .story-needs { margin-top: 2rem; }
.story-needs li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .9rem; padding: 1.15rem 0; border-top: 1px solid var(--site-rule); }
.story-needs p { margin-top: .4rem; font-size: .9375rem; line-height: 1.55; }
.story-timeline { list-style: none; padding: 0; }
.story-timeline li { display: grid; grid-template-columns: minmax(5rem, .24fr) minmax(0, .55fr) minmax(0, 1fr); align-items: start; gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(1.7rem, 3vw, 3rem) 0; border-top: 1px solid var(--site-rule); }
.story-timeline time { color: var(--site-accent-ink); font-size: clamp(2.7rem, 5.5vw, 5rem); font-weight: 500; letter-spacing: -.065em; line-height: 1; }
.story-page .story-milestone { margin-top: .75rem; font-size: .875rem; line-height: 1.6; }
.story-context-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, .7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.story-programme { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--site-rule); background: var(--site-panel); text-decoration: none; }
.story-programme strong { font-size: clamp(1.7rem, 3vw, 2.8rem); font-weight: 500; line-height: 1.15; letter-spacing: -.04em; }
.story-programme > span { font-size: .875rem; line-height: 1.5; }
.story-programme__action { display: flex; justify-content: space-between; gap: 1rem; width: 100%; margin-top: 1rem; text-decoration: underline; text-underline-offset: .2em; }
.story-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 5rem) !important; }
.story-comparison > div { border-left: 3px solid var(--color-primary); padding-left: clamp(1.25rem, 2.5vw, 2.5rem); }
.story-comparison h3 { max-width: 22ch; margin: .8rem 0 1.5rem; }
.story-comparison ul { padding-left: 1.15rem; }
.story-comparison li { padding: .35rem 0; font-size: 1rem; line-height: 1.65; }
.story-context-meaning { max-width: 70ch; margin: 2.5rem 0 0; }
.story-page .story-context-image { margin-top: clamp(2rem, 4vw, 4rem); }
.story-context-image figcaption { margin-top: .65rem; color: var(--site-muted); }
.story-flow { --story-flow-gap: 1.5rem; }
.story-flow :is(ol, ul) { padding: 0; list-style: none; }
.story-flow__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--story-flow-gap); }
.story-flow__steps > li { position: relative; min-width: 0; padding: 1.2rem 1rem 1.5rem 0; border-top: 1px solid var(--site-rule); }
.story-flow__steps .story-step { display: block; margin-bottom: .9rem; }
.story-flow__steps h3 { max-width: 19ch; }
.story-flow__steps p { margin-top: 1rem; }
.story-flow__steps > li:not(:last-child)::after { content: ''; position: absolute; width: .6rem; height: .6rem; top: 1.65rem; right: -.85rem; border-top: 1px solid var(--site-accent-ink); border-right: 1px solid var(--site-accent-ink); transform: rotate(45deg); }
.story-flow__steps > li:last-child::before { content: ''; position: absolute; left: 50%; top: 100%; height: 2rem; border-left: 1px solid var(--site-accent-ink); }
.story-flow .story-flow__branches { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.3rem; padding-left: 2rem; margin-top: 4rem; border-left: 1px solid var(--site-accent-ink); }
.story-flow__branches::before { content: ''; position: absolute; left: 0; right: calc((100% - 2 * var(--story-flow-gap)) / 6); top: -2rem; border-top: 1px solid var(--site-accent-ink); }
.story-flow__branches::after { content: ''; position: absolute; left: -1px; top: -2rem; height: 2rem; border-left: 1px solid var(--site-accent-ink); }
.story-flow__branches > li { position: relative; min-width: 0; }
.story-flow__branches > li::before { content: ''; position: absolute; left: -2rem; top: 2.25rem; width: 2rem; border-top: 1px solid var(--site-accent-ink); }
.story-route { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.25fr); gap: clamp(1.4rem, 4vw, 4rem); padding: clamp(1.3rem, 3vw, 3rem); border: 1px solid var(--site-rule); background: var(--site-panel); text-decoration: none; }
.story-route__heading h3 { margin-top: .8rem; }
.story-route__action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; font-size: .875rem; line-height: 1.5; text-decoration: underline; text-underline-offset: .2em; }
.story-route :is(h3, p, .story-kicker) { color: inherit; }
.story-flow figcaption { margin-top: 1.3rem; color: var(--site-muted); }
.story-resources { list-style: none; padding: 0; }
.story-resource { display: grid; grid-template-columns: 1.5rem minmax(0, .7fr) minmax(0, 1fr) 1.2rem; gap: clamp(1rem, 3vw, 3rem); padding: clamp(1.4rem, 3vw, 2.6rem) 1rem; border-top: 1px solid var(--site-rule); text-decoration: none; }
.story-resource h3 { margin-top: .6rem; font-size: clamp(1.2rem, 1.7vw, 1.8rem); }
.story-resource .story-kicker, .story-resource .story-step { color: inherit; }
.story-resource__arrow { align-self: end; font-size: 1.3rem; }
.story-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); }
.story-people > div { min-width: 0; padding-top: 1.5rem; border-top: 2px solid var(--color-primary); }
.story-people h3 { margin: .8rem 0 1.4rem; }
.story-closing { padding: clamp(4rem, 8vw, 8rem) 0; color: var(--color-light); background: var(--color-dark); }
.story-closing .container { max-width: 67rem; text-align: center; }
.story-closing h2 { max-width: 19ch; margin: 1.4rem auto 2rem; }
.story-closing p:not(.story-kicker) { max-width: 64ch; margin: 1.2rem auto 0; }
.story-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 1.5rem; margin-top: 2rem; }
.story-page :is(.story-link, .story-button) { display: inline-flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 1.3rem; padding: .75rem .4rem; font-size: .875rem; font-weight: 500; line-height: 1.5; text-decoration: none; }
.story-page .story-link { margin-top: 1rem; text-decoration: underline; text-underline-offset: .25em; }
.story-page .story-button { padding: .9rem 1.15rem; border: 1px solid var(--color-light); color: var(--color-light); background: var(--color-primary); }
.story-page .story-button--outline { background: transparent; white-space: nowrap; }
.story-actions .story-link { margin-top: 0; }
.story-page :is(.story-route, .story-resource, .story-programme, .story-button, .story-link) { transition: background-color .25s ease, color .25s ease; }
.story-page a:focus-visible { outline: 2px solid var(--site-focus); outline-offset: 4px; }
.story-hero a:focus-visible, .story-closing a:focus-visible { outline-color: var(--color-light); }
.story-page :is(.story-route, .story-resource, .story-programme, .story-link, .story-button--outline):focus-visible { color: var(--color-light); background: var(--color-primary); }
.story-programme:focus-visible .story-kicker { color: inherit; }
.story-button:not(.story-button--outline):focus-visible { color: var(--color-primary); background: var(--color-light); }
@media (hover: hover) and (pointer: fine) {
  .story-page :is(.story-route, .story-resource, .story-programme, .story-link, .story-button--outline):hover { color: var(--color-light); background: var(--color-primary); }
  .story-programme:hover .story-kicker { color: inherit; }
  .story-button:not(.story-button--outline):hover { color: var(--color-primary); background: var(--color-light); }
}
@media (max-width: 1023px) {
  .story-origin-grid, .story-context-grid { grid-template-columns: minmax(0, 1fr); }
  .story-timeline li { grid-template-columns: 6rem minmax(0, .6fr) minmax(0, 1fr); gap: 1.5rem; }
  .story-resource { grid-template-columns: 1.5rem minmax(0, 1fr) minmax(0, 1fr) 1.2rem; gap: 1.3rem; }
}
@media (max-width: 767px) {
  .story-hero { display: block; min-height: 0; padding: calc(var(--site-header-offset, 6rem) + 1.25rem) 0 3rem; }
  .story-hero .story-hero__image { position: relative; inset: auto; }
  .story-hero__image picture { height: auto; }
  .story-hero .story-hero__image img { position: static; height: auto; object-position: center; }
  .story-hero__image figcaption { right: .75rem; bottom: .75rem; font-size: .6875rem; }
  .story-hero__shade { display: none; }
  .story-hero__inner { padding-top: 2rem; }
  .story-hero h1 { margin-bottom: 1.8rem; }
  .story-hero__lower { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .story-page .story-button--outline { justify-self: start; white-space: normal; }
  .story-timeline li { grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); }
  .story-timeline li > p { grid-column: 1 / -1; }
  .story-comparison, .story-flow__steps, .story-route, .story-people { grid-template-columns: minmax(0, 1fr); }
  .story-flow__steps > li:not(:last-child)::after { top: auto; right: auto; bottom: -.8rem; left: 1.2rem; transform: rotate(135deg); }
  .story-flow__steps > li:last-child::before { left: 0; }
  .story-flow .story-flow__branches { margin-top: 2rem; padding-left: 1.25rem; }
  .story-flow__branches::before, .story-flow__branches::after { display: none; }
  .story-flow__branches > li::before { left: -1.25rem; width: 1.25rem; }
  .story-resource { grid-template-columns: 1.3rem minmax(0, 1fr) 1.2rem; gap: .9rem; padding-inline: 0; }
  .story-resource > p { grid-column: 2; }
  .story-resource__arrow { grid-column: 3; grid-row: 1 / 3; }
  .story-actions { align-items: stretch; flex-direction: column; }
  .story-actions a { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .story-page :is(.story-route, .story-resource, .story-programme, .story-button, .story-link) { transition: none; }
}