:root {
  --black: #080909;
  --ink: #111212;
  --paper: #f2efe8;
  --ivory: #fffdf7;
  --gold: #cbb07a;
  --gold-dark: #7b6339;
  --line: rgba(203, 176, 122, .34);
  --content: 1240px;
  --title-font: "Songti SC", STSong, "SimSun", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.archiveHero { position: relative; height: clamp(420px, 46vh, 520px); overflow: hidden; background: var(--black); color: #fff; }
.archiveHero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.72); }
.archiveHeroShade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,4,4,.88) 0%, rgba(4,4,4,.34) 66%, rgba(4,4,4,.2)), linear-gradient(180deg, rgba(4,4,4,.1), rgba(4,4,4,.7)); }
.archiveHeroCopy { position: absolute; z-index: 2; inset-inline-start: max(30px, calc((100vw - var(--content)) / 2)); inset-inline-end: 30px; bottom: 15%; }
.archiveHeroCopy h1 { margin: 0; font-family: var(--title-font); font-size: clamp(48px, 5.5vw, 78px); font-weight: 400; line-height: 1.2; letter-spacing: 3px; }
.archiveHeroLead { max-width: 46ch; margin: 22px 0 0; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.75; text-wrap: pretty; }

.archive { min-height: 700px; scroll-margin-top: 0; }
.categoryRailWrap {
  position: sticky;
  z-index: 20;
  top: 84px;
  padding: 13px max(16px, calc((100vw - 1480px) / 2));
  overflow: hidden;
  background: rgba(8,9,9,.94);
  border-bottom: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(18px);
}
.categoryTab.is-active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); color: #fff; }
.categoryTab.is-active::before { background: linear-gradient(rgba(var(--black-rgb, 8,9,9), .28), rgba(var(--black-rgb, 8,9,9), .64)), var(--tab-image) center / cover; filter: saturate(1.15); }

.archiveInner { width: min(calc(100% - 40px), var(--content)); margin: 0 auto; padding: 42px 0 120px; }

.categoryTab:focus-visible,
.emptyState button:focus-visible { outline-offset: 3px; }
.galleryNotice { padding: 40px 20px; color: var(--light-muted, #706b63); text-align: center; }

.emptyState { padding: 110px 20px; text-align: center; border: 1px solid var(--light-border, #c9bfaf); }
.emptyState span { display: block; color: var(--gold-dark); font: 300 54px/1 var(--title-font); }
.emptyState h3 { margin: 20px 0 12px; font-family: var(--title-font); font-size: 30px; font-weight: 400; }
.emptyState button { min-height: 44px; margin-top: 26px; padding: 11px 17px; border: 1px solid var(--ink); border-radius: var(--button-radius, 3px); background: var(--ink); color: var(--ivory); cursor: pointer; font-size: 12px; letter-spacing: 1px; }

.emptyState button:active { transform: scale(.96); }

@media (max-width: 900px) {
  .archiveHero { height: clamp(340px, 54svh, 440px); }
  .archiveHero > img { object-position: 58% center; }
  .archiveHeroCopy { inset-inline: 22px; bottom: 12%; }
  .archiveHeroCopy h1 { font-size: clamp(34px, 10vw, 48px); letter-spacing: .5px; text-wrap: balance; }
  .archiveHeroLead { max-width: 34ch; margin-top: 16px; font-size: 14px; }
  .categoryRailWrap { top: 70px; padding: 10px 12px; }
  .archiveInner { padding: 28px 0 86px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .emptyState button:active { transform: none; }
}