/* keeperfantasyleagues.com — "The Ledger"
   Palette: 5 members, each with a job.
   --paper  ground        #F5F3EE
   --ink    text          #101820
   --navy   panel / area  #002244   (saturated, hue ~215)
   --red    cost & charge #C8102E   (saturated, hue ~355)
   --blue   go-and-read   #1B4EA0   (saturated, hue ~222)
   Type: Azeret Mono (rules, numerals, headlines) + Work Sans (prose). */

:root{
  --paper:#F5F3EE;
  --paper-2:#EDEAE2;
  --ink:#101820;
  --navy:#002244;
  --red:#C8102E;
  --blue:#1B4EA0;
  --muted:#55606E;
  --rule:rgba(16,24,32,.30);
  --rule-soft:rgba(16,24,32,.15);
  --onnavy:#F5F3EE;
  --onnavy-soft:rgba(245,243,238,.78);
  --onnavy-link:#A8C0E4;
  --mono:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Work Sans",system-ui,-apple-system,sans-serif;
  --gut:clamp(18px,4vw,46px);
  --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 19px/1.62 var(--sans);
  text-wrap:pretty;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{margin:0;font-weight:700;font-family:var(--mono);letter-spacing:-.02em;line-height:1.06}
p{margin:0 0 1.15em}
hr{border:0;border-top:1px solid var(--rule);margin:2.4rem 0}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--navy);color:#fff;padding:10px 14px;z-index:99}

.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1480px;margin:0 auto;padding-inline:var(--gut)}
.kicker{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;display:flex;align-items:center;gap:9px}
.kicker svg{width:17px;height:17px;flex:none}
.kicker .k-red{color:var(--red)}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- masthead: a form header ---------- */
.mast{padding-top:26px}
.mast-box{border:2px solid var(--ink)}
.mast-top{display:flex;align-items:stretch}
.mast-id{flex:1;padding:18px 22px 16px;min-width:0}
.mast-field{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.mast-title{display:block;color:var(--ink);font-family:var(--mono);font-weight:700;
  font-size:clamp(22px,4.4vw,44px);line-height:1.0;letter-spacing:-.035em;text-transform:uppercase;word-break:break-word}
.mast-title:hover{color:var(--red);text-decoration:none}
.mast-stamp{border-left:2px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px 18px;flex:none;width:172px}
.mast-stamp svg{width:88px;height:56px;stroke:var(--red);fill:none;stroke-width:4;stroke-linecap:round}
.mast-stamp span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
.nav{border-top:2px solid var(--ink);display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.nav a{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 12px;color:var(--ink);font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;border-left:1px solid var(--rule);text-align:center}
.nav a:first-child{border-left:0}
.nav a>span{display:block}
.nav a:hover{background:var(--paper-2);color:var(--red);text-decoration:none}
.nav a[aria-current]{background:var(--ink);color:var(--paper)}
.nav a[aria-current]:hover{background:var(--navy);color:var(--paper)}

/* ---------- the sheet (homepage) ---------- */
.sheet{margin-top:34px}
.sheet-head,.row{display:grid;grid-template-columns:68px minmax(0,1fr) 250px}
.sheet-head{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.sheet-head span{padding:9px 0;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sheet-head span+span{padding-inline:16px;border-left:1px solid var(--rule-soft)}
.sheet-head .h-cost{color:var(--red)}
.row{border-bottom:1px solid var(--rule)}
.row-no{padding:24px 0 0;font-family:var(--mono);font-weight:700;font-size:21px;line-height:1;color:var(--red)}
.row-body{padding:24px 16px 26px;border-left:1px solid var(--rule-soft);min-width:0}
.row-cost{padding:24px 16px 26px;border-left:1px solid var(--rule-soft);font-family:var(--mono)}
.row-cost b{display:block;font-size:21px;font-weight:700;color:var(--red);line-height:1.15}
.row-cost small{display:block;margin-top:8px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.row-more{display:inline-block;margin-top:15px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.row h2 a,.row h3 a{color:var(--ink)}
.row h2 a:hover,.row h3 a:hover{color:var(--red);text-decoration:none}
.row-lead{background:var(--paper-2);border-bottom:2px solid var(--ink)}
.row-lead .row-no{font-size:33px;padding-top:30px}
.row-lead .row-body{padding:30px 16px 34px}
.row-lead .row-cost{padding-top:30px}
.row-lead h2{font-size:clamp(30px,4.6vw,56px);line-height:1.02;letter-spacing:-.035em;max-width:24ch}
.row-lead .row-dek{margin:18px 0 0;font-size:20px;line-height:1.5;max-width:60ch}
.row h3{font-size:clamp(21px,2.4vw,29px);line-height:1.1;max-width:34ch}
.row-dek{margin:12px 0 0;font-size:18px;line-height:1.5;max-width:66ch;color:#2c3239}

/* ---------- bands ---------- */
.band{margin-top:0;padding:clamp(44px,6vw,74px) 0}
.band-navy{background:var(--navy);color:var(--onnavy)}
.band-navy h2,.band-navy h3{color:var(--onnavy)}
.band-navy p{color:var(--onnavy-soft)}
.band-navy a{color:var(--onnavy-link)}
.band-navy a:hover{color:#fff}
.band-navy .kicker{color:var(--onnavy-link)}
.band-quiet{padding:clamp(34px,4vw,52px) 0;border-top:1px solid var(--rule)}
.band-photo{position:relative;isolation:isolate}
.band-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,34,68,.94) 0%,rgba(0,34,68,.86) 52%,rgba(0,34,68,.62) 100%);z-index:-1}
.band-title{font-size:clamp(26px,3.4vw,40px);line-height:1.06;max-width:30ch}

/* signature: three charges */
.charges{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;margin-top:34px;background:rgba(245,243,238,.28)}
.charge{background:var(--navy);padding:24px 22px 26px;display:flex;flex-direction:column;gap:12px}
.charge .c-when{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:8px}
.charge .c-when svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.charge h3{font-size:21px;line-height:1.15}
.charge h3 a{color:var(--onnavy)}
.charge p{margin:0;font-size:16.5px;line-height:1.5}

/* ---------- figures: one drawing system, four treatments ---------- */
figure{margin:0}
figcaption{font-family:var(--sans);font-size:16.5px;line-height:1.45;color:#2c3239}
.cap-k{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:7px}
.credit{display:block;margin-top:6px;font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--muted)}

/* 1 · plate — ruled header strip above, image flush, caption hangs off a red rule */
.fig-plate{border:1px solid var(--rule);background:var(--paper-2);padding:12px}
.fig-plate .plate-strip{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:0 2px 10px}
.fig-plate img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-plate figcaption{padding:13px 2px 2px;border-top:2px solid var(--red);margin-top:12px;max-width:70ch}

/* 2 · taped — mat with drawn corner marks */
.fig-taped{position:relative;background:var(--paper-2);border:1px solid var(--rule);padding:14px}
.fig-taped img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-taped::before,.fig-taped::after{content:"";position:absolute;width:20px;height:20px;border:2px solid var(--red)}
.fig-taped::before{top:5px;left:5px;border-right:0;border-bottom:0}
.fig-taped::after{bottom:5px;right:5px;border-left:0;border-top:0}
.fig-taped figcaption{padding-top:12px}

/* 3 · band — breaks the measure, caption on navy */
.fig-band{margin:44px 0}
.fig-band img{width:100%;height:clamp(240px,38vw,460px);object-fit:cover}
.fig-band figcaption{background:var(--navy);color:var(--onnavy-soft);padding:18px 20px;max-width:none}
.fig-band .cap-k{color:var(--onnavy-link)}
.fig-band .credit{color:rgba(245,243,238,.55)}

/* 4 · inset — sits in the column, prose beside it */
.fig-inset{float:right;width:min(300px,44%);margin:6px 0 22px 30px;border-left:2px solid var(--navy);padding-left:14px}
.fig-inset img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fig-inset figcaption{font-size:15.5px;padding-top:10px}

/* ---------- article ---------- */
.art{padding-bottom:20px}
.art-head{padding-block:clamp(34px,5vw,56px) 0}
.art-head h1{font-size:clamp(31px,5.2vw,60px);line-height:1.02;letter-spacing:-.035em;max-width:28ch}
.lead{margin:22px 0 0;font-size:clamp(19px,2.2vw,23px);line-height:1.45;max-width:56ch;color:#333a42}
.art-rule{margin:30px 0 0;border-top:2px solid var(--ink)}
.art-body{display:grid;grid-template-columns:74px minmax(0,var(--measure));gap:0;padding-top:38px}
.art-body>*{grid-column:2}
.art-body .full{grid-column:1/-1}
.art-body h2{grid-column:1/-1;display:grid;grid-template-columns:74px minmax(0,1fr);
  margin:46px 0 20px;font-size:clamp(23px,2.7vw,32px);line-height:1.12;max-width:none}
.art-body h2 .cn{font-family:var(--mono);font-weight:400;font-size:15px;color:var(--red);letter-spacing:0;padding-top:.45em}
.art-body h2 span:last-child{max-width:34ch}
.art-body p{font-size:19px;line-height:1.66}
.art-body p strong{font-weight:600}
.art-body ul{padding-left:1.1em;margin:0 0 1.15em}
.art-body li{margin-bottom:.5em}
.clause-break{grid-column:1/-1;display:grid;grid-template-columns:74px minmax(0,1fr);align-items:center;margin:30px 0 34px}
.clause-break svg{width:52px;height:20px;stroke:var(--red);fill:none;stroke-width:3;stroke-linecap:round}
.clause-break i{display:block;border-top:1px solid var(--rule);font-style:normal}
.entity-ref{white-space:normal}
.entity-ref::after{content:"\00a0↗";font-size:.82em;color:var(--muted)}

/* notes-for-design inserts */
.insert{grid-column:1/-1;margin:clamp(40px,5vw,62px) 0;background:var(--paper-2);
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
  padding:clamp(20px,3vw,30px) clamp(18px,3vw,30px) clamp(14px,2vw,22px)}
.insert-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--rule);padding-bottom:15px;margin-bottom:4px}
.insert-head h3{font-size:clamp(19px,2.2vw,25px);line-height:1.12;max-width:34ch}
.insert-head .tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);flex:none}
.cells{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:0 34px}
.cells>div{padding:18px 0 16px;border-top:1px solid var(--rule-soft)}
.cells b{display:block;font-family:var(--mono);font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--navy);margin-bottom:7px}
.cells span{display:block;font-size:16.5px;line-height:1.5;color:#2c3239}
.insert-statement{margin:20px 0 8px;font-family:var(--mono);font-weight:700;
  font-size:clamp(18px,2.1vw,24px);line-height:1.28;letter-spacing:-.02em;max-width:46ch;color:var(--ink)}
.insert-statement .is-k{display:block;font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
@media (max-width:980px){.cells{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.cells{grid-template-columns:minmax(0,1fr)}}
.timeline{list-style:none;margin:0;padding:0}
.insert .timeline li:last-child{border-bottom:0}
.timeline li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:18px;padding:16px 0;border-top:1px solid var(--rule-soft)}
.timeline li:first-child{border-top:0}
.t-when{font-family:var(--mono);font-weight:700;font-size:17px;color:var(--red)}
.t-what{font-size:17px;line-height:1.5}
.band-navy .cells>div{border-color:rgba(245,243,238,.22)}
.band-navy .cells b{color:var(--onnavy)}
.band-navy .cells span{color:var(--onnavy-soft)}

/* ---------- text components ---------- */
.pullquote{margin:34px 0;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pullquote p{margin:0;font-family:var(--mono);font-weight:700;font-size:clamp(20px,2.4vw,26px);line-height:1.2;letter-spacing:-.02em;color:var(--red);max-width:30ch}
.blockquote{margin:30px 0;padding-left:20px;border-left:3px solid var(--navy)}
.blockquote p{margin:0 0 10px;font-size:19.5px;line-height:1.55}
.blockquote cite{font-family:var(--mono);font-size:14px;font-style:normal;color:var(--muted)}
.callout{margin:30px 0;background:var(--navy);color:var(--onnavy);padding:22px 22px}
.callout p{margin:0;font-size:18.5px;line-height:1.55;color:var(--onnavy-soft)}
.note{font-size:16.5px;line-height:1.55;color:var(--muted);border-left:2px solid var(--red);padding-left:14px}

/* tables */
.versus,.datatable{width:100%;border-collapse:collapse;font-size:16.5px;margin:26px 0}
.versus th,.versus td,.datatable th,.datatable td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule-soft)}
.versus thead th,.datatable thead th{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;border-bottom:2px solid var(--ink);color:var(--ink)}
.versus tbody th,.datatable tbody th{font-weight:600;font-family:var(--sans)}
.versus td+td{border-left:1px solid var(--rule-soft)}
.datatable td.num{font-family:var(--mono);color:var(--red)}
.table-scroll{overflow-x:auto}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--rule-soft);margin:26px 0}
.statblock{background:var(--paper);padding:18px 16px}
.stat-num{display:block;font-family:var(--mono);font-weight:700;font-size:34px;line-height:1;color:var(--red)}
.stat-label{display:block;margin-top:9px;font-size:15.5px;line-height:1.4;color:var(--muted)}
.chart figcaption{margin-top:12px}
.chart svg{width:100%;height:auto}

/* ---------- lists, cards ---------- */
.cat-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:20px 0;color:var(--ink)}
.cat-list a:hover{background:var(--paper-2);text-decoration:none}
.cat-list a:hover .cl-title{color:var(--red)}
.cl-no{font-family:var(--mono);font-size:13px;color:var(--red)}
.cl-title{font-family:var(--mono);font-weight:700;font-size:clamp(18px,2vw,22px);line-height:1.15;letter-spacing:-.02em}
.cl-dek{display:block;margin-top:8px;font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.5;letter-spacing:0;color:#2c3239;max-width:72ch}
.cl-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.related-links{list-style:none;margin:0;padding:0}
.related-links li{border-top:1px solid var(--rule)}
.related-links a{display:block;padding:15px 0;font-family:var(--mono);font-weight:700;font-size:18px;line-height:1.2;letter-spacing:-.02em}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--rule-soft)}
.further-grid a{background:var(--paper);padding:20px 18px;display:flex;flex-direction:column;gap:9px;min-height:100%}
.further-grid a:hover{background:var(--paper-2);text-decoration:none}
.further-grid .f-k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.further-grid .f-t{font-family:var(--mono);font-weight:700;font-size:18.5px;line-height:1.18;letter-spacing:-.02em;color:var(--ink)}
.further-grid a:hover .f-t{color:var(--red)}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.profile-card{display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--paper-2);padding:16px}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-size:20px;margin-bottom:6px}
.profile-card .p-role{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.profile-card p{font-size:16.5px;line-height:1.5}
.profile-card .p-links{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:13px}
.profile-card.no-photo{border-left:3px solid var(--navy)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule-soft)}
.org-card{background:var(--paper);padding:16px;display:flex;flex-direction:column;gap:6px}
.org-card:hover{background:var(--paper-2);text-decoration:none}
.org-logo{height:34px;width:auto;max-width:100%;object-fit:contain;margin-bottom:6px}
.org-name{font-family:var(--mono);font-weight:700;font-size:16.5px;color:var(--ink);line-height:1.2}
.org-host{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:30px 0}
.gallery figure{display:flex;flex-direction:column}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:15.5px;padding-top:9px;border-top:1px solid var(--rule);margin-top:9px}

/* CSS-only expander */
.expander{margin-top:0}
.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:16px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);cursor:pointer;border-bottom:1px solid currentColor}
.expander label:hover{color:var(--red)}
.expander input:checked~label{display:none}

/* ---------- supporters ---------- */
.sponsors{padding:clamp(40px,5vw,62px) 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.sponsor-run{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:34px 34px;margin-top:26px;align-items:start}
.sponsor-group{max-width:100%}
.sponsor-sublabel{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-bottom:9px;border-bottom:1px solid var(--rule);margin-bottom:0}
.sponsor-slots{display:flex;flex-direction:column;gap:0}
.sponsor{width:100%;display:flex;flex-direction:column;gap:7px;
  padding:14px 16px 15px;border-bottom:1px solid var(--rule-soft);color:var(--ink)}
.sponsor:hover{background:var(--paper-2);text-decoration:none}
.sponsor-name{font-family:var(--mono);font-weight:700;font-size:16px;line-height:1.2;letter-spacing:-.02em}
.sponsor:hover .sponsor-name{color:var(--red)}
.sponsor-blurb{font-size:15.5px;line-height:1.45;color:var(--muted)}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:var(--onnavy);padding:clamp(38px,5vw,58px) 0 44px;margin-top:0}
.foot-top{display:flex;flex-wrap:wrap;gap:30px 50px;align-items:flex-start;justify-content:space-between}
.foot p{max-width:52ch;font-size:17.5px;line-height:1.5;color:var(--onnavy-soft)}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.foot-nav a{color:var(--onnavy-link)}
.foot svg{stroke:var(--red);fill:none;stroke-width:4;stroke-linecap:round;width:60px;height:38px;flex:none}
.foot-rule{border-top:1px solid rgba(245,243,238,.24);margin:30px 0 0;padding-top:18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:rgba(245,243,238,.6)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .sheet-head,.row{grid-template-columns:54px minmax(0,1fr) 200px}
  .fig-inset{width:min(260px,42%);margin-left:22px}
}
@media (max-width:820px){
  body{font-size:18px}
  .sheet-head{display:none}
  .row{grid-template-columns:44px minmax(0,1fr)}
  .row-cost{grid-column:2;border-left:0;border-top:1px solid var(--rule-soft);padding:16px 16px 22px;margin-top:4px}
  .row-cost b{font-size:19px}
  .mast-stamp{width:118px}
  .mast-stamp svg{width:62px;height:40px}
  .art-body{grid-template-columns:minmax(0,1fr);padding-top:30px}
  .art-body>*{grid-column:1}
  .art-body h2,.clause-break,.insert{grid-column:1}
  .art-body h2{grid-template-columns:44px minmax(0,1fr);margin-top:38px}
  .clause-break{grid-template-columns:44px minmax(0,1fr)}
  .fig-inset{float:none;width:100%;margin:26px 0}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:5px}
  .cat-list a{grid-template-columns:36px minmax(0,1fr);row-gap:8px}
  .cl-tag{grid-column:2}
}
@media (max-width:600px){
  :root{--gut:18px}
  .nav{grid-template-columns:repeat(2,1fr)}
  .mast-title{font-size:clamp(15px,5vw,22px);word-break:normal;overflow-wrap:anywhere}
  .mast-id{padding:16px 16px 14px}
  .nav a{font-size:10.5px;letter-spacing:.06em;padding:11px 8px}
  .nav a:nth-child(odd){border-left:0}
  .mast-top{flex-direction:column}
  .mast-stamp{border-left:0;border-top:2px solid var(--ink);width:100%;flex-direction:row;justify-content:flex-start;gap:14px}
  .mast-stamp span{text-align:left}
  .sponsor{width:100%}
  .sponsor-group{max-width:100%}
  .insert-head{flex-direction:column;gap:8px}
  .cells>div{border-left:0}
}
@media print{
  .nav,.sponsors,.foot-nav{display:none}
  body{background:#fff}
}

.art-body .sec{display:block}
.art-body .sec::after{content:"";display:table;clear:both}

/* alias treatment for the generic figure class */
.article-figure{border:1px solid var(--rule);background:var(--paper-2);padding:12px;margin:30px 0}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{padding:13px 2px 2px;border-top:2px solid var(--red);margin-top:12px}
.chart{margin:30px 0}
.chart .c-lab{font-size:13px}
.chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chart-scroll svg{min-width:560px}
.chart.donut .chart-scroll svg{min-width:0}
.chart .c-grid{stroke:var(--rule-soft);stroke-width:1}
.chart .c-bar{fill:var(--red)}
.chart .c-line{stroke:var(--blue);stroke-width:3;fill:none}
.chart .c-dot{fill:var(--navy)}
.chart .c-lab{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.chart .c-val{font-family:var(--mono);font-size:12px;fill:var(--ink)}
.chart .c-ring{fill:none;stroke-width:22}
.sg-sec{padding:48px 0;border-top:1px solid var(--rule)}
.sg-sec>h2{font-size:24px;margin-bottom:6px}
.sg-note{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:24px}
.sg-narrow{max-width:360px;border:1px dashed var(--rule);padding:14px;margin-top:24px}

.art-body em,.lead em{font-style:italic}

/* ---------- homepage opener: one lead across the width ---------- */
.opener{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,4vw,56px);
  align-items:start;margin-top:32px;border-top:2px solid var(--ink);padding-top:30px}
.opener-no{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.1em;color:var(--red);margin-bottom:16px}
.opener h1{font-size:clamp(30px,4.4vw,54px);line-height:1.02;letter-spacing:-.035em;max-width:22ch}
.opener h1 a{color:var(--ink)}
.opener h1 a:hover{color:var(--red);text-decoration:none}
.opener-dek{margin:20px 0 0;font-size:clamp(18px,2vw,21px);line-height:1.5;max-width:52ch;color:#2c3239}
.opener-go{display:inline-block;margin-top:22px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.opener-charges{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)}
.opener-charges span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(26px,4vw,48px);
  margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--rule)}
.pair-lab{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.pair-item h3{font-size:clamp(20px,2.3vw,27px);line-height:1.12;max-width:26ch;margin-top:18px}
.pair-item h3 a{color:var(--ink)}
.pair-item h3 a:hover{color:var(--red);text-decoration:none}
.pair-item .row-dek{margin-top:12px;font-size:17.5px}
@media (max-width:860px){.opener{grid-template-columns:minmax(0,1fr)}}

/* ---------- article polish ---------- */
.art-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.art-meta b{color:var(--red);font-weight:500}
.art-body>.sec+.sec{margin-top:0}
.art-body .sec p:last-child{margin-bottom:0}
.art-body .sec+.sec{padding-top:1.15em}
.art-close{background:var(--paper-2);color:var(--ink);margin-top:clamp(48px,6vw,76px);
  border-top:2px solid var(--ink);padding:clamp(38px,5vw,56px) 0 clamp(36px,5vw,52px)}
.art-close-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,52px)}
.art-close .related-links li{border-top:1px solid var(--rule)}
.art-close .further-grid{background:var(--rule-soft)}
.art-close .further-grid a{background:var(--paper-2)}
.art-close .further-grid a:hover{background:var(--paper)}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .art-body h2{grid-template-columns:minmax(0,1fr);gap:4px}
  .art-body h2 .cn{padding-top:0;font-size:13px;letter-spacing:.16em}
  .clause-break{grid-template-columns:minmax(0,1fr)}
  .clause-break svg{margin-bottom:12px}
  .cells>div{padding-top:16px}
  .cells>div:first-child{padding-top:14px}
  .insert-head{flex-direction:column;gap:8px}
  .fig-band figcaption{padding:16px 18px}
}
@media (max-width:600px){
  .nav a{padding:14px 8px;min-height:46px}
  .art-head h1{font-size:clamp(26px,7.4vw,34px)}
  .lead{font-size:18.5px}
  .art-body p{font-size:17.5px;line-height:1.62}
  .fig-plate,.fig-taped{padding:9px}
  .fig-plate .plate-strip{flex-direction:column;gap:4px}
  .art-meta{font-size:10px;gap:6px 16px}
  .opener h1{font-size:clamp(27px,7.6vw,34px)}
  .pair-item h3{font-size:21px}
  .statrow{grid-template-columns:minmax(0,1fr)}
  .versus,.datatable{font-size:15.5px}
  .versus th,.versus td,.datatable th,.datatable td{padding:11px 10px}
  .timeline li{padding:14px 0}
  .t-when{font-size:15.5px}
  .t-what{font-size:16px}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* 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-slots > .sponsor{flex:0 0 auto!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!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-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:start!important;flex-wrap:nowrap!important;align-items:center!important;height:auto!important;min-height:0!important}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}

/* sp-grid-stretch: fixed pixel tracks left the container part-empty. */
.art-close-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important}

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

/* op-nav-collapse: this nav printed 194px of stacked links at 390 before any content
   (7 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "right-tab", bold, seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (0px measured) the button carries the build's
   gutter (clamp(18px,4vw,46px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (900px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "bars" icon — the mechanism
   is deliberately not identical across the fleet either. */
.index-toggle{display:none}
@media (max-width:900px){
  .index-toggle{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-left:auto;border:1px solid currentColor;border-radius:2px;padding:10px 16px;margin-right:clamp(18px,4vw,46px);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .index-toggle-bars{width:15px;height:9px;flex:none;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;box-shadow:inset 0 3.5px 0 -1px currentColor}
  .nav{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .index-toggle-c:checked ~ .nav{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .mast-box:has(> .index-toggle){display:flow-root}
  .index-toggle:not(:has(~ .nav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1176px at 390, 19% of the whole page. Two columns bring it to
   995px (15% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 3 lines, tile heights 103-145px.
   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 (.sponsor-slots), 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){
  .sponsor-slots{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsor-slots > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-slots > * *{min-width:0!important;max-width:100%}
    .sponsor-slots img,.sponsor-slots svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sponsor-slots (3 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-slots:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — div.pair-item reached
   338px in a 320px screen (+18px), inside
   div.pair. Remedy: unpin the grid track. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div.pair{grid-template-columns:minmax(0,1fr)!important}
  div.pair-item{min-width:0!important;max-width:100%!important}
}

/* op-article-width: the article column was capped at 804px (85 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "74px minmax(0,var(--measure))" (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){
  article.art div.wrap.art-body{grid-template-columns:74px min(967px, calc(100% - 74px))!important}
}
@media (min-width:1600px){
  article.art div.wrap.art-body{grid-template-columns:74px min(clamp(967px, 67.153vw, 1160px), calc(100% - 74px))!important}
  article.art div.wrap.art-body div.sec > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){margin: 0px; font-weight: 700; font-family: var(--mono); letter-spacing: -0.02em; line-height: 1.06;}
.band-navy h2:where(.rt-h3){color: var(--onnavy);}
.charge h2:where(.rt-h3){font-size: 21px; line-height: 1.15;}
.charge h2:where(.rt-h3) a{color: var(--onnavy);}
.pair-item h2:where(.rt-h3){font-size: clamp(20px, 2.3vw, 27px); line-height: 1.12; max-width: 26ch; margin-top: 18px;}
.pair-item h2:where(.rt-h3) a{color: var(--ink);}
.pair-item h2:where(.rt-h3) a:hover{color: var(--red); text-decoration: none;}
@media (max-width: 600px){.pair-item h2:where(.rt-h3){font-size: 21px;}}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(main > section.band.band-navy.band-photo > img){height:auto}
/* op-img-dims:end */
@media (max-width:659px){.sponsor-run.sponsor-run:has(> .sponsor-group){grid-template-columns:minmax(0,1fr)!important}}