@font-face { font-family: Geist; src: url('https://cdn.jsdelivr.net/npm/geist@1.5.1/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Geist; src: url('https://cdn.jsdelivr.net/npm/geist@1.5.1/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root { --ink: #202521; --paper: #f4f0e7; --line: #d7d1c5; --pink: #ed6548; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Instrument Sans", sans-serif; }
main { max-width: 720px; margin: auto; }
.intro { padding: 28px 20px 46px; }
.eyebrow, .counter, footer, .card-top, .details { letter-spacing: .08em; text-transform: uppercase; font-size: 10px; font-weight: 600; }
.eyebrow { margin: 0 0 58px; color: #6f716a; }
h1 { margin: 0; max-width: 610px; font: 700 clamp(46px, 14vw, 92px)/.93 Geist, sans-serif; letter-spacing: -.075em; }
.lede { max-width: 420px; margin: 30px 0 26px; font-size: 17px; line-height: 1.42; }
.counter { margin: 0; color: #696a64; }
#count { color: var(--pink); }
.specimens { border-top: 1px solid var(--line); }
.font-card { min-height: 330px; padding: 15px 20px 17px; border-bottom: 1px solid var(--line); cursor: pointer; outline: 0; transition: background .25s ease, color .25s ease; display: flex; flex-direction: column; }
.font-card:focus-visible { outline: 3px solid var(--pink); outline-offset: -3px; }
.font-card.selected { background: var(--ink); color: var(--paper); }
.font-card.selected .card-top, .font-card.selected .details { color: #cbc7bd; }
.card-top, .details { display: grid; grid-template-columns: 36px 1fr auto; color: #6e7069; }
.card-top h2 { margin: 0; font: inherit; }
.hero { margin: auto 0; font-size: clamp(48px, 13vw, 84px); font-weight: 700; line-height: .93; letter-spacing: -.06em; }
.details { font-size: 9px; }
.geist .hero { font-family: Geist, sans-serif; }
.instrument .hero { font-family: "Instrument Sans", sans-serif; }
.figtree .hero { font-family: Figtree, sans-serif; }
.manrope .hero { font-family: Manrope, sans-serif; }
.jakarta .hero { font-family: "Plus Jakarta Sans", sans-serif; }
.sora .hero { font-family: Sora, sans-serif; }
.outfit .hero { font-family: Outfit, sans-serif; }
.dmsans .hero { font-family: "DM Sans", sans-serif; }
footer { padding: 22px 20px 36px; color: #6e7069; }
@media (min-width: 600px) { .intro { padding: 40px 38px 64px; } .font-card, footer { padding-left: 38px; padding-right: 38px; } .font-card { min-height: 420px; } }