/* ALL Lobbying — Statute Spine
   palette: ground (limestone) · ink · accent (oxblood) · secondary (teal) · paper
   type: Petrona (display + prose) / Chivo (labels, captions, UI) */

:root {
  --ground: #EFE8DC;
  --paper: #FBF8F2;
  --ink: #191713;
  --ink-soft: #4A443A;
  --ink-quiet: #7E7566;
  --rule: #C9BFAC;
  --mat: #E3D9C7;
  --accent: #B33417;   /* oxblood — statutes, kickers, one full band */
  --secondary: #0F5652; /* teal — glossary ground, ticks, second voice */
  --dark: #191713;

  --display: Petrona, "Iowan Old Style", Georgia, serif;
  --ui: Chivo, "Helvetica Neue", system-ui, sans-serif;

  --shell: min(92vw, 1180px);
  --prose: 72ch;
  --breakout: min(92vw, 1180px);
  --body: 18px;
  --gap: 24px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--body);
  line-height: 1.55;
  text-wrap: pretty;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--secondary); }
::selection { background: var(--accent); color: var(--paper); }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.06; margin: 0; }
svg.ico { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; }
svg.ico-lg { width: 2.4em; height: 2.4em; }

.shell { width: var(--shell); margin-inline: auto; }
.prose { width: min(var(--prose), 100%); }

/* ── masthead ─────────────────────────────────────────── */
.masthead {
  border-bottom: 2px solid var(--ink);
  padding: 20px 0 14px;
  display: grid;
  gap: 18px;
}
.mast-brand { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: inherit; }
.mast-mark { color: var(--accent); width: 34px; height: auto; flex: none; margin-top: 4px; stroke: currentColor; fill: none; }
.wordmark {
  font-size: clamp(34px, 8vw, 58px);
  line-height: 0.84;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}
.mast-line { font-family: var(--ui); font-size: 14px; line-height: 1.4; color: var(--ink-soft); margin: 10px 0 0; max-width: 44ch; }
.mast-nav { display: flex; flex-wrap: wrap; gap: 18px 26px; font-family: var(--ui); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.mast-nav a { display: flex; gap: 8px; align-items: center; color: var(--ink); }
.mast-nav a:hover { color: var(--accent); }
.mast-nav a[aria-current="page"] { color: var(--accent); }
.mast-sig { font-family: var(--ui); font-size: 13px; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; }

/* ── band headers ────────────────────────────────────── */
.band-head { text-align: center; display: grid; justify-items: center; gap: 14px; padding-bottom: 10px; }
.band-head .kicker { justify-content: center; font-size: 13px; letter-spacing: 0.26em; font-weight: 700; }
.band-head h2 { font-size: clamp(26px, 6.4vw, 54px); max-width: 32ch; line-height: 1.04; }
.band-head .marks { display: flex; gap: 9px; color: var(--accent); }
.band-head .marks svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* ── kickers, labels ─────────────────────────────────── */
.kicker { font-family: var(--ui); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); display: flex; gap: 9px; align-items: center; }
.kicker.teal { color: var(--secondary); }
.stage-no { font-family: var(--ui); font-weight: 700; }

/* ── bands ───────────────────────────────────────────── */
.band { padding: 44px 0; }
.band-tight { padding: 26px 0; }
.band-accent { background: var(--accent); color: var(--paper); }
.band-accent a { color: var(--paper); }
.band-teal { background: var(--secondary); color: #EAF2F0; }
.band-dark { background: var(--dark); color: var(--ground); }
.rule-top { border-top: 2px solid var(--ink); }
.rule-thin { border-top: 1px solid var(--rule); }

/* ── hero ────────────────────────────────────────────── */
.hero { display: grid; background: var(--dark); }
.hero img { grid-area: 1 / 1; width: 100%; height: 100%; min-height: clamp(300px, 56vh, 760px); object-fit: cover; }
.hero-plate { background: var(--ground); padding: 20px 22px 22px; }
.hero-plate h1 { font-size: clamp(28px, 6.4vw, 52px); }
.hero-plate p { font-family: var(--ui); font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 14px 0 0; max-width: 46ch; }
.hero-credit { font-family: var(--ui); font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 12px 0 0; max-width: 92ch; }
.hero-credit .credit { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-quiet); }

/* ── the spine triptych ──────────────────────────────── */
.spine { display: grid; gap: 30px; }
.spine-row { display: grid; gap: 18px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
.spine-year { font-size: clamp(64px, 17vw, 132px); line-height: 0.78; font-weight: 700; letter-spacing: -0.045em; color: var(--accent); }
.spine-row:nth-child(2) .spine-year { color: var(--secondary); }
.spine-row h3 { font-size: clamp(21px, 4.6vw, 30px); }
.spine-row p { margin: 12px 0 0; max-width: 62ch; color: #2A251D; }
.spine-more { font-family: var(--ui); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; border-top: 1px solid var(--ink); padding-top: 10px; display: inline-block; margin-top: 18px; color: var(--ink); }
.spine-more:hover { color: var(--accent); }

/* ── lead feature ────────────────────────────────────── */
.lead-feature { display: grid; gap: 26px; align-items: start; }
.lead-head .dek { margin-top: 16px; }
.lead-head .note { margin-top: 22px; }
.lead-feature h2 { font-size: clamp(28px, 7vw, 54px); }
.lead-feature .dek { font-size: clamp(19px, 4.4vw, 26px); line-height: 1.4; color: #2A251D; margin: 16px 0 0; max-width: 54ch; }
.lead-head { max-width: 40ch; }
.lead-body { display: grid; gap: 22px; align-items: start; }

/* ── cards ───────────────────────────────────────────── */
.card-grid { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
.card { display: flex; flex-direction: column; height: 100%; }
.card .card-img { aspect-ratio: 16 / 10; background: var(--paper); padding: 9px; border: 1px solid var(--ink); display: block; }
.card .card-img img { width: 100%; height: 100%; object-fit: cover; }
.card:hover .card-img { border-color: var(--accent); }
.card h3 { font-size: clamp(19px, 4vw, 25px); margin: 14px 0 0; min-height: 2.2em; }
.card p { font-family: var(--ui); font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin: 10px 0 0; }
.card .card-foot { margin-top: auto; padding-top: 14px; }
.card-lg h3 { font-size: clamp(22px, 5vw, 34px); }
.card-lg p { font-size: 16px; }

/* ── quarterly band ──────────────────────────────────── */
.returns-label { font-family: var(--ui); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.85; display: flex; gap: 10px; align-items: center; }
.returns-note { font-family: var(--ui); font-size: 15.5px; line-height: 1.5; margin: 12px 0 0; max-width: 52ch; opacity: 0.92; }
.returns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1px; margin-top: 24px; background: rgba(246,238,230,0.45); }
.returns-cell { background: var(--accent); padding: 18px 16px 20px; display: grid; gap: 10px; }
.returns-cell .q { font-family: var(--ui); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; }
.returns-cell .d { font-size: clamp(24px, 3.2vw, 44px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.returns-cell svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── the machinery trio ──────────────────────────────── */
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; margin-top: 24px; background: rgba(234,242,240,0.4); }
.trio a { background: var(--secondary); color: #EAF2F0; padding: 22px 20px 24px; display: grid; gap: 12px; align-content: start; }
.trio a:hover { background: #0B4744; color: #fff; }
.trio svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.trio h3 { font-size: clamp(19px, 2.2vw, 27px); line-height: 1.12; }
.trio p { font-family: var(--ui); font-size: 14.5px; line-height: 1.5; margin: 0; opacity: 0.85; }

.dates { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; font-size: clamp(20px, 5vw, 34px); font-weight: 500; }
.dates span { display: flex; gap: 12px; align-items: center; }
.dates svg { width: 0.66em; height: 0.66em; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── figures ─────────────────────────────────────────── */
figure { margin: 0; }
.figcap { margin-top: 12px; display: grid; gap: 4px 26px; align-items: start; }
.figcap .cap { font-family: var(--ui); font-size: 15px; line-height: 1.45; color: #332E25; }
.figcap .credit { font-family: var(--ui); font-size: 12px; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-quiet); }

.fig-bleed { margin: 34px 0; }
.fig-bleed img { width: 100%; height: clamp(240px, 46vh, 640px); object-fit: cover; }
.fig-bleed .figcap { width: var(--shell); margin-inline: auto; border-top: 2px solid var(--accent); padding-top: 10px; }

.fig-mat { margin: 34px 0; background: var(--mat); padding: 14px; }
.fig-mat img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.fig-inset { margin: 26px 0; border: 1px solid var(--ink); padding: 9px; background: var(--paper); }
.fig-inset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.fig-offset { margin: 34px 0; }
.fig-offset img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.fig-offset .figcap { border-left: 3px solid var(--secondary); padding-left: 14px; }

/* ── article ─────────────────────────────────────────── */
.art-head { padding: 26px 0 0; }
.art-head h1 { font-size: clamp(30px, 8vw, 68px); max-width: 26ch; }
.art-stage { font-family: var(--ui); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.lead { font-size: clamp(20px, 4.8vw, 28px); line-height: 1.38; color: var(--ink-soft); margin: 18px 0 0; max-width: 50ch; font-weight: 400; }
.art-body { padding: 30px 0 0; }
.art-body::after { content: ""; display: block; clear: both; }
/* three widths: prose measure for text, the shell for figures and field blocks, full-bleed */
.art-body > p,
.art-body > h2,
.art-body > ul,
.art-body > ol,
.art-body > .note,
.art-body > .callout,
.art-body > .pullquote,
.art-body > .blockquote { max-width: min(var(--prose), 76%); }
.art-body > h2 { max-width: min(30rem, 76%); }
.art-body > .fig-mat, .art-body > .fig-offset, .art-body > .fieldblock { max-width: var(--breakout); }
.art-body h2 { font-size: clamp(22px, 5.4vw, 36px); margin: 40px 0 0; }
.art-body h2 + p { margin-top: 16px; }
.art-body p { margin: 0 0 1.05em; }
.art-body p:last-child { margin-bottom: 0; }
.art-body > * { margin-inline: 0; }
.art-body .prose { width: min(var(--prose), 100%); }

/* components (PALETTE_SPEC classes) */
.pullquote { margin: 34px 0; border-top: 2px solid var(--accent); border-bottom: 1px solid var(--rule); padding: 18px 0; }
.pullquote p { font-size: clamp(22px, 5vw, 32px); line-height: 1.22; margin: 0; max-width: 40ch; }
.blockquote { margin: 30px 0; padding-left: 18px; border-left: 3px solid var(--secondary); }
.blockquote p { font-size: 1.05em; margin: 0; }
.blockquote cite { display: block; font-family: var(--ui); font-size: 13px; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-quiet); margin-top: 10px; }
.callout { margin: 30px 0; background: var(--paper); border: 1px solid var(--ink); padding: 20px; }
.callout p { margin: 0; }
.note { font-family: var(--ui); font-size: 15px; line-height: 1.5; color: var(--ink-soft); border-left: 3px solid var(--rule); padding-left: 14px; }

.fieldblock { margin: 40px 0; background: var(--paper); border: 1px solid var(--ink); border-top: 3px solid var(--accent); padding: 26px 28px 30px; }
.fieldblock > h3 { font-family: var(--ui); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); display: flex; gap: 10px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.fieldlist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.fieldlist li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.fieldlist svg { width: 18px; height: 18px; margin-top: 4px; stroke: var(--secondary); fill: none; stroke-width: 2; }
.fieldlist .f-term { font-family: var(--ui); font-weight: 700; font-size: 15.5px; display: block; }
.fieldlist .f-desc { font-family: var(--ui); font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

.timeline { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: minmax(96px, 150px) 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.timeline li:first-child { border-top: 0; }
.t-when { font-family: var(--ui); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; color: var(--accent); }
.t-what { font-family: var(--ui); font-size: 15.5px; line-height: 1.5; }

.statrow { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin: 18px 0 0; }
.statblock { border-top: 2px solid var(--secondary); padding-top: 10px; }
.stat-num { display: block; font-size: clamp(28px, 6vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stat-label { display: block; font-family: var(--ui); font-size: 14px; line-height: 1.45; color: var(--ink-soft); margin-top: 8px; }

table.versus, table.datatable { width: 100%; border-collapse: collapse; margin: 18px 0 0; font-family: var(--ui); font-size: 15px; }
table.versus th, table.versus td, table.datatable th, table.datatable td { text-align: left; padding: 11px 14px 11px 0; border-top: 1px solid var(--rule); vertical-align: top; line-height: 1.45; }
table.versus thead th, table.datatable thead th { border-top: 0; border-bottom: 2px solid var(--ink); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
table.versus td:first-child, table.datatable td:first-child { font-weight: 700; width: 34%; }

.gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 30px 0; }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.profile-grid, .org-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 26px 0; }
.profile-card { background: var(--paper); border: 1px solid var(--rule); padding: 18px; }
.profile-card .p-photo { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 14px; }
.profile-card h3 { font-size: 22px; }
.profile-card .p-role { font-family: var(--ui); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondary); margin: 8px 0 10px; }
.profile-card p { font-family: var(--ui); font-size: 15px; line-height: 1.5; margin: 0 0 10px; }
.profile-card .p-links a { font-family: var(--ui); font-size: 14px; }
.org-card { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--rule); padding: 14px; }
.org-card .org-logo { width: 56px; height: 56px; object-fit: contain; }
.org-card.no-logo { grid-template-columns: 1fr; }
.org-name { font-family: var(--ui); font-weight: 700; font-size: 16px; color: var(--ink); }
.org-host { font-family: var(--ui); font-size: 13px; color: var(--ink-quiet); }
.entity-ref { font-family: var(--ui); font-size: 0.94em; border-bottom: 1px solid var(--rule); }

.further-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 20px 0 0; }
.further-grid a { display: block; background: var(--paper); border: 1px solid var(--rule); padding: 16px; font-size: 19px; color: var(--ink); }
.further-grid a:hover { border-color: var(--accent); color: var(--accent); }
.related-links { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.related-links a { font-size: 20px; }

/* next along the spine */
.next-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin-top: 26px; }
.next-card { display: grid; align-content: start; background: var(--paper); border: 1px solid var(--rule); color: var(--ink); }
.next-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.next-card .nc-body { padding: 18px 20px 22px; display: grid; gap: 10px; }
.next-card .nc-stage { font-family: var(--ui); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: flex; gap: 8px; align-items: center; }
.next-card h3 { font-size: clamp(19px, 2vw, 26px); line-height: 1.12; }
.next-card p { font-family: var(--ui); font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.next-card:hover { border-color: var(--accent); }
.next-card:hover h3 { color: var(--accent); }
@media (min-width: 760px) {
  .next-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 22px; }
}
@media (min-width: 1200px) {
  .next-grid { gap: 30px; }
}

/* register / hub list */
.cat-list { list-style: none; margin: 26px 0 0; padding: 0; }
.cat-list li { border-top: 1px solid var(--rule); }
.cat-list li:last-child { border-bottom: 1px solid var(--rule); }
.cat-list a { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 18px 0; color: var(--ink); align-items: start; }
.cat-list a:hover { color: var(--accent); }
.cat-list .c-no { font-family: var(--ui); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); padding-top: 6px; }
.cat-list h3 { font-size: clamp(20px, 4.6vw, 28px); }
.cat-list p { font-family: var(--ui); font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 8px 0 0; max-width: 78ch; }

/* ── supporters ──────────────────────────────────────── */
.supporters { padding: 34px 0; }
.supporters h2 { font-size: clamp(20px, 4.4vw, 28px); max-width: 34ch; }
.supporters .sup-note { font-family: var(--ui); font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin: 10px 0 0; max-width: 56ch; }
.sponsor-rows { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 22px; }
.sponsor-group { display: flex; flex-wrap: wrap; gap: 14px; }
.sponsor {
  flex: 0 0 250px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.sponsor img {
  width: 100%;
  height: 62px;
  max-height: 62px;
  object-fit: contain;
  background: var(--dark);
  padding: 10px 16px;
}
.sponsor .sponsor-name { font-family: var(--ui); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; }
.sponsor .sponsor-blurb { font-family: var(--ui); font-size: 14px; line-height: 1.45; color: var(--ink-soft); min-width: 200px; }
.sponsor:hover .sponsor-name { color: var(--accent); }

/* ── footer ──────────────────────────────────────────── */
.site-foot { margin-top: 48px; padding: 36px 0; }
.foot-grid { display: grid; gap: 22px; align-items: end; }
.site-foot .wordmark { font-size: clamp(26px, 6vw, 44px); }
.site-foot p { font-family: var(--ui); font-size: 14.5px; line-height: 1.5; color: #B8AE9C; margin: 12px 0 0; max-width: 44ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 14px 30px; font-family: var(--ui); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.foot-links a { color: #D8CFBE; display: flex; gap: 8px; align-items: center; }
.foot-links a:hover { color: var(--paper); }

/* ── 760px+ ──────────────────────────────────────────── */
@media (min-width: 760px) {
  :root { --body: 19px; --shell: min(92vw, 1180px); }
  .masthead { grid-template-columns: 1.4fr 1fr; align-items: end; padding: 28px 0 16px; }
  .mast-nav { justify-content: flex-end; }
  .mast-mark { width: 44px; }
  .lead-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 44px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-plate { grid-area: 1 / 1; align-self: start; justify-self: start; max-width: min(52vw, 640px); padding: 26px 30px 28px; }
  .foot-grid { grid-template-columns: 1.3fr 1fr; }
  .foot-links { justify-content: flex-end; }
  .spine-row { grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; padding-bottom: 34px; }
  .spine-row.flip { grid-template-columns: 1.1fr 0.9fr; }
  .spine-row.flip .spine-txt { order: 2; }
  .figcap { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }
  .fig-inset { float: right; width: 46%; margin: 8px 0 22px 32px; }
  .fig-offset { width: min(100%, calc(var(--prose) + 200px)); }
  .cat-list a { grid-template-columns: 56px 1.1fr 1.4fr; }
  .cat-list p { margin: 0; }
  .art-head h1 { font-size: clamp(40px, 5.4vw, 68px); }
  .band { padding: 60px 0; }
}

/* ── 1080px+ ─────────────────────────────────────────── */
@media (min-width: 1080px) {
  :root { --shell: min(93vw, 1240px); --prose: 74ch; }
  .fig-offset { width: min(100%, calc(var(--prose) + 280px)); }
  .art-body { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* ── 1200px+ : desktop gains a wider shell and breakout ─ */
@media (min-width: 1200px) {
  :root { --body: 20px; --shell: min(93vw, 1380px); --breakout: min(93vw, 1380px); }
  .spine-year { font-size: clamp(120px, 9vw, 170px); }
}

@media (min-width: 1280px) {
  .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 1440px+ : large desktop ───────────────────────────── */
@media (min-width: 1440px) {
  :root { --body: 21px; --shell: min(92vw, 1600px); --prose: 76ch; }
  .fieldblock { padding: 32px 36px 36px; }
  .sponsor-rows { gap: 24px; }
  .sponsor-group { gap: 12px; }
  .fig-offset { width: min(100%, calc(var(--prose) + 380px)); }
  .fig-inset { width: 40%; margin-left: 46px; }
  .card-grid { gap: 34px; }
  .band { padding: 84px 0; }
  .figcap .cap { font-size: 16.5px; }
}

/* ── 1800px+ : very large display ──────────────────────── */
@media (min-width: 1800px) {
  :root { --body: 22px; --shell: min(91vw, 1900px); --prose: 80ch; }
  .art-body > p, .art-body > ul, .art-body > ol, .art-body > .note,
  .art-body > .callout, .art-body > .pullquote, .art-body > .blockquote { max-width: 100%; }
  .art-body > h2 { max-width: min(38rem, 100%); }
  .sponsor { flex: 0 0 290px; }
  .art-body { grid-template-columns: minmax(0, var(--prose)) minmax(0, 1fr); column-gap: 70px; }
  .art-body > * { grid-column: 1; }
  .art-body > .fieldblock, .art-body > .fig-offset, .art-body > .statrow, .art-body > .pullquote { grid-column: 1 / -1; }
  .fig-offset { width: 100%; }
  .fig-inset { width: 34%; }
  .spine-year { font-size: 210px; }
  .art-head h1 { font-size: 84px; }
  .lead { font-size: 31px; max-width: 54ch; }
  .lead-head .fieldlist { grid-template-columns: minmax(0, 1fr); }
  .fieldlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 50px; }
  .timeline li { grid-template-columns: 180px 1fr; }
}

/* ── 2200px+ : the widest displays ─────────────────────── */
@media (min-width: 2200px) {
  :root { --body: 23.5px; --shell: min(90vw, 2280px); --prose: 84ch; }
  .art-head h1 { font-size: 104px; }
  .spine-year { font-size: 260px; }
  .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px; }
  .fieldlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band { padding: 110px 0; }
  .hero img { height: min(72vh, 1000px); }
}

/* ── ≤560px : phone ────────────────────────────────────── */
@media (max-width: 560px) {
  :root { --shell: 90vw; --body: 17.5px; }

  /* nothing overflows the viewport */
  body { overflow-x: hidden; }
  .art-body > *, .cat-list p, .figcap .cap, .f-desc, .t-what, .sponsor-blurb { overflow-wrap: anywhere; }

  /* tracked labels get less tracking so they stop wrapping mid-phrase */
  .kicker, .band-head .kicker, .mast-nav, .foot-links, .art-stage, .returns-label { letter-spacing: 0.12em; }

  /* touch targets */
  .mast-nav { gap: 4px 20px; }
  .mast-nav a, .foot-links a { min-height: 44px; align-items: center; }
  .cat-list a { padding: 16px 0; min-height: 44px; }
  .spine-more, .related-links a { min-height: 44px; display: flex; align-items: center; }
  .related-links a { font-size: 18px; }

  /* masthead */
  .masthead { padding: 16px 0 12px; }
  .mast-line { font-size: 13.5px; }

  /* hero: plate below the picture, never over it */
  .hero { background: var(--ground); }
  .hero img { min-height: 260px; }
  .hero-plate { padding: 18px 5vw 0; background: var(--ground); }
  .hero-plate h1 { font-size: 30px; }

  /* bands and headers */
  .band { padding: 34px 0; }
  .band-tight { padding: 22px 0; }
  .band-head { text-align: left; justify-items: start; gap: 12px; }
  .band-head .kicker { justify-content: flex-start; font-size: 12px; }
  .band-head h2 { font-size: 27px; }

  /* the spine */
  .spine { gap: 24px; }
  .spine-year { font-size: 76px; }
  .spine-row h3 { font-size: 22px; }

  /* figures: no floats, captions stack */
  .fig-inset { float: none; width: 100%; margin: 22px 0; }
  .fig-offset, .fig-mat { width: 100%; margin: 24px 0; }
  .fig-bleed { margin: 24px 0; }
  .fig-bleed img { height: 220px; }
  .figcap { grid-template-columns: minmax(0, 1fr); gap: 6px; }

  /* field blocks and data */
  .fieldblock { padding: 18px 0 20px; }
  .fieldlist li { grid-template-columns: 18px 1fr; gap: 10px; }
  .fieldlist svg { width: 16px; height: 16px; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }
  .statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  /* three-column comparison tables restack as labelled rows */
  table.versus, table.versus tbody, table.versus tr, table.versus td { display: block; width: 100%; }
  table.versus thead { display: none; }
  table.versus tr { border-top: 1px solid var(--rule); padding: 12px 0; }
  table.versus td { border: 0; padding: 2px 0; }
  table.versus td:first-child { font-weight: 700; width: 100%; }
  table.versus td:nth-child(2)::before { content: "FARA 1938 — "; color: var(--accent); font-weight: 700; }
  table.versus td:nth-child(3)::before { content: "LDA 1995 — "; color: var(--secondary); font-weight: 700; }
  table.datatable { display: block; overflow-x: auto; }

  /* cards, supporters, footer */
  .card-grid { gap: 22px; }
  .card h3 { min-height: 0; }
  .supporters { padding: 26px 0; }
  .sponsor-rows { gap: 18px; }
  .sponsor-group { gap: 18px; width: 100%; }
  .sponsor { flex: 1 1 100%; }
  .site-foot { margin-top: 34px; padding: 28px 0; }
  .foot-links { gap: 0 24px; }

  /* article head */
  .art-head h1 { font-size: 31px; }
  .lead { font-size: 19px; }
  .art-body h2 { font-size: 23px; margin-top: 32px; }
}

@media print {
  body { background: #fff; }
  .mast-nav, .supporters { display: none; }
}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.sponsor-rows{flex-wrap:wrap!important}
.sponsor-rows > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor-group{flex-wrap:wrap!important}
.sponsor-group > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}


/* sp-plate-pad: as above — 10px/16px to 18px/24px, with the plate height raised from 62px to
   78px so the mark keeps its size rather than paying for the padding. */
.sponsor img{padding:18px 24px!important;height:78px!important;max-height:78px!important}

/* op-money-columns: the supporters block ran one tile per row — 6 tiles,
   1007px at 390, 9% of the whole page. Two columns bring it to
   736px (27% shorter). Checked before writing: no new overflow, smallest mark still
   167px wide, longest blurb 4 lines, tile heights 159-201px.
   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.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-group), 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){
  .sponsor-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .sponsor-group > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-group > * *{min-width:0!important;max-width:100%}
    .sponsor-group img,.sponsor-group svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sponsor-group (3 tiles), .sponsor-group (3 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){
  .sponsor-group:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-group:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels */
div:where(.rt-h1){font-weight: 600; letter-spacing: -0.015em; line-height: 1.06; margin: 0px;}
h2:where(.rt-h3){font-weight: 600; letter-spacing: -0.015em; line-height: 1.06; margin: 0px;}
.art-head div:where(.rt-h1){font-size: clamp(30px, 8vw, 68px); max-width: 26ch;}
.cat-list h2:where(.rt-h3){font-size: clamp(20px, 4.6vw, 28px);}
@media (min-width: 760px){.art-head div:where(.rt-h1){font-size: clamp(40px, 5.4vw, 68px);}}
@media (min-width: 1800px){.art-head div:where(.rt-h1){font-size: 84px;}}
@media (min-width: 2200px){.art-head div:where(.rt-h1){font-size: 104px;}}
@media (max-width: 560px){.art-head div:where(.rt-h1){font-size: 31px;}}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > span.card-img > img,
  article > figure.article-figure.fig-bleed > img,
  article.flip.spine-row > figure.article-figure.fig-mat > img,
  article.spine-row > figure.article-figure.fig-mat > img,
  div > figure.article-figure.fig-mat > img,
  div.art-body.shell > figure.article-figure.fig-inset > img,
  div.art-body.shell > figure.article-figure.fig-mat > img,
  div.art-body.shell > figure.article-figure.fig-offset > img,
  div.next-grid > a.next-card > img,
  main > figure.article-figure.fig-bleed > img,
  main > section.hero > img){height:auto}
/* op-img-dims:end */

/* op-grow-same-size: an added partner would have wrapped onto a new row ALONE and stretched across the grid (flex rows that grow). Same minimum (basis 220px, min-width min(220px, 100%)), same columns at every width, a short row keeps its siblings' size — applied at the moment of adding, as the operator chose (2026-09-23). Phones keep their own rules. */
@media (min-width:641px){
  div.sponsor-group:nth-of-type(2){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
}
/* op-grow-same-size:end */
@media (min-width:641px){div.sponsor-group:nth-of-type(2){flex:1 1 100%!important;min-width:0}}