/* Durango Logwood Inn — "Iron and Stone"
   Palette roles:  ground  #F4EFE6   ink #1B1A17   accent(ember) #D4471E
                   secondary(spruce) #1D4B3E   stone #8A8375   iron #3A3730 */

:root {
  --paper: #F4EFE6;
  --paper-2: #EDE6D8;
  --ink: #1B1A17;
  --ink-2: #3A3730;
  --ember: #D4471E;
  --spruce: #16382D;
  --stone: #8A8375;
  --stone-text: #6A6453;   /* 5.1:1 on paper — labels, captions, credits */
  --ember-text: #A6360F;   /* 4.9:1 on paper — small ember labels */
  --stone-2: #C9C3B6;
  --iron: #3A3730;

  --prose: 680px;
  --breakout: 960px;
  --gutter: 24px;

  --fs-body: 18px;
  --fs-lead: 22px;
  --fs-cap: 15px;
  --fs-credit: 11px;

  --display: "Alegreya", Georgia, serif;
  --prose-face: "Literata", Georgia, serif;
  --label: "Epilogue", "Helvetica Neue", sans-serif;
  --figure-face: "Space Mono", ui-monospace, monospace;
  --credit-face: "Martian Mono", ui-monospace, monospace;
}

@media (min-width: 700px)  { :root { --gutter: 40px; } }
@media (min-width: 1200px) { :root { --gutter: 56px; --fs-body: 19px; --fs-lead: 24px; } }
@media (min-width: 1600px) { :root { --prose: 740px; --breakout: 1100px; --fs-body: 20px; --fs-lead: 26px; --fs-cap: 16px; --fs-credit: 12px; --gutter: 72px; } }
@media (min-width: 1920px) { :root { --prose: 800px; --breakout: 1280px; --fs-body: 21px; --fs-lead: 28px; --gutter: 88px; } }
@media (min-width: 2560px) { :root { --prose: 880px; --breakout: 1520px; --fs-body: 22px; --fs-lead: 30px; --fs-cap: 17px; --gutter: 120px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--prose-face);
  font-size: var(--fs-body);
  line-height: 1.68;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ember); }
p { text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; letter-spacing: -0.015em; text-wrap: balance; margin: 0; }
hr { border: 0; border-top: 1px solid var(--stone-2); margin: 0; }

/* ---------- the mark: three-foot rail cross-section, three scales ---------- */
.rail-mark { display: block; flex: 0 0 auto; width: 42px; height: auto; }
.rail-mark path, .rail-mark line {
  fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- layout rails ---------- */
.wrap      { width: 100%; padding-inline: var(--gutter); margin-inline: auto; }
.measure   { max-width: calc(var(--prose) + 2 * var(--gutter));   margin-inline: auto; padding-inline: var(--gutter); }
.breakout  { max-width: calc(var(--breakout) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.bleed     { width: 100%; }
.rule-thin { height: 1px; background: var(--stone-2); }

/* ---------- masthead ---------- */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px var(--gutter);
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.site-head.on-image {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  background: linear-gradient(to bottom, rgba(14,12,10,.86) 0%, rgba(14,12,10,.66) 100%);
  border-bottom: 1px solid rgba(244,239,230,.28);
  color: var(--paper);
}
.site-head.on-image a { color: var(--paper); }
.site-head.on-image a:hover { color: #F0A88C; }
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 0 1 auto; }
.brand .rail-mark { width: clamp(19px, 1.7vw, 26px); height: auto; }
.brand .wordmark {
  font-family: var(--display); font-size: clamp(21px, 2.2vw, 34px);
  line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
}
.nav-toggle, .nav-toggle-label { display: none; }
.site-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); }
.site-nav a {
  font-family: var(--label); font-size: 13.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; line-height: 1;
}
.site-nav a .sec-mark {
  width: 19px; height: 19px; opacity: .9; flex: 0 0 auto;
  transform: translateY(-1px);
}
.site-nav a[aria-current] { color: var(--ember); }
.site-nav a.archive-link { color: var(--ember); }

@media (max-width: 1179px) {
  .nav-toggle-label {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    cursor: pointer; width: 44px; height: 44px; margin: -5px -10px -5px 0;
    align-items: flex-end;
  }
  .nav-toggle-label span { display: block; width: 24px; height: 2px; background: currentColor; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--ink); padding: 8px 0;
  }
  .site-head:not(.on-image) { position: relative; }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .site-nav a { color: var(--paper) !important; padding: 13px var(--gutter); width: 100%; min-height: 44px; }
}

/* ---------- homepage: full-bleed lead ---------- */
.lead-band { position: relative; background: var(--ink); }
.lead-band .lead-img { width: 100%; height: clamp(460px, 74vh, 1000px); object-fit: cover; object-position: 50% 42%; }
.lead-band .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,12,10,.96) 0%, rgba(14,12,10,.78) 26%, rgba(14,12,10,.34) 58%, rgba(14,12,10,.5) 100%);
}
.lead-plate {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) clamp(30px, 4vw, 66px);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 4vw, 80px); flex-wrap: wrap; color: var(--paper);
}
.lead-title { display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 34px); }
.lead-title .rail-mark {
  color: var(--paper); width: clamp(58px, 5.4vw, 104px); height: auto; margin-bottom: 10px;
  filter: drop-shadow(0 2px 12px rgba(10,8,6,.9));
}
.lead-kicker {
  font-family: var(--figure-face); font-size: clamp(11px, .8vw, 14px);
  letter-spacing: 0.3em; text-transform: uppercase; color: #F3B69C; margin-bottom: 12px;
  text-shadow: 0 1px 12px rgba(10,8,6,.95);
}
.lead-plate h1 {
  font-size: clamp(46px, 7.4vw, 150px); line-height: .86;
  letter-spacing: -0.03em; color: #FFF9EE; margin: 0;
  text-shadow: 0 3px 30px rgba(10,8,6,.92), 0 1px 4px rgba(10,8,6,.8);
}
.lead-plate h1 em { font-style: italic; font-weight: 400; display: block; }
.lead-standfirst {
  font-size: clamp(16px, 1.35vw, 26px); line-height: 1.48; max-width: 30ch;
  border-left: 4px solid var(--ember); padding-left: 20px; margin: 0 0 10px;
  color: #FBF5E9; text-shadow: 0 2px 16px rgba(10,8,6,.92);
}
.lead-credit {
  font-family: var(--credit-face); font-size: clamp(10.5px, .58vw, 12px);
  color: var(--stone-text); padding: 11px var(--gutter) 0; letter-spacing: .02em;
}

/* ---------- bands ---------- */
.band { padding-block: clamp(56px, 6vw, 132px); }
.band--tight { padding-block: clamp(40px, 4vw, 84px); }
.band--spruce { background: var(--spruce); color: #E7EFE9; }
.band--spruce h2, .band--spruce h3 { color: #FFF; }
.band--iron { background: var(--ink); color: var(--stone-2); }
.band--iron h2, .band--iron h3 { color: var(--paper); }
.band-eyebrow {
  font-family: var(--label); font-size: clamp(12px, .82vw, 15px); font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ember);
  margin-bottom: clamp(18px, 1.6vw, 30px); padding-top: 14px;
  border-top: 3px solid var(--ember); display: block;
}
.band--spruce .band-eyebrow { color: #9FCFB6; border-top-color: #9FCFB6; }
.split {
  display: flex; gap: clamp(30px, 4vw, 96px); align-items: flex-start; flex-wrap: wrap;
}
.split > .col-major { flex: 1.7 1 480px; min-width: 0; }
.split > .col-minor { flex: 1 1 320px; min-width: 0; }
.split--baseline { align-items: flex-end; }

.h-xl { font-size: clamp(30px, 3.1vw, 62px); line-height: 1.08; }
.h-lg { font-size: clamp(26px, 2.2vw, 44px); line-height: 1.12; }
.h-md { font-size: clamp(22px, 1.6vw, 32px); line-height: 1.16; }
.set-narrow { max-width: 30ch; }
.set-prose  { max-width: 62ch; }
.deck { font-size: var(--fs-lead); line-height: 1.5; }

/* drawn elevation profile */
.profile-fig { margin: clamp(34px, 3.4vw, 72px) 0 0; }
.profile-fig svg { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 210; overflow: visible; }
.profile-fig figcaption {
  display: flex; gap: 18px 34px; flex-wrap: wrap; justify-content: space-between;
  font-family: var(--figure-face); font-size: 12px; color: var(--stone-text);
  border-top: 1px solid var(--stone-2); margin-top: 26px; padding-top: 12px;
}

/* ---------- figure system: three treatments ---------- */
figure { margin: 0; }
.cap-row {
  display: flex; gap: 10px 28px; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
}
.cap-row .cap { flex: 1 1 26ch; min-width: 0; max-width: 78ch; }
.cap-row .credit { flex: 0 1 auto; }
.cap { font-size: var(--fs-cap); line-height: 1.55; }
.credit, p.credit, span.credit {
  font-family: var(--credit-face); font-size: var(--fs-credit);
  line-height: 1.6; color: var(--stone-text); letter-spacing: .01em;
}

/* (1) full-bleed, caption on an iron bar */
.fig-bleed { width: 100%; }
.fig-bleed img { width: 100%; height: clamp(280px, 46vw, 760px); object-fit: cover; }
.fig-bleed .cap-bar {
  background: var(--iron); color: var(--paper-2);
  padding: 16px var(--gutter);
}
.fig-bleed .cap-bar .cap { font-style: normal; }
.fig-bleed .cap-bar .credit { color: #A9A296; }

/* (2) offset — ember left rule, caption beside */
.fig-offset { display: flex; gap: clamp(20px, 2.2vw, 44px); align-items: flex-start; flex-wrap: wrap; }
.fig-offset .shot { flex: 1.9 1 340px; min-width: 0; border-left: 4px solid var(--ember); padding-left: 18px; }
.fig-offset figcaption { flex: 1 1 220px; min-width: 0; max-width: 42ch; }
.fig-offset .cap { font-style: italic; }
.fig-offset .credit { margin-top: 8px; }

/* (3) mat — paper ground, hairline border */
.fig-mat { background: var(--paper); border: 1px solid var(--stone); padding: clamp(12px, 1.1vw, 22px); }
.band--spruce .fig-mat, .band--iron .fig-mat { color: var(--ink); }
.fig-mat figcaption { padding-top: 14px; }

/* ---------- section shelf (editorial, not a grid) ---------- */
.shelf { display: flex; gap: clamp(18px, 1.8vw, 34px); align-items: stretch; flex-wrap: wrap; }
.shelf > a {
  flex: 1 1 210px; min-width: 0; display: flex; flex-direction: column;
  border-top: 2px solid var(--ink); padding-top: 14px;
}
.shelf > a:nth-child(1) { flex: 1.9 1 320px; }
.shelf > a:nth-child(4) { flex: 1.35 1 260px; }
.shelf .thumb { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 14px; }
.shelf .thumb img { width: 100%; height: 100%; object-fit: cover; }
.shelf .s-name {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--label); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px;
}
.shelf .s-name .sec-mark { width: 19px; height: 19px; color: var(--ember); }
.shelf p { font-size: var(--fs-cap); line-height: 1.55; color: var(--ink-2); margin: 0 0 10px; }
.shelf .s-count { margin-top: auto; font-family: var(--figure-face); font-size: 11.5px; color: var(--stone); }

/* ---------- curated run: deliberately uneven ---------- */
.run { display: flex; gap: clamp(24px, 3vw, 64px); flex-wrap: wrap; align-items: flex-start; }
.run > article { min-width: 0; }
.run .r-lead { flex: 2.2 1 420px; }
.run .r-mid  { flex: 1.3 1 280px; }
.run .r-small { flex: 1 1 230px; }
.run .r-kicker {
  font-family: var(--figure-face); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ember); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.run .r-kicker .sec-mark { width: 15px; height: 15px; }
.run .shot { overflow: hidden; margin-bottom: 16px; }
.run .r-lead .shot img { aspect-ratio: 16/10; width: 100%; object-fit: cover; }
.run .r-mid .shot img  { aspect-ratio: 4/5;  width: 100%; object-fit: cover; }
.run .r-small .shot img { aspect-ratio: 3/2; width: 100%; object-fit: cover; }
.run h3 { margin-bottom: 10px; }
.run p { font-size: var(--fs-cap); line-height: 1.6; color: var(--ink-2); margin: 0; }
.run .credit { margin-top: 8px; }

/* ---------- map ---------- */
.map-figure { }
.map-frame {
  border: 1px solid var(--stone); background: #EFE9DC; padding: 10px;
}
.map-frame svg { display: block; width: 100%; height: auto; }
.map-figure figcaption { padding-top: 14px; }
.map-pin-label {
  font-family: var(--figure-face); font-size: 15px; fill: var(--ink);
  paint-order: stroke; stroke: rgba(239,233,220,.9); stroke-width: 5px; stroke-linejoin: round;
}
.map-legend {
  display: flex; gap: 10px 26px; flex-wrap: wrap; margin-top: 12px;
  font-family: var(--figure-face); font-size: 12.5px;
}
.map-legend a { border-bottom: 1px solid var(--stone-2); }

/* ---------- supporters ---------- */
.supporters { padding-block: clamp(30px, 3vw, 56px); }
.sup-head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--stone-2); padding-top: 14px; margin-bottom: 20px;
}
.sup-label {
  font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.sup-note { font-family: var(--figure-face); font-size: 11.5px; color: var(--stone-text); }
.sup-row { display: flex; flex-wrap: wrap; gap: 16px; }
.sponsor {
  flex: 0 0 260px; width: 260px; min-height: 138px;
  background: var(--iron); padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.sponsor img {
  width: 100%; height: 56px; object-fit: contain; margin: 0;
}
.sponsor .sponsor-blurb {
  display: block; width: 100%; min-width: 200px;
  font-size: 14px; line-height: 1.5; color: #C9C3B6;
}
.sponsor:hover { outline: 2px solid var(--ember); outline-offset: -2px; }
.sup-row--roll .sponsor { padding: 14px; }
@media (max-width: 620px) {
  .sponsor { flex: 0 0 100%; width: 100%; }
}

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: var(--stone-2); padding: clamp(40px, 4vw, 84px) var(--gutter); }
.site-foot .f-top { display: flex; gap: clamp(28px, 4vw, 90px); justify-content: space-between; flex-wrap: wrap; }
.site-foot .f-brand { display: flex; align-items: center; gap: 14px; color: var(--paper); }
.site-foot .f-brand .rail-mark { width: 44px; height: auto; }
.site-foot .f-brand span { font-family: var(--display); font-size: clamp(24px, 2vw, 36px); }
.site-foot .f-line { max-width: 46ch; margin: 12px 0 0; font-size: var(--fs-cap); line-height: 1.6; }
.site-foot nav { display: flex; gap: 14px 34px; flex-wrap: wrap; align-items: flex-start; }
.site-foot nav a {
  font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--stone-2);
}
.site-foot nav a:hover { color: var(--ember); }

/* ---------- section (category) pages ---------- */
.sec-hero { padding-block: clamp(40px, 4vw, 90px) clamp(26px, 2.6vw, 56px); }
.sec-hero .split { align-items: start; }
.sec-hero .col-major { display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 26px); }
.sec-hero .col-minor { border-top: 3px solid var(--ink); padding-top: 18px; }
.sec-hero h1 { font-size: clamp(44px, 5.4vw, 118px); line-height: .92; letter-spacing: -0.03em; }
.sec-hero .sec-mark { width: clamp(26px, 2.4vw, 44px); height: auto; color: var(--ember); margin: 0; }
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list > li { border-top: 1px solid var(--stone-2); }
.cat-list > li:first-child { border-top: 3px solid var(--ink); }
.cat-list > li:last-child { border-bottom: 1px solid var(--stone-2); }
.cat-list a {
  display: flex; gap: clamp(18px, 2.4vw, 48px);
  padding: clamp(20px, 2vw, 34px) clamp(12px, 1.2vw, 22px);
  align-items: flex-start; flex-wrap: wrap;
  transition: background .25s ease;
}
.cat-list a:hover { background: var(--paper-2); }
.cat-list .n {
  flex: 0 0 auto; align-self: stretch;
  font-family: var(--figure-face); font-weight: 700; font-size: clamp(14px, 1vw, 19px);
  color: var(--ember-text); line-height: 1;
  border-left: 3px solid var(--ember); padding: 4px 0 4px 12px;
}
.cat-list .shot {
  flex: 0 0 clamp(132px, 17vw, 300px); overflow: hidden;
  background: var(--paper); border: 1px solid var(--stone); padding: 8px;
}
.cat-list .shot img { aspect-ratio: 4/3; width: 100%; object-fit: cover; transition: transform .5s ease; }
.cat-list a:hover .shot img { transform: scale(1.05); }
.cat-list .body { flex: 1 1 320px; min-width: 0; max-width: 66ch; }
.cat-list h2 {
  font-size: clamp(23px, 2vw, 38px); line-height: 1.12; margin-bottom: 12px;
}
.cat-list p { margin: 0; font-size: var(--fs-cap); line-height: 1.6; color: var(--ink-2); }
.cat-list .body::after {
  content: "Read the piece"; display: inline-block; margin-top: 16px;
  font-family: var(--label); font-size: 11.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--stone-text);
  border-bottom: 2px solid var(--stone-2); padding-bottom: 3px;
}
.cat-list a:hover .body h2 { color: var(--ember); }
.cat-list a:hover .body::after { color: var(--ember); border-bottom-color: var(--ember); }
@media (max-width: 620px) {
  .cat-list .shot { flex: 1 1 100%; order: -1; }
  .cat-list .n { align-self: flex-start; }
}

/* ---------- article page ---------- */
.art-head { padding-block: clamp(34px, 3.4vw, 74px) clamp(22px, 2.2vw, 44px); }
.art-kicker {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--stone-text);
  margin-bottom: 20px;
}
.art-kicker .sec-mark { width: 19px; height: 19px; color: var(--ember); }
.art-kicker a { color: var(--ember); }
.art-head h1 { font-size: clamp(34px, 4.1vw, 86px); line-height: .99; letter-spacing: -0.026em; }
.lead {
  font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2);
  max-width: 60ch; margin: 24px 0 0;
}
.art-body { padding-bottom: clamp(50px, 5vw, 110px); }
.art-body > * { margin-inline: auto; }
.art-body > p, .art-body > h2, .art-body > h3, .art-body > ul, .art-body > ol,
.art-body > .note, .art-body > .pullquote, .art-body > .blockquote {
  max-width: calc(var(--prose) + 2 * var(--gutter)); padding-inline: var(--gutter);
}
.art-body > p { margin: 0 auto 1.35em; }
.art-body > h2 {
  font-size: clamp(25px, 2.1vw, 42px); line-height: 1.12;
  margin: clamp(46px, 4vw, 84px) auto 18px;
}
.art-body > h2 {
  border-top: 2px solid var(--stone-2); padding-top: 24px;
}
.art-body > h2 .rail-mark {
  width: 17px; height: auto; color: var(--ember);
  margin-bottom: 16px; opacity: .95;
}
.art-body > h3 { font-size: clamp(21px, 1.6vw, 30px); margin: clamp(34px, 3vw, 56px) auto 14px; }
.art-body a[href] { border-bottom: 1px solid var(--ember); }
.art-body a[href]:hover { background: rgba(212,71,30,.1); }

/* insertions: every one reserves real space on both sides */
.ins { margin-block: clamp(56px, 4vw, 92px); clear: both; }
.art-body > .ins { max-width: calc(var(--breakout) + 2 * var(--gutter)); padding-inline: var(--gutter); }
.art-body > .ins.ins-bleed { max-width: none; padding-inline: 0; }

.pullquote {
  border: 0; margin-block: clamp(56px, 4vw, 92px);
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--stone-2);
  padding: 24px 0 26px;
}
.pullquote .rail-mark { width: 20px; height: auto; color: var(--ember); margin-bottom: 16px; }
.pullquote p {
  font-family: var(--display); font-size: clamp(24px, 2vw, 38px);
  line-height: 1.16; margin: 0; max-width: 34ch;
}
.blockquote {
  margin-block: clamp(56px, 4vw, 92px); padding-left: 22px;
  border-left: 4px solid var(--spruce);
}
.blockquote p { font-family: var(--display); font-size: clamp(20px, 1.6vw, 28px); line-height: 1.3; margin: 0; }
.blockquote cite {
  display: block; margin-top: 12px; font-style: normal;
  font-family: var(--figure-face); font-size: 12.5px; color: var(--stone-text);
}
.callout {
  background: var(--paper-2); border-top: 3px solid var(--ember);
  padding: clamp(20px, 2vw, 34px);
}
.callout p { margin: 0; max-width: 66ch; }
.note {
  font-size: var(--fs-cap); line-height: 1.6; color: var(--ink-2);
  border-left: 2px solid var(--stone); padding-left: 16px;
}

/* notes-for-design panels */
.panel { background: var(--paper-2); padding: clamp(22px, 2.2vw, 40px); }
.panel--iron { background: var(--ink); color: var(--stone-2); }
.panel--iron h2, .panel--iron h3, .panel--iron .stat-num { color: var(--paper); }
.panel--spruce { background: var(--spruce); color: #DCE7DE; }
.panel--spruce h2, .panel--spruce h3, .panel--spruce .stat-num { color: #FFF; }
.panel-label {
  font-family: var(--figure-face); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ember); margin-bottom: 14px;
}
.panel--iron .panel-label, .panel--spruce .panel-label { color: #E9A183; }
.panel h3 { font-size: clamp(21px, 1.6vw, 30px); margin-bottom: 16px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li {
  display: flex; gap: 10px 26px; flex-wrap: wrap;
  padding: 13px 0; border-top: 1px solid rgba(138,131,117,.4);
}
.timeline > li:first-child { border-top: 0; }
.t-when {
  flex: 0 0 clamp(110px, 12vw, 200px); min-width: 0;
  font-family: var(--figure-face); font-size: 13.5px; line-height: 1.5;
  color: var(--ember); overflow-wrap: break-word;
}
.panel--iron .t-when, .panel--spruce .t-when { color: #E9A183; }
.t-what { flex: 1 1 260px; min-width: 0; max-width: 70ch; font-size: var(--fs-cap); line-height: 1.6; }

.statrow { display: flex; flex-wrap: wrap; gap: clamp(18px, 2vw, 46px); }
.statblock { flex: 1 1 150px; min-width: 0; }
.stat-num {
  display: block; font-family: var(--figure-face); font-weight: 700;
  font-size: clamp(24px, 2vw, 38px); line-height: 1.05; margin-bottom: 8px;
}
.stat-label { display: block; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.panel--iron .stat-label, .panel--spruce .stat-label { color: #B9B2A4; }

.factlist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(24px, 3vw, 56px); }
.factlist > li {
  break-inside: avoid; padding: 0 0 12px 18px; position: relative;
  font-size: var(--fs-cap); line-height: 1.6; max-width: 60ch;
}
.factlist > li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 2px; background: var(--ember);
}
@media (max-width: 760px) { .factlist { columns: 1; } }

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.versus, table.datatable {
  border-collapse: collapse; width: 100%; min-width: 480px;
  font-size: var(--fs-cap);
}
table.versus th, table.versus td, table.datatable th, table.datatable td {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--stone-2);
  vertical-align: top;
}
table.versus thead th, table.datatable thead th {
  font-family: var(--label); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; border-bottom: 2px solid var(--ink);
}

/* article figures */
.article-figure { margin-block: clamp(56px, 4vw, 92px); }
.gallery { display: flex; gap: clamp(14px, 1.6vw, 30px); flex-wrap: wrap; align-items: flex-start; }
.gallery figure {
  flex: 1 1 240px; min-width: 0;
  background: var(--paper); border: 1px solid var(--stone);
  padding: clamp(10px, .9vw, 16px);
}
.gallery figure > img {
  aspect-ratio: 4 / 3; width: 100%; object-fit: cover;
  transition: filter .5s ease;
}
.gallery figure:hover > img { filter: saturate(1.08) contrast(1.03); }
.gallery figcaption { padding-top: 14px; margin-top: 12px; border-top: 2px solid var(--ember); }
.gallery figcaption .cap { display: block; font-size: var(--fs-cap); line-height: 1.5; }
.gallery figcaption .credit { margin: 8px 0 0; }
/* the second plate steps down, so a pair reads as composed rather than tiled */
.gallery figure:nth-of-type(even) { margin-top: clamp(16px, 2vw, 44px); }
@media (max-width: 700px) { .gallery figure:nth-of-type(even) { margin-top: 0; } }

/* profiles / orgs / related */
.profile-grid { display: flex; gap: clamp(18px, 2vw, 40px); flex-wrap: wrap; }
.profile-card { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.profile-card .p-photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; margin-bottom: 14px; }
.profile-card.no-photo { border-top: 2px solid var(--ember); padding-top: 14px; }
.profile-card h3 { font-size: clamp(19px, 1.3vw, 25px); margin-bottom: 4px; }
.profile-card .p-role {
  font-family: var(--figure-face); font-size: 12px; color: var(--stone-text);
  margin: 0 0 10px; letter-spacing: .04em;
}
.profile-card p { font-size: 15px; line-height: 1.6; margin: 0 0 8px; }
.profile-card .p-attr { font-family: var(--credit-face); font-size: var(--fs-credit); color: var(--stone-text); }
.org-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.org-card {
  flex: 0 0 260px; width: 260px; border: 1px solid var(--stone);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
}
.org-card .org-name { font-family: var(--display); font-size: 19px; }
.org-card .org-host { font-family: var(--credit-face); font-size: var(--fs-credit); color: var(--stone-text); }
.entity-ref { border-bottom: 1px solid var(--ember); }

.further-grid { display: flex; gap: clamp(16px, 2vw, 36px); flex-wrap: wrap; }
.further-grid a {
  flex: 1 1 240px; min-width: 0; border-top: 2px solid var(--ink);
  padding-top: 13px; display: flex; flex-direction: column; gap: 8px;
  font-family: var(--display); font-size: clamp(18px, 1.3vw, 25px); line-height: 1.18;
}
.further-grid a .rk {
  font-family: var(--figure-face); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ember);
}
.related-links { list-style: none; margin: 0; padding: 0; }
.related-links:empty { display: none; }

.art-end {
  border-top: 1px solid var(--stone-2);
  margin-top: clamp(56px, 5vw, 104px);
  padding-top: clamp(40px, 3.2vw, 66px);
  padding-bottom: clamp(40px, 3.2vw, 66px);
}
.art-end .panel-label { color: var(--stone-text); }

/* archive */
.arch-groups { display: flex; flex-direction: column; gap: clamp(40px, 4vw, 80px); }
.arch-group h2 { font-size: clamp(24px, 2vw, 40px); margin-bottom: 4px; display: flex; align-items: center; gap: 12px; }
.arch-group h2 .sec-mark { width: 24px; height: 24px; color: var(--ember); }
.arch-list { list-style: none; margin: 14px 0 0; padding: 0; columns: 2; column-gap: clamp(30px, 4vw, 80px); }
.arch-list li { break-inside: avoid; padding: 9px 0; border-top: 1px solid var(--stone-2); }
.arch-list a { font-family: var(--display); font-size: clamp(17px, 1.15vw, 22px); line-height: 1.24; display: block; max-width: 46ch; }
@media (max-width: 860px) { .arch-list { columns: 1; } }

/* simple pages */
.page-body { padding-block: clamp(40px, 4vw, 90px); }
.page-body h1 { font-size: clamp(34px, 3.6vw, 70px); line-height: 1; margin-bottom: 22px; }
.page-body h2 { font-size: clamp(22px, 1.7vw, 32px); margin: clamp(30px, 3vw, 54px) 0 12px; }
.page-body p { max-width: 66ch; }
.big-404 {
  font-family: var(--figure-face); font-weight: 700;
  font-size: clamp(64px, 12vw, 220px); line-height: .9; color: var(--ember);
  letter-spacing: -.04em;
}

/* styleguide only */
.sg-block { border-top: 1px solid var(--stone-2); padding-block: clamp(30px, 3vw, 60px); }
.sg-block > h2 {
  font-family: var(--figure-face); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ember); margin-bottom: 22px;
}
.sg-narrow { max-width: 360px; border: 1px dashed var(--stone); padding: 12px; }

/* section-page jump nav (never hidden by the mobile header rule) */
.sec-jump { display: flex; gap: 10px 34px; flex-wrap: wrap; align-items: center; }
.sec-jump a, .sec-jump > span {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  font-family: var(--label); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.sec-jump .sec-mark { width: 19px; height: 19px; color: var(--ember); }
.sec-jump a.archive-link { color: var(--ember); }

/* the elevation diagram leads its band */
.profile-fig--full { max-width: none; margin-top: clamp(40px, 4vw, 84px); padding-inline: var(--gutter); }
.profile-fig--full svg { aspect-ratio: 1200 / 336; }
.profile-fig--full figcaption {
  max-width: calc(var(--breakout) + 2 * var(--gutter));
  margin-inline: auto; padding-inline: 0;
}

/* readability on the spruce ground */
.band--spruce a { color: #FFFDF7; }
.band--spruce a:hover { color: #F3B69C; }
.band--spruce h2 a, .band--spruce h3 a { text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.band--spruce .band-eyebrow { color: #9FCFB6; }
.band--spruce .deck { color: #E4EFE7; }

/* Main Avenue heading holds one line on a wide screen */
.ma-line {
  font-size: clamp(21px, 2.15vw, 44px); line-height: 1.14; max-width: none;
}

/* homepage run: quieter image meta, less copy */
.run .credit {
  font-size: clamp(11px, .72vw, 12.5px); line-height: 1.5; color: var(--stone-text);
  margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* map caption and key */
.map-cap { padding-top: 18px; }
.map-cap-line {
  font-family: var(--display); font-size: clamp(17px, 1.3vw, 25px); line-height: 1.42;
  max-width: none; margin: 0; border-top: 2px solid var(--ink); padding-top: 16px;
  columns: 2; column-gap: clamp(30px, 3.4vw, 72px); text-wrap: pretty;
}
@media (max-width: 860px) { .map-cap-line { columns: 1; } }
.map-cap .credit { margin: 10px 0 0; }
.map-keys {
  display: flex; flex-wrap: wrap; gap: 16px clamp(24px, 3vw, 60px);
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--stone-2);
}
.mk-group { display: flex; flex-direction: column; gap: 6px; }
.mk-key {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--label); font-size: 11.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 2px;
}
.mk-dot { width: 11px; height: 11px; border-radius: 50%; display: block; }
.mk-group a {
  font-family: var(--display); font-size: clamp(16px, 1.05vw, 21px); line-height: 1.28;
  border-bottom: 1px solid var(--stone-2);
}
.mk-group a:hover { border-bottom-color: var(--ember); }
.map-pin-label {
  font-family: var(--figure-face); font-size: 17px; font-weight: 700; fill: var(--ink);
  paint-order: stroke; stroke: rgba(239,233,220,.95); stroke-width: 6px; stroke-linejoin: round;
}

/* the opening band gets a width of its own */
.band-wide {
  max-width: calc(var(--breakout) + 340px + 2 * var(--gutter));
  margin-inline: auto; padding-inline: var(--gutter);
}
.band-wide > .split > .col-major { flex: 1.35 1 460px; }
.band-wide > .split > .col-minor { flex: 1 1 380px; }

/* cc-12 · the section shelf: one image size, given room */
.shelf {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 2.2vw, 40px);
}
.shelf > a {
  display: flex; flex-direction: column; border-top: 0; padding-top: 0;
  background: var(--paper-2);
}
.shelf .thumb { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 0; }
.shelf .thumb img { transition: transform .5s ease; }
.shelf > a:hover .thumb img { transform: scale(1.045); }
.shelf .s-name {
  display: flex; align-items: center; gap: 9px; line-height: 1;
  font-family: var(--label); font-size: 13px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  margin: 0; padding: 16px 18px 12px; border-top: 3px solid var(--ember);
}
.shelf .s-name .sec-mark { width: 20px; height: 20px; color: var(--ember); transform: translateY(-1px); }
.shelf p { font-size: var(--fs-cap); line-height: 1.55; color: var(--ink-2); margin: 0; padding: 0 18px 14px; }
.shelf .s-count {
  margin-top: auto; padding: 12px 18px 16px; border-top: 1px solid var(--stone-2);
  font-family: var(--figure-face); font-size: 11.5px; color: var(--stone-text);
}
.shelf > a:hover .s-name { color: var(--ember); }

.sup-sub {
  margin-top: clamp(22px, 2vw, 36px); margin-bottom: 14px;
  padding-top: 12px; border-top: 1px solid var(--stone-2);
}
.sup-sub .sup-label { font-size: 11px; color: var(--stone); }

/* ---- map key across the full width ---- */

.map-keys {
  display: flex; flex-wrap: wrap;
  gap: 22px clamp(20px, 2.4vw, 48px);
}
.map-keys .mk-group { flex: 1 1 170px; min-width: 0; }
.mk-group { border-top: 1px solid var(--stone-2); padding-top: 12px; }
.mk-key { margin-bottom: 8px; }
.mk-group a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--stone-2);
}
.mk-group a::after {
  content: "\2192"; font-family: var(--figure-face); font-size: 13px;
  color: var(--stone-text); flex: 0 0 auto;
}
.mk-group a:hover { color: var(--ember); border-bottom-color: var(--ember); }
.mk-group a:hover::after { color: var(--ember); }

/* ---- the run: framed plates instead of bare rectangles ---- */
.run .shot { position: relative; overflow: hidden; background: var(--paper-2); }
.run .shot img { transition: transform .55s ease; }
.run > article:hover .shot img { transform: scale(1.05); }
.run .r-lead .shot { border-left: 5px solid var(--ember); }
.run .r-mid .shot { padding: 12px; border: 1px solid var(--stone); background: var(--paper); }
.run .r-mid .shot img { aspect-ratio: 3 / 4; }
.run .r-small .shot::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--ember);
}
.run .r-kicker { padding-top: 12px; border-top: 2px solid var(--ink); }
.run h3 a:hover { color: var(--ember); }

/* ---- the shelf: matted plates, more weight ---- */
.shelf > a { background: var(--paper-2); border-bottom: 1px solid var(--stone-2); }
.shelf .thumb { aspect-ratio: 5 / 4; margin: 10px 10px 0; }
.shelf .s-name { border-top: 0; padding: 18px 20px 10px; font-size: 13.5px; }
.shelf p { padding: 0 20px 16px; }
.shelf .s-count { padding: 12px 20px 18px; }
.shelf > a:hover { background: #E7DFCE; }
.shelf > a:hover .s-count { color: var(--ember); }

.stat-src {
  display: block; margin-top: 6px;
  font-family: var(--credit-face); font-size: var(--fs-credit);
  line-height: 1.5; color: var(--stone);
}
.panel--iron .stat-src, .panel--spruce .stat-src { color: #9C9484; }

/* the map keeps a legible scale on a phone and scrolls inside its own frame */
@media (max-width: 720px) {
  .map-frame { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .map-frame svg { min-width: 680px; }
  .map-keys { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* phone tap targets on the standing furniture */
@media (max-width: 720px) {
  .site-foot nav { gap: 4px 28px; }
  .site-foot nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .mk-group a { min-height: 40px; display: flex; align-items: center; }
  .map-legend a { min-height: 44px; display: inline-flex; align-items: center; }
  .cat-list a { padding-block: 20px; }
}

.sec-stamp { display: flex; align-items: center; gap: 12px; }
.sec-stamp span {
  font-family: var(--label); font-size: clamp(11.5px, .78vw, 14px); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--stone-text); line-height: 1;
}

/* the section index runs wider than the reading measure */
.list-wide, .sec-rail {
  max-width: calc(var(--breakout) + 300px + 2 * var(--gutter));
  margin-inline: auto; padding-inline: var(--gutter);
}
.list-wide .cat-list .body { max-width: none; }
.list-wide .cat-list .shot { flex: 0 0 clamp(132px, 20vw, 380px); }
.list-wide .cat-list h2 { font-size: clamp(23px, 2.1vw, 40px); }

/* the masthead link is a tap target too */
@media (max-width: 720px) {
  .brand { min-height: 44px; }
}

/* 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-head{flex-wrap:wrap!important}
.sup-head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sup-row{flex-wrap:wrap!important}
.sup-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-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:72px!important;max-height:72px!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}
.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}

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

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

}

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

/* 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-row.sup-row--roll{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
}
/* op-grow-same-size:end */
[data-partner] img{background:transparent!important}