.hall { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1rem; padding:1.5rem; }
.hall h1 { font-size:clamp(2rem,4vw,3rem); font-weight:500; letter-spacing:.08em; margin-top:.5rem; }
.hall p { color:var(--wall-muted); }
.gallery-view { border-block:1px solid #38383c; display:grid; }
.gallery-stage { display:flex; align-items:center; justify-content:center; background:#e9e6df; padding:1rem; min-width:0; }
.art-open { position:relative; background:none; border:0; padding:0; cursor:zoom-in; }
.art-open img { width:auto; height:auto; max-height:65svh; max-width:100%; object-fit:contain; box-shadow:0 .5rem 2rem #0002; }
.art-open span { position:absolute; right:.6rem; bottom:.6rem; padding:.5rem .8rem; background:#171719; color:#fff; font:500 .85rem var(--sans); }
.gallery-notes { padding:1.5rem; min-width:0; }
.gallery-notes h2 { font-size:2rem; font-weight:500; letter-spacing:.05em; margin:.65rem 0; }
.kicker,.view-count,.keyboard-note { color:var(--wall-muted); font-size:.85rem; }
.gallery-view button:not(.art-open), .gallery-shelf button, .lightbox button { font:inherit; color:inherit; background:transparent; border:1px solid #626268; min-height:2.75rem; padding:.5rem .85rem; cursor:pointer; }
button:disabled { opacity:.35; cursor:default!important; }
.view-nav { display:flex; gap:.6rem; margin:1.5rem 0; }
.view-nav button { flex:1; }
.gallery-view button:not(:disabled):hover,.shelf-heading button:not(:disabled):hover,.lightbox button:hover { border-color:var(--spot); color:var(--spot); }
.look-prompt { font-size:1.25rem; color:var(--spot); margin-top:2rem; }
.look-copy { color:#c9c8c2; margin-top:.6rem; }
.gallery-notes details { border-block:1px solid #45454a; margin:1.5rem 0; }
.gallery-notes summary { cursor:pointer; padding:.85rem 0; min-height:2.75rem; }
.gallery-notes ol { padding:0 0 1rem 1.3rem; color:#c9c8c2; }
.gallery-notes li+li { margin-top:.7rem; }
.gallery-jump { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; font-size:.9rem; }
.gallery-jump select { font:inherit; color:var(--wall-text); background:var(--wall-2); border:1px solid #626268; min-height:2.75rem; padding:.5rem; }
.keyboard-note { margin-top:1rem; }
.gallery-shelf { padding:1.5rem; }
.shelf-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; font-size:.9rem; }
.shelf-heading div { display:flex; gap:.5rem; }
.wall-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.wall-grid .piece { padding:.6rem; border:1px solid #45454a; color:var(--wall-muted); background:var(--wall-2); text-align:left; }
.wall-grid .piece[aria-pressed="true"] { border-color:var(--spot); background:#302e26; color:var(--spot); }
.piece img { width:100%; aspect-ratio:3/4; object-fit:contain; }
.piece span { display:block; margin-top:.5rem; font-size:.85rem; }
.credit { color:var(--wall-muted); font-size:.85rem; padding:0 1.5rem 2rem; }
.credit a { color:inherit; }
.students { border-top:1px solid #38383c; padding:2rem 1.5rem; }
.students h2 { font-size:1.5rem; font-weight:500; }
.students p { max-width:45em; color:var(--wall-muted); margin-top:1rem; }
.students .empty-frame { display:none; }
.lightbox { position:fixed; inset:0; margin:0; border:0; width:100%; height:100dvh; max-width:none; max-height:none; background:#18181b; color:#f5f4ef; padding:1rem; }
.lightbox[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:.75rem; }
.lightbox::backdrop { background:#18181b; }
.lb-toolbar,.lb-navigation { display:flex; gap:.6rem; align-items:center; }
.lb-toolbar span { margin-right:auto; }
.lb-canvas { overflow:auto; display:flex; align-items:center; justify-content:center; background:#e9e6df; }
.lb-canvas img { width:100%; height:100%; object-fit:contain; }
.lb-canvas.zoomed { display:block; }
.lb-canvas.zoomed img { width:1086px; height:auto; max-width:none; margin:auto; }
.lb-navigation { justify-content:space-between; font-size:.85rem; }
.lb-navigation span { display:none; }
body:has(.lightbox[open]) { overflow:hidden; }
@media(min-width:768px) {
  .hall,.gallery-shelf { padding:2rem 3rem; }
  .gallery-view { grid-template-columns:minmax(0,1.5fr) minmax(20rem,1fr); }
  .gallery-stage { padding:2rem; }
  .art-open img { max-height:min(70svh,52rem); }
  .gallery-notes { padding:2rem; align-self:center; }
  .wall-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .piece img { height:8rem; }
  .credit,.students { padding-inline:3rem; }
  .lb-navigation span { display:block; }
}
@media(min-width:1280px) { .gallery-notes { padding:3rem; } }

/* 切换按钮紧邻作品，手机端无需滚过说明区才能翻页。 */
.gallery-stage { flex-direction:column; gap:1rem; }
.stage-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; width:100%; color:#292929; font-size:.85rem; }
.stage-toolbar .view-nav { margin:0; }
.stage-toolbar .view-nav button { white-space:nowrap; }
.gallery-view .stage-toolbar button:not(:disabled):hover { color:#111; border-color:#111; background:#fff8; }
.hall .kicker { letter-spacing:.16em; font-size:.75rem; }
@media(min-width:768px) {
  .hall { padding-block:1.25rem; }
  .art-open img { max-height:clamp(20rem,calc(100svh - 23rem),48rem); }
}