/* Mobile reading surfaces. The presentation controller yields to native scrolling
   here until a reader reaches the beginning or end of the current surface. */
@media screen and (max-width:760px) {
  .section-heading > p,
  .lead-copy,
  .annotation p,
  .gallery-caption p,
  .design-principles p,
  .measurement-list p,
  .measurement-list small,
  .measurement-bottom p,
  .final-bottom p,
  .dialog-intro,
  .evidence-item p,
  .image-dialog > p,
  .seo-motion .seo-method-scope,
  .seo-motion .seo-method-goals p + p {
    font-size:14px;
    line-height:1.55;
  }

  .text-button,
  .button-primary,
  .evidence-fab,
  .evidence-tabs > button,
  .evidence-item a,
  .dialog-footer {
    font-size:14px;
    line-height:1.45;
  }

  .text-button,
  .button-primary,
  .evidence-fab,
  .chapter-trigger,
  .icon-button,
  .evidence-tabs > button {
    min-height:44px;
  }

  .icon-button { min-width:44px; }
  .topbar-controls { gap:2px;min-height:44px; }
  .round-button { width:44px;height:44px; }
  .gallery-controls { gap:6px; }
  .gallery-dot { width:36px;min-height:44px; }
  .gallery-dot::after { top:20px;left:16px; }
  .gallery-dot.active::after { left:10px; }
  .gallery-dots { gap:0; }
  .hero-cinema-footer { font-size:14px; }
  .hero-cinema-footer > a { min-height:44px;font-size:14px; }
  .final-wordmark small { font-size:14px;line-height:1.5; }

  dialog,
  .image-dialog-body,
  .chapter-menu {
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .search-wrap input { font-size:16px;line-height:1.5;min-height:24px; }
  .dialog-shell { padding:22px; }
  .dialog-header { align-items:flex-start;gap:14px; }
  .evidence-tabs { gap:24px; }
  .dialog-footer { flex-wrap:wrap;gap:12px; }
  .seo-motion .seo-detail-close { width:44px;height:44px; }

  /* Each absolute diagnosis frame is a complete, independently readable scene. */
  .diagnosis-stage { min-height:0; }
  .diagnosis-fact {
    justify-content:flex-start;
    align-items:flex-start;
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    gap:18px;
    padding:16px 4px 22px 0;
  }
  .diagnosis-stat,
  .diagnosis-copy { flex:none;width:100%; }
  .diagnosis-value { font-size:clamp(96px,27vw,130px); }
  .diagnosis-stat-caption { font-size:11px;line-height:1.5; }
  .diagnosis-count { font-size:11px;line-height:1.5;overflow-wrap:anywhere; }
  .diagnosis-copy h3 { font-size:30px;line-height:1.15; }
  .diagnosis-copy > p,
  .diagnosis-copy .diagnosis-note { font-size:14px;line-height:1.55; }
  .diagnosis-copy .text-button { font-size:14px;min-height:44px; }
  .diagnosis-controls { gap:10px;align-items:stretch; }
  .diagnosis-controls button { font-size:11px;line-height:1.4;min-height:52px;padding:10px 0; }
  .diagnosis-controls button > span { font-size:10px;line-height:1.4;margin-bottom:4px; }

  /* Search metrics retain their evidence caveats at the same readable size. */
  .seo-motion .seo-number-scene {
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    justify-content:flex-start;
    gap:18px;
    padding:14px 4px 20px 0;
  }
  .seo-motion .seo-number-block,
  .seo-motion .seo-metric-copy { flex:none;width:100%; }
  .seo-motion .seo-metric-kicker { font-size:11px;line-height:1.5; }
  .seo-motion .seo-metric-value { font-size:clamp(105px,31vw,160px); }
  .seo-motion .seo-number-scene:last-child .seo-metric-value { font-size:clamp(94px,26vw,135px); }
  .seo-motion .seo-metric-copy h3 { font-size:26px;line-height:1.18; }
  .seo-motion .seo-metric-copy > p,
  .seo-motion .seo-metric-copy .seo-metric-note,
  .seo-motion .seo-metric-copy .seo-metric-action {
    display:block;
    font-size:14px;
    line-height:1.5;
  }
  .seo-motion .seo-metric-action > span { font-size:11px;line-height:1.5; }
  .seo-motion .seo-story-navigation {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 14px;
  }
  .seo-motion .seo-story-navigation button {
    font-size:12px;
    line-height:1.35;
    min-height:44px;
    padding:8px 0;
    white-space:normal;
  }
  .seo-motion .seo-story-navigation button > span { display:inline;margin-right:5px;font-size:10px; }
  .seo-motion .seo-footer { display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start; }
  .seo-motion .seo-footer .text-button,
  .seo-motion .seo-details-trigger { font-size:14px;line-height:1.4;white-space:normal;min-height:44px; }

  /* Map remains visible above a readable active city narrative. */
  .local-motion .local-narrative { height:60%;min-height:0; }
  .local-motion .map-window { height:62%;top:-10%; }
  .local-motion .map-world { min-height:280px; }
  .local-motion .local-frame {
    justify-content:flex-start;
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:10px 4px 18px 0;
    pointer-events:auto;
  }
  .local-motion .local-frame > * { flex-shrink:0; }
  .local-motion .local-step { font-size:11px;line-height:1.5;margin-bottom:12px; }
  .local-motion .local-frame h3 { font-size:clamp(44px,12vw,58px); }
  .local-motion .local-payoff h2 { font-size:clamp(34px,9.5vw,43px); }
  .local-motion .local-frame > p,
  .local-motion .local-payoff > p,
  .local-motion .local-query,
  .local-motion .local-payoff .local-query {
    font-size:14px;
    line-height:1.5;
    max-width:100%;
    margin-top:14px;
  }
  .story-controls button { min-height:52px;font-size:12px;line-height:1.4;padding:10px 0; }
  .story-controls button > span { font-size:10px;line-height:1.4; }
  .story-bottom > .text-button { font-size:14px;line-height:1.45;min-height:44px; }

  /* AEO has one continuous illustration-and-explanation reading surface. */
  .aeo-motion .aeo-theater {
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    justify-content:flex-start;
    padding:16px 4px 22px 0;
    gap:0;
  }
  .aeo-motion .aeo-theater > *,
  .aeo-motion .aeo-step-copy { flex-shrink:0; }
  .aeo-motion h2 { font-size:34px;line-height:1.12; }
  .aeo-motion .aeo-step-copy { min-height:0;margin-top:22px;grid-template-columns:22px 1fr;gap:8px 10px; }
  .aeo-motion .aeo-step-copy { order:1; }
  .aeo-motion .aeo-active-number { font-size:11px;line-height:1.5; }
  .aeo-motion .aeo-step-copy h3 { font-size:23px;line-height:1.25; }
  .aeo-motion .aeo-step-copy p { font-size:14px;line-height:1.55; }
  .aeo-motion .aeo-visual { margin-top:22px; }
  .aeo-motion .aeo-question p { font-size:18px;line-height:1.4; }
  .aeo-motion .aeo-question > span,
  .aeo-motion .aeo-illustration-label { font-size:10px;line-height:1.5;letter-spacing:.08em; }
  .aeo-motion .aeo-assembly { height:345px;margin-top:8px; }
  .aeo-motion .aeo-answer { width:90%;top:16px;padding:18px 16px; }
  .aeo-motion .aeo-answer-head { font-size:10px;line-height:1.4;letter-spacing:.06em;gap:10px; }
  .aeo-motion .aeo-answer-text { font-size:14px;line-height:1.5;margin-top:13px; }
  .aeo-motion .aeo-source-list b { font-size:12px;line-height:1.45; }
  .aeo-motion .aeo-source-list span,
  .aeo-motion .aeo-source-list i { font-size:10px; }
  .aeo-motion .aeo-source-list > div { padding:6px 0; }
  .aeo-motion .aeo-access { width:90%;font-size:10px;line-height:1.4;letter-spacing:.05em; }
  .aeo-motion .aeo-step-controls { gap:12px; }
  .aeo-motion .aeo-step-controls > button { font-size:12px;line-height:1.4;min-height:62px;padding:10px 0; }
  .aeo-motion .aeo-step-controls > button > span { font-size:10px;line-height:1.4; }
  .aeo-motion .aeo-closing { display:block;padding-top:10px; }
  .aeo-motion .aeo-closing p { max-width:100%;font-size:14px;line-height:1.5; }
  .aeo-motion .aeo-closing .text-button { font-size:14px;line-height:1.45;min-height:44px;margin-top:2px; }

  /* The month itself can scroll; cadence and its limitation stay readable. */
  .content-motion .editorial-stage {
    display:block;
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .content-motion .content-heading { gap:18px; }
  .content-motion .content-heading h2 { font-size:34px; }
  .content-motion .publishing-number { width:82px; }
  .content-motion .publishing-number p { max-width:82px;font-size:12px;line-height:1.45; }
  .content-motion .cadence-row { display:block;margin-top:16px; }
  .content-motion .cadence-toggle button { min-height:44px;font-size:14px;line-height:1.4;padding:10px 14px; }
  .content-motion .cadence-row > p { max-width:100%;font-size:14px;line-height:1.5;margin:10px 0 14px; }
  .content-motion .month-monument { top:8px;font-size:130px; }
  .content-motion .month-panel { width:100%;margin-left:0;min-height:0;padding:28px 4px 25px 0; }
  .content-motion .month-caption { font-size:11px;line-height:1.5; }
  .content-motion .month-panel h3 { font-size:30px;line-height:1.15;margin-bottom:15px; }
  .content-motion .month-focus,
  .content-motion .month-topics li { font-size:14px;line-height:1.5; }
  .content-motion .month-topics { display:block;margin-top:18px; }
  .content-motion .month-topics li { margin-top:10px; }
  .content-motion .month-tab { min-height:44px;font-size:11px;line-height:1.4;padding:10px 0; }
  .content-motion .content-footnote { display:block;padding-top:10px; }
  .content-motion .content-footnote p { font-size:14px;line-height:1.5; }
  .content-motion .content-footnote .text-button { font-size:14px;line-height:1.45;min-height:44px; }

  /* The explanatory text belongs to the presentation, not the miniature phone. */
  .journey-stage {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    overflow:auto;
    min-height:0;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    gap:18px;
    padding:8px 4px 20px 0;
  }
  .journey-story { display:contents; }
  .journey-stage .scene-overline { order:0;flex:none;font-size:11px;line-height:1.5; }
  .journey-panel { order:1;flex:none;min-height:0; }
  .journey-panel h3 { font-size:26px;line-height:1.2;min-height:0; }
  .journey-panel p { display:block;font-size:14px;line-height:1.55;margin-top:16px; }
  .journey-visual { order:2;flex:none;margin-top:0; }
  .journey-tabs { order:3;flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin-top:0; }
  .journey-tab { font-size:14px;line-height:1.4;min-height:44px;padding:10px 0; }
  .journey-tab span { font-size:11px;line-height:1.5; }
  .scene-bottom .text-button { font-size:14px;line-height:1.45;min-height:44px; }
  .scene-bottom .scroll-instruction { font-size:10px;line-height:1.5; }
  .concept-note { font-size:10px;line-height:1.5; }

  .plan-intro { gap:18px; }
  .plan-intro > p,
  .plan-intro > span { font-size:14px;line-height:1.5; }
  .plan-intro > span { max-width:46%; }
  .plan-theater {
    display:block;
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:28px 4px 24px 0;
  }
  .phase-content { margin:0;max-width:100%; }
  .phase-label { font-size:11px;line-height:1.5;margin-bottom:14px; }
  .phase-content h2 { font-size:clamp(43px,12vw,56px);line-height:1.08; }
  .phase-content p { font-size:14px;line-height:1.55;max-width:100%;margin-top:20px; }
  .phase-content > span:last-child { font-size:14px;line-height:1.5;letter-spacing:0;max-width:100%;margin-top:20px; }
  .phase-index { position:relative;inset:auto;transform:none;gap:10px;margin-top:24px; }
  .phase-index button { width:44px;height:44px;font-size:12px; }
  .plan-note { font-size:14px;line-height:1.5; }
}

@media screen and (max-width:760px) {
  .diagnosis-fact,.seo-motion .seo-number-scene,.local-motion .local-frame,
  .aeo-motion .aeo-theater,.content-motion .editorial-stage,.content-motion .content-pin,
  .journey-stage,.plan-theater,.chapter-menu {
    scrollbar-width:thin;
    scrollbar-color:rgba(var(--accent),.5) transparent;
  }
  .chapter-menu a { font-size:14px;min-height:44px; }
}

/* At small heights the content chapter becomes one coherent reading surface.
   The headings, cadence explanation, month and caveat cannot all fit around a
   useful inner viewport when they are set at readable sizes. */
@media screen and (max-width:760px) and (max-height:740px) {
  .content-motion .content-pin {
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .content-motion .content-pin > * { flex-shrink:0; }
  .content-motion .editorial-stage { flex:none;overflow:visible;min-height:290px; }
  .content-motion .content-heading h2 { font-size:30px; }
  .content-motion .month-panel { padding-top:25px; }
  .content-motion .month-tabs { margin-top:10px; }
  .diagnosis-value { font-size:96px; }
  .diagnosis-copy h3 { font-size:27px; }
  .local-motion .local-narrative { height:64%; }
  .local-motion .map-window { height:58%;top:-13%; }
  .aeo-motion .aeo-assembly { height:370px; }
  .aeo-motion .aeo-step-controls > button { min-height:62px; }
  .plan-intro { display:block; }
  .plan-intro > span { display:block;max-width:100%;margin-top:10px; }
  .plan-theater { padding-top:20px; }
}