:root {
  --gallery-bg: #050505;
  --gallery-fg: #f2f2f0;
  --gallery-muted: rgba(255,255,255,.52);
  --gallery-line: rgba(255,255,255,.15);
  --gallery-ease: cubic-bezier(.16,1,.3,1);
}

html { background: var(--gallery-bg); }
body.gallery-page { min-height: 100vh; color: var(--gallery-fg); background: var(--gallery-bg); }
.gallery-page main { position: relative; z-index: 2; }

.gallery-hero {
  min-height: 94svh;
  padding: clamp(118px, 14vh, 180px) clamp(22px, 5vw, 80px) 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1px solid var(--gallery-line);
}
.gallery-hero-meta { display: flex; justify-content: space-between; gap: 20px; color: var(--gallery-muted); font: 500 11px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .14em; }
.gallery-title { margin: auto 0; font: 700 clamp(5rem, 14.5vw, 14rem)/.73 Arial, Helvetica, sans-serif; letter-spacing: -.085em; user-select: none; }
.gallery-title span { display: inline-block; margin-left: clamp(0px, 12vw, 180px); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.78); }
.gallery-intro { display: grid; grid-template-columns: minmax(260px, 600px) auto; justify-content: space-between; align-items: end; gap: 40px; }
.gallery-intro p { margin: 0; max-width: 42em; color: rgba(255,255,255,.68); font-size: clamp(15px, 1.25vw, 19px); line-height: 1.75; }
.gallery-count { display: flex; align-items: end; gap: 12px; }
.gallery-count strong { font: 300 clamp(3.8rem, 7vw, 7rem)/.7 Arial, sans-serif; letter-spacing: -.07em; }
.gallery-count span { color: var(--gallery-muted); font: 500 10px/1.2 ui-monospace, monospace; letter-spacing: .14em; }

.archive-strip-section { padding: 34px 0 72px; border-bottom: 1px solid var(--gallery-line); overflow: hidden; }
.archive-section-label { display: flex; justify-content: space-between; padding: 0 clamp(22px,5vw,80px) 24px; color: var(--gallery-muted); font: 500 10px/1.2 ui-monospace, monospace; letter-spacing: .14em; }
.archive-strip { width: 100%; padding-left: clamp(22px,5vw,80px); overflow: hidden; box-sizing: border-box; user-select: none; cursor: grab; touch-action: pan-y; }
.archive-strip.is-dragging { cursor: grabbing; }
.archive-strip::-webkit-scrollbar { display: none; }
.strip-progress { height: 1px; margin: 22px clamp(22px,5vw,80px) 0; overflow: hidden; background: rgba(255,255,255,.12); }
.strip-progress span { display: block; width: 100%; height: 100%; background: rgba(255,255,255,.78); transform: scaleX(.08); transform-origin: left center; will-change: transform; }
.archive-track { display: flex; width: max-content; gap: 14px; will-change: transform; }
.archive-strip-set { display: flex; flex: none; gap: 14px; }
.strip-card { position: relative; flex: 0 0 auto; height: clamp(220px, 28vw, 410px); width: auto; max-width: 76vw; overflow: hidden; background: #0a0a0a; cursor: zoom-in; }
.strip-card img, .strip-card video { width: 100%; height: 100%; object-fit: contain; transition: transform 750ms var(--gallery-ease), filter 450ms ease; }
.strip-card img { -webkit-user-drag: none; user-select: none; }
.strip-card:hover img { transform: scale(1.025); }
.strip-card-info { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; padding: 44px 20px 18px; background: linear-gradient(transparent,rgba(0,0,0,.78)); font: 500 11px/1 ui-monospace, monospace; letter-spacing: .12em; }
@keyframes archive-marquee { to { transform: translateX(calc(-50% - 7px)); } }

.archive-index { padding: clamp(70px,10vw,150px) clamp(22px,5vw,80px); }
.archive-index-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 48px; }
.archive-eyebrow { color: var(--gallery-muted); font: 500 10px/1 ui-monospace, monospace; letter-spacing: .14em; }
.archive-index h2 { margin: 10px 0 0; font: 600 clamp(2.8rem,6vw,6.4rem)/.9 Arial,sans-serif; letter-spacing: -.065em; }
.archive-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.filter-button { min-height: 34px; padding: 0 13px; border: 1px solid var(--gallery-line); border-radius: 999px; color: var(--gallery-muted); background: transparent; font: 500 10px/1 ui-monospace, monospace; letter-spacing: .08em; cursor: pointer; transition: color 180ms ease, background 180ms ease, border-color 180ms ease; }
.filter-button:hover, .filter-button.active { color: #050505; border-color: #fff; background: #fff; }

.archive-grid { display: grid; gap: clamp(58px, 8vw, 110px); }
.archive-series { min-width: 0; }
.archive-series-head { display: flex; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--gallery-line); color: var(--gallery-muted); font: 500 10px/1.2 ui-monospace, monospace; letter-spacing: .13em; text-transform: uppercase; }
.archive-series-groups { display: grid; gap: 14px; }
.archive-ratio-band { min-width: 0; }
.archive-series-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; align-items: start; }
.archive-card { position: relative; min-width: 0; cursor: zoom-in; }
.archive-card-media { position: relative; overflow: hidden; background: #101010; }
.archive-card img, .archive-card video { width: 100%; height: 100%; object-fit: contain; transform: scale(1.001); transition: transform 650ms var(--gallery-ease), opacity 260ms ease; }
.archive-card:hover img { transform: scale(1.035); }
.archive-card-meta { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 1px 26px; border-top: 1px solid var(--gallery-line); }
.archive-card-title { font-size: 13px; letter-spacing: .02em; }
.archive-card-category { color: var(--gallery-muted); font: 500 9px/1.3 ui-monospace, monospace; letter-spacing: .11em; text-align: right; text-transform: uppercase; }
.media-type { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 6px 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; background: rgba(0,0,0,.42); font: 500 9px/1 ui-monospace, monospace; letter-spacing: .12em; }

.media-viewer { position: fixed; inset: 0; z-index: 5000; display: grid; grid-template-columns: 70px minmax(0,1fr) 70px; grid-template-rows: minmax(0,1fr) auto; align-items: center; padding: 28px; color: #fff; background: rgba(0,0,0,.96); opacity: 0; visibility: hidden; transition: opacity 260ms ease, visibility 260ms; }
.media-viewer.open { opacity: 1; visibility: visible; }
.viewer-stage { min-width: 0; min-height: 0; width: 100%; height: calc(100svh - 120px); display: grid; place-items: center; }
.viewer-stage img, .viewer-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-close, .viewer-nav { border: 0; color: #fff; background: transparent; cursor: pointer; }
.viewer-close { position: absolute; top: 20px; right: 25px; z-index: 2; font: 300 40px/1 Arial,sans-serif; }
.viewer-nav { font: 300 30px/1 Arial,sans-serif; }
.viewer-caption { grid-column: 1/-1; display: grid; grid-template-columns: 90px 1fr auto; gap: 20px; align-items: center; padding-top: 18px; border-top: 1px solid var(--gallery-line); }
.viewer-caption span { color: var(--gallery-muted); font: 500 10px/1 ui-monospace,monospace; letter-spacing: .12em; text-transform: uppercase; }
.viewer-caption strong { font-size: 14px; font-weight: 500; }

.gallery-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; padding: 30px clamp(22px,5vw,80px); border-top: 1px solid var(--gallery-line); color: var(--gallery-muted); font: 500 10px/1.2 ui-monospace,monospace; letter-spacing: .12em; }
.gallery-footer a { color: #fff; }

@media (max-width: 900px) {
  .gallery-hero { min-height: 82svh; }
  .gallery-hero-meta span:nth-child(2) { display: none; }
  .gallery-title { font-size: clamp(4.5rem,20vw,8rem); line-height: .78; }
  .gallery-title span { margin-left: 0; }
  .gallery-intro { grid-template-columns: 1fr; }
  .gallery-count { justify-self: end; }
  .strip-card { height: clamp(190px, 55vw, 320px); max-width: 86vw; }
  .archive-index-head { align-items: start; flex-direction: column; }
  .archive-filters { justify-content: flex-start; }
  .archive-series-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .media-viewer { grid-template-columns: 40px minmax(0,1fr) 40px; padding: 18px 8px; }
}

@media (max-width: 560px) {
  .archive-series-grid { grid-template-columns: 1fr; }
  .viewer-caption { grid-template-columns: 52px 1fr; }
  #viewer-category { display: none; }
  .gallery-footer { gap: 20px; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-strip { scroll-snap-type: none; }
  .archive-card img, .strip-card img { transition: none; }
}