/* ==========================================================================
   thematic.css — shared paint+structure for the 8 frozen thematic archetypes
   --------------------------------------------------------------------------
   The thematic (3rd) page is no longer hand-authored by the LLM. It is one of
   8 frozen archetype bodies (thematic/bodies/*.html) chosen 1–8 (random in auto
   mode, user-picked in interactive). This stylesheet paints ALL of them.

   HARD RULES (so it never fights the linters or the per-run theme):
     • token-only — every color is a var(--color-*); ZERO hardcoded hex (DS-2).
     • mobile-first — base rules target the 320px floor with TIGHT spacing; the
       768px @media only widens. This is what kills the empty-space bug the
       hand-authored page had (huge padding-block + single wide column at 320).
     • no raster, no external url() (DS-3). Decoration is borders/tokens only.
   Loaded AFTER base.css + theme.css + layout.css, so it consumes their tokens
   and wins specificity for its own `.th-*` classes without touching shell CSS.
   ========================================================================== */

/* --- Page scope + head band --------------------------------------------- */
.th {
  /* tight on mobile; the 768px block widens it. Never use 2xl/3xl at 320. */
  --th-band: var(--space-xl);
}

.th-head {
  padding-block: var(--th-band);
  border-block-end: var(--border-width) solid var(--color-border);
}

.th-kicker {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-block-end: var(--space-2xs);
}

.th-title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-text);
  max-width: 22ch;
}

.th-intro {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text);
  opacity: 0.78;
  max-width: 60ch;
  margin-block-start: var(--space-md);
}

/* --- Body band shared by every archetype -------------------------------- */
.th-body {
  padding-block: var(--th-band);
}

/* A single readable column is the mobile default for every archetype. */
.th-flow > * + * { margin-block-start: var(--space-lg); }

/* shared entry typography ------------------------------------------------- */
.th-entry-label {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-text);
}
.th-entry-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  opacity: 0.85;
  margin-block-start: var(--space-2xs);
  max-width: 64ch;
}

/* ========================================================================
   1 — LEXICON  (definition list: term → definition)
   ======================================================================== */
.th--lexicon .th-term {
  padding-block: var(--space-md);
  border-block-start: var(--border-width) solid var(--color-border);
}
.th--lexicon .th-term:first-child { border-block-start: none; }
.th--lexicon dt {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-accent);
}
.th--lexicon dd {
  margin-inline-start: 0;
  margin-block-start: var(--space-2xs);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  color: var(--color-text);
  opacity: 0.85;
  max-width: 64ch;
}

/* ========================================================================
   2 — PRIMER  (auto-numbered concept sections)
   ======================================================================== */
.th--primer .th-flow { counter-reset: th-primer; }
.th--primer .th-step {
  counter-increment: th-primer;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
  padding-block: var(--space-sm);
}
.th--primer .th-step::before {
  content: counter(th-primer, decimal-leading-zero);
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.55;
}

/* ========================================================================
   3 — MANIFESTO  (large centred statements)
   ======================================================================== */
.th--manifesto .th-stmt {
  padding-block: var(--space-lg);
  border-block-end: var(--border-width) solid var(--color-border);
  margin: 0;
}
.th--manifesto .th-stmt:last-child { border-block-end: none; }
.th--manifesto .th-stmt__label {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-text);
  max-width: 24ch;
}
.th--manifesto .th-stmt__body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  opacity: 0.8;
  margin-block-start: var(--space-sm);
  max-width: 58ch;
}

/* ========================================================================
   4 — TIMELINE  (vertical rail of ordered stages)
   ======================================================================== */
.th--timeline .th-tl {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.th--timeline .th-tl__item {
  position: relative;
  padding-inline-start: var(--space-lg);
  padding-block-end: var(--space-lg);
  border-inline-start: 2px solid var(--color-border);
}
.th--timeline .th-tl__item:last-child { padding-block-end: 0; }
.th--timeline .th-tl__item::before {
  content: '';
  position: absolute;
  inset-inline-start: -7px;
  inset-block-start: 0.35em;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
}

/* ========================================================================
   5 — FAQ  (stacked question → answer)
   ======================================================================== */
.th--faq .th-qa {
  padding-block: var(--space-md);
  border-block-start: var(--border-width) solid var(--color-border);
}
.th--faq .th-qa:first-child { border-block-start: none; }
.th--faq .th-qa__q {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-text);
}
.th--faq .th-qa__a {
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  color: var(--color-text);
  opacity: 0.85;
  margin-block-start: var(--space-xs);
  max-width: 64ch;
}

/* ========================================================================
   6 — INDEX  (grouped cards) · 7 — METHODOLOGY (numbered cards)
   shared card grid; methodology adds a counter chip.
   ======================================================================== */
.th-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.th-card {
  padding: var(--space-md);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.th-card__label {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text);
}
.th-card__body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text);
  opacity: 0.82;
  margin-block-start: var(--space-2xs);
}
.th--methodology .th-grid { counter-reset: th-method; }
.th--methodology .th-card { counter-increment: th-method; }
.th--methodology .th-card__label::before {
  content: counter(th-method) '. ';
  color: var(--color-accent);
  font-family: var(--font-serif);
}

/* ========================================================================
   8 — COMPENDIUM  (curated list with framing notes)
   ======================================================================== */
.th--compendium .th-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: th-comp;
}
.th--compendium .th-note {
  counter-increment: th-comp;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-block-start: var(--border-width) solid var(--color-border);
}
.th--compendium .th-note:first-child { border-block-start: none; }
.th--compendium .th-note::before {
  content: counter(th-comp);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-accent);
  opacity: 0.6;
}

/* ========================================================================
   ≥768px — widen bands + measures. The mobile rules above stay TIGHT so the
   320px view never opens large empty gutters (the bug we removed).
   ======================================================================== */
@media (min-width: 768px) {
  .th { --th-band: var(--space-2xl); }
  .th-title { font-size: var(--text-4xl); }
  .th--primer .th-step { gap: var(--space-lg); }
  .th--timeline .th-tl__item { padding-inline-start: var(--space-xl); }
}