/* ============================================================
   CH1 — THE BANDED CHAPTER

   Loaded after styles-sidebar.css on /raf only. Everything here is additive:
   delete this file and chapter one renders as a normal chapter on cream, with
   a working chart. Nothing below is required for the content to be readable.

   The band is on the CHAPTER, not on the figure — the heading and the body copy
   sit inside it along with the chart. It is a contained panel, not full bleed:
   it extends past the text by its own padding and no further.

   COLOUR: the ink is flipped by redefining the site's own tokens on the banded
   section. Every descendant — h2, prose, chart line, nodes, axis labels, the
   caption — reads those tokens, so one block turns the whole chapter white and
   no element needs its own override. Because the band is dark in both themes
   there is no .dark-mode variant: the ink depends on the band, not the page.

   The values are measured, not picked. --text-muted is #cac2b6 because the
   page's own #90918b falls to 3.4:1 on this ground; --accent is lifted to
   #ff9b70 because #c73e1d measures 2.6:1 here and reads brown.
   ============================================================ */

/* THE DARK GROUND AND ITS INK, as a class of its own.

   Factored out of .pv-chapter.is-banded on 2026-09-03 so a second block on
   this page — the 86% / 9% statement — can take the same ground and the same
   measured ink WITHOUT the animated field. The field (the .cs-scene canvas and
   the ::before / ::after fallback layers) stays scoped to .is-banded, so
   .is-dark is simply the flat version of the same material.

   The values are unchanged and still measured, not picked — see the header.
   Scoped under .cs-body so a two-word class name cannot collide off this
   article. */
.cs-body .is-dark {
  --text-primary: #f7f4f0;
  --text-body: #ded7cd;
  --text-muted: #cac2b6;
  --rule-soft: rgba(255, 255, 255, 0.14);
  --rule: rgba(255, 255, 255, 0.2);
  --surface: rgba(255, 255, 255, 0.06);
  --accent: #ff9b70;

  background: #120a07;
  color: var(--text-body);
}

.pv-chapter.is-banded {
  /* How far the band reaches past the text on each side. Capped at 200px to
     match --cs-bleed, the distance every other bleeding figure on this page
     already uses, so the band sits on the page's existing rhythm rather than
     inventing a third width. The text keeps its own measure — this widens the
     frame, not the column. */
  --band-pad: clamp(20px, 9vw, 200px);

  /* the ink and the ground live on .is-dark above; the section carries both
     classes, and everything below is the FIELD, which is this class alone */

  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* FULL BLEED, edge to edge, no radius of its own — the curve at the top of
     this band belongs to the .cs-context panel above it, which sits one layer
     up and cuts into this ground.

     SUPERSEDED ON /raf BY raf/plates.css, which insets both this band and the
     panel above it by one --plate-gutter and rounds the band's BOTTOM corners
     only. The seam is unchanged: the two boxes still share an edge, so the
     panel's notches still land on this ground. Delete plates.css and the rule
     below is what renders.

     The text is NOT re-measured to the new width. `margin-inline` bleeds the
     box out to the viewport; the padding then puts back exactly what the bleed
     took. Percentages in padding resolve against the CONTAINING BLOCK — still
     .cs-body, still the measure — so `50vw - 50%` is half the viewport minus
     half the measure, and the content box lands back on the same column width
     the prose has everywhere else on the page. Change the measure and this
     follows it; there is no magic number to keep in sync.

     max() keeps --band-pad as the floor, so on a narrow screen where the
     viewport is already close to the measure the text still gets its gutter
     instead of a negative one. */
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(52px, 6.5vw, 104px);
  padding-inline: max(var(--band-pad), calc(50vw - 50%));
}

/* Close the seam. The rounded panel above has to sit ON this band for its
   corners to read at all, and between them sat 152px of page ground: 96px of
   .cs-body top padding plus this chapter's own 56px top margin.

   Both are removed only while the banded chapter is the FIRST thing in the
   body — :has() scopes the padding removal to that arrangement, so moving the
   band down the page restores the normal spacing without a second edit here.
   If :has() is unavailable the gap simply comes back; nothing breaks. */
.cs-body > .pv-chapter.is-banded:first-child { margin-top: 0; }
.cs-body:has(> .pv-chapter.is-banded:first-child) { padding-top: 0; }

/* content above the field */
.pv-chapter.is-banded > * { position: relative; z-index: 1; }

/* ---------- the scene ----------
   The WebGL scene fills the band. Self-hosted — see scene.js. */
.pv-chapter.is-banded .cs-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.pv-chapter.is-banded .cs-scene canvas {
  display: block;
  width: 100%;
  height: 100%;

  /* NO FLIP, deliberately. The previous scene rendered bright-top and needed a
     scaleY(-1) to put the dark side up, where the heading and the body copy
     are. The scene exported on 2026-09-02 already renders dark-top, so keeping
     that mirror inverted it: the hottest part of the field landed directly
     behind the chapter heading and the two paragraphs, and their contrast fell
     through the floor.

     The rule stays the same either way — dark at the top where the type is,
     light gathering toward the bottom. If a future export flips again, this is
     the one declaration to change back to scaleY(-1). */
  transform: none;
}

/* ---------- the CSS fallback field ----------
   Two layers, both purely decorative, both removed once the scene is live.
   They exist so the band is never a flat rectangle when WebGL is unavailable,
   the scene file cannot be fetched, or motion is reduced. */

/* the core: a wide, heavily feathered warm bar, the way the reference builds
   its light — a soft rectangle over a flat ground, not a radial gradient */
.pv-chapter.is-banded::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  /* weighted low to match the flipped scene: dark at the top, light gathering
     toward the bottom */
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(199, 62, 29, 0.06) 34%,
      rgba(226, 96, 48, 0.26) 62%,
      rgba(226, 96, 48, 0.34) 80%,
      rgba(199, 62, 29, 0.16) 100%);
  filter: blur(38px);
  animation: cg-core 48s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes cg-core {
  from { transform: translate3d(-2%, 0, 0) scale(1.04); }
  to   { transform: translate3d(2%, 1%, 0) scale(1.12); }
}

/* the grain: fast, screen-blended, the layer that actually moves. In the
   reference the bands drift at 0.01 and the grain runs at 0.5 — the field is
   almost still and the shimmer is what reads as alive. */
.pv-chapter.is-banded::after {
  content: "";
  position: absolute;
  inset: -80px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  animation: cg-grain 0.6s steps(5) infinite;
  will-change: transform;
}

@keyframes cg-grain {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-54.8px, 27.4px, 0); }
}

/* Hand over once the scene has actually rendered. scene.js sets this only after
   a <canvas> exists, never on the promise alone — resolving is not rendering. */
.pv-chapter.is-banded.has-scene::before,
.pv-chapter.is-banded.has-scene::after {
  opacity: 0;
  transition: opacity 700ms ease;
}

/* ---------- the chapter's own content, on the band ---------- */

/* The chapter is a multi-column container. The figure has to leave that flow to
   sit full width beneath the prose, and it must not use the page's figure bleed
   in here — that would push it outside the band it is sitting in. */
.pv-chapter.is-banded .cs-chart {
  column-span: all;
  width: auto;
  margin-inline: 0;
  margin-top: clamp(28px, 3.5vw, 52px);
}

.pv-chapter.is-banded .pv-fig-cap { max-width: 62ch; }

/* ---------- the glass panel ---------- */
.pv-chapter.is-banded .chartline { grid-template-columns: 1fr; }

.pv-chapter.is-banded .cl-panel {
  border: 0;
  border-radius: 32px;

  /* WHITE GLASS, not smoked.

     THE INK FLIPS WITH THE MATERIAL. Every part of this chart — the kicker, the
     figure, the subtitle, the grid, both line weights, the node discs, the
     marker, the halo and the axis years — reads from the tokens below, so
     redeclaring six values here turns the whole thing to dark ink at once and
     nothing needs its own override. This is the same move the band itself uses
     to turn the chapter white; it just runs the other way inside the panel.
     Without it the panel would be white with white type on it. */
  --text-primary: #17100e;
  --text-body:    #2b211d;
  --text-muted:   #5f5049;
  --rule-soft:    rgba(0, 0, 0, 0.14);
  --rule:         rgba(0, 0, 0, 0.22);
  --surface:      #ffffff;   /* the node discs, punched out of the line */
  --accent:       #a8320d;   /* the -41%; #ff9b70 is a dark-ground value */

  /* A LENS, NOT A SHEET.

     The flat 70% wash that was here read as frosted plastic: an even tint with
     a hairline around it. Real glass has thickness, and thickness shows up in
     three places — a specular bloom where the light lands, a rim that is
     brighter than the middle because you are looking through more material at
     a glancing angle, and a body tint that is thinnest where the light hits.

     Layer one is that bloom, up and to the left, which is also where the rim
     light below is brightest. The two have to agree or the panel reads as lit
     from two directions at once. Layer two is the body, very slightly lighter
     at the top. Layer three is the base fill. */
  background:
    radial-gradient(120% 90% at 16% -10%,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.14) 42%,
      transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / 66%), rgb(255 255 255 / 72%)),
    rgba(255, 255, 255, 0.34);

  /* saturate() is WELL below 1, and that is what makes this read as white
     glass rather than pink glass. The field behind the panel is a hot,
     fully-saturated red; at 0.8 enough of that chroma still came through that
     the sheet took a pink cast. 0.5 drains the hue without draining the
     luminance, so the streaks still move visibly through the panel — you can
     see them, they just arrive as light and shadow instead of as colour.

     Raise it toward 1 for a warmer, more tinted sheet; drop it to 0.3 for
     something closer to frosted white. */
  backdrop-filter: blur(30px) saturate(0.5) brightness(1.3);

  box-shadow:
    /* INSIDE — the feathered rim glow. This is the cheap half of "thick at the
       edge": light gathering just inside the boundary, fading inward over
       ~26px, so the middle of the panel reads thinner than its edges. The
       ::after ring does the other half by actually bending what is behind. */
    0 0 14px -6px rgba(255, 255, 255, 0.28) inset,
    0 1px 0 rgba(255, 255, 255, 0.6) inset,

    /* OUTSIDE — two shadows, not one. A single soft shadow makes a surface
       float with nothing underneath it; a real object has a tight contact
       shadow where it nearly touches, plus a wide ambient one. The contact
       shadow is what actually reads as weight. And a large surface should cast
       a deeper shadow than a small one, which is why this is heavier than
       anything else on the page. */
    0 2px 6px -3px rgba(0, 0, 0, 0.3),
    0 30px 64px -30px rgba(0, 0, 0, 0.5);
}

/* a bright top edge, strongest at the lip and gone by 60% down — light catching
   the material rather than a border drawn round the box */
.pv-chapter.is-banded .cl-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  /* A LIGHT SOURCE, NOT A STROKE. A uniform hairline says "border"; a rim that
     varies around the perimeter says "a lit object". This is brightest at the
     top and upper-left where the specular bloom is, nearly gone on the
     lower-right where the light has fallen away, and lifts again along the
     bottom for the bounce coming back off the field. Angles are degrees
     clockwise from twelve o'clock. */
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255, 255, 255, 0.72) 0deg,
    rgba(255, 255, 255, 0.24) 80deg,
    rgba(255, 255, 255, 0.14) 132deg,
    rgba(255, 255, 255, 0.40) 190deg,
    rgba(255, 255, 255, 0.28) 248deg,
    rgba(255, 255, 255, 0.58) 302deg,
    rgba(255, 255, 255, 0.72) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.pv-chapter.is-banded .cl-panel { position: relative; }

/* THE REFRACTION RING — the one thing that separates glass from frosting.

   A sheet of glass is not equally thick everywhere you look through it. At the
   rim you are looking through it at a glancing angle, so there is more material
   in the way: the blur is stronger and what is behind is pushed brighter and
   flatter. This is a band inset from the edge with its own backdrop-filter,
   which compounds with the panel's, so the field genuinely resolves less
   through the edge than through the middle.

   The ring is cut by the same mask-composite trick the rim light uses: paint
   the whole box, then subtract the content box, leaving only the padding band.

   It degrades to nothing. If a browser will not nest backdrop-filter the ring
   simply has no effect, and the panel is exactly the frosted sheet it was —
   which is why the rim glow above is a box-shadow instead, so some sense of
   thickness survives either way. */
.pv-chapter.is-banded .cl-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backdrop-filter: blur(9px) saturate(0.85);

  /* FEATHERED, not cut. The obvious way to make a ring is padding plus a
     content-box mask, the same trick the rim light above uses. It is wrong
     here: the content-box cut is a plain rectangle, so the ring's INNER edge
     has square corners inside a 32px-rounded panel, and the result reads as a
     hard rectangle drawn inside the glass. It was clearly visible.

     Instead: four edge gradients, unioned. Each fades from opaque at its own
     edge to nothing 26px in, and `add` composites them into a frame that falls
     off smoothly toward the middle with no inner boundary at all. Corners get
     two overlapping gradients and so stay strongest, which is correct — the
     corner is where you look through the most material. */
  -webkit-mask:
    linear-gradient(to right,  #000, transparent 14px),
    linear-gradient(to left,   #000, transparent 14px),
    linear-gradient(to bottom, #000, transparent 14px),
    linear-gradient(to top,    #000, transparent 14px);
  mask:
    linear-gradient(to right,  #000, transparent 14px),
    linear-gradient(to left,   #000, transparent 14px),
    linear-gradient(to bottom, #000, transparent 14px),
    linear-gradient(to top,    #000, transparent 14px);
  -webkit-mask-composite: source-over;
  mask-composite: add;
  pointer-events: none;
}

/* Both pseudo-elements are decoration over the material; the chart has to sit
   above them or the ring would wash over the axis years at the panel's edge. */
.pv-chapter.is-banded .cl-panel > * { position: relative; z-index: 1; }

/* VIBRANCY. Flat grey over a translucent, moving surface is the one thing that
   reliably reads as cheap: the text has no ground of its own, so it needs more
   contrast and a little more weight than it would on paper. The muted tone goes
   from #5f5049 to #4a3d37, the axis years and the kicker pick up a touch of
   weight, and the tracking opens very slightly — small type over glass needs
   the extra air, where the display figure above it does not. */
.pv-chapter.is-banded .cl-panel { --text-muted: #4a3d37; }

.pv-chapter.is-banded .cl-label,
.pv-chapter.is-banded .cl-axis {
  font-weight: 650;
  letter-spacing: 0.145em;
}

.pv-chapter.is-banded .cl-sub {
  font-weight: 450;
  letter-spacing: 0.004em;
}

/* Without backdrop-filter the panel would sit as flat translucency over a
   moving field and the axis labels would swim. Raise the fill to near-opaque.

   THE TEST IS UNPREFIXED-ONLY, and has to be. The panel above sets only the
   unprefixed backdrop-filter. Safari did not support that until 18 -- before
   which it had -webkit-backdrop-filter and nothing else. The old test asked
   about either property, so on Safari 17 it saw the prefixed one, decided the
   fallback was unnecessary, and left the panel translucent with no blur behind
   it: white-on-white type over a moving field. Asking only about the property
   actually used keeps the answer honest. */
@supports not (backdrop-filter: blur(1px)) {
  /* Near-opaque white. With nothing blurring the field behind it, a
     translucent sheet over moving colour makes the axis labels swim — so this
     gives up the see-through entirely rather than give up legibility. */
  .pv-chapter.is-banded .cl-panel { background: rgba(252, 250, 249, 0.94); }
  .pv-chapter.is-banded .cl-panel::after { display: none; }
}

/* REDUCED TRANSPARENCY. This is a real setting a real reader turns on, usually
   because translucent surfaces are hard to parse, and it is not the same
   request as reduced motion — someone can want a still page and still want
   glass, or the reverse. The honest answer is to stop being glass: a solid
   panel, no blur, no refraction ring, and a defined edge to replace the rim
   light that is no longer there to describe the shape. */
@media (prefers-reduced-transparency: reduce) {
  .pv-chapter.is-banded .cl-panel {
    background: #faf7f5;
    backdrop-filter: none;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.12) inset,
      0 2px 6px -3px rgba(0, 0, 0, 0.3),
      0 30px 64px -30px rgba(0, 0, 0, 0.5);
  }
  .pv-chapter.is-banded .cl-panel::before,
  .pv-chapter.is-banded .cl-panel::after { display: none; }
}

/* HIGH CONTRAST. Same idea, taken further: fully solid, a border that is
   actually visible rather than a highlight that suggests one, and the muted
   tone brought up until it is no longer muted. A rim light is a decorative
   edge; someone who has asked for more contrast wants a real one. */
@media (prefers-contrast: more) {
  .pv-chapter.is-banded .cl-panel {
    --text-muted: #3a2f2a;
    background: #ffffff;
    backdrop-filter: none;
    box-shadow: none;
    border: 1px solid #17100e;
  }
  .pv-chapter.is-banded .cl-panel::before,
  .pv-chapter.is-banded .cl-panel::after { display: none; }
}

/* The node discs are holes punched in the line, so they take the panel's
   colour. That is now white, which is what --surface is set to above — so the
   base rule (fill: var(--surface)) is already correct and the dark override
   that used to live here has been removed rather than inverted. */

@media (prefers-reduced-motion: reduce) {
  .pv-chapter.is-banded::before,
  .pv-chapter.is-banded::after { animation: none; }
  /* parked mid-loop so the field still has shape, just no movement */
  .pv-chapter.is-banded::before { transform: translate3d(0, 0.5%, 0) scale(1.08); }
}

@media (max-width: 900px) {
  .pv-chapter.is-banded { --band-pad: clamp(18px, 4vw, 30px); }

  /* ZOOM THE SCENE OUT. It is authored wide — long horizontal streaks that
     need width to read as streaks at all. Squeezed into a 375px column, one
     band of them fills the whole panel and the thing stops being a texture and
     becomes a flat red wall.

     The layer is therefore made much wider than the band and anchored LEFT, so
     the streaks sit at something near their authored proportion and the band's
     own overflow: hidden crops the rest. left/right/width is over-constrained
     on purpose; `right: auto` states which one gives way rather than leaving it
     to the direction rules.

     280% is a judgement, not a constant: it puts a 375px phone at ~1050px of
     scene, close to the width the desktop band gets, so the two read as the
     same material. The cost is proportional fill rate — at dpi 1.5 that is a
     ~1575px canvas, which is less than the desktop band already asks for. */
  .pv-chapter.is-banded .cs-scene {
    width: 280%;
    right: auto;
  }

  /* LEGIBILITY. Widening the scene also brings its brightest part into a much
     smaller box, and at this size the chapter heading, the axis labels and the
     figure caption all sat on hot orange — the caption was simply unreadable.
     A scrim over the canvas costs nothing and the field still reads through it.
     Weighted to the ends, where the heading and the caption are, and lightest
     across the middle where the chart panel provides its own ground. */
  .pv-chapter.is-banded .cs-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(18, 10, 7, 0.62) 0%,
      rgba(18, 10, 7, 0.34) 38%,
      rgba(18, 10, 7, 0.40) 66%,
      rgba(18, 10, 7, 0.68) 100%);
  }

  /* unprefixed only, to match the panel above and the @supports test */
  .pv-chapter.is-banded .cl-panel {
    backdrop-filter: blur(16px) saturate(1.3);
  }

  /* The refraction ring is a SECOND backdrop-filter pass, over a scene that is
     already running a cloth simulation. On a phone that is not a detail worth
     its cost, and at this size the rim is a few pixels wide. The box-shadow rim
     glow stays, so the panel still has an edge that reads as thickness. */
  .pv-chapter.is-banded .cl-panel::after { display: none; }
}

/* ============================================================
   THE LENS (Chromium). chart-lens.js builds a displacement map the size of
   the panel and adds .has-lens once the filter is in the document. With a
   real bend at the rim the panel no longer needs to fake thickness: the
   wash drops to a tint so the field reads THROUGH the glass, the blur
   drops to a few pixels so the bend is visible, and the refraction ring
   goes, because the lens is doing that job for real. The rim hairline
   stays: it is the edge catching light, and a bent edge still has one.
   Everything else on the panel — ink, grid, type — is untouched.
   ============================================================ */
.pv-chapter.is-banded .cl-panel.has-lens {
  /* CLEAR GLASS. Tuned to the owner's settings from the liquidglass demo:
     opacity 1, blur 0.16, refraction 0.89, edge highlight 0.62, specular
     0.15, z-radius 40. In CSS terms: almost no wash, almost no blur, the
     bend confined to a 40px rim, a rim light peaking at 62%, and a faint
     bloom top-left. With the wash gone the ink goes back to the band's
     light values: dark type on a clear pane over a red field does not read. */
  --text-primary: #f7f4f0;
  --text-body:    #ded7cd;
  --text-muted:   #d6cec2;
  --rule-soft:    rgba(255, 255, 255, 0.16);
  --rule:         rgba(255, 255, 255, 0.24);
  --surface:      #2b120c;   /* the node discs punched out of the line */
  --accent:       #ff9b70;
  background:
    radial-gradient(120% 90% at 16% -10%,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.04) 42%,
      transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 9%));
  backdrop-filter: url(#cl-lens) saturate(0.9) brightness(1.06);
  box-shadow:
    0 0 10px -6px rgba(255, 255, 255, 0.18) inset,
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 2px 6px -3px rgba(0, 0, 0, 0.3),
    0 24px 50px -30px rgba(0, 0, 0, 0.5);
}

/* the rim light at the owner's 0.62, brightest top-left */
.pv-chapter.is-banded .cl-panel.has-lens::before {
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255, 255, 255, 0.62) 0deg,
    rgba(255, 255, 255, 0.22) 80deg,
    rgba(255, 255, 255, 0.12) 132deg,
    rgba(255, 255, 255, 0.34) 190deg,
    rgba(255, 255, 255, 0.24) 248deg,
    rgba(255, 255, 255, 0.50) 302deg,
    rgba(255, 255, 255, 0.62) 360deg);
}

.pv-chapter.is-banded .cl-panel.has-lens::after { display: none; }

/* ============================================================
   THE FIGURE MUST NOT BE A BACKDROP ROOT.

   styles-sidebar.css gives every .pv-fig an arrival: opacity 0.35 and a
   clip-path inset that opens to inset(-44px 0). A clip-path, like opacity
   below 1, makes the element a backdrop root, and a backdrop root is the
   ceiling of what any backdrop-filter inside it can see. The panel's
   backdrop-filter was therefore sampling the figure itself, which is
   transparent, and not the scene behind it. No blur, no bend, no glass:
   a tinted rectangle. This has been the case since that arrival rule was
   written; the wash was heavy enough to hide it.

   The chart figure opts out of the arrival entirely. It sits in a band
   with its own entrance; it does not need another one.
   ============================================================ */
.cs-fx .cs-body .pv-fig.cs-chart,
.cs-fx .cs-body .pv-fig.cs-chart.is-inview {
  clip-path: none;
  opacity: 1;
  transition: none;
}

/* ============================================================
   SAFARI: THE BAND IS NOT A MULTICOL CONTAINER.

   .cs-body .pv-chapter lays its prose in two columns and lets the h2 and
   the figures span them. In WebKit that combination, inside a chapter
   that also carries an absolutely positioned scene and two filtered
   pseudo-elements, paints the second column under the first and, with
   the pseudo-elements hidden, puts the heading under the figure. Chrome
   is fine; the other chapters, which have none of those extras, are fine
   in both. So the banded chapter gives up columns itself and hands them
   to a plain wrapper around its prose, which is the layout WebKit gets
   right. Nothing visible changes in Chrome.
   ============================================================ */
.cs-body .pv-chapter.is-banded { columns: auto; }

.cs-body .pv-chapter.is-banded .cs-cols {
  /* flow-root, or WebKit refuses to balance and drops every line into the
     first column; measured, with it the same box balances */
  display: flow-root;
  columns: 2 380px;
  column-gap: 64px;
}

/* ============================================================
   THE SEAM BELOW THE BAND

   The chapter after the band sits on the page ground, so the band's
   bottom edge was a hard line and then 300px of air before the heading.
   Two changes. The gap is halved. And the next chapter gets the same
   rounded top corners the explainer has, by the same trick: a cream
   plate behind it, pulled up over the band by exactly one radius, so
   the band's field shows only in the two corner notches. The chapter
   itself carries z-index so its plate paints above the band and its own
   prose paints above the plate. Nothing inside either box moves.
   ============================================================ */
.cs-body .pv-chapter.is-banded {
  /* No margin: the next chapter's plate has to sit ON this band for its
     corners to cut into it, so the air between them is that chapter's
     top padding instead. */
  margin-bottom: 0;
}

.cs-body .pv-chapter.is-banded + .pv-chapter {
  --ctx-radius: clamp(18px, 2vw, 34px);
  position: relative;
  isolation: isolate;
  z-index: 1;
  /* A quarter of the chapter gap. With the band's own bottom padding
     this halves the space the reader sees between caption and heading:
     456px became about 230. The plate below starts one radius higher
     still, over the band. */
  padding-top: calc(var(--cs-chapter-gap) * 0.25);
  /* the chapter's default top margin would hold the plate 56px short of
     the band; the padding above is the whole gap now */
  margin-top: 0;
}

.cs-body .pv-chapter.is-banded + .pv-chapter::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--ctx-radius));
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--bg-cream);
  border-start-start-radius: var(--ctx-radius);
  border-start-end-radius: var(--ctx-radius);
  pointer-events: none;
}

/* dark mode redefines --bg-cream itself, so the plate follows the page */