/* The project view shares the archive's calm canvas and the original image plane. */
#stage[data-mode=detail]{touch-action:auto}
#stage[data-mode=detail] #archive{cursor:default}
#stage[data-mode=detail] #filters{opacity:0;pointer-events:none}
#stage[data-mode=detail] #caption{
  left:var(--info-left);top:var(--info-top);bottom:auto;width:var(--info-width);max-width:none;
  max-height:calc(100% - var(--info-top) - 90px);overflow-y:auto;scrollbar-width:thin;
  pointer-events:auto;touch-action:pan-y;transition-delay:.4s;
}
#stage[data-mode=detail] #projectNumber{font-size:9px;letter-spacing:1.15px;color:#888;margin-bottom:25px}
#stage[data-mode=detail] #projectTitle{font-size:clamp(24px,2.45vw,42px);font-weight:400;line-height:1.12;letter-spacing:-1.2px;white-space:pre-line;margin:0 0 24px}
#stage[data-mode=detail] #caption .project-meta{font-size:10px;color:#777;letter-spacing:.2px;margin:0 0 27px}
#projectDescription{display:none}
#stage[data-mode=detail] #projectDescription{display:block;font-size:13px;line-height:1.85;color:#656565;margin:0 0 27px;max-width:32ch}
#stage[data-mode=detail] .card.open img{object-fit:contain}
#projectGallery{
  position:absolute;z-index:1000;left:var(--detail-left);top:var(--gallery-top);width:var(--detail-width);
  opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
  transition:opacity .6s,transform .6s,visibility .6s;
}
#stage[data-mode=detail] #projectGallery{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition-delay:.45s}
.gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px;color:#777;font-size:9px;letter-spacing:.2px}
.gallery-heading span:first-child{line-height:1.4}
.gallery-navigation{display:flex;align-items:center;gap:17px;flex-shrink:0}
.gallery-navigation button{font-size:16px;line-height:18px;padding:2px 3px}
.gallery-navigation button:disabled{opacity:.2;cursor:default}
#galleryCount{font-variant-numeric:tabular-nums;font-size:9px;letter-spacing:.3px}
#galleryThumbnails{display:flex;gap:12px;overflow-x:auto;padding:5px; margin:-5px;scrollbar-width:thin;touch-action:pan-x}
.gallery-thumb{flex:0 0 auto;height:64px;aspect-ratio:240/154;opacity:.45;transition:opacity .3s;position:relative}
.gallery-thumb img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.gallery-thumb:hover,.gallery-thumb[aria-pressed=true]{opacity:1}
.gallery-thumb[aria-pressed=true]{outline:1px solid #333;outline-offset:4px}
.gallery-thumb:focus-visible{outline:1px solid #333;outline-offset:4px}
@media(max-width:850px){
  #stage[data-mode=detail] #projectNumber{font-size:8px;margin-bottom:14px}
  #stage[data-mode=detail] #projectTitle{font-size:28px;letter-spacing:-.8px;line-height:1.12;margin-bottom:15px}
  #stage[data-mode=detail] #caption .project-meta{font-size:9px;margin-bottom:15px}
  #stage[data-mode=detail] #projectDescription{font-size:12px;line-height:1.75;max-width:45ch;margin-bottom:16px}
  .gallery-thumb{height:46px}
  .gallery-heading{font-size:8px;margin-bottom:10px}
  .gallery-navigation{gap:12px}
  #stage[data-mode=detail] #back{top:0}
}
@media(max-height:650px) and (max-width:850px){
  #stage[data-mode=detail] #projectTitle{font-size:23px}
  #stage[data-mode=detail] #projectNumber{margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){#projectGallery{transition:none}}