/* Grok SI News: black, silver, emerald */
:root{--black:#000;--ink:#0d1117;--muted:#5b6470;--line:#e6e8eb;--bg:#fff;--soft:#f4f6f6;--silver:#c9ced3;--silver2:#8e959c;
--emerald:#00BA88;--teal:#0b3d33;--accent:#00BA88;--warn:#b45309;--radius:12px;
--font:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--serif:Merriweather,Georgia,"Times New Roman",serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-size:93.75%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px}
a{color:inherit;text-decoration:none}a:hover{color:var(--emerald)}
img{max-width:100%;height:auto;display:block}picture{display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}.wrap-mid{max-width:900px;margin:0 auto;padding:0 20px}.wrap-narrow{max-width:740px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.preview-ribbon{background:repeating-linear-gradient(45deg,#fde68a,#fde68a 14px,#fcd34d 14px,#fcd34d 28px);color:#3b2a00;text-align:center;font-size:.95rem;padding:7px 12px;font-weight:500}
/* header */
.site-header{background:var(--black);color:#fff;position:sticky;top:0;z-index:30}
.topbar{display:flex;align-items:center;gap:18px;padding:8px 32px;max-width:1280px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;color:#fff}.logo:hover{color:#fff}
.logo-img{height:52px;width:auto}
.logo-mark-img{height:52px;width:52px}
/* header order: 77C-4 robot mark first, then the logo32 wordmark */
.logo .logo-mark{margin-right:2px}
.wordmark{font:800 1.45rem/1 var(--display);letter-spacing:.02em;background:linear-gradient(180deg,#fff 0%,#d9dde1 45%,#9aa1a8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.wordmark b{background:none;-webkit-text-fill-color:#00BA88;color:#00BA88}
.header-cta{margin-left:auto}
.btn{display:inline-block;background:var(--emerald);color:#04140f;border:0;border-radius:8px;padding:14px 22px;font:700 1rem var(--font);cursor:pointer}
.btn:hover{background:#19d3a0;color:#04140f}.btn-small{padding:9px 16px;font-size:.95rem}
.nav-toggle{display:none;margin-left:auto;background:#111;color:#fff;border:1px solid #333;border-radius:8px;padding:6px 12px;font:inherit;font-size:.9rem}
.site-nav{border-top:1px solid #1d1d1d;background:#050505}
.site-nav-list{display:flex;justify-content:space-between;gap:4px;list-style:none;margin:0 auto;padding:7px 20px;max-width:1280px;overflow-x:auto;scrollbar-width:none}
.site-nav-list a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;color:var(--silver);font-size:.95rem;font-weight:600;white-space:nowrap}
.site-nav-list a:hover{background:#111;color:#fff}
.nav-ico img{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px #333}
body.is-section .site-nav-list a[data-sec],body.is-article .site-nav-list a[data-sec]{opacity:.85}
/* hero (option 5) */
.hero{background:linear-gradient(180deg,#000 0%,var(--teal) 100%);color:#fff;text-align:center}
.hero-inner{padding:64px 20px 60px;max-width:860px;margin:0 auto}
.hero h1{font:800 clamp(2.15rem,5.4vw,3.15rem)/1.12 var(--display);margin:0 0 14px;letter-spacing:-.01em}
.hero-sub{font-size:1.22rem;color:#cfe;margin:0 0 22px}.hero-fine{font-size:.82rem;color:#9fc9bc;margin-top:12px}
.signup{display:flex;flex-wrap:wrap;justify-content:center}
.signup input:focus-visible{outline:3px solid #5fffd0}
.form-msg{flex-basis:100%;margin:8px 0 0;font-size:.9rem;min-height:1.2em;color:#fde68a}
/* briefing rows */
.briefing h2,.sections-overview h2,.section-page h2,.related h2{font:800 1.5rem var(--display);margin:34px 0 8px}
.row{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid #eee}
.row-thumb{flex:none;width:120px;height:80px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,var(--teal),var(--emerald));box-shadow:inset 0 -3px 0 var(--accent)}
.row-thumb img{width:120px;height:80px;object-fit:cover;object-position:50% 50%;background:#0a0a0a}
.row-body{min-width:0}.row h3{font-size:1.06rem;line-height:1.3;margin:2px 0 4px;font-weight:800}
.row-meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.kicker{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink)}
.kicker::after{content:"";display:block;width:14px;height:3px;border-radius:2px;background:var(--accent)}
.kicker-ico img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.summary{color:#555;margin:0 0 4px;font-size:.96rem}.meta{font-size:.8rem;color:var(--muted);margin:0}
.badge{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:999px;vertical-align:middle;text-transform:uppercase}

.badge-feature{background:#111;color:var(--silver);border:1px solid #444}
.empty{color:var(--muted)}
/* section tiles */
.sections-overview{max-width:1000px}
.sec-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:16px 0 56px}
.sec-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 12px 18px;border-radius:var(--radius);background:#0a0a0a;color:#fff;font-weight:700;font-size:1rem;text-align:center;border:1px solid #1e1e1e;box-shadow:inset 0 -3px 0 var(--accent);transition:transform .15s}
.sec-tile:hover{color:#fff;transform:translateY(-2px)}.sec-tile img{width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:50% 50%;background:#0a0a0a;box-shadow:0 0 0 3px var(--accent)}
/* section identity hero */
.sec-hero{background:radial-gradient(700px 300px at 15% 0,color-mix(in srgb,var(--accent) 35%,transparent),transparent 70%),linear-gradient(180deg,#000,var(--teal));color:#fff}
.sec-hero-inner{display:flex;align-items:center;gap:28px;padding:40px 20px}
.sec-badge img{width:184px;height:184px;border-radius:50%;object-fit:cover;object-position:50% 50%;background:#0a0a0a;box-shadow:0 0 0 4px var(--accent),0 10px 40px rgba(0,0,0,.6)}
.sec-hero .eyebrow{margin:0 0 4px;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
.sec-title{font:800 clamp(2rem,5vw,3.2rem)/1.05 var(--display);margin:0;color:#fff}
.sec-title a{color:#fff}.sec-blurb{color:#cfe;margin:8px 0 0;font-size:1.08rem}
.sec-hero-small .sec-hero-inner{padding:18px 20px;gap:16px;max-width:740px}
.sec-hero-small .sec-badge img{width:72px;height:72px;box-shadow:0 0 0 3px var(--accent)}
.sec-hero-small .sec-title{font-size:1.6rem}
/* article */
.article{padding-top:30px;padding-bottom:30px}
.article h1{font:800 clamp(1.9rem,4.4vw,2.7rem)/1.15 var(--display);letter-spacing:-.01em;margin:6px 0 12px}
.dek{font-size:1.2rem;color:var(--muted);margin:0 0 12px}.byline{font-size:.9rem;color:var(--muted)}
.prose{font-family:var(--serif);font-size:1.1rem;line-height:1.8}.prose h2{font:800 1.35rem var(--display);margin-top:1.8em}
.prose a{color:#00876a;text-decoration:underline}
.prose blockquote{border-left:4px solid var(--accent);margin:1.5em 0;padding:.2em 1.2em;color:#333;background:var(--soft)}


.art-figure{margin:22px 0;text-align:center}.art-figure img{margin:0 auto;border-radius:12px;width:320px;height:320px;object-fit:contain;background:#0a0a0a}
.art-figure figcaption{font-size:.82rem;color:var(--muted);margin-top:6px}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0;font-size:.9rem}.share span{color:var(--muted);font-weight:700;margin-right:4px}
.share-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font:600 .86rem var(--font);color:var(--ink);cursor:pointer}
.share-fb:hover{background:#1877f2;color:#fff;border-color:#1877f2}.share-x:hover{background:#000;color:#fff;border-color:#000}.share-copy:hover{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.sources{border-top:1px solid var(--line);margin-top:30px;font-size:.93rem}.sources h2{font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.sources a{color:#00876a}
.inline-signup{background:linear-gradient(180deg,#000,var(--teal));color:#fff;border-radius:var(--radius);padding:26px;margin-top:34px;text-align:center}
.inline-signup h2{margin:0 0 4px;font:800 1.35rem var(--display)}.inline-signup p{color:#cfe;margin:0 0 14px}
.related{padding-bottom:40px}.section-page{padding-bottom:50px}
.page .prose a{color:#00876a}
/* footer */
.site-footer{background:#000;color:var(--silver);margin-top:30px}
.footer-logo{display:inline-block}.footer-logo img{width:220px;height:auto;border-radius:10px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1.6fr 1fr;gap:28px;padding-top:36px}
.footer-nav{list-style:none;padding:0;margin:0;columns:2}.footer-grid div:last-child .footer-nav{columns:1}
.footer-nav li{margin:3px 0;break-inside:avoid}.footer-nav a{display:flex;align-items:center;gap:7px;font-size:.9rem}.footer-nav a:hover{color:#fff}
.footer-nav .nav-ico img{width:24px;height:24px;border-radius:50%}
.footer-grid h4{margin:0 0 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--silver2)}
.small-muted{font-size:.85rem;color:var(--silver2)}.small{font-size:.8rem;color:var(--silver2);padding-top:18px;padding-bottom:26px}
@media (max-width:1000px) and (min-width:761px){.sec-tiles{gap:12px}.sec-tile img{width:96px;height:96px}.sec-tile{font-size:.92rem}}
@media (max-width:760px){
 .topbar{padding:10px 16px}.wordmark{font-size:1.15rem}.logo-img{height:42px}.logo-mark-img{height:38px;width:38px}.logo{gap:6px}
 .header-cta{display:none}.nav-toggle{display:block}
 .site-nav{display:none}.site-nav.open{display:block}
 .site-nav-list{flex-direction:column;justify-content:flex-start;padding:6px 12px}
 .row-thumb,.row-thumb img{width:96px;height:72px}
 .sec-tiles{grid-template-columns:repeat(2,1fr);gap:12px}.sec-tile img{width:110px;height:110px}
 .sec-hero-inner{gap:16px;padding:26px 20px}.sec-badge img{width:110px;height:110px}
 .footer-grid{grid-template-columns:1fr}.footer-logo img{width:170px}.hero-inner{padding:44px 18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* ---- themes: DARK is the default (no OS preference used); [data-theme="light"] = white background ---- */
:root,[data-theme="dark"]{color-scheme:dark;--bg:#1c1d1f;--text:#c9ccd1;--heading:#f1f3f5;--ink:#e6e8eb;--muted:#a3a9b0;--summary:#b4b9bf;--line:#34373b;
--surface:#26282b;--link:#00BA88;--link-hover:#5fffd0;--quote:#d5d8dc;--strong:#e6e8eb;
--share-bg:#26282b;--share-fg:#e6e8eb;--share-border:#00BA88;--share-hover-bg:#00BA88;--share-hover-fg:#04140f;

--tile-bg:#0e0f10;--tile-border:#2b2d31;--warn:#fbbf24;--input-border:#3a3d42;--toggle-fg:#c9ced3}
[data-theme="light"]{color-scheme:light;--bg:#ffffff;--text:#1f2328;--heading:#0d1117;--ink:#0d1117;--muted:#5b6470;--summary:#4b5158;--line:#e6e8eb;
--surface:#f4f6f6;--link:#00785e;--link-hover:#00543f;--quote:#333333;--strong:#0d1117;
--share-bg:#ffffff;--share-fg:#0d1117;--share-border:#c9ced3;--share-hover-bg:#00785e;--share-hover-fg:#ffffff;

--tile-bg:#0a0a0a;--tile-border:#1e1e1e;--warn:#b45309;--input-border:#cfd5da;--toggle-fg:#c9ced3}
body{background:var(--bg);color:var(--text)}
main{background:var(--bg)}
.article h1,.prose h2,.prose h3,.related h2,.briefing h2,.sections-overview h2,.section-page h2,.row h3 a,.page h1{color:var(--heading)}
.row h3 a:hover{color:var(--link)}
.dek,.byline,.meta,.art-figure figcaption,.empty,.share span,.sources h2{color:var(--muted)}
.summary{color:var(--summary)}.kicker{color:var(--ink)}
.prose{color:var(--text)}.prose strong{color:var(--strong)}
.prose a,.sources a,.page .prose a{color:var(--link)}
.prose a:hover,.sources a:hover{color:var(--link-hover)}
.prose blockquote{background:var(--surface);color:var(--quote);border-left-color:var(--accent)}
.row,.sources{border-color:var(--line)}
.share-btn{background:var(--share-bg);color:var(--share-fg);border-color:var(--share-border)}
.share-fb:hover,.share-x:hover,.share-copy:hover,.share-btn:hover{background:var(--share-hover-bg);color:var(--share-hover-fg);border-color:var(--share-hover-bg)}

.sec-tile{background:var(--tile-bg);border-color:var(--tile-border)}
.site-footer{margin-top:0}
/* theme toggle (header is black in both themes, so the logo32 artwork always sits on black) */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:auto;border-radius:999px;border:1px solid #3a3d42;background:#111214;color:var(--toggle-fg);cursor:pointer;padding:0}
.theme-toggle:hover{color:#fff;border-color:#00BA88}.theme-toggle:focus-visible{outline:3px solid #5fffd0;outline-offset:2px}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .ico-sun{display:none}[data-theme="light"] .theme-toggle .ico-sun{display:block}[data-theme="light"] .theme-toggle .ico-moon{display:none}
.theme-toggle+.nav-toggle{margin-left:8px}.theme-toggle~.header-cta{margin-left:10px}
@media (max-width:760px){.theme-toggle{width:36px;height:36px}}
/* header signup modal */
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.66);display:flex;align-items:center;justify-content:center;padding:16px}
.modal-backdrop[hidden]{display:none}
.modal{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;background:#141517;color:#c9ccd1;border:1px solid #2b2d31;border-top:3px solid #00BA88;border-radius:14px;padding:26px 24px 20px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal h2{margin:0 0 4px;font:800 1.45rem var(--display);color:#f1f3f5}.modal-sub{margin:0 0 16px;color:#a3a9b0;font-size:.95rem}
.modal-close{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:999px;border:1px solid #3a3d42;background:#1c1d1f;color:#e6e8eb;font-size:1.4rem;line-height:1;cursor:pointer}
.modal-close:hover{border-color:#00BA88;color:#fff}.modal-close:focus-visible,.modal input:focus-visible,.modal .btn:focus-visible{outline:3px solid #5fffd0;outline-offset:2px}
.field-label{display:block;font-size:.85rem;font-weight:700;color:#e6e8eb;margin:0 0 6px}
.modal input[type=email],.modal input[type=tel]{width:100%;padding:12px 14px;border:1px solid #3a3d42;border-radius:8px;background:#fff;color:#0d1117;font:inherit;font-size:1rem;margin-bottom:12px}
.check{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#e6e8eb;margin:2px 0 12px;cursor:pointer}.check input{width:18px;height:18px;accent-color:#00BA88}
.sms-fields[hidden]{display:none}.consent{font-size:.78rem;line-height:1.45;color:#a3a9b0;margin:0 0 14px}
.modal-submit{width:100%}.modal-msg{color:#fbbf24}.form-msg.ok{color:#5fe8bf}
body.modal-open{overflow:hidden}
@media (max-width:760px){.header-cta{display:inline-block}.topbar .header-cta{padding:7px 10px;font-size:.85rem}}
@media (max-width:760px){.topbar{gap:8px}.topbar .header-cta{white-space:nowrap;padding:7px 9px;font-size:.8rem}.logo-mark-img{height:32px;width:32px}.logo-img{height:38px}.theme-toggle{width:34px;height:34px}.nav-toggle{padding:6px 9px;font-size:.85rem}}
/* hero + article-inline signup: email row, then the optional SMS opt-in (both sit on dark bands) */
.signup{flex-direction:column;align-items:center}
.signup-row{display:flex;flex-wrap:wrap;justify-content:center;width:100%}
.signup-row input{flex:0 1 320px;min-width:0;padding:14px;border:0;border-radius:8px 0 0 8px;font:inherit;font-size:.95rem;background:#fff;color:#0d1117}
.signup-row .btn{border-radius:0 8px 8px 0}
.signup-extra{width:100%;max-width:470px;margin:12px auto 0;text-align:left}
.signup .check{justify-content:center;color:#e6f5ef;margin:0}
.signup .sms-fields{margin-top:10px}.signup .field-label{color:#e6f5ef}
.signup .sms-phone{width:100%;padding:12px 14px;border:0;border-radius:8px;background:#fff;color:#0d1117;font:inherit;font-size:1rem;margin-bottom:8px}
.signup .consent{color:#b9d9cf}.consent a{color:#5fe8bf;text-decoration:underline}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup .form-msg{text-align:center}
@media (max-width:760px){.signup-row input{flex-basis:100%;border-radius:8px;margin-bottom:8px}.signup-row .btn{border-radius:8px;width:100%}}
/* follow buttons (X now; Facebook appears only when FACEBOOK_URL is set in build.py) */
.follow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.follow-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#000;color:#e6e8eb;border:1px solid #00BA88;font:700 .88rem var(--font);line-height:1}
.follow-btn svg{width:16px;height:16px}.follow-btn:hover{background:#00BA88;color:#04140f;border-color:#00BA88}
.follow-btn:focus-visible{outline:3px solid #5fffd0;outline-offset:2px}
.follow-hero{justify-content:center;margin-top:16px}.follow-modal{margin:0 0 16px}.follow-footer{margin-top:12px}.follow-article{margin:4px 0 16px}
/* Follow buttons: X + Facebook, Facebook enabled 2026-10-11 */
.follow-fb svg{flex:none}
/* mobile image fix 2026-10-12: never let flex/max-width squeeze the header logo or bot images out of aspect ratio */
.logo{flex:0 1 auto;min-width:0}
.logo picture{flex:0 0 auto}
.logo-img,.logo-mark-img{max-width:none;width:auto;object-fit:contain}
.logo-mark-img{aspect-ratio:1/1}
.topbar .theme-toggle,.topbar .nav-toggle,.topbar .header-cta{flex-shrink:0}
.footer-logo img{max-width:100%;height:auto}
.art-figure img{width:100%;max-width:320px;height:auto;aspect-ratio:1/1}
.sec-badge img,.sec-tile img,.nav-ico img,.kicker-ico img{flex-shrink:0;max-width:none;aspect-ratio:1/1}
@media (max-width:420px){.topbar{gap:6px;padding:8px 12px}.logo{gap:4px}.logo-mark-img{height:28px}.logo-img{height:30px}.topbar .header-cta{padding:6px 8px;font-size:.75rem}.theme-toggle{width:32px;height:32px}.nav-toggle{padding:5px 7px;font-size:.8rem}}
@media (max-width:340px){.logo-img{height:24px}.logo-mark-img{height:24px}}
.report-correction{margin:28px 0 8px}
.correction-form{display:flex;flex-direction:column;gap:14px;margin:20px 0 40px}.correction-form label{display:flex;flex-direction:column;gap:6px;font-weight:600}
.correction-form input,.correction-form textarea{font:inherit;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%;box-sizing:border-box}
.correction-form .req{font-weight:400;color:var(--muted)}.correction-form .hp{position:absolute;left:-9999px}.correction-form .btn{align-self:flex-start}