/* =========================================================
   強視科技 BESTVISION — 技術專欄 文章頁
   (loads AFTER styles.css — reuses tokens, nav, footer, buttons)
   ========================================================= */
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 var(--gut)}

/* reading progress bar */
.read-bar{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--bv-sky),var(--bv-blue));transition:width .1s linear}

/* ---- article nav (always light) ---- */
.article-nav{position:fixed}
.art-nav-links{display:flex;align-items:center;gap:8px;margin-left:auto}
.art-nav-links a{font-size:14px;font-weight:600;color:var(--bv-navy);letter-spacing:.02em;white-space:nowrap;
  padding:8px 14px;border-radius:999px;transition:color .22s ease,background .22s ease}
.art-nav-links a:hover{color:var(--bv-blue);background:rgba(15,129,202,.10)}
.art-nav-links a.art-cta{background:var(--bv-blue);color:#fff}
.art-nav-links a.art-cta:hover{background:#1690dd;color:#fff}

/* ---- hero ---- */
.art{background:var(--bv-paper);min-height:100vh}
.art-hero{padding:calc(var(--nav-h) + clamp(34px,6vw,72px)) 0 clamp(22px,3vw,30px);position:relative;overflow:hidden}
.art-hero::before{content:"";position:absolute;inset:0;z-index:0;opacity:.6;
  background-image:linear-gradient(rgba(15,129,202,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,129,202,.05) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(700px 400px at 20% 0%,#000,transparent 80%);
          mask-image:radial-gradient(700px 400px at 20% 0%,#000,transparent 80%)}
.art-hero .wrap-narrow{position:relative;z-index:2}
.art-back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--bv-blue);
  margin-bottom:22px;transition:gap .25s;white-space:nowrap}
.art-back:hover{gap:11px}
.art-cat{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--bv-ink);background:var(--bv-orange);
  padding:6px 15px;border-radius:999px;margin-bottom:18px;white-space:nowrap}
.art-hero h1{font-family:var(--font-zh);font-weight:900;font-size:clamp(30px,4.4vw,50px);line-height:1.24;
  letter-spacing:.01em;color:var(--bv-ink);text-wrap:balance}
.art-dek{font-size:clamp(16px,1.5vw,19px);color:var(--bv-slate);margin-top:20px;line-height:1.75;max-width:60ch;text-wrap:pretty}
.art-byline{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:26px;font-size:13.5px;color:var(--bv-slate);font-weight:600}
.art-byline > span,.art-byline > b{white-space:nowrap}
.art-byline .dot{width:4px;height:4px;border-radius:50%;background:var(--bv-line)}
.art-byline b{color:var(--bv-navy);font-weight:700}

/* ---- cover ---- */
.art-cover{margin:clamp(8px,2vw,18px) auto clamp(30px,4vw,46px)}
.art-cover img{width:100%;aspect-ratio:16/8;object-fit:cover;object-position:center;
  border:1px solid var(--bv-line);box-shadow:0 40px 70px -42px rgba(2,61,99,.55)}
.art-cover figcaption{font-size:12.5px;color:var(--bv-slate);margin-top:11px;text-align:center;letter-spacing:.01em}

/* ---- body typography ---- */
.art-body{padding-bottom:clamp(40px,6vw,70px)}
.art-body > *{max-width:100%}
.art-body p{font-size:17.5px;line-height:1.92;color:#27414f;margin-top:22px;text-wrap:pretty}
.art-body p:first-child{margin-top:0}
.art-body p b,.art-body li b{color:var(--bv-navy);font-weight:700}
.art-body h2{font-family:var(--font-zh);font-weight:900;font-size:clamp(23px,2.6vw,30px);color:var(--bv-ink);
  line-height:1.34;margin-top:clamp(42px,5vw,58px);padding-top:6px;letter-spacing:.01em;display:flex;align-items:baseline;gap:14px}
.art-body h2::before{content:"";width:9px;height:24px;background:var(--bv-sky);flex:none;transform:translateY(3px)}
.art-body h3{font-family:var(--font-zh);font-weight:800;font-size:clamp(18px,2vw,21px);color:var(--bv-navy);margin-top:34px;line-height:1.5}
.art-body ul,.art-body ol{margin-top:20px;padding-left:2px;display:flex;flex-direction:column;gap:13px;list-style:none}
.art-body li{font-size:17px;line-height:1.78;color:#27414f;display:flex;gap:13px;align-items:flex-start;text-wrap:pretty}
.art-body ul li::before{content:"";width:8px;height:8px;background:var(--bv-sky);margin-top:10px;flex:none;transform:rotate(45deg)}
.art-body ol{counter-reset:n}
.art-body ol li{counter-increment:n}
.art-body ol li::before{content:counter(n);font-family:var(--font-cond);font-weight:700;font-size:15px;color:#fff;
  background:var(--bv-blue);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex:none;margin-top:2px}
.art-body a:not(.btn){color:var(--bv-blue);font-weight:600;border-bottom:1px solid rgba(15,129,202,.35)}
.art-body a:not(.btn):hover{border-bottom-color:var(--bv-blue)}

/* lead paragraph */
.art-body .lead{font-size:19.5px;line-height:1.85;color:var(--bv-navy);font-weight:500}

/* pull quote */
.art-body blockquote{margin:clamp(34px,4vw,46px) 0;padding:6px 0 6px 30px;border-left:5px solid var(--bv-sky);
  font-family:var(--font-zh);font-weight:700;font-size:clamp(20px,2.4vw,26px);line-height:1.5;color:var(--bv-navy);letter-spacing:.01em}
.art-body blockquote cite{display:block;font-size:14px;font-weight:600;color:var(--bv-slate);font-style:normal;margin-top:14px}

/* callout box */
.callout{margin:clamp(30px,4vw,42px) 0;background:#fff;border:1px solid var(--bv-line);border-left:6px solid var(--bv-teal);
  padding:24px 28px;box-shadow:0 24px 44px -34px rgba(2,61,99,.5)}
.callout .ct-lab{font-family:var(--font-latin);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bv-teal);margin-bottom:9px}
.callout p{margin-top:8px;font-size:16px;line-height:1.8}
.callout p:first-of-type{margin-top:0}
.callout.blue{border-left-color:var(--bv-blue)}.callout.blue .ct-lab{color:var(--bv-blue)}
.callout.orange{border-left-color:var(--bv-orange)}.callout.orange .ct-lab{color:var(--bv-orange)}

/* comparison table */
.art-table{margin:clamp(30px,4vw,42px) 0;border:1px solid var(--bv-line);overflow:hidden;background:#fff;
  box-shadow:0 24px 44px -34px rgba(2,61,99,.5)}
.art-table table{width:100%;border-collapse:collapse;font-size:15.5px}
.art-table th,.art-table td{padding:15px 18px;text-align:left;vertical-align:top;line-height:1.6;border-bottom:1px solid var(--bv-tint-2)}
.art-table thead th{background:var(--bv-ink);color:#fff;font-weight:700;font-size:14.5px;letter-spacing:.02em}
.art-table thead th:first-child{background:var(--bv-navy)}
.art-table tbody th{font-weight:700;color:var(--bv-navy);background:var(--bv-tint-2);white-space:nowrap;width:128px}
.art-table tbody tr:last-child th,.art-table tbody tr:last-child td{border-bottom:0}
.art-table td b{color:var(--bv-blue)}

/* stat strip */
.art-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:clamp(30px,4vw,42px) 0;background:var(--bv-line)}
.art-stats .s{background:#fff;padding:24px 22px}
.art-stats .v{font-family:var(--font-cond);font-weight:700;font-size:40px;line-height:1;color:var(--bv-blue)}
.art-stats .v .u{font-size:.5em;color:var(--bv-slate)}
.art-stats .k{font-size:13.5px;color:var(--bv-slate);margin-top:9px;line-height:1.5}

/* ---- CTA band ---- */
.art-cta-band{background:linear-gradient(160deg,#04202F,#021019);color:#fff;padding:clamp(48px,6vw,72px) 0;position:relative;overflow:hidden}
.art-cta-band .net{position:absolute;right:-40px;bottom:-30px;width:420px;opacity:.14;z-index:0}
.art-cta-band .wrap-narrow{position:relative;z-index:2;text-align:center}
.art-cta-band h2{font-family:var(--font-zh);font-weight:900;font-size:clamp(24px,3vw,36px);color:#fff;line-height:1.3}
.art-cta-band p{font-size:16px;color:#bcd9ec;margin-top:16px;max-width:48ch;margin-left:auto;margin-right:auto;line-height:1.75}
.art-cta-band .btn{margin-top:30px}

/* ---- related ---- */
.art-related{padding:clamp(48px,6vw,76px) var(--gut)}
.art-related .rel-head{font-family:var(--font-latin);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bv-blue);margin-bottom:24px;display:flex;align-items:center;gap:12px}
.art-related .rel-head::before{content:"";width:9px;height:22px;background:var(--bv-sky)}
.rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.rel-card{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--bv-line);padding:16px;
  transition:transform .3s,box-shadow .3s,border-color .3s}
.rel-card:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(2,61,99,.5);border-color:var(--bv-sky)}
.rel-card img{width:108px;height:84px;object-fit:cover;flex:none;background:var(--bv-tint-2)}
.rel-card .rc-cat{font-size:12px;font-weight:700;color:var(--bv-blue);letter-spacing:.03em}
.rel-card h4{font-size:16px;font-weight:800;color:var(--bv-ink);margin-top:7px;line-height:1.5}
.rel-card:hover h4{color:var(--bv-blue)}

@media (max-width:760px){
  .art-nav-links a:not(.art-cta){display:none}
  .art-stats{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
  .art-table{overflow-x:auto}
  .art-body .lead{font-size:18px}
}