/* CO2Scape guide pages.
   Brand colour comes exclusively from /aso-tokens.css (--brand, --brand-2,
   --brand-ink, --brand-soft, --on-brand). Everything defined here is either a
   neutral surface or a functional indicator colour, meaning a colour that
   stands for a bromothymol blue reading rather than for the brand. */

:root{
  --bg:#0B1F2A;
  --surface:#13303F;
  --surface-2:#16394B;
  --text:#EDF5F8;
  --muted:#9FB8C4;
  --line:rgba(159,184,196,.16);
  --line-soft:rgba(159,184,196,.09);

  /* indicator scale, bromothymol blue */
  --ind-blue:#2E6FA8;
  --ind-bluegreen:#3E9E8F;
  --ind-green:var(--brand-soft);
  --ind-yellowgreen:#C9C24A;
  --ind-yellow:#E8B33A;
  --warn:#E05C4B;

  --accent:var(--brand-soft);
  /* Accent text on a card surface needs a touch more lightness to clear 4.5:1.
     Measured: 4.26:1 unmixed on --surface, 5.23:1 at this mix. */
  --accent-2:color-mix(in srgb, var(--brand-soft) 84%, #FFFFFF);
  --accent-tint:color-mix(in srgb, var(--brand) 12%, transparent);
  --accent-line:color-mix(in srgb, var(--brand) 34%, transparent);

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Helvetica Neue",sans-serif;
  --radius:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-wrap:break-word;
  word-break:break-word;
}
a{color:var(--accent)}
img{max-width:100%}
h1,h2,h3{letter-spacing:-.028em;line-height:1.15;margin:0;overflow-wrap:break-word}
p{margin:0}
.wrap{width:100%;max-width:820px;margin-inline:auto;padding-inline:22px}
.wrap-wide{max-width:1080px}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.head-in{display:flex;align-items:center;gap:16px;height:60px;max-width:1080px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:650;letter-spacing:-.02em;font-size:1rem}
.brand-mark{
  width:19px;height:19px;border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 1px var(--accent-line);
  flex:none;
}
.head-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.head-cta .back{color:var(--muted);text-decoration:none;font-size:.9rem}
.head-cta .back:hover{color:var(--text)}

/* ---------- article ---------- */
main{padding-bottom:20px}
.lead-sec{padding:clamp(34px,6vw,62px) 0 6px}
.kicker{
  display:inline-block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:650;
}
h1{font-size:clamp(1.85rem,5.2vw,2.8rem);font-weight:680;margin-top:14px}
.standfirst{color:var(--muted);font-size:clamp(1rem,2.1vw,1.1rem);margin-top:18px;max-width:64ch}

.art{padding-bottom:clamp(30px,6vw,54px)}
.art h2{font-size:clamp(1.35rem,3.6vw,1.85rem);font-weight:660;margin-top:clamp(38px,6vw,56px);max-width:26ch}
.art h3{font-size:1.06rem;font-weight:640;margin-top:30px}
.art p{margin-top:15px;max-width:68ch}
.art p.muted{color:var(--muted)}
.art ul,.art ol{margin:16px 0 0;padding-left:20px;max-width:66ch;color:var(--text)}
.art li{margin-top:9px}
.art li::marker{color:var(--accent)}

/* ---------- components ---------- */
.callout{
  margin-top:26px;border:1px solid var(--line);border-left:3px solid var(--accent-line);
  border-radius:12px;background:var(--surface);padding:18px 20px;
}
.callout.warn{border-left-color:color-mix(in srgb, var(--warn) 55%, transparent)}
.callout a{color:var(--accent-2)}
.cta a{color:var(--accent-2)}
.callout .ct{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:650}
.callout p{margin-top:8px;max-width:none}

figure{margin:30px 0 0}
figcaption{color:var(--muted);font-size:.85rem;margin-top:10px}

.formula{
  margin-top:26px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);overflow-x:auto;
}
.formula pre{
  margin:0;padding:20px 18px;font-family:var(--mono);
  font-size:clamp(.8rem,2vw,.96rem);line-height:1.95;color:var(--text);white-space:pre;
}
.formula .c{color:var(--muted)}
.formula .k{color:var(--accent-2)}

.tablewrap{margin-top:26px;overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.92rem}
caption{text-align:left;color:var(--muted);font-size:.82rem;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
th,td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:650;background:var(--surface)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{font-family:var(--mono);white-space:nowrap}
td.good{color:var(--accent-2)}
td.bad{color:#F0A79B}

.swatch{display:inline-block;width:13px;height:13px;border-radius:4px;margin-right:9px;vertical-align:-2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.s-blue{background:var(--ind-blue)}
.s-bluegreen{background:var(--ind-bluegreen)}
.s-green{background:var(--ind-green)}
.s-yellowgreen{background:var(--ind-yellowgreen)}
.s-yellow{background:var(--ind-yellow)}

.scale{margin-top:26px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:16px}
.scale-bar{
  height:12px;border-radius:999px;
  background:linear-gradient(90deg,var(--ind-blue),var(--ind-bluegreen) 28%,var(--ind-green) 52%,var(--ind-yellowgreen) 76%,var(--ind-yellow));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.scale-legend{display:flex;justify-content:space-between;gap:8px;margin-top:9px;font-size:.72rem;color:var(--muted)}

.steps{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px;counter-reset:s;max-width:68ch}
.steps li{position:relative;padding-left:40px;counter-increment:s;margin:0}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;font-family:var(--mono);font-size:.78rem;
  color:var(--accent-2);background:var(--accent-tint);border:1px solid var(--accent-line);
}
.steps b{font-weight:620}

/* ---------- download ---------- */
.cta{
  margin-top:clamp(34px,6vw,52px);
  border:1px solid var(--line);border-radius:20px;
  background:var(--surface);
  padding:clamp(24px,4vw,32px);
}
.cta h2{margin-top:0;font-size:clamp(1.2rem,3vw,1.5rem)}
.cta p{color:var(--muted);font-size:.95rem;margin-top:10px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:20px}
.cta-meta{color:var(--muted);font-size:.84rem}
.aso-badge img{display:block}

/* ---------- related ---------- */
.related{margin-top:clamp(34px,6vw,52px);border-top:1px solid var(--line-soft);padding-top:28px}
.related h2{margin-top:0;font-size:1.1rem}
.rel-grid{display:grid;gap:12px;grid-template-columns:1fr;margin-top:18px}
@media (min-width:640px){.rel-grid{grid-template-columns:1fr 1fr}}
.rel-grid a{
  display:block;text-decoration:none;color:var(--text);
  border:1px solid var(--line);border-radius:12px;padding:15px 17px;
  background:var(--surface);transition:border-color .18s ease;
}
.rel-grid a:hover{border-color:var(--accent-line)}
.rel-grid b{display:block;font-weight:620;font-size:.95rem}
.rel-grid span{display:block;color:var(--muted);font-size:.85rem;margin-top:5px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line-soft);margin-top:clamp(44px,8vw,80px);padding:32px 0 44px}
.foot-in{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;max-width:1080px}
.foot-links{display:flex;flex-wrap:wrap;gap:20px;font-size:.9rem}
.foot-links a{color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--accent)}
.foot-meta{color:var(--muted);font-size:.85rem}
.foot-meta b{color:var(--text);font-weight:560}