:root {
  --measure: 60ch;
  --space-sm: 1rem;
  --space-m: 2rem;
  --sqrt2: 1.4142;
  --page-h: clamp(28rem, 85vh, 56rem);
  --page-w: calc(var(--page-h) / var(--sqrt2));
}

html {
  font-size: 17px;
  height: 100%;
}

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

*:not(dialog) {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

a {
  color: #384c68;
}

a:visited {
  color: #4e376e;
}

a:focus {
  color: #91918d;
}

a:active {
  color: #aaa;
}

body {
  height: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: Gelasio, serif;
  color: #454543;
  background-color: #dedbd7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
}

main > h1 {
  text-align: center;
  font-size: 5rem;
  line-height: 100%;
  margin-bottom: var(--space-sm);
}

main {
  height: 100%;
  aspect-ratio: 1 / var(--sqrt2);
  max-inline-size: 100%;
  background-color: #e8e5e2;
  column-width: calc(var(--page-w) - var(--space-m));
  column-fill: auto;
  padding: var(--space-sm);
  overflow: auto hidden;
  column-rule: 2px solid #dedbd7;
  scrollbar-gutter: stable both-edges;
  scroll-snap-type: x mandatory;

  &::column {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin: var(--space-sm);
  }
}

footer {
  padding-top: var(--space-sm);
}

article {
  margin-block: var(--space-sm);
  margin-inline: var(--space-sm);

  & + article {
    margin-top: var(--space-sm);
  }

  & > header {
    display: inline;
    font-weight: bold;

    &::after {
      content: ' '
    }
  }

  & > time {
    font-style: italic;

    &::before {
      content: ' • ';
    }
  }

  & > p {
    text-indent: var(--space-sm);
  }

  & > header + p {
    display: inline
  }

  & img {
    padding: var(--space-sm);
  }

  & img + em {
    display: block;
    text-align: center;
    text-indent: 0;
    padding-bottom: var(--space-sm);
  }
}