/* El Universal — a register of things made across Latin America
   Palette (4 members, each with a job):
     --ground   paper the site is printed on
     --ink      text and the dark bands
     --accent   jade — the register's own colour: opener band, notes, links
     --secondary achiote — section grounds, entry numbers, marks in the margin
   --accent and --secondary are both fully saturated and sit ~140deg apart in hue. */

:root{
  --ground:#EDEAE1;
  --ground-2:#E5E1D5;
  --ground-3:#DBD6C8;
  --ink:#14171A;
  --ink-2:#3C423F;
  --muted:#565C57;
  --rule:#C9C5B8;
  --accent:#0E6A55;
  --accent-dk:#0A503F;
  --accent-lt:#C0E0D3;
  --secondary:#D2531C;
  --secondary-ink:#9C3809;   /* achiote at text contrast on the ground */
  --secondary-band:#B8450E;  /* achiote as a band ground behind white text */
  --secondary-lt:#FBD9C6;

  --serif:'Zilla Slab',Georgia,'Times New Roman',serif;
  --mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --pad:36px;
  --measure:70ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--secondary-ink);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-weight:600;line-height:1.12;margin:0;letter-spacing:-.008em;text-wrap:balance}
p{margin:0 0 1.05em;text-wrap:pretty}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
hr{border:0;border-top:1px solid var(--rule);margin:32px 0}
::selection{background:var(--accent);color:var(--ground)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:1340px;margin:0 auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:900px;margin:0 auto;padding-inline:var(--pad)}

/* ---------- icons ---------- */
.icon{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}
.icon-lg{width:60px;height:60px;flex:none}
.icon-xl{width:84px;height:84px;flex:none}

/* ---------- header ---------- */
.topline{background:var(--ink);color:var(--ground)}
.topline .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding-block:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.topline span:last-child{color:#8A9490;text-align:right}

.masthead{border-bottom:2px solid var(--ink)}
.masthead .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;padding-block:26px 20px}
.wordmark{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5vw,52px);line-height:.9;letter-spacing:-.012em;color:var(--ink)}
.wordmark:hover{text-decoration:none;color:var(--ink)}
.mast-links{display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.mast-links a{display:flex;align-items:center;gap:8px;color:var(--secondary-ink)}

.mainnav{border-bottom:1px solid var(--rule);background:var(--ground-2)}
.mainnav ul{display:grid;grid-template-columns:repeat(6,1fr);list-style:none;margin:0;padding:0}
.mainnav li{border-right:1px solid var(--rule);display:flex}
.mainnav li:last-child{border-right:0}
.mainnav a{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;gap:10px;padding:15px 14px;color:var(--ink);
  border-top:3px solid transparent;font-family:var(--mono);font-weight:500;font-size:13.5px;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.2;transition:background .12s,border-color .12s}
.mainnav a:hover{background:var(--ground-3);border-top-color:var(--secondary);text-decoration:none;color:var(--ink)}
.mainnav a .icon{width:1.55em;height:1.55em;color:var(--secondary-ink)}
.mainnav a:hover .icon{color:var(--secondary)}
.mainnav a[aria-current="page"]{background:var(--ink);color:#fff;border-top-color:var(--secondary)}
.mainnav a[aria-current="page"] .icon{color:var(--secondary-lt)}

/* ---------- section furniture ---------- */
.band{padding-block:52px}
.band-tight{padding-block:34px}
.bandhead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:11px;margin-bottom:26px}
.bandhead h2{font-size:26px}
.kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--secondary-ink)}
.eyebrow:hover{text-decoration:none;color:var(--ink)}

/* ---------- the signature spec strip ---------- */
.spec{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.spec div{padding:15px 20px;border-right:1px solid var(--rule)}
.spec div:first-child{padding-left:0}
.spec div:last-child{border-right:0;padding-right:0}
.spec dt,.spec .spec-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block}
.spec dd,.spec .spec-v{margin:6px 0 0;font-size:18px;line-height:1.3}
.spec--onlight div{border-right-color:var(--rule)}
.spec--ondark{border-color:var(--accent-lt)}
.spec--ondark div{border-right-color:rgba(255,255,255,.22)}
.spec--ondark .spec-k{color:var(--accent-lt)}
.spec--ondark .spec-v{color:#fff}

/* ---------- homepage opener ---------- */
.opener{background:var(--accent);color:#EAF0EC}
.opener a{color:#fff}
.opener .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding-block:56px}
.opener h1{font-size:clamp(34px,4.4vw,58px);margin:16px 0 20px;letter-spacing:-.015em}
.opener .lead{font-size:20px;line-height:1.55;color:#C8DCD4;font-weight:300;max-width:56ch}
.opener .eyebrow{color:var(--secondary-lt)}
.opener figure{margin:0}
.opener figure img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid rgba(255,255,255,.25)}
.opener figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-lt);padding-top:10px;border-top:1px solid rgba(255,255,255,.22);margin-top:12px}
.opener .cta{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-family:var(--mono);
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:4px}
.opener .cta:hover{text-decoration:none;color:var(--secondary-lt)}

/* ---------- quiet signature line ---------- */
.sigline{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.sigline .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:13px}
.sig-order{padding:22px 44px 22px 0;border-right:1px solid var(--rule)}
.sig-secs{padding:22px 0 22px 44px}
.sig-steps{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0;font-size:25px;line-height:1.15}
.sig-steps b{font-weight:600;color:var(--ink)}
.sig-steps i{font-style:normal;font-size:17px;color:var(--secondary-ink)}
.sig-secs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:11px 26px}
.sig-secs a{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:17.5px;line-height:1.2}
.sig-secs a .icon{width:1.35em;height:1.35em;color:var(--accent)}
.sig-secs a:hover{text-decoration:none;color:var(--secondary-ink)}
.sig-secs a:hover .icon{color:var(--secondary)}

/* ---------- entry cards ---------- */
.entry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:36px}
.entry-card{display:flex;flex-direction:column;height:100%;color:var(--ink)}
.entry-card:hover{text-decoration:none;color:var(--ink)}
.entry-card:hover h3{color:var(--secondary-ink)}
.entry-card .shot{border:1px solid var(--rule);background:var(--ground-2);padding:14px}
.entry-card .shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.entry-card .no{font-family:var(--mono);font-size:12px;color:var(--secondary-ink);margin-top:16px}
.entry-card h3{font-size:25px;margin:6px 0 4px;min-height:2.2em}
.entry-card p{font-size:16.5px;line-height:1.5;color:var(--ink-2);margin:0 0 14px;font-weight:300}
.entry-card .foot{margin-top:auto;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.entry-card .foot .icon{color:var(--accent)}

/* compact rows */
.rowlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rowlist li{border-bottom:1px solid var(--rule)}
.rowlist a{display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:baseline;
  padding:16px 0;color:var(--ink)}
.rowlist a:hover{text-decoration:none;color:var(--secondary-ink)}
.rowlist .no{font-family:var(--mono);font-size:12.5px;color:var(--secondary-ink)}
.rowlist .ti{font-size:21px;line-height:1.25}
.rowlist .se{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:7px;white-space:nowrap}
.rowlist .se .icon{color:var(--accent)}

/* ---------- map ---------- */
.mapband{background:var(--ink);color:var(--ground)}
.mapband a{color:var(--accent-lt)}
.mapband .bandhead{border-bottom-color:var(--ground);}
.mapband .kicker{color:#8A9490}
.mapfig{margin:0;display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center}
.mapfig svg{width:100%;height:auto;max-height:74vh;display:block}
.map-land{fill:#242C28;stroke:#3C4A43;stroke-width:1.4;vector-effect:non-scaling-stroke}
.map-pin{fill:var(--secondary)}
.map-pin-ring{fill:none;stroke:var(--secondary);stroke-width:1.6;opacity:.55}
.map-label{font-family:var(--mono);font-size:15px;fill:#EFEBE2;letter-spacing:.04em}
.maplist{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.28)}
.maplist li{border-bottom:1px solid rgba(255,255,255,.14)}
.maplist a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:13px 12px 13px 0;color:var(--ground)}
.maplist a:hover{text-decoration:none;background:rgba(255,255,255,.055);padding-left:12px;padding-right:0}
.maplist .pl{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:#14171A;background:var(--secondary-lt);padding:5px 9px;white-space:nowrap}
.maplist a:hover .pl{background:#fff}
.maplist .pt{color:#fff;font-size:22px;line-height:1.25;font-weight:500}
.maplist .pn{font-family:var(--mono);font-size:12px;color:#8A9490}
.maplist a:hover .pn{color:var(--secondary-lt)}
.map-slot{min-height:220px;background:var(--ground-3);border:1px solid var(--rule)}

/* ---------- supporters ---------- */
.supporters{border-top:2px solid var(--ink)}
.sponsor-group{margin-top:26px}
.sponsor-group > .kicker{display:block;padding-bottom:9px;border-bottom:1px solid var(--ink)}
.sponsor-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 40px;list-style:none;margin:0;padding:0}
.sponsor-list li{border-bottom:1px solid var(--rule);display:flex}
.sup-line{font-size:18px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:74ch;margin:0 0 10px}
.sponsor{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 0;width:100%;color:var(--ink)}
.sponsor:hover{text-decoration:none}
.sponsor:hover .sponsor-name{color:var(--secondary-ink)}
.sponsor img{width:280px;height:52px;max-width:100%;object-fit:contain;object-position:left center;
  background:var(--ink);padding:8px 14px}
.sponsor-name{font-family:var(--serif);font-size:19px;line-height:1.25;font-weight:500}
.sponsor-blurb{font-family:var(--serif);font-weight:300;font-size:16.5px;line-height:1.5;color:var(--ink-2);max-width:62ch}
.sponsor-note{font-family:var(--mono);font-size:13px;line-height:1.6;letter-spacing:0;color:var(--muted);
  border-top:1px solid var(--rule);padding-top:14px;margin-top:20px;max-width:36ch}

/* ---------- footer ---------- */
.sitefoot{border-top:2px solid var(--ink);background:var(--ground-2);margin-top:64px}
.sitefoot .wrap{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:40px;padding-block:34px 52px}
.sitefoot h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  font-weight:400;margin-bottom:12px}
.sitefoot ul{list-style:none;margin:0;padding:0}
.sitefoot li{margin-bottom:8px}
.sitefoot li a{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:16px}
.sitefoot li a .icon{color:var(--accent)}
.sitefoot .sig{font-family:var(--serif);font-weight:300;font-size:17px;line-height:1.5;color:var(--ink-2);max-width:38ch}

/* ---------- page heads ---------- */
.pagehead{background:var(--secondary-band);color:#fff}
.pagehead a{color:#fff}
.pagehead .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;padding-block:44px}
.pagehead h1{font-size:clamp(32px,4.6vw,50px)}
.pagehead p{font-size:19px;line-height:1.5;margin:12px 0 0;max-width:62ch;font-weight:300;color:#fff}
.pagehead .count{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#FCE9DF;text-align:right;line-height:1.9}

.plainhead{border-bottom:2px solid var(--ink)}
.plainhead .wrap{padding-block:44px 30px}
.plainhead h1{font-size:clamp(32px,4.6vw,50px)}
.plainhead p{font-size:19px;font-weight:300;color:var(--ink-2);max-width:64ch;margin:14px 0 0}

/* ---------- article ---------- */
.article{padding-block:40px 20px}
.article-head{max-width:1340px;margin:0 auto;padding-inline:var(--pad)}
.article-head h1{font-size:clamp(36px,6vw,68px);margin:16px 0 20px;letter-spacing:-.018em;max-width:19ch}
.article-head .lead{font-size:clamp(19px,2.2vw,23px);line-height:1.45;font-weight:300;color:var(--ink-2);
  max-width:60ch;margin:0 0 30px}

.prose{display:grid;max-width:1340px;margin:0 auto;padding-inline:var(--pad);
  grid-template-columns:[full-start] minmax(0,1fr) [wide-start] minmax(0,80px) [main-start] minmax(0,var(--measure)) [main-end] minmax(0,80px) [wide-end] minmax(0,1fr) [full-end]}
.prose{counter-reset:sec}
.prose > *{grid-column:main}
.prose > .u-wide{grid-column:wide}
.prose > .u-full{grid-column:full}
.prose p{font-size:19.5px;line-height:1.68;margin:0 0 1.3em}
.prose h2{font-size:30px;margin:2.1em 0 .7em;padding-top:.9em;border-top:1px solid var(--rule)}
.prose h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);display:block;
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.2em;color:var(--secondary-ink);margin-bottom:11px}
.prose > p:first-of-type{font-size:21px;line-height:1.6}
.prose > p:first-of-type::first-letter{float:left;font-family:var(--serif);font-weight:600;font-size:3.5em;
  line-height:.82;padding:.04em .1em 0 0;color:var(--secondary-ink)}
.prose h2 + p{font-size:20.5px}
.prose h3{font-size:22px;margin:1.6em 0 .5em}
.prose em{font-style:italic}
.prose > ul,.prose > ol{font-size:19px;line-height:1.6}

.lead{font-size:21px;line-height:1.5;font-weight:300;color:var(--ink-2)}

/* --- figure system: three treatments, one drawing system --- */
.article-figure{margin:38px 0;border:1px solid var(--rule);background:var(--ground-2);padding:16px}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{border-top:1px solid var(--rule);margin-top:14px;padding-top:12px;
  font-size:17px;line-height:1.45;max-width:56ch}
.article-figure .credit{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:9px;max-width:none}
.article-figure .plateno{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--secondary-ink);display:block;margin-bottom:10px}

/* treatment 2 — full-bleed band, caption offset right on the dark ground */
.fig-bleed{border:0;background:var(--ink);padding:0;margin:48px 0}
.fig-bleed img{aspect-ratio:24/10}
.fig-bleed figcaption{border-top:0;margin:0;padding:18px var(--pad) 22px;color:var(--ground);
  max-width:none;display:flex;justify-content:flex-end}
.fig-bleed figcaption > span{max-width:54ch;text-align:right}
.fig-bleed .credit{color:#8A9490}
.fig-bleed .plateno{color:var(--secondary-lt)}

/* treatment 3 — inset, prose runs beside it */
.fig-inset{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:start;
  border:0;border-top:2px solid var(--ink);background:none;padding:18px 0 0}
.fig-inset img{aspect-ratio:1/1}
.fig-inset figcaption{border-top:0;margin:0;padding:0}

/* --- register note: the material lifted out of the prose --- */
.regnote{margin:44px 0;background:var(--accent);color:#EAF0EC;padding:30px 32px}
.regnote h3{font-family:var(--serif);font-size:23px;color:#fff;margin:0 0 4px}
.regnote .kicker{color:var(--accent-lt);display:block;margin-bottom:10px}
.regnote ul{list-style:none;margin:16px 0 0;padding:0}
.regnote li{border-top:1px solid rgba(255,255,255,.22);padding:13px 0}
.regnote li:last-child{padding-bottom:0}
.regnote .t{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:#fff;margin-bottom:5px}
.regnote .d{display:block;font-size:17px;line-height:1.5;font-weight:300;color:#C8DCD4}
.regnote--alt{background:var(--ground-2);color:var(--ink);border-top:2px solid var(--secondary)}
.regnote--alt h3{color:var(--ink)}
.regnote--alt .kicker{color:var(--secondary-ink)}
.regnote--alt li{border-top-color:var(--rule)}
.regnote--alt .t{color:var(--ink)}
.regnote--alt .d{color:var(--ink-2)}

/* --- styleguide components --- */
.pullquote{margin:40px 0;border-top:2px solid var(--secondary);border-bottom:1px solid var(--rule);padding:22px 0}
.pullquote p{font-size:27px;line-height:1.3;margin:0;color:var(--ink);font-weight:500;text-wrap:pretty}
.blockquote{margin:34px 0;padding-left:24px;border-left:3px solid var(--accent)}
.blockquote p{font-size:21px;line-height:1.45;margin:0 0 10px;font-weight:300}
.blockquote cite{font-family:var(--mono);font-size:12px;letter-spacing:.08em;font-style:normal;color:var(--muted)}
.callout{margin:34px 0;background:var(--ground-2);border-left:4px solid var(--secondary);padding:20px 24px}
.callout p{margin:0;font-size:18.5px;line-height:1.5}
.note{font-family:var(--mono);font-size:14px;line-height:1.6;color:var(--muted);
  border-top:1px solid var(--rule);padding-top:12px;margin:28px 0}

.datatable,.versus{width:100%;border-collapse:collapse;margin:34px 0;font-size:16.5px}
.datatable caption,.versus caption{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding-bottom:10px}
.datatable th,.versus th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:400;border-bottom:2px solid var(--ink);padding:9px 14px 9px 0;vertical-align:bottom}
.datatable td,.versus td{border-bottom:1px solid var(--rule);padding:12px 14px 12px 0;vertical-align:top;line-height:1.4}
.datatable tr td:first-child,.versus tr td:first-child{font-weight:500}
.versus tbody th{border-bottom:1px solid var(--rule);padding:12px 14px 12px 0;color:var(--ink);
  font-family:var(--serif);font-size:16.5px;letter-spacing:0;text-transform:none;text-align:left}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:34px 0}
.statblock{background:var(--ground);padding:20px}
.stat-num{display:block;font-family:var(--serif);font-weight:600;font-size:42px;line-height:1;color:var(--secondary-ink)}
.stat-label{display:block;font-family:var(--mono);font-size:11.5px;line-height:1.45;letter-spacing:.06em;color:var(--muted);margin-top:10px}

.timeline{list-style:none;margin:34px 0;padding:0;border-top:2px solid var(--ink)}
.timeline li{display:grid;grid-template-columns:minmax(120px,26%) 1fr;gap:22px;border-bottom:1px solid var(--rule);padding:14px 0}
.t-when{font-family:var(--mono);font-size:12.5px;line-height:1.45;letter-spacing:.04em;color:var(--secondary-ink)}
.t-what{font-size:17.5px;line-height:1.45}

.chart{margin:34px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .bar-r{fill:var(--accent)}
.chart .bar-l{font-family:var(--mono);font-size:11px;fill:var(--ink)}
.chart .bar-v{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.chart figcaption{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--muted);
  border-top:1px solid var(--rule);padding-top:10px;margin-top:12px}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:34px 0}
.gallery figure{margin:0;border:1px solid var(--rule);background:var(--ground-2);padding:12px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:15px;line-height:1.4;padding-top:10px;margin-top:10px;border-top:1px solid var(--rule)}

.map-figure{margin:40px 0;border:1px solid var(--rule);background:var(--ink);padding:16px}
.map-figure svg{width:100%;height:auto;display:block}
.map-figure figcaption{border-top:1px solid rgba(255,255,255,.2);margin-top:14px;padding-top:12px;
  font-size:17px;line-height:1.45;color:var(--ground);max-width:56ch}
.map-figure .credit{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#8A9490;margin-top:8px}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:34px 0}
.profile-card{border:1px solid var(--rule);background:var(--ground-2);padding:18px;display:flex;flex-direction:column}
.profile-card .p-photo{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-size:21px}
.p-role{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary-ink);margin:6px 0 10px}
.profile-card p{font-size:16.5px;line-height:1.5}
.p-links{margin-top:auto;padding-top:8px}
.p-attr{font-family:var(--mono);font-size:11px;color:var(--muted)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:34px 0}
.org-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--rule);background:var(--ground-2);
  padding:16px;color:var(--ink)}
.org-card:hover{text-decoration:none;border-color:var(--ink)}
.org-logo{width:100%;max-width:190px;height:38px;object-fit:contain;object-position:left center;background:var(--ink);padding:5px 9px}
.org-name{font-size:18px;line-height:1.25;font-weight:500}
.org-host{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.entity-ref{white-space:nowrap;border-bottom:1px solid var(--accent)}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:34px 0}
.further-grid a{background:var(--ground);padding:18px 20px;color:var(--ink);font-size:19px;line-height:1.3;display:block}
.further-grid a:hover{background:var(--ground-2);text-decoration:none;color:var(--secondary-ink)}

.related-links{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.related-links li{border-bottom:1px solid var(--rule)}
.related-links a{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;padding:15px 0;color:var(--ink)}
.related-links a:hover{text-decoration:none;color:var(--secondary-ink)}
.related-links .icon{color:var(--accent);align-self:center}

.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:64px 1fr minmax(0,1.05fr);gap:22px;align-items:start;
  padding:22px 0;color:var(--ink)}
.cat-list > li > a:hover{text-decoration:none}
.cat-list > li > a:hover .ti{color:var(--secondary-ink)}
.cat-list .no{font-family:var(--mono);font-size:13px;color:var(--secondary-ink);padding-top:6px}
.cat-list .ti{font-size:26px;line-height:1.2;display:block}
.cat-list .pl{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-top:8px;display:block}
.cat-list .br{font-size:17px;line-height:1.5;font-weight:300;color:var(--ink-2)}

/* collapsible long list */
.more{margin-top:0}
.more > summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--secondary-ink);padding:16px 0;border-bottom:1px solid var(--rule)}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{content:" +"}
.more[open] > summary::after{content:" –"}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .opener .grid{grid-template-columns:1fr;gap:34px}
  .mapfig{grid-template-columns:1fr;gap:30px}
  .sitefoot .wrap{grid-template-columns:1fr 1fr}
  .cat-list > li > a{grid-template-columns:52px 1fr;gap:16px}
  .cat-list .br{grid-column:2}
}
@media (max-width:860px){
  :root{--pad:20px}
  body{font-size:17px}
  .mainnav ul{grid-template-columns:repeat(3,1fr)}
  .mainnav li{border-bottom:1px solid var(--rule)}
  .mainnav li:nth-child(3n){border-right:0}
  .mainnav a{flex-direction:column;gap:6px;padding:11px 6px;font-size:11px;letter-spacing:.02em}
  .mainnav a .icon{width:1.8em;height:1.8em}
  .topline .wrap{padding-block:7px}
  .topline span:last-child{display:none}
  .masthead .wrap{padding-block:18px 14px;gap:12px}
  .wordmark{font-size:clamp(30px,9vw,40px)}
  .mast-links{gap:16px;font-size:11px}
  .entry-card h3{min-height:0}
  .prose > p:first-of-type{font-size:19px}
  .prose h2 + p{font-size:19px}
  .spec{grid-template-columns:1fr 1fr}
  .spec div{padding:13px 16px;border-bottom:1px solid var(--rule)}
  .spec div:nth-child(2n){border-right:0;padding-right:0}
  .spec div:nth-child(2n+1){padding-left:0}
  .spec div:nth-last-child(-n+2){border-bottom:0}
  .pagehead .wrap{grid-template-columns:1fr;gap:18px}
  .pagehead .count{text-align:left}
  .pagehead .icon-xl{width:56px;height:56px}
  .prose p{font-size:18px}
  .prose h2{font-size:25px}
  .fig-inset{grid-template-columns:1fr}
  .fig-bleed figcaption{justify-content:flex-start}
  .fig-bleed figcaption > span{text-align:left}
  .sigline{grid-template-columns:1fr}
  .sig-order{padding:20px 0;border-right:0;border-bottom:1px solid var(--rule)}
  .sig-secs{padding:20px 0}
  .sig-steps{font-size:21px}
  .rowlist a{grid-template-columns:44px 1fr;gap:12px}
  .rowlist .se{grid-column:2}
  .sitefoot .wrap{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .regnote{padding:22px 20px;margin-inline:0}
  .topline .wrap{flex-direction:column;align-items:flex-start;gap:4px}
  .topline span:last-child{text-align:left}
  .maplist a{grid-template-columns:auto minmax(0,1fr);gap:14px;padding-right:0}
  .maplist .pn{display:none}
  .maplist .pt{font-size:19px}
  .sponsor img{max-width:280px}
}
@media (max-width:420px){
  .mainnav a{font-size:10.5px}
  .stat-num{font-size:34px}
}
@media print{
  .mainnav,.supporters{display:none}
  body{background:#fff}
}

/* variants */
.profile-card.no-photo{border-top:3px solid var(--secondary)}
.org-card.no-logo{border-left:3px solid var(--accent)}
.org-card.no-logo .org-name{font-size:19px}
.chart.line .line-p{fill:none;stroke:var(--secondary);stroke-width:2.5}
.chart.line .grid-l{stroke:var(--rule);stroke-width:1}
.chart.line .dot{fill:var(--secondary)}
.chart.donut .d-track{fill:none;stroke:var(--rule);stroke-width:22}
.chart.donut .d-val{fill:none;stroke:var(--accent);stroke-width:22;stroke-linecap:butt}
.chart.donut .d-num{font-family:var(--serif);font-weight:600;font-size:30px;fill:var(--ink)}
.sg-swatch{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:26px 0}
.sg-swatch div{border:1px solid var(--rule);padding:0}
.sg-swatch .chip{height:86px}
.sg-swatch p{margin:0;padding:11px 13px;font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--muted)}
.sg-swatch b{display:block;font-family:var(--serif);font-size:15px;color:var(--ink);font-weight:500}
.sg-note{background:var(--ink);color:var(--ground);padding:14px 18px;font-family:var(--mono);font-size:12px;line-height:1.6;margin:0 0 30px}

/* tables stack rather than scroll on narrow screens */
@media (max-width:760px){
  .datatable,.versus{display:block}
  .datatable thead,.versus thead{display:none}
  .datatable tbody,.versus tbody,.datatable tr,.versus tr{display:block;width:100%}
  .datatable td,.versus td,.versus tbody th{display:block;width:100%;border:0;padding:3px 0}
  .datatable tr,.versus tr{border-bottom:1px solid var(--rule);padding:15px 0}
  .datatable td::before,.versus td::before{content:attr(data-l);display:block;font-family:var(--mono);
    font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  .versus tbody th{font-weight:600;padding-bottom:8px}
  .datatable td[data-l="Object"]{padding-bottom:8px}
}
@media (max-width:520px){
  .article-head h1,.opener h1{overflow-wrap:break-word}
  .sponsor img{height:48px}
  .statrow{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr}
}

/* the slot stacks whenever its own row is too narrow to give the name a full line,
   not at an arbitrary viewport width */
@media (max-width:400px){
  .sponsor-list{grid-template-columns:1fr}
  .sponsor img{width:100%;max-width: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.sponsor img{box-sizing:border-box!important;padding:8px 14px!important}

/* op-footer-compact: the footer printed 6 rows for 6 link(s) in
   1 list(s) — 651px at 390, 9% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 651 -> 532px (18% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(8px,2.78vw,40px)!important;row-gap:8px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-article-width: the article column was capped at 726px (82 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 3 of "[full-start] minmax(0,1fr) [wide-start] minmax(0,80px) [main-start] minmax(0,var(--measure)) [main-end] minmax(0,80px) [wide-end] minmax(0,1fr) [full-end]" (declared in .prose) 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.prose{grid-template-columns:[full-start] minmax(0,1fr) [wide-start] minmax(0,80px) [main-start] min(900px, calc(100% - 160px)) [main-end] minmax(0,80px) [wide-end] minmax(0,1fr) [full-end]!important}
}
@media (min-width:1600px){
  div.prose{grid-template-columns:[full-start] minmax(0,1fr) [wide-start] minmax(0,80px) [main-start] min(clamp(900px, 62.500vw, 1080px), calc(100% - 160px)) [main-end] minmax(0,80px) [wide-end] minmax(0,1fr) [full-end]!important}
  div.prose > :is(p:not([class])){font-size:clamp(20.5px,1.4236vw,24.6px)!important}
}
/* op-article-width:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.entry-card > div.shot > img,
  article.article > figure.article-figure.fig-bleed > img,
  div.grid.wrap > figure > img,
  div.prose > figure.article-figure > img,
  div.prose > figure.article-figure.fig-inset > img,
  section.band.wrap > figure.article-figure > img){height:auto}
/* op-img-dims:end */