/**
 * Chrome and components for the generated non-article pages: calculators,
 * template landing pages, the glossary, category archives, the sessions page
 * and the legal pages.
 *
 * blog.css already carries the design system - the colour tokens, `.container`,
 * `.button`, `.text-link`, `.eyebrow` and the whole of `.article-body`. Every
 * page rendered by scripts/page-shell.mjs loads both, so this file deliberately
 * defines nothing that blog.css already defines and inherits the tokens rather
 * than restating them. What is here is only what genuinely did not exist
 * before: the page shell's own furniture, and one block per new page family.
 *
 * The `.article-body` reuse is the point rather than a shortcut. A glossary
 * definition and a blog post are the same kind of reading, so they should be
 * the same typography, and getting that for free is what keeps a new page
 * family from slowly drifting into looking like a different website.
 */

/* ---------------------------------------------------------------- shell ---- */

.page-main { padding: 40px 0 80px; background: var(--paper); }
.page-main > .container + .container { margin-top: 0; }

.crumbs { margin: 0 0 26px; font-family: var(--sans); font-size: .74rem; letter-spacing: .04em; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { color: var(--forest-soft); text-decoration: none; }
.crumbs a:hover { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

.page-head { max-width: 62ch; margin: 0 0 44px; }
.page-head h1 {
  margin: 0;
  color: var(--forest);
  font-family: var(--serif);
  font-size: clamp(2.3rem, 5.2vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.03em;
}
.page-dek { margin: 20px 0 0; color: var(--muted); font-family: var(--serif); font-size: 1.28rem; line-height: 1.62; }

.page-section { padding-top: 18px; }
.page-section + .page-section { padding-top: 54px; }
.section-title {
  margin: 0 0 8px;
  color: var(--forest);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -.025em;
}
.section-intro { max-width: 62ch; margin: 0 0 28px; color: var(--muted); font-size: 1rem; line-height: 1.65; }

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

.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 18px; }
.footer-legal a { color: var(--muted); font-family: var(--sans); font-size: .78rem; text-decoration: none; }
.footer-legal a:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; align-items: baseline; }
.footer-row nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-row a { color: var(--forest-soft); font-family: var(--sans); font-size: .78rem; font-weight: 600; text-decoration: none; }
.footer-row a:hover { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }
/* The same current state the section nav carries at the top of the page. The
   footer row is built from the same table, so a page that highlights a tab also
   highlights its own section down here rather than offering it as somewhere to
   go. Matched on the attribute rather than one of its values, for the reason
   the strip's rule in header.css gives. */
.footer-row a[aria-current] { color: var(--forest); font-weight: 700; text-decoration: none; cursor: default; }
.footer-note { max-width: 70ch; margin: 0; font-size: .76rem; line-height: 1.6; }

/* -------------------------------------------------------- compliance ------- */

/**
 * The persistent disclaimer. It appears on every calculator, every simulator
 * and every page that puts a number in front of somebody, which is why it is
 * styled to be read rather than dismissed: full width, its own border, and a
 * colour that separates it from the prose without the "cookie banner" look
 * that trains people to skip it.
 */
.compliance {
  margin: 44px 0 0;
  padding: 24px 28px;
  border: 1px solid #d8ccb3;
  border-left: 5px solid var(--rust);
  background: linear-gradient(135deg, rgba(255,253,248,.97), rgba(244,239,228,.85));
  font-family: var(--sans);
}
.compliance-title {
  margin: 0 0 10px;
  color: var(--forest);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.compliance-body { margin: 0; max-width: 78ch; color: var(--ink); font-size: .88rem; line-height: 1.68; }
.compliance .text-link { margin-top: 14px; }
.compliance-compact { margin-top: 28px; padding: 18px 20px; }
.compliance-compact .compliance-body { font-size: .82rem; }

/* The inline-link and share-row rules used to live here. They moved to
   blog.css because the article pages need them too, and the article pages link
   blog.css and header.css only - a fourth stylesheet on the page whose Core Web
   Vitals matter most would be a request bought for two rulesets. Every page
   that links pages.css links blog.css first, so nothing lost access. */

/* ------------------------------------------------------------- cards ------- */

/**
 * One grid for every listing on the site: the tool index, the template index,
 * the glossary index and a category archive. They are all "a set of things with
 * a name, a sentence and a link", and giving them four different grids would
 * have been four places to keep in sync for no reader-visible gain.
 */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(45,61,48,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-4px); border-color: #d3c9b2; box-shadow: 0 22px 48px rgba(45,61,48,.1); }
.card-eyebrow { margin: 0; color: var(--rust); font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.card-title { margin: 0; font-family: var(--serif); font-size: 1.42rem; line-height: 1.18; letter-spacing: -.02em; }
.card-title a { color: var(--forest); text-decoration: none; }
.card-title a:hover { color: var(--rust); }
.card-body { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6; }
.card-meta { margin: auto 0 0; padding-top: 6px; color: var(--muted); font-family: var(--sans); font-size: .74rem; letter-spacing: .03em; }
.card .text-link { margin-top: 8px; }

/* ------------------------------------------------ overflow containment ------- */

/* Every two-column page layout below collapses to a single column on a phone,
   and each of those columns has to be pinned in two places: minmax(0, 1fr) on
   the track, because a bare 1fr means minmax(auto, 1fr) and that auto minimum
   is the item's min-content contribution; and min-width: 0 on the item, because
   its default min-width: auto resolves to the same figure. Miss either and one
   wide descendant sets a floor the column cannot go below. These pages load
   blog.css too, so they inherit .article-body table { min-width: 640px } - which
   is deliberate, tables scroll inside .article-table-wrap rather than squash,
   but it is precisely such a descendant wherever prose carries a table. The
   symptom is prose running off the edge of a phone screen with no scrollbar to
   bring it back, because .site-shell clips the overflow. Kept in one rule
   because the fix is identical for all six. */
.tool-layout > *, .template-layout > *, .term-layout > *, .about-intro > *, .sessions-layout > *, .legal-layout > * { min-width: 0; }

/* ------------------------------------------------------------- tools ------- */

.tool-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .tool-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

.calc-panel {
  padding: 30px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--paper), rgba(244,239,228,.7));
  box-shadow: 0 20px 46px rgba(45,61,48,.08);
}
.calc-fields { display: grid; gap: 18px; margin: 0 0 24px; border: 0; padding: 0; }
.calc-field { display: flex; flex-direction: column; gap: 7px; }
.calc-field label { color: var(--forest); font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.calc-field-hint { color: var(--muted); font-family: var(--sans); font-size: .76rem; line-height: 1.5; }
.calc-field input, .calc-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: white;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
}
.calc-field input:focus-visible, .calc-field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.calc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* `.button` in blog.css is written for anchors; a <button> needs the family and
   the cursor spelled out because the UA stylesheet wins on both. */
.calc-actions .button { font-family: var(--sans); cursor: pointer; }

.calc-result { margin: 26px 0 0; padding: 24px; border: 1px solid #d8ccb3; background: var(--forest); color: #f6f1e6; }
.calc-result[hidden] { display: none; }
.calc-result-label { margin: 0 0 6px; font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .82; }
.calc-result-value { margin: 0; font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -.03em; }
.calc-result-note { margin: 12px 0 0; font-family: var(--sans); font-size: .82rem; line-height: 1.6; opacity: .88; }
.calc-breakdown { display: grid; gap: 2px; margin: 20px 0 0; padding: 0; }
.calc-breakdown div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(246,241,230,.16); font-family: var(--sans); font-size: .84rem; }
.calc-breakdown dt { color: rgba(246,241,230,.78); }
.calc-breakdown dd { margin: 0; font-weight: 700; }
.calc-error { margin: 16px 0 0; color: var(--rust); font-family: var(--sans); font-size: .84rem; font-weight: 600; }
.calc-error[hidden] { display: none; }

.tool-notes { font-family: var(--sans); }
.tool-notes h2 { margin: 0 0 14px; color: var(--forest); font-family: var(--serif); font-size: 1.6rem; letter-spacing: -.02em; }
.tool-notes h2 + p { margin-top: 0; }
.tool-notes ul { margin: 0 0 24px; padding-left: 1.2em; color: var(--ink); font-size: .95rem; line-height: 1.7; }
.tool-notes li { margin-bottom: .55em; }
.tool-notes li::marker { color: var(--gold); font-weight: 800; }
.tool-notes p { color: var(--ink); font-size: .95rem; line-height: 1.7; }

.faq-list { margin: 0; }
.faq-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item summary { color: var(--forest); cursor: pointer; font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1.45; }
.faq-item summary::marker { color: var(--gold); }
.faq-item[open] summary { margin-bottom: 12px; }
.faq-item p { margin: 0 0 .9em; color: var(--ink); font-size: .95rem; line-height: 1.72; }
.faq-item p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- templates ------- */

.template-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .template-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

.template-download {
  padding: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(244,239,228,.9), var(--paper));
  box-shadow: 0 18px 42px rgba(45,61,48,.07);
}
.template-download h2 { margin: 0 0 6px; color: var(--forest); font-family: var(--serif); font-size: 1.5rem; letter-spacing: -.02em; }
.template-facts { display: grid; gap: 2px; margin: 18px 0 22px; padding: 0; }
.template-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: .82rem; }
.template-facts dt { color: var(--muted); }
.template-facts dd { margin: 0; color: var(--forest); font-weight: 700; }
.template-download .button { width: 100%; }

/* The opt-in sits in the main column, between the instructions and the FAQ, as
   a card rather than a banner: the download above it is the reason the reader
   is here, and an offer that competes with it for attention would be trading
   the page's job for a mailing list signup. */
.template-optin { margin: 34px 0; padding: 26px 28px; border: 1px solid var(--line); background: var(--cream); }
.template-optin h2 { margin: 0 0 8px; color: var(--forest); font-family: var(--serif); font-size: 1.3rem; letter-spacing: -.02em; }
.template-optin p { margin: 0 0 14px; color: var(--muted); font-family: var(--sans); font-size: .86rem; line-height: 1.65; }
/* The opt-in is a link to the newsletter provider's own hosted form rather than
   an email field posting here, so all this block needs is the note under the
   button. A form of our own would make the site the controller of a mailing
   list it does not hold, with a consent record to keep, in exchange for
   nothing the provider is not already doing. */
.template-optin .button { width: auto; }
.optin-consent { margin: 12px 0 0; color: var(--muted); font-family: var(--sans); font-size: .74rem; line-height: 1.55; }

/* ---------------------------------------------------------- glossary ------- */

.glossary-jump { margin: 0 0 36px; padding: 16px 18px; border: 1px solid var(--line); background: rgba(244,239,228,.6); }
.glossary-jump h2 { margin: 0 0 10px; color: var(--muted); font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.glossary-jump ul { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.glossary-jump a { display: inline-block; padding: 5px 11px; border: 1px solid var(--line); background: var(--paper); color: var(--forest-soft); font-family: var(--sans); font-size: .78rem; font-weight: 700; text-decoration: none; }
.glossary-jump a:hover { border-color: var(--gold); color: var(--rust); }

.glossary-group { margin: 0 0 44px; }
.glossary-group > h2 { margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--gold); color: var(--forest); font-family: var(--serif); font-size: 1.75rem; letter-spacing: -.02em; scroll-margin-top: 100px; }
.glossary-terms { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.glossary-term { padding: 18px 0; border-bottom: 1px solid var(--line); }
.glossary-term h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.28rem; line-height: 1.2; }
.glossary-term h3 a { color: var(--forest); text-decoration: none; }
.glossary-term h3 a:hover { color: var(--rust); text-decoration: underline; text-underline-offset: 4px; }
.glossary-term p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.62; }

.term-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 48px; align-items: start; }
@media (max-width: 900px) { .term-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.term-aliases { margin: 0 0 28px; color: var(--muted); font-family: var(--sans); font-size: .84rem; line-height: 1.6; }
.term-aliases strong { color: var(--forest); font-weight: 700; }
.term-aside { padding: 24px; border: 1px solid var(--line); background: rgba(244,239,228,.55); font-family: var(--sans); }
.term-aside h2 { margin: 0 0 12px; color: var(--forest); font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.term-aside h2:not(:first-child) { margin-top: 26px; }
.term-aside ul { margin: 0; padding: 0; list-style: none; }
.term-aside li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .86rem; line-height: 1.5; }
.term-aside li:last-child { border-bottom: 0; }
.term-aside a { color: var(--forest-soft); font-weight: 600; text-decoration: none; }
.term-aside a:hover { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- about ------- */

/* The portrait sits beside the biography and above it on a phone. It is the
   only image on the page: everything below the first block is method rather
   than personality, and illustrating a disclosure list would undercut it. */
.about-intro { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; margin-bottom: 8px; }
@media (max-width: 760px) { .about-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.about-portrait { width: 220px; height: 220px; border-radius: 50%; border: 6px solid var(--paper); object-fit: cover; box-shadow: 0 18px 42px rgba(45,61,48,.12); }
@media (max-width: 760px) { .about-portrait { width: 148px; height: 148px; } }

/* A panel, not a bulleted list in the flow. A disclosure that looks like body
   copy is read like body copy, which is to say skimmed - and this is the one
   list on the site that a reader is worse off for skimming. */
.about-boundary-list { display: grid; gap: 12px; margin: 0 0 22px; padding: 24px 26px 24px 46px; border-left: 4px solid var(--gold); background: var(--paper); box-shadow: 0 14px 32px rgba(45,61,48,.05); color: var(--ink); font-family: var(--sans); font-size: .93rem; line-height: 1.6; }

.about-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.about-rule { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border: 1px solid var(--line); background: var(--paper); }
.about-rule h3 { margin: 0; color: var(--forest); font-family: var(--serif); font-size: 1.2rem; letter-spacing: -.02em; }
.about-rule p { margin: 0; color: var(--ink); font-family: var(--sans); font-size: .9rem; line-height: 1.6; }
.about-rule .text-link { margin-top: auto; font-size: .78rem; }

/* ---------------------------------------------------------- sessions ------- */

.sessions-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .sessions-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.sessions-list { display: grid; gap: 18px; margin: 0 0 34px; padding: 0; list-style: none; }
.session-card { padding: 24px 26px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 14px 32px rgba(45,61,48,.05); }
.session-card h3 { margin: 0 0 8px; color: var(--forest); font-family: var(--serif); font-size: 1.35rem; letter-spacing: -.02em; }
.session-card p { margin: 0 0 12px; color: var(--ink); font-size: .93rem; line-height: 1.65; }
.session-card p:last-child { margin-bottom: 0; }
.session-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.session-enquiry { padding: 28px; border: 1px solid #d8ccb3; background: linear-gradient(160deg, rgba(244,239,228,.9), var(--paper)); box-shadow: 0 18px 42px rgba(45,61,48,.07); }
.session-enquiry h2 { margin: 0 0 10px; color: var(--forest); font-family: var(--serif); font-size: 1.5rem; letter-spacing: -.02em; }
.session-enquiry p { margin: 0 0 16px; color: var(--ink); font-family: var(--sans); font-size: .9rem; line-height: 1.65; }
.session-price { margin: 0 0 18px; padding: 14px 16px; border-left: 4px solid var(--gold); background: rgba(255,253,248,.9); color: var(--forest); font-family: var(--sans); font-size: .88rem; font-weight: 600; line-height: 1.55; }

/* The published floor, at the top of the enquiry panel. It is set large on
   purpose: it is the one thing a reader wants before they will spend two
   minutes on a form, and the panel is where they look for it. The approximate
   equivalents sit directly under it, small and muted - present for the reader
   whose currency is not their language's, quiet for everyone else. */
.session-enquiry .session-price-from { display: flex; align-items: baseline; gap: 10px; margin: 0 0 3px; }
.session-enquiry .session-price-from span { color: var(--muted); font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.session-enquiry .session-price-from strong { color: var(--forest); font-family: var(--serif); font-size: 2.1rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.session-enquiry .session-price-equivalent { margin: 0 0 18px; color: var(--muted); font-family: var(--sans); font-size: .78rem; line-height: 1.5; }

.scope-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.scope-col { padding: 22px 24px; border: 1px solid var(--line); background: var(--paper); }
.scope-col h3 { margin: 0 0 12px; font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.scope-col.scope-yes h3 { color: var(--forest); }
.scope-col.scope-no h3 { color: var(--rust); }
.scope-col ul { margin: 0; padding-left: 1.15em; color: var(--ink); font-family: var(--sans); font-size: .9rem; line-height: 1.62; }
.scope-col li { margin-bottom: .5em; }
.scope-col.scope-yes li::marker { color: var(--forest); }
.scope-col.scope-no li::marker { color: var(--rust); }

/* ------------------------------------------------------------- legal ------- */

.legal-layout { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.legal-toc { position: sticky; top: 96px; padding: 22px 24px; border: 1px solid var(--line); background: rgba(244,239,228,.55); font-family: var(--sans); }
@media (max-width: 900px) { .legal-toc { position: static; } }
.legal-toc h2 { margin: 0 0 12px; color: var(--forest); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.legal-toc ol { margin: 0; padding-left: 1.3em; }
.legal-toc li { margin-bottom: .55em; font-size: .85rem; line-height: 1.45; }
.legal-toc a { color: var(--forest-soft); text-decoration: none; }
.legal-toc a:hover { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }
.legal-updated { margin: 0 0 28px; color: var(--muted); font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .04em; }
.legal-body { font-size: 1.04rem; }
.legal-body h2 { font-size: clamp(1.55rem, 3vw, 1.95rem); }
.legal-body h2::before { width: 42px; }
.legal-body h3 { font-size: 1.28rem; }
.legal-body p, .legal-body li { font-family: var(--sans); font-size: .98rem; line-height: 1.75; }
.legal-body table { min-width: 0; }

/* -------------------------------------------------------------- data ------- */
/* The results page, /es/datos/ and its siblings. The tables themselves reuse
   .article-body's table rules, so what is left is the four things that page
   adds inside a cell: the headline count, the spread under an average, the
   ranked breakdown of a distribution, and the currency marker on the rows that
   cannot pool the three languages. */

.data-headline { margin: 0 0 8px; padding: 14px 16px; border-left: 4px solid var(--gold); background: rgba(244,239,228,.55); color: var(--forest); font-family: var(--sans); font-size: .92rem; line-height: 1.55; }
.data-runs { display: inline-block; margin-left: 14px; color: var(--muted); font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.data-scope { color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
.article-body .data-spread { color: var(--muted); font-family: var(--sans); font-size: .76rem; line-height: 1.5; }
.article-body ul.data-breakdown { margin: 0; padding: 0; list-style: none; }
.data-breakdown li { display: flex; justify-content: space-between; gap: 18px; padding: 3px 0; border-bottom: 1px dotted #e8e0d2; font-size: .82rem; }
.data-breakdown li:last-child { border-bottom: 0; }
.data-breakdown strong { color: var(--forest); font-variant-numeric: tabular-nums; }
/* The provisional mark, in the row header beside the measure's name. Rust
   rather than gold, because gold is what the page uses to draw the eye to a
   figure it stands behind, and this is the opposite claim. Small caps and a
   hairline border so it reads as a stamp on the row rather than as part of the
   measure's name - it has to survive being screenshotted next to the number. */
.data-tier { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid rgba(157,78,45,.45); border-radius: 2px; color: var(--rust); font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }
/* The sentence under a table that carries one. Same muted register as
   .data-spread: it is a footnote to the numbers above it, not a warning. */
.article-body .data-note { margin: 10px 0 0; color: var(--muted); font-family: var(--sans); font-size: .8rem; line-height: 1.6; }