/* Article page styles, moved out of article_shell.php on 2026-10-30 (text-to-HTML ratio work). */
*{box-sizing:border-box;margin:0;padding:0}
/* Measured against the page ground, not white. The values this replaces were
   chosen for a dark theme and rendered at 1.49:1 here. */
:root{--bg:#0A0D14;--card:#FFFFFF;--raised:#121724;--rule:#232B40;
 --text:#E9EEF8;--body:#C4CFE2;--muted:#8E99B0;--link:#FFC84D;--brand:#F0A500}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{background:var(--bg);color:var(--text);line-height:1.72;font-size:17px;
 font-family:"IBM Plex Sans","IBM Plex Sans Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
 -webkit-font-smoothing:antialiased}
a{color:var(--link)}
img{max-width:100%;display:block;height:auto}
.nav{position:sticky;top:0;z-index:60;background:rgba(250,251,252,.92);
 backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.nav-in{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;
 align-items:center;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;
 letter-spacing:.4px;color:var(--text);text-decoration:none;font-family:Archivo,sans-serif}
.brand b{color:var(--brand)}.brand span{color:var(--text)}
.nav-links{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.nav-links a{color:var(--muted);font-size:13.5px;font-weight:600;text-decoration:none}
.nav-links a:hover{color:var(--text)}
.nav-cta{background:var(--brand);color:#1a1a1a;padding:8px 15px;border-radius:9px;
 font-weight:800;font-size:13.5px;text-decoration:none}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.crumb{font-size:13px;color:var(--muted);padding:26px 0 0}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--text)}
h1{font-family:Archivo,sans-serif;font-size:clamp(29px,4.6vw,44px);line-height:1.14;
 letter-spacing:-.022em;font-weight:800;margin:14px 0 16px;color:var(--text)}
h2{font-family:Archivo,sans-serif;font-size:clamp(21px,2.7vw,28px);line-height:1.22;
 letter-spacing:-.015em;font-weight:800;margin:44px 0 14px;color:var(--text)}
h3{font-family:Archivo,sans-serif;font-size:19px;font-weight:700;margin:30px 0 10px;color:var(--text)}
p{margin:0 0 18px;color:var(--body)}
ul,ol{margin:0 0 18px;padding-left:22px;color:var(--body)}
li{margin:0 0 9px}
blockquote{margin:0 0 18px;padding:12px 18px;border-left:3px solid var(--brand);
 background:var(--raised);border-radius:0 8px 8px 0;color:var(--body)}
pre{background:var(--raised);border:1px solid var(--rule);border-radius:9px;
 padding:14px 16px;overflow-x:auto;margin:0 0 18px;font-size:14px}
code{font-family:"IBM Plex Mono","IBM Plex Mono Fallback",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
/* A five-column table has about 65px a column on a phone, which is either
   unreadable or pushes the whole article sideways. Below 620px the table
   scrolls inside its own box instead: the page stays put and the figures stay
   legible. `display:block` is what makes a table scrollable at all, and the
   cells need nowrap or they simply re-wrap to the narrow width and defeat it. */
@media (max-width:620px){
  article table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  article th,article td{white-space:nowrap}
}
th,td{border:1px solid var(--rule);padding:9px 12px;text-align:left;color:var(--body)}
th{background:var(--raised);color:var(--text);font-weight:700}
figure{margin:0 0 24px}
figure img{border:1px solid var(--rule);border-radius:12px}
figcaption{font-size:13.5px;color:var(--muted);margin-top:9px}
/* Blocks the article bodies use. Same shapes as the originals, with the
   dark-theme colours swapped for measured light ones. */
.lede{font-size:19.5px;color:var(--body);margin-bottom:30px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;
 margin:0 0 26px}
.stat{background:var(--card);border:1px solid var(--rule);border-radius:11px;
 padding:15px 16px}
.stat b{display:block;font-family:Archivo,sans-serif;font-size:24px;font-weight:800;
 color:var(--text);line-height:1.1}
.stat span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px}
.callout{background:var(--raised);border:1px solid var(--rule);
 border-left:3px solid var(--brand);border-radius:0 10px 10px 0;padding:14px 17px;
 margin:0 0 22px;color:var(--body)}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 8px}
.btn{background:var(--brand);color:#1a1a1a;border-radius:9px;padding:10px 18px;
 font-size:13.5px;font-weight:800;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.07);color:#1a1a1a}
.more{border-top:1px solid var(--rule);margin-top:44px;padding-top:24px;
 font-size:14px;color:var(--muted)}
.more a{font-weight:600}
footer.ft{border-top:1px solid var(--rule);margin-top:50px;padding:26px 0 60px;
 font-size:13.5px;color:var(--muted)}
footer.ft a{color:var(--muted);text-decoration:none;margin-right:16px}
footer.ft a:hover{color:var(--link)}