/* =====================================================================
   article.css — Blog article page. Requires common.css first.
   Layout columns come from Bootstrap; this carries the visuals.
   NOTE: the source's `.art-rail-auth .row` was renamed to `.art-auth-row`
   so it can't collide with Bootstrap's grid `.row`.
   ===================================================================== */

/* ---- READING PROGRESS BAR ---- */
.art-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1200;background:linear-gradient(90deg,var(--blue),var(--blue-2));transition:width .1s linear;}

/* ---- SHELL ---- */
.art-shell{padding:0 0 1rem;}
.art-rail{position:sticky;top:88px;display:flex;flex-direction:column;gap:1.2rem;}

/* ---- HEAD ---- */
.art-head{padding:54px 0 0;}
.art-bc{font-size:.82rem;color:var(--soft);margin:0 0 1.3rem;}
.art-bc a{color:var(--muted);text-decoration:none;}
.art-bc a:hover{color:var(--blue);}
.art-tag{display:inline-block;font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--blue);background:#eff4ff;padding:.4rem .9rem;border-radius:100px;margin-bottom:1.3rem;}
.art-h1{font-family:var(--font-display);font-size:2.6rem;font-weight:800;letter-spacing:-1.4px;line-height:1.12;color:var(--ink);margin:0;}
.art-meta{display:flex;align-items:center;gap:.8rem;margin-top:1.7rem;flex-wrap:wrap;}
.art-av{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--blue),var(--navy));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:.9rem;color:#fff;}
.art-byline .nm{font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--ink);margin:0;}
.art-byline .sub{font-size:.8rem;color:var(--muted);margin:0;}
.art-share{display:flex;gap:.45rem;margin-left:.4rem;}
.art-sc{width:34px;height:34px;border-radius:9px;background:#eff4ff;color:var(--blue);display:flex;align-items:center;justify-content:center;transition:all .18s;}
.art-sc:hover{background:var(--blue);color:#fff;}
.art-sc svg{width:15px;height:15px;}

/* ---- COVER ---- */
.art-cover{position:relative;aspect-ratio:21/9;border-radius:22px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin:2.6rem 0 0;margin-bottom: 20px;}
.art-cover::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 82% 18%,rgba(255,255,255,.2),transparent 42%);}
.art-cover-logo{position:absolute;top:1rem;left:1rem;z-index:2;background:rgba(255,255,255,.95);border-radius:8px;padding:.3rem .55rem;font-family:var(--font-display);font-weight:800;font-size:.74rem;color:var(--navy);margin:0;}
.art-cover-logo span{color:var(--blue);}
.art-cover-text{position:relative;z-index:1;font-family:var(--font-display);font-weight:800;font-size:2rem;letter-spacing:.5px;color:#fff;text-transform:uppercase;text-shadow:0 2px 16px rgba(0,0,0,.2);margin:0;}

/* ---- PROSE ---- */
.art-prose{padding-bottom:1rem;}
.art-prose p{font-size:1.07rem;line-height:1.85;color:var(--text);margin:0 0 1.4rem;}
.art-prose > p:first-of-type{font-size:1.18rem;line-height:1.7;color:#1e293b;}
.art-prose h2{font-family:var(--font-display);font-size:1.7rem;font-weight:800;letter-spacing:-.6px;color:var(--ink);margin:2.8rem 0 1rem;scroll-margin-top:90px;}
.art-prose h3{font-family:var(--font-display);font-size:1.28rem;font-weight:700;letter-spacing:-.3px;color:var(--ink);margin:2rem 0 .7rem;}
.art-prose ul,.art-prose ol{margin:0 0 1.4rem 1.3rem;padding:0;}
.art-prose li{font-size:1.05rem;line-height:1.8;color:var(--text);margin-bottom:.55rem;padding-left:.3rem;}
.art-prose a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.art-prose strong{color:var(--ink);font-weight:700;}

.art-quote{border-left:3px solid var(--blue);padding:.3rem 0 .3rem 1.5rem;margin:2rem 0;font-family:var(--font-display);font-size:1.45rem;font-weight:700;letter-spacing:-.4px;color:var(--ink);line-height:1.4;}

.art-callout{background:linear-gradient(180deg,#f4f8ff,#fff);border:1px solid #bfdbfe;border-radius:16px;padding:1.8rem 2rem;margin:2.4rem 0;}
.art-callout h4{font-family:var(--font-display);font-size:1.05rem;font-weight:800;color:var(--blue);margin:0 0 .9rem;display:flex;align-items:center;gap:.5rem;}
.art-callout h4 svg{width:18px;height:18px;}
.art-callout ul{margin:0 0 0 1.2rem;padding:0;}
.art-callout li{font-size:1rem;line-height:1.7;color:var(--text);margin-bottom:.5rem;}

.art-fig{margin:2.4rem 0;}
.art-fig-img{aspect-ratio:16/8;border-radius:16px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:#fff;text-transform:uppercase;letter-spacing:.5px;}
.art-fig figcaption{text-align:center;font-size:.84rem;color:var(--soft);margin-top:.8rem;}

.art-rule{height:1px;background:var(--line);margin:2.6rem 0;}
.art-tags{display:flex;flex-wrap:wrap;gap:.5rem;}
.art-tags span{font-size:.82rem;font-weight:600;color:var(--muted);background:var(--tint);border:1px solid var(--line);padding:.35rem .85rem;border-radius:100px;}

/* ---- RAIL: TOC ---- */
.art-toc{background:var(--tint);border:1px solid var(--line);border-radius:16px;padding:1.4rem 1.6rem;}
.art-toc h4{font-family:var(--font-display);font-size:.74rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--soft);margin:0 0 .9rem;}
.art-toc ol{list-style:none;counter-reset:toc;margin:0;padding:0;}
.art-toc li{counter-increment:toc;margin-bottom:.55rem;}
.art-toc li:last-child{margin-bottom:0;}
.art-toc a{display:flex;gap:.7rem;font-size:.95rem;color:var(--text);font-weight:500;text-decoration:none;transition:color .15s;}
.art-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-display);font-weight:800;color:var(--blue);}
.art-toc a:hover{color:var(--blue);}

/* ---- RAIL: NEWSLETTER ---- */
.art-rail-news{background:linear-gradient(135deg,var(--blue),var(--navy));border-radius:16px;padding:1.4rem 1.5rem;color:#fff;position:relative;overflow:hidden;}
.art-rail-news::after{content:"";position:absolute;top:-40%;right:-10%;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(147,197,253,.5),transparent 62%);filter:blur(30px);}
.art-rail-news h4{position:relative;z-index:1;font-family:var(--font-display);font-size:1.05rem;font-weight:800;margin:0 0 .4rem;}
.art-rail-news p{position:relative;z-index:1;font-size:.84rem;color:rgba(255,255,255,.85);line-height:1.5;margin:0 0 .9rem;}
.art-rail-news input{position:relative;z-index:1;width:100%;border:none;outline:none;border-radius:100px;padding:.62rem 1rem;font-family:var(--font-body);font-size:.86rem;color:var(--ink);margin-bottom:.5rem;}
.art-rail-news button{position:relative;z-index:1;width:100%;background:#fff;color:var(--deep);border:none;border-radius:100px;padding:.62rem;font-family:var(--font-display);font-weight:700;font-size:.86rem;cursor:pointer;transition:transform .18s;}
.art-rail-news button:hover{transform:translateY(-1px);}

/* ---- RAIL: AUTHOR ---- */
.art-rail-auth{background:var(--tint);border:1px solid var(--line);border-radius:16px;padding:1.4rem 1.5rem;}
.art-rail-auth h4{font-family:var(--font-display);font-size:.7rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--soft);margin:0 0 .9rem;}
.art-auth-row{display:flex;gap:.8rem;align-items:center;margin-bottom:.8rem;}
.art-rail-auth .a{width:46px;height:46px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--blue),var(--navy));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;color:#fff;}
.art-rail-auth .nm{font-family:var(--font-display);font-weight:700;font-size:.95rem;margin:0;}
.art-rail-auth .rl{font-size:.78rem;color:var(--blue);font-weight:600;margin:0;}
.art-rail-auth p{font-size:.85rem;color:var(--muted);line-height:1.55;margin:0;}

/* ---- RELATED ---- */
.art-relsec{padding:70px 0;background:var(--tint);}
.art-relhead{font-family:var(--font-display);font-size:1.7rem;font-weight:800;letter-spacing:-.6px;margin:0 0 1.8rem;text-align:center;}
.art-rel{height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s;}
.art-rel:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(15,23,42,.1);border-color:transparent;}
.art-rel-cover{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:#fff;text-transform:uppercase;letter-spacing:.5px;}
.art-rel-body{padding:1.2rem 1.3rem 1.4rem;}
.art-rel-tag{font-size:.7rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--blue);margin:0;}
.art-rel-title{font-family:var(--font-display);font-size:1.05rem;font-weight:700;line-height:1.35;color:var(--ink);margin:.45rem 0 .7rem;transition:color .2s;}
.art-rel:hover .art-rel-title{color:var(--blue);}
.art-rel-meta{font-size:.8rem;color:var(--muted);margin:0;}

/* ---- COVER GRADIENTS ---- */
.bg-a{background:linear-gradient(135deg,var(--blue),var(--navy));}
.bg-b{background:linear-gradient(135deg,#0ea5e9,var(--blue));}
.bg-c{background:linear-gradient(135deg,var(--blue-2),#1e40af);}
.bg-d{background:linear-gradient(135deg,var(--navy),var(--deep));}
.bg-e{background:linear-gradient(135deg,#2563eb,var(--navy));}

/* ---- RESPONSIVE ---- */
@media (max-width:991.98px){
  .art-rail{position:static;margin-top:2rem;}
  .art-h1{font-size:2rem;}
}
@media (max-width:767.98px){
  .art-h1{font-size:1.9rem;letter-spacing:-.8px;}
  .art-prose h2{font-size:1.4rem;}
  .art-cover-text{font-size:1.5rem;}
  .art-callout{padding:1.4rem 1.3rem;}
}