/* Mobile composition only. Desktop continues to use refresh.css/typography.css. */
@media (max-width:820px){
  /* The 16:9 film keeps its complete frame instead of letterboxing inside a
     full-height phone screen. The statement follows it in normal flow. */
  .intro{display:flex;flex-direction:column;height:auto;min-height:0;padding:66px 0 30px;background:var(--paper)}
  .intro::before,.intro::after{display:none}
  .intro-video{
    position:relative;inset:auto;display:block;flex:none;
    width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;
    transform:none!important;filter:none!important;opacity:1!important;will-change:auto;
  }
  .intro-copy{
    position:relative;inset:auto;flex:none;width:auto;max-width:none;
    margin:18px 16px 0;padding:0;text-align:left;
    transform:none!important;opacity:1!important;will-change:auto;
  }
  .intro h1{margin:0;font-size:clamp(21px,5.6vw,28px);line-height:1.22;text-shadow:none}
  html[lang="zh-CN"] .intro h1{line-height:1.45}

  .whats-on.programme-edit{padding:48px 0 32px}
  .programme-scene{
    display:grid;
    grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);
    grid-template-areas:"heading heading" "poster kicker" "poster title" "intro intro" "facts facts" "actions actions";
    column-gap:18px;row-gap:22px;
    min-height:0;overflow:visible;
  }
  .programme-copy-panel{display:contents}
  .programme-section-head{grid-area:heading;width:auto;margin:0 0 22px;padding:0}
  .programme-section-head h2{font-size:clamp(54px,14vw,104px);line-height:.9}
  .programme-copy-panel>.kicker{grid-area:kicker;align-self:end;gap:8px;min-width:0;font-size:8px;line-height:1.5;letter-spacing:.08em}
  .programme-copy-panel>.kicker::before{flex-basis:18px}
  .programme-title-button{grid-area:title;align-self:start;min-width:0;width:100%;margin:0}
  .programme-title-button h3 strong{font-size:clamp(29px,7.2vw,56px);line-height:.92;letter-spacing:-.065em}
  .programme-title-button h3 span{margin-top:10px;font-size:clamp(23px,5.4vw,42px);line-height:1.04;letter-spacing:-.045em}
  .programme-title-button:hover h3 span,.programme-title-button:focus-visible h3 span{transform:none}
  .programme-poster{
    grid-area:poster;align-self:end;
    position:relative;inset:auto;width:100%;max-width:none;
    aspect-ratio:1428/1900;transform:none!important;transition:none;will-change:auto;
  }
  .programme-poster-sheet,.programme-poster:hover .programme-poster-sheet,.programme-poster:focus-visible .programme-poster-sheet{
    transform:rotate(2.5deg);box-shadow:0 14px 26px rgba(28,24,19,.18);transition:none;
  }
  .programme-poster-shadow,.programme-poster-hint{display:none}
  .programme-intro{grid-area:intro;max-width:42rem;margin:4px 0 0;font-size:16px;line-height:1.65}
  .programme-facts-inline{grid-area:facts;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px;max-width:none;margin:0}
  .programme-facts-inline dt{font-size:9px;line-height:1.5}
  .programme-facts-inline dd{font-size:13px;line-height:1.6;overflow-wrap:anywhere}
  .programme-actions{grid-area:actions;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:2px 0 0}
  .programme-actions .programme-entry-button,.programme-actions .programme-submit-button{min-width:0;min-height:64px;padding:17px 14px;font-size:13px;border-radius:14px}
  .submission-countdown{width:100%;margin:0 0 30px;padding:22px 20px}
  .programme-scene .flow-reveal,.programme-scene .flow-visible{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
  html[lang="zh-CN"] .programme-section-head h2{font-size:clamp(50px,13vw,92px);line-height:1.05}
  html[lang="zh-CN"] .programme-title-button h3 strong{font-size:clamp(29px,7.2vw,56px);line-height:.92;letter-spacing:-.065em}
  html[lang="zh-CN"] .programme-title-button h3 span{font-size:clamp(23px,5.4vw,42px);line-height:1.2}
  html[lang="zh-CN"] .programme-intro{font-size:16px;line-height:1.75}
  html[lang="zh-CN"] .programme-facts-inline dd{font-size:13px;line-height:1.65}

  /* Same diagonal poster deck, with stable mobile viewport geometry and no
     continuously repainted blur/backdrop filters or delayed transform chase. */
  .poster-scroll{height:520vh;height:520svh}
  .poster-stage{height:100vh;height:100svh;perspective:none}
  .poster-stage::after{background:linear-gradient(180deg,var(--site-paper-bright) 0%,rgba(247,245,239,.94) 18%,rgba(247,245,239,0) 39%)}
  .poster-heading{top:86px;left:16px;right:16px}
  .poster-heading h2{margin:0;font-size:clamp(44px,12vw,72px);line-height:.88}
  .poster-heading p{display:block;max-width:330px;width:auto;margin:15px 0 0;font-size:13px;line-height:1.5}
  .poster-heading.flow-reveal{opacity:1!important;transform:none!important;filter:none!important}
  .poster-deck{inset:0;perspective:800px;perspective-origin:55% 58%}
  .event-poster{
    left:50%;top:65%;width:min(65vw,300px,34svh);
    filter:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;
    transition:none;will-change:auto;
    box-shadow:0 14px 28px rgba(30,35,32,.14);
  }
  .event-poster.is-active,.event-poster.is-active:hover{--poster-hover:1;box-shadow:0 18px 32px rgba(30,35,32,.16)}
  .poster-scroll.mobile-archive-ready .event-poster:not(.is-mobile-visible){visibility:hidden;pointer-events:none}
  .event-poster::before,.poster-art::after{opacity:.5}
  .poster-count{left:16px;bottom:22px}
  .poster-count strong{font-size:34px}
  html[lang="zh-CN"] .poster-heading p{font-size:14px;line-height:1.65}

  /* Keep the outer page's desktop image relationships and native ratios. */
  .about-chapter .about-chapter-grid,.about-chapter-right .about-chapter-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"image heading" "copy copy";
    column-gap:16px;row-gap:28px;align-items:end;
  }
  .about-chapter-right .about-chapter-grid{grid-template-areas:"heading image" "copy copy"}
  .about-chapter-copy{display:contents}
  .about-chapter-grid>.about-image{grid-area:image;order:0;width:100%;margin:0}
  .about-story .about-chapter h3{grid-area:heading;min-width:0;font-size:clamp(26px,7vw,52px);line-height:1.02}
  .about-story .about-chapter.about-partnerships h3{font-size:clamp(23px,6.3vw,46px)}
  .about-chapter-copy>.about-copy{grid-area:copy;max-width:none;margin:0}
  html[lang="zh-CN"] .about-story .about-chapter h3{font-size:clamp(26px,7vw,52px);line-height:1.2}
  html[lang="zh-CN"] .about-story .about-chapter.about-partnerships h3{font-size:clamp(23px,6.3vw,46px)}

  .about-public-gallery{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;align-items:start;margin:36px 0 0;transform:none;
  }
  .about-public-gallery .about-image{margin:0;order:0}
  .about-public-gallery .about-image:last-child{margin-top:0}
  .about-continuity-gallery{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;gap:20px 12px;align-items:start;margin-top:36px;
  }
  .about-continuity-gallery .about-image{margin:0;order:0}
  .about-continuity-image-publication{grid-column:1;grid-row:1}
  .about-continuity-image-editorial{grid-column:2;grid-row:1}
  .about-continuity-image-audience{grid-column:1;grid-row:2}
  .about-continuity-image-recognition{grid-column:2;grid-row:2}
  .about-cities-gallery{
    display:grid;grid-template-columns:minmax(0,1.178fr) minmax(0,1fr);
    gap:12px;align-items:start;margin-top:36px;
  }
  .about-cities-gallery .about-image{margin:0;order:0}
  .about-cities-gallery .about-image:first-child{margin-top:0;order:0}
  .about-story .about-image,.about-story .about-image img{height:auto!important;aspect-ratio:auto!important}
  .about-story .about-image img{object-fit:contain!important;transform:none!important}

  /* Detail pages use a single readable photo sequence without text overlays. */
  .event-dialog .gallery-grid{columns:1;column-gap:0}
  .event-dialog .installation-photo{display:block;margin-bottom:14px}
  .event-dialog .installation-photo figcaption{display:none}
}
@media (max-width:820px) and (max-height:600px){
  .poster-heading{top:80px}
  .poster-heading h2{font-size:36px}
  .poster-heading p{display:none}
  .event-poster{top:63%;width:min(40vw,34svh)}
  .poster-count{bottom:14px}
}