:root {
  color-scheme: dark;
  --background: #0f1512;
  --surface: #161d19;
  --text: #c5d1c8;
  --muted: #8a9a8f;
  --rule: #5f7366;
  --accent: #8fbf8f;
  --link: #6fb5a0;
  --selection: #24332b;
  --line: 1.6rem;
  font-family: "Noto Sans Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-size: 16px;
  line-height: var(--line);
  font-variant-ligatures: none;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--line) * 2); }
body { margin: 0; background: var(--background); color: var(--text); }
::selection { background: var(--selection); color: #e3ebe5; }
a { color: var(--link); text-underline-offset: 0.25em; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
p, h1, h2, ul, dl, dd { margin: 0; }
p { max-width: 64ch; }
.muted { color: var(--muted); }
.page { width: min(80ch, calc(100% - 4ch)); margin: calc(var(--line) * 3) auto calc(var(--line) * 2); }

.skip-link { position: absolute; top: -10rem; left: 2ch; padding: 0.5rem 1ch; background: var(--surface); }
.skip-link:focus { top: 1rem; }

.masthead { display: grid; grid-template-columns: minmax(0, 1fr) 24ch; border: 1px solid var(--rule); }
.identity { padding: var(--line) 2ch; }
.identity h1 { font-size: 2rem; line-height: calc(var(--line) * 2); font-weight: 600; letter-spacing: -0.04em; }
.identity p { color: var(--muted); }
.identity .bio { margin-top: calc(var(--line) / 2); font-size: 0.875rem; line-height: 1.5; color: var(--text); }
.cursor { color: var(--accent); }
.metadata { border-left: 1px solid var(--rule); display: grid; grid-template-rows: 1fr 1fr; }
.metadata div { display: grid; grid-template-columns: 7ch minmax(0, 1fr); align-items: center; padding: 0 2ch; gap: 1ch; }
.metadata div + div { border-top: 1px solid var(--rule); }
.metadata dt { color: var(--muted); }
.metadata dd { text-align: right; }
.masthead nav { grid-column: 1 / -1; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; column-gap: 3ch; row-gap: 0.5rem; padding: 0.5rem 2ch; }
.masthead nav a { text-decoration: none; }
.masthead nav a:hover { text-decoration: underline; }
.masthead nav a span { color: var(--muted); }

main section { margin-top: calc(var(--line) * 2); }
h2 { font-size: 1rem; line-height: var(--line); font-weight: 600; margin-bottom: var(--line); }
.section-number { color: var(--accent); margin-right: 1ch; font-weight: 400; }
.link-list { padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.link-list li { border-bottom: 1px solid var(--rule); }
.link-list a { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: baseline; gap: 2ch; padding: calc(var(--line) / 2) 1ch; text-decoration: none; }
.link-list a:hover, .link-list a:focus-visible { background: var(--surface); }
.link-list a:hover .link-name { text-decoration: underline; text-underline-offset: 0.25em; }
.link-destination { color: var(--muted); font-size: 0.75rem; }
.link-destination span { color: var(--link); margin-left: 1ch; }
.recommendations { list-style: none; padding: 0; }
.recommendations li { display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: 1ch; padding-block: calc(var(--line) / 4); }
.tree-branch { color: var(--rule); white-space: pre; }
.affiliate-disclosure { margin-top: calc(var(--line) / 2); font-size: 0.75rem; }

footer { margin-top: calc(var(--line) * 2); border-top: 1px solid var(--rule); padding-top: calc(var(--line) / 2); display: flex; justify-content: space-between; gap: 2ch; font-size: 0.75rem; color: var(--muted); }
footer a { color: var(--muted); text-decoration: none; }

@media (max-width: 640px) {
  .page { margin-top: calc(var(--line) * 1.5); }
  .masthead { grid-template-columns: minmax(0, 1fr); }
  .metadata { border-left: 0; border-top: 1px solid var(--rule); grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .metadata div { display: flex; justify-content: space-between; padding: 0.5rem 1ch; font-size: 0.75rem; }
  .metadata div + div { border-top: 0; border-left: 1px solid var(--rule); }
  .identity { padding: calc(var(--line) / 2) 1ch; }
  .masthead nav { padding-inline: 1ch; column-gap: 2ch; font-size: 0.875rem; }
  .link-list a { grid-template-columns: minmax(0, 1fr) max-content; gap: 0 1ch; }
  .link-name { grid-column: 1; grid-row: 1; }
  .link-destination { grid-column: 2; grid-row: 1; }
}

@media (prefers-contrast: more) {
  :root { --muted: #b2c2b7; --rule: #8a9a8f; }
}