/* Zanova Pods — blog & articles · design kryptonite partagé */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600;700&display=swap');
:root{ --ink:#F4F2EA; --bg:#070806; --tile:#0d0f0c; --tile2:#11140f; --mute:#8A8C82; --faint:#55584F; --rule:#1d211a;
  --signal:#2BFF9E; --deep:#06140E; --glow:rgba(43,255,158,.6);
  --hero:'Anton','Bricolage Grotesque',sans-serif; --display:'Bricolage Grotesque',sans-serif; --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace; }
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; line-height:1.6; }
a{ color:var(--signal); text-decoration:none; } a:hover{ text-decoration:underline; }
em{ font-style:normal; color:var(--signal); }
.wrap{ max-width:760px; margin:0 auto; padding:0 24px; }
.wrap-wide{ max-width:1080px; margin:0 auto; padding:0 24px; }

/* nav / footer */
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; border-bottom:1px solid var(--rule); position:sticky; top:0; background:rgba(7,8,6,.86); backdrop-filter:blur(10px); z-index:30; }
.logo{ font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--ink); } .logo i{ color:var(--signal); font-style:normal; text-shadow:0 0 14px var(--glow); }
.navl{ display:flex; gap:20px; align-items:center; font-size:13px; } .navl a{ color:var(--mute); } .navl a:hover{ color:var(--ink); text-decoration:none; }
.btn{ font-family:var(--sans); font-weight:600; font-size:13px; padding:9px 16px; border-radius:9px; background:var(--signal); color:var(--deep); display:inline-flex; gap:6px; align-items:center; }
.btn:hover{ text-decoration:none; box-shadow:0 0 22px -6px var(--glow); }
.foot{ border-top:1px solid var(--rule); padding:28px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.05em; margin-top:60px; }
.foot a{ color:var(--faint); } .foot a:hover{ color:var(--ink); }

/* index */
.blog-head{ padding:64px 24px 24px; text-align:center; }
.ko{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--signal); text-shadow:0 0 12px var(--glow); }
.blog-head h1{ font-family:var(--hero); font-weight:400; font-size:clamp(40px,7vw,72px); line-height:.95; margin:14px 0 0; letter-spacing:0; }
.blog-head p{ color:var(--mute); font-size:15px; max-width:560px; margin:14px auto 0; }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; padding:32px 0 20px; }
.card{ display:block; background:var(--tile); border:1px solid var(--rule); border-radius:14px; padding:22px; transition:transform .16s,border-color .2s,box-shadow .2s; }
.card:hover{ transform:translateY(-4px); border-color:rgba(43,255,158,.45); box-shadow:0 18px 44px -24px var(--glow); text-decoration:none; }
.card .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--signal); }
.card h2{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.015em; margin:10px 0 0; line-height:1.18; color:var(--ink); }
.card p{ color:var(--mute); font-size:13.5px; margin:9px 0 0; }
.card .more{ margin-top:14px; font-family:var(--mono); font-size:11px; color:var(--signal); }

/* article */
.art-hero{ padding:56px 24px 12px; }
.art-hero .meta{ font-family:var(--mono); font-size:11px; color:var(--mute); letter-spacing:.06em; }
.art-hero .meta b{ color:var(--signal); }
.art-hero h1{ font-family:var(--hero); font-weight:400; font-size:clamp(34px,5.4vw,58px); line-height:1; letter-spacing:0; margin:14px 0 0; }
.art-hero .lede{ color:var(--mute); font-size:17px; margin:16px 0 0; line-height:1.5; }
article.prose{ padding:8px 0 20px; font-size:16.5px; }
article.prose h2{ font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:-.02em; margin:40px 0 12px; }
article.prose h3{ font-family:var(--display); font-weight:700; font-size:19px; margin:28px 0 8px; }
article.prose p{ margin:14px 0; color:#E7E5DC; }
article.prose ul,article.prose ol{ margin:14px 0 14px 22px; color:#E7E5DC; } article.prose li{ margin:7px 0; }
article.prose blockquote{ border-left:3px solid var(--signal); padding:6px 0 6px 18px; margin:20px 0; color:var(--ink); font-family:var(--display); font-weight:600; font-size:19px; }
article.prose strong{ color:#fff; }
article.prose code{ font-family:var(--mono); font-size:.86em; background:var(--tile); border:1px solid var(--rule); border-radius:5px; padding:1px 5px; }
.art-cta{ margin:36px 0 0; background:linear-gradient(180deg,var(--tile2),var(--tile)); border:1px solid rgba(43,255,158,.35); border-radius:14px; padding:24px; text-align:center; }
.art-cta h3{ font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-.02em; } .art-cta p{ color:var(--mute); font-size:14px; margin:8px 0 16px; }
.art-tags{ margin-top:28px; font-family:var(--mono); font-size:11px; color:var(--faint); }