/* A reading and viewing layout for handheld screens. Desktop galleries stay intact. */
.mobile-hero-incision, .mobile-media-hint { display: none; }
@media (max-width: 760px) {
  html { scroll-padding-top: 82px; -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; }
  .museum-nav, .site-header, .arts-header, .compare-nav, .guan-nav, .archive-nav { max-width: 100%; }
  main, section, article, figure, header, nav, dl, div { min-width: 0; }
  h1, h2, h3 { overflow-wrap: break-word; line-height: 1.22; }
  button, a { -webkit-tap-highlight-color: rgba(200, 116, 69, .2); }
  .museum-nav, .site-header, .arts-header, .compare-nav, .guan-nav, .archive-nav {
    height: calc(66px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  }
  .museum-nav .brand, .site-header .brand { gap: 12px; }
  .brand-museum, .site-header .brand > span, .arts-brand > span,
  .compare-brand > span, .guan-brand > span, .archive-brand > span {
    display: block; font-size: 10px; line-height: 1.5; letter-spacing: .06em;
    padding-left: 12px; border-left: 1px solid rgba(238, 232, 220, .25);
  }
  .brand-museum small, .site-header .brand small, .arts-brand small,
  .compare-brand small, .guan-brand small, .archive-brand small { display: none; }
  .mobile-menu-toggle, .menu-toggle, .arts-menu-button, .compare-menu-button,
  .guan-menu-button, .archive-menu-button { width: 44px; height: 44px; flex-shrink: 0; }
  .mobile-navigation, .mobile-menu, .arts-mobile-menu, .compare-mobile-menu,
  .guan-mobile-menu, .archive-mobile-menu {
    top: calc(66px + env(safe-area-inset-top));
    max-height: calc(100dvh - 66px - env(safe-area-inset-top));
    overflow-y: auto; padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
  .mobile-navigation a, .mobile-menu a, .arts-mobile-menu a,
  .compare-mobile-menu a, .guan-mobile-menu a, .archive-mobile-menu a {
    min-height: 58px; align-items: center;
  }
  .mobile-menu small, .mobile-navigation small { font-size: 12px; opacity: .8; }

  /* The hands, face and vessel share a complete image, followed by the introduction. */
  .hero {
    display: flex; flex-direction: column; align-items: stretch;
    min-height: 0; padding: calc(66px + env(safe-area-inset-top)) 0 0;
  }
  .hero-relief { opacity: .12; }
  .hero-environment { display: none; }
  .hero .hero-master {
    position: relative; inset: auto; order: 0; width: 100%; height: auto;
    aspect-ratio: 1375 / 1144; margin: 0; opacity: 1; box-shadow: none;
    mask-image: none; -webkit-mask-image: none;
  }
  .hero .hero-master img {
    width: 100%; height: 100%; object-fit: contain; object-position: center;
    filter: saturate(.82) contrast(1.04) brightness(.9); transform: none;
  }
  .hero .hero-master::after {
    box-shadow: none;
    background: linear-gradient(0deg, #071411 0, transparent 28%);
  }
  .hero .hero-master figcaption {
    display: block; bottom: 28px; right: 22px; font-size: 11px; color: #e7dfd1;
  }
  .hero .mobile-hero-incision {
    position: absolute; z-index: 3; inset: auto 0 0; display: block;
    width: 100%; height: 76px; pointer-events: none;
  }
  .mobile-hero-incision path {
    fill: none; stroke: #d3824f; stroke-width: 1.25; stroke-linecap: round;
    stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke;
  }
  .js.hero-ready .mobile-hero-incision path { animation: mobile-incision-draw 1.65s .2s both; }
  .scroll-rail {
    position: fixed; display: block; z-index: 90; right: 7px;
    top: calc(82px + env(safe-area-inset-top)); bottom: calc(22px + env(safe-area-inset-bottom));
    width: 1px; background: rgba(211, 130, 79, .24); mix-blend-mode: normal;
    pointer-events: none;
  }
  .scroll-rail .scroll-rail-progress { width: 1px; background: #d3824f; }
  .scroll-rail .scroll-rail-cursor {
    width: 5px; height: 5px; right: -2px; background: #e7a071;
    border: 0; box-shadow: 0 0 0 3px rgba(211, 130, 79, .12);
  }
  .scroll-rail-chapters, .scroll-rail > em { display: none; }
  .route-section::after, .person-section::after, .timeline-section::after,
  .compare-section::after, .guansheng-section::after, .collection-section::after,
  .sources-section::after, .media-stage::after {
    top: 30px; right: 7px; width: clamp(72px, 26vw, 130px);
    height: 1px; box-shadow: none;
  }
  .hero .hero-copy {
    order: 1; width: auto; margin: 0; padding: 12px 22px 30px;
  }
  .hero-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
  .hero-meta-row .eyebrow { margin: 0; font-size: 18px; }
  .hero-identity { gap: 13px; margin: 0; padding: 0; }
  .hero-identity dt { font-size: 11px; letter-spacing: 0; color: #e7dfd1; }
  .hero-identity dd { font-size: 10px; line-height: 1.4; letter-spacing: 0; color: #b8b4a9; }
  .hero h1 { letter-spacing: -.035em; }
  .hero h1 span:first-child { font-size: clamp(23px, 6.2vw, 29px); line-height: 1.4; white-space: nowrap; }
  .hero h1 span:last-child { margin-top: 8px; font-size: clamp(29px, 8.2vw, 40px); line-height: 1.3; white-space: nowrap; }
  .hero .hero-lede { width: auto; margin: 20px 0 24px; font-size: 15px; line-height: 1.9; color: #c4c7ba; }
  .hero .enter-link { display: flex; width: 100%; min-width: 0; min-height: 52px; font-size: 15px; }
  .hero-incision { display: none; }
  .hero .hero-media-index {
    position: relative; inset: auto; order: 2; display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)); height: auto;
    min-height: 76px; padding: 0 12px; overflow: visible; backdrop-filter: none;
    border-top-color: #a45d3d;
  }
  .hero-media-index li { min-width: 0; }
  .hero-media-index a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 2px; text-align: center; }
  .hero-media-index span { font-size: 12px; letter-spacing: 0; line-height: 1.5; }
  .hero-media-index small { font-size: 10px; }

  /* Use a calm, consistent reading scale between the exhibits. */
  .museum-section, .route-section, .timeline-section, .sources-section,
  .identity-section, .media-section, .practice-section,
  .trace-section, .books-section, .method-section, .scope-section, .work-source-section,
  .boundary-section, .observatory-section, .observation-section, .evidence-section {
    padding: 72px 22px;
  }
  .route-section { min-height: 0; }
  .route-section h2, .person-copy h2, .timeline-section h2, .media-stage-head h2,
  .compare-head h2, .collection-head h2, .archive-browser h3, .sources-section h2,
  .section-heading h2, .media-heading h2, .practice-section h2, .record-copy h2,
  .desk-heading h2, .observation-title h2, .evidence-section h2, .compare-end h2,
  .boundary-section h2, .observatory-section h2, .media-title h2, .guan-end h2,
  .trace-section h2, .books-section h2, .method-section h2, .scope-section h2,
  .work-source-section h2, .archive-end h2 {
    font-size: clamp(29px, 8.5vw, 40px); line-height: 1.28; letter-spacing: -.035em;
  }
  .route-section > header, .timeline-section > header, .compare-head,
  .collection-head, .archive-browser > header { gap: 24px; margin-bottom: 36px; }
  .route-section > header > p, .timeline-section > header > p:last-child,
  .person-copy > p:not(.eyebrow), .compare-head p:last-child,
  .collection-head > p, .source-copy p { font-size: 15px; line-height: 1.95; }
  .route-board { margin-top: 34px; }
  .route-stops a { padding: 20px 0; }
  .route-stops b { font-size: 18px; }
  .route-stops small { font-size: 13px; }
  .person-section { gap: 34px; }
  .person-figure { height: auto; overflow: visible; }
  .person-figure img { width: 100%; height: auto; max-height: 640px; object-fit: contain; }
  .person-figure figcaption { position: relative; padding: 16px; color: #eee8dc; background: #122d2a; }
  .person-figure figcaption span { font-size: 18px; }
  .person-figure figcaption small { font-size: 12px; line-height: 1.7; }
  .person-section blockquote { margin: 0; padding-top: 26px; font-size: 25px; line-height: 1.6; }
  .timeline-track time { font-size: 31px; }
  .timeline-track p { font-size: 15px; line-height: 1.9; }
  [data-parallax] { transform: none; }

  /* On a phone, tabs change the exhibit without taking over vertical scrolling. */
  .media-scroll { height: auto; }
  .media-stage { position: relative; top: auto; height: auto; min-height: 0; display: flex; flex-direction: column; padding: 64px 22px 48px; }
  .media-stage::before { display: none; }
  .media-stage-head { position: relative; inset: auto; order: 0; width: auto; }
  .media-stage-head > p:last-child { max-width: none; margin: 20px 0 0; font-size: 15px; line-height: 1.9; }
  .media-jump { position: relative; inset: auto; order: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; max-width: none; margin: 26px 0 22px; }
  .media-jump button { min-width: 0; min-height: 46px; padding: 8px 3px; font-size: 13px; letter-spacing: 0; }
  .media-images {
    position: relative; inset: auto; order: 2; width: 100%; height: clamp(400px, 118vw, 540px);
    overflow: hidden; touch-action: pan-y pinch-zoom; user-select: none;
  }
  .media-slide { inset: 0; transform: none; pointer-events: none; transition: opacity .25s ease; background: transparent; }
  .media-slide.is-active { pointer-events: auto; }
  .media-slide img, .media-slide[data-medium="坭兴陶"] img {
    position: absolute; inset: 0; width: 100%; height: calc(100% - 100px);
    padding: 14px; object-fit: contain; object-position: center; opacity: 1;
    filter: none; transform: none; box-shadow: none; background: #e7dfd1;
  }
  .media-slide figcaption, .media-slide[data-medium="坭兴陶"] figcaption {
    inset: auto 0 0; display: block; height: 82px; text-align: left;
  }
  .media-slide figcaption b { display: block; font-size: 24px; line-height: 1.3; }
  .media-slide figcaption span { display: block; max-width: none; margin-top: 8px; font-size: 13px; letter-spacing: 0; line-height: 1.7; }
  .mobile-media-hint {
    display: block; order: 3; margin: 18px 0 0; color: #c4c7ba;
    font-size: 12px; line-height: 1.7; letter-spacing: .02em;
  }
  .media-progress { position: relative; inset: auto; order: 4; margin-top: 18px; }
  .media-stage[data-media-direction="next"] .media-slide.is-active img { animation: mobile-media-next .38s var(--ease) both; }
  .media-stage[data-media-direction="previous"] .media-slide.is-active img { animation: mobile-media-previous .38s var(--ease) both; }
  .compare-frame { min-height: 0; height: 440px; max-height: 66svh; }
  .compare-label { max-width: 45%; font-size: 11px; padding: 8px; }
  .compare-frame input, .split-control { touch-action: pan-y; }
  .guan-art { height: 450px; max-height: 70svh; margin: 56px 22px 0; }
  .guan-art img { object-fit: contain; height: 100%; }
  .guan-copy { padding: 42px 22px 64px; }
  .guan-copy h2 { font-size: 70px; }
  .guan-copy > p:not(.eyebrow):not(.guan-kicker) { font-size: 15px; line-height: 1.95; }
  .collection-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px 0 40px; }
  .collection-counts article { min-height: 96px; padding: 14px 8px; }
  .collection-counts strong { font-size: 37px; }
  .collection-counts span { font-size: 12px; letter-spacing: 0; }
  .curation-intro { gap: 20px; margin: 44px 0 28px; }
  .curation-intro > p:last-child { font-size: 21px; line-height: 1.7; }
  .featured-work { gap: 28px; min-height: 0; padding: 38px 0; }
  .featured-pottery { width: 100%; margin-inline: 0; padding: 30px 16px; grid-template-columns: minmax(0, 1fr); }
  .woodcut-lineage { width: 100%; margin-inline: 0; padding-inline: 16px; grid-template-columns: minmax(0, 1fr); }
  .scroll-work-rail { width: 100%; max-width: 100%; margin-inline: 0; --scroll-panel-width: 100%; padding-right: 0; }
  .featured-work figure { min-height: 0; padding: 14px; }
  .featured-work figure img { height: auto; max-height: 62svh; object-fit: contain; }
  .featured-copy h3, .scroll-work h3, .woodcut-lineage h3 { font-size: 33px; line-height: 1.35; }
  .featured-copy > p:not(.eyebrow) { font-size: 15px; }
  .feature-number { margin-bottom: 18px; }
  .scroll-work-controls button, .archive-filters button { min-height: 44px; min-width: 44px; }
  .archive-browser { margin-top: 64px; }
  .archive-filters { gap: 8px; }
  .archive-filters button { padding: 10px 13px; font-size: 13px; }
  .archive-grid { gap: 32px; }
  .archive-card img, .archive-card:nth-child(3n+2) img { height: auto; aspect-ratio: 4 / 5; object-fit: contain; padding: 14px; }
  .archive-card b { font-size: 23px; line-height: 1.5; }
  .archive-card small { font-size: 12px; line-height: 1.85; }
  .archive-image-label { font-size: 10.5px; }
  .work-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 32px); overflow-y: auto; }
  .work-dialog[open] { display: block; }
  .dialog-image { height: 45svh; min-height: 280px; }
  .dialog-image img { max-height: none; }
  .dialog-copy { overflow: visible; padding: 30px 22px; }
  .dialog-copy h3 { margin-bottom: 26px; font-size: 36px; }
  .dialog-copy dl div { grid-template-columns: 66px minmax(0, 1fr); gap: 12px; }
  .dialog-copy dt, .dialog-copy dd { font-size: 13px; line-height: 1.8; }
  .dialog-detail-link { font-size: 14px; }
  .dialog-zoom { min-height: 44px; font-size: 12px; }

  /* Interior openings use real document flow rather than overlapping ornaments. */
  .artist-hero { padding-top: calc(66px + env(safe-area-inset-top)); min-height: 0; }
  .artist-hero .hero-name { display: none; }
  .artist-hero .hero-portrait { height: auto; aspect-ratio: 1375 / 1144; }
  .artist-hero .hero-portrait img { object-fit: contain; }
  .artist-hero .hero-copy { margin: 0; padding: 28px 22px; }
  .artist-hero .hero-copy .eyebrow { padding-top: 0; }
  .artist-hero .hero-copy h1 { font-size: clamp(34px, 9.2vw, 43px); line-height: 1.3; }
  .artist-hero .hero-copy > p:last-of-type { font-size: 15px; line-height: 1.9; }
  .hero-facts { margin: 0 22px; }
  .hero-facts dd, .hero-note { font-size: 12px; line-height: 1.8; }
  .media-row p, .identity-copy p, .practice-card p, .record-copy p,
  .chapter-copy dd, .chapter-note, .chapter-related { font-size: 15px; line-height: 1.9; }
  .practice-detail-frame { height: 420px; min-height: 0; }
  .arts-hero { min-height: 0; padding: 132px 22px 58px; }
  .arts-hero .hero-kicker, .arts-hero h1, .arts-hero .hero-intro, .arts-hero .hero-enter { position: relative; inset: auto; width: auto; }
  .arts-hero .hero-kicker { font-size: 12px; line-height: 1.8; }
  .arts-hero h1 { margin: 34px 0; font-size: clamp(45px, 12.6vw, 66px); line-height: 1.22; }
  .arts-hero .hero-intro { margin: 0; font-size: 15px; line-height: 1.9; }
  .arts-hero .hero-enter { margin-top: 32px; min-height: 52px; font-size: 15px; }
  .hero-five { opacity: .45; }
  .chapter-sticky { min-height: 0; padding: 64px 22px; }
  .chapter-image { min-height: 0; height: 460px; max-height: 66svh; margin: 0 0 32px; }
  .chapter-image img { object-fit: contain; }
  .chapter-copy h2 { font-size: 42px; line-height: 1.3; }
  .chapter-thesis { font-size: 24px; line-height: 1.5; }
  .compare-hero { min-height: 0; padding: 132px 22px 60px; }
  .compare-hero h1 { font-size: clamp(40px, 11.4vw, 59px); line-height: 1.3; letter-spacing: -.04em; }
  .compare-hero h1 span:last-child { margin: 10px 0 0; white-space: nowrap; }
  .compare-hero .hero-copy { width: auto; margin: 30px 0; font-size: 15px; line-height: 1.95; }
  .compare-hero .hero-axis { display: none; }
  .compare-hero > a { position: relative; inset: auto; min-height: 52px; }
  .comparison-stage { height: 470px; min-height: 0; max-height: 70svh; }
  /* Avoid an intrinsic grid track stretching images and pushing labels out of view. */
  .image-layer, .visual-lab figure { display: block; }
  .observation-hotspot { min-width: 44px; min-height: 44px; }
  .case-record p, .case-record dd, .observation-title p, .observation-section li p, .evidence-ledger p { font-size: 15px; line-height: 1.9; }
  .guan-hero { min-height: 0; padding: 126px 22px 36px; }
  .guan-hero .hero-copy { width: auto; padding: 0; }
  .guan-hero h1 { font-size: clamp(42px, 11.6vw, 60px); line-height: 1.3; }
  .guan-hero h1 span:last-child { margin-left: 0; }
  .guan-hero .hero-copy > div { width: auto; margin: 26px 0 0; }
  .guan-hero .hero-copy > div p { font-size: 15px; line-height: 1.9; }
  .guan-hero .hero-copy > a { margin: 24px 0 0; min-height: 52px; }
  .guan-hero .hero-art { position: relative; inset: auto; width: min(100%, 330px); height: 440px; margin: 36px auto 0; opacity: 1; }
  .guan-hero .hero-process { display: none; }
  .guan-hero .hero-note { position: relative; inset: auto; margin: 22px 0 0; font-size: 12px; line-height: 1.8; }
  .archive-hero { min-height: 0; padding: 132px 22px 48px; }
  .archive-hero .hero-copy { width: auto; padding: 0; }
  .archive-hero h1 { font-size: clamp(40px, 11.4vw, 60px); line-height: 1.3; letter-spacing: -.04em; }
  .archive-hero h1 span:last-child { margin: 8px 0 0; white-space: nowrap; }
  .archive-hero .hero-intro { width: auto; margin: 30px 0 0; gap: 14px; }
  .archive-hero .hero-intro p { font-size: 15px; line-height: 1.9; }
  .archive-hero .hero-copy > a { margin: 28px 0 0; min-height: 52px; font-size: 14px; }
  .archive-hero .folio-stage { position: relative; inset: auto; width: 100%; height: 300px; margin: 44px 0 36px; opacity: 1; }
  .archive-hero .folio h2 { font-size: 32px; }
  .archive-hero .hero-scope { position: relative; inset: auto; font-size: 12px; line-height: 1.8; }
  .evidence-sheet dd, .evidence-gates p, .scope-ledger li, .book-register dd, .work-source-grid p { font-size: 15px; line-height: 1.9; }
  .work-source-grid a { min-height: 250px; }
  .work-source-grid a > span, .work-source-grid small { font-size: 12px; line-height: 1.8; }
  .work-source-grid h3 { font-size: 24px; }

  /* Normal image browsing must let a finger scroll the document. */
  .image-stage:not(.is-zoomed):not(.is-expanded) { touch-action: pan-y; }
  .image-stage { min-height: 0; height: 56svh; }
  .viewer-toolbar { display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 20px); padding: 5px; }
  .viewer-toolbar button { min-width: 40px; min-height: 44px; padding: 8px; }
  .viewer-toolbar [data-viewer-expand] { min-width: 78px; }
  .image-position { max-width: calc(100% - 24px); font-size: 11px; line-height: 1.6; }
  .record-copy h1 { font-size: 42px; line-height: 1.3; }
  .record-copy h1.is-long-title, .record-copy h1.is-very-long-title { font-size: 34px; line-height: 1.4; }
  .record-copy .metadata dd { font-size: 14px; line-height: 1.9; }
  .record-copy .metadata dt { font-size: 12px; }
  .record-id, .record-status, .work-visual figcaption { font-size: 12px; line-height: 1.8; }
  .record-pager a, .evidence-source-link { min-height: 52px; }
  .museum-corridor > a { min-height: 110px; padding: 22px; }
  .museum-corridor > a span, .museum-corridor > a small, .museum-corridor__route > p { font-size: 11px; line-height: 1.6; }
  .museum-corridor__route li::after { font-size: 11px; }
  /* Interior chapters keep a consistent reading rhythm instead of stacking vh gaps. */
  .museum-interior .identity-section, .museum-interior .media-section,
  .museum-interior .practice-section, .museum-interior .record-number,
  .museum-interior .record-copy, .museum-interior .arts-end,
  .museum-interior .compare-desk, .museum-interior .observation-section,
  .museum-interior .evidence-section, .museum-interior .compare-end,
  .museum-interior .boundary-section, .museum-interior .observatory-section,
  .museum-interior .sources-section, .museum-interior .guan-end,
  .museum-interior .trace-section, .museum-interior .books-section,
  .museum-interior .work-source-section, .museum-interior .method-section,
  .museum-interior .scope-section, .museum-interior .archive-end,
  .museum-interior .related-section, .museum-interior .boundary-note {
    padding: 52px 22px;
  }
  .museum-interior .practice-card:last-child { margin-bottom: 0; }
  footer { padding: 36px 22px calc(36px + env(safe-area-inset-bottom)); }
  footer p, footer span, footer a { font-size: 12px; line-height: 1.8; }
  .js [data-reveal] { transform: translateY(8px); transition: opacity .45s ease, transform .45s var(--ease, ease); }
  .js [data-reveal].is-visible { transform: none; }
}

@keyframes mobile-incision-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mobile-media-next { from { opacity: .35; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes mobile-media-previous { from { opacity: .35; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .js.hero-ready .mobile-hero-incision path,
  .media-stage[data-media-direction] .media-slide.is-active img { animation: none; }
  .js [data-reveal] { transform: none; transition: none; }
  .scroll-rail-cursor { animation: none; }
}

@media (max-width: 360px) {
  .hero .hero-copy { padding-inline: 18px; }
  .hero-meta-row { gap: 8px; }
  .hero-identity { gap: 9px; }
  .hero h1 span:last-child { font-size: 8.05vw; }
  .brand-museum, .site-header .brand > span, .arts-brand > span,
  .compare-brand > span, .guan-brand > span, .archive-brand > span { font-size: 9px; padding-left: 8px; }
}