:root {
  --collection-accent: #d8b776;
}

body { margin: 0; background: #0f1110; color: #eee9df; }
.collection-hero { position: relative; overflow: hidden; padding: 78px 24px 36px; text-align: center; border-bottom: 1px solid rgba(216,183,118,.28); }
.collection-hero .hero-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.collection-hero .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,9,.22), rgba(8,10,9,.93)); }
.collection-hero > *:not(.hero-backdrop):not(.hero-scrim) { position: relative; }
.collection-hero h1 { margin: 0; font-size: clamp(2.2rem, 7vw, 5.6rem); line-height: .94; letter-spacing: -.045em; }
.collection-hero .ornament { margin: 14px auto 8px; color: var(--collection-accent); }
.collection-hero .lede { max-width: 760px; margin: 0 auto; color: #c9c4ba; font-size: 1.05rem; line-height: 1.65; }
.series-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px auto 0; max-width: 1100px; }
.series-nav a { color: #d9d3c8; text-decoration: none; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 12px; font-size: .82rem; background: rgba(8,10,9,.48); }
.series-nav a:hover, .series-nav a[aria-current="page"] { color: #16130d; background: var(--collection-accent); border-color: var(--collection-accent); }
.collection-meta { display: flex; justify-content: center; margin-top: 18px; }
.collection-count { padding: 8px 12px; border-radius: 999px; background: rgba(216,183,118,.12); border: 1px solid rgba(216,183,118,.25); color: #e4cc9c; font-size: .86rem; }
.collection-main { width: min(1460px, calc(100% - 36px)); margin: 0 auto; padding: 40px 0 80px; }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.collection-card { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: #171a18; box-shadow: 0 14px 34px rgba(0,0,0,.2); }
.collection-image { aspect-ratio: 1 / 1; overflow: hidden; background: #090a09; cursor: zoom-in; }
.collection-image.landscape { aspect-ratio: 3 / 2; }
.collection-image.portrait { aspect-ratio: 2 / 3; }
.collection-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.collection-image:hover img { transform: scale(1.018); }
.collection-content { padding: 18px 18px 20px; }
.collection-kicker { color: var(--collection-accent); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.collection-card h2 { margin: 8px 0 10px; font-size: 1.3rem; line-height: 1.15; }
.collection-description { margin: 0 0 14px; color: #c3beb5; line-height: 1.55; }
.collection-card details { border-top: 1px solid rgba(255,255,255,.09); padding-top: 12px; }
.collection-card summary { color: #e3d3b1; cursor: pointer; }
.collection-card pre { white-space: pre-wrap; word-break: break-word; color: #c9c5bd; font: .84rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.collection-empty { grid-column: 1 / -1; max-width: 680px; margin: 30px auto; padding: 34px; text-align: center; color: #bfb9ae; border: 1px dashed rgba(216,183,118,.3); border-radius: 18px; background: rgba(216,183,118,.04); }
.collection-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; flex-direction: column; background: rgba(3,4,3,.96); }
.collection-lightbox.open { display: flex; }
.collection-lightbox-bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.collection-lightbox-title { flex: 1; font-weight: 650; }
.collection-lightbox-hint { color: #aaa59b; font-size: .8rem; }
.collection-lightbox-close { color: #eee9df; background: transparent; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.collection-lightbox-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 18px; }
.collection-lightbox-stage img { max-width: 100%; max-height: 100%; box-shadow: 0 28px 90px rgba(0,0,0,.55); cursor: zoom-in; }
.collection-lightbox.actual .collection-lightbox-stage { align-items: flex-start; justify-content: flex-start; }
.collection-lightbox.actual .collection-lightbox-stage img { max-width: none; max-height: none; cursor: zoom-out; }
@media (max-width: 980px) { .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) {
  .collection-hero { padding-top: 64px; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-main { width: min(100% - 24px, 1460px); padding-top: 24px; }
  .collection-lightbox-hint { display: none; }
}