/* =========================================================================
   The Left Is Dead, Long Live the Left — radical-editorial theme.
   A committed two-colour system laid over mkdocs-material:
     · POSTER RED  — the campaign-poster accent: the glossy claim, the brand.
     · LEDGER INK  — the stark receipt: the record, the number, the cost.
   Riso / Jacobin / bell-hooks-book-cover, NOT redaction bars. Theme-aware:
   a warm-newsprint "paper" scheme (default) and a warm near-black "ink"
   scheme (slate). Self-contained: system serif + mono stacks, no web fonts.

   Author-facing components (use in Markdown with attr_list + md_in_html):
     .claim            — a pulled quote / the glossy brand. Stamp: "The brand".
     .claim__who       — attribution line inside a .claim.
     .receipt          — a hard number / the record. Stamp: "The record".
       .receipt__figure  — the big tabular figure.
       .receipt__note    — the caption under it.
     .brand-vs-record  — two-column frame pairing a .claim with a .receipt.
     admonition types  — `confirmed` and `contested` for the honesty tags.
   ========================================================================= */

:root {
  /* Type — system stacks only, no external fetch. */
  --tld-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
    Palatino, "Hoefler Text", Georgia, "Times New Roman", serif;
  --tld-read: Charter, "Iowan Old Style", "Palatino Linotype", Cambria,
    Georgia, "Times New Roman", serif;
  --tld-stamp: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono",
    Menlo, Consolas, monospace;
}

/* ---- PAPER scheme (default / light): warm newsprint, ink type ---------- */
[data-md-color-scheme="default"] {
  --tld-paper: #f4eee1;
  --tld-surface: #faf5ea;
  --tld-ink: #1c1712;
  --tld-muted: #6d6456;
  --tld-rule: #d8cdb8;
  --tld-poster: #e12d1b;
  --tld-red: #c31f12;

  --md-default-bg-color: var(--tld-paper);
  --md-default-bg-color--light: #efe7d6;
  --md-default-bg-color--lighter: #e7dcc7;
  --md-default-bg-color--lightest: #ded1b7;
  --md-default-fg-color: var(--tld-ink);
  --md-default-fg-color--light: #4a4237;
  --md-default-fg-color--lighter: rgba(28, 23, 18, 0.5);
  --md-default-fg-color--lightest: rgba(28, 23, 18, 0.12);

  --md-primary-fg-color: var(--tld-poster);
  --md-primary-fg-color--light: #e5473a;
  --md-primary-fg-color--dark: #b71f10;
  --md-primary-bg-color: #fbf4e6;
  --md-primary-bg-color--light: rgba(251, 244, 230, 0.72);

  --md-accent-fg-color: var(--tld-red);
  --md-accent-fg-color--transparent: rgba(195, 31, 18, 0.1);
  --md-typeset-a-color: var(--tld-red);

  --md-code-bg-color: #ece2d0;
  --md-code-fg-color: #2a231b;
  color-scheme: light;
}

/* ---- INK scheme (slate / dark): warm near-black ground, cream type ----- */
[data-md-color-scheme="slate"] {
  --tld-paper: #17130e;
  --tld-surface: #211b14;
  --tld-ink: #f0e8d7;
  --tld-muted: #a99e8b;
  --tld-rule: #3a3125;
  --tld-poster: #ff5a45;
  --tld-red: #ff6f5e;

  --md-default-bg-color: var(--tld-paper);
  --md-default-bg-color--light: #1e1810;
  --md-default-bg-color--lighter: #262019;
  --md-default-bg-color--lightest: #322a20;
  --md-default-fg-color: var(--tld-ink);
  --md-default-fg-color--light: #cfc4ae;
  --md-default-fg-color--lighter: rgba(240, 232, 215, 0.55);
  --md-default-fg-color--lightest: rgba(240, 232, 215, 0.16);

  --md-primary-fg-color: #1e1810;
  --md-primary-fg-color--light: #2a2218;
  --md-primary-fg-color--dark: #120e09;
  --md-primary-bg-color: var(--tld-ink);
  --md-primary-bg-color--light: rgba(240, 232, 215, 0.72);

  --md-accent-fg-color: var(--tld-red);
  --md-accent-fg-color--transparent: rgba(255, 111, 94, 0.12);
  --md-typeset-a-color: var(--tld-red);

  --md-code-bg-color: #120e09;
  --md-code-fg-color: #efe7d6;
  color-scheme: dark;
}

/* On the ink scheme keep the masthead ink but hang a poster-red hairline
   under it, so the campaign-red still signs the top of the page. */
[data-md-color-scheme="slate"] .md-header {
  border-bottom: 3px solid var(--tld-poster);
}

/* ======================= Typography ===================================== */
body,
.md-typeset {
  font-family: var(--tld-read);
}
.md-typeset {
  font-size: 0.82rem;
  line-height: 1.72;
}
/* Comfortable reading measure — cap the column, center it in its track. */
.md-content__inner {
  max-width: 44rem;
  margin-inline: auto;
}
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title,
.md-nav__title {
  font-family: var(--tld-display);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.md-typeset h1 {
  font-size: 2.25rem;
  line-height: 1.05;
  color: var(--tld-ink);
  margin-bottom: 0.6rem;
}
.md-typeset h2 {
  font-size: 1.55rem;
  line-height: 1.12;
  margin-top: 2.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--tld-rule);
}
/* The red tick — a short poster-coloured underline signing every H2. */
.md-typeset h2::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 3px;
  margin-top: -1px;
  background: var(--tld-poster);
}
.md-typeset h3 {
  font-size: 1.18rem;
  margin-top: 1.8rem;
}
.md-typeset a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.md-typeset a:hover {
  color: var(--tld-poster);
}

/* Masthead + tabs read as a printed banner. */
.md-header__title {
  font-size: 1.05rem;
}
.md-tabs__link {
  font-family: var(--tld-stamp);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* ======================= Buttons ======================================== */
.md-typeset .md-button {
  border: 2px solid currentColor;
  border-radius: 0;
  font-family: var(--tld-stamp);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.5em 1.1em;
  transition: background-color 120ms, color 120ms;
}
.md-typeset .md-button:hover {
  background: var(--tld-ink);
  color: var(--tld-paper);
  border-color: var(--tld-ink);
}
.md-typeset .md-button--primary {
  background: var(--tld-poster);
  border-color: var(--tld-poster);
  color: #fff;
}
.md-typeset .md-button--primary:hover {
  background: var(--tld-red);
  border-color: var(--tld-red);
  color: #fff;
}

/* ======================= THE CLAIM (the brand) ========================== */
/* A pulled quote in poster register — the glossy thing they say about
   themselves, set large and italic behind a campaign-red rule. */
.md-typeset .claim {
  position: relative;
  margin: 2.2rem 0;
  padding: 1.9rem 1.5rem 1.4rem;
  border-left: 6px solid var(--tld-poster);
  background:
    linear-gradient(180deg, var(--md-accent-fg-color--transparent), transparent 70%);
  font-family: var(--tld-display);
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.34;
  color: var(--tld-ink);
}
.md-typeset .claim::before {
  content: "The brand";
  position: absolute;
  top: -0.62rem;
  left: 1.3rem;
  padding: 0.12rem 0.5rem;
  background: var(--tld-poster);
  color: #fff;
  font-family: var(--tld-stamp);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.md-typeset .claim > :last-child {
  margin-bottom: 0;
}
.md-typeset .claim__who {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--tld-stamp);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--tld-muted);
}

/* ======================= THE RECEIPT (the record) ======================= */
/* The counter-exhibit: the number the record actually rings up. A ledger
   card in mono with a torn-receipt dashed foot and a big tabular figure. */
.md-typeset .receipt {
  position: relative;
  margin: 2.2rem 0;
  padding: 1.6rem 1.4rem 1.3rem;
  background: var(--tld-surface);
  border: 1px solid var(--tld-rule);
  border-top: 3px solid var(--tld-ink);
  border-bottom: 2px dashed var(--tld-rule);
  font-family: var(--tld-stamp);
}
.md-typeset .receipt::before {
  content: "The record";
  position: absolute;
  top: -0.62rem;
  left: 1.2rem;
  padding: 0.12rem 0.5rem;
  background: var(--tld-ink);
  color: var(--tld-paper);
  font-family: var(--tld-stamp);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.md-typeset .receipt__figure {
  display: block;
  font-family: var(--tld-display);
  font-weight: 800;
  font-size: 2.7rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--tld-ink);
}
.md-typeset .receipt__figure em {
  color: var(--tld-poster);
  font-style: normal;
}
.md-typeset .receipt__note {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--tld-muted);
}
.md-typeset .receipt > :last-child {
  margin-bottom: 0;
}

/* Pair the two exhibits side by side — the claim, then its receipt. */
.md-typeset .brand-vs-record {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2.2rem 0;
}
.md-typeset .brand-vs-record > .claim,
.md-typeset .brand-vs-record > .receipt {
  margin: 0;
}
@media (max-width: 44.98em) {
  .md-typeset .brand-vs-record {
    grid-template-columns: 1fr;
  }
}

/* ---- Two-subject portrait pair (the-two-faces) ------------------------- */
/* Two side-by-side portraits under one shared caption. Flex the image row so
   they render reliably beside each other, cap the figure so it does not
   overwhelm the reading column, and crop each portrait to an even height. */
.md-typeset figure.portrait-pair {
  max-width: 640px;
  margin-inline: auto;
}
.md-typeset .portrait-pair__imgs {
  display: flex;
  gap: 0.8rem;
}
.md-typeset .portrait-pair__imgs img {
  flex: 1 1 0;
  width: 50%;
  min-width: 0;
  max-height: 340px;
  object-fit: cover;
}

/* ======================= Tags + honesty admonitions ===================== */
.md-typeset .md-tag {
  background: transparent;
  border: 1px solid var(--tld-rule);
  border-radius: 0;
  font-family: var(--tld-stamp);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tld-muted);
}

/* Custom admonition icons. */
:root {
  --md-admonition-icon--confirmed: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
  --md-admonition-icon--contested: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>');
}
/* confirmed — the receipt is clean: ink-ruled ledger card. */
.md-typeset .admonition.confirmed,
.md-typeset details.confirmed {
  border-color: var(--tld-rule);
  border-left: 4px solid var(--tld-ink);
}
.md-typeset .confirmed > .admonition-title,
.md-typeset .confirmed > summary {
  background: var(--md-default-bg-color--light);
  font-family: var(--tld-stamp);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.md-typeset .confirmed > .admonition-title::before,
.md-typeset .confirmed > summary::before {
  background-color: var(--tld-ink);
  -webkit-mask-image: var(--md-admonition-icon--confirmed);
          mask-image: var(--md-admonition-icon--confirmed);
}
/* contested — the honest complication: flagged in poster red. */
.md-typeset .admonition.contested,
.md-typeset details.contested {
  border-color: var(--tld-poster);
  border-left: 4px solid var(--tld-poster);
}
.md-typeset .contested > .admonition-title,
.md-typeset .contested > summary {
  background: var(--md-accent-fg-color--transparent);
  font-family: var(--tld-stamp);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.md-typeset .contested > .admonition-title::before,
.md-typeset .contested > summary::before {
  background-color: var(--tld-poster);
  -webkit-mask-image: var(--md-admonition-icon--contested);
          mask-image: var(--md-admonition-icon--contested);
}

/* ======================= Tables + blockquotes =========================== */
.md-typeset table:not([class]) {
  font-family: var(--tld-read);
  border: 1px solid var(--tld-rule);
}
.md-typeset table:not([class]) th {
  background: var(--md-default-bg-color--light);
  font-family: var(--tld-stamp);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.md-typeset table:not([class]) td {
  font-variant-numeric: tabular-nums;
}
.md-typeset blockquote {
  border-left: 3px solid var(--tld-poster);
  color: var(--tld-muted);
}

/* ======================= Home / hero landing ============================ */
/* home.html hides the tabs bar and drops both sidebars for a full hero.
   Sidebars are siblings of .md-content, so reach them from the shared
   ancestor with :has(). */
.md-main__inner:has(.tld-home) .md-sidebar {
  display: none;
}
.md-main__inner:has(.tld-home) .md-content {
  max-width: none;
}
.md-content__inner:has(.tld-home) {
  max-width: 62rem;
}
.tld-home {
  padding-block: 1rem 2.5rem;
}
.tld-hero {
  padding-block: 2rem 2.4rem;
  border-bottom: 3px solid var(--tld-poster);
}
.tld-eyebrow {
  font-family: var(--tld-stamp);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tld-poster);
}
.md-typeset .tld-hero h1 {
  font-size: clamp(2.4rem, 6vw, 3.7rem);
  line-height: 0.98;
  margin: 0.6rem 0 0.9rem;
}
.tld-thesis {
  max-width: 34rem;
  font-family: var(--tld-display);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.32;
  color: var(--tld-ink);
}
.tld-thesis strong {
  font-style: normal;
  color: var(--tld-poster);
}
.tld-actions {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
/* The five-pillar / record grid on the landing. */
.tld-pillars {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.9rem;
}
.tld-card {
  display: block;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--tld-surface);
  border: 1px solid var(--tld-rule);
  border-top: 3px solid var(--tld-poster);
  color: var(--tld-ink);
  text-decoration: none;
  transition: transform 120ms, border-color 120ms;
}
.tld-card:hover {
  transform: translateY(-2px);
  border-top-color: var(--tld-ink);
  color: var(--tld-ink);
}
.tld-card h3 {
  margin: 0 0 0.3rem;
  font-family: var(--tld-display);
  font-weight: 800;
  font-size: 1.15rem;
}
.tld-card p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--tld-muted);
}
.tld-kicker {
  display: block;
  font-family: var(--tld-stamp);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tld-poster);
  margin-bottom: 0.35rem;
}
.tld-foot {
  margin-top: 2.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tld-rule);
  font-family: var(--tld-stamp);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--tld-muted);
}