/* 归档瀑布流（VIEW ALL 全部图像） */
.collection-page { position: relative; width: min(1680px, 100%); margin: 0 auto; padding: 144px clamp(18px, 4vw, 56px) 88px; }
.collection-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 48px; padding-bottom: 48px; }
.collection-heading h1 { grid-column: 1; margin: 0; font-size: var(--type-page); line-height: var(--leading-display); letter-spacing: -0.04em; }
.collection-heading > p:first-child { grid-column: 2; grid-row: 1; margin: 0; color: var(--rose); font-family: var(--font-display); font-size: var(--type-eyebrow); letter-spacing: 0.08em; }
.collection-heading > p:last-child { grid-column: 1; max-width: 34ch; margin: 0; color: var(--night-muted); font-size: var(--type-body); line-height: var(--leading-copy); letter-spacing: var(--tracking-copy); }

.collection-filters { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 34px; }
.collection-filter {
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid oklch(0.92 0.008 356.8 / 0.24);
  border-radius: 999px;
  background: transparent;
  color: var(--night-muted);
  font-family: var(--font-display);
  font-size: var(--type-small);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}
.collection-filter:hover { border-color: oklch(0.92 0.008 356.8 / 0.55); color: var(--night-ink); transform: translateY(-1px); }
.collection-filter:active { transform: scale(0.98); }
.collection-filter.is-active { background: oklch(0.92 0.008 356.8); border-color: oklch(0.92 0.008 356.8); color: var(--night); }

.collection-grid { column-count: 4; column-gap: clamp(10px, 1.4vw, 20px); }
.collection-item { display: inline-block; width: 100%; min-width: 0; margin: 0 0 clamp(10px, 1.4vw, 20px); padding: 0; border: 0; border-radius: 12px; background: var(--night-raised); text-align: left; cursor: zoom-in; break-inside: avoid; overflow: hidden; transition: transform 260ms var(--ease-out), background 180ms var(--ease-out); }
.collection-item:hover { transform: translateY(-5px); background: oklch(0.17 0.008 356.8); }
.collection-item:active { transform: translateY(-1px) scale(0.99); }
.collection-image { display: block; overflow: hidden; background: oklch(0.16 0 0); }
.collection-image img { width: 100%; height: auto; display: block; transition: transform 480ms var(--ease-out); }
.collection-item:hover .collection-image img { transform: scale(1.035); }
.collection-meta { display: block; min-height: 62px; padding: 11px 12px; }
.collection-meta strong, .collection-meta small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.collection-meta strong { font-family: var(--font-display); font-size: var(--type-small); font-weight: var(--weight-display); }
.collection-meta small { margin-top: 4px; color: var(--night-muted); font-size: var(--type-eyebrow); }
.empty-collection { column-span: all; min-height: 45vh; display: grid; place-items: center; color: var(--night-muted); }
.collection-more { display: block; min-height: 48px; margin: 48px auto 0; padding: 0 24px; border: 1px solid oklch(0.92 0.008 356.8 / 0.28); border-radius: 999px; background: transparent; color: var(--night-ink); font-family: var(--font-display); font-size: var(--type-small); letter-spacing: 0.08em; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.collection-more:hover { border-color: oklch(0.92 0.008 356.8 / 0.72); background: oklch(0.19 0.008 356.8); transform: translateY(-2px); }
.collection-more:active { transform: scale(0.98); }
.collection-more[hidden] { display: none; }

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .collection-page { scroll-snap-align: start; }
}

@media (max-width: 980px) {
  .collection-grid { column-count: 3; }
}

@media (max-width: 760px) {
  .collection-page { padding: 112px 12px 60px; }
  .collection-heading { display: block; padding: 0 8px 32px; }
  .collection-heading > p:first-child { margin-bottom: 14px; }
  .collection-heading h1 { font-size: 3.8rem; }
  .collection-heading > p:last-child { margin-top: 18px; }
  .collection-filters { gap: 8px; padding-bottom: 24px; }
  .collection-filter { min-height: 36px; padding: 0 16px; }
  .collection-grid { column-count: 2; column-gap: 8px; }
  .collection-item { margin-bottom: 8px; }
  .collection-meta { min-height: 56px; padding: 9px; }
  .collection-more { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .collection-item:hover .collection-image img { transform: none; }
}