/* ============ Didactic Initiatives — blog/guides stylesheet ============ */
/* Shared by /blog/index.html and every /blog/*.html post. Tokens mirror the homepage. */
:root{
  --bg:          oklch(15% 0.012 250);
  --surface:     oklch(19% 0.014 250);
  --fg:          oklch(96% 0.005 100);
  --muted:       oklch(68% 0.012 250);
  --border:      oklch(34% 0.014 250);
  --accent:      oklch(78% 0.21 150);
  --accent-deep: oklch(26% 0.07 155);
  --font-display:'Playfair Display','DM Serif Display',Georgia,serif;
  --font-body:   'Inter','DM Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-mono:   ui-monospace,'JetBrains Mono','SF Mono',Menlo,monospace;
  --gutter: clamp(20px,4vw,64px);
  --line: 1px solid var(--border);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:oklch(15% 0.02 155)}
a{color:inherit}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* topnav (matches homepage) */
.topnav{position:sticky;top:0;z-index:50;display:flex;align-items:stretch;justify-content:space-between;border-bottom:var(--line);background:color-mix(in oklch,var(--bg) 88%,transparent);backdrop-filter:blur(12px)}
.topnav .brand{padding:18px var(--gutter);font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;text-decoration:none;border-right:var(--line)}
.topnav .brand b{color:var(--accent);font-weight:600}
.topnav nav{display:flex}
.topnav nav a{display:flex;align-items:center;padding:18px clamp(12px,2.2vw,28px);font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--muted);border-left:var(--line);transition:color .15s,background .15s}
.topnav nav a:hover{color:var(--fg);background:var(--surface)}

/* article shell */
main.post{max-width:760px;margin:0 auto;padding:clamp(28px,5vh,64px) var(--gutter) 0}
.crumbs{color:var(--muted);margin-bottom:clamp(24px,4vh,40px);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{color:var(--fg)}
article .eyebrow{color:var(--muted);display:flex;align-items:center;gap:14px;margin-bottom:20px}
article .eyebrow::before{content:"";width:34px;height:1px;background:var(--muted)}
article h1{font-family:var(--font-display);font-weight:900;font-size:clamp(32px,5.2vw,58px);line-height:1.05;letter-spacing:-.015em;text-wrap:balance;margin-bottom:18px}
.byline{color:var(--muted);margin-bottom:clamp(28px,4vh,44px);padding-bottom:clamp(28px,4vh,44px);border-bottom:var(--line)}
article h2{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,36px);line-height:1.1;letter-spacing:-.01em;margin:clamp(40px,6vh,64px) 0 16px}
article h3{font-family:var(--font-body);font-weight:600;font-size:clamp(18px,2vw,22px);margin:32px 0 12px;color:var(--fg)}
article p{margin:0 0 18px;color:oklch(90% 0.006 100)}
article a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in oklch,var(--accent) 40%,transparent);transition:border-color .15s}
article a:hover{border-bottom-color:var(--accent)}
article strong{color:var(--fg);font-weight:600}
article ul,article ol{margin:0 0 18px;padding-left:1.3em;color:oklch(90% 0.006 100)}
article li{margin-bottom:8px}
article li::marker{color:var(--accent)}
article blockquote{margin:24px 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);color:var(--muted);font-style:italic}
article p.note{border:var(--line);border-left:3px solid var(--accent);background:var(--surface);padding:16px 18px;border-radius:2px;color:var(--fg)}
article code{font-family:var(--font-mono);font-size:.86em;background:var(--surface);border:var(--line);border-radius:3px;padding:1px 6px}
article table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;display:block;overflow-x:auto}
article th,article td{text-align:left;padding:12px 14px;border:var(--line);vertical-align:top}
article th{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface);white-space:nowrap}

/* faq */
.faq{margin-top:clamp(48px,7vh,80px);border-top:var(--line);padding-top:clamp(32px,5vh,48px)}
.faq h2{margin-top:0}
.faq h3{font-family:var(--font-display);font-weight:700;font-size:20px;margin:24px 0 8px}

/* cta */
.cta{margin:clamp(48px,7vh,80px) 0;padding:clamp(28px,4vw,40px);background:var(--accent-deep);border:1px solid color-mix(in oklch,var(--accent) 40%,transparent);border-radius:4px}
.cta .eyebrow{color:var(--accent);margin-bottom:6px}
.cta h2{margin:6px 0 12px;font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.2vw,32px)}
.cta p{color:oklch(92% 0.01 150)}
.cta .cta-btn{display:inline-flex;align-items:center;gap:10px;margin-top:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--bg);background:var(--accent);padding:14px 22px;border-radius:2px;font-weight:600;transition:transform .15s}
.cta .cta-btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 oklch(20% 0.05 155)}
.cta .fine{font-size:13px;color:var(--muted);margin:16px 0 0}

/* related */
.related{margin:clamp(40px,6vh,64px) 0;border-top:var(--line);padding-top:32px}
.related h2{font-size:clamp(20px,2.4vw,26px);margin:0 0 12px;font-family:var(--font-display);font-weight:700}
.related ul{list-style:none;padding:0}
.related li{margin:0;border-bottom:var(--line)}
.related a{display:block;padding:16px 0;text-decoration:none;color:var(--fg);font-size:17px;transition:color .15s,padding .15s}
.related a:hover{color:var(--accent);padding-left:8px}

/* footer */
footer{border-top:var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px var(--gutter);margin-top:clamp(40px,6vh,64px)}
footer .mono{color:var(--muted)}
footer a{text-decoration:none}
footer a:hover{color:var(--accent)}

/* blog index */
.bloghero{max-width:760px;margin:0 auto;padding:clamp(48px,9vh,110px) var(--gutter) clamp(32px,5vh,56px)}
.bloghero .eyebrow{color:var(--muted);display:flex;align-items:center;gap:14px;margin-bottom:24px}
.bloghero .eyebrow::before{content:"";width:40px;height:1px;background:var(--muted)}
.bloghero h1{font-family:var(--font-display);font-weight:900;font-size:clamp(36px,6vw,72px);line-height:1.02;letter-spacing:-.015em;margin-bottom:20px}
.bloghero p{color:var(--muted);font-size:clamp(16px,1.4vw,19px);max-width:56ch}
.bloglist{max-width:760px;margin:0 auto;padding:0 var(--gutter) clamp(48px,8vh,96px)}
.blogcard{display:block;text-decoration:none;border-top:var(--line);padding:clamp(24px,4vh,40px) 0;transition:padding .15s}
.blogcard:last-child{border-bottom:var(--line)}
.blogcard:hover{padding-left:10px}
.blogcard .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.blogcard:hover .k{color:var(--accent)}
.blogcard h2{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.2vw,34px);line-height:1.1;letter-spacing:-.01em;margin-bottom:10px}
.blogcard p{color:var(--muted);max-width:60ch}
.blogcard:hover p{color:var(--fg)}

@media (max-width:760px){
  /* keep Home + Contact reachable; drop the middle items */
  .topnav nav a:nth-child(2),.topnav nav a:nth-child(3){display:none}
}