.story-page .site-nav {
  gap: 12px;
}

.story-heading {
  padding: 58px 0 0;
  background: #f3f7f5;
}

.story-heading-inner,
.story-layout {
  max-width: 760px;
}

.story-heading h1 {
  margin: 0;
  color: #173f38;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.story-body .story-byline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 40px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  break-inside: avoid;
}

.story-byline span {
  color: #52665f;
  font-weight: 400;
}

/* Static linework stays in its own strip, clear of all reading content. */
.story-drawing {
  position: relative;
  width: min(1120px, 100%);
  height: 104px;
  margin: 28px auto 0;
  overflow: hidden;
  pointer-events: none;
}

.story-drawing span {
  position: absolute;
  display: block;
}

.story-stroke {
  height: 1px;
  transform-origin: left center;
}

.story-stroke-one {
  top: 78px;
  left: -2%;
  width: 75%;
  background: #6f9288;
  transform: rotate(-6deg);
}

.story-stroke-two {
  top: 95px;
  left: 40%;
  width: 66%;
  background: #a9c0d3;
  transform: rotate(-15deg);
}

.story-stroke-three {
  top: 98px;
  left: 10%;
  width: 28%;
  background: #c1d0ca;
  transform: rotate(-24deg);
}

.story-arc {
  top: 8px;
  right: 12%;
  width: 212px;
  height: 212px;
  border: 1px solid #497f9c;
  border-radius: 50%;
}

.story-arc-echo {
  top: 24px;
  right: 10%;
  border-color: #b7c9d3;
}

.story-layout {
  padding-top: 42px;
  padding-bottom: 72px;
}

.story-body {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.8;
  overflow-wrap: break-word;
}

.story-body p {
  margin: 0 0 22px;
}

.story-body section {
  position: relative;
  margin-top: 48px;
}

.story-body section::before {
  position: absolute;
  top: 13px;
  left: -66px;
  width: 36px;
  height: 10px;
  border-top: 1px solid #9eb7ad;
  border-bottom: 1px solid #d0ddd7;
  transform: rotate(-16deg);
  pointer-events: none;
  content: "";
}

.story-body section:nth-of-type(even)::before {
  border-color: #a2bacc;
  transform: rotate(14deg);
}

.story-body h2 {
  margin: 0 0 20px;
  color: #233d36;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  scroll-margin-top: 108px;
}

.story-body a {
  color: var(--blue-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.story-body a:hover {
  color: var(--blue-950);
}

.story-body::after {
  display: block;
  width: 76px;
  height: 14px;
  margin: 46px auto 0;
  border-top: 1px solid #739a8a;
  border-bottom: 1px solid #b3c8d7;
  transform: skewY(-10deg);
  content: "";
}

@media (max-width: 940px) {
  .story-body section::before {
    position: static;
    display: block;
    width: 30px;
    height: 6px;
    margin-bottom: 20px;
  }
}

@media (max-width: 640px) {
  .story-heading {
    padding-top: 34px;
  }

  .story-heading h1 {
    font-size: 36px;
  }

  .story-body .story-byline {
    margin-top: 32px;
  }

  .story-drawing {
    height: 72px;
    margin-top: 22px;
  }

  .story-stroke-one {
    top: 62px;
    width: 90%;
  }

  .story-stroke-two {
    top: 70px;
    left: 22%;
    width: 90%;
  }

  .story-stroke-three {
    top: 68px;
    left: -8%;
    width: 46%;
  }

  .story-arc {
    top: 8px;
    right: 8%;
    width: 126px;
    height: 126px;
  }

  .story-arc-echo {
    top: 20px;
    right: 4%;
  }

  .story-layout {
    padding-top: 28px;
    padding-bottom: 40px;
  }

  .story-body section {
    margin-top: 40px;
  }

  .story-body h2 {
    font-size: 26px;
  }
}

@media print {
  .story-page .site-header,
  .story-page .site-footer,
  .story-drawing {
    display: none;
  }

  .story-heading-inner,
  .story-layout {
    width: 100%;
  }

  .story-heading {
    padding-top: 0;
    background: none;
  }

  .story-body section::before,
  .story-body::after {
    display: none;
  }

  .story-body h2 {
    break-after: avoid;
  }

  .story-body p {
    orphans: 3;
    widows: 3;
  }
}