/* Variables */

:root {
  /* from https://24ways.org/2006/compose-to-a-vertical-rhythm */
  --base-font-size: 2rem;
  --base-line-height: 1.6;
  --scale-factor: 1.33;

  --space: calc(var(--base-font-size) * var(--base-line-height));

  /* from https://bitsofco.de/the-new-system-font-stack */
  --fonts-sans: system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  --fonts-serif: "Palatino Linotype", "Palatino", "Book Antiqua", "Baskerville", "Bookman Old Style", "Garamond", "Georgia", serif;
  --fonts-mono: "Consolas", "Lucida Console", "Menlo", "Monaco", "Cousine", "Courier New", "Courier", monospace;

  --color-text:   hsl(180, 25%, 25%);
  --color-link:   hsl(225, 75%, 60%);
  --color-subtle: hsl(180, 25%, 90%);
}

/* Base */

html {
  font-family: var(--fonts-sans);
  font-size:   62.5%;
  line-height: var(--base-line-height);
  color:       var(--color-text);
  box-sizing:  border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: var(--space);
  font-size: var(--base-font-size);
}

main {
  max-width: calc(var(--space) * 32);
}

img, video {
  max-width: 100%;
}

/* Typography */

a {
  color: inherit;
  text-decoration-color: var(--color-link);
  text-underline-offset: 0.25rem;
  transition: color 0.2s ease;

  &:hover, &:active {
    color: var(--color-link);
  }
}

p, ul, ol, pre, table {
  margin-block-start: 0;
  margin-block-end: var(--space);
}

code {
  padding: 0.3rem;
  border-radius: 0.6rem;
  font-size: 0.9em;
  background-color: var(--color-subtle);
}

blockquote {
  margin-block: 0 var(--space);
  margin-inline: unset;
  padding-inline-start: calc(var(--space) - 0.5rem);
  border-left: 0.5rem solid var(--color-subtle);
}

h1, h2, h3, h4 {
  line-height: calc(var(--base-line-height) * 0.85);
}

h1 {
  margin-block: calc(var(--space) * 2);
  font-size: calc(var(--base-font-size) * pow(var(--scale-factor), 3));
}

h2 {
  margin-block-start: calc(var(--space) * 2);
  margin-block-end: var(--space);
  font-size: calc(var(--base-font-size) * pow(var(--scale-factor), 2));
}

h3 {
  margin-block-start: var(--space);
  margin-block-end: 0;
  font-size: calc(var(--base-font-size) * var(--scale-factor));
}

h4 {
  margin-block-start: var(--space);
  margin-block-end: 0;
  font-size: var(--base-font-size);
}

hr {
  margin-block: calc(var(--space) * 4);
  border: 0.2rem solid var(--color-subtle);
}