/* proadn.com — "The Register"
   Palette roles:
     --ground  #DCE3E6  page ground (cool pale blue-grey)
     --paper   #EFF3F4  panels, reading ground
     --ink     #101416  type, dark bands
     --accent  #B0125C  magenta — the register mark, bands, tabs
     --accent-2 #5E7500 olive-chartreuse — the second saturated member, panels
   Type: Zilla Slab (display/structure) · Spectral (prose) */

:root{
  --ground:#DCE3E6;
  --paper:#EFF3F4;
  --ink:#101416;
  --ink-2:#2A3134;
  --ink-3:#5A6468;
  --rule:#B7C2C6;
  --rule-2:#C3CCD0;
  --accent:#B0125C;
  --accent-soft:#F2D8E3;
  --accent-2:#5E7500;
  --accent-2-fill:#6F8A00;
  --accent-2-soft:#E4E9CE;
  --slab:"Zilla Slab",Georgia,serif;
  --prose:"Spectral",Georgia,serif;
  --measure:720px;
  --plate:1180px;
  --wide:1560px;
  --pad:clamp(18px,4vw,42px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--prose);font-size:19px;line-height:1.65;
  font-variant-numeric:oldstyle-nums;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--slab);font-weight:700;letter-spacing:-0.02em;line-height:1.08;margin:0}
table{border-collapse:collapse;width:100%}
figure{margin:0}
hr{border:0;border-top:1px solid var(--rule);margin:2.4rem 0}
::selection{background:var(--accent);color:var(--paper)}

.wrap{max-width:var(--wide);margin:0 auto;padding-inline:var(--pad)}
.plate{max-width:var(--plate);margin:0 auto;padding-inline:var(--pad)}
.measure{max-width:var(--measure);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:99}

/* ---------- device: brackets, numerals, icons ---------- */
.brk{flex:none;color:var(--accent)}
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-0.18em;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico-lg{width:30px;height:30px}
.regno{font-family:var(--slab);font-weight:600;font-variant-numeric:lining-nums;
  letter-spacing:0.04em;color:var(--accent)}

/* ---------- masthead + register nav ---------- */
.masthead{background:var(--paper);border-bottom:3px solid var(--ink)}
.mast-top{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;justify-content:space-between;
  padding-block:16px}
.wordmark{display:inline-flex;align-items:center;gap:11px;font-family:var(--slab);font-weight:700;
  font-size:clamp(27px,3.4vw,42px);letter-spacing:-0.035em;color:var(--ink);line-height:1}
.wordmark:hover{text-decoration:none;color:var(--ink)}
.wordmark .tld{color:var(--accent)}
.mast-line{font-family:var(--slab);font-size:16px;line-height:1.35;color:var(--ink-2);max-width:44ch;margin:0}
.navtoggle{position:absolute;opacity:0;pointer-events:none}
.navtoggle-lbl{display:none;font-family:var(--slab);font-size:15px;letter-spacing:0.12em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);padding:9px 16px;cursor:pointer}

/* header menu: one row of sections, each with its entries one level down */
.menubar{border-top:1px solid var(--ink);background:var(--paper)}
.menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:stretch}
.menu-item{position:relative}
.menu-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--slab);font-weight:600;
  font-size:17px;letter-spacing:-0.01em;color:var(--ink);padding:11px 17px 12px;
  border-bottom:3px solid transparent}
.menu-link .ico{color:var(--accent);width:17px;height:17px}
.menu-item+.menu-item .menu-link{border-left:1px solid var(--rule-2)}
.menu-link:hover,.menu-item:focus-within>.menu-link{text-decoration:none;color:var(--accent);
  border-bottom-color:var(--accent);background:#fff}
.menu-end .menu-link{color:var(--ink-3);font-weight:500}
.menu-end .menu-link .ico{color:var(--accent-2)}
.submenu{position:absolute;top:100%;left:-1px;z-index:40;min-width:266px;background:#fff;
  border:1px solid var(--ink);border-top:3px solid var(--accent);
  box-shadow:0 14px 30px rgba(16,20,22,.16);padding:6px 0;
  visibility:hidden;opacity:0;transition:opacity .12s ease}
.submenu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.menu-item:hover>.submenu,.menu-item:focus-within>.submenu{visibility:visible;opacity:1}
.submenu ul{list-style:none;margin:0;padding:0}
.submenu a{display:flex;align-items:center;gap:10px;padding:8px 18px;font-size:16.5px;color:var(--ink-2)}
.submenu a:hover{background:var(--paper);color:var(--accent);text-decoration:none}
.submenu .ico{width:16px;height:16px;color:var(--accent-2);flex:none}

/* ---------- bands ---------- */
.band{padding-block:clamp(40px,5vw,66px)}
.band-paper{background:var(--paper)}
.band-ink{background:var(--ink);color:var(--paper)}
.band-ink a{color:#F4A9C8}
.band-ink h2,.band-ink h3{color:var(--paper)}
.band-accent{background:var(--accent);color:#FBEEF3}
.band-olive{background:var(--accent-2-fill);color:#F7F9EC}
.band-olive a{color:#F7F9EC}
.band-rule{border-top:3px solid var(--ink)}
.kicker{font-family:var(--slab);font-size:15px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;display:flex;align-items:center;gap:9px}
.band-ink .kicker,.band-olive .kicker{color:inherit;opacity:.8}
.band-head{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:baseline;justify-content:space-between;
  border-bottom:2px solid currentColor;padding-bottom:12px;margin-bottom:26px}
.band-head h2{font-size:clamp(24px,2.6vw,36px)}
.band-head p{margin:0;font-size:17px;line-height:1.5;max-width:48ch;color:var(--ink-2)}
.band-ink .band-head p,.band-olive .band-head p{color:inherit;opacity:.85}

/* ---------- homepage lead ---------- */
.lead-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,3.4vw,52px);align-items:start}
.lead-title{font-size:clamp(34px,4.6vw,64px);line-height:1;letter-spacing:-0.035em;margin:0 0 18px}
.lead-title a{color:var(--ink)}
.lead-title a:hover{color:var(--accent);text-decoration:none}
.lead-dek{font-size:clamp(19px,1.5vw,22px);line-height:1.5;margin:0 0 20px;color:var(--ink-2)}
.lead-body p{margin:0 0 16px}
.more{display:inline-flex;align-items:center;gap:10px;font-family:var(--slab);font-size:16px;
  letter-spacing:0.1em;text-transform:uppercase;border-bottom:2px solid var(--accent);padding-bottom:3px}
.more:hover{text-decoration:none;border-color:var(--ink)}

/* ---------- figure system ----------
   1 .fig-plate  : image on a paper mat, numeral tab, caption under a rule
   2 .fig-bleed  : full-bleed band breaking the measure, caption offset in the margin
   3 .fig-inset  : narrow figure inside the column, hanging caption
   4 .gallery    : contact strip, one shared caption                        */
.article-figure figcaption,.gallery figcaption,.map-figure figcaption{
  font-family:var(--slab);font-size:16.5px;line-height:1.45;color:var(--ink-2)}
.credit{display:block;font-family:var(--prose);font-size:13.5px;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.band-ink .credit,.band-olive .credit{color:rgba(255,255,255,.62)}

.fig-plate{background:var(--paper);padding:15px 15px 0;position:relative}
.fig-plate .fig-tab{position:absolute;top:0;left:15px;background:var(--accent);color:var(--paper);
  font-family:var(--slab);font-size:14px;letter-spacing:0.14em;padding:5px 11px;z-index:2}
.fig-plate img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-plate figcaption{padding:13px 0 16px;border-top:1px solid var(--rule);margin-top:14px}
.band-ink .fig-plate,.band-olive .fig-plate{background:rgba(255,255,255,.08)}
.band-ink .fig-plate figcaption,.band-olive .fig-plate figcaption{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.3)}

.fig-bleed{margin:44px 0;background:var(--ink)}
.fig-bleed img{width:100%;max-height:74vh;aspect-ratio:16/9;object-fit:cover}
.fig-bleed figcaption{display:grid;grid-template-columns:1fr auto;gap:10px 34px;align-items:start;
  max-width:var(--plate);margin:0 auto;padding:14px var(--pad) 20px;color:rgba(255,255,255,.9)}

.fig-inset{max-width:var(--measure);margin:34px auto;padding-inline:var(--pad)}
.fig-inset img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule)}
.fig-inset figcaption{padding-top:10px;border-top:2px solid var(--accent-2);margin-top:11px;font-size:16px}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:4px}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gallery-cap{font-family:var(--slab);font-size:16.5px;line-height:1.45;color:var(--ink-2);
  margin:13px 0 0;max-width:84ch}

.map-figure{background:var(--paper);padding:15px}
.map-figure .map-slot{width:100%;min-height:320px;background:var(--ground);border:1px solid var(--rule)}
.map-figure figcaption{padding-top:12px}

/* ---------- reading page ---------- */
.art-head{background:var(--paper);border-bottom:2px solid var(--ink);padding-block:clamp(28px,3.6vw,48px)}
.art-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-family:var(--slab);
  font-size:15px;letter-spacing:0.13em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.art-kicker a{color:var(--accent);display:inline-flex;align-items:center;gap:8px}
.art-kicker .sep{color:var(--rule)}
.art-kicker .sig{color:var(--ink-3);letter-spacing:0.06em;text-transform:none;font-size:15.5px}
.art-title{font-size:clamp(32px,4.4vw,60px);line-height:1;letter-spacing:-0.035em;margin:0 0 18px;max-width:26ch}
.lead{font-family:var(--slab);font-size:clamp(19px,1.55vw,23px);line-height:1.45;color:var(--ink-2);
  margin:0;max-width:56ch}
.art-body{padding-block:clamp(30px,4vw,52px)}
.art-body>p,.art-body>h2,.art-body>h3,.art-body>ul,.art-body>ol,.art-body>.note,
.art-body>.pullquote,.art-body>.callout,.art-body>.blockquote{
  max-width:var(--measure);margin-inline:auto;padding-inline:var(--pad)}
.art-body>p{margin-block:0 1.25em}
.art-body>h2{font-size:clamp(24px,2.5vw,33px);margin:2.1em auto 0.7em;max-width:var(--measure);
  padding-inline:var(--pad);display:flex;gap:12px;align-items:baseline}
.art-body>h2::before{content:"";flex:none;width:22px;height:0;border-top:3px solid var(--accent);
  transform:translateY(-0.42em)}
.art-body>h3{font-size:22px;margin:1.7em auto .5em}
.art-body a:not(.more):not(.entity-ref){border-bottom:1px solid var(--accent-soft)}
.art-body>ul,.art-body>ol{margin-block:0 1.3em}
.art-body li{margin-bottom:.4em}
.art-plate{max-width:var(--plate);margin:38px auto;padding-inline:var(--pad)}
.art-col{max-width:var(--plate);margin:38px auto;padding-inline:var(--pad)}
.art-body>.fig-bleed{max-width:none;padding:0}

/* ---------- text components ---------- */
.pullquote{margin:34px auto;border-left:6px solid var(--accent);padding:2px 0 2px 24px}
.pullquote p{font-family:var(--slab);font-weight:500;font-size:clamp(21px,2.1vw,29px);line-height:1.28;
  letter-spacing:-0.015em;margin:0}
.blockquote{margin:30px auto;background:var(--paper);padding:22px 26px;border-top:3px solid var(--ink)}
.blockquote p{margin:0 0 10px;font-size:19px;line-height:1.6}
.blockquote cite{font-family:var(--slab);font-style:normal;font-size:16px;color:var(--ink-3)}
.callout{margin:32px auto;background:var(--accent-2-soft);border-left:6px solid var(--accent-2);padding:20px 24px}
.callout p{margin:0;font-size:18px;line-height:1.6}
.callout>*+*{margin-top:.7em}
.note{font-size:16.5px;line-height:1.6;color:var(--ink-2);background:var(--paper);
  border-left:3px solid var(--rule);padding:13px 18px}

/* ---------- register panels (Notes-for-Design material) ---------- */
.regpanel{max-width:var(--plate);margin:40px auto;padding-inline:var(--pad)}
.regpanel-in{background:var(--paper);border-top:3px solid var(--ink);padding:24px clamp(18px,2.4vw,30px) 26px}
.regpanel h3{font-size:clamp(20px,2vw,26px);margin:0 0 4px}
.regpanel .regpanel-kick{font-family:var(--slab);font-size:14px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.deflist{margin:0;display:grid;gap:0}
.deflist>div{display:grid;grid-template-columns:minmax(180px,.85fr) 2fr;gap:6px 26px;
  padding:13px 0;border-bottom:1px solid var(--rule-2)}
.deflist>div:last-child{border-bottom:0}
.deflist dt{font-family:var(--slab);font-weight:600;font-size:18px;line-height:1.35;color:var(--ink)}
.deflist dd{margin:0;font-size:17px;line-height:1.55;color:var(--ink-2)}
.plainlist{margin:0;padding:0;list-style:none;display:grid;gap:0}
.plainlist li{padding:11px 0;border-bottom:1px solid var(--rule-2);font-size:17.5px;line-height:1.55;
  display:grid;grid-template-columns:26px 1fr;gap:14px}
.plainlist li:last-child{border-bottom:0}
.plainlist .n{font-family:var(--slab);font-weight:600;color:var(--accent-2);
  font-variant-numeric:lining-nums;font-size:16px;line-height:1.7}

.timeline{margin:0;padding:0;list-style:none}
.timeline li{display:grid;grid-template-columns:minmax(140px,210px) 1fr;gap:8px 26px;
  padding:13px 0;border-bottom:1px solid var(--rule-2);align-items:baseline}
.timeline li:last-child{border-bottom:0}
.t-when{font-family:var(--slab);font-weight:600;font-size:17.5px;line-height:1.35;color:var(--accent);
  font-variant-numeric:lining-nums}
.t-what{font-size:17.5px;line-height:1.55;color:var(--ink-2)}

/* ---------- tables ---------- */
.datatable,.versus{font-size:16.5px;line-height:1.5}
.datatable caption,.versus caption{font-family:var(--slab);font-size:15px;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--accent);text-align:left;padding-bottom:10px}
.datatable thead th,.versus thead th{background:var(--ink);color:var(--paper);font-family:var(--slab);
  font-weight:500;font-size:14px;letter-spacing:0.13em;text-transform:uppercase;text-align:left;
  padding:11px 13px;vertical-align:bottom}
.datatable td,.datatable th[scope=row],.versus td,.versus th[scope=row]{padding:15px 13px;
  border-bottom:1px solid var(--rule-2);vertical-align:top;text-align:left}
.datatable tbody tr:nth-child(even){background:rgba(16,20,22,.045)}
.datatable .num,.versus .num{font-family:var(--slab);font-weight:600;font-size:22px;
  color:var(--accent);font-variant-numeric:lining-nums;white-space:nowrap}
.datatable th[scope=row],.versus th[scope=row]{font-family:var(--slab);font-weight:600;font-size:18px}
.datatable th[scope=row] span,.versus th[scope=row] span{display:block;font-family:var(--prose);
  font-weight:400;font-size:15.5px;color:var(--ink-3)}
.versus thead th+th{border-left:1px solid rgba(255,255,255,.25)}
.versus td+td{border-left:1px solid var(--rule-2)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- stats + charts ---------- */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px}
.statblock{background:var(--paper);border-top:4px solid var(--accent);padding:18px 20px 20px}
.stat-num{display:block;font-family:var(--slab);font-weight:700;font-size:clamp(34px,4vw,50px);
  line-height:1;letter-spacing:-0.03em;font-variant-numeric:lining-nums}
.stat-label{display:block;font-size:16px;line-height:1.45;color:var(--ink-2);margin-top:9px}
.chart{background:var(--paper);border-top:3px solid var(--ink);padding:20px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .c-bar{fill:var(--accent)}
.chart .c-bar.alt{fill:var(--accent-2-fill)}
.chart .c-lab{font-family:var(--slab);font-size:13px;fill:var(--ink-2)}
.chart .c-val{font-family:var(--slab);font-size:14px;font-weight:600;fill:var(--ink)}
.chart .c-axis{stroke:var(--rule);stroke-width:1}
.chart .c-line{fill:none;stroke:var(--accent);stroke-width:2.5}
.chart .c-dot{fill:var(--accent)}
.chart figcaption{font-family:var(--slab);font-size:16px;line-height:1.45;color:var(--ink-2);padding-top:14px}

/* ---------- cards, lists, refs ---------- */
.cat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.cat-list>li{display:flex}
.cat-list a{display:flex;flex-direction:column;gap:7px;background:var(--paper);padding:20px 22px 22px;
  width:100%;color:var(--ink)}
.cat-list a:hover{background:#fff;text-decoration:none}
.cat-list .c-no{font-family:var(--slab);font-weight:600;font-size:14px;letter-spacing:0.1em;
  color:var(--accent);font-variant-numeric:lining-nums;display:flex;align-items:center;gap:8px}
.cat-list .c-title{font-family:var(--slab);font-weight:600;font-size:20px;line-height:1.2;
  letter-spacing:-0.015em;min-height:2.4em}
.cat-list .c-brief{font-size:16px;line-height:1.5;color:var(--ink-2);margin-top:auto}

.picks{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,3vw,44px);align-items:stretch}
.pick-side{display:grid;gap:2px;grid-auto-rows:1fr}
.pick-side a{background:var(--paper);padding:18px 20px;display:grid;gap:6px;color:var(--ink)}
.pick-side a:hover{background:#fff;text-decoration:none}
.pick-side .c-title{font-family:var(--slab);font-weight:600;font-size:21px;line-height:1.18;letter-spacing:-0.015em}
.pick-side .c-brief{font-size:16px;line-height:1.5;color:var(--ink-2)}

/* five-move summary + name chips: homepage teasers, not tables */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr))}
.steps li{padding:0 24px;border-left:1px solid var(--rule)}
.steps li:first-child{padding-left:0;border-left:0}
.steps li:last-child{padding-right:0}
.steps .s-no{display:block;font-family:var(--slab);font-weight:600;font-size:15px;letter-spacing:.14em;
  color:var(--accent);font-variant-numeric:lining-nums;margin-bottom:9px}
.steps a{display:block;font-family:var(--slab);font-weight:600;font-size:20px;line-height:1.2;
  letter-spacing:-0.015em;color:var(--ink)}
.steps a:hover{color:var(--accent);text-decoration:none}
.steps p{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--ink-3)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips a{display:inline-flex;align-items:center;font-family:var(--slab);font-weight:600;font-size:19px;
  padding:9px 17px;border:1px solid currentColor;color:inherit}
.chips a:hover{background:#F7F9EC;color:var(--accent-2);border-color:#F7F9EC;text-decoration:none}

.related-links,.further-grid{list-style:none;margin:0;padding:0}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px}
.further-grid a{display:grid;gap:6px;background:var(--paper);padding:18px 20px;color:var(--ink);
  align-content:start}
.further-grid a:hover{background:#fff;text-decoration:none}
.further-grid strong{font-family:var(--slab);font-size:19px;font-weight:600;line-height:1.2}
.further-grid span{font-size:16px;line-height:1.5;color:var(--ink-2)}
.related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px}
.related-links li{display:flex}
.related-links a{display:grid;gap:6px;background:var(--paper);padding:18px 20px;color:var(--ink);width:100%;
  align-content:start}
.related-links a:hover{background:#fff;text-decoration:none}
.related-links strong{font-family:var(--slab);font-size:19px;font-weight:600;line-height:1.2}
.related-links span{font-size:16px;line-height:1.5;color:var(--ink-2)}

.entity-ref{white-space:nowrap;font-family:var(--slab);font-size:.95em;border-bottom:1px solid var(--accent-soft)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:2px}
.org-card{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;
  background:var(--paper);padding:17px 20px;color:var(--ink);border-top:2px solid var(--rule)}
.org-card:hover{background:#fff;text-decoration:none;border-top-color:var(--accent)}
.org-card .org-logo{grid-row:span 2;width:44px;height:44px;object-fit:contain}
.org-card.no-logo .org-mark{grid-row:span 2;width:26px;height:26px;color:var(--accent)}
.org-name{font-family:var(--slab);font-weight:600;font-size:17.5px;line-height:1.22;align-self:end}
.org-host{font-size:14px;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent-2);align-self:start}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px}
.profile-card{background:var(--paper);padding:20px 22px 22px;border-top:3px solid var(--accent-2)}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:14px}
.profile-card.no-photo{border-top-color:var(--accent)}
.profile-card h3{font-size:21px;margin-bottom:3px}
.profile-card .p-role{font-family:var(--slab);font-size:16px;color:var(--accent);margin:0 0 10px}
.profile-card p{font-size:16.5px;line-height:1.55;margin:0 0 10px;color:var(--ink-2)}
.profile-card .p-links{font-size:16px;margin:0}
.profile-card .p-attr{font-size:13.5px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-3);margin:8px 0 0}

/* ---------- supporters ---------- */
.supporters{padding-block:clamp(26px,3vw,40px)}
.sup-head{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;margin-bottom:18px}
.sup-head h2{font-family:var(--slab);font-size:16px;font-weight:600;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--ink)}
.sup-head p{margin:0;font-size:16px;color:var(--ink-3)}
.sup-run{display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));gap:2px}
.sponsor{background:var(--paper);padding:16px 18px 18px;display:grid;
  align-content:start;gap:7px;color:var(--ink);border-top:2px solid var(--rule)}
.sponsor:hover{background:#fff;text-decoration:none;border-top-color:var(--accent)}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor-name{font-family:var(--slab);font-weight:600;font-size:19px;line-height:1.2;letter-spacing:-0.01em}
.sponsor-blurb{font-size:15.5px;line-height:1.5;color:var(--ink-2)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding-block:clamp(34px,4vw,56px)}
.foot a{color:var(--paper)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px}
.foot-emblem{max-width:230px;color:var(--paper)}
.foot h2{font-family:var(--slab);font-size:15px;letter-spacing:0.15em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:12px}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:16.5px}
.foot-list a{display:inline-flex;align-items:center;gap:8px}
.foot-note{font-size:16px;line-height:1.5;color:rgba(255,255,255,.72);max-width:38ch;margin:14px 0 0}

/* ---------- misc pages ---------- */
.page-head{padding-block:clamp(34px,4.4vw,60px)}
.page-title{font-size:clamp(38px,5.2vw,74px);line-height:.96;letter-spacing:-0.035em;margin:0 0 18px}
.sec-intro{font-size:clamp(19px,1.5vw,22px);line-height:1.55;max-width:58ch;margin:0;color:var(--ink-2)}
.archive-sec{margin-bottom:40px}
.archive-sec h2{display:flex;align-items:center;gap:11px;font-size:clamp(22px,2.3vw,30px);
  border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:16px}
.archive-sec h2 .ico{color:var(--accent)}
.expander{margin:0}
.expander summary{font-family:var(--slab);font-size:16px;letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;color:var(--accent);padding:12px 0}
.expander summary::marker{color:var(--accent)}
.sg-block{margin-bottom:46px;padding-bottom:32px;border-bottom:1px dashed var(--rule)}
.sg-block>h2{font-size:24px;margin-bottom:6px}
.sg-block>.sg-note{font-size:15.5px;color:var(--ink-3);margin:0 0 20px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .cat-list{grid-template-columns:repeat(2,1fr)}
  .lead-grid,.picks{grid-template-columns:1fr}
}
@media (max-width:860px){
  body{font-size:18px}
  .navtoggle-lbl{display:inline-block}
  .menubar{display:none}
  .navtoggle:checked~.menubar{display:block}
  .menu{flex-direction:column}
  .menu-item+.menu-item .menu-link{border-left:0}
  .menu-link{border-bottom:1px solid var(--rule);width:100%;padding:12px 2px}
  .submenu{position:static;visibility:visible;opacity:1;min-width:0;border:0;box-shadow:none;
    background:transparent;padding:2px 0 10px}
  .submenu a{padding:6px 2px 6px 26px}
  .deflist>div,.timeline li{grid-template-columns:1fr;gap:3px}
  .fig-bleed figcaption{grid-template-columns:1fr}
  .steps li{padding:13px 0;border-left:0;border-top:1px solid var(--rule)}
  .steps li:first-child{border-top:0;padding-top:0}
}
@media (max-width:680px){
  .cat-list{grid-template-columns:1fr}
}
@media (max-width:520px){
  :root{--pad:16px}
  .art-body>h2{flex-direction:column;gap:6px}
  .art-body>h2::before{transform:none}
  .datatable,.versus{font-size:15.5px}
  .statrow{grid-template-columns:1fr}
}
@media print{
  .menubar,.navtoggle-lbl,.supporters{display:none}
  body{background:#fff}
}

/* 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}

/* 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{height:44px!important;display:block!important;width:100%!important;background:#121013!important;box-sizing:border-box!important;padding:8px 12px!important}

/* op-run-4up: operator asked for four items per row. auto-fit at minmax(246px,1fr) was fitting
   five across the run. Desktop only. */
@media (min-width:900px){
  .sup-run{grid-template-columns:repeat(4,1fr)}
}

/* op-footer-compact: the footer printed 6 rows for 6 link(s) in
   1 list(s) — 773px at 390, 7% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 773 -> 583px (25% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(7px,2.36vw,34px)!important;row-gap:6px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px}
}

/* op-money-columns: the supporters block ran one tile per row — 13 tiles,
   2145px at 390, 21% of the whole page. Two columns bring it to
   1526px (29% shorter). Checked before writing: no new overflow, smallest mark still
   133px wide, longest blurb 3 lines, tile heights 163-209px.
   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. 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-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:2px!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-odd-tier-lead: .sup-run (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){
  .sup-run:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 720px (87 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .art-body > p, .art-body > h2, .art-body > h3, .art-body > ul, .art-body > ol, .art-body > .note, .art-body > .pullquote, .art-body > .callout, .art-body > .blockquote) 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){
  div.art-body{--measure:min(847px, 100%)!important}
}
@media (min-width:1600px){
  div.art-body{--measure:min(clamp(847px, 58.819vw, 1016px), 100%)!important}
  div.art-body > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sup-run 5 rows at 900). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sup-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.article-figure.fig-plate > img,
  div.art-body > figure.article-figure.fig-bleed > img,
  div.art-body > figure.article-figure.fig-inset > img,
  div.art-col > figure.article-figure.fig-plate > img,
  div.art-plate > figure.article-figure.fig-plate > img,
  div.profile-grid > div.profile-card > img.p-photo,
  div.wrap > figure.article-figure.fig-plate > img,
  main > figure.article-figure.fig-bleed > img){height:auto}
/* op-img-dims:end */
ul.menu > li.menu-item:nth-of-type(n+5) > .submenu{left:auto!important;right:-1px!important}

/* op-entity-wrap: long reference links wrap like the text around them (nowrap ran them off phone screens) */
.entity-ref.entity-ref{white-space:normal!important}