/* ------------------------------------------------------------------
   hi55555.cn /me — 文章排版
   与 styles.css 同一套设计语言：冷灰纸底、宋体、墨色、发丝线。
   这一层只管「读」：版心、标题层级、列表、引用、表格、代码。
   ------------------------------------------------------------------ */

.art{max-width:calc(38em + var(--gut) * 2);}
.art-wide{max-width:calc(52em + var(--gut) * 2);}

/* ---------------------------- 文章页头 ---------------------------- */
.art-head{
  border-top:1px solid var(--ink);
  margin-top:clamp(40px,8vh,84px);
  padding-top:16px;
}
.art-head .kicker{margin:0 0 clamp(22px,4vh,38px);}
.art-head h1{
  margin:0;
  font-size:clamp(30px,4.6vw,46px);
  font-weight:400;
  line-height:1.32;
  letter-spacing:.01em;
}
.art-sum{
  margin:clamp(16px,2.4vh,24px) 0 0;
  font-size:15.5px;
  line-height:1.95;
  color:var(--mute);
  max-width:34em;
}
.art-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  margin:22px 0 clamp(30px,5vh,54px);
  padding-top:14px;
  border-top:1px solid var(--line-soft);
  font-size:10.5px;
}
.art-tag{color:var(--mute);}

/* ---------------------------- 正文 ---------------------------- */
.art-body{
  max-width:none;
  font-size:17.5px;
  line-height:2.05;
  letter-spacing:.015em;
  color:var(--ink-2);
}
.art-body > *:first-child{margin-top:0;}
.art-body p{margin:0 0 1.35em;text-align:justify;text-justify:inter-ideograph;}
.art-body strong{font-weight:600;color:var(--ink);}
.art-body em{font-style:normal;text-emphasis:filled dot;text-emphasis-position:under right;}

/* 小标题：编号在前，字重还原为常规，靠上方的发丝线断开段落 */
.art-body h2{
  margin:clamp(44px,7vh,72px) 0 1.1em;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:clamp(21px,2.6vw,26px);
  font-weight:400;
  line-height:1.5;
  letter-spacing:.02em;
  color:var(--ink);
}
.art-body h3{
  margin:2.1em 0 .8em;
  font-size:17.5px;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--ink);
}
.art-body h3::before{content:"§ ";color:var(--line);font-weight:400;}

.art-body ul,.art-body ol{margin:0 0 1.35em;padding-left:1.6em;}
.art-body li{margin:0 0 .55em;padding-left:.15em;}
.art-body li::marker{color:var(--mute);font-size:.9em;}
.art-body li > ul,.art-body li > ol{margin:.55em 0 .2em;}

.art-body blockquote{
  margin:1.6em 0;
  padding:2px 0 2px 20px;
  border-left:1px solid var(--line);
  color:var(--mute);
  font-size:16.5px;
}
.art-body blockquote p:last-child{margin-bottom:0;}

.art-body hr{
  margin:2.8em 0;
  border:0;
  border-top:1px solid var(--line-soft);
}

.art-body code{
  font-family:var(--mono);
  font-size:.84em;
  letter-spacing:0;
  background:var(--paper-2);
  border:1px solid var(--line-soft);
  padding:.1em .4em;
}
.art-body pre{
  margin:1.6em 0;
  padding:16px 18px;
  background:var(--paper-2);
  border:1px solid var(--line-soft);
  overflow:auto;
  line-height:1.7;
}
.art-body pre code{background:none;border:0;padding:0;font-size:12.5px;}

.art-body table{
  width:100%;
  margin:1.8em 0;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.75;
}
.art-body th,.art-body td{
  padding:9px 12px 9px 0;
  border-bottom:1px solid var(--line-soft);
  text-align:left;
  vertical-align:top;
}
.art-body th{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--mute);
  font-weight:400;
  border-bottom-color:var(--line);
}
.art-body img{max-width:100%;height:auto;display:block;margin:1.8em 0;}
.art-body a{border-bottom:1px solid var(--line);padding-bottom:1px;}
.art-body a:hover{border-color:var(--ink);}

/* ---------------------------- 页脚与导航 ---------------------------- */
.art-foot{
  margin-top:clamp(46px,7vh,72px);
  border-top:1px solid var(--line);
  padding-top:18px;
}
.art-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.an-item{display:flex;flex-direction:column;gap:6px;padding:6px 0;}
.an-item:hover .an-t{border-bottom:1px solid var(--ink);}
.an-right{text-align:right;grid-column:2;}
.an-k{font-size:10px;letter-spacing:.2em;}
.an-t{font-size:15px;color:var(--ink);border-bottom:1px solid transparent;padding-bottom:1px;}
.art-back{margin:26px 0 0;}
.art-back a{font-size:11px;letter-spacing:.14em;}
.art-back a:hover{color:var(--ink);}

/* ---------------------------- 讨论 ---------------------------- */
.art-h2{
  margin:0 0 14px;
  font-size:10.5px;
  letter-spacing:.26em;
  font-weight:400;
  color:var(--mute);
}
#discuss{margin:clamp(46px,7vh,78px) auto clamp(48px,8vh,90px);}

/* ---------------------------- 列表页 ---------------------------- */
.art-head-list{max-width:calc(52em + var(--gut) * 2);}
.art-head-list h1{
  margin:0;
  font-size:clamp(44px,8vw,84px);
  font-weight:400;
  line-height:1;
  letter-spacing:.01em;
}
.art-head-list .lead{margin:clamp(18px,3vh,28px) 0 clamp(36px,6vh,64px);}

.artlist{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--ink);
}
.al-item{list-style:none;border-bottom:1px solid var(--line-soft);}
.al-link{
  display:grid;
  grid-template-columns:104px 1fr;
  gap:4px 24px;
  padding:clamp(20px,3vh,28px) 0;
  align-items:baseline;
}
.al-date{grid-row:1;font-size:10.5px;letter-spacing:.14em;padding-top:8px;}
.al-t{
  margin:0;
  font-size:clamp(19px,2.2vw,23px);
  font-weight:400;
  line-height:1.5;
  letter-spacing:.02em;
  grid-column:2;
  transition:color .12s;
}
.al-link:hover .al-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;}
.al-s{
  margin:0;
  grid-column:2;
  font-size:14.5px;
  line-height:1.85;
  color:var(--mute);
  max-width:52em;
}
.al-meta{grid-column:2;font-size:10px;letter-spacing:.14em;margin-top:6px;}

@media (max-width:900px){
  .art-body{font-size:17px;line-height:2;}
}
@media (max-width:620px){
  .art-body{font-size:16.5px;line-height:1.98;}
  .al-link{grid-template-columns:1fr;gap:6px;padding:20px 0;}
  .al-date{padding-top:0;}
  .al-t,.al-s,.al-meta{grid-column:1;}
  .art-nav{grid-template-columns:1fr;}
  .an-right{text-align:left;grid-column:1;}
}

/* 打印：去底纹，只留字 */
@media print{
  .topbar,.skip,.art-nav,.art-back,.foot,#discuss{display:none;}
  body{background:#fff;}
  .art-body h2{break-after:avoid;}
  .art-body p{orphans:3;widows:3;}
}