/* ==========================================================================
   文章详情页样式 — masthead / body / pull quote / foot / continue reading
   依赖 base.css
   ========================================================================== */

/* ===== article masthead ===== */
.masthead{padding:96px 0 64px;text-align:center}
.masthead-inner{max-width:816px;margin:0 auto;padding:0 var(--pad-page)}
.crumb{
  font-size:11px;font-weight:500;
  letter-spacing:.36em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:48px;display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap;
  justify-content:center;
}
.crumb a{color:var(--ink-3);transition:color .25s;padding:6px 0}
.crumb a:hover{color:var(--ink)}
.crumb .sep{width:18px;height:1px;background:var(--hair);display:inline-block}
.crumb .cat{color:var(--moss)}

h1.title{
  font-family:var(--serif);font-weight:400;
  font-size:64px;line-height:1.18;letter-spacing:-.005em;
  color:var(--ink);margin-bottom:32px;
}
.dek{
  font-family:var(--serif);font-weight:300;
  font-size:20px;line-height:1.75;color:var(--ink-2);
  max-width:600px;margin:0 auto 56px;
}

.byline{
  padding-top:32px;margin-top:0;border-top:1px solid var(--hair);
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;
}
.byline .name{
  font-family:var(--serif);font-weight:400;font-size:14px;
  letter-spacing:.06em;color:var(--ink);
}
.byline .info{
  font-size:13px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
}
.byline .info .cat-link{
  color:var(--moss);font-weight:500;
  transition:color .2s,border-color .2s;
  border-bottom:1px solid transparent;padding-bottom:1px;
}
.byline .info .cat-link:hover{border-bottom-color:var(--moss)}

/* ===== hero photo ===== */
.hero-photo{padding:48px var(--pad-page) 24px}
.hero-photo .photo{aspect-ratio:16/9;max-width:1180px;margin:0 auto}

/* ===== body ===== */
.body-wrap{padding:96px 0 64px}
.body{
  max-width:816px;margin:0 auto;padding:0 var(--pad-page);
  font-family:var(--serif);font-weight:300;
  font-size:18px;line-height:1.95;color:#2a2826;
}
.body p{margin-bottom:1.5em}
.body h2{
  font-family:var(--serif);font-weight:400;font-size:26px;
  line-height:1.35;color:var(--ink);
  margin:2.8em 0 .9em;letter-spacing:-.005em;
}
.body h3{
  font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.4;
  color:var(--ink);margin:2em 0 .6em;
}
.body strong{font-weight:500;color:var(--ink)}
.body em{font-style:italic;color:var(--moss)}
.body a{color:var(--moss);border-bottom:1px solid rgba(27,58,42,.3);transition:border-color .2s}
.body a:hover{border-bottom-color:var(--moss)}
.body ul,.body ol{margin:1.6em 0 1.8em;padding-left:0;list-style:none}
.body li{margin-bottom:.85em;position:relative;line-height:1.9}
.body ul>li{padding-left:28px}
.body ol>li{padding-left:42px}
/* 嵌套列表:收紧上下间距 */
.body li>ul,.body li>ol{margin:.7em 0 .1em}

/* 无序列表 — 茶汤金圆点(绝对定位,按中文行中心垂直居中) */
.body ul>li::before{
  content:"";position:absolute;left:6px;top:14px;
  width:7px;height:7px;border-radius:50%;background:var(--gold);
}

/* 有序列表 — 墨绿圆形序号 */
.body ol{counter-reset:item}
.body ol>li{counter-increment:item}
.body ol>li::before{
  content:counter(item);
  position:absolute;left:0;top:5px;
  width:24px;height:24px;line-height:24px;text-align:center;
  border-radius:50%;background:var(--moss);color:var(--rice);
  font-family:var(--sans);font-size:12.5px;font-weight:600;
}
/* 嵌套有序列表用浅一档的描边圆,避免一片墨绿 */
.body ol ol>li::before{
  background:transparent;color:var(--moss);
  border:1.5px solid var(--moss);line-height:21px;
}

/* ===== 正文表格 ===== */
.body table{
  width:100%;border-collapse:collapse;
  margin:2.6em 0;
  font-family:var(--sans);font-weight:400;
  font-size:15px;line-height:1.6;color:var(--ink-2);
  border:1px solid var(--rice-2);
  background:#fff;
}
.body table caption{
  font-family:var(--sans);font-size:12px;letter-spacing:.06em;
  color:var(--ink-3);text-align:left;padding-bottom:10px;
}
/* 单元格 */
.body table th,
.body table td{
  padding:13px 18px;
  border-bottom:1px solid var(--rice-2);
  vertical-align:top;text-align:left;
}
.body table tr:last-child td{border-bottom:none}
.body table td strong{font-weight:600;color:var(--ink)}
/* 表头(语义 thead / th) */
.body table thead th,
.body table thead td,
.body table th{
  background:var(--moss);color:var(--rice);
  font-weight:600;font-size:13px;letter-spacing:.05em;
  border-bottom:none;
}
.body table thead strong,
.body table th strong{color:var(--rice)}
/* 斑马纹 + 悬停 */
.body table tbody tr:nth-child(even){background:#faf7ef}
.body table tbody tr:hover{background:var(--moss-soft)}
/* 渐进增强:没有 thead/th 的表,自动把首行当表头(支持 :has 的浏览器) */
.body table:not(:has(thead)):not(:has(th)) tbody tr:first-child{background:var(--moss)}
.body table:not(:has(thead)):not(:has(th)) tbody tr:first-child td{
  color:var(--rice);font-weight:600;font-size:13px;letter-spacing:.05em;border-bottom:none;
}
.body table:not(:has(thead)):not(:has(th)) tbody tr:first-child td strong{color:var(--rice)}
/* 窄屏:整表可横向滚动,不被挤压 */
@media (max-width:600px){
  .body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .body table th,.body table td{padding:11px 14px;font-size:14px}
}

/* figure inside body — same width as text */
.figure{max-width:816px;margin:3em auto;padding:0 var(--pad-page)}
.figure .photo{aspect-ratio:16/9}
.figure figcaption{
  margin-top:14px;font-size:10.5px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.figure figcaption em{
  font-family:var(--serif);font-style:normal;font-weight:300;font-size:13px;
  color:var(--ink-2);text-transform:none;letter-spacing:.02em;
}

/* pull quote — centered */
.pull-wrap{padding:24px 0}
.pull{
  max-width:816px;margin:0 auto;padding:0 var(--pad-page);text-align:center;
}
.pull .mark{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--gold);margin-bottom:32px;
}
.pull blockquote{
  font-family:var(--serif);font-weight:400;
  font-size:30px;line-height:1.55;letter-spacing:-.005em;
  color:var(--ink);margin-bottom:24px;
}
.pull blockquote em{font-style:italic;color:var(--moss)}
.pull cite{
  font-style:normal;font-size:11px;font-weight:500;
  color:var(--ink-3);letter-spacing:.32em;text-transform:uppercase;display:block;
}

/* article end mark */
.end{
  max-width:816px;margin:48px auto 0;padding:0 var(--pad-page);text-align:center;
}
.end .mark{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);
}

/* article foot — tags + author */
.foot{max-width:816px;margin:80px auto 0;padding:0 var(--pad-page)}
.foot-rule{height:1px;background:var(--hair);margin-bottom:40px}
.tags{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding-bottom:48px;border-bottom:1px solid var(--hair);
}
.tags .lbl{
  font-size:10.5px;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--ink-3);
  margin-right:8px;
}
.tags .tag{
  font-family:var(--serif);font-weight:400;font-size:13.5px;color:var(--ink-2);
  padding:7px 16px;
  border:1px solid var(--hair);border-radius:4px;
  transition:all .2s;background:transparent;
  min-height:34px;display:inline-flex;align-items:center;
}
.tags .tag:hover{color:var(--moss);border-color:var(--moss);background:rgba(27,58,42,.04)}

/* continue reading */
.more{padding:120px 0}
.more-head{
  max-width:1180px;margin:0 auto 56px;padding:0 var(--pad-page);text-align:center;
}
.more-head .lbl{
  font-size:11px;font-weight:500;
  letter-spacing:.36em;text-transform:uppercase;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:18px;
}
.more-head .lbl::before,.more-head .lbl::after{
  content:"";display:inline-block;width:32px;height:1px;background:var(--hair);
}
.more-list{max-width:1180px;margin:0 auto;padding:0 var(--pad-page)}
.entry{
  display:grid;grid-template-columns:160px 1fr 320px;
  gap:64px;align-items:start;
  padding:56px 0;border-bottom:1px solid var(--hair);
}
.entry:first-child{border-top:1px solid var(--hair)}
.entry-meta{
  font-size:11px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);padding-top:8px;
}
.entry-meta .cat{color:var(--moss);display:block;margin-bottom:14px;font-weight:500}
.entry-meta .date{
  display:block;color:var(--ink-3);font-family:var(--serif);font-weight:300;
  font-size:13px;letter-spacing:.04em;text-transform:none;margin-bottom:6px;
}
.entry-meta .read{color:var(--ink-3);font-size:10.5px}
.entry-body h2{
  font-family:var(--serif);font-weight:400;font-size:30px;
  line-height:1.3;letter-spacing:-.005em;color:var(--ink);margin-bottom:18px;
}
.entry-body h2 a:hover{color:var(--moss)}
.entry-body p{
  font-family:var(--serif);font-weight:300;font-size:15.5px;
  line-height:1.85;color:var(--ink-2);max-width:520px;
}
.entry .photo{aspect-ratio:5/4}
.entry.no-photo{grid-template-columns:160px 1fr;gap:80px}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* tablet 600–980 */
@media (max-width:980px){
  .masthead{padding:56px 0 40px}
  .crumb{margin-bottom:32px}
  h1.title{font-size:42px}
  .dek{font-size:18px;margin-bottom:40px}

  .hero-photo{padding:32px var(--pad-page) 16px}
  .hero-photo .photo{aspect-ratio:4/3}

  .body-wrap{padding:56px 0 48px}
  .body{font-size:17px;line-height:1.92}

  .pull-wrap{padding:8px 0}
  .pull blockquote{font-size:24px}

  .more{padding:72px 0}
  .entry{grid-template-columns:1fr;gap:20px;padding:36px 0}
  .entry.no-photo{grid-template-columns:1fr;gap:16px}
  .entry .photo{aspect-ratio:5/3;order:-1}
  .entry-meta{
    display:flex;gap:16px;align-items:baseline;padding-top:0;flex-wrap:wrap;
  }
  .entry-meta .cat,.entry-meta .date,.entry-meta .read{margin-bottom:0;display:inline-block}
  .entry-body h2{font-size:24px}
}

/* phone ≤ 600 */
@media (max-width:600px){
  .masthead{padding:40px 0 28px}
  .crumb{font-size:10.5px;letter-spacing:.28em;margin-bottom:28px;gap:14px}
  h1.title{font-size:30px;line-height:1.28;margin-bottom:22px}
  .dek{font-size:16px;line-height:1.75;margin-bottom:32px}
  .byline{padding-top:24px}

  .hero-photo{padding:24px var(--pad-page-sm) 12px}
  /* 手机端 hero 也按原比例 */
  .hero-photo .photo{aspect-ratio:auto;height:auto}
  .hero-photo .photo img{height:auto}

  .body-wrap{padding:40px 0 32px}
  .body{font-size:16.5px;line-height:1.92}
  .body p{margin-bottom:1.4em}
  .body h2{font-size:22px;margin:2.2em 0 .8em}
  .body h3{font-size:17px;margin:1.8em 0 .5em}
  .body ul,.body ol{margin:1.2em 0 1.4em 0}
  /* 标记是固定尺寸(序号圆 24px),移动端缩进必须够,否则文字会盖住标记 */
  .body ul>li{padding-left:26px}
  .body ol>li{padding-left:40px}

  .figure{margin:2em auto;padding:0 var(--pad-page-sm)}
  .figure figcaption{
    flex-direction:column;gap:6px;align-items:flex-start;
    font-size:10px;letter-spacing:.2em;
  }
  .figure figcaption em{font-size:12.5px}

  .pull-wrap{padding:0}
  .pull .mark{margin-bottom:24px}
  .pull blockquote{font-size:20px;line-height:1.6;margin-bottom:20px}
  .pull cite{font-size:10.5px;letter-spacing:.28em}

  .end{margin-top:36px}
  .foot{margin-top:56px}
  .foot-rule{margin-bottom:32px}
  .tags{padding-bottom:32px}
  .tags .tag{font-size:13.5px}

  .more{padding:56px 0}
  .more-head{margin-bottom:32px}
  .more-head .lbl{font-size:10.5px;letter-spacing:.32em}
  .more-head .lbl::before,.more-head .lbl::after{width:20px}

  .entry{padding:28px 0;gap:16px}
  /* 手机端图片按原比例缩小,不裁切 */
  .entry .photo{aspect-ratio:auto;height:auto}
  .entry .photo img{height:auto}
  .figure .photo{aspect-ratio:auto;height:auto}
  .figure .photo img{height:auto}
  .entry-meta{font-size:10.5px;letter-spacing:.2em;gap:12px}
  .entry-body h2{font-size:20px;line-height:1.35;margin-bottom:14px}
  .entry-body p{font-size:14.5px;line-height:1.8}
}