/* UI-73 — designer-approved typography, 2026-10-09.
   The reviewed handoff is docs/typography-approved.json. No debug editor or
   runtime JSON fetch is required. Load after phone.css so fonts/colors are
   consistent everywhere; desktop size rules below leave compact sizes alone.

   Exact design sizes, not the exported viewport-dependent sizeFactor. rem
   follows the existing public desktop multiplier once, with a 1920x1080 1x
   reference. No root, frame, spacing, line-height or animation changes here. */
:root {
    --type-hero: 5rem;          /* 80px at 1x */
    --type-heading: 3.75rem;    /* 60px */
    --type-label: 1.5625rem;    /* 25px */
    --type-reading: 1.25rem;    /* 20px */
    --type-small: 1.03125rem;   /* 16.5px — intentional */
    --type-control: .875rem;    /* 14px */
    --type-reading-ink: #181715;
    --type-pilot-ink: #faf6ed;
    /* UI-73 approved accessibility exception; UI-74 updates the brand guide.
       #655d52 on sand is 5.22:1; the handoff's #8e877d was 2.86:1. */
    --type-footer-ink: var(--muted);
}

/* The approved export is light-theme only. Retain the existing debug dark
   palette instead of putting the approved dark ink on a dark background. */
:root[data-theme="dark"] {
    --type-reading-ink: var(--ink);
    --type-pilot-ink: var(--band-dark-ink);
    --type-footer-ink: var(--muted);
}

/* Display headings retain their existing inline Chintzy italic accents. */
#hero .hero__card h1,
#problem .problem__copy .display,
:is(#approach, #diagnostic-pilot, #services, #use-cases, #about, #why, #contact) h2 {
    font-family: var(--display);
    font-weight: 400;
    font-synthesis: none;
}

#approach .step h3,
#services .card h3,
#use-cases .cases__item button {
    font-family: var(--display);
    font-weight: 400;
    font-style: normal;
    font-synthesis: none;
}
#approach .step h3,
#services .card h3 { color: var(--type-reading-ink); }

/* Trap is the approved reading face for these blocks, including Hero/About
   intros. Nature is retained explicitly for the other introductory roles. */
#hero .hero__card .lede,
#problem .problem__copy p,
#approach .step p,
#services .card__back p,
#use-cases .cases__detail p,
#about :is(.lede, .note),
#why .reason p,
#diagnostic-pilot .pilot__gets li {
    font-family: var(--body);
    font-weight: 400;
    font-style: normal;
    font-synthesis: none;
    color: var(--type-reading-ink);
}

#approach .approach__head .note,
#diagnostic-pilot :is(.lede, .pilot__gets h3),
#contact > .wrap > p {
    font-family: var(--ui);
    font-weight: 400;
    font-style: normal;
    font-synthesis: none;
    color: var(--type-reading-ink);
}

/* Match explicit normal-style edits on inline text without removing the
   separate italic accents in display headings or touching CTA hover states. */
:is(#hero .hero__card .lede, #problem .problem__copy p,
    #approach .step p, #approach .approach__head .note,
    #services .card__back p, #use-cases .cases__detail p,
    #about .lede, #about .note, #why .reason p,
    #diagnostic-pilot .lede, #diagnostic-pilot .pilot__gets,
    #contact > .wrap > p) :is(em, strong, b, i, span) {
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    color: inherit;
    font-synthesis: none;
}

#diagnostic-pilot :is(h2, .lede, .pilot__gets h3, .pilot__gets li) {
    color: var(--type-pilot-ink);
}
#services .card__more {
    font-family: var(--ui);
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
}
.footer .footer__meta { color: var(--type-footer-ink); }

/* Shared wide composition, including landscape tablets. Compact phone and
   portrait-tablet sizing stays independent from the root multiplier. */
@media (min-width: 1101px), (min-width: 601px) and (aspect-ratio > 999/1000) {
    #hero .hero__card h1 { font-size: var(--type-hero); }
    #problem .problem__copy .display,
    :is(#approach, #diagnostic-pilot, #services, #use-cases, #about, #why, #contact) h2 {
        font-size: var(--type-heading);
    }
    #services .card h3,
    #use-cases .cases__item button { font-size: var(--type-label); }

    #hero .hero__card .lede,
    #problem .problem__copy p,
    #approach .approach__head .note,
    #approach .step h3,
    #diagnostic-pilot :is(.lede, .pilot__gets h3),
    #use-cases .cases__detail p,
    #about :is(.lede, .note),
    #why .reason p,
    #contact > .wrap > p { font-size: var(--type-reading); }

    /* Only these smaller-copy sizes were edited in the handoff. Unedited
       step/card copy and navigation/footer sizes keep their existing rules. */
    #approach .step--1 p,
    #services .card--1 .card__back p,
    #diagnostic-pilot .pilot__gets li { font-size: var(--type-small); }
    #services .card__more { font-size: var(--type-control); }
}