:root {
  --color-bg: light-dark(palegoldenrod, #110c00);
  --color-fg: light-dark(black, white);
  --color-text: light-dark(black, white);

  --color-accent: light-dark(darkgoldenrod, goldenrod);
  --color-accent-bg: light-dark(lightgoldenrodyellow, sienna);

  --color-link-text: light-dark(black, white);

  --color-secondary-text: light-dark(#000c, #fffb);
  --color-secondary-fg: light-dark(#0005, #fff4);

  --color-highlight-bg: yellow;
  --color-highlight-fg: black;
  --color-highlight-text: black;

  --color-hover-bg: light-dark(#0005, #fff5);

  --font: atkinson hyperlegible next, sans-serif;
  --font-display: atkinson hyperlegible mono, monospace, monospace;
  --font-mono: atkinson hyperlegible mono, monospace, monospace;
  &.-simple-font {
    --font: sans-serif;
    --font-display: monospace, monospace;
    --font-mono: monospace;
  }

  --weight: 500;
  --weight-bold: 700;
  --weight-black: 900;

  --gap: 1rlh;
  --gap-hairline: 0.1rlh;
  --gap-small: 0.5rlh;
  --gap-medium: 2rlh;
  --gap-large: 3rlh;

  --border: 2px solid;

  --length: 40rem;
}

/* base */
:root {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-weight: var(--weight);
  font-size: calc(18em / 16);
  scroll-padding: 1lh;
}

:where(
  h1, h2, h3, h4, h5, h6, p, ol, ul, dl, blockquote, figure, hr, article,
  section
) {
  margin-block: 1lh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
}

a {
  color: var(--color-link-text);
  &:hover {
    text-decoration-thickness: 2px;
    color: var(--color-accent);
  }
}

time {
  font-variant-numeric: tabular-nums;
}

blockquote {
  margin-inline: 0;
  padding-inline: var(--gap);
  font-style: italic;
  color: var(--color-secondary-text);
  border-inline-start: var(--border) var(--color-secondary-fg);
}

figure {
  margin-inline: 1lh;
  padding: 1lh;
  border: var(--border) var(--color-secondary-fg);

  &::before, &::after {
    content: "";
    display: block;
    margin-block: calc(-1 * var(--gap));
  }

  figcaption {
    text-align: center;
    text-wrap: balance;

    color: var(--color-secondary-text);
    background: var(--color-bg);

    width: max-content;
    padding-inline: .5em;
    margin-inline: auto;
    margin-block-start: -1.5lh;
  }
}

:where(:is(ul, ol)[role=list]) {
  padding-inline-start: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* parts */
.site-header {
  border-block-end: var(--border) var(--color-fg);

  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

.site-logo {
  display: inline flex;
  .img {
    display: block;
    width: 10rem;
    height: auto;
    image-rendering: pixelated;
    @media (prefers-color-scheme: dark) {
      :root:has(meta[name=color-scheme][content="light dark"]) & {
        filter: invert();
      }
    }
    :root:has(meta[name=color-scheme][content="dark"]) & {
      filter: invert();
    }
  }
}

.menu-link {
  font-family: var(--font-display);
  line-height: 0.8em;
  letter-spacing: .05em;
  display: flex;
  flex-flow: column;
  align-items: center;
  text-decoration: none;
  padding: var(--gap-hairline);
  border-radius: var(--gap-hairline);

  &:hover, &:focus-visible {
    background: var(--color-hover-bg);
  }

  span {
    display: block;
  }
}

.site-menu {
  margin-block: var(--gap-large) var(--gap);

  display: flex;
  flex-flow: column nowrap;
  gap: var(--gap-small);

  &:not(:hover, :focus, :target) {
    opacity: .6;
  }

  &:target {
    outline: var(--border) var(--color-highlight-bg);
    outline-offset: var(--gap-small);
  }

  .title {
    margin: 0;
    font-size: inherit;
  }

  .nav {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--gap-small);
  }
}

/* pages */
.post-page {
  .byline {
    margin-block-start: var(--gap-large);
    opacity: .8;

    &::before {
      content: '';
      display: block;
      border-block-start: var(--border) var(--color-fg);
      width: 5rem;
    }

    p { margin: 0 }
  }

  .footnotes {
    border-block-start: var(--border) var(--color-secondary-fg);
    font-size: .9em;
  }

  .citetitle {
    font-weight: var(--weight-bold);
    font-style: normal;
  }
}

/* components */
.h-container {
  max-width: var(--length);
  margin-inline: auto;
}

.link-bundle {
  a:not(:hover, :focus-visible) {
    text-decoration: none;
  }
}

.posts-feed {
  >*+* {
    margin-block-start: var(--gap);
  }
}

.quote-attribution {
  max-width: max-content;
  margin-inline-start: auto;
  padding-inline-start: max(var(--gap-medium), 20%);
}

.dynamic-content {
  background: var(--color-accent-bg);
  font-family: var(--font-mono);
}

.footnote-ref {
  /* expand clickable area */
  display: inline-block;
  padding: 0 .5em 1em .5em;
  margin: 0 -.5em -1em -.5em;
  border-radius: 1px;

  text-decoration: none;
  &:hover, &:focus-visible {
    color: var(--color-accent);
  }

  &:target {
    outline: 1px solid var(--color-highlight-bg);
    outline-offset: 2px;
    padding: 0;
    margin: 0;
  }
}

.foot-note {
  .backref {
    display: block;
    float: right;
    position: relative;
    top: -2lh;
    padding-inline-start: 1ch;
    text-decoration: none;
    color: var(--color-accent);
    &:hover, &:focus-visible {
      color: var(--color-fg);
    }
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}