/* ============================================================
   ECOLOGEE — Green Energy Initiative
   High-contrast mono: ink black / paper white / volt green
   Type: Archivo (display + UI) · Source Serif 4 (reading)
   ============================================================ */

:root{
  --ink:#0a0f0c;
  --paper:#ffffff;
  --volt:#00e36a;
  --volt-ink:#007a38;
  --tint:#e9fbf0;
  --grey:#5a655f;
  --col:820px;
  --wide:1240px;
  --pad:clamp(20px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Source Serif 4",Georgia,serif;
  font-size:23px;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--volt-ink);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--ink);text-decoration-color:var(--volt)}
h1,h2,h3,h4{font-family:"Archivo",system-ui,sans-serif;line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em}
figure{margin:0}
input[type="checkbox"].ghost{position:absolute;opacity:0;pointer-events:none}

.wrap{max-width:var(--wide);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.col{max-width:var(--col);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}
.volt{color:var(--volt)}

.kicker{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:16px;
  text-transform:uppercase;letter-spacing:.22em;line-height:1.4;
  display:inline-flex;align-items:center;gap:12px;
}
.kicker::before{content:"";width:34px;height:4px;background:var(--volt);flex:none}

/* ---------------- header ---------------- */
.site-head{background:var(--paper);color:var(--ink);position:relative;z-index:50;border-bottom:4px solid var(--volt)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:82px;position:relative}
.wordmark{
  font-family:"Archivo",sans-serif;font-weight:900;font-size:27px;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;text-transform:uppercase;white-space:nowrap;
}
.wordmark:hover{color:var(--ink)}
.wordmark .volt{color:var(--volt-ink)}
.site-nav{display:flex;align-items:center;gap:clamp(18px,2.5vw,36px)}
.site-nav a{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:16px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;padding:6px 0;
  border-bottom:3px solid transparent;
}
.site-nav a:hover{border-bottom-color:var(--volt);color:var(--ink)}
.site-nav a.nav-cta{border:2px solid var(--volt);color:var(--volt-ink);padding:8px 18px}
.site-nav a.nav-cta:hover{background:var(--volt);color:var(--ink)}
.nav-burger{display:none;cursor:pointer;width:44px;height:44px;flex-direction:column;justify-content:center;gap:7px;align-items:flex-end}
.nav-burger span{display:block;height:3px;background:var(--ink);width:30px;transition:transform .2s,opacity .2s,width .2s}

@media (max-width:900px){
  .nav-burger{display:flex}
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--pad) 20px;border-bottom:4px solid var(--volt);
  }
  .site-nav a{padding:14px 0;border-bottom:1px solid rgba(10,15,12,.12);font-size:17px}
  .site-nav a.nav-cta{border:2px solid var(--volt);margin-top:14px;text-align:center}
  .nav-check:checked ~ .site-nav{display:flex}
  .nav-check:checked ~ .nav-burger span:nth-child(1){transform:translateY(10px) rotate(45deg)}
  .nav-check:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-check:checked ~ .nav-burger span:nth-child(3){transform:translateY(-10px) rotate(-45deg);width:30px}
}

/* ---------------- hero ---------------- */
.hero{background:var(--tint);color:var(--ink);padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{
  font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(46px,7.2vw,104px);line-height:.95;margin:22px 0 26px;
}
.hero h1 .outline{
  color:transparent;-webkit-text-stroke:2px var(--volt);
}
.hero p{font-size:clamp(21px,2vw,25px);max-width:34ch;margin:0 0 36px;color:#3f4a44}
.hero .kicker{color:var(--volt-ink)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px}
.btn{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:17px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:16px 28px;display:inline-block;border:2px solid var(--volt);
}
.btn-solid{background:var(--volt);color:var(--ink)}
.btn-solid:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn-ghost{color:var(--volt-ink)}
.btn-ghost:hover{background:var(--volt);color:var(--ink)}
.hero-fig{border:3px solid var(--volt);position:relative}
.hero-fig img{width:100%;height:100%;min-height:320px;object-fit:cover}
.hero-fig figcaption{
  position:absolute;left:-3px;bottom:-3px;background:var(--volt);color:var(--ink);
  font-family:"Archivo",sans-serif;font-weight:700;font-size:16px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 16px;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-fig img{min-height:240px}
}

/* ---------------- ticker ---------------- */
.ticker{background:var(--volt);color:var(--ink);border-bottom:4px solid var(--ink);overflow:hidden;padding:14px 0}
.ticker-track{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker-track:hover{animation-play-state:paused}
.ticker-set{display:flex;flex:none}
.ticker-set span{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:17px;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;padding:0 26px;display:flex;align-items:center;gap:26px;
}
.ticker-set span::after{content:"▮";font-size:12px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;width:auto}
  .ticker-set{flex-wrap:wrap;row-gap:6px}
  .ticker-set[aria-hidden="true"]{display:none}
}

/* ---------------- section headers ---------------- */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.sec-head h2{
  font-size:clamp(38px,4.6vw,64px);font-weight:900;text-transform:uppercase;margin:14px 0 0;
}
.sec-head .sec-note{font-size:18px;color:var(--grey);font-style:italic;max-width:38ch}

/* ---------------- briefings ---------------- */
.briefings{padding:clamp(64px,8vw,120px) 0}
.brief-lead{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);border:3px solid var(--ink);
  margin-bottom:0;background:var(--tint);
}
.brief-lead-img{border-right:3px solid var(--ink)}
.brief-lead-img img{width:100%;height:100%;object-fit:cover;min-height:340px}
.brief-lead-body{padding:clamp(24px,3.5vw,52px);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.brief-lead-body h3{font-size:clamp(28px,3vw,42px);font-weight:800;margin:0}
.brief-lead-body h3 a{color:var(--ink);text-decoration:none}
.brief-lead-body h3 a:hover{text-decoration:underline;text-decoration-color:var(--volt);text-decoration-thickness:4px}
.brief-lead-body p{margin:0;font-size:21px}
.tag{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--volt);color:var(--ink);padding:5px 12px;display:inline-block;
}
.brief-rows{border:3px solid var(--ink);border-top:none}
.brief-row{
  display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);align-items:center;
  padding:clamp(20px,2.6vw,34px) clamp(18px,3vw,44px);border-bottom:3px solid var(--ink);
  text-decoration:none;color:var(--ink);
}
.brief-row:last-child{border-bottom:none}
.brief-row:hover{background:var(--tint)}
.brief-row:hover .brief-num{color:var(--volt-ink);-webkit-text-stroke:0}
.brief-num{
  font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(40px,4.5vw,58px);
  color:transparent;-webkit-text-stroke:2px var(--ink);line-height:1;
}
.brief-row-title{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(21px,2.2vw,28px);line-height:1.15;display:block;margin-bottom:6px}
.brief-row-dek{font-size:18px;color:var(--grey);display:block}
.brief-row .tag{justify-self:end}
@media (max-width:900px){
  .brief-lead{grid-template-columns:1fr}
  .brief-lead-img{border-right:none;border-bottom:3px solid var(--ink)}
  .brief-lead-img img{min-height:220px}
  .brief-row{grid-template-columns:64px minmax(0,1fr)}
  .brief-row .tag{grid-column:2;justify-self:start}
  .brief-num{font-size:34px}
}

/* ---------------- partner cards (shared structure) ---------------- */
.p-card{background:#fff;border:3px solid var(--ink);padding:24px;display:flex;flex-direction:column;align-items:flex-start;position:relative}
.p-logo{
  width:100%;height:68px;display:flex;align-items:center;justify-content:center;
  background:#f4f6f5;border:2px solid var(--ink);margin-bottom:18px;padding:8px 14px;
}
.p-logo img{width:100%;height:100%;object-fit:contain}
.p-name{font-family:"Archivo",sans-serif;font-weight:800;font-size:22px;margin:0 0 10px}
.p-name a{color:var(--ink);text-decoration:none;border-bottom:3px solid var(--volt)}
.p-name a:hover{background:var(--volt)}
.p-desc{
  font-size:18px;line-height:1.55;margin:0 0 6px;color:var(--grey);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.p-more{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--volt-ink);cursor:pointer;margin-bottom:16px;min-height:24px;
}
.p-more:hover{color:var(--ink)}
.p-more .hide{display:none}
.p-check:checked ~ .p-desc{-webkit-line-clamp:unset;display:block}
.p-check:checked ~ .p-more .show{display:none}
.p-check:checked ~ .p-more .hide{display:inline}
.p-cta{
  margin-top:auto;font-family:"Archivo",sans-serif;font-weight:700;font-size:15px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);border:2px solid var(--ink);
  padding:10px 18px;
}
.p-cta:hover{background:var(--ink);color:var(--volt)}

/* partners band A — volt field */
.partners-a{background:var(--volt);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:clamp(56px,7vw,104px) 0}
.partners-a .sec-head h2{color:var(--ink)}
.partners-a .sec-head .sec-note{color:var(--ink);opacity:.75}
.partners-a .kicker::before{background:var(--ink)}
.partners-a .p-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.partners-a .p-card{box-shadow:8px 8px 0 var(--ink)}

/* partners band B — quiet ledger near footer */
.partners-b{background:var(--paper);padding:clamp(56px,7vw,104px) 0;border-top:3px solid var(--ink)}
.partners-b .p-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:3px solid var(--ink)}
.partners-b .p-card{border:none;outline:1.5px solid var(--ink);outline-offset:-1.5px;padding:clamp(22px,3vw,36px)}
.partners-b .p-logo{background:var(--tint)}
@media (max-width:900px){
  .partners-a .p-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .partners-a .p-grid,.partners-b .p-grid{grid-template-columns:1fr}
}

/* ---------------- projects ---------------- */
.projects{background:var(--tint);color:var(--ink);padding:clamp(64px,8vw,120px) 0}
.projects .sec-head h2{color:var(--ink)}
.projects .kicker{color:var(--volt-ink)}
.proj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.proj-card{border:3px solid var(--ink);display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:#fff}
.proj-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:3px solid var(--ink)}
.proj-body{padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.proj-body h3{font-size:clamp(24px,2.4vw,34px);font-weight:800;margin:0;color:var(--ink)}
.proj-body p{margin:0;font-size:19px;color:var(--grey)}
.proj-more{font-family:"Archivo",sans-serif;font-weight:700;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--volt-ink)}
.proj-card:hover{box-shadow:8px 8px 0 var(--volt)}
.proj-card:hover .proj-more{color:var(--ink)}
@media (max-width:820px){.proj-grid{grid-template-columns:1fr}}

/* ---------------- manifesto ---------------- */
.manifesto{padding:clamp(64px,8vw,130px) 0}
.manifesto-goal{
  font-size:clamp(24px,3vw,36px);line-height:1.45;font-style:italic;max-width:26ch;
  margin:0 0 clamp(40px,5vw,72px);
}
.manifesto-goal strong{background:linear-gradient(transparent 62%,var(--volt) 62%);font-style:normal}
.creed{display:grid;gap:0;border-top:3px solid var(--ink)}
.creed-item{
  display:grid;grid-template-columns:120px minmax(0,1fr);gap:clamp(18px,3vw,48px);
  padding:clamp(24px,3vw,40px) 0;border-bottom:3px solid var(--ink);align-items:start;
}
.creed-item .creed-num{
  font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(34px,4vw,52px);line-height:1;
  color:transparent;-webkit-text-stroke:2px var(--volt);
}
.creed-item p{margin:0;font-size:clamp(21px,2.2vw,27px);line-height:1.55;max-width:44ch}
@media (max-width:640px){.creed-item{grid-template-columns:64px minmax(0,1fr)}.creed-item .creed-num{font-size:30px}}

/* ---------------- footer ---------------- */
.site-foot{background:var(--tint);color:var(--ink);text-align:center;padding:clamp(40px,6vw,72px) var(--pad) clamp(32px,4vw,48px);border-top:4px solid var(--volt)}
.foot-mark{font-family:"Archivo",sans-serif;font-weight:900;font-size:23px;letter-spacing:.03em;color:var(--ink);text-decoration:none;text-transform:uppercase}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:22px 0 18px}
.foot-links a{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:16px;letter-spacing:.12em;text-transform:uppercase;
  color:#3f4a44;text-decoration:none;border-bottom:2px solid transparent;padding:4px 0;
}
.foot-links a:hover{color:var(--volt-ink);border-bottom-color:var(--volt)}
.foot-line{margin:0;font-size:16px;color:var(--grey);font-family:"Archivo",sans-serif;letter-spacing:.04em}
@media (max-width:640px){
  .foot-links{gap:2px 22px;margin:20px 0 16px}
  .foot-links a{padding:11px 0}
}

/* ============================================================
   ARTICLES
   ============================================================ */
.art-hero{background:var(--tint);color:var(--ink);padding:clamp(48px,7vw,100px) 0}
.art-hero .kicker{color:var(--volt-ink)}
.art-hero .volt{color:var(--volt-ink)}
.art-title{
  font-size:clamp(38px,5.6vw,78px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  line-height:.98;margin:20px 0 24px;max-width:20ch;
}
.art-standfirst{font-size:clamp(21px,2.2vw,26px);color:#3f4a44;max-width:52ch;margin:0;font-style:italic}
.art-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.art-meta .tag{background:var(--volt);color:var(--ink)}

.art-figure{margin:clamp(28px,4vw,56px) 0}
.art-figure img{width:100%;object-fit:cover;border:3px solid var(--ink)}
.art-figure figcaption{
  font-family:"Archivo",sans-serif;font-size:16px;letter-spacing:.06em;color:var(--grey);
  padding:10px 2px 0;text-transform:uppercase;font-weight:600;
}
.art-figure.bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.art-figure.bleed img{border-left:none;border-right:none;max-height:64vh}
.art-figure.bleed figcaption{padding-left:var(--pad)}

.art-body{padding:clamp(48px,6vw,88px) 0}
.art-body > p,.art-body > h2,.art-body > h3,.art-body > ul,.art-body > ol{max-width:var(--col);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}
.art-body > p{margin-top:0;margin-bottom:1.5em}
.art-body h2{
  font-size:clamp(30px,3.4vw,44px);font-weight:800;margin:1.8em auto .8em;
  display:flow-root;
}
.art-body h2 .h-num{color:var(--volt-ink);-webkit-text-stroke:0;margin-right:14px}
.dropcap::first-letter{
  font-family:"Archivo",sans-serif;font-weight:900;font-size:4.1em;line-height:.78;
  float:left;padding:8px 16px 2px 0;color:var(--ink);
}
.pullquote{
  max-width:var(--col);margin:clamp(36px,5vw,64px) auto;padding:0 var(--pad);
}
.pullquote blockquote{
  margin:0;border-left:10px solid var(--volt);padding:8px 0 8px clamp(20px,3vw,40px);
  font-size:clamp(26px,3vw,38px);line-height:1.3;font-style:italic;font-weight:600;
}
.pullquote cite{display:block;margin-top:14px;font-style:normal;font-family:"Archivo",sans-serif;font-size:16px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--grey)}

/* at-a-glance / takeaways */
.glance{
  max-width:var(--col);margin:clamp(36px,5vw,64px) auto;border:3px solid var(--ink);
  background:var(--tint);padding:clamp(24px,3vw,40px) clamp(24px,3.5vw,48px);position:relative;
}
.glance-wrap{padding:0 var(--pad)}
.glance h3{font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;margin:0 0 18px;display:flex;align-items:center;gap:12px}
.glance h3::before{content:"▮▮";color:var(--volt);letter-spacing:2px}
.glance ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.glance li{padding-left:30px;position:relative;font-size:20px;line-height:1.55}
.glance li::before{content:"→";position:absolute;left:0;font-family:"Archivo",sans-serif;font-weight:900;color:var(--volt-ink)}

/* stat grid */
.statgrid-wrap{max-width:var(--col);margin:clamp(36px,5vw,64px) auto;padding:0 var(--pad)}
.statgrid-wrap > h3{font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;margin:0 0 18px}
.statgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:3px solid var(--ink);background:var(--ink);gap:3px}
.stat{background:#fff;padding:22px 20px}
.stat b{display:block;font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(26px,2.8vw,38px);line-height:1;margin-bottom:8px}
.stat b .volt{color:var(--volt-ink)}
.stat span{font-family:"Archivo",sans-serif;font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);line-height:1.4;display:block}
.stat.stat-dark{background:var(--volt)}
.stat.stat-dark b{color:var(--ink)}
.stat.stat-dark span{color:#1e3a2b}
@media (max-width:640px){.statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* distribution bars */
.bars{display:grid;gap:14px;margin-top:8px}
.bar-row{display:grid;grid-template-columns:minmax(110px,180px) 1fr;gap:16px;align-items:center}
.bar-row .bar-label{font-family:"Archivo",sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.08em}
.bar{height:34px;background:#f0f3f1;border:2px solid var(--ink);position:relative}
.bar i{position:absolute;inset:0;background:var(--volt);border-right:2px solid var(--ink)}
.bar em{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-style:normal;font-family:"Archivo",sans-serif;font-weight:800;font-size:16px}

/* entity info card + map */
.entity{
  max-width:var(--col);margin:clamp(36px,5vw,64px) auto;padding:0 var(--pad);
}
.entity-in{border:3px solid var(--ink);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:#fff}
.entity-facts{padding:clamp(22px,3vw,36px);border-right:3px solid var(--ink)}
.entity-facts h3{font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;margin:0 0 16px;display:flex;gap:10px;align-items:center}
.entity-facts h3::before{content:"◉";color:var(--volt-ink)}
.entity-facts dl{margin:0;display:grid;gap:10px}
.entity-facts dt{font-family:"Archivo",sans-serif;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.entity-facts dd{margin:0 0 6px;font-size:19px;line-height:1.45}
.entity-map{min-height:280px}
.entity-map iframe{width:100%;height:100%;min-height:280px;border:0;display:block;filter:grayscale(1) contrast(1.05)}
.entity.no-map .entity-in{grid-template-columns:1fr}
.entity.no-map .entity-facts{border-right:none}
@media (max-width:760px){
  .entity-in{grid-template-columns:1fr}
  .entity-facts{border-right:none;border-bottom:3px solid var(--ink)}
}

/* org list (global policies post) */
.orgs{max-width:var(--col);margin:clamp(36px,5vw,64px) auto;padding:0 var(--pad);display:grid;gap:20px}
.org{border:3px solid var(--ink);padding:clamp(20px,2.6vw,32px);display:grid;grid-template-columns:88px minmax(0,1fr);gap:22px;align-items:start;background:#fff}
.org-badge{
  width:88px;height:88px;background:var(--volt);color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-family:"Archivo",sans-serif;font-weight:900;font-size:19px;text-align:center;line-height:1.05;padding:6px;
}
.org h3{font-size:23px;font-weight:800;margin:0 0 8px}
.org p{margin:0 0 10px;font-size:19px;color:var(--grey);line-height:1.55}
.org a{font-family:"Archivo",sans-serif;font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--volt)}
@media (max-width:560px){.org{grid-template-columns:1fr}.org-badge{width:72px;height:72px;font-size:16px}}

/* profile card (johnstone) */
.profile{
  max-width:var(--col);margin:clamp(36px,5vw,64px) auto;padding:0 var(--pad);
}
.profile-in{background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--volt);padding:clamp(24px,3.4vw,44px)}
.profile-in h3{color:var(--volt-ink);font-size:19px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;margin:0 0 16px}
.profile-in dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}
.profile-in dt{font-family:"Archivo",sans-serif;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.profile-in dd{margin:4px 0 0;font-size:19px;line-height:1.45}
.profile-in a{color:var(--volt-ink)}
@media (max-width:560px){.profile-in dl{grid-template-columns:1fr}}

/* article footer nav */
.art-next{border-top:3px solid var(--ink);background:var(--tint)}
.art-next-in{
  max-width:var(--col);margin:0 auto;padding:clamp(36px,5vw,64px) var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
}
.art-next a{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.art-next a .dir{font-family:"Archivo",sans-serif;font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--volt-ink)}
.art-next a .ttl{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(19px,2vw,24px);line-height:1.2}
.art-next a:hover .ttl{text-decoration:underline;text-decoration-color:var(--volt);text-decoration-thickness:3px}
.art-next a.next{text-align:right;align-items:flex-end}
@media (max-width:560px){.art-next-in{grid-template-columns:1fr}}

/* generic page (about/contact/wiki) */
.page-body{padding:clamp(48px,6vw,88px) 0}
.page-body > p,.page-body > h2,.page-body > ul{max-width:var(--col);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}
.page-body > p{margin-top:0;margin-bottom:1.5em}

/* utility */
.center{text-align:center}
.mt-0{margin-top:0}

/* 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}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* 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}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
/* ---------------- partner cards (shared structure) ---------------- */
.p-card > .sponsor{flex:0 0 auto!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* 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-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* 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. */
.p-grid .p-card .p-logo.p-logo{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important}
.p-grid .p-card.p-card img{background:transparent!important;width:100%!important;padding:0!important}


/* sp-grid-cols: the quiet ledger band near the footer goes from two columns to four.
   Container measures 1144px, so four tracks land at ~265px each — wider than the 232px tiles
   this estate uses elsewhere. Steps down to two and then one, so the phone keeps Design's stack. */
@media (min-width:1000px){ .partners-b .p-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important} }
@media (min-width:601px) and (max-width:999px){ .partners-b .p-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} }

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

/* op-article-width: the article column was capped at 820px (81 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --col (declared in .art-body > p, .art-body > h2, .art-body > h3, .art-body > ul, .art-body > ol) 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.art-body{--col:min(1037px, 100%)!important}
}
@media (min-width:1600px){
  article.art-body{--col:min(clamp(1037px, 72.014vw, 1244px), 100%)!important}
  article.art-body > :is(p.dropcap, p:not([class])){font-size:clamp(23px,1.5972vw,27.6px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: Archivo, system-ui, sans-serif; line-height: 1.08; margin: 0px 0px 0.5em; letter-spacing: -0.01em;}
.glance h2:where(.rt-h3){font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; margin: 0px 0px 18px; display: flex; align-items: center; gap: 12px;}
.glance h2:where(.rt-h3)::before{content: "▮▮"; color: var(--volt); letter-spacing: 2px;}
.statgrid-wrap > h2:where(.rt-h3){font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; margin: 0px 0px 18px;}
.entity-facts h2:where(.rt-h3){font-size: 19px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; margin: 0px 0px 16px; display: flex; gap: 10px; align-items: center;}
.entity-facts h2:where(.rt-h3)::before{content: "◉"; color: var(--volt-ink);}
.org h2:where(.rt-h3){font-size: 23px; font-weight: 800; margin: 0px 0px 8px;}
.profile-in h2:where(.rt-h3){color: var(--volt-ink); font-size: 19px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; margin: 0px 0px 16px;}
h2.rt-h3.rt-h3{display:block}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.art-body > figure.art-figure > img,
  article.art-body > figure.art-figure.bleed > img,
  article.brief-lead > div.brief-lead-img > img,
  div.hero-grid.wrap > figure.hero-fig > img,
  div.proj-grid > a.proj-card > img){height:auto}
/* op-img-dims:end */