/*
 | OT DISPLAY TYPE — one file, loaded by the marketing pages and the portal.
 |
 | 2026-08-16: THE HYBRID. Jacob and Katie both pushed back on the 08-12 pivot in the 08-13 call.
 |
 |   Jacob, 36:31: "I kind of like the way it was before... I kind of liked the cursive type font or
 |   whatever it was." And 38:05: "when I see this font on our site, it kind of just looks bland
 |   because it's not backed up by like crazy looking imagery. The function one probably made a
 |   little more sense for us."
 |   Katie, 38:34: "I think I'd really mix up the two. I don't think go straight like function. I'll
 |   go straight like superpower... integrating like the modern elements in with the simplicity, we
 |   can find like our own little signature style."
 |   Jacob, 38:43: "I would love to find like our own thing."
 |
 | ⚠️ THE THING JACOB LIKED BEFORE WAS FUNCTION HEALTH'S, LITERALLY. Memory note
 | `ot-old-design-was-function-health`, 08-12: OT's pre-pivot tokens matched Function's published
 | system token for token, including the roman-plus-italic serif headline they call their signature.
 | So "go back to how it was" and "find our own thing" are the same sentence pulling opposite ways,
 | and a straight revert of ccf0412 would re-clone them. This file does NOT revert. It takes the
 | element Jacob actually missed (a real serif with a real italic) and runs it on the mechanics
 | Superpower taught us, which is a combination neither company uses.
 |
 | WHAT COMES FROM WHERE
 |
 | From Superpower, kept from the 08-12 work because it is what reads as expensive:
 |   - Weight 400 at display size. Never 700, never 300. 700 stays on buttons and small labels.
 |   - Line-height that COMPRESSES as type grows: ~1.02 on an h1 against 1.5 on body, so a headline
 |     reads as a solid block rather than a stack of lines.
 |   - Tracking that TIGHTENS as type grows, applied by heading level since CSS cannot key
 |     letter-spacing to computed pixel size.
 |   - Tabular figures wherever numbers are compared down a column.
 |
 | From the earlier system, restored because it is the character Jacob missed:
 |   - Fraunces on the display tier, with its TRUE italic for <em> emphasis inside headings. The
 |     markup never stopped asking for it ("Four steps, one <em>plan.</em>"); 08-12 switched it off
 |     because Helvetica Neue's italic is a mechanical oblique that looks like a mistake at 56px.
 |     That reasoning was right, and it stops applying the moment the face has a drawn italic.
 |
 | What makes it OURS rather than either of theirs:
 |   - Function sets its serif at loose leading and near-neutral tracking, and carries the serif down
 |     into subheads. We run a serif on a compressed, negatively-tracked curve, DISPLAY TIER ONLY.
 |     h3 and below stay Helvetica Neue, so the page never becomes a serif brochure.
 |   - Superpower runs a grotesque and no display italic at all.
 |   - The eyebrow stays IBM Plex Mono, uppercase, wide positive tracking. Neither of them does that.
 |     Serif display over a grotesque body under a mono eyebrow is the signature, and it is three
 |     voices doing three jobs rather than one face doing everything.
 |
 | TRACKING IS NOT INHERITED FROM THE OLD CURVE. -0.028em was measured for Helvetica Neue. A serif
 | has wider sidebearings and real serifs to collide, so the same value closes the counters and the
 | headline turns to mud. The display tiers are cut to roughly half: -0.015em on h1, -0.012em on h2.
 | h3 and h4 are still Helvetica Neue and keep the original values.
 |
 | Fraunces is self-hosted (public/portal-assets/fonts.css, OFL, variable opsz 9..144 + wght, both
 | roman and italic). Every page that loads this file already loads that one, so the only new cost is
 | the woff2 itself. `font-optical-sizing: auto` is set explicitly so the opsz axis actually engages
 | at display size, which is most of why Fraunces looks drawn rather than scaled.
 |
 | Scoped to headings and the portal's named display classes. Nothing outside them is touched, so
 | this cannot alter buttons, form controls, tables or the portal's data type.
 */

h1,
.h1,
.display,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
h6 {
    font-weight: 400;
    text-wrap: balance;
}

/* DISPLAY TIER — the serif, and the only place it appears. */
h1,
.h1,
.display,
h2,
.h2 {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-optical-sizing: auto;
}

h1,
.h1,
.display {
    letter-spacing: -0.015em;
    line-height: 1.02;
}

h2,
.h2 {
    letter-spacing: -0.012em;
    line-height: 1.08;
}

/* SUB-DISPLAY — still Helvetica Neue, still the original curve. */
h3,
.h3 {
    letter-spacing: -0.018em;
    line-height: 1.2;
}

h4,
.h4,
h5,
h6 {
    letter-spacing: -0.012em;
    line-height: 1.35;
}

/*
 | Italic emphasis, back on, and ONLY where the face can draw one.
 |
 | h1/h2/.display are Fraunces, which ships a real italic with its own letterforms, so <em> reads as
 | a deliberate second voice. That is the "cursive type font" Jacob asked for by name.
 |
 | h3 and h4 are Helvetica Neue. Its italic is a synthesised oblique, which is why 08-12 killed it,
 | so those stay upright. This is the whole reason the rule is split rather than global.
 */
h1 em,
h1 i,
h2 em,
h2 i,
.h1 em,
.h2 em,
.display em {
    font-style: italic;
    font-weight: 400;
}

h3 em,
h3 i,
h4 em,
.h3 em,
.h4 em {
    font-style: normal;
}

/* Body copy gets the shallow end of the same curve: enough to tighten the page, not enough to
   hurt anyone reading a paragraph of it. */
body {
    letter-spacing: -0.005em;
}

/* Tabular figures wherever numbers are compared down a column. The portal is full of these and
   ragged digit widths are what makes a lab table look homemade. */
.mono,
.mono--num,
[class*="price"],
[class*="value"],
td,
th {
    font-variant-numeric: tabular-nums;
}

/*
 | PORTAL. od.css names its own display classes rather than using h1-h3, so the selectors above miss
 | them entirely. Sizes were measured out of od.css and assigned the matching tier:
 |
 |   .page-title   clamp(38-64px)     -> h1 tier, serif
 |   .serif-close  clamp(30-50px)     -> h2 tier, serif (the class name was always the intent)
 |   .sec-title    var(--fs-headline) -> h3 tier, stays Helvetica Neue
 |   big figures   24-74px            -> display weight + tabular digits, and NOT the serif
 |
 | The numerals deliberately do not follow the display face. A score ring and a lab column are data,
 | and Helvetica Neue's tabular figures line up in a way a display serif's never will. Mixing them is
 | the point: serif for the sentence, grotesque for the number.
 |
 | Left alone on purpose: .brand-word, .art-title, .lo-name, .mc-ava, .avatar and the other 17-19px
 | labels. They are already 400 and sit in the small-label range the curve does not touch.
 */
.page-title {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.02;
}

.page-title em,
.serif-close em {
    font-style: italic;
    font-weight: 400;
}

.serif-close {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    letter-spacing: -0.012em;
    line-height: 1.08;
}

.sec-title {
    font-weight: 400;
    letter-spacing: -0.018em;
}

.ring-num,
.big-num,
.stk-count-num,
.stat-now,
.goal-now .num,
.total-bar .t-num,
.count-num,
.n-idx,
.price,
.rank-row .r-score {
    font-weight: 400;
    letter-spacing: -0.024em;
    font-variant-numeric: tabular-nums;
}