html { scroll-behavior: smooth; }

body {
  font-family: var(--face-text);
  font-weight: 400;
  line-height: 1.7;
  background: var(--surface-base);
  color: var(--ink-primary);
}

h1, h2, h3, h4 {
  font-family: var(--face-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

h1 { font-size: clamp(2.1rem, 6.2vw, 3.6rem); }
h2 { font-size: clamp(1.55rem, 4.4vw, 2.1rem); }
h3 { font-size: clamp(1.1rem, 2.6vw, 1.4rem); }
h4 { font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; }

p { font-size: 1rem; line-height: 1.7; }

a {
  color: var(--action-primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color var(--motion-quick);
}

a:hover { color: var(--action-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--line-strong);
  outline-offset: 3px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th, td {
  padding: var(--step-sm) var(--step-xs);
  border-bottom: 1px solid var(--line-hairline);
  text-align: left;
}

th {
  font-family: var(--face-text);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

caption {
  text-align: left;
  padding-bottom: var(--step-sm);
  color: var(--ink-muted);
  font-size: 0.9rem;
}

label { display: block; font-weight: 600; }

input, select, textarea {
  width: 100%;
  padding: var(--step-sm);
  background: var(--surface-base);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--ink-primary);
  transition: box-shadow var(--motion-quick), border-color var(--motion-quick);
}

input[type="checkbox"] { width: auto; }

input:focus { box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.18); }

@media (min-width: 48em) {
  h4 { font-size: 1.05rem; }
  p { font-size: 1.05rem; }
  th, td { padding: var(--step-md) var(--step-sm); }
}