@media only screen and (max-width: 768px) {
  html,
  body {
    max-width: 100%;
  }

  /* Do not put overflow:hidden/auto on body on mobile: it can become the
     nearest scrolling ancestor and prevent the reveal panel from sticking. */
  body {
    overflow-x: visible;
  }

  /* iOS Safari can break descendant sticky when an ancestor uses overflow: clip.
     Keep the story wrapper overflow-visible on mobile; the sticky panel itself
     still clips the oversized book artwork. */
  .book-story {
    overflow: visible;
  }

  #hero {
    display: none;
  }

  #hero-mobile {
    display: block;
    height: 520px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
  }

  #hero-mobile .layer {
    height: 520px !important;
    z-index: 0;
  }

  #hero-mobile .layer-bg {
    background-position: center bottom;
    background-size: cover;
  }

  #content {
    padding-top: 48px;
  }

  h1 {
    font-size: clamp(3.2rem, 10.5vw, 5rem);
    line-height: 1.05;
    margin: 0 0 24px;
  }

  h4 {
    font-size: 1.5rem;
  }

  #content .container {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  #content section {
    min-height: 70vh;
    padding-bottom: 120px;
  }

  /* Keep the opening credit/introduction compact on tall mobile screens.
     The generic section rule above is intentionally preserved for legacy
     sections, but the first section should size to its actual content. */
  #content > .container > section {
    min-height: auto;
    padding-bottom: 48px;
  }

  #content .row {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0 !important;
  }

  #content [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }
}

@media only screen and (max-width: 520px) {
  h1 {
    font-size: clamp(2.8rem, 11vw, 4.2rem);
    margin-top: 0;
  }

  .tutorial-link {
    font-size: 15px;
  }

  #hero-mobile,
  #hero-mobile .layer {
    height: 430px !important;
  }
}

@media only screen and (max-width: 768px) {
  #content .book-story section {
    min-height: 0;
    padding-bottom: 0;
  }

  .book-intro {
    display: flex;
    flex-direction: column;
    gap: 44px;
    padding: 90px 24px 110px;
  }

  .book-intro__copy h2,
  .book-gallery__header h2 {
    font-size: clamp(54px, 17vw, 78px);
  }

  .book-lead {
    font-size: 17px;
    margin: 34px 0;
  }

  .book-intro__visual {
    width: 100%;
  }

  /* Mobile keeps a shorter sticky sequence so the pop-up book still
     opens with scroll without making the page feel excessively long. */
  .book-reveal {
    height: 215vh;
    height: 215svh;
  }

  .book-reveal__sticky {
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    padding: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .book-reveal__heading {
    left: 24px;
    max-width: calc(100% - 48px);
    position: absolute;
    top: max(56px, env(safe-area-inset-top));
    z-index: 3;
  }

  .book-reveal__heading h2 {
    font-size: clamp(48px, 15vw, 70px);
  }

  .book-reveal__book {
    bottom: -1px;
    clip-path: inset(0 calc((1 - var(--book-progress, 0)) * 28%) 0);
    left: 50%;
    margin: 0;
    position: absolute;
    transform: translateX(-50%) translateY(calc((1 - var(--book-progress, 0)) * 28px)) scale(calc(0.86 + var(--book-progress, 0) * 0.14));
    transform-origin: center bottom;
    width: min(146vw, 700px);
    will-change: clip-path, transform;
    z-index: 1;
  }

  .book-reveal__note {
    bottom: auto;
    font-size: 15px;
    left: 24px;
    line-height: 1.55;
    margin: 0;
    max-width: min(72vw, 310px);
    opacity: clamp(0, calc((var(--book-progress, 0) - 0.5) * 2.5), 1);
    position: absolute;
    right: auto;
    top: clamp(245px, 35svh, 330px);
    transform: translateY(calc((1 - var(--book-progress, 0)) * 22px));
    z-index: 3;
  }

  .book-reveal__index {
    font-size: clamp(112px, 38vw, 150px);
    right: 12px;
    top: 46px;
    z-index: 0;
  }

  .book-gallery {
    padding: 120px 24px 100px;
  }

  .book-gallery__header {
    margin-bottom: 100px;
  }

  .book-gallery__header p:last-child {
    font-size: 17px;
    margin-top: 30px;
  }

  .book-spread,
  .book-spread--right {
    display: flex;
    flex-direction: column;
    gap: 34px;
    margin-bottom: 120px;
  }

  .book-spread--right .book-spread__image,
  .book-spread--right .book-spread__copy {
    grid-column: auto;
    grid-row: auto;
  }

  .book-spread__image,
  .book-spread__copy {
    width: 100%;
  }

  .book-spread__image {
    transform: none !important;
  }

  .book-spread__image img {
    max-height: none;
  }

  .book-spread__copy h3 {
    font-size: 38px;
  }

  .book-ending {
    align-items: start;
    display: flex;
    flex-direction: column;
    margin: 0 24px;
    padding: 36px 0 60px;
  }
}