/* ═══════════════════════════════════════════════════════════════════════════
   RESEARCH, components on top of styles.css.
   Load order: styles.css first (tokens, type, chrome), then this.

   Follows the three surfaces in research/DESIGN-SYSTEM.md §3:
     index  → topic list with honest status
     article → the readable story
     interactive → the explorable (not built yet)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── theme groups ── */
.theme{padding:0 0 66px;position:relative;z-index:6}
.theme__bar{display:flex;align-items:baseline;gap:16px;padding-bottom:16px;margin-bottom:26px;
  border-bottom:1px solid var(--line)}
.theme__bar h2{font-size:clamp(21px,2.2vw,27px);letter-spacing:-.012em}
.theme__bar .count{font-family:var(--data);font-size:9.5px;letter-spacing:.22em;color:var(--dim);
  margin-left:auto}

/* ── topic cards ── */
.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.topics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.topics{grid-template-columns:1fr}}

.topic{display:flex;flex-direction:column;border:1px solid var(--line);padding:24px 22px;
  text-decoration:none;position:relative;min-height:200px;
  opacity:0;transform:translateY(16px);
  transition:border-color calc(var(--gait)*.7),background calc(var(--gait)*.7),
             transform calc(var(--gait)*.7)}
.topic.in{animation:step calc(var(--gait)*1.3) cubic-bezier(.2,.9,.25,1) forwards}
.topic:nth-child(2).in{animation-delay:calc(var(--gait)*.4)}
.topic:nth-child(3).in{animation-delay:calc(var(--gait)*.8)}
/* Only a published topic is a link, so hover only lifts where there is
   somewhere to go. A card that lifts and then does nothing is a small lie. */
a.topic:hover{border-color:rgba(95,224,168,.45);background:var(--void2);transform:translateY(-4px)}
.topic__top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.topic__tag{font-family:var(--data);font-size:9px;letter-spacing:.2em;color:var(--dim)}
.topic h3{font-size:19px;line-height:1.16;margin-bottom:10px;letter-spacing:-.012em}
.topic p{font-size:14.5px;line-height:1.6;color:var(--dim);margin-bottom:18px}
.topic__foot{margin-top:auto;display:flex;align-items:center;gap:12px;
  font-family:var(--data);font-size:9.5px;letter-spacing:.16em;color:var(--dim)}
.topic__foot .go{margin-left:auto;color:var(--scan)}

/* ── status pills: never fake a link ── */
.pill{font-family:var(--data);font-size:8.5px;letter-spacing:.2em;padding:4px 9px;
  border:1px solid;border-radius:999px;white-space:nowrap}
.pill--live{color:var(--scan);border-color:rgba(95,224,168,.5);background:rgba(95,224,168,.08)}
.pill--wip{color:var(--amber);border-color:rgba(217,164,65,.45);background:rgba(217,164,65,.07)}
.pill--plan{color:var(--dimmer);border-color:var(--line)}
.badge-int{font-family:var(--data);font-size:8.5px;letter-spacing:.18em;color:var(--ember);
  border:1px solid rgba(200,85,47,.4);border-radius:999px;padding:4px 9px}

/* ═══ ARTICLE ═══════════════════════════════════════════════════════════════ */
.article{max-width:760px;margin:0 auto;padding:0 34px;position:relative;z-index:6}
.article__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.article h1{font-size:clamp(34px,4.4vw,58px);margin-bottom:18px}
/* the "so what", set as its own object rather than buried in the abstract */
.sowhat{font-family:var(--text);font-size:21px;line-height:1.5;color:var(--bone);
  border-left:3px solid var(--scan);padding-left:20px;margin:0 0 34px -23px}

/* chips row, the three things a reader might actually want to do */
.chips{display:flex;gap:10px;flex-wrap:wrap;padding:22px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:42px}

/* authors: who stands behind the work */
.writers{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:44px}
@media(max-width:640px){.writers{grid-template-columns:1fr}}
.writer{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);padding:16px}
.writer .ini{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);font-family:var(--poster);font-size:17px;color:var(--scan)}
.writer h4{font-size:15px;margin-bottom:3px;font-family:var(--poster);font-weight:400;
  letter-spacing:-.005em}
.writer .div{font-family:var(--data);font-size:9px;letter-spacing:.18em;color:var(--dim);
  margin-bottom:6px}
.writer p{font-size:13px;line-height:1.55;color:var(--dim)}

.prose h2{font-size:clamp(24px,2.8vw,32px);margin:52px 0 16px;letter-spacing:-.015em}
.prose p{font-size:17.5px;line-height:1.78;color:#C4CFC9;margin-bottom:20px}
.prose p strong{color:var(--bone);font-weight:600}

/* "What this doesn't show", a visible limitations block builds credibility,
   and it is the section our own design doc says every article must carry. */
.limits{border:1px solid rgba(217,164,65,.35);background:rgba(217,164,65,.05);
  padding:24px 24px 20px;margin:36px 0 8px}
.limits h3{font-size:17px;color:var(--amber);margin-bottom:12px}
.limits ul{list-style:none;display:grid;gap:9px}
.limits li{font-size:15px;line-height:1.6;color:#C4CFC9;padding-left:18px;position:relative}
.limits li::before{content:", ";position:absolute;left:0;color:var(--amber)}

/* separation of fact from interpretation, made structural */
.finding{border-left:2px solid var(--line2);padding-left:20px;margin:28px 0}
.finding .k{font-family:var(--data);font-size:9.5px;letter-spacing:.22em;color:var(--dim);
  margin-bottom:8px}

.figure{margin:38px 0;border:1px solid var(--line);background:var(--void2)}
.figure img{width:100%}
.figure figcaption{padding:14px 18px;font-size:13.5px;color:var(--dim);border-top:1px solid var(--line)}
.figure figcaption b{color:var(--bone);font-weight:600}

.cite{border:1px solid var(--line);padding:20px;margin:20px 0;background:var(--void2)}
.cite pre{font-family:var(--data);font-size:12px;line-height:1.7;color:#C4CFC9;
  white-space:pre-wrap;word-break:break-word}
.attrib{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:14px}
.attrib th,.attrib td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.attrib th{font-family:var(--data);font-size:9px;letter-spacing:.2em;color:var(--dim);font-weight:400}
.attrib td{color:var(--dim)}

.readnext{border:1px solid var(--line2);padding:38px 30px;text-align:center;margin:56px 0 0;
  background:linear-gradient(180deg,var(--void2),var(--void))}
.readnext h3{font-size:clamp(22px,2.6vw,30px);margin-bottom:12px}
.readnext p{color:var(--dim);font-size:16px;max-width:44ch;margin:0 auto 24px}