/* Initiative worlds (includes/shell/world.php): one hero-stage and five-part page for every initiative. Tokens only; story.css supplies the beats.
   Without the scene (touch, reduced motion, saved data, a slow link) the stage is the still SVG with the real text over it; with it (assets/js/shell/world.js
   adds .is-live once the first frame is drawn) the stage is sticky inside a tall track and the scroll position drives the scene. A world sets --world-accent in its own short sheet (assets/css/ds/worlds/<slug>.css, loaded by initiatives_meta()). */
.world { --world-accent: var(--ds-accent); --world-stage-h: calc(100svh - var(--ds-header-h)); position: relative; color: var(--ds-overlay-text); background: var(--ds-overlay-surface); overflow-x: clip; }
.world__track { position: relative; }
.world__sticky { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--ds-space-6); min-block-size: clamp(34rem, 84svh, 52rem); overflow: hidden; isolation: isolate; }
.world__still, .world__live, .world__veil { position: absolute; inset: 0; }
.world__still { transition: opacity var(--ds-dur-slow) var(--ds-ease-gentle); }
.world__svg { display: block; inline-size: 100%; block-size: 100%; }
.world__live canvas { display: block; inline-size: 100%; block-size: 100%; }
.world__veil { pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--ds-overlay-surface) 78%, transparent), color-mix(in srgb, var(--ds-overlay-surface) 55%, transparent) 55%, transparent 90%); }
/* without the scene: the still shows below the text, and the four chapters sit on a plain band under it (never over the picture) */
.world:not(.is-live) .world__sticky { display: grid; grid-template-rows: auto auto; gap: 0; }
.world:not(.is-live) .world__still, .world:not(.is-live) .world__live, .world:not(.is-live) .world__veil, .world:not(.is-live) .world__intro { grid-area: 1 / 1; position: relative; inset: auto; min-inline-size: 0; }
.world:not(.is-live) .world__live:empty { display: none; }
.world:not(.is-live) .world__chapters { grid-row: 2; }
.world:not(.is-live) .world__intro { padding-block-end: clamp(9rem, 30svh, 14rem); }
.world:not(.is-live) .world__chapters { margin: 0; max-inline-size: none; padding: var(--ds-space-5) max(var(--ds-space-4), calc((100% - 72rem) / 2)); background: var(--ds-overlay-surface); }
.world__intro, .world__chapters { position: relative; z-index: 1; }
.world__intro { padding: var(--ds-space-10) var(--ds-space-4) 0; }
.world__intro-in { display: flex; flex-direction: column; gap: var(--ds-space-4); margin-inline: auto; max-inline-size: 72rem; min-inline-size: 0; }
.world .story-eyebrow { color: var(--ds-overlay-accent); }
.world__title { margin: 0; max-inline-size: 16ch; font-family: var(--ds-font-display); font-weight: 600; font-size: var(--ds-text-4xl); line-height: var(--ds-leading-tight); overflow-wrap: break-word; }
.world__lede { margin: 0; max-inline-size: 52ch; font-size: var(--ds-text-lg); line-height: var(--ds-leading-normal); color: var(--ds-overlay-muted); }
.world .story-trust { color: var(--ds-overlay-muted); }
.world .story-trust__item::before { background: var(--ds-overlay-accent); }
.world__hint { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-overlay-muted); }
.world__chapters { list-style: none; margin: 0 auto; padding: 0 var(--ds-space-4) var(--ds-space-6); inline-size: 100%; max-inline-size: 72rem; box-sizing: border-box; display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.world__chapter { display: grid; gap: var(--ds-space-1); padding: var(--ds-space-3) var(--ds-space-4); min-inline-size: 0; background: color-mix(in srgb, var(--ds-overlay-surface) 72%, transparent); border: 1px solid var(--ds-overlay-border); border-radius: var(--ds-radius-md); backdrop-filter: blur(var(--ds-blur-sm)); }
.world__k { font-family: var(--ds-font-display); font-size: var(--ds-text-xl); font-weight: 600; color: var(--ds-overlay-accent); }
.world__t { font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal); color: var(--ds-overlay-text); }
.world__note { margin: 0; padding: var(--ds-space-2) var(--ds-space-4); font-size: var(--ds-text-xs); color: var(--ds-overlay-muted); background: var(--ds-overlay-surface); }

/* the scene is running: a tall track, a sticky stage, the chapters take turns */
@media (min-width: 48rem) {
  .world__intro { padding-inline: var(--ds-space-8); padding-block-start: var(--ds-space-12); }
  .world__chapters { padding-inline: var(--ds-space-8); }
}
.world.is-live .world__track { block-size: calc(var(--world-stage-h) * 4.6); }
.world.is-live .world__sticky { position: sticky; inset-block-start: var(--ds-header-h); block-size: var(--world-stage-h); min-block-size: 0; justify-content: space-between; gap: 0; }
.world.is-live .world__still { opacity: 0; }
.world.is-live .world__veil { background: linear-gradient(to right, color-mix(in srgb, var(--ds-overlay-surface) 70%, transparent), transparent 55%), linear-gradient(to top, color-mix(in srgb, var(--ds-overlay-surface) 55%, transparent), transparent 40%); }
.world.is-live .world__intro { padding-block-start: var(--ds-space-9); opacity: clamp(0, calc(1 - var(--world-p, 0) * 10), 1); transition: opacity var(--ds-dur-base) linear; }
.world.is-live .world__intro.is-away { pointer-events: none; }
.world__pause { position: absolute; z-index: 3; inset-block-start: var(--ds-space-3); inset-inline-end: var(--ds-space-4); min-block-size: 2.75rem; padding: var(--ds-space-2) var(--ds-space-4); font: inherit; font-size: var(--ds-text-sm); color: var(--ds-overlay-text); background: color-mix(in srgb, var(--ds-overlay-surface) 80%, transparent); border: 1px solid var(--ds-overlay-border); border-radius: var(--ds-radius-md); cursor: pointer; }
.world__pause:focus-visible { outline: 2px solid var(--ds-overlay-accent); outline-offset: 2px; }
.world.is-live .world__chapters { display: block; position: absolute; inset-inline: 0; inset-block-end: 0; padding-block-end: var(--ds-space-9); pointer-events: none; }
.world.is-live .world__chapter { position: absolute; inset-inline: var(--ds-space-8); inset-block-end: var(--ds-space-9); max-inline-size: 26rem; opacity: 0; transform: translateY(var(--ds-space-4)); transition: opacity var(--ds-dur-slow) var(--ds-ease-gentle), transform var(--ds-dur-slow) var(--ds-ease-gentle); }
.world.is-live .world__chapter.is-on { opacity: 1; transform: none; }
.world.is-live .world__k { font-size: var(--ds-text-3xl); }
.world.is-live .world__t { font-size: var(--ds-text-md); }
.world.is-live .world__note { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .world__still, .world.is-live .world__chapter, .world.is-live .world__intro { transition: none; }
}

/* the five parts below the stage */
.world-page { position: relative; isolation: isolate; min-inline-size: 0; overflow-x: clip; }   /* isolated: the quiet layer below sits over the shell's page colour, under the page */
.world-page .ds-section__title { color: var(--ds-text); }
/* the heart's quiet layer (includes/shell/chakra.php): it sits behind the transparent parts only, over the world's own page colour, so the layer's own
   black is dropped and only its glow shows; the light theme keeps its parchment (the layer is always dark), and the note ends the last part */
.world-page > .ds-chakra { background: transparent; }
:root[data-theme="light"] .world-page > .ds-chakra { display: none; }
.world-page .ds-chakra-why { margin-block: var(--ds-space-8) 0; }
.world-page .story-eyebrow { color: var(--world-accent, var(--ds-accent)); }
.world-cards, .world-facts, .world-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-4); }
.world-cards > li, .world-facts > li, .world-rows > li { min-inline-size: 0; }
.world-card { display: flex; flex-direction: column; gap: var(--ds-space-2); padding: var(--ds-space-5); background: var(--ds-surface-raised); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); border-block-start: 3px solid var(--world-accent, var(--ds-accent)); }
.world-card__h { margin: 0; font-family: var(--ds-font-display); font-size: var(--ds-text-xl); font-weight: 600; line-height: var(--ds-leading-tight); }
.world-card__p { margin: 0; font-size: var(--ds-text-md); line-height: var(--ds-leading-normal); color: var(--ds-text-muted); }
.world-card__a { margin-block-start: auto; padding-block-start: var(--ds-space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); }
.world-after { margin-block-start: var(--ds-space-6); }
.world-fact { display: grid; gap: var(--ds-space-1); padding: var(--ds-space-5); background: var(--ds-surface-raised); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
.world-fact__n { font-family: var(--ds-font-display); font-size: var(--ds-text-4xl); font-weight: 600; line-height: 1; color: var(--world-accent, var(--ds-accent)); font-variant-numeric: lining-nums tabular-nums; }
.world-fact__l { font-size: var(--ds-text-lg); }
.world-fact__s { font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.world-facts { margin-block-start: var(--ds-space-6); }
.world-row { display: grid; gap: var(--ds-space-1); padding-block: var(--ds-space-4); border-block-end: 1px solid var(--ds-border); }
.world-row__when { font-size: var(--ds-text-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--world-accent, var(--ds-accent)); font-variant-numeric: lining-nums tabular-nums; }
.world-row__what { font-size: var(--ds-text-md); line-height: var(--ds-leading-normal); }
.world-honest { margin: var(--ds-space-6) 0 0; max-inline-size: 65ch; font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
@media (min-width: 48rem) {
  .world-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .world-row { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--ds-space-6); }
}
@media (min-width: 64rem) {
  .world-cards { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}