@media (max-width: 720px) {

        .top-nav {




          gap: 10px;
        }

        .wordmark-copy strong {
          display: block;





        }

        .wordmark-copy small {
          display: block;




        }

        .hero-image {
          background-position: 58% center;
        }

        .hero-museum-name {





          transform: none;
          animation: beilinMobileNameIn 520ms both cubic-bezier(0.22, 1, 0.36, 1);
        }

        .hero-actions {

          align-items: stretch;

        }

        .hero-credit {
          right: 18px;
          bottom: 6px;
          left: 18px;
          overflow: hidden;
          font-size: 9px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .museum-section,
        .method-section,
        .theme-section,
        .catalog-section {

          padding: 64px 0;
        }

        .museum-columns p,
        .theme-intro,
        .catalog-intro,
        .method-steps p {
          font-size: 13px;
          line-height: 1.8;
        }

        .museum-stats {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 8px;
        }

        .theme-intro,
        .catalog-intro {

          margin: 16px 0 0;
        }

        .theme-grid,
        .catalog-grid {

          gap: 12px;
        }

        .theme-card {

          aspect-ratio: 1.55;
        }

        .theme-card-copy {
          padding: 18px;
        }

        .theme-card-copy > span {
          font-size: 12px;
        }

        .category-tabs {


          padding-bottom: 4px;

        }

        .category-tabs button {
          flex: 0 0 auto;
          min-height: 40px;
        }

        .control-row label { grid-column: 1; }
        #sortSelect { grid-column: 2; min-width: 0; }
        #musicOnly,
        #clearFilters { min-height: 42px; }
        .result-count { margin-left: 0; }

        .artifact-card-button {

          gap: 12px;
          padding: 10px;
        }

        .card-image-wrap {
          min-height: 132px;
          aspect-ratio: 4 / 5;
        }

        .card-excerpt p {
          display: -webkit-box;
          overflow: hidden;


          -webkit-box-orient: vertical;

        }

        .card-footer {
          flex-wrap: wrap;
          gap: 6px;
          font-size: 10px;
        }

        .detail-shell {
          width: 100vw;
          max-width: none;

          border-radius: 0;
        }

        .detail-body {
          grid-template-columns: 1fr;
          gap: 22px;
        }

        .research-copy section,
        .research-copy .music-research {
          padding-left: 0;
        }

        .research-copy .music-research {
          padding: 20px !important;
        }

        @keyframes beilinMobileNameIn {
          from { opacity: 0; transform: translate3d(0, -10px, 0); }
          to { opacity: 1; transform: translate3d(0, 0, 0); }
        }

        @keyframes beilinMobilePanelIn {
          from { opacity: 0; transform: translate3d(0, 18px, 0); }
          to { opacity: 1; transform: translate3d(0, 0, 0); }
        }
      }

@media (max-width: 720px) {
  :root { --mobile-gutter: 16px; }
  html { scroll-padding-top: 0; }
  body { -webkit-text-size-adjust: 100%; }
  .hero { height: min(700px, 100svh); min-height: 600px; max-height: none; }
  .top-nav { top: max(10px, env(safe-area-inset-top)); width: calc(100% - 24px); min-height: 54px; padding: 8px 10px; }
  .wordmark { gap: 8px; min-width: 0; }
  .seal { width: 30px; height: 30px; flex: 0 0 auto; font-size: 17px; }
  .wordmark-copy { min-width: 0; }
  .wordmark-copy strong, .wordmark-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wordmark-copy strong { font-size: 11px; letter-spacing: 0.06em; }
  .wordmark-copy small { font-size: 7px; letter-spacing: 0.04em; }
  .top-nav-links { flex: 0 0 auto; gap: 0; }
  .top-nav-links a:not(.platform-return) { display: none; }
  .top-nav-links .platform-return { display: inline-flex; min-height: 44px; align-items: center; padding: 0 4px; font-size: 10px; white-space: nowrap; }
  .hero-museum-name { top: 88px; right: var(--mobile-gutter); left: var(--mobile-gutter); align-items: flex-start; text-align: left; }
  .hero-museum-name span { font-size: 8px; letter-spacing: 0.2em; }
  .hero-museum-name strong { max-width: 100%; font-size: clamp(26px, 7.8vw, 36px); letter-spacing: 0.1em; line-height: 1.12; }
  .hero-panel { right: var(--mobile-gutter); bottom: 20px; left: var(--mobile-gutter); width: auto; padding: 22px 18px 18px; transform: none; animation: none; }
  .hero .eyebrow { margin-bottom: 8px; font-size: 9px; letter-spacing: 0.14em; text-align: left; }
  .hero h1 { display: flex; width: 100%; max-width: 100%; align-items: baseline; justify-content: flex-start; gap: clamp(16px, 5vw, 24px); margin-top: 0; font-size: clamp(48px, 14vw, 64px); line-height: 0.94; }
  .hero h1 span { flex: 0 0 auto; letter-spacing: 0.02em; text-indent: 0; white-space: nowrap; }
  .hero-lead { max-width: none; margin: 15px 0 16px; font-size: 12px; line-height: 1.75; }
  .hero-actions { justify-content: flex-start; gap: 8px; }
  .primary-action, .secondary-action { min-height: 44px; padding: 10px 12px; font-size: 11px; }
  .hero-credit { display: none; }
  .museum-section, .method-section { padding: 56px 0 62px; }
  .section-index { width: 48px; padding-top: 2px; font-size: 11px; }
  .museum-copy h2, .method-section h2, .catalog-heading h2, .theme-heading h2 { font-size: clamp(30px, 8.8vw, 40px); letter-spacing: 0; line-height: 1.18; }
  .museum-columns { grid-template-columns: 1fr; gap: 18px; margin: 24px 0 22px; font-size: 15px; line-height: 1.85; }
  .museum-stats { margin-top: 24px; }
  .museum-stats div { grid-template-columns: 62px 1fr; gap: 12px; padding: 13px 0; }
  .museum-stats dt { font-size: 30px; }
  .museum-stats dd { font-size: 12px; line-height: 1.5; }
  .theme-section, .catalog-section { padding: 58px var(--mobile-gutter); }
  .theme-heading, .catalog-heading { display: block; margin-bottom: 24px; }
  .theme-intro, .catalog-intro { margin-top: 14px; font-size: 14px; line-height: 1.8; }
  .theme-grid { grid-auto-rows: 178px; gap: 10px; }
  .theme-card-copy { right: 16px; bottom: 16px; left: 16px; }
  .catalog-heading h2 { font-size: clamp(32px, 9vw, 42px); }
  .catalog-controls { position: static; margin-bottom: 22px; padding: 12px 0 14px; }
  .search-field { grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding-bottom: 9px; }
  .search-field input { min-width: 0; font-size: 14px; }
  .search-field kbd { display: none; }
  .category-tabs { flex-wrap: nowrap; overscroll-behavior-x: contain; scrollbar-width: none; }
  .category-tabs::-webkit-scrollbar { display: none; }
  .category-button, .quiet-button, .music-filter-button, .control-row select { min-height: 44px; }
  .category-button { flex: 0 0 auto; white-space: nowrap; }
  .control-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
  .control-row select { min-width: 0; width: 100%; }
  .result-count { grid-column: 1 / -1; margin: 2px 0 0; text-align: right; }
  .catalog-grid { gap: 10px; }
  .artifact-card { min-height: 154px; }
  .card-corner-effect { display: none; }
  .card-copy { justify-items: initial; gap: 0; }
  .card-meta { justify-content: flex-start; margin-bottom: 5px; font-size: 9px; }
  .card-period { margin-top: 5px; font-size: 11px; line-height: 1.45; }
  .card-excerpt { margin-top: 6px; padding-top: 6px; }
  .card-excerpt p { font-size: 11px; line-height: 1.5; -webkit-line-clamp: 2; }
  .card-footer { margin-top: auto; padding-top: 6px; }
  .special-marker, .music-marker { min-height: 22px; padding: 2px 5px; font-size: 8px; }
  .artifact-dialog { width: 100vw; max-width: none; height: 100svh; max-height: 100svh; margin: 0; overflow: auto; }
  .detail-shell { display: block; min-height: 100%; }
  .detail-header { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: max(16px, env(safe-area-inset-top)) 16px 14px; }
  .detail-header h2 { font-size: clamp(27px, 8vw, 34px); line-height: 1.2; }
  .detail-period { margin-top: 8px; font-size: 12px; }
  .icon-button { width: 44px; height: 44px; font-size: 24px; }
  .detail-gallery { display: block; padding: 14px 16px 12px; }
  .main-image-button, .main-image-button img { height: min(44svh, 400px); min-height: 220px; }
  .photo-thumbs { gap: 7px; margin-top: 10px; padding-bottom: 3px; overflow-x: auto; overscroll-behavior-x: contain; }
  .photo-thumb { width: 74px; flex: 0 0 auto; }
  .detail-body { display: block; padding: 24px 16px 36px; }
  .fact-panel { margin-bottom: 24px; }
  .fact-panel dl { grid-template-columns: 1fr; }
  .fact-panel dl div { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
  .research-copy { gap: 24px; }
  .research-copy section { padding-left: 0; }
  .research-copy h3, .source-section h3 { margin-bottom: 8px; font-size: 22px; line-height: 1.3; }
  .research-copy section > p:last-child, .music-research > #musicSummary { font-size: 15px; line-height: 1.85; }
  .research-copy .music-research { margin: 16px 0 0; padding: 20px 16px; }
  .source-section { padding: 28px 16px; }
  .source-item { min-height: 0; padding: 14px 0; }
}
@media (max-width: 380px) {
  .hero { min-height: 560px; }
  .hero-panel { padding: 20px 16px 16px; }
  .hero h1 { gap: 14px; font-size: 47px; }
  .card-copy { padding-right: 10px; }
}
@media (max-width: 720px) and (orientation: landscape) {
  .hero { height: 560px; min-height: 560px; }
  .hero-museum-name { top: 76px; }
  .hero-panel { right: 22px; bottom: 18px; left: 22px; }
}

    @media screen and (max-width: 900px) {
      html,
      body {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        overflow-x: hidden !important;
      }

      body {
        margin: 0 !important;
      }

      main,
      main > section,
      .hero,
      .museum-section,
      .method-section,
      .theme-section,
      .catalog-section,
      .site-footer {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden;
      }

      .museum-section,
      .method-section,
      .theme-section,
      .catalog-section {
        padding-right: 16px !important;
        padding-left: 16px !important;
      }

      .museum-section,
      .method-section {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
      }

      .museum-copy,
      .method-section > *,
      .theme-heading,
      .theme-grid,
      .catalog-heading,
      .catalog-controls,
      .catalog-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
      }

      .museum-copy h2,
      .method-section h2,
      .theme-heading h2,
      .catalog-heading h2,
      .theme-intro,
      .catalog-intro {
        max-width: 100% !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal !important;
      }

      .theme-grid,
      .catalog-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .theme-card,
      .theme-card-stele,
      .theme-card-inscription,
      .theme-card-epitaph,
      .theme-card-objects,
      .theme-card-special,
      .artifact-card,
      .artifact-card-button,
      .card-image-wrap,
      .card-copy {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
      }

      .theme-card,
      .theme-card-stele,
      .theme-card-inscription,
      .theme-card-epitaph,
      .theme-card-objects,
      .theme-card-special {
        height: 184px !important;
        min-height: 184px !important;
        grid-column: 1 !important;
        grid-row: auto !important;
      }

      .theme-card-copy {
        max-width: calc(100% - 32px) !important;
        overflow: hidden;
      }

      .theme-card-copy strong,
      .theme-card-copy > span {
        display: block;
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
      }

      .theme-card-copy strong {
        font-size: clamp(25px, 8vw, 34px) !important;
        line-height: 1.08 !important;
      }

      .search-field,
      .category-tabs,
      .control-row,
      .result-count {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
      }

      .category-tabs {
        margin-right: 0 !important;
        padding-right: 0 !important;
        overflow-x: auto !important;
      }

      .artifact-card-button {
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr) !important;
        min-height: 166px !important;
        overflow: hidden !important;
      }

      .artifact-card-button > .card-image-wrap {
        width: 88px !important;
        min-height: 166px !important;
      }

      .card-copy {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        overflow: hidden;
        padding: 12px !important;
        text-align: left !important;
      }

      .card-copy h3,
      .card-period,
      .card-excerpt,
      .card-excerpt p {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: anywhere;
        white-space: normal !important;
      }

      .card-copy h3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 17px !important;
        line-height: 1.25 !important;
        overflow: hidden;
      }

      .card-period {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }

    @media screen and (max-width: 380px) {
      .museum-section,
      .method-section,
      .theme-section,
      .catalog-section {
        padding-right: 12px !important;
        padding-left: 12px !important;
      }

      .artifact-card-button {
        grid-template-columns: 82px minmax(0, 1fr) !important;
      }

      .artifact-card-button > .card-image-wrap {
        width: 82px !important;
      }
    }