@font-face {
  font-family: "Fraunces";
  src: url("./fonts/fraunces-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("./fonts/instrument-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

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

/* Reuse the personal site's palette and layout from /css/style.css. */
:root {
  color-scheme: light;
  --bg: var(--paper);
  --panel: var(--paper-warm);
  --input: var(--paper);
  --line: var(--rule);
  --text: var(--ink);
  --muted: #69706b;
  --accent: #6b1e1e;
  --accent-text: var(--paper);
  --warn: var(--accent);
  --focus: var(--signal);
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

body { font-size: 1.0625rem; line-height: 1.55; }
.site-nav .nav-links { margin: 0; padding: 0; }
.site-nav .nav-links li { margin: 0; }
.site-nav .nav-toggle { min-height: 44px; padding: 0; border-radius: 0; }
.site-skip-link { z-index: 30; }
.site-breadcrumb, .app {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-breadcrumb { padding-top: 24px; font-size: .875rem; }
.site-breadcrumb a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink-soft); }
.site-breadcrumb a:hover { color: var(--accent); }
.app { padding-top: 24px; padding-bottom: 48px; }
.app > .skip-link { display: none; }
.app-header { align-items: end; margin-bottom: 40px; gap: 32px; }
.app-header h1 {
  font-family: "Fraunces", serif;
  font-size: 3rem;
  line-height: 1;
  font-weight: 350;
  font-variation-settings: "opsz" 72, "SOFT" 40;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 22px;
}
.app-header p {
  font-family: "Fraunces", serif;
  font-size: 1.375rem;
  line-height: 1.45;
  font-weight: 350;
  font-variation-settings: "opsz" 24;
  color: var(--ink-soft);
}
h2 { font-family: "Fraunces", serif; font-weight: 400; font-size: 1.5rem; }
.panel, button, input, select, textarea, .unit-toggle, .unit-toggle button,
.example-notice, .notice, .validation-list, .population-disclosure .sig-card { border-radius: 0; }
input, select, textarea { border-color: var(--muted); }
input::placeholder { color: var(--muted); }
input[readonly] { background: var(--paper-deep); color: var(--ink-soft); }
.secondary { border-color: var(--ink); color: var(--ink); }
.secondary:hover { background: var(--paper-deep); }
.primary:hover { background: var(--accent-soft); }
.app .text-button { font-family: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; }
.unit-control > span { font-family: "JetBrains Mono", monospace; font-size: .875rem; }
.result-number { font-family: "Fraunces", serif; font-weight: 400; }
.example-notice, .notice, .population-disclosure .selected { background: var(--paper-deep); color: var(--ink); }
.example-notice, .notice, .population-disclosure .selected { --muted: var(--ink-soft); }
.validation-list { background: var(--paper); }
.app footer { padding: 24px 0 0; }

@media (max-width: 900px) {
  .app-header { align-items: start; gap: 24px; }
}

@media (max-width: 480px) {
  .app-header h1 { font-size: 2.25rem; }
  .app-header p { font-size: 1.1875rem; }
  .panel { padding: 22px 16px; }
}

@media print {
  .site-nav, .site-breadcrumb, .site-skip-link { display: none; }
  .app { max-width: none; padding: 0; }
}