/* Typography and chrome.
 *
 * ⚠ THIS OVERRIDES THE PORTED DESIGN'S HEADING WEIGHT, DELIBERATELY.
 *
 * maia.lending's token file sets --font-weight-black: 900 on every heading,
 * annotated "this is what makes the design read as geometric". It also makes it
 * read as 2021: heavy black slabs, a tall header, and a large filled pill in
 * the corner. Operator's verdict on the header was "way too archaic", and on
 * the weight: "900 weight is bullshit, that is the point".
 *
 * The reference is claude.com — measured, not remembered: h1 at 64px, weight
 * 500, line-height 1.1, body at 20px. Light, large, and given room. That is
 * also the only register consistent with the copy, which is deliberately flat.
 *
 * What is NOT changed: the palette, the mark, the eleven-strand lockup, the
 * spacing scale. The brand DNA is the colour and the vector, not the weight.
 */

:root {
  --mb-weight-display: 500;
  --mb-track-display: -0.021em;

  /* the ported design's own knob. 80px was a 2021 header; 64 is current, and
   * overriding the token is cleaner than fighting the h-header utility. */
  --header-height: 64px;

  /* ⚠ The lead had no size of its own — it was `1.15em` in Statement and
   * `1.2em` in Hero, both computed against whatever font-size they inherited.
   * That made it impossible to move by changing a token, and it made two
   * components disagree about what a lead is. It is a role now, like every
   * other role, and the two components read it. */
  --type-lead-size: 22px;

  /* ⚠ A role of its own, not h1. Interior pages open with an h1 that came DOWN
   * to 30px on a phone; the homepage hero is the one line that should go the
   * other way. Sharing a token would have made those two moves the same move. */
  --type-hero-size: var(--type-h1-size);

  /* `timeline-scope: --hero` lived here for the CSS-only header. Gone with it:
   * scroll-driven animations reached Safari only in 26, so the effect never
   * ran on most phones. tools/a11y.py and two IntersectionObservers replace it. */
}

/* ── display type: large, light, tight ───────────────────────────────────
 * ⚠ The selector has to carry the element as well as the class. `type-h1` is a
 * UnoCSS shortcut expanding to `font-black`, which is a single class — a bare
 * `h1 { }` loses to it on specificity and the headings stayed at 900 while the
 * stylesheet claimed otherwise. Element+class wins, and stays inside the
 * design's 0,3,1 specificity ceiling. */
/* ⚠ An ATTRIBUTE match, not a list of pairs. This enumerated every element and
 * class combination that existed at the time — and the list went stale twice.
 * `h2.type-h1-inverse` was missing, so the closing band shipped at 900; then
 * `h2.type-h3` was missing, so every subheading in the privacy notice did. A
 * heading does not always wear the class of its own level: a document's section
 * heading is an h2 for the outline and h3-sized for the eye, and that pairing is
 * a rendering decision that will keep being made. `[class*='type-h']` on an
 * element is 0,1,1 and beats the `.type-h*` utility at 0,1,0 for every
 * combination there will ever be, without anyone maintaining a list. */
h1,
h2,
h3,
h4,
h1[class*='type-h'],
h2[class*='type-h'],
h3[class*='type-h'],
h4[class*='type-h'] {
  font-weight: var(--mb-weight-display);
  letter-spacing: var(--mb-track-display);
  white-space: normal;          /* the ported reset sets pre-line; copy wraps itself */
  /* ⚠ Operator policy, held by a gate in tools/a11y.py: a heading may not end
   * with a short word alone on the last line. "A company that reasons about /
   * itself." and "Everything you work in is part / of it." both shipped that
   * way. It is invisible to every other check — not a validity error, not a
   * contrast failure, not present in the markup — because it is a property of
   * the rendered line boxes and nothing else. `balance` evens the lines across
   * the whole heading instead of filling each greedily. The ported reset sets
   * `text-wrap: wrap` on every element, which is why this needs the same
   * element+class specificity the weight does. */
  text-wrap: balance;
}

/* ⚠ Three `h1 { font-size: clamp(...) }` rules lived here and NONE of them did
 * anything: a bare element selector is 0,0,1 and the `text-h1` utility that
 * every heading also carries is 0,1,0. They sat in the file for weeks stating
 * a scale the page never used, which is worse than stating nothing — the next
 * person edits them and watches the page ignore it. The scale is the tokens.
 *
 * ⚠ `body { font-size: 1.0625rem }` lived here too, and that one DID work: it
 * beat global.css's `font-size: var(--type-body-size)` and pinned every
 * inherited size to 17px, whatever the token said. That is why setting the
 * body token to 15px moved the paragraphs and left the leads at 19.55px —
 * they are sized in `em` against the inherited base, not against the token.
 * One definition of body size, and it is the token. */
body {
  line-height: 1.6;
}

/* ── header: shorter, but not lighter ─────────────────────────────────
 * ⚠ The display weight drops to 500. The HEADER does not. Chrome has to be
 * found at a glance, and a nav set in regular grey reads as disabled. What was
 * archaic about the original was its height and the large filled pill sitting
 * in the corner like a banner — not the weight of its labels. */
.site-header > .wrap {
  min-block-size: var(--header-height);
  block-size: var(--header-height);
}

/* ⚠ No colour here. This set text-primary at 0,2,0 and quietly beat the
 * `text-inverse` utility the header applies at 0,1,0 — so when the header moved
 * onto the brand blue the nav stayed ink and shipped at 2.67:1. axe caught it,
 * which is the only reason it is not live. Chrome sizing belongs in this file;
 * which ground the chrome stands on does not. */
/* ⚠ The DESKTOP nav only. This was `.site-header .nav-link`, and the burger
 * drawer's markup lives inside .site-header — so at 0,2,0 it beat the `text-h4`
 * utility at 0,1,0 and pinned every drawer link to 15px inside a full-height
 * panel. A chrome size for the top bar is not a size for a navigation page. */
.site-header nav[aria-label='Main'] .nav-link {
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
}

/* the one action stays filled and findable — just sized as chrome, not as a
 * call to action competing with the headline underneath it */
.site-header .pill {
  min-block-size: 2.375rem;
  padding-inline: 1.25rem;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
}

/* ── the hero ──────────────────────────────────────────────────────────── */
/* `.hero { min-block-size: 0 }` lived here to cancel a full-height hero the
 * page did not have. The homepage has one now, declared in the model as
 * option(hero, height, full), so the cancellation is gone with it. */

/* Running text is longer than `balance` handles — browsers cap it at a few
 * lines. `pretty` leaves the fill greedy and only pulls back the last line. */
p,
li,
dd {
  text-wrap: pretty;
}

/* An in-page link lands under the sticky header without this — the heading it
 * was aimed at sits behind the chrome and the reader arrives mid-paragraph. */
[id] {
  scroll-margin-block-start: var(--header-height);
}

#home {
  scroll-margin-block-start: 0;
}

/* ── the mobile scale ───────────────────────────────────────────────────────
 * ⚠ A RAMP, not a percentage of the desktop one. Every token used to be set to
 * 90% of the drawn value, which preserved whatever relationship the two Figma
 * artboards happened to have — and they happened to bottom out h1 and h2 at the
 * same 2.25rem, so on a phone every section heading was exactly as loud as the
 * page title. Five identical 32.4px headings down a page is what "the fonts are
 * too large" actually described; no uniform reduction could have fixed it.
 *
 * The second fault was the measure. At 19.55px in a 366px column the line held
 * 37 characters, under the 40-50 a phone wants, so the eye returned too often.
 * Body at 15px in a 350px column holds about 47. That is the first correct
 * measure this page has had, and it is most of the perceived size problem.
 *
 * ⚠ Set at the TOKENS. The scale reaches the page through `--type-*-size`,
 * which the Uno theme reads and the `text-h1` utilities apply; a bare
 * `h1 { font-size }` here loses to `.type-h1` on specificity, which is exactly
 * why an earlier attempt to shrink the headings did nothing at all.
 *
 * Roughly a 1.25 step between levels. The button goes UP, from 15px to 16px:
 * it is the one label that should not shrink, and 15px was below a comfortable
 * tap target's text. The design was drawn at 402 and 1440, so this departs from
 * the drawing below the tablet breakpoint and nowhere else.
 */
@media (width < 768px) {
  :root {
    --type-h1-size: 30px;
    --type-h1-leading: 33px;
    --type-hero-size: 38px;
    --type-h2-size: 24px;
    --type-h2-leading: 28px;
    --type-h3-size: 20px;
    --type-h3-leading: 25px;
    --type-h4-size: 18px;
    --type-metric-size: 40px;
    --type-body-size: 15px;
    --type-lead-size: 17px;
    --type-caption-size: 13px;
    --type-button-size: 16px;

    /* ⚠ The gutter goes back UP. It was halved to 12px to buy reading width and
     * bought none: at 19.55px type a 12px and a 16px gutter both gave 37
     * characters, because eight pixels is worth nothing against that type size.
     * All it did was push the text against the bezel. The measure is fixed by
     * the type ramp above; the gutter's job is margin. */
    --layout-page-padding: 1.25rem;
    --layout-section-padding: 3rem;
  }
}