/* Typography — shared across the whole site.
   Edit a rule here and it updates everywhere this file is linked:
   index.html, projects.html, and every case study in /projects.
   Uses :where() (0 specificity) so it never fights page-specific
   overrides — a page only needs to declare a property here if it
   wants to deviate from the shared look. */

:where(body) {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}

a { color: inherit; }

:where(header h1, .who-text .name) {
  font-family: "Familjen Grotesk", var(--font-body), sans-serif;
  font-weight: 400;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

:where(.who-text .name) { color: var(--heading-olive); }

:where(header h1) {
  font-size: 1.75rem; /* 28px — between --text-lg (22px) and --text-xl (32px) */
}

:where(.sec-head h2, .case-study h2, .pw-dialog h2, .stat-number, .fav-group-label, .feat-title, .exp-label) {
  font-family: "Familjen Grotesk", var(--font-body), sans-serif;
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--heading-olive);
  line-height: 1.3;
}

:where(.case-study h3, .grid-card__title, .index-row__title) {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: 1.4;
}

:where(.fav-link-list .link-name, .band-name, table.exp-table td.exp-company) {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: 1.4;
}

:where(.case-study p, .case-study ul, .stat-card p, .stat-callout p, .fav-link-list .link-desc, table.exp-table td.exp-title) {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: 1.75;
}

:where(.meta) {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.5;
}

:where(.fav-link-list .link-domain, table.exp-table td.exp-dates) {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-neutral);
  line-height: 1.4;
}

:where(.who-text .role, .intro .bio p) {
  font-size: var(--text-md);
  color: var(--color-muted);
  line-height: 1.7;
}

.who-text .role { margin-top: 5px; }

.intro .bio p {
  margin-bottom: var(--space-md);
  max-width: 56ch;
}

.intro .bio p:last-child { margin-bottom: 0; }
.intro .bio strong { color: var(--color-ink); font-weight: 600; }