/* Mobile copy is immediate; motion progressively enhances a usable ordinary hero. */
.book-intro__mobile-media,
.book-intro__mobile-controls,
.book-intro__mobile-strapline { display: none; }
.book-intro__copy:focus { outline: none; }

@media (max-width: 640px), (max-width: 1024px) and (pointer: coarse) {
  .book-intro { height: auto; padding-top: var(--header-h); }
  .book-intro__stage {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    height: auto;
    min-height: calc(100svh - var(--header-h));
    padding: clamp(1.5rem, 5vw, 2.5rem) 1.25rem 0;
    background: #1b1e1a;
    perspective: none;
  }
  .book-intro[data-mobile-pinned="true"] {
    height: calc(var(--header-h) + var(--book-mobile-height) + var(--book-mobile-travel));
  }
  .book-intro[data-mobile-pinned="true"] .book-intro__stage {
    position: sticky;
    top: var(--header-h);
    height: var(--book-mobile-height);
    min-height: 0;
  }
  .book-intro__closed,
  .book-intro__open-scene,
  .book-intro__video,
  .book-intro__shade,
  .book-intro__skip,
  .book-intro__cue,
  .book-intro__motion-description,
  .book-intro__copy > [data-book-desktop-eyebrow],
  .book-intro__lede { display: none !important; }
  .book-intro__mobile-media {
    display: block;
    position: relative;
    order: 2;
    z-index: 1;
    flex: 1;
    width: calc(100% + 2.5rem);
    min-height: clamp(12rem, 66vw, 32rem);
    margin: 0 -1.25rem;
    overflow: hidden;
    pointer-events: none;
  }
  .book-intro__mobile-still {
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    aspect-ratio: 16 / 9;
    transform: translateY(-50%);
    background: var(--book-mobile-start) center / 100% auto no-repeat;
  }
  .book-intro__mobile-canvas {
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    height: auto;
    max-width: none;
    transform: translateY(-50%);
    opacity: 0;
  }
  .book-intro__mobile-still,
  .book-intro__mobile-canvas {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent);
  }
  .book-intro__stage[data-mobile-state="ready"] .book-intro__mobile-canvas.is-ready { opacity: 1; }
  .book-intro__stage[data-mobile-state="ready"] .book-intro__mobile-still { visibility: hidden; }
  .book-intro__stage[data-mobile-state="static"] .book-intro__mobile-still { background-image: var(--book-mobile-still); }
  .book-intro__copy {
    position: relative;
    order: 1;
    top: auto;
    left: auto;
    width: min(100%, 38rem);
    margin: 0 auto;
    flex: none;
    gap: 1.1rem;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    will-change: auto;
  }
  .book-intro__copy > .book-intro__mobile-strapline {
    display: block;
    max-width: 30ch;
    font-size: clamp(0.95rem, 2.4vw, 1.2rem);
    line-height: 1.45;
    letter-spacing: 0;
    color: rgba(251, 250, 247, 0.85);
    text-wrap: balance;
  }
  .book-intro__copy h1 {
    max-width: none;
    font-size: clamp(2rem, 9.8vw, 3.7rem);
    line-height: 1.05;
  }
  .book-intro__title-line { white-space: normal; }
  .book-intro__actions { width: min(100%, 38rem); flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 0.6rem; }
  .book-intro__actions a { flex: 1; width: auto; min-width: 0; min-height: 44px; padding: 0.75rem 0.65rem; font-size: clamp(0.64rem, 2.5vw, 0.82rem); line-height: 1.2; letter-spacing: 0.08em; white-space: normal; }
  .book-intro__mobile-controls {
    display: flex;
    position: relative;
    z-index: 3;
    order: 3;
    flex: none;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    min-height: 52px;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    color: rgba(251, 250, 247, 0.78);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    visibility: hidden;
  }
  .book-intro[data-mobile-pinned="true"] .book-intro__stage[data-mobile-state="ready"][data-mobile-complete="false"] .book-intro__mobile-controls { visibility: visible; }
  .book-intro__mobile-controls button { min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
  .book-intro__mobile-controls button:focus-visible { outline: 2px solid #a9935d; outline-offset: 3px; }
}

@media (max-width: 640px) and (max-height: 700px) {
  .book-intro__stage { padding-top: 1.25rem; }
  .book-intro__copy { gap: 0.8rem; }
  .book-intro__copy h1 { font-size: clamp(1.85rem, 9.6vw, 3rem); }
  .book-intro__mobile-controls { min-height: 44px; padding-bottom: 0; }
}

@media (min-width: 641px) and (max-width: 1024px) and (pointer: coarse) {
  .book-intro__copy h1 { font-size: clamp(2.6rem, 6vw, 3.8rem); }
}

@media (min-width: 641px) and (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) {
  .book-intro__stage { padding-top: 1.5rem; }
  .book-intro__copy { gap: 0.75rem; }
  .book-intro__copy > .book-intro__mobile-strapline { max-width: none; font-size: 1rem; }
  .book-intro__copy h1 { font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .book-intro__mobile-still { background-image: var(--book-mobile-still); }
}