/* Artwork surfaces are independent of the site's article cards. */
.art-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.museum-page { margin:0; background:#101213; color:#e8e6df; font-family:"Space Grotesk",system-ui,sans-serif; }
.museum-page .nav { background:rgba(16,18,19,.95); border-bottom:1px solid #ffffff12; backdrop-filter:blur(16px); color:#c6c8c5; }
.museum-page .brand { color:#eeeee8; }
.museum-page .brand strong { font-size:1.3rem; font-weight:600; letter-spacing:-.055em; }
.museum-page .nav-links { font-size:.62rem; letter-spacing:.025em; }
.museum-page .nav-links a[aria-current="page"], .museum-page .nav-links a:hover { background:transparent; border-color:#c7b987; color:#fff; }
.museum-page .nav-cta { background:transparent; border:1px solid #ffffff30; color:#dddcd5; box-shadow:none; }
.museum-page .menu-toggle { background:#191d1e; border:1px solid #ffffff30; color:#eeeee8; }
.museum-page .page-bar { background:transparent; border-color:#ffffff0d; }
.museum-page .exhibition-bar { justify-content:space-between; gap:12px; }
.museum-page .page-links { flex:1; justify-content:flex-start; min-width:0; }
.museum-page .page-links a { font-size:.63rem; color:#949b99; }
.museum-page .page-links a:hover, .museum-page .page-links a[aria-current="location"] { background:transparent; color:#f0dfb8; }
.museum-page :where(a,button):focus-visible, .output-exhibit :where(a,button):focus-visible, .art-viewer :where(a,button):focus-visible { outline:2px solid #eed397; outline-offset:5px; }
.exhibition { padding:0 clamp(18px,4vw,72px) 96px; }
.museum-page .exhibition > section { background:transparent; border:0; padding:0; }
.museum-page .exhibition > .exhibition-opening { max-width:1440px; margin:0 auto; padding:28px 0 64px; }
.artwork { margin:0; min-width:0; width:100%; }
.art-frame { position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-width:0; overflow:hidden; border:1px solid #ffffff0c; background:#15191a; text-decoration:none; isolation:isolate; }
.art-frame img { display:block; flex:none; max-width:100%; height:auto; object-fit:contain; image-rendering:pixelated; }
.art-scene { padding:0; background:#101213; }
.art-scene img { width:100%; height:auto; }
.art-specimen { aspect-ratio:5/4; padding:clamp(16px,3vw,48px); background:radial-gradient(ellipse at 50% 45%,#1c2525,#141919 76%); }
.art-specimen img { max-height:100%; }
.opening-work .art-frame { border:0; background:transparent; }
.opening-work img { width:min(100%,calc((100svh - var(--nav-h) - 94px) * 1.77778)); max-width:100%; max-height:740px; }
.exhibition-room { max-width:1440px; margin:0 auto clamp(64px,8vw,136px); display:grid; gap:clamp(18px,2.5vw,40px); }
.featured-grid { grid-template-columns:7fr 5fr; align-items:stretch; }
.featured-crossing { grid-row:span 2; }
.featured-crossing .art-frame { height:100%; aspect-ratio:auto; }
.featured-lantern .art-frame, .featured-keeper .art-frame { aspect-ratio:8/5; }
.scene-grid { grid-template-columns:1fr 1fr; align-items:center; }
.scene-wide { grid-column:1/-1; width:88%; justify-self:center; margin-bottom:24px; }
.objects-grid { grid-template-columns:7fr 5fr; align-items:stretch; }
.supplies-work .art-frame, .inventory-work .art-frame { height:100%; }
.palette-set { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(8px,1.5vw,24px); }
.palette-set .art-frame { aspect-ratio:3/4; padding:clamp(10px,2vw,24px); background:#171b1c; }
.motion-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; }
.motion-grid .art-frame { aspect-ratio:1; }
.archive-grid { grid-template-columns:repeat(6,minmax(0,1fr)); align-items:center; }
.archive-grid .artwork { grid-column:span 2; }
.archive-grid .archive-panorama { grid-column:1/-1; margin-bottom:24px; }
.archive-grid .artwork:nth-child(2), .archive-grid .artwork:nth-child(3) { grid-column:span 3; }
.studies-grid { grid-template-columns:1fr 1fr; gap:24px; }
.study-wide { grid-column:1/-1; }
.study-wide .art-specimen { aspect-ratio:auto; min-height:144px; }
.studies-grid .art-specimen { background:#16191e; }
.museum-page .legal { border-top:1px solid #ffffff16; background:#101213; color:#9aa29f; }
.museum-page .legal p { max-width:75ch; font-size:.75rem; line-height:1.7; }
.museum-page .footer-links { font-size:.66rem; }
.motion-toggle { appearance:none; flex:none; min-height:44px; border:0; padding:8px 12px; background:transparent; color:inherit; font:500 .68rem "Space Mono",monospace; cursor:pointer; white-space:nowrap; }
.motion-toggle[hidden] { display:none; }
.motion-toggle::before { content:"▷"; display:inline-block; margin-right:8px; }
.motion-toggle[aria-pressed="true"]::before { content:"Ⅱ"; }
.motion-toggle:hover { color:#f0dfb8; }

/* Homepage output previews. */
.hero-artwork { background:#15191a; color:#deded5; border:1px solid #22292a; }
.hero-artwork .art-frame { border:0; }
.art-caption { display:flex; align-items:center; justify-content:space-between; padding:2px 12px 2px 20px; gap:8px; }
.art-caption > a { font-size:.75rem; letter-spacing:.02em; }
.art-caption span { padding-left:12px; color:#c7b987; }
section.output-exhibit { background:#101213; color:#e6e6df; padding-block:clamp(56px,7vw,108px); border-bottom:0; }
.output-exhibit + .output-exhibit { padding-top:0; }
.exhibit-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:32px; }
.exhibit-heading h2 { margin:0; font-size:clamp(1.5rem,2.6vw,2.4rem); line-height:1.15; letter-spacing:-.035em; font-weight:500; text-transform:none; }
.exhibit-heading p { margin:0; color:#9ba5a2; font-size:.9rem; }
.output-grid { display:grid; grid-template-columns:1.45fr 1fr 1fr; gap:clamp(16px,2.2vw,32px); }
.output-work { min-width:0; }
.output-work .art-frame { height:clamp(280px,34vw,448px); aspect-ratio:auto; padding:20px; }
.output-work h3 { margin:14px 0 0; font-size:.8rem; font-weight:400; letter-spacing:.02em; text-transform:none; }
.output-work h3 a { display:flex; justify-content:space-between; align-items:center; min-height:44px; }
.output-work h3 span { color:#c7b987; }
.preview-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(16px,2.5vw,36px); align-items:start; }
.preview-lead { grid-row:span 2; align-self:center; }
.preview-grid .palette-set { grid-column:2; gap:8px; }
.preview-grid .palette-set .art-frame { padding:8px; }
.gallery-entry { min-height:44px; display:inline-flex; align-items:center; gap:24px; color:#e5d4aa; font-size:.82rem; border-bottom:1px solid #b6a477; }

/* Progressive enhancement: one native modal, with no caption overlay. */
.art-viewer { position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; border:0; padding:0; background:#0c0f10; color:#eaece5; }
.art-viewer::backdrop { background:#0c0f10; }
.art-viewer[open] { display:grid; grid-template-rows:64px minmax(0,1fr) 64px; }
.viewer-toolbar { display:flex; align-items:center; justify-content:flex-end; padding:8px 16px; gap:8px; }
.viewer-toolbar .motion-toggle { margin-right:auto; }
.viewer-button { display:inline-flex; align-items:center; justify-content:center; min-width:48px; min-height:48px; border:1px solid #ffffff24; border-radius:50%; background:transparent; color:inherit; cursor:pointer; }
.viewer-button:hover { background:#ffffff12; }
.viewer-button svg { width:20px; height:20px; stroke:currentColor; stroke-width:1.5; fill:none; }
.viewer-stage { display:flex; align-items:center; justify-content:center; padding:16px clamp(16px,4vw,72px); min-height:0; min-width:0; overflow:auto; }
.viewer-stage img { display:block; image-rendering:pixelated; object-fit:contain; max-width:100%; max-height:100%; width:auto; height:auto; }
.viewer-stage img:not([data-px]) { width:100%; height:100%; }
.viewer-navigation { display:flex; gap:24px; align-items:center; justify-content:center; }
html.art-viewer-open { overflow:hidden; }
@media (max-width:1100px) { .museum-page .nav-links { background:#15191a; border-color:#ffffff20; } }
@media (max-width:700px) {
  .museum-page .exhibition-bar { gap:0; }
  .museum-page .page-links a { padding-inline:7px; font-size:.6rem; }
  .museum-page .exhibition-bar .motion-toggle { width:44px; padding:0; font-size:0; }
  .museum-page .exhibition-bar .motion-toggle::before { font-size:16px; margin:0; }
  .exhibition { padding-inline:18px; padding-bottom:48px; }
  .museum-page .exhibition > .exhibition-opening { padding:24px 0 36px; }
  .exhibition-room { margin-bottom:48px; gap:18px; }
  .featured-grid, .scene-grid, .objects-grid, .motion-grid, .archive-grid, .studies-grid, .output-grid, .preview-grid { grid-template-columns:minmax(0,1fr); }
  .featured-grid .artwork, .archive-grid .artwork { grid-row:auto; grid-column:auto; }
  .featured-crossing .art-frame { aspect-ratio:1; height:auto; }
  .featured-lantern .art-frame, .featured-keeper .art-frame { aspect-ratio:1; }
  .scene-wide { width:100%; margin:0; }
  .palette-set { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .archive-grid .archive-panorama { margin-bottom:0; }
  .preview-lead { grid-row:auto; }
  .preview-grid .palette-set { grid-column:1; }
  .output-work .art-frame { height:auto; aspect-ratio:1; padding:24px; }
  .exhibit-heading { gap:12px; margin-bottom:24px; }
  .motion-toggle { font-size:.58rem; padding-inline:6px; }
  .viewer-toolbar .motion-toggle { font-size:.7rem; }
}
@media (prefers-reduced-motion:no-preference) {
  .art-frame { transition:border-color .2s ease,background-color .2s ease; }
  .art-frame:hover { border-color:#d6c7a655; }
}

/* YouTube players load only after a visitor selects a preview. */
.video-demo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,40px); }
.video-demo { min-width:0; scroll-margin-top:calc(var(--nav-h) + 24px); }
.video-demo h3 { margin:0 0 12px; font-size:1.2rem; text-transform:none; letter-spacing:-.02em; }
.video-demo p { color:#b6bfbd; margin:0 0 20px; }
.video-stage { position:relative; aspect-ratio:16/9; background:#171b1c; overflow:hidden; border:1px solid #ffffff24; }
.video-preview { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.video-preview img { width:100%; height:100%; object-fit:cover; }
.video-play { position:absolute; display:flex; align-items:center; gap:12px; padding:14px 20px; background:#101213eb; color:#fff; border:1px solid #ffffff70; border-radius:4px; font-size:.9rem; }
.video-preview:hover .video-play { background:#101213; border-color:#eed397; }
.video-stage iframe { display:block; width:100%; height:100%; border:0; }
.video-external { display:inline-flex; align-items:center; min-height:44px; margin-top:8px; color:#e5d4aa; font-size:.82rem; text-decoration:underline; text-underline-offset:4px; }
@media(max-width:700px) { .video-demo-grid { grid-template-columns:minmax(0,1fr); } }