/* ONE BLOG STYLESHEET (2026-09-02, Marc: "Seems like the issue is hand
   maintained items. Identity and replace them").

   These rules were pasted into all 24 blog files. Nothing generated them and
   nothing checked them, so they drifted exactly the way hand-kept copies do:
   thirteen posts carried a `.blog-body code` rule, ten carried a
   `.blog-body hr` rule instead, and neither group had the other's. A post
   with a horizontal rule in it rendered the browser default in thirteen
   files and the designed one in ten, depending on which post you happened to
   have copied from.

   Both rules are here now, so both work everywhere.

   `.blog-eyebrow` moved here too, which fixes it on the index: that page uses
   the class (.blog-index-hero .blog-eyebrow) but its own copy of the styles
   never defined it, so the eyebrow rendered unstyled there and styled on
   every post. That is the same drift, one class further down.

   The palette is the BLOG's, not /styles/tokens.css — they disagree (--teal
   is #4FAE95 here and #3FE0CB there). Reconciling them changes the look of
   every post, so it is a deliberate design decision and not part of this
   de-duplication. Flagged, not done. */


:root{
  --bg:#0B221F; --surface:#123430; --surface2:#0E2A27; --line:#1C4A44;
  --text:#F3EAD5; --muted:rgba(243,234,213,.72); --faint:rgba(243,234,213,.46); --util-bg:#081A17;
  --teal:#4FAE95; --teal-deep:#3B8E78; --on-teal:#06201C;
  --sand:#C4842E; --on-sand:#241505;
  --bad:#E2685A; --good:#4FAE95;
  --font-display:'Newsreader',serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}


.blog-hero{padding:56px 0 32px}
.blog-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.blog-date{font-family:var(--font-mono);font-size:13px;color:var(--faint);margin-top:10px}
h1.blog-title{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,6vw,44px);
  line-height:1.08;margin:14px 0 0;letter-spacing:-.01em}
.blog-body{padding-bottom:70px}
.blog-body p{margin:0 0 20px;color:rgba(243,234,213,.88)}
.blog-body h2{font-family:var(--font-display);font-weight:700;font-size:26px;margin:40px 0 14px;color:var(--text)}
.blog-body h3{font-family:var(--font-display);font-weight:700;font-size:20px;margin:32px 0 12px;color:var(--text)}
.blog-body a{color:var(--teal)}
.blog-body ul,.blog-body ol{margin:0 0 20px;padding-left:22px;color:rgba(243,234,213,.88)}
.blog-body li{margin-bottom:8px}
.blog-body blockquote{border-left:3px solid var(--teal);padding:4px 0 4px 18px;margin:0 0 20px;color:var(--muted)}
.blog-body code{font-family:var(--font-mono);background:var(--surface2);padding:2px 6px;border-radius:4px;font-size:14px}
.blog-back{display:inline-block;margin-bottom:24px;color:var(--faint);text-decoration:none;font-family:var(--font-mono);font-size:13px}
.blog-back:hover{color:var(--teal)}
.blog-body hr{border:0;border-top:1px solid var(--line);margin:36px 0}

/* ---- the index ---- */
.blog-index-hero{padding:56px 0 20px}
.blog-index-hero .blog-eyebrow{margin-bottom:14px}
.blog-index-hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,6vw,44px);letter-spacing:-.01em}
.blog-list{padding:20px 0 70px;display:flex;flex-direction:column;gap:0}
.blog-item{padding:26px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;display:block}
.blog-item:first-child{border-top:1px solid var(--line)}
.blog-item-date{font-family:var(--font-mono);font-size:12px;color:var(--faint);letter-spacing:.04em}
.blog-item h2{font-family:var(--font-display);font-weight:700;font-size:22px;margin:8px 0 8px;color:var(--text)}
.blog-item p{color:var(--muted);font-size:14.5px;margin:0}
.blog-item:hover h2{color:var(--teal)}
.blog-empty{padding:40px 0 80px;color:var(--muted)}