@font-face {
  font-family: "Alegreya";
  src: url("fonts/Alegreya-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Alegreya";
  src: url("fonts/Alegreya-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Alegreya";
  src: url("fonts/Alegreya-Bold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Alegreya";
  src: url("fonts/Alegreya-BoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Alegreya";
  src: url("fonts/Alegreya-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Alegreya";
  src: url("fonts/Alegreya-ExtraBoldItalic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Alegreya SC";
  src: url("fonts/AlegreyaSC-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

.smallcaps {
    font-family: "Alegreya SC", serif;
    font-variant: small-caps;
}

body {
    background: light-dark(#fbfaf8, #202020);
    color: light-dark(#1f1e1c, #dedcd8);
    font-family: "Alegreya", serif;
    margin: auto;
    max-width: 32em;
    padding: 0 1em 90vh;
    line-height: 1.5;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
}

header {
    padding-bottom: 20px;
}

h1 {
    font-size: 150%;
    border-top: solid 3px currentColor;
    font-weight: 800;
}

h1,
h2,
h3,
h4 {
    margin: 24px 0 2px;
}

h2 {
    font-size: 110%;
    font-weight: 800;
}

h3 {
    font-size: 100%;
    font-weight: 600;
}

h4 {
    font-family: "Alegreya SC", serif;
    font-variant: small-caps;
    font-weight: normal;
}

p,
ul,
ol {
    margin-top: 0;
}



main { position: relative; }

/* Applies at every width — collapsed or margin */
aside[role="note"] {
  font-size: 0.875em;
}

/* Only position it in the margin on wide screens */
@supports (anchor-name: --a) {
  @media (min-width: 72rem) {
    sup[data-anchor] {
      anchor-name: attr(data-anchor type(<custom-ident>));
    }

    aside[role="note"][data-anchor] {
      position: absolute;
      position-anchor: attr(data-anchor type(<custom-ident>));
      top: anchor(top);
      left: 100%;
      margin: 0 2rem;
      width: 18rem;
    }
  }
}

/* Collapsed presentation on narrow screens */
@media (max-width: 71.99rem) {
  aside[role="note"] {
    margin: 1rem 0 1rem 2rem;
    border-left: 2px solid #ddd;
    padding-left: 1rem;
    color: #555;
  }
}

table.booktabs {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
  border-collapse: collapse;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;   /* align numbers nicely */
}

/* \toprule — heavier rule above the header */
table.booktabs thead tr:first-child {
  border-top: 2px solid;                /* ~\heavyrulewidth */
}

/* \midrule — thin rule below the header */
table.booktabs thead tr:last-child {
  border-bottom: 1px solid;             /* ~\lightrulewidth */
}

/* \bottomrule — heavier rule at the bottom */
table.booktabs tbody tr:last-child {
  border-bottom: 2px solid;
}

/* No vertical rules ever */
table.booktabs th, table.booktabs td {
  border-left: none;
  border-right: none;
  border-top: none;
}

/* \aboverulesep / \belowrulesep spacing */
table.booktabs th {
  padding: 0.35em 0.6em 0.4em;          /* header: slightly tighter below */
}
table.booktabs td {
  padding: 0.3em 0.6em;                 /* body: roomier rows */
}

/* Header styling (bold, as in LaTeX tables) */
table.booktabs th {
  font-weight: 600;
  text-align: left;
}

/* Optional: \cmidrule — partial rule under specific header cells */
table.booktabs th.cmidrule {
  border-bottom: 1px solid;
  padding-bottom: 0.5em;
}