/* ZeroEmission.tv — Tricolore
   green = ink · azzurro = anything measured · red = anything ending · cold white = ground */
:root{
  --paper:#F5F8FA; --plate:#E7EDF0; --ink:#12442B; --body:#33413E; --muted:#5A666B;
  --rule:#CFD9DE; --hair:#DDE5E9; --blue:#0B5AA8; --red:#C8102E; --wrap:1280px;
  --sans:'Fira Sans',system-ui,sans-serif; --mono:'Fira Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden;text-wrap:pretty}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.08}
p{margin:0 0 1.1em}
hr{border:0;border-top:1px solid var(--rule);margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
.mono{font-family:var(--mono)}
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin:0 0 10px}
.kicker--quiet{color:var(--muted)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.measured{color:var(--blue);font-family:var(--mono)}
.ending{color:var(--red);font-family:var(--mono)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:10px 14px;z-index:20}

/* ---- masthead ---- */
.masthead{padding-top:22px}
.masthead-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:14px}
.wordmark{font-size:clamp(26px,3.4vw,34px);font-weight:800;letter-spacing:-.035em;color:var(--ink);line-height:1}
.wordmark:hover{text-decoration:none;color:var(--ink)}
.wordmark span{color:var(--red)}
.nav{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;padding-bottom:4px}
.nav a{color:var(--ink);font-size:15px;font-weight:500;padding-bottom:2px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--blue);text-decoration:none;border-bottom-color:var(--rule)}
.nav a[aria-current]{border-bottom-color:var(--red)}
.tricolore{display:flex;height:8px}
.tricolore i{flex:1}
.tricolore i:nth-child(1){background:var(--ink)}
.tricolore i:nth-child(2){background:var(--paper)}
.tricolore i:nth-child(3){background:var(--red)}
.azzurro{height:2px;background:var(--blue)}
.strapline{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:9px 0;border-bottom:1px solid var(--rule)}

/* ---- generic bands ---- */
.band{padding-block:56px}
.band--tight{padding-block:36px}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.band-head h2{font-size:clamp(26px,3.2vw,36px)}
.band + .band{border-top:1px solid var(--hair)}

/* ---- hero ---- */
.hero h1{font-size:clamp(38px,7vw,84px);letter-spacing:-.04em;max-width:15ch}
.hero-sub{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:36px;margin-top:24px;align-items:start}
.hero-sub p{font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--body);max-width:62ch;margin:0}
.hero-note{border-left:1px solid var(--rule);padding-left:22px}
.hero-note p{font-size:16px;color:var(--body);margin:8px 0 0}

/* ---- lead feature ---- */
.lead-feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:start}
.lead-feature .feature-media img{width:100%;aspect-ratio:5/4;object-fit:cover;background:var(--plate)}
.lead-feature h3{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.035em;line-height:1.05;margin-bottom:12px}
.lead-feature h3 a{color:var(--ink)}
.lead-feature h3 a:hover{color:var(--blue);text-decoration:none}
.dek{font-size:18px;color:var(--body);margin:0 0 14px}
.byline{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--muted)}
.byline b{color:var(--blue);font-weight:400}

/* ---- ledger ---- */
.ledger{width:100%;border-collapse:collapse;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.ledger th{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:400;padding:9px 16px 9px 0;border-bottom:1px solid var(--ink)}
.ledger td{padding:13px 16px 13px 0;border-bottom:1px solid var(--hair);vertical-align:baseline;font-size:16px;color:var(--body);white-space:nowrap;overflow:hidden}
.ledger tr:last-child td{border-bottom:0}
.ledger .l-no{font-family:var(--mono);color:var(--blue);width:52px;font-size:15px}
.ledger .l-src{font-weight:700;color:var(--ink);font-size:20px;letter-spacing:-.02em;width:150px}
.ledger .l-state{font-family:var(--mono);font-size:13px;width:190px;white-space:nowrap}

/* ---- cards ---- */
.card-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{display:flex;flex-direction:column;height:100%}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--plate)}
.card h3{font-size:22px;line-height:1.16;letter-spacing:-.025em;margin:14px 0 8px;min-height:2.32em}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--blue);text-decoration:none}
.card p{font-size:16px;color:var(--body);margin:0 0 14px}
.card .byline{margin-top:auto}
.card--pair img{aspect-ratio:16/10}
.card--pair h3{font-size:clamp(24px,2.6vw,30px);min-height:0}

/* ---- map ---- */
.map-band{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px;align-items:start}
.map-figure{margin:0}
.map-holder{background:var(--plate);border:1px solid var(--rule);padding:14px;display:flex;justify-content:center}
.map-svg{width:100%;height:auto;max-height:620px}
.map-land{fill:#DDE6EB;stroke:#B9C7D0;stroke-width:1.1;stroke-linejoin:round}
.map-pin{fill:var(--blue)}
.map-pin-halo{fill:none;stroke:var(--blue);stroke-width:2;opacity:.45}
.map-label{font-family:var(--mono);font-size:26px;fill:var(--ink);letter-spacing:.04em}
.map-figure figcaption,.figcap{font-size:15px;color:var(--muted);margin-top:10px}
.map-legend{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.map-legend li{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:baseline;font-size:16px;color:var(--body);border-top:1px solid var(--hair);padding-top:10px}
.map-legend b{font-family:var(--mono);font-size:13px;color:var(--blue);font-weight:400;letter-spacing:.06em}

/* ---- 04:00 ---- */
.clock{font-family:var(--mono);font-size:clamp(34px,5vw,52px);color:var(--blue);letter-spacing:-.02em;line-height:1}
.clock-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px;margin-top:26px}
.clock-grid div{border-top:2px solid var(--blue);padding-top:12px}
.clock-grid h3{font-size:19px;letter-spacing:-.02em;font-weight:700;margin-bottom:6px}
.clock-grid p{font-size:16px;color:var(--body);margin:0}

/* ---- section directory ---- */
.dir{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:36px}
.dir section{border-top:2px solid var(--ink);padding-top:14px}
.dir h3{font-size:24px;letter-spacing:-.025em}
.dir h3 a{color:var(--ink)}
.dir > section > p{font-size:16px;color:var(--body);margin:8px 0 12px}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--hair);padding:9px 0}
.cat-list li a{font-weight:500;font-size:17px}
.cat-list .cl-meta{font-family:var(--mono);font-size:12px;color:var(--muted);display:block;margin-top:3px;letter-spacing:.06em}

/* ---- supporters ---- */
.supporters{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:20px 0;margin:44px 0}
.supporters h2{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:14px}
.sponsor-run{display:flex;flex-wrap:wrap;gap:28px}
.sponsor{flex:1 1 260px;min-width:0;display:block;border-left:2px solid var(--blue);padding-left:14px;color:var(--ink)}
.sponsor:hover{text-decoration:none;border-left-color:var(--red)}
.sponsor-name{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.sponsor:hover .sponsor-name{color:var(--blue)}
.sponsor-blurb{display:block;font-size:15px;color:var(--body);margin-top:5px;line-height:1.45}

/* ---- article ---- */
.article-head{padding-block:44px 0}
.article-head h1{font-size:clamp(34px,5.6vw,64px);letter-spacing:-.04em;max-width:20ch}
.lead{font-size:clamp(19px,2.2vw,23px);line-height:1.45;color:var(--body);max-width:60ch;margin:20px 0 18px}
.article-meta{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--muted);border-top:1px solid var(--rule);padding-top:12px}
.article-meta b{font-weight:400;color:var(--blue)}
.article-body{display:grid;grid-template-columns:minmax(0,1fr) min(72ch,100%) minmax(0,1fr);padding:0 24px 20px}
.article-body > *{grid-column:2}
.article-body > .wide{grid-column:1/-1}
.article-body p{font-size:19px;line-height:1.72;color:var(--body);margin:0 0 1.15em}
.article-body h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.03em;margin:1.4em 0 .5em;padding-top:.3em;border-top:1px solid var(--hair)}
.article-body a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:var(--rule)}
.article-body a:hover{text-decoration-color:var(--blue)}

/* figures */
.article-figure{margin:28px 0}
.article-figure img{width:100%;background:var(--plate)}
.article-figure figcaption{font-size:15px;line-height:1.5;color:var(--muted);margin-top:9px;max-width:70ch}
.article-figure .credit{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8B979C;margin-top:5px}
figure.wide{margin:34px 0}
figure.wide img{aspect-ratio:2.4/1;object-fit:cover}
figure.map-figure img,.map-figure img{aspect-ratio:auto;object-fit:contain;width:100%;height:620px;margin:0 auto;display:block}
figure.inset{float:none;width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px;align-items:end;margin:30px 0}
figure.inset img{aspect-ratio:4/5;object-fit:cover}
figure.inset figcaption{margin-top:0;padding-bottom:4px;border-top:2px solid var(--blue);padding-top:12px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:30px 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--plate)}
.gallery figcaption{font-size:14px;color:var(--muted);margin-top:8px}

/* interrupters */
.pullquote{margin:34px 0;padding:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.pullquote p{font-size:clamp(21px,2.6vw,27px);line-height:1.28;font-weight:700;letter-spacing:-.025em;color:var(--ink);margin:16px 0}
.blockquote{margin:30px 0;padding-left:20px;border-left:3px solid var(--blue)}
.blockquote p{font-size:19px;font-style:italic;color:var(--ink);margin:0 0 8px}
.blockquote cite{font-family:var(--mono);font-size:13px;font-style:normal;color:var(--muted)}
.callout{margin:32px 0;background:var(--plate);border-top:2px solid var(--blue);padding:22px 24px}
.callout p{font-size:17px;margin:0;color:var(--body)}
.callout h3{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:400;margin-bottom:12px}
.note{font-size:16px;color:var(--muted);border-left:2px solid var(--rule);padding-left:14px}
.keylist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.keylist li{display:grid;grid-template-columns:minmax(190px,260px) minmax(0,1fr);gap:8px 26px;border-top:1px solid var(--rule);padding:12px 0;font-size:16px;color:var(--body);align-items:baseline}
.keylist b{font-weight:700;color:var(--ink)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;margin:34px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding:22px 0}
.statblock{display:flex;flex-direction:column;gap:7px;min-width:0}
.stat-num{font-family:var(--mono);font-size:clamp(21px,2.4vw,28px);color:var(--blue);line-height:1.05;letter-spacing:-.02em;overflow-wrap:anywhere}
.stat-label{font-size:15px;color:var(--body);line-height:1.4}
.timeline{list-style:none;margin:34px 0;padding:0;border-top:2px solid var(--ink)}
.timeline li{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:8px 24px;border-bottom:1px solid var(--hair);padding:13px 0}
.t-when{font-family:var(--mono);font-size:14px;color:var(--blue);line-height:1.35}
.t-what{font-size:16px;color:var(--body)}
.notes-head{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:34px 0 -18px}

/* tables */
.datatable,.versus{width:100%;border-collapse:collapse;margin:30px 0;font-size:16px}
.datatable th,.versus th{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:400;border-bottom:1px solid var(--ink);padding:8px 14px 8px 0}
.datatable td,.versus td{border-bottom:1px solid var(--hair);padding:12px 14px 12px 0;color:var(--body);vertical-align:top}
.versus td:first-child{font-weight:700;color:var(--ink)}
.table-scroll{overflow-x:auto}

/* charts */
.chart{margin:32px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{font-size:15px;color:var(--muted);margin-top:12px}
.chart .c-bar{fill:var(--blue)}
.chart .c-bar-alt{fill:#9FB8CD}
.chart .c-axis{stroke:var(--rule);stroke-width:1}
.chart .c-label{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.chart .c-value{font-family:var(--mono);font-size:11px;fill:var(--blue)}
.chart .c-line{fill:none;stroke:var(--blue);stroke-width:2.5}
.chart .c-donut{fill:none;stroke-width:26}

/* cards / refs */
.profile-grid,.org-grid,.further-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:30px 0}
.profile-card{border-top:2px solid var(--ink);padding-top:14px;display:flex;flex-direction:column}
.profile-card .p-photo{width:76px;height:76px;object-fit:cover;border-radius:50%;margin-bottom:12px;background:var(--plate)}
.profile-card h3{font-size:20px;letter-spacing:-.02em}
.profile-card .p-role{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:5px 0 8px}
.profile-card p{font-size:15px;color:var(--body);margin:0 0 10px}
.profile-card .p-links{margin-top:auto;font-size:15px}
.org-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--rule);padding:14px;color:var(--ink)}
.org-card:hover{border-color:var(--blue);text-decoration:none}
.org-logo{max-height:34px;width:auto;object-fit:contain;margin-bottom:6px}
.org-name{font-weight:700;font-size:17px;letter-spacing:-.02em}
.org-host{font-family:var(--mono);font-size:12px;color:var(--muted)}
.entity-ref{white-space:nowrap}
.further-grid a{border-top:2px solid var(--blue);padding-top:12px;font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.further-grid a:hover{color:var(--blue);text-decoration:none}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.related-links li{border-top:2px solid var(--ink);padding:12px 20px 0 0}
.related-links a{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.2;display:block}
.related-links a:hover{color:var(--blue);text-decoration:none}
.related-links .rl-meta{font-family:var(--mono);font-size:12px;color:var(--muted);display:block;margin-top:6px;letter-spacing:.06em}
.article-foot{border-top:1px solid var(--hair);margin-top:44px;padding-top:32px}
.article-foot h2{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:16px}

/* page intro (category / static) */
.page-head{padding-block:44px 30px;border-bottom:2px solid var(--ink)}
.page-head h1{font-size:clamp(36px,6vw,72px);letter-spacing:-.04em}
.page-head .lead{margin-bottom:0}
.prose{max-width:70ch;padding-block:34px}
.prose h2{font-size:26px;margin:1.5em 0 .4em}
.prose p,.prose li{font-size:18px;line-height:1.7;color:var(--body)}

/* footer */
.site-foot{margin-top:64px}
.foot-inner{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;padding:22px 0 44px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.foot-inner a{color:var(--muted)}
.foot-inner a:hover{color:var(--blue);text-decoration:none}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 24px}

@media (max-width:900px){
  .hero-sub,.lead-feature,.map-band{grid-template-columns:1fr;gap:26px}
  .hero-note{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:14px}
  .article-body{grid-template-columns:minmax(0,1fr);padding-inline:20px}
  .article-body > *{grid-column:1}
  .article-body > .wide{grid-column:1}
  figure.inset{grid-template-columns:minmax(0,1fr);gap:12px;margin:24px 0}
  figure.inset img{aspect-ratio:3/2}
  figure.inset figcaption{padding-top:10px}
  figure.wide img{aspect-ratio:16/9}
  figure.map-figure img,.map-figure img{aspect-ratio:1200/1554;object-fit:contain;height:auto;width:100%}
  .ledger .l-src{width:auto}
  .band{padding:40px 0}
}
@media (max-width:640px){
  .ledger,.ledger tbody,.ledger tr,.ledger td{display:block;width:auto}
  .ledger thead{display:none}
  .ledger tr{border-bottom:1px solid var(--hair);padding:14px 0}
  .ledger td{border:0;padding:2px 0}
  .ledger .l-no{display:inline-block;margin-right:10px}
  .ledger .l-src{display:inline-block;font-size:21px}
  .ledger .l-state{white-space:normal}
  .keylist li,.timeline li{grid-template-columns:1fr;gap:4px}
  .related-links li{padding-right:0}
}
@media print{ .nav,.supporters{display:none} }

/* ---- category list (rich rows) ---- */
.cat-list--full li{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;padding:18px 0;align-items:start}
.cat-list--full li:first-child{border-top:2px solid var(--ink)}
.cat-list--full .cl-thumb{display:block}
.cat-list--full .cl-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--plate)}
.cat-list--full .cl-body > a{font-size:clamp(20px,2.2vw,25px);font-weight:700;letter-spacing:-.025em;color:var(--ink);line-height:1.14;display:block}
.cat-list--full .cl-body > a:hover{color:var(--blue);text-decoration:none}
.cat-list--full .cl-body p{font-size:16px;color:var(--body);margin:8px 0;max-width:72ch}
.cat-list--full .cl-meta{margin-top:0}
.sponsor.feat{border-left-color:var(--red)}
.page-head .kicker.ending{color:var(--red)}
.sg-swatch{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0}
.sg-swatch div{width:132px}
.sg-chip{height:64px;border:1px solid var(--rule)}
.sg-swatch span{font-family:var(--mono);font-size:11px;color:var(--muted);display:block;margin-top:6px;letter-spacing:.06em}
.sg-note{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:44px 0 14px;border-top:1px solid var(--rule);padding-top:12px}
@media (max-width:640px){
  .cat-list--full li{grid-template-columns:1fr;gap:12px}
  .cat-list--full .cl-thumb img{aspect-ratio:16/9}
}

@media (max-width:520px){.map-legend li{grid-template-columns:1fr;gap:4px}}

/* map legend <-> pin interaction */
.map-legend li{cursor:default;transition:background .12s ease}
.map-legend li.is-on{background:#E7EDF0}
.map-legend li a{color:var(--body)}
.map-legend li a:hover,.map-legend li.is-on a{color:var(--blue);text-decoration:none}
.map-svg g[data-pin]{cursor:pointer}
.map-svg g[data-pin] .map-pin,.map-svg g[data-pin] .map-pin-halo,.map-svg g[data-pin] .map-label{transition:fill .12s ease,stroke .12s ease,r .12s ease,opacity .12s ease}
.map-svg g[data-pin].is-on .map-pin{fill:var(--red)}
.map-svg g[data-pin].is-on .map-pin-halo{stroke:var(--red);opacity:1;r:28}
.map-svg g[data-pin].is-on .map-label{fill:var(--red)}
.map-start .cat-list li{padding:10px 0}

/* ---- homepage directory ---- */
.dir-row{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:44px;border-top:2px solid var(--ink);padding:26px 0 34px}
.dir-row + .dir-row{border-top-width:1px;border-top-color:var(--rule)}
.dir-no{font-family:var(--mono);font-size:14px;letter-spacing:.16em;color:var(--blue);margin:0 0 6px}
.dir-id h3{font-size:clamp(30px,3.8vw,46px);letter-spacing:-.035em;line-height:.98}
.dir-id h3 a{color:var(--ink)}
.dir-id h3 a:hover{color:var(--blue);text-decoration:none}
.dir-blurb{font-size:17px;color:var(--body);margin:12px 0 0;max-width:34ch}
.dir-all{margin:14px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.dir-list{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;align-content:start}
.dir-list li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 10px;padding:12px 0;border-bottom:1px solid var(--hair)}
.dir-list .dl-no{font-family:var(--mono);font-size:12px;color:#93A2AA;padding-top:5px}
.dir-list a{font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1.14;color:var(--ink)}
.dir-list a:hover{color:var(--blue);text-decoration:none}
.dir-list .dl-meta{grid-column:2;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);margin-top:5px}
@media (max-width:900px){
  .dir-row{grid-template-columns:1fr;gap:18px;padding-bottom:26px}
  .dir-blurb{max-width:none}
}

.map-band{align-items:center}

.dir-icon{width:min(200px,80%);height:auto;color:#8CA3B2;margin-top:24px;display:block}
.dir-row:hover .dir-icon{color:#7FA2BC}
.dir-icon{transition:color .18s ease}
@media (max-width:900px){.dir-icon{width:140px;margin-top:14px}}

.nav a{display:inline-flex;align-items:center;gap:7px}
.nav-ico{width:23px;height:auto;flex:0 0 auto;color:#93A9B7;transition:color .15s ease}
.nav a:hover .nav-ico{color:var(--blue)}
.nav a[aria-current] .nav-ico{color:var(--red)}
@media (max-width:760px){.nav-ico{display:none}}

@media (max-width:1080px){.ledger td{white-space:normal}}

/* framed pair images */
.card-frame{position:relative;display:block;overflow:hidden;background:var(--plate);box-shadow:inset 0 0 0 1px var(--rule)}
.card-frame::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.card-frame img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .45s ease;filter:grayscale(.3) contrast(1.03)}
.card--pair:hover .card-frame img{transform:scale(1.035);filter:none}
.card--pair:hover .card-frame::after{transform:scaleX(1)}
.card-tag{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px}
.card-tag i{font-style:normal;color:#7FB79E}
.card--pair:hover .card-tag{background:var(--blue)}

.dir-list--5 li:last-child{grid-column:1/-1}
@media (max-width:900px){.dir-list{grid-template-columns:minmax(0,1fr)}.dir-list--5 li:last-child{grid-column:auto}}

.lead-frame{box-shadow:inset 0 0 0 1px var(--rule),14px 14px 0 0 var(--plate)}
.lead-frame::after{height:4px}
.lead-feature:hover .lead-frame img{transform:scale(1.03);filter:none}
.lead-feature:hover .lead-frame::after{transform:scaleX(1)}
.lead-feature:hover .card-tag{background:var(--blue)}
.lead-cap{font-size:15px;line-height:1.5;color:var(--muted);margin:26px 0 0;max-width:52ch}
.lead-cap .credit{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8B979C;margin-top:6px}
@media (max-width:900px){.lead-frame{box-shadow:inset 0 0 0 1px var(--rule)}.lead-feature .feature-media img{aspect-ratio:16/10}}


/* ================= article reading pass ================= */
.article-head{padding-block:52px 0}
.article-head h1{font-size:clamp(36px,6vw,70px);letter-spacing:-.042em;max-width:18ch}
.article-head .kicker{font-size:12px;letter-spacing:.2em}
.article-head .kicker a{color:var(--blue)}
.lead{font-size:clamp(20px,2.4vw,26px);line-height:1.36;color:var(--ink);font-weight:400;max-width:44ch;margin:22px 0 24px;letter-spacing:-.012em}
.article-meta{border-top:1px solid var(--ink);padding-top:12px;display:flex;flex-wrap:wrap;gap:6px 10px}

/* hero frame */
.hero-figure{margin:30px 0 6px}
.hero-figure .frame{position:relative;display:block;overflow:hidden;background:var(--plate);box-shadow:inset 0 0 0 1px var(--rule)}
.hero-figure .frame img{width:100%;aspect-ratio:2.3/1;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.hero-figure:hover .frame img{transform:scale(1.02)}
.hero-figure .card-tag{position:absolute;left:0;bottom:0}
.hero-figure figcaption{margin-top:12px;max-width:62ch;font-size:15.5px}
@media (max-width:760px){.hero-figure .frame img{aspect-ratio:16/10}}

/* body rhythm */
.article-body{padding-block:8px 20px}
.article-body p{font-size:19.5px;line-height:1.76;color:#2E3A38;margin:0 0 1.2em}
.article-body > p:first-of-type{font-size:21px;line-height:1.66}
.article-body > p:first-of-type::first-letter{float:left;font-size:78px;line-height:.78;font-weight:800;color:var(--ink);padding:6px 12px 0 0;margin-top:2px}

/* numbered section headings */
.article-body{counter-reset:h2}
.article-body h2{counter-increment:h2;position:relative;font-size:clamp(25px,3.1vw,34px);letter-spacing:-.032em;margin:1.7em 0 .55em;padding-top:.55em;border-top:1px solid var(--rule);max-width:24ch}
.article-body h2::before{content:"§ " counter(h2,decimal-leading-zero);position:absolute;left:-96px;top:calc(.55em + 8px);font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--blue);white-space:nowrap}
@media (max-width:1180px){
  .article-body h2::before{position:static;display:block;margin-bottom:8px}
}

/* figures inside the body */
.article-body .article-figure img{box-shadow:inset 0 0 0 1px var(--rule)}
.article-figure figcaption{font-size:15.5px;line-height:1.55}
figure.wide figcaption,.gallery figcaption{max-width:66ch}
.gallery{gap:20px}

/* pullquote */
.pullquote{border-top:2px solid var(--ink);border-bottom:0;padding-top:6px;margin:40px 0}
.pullquote p{font-size:clamp(23px,3vw,31px);line-height:1.22;letter-spacing:-.03em;margin:18px 0 0}
.pullquote::after{content:"";display:block;width:64px;height:2px;background:var(--red);margin:20px 0 0}

/* interrupters */
.callout{background:var(--plate);border-top:2px solid var(--blue);padding:24px 26px;margin:36px 0}
.notes-head{margin:38px 0 -14px}
.statrow{padding:24px 0 22px}
.timeline li{padding:14px 0}

/* foot */
.filed{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 26px}
.article-foot{border-top:2px solid var(--ink);padding-top:26px}
.related-links li{border-top:1px solid var(--rule);counter-increment:rel}
.article-foot .related-links{counter-reset:rel}
.related-links li::before{content:counter(rel,decimal-leading-zero);display:block;font-family:var(--mono);font-size:12px;color:var(--blue);margin-bottom:8px;letter-spacing:.1em}

.keylist li > span:only-child{grid-column:1/-1}
.keylist b{line-height:1.3}
@media (max-width:640px){.keylist li{grid-template-columns:minmax(0,1fr)}}

/* ---- mobile pass ---- */
@media (max-width:760px){
  .nav{gap:2px 18px}
  .nav a{min-height:44px;align-items:center;padding-block:8px}
  .brand{font-size:clamp(26px,8vw,34px)}
}
@media (max-width:640px){
  .datatable,.versus{table-layout:fixed;width:100%;font-size:15px}
  .datatable th,.datatable td,.versus th,.versus td{padding:9px 8px;overflow-wrap:anywhere}
  .foot-inner{gap:14px 24px}
  .foot-nav a{min-height:36px;display:inline-flex;align-items:center}
  .statrow{gap:18px}
  .stat-num{font-size:38px}
  .pullquote p{font-size:22px}
  .article-body > p:first-of-type::first-letter{font-size:62px;padding-right:9px}
  .article-body h2{max-width:none}
  .sponsor{padding:14px 0 14px 14px}
}

/* 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{object-fit:contain!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}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1681px at 390, 13% of the whole page. Two columns bring it to
   1121px (33% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 3 lines, tile heights 123-146px.
   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. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. 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:28px!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 (3 tiles), .sponsor-run (3 tiles), .sponsor-run (3 tiles), .sponsor-run (3 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}
  .sponsor-run:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-run:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-run:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 683px (78 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "minmax(0px, 1fr) min(72ch, 100%) minmax(0px, 1fr)" (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){
  div.article-body{grid-template-columns:minmax(0px, 1fr) min(895px, 100%) minmax(0px, 1fr)!important}
}
@media (min-width:1600px){
  div.article-body{grid-template-columns:minmax(0px, 1fr) min(clamp(895px, 62.153vw, 1074px), 100%) minmax(0px, 1fr)!important}
  div.article-body > :is(p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){margin: 0px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;}
.lead-feature h2:where(.rt-h3){font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 12px;}
.lead-feature h2:where(.rt-h3) a{color: var(--ink);}
.lead-feature h2:where(.rt-h3) a:hover{color: var(--blue); text-decoration: none;}
.card h2:where(.rt-h3){font-size: 22px; line-height: 1.16; letter-spacing: -0.025em; margin: 14px 0px 8px; min-height: 2.32em;}
.card h2:where(.rt-h3) a{color: var(--ink);}
.card h2:where(.rt-h3) a:hover{color: var(--blue); text-decoration: none;}
.card--pair h2:where(.rt-h3){font-size: clamp(24px, 2.6vw, 30px); min-height: 0px;}
.clock-grid h2:where(.rt-h3){font-size: 19px; letter-spacing: -0.02em; font-weight: 700; margin-bottom: 6px;}
.dir-id h2:where(.rt-h3){font-size: clamp(30px, 3.8vw, 46px); letter-spacing: -0.035em; line-height: 0.98;}
.dir-id h2:where(.rt-h3) a{color: var(--ink);}
.dir-id h2:where(.rt-h3) a:hover{color: var(--blue); text-decoration: none;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.card.card--pair > a.card-frame > img,
  div.article-body > figure.article-figure.inset > img,
  div.article-body > figure.article-figure.wide > img,
  div.feature-media > a.card-frame.lead-frame > img,
  div.gallery.wide > figure > img,
  div.wrap > figure.article-figure.wide > img,
  figure.article-figure.hero-figure.wide > span.frame > img,
  li > a.cl-thumb > img){height:auto}
/* op-img-dims:end */