/* =========================================================================
 * The article register (v3): one contract for every Insights article.
 *
 * Loads on posts and the Insights index, after v3.css. Everything an article
 * body can contain is styled here twice over: once for the hand-written
 * vocabulary the essays use (.essay-h, .essay-figure, .essay-list) and once
 * for what Gutenberg emits (.wp-block-heading, figure, ul, blockquote), so a
 * post written in wp-admin reads in the same register as one composed by hand.
 *
 * Composition: the column is left-aligned to the masthead rail (DESIGN.md's
 * document edge), prose runs at the ~780px essay measure, and figures are
 * allowed past it. Spacing is the 8px scale.
 * ========================================================================= */

.essay-col {
  --measure: 780px;
  --figure: 1000px;
  max-width: 1240px;
}

/* The reading measure, applied to prose wherever it sits: directly in the
 * column, or inside the group wrapper Gutenberg puts around a body. */
.essay-col > :where(p, h2, h3, h4, ul, ol, blockquote, .wp-block-heading, .essay-h, .note, .authorbox),
.essay-col .article-body > :where(p, h2, h3, h4, ul, ol, blockquote, .wp-block-heading, .essay-h, .note) {
  max-width: var(--measure);
}

/* ---------- Body ---------- */
.essay-col :where(p, li) {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.7;
}
.essay-col :where(p, ul, ol) + :where(p, ul, ol) { margin-top: 24px; }
.essay-col :where(p, li) strong { font-weight: 600; }
.essay-col a { text-decoration-thickness: 1px; }

.essay-col .note,
.essay-col .article-body .note {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-top: 32px;
}

/* ---------- Sections ---------- */
/* A section heading is the article's structure, so it gets the hairline and
 * the whitespace that make it readable as one: 96 above, 24 below. */
.essay-col :where(h2, .wp-block-heading, .essay-h) {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 96px 0 24px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.essay-col :where(h2, .wp-block-heading, .essay-h):first-child,
.essay-col .article-body :where(h2, .wp-block-heading, .essay-h):first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.essay-col :where(h3, h3.wp-block-heading) {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 48px 0 16px;
  padding-top: 0;
  border-top: 0;
}

/* ---------- Lists ---------- */
.essay-col :where(ul, ol) { padding-left: 0; }
.essay-col li { margin-bottom: 12px; }
.essay-col :where(ul:not(.essay-list)) { list-style: none; }
.essay-col :where(ul:not(.essay-list)) > li,
.essay-col .essay-list > li {
  position: relative;
  padding-left: 24px;
}
.essay-col :where(ul:not(.essay-list)) > li::before,
.essay-col .essay-list > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  width: 8px;
  height: 2px;
  background: var(--brand);
}
.essay-col ol { list-style: none; counter-reset: essay-ol; }
.essay-col ol > li { counter-increment: essay-ol; padding-left: 32px; position: relative; }
.essay-col ol > li::before {
  content: counter(essay-ol);
  position: absolute;
  left: 0;
  top: 6px;
  font-family: var(--font-numeric);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-muted);
}

/* ---------- Pull quote ---------- */
.essay-col p.pullquote {
  margin: 64px 0 64px;
  max-width: 30ch;
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
}

.essay-col blockquote {
  margin: 48px 0;
  padding-left: 24px;
  border-left: 2px solid var(--border-strong);
  font-style: italic;
}
.essay-col blockquote p { font-size: 19px; }

/* ---------- Figures ---------- */
/* Diagrams carry the argument, so they are allowed past the reading measure
 * and labelled like exhibits: a hairline and a mono label, never a card. */
.essay-col :where(figure, .wp-block-image) {
  margin: 64px 0;
  max-width: var(--figure);
}
.essay-col figure svg,
.essay-col .essay-figure svg {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}
.essay-col .essay-figure--tall svg,
.essay-col figure.essay-figure--tall svg {
  max-width: 560px;
}
/* Screenshots and photographs stay on the measure; only drawn diagrams, whose
 * labels scale with the frame, earn the wider plate. */
.essay-col :where(figure img, .wp-block-image img) {
  display: block;
  width: 100%;
  max-width: var(--measure);
  height: auto;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface-card);
}
.essay-col :where(figure figcaption, .wp-block-image figcaption) {
  max-width: var(--measure);
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-muted);
  text-align: left;
}
/* The exhibit label: what the figure is, in the mono label voice. */
.essay-col .figure-label {
  display: block;
  max-width: none;
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-top: 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-numeric);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Only narrow screens scroll a diagram, so only they carry the hint. */
.essay-col .figure-hint {
  display: none;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* ---------- Evidence ledger (Gutenberg articles) ---------- */
.essay-col .fact-ledger {
  max-width: var(--figure);
  margin: 0 0 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border-strong);
}
.essay-col .fact-ledger__label {
  margin-bottom: 24px;
  font-family: var(--font-numeric);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}
.essay-col .fact-ledger__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.essay-col .fact-ledger__item { padding-top: 16px; border-top: 1px solid var(--border); }
.essay-col .fact-ledger__value {
  margin-bottom: 8px;
  font-family: var(--font-numeric);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--money);
}
.essay-col .fact-ledger__item > p:not(.fact-ledger__value) {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.essay-col .fact-ledger__item a { font-family: var(--font-body); font-size: 13px; }

.essay-col .exhibit { max-width: var(--figure); }

/* ---------- Masthead ---------- */
/* The masthead sits on the same rail as the body column, so the article has
 * one left edge from kicker to author note. */
.ihero--essay { display: block; }
.ihero--essay .ihero-copy { max-width: 1000px; }
.ihero--essay .ihero-copy h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.06; }
.ihero--essay .deck {
  max-width: 44ch;
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.375rem);
  line-height: 1.45;
  color: var(--ink-muted);
}
.ihero--essay .factline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  max-width: var(--measure, 780px);
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--border-strong);
  font-family: var(--font-numeric);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ihero--essay .factline a { color: var(--brand); }

.plate--article { padding-top: 0; }

/* ---------- Author ---------- */
/* Hairline, not a card: the byline note at the foot of the document. */
.essay-col .authorbox {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 96px;
  padding: 24px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--border-strong);
  border-radius: 0;
}
.essay-col .authorbox img {
  width: 72px;
  height: 72px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  object-fit: cover;
  background: var(--surface);
}
.essay-col .authorbox-name {
  font-family: var(--font-numeric);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.essay-col .authorbox-bio {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 10px;
  max-width: 58ch;
}
.essay-col .authorbox-links { font-family: var(--font-body); font-size: 14px; font-weight: 500; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .essay-col { --figure: 100%; }
}

@media (max-width: 860px) {
  .essay-col :where(h2, .wp-block-heading, .essay-h) {
    margin-top: 64px;
    padding-top: 24px;
    font-size: 1.65rem;
  }
  .essay-col :where(figure, .wp-block-image) { margin: 48px 0; }
  .essay-col .fact-ledger__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .ihero--essay .factline { margin-top: 32px; }
  .essay-col .authorbox { margin-top: 64px; }
}

@media (max-width: 720px) {
  .essay-col :where(p, li) { font-size: 18px; }
  /* A diagram's internal labels are drawn in viewBox units, so shrinking the
   * frame below its drawn width makes them illegible. Below that width the
   * plate scrolls sideways at a readable scale instead, and says so. */
  .essay-col .essay-figure:not(.essay-figure--tall) .figure-plate {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .essay-col .essay-figure:not(.essay-figure--tall) .figure-plate svg { min-width: 560px; }
  .essay-col .essay-figure--tall svg { max-width: 100%; }
  .essay-col .figure-hint { display: block; }
  .essay-col .fact-ledger__grid { grid-template-columns: 1fr; }
  .essay-col .authorbox { flex-direction: column; gap: 16px; }
}