/* EVOKE EMOTIONS blog: server-rendered pages under /blog. Matches the main
   site's light lavender look (site.css tokens), rounded everything. */
:root{
  --bg:#eef0f4; --card:#ffffff; --ink:#1c1c21; --ink-soft:#2c2c33; --muted:#5b5c66;
  --accent:#6b25b0; --accent-soft:#f1eff5; --line:rgba(28,28,33,.08);
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --shadow:0 1px 2px rgba(28,28,33,.04),0 12px 40px -18px rgba(60,40,110,.22);
  --font:"Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  background-image:radial-gradient(1200px 600px at 85% -10%,#e6dcf7 0,transparent 60%),radial-gradient(900px 500px at -10% 10%,#f3eefb 0,transparent 55%);
  background-attachment:fixed;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
.bl-skip{position:absolute;left:-9999px;top:8px;background:var(--card);padding:10px 16px;border-radius:999px;z-index:10}
.bl-skip:focus{left:16px}

/* nav */
.bl-nav{position:sticky;top:12px;z-index:5;max-width:1120px;margin:12px auto 0;padding:10px 12px 10px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.9);border-radius:999px;box-shadow:var(--shadow)}
.bl-nav{margin-left:16px;margin-right:16px}
@media (min-width:1152px){.bl-nav{margin-left:auto;margin-right:auto}}
.bl-logo img{height:34px;width:auto}
.bl-nav nav{display:flex;align-items:center;gap:4px}
.bl-nav nav a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;padding:9px 14px;border-radius:999px}
.bl-nav nav a:hover{background:var(--accent-soft)}
.bl-pill,.bl-nav nav a.bl-pill{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;
  font-size:14px;letter-spacing:.02em;padding:11px 20px;border-radius:999px;box-shadow:0 8px 24px -10px rgba(107,37,176,.6)}
.bl-pill:hover,.bl-nav nav a.bl-pill:hover{background:#5a1e96}
@media (max-width:560px){.bl-nav nav a:not(.bl-pill){display:none}}

main{max-width:1120px;margin:0 auto;padding:0 16px}

/* list */
.bl-head{padding:64px 0 28px;max-width:760px}
.bl-kicker{margin:0 0 12px;color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.bl-head h1{margin:0;font-size:clamp(34px,6vw,60px);line-height:1.02;font-weight:800;letter-spacing:-.01em;text-transform:uppercase}
.bl-lede{margin:18px 0 0;color:var(--muted);font-size:18px}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding-bottom:64px}
.bl-card a{display:flex;flex-direction:column;height:100%;background:var(--card);border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.bl-card a:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(28,28,33,.05),0 22px 50px -20px rgba(60,40,110,.32)}
.bl-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg) var(--r-lg) 0 0}
.bl-card-body{padding:20px 22px 24px}
.bl-card time{color:var(--muted);font-size:13px}
.bl-card h2{margin:6px 0 8px;font-size:20px;line-height:1.25;font-weight:750}
.bl-card p{margin:0;color:var(--muted);font-size:15px}
.bl-empty{text-align:center;padding:48px 0 96px}
.bl-empty h1{font-size:clamp(28px,5vw,44px);text-transform:uppercase;margin:24px 0 8px}
.bl-empty p{color:var(--muted);font-size:18px;margin:0 0 24px}

/* post */
.bl-post{max-width:800px;margin:0 auto;padding:48px 0 72px}
.bl-crumbs{display:flex;gap:8px;font-size:14px;color:var(--muted);margin-bottom:18px}
.bl-crumbs a{color:var(--muted);text-decoration:none}
.bl-crumbs a:hover{color:var(--accent)}
.bl-post-head h1{margin:0;font-size:clamp(30px,5.2vw,48px);line-height:1.08;font-weight:800;letter-spacing:-.01em}
.bl-meta{color:var(--muted);font-size:14px;margin:14px 0 0}
.bl-hero{margin:28px 0 0}
.bl-hero img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.bl-content{margin-top:32px;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:clamp(22px,5vw,52px);font-size:18px;line-height:1.75;color:var(--ink-soft);overflow-wrap:anywhere}
.bl-content > :first-child{margin-top:0}
.bl-content h2{font-size:clamp(23px,3.4vw,29px);line-height:1.2;color:var(--ink);margin:1.9em 0 .6em;font-weight:800;scroll-margin-top:96px}
.bl-content h3{font-size:21px;line-height:1.3;color:var(--ink);margin:1.6em 0 .5em;font-weight:750;scroll-margin-top:96px}
.bl-content h4{font-size:18px;color:var(--ink);margin:1.4em 0 .4em;scroll-margin-top:96px}
.bl-content p{margin:0 0 1.1em}
.bl-content a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.bl-content ul,.bl-content ol{padding-left:1.3em;margin:0 0 1.2em}
.bl-content li{margin:.35em 0}
.bl-content img{border-radius:var(--r-md);margin:1.4em 0 .4em}
.bl-content figure{margin:1.6em 0}
.bl-content figure img{margin:0}
.bl-content figcaption{font-size:14px;color:var(--muted);margin-top:8px;text-align:center}
.bl-content blockquote{margin:1.4em 0;padding:16px 22px;background:var(--accent-soft);border-radius:var(--r-md);color:var(--ink)}
.bl-content blockquote p:last-child{margin-bottom:0}
.bl-content hr{border:0;height:1px;background:var(--line);margin:2em 0}
.bl-content code{background:var(--accent-soft);padding:2px 7px;border-radius:8px;font-size:.9em}
.bl-content table{width:100%;border-collapse:separate;border-spacing:0;margin:1.4em 0;font-size:16px;
  border-radius:var(--r-md);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
@media (max-width:640px){.bl-content table{display:block;overflow-x:auto}}
.bl-content th,.bl-content td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.bl-content th{background:var(--accent-soft);color:var(--ink);font-weight:700}
.bl-content tr:last-child td{border-bottom:0}
.bl-content details{background:var(--accent-soft);border-radius:var(--r-md);padding:14px 18px;margin:10px 0}
.bl-content summary{cursor:pointer;font-weight:700;color:var(--ink)}
.bl-video{position:relative;aspect-ratio:16/9;margin:1.6em 0;border-radius:var(--r-md);overflow:hidden;background:#111}
.bl-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bl-cta{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px 28px}
.bl-cta p{margin:0;font-size:19px;font-weight:700}

/* footer */
.bl-foot{max-width:1120px;margin:0 auto;padding:28px 16px 40px;display:flex;flex-wrap:wrap;gap:12px 24px;
  justify-content:space-between;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
.bl-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.bl-foot a{color:var(--muted);text-decoration:none}
.bl-foot a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){.bl-card a{transition:none}.bl-card a:hover{transform:none}}