/* Persona Vectors don't work on real data · page-local styles, layered on /styles.css */

/* The full title runs ~110 characters, which is six lines against the shared
   22ch / 64px treatment and taller than the rest of the page head put together.
   Widen the measure and step the type down so it lands in three. Property
   overrides only — the component itself still comes from the root sheet. */
.page-head__title {
  font-size: clamp(29px, 4vw, 44px);
  line-height: 1.1;
  max-width: 34ch;
}

.post-body {
  max-width: 720px;
  margin: 0 auto;
}

.post-body p {
  font-size: clamp(16px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1.6em;
}

.post-body__heading {
  font-size: clamp(20px, 1.4vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 2.4em 0 1em;
}

.post-body__preface {
  color: var(--ink-soft);
  padding-bottom: 0.4em;
}

.post-body strong {
  font-weight: 600;
  color: var(--ink);
}

.post-body a {
  color: var(--ink);
  border-bottom: 1px solid var(--brat);
  transition: background var(--t-fast);
}
.post-body a:hover { background: rgba(138, 206, 0, 0.18); }

/* TL;DR callout — brat outline, ink type. Copied from mythos-cb2; the green is
   the frame only, never the foreground (contrast fails on white). Second user
   of this block — promote it into the root stylesheet if a third appears. */

.assessment {
  border: 1px solid var(--brat);
  background: rgba(138, 206, 0, 0.05);
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 32px);
  margin: 0 0 2.2em;
}

.post-body .assessment__title {
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 1em;
}

.assessment .post-body__list {
  margin-bottom: 0;
}

/* The frame owns the green here, so the bullets go back to ink. */
.assessment .post-body__list li::before {
  background: var(--ink);
}

/* Lists */

.post-body__list {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
}

.post-body__list li {
  position: relative;
  padding-left: 22px;
  font-size: clamp(16px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 0.9em;
}

.post-body__list li:last-child { margin-bottom: 0; }

.post-body__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brat);
}

/* Ordered variant — same measure and rhythm as .post-body__list, but the
   marker is a tabular numeral instead of a dot. Counter rather than list-style
   so the number sits on the same 22px hanging indent as the bullets do. */

.post-body__olist {
  list-style: none;
  counter-reset: olist;
  margin: 0 0 1.6em;
  padding: 0;
}

.post-body__olist li {
  position: relative;
  counter-increment: olist;
  padding-left: 26px;
  font-size: clamp(16px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 0.9em;
}

.post-body__olist li:last-child { margin-bottom: 0; }

.post-body__olist li::before {
  content: counter(olist) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* Figures */

.post-figure {
  margin: clamp(32px, 4vw, 56px) 0;
}

.post-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.post-figure--narrow img {
  max-width: 520px;
  margin: 0 auto;
}

/* Small multiples. The source charts and prompt tables come in related pairs
   and triples; stacking them inside one <figure> keeps them under a single
   caption. Not a multi-column grid on purpose — these are 600px-wide charts
   with real axis labels, and three across a 720px measure is unreadable. */

.post-figure__stack {
  display: grid;
  gap: 14px;
}

.post-figure figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}

.post-body > *:last-child {
  margin-bottom: 0;
}

/* The adversarial-review box (.review*) is a shared post primitive and lives in
   the root styles.css. */