/* motofiches.com — Direction A
   ground: warm concrete · ink: near-black · accent: red · secondary: cobalt · panel: bone */

:root{
  --ground:#D4D0C8;   /* ground  — the page */
  --paper:#E8E5DF;    /* ground, lighter — panels and mats */
  --ink:#16161A;      /* ink     — all body text, dark bands */
  --accent:#D0271D;   /* accent  — the live thing on the page */
  --secondary:#1F3FA8;/* secondary — owns whole panels */
  --mute:#6C6862;     /* ink at low emphasis (credits, meta) */
  --hair:rgba(22,22,26,.22);
  --display:"Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body:"Lora", Georgia, "Times New Roman", serif;
  --pad:clamp(18px,4.4vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:19px;line-height:1.65;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
::selection{background:var(--accent);color:var(--paper)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.04;margin:0}
.u-hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kicker{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.ico{width:1em;height:1em;flex:none;vertical-align:-.12em}

/* ---------- masthead plate ---------- */
.plate{background:var(--ink);color:var(--paper)}
.plate a{color:var(--paper)}
.plate a:hover{color:var(--accent)}
.plate-top{display:flex;align-items:flex-end;gap:clamp(14px,2vw,28px);padding:clamp(20px,3vw,34px) var(--pad) 20px}
.mast{display:flex;flex-direction:column;gap:6px;min-width:0}
.mast-name{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.045em;line-height:.86;font-size:clamp(38px,7.4vw,82px)}
.mast-rule{height:3px;background:var(--accent)}
.mast-mark{flex:none;margin-bottom:0;width:clamp(46px,5.8vw,82px);height:auto;color:var(--paper);align-self:flex-end}
.plate--inner .mast-mark{width:clamp(32px,3.2vw,46px)}
.mast-strap{margin-left:auto;text-align:right;max-width:23ch;font-size:14px;line-height:1.45;color:#9D9992;padding-bottom:10px}
.plate--inner .mast-name{font-size:clamp(30px,4vw,44px)}
.plate--inner .mast-rule{display:none}
.plate-here{font-family:var(--display);font-size:clamp(15px,1.6vw,20px);font-weight:500;color:var(--accent);padding-bottom:6px;display:flex;align-items:center;gap:8px}
.plate-div{width:1px;height:24px;background:#4A4A4E;margin:0 4px 7px}

.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);padding:0 var(--pad) 15px;
  font-family:var(--display);font-size:clamp(14px,1.35vw,17px);font-weight:500;
  overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;gap:7px;white-space:nowrap}
.nav a[aria-current]{color:var(--accent)}
.nav .ico{width:16px;height:16px}
.strip{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);padding:11px var(--pad);
  background:#24242A;color:#A8A49D;font-family:var(--display);font-size:12.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;overflow-x:auto;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip a{color:#A8A49D;white-space:nowrap}
.strip .lit{color:var(--accent);white-space:nowrap}
.strip .on{color:var(--paper);border-bottom:1px solid var(--accent)}
.strip--sig{text-transform:none;letter-spacing:.02em;font-family:var(--body);font-size:15px;color:#B3AFA8;overflow-x:visible}
@media (max-width:760px){
  .strip--sig{flex-direction:column;align-items:flex-start;gap:5px;padding-top:12px;padding-bottom:14px}
  .strip--sig .lit,.strip--sig span{white-space:normal}
}

/* ---------- generic band scaffolding ---------- */
.band{padding:clamp(40px,5vw,80px) var(--pad)}
.band--paper{background:var(--paper)}
.band--ink{background:var(--ink);color:var(--paper)}
.band--cobalt{background:var(--secondary);color:var(--paper)}
.band--cobalt a,.band--ink a{color:var(--paper)}
.band--flush{padding-left:0;padding-right:0}
.band-head{display:flex;align-items:baseline;gap:22px;margin-bottom:clamp(22px,2.6vw,38px);flex-wrap:wrap}
.band-head h2,.band-head h3{font-size:clamp(24px,3vw,34px)}
.band-head .fill{flex:1 1 60px;height:1px;background:var(--hair);min-width:24px}
.band--ink .band-head .fill,.band--cobalt .band-head .fill{background:rgba(232,229,223,.4)}
.band-head .kicker{color:var(--mute)}
.band--cobalt .band-head .kicker{color:#B9C6F0}
.more{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px}
.more svg{width:30px;height:8px;stroke:var(--accent);fill:none;stroke-width:1.6}

/* ---------- homepage lead ---------- */
.lead-shot{position:relative;background:var(--ink)}
.lead-shot img{width:100%;height:clamp(300px,52vw,640px);object-fit:cover}
.lead-plate{position:relative;margin:-96px var(--pad) 0;max-width:660px;background:var(--ground);
  padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,34px) 26px;border-top:3px solid var(--accent)}
.lead-plate .bracket{position:absolute;top:9px;right:9px;width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.4}
.lead-plate h2{font-size:clamp(26px,4vw,44px);margin:12px 0 14px}
.lead-plate p{margin:0;font-size:clamp(16px,1.5vw,17px);line-height:1.6}
.credit{font-family:var(--display);font-size:11.5px;letter-spacing:.06em;color:#7A766F;margin-top:10px}
.band--ink .credit,.band--cobalt .credit{color:#8E8A83}

/* ---------- cards ---------- */
.cards{display:grid;gap:clamp(18px,2.4vw,34px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cards--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{display:flex;flex-direction:column;background:var(--ground);padding:16px 16px 0;height:100%}
.band--paper .card{background:var(--ground)}
.band--ink .card{background:#202026}
.card-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-body{padding:14px 0 18px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:clamp(19px,1.8vw,21px);font-weight:600;letter-spacing:-.018em;line-height:1.15;min-height:2.3em}
.card p{margin:6px 0 0;font-size:15.5px;line-height:1.55}
.card .card-meta{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.card .card-meta .ico{width:14px;height:14px}
.card--tint .card-img{border-bottom:3px solid var(--secondary)}

/* ---------- dense run ---------- */
.run{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:0 clamp(28px,4vw,64px)}
.run-item{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:15px 0;border-top:1px solid var(--hair)}
.run-item:last-child{border-bottom:1px solid var(--hair)}
.run-no{font-family:var(--display);font-size:13px;color:#8A867F;padding-top:4px}
.run-item h3{font-family:var(--display);font-size:clamp(17px,1.7vw,19px);font-weight:600;letter-spacing:-.015em;line-height:1.2}
.run-item p{margin:4px 0 0;font-size:15px;line-height:1.5;color:#413F3C}

/* ---------- wide plate ---------- */
.plate-wide{display:grid;grid-template-columns:1fr min(372px,38%)}
.plate-wide .shot{position:relative;min-height:clamp(240px,34vw,520px)}
.plate-wide .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate-wide .say{padding:clamp(26px,3.4vw,52px) clamp(20px,2.6vw,44px);display:flex;flex-direction:column;
  justify-content:center;gap:18px;border-left:3px solid var(--accent)}
.plate-wide .say h3{font-size:clamp(22px,2.4vw,32px)}
.plate-wide .say p{margin:0;font-size:16.5px;line-height:1.6}

/* ---------- quiet band + emblem ---------- */
.quiet{display:grid;grid-template-columns:1fr minmax(300px,560px);gap:clamp(28px,5vw,72px);align-items:center}
.emblem-plate{background:var(--paper);padding:clamp(18px,2.4vw,32px);outline:1px solid var(--hair);outline-offset:-10px}
.quiet p.say{margin:0;font-family:var(--display);font-size:clamp(24px,3.4vw,52px);font-weight:500;
  line-height:1.1;letter-spacing:-.03em;text-wrap:pretty}
.emblem{width:100%;height:auto;color:var(--ink);stroke:currentColor;fill:none}
.oneline{display:flex;align-items:center;gap:clamp(18px,3vw,40px)}
.oneline p{margin:0;font-family:var(--display);font-size:clamp(20px,2.4vw,30px);font-weight:500;
  line-height:1.28;letter-spacing:-.02em;max-width:78ch}
.oneline svg{flex:none;width:46px;height:24px;stroke:var(--accent);stroke-width:2.4;fill:none}

/* ---------- section index ---------- */
.sindex{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:2px;background:var(--hair)}
.sindex a{display:flex;flex-direction:column;gap:8px;padding:22px 24px 24px;background:var(--paper)}
.sindex a:hover{background:var(--ground)}
.sindex .top{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.sindex .top .ico{width:18px;height:18px}
.sindex h3{font-size:clamp(20px,2vw,24px)}
.sindex p{margin:0;font-size:15.5px;line-height:1.5;color:#413F3C}
.sindex .n{font-family:var(--display);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* ---------- supporters ---------- */
.supporters{background:var(--paper);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sponsor-tier{display:flex;flex-wrap:wrap;gap:12px}
.sponsor-tier--roll{margin-top:26px}
.tier-label{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin:0 0 12px}
.sponsor{flex:0 0 234px;background:var(--ground);padding:12px;display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--hair)}
.sponsor:hover{border-color:var(--accent)}
.sponsor img{width:100%;height:52px;max-height:52px;object-fit:contain;background:var(--ink);padding:7px 12px}
.sponsor .sponsor-name{font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sponsor .sponsor-blurb{font-size:14.5px;line-height:1.45;color:#413F3C;min-width:200px}
.sponsor.feat{background:var(--paper);border-color:var(--ink)}
.sponsor.feat img{height:80px;max-height:80px;padding:12px 16px}

/* ---------- article ---------- */
.piece{display:grid;
  grid-template-columns:[full-start] minmax(var(--pad),1fr) [main-start] min(72ch,calc(100% - var(--pad)*2)) [main-end] minmax(var(--pad),1fr) [full-end];
  padding:0 0 clamp(40px,5vw,80px)}
.piece>*{grid-column:main}
.piece>.full{grid-column:full}
.piece>.wide{grid-column:full-start / full-end;padding-inline:var(--pad)}
.piece-head{padding-top:clamp(28px,3.4vw,52px)}
.piece-head .where{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:var(--accent)}
.piece-head .where .ico{width:22px;height:22px}
.piece-head .where span{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.piece-head .where .tick{width:26px;height:1px;background:var(--hair)}
.piece-head .where .of{color:var(--mute)}
.piece h1{font-size:clamp(34px,5.6vw,72px);letter-spacing:-.042em;line-height:.96;text-wrap:pretty}
.piece .lead{margin:20px 0 26px;font-size:clamp(19px,2vw,23px);line-height:1.48;color:#33312E;max-width:60ch}
.piece h2{margin:14px 0 -6px;font-size:clamp(24px,3vw,34px)}
.piece h3{margin:10px 0 -8px;font-size:clamp(19px,2.2vw,24px);font-weight:600}
.piece p{margin:22px 0;font-size:19px;line-height:1.68}
.piece p em,.piece li em{font-style:italic}
.piece p strong{font-weight:600}
.piece a[href]:not(.more):not(.entity-ref){border-bottom:1px solid var(--accent);padding-bottom:1px}
.dropcap::first-letter{font-family:var(--display);font-weight:700;font-size:4.1em;line-height:.76;
  float:left;margin:.07em .07em 0 0;color:var(--accent)}
.rule-mark{display:flex;align-items:center;gap:18px;border:0;margin:30px 0}
.rule-mark::before,.rule-mark::after{content:"";flex:1;height:1px;background:var(--hair)}
.rule-mark svg{width:34px;height:18px;stroke:var(--accent);stroke-width:2.4;fill:none}
.endmark{display:flex;align-items:center;gap:18px;margin:34px 0 0}
.endmark::before,.endmark::after{content:"";flex:1;height:1px;background:var(--hair)}
.endmark svg{width:34px;height:18px;stroke:var(--accent);stroke-width:2.4;fill:none}

/* ---------- figure system: three treatments, one hand ---------- */
/* 1 · bleed — full width, caption plate overlapping the image */
.fig-bleed{margin:0}
.fig-bleed img{width:100%;height:clamp(240px,44vw,560px);object-fit:cover}
.fig-bleed figcaption{position:relative;margin:-64px var(--pad) 0;max-width:660px;background:var(--ground);
  border-top:3px solid var(--accent);padding:18px 22px 18px}
/* 2 · mat — photograph sitting on a bone mat, caption offset with a red tick */
.fig-mat{margin:34px 0;background:var(--paper);padding:18px 18px 0}
.fig-mat img{width:100%}
.fig-mat figcaption{display:flex;gap:20px;padding:15px 0 18px;align-items:flex-start}
.fig-mat figcaption::before{content:"";flex:none;width:38px;height:1px;background:var(--accent);margin-top:12px}
/* 3 · inset — breaks the column, prose runs beside it */
.fig-inset{margin:26px 0;justify-self:end;width:min(52%,380px);border:1px solid var(--ink);padding:10px;background:var(--ground)}
.fig-inset img{width:100%}
.fig-inset figcaption{padding-top:10px}
/* 4 · pair — two frames on ink with one shared caption */
.fig-pair{margin:34px 0;background:var(--ink);padding:2px;display:grid;gap:2px;grid-template-columns:1fr 1fr}
.fig-pair img{width:100%;height:clamp(160px,22vw,260px);object-fit:cover}
.fig-pair figcaption{grid-column:1/-1;background:var(--ink);color:#C9C5BD;padding:14px 16px 16px}
.article-figure figcaption,.fig-bleed figcaption,.fig-mat figcaption,.fig-inset figcaption,.fig-pair figcaption{
  font-family:var(--body);font-size:16.5px;line-height:1.5}
.fig-inset figcaption{font-size:15.5px}
figcaption .cap-credit{display:block;font-family:var(--display);font-size:11.5px;letter-spacing:.06em;
  color:#7A766F;margin-top:8px;line-height:1.4}
.fig-pair figcaption .cap-credit{color:#8E8A83}
.article-figure{margin:34px 0;background:var(--paper);padding:18px 18px 0}
.article-figure img{width:100%}
.article-figure figcaption{padding:15px 0 18px}
.gallery{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:34px 0}
.gallery figure{margin:0;background:var(--paper);padding:10px 10px 0}
.gallery figcaption{font-size:14.5px;line-height:1.45;padding:10px 0 12px}
.map-figure{margin:34px 0;border:1px solid var(--ink);padding:12px}
.map-figure .map-slot{aspect-ratio:16/9;background:var(--paper)}

/* ---------- text components ---------- */
.pullquote{margin:34px 0;padding:0 0 0 26px;border-left:3px solid var(--accent)}
.pullquote p{margin:0;font-family:var(--display);font-size:clamp(21px,2.4vw,29px);font-weight:500;
  line-height:1.22;letter-spacing:-.02em}
.blockquote{margin:34px 0;padding:22px 26px;background:var(--paper)}
.blockquote p{margin:0;font-size:19px;line-height:1.55;font-style:italic}
.blockquote cite{display:block;margin-top:12px;font-family:var(--display);font-style:normal;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.callout{margin:34px 0;background:var(--secondary);color:var(--paper);padding:24px 26px 26px}
.callout h4,.callout .kicker{color:#B9C6F0;margin:0 0 12px;font-family:var(--display);font-size:11.5px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.callout p{margin:0;font-size:17.5px;line-height:1.55}
.callout ul{margin:0;padding-left:20px}
.callout li{margin:9px 0;font-size:16.5px;line-height:1.5}
.callout li::marker{color:var(--accent)}
p.note{margin:26px 0;padding:14px 18px;background:var(--paper);border-left:3px solid var(--ink);
  font-size:16.5px;line-height:1.55;color:#33312E}

/* ---------- data components ---------- */
.notes-panel{margin:40px 0;background:var(--paper);border-top:3px solid var(--ink);padding:26px clamp(18px,2.4vw,34px) 30px}
.notes-panel>.kicker{display:flex;align-items:center;gap:10px;color:var(--accent);margin-bottom:18px}
.notes-panel>.kicker .ico{width:16px;height:16px}
.notes-panel>*:last-child{margin-bottom:0}
.datatable,.versus{width:100%;border-collapse:collapse;margin:0;font-family:var(--body);font-size:16.5px}
.datatable caption,.versus caption{caption-side:top;text-align:left;font-family:var(--display);font-size:11.5px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding-bottom:10px}
.datatable th,.versus th{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-align:left;padding:8px 14px 8px 0;border-bottom:2px solid var(--ink);vertical-align:bottom}
.datatable td,.versus td{padding:13px 14px 13px 0;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.5}
.datatable tr>*:last-child,.versus tr>*:last-child{padding-right:0}
.datatable td:first-child{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;width:34%}
.versus td:first-child{width:26%;font-family:var(--display);font-weight:600}
.versus tbody tr:hover{background:var(--ground)}
.statrow{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));background:var(--hair);margin:0}
.statblock{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;background:var(--paper)}
.stat-num{font-family:var(--display);font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.03em;
  line-height:1;color:var(--accent)}
.stat-label{font-size:15px;line-height:1.45;color:#413F3C}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(120px,22%) 1fr;gap:20px;padding:14px 0;
  border-top:1px solid var(--hair);align-items:baseline}
.timeline li:last-child{border-bottom:1px solid var(--hair)}
.t-when{font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:.02em;color:var(--accent);line-height:1.3}
.t-what{font-size:16.5px;line-height:1.5}
.chart{margin:0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .bar-rect{fill:var(--secondary)}
.chart .bar-rect.hi{fill:var(--accent)}
.chart text{font-family:var(--display);font-size:12px;fill:var(--ink)}
.chart figcaption{font-size:15.5px;line-height:1.5;color:#413F3C;margin-top:14px}

/* ---------- cards: people, orgs, refs, further ---------- */
.profile-grid{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));background:var(--hair);margin:0}
.profile-card{display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--paper)}
.band--cobalt .profile-grid{background:rgba(232,229,223,.45)}
.band--cobalt .profile-card{background:var(--secondary)}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--hair)}
.profile-card h3{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.01em}
.profile-card .p-role{margin:0;font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.band--cobalt .profile-card .p-role{color:#B9C6F0}
.profile-card p{margin:0;font-size:15.5px;line-height:1.5}
.profile-card.no-photo{border-left:3px solid var(--accent)}
.band--cobalt .profile-card.no-photo{border-left:3px solid var(--paper)}
.profile-card .p-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:8px}
.profile-card .p-attr{font-family:var(--display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.org-grid{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.org-card{flex:0 0 246px;display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--paper);
  border:1px solid var(--hair)}
.org-card:hover{border-color:var(--accent)}
.org-card .org-logo{height:34px;width:auto;object-fit:contain}
.org-card .org-name{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.01em}
.org-card .org-host{font-family:var(--display);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.org-card.no-logo{border-left:3px solid var(--secondary)}
.entity-ref{border-bottom:1px solid var(--secondary)}
.entity-ref:hover{border-color:var(--accent)}
.further-grid{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));background:var(--hair);margin-top:8px}
.further-grid a{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--paper);
  font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.018em;line-height:1.2}
.further-grid a:hover{background:var(--ground)}
.further-grid a .kicker{color:var(--mute);font-weight:600}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:0}
.related-links li{border-top:1px solid var(--hair)}
.related-links li:last-child{border-bottom:1px solid var(--hair)}
.related-links a{display:flex;align-items:baseline;gap:14px;padding:14px 0;font-family:var(--display);
  font-size:18px;font-weight:600;letter-spacing:-.015em}
.related-links .ico{width:16px;height:16px;color:var(--accent)}

/* ---------- category / index lists ---------- */
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--hair)}
.cat-list li:last-child{border-bottom:1px solid var(--hair)}
.cat-list a{display:grid;grid-template-columns:44px 1fr minmax(0,40%);gap:8px 22px;padding:18px 0;align-items:baseline}
.cat-list a:hover{color:var(--ink)}
.cat-list a:hover h3{color:var(--accent)}
.cat-list .n{font-family:var(--display);font-size:13px;color:#8A867F}
.cat-list h3{font-family:var(--display);font-size:clamp(19px,2vw,23px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.cat-list p{margin:0;font-size:15.5px;line-height:1.5;color:#413F3C}
.hub{display:grid;gap:clamp(24px,3vw,44px)}
.hub-sec{border-top:2px solid var(--ink);padding-top:18px}
.hub-sec .hub-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.hub-sec .hub-top .ico{width:22px;height:22px;color:var(--accent)}
.hub-sec h2{font-size:clamp(22px,2.6vw,30px)}
.hub-sec .blurb{margin:0 0 14px;font-size:16.5px;color:#413F3C}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#8E8A83;padding:clamp(28px,3vw,40px) var(--pad) clamp(36px,4vw,52px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap}
.foot a{color:#8E8A83}
.foot a:hover{color:var(--accent)}
.foot .fname{font-family:var(--display);font-size:clamp(22px,2.4vw,28px);font-weight:700;
  letter-spacing:-.03em;text-transform:uppercase;color:var(--paper)}
.foot .fsay{font-size:14px;margin-top:8px;max-width:44ch}
.foot nav{display:flex;flex-wrap:wrap;gap:14px 26px;font-family:var(--display);font-size:13px;
  letter-spacing:.1em;text-transform:uppercase}

/* ---------- narrow ---------- */
@media (max-width:900px){
  .plate-wide{grid-template-columns:1fr}
  .plate-wide .say{border-left:0;border-top:3px solid var(--accent)}
  .quiet{grid-template-columns:1fr}
  .quiet .emblem{max-width:420px}
  .cat-list a{grid-template-columns:32px 1fr}
  .cat-list p{grid-column:2}
  .mast-strap{display:none}
}
@media (max-width:760px){
  body{font-size:18px}
  .card h3{min-height:0}
  .lead-plate{margin:-40px var(--pad) 0}
  .fig-bleed figcaption{margin:-28px var(--pad) 0}
  .fig-inset{width:auto;justify-self:stretch}
  .fig-pair{grid-template-columns:1fr}
  .sponsor{flex:0 0 100%}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .piece p{font-size:18px}
  .datatable td:first-child,.versus td:first-child{width:38%}
  .foot{flex-direction:column;align-items:flex-start}
}
@media print{
  .nav,.strip,.supporters{display:none}
  body{background:#fff}
}

/* ---------- disclosure (CSS/HTML only, no script) ---------- */
details.expander{margin:0}
details.expander>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:14px 0;border-top:1px solid var(--hair);font-family:var(--display);font-size:13px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
details.expander>summary::-webkit-details-marker{display:none}
details.expander>summary::after{content:"";width:11px;height:11px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-bottom:4px}
details.expander[open]>summary::after{transform:rotate(-135deg);margin-bottom:0}
/* ---------- pages ---------- */
.pagehead{padding:clamp(30px,4vw,64px) var(--pad) clamp(24px,3vw,40px)}
.pagehead .n{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px}
.pagehead .n .ico{width:20px;height:20px}
.pagehead h1{font-size:clamp(38px,7vw,78px);letter-spacing:-.045em;margin:14px 0 0}
.pagehead .intro{margin:20px 0 0;font-size:clamp(18px,1.9vw,21px);line-height:1.5;max-width:62ch;color:#33312E}
.prose{max-width:66ch}
.prose p{font-size:18.5px;line-height:1.66}
.form{display:grid;gap:16px;max-width:520px;margin-top:26px}
.form label{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.form input,.form textarea{font-family:var(--body);font-size:17px;padding:12px 14px;border:1px solid var(--ink);
  background:var(--paper);color:var(--ink);width:100%}
.form button{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:0;padding:14px 22px;justify-self:start;cursor:pointer}
.form button:hover{background:var(--accent)}
.sg h2{margin-top:52px;font-size:clamp(22px,2.4vw,30px)}
.sg h3.sgl{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:30px 0 12px}

/* six sections, one row, the drawing leading */
.sindex--row{grid-template-columns:repeat(6,1fr)}
.sindex--row>a{gap:0;padding:26px 18px 26px;align-items:flex-start}
.sindex--row .ico-lg{width:clamp(52px,5.4vw,76px);height:auto;color:var(--ink);display:block;margin-bottom:18px}
.sindex--row>a:hover .ico-lg{color:var(--accent)}
.sindex--row .n-top{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.sindex--row h3{font-size:clamp(17px,1.6vw,21px);margin-bottom:7px}
.sindex--row p{font-size:14.5px;line-height:1.45}
.sindex--row .n{margin-top:12px}
@media (max-width:1180px){
  .sindex--row>a{padding:22px 14px}
  .sindex--row p{display:none}
  .sindex--row .ico-lg{margin-bottom:14px}
}
@media (max-width:820px){.sindex--row{grid-template-columns:repeat(3,1fr)}
  .sindex--row p{display:block}}
@media (max-width:560px){.sindex--row{grid-template-columns:repeat(2,1fr)}
  .sindex--row>a{padding:18px 12px}}

/* ================= article: chapters, split rows, quote bands ================= */
.piece>.chapter,.piece>.split,.piece>.quote-band,.piece>.fig-pair{grid-column:full;padding-inline:var(--pad)}
.piece>.fig-pair{padding-inline:0;margin-inline:var(--pad)}

.chapter{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,26px);align-items:center;
  border-top:2px solid var(--ink);margin:clamp(34px,4vw,56px) 0 6px;padding-top:16px}
.chapter-no{font-family:var(--display);font-weight:700;font-size:clamp(26px,4vw,50px);letter-spacing:-.04em;
  line-height:.86;color:var(--accent)}
.chapter h2{margin:0;font-size:clamp(23px,3.2vw,38px);line-height:1.02}

.split{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(20px,3vw,44px);
  align-items:stretch;margin:clamp(24px,3vw,38px) 0}
.split--right .split-fig{order:2}
.split-fig{margin:0;display:flex;flex-direction:column;background:var(--paper);padding:14px 14px 0}
.split-fig img{width:100%;flex:1 1 auto;min-height:clamp(210px,25vw,330px);object-fit:cover}
.split-fig figcaption{padding:13px 0 16px;font-size:16px;line-height:1.5;display:flex;gap:16px}
.split-fig figcaption::before{content:"";flex:none;width:30px;height:1px;background:var(--accent);margin-top:11px}
.split-text{display:flex;flex-direction:column;justify-content:center}
.split-text>p:first-child{margin-top:0}
.split-text>p:last-child{margin-bottom:0}
.split--frame .split-fig{background:transparent;border:1px solid var(--ink);padding:10px}

.quote-band{background:var(--ink);color:var(--paper);padding:clamp(30px,4vw,58px) var(--pad);
  margin:clamp(34px,4vw,52px) 0;display:grid;gap:16px}
.quote-band p{margin:0;font-family:var(--display);font-size:clamp(22px,3.1vw,40px);font-weight:500;
  line-height:1.16;letter-spacing:-.025em;max-width:44ch;text-wrap:pretty}
.quote-band .attrib{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px}
.quote-band .attrib .ico{width:16px;height:16px}

.notes-panel--ink{background:var(--ink);color:var(--paper);border-top-color:var(--accent)}
.notes-panel--ink>.kicker{color:var(--paper)}
.notes-panel--ink .datatable td,.notes-panel--ink .versus td{border-color:rgba(232,229,223,.22)}
.notes-panel--ink .datatable th,.notes-panel--ink .versus th{border-color:var(--paper)}
.notes-panel--ink .timeline li{border-color:rgba(232,229,223,.22)}
.notes-panel--ink .statrow,.notes-panel--ink .profile-grid{background:rgba(232,229,223,.22)}
.notes-panel--ink .statblock,.notes-panel--ink .profile-card{background:#1f1f25}
.notes-panel--ink .stat-label,.notes-panel--ink .profile-card p{color:#c9c5bd}
.notes-panel--ink .t-what{color:#e8e5df}
@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:20px}
  .split--right .split-fig{order:0}
  .split-fig img{min-height:200px}
  .chapter{grid-template-columns:auto 1fr}
}

/* ---------- article foot: a light related strip, then a dark hand-off ---------- */
.piece>.piece-foot{grid-column:full;background:var(--paper);border-top:1px solid var(--hair);
  margin-top:clamp(30px,4vw,52px);padding:clamp(24px,3vw,40px) var(--pad) clamp(26px,3vw,38px);
  display:grid;gap:clamp(20px,2.6vw,30px)}
.piece-foot .endmark{margin:0;width:min(300px,56%);justify-self:center}
.rel-strip{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px clamp(20px,2.6vw,32px);
  border-top:2px solid var(--ink);padding-top:16px}
.rel-strip>.kicker{color:var(--mute);flex:0 0 100%}
.rel-strip a.rel{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);
  font-size:clamp(16px,1.7vw,20px);font-weight:600;letter-spacing:-.018em}
.rel-strip a.rel .ico{width:16px;height:16px;color:var(--accent)}
.rel-strip a.rel:hover .ico{color:var(--ink)}
.rel-strip .more{margin-left:auto;align-self:baseline}

.piece>.read-next{grid-column:full;background:var(--ink);color:var(--paper);
  padding:clamp(30px,3.6vw,52px) var(--pad) clamp(34px,4vw,58px)}
.read-next a{color:var(--paper)}
.rn-head{display:flex;align-items:baseline;gap:20px;margin-bottom:clamp(18px,2.4vw,26px);flex-wrap:wrap}
.rn-head h2{font-size:clamp(22px,2.8vw,32px)}
.rn-head .fill{flex:1 1 40px;height:1px;background:rgba(232,229,223,.35)}
.rn-head .kicker{color:#8E8A83}
.rn-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(12px,1.8vw,22px)}
.rn-card{display:flex;flex-direction:column;background:#202026}
.rn-card:hover{background:#282830}
.rn-card .shot{aspect-ratio:16/10;overflow:hidden;background:#111}
.rn-card .shot img{width:100%;height:100%;object-fit:cover}
.rn-card .rn-body{padding:15px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.rn-card .kicker{color:var(--accent);display:flex;align-items:center;gap:8px}
.rn-card .kicker .ico{width:14px;height:14px}
.rn-card h3{font-family:var(--display);font-size:clamp(18px,1.9vw,21px);font-weight:600;
  letter-spacing:-.02em;line-height:1.18}
.rn-card p{margin:0;font-size:15px;line-height:1.5;color:#B3AFA8}
@media (max-width:600px){.rel-strip .more{margin-left:0;flex:0 0 100%}}

/* 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-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-tier .feat.sponsor.feat.sponsor img{box-sizing:border-box!important;padding:12px 20px!important}
.sponsor-tier.sponsor-tier--roll .sponsor.sponsor img{box-sizing:border-box!important;padding:8px 14px!important}


/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1523px at 390, 18% of the whole page. Two columns bring it to
   877px (42% shorter). Checked before writing: no new overflow, smallest mark still
   144px wide, longest blurb 3 lines, tile heights 93-209px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-tier, .sponsor-tier.sponsor-tier--roll), 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-tier{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .sponsor-tier > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-tier > * *{min-width:0!important;max-width:100%}
    .sponsor-tier img,.sponsor-tier svg{max-width:100%;height:auto}
  .sponsor-tier.sponsor-tier--roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .sponsor-tier.sponsor-tier--roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-tier.sponsor-tier--roll > * *{min-width:0!important;max-width:100%}
    .sponsor-tier.sponsor-tier--roll img,.sponsor-tier.sponsor-tier--roll svg{max-width:100%;height:auto}
  .sponsor-tier .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .sponsor-tier.sponsor-tier--roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

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

/* op-name-wrap: at 320 the money tile truncated its brand name — "Doghouse Digital" — losing up to 13px to an
   ellipsis. The name is allowed to wrap instead of being cut: a brand that reads as half a word
   is worse than a brand on two lines. Structural only, phone widths only, desktop untouched. */
@media (max-width:360px){
  .sponsor-name{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip}
}

/* op-article-width: the article column was capped at 850px (97 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "[full-start] minmax(var(--pad),1fr) [main-start] min(72ch,calc(100% - var(--pad)*2)) [main-end] minmax(var(--pad),1fr) [full-end]" (declared in .piece) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  main.piece{grid-template-columns:[full-start] minmax(var(--pad),1fr) [main-start] min(895px, 100%) [main-end] minmax(var(--pad),1fr) [full-end]!important}
}
@media (min-width:1600px){
  main.piece{grid-template-columns:[full-start] minmax(var(--pad),1fr) [main-start] min(clamp(895px, 62.153vw, 1074px), 100%) [main-end] minmax(var(--pad),1fr) [full-end]!important}
  main.piece > :is(p.dropcap, p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
.cat-list a:hover h2:where(.rt-h3){color: var(--accent);}
h2:where(.rt-h3){font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; margin: 0px;}
.plate-wide .say h2:where(.rt-h3){font-size: clamp(22px, 2.4vw, 32px);}
.sindex h2:where(.rt-h3){font-size: clamp(20px, 2vw, 24px);}
.cat-list h2:where(.rt-h3){font-family: var(--display); font-size: clamp(19px, 2vw, 23px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;}
/* 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,
  a.rn-card > span.shot > img,
  div.split > figure.split-fig > img,
  div.split.split--frame > figure.split-fig > img,
  div.split.split--right > figure.split-fig > img,
  main > section.lead-shot > img,
  main.piece > figure.fig-bleed.full > img,
  main.piece > figure.fig-mat.wide > img,
  section.plate-wide > div.shot > img){height:auto}
/* op-img-dims:end */
@media (min-width:728px) and (max-width:1439px){.sponsor-tier.sponsor-tier:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(234px,calc(50% - 6px)),1fr))!important;column-gap:12px!important;row-gap:12px!important;justify-content:stretch!important;align-items:stretch!important}.sponsor-tier.sponsor-tier > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}