/* 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. */
.scp3.sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.scp3.sponsor.scp3.sponsor img{height:38px!important;display:block!important;width:100%!important}

/* op-recentre-plate: the money mark sat off-centre in its own plate (measured 186px of skew:
   0px on one side, 186px on the other, with a 130px mark in a 316px plate).
   ⚠️ THE CAUSE IS OURS, NOT DESIGN'S: sp-mark-frame forces display:block on the plate, which
   replaces the flex centring Design put there — and with the mark capped by a max-width and no
   auto margins it drifts to one side. Rather than fight the block display, the mark itself is
   centred with auto inline margins, which works whatever the plate's display ends up being. */
a.sp-logo{text-align:center}
a.sp-logo > img{display:block!important;margin-inline:auto!important}

/* op-mobile-bleed ----------------------------------------------------------------------
   Design gives exactly two elements the full-bleed trick — the supporters band and the page
   footer — as margin-inline:-56px cancelling main's 56px padding. Below 920px main's padding
   is 20px but the -56px stayed, so both bled 36px off the left edge and stopped 76px short of
   the right (the footer still did it at 768). They are re-bled to the padding that is actually
   there. This replaces an earlier max-width:100% cap, which stopped the overflow but left the
   band 40px short of the right edge instead. */
@media (max-width:920px){
  main.main > [style*="-56px"]{
    margin-left:-20px!important;margin-right:-20px!important;
    padding-left:20px!important;padding-right:20px!important;
    max-width:none!important;width:auto!important;box-sizing:border-box!important}
}

/* op-money-band ------------------------------------------------------------------------
   The supporters band uses Design's full-bleed trick: margin-inline:-56px to cancel main's
   56px padding. At phone width main's padding is 20px but the -56px stayed, so the dark
   band sat at x -36..314 — 36px off the left edge, 76px short of the right — and its own
   56px padding squeezed 11 tiles into a 238px column, one per row, 1887px tall.
   Mobile only; the desktop band is untouched. */
@media (max-width:920px){
  main.main > section:has([data-partner]){
    padding-top:34px!important;padding-bottom:36px!important}
  main.main > section:has([data-partner]) > div{max-width:100%!important}
  section:has([data-partner]) div:has(> [data-partner]){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  /* An ODD count (11 tiles when written): the lead tile spans the row so the grid ends flush
     instead of leaving a hole bottom-right. Parity-guarded (money_slots, 2026-09-23): with an
     even count the lead steps back and the tiles pair up 2x2 — the unguarded rule left a lone
     last tile the moment a 12th partner was added. */
  section:has([data-partner]) div:has(> [data-partner]:nth-child(odd):last-child) > [data-partner="1"]{grid-column:1 / -1!important}
  section:has([data-partner]) [data-partner]{
    padding:13px 13px 12px!important;min-height:0!important}
  section:has([data-partner]) [data-partner] .sponsor-blurb{
    display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;
    overflow:hidden!important}
}

/* op-topbar-fit ------------------------------------------------------------------------
   The sticky topbar row measured 419px of content in a 390px viewport (26px padding,
   5×14px gaps, menu + wordmark + chip + search + theme), so the theme toggle sat 3px past
   the right edge and the page scrolled sideways. Tightening the padding and the gaps fits
   the whole row at 374px with nothing hidden. */
@media (max-width:560px){
  header.topbar{padding-left:16px!important;padding-right:16px!important;gap:9px!important}
}

/* op-versus-table ----------------------------------------------------------------------
   The 4-column comparison tables (label + three formats) have a content-driven minimum of
   434px, so at 390 and at 360 they pushed the whole page sideways. Tighter cells recover
   ~40px, and the table scrolls inside its own box for the rest — the article column itself
   never moves. Desktop is untouched. */
@media (max-width:640px){
  table.versus,table.datatable{display:block!important;overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;max-width:100%!important}
  table.versus th,table.versus td,table.datatable th,table.datatable td{padding:10px 11px!important;font-size:13.5px!important}
}

/* op-profile-cards-320 -----------------------------------------------------------------
   The two-up profile cards need 296px (2×140 + 16px gap) but the article column is 284px at
   320, so the right-hand card sat 3px past the screen. One card per row on the narrowest
   phones. */
@media (max-width:360px){
  div:has(> .profile-card){grid-template-columns:1fr!important}
}

/* op-topbar-320 ------------------------------------------------------------------------
   At 320 the topbar row is still 374px: menu + wordmark + tagline chip + search + theme.
   The tagline chip is the one decorative item — the same line opens the hero right below —
   so it is dropped on the narrowest phones and the row lands at 299px. */
@media (max-width:400px){
  header.topbar > span{display:none!important}
}

/* op-money-cutoff: at 320 the mark is pinned at width:130px/max-width:130px inside a 109px content box, 22px over at 320. Structural only — no spacing value of mine: the mark is
   held to the box it is given, the column is allowed to shrink, or the tile is measured
   border-box. Trialled before writing: the cut-off is gone, no new overflow, the smallest mark
   still measures over 70px. Phone widths only; 390 and desktop are untouched. */
@media (max-width:360px){
  .sponsor img,.sponsor svg{max-width:100%!important;width:auto!important;height:auto}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > div > img,
  figure.article-figure > div > img){height:auto}
/* op-img-dims:end */