/* Aheadia — shared styles for the guides/blog section */
:root{
  --paper:#EEF1EA;
  --paper-deep:#E4E9DF;
  --grid-line:#D2DACB;
  --ink:#16302B;
  --ink-soft:#3F5850;
  --red:#B23333;
  --red-dark:#8F2727;
  --marker:#D7E86B;
  --marker-dark:#AFC93F;
  --blue:#2E4BD1;
  --graphite:#4B564D;
  --white:#FFFDF8;
  --shadow:0 1px 0 rgba(22,48,43,0.06), 0 8px 24px rgba(22,48,43,0.06);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/120px 120px,
    radial-gradient(ellipse 640px 420px at 10% 2%, rgba(215,232,107,0.26) 0%, rgba(215,232,107,0) 68%),
    radial-gradient(ellipse 760px 520px at 92% 14%, rgba(46,75,209,0.05) 0%, rgba(46,75,209,0) 70%),
    radial-gradient(var(--grid-line) 1.1px, transparent 1.1px) 0 0/26px 26px,
    var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.75;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
h1,h2,h3,h4{font-family:'Space Grotesk', sans-serif; letter-spacing:-0.01em; margin:0; text-wrap:balance;}
img,svg{display:block; max-width:100%;}
a{color:var(--red);}
::selection{background:var(--marker); color:var(--ink);}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:3px; border-radius:4px;}

.skip-link{position:absolute; left:-9999px; background:var(--ink); color:var(--paper); padding:12px 20px; border-radius:8px; z-index:100; text-decoration:none; font-weight:600;}
.skip-link:focus{left:16px; top:16px;}

/* ---------- NAV ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(238,241,234,0.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--grid-line);
}
.nav-row{
  max-width:1180px; margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.22rem; text-decoration:none; color:var(--ink);}
.brand-mark{width:32px; height:32px; border-radius:9px; object-fit:cover;}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--paper); text-decoration:none;
  padding:10px 18px; border-radius:100px; font-weight:600; font-size:0.88rem;
  transition:background .18s ease, transform .18s ease; white-space:nowrap;
}
.nav-cta svg{width:15px; height:15px;}
.nav-cta:hover{background:var(--red); transform:translateY(-1px);}

/* ---------- LAYOUT ---------- */
.wrap{max-width:760px; margin:0 auto; padding:0 28px;}
.wrap-wide{max-width:1080px; margin:0 auto; padding:0 28px;}

.crumbs{
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--graphite);
  padding:30px 0 0; display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.crumbs a{color:var(--ink-soft); text-decoration:none;}
.crumbs a:hover{color:var(--ink); text-decoration:underline;}
.crumbs span{color:var(--grid-line);}

/* ---------- ARTICLE ---------- */
.article-head{padding:26px 0 8px;}
.kicker{
  font-family:'IBM Plex Mono', monospace; font-size:0.76rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--red); font-weight:500;
}
.article-head h1{font-size:clamp(2rem, 4.4vw, 2.9rem); line-height:1.12; margin:14px 0 0;}
.standfirst{font-size:1.14rem; color:var(--ink-soft); margin:18px 0 0; line-height:1.65;}
.byline{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:var(--graphite);
  margin-top:22px; padding-bottom:26px; border-bottom:1px solid var(--grid-line);
}
.byline .dot{color:var(--grid-line);}

article{padding-bottom:40px;}
article h2{font-size:clamp(1.42rem, 2.6vw, 1.78rem); margin:48px 0 0; line-height:1.25; scroll-margin-top:84px;}
article h3{font-size:1.16rem; margin:32px 0 0; line-height:1.35;}
article p{margin:16px 0 0; color:var(--ink-soft);}
article ul, article ol{margin:16px 0 0; padding-left:22px; color:var(--ink-soft);}
article li{margin-bottom:9px;}
article li::marker{color:var(--red);}
article strong{color:var(--ink); font-weight:600;}
article a{color:var(--red); text-underline-offset:2px;}
article hr{border:none; border-top:1px solid var(--grid-line); margin:44px 0 0;}

/* ---------- TABLE OF CONTENTS ---------- */
.toc{
  background:var(--white); border:1px solid var(--grid-line); border-radius:14px;
  padding:22px 24px; margin:34px 0 0;
}
.toc h2{
  font-family:'IBM Plex Mono', monospace; font-size:0.76rem !important; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--graphite); margin:0 !important; font-weight:500;
}
.toc ol{margin:14px 0 0; padding-left:20px;}
.toc li{margin-bottom:7px; font-size:0.95rem;}
.toc a{color:var(--ink-soft); text-decoration:none;}
.toc a:hover{color:var(--red); text-decoration:underline;}

/* ---------- MATH ---------- */
.math{
  font-family:'IBM Plex Mono', monospace; font-size:1.06rem; color:var(--ink);
  background:var(--white); border:1px solid var(--grid-line); border-left:3px solid var(--marker-dark);
  border-radius:10px; padding:18px 20px; margin:22px 0 0;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:3px;
  overflow-x:auto; text-align:center;
}
.math.left{justify-content:flex-start; text-align:left;}
.math sub, .math sup{font-size:0.68em; line-height:0;}
.math sup{margin-left:-1px;}
.frac{
  display:inline-flex; flex-direction:column; align-items:center;
  vertical-align:middle; margin:0 5px; font-size:0.94em; line-height:1.34;
}
.frac .num{padding:0 5px 3px; border-bottom:1.6px solid var(--ink);}
.frac .den{padding:3px 5px 0;}
.math-note{
  font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:var(--graphite);
  margin:8px 0 0; text-align:center;
}

.steps{counter-reset:step; list-style:none; padding-left:0; margin:22px 0 0;}
.steps > li{
  counter-increment:step; position:relative; padding-left:44px; margin-bottom:22px;
  color:var(--ink-soft);
}
.steps > li::before{
  content:counter(step); position:absolute; left:0; top:-1px;
  width:28px; height:28px; border-radius:50%;
  background:var(--ink); color:var(--marker);
  font-family:'IBM Plex Mono', monospace; font-size:0.82rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.steps > li strong{display:block; color:var(--ink); margin-bottom:4px;}

/* ---------- CALLOUTS ---------- */
.callout{
  background:var(--white); border:1px solid var(--grid-line); border-radius:14px;
  padding:20px 22px; margin:30px 0 0;
}
.callout.tip{border-left:3px solid var(--marker-dark);}
.callout.warn{border-left:3px solid var(--red);}
.callout p{margin:0; color:var(--ink-soft);}
.callout p + p{margin-top:10px;}
.callout .label{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--red);
  font-weight:600; margin-bottom:8px;
}
.callout.tip .label{color:var(--marker-dark);}

/* ---------- IN-ARTICLE CTA ---------- */
.cta-card{
  background:var(--ink); color:var(--paper); border-radius:18px;
  padding:32px 30px; margin:46px 0 0; text-align:center;
  position:relative; overflow:hidden;
}
.cta-card::before{
  content:""; position:absolute; inset:-30% -20% auto auto; width:60%; height:150%;
  background:radial-gradient(ellipse at center, rgba(215,232,107,0.16) 0%, rgba(215,232,107,0) 68%);
  pointer-events:none;
}
.cta-card > *{position:relative;}
.cta-card img{width:56px; height:56px; border-radius:14px; margin:0 auto 16px;}
.cta-card h2{color:var(--paper); font-size:1.3rem !important; margin:0 !important;}
.cta-card p{color:rgba(238,241,234,0.75); font-size:0.98rem; margin:12px auto 22px; max-width:44ch;}
.cta-btn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--marker); color:var(--ink); text-decoration:none;
  padding:13px 24px; border-radius:100px; font-weight:700; font-size:0.95rem;
  transition:transform .18s ease, background .18s ease;
}
.cta-btn svg{width:17px; height:17px;}
.cta-btn:hover{background:var(--white); transform:translateY(-2px);}

/* ---------- RELATED ---------- */
.related{margin:52px 0 0; padding-top:34px; border-top:1px solid var(--grid-line);}
.related h2{font-size:1.12rem !important; margin:0 !important;}
.related ul{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px;}
.related a{
  display:block; background:var(--white); border:1px solid var(--grid-line);
  border-radius:12px; padding:16px 18px; text-decoration:none; color:var(--ink);
  font-weight:600; font-size:0.98rem; transition:border-color .18s ease, transform .18s ease;
}
.related a:hover{border-color:var(--ink-soft); transform:translateX(3px);}
.related a small{display:block; font-weight:400; color:var(--graphite); font-size:0.85rem; margin-top:4px;}

/* ---------- BLOG INDEX ---------- */
.hub-head{padding:54px 0 0; max-width:680px;}
.hub-head h1{font-size:clamp(2.2rem, 5vw, 3.1rem); line-height:1.08; margin-top:14px;}
.hub-head p{font-size:1.14rem; color:var(--ink-soft); margin-top:18px;}
.post-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:20px; margin:44px 0 0; padding:0; list-style:none;
}
.post-card{
  background:var(--white); border:1px solid var(--grid-line); border-radius:16px;
  padding:26px 24px; display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.post-card:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(22,48,43,0.10); border-color:var(--ink-soft);}
.post-card .tag{
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--red); font-weight:500;
}
.post-card h2{font-size:1.2rem; margin:12px 0 0; line-height:1.3;}
.post-card h2 a{color:var(--ink); text-decoration:none;}
.post-card h2 a:hover{color:var(--red);}
.post-card p{color:var(--ink-soft); font-size:0.95rem; margin:12px 0 0; line-height:1.6;}
.post-card .meta{
  font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--graphite);
  margin-top:auto; padding-top:18px;
}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--grid-line); margin-top:70px; padding:44px 0 40px;}
.footer-row{
  max-width:1080px; margin:0 auto; padding:0 28px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;
}
.footer-links{display:flex; flex-wrap:wrap; gap:10px 24px; list-style:none; padding:0; margin:0; font-size:0.9rem;}
.footer-links a{color:var(--ink-soft); text-decoration:none;}
.footer-links a:hover{color:var(--ink);}
.footer-copy{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--graphite);}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px){
  .wrap, .wrap-wide, .nav-row, .footer-row{padding-left:20px; padding-right:20px;}
  .article-head h1{font-size:1.85rem;}
  .standfirst{font-size:1.04rem;}
  .math{font-size:0.92rem; padding:16px 14px;}
  .cta-card{padding:28px 20px;}
  .footer-row{flex-direction:column; text-align:center;}
  .nav-cta{padding:9px 14px; font-size:0.82rem;}
  .brand{font-size:1.08rem;}
}