/* ============================================================
   DoctorNYC — shared typographic + contrast layer
   Loaded AFTER each page's inline <style> so it overrides it.

   Purpose: raise body/label copy to a legible size and bring all
   reading text to full opacity at WCAG AA (4.5:1) or better,
   without altering layout, palette or the editorial character.

   Verified contrast ratios (WCAG 2.1):
     #ece6d8 on #614338 (brown)      7.13 : 1   AA / AAA
     #ece6d8 on #4a3129 (deep brown) 9.58 : 1   AA / AAA
     #ece6d8 on #2a1f1a (ink)       12.88 : 1   AA / AAA
     #c9bba8 on #614338              4.71 : 1   AA
     #c9bba8 on #2a1f1a              8.52 : 1   AA / AAA
     #5e4137 on #ece6d8 (cream)      7.37 : 1   AA / AAA
     #5e4137 on #e0d8c8              6.88 : 1   AA / AAA
     #5e4137 on #d4c9b4              5.48 : 1   AA / AAA
     #614338 on #d4c9b4              5.41 : 1   AA / AAA
   ============================================================ */

:root {
  /* type scale */
  --fs-body:    1.125rem;   /* 18px — paragraphs */
  --fs-body-sm: 1.0625rem;  /* 17px — feature lists, dense copy */
  --fs-label:   1rem;       /* 16px — small labels, captions */
  --fs-eyebrow: .8125rem;   /* 13px — tracked all-caps eyebrows */
  --fs-ui:      .78rem;     /* 12.5px — nav chrome, legal line */
  --lh-body:    1.62;

  /* reading colours — full opacity, AA verified */
  --cr-body: #ece6d8;  /* body copy on any brown */
  --cr-soft: #c9bba8;  /* secondary copy on any brown */
  --br-body: #5e4137;  /* body copy on any cream */

  /* Cormorant needs weight to hold at small sizes */
  --w-body: 500;
}

/* Cormorant Garamond is optically light; anywhere it carries
   running copy or small text it gets weight 500 so the stems
   survive at 16–18px. */
.section-title, .cta-title, .hero-h1, .ph-h,
.tier-name, .pillar-title, .step-title, .faq-trigger,
.test-quote, .intro-quote, .press-card-title, .journal-card-title,
.press-cta-title, .press-logo-name, .confirm-title,
.sb-title, .fs-title, .success-title,
.legal-content h2, .article-content h2, .article-content blockquote {
  font-weight: var(--w-body);
}

/* ── running copy ─────────────────────────────────────────── */
.hero-sub,
.intro-body,
.membership-sub,
.pillar-body,
.step-body,
.cta-body,
.faq-answer p,
.faq-sidebar-body,
.ph-sub,
.press-intro, .press-card-excerpt, .press-cta-text,
.journal-intro, .journal-card-excerpt,
.legal-content p, .legal-content li,
.article-content p, .article-content li,
.sb-body, .fs-desc, .success-body, .confirm-body,
.radio-text, .consent-text,
.footer-tagline {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: .012em;
}

/* ── dense copy: feature lists, sub-labels ────────────────── */
.tier-features li,
.sb-list li,
.radio-sub,
.confirm-steps li,
.footer-links a,
.footer-address,
.intro-attr,
.test-role,
.tier-tagline {
  font-size: var(--fs-body-sm);
  line-height: 1.58;
  letter-spacing: .012em;
}

/* ── small labels ─────────────────────────────────────────── */
.stat-label,
.test-name,
.field label,
.notice-text,
.submit-note,
.sb-contact,
.press-card-link, .journal-card-link, .press-cta-email,
.article-cta-btn, .back-link,
.btn-primary, .btn-ghost, .cta-btn, .tier-cta, .btn-submit, .btn-home,
.ph-call-btn, .ph-call-alt, .callout-btn,
.mf-links a {
  font-size: var(--fs-label);
}

/* the fixed mobile call bar is chrome, not copy: it has to hold a label
   and a phone number on one line at 375px, so it stays tracked-small */
.sticky-call a { font-size: var(--fs-eyebrow); letter-spacing: .12em; }

/* ── tracked all-caps eyebrows: keep the caps, raise the size ── */
.eyebrow,
.hero-eyebrow,
.cta-eyebrow,
.tier-num,
.step-num,
.footer-col-title,
.ph-ey,
.fs-label,
.press-card-pub, .journal-card-date,
.legal-updated, .article-meta,
.confirm-steps-title,
.sb-badge span, .confirm-badge span,
.cta-footnote,
.footer-legal, .footer-press {
  font-size: var(--fs-eyebrow);
  letter-spacing: .26em;
}
.cta-footnote, .footer-legal, .footer-press { letter-spacing: .1em; }
.press-card-pub, .journal-card-date, .article-meta, .legal-updated { letter-spacing: .22em; }

/* ── nav chrome ───────────────────────────────────────────── */
.nav-links a { font-size: var(--fs-ui); letter-spacing: .16em; }
.nav-links { gap: 1.7rem; }
.nav-cta { font-size: var(--fs-ui) !important; letter-spacing: .16em !important; padding: .8rem 1.5rem !important; }

/* ── form controls ────────────────────────────────────────── */
.field input, .field select, .field textarea { font-size: var(--fs-body); }
.btn-submit, .btn-home { letter-spacing: .24em; }

/* ============================================================
   CONTRAST — every reading colour to full opacity
   ============================================================ */

/* on brown (#614338) and deep brown (#4a3129).
   NB: .page-header is brown on every interior page, so .ph-* copy
   belongs here and never in the cream group below. */
.hero-sub,
.membership-sub,
.tier-features li,
.step-body,
.cta-body,
.ph-sub,
.ph-call-alt,
.section-title-light,
.mobile-overlay a {
  color: var(--cr-body);
  opacity: 1;
}
.hero-eyebrow,
.cta-eyebrow,
.tier-num,
.tier-tagline,
.step-num,
.cta-footnote,
.hero-right-labels span,
.btn-ghost,
.tier-cta,
.hero-h1 em,
.cta-title em,
.section-title-light em,
.nav-links a,
.ph-ey,
.ph-call-note,
.hero-scroll span {
  color: var(--cr-soft);
  opacity: 1;
}
.tier-features li::before { color: var(--cr-soft); }
.tier-cta { border-color: rgba(236,230,216,.32); }
.tier-cta:hover { border-color: var(--cr); color: var(--cr); }
.btn-ghost::after { background: var(--cr-soft); }
.btn-ghost:hover { color: var(--cr); }
#mainNav .nav-links a:hover { color: var(--cr) !important; }
#mainNav.scrolled .nav-links a { color: var(--br-body); }
#mainNav.scrolled .nav-links a:hover { color: var(--br) !important; }

/* on cream (#ece6d8 / #e0d8c8 / #d4c9b4) */
.intro-body,
.pillar-body,
.faq-answer p,
.faq-sidebar-body,
.press-intro, .press-card-excerpt, .press-cta-text,
.journal-intro, .journal-card-excerpt,
.legal-content p, .legal-content li,
.article-content p, .article-content li,
.sb-body, .sb-list li, .fs-desc, .success-body, .confirm-body,
.radio-text, .radio-sub, .consent-text,
.stat-label,
.test-role,
.intro-attr,
.field label,
.notice-text, .submit-note, .sb-contact,
.legal-updated, .article-meta,
.press-card-pub, .journal-card-date,
.confirm-steps li,
.eyebrow,
.strip-item {
  color: var(--br-body);
  opacity: 1;
}
.strip-item { color: var(--br); }
.test-quote, .intro-quote { color: var(--inkl, #3d2e28); }

/* footer on ink (#2a1f1a) */
.footer-tagline, .footer-address, .footer-links a, .footer-col-title,
.footer-brand, .footer-press, .footer-legal, .mf-links a {
  color: var(--cr-soft);
  opacity: 1;
}
.footer-links a:hover, .footer-address a:hover, .mf-links a:hover { color: var(--cr); }

/* the accordion has to fit copy that is now ~55% taller */
.faq-answer.active { max-height: 46rem; }

/* visible keyboard focus, in-brand */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cr-soft);
  outline-offset: 3px;
}
.faq { --focus: var(--br); }
.testimonials a:focus-visible, .faq a:focus-visible,
.faq button:focus-visible, .intro a:focus-visible {
  outline-color: var(--br);
}

/* ── page headers, mini footer, journal article components ── */
.ph-h em { color: var(--cr-soft); }
.mf-logo, .mobile-close { color: var(--cr-soft); opacity: 1; }

.article-cta p,
.key-takeaways li,
.related-reading li,
.neighborhood-card p,
.toc li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--br-body);
  opacity: 1;
}
.compare-table, .compare-table td { font-size: var(--fs-label); color: var(--br-body); }
.compare-table th { font-size: var(--fs-body); font-weight: var(--w-body); }
.key-takeaways-label, .toc-label, .related-reading-label, .related-label {
  font-size: var(--fs-eyebrow); letter-spacing: .26em; color: var(--br); opacity: 1;
}

/* accordion affordance */
.faq-icon { font-size: 1.15rem; }

/* ── longevity & preventative medicine section + recognition plate ── */
.lon-card-title, .lon-band-title { font-weight: var(--w-body); }
.lon-lede { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: .012em; color: var(--br-body); opacity: 1; }
.lon-card-body { font-size: var(--fs-body-sm); line-height: 1.58; letter-spacing: .012em; color: var(--br-body); opacity: 1; }
.lon-card-list li { font-size: var(--fs-label); color: var(--br-body); opacity: 1; }
.lon-cred { font-size: var(--fs-eyebrow); letter-spacing: .18em; color: var(--br); opacity: 1; }
.lon-band-body { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--cr-soft); opacity: 1; }
.award-caption { font-size: var(--fs-eyebrow); letter-spacing: .2em; color: var(--cr-soft); opacity: 1; }

/* ── mobile: never below 16px ─────────────────────────────── */
@media (max-width: 1240px) and (min-width: 961px) {
  /* keep the eight-item nav on one line as sizes go up */
  .nav-links { gap: 1.15rem; }
  .nav-links a { letter-spacing: .1em; }
  .nav-cta { padding: .75rem 1.15rem !important; letter-spacing: .1em !important; }
}

@media (max-width: 960px) {
  :root {
    --fs-body:    1.0625rem;  /* 17px */
    --fs-body-sm: 1rem;       /* 16px */
    --fs-label:   1rem;       /* 16px */
    --fs-eyebrow: .8125rem;   /* 13px */
    --lh-body:    1.65;
  }
  .hero-sub { max-width: none; }
  .eyebrow, .hero-eyebrow, .cta-eyebrow { letter-spacing: .2em; }
}