.archive-page { --archive-accent: #f2c500; min-height: 100vh; }
.archive-header { border-bottom: 1px solid var(--line-strong); background: #090b0c; }
.archive-header .wrap { display: flex; justify-content: space-between; align-items: stretch; }
.archive-brand { display: grid; align-content: center; padding: 18px 0; }
.archive-brand strong { color: var(--bright); font: 900 22px/1 "Arial Black", sans-serif; text-transform: uppercase; }
.archive-header nav { display: flex; }
.archive-header nav a { display: grid; place-items: center; padding: 0 16px; border-left: 1px solid var(--line); color: var(--sub); font: 10px Consolas, monospace; text-transform: uppercase; }
.archive-header nav a:hover { background: var(--bright); color: #111; }
.archive-main { min-width: 0; padding: 46px 0 70px; }
.archive-filters { display: flex; flex-wrap: wrap; margin: 20px 0; border: 1px solid var(--line); }
.archive-filters a { padding: 9px 15px; border-right: 1px solid var(--line); color: var(--sub); font: 10px Consolas, monospace; text-transform: uppercase; }
.archive-filters a:hover, .archive-filters .is-active { background: var(--archive-accent); color: #111; }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.archive-item { position: relative; min-width: 0; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--line); background: var(--surface); color: inherit; cursor: zoom-in; text-align: left; }
.archive-item:hover { border-color: var(--archive-accent); box-shadow: 0 0 0 1px var(--archive-accent); }
.archive-item img { width: 100%; height: 100%; background: #111; filter: none; object-fit: cover; }
.archive-item:hover img { filter: none; transform: scale(1.015); }
.archive-item span { position: absolute; right: 0; bottom: 0; left: 0; display: flex; gap: 8px; padding: 8px 9px; overflow: hidden; background: linear-gradient(90deg, rgb(5 7 8 / 92%), rgb(5 7 8 / 68%)); color: #c9cecc; font: 9px Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.archive-item b { color: var(--archive-accent); }
.archive-pages { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 28px; font: 10px Consolas, monospace; text-transform: uppercase; }
.archive-pages a, .archive-pages span { padding: 9px 13px; border: 1px solid var(--line); }
.archive-pages a:hover { border-color: var(--accent); color: var(--accent); }
.archive-viewer { width: min(94vw, 1300px); max-width: none; height: min(92vh, 980px); max-height: none; padding: 0; border: 1px solid var(--line-strong); background: #080a0b; color: var(--ink); }
.archive-viewer::backdrop { background: rgb(0 0 0 / 88%); }
.archive-viewer-stage { display: grid; place-items: center; width: 100%; height: calc(100% - 42px); padding: 18px; }
.archive-viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.archive-viewer p { margin: 0; padding: 10px 15px; border-top: 1px solid var(--line); color: var(--sub); font: 10px Consolas, monospace; }
.archive-close { position: absolute; z-index: 2; top: 8px; right: 8px; width: 36px; height: 36px; border: 1px solid var(--line-strong); background: #0b0d0e; color: var(--bright); cursor: pointer; font-size: 22px; }

@media (max-width: 650px) {
  .archive-header .wrap { display: block; }
  .archive-header nav { border-top: 1px solid var(--line); }
  .archive-header nav a { min-height: 40px; }
  .archive-filters a { flex: 1 1 33%; text-align: center; }
}