/* ═══════════════════════════════════════════════════════════
   PIPER, fx-type.css
   The Field Edition, typographic layer only.

   Scope: scale, weight, tracking, optical alignment, and the
   treatment of numerals. The font stack stays Archivo plus
   JetBrains Mono, loaded once in index.html at
   wght@400;600;800;900 for Archivo and wght@500;700 for the
   mono. Every weight referenced below is one of those six
   values on purpose, so nothing here ever falls back through
   the browser's nearest-weight matching by accident.

   Loads after styles.css and overrides its scale. Colour,
   surfaces, shadows and layout are owned elsewhere and are
   never touched here.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Fluid display scale. clamp() answers every viewport in one
     declaration, which is why nothing below needs a matching
     breakpoint override the way the old fixed mobile swap did. */
  --fx-display: clamp(3.5rem, 15vw, 11rem);   /* hero masthead */
  --fx-h2:      clamp(2rem, 4.6vw, 3.75rem);  /* section titles */
  --fx-price:   clamp(2.5rem, 6vw, 4.5rem);   /* the one live number worth reading from across a room */
  --fx-vital-tile: clamp(1.85rem, 3.4vw, 2.65rem); /* hero weight readout */
  --fx-vital-wild: clamp(3rem, 12vw, 9rem);   /* the 2,500 figure */
  --fx-quote:   clamp(1.5rem, 2.9vw, 2.125rem); /* the keeper's quote */
  --fx-body:    1.0625rem;                    /* running editorial copy */
  --fx-label:   .6875rem;                     /* every small-caps data label on the page, one size */

  /* Optical tracking. Letterforms that are fine at 17px start
     ballooning apart at 11rem, so the negative value grows with
     the size step instead of one -.03em guessed everywhere. */
  --fx-track-display:    -.055em;
  --fx-track-h2:         -.036em;
  --fx-track-price:      -.03em;
  --fx-track-vital-tile: -.032em;
  --fx-track-vital-wild: -.045em;
  --fx-track-label:      .15em;

  /* Shared instrument-numeral feature set: true tabular widths
     plus a slashed zero, so a contract address, a swap amount
     and a market cap never ask the reader to guess whether a
     character is a zero or a letter O. */
  --fx-num-tabular: "tnum" 1, "zero" 1;
}

/* ── DISPLAY HEADLINES ────────────────────────────────────────
   Archivo at 900 is already the loudest weight loaded, so scale
   is the only lever left for hierarchy. The hero gets the full
   11rem ceiling; every .sect__title below it is deliberately
   smaller so the masthead keeps sole ownership of the loudest
   voice on the page instead of nine headings competing with it. */
.hero__title {
  font-size: var(--fx-display);
  line-height: .9;
  letter-spacing: var(--fx-track-display);
}

.sect__title {
  font-size: var(--fx-h2);
  line-height: 1.04;
  letter-spacing: var(--fx-track-h2);
}

/* ── VITAL NUMERALS ───────────────────────────────────────────
   Two numbers on this page describe Piper herself rather than
   the market or the UI: 5.5kg in the hero, climbing, and 2,500
   in the wild section, falling. They never share a section, so
   the only way a reader can feel that they answer each other is
   if they are built the same way, tabular figures, slashed
   zero, the same 700 mono weight the rest of the page already
   uses for its numbers. Rank between them comes from size only:
   the hero readout is the smaller of the two because it belongs
   to a photograph of one animal, and the 2,500 is sized closer
   to the masthead because it is the fact the whole site exists
   to put in front of that photograph. */
.quote-tile__value {
  font-size: var(--fx-vital-tile);
  letter-spacing: var(--fx-track-vital-tile);
  font-feature-settings: var(--fx-num-tabular);
}

.wild__figure {
  /* Previously sized within a few pixels of the hero title at
     full width, which let the wild figure tie the masthead
     instead of answering it. Right-sized here so the hierarchy
     reads correctly at every viewport, not only by accident on
     the ones where the two clamps happened not to collide. */
  font-size: var(--fx-vital-wild);
  letter-spacing: var(--fx-track-vital-wild);
  font-feature-settings: var(--fx-num-tabular);
}

#introNum {
  font-feature-settings: var(--fx-num-tabular);
}
.intro__meter {
  /* The first number a visitor sees. Sized to actually look
     like a fact rather than a caption, since the loading rule
     beside it is already claiming to be counting up to it. */
  font-size: clamp(1.5rem, 3.6vw, 2.125rem);
}

/* ── MARKET RAIL: ONE NUMBER, THEN A UNIFORM TIER ────────────
   Price, 24h change, market cap, liquidity and holders all
   shared one clamp before, so the eye had no reason to land
   anywhere first. Every stat drops to one fixed size and the
   price alone keeps the large mono scale, matched to the two
   vital numerals above with the same tabular treatment. */
.market__inner .stat__value {
  font-size: 1rem;
  letter-spacing: -.015em;
}
.market__inner .stat__value.is-missing {
  font-size: .9375rem;
}

#mPrice {
  font-size: var(--fx-price);
  letter-spacing: var(--fx-track-price);
}
#mPrice .skel {
  /* The skeleton is sized in ch/em off its parent, so it grows
     with the price figure automatically. Height is nudged back
     toward the cap height of the mono face so the placeholder
     bar does not read taller than the digits that replace it. */
  height: .82em;
}

/* ── DATA LABELS ──────────────────────────────────────────────
   The same 10.5px uppercase tracked label was declared eight
   separate times across styles.css, each a slightly different
   pixel value or tracking figure with no relationship to the
   others. Two groups replace all of them: labels that live in
   Archivo components, and labels that live inside the two
   components already set in JetBrains Mono (.receipt, .arcade).
   Splitting on font family instead of forcing one rule onto
   both matters here specifically because only 500 and 700 are
   loaded for the mono face, so a label weight that looks right
   in Archivo can silently resolve to the wrong mono cut. */
.ticker__item,
.quote-tile__label,
.stat__label,
.pressure__head,
.tape__head,
.ca__label,
.swap__label {
  font-size: var(--fx-label);
  letter-spacing: var(--fx-track-label);
  font-weight: 600;
}

.receipt__head,
.receipt__rows dt,
.arcade__hud,
.arcade__mute {
  /* No font-weight declared. An unset weight in a component set
     to JetBrains Mono already resolves to the 500 cut, which is
     the correct regular weight for a label this small, so this
     stays unweighted on purpose rather than reaching for the
     700 that the numerals two rows down actually need. */
  font-size: var(--fx-label);
  letter-spacing: var(--fx-track-label);
}

/* ── EDITORIAL BODY COPY ──────────────────────────────────────
   The hero subhead and the two note paragraphs that open the
   careers deck and the meme stack are the closest thing on the
   page to running prose. Fixed at one size and one line-height
   instead of each carrying its own clamp, so the contrast
   against the display type above is deliberate rather than
   incidental: roughly a ten-to-one size relationship between
   the hero headline and this tier at their respective maximums. */
.hero__sub,
.careers__note,
.memes__note {
  font-size: var(--fx-body);
  line-height: 1.6;
  letter-spacing: -.006em;
}

/* ── THE KEEPER'S QUOTE ───────────────────────────────────────
   Set apart from the rest of the page's upright Archivo by
   style alone, since introducing a second display face for six
   words of attribution would be the kind of costume the rest of
   this system exists to avoid. Archivo has no italic in the
   family loaded, so this is a synthesized oblique; that is a
   deliberate, common enough technique for marking an editorial
   quote and not a rendering bug. */
.log__quote {
  font-size: var(--fx-quote);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -.016em;
}

.pull {
  font-style: italic;
}

/* ── NUMERAL REGISTER: PROSE VS INSTRUMENT ───────────────────
   Two different jobs, two different figure styles. Anything
   standing in for a live reading, a swap amount, a contract
   address or a ledger row already renders in JetBrains Mono
   with lining tabular figures, correct for a column of numbers
   that has to line up. Numbers that turn up inside a sentence,
   a date, a weight, a population count, read instead as part of
   the sentence: proportional, text-height figures rather than
   full-caps-height digits interrupting the line. Where the font
   has no oldstyle glyphs this simply falls back to its default
   figures, so the declaration is free to be correct everywhere
   even on the copy that has no digits in it yet. */
.hero__sub,
.careers__note,
.memes__note,
.log__quote,
.log__src,
.wild__kicker,
.wild__label,
.vrow__yes,
.vrow__no,
.verify__note p,
.foot__legal p {
  font-variant-numeric: oldstyle-nums proportional-nums;
}
