/* 2mjeux.com — one stylesheet.
   Palette: 5 members, each with a job.
   --ground  #0B0B0D  the dark room everything sits in
   --ink     #F4F1EA  body and headline text
   --accent  #D6006E  magenta — the site's own colour, filled areas + marks
   --second  #1B4DFF  blue  — the second saturated member, used as whole bands
   --flag    #F0B400  amber — caveats and notes only
   (--accent-ink / --second-ink are the same hues lifted for 15px text on the ground.) */

:root{
  --ground:#0B0B0D;
  --ground-2:#141319;
  --panel:#1D1B21;
  --line:#26242A;
  --line-2:#302E35;

  --ink:#F4F1EA;
  --ink-2:#BEB9AF;
  --ink-3:#8E8A81;
  --ink-4:#6C6860;

  --accent:#D6006E;
  --accent-ink:#FF2E8B;
  --second:#1B4DFF;
  --second-ink:#7E97FF;
  --flag:#F0B400;

  --display:Chivo, "Helvetica Neue", Arial, sans-serif;
  --body:Figtree, system-ui, -apple-system, Segoe UI, sans-serif;

  --gut:clamp(20px, 4vw, 56px);
  --measure:72ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--accent-ink);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0}
table{border-collapse:collapse;width:100%}
figure{margin:0}
blockquote{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* ── crop marks: the site's one drawn device, used on figures and panels ── */
.mark{color:var(--ink);opacity:.42;position:absolute;width:26px;height:26px}
.mark svg{width:100%;height:100%;display:block}
.mk-tl{top:14px;left:14px}.mk-tr{top:14px;right:14px}
.mk-bl{bottom:14px;left:14px}.mk-br{bottom:14px;right:14px}

/* ── kickers, labels ── */
.kicker{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:10px}
.kicker::after{content:"";height:1px;width:clamp(16px,4vw,44px);background:var(--line-2);flex:none}
.kicker svg{width:16px;height:16px;flex:none;color:var(--accent-ink)}
.kicker--blue svg{color:var(--second-ink)}
.kicker--quiet{color:var(--ink-4)}
.kicker--quiet svg{color:var(--ink-3)}
.eyebrow{font-family:var(--display);font-weight:900;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4)}

/* ── icons: one browser-window frame per section, drawn on one grid ── */
.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}

/* ══ HEADER ══════════════════════════════════════════════════ */
.masthead{border-bottom:1px solid var(--line);padding:22px var(--gut) 0}
.mh-top{max-width:1620px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:18px 40px;flex-wrap:wrap;padding-bottom:16px}
.wordmark{display:flex;align-items:flex-end;gap:clamp(11px,1.3vw,18px);color:var(--ink)}
.wordmark:hover{color:var(--ink)}
.mh-top .crt{height:clamp(30px,4.75vw,69px);width:auto;color:var(--accent);flex:none;margin-bottom:2px}
.wm-type{font-family:var(--display);font-weight:900;font-size:clamp(42px,6.6vw,96px);line-height:.78;letter-spacing:-.05em}
.wm-type .two{color:var(--accent)}
.mh-line{font-size:clamp(15px,1.3vw,18px);line-height:1.4;color:var(--ink-3);max-width:32ch;padding-bottom:10px}
.mh-extra{display:flex;gap:22px;flex-wrap:wrap;padding-bottom:12px}
.mh-extra a{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.07em;color:var(--ink-3);border-bottom:2px solid transparent;padding-bottom:2px}
.mh-extra a:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* the ledger: one row per section; the second level stays in the HTML and folds away */
.ledger{max-width:1620px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,5vw,80px);align-items:start;border-top:1px solid var(--line)}
.ldg-row{border-bottom:1px solid var(--line)}
.ldg-row:last-child{border-bottom:1px solid var(--line)}
@media (max-width:820px){.ledger{grid-template-columns:1fr}}
.ldg-sect{display:flex;align-items:center;gap:12px;padding:14px 4px 14px 0;cursor:pointer;list-style:none}
.ldg-sect::-webkit-details-marker{display:none}
.ldg-sect::marker{content:""}
.ldg-sect svg.ico{width:16px;height:16px;flex:none;color:var(--accent-ink)}
.ldg-name{font-family:var(--display);font-weight:900;font-size:15px;line-height:1.12;letter-spacing:-.012em;color:var(--ink)}
.ldg-count{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.ldg-chev{margin-left:auto;color:var(--ink-4);display:block}
.ldg-chev svg{width:13px;height:9px;display:block;transition:transform .18s ease}
.ldg-row[open] .ldg-chev svg{transform:rotate(180deg)}
.ldg-sect:hover .ldg-name{color:var(--accent-ink)}
.ldg-items{display:block;padding:2px 0 18px 28px}
.ldg-items a{display:flex;align-items:baseline;gap:14px;padding:9px 10px 9px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.35;color:var(--ink-2)}
.ldg-items a:first-child{border-top:0;padding-top:2px}
.ldg-items a:hover{color:var(--accent-ink)}
.ldg-i{font-family:var(--display);font-weight:900;font-size:10.5px;letter-spacing:.12em;color:var(--ink-4);flex:none;width:20px}
.ldg-items a:hover .ldg-i{color:var(--accent-ink)}
.ldg-all .ldg-t{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.ldg-all{color:var(--ink)}
.ldg-all .ldg-i{color:var(--accent-ink)}
@media (max-width:760px){.ldg-items{padding-left:0}}

/* compact bar for inner pages */
.bar{border-bottom:1px solid var(--line);padding:16px var(--gut);position:relative}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;max-width:1620px;margin:0 auto}
.bar .wm-small{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:900;font-size:27px;letter-spacing:-.038em;color:var(--ink)}
.bar .wm-small .crt{color:var(--accent);flex:none}
.bar nav{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.bar nav a{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.03em;color:var(--ink-3);padding-bottom:2px;border-bottom:2px solid transparent}
.bar nav a svg{width:15px;height:15px;flex:none}
.bar nav a:hover{color:var(--ink)}
.bar nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}

/* ══ HOMEPAGE BANDS ══════════════════════════════════════════ */
.band{border-bottom:1px solid var(--line)}
.band-in{max-width:1620px;margin:0 auto;padding:0 var(--gut)}

/* lead: full-bleed photograph, statement over it */
.lead-band{position:relative;background:var(--ground-2)}
.lead-band img{width:100%;height:clamp(420px,62vw,760px);object-fit:cover;object-position:center 40%;filter:saturate(1.05)}
.lead-veil{position:absolute;inset:0;background:linear-gradient(178deg,rgba(11,11,13,.62) 0%,rgba(11,11,13,.18) 34%,rgba(11,11,13,.82) 74%,rgba(11,11,13,.97) 100%)}
.lead-copy{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut) clamp(28px,4vw,52px)}
.lead-copy-in{max-width:1620px;margin:0 auto}
.lead-statement{font-family:var(--display);font-weight:900;font-size:clamp(38px,6.4vw,86px);line-height:.94;letter-spacing:-.04em;max-width:19ch;margin:0 0 22px}
.lead-read{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:34px;align-items:end;border-top:1px solid rgba(244,241,234,.28);padding-top:20px}
.lead-read h1{font-size:clamp(26px,3vw,40px);line-height:1.02;margin:10px 0 0}
.lead-read p{font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.lead-credit{position:absolute;right:var(--gut);top:18px;font-size:11px;color:rgba(244,241,234,.55);letter-spacing:.03em}

/* statement band: big type + plate figure */
.two-up{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);padding-block:clamp(48px,6vw,86px);align-items:center}
.statement{font-family:var(--display);font-weight:900;font-size:clamp(34px,4.6vw,62px);line-height:.98;letter-spacing:-.035em;margin:16px 0 20px}
.statement em{font-style:normal;color:var(--accent-ink)}
/* three seconds under the lead statement */
.seconds{display:grid;gap:0;margin-top:26px;border-top:1px solid var(--line)}
.seconds a{display:grid;grid-template-columns:56px minmax(0,1fr) 34px;gap:0 18px;padding:20px 14px 20px 0;border-bottom:1px solid var(--line);align-items:center;color:var(--ink)}
.seconds a:hover{background:rgba(214,0,110,.07);padding-left:14px;padding-right:0}
.seconds .n{font-family:var(--display);font-weight:900;font-size:26px;line-height:1;letter-spacing:-.03em;color:var(--ink-4);align-self:start;padding-top:2px}
.seconds a:hover .n{color:var(--accent-ink)}
.seconds .t{font-family:var(--display);font-weight:900;font-size:clamp(19px,1.9vw,23px);line-height:1.08;letter-spacing:-.022em;color:var(--ink);display:block}
.seconds .d{font-size:14.5px;color:var(--ink-3);line-height:1.5;margin-top:6px;display:block;max-width:62ch}
.seconds .arw{color:var(--ink-4);display:block}
.seconds .arw svg{width:26px;height:14px;display:block;transition:transform .18s ease}
.seconds a:hover .arw{color:var(--accent-ink)}
.seconds a:hover .arw svg{transform:translateX(6px)}

/* the date band */
.numerals{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(30px,5vw,66px);align-items:end;padding-block:clamp(52px,6.5vw,92px)}
.num-svg{width:100%;height:auto;color:var(--ink);display:block}
.num-ghost{fill:var(--accent)}
.num-rule{height:3px;background:var(--second);margin-top:18px}
.num-cap{font-size:14.5px;line-height:1.5;color:var(--ink-3);margin-top:12px;max-width:56ch}
.num-copy h2{font-size:clamp(26px,3vw,38px);line-height:1.02;margin:14px 0 14px}
.num-copy > p{font-size:16.5px;line-height:1.6;color:var(--ink-2);margin-bottom:12px}
.num-copy .num-sub{font-size:14.5px;color:var(--ink-4);margin-bottom:18px}
.more-link{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);border-bottom:2px solid rgba(255,46,139,.35);padding-bottom:4px}
.more-link svg{width:24px;height:13px;transition:transform .18s ease}
.more-link:hover{color:var(--ink);border-bottom-color:var(--ink)}
.more-link:hover svg{transform:translateX(5px)}

/* blue area band — deep ground, the bright member as the rule rather than the field */
.area{background:#0C1A55;color:var(--ink);border-top:4px solid var(--second)}
.area .band-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(26px,4vw,60px);padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(44px,5vw,72px);flex-wrap:wrap}
.area h2{font-size:clamp(30px,4.4vw,56px);line-height:1;letter-spacing:-.035em;color:var(--ink)}
.area .area-note{flex:none;width:min(330px,100%);font-size:15.5px;line-height:1.55;color:#B9C4EE}
.area .area-note a{color:var(--ink);font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;display:inline-block;margin-top:12px;border-bottom:2px solid rgba(244,241,234,.45)}
.area .area-note a:hover{border-bottom-color:var(--ink)}

/* strip band */
.strip-head{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(24px,4vw,54px);align-items:end;padding-block:clamp(44px,5vw,78px) 24px}
.strip-head h2{font-size:clamp(26px,3.2vw,40px);line-height:1.02;letter-spacing:-.03em}
.strip-head p{font-size:16.5px;line-height:1.6;color:var(--ink-3);max-width:64ch}
.strip-figure{position:relative}
.strip-figure img{width:100%;height:clamp(230px,26vw,340px);object-fit:cover}
.strip-cap{max-width:1620px;margin:0 auto;padding:14px var(--gut) clamp(44px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px);gap:28px}
.strip-cap p{font-size:15px;line-height:1.5;color:var(--ink)}
.strip-cap .credit{font-size:11.5px;color:var(--ink-4);text-align:right}

/* quiet closing line */
.quiet{padding-block:clamp(40px,5vw,68px);display:flex;align-items:baseline;justify-content:space-between;gap:26px;flex-wrap:wrap}
.quiet h2{font-size:clamp(22px,2.4vw,28px)}
.quiet p{font-size:15.5px;color:var(--ink-3);max-width:52ch}

/* ══ SUPPORTERS ══════════════════════════════════════════════
   One tile size for every slot, constant width, never grows.   */
.supporters{padding:clamp(38px,4.4vw,60px) 0}
.sup-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.sup-head h2{font-size:20px}
.sup-intro{font-size:14.5px;color:var(--ink-3);max-width:70ch;margin-bottom:24px}
.sup-run{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sup-run + .eyebrow{margin-top:30px;display:block}
.sponsor{display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--ground-2);border:1px solid var(--line);color:var(--ink)}
.sponsor:hover{border-color:var(--accent);color:var(--ink)}
.sponsor img{width:100%;height:46px;max-height:46px;object-fit:contain;object-position:left center;background:#000;padding:5px 8px;border:1px solid var(--line-2)}
.sponsor-name{font-family:var(--display);font-weight:700;font-size:14px;line-height:1.25;letter-spacing:.01em}
.sponsor-blurb{font-size:13px;line-height:1.45;color:var(--ink-3)}
@media (max-width:980px){.sup-run{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.sup-run{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:430px){.sup-run{grid-template-columns:minmax(0,1fr)}}

/* ══ ARTICLE ═════════════════════════════════════════════════ */
.art-top{padding:clamp(34px,4.5vw,62px) var(--gut) 0;max-width:1620px;margin:0 auto}
.art-title{font-size:clamp(34px,5.4vw,74px);line-height:.96;letter-spacing:-.042em;margin:20px 0 0;max-width:24ch}
.art-sub{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.8vw,22px);line-height:1.22;letter-spacing:-.01em;color:var(--ink-2);margin-top:18px;max-width:44ch}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 0;align-items:center;margin-top:30px;padding-bottom:28px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-4);letter-spacing:.01em}
.art-meta span + span::before{content:"";display:inline-block;width:1px;height:11px;background:var(--line-2);margin:0 18px;vertical-align:-1px}
.art-meta .sect{display:flex;align-items:center;gap:7px;color:var(--ink-3)}
.art-meta .sect svg{width:15px;height:15px}

.art-hero{position:relative;margin:0 0 clamp(38px,4.8vw,64px)}
.art-hero img{width:100%;height:clamp(280px,42vw,560px);object-fit:cover}
.art-hero figcaption{max-width:1620px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,220px);gap:26px}
.art-hero figcaption .cap{font-size:15.5px;line-height:1.5;color:var(--ink);border-top:1px solid var(--line);padding-top:15px}
.art-hero figcaption .credit{font-size:11.5px;color:var(--ink-4);text-align:right;border-top:1px solid var(--line);padding-top:15px}

.art-body{max-width:calc(var(--measure) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut) 20px}
.art-body > p{font-size:18.5px;line-height:1.74;color:var(--ink-2);margin:0 0 27px}
.art-body > p strong{color:var(--ink);font-weight:600}
.art-body h2{font-size:clamp(25px,2.7vw,33px);line-height:1.06;margin:54px 0 20px;padding-top:28px;border-top:1px solid var(--line)}
.art-body h3{font-size:20px;margin:36px 0 14px}
.art-body a{border-bottom:1px solid rgba(255,46,139,.4)}
.art-body a:hover{border-bottom-color:var(--ink)}
.art-body .drop::first-letter{font-family:var(--display);font-weight:900;font-size:4.1em;line-height:.78;float:left;padding:.06em .12em 0 0;color:var(--accent-ink)}

/* full-width interruptions inside a measured article */
.breakout{max-width:1620px;margin:clamp(46px,5.5vw,76px) auto;padding:0 var(--gut)}
.breakout > .article-figure{margin:0}
.breakout + .art-body{padding-top:4px}

/* ── figure system: three treatments, one drawing system ── */
/* 1 · plate — the picture sits on an accent mat */
.article-figure{margin:38px 0}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{margin-top:16px;font-size:15px;line-height:1.5;color:var(--ink);border-top:1px solid var(--line);padding-top:13px}
.article-figure figcaption .credit{display:block;font-size:11.5px;color:var(--ink-4);margin-top:6px;letter-spacing:.03em}
.fig-plate{background:var(--accent);padding:14px}
.fig-plate + figcaption{margin-top:15px}
.figure--plate figcaption{border-top-color:var(--accent)}
/* 2 · bleed — breaks the measure */
.figure--bleed{position:relative}
.figure--bleed img{height:clamp(240px,34vw,460px);object-fit:cover}
.figure--bleed figcaption{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,220px);gap:24px;border-top:1px solid var(--line)}
.figure--bleed figcaption .credit{text-align:right;margin-top:0}
/* 3 · inset — small, in the column, hairline frame, hanging caption */
.figure--inset{max-width:340px;float:right;margin:8px 0 22px 30px}
.figure--inset img{border:1px solid var(--line-2);padding:9px}
.figure--inset figcaption{font-size:13.5px;border-top:1px solid var(--line-2);padding-top:9px;margin-top:11px;color:var(--ink-2)}
@media (max-width:700px){.figure--inset{float:none;max-width:100%;margin:22px 0}}

/* ── components ── */
.lead{font-size:21px;line-height:1.5;color:var(--ink);margin:0 0 28px}
.pullquote{margin:40px 0;padding:0 0 0 28px;border-left:4px solid var(--second)}
.pullquote p{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.3vw,27px);line-height:1.24;letter-spacing:-.02em;color:var(--ink)}
.blockquote{margin:32px 0;padding:24px 26px;background:var(--ground-2);border-top:2px solid var(--accent)}
.blockquote p{font-size:18px;line-height:1.6;color:var(--ink)}
.blockquote cite{display:block;margin-top:12px;font-style:normal;font-size:13.5px;color:var(--ink-3)}
.callout{margin:32px 0;padding:22px 24px;background:rgba(27,77,255,.11);border:1px solid rgba(126,151,255,.34)}
.callout p{font-size:17px;line-height:1.6;color:var(--ink)}
.note{font-size:15px;line-height:1.6;color:var(--ink-2);margin:26px 0;padding-left:18px;border-left:3px solid var(--flag)}

/* notes-for-design material, rendered as full-width interruptions */
.notes-panel{border-top:2px solid var(--ink);padding-top:22px}
.notes-panel .np-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.notes-panel h2{font-size:clamp(21px,2.3vw,26px);border:0;padding:0;margin:0}
.notes-panel .np-tag{font-family:var(--display);font-weight:900;font-size:11px;letter-spacing:.2em;color:var(--accent-ink);text-transform:uppercase}
.deflist{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;background:transparent;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.deflist > div{background:var(--ground);padding:18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.deflist dt,.deflist .dt{font-family:var(--display);font-weight:900;font-size:15.5px;line-height:1.2;color:var(--ink);margin-bottom:7px;display:block}
.deflist dd,.deflist .dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-3)}

/* timeline — a real spine with ticks; labels can be long multi-word phrases */
.timeline{list-style:none;padding:0 0 4px;margin:0;position:relative;display:grid;gap:0}
.timeline::before{content:"";position:absolute;left:5px;top:10px;bottom:16px;width:1px;background:var(--line-2)}
.timeline li{display:grid;grid-template-columns:minmax(130px,180px) minmax(0,1fr);gap:10px 24px;padding:14px 0;position:relative}
.timeline li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:11px;background:var(--accent);border:2px solid var(--ground);border-radius:50%;box-sizing:border-box}
.timeline li::after{content:"";position:absolute;left:11px;top:24px;width:14px;height:1px;background:var(--line-2)}
.timeline .t-when{font-family:var(--display);font-weight:900;font-size:14.5px;line-height:1.25;letter-spacing:.01em;color:var(--ink);padding-left:32px}
.timeline .t-what{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
@media (max-width:640px){
  .timeline li{grid-template-columns:1fr;gap:5px}
  .timeline .t-what{padding-left:32px}
}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.statblock{background:var(--ground-2);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:8px}
.stat-num{font-family:var(--display);font-weight:900;font-size:clamp(30px,3.6vw,44px);line-height:.9;letter-spacing:-.04em;color:var(--accent-ink)}
.stat-label{font-size:14px;line-height:1.45;color:var(--ink-3)}

.datatable,.versus{font-size:15.5px}
.datatable th,.versus th{font-family:var(--display);font-weight:900;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);text-align:left;padding:0 22px 12px 0;border-bottom:1px solid var(--line);vertical-align:bottom}
.datatable td,.versus td{padding:15px 22px 15px 0;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:top;line-height:1.5}
.datatable tr td:first-child,.versus tr td:first-child{font-family:var(--display);font-weight:700;color:var(--ink)}
.datatable th:last-child,.datatable td:last-child,.versus th:last-child,.versus td:last-child{padding-right:0}
.versus td:first-child{width:30%}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

.chart{margin:30px 0}
.chart svg{width:100%;height:auto;display:block;color:var(--ink)}
.chart figcaption{margin-top:14px;font-size:14.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:10px}
.chart .c-bar{fill:var(--accent)}
.chart .c-bar-2{fill:var(--second)}
.chart .c-axis{stroke:var(--line-2);stroke-width:1}
.chart .c-label{font-family:var(--body);font-size:11px;fill:var(--ink-3)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.gallery figure{display:flex;flex-direction:column}
.gallery img{aspect-ratio:16/10;object-fit:cover;width:100%}
.gallery figcaption{font-size:13px;line-height:1.45;color:var(--ink-3);margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.profile-card{background:var(--ground-2);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:9px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:5px}
.profile-card h3{font-size:19px;line-height:1.12}
.profile-card .p-role{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink)}
.profile-card p{font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.profile-card .p-links{margin-top:auto;padding-top:10px;font-size:13.5px}
.profile-card.no-photo{border-left:3px solid var(--accent)}
.profile-card .p-attr{font-size:11.5px;color:var(--ink-4)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.org-card{display:flex;align-items:center;gap:14px;background:var(--ground-2);border:1px solid var(--line);padding:14px 16px;color:var(--ink);min-height:76px}
.org-card:hover{border-color:var(--accent);color:var(--ink)}
.org-card .org-logo{width:44px;height:44px;object-fit:contain;flex:none;background:#000}
.org-card.no-logo{border-left:3px solid var(--second)}
.org-card .org-name{font-family:var(--display);font-weight:900;font-size:15px;line-height:1.15;display:block}
.org-card .org-host{font-size:12.5px;color:var(--ink-4);display:block;margin-top:3px;word-break:break-word}
.entity-ref{overflow-wrap:anywhere;border-bottom:1px solid rgba(255,46,139,.4)}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.further-grid a{background:var(--ground);padding:24px;display:flex;flex-direction:column;gap:10px;font-family:var(--display);font-weight:900;font-size:17.5px;line-height:1.15;color:var(--ink);min-height:124px}
.further-grid a:hover{background:var(--ground-2);color:var(--accent-ink)}
.further-grid a .fg-sect{font-family:var(--body);font-weight:400;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);margin-top:auto}

.related-links{list-style:none;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.related-links li{border-bottom:1px solid var(--line)}
.related-links a{display:block;padding:17px 0;font-family:var(--display);font-weight:900;font-size:17px;line-height:1.2;color:var(--ink)}
.related-links a:hover{color:var(--accent-ink)}
.related-links:empty{display:none}

/* ══ CATEGORY / ARCHIVE ══════════════════════════════════════ */
.cat-open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);align-items:stretch;border-bottom:1px solid var(--line)}
.cat-open-copy{padding:clamp(38px,5vw,74px) clamp(24px,4vw,56px)}
.cat-open h1{font-size:clamp(32px,4.6vw,62px);line-height:.96;margin:18px 0 20px}
.cat-open p{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:52ch}
.cat-open img{width:100%;height:100%;min-height:300px;object-fit:cover}
@media (max-width:880px){.cat-open{grid-template-columns:1fr}.cat-open img{min-height:220px}}

.cat-list{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.cat-list li{border-bottom:1px solid var(--line)}
.cat-list > li > a{display:grid;grid-template-columns:minmax(0,52px) minmax(0,1fr) minmax(0,32%);gap:8px 28px;padding:24px 0;color:var(--ink);align-items:start}
.cat-list > li > a:hover{background:rgba(214,0,110,.06)}
.cat-list .num{font-family:var(--display);font-weight:900;font-size:12.5px;color:var(--accent-ink);letter-spacing:.08em;padding-top:5px}
.cat-list .ttl{font-family:var(--display);font-weight:900;font-size:clamp(20px,2.3vw,27px);line-height:1.08;letter-spacing:-.025em}
.cat-list .dek{font-size:15px;line-height:1.55;color:var(--ink-3)}
@media (max-width:760px){.cat-list > li > a{grid-template-columns:36px 1fr}.cat-list .dek{grid-column:2}}

.arch-group{padding:clamp(34px,4vw,56px) 0;border-bottom:1px solid var(--line)}
.arch-group:last-child{border-bottom:0}
.arch-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.arch-head h2{font-size:clamp(22px,2.5vw,28px)}
.arch-head svg{width:19px;height:19px;color:var(--accent-ink)}

/* ══ FOOTER ══════════════════════════════════════════════════ */
footer.site{border-top:1px solid var(--line);padding:clamp(34px,4vw,48px) var(--gut) 52px}
.foot-in{max-width:1620px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(26px,4vw,60px);align-items:start}
.foot-brand{display:flex;gap:18px;align-items:flex-start}
.foot-brand .crt{color:var(--accent);flex:none}
.foot-brand .wm{font-family:var(--display);font-weight:900;font-size:27px;letter-spacing:-.038em;line-height:1}
.foot-brand .wm .two{color:var(--accent)}
.foot-brand p{font-size:14.5px;line-height:1.55;color:var(--ink-3);margin-top:11px;max-width:62ch}
.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:24px 30px;font-size:13.5px}
.foot-col{display:flex;flex-direction:column;gap:4px}
.foot-head{font-family:var(--display);font-weight:900;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);padding-bottom:9px;margin-bottom:3px;border-bottom:1px solid var(--line)}
.foot-links a{color:var(--ink-3);padding:2px 0}
.foot-links a:hover{color:var(--ink)}
@media (max-width:880px){.foot-in{grid-template-columns:1fr}}

/* ── shared responsive collapses ── */
@media (max-width:1080px){
  .art-hero figcaption .credit,.figure--bleed figcaption .credit{border-top:0;padding-top:4px}
  .two-up,.numerals,.lead-read,.strip-head,.strip-cap,.art-hero figcaption,.figure--bleed figcaption{grid-template-columns:1fr}
  .strip-cap .credit,.art-hero figcaption .credit,.figure--bleed figcaption .credit{text-align:left}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .art-body > p{font-size:17.5px}
  .lead-read h1{font-size:26px}
}

/* CSS-only expander for long lists */
.expander{border-top:1px solid var(--line)}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .more{display:none}
.expander input:checked ~ .more{display:block}
.expander label{display:inline-block;margin-top:14px;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);cursor:pointer;border-bottom:1px solid rgba(255,46,139,.4)}
.expander input:checked ~ label{color:var(--ink-4)}
.expander input:checked ~ label .lbl-open{display:none}
.expander label .lbl-shut{display:none}
.expander input:checked ~ label .lbl-shut{display:inline}

code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--panel);padding:.1em .34em;border-radius:2px;color:var(--ink);overflow-wrap:anywhere}

/* ── mobile: label type a notch up, tap targets a notch taller ── */
@media (max-width:560px){
  .eyebrow,.foot-head,.ldg-count{font-size:12px;letter-spacing:.14em}
  .ldg-i{font-size:11.5px;width:24px}
  .art-meta{font-size:14px}
  .art-meta span + span::before{margin:0 12px}
  .mh-extra{gap:18px}
  .mh-extra a{padding:12px 0;font-size:13px}
  .bar nav{gap:2px 18px}
  .bar nav a{padding:12px 0;font-size:13.5px}
  .foot-links a{padding:12px 0;font-size:14px}
  .ldg-items a{padding:12px 8px 12px 0}
  .ldg-items a:first-child{padding-top:14px;padding-bottom:14px}
  .ldg-sect{padding:16px 4px 16px 0}
  .seconds a{grid-template-columns:44px minmax(0,1fr);row-gap:6px}
  .seconds .arw{display:none}
  .strip-cap .credit,.art-hero figcaption .credit{text-align:left}
  .lead-statement{font-size:clamp(30px,9vw,40px)}
  .art-body > p{font-size:17.5px;line-height:1.7}
  .datatable th,.versus th{font-size:10.5px}
  .datatable td,.versus td{padding-right:14px}
  .num-copy h2{font-size:26px}
  .article-figure figcaption .credit,.art-hero figcaption .credit,.strip-cap .credit,.figure--bleed figcaption .credit,.profile-card .p-attr{font-size:12.5px}
  .area .area-note a,.more-link{padding-block:12px;border-bottom:0;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-mark-pad: the mark keeps the height Design declared AND the inset Design drew.
   border-box stops width:100%+padding overflowing the tile; the box grows by the
   vertical padding and border so the artwork is not shrunk to pay for the inset. */
.sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!important;height:58px!important;max-height:58px!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

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

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1668px at 390, 26% of the whole page. Two columns bring it to
   886px (47% shorter). Checked before writing: no new overflow, smallest mark still
   138px wide, longest blurb 3 lines, tile heights 116-180px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.sup-run), 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-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sup-run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-run > * *{min-width:0!important;max-width:100%}
    .sup-run img,.sup-run svg{max-width:100%;height:auto}
  .sup-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 784px (94 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width calc(var(--measure) + 2 * var(--gut)) (declared in .art-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  main div.art-body{max-width:min(962px, 100%)!important}
}
@media (min-width:1600px){
  main div.art-body{max-width:min(clamp(962px, 66.806vw, 1154px), 100%)!important}
  main div.art-body > :is(p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.seconds a{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-hover-pad */
.cat-list > li > a{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.art-body > figure.article-figure.figure--inset > img,
  div.breakout > figure.article-figure.figure--bleed > img,
  figure.article-figure.figure--plate > div.fig-plate > img,
  main > div.cat-open > img,
  main > figure.art-hero > img,
  main > section.band.lead-band > img,
  section.band > div.strip-figure > img){height:auto}
/* op-img-dims:end */
.sup-run > [data-partner] img{background:transparent!important}
.sup-run.sup-run > [data-partner][data-partner] img{border:0!important}