/* reset from https://www.joshwcomeau.com/css/custom-css-reset/ */
/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
  /* add experimental line-height */
  line-height: calc(1em + 0.4rem);
}
/*
  3. Allow percentage-based heights in the application
*/
html,
body {
  height: 100%;
  font-size: var(--font-md);
  font-family: var(--sans-font-stack);
}
/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  opacity: var(--img-opacity);
  transition: opacity 0.5s ease-in-out;
}

picture {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* dark mode opacity hover trick from
   https://css-tricks.com/dark-modes-with-css/ */
img:hover,
picture:hover,
video:hover,
canvas:hover,
svg:hover,
img:active,
picture:active,
video:active,
canvas:active,
svg:active {
  opacity: 1;
}

/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

article,
header,
footer {
  display: grid;
  grid-template-columns:
    [left-gutter-start] 1fr
    [left-gutter-end left-margin-start] 1fr
    [left-margin-end left-marginsep-start] 1fr
    [left-marginsep-end main-content-start] min(69ch, 100%)
    [main-content-end right-gutter-start] 1fr
    [right-gutter-end right-margin-start] 1fr
    [right-margin-end right-marginsep-start] 1fr
    [right-marginsep-end];
}

article > .sidenote {
  max-width: 90%;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
  font-size: var(--font-sm);
}

article > img.sidenote,
article > picture.sidenote,
article > figure.sidenote {
  max-width: 66%;
  margin: 1.5rem auto;
}

@media screen and (min-width: 1500px) {
  article {
    display: grid;
    grid-template-columns:
      [left-gutter-start] 1fr
      [left-gutter-end left-margin-start] 35ch
      [left-margin-end left-marginsep-start] var(--spacer-col-width)
      [left-marginsep-end main-content-start] min(69ch, 100%)
      [main-content-end right-gutter-start] var(--spacer-col-width)
      [right-gutter-end right-margin-start] 35ch
      [right-margin-end right-marginsep-start] 1fr
      [right-marginsep-end];
  }

  article > .sidenote,
  article > img.sidenote,
  article > picture.sidenote,
  article > figure.sidenote {
    grid-column: right-margin / span 1;
    grid-row-end: span 5;
    transform: translateY(0.5rem);
    text-align: initial;
    max-width: 100%;
    margin-left: 0;
  }
}

article > *,
article > .box > p,
header > *,
footer > * {
  padding: 0.1em 0.5rem 0.75em 0.5rem;
  grid-column: main-content / span 1;
  overflow-x: auto;
}

article :is(ol, ul) > li {
  padding: 0.1em 0.5rem 0.75em 0.5rem;
}

article > .toc ul > li {
  padding: 0;
}

article > figure {
  margin: 1.25rem auto;
}

article :is(ol, ul) {
  padding-left: 3ch;
  overflow-x: initial;
}

@media screen and (min-width: 90ch) {
  article :is(ol, ul) {
    padding-left: 0.5rem;
  }
}

article > :is(h1, h2, h3, h4, h5, h6) {
  /* approximate golden ratio between padding-bottom and -top */
  padding-top: calc(1.61803 * 0.75em - 0.75rem);
}

/* header and menu */

header > *:not(:first-child) {
  padding-top: 0.6em;
}
header > :first-child {
  padding-left: 0.1em;
}
header a {
  color: var(--dark-link-color);
}

header {
  background: var(--accent);
  margin-bottom: calc(2rem * 1.61803); /* golden ratio */
  padding-bottom: 2rem;
}

header > .menu {
  display: grid;
  grid-template-columns: minmax(15ch, 1fr) repeat(auto-fit, 10ch);
  margin-right: 1em; /* to not overlap with the dark mode indicator */
  text-align: right;
  align-items: end;
  /* column-gap: 2ch; */
}

@media screen and (min-width: 1500px) {
  header > .menu {
    margin-right: 0;
  }
}

header > .menu > .link.button:first-child {
  justify-self: start;
  align-self: start;
  text-align: initial;
  grid-row: 1 / span 10;
  grid-column: 1;
  padding-left: 0;
}

header > .menu > .link.button {
  padding: 2px 5px;
}

/* footer */

footer > .menu {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
  margin: 1.5em auto;
}

footer > .menu > :not(:last-child)::after {
  content: "•";
  padding: 0 0.5ch;
}

article > .full-bleed {
  width: 100%;
  padding: 0;
  grid-column: 1 / -1;
}

article > .extra-wide {
  grid-column-start: left-margin-start;
  grid-column-end: right-margin-end;
}

@media screen and (min-width: 1500px) {
  article > .extra-wide {
    margin-left: auto;
    margin-right: auto;
  }
}

/* dark mode adapted from https://endtimes.dev/no-javascript-dark-mode-toggle/ */
:root {
  --light-fg-lum: 20%;
  --light-bg-lum: 98%;
  --light-fg: hsl(0deg 0% var(--light-fg-lum));
  --light-bg: hsl(0deg 0% var(--light-bg-lum));
  --dark-fg-lum: 90%;
  --dark-bg-lum: 15%;
  --dark-fg: hsl(0deg 0% var(--dark-fg-lum));
  --dark-bg: hsl(0deg 0% var(--dark-bg-lum));
  --light-off-fg: hsl(0deg 0% 60%);
  --dark-off-fg: hsl(0deg 0% 70%);
  --light-off-bg: hsl(0deg 0% 88%);
  --dark-off-bg: hsl(0deg 0% 35%);
  --light-link-color: hsl(240deg 50% 44%);
  --dark-link-color: hsl(240deg 50% 80%);
  --light-accent: hsl(180deg 20% 40%);
  --dark-accent: hsl(180deg 20% 35%);
  --accent: var(--light-accent);
  --bg: var(--light-bg);
  --fg: var(--light-fg);
  --fg-lum: var(--light-fg-lum);
  --bg-lum: var(--light-bg-lum);
  --off-fg: var(--light-off-fg);
  --off-bg: var(--light-off-bg);
  --link-color: var(--light-link-color);

  --light-img-opacity: 1;
  --dark-img-opacity: 0.8;

  /* font sizes, idea from https://www.joshwcomeau.com/css/
     surprising-truth-about-pixels-and-accessibility/
     #calculated-values-14
     */
  --font-xs: calc(16rem / 16);
  --font-sm: calc(18rem / 16);
  --font-md: calc(18.5rem / 16);
  --font-lg: calc(19rem / 16);
  --font-xl: calc(21rem / 16);
  --font-2xl: calc(24rem / 16);
  --font-3xl: calc(26rem / 16);
  --font-4xl: calc(30rem / 16);

  --serif-font-stack: "Source Serif 4", "Source Serif Pro", "Garamond",
    "Apple Garamond", "Minion Pro", "Palatino", "Libre Baskerville",
    "Noto Serif", "Droid Serif", "Baskerville", serif;
  --sans-font-stack: "Source Sans 3", "Source Sans Pro", "Fira Sans", "Roboto",
    "Noto Sans", "Lucida Sans Unicode", "Lucida Grande", "Gill Sans",
    "Helvetica", "Trebuchet MS", "Arial", sans-serif;
  --code-font-stack: "Iosevka", "Fira Mono", "Source Code Pro", "Roboto Mono",
    "Noto Mono", "Inconsolata", "Menlo", "Monaco", "Lucida Console", "Consolata",
    monospace;

  /* lengths/measures */
  --spacer-col-width: 1.25rem;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a > .punct-swallow {
  /* text-decoration-line: none; */
  color: var(--fg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--dark-bg);
    --fg: var(--dark-fg);
    --off-fg: var(--dark-off-fg);
    --off-bg: var(--dark-off-bg);
    --fg-lum: var(--dark-fg-lum);
    --bg-lum: var(--dark-bg-lum);
    --link-color: var(--dark-link-color);
    --img-opacity: var(--dark-img-opacity);
    --accent: var(--dark-accent);
  }
}

#color-mode:checked ~ * {
  --bg: var(--dark-bg);
  --fg: var(--dark-fg);
  --off-fg: var(--dark-off-fg);
  --off-bg: var(--dark-off-bg);
  --fg-lum: var(--dark-fg-lum);
  --bg-lum: var(--dark-bg-lum);
  --link-color: var(--dark-link-color);
  --img-opacity: var(--dark-img-opacity);
  --accent: var(--dark-accent);
}

@media (prefers-color-scheme: dark) {
  #color-mode:checked ~ * {
    --bg: var(--light-bg);
    --fg: var(--light-fg);
    --off-fg: var(--light-off-fg);
    --off-bg: var(--light-off-bg);
    --fg-lum: var(--light-fg-lum);
    --bg-lum: var(--light-bg-lum);
    --link-color: var(--light-link-color);
    --img-opacity: var(--light-img-opacity);
    --accent: var(--light-accent);
  }
}

.color-scheme-wrapper {
  background: var(--bg);
  color: var(--fg);
  min-height: 100%;
}

#color-mode {
  visibility: hidden;
  position: absolute;
}
#color-mode + label > span {
  position: fixed;
  right: 5px;
  top: 2px;
  background: rgba(0 0 0 0);
  color: var(--fg);
}

#color-mode:checked ~ label > span::before {
  content: "☀";
}
#color-mode ~ label > span::before {
  content: "☾";
}

@media (prefers-color-scheme: dark) {
  #color-mode:checked ~ label > span::before {
    content: "☾";
  }
  #color-mode ~ label > span::before {
    content: "☀";
  }
}

/* dark mode end */

/* toc  */

.toc {
  counter-reset: toc1 toc2 toc3;
  font-variant-numeric: tabular-nums;
  max-height: 33vh;
  overflow-y: auto;
}

.toc ul {
  list-style-type: none;
  padding-left: 0.618ch;
  /* margin-block-start: 1em; */
}
.toc > ul {
  padding-left: 0.618ch;
}

.toc > ul > li {
  counter-reset: toc2 0 toc3 0;
}
.toc > ul > li > ul > li {
  counter-reset: toc3 0;
}

.toc > ul > li:before {
  counter-increment: toc1;
  content: counter(toc1) "  ";
}

.toc > ul > li > ul > li:before {
  counter-increment: toc2;
  content: counter(toc1) "." counter(toc2) "  ";
}

.toc > ul > li > ul > li > ul > li:before {
  counter-increment: toc3;
  content: counter(toc1) "." counter(toc2) "." counter(toc3) "  ";
}

/* toc end  */

.end-marker {
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-evenly;
}

.end-marker > svg {
  width: 61.8%;
}

.paragraph-separator {
  margin: 0.75em auto;
  padding: 0;
  font-size: var(--font-3xl);
  text-align: center;
  height: fit-content; /* necessary because it'll add scrollbars otherwise */
}

header > h1 {
  text-align: center;
}

figcaption,
figure > picture {
  text-align: initial;
  text-align-last: center;
  border: solid 1px var(--off-fg);
}

figcaption {
  width: fit-content;
  padding: 0.1em 0.5em;
  margin: 0 auto;
  font-size: var(--font-xs);
  transform: translateY(-0.75px);
}

@media screen and (min-width: 1500px) {
  .box {
    margin-left: auto;
    margin-right: auto;
  }
}

sup {
  vertical-align: text-top;
}

em > em {
  font-style: initial;
}

.box,
blockquote {
  background-color: var(--off-bg);
  width: fit-content;
  padding: 1.25rem 1.85rem;
  margin: 0.85em 0.5rem;
  border: 1px solid var(--fg);
}

.definition.box > :first-child {
  margin-bottom: 0.5em;
}

footer > details {
  font-size: var(--font-xs);
  color: var(--off-fg);
}

footer > details summary ~ * > time {
  font-variant-numeric: tabular-nums;
}

blockquote {
  border-left: 0.5ch solid var(--off-fg);
}

article .toc a:after {
  content: none;
}
details > summary > h2 {
  display: inline;
}
details > summary > ::before {
  content: "+  ";
}
details[open] > summary > ::before {
  content: "−  ";
}
summary::marker {
  content: none;
}

.toc {
  width: 95%;
  padding: 0.618rem;
  margin-bottom: 1.85rem;
  margin-left: 2.5%;
  margin-right: 2.5%;
  height: fit-content;
  background-color: var(--off-bg);
  border: 1px solid var(--fg);
}

@media screen and (min-width: 1500px) {
  .toc {
    grid-column: left-margin / span 1;
    grid-row-end: span 10;
    margin: 0 1.75rem 1.85rem auto;
  }
}

.smallcaps-auto {
  font-feature-settings: "c2sc";
}