@font-face {
  font-family: "IBM Plex Mono";
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-700-normal.woff2");
}

:root {
  color-scheme: light dark;
  --sub: light-dark(#828282, #8c857a);
  --orange: #ff6600;
  background: light-dark(#f6f6ef, #1d1a16);
  color: light-dark(#000, #e8e4dc);
  font: 13px/20px "IBM Plex Mono", ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

* {
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--orange);
  color: #000;
}

body {
  max-width: 90ch;
  padding: 2lh;

  @media (width <= 600px) {
    padding: 1lh 2ch;
  }
}

/* A blank line between blocks, two before a section, as in a Markdown file. */
header {
  margin-bottom: 1lh;
  text-transform: uppercase;
}

main > * + * {
  margin-top: 1lh;
}

main > h2 {
  margin-top: 2lh;
}

h1,
h2 {
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;

  &::before {
    font-weight: 400;
    color: var(--sub);
  }

  .sym,
  .url {
    font-weight: 400;
  }
}

h1::before {
  content: "# ";
}

h2::before {
  content: "## ";
}

a,
summary {
  color: inherit;
  text-decoration: none;
  cursor: pointer;

  &:is(:hover, :focus-visible) {
    outline: none;
    color: var(--orange);
    --sub: currentColor;
  }
}

.sym,
.meta {
  color: var(--sub);
}

.url {
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.meta {
  display: block;
}

ul {
  list-style: "- ";
  padding-left: 2ch;

  ul {
    padding: 0;
  }
}

/* The folded feeds: only the dots are clickable, and the line gives way to the list once open. */
summary {
  display: inline;

  &::-webkit-details-marker {
    display: none;
  }

  [open] > & {
    display: none;
  }
}

li:has(> [open]) {
  list-style: none;
}

ol {
  list-style: decimal-leading-zero;
  padding-left: 4ch;

  li + li {
    margin-top: 0.5lh;
  }

  ::marker {
    color: var(--sub);
  }
}

.pager {
  display: flex;
  gap: 2ch;
}

.next {
  margin-left: auto;
}