/* Agir Pour La Planète — Disassembly Order */
:root{--paper:#1D3140;--deep:#12212D;--line:#3A5063;--ink:#C9D3DA;--bright:#EDF2F5;--mute:#7E93A3;--soft:#93A7B5;--accent:#F2662B;
--serif:'Source Serif 4',Georgia,serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--disp:'Bricolage Grotesque',system-ui,sans-serif;--stage:'Big Shoulders Display',system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.65}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--bright)}
/* masthead */
.mast{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 30px;padding:24px clamp(20px,4vw,60px) 0;border-bottom:1px solid var(--line)}
.wordmark{font:800 clamp(20px,2.3vw,28px)/1 var(--disp);letter-spacing:-.015em;color:var(--bright)}
.standing{margin:8px 0 16px;font:500 10.5px/1.4 var(--mono);letter-spacing:.16em;color:var(--mute)}
.stages{display:flex;align-items:center;overflow-x:auto;max-width:100%;padding-bottom:0}
.stages .st{font:600 12px/1 var(--mono);letter-spacing:.08em;padding:16px 0 18px;white-space:nowrap;color:var(--soft);border-bottom:2px solid transparent}
.stages .st:hover{color:var(--bright)}
.stages .st.on{color:var(--accent);border-bottom-color:var(--accent)}
.stages .sep{color:var(--line);margin:0 12px;font:600 12px var(--mono);flex:none}
/* footer */
.foot{border-top:1px solid var(--line);margin-top:70px;padding:28px clamp(20px,4vw,60px) 38px;display:flex;flex-wrap:wrap;gap:18px 44px;justify-content:space-between;align-items:baseline}
.foot .disc{margin:0;font:italic 400 14px/1.6 var(--serif);color:var(--mute);max-width:58ch}
.fnav{display:flex;flex-wrap:wrap;gap:8px 18px;font:500 11px var(--mono);letter-spacing:.12em;color:var(--mute)}
.fnav a:hover{color:var(--bright)}
.foot .dom{font:600 11px var(--mono);letter-spacing:.14em;color:var(--soft)}
/* reading columns */
.rcol{max-width:calc(70ch + 2*clamp(20px,4vw,48px));margin:0 auto;padding-inline:clamp(20px,4vw,48px)}
.rcol-wide{max-width:1200px;margin:0 auto;padding-inline:clamp(20px,4vw,48px)}
/* article */
.post-hero{margin:0;position:relative}
.post-hero img{width:100%;height:clamp(280px,50vh,560px);object-fit:cover}
.post-hero .credit{position:absolute;right:14px;bottom:10px;font:400 10px var(--mono);color:rgba(237,242,245,.75);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.post-head{padding-top:42px}
.kicker{margin:0;font:600 11px var(--mono);letter-spacing:.2em;color:var(--accent)}
.kicker a{color:var(--accent)}
.kicker a:hover{color:var(--bright)}
.post-title{font:700 clamp(32px,4.4vw,56px)/1.08 var(--disp);letter-spacing:-.015em;color:var(--bright);margin:16px 0 12px;text-wrap:pretty;max-width:24ch}
.byline{margin:0 0 10px;font:400 12.5px var(--mono);color:var(--mute)}
.lead{font:400 clamp(20px,2.1vw,23px)/1.5 var(--serif);color:var(--bright);margin:22px 0 6px;text-wrap:pretty}
.prose p{margin:0 0 1.25em;font-size:19px}
.prose h2{font:700 clamp(22px,2.5vw,29px)/1.22 var(--disp);letter-spacing:-.01em;color:var(--bright);margin:1.9em 0 .75em;text-wrap:pretty}
.prose a{color:var(--bright);border-bottom:1px solid var(--accent)}
.prose a:hover{color:var(--accent)}
.prose strong{color:var(--bright)}
.prose ul{margin:0 0 1.25em;padding-left:1.2em}
.prose li{margin-bottom:.4em}
/* note bands */
.noteband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--deep);margin:48px 0;padding:36px clamp(20px,4vw,60px) 42px}
.noteband--rule{background:transparent;border-top:3px double var(--line);border-bottom:3px double var(--line)}
.nb-inner{max-width:1200px;margin:0 auto}
.nb-kick{margin:0 0 22px;font:600 11px var(--mono);letter-spacing:.22em;color:var(--accent)}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px 36px}
.nb-item{border-top:1px solid var(--line);padding-top:12px}
.nb-term{display:block;font:600 13px/1.4 var(--mono);color:var(--bright);margin-bottom:6px}
.nb-desc{display:block;font:400 14.5px/1.55 var(--serif);color:var(--soft)}
/* related + next stage */
.related{margin-top:56px}
.related .nb-kick{margin-bottom:16px}
.related-links{list-style:none;margin:0;padding:0}
.related-links li{border-top:1px solid var(--line)}
.related-links a{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:13px 0}
.rl-stage{font:600 10.5px var(--mono);letter-spacing:.14em;color:var(--mute);flex:none;min-width:110px}
.rl-title{font:600 17px var(--disp);color:var(--ink)}
.related-links a:hover .rl-title{color:var(--accent)}
.nextstage{display:flex;align-items:baseline;justify-content:space-between;gap:20px;max-width:1200px;margin:60px auto 0;padding:26px clamp(20px,4vw,48px) 0;border-top:1px solid var(--line)}
.ns-label{font:600 11px var(--mono);letter-spacing:.2em;color:var(--mute)}
.ns-word{font:700 clamp(30px,4vw,46px)/1 var(--stage);letter-spacing:.03em;color:var(--accent)}
.nextstage:hover .ns-word{color:var(--bright)}
/* category */
.cat-head{max-width:1200px;margin:0 auto;padding:50px clamp(20px,4vw,48px) 36px;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 44px}
.cat-no{flex:100%;font:600 11px var(--mono);letter-spacing:.22em;color:var(--mute)}
.stageword{margin:0;font:800 clamp(64px,11vw,150px)/.85 var(--stage);letter-spacing:.01em;color:var(--accent)}
.cat-blurb{margin:0;font:400 17px/1.6 var(--serif);color:var(--soft);max-width:46ch}
.cat-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cat-list li{border-bottom:1px solid var(--line)}
.cat-list a{display:grid;grid-template-columns:190px 1fr auto;gap:26px;align-items:center;max-width:1200px;margin:0 auto;padding:22px clamp(20px,4vw,48px)}
.cl-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cl-title{display:block;font:700 clamp(19px,2.2vw,25px)/1.2 var(--disp);color:var(--bright);margin-bottom:8px;text-wrap:pretty}
.cl-dek{display:block;font:400 15px/1.55 var(--serif);color:var(--soft);max-width:64ch}
.cl-meta{font:600 10.5px var(--mono);letter-spacing:.14em;color:var(--mute);white-space:nowrap}
.cat-list a:hover .cl-title{color:var(--accent)}
/* ============ homepage ============ */
.hero{position:relative}
.hero img{width:100%;height:clamp(420px,78vh,760px);object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,33,45,.88) 0%,rgba(18,33,45,.25) 45%,rgba(18,33,45,0) 70%)}
.hero-copy{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(20px,4vw,60px) 46px}
.hero-stage{font:600 12px var(--mono);letter-spacing:.24em;color:var(--bright);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.hero-line{display:block;margin:10px 0 0;font:700 clamp(52px,9vw,140px)/.9 var(--stage);letter-spacing:.01em;color:var(--accent);text-wrap:balance;text-shadow:0 2px 8px rgba(0,0,0,.85),0 6px 34px rgba(0,0,0,.6)}
.hero-dek{margin:16px 0 0;font:400 14px/1.6 var(--mono);color:var(--bright);max-width:56ch;text-shadow:0 1px 8px rgba(0,0,0,.85)}
.hero-cta{display:inline-block;margin-top:14px;font:600 12px var(--mono);letter-spacing:.12em;color:var(--accent)}
.hero-cta:hover{color:var(--bright)}
/* band scaffolding */
.band{border-top:1px solid var(--line);padding:0 clamp(20px,4vw,60px)}
.band-inner{max-width:1280px;margin:0 auto;padding:46px 0 54px}
.band-kick{margin:0 0 8px;font:600 11px var(--mono);letter-spacing:.24em;color:var(--accent)}
.band-note{margin:0 0 30px;font:400 13px/1.6 var(--mono);color:var(--mute);max-width:64ch}
/* current-stage features */
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;padding:34px 0;border-top:1px solid var(--line)}
.feature:first-of-type{border-top:0;padding-top:0}
.feature img{width:100%;aspect-ratio:16/9;object-fit:cover}
.f-stage{font:700 15px var(--stage);letter-spacing:.2em;color:var(--mute)}
.f-stage b{color:var(--accent);font-weight:700}
.f-title{margin:10px 0 12px;font:700 clamp(24px,2.8vw,34px)/1.12 var(--disp);letter-spacing:-.01em;color:var(--bright);text-wrap:pretty}
.f-dek{margin:0 0 14px;font:400 15.5px/1.6 var(--serif);color:var(--soft)}
.f-more{font:600 11.5px var(--mono);letter-spacing:.12em;color:var(--accent)}
.feature a:hover .f-title{color:var(--accent)}
/* recent grid */
.recent{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.recent a{display:flex;flex-direction:column;background:var(--paper);padding:26px 26px 30px;min-height:190px}
.recent .r-rule{width:44px;height:3px;background:var(--accent);margin-bottom:18px}
.recent .r-title{font:700 clamp(20px,2vw,24px)/1.18 var(--disp);color:var(--bright);text-wrap:pretty}
.recent .r-stage{margin-top:auto;padding-top:18px;font:600 10.5px var(--mono);letter-spacing:.16em;color:var(--mute)}
.recent a:hover .r-title{color:var(--accent)}
/* teasers */
.teasers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.teasers a{display:flex;flex-direction:column;background:var(--deep);padding:24px 24px 26px;min-height:200px}
.t-stage{font:700 22px var(--stage);letter-spacing:.1em;color:var(--accent)}
.t-quote{margin:14px 0 0;font:italic 400 15.5px/1.5 var(--serif);color:var(--ink)}
.t-go{margin-top:auto;padding-top:16px;font:600 10.5px var(--mono);letter-spacing:.14em;color:var(--mute)}
.teasers a:hover .t-go{color:var(--accent)}
/* sponsors — count-agnostic, class-driven */
.shelf{border-top:1px solid var(--line);padding:0 clamp(20px,4vw,60px)}
.shelf-inner{max-width:1280px;margin:0 auto;padding:34px 0 40px}
.shelf-kick{margin:0 0 6px;font:600 11px var(--mono);letter-spacing:.24em;color:var(--soft)}
.shelf-note{margin:0 0 22px;font:400 12.5px/1.6 var(--mono);color:var(--mute);max-width:60ch}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.sponsor{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:112px;padding:18px;background:var(--deep);border:1px solid var(--line)}
.sponsor:hover{border-color:var(--soft)}
.sponsor img{max-width:68%;max-height:52px;object-fit:contain}
.sponsor-blurb{font:400 12px/1.5 var(--mono);color:var(--mute);text-align:center}
.sponsor-blurb:empty{display:none}
.sponsor.feat{min-height:170px}
.sponsor.feat img{max-height:76px}
/* ============ components (styleguide + articles) ============ */
.pullquote{border-top:3px double var(--line);border-bottom:3px double var(--line);margin:2.2em 0;padding:24px 0}
.pullquote p{margin:0;font:italic 500 clamp(21px,2.4vw,26px)/1.4 var(--serif);color:var(--bright)}
.blockquote{margin:2.2em 0;padding:4px 0 4px 24px;border-left:3px solid var(--accent)}
.blockquote p{margin:0 0 10px;font:italic 400 19px/1.55 var(--serif);color:var(--bright)}
.blockquote cite{font:400 12px var(--mono);color:var(--mute);font-style:normal}
.callout{margin:2em 0;padding:20px 24px;background:var(--deep);border:1px solid var(--line)}
.callout p{margin:0;font:400 16.5px/1.6 var(--serif);color:var(--bright)}
.callout p::before{content:'WORTH KEEPING';display:block;font:600 10.5px var(--mono);letter-spacing:.2em;color:var(--accent);margin-bottom:10px}
.note{font:400 14px/1.6 var(--mono);color:var(--soft);border-top:1px dotted var(--mute);border-bottom:1px dotted var(--mute);padding:10px 0;margin:1.8em 0}
table.versus,table.datatable{width:100%;border-collapse:collapse;margin:2em 0;font-size:15px}
.versus th,.datatable th{font:600 11px var(--mono);letter-spacing:.12em;text-align:left;color:var(--bright);background:var(--deep);border:1px solid var(--line);padding:10px 14px}
.versus td,.datatable td{border:1px solid var(--line);padding:10px 14px;font:400 15px/1.5 var(--serif);color:var(--ink);vertical-align:top}
.versus td:first-child,.datatable td:first-child{font:600 13px var(--mono);color:var(--bright)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:2em 0}
.statblock{display:flex;flex-direction:column;gap:6px;background:var(--deep);padding:20px 20px 22px}
.stat-num{font:700 46px/1 var(--stage);color:var(--accent)}
.stat-label{font:500 11.5px/1.5 var(--mono);letter-spacing:.06em;color:var(--soft)}
.timeline{list-style:none;margin:2em 0;padding:0 0 0 22px;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 20px 0}
.timeline li::before{content:'';position:absolute;left:-27px;top:7px;width:8px;height:8px;background:var(--accent)}
.t-when{display:block;font:600 12.5px/1.5 var(--mono);color:var(--bright);margin-bottom:4px}
.t-what{display:block;font:400 15.5px/1.55 var(--serif);color:var(--soft)}
.chart{margin:2.2em 0}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{margin-top:10px;font:400 12px/1.6 var(--mono);color:var(--mute)}
.chart text{font-family:'IBM Plex Mono',monospace}
.article-figure{margin:2.2em 0}
.article-figure img{width:100%}
.article-figure figcaption{margin-top:10px;font:400 12.5px/1.6 var(--mono);color:var(--mute)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:2.2em 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{margin-top:8px;font:400 12px/1.5 var(--mono);color:var(--mute)}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:2em 0}
.profile-card{display:flex;flex-direction:column;gap:10px;background:var(--deep);border:1px solid var(--line);padding:22px}
.p-photo{width:72px;height:72px;object-fit:cover;border-radius:50%}
.profile-card h3{margin:0;font:700 19px var(--disp);color:var(--bright)}
.p-role{margin:0;font:600 11px var(--mono);letter-spacing:.12em;color:var(--accent)}
.profile-card p{margin:0;font:400 14.5px/1.6 var(--serif);color:var(--soft)}
.p-links a{font:600 12px var(--mono);color:var(--bright);border-bottom:1px solid var(--accent);margin-right:14px}
.p-attr{font:400 11px var(--mono);color:var(--mute)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:2em 0}
.org-card{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--deep);border:1px solid var(--line);padding:20px;text-align:center}
.org-card:hover{border-color:var(--soft)}
.org-logo{width:44px;height:44px;object-fit:contain}
.org-card.no-logo .org-logo{display:none}
.org-name{font:600 14px var(--disp);color:var(--bright)}
.org-host{font:400 11px var(--mono);color:var(--mute)}
.entity-ref{font:600 .9em var(--mono);color:var(--bright);border-bottom:1px solid var(--accent);white-space:nowrap}
.entity-ref:hover{color:var(--accent)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:2em 0}
.further-grid a{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);background:var(--deep);padding:18px;font:600 16px/1.3 var(--disp);color:var(--bright);min-height:110px}
.further-grid a:hover{border-color:var(--accent)}
/* responsive */
@media (max-width:900px){
.feature{grid-template-columns:1fr}
.cat-list a{grid-template-columns:120px 1fr;gap:16px}
.cl-meta{display:none}
}
@media (max-width:600px){
.mast{align-items:flex-start}
.stages{flex-wrap:wrap;gap:2px 0}
.stages .st{padding:8px 0}
.stages .sep{margin:0 8px}
.cat-list a{grid-template-columns:1fr}
.cl-thumb{display:none}
.post-hero img{height:240px}
.hero img{height:70vh}
.prose p{font-size:17.5px}
}
.divider{position:relative;border-top:1px solid var(--line)}
.divider img{width:100%;height:clamp(240px,44vh,440px);object-fit:cover}
.div-cap{position:absolute;left:clamp(20px,4vw,60px);bottom:22px;margin:0;font:400 13px/1.55 var(--mono);color:var(--bright);max-width:52ch;background:rgba(18,33,45,.92);padding:12px 16px;border-left:2px solid var(--accent)}


/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
/* superseded by sp-mark-frame (revised) at the end of this file */


/* sp-mark-frame (revised): put the uniform box on the PLATE, not on the <img>.
   The previous form set height:38px + width:100% on the image itself, which overrode Design's
   own sizing (max-width:68%, max-height:52px, and 76px on a feat tile) and, because the image
   box then filled the whole tile, defeated the column's align-items:center — the operator saw
   small marks pinned to the left with the text centred underneath them. The plate is still one
   box per tier, so the dark ground stays uniform whatever the logo's shape. */
.sp-grid .sponsor .sp-logo.sp-logo{display:flex!important;align-items:center;justify-content:center;width:100%!important;height:52px}
.sp-grid .sponsor.feat .sp-logo.sp-logo{height:76px}
.sp-grid .sponsor.sponsor img{max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:contain}

/* op-article-width: the article column was capped at 642px (76 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width calc(70ch + (2 * clamp(20px, 4vw, 48px))) (declared in .rcol) 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 div.rcol.prose{max-width:min(955px, 100%)!important}
}
@media (min-width:1600px){
  article div.rcol.prose{max-width:min(clamp(955px, 66.319vw, 1146px), 100%)!important}
  article div.rcol.prose > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (phone: .sp-grid 6 rows at 640). 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 (max-width:640px){
  .sp-grid .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-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.cl-thumb > img,
  article > figure.post-hero > img,
  article.feature > a > img,
  main > section.divider > img,
  main > section.hero > img){height:auto}
/* op-img-dims:end */