/* Blog styles. Tokens mirror public/index.html so the two read as one site. */
:root{
--bg:#0d1117; --panel:#141a22; --panel-2:#1a212b; --line:#242d3a;
--text:#e6edf3; --text-2:#9fb0c3; --text-3:#6b7d92;
--cyan:#4ec9d4; --amber:#f0b072; --violet:#a78bfa; --green:#6ee7a8;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--bg);color:var(--text);
font:400 17px/1.72 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
-webkit-font-smoothing:antialiased;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
/* ---- nav (matches index.html) ---- */
.nav{position:sticky;top:0;z-index:60;background:rgba(13,17,23,.9);backdrop-filter:blur(10px);
border-bottom:1px solid var(--line)}
.nav .wrap{max-width:1240px;margin:0 auto;padding:0 36px;
display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:12px}
.logo-mark{width:32px;height:32px;border-radius:7px;background:linear-gradient(140deg,var(--cyan),var(--violet));
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#0d1117}
.logo-txt{font-weight:650;font-size:15px;letter-spacing:-.01em;color:var(--text)}
.logo-sub{font-size:11.5px;color:var(--text-3);letter-spacing:.04em}
.logo a{color:inherit}
.logo a:hover{text-decoration:none}
.logo a:hover .logo-txt{color:var(--cyan)}
.navlinks{display:flex;gap:4px;align-items:center}
.navlinks a{padding:8px 14px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--text-2)}
.navlinks a:hover{background:var(--panel-2);color:var(--text);text-decoration:none}
.navlinks a.cta{background:var(--cyan);color:#0d1117;font-weight:600;margin-left:8px}
.navlinks a.cta:hover{background:#63dbe5}
/* ---- shared shell ---- */
.shell{max-width:760px;margin:0 auto;padding:0 24px}
/* ---- index listing ---- */
.idx-head{padding:64px 0 40px;border-bottom:1px solid var(--line);margin-bottom:8px;
background:radial-gradient(760px 340px at 20% -20%,rgba(78,201,212,.10),transparent 62%)}
.idx-head h1{font-size:40px;line-height:1.1;font-weight:680;letter-spacing:-.03em;margin-bottom:14px}
.idx-head p{font-size:18px;color:var(--text-2);max-width:60ch}
.post-list{padding:20px 0 90px}
.post-item{display:block;padding:30px 0;border-bottom:1px solid var(--line);color:inherit}
.post-item:hover{text-decoration:none}
.post-item:hover h2{color:var(--cyan)}
.post-meta{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);
margin-bottom:11px;display:flex;gap:14px;flex-wrap:wrap}
.post-item h2{font-size:25px;font-weight:650;letter-spacing:-.02em;line-height:1.25;margin-bottom:10px;
transition:color .15s}
.post-item p{font-size:16.5px;color:var(--text-2);line-height:1.6}
.series{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
padding:4px 9px;border-radius:6px;background:rgba(167,139,250,.15);color:var(--violet)}
.soon{opacity:.55}
.soon .post-item{cursor:default}
/* ---- article ---- */
article{padding:56px 0 40px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);
margin-bottom:16px}
article h1{font-size:42px;line-height:1.12;font-weight:680;letter-spacing:-.032em;margin-bottom:18px}
.standfirst{font-size:20px;line-height:1.6;color:var(--text-2);margin-bottom:26px}
.byline{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--text-3);
padding-bottom:30px;border-bottom:1px solid var(--line);margin-bottom:38px}
.byline b{color:var(--text-2);font-weight:600}
article h2{font-size:28px;font-weight:680;letter-spacing:-.022em;line-height:1.25;
margin:52px 0 18px;padding-top:6px}
article h3{font-size:20px;font-weight:650;letter-spacing:-.012em;margin:40px 0 14px;color:var(--text)}
article h3 .num{color:var(--text-3);font-weight:700;margin-right:10px;font-size:16px}
article p{margin-bottom:22px;color:var(--text-2)}
article p b,article li b{color:var(--text);font-weight:650}
article strong{color:var(--text);font-weight:650}
article ul{list-style:none;margin:0 0 24px}
article li{position:relative;padding-left:24px;margin-bottom:11px;color:var(--text-2);line-height:1.62}
article li:before{content:"▹";position:absolute;left:0;top:0;color:var(--cyan);font-size:14px}
/* the bolded headline question for each context */
.keyq{margin:0 0 20px;padding:18px 22px;border-radius:11px;
background:rgba(78,201,212,.07);border:1px solid rgba(78,201,212,.24);
font-size:17.5px;line-height:1.5;color:var(--text);font-weight:600}
/* the license anecdote */
.scene{margin:0 0 24px;padding:22px 26px;border-radius:12px;background:var(--panel);
border:1px solid var(--line);border-left:3px solid var(--amber)}
.scene p{margin-bottom:0;color:var(--text-2);font-size:16.5px}
.pullquote{margin:40px 0;padding:4px 0 4px 24px;border-left:3px solid var(--cyan)}
.pullquote p{font-size:23px;line-height:1.45;color:var(--text);font-weight:450;margin-bottom:0}
figure{margin:38px 0}
figure img,figure svg{width:100%;height:auto;display:block;border-radius:12px;
border:1px solid var(--line);background:var(--panel)}
figcaption{margin-top:12px;font-size:13.5px;color:var(--text-3);line-height:1.55}
.endnote{margin-top:56px;padding:28px 30px;border-radius:14px;
background:linear-gradient(120deg,rgba(78,201,212,.09),rgba(167,139,250,.07));
border:1px solid rgba(78,201,212,.24)}
.endnote .lab{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--cyan);margin-bottom:12px}
.endnote p{font-size:16.5px;margin-bottom:12px}
.endnote p:last-child{margin-bottom:0}
footer{border-top:1px solid var(--line);background:var(--panel);padding:40px 0;margin-top:70px}
footer .shell{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
font-size:14px;color:var(--text-3)}
@media(max-width:820px){
body{font-size:16.5px}
.nav .wrap{padding:0 20px}
.logo-sub{display:none}
article h1{font-size:32px}
.idx-head h1{font-size:31px}
article h2{font-size:24px;margin-top:42px}
.standfirst{font-size:18px}
.pullquote p{font-size:20px}
}