.reading-progress{
  position:fixed;top:0;left:0;z-index:101;
  height:2px;background:var(--accent);
  width:0;transition:width .1s linear
}

.art-header{
  max-width:680px;margin:0 auto;padding:24px 20px 0
}
.art-header .cat{
  font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;
  color:var(--accent)
}
.art-header h1{
  font-family:var(--f-head);
  font-size:2.4rem;line-height:1.1;
  letter-spacing:-.015em;margin-top:6px;
  font-weight:700
}
.art-header .deck{
  margin-top:10px;font-size:1rem;
  line-height:1.55;color:var(--ink2);max-width:580px
}
.art-byline{
  margin-top:14px;padding-top:10px;
  border-top:1px solid var(--rule-light);
  font-size:.7rem;color:var(--ink3);
  display:flex;gap:12px;align-items:center
}
.art-byline .author{font-weight:700;color:var(--ink2)}

.art-hero{max-width:840px;margin:20px auto 0;padding:0 20px}
.art-hero figure{border-radius:3px;overflow:hidden;background:var(--rule-light)}
.art-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.art-hero figcaption{margin-top:5px;font-size:.68rem;color:var(--ink3);font-style:italic}

.share-bar{
  max-width:680px;margin:16px auto 0;padding:0 20px;
  display:flex;gap:8px;align-items:center
}
.share-bar span{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3)}
.share-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--rule-mid);
  font-size:.7rem;color:var(--ink2);
  transition:border-color .15s,color .15s
}
.share-btn:hover{border-color:var(--accent);color:var(--accent)}

.art-body{
  max-width:640px;margin:0 auto;
  padding:28px 20px 60px
}
.art-body p{font-size:1.02rem;line-height:1.78;margin-bottom:20px}
.art-body h2{
  font-family:var(--f-head);font-size:1.45rem;line-height:1.2;
  margin:32px 0 12px;font-weight:700
}
.art-body h3{font-size:.92rem;font-weight:700;margin:24px 0 8px}
.art-body ul,.art-body ol{margin:0 0 20px 18px;font-size:1.02rem;line-height:1.78}
.art-body ul{list-style:disc}
.art-body ol{list-style:decimal}
.art-body li{margin-bottom:6px}
.art-body blockquote{
  border-left:2px solid var(--accent);
  padding:2px 0 2px 18px;margin:24px 0;
  font-family:var(--f-head);font-size:1.15rem;line-height:1.45;
  color:var(--ink2);font-style:italic
}
.art-body strong{font-weight:600}
.art-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.art-body figure{margin:24px 0}
.art-body figure img{border-radius:2px}
.art-body figcaption{margin-top:5px;font-size:.68rem;color:var(--ink3);font-style:italic}
.art-body .data-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.82rem}
.art-body .data-table th{
  text-align:left;font-weight:700;padding:7px 10px;
  border-bottom:2px solid var(--rule);
  font-size:.65rem;text-transform:uppercase;letter-spacing:.06em
}
.art-body .data-table td{padding:7px 10px;border-bottom:1px solid var(--rule-light)}
.art-body .data-table tr:last-child td{border-bottom:none}

.art-tags{
  margin-top:28px;padding-top:16px;
  border-top:1px solid var(--rule-light);
  display:flex;flex-wrap:wrap;gap:6px
}
.art-tags a,.art-tags span{
  display:inline-block;padding:4px 10px;
  background:var(--tag-bg);color:var(--tag-ink);
  font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  border-radius:2px;text-decoration:none
}
.art-tags a:hover{background:var(--rule-mid);color:var(--ink)}

.author-box{
  max-width:640px;margin:0 auto;padding:0 20px 40px;
  display:flex;gap:14px;align-items:start
}
.author-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--bg-warm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-size:1rem;font-weight:700;
  color:var(--accent)
}
.author-box .author-info .name{font-size:.82rem;font-weight:700}
.author-box .author-info .bio{font-size:.78rem;color:var(--ink2);line-height:1.5;margin-top:2px}

.related{max-width:840px;margin:0 auto;padding:0 20px 60px}
.related .sect-head{margin-bottom:16px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel-grid .card h3{font-size:.88rem}

@media(max-width:640px){
  .art-header h1{font-size:1.7rem}
  .art-header .deck{font-size:.9rem}
  .art-body p{font-size:.92rem}
  .art-body h2{font-size:1.2rem}
  .rel-grid{grid-template-columns:1fr}
  .share-bar{flex-wrap:wrap}
}