/* op-heading-levels-ua */
:where(h2.rt-h3){display:block;font-size:1.17em;margin-block-start:1em;margin-block-end:1em;font-weight:bold}
/* op-heading-levels-ua:end */
/* ============================================================
   Nueva Alejandría — an education portal about Latin America
   Atlas direction · teal / ochre / terracotta on cream
   ============================================================ */


:root{
  --ink:#1C4A54;        /* teal */
  --ink-deep:#12333A;
  --ink-ink:#14262B;    /* near-black text */
  --gold:#C98A3C;       /* ochre */
  --gold-soft:#E7C79A;
  --terra:#B4552E;      /* terracotta */
  --paper:#F3ECDD;      /* cream base (matches map bg) */
  --paper-2:#EFE7D6;
  --card:#FBF7EC;
  --line:#DCCFB2;
  --line-soft:#E7DDC7;
  --muted:#6E6552;
  --muted-2:#8A8069;
  --ink-muted:#5B6A6A;
  /* section accents (from content plan) */
  --sys:#1C4A54; --higher:#2E7A6A; --policy:#C98A3C; --scholar:#B4552E; --data:#6E5A8A;
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --slab:'Bitter',Georgia,serif;
  --ui:'Archivo',system-ui,-apple-system,sans-serif;
  --wrap:1240px;
  --measure:70ch;
  --gut:clamp(20px,5vw,64px);
  --radius:8px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink-ink);
  font-family:var(--serif);font-size:19px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--terra);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--slab);line-height:1.12;color:var(--ink-deep);font-weight:600;margin:0 0 .5em}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.kicker{font-family:var(--ui);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terra)}
.eyebrow{font-family:var(--ui);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.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}

/* ---------- skip + focus ---------- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ============================================================
   Masthead / nav
   ============================================================ */
.topbar{background:var(--ink-deep);color:var(--paper)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:9px;padding-bottom:9px;font-family:var(--ui);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.topbar span{opacity:.85}
.topbar .coords{color:var(--gold-soft);opacity:1}

.masthead{background:var(--paper);border-bottom:3px double var(--ink)}
.masthead .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:16px;flex-wrap:wrap}
.brand{display:block;text-decoration:none;color:var(--ink)}
.brand .brand-kick{font-family:var(--ui);font-weight:700;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--terra);display:block;margin-bottom:4px}
.brand .brand-name{font-family:var(--slab);font-weight:700;font-size:clamp(2rem,4.5vw,3rem);line-height:.95;letter-spacing:-.01em;color:var(--ink)}
.brand .brand-sub{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1rem;margin-top:6px}
.masthead-meta{text-align:right;font-family:var(--ui);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);line-height:1.7}
.masthead-meta b{color:var(--ink);font-weight:600}

.mainnav{background:var(--ink);position:sticky;top:0;z-index:40}
.mainnav .wrap{display:flex;align-items:stretch;gap:0;padding-inline:0;flex-wrap:wrap}
.mainnav a{flex:1 1 auto;min-width:max-content;color:var(--paper);font-family:var(--ui);font-weight:600;font-size:.82rem;
  letter-spacing:.05em;text-transform:uppercase;padding:14px clamp(12px,2vw,22px);display:flex;align-items:center;gap:9px;
  border-right:1px solid rgba(243,236,221,.13);transition:background .15s,color .15s}
.mainnav a .n{font-family:var(--ui);font-weight:500;font-size:.7rem;color:var(--gold-soft)}
.mainnav a:hover,.mainnav a[aria-current]{background:var(--gold);color:var(--ink-deep)}
.mainnav a:hover .n,.mainnav a[aria-current] .n{color:var(--ink-deep)}
.navtoggle{display:none}

/* ============================================================
   Buttons / links
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-weight:600;font-size:.86rem;
  letter-spacing:.03em;padding:12px 20px;border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;transition:.15s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--ink-deep);color:#fff}
.btn svg{width:16px;height:16px}
.textlink{font-family:var(--ui);font-weight:600;font-size:.88rem;color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:2px}
.textlink:hover{color:var(--terra);border-color:var(--terra)}
.icon{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.7;vertical-align:-.12em}

/* ============================================================
   Section framing
   ============================================================ */
.band{padding-block:clamp(38px,6vw,72px)}
.band-head{display:flex;align-items:baseline;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.band-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:0}
.band-head .rule{flex:1;height:1px;background:var(--line);min-width:40px}
.plate-no{font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap}

/* ============================================================
   Hero
   ============================================================ */
.hero{padding-top:clamp(30px,4vw,52px);padding-bottom:clamp(30px,4vw,52px)}
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.hero-figure{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--paper-2);aspect-ratio:16/10}
.hero-figure img{width:100%;height:100%;object-fit:cover}
.hero-figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 18px 12px;font-family:var(--ui);font-size:.82rem;color:#fff;
  background:linear-gradient(to top,rgba(18,51,58,.82),rgba(18,51,58,0))}
.hero-copy .kicker{margin-bottom:14px;display:block}
.hero-copy h1{font-size:clamp(2.1rem,4.6vw,3.5rem);letter-spacing:-.015em;margin-bottom:16px}
.hero-copy .dek{font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.5;color:#33474a;margin-bottom:22px;max-width:38ch}
.hero-meta{font-family:var(--ui);font-size:.85rem;color:var(--muted);margin-bottom:22px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}

/* ============================================================
   Atlas map (signature)
   ============================================================ */
.atlas{background:var(--ink-deep);color:var(--paper)}
.atlas .band-head h2{color:var(--paper)}
.atlas .band-head .plate-no{color:var(--gold-soft)}
.atlas-intro{max-width:60ch;color:#d7e0dd;font-family:var(--serif);font-size:1.1rem;margin-bottom:26px}
.atlas-layout{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(20px,3vw,40px);align-items:start}
.atlas-mapwrap{position:relative;background:var(--paper);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(243,236,221,.2);aspect-ratio:760/900}
.atlas-mapwrap>img{width:100%;height:100%;object-fit:contain;display:block}
.atlas-markers{position:absolute;inset:0;width:100%;height:100%}
.atlas-markers .mk{cursor:pointer}
.atlas-markers .mk circle{fill:var(--gold);stroke:#fff;stroke-width:2.5;transition:.15s;transform-box:fill-box;transform-origin:center}
.atlas-markers .mk:hover circle,.atlas-markers .mk.on circle{fill:var(--terra);r:11}
.atlas-markers .mk .lbl{font-family:var(--ui);font-weight:700;font-size:15px;fill:var(--ink-deep);paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round;pointer-events:none;opacity:0;transition:.15s}
.atlas-markers .mk:hover .lbl,.atlas-markers .mk.on .lbl{opacity:1}
.atlas-side{align-self:stretch}
.atlas-legend{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--ui);font-size:.82rem;color:#cdd6d3;margin-top:16px}
.atlas-legend .sw{display:inline-flex;align-items:center;gap:7px}
.atlas-legend .dot{width:13px;height:13px;border-radius:50%;border:2px solid #fff}

/* live country readout card */
.country-readout{background:var(--card);color:var(--ink-ink);border-radius:var(--radius);padding:22px 22px 24px;border:1px solid var(--line);min-height:100%}
.country-readout .ro-country{font-family:var(--slab);font-weight:700;font-size:1.7rem;color:var(--ink);margin:0 0 2px}
.country-readout .ro-system{font-family:var(--ui);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--terra);margin-bottom:16px}
.country-readout .ro-stat{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line-soft);padding:10px 0;font-family:var(--ui);font-size:.95rem}
.country-readout .ro-stat b{font-family:var(--slab);color:var(--ink);font-size:1.15rem}
.country-readout .ro-note{font-family:var(--serif);font-size:1.02rem;line-height:1.5;color:var(--muted);margin:14px 0 0}
.country-readout .ro-hint{font-family:var(--ui);font-size:.78rem;color:var(--muted-2);margin-top:16px;display:flex;gap:8px;align-items:center}
.ro-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
.ro-chip{font-family:var(--ui);font-weight:600;font-size:.84rem;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);cursor:pointer;transition:.14s}
.ro-chip:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ro-chip.on{background:var(--gold);border-color:var(--gold);color:var(--ink-deep)}

/* ============================================================
   Country-at-a-glance reference cards
   ============================================================ */
.country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.country-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;scroll-margin-top:90px;transition:.15s}
.country-card:target,.country-card.flash{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,138,60,.28)}
.country-card .cc-head{padding:14px 16px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.country-card .cc-name{font-family:var(--slab);font-weight:700;font-size:1.25rem;color:var(--ink)}
.country-card .cc-lit{font-family:var(--ui);font-weight:700;font-size:.8rem;color:var(--terra)}
.country-card .cc-body{padding:14px 16px;flex:1;display:flex;flex-direction:column;gap:8px}
.country-card .cc-label{font-family:var(--ui);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.country-card .cc-system{font-family:var(--ui);font-size:.92rem;color:var(--ink-ink)}
.country-card .cc-note{font-family:var(--serif);font-size:1rem;line-height:1.45;color:var(--muted)}

/* ============================================================
   Data chart (inline SVG)
   ============================================================ */
.chart{margin:0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .bar-track{fill:var(--line-soft)}
.chart figcaption,.chart .chart-note{font-family:var(--ui);font-size:.86rem;color:var(--muted);margin-top:12px;line-height:1.5}
.chart .bar-label{font-family:var(--ui);font-size:14px;fill:var(--ink-ink)}
.chart .bar-val{font-family:var(--slab);font-weight:600;font-size:14px;fill:var(--muted)}
.chart-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,3vw,32px)}

/* ============================================================
   Feature / article cards (EVEN-HEIGHT)
   ============================================================ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.acard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%;transition:.16s}
.acard:hover{transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(18,51,58,.6)}
.acard .acard-fig{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.acard .acard-fig img{width:100%;height:100%;object-fit:cover;transition:.4s}
.acard:hover .acard-fig img{transform:scale(1.04)}
.acard .acard-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1;gap:10px}
.tag{display:inline-block;font-family:var(--ui);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terra)}
.tag.sys{color:var(--sys)}.tag.higher{color:var(--higher)}.tag.policy{color:var(--policy)}.tag.scholar{color:var(--scholar)}.tag.data{color:var(--data)}
.acard h3{font-size:1.22rem;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.acard .acard-dek{font-family:var(--serif);font-size:1rem;line-height:1.45;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acard .acard-meta{margin-top:auto;font-family:var(--ui);font-size:.8rem;color:var(--muted-2);display:flex;gap:8px;align-items:center}
.acard .acard-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--gold)}

/* lead feature (first card, larger) */
.feature-lead{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:22px}
.feature-lead .fl-fig{aspect-ratio:auto;min-height:280px;overflow:hidden;background:var(--paper-2)}
.feature-lead .fl-fig img{width:100%;height:100%;object-fit:cover}
.feature-lead .fl-body{padding:clamp(22px,3vw,38px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.feature-lead h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0}
.feature-lead .acard-dek{font-size:1.1rem;-webkit-line-clamp:4}

/* CSS-only "more" expander */
.more-toggle{display:none}
.more-hidden{display:none}
.more-toggle:checked ~ .more-hidden{display:grid}
.more-btn{display:inline-flex;margin-top:26px;cursor:pointer}
.more-toggle:checked ~ .more-btn{display:none}

/* ============================================================
   Woven sponsor slots ("Casa & Compañía")
   ============================================================ */
.patron{margin-block:clamp(30px,4vw,46px)}
.patron-card{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;background:var(--paper-2);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--radius);padding:20px 24px}
.patron-kick{font-family:var(--ui);font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);margin-bottom:6px}
.patron-title{font-family:var(--slab);font-weight:600;font-size:1.15rem;color:var(--ink);margin:0 0 4px}
.patron-say{font-family:var(--serif);font-style:italic;color:var(--muted);margin:0;font-size:1rem}
.sponsor{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.sponsor img{width:100%;max-width:190px;height:64px;object-fit:contain;background:var(--ink-deep);border-radius:6px;padding:12px 16px}
.sponsor .sponsor-blurb{font-family:var(--ui);font-size:.78rem;color:var(--muted);text-align:center;line-height:1.4}
.sponsor .sponsor-blurb:empty{display:none}
.patron-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.patron-strip .sponsor img{height:54px}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--ink-deep);color:var(--paper);padding-block:clamp(36px,5vw,58px);margin-top:clamp(40px,6vw,80px)}
.site-footer .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:28px;border-bottom:1px solid rgba(243,236,221,.16)}
.site-footer .brand-name{font-family:var(--slab);font-weight:700;font-size:1.6rem;color:var(--paper)}
.site-footer .foot-tag{font-family:var(--serif);font-style:italic;color:#c6d0cd;margin-top:8px;max-width:40ch}
.site-footer h4{font-family:var(--ui);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 12px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-footer a{color:#d7e0dd;font-family:var(--ui);font-size:.92rem}
.site-footer a:hover{color:#fff}
.site-footer .foot-bottom{padding-top:20px;font-family:var(--ui);font-size:.8rem;color:#9fb0ac;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.article-hero{position:relative;background:var(--ink-deep)}
.article-hero-fig{position:relative;aspect-ratio:21/9;max-height:56vh;overflow:hidden}
.article-hero-fig img{width:100%;height:100%;object-fit:cover;opacity:.92}
.article-hero-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,51,58,.55),rgba(18,51,58,.08))}
.article-head{background:var(--paper)}
.article-head .wrap{max-width:960px;padding-top:clamp(28px,4vw,44px);padding-bottom:8px}
.article-head .kicker{display:block;margin-bottom:16px}
.article-head h1{font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.015em;margin-bottom:16px}
.article-head .dek{font-family:var(--serif);font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.5;color:#33474a;margin-bottom:20px;max-width:60ch}
.article-head .byline{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-family:var(--ui);font-size:.9rem;color:var(--muted);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.article-head .byline .who{color:var(--ink);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.article-head .byline .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}

.article-body{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gut);padding-block:clamp(30px,4vw,48px);
  font-size:1.2rem;line-height:1.78;color:#25302f}
.article-body>p{margin-bottom:1.25em}
.article-body .lead{font-family:var(--serif);font-size:1.42rem;line-height:1.55;color:var(--ink-deep);font-weight:400}
.article-body .lead::first-letter{font-family:var(--slab);font-weight:700;color:var(--terra);font-size:3.4em;line-height:.72;float:left;margin:.06em .1em 0 0}
.article-body h2{font-size:clamp(1.45rem,2.6vw,2rem);margin:1.6em 0 .5em;padding-top:.2em}
.article-body h2 .secno{font-family:var(--ui);font-weight:700;font-size:.9rem;color:var(--gold);display:inline-block;margin-right:12px;vertical-align:.22em;letter-spacing:.05em}
.article-body h3{font-size:1.3rem;margin:1.4em 0 .4em}
.article-body a{color:var(--terra);border-bottom:1px solid rgba(180,85,46,.35)}
.article-body a:hover{color:var(--ink);border-color:var(--ink)}
.article-body strong{font-weight:600;color:var(--ink-deep)}
.article-body>ul,.article-body>ol{margin:0 0 1.25em;padding-left:1.3em}
.article-body>ul li,.article-body>ol li{margin-bottom:.5em}

/* wide breakout for figures/components inside article */
.breakout{max-width:min(1100px,92vw);margin-inline:auto;margin-block:clamp(28px,4vw,44px);padding-inline:var(--gut)}

/* --- palette components --- */
.lead{font-size:1.4rem}
.pullquote{margin:1.6em 0;border:0;padding:0}
.pullquote p{font-family:var(--slab);font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.32;color:var(--ink);
  border-left:5px solid var(--gold);padding:4px 0 4px 26px;margin:0}
.blockquote{margin:1.6em 0;padding:20px 24px;background:var(--paper-2);border-radius:var(--radius);border-left:4px solid var(--terra)}
.blockquote p{font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.5;color:var(--ink-deep);margin:0 0 .5em}
.blockquote cite{font-family:var(--ui);font-style:normal;font-size:.85rem;color:var(--muted);font-weight:600}
.callout{margin:1.6em 0;background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:22px 26px;position:relative}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold);border-radius:var(--radius) 0 0 var(--radius)}
.callout p{margin:0;font-family:var(--serif);font-size:1.16rem;line-height:1.55}
.callout .callout-kick{font-family:var(--ui);font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);display:block;margin-bottom:8px}
.note{font-family:var(--ui);font-size:1rem;line-height:1.55;color:var(--muted);background:var(--paper-2);border:1px dashed var(--line);border-radius:var(--radius);padding:16px 18px;margin:1.5em 0}
.note::before{content:"Note — ";font-weight:700;color:var(--terra)}

/* by-the-numbers rail */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:1.6em 0}
.statblock{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--radius);padding:18px 18px}
.statblock .stat-num{font-family:var(--slab);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;color:var(--ink);display:block}
.statblock .stat-label{font-family:var(--ui);font-size:.9rem;line-height:1.4;color:var(--muted);display:block;margin-top:8px}
.rail-head{font-family:var(--ui);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);margin:1.6em 0 -.4em}

/* versus */
.versus{width:100%;border-collapse:collapse;margin:1.6em 0;font-family:var(--ui);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.versus th,.versus td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft);font-size:1rem;vertical-align:top}
.versus thead th{background:var(--ink);color:var(--paper);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase}
.versus tbody th{font-weight:600;color:var(--muted);background:var(--paper-2);width:34%}
.versus tr:last-child td,.versus tr:last-child th{border-bottom:0}

/* datatable */
.datatable{width:100%;border-collapse:collapse;margin:1.6em 0;font-family:var(--ui);font-size:.98rem}
.datatable caption{font-family:var(--ui);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terra);text-align:left;margin-bottom:10px}
.datatable thead th{background:var(--ink);color:var(--paper);text-align:left;padding:11px 14px;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;position:sticky}
.datatable th,.datatable td{padding:11px 14px;border-bottom:1px solid var(--line-soft);text-align:left}
.datatable tbody tr:nth-child(even){background:var(--paper-2)}
.datatable td.num,.datatable th.num{text-align:right;font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}

/* timeline */
.timeline{list-style:none;margin:1.6em 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 20px 38px}
.timeline li::before{content:"";position:absolute;left:2px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--gold);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--line)}
.timeline .t-when{display:block;font-family:var(--ui);font-weight:700;font-size:.92rem;color:var(--terra);margin-bottom:3px}
.timeline .t-what{display:block;font-family:var(--serif);font-size:1.08rem;line-height:1.45;color:var(--ink-ink)}

/* article figure / gallery */
.article-figure{margin:1.6em 0}
.article-figure img{width:100%;border-radius:var(--radius);border:1px solid var(--line)}
.article-figure figcaption,.map-figure figcaption{font-family:var(--ui);font-size:.88rem;color:var(--muted);margin-top:10px;line-height:1.5}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:1.6em 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line)}

/* locator map figure */
.map-figure{margin:1.6em 0}
.map-figure .map-slot{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;aspect-ratio:760/900;max-height:520px;margin-inline:auto}
.map-figure .map-slot img{width:100%;height:100%;object-fit:contain}
.map-figure .map-slot .locator{position:absolute;inset:0;width:100%;height:100%}
.map-figure .map-slot .locator circle{fill:var(--terra);stroke:#fff;stroke-width:3}
.map-figure .map-slot .locator .halo{fill:none;stroke:var(--terra);stroke-width:2;opacity:.5}
.map-figure .map-slot .locator text{font-family:var(--ui);font-weight:700;font-size:16px;fill:var(--ink-deep);paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}

/* profile / org cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:1.6em 0}
.profile-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.profile-card .p-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:12px;border:1px solid var(--line)}
.profile-card.no-photo{border-top:4px solid var(--gold)}
.profile-card h3{font-size:1.15rem;margin:0 0 4px}
.profile-card .p-role{font-family:var(--ui);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--terra);margin:0 0 10px}
.profile-card p{font-family:var(--serif);font-size:1rem;line-height:1.5;color:var(--muted);margin:0 0 8px}
.profile-card .p-links a{font-family:var(--ui);font-size:.85rem}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:1.6em 0}
.org-card{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.org-card .org-logo{width:38px;height:38px;object-fit:contain;margin-bottom:6px}
.org-card.no-logo{border-left:4px solid var(--ink)}
.org-card .org-name{font-family:var(--slab);font-weight:600;color:var(--ink);font-size:1.02rem}
.org-card .org-host{font-family:var(--ui);font-size:.82rem;color:var(--muted)}
.entity-ref{font-family:var(--ui);font-weight:600;white-space:nowrap}

/* related / further */
.related{border-top:2px solid var(--ink);margin-top:2.4em;padding-top:1.4em}
.related h2{font-size:1.4rem}
.related-links,.further-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.related-links li a,.further-grid a{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;height:100%}
.related-links a .rl-tag,.further-grid a .rl-tag{font-family:var(--ui);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terra)}
.related-links a .rl-title,.further-grid a .rl-title{font-family:var(--slab);font-weight:600;color:var(--ink);font-size:1.08rem;line-height:1.25}
.related-links a:hover .rl-title{color:var(--terra)}

/* ============================================================
   Section / category / hub pages
   ============================================================ */
.page-head{background:var(--paper);border-bottom:3px double var(--ink)}
.page-head .wrap{padding-top:clamp(30px,4vw,52px);padding-bottom:clamp(24px,3vw,36px)}
.page-head h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:14px}
.page-head .dek{font-family:var(--serif);font-size:1.25rem;line-height:1.5;color:#33474a;max-width:62ch}
.page-head .crumb{font-family:var(--ui);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.cat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.cat-list li{border-bottom:1px solid var(--line)}
.cat-list a{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:22px 4px;transition:.15s}
.cat-list a:hover{background:var(--paper-2)}
.cat-list .ci-no{font-family:var(--ui);font-weight:600;color:var(--gold);font-size:.95rem}
.cat-list .ci-main .ci-title{font-family:var(--slab);font-weight:600;font-size:1.3rem;color:var(--ink);margin:0 0 4px}
.cat-list .ci-main .ci-dek{font-family:var(--serif);color:var(--muted);font-size:1rem;margin:0;max-width:70ch}
.cat-list .ci-read{font-family:var(--ui);font-size:.8rem;color:var(--muted-2);white-space:nowrap}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.hub-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;border-top:5px solid var(--ink);height:100%}
.hub-card:hover{box-shadow:0 16px 34px -22px rgba(18,51,58,.55)}
.hub-card h2{font-size:1.4rem;margin:0 0 8px}
.hub-card p{font-family:var(--serif);color:var(--muted);font-size:1.02rem;margin:0 0 14px}
.hub-card .hub-count{font-family:var(--ui);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terra)}

/* generic prose page (about/contact/404) */
.prose{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gut);padding-block:clamp(30px,4vw,52px);font-size:1.18rem;line-height:1.75;color:#25302f}
.prose h2{font-size:1.5rem;margin:1.5em 0 .4em}
.prose a{color:var(--terra);border-bottom:1px solid rgba(180,85,46,.35)}
.contact-methods{list-style:none;margin:1.4em 0;padding:0;display:grid;gap:14px}
.contact-methods li{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.contact-methods .icon{width:24px;height:24px;color:var(--ink);flex:none;margin-top:2px}
.err-wrap{text-align:center;max-width:640px;margin-inline:auto;padding:clamp(50px,10vw,110px) var(--gut)}
.err-wrap .code{font-family:var(--slab);font-weight:700;font-size:clamp(4rem,16vw,8rem);color:var(--gold);line-height:.9}

/* styleguide */
.sg-section{border-top:1px solid var(--line);padding-block:34px}
.sg-section>h2{font-size:1.5rem;color:var(--terra)}
.sg-label{font-family:var(--ui);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin:22px 0 8px}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .atlas-layout{grid-template-columns:1fr}
  .atlas-mapwrap{max-width:560px;margin-inline:auto;width:100%}
  .feature-lead{grid-template-columns:1fr}
  .feature-lead .fl-fig{min-height:220px;aspect-ratio:16/9}
  .card-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .site-footer .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  body{font-size:18px}
  .mainnav .wrap{flex-direction:column}
  .mainnav a{border-right:0;border-bottom:1px solid rgba(243,236,221,.13);justify-content:space-between}
  .masthead .wrap{align-items:flex-start}
  .masthead-meta{text-align:left}
  .card-grid,.card-grid.cols-3{grid-template-columns:1fr}
  .country-grid{grid-template-columns:1fr 1fr}
  .cat-list a{grid-template-columns:auto 1fr;gap:12px}
  .cat-list .ci-read{grid-column:2;padding-top:2px}
  .site-footer .foot-top{grid-template-columns:1fr}
  .patron-card{grid-template-columns:1fr;text-align:left}
  .article-body{font-size:1.12rem}
  .article-body .lead{font-size:1.22rem}
}
@media(max-width:400px){
  .country-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent}

/* 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. */
.patron-strip .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.patron-strip .sponsor.sponsor img{height:54px!important;max-height:none!important;display:block!important;width:173px!important;max-width:100%!important;box-sizing:border-box!important;flex:none!important}

/* sp-tier-layout: faults that live on the TIER CONTAINER, which no plate rule can reach —
   tiles in a row finding their own cross-axis position (nalejandria hung one tile 28px
   below its neighbours), a dark plate nested inside a differently-dark tile so every tile
   shows a rectangle inside a rectangle (meritweb), and a grid packed too tight to read a
   wordmark in (cylibris). Container properties only; the marks are untouched. */
.patron-strip.patron-strip .sp-logo.sp-logo{display:contents!important}

/* sp-direct-fix: the tile is a column flex with justify-content:center, so its whole content
   block is centred vertically and the mark's position depends on how long the BLURB is —
   marks sat 0, 9 and 17px down across the row purely by copy length (the operator spotted
   this: "the problem seem to be with length of blurb"). Start the content at the top so the
   marks line up whatever the copy does. */
.patron-strip .sponsor{justify-content:flex-start!important}

/* op-strip-4up: operator asked for four per row. auto-fill at minmax(150px,1fr) was fitting seven
   across. Desktop only, so Design's auto-fill still decides the narrow layout. */
@media(min-width:901px){
  .patron-strip{grid-template-columns:repeat(4,1fr)}
}

/* op-plate-fill: the dark plate was pinned to width:173px by our own sp-mark-frame block, sized
   for the seven-across layout it was measured on. In a four-column row the tile is 268px, so each
   plate sat with 47px of page showing either side and the band read as huge gutters. The plate
   takes the column now — one box per tile, same height, contain unchanged. */
.patron-strip .sponsor.sponsor img{width:100%!important}

/* op-footer-compact: the footer printed 5 rows for 5 link(s) in
   1 list(s) — 746px at 390, 7% 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 746 -> 599px (20% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(8px,2.22vw,32px)!important;row-gap:8px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 844px of tier across
   11 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .patron-strip .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:54px!important;min-height:0!important;overflow:hidden!important}
}

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

/* op-article-width: the article column was capped at 697px (82 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .article-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){
  article.article-body{--measure:min(84.434ch, 100%)!important}
}
@media (min-width:1600px){
  article.article-body{--measure:min(clamp(84.434ch, 69.097vw, calc(84.434ch * 1.2)), 100%)!important}
  article.article-body > :is(p:not([class])){font-size:clamp(19.2px,1.3333vw,23.04px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (697px) and was left behind when the text went to 867px. 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.article-head > div.wrap{max-width:min(995px, 100%)!important}
}
@media (min-width:1600px){
  div.article-head > div.wrap{max-width:min(calc(clamp(867px, 60.208vw, 1040px) + 128px), 100%)!important}
}
/* op-article-head:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .patron-strip 5 rows at 900). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .patron-strip .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-hover-pad */
.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--slab); line-height: 1.12; color: var(--ink-deep); font-weight: 600; margin: 0px 0px 0.5em;}
.article-body h2:where(.rt-h3){font-size: 1.3rem; margin: 1.4em 0px 0.4em;}
.profile-card h2:where(.rt-h3){font-size: 1.15rem; margin: 0px 0px 4px;}
h2.rt-h3.rt-h3{height:20.6094px;padding-top:0px}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.acard > span.acard-fig > img,
  article.feature-lead > a.fl-fig > img,
  div.article-hero > div.article-hero-fig > img,
  div.hero-grid.wrap > figure.hero-figure > img){height:auto}
/* op-img-dims:end */