/* vqaontario.com — Vino Veritas
   Palette (5, each with a job):
     --paper  #F3EFE6  ground
     --ink    #131A16  ink
     --vine   #1D2A22  deep panel / section ground (from the map kit's land colour)
     --wine   #8A2846  accent, saturated ~345deg — bands, rules, kickers
     --frost  #1C6E8C  secondary, saturated ~197deg — data, pins, second panel
*/

:root {
  --paper: #F3EFE6;
  --ink: #131A16;
  --vine: #1D2A22;
  --wine: #8A2846;
  --frost: #1C6E8C;

  --ink-60: #4B554E;
  --ink-40: #6E776F;
  --paper-70: rgba(243, 239, 230, .72);
  --rule: rgba(19, 26, 22, .18);
  --rule-strong: rgba(19, 26, 22, .5);

  --measure: 72ch;
  --shell: 1680px;
  --gutter: 22px;
  --base: 17px;
  --serif: Faustina, Georgia, "Times New Roman", serif;
  --sans: Karla, "Helvetica Neue", Arial, sans-serif;
}

@media (min-width: 700px)  { :root { --gutter: 34px; --base: 18px; } }
@media (min-width: 1000px) { :root { --gutter: 44px; --base: 18.5px; } }
@media (min-width: 1200px) { :root { --gutter: 56px; --base: 19px; --measure: 74ch; } }
@media (min-width: 1600px) { :root { --gutter: 76px; --base: 20px; --measure: 76ch; } }
@media (min-width: 2000px) { :root { --gutter: 104px; --base: 21.5px; --measure: 78ch; } }
@media (min-width: 2400px) { :root { --gutter: 132px; --base: 23px; --measure: 80ch; } }

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--base)/1.6 var(--sans);
  text-wrap: pretty;
  overflow-x: hidden;
}

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

a { color: var(--wine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--frost); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; line-height: 1.02; margin: 0; }

.kicker {
  font: 700 .74rem/1.2 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wine);
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 1em;
}
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.kicker svg { width: 1.5em; height: 1.5em; flex: none; }

.ico { width: 1.5em; height: 1.5em; flex: none; }

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

.wrap { padding-inline: var(--gutter); }
.wide { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- masthead ---------- */

.masthead { border-bottom: 2px solid var(--ink); }
.masthead-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0 12px;
  align-items: end;
}
@media (min-width: 1220px) {
  .masthead-in { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 32px; padding: 26px 0 16px; }
}
@media (min-width: 900px) and (max-width: 1219px) {
  .masthead-in { padding: 22px 0 0; gap: 16px; }
  .menu { justify-self: start; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--rule); width: 100%; }
  .menu a { padding: 10px 20px 10px 0; margin-right: 4px; }
}
.brand { display: flex; align-items: flex-start; gap: 14px; text-decoration: none; color: inherit; }
.brand:hover { color: inherit; }
.brand-mark { height: clamp(30px, 3.6vw, 62px); width: auto; color: var(--wine); flex: none; }
.brand-name {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 62px);
  line-height: .9;
  letter-spacing: -.035em;
}
.brand-name em { font-style: normal; color: var(--wine); }
.brand-line {
  display: block;
  margin: 6px 0 0;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ink-60);
}

.menu { display: flex; flex-wrap: wrap; gap: 2px 0; justify-self: start; }
@media (min-width: 1220px) { .menu { justify-self: end; } }
@media (max-width: 899px) {
  .masthead-in { padding-bottom: 0; }
  .menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    width: calc(100% + var(--gutter) * 2);
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { scroll-snap-align: start; white-space: nowrap; min-height: 46px; padding: 12px 16px 12px 0; margin-right: 4px; }
}
.menu a {
  display: flex;
  align-items: center;
  gap: .45em;
  padding: 8px 14px 8px 0;
  margin-right: 2px;
  font: 700 .76rem/1.1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 3px solid transparent;
}
.menu a:hover { color: var(--wine); border-bottom-color: var(--wine); }
.menu a[aria-current] { color: var(--wine); border-bottom-color: var(--wine); }
.menu a svg { color: var(--frost); }
.menu a:hover svg, .menu a[aria-current] svg { color: var(--wine); }

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

.site-foot { border-top: 2px solid var(--ink); margin-top: 0; padding: 34px 0 46px; }
.site-foot-in { display: grid; gap: 22px; }
@media (min-width: 900px) { .site-foot-in { grid-template-columns: minmax(280px, 1fr) minmax(0, auto); align-items: end; } }
.site-foot .brand-name { font-size: clamp(26px, 2.2vw, 44px); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-nav a {
  font: 700 .72rem/1.2 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-60);
}
.foot-nav a:hover { color: var(--wine); }
.foot-note { margin: 8px 0 0; font-size: .85rem; color: var(--ink-60); max-width: 52ch; }

/* ---------- homepage: lead ---------- */

.lead-band { position: relative; background: var(--vine); color: var(--paper); }
.lead-band img { width: 100%; height: clamp(340px, 74vh, 900px); object-fit: cover; opacity: .92; }
.lead-scrim {
  position: absolute; inset: auto 0 0 0; height: 78%;
  background: linear-gradient(to top, rgba(12, 18, 14, .93) 8%, rgba(12, 18, 14, .55) 48%, rgba(12, 18, 14, 0));
  pointer-events: none;
}
.lead-text { position: absolute; inset: auto 0 0 0; padding: 0 var(--gutter) clamp(22px, 3vw, 64px); }
.lead-grid { display: grid; gap: 16px; max-width: var(--shell); margin-inline: auto; }
@media (min-width: 1000px) { .lead-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr); gap: 44px; align-items: end; } }
.lead-title {
  font-size: clamp(32px, 5.4vw, 108px);
  line-height: .94;
  color: var(--paper);
}
.lead-title a { color: inherit; text-decoration: none; }
.lead-title a:hover { color: var(--paper); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.lead-title { text-shadow: 0 2px 3px rgba(8, 12, 9, .5), 0 10px 44px rgba(8, 12, 9, .72); }
.lead-dek { text-shadow: 0 1px 2px rgba(8, 12, 9, .55); }
.lead-dek { margin: 0; font-size: clamp(15px, 1.15vw, 23px); line-height: 1.45; color: var(--paper-70); }
.lead-band .kicker { color: #E9A9BD; }
.lead-band .kicker svg { color: #E9A9BD; }

/* the signature strip — 1988 · −8°C · the lake effect */
.signature {
  background: var(--wine);
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 0;
  padding: 0 max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
  margin: 0;
  font: 700 .78rem/1.3 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  border-bottom: 4px solid var(--vine);
}
.signature span {
  display: flex;
  align-items: baseline;
  gap: .7em;
  padding: 18px 0;
  flex: 1 1 240px;
}
.signature span + span { border-left: 1px solid rgba(243, 239, 230, .34); padding-left: clamp(16px, 2vw, 44px); }
.signature b { font-family: var(--serif); font-size: 2.5em; line-height: .9; letter-spacing: -.02em; font-weight: 700; }

/* ---------- homepage bands ---------- */

.band { padding: clamp(34px, 4vw, 96px) var(--gutter) 0; max-width: var(--shell); margin-inline: auto; }
.band-head {
  display: grid;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
  align-items: baseline;
}
@media (min-width: 900px) { .band-head { grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, 34ch); gap: clamp(20px, 2.4vw, 52px); } }
.band-no {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 44px);
  line-height: 1;
  color: var(--wine);
  border-top: 3px solid var(--wine);
  padding-top: 8px;
}
.band-head h2 { font-size: clamp(25px, 2.7vw, 52px); max-width: 20ch; }
.band-head p { margin: 0; color: var(--ink-60); font-size: .95rem; }

.two-up { display: grid; gap: clamp(24px, 2.6vw, 60px); padding-top: clamp(20px, 2.2vw, 48px); }
@media (min-width: 1000px) { .two-up { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; } }
.two-up article { display: flex; flex-direction: column; }
.two-up article > figure { margin-bottom: 16px; }
.two-up .article-figure img { width: 100%; }
.two-up h3 { font-size: clamp(21px, 2vw, 40px); line-height: 1.04; margin-top: 0; }
.two-up--second h3 { font-size: clamp(19px, 1.5vw, 30px); }
.two-up a { text-decoration: none; color: var(--ink); }
.two-up a:hover { color: var(--wine); }
.two-up p { margin: 10px 0 0; max-width: 52ch; color: var(--ink-60); }
@media (min-width: 1000px) {
  .two-up--second { border-left: 1px solid var(--rule); padding-left: clamp(20px, 2.4vw, 52px); }
}

/* the wine band — one saturated area, used at size */
.rule-band { background: var(--wine); color: var(--paper); margin-top: clamp(40px, 4.4vw, 108px); }
.rule-band-in { display: grid; gap: 22px; padding: clamp(28px, 3.2vw, 84px) 0; }
@media (min-width: 1000px) { .rule-band-in { grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(240px, .6fr); gap: clamp(28px, 3.4vw, 84px); align-items: center; } }
.rule-band .big-num {
  display: grid;
  justify-items: start;
  margin: 0;
  border-top: 4px solid var(--paper);
  padding-top: 14px;
}
.rule-band .bn-fig {
  display: flex;
  align-items: baseline;
  gap: .08em;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(84px, 10vw, 200px);
  line-height: .82;
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.rule-band .bn-unit {
  font-family: var(--serif);
  font-size: .28em;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(243, 239, 230, .82);
}
.rule-band .bn-label {
  margin-top: 12px;
  font: 700 .72rem/1.3 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, .7);
}
.rule-band h2 { font-size: clamp(23px, 2.2vw, 48px); max-width: 26ch; }
.rule-band p { margin: 12px 0 0; max-width: 56ch; color: var(--paper-70); font-size: 1.02rem; }
.rule-band a { color: var(--paper); }
.rule-band img { border: 1px solid rgba(243, 239, 230, .4); max-height: 46vh; }
@media (min-width: 1000px) { .rule-band img { max-height: none; } }

/* the map band */
.map-band { background: var(--vine); color: var(--paper); margin-top: clamp(40px, 4.4vw, 108px); border-top: 6px solid var(--wine); }
@media (max-width: 699px) {
  .map-frame svg [data-cluster] { display: none; }
  .map-frame svg .cluster-label { display: block !important; }
  .map-frame svg .pin-label { font-size: 34px; stroke-width: 7px; }
  .map-frame svg .water-label { font-size: 34px; stroke-width: 8px; letter-spacing: 4px; }
  .map-frame svg .geo-label { font-size: 38px; }
  .map-frame svg .geo-us { display: none; }
  .map-frame svg .pin-dot { r: 11px; stroke-width: 3px; }
  .map-frame svg .pin-ring { r: 24px; stroke-width: 2.6px; }
  .map-frame svg .pin-leader { stroke-width: 2.2px; }
  .map-frame svg .map-scale text { font-size: 26px; }
  .map-frame svg .map-scale path { stroke-width: 5px; }
  .map-frame svg .map-north text { font-size: 28px; }
  .map-frame svg .map-north path { stroke-width: 4px; }
  .map-legend { font-size: .66rem; gap: 8px 16px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .map-frame svg .pin-label { font-size: 25px; }
  .map-frame svg .water-label, .map-frame svg .geo-label { font-size: 26px; }
  .map-frame svg .pin-dot { r: 8px; }
  .map-frame svg .pin-ring { r: 18px; }
}

.map-frame svg .cluster-label { display: none; }

.map-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(243, 239, 230, .3);
  font: 700 .7rem/1.3 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, .8);
}
.map-legend li { display: flex; align-items: center; gap: 8px; }
.lg-pin { width: 13px; height: 13px; border-radius: 50%; background: var(--wine); box-shadow: 0 0 0 2px var(--paper); flex: none; }
.lg-land { width: 16px; height: 12px; background: #1D2A22; outline: 1px solid rgba(243, 239, 230, .5); flex: none; }
.lg-water { width: 16px; height: 12px; background: var(--paper); outline: 1px solid rgba(28, 110, 140, .9); flex: none; }
.map-band-in { display: grid; gap: 26px; padding: clamp(28px, 3.2vw, 84px) 0; }
@media (min-width: 1100px) { .map-band-in { grid-template-columns: minmax(0, 1fr) minmax(300px, 34ch); gap: clamp(30px, 3.4vw, 80px); align-items: center; } }
.map-band h2 { font-size: clamp(23px, 2.2vw, 48px); max-width: 24ch; }
.map-band p { color: var(--paper-70); }
.map-band .kicker { color: #9CC9D8; }
.map-band .kicker svg { color: #9CC9D8; }
.map-frame { border: 1px solid rgba(243, 239, 230, .3); background: var(--paper); padding: clamp(8px, 1vw, 20px); }
.map-frame svg { width: 100%; height: auto; display: block; }
.pin-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.pin-list a { color: var(--paper); text-decoration: none; display: flex; gap: 10px; align-items: baseline; font-size: .95rem; }
.pin-list a:hover { color: #9CC9D8; }
.pin-list span { font: 700 .72rem/1.4 var(--sans); letter-spacing: .12em; color: #9CC9D8; }

/* compact group — the rest of the sections, four of them, no more */
.compact { display: grid; gap: clamp(18px, 2vw, 44px); padding-top: clamp(18px, 2vw, 44px); }
@media (min-width: 760px) { .compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.compact article { display: flex; flex-direction: column; }
.compact article > a.thumb-link { display: block; overflow: hidden; }
.compact h3 { font-size: clamp(18px, 1.35vw, 28px); line-height: 1.1; margin-bottom: 8px; }
.compact h3 a { color: var(--ink); text-decoration: none; }
.compact h3 a:hover { color: var(--wine); }
.compact p { margin: 0 0 12px; font-size: .92rem; color: var(--ink-60); }
.compact .thumb {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  transition: transform .5s ease, filter .5s ease;
  filter: saturate(.94);
}
.compact article:hover .thumb { transform: scale(1.035); filter: saturate(1.06); }
.compact .kicker { margin-top: 14px; margin-bottom: 10px; font-size: .68rem; border-top: 3px solid var(--frost); padding-top: 10px; }
.compact .grow { margin-top: auto; }
@media (min-width: 1300px) {
  .compact article:nth-child(even) { padding-top: clamp(20px, 2.4vw, 56px); }
}

.quiet-line {
  background: var(--vine);
  color: var(--paper);
  margin-top: clamp(40px, 4.4vw, 108px);
  padding: clamp(34px, 4vw, 96px) max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
}
.quiet-in { display: grid; gap: 18px; }
@media (min-width: 1000px) { .quiet-in { grid-template-columns: minmax(0, 1fr) minmax(0, 34ch); gap: clamp(30px, 3.4vw, 84px); align-items: end; } }
.quiet-line p {
  margin: 0;
  max-width: 20ch;
  font-family: var(--serif);
  font-size: clamp(28px, 3.8vw, 82px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--paper);
  border-top: 4px solid var(--wine);
  padding-top: 20px;
}
.quiet-line small { display: block; font: 400 1rem/1.55 var(--sans); color: var(--paper-70); }
.quiet-line a { color: #E9A9BD; }

/* ---------- article shell: three content widths ---------- */

.piece {
  display: grid;
  max-width: var(--shell);
  margin-inline: auto;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, 0.34fr)
    [prose-start] minmax(0, var(--measure))
    [prose-end] minmax(0, 0.34fr)
    [wide-end] minmax(var(--gutter), 1fr)
    [full-end];
  row-gap: 0;
}
.piece > * { grid-column: prose-start / prose-end; }
.piece > .break-wide { grid-column: wide-start / wide-end; }
.piece > .break-left { grid-column: wide-start / prose-end; }
.piece > .break-right { grid-column: prose-start / wide-end; }
.piece > .break-full { grid-column: full-start / full-end; margin-block: clamp(26px, 2.8vw, 60px); }
.piece > .art-lead.break-full { margin-block: 0 clamp(26px, 3vw, 64px); }
.piece > .article-figure + .article-figure { margin-top: clamp(30px, 3.4vw, 76px); }
@media (max-width: 999px) {
  .piece { grid-template-columns: [full-start] var(--gutter) [wide-start prose-start] minmax(0, 1fr) [prose-end wide-end] var(--gutter) [full-end]; }
}

.piece p, .piece ul, .piece ol { font-size: 1.18rem; line-height: 1.66; }
.piece > p { margin: 0 0 1.05em; }
.piece h2 {
  font-size: clamp(22px, 2vw, 40px);
  margin: 1.5em 0 .5em;
  padding-top: .5em;
  border-top: 1px solid var(--rule);
}
.piece h3 { font-size: clamp(18px, 1.4vw, 28px); margin: 1.4em 0 .4em; }

.art-head {
  display: grid;
  gap: 18px;
  padding-top: clamp(24px, 2.8vw, 64px);
  padding-bottom: clamp(16px, 1.6vw, 34px);
  border-bottom: 2px solid var(--ink);
  align-items: end;
}
@media (min-width: 1000px) {
  .art-head { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: clamp(28px, 3.2vw, 80px); }
}
.art-title { font-size: clamp(34px, 4.8vw, 104px); line-height: .92; max-width: 20ch; }
.ah-side .lead { margin: 0; max-width: 42ch; }
.art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 16px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--rule);
  font: 700 .72rem/1.3 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.art-meta strong { color: var(--ink); font-weight: 700; }

.art-lead { margin: 0 0 clamp(26px, 3vw, 64px); }
.art-lead img { width: 100%; height: clamp(260px, 62vh, 820px); object-fit: cover; }
.art-lead figcaption { padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter))); padding-top: 10px; }
@media (min-width: 1000px) {
  .art-lead figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: clamp(20px, 2.4vw, 56px); }
  .art-lead .cap { max-width: none; flex: 1 1 auto; }
  .art-lead .credit { flex: 0 0 auto; padding-top: 9px; }
}

.art-more { margin: clamp(34px, 3.6vw, 84px) 0 clamp(44px, 4.4vw, 104px); border-top: 2px solid var(--ink); padding-top: 16px; }
.am-head { display: grid; gap: 8px; align-items: baseline; margin-bottom: clamp(16px, 1.8vw, 34px); }
@media (min-width: 800px) { .am-head { grid-template-columns: minmax(0, 1fr) minmax(0, auto); } }
.art-more h2 { border-top: 0; margin: 0; padding-top: 0; font-size: clamp(22px, 2vw, 40px); }
.am-all { font: 700 .74rem/1.3 var(--sans); letter-spacing: .13em; text-transform: uppercase; text-decoration: none; color: var(--wine); }
.am-all:hover { color: var(--frost); }
.more-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2vw, 44px); }
@media (min-width: 760px) { .more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.more-card { display: grid; gap: 8px; text-decoration: none; color: var(--ink); align-content: start; }
.more-card img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: filter .4s ease; filter: saturate(.94); }
.more-card:hover img { filter: saturate(1.08); }
.mc-sec { font: 700 .68rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wine); border-top: 3px solid var(--frost); padding-top: 9px; }
.mc-title { font-family: var(--serif); font-weight: 700; font-size: clamp(18px, 1.35vw, 27px); line-height: 1.1; }
.more-card:hover .mc-title { color: var(--wine); }
.mc-brief { font-size: .95rem; line-height: 1.45; color: var(--ink-60); }

.lead, p.lead {
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 34px);
  line-height: 1.34;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 20px 0 0;
  max-width: 46ch;
}

/* ---------- figures: three treatments, one drawing system ---------- */

figure { margin: 0; }

figcaption { display: grid; gap: 4px 26px; padding-top: 9px; }
@media (min-width: 1000px) {
  figcaption { grid-template-columns: minmax(0, 1fr) minmax(0, 26ch); align-items: baseline; }
  figcaption.solo { grid-template-columns: minmax(0, 1fr); }
  .article-figure figcaption.solo .cap { max-width: none; }
}
.cap {
  margin: 0;
  font-size: .95rem;
  line-height: 1.42;
  max-width: 62ch;
  border-top: 2px solid var(--wine);
  padding-top: 7px;
}
.credit { margin: 0; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40); }
@media (min-width: 1000px) { .credit { text-align: right; padding-top: 9px; } }

.article-figure { margin: clamp(20px, 2.2vw, 44px) 0; }
.article-figure img { width: 100%; object-fit: cover; }

/* treatment 1 — full-bleed band */
.fig-bleed img { height: clamp(240px, 56vh, 760px); }
.fig-bleed figcaption { padding-inline: var(--gutter); max-width: var(--shell); margin-inline: auto; }

/* treatment 2 — mat: the photograph sits on the deep panel colour */
.fig-mat { background: var(--vine); padding: clamp(10px, 1vw, 22px); }
.fig-mat img { aspect-ratio: 16 / 10; }
.fig-mat figcaption { padding: 12px clamp(2px, .4vw, 10px) 4px; }
.fig-mat .cap { color: var(--paper); border-top-color: var(--paper); }
.fig-mat .credit { color: rgba(243, 239, 230, .6); }

/* treatment 3 — inset plate, offset over a rule */
.fig-plate { position: relative; padding-left: 0; }
.fig-plate::before { content: ""; position: absolute; left: 0; right: 22%; top: 0; height: 3px; background: var(--frost); }
.fig-plate img { margin-top: 14px; aspect-ratio: 5 / 4; }

.gallery { display: grid; gap: 14px; margin: clamp(20px, 2.2vw, 44px) 0; }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.gallery figcaption { padding-top: 7px; grid-template-columns: minmax(0, 1fr); }
.gallery .cap { font-size: .82rem; border-top-width: 1px; }

/* ---------- pulled-out material ---------- */

.pullquote { margin: clamp(22px, 2.4vw, 48px) 0; padding: 0; }
.pullquote p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(21px, 2.1vw, 44px);
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--wine);
  border-top: 3px solid var(--wine);
  padding-top: 14px;
}

.blockquote { margin: clamp(20px, 2.2vw, 40px) 0; padding-left: 20px; border-left: 3px solid var(--frost); }
.blockquote p { margin: 0; font-family: var(--serif); font-size: 1.16rem; line-height: 1.4; }
.blockquote cite { display: block; margin-top: 8px; font: 700 .74rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--ink-40); }

.callout {
  margin: clamp(20px, 2.2vw, 44px) 0;
  background: var(--vine);
  color: var(--paper);
  padding: clamp(18px, 1.8vw, 36px);
}
.callout p { margin: 0; font-size: 1.04rem; max-width: 58ch; }
.callout h3 { color: var(--paper); margin: 0 0 .4em; font-size: 1.2rem; }
.callout a { color: #E9A9BD; }

.note {
  margin: clamp(16px, 1.6vw, 32px) 0;
  padding: 12px 0 12px 16px;
  border-left: 3px solid var(--rule-strong);
  font-size: .95rem;
  color: var(--ink-60);
}

.notes-panel {
  margin: clamp(26px, 2.8vw, 60px) 0;
  border-top: 2px solid var(--ink);
  padding-top: 16px;
}
.notes-panel > h3 { font-size: clamp(19px, 1.5vw, 30px); margin-bottom: .7em; }
.notes-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 1000px) { .notes-panel--wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 64px); } }
.notes-panel li {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-size: 1.02rem;
  line-height: 1.5;
}
.notes-panel li:first-child { border-top: 0; }
@media (min-width: 1000px) { .notes-panel--wide li:nth-child(2) { border-top: 0; } }
.notes-panel li b {
  font: 700 .76rem/1.35 var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--wine);
}

.notes-dark {
  background: var(--vine);
  color: var(--paper);
  padding: clamp(24px, 2.8vw, 64px) var(--gutter);
  margin: clamp(30px, 3.2vw, 72px) 0;
}
.notes-dark-in { max-width: var(--shell); margin-inline: auto; display: grid; gap: 18px; }
@media (min-width: 1000px) { .notes-dark-in { grid-template-columns: minmax(0, 28ch) minmax(0, 1fr); gap: clamp(28px, 3vw, 80px); } }
.notes-dark h3 { color: var(--paper); font-size: clamp(21px, 1.9vw, 40px); }
.notes-dark ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .notes-dark ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 68px); } }
@media (min-width: 1600px) { .notes-dark ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.notes-dark li { border-top: 1px solid rgba(243, 239, 230, .3); padding: 12px 0; font-size: 1.02rem; line-height: 1.45; color: var(--paper-70); }
.notes-dark li b { color: var(--paper); display: block; font: 700 .76rem/1.35 var(--sans); letter-spacing: .11em; text-transform: uppercase; margin-bottom: 3px; }

/* ---------- data ---------- */

.statrow { display: grid; gap: 14px; margin: clamp(20px, 2.2vw, 44px) 0; }
@media (min-width: 640px) { .statrow { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.statblock { border-top: 3px solid var(--wine); padding-top: 10px; }
.stat-num { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 3vw, 60px); line-height: .95; letter-spacing: -.03em; }
.stat-label { display: block; margin-top: 6px; font-size: .88rem; line-height: 1.35; color: var(--ink-60); }

.timeline { list-style: none; margin: clamp(20px, 2.2vw, 44px) 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; gap: 2px 24px; padding: 12px 0; border-top: 1px solid var(--rule); }
@media (min-width: 700px) { .timeline li { grid-template-columns: minmax(0, 22ch) minmax(0, 1fr); } }
.t-when { font: 700 .78rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wine); }
.t-what { font-size: 1rem; line-height: 1.45; }

table.versus, table.datatable { width: 100%; border-collapse: collapse; margin: clamp(20px, 2.2vw, 44px) 0; font-size: .98rem; }
table.versus caption, table.datatable caption { text-align: left; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; padding-bottom: 10px; }
table.versus th, table.datatable th {
  text-align: left;
  font: 700 .74rem/1.3 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding: 8px 16px 8px 0;
  border-bottom: 2px solid var(--ink);
}
table.versus td, table.datatable td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.42; }
table.versus tr td:first-child { font-weight: 700; }

.map-figure { margin: 0; }
.map-figure .map-frame { background: var(--paper); padding: clamp(10px, 1.2vw, 26px); }
.map-figure figcaption { padding-top: 12px; }

.map-slot {
  min-height: clamp(220px, 40vh, 520px);
  background: var(--vine);
  display: grid;
  place-items: center;
  color: rgba(243, 239, 230, .6);
  font: 700 .72rem/1.4 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
}

.profile-card.no-photo { border-top-color: var(--wine); }
.org-card.no-logo .org-name { font-size: 1.15rem; }

.chart { margin: clamp(20px, 2.2vw, 44px) 0; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart text { font: 400 13px var(--sans); fill: var(--ink-60); }
.chart figcaption { grid-template-columns: minmax(0, 1fr); }

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

.profile-grid, .org-grid { display: grid; gap: 16px; margin: clamp(20px, 2.2vw, 44px) 0; }
@media (min-width: 760px) { .profile-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (min-width: 600px) { .org-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.profile-card { display: flex; flex-direction: column; border-top: 3px solid var(--frost); padding-top: 12px; }
.profile-card .p-photo { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; margin-bottom: 10px; }
.profile-card h3 { font-size: 1.15rem; }
.profile-card .p-role { margin: 4px 0 8px; font: 700 .72rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); }
.profile-card p { margin: 0 0 8px; font-size: .93rem; line-height: 1.45; }
.profile-card .p-links { margin-top: auto; font-size: .85rem; }

.org-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; background: var(--vine); color: var(--paper);
  text-decoration: none;
}
.org-card:hover { color: var(--paper); outline: 2px solid var(--wine); }
.org-logo { max-height: 34px; width: auto; max-width: 100%; object-fit: contain; }
.org-name { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; }
.org-host { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 239, 230, .6); }

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

.further-grid { display: grid; gap: 12px; margin: clamp(20px, 2.4vw, 48px) 0 0; }
@media (min-width: 700px) { .further-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.further-grid a {
  display: block; padding: 14px 0 0; border-top: 2px solid var(--ink);
  font-family: var(--serif); font-weight: 700; font-size: 1.08rem; line-height: 1.12;
  color: var(--ink); text-decoration: none;
}
.further-grid a:hover { color: var(--wine); }

.related-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.related-links a { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.related-links a:hover { color: var(--wine); }

/* ---------- category / archive ---------- */

.cat-head { padding: clamp(22px, 2.6vw, 60px) 0 14px; border-bottom: 2px solid var(--ink); display: grid; gap: 16px; }
@media (min-width: 1000px) { .cat-head { grid-template-columns: minmax(0, 1fr) minmax(0, 42ch); gap: 50px; align-items: end; } }
.cat-head h1 { font-size: clamp(30px, 3.8vw, 80px); line-height: .96; }
.cat-head p { margin: 0; font-size: 1.05rem; color: var(--ink-60); }

.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list > li { border-bottom: 1px solid var(--rule); }
.cat-list article { display: grid; gap: 14px; padding: clamp(18px, 2vw, 40px) 0; }
@media (min-width: 800px) { .cat-list article { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 52px); } }
@media (min-width: 1600px) { .cat-list article { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
.cat-list img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.cat-list h2 { font-size: clamp(21px, 1.9vw, 38px); line-height: 1.05; }
.cat-list h2 a { color: var(--ink); text-decoration: none; }
.cat-list h2 a:hover { color: var(--wine); }
.cat-list p { margin: 8px 0 0; max-width: 68ch; color: var(--ink-60); }

.reg { width: 100%; border-collapse: collapse; margin: 0 0 clamp(30px, 3vw, 70px); }
.reg th { text-align: left; font: 700 .72rem/1.3 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-40); padding: 8px 20px 8px 0; border-bottom: 2px solid var(--ink); }
.reg td { padding: 12px 20px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.reg td a { font-family: var(--serif); font-weight: 700; font-size: 1.08rem; color: var(--ink); text-decoration: none; }
.reg td a:hover { color: var(--wine); }
.reg .reg-sec { font: 700 .72rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wine); white-space: nowrap; }
.reg .reg-brief { color: var(--ink-60); font-size: .95rem; }
@media (max-width: 799px) {
  .reg thead { display: none; }
  .reg tr { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .reg td { display: block; padding: 0; border: 0; }
}

/* ---------- supporters ---------- */

.supporters { border-top: 2px solid var(--ink); margin: clamp(44px, 5vw, 120px) auto 0; max-width: var(--shell); padding: clamp(24px, 2.6vw, 56px) var(--gutter) clamp(10px, 1vw, 22px); }
.supporters-head { display: grid; gap: 8px; margin-bottom: 22px; }
@media (min-width: 900px) { .supporters-head { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 34px; align-items: baseline; } }
.supporters-head h2 { font-size: clamp(19px, 1.5vw, 30px); }
.supporters-head p { margin: 0; font-size: .9rem; color: var(--ink-60); max-width: 56ch; }
.tier-label {
  font: 700 .72rem/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wine);
  margin: 0 0 12px;
}
.sponsor-tier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 500px));
  gap: 14px;
  justify-content: start;
  margin-bottom: 26px;
}
.sponsor-tier--roll { gap: 8px; margin-bottom: 12px; }
.sponsor-tier--featured { padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.sponsor-tier--featured + .tier-label { margin-top: 22px; }
.sponsor {
  display: grid;
  grid-template-columns: 200px minmax(200px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 16px;
  background: var(--vine);
  color: var(--paper);
  text-decoration: none;
}
.sponsor-tier--roll .sponsor { padding: 12px 16px; }
.sponsor:hover { color: var(--paper); outline: 2px solid var(--wine); }
.sp-logo { display: flex; align-items: center; min-height: 52px; }
.sponsor img { max-height: 52px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.sp-copy { display: grid; gap: 5px; align-content: center; }
.sponsor-name { font: 700 .82rem/1.25 var(--sans); letter-spacing: .06em; }
.sponsor-blurb { font-size: .84rem; line-height: 1.4; color: var(--paper-70); }
@media (max-width: 619px) {
  .sponsor { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sp-logo { min-height: 46px; }
  .sponsor img { max-height: 46px; }
}

/* ---------- misc pages ---------- */

.plain { padding: clamp(26px, 3vw, 70px) 0 clamp(40px, 4vw, 100px); }
.plain h1 { font-size: clamp(30px, 3.6vw, 76px); margin-bottom: .5em; }
.plain p { max-width: 66ch; font-size: 1.06rem; }

.sg-block { padding: clamp(24px, 2.6vw, 56px) 0; border-top: 1px solid var(--rule); }
.sg-block > h2 { font-size: clamp(20px, 1.7vw, 34px); margin-bottom: .8em; color: var(--frost); }
.sg-narrow { max-width: 360px; border: 1px dashed var(--rule-strong); padding: 12px; }

/* ---------- mobile pass ---------- */

@media (max-width: 767px) {
  .lead-band img { height: clamp(300px, 62vh, 520px); }
  .lead-title { font-size: clamp(30px, 8.4vw, 46px); }
  .lead-text { padding-bottom: 20px; }
  .lead-dek { font-size: 15px; }

  .signature span { flex: 1 1 100%; padding: 12px 0; }
  .signature span + span { border-left: 0; border-top: 1px solid rgba(243, 239, 230, .34); padding-left: 0; }
  .signature b { font-size: 2.1em; }

  .band-no { justify-self: start; }
  .band-head h2 { max-width: none; }

  .art-title { max-width: none; }
  .art-lead img { height: clamp(230px, 42vh, 340px); }

  .piece p, .piece ul, .piece ol { font-size: 1.08rem; line-height: 1.6; }
  .piece > .break-full { margin-block: 26px; }
  .notes-dark { padding-block: 26px; }
  .notes-dark li, .notes-panel li { padding: 11px 0; font-size: .98rem; }
  .pullquote p { font-size: clamp(20px, 6vw, 28px); }

  .fig-mat { padding: 8px; }
  .fig-plate::before { right: 34%; }
  .article-figure { margin-block: 22px; }
  figcaption { gap: 6px; }
  .credit { text-align: left; }

  .quiet-line p { font-size: clamp(26px, 8vw, 40px); max-width: none; }

  .compact .thumb { aspect-ratio: 4 / 3; }
  .cat-list img { aspect-ratio: 16 / 9; }

  .sponsor { padding: 14px; }
  .sponsor img { height: 52px; }

  table.versus, table.datatable { font-size: .92rem; }
  table.versus td, table.datatable td { padding: 9px 10px 9px 0; }

  .site-foot-in { gap: 18px; }
  .foot-nav a { min-height: 34px; display: flex; align-items: center; }
}

@media (max-width: 479px) {
  .more-grid { gap: 20px; }
  .more-card img { aspect-ratio: 16 / 9; }
  .rule-band .bn-fig { font-size: clamp(66px, 20vw, 96px); }
  .statrow { grid-template-columns: minmax(0, 1fr); }
}

.skip { position: absolute; left: -9999px; }
.skip:focus { position: static; display: inline-block; padding: 8px; }

/* 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:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-mark-panel: Design set no ground on the mark, so light and dark logos cannot
   both read against the page. Give every mark the same dark plate and an inset — and
   GROW the box by that inset so the artwork keeps the size Design chose. */
.sponsor img,.sponsor-box img,.sp-logo img{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important;height:68px!important;max-height:68px!important;width:100%!important;object-fit:contain!important;border-radius:2px}

/* 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}
: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}

/* 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__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#f3efe6;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* op-no-mark-ground: operator: remove the extra background. Mark plate #121013 on its own tile. */
.sponsor img,.sponsor-box img,.sp-logo img{background:transparent!important}

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   1748px at 390, 21% of the whole page. Two columns bring it to
   1142px (35% shorter). Checked before writing: no new overflow, smallest mark still
   134px wide, longest blurb 3 lines, tile heights 164-188px.
   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. 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-tier.sponsor-tier--featured, .sponsor-tier.sponsor-tier--roll), 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-tier.sponsor-tier--featured{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-tier.sponsor-tier--featured > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-tier.sponsor-tier--featured > * *{min-width:0!important;max-width:100%}
    .sponsor-tier.sponsor-tier--featured img,.sponsor-tier.sponsor-tier--featured svg{max-width:100%;height:auto}
  .sponsor-tier.sponsor-tier--roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-tier.sponsor-tier--roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-tier.sponsor-tier--roll > * *{min-width:0!important;max-width:100%}
    .sponsor-tier.sponsor-tier--roll img,.sponsor-tier.sponsor-tier--roll svg{max-width:100%;height:auto}
  .sponsor-tier.sponsor-tier--featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .sponsor-tier.sponsor-tier--roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-tier.sponsor-tier--featured (5 tiles), .sponsor-tier.sponsor-tier--roll (5 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-tier.sponsor-tier--featured:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-tier.sponsor-tier--roll:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px){
  figure.map-figure.break-full > figcaption, figure.map-figure.break-full > :is(p,h2,h3,h4,ul,ol,[class*=cap],.credit,.chart-title,.chart-note){padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
  ul.map-legend{padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.article-figure.fig-mat > img,
  article.piece > figure.art-lead.break-full > img,
  article.piece > figure.article-figure.break-left.fig-plate > img,
  article.piece > figure.article-figure.break-right.fig-mat > img,
  article.two-up--second > figure.article-figure.fig-plate > img,
  div.compact > article > img.thumb,
  div.rule-band-in > figure.article-figure > img,
  li > a.more-card > img,
  li > article > img,
  main > section.lead-band > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:1439px){.sponsor-tier.sponsor-tier:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(500px,calc(50% - 7px)),1fr))!important;justify-content:stretch!important}.sponsor-tier.sponsor-tier > [data-partner]{width:auto!important;max-width:none!important}}