/* mujca.com — "Plate and Bridge"
   Palette roles: ground · ink · accent · secondary · area
   ------------------------------------------------------------------ */
:root{
  --ground:#F2F3F5;      /* page ground */
  --paper:#FFFFFF;       /* mats, plates, cards */
  --tint:#E8EBEF;        /* quiet band ground */
  --ink:#14161A;         /* text, rules at weight */
  --ink-2:#2B2F36;       /* body */
  --ink-3:#5B6169;       /* supporting */
  --ink-4:#7A818B;       /* credits, fine print */
  --rule:#C9CDD3;        /* hairlines */
  --accent:#2B3FA6;      /* ultramarine: labels, links, section marks */
  --accent-lift:#8FA6E0; /* accent on the dark area */
  --secondary:#B4351F;   /* oxide red: flags, the error a mechanism defeats */
  --area:#101319;        /* saturated dark ground for full-bleed bands */
  --display:"Petrona",Georgia,"Times New Roman",serif;
  --text:"Asap",system-ui,-apple-system,"Segoe UI",sans-serif;
  --measure:70ch;
  --gut:clamp(20px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--secondary)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-0.02em;line-height:1.08;margin:0}
p{margin:0 0 1em;text-wrap:pretty}
hr{border:0;border-top:1px solid var(--rule);margin:0}
.container{max-width:1360px;margin:0 auto;padding-inline:var(--gut)}
.container--narrow{max-width:1040px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--ground);padding:10px 14px;z-index:99}

/* ---------- device system: drawn marks -------------------------- */
.ico{width:22px;height:22px;flex:none;color:var(--accent)}
.ico--lg{width:34px;height:34px}
.emblem{color:var(--accent);flex:none}

/* ---------- labels -------------------------------------------- */
.kicker{
  font-size:12.5px;letter-spacing:0.2em;text-transform:uppercase;font-weight:600;
  color:var(--accent);display:flex;align-items:center;gap:10px;
}
.kicker--flag{color:var(--secondary)}
.eyebrow{font-size:12.5px;letter-spacing:0.2em;text-transform:uppercase;font-weight:600;color:var(--ink-4)}
.rule-heavy{border-top:3px solid var(--ink)}
.rule-hair{border-top:1px solid var(--rule)}

/* ---------- masthead: dominant (home) -------------------------- */
.masthead{border-bottom:3px solid var(--ink);background:var(--ground)}
.masthead__inner{
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(420px,1.15fr);
  gap:clamp(24px,4vw,64px);align-items:start;padding:32px 0 22px;
}
.masthead__lead{display:flex;flex-direction:column}
.masthead__note{
  margin:22px 0 0;border-top:1px solid var(--ink);padding-top:12px;
  font-family:var(--display);font-size:19px;line-height:1.36;color:var(--ink);max-width:30ch;
}
.masthead__cta{margin:14px 0 0;display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;font-weight:600}
.wordmark{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.wordmark__name{
  display:block;
  font-family:var(--display);font-weight:800;
  font-size:clamp(52px,8.4vw,104px);line-height:0.82;letter-spacing:-0.03em;color:var(--ink);
}
.wordmark__line{
  display:block;margin-top:14px;font-family:var(--display);font-style:italic;
  font-size:clamp(17px,1.6vw,21px);color:var(--ink-2);max-width:32ch;
}
.index{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px clamp(20px,3vw,34px)}
.index__sec{border-top:1px solid var(--ink);padding-top:8px;margin-bottom:12px}
.index__head{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink)}
.index__head:hover{color:var(--secondary)}
.index__head:hover .ico{color:var(--secondary)}
.index__entries{display:flex;flex-direction:column;gap:2px;margin-top:3px;padding-left:31px}
.index__entries a{font-size:14px;color:var(--ink-3)}
.index__entries a:hover{color:var(--secondary)}

/* ---------- masthead: compact (inner pages) -------------------- */
.bar{position:sticky;top:0;z-index:50;border-bottom:2px solid var(--ink);background:var(--ground)}
.bar__inner{display:flex;align-items:center;gap:clamp(14px,2vw,28px);padding:11px 0;flex-wrap:nowrap}
.bar__mark{display:flex;align-items:center;gap:11px;flex:none;padding-right:clamp(8px,2vw,20px);border-right:1px solid var(--rule);align-self:stretch}
.bar__mark .emblem{width:40px;height:40px}
.bar__name{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-0.03em;color:var(--ink)}
.bar__nav{display:flex;flex:1;justify-content:flex-start;margin-left:auto;align-items:center;flex-wrap:nowrap;gap:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.bar__nav::-webkit-scrollbar{display:none}
.bar__nav a{
  display:flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 11px;
  font-family:var(--text);font-size:12.5px;letter-spacing:0.11em;text-transform:uppercase;font-weight:600;color:var(--ink-3);
}
.bar__nav a .ico{width:17px;height:17px;color:var(--ink-4)}
.bar__nav a:hover{color:var(--ink);background:var(--tint)}
.bar__nav a:hover .ico{color:var(--accent)}
.bar__nav a.is-here{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}
.bar__nav a.is-here .ico{color:var(--accent)}
.bar__nav a.all{flex:none;margin-left:12px;border:1px solid var(--rule);color:var(--accent)}
.bar__nav a.all:hover{border-color:var(--accent);background:var(--paper);color:var(--accent)}

/* ---------- bands --------------------------------------------- */
.band{padding:clamp(40px,6vw,70px) 0}
.band--tight{padding:clamp(28px,4vw,44px) 0}
.band--tint{background:var(--tint);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band--area{background:var(--area);color:#C8CDD6}
.band--area h2,.band--area h3,.band--area strong{color:#F2F3F5}
.band--quiet{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(34px,5vw,54px) 0}
.band__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:3px solid var(--ink);padding-bottom:12px;margin-bottom:6px}
.band__head h2{font-size:clamp(24px,2.6vw,32px)}
.quiet-line{margin:0;font-family:var(--display);font-size:clamp(22px,2.8vw,34px);line-height:1.32;max-width:34ch}
.quiet-line--centre{margin-inline:auto;text-align:center;max-width:40ch}

/* ---------- figure system ------------------------------------- */
/* 1 · mat — photograph on a paper mat with drawn corner marks     */
figure{margin:0}
figcaption{margin-top:14px}
.cap{font-family:var(--display);font-size:19px;line-height:1.42;color:var(--ink);max-width:52ch}
.cap--tight{font-size:17px}
.credit{display:block;margin-top:7px;font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-4)}
.band--area .cap{color:#E4E7EC}
.band--area .credit{color:#8B929C}

.fig-mat{position:relative}
.fig-mat__plate{position:relative;background:var(--paper);border:1px solid var(--rule);padding:14px}
.fig-mat__plate img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.corner{position:absolute;width:24px;height:24px;color:var(--accent)}
.corner--tl{top:-8px;left:-8px}
.corner--tr{top:-8px;right:-8px}
.corner--bl{bottom:-8px;left:-8px}
.corner--br{bottom:-8px;right:-8px}

/* 2 · bleed — full-width band, ink plate over the photograph      */
.fig-bleed{position:relative;background:var(--area)}
.fig-bleed__img{position:relative;width:100%;height:clamp(300px,52vw,620px)}
.fig-bleed__img img{width:100%;height:100%;object-fit:cover}
.fig-bleed__plate{
  position:absolute;left:0;bottom:0;width:min(720px,62%);
  background:var(--ink);color:var(--ground);padding:clamp(20px,3vw,36px) clamp(20px,3vw,40px);
}
.fig-bleed__plate .kicker{color:var(--accent-lift)}
.fig-bleed__plate h1,.fig-bleed__plate h2{color:var(--ground);font-size:clamp(28px,4vw,52px)}
.fig-bleed__plate p{margin:14px 0 0;color:#C8CDD6;font-size:clamp(16px,1.5vw,19px);max-width:46ch}
.fig-bleed__cap{position:relative;z-index:2;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:14px 0 0}
.fig-bleed__cap .cap{font-style:italic;font-size:17px;color:#E4E7EC}

/* 3 · plate — wide tinted plate that breaks the reading measure   */
.fig-plate{background:var(--tint);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(20px,3vw,32px) 0}
.fig-plate__img{position:relative}
.fig-plate__img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.fig-plate__img::after{content:"";position:absolute;inset:0;background:var(--accent);opacity:0.08;pointer-events:none}
.fig-plate figcaption{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(200px,1fr);gap:clamp(20px,4vw,44px)}

/* 4 · inset — small figure in the column, caption hanging beside  */
.fig-inset{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,220px);gap:22px;align-items:start;margin:32px 0}
.fig-inset img{border:1px solid var(--rule);padding:8px;background:var(--paper);aspect-ratio:4/3;object-fit:cover;width:100%}
.fig-inset figcaption{margin:0;border-top:2px solid var(--secondary);padding-top:10px}
.fig-inset .cap{font-size:16px;max-width:none}

/* chips in registers */
.chip{width:104px;height:68px;object-fit:cover;border:1px solid var(--rule);background:var(--paper)}

/* ---------- register (the signature block) --------------------- */
.reg{border-bottom:1px solid var(--rule)}
.reg__row{
  display:grid;grid-template-columns:104px minmax(0,1.3fr) minmax(0,0.9fr) minmax(0,1.5fr);
  gap:clamp(14px,2vw,22px);align-items:center;padding:16px 0;border-top:1px solid var(--rule);
}
.reg__row:hover{background:var(--tint)}
.reg__name{font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink);display:block}
.reg__by{font-size:14px;color:var(--ink-3)}
.reg__err{font-size:15px;color:var(--ink-2)}
.reg__err b{color:var(--secondary);font-weight:600}

/* ---------- cards / lists ------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(22px,3vw,36px)}
.card{display:flex;flex-direction:column;height:100%}
.card__fig{margin-bottom:16px}
.card h3{font-size:clamp(21px,2.2vw,27px);margin-bottom:10px;min-height:2.2em}
.card p{color:var(--ink-2);font-size:16px}
.card__more{margin-top:auto;padding-top:12px;font-size:13px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600}

.cat-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px 0;align-items:start;color:var(--ink)}
.cat-list a:hover{background:var(--tint);color:var(--secondary)}
.cat-list .n{font-family:var(--display);font-weight:700;font-size:17px;color:var(--accent);padding-top:4px}
.cat-list h3{font-size:23px;margin-bottom:6px}
.cat-list p{margin:0;font-size:16px;color:var(--ink-3)}

.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 clamp(20px,3vw,34px)}
.related-links li{border-top:2px solid var(--ink);padding:12px 0}
.related-links a{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.2;color:var(--ink);display:block}
.related-links a:hover{color:var(--secondary)}
.related-links span{display:block;font-family:var(--text);font-weight:400;font-size:14.5px;color:var(--ink-3);margin-top:6px}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.further-grid a{display:block;background:var(--paper);border:1px solid var(--rule);padding:16px 18px;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2;color:var(--ink)}
.further-grid a:hover{border-color:var(--accent);color:var(--secondary)}

/* profile / org cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(20px,3vw,30px)}
.profile-card{display:flex;flex-direction:column;height:100%;border-top:3px solid var(--ink);padding-top:14px}
.profile-card .p-photo{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--rule);padding:8px;background:var(--paper);margin-bottom:12px}
.profile-card h3{font-size:22px;margin-bottom:4px}
.profile-card .p-role{margin:0 0 8px;font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
.profile-card p{font-size:15.5px;color:var(--ink-2)}
.profile-card .p-links{margin-top:auto;font-size:14px}
.profile-card .p-attr{font-size:12.5px;color:var(--ink-4)}
.profile-card.no-photo{background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--ink);padding:16px 18px}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.org-card{display:flex;flex-direction:column;gap:4px;background:var(--paper);border:1px solid var(--rule);padding:14px 16px}
.org-card:hover{border-color:var(--accent)}
.org-logo{max-height:34px;width:auto;object-fit:contain}
.org-name{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink)}
.org-host{font-size:13px;letter-spacing:0.06em;color:var(--ink-4)}
.entity-ref{font-weight:600;border-bottom:1px solid var(--rule)}

/* ---------- article ------------------------------------------- */
.article-head{padding:clamp(34px,5vw,60px) 0 clamp(20px,3vw,34px)}
.article-head h1{font-size:clamp(34px,5.4vw,62px);letter-spacing:-0.03em;max-width:26ch}
.lead{
  margin:20px 0 0;font-family:var(--display);font-style:italic;
  font-size:clamp(19px,2.1vw,25px);line-height:1.4;color:var(--ink-2);max-width:44ch;
}
.prose{max-width:calc(var(--measure) + 2 * var(--gut));padding-inline:var(--gut);margin:0 auto;font-size:18.5px;line-height:1.66;color:var(--ink-2)}
.prose > p{margin:0 0 1.15em}
.prose h2{font-size:clamp(25px,3vw,34px);margin:1.6em 0 0.55em;color:var(--ink)}
.prose h3{font-size:21px;margin:1.5em 0 0.4em;color:var(--ink)}
.prose a{border-bottom:1px solid var(--rule)}
.prose strong{color:var(--ink)}
.prose .dropcap::first-letter{
  font-family:var(--display);font-weight:700;font-size:4.3em;line-height:0.78;
  float:left;margin:0.06em 0.09em 0 0;color:var(--accent);
}
.pullquote{margin:34px 0;border-top:3px solid var(--ink);border-bottom:1px solid var(--rule);padding:18px 0}
.pullquote p{margin:0;font-family:var(--display);font-size:clamp(22px,2.6vw,29px);line-height:1.26;color:var(--ink)}
.blockquote{margin:30px 0;border-left:3px solid var(--accent);padding:2px 0 2px 20px}
.blockquote p{margin:0 0 8px;font-family:var(--display);font-size:20px;line-height:1.4}
.blockquote cite{font-style:normal;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-4)}
.callout{margin:32px 0;background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--secondary);padding:20px 22px}
.callout p{margin:0;font-size:17px;color:var(--ink-2)}
.callout .callout__label{display:block;font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;color:var(--secondary);margin-bottom:8px;font-family:var(--text)}
.note{font-size:15.5px;color:var(--ink-3);border-left:2px solid var(--rule);padding-left:14px}

/* notes-for-design material */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0 clamp(30px,5vw,64px)}
.timeline li{position:relative;padding:0 0 20px 26px;border-left:2px solid var(--rule)}
.timeline li::before{
  content:"";position:absolute;left:-6px;top:7px;width:10px;height:10px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px var(--tint);
}
.timeline li:last-child{border-left-color:transparent}
.timeline li:last-child::after{content:"";position:absolute;left:-2px;top:0;height:7px;width:2px;background:var(--rule)}
.timeline .t-when{display:block;font-family:var(--display);font-weight:700;font-size:21px;line-height:1;color:var(--ink);margin-bottom:5px}
.timeline .t-what{display:block;font-size:16.5px;line-height:1.45;color:var(--ink-2);max-width:44ch}
.mech{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 clamp(20px,3vw,34px)}
.mech > div{border-top:2px solid var(--secondary);padding:12px 0 16px}
.mech b{display:block;font-family:var(--display);font-size:19px;color:var(--ink);margin-bottom:4px}
.mech span{font-size:15.5px;color:var(--ink-2)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(16px,2vw,24px)}
.statblock{background:var(--paper);border:1px solid var(--rule);padding:18px 20px}
.stat-num{display:block;font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,44px);line-height:1;color:var(--accent)}
.stat-label{display:block;margin-top:8px;font-size:14.5px;color:var(--ink-3)}
.datatable,.versus{width:100%;border-collapse:collapse;font-size:16px}
.datatable caption,.versus caption{text-align:left;font-size:12.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-4);font-weight:600;padding-bottom:10px}
.datatable th,.versus th{text-align:left;font-family:var(--text);font-size:12.5px;letter-spacing:0.12em;text-transform:uppercase;background:var(--ink);color:var(--ground);padding:10px 12px;font-weight:600}
.datatable td,.versus td{padding:12px;border-bottom:1px solid var(--rule);vertical-align:top;background:var(--paper)}
.versus td:first-child{font-family:var(--display);font-weight:700}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-size:15px;color:var(--ink-3)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.gallery img{aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule);padding:6px;background:var(--paper)}
.map-figure .map-slot{width:100%;height:380px;border:1px solid var(--rule);background:var(--tint)}

/* ---------- supporters directory ------------------------------ */
.supporters{border-top:3px solid var(--ink)}
.sponsor-group{border-bottom:1px solid var(--rule)}
.sponsor{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,44%);
  gap:clamp(14px,3vw,32px);align-items:baseline;padding:15px 0;border-top:1px solid var(--rule);color:var(--ink);
}
.sponsor:hover{background:var(--tint);color:var(--secondary)}
.sponsor img{display:none}          /* this site's supporters are set as type, not as marks */
/* If marks are ever switched on, the box is landscape, height-capped and constant —
   proven against stand-ins at 5.8:1, 1.4:1 and 14:1 in slots 1-3:
   .sponsor img{display:block;width:260px;height:56px;max-width:100%;object-fit:contain;background:var(--area);padding:6px} */
.sponsor-name{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.2}
.sponsor-blurb{font-size:15.5px;color:var(--ink-3);line-height:1.45}
.sponsor.feat .sponsor-name{font-size:24px}


/* ---------- footer ------------------------------------------- */
.foot{background:var(--ink);color:#8B929C;margin-top:clamp(30px,5vw,56px)}
.foot__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,4vw,44px);padding:clamp(30px,4vw,48px) 0}
.foot a{color:#C8CDD6}
.foot a:hover{color:#fff}
.foot h4{font-family:var(--text);font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent-lift);margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:15px}
.foot__mark{display:flex;align-items:center;gap:14px}
.foot__mark .name{font-family:var(--display);font-weight:800;font-size:30px;color:var(--ground);letter-spacing:-0.02em}

/* ---------- responsive --------------------------------------- */
@media (max-width:1180px){
  .masthead__inner{grid-template-columns:1fr;align-items:start;gap:clamp(22px,3vw,30px)}
}
@media (max-width:900px){
  .index{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .fig-bleed__img{height:auto}
  .fig-bleed__img img{aspect-ratio:16/10;height:auto}
  .fig-bleed__plate{position:static;width:100%}
  .fig-plate figcaption{grid-template-columns:1fr}
  .fig-inset{grid-template-columns:1fr}
  .fig-inset img{aspect-ratio:16/10}
  .reg__row{grid-template-columns:72px minmax(0,1fr);gap:14px}
  .chip{width:72px;height:52px}
  .reg__by,.reg__err{grid-column:2}
  .timeline li{grid-template-columns:1fr;gap:2px}
  .sponsor{grid-template-columns:1fr;gap:6px}
  .prose{font-size:17.5px}
}
@media (max-width:420px){
  body{font-size:16px}
  .wordmark{gap:12px}
  .bar__name{font-size:27px}
}
@media print{
  .bar,.masthead,.foot,.supporters{display:none}
  body{background:#fff}
}

/* ---------- generic article figure (spec class) ---------------- */
.article-figure{margin:32px 0}
.article-figure img{width:100%;background:var(--paper);border:1px solid var(--rule);padding:12px;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{border-top:2px solid var(--accent);padding-top:10px;max-width:56ch}
.article-figure figcaption .credit{display:block}
.sg-sec{padding:34px 0;border-top:1px solid var(--rule)}
.sg-sec > h2{font-size:22px;margin-bottom:6px}
.sg-sec > p.eyebrow{margin:0 0 18px}

/* links and rules inside the saturated dark band */
.band--area .related-links li{border-top-color:#3B424B}
.band--area .related-links a{color:#F2F3F5}
.band--area .related-links a:hover{color:var(--accent-lift)}
.band--area .related-links span{color:#98A0AA}
.band--area a{color:var(--accent-lift)}
.wordmark > span{display:block}

/* ---------- ledger: the register as five plates ---------------- */
.ledger{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));
  gap:clamp(16px,1.8vw,24px);border-top:3px solid var(--ink);margin-top:16px;padding-top:24px;
}
.ledger__item{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);color:var(--ink)}
.ledger__item:hover{border-color:var(--accent);color:var(--ink)}
.ledger__img{position:relative;display:block;padding:10px 10px 0}
.ledger__img img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.ledger__no{
  position:absolute;left:10px;top:10px;min-width:34px;padding:4px 8px;
  background:var(--ink);color:var(--ground);font-family:var(--display);font-weight:700;font-size:14px;
  letter-spacing:0.08em;text-align:center;
}
.ledger__body{display:flex;flex-direction:column;gap:2px;padding:14px 16px 16px;flex:1}
.ledger__name{font-family:var(--display);font-weight:700;font-size:23px;line-height:1.1}
.ledger__by{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-4);font-weight:600}
.ledger__err{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);font-size:15px;color:var(--ink-2);line-height:1.4}
.ledger__err b{display:block;font-family:var(--text);font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--secondary);margin-bottom:5px}
.ledger__item:hover .ledger__name{color:var(--secondary)}

/* ---------- supporters: same directory, a third of the height --- */
.sponsor-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 clamp(16px,2.4vw,30px)}
.sponsor{padding:10px 0;grid-template-columns:minmax(0,1fr)}
.sponsor.feat{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(220px,46%);gap:clamp(14px,3vw,32px);padding:13px 0}
.sponsor-name{font-size:18px}
.sponsor.feat .sponsor-name{font-size:22px}
@media (max-width:520px){
  .sponsor-group{grid-template-columns:1fr}
  .sponsor.feat{grid-template-columns:1fr}
}

/* two-up cards: tighter meta, no reserved gap under the title */
.card .kicker{font-size:11.5px;letter-spacing:0.16em}
.card .kicker .ico{width:17px;height:17px}
.card__fig{margin-bottom:14px}
.card__fig .credit{margin-top:9px;font-size:11px}
.card h3{min-height:0;margin:10px 0 8px}
.card p{font-size:16px}
.card__more{font-size:12px;letter-spacing:0.16em}

/* supporters: a distinguished principal pair, then the directory */
.supporters__label{margin:0 0 10px;color:var(--ink-4)}
.sponsor-group--lead{border-bottom:0;row-gap:10px;margin-bottom:30px}
.sponsor-group--lead .sponsor{border-top:0}
.sponsor.feat{
  background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--accent);
  padding:16px 20px;align-items:start;
}
.sponsor.feat:hover{background:var(--paper);border-color:var(--accent)}
.sponsor.feat .sponsor-name{font-size:23px}
.sponsor.feat .sponsor-blurb{font-size:16px;color:var(--ink-2)}
.sponsor-group--rest{border-top:1px solid var(--ink)}
.sponsor-group--rest .sponsor{padding:9px 0;border-top:1px solid var(--rule)}
.sponsor-group--rest .sponsor-name{font-size:17px;font-weight:600}
@media (max-width:520px){.sponsor.feat{padding:14px 16px}}

.card__credit{margin:14px 0 0;order:0;font-size:11px;color:var(--ink-4);letter-spacing:0.06em;text-transform:uppercase}

.band__deck{margin:14px 0 0;font-family:var(--display);font-size:clamp(19px,2vw,23px);line-height:1.4;color:var(--ink-2);max-width:60ch}

.wordmark .emblem{margin-bottom:10px}

/* ================= article: a set piece, not a wall ============== */
/* running head for each H2: an ordinal, the title, a rule to the edge */
.prose h2.mark{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;margin:2em 0 0.6em}
.prose h2.mark .n{
  font-family:var(--text);font-size:12px;letter-spacing:0.18em;font-weight:700;color:var(--accent);
  border:1px solid var(--accent);padding:4px 7px;line-height:1;align-self:center;
}
.prose h2.mark .t{position:relative}
.prose h2.mark .t::after{
  content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--ink);
}

/* lead: full-bleed cover with the caption on a paper plate overlapping the image */
.fig-cover{position:relative;background:var(--area);margin-bottom:clamp(26px,4vw,44px)}
.fig-cover__img{width:100%;height:clamp(280px,46vw,560px)}
.fig-cover__img img{width:100%;height:100%;object-fit:cover;display:block}
.fig-cover figcaption{position:relative;max-width:1360px;margin:-34px auto 0;padding-inline:var(--gut)}
.fig-cover__plate{
  display:block;background:var(--ground);border-left:3px solid var(--accent);
  padding:16px 20px;max-width:640px;
}
.fig-cover .cap{font-size:18px;max-width:46ch}
@media (max-width:700px){
  .fig-cover figcaption{margin-top:0}
  .fig-cover__plate{max-width:none;border-left:0;border-top:3px solid var(--accent);padding:16px 0}
}

/* mid-article: a container-wide band, image edge to edge inside it */
.fig-band{background:var(--tint);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(22px,3vw,34px) 0;margin:clamp(30px,4vw,46px) 0}
.fig-band__in{max-width:1360px;margin:0 auto;padding-inline:var(--gut)}
.fig-band img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block}
.fig-band figcaption{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(180px,1fr);gap:clamp(18px,3vw,40px);margin-top:14px}

/* later in the piece: a figure that breaks the measure symmetrically */
.fig-wide{margin:clamp(30px,4vw,44px) 0;width:min(1020px, calc(100vw - 2 * var(--gut)));margin-left:50%;transform:translateX(-50%)}
.fig-wide img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border:1px solid var(--rule)}
.fig-wide figcaption{margin-top:12px;border-top:2px solid var(--secondary);padding-top:10px;max-width:60ch}

/* notes lifted out of the flow */
.notes-band{background:var(--paper);border-top:3px solid var(--ink);border-bottom:1px solid var(--rule);padding:clamp(22px,3vw,32px) 0;margin:clamp(30px,4vw,44px) 0}
.notes-band__in{max-width:1360px;margin:0 auto;padding-inline:var(--gut)}
.notes-band h3{font-family:var(--text);font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--secondary);margin-bottom:18px}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 clamp(20px,3vw,36px)}
.notes-grid > div{border-top:1px solid var(--rule);padding:12px 0 14px}
.notes-grid b{display:block;font-family:var(--display);font-size:19px;line-height:1.2;color:var(--ink);margin-bottom:5px}
.notes-grid span{font-size:15.5px;color:var(--ink-2)}

/* a pull quote that spans wider than the measure */
.pullquote.wide{margin:clamp(30px,4vw,44px) 0;border-top:3px solid var(--ink);border-bottom:1px solid var(--rule);padding:20px 0}
.pullquote.wide p{font-size:clamp(23px,3vw,33px);line-height:1.22;max-width:34ch}
.pullquote.wide .who{display:block;margin-top:12px;font-family:var(--text);font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-4)}

/* chronology: two columns of a ruled list, so it never runs long and thin */
@media (min-width:820px){
  /* multicol so the sequence reads DOWN the first column, then the second */
  .timeline.two{display:block;columns:2;column-gap:clamp(30px,5vw,64px)}
  .timeline.two li{break-inside:avoid}
}

/* the nav's own items push right; overflow then lands at the scrollable end */
.bar__nav > a:first-child{margin-left:auto}

/* chronology band: a titled plate rather than a loose list */
.chron{background:var(--tint);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.chron__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:26px}
.chron__head p{margin:0}
.chron__head .n{font-family:var(--display);font-weight:700;font-size:20px;color:var(--accent)}

/* ---------- read next: designed cards, not bare links ---------- */
.read-next .related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(18px,2.4vw,28px)}
.read-next .related-links li{border-top:0;padding:0}
.read-next .related-links a{
  display:flex;flex-direction:column;height:100%;background:var(--paper);
  border:1px solid var(--rule);border-top:3px solid var(--ink);color:var(--ink);
}
.read-next .related-links a:hover{border-color:var(--accent);border-top-color:var(--accent)}
.read-next .rn__img{display:block;padding:10px 10px 0}
.read-next .rn__img img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.read-next .rn__body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.read-next .rn__kick{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.read-next .rn__kick .ico{width:15px;height:15px}
.read-next .rn__title{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.14}
.read-next .rn__dek{font-size:15px;color:var(--ink-3);line-height:1.45}
.read-next .rn__more{margin-top:auto;padding-top:12px;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.read-next .related-links a:hover .rn__title{color:var(--secondary)}

/* phones: the bar becomes two rows so the nav gets the full width to scroll in */
@media (max-width:760px){
  .bar__inner{flex-wrap:wrap;gap:0;padding:9px 0 0}
  .bar__mark{border-right:0;padding-right:0;align-self:center}
  .bar__name{font-size:26px}
  .bar__mark .emblem{width:34px;height:34px}
  .bar__nav{flex:1 0 100%;margin:6px 0 0;border-top:1px solid var(--rule);padding-top:2px}
  .bar__nav > a:first-child{margin-left:0}
  .bar__nav a{padding:9px 10px;font-size:12px}
  .bar__nav a.all{margin-left:6px}
}

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

/* sp-mark-fit: width:100% + padding must not overflow the tile — but the declared
   HEIGHT is the mark's size and border-box alone steals the vertical padding from it.
   earlychristianireland declares height:66px with 10px top/bottom padding: border-box
   left a 46px mark and the operator read it as 'logos too small'. Keep the horizontal
   inset, drop the vertical padding, so the mark occupies the full height Design set. */
.sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!important;padding-top:0!important;padding-bottom:0!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-domain-override: per-domain, from work/css_override.css */
/* mujca — TWO separate concerns, kept separate.

   1. EVERY mark needs a dark panel. The tiles are white and the partner artwork is
      white-on-transparent (drawn for a dark ground), so without a panel the logos are invisible.
      Panel only — never filter or invert the artwork.
   2. ONLY the FEATURED tier is re-placed. Design's featured tile is a 2-column grid and its own
      order puts the blurb in the left column with the name stranded right. The roll below is a
      different layout entirely and must not be touched — an earlier version of this file applied
      the grid rule to every [data-partner] and shrank every mark in the roll. Scope: .feat. */
.sponsor[data-partner] img{
  background:#121013!important;
  box-sizing:border-box!important;
  padding:9px 12px!important;
  object-fit:contain!important;
  border-radius:3px!important;
}
.sponsor.feat[data-partner]{
  grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr)!important;
  align-items:start!important; column-gap:34px!important; row-gap:12px!important;
}
.sponsor.feat[data-partner] img{ grid-column:1!important; grid-row:1!important; justify-self:start!important; }
.sponsor.feat[data-partner] .sponsor-name{ grid-column:1!important; grid-row:2!important; justify-self:start!important; }
.sponsor.feat[data-partner] .sponsor-blurb{ grid-column:2!important; grid-row:1 / span 2!important; align-self:start!important; }

/* 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-group.sponsor-group--lead .feat.sponsor.feat.sponsor img{height:76px!important;max-height:none!important;width:540px!important;max-width:100%!important;flex:none!important}
.sponsor-group.sponsor-group--rest .sponsor.sponsor img{height:75px!important;max-height:none!important;width:232px!important;max-width:100%!important;flex:none!important}

/* op-nav-collapse: this nav printed 647px of stacked links at 390 before any content
   (18 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 "filled-soft", 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(20px,4vw,40px)) 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 "max-height" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-switch{display:none}
@media (max-width:940px){
  .menu-switch{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-inline:auto;justify-self:center;border:0;border-radius:2px;padding:12px 20px;background:color-mix(in srgb, currentColor 14%, transparent);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .menu-switch-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .index{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .menu-switch-c:checked ~ .index{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .menu-switch:not(:has(~ .index)){display:none}
}

/* op-footer-compact: the footer printed 6 rows for 6 link(s) in
   1 list(s) — 620px at 390, 5% 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 620 -> 431px (30% 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,3.06vw,44px)!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 — 11 tiles,
   1468px at 390, 12% of the whole page. Two columns bring it to
   850px (42% shorter). Checked before writing: no new overflow, smallest mark still
   126px wide, longest blurb 3 lines, tile heights 118-120px.
   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 (.sponsor-group.sponsor-group--lead, .sponsor-group.sponsor-group--rest), 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-group.sponsor-group--lead{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:30px!important}
    .sponsor-group.sponsor-group--lead > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-group.sponsor-group--lead > * *{min-width:0!important;max-width:100%}
    .sponsor-group.sponsor-group--lead img,.sponsor-group.sponsor-group--lead svg{max-width:100%;height:auto}
  .sponsor-group.sponsor-group--rest{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:30px!important}
    .sponsor-group.sponsor-group--rest > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-group.sponsor-group--rest > * *{min-width:0!important;max-width:100%}
    .sponsor-group.sponsor-group--rest img,.sponsor-group.sponsor-group--rest svg{max-width:100%;height:auto}
  .sponsor-group.sponsor-group--lead .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .sponsor-group.sponsor-group--rest .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-group.sponsor-group--rest (9 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-group.sponsor-group--rest:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

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

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.rn__img > img,
  a.ledger__item > span.ledger__img > img,
  div.container > div.fig-plate__img > img,
  div.prose > figure.fig-wide > img,
  div.reg > a.reg__row > img.chip,
  figure > div > img,
  figure.fig-band > div.fig-band__in > img,
  figure.fig-bleed > div.fig-bleed__img > img,
  figure.fig-cover > div.fig-cover__img > img,
  figure.fig-mat > div.fig-mat__plate > img){height:auto}
/* op-img-dims:end */