/* Shared stylesheet for the GetSATMath blog — reuses the design tokens from
   the main app (public/index.html) so blog pages feel like the same product,
   not a bolted-on CMS. */
:root{
  --paper:#F1F4F2;
  --paper-raised:#FFFFFF;
  --line:#D8DEDC;
  --ink:#16233A;
  --ink-soft:#5A6B80;
  --blue:#2C4A7C;
  --blue-tint:#E7EDF6;
  --green:#2F7D5D;
  --green-tint:#E4F3EC;
  --red:#B23A3A;
  --red-tint:#F8E9E9;
  --radius:10px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:28px 28px;
  background-attachment:local;
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  line-height:1.6;
}
a{ color:var(--blue); }
a:focus-visible, button:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }

.blog-shell{ max-width:760px; margin:0 auto; padding:28px 20px 90px; }

/* ---------- Top bar ---------- */
.blog-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; gap:14px; flex-wrap:wrap; }
.blog-topbar__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.blog-topbar__brand img{ width:28px; height:28px; border-radius:7px; display:block; flex:0 0 auto; }
.blog-topbar__brand span{ font-family:var(--font-display); font-weight:700; font-size:16px; }
.blog-topbar__nav{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; font-family:var(--font-mono); font-size:12.5px; }
.blog-topbar__nav a{ color:var(--blue); text-decoration:underline; }
.blog-topbar__cta{ font-weight:600; background:var(--green); color:#fff !important; text-decoration:none !important; padding:7px 12px; border-radius:7px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; margin:0 0 14px; }
.breadcrumb a{ color:var(--ink-soft); text-decoration:underline; }

/* ---------- Article header ---------- */
.eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin:0 0 8px; }
h1.article-title{ font-family:var(--font-display); font-size:30px; font-weight:700; margin:0 0 10px; letter-spacing:-.01em; line-height:1.25; }
.article-meta{ color:var(--ink-soft); font-size:13px; font-family:var(--font-mono); margin:0 0 26px; }

/* ---------- Article body ---------- */
.article-body{ font-size:16px; }
.article-body p.lede{ font-size:17.5px; color:var(--ink-soft); margin:0 0 22px; line-height:1.6; }
.article-body h2{ font-family:var(--font-display); font-size:22px; font-weight:700; margin:34px 0 12px; letter-spacing:-.005em; }
.article-body h3{ font-family:var(--font-display); font-size:17px; font-weight:600; margin:22px 0 8px; }
.article-body p{ margin:0 0 16px; }
.article-body ul, .article-body ol{ margin:0 0 18px; padding-left:22px; }
.article-body li{ margin-bottom:8px; }
.article-body strong{ color:var(--ink); }
.article-body table{ border-collapse:collapse; width:100%; margin:8px 0 20px; font-size:14px; }
.article-body th, .article-body td{ border:1px solid var(--line); padding:8px 10px; text-align:left; }
.article-body th{ background:var(--paper-raised); font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); }
.article-body code{ font-family:var(--font-mono); background:var(--paper-raised); border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:.92em; }

.callout{ background:var(--blue-tint); border:1.5px solid var(--blue); border-radius:var(--radius); padding:16px 18px; margin:0 0 22px; font-size:14.5px; }
.callout p:last-child{ margin-bottom:0; }
.callout strong{ color:var(--blue); }

/* ---------- CTA block ---------- */
.blog-cta{ background:var(--paper-raised); border:1.5px solid var(--ink); border-radius:var(--radius); padding:22px 22px 20px; margin:38px 0; }
.blog-cta p{ margin:0 0 14px; font-size:15px; }
.blog-cta a.btn{ display:inline-block; font-family:var(--font-body); font-weight:600; font-size:14px; border-radius:8px; padding:11px 20px; background:var(--ink); color:#fff !important; text-decoration:none !important; }

/* ---------- Related / footer nav ---------- */
.related-posts{ margin:34px 0 10px; padding-top:22px; border-top:1px solid var(--line); }
.related-posts h2{ font-family:var(--font-display); font-size:17px; margin:0 0 12px; }
.related-posts ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.related-posts a{ font-size:14.5px; text-decoration:underline; }

.blog-footer{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-soft); font-family:var(--font-mono); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.blog-footer a{ color:var(--ink-soft); }

/* ---------- Blog index / hub page ---------- */
.hub-intro{ font-size:16px; color:var(--ink-soft); max-width:62ch; margin:0 0 30px; line-height:1.6; }
.hub-category{ margin-bottom:34px; }
.hub-category h2{ font-family:var(--font-display); font-size:19px; margin:0 0 4px; }
.hub-category p.hub-category__desc{ color:var(--ink-soft); font-size:13.5px; margin:0 0 14px; }
.hub-list{ display:flex; flex-direction:column; gap:10px; }
.hub-card{ display:block; background:var(--paper-raised); border:1px solid var(--line); border-radius:8px; padding:13px 16px; text-decoration:none; color:var(--ink); }
.hub-card:hover{ border-color:var(--blue); }
.hub-card__title{ font-weight:600; font-size:14.5px; display:block; margin-bottom:3px; }
.hub-card__desc{ font-size:12.5px; color:var(--ink-soft); display:block; }

@media (max-width:600px){
  h1.article-title{ font-size:25px; }
  .blog-shell{ padding:22px 16px 70px; }
}