/* The story over the 3D orchestra. Tokens copied from the site (assets/css/tokens.css), so the page reads as the same brand.
   One committed dark look: the film is the palette. */
:root {
  color-scheme: dark;
  --open-top: 55%;   /* where the opening text sits (top), the loader text too; story.js reads it once */
  --palette-shadow: #1A0E0A; --palette-garnet: #5C0F07; --palette-vermilion: #F1400B; --palette-paper: #FAF8F6; --palette-cream: #FCE8D8;
  --rgb-shadow: 26 14 10; --rgb-paper: 250 248 246;
  --color-bg: var(--palette-shadow); --color-text: var(--palette-paper);
  --color-text-muted: rgb(var(--rgb-paper) / .72); --color-body: var(--color-text-muted); --color-highlight: var(--palette-cream); --color-accent: var(--palette-vermilion);
  --color-line: rgb(var(--rgb-paper) / .36); --color-line-soft: rgb(var(--rgb-paper) / .22); --color-line-faint: rgb(var(--rgb-paper) / .12);
  --color-glass: rgb(var(--rgb-shadow) / .34); --color-glass-strong: rgb(var(--rgb-shadow) / .55);
  --color-ground-deep: #100a07;   /* the darkest point of the red bowl's shadow (measured in the opening shot) */
  --panel-fill: var(--color-glass); --panel-border: var(--color-line-faint);   /* the story panels: every panel border, hover and diagram part uses these */
  --close-size: 32px; --close-icon: 13px; --close-stroke: 1.6;
  --font-serif: "EB Garamond", Garamond, Georgia, serif; --font-sans: "Restart Soft", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --text-ui: .75rem; --text-body: var(--text-ui); --leading-body: 1.6; --text-lede: clamp(1.05rem, 1.45vw, 1.4rem); --text-beat: clamp(1.5rem, 2.3vw, 2.25rem); --text-h3: 1.45rem; --text-h3-sm: 1.25rem;
  --space-3xs: .25rem; --space-2xs: .4rem; --space-xs: .6rem; --space-s: .85rem; --space-m: 1.25rem; --space-l: 1.75rem;
  --gutter: clamp(20px, 7vw, 120px); --nav-top: calc(20px + env(safe-area-inset-top, 0px)); --brand-nudge: 9.5px; --beat-width: 46rem; --panel-width: 20rem; --panel-offset: 72px; --timeline-offset: 30px; --space-segment: 4px; --problems-top: max(84px, 10vh); --problems-fw-size: min(52vh, 36vw);
  --radius-glass: 18px; --radius-pill: 999px; --blur-glass: blur(18px) saturate(1.15);
  --shadow-glass: 0 20px 50px -30px rgb(0 0 0 / .6); --shadow-text: 0 1px 30px rgb(var(--rgb-shadow) / .45);
  --ease-out: cubic-bezier(.16, .84, .24, 1); --ease-in-out: cubic-bezier(.4, 0, .6, 1);
  --dur-fast: .3s; --dur-base: .6s; --dur-slow: .9s; --stagger: .08s;
}
@media (max-width: 720px) { :root { --open-top: 47%; --text-body: .72rem; --problems-top: 96px; --problems-fw-size: 30vh; --panel-offset: calc(92px + env(safe-area-inset-bottom, 0px)); --timeline-offset: calc(36px + env(safe-area-inset-bottom, 0px)); } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--color-bg); color: var(--color-text); overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
p, ul, h1, h2 { margin: 0; }
.stage { position: fixed; inset: 0; overflow: hidden; background: var(--color-bg); touch-action: none; }
#c, #fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fx { pointer-events: none; }
.floor { position: absolute; inset: auto 0 0 0; height: 22vh; pointer-events: none; background: linear-gradient(to top, rgb(var(--rgb-shadow) / .55), rgb(var(--rgb-shadow) / 0)); }
.shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-slow) ease; background: rgb(var(--rgb-shadow) / .55); }
.shade.is-on { opacity: 1; }
.fore { position: absolute; inset: auto 0 0 0; height: 55vh; pointer-events: none; opacity: 0; transition: opacity var(--dur-slow) ease;   /* a dark foreground: the audience recedes */
  background: linear-gradient(to top, var(--color-ground-deep), rgb(16 10 7 / .78) 45%, rgb(16 10 7 / 0));   /* as dark as the deepest shadow on the red bowl, not blurred */
  -webkit-mask-image: linear-gradient(to top, #000 40%, transparent); mask-image: linear-gradient(to top, #000 40%, transparent); }
.fore.is-on { opacity: 1; }

/* ---- beats: centred lines over the film, as on the site ---- */
.beats { position: absolute; inset: 0; pointer-events: none; }
.beat {
  position: absolute; left: 50%; top: 21vh; width: 100%; max-width: min(var(--beat-width), calc(100% - 2 * var(--gutter)));
  text-align: center; text-shadow: var(--shadow-text);
  opacity: 0; visibility: hidden; transform: translate(-50%, 14px); filter: blur(4px);
  transition: opacity .5s ease, transform .6s var(--ease-in-out), filter .5s ease, visibility 0s linear .6s;
}
.beat.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); filter: none;
  transition: opacity .9s ease .25s, transform 1.1s var(--ease-out) .25s, filter .9s ease .25s, visibility 0s; }
.beat--centred { top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.beat[data-beat="question"] { justify-content: flex-start; padding-top: 18vh; }   /* the question sits in the sky, above the stage and the audience (phones too) */
.beat__title { font: 400 var(--text-beat)/1.1 var(--font-serif); letter-spacing: -.005em; text-wrap: balance; }
.beat__lead, .beat__lines li { font: italic 400 var(--text-lede)/1.25 var(--font-serif); color: var(--color-text-muted); text-wrap: balance; }
.beat__lead { margin-top: var(--space-3xs); }
.beat__lines { list-style: none; padding: 0; display: grid; gap: var(--space-3xs); margin-top: var(--space-3xs); }
.beat__lines li, .beat [data-late] { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.beat.is-on [data-late], .beat.is-on .beat__lines li.is-shown { opacity: 1; transform: none; transition: opacity .8s ease, transform .9s var(--ease-out); }
.beat__lines li:nth-child(4) { color: var(--color-text); font-style: normal; }
.beat.is-on [data-late] { transition-delay: 1.1s; }
.beat .lead-late { display: block; }

/* the framework, drawn as on the site: three layers, two pillars (tonight / next season), orchestration as the frame */
.diagram { width: 100%; margin: 0; display: block; }
.panel--wide { width: min(25rem, calc(100vw - 2 * var(--gutter))); }
.diagram rect { fill: none; stroke: var(--color-line); stroke-width: 1; }
.diagram .layer rect { fill: rgb(var(--rgb-shadow) / .38); stroke: var(--color-line-soft); }
.diagram .frame { stroke: var(--color-highlight); stroke-opacity: .7; }
.diagram text { fill: var(--color-text); font: 400 17px var(--font-serif); }
.diagram .desc { fill: var(--color-text-muted); font: italic 400 13px var(--font-serif); }
.diagram .lab { fill: var(--color-highlight); font: 500 10.5px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.diagram .sub { fill: var(--color-text-muted); font: 400 10px var(--font-sans); }
.diagram .pillar .lab, .diagram .pillar .sub { text-anchor: middle; }

/* ---- glass panels, one per part of the framework (bottom left, as on the site) ---- */
.glass { background: var(--panel-fill); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  border: 1px solid var(--panel-border); border-radius: var(--radius-glass); box-shadow: var(--shadow-glass); }
.panels { position: absolute; inset: 0; pointer-events: none; }
.panel {
  position: absolute; left: var(--gutter); bottom: var(--panel-offset); width: min(var(--panel-width), calc(100vw - 2 * var(--gutter)));
  padding: var(--space-m); opacity: 0; visibility: hidden; transform: translate3d(0, 18px, 0) scale(.98);
  transition: opacity .45s ease, transform .55s var(--ease-in-out), visibility 0s linear .55s;
}
.panel.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .7s ease, transform var(--dur-slow) var(--ease-out), visibility 0s; }
.panel > * { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease; }
.panel.is-on > * { opacity: 1; transform: none; transition: opacity var(--dur-base) ease, transform .7s var(--ease-out); }
.panel.is-on > :nth-child(1) { transition-delay: calc(var(--stagger) * 2); }
.panel.is-on > :nth-child(2) { transition-delay: calc(var(--stagger) * 3); }
.panel.is-on > :nth-child(3) { transition-delay: calc(var(--stagger) * 4); }
.panel.is-on > :nth-child(4) { transition-delay: calc(var(--stagger) * 5); }
.panel.is-on > :nth-child(5) { transition-delay: calc(var(--stagger) * 6); }
.panel__kicker { margin-bottom: var(--space-s); font: 500 var(--text-ui)/1 var(--font-sans); color: var(--color-highlight); }
.panel__title { margin-bottom: var(--space-s); font: 400 var(--text-h3)/1.15 var(--font-serif); text-wrap: balance; }
.panel__body { font: 400 var(--text-body)/var(--leading-body) var(--font-sans); color: var(--color-body); }
.panel__org { margin-top: var(--space-s); padding-top: var(--space-s); font: 400 var(--text-body)/var(--leading-body) var(--font-sans); color: var(--color-body); }
.panel__extra { margin-top: var(--space-xs); font: italic 400 .95rem/1.35 var(--font-serif); color: var(--color-highlight); }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-s); padding: 0; list-style: none; }
.tag { padding: .3rem .65rem; font: 400 var(--text-ui)/1 var(--font-sans); color: var(--color-text-muted); border: 1px solid var(--color-line-faint); border-radius: var(--radius-pill); white-space: nowrap; }
.tag--run { border-color: rgb(250 248 246 / .3); color: var(--color-text); }

/* ---- caption: what is on screen during a sequence ---- */
.caption { position: absolute; left: 50%; top: max(84px, 11vh); transform: translate(-50%, 6px); opacity: 0; pointer-events: none; text-align: center;
  transition: opacity .4s ease, transform .5s var(--ease-out); text-shadow: var(--shadow-text); }
.caption.is-on { opacity: 1; transform: translate(-50%, 0); }
.caption__text { display: block; font: italic 400 clamp(1.2rem, 2vw, 1.7rem)/1.15 var(--font-serif); }

/* ---- problems: four left, four right, the framework in the middle (later the navigation) ---- */
.problems { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 48px);
  padding: 90px var(--gutter) calc(var(--timeline-offset) + 48px); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.problems.is-on { opacity: 1; visibility: visible; transition: opacity .9s ease .2s, visibility 0s; }
.problems.is-on .prob, .problems.is-on .framework-btn { pointer-events: auto; }
.problems__col { display: grid; gap: 12px; max-width: 22rem; }
.problems__col--left { justify-self: start; }
.problems__col--right { justify-self: end; }
.prob { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding: 7px 14px; border: 1px solid transparent; border-radius: var(--radius-glass); text-align: left; opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, border-color .2s ease, background .2s ease; }
.problems.is-on .prob { opacity: 1; transform: none;   /* the cards come in one after another (--i set per card); hover reacts at once */
  transition: opacity .7s ease calc(.25s + var(--i, 0) * .06s), transform .8s var(--ease-out) calc(.25s + var(--i, 0) * .06s), border-color .15s ease, background-color .15s ease; }
.prob:hover, .prob:focus-visible, .prob.is-active { border-color: var(--panel-border); background-color: var(--panel-fill); }
.prob:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 2px; }
.prob__line { display: block; font: 400 1.05rem/1.3 var(--font-serif); color: var(--color-text); }
.framework-btn { all: unset; cursor: pointer; justify-self: center; display: grid; place-items: center; gap: 6px; text-align: center; padding: 22px 30px; border-radius: 999px;
  border: 1px solid var(--panel-border); background: var(--panel-fill); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  opacity: 0; transform: scale(.96); transition: opacity .4s ease, transform .5s var(--ease-out), background .2s ease; }
.problems.is-on .framework-btn { opacity: 1; transform: none; transition: opacity .9s ease .15s, transform 1s var(--ease-out) .15s, background .2s ease; }
.framework-btn:hover { background: rgb(92 15 7 / .55); }
.framework-btn:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 3px; }
.framework-btn b { font: 400 clamp(1.5rem, 2.6vw, 2.2rem)/1 var(--font-serif); }
.framework-btn span { font: 400 var(--text-ui)/1.3 var(--font-sans); color: var(--color-text-muted); }

/* ---- chrome ---- */
.brand { all: unset; cursor: pointer; position: fixed; z-index: 4; top: calc(var(--nav-top) + var(--brand-nudge)); left: var(--gutter); font: 500 .6875rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--color-text); }
.brand:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 3px; }
/* ---- timeline: the story navigator. One segment per scroll step; the active one fills as its steps play ---- */
.timeline {
  --timeline-bar-width: var(--panel-width); --timeline-seg-min: 24px; --timeline-hit: 32px; --timeline-line: 1px; --timeline-line-hover: 3px;
  --timeline-dot-size: 5px;
  position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: calc(var(--timeline-offset) - (var(--timeline-hit) - var(--text-ui)) / 2);
  display: flex; align-items: center; gap: var(--space-s); pointer-events: none;
  font: 400 var(--text-ui)/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.timeline__bar { pointer-events: auto; display: flex; gap: var(--space-segment); width: var(--timeline-bar-width); }
.timeline__seg { all: unset; cursor: pointer; flex: 1 1 0; min-width: var(--timeline-seg-min); height: var(--timeline-hit); display: flex; align-items: center; }
.timeline__line { position: relative; width: 100%; height: var(--timeline-line); background: var(--color-line); transition: height var(--dur-fast) ease; }
.timeline__seg:hover .timeline__line, .timeline__seg:focus-visible .timeline__line { height: var(--timeline-line-hover); }
.timeline__fill { position: absolute; inset: 0; background: var(--color-text); transform-origin: 0 0; transform: scaleX(0); }
.timeline__dot { position: absolute; top: 50%; width: var(--timeline-dot-size); height: var(--timeline-dot-size); margin: calc(var(--timeline-dot-size) / -2) 0 0 calc(var(--timeline-dot-size) / -2);
  border-radius: 50%; background: var(--color-highlight); }
.timeline__label { color: var(--color-text); }
.timeline__skip { all: unset; pointer-events: auto; cursor: pointer; font: 500 var(--text-ui)/1 var(--font-sans); color: var(--color-text); opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) ease, visibility 0s linear var(--dur-fast); }
.timeline__skip.is-on { opacity: .82; visibility: visible; transition: opacity var(--dur-fast) ease, visibility 0s; }
.timeline__skip.is-on:hover { opacity: 1; }
.timeline__seg:focus-visible, .timeline__skip:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 3px; border-radius: 4px; }
.loading { position: absolute; right: var(--gutter); bottom: var(--timeline-offset); pointer-events: none; font: 400 var(--text-ui)/1 var(--font-sans); color: var(--color-text-muted); }
.loading, .loading[hidden] { display: none; }
/* loader: the opening photo and text, with a percentage, until the whole scene, people included, is ready */
.loader { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--color-bg); transition: opacity .9s ease, visibility 0s linear .9s; }
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.is-ready .brand, .is-ready .meet, .is-ready .timeline { animation: ui-in 1.4s ease .5s backwards; }   /* once loaded, the interface fades in after the loader */
@keyframes ui-in { from { opacity: 0; } }
/* poster: the opening view as a picture, shown at once while the 3D scene loads behind it */
.loader__open { position: absolute; left: 50%; top: var(--open-top); transform: translate(-50%, 0); width: 100%; max-width: min(var(--beat-width), calc(100% - 2 * var(--gutter))); text-align: center; text-shadow: var(--shadow-text); }   /* where the opening beat sits */
.loader__open > * { opacity: 0; transform: translateY(14px); filter: blur(4px); transition: opacity .9s ease, transform 1.1s var(--ease-out), filter .9s ease; }   /* animates in once the fonts are there (script in head.html) */
.loader.is-in .loader__open > * { opacity: 1; transform: none; filter: none; }
.loader.is-in .loader__open i { transition-delay: .2s; }
.loader.is-in .loader__pct { transition-delay: .45s; }
.loader__open b { display: block; font: 400 var(--text-beat)/1.1 var(--font-serif); letter-spacing: -.005em; text-wrap: balance; color: var(--color-text); }
.loader__open i { display: block; margin-top: var(--space-3xs); font: italic 400 var(--text-lede)/1.25 var(--font-serif); text-wrap: balance; color: var(--color-text-muted); }
.loader__pct { display: block; margin-top: var(--space-m); font: 400 var(--text-lede)/1.25 var(--font-serif); font-variant-numeric: lining-nums tabular-nums; color: var(--color-body); }   /* serif numbers, size of the line above it, colour of the panel body text */
.is-loading .beat { visibility: hidden; }

@media (max-width: 720px) {
  .beat:not(.beat--centred) { top: 13vh; }
  .problems__col { padding: var(--space-s) var(--space-m); background: var(--panel-fill); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); border: 1px solid var(--panel-border); border-radius: var(--radius-glass); }   /* phones: the list lies over the stage, so it sits on a panel */
  .timeline { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label skip" "bar bar"; column-gap: var(--space-s); row-gap: var(--space-3xs); }
  .timeline__label { grid-area: label; } .timeline__skip { grid-area: skip; }
  .timeline__bar { grid-area: bar; width: auto; }
  .panel { left: var(--gutter); right: var(--gutter); width: auto; padding: var(--space-s) var(--space-m); }
  .panel__title { max-width: 12em; font-size: var(--text-h3-sm); }   /* wraps sooner on phones: shorter lines read better */
  .panel__org { margin-top: var(--space-2xs, .5rem); padding-top: var(--space-2xs, .5rem); }
  .beat[data-beat="melody"] { top: 25vh; }
  .panel--wide { padding: var(--space-s); }
  .caption { top: 104px; }
  .problems { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; align-content: start; align-items: start; gap: 8px; padding: 96px 14px calc(var(--timeline-offset) + 64px); overflow: auto; }
  .framework-btn { grid-column: 1 / -1; grid-row: 1; margin-bottom: 8px; padding: 14px 24px; }
  .problems__col { display: contents; }
  .prob { padding: 10px 12px; }
  .prob__line { font-size: .9rem; }
    .loading { right: auto; left: var(--gutter); bottom: calc(var(--timeline-offset) + 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .is-ready .brand, .is-ready .meet, .is-ready .timeline { animation: none; }
  .loader__open > * { transform: none; filter: none; transition: opacity .3s ease; }
  .beat, .beat.is-on, .panel, .panel.is-on, .caption, .problems, .prob, .drawer, .drawer.is-on { transition-duration: .01s !important; transition-delay: 0s !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---- the framework figure (B2): big over the concert, then small in the corner as a table of contents ---- */
.fw { position: absolute; z-index: 3; pointer-events: none; overflow: visible; opacity: 0; visibility: hidden;
  left: 50%; top: 56%; width: min(64vh, 82vw); height: auto; transform: translate(-50%, -50%);
  transition: opacity .7s ease, left 1s var(--ease-in-out), top 1s var(--ease-in-out), width 1s var(--ease-in-out), transform 1s var(--ease-in-out), visibility 0s linear .7s; }
.fw.is-on { opacity: 1; visibility: visible; transition: opacity .7s ease, left 1s var(--ease-in-out), top 1s var(--ease-in-out), width 1s var(--ease-in-out), transform 1s var(--ease-in-out), visibility 0s; }
.fw.is-side { left: 72%; top: calc(var(--problems-top) + 2.3rem + var(--problems-fw-size) * .4375); width: var(--problems-fw-size); }   /* top level with the first problem */
.fw-glass { position: absolute; z-index: 3; left: 0; top: 0; border-radius: 50%; pointer-events: none; opacity: 0;   /* the diagram's circle as glass, like the panels; story.js keeps it on the circle */
  background: var(--color-glass); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); }
.fw > circle { fill: none; }   /* the glass behind it is the fill */
.fw .ring { stroke: var(--panel-border); }
.fw .part { fill: var(--panel-fill); stroke: var(--panel-border); stroke-width: 1.5; }   /* every part looks like a story panel: no coloured parts */
.fw .arc { fill: none; stroke: var(--color-text); stroke-width: 2.4; }   /* drawn by story.js (arcTick): the line and its head move together */
.fw .tip { fill: var(--color-text); }
.fw .sub { font-size: 17px; font-style: italic; opacity: .78; }
.fw .lab.lab--big { font-size: 16px; }
.fw .k { transition: opacity .2s ease; }
.fw text { font-family: var(--font-serif); fill: var(--color-text); }
.fw .lab { font-family: var(--font-sans); font-size: 13px; letter-spacing: .14em; }
.beat--top { top: max(70px, 8vh); }
.problems { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; padding-top: var(--problems-top); }
.problems__col { display: grid; gap: 8px; max-width: 24rem; justify-self: start; }
.problems__head { margin-bottom: var(--space-xs); font: 400 var(--text-h3)/1.15 var(--font-serif); color: var(--color-text); text-shadow: var(--shadow-text); }
/* side panels: a problem from the left, a framework part from the right (content.js) */
.drawer { --drawer-width: min(30rem, calc(100vw - 2 * var(--gutter)));
  position: absolute; z-index: 5; top: calc(var(--nav-top) + 52px); max-height: calc(100% - var(--nav-top) - 52px - var(--timeline-offset) - 40px); width: var(--drawer-width); box-sizing: border-box;   /* as tall as its content; scrolls beyond the room above the timeline */
  overflow: auto; overscroll-behavior: contain; padding: var(--space-l); opacity: 0; visibility: hidden; outline: none;
  transition: transform .5s var(--ease-out), opacity .35s ease, visibility 0s linear .5s; }
.drawer.glass { background: var(--color-glass-strong); }
.drawer--left { left: var(--gutter); transform: translateX(calc(-100% - var(--gutter))); }
.drawer--right { right: var(--gutter); transform: translateX(calc(100% + var(--gutter))); }
.drawer.is-on { opacity: 1; visibility: visible; transform: none; transition: transform .5s var(--ease-out), opacity .35s ease, visibility 0s; }
.drawer__kicker { margin-bottom: var(--space-s); font: 500 var(--text-ui)/1 var(--font-sans); color: var(--color-highlight); }
.drawer__title { margin: 0; font: 400 var(--text-h3)/1.2 var(--font-serif); color: var(--color-text); text-wrap: balance; }
.drawer__question { margin-top: var(--space-xs); font: italic 400 1.05rem/1.35 var(--font-serif); color: var(--color-highlight); }
.drawer__h { margin: var(--space-l) 0 var(--space-2xs); font: 500 .62rem/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--color-highlight); }
.drawer__text { font: 400 var(--text-body)/var(--leading-body) var(--font-sans); color: var(--color-body); }
.drawer__text + .drawer__text { margin-top: var(--space-s); }
.drawer__question + .drawer__text { margin-top: var(--space-s); }
.drawer__problems { display: grid; gap: var(--space-2xs); }
.drawer__problem { all: unset; cursor: pointer; display: block; padding: var(--space-xs) var(--space-s); border: 1px solid var(--color-line-faint); border-radius: var(--radius-glass);
  font: 400 .95rem/1.3 var(--font-serif); color: var(--color-text); transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.drawer__problem { border-color: var(--panel-border); }
.drawer__problem:hover { border-color: var(--color-line); background-color: var(--panel-fill); }
.drawer__problem:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 2px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }   /* a framework part's related concepts: quiet labels, not links */
.pill { padding: 5px 10px; border: 1px solid var(--color-line-soft); border-radius: var(--radius-pill); font: 400 .7rem/1 var(--font-sans); color: var(--color-text-muted); }
.fw.has-focus .k:not(.is-lit):not(:hover) { opacity: .2 !important; }   /* the parts the open panel is about stay lit */
@media (max-width: 720px) {
  .drawer { --drawer-width: auto; left: var(--gutter); right: var(--gutter); top: 50%; translate: 0 -50%; max-height: calc(100% - 2 * (var(--timeline-offset) + 40px)); padding: var(--space-m); }   /* phones: centred on the screen both ways (equal gutters; translate leaves the slide-in transform alone) */
}
.problems__head--fw { position: absolute; left: 72%; top: var(--problems-top); transform: translateX(-50%); white-space: nowrap; }
@media (max-height: 800px) and (min-width: 721px) {   /* low laptop screens: tighter cards, so the list ends above the timeline */
  .prob { padding: 7px 12px; } .prob__line { font-size: .95rem; }
}
.panel__extra { opacity: 0; transition: opacity .8s ease; }
.panel.is-on .panel__extra.is-late { opacity: 1; }
@media (max-width: 720px) {
  .fw { top: 52%; width: min(86vw, 50vh); }
  .fw.is-side { left: 50%; transform: translate(-50%, calc(-50% - var(--problems-scroll, 0px))); }   /* phones: the framework scrolls with the list below it */
  .fw.is-side.is-scrolling { transition: opacity .7s ease, visibility 0s; }   /* follows the finger directly while scrolling */
  .problems__head { font-size: var(--text-h3-sm); }
  .problems__head--fw { left: 50%; transform: translate(-50%, calc(-1 * var(--problems-scroll, 0px))); }
  .problems { grid-template-columns: 1fr; padding-top: calc(var(--problems-top) + 2.3rem + var(--problems-fw-size) * .875 + 44px); }   /* below the framework */
  .problems { bottom: calc(var(--timeline-offset) + 52px); padding-bottom: var(--space-m);   /* the list scrolls above the timeline, not behind it */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); }
  .problems__col { display: grid; }
  .problems.is-on { pointer-events: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }   /* phones: the list below the framework scrolls */
}

/* ---- part 4: The Collective, one closing view ---- */
.coll { position: absolute; inset: 0; pointer-events: none; }
.coll__page { position: absolute; left: 50%; top: 50%; width: min(58rem, calc(100% - 2 * var(--gutter))); max-height: calc(100% - 150px); overflow: auto;
  padding: 30px 34px 26px; opacity: 0; visibility: hidden; transform: translate(-50%, calc(-50% + 16px)); transition: opacity .4s ease, transform .5s ease, visibility 0s linear .4s; }
.coll.is-on .coll__page { opacity: 1; visibility: visible; transform: translate(-50%, -50%); pointer-events: auto; transition: opacity .9s ease .3s, transform 1s var(--ease-out) .3s, visibility 0s; }
/* close: one cross for every panel (About, problems, framework parts); placement by modifier */
.close { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: var(--close-size); height: var(--close-size); border-radius: 50%;
  color: var(--color-text); transition: color var(--dur-fast) ease; }
.close svg { width: var(--close-icon); height: var(--close-icon); fill: none; stroke: currentColor; stroke-width: var(--close-stroke); stroke-linecap: round; }
.close:hover { color: var(--color-highlight); }
.close:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 3px; }
.close--corner { position: absolute; top: 20px; right: 25px; }   /* level with the kicker, its right edge on the text edge */
.close--sticky { position: sticky; top: 0; float: right; margin: -8px -8px 0 var(--space-s); }   /* stays in view while the panel scrolls */
.coll__kicker { margin-bottom: 10px; font: 500 var(--text-ui)/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--color-highlight); }
.coll__title { margin: 0 0 10px; font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.1 var(--font-serif); color: var(--color-text); }
.coll__intro { max-width: 46rem; font: 400 var(--text-body)/var(--leading-body) var(--font-sans); color: var(--color-body); }
.coll__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin: 26px 0 24px; }
.coll__col h3 { margin: 0 0 8px; font: 400 1.25rem/1.2 var(--font-serif); color: var(--color-text); }
.coll__col p { font: 400 var(--text-body)/var(--leading-body) var(--font-sans); color: var(--color-body); }
.coll__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-s); }
.link-pill { all: unset; cursor: pointer; padding: .4rem .7rem; border: 1px solid var(--color-line); border-radius: var(--radius-pill); font: 500 var(--text-ui)/1 var(--font-sans); color: var(--color-text);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.link-pill:hover { color: var(--color-highlight); border-color: var(--color-highlight); }
.link-pill:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 2px; }
.coll__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.coll__ask { font: 400 clamp(1.4rem, 2.2vw, 1.9rem)/1 var(--font-serif); color: var(--color-text); }
.coll__btn, .meet { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .75rem;
  font: 500 .75rem/1 var(--font-sans); color: var(--color-text); background: none; border: 1px solid var(--color-text); border-radius: var(--radius-pill); text-decoration: none;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease, opacity .5s ease; }
.coll__btn:hover, .meet:hover { color: var(--color-highlight); border-color: var(--color-highlight); }
.coll__btn:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 3px; }
.coll__mail { all: unset; cursor: pointer; display: flex; align-items: baseline; gap: .6em; font: normal 400 .78rem/1 var(--font-sans); letter-spacing: .04em; color: var(--color-text-muted); transition: color var(--dur-fast) ease; }
.coll__mail:hover, .coll__mail:focus-visible { color: var(--color-text); }
.coll__mail:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 3px; border-radius: 4px; }
.coll__copy { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-highlight); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease; }   /* "Copy" on hover, "Copied" after a click */
.coll__mail:hover .coll__copy, .coll__mail:focus-visible .coll__copy, .coll__mail.is-copied .coll__copy { opacity: 1; transform: none; }
.meet { position: fixed; z-index: 4; top: var(--nav-top); right: var(--gutter); }
.meet:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 3px; }
.meet.is-hidden { opacity: 0; pointer-events: none; }
.is-loading .meet { opacity: 0; pointer-events: none; }
.fw.is-side .k { cursor: pointer; pointer-events: auto; }
.fw.is-coll { left: 72%; top: 50%; width: min(60vh, 40vw); }
@media (max-width: 720px) {
  .coll__page { max-height: 66vh; padding: 20px 18px; }
  .close--corner { top: 9px; right: 9px; }
  .coll__cols { grid-template-columns: 1fr; gap: 16px; margin: 16px 0; }
  .coll__cta { position: sticky; bottom: -20px; margin: 0 -18px -20px; padding: 14px 18px 16px; gap: 8px 14px; background: var(--color-bg); border-top: 1px solid var(--panel-border); }   /* phones: the only divider, above the sticky contact row */
  .coll__ask { font-size: 1.2rem; } .coll__contact { flex-basis: 100%; }
  .fw.is-coll { left: 50%; top: 30%; width: min(80vw, 38vh); }
}
.panel__org b { display: block; font-weight: 400; }
.panel__org .org-chg { max-height: 0; overflow: hidden; opacity: 0; transition: opacity .8s ease, max-height .8s ease; }
.panel__org .org-chg.is-late { max-height: 6em; opacity: 1; margin-top: .45em; }