/* css/blog/public.css */
/* ==========================================================================
   Weesify Blog · public pages (index, post). Prefix: wbl-. Mobile first (360–390 px), then tablet and desktop.
   Light, dark (visitor's choice: html[data-theme]) or the system theme. Layout ideas: a featured hero, a
   three-column "Recent posts" grid with Load more, Discover pills + search, a large cover header with an overlapping
   reading sheet. Covers without an image are abstract gradients (no people or animals).
   ========================================================================== */
:root {
  --wbl-bg: #F4F5F1;
  --wbl-surface: #FFFFFF;
  --wbl-surface-2: #F8F9F6;
  --wbl-chip: #ECEEE9;
  --wbl-ink: #0B0F0D;
  --wbl-text: #2A302C;
  --wbl-muted: #5F6761;
  --wbl-line: #E3E6E0;
  --wbl-accent: #07A06C;
  --wbl-on-accent: #FFFFFF;
  --wbl-shadow: 0 1px 2px rgb(20 28 22 / .05), 0 12px 32px -14px rgb(20 28 22 / .18);
  --wbl-glass: rgb(255 255 255 / .78);
  --wbl-radius: 22px;
  --wbl-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wbl-display: "Urbanist", "Manrope", ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wbl-bg: #0A0C0B; --wbl-surface: #121517; --wbl-surface-2: #171B1D; --wbl-chip: #1E2326; --wbl-ink: #F3F5F4; --wbl-text: #D7DCD9;
    --wbl-muted: #939B97; --wbl-line: rgb(255 255 255 / .08); --wbl-accent: #2BE3A2; --wbl-on-accent: #04140D;
    --wbl-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 18px 40px -16px rgb(0 0 0 / .7); --wbl-glass: rgb(18 21 23 / .78); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --wbl-bg: #0A0C0B; --wbl-surface: #121517; --wbl-surface-2: #171B1D; --wbl-chip: #1E2326; --wbl-ink: #F3F5F4; --wbl-text: #D7DCD9;
  --wbl-muted: #939B97; --wbl-line: rgb(255 255 255 / .08); --wbl-accent: #2BE3A2; --wbl-on-accent: #04140D;
  --wbl-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 18px 40px -16px rgb(0 0 0 / .7); --wbl-glass: rgb(18 21 23 / .78); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .wbl *, .wbl *::before, .wbl *::after { transition: none !important; animation: none !important; } }
body.wbl-body { margin: 0; background: var(--wbl-bg); color: var(--wbl-text); font: 400 16px/1.6 var(--wbl-font); -webkit-font-smoothing: antialiased; }
.wbl { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
.wbl svg { width: 1.1em; height: 1.1em; flex: none; }
:where(.wbl) a { color: inherit; }
.wbl :focus-visible { outline: 3px solid color-mix(in srgb, var(--wbl-accent) 55%, transparent); outline-offset: 2px; border-radius: 10px; }
.wbl-sr, .wbl-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wbl-skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--wbl-ink); color: var(--wbl-bg); padding: 10px 14px; border-radius: 12px; }
.wbl-skip:focus { top: 12px; }
.wbl-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 16px; }
.wbl-main { flex: 1; }

/* ---- top bar ---- */
.wbl-top { position: sticky; top: 0; z-index: 20; background: var(--wbl-glass); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--wbl-line); }
.wbl-top-in { max-width: 1180px; margin-inline: auto; padding: 8px 16px; display: flex; align-items: center; gap: 12px; min-height: 60px; }
.wbl-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; flex: 1; }
.wbl-brand-mark { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font: 800 16px/1 var(--wbl-display); color: var(--wbl-on-accent); background: var(--wbl-accent); flex: none; }
.wbl-brand-name { font: 700 17px/1.2 var(--wbl-display); color: var(--wbl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbl-top-tools { display: flex; gap: 6px; }
.wbl-icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: 0; background: var(--wbl-chip); color: var(--wbl-ink); cursor: pointer; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.wbl-icon-btn:hover { background: color-mix(in srgb, var(--wbl-chip) 70%, var(--wbl-accent)); }
.wbl-icon-btn:active { transform: scale(.94); }

/* ---- covers: image, or an abstract gradient ---- */
.wbl-cover { position: relative; display: block; overflow: hidden; background: var(--wbl-chip); isolation: isolate; }
.wbl-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wbl-cover-shapes i { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; mix-blend-mode: soft-light; background: #fff; }
.wbl-cover-shapes i:nth-child(1) { width: 62%; aspect-ratio: 1; inset-inline-end: -14%; top: -28%; opacity: .35; }
.wbl-cover-shapes i:nth-child(2) { width: 34%; aspect-ratio: 1; inset-inline-start: 8%; bottom: -16%; opacity: .28; }
.wbl-cover-shapes i:nth-child(3) { width: 120%; height: 120%; inset: -10%; border-radius: 0; filter: none; opacity: .14; background: repeating-linear-gradient(120deg, #fff 0 1px, transparent 1px 16px); }
.wbl-g1 { background: radial-gradient(90% 90% at 85% 10%, #C2F45B 0%, transparent 55%), linear-gradient(150deg, #0BC284 0%, #067C55 60%, #062A1E 100%); }
.wbl-g2 { background: radial-gradient(80% 90% at 15% 0%, #C4B5FF 0%, transparent 55%), linear-gradient(155deg, #7C5CFF 0%, #4B2BC9 60%, #22125F 100%); }
.wbl-g3 { background: radial-gradient(90% 80% at 0% 0%, #FFD6AA 0%, transparent 50%), linear-gradient(150deg, #FF9A5C 0%, #FF7A3D 45%, #B83D10 100%); }
.wbl-g4 { background: radial-gradient(80% 80% at 90% 90%, #7BA5FF 0%, transparent 55%), linear-gradient(160deg, #15233F 0%, #2448A8 60%, #3B8BFF 100%); }
.wbl-g5 { background: radial-gradient(70% 80% at 20% 90%, #25D695 0%, transparent 55%), radial-gradient(70% 70% at 90% 10%, #7C5CFF 0%, transparent 55%), linear-gradient(160deg, #15191A, #0B0D0C); }
.wbl-g6 { background: radial-gradient(90% 80% at 80% 0%, #FFE08A 0%, transparent 55%), linear-gradient(150deg, #E4A11B 0%, #B8790A 55%, #5C3A05 100%); }
.wbl-g7 { background: radial-gradient(80% 80% at 10% 10%, #FFB3CF 0%, transparent 55%), linear-gradient(150deg, #FF4D8D 0%, #8468FF 100%); }
.wbl-g8 { background: radial-gradient(80% 90% at 85% 15%, #9EF2CD 0%, transparent 50%), linear-gradient(155deg, #0E3B4A 0%, #0B7A5A 70%, #12B886 100%); }

/* ---- featured hero ---- */
.wbl-hero-wrap { max-width: 1212px; margin: 12px auto 0; padding-inline: 12px; }
.wbl-hero { position: relative; display: block; border-radius: var(--wbl-radius); overflow: hidden; min-height: 420px; text-decoration: none; color: #fff; box-shadow: var(--wbl-shadow); }
.wbl-hero-cover { position: absolute; inset: 0; }
.wbl-hero-cover img { transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.wbl-hero:hover .wbl-hero-cover img { transform: scale(1.03); }
.wbl-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgb(6 10 8 / .35) 55%, rgb(6 10 8 / .82) 100%); }
.wbl-hero-copy { position: absolute; inset-inline: 0; bottom: 0; padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.wbl-hero-kicker { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font: 700 12px/1 var(--wbl-font); letter-spacing: .04em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: rgb(255 255 255 / .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wbl-hero-title { font: 800 clamp(1.7rem, 1.1rem + 3.2vw, 3.2rem)/1.08 var(--wbl-display); letter-spacing: -.02em; max-width: 20ch; text-wrap: balance; }
.wbl-hero-text { color: rgb(255 255 255 / .86); max-width: 60ch; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wbl-hero-go { position: absolute; inset-inline-end: 20px; top: 20px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .2s ease, background .2s ease; }
.wbl-hero:hover .wbl-hero-go { transform: translateX(4px); background: rgb(255 255 255 / .28); }
[dir="rtl"] .wbl-hero:hover .wbl-hero-go { transform: translateX(-4px); }

/* ---- meta row, avatars ---- */
.wbl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--wbl-muted); }
.wbl-meta.is-light { color: rgb(255 255 255 / .85); }
.wbl-meta svg { width: 14px; height: 14px; vertical-align: -2px; }
.wbl-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.wbl-meta-name { color: var(--wbl-text); font-weight: 600; }
.wbl-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; display: inline-block; }
.wbl-ava { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 800 15px/1 var(--wbl-display); color: var(--wbl-on-accent);
  background: linear-gradient(135deg, var(--wbl-accent), color-mix(in srgb, var(--wbl-accent) 55%, #7C5CFF)); }
.wbl-ava.is-sm { width: 24px; height: 24px; font-size: 11px; }

/* ---- discover: heading, search, category pills ---- */
.wbl-discover { padding-top: 28px; }
.wbl-h1 { font: 800 clamp(2rem, 1.5rem + 2.4vw, 3rem)/1.05 var(--wbl-display); letter-spacing: -.025em; color: var(--wbl-ink); margin: 0; }
.wbl-h2 { font: 700 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.2 var(--wbl-display); color: var(--wbl-ink); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.wbl-sub { margin: 6px 0 0; color: var(--wbl-muted); font-size: 15px; }
.wbl-search { margin-top: 18px; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--wbl-surface); border: 1px solid var(--wbl-line); box-shadow: var(--wbl-shadow); max-width: 560px; }
[dir="rtl"] .wbl-search { padding: 6px 16px 6px 6px; }
.wbl-search > svg { color: var(--wbl-muted); }
.wbl-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--wbl-ink); font: inherit; font-size: 16px; padding: 8px 0; outline: none; }
.wbl-search-go { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--wbl-ink); color: var(--wbl-bg); cursor: pointer; }
.wbl-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 16px -16px 0; padding: 2px 16px 6px; scroll-snap-type: x proximity; }
.wbl-pills::-webkit-scrollbar { display: none; }
.wbl-pill { flex: none; scroll-snap-align: start; min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; background: var(--wbl-chip); color: var(--wbl-text); text-decoration: none; font-weight: 600; font-size: 14px; transition: background .15s ease, color .15s ease; }
.wbl-pill:hover { background: color-mix(in srgb, var(--wbl-chip) 75%, var(--wbl-accent)); }
.wbl-pill.is-on { background: var(--wbl-accent); color: var(--wbl-on-accent); }
.wbl-filter-note { display: flex; align-items: center; gap: 6px; color: var(--wbl-muted); margin: 12px 0 0; font-size: 14px; }
.wbl-filter-note a { color: var(--wbl-accent); font-weight: 600; }

/* ---- recent posts: list rows on phones, a grid from tablets ---- */
.wbl-recent { padding: 28px 0 48px; }
.wbl-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.wbl-anchor { display: block; grid-column: 1 / -1; height: 0; scroll-margin-top: 80px; }
.wbl-card-link { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; text-decoration: none; padding: 10px; border-radius: 18px; background: var(--wbl-surface); border: 1px solid var(--wbl-line); transition: transform .2s ease, box-shadow .2s ease; }
.wbl-card-link:hover { transform: translateY(-2px); box-shadow: var(--wbl-shadow); }
.wbl-card-cover { aspect-ratio: 1 / 1; border-radius: 14px; }
.wbl-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wbl-card-cat { font-size: 12px; font-weight: 700; color: var(--wbl-accent); letter-spacing: .02em; }
.wbl-card-title { font: 700 16px/1.3 var(--wbl-display); color: var(--wbl-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wbl-card-text { display: none; font-size: 14px; color: var(--wbl-muted); }
.wbl-card .wbl-meta { margin-top: 4px; font-size: 12px; }
@media (min-width: 640px) {
  .wbl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }
  .wbl-card-link { grid-template-columns: 1fr; padding: 0; border: 0; background: transparent; gap: 14px; }
  .wbl-card-link:hover { box-shadow: none; }
  .wbl-card-cover { aspect-ratio: 16 / 11; border-radius: 18px; transition: box-shadow .2s ease; }
  .wbl-card-link:hover .wbl-card-cover { box-shadow: var(--wbl-shadow); }
  .wbl-card-title { font-size: 19px; }
  .wbl-card-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 960px) {
  .wbl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wbl-hero { min-height: 520px; }
  .wbl-hero-copy { padding: 40px 44px 44px; }
  .wbl-hero-go { top: auto; bottom: 44px; inset-inline-end: 44px; width: 56px; height: 56px; }
}
.wbl-more { display: flex; justify-content: center; margin-top: 32px; }
.wbl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font: 700 14px/1 var(--wbl-font);
  background: var(--wbl-ink); color: var(--wbl-bg); transition: transform .15s ease, opacity .15s ease; }
.wbl-btn:hover { opacity: .9; }
.wbl-btn:active { transform: scale(.97); }
.wbl-btn.is-ghost { background: var(--wbl-chip); color: var(--wbl-ink); }
.wbl-empty { text-align: center; padding: 48px 16px; border: 1px dashed var(--wbl-line); border-radius: var(--wbl-radius); background: var(--wbl-surface-2); }
.wbl-empty-art { width: 64px; height: 64px; border-radius: 20px; display: inline-grid; place-items: center; background: var(--wbl-chip); color: var(--wbl-accent); }
.wbl-empty-art svg { width: 28px; height: 28px; }
.wbl-empty-title { font: 700 18px/1.3 var(--wbl-display); color: var(--wbl-ink); margin: 14px 0 4px; }
.wbl-empty-text { color: var(--wbl-muted); margin: 0 0 16px; }

/* ---- post: cover header + overlapping sheet ---- */
.wbl-post-head { position: relative; min-height: 440px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.wbl-post-cover { position: absolute; inset: 0; }
.wbl-post-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(6 10 8 / .35) 0%, transparent 28%, rgb(6 10 8 / .25) 55%, rgb(6 10 8 / .8) 100%); }
.wbl-post-bar { position: relative; display: flex; justify-content: space-between; padding: 14px 16px; max-width: 1180px; width: 100%; margin-inline: auto; }
.wbl-post-bar-end { display: flex; gap: 8px; }
.wbl-round { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: 0; cursor: pointer; text-decoration: none; color: #fff; background: rgb(255 255 255 / .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .15s ease, background .15s ease; }
.wbl-round:hover { background: rgb(255 255 255 / .3); }
.wbl-round:active { transform: scale(.92); }
.wbl-round .is-on { display: none; }
.wbl-round[aria-pressed="true"] .is-on { display: block; }
.wbl-round[aria-pressed="true"] .is-off { display: none; }
.wbl-round[aria-pressed="true"] { background: #fff; color: #0B0F0D; }
.wbl-round.is-soft { background: var(--wbl-chip); color: var(--wbl-ink); backdrop-filter: none; }
.wbl-round.is-soft:hover { background: color-mix(in srgb, var(--wbl-chip) 70%, var(--wbl-accent)); }
.wbl-post-title-wrap { position: relative; padding: 0 16px 52px; max-width: 860px; width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.wbl-chip { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--wbl-accent); color: var(--wbl-on-accent); font-weight: 700; font-size: 13px; text-decoration: none; }
.wbl-post-title { margin: 0; font: 800 clamp(1.9rem, 1.2rem + 3.4vw, 3.4rem)/1.08 var(--wbl-display); letter-spacing: -.02em; text-wrap: balance; }
.wbl-sheet { position: relative; margin-top: -28px; background: var(--wbl-surface); border-radius: 28px 28px 0 0; }
.wbl-sheet-in { max-width: 760px; margin-inline: auto; padding: 24px 18px 40px; }
.wbl-author { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--wbl-line); margin-bottom: 20px; }
.wbl-author-text { display: flex; flex-direction: column; line-height: 1.3; }
.wbl-author-text b { color: var(--wbl-ink); font-size: 16px; }
.wbl-author-text small { color: var(--wbl-muted); font-size: 13px; }
.wbl-lede { font-size: 19px; line-height: 1.55; color: var(--wbl-ink); margin: 0 0 18px; font-weight: 500; }
@media (min-width: 960px) {
  .wbl-post-head { min-height: 560px; }
  .wbl-post-bar { padding: 20px 24px; }
  .wbl-sheet { max-width: 920px; margin: -64px auto 0; border-radius: 32px 32px 0 0; }
  .wbl-post-title-wrap { padding-bottom: 92px; } /* clears the sheet's 64px overlap, so the reading time and date stay visible */
  .wbl-sheet-in { padding: 40px 40px 56px; }
}

/* ---- the article's text ---- */
.wbl-prose { font-size: 17.5px; line-height: 1.75; color: var(--wbl-text); overflow-wrap: anywhere; }
.wbl-prose > * + * { margin-top: 1.1em; }
.wbl-prose p { margin: 0; }
.wbl-prose h2, .wbl-prose h3, .wbl-prose h4 { font-family: var(--wbl-display); color: var(--wbl-ink); line-height: 1.25; margin: 1.8em 0 .2em; letter-spacing: -.01em; }
.wbl-prose h2 { font-size: 1.55em; } .wbl-prose h3 { font-size: 1.25em; } .wbl-prose h4 { font-size: 1.05em; }
.wbl-prose a { color: var(--wbl-accent); text-underline-offset: 3px; }
.wbl-prose ul, .wbl-prose ol { padding-inline-start: 1.3em; margin-bottom: 0; }
.wbl-prose li + li { margin-top: .35em; }
.wbl-prose blockquote { margin-inline: 0; padding: 4px 0 4px 18px; border-inline-start: 4px solid var(--wbl-accent); font-size: 1.12em; color: var(--wbl-ink); font-style: italic; }
[dir="rtl"] .wbl-prose blockquote { padding: 4px 18px 4px 0; }
.wbl-prose pre { background: var(--wbl-chip); padding: 14px 16px; border-radius: 14px; overflow-x: auto; font-size: 14px; line-height: 1.6; }
.wbl-prose code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; background: var(--wbl-chip); padding: .1em .35em; border-radius: 6px; }
.wbl-prose pre code { background: none; padding: 0; }
.wbl-prose img { max-width: 100%; height: auto; border-radius: 16px; display: block; }
.wbl-prose figure { margin-inline: 0; }
.wbl-prose figcaption { color: var(--wbl-muted); font-size: 14px; margin-top: 6px; text-align: center; }
.wbl-prose hr { border: 0; height: 1px; background: var(--wbl-line); margin: 2em 0; }

.wbl-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 28px 0 0; }
.wbl-tags a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--wbl-chip); text-decoration: none; font-size: 14px; font-weight: 600; }
.wbl-tags svg { width: 14px; height: 14px; color: var(--wbl-accent); }
.wbl-share { margin-top: 28px; padding: 18px; border-radius: 20px; background: var(--wbl-surface-2); border: 1px solid var(--wbl-line); }
.wbl-share-title { margin: 0 0 12px; font-weight: 700; color: var(--wbl-ink); }
.wbl-share-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- comments ---- */
.wbl-comments { margin-top: 40px; scroll-margin-top: 80px; }
.wbl-count { font: 700 13px/1 var(--wbl-font); padding: 5px 9px; border-radius: 999px; background: var(--wbl-chip); color: var(--wbl-muted); }
.wbl-comment { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--wbl-line); }
.wbl-comment.is-team .wbl-comment-body { background: color-mix(in srgb, var(--wbl-accent) 9%, transparent); }
.wbl-comment-head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.wbl-comment-head b { color: var(--wbl-ink); }
.wbl-comment-head time { color: var(--wbl-muted); font-size: 12px; }
.wbl-comment-body { margin: 6px 0 0; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--wbl-surface-2); overflow-wrap: anywhere; }
.wbl-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--wbl-accent); color: var(--wbl-on-accent); }
.wbl-muted { color: var(--wbl-muted); }
.wbl-note { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; margin: 0 0 12px; font-weight: 600; }
.wbl-note.is-ok { background: color-mix(in srgb, var(--wbl-accent) 12%, transparent); color: var(--wbl-ink); }
.wbl-form { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; border: 1px solid var(--wbl-line); background: var(--wbl-surface-2); }
.wbl-form-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .wbl-form-row { grid-template-columns: 1fr 1fr; } }
.wbl-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--wbl-ink); }
.wbl-field input, .wbl-field textarea { font: inherit; font-weight: 400; font-size: 16px; color: var(--wbl-ink); background: var(--wbl-surface); border: 1px solid var(--wbl-line); border-radius: 14px; padding: 12px 14px; min-height: 46px; resize: vertical; }
.wbl-field input:focus, .wbl-field textarea:focus { border-color: var(--wbl-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wbl-accent) 25%, transparent); }
.wbl-err { color: #D93A3A; font-weight: 600; }
.wbl-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.wbl-form-foot small { flex: 1 1 220px; }

.wbl-related { padding: 36px 0 56px; background: var(--wbl-bg); }

/* ---- footer, toast ---- */
.wbl-foot { border-top: 1px solid var(--wbl-line); background: var(--wbl-surface); }
.wbl-foot-in { max-width: 1180px; margin-inline: auto; padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.wbl-foot-title { margin: 0; font: 700 16px/1.3 var(--wbl-display); color: var(--wbl-ink); }
.wbl-foot-text { margin: 4px 0 0; color: var(--wbl-muted); font-size: 14px; }
.wbl-foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.wbl-foot-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--wbl-muted); text-decoration: none; min-height: 44px; }
.wbl-foot-links a:hover { color: var(--wbl-ink); }
.wbl-toast { position: fixed; inset-inline: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); margin-inline: auto; max-width: 360px; z-index: 60; text-align: center; padding: 12px 16px; border-radius: 14px; background: #0B0F0D; color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 18px 40px -12px rgb(0 0 0 / .45); animation: wbl-toast-in .25s cubic-bezier(.22, 1, .36, 1); }
@keyframes wbl-toast-in { from { opacity: 0; transform: translateY(10px); } }
.wbl-preview { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; background: #0B0F0D; color: #fff; font-size: 14px; font-weight: 600; }
.wbl-preview b { color: #C2F45B; }
/* "List" front page: one readable column with the thumbnail beside the text at every width. */
@media (min-width: 640px) {
  .wbl-grid.is-list { grid-template-columns: 1fr; max-width: 820px; gap: 16px; }
  .wbl-grid.is-list .wbl-card-link { grid-template-columns: 220px 1fr; gap: 20px; padding: 12px; border: 1px solid var(--wbl-line); background: var(--wbl-surface); }
  .wbl-grid.is-list .wbl-card-cover { aspect-ratio: 4 / 3; }
}

/* css/blog/official.css */
/* ==========================================================================
   Weesify's own blog at weesify.com/blog (ADR-0076). Prefix: wob-. The creator blog's pages (wbl-, public.css) inside
   the marketing site: its colours come from the site's tokens (so it follows the marketing look), and the content
   starts below the floating marketing navigation. Mobile first.
   ========================================================================== */
.wob {
  --wbl-bg: var(--canvas);
  --wbl-surface: var(--surface);
  --wbl-surface-2: var(--surface-2);
  --wbl-chip: var(--surface-active);
  --wbl-ink: var(--ink);
  --wbl-text: var(--text);
  --wbl-muted: var(--text-muted);
  --wbl-line: var(--line);
  --wbl-accent: var(--accent);
  --wbl-on-accent: #FFFFFF;
  --wbl-glass: var(--glass);
  --wbl-font: inherit;
  min-height: 0;
  background: var(--canvas);
  color: var(--text);
}
.wob .wbl-main { padding-top: 92px; }
@media (min-width: 900px) { .wob .wbl-main { padding-top: 100px; } }

/* The article header: a rounded card like the index hero (the reference layout), below the navigation. */
.wob .wbl-post-head { max-width: 1212px; margin: 0 auto; border-radius: 28px; overflow: hidden; margin-inline: 12px; }
@media (min-width: 1236px) { .wob .wbl-post-head { margin-inline: auto; } }

.wob .wbl-post-title { color: #FFFFFF; } /* the site's h1 colour would sit dark on the cover */
.wob .wbl svg { display: inline-block; }

/* Follow along: RSS, changelog and help. */
.wob-cta { padding: 8px 0 56px; }
.wob-cta-card { display: grid; gap: 18px; padding: 24px; border-radius: 28px; background: var(--ink); color: var(--text-on-ink); }
.wob-cta-title { margin: 0; font: 700 clamp(22px, 4vw, 30px)/1.15 var(--wbl-display); letter-spacing: -.02em; color: inherit; }
.wob-cta-text { margin: 8px 0 0; max-width: 560px; color: color-mix(in srgb, var(--text-on-ink) 78%, transparent); }
.wob-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wob-cta-actions .btn { min-height: 44px; }
.wob-cta-actions .btn svg { width: 1.1em; height: 1.1em; }
.wob-cta-actions .btn-primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.wob-cta-actions .btn-ghost { color: var(--text-on-ink); border-color: color-mix(in srgb, var(--text-on-ink) 30%, transparent); background: transparent; }
.wob-cta-actions .btn-ghost:hover { background: color-mix(in srgb, var(--text-on-ink) 12%, transparent); }
@media (min-width: 900px) { .wob-cta-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 36px 40px; } }

/* "Latest from the blog" on the marketing homepage (three or more official posts). */
.wob-strip { padding: clamp(40px, 7vw, 88px) 0; }
.wob-strip-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.wob-strip-title { margin: 0; font: 700 clamp(26px, 4.6vw, 40px)/1.1 var(--wbl-display, "Urbanist", sans-serif); letter-spacing: -.025em; color: var(--ink); }
.wob-strip-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .wob-strip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.wob-strip .wbl-card { --wbl-surface: var(--surface); --wbl-line: var(--line); --wbl-ink: var(--ink); --wbl-muted: var(--text-muted); --wbl-chip: var(--surface-active); }