/* ============================================================
   Legibility layer — large-print pass for an older reader
   (FEAT-010 · client feedback 2026-08-08)

   The client is an older person with reduced vision who says he cannot
   read the small text. This file is the answer, and it is a SEPARATE
   OVERRIDE LAYER on purpose: tokens.css / base.css / components.css are
   byte-frozen copies of the design source and must not be edited. Load
   this AFTER components.css and partners.css.

   ⚠️ THE HEADLINE FINDING. The client asked for "PARTNERSHIPS" and
   "How we partner" to be bigger, calling them section titles. They are
   not <h2>s — they are `.eyebrow` kickers, and they were the SMALLEST
   text in the section at 12.9-15.2px. The actual <h2>s beneath them are
   already 40-64px. So the fix is not "make the headings bigger": it is
   that the label the client reads AS the heading was set at footnote
   size. That is what §2 below corrects.

   Measured baseline, from a runtime audit of both pages at 1440px and
   390px (250 sub-18px instances across 76 unique selectors):
   `--step--1` alone drove 45 of the 56 real offenders.
   ============================================================ */

/* ------------------------------------------------------------
   1 · The two tokens that carry almost everything

   Redefining them here rather than in tokens.css is the whole reason
   this file exists. Custom properties resolve at use time, so a later
   :root wins and every rule in the frozen files picks it up with no
   edit to them. Only the SMALL end of the scale moves — --step-1
   through --step-5 are already 20-93px and are left alone, because the
   headings were never the problem.
   ------------------------------------------------------------ */
:root {
  /* was clamp(0.80rem, 0.77rem + 0.15vw, 0.89rem) = 12.8-14.24px */
  --step--1: clamp(1.0625rem, 1.02rem + 0.15vw, 1.125rem);  /* 17 - 18px */

  /* was clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem) = 16-18.08px.
     The old floor put every button, body paragraph and footer link at
     16.18px on a 390px phone. */
  --step-0: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);      /* 18 - 20px */
}

/* A reviewed dissent, recorded because it is a real trade-off:
   the design analyst argued against redefining these two tokens at all,
   preferring per-selector overrides, on the grounds that --step--1 has
   ~45 consumers and a global lift reaches surfaces this audit never saw
   (blog cards, badges, nav on other templates).

   Overruled here, deliberately. The client's complaint is not "these
   five labels are small", it is that he cannot read small text — so the
   floor itself is what is wrong, and patching selector by selector
   leaves every unaudited surface unreadable while splitting the type
   system in two (the analyst's own Risk 4). The token IS the large-print
   switch, and keeping it as one line is what makes it reviewable.

   ⚠️ The analyst's underlying warning still stands and is real: when
   this ports into the theme, these two lines re-scale the WHOLE site,
   not just the partners work. That is intended, but it must be a
   conscious decision at port time and needs a pass over the blog and
   article templates. Recorded in the FEAT-010 steer file. */

/* ------------------------------------------------------------
   2 · The eyebrow — the client's actual complaint

   Four changes, and the size is only one of them:
   - size up to 18-24px, so it reads as the section label it is;
   - tracking DOWN from 0.22em to 0.09em. At 24px, 0.22em is a 5.3px
     gap between letters, which stops the word being read as one shape.
     Tracking that flatters small caps actively fragments large ones;
   - weight 400 -> 500, because JetBrains Mono at 400 is light for a
     reader with reduced contrast sensitivity;
   - colour --jade-400 -> --jade-300, lifting 8.77:1 to 11.2:1 (AAA).
   ------------------------------------------------------------ */
.eyebrow {
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);     /* 18 - 24px */
  letter-spacing: 0.09em;
  font-weight: 500;
  color: var(--jade-300);
  gap: 0.7em;
  margin-bottom: var(--space-lg);
}

/* The measurement tick scales with the label so the proportion holds. */
.eyebrow::before { width: 2.2rem; opacity: 0.75; }

/* Centred eyebrows (CTA bands) keep the same treatment. */
.eyebrow.center-block { justify-content: center; }

/* ------------------------------------------------------------
   3 · Section titles

   The partner wall was the one section title out of step: partners.css
   had it at --step-2 (25-34px), smaller than every other section title
   on the page. It is a section, so it gets a section's title size.

   ⚠️ This rule is now REDUNDANT BY VALUE — §10 below moved every bare
   `h2` to --step-3, the same size. It is kept deliberately: it is the
   rule that overrides `partners.css`'s own `--step-2`, which is higher
   specificity than a bare `h2` and would win again the moment §10 is
   re-tuned. Deleting it would silently shrink this one heading.
   ------------------------------------------------------------ */
.partner-wall__head h2 { font-size: var(--step-3); }     /* 31 - 48px */

/* ------------------------------------------------------------
   4 · Hardcoded sizes that never picked up the scale
   ------------------------------------------------------------ */

/* partners.css set this to a flat 0.72rem = 11.52px — the smallest text
   on the site, and the only size that could never grow at any viewport
   because it was not on the fluid scale at all. */
.partner-entry__meta dt {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  font-weight: 500;
}

.partner-entry__meta dd { font-size: var(--step-0); }

/* ------------------------------------------------------------
   5 · Chrome that was set below body size

   Each of these is a heading or a standing UI label that rendered
   SMALLER than the body text around it — a straight inversion.
   ------------------------------------------------------------ */

/* "Explore" / "Reach us" are <h4>s that base.css sets to 20-25px, then
   components.css overrode down to 12.9px. */
.footer-col h4 {
  font-size: var(--step-0);
  letter-spacing: 0.1em;
}

.footer-col a,
.footer-col li { font-size: var(--step-0); }

/* Copyright, tagline and the postal address — where an older reader
   goes looking for a phone number or an address. */
.footer-bottom { font-size: var(--step-0); color: var(--text-300); }
.footer-brand p { font-size: var(--step-0); color: var(--text-300); }

/* Was `var(--step-0)`. Client feedback 2026-08-08, second round: the nav
   and the section titles read as too big. Given its own clamp rather than
   a smaller token — `--step-0` is shared with body copy, buttons and the
   whole footer, so shrinking the token to fix the nav would silently
   reverse the large-print pass everywhere else it lands.
   15-16px, --text-300 on --ink-900 = 11.47:1. (FEAT-011 S1) */
.nav__links a { font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); }

/* ------------------------------------------------------------
   6 · Partner labels

   ✅ Design A ("Sans Caption") was approved by the client 2026-08-08 and
   now lives in partners.css as the component's real style — Inter 500,
   16-18px, --text-100 at 14.73:1, permanent underline. It is NOT
   overridden here: the approved design belongs with its component, not
   in the large-print patch layer, so it survives this file being
   re-tuned. variants.html keeps all three for the record.
   ------------------------------------------------------------ */
.partner-entry__tag,
.partner-entry__focus li,
.partner-entry__full { font-size: var(--step-0); }

.partner-entry__full { color: var(--text-300); }

/* ------------------------------------------------------------
   7 · Reading comfort

   Size is not the whole story for an ageing eye: tracking the line back
   to its start is the other half. Slightly looser leading and a shorter
   measure both help, and cost nothing here.
   ------------------------------------------------------------ */
p { line-height: 1.65; }
.section-head p,
.partner-wall__head p { font-size: var(--step-0); max-width: 58ch; }

.sector { font-size: var(--step-0); }
.principle p { font-size: var(--step-0); }

/* ------------------------------------------------------------
   9 · The rest of the home page

   preview.css hardcodes these in rem, so they never saw the token lift
   above. They are the smallest text on the site (0.68rem = 10.88px)
   and they are exactly the kind of thing this client cannot read:
   uppercase mono microlabels, dates, and "Read article" calls to
   action. A large-print pass that stopped at the partner components
   would leave the page it lives on unreadable.
   ------------------------------------------------------------ */

/* The page-hero eyebrow. Specificity matters: preview.css sets this
   with `.preview-about-hero .eyebrow` (0-2-0), which beats a bare
   `.eyebrow` (0-1-0) — so §2 silently lost on partners.html, on the
   very "PARTNERSHIPS" label the client complained about. Matched here. */
.preview-about-hero .eyebrow {
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);
  letter-spacing: 0.09em;
}

/* Uppercase mono microlabels — 10.88-11.52px as shipped.
   `.preview-article__meta`, `.preview-event__meta` and
   `.preview-article__cta` were dropped here with the sections that
   carried them (FEAT-011 S5); `.preview-story__meta` inherits their
   role. The "Read article" per-card CTA is gone entirely — the story
   title is the link now, so there is no microlabel left to enlarge. */
.preview-story__meta,
.preview-journey__tag {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
}

.preview-story__meta { color: var(--text-300); }

/* An <h3> that was set smaller than the body text next to it. */
.preview-story h3 { font-size: var(--step-1); line-height: 1.2; }

.preview-schools__card li { font-size: var(--step-0); line-height: 1.55; }
.preview-school__name { font-size: var(--step-0); color: var(--text-300); }
.preview-story__body p,
.preview-journey__card p,
.preview-schools__card p,
.preview-schools__support p,
.preview-schools__logos p { font-size: var(--step-0); }

/* Home section chrome that sits at --step--1 by inheritance. */
.hero__badge,
.stat__label,
.service-card__num,
.proof__tag,
.proof__partner { font-size: var(--step-0); }

/* ------------------------------------------------------------
   8 · Preview chrome (deleted on approval, kept legible meanwhile)
   ------------------------------------------------------------ */
.proposal-bar { font-size: var(--step-0); }
.proposal-bar__tag { font-size: 0.95rem; }
.proposal-hero__note { font-size: var(--step--1); color: var(--text-300); }

/* ============================================================
   10 · Down-tune — client feedback round 2, 2026-08-08 (FEAT-011 S1)

   Same client, same day, opposite direction: having asked for the
   large-print pass above, he then read the deployed preview and said
   the navbar and the titles were too big.

   Both things are true, and they are not in conflict. §1 lifted the two
   SMALL tokens so captions, labels and body copy cleared 17px. It never
   touched --step-1..--step-5, so the headings were left at sizes chosen
   for a different, quieter page — an h2 at 67px next to 18px body is a
   ratio the eye reads as shouting, not as hierarchy.

   So this block moves the LARGE end down, and leaves §1 completely
   alone. Nothing here weakens the large-print floor.
   ============================================================ */

/* Section titles: --step-4 (39-67px) -> --step-3 (31-48px).

   ⚠️ SCOPED, not a bare `h2`, and the reason is the port. This file
   becomes the theme's `overrides.css`, where a bare `h2 { }` would hit
   every heading a Gutenberg author writes inside post content — not
   just section titles — and silently re-scale the whole blog. The
   selectors below are the complete set of h2 containers in this
   design, enumerated from the rendered DOM of all 7 pages rather than
   guessed:

     .section-head · .container--narrow · .cta-band ·
     .partner-wall__head · .proposal-index__head · .vt__head

   🔴 PORT NOTE: if a template introduces a new section wrapper, its
   h2 will keep the old --step-4 and look wrong. Add it here.

   `h1` is deliberately untouched — pulling h2 down while h1 stays at
   --step-5 widens the gap between page title and section title, which
   is the hierarchy working, not breaking. */
.section-head h2,
.container--narrow h2,
.cta-band h2,
.partner-wall__head h2,
.proposal-index__head h2,
.vt__head h2 { font-size: var(--step-3); }

/* The wordmark. preview.css:3 forces 1.5rem = 24px, and :6 steps it to
   1.18rem at <=720px. This file loads after it and wins at equal
   specificity — so the mobile variant MUST be re-declared too, or this
   unconditional rule would also win on phones and silently erase the
   existing step-down. */
.brand { font-size: 1.3125rem; }        /* 21px */

@media (max-width: 720px) {
  .brand { font-size: 1.0625rem; }      /* 17px */
}

/* ============================================================
   11 · Accessibility fixes — NOT part of the large-print pass

   Two defects found by the 2026-08-08 a11y audit. Both PRE-DATE
   FEAT-011 and both live in `components.css`, which is byte-frozen for
   the theme port — so they are corrected here as overrides.

   🔴 PORT NOTE: unlike §1-§10, these two are not a preview concern.
   They are live on the production theme right now and should travel to
   `overrides.css` with the rest of this file, or be fixed at source in
   `components.css` if that file is ever unfrozen.
   ============================================================ */

/* (a) WCAG 2.4.7 Focus Visible — the closed mobile menu was still
   keyboard-focusable. `components.css:719-733` hides it with
   `opacity: 0; pointer-events: none`, neither of which removes an
   element from the tab sequence. Confirmed at 390px: tabbing past the
   hamburger landed on four invisible nav links with no focus indicator
   anywhere on screen.

   `visibility: hidden` does remove them, and unlike `display: none` it
   still animates — so the existing slide-and-fade is preserved. The
   delayed transition lets the fade finish before visibility flips on
   close, and applies instantly on open. */
@media (max-width: 720px) {
  .nav__links {
    visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                visibility 0s linear var(--dur-fast);
  }
  .nav__links.is-open {
    visibility: visible;
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                visibility 0s;
  }
}

/* (c) The sticky header ghosted text through itself.

   `components.css` gives `.site-header` a translucent background —
   `rgba(15,27,23,.72)`, going to `.90` once `.is-scrolled` — which is
   the intended look over the hero. But a sticky header overlays
   whatever is beneath it for the whole page, and at 390px scrolled to
   the bottom that is the footer: measured, the header's lower 19px sat
   on top of the footer's "Who We Are" link, both texts rendering at
   once. Two overlapping strings at 90% opacity is illegible for anyone
   and worse for the reader this file exists for.

   Only the SCROLLED state is made opaque. Unscrolled it still floats
   over the hero as designed, and by the time anything is underneath it
   the class is already on. */
.site-header.is-scrolled { background: var(--ink-900); }

/* (b) WCAG 2.2 AA 2.5.8 Target Size (Minimum) — footer links measured
   106x21px. §5 above raised their font size but gave them no vertical
   hit area, which is the half of the problem a font-size fix cannot
   reach. Padding takes them past the 24px floor with room to spare;
   the negative inline margin keeps the text visually flush with the
   column edge so nothing moves. */
.footer-col li { margin-bottom: 0; }
.footer-col a {
  display: inline-block;
  padding-block: 0.45rem;
  padding-inline: 0.35rem;
  margin-inline: -0.35rem;
}