@font-face {
  font-family: "Metr Grotesk";
  src: url("/fonts/MetrGrotesk-VF.woff2") format("woff2");
  font-weight: 100 700;
  font-style: oblique 0deg 10deg;
  font-display: swap;
}

:root {
  --kraft: #E2B585;
  --ink: #1C1C1C;
  --red: #D9431E;
  --gutter: clamp(16px, 5vw, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--kraft); }
body {
  font-family: "Metr Grotesk", system-ui, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--kraft);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
  font-size: 18px;
}

a { color: inherit; }

.wrap { padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; }

/* header */
.top {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 28px; padding-bottom: 28px;
  font-weight: 700; font-size: 18px;
}
.top nav { display: flex; gap: 24px; font-weight: 400; }
.top a { text-decoration: none; }
.top nav a:hover { text-decoration: underline; }

/* labels */
.label { font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* sections */
section { padding: clamp(48px, 8vw, 112px) 0; }
.on-red { background: var(--red); }
.on-ink { background: var(--ink); color: var(--kraft); }

/* hero */
.hero { background: var(--red); padding-top: 24px; overflow: hidden; }
.hero-aa {
  font-weight: 700; line-height: .82; letter-spacing: -.02em;
  font-size: clamp(180px, 38vw, 560px);
  display: flex; justify-content: space-between; align-items: flex-end;
}
.hero-aa .a { color: var(--kraft); font-feature-settings: "ss01"; }
.hero-aa .amp { font-weight: 100; font-style: oblique 10deg; font-size: .52em; }
.hero-name {
  font-weight: 700; line-height: .95; letter-spacing: -.01em;
  font-size: clamp(56px, 10vw, 140px); margin-top: 32px;
}

/* type tester */
.tester-controls {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px 32px; margin: 32px 0;
}
.tester-controls label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.tester-controls input[type=range] { width: 100%; accent-color: var(--red); }
.toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.toggles button {
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 6px 12px; border: 2px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer;
}
.toggles button[aria-pressed=true] { background: var(--ink); color: var(--kraft); }
.tester {
  font-size: 96px; line-height: 1.05; outline: none;
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  padding: 24px 0; overflow-wrap: anywhere;
}

/* styles list */
.styles { list-style: none; }
.styles li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-top: 2px solid currentColor; padding: 10px 0 14px;
  font-size: clamp(36px, 6vw, 72px); line-height: 1.1;
}
.styles li span.n { font-size: 16px; font-weight: 700; font-style: normal; white-space: nowrap; }

/* features */
.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px 32px; margin-top: 40px;
}
.feat .big { font-size: 96px; line-height: 1; font-weight: 700; margin-bottom: 12px; }
.feat p { max-width: 34ch; }

h2 {
  font-weight: 700; line-height: 1; letter-spacing: -.01em;
  font-size: clamp(44px, 7vw, 96px); margin: 16px 0 24px;
}
.lede { font-size: clamp(20px, 2.2vw, 26px); max-width: 38ch; }

/* pricing */
table.prices { width: 100%; border-collapse: collapse; margin-top: 32px; font-size: 18px; }
.prices th, .prices td { text-align: left; padding: 14px 0; border-top: 2px solid var(--kraft); vertical-align: baseline; }
.prices th { font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.prices td.p { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 16px; }
.prices tr.group td { font-weight: 700; padding-top: 32px; border-top: none; }

.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 20px;
  padding: 16px 28px; background: var(--red); color: var(--ink); margin-top: 32px;
}
.btn:hover { background: var(--kraft); }
.btn.off, .btn.off:hover { background: transparent; color: inherit; border: 2px solid currentColor; opacity: .6; cursor: default; }
.on-red .btn { background: var(--ink); color: var(--kraft); }
.on-red .btn:hover { background: var(--kraft); color: var(--ink); }

/* footer */
footer { padding: 48px 0 64px; font-size: 16px; }
footer .row > * { max-width: 40ch; }

/* EULA page */
.doc { max-width: 72ch; padding-bottom: 80px; }
.doc h1 { font-weight: 700; font-size: clamp(40px, 6vw, 72px); line-height: 1; margin: 40px 0 12px; }
.doc h2 { font-size: 28px; margin: 40px 0 12px; }
.doc p, .doc ul { margin-bottom: 14px; }
.doc ul { padding-left: 1.2em; }
.doc .meta { font-weight: 700; margin-bottom: 32px; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .tester { font-size: 56px; }
  .top nav { gap: 14px; }
  .prices td.p { font-size: 17px; }
}