:root {
  color-scheme: dark;

  --bg: #0b0f14;
  --text: #d6dde8;
  --muted: #8f9bae;

  --link: #c7773a;
  --rule: rgba(199, 119, 58, 0.22);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(circle at top left,
      rgba(199, 119, 58, 0.10),
      transparent 28%),
    linear-gradient(180deg,
      #0b0f14 0%,
      #0d131c 100%);

  color: var(--text);

  font:
    17px/1.55 Charter,
    "Iowan Old Style",
    Georgia,
    serif;

  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.page {
  width: min(680px, calc(100% - 32px));
  margin: 0 auto;
  padding: 56px 0 48px;
}

header {
  margin-bottom: 1.6rem;
}

.title {
  margin: 0 0 0.25rem;

  color: var(--text);

  font:
    600 clamp(2rem, 6vw, 3rem) / 1 "SFMono-Regular",
    ui-monospace,
    monospace;

  letter-spacing: -0.06em;

  text-align: center;
}

.subtitle {
  margin: 0 0 0.4rem;

  color: var(--muted);

  font:
    0.82rem/1.6 "SFMono-Regular",
    ui-monospace,
    monospace;

  text-align: center;
}

.links {
  margin: 0;

  color: var(--muted);

  font:
    0.82rem/1.6 "SFMono-Regular",
    ui-monospace,
    monospace;

  text-align: center;
}

.copy,
.projects {
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

.copy p {
  margin: 0 0 0.8rem;
}

.projects {
  margin-top: 1.4rem;
}

.projects ul {
  margin: 0;
  padding-left: 1.1rem;
}

.projects li {
  margin-bottom: 0.4rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .page {
    width: min(100% - 24px, 680px);
    padding-top: 36px;
  }

  .subtitle,
  .links {
    font-size: 0.76rem;
  }
}