/* NOHM typography. Every page links this first, before its other CSS.

   Two families, self-hosted from the official open-source builds
   (google/fonts, SIL Open Font License; licenses in /fonts/sora/OFL.txt
   and /fonts/manrope/OFL.txt):
     Sora     headlines          700 section headings, 800 hero and major
     Manrope  everything else    400/500 body, 600/700 navigation and buttons

   Each file is the variable font cut to exactly the weights used here
   (Sora 700–800, Manrope 400–700) and to Latin plus arrows, so one small
   file per family covers every weight.

   The one exception: the branded phrase "NOHM it." keeps its own
   treatment (Panchang, see .mark on the homepage). Nothing in this file
   applies to it, and it must not be used for anything else. */

@font-face {
  font-family: "Sora";
  src: url("/fonts/sora/sora-latin-700-800.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope/manrope-latin-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched stand-ins, shown for the moment before a font arrives:
   the system's Arial scaled to the same width and line box, so the swap
   does not move anything. Values measured from the font files. */
@font-face {
  font-family: "Sora Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 700 800;
  size-adjust: 107.6%;
  ascent-override: 90.1%;
  descent-override: 27%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400 500;
  size-adjust: 104.5%;
  ascent-override: 102%;
  descent-override: 28.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 700;
  size-adjust: 100%;
  ascent-override: 106.6%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root {
  --font-display: "Sora", "Sora Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-text: "Manrope", "Manrope Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --weight-hero: 800;      /* hero and major headlines */
  --weight-heading: 700;   /* section headings */
  --weight-body: 400;
  --weight-body-strong: 500;  /* subtitles, ledes */
  --weight-ui: 600;        /* navigation, buttons, labels */
  --weight-ui-strong: 700;

  --size-button: 15px;           /* button labels; one step smaller on the narrowest phones */

  --tracking-headline: -0.04em;  /* Sora headlines */
  --word-spacing-headline: 0.04em;  /* gives the space back what the tracking took, so words stay apart */
  --tracking-title: -0.02em;     /* small Sora titles, under ~24px */
  --tracking-body: normal;
}

/* Defaults: body text, form controls and headings pick up the system
   with no per-section styling. */
body {
  font-family: var(--font-text);
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-headline);
}
h1 { font-weight: var(--weight-hero); }
h1:not(.mark), h2, h3, h4 { word-spacing: var(--word-spacing-headline); }
/* When a headline wraps, split it into even lines; in running text,
   avoid leaving one word alone on the last line. */
body { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

/* Two buttons share a row on phones; on the very narrowest screens their
   labels drop a pixel so they still fit side by side. */
@media (max-width: 340px) {
  :root { --size-button: 14px; }
}

/* Roles, for anything whose tag does not say what it is. Each sets only
   family, weight and tracking; size and spacing stay with the layout. */
.t-hero    { font-family: var(--font-display); font-weight: var(--weight-hero);    letter-spacing: var(--tracking-headline);  word-spacing: var(--word-spacing-headline); }
.t-heading { font-family: var(--font-display); font-weight: var(--weight-heading); letter-spacing: var(--tracking-headline);  word-spacing: var(--word-spacing-headline); }
.t-title   { font-family: var(--font-display); font-weight: var(--weight-heading); letter-spacing: var(--tracking-title); }
.t-body    { font-family: var(--font-text); font-weight: var(--weight-body); letter-spacing: var(--tracking-body); }
.t-lede    { font-family: var(--font-text); font-weight: var(--weight-body-strong); letter-spacing: var(--tracking-body); }
.t-ui      { font-family: var(--font-text); font-weight: var(--weight-ui); letter-spacing: var(--tracking-body); }