/* ------------------------------------------------------------------
   My NonStop Enterprise — Blog article layout
   Links AFTER shared.css. Reg-note / data-table / contact-card /
   subpages all come from shared.css; this file adds the long-form
   reading layout + per-pillar cover & tag variants.
   ------------------------------------------------------------------ */

/* ---- Header ---- */
.article{max-width:760px;margin:0 auto;padding:0 32px;}
.art-head{max-width:760px;margin:18px auto 0;padding:0 32px;}
.art-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:5px 11px;border-radius:999px;width:fit-content;}
.art-tag .d{width:6px;height:6px;border-radius:50%;}
.art-tag.re{background:var(--pillar-re-bg);color:#7A5E1E;}   .art-tag.re .d{background:#C5B07A;}
.art-tag.ins{background:var(--pillar-ins-bg);color:#1F5F3F;} .art-tag.ins .d{background:#2C7A52;}
.art-tag.it{background:var(--pillar-it-bg);color:#1568E0;}   .art-tag.it .d{background:#1568E0;}
.art-tag.edu{background:var(--pillar-edu-bg);color:#B45309;} .art-tag.edu .d{background:#E8A93C;}
.art-head h1{font-size:46px;font-weight:800;letter-spacing:-.026em;line-height:1.06;color:var(--brand-ink);margin:16px 0 14px;}
.art-head .standfirst{font-size:19px;line-height:1.55;color:var(--fg-2);margin:0;}

.byline{display:flex;align-items:center;gap:13px;margin:24px 0 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 16%;}
.byline .who strong{display:block;color:var(--brand-ink);font-size:14.5px;font-weight:700;letter-spacing:-.005em;}
.byline .who > span{display:block;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);letter-spacing:.03em;margin-top:3px;}
.byline .stats{margin-left:auto;text-align:right;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);letter-spacing:.03em;line-height:1.7;}
.byline .share{display:flex;gap:7px;margin-left:18px;}
.byline .share a{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--fg-3);transition:all .15s;}
.byline .share a:hover{border-color:var(--brand-ink);color:var(--brand-ink);}

/* ---- Cover ---- */
.art-cover{max-width:1100px;margin:28px auto 0;padding:0 32px;}
.art-cover .frame{position:relative;border-radius:24px;overflow:hidden;min-height:380px;display:flex;align-items:flex-end;padding:20px 22px;background:linear-gradient(150deg,#0B1240 0%,#243F87 100%);}
.art-cover .frame::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 15px);pointer-events:none;}
.art-cover .frame::before{content:var(--glyph,"");position:absolute;right:-10px;bottom:-58px;font-family:var(--font-mono);font-size:230px;font-weight:700;color:rgba(255,255,255,.06);letter-spacing:-.04em;line-height:1;white-space:nowrap;}
.art-cover .frame.re{background:linear-gradient(150deg,#0B1240 0%,#243F87 100%);}
.art-cover .frame.ins{background:linear-gradient(150deg,#1F5F3F 0%,#2C7A52 100%);}
.art-cover .frame.it{background:linear-gradient(150deg,#1568E0 0%,#0E4FB0 100%);}
.art-cover .frame.edu{background:linear-gradient(150deg,#B45309 0%,#E8A93C 100%);}
.art-cover .cap{position:relative;z-index:1;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:rgba(255,255,255,.9);background:rgba(11,18,64,.3);padding:6px 11px;border-radius:7px;text-transform:uppercase;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.art-cover .frame .cov-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.art-cover .frame:has(.cov-photo)::before,.art-cover .frame:has(.cov-photo)::after{display:none;}

/* ---- Prose ---- */
.prose{margin-top:40px;}
.prose > p{font-size:17px;line-height:1.72;color:var(--fg);margin:0 0 22px;}
.prose > p:first-of-type::first-letter{float:left;font-size:62px;line-height:.82;font-weight:800;color:var(--brand-ink);margin:6px 12px 0 0;font-family:var(--font-sans);}
html[lang="zh"] .prose > p:first-of-type::first-letter{float:none;font-size:inherit;font-weight:inherit;margin:0;color:inherit;}
.prose h2{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--brand-ink);margin:44px 0 4px;line-height:1.14;}
.prose h2 .idx{font-family:var(--font-mono);font-size:14px;color:var(--brand-violet);font-weight:700;margin-right:10px;letter-spacing:.02em;}
.prose h3{font-size:20px;font-weight:700;letter-spacing:-.012em;color:var(--brand-ink);margin:30px 0 6px;}
.prose strong{color:var(--brand-ink);font-weight:700;}
.prose a.inl{color:var(--brand-violet);text-decoration:none;border-bottom:1px solid rgba(107,69,244,.3);font-weight:600;}
.prose a.inl:hover{border-color:var(--brand-violet);}
.prose ul{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;}
.prose ul li{position:relative;padding-left:26px;font-size:16px;line-height:1.62;color:var(--fg);}
.prose ul li::before{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:2px;background:var(--brand-violet);transform:rotate(45deg);}
.prose .tnote{font-family:var(--font-mono);font-size:12px;color:var(--fg-3);letter-spacing:.02em;margin-top:10px;}

.pull{margin:34px 0;padding:4px 0 4px 26px;border-left:4px solid var(--brand-violet);}
.pull p{font-size:23px;line-height:1.4;font-weight:700;letter-spacing:-.012em;color:var(--brand-ink);margin:0;}

.art-cta{margin:48px auto 0;}

@media (max-width: 720px){
  .art-head h1{font-size:34px;}
  .art-cover .frame{min-height:240px;}
  .byline{flex-wrap:wrap;}
  .byline .stats{margin-left:0;text-align:left;width:100%;order:3;}
  .prose > p{font-size:16px;}
}