/* ==========================================================================
   visitmozambique.net — direction 1b, "Three rooms"
   Colour as architecture: each section of the site is a saturated ground.

   PALETTE — five members, each with a job
     --paper    #F5EFE2  ground (sand)
     --ink      #0F1C2B  ink (navy)
     --teal     #0B4F63  room 1, the coast        [saturated, hue ~196]
     --flame    #D93A17  room 2, the city + accent [saturated, hue ~14]
     --cadmium  #F2B01E  room 3, the park + flag   [saturated, hue ~41]
   Two saturated members carry whole bands; the hues are far apart.

   TYPE  Big Shoulders Display (display, numerals, labels) / Chivo (text)
   ICONS one drawing system: 24 grid, 1.6 stroke, round caps, currentColor
   ========================================================================== */

:root {
  --paper:#F5EFE2; --paper-2:#EDE5D4; --ink:#0F1C2B; --ink-2:#3E4A55;
  --teal:#0B4F63; --teal-dark:#08303D; --flame:#D93A17; --cadmium:#F2B01E;
  --rule:#C9C0AE; --quiet:#6C7581;
  --disp:'Big Shoulders Display', 'Arial Narrow', system-ui, sans-serif;
  --text:'Chivo', system-ui, -apple-system, sans-serif;
  --t-mega:clamp(2.1rem, 8.4vw, 9.5rem);
  --t-h1:clamp(2.6rem, 5.6vw, 5.6rem);
  --t-h2:clamp(2rem, 3.6vw, 3.6rem);
  --t-h3:clamp(1.5rem, 2.2vw, 2.2rem);
  --t-h4:1.35rem;
  --t-lead:clamp(1.15rem, 1.5vw, 1.5rem);
  --t-body:1.125rem;
  --t-small:1rem;
  --t-fine:.875rem;
  --gut:clamp(1.25rem, 4vw, 3.5rem);
  --measure:68ch;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--text); font-size:var(--t-body); line-height:1.6;
  text-wrap:pretty; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
h1,h2,h3,h4 { font-family:var(--disp); font-weight:800; line-height:.9; margin:0; text-transform:uppercase; letter-spacing:.002em; }
h3,h4 { font-weight:700; }
p { margin:0 0 1.15em; }
a { color:var(--flame); text-decoration:none; }
a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:.18em; }
:focus-visible { outline:3px solid var(--flame); outline-offset:3px; }
.wrap { max-width:1360px; margin:0 auto; padding-inline:var(--gut); }
.measure { max-width:var(--measure); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.icon { width:1.5em; height:1.5em; flex:none; display:block; }
.kicker { font-family:var(--text); font-size:var(--t-fine); font-weight:700; letter-spacing:.14em; text-transform:uppercase; }

/* ---------- masthead ------------------------------------------------------ */
.mast { background:var(--teal); color:var(--paper); }
.mast a { color:var(--paper); }
.mast a:hover { color:var(--cadmium); text-decoration:none; }
.mast-in { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:clamp(1rem,3vw,3rem); padding:clamp(1.25rem,2.4vw,2.4rem) 0 clamp(1rem,1.8vw,1.6rem); }
.wordmark { display:flex; align-items:center; gap:.6rem; }
.wordmark svg { width:clamp(46px,5vw,84px); height:auto; color:var(--cadmium); }
.wordmark span { font-family:var(--disp); font-weight:800; font-size:var(--t-mega); line-height:.78; letter-spacing:-.015em; text-transform:uppercase; }
.mast-in { min-width:0; }
.wordmark { min-width:0; }
.wordmark .dot { color:var(--cadmium); }
.mast--inner .wordmark span { font-size:clamp(2rem,3.4vw,3.2rem); }
.mast--inner .wordmark svg { width:clamp(30px,3vw,44px); }
.mast-nav { display:flex; flex-wrap:wrap; gap:.5rem; align-items:stretch; }
.mast-nav a {
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--disp); font-weight:700; font-size:1.35rem; line-height:1;
  text-transform:uppercase; letter-spacing:.01em;
  padding:.7rem .95rem .6rem; border:1.5px solid rgba(245,239,226,.55);
}
.mast-nav a:hover { background:var(--cadmium); border-color:var(--cadmium); color:var(--ink); text-decoration:none; }
.mast-nav a:hover .icon { color:var(--ink); }
.mast-nav a[aria-current] { background:var(--cadmium); border-color:var(--cadmium); color:var(--ink); }
.mast-nav a[aria-current] .icon { color:var(--ink); }
.mast-nav .icon { color:var(--cadmium); width:1.35em; height:1.35em; }
.mast-strap { font-family:var(--disp); font-weight:600; font-size:clamp(1.4rem,2.6vw,2.6rem); line-height:1.06; text-transform:uppercase; color:#8FD3C7; max-width:52ch; margin:0; padding-bottom:clamp(1.6rem,3vw,3rem); }

/* ---------- rooms --------------------------------------------------------- */
.room { padding:clamp(2.6rem,5vw,5rem) 0 clamp(2.6rem,5vw,4.5rem); }
.room--coast { background:var(--teal); color:var(--paper); border-top:6px solid var(--cadmium); }
.room--city { background:var(--flame); color:var(--paper); }
.room--park { background:var(--cadmium); color:#231A08; }
.room--map { background:var(--teal-dark); color:var(--paper); }
.room--paper { background:var(--paper); color:var(--ink); }
.room--coast a, .room--city a { color:var(--cadmium); }
.room--park a { color:var(--teal); }
.room--map a { color:var(--cadmium); }
.room-no { font-family:var(--disp); font-weight:800; font-size:clamp(4rem,9vw,9.5rem); line-height:.76; display:block; }
.room--coast .room-no { color:var(--cadmium); }
.room--city .room-no { color:var(--ink); }
.room--park .room-no { color:var(--teal); }
.room-head { display:flex; align-items:flex-start; gap:1rem; }
.room-head .icon { width:clamp(2.4rem,4vw,3.6rem); height:auto; margin-top:.4rem; }
.room-title { font-size:var(--t-h2); }
.room-blurb { font-size:var(--t-lead); line-height:1.45; max-width:36ch; }
.room-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,3.5vw,3.5rem); align-items:start; }
.room-split--wide { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
.room-split--flip { grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); }
.room-split .fig--mat img { aspect-ratio:3/4; object-fit:cover; }

/* lead item on the homepage */
.lead-item { display:block; color:inherit; }
.lead-item:hover { text-decoration:none; }
.lead-item h3 { font-size:var(--t-h1); }
.lead-item:hover h3 { text-decoration:underline; text-underline-offset:.1em; }
.lead-item p { font-size:var(--t-lead); line-height:1.45; margin:.7rem 0 0; max-width:46ch; }

/* second-tier items: a run of rules, never a card grid */
.runlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.runlist li { border-top:1px solid currentColor; }
.runlist li:last-child { border-bottom:1px solid currentColor; }
.runlist a { display:grid; grid-template-columns:2.2rem minmax(0,1fr); gap:.2rem 1rem; padding:.85rem 0; color:inherit; }
.runlist a:hover { text-decoration:none; }
.runlist .n { font-family:var(--disp); font-weight:700; font-size:1.5rem; line-height:1.1; opacity:.75; }
.runlist h4 { font-family:var(--text); font-weight:700; font-size:1.1rem; line-height:1.3; text-transform:none; letter-spacing:0; }
.runlist a:hover h4 { text-decoration:underline; text-underline-offset:.14em; }
.runlist p { grid-column:2; margin:.3rem 0 0; font-size:var(--t-fine); line-height:1.45; max-width:52ch; opacity:.9; }

/* ---------- figure system — three treatments ------------------------------ */
/* 1. bleed: full-width plate, caption plate stepped over the lower edge */
.fig { margin:0; }
.fig--bleed { position:relative; }
.fig--bleed img { width:100%; height:clamp(280px,46vw,660px); object-fit:cover; }
.fig--bleed figcaption { position:relative; margin:-2.6rem auto 0; background:var(--paper); color:var(--ink); padding:1.1rem 1.4rem 1rem; max-width:min(46rem, calc(100% - 2 * var(--gut))); box-shadow:0 -2px 0 var(--flame) inset; }
/* 2. mat: photograph sitting on a mat with an inset hairline */
.fig--mat { background:var(--ink); padding:clamp(.7rem,1.4vw,1.15rem); }
.fig--mat img { outline:1px solid rgba(245,239,226,.4); outline-offset:-1px; width:100%; }
.fig--mat figcaption { color:var(--paper); padding:.85rem .25rem .15rem; }
.fig--mat .cap-txt { color:var(--paper); }
.fig--mat .cap-credit { color:#9FB0BE; }
/* 3. inset: sits in the column, prose runs beside it */
.fig--inset { float:right; width:min(46%,340px); margin:.4rem 0 1.6rem 2rem; border:1px solid var(--rule); padding:.6rem .6rem .25rem; background:var(--paper-2); }
.fig--inset figcaption { padding:.75rem .4rem .55rem; }
.fig--inset img { width:100%; }
/* caption typography — kicker, sentence, then a quieter credit */
figcaption { font-family:var(--text); font-size:var(--t-small); line-height:1.45; }
.cap-k { display:block; font-size:var(--t-fine); font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--flame); margin-bottom:.3rem; }
.fig--mat .cap-k { color:var(--cadmium); }
.cap-txt { display:block; max-width:54ch; }
.cap-credit { display:block; margin-top:.4rem; font-size:.8125rem; color:var(--quiet); letter-spacing:.01em; }
.article-figure { margin:2.2rem 0; clear:both; }
.article-figure img { width:100%; }
.article-figure figcaption { padding-top:.7rem; border-top:2px solid var(--ink); margin-top:.6rem; }
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; }
.gallery figure { margin:0; }
.gallery img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.gallery figcaption { padding-top:.5rem; font-size:var(--t-fine); }

/* ---------- article page -------------------------------------------------- */
.art-head { padding:clamp(1.8rem,3.4vw,3.4rem) 0 clamp(1rem,2vw,2rem); max-width:calc(74ch + 2 * var(--gut)); }
.art-kicker { display:flex; align-items:center; gap:.5rem; color:var(--flame); margin-bottom:1rem; }
.art-kicker a { color:var(--flame); }
.art-title { font-size:var(--t-h1); max-width:30ch; }
.lead { font-size:var(--t-lead); line-height:1.42; max-width:54ch; margin:1.2rem 0 0; font-weight:400; }
.art-body { font-size:var(--t-body); line-height:1.62; max-width:74ch; margin-inline:auto; }
.art-body h2 { font-size:var(--t-h3); margin:2.4rem 0 .9rem; }
.art-body h2::before { content:''; display:block; width:3.2rem; height:3px; background:var(--flame); margin-bottom:.7rem; }
.art-body::after { content:''; display:table; clear:both; }
.art-body a { text-decoration:underline; text-underline-offset:.16em; text-decoration-thickness:1px; }
.art-foot { padding:clamp(1.6rem,3vw,3rem) 0 clamp(2rem,4vw,4rem); max-width:calc(84ch + 2 * var(--gut)); }

/* the strip under the standfirst — data, not decoration */
.strip { background:var(--ink); color:var(--paper); padding:clamp(1.1rem,2.2vw,1.8rem) 0; }
.strip > .wrap, .interrupt > .wrap { max-width:calc(88ch + 2 * var(--gut)); }
.strip .kicker { color:var(--cadmium); margin-bottom:.9rem; display:block; }

/* full-bleed interruption panel carrying the glossary / notes material */
.interrupt { padding:clamp(1.8rem,3.4vw,3rem) 0; margin:2.6rem 0; }
.interrupt--teal { background:var(--teal); color:var(--paper); }
.interrupt--flame { background:var(--flame); color:var(--paper); }
.interrupt--cad { background:var(--cadmium); color:#231A08; }
.interrupt h3 { font-size:var(--t-h3); margin-bottom:1.2rem; }
.interrupt h3::after { content:''; display:block; width:4rem; height:3px; background:currentColor; margin-top:.7rem; opacity:.65; }
.interrupt .deflist { gap:1.5rem 2.8rem; counter-reset:dfl; }
.interrupt .deflist > div { counter-increment:dfl; display:grid; grid-template-columns:2.7rem minmax(0,1fr); column-gap:1rem; border-top-width:2px; padding-top:.9rem; }
.interrupt .deflist > div::before { content:counter(dfl,decimal-leading-zero); grid-row:1 / span 2; font-family:var(--disp); font-weight:800; font-size:2.1rem; line-height:.85; }
.interrupt--teal .deflist > div::before { color:var(--cadmium); }
.interrupt--flame .deflist > div::before { color:var(--ink); }
.interrupt--cad .deflist > div::before { color:var(--teal); }
.interrupt .deflist dt { font-size:1.55rem; }
.interrupt .deflist dt.dt--long { font-size:1.0625rem; }
.interrupt .deflist dd { font-size:1.0625rem; line-height:1.5; margin-top:.4rem; }
.deflist { margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:1.1rem 2.4rem; }
.deflist > div { border-top:1px solid currentColor; padding-top:.7rem; }
.deflist dt { font-family:var(--disp); font-weight:700; font-size:1.3rem; line-height:1.05; text-transform:uppercase; }
.deflist dd { margin:.3rem 0 0; font-size:var(--t-small); line-height:1.5; }
.deflist dt.dt--long { font-family:var(--text); font-weight:700; font-size:var(--t-small); line-height:1.45; text-transform:none; letter-spacing:0; }

/* ---------- text components ---------------------------------------------- */
.pullquote { margin:2rem 0; padding:0; border-top:3px solid var(--flame); border-bottom:3px solid var(--flame); clear:both; }
.pullquote p { font-family:var(--disp); font-weight:700; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.02; text-transform:uppercase; margin:1.1rem 0; }
.blockquote { margin:2rem 0; padding-left:1.3rem; border-left:4px solid var(--teal); }
.blockquote p { font-size:1.2rem; line-height:1.5; margin:0 0 .5rem; }
.blockquote cite { font-style:normal; font-size:var(--t-fine); color:var(--quiet); }
.callout { margin:2rem 0; background:var(--teal); color:var(--paper); padding:1.3rem 1.4rem; clear:both; }
.callout p { margin:0; font-size:1.0625rem; line-height:1.55; }
.callout p + p { margin-top:.8rem; }
.note { font-size:var(--t-small); line-height:1.55; color:var(--ink-2); border-left:3px solid var(--cadmium); padding:.15rem 0 .15rem .9rem; }

/* ---------- data components ---------------------------------------------- */
.datatable, .versus { width:100%; border-collapse:collapse; font-size:var(--t-small); margin:1.6rem 0; }
.datatable caption, .versus caption { text-align:left; font-size:var(--t-fine); letter-spacing:.12em; text-transform:uppercase; color:var(--quiet); padding-bottom:.6rem; }
.datatable th, .versus th { text-align:left; font-family:var(--disp); font-weight:700; font-size:1.15rem; text-transform:uppercase; letter-spacing:.01em; }
.datatable th, .datatable td, .versus th, .versus td { padding:.6rem .7rem; border-bottom:1px solid var(--rule); vertical-align:top; }
.datatable tr:first-child th, .versus tr:first-child th { border-bottom:2px solid var(--ink); }
.datatable tbody th { font-family:var(--text); font-size:var(--t-small); font-weight:700; text-transform:none; }
.versus td + td { border-left:1px solid var(--rule); }
.statrow { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:1.2rem 2rem; margin:1.6rem 0; }
.statblock { display:flex; flex-direction:column; gap:.25rem; border-top:2px solid currentColor; padding-top:.6rem; }
.stat-num { font-family:var(--disp); font-weight:800; font-size:clamp(2.2rem,4vw,3.4rem); line-height:.86; }
.strip .stat-num { color:var(--cadmium); }
.stat-label { font-size:var(--t-fine); line-height:1.45; max-width:30ch; }
.timeline { list-style:none; margin:1.6rem 0; padding:0; }
.timeline li { display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:.2rem 1.4rem; padding:.7rem 0; border-top:1px solid var(--rule); }
.timeline li:last-child { border-bottom:1px solid var(--rule); }
.t-when { font-family:var(--disp); font-weight:700; font-size:1.2rem; line-height:1.15; text-transform:uppercase; color:var(--flame); }
.t-what { font-size:var(--t-small); line-height:1.5; }
.chart { margin:1.8rem 0; }
.chart svg { width:100%; height:auto; }
.chart figcaption { padding-top:.7rem; font-size:var(--t-fine); border-top:1px solid var(--rule); margin-top:.6rem; }

/* ---------- cards / references ------------------------------------------- */
.profile-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1.2rem; margin:1.8rem 0; }
.profile-card { display:flex; flex-direction:column; background:var(--paper-2); border-top:3px solid var(--teal); padding:1rem 1.1rem 1.1rem; }
.profile-card .p-photo { width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:.8rem; }
.profile-card h3 { font-size:1.5rem; }
.profile-card .p-role { font-size:var(--t-fine); letter-spacing:.1em; text-transform:uppercase; color:var(--flame); margin:.35rem 0 .6rem; }
.profile-card p { font-size:var(--t-small); line-height:1.5; }
.profile-card .p-links { margin-top:auto; padding-top:.6rem; font-size:var(--t-fine); }
.profile-card .p-attr { font-size:.8125rem; color:var(--quiet); margin:0; }
.profile-card.no-photo { border-top-color:var(--cadmium); }
.org-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:.9rem; margin:1.6rem 0; }
.org-card { display:grid; grid-template-columns:3rem minmax(0,1fr); gap:.1rem .8rem; align-items:center; border:1px solid var(--rule); padding:.7rem .8rem; color:var(--ink); }
.org-card:hover { border-color:var(--flame); text-decoration:none; }
.org-logo { grid-row:span 2; width:3rem; height:3rem; object-fit:contain; }
.org-name { font-family:var(--disp); font-weight:700; font-size:1.25rem; line-height:1.05; text-transform:uppercase; }
.org-host { font-size:var(--t-fine); color:var(--quiet); }
.org-card.no-logo { grid-template-columns:minmax(0,1fr); }
.entity-ref { white-space:nowrap; }
.further-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1rem; margin:1.4rem 0; }
.further-grid a { display:flex; flex-direction:column; gap:.4rem; min-height:100%; border-top:2px solid var(--ink); padding-top:.7rem; font-family:var(--disp); font-weight:700; font-size:1.4rem; line-height:1.05; text-transform:uppercase; color:var(--ink); }
.further-grid a:hover { color:var(--flame); text-decoration:none; }
.related-links, .cat-list { list-style:none; margin:0; padding:0; }
/* read-next block at the foot of a piece */
.readnext-head { display:flex; align-items:center; gap:1rem; border-top:2px solid var(--ink); padding-top:.7rem; margin-bottom:1.1rem; }
.readnext-head .kicker { color:var(--flame); }
.readnext-head::after { content:''; flex:1; height:1px; background:var(--rule); }
.readnext-lead { display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:1.4rem; align-items:center; background:var(--paper-2); border-top:3px solid var(--flame); padding:1rem; color:var(--ink); }
.readnext-lead:hover { text-decoration:none; background:var(--ink); color:var(--paper); }
.readnext-lead:hover .rn-brief { color:#C9D2DC; }
.readnext-lead img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.rn-body { display:flex; flex-direction:column; gap:.5rem; }
.rn-sec { display:flex; align-items:center; gap:.5rem; color:var(--flame); }
.readnext-lead:hover .rn-sec { color:var(--cadmium); }
.rn-title { font-family:var(--disp); font-weight:800; font-size:clamp(1.7rem,2.6vw,2.4rem); line-height:.95; text-transform:uppercase; }
.rn-brief { font-size:var(--t-small); line-height:1.5; color:var(--ink-2); max-width:52ch; }
.art-foot .related-links { margin-top:1.4rem; }
.art-foot .related-links a { display:grid; grid-template-columns:1.6rem minmax(0,1fr); gap:.15rem .8rem; align-items:baseline; }
.art-foot .related-links .icon { width:1.5rem; height:1.5rem; color:var(--flame); }
.art-foot .related-links .rl-t { font-family:var(--disp); font-weight:700; font-size:1.35rem; line-height:1.05; text-transform:uppercase; }
.art-foot .related-links a > span:last-child { grid-column:2; }
.art-foot .further-grid { margin-top:1.8rem; }
.art-foot .further-grid a { flex-direction:row; align-items:center; gap:.6rem; font-size:1.15rem; }
.art-foot .further-grid .icon { width:1.5rem; height:1.5rem; color:var(--flame); }
.related-links li { border-top:1px solid var(--rule); }
.related-links li:last-child { border-bottom:1px solid var(--rule); }
.related-links a { display:block; padding:.75rem 0; font-family:var(--disp); font-weight:700; font-size:1.35rem; line-height:1.05; text-transform:uppercase; color:var(--ink); }
.related-links a:hover { color:var(--flame); text-decoration:none; }
.related-links span { display:block; font-family:var(--text); font-weight:400; font-size:var(--t-fine); text-transform:none; line-height:1.45; color:var(--ink-2); margin-top:.25rem; max-width:52ch; }
.cat-list li { border-top:1px solid var(--rule); }
.cat-list li:last-child { border-bottom:1px solid var(--rule); }
.cat-list a { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:.3rem 2rem; padding:1rem 0; color:var(--ink); }
.cat-list a:hover { text-decoration:none; }
.cat-list h3 { font-size:var(--t-h4); }
.cat-list a:hover h3 { color:var(--flame); }
.cat-list p { margin:0; font-size:var(--t-small); line-height:1.5; color:var(--ink-2); }

/* ---------- map ----------------------------------------------------------- */
.map-figure { margin:0; }
.map-slot { position:relative; }
.map-slot svg { width:100%; height:auto; display:block; }
.map-band { display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:start; }
@media (max-width:900px) { .map-band { grid-template-columns:minmax(0,1fr); } .map-band .map-figure { max-width:420px; } }
.map-pin-label { font-family:var(--disp); font-weight:700; font-size:26px; text-transform:uppercase; fill:var(--paper); }
.map-pin:hover .map-pin-label { fill:var(--cadmium); }
.map-pin:hover circle { fill:var(--cadmium); }
.map-figure figcaption { padding-top:.8rem; font-size:var(--t-fine); }
.pinlist { list-style:none; margin:1.4rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:.1rem 1.6rem; }
.pinlist li { border-top:1px solid rgba(245,239,226,.35); }
.pinlist a { display:grid; grid-template-columns:2.2rem minmax(0,1fr); gap:.15rem .7rem; padding:.6rem 0; color:var(--paper); }
.pinlist a:hover { text-decoration:none; color:var(--cadmium); }
.pinlist .n { font-family:var(--disp); font-weight:800; font-size:1.4rem; line-height:1; color:var(--cadmium); }
.pinlist strong { font-family:var(--disp); font-weight:700; font-size:1.35rem; line-height:1.05; text-transform:uppercase; }
.pinlist span { grid-column:2; font-size:var(--t-fine); line-height:1.4; color:#B9C6D1; }
.pinlist .n { grid-column:1; }

/* ---------- supporters colophon ------------------------------------------ */
.colophon { background:var(--paper); color:var(--ink); border-top:2px solid var(--ink); padding:clamp(1.8rem,3vw,2.6rem) 0 clamp(2rem,3.4vw,3rem); }
.colophon-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.4rem; margin-bottom:1.4rem; }
.colophon-head h2 { font-size:var(--t-h3); }
.colophon-head p { margin:0; font-size:var(--t-small); color:var(--ink-2); max-width:52ch; }
.sponsor-group { margin-bottom:1.6rem; }
.sponsor-group > .kicker { display:block; color:var(--quiet); border-top:1px solid var(--rule); padding-top:.7rem; margin-bottom:.9rem; }
.sponsor-run { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.sponsor {
  display:grid; grid-template-columns:212px minmax(210px,1fr); gap:1rem;
  align-items:center; background:var(--ink); color:var(--paper);
  padding:.85rem .95rem; text-decoration:none;
}
.sponsor:hover { text-decoration:none; background:var(--teal-dark); }
.sponsor img { grid-row:span 2; width:100%; height:52px; max-height:52px; object-fit:contain; object-position:left center; background:rgba(245,239,226,.06); padding:.3rem .4rem; }
.sponsor-name { font-family:var(--disp); font-weight:700; font-size:1.3rem; line-height:1.05; text-transform:uppercase; align-self:end; }
.sponsor-blurb { font-size:var(--t-fine); line-height:1.4; color:#B9C6D1; align-self:start; }
.sponsor .sponsor-name:only-of-type { align-self:center; }

/* ---------- footer -------------------------------------------------------- */
.foot { background:var(--ink); color:var(--paper); padding:clamp(1.8rem,3vw,2.6rem) 0 clamp(2rem,3vw,2.4rem); }
.foot a { color:var(--cadmium); }
.foot-in { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:1.6rem 2.4rem; align-items:start; }
.foot h2 { font-size:1.9rem; margin-bottom:.5rem; }
.foot p { font-size:var(--t-small); margin:0 0 .5rem; }
.foot .fine { font-size:var(--t-fine); color:#8B95A1; }
.foot-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; font-family:var(--disp); font-weight:700; font-size:1.4rem; line-height:1.05; text-transform:uppercase; }
.foot-links a { display:flex; align-items:center; gap:.7rem; color:var(--cadmium); }
.foot-links .icon { width:1.7rem; height:1.7rem; flex:none; color:var(--cadmium); }

/* components sitting on a coloured interruption inherit its ink */
.interrupt .datatable th, .interrupt .datatable td,
.interrupt .timeline li { border-color:currentColor; }
.interrupt .datatable caption, .interrupt .stat-label { color:inherit; }
.interrupt .datatable tr:first-child th { border-bottom-width:2px; }
.interrupt--teal .t-when, .interrupt--teal .stat-num { color:var(--cadmium); }
.interrupt--flame .t-when, .interrupt--flame .stat-num { color:var(--ink); }
.interrupt--cad .t-when, .interrupt--cad .stat-num { color:var(--teal); }

/* an ecological / procedural chain — steps with arrows between them */
.flow { list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:stretch; gap:.6rem; counter-reset:flow; }
.flow li { flex:1 1 190px; display:flex; flex-direction:column; gap:.35rem; border-top:2px solid currentColor; padding-top:.6rem; font-size:var(--t-small); line-height:1.45; }
.flow li::before { counter-increment:flow; content:'0' counter(flow); font-family:var(--disp); font-weight:800; font-size:1.6rem; line-height:1; }
.flow li:not(:last-child)::after { content:'↓'; align-self:flex-start; font-size:1.1rem; opacity:.7; }
@media (min-width:760px) { .flow li:not(:last-child)::after { content:'→'; } }

/* ---------- narrow screens ----------------------------------------------- */
/* below this a two-column tile cannot give the copy its 210px, so it stacks */
@media (max-width:1180px) {
  .sponsor { grid-template-columns:minmax(0,1fr); }
  .sponsor img { grid-row:auto; }
  .sponsor-name, .sponsor-blurb { align-self:auto; }
}
@media (max-width:900px) {
  .sponsor-run { grid-template-columns:minmax(0,1fr); }
  .room-split, .room-split--wide, .room-split--flip { grid-template-columns:minmax(0,1fr); }
  .cat-list a { grid-template-columns:minmax(0,1fr); }
  .fig--inset { float:none; width:auto; margin:1.4rem 0; }
  .room-split .fig--mat img { aspect-ratio:4/3; }
  .readnext-lead { grid-template-columns:minmax(0,1fr); }
  .timeline li { grid-template-columns:minmax(0,1fr); }
  .fig--bleed figcaption { margin-inline:0; max-width:none; }
}
@media (max-width:620px) {
  :root { --t-body:1.0625rem; }
  /* touch targets */
  .mast-nav a { min-height:44px; }
  .foot-links a { min-height:44px; }
  .kicker { letter-spacing:.1em; }
  /* tables stop being tables and become stacked pairs */
  .datatable, .versus, .datatable tbody, .versus tbody, .datatable tr, .versus tr,
  .datatable th, .datatable td, .versus th, .versus td { display:block; width:auto; }
  .datatable tr, .versus tr { border-bottom:1px solid currentColor; padding:.55rem 0; }
  .datatable th, .datatable td, .versus th, .versus td { border:0; padding:.1rem 0; }
  .datatable tr:first-child th, .versus tr:first-child th { border-bottom:0; }
  .versus td + td { border-left:0; padding-top:.5rem; }
  .interrupt .deflist > div { grid-template-columns:2.1rem minmax(0,1fr); column-gap:.7rem; }
  .interrupt .deflist > div::before { font-size:1.7rem; }
  .interrupt .deflist dt { font-size:1.35rem; }
  .fig--bleed img { height:clamp(220px,58vw,380px); }
  .art-foot .related-links a { grid-template-columns:1.4rem minmax(0,1fr); gap:.15rem .6rem; }
  /* standalone call-to-action links need a real touch target */
  p > a.kicker, .further-grid a { display:inline-flex; align-items:center; min-height:44px; }
  .further-grid a { min-height:44px; }
  .mast-in { align-items:flex-start; }
  .mast-nav { gap:.4rem; }
  .mast-nav a { font-size:1.15rem; padding:.6rem .75rem .5rem; }
  .sponsor { grid-template-columns:minmax(0,1fr); }
  .sponsor img { grid-row:auto; }
  .fig--bleed figcaption { margin-top:-1.2rem; }
}
@media print {
  .mast-nav, .colophon { display:none; }
  body { background:#fff; }
}

/* 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-pad: the mark keeps the height Design declared AND the inset Design drew.
   border-box stops width:100%+padding overflowing the tile; the box grows by the
   vertical padding and border so the artwork is not shrunk to pay for the inset. */
.sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!important;padding:8px 12px!important;height:68px!important;max-height:68px!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}

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#0B4F63;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:14.9}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#0B4F63;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:14.9}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* 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-run .sponsor.sponsor img{background:#121013!important;box-sizing:border-box!important;padding:11px 18px!important}

/* op-no-mark-ground: operator: extra background. Mark plate #121013 against its own tile. */
/* ⚠️ the plate is set by `.sponsor-run .sponsor.sponsor img` — three classes — so the generic
   one-class selector lost. Matched. */
.sponsor-run .sponsor.sponsor img{background:transparent!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.art-head{padding-inline:var(--gut)}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2229px at 390, 26% of the whole page. Two columns bring it to
   1320px (41% shorter). Checked before writing: no new overflow, smallest mark still
   138px wide, longest blurb 3 lines, tile heights 212-212px.
   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. Only the tier(s) that were one-per-row are touched (.sponsor-run), 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-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sponsor-run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-run > * *{min-width:0!important;max-width:100%}
    .sponsor-run img,.sponsor-run svg{max-width:100%;height:auto}
  .sponsor-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

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

/* op-article-width: the article column was capped at 819px (97 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 74ch (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. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  main#main div.art-body{max-width:min(861px, 100%)!important}
}
@media (min-width:1600px){
  main#main div.art-body{max-width:min(clamp(861px, 59.792vw, 1033px), 100%)!important}
  main#main div.art-body > :is(p:not([class])){font-size:clamp(18px,1.2500vw,21.6px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--disp); font-weight: 800; line-height: 0.9; margin: 0px; text-transform: uppercase; letter-spacing: 0.002em;}
h3:where(.rt-h4){font-family: var(--disp); font-weight: 800; line-height: 0.9; margin: 0px; text-transform: uppercase; letter-spacing: 0.002em;}
h2:where(.rt-h3){font-weight: 700;}
h3:where(.rt-h4){font-weight: 700;}
.runlist h3:where(.rt-h4){font-family: var(--text); font-weight: 700; font-size: 1.1rem; line-height: 1.3; text-transform: none; letter-spacing: 0px;}
.runlist a:hover h3:where(.rt-h4){text-decoration: underline; text-underline-offset: 0.14em;}
.cat-list h2:where(.rt-h3){font-size: var(--t-h4);}
.cat-list a:hover h2:where(.rt-h3){color: var(--flame);}
h1:where(.rt-h2){font-family: var(--disp); font-weight: 800; line-height: 0.9; margin: 0px; text-transform: uppercase; letter-spacing: 0.002em;}
h2.rt-h4.rt-h4{font-family:Chivo, system-ui, -apple-system, sans-serif;font-weight:700;line-height:22.88px;letter-spacing:normal;text-transform:none;font-size:17.6px}
/* 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:681px) and (max-width:1099px){
  div.readnext-head{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
  nav.further-grid{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
}
/* op-tablet-gutter:end */
@media (min-width:700px) and (max-width:919px){.sponsor-run:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)!important}.sponsor-run:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}