:root {
  --bg-color: #f9f5d7;
  --fg-color: #282828;
  --bg-alt-color: #fbf1c7;
  --fg-alt-color: #3c3836;
  --primary-color: #427b58;
  --secondary-color: #8ec07c;
  --accent-color: #b16286;
  --selection-color: #076678;
  --highlight-color: #fabd2f;

  --padding-inline: 0.5rem; /* really 1rch but the unit is not well-supported */
  --padding-block: 1rem;
  --gutter-inline: 1.5rem;
  --line-height-indented: 1.3;
  --border-size: 10px;
}

@media (prefers-color-scheme: dark) {
  --bg-color: #1d2021;
  --fg-color: #fbf1c7;
  --bg-alt-color: #282828;
  --fg-alt-color: #ebdbb2;
  --primary-color: #8ec07c;
  --secondary-color: #689d6a;
  --accent-color: #b16286;
  --selection-color: #83a598;
  --highlight-color: #fabd2f;
}

html {
  font-family:
    "Iowan Old Style", Palatino, "Palatino Linotype", "Palatino LT STD",
    "Book Antiqua", "URW Palladio L", Georgia, P052, serif;
}

::selection {
  background-color: var(--selection-color);
  color: var(--bg-color);
}

body {
  max-inline-size: 70ch;
  margin: auto;
  padding-block-end: var(--padding-block);
  background-color: var(--bg-color);
  padding-inline: calc(2 * var(--padding-inline));
  color: var(--fg-color);
  line-height: 1.6;
}

ul li::marker {
  color: var(--accent-color);
}

body > header:has(nav),
nav > ul {
  display: flex;
  flex-wrap: wrap;
  place-content: space-around;
  align-items: center;
  column-gap: var(--gutter-inline);
  a {
    text-decoration: none;
    color: currentColor;

    &:hover {
      color: var(--primary-color);
    }
  }
}

body > header {
  row-gap: 0.5rem;
  margin-block-end: 1.5rem;
  border-block-end: solid;
  padding-block: var(--padding-block);
}

nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;

  > li {
    display: inline;
    font-weight: bold;
    font-size: large;
  }
}

nav > dl {
  display: grid;
  grid-template-columns: auto auto;
  width: content;
  column-gap: var(--gutter-inline);
  dt {
    margin-inline-start: auto;
    text-transform: lowercase;
    &::before {
      content: "/";
    }
  }
  dd {
    margin: 0;
  }
}

#site-name {
  font-weight: 100;
  font-size: xx-large;
  &::first-letter {
    color: var(--primary-color);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
}

h1 {
  font-size: xxx-large;
  text-align: center;
  text-transform: uppercase;
  text-decoration: underline;
}

hgroup {
  text-align: center;
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-block-end: 0;
  }
  p {
    font-style: italic;
  }
}

a {
  color: var(--primary-color);
  &:hover {
    color: var(--secondary-color);
  }

  &:focus-visible {
    outline: solid var(--accent-color);
    outline-offset: 5px;
  }
}

[rel="external"]::after {
  display: inline-block;
  margin-inline-start: 0.25ch;
  content: "\21D7";
}

mark {
  background-color: var(--highlight-color);
  padding: 0.125em;
}

aside {
  font-size: smaller;
  border-inline-start: var(--border-size) solid #928374;
  border-radius: var(--border-size);
  padding-inline: var(--padding-inline);
  margin-inline: auto;
  margin-block: 1rem;
  inline-size: fit-content;
}

figure:has(blockquote) {
  border-inline-start: var(--border-size) solid var(--accent-color);
  border-radius: var(--border-size);

  padding-inline: var(--padding-inline);
  padding-block: var(--padding-block);

  background-color: var(--bg-alt-color);
  color: var(--fg-alt-color);

  line-height: var(--line-height-indented);

  margin-inline: auto;
  inline-size: fit-content;

  blockquote {
    margin-inline: 0;
    margin-block-start: 0;
    padding-inline: var(--padding-inline);
  }

  figcaption {
    text-align: end;
    padding-inline: var(--padding-inline);
    margin-inline-start: auto;
  }
}

footer {
  color: gray;
  text-align: center;
}

#skip-link {
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  background-color: var(--bg-alt-color);
  padding-inline: var(--padding-inline);
  padding-block: var(--padding-block);
  outline-offset: 0;
  &:not(:focus):not(:active) {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}