@font-face {
  font-family: "crimson-text";
  src: url("/fonts/CrimsonPro-VariableFont_wght.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "crimson-text";
  src: url("/fonts/CrimsonPro-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --background: #ffffff;
  --foreground: #000000;

  /* width of the text column, and how far images bleed past it on each side */
  --measure: 900px;
  --bleed: 140px;
  --gutter: 1.5rem;
}

body {
  font-family: "crimson-text", system-ui, sans-serif;
  background: var(--background);
  color: var(--foreground);
  font-size: 1.25rem;
}

nav, h1, h2, h3, h4, h5, h6, p, ul, ol {
    box-sizing: border-box;
    width: min(var(--measure), 100% - 2 * var(--gutter) - 2 * var(--bleed));
    margin: 10px auto;
}

ul { padding-left: 1.5em; }

ol { padding-left: 1.5em; }

h1, h2, h3, h4, h5, h6 {
    font-family: "crimson-text", serif;
}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }

/* images sit slightly wider than the text column, bleeding out on both sides */
.center {
  display: block;
  width: min(calc(var(--measure) + 2 * var(--bleed)), 100% - 2 * var(--gutter));
  margin: 10px auto;
  height: auto;
}

a {
  color: var(--foreground);
}

.post-list {
  list-style: none;
  padding: 0;
}

.post-list__item {
  margin-bottom: 2rem;
}

.post-list__title {
  font-size: 1.5rem;
  font-weight: 700;
}

.post-list__date {
  display: block;
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.25rem;
}

.post-list__summary {
  margin-top: 0.5rem;
  font-size: 1rem;
}