/* Topic pages (/en/<topic>/, /fr/<sujet>/) — one page per subject the
   homepage "Explore by topic" cards point to: a short explanation, where
   things stand, key dates, and every Observer article on it in order.
   Built on observer.css tokens only, so dark mode works with no overrides. */

.topic {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s5) var(--s3) var(--s6);
}
.topic .back-link {
  display: inline-block;
  font: 700 11px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: var(--s4);
}
.topic .back-link:hover { color: var(--accent); }
@media (max-width: 560px) {
  /* phone tap target: 44px tall without moving the title down */
  .topic .back-link { display: inline-flex; align-items: center; min-height: 44px; margin: -16px 0 calc(var(--s4) - 16px); }
}

.topic-eyebrow {
  font: 700 11px/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s1);
}
.topic h1 {
  font-family: var(--serif-display);
  font-size: clamp(26px, 4.4vw, 38px);
  line-height: 1.18;
  margin: 0 0 var(--s2);
}
.topic-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font: 600 13px/1.4 var(--sans);
  color: var(--ink-soft);
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: var(--rule-heavy) double var(--line);
}
.topic .chip {
  font: 700 10.5px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: var(--rule-hair) solid currentColor;
}
.topic .chip-done { color: var(--ink); }
.topic .chip-open { color: var(--accent); }

.topic p { font-size: 17px; line-height: 1.65; margin: 0 0 var(--s3); }
.topic .topic-lede { font-size: 19px; }
.topic h2 {
  font-family: var(--serif-display);
  font-size: 21px;
  margin: var(--s5) 0 var(--s3);
  padding-bottom: var(--s1);
  border-bottom: var(--rule-hair) solid var(--hair);
}

/* Key dates: a plain dated list, date in a fixed left column. */
.topic-dates { list-style: none; margin: 0; padding: 0; }
.topic-dates li {
  display: grid; grid-template-columns: 9.5em 1fr; gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: var(--rule-hair) solid var(--hair);
  font-size: 16px; line-height: 1.5;
}
.topic-dates .d { font: 700 13px/1.6 var(--sans); color: var(--accent); }

/* Coverage: numbered, oldest first, each row is one link. */
.topic-articles { list-style: none; margin: 0; padding: 0; counter-reset: art; }
.topic-articles li { counter-increment: art; border-bottom: var(--rule-hair) solid var(--hair); }
.topic-articles a {
  display: grid; grid-template-columns: 2.4em 1fr; column-gap: var(--s2);
  padding: var(--s3) 0;
  color: inherit; text-decoration: none;
}
.topic-articles a::before {
  content: counter(art);
  grid-row: 1 / span 3;
  font: 700 22px/1 var(--serif-display);
  color: var(--hair);
}
.topic-articles a:hover .h { color: var(--accent); }
.topic-articles .k { font: 700 10.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.topic-articles .h { font: 700 17px/1.35 var(--serif-display); margin: 3px 0 4px; }
.topic-articles .x { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

.topic .topic-more { margin-top: var(--s5); font: 14px/1.6 var(--sans); color: var(--ink-soft); }
.topic .topic-more a { color: var(--accent); }

@media (max-width: 560px) {
  .topic-dates li { grid-template-columns: 1fr; gap: 2px; }
}