/* ============================================================
   Exordiom GCC — Blog styles (index + articles)
   Brand: bg #0B0B10 · ink #F4F1EA · violet #6E63F6
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #0B0B10; color: #F4F1EA;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
::selection { background: rgba(110,99,246,0.35); }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: #0B0B10; }
::-webkit-scrollbar-thumb { background: #6E63F6; }

@keyframes nav-in { from { opacity:0; transform:translate(-50%,-20px); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes dash-in { from { opacity:0; } to { opacity:1; } }

/* ─── NAV (shared pill) ─── */
.nav-pill { position:relative; display:flex; align-items:center; height:52px; background:#000; border:1px solid rgba(255,255,255,0.11); border-radius:999px; box-shadow:0 12px 36px rgba(0,0,0,0.42),0 2px 8px rgba(0,0,0,0.22); overflow:hidden; transition:max-width 460ms cubic-bezier(0.16,1,0.3,1),background 200ms ease; max-width:880px; white-space:nowrap; }
.nav-pill--collapsed { max-width:52px; cursor:pointer; }
.nav-pill--collapsed:hover { background:#0B0B10; border-color:rgba(255,255,255,0.28); }
.nav-link-pill { font-size:13px; font-weight:500; color:rgba(244,241,234,0.55); padding:9px 12px; border-radius:999px; white-space:nowrap; transition:color 200ms,background 200ms; letter-spacing:0.02em; }
.nav-link-pill:hover { color:#F4F1EA; background:rgba(255,255,255,0.06); }
.nav-link-pill.is-active { color:#F4F1EA; background:rgba(255,255,255,0.05); }
#nav-brand, #nav-links, #nav-cta-wrap { transition:opacity 260ms ease, transform 320ms ease; }
.nav-pill--collapsed #nav-brand { opacity:0; transform:translateX(-20px); pointer-events:none; }
.nav-pill--collapsed #nav-links, .nav-pill--collapsed #nav-cta-wrap { opacity:0; pointer-events:none; }
#nav-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; transform:scale(0.78); transition:opacity 0.22s ease,transform 0.24s ease; }
.nav-pill--collapsed #nav-icon { opacity:1; transform:scale(1); transition:opacity 0.28s ease 0.18s,transform 0.32s cubic-bezier(0.16,1,0.3,1) 0.18s; }
.nav-cta { display:inline-flex; align-items:center; gap:8px; background:#6E63F6; color:#fff; font-size:11px; font-weight:500; letter-spacing:0.10em; text-transform:uppercase; padding:11px 18px; border-radius:999px; white-space:nowrap; transition:background 0.2s; }
.nav-cta:hover { background:#8B82F8; }

.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:#6E63F6; }
.eyebrow::before { content:''; display:block; width:22px; height:1px; background:#6E63F6; }

/* ─── BLOG INDEX ─── */
.page-wrap { max-width:1180px; margin:0 auto; padding:160px 48px 80px; }
.index-head { max-width:760px; margin-bottom:64px; }
.index-head h1 { font-size:clamp(40px,5.4vw,72px); font-weight:600; letter-spacing:-0.03em; line-height:1.02; margin:28px 0 22px; }
.index-head p { font-size:17px; line-height:1.7; color:rgba(244,241,234,0.55); max-width:560px; }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(244,241,234,0.08); border:1px solid rgba(244,241,234,0.08); border-radius:3px; overflow:hidden; }
.post-card { display:flex; flex-direction:column; gap:16px; padding:38px 34px 40px; background:#0B0B10; transition:background 0.3s, transform 0.3s; min-height:300px; }
.post-card:hover { background:#13131b; }
.post-card .cat { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:#6E63F6; }
.post-card h2 { font-size:21px; font-weight:600; letter-spacing:-0.018em; line-height:1.24; color:#F4F1EA; }
/* purple dash under each card title — width set inline per reading length */
.card-dash { height:3px; border-radius:3px; background:linear-gradient(90deg,#8B82F8,#6E63F6); box-shadow:0 0 12px rgba(110,99,246,0.45); transition:width 0.5s cubic-bezier(0.16,1,0.3,1); }
.post-card p { font-size:14px; line-height:1.7; color:rgba(244,241,234,0.46); flex:1; }
.post-card .meta { font-size:12px; color:rgba(244,241,234,0.34); letter-spacing:0.02em; }
.post-card .arrow { color:#6E63F6; font-size:13px; display:inline-flex; align-items:center; gap:6px; }

/* ─── ARTICLE ─── */
.article-shell { max-width:720px; margin:0 auto; padding:150px 28px 40px; position:relative; }
.breadcrumbs { font-size:12px; color:rgba(244,241,234,0.34); margin-bottom:34px; letter-spacing:0.02em; }
.breadcrumbs a:hover { color:rgba(244,241,234,0.7); }
.article-head .eyebrow { margin-bottom:22px; }
.article-head h1 { font-size:clamp(32px,4.6vw,52px); font-weight:600; letter-spacing:-0.028em; line-height:1.08; color:#F4F1EA; }
/* in-flow resting marker for the title dash (the fixed dash overlays this at scroll=0) */
#dashAnchor { height:4px; margin-top:24px; margin-bottom:24px; }
/* the live dash — fixed, positioned by blog.js */
#titleDash {
  position:fixed; left:0; top:0; height:4px; width:0;
  border-radius:4px; background:linear-gradient(90deg,#8B82F8,#6E63F6);
  box-shadow:0 0 16px rgba(110,99,246,0.6);
  transform-origin:center center; transform:translate(-50%,-50%) rotate(0deg);
  z-index:120; pointer-events:none; opacity:0;
  will-change:left,top,width,transform,opacity;
  transition:left 0.42s cubic-bezier(0.22,1,0.36,1), top 0.42s cubic-bezier(0.22,1,0.36,1), transform 0.42s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease;
}
.article-meta { font-size:13px; color:rgba(244,241,234,0.4); letter-spacing:0.02em; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.article-meta .dot { width:3px; height:3px; border-radius:50%; background:rgba(110,99,246,0.5); }
.article-lede { font-size:19px; line-height:1.66; color:rgba(244,241,234,0.74); margin:40px 0 12px; font-weight:400; }

.article-body { font-size:16.5px; line-height:1.82; color:rgba(244,241,234,0.78); }
.article-body h2 { font-size:clamp(24px,3vw,30px); font-weight:600; letter-spacing:-0.02em; line-height:1.2; color:#F4F1EA; margin:52px 0 18px; }
.article-body h3 { font-size:20px; font-weight:600; letter-spacing:-0.01em; color:#F4F1EA; margin:36px 0 14px; }
.article-body p { margin:0 0 22px; }
.article-body a { color:#A89DFF; border-bottom:1px solid rgba(168,157,255,0.3); transition:border-color 0.2s, color 0.2s; }
.article-body a:hover { color:#C8C2FF; border-color:rgba(168,157,255,0.7); }
.article-body strong { color:#F4F1EA; font-weight:600; }
.article-body ul, .article-body ol { margin:0 0 24px; padding-left:24px; }
.article-body li { margin-bottom:10px; }
.article-body li::marker { color:#6E63F6; }
.article-body blockquote { margin:34px 0; padding:22px 28px; border-left:3px solid #6E63F6; background:#13131b; border-radius:0 4px 4px 0; font-size:18px; font-style:italic; line-height:1.6; color:rgba(244,241,234,0.82); }
.article-body blockquote p:last-child { margin-bottom:0; }
.article-body figure { margin:32px 0; }
.article-body figcaption { font-size:12px; color:rgba(244,241,234,0.4); margin-top:10px; text-align:center; }
.article-body table { width:100%; border-collapse:collapse; margin:28px 0; font-size:14px; }
.article-body th, .article-body td { text-align:left; padding:12px 14px; border-bottom:1px solid rgba(244,241,234,0.1); vertical-align:top; }
.article-body th { color:#F4F1EA; font-weight:600; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:rgba(244,241,234,0.6); }
.article-body td { color:rgba(244,241,234,0.7); }
.key-takeaways { margin:36px 0; padding:26px 30px; background:#13131b; border:1px solid rgba(244,241,234,0.08); border-radius:4px; }
.key-takeaways h2 { font-size:12px !important; letter-spacing:0.12em; text-transform:uppercase; color:#6E63F6 !important; margin:0 0 16px !important; }
.key-takeaways ul { margin:0; }

.faq { margin:48px 0 0; }
.faq h2 { font-size:clamp(24px,3vw,30px); }
.faq-item { border-top:1px solid rgba(244,241,234,0.1); padding:24px 0; }
.faq-item h3 { margin:0 0 10px; font-size:18px; }
.faq-item p { margin:0; color:rgba(244,241,234,0.6); }

.article-cta { margin:64px 0 0; padding:44px 40px; background:linear-gradient(135deg,#13131b,#0e0e16); border:1px solid rgba(110,99,246,0.22); border-radius:6px; text-align:center; }
.article-cta h2 { font-size:clamp(24px,3vw,32px); font-weight:600; letter-spacing:-0.02em; color:#F4F1EA; margin:0 0 14px; }
.article-cta p { font-size:15px; color:rgba(244,241,234,0.5); max-width:440px; margin:0 auto 26px; line-height:1.65; }
.btn-primary { display:inline-flex; align-items:center; gap:8px; padding:14px 30px; background:#6E63F6; color:#fff; font-size:14px; font-weight:500; border-radius:2px; transition:background 0.2s, transform 0.15s; }
.btn-primary:hover { background:#8B82F8; transform:translateY(-1px); }

.related { margin:72px 0 0; }
.related h2 { font-size:14px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(244,241,234,0.5); margin-bottom:22px; }
.related-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.related-list a { display:block; padding:22px 24px; background:#0e0e16; border:1px solid rgba(244,241,234,0.08); border-radius:4px; font-size:15px; font-weight:500; color:rgba(244,241,234,0.82); line-height:1.4; transition:background 0.25s, border-color 0.25s; }
.related-list a:hover { background:#13131b; border-color:rgba(110,99,246,0.4); }

/* ─── FOOTER ─── */
.site-footer { padding:36px 48px; border-top:1px solid rgba(244,241,234,0.07); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:80px; }
.site-footer img { height:20px; opacity:0.5; }
.site-footer p { font-size:12px; color:rgba(244,241,234,0.26); }
.site-footer .links { display:flex; gap:24px; }
.site-footer .links a { font-size:12px; color:rgba(244,241,234,0.26); transition:color 0.2s; }
.site-footer .links a:hover { color:rgba(244,241,234,0.6); }

@media (max-width: 980px) {
  .post-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px) {
  .page-wrap { padding:128px 22px 64px; }
  .post-grid { grid-template-columns:1fr; }
  .article-shell { padding:120px 22px 30px; }
  .related-list { grid-template-columns:1fr; }
  #site-nav { top:16px !important; }
  #nav-links { display:none !important; }
  /* On small screens, keep the dash as a top progress bar rather than a side rail */
  #titleDash { z-index:120; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  #titleDash { position:absolute; transform:none !important; opacity:1 !important; }
}