html {
  font-size: var(--typo-size-base);
}

body {
  font-family: var(--font-body), sans-serif;
  font-feature-settings: "kern" 1;
  font-weight: var(--typo-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--typo-leading-comfortable);
  color: var(--color-text-primary);

  background-color: var(--color-surface-base);
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display), serif;
}

h1 {
  margin-bottom: var(--spacing-cozy);
  padding-bottom: var(--spacing-snug);
  border-bottom: var(--size-4) solid var(--color-text-primary);

  font-size: var(--typo-size-6xl);
  font-weight: var(--typo-weight-black);
  line-height: 1.125;
  text-transform: uppercase;
  letter-spacing: -0.0137em;
}

h2 {
  margin: var(--spacing-relaxed) 0 var(--spacing-cozy) 0;
  padding-left: var(--spacing-cozy);
  border-left: var(--size-4) solid var(--color-text-primary);

  font-size: var(--typo-size-5xl);
  font-weight: var(--typo-weight-black);
  line-height: 1.1765;
  text-transform: uppercase;
  letter-spacing: -0.0096em;
}

h3 {
  margin: var(--spacing-comfortable) 0 var(--spacing-cozy) 0;
  border-bottom: var(--size-2) solid var(--color-text-secondary);


  font-size: var(--typo-size-4xl);
  font-weight: var(--typo-weight-extrabold);
  line-height: 1.2;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: -0.004em;
}

h4 {
  margin: var(--spacing-comfortable) 0 var(--spacing-snug) 0;
  padding: var(--spacing-tight) var(--spacing-snug);

  font-size: var(--typo-size-3xl);
  font-weight: var(--typo-weight-bold);
  line-height: 1.125;
  color: var(--color-surface-base);
  text-transform: uppercase;
  letter-spacing: 0.0025em;

  background: var(--color-text-primary);

}

h5 {
  position: relative;

  margin: var(--spacing-cozy) 0 var(--spacing-snug) 0;
  border-top: var(--size-2) solid var(--color-text-secondary);
  border-bottom: var(--size-2) solid var(--color-text-secondary);

  font-size: var(--typo-size-2xl);
  font-weight: var(--typo-weight-extrabold);
  line-height: 1.28;
  color: var(--color-text-secondary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h6 {
  margin: var(--spacing-cozy) 0 var(--spacing-snug) 0;

  font-size: var(--typo-size-xl);
  font-weight: var(--typo-weight-black);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.035em;

  /* &::after {
    content: "▼";
    display: block;
    font-size: 1.25em;
  } */
}

p {
  margin: var(--spacing-cozy) 0;
  font-size: var(--typo-size-md);
  line-height: var(--typo-leading-normal);
  text-align: justify;
}

h1 + p {
  font-size: var(--typo-size-xl);
  font-weight: var(--typo-weight-bold);
  line-height: 1.4;
  letter-spacing: 0.022em;
}

blockquote {
  margin: var(--spacing-comfortable) 0;
  padding: var(--spacing-snug) 0 var(--spacing-snug) var(--spacing-comfortable);
  border-left: var(--size-4) solid var(--color-text-tertiary);
  color: var(--color-text-tertiary);

  & p {
    margin-top: 0;
  }
}

pre {
  overflow-x: auto;

  margin: var(--spacing-comfortable) 0;
  padding: var(--spacing-comfortable);

  font-family: var(--font-mono), monospace;
  font-size: var(--typo-size-sm);
  line-height: 1.5385;
  color: var(--color-surface-base);

  background: var(--color-text-primary);
}

hr {
  position: relative;

  overflow: visible;

  height: var(--size-4);
  margin: var(--spacing-relaxed) 0;
  border: none;

  background-color: var(--color-text-primary);

  &::after {
    content: "▼";

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    padding: 0 var(--spacing-snug);

    font-size: var(--typo-size-4xl);
    line-height: var(--typo-leading-compressed);
    color: var(--color-text-primary);

    background-color: var(--color-surface-base);
  }
}

figure {
  margin: var(--spacing-relaxed) 0;
  padding: var(--spacing-comfortable) 0;
  border-top: var(--size-3) solid var(--color-text-primary);
  border-bottom: var(--size-3) solid var(--color-text-primary);

  & blockquote {
    position: relative;

    margin: var(--spacing-comfortable) 0;
    padding: var(--spacing-snug) 0 var(--spacing-comfortable) var(--spacing-comfortable);
    border: none;

    font-size: var(--typo-size-lg);
    font-weight: var(--typo-weight-extrabold);
    line-height: var(--typo-leading-loose);
    color: var(--color-text-tertiary);

    &::before {
      content: "";

      position: absolute;
      bottom: calc(var(--size-1)*-1);
      left: 50%;
      transform: translateX(-50%);

      width: var(--size-16);
      height: var(--size-2);

      background: var(--color-text-tertiary);
    }

    & p {
      margin: 0;
      text-align: center;
    }
  }

  & figcaption {
    margin-top: var(--spacing-snug);

    font-size: var(--typo-size-xs);
    color: var(--color-text-tertiary);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.074em;
  }
}


details {
  overflow: hidden;

  & summary {
    padding: var(--spacing-snug) 0;

    font-family: var(--font-display), serif;
    font-size: var(--typo-size-lg);
    font-weight: var(--typo-weight-black);
    line-height: 1.5385;
    color: var(--color-surface-base);
    text-transform: uppercase;
    letter-spacing: 0.035em;

    background: var(--color-text-secondary);

    &::marker {
      content: "🞃";
      position: absolute;
      right: 0;
      font-family: var(--font-body), sans-serif
    }
  }

  &[open] {
    summary {
      &::marker {
        content: "🞁";
      }
    }
  }
}