/* ============================================================
   gongyibo.ai — 文章阅读页（英文长文）
   依赖 styles.css 的 :root 变量、.nav、.footer
   ============================================================ */

.art-body{ background:var(--bg); }
.art-back{
  font-size:13px; color:var(--ink-2); padding:6px 12px; border-radius:980px;
  transition:background .25s var(--ease), color .25s var(--ease); white-space:nowrap;
}
.art-back:hover{ background:var(--bg-soft); color:var(--ink); }

.art{ max-width:720px; margin:0 auto; padding:124px 22px 80px; }

/* ---- 标题区 ---- */
.art-head{ text-align:left; margin-bottom:34px; }
.art-eyebrow{
  font-size:13px; color:var(--accent-ink); font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; margin-bottom:18px;
}
.art-title{
  font-size:clamp(32px, 5vw, 46px); font-weight:700; letter-spacing:-.025em;
  line-height:1.12; color:var(--ink);
}
.art-subtitle{
  font-size:clamp(18px, 2.4vw, 22px); color:var(--ink-2); line-height:1.45;
  margin-top:16px; font-weight:400; letter-spacing:-.01em;
}
.art-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.art-tag{
  font-size:12px; color:var(--ink-2); background:var(--bg-soft);
  padding:5px 11px; border-radius:980px;
}

/* ---- 封面 ---- */
.art-cover{ margin:0 0 40px; }
.art-cover img{
  width:100%; height:auto; display:block; border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.10);
}

/* ---- 目录 ---- */
.art-toc{
  background:var(--bg-soft); border-radius:var(--radius-sm);
  padding:20px 24px; margin:0 0 40px;
}
.art-toc-title{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; }
.art-toc ol{ list-style:none; counter-reset:toc; }
.art-toc li{ counter-increment:toc; font-size:14.5px; line-height:1.9; color:var(--ink-2); }
.art-toc li::before{ content:counter(toc, decimal-leading-zero); color:var(--ink-3); font-variant-numeric:tabular-nums; margin-right:12px; font-size:12px; }
.art-toc a:hover{ color:var(--accent-ink); }
.art-toc.no-num li::before{ content:none; }

/* ---- 正文排版 ---- */
.art-content{
  font-size:18.5px; line-height:1.72; color:#2a2a2e; letter-spacing:-.003em;
}
.art-content > *{ margin-bottom:1.35em; }
.art-content h2{
  font-size:clamp(24px, 3.2vw, 30px); font-weight:700; letter-spacing:-.02em; line-height:1.2;
  color:var(--ink); margin:2.2em 0 .8em; scroll-margin-top:80px;
}
.art-content h3{
  font-size:clamp(19px, 2.4vw, 22px); font-weight:600; letter-spacing:-.015em; line-height:1.3;
  color:var(--ink); margin:1.8em 0 .6em; scroll-margin-top:80px;
}
.art-content h4{ font-size:17px; font-weight:600; color:var(--ink); margin:1.4em 0 .5em; }
.art-content p{ margin-bottom:1.35em; }
.art-content strong{ font-weight:600; color:var(--ink); }
.art-content em{ font-style:italic; }
.art-content a{ color:var(--accent-ink); text-decoration:underline; text-decoration-color:rgba(0,102,204,.3); text-underline-offset:3px; }
.art-content a:hover{ text-decoration-color:var(--accent-ink); }
.art-content ul, .art-content ol{ padding-left:1.4em; }
.art-content li{ margin-bottom:.45em; }
.art-content li > p{ margin-bottom:.5em; }
.art-content blockquote{
  border-left:3px solid var(--accent); padding:4px 0 4px 22px; margin:1.8em 0;
  color:var(--ink-2); font-size:1.02em;
}
.art-content blockquote p{ margin-bottom:.8em; }
.art-content blockquote p:last-child{ margin-bottom:0; }
.art-content hr, .art-rule{
  border:none; height:1px; background:var(--line); margin:2.6em auto; width:120px;
}
.art-content code{
  font-family:"SF Mono", Menlo, Consolas, monospace; font-size:.86em;
  background:var(--bg-soft); padding:2px 6px; border-radius:6px;
}
.art-content pre{
  background:#1d1d1f; color:#f5f5f7; padding:18px 20px; border-radius:var(--radius-sm);
  overflow-x:auto; font-size:14px; line-height:1.6;
}
.art-content pre code{ background:none; padding:0; color:inherit; }
.art-content figure{ margin:2.2em 0; }
.art-content figure img{
  width:100%; height:auto; display:block; border-radius:var(--radius-sm);
  box-shadow:0 14px 40px rgba(0,0,0,.08);
}
.art-content figcaption{
  font-size:13.5px; color:var(--ink-3); text-align:center; margin-top:12px; line-height:1.5;
}
.art-content table{
  width:100%; border-collapse:collapse; font-size:15px; line-height:1.5;
  display:block; overflow-x:auto;
}
.art-content th, .art-content td{ border-bottom:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.art-content th{ font-weight:600; color:var(--ink); background:var(--bg-soft); }
.art-content sup{ font-size:.7em; }

/* ---- 页脚 / 作者卡 ---- */
.art-foot{ margin-top:64px; padding-top:36px; border-top:1px solid var(--line); }
.art-origin{ font-size:14px; color:var(--ink-3); line-height:1.6; margin-bottom:28px; }
.art-author{
  display:flex; gap:18px; align-items:center;
  background:var(--card); border:1px solid rgba(0,0,0,.05); border-radius:var(--radius);
  padding:22px 24px;
}
.art-author img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.art-author-name{ font-size:16px; font-weight:600; color:var(--ink); margin-bottom:4px; }
.art-author-bio{ font-size:14px; color:var(--ink-2); line-height:1.6; }
.art-author-bio a{ color:var(--accent-ink); }
.art-more{ margin-top:28px; font-size:14px; }
.art-more a{ color:var(--accent-ink); }

/* ---- 响应式 ---- */
@media (max-width:760px){
  .art{ padding:96px 18px 60px; }
  .art-content{ font-size:17px; line-height:1.7; }
  .nav-links{ display:none; }
  .art-author{ flex-direction:column; align-items:flex-start; }
}