/* The document flows until narrative.js confirms there is room to pin it.
   Scroll is always native. Only artwork scales; reading text stays still. */
.narrative { position: relative; margin: 0; }
.chapter-frame { padding: 44px var(--gutter) 28px; max-width: 1800px; margin: auto; }
.chapter-heading .eyebrow { margin: 0 0 16px; }
.narrative-hero { background: var(--ground-bot); }
.hero-scene { position: relative; min-height: 0; }
/* One persistent wordmark above the copy, beside the changing screenshots. */
.narrative-hero .khorlo-mark { position: absolute; top: 48px; left: 0; width: calc((100% - 5vw) * .35); font-size: clamp(44px, 5.4vw, 82px); line-height: .9; margin: 0; letter-spacing: -.035em; text-align: left; }
.hero-view:first-child .hero-copy { padding-top: clamp(90px, 8vw, 120px); }
.hero-copy { align-self: start; }
.hero-view { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 5vw; align-items: center; padding: 48px 0; }
.hero-copy .lede { font-size: clamp(20px, 1.85vw, 28px); line-height: 1.45; max-width: 26em; margin: 0; text-wrap: pretty; }
.hero-copy .eyebrow { color: var(--orange); margin-bottom: 18px; }
.hero-art { margin: 0; min-width: 0; }
.hero-art img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-up); border-radius: 6px; box-shadow: 0 24px 60px #0003; }
/* The poster stays local; YouTube loads when the first slide is visible. */
/* Under the video: the screenshot swap on the left, YouTube on the right. */
.hero-video-links { display: flex; justify-content: space-between; gap: 16px; width: 100%; margin-top: 10px; font-size: 13px; }
.hero-video-links a, .hero-screenshot-link { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.hero-video-links a:hover, .hero-screenshot-link:hover { color: var(--orange-hi); }
/* The screenshot takes the video's place in the same frame; the link swaps them. */
/* Outranks .hero-art img, which would otherwise show it under the video. */
.hero-video:not([data-screenshot]) .hero-screenshot { display: none; }
.hero-video[data-screenshot] > :not(.hero-screenshot) { display: none; }
.hero-video[data-screenshot] .hero-screenshot { display: block; width: 100%; height: auto; }
.hero-video-link { display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--orange); cursor: pointer; }
.hero-video-link:hover { color: var(--orange-hi); }
.hero-video-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }
.hero-video-poster { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
/* The supplied 16:9 poster contains a 4:3 capture with black side bars. Crop
   those in layout, preserving the original asset and all instrument controls. */
.hero-art.hero-video-art .hero-video-poster img { width: 100%; height: 100%; max-height: none; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; }
.hero-video-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--orange); box-shadow: 0 4px 24px #0008; }
.hero-video-link:hover .hero-video-play { background: var(--orange-hi); }
.hero-video [hidden] { display: none; }
.hero-video { position: relative; width: 100%; min-width: 0; }
.hero-video-player { position: relative; aspect-ratio: 4 / 3; background: #000; overflow: hidden; }
.hero-video-player iframe { display: block; width: 100%; height: 100%; min-height: 200px; border: 0; }
/* The 4:3 instrument occupies the middle 75% of this 4:3 player: its
   source side bars plus YouTube's top/bottom padding. Crop both together. */
/* The frame is laid out at twice its visual size and scaled back down. YouTube
   picks the stream from the player's layout size (there is no API to ask for
   a tier), and at the visual size it served 720p, which the crop then
   stretched: soft (Aaron, 2026-09-20). Laid out at ~2x it serves 1440p. */
.hero-video[data-video-ready]:not([data-video-full]) iframe { position: absolute; width: 266.666667%; height: 266.666667%; left: -16.666667%; top: -16.666667%; transform: scale(.5); transform-origin: 0 0; pointer-events: none; }
/* On a touch screen the cropped frame still takes taps: YouTube's centre
   play/pause is inside the crop; its bottom bar is behind the expand button. */
.hero-video[data-video-native][data-video-ready] iframe { pointer-events: auto; }
.hero-video-controls { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 4px; padding: 4px; border-radius: 24px; background: #101010c9; }
.hero-video-controls button { display: grid; place-items: center; width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.hero-video-controls button:hover { background: var(--orange); }
.hero-video-controls button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.hero-video-controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.video-play-icon, .video-audible-icon { display: none; }
.hero-video:not([data-video-playing]) .video-play-icon, .hero-video[data-video-audible] .video-audible-icon { display: block; }
.hero-video:not([data-video-playing]) .video-pause-icon, .hero-video[data-video-audible] .video-muted-icon { display: none; }
.hero-video[data-video-full] .hero-video-controls { bottom: auto; top: 10px; }
@media (max-width: 560px) {
  .hero-video-play { width: 52px; height: 52px; }
}
.chapter-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 24px; border-top: 1px solid var(--rule-up); }
.narrative-hero .chapter-footer { border-top: 0; }
.chapter-views { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 36px); }
.chapter-views a, .chapter-next, .chapter-count { font: 500 11px/1.5 var(--mono); letter-spacing: .09em; color: var(--muted); }
.chapter-views a { position: relative; padding: 10px 0; }
.chapter-views a[aria-current="true"] { color: var(--ink); }
.chapter-views a[aria-current="true"]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--orange); }
.chapter-next { color: var(--ink); white-space: nowrap; }
.chapter-next span { margin-left: 16px; color: var(--orange); }
.chapter-progress { display: none; }
/* The view links and the counter belong to a pinned chapter: they jump
   within its scroll travel, which a chapter in flow does not have. */
.narrative:not([data-pinned]) .chapter-views, .narrative:not([data-pinned]) .chapter-count { display: none; }
.narrative-how { background: var(--stage); color: var(--stage-ink); --ring-line: var(--stage-line); --ring-mark: var(--stage-mark); }
.chapter-heading h2 { font-size: clamp(40px, 5.5vw, 82px); line-height: 1; letter-spacing: -.055em; margin: 0; font-weight: 400; }
.mechanic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 6vw; padding: 48px 0; }
.mechanic-caption { font-size: clamp(22px, 2.35vw, 34px); line-height: 1.4; margin: 0 0 30px; text-wrap: pretty; }
.mechanic-art { width: 100%; max-width: 720px; aspect-ratio: 1; }
.mechanic-art svg { display: block; width: 100%; height: 100%; }
html:not(.js) .mechanic-art { display: none; }
html:not(.js) .mechanic { grid-template-columns: 1fr; max-width: 850px; }
.narrative-how + .wrap { padding-top: var(--s7); }
[data-view], #how { scroll-margin-top: calc(var(--barh) + 24px); }

/* Pin wherever there is height for it; narrative.js uses the same query and
   then pins only the chapters whose content fits the frame on this device. */
@media (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .narrative[data-pinned] { height: 420svh; }
  .narrative-how[data-pinned] { height: 390svh; }
  [data-pinned] .chapter-frame { position: sticky; top: var(--narrative-bar, 74px); height: calc(100svh - var(--narrative-bar, 74px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding-top: clamp(24px, 3vh, 44px); overflow: clip; }
  .narrative-hero[data-pinned] .chapter-frame { grid-template-rows: minmax(0, 1fr) auto; }
  [data-pinned] .hero-scene { display: grid; align-self: center; }
  [data-pinned] .hero-views { display: grid; min-height: 0; }
  [data-pinned] .khorlo-mark { top: 24px; }
  [data-pinned] .hero-copy { padding-top: clamp(90px, 8vw, 120px); }
  [data-pinned] .hero-view { grid-area: 1 / 1; min-height: 0; padding: 24px 0; }
  [data-pinned] .hero-art { min-height: 0; height: auto; align-self: start; display: flex; align-items: flex-start; justify-content: center; transform: scale(var(--art-scale, .94)); transform-origin: center top; }
  [data-pinned] .hero-video-art { flex-direction: column; align-items: center; }
  [data-pinned] .hero-art img { width: auto; height: auto; max-width: 100%; max-height: calc(100svh - var(--narrative-bar, 74px) - 150px); object-fit: contain; }
  .narrative-hero[data-pinned] .hero-video, .narrative-hero[data-pinned] .hero-video-links { max-width: calc((100svh - var(--narrative-bar, 74px) - 210px) * 1.333333); }
  [data-pinned] [data-view] { opacity: var(--view-opacity, 0); pointer-events: none; }
  [data-pinned] [data-view][data-active] { pointer-events: auto; }
  [data-pinned] .mechanic { min-height: 0; padding: 20px 0; }
  [data-pinned] .mechanic-copy { display: grid; }
  [data-pinned] .mechanic-caption { grid-area: 1 / 1; align-self: center; margin: 0; }
  [data-pinned] .mechanic-art { width: min(100%, 60svh); justify-self: center; transform: scale(var(--ring-scale, .9)); }
  [data-pinned] .chapter-footer { padding-top: 14px; }
  [data-pinned] .chapter-progress { display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--rule); }
  [data-pinned] .chapter-progress span { display: block; height: 100%; background: var(--orange); transform-origin: left; transform: scaleX(var(--chapter-progress, 0)); }
  /* Native timeline for the progress rail where available. The JS value is
     the fallback; these never both control the same rendered transform. */
  @supports (animation-timeline: view()) {
    [data-pinned] { view-timeline-name: --chapter; view-timeline-axis: block; }
    [data-pinned] .chapter-progress span { animation: chapter-progress linear both; animation-timeline: --chapter; animation-range: contain; }
    @keyframes chapter-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}
/* The hero needs more horizontal room than the other chapters. Stack it
   earlier and use its natural height instead of centering a small two-column
   scene in a tall viewport. */
@media (max-width: 1179px), (max-height: 679px) {
  .narrative-hero .chapter-frame { padding-top: 36px; }
  .narrative-hero .khorlo-mark { position: static; width: auto; font-size: clamp(44px, 8vw, 72px); margin-top: 20px; }
  .hero-view:first-child .hero-copy { padding-top: 0; }
  .hero-view { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; border-bottom: 1px solid var(--rule); }
  .hero-copy .lede { max-width: 38em; }
  .hero-art { max-width: 760px; }
  /* Stacked and pinned: the wordmark is in flow, so no padding clears it, and
     the views share one cell, so no rule between them. */
  [data-pinned] .hero-copy { padding-top: 0; }
  [data-pinned] .hero-view { border-bottom: 0; }
}
@media (max-width: 959px), (max-height: 679px) {
  .chapter-frame { padding-top: 36px; }
  .chapter-footer { flex-wrap: wrap; border-top: 0; }
  .chapter-next { margin-left: auto; }
  .mechanic { grid-template-columns: 1fr; gap: 10px; padding-bottom: 0; }
  .mechanic-caption { max-width: 32em; }
  .mechanic-art { max-width: 480px; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-views, .chapter-count { display: none; }
}
@media print {
  .narrative[data-pinned] { height: auto; }
  [data-pinned] .chapter-frame { position: static; height: auto; display: block; }
  [data-pinned] .hero-views, [data-pinned] .mechanic-copy { display: block; }
  [data-pinned] [data-view] { opacity: 1; }
  .chapter-footer, .chapter-progress { display: none; }
}

/* The later chapters use shorter holds. All content remains ordinary document
   flow until the engine verifies that the whole panel fits in the window. */
.narrative-panel .chapter-body { margin: 0; }
.narrative-panel .chapter-frame { padding: 48px 0; }
.narrative-panel .about { border: 0; padding-top: 0; }
.narrative-panel .about .lede { font-size: clamp(22px, 2.8vw, 38px); line-height: 1.45; }
.narrative-appearance .chapter-frame { padding-inline: 0; }
.narrative-appearance .showcase { margin-bottom: 32px; }
.narrative-appearance .showcase-figs { align-self: center; }
.showcase-say [data-appearance-copy] + [data-appearance-copy] { margin-top: var(--s5); }
.narrative-appearance .shot img { display: block; width: 100%; height: auto; }
.demos-band { position: relative; margin-bottom: 0; padding: clamp(48px, 8vw, 120px) 0 clamp(24px, 3vw, 40px); }
/* The sound chapter shares How it works' surface and heading tokens. Extend
   the surface beyond the content column without changing card geometry. */
.narrative-demos { isolation: isolate; color: var(--stage-ink); }
#demos { scroll-margin-top: var(--narrative-bar, var(--barh)); }
.narrative-demos::before { content: ''; position: absolute; z-index: -1; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--stage); }
.demos-intro { margin-bottom: 40px; }
.demos-intro .lede { font-size: clamp(18px, 1.5vw, 22px); max-width: 44ch; margin-top: 32px; color: var(--stage-ink); }
/* Clip horizontal travel without creating a nested scroll container. */
main { overflow-x: clip; }
@media (min-width: 1180px) {
  .demos-content { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 5vw; align-items: start; }
  .demos-intro { position: sticky; top: calc(var(--narrative-bar, 74px) + 48px); margin: 0; }
  .demos-band .example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .demos-band .example { padding: 24px; }
  .demos-band .example h3 { font-size: 22px; }
  .demos-band .description { min-height: 4.5em; font-size: 14px; margin-block: 14px 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-sound-ready] .example { opacity: var(--card-opacity, 1); transform: translateX(calc(var(--card-side, 0) * var(--card-offset, 0px))); }
  /* Keep a player steady while it is focused or playing. */
  [data-sound-ready] .example:focus-within,
  [data-sound-ready] .example[data-state="playing"] { opacity: 1; transform: none; }
}
@media (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  /* Size these frames to their content, not an empty viewport. A short extra
     hold gives the chapter its pause without separating the visible panels. */
  .narrative-panel[data-pinned] { --panel-top: max(var(--narrative-bar, 74px), calc((100svh + var(--narrative-bar, 74px) - var(--panel-content-height, 0px) - 64px) / 2)); height: calc(var(--panel-content-height, 0px) + 64px + 20svh); }
  [data-chapter="download"][data-pinned] { height: calc(var(--panel-content-height, 0px) + 64px + 10svh); }
  .narrative-panel[data-pinned] .chapter-frame { display: flex; align-items: flex-start; top: var(--panel-top); height: auto; padding-block: 32px; overflow: visible; }
  .narrative-panel[data-pinned] .chapter-body { width: 100%; opacity: var(--panel-opacity, 1); }
  .narrative-panel[data-pinned]:focus-within .chapter-body { opacity: 1; transform: none; }
  .narrative-panel[data-pinned] { scroll-margin-top: var(--panel-top); }
  /* Share the final frame with sound: its surface passes over the still-pinned
     appearance chapter. The negative margin keeps the page's pacing unchanged. */
  .narrative-appearance[data-pinned] { height: calc(400svh - var(--narrative-bar, 74px)); z-index: 0; }
  .narrative-appearance[data-pinned] + .narrative-demos { margin-top: calc(var(--narrative-bar, 74px) - 100svh); z-index: 1; }
  .narrative-appearance[data-pinned] .chapter-frame { grid-template-rows: minmax(0, 1fr) auto; opacity: var(--appearance-opacity, 1); }
  .narrative-appearance[data-pinned]:focus-within .chapter-frame { opacity: 1; }
  .narrative-appearance[data-pinned] .showcase { align-self: center; margin: 0; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 5vw; }
  .narrative-appearance[data-pinned] .showcase-say { padding: 0; display: grid; }
  .narrative-appearance[data-pinned] [data-appearance-copy] { grid-area: 1 / 1; align-self: center; margin: 0; opacity: var(--copy-opacity, 1); }
  .narrative-appearance[data-pinned] .showcase-say .lede { font-size: clamp(20px, 1.85vw, 28px); line-height: 1.45; }
  .narrative-appearance[data-pinned] .showcase-figs { display: grid; grid-template-columns: 1fr; gap: 0; }
  .narrative-appearance[data-pinned] .shot { grid-area: 1 / 1; align-self: center; transform: scale(var(--art-scale, .94)); }
  .narrative-appearance[data-pinned] .shot img { width: auto; max-width: 100%; max-height: calc(100svh - var(--narrative-bar, 74px) - 160px); margin-inline: auto; object-fit: contain; }
}
@media (max-width: 959px), (max-height: 679px), (prefers-reduced-motion: reduce) {
  .narrative-panel .chapter-frame { padding-block: 32px; }
  .demos-intro { position: static; }
}
/* A FLICK COVERS A LOT OF SCROLL. Under a finger each view gets more travel
   than under a wheel, so one flick moves about one view, and narrative.js
   settles a stopped flick onto the nearest view (Aaron, 2026-09-21). */
@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .narrative[data-pinned] { height: 580svh; }
  .narrative-how[data-pinned] { height: 580svh; }
  .narrative-appearance[data-pinned] { height: calc(560svh - var(--narrative-bar, 74px)); }
}
/* A pinned chapter on a phone. One column, and the art takes the height the
   copy and the nav leave, full width when that allows: the art's box is a
   size container in the frame's stretched row, and the picture inside is
   sized in container units. Where the box would be too small to be worth
   it, narrative.js leaves the chapter in flow. */
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
  [data-pinned] .chapter-frame { padding-top: 16px; padding-bottom: 12px; }
  [data-pinned] .chapter-footer { gap: 8px 12px; padding-top: 12px; }
  [data-pinned] .chapter-views { gap: 8px; }
  [data-pinned] .chapter-next span { margin-left: 8px; }
  .narrative-hero[data-pinned] .hero-scene { align-self: stretch; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  .narrative-hero[data-pinned] .khorlo-mark { margin-top: 8px; font-size: 38px; }
  [data-pinned] .hero-copy .eyebrow { margin-bottom: 10px; }
  [data-pinned] .hero-copy .lede { font-size: 17px; }
  [data-pinned] .hero-view { grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 6px 0; }
  [data-pinned] .hero-art { container-type: size; align-self: stretch; height: 100%; }
  [data-pinned] .hero-art img { max-height: 100cqh; }
  .narrative-hero[data-pinned] .hero-video, .narrative-hero[data-pinned] .hero-video-links { max-width: calc((100cqh - 32px) * 1.333333); }
  [data-pinned] .chapter-heading h2 { font-size: 32px; }
  [data-pinned] .mechanic { grid-template-rows: auto minmax(0, 1fr); padding: 8px 0; }
  [data-pinned] .mechanic-caption { font-size: 17px; margin: 0; }
  [data-pinned] .mechanic-art { container-type: size; width: 100%; height: 100%; aspect-ratio: auto; justify-self: stretch; }
  [data-pinned] .mechanic-art svg { width: min(100%, 100cqh); height: min(100%, 100cqw); margin: 0 auto; }
  .narrative-appearance[data-pinned] .showcase { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 16px; align-self: stretch; min-height: 0; }
  .narrative-appearance[data-pinned] .showcase-say .lede { font-size: 17px; }
  .narrative-appearance[data-pinned] .showcase-figs { container-type: size; align-self: stretch; min-height: 0; }
  .narrative-appearance[data-pinned] .shot { align-self: start; }
  .narrative-appearance[data-pinned] .shot img { max-height: 100cqh; }
}
@media print {
  .narrative-panel[data-pinned] { height: auto; }
  .narrative-appearance[data-pinned] { height: auto; }
  .narrative-appearance[data-pinned] .chapter-frame { opacity: 1; }
  .narrative-appearance[data-pinned] + .narrative-demos { margin-top: 0; }
  .narrative-panel[data-pinned] .chapter-frame { height: auto; }
  .narrative-panel[data-pinned] .chapter-body, [data-sound-ready] .example { opacity: 1; transform: none; }
  .demos-intro { position: static; }
  .narrative-appearance[data-pinned] .showcase-figs { display: block; }
  .narrative-appearance[data-pinned] .showcase-say { display: block; }
  .narrative-appearance[data-pinned] [data-appearance-copy] { opacity: 1; margin-bottom: var(--s5); }
}


/* The release is an announcement before the story, with optional detail. */
.release-banner { margin: 0; padding: 24px 0; background: var(--orange); border-bottom: 0; color: var(--on-orange); --ink: var(--on-orange); --ink-2: var(--on-orange); --muted: var(--on-orange); --faint: var(--on-orange); --rule-up: rgba(255,255,255,.65); }
.release-banner-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.release-banner-heading > div:first-child { flex: 1 1 280px; }
.release-banner .btn-row { align-self: center; justify-content: center; }
.release-banner .btn-pill { background: var(--plate); color: var(--on-orange); }
.release-banner .btn-pill:hover:not([disabled]) { background: #24231f; }
.release-banner .btn-pill-quiet:not([disabled]) { background: transparent; border-color: var(--on-orange); color: var(--on-orange); }
.release-banner .btn-pill-quiet:hover:not([disabled]) { background: rgba(255,255,255,.12); }
.release-banner :focus-visible { outline-color: var(--on-orange); }
.release-banner-heading .eyebrow { margin: 0 0 8px; }
.release-banner-heading .release-h { margin: 0; font-size: clamp(22px, 2vw, 28px); }
.release-notes, .release-notes-toggle { margin-top: 16px; }
.release-notes summary, .release-notes-toggle { width: fit-content; cursor: pointer; font-size: 13px; color: var(--muted); }
.release-notes summary:hover, .release-notes summary:focus-visible,
.release-notes-toggle:hover, .release-notes-toggle:focus-visible { color: var(--ink); }
.release-notes-toggle { display: block; padding: 0; border: 0; background: none; font-family: inherit; line-height: inherit; text-align: left; }
.release-notes-toggle::before { content: '▶'; display: inline-block; margin-right: 5px; font-size: 10px; }
.release-notes-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.release-notes .release-list, .release-notes-content .release-list { margin: 24px 0 0; }
@media (min-width: 960px) {
  .release-banner .release-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .release-banner { padding: 16px 0 12px; }
  .release-banner-heading { gap: 12px; }
  .release-banner .release-notes, .release-banner .release-notes-toggle { margin-top: 8px; }
  .release-banner .btn-row { display: grid; grid-template-columns: 1fr; width: 100%; gap: 4px; }
  .release-banner .btn-row > .btn-pill:not(.btn-pill-quiet) { width: 100%; min-height: 44px; text-align: center; }
  .release-banner .btn-pill-quiet:not([disabled]),
  .release-banner .btn-pill-quiet:hover:not([disabled]) { justify-self: center; padding: 8px 0; border: 0; border-radius: 0; background: none; font-size: 13px; font-weight: 400; line-height: 1.3; text-decoration: underline; text-underline-offset: 3px; }
}


/* Download and requirements share one frame, with the facts below the action. */
.narrative-panel .download-chapter { max-width: 1120px; margin-inline: auto; padding: 24px clamp(20px, 3vw, 40px); background: var(--band); border-top: 2px solid var(--orange); }
/* The press: two cards on the ground right above the download, the width of
   the download card and on the demo players' surface. Side by side where
   there is room, one under the other on a phone. The source sits at the
   bottom of each card so the two lines up. */
.press-band { max-width: 1120px; margin: 40px auto 0; }
.press-cards { display: grid; gap: 16px; }
@media (min-width: 760px) { .press-cards { grid-template-columns: 1fr 1fr; } }
.press-card { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 22px 24px; border: 1px solid var(--rule); border-radius: 8px; background: var(--panel); }
.press-card p { margin: 0; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.press-card footer { margin-top: auto; font: 400 12px/1.5 var(--mono); letter-spacing: .04em; }
.press-card footer a { color: var(--muted); }
.press-card footer a:hover { color: var(--orange-hi); }
.download-chapter .download-intro { margin: 0; padding: 0; border: 0; background: none; align-items: center; gap: 20px; }
.download-chapter .form-say { max-width: 52ch; }
.download-chapter .btn-row { margin: 0; }
.download-chapter .deets-band { max-width: none; margin: 24px 0 0; }
.download-chapter .eyebrow { margin-bottom: 12px; }
.download-chapter .spec th, .download-chapter .spec td { padding-block: 6px; }


/* About and its signup form remain one readable chapter. */
.narrative-panel .about-chapter { max-width: 1120px; margin-inline: auto; }
.about-chapter .about { margin: 0; }
.about-chapter .about .lede { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.4; }
.about-chapter .about-contact { margin-top: 12px; }
.about-chapter .signup-inline { margin: 60px 0 0; padding: 24px; gap: 20px; align-items: center; }
.about-chapter .signup-inline .form-say { max-width: 32ch; }
@media (max-width: 560px) {
  .about-chapter .signup-inline { padding: 20px; }
  .about-chapter .inline-form, .about-chapter .field { min-width: 0; width: 100%; }
}

/* Credits: one quiet line after the social links, the last thing in the chapter. */
.about-chapter .about-credits { margin: 20px 0 0; font-size: 13px; color: var(--faint); }
.about-chapter .about-credits a { color: var(--muted); }
.about-chapter .about-credits a:hover { color: var(--orange-hi); }
.about-chapter .about-social { margin-top: 16px; }
.about-chapter .social-link { padding: 12px 16px; gap: 4px; }
@media (min-width: 960px) and (max-height: 800px) {
  .narrative-panel .download-chapter { padding-block: 16px; }
  .download-chapter .spec th, .download-chapter .spec td { padding-block: 5px; }
  .about-chapter .signup-inline { padding-block: 16px; }
}
@media (min-width: 960px) {
  .about-chapter .signup-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
}