/* ==========================================================================
   CBC — Premium editorial insight templates (production)
   Three purpose-built article compositions — Perspective, CBC news, Employee
   spotlight — that share one editorial family with the promoted case-study
   template (assets/css/case-study-premium.css, namespace .csp*).

   Promoted from mockups/premium-editorial-templates/assets/css/editorial-premium.css.
   Loaded only by the fourteen pages tools/editorial-premium/build.py renders;
   the mockup navigator's own rules (.ced-nav*, .ced-notes*, .ced-open__inner--single)
   are not promoted because no production page uses them.

   Every selector here is namespaced .ced*, so this file can only affect the
   pages that link it. Nothing in it restyles a shared component
   (.artmore, .icard, .arttags, .chip, .cta, .header, .footer) globally.

   The file borrows tokens only: no new colour, no new face, no new type step.
   Rust stays the single accent, square edges everywhere, the only rust surface
   used is the approved --gradient-hero band and the rust hairline rule.

   Order of the file:
     1  page helpers shared by all three templates
     2  the shared opening masthead
     3  the shared metadata ledger
     4  the shared framed plate
     5  shared editorial prose parts (lede, prose, key lists, quotes)
     6  shared closing region (chips, related row)
     7  Perspective — stacked sectioned argument
     8  CBC news — dateline, announcement, supporting detail
     9  Employee spotlight — portrait opening, numbered Q&A
    10  responsive
    11  reduced motion / forced colors
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE HELPERS
   -------------------------------------------------------------------------- */

/* Section and exchange ids survive as deep-link targets even though no page in
   the family carries in-page navigation any more, so they still clear the fixed
   site bar plus a little editorial air. Scrolling is left at the browser
   default: nothing on these pages animates a scroll. */
.ced-sec,
.ced-qa {
  scroll-margin-top: calc(var(--header-height) + 2.5rem);
}

/* Caps label with a rust tick — the family's one way of opening a module. */
.ced-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.ced-label::before {
  content: '';
  flex: 0 0 auto;
  width: 1.75rem;
  height: 2px;
  background: var(--color-primary);
}

/* The rust hairline that closes a masthead. */
.ced-rule {
  display: block;
  height: var(--rule-height);
  margin-top: clamp(var(--space-10), 4vw, var(--space-16));
  background: var(--gradient-hero);
}

/* --------------------------------------------------------------------------
   2. OPENING MASTHEAD
   Same frame as the case-study opening: type on the page's own base surface,
   the photograph held to a framed plate beside it rather than run full-bleed
   behind white type. Each template varies the column ratio and what sits in
   the text column, never the underlying frame.
   -------------------------------------------------------------------------- */

.ced-open {
  position: relative;
  padding-top: calc(var(--header-height) + clamp(var(--space-8), 4vw, var(--space-16)));
  padding-bottom: clamp(var(--space-10), 4vw, var(--space-16));
  background: var(--color-bg);
}

.ced-open__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-8), 4.5vw, var(--space-20));
}

/* News runs a tighter, wider text column: the announcement is the page. */
.ced-open--news .ced-open__inner {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

/* The spotlight leads with the person, so the portrait takes column one. */
.ced-open--spot .ced-open__inner {
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  align-items: start;
}

.ced-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-family: var(--font-eyebrow);
  font-size: var(--text-xs);
  letter-spacing: var(--track-caps-sm);
  text-decoration: none;
  text-transform: uppercase;
}

.ced-back > span:first-child {
  color: var(--color-primary);
  font-family: Arial, sans-serif;
  font-size: 1.1em;
  transition: transform var(--transition-interactive);
}

.ced-back:hover,
.ced-back:focus-visible {
  color: var(--color-primary);
}

.ced-back:hover > span:first-child,
.ced-back:focus-visible > span:first-child {
  transform: translateX(-0.2rem);
}

.ced-kicker {
  margin: 0 0 clamp(var(--space-5), 2vw, var(--space-7));
}

/* Article titles are sentences, so they use the display face at the display
   step without the wide-tracked caps treatment reserved for one-word page
   titles. Measure held near 24ch so a long title breaks into even lines. */
.ced-title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(2rem, 1.15rem + 2.7vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--color-text);
  text-wrap: pretty;
}

/* A person's name is short, so the spotlight title can run one step larger
   and does not need the reading measure. */
.ced-title--name {
  max-width: none;
  font-size: clamp(2.25rem, 1.3rem + 3vw, 4rem);
}

/* The deck. One sentence of argument or announcement under the title. */
.ced-deck {
  margin: clamp(var(--space-6), 2.4vw, var(--space-8)) 0 0;
  max-width: 48ch;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(var(--text-lg), 1.55vw, 1.5rem);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

@supports (font-variation-settings: 'wght' 250) {
  .ced-deck {
    font-family: 'SwitzerVF', var(--font-display);
    font-variation-settings: 'wght' 280;
  }
}

/* --------------------------------------------------------------------------
   3. METADATA LEDGER
   Label-over-value rows divided by hairlines. Identical mechanics to the
   case-study ledger; each template decides which rows it needs.
   -------------------------------------------------------------------------- */

.ced-meta {
  display: flex;
  flex-wrap: wrap;
  margin: clamp(var(--space-7), 3vw, var(--space-10)) 0 0;
  border-top: 1px solid var(--color-divider);
}

.ced-meta__row {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-5) var(--space-6) 0 0;
}

.ced-meta__row + .ced-meta__row {
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-divider);
}

/* Stacked ledger: for rows whose values are sentences rather than short facts,
   columns would wrap and leave a vertical divider stranded mid-stack, so the
   rows run full width with horizontal rules instead. */
.ced-meta--stack {
  display: block;
}

.ced-meta--stack .ced-meta__row {
  padding: var(--space-5) 0;
}

.ced-meta--stack .ced-meta__row + .ced-meta__row {
  padding-left: 0;
  border-left: 0;
  border-top: 1px solid var(--color-divider);
}

.ced-meta dt {
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.ced-meta dd {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text);
}

.ced-meta dd a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary-tint);
  transition: border-color var(--transition-interactive), color var(--transition-interactive);
}

.ced-meta dd a:hover,
.ced-meta dd a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   4. FRAMED PLATE
   One square-edged photograph, framed rather than bled, with a hairline
   inside the frame so it never floats on white.
   -------------------------------------------------------------------------- */

.ced-plate {
  margin: 0;
}

.ced-plate__frame {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: var(--color-surface-2);
  box-shadow: var(--shadow-md);
}

.ced-plate__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0;
  border: 1px solid rgb(0 0 0 / 0.08);
  pointer-events: none;
}

[data-theme='dark'] .ced-plate__frame::after {
  border-color: rgb(255 255 255 / 0.1);
}

.ced-plate__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* A portrait plate is square, because a headshot is. */
.ced-plate--portrait .ced-plate__img {
  aspect-ratio: 1 / 1;
}

/* --------------------------------------------------------------------------
   5. EDITORIAL PROSE PARTS
   -------------------------------------------------------------------------- */

/* The one paragraph on a page allowed above body size. */
.ced-lede {
  margin: 0;
  max-width: 60ch;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(var(--text-lg), 1.55vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: pretty;
}

@supports (font-variation-settings: 'wght' 250) {
  .ced-lede {
    font-family: 'SwitzerVF', var(--font-display);
    font-variation-settings: 'wght' 280;
  }
}

.ced-p {
  margin: clamp(var(--space-6), 2.4vw, var(--space-8)) 0 0;
  max-width: 68ch;
  font-size: clamp(var(--text-base), 1.05vw, 1.0625rem);
  line-height: 1.62;
  color: var(--color-text);
}

.ced-p--open {
  margin-top: 0;
}

/* Inline source citations (added 2026-08-17 with the 19-Perspective portfolio).
   Evidence is linked where it is claimed, so the link has to read as part of
   the sentence rather than as an interruption: text colour, a rust hairline
   underline, and the underline going solid on hover or keyboard focus. Same
   treatment the metadata ledger already uses, so nothing new is introduced to
   the family. */
.ced-lede a,
.ced-p a,
.ced-keys a,
.ced-quote a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary-tint);
  transition:
    border-color var(--transition-interactive),
    color var(--transition-interactive);
}

.ced-lede a:hover,
.ced-p a:hover,
.ced-keys a:hover,
.ced-quote a:hover,
.ced-lede a:focus-visible,
.ced-p a:focus-visible,
.ced-keys a:focus-visible,
.ced-quote a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Key points. Hairline rows, never boxes: a card per bullet would put five
   rounded tiles on the page and flatten the argument to a feature list. */
.ced-keys {
  margin: clamp(var(--space-8), 3.4vw, var(--space-12)) 0 0;
  padding: 0;
  max-width: 68ch;
  list-style: none;
  border-top: 1px solid var(--color-divider);
}

.ced-keys li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) clamp(var(--space-5), 2vw, var(--space-7));
  border-bottom: 1px solid var(--color-divider);
  font-size: clamp(var(--text-sm), 1vw, 1.0625rem);
  line-height: 1.58;
  color: var(--color-text);
}

.ced-keys li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--space-4) + 0.62em);
  width: 0.6rem;
  height: 2px;
  background: var(--color-primary);
}

.ced-keys strong {
  font-weight: var(--weight-medium);
}

/* The pull quote. One sentence, moved out of the narrative rather than
   repeated from it, set in the display face against a rust keyline. */
.ced-quote {
  margin: clamp(var(--space-8), 3.4vw, var(--space-12)) 0 0;
  padding-left: clamp(var(--space-5), 2vw, var(--space-7));
  border-left: 2px solid var(--color-primary);
  max-width: 46ch;
}

.ced-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(var(--text-lg), 1.9vw, 1.875rem);
  line-height: 1.28;
  letter-spacing: -0.014em;
  color: var(--color-text);
  text-wrap: pretty;
}

/* The lead variant opens a section with the quote rather than closing it, so
   it loses the top space the in-flow variant needs. */
.ced-quote--lead {
  margin-top: 0;
}

.ced-quote figcaption {
  margin: var(--space-4) 0 0;
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* --------------------------------------------------------------------------
   6. CLOSING REGION
   The chip band and the related insight row both sit on the page's own base
   surface, matching the promoted case study: two stacked greys at the foot of
   an article read as a second footer and lose the hairline section break.
   Cards keep square edges here.
   -------------------------------------------------------------------------- */

.ced-related {
  background: var(--color-bg);
}

.ced-more {
  background: var(--color-bg);
}

.ced-more .icard {
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   7. PERSPECTIVE
   A long argument, composed across the full content container rather than a
   single narrow column. Each section is a two-column movement: the rust number
   and the section title hold a fixed left column, the prose runs in a measured
   column beside them, and the key-point lists and pull quotes reach into the
   outer column so the container's width is used instead of left empty. There
   is no contents rail and no sticky furniture: the numbers and titles down the
   left edge are what make the shape of the argument legible while reading.
   -------------------------------------------------------------------------- */

.ced-read {
  background: var(--color-bg);
  padding-bottom: clamp(var(--space-12), 5vw, var(--space-24));
}

/* The reading container is the site's default content width, not the wide
   masthead shell: a stacked argument set inside a 1,600px shell would leave a
   third of the page empty to the right of every paragraph. Section hairlines,
   heads, lists and quotes all run the full width of this container, so the
   composition reads as a deliberate column of the page rather than a body of
   text stranded in an oversized frame. */
.ced-read > .shell {
  max-width: var(--content-default);
}

/* The argument is stacked, not columned: number and title sit on top of each
   section and the body runs beneath them. The section wrapper spans the whole
   content container — the hairline that opens each section runs edge to edge —
   and the elements inside it are deliberately different widths so the container
   is used rather than leaving a dead column on the right. Titles and quotes are
   display type and run wide; body copy is capped at a reading measure; the
   key-point lists run the full width in two columns at desktop sizes. Every
   element starts on the same left line, so the rag on the right is the
   composition rather than an accident. */
.ced-body {
  --ced-measure: 68ch;
  --ced-display: 40ch;
  padding-top: clamp(var(--space-10), 4vw, var(--space-16));
  min-width: 0;
}

/* The opening statement, then the paragraph that follows it, both stacked. */
.ced-body__open > .ced-lede {
  max-width: 52ch;
}

.ced-sec {
  margin-top: clamp(var(--space-10), 4.5vw, var(--space-16));
  padding-top: clamp(var(--space-8), 3vw, var(--space-10));
  border-top: 1px solid var(--color-divider);
}

/* The head is the full width of the section: the number sits above the title,
   and the title is allowed to run into display measure. */
.ced-sec__head {
  margin: 0 0 clamp(var(--space-6), 2.6vw, var(--space-9));
}

.ced-sec__n {
  margin: 0 0 var(--space-4);
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}

.ced-sec__h {
  margin: 0;
  max-width: var(--ced-display);
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(var(--text-xl), 2.9vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: var(--track-tight);
  color: var(--color-primary);
  text-wrap: pretty;
}

/* Key points use the width the stack frees up: two columns of hairline rows at
   desktop sizes, so the band reaches the container's right edge instead of
   stopping at the reading measure. */
.ced-sec > .ced-keys {
  max-width: none;
}

@media (min-width: 1025px) {
  .ced-sec > .ced-keys {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(var(--space-8), 4vw, var(--space-16));
    border-top: 0;
  }

  .ced-sec > .ced-keys li {
    border-top: 1px solid var(--color-divider);
  }

  .ced-sec > .ced-keys li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Pull quotes are display type, so they carry a wider measure than the prose
   and give the stack its second full-width beat. */
.ced-sec > .ced-quote {
  max-width: 34ch;
}

@media (min-width: 1025px) {
  .ced-sec > .ced-quote {
    max-width: none;
  }

  .ced-sec > .ced-quote p {
    max-width: 30ch;
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  }
}

/* The byline. Headshot, name, role, date — the perspective's one human
   element, and the reason a reader trusts the argument. */
.ced-byline {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 1.6vw, var(--space-5));
  margin: clamp(var(--space-7), 3vw, var(--space-9)) 0 0;
  padding-top: clamp(var(--space-6), 2.4vw, var(--space-8));
  border-top: 1px solid var(--color-divider);
}

.ced-byline__shot {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  overflow: hidden;
  border-radius: 0;
  background: var(--color-surface-2);
}

/* The roster portraits are framed for a large card, so at this size the face is
   a speck unless the image is pushed in. The defaults and the variable names
   are the shared site's own (`.povby__shot img`), so a byline whose record sets
   no --shot-* values crops exactly as it did before the migration and a byline
   that sets them keeps its own numbers. transform-origin has to follow the
   object position or the pushed-in crop drifts off the face. */
.ced-byline__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--shot-x, 47%) var(--shot-y, 30%);
  transform: scale(var(--shot-zoom, 1.75));
  transform-origin: var(--shot-x, 47%) var(--shot-y, 30%);
}

.ced-byline__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.ced-byline__role {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   8. CBC NEWS
   Short by design. The announcement is stated once at lede size directly
   under a dateline and the supporting detail runs in one measured column on
   the offset surface. The page closes on the same shared Related pill row the
   other two templates use, so every Related region in the family matches.
   -------------------------------------------------------------------------- */

/* The dateline sits above the title: place and date are the first facts a
   news reader wants. Hairline over and under, nothing else. */
.ced-dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) clamp(var(--space-4), 2vw, var(--space-6));
  margin: 0 0 clamp(var(--space-5), 2vw, var(--space-7));
  font-family: var(--font-eyebrow);
  font-size: var(--text-xs);
  letter-spacing: var(--track-caps-sm);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ced-dateline__place {
  color: var(--color-text);
}

.ced-dateline__sep {
  width: 1.5rem;
  height: 2px;
  background: var(--color-primary);
}

/* Labelled band. A news page has no contents rail, so each movement carries a
   short label in a left column instead. It gives the measured prose column a
   left edge to sit against, so the page reads as a deliberate two-column
   composition rather than one column stranded beside empty space. */
.ced-band {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: start;
}

.ced-band__label {
  margin: 0;
  padding-top: 0.4rem;
}

/* The announcement band. Base surface, one paragraph, generous air. */
.ced-news {
  background: var(--color-bg);
  padding-block: clamp(var(--space-10), 4.5vw, var(--space-16));
  border-bottom: 1px solid var(--color-divider);
}

.ced-news__col {
  max-width: 72ch;
}

/* Supporting detail. Offset surface so the short announcement above it keeps
   the emphasis, and the detail reads as the second movement. */
.ced-detail {
  background: var(--color-surface-2);
  padding-block: clamp(var(--space-10), 4.5vw, var(--space-16));
}

.ced-detail__col {
  max-width: 68ch;
}

/* Sub-head variant. The second news pattern in the build carries its own
   sub-heads inside the supporting detail; they stay sub-heads rather than being
   forced into the single prose run the shorter releases use. Same hairline
   grammar as a perspective section, one step down in scale because these sit
   inside a band that already has a label. */
.ced-subsec {
  margin-top: clamp(var(--space-8), 3.4vw, var(--space-12));
  padding-top: clamp(var(--space-6), 2.6vw, var(--space-9));
  border-top: 1px solid var(--color-divider);
  scroll-margin-top: calc(var(--header-height) + 2.5rem);
}

.ced-subsec__h {
  margin: 0 0 clamp(var(--space-5), 2vw, var(--space-7));
  max-width: 34ch;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(var(--text-lg), 2vw, 1.875rem);
  line-height: 1.12;
  letter-spacing: var(--track-tight);
  color: var(--color-primary);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   9. EMPLOYEE SPOTLIGHT
   People first. A square portrait plate and the person's name open the page,
   the role ledger states the few facts the page itself states, and the page
   then goes straight into the interview as a numbered exchange ledger rather
   than a wall of prose. No display quote and no question index: every sentence
   stays in the answer the source page put it in.
   -------------------------------------------------------------------------- */

.ced-spot__sum {
  margin: clamp(var(--space-6), 2.4vw, var(--space-8)) 0 0;
  max-width: 62ch;
  font-size: clamp(var(--text-base), 1.05vw, 1.0625rem);
  line-height: 1.62;
  color: var(--color-text);
}

/* The interview. One rail per exchange carrying the number, the question as
   the heading, and the answer in a measured column beside it. */
.ced-qas {
  background: var(--color-bg);
  padding-block: clamp(var(--space-10), 4.5vw, var(--space-16));
}

.ced-qa {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  /* Row 1 is the number's own height and row 2 absorbs the rest, so the answer
     spanning both rows cannot push the question down the left column. */
  grid-template-rows: auto 1fr;
  gap: 0 clamp(var(--space-5), 4vw, var(--space-16));
  align-items: start;
  padding-block: clamp(var(--space-8), 3.4vw, var(--space-12));
  border-top: 1px solid var(--color-divider);
}

.ced-qa:last-of-type {
  border-bottom: 1px solid var(--color-divider);
}

/* Explicit placement: the number and the question stack in the narrow left
   column and the answer holds the wide column beside them. Left to auto
   placement, the three children fill the first row and then wrap, which puts
   the answer underneath the number instead of beside the question. */
.ced-qa__n {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  max-width: 3.5rem;
  font-family: var(--font-eyebrow);
  font-size: var(--text-xs);
  letter-spacing: var(--track-caps);
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}

.ced-qa__q {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(var(--text-lg), 1.5vw, 1.5rem);
  line-height: 1.18;
  letter-spacing: var(--track-tight);
  color: var(--color-primary);
  text-wrap: pretty;
}

.ced-qa__a {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
}

.ced-qa__a p {
  margin: 0;
  max-width: 64ch;
  font-size: clamp(var(--text-base), 1.05vw, 1.0625rem);
  line-height: 1.68;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE
   -------------------------------------------------------------------------- */

/* Laptop: the reading measure and the display measure both come in a notch. */
@media (max-width: 1200px) {
  .ced-body {
    --ced-measure: 64ch;
    --ced-display: 34ch;
  }

  .ced-qa {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  }
}

/* Tablet and below: every multi-column frame collapses to one. */
@media (max-width: 960px) {
  .ced-open__inner,
  .ced-open--news .ced-open__inner,
  .ced-open--spot .ced-open__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(var(--space-7), 4vw, var(--space-10));
  }

  .ced-title {
    max-width: 30ch;
  }

  .ced-plate__img {
    aspect-ratio: 16 / 9;
  }

  /* The portrait keeps its square crop but stops filling the column. */
  .ced-plate--portrait {
    max-width: 20rem;
  }

  .ced-plate--portrait .ced-plate__img {
    aspect-ratio: 1 / 1;
  }

  /* The argument is already stacked; below this width every measure simply
     follows the container. */
  .ced-body {
    --ced-display: 100%;
  }

  .ced-qa {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: var(--space-5);
  }

  .ced-qa__n,
  .ced-qa__q,
  .ced-qa__a {
    grid-column: 1;
    grid-row: auto;
  }

  .ced-qa__n {
    margin: 0 0 var(--space-3);
    padding: 0;
    border-bottom: 0;
    max-width: none;
  }

  .ced-band {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .ced-band__label {
    padding-top: 0;
  }
}

/* Phone: ledgers stack, the metadata ledger becomes rows, and nothing keeps a
   second column. */
@media (max-width: 780px) {
  .ced-meta {
    display: block;
  }

  .ced-meta__row {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-divider);
  }

  .ced-meta__row + .ced-meta__row {
    padding-left: 0;
    border-left: 0;
  }

  .ced-meta__row:last-child {
    border-bottom: 0;
  }
}

/* Narrow phone: the display steps come in a notch so nothing sets a line
   wider than the viewport. */
@media (max-width: 380px) {
  .ced-title {
    font-size: 1.8125rem;
  }

  .ced-title--name {
    font-size: 2rem;
  }

  .ced-quote p {
    font-size: var(--text-lg);
  }
}

/* --------------------------------------------------------------------------
   11. REDUCED MOTION / FORCED COLORS
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ced-back > span:first-child,
  .ced-meta dd a {
    transition: none;
  }
}

@media (forced-colors: active) {
  .ced-plate__frame::after {
    border-color: CanvasText;
  }
}