/* Font options. All are open-licence (SIL OFL) fonts from Fontsource, hosted here, latin only.
   The picker sets <html data-font="...">; each option sets a display, body and mono face. */
@font-face { font-family: 'Geist'; src: url(fonts/geist-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(fonts/geist-mono-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(fonts/inter-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url(fonts/inter-tight-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url(fonts/space-grotesk-latin-wght-normal.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url(fonts/space-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url(fonts/space-mono-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Syne'; src: url(fonts/syne-latin-wght-normal.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(fonts/manrope-latin-wght-normal.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/ibm-plex-mono-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(fonts/instrument-serif-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(fonts/instrument-serif-latin-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url(fonts/instrument-sans-latin-wght-normal.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url(fonts/unbounded-latin-wght-normal.woff2) format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(fonts/outfit-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url(fonts/dm-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(fonts/dm-sans-latin-wght-normal.woff2) format('woff2'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'Pixelify Sans'; src: url(fonts/pixelify-sans-latin-wght-normal.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }

:root { --display: var(--sans); }
/* everything that reads as a headline or a big number uses the display face */
:is(h1, h2, h3, .brand, .card-title, .pack .label b, .cb b, .stat b, .kpi b, .cstats b, .bidbox b, .dc-row b, .fact b, .trait b, .showmeta b, .cname b, .daily b, .how b, .chart-head b) { font-family: var(--display); }

html[data-font="geist"] { --display: 'Geist', sans-serif; --sans: 'Geist', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace; }
html[data-font="inter"] { --display: 'Inter Tight', sans-serif; --sans: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; }
html[data-font="grotesk"] { --display: 'Space Grotesk', sans-serif; --sans: 'Space Grotesk', system-ui, sans-serif; --mono: 'Space Mono', ui-monospace, monospace; }
html[data-font="grotesk"] :is(.hero h1, .onb h1, .page-head h1, .pd-info h2, .chead h1, .prof h1) { letter-spacing: -.055em; font-weight: 700; }
html[data-font="syne"] { --display: 'Syne', sans-serif; --sans: 'Manrope', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; }
html[data-font="syne"] :is(h1, h2, h3, .brand) { letter-spacing: -.035em; font-weight: 800; }
html[data-font="syne"] :is(.hero h1, .onb h1) { font-size: clamp(46px, 6.8vw, 100px); }
html[data-font="editorial"] { --display: 'Instrument Serif', Georgia, serif; --sans: 'Instrument Sans', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace; }
html[data-font="editorial"] :is(h1, h2, h3, .brand, .pack .label b, .cb b, .stat b, .kpi b, .cstats b, .bidbox b, .dc-row b, .fact b, .showmeta b) { font-weight: 400; letter-spacing: -.02em; }
html[data-font="editorial"] :is(.hero h1, .onb h1) { font-size: clamp(64px, 9.5vw, 136px); line-height: .88; }
html[data-font="editorial"] .grad-text { font-style: italic; padding-right: .08em; }
html[data-font="editorial"] .brand { font-size: 27px; }
html[data-font="unbounded"] { --display: 'Unbounded', sans-serif; --sans: 'Outfit', system-ui, sans-serif; --mono: 'DM Mono', ui-monospace, monospace; }
html[data-font="unbounded"] :is(h1, h2, h3, .brand) { letter-spacing: -.045em; font-weight: 650; }
html[data-font="unbounded"] :is(.hero h1, .onb h1) { font-size: clamp(40px, 6vw, 88px); line-height: .98; }
html[data-font="unbounded"] :is(.page-head h1, .pd-info h2, .chead h1) { font-size: clamp(30px, 3.6vw, 46px); }
html[data-font="unbounded"] .card-title { font-weight: 600; font-size: 14px; }
html[data-font="bricolage"] { --display: 'Bricolage Grotesque', sans-serif; --sans: 'DM Sans', system-ui, sans-serif; --mono: 'DM Mono', ui-monospace, monospace; }
html[data-font="bricolage"] :is(h1, h2, h3, .brand) { letter-spacing: -.045em; font-weight: 750; }
html[data-font="pixel"] { --display: 'Pixelify Sans', sans-serif; --sans: 'Inter', system-ui, sans-serif; --mono: 'Space Mono', ui-monospace, monospace; }
html[data-font="pixel"] :is(h1, h2, h3, .brand, .pack .label b, .cb b) { letter-spacing: -.01em; font-weight: 600; }

/* the picker */
.fontbtn { position: fixed; left: 18px; bottom: 18px; z-index: 35; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line2); cursor: pointer;
  background: rgba(16,16,22,.82); backdrop-filter: blur(16px); color: #fff; font: 600 17px var(--display); box-shadow: 0 12px 30px -10px #000; transition: transform .2s var(--ease); }
.fontbtn:hover { transform: scale(1.06); }
.fontpanel { position: fixed; left: 18px; bottom: 74px; z-index: 36; width: min(380px, calc(100vw - 36px)); max-height: min(640px, calc(100vh - 120px)); overflow-y: auto; padding: 10px; border-radius: 20px;
  background: rgba(14,14,20,.94); backdrop-filter: blur(22px) saturate(1.4); border: 1px solid var(--line2); box-shadow: 0 30px 80px -20px #000; animation: tin .35s var(--ease); }
.fontpanel h4 { margin: 6px 8px 8px; font: 650 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.fopt2 { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; background: none; color: #fff; cursor: pointer; transition: background .15s; }
.fopt2:hover { background: rgba(255,255,255,.05); }
.fopt2.on { background: rgba(255,255,255,.08); border-color: var(--line2); }
.fopt2 .s { display: block; font-size: 26px; line-height: 1.1; }
.fopt2 .n { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12.5px; color: var(--dim); }
@media (max-width: 640px) { .fontbtn { bottom: 84px; left: 12px; width: 42px; height: 42px; } .fontpanel { bottom: 134px; left: 12px; } }
.fontpanel { scrollbar-width: thin; scrollbar-color: #333 transparent; }
html[data-font="pixel"] :is(.stat b, .kpi b, .cstats b, .bidbox b, .dc-row b, .fact b, .trait b, .card-title, .cname b, .showmeta b) { font-family: var(--sans); font-weight: 700; }