/* ============================================================
   Bruguera Tennis — "The Rally" static stylesheet
   Space Grotesk (display/UI) · Newsreader (reading) · IBM Plex Mono (labels)
   Dark default with a warm-paper light theme. Tokens drive everything.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --paper:        #101012;
  --paper-2:      #16161a;
  --paper-3:      #1e1e23;
  --paper-hover:  #26262d;
  --paper-deep:   #0c0c0e;
  --ink:          #f4f4f0;
  --ink-2:        #d2d2cc;
  --ink-3:        #9a9aa2;
  --ink-4:        #6a6a72;
  --line:         #26262a;
  --line-soft:    #1c1c20;
  --accent:       #c8ff00;   /* optic yellow — used as a fill */
  --accent-ink:   #101012;   /* text sitting on accent */
  --accent-text:  #c8ff00;   /* accent used as text/link colour */
  --chip:         #0f0f11;   /* dark backing for light sponsor wordmarks */
  --header-bg:    rgba(16,16,18,.9);
  --shadow:       0 24px 50px rgba(0,0,0,.38);

  --sans: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1320px;
  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 12px;
}

[data-theme="light"] {
  --paper:        #f3efe6;
  --paper-2:      #ffffff;
  --paper-3:      #efeadd;
  --paper-hover:  #e7e0d0;
  --paper-deep:   #ece5d6;
  --ink:          #1b1913;
  --ink-2:        #3b3629;
  --ink-3:        #69634f;
  --ink-4:        #948d7c;
  --line:         #e3dccb;
  --line-soft:    #ece5d6;
  --accent:       #c8ff00;
  --accent-ink:   #17180c;
  --accent-text:  #9c3316;   /* clay-red reads on paper */
  --chip:         #17150f;
  --header-bg:    rgba(246,242,235,.92);
  --shadow:       0 24px 50px rgba(70,54,24,.16);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 20px;                 /* generous base — larger than web default */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-text); }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
::selection { background: var(--accent); color: var(--accent-ink); }

::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink-4) 55%, transparent); border-radius: 6px; }

/* ---------- Annotation slots (homepage/category shells) ----------
   Empty data-fill elements render as visible hatched shells so the
   layout holds and reviewers can see every spot that gets filled. */
[data-fill]:empty {
  display: inline-block; min-width: 6ch; min-height: .95em; vertical-align: middle;
  border-radius: 5px;
  background: repeating-linear-gradient(-45deg,
     color-mix(in srgb, var(--ink-4) 22%, transparent) 0 5px, transparent 5px 11px);
  outline: 1px dashed color-mix(in srgb, var(--ink-4) 45%, transparent);
  outline-offset: 2px;
}
h1[data-fill]:empty, h2[data-fill]:empty, h3[data-fill]:empty { display: block; min-height: 1.15em; }
p[data-fill]:empty { display: block; min-height: 2.6em; }
.hero h1[data-fill]:empty, .post-hero h1[data-fill]:empty,
.hero-dek[data-fill]:empty { background: repeating-linear-gradient(-45deg,
     rgba(255,255,255,.16) 0 5px, transparent 5px 11px); outline-color: rgba(255,255,255,.35); }
.hero-dek[data-fill]:empty { display: block; min-height: 2.6em; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.bleed { width: 100%; }
.section { padding-block: clamp(40px, 6vw, 76px); }
.eyebrow {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-text);
}
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink); padding: 12px 18px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ============================================================
   Header + navigation
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter);
  min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: inline-flex; align-items: baseline; gap: 1px; font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; }
.brand .dot { color: var(--accent-text); }
.brand:hover { color: inherit; }

.nav { display: flex; align-items: stretch; gap: 2px; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 74px; padding-inline: 15px;
  font-size: .8rem; letter-spacing: .06em; font-weight: 600;
  color: var(--ink-2); border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link,
.nav-link[aria-current="page"] { color: var(--accent-text); }
.nav-link .caret { width: 9px; height: 9px; transition: transform .18s ease; opacity: .7; }
.nav-item:hover .caret, .nav-item:focus-within .caret { transform: rotate(180deg); }

/* dropdown — CSS hover/focus (works with JS off), JS adds aria niceties */
.submenu {
  position: absolute; top: 74px; left: 50%; transform: translateX(-50%) translateY(6px);
  width: 320px; background: var(--paper-2);
  border: 1px solid var(--line); border-top: 2px solid var(--accent);
  border-radius: 0 0 12px 12px; box-shadow: var(--shadow);
  padding: 10px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease; z-index: 120;
}
.nav-item:hover .submenu, .nav-item:focus-within .submenu, .submenu.open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.submenu-all {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-radius: 8px; background: var(--paper-3); margin-bottom: 8px;
}
.submenu-all:hover { background: var(--paper-hover); color: inherit; }
.submenu-all b { font-size: .82rem; }
.submenu-all span { font-family: var(--mono); font-size: .68rem; color: var(--accent-text); }
.submenu-link { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 8px; }
.submenu-link:hover { background: var(--paper-3); color: inherit; }
.submenu-thumb { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 7px; overflow: hidden; background: var(--paper-3); }
.submenu-thumb img { width: 100%; height: 100%; object-fit: cover; }
.submenu-link b { display: block; font-size: .82rem; font-weight: 600; line-height: 1.2; }
.submenu-link small { font-family: var(--mono); font-size: .64rem; color: var(--ink-4); }

.header-tools { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: var(--paper-3); border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink-2);
}
.icon-btn:hover { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle .moon { display: none; }
[data-theme="light"] .theme-toggle .sun { display: none; }
[data-theme="light"] .theme-toggle .moon { display: block; }

/* mobile menu — pure-CSS checkbox hack (works with JS off) */
.nav-check, .burger { display: none; }
.burger { align-items: center; justify-content: center; }

@media (max-width: 900px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: 74px 0 0 0; z-index: 90;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); padding: 10px var(--gutter) 40px;
    overflow-y: auto; transform: translateX(100%); transition: transform .24s ease;
  }
  .nav-check:checked ~ .header-inner .nav,
  .nav-check:checked ~ .nav { transform: translateX(0); }
  .nav-item { display: block; }
  .nav-link { height: auto; padding: 18px 4px; border-bottom: 1px solid var(--line); border-left: 0; justify-content: space-between; font-size: 1rem; }
  .submenu {
    position: static; width: auto; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 10px; background: transparent;
    display: none;
  }
  .nav-item:focus-within .submenu, .submenu.open { display: block; }
}

/* body scroll-lock helper toggled by CSS when menu open */
.nav-check:checked ~ * { }

/* ============================================================
   Homepage — hero
   ============================================================ */
.hero {
  position: relative; overflow: hidden; width: 100%;
  border-bottom: 1px solid var(--line);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(94deg, transparent 0 60px, rgba(255,255,255,.04) 60px 61px),
    linear-gradient(90deg, #0b0b0d 8%, rgba(11,11,13,.55) 58%, rgba(11,11,13,.78) 100%);
}
.hero-inner {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  padding: clamp(64px,9vw,120px) var(--gutter) clamp(40px,6vw,76px);
  min-height: clamp(360px, 52vw, 560px); display: flex; align-items: flex-end;
}
.hero-copy { max-width: 660px; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink); padding: 6px 12px; border-radius: 999px; font-weight: 600;
  min-height: 1.2em;
}
.hero h1 { color: #f6f6f2; font-size: clamp(2.3rem, 5.5vw, 3.7rem); margin: 20px 0 14px; text-wrap: balance; }
.hero-dek { color: rgba(246,246,242,.86); font-size: clamp(1.05rem,1.6vw,1.3rem); line-height: 1.5; margin: 0 0 20px; max-width: 34em; }
.hero-meta { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: rgba(246,246,242,.72); min-height: 1em; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: #f6f6f2;
  border: 1px solid rgba(255,255,255,.45); padding: 12px 20px; border-radius: 999px;
}
.hero-cta:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ============================================================
   Section title bar (reused across homepage bands)
   ============================================================ */
.band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.band-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.band-head .more { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.band-head .more:hover { color: var(--accent-text); }
.band-kicker { display: flex; align-items: center; gap: 12px; }
.dotmark { width: 14px; height: 14px; border-radius: 4px; background: var(--accent); flex: 0 0 auto; }

/* ============================================================
   Feed (newest-first) — varied sizes + CSS-only "show more"
   ============================================================ */
.feed { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(22px,3vw,34px); }
.card { display: flex; flex-direction: column; min-width: 0; }
.card a.card-media, .card-media { position: relative; display: block; border-radius: 10px; overflow: hidden; background: var(--paper-3); aspect-ratio: 3/2; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .grain { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.05) 34px 35px); }
.card-cat {
  position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; background: rgba(12,12,14,.74); color: var(--accent); padding: 4px 8px; border-radius: 5px; min-height: 1em;
}
.card h3 { margin: 14px 0 8px; font-size: 1.3rem; line-height: 1.14; }
.card p { margin: 0 0 10px; color: var(--ink-3); font-size: .92rem; line-height: 1.5; }
.card .meta { margin-top: auto; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-4); min-height: 1em; }

/* lead card spans wider + larger type */
.card.lead { grid-column: span 4; }
.card.lead .card-media { aspect-ratio: 16/9; }
.card.lead h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.card.lead p { font-size: 1.05rem; }
.card.small { grid-column: span 2; }
.card.reg { grid-column: span 3; }
.card.third { grid-column: span 2; }

/* CSS-only expander for extra feed items */
.more-toggle { display: none; }
.more-items { display: none; }
.more-toggle:checked ~ .more-items { display: contents; }
.more-label {
  display: inline-flex; align-items: center; gap: 10px; margin: 30px auto 0;
  padding: 13px 24px; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.more-label:hover { border-color: var(--accent); color: var(--accent-text); }
.more-toggle:checked ~ .more-label .more-open { display: none; }
.more-label .more-close { display: none; }
.more-toggle:checked ~ .more-label .more-close { display: inline; }
.more-wrap { display: flex; justify-content: center; }

/* ============================================================
   Section lanes (horizontal scroll — the "browse by section" spine)
   ============================================================ */
.lane { padding-block: 30px; border-bottom: 1px solid var(--line-soft); }
.lane-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.lane-head .band-kicker h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.lane-scroll {
  display: flex; gap: 20px; overflow-x: auto; overflow-anchor: none;
  padding-bottom: 14px; scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.lane-scroll > .card { flex: 0 0 min(300px, 78vw); scroll-snap-align: start; }
.lane-scroll > .card h3 { font-size: 1.2rem; }

/* browse chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper-2); font-size: .82rem; font-weight: 600; color: var(--ink-2);
  min-height: 40px;
}
.chip:hover { border-color: var(--accent); color: var(--accent-text); }
.chip .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }

/* ============================================================
   Sponsors — tiered: featured band + toned-down strip
   Wide horizontal wordmark slots on dark backing chips
   ============================================================ */
.sponsors-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2.5vw,28px); }
.sponsor {
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2);
}
.sponsor:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: inherit; }
.sponsor img {
  width: 100%; aspect-ratio: 3 / 1; object-fit: contain; object-position: center;
  background: var(--chip); border-radius: 8px; padding: 16px 22px;
}
.sponsor-blurb { display: block; color: var(--ink-3); font-size: .86rem; line-height: 1.45; }
.sponsor-blurb:empty { display: none; }

/* toned-down strip (slots 4–11) */
.sponsors-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.sponsors-strip .sponsor { padding: 10px; gap: 0; background: transparent; }
.sponsors-strip .sponsor img { aspect-ratio: 3 / 1; padding: 12px 16px; background: var(--chip); opacity: .82; }
.sponsors-strip .sponsor:hover img { opacity: 1; }
.sponsors-strip .sponsor-blurb { display: none; }   /* toned tier: logo only */
.sponsors-note { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--ink-4); margin-top: 16px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); background: var(--paper-deep); }
.footer-inner {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(36px,5vw,56px) var(--gutter);
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(28px,4vw,48px);
}
.footer-brand p { color: var(--ink-4); font-size: .92rem; line-height: 1.55; max-width: 32ch; margin: 14px 0 18px; }
.foot-col h4 { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; margin-bottom: 14px; }
.foot-col a { display: block; color: var(--ink-3); font-size: .92rem; padding: 6px 0; min-height: 1em; }
.foot-col a:hover { color: var(--accent-text); }
.social { display: flex; gap: 10px; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); }
.social a:hover { color: var(--accent-text); border-color: var(--accent); }
.social svg { width: 19px; height: 19px; }
.footer-legal { border-top: 1px solid var(--line); }
.footer-legal .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 20px; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--ink-4); }

/* ============================================================
   Article / post layout
   ============================================================ */
.post-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.post-hero-media { position: absolute; inset: 0; }
.post-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.post-hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #0b0b0d 4%, rgba(11,11,13,.35) 46%, rgba(11,11,13,.55)); }
.post-hero-inner { position: relative; max-width: var(--wrap); margin: 0 auto; padding: clamp(70px,9vw,130px) var(--gutter) clamp(34px,5vw,56px); min-height: clamp(320px,42vw,480px); display: flex; align-items: flex-end; }
.post-hero-copy { max-width: 40ch; }
.post-hero h1 { color: #f6f6f2; font-size: clamp(2rem,5vw,3.4rem); margin: 16px 0 14px; text-wrap: balance; }
.post-hero .post-standfirst { color: rgba(246,246,242,.86); font-family: var(--serif); font-size: clamp(1.1rem,1.8vw,1.4rem); line-height: 1.45; }
.post-meta { font-family: var(--mono); font-size: .76rem; letter-spacing: .05em; color: rgba(246,246,242,.75); margin-top: 16px; }

.article { max-width: var(--wrap); margin: 0 auto; padding-block: clamp(38px,5vw,64px); }
.article-body {
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);        /* OWN gutter — margin auto is not a mobile gutter */
  font-family: var(--serif);
  font-size: 1.28rem;                    /* large, comfortable reading */
  line-height: 1.72;
  color: var(--ink-2);
}
.article-body > * + * { margin-top: 1.15em; }
.article-body h2 { font-family: var(--sans); font-size: clamp(1.5rem,3vw,2.05rem); line-height: 1.1; margin-top: 1.8em; color: var(--ink); }
.article-body h3 { font-family: var(--sans); font-size: 1.35rem; margin-top: 1.4em; color: var(--ink); }
.article-body p { margin: 0; }
.article-body a:not(.entity-ref) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article-body ul, .article-body ol { padding-left: 1.3em; margin: 0; }
.article-body li { margin-top: .5em; }
.article-body li::marker { color: var(--accent-text); }
.article-body strong { color: var(--ink); font-weight: 700; }
.article-body figure, .article-body .callout, .article-body .pullquote, .article-body .statrow,
.article-body .timeline, .article-body table, .article-body .chart, .article-body .gallery,
.article-body .profile-grid, .article-body .further-grid, .article-body .map-figure, .article-body .blockquote { margin-block: 1.9em; }

/* full-measure escape for wide components inside the reading column */
.article-body .bleed-wide { max-width: none; }

/* ============================================================
   PALETTE_SPEC components
   ============================================================ */

/* --- Text / structure --- */
.lead { font-family: var(--serif); font-size: 1.5rem; line-height: 1.5; color: var(--ink); font-weight: 500; }
.pullquote { border: 0; margin-inline: 0; padding: 0; }
.pullquote p {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.25; color: var(--ink);
  border-left: 4px solid var(--accent); padding: 6px 0 6px 26px; margin: 0; text-wrap: balance;
}
.blockquote { margin-inline: 0; padding: 22px 26px; background: var(--paper-2); border-radius: 12px; border: 1px solid var(--line); }
.blockquote p { font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; margin: 0; color: var(--ink); }
.blockquote cite { display: block; margin-top: 12px; font-family: var(--mono); font-style: normal; font-size: .82rem; letter-spacing: .04em; color: var(--accent-text); }
.callout {
  background: color-mix(in srgb, var(--accent) 12%, var(--paper-2));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 20px 24px;
}
.callout p { margin: 0; font-family: var(--sans); font-size: 1.08rem; line-height: 1.5; color: var(--ink); }
.callout::before { content: "Key takeaway"; display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px; }
.note {
  font-family: var(--sans); font-size: .96rem; line-height: 1.5; color: var(--ink-3);
  padding: 14px 18px 14px 44px; position: relative; background: var(--paper-2); border-radius: 10px; border: 1px solid var(--line);
}
.note::before {
  content: ""; position: absolute; left: 16px; top: 16px; width: 18px; height: 18px;
  background: var(--accent-text);
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
          mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

/* --- Data / comparison --- */
.versus, .datatable { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .98rem; }
.versus th, .versus td, .datatable th, .datatable td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.versus thead th, .datatable thead th { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; }
.datatable tbody tr:hover, .versus tbody tr:hover { background: var(--paper-2); }
.datatable caption, .versus caption { text-align: left; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: var(--ink-4); padding-bottom: 10px; }
.versus { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.versus thead th { background: var(--paper-2); text-align: center; }
.versus thead th:first-child { text-align: left; }
.versus td:not(:first-child), .versus th:not(:first-child) { text-align: center; }
.versus tbody th { font-weight: 600; color: var(--ink); background: var(--paper-2); }
.versus .win { color: var(--accent-text); font-weight: 700; }

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.statblock { border: 1px solid var(--line); border-radius: 12px; padding: 22px 20px; background: var(--paper-2); }
.stat-num { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -.03em; color: var(--accent-text); line-height: 1; font-family: var(--sans); }
.stat-label { display: block; margin-top: 10px; font-size: .9rem; line-height: 1.35; color: var(--ink-3); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: minmax(120px, 210px) 1fr; gap: 20px; padding: 16px 0 18px 26px; border-left: 2px solid var(--line); }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 3px solid var(--paper); }
.t-when { font-family: var(--mono); font-size: .82rem; letter-spacing: .02em; color: var(--accent-text); font-weight: 500; line-height: 1.4; text-wrap: balance; }
.t-what { font-family: var(--sans); font-size: 1rem; line-height: 1.45; color: var(--ink-2); }

/* --- inline SVG charts --- */
.chart { margin: 0; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart figcaption { font-family: var(--mono); font-size: .74rem; letter-spacing: .05em; color: var(--ink-4); margin-top: 14px; text-align: center; }
.chart .bar-rect { fill: var(--accent); }
.chart .bar-track { fill: var(--paper-3); }
.chart .bar-label { fill: var(--ink-3); font-family: var(--sans); font-size: 13px; }
.chart .bar-val { fill: var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 600; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .grid-line { stroke: var(--line-soft); stroke-width: 1; }
.chart .line-path { fill: none; stroke: var(--accent-text); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart .line-dot { fill: var(--accent); }
.chart .line-area { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.chart .donut-track { fill: none; stroke: var(--paper-3); }
.chart .donut-seg { fill: none; }
.chart .donut-center { fill: var(--ink); font-family: var(--sans); font-weight: 700; }

/* --- Media / figures --- */
.article-figure { margin: 0; }
.article-figure img { width: 100%; border-radius: 12px; background: var(--paper-3); }
.article-figure figcaption, .map-figure figcaption { font-family: var(--sans); font-size: .88rem; line-height: 1.4; color: var(--ink-4); margin-top: 12px; padding-left: 16px; border-left: 2px solid var(--accent); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.gallery figcaption { font-family: var(--sans); font-size: .8rem; color: var(--ink-4); margin-top: 8px; }
.map-figure { margin: 0; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--paper-2); }
.map-figure svg { width: 100%; height: auto; display: block; border-radius: 8px; background: var(--paper-3); }

/* --- Cards / references --- */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.profile-card { border: 1px solid var(--line); border-radius: 14px; padding: 24px; background: var(--paper-2); display: flex; flex-direction: column; }
.profile-card .p-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--paper-3); margin-bottom: 16px; }
.profile-card.no-photo::before { content: attr(data-initials); display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 1.8rem; margin-bottom: 16px; }
.profile-card h3 { font-size: 1.3rem; }
.profile-card .p-role { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); margin: 6px 0 12px; }
.profile-card > p { font-family: var(--serif); font-size: 1.02rem; line-height: 1.55; color: var(--ink-3); margin: 0 0 14px; }
.profile-card .p-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.profile-card .p-links a { font-family: var(--mono); font-size: .8rem; color: var(--accent-text); }
.profile-card .p-attr { font-family: var(--mono); font-size: .7rem; color: var(--ink-4); margin-top: 12px; }

.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.org-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); }
.org-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: inherit; }
.org-logo { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 9px; object-fit: contain; background: var(--chip); padding: 8px; }
.org-card.no-logo .org-logo, .org-card .org-logo.no-logo { display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 600; font-size: .9rem; color: var(--accent-text); }
.org-name { display: block; font-weight: 600; font-size: 1rem; line-height: 1.2; }
.org-host { display: block; font-family: var(--mono); font-size: .74rem; color: var(--ink-4); margin-top: 3px; }

.entity-ref { color: var(--accent-text); font-weight: 600; white-space: nowrap; border-bottom: 1px dotted color-mix(in srgb, var(--accent-text) 55%, transparent); }
.entity-ref:hover { border-bottom-style: solid; }

.further-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.further-grid a { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); font-family: var(--sans); font-weight: 600; font-size: 1.02rem; line-height: 1.25; position: relative; }
.further-grid a::after { content: "→"; position: absolute; top: 16px; right: 18px; color: var(--accent-text); }
.further-grid a:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: inherit; }

/* --- Related block at end of posts --- */
.related { border-top: 1px solid var(--line); margin-top: clamp(40px,5vw,64px); }
.related-inner { max-width: var(--measure); margin: 0 auto; padding: clamp(34px,4vw,52px) var(--gutter); }
.related h2 { font-size: 1.4rem; margin-bottom: 20px; }
.related-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.related-links:empty { display: none; }               /* collapses cleanly when empty */
.related-links:empty + .related-empty-hint { display: none; }
.related-links li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); font-weight: 600; font-size: 1.05rem; }
.related-links li a::after { content: "→"; color: var(--accent-text); }
.related-links li a:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: inherit; }

/* ============================================================
   Category index template
   ============================================================ */
.cat-hero { border-bottom: 1px solid var(--line); background:
   radial-gradient(120% 140% at 12% -20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%); }
.cat-hero .wrap { padding-block: clamp(44px,6vw,80px); }
.cat-back { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cat-back:hover { color: var(--accent-text); }
.cat-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin: 18px 0 0; }
.cat-intro { font-family: var(--serif); font-size: clamp(1.15rem,2vw,1.4rem); line-height: 1.5; color: var(--ink-2); max-width: 46ch; margin: 18px 0 0; }
.cat-count { font-family: var(--mono); font-size: .78rem; color: var(--ink-4); margin-top: 20px; }
.cat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(20px,3vw,30px); }
.cat-list > li { min-width: 0; }
.cat-list article { display: flex; flex-direction: column; height: 100%; }
.cat-list .card-media { aspect-ratio: 3/2; }
.cat-list:empty::after { content: "No articles in this section yet."; font-family: var(--mono); font-size: .85rem; color: var(--ink-4); }

/* ============================================================
   Simple content pages (about/contact/404) + forms
   ============================================================ */
.page-hero { border-bottom: 1px solid var(--line); background: radial-gradient(120% 140% at 85% -30%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%); }
.page-hero .wrap { padding-block: clamp(44px,6vw,78px); }
.page-hero .eyebrow { margin-bottom: 14px; }
.page-hero h1 { font-size: clamp(2.3rem,5.5vw,3.6rem); }
.page-body { max-width: var(--measure); margin: 0 auto; padding: clamp(38px,5vw,60px) var(--gutter); font-family: var(--serif); font-size: 1.24rem; line-height: 1.7; color: var(--ink-2); }
.page-body > * + * { margin-top: 1.15em; }
.page-body h2 { font-family: var(--sans); font-size: clamp(1.4rem,3vw,1.9rem); margin-top: 1.7em; color: var(--ink); }
.page-body ul { padding-left: 1.2em; }
.page-body li { margin-top: .55em; }
.page-body li::marker { color: var(--accent-text); }
.page-body strong { color: var(--ink); }

.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); font-family: var(--sans); font-size: 1rem; }
.contact-list .ic { flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, var(--paper-3)); color: var(--accent-text); }
.contact-list .ic svg { width: 20px; height: 20px; }
.contact-list b { display: block; color: var(--ink); }
.contact-list span.d { display: block; color: var(--ink-3); font-size: .92rem; margin-top: 2px; }

.form { display: grid; gap: 16px; font-family: var(--sans); max-width: none; }
.form-row { display: grid; gap: 8px; }
.form label { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.form input, .form textarea, .form select {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; width: 100%;
}
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.form textarea { min-height: 150px; resize: vertical; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px;
  padding: 14px 28px; font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.btn:hover { filter: brightness(1.06); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent-text); }

/* 404 */
.err { min-height: 60vh; display: grid; place-content: center; text-align: center; gap: 18px; padding: 60px var(--gutter); }
.err .code { font-family: var(--mono); font-size: clamp(4rem,14vw,9rem); font-weight: 600; color: var(--accent-text); line-height: 1; }
.err h1 { font-size: clamp(1.8rem,4vw,2.6rem); }
.err p { color: var(--ink-3); max-width: 40ch; margin: 0 auto; }

/* ============================================================
   Styleguide scaffolding
   ============================================================ */
.sg-nav { position: sticky; top: 74px; z-index: 20; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.sg-nav .wrap { display: flex; gap: 10px; flex-wrap: wrap; padding-block: 12px; }
.sg-nav a { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
.sg-nav a:hover { color: var(--accent-text); border-color: var(--accent); }
.sg-section { padding-block: clamp(30px,4vw,52px); border-bottom: 1px solid var(--line-soft); }
.sg-section > .wrap > h2 { font-size: 1.6rem; margin-bottom: 6px; }
.sg-section > .wrap > .sg-meta { font-family: var(--mono); font-size: .74rem; color: var(--ink-4); margin-bottom: 26px; }
.sg-demo { display: grid; gap: 26px; }
.sg-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 12px; }
.sw { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-family: var(--mono); font-size: .72rem; }
.sw .chip-c { height: 70px; }
.sw .lbl { padding: 8px 10px; color: var(--ink-3); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .feed { grid-template-columns: repeat(4, 1fr); }
  .card.lead { grid-column: span 4; }
  .card.reg, .card.small, .card.third { grid-column: span 2; }
  .sponsors-strip { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 18px; }
  .feed { grid-template-columns: 1fr; }
  .card.lead, .card.reg, .card.small, .card.third { grid-column: 1 / -1; }
  .card.lead .card-media { aspect-ratio: 3/2; }
  .sponsors-featured { grid-template-columns: 1fr; }
  .sponsors-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .form .two { grid-template-columns: 1fr; }
  .sg-charts-row { grid-template-columns: 1fr !important; }
  .article-body { font-size: 1.16rem; }
  .post-hero-scrim { background: linear-gradient(0deg, #0b0b0d 20%, rgba(11,11,13,.5)); }
}
@media (max-width: 400px) {
  .sponsors-strip { grid-template-columns: 1fr; }
}

/* motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* pipeline: sponsor link-treatment variety (footprint) */
.sponsor::before{content:none!important;}
.sponsor a.sp-logo{display:contents;}   /* logo link is layout-transparent so Design's img sizing still applies */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.sponsor-blurb a:hover{opacity:.8;}
.sponsor .sp-domain{display:inline-block;margin-top:8px;color:inherit;text-decoration:none;opacity:.75;font-size:.9em;letter-spacing:.02em;}
.sponsor .sp-domain:hover{text-decoration:underline;opacity:1;}

/* op-drawer-unopenable: the burger could never open the menu on this build, and that is also
   why the page was 720px wide at a 360 viewport.
   Markup:  body > input.nav-check#nav-toggle  +  header.site-header > .header-inner > nav.nav
   Design's selectors:  `.nav-check:checked ~ .nav`            (.nav is not a sibling)
                        `.nav-check:checked ~ .header-inner .nav`  (.header-inner is not one either)
   Neither can match, so `.nav{transform:translateX(100%)}` was permanent: the drawer sat
   parked off-canvas forever with its links floating in a swipeable blank band — measured
   docWidth=720 at 360, and taking .nav out of the page dropped the overflow to 0.
   ⚠️ FIRST ATTEMPT WAS WRONG: I kept Design's slide transition and stopped the parked drawer
   widening the page with `/* ⚠️ scoped to phone widths on the operator's instruction: "We basically want to
     desktop grid design to stay as-is ... We are strictly re-working how mobile is
     displaying." the parked off-canvas drawer only exists at phone widths, so the clip has no business at desktop. */
@media (max-width:900px){html,body{overflow-x:clip}}`. Headless Chrome measured that as
   perfect — overflow 0, drawer 390x746 on a real click — but `overflow:clip` can also clip a
   position:fixed child outright, and on the operator's browser the menu simply never appeared
   ("something shrinks a bit but i see no menu"). A fix that depends on one engine's clipping
   behaviour for a fixed element is not a fix.
   So the closed drawer is now not rendered at all: `display:none` closed, `display:flex` open,
   which is what Design already sets at this width. Nothing needs clipping, the page cannot be
   widened by a box that does not exist, and it behaves the same in every engine. The cost is
   Design's 240ms slide, which never ran anyway because the menu could not open. */

@media (max-width: 900px) {
  .nav-check:checked ~ .site-header .nav { transform: translateX(0); }
}

/* op-drawer-containing-block: the real reason the drawer never worked.
   `.site-header{position:sticky;backdrop-filter:blur(12px)}` — and backdrop-filter makes an
   element the CONTAINING BLOCK for its position:fixed descendants. So the drawer's
   `inset:74px 0 0 0` resolved against the 124px header strip instead of the viewport:
   measured box 390x50 at a 390 viewport, with `overflow-y:auto` clipping the rest, which is
   why opening the menu showed one item ("Players") floating over the hero and nothing else.
   Dropping the blur for phone widths only hands the drawer back to the viewport. The blur is
   decoration on a strip that is already 90% opaque; the header keeps its background, border,
   sticky behaviour and z-index, and desktop keeps the blur. */
@media (max-width: 900px) {
  .site-header { backdrop-filter: none; }
}

/* op-drawer-row-width: with the drawer finally open, each row was only as wide as its own
   label — `.nav-link{display:inline-flex}` from the desktop bar still applied, so the
   `border-bottom` rule Design wrote for the phone list stopped under the text and the
   `justify-content:space-between` it sets there had nothing to space apart. Made a block-level
   flex row at phone widths only, which is what that pair of declarations assumes. */
@media (max-width: 900px) {
  .nav-link { display: flex; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .nav-check:checked ~ .site-header .nav { display: flex; }
}

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   1996px at 390, 23% of the whole page. Two columns bring it to
   1018px (49% shorter). Checked before writing: no new overflow, smallest mark still
   130px wide, longest blurb 5 lines, tile heights 105-240px.
   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 (.sponsors-featured, .sponsors-strip), 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){
  .sponsors-featured{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:28px!important}
    .sponsors-featured > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsors-featured > * *{min-width:0!important;max-width:100%}
    .sponsors-featured img,.sponsors-featured svg{max-width:100%;height:auto}
  .sponsors-strip{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:28px!important}
    .sponsors-strip > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsors-strip > * *{min-width:0!important;max-width:100%}
    .sponsors-strip img,.sponsors-strip svg{max-width:100%;height:auto}

}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 497px of tier across
   3 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsors-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:60px!important;min-height:0!important;overflow:hidden!important}
}

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

/* op-name-wrap: on the live page a brand name or domain label ran out of its money tile (one unbreakable word in a narrow tile, measured 2026-09-23). The name wraps instead (a brand on two lines is better than half a word). Money tiles only. */
[data-partner] .sp-domain{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip!important}
/* op-name-wrap:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0px;}
.card h2:where(.rt-h3){margin: 14px 0px 8px; font-size: 1.3rem; line-height: 1.14;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.submenu-link > span.submenu-thumb > img,
  article.card > a.card-media > img,
  article.card.lead > a.card-media > img,
  article.card.small > a.card-media > img,
  article.card.third > a.card-media > img,
  div.article-body > figure.article-figure > img,
  div.org-grid > a.org-card > img.org-logo,
  div.profile-grid > div.profile-card > img.p-photo,
  header.bleed.post-hero > div.post-hero-media > img,
  section.bleed.hero > div.hero-media > img){height:auto}
/* op-img-dims:end */

/* op-domain-line-fit — the partner's domain line broke mid-word wherever its column was narrower than the domain.
   The tile that carries one is the size container; the domain scales down only as far as the column needs
   (12px floor), and a break that is still needed falls at the dot (<wbr>), never inside the name */
.sponsor:has(> .sp-domain){container-type:inline-size}
.sponsor .sp-domain .sp-dn{font-size:max(12px,min(1em,100cqi / var(--n)))}
/* op-domain-line-fit:end */
.sponsors-featured > [data-partner] img{background:transparent!important}.sponsors-strip > [data-partner] img{background:transparent!important}