/* 图片详情页（大图 + 作品信息） */
.detail-page {
  --detail-pad-top: clamp(92px, 7vh, 128px);
  --detail-pad-inline: clamp(24px, 4vw, 72px);
  --detail-pad-bottom: max(clamp(24px, 2.5vh, 44px), env(safe-area-inset-bottom));
  --detail-copy-width: clamp(250px, 18vw, 340px);
  --detail-gap: clamp(28px, 5vw, 76px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  width: min(1720px, 100%);
  height: 100dvh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--detail-pad-top) var(--detail-pad-inline) var(--detail-pad-bottom);
  overflow: hidden;
}
.detail-layout {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}
/* 墙面：画与展签组成一个悬挂单元，挂在墙面正中（视线高度），不落到底；
   展签底边与画底边通过 flex-end 共线，单元整体随画在墙内居中。 */
.detail-image-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: calc(100dvh - var(--detail-pad-top) - var(--detail-pad-bottom));
  min-width: 0;
  min-height: 0;
  perspective: 1400px;
}
.detail-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--detail-gap);
  min-width: 0;
  max-width: 100%;
}
.detail-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: var(--detail-aspect, 4 / 3);
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
}
.detail-image-wrap .detail-layer {
  position: absolute;
  inset: 0;
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: calc(100dvh - var(--detail-pad-top) - var(--detail-pad-bottom));
  object-fit: contain;
  border-radius: 8px;
  opacity: 0;
  transform: rotateX(var(--detail-rx, 0deg)) rotateY(var(--detail-ry, 0deg));
  transition: opacity 150ms var(--ease-out), transform 220ms var(--ease-out);
}
.detail-image-wrap .detail-layer.is-active { opacity: 1; }
.detail-image-wrap .detail-layer:not([src]) { visibility: hidden; }
.detail-load-state { position: absolute; z-index: 4; inset: 50% auto auto 50%; display: grid; justify-items: center; gap: 12px; width: min(280px, calc(100% - 32px)); color: var(--night-muted); font-size: var(--type-small); text-align: center; transform: translate(-50%, -50%); pointer-events: none; }
.detail-load-state p { margin: 0; }
.detail-load-state p:empty { display: none; }
.detail-live-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.detail-retry { min-height: 40px; padding: 0 16px; border: 1px solid oklch(0.9 0.01 356.8 / 0.42); border-radius: 999px; background: oklch(0.1 0.004 356.8 / 0.88); color: var(--night-ink); cursor: pointer; pointer-events: auto; }
.detail-retry[hidden] { display: none; }
.detail-nav {
  position: fixed;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  color: oklch(0.96 0.006 356.8 / 0.58);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  text-shadow: 0 1px 6px oklch(0 0 0 / 0.86);
  transform: translateY(-50%);
  transition: color 160ms ease, opacity 160ms ease, transform 160ms var(--ease-out);
}
.detail-nav.previous { left: clamp(12px, 1.5vw, 28px); }
.detail-nav.next { right: clamp(12px, 1.5vw, 28px); }
.detail-nav:hover { color: var(--night-ink); transform: translateY(-50%) scale(1.08); }
.detail-nav:active { transform: translateY(-50%) scale(0.94); }
.detail-nav[hidden] { display: none; }
.detail-copy { flex: 0 0 auto; width: var(--detail-copy-width); }
.detail-copy > span { color: var(--rose); font-family: var(--font-display); font-size: var(--type-eyebrow); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.detail-copy h1 { margin: 14px 0 12px; font-size: var(--type-feature); line-height: var(--leading-title); letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: anywhere; }
.detail-copy p { margin: 0; color: var(--night-muted); font-size: var(--type-small); line-height: var(--leading-copy); }
/* 视觉底边对齐：meta 是最后一行，收敛行高使行框下沿贴近字形视觉下沿，
   从而与图片视觉底边落在同一条水平线上（锚点：画底边，展签随画挂于墙面中央）。 */
#detailMeta { line-height: 1.1; }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .detail-page { scroll-snap-align: start; }
}

@media (max-width: 980px) {
  .detail-page { --detail-copy-width: clamp(210px, 26vw, 260px); --detail-gap: 32px; }
}

@media (max-width: 760px) {
  .detail-page { display: block; height: auto; min-height: 100dvh; padding: 92px 16px max(20px, env(safe-area-inset-bottom)); overflow: visible; }
  .detail-layout { display: flex; flex-direction: column; gap: 24px; align-items: stretch; width: 100%; max-height: none; }
  /* 移动端改为上下堆叠：图片在上（高度由 CSS max-height 封顶），展签换行在下。 */
  .detail-image-wrap { place-items: stretch; width: 100%; max-width: 100%; height: auto; max-height: none; }
  .detail-stage { flex-direction: column; align-items: stretch; gap: 24px; max-width: 100%; }
  .detail-media { max-height: min(56vh, 520px); }
  .detail-image-wrap .detail-layer { max-height: 100%; }
  .detail-nav { width: 44px; height: 52px; font-size: 2rem; }
  .detail-nav.previous { left: 6px; }
  .detail-nav.next { right: 6px; }
  .detail-copy { width: 100%; padding: 0 4px; }
  .detail-copy h1 { font-size: clamp(1.7rem, 8vw, 2.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .detail-image-wrap .detail-layer { transform: none; }
}