:root{
  color-scheme: light;
  --ground:#F1F4F4;
  --surface:#FFFFFF;
  --surface-2:#E7ECEC;
  --ink:#0E1B21;
  --ink-2:#455A61;
  --ink-3:#72868C;
  --rule:#D2DBDC;
  --rule-strong:#B4C1C3;
  --source:#eb6834;
  --source-soft:#fbe4d9;
  --ocean:#2a78d6;
  --ocean-soft:#dbe7f8;
  --land:#1baf7a;
  --land-soft:#d7f0e6;
  --atmos:#38474D;
  --atmos-soft:#DCE3E4;
  --bim:#A8853F;

  --heat:#C2385A;
  --shadow:0 1px 2px rgba(14,27,33,.06), 0 8px 24px -12px rgba(14,27,33,.18);
  --maxw:1320px;
  --prose:50rem;
  --nav-h:48px;   /* altezza della barra: usata da scroll-padding, sezioni, slides.js */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#0C161B;
    --surface:#15232A;
    --surface-2:#1D2E36;
    --ink:#E4ECEE;
    --ink-2:#A9BCC1;
    --ink-3:#7C9096;
    --rule:#283A42;
    --rule-strong:#3A5058;
    --source:#d95926;
    --source-soft:#3A2015;
    --ocean:#3987e5;
    --ocean-soft:#152A42;
    --land:#199e70;
    --land-soft:#0F2E26;
    --atmos:#93A5AB;
    --atmos-soft:#243238;
    --bim:#C9A55E;

    --heat:#E8637F;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0C161B;
  --surface:#15232A;
  --surface-2:#1D2E36;
  --ink:#E4ECEE;
  --ink-2:#A9BCC1;
  --ink-3:#7C9096;
  --rule:#283A42;
  --rule-strong:#3A5058;
  --source:#d95926;
  --source-soft:#3A2015;
  --ocean:#3987e5;
  --ocean-soft:#152A42;
  --land:#199e70;
  --land-soft:#0F2E26;
  --atmos:#93A5AB;
  --atmos-soft:#243238;
  --bim:#C9A55E;

  --heat:#E8637F;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Source Serif 4","Iowan Old Style",Georgia,serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.ui{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;}
.mono,td.num,th.num,.fig,.unit{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;height:100%;
  padding:0 20px;
  display:flex;align-items:center;gap:6px;
}
.nav-links{display:flex;align-items:center;gap:6px;height:100%;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.menu-btn{display:none}
.nav-mark{
  font-family:Archivo,sans-serif;font-weight:900;font-stretch:112%;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--source);padding-right:14px;white-space:nowrap;
  border-right:1px solid var(--rule);margin-right:8px;text-decoration:none;
}
.nav a{
  font-family:Archivo,sans-serif;font-size:.78rem;font-weight:600;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
  padding:12px 9px;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--rule-strong)}
.nav a:focus-visible{outline:2px solid var(--source);outline-offset:-4px;border-radius:3px}

/* ---------- shell ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px;padding-block:0 72px;}
.prose{max-width:var(--prose);}
p{margin:0 0 1.05em}
a.ref{color:var(--ink);text-decoration-color:var(--rule-strong);text-underline-offset:3px}

/* ---------- hero ---------- */
.hero{padding-block:64px 40px;border-bottom:1px solid var(--rule);}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 22px;
}
h1{
  font-size:clamp(2.6rem,8.2vw,5.1rem);
  font-weight:900;font-stretch:118%;
  line-height:.92;letter-spacing:-.026em;
  margin:0 0 24px;text-wrap:balance;max-width:13ch;
}
h1 em{font-style:normal;color:var(--source)}
.deck{
  font-size:clamp(1.12rem,2.4vw,1.42rem);line-height:1.46;
  max-width:46rem;color:var(--ink-2);margin:0;
}
.deck b{color:var(--ink);font-weight:600}

/* ---------- key figures ---------- */
.keys{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;margin-top:46px;
  border-top:2px solid var(--ink);
}
.key{padding:18px 16px 4px 0;border-right:1px solid var(--rule);}
.key:last-child{border-right:0}
.key .fig{
  display:block;font-size:clamp(1.5rem,3.6vw,2.15rem);font-weight:600;
  line-height:1.05;letter-spacing:-.02em;
}
.key .unit{display:block;font-size:.68rem;color:var(--ink-3);letter-spacing:.06em;margin-top:4px}
.key .lbl{
  display:block;font-family:Archivo,sans-serif;font-size:.79rem;font-weight:600;
  line-height:1.3;color:var(--ink-2);margin-top:10px;
}
.key.k-src .fig{color:var(--source)}
.key.k-ocean .fig{color:var(--ocean)}
.key.k-land .fig{color:var(--land)}
.key.k-atm .fig{color:var(--atmos)}
.units{font-size:.86rem;color:var(--ink-2);max-width:var(--prose);margin:22px 0 0;line-height:1.55}
.units b{color:var(--ink);font-weight:600}
.units abbr{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
@media(max-width:640px){
  .keys{grid-template-columns:repeat(2,1fr);gap:0}
  .key{border-bottom:1px solid var(--rule);padding-block:14px 12px}
  .key:nth-child(2){border-right:0}
}

/* ---------- sections ---------- */
section{padding-block:34px 0;border-top:1px solid var(--rule);}
section:first-of-type{border-top:0}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.sec-unit{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.1em;
  color:var(--source);background:var(--source-soft);
  padding:3px 8px;border-radius:2px;white-space:nowrap;
}
h2{
  font-size:clamp(1.55rem,4vw,2.3rem);font-weight:800;font-stretch:106%;
  letter-spacing:-.02em;line-height:1.08;margin:0;text-wrap:balance;max-width:34ch;
}
h3{
  font-size:1rem;font-weight:700;letter-spacing:.01em;
  margin:0 0 14px;color:var(--ink);
}
.standfirst{font-size:1.06rem;color:var(--ink-2);max-width:var(--prose);margin:10px 0 20px}

/* ---------- figure shell ---------- */
figure{margin:0 0 20px;background:var(--surface);border:1px solid var(--rule);border-radius:4px;box-shadow:var(--shadow);overflow:hidden}
.fig-head{padding:18px 20px 0}
.fig-title{font-family:Archivo,sans-serif;font-weight:700;font-size:.98rem;margin:0 0 4px}
.fig-sub{font-size:.86rem;color:var(--ink-3);margin:0;line-height:1.45}
.fig-body{padding:18px 20px 20px}
figcaption{
  padding:12px 20px 14px;border-top:1px solid var(--rule);background:var(--surface-2);
  font-size:.82rem;color:var(--ink-2);line-height:1.5;
}
figcaption b{font-weight:600;color:var(--ink)}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroller>svg{display:block;min-width:600px;width:100%;height:auto}

/* ---------- legend ---------- */
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 16px;padding:0;list-style:none}
.legend li{display:flex;align-items:center;gap:7px;font-family:Archivo,sans-serif;font-size:.8rem;color:var(--ink-2)}
.sw{width:13px;height:13px;border-radius:2px;flex:none;display:inline-block}
.sw-source{background:var(--source)}
.sw-luc{background:var(--source-soft);background-image:repeating-linear-gradient(45deg,var(--source) 0 2px,transparent 2px 5px);border:1px solid var(--source)}
.sw-ocean{background:var(--ocean)}
.sw-land{background:var(--land)}
.sw-atmos{background:var(--atmos)}
.sw-bim{background:var(--bim)}
.sw-mlo{background:var(--source)}
.sw-glob{background:var(--atmos)}

/* ---------- html bar charts ---------- */
.bars{display:flex;flex-direction:column;gap:11px;margin:0}
.bar-row{display:grid;grid-template-columns:minmax(92px,148px) 1fr auto;align-items:center;gap:12px}
.bar-lab{font-family:Archivo,sans-serif;font-size:.84rem;font-weight:600;color:var(--ink);line-height:1.25}
.bar-lab small{display:block;font-weight:400;font-size:.74rem;color:var(--ink-3)}
.bar-track{background:var(--surface-2);border-radius:3px;height:22px;position:relative;overflow:hidden}
.bar-fill{height:100%;border-radius:0 3px 3px 0;background:var(--ocean);width:var(--w)}
.bar-val{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:.84rem;font-weight:500;color:var(--ink);min-width:4.6em;text-align:right}
.bar-row.is-muted .bar-fill{background:var(--ink-3)}
.bar-row.is-source .bar-fill{background:var(--source)}
.bar-row.is-land .bar-fill{background:var(--land)}
.bar-row.is-me .bar-fill{background:var(--ink)}
.bar-row.is-me .bar-lab{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:3px}
@media(max-width:560px){
  .bar-row{grid-template-columns:1fr auto;grid-template-areas:"lab val" "track track";gap:4px 10px}
  .bar-lab{grid-area:lab}.bar-val{grid-area:val}.bar-track{grid-area:track;margin-bottom:4px}
}

/* ---------- proportion rows (airborne fraction) ---------- */
.props{display:flex;flex-direction:column;gap:18px}
.prop{display:grid;grid-template-columns:1fr;gap:7px}
.prop-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.prop-name{font-family:Archivo,sans-serif;font-weight:700;font-size:.92rem}
.prop-name span{font-weight:400;color:var(--ink-3);font-size:.8rem}
.prop-out{font-family:"IBM Plex Mono",monospace;font-size:.92rem;font-weight:600}
.prop-out b{font-size:1.15rem;color:var(--source);font-weight:600}
.prop-bar{display:flex;height:30px;border-radius:3px;overflow:hidden;gap:2px;background:var(--surface-2)}
.seg{display:flex;align-items:center;justify-content:center;min-width:0;position:relative}
.seg span{
  font-family:"IBM Plex Mono",monospace;font-size:.73rem;font-weight:600;
  color:var(--ink);white-space:nowrap;padding-inline:4px;
}
.seg-ocean{background:var(--ocean)}
.seg-land{background:var(--land)}
.seg-atmos{background:var(--atmos)}
:root[data-theme="dark"] .seg-atmos span,
.seg-atmos span{color:var(--surface)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .seg-atmos span{color:var(--surface)}}
.prop-key{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--ink-3);font-family:Archivo,sans-serif}

/* ---------- diverging ---------- */
.div-chart{position:relative}
.div-row{display:grid;grid-template-columns:minmax(88px,150px) 1fr auto;align-items:center;gap:12px;margin-bottom:9px}
.div-track{position:relative;height:22px;background:linear-gradient(to right,transparent 0,transparent calc(var(--zero) - 1px),var(--ink-3) calc(var(--zero) - 1px),var(--ink-3) calc(var(--zero) + 1px),transparent var(--zero),transparent 100%)}
.div-bar{position:absolute;top:0;height:100%;border-radius:2px}
.div-bar.pos{left:var(--zero);width:var(--w);background:var(--source)}
.div-bar.neg{right:calc(100% - var(--zero));width:var(--w);background:var(--atmos)}
@media(max-width:560px){
  .div-row{grid-template-columns:1fr auto;grid-template-areas:"lab val" "track track";gap:4px 10px}
  .div-row .bar-lab{grid-area:lab}.div-row .bar-val{grid-area:val}.div-track{grid-area:track;margin-bottom:6px}
}

/* ---------- small multiples ---------- */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule)}
.panel{padding:16px 18px 6px 0;border-right:1px solid var(--rule)}
.panel+.panel{padding-left:18px}
.panel:last-child{border-right:0;padding-right:0}
.panel h3{font-size:.86rem;margin-bottom:3px}
.panel .p-note{font-size:.75rem;color:var(--ink-3);margin:0 0 14px;font-family:Archivo,sans-serif;line-height:1.35}
.panel .bar-row{grid-template-columns:minmax(64px,108px) 1fr auto;gap:8px}
.panel .bars{gap:8px}
.panel .bar-lab small{font-size:.68rem;line-height:1.2}
.bar-val small{font-weight:400;color:var(--ink-3);font-size:.9em;margin-left:.4em}
.bar-val small::before{content:"· "}
.p-share .bar-val{min-width:7.4em}
.panel .bar-lab{font-size:.78rem}
.panel .bar-val{font-size:.76rem;min-width:3.4em}
.panel .bar-track{height:16px}
@media(max-width:820px){
  .panels{grid-template-columns:1fr}
  .panel{border-right:0;border-bottom:1px solid var(--rule);padding-right:0}
  .panel:last-child{border-bottom:0}
}

/* ---------- tables ---------- */
.t-wrap{overflow-x:auto;margin:0 0 26px;border:1px solid var(--rule);border-radius:4px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.88rem;min-width:440px}
caption{text-align:left;padding:14px 16px 10px;font-family:Archivo,sans-serif;font-weight:700;font-size:.92rem;color:var(--ink)}
th,td{padding:9px 16px;text-align:left;border-bottom:1px solid var(--rule)}
thead th{
  font-family:Archivo,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--rule-strong);
  vertical-align:bottom;line-height:1.3;
}
td.num,th.num{text-align:right}
tbody tr:last-child td{border-bottom:0}
tbody tr.total td{font-weight:600;background:var(--surface-2)}
td .dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:baseline}

/* ---------- callout ---------- */
.callout{
  border-left:3px solid var(--source);background:var(--surface);
  padding:16px 20px;margin:0 0 20px;border-radius:0 4px 4px 0;
  box-shadow:var(--shadow);max-width:var(--prose);
}
.callout p:last-child{margin-bottom:0}
.callout .c-lab{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--source);display:block;margin-bottom:7px;
}

/* ---------- fix list ---------- */

/* ---------- timeline ---------- */
.tl{list-style:none;padding:0;margin:10px 0 28px;max-width:var(--prose)}
.prose{margin-bottom:8px}
.tl li{display:grid;grid-template-columns:4.6rem 1fr;gap:16px;padding:0 0 20px;position:relative}
.tl li::before{content:"";position:absolute;left:4.6rem;top:9px;bottom:-2px;width:1px;background:var(--rule);margin-left:-8px}
.tl li:last-child::before{display:none}
.tl .yr{font-family:"IBM Plex Mono",monospace;font-size:.82rem;font-weight:600;color:var(--source);padding-top:1px}
.tl .ev b{display:block;font-family:Archivo,sans-serif;font-size:.92rem;margin-bottom:2px}
.tl .ev small{font-size:.88rem;color:var(--ink-2);line-height:1.5;display:block}

/* ---------- sources ---------- */
.srcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 24px;list-style:none;padding:0;margin:0 0 24px}
.srcs li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:.88rem;line-height:1.5}
.srcs b{display:block;font-family:Archivo,sans-serif;font-size:.86rem}
.srcs span{color:var(--ink-3);font-size:.83rem}
.foot{font-size:.84rem;color:var(--ink-3);max-width:none;border-top:2px solid var(--ink);padding-top:16px}

/* ---------- svg text ---------- */
.svg-lab{font-family:"IBM Plex Mono",monospace;font-size:12px;fill:var(--ink-3)}
.svg-lab-b{font-family:Archivo,sans-serif;font-size:13px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.svg-val{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.svg-unit{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--ink-3)}
.grid-l{stroke:var(--rule);stroke-width:1}
.axis-l{stroke:var(--rule-strong);stroke-width:1}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ========================================================================
   Chrome del sito standalone: reset minimo, toggle tema, footer, stampa.
   Fuori dall'artifact non c'e' piu' lo skeleton dell'host a fornirli.
   ======================================================================== */
img,svg{max-width:100%}
[hidden]{display:none!important}

/* --- toggle tema --- */
.theme-btn{
  margin-left:auto;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;
  background:transparent;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:3px;
  cursor:pointer;transition:color .15s,border-color .15s;
}
.theme-btn:hover{color:var(--ink);border-color:var(--rule-strong)}
.theme-btn:focus-visible{outline:2px solid var(--source);outline-offset:2px}
.theme-btn .ic-moon{display:none}
.theme-btn[aria-pressed="true"] .ic-sun{display:none}
.theme-btn[aria-pressed="true"] .ic-moon{display:inline}

/* --- footer --- */
.site-foot{margin-top:64px;border-top:2px solid var(--ink);padding-block:22px 0}
.sf-in{display:flex;flex-direction:column;gap:8px}
.sf-note{font-size:.86rem;color:var(--ink-2);max-width:var(--prose);margin:0;line-height:1.55}
.sf-meta{font-size:.8rem;color:var(--ink-3);margin:0;font-family:Archivo,sans-serif}
.sf-meta a{color:var(--ink-2);text-decoration-color:var(--rule-strong);text-underline-offset:3px}
.sf-meta a:hover{color:var(--source)}

/* --- stampa: il pezzo e' pensato anche per finire su carta --- */
@media print{
  .nav,.theme-btn{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .wrap{max-width:none;padding:0}
  figure,.t-wrap,.callout{box-shadow:none;border-color:#bbb;break-inside:avoid}
  section{break-before:page;padding-block:24px 0}
  section:first-of-type{break-before:auto}
  .hero{padding-block:0 24px}
  h1{font-size:34pt}
  .scroller{overflow:visible}
  .scroller>svg{min-width:0}
}


/* ---------- nota sulle metriche ---------- */
.note-metric{
  font-size:.86rem;line-height:1.62;color:var(--ink-2);
  max-width:var(--prose);
  border-left:2px solid var(--rule-strong);
  padding:2px 0 2px 14px;
  margin:20px 0 30px;
}
.note-metric b{color:var(--ink)}
.note-metric em{
  font-style:normal;font-family:"IBM Plex Mono",monospace;
  font-size:.93em;color:var(--ink);
}

/* ---------- dato letto in diretta ----------
   A riposo mostra i valori incorporati: la pagina e' corretta anche
   senza JavaScript. live.js sostituisce i numeri e accende il pallino
   solo quando la lettura da NOAA e' andata a buon fine. */
.live{
  border:1px solid var(--rule);
  background:var(--surface);
  border-radius:4px;
  box-shadow:var(--shadow);
  margin:0 0 34px;
  overflow:hidden;
}
.live-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:1px;
  background:var(--rule);
}
.live-cell{
  background:var(--surface);
  padding:15px 18px;
  display:flex;flex-direction:column;gap:4px;
}
.live-k{
  font-family:Archivo,sans-serif;font-size:.71rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.live-v{
  font-family:"IBM Plex Mono",monospace;font-size:.92rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.live-v b{
  font-size:1.52rem;font-weight:600;color:var(--ink);letter-spacing:-.015em;
}
.live-y{font-family:"IBM Plex Mono",monospace;font-size:.73rem;color:var(--ink-3)}
.live-note{
  margin:0;padding:11px 18px;
  border-top:1px solid var(--rule);
  background:var(--surface-2);
  font-family:Archivo,sans-serif;font-size:.78rem;line-height:1.5;
  color:var(--ink-3);
  display:flex;align-items:flex-start;gap:9px;
}
.live-note::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;
  margin-top:.45em;background:var(--bim);
}
.live[data-state="live"] .live-note{color:var(--ink-2)}
.live[data-state="live"] .live-note::before{background:var(--land)}

/* ---------- gli altri gas serra ---------- */
.gases{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  border-radius:4px;
  margin:20px 0 22px;
  overflow:hidden;
}
.gas{
  background:var(--surface);
  padding:14px 16px;
  display:flex;flex-direction:column;gap:4px;
}
.gas-n{
  font-family:Archivo,sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.gas-v{
  font-family:"IBM Plex Mono",monospace;font-size:.88rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.gas-v b{font-size:1.34rem;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.gas-d{font-size:.78rem;color:var(--ink-3);line-height:1.4}

/* ---------- da dove cominciare ----------
   Una sequenza vera: e' l'ordine di lettura suggerito a chi arriva
   senza contesto, non una decorazione numerata. */
.guide{
  border:1px solid var(--rule);
  border-radius:4px;
  background:var(--surface);
  padding:18px 20px 6px;
  margin:0 0 46px;
}
.guide-lab{
  font-family:Archivo,sans-serif;font-size:.75rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 12px;
}
.guide-q{
  counter-reset:g;list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;
}
.guide-q li{counter-increment:g}
.guide-q a{
  display:flex;flex-direction:column;gap:4px;
  padding:12px 14px 14px 40px;position:relative;
  text-decoration:none;color:inherit;border-radius:3px;
  transition:background .14s ease;
}
.guide-q a::before{
  content:counter(g);position:absolute;left:12px;top:13px;
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:600;
  color:var(--source);background:var(--source-soft);
  width:19px;height:19px;display:grid;place-items:center;border-radius:2px;
}
.guide-q a:hover,.guide-q a:focus-visible{background:var(--surface-2)}
.guide-q b{font-size:.94rem;font-weight:600;line-height:1.35;color:var(--ink)}
.guide-q span{font-size:.82rem;line-height:1.45;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.guide-q a{transition:none}}
/* meta' dei valori letti in diretta e meta' di riserva: uno stato a se',
   perche' il verde direbbe che e' tutto fresco e l'ocra che non lo e' niente */
.live[data-state="partial"] .live-note{color:var(--ink-2)}
.live[data-state="partial"] .live-note::before{background:var(--ocean)}
.sw-cf{background:transparent;border:1.5px dashed var(--atmos)}
.sw-gap{background:var(--land);opacity:.32}

/* ---------- registro delle revisioni ---------- */
.revlog{list-style:none;padding:0;margin:14px 0 26px;
  display:flex;flex-direction:column;gap:14px;max-width:var(--prose)}
.revlog li{display:flex;gap:14px;align-items:flex-start}
.revlog .rev-d{
  flex:none;width:6.6rem;padding-top:2px;
  font-family:"IBM Plex Mono",monospace;font-size:.71rem;
  color:var(--ink-3);letter-spacing:.02em;
}
.revlog div{font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.revlog b{color:var(--ink);font-weight:600}
@media(max-width:560px){
  .revlog li{flex-direction:column;gap:3px}
  .revlog .rev-d{width:auto}
}


/* ---------- slide: una sezione per schermata ----------
   La pagina resta un documento scorrevole (accessibile, stampabile, con
   ancore), ma ogni sezione occupa almeno una schermata e si aggancia in
   alto: cosi' le frecce, a schermo o su tastiera, la sfogliano come slide. */
html{scroll-padding-top:var(--nav-h)}
.hero,section{min-height:calc(100svh - var(--nav-h));box-sizing:border-box}
/* i grafici non crescono oltre due terzi dello schermo: su un portatile
   una figura da sola non deve occupare l'intera schermata */
.fig-body .scroller svg{max-height:min(46svh,460px)}
.deck-page{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-3);padding:0 8px;border-left:1px solid var(--rule)}
@media (max-width:640px){.deck-page{display:none}}
section{padding-bottom:40px}
body{padding-bottom:64px}

/* la prosa su due colonne quando c'e' spazio: riempie la larghezza senza
   allungare la riga oltre la misura leggibile */
@media (min-width:1000px){
  .prose{max-width:none;columns:2 26rem;column-gap:56px}
  .prose p,.prose h3,.prose ul,.prose ol{break-inside:avoid}
  .prose h3{break-after:avoid;margin-top:0}
  .prose h3:not(:first-child){margin-top:1.1em}
  .prose.one{columns:1}
}

/* pillola e barra di avanzamento sono fissi e cambiano mentre si scorre:
   con un layer proprio (will-change) ridipingono solo se stessi, altrimenti
   ogni cambio ridipinge l'intero documento e lo scorrimento va a scatti */
.progress{position:fixed;left:0;top:var(--nav-h);height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--source);z-index:60;transition:transform .25s ease;will-change:transform}
.deck-nav{
  position:fixed;right:20px;bottom:18px;z-index:60;will-change:transform;contain:layout paint;
  display:flex;align-items:center;gap:4px;
  padding:5px 6px;border-radius:999px;
  background:color-mix(in srgb, var(--surface) 97%, transparent);
  border:1px solid var(--rule-strong);box-shadow:var(--shadow);
  font-family:Archivo,sans-serif;
}
.deck-nav button{
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:transparent;color:var(--ink);display:grid;place-items:center;
}
.deck-nav button:hover{background:var(--surface-2)}
.deck-nav button:focus-visible{outline:2px solid var(--source);outline-offset:1px}
.deck-nav button[disabled]{opacity:.3;cursor:default}
.deck-nav svg{width:16px;height:16px}
.deck-pos{
  min-width:5.5ch;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:.78rem;
  color:var(--ink-2);font-variant-numeric:tabular-nums;padding:0 4px;
}
.deck-title{font-size:.78rem;font-weight:600;color:var(--ink);max-width:22ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;padding:0 8px 0 4px;border-left:1px solid var(--rule);margin-left:4px}
.deck-hint{font-size:.72rem;color:var(--ink-3);padding:0 8px;border-left:1px solid var(--rule)}
@media (max-width:640px){
  .deck-title,.deck-hint{display:none}
}
@media (prefers-reduced-motion:reduce){.progress{transition:none}}
@media print{.deck-nav,.progress{display:none}.hero,section{min-height:0}}


/* ---------- legenda del pallino ---------- */
.live-legend{font-size:.76rem;color:var(--ink-3);margin:6px 0 0;padding-left:20px}
.lg{white-space:nowrap}
.lg::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:1px}
.lg-live::before{background:var(--land)}.lg-partial::before{background:var(--ocean)}.lg-baked::before{background:var(--bim)}

/* ---------- blocchi a scomparsa ---------- */
details.more{border:1px solid var(--rule);border-radius:4px;background:var(--surface);margin:0 0 14px;max-width:none}
details.more summary{cursor:pointer;padding:12px 16px;font-family:Archivo,sans-serif;font-weight:600;font-size:.92rem;color:var(--ink);list-style:none;display:flex;align-items:center;gap:10px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"";width:7px;height:7px;border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);transform:rotate(-45deg);transition:transform .15s;flex:none}
details.more[open] summary::before{transform:rotate(45deg)}
details.more > :not(summary){margin-left:16px;margin-right:16px}
details.more > .t-wrap{margin:0 16px 16px;border:0}
details.more > p{margin-top:0}
details.more > .gases{margin-top:4px}
details.more > :last-child{margin-bottom:16px}
.prose details.more{break-inside:avoid}

/* ---------- sintesi ---------- */
.takeaways{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:12px;counter-reset:t}
.takeaways li{counter-increment:t;display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:16px 18px;font-size:1rem;line-height:1.5;color:var(--ink-2)}
.takeaways li::before{content:counter(t);flex:none;width:30px;font-family:"IBM Plex Mono",monospace;font-size:1.5rem;font-weight:600;color:var(--source);line-height:1}
.takeaways b{color:var(--ink);font-weight:600}
@media (min-width:1000px){.takeaways{grid-template-columns:1fr 1fr}.takeaways li:last-child{grid-column:1/-1}}

/* la slide fonti: titoli e registro non si separano fra le colonne */
.revbox{break-inside:avoid}


/* ---------- slide a due colonne ----------
   Sopra i 1100px la figura sta a sinistra e il testo di accompagnamento
   (riquadro dati, callout) a destra: la sezione entra in una schermata e
   la meta' destra della pagina non resta vuota. Sotto, tutto in colonna. */
.slide-side{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}
.slide-side>*{margin:0}
.slide-side .callout{max-width:none}
@media (min-width:1100px){
  .slide{
    display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:24px;
    grid-template-areas:"head head" "lead lead" "main side" "more more";
    align-content:start;
  }
  section{padding-block:28px 28px}
  .standfirst{margin-bottom:16px;max-width:56rem}
  .slide>.sec-head{grid-area:head}
  .slide>.standfirst{grid-area:lead}
  .slide>.slide-main{grid-area:main;min-width:0}
  .slide>.slide-side{grid-area:side;min-width:0;margin-bottom:0}
  .slide>details.more{grid-area:more;margin-top:14px}
  .slide-main>figure{margin-bottom:0}
  .slide-main>figure:not(:last-child){margin-bottom:16px}
  .slide-side .live-grid{grid-template-columns:1fr}
  .slide-side .live-cell{padding:12px 18px}
  .slide-side .live-note{font-size:.74rem;padding:9px 18px}
  .slide-side .live-legend{font-size:.72rem;padding:0 18px 9px}
  .slide-side .lg-intro{display:none}
  .slide-side .live-v b{font-size:1.4rem}
  .slide-side .callout{padding:14px 18px 16px}
  .slide-side .callout p{font-size:.95rem;line-height:1.55}
  .slide-side .callout p+p{margin-top:.6em}
  /* le figure con grafico riempiono la colonna; il limite in altezza resta */
  .slide-main .scroller>svg{min-width:0}
  /* sintesi: cinque punti su due colonne a sinistra, l'agenda a destra */
  .slide .takeaways{margin-bottom:0}
  .slide .takeaways li{font-size:1rem;padding:16px 18px}
  .slide .takeaways li::before{font-size:1.35rem;width:26px}
}

/* dentro Approfondisci: cronologia e riquadro affiancati quando c'e' spazio */
@media (min-width:1100px){
  .two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px 32px;align-items:start}
  .two>.tl{margin-bottom:8px}
  .two>.callout{max-width:none}
}

/* ---------- hero a due colonne ----------
   Titolo e sommario a sinistra, le quattro cifre in un riquadro a destra. */
@media (min-width:1100px){
  .hero{
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    column-gap:56px;align-items:center;padding-block:44px 36px;
  }
  .hero-lead{grid-column:1}
  .hero .keys{
    grid-column:2;grid-template-columns:1fr 1fr;margin-top:0;
    border:1px solid var(--rule);border-top:1px solid var(--rule);border-radius:4px;
    background:var(--rule);gap:1px;overflow:hidden;box-shadow:var(--shadow);
  }
  .hero .key{background:var(--surface);padding:20px 20px 18px;border-right:0}
  .hero .key .lbl{max-width:none}
  .hero .guide{grid-column:1/-1;margin:36px 0 0}
  .hero .units{margin-top:18px}
}

/* schermi bassi (portatili 768px): stessa griglia, meno aria */
@media (min-width:1100px) and (max-height:820px){
  section{padding-block:20px 20px}
  .sec-head{margin-bottom:4px}
  h2{font-size:1.85rem}
  .standfirst{font-size:1rem;margin:6px 0 12px}
  .fig-head{padding:14px 18px 0}
  .fig-title{font-size:.94rem;margin-bottom:2px}
  .fig-sub{font-size:.82rem}
  .fig-body{padding:12px 18px 12px}
  figcaption{padding:10px 18px 11px;font-size:.77rem;line-height:1.45}
  .standfirst{max-width:64rem}
  .legend{margin-bottom:10px}
  .fig-body .scroller svg{max-height:min(41svh,460px)}
  .slide-side .live-cell{padding:9px 16px;gap:2px}
  .slide-side .live-v b{font-size:1.28rem}
  .slide-side .callout{padding:12px 16px 14px}
  .slide-side .callout p{font-size:.92rem;line-height:1.5}
  details.more summary{padding:9px 16px;font-size:.88rem}
  .slide>details.more{margin-top:10px}
  .panel{padding-top:12px}
  .panel .bars{gap:6px}
  .panel .bar-track{height:14px}
  .hero{padding-block:28px 24px}
  .hero h1{font-size:clamp(2.6rem,6.5vw,4.2rem);margin-bottom:16px}
  .hero .guide{margin-top:24px}
  .takeaways{gap:10px}
  .slide .takeaways li{font-size:.95rem;padding:13px 16px}
}


/* blocchi che esistono solo per il telefono o solo per il desktop */
.m-only{display:none}
.fs-btn{display:none}

/* ---------- telefono in verticale ----------
   I grafici sono disegnati su 880 unita': sotto i 640px scorrono in
   orizzontale, ma con testi piu' grandi (la scala li rimpicciolisce) e un
   avviso sotto. Meno aria fra i blocchi, corpi un gradino piu' piccoli. */
@media (max-width:640px){
  .wrap{padding-inline:16px}
  .hero{padding-block:40px 24px}
  .eyebrow{font-size:.66rem;letter-spacing:.12em;margin-bottom:16px}
  .eyebrow .eb-sub{display:none}
  h1{margin-bottom:18px}
  .deck{line-height:1.42}
  .keys{margin-top:30px}
  .units{font-size:.82rem;margin-top:18px}
  .guide{margin:24px 0 0;padding:16px 14px 4px}
  .guide-q a{padding:10px 12px 12px 36px}
  .guide-q a::before{left:10px;top:11px}
  section{padding-block:28px 28px}
  .sec-head{gap:10px;margin-bottom:6px}
  .standfirst{font-size:1rem;margin:8px 0 16px}
  figure{margin-bottom:16px}
  .fig-head{padding:14px 16px 0}
  .fig-title{font-size:.95rem}
  .fig-sub{font-size:.82rem}
  .fig-body{padding:12px 16px 12px}
  figcaption{padding:10px 16px 12px;font-size:.8rem}
  .legend{gap:6px 14px;margin-bottom:12px}
  /* i grafici sono ridisegnati su 460 unita' da charts.js: niente scorrimento */
  .scroller>svg{min-width:0}
  .fig-body .scroller svg{max-height:none}
  .svg-lab,.svg-unit{font-size:13px}
  .svg-lab-b,.svg-val{font-size:14px}
  .live{margin-bottom:16px}
  .live-cell{padding:12px 16px}
  .live-v b{font-size:1.4rem}
  .live-y{font-size:.78rem}
  .live-note{padding:10px 16px;font-size:.75rem}
  .live-legend{display:none}   /* la nota ha gia' il pallino: la legenda e' sul desktop */
  .m-only{display:block}
  .d-only{display:none}
  .prose p{font-size:.95rem;line-height:1.55}
  /* sottotitolo del grafico: prima frase in vista, il resto sotto «Come leggerlo» */
  .fig-sub .fs-more{display:none}
  .fig-sub.is-open .fs-more{display:inline}
  .fs-btn{
    display:inline-block;margin-left:.35em;padding:0;border:0;background:none;cursor:pointer;
    font-family:Archivo,sans-serif;font-size:.78rem;font-weight:600;color:var(--source);
  }
  .fs-btn::after{content:" +"}
  .fig-sub.is-open .fs-btn::after{content:" −"}
  /* barra in alto: marchio a sinistra, tema e menu a destra, voci in un
     pannello a tendina; sfondo sfocato; sparisce scorrendo in giu' */
  .nav{
    background:color-mix(in srgb, var(--ground) 78%, transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transition:transform .25s ease;will-change:transform;
  }
  .nav.nav-hidden{transform:translateY(-100%)}
  .nav.nav-hidden ~ .progress{top:0}
  .nav-in{padding:0 10px 0 16px;gap:4px}
  .nav-mark{font-size:.78rem;border-right:0;padding-right:0;margin-right:auto}
  .theme-btn{margin-left:0}
  .menu-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;padding:0;margin-left:4px;
    background:transparent;color:var(--ink-2);border:1px solid var(--rule);border-radius:3px;cursor:pointer;
  }
  .theme-btn{width:36px;height:36px}
  .menu-btn .ic-close{display:none}
  .nav.is-open .menu-btn .ic-burger{display:none}
  .nav.is-open .menu-btn .ic-close{display:inline}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;height:auto;
    flex-direction:column;align-items:stretch;gap:0;padding:4px 0 8px;overflow:visible;
    background:color-mix(in srgb, var(--ground) 96%, transparent);
    border-bottom:1px solid var(--rule);box-shadow:var(--shadow);
  }
  .nav.is-open .nav-links{display:flex}
  .nav-links a{padding:12px 20px;font-size:.95rem;border-bottom:0;border-left:3px solid transparent}
  .nav-links a[aria-current="true"]{border-left-color:var(--source);color:var(--ink)}
  /* comandi delle slide: piccoli, in basso a destra, spariscono mentre si scorre */
  .deck-nav{right:10px;bottom:10px;transform:none;padding:3px 4px;transition:opacity .2s}
  .deck-nav button{width:32px;height:32px}
  .deck-pos{font-size:.72rem;min-width:4.6ch}
  .deck-nav.is-scrolling{opacity:0;pointer-events:none}
  body{padding-bottom:72px}
  .callout{padding:14px 16px;margin-bottom:16px}
  .callout p{font-size:.97rem;line-height:1.55}
  .slide-side{gap:14px;margin-bottom:16px}
  details.more summary{padding:11px 14px;font-size:.88rem}
  .takeaways{gap:10px}
  .takeaways li{padding:13px 14px;font-size:.95rem;gap:10px}
  .takeaways li::before{font-size:1.3rem;width:24px}
  .srcs li{padding:10px 0}
  .foot{font-size:.8rem}
}
@media (max-width:560px){
  /* barre: righe piu' strette; etichetta, barra e valore su una riga sola;
     nel pannello «Nel 2024» la quota va sotto il valore */
  .p-share .bar-row{grid-template-columns:minmax(84px,100px) 1fr auto;grid-template-areas:"lab track val";gap:8px}
  .p-share .bar-track{margin-bottom:0}
  .p-share .bar-val small{display:block;margin-left:0;line-height:1.2}
  .p-share .bar-val small::before{content:""}
  .bars{gap:8px}
  .bar-row{gap:2px 10px}
  .bar-track{height:14px;margin-bottom:2px}
  .bar-lab{font-size:.82rem}
  .bar-val{font-size:.8rem}
  .panel{padding:14px 0 4px}
  .panel .bars{gap:6px}
  .panel .bar-track{height:12px}
  .panel .p-note{margin-bottom:10px}
  .panel:not(.p-share) .bar-row{grid-template-columns:minmax(72px,96px) 1fr auto;grid-template-areas:"lab track val";gap:8px}
  .panel:not(.p-share) .bar-track{margin-bottom:0}
  .div-row{gap:2px 10px;margin-bottom:8px}
  .div-track{height:14px;margin-bottom:2px}
  .p-share .bar-val{min-width:0}
}