/* Mana Coding — Blog stylesheet
   Tokens
   --bg #F5F7FA   --surface #FFFFFF   --ink #14181F   --muted #5B6472
   --accent #2454C7   --accent-dark #17347F   --gold #D98E2A   --green #1F8A5F
   --line #E1E5EB
   Type: Space Grotesk (display) / IBM Plex Sans (body) / IBM Plex Mono (utility)
*/

:root{
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --ink:#14181F;
  --muted:#5B6472;
  --accent:#2454C7;
  --accent-dark:#17347F;
  --gold:#D98E2A;
  --green:#1F8A5F;
  --line:#E1E5EB;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,Segoe UI,sans-serif;
  line-height:1.7;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---- Top nav ---- */
.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:760px;
  margin:0 auto;
  padding:22px 24px 0;
}
.site-nav .wordmark{
  font-family:"Space Grotesk",sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:0.01em;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:8px;
}
.site-nav .wordmark .mark{
  background:var(--accent);
  color:#fff;
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  font-weight:600;
  padding:3px 6px;
  border-radius:4px;
}
.site-nav .back{
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  color:var(--muted);
}

/* ---- Article shell ---- */
.article{
  max-width:680px;
  margin:0 auto;
  padding:28px 24px 80px;
}

/* Signature: scan line eyebrow */
.scan-line{
  display:flex;
  align-items:center;
  gap:10px;
  margin:28px 0 18px;
}
.scan-line .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
  flex:none;
  box-shadow:0 0 0 3px rgba(31,138,95,0.15);
}
.scan-line .tag{
  font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;
  color:var(--accent-dark);
  background:rgba(36,84,199,0.07);
  border:1px solid rgba(36,84,199,0.15);
  border-radius:4px;
  padding:3px 8px;
  letter-spacing:0.02em;
}
.scan-line .rule{
  flex:1;
  height:0;
  border-top:1px dashed var(--line);
}

h1.title{
  font-family:"Space Grotesk",sans-serif;
  font-weight:700;
  font-size:clamp(28px,4vw,38px);
  line-height:1.15;
  margin:0 0 10px;
  color:var(--ink);
}
.dek{
  color:var(--muted);
  font-size:18px;
  margin:0 0 14px;
}
.meta{
  font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;
  color:var(--muted);
  margin-bottom:32px;
}

.article h2{
  font-family:"Space Grotesk",sans-serif;
  font-weight:600;
  font-size:23px;
  margin:40px 0 12px;
  color:var(--ink);
}
.article h3{
  font-family:"Space Grotesk",sans-serif;
  font-weight:600;
  font-size:18px;
  margin:26px 0 8px;
}
.article p{margin:0 0 18px;color:var(--ink);}
.article ul, .article ol{margin:0 0 20px;padding-left:22px;}
.article li{margin-bottom:8px;}
.article strong{font-weight:600;}

/* Keyword chips — used across keyword/checklist posts */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;}
.chip{
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  background:#FBF3E6;
  color:#8A5A0E;
  border:1px solid rgba(217,142,42,0.35);
  border-radius:5px;
  padding:5px 10px;
}

/* Callout box */
.callout{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:8px;
  padding:16px 20px;
  margin:0 0 24px;
}
.callout p{margin:0;}
.callout .label{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  color:var(--accent-dark);
  text-transform:uppercase;
  letter-spacing:0.05em;
  display:block;
  margin-bottom:6px;
}

/* Checklist */
.checklist{list-style:none;padding-left:0;margin:0 0 24px;}
.checklist li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.checklist li:last-child{border-bottom:none;}
.checklist .box{
  flex:none;
  width:16px;height:16px;
  margin-top:3px;
  border:1.5px solid var(--muted);
  border-radius:3px;
}

/* CTA block */
.cta{
  background:var(--accent-dark);
  color:#fff;
  border-radius:12px;
  padding:28px 26px;
  margin:44px 0 8px;
}
.cta .label{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  color:#AFC2F2;
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-bottom:8px;
  display:block;
}
.cta h3{
  font-family:"Space Grotesk",sans-serif;
  font-size:21px;
  margin:0 0 10px;
  color:#fff;
}
.cta p{color:#DCE4F7;margin:0 0 16px;}
.cta a.btn{
  display:inline-block;
  background:var(--gold);
  color:#221600;
  font-weight:600;
  font-family:"IBM Plex Sans",sans-serif;
  padding:11px 20px;
  border-radius:7px;
  text-decoration:none;
}
.cta a.btn:hover{text-decoration:none;filter:brightness(1.05);}

/* Related posts */
.related{margin-top:56px;}
.related .label{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:14px;
  display:block;
}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.related a{
  display:block;
  padding:12px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--ink);
  font-size:15px;
}
.related a:hover{border-color:var(--accent);text-decoration:none;}

footer.site-footer{
  max-width:680px;
  margin:0 auto;
  padding:20px 24px 60px;
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  color:var(--muted);
}

@media (max-width:480px){
  body{font-size:16px;}
  .article{padding:20px 18px 60px;}
}