.sm-hero {
  padding-bottom: var(--s5);
}

.sm-ledger {
  max-width: 46rem;
  margin-top: var(--s5);
}

@media (min-width: 1100px) {
  .sm-hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s6);
    align-items: start;
  }

  .sm-hero h1 {
    grid-column: 1 / -1;
  }

  .sm-hero .sm-ledger {
    margin-top: var(--s3);
  }
}

.sm-hero .sm-when {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-label);
}

.sm-story {
  margin: var(--s2) 0 0;
  color: var(--text-muted);
  font: 400 clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem)/1.5 var(--display);
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.sm-clock,
.sm-story b {
  color: var(--text);
  font-weight: 500;
}

.sm-story b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sm-story a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.24em;
  transition: color 160ms ease;
}

.sm-story a:hover,
.sm-story a:focus-visible {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.sm-row {
  scroll-margin-top: var(--s4);
}

.sm-reads-t {
  margin: var(--s4) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 500;
}

.sm-reads {
  position: relative;
  max-width: 28rem;
  margin: var(--s2) 0 0;
  padding: 0 0 0 var(--s3);
  list-style: none;
}

.sm-reads::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  left: 0.3rem;
  width: 1px;
  background: var(--line);
  transform-origin: top;
}

.sm-reads li {
  position: relative;
  padding-block: 0.3rem;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.sm-reads li::before {
  content: "";
  position: absolute;
  top: 0.82rem;
  left: calc(0.3rem - var(--s3) - 3.5px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 0 3px var(--bg);
}

.sm-note {
  max-width: 28rem;
  margin: var(--s3) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-label);
  line-height: 1.55;
}

.sm-flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.sm-flip > .sm-stage {
  order: -1;
}

.sm-wide {
  grid-template-columns: minmax(0, 1fr);
}

.sm-wide-text {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s6);
  align-items: end;
}

.sm-wide-text .sm-reads-t {
  margin-top: 0;
}

.sm-stage .sm-plan {
  width: min(100%, 26.25rem);
}

.sm-stage .sm-stuck {
  width: min(100%, 32.5rem);
}

.sm-stage .sm-time {
  width: min(100%, 66rem);
}

.sm-duo {
  display: grid;
  width: min(100%, 34rem);
}

.sm-meet .back {
  width: min(78%, 26.25rem);
  transform: none;
}

.sm-meet .front {
  width: min(84%, 27.5rem);
  align-self: center;
  transform: translateY(1rem);
}

.sm-next {
  width: min(100%, 36rem);
}

.sm-next .back {
  width: min(42%, 15rem);
  align-self: start;
  transform: none;
}

.sm-next .front {
  width: min(54%, 19rem);
  align-self: start;
  margin-top: var(--s5);
  transform: none;
}

.sm-next.duo,
.sm-meet.duo {
  min-height: 22rem;
}

.sm-last {
  align-items: start;
}

.sm-last .qa-d {
  max-width: 34rem;
  margin-top: var(--s4);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sm-reads::before {
      animation: sm-rail linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 45%;
    }

    .sm-reads li::before {
      animation: sm-dot linear both;
      animation-timeline: view();
      animation-range: entry calc(60% + var(--n, 0) * 8%) entry calc(90% + var(--n, 0) * 8%);
    }

    .sm-reads li:nth-child(2)::before { --n: 1; }
    .sm-reads li:nth-child(3)::before { --n: 2; }
    .sm-reads li:nth-child(4)::before { --n: 3; }
    .sm-reads li:nth-child(5)::before { --n: 4; }

    .sm-stage > img,
    .sm-duo .front {
      animation: sm-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
  }
}

@keyframes sm-rail {
  from {
    transform: scaleY(0);
  }
}

@keyframes sm-dot {
  from {
    background: var(--line);
    transform: scale(0.5);
  }
}

@keyframes sm-settle {
  from {
    translate: 0 2.5rem;
  }
}

@media (max-width: 860px) {
  .sm-flip {
    grid-template-columns: 1fr;
  }

  .sm-flip > .sm-stage {
    order: 0;
  }

  .sm-wide-text {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }

  .sm-last .qa-d {
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .sm-next.duo {
    grid-template-areas: "a" "b";
    gap: var(--s2);
    min-height: 0;
  }

  .sm-next .back {
    grid-area: a;
    width: 15rem;
  }

  .sm-next .front {
    grid-area: b;
    width: 17.5rem;
    justify-self: end;
    margin-top: 0;
  }
}