:root {
  color: var(--color-base-9);
  font-family: "Helvetica Neue", "Helvetica", "Verdana", sans-serif;
  font-size: 15px;
  height: 100%;
  letter-spacing: var(--tracking-regular);
  line-height: var(--leading-regular);

  /* Color variables. */
  --color-base: oklch(0.5 0.015 290deg);
  --color-base-1: oklch(from var(--color-base) 0.99 c h);
  --color-base-2: oklch(from var(--color-base) 0.97 c h);
  --color-base-3: oklch(from var(--color-base) 0.94 c h);
  --color-base-4: oklch(from var(--color-base) 0.85 c h);
  --color-base-5: oklch(from var(--color-base) 0.6 c h);
  --color-base-6: oklch(from var(--color-base) 0.35 c h);
  --color-base-7: oklch(from var(--color-base) 0.27 c h);
  --color-base-8: oklch(from var(--color-base) 0.2 c h);
  --color-base-9: oklch(from var(--color-base) 0.15 c h);
  --color-content: var(--color-base-9);
  --color-content-muted: var(--color-base-5);

  @media (prefers-color-scheme: dark) {
    --color-content: var(--color-base-1);
  }

  /* Font variables. */
  --font-size-md: 1rem;
  --font-size-sm: 0.8rem;
  --leading-regular: 1.6;
  --leading-tight: 1.4;
  --tracking-loose: 0.1em;
  --tracking-regular: 0.025em;

  /* Dimension variables. */
  --bar-height: 2.7rem;
  --max-page-width: 56rem;
  --page-side-padding: 1rem;
  --page-width: min(
    var(--max-page-width),
    calc(100vw - (2 * var(--page-side-padding)))
  );
  --picture-info-width: 30rem;
}

/* GENERAL */

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

@view-transition {
  navigation: auto;
}

::view-transition-group(*) {
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
}

img {
  align-items: center;
  border: 0;
  display: flex;
  font-size: var(--font-size-sm);
  text-align: center;

  &::before {
    /* Alt text box on Firefox. */
    padding: 0.5em;
    width: 100%;
  }
}

a {
  color: inherit;
  text-decoration-color: oklch(from currentColor l c h / 0.25);
  text-decoration-line: underline;
  text-decoration-thickness: 0.2rem;
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  font-size: var(--font-size-md);
  font-weight: bold;
  letter-spacing: var(--tracking-loose);
  line-height: var(--leading-regular);
  margin: 0;
}

button {
  background-color: transparent;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
}

dl,
dt,
dd {
  margin: 0;
}

blockquote {
  margin: 0 0 0 2em;
}

/* PICTURE */

::view-transition-old(picture) {
  animation-name: picture-out;
  object-fit: contain;
  object-position: center top;
}

::view-transition-new(picture) {
  animation-name: picture-in;
}

@keyframes picture-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    translate: -2rem 0;
  }
}

@keyframes picture-in {
  from {
    opacity: 0;
    translate: 2rem 0;
  }
  to {
    opacity: 1;
  }
}

/* PROSE */

.prose,
.prose blockquote {
  display: flex;
  flex-direction: column;
  gap: 1em;
}