/* =========================================================
   Matt Novak — activity log
   BlanketCat theme "mattnovak"
   Dark navy + electric-blue. Adapted from the mattnovak.email
   landing page into a long-form blog.
   Display: Space Grotesk | Body: Hanken Grotesk | Mono/data: JetBrains Mono
   ========================================================= */

:root{
  --bg:#0a0b0d;
  --bg-2:#0e1013;
  --surface:#14171c;
  --surface-2:#191d24;
  --ink:#f3f2ea;
  --muted:#aab0b8;
  --muted-2:#777d86;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);

  --blue:#4f9bff;
  --blue-deep:#2f7bed;
  --cyan:#38d4ff;

  --maxw:1080px;
  --readw:720px;
  --shell:1240px;      /* full page container (header/footer bars, article grid) */
  --gutter:56px;       /* min side margin at the shell edge */
  --toc-w:258px;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.75);
  --shadow-glow:0 0 0 1px var(--line), 0 24px 60px -28px rgba(79,155,255,.18);

  --font-display:'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:'JetBrains Mono', 'NerdGlyphs', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip; /* clip, not hidden: hidden creates a scroll container and breaks position:sticky (the TOC rail) */
  background-image:
    radial-gradient(1100px 620px at 78% -8%, rgba(79,155,255,.10), transparent 60%),
    radial-gradient(900px 600px at -10% 8%, rgba(56,212,255,.06), transparent 55%);
  background-attachment:fixed;
}

/* Guilloché engraving (currency / security-tint texture), drawn in JS */
.engine{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%;
  opacity:.34;
  -webkit-mask-image:radial-gradient(135% 115% at 50% -10%, #000 30%, transparent 80%);
          mask-image:radial-gradient(135% 115% at 50% -10%, #000 30%, transparent 80%);
}
@media (prefers-reduced-motion: reduce){ .engine{ opacity:.28; } }

/* Film grain overlay */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none; }

/* ---------- Nav ---------- */
.nav{
  position:relative; z-index:3; width:100%;
  border-bottom:1px solid var(--line);
  background:rgba(10,11,13,.35);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.nav-inner{
  width:min(var(--shell), 100% - var(--gutter));
  margin:0 auto; padding:15px 0;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"brand search actions";
  align-items:center; gap:14px 28px;
}
.brand{ grid-area:brand; display:flex; align-items:center; gap:12px; }
.nav-search{ grid-area:search; position:relative; width:100%; max-width:440px; justify-self:center; }
.nav-search .ns-icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--muted-2); pointer-events:none; }
.mark{ height:34px; width:auto; display:block; flex:none; }
.mark.sm{ height:26px; }
.brand-text{
  font-family:var(--font-display);
  font-weight:700; font-size:18px; line-height:1.05; letter-spacing:-.01em;
  display:flex; flex-direction:column;
}
.brand-text em{
  font-family:var(--font-mono);
  font-style:normal; font-weight:500; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2);
  margin-top:3px;
}
.nav-actions{ grid-area:actions; display:flex; align-items:center; gap:20px; }
.nav-link{
  font-family:var(--font-mono); font-size:13px; color:var(--muted);
  border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.nav-link:hover{ color:var(--ink); border-color:var(--line-strong); }
.nav-link.ops{ color:var(--blue); }
.nav-link.ops:hover{ border-color:var(--blue); }
/* active page: an oval pill so it's clear which page you're on */
.nav-link.is-active{
  color:var(--blue); background:rgba(79,155,255,.10);
  border:1px solid rgba(79,155,255,.40); border-radius:999px;
  padding:6px 14px; margin:-6px 0;
}
.nav-link.is-active:hover{ color:var(--blue); border-color:var(--blue); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-body); font-weight:700; font-size:14px;
  padding:11px 18px; border-radius:999px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(180deg, var(--blue), var(--blue-deep));
  color:#0a0b0d;
  box-shadow:0 12px 30px -10px rgba(79,155,255,.5);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(79,155,255,.65); }
.btn-ghost{ background:rgba(255,255,255,.03); color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--blue); color:var(--blue); }

/* ---------- Layout shells ---------- */
main{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 28px 40px; }
.kicker{
  display:inline-block;
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--blue);
  margin-bottom:14px;
}

/* ---------- Masthead (index hero) ---------- */
.masthead{
  position:relative; z-index:2;
  width:min(1020px, 100% - 48px); margin:22px auto 0; padding:42px 44px;
  display:grid; grid-template-columns:1fr auto; gap:clamp(26px, 2.6vw, 40px); align-items:center;
  background:
    radial-gradient(640px 320px at 92% -25%, rgba(79,155,255,.14), transparent 60%),
    rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.06);
  border-radius:26px;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.masthead-copy{ min-width:0; }
.masthead h1{
  font-family:var(--font-display);
  font-weight:700; letter-spacing:-.03em; line-height:1.0;
  font-size:clamp(32px, 4.4vw, 52px); margin:0 0 18px; max-width:none;
}
.masthead h1 .hl{ position:relative; color:var(--blue); white-space:nowrap; }
.masthead h1 .hl::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:.06em; height:.42em; z-index:-1;
  background:rgba(79,155,255,.14); border-radius:6px; transform:skewX(-9deg);
}
.masthead .lede{ color:var(--muted); font-size:18px; line-height:1.65; max-width:none; margin:0 0 26px; }
.masthead .lede a{ color:var(--blue); border-bottom:1px solid rgba(79,155,255,.4); }
.masthead-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding:7px 13px; border:1px solid var(--line-strong);
  border-radius:999px; background:rgba(255,255,255,.02); margin-bottom:22px;
}
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 0 0 rgba(79,155,255,.6); animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(79,155,255,.55); }
  70%{ box-shadow:0 0 0 9px rgba(79,155,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(79,155,255,0); }
}
.masthead-portrait{
  grid-area:auto; flex:none; display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:22px; border:1px solid var(--line-strong); border-radius:20px;
  background:linear-gradient(180deg, var(--surface-2), var(--bg-2)); box-shadow:var(--shadow);
}
.masthead-portrait img{ width:184px; height:184px; border-radius:22px; object-fit:cover; border:1px solid var(--line-strong); }
.mp-meta{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
.mp-name{ font-family:var(--font-display); font-weight:700; font-size:17px; }
.mp-role{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted); }
.mp-link{ font-family:var(--font-mono); font-size:12px; color:var(--blue); margin-top:4px;
  border-bottom:1px solid rgba(79,155,255,.4); }
.mp-link:hover{ border-color:var(--blue); }
.chip{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.02em;
  color:var(--muted); border:1px solid var(--line-strong);
  background:rgba(255,255,255,.02); padding:6px 12px; border-radius:999px;
  transition:color .2s, border-color .2s;
}
.chip:hover{ color:var(--blue); border-color:var(--blue); }

/* Header search */
#bc-search{
  width:100%; font-family:var(--font-mono); font-size:13.5px; color:var(--ink);
  background:rgba(255,255,255,.04); border:1px solid var(--line-strong);
  border-radius:999px; padding:10px 16px 10px 40px; outline:none;
  transition:border-color .2s, background .2s;
}
#bc-search::placeholder{ color:var(--muted-2); }
#bc-search:focus{ border-color:var(--blue); background:rgba(79,155,255,.06); }
#bc-search-results{
  position:absolute; z-index:30; left:0; right:0; margin-top:10px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden; max-height:min(70vh,520px); overflow-y:auto;
}
[data-bc-search-result]{ display:block; padding:12px 15px; border-bottom:1px solid var(--line); }
[data-bc-search-result]:last-child{ border-bottom:none; }
[data-bc-search-result]:hover{ background:rgba(79,155,255,.06); }
[data-bc-search-title]{ font-family:var(--font-display); font-weight:700; font-size:15px; }
[data-bc-search-snippet]{ color:var(--muted); font-size:13px; margin-top:3px; }
[data-bc-search-snippet] mark{ background:rgba(79,155,255,.28); color:var(--ink); border-radius:3px; padding:0 2px; }
[data-bc-search-tags]{ margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
[data-bc-search-tags] span{ font-family:var(--font-mono); font-size:11px; color:var(--blue); }
[data-bc-search-empty]{ padding:14px 15px; color:var(--muted-2); font-family:var(--font-mono); font-size:13px; }

/* ---------- Article list ---------- */
.list-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  width:min(var(--maxw), 100% - 48px); margin:44px auto 6px; padding:0 26px; }
.list-head h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(20px,3vw,26px); margin:0; }
.list-head .count{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted-2); letter-spacing:.06em; }

.post-list{ list-style:none; margin:14px auto 0; padding:0; display:grid; gap:16px;
  width:min(var(--maxw), 100% - 48px); }
.post-card{
  display:grid; grid-template-columns:1fr; gap:0;
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px; position:relative; overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.post-card::after{
  content:""; position:absolute; left:0; top:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--blue), var(--cyan)); transition:width .3s ease;
}
.post-card:hover{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow-glow); }
.post-card:hover::after{ width:100%; }
/* horizontal card: image beside the text, shown IN FULL (contained, never cropped) */
.post-card.has-media{ grid-template-columns:256px 1fr; gap:26px; align-items:center; }
.post-media{ display:block; }
.post-thumb{ display:block; width:100%; aspect-ratio:3/2; object-fit:contain;
  background:#0c0e12; border-radius:12px; border:1px solid var(--line); }
.post-body{ display:grid; gap:11px; min-width:0; }
.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--muted-2); }
.post-meta .dot-sep{ color:var(--line-strong); }
.post-meta time{ color:var(--muted); }
.post-card h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(21px,2.6vw,27px); line-height:1.12; margin:2px 0 0; }
.post-card h3 a:hover{ color:var(--blue); }
.post-card .excerpt{ color:var(--muted); font-size:15.5px; margin:0; max-width:66ch; }
.post-card .tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:2px; }
.tag-pill{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted);
  border:1px solid var(--line); background:rgba(255,255,255,.02); padding:4px 10px; border-radius:999px; }
.tag-pill:hover{ color:var(--blue); border-color:var(--blue); }

/* ---------- Tag library (full, growing; bottom of the home page) ---------- */
.tag-library{
  width:min(var(--maxw), 100% - 48px); margin:56px auto 0; padding:34px 34px 30px;
  border:1px solid var(--line); border-radius:22px;
  background:
    radial-gradient(600px 220px at 8% 0%, rgba(79,155,255,.08), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
}
.tag-library-head{ margin-bottom:20px; }
.tag-library-head h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(22px,3vw,30px); margin:0; }
.tag-library-sub{ color:var(--muted); font-size:15px; margin:8px 0 0; }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
.tag-chip{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:13px; color:var(--ink);
  padding:8px 10px 8px 14px; border:1px solid var(--line-strong); border-radius:999px;
  background:rgba(255,255,255,.02);
  transition:transform .16s ease, border-color .2s, background .2s, color .2s;
}
.tag-chip:hover{ transform:translateY(-2px); border-color:var(--blue); color:var(--blue); background:rgba(79,155,255,.07); }
.tc-count{ font-size:11.5px; color:var(--muted); min-width:20px; text-align:center;
  padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--line); }
.tag-chip:hover .tc-count{ color:var(--blue); border-color:rgba(79,155,255,.35); }

/* ---------- Single article ---------- */
/* Wide shell with a readable content column + a sticky TOC rail on the right.
   The prose column stays at --readw (~65-75 chars) for readability; the extra
   screen width is used by the rail and the margins, not by widening the text. */
.article-shell{
  width:min(var(--shell), 100% - var(--gutter)); margin:26px auto 0;
  display:grid; grid-template-columns:minmax(0, var(--readw)) var(--toc-w);
  column-gap:clamp(40px, 6vw, 96px); justify-content:center; align-items:stretch;
}
/* the rail must span the article's full height so the sticky TOC has room to travel */
.toc-rail{ min-width:0; height:100%; }
body:not(.toc-open) .article-shell{ grid-template-columns:minmax(0, var(--readw)); }
.article-main{ min-width:0; }
.toc-rail{ min-width:0; }
.article-head{ margin-bottom:26px; }
.back-link{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted); display:inline-flex; gap:7px; align-items:center; margin-bottom:22px; }
.back-link:hover{ color:var(--blue); }
.article-head h1{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:1.03;
  font-size:clamp(30px, 5vw, 50px); margin:10px 0 16px;
}
.article-head .dek{ color:var(--muted); font-size:19px; line-height:1.55; margin:0 0 20px; font-style:normal; }
.article-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; color:var(--muted-2);
  padding-bottom:18px; border-bottom:1px solid var(--line); }
.article-meta time{ color:var(--muted); }
.article-tags{ display:flex; flex-wrap:wrap; gap:7px; }
/* Article featured image: show the whole image, scaled to the column (no crop) */
.featured{ display:block; width:100%; height:auto; border-radius:16px; border:1px solid var(--line); margin:6px 0 32px; }

/* ---------- Prose (article body) ---------- */
.prose{ font-size:17px; line-height:1.75; color:#e7e6df; }
.prose > *:first-child{ margin-top:0; }
.prose p{ margin:0 0 1.25em; }
.prose a{ color:var(--blue); border-bottom:1px solid rgba(79,155,255,.4); }
.prose a:hover{ border-color:var(--blue); }
.prose strong{ color:var(--ink); font-weight:700; }
.prose em{ color:#d7d6cf; }

.prose h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.12;
  font-size:clamp(24px,3.4vw,32px); margin:1.7em 0 .6em;
}
.prose h3{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(19px,2.6vw,23px); margin:1.9em 0 .5em; color:var(--ink);
}
.prose h4{ font-family:var(--font-display); font-weight:700; font-size:18px; margin:1.6em 0 .4em; }
.prose ul, .prose ol{ margin:0 0 1.25em; padding-left:1.35em; }
.prose li{ margin:.4em 0; }
.prose li::marker{ color:var(--blue); }

.prose blockquote{
  margin:1.6em 0; padding:16px 22px;
  border-left:3px solid var(--blue);
  background:rgba(79,155,255,.06);
  border-radius:0 12px 12px 0; color:#dcdbd4;
}
.prose blockquote p{ margin:0; }
.prose blockquote strong{ color:var(--blue); }

.prose hr{ border:none; border-top:1px solid var(--line); margin:2.4em 0; }

/* Inline code */
.prose :not(pre) > code{
  font-family:var(--font-mono); font-size:.86em;
  background:rgba(79,155,255,.10); color:#cfe2ff;
  border:1px solid rgba(79,155,255,.18);
  padding:.1em .4em; border-radius:6px; white-space:nowrap;
}
/* Code blocks */
.prose pre{
  font-family:var(--font-mono); font-size:13.5px; line-height:1.6;
  background:#0c0e12; border:1px solid var(--line-strong); border-radius:14px;
  padding:18px 20px; margin:1.5em 0; overflow-x:auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.prose pre code{ font-family:inherit; color:#d7e3f2; background:none; border:none; padding:0; white-space:pre; font-size:inherit; }

/* Tables — the article uses many spec tables */
.prose .table-scroll{ margin:1.6em 0; overflow-x:auto; border-radius:12px; }
.prose table{
  width:100%; margin:0; border-collapse:separate; border-spacing:0; font-size:14.5px;
  border:1px solid var(--line-strong); border-radius:12px; overflow:hidden;
}
/* bare tables (no wrapper) still get spacing */
.prose > table{ margin:1.6em 0; }
.prose thead th{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  text-align:left; color:var(--blue); background:rgba(79,155,255,.07);
  padding:11px 14px; border-bottom:1px solid var(--line-strong);
}
.prose tbody td{ padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:#dcdbd4; }
.prose tbody tr:last-child td{ border-bottom:none; }
.prose tbody tr:nth-child(even){ background:rgba(255,255,255,.015); }
.prose td code, .prose th code{ white-space:normal; }

.prose img{ max-width:100%; height:auto; border-radius:12px; border:1px solid var(--line); }

/* ---------- Author card ---------- */
.scribe{
  display:flex; align-items:center; gap:16px; margin:40px 0 0;
  padding:22px 24px; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--surface-2), var(--bg-2));
}
.scribe-avatar{ width:52px; height:52px; border-radius:14px; flex:none; border:1px solid var(--line-strong); }
.scribe-body{ min-width:0; }
.scribe-name{ font-family:var(--font-display); font-weight:700; font-size:16px; }
.scribe-bio{ color:var(--muted); font-size:14px; margin-top:2px; }

/* ---------- Prev / next ---------- */
.readnext{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }
.readnext a{
  border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  transition:transform .2s, border-color .2s;
}
.readnext a:hover{ transform:translateY(-3px); border-color:var(--blue); }
.readnext .rn-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.readnext .rn-title{ font-family:var(--font-display); font-weight:700; font-size:16px; margin-top:6px; line-height:1.2; }
.readnext .rn-next{ text-align:right; }

/* ---------- Comments (BlanketCat widget, re-themed dark) ---------- */
/* the widget ships its own "Discussion N" header, so hide our duplicate one */
.comments-head{ display:none; }
/* hide the injected widget on utility pages */
.reading-plain ~ .content-wrap{ display:none; }

/* Readable panel + dark palette (the widget's variables, remapped) */
#blanketcat-comments{
  --bcc-surface: rgba(255,255,255,.035) !important;
  --bcc-border: rgba(255,255,255,.12) !important;
  --bcc-text: #e9e8e1 !important;
  --bcc-muted: #aab0b8 !important;
  --bcc-accent: var(--blue) !important;
  --bcc-accent-light: rgba(79,155,255,.12) !important;
  --bcc-accent-hover: var(--blue-deep) !important;
  --bcc-danger: #ff8f8f !important;
  --bcc-font: var(--font-body) !important;
  --bcc-serif: var(--font-display) !important;
  --bcc-shadow: none !important;
  --bcc-shadow-md: 0 12px 36px -16px rgba(0,0,0,.6) !important;
  max-width:none !important; margin:34px 0 0 !important; padding:26px 28px 20px !important;
  background:linear-gradient(180deg, var(--surface), var(--bg-2)) !important;
  border:1px solid var(--line) !important; border-radius:var(--radius) !important;
  color:#e9e8e1 !important;
}
/* header + count */
#blanketcat-comments .bcc-header{ border-bottom-color:rgba(255,255,255,.12) !important; margin-bottom:1.5rem !important; }
#blanketcat-comments .bcc-header h3{ color:var(--ink) !important; letter-spacing:-.01em !important; }
#blanketcat-comments .bcc-header-count{ color:var(--blue) !important; }
/* comment text, dates, borders (hardcoded light in the widget) */
#blanketcat-comments .bcc-body{ color:#e3e2db !important; }
#blanketcat-comments .bcc-comment{ border-bottom-color:rgba(255,255,255,.08) !important; }
#blanketcat-comments .bcc-replies{ border-left-color:rgba(255,255,255,.12) !important; }
#blanketcat-comments .bcc-date, #blanketcat-comments .bcc-edited{ color:var(--muted-2) !important; }
/* buttons: fix the widget's hardcoded light hover states */
#blanketcat-comments .bcc-btn{ background:rgba(255,255,255,.03) !important; color:var(--ink) !important; border-color:var(--line-strong) !important; }
#blanketcat-comments .bcc-btn:hover{ background:rgba(255,255,255,.07) !important; border-color:var(--blue) !important; }
#blanketcat-comments .bcc-btn-accent{ background:var(--blue) !important; border-color:var(--blue) !important; color:#0a0b0d !important; }
#blanketcat-comments .bcc-btn-accent:hover{ background:var(--blue-deep) !important; border-color:var(--blue-deep) !important; }
#blanketcat-comments .bcc-btn-ghost{ background:none !important; border:none !important; }
/* vote pill + hover */
#blanketcat-comments .bcc-vote-group{ background:rgba(255,255,255,.05) !important; }
#blanketcat-comments .bcc-vote:hover{ background:rgba(79,155,255,.14) !important; }
/* avatars on-brand */
#blanketcat-comments .bcc-avatar{ background:linear-gradient(135deg, var(--blue), var(--blue-deep)) !important; color:#eaf2ff !important; }
/* form fields */
#blanketcat-comments input, #blanketcat-comments textarea{
  background:rgba(10,11,13,.5) !important; color:var(--ink) !important; border-color:var(--line-strong) !important;
}
#blanketcat-comments input::placeholder, #blanketcat-comments textarea::placeholder{ color:var(--muted-2) !important; }
/* "Join the conversation" CTA panel */
#blanketcat-comments .bcc-cta{ background:var(--bcc-accent-light) !important; border:1px solid rgba(79,155,255,.2) !important;
  border-radius:14px !important; padding:18px 20px !important; }
#blanketcat-comments .bcc-cta p{ color:var(--ink) !important; }

/* ---------- Subscribe ---------- */
.subscribe-section{
  width:min(var(--maxw), 100% - 48px); margin:56px auto 0; padding:34px 40px;
  border:1px solid var(--line-strong); border-radius:22px;
  background:
    radial-gradient(560px 200px at 12% 0%, rgba(79,155,255,.12), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--bg-2));
  position:relative; overflow:hidden;
}
.subscribe-eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }
.subscribe-heading{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(22px,3vw,30px); margin:8px 0 8px; }
.subscribe-text{ color:var(--muted); font-size:15.5px; margin:0 0 18px; max-width:56ch; }
.subscribe-form{ display:flex; flex-wrap:wrap; gap:10px; }
.subscribe-input{
  flex:1; min-width:220px; font-family:var(--font-mono); font-size:14px; color:var(--ink);
  background:rgba(255,255,255,.03); border:1px solid var(--line-strong);
  border-radius:999px; padding:13px 18px; outline:none; transition:border-color .2s, background .2s;
}
.subscribe-input::placeholder{ color:var(--muted-2); }
.subscribe-input:focus{ border-color:var(--blue); background:rgba(79,155,255,.05); }
.subscribe-btn{
  font-family:var(--font-body); font-weight:700; font-size:14px; cursor:pointer;
  padding:13px 24px; border-radius:999px; border:1px solid transparent;
  background:linear-gradient(180deg, var(--blue), var(--blue-deep)); color:#0a0b0d;
  box-shadow:0 12px 30px -10px rgba(79,155,255,.5); transition:transform .18s, box-shadow .2s;
}
.subscribe-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(79,155,255,.65); }
.subscribe-btn:disabled{ opacity:.6; cursor:default; transform:none; }
.subscribe-note{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2); margin:12px 0 0; }
.subscribe-status{ font-family:var(--font-mono); font-size:13px; color:var(--cyan); margin:12px 0 0; min-height:1em; }
.subscribe-status.error{ color:#ff8f8f; }

/* ---------- Pagination ---------- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:14px; margin:40px auto 0;
  width:min(var(--maxw), 100% - 48px);
  font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.pagination a{ padding:9px 16px; border:1px solid var(--line-strong); border-radius:999px; transition:border-color .2s, color .2s; }
.pagination a:hover{ border-color:var(--blue); color:var(--blue); }
.pagination .page-of{ color:var(--muted-2); }

/* ---------- Empty state ---------- */
.empty-state{ text-align:center; color:var(--muted); padding:60px 20px;
  width:min(var(--maxw), 100% - 48px); margin:0 auto; }
.empty-state .kicker{ display:block; margin-bottom:10px; }

/* ---------- Footer ---------- */
.site-footer{
  position:relative; z-index:2; width:100%; margin:88px 0 0;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(79,155,255,.035));
}
.foot-inner{
  width:min(var(--shell), 100% - var(--gutter));
  margin:0 auto; padding:48px 0 36px;
  display:grid; grid-template-columns:1.5fr .9fr 1.5fr; gap:40px 48px; align-items:start;
}
.foot-brand-col{ max-width:42ch; }
.foot-brand{ display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); }
.foot-tag{ color:var(--muted); font-size:14px; line-height:1.65; margin:14px 0 20px; }
.foot-social{ display:flex; gap:10px; }
.foot-social a{ width:40px; height:40px; display:grid; place-items:center; border-radius:12px;
  border:1px solid var(--line-strong); color:var(--muted); background:rgba(255,255,255,.02);
  transition:color .2s, border-color .2s, transform .18s, background .2s; }
.foot-social a:hover{ color:var(--blue); border-color:var(--blue); background:rgba(79,155,255,.08); transform:translateY(-2px); }
.foot-social svg{ width:18px; height:18px; }
.foot-links{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
.foot-links-head{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:3px; }
.foot-links a{ color:var(--muted); font-size:14.5px; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.foot-links a:hover{ color:var(--blue); border-color:rgba(79,155,255,.4); }
.foot-bottom{
  width:min(var(--shell), 100% - var(--gutter));
  margin:0 auto; padding:20px 0; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; color:var(--muted-2);
}
.foot-bottom-note{ color:var(--muted-2); }

/* footer newsletter column (right side) */
.foot-subscribe{ min-width:0; }
.foot-sub-text{ color:var(--muted); font-size:14px; line-height:1.6; margin:12px 0 16px; max-width:36ch; }
.foot-sub-form{ display:flex; flex-direction:column; gap:9px; max-width:300px; }
.foot-sub-input{
  font-family:var(--font-mono); font-size:13.5px; color:var(--ink);
  background:rgba(10,11,13,.5); border:1px solid var(--line-strong);
  border-radius:11px; padding:12px 15px; outline:none; transition:border-color .2s, background .2s, box-shadow .2s;
}
.foot-sub-input::placeholder{ color:var(--muted-2); }
.foot-sub-input:focus{ border-color:var(--blue); background:rgba(79,155,255,.06); box-shadow:0 0 0 4px rgba(79,155,255,.1); }
.foot-sub-btn{
  font-family:var(--font-body); font-weight:700; font-size:14px; cursor:pointer;
  padding:12px 18px; border-radius:11px; border:1px solid transparent; color:#0a0b0d;
  background:linear-gradient(180deg, var(--blue), var(--blue-deep));
  box-shadow:0 12px 28px -12px rgba(79,155,255,.6); transition:transform .18s, box-shadow .2s;
}
.foot-sub-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -12px rgba(79,155,255,.7); }
.foot-sub-btn:disabled{ opacity:.6; cursor:default; transform:none; }
.foot-sub-status{ font-family:var(--font-mono); font-size:12px; color:var(--cyan); margin:11px 0 0; min-height:1em; }
.foot-sub-status.error{ color:#ff8f8f; }
.foot-sub-note{ font-family:var(--font-mono); font-size:11px; color:var(--muted-2); margin:10px 0 0; }

/* ---------- Newsletter dock: full-width, anchored to the bottom ---------- */
.news-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  border-top:1px solid rgba(79,155,255,.32);
  background:
    radial-gradient(700px 260px at 20% 140%, rgba(79,155,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(16,19,24,.90), rgba(10,11,13,.97));
  box-shadow:0 -26px 70px -24px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transform:translateY(102%); transition:transform .42s cubic-bezier(.2,.75,.2,1);
}
.news-dock.show{ transform:translateY(0); }
.news-dock-inner{
  position:relative; width:min(var(--shell), 100% - var(--gutter)); margin:0 auto;
  padding:20px 0; display:grid; grid-template-columns:auto 1fr auto auto; gap:26px; align-items:center;
}
.news-dock-mark{
  flex:none; width:56px; height:56px; display:grid; place-items:center; border-radius:16px;
  color:var(--blue); background:rgba(79,155,255,.10); border:1px solid rgba(79,155,255,.28);
}
.news-dock-mark svg{ width:26px; height:26px; }
.news-dock-copy{ min-width:0; }
.news-dock-eyebrow{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
.news-dock-title{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(20px,2.4vw,26px); line-height:1.1; margin:5px 0 5px; }
.news-dock-text{ color:var(--muted); font-size:14.5px; line-height:1.5; margin:0; max-width:64ch; }
.news-dock-form{ min-width:0; }
.news-dock-row{ display:flex; gap:10px; }
.news-dock-input{
  width:min(280px, 46vw); font-family:var(--font-mono); font-size:14px; color:var(--ink);
  background:rgba(10,11,13,.55); border:1px solid var(--line-strong);
  border-radius:999px; padding:14px 20px; outline:none; transition:border-color .2s, background .2s, box-shadow .2s;
}
.news-dock-input::placeholder{ color:var(--muted-2); }
.news-dock-input:focus{ border-color:var(--blue); background:rgba(79,155,255,.06); box-shadow:0 0 0 4px rgba(79,155,255,.1); }
.news-dock-btn{
  flex:none; font-family:var(--font-body); font-weight:700; font-size:14.5px; cursor:pointer;
  padding:14px 28px; border-radius:999px; border:1px solid transparent; color:#0a0b0d;
  background:linear-gradient(180deg, var(--blue), var(--blue-deep));
  box-shadow:0 14px 34px -12px rgba(79,155,255,.75); transition:transform .18s, box-shadow .2s;
}
.news-dock-btn:hover{ transform:translateY(-2px); box-shadow:0 20px 46px -12px rgba(79,155,255,.85); }
.news-dock-btn:disabled{ opacity:.6; cursor:default; transform:none; }
.news-dock-status{ font-family:var(--font-mono); font-size:12px; color:var(--cyan); margin:8px 2px 0; min-height:0; }
.news-dock-status.error{ color:#ff8f8f; }
.news-close{
  align-self:center; flex:none; width:32px; height:32px;
  display:grid; place-items:center; cursor:pointer; color:var(--muted-2);
  background:rgba(255,255,255,.03); border:1px solid var(--line-strong); border-radius:9px;
  transition:color .2s, border-color .2s;
}
.news-close:hover{ color:var(--ink); border-color:var(--blue); }
.news-close svg{ width:15px; height:15px; }
@media (max-width:820px){
  .news-dock-mark{ display:none; }
  .news-dock-inner{ grid-template-columns:1fr; gap:14px; padding:18px 0 20px; }
  .news-dock-text{ display:none; }
  .news-dock-copy{ padding-right:40px; }
  .news-dock-row{ width:100%; }
  .news-dock-input{ flex:1; width:auto; }
  .news-close{ position:absolute; top:14px; right:0; align-self:auto; }
}
@media (max-width:480px){
  .news-dock-row{ flex-direction:column; }
  .news-dock-btn{ padding:13px; }
}

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .masthead{ grid-template-columns:1fr; gap:30px; }
  .masthead-portrait{ flex-direction:row; align-self:start; padding:16px 18px; }
  .masthead-portrait img{ width:92px; height:92px; }
  .mp-meta{ align-items:flex-start; text-align:left; }
  .foot-inner{ grid-template-columns:1fr 1fr; gap:32px 40px; }
  .foot-brand-col{ grid-column:1 / -1; max-width:52ch; }
}
@media (max-width:820px){
  .readnext{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .nav-inner{ grid-template-columns:1fr auto; grid-template-areas:"brand actions" "search search"; gap:12px 16px; }
  .nav-search{ max-width:none; }
}
@media (max-width:680px){
  :root{ --gutter:40px; }
  .nav-inner{ padding:16px 0; }
  .brand-text{ font-size:16px; }
  .nav-link.mail{ display:none; }
  main{ padding:0 20px 30px; }
  .masthead{ padding:30px 22px; }
  .post-card{ padding:22px 20px; }
  .post-card.has-media{ grid-template-columns:1fr; gap:16px; }
  .post-thumb{ aspect-ratio:16/9; }
  .subscribe-section{ padding:26px 22px; }
  .article-head h1{ font-size:clamp(27px,8vw,38px); }
  .prose{ font-size:16px; }
  .foot-inner{ grid-template-columns:1fr; gap:30px; padding:36px 0 30px; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; gap:6px; }
}

/* ---------- Table of contents (built by assets/toc.js on article pages) ---------- */
.prose h2, .prose h3{ scroll-margin-top:96px; }

.toc, .toc-fab, .toc-backdrop{ display:none; }

.toc{
  position:sticky; top:88px; z-index:20; width:100%;
  flex-direction:column; max-height:calc(100vh - 108px);
  font-family:var(--font-mono);
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line-strong); border-radius:16px;
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
body.toc-open .toc{ display:flex; }
body:not(.toc-open) .toc-fab{ display:grid; }

.toc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--line); flex:none; }
.toc-title{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }
.toc-close{ display:grid; place-items:center; width:26px; height:26px; flex:none;
  background:rgba(255,255,255,.03); color:var(--muted); border:1px solid var(--line-strong);
  border-radius:8px; cursor:pointer; transition:color .2s, border-color .2s, background .2s; }
.toc-close:hover{ color:var(--ink); border-color:var(--blue); }

.toc-nav{ overflow-y:auto; padding:8px 6px 12px; scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent; }
.toc-nav::-webkit-scrollbar{ width:8px; }
.toc-nav::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:8px; }
.toc-nav ul{ list-style:none; margin:0; padding:0; }
.toc-nav a{ display:block; padding:6px 12px; font-size:12.5px; line-height:1.35; color:var(--muted);
  border-left:2px solid transparent; border-radius:0 6px 6px 0;
  transition:color .15s, background .15s, border-color .15s; }
.toc-nav a:hover{ color:var(--ink); background:rgba(255,255,255,.03); }
.toc-l3 a{ padding-left:26px; font-size:12px; color:var(--muted-2); }
.toc-nav a.is-active{ color:var(--blue); border-left-color:var(--blue); background:rgba(79,155,255,.08); }

.toc-fab{ position:fixed; z-index:40; place-items:center;
  width:44px; height:44px;
  background:linear-gradient(180deg, var(--surface-2), var(--bg-2)); color:var(--blue);
  border:1px solid var(--line-strong); border-radius:12px; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .18s, border-color .2s, color .2s; }
.toc-fab:hover{ transform:translateY(-2px); border-color:var(--blue); }

/* Desktop closed: reopen button in the top-right corner */
@media (min-width:1080px){
  .toc-fab{ top:96px; right:24px; }
}
/* Narrow: single-column article; TOC is a right-hand drawer + backdrop,
   reopened by a bottom-right floating button. */
@media (max-width:1079px){
  .article-shell{ grid-template-columns:minmax(0, var(--readw)) !important; }
  .toc{ position:fixed; top:0; right:0; bottom:0; width:min(330px, 88vw);
    max-height:100vh; border-radius:0; border-top:none; border-bottom:none; border-right:none; }
  .toc-fab{ bottom:20px; right:20px; width:50px; height:50px; }
  body.toc-open .toc-backdrop{ display:block; position:fixed; inset:0; z-index:39;
    background:rgba(4,5,7,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
}
@media print{ .toc, .toc-fab, .toc-backdrop{ display:none !important; } }

/* ---------- About / author profile page ---------- */
.profile{ width:min(680px, 100% - var(--gutter)); margin:36px auto 0; }
.profile-card{
  display:flex; gap:26px; align-items:center; flex-wrap:wrap;
  padding:30px 32px; border:1px solid var(--line-strong); border-radius:22px;
  background:radial-gradient(560px 220px at 12% 0%, rgba(79,155,255,.10), transparent 60%),
             linear-gradient(180deg, var(--surface-2), var(--bg-2));
}
.profile-avatar{ width:118px; height:118px; border-radius:24px; object-fit:cover;
  border:1px solid var(--line-strong); flex:none; }
.profile-id{ min-width:0; }
.profile-name{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(26px,4vw,34px); line-height:1.05; }
.profile-handle{ font-family:var(--font-mono); font-size:13px; color:var(--blue); margin-top:5px; }
.profile-role{ color:var(--muted); font-size:15px; margin-top:9px; }
.profile-bio{ color:#dcdbd4; font-size:16.5px; line-height:1.7; margin:26px 0 0; }
.profile-bio p{ margin:0 0 1em; }
.profile-bio a{ color:var(--blue); border-bottom:1px solid rgba(79,155,255,.4); }
/* focuses chips: clean body-font labels, not cramped mono tags */
.profile-tags{ display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 4px; }
.profile-tags .chip{
  font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:0;
  color:#cfe0f5; background:rgba(79,155,255,.09);
  border:1px solid rgba(79,155,255,.22); padding:7px 14px; cursor:default;
}
.profile-tags .chip:hover{ color:#cfe0f5; border-color:rgba(79,155,255,.22); }

.profile-links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:20px 0 0; }
.profile-link{ display:flex; align-items:center; gap:14px; padding:15px 16px;
  border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  transition:transform .18s, border-color .2s, box-shadow .2s; }
.profile-link:hover{ transform:translateY(-2px); border-color:var(--blue); box-shadow:var(--shadow-glow); }
.pl-icon{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:11px;
  background:rgba(79,155,255,.08); border:1px solid rgba(79,155,255,.22); color:var(--blue); }
.pl-icon svg{ width:20px; height:20px; }
.pl-text{ min-width:0; display:flex; flex-direction:column; }
.pl-name{ font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--ink); line-height:1.2; }
.pl-sub{ font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:560px){ .profile-card{ flex-direction:column; text-align:center; align-items:center; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .toc-fab, .toc-close{ transition:none; }
}