/* ============================================================
   Economía Hoy — an independent analysis of the Latin American economy
   Shared stylesheet. Deep teal + amber over warm newsprint grey.
   Headline: Newsreader (editorial serif) · Body: IBM Plex Sans
   Data/numerals: IBM Plex Mono.  All fonts self-hosted at finalize.
   ============================================================ */

:root {
  /* palette */
  --paper:      #E6DFCF;   /* warm newsprint grey */
  --paper-2:    #EFEAE0;   /* raised card */
  --paper-3:    #F5F1E8;   /* lightest inset */
  --ink:        #16211F;   /* near-black, teal-tinted */
  --ink-soft:   #333B36;
  --muted:      #6A6656;   /* meta / labels */
  --line:       #CEC5B0;   /* hairlines on paper */
  --line-soft:  #DBD3C0;

  --teal:       #0E4A44;   /* deep teal, primary */
  --teal-mid:   #0C3A36;
  --teal-deep:  #0A302C;
  --teal-dark:  #08211E;   /* sponsor / footer backing */
  --teal-black: #061512;

  --amber:      #B96D12;   /* accent on paper */
  --amber-ink:  #9C5A0D;   /* accent hover / text on light */
  --amber-br:   #E0A836;   /* accent on dark */

  --pos:        #2E7D5B;   /* positive / growth */
  --neg:        #B4552F;   /* negative / warning terracotta */

  --maxw: 1360px;
  --gutter: clamp(20px, 5vw, 64px);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: var(--amber-ink); text-decoration: none; }
a:hover { color: var(--amber); }
::selection { background: var(--amber-br); color: var(--teal-black); }
button { font-family: inherit; }
figure { margin: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.kicker {
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--amber);
}
.kicker--teal { color: var(--teal); }
.rule { height: 2px; background: var(--ink); border: 0; margin: 0; }

/* ============================================================
   MASTHEAD + NAV
   ============================================================ */
.masthead { background: var(--paper); border-bottom: 2px solid var(--ink); }
.mast-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 20px var(--gutter) 16px; max-width: var(--maxw); margin: 0 auto;
}
.wordmark {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(26px, 3.6vw, 40px); letter-spacing: .005em; line-height: 1;
  white-space: nowrap;
}
.wordmark:hover { color: var(--teal); }
.nav { display: flex; gap: clamp(14px, 1.8vw, 30px); align-items: center; }
.nav a {
  font-family: var(--sans); font-weight: 600; font-size: 13.5px; letter-spacing: .02em;
  color: var(--ink-soft); text-transform: none; white-space: nowrap; position: relative;
  padding: 4px 0;
}
.nav a:hover { color: var(--teal); }
.nav a[aria-current="page"] { color: var(--teal); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--amber);
}
.mast-tagline {
  border-top: 1px solid var(--line);
  font-family: var(--sans); font-weight: 600; font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--teal);
  padding: 9px var(--gutter); max-width: var(--maxw); margin: 0 auto;
}
.nav-toggle {
  display: none; background: none; border: 1.5px solid var(--ink); color: var(--ink);
  width: 44px; height: 40px; border-radius: 3px; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* ============================================================
   HOMEPAGE — FRONT
   ============================================================ */
.section { padding: clamp(44px, 6vw, 84px) 0; }
.section--teal { background: var(--teal-mid); color: var(--paper-3); }
.section--dark { background: var(--teal-dark); color: var(--paper-3); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); margin-top: 12px; }
.section-head .rule-line { flex: 1; height: 2px; background: var(--ink); align-self: center; }
.section--teal .section-head .rule-line, .section--dark .section-head .rule-line { background: rgba(255,255,255,.28); }
.section-intro { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); max-width: 62ch; margin: 8px 0 0; }

/* FRONT band */
.front { padding-top: clamp(36px, 4vw, 60px); }
.front-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.front-lead { display: block; }
.front-lead .figure-frame { aspect-ratio: 16 / 9; }
.front-cat { margin-top: 20px; }
.front-lead h1 {
  font-size: clamp(38px, 5.6vw, 78px); line-height: 1.02; letter-spacing: -.01em;
  margin: 16px 0 18px; color: var(--ink);
}
.front-lead .dek { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; color: var(--ink-soft); max-width: 40ch; }
.front-lead .byline { margin-top: 18px; }
.byline { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--muted); }
.byline strong { color: var(--teal); font-weight: 600; }

.front-side { display: flex; flex-direction: column; }
.front-side .side-head {
  font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber); padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 4px;
}
.side-item { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); }
.side-item:last-child { border-bottom: 0; }
.side-item .s-cat { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--teal); }
.side-item h3 { font-size: clamp(19px, 1.5vw, 22px); margin: 7px 0 6px; color: var(--ink); }
.side-item:hover h3 { color: var(--amber-ink); }
.side-item .s-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* figure frame (images = placeholders) */
.figure-frame {
  position: relative; overflow: hidden; background: var(--teal-deep);
  border: 1px solid var(--line);
}
.figure-frame img { width: 100%; height: 100%; object-fit: cover; }
.figure-tag {
  position: absolute; left: 14px; top: 14px; background: var(--teal); color: var(--paper-3);
  font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 10px;
}

/* ============================================================
   ATLAS — the signature
   ============================================================ */
.atlas { background: var(--teal-mid); color: var(--paper-3); }
.atlas .section-head h2 { color: var(--paper-3); }
.atlas .section-intro { color: #A9C7C1; }
.atlas-grid { display: grid; grid-template-columns: 380px 1fr; gap: 0; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); }

.atlas-rail { background: var(--teal-deep); border-right: 1px solid rgba(255,255,255,.12); }
.atlas-map { position: relative; }
.atlas-map { margin: 0; width: 100%; }
.atlas-map .map-slot {
  width: 100%; height: 500px; display: flex; align-items: center; justify-content: center; text-align: center;
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(224,168,54,.10), transparent 62%),
    var(--teal-black);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
/* graticule — abstract grid, not real geography */
.map-grat {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(159,195,188,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,195,188,.10) 1px, transparent 1px);
  background-size: 40px 40px; background-position: center;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 45%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 42%, #000 45%, transparent 78%);
}
/* corner registration marks — reads as a prepared plate awaiting data */
.map-reg { position: absolute; width: 16px; height: 16px; border: 1.5px solid rgba(224,168,54,.55); pointer-events: none; }
.map-reg--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.map-reg--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.map-reg--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.map-reg--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.map-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 24px; color: rgba(224,168,54,.9); }
.map-center svg { width: 30px; height: 30px; }
.map-slot .map-note {
  font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.1;
  letter-spacing: 0; text-transform: none; color: var(--paper-3);
}
.map-slot .map-sub {
  font-family: var(--sans); font-weight: 600; font-size: 10.5px; line-height: 1.5;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(237,231,214,.42); max-width: 24ch;
}
.atlas-list { list-style: none; margin: 0; padding: 0; }
.atlas-list li { margin: 0; }
.atlas-econ {
  width: 100%; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px;
  text-align: left; background: none; border: 0; border-top: 1px solid rgba(255,255,255,.09);
  padding: 13px 18px; cursor: pointer; color: var(--paper-3);
}
.atlas-econ:hover { background: rgba(255,255,255,.05); }
.atlas-econ[aria-selected="true"] { background: var(--amber-br); }
.atlas-econ .e-code { font-family: var(--mono); font-size: 11px; font-weight: 600; opacity: .75; letter-spacing: .04em; }
.atlas-econ .e-name { font-family: var(--serif); font-size: 19px; }
.atlas-econ .e-cur { font-family: var(--mono); font-size: 11px; opacity: .7; }
.atlas-econ[aria-selected="true"] .e-code,
.atlas-econ[aria-selected="true"] .e-name,
.atlas-econ[aria-selected="true"] .e-cur { color: var(--teal-black); opacity: 1; }

/* dossier */
.dossier-wrap { background: var(--paper-2); color: var(--ink); }
.dossier { display: none; padding: clamp(26px, 3vw, 40px); }
.dossier[data-active="true"] { display: block; animation: fadeUp .32s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px);} to { opacity:1; transform:none;} }
.dossier-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 2px solid var(--teal-mid); padding-bottom: 18px; }
.dossier-top h3 { font-size: clamp(32px, 3.6vw, 46px); color: var(--teal-mid); margin-top: 10px; }
.dossier-cur { text-align: right; }
.dossier-cur .lab { font-family: var(--sans); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dossier-cur .val { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); color: var(--teal-mid); margin-top: 6px; }
.dossier-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 22px 0; }
.dfact { background: var(--paper-3); padding: 16px 18px; }
.dfact .lab { font-family: var(--sans); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dfact .val { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-top: 8px; line-height: 1.15; }
.dossier .runs-on { font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.dossier .runs-on b { font-family: var(--serif); font-weight: 600; }
.dossier-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--amber-ink); white-space: nowrap; }
.dossier-cta:hover { gap: 12px; color: var(--amber); }

.atlas-static { margin-top: 28px; }
.atlas-static .side-head { color: var(--amber-br); border-color: rgba(255,255,255,.28); }
.econ-index { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.econ-index a {
  display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14); color: var(--paper-3); font-family: var(--sans); font-weight: 600; font-size: 14px;
}
.econ-index a:hover { background: rgba(255,255,255,.06); color: #fff; }
.econ-index a span { font-family: var(--mono); font-size: 11px; opacity: .6; }

/* ============================================================
   FEED / CARDS (Markets, Trade, Analysis bands)
   ============================================================ */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 34px); }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
.card {
  display: flex; flex-direction: column; background: var(--paper-2);
  border: 1px solid var(--line); height: 100%;
}
.card .figure-frame { aspect-ratio: 16 / 9; border: 0; border-bottom: 1px solid var(--line); }
.card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.card .c-cat { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--teal); }
.card h3 {
  font-size: clamp(21px, 1.7vw, 25px); margin: 8px 0 10px; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card:hover h3 { color: var(--amber-ink); }
.card .c-dek {
  font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card .byline { margin-top: auto; }

/* section as list (for smaller bands) */
.section--teal .card, .section--dark .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.section--teal .card h3, .section--dark .card h3 { color: var(--paper-3); }
.section--teal .card .c-dek, .section--dark .card .c-dek { color: #C3D6D2; }
.section--teal .card .c-cat, .section--dark .card .c-cat { color: var(--amber-br); }
.section--teal .byline, .section--dark .byline { color: #A9C7C1; }
.section--teal .byline strong, .section--dark .byline strong { color: var(--amber-br); }
.section--teal .card:hover h3, .section--dark .card:hover h3 { color: var(--amber-br); }

/* CSS-only "more" expander */
.more-toggle { display: none; }
.more-hidden { display: none; }
.more-toggle:checked ~ .more-hidden { display: grid; }
.more-label {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--teal);
  border: 1.5px solid var(--teal); padding: 11px 20px; border-radius: 3px;
}
.more-label:hover { background: var(--teal); color: var(--paper-3); }
.more-toggle:checked ~ .more-label .more-more { display: none; }
.more-label .more-less { display: none; }
.more-toggle:checked ~ .more-label .more-less { display: inline; }

/* ============================================================
   DATA band (structural, evergreen)
   ============================================================ */
.data-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
.bythenumbers { background: var(--teal-mid); color: var(--paper-3); padding: 26px 28px; }
.bythenumbers .side-head { color: var(--amber-br); border-color: rgba(255,255,255,.24); }
.btn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 26px; margin-top: 6px; }
.btn-item { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.14); }
.btn-item:nth-child(1), .btn-item:nth-child(2) { border-top: 0; }
.btn-num { font-family: var(--serif); font-size: clamp(30px, 3vw, 40px); line-height: 1; color: var(--paper-3); }
.btn-num small { font-size: .48em; color: var(--amber-br); }
.btn-lab { font-family: var(--sans); font-size: 13px; line-height: 1.4; color: #A9C7C1; margin-top: 8px; }

.matrix-card { background: var(--paper-2); border: 1px solid var(--line); padding: 22px 24px; }
.matrix-card .side-head { color: var(--amber); border-color: var(--ink); }

/* ============================================================
   SPONSORS — "The Register of Support"
   ============================================================ */
.backers { background: var(--teal-dark); color: var(--paper-3); }
.backers .kicker { color: var(--amber-br); }
.backers h2 { font-size: clamp(26px, 3vw, 38px); color: var(--paper-3); margin: 12px 0 0; max-width: 22ch; }
.backers .lede { color: #A9C7C1; font-size: 18px; max-width: 60ch; margin-top: 14px; }
.backers-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.sponsor {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--teal-black); border: 1px solid rgba(255,255,255,.1); padding: 26px 22px; text-align: center;
  color: #B9CFCA;
}
.sponsor:hover { border-color: rgba(224,168,54,.5); color: #fff; }
.sponsor img { width: auto; max-width: 62%; height: 34px; object-fit: contain; opacity: .85; }
.backers-featured .sponsor img { height: 42px; }
.sponsor-blurb { font-family: var(--sans); font-size: 13px; line-height: 1.4; color: #90A9A3; min-height: 1px; }
.sponsor-blurb:empty { display: none; }
.backers-featured .sponsor { aspect-ratio: auto; min-height: 148px; }
.backers-sep { display: flex; align-items: center; gap: 16px; margin: 40px 0 20px; }
.backers-sep .lab { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #6E8983; white-space: nowrap; }
.backers-sep .ln { flex: 1; height: 1px; background: rgba(255,255,255,.14); }
.backers-roll { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.backers-roll .sponsor { padding: 18px 12px; min-height: 84px; }
.backers-roll .sponsor img { height: 26px; opacity: .66; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--teal-black); color: #9FB6B1; }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 34px; padding: clamp(40px, 5vw, 64px) 0; }
.footer-brand .wordmark { color: var(--paper-3); font-size: 30px; }
.footer-brand .wordmark:hover { color: var(--amber-br); }
.footer-disclaimer { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: #B6CCC7; max-width: 46ch; margin-top: 16px; }
.footer-col h4 { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-br); margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: #9FB6B1; font-size: 15px; }
.footer-col a:hover { color: #fff; }
.footer-base { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-base span { font-family: var(--mono); font-size: 12px; color: #6E8983; }

/* ============================================================
   ARTICLE / LONG-FORM
   ============================================================ */
.article { padding-bottom: 40px; }
.article-hero { background: var(--teal-mid); color: var(--paper-3); padding: clamp(40px, 5vw, 76px) 0 clamp(30px, 4vw, 52px); }
.article-hero .kicker { color: var(--amber-br); }
.article-hero h1 { font-size: clamp(34px, 5vw, 64px); line-height: 1.04; color: var(--paper-3); margin: 16px 0 20px; max-width: 20ch; }
.article-hero .wrap { max-width: 1080px; }
.article-hero .standfirst { font-family: var(--serif); font-size: clamp(19px, 2vw, 26px); line-height: 1.45; color: #CFE0DC; max-width: 40ch; font-weight: 400; }
.article-hero .byline { color: #8FB0AA; margin-top: 22px; }
.article-hero .byline strong { color: var(--amber-br); }

.article-figure-hero { max-width: 1080px; margin: 0 auto; padding-inline: var(--gutter); }
.article-figure-hero .figure-frame { aspect-ratio: 21 / 9; margin-top: -40px; box-shadow: 0 30px 60px -30px rgba(6,21,18,.6); }
.article-figure-hero figcaption { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 10px; }

/* article layout: asymmetric — text in a 760 measure, media extends right to a shared
   1080 container. Everything is flush to ONE left edge (no centre-overflow breakouts). */
.article-body {
  max-width: 1080px; margin: 0 auto; padding-inline: var(--gutter);
  padding-top: clamp(34px, 4vw, 56px); font-size: 19px; line-height: 1.75;
}
.article-body > * { max-width: 760px; margin-left: 0; margin-right: 0; }
.article-body > figure,
.article-body > table,
.article-body > .figrail,
.article-body > .chart,
.article-body > .breakout { max-width: 1080px; }
.article-body > .pullquote,
.article-body > .blockquote,
.article-body > .callout,
.article-body > .note { max-width: 760px; }
.article-body > p, .article-body > h2, .article-body > h3, .article-body > .lead,
.article-body > ol, .article-body > ul { color: var(--ink); }
.article-body p { margin: 0 0 1.15em; }
.lead {
  font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.5; color: var(--ink);
  margin: 0 0 1.1em;
}
.lead--dropcap::first-letter,
.dropcap::first-letter {
  font-family: var(--serif); font-weight: 600; float: left; color: var(--amber);
  padding: .02em .12em 0 0; margin-top: .02em;
}
.lead--dropcap::first-letter { font-size: 3.9em; line-height: .8; }
.dropcap::first-letter { font-size: 3.3em; line-height: .82; }
.article-section { counter-increment: sec; margin-top: 2.2em; }
.article-section > h2 {
  font-size: clamp(26px, 2.6vw, 34px); color: var(--ink); margin: 0 0 .55em;
  padding-top: .3em; position: relative;
}
.article-section > h2::before {
  content: counter(sec, decimal-leading-zero); display: block;
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--amber);
  margin-bottom: 10px;
}
.article-body { counter-reset: sec; }
.entity-ref { color: var(--teal); font-weight: 500; border-bottom: 1px solid rgba(14,74,68,.3); }
.entity-ref:hover { color: var(--amber-ink); border-color: var(--amber); }
.article-body a:not(.entity-ref):not(.related-links a) { border-bottom: 1px solid rgba(185,109,18,.35); }

/* breakout media sit flush-left in the wider container (no transform centring) */
.breakout { width: auto; margin-left: 0; transform: none; }

/* ---------- PALETTE_SPEC components ---------- */
.pullquote { margin: 1.8em 0; padding: 0 0 0 24px; border-left: 3px solid var(--amber); }
.pullquote p { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.28; color: var(--teal); margin: 0; font-weight: 500; }
.blockquote { margin: 1.6em 0; padding: 20px 24px; background: var(--paper-2); border: 1px solid var(--line); }
.blockquote p { font-family: var(--serif); font-size: 20px; line-height: 1.5; color: var(--ink); margin: 0 0 10px; font-style: italic; }
.blockquote cite { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 14px; color: var(--muted); }
.callout { margin: 1.7em 0; padding: 22px 24px; background: var(--teal-mid); color: var(--paper-3); border-left: 4px solid var(--amber-br); }
.callout p { margin: 0; font-size: 17px; line-height: 1.55; color: #E4EEEB; }
.callout p strong { color: #fff; }
.note {
  font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink-soft);
  background: var(--paper-3); border: 1px dashed var(--line); border-left: 3px solid var(--teal);
  padding: 14px 18px; margin: 1.5em 0;
}
.note::before { content: "Note — "; font-weight: 700; color: var(--teal); }

/* by-the-numbers rail (contextual aside) */
.figrail {
  margin: 1.8em 0; padding: 22px 24px; background: var(--teal-dark); color: var(--paper-3);
}
.figrail .rail-head { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-br); margin-bottom: 16px; }
.figrail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 26px; align-items: start; }
.figrail .fr-item { display: flex; flex-direction: column; }
.figrail .fr-item .fr-num { font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); line-height: 1.05; color: var(--paper-3); min-height: 2.1em; display: flex; align-items: flex-end; }
.figrail .fr-item .fr-lab { font-family: var(--sans); font-size: 13px; line-height: 1.35; color: #A9C7C1; margin-top: 8px; }

/* versus / compare */
.versus { width: 100%; border-collapse: collapse; margin: 1.7em 0; font-size: 15.5px; }
.versus caption { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); text-align: left; padding-bottom: 12px; }
.versus th, .versus td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.versus thead th { font-family: var(--sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); background: var(--paper-2); }
.versus tbody th { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--ink); width: 22%; }
.versus td { font-family: var(--sans); color: var(--ink-soft); }

/* datatable */
.datatable { width: 100%; border-collapse: collapse; margin: 1.7em 0; font-size: 15px; }
.datatable caption { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); text-align: left; padding-bottom: 12px; }
.datatable th, .datatable td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.datatable thead th { font-family: var(--sans); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-3); background: var(--teal-mid); }
.datatable td.num, .datatable th.num { text-align: right; font-family: var(--mono); font-size: 13.5px; }
.datatable tbody tr:nth-child(even) { background: var(--paper-2); }

/* statblocks */
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); margin: 1.7em 0; }
.statblock { background: var(--paper-3); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.stat-num { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 42px); line-height: 1; color: var(--teal); }
.stat-label { font-family: var(--sans); font-size: 13px; line-height: 1.4; color: var(--muted); }

/* timeline */
.timeline { list-style: none; margin: 1.8em 0; padding: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 24px 26px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); border: 2px solid var(--paper); }
.timeline li:last-child { padding-bottom: 0; }
.t-when { display: block; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--teal); letter-spacing: .01em; margin-bottom: 4px; }
.t-what { display: block; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }

/* charts */
.chart { margin: 1.8em 0; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart figcaption { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.chart .bar-label { font-family: var(--sans); font-size: 12.5px; fill: var(--ink-soft); }
.chart .bar-val { font-family: var(--mono); font-size: 12px; fill: var(--muted); }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .gridline { stroke: var(--line-soft); stroke-width: 1; }
.chart .bar-rect { fill: var(--teal); }
.chart .bar-rect.alt { fill: var(--amber); }
.chart .line-path { fill: none; stroke: var(--amber); stroke-width: 2.5; }
.chart .line-dot { fill: var(--teal); }
.chart-table { margin-top: 6px; }
.chart-table summary { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--teal); cursor: pointer; padding: 6px 0; }

/* article figure + gallery + map */
.article-figure { margin: 1.8em 0; }
.article-figure .figure-frame { aspect-ratio: 16 / 9; }
.article-figure figcaption, .map-figure figcaption, .gallery figcaption {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-top: 10px;
}
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 1.8em 0; }
.gallery .figure-frame { aspect-ratio: 4 / 3; }
.map-figure { margin: 1.8em 0; }
.map-figure .map-slot {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(224,168,54,.08), transparent 60%), var(--teal-black);
  border: 1px solid var(--line);
}

/* profile & org cards */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 1.8em 0; }
.profile-card { background: var(--paper-2); border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.profile-card .p-photo, .profile-card .p-badge { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: var(--teal-deep); }
.profile-card.no-photo .p-badge {
  display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 22px; color: var(--amber-br);
}
.profile-card h3 { font-size: 21px; color: var(--ink); }
.profile-card .p-role { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--teal); margin: 0; }
.profile-card p { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin: 4px 0 0; }
.profile-card .p-links { margin-top: auto; padding-top: 8px; }
.profile-card .p-links a { font-weight: 600; font-size: 13px; }
.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 1.8em 0; }
.org-card { display: flex; align-items: center; gap: 12px; background: var(--paper-2); border: 1px solid var(--line); padding: 14px 16px; }
.org-card:hover { border-color: var(--amber); }
.org-logo, .org-card.no-logo .org-badge { width: 40px; height: 40px; flex: none; border-radius: 4px; background: var(--teal-deep); object-fit: contain; }
.org-card.no-logo .org-badge { display: flex; align-items: center; justify-content: center; font-family: var(--serif); color: var(--amber-br); font-size: 17px; }
.org-name { font-family: var(--serif); font-size: 17px; color: var(--ink); display: block; line-height: 1.15; }
.org-host { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* related / further reading */
.related { margin: 3em auto 0; max-width: 1080px; padding-inline: var(--gutter); }
.related h2 { font-size: 15px; font-family: var(--sans); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.related-links, .further-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 30px; }
.related-links a, .further-grid a { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.related-links a { font-family: var(--serif); font-size: 21px; line-height: 1.2; }
.related-links a .rl-cat { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }
.related-links a:hover, .further-grid a:hover { color: var(--amber-ink); }

/* ============================================================
   CATEGORY INDEX
   ============================================================ */
.cat-hero { background: var(--teal-mid); color: var(--paper-3); padding: clamp(44px, 6vw, 84px) 0 clamp(34px, 4vw, 56px); }
.cat-hero h1 { font-size: clamp(38px, 6vw, 76px); color: var(--paper-3); margin: 14px 0 18px; }
.cat-hero .cat-intro { font-family: var(--serif); font-size: clamp(19px, 2vw, 25px); line-height: 1.45; color: #CFE0DC; max-width: 48ch; }
.cat-list { list-style: none; margin: 0; padding: 0; max-width: 980px; }
.cat-list li { border-bottom: 1px solid var(--line); }
.cat-list a { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: baseline; padding: 26px 0; color: var(--ink); }
.cat-list a .n { font-family: var(--mono); font-size: 13px; color: var(--amber); padding-top: 6px; }
.cat-list a h3 { font-size: clamp(24px, 2.6vw, 33px); margin: 0 0 8px; }
.cat-list a:hover h3 { color: var(--amber-ink); }
.cat-list a .c-dek { font-size: 16px; line-height: 1.5; color: var(--ink-soft); max-width: 68ch; }
.cat-list a .c-kind { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--teal); white-space: nowrap; padding-top: 6px; }

/* sections hub row on category pages */
.section-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.section-nav a {
  font-family: var(--sans); font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,.28); color: var(--paper-3);
}
.section-nav a:hover, .section-nav a[aria-current="page"] { background: var(--amber-br); color: var(--teal-black); border-color: var(--amber-br); }

/* ============================================================
   SIMPLE PAGES (About / Contact / 404)
   ============================================================ */
.page-body { max-width: 820px; margin: 0 auto; padding: clamp(40px, 5vw, 70px) var(--gutter); font-size: 19px; line-height: 1.7; }
.page-body h1 { font-size: clamp(36px, 5vw, 60px); color: var(--ink); margin-bottom: 24px; }
.page-body h2 { font-size: clamp(24px, 2.4vw, 30px); color: var(--ink); margin: 1.6em 0 .5em; }
.page-body p { color: var(--ink-soft); }
.page-404 { text-align: center; padding: clamp(70px, 12vw, 160px) var(--gutter); max-width: 640px; margin: 0 auto; }
.page-404 .big { font-family: var(--serif); font-size: clamp(90px, 18vw, 180px); line-height: .9; color: var(--teal); }
.page-404 h1 { font-size: clamp(28px, 4vw, 40px); color: var(--ink); margin: 10px 0 16px; }
.page-404 p { color: var(--ink-soft); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: .02em;
  background: var(--teal); color: var(--paper-3); padding: 13px 24px; border-radius: 3px;
}
.btn:hover { background: var(--amber); color: var(--teal-black); }

/* contact methods (SVG line-icons, no emoji) */
.contact-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 1.6em 0; list-style: none; padding: 0; }
.contact-methods li { display: flex; gap: 14px; align-items: flex-start; background: var(--paper-2); border: 1px solid var(--line); padding: 18px; }
.contact-methods svg { width: 24px; height: 24px; flex: none; stroke: var(--teal); fill: none; stroke-width: 1.6; margin-top: 2px; }
.contact-methods .m-lab { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; }
.contact-methods .m-val { font-size: 16px; color: var(--ink); }

/* ============================================================
   STYLEGUIDE
   ============================================================ */
.sg-section { padding: 40px 0; border-bottom: 1px solid var(--line); }
.sg-section > h2 { font-size: 30px; color: var(--ink); margin-bottom: 6px; }
.sg-label { font-family: var(--mono); font-size: 12px; color: var(--amber); margin-bottom: 24px; display: block; }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.sg-swatch { border: 1px solid var(--line); }
.sg-swatch .chip { height: 72px; }
.sg-swatch .meta { padding: 8px 10px; font-family: var(--mono); font-size: 11px; }
.sg-swatch .meta b { display: block; font-family: var(--sans); font-size: 12px; color: var(--ink); margin-bottom: 2px; }

/* restrained reveal */
[data-reveal] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .front-grid { grid-template-columns: 1fr; }
  .front-side { border-top: 2px solid var(--ink); padding-top: 8px; }
  .atlas-grid { grid-template-columns: 320px 1fr; }
  .data-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  body { font-size: 17px; }
  .nav { display: none; }
  .masthead.open .nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    width: 100%; border-top: 1px solid var(--line); margin-top: 8px;
  }
  .masthead.open .mast-top { flex-wrap: wrap; }
  .masthead.open .nav a { width: 100%; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: inline-flex; }
  .card-grid, .card-grid.two { grid-template-columns: 1fr 1fr; }
  .atlas-grid { grid-template-columns: 1fr; }
  .atlas-rail { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .atlas-map .map-slot { aspect-ratio: 16 / 10; }
  .econ-index { grid-template-columns: repeat(2, 1fr); }
  .backers-featured { grid-template-columns: 1fr; }
  .backers-roll { grid-template-columns: repeat(3, 1fr); }
  .cat-list a { grid-template-columns: 1fr; gap: 6px; }
  .cat-list a .n, .cat-list a .c-kind { padding-top: 0; }
  .article-figure-hero .figure-frame { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  :root { --gutter: 18px; }
  /* tables keep their width but scroll inside their own box — never the page */
  .article-body > table, .article-body .breakout table, .page-body table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .versus th, .versus td, .datatable th, .datatable td { white-space: normal; }
  .card-grid, .card-grid.two { grid-template-columns: 1fr; }
  .dossier-facts { grid-template-columns: 1fr; }
  .dossier-top { flex-direction: column; }
  .dossier-cur { text-align: left; }
  .btn-grid { grid-template-columns: 1fr; }
  .backers-roll { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; }
  .breakout { width: 100%; margin-left: 0; transform: none; }
  .article-hero h1 { font-size: clamp(30px, 8vw, 40px); }
  .related-links, .further-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   P2 — live atlas map, real-photo credits, dossier photos, org-card fix
   ============================================================ */
.atlas-map { margin: 0; width: 100%; }
.atlas-svg {
  display: block; width: 100%; height: auto;
  background: radial-gradient(circle at 55% 42%, rgba(224,168,54,.07), transparent 62%), var(--teal-black);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mc { fill: rgba(237,231,214,.05); stroke: rgba(237,231,214,.2); stroke-width: 1; }
.mc.econ { fill: rgba(237,231,214,.14); cursor: pointer; transition: fill .25s ease; outline: none; }
.mc.econ:hover, .mc.econ:focus-visible { fill: rgba(224,168,54,.4); }
.mc.econ.active { fill: var(--amber-br); stroke: rgba(255,255,255,.35); }
.pin { cursor: pointer; outline: none; }
.pin-dot { fill: var(--amber-br); stroke: var(--teal-black); stroke-width: 3.5; transition: r .2s ease; }
.pin-lab {
  font-family: var(--sans); font-weight: 600; font-size: 30px; letter-spacing: .02em;
  fill: #EDE7D6; opacity: .88; paint-order: stroke; stroke: #061512; stroke-width: 7px; stroke-linejoin: round;
  pointer-events: none;
}
.pin:hover .pin-dot, .pin:focus-visible .pin-dot { r: 13; }
.pin.active .pin-dot { r: 14; fill: #fff; stroke: var(--amber-br); stroke-width: 6; }
.pin.active .pin-lab { fill: #fff; opacity: 1; font-weight: 700; }
.atlas-map figcaption {
  padding: 10px 18px; font-family: var(--sans); font-weight: 700; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--amber-br);
}

/* real-photo credit chip */
.figure-frame { position: relative; }
.img-credit {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  font-family: var(--sans); font-size: 10px; letter-spacing: .04em; color: rgba(237,231,214,.85);
  background: rgba(6,21,18,.55); padding: 3px 8px; border-radius: 2px; pointer-events: none;
}
/* dossier photo banner */
.dossier-photo { position: relative; margin: 0 0 22px; }
.dossier-photo img { width: 100%; aspect-ratio: 16 / 6; object-fit: cover; display: block; }
.dossier-photo figcaption { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 8px; }

/* org-card — cards grow to fit; no clipping, sane line-height */
.org-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.org-card { align-items: flex-start; height: auto; }
.org-card .org-body { display: block; min-width: 0; }
.org-name { white-space: normal; line-height: 1.25; margin-bottom: 3px; }
.org-host {
  display: block; white-space: normal; overflow: visible; text-overflow: clip;
  font-family: var(--sans); font-size: 13.5px; line-height: 1.5; letter-spacing: 0; text-transform: none;
}

/* econ-index flags */
.econ-index a { align-items: center; gap: 10px; justify-content: flex-start; }
.econ-index .flag { width: 21px; height: 14px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.econ-index .e-nm { flex: 1; }
.econ-index a > span:last-child { margin-left: auto; }

/* front rail — fill the column, no dead space under the list */
.front-grid { align-items: stretch; }
.front-side { display: flex; flex-direction: column; }
.front-side .side-item { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.more-toggle:checked ~ .more-hidden { display: grid !important; }
.front-side .more-toggle:checked ~ .more-hidden { display: contents !important; }
.front-side .more-label { margin-top: auto; align-self: flex-start; margin-bottom: 4px; }

/* dossier photo: credit sits in the caption row, not over it */
.dossier-photo .img-credit {
  position: static; order: 2; margin-left: auto; background: none; padding: 0;
  color: var(--muted); font-size: 11px; align-self: baseline; white-space: nowrap;
}
.dossier-photo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.dossier-photo img { width: 100%; }
.dossier-photo figcaption { flex: 1; margin-top: 8px; }

/* From the desk — on narrow/stacked layouts, a 2-up grid instead of one silly-wide column */
@media (max-width: 1080px) {
  .front-side { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
  .front-side .side-head { grid-column: 1 / -1; }
  .front-side .side-item { justify-content: flex-start; padding: 16px 0; }
  .front-side .more-label { grid-column: 1 / -1; justify-self: start; margin-top: 20px; }
}
@media (max-width: 640px) {
  .front-side { grid-template-columns: 1fr; }
}

/* ============================================================
   FRONT v2 — text-first flagship, numbered desk index
   ============================================================ */
.front-grid { align-items: start; }
.front-side { display: block; }
.front-lead h1 { margin-top: 14px; }
.front-lead .figure-frame { margin-top: 28px; aspect-ratio: 16 / 8; }
.desk-list { list-style: none; margin: 0; padding: 0; }
.desk-list li { border-bottom: 1px solid var(--line); }
.desk-list li:last-child { border-bottom: 0; }
.desk-list a { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 17px 0; align-items: baseline; }
.desk-list .d-n { font-family: var(--mono); font-size: 13px; color: var(--amber); }
.desk-list .s-cat { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--teal); }
.desk-list h3 { font-size: clamp(19px, 1.5vw, 22px); margin: 6px 0 5px; color: var(--ink); line-height: 1.15; }
.desk-list a:hover h3 { color: var(--amber-ink); }
.desk-list .s-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
@media (max-width: 1080px) {
  .desk-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
  .desk-list li:nth-last-child(2) { border-bottom: 0; }
}
@media (max-width: 640px) {
  .desk-list { grid-template-columns: 1fr; }
  .desk-list li { border-bottom: 1px solid var(--line); }
  .desk-list li:last-child { border-bottom: 0; }
}

/* interactive commodity matrix */
.matrix-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.matrix-chips .chip {
  font-family: var(--sans); font-weight: 600; font-size: 12.5px; letter-spacing: .02em;
  background: none; border: 1.5px solid var(--line); color: var(--ink-soft);
  padding: 7px 14px; border-radius: 3px; cursor: pointer; transition: all .15s ease;
}
.matrix-chips .chip:hover { border-color: var(--teal); color: var(--teal); }
.matrix-chips .chip.active { background: var(--teal); border-color: var(--teal); color: var(--paper-3); }
.matrix-card tbody tr { transition: opacity .2s ease; }
.matrix-card tbody tr.dim { opacity: .3; }
.matrix-card tbody tr.hot td:first-child { color: var(--amber-ink); font-weight: 600; }
.econ-link { color: var(--teal); font-weight: 600; border-bottom: 1px solid rgba(14,74,68,.3); }
.econ-link:hover { color: var(--amber-ink); border-color: var(--amber); }

/* 360px audit fixes */
@media (max-width: 560px) {
  .econ-index { grid-template-columns: 1fr; }
  .econ-index a { min-width: 0; }
  .econ-index a > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .backers-sep { flex-wrap: wrap; gap: 8px 16px; }
  .backers-sep .lab { white-space: normal; }
}

/* ============================================================
   MASTHEAD v2 — nameplate
   ============================================================ */
.masthead { border-bottom: 0; }
.mast-strip {
  background: var(--teal-black); color: #9FB6B1;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px;
  padding: 8px var(--gutter);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.mast-strip a { color: var(--amber-br); font-weight: 600; }
.mast-strip a:hover { color: #fff; }
.mast-main { text-align: center; padding: clamp(26px, 4vw, 44px) var(--gutter) clamp(14px, 2vw, 22px); }
.mast-main .wordmark { font-size: clamp(42px, 6.5vw, 68px); letter-spacing: .01em; }
.mast-main .mast-tagline {
  border: 0; max-width: none; padding: 0; margin: 14px auto 0;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: 11px; letter-spacing: .22em; color: var(--teal);
}
.mast-main .mast-tagline::before, .mast-main .mast-tagline::after {
  content: ""; height: 1px; background: var(--ink); opacity: .3; width: clamp(24px, 9vw, 130px); flex: none;
}
.mast-navbar {
  border-top: 1px solid var(--ink); border-bottom: 4px double var(--ink);
  display: flex; justify-content: center; align-items: center;
}
.mast-navbar .nav { justify-content: center; gap: clamp(18px, 3.4vw, 48px); padding: 13px var(--gutter); flex-wrap: wrap; }
.mast-navbar .nav a {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.mast-navbar .nav a:hover { color: var(--teal); }
.mast-navbar .nav a[aria-current="page"] { color: var(--teal); }
.mast-navbar .nav a[aria-current="page"]::after { bottom: -4px; }
@media (max-width: 860px) {
  .mast-navbar { padding: 8px var(--gutter); }
  .mast-navbar .nav { padding: 0; }
  .masthead.open .mast-navbar { flex-wrap: wrap; }
  .masthead.open .nav { border-top: 1px solid var(--line); margin-top: 8px; padding-bottom: 6px; }
  .masthead.open .nav a { border-bottom: 1px solid var(--line); text-align: center; }
}

/* flagship composite — dek panel interlocked with the image */
.lead-composite { display: grid; grid-template-columns: minmax(230px, 36%) 1fr; align-items: stretch; margin-top: 28px; }
.lead-panel {
  background: var(--teal-mid); border-top: 4px solid var(--amber-br);
  padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.lead-panel .dek { color: #DCE9E6; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; max-width: none; margin: 0; }
.lead-panel .byline { color: #8FB0AA; margin: 0; }
.lead-panel .byline strong { color: var(--amber-br); }
.lead-cta { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .05em; color: var(--amber-br); }
.front-lead:hover .lead-cta { color: #fff; }
.lead-composite .figure-frame { margin-top: 0; aspect-ratio: auto; min-height: 340px; border: 0; }
.front-lead > .figure-frame { margin-top: 28px; }
@media (max-width: 640px) {
  .lead-composite { grid-template-columns: 1fr; }
  .lead-composite .figure-frame { min-height: 0; aspect-ratio: 16 / 9; order: -1; }
}

/* nav v3 — indexed contents bar, not the small-caps cliché */
.mast-navbar { justify-content: stretch; }
.mast-navbar .nav {
  counter-reset: navi; width: 100%; max-width: var(--maxw); margin: 0 auto;
  justify-content: stretch; gap: 0; padding: 0; flex-wrap: nowrap;
}
.mast-navbar .nav a {
  counter-increment: navi; flex: 1 1 auto;
  display: flex; align-items: baseline; gap: 10px; justify-content: center;
  padding: 15px 18px; border-left: 1px solid var(--line);
  font-family: var(--serif); font-size: clamp(16px, 1.4vw, 18.5px); font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.mast-navbar .nav a:first-child { border-left: 0; }
.mast-navbar .nav a::before {
  content: counter(navi, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--amber);
}
.mast-navbar .nav a:hover { background: var(--paper-2); color: var(--teal); }
.mast-navbar .nav a[aria-current="page"] { background: var(--teal); color: var(--paper-3); }
.mast-navbar .nav a[aria-current="page"]::before { color: var(--amber-br); }
.mast-navbar .nav a[aria-current="page"]::after { display: none; }
@media (max-width: 860px) {
  .masthead.open .nav { flex-direction: column; flex-wrap: wrap; }
  .masthead.open .nav a { border-left: 0; justify-content: flex-start; }
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent}

/* featured-logo-fix: bigger + centered featured sponsor marks */
.backers-featured .sponsor,[class*='featured'] .sponsor{align-items:center;text-align:center}
.backers-featured .sponsor img,[class*='featured'] .sponsor img{object-fit:contain;display:block;margin:0 auto 14px}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.backers-featured .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.backers-featured .sponsor.sponsor img{height:42px!important;display:block!important;width:100%!important}
.backers-roll .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.backers-roll .sponsor.sponsor img{height:38px!important;display:block!important;width:100%!important}


/* sp-roll-mark: the roll marks were 105x38 sitting left in a 195px tile, because a rule of mine
   made the plate display:block and stretched the image to width:100%. The plate centres its
   content and the mark is given its height back with room to spare. */
.backers-roll .sponsor .sp-logo.sp-logo{display:flex!important;align-items:center!important;
  justify-content:center!important;width:100%!important}
.backers-roll .sponsor.sponsor img{height:48px!important;width:auto!important;
  max-width:100%!important;margin-inline:auto!important}

/* op-footer-compact: the footer printed 5 rows for 5 link(s) in
   1 list(s) — 743px at 390, 6% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 743 -> 561px (24% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(10px,2.36vw,34px)!important;row-gap:4px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 13 tiles,
   1796px at 390, 14% of the whole page. Two columns bring it to
   1321px (26% shorter). Checked before writing: no new overflow, smallest mark still
   99px wide, longest blurb 5 lines, tile heights 171-189px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.backers-featured), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .backers-featured{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .backers-featured > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .backers-featured > * *{min-width:0!important;max-width:100%}
    .backers-featured img,.backers-featured svg{max-width:100%;height:auto}
  .backers-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 719px of tier across
   7 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .backers-roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:54px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .backers-roll (7 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .backers-roll:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — div.atlas-rail reached
   323px in a 320px screen (+3px), inside
   div.atlas-grid. Remedy: unpin the grid track. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div.atlas-grid{grid-template-columns:minmax(0,1fr)!important}
  div.atlas-rail{min-width:0!important;max-width:100%!important}
}

/* op-article-width: the article column was capped at 760px (90 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 760px (declared in .article-body > *) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.article-body section.article-section{max-width:min(857px, 100%)!important}
}
@media (min-width:1600px){
  div.article-body section.article-section{max-width:min(clamp(857px, 59.514vw, 1028px), 100%)!important}
  div.article-body section.article-section > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (760px) and was left behind when the text went to 857px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  div.article-hero h1{max-width:min(857px, 100%)!important}
  p.standfirst{max-width:min(654px, 100%)!important}
}
@media (min-width:1600px){
  div.article-hero h1{max-width:min(calc(clamp(857px, 59.514vw, 1028px) + 0px), 100%)!important}
  p.standfirst{max-width:min(calc(clamp(654px, 45.417vw, 785px) + 0px), 100%)!important}
}
/* op-article-head:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .backers-roll 7 rows at 900). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .backers-roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--serif); font-weight: 500; line-height: 1.1; margin: 0px; text-wrap: balance;}
.cat-list a h2:where(.rt-h3){font-size: clamp(24px, 2.6vw, 33px); margin: 0px 0px 8px;}
.cat-list a:hover h2:where(.rt-h3){color: var(--amber-ink);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > figure.figure-frame > img,
  article.dossier > figure.dossier-photo > img,
  div.article-figure-hero > figure.figure-frame > img,
  div.lead-composite > figure.figure-frame > img){height:auto}
/* op-img-dims:end */
@media (min-width:700px) and (max-width:879px){.backers-featured:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)}.backers-featured:has(> [data-partner]) > [data-partner]{width:auto!important;max-width:none!important;min-width:0!important;margin-left:0!important;margin-right:0!important}.backers-featured:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}