/* ==========================================================================
   CEG BLOG: listing + article styles. Builds on site-chrome.css (tokens,
   header, footer, buttons, theme toggle). Dark/light via the same tokens.
   ========================================================================== */
:root { --sans:"Helvetica Neue", Helvetica, Arial, sans-serif; --mono:"Space Mono", ui-monospace, Menlo, monospace; --lime:#D8FF3A; --blue:#3A4BFF; }
html[data-theme="light"] { --blue:#2B3BFF; }
html { scroll-padding-top:124px; }
body { margin:0; background:var(--bg); color:var(--body); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
main { position:relative; z-index:1; }
a { color:var(--accent-text); text-decoration:none; }
a:hover { opacity:.78; }
h1, h2, h3, h4 { font-family:var(--mono); font-weight:700; color:var(--fg); margin:0; letter-spacing:-0.045em; line-height:1.08; }
.tag { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.tag b { color:var(--accent-text); font-weight:700; }
.dot { color:var(--accent); }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.nav-links a[aria-current="page"] { color:var(--accent-text); }

/* ---------- placeholder marker (design preview only) ---------- */
.ph { outline:1px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:3px; }

/* ================================ LISTING ================================ */
.b-hero { padding:84px 0 40px; }
.b-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:56px; align-items:end; }
.b-hero h1 { font-size:clamp(46px,8.4vw,112px); line-height:.94; letter-spacing:-0.06em; margin-top:22px; }
.b-hero-lede { margin:26px 0 0; max-width:560px; font-size:17px; line-height:1.68; color:var(--body); }
.b-readout { border:1px solid var(--border); background:var(--panel); font-family:var(--mono); font-size:12px; line-height:1.9; color:var(--muted); }
.b-readout-head { display:flex; gap:7px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--bar); }
.b-readout-head i { width:8px; height:8px; border-radius:50%; background:var(--border-2); display:block; }
.b-readout-head i:first-child { background:var(--accent); }
.b-readout-head span { margin-left:6px; font-size:11px; }
.b-readout-body { padding:16px 18px 18px; }
.b-readout-body .k { color:var(--fg); }
.b-readout-body .ok { color:var(--accent-text); }
.b-readout-body .cur { display:inline-block; width:8px; height:14px; background:var(--accent); vertical-align:-2px; animation:cegBlink 1s steps(1,end) infinite; margin-left:2px; }

.b-filter { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; padding:22px 0 26px; border-top:1px solid var(--border); margin-top:34px; }
.b-filter .tag { margin-right:4px; }
.chip { font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.02em; padding:9px 14px; min-height:36px; background:transparent; color:var(--muted); border:1px solid var(--border-2); cursor:pointer; border-radius:0; transition:border-color .18s, color .18s, background .18s; }
.chip:hover { border-color:var(--accent); color:var(--accent-text); }
.chip[aria-pressed="true"] { background:var(--fg); border-color:var(--fg); color:var(--bg); }
.b-count { margin-left:auto; }

/* grid: 1 featured (2 cols) + 7 = 8 posts, no orphan row */
.b-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; padding-bottom:30px; }
.b-grid > .card.featured { grid-column:span 2; }
.card { position:relative; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--border); transition:border-color .2s ease, transform .2s ease; min-width:0; }
.card:hover { border-color:var(--accent); transform:translateY(-3px); }
.card[hidden] { display:none; }
.card-link { position:absolute; inset:0; z-index:2; }
.card-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.card-body { display:flex; flex-direction:column; gap:12px; padding:22px 22px 20px; flex:1; }
.card-meta { display:flex; flex-wrap:wrap; gap:6px 12px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.card-meta .cat { color:var(--accent-text); font-weight:700; }
.card h2, .card h3 { font-size:21px; line-height:1.22; letter-spacing:-0.035em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-excerpt { margin:0; font-size:15px; line-height:1.62; color:var(--body); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-foot { margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:flex-end; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--fg); }
.card-foot .go { color:var(--accent-text); display:inline-flex; gap:8px; align-items:center; }
.card-foot .go .arr { transition:transform .2s ease; }
.card:hover .go .arr { transform:translateX(4px); }

/* featured card: cover left, text right */
.card.featured { flex-direction:row; }
.card.featured .cover { width:46%; aspect-ratio:auto; min-height:100%; border-bottom:0; border-right:1px solid var(--border); }
.card.featured .card-body { padding:30px 30px 26px; justify-content:center; }
.card.featured h2 { font-size:clamp(26px,2.9vw,38px); line-height:1.12; -webkit-line-clamp:4; }
.card.featured .card-excerpt { font-size:16px; -webkit-line-clamp:4; }
.badge { align-self:flex-start; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.14em; padding:5px 9px; background:var(--accent); color:var(--accent-ink); text-transform:uppercase; }

/* ---------- generated cover art (no images needed) ---------- */
.cover { position:relative; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--border); background:var(--cv-bg); color:var(--cv-fg); isolation:isolate; }
.cover::before { content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(var(--cv-line) 1px, transparent 1px), linear-gradient(90deg, var(--cv-line) 1px, transparent 1px);
  background-size:28px 28px; }
.cover::after { content:""; position:absolute; inset:0; z-index:-1; background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 4px); }
.cover .num { position:absolute; left:18px; bottom:6px; font-family:var(--mono); font-weight:700; font-size:clamp(70px,9vw,128px); letter-spacing:-0.08em; line-height:1; color:transparent; -webkit-text-stroke:2px var(--cv-fg); opacity:.95; }
.cover .brk { position:absolute; width:18px; height:18px; border:2px solid var(--cv-fg); opacity:.9; }
.cover .brk.tl { top:14px; left:14px; border-right:0; border-bottom:0; }
.cover .brk.tr { top:14px; right:14px; border-left:0; border-bottom:0; }
.cover .glyph { position:absolute; right:18px; bottom:16px; font-family:var(--mono); font-weight:700; font-size:22px; color:var(--cv-fg); letter-spacing:-0.06em; }
.cover .glyph i { display:inline-block; width:10px; height:18px; background:var(--cv-fg); vertical-align:-3px; margin-left:3px; animation:cegBlink 1.1s steps(1,end) infinite; }
.cover .cat-chip { position:absolute; top:14px; left:44px; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:4px 8px; background:var(--cv-fg); color:var(--cv-bg); }
[data-v="a"] { --cv-bg:#FF4A00; --cv-fg:#111111; --cv-line:rgba(17,17,17,.14); }
[data-v="b"] { --cv-bg:#D8FF3A; --cv-fg:#111111; --cv-line:rgba(17,17,17,.14); }
[data-v="c"] { --cv-bg:#1A2BFF; --cv-fg:#F4F1EA; --cv-line:rgba(244,241,234,.16); }
[data-v="d"] { --cv-bg:#F4F1EA; --cv-fg:#111111; --cv-line:rgba(17,17,17,.10); }
[data-v="e"] { --cv-bg:#0A0A0A; --cv-fg:#FF4A00; --cv-line:rgba(255,74,0,.16); }

/* ---------- closing CTA + tools ---------- */
.b-cta { margin-top:54px; border:1px solid var(--border); background:var(--panel); padding:46px 44px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:center; }
.b-cta h2 { font-size:clamp(28px,4vw,52px); margin-top:14px; }
.b-cta p { margin:14px 0 0; max-width:520px; color:var(--body); font-size:16px; line-height:1.65; }
.b-cta-actions { display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.b-tools { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; padding:22px 0 90px; }
.b-tool { display:flex; flex-direction:column; gap:6px; padding:16px 18px; border:1px solid var(--border); background:var(--panel); color:var(--fg); font-family:var(--mono); font-size:13px; font-weight:700; transition:border-color .2s; }
.b-tool small { font-size:11px; font-weight:400; color:var(--muted); letter-spacing:.04em; }
.b-tool:hover { border-color:var(--accent); opacity:1; }
.b-tools-head { display:flex; justify-content:space-between; align-items:baseline; padding-top:48px; }

/* ================================ ARTICLE ================================ */
/* Pinned title bar: fixed under the site header, fades in once the main title scrolls out of view; never scrolls itself. */
.titlebar { position:fixed; top:64px; left:0; right:0; z-index:79; height:46px; display:flex; align-items:center; background:color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); border-bottom:1px solid var(--border); opacity:0; transform:translateY(-6px); visibility:hidden; pointer-events:none; transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.titlebar.show { opacity:1; transform:none; visibility:visible; pointer-events:auto; transition-delay:0s; }
.titlebar .wrap { display:flex; align-items:center; gap:14px; flex:1; min-width:0; box-sizing:border-box; }
.titlebar .tb-tag { font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--accent-text); font-weight:700; white-space:nowrap; text-transform:uppercase; }
.titlebar .tb-title { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--fg); letter-spacing:-0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.tb-toc-btn { margin-left:auto; flex:none; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--fg); background:transparent; border:1px solid var(--border-2); padding:6px 12px; min-height:32px; cursor:pointer; }
.tb-toc-btn:hover { border-color:var(--accent); color:var(--accent-text); }
.tb-toc-btn::after { content:" +"; color:var(--accent); }
.tb-toc-btn[aria-expanded="true"]::after { content:" \2212"; }
.tb-panel { position:absolute; left:0; right:0; top:100%; background:var(--bar); border-bottom:1px solid var(--border); box-shadow:0 18px 40px rgba(0,0,0,.35); max-height:calc(100vh - 130px); overflow:auto; }
.tb-panel[hidden] { display:none; }
.tb-panel ol { list-style:none; margin:0; padding:4px 0 8px; }
.tb-panel a { display:block; padding:13px 0; font-family:var(--mono); font-size:13px; line-height:1.4; color:var(--muted); border-top:1px solid var(--border); }
.tb-panel li:first-child a { border-top:0; }
.tb-panel a.on { color:var(--accent-text); font-weight:700; }
@media (min-width:1101px) { .tb-toc-btn, .tb-panel { display:none !important; } }
.titlebar .tb-bar { position:absolute; left:0; bottom:-1px; height:3px; width:0; background:var(--accent); transition:width .08s linear; }
.crumbs { padding:30px 0 0; font-family:var(--mono); font-size:12px; color:var(--muted); }
.crumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:6px 10px; margin:0; padding:0; }
.crumbs li + li::before { content:"/"; color:var(--border-2); margin-right:10px; }
.crumbs a { color:var(--muted); }
.crumbs a:hover { color:var(--accent-text); opacity:1; }
.crumbs [aria-current] { color:var(--fg); }

.a-head { padding:34px 0 34px; max-width:980px; }
/* site-chrome.css makes every <header> sticky; the article's title block is a normal in-flow header */
.a-head { position:static; z-index:auto; top:auto; background:none; border-bottom:0; -webkit-backdrop-filter:none; backdrop-filter:none; }
.a-head h1 { font-size:clamp(34px,5.6vw,68px); line-height:1.02; letter-spacing:-0.055em; margin-top:20px; }
.a-stand { margin:22px 0 0; max-width:720px; font-size:19px; line-height:1.6; color:var(--body); }
.a-meta { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:28px; font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.04em; }
.a-cover { margin:6px 0 0; border:1px solid var(--border); }
.a-cover .cover { aspect-ratio:21/9; border-bottom:0; }
.a-cover .cover .num { font-size:clamp(90px,14vw,210px); }
.a-cover figcaption { padding:10px 14px; border-top:1px solid var(--border); font-family:var(--mono); font-size:11px; color:var(--muted); background:var(--panel); }

.a-layout { display:grid; grid-template-columns:240px minmax(0,720px); gap:64px; padding:56px 0 30px; justify-content:start; }
.toc { position:sticky; top:124px; align-self:start; font-family:var(--mono); font-size:12px; }
.toc .tag { margin-bottom:14px; display:block; }
.toc ol { list-style:none; margin:0; padding:0; border-left:1px solid var(--border); }
.toc li a { display:block; padding:8px 0 8px 14px; margin-left:-1px; border-left:2px solid transparent; color:var(--muted); line-height:1.4; }
.toc li a:hover { color:var(--fg); opacity:1; }
.toc li a.on { color:var(--accent-text); border-left-color:var(--accent); font-weight:700; }

.prose { font-size:17.5px; line-height:1.78; color:var(--body); min-width:0; }
.prose > * + * { margin-top:1.25em; }
.prose h2 { font-size:clamp(25px,3vw,32px); letter-spacing:-0.045em; margin-top:2.1em; line-height:1.14; }
.prose h2::before { content:"// "; color:var(--accent); }
.prose h3 { font-size:21px; margin-top:1.8em; letter-spacing:-0.035em; }
.prose p { margin-bottom:0; }
.prose a { text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--accent) 60%, transparent); }
.prose strong { color:var(--fg); }
.prose ul, .prose ol { padding:0; list-style:none; display:grid; gap:.65em; }
.prose ul li, .prose ol li { position:relative; padding-left:30px; }
.prose ul li::before { content:">"; position:absolute; left:2px; font-family:var(--mono); font-weight:700; color:var(--accent); }
.prose ol { counter-reset:o; }
.prose ol li { counter-increment:o; }
.prose ol li::before { content:counter(o, decimal-leading-zero); position:absolute; left:0; font-family:var(--mono); font-weight:700; font-size:13px; color:var(--accent-text); top:.28em; }
.prose blockquote { margin-left:0; margin-right:0; padding:6px 0 6px 24px; border-left:3px solid var(--accent); font-family:var(--mono); font-size:19px; line-height:1.5; letter-spacing:-0.02em; color:var(--fg); }
.prose blockquote cite { display:block; margin-top:12px; font-size:12px; font-style:normal; color:var(--muted); letter-spacing:.04em; }
.callout { border:1px solid var(--border-2); background:var(--panel); padding:22px 24px 24px; position:relative; }
.callout::before { content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px; background:var(--accent); }
.callout .tag { display:block; margin-bottom:10px; }
.callout p { margin:0; font-size:16px; line-height:1.65; color:var(--fg); }
.fig { margin:2em 0 0; border:1px solid var(--border); }
.fig .cover { aspect-ratio:16/8; border-bottom:0; }
.fig figcaption { padding:10px 14px; border-top:1px solid var(--border); font-family:var(--mono); font-size:11px; color:var(--muted); background:var(--panel); }
.tbl-wrap { overflow-x:auto; border:1px solid var(--border); background:var(--panel); -webkit-overflow-scrolling:touch; }
.tbl-wrap:focus-visible { outline:2px solid var(--accent); }
.prose table { border-collapse:collapse; width:100%; min-width:560px; font-size:15px; line-height:1.5; }
.prose th { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; text-align:left; color:var(--fg); background:var(--bar); padding:13px 16px; border-bottom:1px solid var(--border-2); white-space:nowrap; }
.prose td { padding:13px 16px; border-bottom:1px solid var(--border); color:var(--body); }
.prose tr:last-child td { border-bottom:0; }
.prose td:first-child { color:var(--fg); font-weight:700; }
.prose hr { border:0; border-top:1px solid var(--border); margin:2.4em 0; }
.prose details { border:1px solid var(--border); background:var(--panel); padding:16px 18px; }
.prose summary { cursor:pointer; font-family:var(--mono); font-weight:700; font-size:14px; color:var(--fg); list-style:none; padding:5px 0; margin:-5px 0; }
.prose summary::-webkit-details-marker { display:none; }
.prose summary::before { content:"+ "; color:var(--accent); }
.prose details[open] summary::before { content:"\2212 "; }
.prose details p { margin-top:12px; font-size:16px; }

.share { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:2.6em; padding-top:22px; border-top:1px solid var(--border); }
.share .tag { margin-right:6px; }
.related { padding:50px 0 10px; }
.related-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px; }
.related .b-grid { grid-template-columns:repeat(3, minmax(0,1fr)); padding-bottom:0; }

/* ================================ RESPONSIVE ================================ */
@media (max-width:1100px) {
  .b-hero-grid { grid-template-columns:1fr; gap:34px; }
  .b-readout { max-width:420px; }
  .b-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .b-grid > .card.featured { grid-column:span 2; }
  .a-layout { grid-template-columns:minmax(0,720px); gap:0; padding-top:34px; }
  .toc { display:none; }
  .b-tools { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:760px) {
  .b-hero { padding:56px 0 26px; }
  .b-grid { grid-template-columns:1fr; gap:18px; }
  .b-grid > .card.featured { grid-column:auto; flex-direction:column; }
  .card.featured .cover { width:100%; aspect-ratio:16/9; min-height:0; border-right:0; border-bottom:1px solid var(--border); }
  .card.featured .card-body { padding:22px 22px 20px; }
  .b-cta { grid-template-columns:1fr; padding:32px 24px; }
  .b-count { margin-left:0; width:100%; }
  .a-head { padding-top:24px; }
  .a-stand { font-size:17px; }
  .prose { font-size:17px; }
  .related .b-grid { grid-template-columns:1fr; }
  .a-cover .cover { aspect-ratio:16/9; }
}
@media (max-width:560px) { .titlebar .tb-tag { display:none; } }
@media (max-width:480px) {
  .b-tools { grid-template-columns:1fr; }
  .chip { flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce) {
  .card, .card .go .arr, .titlebar, .titlebar .tb-bar { transition:none; }
  .card:hover { transform:none; }
}
@media print {
  header, footer, .titlebar, .toc, .scanlines, .gridlines, .share, .related, .b-cta, .b-tools { display:none !important; }
  body { background:#fff; color:#000; }
  .prose { color:#000; }
}

/* ---------- real cover images (placeholders until replaced) ---------- */
.cover.cover-img { aspect-ratio:1200/630; background:var(--panel); }
.cover.cover-img::before, .cover.cover-img::after { display:none; }
.cover.cover-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.cover.cover-img .cat-chip { left:14px; z-index:1; }
.card.featured .cover.cover-img { aspect-ratio:auto; }
.a-cover img { display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; background:var(--panel); }
.a-stand strong { color:var(--fg); }
.callout-link { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; font-weight:700; text-decoration:none !important; margin-top:4px; }
.callout-link:hover { opacity:.8; }
.prose blockquote.formula { font-size:17px; letter-spacing:-0.01em; overflow-x:auto; }
.h-dot::after { content:"."; color:var(--accent); }
.b-hero h1.h-dot { font-size:clamp(34px,5.2vw,72px); line-height:1; letter-spacing:-0.055em; }

/* ---------- screenshots, sources, unfinished-content marker ---------- */
.fig img { display:block; width:100%; height:auto; background:var(--panel); }
.prose ul.sources { gap:.5em; font-size:15.5px; }
.prose ul.sources .src-note { color:var(--muted); font-size:13px; }
.callout.todo { border-style:dashed; border-color:var(--accent); }
.callout.todo::before { background:repeating-linear-gradient(45deg, var(--accent) 0 6px, transparent 6px 12px); }