/* Standalone stylesheet for the server-rendered article pages. It repeats the
   design tokens rather than importing the application bundle, because that
   bundle's file name carries a build hash the Worker cannot know. */
:root {
  --brand-50:#fff4ef; --brand-300:#ff9f82; --brand-400:#ff7a57; --brand-500:#f4502a; --brand-600:#d8401e; --brand-700:#b33317;
  --ink-950:#0c1220; --ink-900:#131c33; --ink-500:#5a657d; --ink-400:#8b94a9; --ink-300:#b6bdcd; --ink-150:#e1e5ee; --ink-100:#eef0f5; --ink-50:#f6f7fa;
  --surface-page:var(--ink-50); --surface-card:#fff; --surface-sunken:var(--ink-100); --surface-brand-subtle:var(--brand-50);
  --text-primary:var(--ink-900); --text-secondary:var(--ink-500); --text-tertiary:var(--ink-400); --text-link:var(--brand-600);
  --border-default:var(--ink-150); --border-strong:var(--ink-300);
  --accent-primary:var(--brand-600); --accent-primary-hover:var(--brand-700);
  --font-sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
  --radius-md:10px; --radius-lg:14px;
  --shadow-sm:0 1px 3px rgba(19,28,51,.08),0 1px 2px rgba(19,28,51,.04);
  --focus-ring:0 0 0 3px rgba(216,64,30,.28);
}
[data-theme="dark"] {
  color-scheme:dark;
  --surface-page:#10141d; --surface-card:#161b26; --surface-sunken:#12161f; --surface-brand-subtle:#33201a;
  --text-primary:#ebedf2; --text-secondary:#a6aec0; --text-tertiary:#78829a; --text-link:var(--brand-300);
  --border-default:#2a3142; --border-strong:#3d4658;
  --accent-primary:var(--brand-500); --accent-primary-hover:var(--brand-400);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --focus-ring:0 0 0 3px rgba(244,80,42,.38);
}

* { box-sizing:border-box; }
html { background:var(--surface-page); scroll-behavior:smooth; }
body { margin:0; color:var(--text-primary); background:var(--surface-page); font-family:var(--font-sans); font-size:16px; line-height:1.65; }
a { color:var(--text-link); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible { outline:0; box-shadow:var(--focus-ring); border-radius:4px; }
img { max-width:100%; height:auto; }

.blog-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:900px; margin:auto; padding:18px 20px; }
.blog-logo { display:flex; align-items:center; gap:9px; color:var(--text-primary); font-size:19px; font-weight:700; letter-spacing:-.02em; }
.blog-logo:hover { text-decoration:none; }
.blog-logo b { font-weight:700; }
.blog-nav nav { display:flex; align-items:center; gap:18px; font-size:14px; }
.blog-cta { display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:var(--radius-md); color:#fff; background:var(--accent-primary); font-weight:600; }
.blog-cta:hover { background:var(--accent-primary-hover); text-decoration:none; }

.blog-main { max-width:760px; margin:auto; padding:24px 20px 72px; }
.blog-header h1 { margin:8px 0 12px; font-size:clamp(32px,5vw,44px); line-height:1.1; letter-spacing:-.03em; }
.blog-intro { margin:0 0 32px; color:var(--text-secondary); font-size:18px; }

.post-list { display:grid; gap:14px; }
.post-card { padding:22px; border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--surface-card); box-shadow:var(--shadow-sm); }
.post-card h2 { margin:0 0 6px; font-size:21px; line-height:1.25; letter-spacing:-.01em; }
.post-card h2 a { color:var(--text-primary); }
.post-card p { margin:0 0 10px; color:var(--text-secondary); }
.post-card p:last-child { margin:0; }
.post-more { font-weight:600; }
.post-meta { color:var(--text-tertiary); font-size:14px; }

.breadcrumb { margin:0 0 18px; color:var(--text-tertiary); font-size:14px; }
.post h1 { margin:0 0 10px; font-size:clamp(30px,4.6vw,42px); line-height:1.12; letter-spacing:-.03em; }
.post .post-meta { margin:0 0 32px; padding-bottom:24px; border-bottom:1px solid var(--border-default); }
.post-body h2 { margin:44px 0 14px; font-size:27px; line-height:1.2; letter-spacing:-.02em; }
.post-body h3 { margin:32px 0 10px; font-size:20px; line-height:1.3; }
.post-body p { margin:0 0 18px; }
.post-body ul, .post-body ol { margin:0 0 18px; padding-left:24px; }
.post-body li { margin-bottom:8px; }
.post-body li > ul, .post-body li > ol { margin:8px 0 0; }
.post-body blockquote { margin:24px 0; padding:2px 0 2px 20px; border-left:3px solid var(--border-strong); color:var(--text-secondary); }
.post-body code { padding:2px 6px; border-radius:4px; background:var(--surface-sunken); font-family:var(--font-mono); font-size:.88em; }
.post-body pre { overflow:auto; margin:0 0 20px; padding:16px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--surface-sunken); }
.post-body pre code { padding:0; background:none; font-size:13px; line-height:1.6; }
.post-body table { width:100%; margin:0 0 22px; border-collapse:collapse; font-size:15px; }
.post-body th, .post-body td { padding:10px 12px; border:1px solid var(--border-default); text-align:left; vertical-align:top; }
.post-body th { background:var(--surface-sunken); font-weight:600; }
.post-body hr { margin:36px 0; border:0; border-top:1px solid var(--border-default); }
.post-body img { display:block; margin:24px auto; border-radius:var(--radius-md); }
.post-body strong { font-weight:600; }

.post-cta { margin-top:48px; padding:26px; border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--surface-brand-subtle); }
.post-cta h2 { margin:0 0 10px; font-size:21px; letter-spacing:-.01em; }
.post-cta p { margin:0 0 16px; color:var(--text-secondary); }
.post-cta p:last-child { margin:0; }

.blog-footer { max-width:900px; margin:auto; padding:32px 20px 48px; border-top:1px solid var(--border-default); color:var(--text-secondary); font-size:14px; }
.blog-footer p { margin:0 0 12px; }
.blog-footer nav { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:12px; }
.blog-footer small { color:var(--text-tertiary); }

@media (max-width:620px) {
  .blog-nav { flex-wrap:wrap; gap:10px; }
  .blog-nav nav { gap:12px; font-size:13px; }
  .blog-main { padding:16px 16px 56px; }
  .post-body table { display:block; overflow-x:auto; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }