:root {
  --max-width: 620px;
  --max-width-with-sidebar: calc(var(--max-width) + 270px);
  --bg: #fffff6;
  --link-after: #7b31c1;
  --link-hover: #eeddff;
  --text: #111;
  --toc-bar: #d4d2d4;
  --code-bg: #363636;
  --code-text: #e3e3e3;
  --text-spacing: 0.6em;
  --accent: #85144b;
}

body {
  font-family: "EB Garamond", serif;
  color: var(--text);
  background-color: var(--bg);
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 1.2em;
  line-height: 1.4;
  display: flex;
  justify-content: center;
  font-variant-numeric: proportional-nums oldstyle-nums;
  font-feature-settings: "onum";
  hyphens: auto;
  text-align: justify;
}

h1 {
  font-style: normal !important;
  /* text-decoration: underline var(--accent); */
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1rem;
  font-size: 2em;
  hyphens: none;
  display: block;
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-style: italic;
  font-weight: normal;
  text-align: left;
  scroll-margin-top: 0.5em;
  position: relative; /* needed for anchor # visual */
}

summary:hover {
  cursor: pointer;
}

/*
Replace default margins with padding to appease gumdrop
Leave h1 as margin because we want the collapsed toc on mobile to have consistent spacing
between toc and the thing above toc (garden doesn't have a date).
https://stackoverflow.com/questions/7049952/what-are-the-default-margins-for-the-html-heading-tags-h1-h2-h3-etc
*/
h2 {
  margin: 0;
  padding: 0.75em 0;
}
h3 {
  margin: 0;
  padding: 0.83em 0;
}
h4 {
  margin: 0;
  padding: 1.12em 0;
}
h5 {
  margin: 0;
  padding: 1.5em 0;
}
h6 {
  margin: 0;
  padding: 1.67em 0;
}

/*
transparent border that magically "closes" the space between sections
without this, there's a micro area where gumdrop doesn't highlight either section.
*/
section {
  border: 1px solid rgba(0, 0, 0, 0);
}

#notes {
  min-height: 100lvh;
}

/*
SIDENOTE STUFF *************************************
*/
.sidenote {
  display: inline;
}

.sidenote__content {
  margin: 0;
  size: 0.7em;
}

.sidenote__content > sup {
  margin-right: 0.5em;
}
.sidenote__checkbox {
  display: none;
}

/* Hidden, but accessible to browsers that don't do CSS (e.g. screenreaders, Pocket) */
.sidenote__content-parenthesis {
  position: absolute;
  left: -99999px;
  top: auto;
}

/* For narrow viewports, the sidenote is hidden by default and shown when the checkbox is checked. */
/* --max-width + toc width * 2 + toc right + site-container padding * 2 */
@media (max-width: calc(620px + 270px * 2 + 2rem + 1.5em * 2 - 1px)) {
  /* @media screen and (max-width: 1079px) { */
  .sidenote__checkbox ~ .sidenote__content {
    /* Hidden, but accessible to browsers that don't do CSS (e.g. screenreaders, Pocket) */
    position: absolute;
    left: -99999px;
    top: auto;
  }

  .sidenote__checkbox:checked ~ .sidenote__content {
    /* override hidden-but-accessible */
    position: relative;
    left: auto;

    /* Don't break up line containing the sidenote */
    float: left;
    min-width: 100%;

    display: block;
    margin: 0.8rem 0;
    padding: 0.8rem 1.6rem;
  }

  .sidenote__button {
    text-decoration: underline;
    cursor: pointer;
  }

  .sidenote__button:not(:hover):focus::after {
    display: inline;
    /* display:inline-block causes misalignment between focus ring and background. */
  }

  .sidenote__checkbox:checked ~ .sidenote__button::after {
    content: none;
  }
}

/* For sufficiently wide viewports. */
@media (min-width: calc(620px + 270px * 2 + 2rem + 1.5em * 2)) {
  /* @media screen and (min-width: 1080px) { */
  .sidenote__button {
    cursor: text;
  }

  .sidenote__content {
    display: block;
    float: right;
    clear: both;
    right: calc(var(--max-width) +2rem);
    margin-right: -300px;
    width: 250px;
    font-size: 1em;
    color: var(--text-color);
  }
}

/*
END SIDENOTE STUFF ********************
*/

#toc h2 {
  font-style: normal;
}

#toc {
  /* max-width: 15rem; */
  text-align: left;
}

/* Float TOC to the right only when there's enough room
--max-width + toc width * 2 + toc right + site-container padding * 2
*/
@media (min-width: calc(620px + 270px * 2 + 2rem + 1.5em * 2)) {
  #toc {
    position: fixed;
    top: 2rem;
    margin-left: calc(620px + 2rem);
    width: 270px;
    background-color: var(--bg);
    padding-top: 1em;
    padding-bottom: 1em;
  }
}

/* When screen is too narrow, keep TOC in flow within site-container */
@media (max-width: calc(620px + 270px * 2 + 2rem + 1.5em * 2 - 1px)) {
  #toc {
    /* position: static; */
    margin-bottom: 2em;
    margin-top: 2em;
  }
}
#toc h2 {
  font-weight: normal;
  font-size: 1em;
  padding: 0;
  padding-left: 1em;
}
#toc a {
  text-decoration: none;
  padding-bottom: 0;
}
#toc li.active a {
  font-style: italic;
}
#toc ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-left: 1px solid var(--toc-bar);
  padding-left: 1em;
}

h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  text-decoration: none !important;
}

h2 a::after,
h3 a::after,
h4 a::after,
h5 a::after,
h6 a::after {
  content: "" !important;
}

h2 a::before,
h3 a::before,
h4 a::before,
h5 a::before,
h6 a::before {
  content: "#";
  position: absolute;
  left: -0.8em;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.2s;
}

h2 a:hover::before,
h3 a:hover::before,
h4 a:hover::before,
h5 a:hover::before,
h6 a:hover::before {
  opacity: 0.5;
}

p {
  margin: var(--text-spacing) 0;
}

/* p:first-of-type:first-letter { */
/*   float: left; */
/*   font-size: 4em; */
/*   line-height: 1; */
/*   font-weight: bold; */
/*   margin-right: 9px; */
/*   color: var(--accent); */
/* } */

.left-align {
  text-align: left;
}

.stdnums {
  font-variant-numeric: initial;
  font-feature-settings: normal;
}

.date {
  font-size: 85%;
  font-variant-numeric: initial;
  font-feature-settings: normal;
}

#site-container {
  max-width: var(--max-width-with-sidebar);
  margin: 0px;
  padding: 1.5em;
}

#site-container > * {
  max-width: var(--max-width);
}

img {
  max-width: var(--max-width);
  image-rendering: pixelated;
}

.figure-caption {
  margin: auto;
  text-align: center;
}

.figure-caption em {
  font-variant-numeric: initial;
  font-feature-settings: normal;
}

/* dinkify */
hr {
  border: none;
  text-align: center;
}
hr::before {
  content: "* * *";
}

.smallcaps {
  font-variant: small-caps;
  font-feature-settings: "smcp";
}

.oldstyle {
  font-variant-numeric: proportional-nums oldstyle-nums;
  font-feature-settings: "onum";
}

.spoiler {
  background-color: var(--text);
}

.spoiler:hover {
  background-color: var(--bg);
}

a {
  text-decoration: underline var(--accent);
  color: inherit;
}

a:hover {
  /* text-decoration: none; */
  color: var(--accent);
  border-radius: 8px;
}

sup {
  vertical-align: top;
  font-variant-numeric: initial;
  font-feature-settings: normal;
}

ul {
  list-style-type: "⸗  ";
}
ul,
ol {
  padding-left: 1em;
  margin: var(--text-spacing) 0;
}

img {
  max-width: 100%;
  image-rendering: pixelated;
}

nav {
  overflow: visible;
  max-width: inherit;
}
nav a {
  line-height: 1.2;
  display: inline-block;
  padding: 8px;
  margin-left: -8px;
  margin-right: 8px;
}

pre {
  overflow-x: auto;
  width: 0;
  min-width: 100%;
  background-color: var(--code-bg);
}

pre code {
  color: var(--code-text);
  display: block;
  padding: 1em;
  text-align: left;
  hyphens: none;
}

[role="doc-backlink"] {
  margin-right: 0.5em;
}

blockquote {
  margin: 1em;
  margin-bottom: 0em;
  display: block;
}

.blockquote > p:last-child {
  text-align: right;
}

@media print {
  body {
    background-color: white;
    color: black;
  }

  pre code {
    white-space: pre-wrap;
  }
}

footer {
  border-top: 1px solid var(--accent);
  display: flex;
  justify-content: center;
  margin-left: 0%;
  margin-right: 0%;
  margin-top: 2em;
  padding-top: 1em;
  a {
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 0.4em;
    svg {
      height: 1rem;
      width: 1rem;
    }
  }
  a:hover {
    svg {
      fill: var(--accent);
    }
  }
}