/* Modern Natural — production type and rhythm, Phase 5.
 * Tokens and explicit opt-ins only. No element reset, font download, card/grid
 * layout or workspace inheritance. Module owners choose the semantic role.
 * The separate 80-typography.css remains a lab-only composition reference.
 */
:root {
  --al-type-page: clamp(1.875rem, 3.5vw, 3rem);
  --al-type-display: clamp(1.875rem, 4vw, 3.5rem);
  --al-type-member-title: clamp(1.75rem, 3.2vw, 2.125rem);
  --al-type-compact-title: 1.875rem;
  --al-type-section: 1.5rem;
  --al-type-card: 1.125rem;
  --al-type-card-compact: 1rem;
  --al-type-body: 1rem;
  --al-type-support: .875rem;
  --al-type-meta: .8125rem;
  --al-type-caption: .75rem;
  /* Same database roles; widths, media and grid geometry stay module-owned. */
  --al-type-database-hero: clamp(1.875rem, 3.6vw, 3.25rem);
  --al-type-database-description: var(--al-type-body);
  --al-leading-database-description: var(--al-leading-body);
  --al-type-database-card: var(--al-type-card-compact);
  --al-type-database-scientific: var(--al-type-meta);
  --al-weight-title: 700;
  --al-weight-heading: 600;
  --al-weight-body: 400;
  --al-tracking-title: -.02em;
  --al-leading-title: 1.15;
  --al-leading-heading: 1.35;
  --al-leading-body: 1.55;
  --al-leading-support: 1.45;
  --al-rhythm-xs: .25rem;
  --al-rhythm-sm: .5rem;
  --al-rhythm-md: .75rem;
  --al-rhythm-lg: 1rem;
  --al-rhythm-xl: 1.5rem;
  --al-rhythm-section: 2rem;
  --al-mobile-page-gutter: 16px;
}
@media (max-width: 359px) {
  :root { --al-mobile-page-gutter: 12px; }
}
/* Audited directory shells own one gutter. Card/hero padding is unchanged.
 * Content opt-ins exclude Planner, aquarium detail and Studio. */
@media (max-width: 767px) {
  :root {
    --al-type-section: 1.25rem;
    --al-type-database-description: var(--al-type-support);
    --al-leading-database-description: var(--al-leading-support);
    --al-type-database-card: var(--al-type-support);
    --al-type-database-scientific: var(--al-type-caption);
  }
  #content .elementor .e-parent:has(.al-toolsHub, #alLessonsLibrary) {
    padding-inline: var(--al-mobile-page-gutter);
  }
  .al-toolsHub, #alLessonsLibrary {
    --al-directory-inner-gutter: 0px;
  }
  #content .elementor .e-parent:has(#alDash) {
    --al-page-gutter: var(--al-mobile-page-gutter);
  }
  #alMemberArea .al-member-page-frame:has(> #alDash) {
    --al-member-frame-padding-x: 0px;
  }
}
.al-type-page { font-size: var(--al-type-page); line-height: var(--al-leading-title); }
.al-type-section { font-size: var(--al-type-section); line-height: var(--al-leading-heading); }
.al-type-card { font-size: var(--al-type-card); line-height: var(--al-leading-heading); }
.al-type-body { font-size: var(--al-type-body); line-height: var(--al-leading-body); }
.al-type-support, .al-type-label { font-size: var(--al-type-support); line-height: var(--al-leading-support); }
.al-type-meta { font-size: var(--al-type-meta); line-height: var(--al-leading-support); }
.al-type-caption { font-size: var(--al-type-caption); line-height: var(--al-leading-support); }