:root {
  --color-bg: #f6f3ec;
  --color-surface: #ffffff;
  --color-ink: #161514;
  --color-ink-muted: #6c6963;
  --color-accent: #b8330a;
  --color-accent-ink: #ffffff;
  --font-serif: "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
  --step-0: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);
  --step-5: clamp(2.4883rem, 1.9532rem + 2.6757vw, 3.8147rem);
  --space-2xs: clamp(0.5rem, 0.457rem + 0.217vw, 0.625rem);
  --space-s: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);
  --space-l: clamp(2rem, 1.826rem + 0.87vw, 2.5rem);
  --space-xl: clamp(3rem, 2.739rem + 1.304vw, 3.75rem);
  --measure: 60ch;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.5;
}

a {
  color: var(--color-accent);
}

.page {
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding: var(--space-xl) var(--space-s);
}

h1 {
  font-size: var(--step-5);
  line-height: 1.05;
  margin-block: 0 var(--space-l);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

label {
  margin-block-start: var(--space-s);
  font-family: var(--font-sans);
  font-weight: 600;
}

input,
textarea {
  padding: var(--space-2xs);
  border: 1px solid var(--color-ink);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
}

input:focus,
textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.hint {
  margin: 0;
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  font-size: var(--step--1);
}

button,
.button {
  display: inline-block;
  align-self: flex-start;
  margin-block-start: var(--space-s);
  padding: var(--space-2xs) var(--space-s);
  border: 2px solid var(--color-ink);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font: 600 var(--step-0) var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}

button:hover,
button:focus-visible,
.button:hover,
.button:focus-visible {
  background: var(--color-ink);
}