/* Hypha · shared type: the fonts, their roles, and the founder's font test. One file for every page family
   (shared/README.md says how a page links it). A page links it before its own css; its fonts live beside it in fonts/.

   Roles
     Geist           every line a visitor reads: captions, answers, labels, everything inside the apps
     Space Grotesk   the big headlines (.display) and the buttons (.cta) only
   No slanted type anywhere (the founder: italics read "like a bad Canva overlay"). No italic face is loaded; a quote
   line (an <em> inside a caption, or .q) stands upright and reads as a quote by its curly marks; every <em> and <i>
   is upright, and font-synthesis: none means the browser never makes up a slant or a bold of its own.

   The font test, a URL switch on the same page (the head's switch sets html[data-type], and the page's way on carries
   it to the next page):
     ?type=geist      Geist everywhere, headlines and buttons included
   With no switch the page loads exactly the three default faces; the switch adds no weight. */

@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  font-synthesis: none;
  --f-display: "Space Grotesk", "Geist", system-ui, sans-serif;
  --f-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* inside the apps: Geist, never the system's own font */
  --f-app: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-type="geist"] { --f-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }
em, i, cite, dfn, var, address { font-style: normal; }

/* the roles */
.display, .cta, .mark { font-family: var(--f-display); }
.say, .thought, .lede, .body { font-family: var(--f-body); }