/* The Project Machaon master brand. Values come from the design system's tokens. */
@font-face {
  font-family: Lora;
  src: url("Lora-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --paper: #f4f5f2;
  --ink: #15171c;
  --ink-muted: #555a62;
  --hairline: #d5d8d1;
  --sulphur: #f3c622;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111318;
    --ink: #ecede8;
    --ink-muted: #a6abb3;
    --hairline: #2e323a;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 16px;
  background: var(--paper);
  color: var(--ink);
  font:
    400 16px/26px "Helvetica Neue",
    Arial,
    sans-serif;
}

main {
  width: 100%;
  max-width: 42rem;
}

.logo {
  display: block;
  height: auto;
  max-width: 100%;
}

h1 {
  margin: 48px 0 16px;
  padding-top: 16px;
  border-top: 4px solid var(--sulphur);
  font:
    500 36px/42px Lora,
    Georgia,
    serif;
  letter-spacing: -0.005em;
}

p {
  margin: 0 0 32px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted);
}

strong {
  color: var(--ink);
  font-weight: 600;
}