/* Shared responsive typography and spacing for every Community page. */
:root {
    --font-h1: clamp(2rem, 4vw, 3.3rem);
    --font-h2: clamp(1.375rem, 2.6vw, 1.75rem);
    --font-h3: clamp(1.125rem, 2vw, 1.3rem);
    --font-body: clamp(.875rem, calc(.825rem + .25vw), 1rem);
    --font-small: clamp(.8125rem, calc(.79rem + .1vw), .875rem);
    --font-caption: .75rem;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: clamp(.5rem, calc(.4rem + .5vw), .75rem);
    --space-4: clamp(.75rem, calc(.6rem + .6vw), 1rem);
    --space-5: clamp(1rem, calc(.75rem + 1vw), 1.5rem);
    --space-6: clamp(1.25rem, calc(.9rem + 1.5vw), 2rem);
    --space-8: clamp(1.75rem, calc(1rem + 3vw), 3rem);
    --space-10: clamp(2.5rem, calc(1.5rem + 4vw), 4rem);
    --space-12: clamp(3rem, calc(2rem + 5vw), 6rem);
    --panel-padding: var(--space-6);
    --section-space: var(--space-8);
    --page-top-space: var(--space-6);
    --page-heading-space: var(--space-6);
}

body { font-size: var(--font-body); line-height: 1.6; }
h1 { font-size: var(--font-h1); }
h2 { font-size: var(--font-h2); }
h3 { font-size: var(--font-h3); }
h4 { font-size: var(--font-body); }
h5 { font-size: var(--font-small); }
h6 { font-size: var(--font-caption); }
h4, h5, h6 { margin-top: 0; color: var(--text); font-weight: 600; line-height: 1.3; }

/* Explicit type utilities take precedence over inherited component typography.
   Heading level remains semantic; these classes select its visual size. */
.heading-1 { font-size: var(--font-h1) !important; line-height: 1.12 !important; letter-spacing: -.045em; }
.heading-2 { font-size: var(--font-h2) !important; line-height: 1.15 !important; letter-spacing: -.035em; }
.heading-3 { font-size: var(--font-h3) !important; line-height: 1.3 !important; letter-spacing: -.025em; }
.heading-link { color: inherit; text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.heading-link:hover, .heading-link:focus-visible { color: var(--cyan); text-decoration-line: underline; }
.text-body, .text-description { font-size: var(--font-body) !important; line-height: 1.6 !important; }
.text-description, .text-muted { color: var(--muted) !important; }
.text-small { font-size: var(--font-small) !important; line-height: 1.5 !important; }
.text-caption { font-size: var(--font-caption) !important; line-height: 1.5 !important; color: var(--muted); }
.text-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.field-help { font-size: var(--font-caption); color: var(--muted); }

/* Put card-typography on the card's text column. These size modifiers retain
   the heading and text-description styles, including the inherited site font. */
.card-typography { container-type: inline-size; }
.card-typography .card-title { font-size: clamp(1rem, calc(.875rem + 1cqi), 1.125rem) !important; line-height: 1.3 !important; }
.card-typography .card-description { font-size: clamp(.8125rem, calc(.75rem + .5cqi), .9375rem) !important; line-height: 1.45 !important; }
.card-typography .card-meta { font-size: clamp(.75rem, calc(.6875rem + .5cqi), .8125rem) !important; line-height: 1.4 !important; }