body {
  margin: 0;
  line-height: 1.5;
  font-size: 1.25rem;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  hyphens: auto;
  text-align: justify;
  padding-block-end: 4rem;

  &.no-cookie-banner-accepted {
    padding-block-end: initial;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: start;
}

blockquote {
  margin: 0;
  padding-block: 1em;
  padding-inline: 40px;
  border-radius: .5rem;
  background-color: oklch(from currentColor l 0 0 / .05);
}

main {
  margin-block: 1em;
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25em;
}

header {
  h1:has(+p) {
    margin-block-end: 0;
  }

  h1+p {
    margin-block-start: 0;
  }
}

table {
  border-collapse: collapse;

  thead {
    border-bottom: .0625em solid currentColor;
  }

  td,
  th {
    padding-block: .25em;
    padding-inline: .5em;
  }
}

button:not([disabled]) {
  cursor: pointer;
}

.youtube {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.squircle {
  --displacement: .8em;

  display: inline-block;
  padding-inline: .25em;
  color: oklch(from var(--bg) clamp(0, (l / 0.623 - 1) * -infinity, 1) 0 0);
  background-color: var(--bg);
  clip-path: shape(from 0 var(--displacement),
      curve to var(--displacement) 0 with 0 0 / 0 0,
      hline to calc(100% - var(--displacement)),
      curve to 100% var(--displacement) with 100% 0 / 100% 0,
      vline to calc(100% - var(--displacement)),
      curve to calc(100% - var(--displacement)) 100% with 100% 100% / 100% 100%,
      hline to var(--displacement),
      curve to 0 calc(100% - var(--displacement)) with 0 100% / 0 100%,
      close);
}

.chord {
  &.chord--flat {
    letter-spacing: -.3em;
  }

  sup {
    letter-spacing: initial;
  }
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: .5em 1em;
  background-color: oklch(from currentColor clamp(0, (l / 0.623 - 1) * -infinity, 1) 0 0 / .68);
  backdrop-filter: blur(.25rem);
  border-top: .0625em solid currentColor;

  body.no-cookie-banner-accepted & {
    display: none;
  }
}

.cite {
  margin-block-end: 1em;

  footer {
    margin-block-end: 1em;
    text-align: right;
    font-size: .875em;
    opacity: .75;
  }
}