.archive-intro { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; margin-bottom: 30px }
.archive-intro .card { flex: 1 1 320px }
.archive-kpis { display: flex; gap: 12px; flex-wrap: wrap }
.archive-kpi { border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; min-width: 130px; text-align: center; background: #fff }
.archive-kpi strong { display: block; font-size: 26px; font-weight: 800; color: var(--orange) }
.archive-kpi span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em }

.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 20px 0 }
.archive-card { padding: 0; overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s }
.archive-card.is-visible { opacity: 1; transform: none }
.archive-card .work-media { display: block; aspect-ratio: 1/1; background: var(--bg); position: relative; overflow: hidden }
.archive-card .work-media img { width: 100%; height: 100%; object-fit: cover; display: block }
.archive-play-badge { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.55); }
.archive-play-badge::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%,-50%); border: 8px solid transparent; border-left-color: #fff }
.archive-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 11px }
.archive-meta strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink) }
.archive-tag { color: var(--orange); text-decoration: none; font-weight: 700; flex-shrink: 0 }

.archive-load-wrap { display: flex; align-items: center; gap: 14px; margin-top: 10px }
.archive-load-btn { border: 1px solid var(--border); background: #fff; border-radius: 12px; padding: 11px 22px; font-size: 13px; font-weight: 700; cursor: pointer }
.archive-load-btn:hover { border-color: var(--orange); color: var(--orange) }
.archive-load-btn:disabled { opacity: .5; cursor: default }
.archive-count { font-size: 12px; color: var(--muted) }

.archive-lightbox { position: fixed; inset: 0; background: rgba(10,9,7,.94); display: none; align-items: center; justify-content: center; z-index: 999; flex-direction: column }
.archive-lightbox.open { display: flex }
.archive-lightbox-img, .archive-lightbox-video { max-width: min(90vw, 1100px); max-height: 78vh; border-radius: 10px }
.archive-lightbox-info { display: flex; gap: 16px; align-items: center; color: #fff; margin-top: 14px; font-size: 13px }
.archive-lightbox-info a { color: var(--orange); text-decoration: none; font-weight: 700 }
.archive-lightbox-close, .archive-lightbox-nav { position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 0; width: 42px; height: 42px; border-radius: 50%; font-size: 16px; cursor: pointer }
.archive-lightbox-close { top: 20px; right: 20px }
.archive-lightbox-prev { left: 20px; top: 50% }
.archive-lightbox-next { right: 20px; top: 50% }
.archive-lightbox-close:hover, .archive-lightbox-nav:hover { background: var(--orange) }

.archive-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 }
.archive-preview-grid .work-media { display: block; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: var(--bg) }
.archive-preview-grid .work-media img { width: 100%; height: 100%; object-fit: cover }