/* Shared media capabilities; richer details are scoped to infinity projects.
   Landing and both entry environments use the original styles in index.html. */
#galleryView:not(.portfolio-ready) { visibility: hidden; }
#projectsNavView .navNode { left: var(--project-node-x); top: var(--project-node-y); }
@media (min-width: 769px) {
  #projectsNavView .node-ae span { font-size: clamp(64px, calc(var(--aether-circle-size, 560px) * .14), 88px); }
}
.node-concrete img { width: 126px; }
#projectsNavPreview img[src="images/concrete/Concrete icon.png"] { object-fit: contain; }
/* Preserve the complete new photographs, including on the existing mobile frame. */
.panelImage[data-detail="project5"], #detailView.concrete-detail .detailPanel img { object-fit: contain; }
@media (min-width: 769px) and (max-height: 1120px) {
  #projectsNavView .node-concrete img { width: 112px; }
}
.navNode:focus-visible, .mediaExpand:focus-visible, .mediaClose:focus-visible, #thereminToggle:focus-visible, #thereminStop:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
#detailView.enhanced-detail .paper {
  display: grid;
  grid-template-rows: 32px minmax(0, 1fr);
  gap: clamp(16px, 3vh, 28px);
  padding: clamp(18px, 3vh, 30px) 44px 26px;
  overflow: visible;
}
#detailView.enhanced-detail .backDark { margin: 0; justify-self: start; }
#detailView.enhanced-detail .detailGrid {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(36px, 4vw, 76px);
  row-gap: 20px;
  min-height: 0; height: 100%; padding: 0;
}
.enhanced-detail .detailHeading { grid-column: 2; grid-row: 1; }
.detailHeading:empty { display: none; }
.detailHeading p { margin: 0; }
.enhanced-detail .detailHeading p,
.enhanced-detail .detailCopy > p { text-wrap: pretty; }
#detailView.enhanced-detail .detailImageWrap {
  grid-column: 1; grid-row: 1 / 3; align-self: center;
  min-height: 0; height: 100%; max-height: 100%; aspect-ratio: auto;
}
#detailView.enhanced-detail .detailPanel img { object-fit: contain; }
#detailView.enhanced-detail .detailScroller { overflow: visible; }
#detailView.enhanced-detail .detailCopy {
  grid-column: 2; grid-row: 2; min-height: 0; height: 100%; max-width: none;
  padding: 0;
}
.enhanced-detail .detailCopy h2 { margin: 0 0 6px; }
.enhanced-detail .detailCopy p { margin: 0 0 14px; }
.chineseCopy {
  writing-mode: vertical-rl; text-orientation: mixed; white-space: pre-wrap;
  line-height: 1.3; font-size: clamp(17px, 1.45vw, 22px);
  width: 100%; height: 100%; letter-spacing: 0;
}
.chineseStanza { display: contents; }
.interactionSystem { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 16px; }
.interactionSystem > div { white-space: nowrap; }
.enhanced-detail .detailCopy .thereminHelp, .enhanced-detail .detailCopy .mediaCaption,
.enhanced-detail .detailCopy .thereminAvailability, #thereminStatus { margin: 10px 0 0; }
#thereminStatus:empty { display: none; }
#thereminToggle:disabled { opacity: .5; cursor: default; }
#thereminToggle, #thereminStop, .mediaExpand, .mediaClose { min-height: 44px; min-width: 44px; padding: 10px 16px; border: 1px solid currentColor; }
#thereminStop { position: fixed; z-index: 135; right: 12px; bottom: calc(var(--bottom-h) + 12px); background: var(--bg); color: var(--cream); font-size: 16px; max-width: calc(100vw - 24px); }
#thereminStop[hidden] { display: none; }
.detailPanel { position: relative; }
.detailPanel video { width: 100%; height: 100%; object-fit: contain; }
.detailPanel:has(video) { padding-top: 48px; }
.detailPanel.autoplayMedia { padding-top: 0; }
.detailPanel .motionFallback[hidden], .detailPanel video[hidden] { display: none; }
.mediaExpand { position: absolute; right: 4px; top: 2px; color: var(--cream); background: #000; z-index: 2; font-size: 14px; }
.mediaClose { position: absolute; top: 4px; right: 8px; color: var(--cream); z-index: 2; font-size: 16px; background: #000; }
#detailZoomVideo { display: none; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.detailZoomOverlay.show-video #detailZoomVideo { display: block; }
.detailZoomOverlay.show-video #detailZoomImage, .detailZoomOverlay.show-video #detailZoomGlyph { display: none; }
.detailZoomOverlay.show-video { padding-top: 52px; padding-bottom: 52px; cursor: default; }
@media (min-width: 769px) and (max-height: 700px) {
  /* Keep all five project nodes reachable in short landscape windows. */
  #projectsNavView { overflow-y: auto; }
  #projectsNavView .navWrap { min-height: calc(min(44vw, 560px) + 48px); }
  #detailView.enhanced-detail .paper { padding-top: 12px; padding-bottom: 16px; gap: 8px; }
  #detailView.enhanced-detail .detailGrid { row-gap: 12px; }
  .enhanced-detail .detailCopy p { margin-bottom: 10px; }
  #detailView.wenyan-detail .detailGrid { grid-template-rows: minmax(0, 45%) minmax(0, 1fr); }
  #detailView.wenyan-detail .detailImageWrap { grid-row: 1; }
  #detailView.wenyan-detail .detailCopy { grid-column: 1 / -1; }
  .theremin-detail .detailCopy h2 { margin-bottom: 4px; }
  .theremin-detail .interactionSystem { margin-bottom: 8px; }
  .theremin-detail .detailCopy .thereminHelp, .theremin-detail .detailCopy .mediaCaption { margin-top: 6px; }
}
@media (max-width: 768px), (max-height: 560px) {
  /* Reuse the normal small-screen page scroll; text/media never scroll internally. */
  #detailView.enhanced-detail .paper { display: block; padding: 0; overflow-y: auto; background: #000; }
  #detailView.enhanced-detail .backDark { display: none; }
  #detailView.enhanced-detail .detailGrid { display: flex !important; flex-direction: column; height: auto; min-height: 100%; gap: 24px; padding: 30px 0 24px; }
  #detailView.enhanced-detail .detailHeading { order: 0; padding: 0 20px; color: var(--cream); }
  #detailView.enhanced-detail .detailImageWrap { order: 1; width: 100%; height: min(78vw, 420px); min-height: 0; max-height: none; }
  #detailView.enhanced-detail .detailCopy { order: 2; width: 100%; height: auto; padding: 24px 20px; background: var(--cream); }
  .chineseCopy { display: flex; flex-direction: column; gap: 26px; writing-mode: horizontal-tb; white-space: normal; height: auto; font-size: 18px; }
  .chineseStanza { display: block; align-self: flex-end; writing-mode: vertical-rl; white-space: pre; width: max-content; height: max-content; }
}
@media (max-width: 768px), (pointer: coarse) and (max-height: 560px) {
  /* Share the standard Projects media-first composition on phones only. */
  #detailView.enhanced-detail .detailGrid { gap: 0; padding: 34px 0 0; }
  #detailView.enhanced-detail .detailImageWrap { order: 0; height: min(54vh, 460px); min-height: 340px; }
  #detailView.enhanced-detail .detailHeading { order: 1; padding: 16px 20px 0; background: var(--cream); color: #000; }
  #detailView.enhanced-detail .detailCopy { padding: 16px 20px 24px; }
  #detailView.theremin-detail #thereminToggle,
  #detailView.theremin-detail #thereminAvailability,
  #detailView.theremin-detail #thereminStatus,
  #detailView.theremin-detail .thereminHelp { display: none; }
  #detailView.wenyan-detail .chineseCopy {
    display: block; writing-mode: vertical-rl; white-space: pre;
    width: calc(100% + 20px); height: max-content; margin: 0 -10px; padding: 0 3px;
    font-size: clamp(14px, calc((100vw - 20px) / 21.5), 16px); line-height: 1.05;
  }
  #detailView.wenyan-detail .chineseStanza { display: contents; }
}