/* My Chocolate Recipe — Dark Kitchen
   Palette roles (5): ground, ink, accent (brick), secondary (verdigris), muted
   Two saturated members — brick 22° and verdigris 160° — used at area, not as rules. */

:root {
  --ground: #14100d;
  --ground-2: #221b16;
  --ground-3: #2c231c;
  --ink: #f0e8dc;
  --ink-2: #ded2c3;
  --accent: #ee7a58;
  --accent-deep: #c8442a;
  --secondary: #0f6b4f;
  --secondary-ink: #cfe8dc;
  --muted: #a2937f;
  --muted-2: #9c8d7d;
  --rule: #3a2e26;
  --mat: #f0e8dc;
  --mat-ink: #2a211a;
  --mat-quiet: #6b5e52;

  --prose: 36rem;
  --breakout: 960px;
  --page: 1180px;
  --gutter: clamp(18px, 4vw, 40px);

  --t-body: 17px;
  --t-lead: 20px;
  --t-cap: 15px;
  --t-credit: 13px;
  --tile: 268px;
}

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

html { background: var(--ground); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Karla, system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.62;
  text-wrap: pretty;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: Vollkorn, Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--accent-deep); color: var(--ground); }

/* ---- the signature: every technical value set in Courier Prime ---- */
.val {
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 0.94em;
  letter-spacing: 0.01em;
  color: var(--accent);
  white-space: nowrap;
}
.fig-mat .figcap .val, .article-figure figcaption .val { color: #8a3a22; }
.band-green .val { color: var(--secondary-ink); }

/* ---- widths ---- */
.wrap { width: min(100% - var(--gutter) * 2, var(--page)); margin-inline: auto; }
.prose { width: min(100% - var(--gutter) * 2, var(--prose)); margin-inline: auto; }
.breakout { width: min(100% - var(--gutter) * 2, var(--breakout)); margin-inline: auto; }
.bleed { width: 100%; }

/* ---- kickers, eyebrows, rules ---- */
.kicker {
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kicker svg { width: 18px; height: 18px; flex: 0 0 auto; }
.kicker--quiet { color: var(--muted); }
.rule-top { border-top: 1px solid var(--rule); padding-top: 18px; }

/* ---- masthead: title left with pod mark, sections right in one row ---- */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
  padding: clamp(20px, 2.4vw, 40px) 0 clamp(14px, 1.4vw, 24px);
}
.masthead__mark { color: var(--accent); width: clamp(40px, 3.6vw, 68px); flex: 0 0 auto; }
.masthead__mark svg { width: 100%; height: auto; display: block; }
.masthead__title {
  display: flex;
  align-items: baseline;
  gap: clamp(6px, 0.7vw, 14px);
  font-size: clamp(21px, 4.5vw, 76px);
  font-weight: 700;
  line-height: 0.9;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.masthead__title a { color: inherit; text-decoration: none; display: flex; align-items: baseline; gap: clamp(6px, 0.7vw, 15px); }
.mh-my {
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 0.3em;
  letter-spacing: 0.2em;
  color: var(--accent);
  align-self: flex-start;
  padding-top: 0.24em;
}
.mh-solid { color: var(--ink); }
.mh-out {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  text-stroke: 1.5px var(--ink);
}
.masthead__title a:hover .mh-out { -webkit-text-stroke-color: var(--accent); }
@media (max-width: 760px) {
  .mh-out { color: var(--ink); -webkit-text-stroke: 0; }
}
@media (min-width: 1600px) {
  .mh-out { -webkit-text-stroke-width: 2.2px; }
}
.masthead__nav {
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(16px, 2vw, 40px);
  padding: 15px 0 17px;
}
.masthead__nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: Karla, sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.05vw, 21px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 0;
  border-bottom: 2px solid transparent;
}
.masthead__nav a .ico { width: 21px; height: 21px; }
.masthead__nav a:hover { text-decoration: none; border-bottom-color: currentColor; }
.masthead__nav a[aria-current='page'] { border-bottom-color: currentColor; }

/* one colour per section, carried through the whole site */
.masthead__nav a[href$="/category/recipes/"] { color: #ee7a58; }
.masthead__nav a[href$="/category/at-the-bench/"] { color: #7fd3b4; }
.masthead__nav a[href$="/category/cocoa/"] { color: #cfe8dc; }
.masthead__nav a[href$="/category/reference/"] { color: #d3b98f; }
.masthead__nav a[href$="/cocoa-price-spike-explained/"] { color: #b9a894; }
.masthead__nav a[href$="/archive/"] { color: #b9a894; }
.masthead__nav .sep { flex: 1 1 0; min-width: 0; }
.masthead__nav .quiet { font-weight: 500; }
.navbtn { display: none; }

/* section icons — one drawing system, 24-grid, 1.5 stroke, square caps */
.ico { width: 18px; height: 18px; flex: 0 0 auto; }
.ico path, .ico rect, .ico circle, .ico line, .ico ellipse, .ico polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--lg { width: 34px; height: 34px; }

/* ---- hero ---- */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: clamp(460px, 74vh, 1000px);
  background: var(--ground-2);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.hero__img { position: absolute; inset: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 16, 13, 0.96) 0%, rgba(20, 16, 13, 0.9) 30%, rgba(20, 16, 13, 0.62) 58%, rgba(20, 16, 13, 0.3) 82%, rgba(20, 16, 13, 0.5) 100%);
}
.hero__plate {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: clamp(18px, 2.2vw, 44px) 0 0;
}
.plate-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(20, 16, 13, 0.82);
  padding: 7px 12px;
  color: var(--accent);
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
}
.plate-tag svg { width: 15px; height: 15px; }
.plate-tag svg path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.hero__body { position: relative; padding: clamp(24px, 3vw, 64px) 0 clamp(26px, 3.2vw, 68px); }
.hero__head {
  font-size: clamp(34px, 4.6vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.022em;
  max-width: 22ch;
}
.hero__dek {
  margin: clamp(16px, 1.6vw, 28px) 0 0;
  max-width: 56ch;
  font-size: clamp(17px, 1.15vw, 25px);
  line-height: 1.5;
  color: var(--ink-2);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(18px, 1.8vw, 32px);
  padding: 14px 26px;
  border: 1px solid var(--accent-deep);
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.btn:hover { background: var(--accent-deep); color: var(--ground); text-decoration: none; }
.btn svg { width: 24px; height: 12px; }
.btn svg path { fill: none; stroke: currentColor; stroke-width: 1.7; }
.btn--light { border-color: var(--ink); }
.btn--light:hover { background: var(--ink); color: var(--secondary); }

/* ---- bands ---- */
.band { padding: clamp(48px, 5vw, 128px) 0; }
.band--tight { padding: clamp(34px, 3.4vw, 84px) 0; }
.band--sep { border-top: 1px solid var(--rule); }
.band-green { background: var(--secondary); color: var(--ink); }
.band-green .kicker { color: var(--secondary-ink); }
.band-green a:not(.btn) { color: var(--secondary-ink); }
.band-dark { background: #100d0a; }
.band-head {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.6vw, 40px);
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 18px;
  margin-bottom: clamp(24px, 2.4vw, 52px);
}
.band-head h2 { flex: 1 1 320px; font-size: clamp(24px, 2.2vw, 50px); font-weight: 600; line-height: 1.06; }
.band-head .kicker { margin: 0; }

/* one quiet line */
.oneline {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(52px, 6vw, 150px) 0;
}
.oneline p {
  margin: 0 auto;
  max-width: 26ch;
  text-align: center;
  font-family: Vollkorn, Georgia, serif;
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.018em;
}

/* ================= FIGURE SYSTEM — four treatments, one drawing system ==== */

/* shared caption block: sized by the caption, never by the image.
   Desktop runs caption and credit on ONE row; mobile stacks. */
.figcap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px clamp(14px, 1.6vw, 34px);
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.figcap p { margin: 0; }
.figcap .cap {
  flex: 1 1 260px;
  min-width: 0;
  font-size: var(--t-cap);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 88ch;
}
.figcap .credit {
  flex: 0 0 auto;
  font-family: 'Courier Prime', monospace;
  font-size: var(--t-credit);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  text-transform: uppercase;
  max-width: 42ch;
}

/* 1 · PLATE — full-bleed band, numbered, caption below on the page measure */
.fig-plate { margin: 0; }
.fig-plate .shot { position: relative; background: var(--ground-2); }
.fig-plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.fig-plate .num {
  position: absolute;
  left: clamp(14px, 2vw, 40px);
  top: clamp(12px, 1.6vw, 32px);
}
.fig-plate .figcap { border-top: 0; }

/* 2 · MAT — photograph sits on a bone mat, caption printed inside the mat */
.fig-mat { margin: 0; background: var(--mat); padding: clamp(11px, 1vw, 19px); }
.fig-mat img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fig-mat .figcap { border-top: 1px solid #cfc0aa; }
.fig-mat .figcap .cap { color: var(--mat-ink); }
.fig-mat .figcap .credit { color: var(--mat-quiet); }
.fig-mat--wide img { aspect-ratio: 3 / 2; }

/* 3 · INSET — hairline frame with an accent bar down the caption side */
.fig-inset { margin: 0; }
.fig-inset .shot { border: 1px solid var(--rule); padding: 8px; background: var(--ground-2); }
.fig-inset img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.fig-inset .figcap { border-top: 0; padding-left: 14px; border-left: 3px solid var(--accent-deep); padding-top: 2px; }

/* 4 · COLUMN INSET — small, sits in the prose with text alongside at width */
.fig-col { margin: 0; }
.fig-col img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--rule); }
.fig-col .figcap { flex-direction: column; align-items: stretch; }
.fig-col .figcap .cap { flex: 0 0 auto; }

.grid-figs { display: grid; gap: clamp(16px, 1.6vw, 32px); }

/* ---- recipe card row: unequal, lead card wider ---- */
.cards { display: grid; gap: clamp(16px, 1.6vw, 34px); grid-template-columns: 1fr; }
.card { display: flex; flex-direction: column; min-width: 0; }
.card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--rule);
  background: var(--ground-2);
  padding: 7px;
}
.card--lead img { padding: 10px; }
.card:hover img { background: var(--ground-3); }
.card h3 {
  margin: 14px 0 0;
  font-size: clamp(17px, 1.1vw, 23px);
  font-weight: 600;
  line-height: 1.18;
  min-height: 2.36em;
}
.card p { margin: 7px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.card:hover img { border-color: var(--accent-deep); }
.card .card__meta {
  margin-top: auto;
  padding-top: 12px;
  font-family: 'Courier Prime', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.card--lead img { aspect-ratio: 3 / 2; }
.card--lead h3 { font-size: clamp(22px, 1.9vw, 40px); font-weight: 700; min-height: 0; }
.card--lead p { font-size: clamp(16px, 1.02vw, 20px); color: var(--ink-2); max-width: 62ch; }

/* ---- section signpost tiles ---- */
.signpost { display: grid; gap: clamp(14px, 1.4vw, 28px); grid-template-columns: 1fr; }
.tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 1.6vw, 32px);
  border: 1px solid var(--rule);
  background: var(--ground-2);
  color: var(--ink);
}
.tile:hover { background: var(--ground-3); text-decoration: none; border-color: var(--accent-deep); }
.tile__ico { color: var(--accent); }
.tile h3 { font-size: clamp(19px, 1.3vw, 28px); font-weight: 600; }
.tile p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.tile .count {
  margin-top: auto;
  font-family: 'Courier Prime', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- history cameo: quiet typographic aside ---- */
.cameo { display: grid; gap: clamp(18px, 2vw, 44px); grid-template-columns: 1fr; }
.cameo__item { display: grid; grid-template-columns: 1fr; gap: 0; align-items: start; }
.cameo__yr {
  font-family: Vollkorn, Georgia, serif;
  font-weight: 700;
  font-size: clamp(40px, 3.6vw, 82px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--accent);
  display: block;
  padding-bottom: clamp(8px, 0.8vw, 14px);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(10px, 1vw, 18px);
}
.cameo__item p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cameo__item strong { color: var(--ink); font-weight: 700; }

/* ---- market strip ---- */
.strip { display: grid; gap: clamp(24px, 2.4vw, 60px); grid-template-columns: 1fr; align-items: center; }
.strip__text { max-width: 64ch; }
.strip__head { border-top: 1px solid var(--rule); padding-top: clamp(14px, 1.2vw, 24px); margin-bottom: clamp(20px, 2vw, 40px); }
.band-dark .strip__head { border-top-color: #3a2e26; }
.attrib {
  margin: 14px 0 0;
  font-family: 'Courier Prime', monospace;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--muted-2);
  border-left: 3px solid var(--accent-deep);
  padding-left: 14px;
}

/* ---- article ---- */
.artbody { padding: clamp(34px, 3.6vw, 92px) 0 clamp(44px, 4vw, 110px); }
.artbody > * + * { margin-top: 1.15em; }
.artbody p { font-size: clamp(17px, 1.06vw, 21px); line-height: 1.66; color: var(--ink-2); }
.artbody h2 {
  font-size: clamp(23px, 1.75vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  margin-top: 2em;
  color: var(--ink);
}
.artbody h3 { font-size: clamp(19px, 1.25vw, 26px); font-weight: 600; margin-top: 1.7em; color: var(--ink); }

.artbody h3.run-in {
  font-family: Vollkorn, Georgia, serif;
  font-weight: 600;
  font-size: clamp(19px, 1.2vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-top: 1.5em;
}
.artbody h3.run-in .val { color: var(--accent); font-size: 0.9em; }

/* vertical rhythm: a paragraph break is smaller than a section break */
.artbody p + p { margin-top: 0.82em; }
.artbody h2 + p, .artbody h3 + p, .artbody h2 + ul, .artbody h3 + ul { margin-top: 0.55em; }
.artbody p + ul, .artbody p + ol, .artbody ul + p, .artbody ol + p { margin-top: 0.9em; }
.artbody .lead + * { margin-top: 1.5em; }
.artbody ul, .artbody ol { padding-left: 1.2em; color: var(--ink-2); font-size: clamp(16px, 1.02vw, 20px); }
.artbody li + li { margin-top: 8px; }
.artbody figure, .artbody .callout, .artbody .pullquote, .artbody .notes, .artbody .datatable-wrap, .artbody .map-figure, .artbody .gallery, .artbody .statrow, .artbody .versus-wrap {
  margin-top: clamp(34px, 3vw, 60px);
  margin-bottom: clamp(34px, 3vw, 60px);
}
.artbody strong { color: var(--ink); }

.lead {
  font-family: Vollkorn, Georgia, serif;
  font-style: italic;
  font-size: clamp(20px, 1.5vw, 32px) !important;
  line-height: 1.34;
  color: var(--ink) !important;
}

.pullquote { margin-inline: 0; border-left: 3px solid var(--accent-deep); padding-left: clamp(18px, 1.8vw, 40px); }
.pullquote p {
  margin: 0;
  font-family: Vollkorn, Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 1.9vw, 42px) !important;
  line-height: 1.2;
  color: var(--ink) !important;
}
.blockquote { margin-inline: 0; border-left: 3px solid var(--secondary); padding-left: clamp(18px, 1.8vw, 40px); }
.blockquote p { margin: 0; font-size: clamp(19px, 1.3vw, 26px) !important; line-height: 1.4; color: var(--ink) !important; }
.blockquote cite { display: block; margin-top: 12px; font-family: 'Courier Prime', monospace; font-size: 13px; font-style: normal; letter-spacing: 0.06em; color: var(--muted); }

.callout { border: 1px solid var(--rule); border-top: 3px solid var(--accent-deep); background: var(--ground-2); padding: clamp(18px, 1.6vw, 34px); }
.callout p { margin: 0; font-size: clamp(17px, 1.06vw, 21px) !important; color: var(--ink) !important; }
.note {
  font-size: 16px !important;
  line-height: 1.55;
  color: var(--muted) !important;
  border-left: 1px solid var(--rule);
  padding-left: 14px;
}

/* notes-for-design material — a breakout panel, never a standing rail */
.notes { border: 1px solid var(--rule); background: var(--ground-2); }
.notes__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px clamp(16px, 1.4vw, 28px);
  border-bottom: 1px solid var(--rule);
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.notes__head svg { width: 17px; height: 17px; }
.notes__body { padding: clamp(16px, 1.4vw, 30px); }
.notes__body > *:first-child { margin-top: 0; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 14px 0; border-bottom: 1px solid var(--ground-3); }
.timeline li:last-child { border-bottom: 0; padding-bottom: 0; }
.t-when {
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.t-what { font-size: 16px; line-height: 1.5; color: var(--ink-2); }

.datatable-wrap, .versus-wrap { overflow-x: auto; }
table.datatable, table.versus { width: 100%; border-collapse: collapse; min-width: 340px; }
.datatable th, .datatable td, .versus th, .versus td {
  text-align: left;
  padding: 13px clamp(12px, 1.1vw, 22px);
  border-bottom: 1px solid var(--ground-3);
  font-size: 16px;
  line-height: 1.45;
  vertical-align: top;
}
.datatable thead th, .versus thead th {
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
}
.datatable tbody th, .versus tbody th { color: var(--muted); font-weight: 500; width: 34%; }
.datatable td, .versus td { color: var(--ink-2); }

.statrow { display: grid; gap: clamp(10px, 1vw, 18px); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.statblock { border: 1px solid var(--rule); padding: clamp(14px, 1.2vw, 24px); background: var(--ground-2); }
.stat-num { display: block; font-family: Vollkorn, Georgia, serif; font-weight: 700; font-size: clamp(30px, 2.6vw, 58px); line-height: 0.9; color: var(--ink); }
.stat-label { display: block; margin-top: 9px; font-size: 14px; line-height: 1.45; color: var(--muted); }

.gallery { display: grid; gap: clamp(12px, 1.2vw, 22px); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* map: frame + caption ours, geometry theirs */
.map-figure { margin: 0; }
.map-slot { border: 1px solid var(--rule); background: #0d1a16; }
.map-slot svg { width: 100%; height: auto; display: block; }
.map-land { fill: #1c2a24; stroke: #33453c; stroke-width: 1; }
.map-country { fill: #0f6b4f; stroke: #cfe8dc; stroke-width: 1.1; }
.map-pin { fill: var(--accent); stroke: var(--ground); stroke-width: 1.2; }
.map-label { font-family: 'Courier Prime', monospace; font-size: inherit; fill: #eef7f2; letter-spacing: 0.04em; paint-order: stroke; stroke: rgba(10, 20, 16, 0.85); stroke-width: 0.9; stroke-linejoin: round; }
.map--crop .map-label { stroke-width: 0.9; }
.map-grid { stroke: #2a3b34; stroke-width: 1; }
.map-eq { stroke: #4a6b5e; stroke-width: 1.4; }
.map-trop { stroke: #4a6b5e; stroke-width: 1; stroke-dasharray: 6 8; }
.map-note { font-family: 'Courier Prime', monospace; font-size: 0.85em; fill: #6f9285; letter-spacing: 0.06em; }
.map--crop .map-country { stroke-width: 0.4; }
.map--crop .map-pin { stroke-width: 0.4; }
.map--crop .map-grid { stroke-width: 0.3; }
.map--crop .map-eq { stroke-width: 0.45; }
.map--crop .map-trop { stroke-width: 0.35; stroke-dasharray: 2 2.6; }

/* related + further */
.related-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.related-links a { display: block; font-family: Vollkorn, Georgia, serif; font-size: clamp(18px, 1.2vw, 24px); font-weight: 600; line-height: 1.2; }
.further-grid { display: grid; gap: clamp(12px, 1.2vw, 24px); grid-template-columns: 1fr; }
.further-grid a {
  border: 1px solid var(--rule);
  padding: clamp(14px, 1.2vw, 24px);
  color: var(--ink);
  font-family: Vollkorn, Georgia, serif;
  font-size: clamp(17px, 1.1vw, 22px);
  font-weight: 600;
  line-height: 1.2;
}
.further-grid a:hover { border-color: var(--accent-deep); background: var(--ground-2); text-decoration: none; }

.entity-ref { overflow-wrap: anywhere; }

/* profile / org cards */
.profile-grid { display: grid; gap: clamp(14px, 1.4vw, 28px); grid-template-columns: 1fr; }
.profile-card { border: 1px solid var(--rule); background: var(--ground-2); padding: clamp(16px, 1.4vw, 28px); }
.profile-card .p-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 14px; }
.profile-card h3 { font-size: clamp(18px, 1.2vw, 24px); font-weight: 600; }
.profile-card .p-role { margin: 6px 0 10px; font-family: 'Courier Prime', monospace; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.profile-card p { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0 0 10px; }
.profile-card .p-links { font-size: 15px; }
.org-grid { display: grid; gap: clamp(10px, 1vw, 18px); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.org-card { display: grid; gap: 6px; border: 1px solid var(--rule); background: var(--ground-2); padding: clamp(14px, 1.2vw, 22px); color: var(--ink); }
.org-card:hover { border-color: var(--accent-deep); text-decoration: none; }
.org-logo { height: 34px; width: auto; max-width: 100%; object-fit: contain; }
.org-name { font-family: Vollkorn, Georgia, serif; font-size: 19px; font-weight: 600; }
.org-host { font-family: 'Courier Prime', monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--muted-2); }

/* ---- category / section listing ---- */
.sec-hero { display: grid; gap: clamp(24px, 2.4vw, 56px); grid-template-columns: 1fr; align-items: center; padding: clamp(26px, 2.6vw, 56px) 0 0; }
.sec-hero > figure { width: 100%; max-width: 620px; justify-self: end; }
.sec-hero h1 { font-size: clamp(34px, 4vw, 92px); line-height: 0.96; }
.sec-hero .dek { margin: clamp(16px, 1.6vw, 30px) 0 0; font-size: clamp(17px, 1.12vw, 24px); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.sec-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.4vw, 30px);
  margin-top: clamp(18px, 1.8vw, 34px);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: 'Courier Prime', monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(26px, 2.6vw, 56px); }
.cat-list > li { min-width: 0; }
.entry { display: grid; gap: clamp(16px, 1.6vw, 34px); grid-template-columns: 1fr; align-items: start; }
.entry__shot { min-width: 0; }
.entry__shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--rule); }
.entry h2, .entry h3 { font-size: clamp(20px, 1.5vw, 34px); font-weight: 600; line-height: 1.12; }
.entry p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 68ch; }
.entry .card__meta { margin-top: 12px; }
.entry--lead { border: 1px solid var(--rule); background: var(--ground-2); padding: clamp(16px, 1.6vw, 34px); }
.entry--lead h2 { font-size: clamp(25px, 2.2vw, 48px); font-weight: 700; }
.entry--lead p { font-size: clamp(16px, 1.05vw, 21px); color: var(--ink-2); }
.entry--lead .entry__shot img { aspect-ratio: 16 / 10; }
.entry--mat .entry__shot { background: var(--mat); padding: clamp(9px, 0.8vw, 15px); }
.entry--mat .entry__shot img { border: 0; }

/* ---- supporters: one horizontal run, 3 featured then a roll of 3 ---- */
.supporters { border-top: 1px solid var(--rule); padding: clamp(24px, 2vw, 46px) 0; }
.band--tight.supporters { padding: clamp(24px, 2vw, 46px) 0; }
.sup-group + .sup-group { margin-top: clamp(16px, 1.4vw, 28px); }
.sup-group { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sup-group__label {
  font-family: 'Courier Prime', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 12px;
}
.sup-run { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.2vw, 22px); }
/* at large sizes the two groups sit side by side, so the run fills the page */
@media (min-width: 1600px) {
  :root { --tile: 236px; }
  .supporters .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 2.2vw, 48px); align-items: stretch; }
  .supporters .sup-group { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
  .supporters .sup-run { height: 100%; align-items: stretch; }
  .supporters .wrap > .kicker { grid-column: 1 / -1; }
  .sup-group + .sup-group { margin-top: 0; }
  .sup-run { gap: 16px; }
}
@media (min-width: 1920px) { :root { --tile: 268px; } }
@media (min-width: 2400px) { :root { --tile: 320px; } }
.sponsor {
  flex: 0 0 var(--tile);
  width: var(--tile);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--rule);
  background: var(--ground-2);
  color: var(--ink);
}
.sponsor:hover { border-color: var(--accent-deep); text-decoration: none; }
.sponsor img {
  width: 100%;
  height: 64px;
  max-height: 64px;
  object-fit: contain;
  object-position: left center;
}
.sponsor-name { font-family: Vollkorn, Georgia, serif; font-size: 17px; font-weight: 600; line-height: 1.2; white-space: nowrap; letter-spacing: -0.005em; }
.sponsor-blurb { font-size: 14px; line-height: 1.5; color: var(--muted); min-width: 200px; }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--rule); background: #100d0a; }
.foot__in { display: grid; gap: clamp(22px, 2vw, 48px); grid-template-columns: 1fr; padding: clamp(30px, 2.6vw, 64px) 0; align-items: start; }
.foot__brand { display: flex; gap: clamp(12px, 1.2vw, 22px); align-items: flex-start; }
.foot__name { font-family: Vollkorn, Georgia, serif; font-weight: 700; font-size: clamp(20px, 1.5vw, 34px); line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; }
.foot__strap { margin: 12px 0 0; max-width: 52ch; font-size: 16px; line-height: 1.55; color: var(--muted); }
.foot__col { display: flex; flex-direction: column; gap: 10px; }
.foot__col a { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.foot__col a:hover { color: var(--ink); text-decoration: none; }
.foot__col a[href$="/category/recipes/"] { color: #ee7a58; }
.foot__col a[href$="/category/at-the-bench/"] { color: #7fd3b4; }
.foot__col a[href$="/category/cocoa/"] { color: #cfe8dc; }
.foot__col a[href$="/category/reference/"] { color: #d3b98f; }
.foot__mark { color: var(--accent); width: clamp(40px, 2.8vw, 56px); flex: 0 0 auto; margin-top: 2px; }
.foot__mark svg { width: 100%; height: auto; display: block; }

.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 16px 0 0;
  font-family: 'Courier Prime', monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.crumb a { color: var(--muted); }

.sidebar { display: none; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--accent); color: var(--ground); padding: 10px 16px; z-index: 20; }

/* ======================= BREAKPOINTS — mobile up, and ABOVE the cap ===== */

@media (min-width: 620px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--lead { grid-column: span 2; }
  .grid-figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline li { grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: baseline; }
}

@media (min-width: 768px) {
  :root { --t-body: 17px; }
  .signpost { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cameo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .entry--lead { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .further-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__in { grid-template-columns: 1.7fr 1fr 1fr; }
  .sec-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

@media (min-width: 1024px) {
  :root { --t-body: 18px; --breakout: 960px; --prose: 38rem; }
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card--lead { grid-column: span 2; grid-row: span 2; }
  .card--lead img { aspect-ratio: auto; flex: 1 1 auto; min-height: 300px; }
  .cameo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cameo__item { grid-template-columns: 1fr; gap: 8px; }
  .artbody .fig-col--float { float: right; width: 46%; margin: clamp(34px, 2.6vw, 52px) 0 clamp(24px, 2vw, 40px) clamp(20px, 2vw, 40px); }
}

@media (min-width: 1280px) {
  :root { --page: 1240px; --breakout: 1000px; }
}

/* --- above the desktop cap: the page GAINS, it does not just gain margin --- */
@media (min-width: 1600px) {
  :root {
    --page: 1560px;
    --breakout: 1180px;
    --prose: 44rem;
    --t-body: 19px;
    --t-cap: 16px;
    --t-credit: 14px;
  }
  /* the reading column gains a persistent section-contents sidebar */
  .artbody--rail { display: grid; grid-template-columns: minmax(0, 1fr) 268px; column-gap: clamp(34px, 3vw, 76px); row-gap: 0; align-items: start; width: min(100% - var(--gutter) * 2, var(--page)); margin-inline: auto; }
  .artbody--rail > * { grid-column: 1; }
  .artbody--rail .prose { width: min(100%, var(--prose)); margin-inline: auto; }
  .artbody--rail .breakout { width: 100%; margin-inline: 0; }
  .artbody--rail .breakout { width: min(100%, var(--breakout)); }
  .artbody--rail .sidebar { display: block; grid-column: 2; grid-row: 1 / span 40; position: sticky; top: 24px; margin-top: 0; display: block; }
  /* the column inset keeps its small footprint in the rail grid, where float is inert */
  .artbody--rail .fig-col--float {
    float: none;
    width: min(46%, 520px);
    justify-self: end;
    margin: clamp(34px, 2.6vw, 52px) 0 clamp(34px, 2.6vw, 52px);
  }
  .cat-list--dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 3.6vw, 80px) clamp(30px, 2.4vw, 52px); }
  .cat-list--dense .entry--lead { grid-column: span 2; }
  .gallery { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (min-width: 1920px) {
  :root {
    --page: 1800px;
    --breakout: 1320px;
    --prose: 50rem;
    --t-body: 20px;
  }
  .hero__head { max-width: 26ch; }
  .signpost { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 1.6vw, 40px); }
}

@media (min-width: 2400px) {
  :root { --page: 2160px; --breakout: 1520px; --prose: 56rem; --t-body: 21px; --t-lead: 24px; }
  .artbody--rail { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (max-width: 719px) {
  .navbtn { display: inline-flex; }
  .masthead__nav { display: none; padding-bottom: 20px; }
  .masthead__nav.is-open { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .masthead__nav .sep { display: none; }
  .navbtn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: Karla, sans-serif;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 11px 15px;
    cursor: pointer;
  }
  .navbtn svg { width: 16px; height: 16px; }
  .navbtn svg path { fill: none; stroke: currentColor; stroke-width: 1.7; }
  .figcap { gap: 6px; }
  .figcap .credit { flex: 1 1 100%; }
}

@media print {
  body { background: #fff; color: #111; }
  .masthead__nav, .supporters, .btn { display: none; }
}

/* ---- components used by articles and the internal styleguide ---- */
.article-figure { margin: 0; }
.article-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--rule); }
.article-figure figcaption { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); font-size: var(--t-cap); line-height: 1.45; color: var(--ink-2); }
.chart { margin: 0; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart figcaption { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); font-size: var(--t-cap); line-height: 1.45; color: var(--ink-2); }
.chart .c-bar { fill: var(--accent); }
.chart .c-bar-alt { fill: var(--secondary); }
.chart .c-axis { stroke: var(--rule); stroke-width: 1; }
.chart .c-grid { stroke: var(--ground-3); stroke-width: 1; stroke-dasharray: 3 7; }
.chart .c-label { font-family: 'Courier Prime', monospace; font-size: 12px; fill: var(--muted); }
.chart .c-value { font-family: 'Courier Prime', monospace; font-size: 12px; fill: var(--ink); }
.chart .c-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart .c-dot { fill: var(--accent); }
.chart .c-ring { fill: none; stroke-width: 18; }
.sg-row { display: grid; gap: clamp(18px, 1.8vw, 36px); grid-template-columns: 1fr; margin-top: clamp(18px, 1.6vw, 30px); }
@media (min-width: 900px) { .sg-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg-block { border-top: 1px solid var(--rule); padding-top: clamp(20px, 2vw, 40px); margin-top: clamp(34px, 3vw, 64px); }
.sg-block > h2 { font-size: clamp(20px, 1.5vw, 32px); font-weight: 600; }
.sg-note { margin: 8px 0 0; font-family: 'Courier Prime', monospace; font-size: 13px; letter-spacing: 0.06em; color: var(--muted-2); }

/* in-body figures: wide rather than tall, and never taller than the screen */
.artbody .fig-mat--wide img,
.artbody .fig-inset img { aspect-ratio: 16 / 9; max-height: 58vh; }
.artbody .gallery .fig-col img { aspect-ratio: 4 / 3; max-height: 40vh; }
.artbody .fig-col--float img { max-height: 46vh; }
@media (max-width: 719px) {
  .artbody .fig-mat--wide img, .artbody .fig-inset img { aspect-ratio: 3 / 2; max-height: none; }
}

/* in the rail grid margins do not collapse, so only the top margins may set rhythm */
.artbody > * { margin-bottom: 0; }
.artbody > figure, .artbody > .callout, .artbody > .pullquote, .artbody > .notes,
.artbody > .gallery, .artbody > .datatable-wrap, .artbody > .map-figure,
.artbody > .statrow, .artbody > .versus-wrap { margin-bottom: clamp(34px, 2.6vw, 52px); }
.artbody > blockquote { margin-bottom: 0; }

/* 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}
.sup-run{flex-wrap:wrap!important}
.sup-run > .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:5;-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}

/* pipeline: one brand treatment per tile — the name reads at the blurb's own size */
.sponsor .sp-brand{font:inherit!important;font-weight:700!important;letter-spacing:inherit!important;text-transform:none!important;color:inherit!important;display:inline!important;}

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit-panels{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:16px;width:100%}
.mapkit-panels>svg.mapkit{width:100%;height:auto;display:block}
@media (max-width:700px){.mapkit-panels{grid-template-columns:minmax(0,1fr)}}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#0F0B08;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* op-overflow-entry-inline: every archive entry carries its layout as an INLINE style —
   `style="grid-template-columns:minmax(0,240px) minmax(0,1fr)"` on all 25 of them — which no
   stylesheet rule can outrank. At 320 the row is 284px wide, so the thumbnail track took 240
   and the title track collapsed to 28px: each entry's headline then spilled to x=343..371 and
   the page measured 383 wide, cut off by body's hidden overflow rather than scrolling.
   Below 640 the thumbnail keeps a sensible share instead of the full 240, so the headline has
   room. Attribute-scoped, so it only touches elements that actually carry such a style, and
   `!important` is the only thing that can beat an inline declaration. Tested at 320: +63 -> 0.
   Desktop is untouched — there the 240px column is right. */
@media (max-width:640px){
  .entry[style*="grid-template-columns"]{grid-template-columns:minmax(0,96px) minmax(0,1fr)!important}
}

/* op-money-columns: the supporters block ran one tile per row — 7 tiles,
   1054px at 390, 11% of the whole page. Two columns bring it to
   760px (28% shorter). Checked before writing: no new overflow, smallest mark still
   137px wide, longest blurb 2 lines, tile heights 160-199px.
   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.
   Only the tier(s) that were one-per-row are touched (.sup-run), 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){
  .sup-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:17px!important}
    .sup-run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-run > * *{min-width:0!important;max-width:100%}
    .sup-run img,.sup-run svg{max-width:100%;height:auto}
}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 672px 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){
  .sup-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
  .sup-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .sup-run (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){
  .sup-run:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels */
div:where(.rt-h1), h1:where(.rt-h2){font-family: Vollkorn, Georgia, serif; font-weight: 700; letter-spacing: -0.018em; line-height: 1.04; margin: 0px; text-wrap: balance;}
div:where(.rt-h1){font-family: Vollkorn, Georgia, serif; font-weight: 700; letter-spacing: -0.018em; line-height: 1.04; margin: 0px; text-wrap: balance;}
.sec-hero div:where(.rt-h1){font-size: clamp(34px, 4vw, 92px); line-height: 0.96;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.entry > div.entry__shot > img,
  article.entry.entry--lead > div.entry__shot > img,
  article.entry.entry--mat > div.entry__shot > img,
  div.artbody.artbody--rail > figure.breakout.fig-col.fig-col--float > img,
  div.artbody.artbody--rail > figure.breakout.fig-mat.fig-mat--wide > img,
  div.breakout.gallery > figure.fig-col > img,
  div.cards > a.card > img,
  div.cards > a.card.card--lead > img,
  div.sec-hero > figure.fig-mat.fig-mat--wide > img,
  div.strip > figure.fig-mat.fig-mat--wide > img,
  figure.bleed.fig-plate > div.shot > img,
  figure.breakout.fig-inset > div.shot > img,
  figure.fig-inset > div.shot > img,
  section.hero > div.hero__img > 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.sup-group:nth-of-type(2) > div.sup-run{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
}
/* op-grow-same-size:end */