/* ============================================================================
   ATOMIC LAB — CATEGORY (element family) PAGE
   ========================================================================== */

.pg-cat { --sect-y: clamp(2.75rem, 5vw, 5rem); }

/* --- Hero --------------------------------------------------------------- */
.cat-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(1.25rem, 3vw, 2.25rem));
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
}
.cat-hero__glow {
  position: absolute; inset: -35% -10% auto -10%; height: 130%;
  background:
    radial-gradient(45% 55% at 20% 28%, color-mix(in srgb, var(--fam, var(--beam)) 22%, transparent), transparent 70%),
    radial-gradient(55% 45% at 88% 12%, rgba(169,139,255,0.09), transparent 70%);
  z-index: -1; pointer-events: none;
}
.cat-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.cat-hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 4rem); line-height: 1.02;
  letter-spacing: -0.045em; margin-top: 0.85rem;
}
.cat-hero__lede { margin-top: 1.1rem; }

.cat-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: 1px; margin-top: 1.75rem;
  background: var(--edge-soft); border: 1px solid var(--edge-soft);
  border-radius: var(--r-3); overflow: hidden; max-width: 520px;
}
.cat-stats > div { padding: 0.8rem 0.9rem; background: rgba(6,9,16,0.55); }
.cat-stats dt { font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.cat-stats dd { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 0.15rem; color: var(--fam, var(--beam)); }

.cat-hero__map { padding: clamp(0.75rem, 2vw, 1.15rem); border: 1px solid var(--edge); border-radius: var(--r-4); background: rgba(255,255,255,0.018); }
.cat-hero__mapnote { font-size: var(--t-3xs); text-align: center; margin-top: 0.75rem; letter-spacing: 0.12em; }

@media (max-width: 900px) { .cat-hero__grid { grid-template-columns: 1fr; } }

/* --- Members ------------------------------------------------------------ */
.memgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0.7rem; }

.mem {
  position: relative;
  display: grid;
  grid-template-areas: 'z tags' 'sym sym' 'name name' 'mass mass' 'sig sig';
  align-content: start;
  gap: 0.15rem;
  padding: 1rem 1.15rem 1.15rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-3);
  background: linear-gradient(165deg, color-mix(in srgb, var(--fam, var(--beam)) 11%, transparent), rgba(255,255,255,0.015) 62%);
  overflow: hidden;
  transition: transform var(--d-2) var(--e-out), border-color var(--d-2), box-shadow var(--d-2);
}
.mem::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--fam, var(--beam)); opacity: 0.7;
}
.mem:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--fam, var(--beam)) 45%, transparent);
  box-shadow: var(--lift-2);
}
.mem__z { grid-area: z; font-size: var(--t-3xs); color: var(--ink-3); }
.mem__sym {
  grid-area: sym;
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.1rem; line-height: 1.05; letter-spacing: -0.04em;
  color: #fff; margin-top: 0.15rem;
}
.mem__name { grid-area: name; font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.mem__mass { grid-area: mass; font-size: var(--t-3xs); color: var(--ink-3); }
.mem__sig {
  grid-area: sig; margin-top: 0.6rem;
  font-size: var(--t-2xs); line-height: 1.55; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mem__tags { grid-area: tags; display: flex; gap: 0.25rem; justify-self: end; flex-wrap: wrap; }
.mem__tag {
  font-family: var(--font-mono); font-style: normal;
  font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.15rem 0.4rem; border-radius: var(--r-1);
  color: var(--ink-3); border: 1px solid var(--edge);
}
.mem__tag--rad { color: var(--warn); border-color: rgba(255,201,77,0.35); }
.mem__tag--syn { color: var(--danger); border-color: rgba(255,95,118,0.35); }

/* --- Trend -------------------------------------------------------------- */
.cat-trend { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.cat-trend__chart canvas { width: 100%; aspect-ratio: 16 / 9; display: block; }
@media (max-width: 880px) { .cat-trend { grid-template-columns: 1fr; } }

/* --- Uses --------------------------------------------------------------- */
.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0.85rem; }
.use {
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--edge); border-radius: var(--r-3);
  background: rgba(255,255,255,0.018);
  transition: border-color var(--d-2), background var(--d-2);
}
.use:hover { border-color: color-mix(in srgb, var(--fam, var(--beam)) 35%, transparent); background: color-mix(in srgb, var(--fam, var(--beam)) 6%, transparent); }
.use__h { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; color: var(--fam, var(--beam)); margin-bottom: 0.5rem; }
.use__b { font-size: var(--t-sm); line-height: 1.65; color: var(--ink-2); }

/* --- Split -------------------------------------------------------------- */
.cat-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0.85rem; align-items: start; }
@media (max-width: 860px) { .cat-split { grid-template-columns: 1fr; } }

/* Dimmed non-family tiles on the hero map */
.cat-hero__map .ptable .el.is-off { opacity: 0.1; }
.cat-hero__map .ptable .el:not(.is-off) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 75%, transparent), 0 0 18px -4px var(--c); }

.guide__n {
  position: absolute; top: 1.1rem; left: 1.25rem;
  font-size: var(--t-2xs); letter-spacing: 0.2em;
  color: var(--fam, var(--beam)); opacity: 0.85;
}
.grid-3 .card { padding-top: 2.6rem; }