/* The Ballot Box — jimtreacher.com
   Palette roles: ground / ink / accent (ultramarine) / secondary (magenta) / dim
   Type: Bricolage Grotesque (display) · Source Serif 4 (reading) · DM Mono (figures & labels) */

:root{
  --ground:#F1EFE9;      /* page ground */
  --ink:#101114;         /* text, rules, dark panels */
  --accent:#1B3BD6;      /* ultramarine — whole areas: register heads, panels, links */
  --second:#C41E6B;      /* magenta — the one figure a row is about; the quiet band */
  --dim:#DCD9D1;         /* image ground, quiet fills */
  --paper:#F7F3EE;       /* on dark: reversed text */
  --rule:rgba(16,17,20,.22);
  --rule-soft:rgba(16,17,20,.14);
  --muted:rgba(16,17,20,.68);

  --display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --read:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --page:1360px;
  --gutter:56px;
  --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--read); font-size:18px; line-height:1.6;
  font-synthesis-weight:none;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--second); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
h1,h2,h3,h4,h5{font-family:var(--display); font-weight:700; letter-spacing:-.035em; margin:0; text-wrap:pretty}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em; padding-left:1.2em}
table{border-collapse:collapse; width:100%}
figure{margin:0}
:focus-visible{outline:3px solid var(--second); outline-offset:2px}

.wrap{max-width:var(--page); margin:0 auto; padding-inline:var(--gutter)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; z-index:99; background:var(--ink); color:var(--paper); padding:10px 14px}

/* ─────────── shared marks ─────────── */
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--second); display:flex; align-items:center; gap:9px}
.kicker a{color:inherit}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.ico{width:1.15em; height:1.15em; flex:none; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.18em}
.ico-lg{width:34px; height:34px; stroke-width:1.4}
.hr2{border:0; border-top:2px solid var(--ink); margin:0}
.hr1{border:0; border-top:1px solid var(--rule); margin:0}
.band{padding-block:clamp(38px,5vw,64px)}
.band-tight{padding-block:clamp(26px,3vw,38px)}
.band-accent{background:var(--accent); color:var(--paper)}
.band-accent a{color:#FFC7DF}
.band-second{background:var(--second); color:var(--paper)}
.band-ink{background:var(--ink); color:var(--paper)}
.band-ink a{color:var(--paper)}

/* ─────────── masthead + printed index ─────────── */
.masthead{border-bottom:2px solid var(--ink)}
.masthead-top{display:flex; align-items:flex-end; justify-content:space-between; gap:56px; padding:30px 0 24px}
.brand{display:flex; align-items:flex-end; gap:26px; color:var(--ink)}
.brand:hover{text-decoration:none; color:var(--ink)}
.brand svg{flex:none; margin-bottom:4px}
.brand h1,.brand .wordmark{font-family:var(--display); font-weight:800; letter-spacing:-.05em; line-height:.9; font-size:clamp(34px,5.4vw,74px); white-space:nowrap}
.strap{text-align:left; max-width:36ch; padding-top:12px; border-top:2px solid var(--ink)}
.strap .rule-line{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--accent); text-transform:uppercase; line-height:1.6}
.strap p{margin:9px 0 0; font-size:15px; line-height:1.5; color:var(--muted); text-wrap:pretty}
.masthead-top{align-items:flex-end}

.index-print{border-top:1px solid var(--ink); display:grid; grid-template-columns:repeat(8,1fr)}
.idx-head{display:flex; align-items:center; gap:8px; padding:14px 12px 13px; border-right:1px solid var(--rule-soft); font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-.02em; color:var(--ink)}
.idx-head:last-child{border-right:0}
.idx-head:hover{background:rgba(27,59,214,.07); text-decoration:none; color:var(--accent)}
.idx-head .num{font-family:var(--mono); font-weight:400; font-size:10.5px; color:var(--accent); letter-spacing:.08em}

/* compact bar on inner pages */
.bar{border-bottom:2px solid var(--ink)}
.bar-top{display:flex; align-items:center; justify-content:space-between; gap:28px; padding:16px 0 14px}
.bar-top .wordmark{font-size:clamp(24px,3.4vw,36px); white-space:nowrap}
.bar .strap{border-top:0; padding-top:0; text-align:right; max-width:32ch}
.bar-nav{border-top:1px solid var(--ink); display:grid; grid-template-columns:repeat(8,1fr); font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:-.01em}
.bar-nav a{display:flex; align-items:center; gap:8px; padding:12px 10px; color:var(--ink); border-right:1px solid var(--rule-soft)}
.bar-nav a:last-child{border-right:0}
.bar-nav a[aria-current]{background:var(--accent); color:#fff}
.bar-nav a:hover{background:rgba(27,59,214,.08); text-decoration:none}
.bar-nav a[aria-current]:hover{background:var(--accent); color:#fff}
.subindex{position:sticky; top:0; z-index:20; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); background:#E4E4E2; font-size:14.5px}
.subindex .wrap{display:flex; flex-wrap:wrap; gap:8px 22px; padding-block:9px}
.subindex a:hover{color:var(--second)}
.subindex .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.subindex a{color:var(--ink)}
.subindex a[aria-current]{font-weight:600; color:var(--second)}

/* ─────────── homepage bands ─────────── */
.lead-band{display:grid; grid-template-columns:1.05fr .95fr; gap:0; border-bottom:2px solid var(--ink)}
.lead-copy{padding:44px var(--gutter) 48px; display:flex; flex-direction:column; justify-content:center}
.lead-copy h2{font-size:clamp(32px,3.6vw,50px); line-height:1.02; margin:16px 0 16px}
.lead-copy .lede{font-family:var(--read); font-size:20px; line-height:1.5; margin-bottom:22px}
.lead-shot{position:relative; background:var(--dim); border-left:1px solid var(--ink); min-height:420px}
.lead-shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

.more{display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.more svg{stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round}

.band-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:20px; flex-wrap:wrap}
.band-head h2{font-size:clamp(28px,3vw,42px); line-height:1.03}
.band-head p{margin:0; max-width:46ch; font-size:16px; color:var(--muted)}
.band-accent .band-head p,.band-second .band-head p{color:rgba(247,243,238,.85)}

.quiet-line p{margin:0; max-width:26ch; font-family:var(--display); font-weight:400; font-size:clamp(30px,4.4vw,48px); line-height:1.14; letter-spacing:-.04em; text-wrap:balance}
.quiet-line .src{font-family:var(--mono); font-size:13px; letter-spacing:.08em; margin-top:20px; opacity:.85}

/* three-up cards, even height */
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:34px}
.card{display:flex; flex-direction:column; height:100%; color:var(--ink)}
.card:hover{text-decoration:none; color:var(--ink)}
.card:hover h3{color:var(--accent)}
.card .rule{border-top:2px solid var(--ink); margin-bottom:14px}
.card .shot{aspect-ratio:16/10; background:var(--dim); overflow:hidden; margin-bottom:16px}
.card .shot img{width:100%; height:100%; object-fit:cover}
.card h3{font-size:23px; line-height:1.14; margin:8px 0}
.card p{margin:0; font-size:16px; color:var(--muted)}
.card .kicker{margin-bottom:2px}
.card .foot{margin-top:auto; padding-top:14px}

/* ─────────── the register (signature table) ─────────── */
.register{border-top:2px solid var(--ink)}
.register table{width:100%}
.register thead th{background:var(--accent); color:#fff; font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.16em; text-transform:uppercase; text-align:left; padding:13px 18px; border-left:1px solid rgba(255,255,255,.28)}
.register thead th:first-child{border-left:0}
.register tbody td{padding:15px 18px; border-left:1px solid var(--rule-soft); border-bottom:1px solid var(--rule); vertical-align:top; font-size:16px; line-height:1.45}
.register tbody td:first-child{border-left:0}
.register tbody tr:nth-child(even){background:rgba(16,17,20,.035)}
.register tbody tr:last-child td{border-bottom:2px solid var(--ink)}
.register .rule-name{font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.015em; line-height:1.25}
.register .sub{display:block; font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:5px}
.register .where{font-family:var(--mono); font-size:14px; line-height:1.45}
.register-foot{display:flex; justify-content:space-between; gap:24px; padding-top:11px; font-family:var(--mono); font-size:12px; color:var(--muted); flex-wrap:wrap}

/* seat dots */
.seats{display:flex; flex-direction:column; gap:8px}
.seats svg{stroke:var(--ink); fill:none; stroke-width:1.2; display:block}
.seats .lab{font-family:var(--mono); font-size:13px; color:var(--muted)}
.band-accent .seats svg{stroke:currentColor}

/* arithmetic panel */
.alloc{display:grid; grid-template-columns:250px repeat(3,1fr); border-top:1px solid rgba(241,239,233,.45)}
.alloc .h{padding:14px 30px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.75; border-left:1px solid rgba(241,239,233,.35)}
.alloc .h:first-child{border-left:0; padding-left:0; padding-right:34px}
.alloc .c{padding:18px 30px; border-left:1px solid rgba(241,239,233,.35); border-top:1px solid rgba(241,239,233,.25); display:flex; align-items:center; gap:16px}
.alloc .l{padding:18px 34px 18px 0; border-top:1px solid rgba(241,239,233,.25); display:flex; justify-content:space-between; align-items:baseline; gap:16px}
.alloc .name{font-family:var(--display); font-weight:600; font-size:21px}
.alloc .votes{font-family:var(--mono); font-size:17px; opacity:.85}
.alloc .n{font-family:var(--mono); font-size:28px; line-height:1}
.alloc .n.mark{color:#FFC7DF}
.alloc-note{display:grid; grid-template-columns:250px 1fr; gap:18px; padding-top:20px}
.alloc-note p{margin:0; font-size:16px; opacity:.9; max-width:86ch}
.alloc-note svg{stroke:#FFC7DF; fill:none; stroke-width:1.5; stroke-linecap:round}

/* term register (two-column definitions) */
.termreg{display:grid; grid-template-columns:minmax(170px,220px) 1fr; border-top:2px solid var(--ink)}
.termreg dt{padding:12px 16px 12px 0; border-bottom:1px solid var(--rule-soft); font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.015em}
.termreg dd{margin:0; padding:12px 0 12px 18px; border-bottom:1px solid var(--rule-soft); border-left:1px solid var(--rule-soft); font-size:16.5px; line-height:1.45}

/* section blocks on the homepage / hub */
.sect-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:2px solid var(--ink)}
.sect-grid > a{display:flex; flex-direction:column; padding:20px 20px 24px; border-right:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft); color:var(--ink)}
.sect-grid > a:nth-child(4n){border-right:0}
.sect-grid > a:hover{background:rgba(27,59,214,.06); text-decoration:none}
.sect-grid h3{display:flex; align-items:center; gap:10px; font-size:20px; margin-bottom:8px}
.sect-grid p{margin:0 0 10px; font-size:15.5px; color:var(--muted)}
.sect-grid .count{margin-top:auto; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}

/* ─────────── article ─────────── */
.article{padding-block:0 clamp(30px,4vw,52px)}
.article-body{padding-top:clamp(30px,4vw,48px)}

/* entry opener — type against a full-height photograph */
.entry-open{display:grid; grid-template-columns:1.02fr .98fr; border-bottom:2px solid var(--ink)}
.eo-copy{padding:clamp(30px,4vw,52px) clamp(32px,4vw,56px) clamp(30px,4vw,48px); display:flex; flex-direction:column; justify-content:center}
.eo-copy h1{font-size:clamp(34px,5vw,62px); line-height:.99; letter-spacing:-.05em; margin:16px 0 20px; max-width:16ch}
.eo-copy .lead{max-width:44ch}
.eo-copy .byline{margin-top:auto; padding-top:22px}
.eo-shot{position:relative; background:var(--dim); border-left:1px solid var(--ink); min-height:440px}
.eo-shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.eo-no{position:absolute; left:0; bottom:0; background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:19px; letter-spacing:.08em; padding:10px 18px 9px}
.eo-credit{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-top:10px; font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.eo-credit .credit{color:var(--muted)}
.measure{max-width:var(--measure); margin-inline:auto}
.breakout{max-width:min(1060px,100%); margin-inline:auto}
.title-block{max-width:960px; margin-inline:auto; padding-bottom:26px}
.title-block h1{font-size:clamp(34px,5.2vw,64px); line-height:.99; letter-spacing:-.05em; margin:18px 0 20px; max-width:19ch}
.lead{font-family:var(--read); font-size:clamp(19px,2.1vw,23px); line-height:1.48; margin:0; max-width:56ch; color:rgba(16,17,20,.88)}
.byline{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin-top:22px; padding-top:14px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.byline .sig{text-transform:none; letter-spacing:0; font-family:var(--read); font-size:15px}

.article h2{font-size:clamp(24px,2.6vw,32px); line-height:1.1; margin:0 0 14px}
.article .sect-mark{display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:0 18px; margin:56px 0 22px; padding-top:16px; border-top:2px solid var(--ink)}
.article .sect-mark .n{font-family:var(--mono); font-size:22px; line-height:1; color:var(--second); letter-spacing:.02em}
.article .sect-mark h2{font-size:clamp(26px,3vw,36px); letter-spacing:-.04em}
.article .sect-mark .line{display:none}
.article .sect-mark + .measure > p:first-child{font-size:20px}
.article > .wrap > .measure:first-of-type > p:first-child{font-size:21px; line-height:1.55}
.article p{font-size:19px; line-height:1.62}
.article .measure p:last-child{margin-bottom:0}

/* figure system — three treatments, one drawing system */
.article-figure{margin:44px auto}
.article-figure img{width:100%; background:var(--dim)}
.article-figure figcaption{font-family:var(--read); font-size:16.5px; line-height:1.45; color:var(--ink)}
.article-figure .credit{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-top:8px}

/* 1 · plate — image on an ultramarine mat with a mono caption bar */
.fig-plate{max-width:min(1060px,100%)}
.fig-plate .mat{background:var(--accent); padding:18px 18px 0}
.fig-plate .bar{display:flex; justify-content:space-between; gap:24px; padding:12px 0 14px; color:var(--paper); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; border:0}
.fig-plate figcaption{margin-top:14px; max-width:62ch}

/* 2 · inset — hairline frame in the measure, caption hangs off a rule */
.fig-inset{max-width:var(--measure)}
.fig-inset .frame{border:1px solid var(--ink); padding:14px}
.fig-inset figcaption{margin-top:12px; padding-top:10px; border-top:2px solid var(--second); max-width:54ch}

/* 3 · cross — a linked plate to a sibling entry, image tinted to the ground */
.fig-cross{max-width:min(1060px,100%); display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--ink)}
.fig-cross .shot{background:var(--dim); aspect-ratio:16/10; overflow:hidden}
.fig-cross .shot img{width:100%; height:100%; object-fit:cover}
.fig-cross figcaption{padding:22px 24px; display:flex; flex-direction:column; justify-content:center; border-left:1px solid var(--ink)}
.fig-cross .kicker{margin-bottom:10px}
.fig-cross h3{font-size:24px; line-height:1.12; margin-bottom:8px}
.fig-cross p{font-size:16px; color:var(--muted); margin:0 0 12px}

/* 4 · strip — full-measure-breaking wide band */
.fig-strip{max-width:100%}
.fig-strip .shot{aspect-ratio:24/7; background:var(--dim); overflow:hidden}
.fig-strip .shot img{width:100%; height:100%; object-fit:cover}
.fig-strip figcaption{background:var(--ink); color:var(--paper); padding:13px 20px; display:flex; justify-content:space-between; gap:28px; font-family:var(--mono); font-size:13px; line-height:1.5}
.fig-strip .credit{margin:0; color:rgba(247,243,238,.6)}

/* interruptions */
.pullquote{position:relative; margin:52px auto; max-width:min(1060px,100%); padding:34px 0 30px; border-top:2px solid var(--second); border-bottom:2px solid var(--second)}
.pullquote::before{content:"“"; position:absolute; top:6px; left:-2px; font-family:var(--display); font-weight:700; font-size:96px; line-height:1; color:var(--second); opacity:.28}
.pullquote p{font-family:var(--display); font-weight:700; font-size:clamp(25px,3.2vw,38px); line-height:1.14; letter-spacing:-.04em; margin:0; max-width:24ch; margin-inline:auto; text-align:center; text-wrap:balance}
.blockquote{margin:32px auto; max-width:var(--measure); padding:22px 24px; background:rgba(27,59,214,.07); border-top:2px solid var(--accent)}
.blockquote p{margin:0 0 10px; font-size:19px}
.blockquote cite{font-family:var(--mono); font-size:13px; font-style:normal; color:var(--muted)}
.callout{margin:32px auto; max-width:min(1060px,100%); background:var(--accent); color:var(--paper); padding:24px 26px}
.callout p{margin:0; font-size:19px; line-height:1.5}
.callout .eyebrow{color:rgba(247,243,238,.75); display:block; margin-bottom:10px}
.note{max-width:var(--measure); margin:22px auto; padding:14px 0 0; border-top:1px solid var(--rule); font-size:16px; color:var(--muted)}

.panel{margin:38px auto; max-width:min(1060px,100%); border:1px solid var(--ink); background:var(--paper)}
.panel > .ph{display:flex; align-items:center; gap:10px; padding:13px 22px; background:var(--accent); color:var(--paper); font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase}
.panel > .pb{padding:20px 22px 22px}
.panel .termreg{border-top:0}
.panel .termreg dt:last-of-type,.panel .termreg dd:last-of-type{border-bottom:0}

.timeline{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:auto 1fr; gap:0}
.timeline li{display:contents}
.timeline .t-when{font-family:var(--mono); font-size:14px; color:var(--second); padding:11px 18px 11px 0; border-bottom:1px solid var(--rule-soft); max-width:22ch}
.timeline .t-what{padding:11px 0; border-bottom:1px solid var(--rule-soft); border-left:1px solid var(--rule-soft); padding-left:18px; font-size:16.5px; line-height:1.45}
.timeline li:last-child .t-when,.timeline li:last-child .t-what{border-bottom:0}

.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--ink); margin:32px auto; max-width:min(1060px,100%)}
.statblock{background:var(--ground); padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px}
.stat-num{font-family:var(--mono); font-size:40px; line-height:1; color:var(--accent)}
.stat-label{font-size:15px; line-height:1.4; color:var(--muted)}

.datatable,.versus{margin:32px auto; max-width:min(1060px,100%); border-top:2px solid var(--ink)}
.datatable th,.versus th{background:var(--accent); color:#fff; font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.16em; text-transform:uppercase; text-align:left; padding:12px 16px; border-left:1px solid rgba(255,255,255,.28)}
.datatable th:first-child,.versus th:first-child{border-left:0}
.datatable td,.versus td{padding:13px 16px; border-left:1px solid var(--rule-soft); border-bottom:1px solid var(--rule); font-size:16.5px; line-height:1.45; vertical-align:top}
.datatable td:first-child,.versus td:first-child{border-left:0}
.datatable tbody tr:nth-child(even),.versus tbody tr:nth-child(even){background:rgba(16,17,20,.035)}
.versus tbody th{background:transparent; color:var(--ink); font-family:var(--display); font-size:16px; letter-spacing:-.015em; text-transform:none; border-bottom:1px solid var(--rule)}

.chart{margin:32px auto; max-width:min(1060px,100%)}
.chart svg{width:100%; height:auto; overflow:visible}
.chart .axis{stroke:var(--rule); stroke-width:1}
.chart .barfill{fill:var(--accent)}
.chart .barfill.alt{fill:var(--second)}
.chart .blab{font-family:var(--mono); font-size:12px; fill:var(--muted)}
.chart .bval{font-family:var(--mono); font-size:12px; fill:var(--ink)}
.chart .lineplot{fill:none; stroke:var(--accent); stroke-width:2}
.chart figcaption{margin-top:12px; padding-top:10px; border-top:1px solid var(--rule); font-size:15.5px; color:var(--muted)}

.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:32px auto; max-width:min(1060px,100%)}
.gallery figure{border:1px solid var(--ink); padding:10px}
.gallery img{aspect-ratio:4/3; object-fit:cover; background:var(--dim)}
.gallery figcaption{margin-top:9px; font-size:14.5px; line-height:1.4; color:var(--muted)}

/* cards / references */
.profile-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin:30px auto; max-width:min(1060px,100%)}
.profile-card{border:1px solid var(--ink); padding:18px; display:flex; flex-direction:column; gap:8px; height:100%}
.profile-card .p-photo{aspect-ratio:1; object-fit:cover; background:var(--dim); width:88px}
.profile-card h3{font-size:20px}
.profile-card .p-role{font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:0}
.profile-card p{font-size:16px; margin:0}
.profile-card .p-links{margin-top:auto; padding-top:10px; font-size:15px}
.profile-card .p-attr{font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.profile-card.no-photo{border-left:4px solid var(--second)}

.org-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:26px auto; max-width:min(1060px,100%)}
.org-card{display:flex; align-items:center; gap:12px; border:1px solid var(--rule); padding:12px 14px; color:var(--ink); background:var(--paper)}
.org-card:hover{border-color:var(--ink); text-decoration:none}
.org-logo{width:44px; height:44px; object-fit:contain; background:var(--ink); flex:none}
.org-name{font-family:var(--display); font-weight:600; font-size:16px; display:block}
.org-host{font-family:var(--mono); font-size:12px; color:var(--muted); display:block}
.entity-ref{font-family:var(--display); font-weight:600; white-space:nowrap}

.further-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0; border-top:2px solid var(--ink); margin-top:8px}
.further-grid a{padding:20px 24px 24px 0; border-right:1px solid var(--rule-soft); color:var(--ink); display:flex; flex-direction:column; gap:8px}
.further-grid a:last-child{border-right:0}
.further-grid a:hover{text-decoration:none; color:var(--accent)}
.further-grid .t{font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.025em; line-height:1.14}
.further-grid .d{font-size:15.5px; color:var(--muted); font-family:var(--read)}

.related-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.related-links li{border-bottom:1px solid var(--rule-soft)}
.related-links li:first-child{border-top:1px solid var(--rule)}
.related-links a{display:flex; align-items:center; gap:12px; padding:12px 0; color:var(--ink); font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.02em}
.related-links a:hover{color:var(--accent); text-decoration:none}

/* category listing */
.cat-list{list-style:none; margin:0; padding:0; border-top:2px solid var(--ink)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list > li > a{display:grid; grid-template-columns:54px 1fr 1.15fr; gap:24px; align-items:start; padding:20px 0; color:var(--ink)}
.cat-list > li > a:hover{text-decoration:none; background:rgba(27,59,214,.05)}
.cat-list .n{font-family:var(--mono); font-size:22px; color:var(--second); line-height:1.1}
.cat-list .t{font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.03em; line-height:1.14}
.cat-list .d{font-size:16.5px; color:var(--muted); line-height:1.45}
.cat-list > li > a:hover .t{color:var(--accent)}

/* ─────────── supporters ─────────── */
.supporters{border-top:2px solid var(--ink); display:grid; grid-template-columns:290px 1fr; gap:0 56px; align-items:start}
.sup-head h2{font-size:24px; line-height:1.08}
.sup-head p{margin:12px 0 0; font-size:15px; color:var(--muted)}
.sup-groups{display:grid; grid-template-columns:repeat(auto-fit,292px); justify-content:start; gap:0 40px; align-items:start}
.sup-group > h3{font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); padding-bottom:10px; border-bottom:2px solid var(--ink)}
.sponsor-list{display:flex; flex-direction:column}
.sponsor{display:flex; flex-direction:column; gap:9px; padding:14px 0; border-bottom:1px solid var(--rule-soft); color:var(--ink)}
.sponsor:hover{text-decoration:none; color:var(--ink)}
.sponsor img{width:264px; max-width:100%; height:52px; object-fit:contain; object-position:left center; background:var(--ink); padding:8px 14px}
.sponsor .sponsor-name{font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-.015em; white-space:nowrap}
.sponsor .sponsor-blurb{font-size:15.5px; line-height:1.45; color:var(--muted); min-width:200px}
.sponsor:hover .sponsor-name{color:var(--accent)}

/* ─────────── footer ─────────── */
.site-foot{background:var(--ink); color:var(--paper); padding-block:44px 40px; margin-top:0}
.site-foot a{color:var(--paper)}
.site-foot a:hover{color:#FFC7DF}
.foot-top{display:flex; align-items:flex-end; justify-content:space-between; gap:44px; padding-bottom:26px; border-bottom:1px solid rgba(241,239,233,.28); flex-wrap:wrap}
.foot-top .wordmark{font-family:var(--display); font-weight:800; font-size:32px; letter-spacing:-.05em; line-height:.9}
.foot-top p{margin:0; max-width:56ch; font-size:15px; color:rgba(241,239,233,.65); text-align:right}
.foot-index{display:grid; grid-template-columns:repeat(4,1fr); gap:22px 34px; padding-top:26px}
.foot-index a{display:block; color:var(--paper); padding-top:12px; border-top:1px solid rgba(241,239,233,.28)}
.foot-index a:hover{text-decoration:none; border-top-color:#FFC7DF}
.foot-index a:hover h4{color:#FFC7DF}
.foot-index h4{display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-.02em; color:var(--paper); margin-bottom:6px}
.foot-index h4 .ico{opacity:.75}
.foot-index .fb{font-size:14.5px; line-height:1.45; color:rgba(241,239,233,.6)}
.foot-end{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-top:26px; margin-top:22px; border-top:1px solid rgba(241,239,233,.28); font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:rgba(241,239,233,.6)}
.foot-end nav{display:flex; gap:20px}

/* ─────────── utility pages ─────────── */
.page-body{max-width:var(--measure); margin-inline:auto}
.page-body h1{font-size:clamp(32px,5vw,54px); letter-spacing:-.045em; margin-bottom:20px}
.page-body h2{font-size:26px; margin:34px 0 12px}
.page-body p{font-size:19px}
.notfound{text-align:center; padding-block:clamp(60px,12vw,140px)}
.notfound svg{stroke:var(--accent); fill:none; stroke-width:1.3; margin:0 auto 26px}
.notfound h1{font-size:clamp(34px,6vw,64px); letter-spacing:-.05em}
.notfound p{font-size:20px; color:var(--muted); max-width:44ch; margin:16px auto 26px}

.sg-block{padding-block:34px; border-top:1px solid var(--rule)}
.sg-block > h2{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--second); margin-bottom:18px}

/* ─────────── responsive ─────────── */
@media (max-width:1120px) and (min-width:641px){
  .idx-head:nth-last-child(-n+4){border-bottom:0}
}
@media (max-width:1120px){
  :root{--gutter:32px}
  .index-print{grid-template-columns:repeat(4,1fr)}
  .idx-head{border-bottom:1px solid var(--rule-soft)}
  .idx-head:nth-child(4n){border-right:0}

  .bar-nav{grid-template-columns:repeat(4,1fr)}
  .bar-nav a{border-bottom:1px solid var(--rule-soft)}
  .bar-nav a:nth-child(4n){border-right:0}
  .bar-nav a:nth-last-child(-n+4){border-bottom:0}
  .supporters{grid-template-columns:1fr; gap:26px}
  .sect-grid{grid-template-columns:repeat(2,1fr)}
  .sect-grid > a:nth-child(4n){border-right:1px solid var(--rule-soft)}
  .sect-grid > a:nth-child(2n){border-right:0}
  .foot-index{grid-template-columns:repeat(2,1fr)}
  .alloc{grid-template-columns:180px repeat(3,1fr)}
  .alloc-note{grid-template-columns:1fr}
}
@media (max-width:860px){
  body{font-size:17px}
  .split2{grid-template-columns:1fr !important; gap:38px !important}
  .lead-band,.entry-open{grid-template-columns:1fr}
  .eo-copy{order:2}
  .eo-shot{order:1; min-height:300px; border-left:0; border-bottom:1px solid var(--ink)}
  .subindex{position:static}
  .lead-copy{padding:32px var(--gutter) 34px; order:2}
  .lead-shot{min-height:280px; border-left:0; border-bottom:1px solid var(--ink); order:1}
  .three{grid-template-columns:1fr; gap:30px}
  .fig-cross{grid-template-columns:1fr}
  .fig-cross figcaption{border-left:0; border-top:1px solid var(--ink)}
  .cat-list > li > a{grid-template-columns:40px 1fr; gap:8px 16px}
  .cat-list .d{grid-column:2}
  .foot-top p{text-align:left}
  .further-grid{grid-template-columns:1fr}
  .further-grid a{border-right:0; border-bottom:1px solid var(--rule-soft); padding-right:0}
  .further-grid a:last-child{border-bottom:0}
}
@media (max-width:640px){
  :root{--gutter:20px}
  .masthead-top{flex-direction:column; align-items:flex-start; gap:18px; padding:20px 0 18px}
  .strap{max-width:none; padding-top:10px}
  .brand{gap:14px}
  .brand h1,.brand .wordmark{white-space:normal}
  .index-print{grid-template-columns:repeat(2,minmax(0,1fr))}
  .idx-head{padding-inline:0 12px}
  .idx-head:nth-child(2n){border-right:0}
  .idx-head:nth-last-child(-n+2){border-bottom:0}
  .bar-nav a:nth-last-child(-n+4){border-bottom:1px solid var(--rule-soft)}
  .bar-nav a:nth-last-child(-n+2){border-bottom:0}
  .bar-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bar-nav a:nth-child(2n){border-right:0}
  .sect-grid{grid-template-columns:1fr}
  .sect-grid > a{border-right:0 !important}
  .foot-index{grid-template-columns:1fr}
  .sup-groups{grid-template-columns:minmax(0,1fr); gap:28px}
  .termreg{grid-template-columns:1fr}
  .termreg dt{padding-bottom:2px; border-bottom:0}
  .termreg dd{padding-left:0; border-left:0}
  .timeline{grid-template-columns:1fr}
  .timeline .t-when{padding-bottom:2px; border-bottom:0}
  .timeline .t-what{padding-left:0; border-left:0}
  .alloc{grid-template-columns:1fr}
  .alloc .h{display:none}
  .alloc .h:first-child{display:block}
  .alloc .c{border-left:0; padding-inline:0}
  .alloc .l{padding-right:0}
  .alloc .c::before{content:attr(data-m); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.7; flex:1}
  .alloc .l{border-top:2px solid rgba(241,239,233,.5)}
  .register thead{display:none}
  .register tbody tr{display:block; border-bottom:1px solid var(--ink); padding:14px 0}
  .register tbody tr:last-child td{border-bottom:0}
  .register tbody td{display:block; border-left:0; border-bottom:0; padding:4px 0}
  .register tbody td::before{content:attr(data-m); display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
  .datatable,.versus{display:block; overflow-x:auto}
  .fig-strip .shot{aspect-ratio:16/9}
  .fig-strip figcaption{flex-direction:column; gap:8px}
  .sponsor img{width:100%}
  .pullquote{padding-left:18px}
}


/* pinned sub-index: keep in-page anchors and the skip link clear of it,
   only at the widths where the strip is actually sticky */
@media (min-width:861px){
  html{scroll-padding-top:56px}
}
.subindex a[aria-current]{color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--second); text-decoration-thickness:2px; text-underline-offset:4px}

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

/* op-nav-collapse: this nav printed 208px of stacked links at 390 before any content
   (8 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 "bracket", 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 (56px) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (900px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-fold{display:none}
@media (max-width:900px){
  .nav-fold{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;padding:10px 4px;letter-spacing:.2em;gap:12px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .nav-fold::before{content:"[";opacity:.55}
  .nav-fold::after{content:"]";opacity:.55}
  .nav-fold-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-print.wrap{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .nav-fold-c:checked ~ .index-print.wrap{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .bar-nav.wrap{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .nav-fold-c:checked ~ .bar-nav.wrap{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .bar:has(> .nav-fold){display:flow-root}
  .masthead:has(> .nav-fold){display:flow-root}
  .nav-fold:not(:has(~ .index-print.wrap)):not(:has(~ .bar-nav.wrap)){display:none}
}

/* op-footer-compact: the footer printed 9 rows for 12 link(s) in
   2 list(s) — 1213px at 390, 10% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 1213 -> 972px (20% 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:24px!important;row-gap:8px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:26px}
}

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   1364px at 390, 12% of the whole page. Two columns bring it to
   955px (30% shorter). Checked before writing: no new overflow, smallest mark still
   166px wide, longest blurb 3 lines, tile heights 109-247px.
   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-list), 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-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsor-list > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-list > * *{min-width:0!important;max-width:100%}
    .sponsor-list img,.sponsor-list svg{max-width:100%;height:auto}
  .sponsor-list .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

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

/* op-article-width: the article column was capped at 624px (74 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .measure) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.wrap.article-body div.measure{--measure:min(93.962ch, 100%)!important}
}
@media (min-width:1600px){
  div.wrap.article-body div.measure{--measure:min(clamp(93.962ch, 59.861vw, calc(93.962ch * 1.2)), 100%)!important}
  div.wrap.article-body div.measure > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-article-seam: text ran into the band that follows it (0-7px) — operator: "end of paragraph nearly touches intersection. Padding is missing." The section now keeps Design's own gap before the band: p.lead → div.byline: 22px (the band's own top padding). */
  div.eo-copy > p.lead:has(+ div.byline){padding-bottom:22px!important}
/* op-article-seam:end */

/* op-hover-pad */
.cat-list > li > a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right: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.card > div.shot > img,
  div.lead-band > div.lead-shot > img,
  figure.article-figure.fig-cross > div.shot > img,
  figure.article-figure.fig-inset > div.frame > img,
  figure.article-figure.fig-strip > div.shot > img,
  section.entry-open > div.eo-shot > img,
  section.lead-band > div.lead-shot > img){height:auto}
/* op-img-dims:end */
@media (min-width:641px) and (max-width:779px){.alloc.alloc{grid-template-columns:118px repeat(3,minmax(0,1fr))!important}.alloc.alloc > *{min-width:0!important;padding-left:14px!important;padding-right:14px!important}}
/* op-heading-levels:h1-mirror */
h1.rt-h2 { font-family:var(--display); font-weight:700; letter-spacing:-.035em; margin:0; text-wrap:pretty }
.lead-copy h1.rt-h2 { font-size:clamp(32px,3.6vw,50px); line-height:1.02; margin:16px 0 16px }
/* op-heading-levels:h1-mirror:end */