/* Keep the shared desktop composition compact on narrow screens. */
@media (max-width: 640px) {
  .page-header {
    position:fixed; background:#fff; z-index:8;
    height: 116px;
    padding: 60px 16px 8px;
    gap: 2px;
  }
  .story-title {
    max-width: 100%;
    font-size: clamp(16px, 4.5vw, 18px);
    white-space: normal;
  }
  .story-subtitle { font-size: 11px; }
  .personal-brand { left: 16px; top: 14px; }
  .home-button { right: 16px; top: 12px; }

  .stage {
    height: 270px;
    padding: 116px 16px 10px;
    grid-template-columns: 116px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 44px;
    column-gap: 14px;
  }
  .coin-space {
    width: 116px;
    height: 110px;
    min-height: 110px;
  }
  .price-area { min-width: 0; align-self: center; }
  .price-eyebrow { margin-bottom: 3px; }
  .price {
    min-height: 36px;
    font-size: clamp(28px, 7.8vw, 40px);
    line-height: 1;
    letter-spacing: -.065em;
  }
  .price.empty { font-size: clamp(21px, 5.8vw, 28px); }
  .stage-year {
    position: static;
    margin: 3px 0 0;
    font-size: 24px;
    line-height: 1;
  }
  .price-note {
    min-height: 0;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .stage-foot { min-width: 0; }
  .stage-controls button { width: 44px; height: 44px; }

  .chapter {
    min-height: calc(100svh - 270px);
    scroll-margin-top: 270px;
    padding-inline: 20px;
  }
  .chapter h2 { font-size: clamp(38px, 11vw, 62px); }
  .chapter-top, .chapter-bottom { min-width: 0; gap: 10px; }
  .chapter-top span, .chapter-bottom span { overflow-wrap: anywhere; }
  .summary { font-size: clamp(17px, 4.6vw, 19px); }
  .sources summary { max-width: 100%; }
  .source-links { overflow-wrap: anywhere; }

  .newsletter-panel { max-width: calc(100vw - 24px); }
}

@media (max-width: 350px) {
  .personal-brand { font-size: 14px; gap: 5px; }
  .home-button { font-size: 11px; padding: 8px; }
  .stage { column-gap: 10px; }
  .price { font-size: 28px; }
  .chapter { padding-inline: 16px; }
}