/* ============================================================
   NEW ERIDU ARCHIVE — Zenless Zone Zero Companion
   Core design system
   Author: WorkBuddy
   ------------------------------------------------------------
   Visual language: urban-occult streetwear. Fluoro yellow on ink
   black, halftone print texture, CRT scanlines, hard offset
   shadows, clipped diagonal geometry, sticker collage.
   ============================================================ */

/* ---------- 1. RESET ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

/* ---------- 2. TOKENS ---------- */
:root {
  /* ink & paper */
  --ink-900: #08080A;
  --ink-850: #0C0C0F;
  --ink-800: #121216;
  --ink-750: #17171C;
  --ink-700: #1D1D23;
  --ink-600: #2A2A32;
  --ink-500: #3A3A45;
  --paper: #F3F3EE;
  --paper-dim: #C9C9C2;
  --mute-300: #9C9CA6;
  --mute-400: #74747F;

  /* signature fluoro */
  --fluoro: #E8FF23;
  --fluoro-hot: #F6FF6A;
  --fluoro-deep: #B8CC00;
  --fluoro-glow: rgba(232, 255, 35, .35);

  /* accents */
  --hot: #FF3B1F;
  --cyan: #22D3EE;
  --magenta: #FF3D9E;
  --success: #4ADE80;
  --warn: #FBBF24;

  /* attribute palette */
  --physical: #F5A623;
  --fire: #FF4B2B;
  --ice: #4FC3F7;
  --electric: #8B6BFF;
  --ether: #FF3D9E;
  --frost: #7FE9FF;
  --wind: #3DDC97;
  --auricink: #FFC93C;
  --lumiflux: #C6FF3D;
  --honededge: #C9D6E2;

  /* type */
  --font-display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans', 'Noto Sans KR', sans-serif;
  --font-condensed: 'Bebas Neue', 'Archivo Black', 'Arial Narrow', sans-serif;
  --font-body: 'Space Grotesk', 'Inter', -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans', 'Noto Sans KR', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans', 'Noto Sans KR', monospace;

  /* geometry */
  --gap: 20px;
  --radius: 2px;
  --radius-lg: 4px;
  --border: 1.5px solid var(--ink-600);
  --border-strong: 2px solid var(--paper);
  --shadow-hard: 4px 4px 0 var(--ink-600);
  --shadow-fluoro: 5px 5px 0 var(--fluoro);
  --wrap: 1320px;
  --skew: -1.6deg;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur: .5s;
}

/* ---------- 3. BASE ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.no-scroll { overflow: hidden; }

::selection { background: var(--fluoro); color: var(--ink-900); }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-850); }
::-webkit-scrollbar-thumb { background: var(--ink-600); border: 2px solid var(--ink-850); }
::-webkit-scrollbar-thumb:hover { background: var(--fluoro-deep); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fluoro);
  outline-offset: 2px;
}

/* ---------- 4. ATMOSPHERE LAYERS ---------- */
.atmos {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
}
/* film grain */
.atmos-grain {
  position: absolute;
  inset: -100px;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}
/* scanlines */
.atmos-scan {
  position: absolute;
  inset: 0;
  opacity: .045;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.9) 0px,
    rgba(255,255,255,.9) 1px,
    transparent 1px,
    transparent 3px
  );
}
/* vignette */
.atmos-vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, transparent 30%, rgba(0,0,0,.55) 100%);
}
/* sweep bar */
.atmos-sweep {
  position: absolute;
  left: 0; right: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, rgba(232,255,35,.05), transparent);
  animation: sweepDown 9s linear infinite;
}
@keyframes grainShift {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-40px, 20px); }
  40% { transform: translate(30px,-30px); }
  60% { transform: translate(-20px,-20px); }
  80% { transform: translate(35px, 25px); }
}
@keyframes sweepDown {
  0% { transform: translateY(-200px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* custom cursor
   A 22px arrow, filled on the inside and edged so it reads on both the ink
   panels and the light plates. It is a plain pointer — the design is only the
   palette — and it is a static image, so it tracks at system speed instead of
   being redrawn by script. Interactive targets swap the fill for the accent,
   which is the entire hover signal. Declared once here and applied through the
   two custom properties below, so the artwork is never duplicated. */
:root {
  --cur-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M4 1.5 L4 18.4 L8.4 14 L11.5 20.8 L14.3 19.5 L11.2 12.8 L17 12.8 Z' fill='%23F2F2F6' stroke='%2308080A' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cur-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M4 1.5 L4 18.4 L8.4 14 L11.5 20.8 L14.3 19.5 L11.2 12.8 L17 12.8 Z' fill='%23E8FF23' stroke='%2308080A' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body { cursor: var(--cur-arrow) 4 1, default; }
input, textarea, select, [contenteditable] { cursor: auto; }
a, button, summary, [role="button"], label[for] {
  cursor: var(--cur-hot) 4 1, pointer;
}

/* ---------- 5. TYPE ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.condensed {
  font-family: var(--font-condensed);
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.outline-text {
  color: transparent;
  -webkit-text-stroke: 2px var(--paper);
  text-stroke: 2px var(--paper);
}
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fluoro);
}
.lead { font-size: 17px; line-height: 1.7; color: var(--paper-dim); }
.dim { color: var(--mute-300); }

.glow-text { text-shadow: 0 0 18px var(--fluoro-glow); }

/* ---------- 6. LAYOUT ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}
.wrap-wide { max-width: 1560px; }
@media (max-width: 640px) { .wrap { padding: 0 18px; } }

/* Section rhythm. The first pass was built at poster scale — 96px of padding
   between sections, a 42px section title and a 44px outlined index — which
   made every page roughly seven viewports long and pushed the artwork past the
   size of the files behind it. Everything here is roughly two thirds of what
   it was: the same layout, read without so much scrolling, and sharper,
   because a picture drawn smaller than its source never softens. */
.section { padding: 60px 0; position: relative; }
.section-tight { padding: 38px 0; }
main { position: relative; z-index: 1; }
/* `overflow-x: clip` contains any incidental horizontal overflow without
   creating a scroll container, so position:sticky descendants keep tracking the
   document and no stray horizontal scrollbar ever appears on narrow screens. */
main { overflow-x: clip; }

.rule {
  height: 2px;
  background: var(--ink-600);
  border: 0;
}

/* section head */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--ink-700);
  position: relative;
}
.sec-head::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1.5px;
  width: 120px; height: 1.5px;
  background: var(--fluoro);
}
.sec-head-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sec-index {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink-500);
  flex: none;
}
.sec-title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: .96;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.sec-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute-400);
  margin-top: 6px;
}
@media (max-width: 720px) {
  .sec-head { flex-direction: column; align-items: flex-start; }
  .sec-index { font-size: 26px; }
}

/* ---------- 7. BUTTONS ---------- */
.btn {
  --btn-bg: var(--ink-750);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink-600);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: transform .18s var(--ease-out), border-color .18s, color .18s;
}
/* Hover sweep. The wipe sits fully off-canvas before hover; the travel distance
   has to clear the element's own width plus the horizontal bleed the skew adds
   (H/2 * tan 20deg), otherwise the leading edge parks over the first glyph. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fluoro);
  transform: translateX(-150%) skewX(-20deg);
  transition: transform .42s var(--ease-out);
  z-index: -1;
}
.btn:hover { color: var(--ink-900); border-color: var(--fluoro); transform: translate(-2px,-2px); }
.btn:hover::before { transform: translateX(0) skewX(0); }
.btn:active { transform: translate(0,0); }

.btn-primary { --btn-bg: var(--fluoro); --btn-fg: var(--ink-900); --btn-bd: var(--fluoro); box-shadow: 4px 4px 0 rgba(232,255,35,.16); }
.btn-primary::before { background: var(--paper); }
.btn-primary:hover { color: var(--ink-900); }

.btn-ghost { --btn-bg: transparent; --btn-bd: var(--ink-500); }
.btn-ghost:hover { color: var(--ink-900); }

.btn-sm { padding: 9px 15px; font-size: 10px; letter-spacing: .12em; }
.btn-block { width: 100%; justify-content: center; }

/* arrow nudge */
.btn .arw { transition: transform .25s var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }

/* ---------- 8. CHIPS / TAGS ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: var(--ink-750);
  border: 1px solid var(--ink-600);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute-300);
  white-space: nowrap;
}
.chip-fluoro { background: var(--fluoro); color: var(--ink-900); border-color: var(--fluoro); font-weight: 700; }
.chip-outline { background: transparent; border-color: var(--mute-400); color: var(--paper-dim); }
.chip-attr {
  background: color-mix(in srgb, var(--ac, var(--fluoro)) 14%, transparent);
  border-color: color-mix(in srgb, var(--ac, var(--fluoro)) 55%, transparent);
  color: var(--ac, var(--fluoro));
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* rarity */
.stars { display: inline-flex; gap: 2px; }
.star {
  width: 11px; height: 11px;
  background: var(--fluoro);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.star-a { background: var(--cyan); }

/* ---------- 9. HEADER / NAV ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 600;
  background: rgba(8,8,10,.82);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1.5px solid var(--ink-700);
}
.topbar-in {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 66px;
}
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-mark {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  background: var(--fluoro);
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
  transition: transform .3s var(--ease-spring);
}
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.brand-txt { line-height: 1; display: flex; flex-direction: column; }
.brand-name {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .26em;
  color: var(--fluoro);
  display: block;
  margin-top: 3px;
  order: 2;
}
.brand-tag {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--paper);
  display: block;
  order: -1;
}

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.nav-a {
  position: relative;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute-300);
  transition: color .2s;
  white-space: nowrap;
}
.nav-a::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 3px;
  height: 2px;
  background: var(--fluoro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav-a:hover { color: var(--paper); }
.nav-a:hover::after { transform: scaleX(1); }
.nav-a.on { color: var(--fluoro); }
.nav-a.on::after { transform: scaleX(1); }

.topbar-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.kbd-hint {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--ink-600);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--mute-400);
  transition: border-color .2s, color .2s;
}
.kbd-hint:hover { border-color: var(--fluoro); color: var(--fluoro); }
.kbd-hint kbd {
  font-family: var(--font-mono);
  background: var(--ink-700);
  padding: 1px 5px;
  font-size: 9px;
  border-radius: 2px;
}

.burger { display: none; width: 40px; height: 40px; border: 1px solid var(--ink-600); place-items: center; }
.burger span { display: block; width: 17px; height: 1.5px; background: var(--paper); margin: 3px auto; transition: transform .3s; }

/* ---------- language switcher ----------
   Sits in the header's outermost seat, after the search hint — the spot
   language/region controls take on GitHub, Apple and Google. A ghost chip
   like .kbd-hint, showing the active code (EN / ZH / JA / KO); the dropdown
   lists the four languages by their own names, active one fluoro. */
.lang { position: relative; }
.lang-btn {
  padding: 6px 10px;
  border: 1px solid var(--ink-600);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--mute-400);
  transition: border-color .2s, color .2s;
}
.lang-btn::after { content: ' ▾'; font-size: 8px; }
.lang-btn:hover { border-color: var(--fluoro); color: var(--fluoro); }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 132px;
  z-index: 300;
  background: var(--ink-850);
  border: 1px solid var(--ink-700);
  padding: 4px;
}
.lang-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--mute-300);
}
.lang-menu button:hover { background: var(--ink-750); color: var(--paper); }
.lang-menu button.on { color: var(--fluoro); }
.lang-menu button.on::after { content: ' ●'; font-size: 7px; }

@media (max-width: 1100px) {
  .nav {
    position: fixed;
    inset: 66px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-850);
    border-bottom: 1.5px solid var(--ink-700);
    padding: 8px 18px 20px;
    transform: translateY(-130%);
    transition: transform .45s var(--ease-out);
    max-height: calc(100vh - 66px);
    overflow-y: auto;
  }
  .nav.open { transform: translateY(0); }
  .nav-a { padding: 13px 4px; border-bottom: 1px solid var(--ink-750); font-size: 12px; }
  .nav-a::after { display: none; }
  .nav-a.on { color: var(--fluoro); }
  .burger { display: grid; }
  .kbd-hint { display: none; }
}

/* ---------- 10. TICKER ---------- */
/* The hero paints three decorative layers at `position:absolute; z-index:0`,
   and they are not transparent: .hero-bg ends in an opaque
   `linear-gradient(#0B0B0E, #08080A)`. A static, non-positioned block (which
   is what this was) is painted in the *block backgrounds* step of the stacking
   order — before any z-index:0 positioned layer. So the marquee strip that
   fills the bottom of the hero was being painted and then covered by the hero's
   own background: a 36px band of pure fluoro, invisible, at the exact place a
   visitor looks when the first screen ends. `position: relative` moves it into
   the positioned layer with the rest of the chrome, where it belongs. */
.ticker {
  position: relative;
  z-index: 3;
  background: var(--fluoro);
  color: var(--ink-900);
  border-top: 2px solid var(--ink-900);
  border-bottom: 2px solid var(--ink-900);
  overflow: hidden;
  display: flex;
  user-select: none;
}
.ticker-track {
  display: flex;
  flex: none;
  gap: 34px;
  padding: 7px 17px;
  animation: tickerRun 42s linear infinite;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-rev .ticker-track { animation-direction: reverse; }
.ticker-item { display: inline-flex; align-items: center; gap: 10px; }
.ticker-item i { width: 5px; height: 5px; background: var(--ink-900); border-radius: 50%; flex: none; }
@keyframes tickerRun {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.ticker-slow .ticker-track { animation-duration: 70s; }

/* ---------- 11. PANELS ---------- */
.panel {
  position: relative;
  background: var(--ink-850);
  border: 1.5px solid var(--ink-700);
  padding: 26px;
}
.panel-skew {
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.panel-fluoro { border-color: var(--fluoro); box-shadow: 6px 6px 0 rgba(232,255,35,.18); }
.panel-hatch::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.028) 0 1px, transparent 1px 8px);
  pointer-events: none;
}
.panel-label {
  position: absolute;
  top: -1px; left: -1px;
  background: var(--fluoro);
  color: var(--ink-900);
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---------- 12. GRIDS ---------- */
.grid { display: grid; gap: var(--gap); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-5 { grid-template-columns: repeat(5, 1fr); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

@media (max-width: 1080px) {
  .g-4, .g-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .g-3, .g-4, .g-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .g-2, .g-3, .g-4, .g-5 { grid-template-columns: 1fr; }
}
/* The roster and the disc catalogue stay two-up on a phone.
 *
 * Collapsing every grid to one column is right for the two-up article cards
 * above, and wrong for these two: they are 62 and 30 small tiles. One column
 * put the Agent Index at 31,693px — 37.6 screens, ~27,000 of them the roster
 * alone — because a 354px-wide Agent card is 443px tall and there is only ever
 * one of them per row. Two-up halves both pages, and a 167px card still shows
 * the medallion and the name. Scoped by id, so no other page's grid moves. */
@media (max-width: 520px) {
  #agent-grid, #disc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 13. SCROLL REVEAL ---------- */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.rv.in { opacity: 1; transform: none; }
.rv-clip { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease-out); transition-delay: var(--d,0ms); }
.rv-clip.in { clip-path: inset(0 0 0 0); }
.rv-left { transform: translateX(-34px); }

/* ---------- 14. UTIL ---------- */
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.wrapflex { flex-wrap: wrap; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.gap-14 { gap: 14px; } .gap-18 { gap: 18px; } .gap-24 { gap: 24px; }
.mt-6 { margin-top: 6px; } .mt-10 { margin-top: 10px; } .mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; } .mt-36 { margin-top: 36px; } .mt-56 { margin-top: 56px; }
.mb-0 { margin-bottom: 0; }
.tc { text-align: center; }
.rel { position: relative; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.no-wrap { white-space: nowrap; }

/* ---------- 17. MARQUEE BAND ---------- */
.band {
  position: relative;
  overflow: hidden;
  padding: 26px 0;
  border-top: 1.5px solid var(--ink-700);
  border-bottom: 1.5px solid var(--ink-700);
  background: var(--ink-850);
}
.band-inner { display: flex; gap: 40px; }
.band-word {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 104px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink-500);
  animation: tickerRun 30s linear infinite;
}
.band-word.solid { color: var(--fluoro); -webkit-text-stroke: 0; }

/* ---------- 18. PROGRESS / BARS ---------- */
.bar {
  height: 5px;
  background: var(--ink-700);
  overflow: hidden;
  position: relative;
}
.bar-fill {
  height: 100%;
  background: var(--ac, var(--fluoro));
  width: 0;
  transition: width 1.2s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.bar-fill.go { width: var(--w, 60%); }

/* stat row */
.stat {
  display: grid;
  grid-template-columns: 108px 1fr 52px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--ink-700);
}
.stat-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-400); }
.stat-v { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--paper); }

/* ---------- 19. TOOLTIP ---------- */
.tip { position: relative; }
.tip-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--paper);
  color: var(--ink-900);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 40;
}
.tip:hover .tip-bubble { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 20. FOOTER ---------- */
.foot {
  border-top: 1.5px solid var(--ink-700);
  background: var(--ink-850);
  padding: 66px 0 28px;
  position: relative;
  z-index: 1;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 44px;
}
.foot-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fluoro);
  margin-bottom: 16px;
}
.foot-l { display: block; padding: 6px 0; font-size: 13.5px; color: var(--mute-300); transition: color .2s, transform .2s; }
.foot-l:hover { color: var(--paper); transform: translateX(4px); }
.foot-bot {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-700);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--mute-400);
  line-height: 1.7;
}
@media (max-width: 860px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 520px) {
  .foot-grid { grid-template-columns: 1fr; }
}

/* ---------- 21. TO TOP ---------- */
.totop {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 700;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--fluoro);
  color: var(--ink-900);
  border: 2px solid var(--ink-900);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s, transform .3s;
  font-size: 17px;
}
.totop.on { opacity: 1; transform: none; }
.totop:hover { background: var(--paper); }

/* ---------- 22. ANCHOR LANDING ---------- */
/* An in-page jump (a disc cover, "jump to the catalogue") has to say it
   arrived. Scrolling a 103-row list without a cue reads as a dead click.
   Drawn on a pseudo-element so it cannot fight the element's own border. */
.anchor-hit {
  position: relative;
  animation: anchorHit 1.7s var(--ease-out) forwards;
}
.anchor-hit::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px solid var(--fluoro);
  pointer-events: none;
  z-index: 5;
}
@keyframes anchorHit {
  0%   { box-shadow: 0 0 0 0 rgba(232, 255, 35, .55); }
  18%  { box-shadow: 0 0 0 7px rgba(232, 255, 35, .16); }
  60%  { box-shadow: 0 0 0 5px rgba(232, 255, 35, .07); }
  100% { box-shadow: 0 0 0 0 rgba(232, 255, 35, 0); }
}

/* ---------- 23. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1 !important; transform: none !important; }
  .rv-clip { clip-path: none !important; }
  .atmos-sweep, .atmos-grain { display: none; }
}

/* agent index: search lifted out of the filter bar into the sec-head action slot */
.sec-head .search-wrap { flex: 0 1 460px; min-width: 200px; }
@media (max-width: 720px) {
  .sec-head .search-wrap { flex-basis: auto; width: 100%; }
}