/* ============================================================
   NEW ERIDU ARCHIVE — page & component layer
   ============================================================ */

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: 26px 0 0;
  overflow: hidden;
  /* The first screen is the hero and nothing else. It used to stop at content
     height (~578px), so on a 740px window the hero ended 96px above the fold
     and the quick dock below it showed its top third — icon and title with the
     description sliced off. A row cut in half reads as a broken row, not as a
     teaser, so the dock is pushed wholly onto the second screen instead.

     Sizing the hero to the viewport is what does that. The 66px subtracts the
     sticky topbar, which still occupies its space in the flow while the hero
     sits under it. A flex column lets .hero-main absorb the slack so the
     marquee stays pinned to the fold rather than floating mid-screen. */
  min-height: calc(100vh - 66px);
  display: flex;
  flex-direction: column;
  /* The key-art window takes an explicit height (see .hero-art in art.css);
     the full splash is drawn object-fit: contain inside it, so nothing is ever
     cropped. This property is only the ceiling — the point past which the art
     would push the marquee below the fold. The subtraction is topbar 66 +
     hero padding 26 + marquee 36 + a breathing gap under the figure, with the
     rest given to the figure itself. Tuned so the window's top edge lands
     ~114px and its bottom ~21px above the marquee at every desktop height:
     the figure is drawn as large as the fold allows (0.76x of the 1080px
     source on a 986px window). */
  --full-h: clamp(420px, calc(100vh - 170px), 840px);
}
/* No release at the stacking breakpoint. The floor is harmless when the stacked
   hero is taller than the window (content wins, min-height does nothing), and
   it is exactly what keeps the dock off the fold on a tall-narrow window: at
   820x1180 the stacked hero measures ~1047px against an 1180px fold, so
   releasing it there hands the dock back to the first screen. */
/* The first screen has to be a first screen, but it must never be a guillotine.
   This was `height:` with `justify-content: center`, and on a window shorter
   than the clamp floor the content (~615px) was centred inside a 500px box —
   so it overflowed *upward* and `overflow: hidden` on .hero sliced the top off,
   which happened to be the version badge: it rendered as a 2px fluoro hairline
   with no text. `min-height` keeps the fold when there is room and lets the
   hero grow when there is not; flex centring then has nothing to overflow. */
.hero-main {
  position: relative;
  display: flex;
  align-items: center;
  /* Grows into whatever the viewport floor leaves after the marquee, so the
     identity block stays vertically centred in the first screen at any height. */
  flex: 1 1 auto;
  min-height: clamp(500px, calc(100vh - 224px), 660px);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 70% at 78% 18%, rgba(232,255,35,.13), transparent 62%),
    radial-gradient(50% 60% at 12% 82%, rgba(255,59,31,.10), transparent 60%),
    linear-gradient(180deg, #0B0B0E 0%, #08080A 100%);
}
.hero-halftone {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
  background-image: radial-gradient(circle, var(--ink-600) 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: radial-gradient(70% 80% at 70% 25%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(70% 80% at 70% 25%, #000 0%, transparent 72%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}
.hero-in { position: relative; z-index: 2; width: 100%; }
/* Identity on the left, key art on the right. The split is slightly left-heavy
   because the wordmark sets the width of its own column. These base rules are
   what the stacked layout at ≤980px inherits; the desktop two-column
   placement — including the dossier's move into the identity column — lives in
   the min-width block that follows. */
.hero-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 48px;
  align-items: center;
}
/* Desktop: the featured dossier leaves the art column and takes the slot under
   the identity block, so the left column reads masthead → dossier top to
   bottom and the right column is the Agent alone. `display: contents` promotes
   the art and the card out of .hero-side so all three become grid items here;
   the art spans both rows and top-aligns with the masthead, which also keeps
   it within a few pixels of where it stood before the move.
   Scoped to ≥1081px — that is where the two-column hero actually lives (art.css
   stacks the hero at ≤1080). The `.hero-cols >` prefix matters: art.css loads
   after this file and re-declares `.hero-side` as a flex box, which would
   otherwise win the tie and put the card back under the art. */
@media (min-width: 1081px) {
  .hero-cols {
    /* Row 2 takes ALL the slack the art's height leaves over, so the row-1
       gap after the buttons never stretches: the dossier card is pulled to
       the column floor with align-self and its bottom edge lands on the same
       line as the figure's feet — one baseline across both columns. */
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'id   art'
      'feat art';
    gap: 28px 48px;
    align-items: start;
  }
  .hero-cols > .hero-side { display: contents; }
  .hero-inner { grid-area: id; }
  .hero-art { grid-area: art; }
  .hero-feat { grid-area: feat; align-self: end; }
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px;
  border: 1px solid var(--fluoro);
  background: rgba(232,255,35,.07);
  color: var(--fluoro);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero-badge .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fluoro);
  box-shadow: 0 0 0 0 var(--fluoro-glow);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(232,255,35,.6); }
  70% { box-shadow: 0 0 0 11px rgba(232,255,35,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,255,35,0); }
}

/* Was clamp(52px, 8.6vw, 116px): at 116px a three-line wordmark is 290px of
   the fold on its own, before the badge, the lead, the controls, the featured
   dossier and the metrics. The mark is still the loudest thing here, and the
   third line drops to a strapline so the block reads as a masthead instead of
   as three competing headlines. */
.hero-title {
  margin: 28px 0 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.7vw, 64px);
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.hero-title .l1 { display: block; color: var(--paper); }
/* This line used to be a white outline with a cyan band across its top third
   and a red band across its bottom third — a permanent three-colour
   misregistration that read as a printing fault, not as a design.

   It then went solid fluoro, which is a different problem: two 64px lines in
   the same weight and the same voice, so the masthead shouted twice and the
   page had spent its one accent before the first scroll. Drawn instead of
   filled — the proper noun keeps the fill, the generic word keeps the colour —
   which is the pairing editorial mastheads actually use. */
.hero-title .l2 {
  display: block;
  color: transparent;
  -webkit-text-stroke: 2px var(--fluoro);
}
/* Not a third headline — a closing slug for the masthead. A fluoro tick brings
   the eye in, the label sits on the baseline, and a hairline runs out to the
   edge of the text column so the block ends on a rule instead of on air. */
.hero-title .l3 {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: clamp(10px, .8vw, 12.5px);
  font-weight: 500;
  letter-spacing: .3em;
  color: var(--mute-300);
  text-transform: uppercase;
}
.hero-title .l3::before {
  content: '';
  flex: none;
  width: 26px;
  height: 2px;
  background: var(--fluoro);
}
.hero-title .l3::after {
  content: '';
  flex: 1 1 auto;
  min-width: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--ink-600), transparent);
}

/* 540px at 14.5px broke "all 103 W-Engines" across a line for no reason; the
   column is 695px wide and the paragraph deserves to use it. */
/* One line now, so the measure is set for one line: a 600px box under a
   one-line lede just makes the block look like it failed to fill.

   The four blocks of the identity column — badge, masthead, lead, controls —
   used to sit 18/19/20/28px apart, which read as one crowded paragraph with
   rules in it. Five counters no longer sit under the controls, so the column
   has the height to breathe: the beat between the mark and the slug line is
   now roughly double the beat between the lead and the buttons, which is what
   makes the group read as a stack instead of a run-on. */
.hero-desc { margin-top: 30px; max-width: 520px; font-size: 15px; line-height: 1.7; color: var(--paper-dim); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 42px; }

/* hero art panel */
.hero-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1.5px solid var(--ink-600);
  background: var(--ink-850);
  overflow: hidden;
  clip-path: polygon(0 26px, 26px 0, 100% 0, 100% 100%, 0 100%);
}
.hero-stage-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 50% 30%, var(--ac, var(--fluoro)), transparent 70%);
  opacity: .18;
  transition: background .6s, opacity .6s;
}
.hero-stage-halftone {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.3px);
  background-size: 12px 12px;
  mask-image: linear-gradient(to top, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 70%);
}
.hero-stage-mono {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-7deg);
  font-family: var(--font-display);
  font-size: clamp(120px, 17vw, 220px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--ac, var(--fluoro));
  opacity: .55;
  letter-spacing: -.05em;
  transition: transform .7s var(--ease-out), opacity .5s;
  user-select: none;
}
.hero-stage-slash {
  position: absolute;
  left: -30%; right: -30%;
  top: 62%;
  height: 4px;
  background: var(--ac, var(--fluoro));
  transform: rotate(-13deg);
  opacity: .8;
  box-shadow: 0 0 24px var(--ac, var(--fluoro));
}
.hero-stage-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 4px);
  opacity: .5;
}
.hero-stage-meta {
  position: absolute;
  left: 20px; right: 20px; bottom: 20px;
  z-index: 3;
}
.hero-stage-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.hero-stage-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.hero-stage-rail {
  position: absolute;
  top: 20px; right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 4;
}
.rail-dot {
  width: 24px; height: 4px;
  background: var(--ink-600);
  transition: background .3s, width .3s;
}
.rail-dot.on { background: var(--fluoro); width: 40px; }
.hero-stage-idx {
  position: absolute;
  top: 18px; left: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--mute-400);
  z-index: 4;
}
.hero-stage-idx b { color: var(--fluoro); font-size: 15px; }

@media (max-width: 980px) {
  .hero-cols { grid-template-columns: 1fr; gap: 40px; padding-bottom: 44px; }
  .hero-stage { aspect-ratio: 16 / 12; }
  .hero { padding-top: 46px; }
  .hero-title .l2 { -webkit-text-stroke-width: 1.5px; }
  .hero-desc { max-width: 100%; }
}

/* ---------- QUICK DOCK ---------- */
.dock { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1.5px solid var(--ink-700); }
.dock-item {
  position: relative;
  padding: 24px 20px;
  border-right: 1.5px solid var(--ink-700);
  overflow: hidden;
  isolation: isolate;
  transition: background .3s;
}
.dock-item:last-child { border-right: 0; }
.dock-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--fluo, var(--fluoro));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s var(--ease-out);
}
.dock-item:hover::before { transform: scaleY(1); }
.dock-item:hover { background: var(--ink-800); }
.dock-ic {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1.5px solid var(--fluo, var(--fluoro));
  color: var(--fluo, var(--fluoro));
  margin-bottom: 16px;
  transition: background .3s, color .3s, transform .3s var(--ease-spring);
}
.dock-item:hover .dock-ic { background: var(--fluo, var(--fluoro)); color: var(--ink-900); transform: rotate(-8deg); }
.dock-t { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: -.01em; }
.dock-d { font-size: 12px; color: var(--mute-400); margin-top: 7px; line-height: 1.5; }
.dock-n {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--font-display); font-size: 30px;
  color: transparent; -webkit-text-stroke: 1px var(--ink-600);
}
@media (max-width: 980px) { .dock { grid-template-columns: repeat(2, 1fr); } .dock-item:nth-child(2n) { border-right: 0; } .dock-item { border-bottom: 1.5px solid var(--ink-700); } }
@media (max-width: 520px) { .dock { grid-template-columns: 1fr; } .dock-item { border-right: 0; } }

/* ============================================================
   AGENT PORTRAIT SYSTEM
   Uniform "dossier card" — real splash art drops into .ac-art
   as a background image when available; otherwise a designed
   typographic field renders in its place.
   ============================================================ */
.agent {
  --ac: var(--fluoro);
  position: relative;
  display: block;
  color: inherit;
  isolation: isolate;
}
.agent-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ink-850);
  border: 1.5px solid var(--ink-600);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  transition: border-color .3s, transform .45s var(--ease-out);
  /* The same card serves a 125px tier-band column and a 250px index column,
     so the type scales off the card itself rather than the viewport. */
  container-type: inline-size;
  container-name: card;
}
.agent-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  transform: scale(1.02);
  transition: transform .7s var(--ease-out), filter .4s;
}
/* gradient field when no art */
.agent-art.placeholder {
  background:
    radial-gradient(85% 65% at 50% 18%, color-mix(in srgb, var(--ac) 34%, transparent), transparent 68%),
    radial-gradient(120% 80% at 50% 108%, rgba(0,0,0,.9), transparent 60%),
    linear-gradient(170deg, var(--ink-800), var(--ink-900));
}
.agent-halftone {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.17) 1px, transparent 1.25px);
  background-size: 11px 11px;
  mask-image: linear-gradient(to top, #000 8%, transparent 62%);
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 62%);
  opacity: .75;
}
.agent-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.3) 0 1px, transparent 1px 4px);
  opacity: .55;
}
.agent-mono {
  position: absolute;
  left: 50%; top: 44%;
  transform: translate(-50%,-50%) rotate(-8deg);
  font-family: var(--font-display);
  font-size: clamp(58px, 6.4vw, 92px);
  line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--ac) 75%, transparent);
  opacity: .85;
  transition: transform .6s var(--ease-out), opacity .4s;
  user-select: none;
  text-transform: uppercase;
}
.agent-slash {
  position: absolute;
  left: -25%; right: -25%;
  bottom: 34%;
  height: 3px;
  background: var(--ac);
  transform: rotate(-11deg) scaleX(.7);
  opacity: .75;
  transition: transform .55s var(--ease-out), opacity .35s;
}
.agent-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: .6;
}
.agent-sheen {
  position: absolute;
  top: -60%; left: -80%;
  width: 60%; height: 240%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: rotate(16deg);
  transition: left .75s var(--ease-out);
  pointer-events: none;
}
.agent-top {
  position: absolute;
  top: 11px; left: 11px; right: 11px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  z-index: 3;
}
.agent-tier {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1;
  padding: 4px 7px 3px;
  background: var(--ink-900);
  border: 1.5px solid var(--tc, var(--ink-500));
  color: var(--tc, var(--mute-300));
}
.agent-bot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 12px 11px;
  background: linear-gradient(to top, rgba(6,6,8,.96) 40%, transparent);
  z-index: 3;
}
.agent-name {
  font-family: var(--font-display);
  /* 125px card -> 12.5px name, 150px+ -> full 15px. Long two-part names such
     as "Alexandrina Sebastiane" still hold their word boundaries. */
  font-size: clamp(11px, 10cqw, 15px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -.015em;
  overflow-wrap: break-word;
}
.agent-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: clamp(8px, 7.2cqw, 9px);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ac);
  /* Never let the label row spill past the card: it degrades to one line
     rather than being sliced by the frame's overflow clip. */
  white-space: nowrap;
  overflow: hidden;
}
.agent-sub .sep { color: var(--mute-400); }
/* Inside a tier band the cards shrink to a 124px floor and the vertical flag
   on the right already states the specialty, so the duplicated label drops
   out instead of colliding with the edge. */
.tier-band-c .agent-sub .sep,
.tier-band-c .agent-sub .spec { display: none; }
.agent-flag {
  position: absolute;
  right: 0; top: 46%;
  z-index: 3;
  writing-mode: vertical-rl;
  padding: 9px 4px;
  background: var(--ac);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .3s, transform .35s var(--ease-out);
}
/* hover */
.agent:hover .agent-frame { border-color: var(--ac); transform: translateY(-6px); }
.agent:hover .agent-art { transform: scale(1.09); filter: saturate(1.15) contrast(1.05); }
.agent:hover .agent-mono { transform: translate(-50%,-50%) rotate(0deg) scale(1.06); opacity: 1; }
.agent:hover .agent-slash { transform: rotate(-11deg) scaleX(1); opacity: 1; }
.agent:hover .agent-sheen { left: 130%; }
.agent:hover .agent-flag { opacity: 1; transform: none; }

/* compact horizontal variant (roster rows) */
.agent-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1.5px solid var(--ink-700); background: var(--ink-850); transition: border-color .25s, background .25s, transform .25s; }
.agent-row:hover { border-color: var(--ac, var(--fluoro)); background: var(--ink-800); transform: translateX(4px); }
.agent-row-badge {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid var(--ac, var(--fluoro));
  color: var(--ac, var(--fluoro));
  font-family: var(--font-display);
  font-size: 15px;
  background: color-mix(in srgb, var(--ac, var(--fluoro)) 11%, transparent);
}
.agent-row-n { font-family: var(--font-display); font-size: 13.5px; text-transform: uppercase; }
.agent-row-m { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-400); margin-top: 3px; }

/* ---------- FILTER BAR ---------- */
/* This block is the single largest thing between a visitor and the first Agent
   card, so it is packed on purpose. Six groups of chips plus a search field
   wrapped to 380px at 1440 wide, which is 42% of a 900px viewport spent on
   controls. Tightening the row gap and the per-chip padding brings it to about
   230px without shrinking any label below its legible size. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 24px;
  padding: 13px 16px;
  background: var(--ink-850);
  border: 1.5px solid var(--ink-700);
  margin-bottom: 18px;
  position: relative;
}
.filters::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--fluoro);
}
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-lab {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mute-400);
}
.filter-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.fopt {
  padding: 4px 8px;
  border: 1px solid var(--ink-600);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute-300);
  transition: all .2s;
}
.fopt:hover { color: var(--paper); border-color: var(--mute-400); }
.fopt.on { background: var(--fluoro); border-color: var(--fluoro); color: var(--ink-900); font-weight: 700; }
.fopt[disabled] { opacity: .3; cursor: not-allowed; }

.search-wrap { position: relative; flex: 1 1 240px; min-width: 200px; }
.search-in {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background: var(--ink-800);
  border: 1.5px solid var(--ink-600);
  color: var(--paper);
  font-size: 12.5px;
  transition: border-color .25s;
}
.search-in::placeholder { color: var(--mute-400); }
.search-in:focus { outline: none; border-color: var(--fluoro); }
.search-ic {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--mute-400);
  pointer-events: none;
}
.result-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute-400);
}
.result-line b { color: var(--fluoro); }

/* empty */
.empty {
  padding: 70px 24px;
  text-align: center;
  border: 1.5px dashed var(--ink-600);
  background: var(--ink-850);
}
.empty-t { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; margin-top: 14px; }

/* ============================================================
   AGENT DETAIL (full page)
   ============================================================ */
.detail-top {
  position: relative;
  padding: 34px 0 0;
  overflow: hidden;
  border-bottom: 1.5px solid var(--ink-700);
}
.detail-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 90% at 22% 12%, var(--ac, var(--fluoro)), transparent 62%);
  opacity: .16;
}
.detail-cols {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 46px;
  align-items: start;
  position: relative;
  z-index: 2;
}
.detail-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 2px solid var(--paper);
  background: var(--ink-850);
  overflow: hidden;
  clip-path: polygon(0 22px, 22px 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--ac) 55%, transparent);
}
.detail-portrait .agent-mono { font-size: clamp(110px, 12vw, 168px); }
.detail-portrait .agent-mono { opacity: .9; }

.crumb { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-400); }
.crumb a:hover { color: var(--fluoro); }
.crumb .sep { color: var(--mute-400); }

.detail-name {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: .86;
  text-transform: uppercase;
  letter-spacing: -.03em;
  margin-top: 18px;
}
.detail-real {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ac);
  margin-top: 10px;
}
.detail-tagrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.detail-bio { margin-top: 26px; font-size: 15.5px; color: var(--paper-dim); max-width: 640px; }

.detail-quickstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
  margin-top: 32px;
  border: 1.5px solid var(--ink-700);
}
.qs { padding: 16px 18px; border-right: 1.5px solid var(--ink-700); }
.qs:last-child { border-right: 0; }
.qs-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute-400); }
.qs-v { font-family: var(--font-display); font-size: 17px; margin-top: 8px; text-transform: uppercase; letter-spacing: -.01em; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; padding-bottom: 44px; }

/* disc detail (#/disc/<id>) — reuses the agent-detail scaffolding */
a.dtile, a.disc-card { color: inherit; text-decoration: none; display: block; }
.dhero { display: flex; gap: 30px; align-items: center; padding: 30px 0 6px; }
.dhero-art {
  flex: 0 0 230px; width: 230px; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(72% 72% at 50% 96%, var(--ac, var(--fluoro)), transparent 74%),
    var(--ink-900);
  border: 1.5px solid var(--ink-700);
}
.dhero-art img, .dhero-art .a-fallback, .dhero-art .tile-glyph {
  width: 80%; height: 80%; object-fit: contain;
}
.dhero-kind {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--fluoro);
}
.dhero-name {
  font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 46px);
  text-transform: uppercase; letter-spacing: -.015em; margin: 10px 0 12px;
}
.dhero-slots { color: var(--mute-400); font-size: 13px; }
.dhero-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.deff-row { display: flex; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--ink-700); }
.deff-row:last-child, .deff-row.is-4:last-child { border-bottom: 0; }
.deff-row b {
  flex: 0 0 44px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .12em; color: var(--fluoro); padding-top: 3px;
}
.deff-row.is-4 b { color: var(--ink-100); }
.deff-row span { font-size: 14px; line-height: 1.7; }
.dnav-a .v { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dnav-a:hover { border-color: var(--fluoro); }
@media (max-width: 760px) {
  .dhero { flex-direction: column; align-items: flex-start; }
  .dhero-art { width: 180px; flex-basis: auto; }
}

/* detail body */
.detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; padding: 56px 0 0; align-items: start; }
.dblock { margin-bottom: 44px; }
.dblock-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--ink-700);
  position: relative;
}
.dblock-h::after { content: ''; position: absolute; left: 0; bottom: -1.5px; width: 54px; height: 1.5px; background: var(--fluoro); }
.dblock-n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--fluoro);
  padding: 3px 7px;
  border: 1px solid var(--fluoro);
}
.dblock-t { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: -.01em; }

.disc-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.disc-card {
  position: relative;
  padding: 18px;
  border: 1.5px solid var(--ink-700);
  background: var(--ink-850);
  overflow: hidden;
}
.disc-card::before {
  content: '';
  position: absolute; right: -30px; top: -30px;
  width: 110px; height: 110px;
  border: 14px solid var(--ink-750);
  border-radius: 50%;
  opacity: .6;
}
.disc-card-tag {
  position: absolute; top: 0; right: 0;
  background: var(--fluoro); color: var(--ink-900);
  padding: 3px 9px;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .14em;
}
.disc-card-n { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; position: relative; }
.disc-card-f { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--mute-400); text-transform: uppercase; margin-top: 5px; position: relative; }
.disc-card-e { font-size: 12.5px; color: var(--paper-dim); margin-top: 12px; line-height: 1.6; position: relative; }

.team-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.team-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px;
  border: 1.5px solid var(--ink-600);
  background: var(--ink-850);
  font-size: 12.5px;
  transition: border-color .25s, transform .25s;
}
.team-chip:hover { border-color: var(--fluo, var(--fluoro)); transform: translateY(-2px); }
.team-chip i { width: 7px; height: 7px; background: var(--fluo, var(--fluoro)); flex: none; }

.prio-list { display: flex; flex-direction: column; gap: 10px; }
.prio {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid var(--ink-700);
  background: var(--ink-850);
}
.prio-n { font-family: var(--font-display); font-size: 15px; color: var(--fluoro); }
.prio-t { font-size: 13px; }

.tip-list { display: flex; flex-direction: column; gap: 12px; }
.tip-item { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 13.5px; color: var(--paper-dim); line-height: 1.65; }
.tip-item .mk { color: var(--fluoro); font-family: var(--font-mono); font-size: 12px; }
.tip-item.bad .mk { color: var(--hot); }

/* sticky side */
.detail-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
.side-card { border: 1.5px solid var(--ink-700); background: var(--ink-850); padding: 18px; }
.side-h { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--fluoro); margin-bottom: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--ink-700); }
.side-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--ink-700); font-size: 12.5px; }
.side-row:last-child { border-bottom: 0; }
.side-row .k { color: var(--mute-400); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.side-row .v { text-align: right; }

.attr-meter { display: flex; flex-direction: column; gap: 12px; }
.am-row { }
.am-top { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-400); margin-bottom: 6px; }

/* related strip */
.rel-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }

@media (max-width: 1080px) {
  .detail-cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .detail-portrait { max-width: 360px; }
  .detail-body { grid-template-columns: 1fr; }
  .detail-side { position: static; }
}
@media (max-width: 560px) {
  .disc-pick { grid-template-columns: 1fr; }
}

/* ============================================================
   TIER BOARD
   ============================================================ */
.tier-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.tier-band {
  --band-gap: 12px;
  display: grid;
  grid-template-columns: 128px 1fr;
  border: 1.5px solid var(--ink-700);
  margin-bottom: 14px;
  background: var(--ink-850);
  overflow: hidden;
  /* The band's auto row under-reports the nested auto-fill grid's content
     height by exactly one gap, so `overflow:hidden` was amputating the bottom
     11px of the last card row on every band. Reserving the gap restores it.
     Expressed as a variable so it cannot drift out of step with the grid gap
     set on `.tier-band-c` below. */
  padding-bottom: var(--band-gap);
}
.tier-band-l {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  border-right: 1.5px solid var(--ink-700);
  background: var(--ink-800);
  overflow: hidden;
}
.tier-band-l::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: -1px;
  width: 4px;
  background: var(--tc, var(--fluoro));
}
.tier-band-l .big {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: .85;
  color: var(--tc, var(--fluoro));
}
.tier-band-l .cap {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute-400);
  margin-top: 9px;
  text-align: center;
}
.tier-band-l .cnt {
  position: absolute; top: 8px; right: 10px;
  font-family: var(--font-mono); font-size: 9px; color: var(--mute-400);
}
.tier-band-c { padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--band-gap, 12px); }
@media (max-width: 700px) {
  .tier-band { grid-template-columns: 1fr; }
  .tier-band-l { flex-direction: row; gap: 12px; align-items: baseline; justify-content: flex-start; padding: 12px 16px; border-right: 0; border-bottom: 1.5px solid var(--ink-700); }
  .tier-band-l .cap { margin-top: 0; }
  .tier-band-l .big { font-size: 30px; }
  .tier-band-l::after { top: auto; left: 0; right: 0; bottom: -1px; width: auto; height: 3px; }
}

.tier-note {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  border: 1.5px solid var(--ink-700);
  margin-top: 34px;
}
.tier-note > div { padding: 20px; border-right: 1.5px solid var(--ink-700); }
.tier-note > div:last-child { border-right: 0; }
.tier-note h4 { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; margin-bottom: 9px; }
.tier-note p { font-size: 12.5px; color: var(--mute-300); line-height: 1.6; }

/* ============================================================
   CODES
   ============================================================ */
.code-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  border: 1.5px solid var(--ink-700);
  margin-bottom: 40px;
}
.code-stat { padding: 26px 24px; border-right: 1.5px solid var(--ink-700); }
.code-stat:last-child { border-right: 0; }
.code-stat .n { font-family: var(--font-display); font-size: 38px; line-height: 1; color: var(--fluoro); }
.code-stat .l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute-400); margin-top: 10px; }

.code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px 116px;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1.5px solid var(--ink-700);
  background: var(--ink-850);
  margin-bottom: 11px;
  transition: border-color .25s, transform .25s, background .25s;
  position: relative;
  overflow: hidden;
}
/* A code is a short string. At full bleed the left column swallows ~1000px and
   the row reads as two islands, so the list is capped to a comfortable measure. */
.code-list { max-width: 1040px; }
.code-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--fluoro);
  transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease-out);
}
.code-row:hover { border-color: var(--mute-400); transform: translateX(4px); background: var(--ink-800); }
.code-row:hover::before { transform: scaleY(1); }
.code-row.dead { opacity: .45; }
.code-row.dead::before { background: var(--mute-400); }
.code-txt { display: flex; align-items: center; gap: 14px; min-width: 0; }
.code-ic {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid var(--fluoro);
  color: var(--fluoro);
  background: rgba(232,255,35,.07);
}
.code-row.dead .code-ic { border-color: var(--mute-400); color: var(--mute-400); background: transparent; }
.code-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--paper);
  /* Was `break-all`, which turns a narrow column into a vertical ribbon of
     single characters. `anywhere` only breaks inside a word when the word
     cannot fit at all, so an unbreakable code still wraps instead of
     overflowing while normal words keep their shape. */
  overflow-wrap: anywhere;
}
.code-desc { font-size: 12px; color: var(--mute-400); margin-top: 4px; }
.code-rew { font-family: var(--font-mono); font-size: 11px; color: var(--fluoro); letter-spacing: .06em; }
.code-rew span { display: block; color: var(--mute-400); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 5px; }
/* An expired code's slot is a label, not a control. It shares the button's
   geometry so the column still reads as a column, but `.copy-btn` is reserved
   for buttons that actually copy — otherwise any audit or script that looks for
   `.copy-btn[data-code]` has to special-case a button that copies nothing. */
.copy-btn, .code-expired {
  padding: 10px;
  border: 1.5px solid var(--ink-500);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: all .22s;
  text-align: center;
}
.copy-btn:hover { background: var(--fluoro); border-color: var(--fluoro); color: var(--ink-900); font-weight: 700; }
.copy-btn.done { background: var(--success); border-color: var(--success); color: var(--ink-900); }
/* A terminal state, not a control. It was a `<button disabled>` — an element
   that announces itself as pressable and can never be pressed. As a span it
   also stops claiming the blocked-interaction cursor, which on a label reads
   as "you are missing a permission" rather than "this code is spent". */
.code-expired { opacity: .4; display: inline-block; text-align: center; }
@media (max-width: 860px) {
  .code-row { grid-template-columns: 1fr; gap: 12px; }
  .copy-btn, .code-expired { width: 100%; }
}

/* Compact code card — the grid variant.
   .code-row is a single full-width line: code | rewards | button. That shape
   only works when the container is wide enough for its two fixed columns
   (232 + 116 + gaps). Dropped into a three-column grid it is not, and the
   flexible column collapses to zero. This card stacks instead, so it has no
   fixed column to be starved of, and reads top-down: code, reward, action. */
.code-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 15px 15px;
  border: 1.5px solid var(--ink-700);
  background: var(--ink-850);
  position: relative;
  overflow: hidden;
  transition: border-color .25s, background .25s, transform .25s;
}
.code-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--fluoro);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s var(--ease-out);
}
.code-card:hover { border-color: var(--mute-400); background: var(--ink-800); transform: translateY(-2px); }
.code-card:hover::before { transform: scaleY(1); }
.code-card-top { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.code-card-ic { flex: none; color: var(--fluoro); font-size: 11px; }
.code-card-val {
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.28;
  color: var(--paper);
  /* a code is one unbreakable token, so let it break anywhere rather than
     push the card wider than its grid track */
  overflow-wrap: anywhere;
}
/* Takes the slack so the buttons of a row line up whatever the reward text
   length — without it a two-line reward pushes its own button down. */
.code-card-rew {
  flex: 1 1 auto;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--mute-300);
}
.code-card .copy-btn { width: 100%; flex: none; }

.step-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; border: 1.5px solid var(--ink-700); }
.step { padding: 24px; border-right: 1.5px solid var(--ink-700); position: relative; }
.step:last-child { border-right: 0; }
.step-n {
  font-family: var(--font-display); font-size: 34px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--fluoro);
  margin-bottom: 14px;
}
.step-t { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; margin-bottom: 8px; }
.step-d { font-size: 12.5px; color: var(--mute-300); line-height: 1.6; }
@media (max-width: 760px) { .step { border-right: 0; border-bottom: 1.5px solid var(--ink-700); } }

/* ============================================================
   GUIDE / ARTICLE
   ============================================================ */
.guide-card {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--ink-700);
  background: var(--ink-850);
  overflow: hidden;
  transition: border-color .3s, transform .35s var(--ease-out);
  height: 100%;
}
.guide-card:hover { border-color: var(--fluoro); transform: translateY(-5px); }
.guide-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1.5px solid var(--ink-700);
}
.guide-thumb-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 100% at 20% 0%, color-mix(in srgb, var(--gc, var(--fluoro)) 32%, transparent), transparent 70%),
    linear-gradient(160deg, var(--ink-800), var(--ink-900));
}
.guide-thumb-lines {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px);
}
.guide-thumb-glyph {
  position: absolute;
  right: 16px; bottom: 4px;
  font-family: var(--font-display);
  font-size: 76px; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--gc, var(--fluoro)) 65%, transparent);
  opacity: .5;
  transition: transform .6s var(--ease-out);
}
.guide-card:hover .guide-thumb-glyph { transform: translateY(-8px) rotate(-5deg); }
.guide-cat {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px;
  background: var(--gc, var(--fluoro));
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 8.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.guide-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.guide-title { font-family: var(--font-display); font-size: 16px; line-height: 1.15; text-transform: uppercase; letter-spacing: -.01em; }
.guide-desc { font-size: 12.5px; color: var(--mute-300); margin-top: 10px; line-height: 1.6; flex: 1; }
.guide-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 13px;
  border-top: 1px dashed var(--ink-700);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-400);
}

/* article */
.article-head { padding: 44px 0 34px; border-bottom: 1.5px solid var(--ink-700); position: relative; overflow: hidden; }
.article-head::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 85% 0%, color-mix(in srgb, var(--gc, var(--fluoro)) 22%, transparent), transparent 66%);
  pointer-events: none;
}
.article-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.6vw, 56px);
  line-height: .94; text-transform: uppercase; letter-spacing: -.028em;
  margin-top: 16px; position: relative;
}
.article-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-400); position: relative; }
/* minmax(0,1fr) rather than 1fr: a bare 1fr track floors at min-content, and the
   min-content width of a data table is larger than a phone, which would push the
   whole page into horizontal scroll instead of letting the table scroll itself. */
.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 46px; padding: 46px 28px 0; align-items: start; }
.article-side { position: sticky; top: 84px; min-width: 0; }

.prose { font-size: 15.5px; line-height: 1.78; color: var(--paper-dim); min-width: 0; }
.prose > * + * { margin-top: 18px; }
.prose h2 {
  font-family: var(--font-display);
  font-size: 25px; line-height: 1.1; text-transform: uppercase; letter-spacing: -.02em;
  color: var(--paper);
  margin-top: 46px; padding-top: 20px;
  border-top: 1.5px solid var(--ink-700);
  position: relative;
}
.prose h2::before {
  content: ''; position: absolute; top: -1.5px; left: 0;
  width: 46px; height: 3px; background: var(--fluoro);
}
.prose h3 { font-family: var(--font-display); font-size: 17px; text-transform: uppercase; color: var(--paper); margin-top: 32px; letter-spacing: -.01em; }
.prose strong { color: var(--paper); font-weight: 600; }
.prose em { color: var(--fluoro); font-style: normal; font-family: var(--font-mono); font-size: .9em; letter-spacing: .04em; }
.prose ul, .prose ol { padding-left: 0; }
.prose li { position: relative; padding-left: 22px; margin-top: 9px; }
.prose ul > li::before {
  content: '';
  position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px;
  background: var(--fluoro);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.prose ol { counter-reset: ol; }
.prose ol > li { counter-increment: ol; }
.prose ol > li::before {
  content: counter(ol, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 10px; color: var(--fluoro); letter-spacing: .05em;
}
.prose a { color: var(--fluoro); border-bottom: 1px solid rgba(232,255,35,.35); }
.prose a:hover { border-color: var(--fluoro); }

.callout {
  border: 1.5px solid var(--ink-600);
  border-left: 3px solid var(--fc, var(--fluoro));
  background: var(--ink-850);
  padding: 18px 20px;
  font-size: 13.5px;
  line-height: 1.7;
}
.callout-h {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fc, var(--fluoro)); margin-bottom: 9px;
}
.callout.warn { --fc: var(--warn); }
.callout.bad { --fc: var(--hot); }
.callout.good { --fc: var(--success); }

.datatable { border: 1.5px solid var(--ink-700); font-size: 13px; overflow-x: auto; }
.datatable th {
  background: var(--ink-800);
  text-align: left;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fluoro);
  border-bottom: 1.5px solid var(--ink-600);
  white-space: nowrap;
}
.datatable td { padding: 12px 14px; border-bottom: 1px solid var(--ink-750); vertical-align: top; }
.datatable tr:last-child td { border-bottom: 0; }
.datatable tr:hover td { background: var(--ink-800); }

.toc { display: flex; flex-direction: column; gap: 2px; }
.toc a {
  display: block; padding: 8px 12px;
  font-size: 12.5px; color: var(--mute-300);
  border-left: 2px solid var(--ink-700);
  transition: all .22s;
}
.toc a:hover { color: var(--paper); border-left-color: var(--fluoro); background: var(--ink-800); transform: translateX(3px); }

@media (max-width: 1080px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-side { position: static; }
}

/* Phones: the table keeps its own horizontal scroll, but the cells tighten so
   more of a row is legible before you have to swipe. */
@media (max-width: 640px) {
  .article-layout { padding-left: 18px; padding-right: 18px; }
  .prose { font-size: 15px; line-height: 1.72; }
  .prose h2 { font-size: 21px; margin-top: 34px; }
  .prose h3 { font-size: 17px; }
  .datatable { font-size: 12.5px; }
  .datatable th { padding: 10px 11px; font-size: 8.5px; letter-spacing: .1em; }
  .datatable td { padding: 10px 11px; }
}

/* ============================================================
   GEAR / DISC / BANGBOO / ENGINE CARDS
   ============================================================ */
.gear {
  position: relative;
  border: 1.5px solid var(--ink-700);
  background: var(--ink-850);
  padding: 22px;
  overflow: hidden;
  transition: border-color .3s, transform .35s var(--ease-out);
}
.gear:hover { border-color: var(--gc, var(--fluoro)); transform: translateY(-4px); }
.gear::after {
  content: '';
  position: absolute; right: -46px; bottom: -46px;
  width: 140px; height: 140px;
  border: 16px solid color-mix(in srgb, var(--gc, var(--fluoro)) 12%, transparent);
  border-radius: 50%;
  transition: transform .7s var(--ease-out);
}
.gear:hover::after { transform: scale(1.16) rotate(24deg); }
.gear-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; position: relative; }
.gear-name { font-family: var(--font-display); font-size: 17px; line-height: 1.1; text-transform: uppercase; letter-spacing: -.01em; position: relative; }
.gear-kind {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid var(--gc, var(--fluoro)); color: var(--gc, var(--fluoro));
  white-space: nowrap; flex: none;
}
.gear-eff { margin-top: 16px; position: relative; }
.gear-eff-row { display: grid; grid-template-columns: 42px 1fr; gap: 11px; padding: 9px 0; border-top: 1px dashed var(--ink-700); }
.gear-eff-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--gc, var(--fluoro)); padding-top: 2px; }
.gear-eff-v { font-size: 12.5px; color: var(--paper-dim); line-height: 1.6; }

.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px; }
.mini {
  padding: 14px 16px;
  border: 1.5px solid var(--ink-700);
  background: var(--ink-850);
  transition: border-color .25s, transform .25s;
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
.mini:hover { border-color: var(--mc, var(--fluoro)); transform: translateX(3px); }
.mini-n { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: -.01em; }
.mini-m { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-400); margin-top: 4px; }
.mini-v { font-family: var(--font-mono); font-size: 10px; color: var(--mc, var(--fluoro)); white-space: nowrap; }

/* ============================================================
   MODES / TEAM / GLOSSARY
   ============================================================ */
.mode {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 20px;
  padding: 24px;
  border: 1.5px solid var(--ink-700);
  background: var(--ink-850);
  transition: border-color .3s, background .3s;
}
.mode:hover { border-color: var(--mc, var(--fluoro)); background: var(--ink-800); }
.mode-ic {
  width: 74px; height: 74px;
  display: grid; place-items: center;
  border: 1.5px solid var(--mc, var(--fluoro));
  color: var(--mc, var(--fluoro));
  font-family: var(--font-display);
  font-size: 24px;
  background: color-mix(in srgb, var(--mc, var(--fluoro)) 9%, transparent);
}
.mode-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mode-t { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: -.01em; }
.mode-badge { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-400); border: 1px solid var(--ink-600); padding: 2px 7px; }
.mode-d { font-size: 13px; color: var(--mute-300); margin-top: 11px; line-height: 1.65; }
.mode-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--ink-700); }
.mode-fact { font-size: 11.5px; }
.mode-fact span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-400); display: block; margin-bottom: 4px; }

.gloss-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ink-750);
  transition: background .25s;
}
.gloss-row:hover { background: var(--ink-850); }
.gloss-t { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: -.01em; }
.gloss-t small { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; color: var(--fluoro); margin-top: 5px; text-transform: uppercase; }
.gloss-d { font-size: 13.5px; color: var(--mute-300); line-height: 1.7; }
@media (max-width: 620px) { .gloss-row { grid-template-columns: 1fr; gap: 8px; } }

/* roster matrix */
.matrix { border: 1.5px solid var(--ink-700); overflow-x: auto; }
.matrix table { min-width: 720px; }
.matrix th, .matrix td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--ink-750); font-size: 12.5px; }
.matrix th { background: var(--ink-800); font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fluoro); border-bottom: 1.5px solid var(--ink-600); }
.matrix tbody tr { transition: background .2s; }
.matrix tbody tr:hover { background: var(--ink-800); }
.matrix .nm { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; }
.dot-attr { display: inline-flex; align-items: center; gap: 7px; }
.dot-attr i { width: 8px; height: 8px; background: var(--a, var(--fluoro)); flex: none; transform: rotate(45deg); }

/* team card */
.teamc {
  border: 1.5px solid var(--ink-700);
  background: var(--ink-850);
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, transform .35s var(--ease-out);
}
.teamc:hover { border-color: var(--tc, var(--fluoro)); transform: translateY(-4px); }
.teamc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.teamc-t { font-family: var(--font-display); font-size: 17px; text-transform: uppercase; letter-spacing: -.01em; }
.teamc-arch { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tc, var(--fluoro)); }
.teamc-d { font-size: 12.5px; color: var(--mute-300); margin-top: 12px; line-height: 1.6; }
.teamc-slots { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 18px; }
.slot {
  border: 1.5px solid var(--ink-700);
  background: var(--ink-900);
  padding: 12px 10px;
  text-align: center;
  transition: border-color .25s, transform .25s;
}
.slot:hover { border-color: var(--sc, var(--fluoro)); transform: translateY(-3px); }
.slot-badge {
  width: 40px; height: 40px;
  margin: 0 auto 10px;
  display: grid; place-items: center;
  border: 1.5px solid var(--sc, var(--fluoro));
  color: var(--sc, var(--fluoro));
  font-family: var(--font-display); font-size: 14px;
  background: color-mix(in srgb, var(--sc, var(--fluoro)) 12%, transparent);
}
.slot-r { font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-400); }
.slot-n { font-family: var(--font-display); font-size: 11.5px; text-transform: uppercase; margin-top: 5px; line-height: 1.15; overflow-wrap: break-word; min-width: 0; }
.teamc-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 15px; border-top: 1px dashed var(--ink-700); }

/* roadmap */
.road { position: relative; padding-left: 28px; }
.road::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1.5px; background: var(--ink-700); }
.road-step { position: relative; padding-bottom: 30px; }
.road-step::before {
  content: ''; position: absolute; left: -28px; top: 6px;
  width: 13px; height: 13px;
  background: var(--ink-900);
  border: 2px solid var(--fluoro);
  transform: rotate(45deg);
}
.road-step.done::before { background: var(--fluoro); }
.road-step h4 { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: -.01em; }
.road-step p { font-size: 13px; color: var(--mute-300); margin-top: 8px; line-height: 1.65; }
.road-lv { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fluoro); margin-bottom: 6px; }

/* legal strip */
.legal {
  border: 1.5px dashed var(--ink-600);
  padding: 18px 20px;
  font-size: 12px;
  color: var(--mute-400);
  line-height: 1.7;
  background: var(--ink-850);
}

/* ---------- ATMOSPHERE HALFTONE (added by initAtmos) ---------- */
.atmos-halftone {
  position: absolute;
  inset: 0;
  opacity: .035;
  background-image: radial-gradient(circle, #fff 1px, transparent 1.3px);
  background-size: 4px 4px;
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: rgba(4,4,6,.86);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 20px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease-out);
}
.overlay.on { opacity: 1; pointer-events: auto; }
.overlay-panel {
  width: 100%;
  max-width: 720px;
  background: var(--ink-850);
  border: 1.5px solid var(--ink-600);
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
  transform: translateY(-14px) scale(.99);
  transition: transform .34s var(--ease-out);
  display: flex;
  flex-direction: column;
  max-height: 78vh;
  clip-path: polygon(0 18px, 18px 0, 100% 0, 100% 100%, 0 100%);
}
.overlay.on .overlay-panel { transform: none; }
.overlay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1.5px solid var(--ink-700);
}
.overlay-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fluoro);
}
.overlay-x {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute-400);
  transition: color .2s;
}
.overlay-x:hover { color: var(--paper); }
.overlay .search-in {
  border: 0;
  border-bottom: 1.5px solid var(--ink-700);
  background: transparent;
  padding: 20px 22px;
  font-size: 17px;
}
.overlay .search-in:focus { border-color: var(--fluoro); }
.overlay-results { overflow-y: auto; padding: 8px; }
.ov-row {
  --oc: var(--fluoro);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 13px;
  border-left: 2px solid transparent;
  transition: background .18s, border-color .18s, transform .18s;
}
.ov-row:hover { background: var(--ink-800); border-left-color: var(--oc); transform: translateX(3px); }
.ov-dot { width: 8px; height: 8px; background: var(--oc); transform: rotate(45deg); flex: none; }
.ov-main { display: flex; flex-direction: column; min-width: 0; }
.ov-main b { font-family: var(--font-display); font-size: 13.5px; text-transform: uppercase; letter-spacing: -.01em; }
.ov-main i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute-400);
  margin-top: 4px;
}
.ov-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute-400);
  border: 1px solid var(--ink-600);
  padding: 2px 7px;
  flex: none;
}
.ov-empty { padding: 40px 20px; text-align: center; color: var(--mute-400); font-size: 13px; }
.overlay-foot {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1.5px solid var(--ink-700);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute-400);
}

/* highlight for search-scrolled agent cards */
.agent.flash .agent-frame { border-color: var(--fluoro); box-shadow: 0 0 0 2px rgba(232,255,35,.25); }

/* ============================================================
   NOT FOUND — recovery screen
   A dead link should still feel like part of the archive, so the
   404 borrows the same atmosphere stack as the hero and offers a
   real exit: primary routes plus a slice of the top of the board.
   ============================================================ */
.notfound {
  position: relative;
  overflow: hidden;
  border-bottom: var(--border);
  padding: 54px 0 76px;
}
.nf-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(232,255,35,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,255,35,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 70% 62% at 50% 32%, #000 12%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 32%, #000 12%, transparent 78%);
}
.nf-glow {
  position: absolute; z-index: 0; pointer-events: none; left: 50%; top: -14%;
  width: 760px; height: 420px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(232,255,35,.13), transparent 66%);
  filter: blur(28px);
}
.nf-inner { position: relative; z-index: 1; }

.nf-code {
  font-family: var(--font-display);
  font-size: clamp(88px, 19vw, 232px);
  line-height: .82;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink-500);
  margin: 18px 0 0;
  user-select: none;
}
.nf-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 5.4vw, 62px);
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 2px 0 0;
}
.nf-sub {
  max-width: 640px;
  margin-top: 14px;
  color: var(--mute-300);
  font-size: 14.5px;
  line-height: 1.72;
}
.nf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.nf-caption {
  margin: 52px 0 16px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mute-400);
  padding-left: 14px;
  position: relative;
}
.nf-caption::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  background: var(--fluoro);
  transform: rotate(45deg);
}

.nf-dock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
}
.nf-card {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 16px 18px;
  background: var(--ink-850);
  border: var(--border);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: transform .34s var(--ease-out), border-color .24s ease, background .24s ease;
}
.nf-card::after {
  content: ''; position: absolute; left: 16px; bottom: 12px;
  width: 20px; height: 2px; background: var(--ink-500);
  transition: width .34s var(--ease-out), background .24s ease;
}
.nf-card:hover {
  transform: translate(-3px, -3px);
  border-color: var(--fluoro);
  background: var(--ink-800);
}
.nf-card:hover::after { width: 46px; background: var(--fluoro); }
.nf-k {
  font-family: var(--font-mono);
  font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mute-400);
  transition: color .24s ease;
}
.nf-card:hover .nf-k { color: var(--fluoro); }
.nf-t {
  font-family: var(--font-condensed);
  font-size: 21px; letter-spacing: .03em; line-height: 1.05;
  color: var(--paper);
}
.nf-d {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute-400);
}

.nf-roster { display: flex; flex-wrap: wrap; gap: 9px; }
.nf-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--ink-600);
  background: var(--ink-850);
  font-family: var(--font-condensed);
  font-size: 15px; letter-spacing: .04em;
  color: var(--paper-dim);
  transition: transform .26s var(--ease-out), border-color .22s ease, color .22s ease;
}
.nf-chip .nf-dot {
  width: 7px; height: 7px; flex: none;
  background: var(--ac, var(--fluoro));
  box-shadow: 0 0 8px var(--ac, var(--fluoro));
  transform: rotate(45deg);
}
.nf-chip:hover { transform: translateY(-3px); border-color: var(--ac); color: #fff; }

@media (max-width: 620px) {
  .nf-actions .btn { width: 100%; justify-content: center; }
  .nf-code { -webkit-text-stroke-width: 1.4px; }
}

/* disc detail modal (opened from any [data-disc] tile) */
.dmodal { position: fixed; inset: 0; z-index: 90; display: none; }
.dmodal.on { display: block; }
.dmodal-back { position: absolute; inset: 0; background: rgba(8, 9, 12, .78); backdrop-filter: blur(3px); }
.dmodal-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1020px, calc(100vw - 32px)); max-height: min(86vh, 900px);
  display: flex; flex-direction: column;
  background: var(--ink-850); border: 1.5px solid var(--ink-700); overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.dmodal-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; font-size: 20px; line-height: 1;
  color: var(--mute-400); background: var(--ink-900); border: 1.5px solid var(--ink-700); cursor: pointer;
}
.dmodal-x:hover { color: var(--paper); border-color: var(--fluoro); }
.dmodal-body { overflow-y: auto; padding: 34px 38px 40px; }
.dmodal .dhero { padding: 0 0 8px; }
.dmodal .dhero-art { flex: 0 0 170px; width: 170px; }
.dmodal .dhero-name { font-size: clamp(26px, 3vw, 34px); }
.dmodal .detail-body { padding-top: 30px; gap: 32px; }
html.dmodal-lock { overflow: hidden; }
@media (max-width: 760px) {
  .dmodal-body { padding: 26px 18px 30px; }
  .dmodal .detail-body { grid-template-columns: 1fr; }
}

/* ============================================================
   SEO CONTENT MODULES — rotation steps, team cards, FAQ
   ============================================================ */

/* Rotation steps */
.rot-steps { display: flex; flex-direction: column; gap: 10px; }
.rot-step { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; background: var(--bg-200); border: 1px solid var(--line-200); border-radius: 8px; }
.rot-step:hover { border-color: var(--ac, var(--fluoro)); }
.rot-n { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--ac, var(--fluoro)); flex: none; min-width: 28px; padding-top: 1px; }
.rot-t { font-size: 13.5px; line-height: 1.65; color: var(--text-200); }

/* Team composition cards */
.team-cards { display: flex; flex-direction: column; gap: 12px; }
.team-card { background: var(--bg-200); border: 1px solid var(--line-200); border-radius: 10px; padding: 14px 16px; }
.team-card:hover { border-color: var(--ac, var(--fluoro)); }
.tc-head { margin-bottom: 10px; }
.tc-tag { display: inline-block; font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ac, var(--fluoro)); background: color-mix(in srgb, var(--ac, var(--fluoro)) 12%, transparent); padding: 3px 10px; border-radius: 4px; }
.tc-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tc-agent { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; background: var(--bg-300); border: 1px solid var(--line-200); border-radius: 20px; font-size: 12.5px; color: var(--text-100); text-decoration: none; transition: border-color .15s, transform .15s; }
.tc-agent:hover { border-color: var(--mc, var(--fluoro)); transform: translateY(-1px); }
.tc-agent img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.tc-init { width: 22px; height: 22px; border-radius: 50%; background: var(--mc, var(--fluoro)); color: #000; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.tc-role { background: color-mix(in srgb, var(--mc, var(--fluoro)) 15%, transparent); border-color: color-mix(in srgb, var(--mc, var(--fluoro)) 40%, transparent); }
.tc-sep { color: var(--mute-400); font-size: 14px; font-weight: 300; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: var(--bg-200); border: 1px solid var(--line-200); border-radius: 8px; overflow: hidden; }
.faq-item summary { padding: 14px 16px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-100); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 20px; font-weight: 300; color: var(--mute-400); flex: none; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--fluoro); }
.faq-item p { padding: 0 16px 16px; margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-200); }
.faq-item[open] { border-color: var(--line-300); }