/* Psychopedia — landing only. The legal pages keep the leaner styles.css shell. */

.shell, .hero, .band, .closing { max-width: 1180px; margin: 0 auto; }
.shell { padding: 44px 0 0; }
.hero { padding: clamp(40px, 6vw, 72px) 0 0; }
.kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 clamp(20px, 3vw, 34px);
}
.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--text);
  /* One dominant idea per fold: the headline is allowed to be enormous. */
  font-size: clamp(38px, 7.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 15ch;
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--brand);
}
.hero .lead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  max-width: 56ch;
  margin: clamp(20px, 2.6vw, 30px) 0 0;
}

/* The map is the product's own data, not decoration: every droplet is a real
   published case at its real coordinates. */
.atlas {
  margin: clamp(28px, 5vw, 60px) 0 0;
  position: relative;
}
.atlas svg { display: block; width: 100%; height: auto; }
.m-mafia { fill: #a855f7; }
.m-heist { fill: #ffb000; }
.m-murder { fill: #e50914; }
.m-serial { fill: #ff4d6d; }
.m-mystery { fill: #00e5ff; }
.m-civic { fill: #ff8a00; }
.atlas g { opacity: 0.92; }
.cy {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  fill: #cfcfcf;
}
.cn { fill: var(--text-3); }
.atlas figcaption {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 14px;
}

/* Legend doubles as the category vocabulary the map uses. */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.legend li { display: flex; align-items: center; gap: 8px; }
.legend svg { display: block; flex: none; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: clamp(34px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.facts dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.facts dd {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 40px);
  color: var(--text);
  margin: 4px 0 0;
  line-height: 1;
}

/* Sections: asymmetric two-column, label rail on the left. */
.band { padding: clamp(56px, 9vw, 116px) 0 0; }
.band > h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.12;
  color: var(--text);
  margin: 0 0 clamp(24px, 3vw, 40px);
  max-width: 22ch;
}
.rail { display: grid; gap: clamp(28px, 4vw, 52px); }
@media (min-width: 760px) {
  .rail { grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
}
.rail h3 {
  font-family: var(--display);
  font-size: 21px;
  color: var(--text);
  margin: 0 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.rail p { margin: 0; max-width: 46ch; }

.standards { display: grid; gap: 18px; padding: 0; margin: 0; list-style: none; }
@media (min-width: 760px) {
  .standards { grid-template-columns: 1fr 1fr; gap: 22px 48px; }
}
.standards li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  max-width: 52ch;
}
.standards svg { margin-top: 5px; flex: none; }
.standards strong { color: var(--text); font-weight: 500; }

.closing { padding: clamp(56px, 9vw, 112px) 0 clamp(64px, 8vw, 104px); }
.closing h2 {
  font-family: var(--display);
  font-size: clamp(24px, 3.2vw, 38px);
  color: var(--text);
  margin: 0 0 10px;
  max-width: 20ch;
}
.legalrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); animation: rise 0.72s cubic-bezier(0.2, 0, 0, 1) forwards; }
  .reveal:nth-child(2) { animation-delay: 0.08s; }
  .reveal:nth-child(3) { animation-delay: 0.16s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}