/* Shared styles for the blog: the post list (index.html) and every article page.
   Light, minimal look based on variants/b-studio.html. Changing this file restyles all posts. */
:root { --bg:#f3efe6; --fg:#15131a; --dim:#6b6674; --line:#d9d2c3; --card:#faf7f0; --code:#ebe5d8; --a:#ff5a36; --b:#2f6bff; --c:#ffc400; --d:#16b877; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--fg); font:17px/1.7 Inter,system-ui,sans-serif; min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; }
a { color:inherit; }
img { max-width:100%; height:auto; display:block; }

/* header and footer */
.site-header, .site-footer { width:100%; max-width:1240px; margin:0 auto; padding:0 40px; display:flex; justify-content:space-between; align-items:center; }
.site-header { padding-top:28px; font-size:14px; }
.site-header nav { display:flex; gap:22px; }
.site-header nav a { text-decoration:none; border-bottom:1.5px solid transparent; }
.site-header nav a:hover, .site-header nav a[aria-current] { border-bottom-color:var(--a); }
.mark { display:flex; align-items:center; gap:10px; font:800 15px Unbounded,sans-serif; text-decoration:none; }
.mark i { width:36px; height:36px; border-radius:10px; flex:none; image-rendering:pixelated;
  /* pixel flask, same as public/logo.svg; inlined so every page (and the template preview) shows it without a path */
  background:#0b0b16 center/24px 28px no-repeat url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' shape-rendering='crispEdges'><rect x='4' y='0' width='1' height='1' fill='%23e8e6ff'/><rect x='5' y='0' width='1' height='1' fill='%23e8e6ff'/><rect x='6' y='0' width='1' height='1' fill='%23e8e6ff'/><rect x='7' y='0' width='1' height='1' fill='%23e8e6ff'/><rect x='4' y='1' width='1' height='1' fill='%23e8e6ff'/><rect x='5' y='1' width='1' height='1' fill='%233ff0ff'/><rect x='6' y='1' width='1' height='1' fill='%233ff0ff'/><rect x='7' y='1' width='1' height='1' fill='%23e8e6ff'/><rect x='4' y='2' width='1' height='1' fill='%23e8e6ff'/><rect x='5' y='2' width='1' height='1' fill='%23e8e6ff'/><rect x='6' y='2' width='1' height='1' fill='%23e8e6ff'/><rect x='7' y='2' width='1' height='1' fill='%23e8e6ff'/><rect x='4' y='3' width='1' height='1' fill='%23e8e6ff'/><rect x='7' y='3' width='1' height='1' fill='%23e8e6ff'/><rect x='4' y='4' width='1' height='1' fill='%23e8e6ff'/><rect x='7' y='4' width='1' height='1' fill='%23e8e6ff'/><rect x='3' y='5' width='1' height='1' fill='%23e8e6ff'/><rect x='8' y='5' width='1' height='1' fill='%23e8e6ff'/><rect x='2' y='6' width='1' height='1' fill='%23e8e6ff'/><rect x='9' y='6' width='1' height='1' fill='%23e8e6ff'/><rect x='1' y='7' width='1' height='1' fill='%23e8e6ff'/><rect x='3' y='7' width='1' height='1' fill='%23b6ff3b'/><rect x='4' y='7' width='1' height='1' fill='%23b6ff3b'/><rect x='5' y='7' width='1' height='1' fill='%23b6ff3b'/><rect x='6' y='7' width='1' height='1' fill='%23b6ff3b'/><rect x='7' y='7' width='1' height='1' fill='%23b6ff3b'/><rect x='8' y='7' width='1' height='1' fill='%23b6ff3b'/><rect x='10' y='7' width='1' height='1' fill='%23e8e6ff'/><rect x='0' y='8' width='1' height='1' fill='%23e8e6ff'/><rect x='2' y='8' width='1' height='1' fill='%23b6ff3b'/><rect x='3' y='8' width='1' height='1' fill='%23b6ff3b'/><rect x='4' y='8' width='1' height='1' fill='%23eaffc2'/><rect x='5' y='8' width='1' height='1' fill='%23b6ff3b'/><rect x='6' y='8' width='1' height='1' fill='%23b6ff3b'/><rect x='7' y='8' width='1' height='1' fill='%23b6ff3b'/><rect x='8' y='8' width='1' height='1' fill='%23b6ff3b'/><rect x='9' y='8' width='1' height='1' fill='%23b6ff3b'/><rect x='11' y='8' width='1' height='1' fill='%23e8e6ff'/><rect x='0' y='9' width='1' height='1' fill='%23e8e6ff'/><rect x='2' y='9' width='1' height='1' fill='%23b6ff3b'/><rect x='3' y='9' width='1' height='1' fill='%23b6ff3b'/><rect x='4' y='9' width='1' height='1' fill='%23b6ff3b'/><rect x='5' y='9' width='1' height='1' fill='%23b6ff3b'/><rect x='6' y='9' width='1' height='1' fill='%23b6ff3b'/><rect x='7' y='9' width='1' height='1' fill='%23eaffc2'/><rect x='8' y='9' width='1' height='1' fill='%23b6ff3b'/><rect x='9' y='9' width='1' height='1' fill='%23b6ff3b'/><rect x='11' y='9' width='1' height='1' fill='%23e8e6ff'/><rect x='0' y='10' width='1' height='1' fill='%23e8e6ff'/><rect x='2' y='10' width='1' height='1' fill='%23b6ff3b'/><rect x='3' y='10' width='1' height='1' fill='%23eaffc2'/><rect x='4' y='10' width='1' height='1' fill='%23b6ff3b'/><rect x='5' y='10' width='1' height='1' fill='%23b6ff3b'/><rect x='6' y='10' width='1' height='1' fill='%23b6ff3b'/><rect x='7' y='10' width='1' height='1' fill='%23b6ff3b'/><rect x='8' y='10' width='1' height='1' fill='%23b6ff3b'/><rect x='9' y='10' width='1' height='1' fill='%23b6ff3b'/><rect x='11' y='10' width='1' height='1' fill='%23e8e6ff'/><rect x='0' y='11' width='1' height='1' fill='%23e8e6ff'/><rect x='2' y='11' width='1' height='1' fill='%23b6ff3b'/><rect x='3' y='11' width='1' height='1' fill='%23b6ff3b'/><rect x='4' y='11' width='1' height='1' fill='%23b6ff3b'/><rect x='5' y='11' width='1' height='1' fill='%23b6ff3b'/><rect x='6' y='11' width='1' height='1' fill='%23b6ff3b'/><rect x='7' y='11' width='1' height='1' fill='%23b6ff3b'/><rect x='8' y='11' width='1' height='1' fill='%23eaffc2'/><rect x='9' y='11' width='1' height='1' fill='%23b6ff3b'/><rect x='11' y='11' width='1' height='1' fill='%23e8e6ff'/><rect x='1' y='12' width='1' height='1' fill='%23e8e6ff'/><rect x='10' y='12' width='1' height='1' fill='%23e8e6ff'/><rect x='2' y='13' width='1' height='1' fill='%23e8e6ff'/><rect x='3' y='13' width='1' height='1' fill='%23e8e6ff'/><rect x='4' y='13' width='1' height='1' fill='%23e8e6ff'/><rect x='5' y='13' width='1' height='1' fill='%23e8e6ff'/><rect x='6' y='13' width='1' height='1' fill='%23e8e6ff'/><rect x='7' y='13' width='1' height='1' fill='%23e8e6ff'/><rect x='8' y='13' width='1' height='1' fill='%23e8e6ff'/><rect x='9' y='13' width='1' height='1' fill='%23e8e6ff'/></svg>"); }
main { flex:1; width:100%; }
.site-footer { font-size:12.5px; color:var(--dim); padding-top:40px; padding-bottom:18px; margin-top:64px; border-top:1px solid var(--line); }

/* shared bits */
.eyebrow { font-size:13px; text-transform:uppercase; letter-spacing:.18em; color:var(--dim); }
.eyebrow::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--d); margin-right:10px; vertical-align:1px; }
.meta { display:flex; flex-wrap:wrap; gap:6px 10px; font-size:13.5px; color:var(--dim); }
.meta > * + *::before { content:"·"; margin-right:10px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.tags li { font-size:12px; letter-spacing:.04em; padding:3px 10px; border:1px solid var(--line); border-radius:999px; color:var(--dim); }

/* post list */
.blog-hero { max-width:1240px; margin:0 auto; padding:64px 40px 36px; }
.blog-hero h1 { font:800 clamp(44px,7vw,88px)/.95 Unbounded,sans-serif; letter-spacing:-.03em; margin-top:18px; }
.blog-hero h1 em { font-style:normal; color:var(--a); }
.blog-hero p { max-width:560px; margin-top:20px; color:var(--dim); }
.posts { max-width:1240px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px; }
.card { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; text-decoration:none; transition:transform .2s ease-out, border-color .2s; }
.card:hover { transform:translateY(-4px); border-color:var(--fg); }
.card img { width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--line); }
.card-body { display:flex; flex-direction:column; gap:12px; padding:20px 22px 24px; flex:1; }
.card h2 { font:500 21px/1.25 Unbounded,sans-serif; letter-spacing:-.01em; }
.card p { font-size:15px; line-height:1.6; color:var(--dim); flex:1; }
.empty { max-width:1240px; margin:0 auto; padding:0 40px; color:var(--dim); }
.posts:has(.card) + .empty { display:none; }

/* article page */
.post { max-width:1240px; margin:0 auto; padding:56px 40px 0; }
.back { display:inline-block; font-size:14px; color:var(--dim); text-decoration:none; margin-bottom:28px; }
.back:hover { color:var(--fg); }
.post-head h1 { font:800 clamp(32px,5vw,56px)/1.05 Unbounded,sans-serif; letter-spacing:-.025em; margin:16px 0 22px; }
.post-head .tags { margin-top:16px; }
.cover { margin:36px 0 8px; }
.cover img { width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:18px; background:var(--line); }

/* article body: plain HTML elements pasted from the article */
.post-body { margin-top:32px; }
.post-body > * + * { margin-top:1.1em; }
.post-body h2 { font:500 26px/1.25 Unbounded,sans-serif; letter-spacing:-.01em; margin-top:1.9em; }
.post-body h3 { font:500 19px/1.3 Unbounded,sans-serif; margin-top:1.6em; }
.post-body a { text-decoration-color:var(--a); text-decoration-thickness:1.5px; text-underline-offset:3px; }
.post-body a:hover { color:var(--a); }
.post-body ul, .post-body ol { padding-left:1.4em; }
.post-body li + li { margin-top:.35em; }
.post-body li::marker { color:var(--a); }
.post-body figure { margin:2em 0; }
.post-body figure img { border-radius:14px; }
.post-body figcaption { font-size:13.5px; color:var(--dim); margin-top:10px; text-align:center; }
.post-body blockquote { border-left:3px solid var(--a); padding:4px 0 4px 20px; font-size:19px; color:var(--dim); }
.post-body code { font:.88em/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--code); padding:2px 6px; border-radius:6px; }
.post-body pre { background:var(--fg); color:var(--bg); padding:18px 20px; border-radius:14px; overflow-x:auto; }
.post-body pre code { background:none; padding:0; color:inherit; font-size:14px; }
.post-body hr { border:0; border-top:1px solid var(--line); margin:2.4em 0; }

/* share */
.post-foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-top:56px; padding-top:24px; border-top:1px solid var(--line); }
.post-foot .back { margin:0; }
.share { display:inline-flex; align-items:center; gap:10px; font:500 14px Inter,system-ui,sans-serif; color:var(--bg); background:var(--fg); padding:11px 18px; border-radius:999px; text-decoration:none; transition:transform .15s; }
.share:hover { transform:translateY(-2px); }
.share svg { width:15px; height:15px; fill:currentColor; }

@media (max-width:860px) {
  .site-header, .site-footer, .blog-hero, .posts, .empty, .post { padding-left:16px; padding-right:16px; }
  .blog-hero { padding-top:40px; }
  .posts { grid-template-columns:1fr; }
  .post { padding-top:36px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }