.hero-image {
  position: relative;
  width: 100%;
  height: 100%;
  background-position: 50% 25%;
  background-image: url("https://images.unsplash.com/photo-1606337321936-02d1b1a4d5ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=65");

  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 2vmax;
    right: 2vmax;
    bottom: 2vmax;
    left: 2vmax;
    background-color: rgba(20, 20, 20, 0.8);
    z-index: 0;
    backdrop-filter: blur(5px);
  }
}

header {
  position: relative;
  min-height: 75vh;
  padding: 5ch;
  font-size: clamp(1.3em, 6vw, 2em);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;

  & a {
    color: white;
  }

  & h1 {
    max-width: 25ch;
  }

  & .meta {
    font-size: 90%;
    margin-top: 1lh;
    margin-bottom: 1lh;
  }
}

article {
  --article-background-color: 240, 240, 240;

  position: relative;

  & h2 {
    font-size: clamp(24px, 2vw, 48px);
    margin-bottom: 1lh;
  }

  &.content {
    background-color: rgb(var(--article-background-color));
    min-height: 100vh;
    padding: 1lh 5ch;

    view-timeline-name: --subjectRevealTimeline;

    & .content-inner {
      margin-top: 2lh;
      /* column-count: 2;
        column-gap: 5ch; */
    }
  }

  & p {
    max-width: 70ch;
    font-size: clamp(16px, 2vw, 32px);
    margin-bottom: 2lh;
  }

  & ul {
    max-width: 70ch;
    font-size: clamp(16px, 2vw, 32px);
    margin-bottom: 2lh;

    & li {
      margin-bottom: 1lh;
    }
  }

  & .progress {
    position: sticky;
    top: 1vmax;
    left: 1vmax;
    width: 100%;
    height: 20px;
    overflow: hidden;
    border-radius: 10px;
    background-color: rgba(var(--article-background-color), 0.9);
    /* border-top: none;
    border-bottom: none;
    border-left: 2px solid gray;
    border-right: 2px solid gray; */
    border: 1px solid rgba(20, 20, 20, 10%);
    border-bottom-color: rgba(20, 20, 20, 30%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    &.animation {

      &::before {
        content: '';
        display: block;
        flex: none;
        width: 100%;
        height: 90%;

        background-color: rgba(20, 20, 20, 45%);
        /* backdrop-filter: contrast(0.5); */

        animation-timeline: --subjectRevealTimeline;

        animation-name: appear;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-duration: 1ms;
        animation-range-start: entry 0%;
        animation-range-end: exit 90%;
      }
    }
  }

}

@keyframes appear {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}