/* ═════════════════════════════════════════════════════════════════════
   STRUCTURAL RHYTHM — single source of truth for <main class="dc-page">
   No !important allowed in this file. Cascade conflicts resolved by
   specificity. See spec § Architecture / Layer 3.
   Inert until a page emits <main class="dc-page">.
   ═════════════════════════════════════════════════════════════════════ */

/* Page shell */
main.dc-page {
  background: var(--deck-cream-2);
  color: var(--deck-slate);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Transitional bridge — paints the Blocksy chrome that wraps <main>.
   Required during Phase 1; deleted in Phase 2 when Blocksy is gone.
   Baseline confirmed safe via Task 1 audit (audit-task1-preflight.md):
   #main-container already has 0 padding; only .ct-container-full has
   20px padding-block-start which dc-section--hero's 120px replaces. */
body:has(main.dc-page) #main-container,
body:has(main.dc-page) .ct-container-full,
body:has(main.dc-page) .entry-content,
body:has(main.dc-page) main.site-main,
body:has(main.dc-page) article {
  background: var(--deck-cream-2);
  padding: 0;
}

/* Section rhythm */
main.dc-page > section {
  padding-block: var(--rhythm-major);
}
main.dc-page > section.dc-section--hero {
  padding-block-start: calc(var(--rhythm-major) * 1.25);
}
main.dc-page > section.dc-section--dark {
  background: var(--deck-ink);
  color: var(--deck-cream);
}
main.dc-page > section.dc-section--dark h1,
main.dc-page > section.dc-section--dark h2,
main.dc-page > section.dc-section--dark h3 {
  color: var(--deck-cream);
}
main.dc-page > section.dc-section--inset {
  background: var(--deck-cream-3);
}
main.dc-page > section.dc-section--narrow .dc-container {
  max-width: 750px;
}

/* Container */
main.dc-page .dc-container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Content rhythm inside a section */
main.dc-page .dc-section > .dc-container > * + * {
  margin-block-start: var(--rhythm-minor);
}
main.dc-page .dc-section p + p {
  margin-block-start: var(--rhythm-inline);
}
main.dc-page .dc-section .eyebrow + h1,
main.dc-page .dc-section .eyebrow + h2 {
  margin-block-start: var(--rhythm-tight);
}
main.dc-page .dc-section h2 + p,
main.dc-page .dc-section h3 + p {
  margin-block-start: var(--rhythm-tight);
}

/* Typography */
main.dc-page h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--deck-ink);
  line-height: 1.05;
}
main.dc-page h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--deck-ink);
}
main.dc-page h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--deck-ink);
}
main.dc-page p {
  font-size: 17px;
  line-height: 1.6;
  max-width: 64ch;
}
main.dc-page .lede {
  font-size: 18px;
  max-width: 60ch;
}
main.dc-page .eyebrow {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--deck-gold);
}

@media (max-width: 768px) {
  main.dc-page h1 { font-size: 32px; }
  main.dc-page h2 { font-size: 26px; }
  main.dc-page > section.dc-section--hero {
    padding-block-start: var(--rhythm-major);
  }
}