:root {
  --accent: #b7b;
  --bg: #394bd5;
  --fg: #ccdaff;
  --fg-bright: #fff;
  --flourish: #000;

  --scale: 1;
  --unit: calc(36px * var(--scale));
  --text: calc(22px * var(--scale));

  --line: calc(var(--unit) * 4 / 5);
  --hang: calc(var(--unit) * 4);
  --width: 18;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #a5a;
    --bg: #2f3ebb;
    --fg: #aec3ff;
    --fg-bright: #e5ebff;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body, dd, dl, dt, h1, h2, p, ul {
  margin: 0;
  padding: 0;
}

body {
  color: var(--fg);
  font-family: STIXGeneral, Times, "Times New Roman", serif;
  font-size: var(--text);
  line-height: var(--line);
  margin: 0 auto;
  padding: calc(var(--unit) * 3) 0;
  position: relative;
  width: calc(var(--unit) * var(--width));
}

body::before {
  background: var(--accent);
  content: "";
  display: block;
  height: 100%;
  left: calc(var(--unit) * -3);
  mask-image: url("splatter.png");
  mask-repeat: no-repeat;
  mask-size: contain;
  opacity: 0.67;
  position: absolute;
  top: calc(var(--unit) * 0.5);
  width: calc(var(--unit) * 8);
  z-index: -1;
}

body:has(header a)::before {
  display: none;
}

header {
  left: calc(var(--unit) * -3);
  position: absolute;
  top: calc(var(--unit) * 2);

  &:has(a) img {
    transition: opacity 0.3s ease-in-out;
    opacity: 0.33;
  }

  a {
    display: block;
    pointer-events: auto;

    &:hover img {
      opacity: 0.75;
    }
  }

  img {
    pointer-events: none;
    height: calc(var(--unit) * 10);
    width: calc(var(--hang) * 2);
  }

  h1 {
    filter: drop-shadow(0 0 0.125rem var(--bg));
  }
}

footer, main {
  margin-left: var(--hang);
}

footer {
  font-size: calc(var(--text) * 0.67);

  a {
    color: var(--fg);
  }

  li {
    display: inline-block;
    list-style-type: none;

    &:not(:first-child)::before {
      display: inline;
      content: " ⟋ ";
    }
  }
}

main {
  padding-top: calc(var(--unit) * 4);
  position: relative;
  z-index: 1;

  a, h2, strong {
    color: var(--fg-bright);
  }
}

.abbr {
  font-variant: all-petite-caps;
  letter-spacing: 0.08rem;
}

a.copied {
  pointer-events: none;
  text-decoration: none;
}

.copied::after {
  content: " ✓ ";
  display: inline;
}

dl {
  display: grid;
  grid-template-columns: var(--hang) 1fr;
  margin-left: calc(var(--hang) * -1);
}

dt {
  display: inline-block;
  font-weight: bold;
  margin-right: var(--unit);
  text-align: right;
}

dt:after {
  color: var(--flourish);
  content: "⟋";
  display: inline-block;
  font-weight: bold;
  margin-right: calc(var(--unit) * -1);
  text-align: center;
  width: var(--unit);
}

dd {
  display: inline-block;
}

hr {
  border: none;
  margin: 0;
  margin-left: calc(var(--unit) * -0.75);
}

hr::after {
  color: var(--flourish);
  content: "⟋⟋⟋⟋⟋";
  display: inline-block;
  font-weight: bold;
}

dd, h2, hr, p {
  margin-bottom: var(--line);
}

@media (max-width: 840px) {
  :root {
    --scale: 0.875;
    --unit: min(calc(36px * var(--scale)), calc(100vw / 23));
    --text: calc(var(--unit) * 11 / 18);
  }
}

@media (max-width: 480px) {
  :root {
    --scale: 0.65;
    --unit: calc(36px * var(--scale));
    --text: 17px;
    --line: calc(var(--text) * 1.4);
  }

  body {
    padding: var(--unit);
    width: auto;
  }

  body::before {
    left: 0;
    top: calc(var(--unit) * -0.5);
  }

  header {
    margin-left: calc(var(--unit) * -0.5);
    margin-bottom: var(--unit);
    position: static;
  }

  header img {
    height: auto;
    width: calc(var(--unit) * 6);
  }

  footer, main {
    margin: 0 var(--unit);
  }

  main {
    padding-top: 0;
  }

  dl {
    display: block;
    margin-left: 0;
  }

  dt {
    display: block;
    margin-right: 0;
    text-align: left;
  }

  dt:after {
    display: none;
  }

  dd {
    display: block;
  }

  hr {
    margin-left: calc(var(--unit) / -2);
  }
}