#storypage-heading {
  margin: 48px 0 8px;
}
.story-content-section {
  text-align: left;
  line-height: normal;
}
.story-section-main-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #e76924;
  margin-bottom: 1.5rem;
  font-family: "Nunito", sans-serif;
  line-height: normal;
}
.story-section {
  font-size: 1.7rem;
  font-family: "PT Sans", sans-serif;
}
.story-intro {
  color: #e76924;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 2rem;
  font-family: "Nunito", sans-serif;
  line-height: normal;
}
.story-intro-mobile {
  display: none; /* Hidden on desktop */
}
.story-intro-desktop {
  display: block; /* Visible on desktop */
}
.story-description {
  color: #3b5c83;
  margin-bottom: 1.95rem;
  font-size: 1.7rem;
  font-family: "PT Sans", sans-serif;
  line-height: normal;
  font-weight: 600;
}
.story-section-title {
  font-size: 1.7rem;
  margin-top: 22px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #0f8fb8;
  font-family: "Nunito", sans-serif;
}
.story-bullets {
  list-style-type: disc;
  font-size: 1.7rem;
  padding-left: 1.5rem;
  font-family: "PT Sans", sans-serif;
  line-height: normal;
}
.story-bullets li {
  color: #3b5c83;
  margin-bottom: 0.5rem;
  font-size: 1.7rem;
  line-height: normal;
  font-family: "PT Sans", sans-serif;
}
.story-section > p {
  color: #3b5c83;
  font-size: 1.7rem;
  line-height: normal;
  font-family: "PT Sans", sans-serif;
}
.story-section > div,
.story-section > ul {
  font-size: 1.7rem;
  line-height: normal;
  margin-left: 28px;
  font-family: "PT Sans", sans-serif;
}
.story-section > div.d-inline-block {
  margin-left: 0;
  font-family: "PT Sans", sans-serif;
  font-size: 1.7rem;
  line-height: normal;
}
.listen-box {
  background: #fff5c9;
  border-radius: 1.95rem;
  padding: 57px 21px 30px;
  text-align: left;
  font-family: "Nunito", sans-serif;
  line-height: normal;
}
/* Simple: scales the native control (works everywhere) */
audio {
  width: 100%;
  transform: scale(1.25); /* increase UI by 25% */
  transform-origin: left center; /* keep left alignment */
  font-size: 1.95rem; /* increase time/labels where supported */
  display: block;
  margin: 0.25rem 0;
  max-width: 305px;
  margin: -6px 12px 12px 0;
}
.listen-box .teal-lg-label {
  font-size: 2.3rem;
  font-weight: 700;
  color: #008197;
  display: inline-block;
  font-family: "Nunito", sans-serif;
}
.listen-label {
  margin-top: 5px;
  display: inline-block;
}
.read-label {
  margin-top: 15px;
  display: inline-block;
}
.listen-box .btn-wwk-orange {
  padding: 5px 15px;
  font-size: 2rem;
  border-radius: 21px;
  margin-top: 10px;
  display: inline-block;
  font-family: "Nunito", sans-serif;
}
.listen-box .transcript-btn {
  background-color: #008197;
  font-size: 2rem;
  margin-top: 14px;
  font-family: "Nunito", sans-serif;
}
.app-promo > p {
  color: #008197;
  font-weight: 700;
  font-size: 1.7rem;
  font-family: "Nunito", sans-serif;
}
.app-promo h4 {
  font-size: 1.7rem;
  margin-bottom: 0.5rem;
  font-family: "Nunito", sans-serif;
}
.app-promo .love-this-story {
  margin-top: 100px;
  font-family: "Nunito", sans-serif;
  font-size: 1.7rem;
}
.spotlight-box {
  background: #e3f1f3;
  border-radius: 1.7rem;
  padding: 40px 21px 65px 36px;
  text-align: left;
  margin-top: 12px;
  color: #3b5c83;
  font-family: "PT Sans", sans-serif;
}
.spotlight-box > div {
  font-size: 1.7rem;
  font-family: "PT Sans", sans-serif;
}
.spotlight-box .spotlight-title {
  font-size: 2rem;
  color: #3b5c83;
  margin-bottom: 10px;
  font-family: "Nunito", sans-serif;
}
.story-section-group {
  margin-top: 2rem;
  font-family: "PT Sans", sans-serif;
}
.story-section-group-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #e76924;
  margin-bottom: 1.5rem;
  font-family: "Nunito", sans-serif;
}
.hero-heading-2 {
  text-align: left;
  font-family: "Nunito", sans-serif;
}

/* 400px → 1.5rem, 1305px → 2.3rem, fluid in between */
@media (min-width: 400px) and (max-width: 1404px) {
  .listen-box .teal-lg-label {
    font-size: clamp(1.5rem, calc(1.5rem + (2.3 - 1.5) * ((100vw - 400px) / (1405 - 400))), 2.3rem);
  }
  audio {
    transform: scale(1);
  }
}

@media (min-width: 400px) and (max-width: 1404px) {
  .listen-box .btn-wwk-orange {
    font-size: clamp(1.25rem, calc(1.25rem + (2.3 - 1.5) * ((100vw - 400px) / (1405 - 400))), 2.3rem);
  }
  audio {
    transform: scale(1);
  }
}

/* When viewport is below 992px (Bootstrap lg breakpoint), move the spotlight box
   to the very bottom of the page content by making the aside contents participate
   directly in the row and using ordering. This keeps the DOM unchanged while
   visually placing the spotlight after the main column. */
@media (max-width: 991.98px) {
  .storypage-info-panel .row > .col-12.col-lg-7 {
    display: contents;
  }
  .storypage-info-panel .row > aside {
    display: contents;
  }
  #storypage-heading {
    margin: 40px 20px 20px;
  }

  /* Show mobile story-intro below title, hide desktop version */
  .story-intro-mobile {
    display: block;
    margin: 0 15px 20px;
    line-height: 120%;
    font-size: clamp(1.35rem, calc(1.35rem + (2 - 1.35) * ((100vw - 500px) / (992 - 500))), 2rem);
  }
  .story-intro-desktop {
    display: none;
    margin-bottom: 0 !important;
  }

  .app-promo .love-this-story {
    margin-top: 40px;
  }

  .spotlight-box {
    margin-bottom: 40px;
  }

  .listen-box {
    margin-top: 25px !important;
    margin-bottom: 0 !important;
    padding-top: 20px;
  }
  .listen-label {
    margin-top: 10px;
  }
  .listen-box .col-sm-3 {
    width: 25%;
  }

  .listen-box .col-sm-9 {
    width: 75%;
  }
  .listen-box .teal-lg-label {
    font-size: clamp(1.5rem, calc(1.5rem + (2.3 - 1.5) * ((100vw - 500px) / (992 - 500))), 2.3rem);
  }

  /* Ensure the main content column comes first */
  .storypage-info-panel .row > .col-12.col-lg-7 {
    order: 1;
  }

  .story-content-section {
    display: contents;
  }

  .story-cover-image {
    order: 1;
  }

  .story-description {
    order: 2;
  }

  .listen-box {
    order: 3;
  }

  .story-section-main-title,
  .story-section-group,
  .story-section,
  .story-section-title,
  .story-bullets,
  .story-bullets li,
  .story-section > p,
  .story-section > div,
  .story-section > ul,
  .story-section > div.d-inline-block {
    order: 4;
  }

  /* Put spotlight at the end */
  .spotlight-box {
    order: 99;
    width: 100%;
    margin-top: 1rem;
    padding: 30px 20px;
  }

  /* Add 30px left/right margin to key aside blocks to match mobile padding */
  .story-cover-image,
  .listen-box,
  .spotlight-box {
    margin-left: 30px;
    margin-right: 30px;
    width: calc(100% - 60px);
  }
  .storypage-info-panel {
    padding-top: 0;
  }
  .story-content-section {
    padding: 0 10px;
  }
  .story-description {
    margin: 25px 20px 0 40px;
    font-size: clamp(1.25rem, calc(1.25rem + (1.95 - 1.25) * ((100vw - 500px) / (992 - 500))), 1.95rem);
  }
  .spotlight-box .spotlight-title,
  .story-section-main-title,
  .story-section-group-title {
    font-size: clamp(1.5rem, calc(1.5rem + (2 - 1.5) * ((100vw - 500px) / (992 - 500))), 2rem);
  }
  .story-section-main-title,
  .story-section-group-title {
    margin-bottom: 12px;
    display: block;
    width: 100%;
    margin: 20px 30px 10px;
  }
  .story-section-title {
    margin-top: 18px;
  }
  .story-section,
  .story-section-title,
  .story-bullets,
  .story-bullets li,
  .story-section > p,
  .story-section > div,
  .story-section > ul,
  .story-section > div.d-inline-block,
  .app-promo > p,
  .app-promo h4,
  .app-promo .love-this-story,
  .spotlight-box > div {
    font-size: clamp(1.2rem, calc(1.2rem + (1.7 - 1.2) * ((100vw - 500px) / (992 - 500))), 1.7rem);
  }
  .story-section-group {
    margin-top: 0;
  }
  .story-section {
    display: block;
    width: 100%;
    margin: 0 30px;
  }
}
@media (max-width: 575.98px) {
  .page-content-wrapper {
    padding: 0px 10px;
  }
}