/* blog.css — clean editorial styling for the standalone, white-label blog
   (Stripe / Ghost feel): generous whitespace, a serif display face, strong
   typographic hierarchy, hairline dividers, one restrained accent — no
   gradients, no emoji, no placeholder boxes. FULLY SELF-CONTAINED: this file
   styles the base page, the header chrome, the article, and the footer, with
   no dependency on any host stylesheet, so the module renders identically on
   any domain. The theme tokens below are real values (not just fallbacks); a
   host can still restyle via BLOG_EXTRA_CSS, loaded after this file. */

:root {
  --bl-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Source Serif 4", Charter, Georgia, Cambria, "Times New Roman", serif;
  --bl-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bl-measure: 760px;
  /* Theme tokens — the body-content rules reference these via var(--x, fallback),
     so defining them here makes the whole page cohesive with zero host CSS. */
  --bg: #ffffff;
  --fg: #16181d;
  --text-muted: #5c6570;
  --border: #e8eaee;
  --border-2: #d3d8df;
  --surface-2: #f5f6f8;
  --accent: #2f6df6;
  --accent-soft: rgba(47, 109, 246, .10);
}

/* ---------------- base (self-contained; no host stylesheet needed) --------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--bl-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }

/* ---------------- header chrome (self-contained) --------------------------- */
.p-topbar {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 0 clamp(18px, 4vw, 40px); height: 62px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40;
}
.p-topbar .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); font-weight: 700; font-size: 16px; letter-spacing: -.011em; text-decoration: none; }
.p-topbar .brand img { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; display: block; }
.p-cta { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.p-nav { display: flex; align-items: center; gap: 22px; }
.p-nav a { color: var(--text-muted); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: color .15s; }
.p-nav a:hover { color: var(--fg); }
.p-topbar .btn { display: inline-flex; align-items: center; padding: 8px 15px; border-radius: 8px; background: var(--fg); color: var(--bg); border: 1px solid var(--fg); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: opacity .15s; }
.p-topbar .btn:hover { opacity: .85; }
@media (max-width: 640px) {
  .p-nav { display: none; }
  .p-cta { gap: 10px; }
}

/* ---------------- shells ---------------- */
.bl-main { min-height: 70vh; }
.bl-wrap { max-width: var(--bl-measure); margin: 0 auto; padding: 0 22px; }
.bl-muted { color: var(--text-muted, #6b7280); }
.bl-rule { border: 0; border-top: 1px solid var(--border, #e5e7eb); margin: 0; }
/* Visually-hidden but screen-reader/SEO-readable (e.g. the index h1 that
   replaced the removed masthead). Takes zero layout space. */
.bl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------- masthead (index / category) ---------------- */
.bl-masthead { padding: clamp(48px, 8vw, 92px) 0 clamp(26px, 4vw, 40px); }
.bl-kicker {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-muted, #6b7280); font-weight: 600; margin: 0 0 16px;
}
.bl-mast-title {
  font-family: var(--bl-serif); font-weight: 600;
  font-size: clamp(34px, 6vw, 56px); line-height: 1.08; letter-spacing: -0.012em;
  color: var(--fg, #111); margin: 0 0 16px;
}
.bl-mast-sub {
  font-size: clamp(16px, 2vw, 19px); line-height: 1.55;
  color: var(--text-muted, #6b7280); max-width: 54ch; margin: 0;
}
.bl-mast-crumbs { margin-bottom: 20px; }

/* ---------------- article list (index / category) ---------------- */
.bl-feed { padding: 0 0 clamp(56px, 9vw, 100px); }
/* Index-only: with the masthead gone, give the first post breathing room under
   the sticky nav and drop its top hairline (no divider directly below the nav). */
.bl-feed--top { padding-top: clamp(22px, 4vw, 40px); }
.bl-feed--top .bl-item:first-child { border-top: 0; }
.bl-list { list-style: none; margin: 0; padding: 0; }
.bl-item { border-top: 1px solid var(--border, #e5e7eb); }
.bl-item-link {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: clamp(28px, 4vw, 40px) 0; color: inherit; text-decoration: none;
}
.bl-item.has-thumb .bl-item-link { grid-template-columns: 1fr 184px; column-gap: 32px; align-items: start; }
@media (max-width: 600px) { .bl-item.has-thumb .bl-item-link { grid-template-columns: 1fr; } .bl-item-thumb { display: none; } }
.bl-item-text { min-width: 0; }
.bl-cat {
  display: inline-block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 600; color: var(--accent, #337ab7);
  text-decoration: none; margin-bottom: 11px;
}
a.bl-cat:hover { text-decoration: underline; text-underline-offset: 3px; }
.bl-item-title {
  font-family: var(--bl-serif); font-weight: 600;
  font-size: clamp(21px, 3vw, 27px); line-height: 1.22; letter-spacing: -0.01em;
  color: var(--fg, #111); margin: 0 0 9px;
}
.bl-item-link:hover .bl-item-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bl-item-dek { font-size: 16px; line-height: 1.6; color: var(--text-muted, #6b7280); margin: 0 0 13px; }
.bl-item-meta { font-size: 13.5px; color: var(--text-muted, #6b7280); margin: 0; }
.bl-item-thumb { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--surface-2, #f3f4f6); border: 1px solid var(--border, #e5e7eb); }
.bl-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------- pager ---------------- */
.bl-pager {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 4px; padding: 30px 0 0; border-top: 1px solid var(--border, #e5e7eb);
  font-size: 14px; color: var(--text-muted, #6b7280);
}
.bl-pager a { color: var(--fg, #111); text-decoration: none; }
.bl-pager a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- empty / not-found ---------------- */
.bl-empty { padding: clamp(56px, 10vw, 120px) 0; max-width: 50ch; }
.bl-empty-title { font-family: var(--bl-serif); font-weight: 600; font-size: clamp(26px, 4vw, 34px); line-height: 1.15; color: var(--fg, #111); margin: 0 0 12px; }
.bl-empty-sub { font-size: 17px; line-height: 1.6; color: var(--text-muted, #6b7280); margin: 0 0 24px; }

/* text link + solid button (Stripe-style, theme-aware) */
.bl-textlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 500; color: var(--fg, #111); text-decoration: none;
  border-bottom: 1px solid var(--fg, #111); padding-bottom: 2px;
}
.bl-textlink:hover { color: var(--text-muted, #6b7280); border-color: var(--text-muted, #6b7280); }
.bl-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
  border-radius: 8px; background: var(--fg, #111); color: var(--bg, #fff);
  border: 1px solid var(--fg, #111); font-size: 14px; font-weight: 500;
  text-decoration: none; transition: opacity .15s;
}
.bl-btn:hover { opacity: .85; }

/* ---------------- article ---------------- */
.bl-article { padding: clamp(28px, 4vw, 46px) 0 clamp(56px, 9vw, 100px); }
.bl-crumbs { font-size: 13px; color: var(--text-muted, #6b7280); margin-bottom: 24px; }
.bl-crumbs a { color: var(--text-muted, #6b7280); text-decoration: none; }
.bl-crumbs a:hover { color: var(--fg, #111); }
.bl-sep { opacity: .5; }
.bl-title {
  font-family: var(--bl-serif); font-weight: 600;
  font-size: clamp(30px, 5vw, 46px); line-height: 1.12; letter-spacing: -0.016em;
  color: var(--fg, #111); margin: 8px 0 16px;
}
.bl-art-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--text-muted, #6b7280); margin: 0 0 28px; }
.bl-art-meta > * + *::before { content: "·"; margin-right: 8px; opacity: .6; }
.bl-hero { width: 100%; height: auto; aspect-ratio: 1200 / 628; object-fit: cover; border-radius: 10px; border: 1px solid var(--border, #e5e7eb); margin: 6px 0 30px; display: block; }
.bl-updated { font-size: 13.5px; color: var(--text-muted, #6b7280); margin: 0 0 24px; }

/* prose — serif body, long-form editorial */
.bl-prose { font-family: var(--bl-serif); font-size: 19px; line-height: 1.78; color: var(--fg, #1f2328); }
.bl-prose > * + * { margin-top: 1.3em; }
.bl-prose h2 { font-size: 28px; line-height: 1.25; margin-top: 1.9em; font-weight: 600; letter-spacing: -0.01em; }
.bl-prose h3 { font-size: 22px; line-height: 1.3; margin-top: 1.5em; font-weight: 600; }
.bl-prose a { color: var(--fg, #111); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-2, #cbd5e1); }
.bl-prose a:hover { text-decoration-color: currentColor; }
.bl-prose ul, .bl-prose ol { padding-inline-start: 1.3em; }
.bl-prose li + li { margin-top: .4em; }
.bl-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.bl-prose blockquote { font-style: italic; border-inline-start: 2px solid var(--border-2, #cbd5e1); padding-inline-start: 22px; color: var(--text-muted, #6b7280); margin-inline: 0; }
.bl-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82em; background: var(--surface-2, #f3f4f6); border: 1px solid var(--border, #e5e7eb); padding: 1px 6px; border-radius: 5px; }
.bl-prose pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2, #f3f4f6); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 18px; overflow-x: auto; font-size: 14px; line-height: 1.6; }
.bl-prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.bl-prose hr { border: 0; border-top: 1px solid var(--border, #e5e7eb); margin: 2.2em 0; }
.bl-prose table { width: 100%; border-collapse: collapse; font-family: inherit; font-size: 15px; }
.bl-prose th, .bl-prose td { border: 1px solid var(--border, #e5e7eb); padding: 9px 13px; text-align: start; }
.bl-prose th { background: var(--surface-2, #f3f4f6); }
.bl-prose details { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 12px 16px; }
.bl-prose summary { cursor: pointer; font-weight: 600; }

/* reactions — neutral pills, one accent on active */
.bl-reactions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border, #e5e7eb); }
.bl-react { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 999px; background: transparent; color: var(--fg, #111); cursor: pointer; font: inherit; font-size: 14px; transition: border-color .15s, background .15s; }
.bl-react:hover { border-color: var(--text-muted, #6b7280); }
.bl-react:disabled { opacity: .55; cursor: default; }
.bl-react.reacted { border-color: var(--accent, #337ab7); color: var(--accent, #337ab7); background: var(--accent-soft, rgba(51,122,183,.1)); }
.bl-react-count { color: var(--text-muted, #6b7280); font-variant-numeric: tabular-nums; }
.bl-react.reacted .bl-react-count { color: var(--accent, #337ab7); }

/* share */
.bl-share { display: flex; gap: 18px; align-items: center; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--border, #e5e7eb); font-size: 14px; }
.bl-share-label { color: var(--text-muted, #6b7280); }
.bl-share a { color: var(--fg, #111); text-decoration: none; border-bottom: 1px solid var(--border-2, #cbd5e1); padding-bottom: 1px; }
.bl-share a:hover { border-color: currentColor; }

/* related — clean list at the foot of the article */
.bl-related-wrap { margin-top: clamp(48px, 7vw, 76px); padding-top: 32px; border-top: 1px solid var(--border, #e5e7eb); }
.bl-related-wrap h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted, #6b7280); font-weight: 600; margin: 0 0 20px; }
.bl-related { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.bl-related a { font-family: var(--bl-serif); font-size: 19px; line-height: 1.3; color: var(--fg, #111); text-decoration: none; }
.bl-related a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bl-related .bl-muted { font-family: inherit; font-size: 15px; }

/* ---------------- footer — dense SMM-panel style (smm.plus feel) ----------- */
.bl-footer { background: #0b0f16; color: #aab4c0; border-top: 1px solid rgba(255,255,255,.06); }
.bl-footer-inner { max-width: 1200px; margin: 0 auto; padding: clamp(38px,5vw,56px) 22px 20px; }
.bl-footer-top { display: grid; grid-template-columns: minmax(210px, 1.1fr) 3fr; gap: clamp(26px,4vw,52px); }
@media (max-width: 820px) { .bl-footer-top { grid-template-columns: 1fr; gap: 30px; } }

.bl-footer-logo { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; }
.bl-footer-logo img { width: 24px; height: 24px; }
.bl-footer-tag { margin: 12px 0 0; max-width: 38ch; font-size: 12.5px; line-height: 1.6; color: #78828f; }
.bl-footer-social { display: flex; gap: 8px; margin-top: 16px; }
.bl-footer-social .bl-soc { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(255,255,255,.05); color: #aab4c0; transition: background .15s, color .15s, transform .15s; }
.bl-footer-social .bl-soc:hover { background: #229ed9; color: #fff; transform: translateY(-2px); }
.bl-footer-social .bl-soc svg { width: 17px; height: 17px; }

/* Link columns auto-fit: the more columns a site configures, the denser the
   grid packs — up to a tight multi-column SMM-panel footer. */
.bl-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 20px 24px; }
@media (max-width: 480px) { .bl-footer-cols { grid-template-columns: 1fr 1fr; gap: 22px 16px; } }
.bl-footer-col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: #fff; font-weight: 600; margin: 0 0 11px; }
.bl-footer-col a { display: block; width: fit-content; padding: 3px 0; color: #78828f; font-size: 12.5px; line-height: 1.5; text-decoration: none; transition: color .12s; }
.bl-footer-col a:hover { color: #fff; }
.bl-footer-status { margin: 0; font-size: 12.5px; color: #78828f; }
.bl-footer-status .bl-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16); margin-right: 7px; vertical-align: middle; }

/* Dense language grid — the 20 locales packed tight, the way SMM panels do it. */
.bl-footer-langs { display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: clamp(26px,4vw,38px); padding-top: 20px; border-top: 1px solid rgba(255,255,255,.07); }
.bl-footer-langs a { padding: 3px 9px; border-radius: 6px; border: 1px solid transparent; color: #6c7684; font-size: 12px; text-decoration: none; transition: color .12s, background .12s, border-color .12s; }
.bl-footer-langs a:hover { color: #fff; background: rgba(255,255,255,.05); }
.bl-footer-langs a.cur { color: #fff; border-color: rgba(255,255,255,.18); }

.bl-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); font-size: 12px; color: #5c6675; }
.bl-footer-bottom a { color: #78828f; text-decoration: none; }
.bl-footer-bottom a:hover { color: #fff; }