/* Blog and long-form guides
   Shares the homepage's calm workbench language while preserving reading comfort. */
.blog {
  --blog-canvas:#f3f6f8;
  --blog-surface:#ffffff;
  --blog-surface-soft:#f7fafc;
  --blog-ink:#162b3a;
  --blog-muted:#5b6f7d;
  --blog-faint:#83909a;
  --blog-accent:#2563eb;
  --blog-accent-hover:#1d4ed8;
  --blog-accent-soft:#eef5ff;
  --blog-rule:#dce4ea;
  --blog-rule-strong:#c7d3dc;
  --blog-shadow:0 1px 2px rgba(27,52,70,.04),0 12px 34px rgba(27,52,70,.05);
  --blog-font-ui:"Segoe UI Variable Text","Segoe UI Variable","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --blog-font-display:"Segoe UI Variable Display","Segoe UI Variable","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --blog-font-mono:"Cascadia Mono",SFMono-Regular,"Roboto Mono",Consolas,monospace;
  margin:0;
  color:var(--blog-ink);
  background:var(--blog-canvas);
  font-family:var(--blog-font-ui);
  font-size:15px;
  line-height:1.65;
}

.blog .container{max-width:1370px;padding-inline:32px}
.blog a{color:#1558b0}
.blog a:hover{color:var(--blog-accent-hover);text-decoration:none}
.blog button:focus-visible,.blog a:focus-visible,.blog input:focus-visible,.blog select:focus-visible{outline:3px solid #9fc2ff;outline-offset:3px}
.blog .site-header{position:relative;border-bottom:1px solid var(--blog-rule);background:rgba(255,255,255,.92);box-shadow:0 1px 10px rgba(26,52,70,.035);backdrop-filter:saturate(140%) blur(12px)}
.blog .header-inner{min-height:66px;gap:28px}
.blog .logo{display:inline-flex;align-items:center;gap:11px;color:#172d3f;font-size:19px;font-weight:760;letter-spacing:-.55px}
.blog .brand-mark{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border:1px solid #b9cad5;border-radius:9px;background:#f8fbfd}
.blog .brand-mark svg{width:23px;height:23px}
.blog .nav{align-items:center;gap:30px}
.blog .nav a{position:relative;padding:22px 0 19px;color:#3d5262;font-size:13px;font-weight:650}
.blog .nav a:hover,.blog .nav a:focus-visible{color:var(--blog-accent);text-decoration:none}
.blog .nav a:last-child:after,.blog .nav a:hover:after,.blog .nav a:focus-visible:after{content:"";position:absolute;right:0;bottom:0;left:0;height:2px;background:var(--blog-accent)}

.blog main{min-height:calc(100vh - 300px)}
.blog .breadcrumb{margin:28px 0 0;color:#71808b;font-size:12px}
.blog .breadcrumb a{color:#50697b}
.blog .eyebrow{padding:5px 9px;border:1px solid #d9e6f5;border-radius:6px;background:var(--blog-accent-soft);color:#245a9b;font:700 10.5px/1.25 var(--blog-font-mono);letter-spacing:.08em;text-transform:uppercase}

/* Editorial index */
.blog-index .hero{max-width:820px;padding:44px 0 32px;text-align:left}
.blog-index .hero h1{margin:14px 0 11px;color:#142d40;font-family:var(--blog-font-display);font-size:clamp(38px,4.4vw,52px);font-weight:740;letter-spacing:-2px;line-height:1.08;text-wrap:balance}
.blog-index .hero p{max-width:720px;margin:0;color:#506674;font-size:15px;line-height:1.65;text-wrap:pretty}
.blog-index .card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;border-top:1px solid var(--blog-rule-strong)}
.blog-index .blog-card{display:flex;min-height:200px;flex-direction:column;align-items:flex-start;padding:24px 3px 22px;border:0;border-bottom:1px solid var(--blog-rule);border-radius:0;background:transparent;transition:background-color .18s ease}
.blog-index .blog-card:hover{background:rgba(255,255,255,.38)}
.blog-index .blog-card h2{max-width:500px;margin:11px 0 8px!important;color:#19364a;font-family:var(--blog-font-display);font-size:19px!important;font-weight:700;letter-spacing:-.35px;line-height:1.38}
.blog-index .blog-card h2 a{color:inherit}
.blog-index .blog-card h2 a:hover{color:var(--blog-accent)}
.blog-index .blog-card p{max-width:540px;margin:0 0 15px;color:var(--blog-muted);font-size:14px;line-height:1.65}
.blog-index .blog-card>a:last-child{display:inline-flex;align-items:center;gap:5px;margin-top:auto;color:#245b94;font-size:13px;font-weight:700}
.blog-index .article-cta{display:flex;align-items:center;justify-content:space-between;margin:36px 0 60px;padding:21px 24px;border:1px solid var(--blog-rule-strong);border-radius:10px;background:var(--blog-surface)}
.blog-index .article-cta a{color:#234e6d;font-size:14px}

/* Article header and reading surface */
.blog-article .article-head{max-width:930px;padding:36px 0 30px}
.blog-article .article-head h1{max-width:900px;margin:15px 0 13px;color:#142d40;font-family:var(--blog-font-display);font-size:clamp(36px,4.3vw,52px);font-weight:740;letter-spacing:-1.9px;line-height:1.08;text-wrap:balance}
.blog-article .article-head>p{max-width:780px;margin:0 0 18px;color:#506674;font-size:16px;line-height:1.68;text-wrap:pretty}
.blog .blog-meta{color:#74838e;font-size:12px}
.blog .blog-meta a{font-weight:650}
.blog .article-layout{display:grid;grid-template-columns:minmax(0,800px) minmax(230px,280px);align-items:start;gap:32px}
.blog .article-body{min-width:0;padding:34px 36px;border:1px solid var(--blog-rule-strong);border-radius:12px;background:var(--blog-surface);box-shadow:var(--blog-shadow)}
.blog .prose{max-width:none}
.blog .article-body section{margin-bottom:34px}
.blog .article-body h2{margin:40px 0 12px;color:#1b3446;font-family:var(--blog-font-display);font-size:26px;font-weight:700;letter-spacing:-.55px;line-height:1.24;text-wrap:balance}
.blog .article-body h3{margin:25px 0 9px;color:#274052;font-family:var(--blog-font-display);font-size:19px;line-height:1.35}
.blog .article-body p,.blog .article-body li{color:#425866;font-size:15px;line-height:1.8}
.blog .article-body p{max-width:72ch}
.blog .article-body strong{color:#1c3546}
.blog .article-body a{text-decoration:underline;text-decoration-color:#9ab6cd;text-underline-offset:3px}
.blog .article-body a:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}
.blog .scroll-x:focus-visible,.blog .diagram-card:focus-visible{outline:3px solid #9fc2ff;outline-offset:3px}

.blog .answer-box{margin:10px 0 28px;padding:18px 20px;border:1px solid #cbddeb;border-left:3px solid #3b82c4;border-radius:8px;background:#f0f7fc}
.blog .answer-box>strong{margin-bottom:6px;color:#214f70;font-size:13px}
.blog .answer-box p{color:#284c63}
.blog .lead-answer{padding-left:16px;border-left:3px solid #4b85b5;color:#2c526b!important;font-size:18px}
.blog .diagram-card{margin:26px 0;border:1px solid var(--blog-rule);border-radius:9px;background:#f8fbfd}
.blog .diagram-card svg{max-height:310px}
.blog .diagram-card figcaption{padding:10px 15px 15px;color:#657985;font-size:12px}
.blog .math-work,.blog .formula-display{border:1px solid var(--blog-rule);border-radius:8px;background:#f6f9fb;color:#214e70;font-family:var(--blog-font-mono)}
.blog .math-work{padding:15px 18px}
.blog .math-work p{font-family:var(--blog-font-mono);font-size:14px}
.blog .formula-display{padding:18px;font-size:clamp(17px,2.4vw,24px)}
.blog .compare-row{gap:12px}
.blog .compare-row>div{padding:17px;border:1px solid #d9e4ec;border-radius:8px;background:#f5f9fc}
.blog .check-panel{padding:16px 18px;border-left:3px solid #648aa7;border-radius:6px;background:#f6f8fa}
.blog .data-table{border:1px solid var(--blog-rule);border-radius:8px;background:#fff}
.blog .data-table th,.blog .data-table td{border-color:#e2e8ec}
.blog .data-table th{background:#edf3f6;color:#294657}
.blog .editorial-note{border-color:#e1e7eb;border-radius:7px;background:#f8fafb;color:#667783}
.blog .article-end-nav{border-color:var(--blog-rule)}
.blog .article-cta{border:1px solid #d2e1ec;border-radius:8px;background:#f1f7fb}

.blog .sidebar{position:sticky;top:24px;padding:22px;border:1px solid var(--blog-rule-strong);border-radius:10px;background:rgba(255,255,255,.8);box-shadow:0 8px 28px rgba(27,52,70,.04);backdrop-filter:blur(8px)}
.blog .sidebar h2{margin:0 0 18px;color:#1b3446;font-family:var(--blog-font-display);font-size:19px;line-height:1.3}
.blog .sidebar p,.blog .sidebar li,.blog .sidebar>a{font-size:14px;line-height:1.65}
.blog .sidebar .big-formula{color:#205f91!important;font-family:Georgia,serif;font-size:23px!important}
.blog .sidebar .minor-label{color:#71808b;font:700 10px/1.4 var(--blog-font-mono);letter-spacing:.08em}
.blog .sidebar hr{border-color:var(--blog-rule)}

.blog .footer{margin-top:64px;padding:42px 0;background:#1c3040;color:#d4e0e8}
.blog .footer strong{color:#fff;font-size:17px}
.blog .footer p,.blog .footer small{color:#adc0cc}
.blog .footer a{color:#d8e3e9;font-size:13px}

@media(max-width:900px){
  .blog .article-layout{grid-template-columns:1fr}
  .blog .sidebar{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
  .blog .sidebar h2,.blog .sidebar hr{grid-column:1/-1}
}

@media(max-width:700px){
  .blog .container{padding-inline:16px}
  .blog .header-inner{min-height:60px}
  .blog .logo{gap:8px;font-size:17px}
  .blog .brand-mark{width:31px;height:31px}
  .blog .nav{gap:15px}
  .blog .nav a{padding:20px 0 17px;font-size:12px}
  .blog .nav a:nth-child(2),.blog .nav a:nth-child(3){display:none}
  .blog .breadcrumb{margin-top:20px;line-height:1.5}
  .blog-index .hero{padding:34px 0 24px}
  .blog-index .hero h1{font-size:35px;letter-spacing:-1.4px}
  .blog-index .hero p{font-size:14px}
  .blog-index .card-grid{grid-template-columns:1fr;gap:0}
  .blog-index .blog-card{min-height:0;padding:22px 2px}
  .blog-index .blog-card h2{font-size:18px!important}
  .blog-index .article-cta{margin:28px 0 42px;padding:18px}
  .blog-article .article-head{padding:27px 0 24px}
  .blog-article .article-head h1{font-size:35px;letter-spacing:-1.4px}
  .blog-article .article-head>p{font-size:15px}
  .blog .article-body{padding:24px 20px;border-radius:8px;box-shadow:none}
  .blog .article-body h2{margin-top:34px;font-size:23px}
  .blog .article-body h3{font-size:18px}
  .blog .article-body p,.blog .article-body li{font-size:14px}
  .blog .answer-box{padding:16px}
  .blog .diagram-card{overflow-x:auto}
  .blog .diagram-card svg{width:480px;max-width:none}
  .blog .formula-display{padding:15px}
  .blog .sidebar{display:block}
  .blog .footer{margin-top:42px}
}

@media(max-width:360px){
  .blog .nav{gap:12px}
  .blog .logo{font-size:16px}
  .blog .brand-mark{width:29px;height:29px}
  .blog-article .article-head h1,.blog-index .hero h1{font-size:33px}
  .blog .article-body{padding-inline:16px}
}

@media(prefers-reduced-motion:reduce){
  .blog-index .blog-card{transition:none}
}