/* ───────────────────────────────────────────────────────────────────────────
   PrivateMind blog theme — ported from the wiki/docs design system.
   Same tokens (html.dark / html.light), same fonts (Inter / JetBrains Mono),
   same emerald→cyan gradient signature. No CDN, fonts self-hosted.

   Color system: blue --accent = interactive/clickable/focused;
   teal + the emerald→cyan gradient = brand/decorative.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Fonts ───────────────────────────────────────────────────────────────── */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

/* ── Tokens (mirrored from layout.html) ──────────────────────────────────── */
:root, html.dark {
  --bg:hsl(222 16% 12%); --bg-elev:hsl(222 16% 13%); --bg-card:hsl(222 14% 15%);
  --bg-card-2:hsl(222 14% 16%); --bg-code:hsl(220 13% 10%); --bg-inline-code:hsl(220 13% 17%);
  --border:hsl(220 13% 20%); --border-strong:hsl(220 14% 26%);
  --text:hsl(210 20% 96%); --text-muted:hsl(218 13% 68%); --text-faint:hsl(218 13% 58%);
  --accent:hsl(217 91% 60%); --teal:hsl(160 84% 39%);
  --grad-1:hsl(160 84% 39%); --grad-2:hsl(172 66% 50%); --grad-3:hsl(190 84% 45%);
  --amber:hsl(38 92% 50%); --red:hsl(0 84% 62%); --purple:#a78bfa; --pink:#f472b6;
  --row-hover:hsl(222 14% 17% / .5); --nav-link-hover-bg:hsl(222 14% 19%);
  --neutral-chip-bg:hsl(222 14% 17%);
  --header-bg:hsl(222 16% 12% / .78);
  --shadow-card:0 1px 2px 0 rgb(0 0 0 / .25), 0 4px 16px 0 rgb(0 0 0 / .12);
  --shadow-stat:0 1px 2px 0 rgb(0 0 0 / .2);
  --shadow-stat-hover:0 4px 16px 0 rgb(0 0 0 / .18);
}
html.light {
  --bg:hsl(0 0% 100%); --bg-elev:hsl(0 0% 98%); --bg-card:hsl(0 0% 100%);
  --bg-card-2:hsl(210 40% 96.1%); --bg-code:hsl(210 40% 98%); --bg-inline-code:hsl(210 40% 94%);
  --border:hsl(214.3 31.8% 91.4%); --border-strong:hsl(214.3 25% 82%);
  --text:hsl(222.2 84% 4.9%); --text-muted:hsl(215.4 16.3% 38%); --text-faint:hsl(215.4 13% 45%);
  --accent:hsl(217 91% 50%); --teal:hsl(160 84% 32%);
  --grad-1:hsl(160 84% 32%); --grad-2:hsl(172 66% 38%); --grad-3:hsl(190 84% 36%);
  --amber:hsl(38 92% 42%); --red:hsl(0 84% 50%); --purple:#7c3aed; --pink:#db2777;
  --row-hover:hsl(210 40% 96.1% / .7); --nav-link-hover-bg:hsl(210 40% 96.1%);
  --neutral-chip-bg:hsl(210 40% 96.1%);
  --header-bg:hsl(0 0% 100% / .82);
  --shadow-card:0 1px 2px 0 rgb(15 23 42 / .06), 0 4px 16px 0 rgb(15 23 42 / .06);
  --shadow-stat:0 1px 2px 0 rgb(15 23 42 / .04);
  --shadow-stat-hover:0 4px 16px 0 rgb(15 23 42 / .08);
}
:root { --measure:48rem; --maxw:72rem; }

/* ── Base ────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
* { -webkit-font-smoothing:antialiased; }
html { -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
body {
  margin:0; font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text);
  line-height:1.6; font-feature-settings:'cv11','ss01';
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--accent); text-decoration:none; }
.mono { font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; }
.gradient-text {
  background:linear-gradient(135deg,var(--grad-1),var(--grad-2),var(--grad-3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  line-height:1.15; padding-bottom:.12em;
}
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 1rem; }
@media (min-width:768px){ .wrap{ padding:0 1.5rem; } }
.hairline { border-color:var(--border); }
.hairline-strong { border-color:var(--border-strong); }

/* skip-to-content link */
.skip-link {
  position:absolute; left:.5rem; top:.5rem; z-index:60;
  transform:translateY(-150%); transition:transform .15s;
  background:var(--bg-card); color:var(--text);
  border:1px solid var(--border-strong); border-radius:.5rem;
  padding:.5rem .85rem; font-size:.825rem; font-weight:600;
}
.skip-link:focus-visible { transform:translateY(0); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:40; border-bottom:1px solid var(--border);
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
}
.site-header-inner {
  max-width:var(--maxw); margin:0 auto; padding:.75rem 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
@media (min-width:768px){ .site-header-inner{ padding:.75rem 1.5rem; } }
.brand { display:flex; align-items:center; gap:.5rem; min-width:0; }
.brand img { height:22px; width:auto; display:block; }
.brand-chip {
  font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--text-muted);
  padding:.1rem .4rem; border:1px solid var(--border-strong); border-radius:.25rem;
}
.header-actions { display:flex; align-items:center; gap:.6rem; }

/* header auth buttons — same format as www.privatemind.com */
.nav-link-login, .btn-signup {
  display:inline-flex; align-items:center; justify-content:center; height:34px;
  padding:0 8px; border-radius:6px; font-size:13px; font-weight:400; line-height:16px;
  white-space:nowrap; box-shadow:0 1px 1.5px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
}
.nav-link-login { background:#fff; border:1px solid #e1e8f1; color:#2a2e4e; }
.btn-signup { background:#3c83f6; border:none; color:#f8fafc; }
.nav-link-login:hover, .btn-signup:hover { filter:brightness(1.05); }
:root.dark .nav-link-login { background:var(--bg-card); border-color:var(--border); color:var(--text); }

/* primary site navigation (Ghost {{navigation}}) */
.site-nav { display:flex; align-items:center; }
.site-nav ul { list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
.site-nav a { color:var(--text-muted); font-size:.825rem; font-weight:500; }
@media (min-width:768px){
  .site-nav { display:flex; align-items:center; margin-left:.5rem; }
  .site-nav ul { list-style:none; display:flex; gap:1.25rem; margin:0; padding:0; }
  .site-nav a {
    color:var(--text-muted); font-size:.875rem; font-weight:500;
    background-image:linear-gradient(var(--accent),var(--accent));
    background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
    transition:background-size .2s ease, color .15s;
  }
  .site-nav a:hover { color:var(--accent); background-size:100% 1px; }
  .site-nav .nav-current a { color:var(--text); }
}

.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid var(--border-strong); border-radius:.375rem; background:var(--bg-card);
  color:var(--text-muted); cursor:pointer; transition:color .15s,border-color .15s;
}
.theme-toggle:hover { color:var(--accent); border-color:var(--accent); }
.theme-toggle .icon-sun{ display:none; } html.light .theme-toggle .icon-sun{ display:block; }
html.light .theme-toggle .icon-moon{ display:none; }
.btn-subscribe {
  display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border-radius:.375rem;
  font-size:.825rem; font-weight:600; color:#fff;
  /* Button-only stops, not the brand trio. White on --grad-* measures 1.87:1
     in dark and 3.20:1 in light: fine for a heading painted onto the page,
     unreadable as a fill behind a label. These hold 4.60:1 at the worst
     stop and are the same values the status pages and the newsletter pages
     use, so one filled button looks the same everywhere. */
  background:linear-gradient(135deg,hsl(160 84% 28%),hsl(172 66% 31%) 55%,hsl(190 84% 31%));
  box-shadow:var(--shadow-stat); transition:transform .15s,box-shadow .15s;
}
.btn-subscribe { padding-block:0; height:34px; }
.btn-subscribe:hover { transform:translateY(-1px); box-shadow:var(--shadow-stat-hover); filter:brightness(1.06); }
.btn-subscribe:active { transform:translateY(0); box-shadow:var(--shadow-stat); filter:brightness(.95); }
.theme-toggle:active, .pagination-btn:active { transform:translateY(1px); }
.card:active { transform:translateY(0); }

/* ── Home hero ───────────────────────────────────────────────────────────── */
.hero { max-width:var(--maxw); margin:0 auto; padding:3.5rem 1rem 2.5rem; position:relative; }
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(hsl(160 84% 39% / .22) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 55% 110% at 80% 35%, #000 35%, transparent 78%),
                     linear-gradient(to right, #000 82%, transparent 99%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse 55% 110% at 80% 35%, #000 35%, transparent 78%),
             linear-gradient(to right, #000 82%, transparent 99%);
  mask-composite:intersect;
}
@media (min-width:768px){ .hero{ padding:4.5rem 1.5rem 3rem; } }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .7rem .25rem .6rem;
  border-radius:9999px; border:1px solid hsl(160 84% 39% / .3); background:hsl(160 84% 39% / .06);
  color:var(--teal); font-size:.7rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
.hero-eyebrow-dot { width:.45rem; height:.45rem; border-radius:9999px; background:var(--teal); }
.hero h1 {
  margin:1.1rem 0 0; font-size:clamp(2.2rem,1.4rem+3.2vw,3.4rem); font-weight:600;
  line-height:1.08; letter-spacing:-.025em; max-width:18ch;
}
.hero p {
  margin:1.1rem 0 0; max-width:52ch; font-size:1.2rem; line-height:1.6; color:var(--text-muted);
}

/* ── Post grid (home) ────────────────────────────────────────────────────── */
.feed { max-width:var(--maxw); margin:0 auto; padding:1rem 1rem 5rem; }
@media (min-width:768px){ .feed{ padding:1rem 1.5rem 6rem; } }
.feed-label {
  font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-faint); margin:0 0 1.25rem; padding-bottom:.6rem; border-bottom:1px solid var(--border);
}
.card-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){
  /* 3-up only when there are enough cards to fill a row under the feature */
  .card-grid:has(> .card:nth-child(4)){ grid-template-columns:repeat(3,1fr); }
  /* lone trailing card in a 3-col row (5, 8, 11... posts): center it */
  .card-grid:has(> .card:nth-child(4)) > .card:nth-child(3n+2):last-child{ grid-column:2; }
}

.card {
  position:relative;
  display:flex; flex-direction:column; overflow:hidden; border-radius:.7rem;
  border:1px solid var(--border); background:linear-gradient(135deg,var(--bg-card-2),var(--bg-card));
  box-shadow:var(--shadow-stat); transition:transform .15s,box-shadow .15s,border-color .15s;
}
.card:hover { transform:translateY(-2px); border-color:var(--border-strong); box-shadow:0 0 0 1px var(--border-strong),var(--shadow-stat-hover); }
.card-img { aspect-ratio:16/9; overflow:hidden; background:var(--bg-code); }
.card-img img { width:100%; height:100%; object-fit:cover; }
.card-img--placeholder {
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, hsl(160 84% 39% / .12), hsl(190 84% 45% / .10));
}
.card-img-mark {
  font-family:'JetBrains Mono',monospace; font-weight:600; font-size:1.4rem;
  letter-spacing:.08em; color:var(--teal); opacity:.7;
}
.card-body { padding:1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; flex:1; gap:.55rem; }
.card-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.tag-chip {
  font-size:.6875rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--teal); padding:.12rem .5rem; border-radius:9999px;
  border:1px solid hsl(160 84% 39% / .3); background:hsl(160 84% 39% / .06);
}
.card-title { margin:0; font-size:1.075rem; font-weight:600; line-height:1.3; letter-spacing:-.012em; color:var(--text); }
.card-link { color:inherit; text-decoration:none; }
.card-link::after { content:""; position:absolute; inset:0; border-radius:inherit; }
.card-link:focus-visible { outline:none; }
.card:hover .card-title { color:var(--accent); }
.card:focus-within {
  border-color:var(--border-strong);
  box-shadow:0 0 0 2px var(--accent), var(--shadow-stat-hover);
}
.card-excerpt {
  margin:0; font-size:.85rem; line-height:1.55; color:var(--text-muted); flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card-meta { display:flex; flex-wrap:wrap; row-gap:.25rem; align-items:center; gap:.5rem; margin-top:.4rem; font-size:.75rem; color:var(--text-muted); }
.card-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--text-faint); }
.avatar { width:22px; height:22px; border-radius:50%; object-fit:cover; }

/* feature post (lead story on home page) */
@media (min-width:640px){
  .card--feature { grid-column:1 / -1; }
}
@media (min-width:1024px){
  .card--feature { grid-column:1 / -1; flex-direction:row; }
  .card--feature .card-img { flex:1 1 55%; aspect-ratio:16/10; }
  .card--feature .card-body { flex:1 1 45%; justify-content:center; padding:2rem; }
  .card--feature .card-title { font-size:1.6rem; }
  .card--feature .card-excerpt { -webkit-line-clamp:4; font-size:.95rem; }
}

/* ── Single post ─────────────────────────────────────────────────────────── */
.post-head { max-width:var(--measure); margin:0 auto; padding:3rem 1rem 0; }
@media (min-width:768px){ .post-head{ padding:4rem 1.5rem 0; } }
.post-head .tag-chip { margin-bottom:1rem; }
.post-title {
  font-size:clamp(2rem,1.4rem+2.6vw,2.9rem); font-weight:600; line-height:1.1;
  letter-spacing:-.022em; margin:.6rem 0 0; text-wrap:balance;
}
.post-excerpt { margin:1rem 0 0; font-size:1.2rem; line-height:1.55; color:var(--text-muted); text-wrap:pretty; }
.post-byline {
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:1.5rem 0 0; padding-bottom:1.5rem;
  font-size:.85rem; color:var(--text-faint); border-bottom:1px solid var(--border);
}
.post-byline .dot { width:3px; height:3px; border-radius:50%; background:var(--text-faint); }
.post-byline .avatar { width:30px; height:30px; }
.post-byline strong { color:var(--text); font-weight:600; }
.post-feature { max-width:var(--maxw); margin:2rem auto 0; padding:0 1rem; }
@media (min-width:768px){ .post-feature{ padding:0 1.5rem; } }
.post-feature img {
  width:100%; border-radius:.7rem; box-shadow:var(--shadow-card);
  aspect-ratio:21/9; object-fit:cover;   /* texture band, not a second headline */
}

/* ── Prose (ported from wiki.css) ────────────────────────────────────────── */
.prose { max-width:var(--measure); margin:2.5rem auto 0; padding:0 1rem 5rem; line-height:1.72; font-size:1rem; }
@media (min-width:768px){ .prose{ padding:0 1.5rem 6rem; font-size:1.0625rem; } }
.prose > *+* { margin-top:1.1rem; }

/* ── Koenig card widths and galleries ────────────────────────────────────────
   The editor can set an image or gallery wider than the reading measure. The
   prose column is --measure inside a --maxw page, so "wide" breaks out to the
   page width and "full" goes edge to edge. Without these the classes are
   emitted into the HTML and do nothing. */
.prose .kg-width-wide { max-width:var(--maxw); width:calc(100vw - 2rem); margin-left:50%; transform:translateX(-50%); }
.prose .kg-width-full { max-width:none; width:100vw; margin-left:50%; transform:translateX(-50%); }
/* 100vw includes the scrollbar's width, so a full-bleed card would otherwise
   push a horizontal scrollbar onto the page on any platform with classic
   scrollbars. clip rather than hidden: hidden would make main a scroll
   container and break the sticky header above it. */
main { overflow-x:clip; }
.prose .kg-width-wide img, .prose .kg-width-full img { width:100%; height:auto; }
.prose .kg-width-full img { border-radius:0; }
.prose .kg-gallery-container { display:flex; flex-direction:column; gap:.75rem; }
.prose .kg-gallery-row { display:flex; gap:.75rem; }
/* flex on the intrinsic ratio keeps every image in a row the same height. */
.prose .kg-gallery-image img { display:block; width:100%; height:100%; object-fit:cover; border-radius:.5rem; }
@media (max-width:640px){
  .prose .kg-gallery-row { flex-direction:column; }
  .prose .kg-width-wide { width:auto; margin-left:0; transform:none; }
}

/* Author archive intro. */
.feed-bio { margin:.5rem 0 0; color:var(--text-muted); max-width:52ch; }
.prose > *+h2 { margin-top:2.5rem; } .prose > *+h3 { margin-top:1.75rem; }
.prose h2+*,.prose h3+* { margin-top:.6rem; }
.prose h2, .prose h3, .prose h4 { scroll-margin-top:5rem; }
.prose h2 {
  font-size:1.5rem; font-weight:600; letter-spacing:-.02em; line-height:1.25;
  padding-bottom:.4rem; border-bottom:1px solid var(--border);
}
.prose h3 { font-size:1.2rem; font-weight:600; letter-spacing:-.012em; line-height:1.35; }
.prose h4 { font-size:1.0625rem; font-weight:600; letter-spacing:-.008em; line-height:1.4; color:var(--text); }
.prose p { margin:1.1rem 0 0; }
.prose > p:first-child { margin-top:0; }
.prose h2 + p, .prose h3 + p, .prose h4 + p { margin-top:.6rem; }
.prose a {
  color:var(--accent); border-bottom:1px solid transparent;
  transition:border-color .15s, color .15s;
}
.prose a:hover { border-bottom-color:color-mix(in srgb, var(--accent) 50%, transparent); }
.prose a > code { color:var(--accent); }
.prose ul,.prose ol { margin:1rem 0; padding-left:1.5rem; }
.prose li { margin:.25rem 0; line-height:1.65; }
.prose li::marker { color:var(--text-faint); }
.prose strong { font-weight:600; color:var(--text); }
.prose > p > img, .prose figure img { border-radius:.6rem; box-shadow:var(--shadow-card); }
.prose img { margin:1.5rem 0; }
.prose figure { margin:1.5rem 0; }
.prose figure img { margin:0; }
.prose figcaption {
  margin-top:.6rem; text-align:center; font-size:.8125rem; line-height:1.5;
  color:var(--text-faint);
}
.prose blockquote {
  border:1px solid hsl(160 84% 39% / .3); background:hsl(160 84% 39% / .06);
  border-radius:.5rem; padding:.875rem 1rem; margin:1.5rem 0; color:var(--text);
}
.prose blockquote p { margin:0; }
.prose :not(pre) > code {
  font-family:'JetBrains Mono',monospace; font-size:.875em; padding:.0625rem .3125rem; border-radius:.25rem;
  background:var(--bg-inline-code); border:1px solid var(--border); color:var(--text);
}
.prose td code, .prose th code { white-space:nowrap; }
.prose pre {
  font-family:'JetBrains Mono',monospace; background:var(--bg-code); border:1px solid var(--border);
  border-radius:.5rem; padding:.875rem 1rem; overflow-x:auto; margin:1.25rem 0;
  font-size:.8125rem; line-height:1.55;
}
.prose pre code { background:none; border:0; padding:0; font-size:inherit; color:var(--text); }
.prose hr { border:0; height:1px; background:var(--border); margin:2.5rem 0; }
.prose table { width:100%; border-collapse:separate; border-spacing:0; font-size:.875rem; margin:1.5rem 0; border:1px solid var(--border); border-radius:.6rem; overflow:hidden; }
.prose th { background:var(--bg-card-2); font-weight:600; font-size:.78rem; letter-spacing:.02em; text-transform:uppercase; text-align:left; padding:.65rem .85rem; border-bottom:1px solid var(--border-strong); }
.prose td { padding:.6rem .85rem; border-bottom:1px solid var(--border); vertical-align:top; }
.prose tbody tr:hover { background:var(--row-hover); }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border);
}
.pagination-pos { font-size:.8rem; color:var(--text-faint); }
.pagination-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem; border-radius:.375rem; font-size:.85rem; font-weight:600;
  color:var(--text-muted); border:1px solid var(--border-strong); background:var(--bg-card);
  transition:color .15s,border-color .15s,transform .15s;
}
.pagination-btn:hover { color:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.pagination-btn.is-disabled { opacity:.4; pointer-events:none; }

/* ── Error page ──────────────────────────────────────────────────────────── */
.error-page {
  max-width:var(--measure); margin:0 auto; padding:6rem 1rem;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.25rem;
}
.error-code { font-family:'JetBrains Mono',monospace; font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
.error-title { margin:0; font-size:clamp(1.8rem,1.3rem+2vw,2.6rem); font-weight:600; letter-spacing:-.02em; line-height:1.15; }
.error-desc { margin:0; max-width:46ch; color:var(--text-muted); font-size:1.05rem; line-height:1.6; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { border-top:1px solid #e1e8f1; margin-top:auto; }
:root.dark .site-footer { border-color:var(--border); }
body { min-height:100svh; display:flex; flex-direction:column; }
main { flex:1 0 auto; }
.site-footer-inner {
  max-width:1280px; margin:0 auto; padding:40px 64px;
  display:flex; justify-content:flex-end;
}
.footer-row {
  display:flex; align-items:center; gap:56px; width:100%;
}
.footer-left {
  flex:1 0 0; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  color:#727881;
}
:root.dark .footer-left { color:var(--text-faint); }
.footer-right {
  flex:1 0 0; display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  text-decoration:none; cursor:pointer; color:#727881;
}
:root.dark .footer-right { color:var(--text-faint); }
.footer-text {
  font-family:"Inter",sans-serif; font-weight:500; font-size:12px;
  letter-spacing:-0.06px; line-height:1.45; color:#727881; margin:0;
}
:root.dark .footer-text { color:var(--text-faint); }
.site-footer svg { display:block; }
.footer-left svg { width:218px; height:37px; }
.footer-right svg { width:149px; height:40px; }
@media (max-width:768px){
  .site-footer-inner { padding:40px 24px; }
  .footer-row { flex-direction:column; gap:24px; align-items:flex-start; }
  .footer-right { align-items:flex-start; }
}
@media (min-width:768px){ .site-footer-inner{ } }

/* ── Subscribe band ──────────────────────────────────────────────────────── */
.subscribe-band {
  max-width:var(--maxw); margin:0 auto; padding:0 1rem 1rem;
}
@media (min-width:768px){ .subscribe-band{ padding:0 1.5rem 2rem; } }
.subscribe-card {
  border:1px solid var(--border); border-radius:.9rem; padding:2.5rem 1.5rem; text-align:center;
  background:linear-gradient(135deg,var(--bg-card-2),var(--bg-card));
  box-shadow:var(--shadow-card);
}
.subscribe-card h2 { margin:0; font-size:1.6rem; font-weight:600; letter-spacing:-.02em; }
.subscribe-card p { margin:.6rem auto 1.4rem; max-width:46ch; color:var(--text-muted); }
/* Email and RSS side by side, stacking before they can crowd each other. */
.subscribe-actions { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.btn-ghost {
  display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; padding-block:0; height:34px;
  border:1px solid var(--border-strong); border-radius:.375rem;
  font-size:.825rem; font-weight:600; color:var(--text-muted); background:var(--bg-card);
  transition:color .15s,border-color .15s,transform .15s;
}
.btn-ghost:hover { color:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.btn-ghost:active { transform:translateY(0); }

:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:.3rem; }

/* touch targets */
@media (hover:none) and (pointer:coarse){
  .theme-toggle { width:44px; height:44px; }
  .btn-subscribe { height:44px; }
  .pagination-btn { padding:.65rem 1rem; }
}

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition-duration:.01ms!important; animation-duration:.01ms!important; } }


/* ── Design-pass additions ──────────────────────────────────────────────── */
.mono { font-family:'JetBrains Mono',ui-monospace,monospace; letter-spacing:.05em; color:var(--text-faint); }

/* mono metadata: the cheapest engineering-blog tell */
.card-meta, .post-byline {
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.7rem; letter-spacing:.02em;
}
.post-byline { font-size:.75rem; }

@media (min-width:1024px){
  .card--feature .card-title { font-size:1.85rem; letter-spacing:-.02em; }
}

/* branded selection */
::selection { background:hsl(160 84% 39% / .35); color:var(--text); }
html.light ::selection { background:hsl(160 84% 32% / .25); }

/* cover breathes with the card lift (reduced-motion guard already global) */
.card-img img { transition:transform .35s ease; }
.card:hover .card-img img { transform:scale(1.04); }

/* code-block scrollbar parity with docs */
.prose pre::-webkit-scrollbar { height:6px; }
.prose pre::-webkit-scrollbar-track { background:transparent; }
.prose pre::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; }



/* ── Syntax highlighting (vendored hljs, token-mapped) ──────────────────── */
.prose .hljs { background:var(--bg-code) !important; color:var(--text); }
.hljs-comment, .hljs-quote { color:var(--text-faint); font-style:italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type { color:var(--accent); }
.hljs-string, .hljs-attr, .hljs-template-string { color:var(--teal); }
.hljs-number, .hljs-literal, .hljs-symbol { color:var(--amber); }
.hljs-title, .hljs-function .hljs-title, .hljs-title.function_ { color:var(--purple); }
.hljs-variable, .hljs-template-variable, .hljs-property { color:var(--text); }
.hljs-meta, .hljs-doctag { color:var(--pink); }

/* AA contrast: light-theme chip text was 3.56:1 */
html.light .tag-chip { color:hsl(160 84% 24%); }
/* instant focus ring (box-shadow transition delayed it ~150ms) */
.card:focus-within { outline:2px solid var(--accent); outline-offset:2px; }

/* phone header: chip is redundant and overflowed into the nav at 390px */
@media (max-width:519px){
  .brand-chip { display:none; }
  .site-header-inner { gap:.5rem; }
  .site-nav ul { gap:.75rem; }
  .btn-subscribe { padding:.45rem .65rem; }
  .nav-link-login { display:none; }
  .btn-signup { display:none; }
}

/* inline wordmark: currentColor follows the theme, no JS swap */
.brand .wordmark { height:22px; width:auto; color:var(--text); display:block; }

/* tag/author archive title block */
.feed-head { margin:0 0 1.5rem; padding-bottom:1.1rem; border-bottom:1px solid var(--border); }
.feed-head .feed-label { margin:0; padding-bottom:0; border-bottom:0; }
.feed-title { margin:.4rem 0 0; font-size:clamp(1.6rem,1.2rem+1.6vw,2.2rem);
  font-weight:600; letter-spacing:-.02em; line-height:1.15; }
/* static pages: close the title block with the same hairline posts get */
.post-head--page { padding-bottom:1.5rem; border-bottom:1px solid var(--border); }
/* centered two-liners deserve balancing */
.subscribe-card p { text-wrap:balance; }