/* Recession Ledger */
:root {
  --rld-ink: #15181a;
  --rld-ink-soft: #3c4247;
  --rld-ink-mute: #6a7278;
  --rld-ground: #ffffff;
  --rld-ground-alt: #f1f3f2;
  --rld-rule: #d8dcda;
  --rld-rule-firm: #a9b1ad;
  --rld-accent: #14503d;
  --rld-accent-lit: #1d6b52;
  --rld-focus: #b8551f;
  --rld-hover: #fafbfa;
  --rld-font-body: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
  --rld-font-ui: 'Helvetica Neue', Helvetica, 'Segoe UI', 'Liberation Sans', system-ui, sans-serif;
  --rld-font-mono: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --rld-size-body: 17.5px;
  --rld-page: 1140px;
}
/* ledger — a record of forecasts and how they came out.
   Ported from the Claude Design deliverable for thegreatrecession.rld_info (design-source/,
   reviewed in design-source/REVIEW.rld_md). Plain CSS, system fonts, no external request.

   Colour and font tokens are NOT declared here: css() generates them from site.rld_yml so the
   footprint registry stays the single source of truth for those axes. Everything below is
   the design's own spacing, type scale and layout, unchanged except for two defects the
   layout audit found in the deliverable and which are fixed at source rather than in the
   port (03 §5d):

     · .rld_section_head / .rld_year__head put a count beside the <h2> as a flex sibling, so the
       count's top sat above the heading's bottom edge — 50 of the 60 findings. The count
       now lives INSIDE the heading, which reads identically and measures correctly.
     · .rld_prose ul/ol set margin-top only, so margin-bottom kept the user-agent default. */

:root {
  --rld-lh-body: 1.62;
  --rld-pad-inline: 20px;
  --rld-gap-xs: 4px;
  --rld-gap-s: 10px;
  --rld-gap-m: 20px;
  --rld-gap-l: 36px;
  --rld-gap-xl: 60px;
  --rld-measure: 35rem;
}

@media (min-width: 760px) {
  :root {
    --rld-pad-inline: 40px;
    --rld-size-body: 18px;   /* the design's one responsive type step */
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--rld-ground);
  color: var(--rld-ink);
  font-family: var(--rld-font-body);
  font-size: var(--rld-size-body);
  line-height: var(--rld-lh-body);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

a { color: var(--rld-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--rld-accent-lit); }
a:focus-visible,
:focus-visible {
  outline: 2px solid var(--rld-focus);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { line-height: 1.22; font-weight: 600; }
h1 { margin: 0 0 var(--rld-gap-s); }
h2, h3, h4 { margin: 0; }

p { margin: 0; }

.rld_page { max-width: var(--rld-page); margin: 0 auto; }
.rld_pad { padding-inline: var(--rld-pad-inline); }

.rld_skip {
  position: absolute; left: -9999px;
  background: var(--rld-ground); color: var(--rld-ink);
  padding: 10px 16px; z-index: 10;
}
.rld_skip:focus { left: var(--rld-pad-inline); top: 8px; }

/* ---------- masthead + navigation ---------- */

.rld_masthead {
  padding-block: 30px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rld-gap-s) var(--rld-gap-l);
}

.rld_masthead_name {
  font-family: var(--rld-font-body);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0.005em;
  margin: 0;
}
.rld_masthead_name a { color: var(--rld-ink); text-decoration: none; }
.rld_masthead_name a:hover { color: var(--rld-accent); }

.rld_masthead_line {
  font-family: var(--rld-font-ui);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--rld-ink-mute);
  max-width: 34rem;
}

.rld_subjects {
  border-top: 1px solid var(--rld-rule-firm);
  border-bottom: 1px solid var(--rld-rule);
}
.rld_subjects ul {
  list-style: none;
  margin: 0;
  padding-block: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--rld-gap-l);
}
.rld_subjects a {
  display: block;
  padding-block: 11px;
  font-family: var(--rld-font-ui);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rld-ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.rld_subjects a:hover { color: var(--rld-accent); }
.rld_subjects a[aria-current] { color: var(--rld-accent); border-bottom-color: var(--rld-accent); }

/* ---------- shared bits ---------- */

.rld_eyebrow {
  font-family: var(--rld-font-ui);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rld-ink-mute);
  margin: 0;
}

.rld_meta {
  font-family: var(--rld-font-ui);
  font-size: 13px;
  color: var(--rld-ink-mute);
  letter-spacing: 0.01em;
}
.rld_meta a { color: var(--rld-ink-soft); }

.rld_standfirst {
  color: var(--rld-ink-soft);
  font-size: 1.05em;
  line-height: 1.55;
}

/* The count sits inside the <h2>, not beside it. As a sibling its top edge was above the
   heading's bottom edge and every width reported a crowded heading. */
.rld_section_head {
  padding-block: 12px;
  border-bottom: 1px solid var(--rld-rule-firm);
  margin-bottom: var(--rld-gap-m);
}
.rld_section_head h2 {
  font-family: var(--rld-font-ui);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rld-gap-m);
}
.rld_section_head h2 .rld_count {
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  font-size: 13px;
  color: var(--rld-ink-mute);
}

/* ---------- featured slot ---------- */

.rld_featured {
  background: var(--rld-ground-alt);
  border-top: 3px double var(--rld-rule-firm);
  border-bottom: 1px solid var(--rld-rule);
  margin-top: var(--rld-gap-l);
  padding: 26px var(--rld-pad-inline) 30px;
}
.rld_featured h2 {
  font-size: clamp(27px, 4.2vw, 38px);
  margin: 14px 0 10px;
  max-width: 22ch;
}
.rld_featured h2 a { color: var(--rld-ink); text-decoration: none; }
.rld_featured h2 a:hover { color: var(--rld-accent); }
.rld_featured .rld_standfirst { max-width: 46rem; }
.rld_featured .rld_meta { margin-top: 16px; display: block; }

/* ---------- essay list ---------- */

.rld_stream { margin-top: var(--rld-gap-xl); }

.rld_entries { list-style: none; margin: 0; padding: 0; }

.rld_entry {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--rld-gap-m);
  padding: 22px var(--rld-pad-inline);
  border-bottom: 1px solid var(--rld-rule);
}
.rld_entry:first-child { border-top: 1px solid var(--rld-rule); }
.rld_entry:hover { background: var(--rld-hover); }

.rld_entry_meta { padding-top: 5px; }
.rld_entry_date { display: block; font-family: var(--rld-font-ui); font-size: 13px; color: var(--rld-ink-mute); }
.rld_entry_subject {
  display: block;
  margin-top: var(--rld-gap-xs);
  font-family: var(--rld-font-ui);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rld-accent);
  text-decoration: none;
}
.rld_entry_subject:hover { text-decoration: underline; }

.rld_entry h3 { font-size: 22px; margin: 0 0 8px; max-width: 32ch; }
.rld_entry h3 a { color: var(--rld-ink); text-decoration: none; }
.rld_entry h3 a:hover { color: var(--rld-accent); text-decoration: underline; }
.rld_entry p { color: var(--rld-ink-soft); font-size: 0.95em; line-height: 1.55; max-width: 44rem; }

.rld_more {
  padding: 22px var(--rld-pad-inline) 0;
  font-family: var(--rld-font-ui);
  font-size: 13.5px;
}

/* ---------- colophon band ---------- */

.rld_band {
  margin-top: var(--rld-gap-xl);
  border-top: 1px solid var(--rld-rule-firm);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
}
.rld_band > * { padding: 26px var(--rld-pad-inline) 34px; }
.rld_band_note { border-right: 1px solid var(--rld-rule); }
.rld_band_note p { max-width: 34rem; margin-top: 12px; color: var(--rld-ink-soft); font-size: 0.96em; }

.rld_cited { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: cited; }
.rld_cited li {
  counter-increment: cited;
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  padding-block: 8px;
  border-top: 1px solid var(--rld-rule);
  font-size: 0.95em;
}
.rld_cited li::before {
  content: counter(cited, decimal-leading-zero);
  font-family: var(--rld-font-ui);
  font-size: 12px;
  color: var(--rld-ink-mute);
  padding-top: 3px;
}
.rld_cited a { color: var(--rld-ink); text-decoration: none; }
.rld_cited a:hover { color: var(--rld-accent); text-decoration: underline; }

/* ---------- essay page ----------
   The prose container is `.rld_prose`, not `.rld_body`. It was `.rld_body` in the deliverable, where
   <body> carried no class; here every skeleton gives <body> a class from the same Naming
   helper, so `.rld_body` resolved to the SAME class as the document body and put a 35rem
   measure on the whole page. The related grid then laid three columns inside 480px and
   the layout audit reported 535 overflows. A logical block name may not collide with an
   element name that Naming also emits. */

.rld_essay { padding-block: var(--rld-gap-xl) 0; }
.rld_essay_head { max-width: 42rem; padding-inline: var(--rld-pad-inline); }
.rld_essay_head h1 {
  font-size: clamp(30px, 5vw, 44px);
  margin: 14px 0 14px;
  letter-spacing: -0.005em;
}
.rld_essay_head .rld_standfirst { font-size: 1.14em; max-width: 36rem; }
.rld_essay_head .rld_meta { display: block; margin-top: 14px; }
.rld_essay_rule { border: 0; border-top: 1px solid var(--rld-rule-firm); margin: 30px 0 0; }

.rld_prose {
  max-width: var(--rld-measure);
  padding-inline: var(--rld-pad-inline);
  padding-block: 34px 0;
}
.rld_prose > * + * { margin-top: 1.1em; }
.rld_prose h2 {
  font-size: 23px;
  margin-top: 2em;
  margin-bottom: 0.45em;
  padding-top: 2px;
}
.rld_prose h3 {
  font-size: 18.5px;
  margin-top: 1.7em;
  margin-bottom: 0.4em;
  color: var(--rld-ink-soft);
}
/* margin-bottom must be stated: with margin-top alone the bottom keeps the user-agent
   default and the audit reports a margin leak at every width. */
.rld_prose ul, .rld_prose ol { margin: 1em 0 0; padding-left: 1.4em; }
.rld_prose li + li { margin-top: 0.5em; }

.rld_prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--rld-accent);
  color: var(--rld-ink-soft);
  font-size: 0.98em;
}
.rld_prose blockquote cite {
  display: block;
  margin-top: 8px;
  font-family: var(--rld-font-ui);
  font-size: 12.5px;
  font-style: normal;
  color: var(--rld-ink-mute);
}

.rld_prose figure { margin: 2.2em 0; }
.rld_prose figcaption {
  margin-top: 10px;
  padding-inline: 2px;
  font-family: var(--rld-font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rld-ink-mute);
}

.rld_table_wrap { margin: 2em 0; overflow-x: auto; }
.rld_prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rld-font-ui);
  font-size: 14px;
}
.rld_prose caption {
  text-align: left;
  padding: 0 8px 10px;
  font-size: 12.5px;
  color: var(--rld-ink-mute);
}
.rld_prose th, .rld_prose td { padding: 9px 12px; border-bottom: 1px solid var(--rld-rule); text-align: right; }
.rld_prose th:first-child, .rld_prose td:first-child { text-align: left; }
.rld_prose thead th {
  border-bottom: 1px solid var(--rld-rule-firm);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rld-ink-mute);
  font-weight: 600;
}
.rld_prose tbody tr:last-child td { border-bottom: 1px solid var(--rld-rule-firm); }

.rld_promote {
  max-width: var(--rld-measure);
  margin: var(--rld-gap-xl) 0 0;
  padding: 18px var(--rld-pad-inline) 22px;
  border-top: 1px solid var(--rld-rule-firm);
  border-bottom: 1px solid var(--rld-rule);
  background: var(--rld-ground-alt);
}
.rld_promote_title { font-size: 1.06em; margin-top: 8px; }
.rld_promote_title a { color: var(--rld-ink); text-decoration: none; }
.rld_promote_title a:hover { color: var(--rld-accent); text-decoration: underline; }
.rld_promote_note {
  margin-top: 6px;
  font-family: var(--rld-font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--rld-ink-mute);
  max-width: 34rem;
}

/* essay footer */

.rld_related { margin-top: var(--rld-gap-xl); border-top: 1px solid var(--rld-rule-firm); }
.rld_related_grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rld_related_grid li { padding: 22px var(--rld-pad-inline) 28px; border-right: 1px solid var(--rld-rule); }
.rld_related_grid li:last-child { border-right: 0; }
.rld_related_grid h3 { font-size: 18px; margin: 8px 0 0; }
.rld_related_grid a { color: var(--rld-ink); text-decoration: none; }
.rld_related_grid a:hover { color: var(--rld-accent); text-decoration: underline; }

.rld_pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rld-rule);
  border-bottom: 1px solid var(--rld-rule-firm);
}
.rld_pager > * { padding: 20px var(--rld-pad-inline) 24px; }
.rld_pager_next { text-align: right; border-left: 1px solid var(--rld-rule); }
.rld_pager a { color: var(--rld-ink); text-decoration: none; font-size: 1.02em; }
.rld_pager a:hover { color: var(--rld-accent); text-decoration: underline; }
.rld_pager .rld_eyebrow { margin-bottom: 6px; }

/* ---------- subject index ---------- */

.rld_subject_head { padding: var(--rld-gap-xl) var(--rld-pad-inline) 0; max-width: 44rem; }
.rld_subject_head h1 { font-size: clamp(30px, 5vw, 42px); margin: 12px 0 14px; }
.rld_subject_head p { max-width: 34rem; color: var(--rld-ink-soft); }
.rld_subject_head .rld_meta { margin-top: 12px; }
.rld_subject_head .rld_intro > * + * { margin-top: 1em; }

.rld_year { margin-top: var(--rld-gap-xl); }
.rld_year_head {
  padding: 10px var(--rld-pad-inline);
  border-top: 1px solid var(--rld-rule-firm);
  border-bottom: 1px solid var(--rld-rule);
}
.rld_year_head h2 {
  font-size: 21px;
  display: flex;
  align-items: baseline;
  gap: var(--rld-gap-m);
}
.rld_year_head h2 .rld_count {
  font-family: var(--rld-font-ui);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--rld-ink-mute);
}

.rld_year ol { list-style: none; margin: 0; padding: 0; }
.rld_year li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--rld-gap-m);
  padding: 15px var(--rld-pad-inline);
  border-bottom: 1px solid var(--rld-rule);
}
.rld_year li:hover { background: var(--rld-hover); }
.rld_year .rld_meta { padding-top: 3px; }
.rld_year a { color: var(--rld-ink); text-decoration: none; font-size: 1.02em; }
.rld_year a:hover { color: var(--rld-accent); text-decoration: underline; }

/* ---------- footer ---------- */

.rld_site_foot {
  margin-top: var(--rld-gap-xl);
  border-top: 1px solid var(--rld-rule-firm);
  padding: 26px var(--rld-pad-inline) 48px;
  font-family: var(--rld-font-ui);
  font-size: 13px;
  color: var(--rld-ink-mute);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rld-gap-s) var(--rld-gap-l);
  justify-content: space-between;
}
.rld_site_foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--rld-gap-m); margin: 0; padding: 0; }

/* ---------- narrow ---------- */

@media (max-width: 759px) {
  .rld_masthead { padding-block: 22px 16px; }
  .rld_masthead_name { font-size: 23px; }
  .rld_subjects ul { gap: 0 22px; }
  .rld_entry,
  .rld_year li { grid-template-columns: minmax(0, 1fr); gap: var(--rld-gap-s); }
  .rld_entry_meta { display: flex; gap: 14px; align-items: baseline; padding-top: 0; }
  .rld_entry_subject { margin-top: 0; }
  .rld_entry h3 { font-size: 20px; }
  .rld_band { grid-template-columns: minmax(0, 1fr); }
  .rld_band_note { border-right: 0; border-bottom: 1px solid var(--rld-rule); }
  .rld_related_grid { grid-template-columns: minmax(0, 1fr); }
  .rld_related_grid li { border-right: 0; border-bottom: 1px solid var(--rld-rule); }
  .rld_related_grid li:last-child { border-bottom: 0; }
  .rld_pager { grid-template-columns: minmax(0, 1fr); }
  .rld_pager_next { text-align: left; border-left: 0; border-top: 1px solid var(--rld-rule); }
  .rld_stream, .rld_band, .rld_related, .rld_year, .rld_site_foot { margin-top: var(--rld-gap-l); }
}