/* ═══════════════════════════════════════════════════════════════════════════ Mock Draft Nation — FONTS (amd-fonts.css) American Grotesk, Klim Type Foundry. Bought by Justin on 1 Oct 2026 after a tryout of twelve Klim faces on the real pages; the comparison and the five full-page options are in the Test Fonts folder, and option 5 — Condensed for the display line, Regular for text — is what these four cuts are. --font-display American Grotesk Condensed Bold the one big line, section headings, the wordmark, and every number set narrow. --font-text American Grotesk, 400 / 500 / 700 everything read as a sentence, every label, every number not set narrow. --font-poster American Grotesk Compressed Black (added 18 Oct 2026) a few big moments only: countdown, final score, pick number, share card. Never a sentence or a table. The condensed face gained a Regular on 18 Oct 2026 (order 26100881), so --font-display now draws 400 and 700: quiet numbers can step back in weight as well as colour. WHAT CHANGED MECHANICALLY, AND WHY IT MATTERS MORE THAN IT SOUNDS Hubot and Mona were VARIABLE: one file each, any weight from 200 to 900 and any width from 75% to 125%. The rulebook was built on that — contrast came from the width axis (--wd-display 68, --wd-tight 88, --wd-data 75, --wd-wide 118) rather than from piling on weights. These four cuts are STATIC. There is no axis to move. A browser given `font-stretch: 75%` or `font-variation-settings: "wdth" 75` on a static font does not narrow anything and does not complain — it drops the declaration in silence. 353 rules across the site were written that way. So width is now a CHOICE OF FAMILY rather than a dial, which is why the two families are declared separately and NOT as one family at two width classes. That was the tempting shortcut: declare Condensed inside 'American Grotesk' at font-stretch 75%, and all 353 existing declarations keep selecting it with no edits at all. It is wrong. CSS matches width BEFORE weight, so `font-stretch:75%; font-weight:400` would pick the condensed face and then, finding only a 700 in it, render regular text bold. 108 of those rules are not bold. The shortcut would have silently emboldened all of them. Separate families mean nothing is selected by accident: a rule gets the condensed cut only by asking for --font-display. NO ITALIC WAS BOUGHT, and that is deliberate rather than an oversight — a browser asked for an italic it does not have will slant the roman itself, and a synthetic oblique on a grotesk of this quality is the single most visible way to make bought type look cheap. Emphasis is Medium (500) instead. There is no @font-face here declaring, and npm run fonts fails if one appears. THE ZERO. Mona's tabular zero had a slash and the file had to be patched to remove it. American Grotesk needs none of that: its plain zero is the default and the slashed one is an optional feature (`zero`) nobody turns on. Tabular figures are `tnum`, present in all four cuts, so columns still line up. LICENSED, NOT FREE. Four cuts on order 26100041, web use on mockdraftnation.com up to 5,000 monthly unique visitors. The full terms and what may be served are in v2/assets/fonts/american-grotesk-LICENCE.txt. Order 26100881 (18 Oct 2026) added two more on the same web tier: Condensed Regular and Compressed Black. Six cuts in all. Never add a seventh file here without an invoice, and never name a family directly in a page — use var(--font-display), var(--font-text) or var(--font-poster). ═══════════════════════════════════════════════════════════════════════════ */ /* One file per cut. No unicode-range split: each cut is a single ~40KB woff2 covering Latin-1 with the quotes, dashes and arrows the site uses, so the two-file latin / latin-ext dance the variable fonts needed is gone. */ @font-face{font-family:'American Grotesk';font-style:normal;font-display:swap;font-weight:400; src:url(../assets/fonts/american-grotesk-regular.woff2) format('woff2')} @font-face{font-family:'American Grotesk';font-style:normal;font-display:swap;font-weight:500; src:url(../assets/fonts/american-grotesk-medium.woff2) format('woff2')} @font-face{font-family:'American Grotesk';font-style:normal;font-display:swap;font-weight:700; src:url(../assets/fonts/american-grotesk-bold.woff2) format('woff2')} /* Its own family name on purpose — see the note above about CSS matching width before weight. Two condensed cuts: Bold (order 26100041) and Regular (order 26100881, 18 Oct 2026). Until Regular arrived, every narrow number drew bold whatever weight its rule asked for, because Bold was the only condensed file — so a team's record, a chart's axis and a play's down-and-distance all shouted at the same volume as the headline beside them. A rule asking for 400 now gets 400. THERE IS NO CONDENSED MEDIUM, and the 500 face below is deliberate. Without it, CSS would answer a 500 request (every , which the rulebook sets to --w-med, including NATION in every wordmark) with the nearest weight BELOW — Regular — and the wordmark would thin out on every page. Measured before this shipped: 340 runs of condensed text across 16 pages ask for under 600; with 500 mapped to Bold, the wordmark and every other 500 stays exactly as it drew before, and only the runs that asked for 400 change. Same file as the 700 face, so the browser fetches it once. */ @font-face{font-family:'American Grotesk Condensed';font-style:normal;font-display:swap;font-weight:400; src:url(../assets/fonts/american-grotesk-condensed-regular.woff2) format('woff2')} @font-face{font-family:'American Grotesk Condensed';font-style:normal;font-display:swap;font-weight:500; src:url(../assets/fonts/american-grotesk-condensed-bold.woff2) format('woff2')} @font-face{font-family:'American Grotesk Condensed';font-style:normal;font-display:swap;font-weight:700; src:url(../assets/fonts/american-grotesk-condensed-bold.woff2) format('woff2')} /* American Grotesk Compressed Black (order 26100881). The poster cut: narrower and heavier than anything else here, for a FEW big moments only — a countdown, a final score, a pick number, a share card. Below about 32px it clogs; it is never for a sentence, a label or a table. Its own family for the same width-before-weight reason as Condensed, and one weight, 900. */ @font-face{font-family:'American Grotesk Compressed';font-style:normal;font-display:swap;font-weight:900; src:url(../assets/fonts/american-grotesk-compressed-black.woff2) format('woff2')} :root{ --font-display:'American Grotesk Condensed','American Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --font-text:'American Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; /* Big moments only, always at weight 900; falls back to the condensed bold. */ --font-poster:'American Grotesk Compressed','American Grotesk Condensed','American Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; } /* The weight tokens are NOT here. --w-normal and --w-bold are declared in amd-rules.css, which is the rulebook and the one place a token is allowed to be defined; --w-med joined them there when Medium arrived. A second copy in this file would be the same divergence as the five career ladders — two declarations that agree today and diverge on the first edit. */