/* Blog styling — Switzer body, editorial and readable, on-brand with the app. */
:root{
  --canvas:#F4F5F7; --surface:#fff; --ink:#191C22; --ink-2:#434955; --muted:#565C66;
  --line:#E6E8ED; --accent:#FF1744;
  --sans:"Switzer",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --logo:"Outfit",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--canvas); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.6; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.bl-nav{ position:sticky; top:0; z-index:10; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line); }
.bl-nav-in{ max-width:820px; margin:0 auto; padding:15px 24px; display:flex; align-items:center; gap:16px; }
.bl-brand{ font-family:var(--logo); text-transform:uppercase; letter-spacing:.42em; font-weight:700;
  font-size:18px; color:var(--ink); }
.bl-nav a.bl-app{ margin-left:auto; font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; color:#fff; background:var(--accent); padding:9px 16px; border-radius:2px; }
.bl-nav a.bl-app:hover{ text-decoration:none; opacity:.92; }

.bl-wrap{ max-width:720px; margin:0 auto; padding:56px 24px 80px; }
.bl-kicker{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  font-size:13px; color:var(--muted); margin:0 0 14px; }
.bl-wrap h1{ font-size:40px; line-height:1.08; letter-spacing:-.025em; font-weight:800; margin:0 0 12px; }
.bl-meta{ color:var(--muted); font-size:15px; margin:0 0 40px; }

.post{ font-size:18px; color:var(--ink-2); }
.post h2{ font-size:26px; line-height:1.2; letter-spacing:-.02em; font-weight:800; color:var(--ink); margin:40px 0 12px; }
.post h3{ font-size:20px; font-weight:700; color:var(--ink); margin:32px 0 10px; }
.post p{ margin:0 0 20px; }
.post ul,.post ol{ margin:0 0 20px; padding-left:22px; }
.post li{ margin:0 0 8px; }
.post strong{ color:var(--ink); font-weight:700; }
.post a{ text-decoration:underline; }
.post img{ max-width:100%; height:auto; border-radius:12px; margin:24px 0; }
.post blockquote{ margin:24px 0; padding:2px 0 2px 20px; border-left:3px solid var(--accent);
  color:var(--muted); font-style:italic; }
.post code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  background:#EEF0F3; padding:2px 6px; border-radius:5px; }

.bl-index-item{ display:block; padding:22px 0; border-bottom:1px solid var(--line); }
.bl-index-item h2{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin:0 0 6px; }
.bl-index-item p{ color:var(--muted); font-size:16px; margin:0; }
.bl-index-item time{ color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.07em; font-weight:600; }
.bl-index-item:hover h2{ color:var(--accent); }

.bl-foot{ max-width:720px; margin:0 auto; padding:24px; color:var(--muted); font-size:13px;
  border-top:1px solid var(--line); display:flex; gap:16px; flex-wrap:wrap; }
.bl-back{ display:inline-block; margin-bottom:28px; font-size:14px; font-weight:600; }

@media(max-width:640px){ .bl-wrap h1{ font-size:30px; } .post{ font-size:16px; } }