/* Foundations */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

#title-block-header {
  margin: 0;
}

#title-block-header .author, #title-block-header .date, #title-block-header .doi {
  margin-block-end: 0;
}

.quarto-figure {
  margin: 0;
}

.listing-no-matching {
  display: none;
}

:root {
  color-scheme: light dark;

  --aqua_natural: #2b746d;
  --aqua_pop: #0daca1;
  --blue_natural: #2b6f9d;
  --blue_pop: #1b91d7;
  --dark: #131211;
  --dark_1: #292726;
  --dark_2: #33302f;
  --dark_blue: #0b4264;
  --dark_green: #2d4616;
  --dark_red: #612a33;
  --green_natural: #4c791f;
  --green_pop: #5c9b0c;
  --light: #eef2f1;
  --light_1: #d4d8d7;
  --light_2: #c5c7c7;
  --light_blue: #85b2d5;
  --light_green: #9bb688;
  --light_red: #d49aa0;
  --orange_natural: #a85220;
  --orange_pop: #e06302;
  --purple_natural: #8a4b81;
  --purple_pop: #c043b1;
  --red_natural: #b04056;
  --red_pop: #fa1762;
  --yellow_natural: #856a03;
  --yellow_pop: #cea60e;

  --text: light-dark(var(--dark), var(--light));
  --bg: light-dark(var(--light), var(--dark));
  background-color: var(--bg);
}

body {
  font-size: 16px;
  font-family: "Libre Baskerville", "Baskerville", serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  padding-bottom: 9rem;
}

/* Geometry */

body > main {
  margin: 1.5rem auto;
  padding-top: 0;
  width: 50rem;
  max-width: calc(100vw - 6rem);
}

.site-header {
  width: 100%;
  margin-bottom: calc(1.5rem - 1px);
  border-bottom: 1px solid var(--dark_2);
}

.site-header a {
  color: inherit;
  text-decoration: none;
}

.site-header > div {
  display: flex;
  width: 50rem;
  max-width: calc(100vw - 6rem);
  margin: 0 auto;
  align-items: baseline;
  justify-content: space-between;
}

.site-header .nav-links {
  display: flex;
  list-style: none;
  gap: 2em;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}

/* Text */

h1, h2, h3, h4 {
  text-transform: uppercase;
  text-wrap: balance;
  padding: 0;
}

h1 {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 3rem;
  margin: 1.5rem 0;

  &.title {
    margin: 0;
  }
}

h2 {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 3rem;
  margin: 1rem 0 0.5rem;
}

h3 {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 2rem 0 1rem;
}

h4 {
  font-size: 1rem;
  font-weight: 700;
  font-size: 1rem;
  text-transform: none;
  line-height: 1.5rem;
  margin: 2rem 0 1rem;
}

p {
  margin: 0 0 1.5rem;
  text-indent: 2em;
  text-wrap: pretty;
}

hr {
  margin: calc(1.5rem - 2px) 0 calc(1.5rem - 2px);
  border: none;
  height: 3px;
  border-top: 1px solid light-dark(var(--light_1), var(--dark_2));
  border-bottom: 1px solid light-dark(var(--light_1), var(--dark_2));
}

p:first-of-type {
  text-indent: 0;
}

p:has(.math) {
  height: calc-size(auto, round(up, size, 1.5rem));
}

p:has(img) {
  text-indent: 0;
  height: calc-size(auto, round(up, size, 1.5rem));
}

p img {
  margin: 0.75rem 0;
  object-fit: contain;
}

/* We need to handle figures with captions, too */
figure:has(p > img) {
  height: calc-size(auto, round(up, size, 1.5rem));
  margin-bottom: 1.5rem !important;
}

figure > p:has(img) {
  height: auto;
}

figure p img {
  margin-bottom: 0;
}

figcaption, p.date {
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1rem;
  height: calc-size(auto, round(up, size, 1.5rem));
}

p.date {
  text-align: start;
}

p code, p a {
  line-height: inherit;
}


a {
  color: var(--blue_pop);
  text-decoration: underline dotted;
  transition: all 300ms ease-in-out;
}

a:hover {
  color: inherit;
  background-color: var(--blue_pop);
  text-decoration: none;
}

blockquote {
  font-style: italic;
  margin: 1.5rem 0 1.5rem -2em;
  padding: 0;
  padding-left: calc(2em - 2px);
  border-left: 2px dotted light-dark(var(--light_1), var(--dark_2));
}

blockquote > p {
  text-indent: 0;
}

ol, ul {
  padding-left: 0;
  margin: 0 0 1.5rem;
}

ul {
  list-style-type: square;
}

ol > li::marker {
  font-family: Georgia, serif;
  font-variant-numeric: oldstyle-nums;
}

div.sourceCode, pre {
  margin: 0 -2em 1.5rem;
  padding: calc(0.75rem - 1px) calc(2em - 1px);
  border: 1px solid light-dark(var(--light_1), var(--dark_2));
  border-radius: 0.75rem;
  overflow: visible;

}

/* Unify styles for highlighed and non-highlighted code */
div.sourceCode > pre.sourceCode {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
}

code, pre code {
  font-family: "Input", "Fira Mono", monospace !important;
  color: light-dark(var(--dark), var(--light));
  line-height: 1.5rem;
  font-size: 15px;
  overflow-x: auto;
  max-width: 100%;

  span {
    color: light-dark(var(--dark), var(--light));
  }
}

/* Listing */

.blog-list {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
}

.blog-list-entry {
  width: 50rem;
  max-width: calc(100vw - 6rem);
}

.blog-list-entry > a {
  display: block;
  color: inherit;
  text-decoration: inherit;
  margin: 0 -2em;
  padding: 1.5rem 2em;
  border-radius: 1.5rem;
  transition: background-color 300ms ease-in-out, color 50ms;
}

.blog-list-entry > a:hover {
  color: var(--bg);
}

.blog-list-entry:nth-child(5n) > a:hover {
  background-color: light-dark(var(--orange_natural), var(--orange_pop));
}

.blog-list-entry:nth-child(5n + 1) > a:hover {
  background-color: light-dark(var(--purple_natural), var(--purple_pop));
}

.blog-list-entry:nth-child(5n + 2) > a:hover {
  background-color: light-dark(var(--green_natural), var(--green_pop));
}

.blog-list-entry:nth-child(5n + 3) > a:hover {
  background-color: light-dark(var(--aqua_natural), var(--aqua_pop));
}

.blog-list-entry hgroup {
  display: flex;
  flex-direction: column;
}


.blog-list-entry hgroup > h2 {
  border: none;
  margin: 0;
}

.blog-list-entry hgroup > h2 > .anchorjs-link {
  color: inherit;
}

.blog-list-entry hgroup > p {
  font-family: "Jost", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 14px;
  padding: 0 0 10px;
}

/* Ornaments */
body > main p:not(:has(img)),
body > main h2,
body > main h3,
body > main h4,
body > main pre:not(.sourceCode),
body > main div.sourceCode {
  position: relative;
}

body > main p:not(:has(img)),
body > main h2,
body > main h3,
body > main h4,
body > main pre:not(.sourceCode),
body > main div.sourceCode {
  position: relative;

  &::before {
    pointer-events: none;
    font-family: "Parisienne", cursive;
    font-weight: normal;
    content: "¶";
    opacity: 0;
    transition: opacity 1s ease-in;
    display: block;
    color: light-dark(var(--light_2), var(--dark_1));
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%) translateY(-16%);
    text-indent: 0;
    font-size: 72px;
    line-height: 1;
    z-index: -10;
  }

  &:hover::before {
    opacity: 0.4;
  }
}

body > main h2::before {
  content: "§" !important;
}

body > main h3::before {
  content: "§§" !important;
  top: -0.2em;
}

body > main h4::before {
  content: "§§§" !important;
  top: -0.2em;
  left: -0.5em;
}

body > main pre:not(.sourceCode)::before,
body > main div.sourceCode::before {
  content: "#" !important;
}