:root{--post-muted:#616b7a;--post-faint:#424b58;--post-border-soft:#1a2028;--post-border-term:#1e2730;--post-terminal:#07090b;--post-card:#12161d;--post-surface:#0f1318;--post-accent-line:#1d4d39;--radius:7px;--radius-sm:5px}html[data-theme=light]{--post-muted:#7a8493;--post-faint:#aab1bb;--post-border-soft:#ebede7;--post-card:#fff;--post-surface:#eef0eb;--post-accent-line:#bfe6d3}
.post-head { padding: 64px 0 0; }
.post-head .tag { margin-bottom: 20px; }
.post-head h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 18px + 2.4vw, 58px);
  line-height: 1.08; letter-spacing: -0.02em; max-width: 20ch; }
.post-head .lede { margin-top: 22px; max-width: 56ch; }
.post-head .meta { margin-top: 26px; }
.post-head .rule { border: none; border-top: 1px solid var(--line); margin: 44px 0 0; }

/* layout L1 — editorial sidebar (the fix) */
.post-grid {
  display: grid; grid-template-columns: 240px minmax(0, 780px); gap: 56px;
  max-width: 1076px; margin: 0 auto;
  padding-top: 48px;
}
.post-rail { position: sticky; top: 88px; align-self: start;
  font-family: var(--mono); font-size: 12px; }
.post-rail .blk { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--post-border-soft); }
.post-rail .lbl { color: var(--post-faint); letter-spacing: 0.1em; text-transform: uppercase; font-size: 10.5px; }
.post-rail .toc a { display: block; color: var(--post-muted); padding: 5px 0 5px 12px;
  border-left: 1px solid var(--line); margin-top: 4px; transition: color .15s, border-color .15s; }
.post-rail .toc a:hover, .post-rail .toc a.on { color: var(--accent); border-color: var(--accent); }
.post-rail .who { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.post-rail .who .av { width: 34px; height: 34px; border-radius: 50%; background: var(--soft);
  border: 1px solid var(--post-accent-line); color: var(--accent); display: flex; align-items: center;
  justify-content: center; font-size: 13px; }
.post-rail .who .nm { font-family: var(--sans); color: var(--text); font-size: 13px; font-weight: 500; }
.post-rail .share { display: flex; gap: 8px; margin-top: 8px; }
.post-rail .share a { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; color: var(--post-muted); }
.post-rail .share a:hover { color: var(--accent); border-color: var(--post-accent-line); }


.prose { color: var(--muted); font-size: clamp(16.5px, 15px + 0.42vw, 20.5px); line-height: 1.78; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 20px + 0.9vw, 34px); color: var(--text);
  letter-spacing: -0.01em; margin-top: 2.4rem; line-height: 1.2; }
.prose h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 18px + 0.5vw, 26px); color: var(--text);
  margin-top: 2rem; }
.prose p { color: var(--muted); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--accent); border-bottom: 1px solid var(--post-accent-line); }
.prose a:hover { border-color: var(--accent); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-top: 0.4rem; }
.prose li::marker { color: var(--post-faint); }
.prose blockquote { border-left: 2px solid var(--accent); background: var(--soft);
  padding: 14px 22px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose blockquote p { color: var(--text); font-family: var(--serif); font-style: italic; font-size: 19px; }
.prose code { font-family: var(--mono); font-size: 0.85em; background: var(--post-card);
  color: var(--accent); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.6rem 0; }

/* code & terminal blocks — robust containment (fixes wide overflow) */
.codeblock { background: var(--post-terminal); border: 1px solid var(--post-border-term);
  border-radius: var(--radius); overflow: hidden; margin: 1.6rem 0; }
.codeblock .cbar { display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid var(--post-border-term); font-family: var(--mono);
  font-size: 11px; color: var(--post-faint); }
.codeblock .cbar .lang { color: var(--accent); }
.codeblock pre { margin: 0; padding: 16px 18px; overflow-x: auto; }
.codeblock pre code { font-family: var(--mono); font-size: 13px; line-height: 1.7;
  color: var(--text); background: none; border: none; padding: 0; white-space: pre; }
.codeblock .c-g { color: var(--accent); }
.codeblock .c-m { color: var(--post-faint); }
.codeblock .c-a { color: var(--amber); }
.codeblock .c-b { color: var(--blue); }

/* figures / wide media — capped to content, never busts layout */
.figure { margin: 1.8rem 0; }
.figure .ph, .figure img { border-radius: var(--radius); border: 1px solid var(--line); }
.figure figcaption { font-family: var(--mono); font-size: 11.5px; color: var(--post-muted);
  margin-top: 10px; }
.figure.wide { /* controlled breakout, still bounded */ }

/* tables — fully styled (was unstyled) */
.prose .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
  margin: 1.8rem 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prose thead th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--post-muted); text-align: left; padding: 12px 16px;
  background: var(--post-surface); border-bottom: 1px solid var(--line); white-space: nowrap; }
.prose tbody td { padding: 12px 16px; color: var(--muted); border-bottom: 1px solid var(--post-border-soft);
  vertical-align: top; }
.prose tbody tr:last-child td { border-bottom: none; }
.prose tbody tr:hover { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.prose td .mono, .prose td code { white-space: nowrap; }

/* callout */
.callout { display: flex; gap: 14px; background: var(--post-card); border: 1px solid var(--line);
  border-left: 2px solid var(--accent); border-radius: var(--radius); padding: 16px 20px; margin: 1.6rem 0; }
.callout .ic { color: var(--accent); flex-shrink: 0; }
.callout p { color: var(--muted); font-size: 15px; }

/* author bio */
.bio { display: flex; gap: 18px; align-items: flex-start; padding: 32px 0; border-top: 1px solid var(--line);
  margin-top: 40px; }
.bio .av { width: 48px; height: 48px; border-radius: 50%; background: var(--soft);
  border: 1px solid var(--post-accent-line); color: var(--accent); display: flex; align-items: center;
  justify-content: center; font-family: var(--mono); flex-shrink: 0; }
.bio .nm { font-family: var(--serif); font-size: 17px; color: var(--text); }
.bio .ds { font-size: 13.5px; color: var(--post-muted); margin-top: 4px; max-width: 60ch; }


.gh-content > * + * { margin-top: 1.25rem; }
.gh-content h2 { font-family: var(--serif); font-weight: 600; font-size: 26px; color: var(--text);
  letter-spacing: -0.01em; margin-top: 2.4rem; line-height: 1.2; scroll-margin-top: 90px; }
.gh-content h3 { font-family: var(--serif); font-weight: 600; font-size: 21px; color: var(--text);
  margin-top: 2rem; scroll-margin-top: 90px; }
.gh-content p { color: var(--muted); }
.gh-content strong { color: var(--text); font-weight: 600; }
.gh-content a { color: var(--accent); border-bottom: 1px solid var(--post-accent-line); }
.gh-content a:hover { border-color: var(--accent); }
.gh-content ul, .gh-content ol { padding-left: 1.3rem; }
.gh-content li { margin-top: 0.4rem; color: var(--muted); }
.gh-content li::marker { color: var(--post-faint); }
.gh-content blockquote { border-left: 2px solid var(--accent); background: var(--soft);
  padding: 14px 22px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.gh-content blockquote p { color: var(--text); font-family: var(--serif); font-style: italic; font-size: 19px; }
.gh-content hr { border: none; border-top: 1px solid var(--line); margin: 2.6rem 0; }

/* inline code */
.gh-content :not(pre) > code { font-family: var(--mono); font-size: 0.85em; background: var(--post-card);
  color: var(--accent); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); }

/* code blocks — robust containment for wide output (fixes overflow).
   NOTE: the terminal background stays dark in BOTH modes, so the text colour
   must stay light in both modes too (never inherit the flipping --text-primary). */
.gh-content pre { background: var(--post-terminal); border: 1px solid var(--post-border-term); border-radius: var(--radius);
  margin: 1.6rem 0; padding: 16px 18px; overflow-x: auto; color: #e7ebf1; }
.gh-content pre code { font-family: var(--mono); font-size: 13px; line-height: 1.7;
  color: #e7ebf1; background: none; border: none; padding: 0; white-space: pre; }
.gh-content pre, .gh-content pre code, .gh-content pre * { color: #e7ebf1; }
.gh-content pre ::selection { background: rgba(46,207,142,0.30); }

/* tables — JS wraps them in .table-wrap for horizontal scroll */
.gh-content .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); margin: 1.8rem 0; }
.gh-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gh-content thead th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--post-muted); text-align: left; padding: 12px 16px; background: var(--post-surface);
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.gh-content tbody td { padding: 12px 16px; color: var(--muted); border-bottom: 1px solid var(--post-border-soft); vertical-align: top; }
.gh-content tbody tr:last-child td { border-bottom: none; }
.gh-content tbody tr:hover { background: color-mix(in srgb, var(--accent) 3%, transparent); }

/* figures / images — Koenig cards. Click-to-zoom (theme.js) makes dense
   screenshots readable; wide/full cards reclaim horizontal room. */
.gh-content figure { margin: 1.8rem 0; }
.gh-content img { border-radius: var(--radius); border: 1px solid var(--line); cursor: zoom-in; height: auto; }
.gh-content figcaption { font-family: var(--mono); font-size: 11.5px; color: var(--post-muted); margin-top: 10px; text-align: center; }
.gh-content .kg-card { margin: 1.8rem 0; }
/* images fill the reading column by default; click-to-zoom (theme.js) opens them full-size */
.gh-content .kg-image-card img, .gh-content .kg-width-regular img,
.gh-content .kg-width-wide img, .gh-content .kg-width-full img { width: 100%; height: auto; }
.gh-content .kg-width-wide, .gh-content .kg-width-full { max-width: none; }
.gh-content .kg-embed-card, .gh-content iframe { max-width: 100%; }
.gh-content .kg-embed-card, .gh-content iframe { max-width: 100%; }

/* bookmark card — the rich link preview Ghost builds when you paste a URL.
   The image on the right is the linked page's preview (og:image); styled to theme. */
.gh-content .kg-bookmark-card, .gh-content .kg-bookmark-container { margin: 1.6rem 0; }
.gh-content .kg-bookmark-container { display: flex; min-height: 148px; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: var(--post-card); text-decoration: none; color: inherit; }
.gh-content .kg-bookmark-content { flex: 1 1 auto; padding: 20px 22px; display: flex; flex-direction: column; }
.gh-content .kg-bookmark-title { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--text); }
.gh-content .kg-bookmark-description { font-size: 13.5px; color: var(--muted); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gh-content .kg-bookmark-metadata { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px;
  font-family: var(--mono); font-size: 11.5px; color: var(--post-muted); }
.gh-content .kg-bookmark-icon { width: 18px; height: 18px; border-radius: 4px; border: none; }
.gh-content .kg-bookmark-thumbnail { flex: 0 0 33%; position: relative; min-height: 148px; }
.gh-content .kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: none; border-radius: 0; cursor: pointer; }
.gh-content .kg-bookmark-card a { border-bottom: none; }

/* feature image at top of post */
.post-feature { margin: 36px 0 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.post-feature img { width: 100%; display: block; border: none; border-radius: 0; }

/* ============================================================ DAY / DARK TOGGLE */

.post-title-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}.post-title-row .meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.post-head h1{margin:0}.post-head .meta b{font-weight:500;color:var(--muted)}
.post-rail .toc{position:static;border:0;padding:0;font-size:12px}.post-rail .toc a{margin:4px 0 0}.post-rail .toc a.active{color:var(--accent);border-color:var(--accent)}.post-rail .toc .subheading{padding-left:24px}.post-rail .blk:last-child{border:0}.rail-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.tag.plain{background:transparent;color:var(--post-muted)}
.prose{min-width:0;overflow-wrap:anywhere}.prose>:first-child{margin-top:0}.prose p{margin-bottom:0}.prose a{text-decoration:none}.prose table th,.prose table td{border-left:0;border-right:0;border-top:0}.prose table caption{padding:12px 16px;text-align:left}.prose .wp-block-table{margin:1.8rem 0}.prose .wp-block-table .table-wrap{margin:0}.prose pre{max-width:100%;white-space:pre}.prose pre code{display:block}.prose pre code *{font:inherit}.prose pre:focus-visible,.table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.prose img{max-width:100%;height:auto}.prose iframe,.prose video{max-width:100%}.prose .wp-block-gallery{display:flex;flex-wrap:wrap;gap:16px}.prose .wp-block-gallery figure{flex:1 1 220px}.prose .wp-block-gallery img{width:100%}.prose .wp-block-quote{margin-inline:0}.bio{margin-top:40px}.related{margin-bottom:40px}.post-comments{margin-top:40px}
.post-lightbox{border:0;background:rgba(3,5,8,.96);width:100vw;height:100vh;max-width:none;max-height:none;padding:50px 24px;color:#e7ebf1}.post-lightbox[open]{display:flex;align-items:center;justify-content:center}.post-lightbox::backdrop{background:#030508}.post-lightbox img{max-width:100%;max-height:85vh;object-fit:contain}.post-lightbox button{position:absolute;right:22px;top:18px;background:#14181e;color:#e7ebf1;border:1px solid #2a3038;border-radius:50%;width:40px;height:40px;font-size:24px}
@media(max-width:980px){.post-grid{grid-template-columns:minmax(0,1fr);gap:32px}.post-rail{position:static;display:grid;grid-template-columns:1fr 1fr;gap:22px;border-bottom:1px solid var(--line);padding-bottom:26px}.post-rail .blk:first-child{grid-column:1/-1}}
@media(max-width:760px){.post-head{padding-top:36px}.post-title-row{grid-template-columns:1fr;gap:12px}.post-title-row .meta{flex-direction:row;align-items:center;flex-wrap:wrap;margin-top:0;gap:12px}.post-head h1{font-size:34px}.post-rail{grid-template-columns:1fr}.post-rail .blk{margin-bottom:0}.post-grid{padding-top:32px}.prose .alignleft,.prose .alignright{float:none;margin-inline:0}}

.prose blockquote{margin-inline:0}.li-copy-mini{margin-top:14px;width:100%;font:11.5px var(--mono);letter-spacing:.02em;color:var(--accent);background:transparent;border:1px solid var(--post-accent-line);border-radius:5px;padding:8px 12px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.li-copy-mini::before{content:"in";font-weight:700;font-size:10px;background:#0a66c2;color:white;width:16px;height:16px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center}.li-copy-mini:hover{background:var(--soft)}