/* ══ BLOG READER MODAL + DIAGRAMS ══════════════════════════════════════════ */
.reader{position:fixed; inset:0; z-index:1300; display:flex; justify-content:center; align-items:flex-start; padding:0;}
.reader[hidden]{display:none;}
.reader-backdrop{position:absolute; inset:0; background:rgba(6,12,26,.62); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); animation:rdFade .28s ease;}
.reader-dialog{position:relative; z-index:1; width:min(880px,100vw); max-height:100vh; height:100vh; overflow-y:auto; background:#fff; box-shadow:0 40px 120px rgba(6,12,26,.5); animation:rdIn .4s cubic-bezier(.2,.8,.2,1); scroll-behavior:smooth;}
@media (min-width:920px){ .reader{padding:34px;} .reader-dialog{height:auto; max-height:92vh; border-radius:22px;} }
@keyframes rdFade{from{opacity:0;}to{opacity:1;}}
@keyframes rdIn{from{opacity:0; transform:translateY(26px);}to{opacity:1; transform:none;}}

/* reading progress bar */
.reader-progress{position:sticky; top:0; inset-inline-start:0; height:3px; z-index:20; background:var(--blue); width:0%; transition:width .1s linear;}

.reader-x{position:fixed; top:18px; inset-inline-end:18px; z-index:30; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--ink); cursor:pointer; box-shadow:0 8px 24px rgba(10,21,45,.18); transition:background .2s, transform .2s;}
.reader-x svg{width:19px; height:19px;}
.reader-x:hover{background:var(--ink); color:#fff; transform:rotate(90deg);}
@media (min-width:920px){ .reader-x{position:absolute;} }

/* hero */
.art-hero{position:relative; height:340px; background:#0B1220; overflow:hidden;}
.art-hero img{width:100%; height:100%; object-fit:cover;}
.art-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,18,32,.15) 0%,rgba(11,18,32,0) 40%,rgba(11,18,32,.86) 100%);}
.art-hero-cap{position:absolute; inset-inline-start:0; inset-inline-end:0; bottom:0; z-index:2; padding:38px 46px;}
.art-hero-meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-family:'DM Sans',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.82);}
.art-hero-meta .cat{color:#fff; font-weight:700; background:var(--blue); padding:5px 11px; border-radius:999px; letter-spacing:.06em;}
.art-hero-meta .dot{width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.5);}
.art-hero-h1{font-family:'DM Sans',sans-serif; color:#fff; font-size:clamp(26px,3.4vw,40px); font-weight:800; line-height:1.1; letter-spacing:-.025em; margin-top:16px; max-width:22ch; text-shadow:0 2px 30px rgba(0,0,0,.4);}

/* byline */
.art-byline{display:flex; align-items:center; gap:13px; padding:24px 46px; border-bottom:1px solid var(--line);}
.art-avatar{width:42px; height:42px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:15px; font-family:'DM Sans',sans-serif;}
.art-byline .who{font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.3;}
.art-byline .role{font-size:12.5px; color:var(--muted);}
.art-share{margin-inline-start:auto; display:flex; gap:8px;}
.art-share button{width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color .2s, border-color .2s;}
.art-share svg{width:16px; height:16px;}
.art-share button:hover{color:var(--blue); border-color:var(--blue);}

/* body prose */
.art-body{padding:40px 46px 64px; max-width:none;}
.art-body > *{max-width:none;}
.art-lede{font-size:20px; line-height:1.6; color:var(--ink); font-weight:500; margin-bottom:28px; letter-spacing:-.01em;}
.art-body h2{font-family:'DM Sans',sans-serif; font-size:25px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.2; margin:40px 0 14px;}
.art-body h3{font-family:'DM Sans',sans-serif; font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin:30px 0 10px;}
.art-body p{font-size:16.5px; line-height:1.72; color:#33415A; margin-bottom:18px;}
.art-body strong{color:var(--ink); font-weight:700;}
.art-body ul{margin:0 0 20px 0; padding-inline-start:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
.art-body ul li{position:relative; padding-inline-start:26px; font-size:16px; line-height:1.6; color:#33415A;}
.art-body ul li::before{content:""; position:absolute; inset-inline-start:4px; top:.62em; width:7px; height:7px; border-radius:2px; background:var(--blue); transform:rotate(45deg);}
.art-body blockquote{margin:28px 0; padding:4px 0 4px 24px; border-inline-start:3px solid var(--blue); font-family:'DM Sans',sans-serif; font-size:21px; font-weight:600; line-height:1.4; letter-spacing:-.015em; color:var(--ink);}
.art-body blockquote cite{display:block; margin-top:10px; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600; font-style:normal; color:var(--muted);}
.art-body a{color:var(--blue); text-decoration:underline; text-underline-offset:2px;}

/* ── DIAGRAM PRIMITIVES ─────────────────────────────────────────────────── */
.dia{margin:30px 0; padding:26px 26px 22px; background:var(--soft); border:1px solid var(--line); border-radius:16px;}
.dia-title{font-family:'DM Sans',monospace; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:18px;}
.dia-cap{margin-top:16px; font-size:13px; color:var(--muted); line-height:1.5; font-style:italic;}

/* bars */
.dia-bars{display:flex; flex-direction:column; gap:14px;}
.bar{display:grid; grid-template-columns:130px 1fr 52px; align-items:center; gap:14px;}
.bar-l{font-size:13.5px; font-weight:600; color:var(--ink); text-align:end;}
.bar-track{height:14px; border-radius:999px; background:#E4EAF4; overflow:hidden;}
.bar-fill{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#5B8CFF,#2F6BFF); transform-origin:left; animation:barGrow .9s cubic-bezier(.4,0,.1,1) both;}
.bar-fill.alt{background:linear-gradient(90deg,#94A3B8,#64748B);}
.bar-v{font-family:'DM Sans',monospace; font-size:13px; font-weight:700; color:var(--ink);}
@keyframes barGrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* horizontal flow */
.dia-flow{display:flex; gap:0; flex-wrap:wrap;}
.flow-step{flex:1; min-width:120px; position:relative; padding:0 18px;}
.flow-step:not(:last-child)::after{content:"→"; position:absolute; inset-inline-end:-7px; top:2px; color:var(--blue); font-size:18px; font-weight:700;}
.flow-n{font-family:'DM Sans',monospace; font-size:12px; font-weight:700; color:var(--blue);}
.flow-t{display:block; font-size:14.5px; font-weight:700; color:var(--ink); margin-top:6px; line-height:1.25;}
.flow-d{display:block; font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.45;}

/* compare two-column */
.dia-compare{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.cmp{padding:20px; border-radius:14px; background:#fff; border:1px solid var(--line);}
.cmp.cmp-b{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset;}
.cmp h4{font-family:'DM Sans',sans-serif; font-size:15px; font-weight:800; color:var(--ink); margin-bottom:12px; display:flex; align-items:center; gap:8px;}
.cmp.cmp-a h4::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--muted-2);}
.cmp.cmp-b h4::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--blue);}
.cmp ul{margin:0; display:flex; flex-direction:column; gap:8px;}
.cmp ul li{padding-inline-start:22px; font-size:13.5px; line-height:1.5; color:#33415A;}
.cmp ul li::before{top:.55em; width:6px; height:6px;}

/* stat row */
.dia-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.dia-stats.four{grid-template-columns:repeat(4,1fr);}
.ds{padding:18px 16px; background:#fff; border:1px solid var(--line); border-radius:14px; text-align:center;}
.ds b{display:block; font-family:'DM Sans',sans-serif; font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--blue); line-height:1;}
.ds span{display:block; font-size:11.5px; font-weight:600; letter-spacing:.03em; color:var(--muted); margin-top:8px; text-transform:uppercase;}

/* donut */
.dia-donut{width:150px; height:150px; margin:0 auto; border-radius:50%; background:conic-gradient(var(--blue) calc(var(--pct)*1%), #E4EAF4 0); display:flex; align-items:center; justify-content:center; position:relative;}
.dia-donut::after{content:""; position:absolute; inset:18px; background:var(--soft); border-radius:50%;}
.donut-c{position:relative; z-index:1; text-align:center;}
.donut-c b{display:block; font-family:'DM Sans',sans-serif; font-size:30px; font-weight:800; color:var(--ink); line-height:1;}
.donut-c span{display:block; font-size:11px; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:.05em;}

/* timeline */
.dia-timeline{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0;}
.dia-timeline li{position:relative; padding:0 0 20px 30px; border-inline-start:2px solid var(--line);}
.dia-timeline li:last-child{border-inline-start-color:transparent; padding-bottom:0;}
.dia-timeline li::before{content:""; position:absolute; inset-inline-start:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 3px var(--soft);}
.dia-timeline b{display:block; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:800; color:var(--ink);}
.dia-timeline span{display:block; font-size:13.5px; color:var(--muted); line-height:1.5; margin-top:3px;}

/* article footer / tags */
.art-tags{display:flex; gap:8px; flex-wrap:wrap; padding:0 46px 30px;}
.art-tag{font-family:'DM Sans',monospace; font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--muted); background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:7px 14px;}
.art-cta{margin:0 46px 52px; padding:30px 32px; border-radius:18px; background:radial-gradient(120% 140% at 100% 0%,#1E3A8A,#0A152D); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.art-cta h4{font-family:'DM Sans',sans-serif; font-size:22px; font-weight:800; letter-spacing:-.02em; color:#fff;}
.art-cta p{font-size:14.5px; color:rgba(255,255,255,.72); margin-top:6px; max-width:44ch;}
.art-cta a{flex-shrink:0; display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:700; color:var(--ink); background:#fff; border-radius:999px; padding:14px 26px; text-decoration:none; transition:transform .18s;}
.art-cta a:hover{transform:translateY(-2px);}

/* clickable cards */
.post-card[data-article], .featured-card[data-article]{cursor:pointer;}
.post-card[data-article]:focus-visible, .featured-card[data-article]:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}

@media (max-width:620px){
  .art-hero{height:250px;}
  .art-hero-cap, .art-byline, .art-body, .art-tags{padding-inline-start:24px; padding-inline-end:24px;}
  .art-cta{margin-inline-start:24px; margin-inline-end:24px;}
  .dia-compare, .dia-stats, .dia-stats.four{grid-template-columns:1fr;}
  .bar{grid-template-columns:96px 1fr 44px; gap:10px;}
  .flow-step{flex:1 1 100%; padding:10px 0;}
  .flow-step:not(:last-child)::after{content:"↓"; inset-inline-end:auto; inset-inline-start:0; top:auto; bottom:-4px;}
}