/* Touch layouts share the desktop porcelain material, with space for real fingers. */
@media (max-width:800px), (max-width:950px) and (max-height:500px) {
  :root {--footer-height:calc(48px + env(safe-area-inset-bottom));--submenu-font-size:13px;--mobile-top:env(safe-area-inset-top,0px)}
  .app {min-height:0}
  .masthead {height:calc(76px + var(--mobile-top));padding:calc(12px + var(--mobile-top)) 14px 12px;gap:10px}
  .masthead .wordmark {width:48px;height:48px}
  .museum-name {font-size:10px;line-height:1.5}
  .explore-shell {display:none}
  #filter-toggle {top:calc(16px + var(--mobile-top));left:auto;right:14px;width:126px;height:44px;--control-height:44px;border-radius:24px;background:linear-gradient(145deg,#f1f4f6,#e2e7eb);box-shadow:var(--neu-raised)}
  #filter-toggle .liquid-icon {width:44px;height:44px}
  #filter-toggle .liquid-label {font-size:13px}
  .view-toolbar .nested-view-nav {top:calc(82px + var(--mobile-top));width:min(380px,calc(100% - 28px));height:108px!important;border-radius:26px;background:linear-gradient(145deg,#edf1f4,#e4e9ed);box-shadow:var(--neu-raised)}
  .nested-nav-surface {display:none}
  .nested-view-nav .view-switch {top:6px;left:6px;width:calc(100% - 12px);height:44px;gap:4px}
  .nested-view-nav .view-switch button {flex:1 1 0;width:auto;height:44px;font-size:14px;border-radius:22px}
  .nested-view-nav #graph-modes {top:56px;left:50%;width:min(240px,calc(100% - 48px));height:46px;border-radius:23px;padding:1px}
  .nested-view-nav #graph-modes button {height:44px;font-size:var(--submenu-font-size);border-radius:22px}
  .nested-view-nav #graph-modes button::before {inset:3px;border-radius:19px}
  .app:is([data-view=timeline],[data-view=gallery]) .nested-view-nav {height:56px!important}
  .space-overview-controls {top:calc(202px + var(--mobile-top));left:14px;right:14px;gap:8px}
  .space-actions {padding:0}
  .space-actions>button {min-height:44px;padding:10px 16px;font-size:12px}
  .space-actions [data-space-reset] {display:none}
  .space-spacing {font-size:11px;padding:4px 10px}
  .space-spacing input[type=range] {height:36px;margin:0}
  .space-bottom,.canvas-bottom {bottom:12px;left:14px;right:14px;align-items:center}
  .space-instructions {padding:0;max-width:135px}
  .space-instructions [data-space-scene-count] {font-size:9px;letter-spacing:.6px;line-height:1.5}
  .space-instructions p,.canvas-hint {display:none!important}
  .space-camera .zoom-controls button,.zoom-controls button {width:44px;height:44px;font-size:22px}
  .space-camera .zoom-controls output,.zoom-controls output {min-width:34px;width:34px;font-size:11px}
  .space-compass {display:none}
  .floating-search,.app[data-view=timeline] .floating-search {width:min(552px,calc(100% - 28px));bottom:78px;--control-height:52px;gap:0;padding-right:6px}
  .floating-search input {font-size:16px;padding:0 6px}
  .floating-search kbd {display:none}
  #clear-search {width:44px;height:44px}
  .app[data-view=gallery] .floating-search {bottom:18px}
  .site-footer {height:var(--footer-height);padding:0 14px env(safe-area-inset-bottom);font-size:var(--submenu-font-size);gap:12px}
  .site-footer nav {gap:12px}
  .site-footer a {min-height:44px}
  /* A full-width filter well, with a persistent header and no surprise keyboard. */
  .app .filters,.app.filters-open .filters {top:calc(76px + var(--mobile-top));left:12px;right:12px;bottom:calc(var(--footer-height) + 12px);width:auto;max-width:none;padding:0 18px 20px;gap:18px;z-index:22;border-radius:24px;scroll-padding-top:72px}
  .filters .filter-heading {position:sticky;top:0;z-index:2;min-height:64px;padding:10px 0;background:var(--neu-surface);gap:8px}
  .filters .filter-heading>span {font-size:10px;letter-spacing:.04em}
  .filters #clear-filters,.filters #filter-close {min-width:44px;min-height:44px;font-size:14px}
  .filters #filter-close {font-size:26px}
  .filters .search-box {min-height:52px;padding:10px 12px}
  .filters .search-box input,.filters .filter-section select,.filters .exhibition-filter select,.filters .year-inputs input {font-size:16px;min-height:44px}
  .filters .category-button {min-height:44px;font-size:15px}
  .filters .category-button span {font-size:12px}
  .filters .filter-section>label,.filters .exhibition-filter>label,.filters legend,.filters .year-heading label {font-size:11px}
  .filters .connections-filter label {min-height:44px;font-size:14px;margin:0}
  .filters .connections-filter input {width:18px;height:18px}
  .filters .connection-help,.filters .sidebar-footer p {font-size:12px}
  .filters .sidebar-footer a,.filters .exhibition-filter>a {display:inline-flex;align-items:center;min-height:44px;font-size:13px}
  .filters input[type=range] {height:32px}
  /* Focus stays in the graph. Actions move off the product to the bottom corners. */
  .space-selection,.has-exhibition .space-selection {top:calc(204px + var(--mobile-top));left:18px;right:18px;gap:8px}
  .space-selection-header {min-height:0;height:0}
  .space-selection-header .space-edge-tab,.space-edge-tab {top:auto;bottom:calc(var(--footer-height) + 14px);transform:none;width:112px;height:46px;border-radius:23px;background:linear-gradient(145deg,#f1f4f6,#e2e7eb);box-shadow:var(--neu-raised);color:var(--ink);font-size:13px}
  .space-selection-header .space-edge-tab:hover,.space-edge-tab:hover {background:linear-gradient(145deg,#f1f4f6,#e2e7eb);color:var(--ink)}
  [data-space-back] {left:14px}
  .space-selection-header [data-space-details] {right:14px}
  .space-edge-surface {display:none}
  .space-edge-label {text-shadow:none;padding:0!important;gap:6px}
  .space-selection-title {flex-wrap:wrap;gap:4px 10px}
  .space-selection-title strong,#space-viewport[data-lineage]:not([data-lineage=""]) .space-selection-title strong {font-size:20px;line-height:1.3;max-width:100%;width:100%;overflow-wrap:anywhere}
  .space-selection-title>span {font-size:12px}
  .space-selection-title button {min-height:44px;font-size:12px;margin-left:auto}
  .space-company-context {font-size:12px}
  .space-company-context button {min-height:44px;padding:8px 12px}
  .space-company-action {font-size:11px}
  #space-viewport[data-focused=true] .space-bottom {display:none}
  .space-lineage-nav {bottom:76px;width:min(460px,calc(100% - 28px));max-width:none;grid-template-columns:1fr;gap:8px;padding:10px 12px;border-radius:22px}
  .space-lineage-nav>div {grid-row:2;width:100%;justify-content:space-between}
  .space-lineage-nav output {font-size:12px}
  .space-lineage-nav select {width:100%;max-width:none;min-height:44px;font-size:16px;border-radius:14px}
  .space-lineage-nav>span {display:none}
  /* On phones research opens as a readable sheet, with its close control outside the scroll well. */
  #detail {top:calc(76px + var(--mobile-top));left:12px;right:12px;bottom:calc(var(--footer-height) + 74px);width:auto;max-width:none;height:auto;max-height:none;padding:10px;gap:8px;border-radius:26px}
  #detail .detail-topbar {min-height:52px;padding:0 6px;font-size:11px;letter-spacing:.04em}
  #detail .detail-topbar>span {font-size:10px}
  #detail .detail-topbar .close-button {width:44px;height:44px;flex-basis:44px}
  #detail .detail-photo {height:clamp(170px,28dvh,300px);margin:16px 18px 8px;padding:18px}
  #detail .detail-content {padding:16px 18px 28px}
  #detail h2 {font-size:28px;line-height:1.2;overflow-wrap:anywhere}
  #detail .description {font-size:16px;line-height:1.65}
  #detail .detail-kicker {font-size:10px;gap:10px;flex-wrap:wrap}
  #detail .object-meta {grid-template-columns:82px minmax(0,1fr);gap:14px 10px;font-size:14px;overflow-wrap:anywhere}
  #detail .object-meta dt {font-size:11px}
  #detail .meta-role,#detail .relation-note,#detail .image-caption {font-size:12px;line-height:1.6}
  #detail .detail-actions {flex-wrap:wrap}
  #detail .detail-actions button {min-height:44px;font-size:13px}
  #detail :is(summary,.entity-link) {min-height:44px;align-content:center}
  #detail .detail-credits a {overflow-wrap:anywhere}
  #detail .related-item {min-height:64px}
  #detail .connection-group-heading h3 {font-size:15px}
  #detail .object-significance p {font-size:14px}
  /* Browsing views use the space vacated by the graph submenu. */
  #gallery {padding:174px 14px 100px;gap:24px 14px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery-photo {height:160px;padding:16px}
  .gallery-card h3 {font-size:15px;line-height:1.35}
  .gallery-card p {font-size:12px;line-height:1.5}
  .app[data-view=gallery] .result-summary,.app[data-view=timeline] .result-summary {top:calc(148px + var(--mobile-top));right:16px;font-size:11px;max-width:none}
  .canvas-topline,.app[data-view=clouds] .canvas-topline {top:calc(202px + var(--mobile-top))}
  .app[data-view=timeline] .canvas-topline {top:calc(174px + var(--mobile-top))}
  .canvas-topline button {min-height:44px;font-size:12px;padding:8px 12px}
  .canvas-topline>span,#surprise {display:none}
  #year-axis {bottom:142px}
  .exhibition-context {top:calc(202px + var(--mobile-top));left:14px;right:14px;max-width:none;font-size:12px}
  .exhibition-context button {min-width:44px;min-height:44px}
  .has-exhibition .space-overview-controls {top:calc(254px + var(--mobile-top))}
  .has-exhibition .space-selection {top:calc(258px + var(--mobile-top))}
  .app:is([data-view=gallery],[data-view=timeline]) .exhibition-context {top:calc(148px + var(--mobile-top))}
  .has-exhibition #gallery {padding-top:210px}
  .entity-context {top:calc(202px + var(--mobile-top));left:14px;right:auto;width:min(240px,calc(100% - 124px));max-height:180px;padding:12px;overflow:auto}
  .entity-context h2 {font-size:16px}
  .entity-context summary {min-height:44px;align-content:center}
  .app[data-view=gallery] .entity-context {top:calc(158px + var(--mobile-top));width:calc(100% - 28px);max-height:155px}
  .app[data-view=gallery].has-entity-context #gallery {padding-top:332px}
  dialog {max-height:calc(100dvh - 48px);overflow:auto}
  dialog .close-button {width:44px;height:44px}
}
@media (max-width:360px) {
  .museum-name {display:none}
  .space-instructions {max-width:90px}
  .space-lineage-nav {padding:8px 10px}
  .site-footer {gap:6px}
  .site-footer nav {gap:8px}
  #detail .object-meta {grid-template-columns:1fr;gap:6px}
  #detail .object-meta dd {margin-bottom:12px}
}
/* Short landscape screens keep the same controls without stacking over the canvas. */
@media (max-width:950px) and (max-height:500px) {
  .masthead {height:66px}
  .museum-name {display:none}
  #filter-toggle {top:16px;left:76px;right:auto}
  .view-toolbar .nested-view-nav {top:10px;left:auto;right:14px;transform:none;width:330px}
  .space-overview-controls {top:126px}
  .space-selection,.has-exhibition .space-selection {top:80px;max-width:280px}
  .space-selection-title strong {font-size:17px}
  .space-company-context {display:none}
  .floating-search,.app[data-view=timeline] .floating-search {left:14px;transform:none;bottom:14px;width:calc(100% - 220px);max-width:460px}
  .space-instructions {display:none}
  .space-bottom,.canvas-bottom {justify-content:flex-end}
  .space-lineage-nav {bottom:12px;width:calc(100% - 284px);padding:6px 10px;gap:4px}
  .space-lineage-nav select {min-height:44px}
  .space-selection-header .space-edge-tab,.space-edge-tab {bottom:calc(var(--footer-height) + 24px)}
  #detail {top:10px;left:auto;right:12px;width:min(440px,calc(100% - 24px))}
  .app .filters,.app.filters-open .filters {top:70px}
  .entity-context {top:78px;max-height:136px}
  #gallery {padding-top:84px}
  .app[data-view=gallery] .result-summary {top:68px}
  .app[data-view=timeline] .canvas-topline,.app[data-view=clouds] .canvas-topline {top:125px}
  #year-axis {bottom:80px}
}
@media (max-width:800px), (max-width:950px) and (max-height:500px) {
  .floating-search,.app[data-view=timeline] .floating-search {bottom:max(78px,calc(var(--keyboard-inset,0px) - var(--footer-height) + 12px))}
  .app[data-view=gallery] .floating-search {bottom:max(18px,calc(var(--keyboard-inset,0px) - var(--footer-height) + 12px))}
  .app .filters,.app.filters-open .filters {bottom:max(calc(var(--footer-height) + 12px),calc(var(--keyboard-inset,0px) + 12px))}
}
@media (max-width:950px) and (max-height:500px) {
  .floating-search,.app[data-view=timeline] .floating-search {bottom:max(14px,calc(var(--keyboard-inset,0px) - var(--footer-height) + 12px))}
}

@media (max-width:800px) {.canvas-bottom {justify-content:flex-end}}
@media (max-width:800px), (max-width:950px) and (max-height:500px) {
  .masthead,.site-footer {padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  #filter-toggle {right:max(14px,env(safe-area-inset-right))}
  .app .filters,.app.filters-open .filters {left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}
  [data-space-back] {left:max(14px,env(safe-area-inset-left))}
  .space-selection-header [data-space-details] {right:max(14px,env(safe-area-inset-right))}
  #detail {right:max(12px,env(safe-area-inset-right))}
}
@media (max-width:950px) and (max-height:500px) {
  #filter-toggle {left:calc(76px + env(safe-area-inset-left));right:auto}
  .view-toolbar .nested-view-nav {right:max(14px,env(safe-area-inset-right))}
  .floating-search,.app[data-view=timeline] .floating-search {left:max(14px,env(safe-area-inset-left))}
}