/* Arta Web — "Bedrock". A town on limestone, and everything the rock decided.
   PALETTE — 5 members, each with a job:
     --ground     limestone paper, the page ground
     --ground-2   deeper limestone, panels / mats / table zebra
     --ink        near-black, all body text
     --accent     terracotta, saturated (hue ~18) — kickers, links, rules, one full band
     --secondary  pine, saturated (hue ~162) — the Water band ground, map land, panels
     --flag       ochre — map pins, drawn marks on dark grounds only
   The two saturated members (accent / secondary) are ~144 degrees apart in hue.
*/

:root {
  --ico-fill: #B23A1F;
  --ico-fill2: #1C5240;
  --ico-line: #EDE4D6;
  --ground: #EDE4D6;
  --ground-2: #E1D4C0;
  --ink: #16150F;
  --accent: #B23A1F;
  --secondary: #1C5240;
  --flag: #D99A17;

  --serif: Spectral, "Iowan Old Style", Georgia, serif;
  --sans: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(18px, 4vw, 44px);
  --wrap: 1180px;   /* standard content width */
  --wide: 1180px;   /* break-out width for figures, tables, notes */
  --measure: 70ch;  /* prose measure */
  --body: 17px;
  --rule: 1px solid rgba(22, 21, 15, 0.28);
}

/* --- the width system keeps responding ABOVE the desktop cap --- */
@media (min-width: 1200px) { :root { --wrap: 1280px; --wide: 1560px; --measure: 74ch; --body: 18px; } }
@media (min-width: 1600px) { :root { --wrap: 1560px; --wide: 1980px; --measure: 78ch; --body: 19px; --pad: 56px; } }
@media (min-width: 2000px) { :root { --wrap: 1860px; --wide: 2320px; --measure: 82ch; --body: 20px; --pad: 72px; } }
@media (min-width: 2400px) { :root { --wrap: 2180px; --wide: 2560px; --measure: 86ch; --body: 21px; --pad: 88px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--body)/1.65 var(--serif);
  text-wrap: pretty;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration: underline; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; margin: 0; }
table { border-collapse: collapse; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wide { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--pad); }
.kicker {
  font: 700 clamp(12px, 0.82vw, 17px)/1.2 var(--sans);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: 0.6em;
}
.kicker .ico { width: 1.9em; height: 1.9em; }
.kicker--pale { color: var(--flag); }
/* over a photograph the kicker needs its own ground, not a shadow */
.lead-band__plate .kicker {
  display: inline-flex; align-self: flex-start;
  background: rgba(14,13,9,0.92); color: var(--flag);
  padding: 0.5em 0.9em 0.5em 0.7em; margin-bottom: clamp(12px, 1.1vw, 22px);
}
.quiet { font-family: var(--sans); font-size: 0.92em; opacity: 0.72; }

/* ---------- drawn device: one system, 24-grid, 1.6 stroke ---------- */
.ico { width: 1.5em; height: 1.5em; flex: 0 0 auto; }
.ico, .spot { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spot { width: 100%; min-width: 646px; max-width: 940px; margin-inline: auto; height: auto; stroke-width: 1.1; }
:where(figure, div, section):has(> .spot) { overflow-x: auto; }
/* the section diagrams: one drawing system — three stroke weights, one filled area */
.spot text { font: 700 13px/1 var(--sans); letter-spacing: 1.1px; fill: currentColor; stroke: none; text-transform: uppercase; }
.spot .sp-cap { font-weight: 400; opacity: 0.6; letter-spacing: 1.4px; }
.spot .sp-out { stroke-width: 2.4; fill: none; }
.spot .sp-blk { stroke-width: 1.5; fill: none; }
.spot .sp-det { stroke-width: 1.1; fill: none; }
.spot .sp-grd { stroke-width: 2.6; fill: none; }
.spot .sp-hatch { stroke-width: 0.5; opacity: 0.5; fill: none; }
.spot .sp-dim, .spot .sp-lead { stroke-width: 1; stroke: var(--ico-fill); fill: var(--ico-fill); }
.spot .sp-dim text, .spot .sp-lead + text { fill: var(--ico-fill); }
.spot .sp-fig { stroke-width: 1.4; fill: none; }
.spot .sp-fill { fill: var(--ico-fill2); stroke: none; opacity: 0.45; }
.spot .sp-fill2 { fill: var(--ink); stroke: none; opacity: 0.06; }
.spot .sp-accent { fill: var(--ico-fill); stroke: var(--ink); stroke-width: 1.5; }
.spot .sp-strip { stroke: var(--ico-fill); stroke-width: 1.4; }
.mark { width: clamp(38px, 3vw, 62px); height: auto; fill: none; stroke: currentColor; stroke-width: 3; }
.brand .mark { width: auto; height: clamp(30px, 3.3vw, 72px); }

/* ---------- masthead ---------- */
.masthead { border-bottom: 2px solid var(--ink); background: var(--ground); position: relative; z-index: 20; }
.masthead__top {
  display: flex; align-items: center; gap: clamp(12px, 1.4vw, 26px);
  padding-block: clamp(14px, 1.6vw, 30px);
}
.brand { display: flex; align-items: center; gap: clamp(10px, 0.9vw, 20px); color: var(--ink); }
.brand:hover { text-decoration: none; color: var(--accent); }
.brand__name { font: 800 clamp(28px, 3.1vw, 68px)/0.88 var(--serif); letter-spacing: -0.035em; }
.brand__sub {
  display: block;
  font: 400 clamp(10px, 0.66vw, 14px)/1.2 var(--sans);
  letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.62; margin-top: 0.5em;
}
.masthead__line { margin-left: auto; max-width: 34ch; font-family: var(--sans); font-size: clamp(12px, 0.8vw, 16px); line-height: 1.45; opacity: 0.78; }
.nav { border-top: var(--rule); }
.nav__list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.nav__list a {
  display: flex; align-items: center; gap: 0.55em; color: var(--ink);
  font: 700 clamp(12px, 0.78vw, 16px)/1 var(--sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: clamp(10px, 0.9vw, 18px) clamp(9px, 0.9vw, 20px);
  border-bottom: 3px solid transparent;
}
.nav__list a:hover, .nav__list a[aria-current] { text-decoration: none; color: var(--accent); border-bottom-color: var(--accent); }
.nav__list li.nav__standing { margin-left: clamp(8px, 1.2vw, 28px); border-left: var(--rule); }
.nav__list li.nav__standing a { color: rgba(22,21,15,0.65); }
.band--dark, .lead-band__plate, .foot { --ico-fill: #D99A17; --ico-fill2: #E4D9C6; --ico-line: #16150F; }
.map-figure .pin-lead { stroke: var(--accent); stroke-width: 2.5; }

/* ---------- homepage bands ---------- */
.lead-band { position: relative; background: var(--ink); }
.lead-band img { width: 100%; height: min(82vh, 940px); object-fit: cover; filter: saturate(0.94); }
.lead-band__plate {
  position: absolute; inset: auto 0 0 0;
  padding-block: clamp(22px, 3vw, 62px);
  background: linear-gradient(to top, rgba(18,17,12,0.86), rgba(18,17,12,0.18) 62%, rgba(18,17,12,0));
}
.lead-band h1 { color: #F5EEE2; font-size: clamp(34px, 5.1vw, 118px); max-width: 21ch; text-shadow: 0 2px 26px rgba(12,11,8,0.62), 0 1px 3px rgba(12,11,8,0.5); }
.lead-band .deck {
  color: #E4D9C6; font-family: var(--sans); font-size: clamp(14px, 1vw, 21px);
  line-height: 1.5; max-width: 58ch; margin-top: clamp(12px, 1.2vw, 24px);
  text-shadow: 0 1px 14px rgba(12,11,8,0.7);
}
.lead-band .credit { color: rgba(245,238,226,0.62); }

.band { padding-block: clamp(40px, 5vw, 116px); }
.band--tight { padding-block: clamp(28px, 3vw, 66px); }
.band--panel { background: var(--ground-2); border-block: var(--rule); }
.band--dark { background: var(--secondary); color: #EFE7DA; }
.band--dark a { color: var(--flag); }
.band--dark .kicker { color: var(--flag); }
.band--rule { border-top: 2px solid var(--ink); }

/* the signature: three panels, framed and drawn, not three lines of text */
.signature { display: grid; gap: clamp(14px, 1.6vw, 34px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.signature > div {
  position: relative; background: var(--ground-2);
  border: 1px solid rgba(22,21,15,0.45); border-top: 5px solid var(--accent);
  padding: clamp(16px, 1.5vw, 34px);
}
.signature > div::after {
  content: ""; position: absolute; right: 7px; bottom: 7px; width: 15px; height: 15px;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.signature .sig-ico { color: var(--accent); }
.signature .sig-ico .ico { width: 2.6em; height: 2.6em; }
.signature dt { font: 800 clamp(28px, 2.8vw, 66px)/0.9 var(--serif); letter-spacing: -0.035em; margin-top: 0.35em; }
.signature dd { margin: 0.6em 0 0; font-family: var(--sans); font-size: clamp(14px, 0.92vw, 19px); line-height: 1.5; max-width: 40ch; }
.signature dd a { display: inline-block; margin-top: 0.5em; font-weight: 700; }

.quiet-line {
  font: 300 italic clamp(24px, 3vw, 68px)/1.1 var(--serif);
  letter-spacing: -0.02em; max-width: 34ch; margin-inline: auto; text-align: center;
}

/* lead feature: one thing at real size + one second at less size */
.feature { display: grid; gap: clamp(22px, 3vw, 72px); align-items: start; }
@media (min-width: 900px) { .feature { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.feature h2 { font-size: clamp(26px, 3vw, 66px); }
.feature h3 { font-size: clamp(20px, 1.5vw, 34px); font-weight: 600; }
.feature .deck { font-size: clamp(17px, 1.1vw, 24px); line-height: 1.55; max-width: 56ch; margin-top: 0.7em; }
.feature__second { display: grid; gap: clamp(20px, 2vw, 44px); }
.feature__second article { border-top: var(--rule); padding-top: clamp(10px, 0.9vw, 18px); }
.feature__second p { margin: 0.5em 0 0; font-family: var(--sans); font-size: clamp(14px, 0.92vw, 18px); line-height: 1.5; opacity: 0.82; }

/* section hub: icon-led, the label small beneath it */
.hub { display: grid; gap: clamp(12px, 1.4vw, 30px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
@media (min-width: 780px) { .hub { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .hub { grid-template-columns: repeat(6, 1fr); } }
.hub__card {
  display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink);
  background: var(--ground-2); border: 1px solid rgba(22,21,15,0.35);
  padding: clamp(16px, 1.6vw, 36px) clamp(12px, 1.2vw, 26px); min-height: 100%;
}
.hub__card:hover { text-decoration: none; color: var(--accent); background: #DACBB2; }
.hub__card .ico { width: clamp(52px, 5vw, 96px); height: clamp(52px, 5vw, 96px); stroke-width: 1.2; margin-bottom: 0.9em; }
.hub__card h3 { font-size: clamp(15px, 0.98vw, 21px); font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; }
.hub__card .n { margin-top: auto; padding-top: 1.1em; font: 700 12px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; }

/* ---------- figures: one drawing system, four treatments ---------- */
figure { margin: 0; }
.cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6em clamp(14px, 1.6vw, 40px);
  margin-top: clamp(8px, 0.8vw, 16px);
  font: 400 clamp(14px, 0.92vw, 19px)/1.45 var(--sans);
}
.cap > span:first-child { flex: 1 1 24ch; max-width: 96ch; }
.cap .credit {
  flex: 0 0 auto; margin-left: auto; text-align: right;
  font-size: clamp(13.5px, 0.72vw, 17px); letter-spacing: 0.04em; opacity: 0.62; max-width: 46ch;
}
.cap--rule { border-top: 2px solid var(--ink); padding-top: 0.55em; }
.lead-band .cap .credit { margin-left: 0; text-align: left; max-width: none; }

/* 1 · mat: the photograph sits on a limestone mat with drawn corner marks */
.fig--mat > .fig__box { position: relative; background: var(--ground-2); padding: clamp(8px, 0.7vw, 18px); }
.fig--mat > .fig__box::before, .fig--mat > .fig__box::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--ink);
}
.fig--mat > .fig__box::before { top: 4px; left: 4px; border-width: 1px 0 0 1px; }
.fig--mat > .fig__box::after { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; }
/* 2 · frame: hairline inset + a heavy accent rule under the image */
.fig--frame img { outline: 1px solid rgba(22,21,15,0.5); outline-offset: -7px; }
.fig--frame > .fig__box { border-bottom: 5px solid var(--accent); }
/* 3 · bleed: full width, caption set on the photograph itself */
.fig--bleed { position: relative; }
.fig--bleed img { width: 100%; height: min(72vh, 820px); object-fit: cover; }
.fig--bleed .cap {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; max-width: none;
  padding: clamp(40px, 6vw, 120px) var(--pad) clamp(14px, 1.4vw, 30px);
  color: #F5EEE2;
  background: linear-gradient(to top, rgba(14,13,9,0.95), rgba(14,13,9,0.72) 34%, rgba(14,13,9,0));
}
.fig--bleed .cap a { color: var(--flag); }
.fig--bleed .cap .credit { color: rgba(245,238,226,0.88); text-shadow: 0 1px 6px rgba(14,13,9,0.9); }
/* 4 · inset: small, set into the right-hand gutter beside the prose */
.fig--inset { max-width: 340px; }
.article { grid-auto-flow: row dense; }
.article > .fig--inset {
  grid-column: 3; align-self: start;
  width: min(100%, 300px);
  margin: 0.5em 0 1.4em clamp(14px, 1.5vw, 36px);
}
@media (max-width: 1099px) {
  .article > .fig--inset { grid-column: 2; width: 100%; max-width: 340px; margin-left: 0; }
}
.fig--inset img { border: 1px solid rgba(22,21,15,0.45); }
.fig--inset .cap { font-size: clamp(13px, 0.8vw, 16px); }
.fig--inset .cap .credit { margin-left: 0; text-align: left; }

.gallery { display: grid; gap: clamp(10px, 1vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.gallery img { aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid rgba(22,21,15,0.4); }

/* ---------- map ---------- */
.map-figure { border: 1px solid rgba(22,21,15,0.4); background: #D3DEDC; max-width: 760px; margin-inline: auto; }
.map-figure svg { width: 100%; height: auto; display: block; }
.map-sea { fill: #D3DEDC; }
.map-land path { fill: #DED2B8; stroke: var(--ink); stroke-width: 2.4; }
.map-figure .pin-dot { fill: var(--accent); stroke: #F5EEE2; stroke-width: 5; }
.map-figure .pin-no { font: 700 28px var(--sans); fill: #F5EEE2; }
.map-figure .pin-lead { stroke: var(--accent); stroke-width: 4; }
.map-key { border-top: 1px solid rgba(22,21,15,0.4); padding: clamp(14px, 1.2vw, 28px); background: var(--ground); }
.map-key__title { margin: 0 0 0.9em; font: 700 clamp(11px, 0.72vw, 14px)/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.map-swatches {
  list-style: none; margin: 0 0 1.1em; padding: 0 0 1em; border-bottom: 1px solid rgba(22,21,15,0.22);
  display: flex; flex-wrap: wrap; gap: 0.5em 1.6em;
  font: 400 clamp(13px, 0.84vw, 17px)/1.3 var(--sans);
}
.map-swatches li { display: flex; align-items: center; gap: 0.55em; }
.sw { width: 20px; height: 14px; border: 1px solid rgba(22,21,15,0.5); flex: 0 0 auto; }
.sw--land { background: #DED2B8; }
.sw--sea { background: #D3DEDC; }
.sw--pin { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border-color: var(--accent); }
.map-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6em; }
.map-legend li { display: grid; grid-template-columns: 1.9em minmax(0, 1fr); gap: 0.75em; align-items: start; font: 400 clamp(14px, 0.9vw, 18px)/1.45 var(--sans); }
.map-legend .ml-no {
  width: 1.9em; height: 1.9em; border-radius: 50%;
  background: var(--accent); color: #F5EEE2; font-weight: 700; font-size: 0.82em;
  display: grid; place-items: center;
}
.map-legend .ml-txt a { font-weight: 700; }

/* ---------- article page ---------- */
.article {
  display: grid;
  grid-template-columns:
    minmax(var(--pad), 1fr)
    min(var(--measure), 100% - (var(--pad) * 2))
    minmax(var(--pad), 1fr);
  row-gap: 0;
}
.article > * { grid-column: 2; }
.article > .breakout {
  grid-column: 1 / -1; justify-self: center;
  width: min(var(--wide), 100%); padding-inline: var(--pad);
}
.article > .bleed { grid-column: 1 / -1; width: 100%; }
.article > .push-right { grid-column: 2 / 4; padding-right: var(--pad); }
.article p { margin: 0 0 1.25em; }
.article > h2 {
  font-size: clamp(23px, 1.9vw, 44px); line-height: 1.06;
  margin: clamp(30px, 2.6vw, 68px) 0 clamp(12px, 1vw, 22px);
}
.article > h2::before {
  content: ""; display: block; width: 64px; border-top: 3px solid var(--accent); margin-bottom: 0.5em;
}
.lead {
  font: 300 clamp(19px, 1.4vw, 32px)/1.42 var(--serif);
  margin: 0 0 clamp(22px, 2vw, 46px);
}
.lead strong { font-weight: 400; }
.article-head { padding-block: clamp(26px, 3vw, 72px) clamp(18px, 1.6vw, 34px); }
.article-head h1 { font-size: clamp(30px, 3.6vw, 84px); max-width: 26ch; margin-top: clamp(14px, 1.2vw, 26px); }
.article-meta {
  display: flex; flex-wrap: wrap; gap: 0.6em 1.4em; align-items: center;
  margin-top: clamp(14px, 1.2vw, 28px); padding-top: 0.8em; border-top: var(--rule);
  font: 400 clamp(13px, 0.84vw, 17px)/1.4 var(--sans);
}
.article-meta strong { font-weight: 700; }

.pullquote { margin: clamp(26px, 2.6vw, 64px) 0; padding-left: clamp(16px, 1.6vw, 40px); border-left: 4px solid var(--accent); }
.pullquote p { font: 300 italic clamp(21px, 1.8vw, 42px)/1.16 var(--serif); letter-spacing: -0.02em; margin: 0; }
.blockquote { margin: clamp(22px, 2vw, 48px) 0; padding: clamp(14px, 1.2vw, 28px) 0; border-block: var(--rule); }
.blockquote p { font: 400 italic clamp(18px, 1.2vw, 26px)/1.4 var(--serif); margin: 0 0 0.5em; }
.blockquote cite { font: 700 clamp(13px, 0.82vw, 16px) var(--sans); font-style: normal; opacity: 0.7; }
.callout {
  background: var(--ground-2); border-left: 5px solid var(--secondary);
  padding: clamp(14px, 1.2vw, 30px); margin: clamp(22px, 2vw, 48px) 0;
}
.callout p { margin: 0; font-family: var(--sans); font-size: clamp(15px, 0.96vw, 20px); line-height: 1.55; }
.note {
  font-family: var(--sans); font-size: clamp(14px, 0.9vw, 18px); line-height: 1.55;
  border-top: var(--rule); border-bottom: var(--rule); padding-block: 0.8em; opacity: 0.85;
}

/* notes-for-design material, breaking the prose across the full break-out width */
.notes { background: var(--ground-2); border-block: 2px solid var(--ink); margin-block: clamp(30px, 3vw, 76px); }
.notes__inner { padding-block: clamp(22px, 2.2vw, 54px); display: grid; gap: clamp(20px, 2.4vw, 60px); }
@media (min-width: 1000px) { .notes__inner { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); } }
.notes h2 { font-size: clamp(20px, 1.5vw, 36px); }
.notes h2::before { content: none; }
.notes__sub { font: 700 clamp(12px, 0.76vw, 15px)/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9em; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; gap: 0.2em clamp(14px, 1.6vw, 40px); padding: 0.75em 0; border-top: var(--rule); }
@media (min-width: 700px) { .timeline li { grid-template-columns: minmax(9ch, 26ch) minmax(0, 1fr); } }
.timeline li:last-child { border-bottom: var(--rule); }
.t-when { font: 700 clamp(14px, 0.92vw, 19px)/1.35 var(--sans); color: var(--accent); }
.t-what { font: 400 clamp(15px, 0.96vw, 20px)/1.5 var(--sans); }

.deflist { margin: 0; }
.deflist > div { padding: 0.75em 0; border-top: var(--rule); }
.deflist > div:last-child { border-bottom: var(--rule); }
.deflist dt { font: 700 clamp(15px, 0.96vw, 20px)/1.4 var(--sans); }
.deflist dd { margin: 0.25em 0 0; font: 400 clamp(15px, 0.94vw, 19px)/1.5 var(--sans); }

.datatable, .versus { width: 100%; font-family: var(--sans); font-size: clamp(14px, 0.92vw, 19px); }
.datatable th, .versus th { text-align: left; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8em; padding: 0 1.2em 0.7em 0; border-bottom: 2px solid var(--ink); }
.datatable td, .versus td { padding: 0.8em 1.2em 0.8em 0; border-bottom: var(--rule); vertical-align: top; }
.datatable tr:nth-child(even) td { background: rgba(22,21,15,0.035); }

.statrow { display: grid; gap: clamp(14px, 1.6vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.statblock { border-top: 3px solid var(--accent); padding-top: 0.5em; }
.stat-num { display: block; font: 800 clamp(30px, 2.6vw, 62px)/0.92 var(--serif); letter-spacing: -0.03em; }
.stat-label { display: block; margin-top: 0.5em; font: 400 clamp(13px, 0.84vw, 17px)/1.45 var(--sans); opacity: 0.8; }

.entity-ref { border-bottom: 1px solid currentColor; }
.related-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9em; }
.related-links a { font-size: clamp(17px, 1.05vw, 23px); }
.further-grid { display: grid; gap: clamp(14px, 1.6vw, 36px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.further-grid a { display: flex; flex-direction: column; gap: 0.5em; border-top: 2px solid var(--ink); padding-top: 0.7em; color: var(--ink); }
.further-grid a:hover { color: var(--accent); text-decoration: none; }
.further-grid .f-sec { font: 700 12px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.further-grid .f-title { font: 600 clamp(16px, 1vw, 22px)/1.2 var(--serif); }

.profile-grid, .org-grid { display: grid; gap: clamp(14px, 1.6vw, 36px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.profile-card { background: var(--ground-2); padding: clamp(14px, 1.2vw, 26px); display: flex; flex-direction: column; }
.profile-card h3 { font-size: clamp(18px, 1.1vw, 24px); font-weight: 600; margin-top: 0.6em; }
.profile-card .p-role { font: 700 12px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0.4em 0 0.7em; }
.profile-card p { font-family: var(--sans); font-size: clamp(14px, 0.88vw, 18px); line-height: 1.5; margin: 0 0 0.7em; }
.profile-card .p-links { margin-top: auto; }
.org-card { display: flex; flex-direction: column; gap: 0.35em; border: 1px solid rgba(22,21,15,0.4); padding: clamp(12px, 1vw, 22px); color: var(--ink); }
.org-name { font: 600 clamp(16px, 1vw, 21px)/1.2 var(--serif); }
.org-host { font: 400 12px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }

/* category + archive lists */
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list > li { border-top: var(--rule); }
.cat-list > li:last-child { border-bottom: var(--rule); }
.cat-list a { display: grid; gap: 0.3em clamp(16px, 2vw, 56px); padding: clamp(14px, 1.4vw, 34px) 0; color: var(--ink); align-items: start; }
@media (min-width: 900px) { .cat-list a { grid-template-columns: 6ch minmax(0, 1.1fr) minmax(0, 1fr); } }
.cat-list a:hover { text-decoration: none; color: var(--accent); }
.cat-list .c-no { font: 700 clamp(14px, 0.9vw, 19px)/1.3 var(--sans); color: var(--accent); letter-spacing: 0.08em; }
.cat-list .c-title { font: 600 clamp(19px, 1.4vw, 34px)/1.14 var(--serif); letter-spacing: -0.02em; }
.cat-list .c-brief { font: 400 clamp(14px, 0.92vw, 19px)/1.5 var(--sans); opacity: 0.8; }

/* ---------- supporters: a colophon, two tiers of different density ---------- */
.colophon { border-top: 2px solid var(--ink); padding-block: clamp(28px, 3vw, 70px); }
.colophon__tier { margin-top: clamp(18px, 1.8vw, 40px); }
.colophon__tier h3 { font: 700 clamp(12px, 0.76vw, 15px)/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin-bottom: clamp(12px, 1.2vw, 24px); }
.sponsor-row { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.4vw, 26px); }
.sponsor {
  flex: 0 0 var(--tile, 300px); max-width: 100%;
  display: flex; flex-direction: column; gap: 0.7em; color: var(--ink);
}
@media (min-width: 1180px) { .colophon { --tile: 276px; } }
@media (min-width: 1600px) { .colophon { --tile: 340px; } }
@media (min-width: 2000px) { .colophon { --tile: 404px; } }
@media (min-width: 2400px) { .colophon { --tile: 472px; } }
.sponsor:hover { text-decoration: none; }
.sponsor img {
  width: 100%; height: clamp(56px, 4.4vw, 76px); max-height: 76px; object-fit: contain; object-position: left center;
  background: var(--ink); padding: 10px 16px;
}
.sponsor .sponsor-name { font: 600 clamp(15px, 0.94vw, 20px)/1.2 var(--serif); }
.sponsor .sponsor-blurb { min-width: 200px; font: 400 clamp(13px, 0.84vw, 17px)/1.45 var(--sans); opacity: 0.78; }
.sponsor.feat img { height: clamp(72px, 5.6vw, 98px); max-height: 98px; background: var(--secondary); }
@media (max-width: 700px) { .sponsor { flex: 0 0 100%; } }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #C9BDA8; margin-top: clamp(30px, 3vw, 80px); }
.foot a { color: #E4D9C6; }
.foot__top {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(16px, 2vw, 60px);
  padding-block: clamp(26px, 3vw, 68px) clamp(16px, 1.6vw, 34px);
  border-bottom: 4px solid var(--flag);
}
.foot__brand { display: flex; align-items: center; gap: clamp(10px, 1vw, 22px); color: #F5EEE2; }
.foot__brand:hover { text-decoration: none; color: var(--flag); }
.foot__brand .mark { color: var(--flag); }
.foot__name { font: 800 clamp(26px, 2.2vw, 56px)/0.88 var(--serif); color: #F5EEE2; letter-spacing: -0.035em; }
.foot__line { margin: 0 0 0.4em auto; max-width: 44ch; font-family: var(--sans); font-size: clamp(13px, 0.86vw, 18px); line-height: 1.5; }
.foot__grid {
  display: grid; gap: clamp(10px, 1.1vw, 30px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: clamp(22px, 2.4vw, 56px);
}
@media (min-width: 560px) { .foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 780px) { .foot__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.foot__grid a {
  display: flex; gap: 0.8em; align-items: flex-start; color: #E4D9C6;
  border-top: 1px solid rgba(233,226,210,0.22); padding-top: 0.8em;
}
.foot__grid a:hover { text-decoration: none; color: var(--flag); }
.foot__grid .ico { width: 2.1em; height: 2.1em; flex: 0 0 auto; }
.foot__grid .fg-label { display: block; font: 700 11px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--flag); margin-bottom: 0.5em; }
.foot__grid .fg-title { display: block; font: 600 clamp(15px, 0.98vw, 21px)/1.2 var(--serif); }
.foot__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em;
  border-top: 1px solid rgba(233,226,210,0.22); padding-block: clamp(14px, 1.4vw, 30px) clamp(22px, 2.2vw, 50px);
  font: 700 clamp(11px, 0.74vw, 15px)/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase;
}
.skip { position: absolute; left: -9999px; }
.skip:focus { position: static; display: inline-block; padding: 8px; }

/* ---------- components completed for the styleguide ---------- */
.article-figure > .fig__box { position: relative; background: var(--ground-2); padding: clamp(8px, 0.7vw, 18px); }
.article-figure img { width: 100%; }
.chart { display: block; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .c-bar { fill: var(--accent); }
.chart .c-bar.alt { fill: var(--secondary); }
.chart .c-lab { font: 400 13px var(--sans); fill: var(--ink); }
.chart .c-val { font: 700 13px var(--sans); fill: var(--ink); }
.chart .c-axis { stroke: rgba(22,21,15,0.4); stroke-width: 1; }
.chart figcaption { margin-top: 0.9em; font: 400 clamp(13px,0.86vw,17px)/1.45 var(--sans); }
.profile-card.no-photo { border-top: 3px solid var(--accent); }
.profile-card .p-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.profile-card .p-attr { font: 400 12px/1.4 var(--sans); opacity: 0.6; margin: 0; }
.org-card.no-logo .org-name { border-left: 3px solid var(--accent); padding-left: 0.5em; }
.org-logo { height: 40px; max-height: 40px; width: auto; object-fit: contain; object-position: left center; background: var(--ink); padding: 6px 10px; }
.versus td:first-child, .versus th:first-child { width: 34%; }
.sg-block { padding-block: clamp(26px,2.6vw,64px); border-top: var(--rule); }
.sg-block > h2 { font-size: clamp(19px,1.3vw,30px); margin-bottom: 1.2em; }
.sg-block > h2 span { font: 400 13px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5; margin-left: 1em; }

/* ---------- the water band: the one large saturated area ---------- */
.waterband { padding-block: clamp(40px, 4.6vw, 130px); }
.waterband .spot { color: #EFE7DA; }
.waterband .spot .sp-fill2 { fill: #EFE7DA; opacity: 0.08; }
.waterband__top { display: grid; gap: clamp(18px, 2.4vw, 70px); align-items: end; }
@media (min-width: 900px) { .waterband__top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.waterband__top h2 {
  font-size: clamp(30px, 3.6vw, 88px); line-height: 0.94; letter-spacing: -0.035em;
  margin-top: clamp(12px, 1.2vw, 26px); max-width: 20ch;
}
.waterband__deck { margin: 0 0 0.4em; font-family: var(--sans); font-size: clamp(15px, 1.02vw, 22px); line-height: 1.55; max-width: 52ch; }
.waterband__fig { margin-block: clamp(26px, 3vw, 76px); border-block: 1px solid rgba(239,231,218,0.3); padding-block: clamp(18px, 2vw, 50px); }
.waterband__fig figcaption {
  margin-top: clamp(10px, 1vw, 22px); max-width: 62ch; margin-inline: auto; text-align: center;
  font: 400 clamp(13px, 0.88vw, 18px)/1.5 var(--sans); color: rgba(239,231,218,0.78);
}
.waterband__list { display: grid; gap: clamp(16px, 2vw, 50px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.waterband__list a { display: block; color: #EFE7DA; border-top: 2px solid var(--flag); padding-top: clamp(10px, 1vw, 20px); }
.waterband__list a:hover { text-decoration: none; color: var(--flag); }
.waterband__list .wn { display: block; font: 800 clamp(24px, 2.2vw, 54px)/0.9 var(--serif); color: var(--flag); letter-spacing: -0.03em; }
.waterband__list .wt { display: block; margin-top: 0.5em; font: 600 clamp(18px, 1.25vw, 30px)/1.15 var(--serif); letter-spacing: -0.02em; }
.waterband__list .wb { display: block; margin-top: 0.6em; font: 400 clamp(14px, 0.9vw, 18px)/1.5 var(--sans); opacity: 0.8; }

.waterband__fig--bleed { width: 100%; margin-block: clamp(24px, 2.8vw, 72px); padding-block: clamp(16px, 1.8vw, 44px); }
.waterband__fig--bleed .spot--wide { max-width: none; width: 100%; }
.waterband__fig--bleed figcaption { max-width: 74ch; padding-inline: var(--pad); }
.spot--wide text { font-size: 15px; letter-spacing: 1.6px; }
.spot--wide .sp-cap { font-size: 14px; }

/* the map band: the figure fills its column, no leftover ground beside it */
.mapband { display: grid; gap: clamp(20px, 2.4vw, 64px); align-items: start; }
@media (min-width: 900px) { .mapband { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.6fr); } }
.mapband .map-figure { max-width: none; width: 100%; }

/* plated annotations on the signature diagram — legible over any part of the drawing */
.spot--wide .sp-lab text {
  font: 700 15px/1 var(--sans); letter-spacing: 1.5px; fill: #EFE7DA;
  paint-order: stroke fill; stroke: #1C5240; stroke-width: 7px; stroke-linejoin: round;
}
.spot--wide .sp-lab--a text { fill: #F0A02A; }
.spot--wide .sp-key { font-size: 15px; letter-spacing: 1.6px; fill: var(--flag); }

/* ---------- diagram labels: authored in viewBox units, so the size is set per breakpoint ---------- */
/* small section diagrams: viewBox 560 wide, capped at 860px */

/* the signature diagram: viewBox 1400 wide. Its labels sit on drawn plates sized in
   viewBox units, so the TEXT size is fixed and the DRAWING's scale is bounded instead:
   never below 1:1 (it scrolls sideways on a phone) and never above 1.29:1. */
.waterband__fig--bleed { overflow-x: auto; }
.spot--wide { min-width: 1400px; max-width: 1800px; margin-inline: auto; }
.spot--wide .sp-lab text { font-size: 15px; letter-spacing: 1.5px; }
.spot--wide .sp-key { font-size: 15px; letter-spacing: 1.6px; }
.spot--wide .sp-cap { font-size: 14px; }

/* every diagram label carries its own knockout, so length and font metrics cannot break it */
.spot text { paint-order: stroke fill; stroke: var(--ground-2); stroke-width: 4px; stroke-linejoin: round; }
.spot--wide .sp-key, .spot--wide .sp-cap { paint-order: stroke fill; stroke: #1C5240; stroke-width: 6px; stroke-linejoin: round; }
.waterband .spot text { stroke: #1C5240; }
.scrollhint { display: none; }
@media (max-width: 1399px) {
  .scrollhint {
    display: block; padding-inline: var(--pad); margin: 0.8em 0 0;
    font: 700 12px/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--flag);
  }
}

/* the section-diagram band: the drawing column has to be able to hold the diagram's floor */
.drawnband { display: grid; gap: clamp(20px, 2.4vw, 60px); align-items: center; }
@media (min-width: 1000px) { .drawnband { grid-template-columns: minmax(646px, 1.5fr) minmax(0, 1fr); } }

/* ---------- phone: the three places the desktop layout genuinely breaks ---------- */
@media (max-width: 700px) {
  /* 1 · masthead was a single non-wrapping flex row: brand and standing line crushed each other */
  .masthead__top { flex-wrap: wrap; row-gap: 12px; }
  .masthead__line { margin-left: 0; max-width: none; flex: 1 0 100%; }
  .nav__list { justify-content: flex-start; }
  .nav__list a { padding-inline: 0 14px; }
  .nav__list li.nav__standing { margin-left: 0; border-left: 0; }

  /* 2 · wide tables cannot reflow — give them their own scroller instead of pushing the page */
  .datatable, .versus { min-width: 560px; }

  /* 3 · the bleed caption's scrim was sized for a landscape crop */
  .fig--bleed img { height: min(56vh, 460px); }
  .fig--bleed .cap { padding-top: clamp(30px, 14vw, 70px); position: static; background: var(--ink); }
  .fig--bleed .cap .credit { margin-left: 0; text-align: left; }
}
/* any table that cannot reflow scrolls inside its own frame */
.tablewrap, :where(div, section, figure):has(> .datatable), :where(div, section, figure):has(> .versus) { overflow-x: auto; }

/* 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-row{flex-wrap:wrap!important}
.sponsor-row > .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-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

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

/* op-mobile-scroller: the SVG carries min-width:1400px inside figure.waterband__fig. The figure
   already sets overflow-x:hidden, which hides the drawing but does NOT stop it growing the page.
   overflow-x:auto lets the reader pan it instead, capped to the column. */
@media (max-width:640px){
  .waterband__fig{overflow-x:auto!important;max-width:100%!important;-webkit-overflow-scrolling:touch}
}
/* ⚠️ THE PREVIOUS BLOCK DID NOTHING ON ITS OWN. A flex or grid item defaults to min-width:auto,
   which means it cannot shrink below its content's min-content width — so the scroll container
   kept being stretched to the child's own min-width (640px / 1400px / 560px) and overflow-x:auto
   had nothing to scroll. min-width:0 has to travel up the chain from the scroller to its
   formatting context, which is what actually lets the container narrow to the column. */
@media (max-width:640px){
  .plan-scroll,.alm-scroll,.waterband__fig,.map-figure,pre.tok,
  .plan-scroll *,.alm-scroll > *,
  figure,section,article,main,div[class*="scroll"],div[class*="pair"],div[class*="band"]{min-width:0!important}
  img,svg,table,pre,code,figure{max-width:100%!important}
}


/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .cap{padding-inline:clamp(14px, 1.4vw, 30px)}
}

/* op-nav-gutter: operator — "artweb still header menu sticky to left". `ul.nav__list` carries
   `.wrap`, which is this build's gutter (`padding-inline:var(--pad)`), but `.nav__list{...
   padding:0}` comes later in the sheet with the same specificity and resets it. Measured at
   390 and 520: nav list pad=0, first link and its icon at x=0, while the masthead type sits at
   18/21px — the row read as stuck to the edge.
   Phone widths only: at 1440 the list is `justify-content:center` inside a 1280px wrap, so the
   items land at x=234 and nothing needs changing there. */
@media (max-width:900px){
  /* box-sizing matters here: `.wrap` sets `width:100%`, and this build does not apply
     border-box globally, so padding-inline added 2x--pad ON TOP of the full width and pushed
     the page 44px over at 390. Measured before: overflow +44; after: 0. */
  .nav__list.wrap{padding-inline:var(--pad);box-sizing:border-box}
}

/* op-credit-fit: `span.credit` measured 402px wide inside a 320px page (right=434) and was the
   build's horizontal overflow at both 320 and 390 — a photo credit that cannot wrap or shrink
   inside the flex figcaption. It takes its own line at phone width and wraps like any other
   text; the caption's layout above 640 is untouched. */
@media (max-width:640px){
  .cap .credit{flex:1 1 100%;min-width:0;white-space:normal}
}

/* op-money-columns: the supporters block ran one tile per row — 9 tiles,
   1310px at 390, 15% of the whole page. Two columns bring it to
   996px (24% shorter). Checked before writing: no new overflow, smallest mark still
   169px wide, longest blurb 4 lines, tile heights 124-183px.
   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-row), 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-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .sponsor-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-row > * *{min-width:0!important;max-width:100%}
    .sponsor-row img,.sponsor-row svg{max-width:100%;height:auto}

}

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

/* op-grow-same-size: this tier grows by STRETCHING (flex rows, flex-grow) — one added tile would wrap onto a new row alone and stretch across the grid. Same minimum (220px), same columns at every width, but a short row keeps its siblings' size. Also straightens today's stretched short row — operator: "Same-size fix now" (2026-09-23, /pipeline/_money_grow_review.html). Phones keep their own rules. */
@media (min-width:641px){
  div.colophon__tier:nth-of-type(2) > div.sponsor-row{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
}
/* op-grow-same-size:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.article > figure.fig--inset > img,
  figure.breakout.fig--frame > div.fig__box > img,
  figure.fig--mat > div.fig__box > img,
  main > figure.fig--bleed > img,
  main > section.lead-band > img,
  section > figure.fig--bleed > img){height:auto}
/* op-img-dims:end */
@media (min-width:1101px) and (max-width:1299px){.article > .fig--inset.fig--inset{max-width:calc(100% - clamp(14px,1.5vw,36px))!important}}
@media (min-width:1060px) and (max-width:1339px){.article > .fig--inset.fig--inset{max-width:calc(100% - clamp(14px,1.5vw,36px))!important}}
@media (min-width:621px) and (max-width:719px){.drawnband.drawnband > figure{width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}}
@media (min-width:621px) and (max-width:719px){.drawnband.drawnband figure{width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}}
@media (min-width:621px) and (max-width:719px){.drawnband.drawnband > *{min-width:0!important}.drawnband.drawnband svg,.drawnband.drawnband img{max-width:100%!important;height:auto!important}}