/* Journal Scalp Studio — Blog. Design tokens:
   bg #0B0F13, surface #121820, border #232B34,
   text #DCE3E8, muted #7C8A96, green #35C777, red #E5484D, ink #0A0E12
   Headings: Space Grotesk. Body: Source Serif 4. Console blocks: JetBrains Mono. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#0B0F13;
  --surface:#121820;
  --border:#232B34;
  --text:#DCE3E8;
  --muted:#7C8A96;
  --green:#35C777;
  --red:#E5484D;
  --ink:#0A0E12;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Source Serif 4', Georgia, serif;
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3{
  font-family:'Space Grotesk', system-ui, sans-serif;
  color:#F2F6F8;
  line-height:1.2;
  margin:0 0 .5em;
}

/* ---------- header ---------- */
.site-header{
  border-bottom:1px solid var(--border);
  background:rgba(11,15,19,.92);
  position:sticky; top:0; z-index:10;
  backdrop-filter:blur(6px);
}
.site-header .wrap{
  max-width:960px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:17px; color:#F2F6F8; letter-spacing:.2px;
}
.logo span{color:var(--green);}
.btn{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600; font-size:14px;
  background:var(--green); color:#06210F;
  padding:10px 18px; border-radius:6px; border:none;
  display:inline-block; white-space:nowrap;
}
.btn:hover{background:#48D68A; text-decoration:none;}
.btn-outline{
  background:transparent; color:var(--text); border:1px solid var(--border);
}
.btn-outline:hover{border-color:var(--green); color:var(--green); text-decoration:none;}

/* ---------- article shell ---------- */
main{max-width:680px; margin:0 auto; padding:48px 24px 96px;}
.crumb{
  font-family:'Space Grotesk', sans-serif;
  font-size:13px; color:var(--muted); margin-bottom:18px;
}
.crumb a{color:var(--muted);}
.crumb a:hover{color:var(--green);}

article h1{font-size:36px; margin-bottom:.35em;}
.dek{color:var(--muted); font-size:16px; font-family:'Space Grotesk',sans-serif; margin-bottom:24px;}

/* TL;DR — self-contained answer for AI/answer-engine extraction */
.tldr{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--green);
  border-radius:6px;
  padding:16px 18px;
  margin:0 0 32px;
}
.tldr .label{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px;
  color:var(--green); text-transform:uppercase; letter-spacing:.04em;
  margin-bottom:6px; display:block;
}
.tldr p{margin:0; font-size:16.5px;}

/* FAQ — matched 1:1 with FAQPage JSON-LD in <head> */
.faq{margin-top:48px; padding-top:8px;}
.faq h2{margin-top:0;}
.faq-item{margin-bottom:22px;}
.faq-item h3{
  font-family:'Space Grotesk',sans-serif; font-size:17px;
  border:none; padding-left:0; margin-bottom:.4em; color:#F2F6F8;
}
.faq-item p{margin:0; color:var(--text);}

article h2{
  font-size:22px; margin-top:2.2em;
  padding-left:14px; border-left:3px solid var(--green);
}
article h3{
  font-size:18px; margin-top:1.6em;
  padding-left:14px; border-left:3px solid var(--border);
  color:var(--text);
}
article p{margin:0 0 1.15em;}
article ul, article ol{margin:0 0 1.15em; padding-left:1.3em;}
article li{margin-bottom:.5em;}

/* callout: the pain, in the article's own words */
.pain{
  border-left:3px solid var(--red);
  background:rgba(229,72,77,.08);
  padding:14px 18px;
  margin:0 0 1.6em;
  font-style:italic;
}

/* AI verdict — rendered as literal console output */
.console{
  background:var(--ink);
  border:1px solid var(--border);
  border-radius:6px;
  padding:16px 18px;
  margin:0 0 1.6em;
}
.console .who{
  font-family:'JetBrains Mono',monospace;
  font-size:12px; color:var(--muted); margin-bottom:8px;
}
.console p{
  font-family:'JetBrains Mono',monospace;
  font-size:14.5px; line-height:1.6;
  color:var(--green); margin:0;
}

/* comparison table used in some articles */
.tbl{width:100%; border-collapse:collapse; margin:0 0 1.6em; font-family:'Space Grotesk',sans-serif; font-size:14.5px;}
.tbl th,.tbl td{border:1px solid var(--border); padding:10px 12px; text-align:left; vertical-align:top;}
.tbl th{color:var(--muted); font-weight:600; background:var(--surface);}

/* glossary terms */
article p[id]{
  scroll-margin-top:80px;
  padding:10px 0 10px 14px;
  border-left:2px solid var(--border);
  margin-bottom:1em;
}
article p[id]:target{border-left-color:var(--green); background:rgba(53,199,119,.06);}

/* end-of-article CTA */
.cta{
  margin-top:56px; padding:28px;
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  text-align:left;
}
.cta h3{margin-top:0; border:none; padding-left:0; font-size:20px;}
.cta p{color:var(--muted); font-family:'Space Grotesk',sans-serif; font-size:15px;}
.cta .sub{font-size:13px; margin-top:10px; color:var(--muted);}

/* related links */
.related{margin-top:40px; padding-top:24px; border-top:1px solid var(--border);}
.related h3{font-size:15px; color:var(--muted); border:none; padding-left:0; font-family:'Space Grotesk',sans-serif;}
.related ul{list-style:none; padding:0; margin:0;}
.related li{margin-bottom:8px;}

/* hub page */
.hub-hero{max-width:680px; margin:0 auto; padding:56px 24px 8px;}
.hub-hero h1{font-size:34px;}
.hub-hero p{color:var(--muted); font-family:'Space Grotesk',sans-serif; font-size:16px;}
.category{max-width:680px; margin:0 auto; padding:32px 24px 0;}
.category h2{font-size:16px; color:var(--muted); font-family:'Space Grotesk',sans-serif; border:none; padding-left:0; text-transform:none;}
.post-list{list-style:none; margin:0 0 8px; padding:0;}
.post-card{
  display:block; padding:18px 0; border-bottom:1px solid var(--border);
}
.post-card h3{font-size:19px; margin-bottom:6px; border:none; padding-left:0; color:#F2F6F8;}
.post-card:hover h3{color:var(--green);}
.post-card p{color:var(--muted); font-size:15px; margin:0; font-family:'Source Serif 4',serif;}

footer{
  border-top:1px solid var(--border); margin-top:40px;
  font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--muted);
}
footer .wrap{max-width:960px; margin:0 auto; padding:28px 24px;}

@media (max-width:640px){
  body{font-size:17px;}
  article h1{font-size:28px;}
  main{padding:32px 18px 72px;}
}