/* Cognilode editorial system: article, index, diagrams, and technical prose. */
.blog-page{
  --article-max: 760px;
  --toc-width: 248px;
  --article-gap: 58px;
  --article-rail-shift: 153px;
  background:
    radial-gradient(1000px 560px at 72% -2%, rgba(101,214,255,.13), transparent 60%),
    radial-gradient(920px 520px at 8% 4%, rgba(122,162,255,.16), transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
.nav-menu a[aria-current="page"]{color:var(--text); background:rgba(122,162,255,.12); border:1px solid rgba(122,162,255,.2)}
.reading-progress{position:fixed; inset:0 0 auto; height:3px; z-index:100; pointer-events:none; background:transparent}
.reading-progress span{display:block; width:0; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); box-shadow:0 0 14px rgba(101,214,255,.55)}
.article-hero{padding:64px 0 42px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,rgba(255,255,255,.018),transparent)}
.article-hero-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:34px; align-items:start}
.article-hero-copy{max-width:900px}
.article-hero-copy h1{font-size:clamp(40px,5vw,66px); letter-spacing:-.035em; line-height:1.02; margin:14px 0 18px; max-width:850px}
.article-subtitle{font-size:clamp(19px,2.1vw,25px); line-height:1.48; color:var(--muted); margin:0; max-width:780px}
.article-kicker{font-size:12px; line-height:1.2; text-transform:uppercase; letter-spacing:.16em; color:var(--accent2); font-weight:800}
.breadcrumb{display:flex; gap:9px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:14px; margin-bottom:22px}
.breadcrumb a{color:var(--accent2); text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.article-meta,.blog-card-meta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:14px; margin-top:22px}
.article-service-bridge{max-width:720px; margin:22px 0 0; color:var(--muted); font-size:15px}
.article-hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:18px}
.topic-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.topic-row.compact{margin:14px 0 0}
.topic-chip{display:inline-flex; align-items:center; padding:6px 9px; border:1px solid rgba(122,162,255,.25); background:rgba(122,162,255,.08); color:#d8e4ff; border-radius:999px; font-size:12px; font-weight:700}
.article-hero-visual{width:100%; margin:0}
.article-shell{display:grid; grid-template-columns:var(--toc-width) minmax(0,var(--article-max)); justify-content:center; gap:var(--article-gap); align-items:start; padding-top:54px; padding-bottom:72px}
.article-toc{position:sticky; top:92px; align-self:start}
.toc-card{padding:18px; border:1px solid var(--border); background:rgba(15,25,48,.72); backdrop-filter:blur(14px); border-radius:16px; box-shadow:0 16px 42px rgba(0,0,0,.2); max-height:calc(100vh - 118px); overflow:auto}
.toc-title{font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent2); margin-bottom:10px}
.toc-card ol{list-style:none; padding:0; margin:0}
.toc-card li{margin:0}
.toc-card a{display:block; padding:7px 8px; border-radius:8px; text-decoration:none; color:var(--muted); font-size:13px; line-height:1.35; border-left:2px solid transparent}
.toc-card a:hover,.toc-card a.active{color:var(--text); background:rgba(122,162,255,.08); border-left-color:var(--accent)}
.toc-card li.toc-h3 a{padding-left:18px; font-size:12.5px}
.toc-cta{margin-top:12px; padding-top:12px!important; border-top:1px solid var(--border); color:var(--accent2)!important; font-weight:700}
.article-body{min-width:0; color:#d7e1fb; font-size:18px; line-height:1.78}
.article-body>p:first-child{font-size:21px; color:#eef3ff; line-height:1.68}
.article-body h2{font-size:clamp(29px,3.2vw,39px); line-height:1.16; letter-spacing:-.022em; color:var(--text); margin:76px 0 20px; scroll-margin-top:98px}
.article-body h3{font-size:24px; line-height:1.25; color:var(--text); margin:48px 0 14px; scroll-margin-top:98px}
.article-body h4{font-size:19px; color:var(--text); margin-top:34px}
.article-body p{margin:0 0 24px}
.article-body a{color:var(--accent2); text-underline-offset:3px}
.article-body strong{color:#f7f9ff}
.article-body img{display:block; width:auto; max-width:100%; height:auto; margin:32px auto}
.article-body ul,.article-body ol{padding-left:25px; margin:0 0 26px}
.article-body li{margin:8px 0; padding-left:3px}
.article-body blockquote{margin:34px 0; padding:24px 26px; border-left:4px solid var(--accent2); background:linear-gradient(90deg,rgba(101,214,255,.1),rgba(122,162,255,.035)); border-radius:0 16px 16px 0; color:#eff8ff; font-size:21px; line-height:1.6}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body table{display:table; width:100%; border-collapse:separate; border-spacing:0; margin:30px 0 36px; font-size:15px; line-height:1.5; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:rgba(15,25,48,.58)}
.article-body th,.article-body td{padding:13px 14px; vertical-align:top; border-bottom:1px solid var(--border); border-right:1px solid var(--border)}
.article-body th:last-child,.article-body td:last-child{border-right:0}
.article-body tr:last-child td{border-bottom:0}
.article-body th{text-align:left; color:var(--text); background:rgba(122,162,255,.1); font-weight:750}
.article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:.9em; color:#c9f5ff; background:rgba(101,214,255,.08); border:1px solid rgba(101,214,255,.12); border-radius:6px; padding:.12em .34em}
.article-body pre{overflow:auto; margin:28px 0; padding:20px; background:#070d19; border:1px solid rgba(122,162,255,.18); border-radius:14px; box-shadow:inset 0 1px rgba(255,255,255,.025)}
.article-body pre code{padding:0; border:0; background:transparent; color:#dbe8ff; font-size:14px; line-height:1.6}
.formula{overflow:auto; margin:30px 0; padding:22px 24px; text-align:center; border:1px solid rgba(122,162,255,.22); border-radius:14px; background:linear-gradient(135deg,rgba(122,162,255,.09),rgba(101,214,255,.04))}
.formula code{background:transparent; border:0; color:#f1f6ff; font-size:17px; white-space:normal; overflow-wrap:anywhere}
.article-diagram{max-width:100%; overflow:hidden; margin:42px 0 46px; padding:0; border:1px solid rgba(122,162,255,.23); background:linear-gradient(145deg,rgba(17,28,51,.94),rgba(10,18,35,.9)); border-radius:22px; box-shadow:0 24px 62px rgba(0,0,0,.28)}
.article-body>.article-diagram{width:min(980px,calc(100vw - 48px)); max-width:none; position:relative; left:50%; transform:translateX(calc(-50% - var(--article-rail-shift)))}
.diagram-toolbar{display:flex; align-items:center; gap:12px; min-height:49px; padding:9px 13px 9px 16px; border-bottom:1px solid rgba(122,162,255,.16); background:rgba(5,11,23,.66)}
.diagram-label{font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#dfe9ff}
.diagram-pan-hint{display:none; margin-left:auto; font-size:12px; color:var(--muted)}
.diagram-open{display:inline-flex; align-items:center; justify-content:center; min-height:32px; margin-left:auto; padding:5px 9px; border:1px solid rgba(101,214,255,.24); border-radius:9px; color:var(--accent2)!important; background:rgba(101,214,255,.07); font-size:13px; font-weight:750; text-decoration:none!important}
.diagram-open:hover{border-color:rgba(101,214,255,.5); background:rgba(101,214,255,.12)}
.diagram-viewport{max-width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scrollbar-gutter:stable; background:#091226}
.diagram-viewport:focus-visible{outline:2px solid var(--accent2); outline-offset:-3px}
.diagram-viewport>img,.diagram-viewport>picture{display:block; width:100%; max-width:none; height:auto; margin:0}
.diagram-viewport picture img{display:block; width:100%; max-width:none; height:auto; margin:0}
.article-diagram figcaption{padding:14px 18px 16px; border-top:1px solid rgba(122,162,255,.12); color:var(--muted); font-size:14px; line-height:1.55; text-align:center}
.article-hero-visual .diagram-viewport{background:#0d1730}
.article-hero-visual .diagram-viewport>img{border-radius:0}
.diagram-dialog{width:min(96vw,1440px); max-width:none; height:min(94vh,1000px); max-height:none; margin:auto; padding:0; overflow:hidden; border:1px solid rgba(122,162,255,.36); border-radius:20px; color:var(--text); background:#07101f; box-shadow:0 34px 120px rgba(0,0,0,.75)}
.diagram-dialog::backdrop{background:rgba(2,6,14,.86); backdrop-filter:blur(5px)}
.diagram-dialog[open]{display:block}
.diagram-dialog-shell{display:grid; grid-template-rows:auto minmax(0,1fr); width:100%; min-width:0; height:100%}
.diagram-dialog-toolbar{display:flex; align-items:center; justify-content:space-between; gap:20px; min-width:0; min-height:58px; padding:10px 14px 10px 18px; border-bottom:1px solid rgba(122,162,255,.2); background:#0d1830}
.diagram-dialog-toolbar strong{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.diagram-dialog-actions{display:flex; align-items:center; gap:10px; flex-shrink:0}
.diagram-dialog-actions a{color:var(--accent2); font-size:13px; font-weight:700}
.diagram-dialog-actions button{min-width:68px; min-height:38px; padding:8px 12px; border:1px solid rgba(255,255,255,.16); border-radius:10px; color:var(--text); background:rgba(255,255,255,.06); font:inherit; font-weight:700; cursor:pointer}
.diagram-dialog-viewport{min-width:0; max-width:100%; overflow:auto; overscroll-behavior:contain; background:#060d1a}
.diagram-dialog-viewport:focus-visible{outline:2px solid var(--accent2); outline-offset:-3px}
.diagram-dialog-viewport img{display:block; width:100%; min-width:1200px; max-width:none; height:auto; margin:0; background:#091226}
.article-cta{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; margin:76px 0 12px; padding:30px; border:1px solid rgba(101,214,255,.26); border-radius:20px; background:linear-gradient(135deg,rgba(101,214,255,.11),rgba(122,162,255,.09)); box-shadow:var(--shadow)}
.article-cta h2{margin:8px 0 10px; font-size:29px}
.article-cta p{font-size:16px; color:var(--muted); margin:0}
.related-posts{border-top:1px solid var(--border); background:rgba(255,255,255,.018)}
.section-heading-row{display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:24px}
.blog-index-hero{padding:68px 0 48px; border-bottom:1px solid var(--border)}
.blog-index-hero-grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:48px; align-items:center}
.blog-index-hero h1{font-size:clamp(42px,5.8vw,70px); line-height:1.01; letter-spacing:-.04em; margin:16px 0 18px}
.blog-index-hero-image{display:block; width:100%; border:1px solid rgba(122,162,255,.22); border-radius:24px; box-shadow:0 28px 80px rgba(0,0,0,.3)}
.featured-post{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); overflow:hidden; margin-top:14px; border:1px solid rgba(122,162,255,.2); border-radius:24px; background:linear-gradient(145deg,rgba(17,28,51,.96),rgba(12,21,40,.94)); box-shadow:0 28px 70px rgba(0,0,0,.24)}
.featured-post-visual{display:flex; min-height:360px; background:#0a1329}
.featured-post-visual img{width:100%; object-fit:cover}
.featured-post-copy{padding:34px 36px 36px}
.featured-post-copy h2{font-size:34px; line-height:1.12; letter-spacing:-.025em; margin:14px 0}
.featured-post-copy h2 a{text-decoration:none}
.featured-post-copy p{color:var(--muted)}
.featured-subtitle{font-size:19px!important; color:#e7eeff!important}
.featured-post-copy .btn{margin-top:24px}
.blog-card-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.blog-card{overflow:hidden; display:flex; flex-direction:column; min-width:0; border:1px solid var(--border); border-radius:20px; background:linear-gradient(155deg,rgba(17,28,51,.95),rgba(12,21,40,.92)); box-shadow:0 18px 46px rgba(0,0,0,.2); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.blog-card:hover{transform:translateY(-3px); border-color:rgba(122,162,255,.35); box-shadow:0 24px 58px rgba(0,0,0,.3)}
.blog-card-visual{display:block; aspect-ratio:16/9; overflow:hidden; background:#0a1329}
.blog-card-visual img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s ease}
.blog-card:hover .blog-card-visual img{transform:scale(1.018)}
.blog-card-body{padding:22px 24px 25px; display:flex; flex-direction:column; flex:1}
.blog-card-meta{justify-content:space-between; margin:0 0 12px; font-size:12.5px}
.blog-card h3{font-size:24px; line-height:1.2; margin:0 0 12px}
.blog-card h3 a{text-decoration:none}
.blog-card p{color:var(--muted); margin:0 0 12px}
.blog-card .text-link{margin-top:auto; padding-top:18px}
.newsletter-callout{display:flex; justify-content:space-between; align-items:center; gap:30px; padding:30px 32px; border:1px solid rgba(122,162,255,.22); border-radius:20px; background:linear-gradient(135deg,rgba(122,162,255,.11),rgba(101,214,255,.07))}
.newsletter-callout h2{margin:8px 0 8px}
.home-blog-section{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:linear-gradient(180deg,rgba(122,162,255,.035),rgba(101,214,255,.018))}
.home-blog-heading{display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:24px}
.home-blog-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.home-blog-card{display:grid; grid-template-columns:160px 1fr; min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:rgba(17,28,51,.78)}
.home-blog-card img{width:100%; height:100%; object-fit:cover; background:#0a1329}
.home-blog-card-copy{padding:20px}
.home-blog-card-copy h3{font-size:20px; line-height:1.25; margin:6px 0 9px}
.home-blog-card-copy h3 a{text-decoration:none}
.home-blog-card-copy p{font-size:14px; color:var(--muted); margin:0 0 12px}
@media (max-width:1050px){
  .article-hero-grid,.blog-index-hero-grid{grid-template-columns:1fr}
  .blog-index-hero-image{max-width:760px}
  .article-shell{grid-template-columns:minmax(0,var(--article-max)); gap:0}
  .article-toc{position:relative; top:auto; margin-bottom:28px}
  .toc-card ol{columns:2; column-gap:24px}
  .article-body>.article-diagram{width:min(920px,calc(100vw - 40px)); left:50%; transform:translateX(-50%)}
}
@media (max-width:820px){
  .featured-post{grid-template-columns:1fr}
  .featured-post-visual{min-height:0; aspect-ratio:16/9}
  .blog-card-grid,.home-blog-grid{grid-template-columns:1fr}
  .article-cta{grid-template-columns:1fr}
  .newsletter-callout,.section-heading-row,.home-blog-heading{align-items:flex-start; flex-direction:column}
  .diagram-pan-hint{display:inline}
  .diagram-viewport>img,.diagram-viewport>picture{width:900px; min-width:900px}
  .diagram-viewport picture img{width:100%; min-width:0}
}
@media (max-width:640px){
  .article-hero,.blog-index-hero{padding-top:42px}
  .article-hero-copy h1{font-size:40px}
  .article-subtitle{font-size:18px}
  .article-shell{padding-top:30px}
  .article-body{font-size:16.5px; line-height:1.72}
  .article-body>p:first-child{font-size:18px}
  .article-body h2{margin-top:58px; font-size:30px}
  .article-body h3{font-size:22px}
  .article-body table{display:block; overflow-x:auto}
  .article-body pre code{white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word}
  .toc-card ol{columns:1}
  .home-blog-card{grid-template-columns:1fr}
  .home-blog-card img{aspect-ratio:16/9}
  .diagram-toolbar{gap:8px; padding-left:12px}
  .diagram-label{font-size:10.5px; letter-spacing:.07em}
  .diagram-open{font-size:12px}
  .diagram-dialog{width:100vw; height:100dvh; max-height:100dvh; border:0; border-radius:0}
  .diagram-dialog-toolbar{align-items:flex-start; padding:10px 10px 10px 14px}
  .diagram-dialog-toolbar strong{padding-top:8px; font-size:13px}
  .diagram-dialog-actions a{display:none}
}
@media (prefers-reduced-motion:reduce){.blog-card,.blog-card-visual img,.btn{transition:none!important; transform:none!important}}