/* Self-hosted fonts. Filenames match assets/fonts/ exactly (Chivo Mono is v11
   in the downloaded bundle, not v9 as the design-tokens.md guessed). */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/geist-v4-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/geist-v4-latin-500.woff2") format("woff2");
}

@font-face {
  font-family: "Chivo Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/chivo-mono-v11-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Chivo Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/chivo-mono-v11-latin-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Chivo Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/chivo-mono-v11-latin-500.woff2") format("woff2");
}

/* Base body */
body {
  /* Ligatures off, site-wide: Chivo Mono ships a merged "fi" glyph that
     reads poorly (artificial -> arti+ficial blur) and breaks the one-
     letter-per-cell expectation of a mono face. font-variant-ligatures
     is the standard property; font-feature-settings reinforces it for
     any engine that resolves OpenType features independently. */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — semantic hierarchy preserved for a11y, but visually rendered
   at bodycopy size to match the K384 reference (the demo content shows
   "PROFILE (SAMPLE)", "MATERIAL (SAMPLE)", "CV (SAMPLE)" at body size,
   not at 4.5rem/3.8rem). The display scales from design-tokens.md §3.2/§3.3
   would only apply if the design used giant titles, which it doesn't.

   Weight hierarchy: h1 = 500 (site title, slightly heavier),
                     h2 = 400 (column section labels, regular like body),
                     h3 = 500 (project labels & CV subsections, slightly heavier). */
h1, h2, h3 {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-text);
}

h1 { font-weight: 500; }
h2 { font-weight: 400; }
h3 { font-weight: 500; }

.caption {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
  display: block;
}

.small,
.meta {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text);
}

/* Visually hidden helper — used for skip links and any heading that needs
   to be present for a11y but not visible in the design. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:active {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}