:root {
  --font-modern: Inter, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

body {
  font-family: var(--font-modern);
  font-size: 15px;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.brand b,
.intro h1,
.placeholder-heading h1,
.panel-head h2 {
  font-family: var(--font-modern);
}

.brand b { font-weight: 700; }
.intro h1,
.placeholder-heading h1 { font-weight: 650; line-height: 1.2; }
.panel-head h2 { font-weight: 650; }

button,
.file-button,
.local-note,
.menu-tab,
.panel-head p,
.eyebrow,
.action-row,
footer {
  font-family: var(--font-modern);
}

.primary-button,
.secondary-button,
.build-button,
.text-button,
.file-button {
  font-family: var(--font-modern);
  font-weight: 600;
}

.brand b { font-size: 21px; }
.brand small { font-size: 9px; }
.intro h1,
.placeholder-heading h1 { font-size: 29px; }
.intro p,
.placeholder-heading p { font-size: 13px; }
.panel-head h2 { font-size: 17px; }
.panel-head p,
.panel-foot { font-size: 11px; }
.menu-tab { font-size: 12px; }
.file-button,
.secondary-button,
.primary-button { font-size: 11px; }
.text-button { font-size: 11px; }
.build-button { font-size: 12px; }
.action-row > span { font-size: 11px; }

@media (max-width: 520px) {
  .intro h1,
  .placeholder-heading h1 { font-size: 25px; }
}