/* Editorial layout treatment — shared module
   Spec: docs/superpowers/specs/2026-05-02-editorial-layout-design.md
   Plan: docs/superpowers/plans/2026-05-02-editorial-layout.md

   Apply selectively per the discipline rules. Each technique earns its
   place by passing the substance test in the spec. Mechanically applying
   every class to every page produces templated-feel — the entire premise
   of this sprint is that techniques deployed selectively feel intentional.
*/

/* Narrow center column for prose blocks. Matches /diagnostic-first content
   column width. ~75 characters at 18px Inter Variable body. */
.narrow-column {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Drop cap on the lead paragraph. Float-left Instrument Serif uppercase
   first letter, sized to span ~3 lines of body text. Apply via class on
   the <p> element OR via a wrapping span — the ::first-letter pseudo
   keeps the markup clean.

   IMPORTANT: deploy only when lead paragraph earns it per spec discipline. */
.drop-cap::first-letter {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 4.2em;
  line-height: 0.9;
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--text-primary);
  font-weight: 400;
}

/* Pull quote — one per page maximum. Larger Instrument Serif, italic-style
   weighting, generous vertical margin. Strongest single sentence on the
   page deserves isolation in larger type.

   IMPORTANT: deploy only when a sentence earns it per spec discipline. */
.pull-quote {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  line-height: 1.35;
  color: var(--text-primary);
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 24px;
  margin: 56px 0;
  max-width: 600px;
}

/* Section rhythm helper. 96px vertical padding between major sections.
   Calibrated for long-form prose (/why-onboardics, /diagnostic-first) where
   dense paragraphs absorb the breathing room. */
.section-rhythm {
  padding-top: 96px;
  padding-bottom: 96px;
}

/* Compact section rhythm — half the breathing room of .section-rhythm.
   Use on content-sparse pages where sections contain a single card or
   short feature list (persona pages). Discipline rule (refined 2026-05-02
   in production): pages with short-section structure accumulate the 96px
   rhythm into dead space; the compact 48px variant keeps editorial intent
   without producing 50%+ padding-to-content ratios. */
.section-rhythm-compact {
  padding-top: 48px;
  padding-bottom: 48px;
}

/* Editorial section header. Instrument Serif, smaller than h1.
   Default unnumbered variant: Instrument Serif h2 + em-dash + descriptor.
   Numbered variant adds <span class="num"> prefix for linear-argument pages. */
.section-header-editorial {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  line-height: 1.25;
  color: var(--text-primary);
  font-weight: 400;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.section-header-editorial .num {
  color: var(--text-tertiary);
  font-feature-settings: 'tnum';
  margin-right: 8px;
}
.section-header-editorial::after {
  /* No automatic em-dash — markup includes it explicitly to keep render
     predictable when the section title is short. */
}

/* Mobile responsive adjustments. */
@media (max-width: 768px) {
  .narrow-column {
    padding-left: 16px;
    padding-right: 16px;
  }
  .drop-cap::first-letter {
    font-size: 3.4em;
    margin: 0.06em 0.1em 0 0;
  }
  .pull-quote {
    font-size: 22px;
    padding: 4px 0 4px 16px;
    margin: 40px 0;
  }
  .section-rhythm {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .section-rhythm-compact {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .section-header-editorial {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .drop-cap::first-letter {
    font-size: 2.8em;
  }
  .pull-quote {
    font-size: 20px;
  }
}