/* In Contempt Comics — "Set by hand"
   A printed broadside: heavy rules, condensed caps, one oxblood field,
   photographs matted small and deliberate. */

:root{
  /* palette — each member has one job */
  --paper:#ECE3CF;        /* ground */
  --ink:#14100C;          /* ink */
  --oxblood:#7A1C22;      /* area: opener field, footer, mats, pull-quotes */
  --ochre:#A8791F;        /* accent: numerals, mats, rules */
  --reversed:#F7F2E6;     /* type on oxblood and ochre */
  --mat:#DDD2B8;          /* quieter mat */
  --gold:#E9C67E;         /* kickers on the oxblood field */
  /* the colourist's box — one ink per section, each carrying reversed paper */
  --ink-draughtsmen:#7A1C22;  /* carmine */
  --ink-papers:#1F4E79;       /* prussian blue */
  --ink-printing:#2F6B4F;     /* verdigris */
  --ink-archives:#98330F;     /* vermilion */
  --ink-prizes:#6E4809;       /* chrome, darkened to carry type */
  --ink-glossary:#5B3A7A;     /* mauve */
  --rule:rgba(20,16,12,.30);
  --hair:rgba(20,16,12,.20);
  --quiet:rgba(20,16,12,.62);

  --display:Petrona,"Times New Roman",Georgia,serif;
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --label:Oswald,"Arial Narrow",sans-serif;

  --sheet:1180px;
  --prose:66ch;
  --margin:0px;
  --gutter:0px;
  --body:18px;
  --pad:20px;
  --gap:26px;              /* paragraph gap — insertions use 2x, min 24/32 */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 var(--body)/1.62 var(--serif);
  overflow-x:hidden;text-wrap:pretty;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--oxblood)}
a:hover{color:#5c1218}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.04;margin:0}
p{margin:0 0 var(--gap);overflow-wrap:break-word}
p:last-child{margin-bottom:0}
table{border-collapse:collapse}
:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px}

body[data-sec="draughtsmen"]{--oxblood:var(--ink-draughtsmen)}
body[data-sec="papers"]{--oxblood:var(--ink-papers)}
body[data-sec="printing"]{--oxblood:var(--ink-printing)}
body[data-sec="archives"]{--oxblood:var(--ink-archives)}
body[data-sec="prizes"]{--oxblood:var(--ink-prizes)}
body[data-sec="glossary"]{--oxblood:var(--ink-glossary)}

.sheet{width:100%;max-width:var(--sheet);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:block;padding:8px}

/* ── device: the plate numeral ─────────────────────────────── */
.plate{
  font-family:var(--display);font-weight:800;line-height:.8;
  color:transparent;-webkit-text-stroke:1.2px var(--ochre);
  letter-spacing:.01em;flex:none;
}
.plate--sm{font-size:30px}
.plate--md{font-size:44px}
.plate--lg{font-size:64px;-webkit-text-stroke-width:1.4px}
.plate--rev{-webkit-text-stroke-color:rgba(247,242,232,.62)}
.plate--red{-webkit-text-stroke-color:var(--oxblood)}

/* section icons — one drawing system, 24px grid, 1.5 stroke */
.ico{width:26px;height:26px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ico--lg{width:40px;height:40px;stroke-width:1.3}

.kicker{
  font:500 13px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--oxblood);display:flex;align-items:center;gap:10px;
}
.kicker--rev{color:var(--gold)}

/* ── masthead ─────────────────────────────────────────────── */
.masthead{border-bottom:3px solid var(--ink);background:var(--paper)}
.mast-top{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;padding:22px 0 12px;flex-wrap:wrap}
.mast-name{
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  line-height:.8;font-size:clamp(34px,9vw,130px);
  color:var(--ink);text-decoration:none;
}
.mast-name:hover{color:var(--ink)}
.mn-in{font-weight:400;font-style:italic;font-size:.46em;letter-spacing:-.01em;color:var(--oxblood)}
.mn-mid{font-weight:800}
.mn-out{font-weight:800}
@supports (-webkit-text-stroke: 1px currentColor){
  .mn-out{color:transparent;-webkit-text-stroke:max(1.3px,.014em) var(--oxblood)}
  .mast-name:hover .mn-out{-webkit-text-stroke-color:var(--ink)}
}
.mast-strap{font:600 12px/1.5 var(--label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--oxblood);text-align:right;max-width:19em}
.mast-rule{border-top:1px solid var(--ochre);border-bottom:1px solid var(--ochre);height:4px;margin:0 var(--pad)}
.mainnav{background:var(--mat);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.mainnav.sheet{max-width:none;padding-inline:0}
.mainnav ul{
  list-style:none;width:100%;max-width:var(--sheet);margin-inline:auto;
  padding-inline:var(--pad);
  display:flex;flex-wrap:wrap;gap:0 26px;justify-content:space-between;
  font:600 17px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;
}
.mainnav a{color:var(--ink);text-decoration:none;padding:15px 0 13px;display:flex;
  align-items:center;gap:9px;border-bottom:3px solid transparent}
.mainnav a::before{content:"";width:9px;height:9px;flex:none;background:var(--chip,var(--quiet))}
.mainnav a:hover{color:var(--chip,var(--oxblood));border-bottom-color:var(--chip,var(--oxblood))}
.mainnav li:nth-child(1) a{--chip:var(--ink-draughtsmen)}
.mainnav li:nth-child(2) a{--chip:var(--ink-papers)}
.mainnav li:nth-child(3) a{--chip:var(--ink-printing)}
.mainnav li:nth-child(4) a{--chip:var(--ink-archives)}
.mainnav li:nth-child(5) a{--chip:var(--ink-prizes)}
.mainnav li:nth-child(7) a{--chip:var(--ink-glossary)}
.mainnav li:nth-child(6) a::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.mainnav .standing a{color:var(--quiet)}
.mainnav [aria-current="page"]{color:var(--chip,var(--oxblood));border-bottom-color:var(--chip,var(--oxblood))}
.divisions{
  border-top:1px solid var(--rule);background:rgba(122,28,34,.06);
  font:400 14px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;
}
.divisions div{display:flex;flex-wrap:wrap;gap:10px 26px;padding:10px var(--pad)}
.divisions span{color:var(--quiet)}
.divisions a{color:var(--oxblood);text-decoration:none}
.divisions a:hover{text-decoration:underline}

/* ── bands ────────────────────────────────────────────────── */
.band{padding-block:56px}
.band--tight{padding-block:34px}
.band--rule{}
.band--hair{border-bottom:1px solid var(--rule)}
.band-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 22px;
  align-items:center;border-top:3px solid var(--ink);padding-top:20px;margin-bottom:34px}
.band-head>.plate{grid-row:span 2;align-self:start;border:2px solid var(--oxblood);
  padding:11px 13px 9px;font-size:32px;-webkit-text-stroke-color:var(--oxblood)}
.band-head>h2,.band-head>.band-note{grid-column:2}
.band-head>.band-note{margin-top:2px}
.group-head{grid-template-columns:auto minmax(0,1fr)}
.band-head h2{font-size:clamp(28px,3.4vw,46px)}
.band-note{font:400 17px/1.55 var(--serif);color:var(--quiet);
  max-width:52ch;margin:10px 0 0}

/* the oxblood field: crosshatch from the material */
.field{
  background:var(--oxblood);color:var(--reversed);position:relative;overflow:hidden;
  background-image:
    repeating-linear-gradient(45deg,rgba(247,242,232,.055) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(-45deg,rgba(247,242,232,.055) 0 1px,transparent 1px 14px);
}
.field a{color:var(--gold)}
.field .fig--mat .cap{color:var(--ink)}
.field .fig--mat .credit{color:var(--ink);font-weight:500}
.field .band-note{color:rgba(247,242,232,.72)}

/* ── homepage opener ──────────────────────────────────────── */
.opener{padding-block:52px}
.opener-grid{display:grid;gap:36px}
.opener .article-figure{display:flex;flex-direction:column}
.opener .article-figure img{flex:1;min-height:300px;object-fit:cover}
.opener h1{font-size:clamp(34px,4.6vw,76px);margin:20px 0 22px}
.opener-dek{font-size:clamp(19px,1.5vw,24px);line-height:1.5;color:rgba(247,242,232,.88);max-width:44em}
.opener-more{
  display:inline-block;margin-top:28px;font:600 15px/1 var(--label);
  letter-spacing:.2em;text-transform:uppercase;color:var(--reversed);
  text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:8px;
}
.opener-credit{font:400 14px/1.5 var(--label);letter-spacing:.04em;
  color:rgba(247,242,232,.64);margin:18px 0 0}

/* ── figures: three treatments, one system ────────────────── */
.article-figure{margin:0}
.article-figure img{width:100%}
.figcap{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline;
  justify-content:space-between;margin-top:12px}
.figcap .cap{font:400 16px/1.5 var(--serif);
  flex:1 1 22ch;min-width:0;margin:0;overflow-wrap:anywhere}
.figcap .credit{font:400 13px/1.4 var(--label);letter-spacing:.05em;
  color:var(--quiet);flex:0 1 auto;margin:0}
/* 1 · oxblood plate — the lead */
.fig--plate{background:var(--oxblood);padding:18px}
.fig--plate .figcap{margin:16px 4px 0}
.fig--plate .cap{color:var(--reversed)}
.fig--plate .credit{color:rgba(247,242,232,.78)}
/* 2 · ochre mat — the breakout */
.fig--mat{background:var(--ochre);padding:18px}
.fig--mat .figcap{margin:16px 4px 0}
.fig--mat .cap{color:var(--ink)}
.fig--mat .credit{color:var(--ink);font-weight:500}
/* 3 · ruled inset — the small one, with the copper-plate rule */
.fig--inset{border:1px solid var(--rule);padding:12px;background:var(--mat)}
.fig--inset .cap{font-size:15px}
.fig--quiet{background:var(--mat);padding:14px}

.rule-mark{display:block;width:100%;height:10px;color:var(--oxblood)}

/* ── prose components ─────────────────────────────────────── */
.lead{font-size:clamp(20px,1.7vw,26px);line-height:1.45;color:rgba(20,16,12,.86);
  font-family:var(--serif)}
.pullquote{
  margin:0;position:relative;background:var(--oxblood);color:var(--reversed);
  padding:34px 34px 30px;display:flex;gap:24px;align-items:flex-start;
}
.pullquote p{font-family:var(--display);font-weight:700;
  font-size:clamp(23px,2.1vw,34px);line-height:1.2;margin:0}
.blockquote{margin:0;border-left:3px solid var(--ochre);padding:6px 0 6px 26px}
.blockquote p{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.28;margin:0 0 10px}
.blockquote cite{font:400 15px/1.4 var(--label);letter-spacing:.06em;
  color:var(--quiet);font-style:normal}
.callout{
  background:var(--mat);border-top:3px solid var(--oxblood);padding:30px 32px 34px;margin:0;
}
.callout h3{font-size:23px;margin:0 0 18px}
.callout ul+h3{margin-top:36px;padding-top:28px;border-top:1px solid var(--rule)}
.callout ul:last-child{margin-bottom:0}
.callout p{font:400 17px/1.6 var(--serif);margin:0 0 12px}
.note{font:400 17px/1.6 var(--serif);color:var(--quiet);
  border-left:2px solid var(--ochre);padding-left:16px}

.notes-block{border-top:3px solid var(--ink);padding-top:22px}
.notes-block h3{font-size:clamp(22px,1.9vw,30px);margin:0 0 24px}
.notes-block .plate{margin-bottom:8px}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:1fr;gap:4px 26px;
  padding:17px 2px;border-bottom:1px solid var(--hair)}
.timeline li:first-child{border-top:1px solid var(--rule)}
.t-when{font:600 15px/1.3 var(--label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--oxblood)}
.t-what{font-family:var(--serif);font-size:17px;line-height:1.5;overflow-wrap:anywhere}
.keylist{list-style:none;margin:0;padding:0}
.keylist b{display:block;margin-bottom:3px}
.keylist li{overflow-wrap:anywhere;padding:15px 2px;border-bottom:1px solid var(--hair);
  font:400 17px/1.55 var(--serif)}
.keylist li:first-child{border-top:1px solid var(--rule)}
.keylist b{font-family:var(--display);font-weight:800;letter-spacing:0}

.statrow{display:flex;flex-wrap:wrap;gap:2px}
.statblock{flex:1 1 180px;background:var(--mat);padding:20px 22px}
.stat-num{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(34px,3.4vw,52px);line-height:1;color:var(--oxblood)}
.stat-label{display:block;margin-top:8px;font:500 14px/1.35 var(--label);
  letter-spacing:.12em;text-transform:uppercase;color:var(--quiet)}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.datatable,.versus{width:100%;min-width:min(560px,100%);font-family:var(--serif)}
.datatable th,.versus th{font:600 14px/1.3 var(--label);letter-spacing:.12em;
  text-transform:uppercase;text-align:left;padding:14px 16px 14px 0;
  border-bottom:2px solid var(--ink)}
.datatable td,.versus td{padding:14px 16px 14px 0;border-bottom:1px solid var(--hair);
  font-size:17px;vertical-align:top}
.versus td+td{border-left:1px solid var(--hair);padding-left:16px}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.gallery figure{margin:0}
.map-figure .map-slot{aspect-ratio:16/9;border:1px solid var(--rule);background:var(--mat)}

.field .blockquote{border-left-color:var(--gold)}
.field .blockquote p{color:var(--reversed);font-size:clamp(20px,1.7vw,27px)}
.field .blockquote cite{color:rgba(247,242,232,.7)}

/* charts — inline SVG, palette-keyed */
.chart{margin:0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .c-bar{fill:var(--oxblood)}
.chart .c-bar2{fill:var(--ochre)}
.chart .c-axis{stroke:var(--rule);stroke-width:1}
.chart .c-line{fill:none;stroke:var(--oxblood);stroke-width:2.5}
.chart .c-dot{fill:var(--ochre)}
.chart text{font:500 11px var(--label);letter-spacing:.06em;fill:var(--ink)}
.chart .c-val{font-weight:600;fill:var(--oxblood)}
.chart figcaption{font:400 16px/1.55 var(--serif);
  color:var(--quiet);margin-top:12px;border-top:1px solid var(--hair);padding-top:10px}
.chart.donut text.c-mid{font-family:var(--display);font-weight:800;font-size:26px;fill:var(--ink)}

.sponsor.has-copy{flex-direction:column;align-items:flex-start;gap:8px;min-height:0}
.sponsor .sponsor-blurb{font:400 14px/1.45 var(--label);letter-spacing:.02em;
  color:rgba(247,242,232,.8);min-width:200px;display:block}

/* ── cards, profiles, references ──────────────────────────── */
.cards{display:grid;gap:44px 34px;grid-template-columns:1fr}
.card{display:flex;flex-direction:column;background:var(--mat);
  border-top:5px solid var(--sec,var(--oxblood));
  text-decoration:none;color:var(--ink);height:100%}
.card:hover{color:var(--ink)}
.card:hover .card-img{outline-color:var(--sec,var(--oxblood))}
.card-img{display:block;margin:16px 16px 0;aspect-ratio:16/10;overflow:hidden;
  background:var(--ink);outline:1px solid rgba(20,16,12,.28);outline-offset:-1px;
  box-shadow:0 2px 0 rgba(20,16,12,.14)}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-body{padding:20px 24px 26px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:clamp(21px,1.6vw,27px);margin:12px 0 10px}
.card .card-dek{font:400 17px/1.55 var(--serif);color:var(--quiet);margin:0 0 18px}
.card-foot{font:500 13px/1 var(--label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--oxblood)}
.card-foot a{color:var(--oxblood);text-decoration:none;border-bottom:2px solid var(--oxblood);padding-bottom:5px}
a.card-foot{border-bottom:2px solid var(--oxblood);padding-bottom:5px}
.card .card-foot{margin-top:auto}

.profile-grid{display:grid;gap:26px;grid-template-columns:1fr}
.profile-card{background:var(--mat);padding:0 0 24px}
.profile-card .p-photo{width:100%;aspect-ratio:16/10;object-fit:cover}
.profile-card.no-photo{padding-top:24px;border-top:3px solid var(--ochre)}
.profile-card h3{font-size:26px;margin:18px 24px 6px}
.profile-card .p-role{font:500 13px/1.3 var(--label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--oxblood);margin:0 24px 12px}
.profile-card p{margin:0 24px 12px;font-size:17px}
.profile-card .p-links,.profile-card .p-attr{font:400 15px/1.5 var(--serif);color:var(--quiet)}

.org-grid{display:grid;gap:2px;grid-template-columns:1fr}
.org-card{display:flex;flex-direction:column;gap:8px;background:var(--mat);
  border-top:5px solid var(--sec,var(--oxblood));
  padding:24px 24px 26px;text-decoration:none;color:var(--ink)}
.org-card:hover{background:#d6cab0;color:var(--ink)}
.org-name{font-family:var(--display);font-weight:800;font-size:clamp(20px,1.5vw,25px);line-height:1.12}
.org-host{font:500 13px/1.3 var(--label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--sec,var(--oxblood))}
.org-where{font:400 16px/1.45 var(--serif);color:var(--quiet);margin-top:auto}
.entity-ref{overflow-wrap:anywhere}

.further-grid,.related-links{display:grid;gap:2px;grid-template-columns:1fr;
  list-style:none;margin:0;padding:0}
.further-grid a,.related-links a{display:block;background:var(--mat);padding:20px 24px;
  text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;
  font-size:20px;line-height:1.2}
.further-grid a:hover,.related-links a:hover{background:#d6cab0}
.related-links .rel-sec{display:block;font:500 12px/1 var(--label);
  letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood);margin-bottom:8px}

.cat-list{list-style:none;margin:0;padding:0}

/* ── supporters ───────────────────────────────────────────── */
.supporters{}
.sponsor-run{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 2px}
.sponsor{
  flex:0 0 100%;min-height:96px;display:flex;align-items:center;
  background:var(--ink);color:var(--reversed);text-decoration:none;
  padding:20px 22px;
}
.sponsor .logo-box{display:flex;align-items:center;justify-content:flex-start;
  width:100%;height:52px;min-width:0}
.sponsor .logo-box img{max-height:52px;max-width:100%;width:auto;height:auto;
  object-fit:contain;opacity:.95}
.sponsor:hover .logo-box img{opacity:1}
.sponsor:hover{background:var(--oxblood);color:var(--reversed)}
.sponsor .sponsor-name{font:500 16px/1.25 var(--label);letter-spacing:.1em;
  text-transform:uppercase}
.sponsor.feat{background:var(--oxblood)}
.sponsor.feat:hover{background:#5c1218}
.sponsor.feat .sponsor-name{font-size:18px}
.sponsor-caption{font:400 16px/1.55 var(--serif);
  color:var(--quiet);margin:14px 0 0;max-width:60ch}

/* ── article ──────────────────────────────────────────────── */
.art-head{padding-block:44px 30px}
.art-head h1{font-size:clamp(32px,4.6vw,74px);margin:20px 0 22px;max-width:26em}
.art-head .lead{max-width:44em}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  margin-top:26px;font:500 13px/1 var(--label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--quiet)}
.art-meta a{color:var(--oxblood);text-decoration:none}

.reading{display:grid;grid-template-columns:1fr;gap:56px;justify-content:center;
  padding-block:44px}
.column{min-width:0;max-width:var(--prose);margin-inline:auto}
.column>h2{font-size:clamp(25px,2.4vw,36px);margin:44px 0 18px}
.column>h2:first-child{margin-top:0}
.column>p+h2{margin-top:44px}
.marginalia{min-width:0;display:flex;flex-direction:column;gap:34px}
/* every in-flow insertion gets room on both sides: 2x the paragraph gap, min 32 */
.insert{margin:max(52px,calc(var(--gap) * 2)) 0}
.insert:first-child{margin-top:0}
.breakout{width:100%}

.article-foot{border-top:3px solid var(--ink);margin-top:56px;padding:34px 0 60px}

/* ── homepage bands ───────────────────────────────────────── */
.pillars{display:grid;gap:2px;grid-template-columns:1fr}
.pillar{display:block;text-decoration:none;background:var(--sec,var(--oxblood));
  color:var(--reversed);padding:26px 26px 30px}
.pillar:hover{color:var(--reversed);filter:brightness(.9)}
.pillar .kicker{margin-bottom:16px;color:var(--reversed);letter-spacing:.24em}
.pillar h3{font-size:clamp(24px,2vw,32px);margin:0 0 10px}
.pillar p{font:400 17px/1.55 var(--serif);color:var(--reversed);margin:0}
.feature-split{display:grid;gap:34px;align-items:center}
.feature-split h2{font-size:clamp(30px,3.6vw,54px);margin:18px 0 18px}
.feature-split .f-body{font-size:clamp(18px,1.3vw,21px)}
.editorial{display:grid;gap:34px;grid-template-columns:1fr}
.record ol{list-style:none;display:grid;grid-template-columns:1fr;gap:28px 26px;margin:0;padding:0}
.record li{position:relative;border-top:2px solid var(--ink);padding-top:24px}
.record li::before{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;
  background:var(--oxblood);box-shadow:0 0 0 3px var(--paper);border-radius:50%}
.record a{display:block;text-decoration:none;color:inherit}
.record a:hover .r-when{color:var(--ink)}
.record .r-when{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(28px,2.2vw,36px);line-height:1;color:var(--oxblood);margin-bottom:10px}
.record .r-what{display:block;font:400 16px/1.5 var(--serif)}
.closing{display:grid;gap:22px;background:var(--mat);border-top:5px solid var(--oxblood);
  padding-block:40px}
.closing p{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,40px);
  line-height:1.22;margin:0;max-width:32em}
.closing-num{font-size:clamp(76px,9vw,164px);-webkit-text-stroke-width:1.6px;line-height:.76}
.closing-link{display:inline-block;justify-self:start;font:600 15px/1 var(--label);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  border:2px solid var(--oxblood);padding:17px 26px}
.closing-link:hover{background:var(--oxblood);color:var(--reversed)}
.bracket{width:26px;height:104px;flex:none;stroke:var(--oxblood);fill:none;stroke-width:2}

/* section page opener */
.sec-opener{position:relative;background:var(--ink)}
.sec-opener>img{width:100%;height:clamp(240px,36vw,540px);object-fit:cover;opacity:.9}
.sec-opener .scrim{position:absolute;inset:0;background:rgba(20,16,12,.6)}
.sec-opener .sec-title{position:absolute;inset:auto 0 0 0;padding-bottom:30px}
.sec-opener h1{color:var(--reversed);font-size:clamp(30px,5.2vw,72px);max-width:26em}
.sec-opener .sec-rule{height:3px;background:var(--oxblood)}
.sec-intro{display:grid;gap:26px}
.sec-intro p{font-family:var(--serif);font-size:clamp(18px,1.4vw,22px);margin:0}
.sec-count{font:500 14px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood)}
.lead-entry{display:grid;gap:30px;align-items:center;background:var(--mat)}
.lead-entry{border-top:5px solid var(--oxblood)}
.lead-entry .le-img{margin:18px 0 18px 18px;outline:1px solid rgba(20,16,12,.28);
  outline-offset:-1px;box-shadow:0 2px 0 rgba(20,16,12,.14)}
.lead-entry .le-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.lead-entry .le-body{padding:26px 28px 30px}
.lead-entry h2{font-size:clamp(26px,2.8vw,42px);margin:14px 0 14px}
.lead-entry p{font:400 19px/1.55 var(--serif);color:var(--quiet);margin:0 0 18px}
.lead-entry .card-foot{font:500 13px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood)}
.group-head{display:grid;align-items:center;gap:12px 18px;border-top:3px solid var(--ink);
  padding-top:18px;margin:0 0 30px}
.group-head>.plate{border:2px solid var(--oxblood);padding:9px 11px 7px;
  -webkit-text-stroke-color:var(--oxblood)}
.group-head .sec-count{grid-column:2}
.group-head h2{font-size:clamp(22px,2vw,30px)}
@media (max-width:999px){
  .mainnav ul{justify-content:flex-start;gap:0 20px}
  .mast-strap{text-align:left}
}
@media (min-width:600px){
  .pillars{grid-template-columns:repeat(2,1fr)}
  .editorial{grid-template-columns:repeat(2,1fr)}
  .sponsor{flex:0 0 calc((100% - 2px) / 2)}
  .record ol{grid-template-columns:repeat(2,1fr)}
  .lead-entry{grid-template-columns:1.1fr 1fr}
  .sec-intro{grid-template-columns:1.6fr 1fr;align-items:end}
}
@media (min-width:1000px){
  .pillars{grid-template-columns:repeat(3,1fr)}
  .cards{gap:56px 40px}
  .sponsor{flex:0 0 calc((100% - 6px) / 4);min-height:88px}
  .feature-split{grid-template-columns:1.05fr 1fr;gap:56px}
  .closing{grid-template-columns:auto minmax(0,1fr);gap:24px 46px;align-items:center;padding-block:52px}
  .closing-num{grid-row:span 2;align-self:center}
  .closing p,.closing-link{grid-column:2}
  .editorial{grid-template-columns:1.6fr 1fr 1fr;gap:44px}
  .lead-entry{grid-template-columns:1.25fr 1fr}
  .record ol{grid-template-columns:repeat(4,1fr)}
  .lead-entry .le-body{padding:34px 40px 38px}
}
@media (min-width:2000px){
  .editorial{gap:52px}
  .record li{flex:0 0 268px}
}
.article-foot h2{font-size:26px;margin-bottom:20px}

/* ── footer ───────────────────────────────────────────────── */
.sitefoot{background:var(--oxblood);color:var(--reversed);padding:52px 0 40px}
.foot-grid{display:grid;gap:36px}
.foot-name{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(28px,3vw,42px);letter-spacing:-.03em;line-height:.92;margin-bottom:16px}
.foot-name em{font-style:normal;color:var(--gold)}
.sitefoot p{font-size:18px;max-width:42em;margin:0;color:rgba(247,242,232,.86)}
.foot-nav h2{font:600 12px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--reversed);margin:0 0 16px;padding-bottom:12px;
  border-bottom:1px solid rgba(247,242,232,.28)}
.foot-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  font:600 17px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.foot-nav a{display:flex;align-items:center;gap:11px;color:rgba(247,242,232,.9);text-decoration:none}
.foot-nav a::before{content:"";width:10px;height:10px;flex:none;
  background:var(--chip,transparent);box-shadow:inset 0 0 0 1.5px rgba(247,242,232,.55)}
.foot-nav a[style]::before{width:13px;height:13px;box-shadow:inset 0 0 0 1px rgba(247,242,232,.75)}
@supports (background:color-mix(in srgb,red,blue)){
  .foot-nav a[style]::before{background:color-mix(in srgb,var(--chip) 42%,#F7F2E6);box-shadow:none}
}
.foot-nav a:hover{color:#fff}
.foot-nav a:hover::before{box-shadow:inset 0 0 0 1.5px #fff}
.foot-base{border-top:1px solid rgba(247,242,232,.28);margin-top:40px;padding-top:18px;
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font:500 12px/1.4 var(--label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--reversed)}
.sitefoot a{color:rgba(247,242,232,.88)}

/* ── expander for long lists (CSS only) ───────────────────── */
.more-toggle{display:block;font:500 13px/1 var(--label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--oxblood);cursor:pointer;padding:16px 0 0}
.more-box{max-height:0;overflow:hidden;transition:max-height .25s}
.more-check{position:absolute;left:-9999px}
.more-check:checked+.more-box{max-height:4000px}
.more-check:checked~.more-toggle .more-open{display:none}
.more-open,.more-close{display:inline}
.more-check:not(:checked)~.more-toggle .more-close{display:none}

/* ── widths that keep responding upward ───────────────────── */
@media (max-width:999px){
  .mainnav ul{justify-content:flex-start;gap:0 20px}
  .mast-strap{text-align:left}
}
@media (min-width:600px){
  :root{--pad:26px;--body:18px}
  .opener-grid{grid-template-columns:1fr}
  .timeline li{grid-template-columns:170px 1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .org-grid{grid-template-columns:repeat(2,1fr)}
  .further-grid,.related-links{grid-template-columns:repeat(2,1fr)}
  .profile-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  :root{--sheet:1180px;--pad:34px;--prose:70ch;--body:19px}
  .org-grid{grid-template-columns:repeat(4,1fr)}
  .band{padding-block:76px}
  .opener{padding-block:70px}
  .opener-grid{grid-template-columns:1fr minmax(440px,50%);gap:56px;align-items:stretch}
  .opener .article-figure img{min-height:440px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1.6fr 1fr 1fr;gap:56px}
  .art-head{padding-block:60px 34px}
}
@media (min-width:1280px){
  :root{--sheet:1360px;--prose:72ch;--body:19px;--gap:28px}
  .reading{grid-template-columns:minmax(0,var(--prose)) minmax(240px,300px);
    column-gap:64px}
  .record ol{grid-template-columns:repeat(7,1fr);gap:0 20px}
  .breakout{grid-column:1 / -1;width:100%}
  .marginalia{display:block}
  .marginalia>*{align-self:start}
  .marginalia>*+*{margin-top:34px}
  .further-grid,.related-links{grid-template-columns:repeat(3,1fr)}
}
/* above the laptop cap — the page gains, not the margin */
@media (min-width:1600px){
  :root{--sheet:1520px;--prose:76ch;--body:20px;--pad:40px;--gap:30px}
  .reading{grid-template-columns:minmax(0,var(--prose)) minmax(300px,340px);
    column-gap:80px}
  .opener h1{font-size:80px}
  .cards{gap:68px 44px}
  .sponsor{min-height:96px}
}
@media (min-width:2000px){
  :root{--sheet:1840px;--prose:80ch;--body:21px;--pad:48px}
  .reading{grid-template-columns:minmax(0,var(--prose)) minmax(360px,420px);
    column-gap:96px}
  .cards{grid-template-columns:repeat(4,1fr)}
  .band{padding-block:92px}
}
@media (min-width:2400px){
  :root{--sheet:2200px;--prose:84ch;--body:22px;--pad:56px}
  .reading{grid-template-columns:minmax(0,var(--prose)) minmax(420px,480px);
    column-gap:112px}
  .plate--lg{font-size:112px}
  .opener h1{font-size:92px}
}

@media print{
  .masthead,.mainnav,.supporters,.sitefoot{display:none}
  body{background:#fff}
}


/* ── narrow screens: compact the chrome, stack what overlays ── */
@media (max-width:599px){
  :root{--pad:18px;--body:17px;--gap:22px}

  /* masthead: the name band shrinks, the menu becomes a two-column list */
  .mast-top{padding:16px 0 10px;gap:8px}
  .mast-strap{font-size:11px;line-height:1.45;max-width:none}
  .mainnav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 14px;font-size:14px;letter-spacing:.06em}
  .mainnav a{padding:11px 0 10px;gap:8px;border-bottom-width:2px}
  .mainnav a::before{width:8px;height:8px}
  .divisions div{gap:8px 16px;padding:9px var(--pad);font-size:12px}

  /* band heads stack: numeral above the heading */
  .band-head,.group-head{grid-template-columns:minmax(0,1fr);gap:12px;
    padding-top:16px;margin-bottom:26px}
  .band-head>.plate,.group-head>.plate{grid-row:auto;justify-self:start;
    font-size:24px;padding:8px 10px 6px}
  .band-head>h2,.band-head>.band-note,.group-head .sec-count{grid-column:1}
  .band{padding-block:44px}

  /* section openers: the title sits under the photograph, not over it */
  .sec-opener>img{height:220px}
  .sec-opener .scrim{display:none}
  .sec-opener .sec-title{position:static;background:var(--ink);
    padding-block:22px 24px}
  .sec-opener h1{font-size:28px}

  /* figures and inserts */
  .opener{padding-block:38px}
  .opener .article-figure img{min-height:220px}
  .fig--plate,.fig--mat{padding:12px}
  .figcap{gap:6px 14px}
  .pullquote{padding:22px 20px;gap:16px}
  .pullquote p{font-size:21px}
  .insert{margin:46px 0}
  .callout{padding:24px 20px 26px}
  .notes-block h3{font-size:22px}

  /* cards and lists */
  .lead-entry .le-img{margin:14px 14px 0}
  .lead-entry .le-body{padding:20px 20px 24px}
  .card-img{margin:12px 12px 0}
  .card-body{padding:16px 20px 22px}
  .org-card{padding:20px}
  .further-grid a,.related-links a{padding:16px 20px;font-size:18px}

  /* closing plate and footer */
  .closing{padding-block:30px;gap:16px}
  .closing-num{font-size:64px}
  .closing-link{padding:14px 18px;font-size:13px;letter-spacing:.16em}
  .sitefoot{padding:38px 0 30px}
  .foot-grid{gap:28px}
  .foot-nav ul{font-size:15px}
  .foot-base{margin-top:28px;font-size:11px;letter-spacing:.14em}

  /* article furniture */
  .art-head{padding-block:30px 22px}
  .reading{padding-block:30px;gap:46px}
  .article-foot{margin-top:40px;padding:26px 0 44px}
  .record li{padding-top:20px}
  .statblock{padding:16px 18px}
  .map-figure .map-slot{aspect-ratio:4/3}
  .sponsor{min-height:84px;padding:16px 18px}
  .sponsor .logo-box{height:44px}
  .sponsor .logo-box img{max-height:44px}
}
@media (max-width:380px){
  .mainnav ul{font-size:13px;gap:0 10px}
  .mast-name{font-size:32px}
}

/* 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-run{flex-wrap:wrap!important}
.sponsor-run > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!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-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* 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:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.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:5;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!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}

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


/* sp-row-ground: every insertion row on the same black.
   .sponsor.feat was painted var(--oxblood), so the top row read burgundy against the --ink
   #14100C of the rows below it. The hover state keeps oxblood — that is the interaction, not
   the resting colour. */
.sponsor.feat{background:var(--ink)!important}

/* op-nav-collapse: this nav printed 178px 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 "rule-flank", 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 (18px) 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 (940px here), where the button appears and the nav starts closed.
   Folded with the "display" technique and marked with the "plus" icon — the mechanism
   is deliberately not identical across the fleet either. */
.index-toggle{display:none}
@media (max-width:940px){
  .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:auto;border:0;padding:10px 0;letter-spacing:.18em;margin-inline:18px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .index-toggle::before,.index-toggle::after{content:"";flex:1 1 auto;height:1px;background:currentColor;opacity:.4}
  .index-toggle-bars{width:11px;height:11px;flex:none;position:relative;border-top:1.5px solid currentColor;margin-top:-1px;box-shadow:inset 5px 0 0 -3.75px currentColor}
  .mainnav.sheet{display:none}
  .index-toggle-c:checked ~ .mainnav.sheet{display:block}
  .masthead:has(> .index-toggle){display:flow-root}
  .index-toggle:not(:has(~ .mainnav.sheet)){display:none}
}

/* op-footer-compact: the footer printed 6 rows for 6 link(s) in
   1 list(s) — 687px 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,
   measured 687 -> 555px (19% 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(12px,3.89vw,56px)!important;row-gap:4px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 8 tiles,
   620px at 390, 6% of the whole page. Two columns bring it to
   308px (50% shorter). Checked before writing: no new overflow, smallest mark still
   132px wide, longest blurb 0 lines, tile heights 76-76px.
   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.
   Only the tier(s) that were one-per-row are touched (.sponsor-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){
  .sponsor-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:2px!important}
    .sponsor-run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-run > * *{min-width:0!important;max-width:100%}
    .sponsor-run img,.sponsor-run svg{max-width:100%;height:auto}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; margin: 0px;}
.callout h2:where(.rt-h3){font-size: 23px; margin: 0px 0px 18px;}
.notes-block h2:where(.rt-h3){font-size: clamp(22px, 1.9vw, 30px); margin: 0px 0px 24px;}
@media (max-width: 599px){.notes-block h2:where(.rt-h3){font-size: 22px;}}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > span.card-img > img,
  article.lead-entry > figure.le-img > img,
  aside.marginalia > figure.article-figure.fig--inset > img,
  div.feature-split.sheet > figure.article-figure.fig--mat > img,
  div.insert > figure.article-figure.breakout.fig--mat > img,
  div.insert > figure.article-figure.fig--inset > img,
  div.opener-grid.sheet > figure.article-figure.fig--mat > img,
  div.sheet > figure.article-figure.fig--mat > img,
  div.sheet > figure.article-figure.fig--plate > img,
  main > div.sec-opener > img){height:auto}
/* op-img-dims:end */

/* op-odd-tier-lead: money_slots changed a tier's size — .sponsor-run (5 tiles) now show an ODD count on phones, so the lead tile takes the whole row (operator: "the 1st item in such rows to be 100% width, then split"). Parity-guarded: it steps aside again when the count is even. */
@media (max-width:640px){
  .sponsor-run:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-grow-same-size: an added partner would have wrapped onto a new row ALONE and stretched across the grid (flex rows that grow). Same minimum (basis 220px, min-width min(220px, 100%)), same columns at every width, a short row keeps its siblings' size — applied at the moment of adding, as the operator chose (2026-09-23). Phones keep their own rules. */
@media (min-width:641px){
  div.sponsor-run:nth-of-type(3){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
}
/* op-grow-same-size:end */