:root {
  color-scheme: light dark;
  --bg: #fbf8ef;
  --ink: #203d32;
  --line: #d4dcd5;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    1.1rem/1.8 system-ui,
    sans-serif;
}
header,
footer,
main {
  max-width: 58rem;
  margin: auto;
  padding: 2rem;
}
header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
a {
  color: inherit;
  text-underline-offset: 0.25em;
}
header a:first-child {
  font:
    700 1.5rem Georgia,
    serif;
  text-decoration: none;
}
h1 {
  font:
    400 clamp(2rem, 6vw, 3.6rem)/1.25 Georgia,
    serif;
  margin: 1rem 0 2rem;
}
p {
  overflow-wrap: anywhere;
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
footer {
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.draft {
  padding: 1rem;
  border: 1px solid #8e651c;
  color: #704b0a;
  background: #fff0cf;
}
.skip {
  position: absolute;
  left: 1rem;
  top: -8rem;
}
.skip:focus {
  top: 1rem;
  background: var(--bg);
  padding: 1rem;
}
a:focus-visible {
  outline: 3px solid #c57928;
  outline-offset: 5px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14251e;
    --ink: #ecede0;
    --line: #486052;
  }
}