/* FLAG Pets — palette: 4 members with named jobs.
   --paper  ground        #F1EDE3  warm paper
   --ink    ink           #16221A  near-black green
   --green  secondary     #1E5B3B  municipal green, used as area
   --flag   accent        #DC5A12  signal orange, used as area + rules
   --flag-ink is the accent held to text contrast on paper. */
:root{
  --paper:#F1EDE3;
  --card:#FBF8F0;
  --shade:#E7E1D2;
  --ink:#16221A;
  --ink-soft:#37483B;
  --green:#1E5B3B;
  --green-pale:#CFE0D4;
  --flag:#DC5A12;
  --flag-ink:#A83E08;
  --flag-pale:#FFBE85;
  --rule:#C6C0B0;
  --quiet:#6E6A5E;
  --serif:Vollkorn,Georgia,'Times New Roman',serif;
  --mono:'Space Mono',ui-monospace,'Courier New',monospace;
  --wrap:1500px;
  --measure:660px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:19px;line-height:1.65;
  text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--flag-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-weight:600;letter-spacing:-0.015em;line-height:1.1;margin:0}
::selection{background:var(--flag);color:var(--card)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(18px,4vw,40px)}
.narrow{max-width:960px}
.mono{font-family:var(--mono)}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--flag-ink)}
.quiet{color:var(--quiet)}
.icon{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.18em}
.icon-lg{width:34px;height:34px;stroke-width:1.5}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--card);padding:8px 12px;z-index:99}

/* ---------- masthead ---------- */
.masthead{background:var(--card);border-bottom:1px solid var(--ink)}
.masthead-in{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:18px 14px}
.brand{display:block;color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand b{display:block;font-size:clamp(24px,3vw,31px);font-weight:700;letter-spacing:0.15em;line-height:1}
.brand i{display:block;height:7px;background:var(--flag);margin-top:7px}
.brand-block{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:9px;align-items:start}
.brandmark{grid-row:1/3;align-self:stretch;height:100%;max-height:96px;width:auto;aspect-ratio:56/64;stroke:var(--green);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.brand-sub{font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--green);max-width:52ch}
.util{display:flex;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase}
.util a{display:flex;align-items:center;gap:7px;padding:3px 14px;border-left:1px solid var(--rule);color:var(--green)}
.util a:first-child{border-left:0;padding-left:0}
.util a:last-child{padding-right:0}
.util a:hover{color:var(--flag-ink)}
.sectionbar{background:var(--green);color:var(--card)}
.sectionbar ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.sectionbar li{border-right:1px solid #3D7B58}
.sectionbar a{display:flex;align-items:center;gap:8px;color:var(--card);font-size:12.5px;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;padding:11px 15px 10px}
.sectionbar a:hover{background:var(--ink);color:var(--card);text-decoration:none}
.sectionbar a[aria-current]{background:var(--flag);color:var(--ink)}
.sectionbar .n{font-family:var(--mono);color:var(--flag-pale)}
.sectionbar a[aria-current] .n{color:var(--ink)}

/* ---------- generic bands ---------- */
.band{padding:clamp(38px,5vw,64px) 0}
.band-tight{padding:clamp(26px,3vw,38px) 0}
.band-green{background:var(--green);color:var(--card)}
.band-green a{color:var(--card)}
.band-green .kicker{color:var(--flag-pale)}
.band-shade{background:var(--shade)}
.band-card{background:var(--card);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.bandhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:9px;margin-bottom:26px}
.band-green .bandhead{border-bottom-color:#3D7B58}
.bandhead h2{font-size:clamp(21px,2.2vw,27px)}
.bandhead .mono{font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--quiet)}
.band-green .bandhead .mono{color:var(--green-pale)}

/* ---------- homepage lead ---------- */
.lead-band{background:var(--ink);color:var(--card);position:relative}
.lead-media{position:relative}
.lead-media img{width:100%;height:clamp(300px,46vw,620px);object-fit:cover}
.lead-copy{background:var(--ink);padding-block:30px 36px}
.lead-copy h1{font-size:clamp(30px,4.4vw,72px);letter-spacing:-0.028em;line-height:0.99;max-width:22ch;margin-top:14px}
.lead-copy p{font-size:clamp(17px,1.5vw,21px);line-height:1.45;max-width:62ch;color:#E4DFD2;margin:16px 0 0}
.lead-tag{display:inline-flex;align-items:center;gap:9px;background:var(--flag);color:var(--ink);padding:6px 12px 5px;font-family:var(--mono);font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase}
.lead-foot{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;color:#A9A79A}
.lead-foot a{color:var(--flag-pale)}

/* ---------- the sequence (section run) ---------- */
.seq{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--rule)}
.seq a{display:flex;flex-direction:column;gap:8px;background:var(--paper);color:var(--ink);padding:20px 20px 22px}
.seq a:hover{background:var(--card);text-decoration:none}
.seq .top{display:flex;align-items:center;justify-content:space-between;color:var(--green)}
.seq .no{font-family:var(--mono);font-size:24px;color:var(--flag-ink);line-height:1}
.seq h3{font-size:20px}
.seq p{margin:0;font-size:16px;line-height:1.45;color:var(--ink-soft)}
.seq .count{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--quiet);margin-top:auto;padding-top:10px}

/* ---------- signature line ---------- */
.signature{max-width:44ch;margin:0 auto;text-align:center;font-size:clamp(20px,2.3vw,31px);line-height:1.32;font-style:italic;color:var(--green)}

/* ---------- edit / cards ---------- */
.edit{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--ink);padding:13px 13px 0;position:relative;color:var(--ink)}
.card:hover{text-decoration:none}
.card .tab{position:absolute;top:-1px;left:-1px;background:var(--ink);color:var(--card);font-family:var(--mono);font-size:11.5px;letter-spacing:0.06em;padding:4px 9px 3px;display:flex;align-items:center;gap:6px}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card h3{font-size:22px;margin:14px 0 8px;min-height:2.2em}
.card p{margin:0 0 14px;font-size:16.5px;line-height:1.45;color:var(--ink-soft)}
.card .meta{margin:auto -13px 0;border-top:1px solid var(--ink);padding:8px 13px 9px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--quiet);display:flex;gap:8px;align-items:center}
.card-lg h3{font-size:clamp(24px,2.4vw,31px)}
.card-lg img{aspect-ratio:16/9}

/* ---------- register / lists ---------- */
.register{border-top:2px solid var(--ink)}
.reg-row{display:grid;grid-template-columns:76px 1fr 150px;gap:18px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule);color:var(--ink)}
.reg-row:hover{background:var(--card);text-decoration:none}
.reg-row .no{font-family:var(--mono);font-size:13px;color:var(--flag-ink)}
.reg-row .t{font-size:19px;font-weight:600}
.reg-row .d{display:block;font-size:16px;font-weight:400;color:var(--ink-soft);line-height:1.4}
.reg-row .s{font-family:var(--mono);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;color:var(--quiet);display:flex;align-items:center;gap:7px}
.cat-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:16px 0;color:var(--ink);align-items:baseline}
.cat-list a:hover{background:var(--card);text-decoration:none}
.cat-list .no{font-family:var(--mono);font-size:13px;color:var(--flag-ink)}
.cat-list .t{font-size:22px;font-weight:600;display:block}
.cat-list .d{font-size:16.5px;color:var(--ink-soft);line-height:1.45;display:block;margin-top:4px;max-width:70ch}
details.more{margin-top:14px}
details.more summary{font-family:var(--mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--flag-ink);cursor:pointer}

/* ---------- article ---------- */
.art-head{background:var(--card);border-bottom:1px solid var(--ink);padding:26px 0 30px}
.art-kicker{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--flag-ink)}
.art-kicker a{color:var(--flag-ink)}
.art-head h1{font-size:clamp(30px,4.2vw,58px);letter-spacing:-0.026em;line-height:1.0;margin:14px 0 0;max-width:30ch}
.lead{font-size:clamp(18px,1.7vw,22px);line-height:1.44;color:var(--ink-soft);margin:16px 0 0;max-width:60ch;font-weight:500}
.art-rule{height:7px;width:180px;background:var(--flag);margin-top:22px}
.art-body{max-width:var(--measure);padding-block:6px}
.art-body p{margin:0 0 22px;font-size:19.5px;line-height:1.66}
.art-body h2{display:flex;align-items:center;gap:11px;font-size:15px;letter-spacing:0.13em;text-transform:uppercase;font-weight:700;border-top:1px solid var(--ink);padding-top:13px;margin:38px 0 16px}
.art-body h2 .icon{width:19px;height:19px;color:var(--flag-ink);stroke-width:1.7}
.art-body h2 .n{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;color:var(--quiet);margin-left:auto;text-transform:none}
.art-body p.opener::first-letter{float:left;font-family:var(--serif);font-size:3.05em;line-height:0.8;font-weight:600;color:var(--green);padding:5px 11px 0 0}
.keyline{margin:30px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:16px 0 18px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.keyline .icon{width:22px;height:22px;color:var(--flag-ink);margin-top:3px}
.keyline p{margin:0;font-size:20px;line-height:1.4;font-weight:500}
.keyline .lab{grid-column:2;font-family:var(--mono);font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--quiet);margin-bottom:7px;display:block}
.art-body h3{font-size:21px;margin:26px 0 10px}
.art-body ul,.art-body ol{margin:0 0 22px;padding-left:1.15em}
.art-body li{margin-bottom:7px}
.art-body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--rule)}
.art-nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:2px solid var(--ink);margin-top:34px;padding-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase}

/* ---------- text components ---------- */
.pullquote{margin:32px 0;padding:0 0 0 22px;border-left:4px solid var(--flag)}
.pullquote p{font-size:clamp(21px,2.1vw,27px);line-height:1.32;margin:0;font-style:italic;color:var(--green)}
.blockquote{margin:30px 0;background:var(--shade);padding:20px 24px;border-left:4px solid var(--green)}
.blockquote p{margin:0;font-size:20px;line-height:1.45;font-style:italic}
.blockquote cite{display:block;margin-top:11px;font-family:var(--mono);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;font-style:normal;color:var(--quiet)}
.callout{margin:30px 0;background:var(--card);border:1px solid var(--ink);border-top:7px solid var(--flag);padding:18px 22px}
.callout p{margin:0;font-size:18.5px;line-height:1.5}
p.note{background:var(--shade);border-left:3px solid var(--quiet);padding:12px 16px;font-size:17px;line-height:1.5;color:var(--ink-soft)}

/* notes-for-design panels — the material that breaks the prose */
.record{background:var(--green);color:var(--card);margin:38px 0}
.record-in{padding-block:26px 30px}
.record h2,.record h3{color:var(--card);border:0;padding:0;margin:0}
.record .hd{display:flex;align-items:center;gap:11px;border-bottom:1px solid #3D7B58;padding-bottom:9px;margin-bottom:18px}
.record .hd span{font-family:var(--mono);font-size:11.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--flag-pale)}
.record h3{font-size:clamp(20px,2vw,26px)}
.timeline{list-style:none;margin:0;padding:0;counter-reset:t}
.timeline li{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:20px;padding:12px 0;border-bottom:1px solid rgba(241,237,227,0.28)}
.timeline li:last-child{border-bottom:0}
.t-when{font-family:var(--mono);font-size:13px;letter-spacing:0.06em;color:var(--flag-pale);line-height:1.45}
.t-what{font-size:17.5px;line-height:1.45}
.record .timeline li{border-bottom-color:rgba(241,237,227,0.28)}
.deflist{margin:0;display:grid;gap:1px;background:rgba(241,237,227,0.28)}
.deflist>div{display:grid;grid-template-columns:minmax(160px,280px) 1fr;gap:20px;background:var(--green);padding:12px 0}
.deflist dt{font-weight:600;font-size:17.5px}
.deflist dd{margin:0;font-size:17px;line-height:1.45;color:var(--green-pale)}
.plainlist{margin:0;padding-left:1.1em}
.plainlist li{margin-bottom:9px;font-size:17.5px;line-height:1.5}
.record .plainlist li::marker{color:var(--flag-pale)}

/* data components */
.statrow{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);margin:30px 0}
.statblock{flex:1 1 180px;background:var(--card);padding:16px 18px 18px}
.stat-num{display:block;font-family:var(--mono);font-size:34px;line-height:1;color:var(--flag-ink)}
.stat-label{display:block;margin-top:8px;font-size:15.5px;line-height:1.4;color:var(--ink-soft)}
table.versus,table.datatable{width:100%;border-collapse:collapse;margin:30px 0;font-size:17px}
table.versus th,table.versus td,table.datatable th,table.datatable td{border-bottom:1px solid var(--rule);padding:11px 12px 11px 0;text-align:left;vertical-align:top;line-height:1.45}
table.versus thead th,table.datatable thead th{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--quiet);border-bottom:2px solid var(--ink)}
.tablewrap{overflow-x:auto}
.chart{margin:30px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:12px;font-size:15.5px;color:var(--ink-soft);border-top:1px solid var(--rule);padding-top:8px}

/* ---------- figure system: three treatments, one family ---------- */
figure{margin:0}
figcaption .credit{display:block;margin-top:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--quiet)}
/* A — plate: mat + hairline, ruled caption row */
.fig-plate{margin:34px 0;background:var(--card);border:1px solid var(--ink);padding:14px 14px 0}
.fig-plate img{width:100%;aspect-ratio:16/8.4;object-fit:cover}
.fig-plate figcaption{display:grid;grid-template-columns:1.7fr 1fr;border-top:1px solid var(--ink);margin-top:14px}
.fig-plate figcaption .cap{padding:12px 16px 13px 0;font-size:17px;line-height:1.42}
.fig-plate figcaption .credit{margin:0;padding:12px 0 13px 18px;border-left:1px solid var(--ink)}
/* B — inset: sits in the column, prose beside it, hanging caption */
.fig-inset{margin:8px 0 20px;width:min(260px,100%)}
.fig-inset img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--ink);padding:9px;background:var(--card)}
.fig-inset figcaption{margin-top:11px;padding-left:16px;border-left:3px solid var(--flag);font-size:15.5px;line-height:1.4}
@media(min-width:980px){.fig-inset{float:right;margin:6px 0 18px 26px}}
/* C — bleed: breaks the measure entirely */
.fig-bleed{margin:40px 0;background:var(--ink);color:var(--card)}
.fig-bleed img{width:100%;height:clamp(230px,34vw,430px);object-fit:cover}
.fig-bleed figcaption{padding:14px 0 18px;display:grid;grid-template-columns:minmax(0,1.6fr) 1fr;gap:24px;font-size:17px;line-height:1.42}
.fig-bleed figcaption .credit{margin:0;color:#A9A79A;text-align:right}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:30px 0}
.gallery figure{background:var(--card);border:1px solid var(--ink);padding:10px 10px 0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{padding:10px 0 12px;font-size:15px;line-height:1.4;border-top:1px solid var(--rule);margin-top:10px}
.map-figure .map-slot{aspect-ratio:16/9;background:var(--shade);border:1px dashed var(--rule)}

/* ---------- cards / refs ---------- */
.profile-grid,.org-grid,.further-grid{display:grid;gap:18px;margin:26px 0}
.profile-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.profile-card{background:var(--card);border:1px solid var(--ink);padding:16px 18px 18px}
.profile-card .p-photo{aspect-ratio:1/1;object-fit:cover;width:88px;border-radius:50%;margin-bottom:12px}
.profile-card h3{font-size:20px}
.profile-card .p-role{font-family:var(--mono);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;color:var(--flag-ink);margin:6px 0 10px}
.profile-card p{font-size:16.5px;line-height:1.5;margin:0 0 10px;color:var(--ink-soft)}
.profile-card .p-links{font-family:var(--mono);font-size:12px;margin:0}
.org-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.org-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--ink);padding:12px 14px;color:var(--ink)}
.org-logo{width:44px;height:44px;object-fit:contain;background:var(--ink);padding:5px}
.org-name{font-weight:600;font-size:17px;display:block}
.org-host{font-family:var(--mono);font-size:11px;color:var(--quiet);display:block}
.entity-ref{font-weight:600;white-space:nowrap}
.further-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.further-grid a{background:var(--card);border:1px solid var(--ink);border-left:6px solid var(--green);padding:14px 16px;font-size:18px;font-weight:600;color:var(--ink);display:flex;gap:10px;align-items:flex-start}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.related-links a{display:flex;gap:10px;align-items:flex-start;font-size:18px;font-weight:600}

/* ---------- colophon / supporters ---------- */
.colophon{background:var(--ink);color:var(--card)}
.colophon-in{padding-block:34px 40px}
.colophon .hd{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid #3A483C;padding-bottom:9px;margin-bottom:20px}
.colophon .hd h2{font-size:14px;letter-spacing:0.15em;text-transform:uppercase}
.colophon .hd .mono{font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:#8E8C80}
.sponsors{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.sponsor{display:grid;grid-template-rows:auto auto;gap:10px;max-width:420px;background:#1E2A22;border:1px solid #3A483C;padding:11px 12px 12px;color:var(--card)}
.sponsor:hover{border-color:var(--flag);text-decoration:none;color:var(--card)}
.sponsor img{width:100%;height:44px;max-height:44px;object-fit:contain;background:#101914;padding:5px 7px}
.sponsor-name{font-family:var(--mono);font-size:12.5px;letter-spacing:0.04em;line-height:1.3}
@media(max-width:700px){.sponsors{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}

/* ---------- footer ---------- */
.foot{background:var(--green);color:var(--card);padding:40px 0 56px}
.foot-in{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap}
.foot b{font-size:22px;font-weight:600;display:block}
.foot i{display:block;height:5px;width:130px;background:var(--flag);margin-top:6px}
.foot p{font-family:var(--mono);font-size:11px;line-height:1.65;color:var(--green-pale);margin:13px 0 0;max-width:46ch}
.foot nav{display:flex;gap:40px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px}
.foot nav div{display:grid;gap:7px;align-content:start}
.foot a{color:var(--card)}

/* ---------- misc pages ---------- */
.page-head{padding:34px 0 8px}
.page-head h1{font-size:clamp(30px,4vw,54px);letter-spacing:-0.025em}
.prose{max-width:var(--measure)}
.prose p{font-size:19px;line-height:1.66;margin:0 0 20px}
.prose h2{font-size:15px;letter-spacing:0.13em;text-transform:uppercase;border-top:1px solid var(--ink);padding-top:12px;margin:30px 0 12px}
.sg-block{border-top:1px solid var(--rule);padding-top:10px;margin-top:40px}
.sg-block>h2{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--flag-ink);margin-bottom:14px}

@media(max-width:700px){
  body{font-size:18px}
  .art-body p{font-size:18.5px}
  .reg-row{grid-template-columns:56px 1fr;gap:12px}
  .reg-row .s{grid-column:2;padding-top:4px}
  .fig-plate figcaption,.fig-bleed figcaption{grid-template-columns:1fr}
  .fig-plate figcaption .credit{border-left:0;border-top:1px solid var(--rule);padding:8px 0 12px}
  .timeline li,.deflist>div{grid-template-columns:1fr;gap:4px}
  .cat-list a{grid-template-columns:44px 1fr}
  .cat-list{border-top:0}
  table.versus th,table.datatable th,table.versus td,table.datatable td{min-width:132px}
  .record-in{padding-block:22px 26px}
  .pullquote{padding-left:16px}
  .blockquote{padding:16px 18px}
  .callout{padding:15px 17px}
  /* masthead: no divider rules once the util nav wraps */
  .masthead-in{gap:16px}
  .brand-block{column-gap:13px;row-gap:7px}
  .brandmark{max-height:72px}
  .brand-sub{font-size:11px}
  .util{gap:0 20px;margin-block:-4px}
  .util a{border-left:0;padding:11px 0;min-height:44px;align-items:center}
  .sectionbar ul{display:grid;grid-template-columns:1fr 1fr}
  .sectionbar li{border-right:1px solid #3D7B58;border-bottom:1px solid #3D7B58}
  .sectionbar a{font-size:11.5px;padding:10px 10px 9px;gap:6px;height:100%;align-items:center}
  /* figures and panels */
  .fig-inset{width:100%;margin:14px 0 22px}
  .fig-plate{padding:10px 10px 0}
  .fig-plate img{aspect-ratio:16/10}
  .fig-plate figcaption .cap{padding-right:0}
  .article-figure{padding:10px 10px 0}
  .gallery{gap:14px}
  /* headings and end matter */
  .art-body h2{align-items:flex-start;gap:9px}
  .art-body h2 .icon{margin-top:1px}
  .art-body h2 .n{margin-left:auto;flex:none;padding-top:2px}
  .art-body p.opener::first-letter{font-size:2.7em;padding-right:9px}
  .artfoot .hd{flex-wrap:wrap;gap:6px 14px}
  .artfoot .outro{gap:8px 18px}
  .bandhead{flex-wrap:wrap;gap:6px 14px}
  .step a{padding:15px 16px 17px}
  .sibs a{padding:14px 15px 16px}
  /* charts stay legible when the viewBox is scaled down */
  .chart .axis,.chart .barlabel{font-size:15px}
  /* footer */
  .foot{padding:32px 0 44px}
  .foot nav{gap:22px}
  .foot nav a{min-height:40px;display:flex;align-items:center;padding-block:2px}
  .foot nav div{gap:0}
  .bandhead .mono a,.lead-foot a{display:inline-flex;align-items:center;min-height:36px}
  .foot-in{gap:26px}
  /* colophon */
  .colophon .hd{flex-wrap:wrap;gap:4px 12px}
  .sponsor img{height:40px;max-height:40px}
}
@media(max-width:430px){
  .brand b{font-size:22px;letter-spacing:0.12em}
  .brandmark{max-height:60px}
  .lead-media img{height:clamp(240px,60vw,320px)}
  .statblock{flex-basis:100%}
  .profile-card .p-photo{width:72px}
}

/* named component: column-width figure (same family as fig-plate) */
.article-figure{margin:30px 0;background:var(--card);border:1px solid var(--ink);padding:12px 12px 0}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{border-top:1px solid var(--ink);margin-top:12px;padding:11px 0 13px;font-size:16.5px;line-height:1.42}
.sponsor-blurb{font-size:15.5px;line-height:1.4;color:#CFC9B8}
.profile-card.no-photo{border-left:6px solid var(--flag)}
.org-card.no-logo .org-logo-stub{width:44px;height:44px;background:var(--ink);color:var(--card);display:grid;place-items:center;font-family:var(--mono);font-size:15px;flex:none}
.p-attr{font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--quiet);margin:6px 0 0}
.chart .axis{font-family:var(--mono);font-size:11px;fill:var(--quiet)}
.chart .barlabel{font-family:var(--mono);font-size:11.5px;fill:var(--ink)}

/* ---------- end-of-entry apparatus ---------- */
.artfoot{border-top:1px solid var(--ink);background:var(--card);margin-top:46px}
.artfoot-in{padding-block:30px 40px}
.step{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink);border:1px solid var(--ink)}
.step a{display:flex;flex-direction:column;gap:7px;background:var(--card);padding:18px 20px 20px;color:var(--ink)}
.step a:hover{background:var(--shade);text-decoration:none}
.step a.fwd{background:var(--green);color:var(--card)}
.step a.fwd:hover{background:#17492F}
.step .dir{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--flag-ink)}
.step a.fwd .dir{color:var(--flag-pale)}
.step .t{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-0.015em;line-height:1.15}
.step .d{font-size:16px;line-height:1.45;color:var(--ink-soft);max-width:52ch}
.step a.fwd .d{color:var(--green-pale)}
.artfoot .hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:8px;margin:34px 0 22px}
.artfoot .hd h2{display:flex;align-items:center;gap:10px;font-size:clamp(19px,1.9vw,24px)}
.artfoot .hd .mono{font-family:var(--mono);font-size:11px;letter-spacing:0.11em;text-transform:uppercase;color:var(--quiet)}
.sibs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.sibs a{display:flex;flex-direction:column;gap:7px;background:var(--card);padding:16px 18px 18px;color:var(--ink)}
.sibs a:hover{background:var(--paper);text-decoration:none}
.sibs .no{font-family:var(--mono);font-size:12px;color:var(--flag-ink)}
.sibs .t{font-size:19px;font-weight:600;line-height:1.2}
.sibs .d{font-size:15.5px;line-height:1.45;color:var(--ink-soft)}
.artfoot .outro{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;border-top:1px solid var(--rule);margin-top:26px;padding-top:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:0.07em;text-transform:uppercase}
@media(max-width:640px){.step{grid-template-columns:1fr}}

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

/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.page-head{padding-inline:clamp(18px,4vw,40px)}
}

/* op-money-grid-fill: the supporters grid left a measurable band of unused width.
   Fixed pixel tracks (often `repeat(auto-fit,<length>)`, which can never fill) are
   restated as `minmax(min(<track>,100%),1fr)`: Design's track size becomes the
   MINIMUM and the tracks share the remainder, so the tiles stay equal and the row
   fills. Measured per width, and only applied where more than half a tile of width
   was going unused. Tile ground, padding, borders and logo sizing are untouched. */
.sponsors{grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr))}
.sponsors .sponsor{max-width:none}

/* op-nav-collapse: this nav printed 175px 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 "centre-rule", bold, seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (0px measured) the button carries the build's
   gutter (clamp(18px,4vw,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 (860px 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. */
.index-toggle{display:none}
@media (max-width:860px){
  .index-toggle{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-inline:auto;justify-self:center;border:0;border-bottom:2px solid currentColor;border-radius:0;padding:8px 6px;letter-spacing:.16em;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

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

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1249px at 390, 17% of the whole page. Two columns bring it to
   615px (51% shorter). Checked before writing: no new overflow, smallest mark still
   143px wide, longest blurb 1 lines, tile heights 89-91px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.sponsors), 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){
  .sponsors{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsors > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsors > * *{min-width:0!important;max-width:100%}
    .sponsors img,.sponsors svg{max-width:100%;height:auto}
}

/* op-article-width: the article column was capped at 660px (79 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .art-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. The layout has no room to grow above 1600, so this width holds there. Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  main#main div.art-body{--measure:min(848px, 100%)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (660px) and was left behind when the text went to 848px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  div.narrow p.lead{max-width:min(848px, 100%)!important}
}
/* op-article-head:end */

/* op-hover-pad */
.reg-row{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-hover-pad */
.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; margin: 0px;}
.seq h2:where(.rt-h3){font-size: 20px;}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px){
  div.wrap.page-head{padding-left:max(0px, calc(max(clamp(18px,4vw,40px), 18px) - max(0px, (100vw - 1500px) / 2)));padding-right:max(0px, calc(max(clamp(18px,4vw,40px), 18px) - max(0px, (100vw - 1500px) / 2)))}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.art-body > figure.fig-inset > img,
  div.edit > a.card > img,
  div.edit > a.card.card-lg > img,
  div.narrow.wrap > figure.fig-plate > img,
  div.wrap > figure.fig-plate > img,
  main > figure.fig-bleed > img,
  section.lead-band > div.lead-media > img){height:auto}
/* op-img-dims:end */
@media (min-width:700px) and (max-width:1019px){.sponsors:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)}.sponsors:has(> [data-partner]) > [data-partner]{width:auto!important;max-width:none!important;min-width:0!important;margin-left:0!important;margin-right:0!important}.sponsors:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}[data-partner] img{background:transparent!important}
