body {
  padding: 1em;
  max-width: 80ch;
  font-size: 17px;
  margin-inline: auto;
  scrollbar-gutter: stable both-edges;

  background: rgb(250, 250, 250);
  color: rgb(25, 25, 25);
}

a {
  color: rgb(73, 104, 205);
  text-underline-offset: 0.125em;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: all;

  &:hover,
  &:focus-visible {
    text-decoration-style: dotted;
  }

  &:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
  }
}

@view-transition {
  navigation: auto;
}

nav {
  border-bottom: 1px dotted currentColor;
  padding-bottom: 0.5em;

  @media print {
    display: none;
  }

  a[href="/"]::before {
    content: "‹ ";
  }
}

main {
  header {
    margin-block: 3em 0;

    time {
      display: block;
      font-weight: bold;
    }

    h1 {
      margin-block: 0.125em 0;
      width: fit-content;
      font-size: clamp(1.5em, 4vw, 2em);
    }
  }

  h2 {
    margin-block: 1.5em 0;
    clear: both;
    text-box: trim-both text;
  }

  p {
    line-height: 1.5;
    text-box: trim-both text;
  }

  figcaption {
    text-box: trim-both text;
  }

  .articles-list {
    ::marker {
      content: "› ";
    }
  }

  article {
    container: article / inline-size;
    margin-block-end: 3em;
    view-transition-name: article;

    figure {
      break-inside: avoid;
      margin: 2em auto;
      max-width: 100%;
      width: fit-content;
      min-width: min(30ch, 100%);
      text-align: center;

      img {
        max-width: 100%;
        max-height: 17.5em;
        box-sizing: border-box;
        display: inline-block;
        border-radius: 0.25em;

        & + & {
          margin-block-start: 0.5em;
        }
      }

      figcaption {
        opacity: 0.75;
        text-wrap: balance;
        width: 100%;
        contain: inline-size;
        padding: 0.5em 1em 0;
        box-sizing: border-box;
      }

      @container article (min-width: 60ch) {
        &.float-right {
          float: right;
          margin: 0 0 0 0.5em;
          max-width: 30ch;
        }

        &:has(img + img) {
          max-width: 100%;

          img {
            max-width: calc(50% - 0.5em);
          }

          img + img {
            margin-block-start: 0;
            margin-inline-start: 0.5em;
          }
        }
      }
    }
  }
}

::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 500ms;
  animation-timing-function: ease-in-out;
}

::view-transition-new(article) {
  animation-delay: 250ms;
}