/* Blog typography & layout (2025 minimal + dark-first) */
:root {
  --accent: var(--c-accent);
  --accent-alt: var(--c-accent-alt);
  --bg-body: var(--c-bg);
  --bg-surface: var(--c-surface);
  --bg-surface-alt: var(--c-bg-alt);
  --text-high: var(--c-text-high);
  --text-med: var(--c-text);
  --text-low: var(--c-text-dim);
  --radius-sm: 4px;
  --radius-md: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.25),0 4px 10px -2px rgba(0,0,0,.35);
  --shadow-focus: 0 0 0 3px rgba(4,101,201,.35);
  --font-scale-1: clamp(.85rem,.78rem + .3vw, .95rem);
  --font-scale-2: clamp(1rem,.92rem + .4vw,1.15rem);
  --font-scale-3: clamp(1.25rem,1.1rem + .8vw,1.65rem);
  --font-scale-4: clamp(1.55rem,1.3rem + 1vw,2.1rem);
  --font-scale-5: clamp(2rem,1.6rem + 1.6vw,2.9rem);
  --prose-max: 70ch;
  --line-height: 1.65;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-body: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f1f5f9;
    --text-high: #1e2933;
    --text-med: #344250;
    --text-low: #617080;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.08),0 4px 14px -4px rgba(0,0,0,.12);
  }
}

.layout-content { max-width: var(--prose-max); margin-inline: auto; padding-inline: 1.25rem; }

.prose { font-size: var(--font-scale-2); line-height: var(--line-height); color: var(--text-med); max-width:var(--prose-max); }
.prose :where(h1,h2,h3,h4) { font-weight:700; line-height:1.15; color: var(--text-high); scroll-margin-top:5rem; }
.prose h1 { font-size: var(--font-scale-5); margin:0 0 .9em; letter-spacing:-.5px; }
.prose h2 { font-size: var(--font-scale-4); margin:2.2em 0 .85em; }
.prose h3 { font-size: var(--font-scale-3); margin:2em 0 .75em; }
.prose h4 { font-size:1.15rem; margin:1.8em 0 .6em; text-transform:uppercase; letter-spacing:.5px; }

.prose p { margin:0 0 1.1em; }
.prose strong { color: var(--text-high); font-weight:600; }
.prose em { color: var(--text-high); }

.prose a { color: var(--accent-alt); font-weight:500; text-decoration:none; position:relative; }
.prose a::after { content:\"\"; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent-alt)); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.prose a:hover::after { transform:scaleX(1); }

.prose ul, .prose ol { margin:0 0 1.3em 1.4em; padding:0; }
.prose li { margin:.4em 0; }
.prose ul { list-style:disc; }
.prose ol { list-style:decimal; }
.prose li::marker { color: var(--accent-alt); }

.prose blockquote { margin:2em 0; padding:1.1em 1.25em 1.1em 1.15em; background:linear-gradient(135deg,var(--bg-surface-alt),var(--bg-surface)); border-left:4px solid var(--accent-alt); border-radius:var(--radius-md); font-size:var(--font-scale-2); color:var(--text-high); }
.prose blockquote p:last-child { margin:0; }

.prose code { font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,\"Liberation Mono\",monospace; font-size:.85em; background: var(--bg-surface-alt); padding:.25em .5em; border-radius: var(--radius-sm); color: var(--accent-alt); }
.prose pre { background: var(--bg-surface-alt); padding:1rem 1.1rem; border-radius: var(--radius-md); overflow:auto; box-shadow:var(--shadow-sm); margin:2em 0; }
.prose pre code { all:unset; font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,\"Liberation Mono\",monospace; font-size:.9em; line-height:1.5; color: var(--text-high); }

.prose table { width:100%; border-collapse:collapse; font-size:.9rem; margin:1.8em 0; }
.prose th, .prose td { padding:.65em .75em; border:1px solid var(--bg-surface-alt); text-align:left; }
.prose th { background: var(--bg-surface-alt); color: var(--text-high); font-weight:600; }

.prose img, .prose video, .prose figure { max-width:100%; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.prose figure { margin:2em 0; }
.prose figure figcaption { font-size:.75rem; text-align:center; color: var(--text-low); margin-top:.6em; }

.prose hr { border:none; height:1px; background:linear-gradient(90deg,transparent,var(--bg-surface-alt),transparent); margin:3.2em 0; }

.callout { border:1px solid var(--accent-alt); background:linear-gradient(145deg,var(--bg-surface),var(--bg-surface-alt)); padding:1rem 1.1rem; border-radius:var(--radius-md); margin:1.75em 0; position:relative; }
.callout::before { content:\"ℹ\"; position:absolute; top:-12px; left:12px; background: var(--accent-alt); color:#fff; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; font-size:.8rem; font-weight:600; box-shadow: var(--shadow-sm); }

#read-progress { position:fixed; top:0; left:0; height:4px; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-alt)); z-index:999; box-shadow:0 0 0 1px rgba(0,0,0,.15); transition:width .15s ease-out; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline:none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

@media (max-width:860px){ .prose h1 { font-size:clamp(1.85rem,1.4rem + 2.2vw,2.4rem); } .prose h2 { font-size:clamp(1.4rem,1.1rem + 1.4vw,1.9rem); } }

@media (prefers-color-scheme: light){ .prose code { background:#eef2f6; color:#154d87; } .prose pre { background:#1f2730; color:#f1f5f9; } }