/* ============================================================
   FACTOR+ V6 — THE ARTICLE, AFTER APPLE'S PRODUCT PAGES

   Loaded last, on this page only. Rules target the article, local nav and
   prev/next band, plus the hero's metric context and the film's closing gap.

   What is borrowed from apple.com/apple-watch-series-12, and nothing else:

     1. A local nav: the name and the chapters, pinned once you are past
        the film, with the current chapter marked.
     2. The section rhythm: eyebrow, a big tight headline, copy in one
        measure with the phrases that carry it picked out, then large media.
        Generous padding between sections instead of a rule or a numeral.
     3. One oversized number with small labels. The chart's own head value,
        moved up under the results heading, is the payoff.
     4. Grounds that change with the section: the dark band, the page, one
        inset panel on a lifted ground, the page again.
     5. Numbered footnotes collected at the end.

   The type, colour and radius all come from the site's own tokens; the
   accent stays on numerals (the negative result) and nowhere else.
   ============================================================ */

/* ---- this article's measures ---- */
.cs-body {
  --v6-text: 700px;                          /* reading measure */
  --v6-mid: 1000px;                          /* the chart, the notes */
  --v6-wide: 1200px;                         /* stages, tiles, the panel */
  --v6-pad: var(--wrap-gutter, 24px);        /* side gutter inside a chapter */
  --v6-radius: clamp(20px, 2.2vw, 32px);     /* Apple's tiles run 28px at 1440 */
  --v6-radius-sm: clamp(12px, 1.1vw, 18px);
  --v6-space: clamp(88px, 10vw, 168px);      /* between sections; Apple uses 144 */
  --v6-fig-gap: clamp(56px, 6.5vw, 104px);   /* copy to media */

  /* the chapters now carry their own width, so the article is full width */
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ============================================================
   CHAPTERS: ONE COLUMN ON A BREAKOUT GRID

   The newspaper columns go. Each chapter is a grid of named tracks, so a
   child sits on the reading measure by default and a figure opts out to
   `wide` or `full` without negative margins or --cs-bleed. The side tracks
   never drop below the gutter, so nothing can reach the window edge.
   ============================================================ */
.cs-body .pv-chapter {
  columns: auto;
  /* styles-sidebar.css gives every chapter a 64px column-gap for its old
     newspaper columns, and a grid honours column-gap too: four of them took
     256px out of the tracks, which at 390px left a text column of 86px */
  gap: 0;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--v6-pad), 1fr)
    [wide-start] minmax(0, calc((var(--v6-wide) - var(--v6-text)) / 2))
    [text-start] min(var(--v6-text), 100% - 2 * var(--v6-pad)) [text-end]
    minmax(0, calc((var(--v6-wide) - var(--v6-text)) / 2)) [wide-end]
    minmax(var(--v6-pad), 1fr) [full-end];
  margin: 0;
  padding-block: var(--v6-space);
  /* anchor jumps from the local nav land below it */
  scroll-margin-top: 52px;
}

.cs-body .pv-chapter > * {
  grid-column: text;
  min-width: 0;
}

/* band.css spaces the chapter after the band with a quarter of the old
   300px gap; the section rhythm replaces it */
.cs-body .pv-chapter.is-banded + .pv-chapter { padding-top: var(--v6-space); }
.cs-body .pv-chapter.is-banded { padding-block: var(--v6-space); }

/* ---- the opener: eyebrow + headline ---- */
.cs-body .v6-head {
  grid-column: wide;
  margin: 0 0 clamp(36px, 4.4vw, 64px);
  text-align: center;
}

/* .v6-head in the selector: `.cs-body .pv-chapter p` (styles-sidebar.css)
   is (0,2,1) and sets every chapter paragraph flush left */
.cs-body .v6-head .v6-eyebrow {
  margin: 0 0 clamp(12px, 1.2vw, 18px);
  text-align: center;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--text-muted);
}

/* Apple sets its section headlines at the size of its hero headline and
   tracks them in; the display serif gets the same treatment. 12em is
   measured, not guessed: it is just wider than the longest sentence in any
   heading (11.7em), so every one breaks into two balanced lines on a wide
   screen, and the two-sentence heading breaks between its sentences. */
.cs-body .v6-head h2 {
  max-width: 12em;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.024em;
  text-align: center;
  text-wrap: balance;
  color: var(--text-primary);
}

/* the Strategy heading is two sentences; each keeps a line of its own, so
   a narrow screen breaks inside a sentence and never across the full stop */
.cs-body .v6-head .v6-line { display: block; }

.cs-body .v6-head .cs-boxed { border-width: 0.03em; padding: 0 0.14em 0.02em; }

/* ---- the copy ----
   Apple's copy is grey with the phrases that carry it in full ink, so a
   reader who only skims still gets the argument. Same device here with the
   site's two text inks: --text-muted for the run, --text-primary for the
   emphasis. Both clear 4.5:1 on every ground this page uses. */
.cs-body .v6-copy p {
  margin: 0 0 1.05em;
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.34vw, 21px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.004em;
  text-align: left;
  text-wrap: pretty;
  color: var(--text-muted);
}

.cs-body .v6-copy p:last-child { margin-bottom: 0; }

.cs-body .v6-copy strong {
  font-weight: 600;
  color: var(--text-primary);
}

.cs-body .v6-decisions {
  margin: 0;
  padding-left: 1.25em;
  list-style: disc;
  color: var(--text-muted);
}

.cs-body .v6-decisions > li { padding-left: 0.3em; }
.cs-body .v6-decisions > li + li { margin-top: 1.05em; }

.cs-hero-info .v6-result-context {
  max-width: none;
  margin: 16px 0 0;
}

.cs-hero-info .v6-result-context a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---- footnote markers ---- */
.cs-body .v6-fn {
  font-size: 0.6em;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.08em;
}

.cs-body .v6-fn a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.cs-body .v6-fn a:hover { color: var(--text-hover); }

/* ============================================================
   FIGURES

   Every figure leaves the reading measure for the wide track. The scroll
   layer's clip reveal and fade (styles-sidebar.css, behind .cs-fx) are
   switched off here: the page does not wait on an observer to show a figure,
   and a figure is never faded. The parallax drift goes with them, because it
   slid each plate up to 20px over its own caption.
   ============================================================ */
/* Top margins only: grid items' margins do not collapse, so a bottom margin
   on every figure doubled the gap between Figs. 02 and 03 to 186px. The
   copy that follows a figure takes the gap instead. */
.cs-body .pv-chapter > .pv-fig {
  grid-column: wide;
  width: auto;
  margin: var(--v6-fig-gap) 0 0;
}

.cs-body .pv-chapter > .pv-fig + .v6-copy { margin-top: var(--v6-fig-gap); }

.cs-fx .cs-body .pv-chapter .pv-fig,
.cs-fx .cs-body .pv-chapter .pv-fig.is-inview {
  clip-path: none;
  opacity: 1;
  transition: none;
}

.cs-fx .cs-body .pv-chapter .pv-fig > :first-child { transform: none; }

.cs-fx .cs-body .pv-chapter .pv-fig img,
.cs-fx .cs-body .pv-chapter .pv-fig video { transform: none; transition: none; }

/* captions: centred under the media, the number set inline as a label */
.cs-body .pv-chapter .pv-fig-cap {
  max-width: 62ch;
  margin: 20px auto 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
  color: var(--text-muted);
}

.cs-body .pv-chapter .pv-fig-cap .pv-fig-num {
  display: inline;
  margin: 0 0.6em 0 0;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-primary);
}

/* ---- Fig. 01: the hub, on a stage ----
   A web capture sized to be read: on a surface panel the width of the other
   stages, at up to 880px, which is its own 2x size. */
.cs-body .v6-stage .pv-shot.is-real.is-device {
  padding: clamp(28px, 6vw, 96px) clamp(14px, 5vw, 80px);
  border-radius: var(--v6-radius);
  background: var(--surface);
}

.cs-body .v6-stage .pv-shot.is-real.is-device img {
  width: min(100%, 880px);
  border-radius: var(--v6-radius-sm);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 40px 80px -40px rgba(0, 0, 0, 0.5);
}

/* ---- Fig. 02: joining, the closer look ----
   The owner's player, kept: the same blurred card, the clip on the left and
   the three beats on the right, lit in time by demo.js. What changes is
   scale and finish. The card takes the stage width and a larger phone, the
   beats hang off a rail whose lit segment fills as the beat plays (article.js
   writes --v6-p), and a play/pause glyph sits where Apple puts one on every
   looping film. */
.cs-body .cs-demo .cs-demo-card {
  grid-template-columns: minmax(0, 360px) minmax(0, 400px);
  justify-content: center;
  gap: clamp(36px, 7vw, 120px);
  /* the bottom never drops below 76px: the glyph hangs 54px under the
     phone and the card clips at its edge (measured clipped at 768) */
  padding: clamp(40px, 6vw, 96px) clamp(28px, 5vw, 80px) max(clamp(40px, 6vw, 96px), 76px);
  border-radius: var(--v6-radius);
}

.cs-body .cs-demo .cs-demo-shot video { border-radius: 16px; }

.cs-body .cs-demo-steps { gap: 6px; }

.cs-body .cs-demo-steps li {
  position: relative;
  grid-template-columns: 2.1em minmax(0, 1fr);
  column-gap: 10px;
  padding: 16px 0 16px 22px;
}

/* the rail: a quiet track per beat, and the lit fill over it */
.cs-body .cs-demo-steps li::before,
.cs-body .cs-demo-steps li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
}

.cs-body .cs-demo-steps li::before { background: rgba(255, 255, 255, 0.22); }

.cs-body .cs-demo-steps li::after {
  background: #fff;
  transform: scaleY(0);
  transform-origin: top;
}

.cs-body .cs-demo-steps li.is-on::after { transform: scaleY(var(--v6-p, 1)); }

.cs-body .cs-demo-n {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.62);
}

.cs-body .cs-demo-steps .cs-trio-label { font-size: 18px; margin-bottom: 6px; }
.cs-body .cs-demo-steps .cs-trio-line { font-size: 15px; line-height: 1.5; max-width: 32ch; }

/* the glyph, under the phone's right edge where Apple hangs one off every
   looping film. State only, from demo.js's .is-synced (set while the clip
   plays); the card's bottom padding is what it sits in. */
.cs-body .v6-demo-toggle {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: background 0.2s ease;
}

.cs-body .v6-demo-toggle:hover { background: rgba(255, 255, 255, 0.26); }
.cs-body .v6-demo-toggle svg { grid-area: 1 / 1; display: block; }
.cs-body .v6-demo-toggle .v6-i-pause { display: none; }
.cs-body .cs-demo.is-synced .v6-demo-toggle .v6-i-pause { display: block; }
.cs-body .cs-demo.is-synced .v6-demo-toggle .v6-i-play { display: none; }

/* ---- Fig. 03: leaving, three tiles ---- */
.cs-body .cs-trio-row { gap: clamp(12px, 1.6vw, 24px); }

.cs-body .cs-trio-cell {
  padding: 10% 9% 9%;
  border-radius: var(--v6-radius);
}

.cs-body .cs-trio-label { font-size: 16px; }
.cs-body .cs-trio-line { font-size: 14px; }

/* ---- Fig. 04: the result, as one big number ----
   The chart's own head, re-set as Apple sets a spec: a small label, the
   figure at display size, a small line under it. The positive result in
   full ink, the negative one in the page's single accent, as the bar is. */
.cs-body .pv-chapter > .cs-chart {
  justify-self: center;
  width: min(100%, var(--v6-mid));
  margin-top: 0;
}

.cs-body .pv-chapter > .v6-copy + .cs-chart { margin-top: var(--v6-fig-gap); }

.cs-body .cs-bands .cl-panel {
  padding: clamp(24px, 4.6vw, 64px) clamp(20px, 4.6vw, 64px) clamp(28px, 4vw, 56px);
  border: 0;
  border-radius: var(--v6-radius);
  background: var(--surface);
}

.cs-body .cs-chart .cl-head { margin-bottom: clamp(28px, 3.6vw, 48px); }

.cs-body .cs-chart .cl-label {
  margin: 0 0 clamp(8px, 1vw, 14px);
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted);
}

.cs-body .cs-chart .cl-value {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(46px, 8.2vw, 124px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* on a phone the figure breaks after +12.6%, and the arrow travels with
   the number it points at */
.cs-body .cs-chart .v6-pos,
.cs-body .cs-chart .v6-to { white-space: nowrap; }
.cs-body .cs-chart .v6-neg { color: var(--accent); }

.cs-body .cs-chart .v6-arrow {
  display: inline-block;
  margin: 0 0.06em;
  font-weight: 400;
  color: var(--text-muted);
}

.cs-body .cs-chart .cl-value .v6-fn {
  font-size: 0.24em;
  vertical-align: 2.6em;
  color: var(--text-muted);
}

.cs-body .cs-chart .cl-sub {
  max-width: 60ch;
  margin: clamp(12px, 1.4vw, 20px) 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

.cs-body .cs-bars { gap: 12px; }

.cs-body .cs-bar {
  grid-template-columns: 5em minmax(0, 1fr) 4.4em 7.6em;
  column-gap: 16px;
  font-size: 15px;
}

.cs-body .cs-bar-track { height: 26px; }
.cs-body .cs-bar-fill { border-radius: 6px; }
.cs-body .cs-bar-track::before { top: -6px; bottom: -6px; }

/* The accent stays on the negative bar and on the big figure above it.
   The row's small labels go to full ink: on the filled panel the accent
   measures 4.15:1 in dark and 4.31:1 in light, under AA for 15px text.
   Full ink still sets the row apart from the muted ones either side. */
.cs-body .cs-bar.is-neg .cs-bar-v,
.cs-body .cs-bar.is-neg .cs-bar-tag { color: var(--text-primary); }
.cs-body .cs-bar.is-neg .cs-bar-tag { font-weight: 600; }

/* ============================================================
   THE EXPERIMENT CHAPTER, AS AN INSET PANEL

   Apple's page drops one rounded panel onto the ground for the module it
   most wants read as a unit. Here that is the test design: two paragraphs,
   side by side on a wide screen, split where the owner split them.
   ============================================================ */
.cs-body .pv-chapter.v6-panel {
  --v6-pad: clamp(24px, 5vw, 72px);
  width: min(100% - 2 * var(--wrap-gutter, 24px), var(--v6-wide));
  margin-inline: auto;
  padding-block: clamp(64px, 8vw, 128px);
  border-radius: var(--v6-radius);
  background: var(--bg-band);
}

.cs-body .v6-panel .v6-head { margin-bottom: clamp(32px, 4vw, 56px); }

@media (min-width: 1000px) {
  .cs-body .v6-panel .v6-two {
    grid-column: wide;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 5vw, 88px);
    width: min(100%, var(--v6-mid));
  }
  .cs-body .v6-panel .v6-two p { margin: 0; }
}

/* ============================================================
   NOTES
   ============================================================ */
.cs-body .v6-notes {
  width: min(100% - 2 * var(--wrap-gutter, 24px), var(--v6-mid));
  margin: 0 auto;
  padding: 28px 0 clamp(72px, 8vw, 128px);
  border-top: 1px solid var(--rule-soft);
}

.cs-body .v6-notes ol {
  margin: 0;
  padding: 0 0 0 1.25em;
}

.cs-body .v6-notes li {
  max-width: 100ch;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  scroll-margin-top: 96px;
}

/* following a marker lands here; the note comes up to full ink */
.cs-body .v6-notes li:target { color: var(--text-primary); }

/* the last chapter hands straight to the notes */
.cs-body #pv-ch3 { padding-bottom: clamp(64px, 7vw, 112px); }

/* ============================================================
   PREV / NEXT, AS TWO TILES

   The shared band (styles.css) runs edge to edge in near-black. Here it
   takes the shape the rest of the page now uses, two rounded tiles inset
   on the ground, the way Apple ends a page on the next thing to look at.
   Covers, scrims, type and hover are the shared component's, untouched.
   isolation keeps the rounded clip in Safari while the cover scales.
   ============================================================ */
.cs-next {
  width: min(100% - 2 * var(--wrap-gutter, 24px), 1200px);
  margin: 0 auto;
  padding-bottom: clamp(72px, 8vw, 128px);
  gap: clamp(12px, 1.6vw, 24px);
  background: none;
  border-bottom: 0;
}

.cs-next-item {
  min-height: clamp(260px, 32svh, 400px);
  border-radius: clamp(20px, 2.2vw, 32px);
  background: #0a0a08;
  isolation: isolate;
}

.cs-next-item + .cs-next-item { border-left: 0; }

@media (max-width: 700px) {
  .cs-next-item + .cs-next-item { border-top: 0; }
  .cs-next-item { min-height: 220px; }
}

/* ============================================================
   THE LOCAL NAV
   Fixed at the top, above the page and below the site nav. Hidden (off the
   top, out of the tab order) until article.js adds .is-on. While the site nav is
   showing, it rides one site-nav height lower, on the same curve.
   `visibility: inherit` rather than `visible` when on: while the page is
   locked, <main> is visibility: hidden and this must stay hidden with it.
   ============================================================ */
.v6-lnav {
  --v6-lnav-h: 52px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: var(--v6-lnav-h);
  color: var(--text-primary);
  background: var(--bg-cream);
  background: color-mix(in srgb, var(--bg-cream) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--rule-soft);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.v6-lnav.is-on {
  transform: translateY(0);
  visibility: inherit;
  transition: transform 0.3s ease, visibility 0s;
}

.nav:not(.hidden-bar) ~ main .v6-lnav.is-on { transform: translateY(var(--v6-site-nav, 101px)); }

/* over the dark band, in either theme, the bar goes dark with it */
.v6-lnav.is-dark {
  --text-primary: #f7f4f0;
  --text-body: #ded7cd;
  --text-muted: #cac2b6;
  --text-hover: #ffffff;
  --rule-soft: rgba(255, 255, 255, 0.12);
  background: rgba(18, 10, 7, 0.9);
  background: color-mix(in srgb, #120a07 78%, transparent);
}

.v6-lnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  padding: 0 var(--wrap-gutter, 24px);
}

.v6-lnav-title {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text-primary);
  text-decoration: none;
}

.v6-lnav-list {
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2.2vw, 32px);
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v6-lnav-list a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  /* body ink, not muted: the bar is translucent, and over a white capture
     muted ink fell to about 2.4:1. Apple marks the current item the same way,
     by the rule under it rather than by dimming the others. */
  color: var(--text-body);
  text-decoration: none;
  transition: color 0.2s ease;
}

.v6-lnav-list a:hover { color: var(--text-hover); }

.v6-lnav-list a[aria-current="true"] { color: var(--text-primary); }

/* the current chapter, underlined along the bar's bottom edge */
.v6-lnav-list a[aria-current="true"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: currentColor;
}

/* focus: a rounded ring around the word, in place of the site's outline,
   which on a full-height link drew a 52px box pressed against the text */
.v6-lnav-title { position: relative; }
.v6-lnav a:focus-visible { outline: none; }
.v6-lnav a:focus-visible::before {
  content: '';
  position: absolute;
  inset: 11px -9px;
  border: 2px solid var(--text-primary);
  border-radius: 8px;
  pointer-events: none;
}
.v6-lnav .v6-lnav-title:focus-visible::before { inset: -8px -10px; }

/* ============================================================
   FUN MODE: TWO TOKENS PUT BACK

   fun-v2/cs-serious.css restores the serious palette under the intro, but
   two of its copies have gone stale against styles.css: --text-muted is the
   old #756e64 (styles.css moved to #6b6459 for AA on --bg-band), and the
   dark block never restates --accent, so it stays #c73e1d where serious dark
   mode lifts it to #e05a34. Measured: those were the only differences
   between the two modes on this page. This page's copy runs in
   --text-muted, so they are put back here for the article, the local nav
   and prev/next (never the film above). :where() keeps these at zero
   specificity, level with cs-serious.css and ahead of it by order, so the
   band's own tokens and the nav's dark state still win inside them. The
   shared fix belongs in cs-serious.css; see the report.
   ============================================================ */
:where(html.fun-mode body[data-case-study] main > :is(.cs-body, .v6-lnav, .cs-next)) {
  --text-muted: #6b6459;
}

:where(html.fun-mode.dark-mode body[data-case-study]:not(.theme-locked) main > :is(.cs-body, .v6-lnav, .cs-next)) {
  --text-muted: #90918b;
  --accent: #e05a34;
}

/* ============================================================
   NARROWER SCREENS
   ============================================================ */
@media (max-width: 760px) {
  .cs-body { --v6-fig-gap: 48px; }

  /* Fig. 02: stacked, as figures.css already has it, with the rail kept */
  .cs-body .cs-demo .cs-demo-card {
    grid-template-columns: 1fr;
    gap: 68px;               /* room for the glyph between phone and beats */
    padding: 36px 20px 32px;
  }

  /* Fig. 03: three phones stacked is two and a half screens of scrolling.
     They swipe instead, one full tile and the edge of the next in view. */
  .cs-body .pv-chapter > .cs-trio { grid-column: full; }
  .cs-body .cs-trio-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 300px);
    width: auto;
    margin: 0;
    padding: 0 var(--v6-pad) 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--v6-pad);
    scrollbar-width: none;
  }
  .cs-body .cs-trio-row::-webkit-scrollbar { display: none; }
  .cs-body .cs-trio-cell { scroll-snap-align: start; }
  .cs-body .cs-trio .pv-fig-cap { margin-top: 0; padding: 0 var(--v6-pad); }

  .cs-body .pv-chapter.v6-panel {
    --v6-pad: 20px;
    width: calc(100% - 16px);
  }

  .v6-lnav { --v6-lnav-h: 44px; }
}

@media (max-width: 620px) {
  .cs-body .cs-bar {
    grid-template-columns: 6.4em minmax(0, 1fr) 3.9em;
    column-gap: 10px;
    font-size: 13px;
  }
  .cs-body .cs-bar-track { height: 22px; }
}

/* the title makes room for the four chapters on a phone */
@media (max-width: 560px) {
  .v6-lnav-title { display: none; }
  .v6-lnav-list {
    flex: 1;
    justify-content: space-between;
    gap: 8px;
  }
  .v6-lnav-list a { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .v6-lnav,
  .v6-lnav.is-on,
  .v6-lnav-list a { transition: none; }
  .cs-body .v6-demo-toggle { transition: none; }
}

/* ============================================================
   THE FILM, ON ITS OWN

   The one rule set in this file that reaches .cs-context. The explainer
   under the film is gone at the owner's request ("less is more"), so the
   panel now closes just under the film. Its bottom padding is the film's
   side gutter, and that makes the corners nest: the panel's radius
   (2vw) is the film's radius (1.1vw) plus that gutter (0.9vw), the same
   clamps styles-sidebar.css already uses, so the two curves share a centre
   at every width.
   ============================================================ */
.cs-context.is-wide { padding-bottom: clamp(8px, 0.9vw, 16px); }
.cs-context.is-wide .cs-context-film { margin-bottom: 0; }