/* Shared typography by content role. Page styles control composition, not type size. */
.subpage {
  --sub-font-sans: Manrope, Arial, sans-serif;
  --sub-font-serif: Cormorant, Georgia, serif;
  --sub-type-title: clamp(48px, 6vw, 52px);
  --sub-type-section: 44px;
  --sub-type-panel: 24px;
  --sub-type-card: 20px;
  --sub-type-lead: 20px;
  --sub-type-detail: 15px;
  --sub-type-body: 14px;
  --sub-type-supporting: 13px;
  --sub-type-action: 12px;
  --sub-type-note: 11px;
  --sub-type-caption: 10px;
  --sub-type-season: 36px;
}

.subpage main { font-family: var(--sub-font-sans); }
.subpage main h1 {
  font: 500 var(--sub-type-title)/1.1 var(--sub-font-sans);
  letter-spacing: -.06em;
}
.subpage main h1 em {
  font: italic 500 1.2em/1.05 var(--sub-font-serif);
  letter-spacing: -.035em;
}
.subpage main h2:not(.eyebrow, .subpage-card-title) {
  font: 500 var(--sub-type-section)/1.1 var(--sub-font-sans);
  letter-spacing: -.06em;
}
.subpage main h2 em {
  font: italic 500 1.18em/1.05 var(--sub-font-serif);
  letter-spacing: -.035em;
}

/* Introductory promises, compact headings, and explanatory detail labels. */
.subpage :is(.opening-copy > p:first-child, .documents-promise, .family-promise, .subpage-lead) {
  font: 400 var(--sub-type-lead)/1.5 var(--sub-font-sans);
  letter-spacing: -.035em;
}
.subpage .document-reading h3 {
  font: 500 var(--sub-type-panel)/1.25 var(--sub-font-sans);
  letter-spacing: -.04em;
}
.subpage :is(.condition-list dt, .climate-note h3, .delivery-list dt, .sample-title h3, .use-notes h3, .family-start-grid h3, .subpage-card-title) {
  font: 500 var(--sub-type-card)/1.3 var(--sub-font-sans);
  letter-spacing: -.035em;
}
.subpage :is(.study-note strong, .document-reading dt, .family-principles dt, .subpage-detail-title) {
  font: 500 var(--sub-type-detail)/1.5 var(--sub-font-sans);
  letter-spacing: -.025em;
}
.subpage .seasonal-line h3 {
  font: italic 500 var(--sub-type-season)/1.1 var(--sub-font-serif);
  letter-spacing: -.025em;
}

/* Reading copy and the shorter explanations beside drawings or in lists. */
.subpage :is(.copy, .opening-copy > p:not(:first-child), .context-copy, .planting-contact-inner > div:last-child > p, .documents-contact p:not(.eyebrow), .family-contact p:not(.eyebrow)) {
  font: 400 var(--sub-type-body)/1.9 var(--sub-font-sans);
  letter-spacing: normal;
}
.subpage :is(.condition-list dd, .note-copy, .seasonal-line p, .climate-note p, .delivery-list dd, .reading-intro, .document-reading dd, .sample-item > p, .use-notes article p, .family-start-grid p, .family-principles dd, .details-list details > div, .subpage-supporting) {
  font: 400 var(--sub-type-supporting)/1.9 var(--sub-font-sans);
  letter-spacing: normal;
}
.subpage .details-list summary {
  font: 500 var(--sub-type-body)/1.65 var(--sub-font-sans);
  letter-spacing: normal;
}
.subpage :is(.study-footnote, .family-study-foot, .reading-note, .samples-foot > p, .document-scope p, .delivery-end p, .subpage-note) {
  font: 400 var(--sub-type-note)/1.8 var(--sub-font-sans);
  letter-spacing: normal;
}

/* Eyebrows are labels even when marked up as an accessible section heading. */
.subpage main :is(.eyebrow, .reading-label) {
  font: 600 var(--sub-type-caption)/1.6 var(--sub-font-sans);
  letter-spacing: .13em;
}
.subpage :is(.planting-panorama figcaption, .study-caption, .document-board figcaption, .sample-sheet figcaption, .family-garden-photo figcaption, .family-plan-top, .sample-title > span, .subpage-caption) {
  font: 400 var(--sub-type-caption)/1.5 var(--sub-font-sans);
  letter-spacing: normal;
}
.subpage :is(.condition-list dt > span, .delivery-list dt > span, .note-number, .season-index, .use-number, .family-number, .documents-index a > span) {
  font: 400 var(--sub-type-caption)/1.5 var(--sub-font-sans);
  letter-spacing: normal;
}
.subpage :is(.text-link, .button) {
  font: 600 var(--sub-type-action)/1.5 var(--sub-font-sans);
  letter-spacing: normal;
}
.subpage :is(.document-tabs button, .documents-index a) {
  font: 500 var(--sub-type-action)/1.6 var(--sub-font-sans);
  letter-spacing: normal;
}
.subpage :is(.contact-secondary, .study-reset, .family-plan-reset) {
  font: 400 var(--sub-type-note)/1.6 var(--sub-font-sans);
  letter-spacing: normal;
}
.subpage .climate-label {
  font: 400 var(--sub-type-supporting)/1.6 var(--sub-font-sans);
  letter-spacing: normal;
}

@media (max-width: 800px) {
  .subpage {
    --sub-type-title: clamp(36px, calc(6.4vw + 4px), 52px);
    --sub-type-section: 40px;
    --sub-type-lead: 18px;
    --sub-type-season: 32px;
  }
}
@media (max-width: 450px) {
  .subpage {
    --sub-type-title: clamp(34px, calc(8.3vw + 4px), 41px);
    --sub-type-section: 36px;
  }
}