:root {
  --base-font-size: calc(1rem + 0.1618vw);
  --ratio: 1.618;
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: var(--base-font-size);
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));

  --font-sans: system-ui, -apple-system, sans-serif;

  --color-black: #1d1f21;
  --color-blue: #4271ae;
  --color-brown: #a3685a;
  --color-cyan: #3e999f;
  --color-gray0: #efefef;
  --color-gray1: #e0e0e0;
  --color-gray2: #d6d6d6;
  --color-gray3: #8e908c;
  --color-gray4: #969896;
  --color-gray5: #4d4d4c;
  --color-gray6: #282a2e;
  --color-green: #718c00;
  --color-orange: #f5871f;
  --color-purple: #8959a8;
  --color-red: #c82829;
  --color-yellow: #eab700;

  --color-bg: white;
  --color-surface: white;
  --color-text: var(--color-black);
  --color-text-muted: var(--color-gray3);
  --color-border-light: var(--color-gray2);
  --color-link: var(--color-blue);
  --color-link-hover: var(--color-cyan);

  --measure: 80ch;
}

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

html {
  font-size: 100%;
  font-family: var(--font-sans);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

body {
  min-height: 100dvh;
}

.stack {
  display: flex;
  flex-direction: column;
}

.stack > * + * {
  margin-top: var(--s0);
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--s3) var(--s1);
}

header > * + * {
  margin-top: var(--s-2);
}

h1 {
  font-size: var(--s2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

header > p {
  font-size: var(--s0);
  color: var(--color-text-muted);
}

section > * + * {
  margin-top: var(--s1);
}

h2 {
  font-size: var(--s1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

article > * + * {
  margin-top: var(--s-2);
}

h3 {
  font-size: var(--s0);
  font-weight: 600;
}

article > p {
  color: var(--color-text-muted);
  max-width: var(--measure);
}

footer {
  padding-top: var(--s1);
  border-top: 1px solid var(--color-border-light);
}

footer a {
  color: var(--color-link);
  text-decoration: none;
  font-size: var(--s0);
}

@media (hover: hover) {
  footer a:hover {
    color: var(--color-link-hover);
  }
}

footer a:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}