/* ═══════════════════════════════════════════════════════════ Stouffer AI — Typography Scale Enforcement Loaded LAST in — overrides page-level declarations. Audience: 65+, presbyopia/progressive-lens-safe minimums. ═══════════════════════════════════════════════════════════ */ /* ── Base reading size ───────────────────────────────────── */ body { font-size: 21px; line-height: 1.7; } /* Explicit element rules so inheritance doesn't drop below target */ p { font-size: 21px; line-height: 1.7; } li { font-size: 21px; line-height: 1.7; } /* ── Headings ────────────────────────────────────────────── */ h1 { font-size: clamp(28px, 4vw, 34px); line-height: 1.25; } h2 { font-size: 28px; line-height: 1.3; } h3 { font-size: 22px; line-height: 1.35; } h4 { font-size: 19px; line-height: 1.4; } /* ── Nav links ───────────────────────────────────────────── */ .nav-links a { font-size: 18px; } /* ── Responsive grids: add 3-col step at 1100px ─────────── */ /* Without these, larger type can overflow 4-col layouts */ @media (max-width: 1100px) { .how-steps, .topic-grid, .expect-grid, .gp-care-grid { grid-template-columns: repeat(3, 1fr); } /* Inline-style grids require !important to override the style attribute */ .ways-strip, .prompt-claims { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 700px) { .how-steps, .topic-grid, .expect-grid, .gp-care-grid { grid-template-columns: repeat(2, 1fr); } .ways-strip, .prompt-claims { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .how-steps, .topic-grid, .expect-grid, .gp-care-grid { grid-template-columns: 1fr; } .ways-strip, .prompt-claims { grid-template-columns: 1fr !important; } } /* ── Follow-up question cards ─────────────────────────────── */ /* Stack category label above question text on every topic page. */ .followup-item { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } .followup-item .fu-label, .followup-item .fu-prompt, .followup-item .fu-text { display: block !important; width: 100% !important; max-width: 100% !important; white-space: normal !important; min-width: 0 !important; float: none !important; }