/* ============================================================
   reading.css — skim primitives
   Long-form argument sections need two things the base system
   doesn't have: a one-line summary under each heading, and a
   small label that breaks a long section into scannable blocks.
   Key claims reuse .quote, so the accent gesture stays single.
   Tokens only. No literal values.
   ============================================================ */

/* One-sentence summary directly under a section heading.
   A reader who only reads the ledes still gets the argument. */
.lede {
  font-size: var(--size-lead);
  line-height: 1.45;
  color: var(--ink);
  max-width: var(--measure);
  margin-bottom: var(--space-7);
}

/* Opens a block inside a section. Same voice as .label,
   without the number-and-rule pairing that marks a section. */
.sublabel {
  display: block;
  margin-top: var(--space-8);
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  letter-spacing: var(--track-loose);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* A .quote used as a key claim rather than a testimonial needs
   air above it; testimonials get their spacing from .proof. */
.quote--claim { margin-top: var(--space-7); }

/* Section photograph. Content, not decoration: full container width, hairline
   above a mono caption in the photo-editorial style. Reuses the portraits'
   B&W treatment, so a color source can never break the page. */
.section-figure { margin: var(--space-8) 0; }

.section-figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.04);
}

.section-figure figcaption {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  letter-spacing: var(--track-loose);
  text-transform: uppercase;
  color: var(--ink-faint);
}