/* Shared article style for openrpgmaker.com/blog posts. Load after /blog/assets/site.css.
   The old variable names stay because the posts' inline styles use them; they now point at the app tokens. */
:root {
  --night: var(--bg-base);
  --night2: var(--bg-surface);
  --night3: var(--bg-inset);
  --ink: var(--text-1);
  --dim: var(--text-2);
  --faint: var(--text-3);
  --gold: var(--accent);
  --line: var(--border-default);
  --ok: var(--success);
  --bad: var(--danger);
  --px: var(--font-ui);
  --sans: var(--font-ui);
  --shadow-tint: rgba(15, 15, 15, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root { --shadow-tint: rgba(0, 0, 0, 0.45); }
}
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { line-height: 1.8; }

.post-head { max-width: 760px; margin: 0 auto; padding: 56px 24px 8px; }
.post-head .eyebrow { font-size: 13.5px; color: var(--text-3); letter-spacing: 0; }
.post-head h1 { font-size: clamp(27px, 4.2vw, 38px); line-height: 1.3; letter-spacing: -0.028em; font-weight: 600; margin: 10px 0 0; }
.post-head .meta { color: var(--text-3); font-size: 14px; margin-top: 14px; }

.prose { max-width: 760px; margin: 0 auto; padding: 0 24px; line-height: 1.8; }
.prose p { margin: 18px 0; color: var(--text-1); }
.prose h2 { font-size: 24px; line-height: 1.4; letter-spacing: -0.02em; font-weight: 600; margin: 56px 0 6px; }
.prose h2 small { font-size: 15px; font-weight: 400; color: var(--text-3); margin-left: 8px; }
.prose h3 { font-size: 18px; line-height: 1.45; font-weight: 600; margin: 32px 0 4px; color: var(--text-1); }
.prose b, .prose strong { color: var(--text-1); font-weight: 600; }
.prose ul { margin: 14px 0 14px 22px; color: var(--text-1); }
.prose a { text-decoration-color: var(--accent-border); text-underline-offset: 3px; }
.prose code { font: 0.86em var(--font-mono); background: var(--bg-inset); padding: 1px 6px; border-radius: 4px; }
.lead { font-size: 19px; color: var(--text-2) !important; }
.prose .alt-title { font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--text-2); margin: 28px 0 0; }
.wide { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

.win { position: relative; border-radius: var(--radius-m); color: var(--text-1); padding: 16px 20px; margin: 28px 0; background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.win .who { font-size: 13px; font-weight: 600; color: var(--accent); display: block; margin-bottom: 4px; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 30px 0; }
.kpi { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-m); padding: 16px 18px; }
.kpi .n { font-size: clamp(22px, 3vw, 28px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; color: var(--text-1); }
.kpi .l { font-size: 14px; color: var(--text-2); }

.post-foot { max-width: 760px; margin: 88px auto 0; padding: 22px 24px 0; border-top: 1px solid var(--border-subtle); display: flex; gap: 10px 20px; flex-wrap: wrap; font-size: 14px; }
.post-foot a { color: var(--text-2); }
.post-foot a:hover { color: var(--accent); }
.post-foot + .site-foot { margin-top: 40px; }

@media (max-width: 640px) {
  .kpis { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  .post-head { padding: 32px 20px 4px; }
  .prose { padding: 0 20px; }
  .wide { padding: 0 20px; }
  .prose h2 { font-size: 21px; margin-top: 44px; }
}