/* =========================================================
   DigiForge — Article (single) page styles
   ========================================================= */

/* reading progress */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:90;
  background:var(--ember-grad);box-shadow:0 0 12px var(--ember-glow);transition:width .1s linear;}

/* article hero */
.art-hero{position:relative;overflow:hidden;padding-top:calc(var(--header-h) + clamp(36px,5vw,60px));padding-bottom:clamp(10px,2vw,18px);}
.art-hero .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.art-hero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto;text-align:center;}
.art-hero .breadcrumb{justify-content:center;text-align:center;}
.art-cat{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember);}
.art-hero h1{font-size:clamp(32px,5vw,58px);margin-top:16px;letter-spacing:-0.03em;}
.art-hero .lead{color:var(--text-dim);font-size:clamp(16px,2vw,20px);max-width:640px;margin:20px auto 0;line-height:1.55;}
.art-meta{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:30px;
  font-family:var(--f-mono);font-size:13px;color:var(--text-faint);letter-spacing:.02em;}
.art-meta .who{display:flex;align-items:center;gap:10px;}
.art-meta .ava{width:34px;height:34px;border-radius:50%;background:var(--ember-grad);display:grid;place-items:center;font-family:var(--f-display);font-weight:600;font-size:13px;color:#0A0D14;flex:none;}
.art-meta .who b{color:var(--text);font-family:var(--f-display);font-weight:500;font-size:14px;}
.art-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--text-faint);opacity:.6;}
.art-meta .rt{display:inline-flex;align-items:center;gap:6px;}
.art-meta .rt svg{width:14px;height:14px;}

/* cover */
.art-cover{position:relative;z-index:2;width:100%;max-width:1200px;margin:clamp(28px,4vw,44px) auto 0;overflow:hidden;border-radius:18px;background:linear-gradient(155deg,#161C28,#0C1019);}
.art-cover img{position:relative;z-index:0;display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;}
.art-cover image-slot{width:100%!important;height:auto!important;aspect-ratio:16/8;display:block;}
.art-cover image-slot,.prose figure image-slot,.kb-card image-slot{background:
  radial-gradient(80% 100% at 10% 10%,rgba(255,106,61,.18),transparent 58%),
  linear-gradient(155deg,#161C28,#0C1019);}
.art-cover image-slot::part(frame){border-radius:18px;background:linear-gradient(155deg,#161C28,#0C1019);}
.art-cover image-slot::part(empty){color:var(--text-faint);}
.art-cover .cover-grid{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:18px;overflow:hidden;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:40px 40px;-webkit-mask-image:radial-gradient(70% 70% at 28% 18%,#000,transparent 75%);mask-image:radial-gradient(70% 70% at 28% 18%,#000,transparent 75%);opacity:.4;}

/* body layout: prose + sticky share rail */
.art-layout{display:grid;grid-template-columns:64px minmax(0,920px);gap:clamp(20px,3vw,40px);max-width:1200px;margin:0 auto;align-items:start;justify-content:center;}
.art-share{position:sticky;top:104px;display:flex;flex-direction:column;gap:10px;}
.art-share .lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:4px;writing-mode:horizontal-tb;}
.art-share a,.art-share button{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--ink-1);border:1px solid var(--line);color:var(--text-dim);cursor:pointer;transition:transform .3s var(--ease),color .3s,border-color .3s,background .3s;}
.art-share a:hover,.art-share button:hover{transform:translateY(-3px);color:var(--ember);border-color:rgba(255,106,61,0.4);background:var(--ink-2);}
.art-share svg{width:17px;height:17px;}

/* prose */
.prose{width:100%;max-width:920px;}
.prose > *{scroll-margin-top:96px;}
.prose p{color:var(--text-dim);font-size:clamp(16px,1.8vw,18px);line-height:1.78;margin-top:22px;}
.prose p:first-child{margin-top:0;}
.prose p:first-of-type::first-letter{font-family:var(--f-display);font-weight:700;font-size:3.4em;line-height:.82;float:left;margin:6px 14px 0 0;color:var(--ember);}
.prose h2{font-size:clamp(23px,2.8vw,30px);margin-top:46px;letter-spacing:-0.025em;}
.prose h3{font-size:clamp(19px,2.2vw,22px);margin-top:34px;letter-spacing:-0.02em;}
.prose ul,.prose ol{margin-top:20px;padding-left:0;list-style:none;display:grid;gap:12px;}
.prose ul li{position:relative;padding-left:26px;color:var(--text-dim);font-size:16.5px;line-height:1.6;}
.prose ul li::before{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:2px;background:var(--ember);}
.prose ol{counter-reset:n;}
.prose ol li{position:relative;padding-left:38px;color:var(--text-dim);font-size:16.5px;line-height:1.6;counter-increment:n;}
.prose ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:1px;font-family:var(--f-mono);font-size:13px;color:var(--ember);}
.prose strong{color:var(--text);font-weight:600;}
.prose a.inline{color:var(--ember);text-decoration:underline;text-underline-offset:2px;}
.prose blockquote{margin:34px 0 0;padding:6px 0 6px 26px;border-left:3px solid var(--ember);}
.prose blockquote p{color:var(--text);font-family:var(--f-display);font-weight:500;font-size:clamp(20px,2.5vw,26px);line-height:1.4;letter-spacing:-0.02em;margin:0;}
.prose pre{margin-top:26px;background:linear-gradient(180deg,var(--ink-2),var(--ink-1));border:1px solid var(--line-2);border-radius:14px;padding:20px 22px;overflow-x:auto;}
.prose pre code{font-family:var(--f-mono);font-size:14px;line-height:1.8;color:var(--text);white-space:pre;}
.prose pre .c-key{color:#FF9A5E;}.prose pre .c-fn{color:#7FB7FF;}.prose pre .c-str{color:#8BE0A8;}.prose pre .c-dim{color:var(--text-faint);}
.prose .callout{margin-top:28px;display:flex;gap:14px;background:var(--ember-soft);border:1px solid rgba(255,106,61,0.24);border-radius:14px;padding:18px 20px;}
.prose .callout .ci{flex:none;color:var(--ember);}.prose .callout .ci svg{width:22px;height:22px;}
.prose .callout p{margin:0;color:var(--text);font-size:15.5px;line-height:1.6;}
.prose figure{margin:30px 0 0;}
.prose figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:14px;background:linear-gradient(155deg,#161C28,#0C1019);}
.prose figure image-slot{width:100%!important;height:auto!important;aspect-ratio:16/9;display:block;}
.prose figure image-slot::part(frame){border-radius:14px;background:linear-gradient(155deg,#161C28,#0C1019);}
.prose figure image-slot::part(empty){color:var(--text-faint);}
.prose figcaption{font-family:var(--f-mono);font-size:12px;color:var(--text-faint);text-align:center;margin-top:11px;letter-spacing:.02em;}

/* tags + author footer */
.art-foot{max-width:1024px;margin:clamp(40px,6vw,60px) auto 0;}
.art-tags{display:flex;flex-wrap:wrap;gap:9px;}
.art-tags .tag{font-family:var(--f-mono);font-size:12px;color:var(--text-dim);background:rgba(255,255,255,0.04);border:1px solid var(--line);padding:7px 12px;border-radius:8px;transition:color .25s,border-color .25s;}
.art-tags .tag:hover{color:var(--ember);border-color:rgba(255,106,61,0.35);}
.author-card{display:flex;gap:18px;align-items:center;margin-top:30px;padding:24px;background:var(--ink-1);border:1px solid var(--line);border-radius:var(--radius);}
.author-card .ava{width:56px;height:56px;border-radius:50%;background:var(--ember-grad);display:grid;place-items:center;font-family:var(--f-display);font-weight:600;font-size:20px;color:#0A0D14;flex:none;}
.author-card h4{font-size:17px;letter-spacing:-0.01em;}
.author-card p{color:var(--text-dim);font-size:14px;margin-top:5px;line-height:1.5;}

/* cited sources */
.art-sources{max-width:1024px;margin:clamp(30px,5vw,48px) auto 0;padding:clamp(22px,3vw,30px);background:linear-gradient(155deg,var(--ink-1),rgba(16,21,31,.82));border:1px solid var(--line);border-radius:var(--radius);}
.art-sources h2{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;}
.art-sources ul{display:grid;gap:10px;margin-top:18px;padding:0;list-style:none;}
.art-sources li{position:relative;padding-left:20px;color:var(--text-dim);font-size:14px;line-height:1.55;}
.art-sources li::before{content:"";position:absolute;left:1px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ember);}
.art-sources a{color:var(--text-dim);text-decoration:none;transition:color .25s;}
.art-sources a:hover{color:var(--ember);}

/* related */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
/* related cards (kb-card styles, since this page doesn't load kb-page.css) */
image-slot::part(frame){background:linear-gradient(155deg,#161C28,#0C1019);}
image-slot::part(empty){color:var(--text-faint);}
.kb-card{position:relative;display:flex;flex-direction:column;background:var(--ink-1);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .45s var(--ease),border-color .4s;}
.kb-card:hover{transform:translateY(-6px);border-color:var(--line-2);}
.kb-card .card-media{position:relative;aspect-ratio:16/10;border-bottom:1px solid var(--line);}
.kb-card image-slot{position:absolute;inset:0;width:100%!important;height:100%!important;}
.kb-card image-slot::part(frame){border-radius:0;}
.kb-card .cat-pill{position:absolute;top:13px;left:13px;z-index:4;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);background:rgba(8,11,18,0.62);backdrop-filter:blur(6px);border:1px solid var(--line-2);padding:6px 10px;border-radius:7px;}
.kb-card .card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.kb-card h3{font-size:19px;letter-spacing:-0.02em;line-height:1.2;}
.kb-card .kb-meta{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:12px;color:var(--text-faint);letter-spacing:.02em;}
.kb-card .kb-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--text-faint);opacity:.6;}
.kb-card .kb-meta .rt{display:inline-flex;align-items:center;gap:6px;}
.kb-card .kb-meta .rt svg{width:13px;height:13px;}

@media (max-width:760px){
  .art-hero .breadcrumb{justify-content:flex-start;text-align:left;flex-wrap:nowrap;white-space:nowrap;}
  .art-hero .breadcrumb .sep:last-of-type,
  .art-hero .breadcrumb .here{display:none;}
  .art-layout{grid-template-columns:1fr;}
  .art-cover,.art-cover img,.prose figure img{border-radius:12px;}
  .art-share{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:8px;}
  .art-share .lbl{display:none;}
}