/* ─────────────────────────────────────────────────────────────────────────
   css/topic-page.css — topic pages (/topics/<paper>/<slug>)

   One file for all of them rather than inline CSS per page. The blog puts its
   article styles in $page_inline_css, which is right for one template; with
   150 topic pages an external file is fetched once and then cached, and it
   lands in <head> through $page_css_file where the preload scanner sees it.
   Audit items 9 and 16 were both about not discovering a stylesheet late.

   Variables are the site's own (style.css :root). Reading measure is capped
   at 72ch, the same decision as the blog body after Ravi's 7 Aug 2026 note
   that the old layout was "painful to read".
   ───────────────────────────────────────────────────────────────────────── */

.tp-wrap { padding: clamp(36px, 4.5vw, 60px) 0; }

.tp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}

/* ── The article ───────────────────────────────────────────────────────── */

.tp-body { max-width: 72ch; font-size: var(--text-md); line-height: var(--lh-relaxed); color: #374151; }
.tp-body > :first-child { margin-top: 0; }

.tp-meta {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 22px;
}

.tp-body h2 {
  font-size: var(--text-xl);
  font-weight: var(--fw-black);
  color: var(--navy);
  line-height: var(--lh-snug);
  margin: 34px 0 10px;
}

.tp-body h3 {
  font-size: var(--text-lg);
  font-weight: var(--fw-black);
  color: var(--navy);
  line-height: var(--lh-snug);
  margin: 26px 0 8px;
}

.tp-body p  { margin: 0 0 14px; }
.tp-body ul,
.tp-body ol { margin: 10px 0 16px 22px; }
.tp-body li { margin-bottom: 6px; line-height: var(--lh-relaxed); }
.tp-body strong { color: var(--navy); }
.tp-body a { color: var(--blue); font-weight: var(--fw-semibold); }

.tp-body blockquote {
  margin: 18px 0;
  padding: 14px 18px;
  border-left: 4px solid var(--orange);
  background: var(--bg-2);
  border-radius: 0 8px 8px 0;
  color: var(--ink-2);
}

/* Inline notation. Actuarial symbols are almost all subscripts and
   superscripts, which is why there is no KaTeX on these pages: sub/sup render
   correctly at zero JavaScript cost, and a maths renderer on 150 pages is
   weight for nothing. The line-height reset stops a subscript pushing the
   line it sits on apart. */
.tp-body sub,
.tp-body sup { line-height: 0; font-size: 0.72em; }

.tp-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--navy);
}

/* A formula on its own line. */
.tp-math {
  margin: 16px 0;
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 1.02em;
  line-height: 1.9;
  color: var(--navy);
  overflow-x: auto;
}

/* Tables carry life-table extracts and loan schedules, so they are numeric
   and need to stay readable on a phone. */
.tp-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 20px;
  font-size: var(--text-sm);
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.tp-body th,
.tp-body td { border: 1px solid var(--line); padding: 7px 11px; text-align: right; }
.tp-body th { background: var(--bg-2); color: var(--navy); font-weight: var(--fw-bold); }
.tp-body td:first-child,
.tp-body th:first-child { text-align: left; white-space: normal; }

.tp-siblings { margin: 10px 0 18px 22px; }

.tp-afterword {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

/* ── The aside ─────────────────────────────────────────────────────────── */

.tp-card {
  background: linear-gradient(135deg, var(--navy), #172B55);
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 18px;
}
.tp-card-eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 8px;
}
.tp-card-lead {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, .72);
  line-height: var(--lh-relaxed);
  margin: 0 0 14px;
}
.tp-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: var(--orange);
  color: var(--navy);
  border-radius: 7px;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
}

.tp-card--plain { background: var(--bg-2); border: 1px solid var(--line); }
.tp-card--plain .tp-card-eyebrow { color: var(--ink-3); }

.tp-aside-list { list-style: none; margin: 0; padding: 0; }
.tp-aside-list li { border-bottom: 1px solid var(--line); }
.tp-aside-list li:last-child { border-bottom: none; }
.tp-aside-list a {
  display: block;
  padding: 9px 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--navy);
  line-height: var(--lh-snug);
}
.tp-aside-list a:hover { color: var(--orange); }

/* ── The admin preview banner ──────────────────────────────────────────── */

.tp-preview {
  background: #FEF3C7;
  border-bottom: 2px solid #F59E0B;
  color: #78350F;
  padding: 12px 20px;
  text-align: center;
  font-size: var(--text-sm);
}
.tp-preview a { color: #78350F; text-decoration: underline; font-weight: var(--fw-bold); }

/* ── Narrow screens ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .tp-layout { grid-template-columns: 1fr; gap: 32px; }
  .tp-body   { max-width: none; }
}

/* ── The end-of-page ask ──────────────────────────────────────────────────
   One band after the teaching, before the internal links: the reader has just
   been shown that we can teach, and that is the moment to ask. The second
   button renders only when the catalogue has something purchasable for this
   paper, so the page never offers an empty shelf. */
.tp-next{margin:2.5rem 0 2rem;padding:1.5rem 1.4rem;background:var(--tp-next-bg,#f6f8fa);
  border:1px solid var(--tp-next-border,#dfe4ea);border-radius:8px}
.tp-next-eyebrow{margin:0 0 .4rem;font-size:.7rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brand-orange,#e07a26)}
.tp-next-lead{margin:0 0 1.1rem;font-size:1rem;line-height:1.6;max-width:44rem}
.tp-next-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.tp-next-btn{display:inline-block;padding:.7rem 1.3rem;border-radius:6px;font-weight:600;
  font-size:.95rem;text-decoration:none;background:var(--brand-orange,#e07a26);color:#fff;
  border:1px solid var(--brand-orange,#e07a26)}
.tp-next-btn:hover,.tp-next-btn:focus-visible{filter:brightness(.94)}
.tp-next-btn--alt{background:transparent;color:var(--brand-navy,#143a5a);
  border-color:var(--brand-navy,#143a5a)}
.tp-next-btn--alt:hover,.tp-next-btn--alt:focus-visible{background:rgba(20,58,90,.06);filter:none}
.tp-next-note{margin:.9rem 0 0;font-size:.88rem;color:var(--ink-3,#5b616e)}
@media (max-width:420px){.tp-next-actions{flex-direction:column}.tp-next-btn{text-align:center}}