/* ============================================================
   WC_BLOG —— 杂志级阅读排版（2026-10-19）
   参考 Medium / Stripe / Ghost 的排版基准：
     · 正文每行 66-72 字符（约 680px）
     · 行高 1.75，字号 19-20px
     · 标题与正文严格层级，衬线 + 无衬线搭配
     · 大留白、克制装饰、阅读进度条
   ============================================================ */
:root{
  --blg-measure: 680px;      /* 正文最佳阅读宽度 */
  --blg-wide: 1100px;        /* 列表页宽度 */
  --blg-ink: #17201d;
  --blg-body: #2f3a36;
  --blg-quiet: #6d7975;
  --blg-paper: #fdfcf9;
  --blg-rule: #e5e1d8;
  --blg-accent: #b0603c;
  --blg-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --blg-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ============ 阅读进度条 ============ */
.wc-progress{
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--blg-accent);
  z-index: 9999;
  transition: width .1s linear;
}

/* ============ 列表页 ============ */
.wc-blog-hero{
  background: var(--cream, #f4f1eb);
  padding: 100px 0 72px;
  border-bottom: 1px solid var(--blg-rule);
}
.wc-blog-hero .container{max-width: var(--blg-wide)}
.wc-blog-kicker{
  font: 650 11px/1 var(--blg-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blg-accent);
  margin-bottom: 22px;
}
.wc-blog-hero h1{
  font-family: var(--blg-serif);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.022em;
  color: var(--blg-ink);
  margin: 0 0 24px;
  max-width: 15ch;
}
.wc-blog-hero p{
  font-family: var(--blg-sans);
  font-size: 18px;
  line-height: 1.72;
  color: var(--blg-quiet);
  max-width: 56ch;
  margin: 0;
}

.wc-blog-list{padding: 80px 0 110px; background: var(--blg-paper)}
.wc-blog-list .container{max-width: var(--blg-wide)}

.wc-blog-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 0 56px;
}

.wc-post-card{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  padding: 30px 0 34px;
  border-top: 1px solid var(--blg-rule);
  transition: border-color .25s ease;
}
.wc-post-card:first-child{border-top: 2px solid var(--blg-ink)}
.wc-post-card:hover{border-top-color: var(--blg-accent)}
.wc-post-card .meta{
  font: 650 10.5px/1 var(--blg-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blg-quiet);
  margin-bottom: 14px;
}
.wc-post-card h2{
  font-family: var(--blg-serif);
  font-size: clamp(22px, 2.1vw, 27px);
  line-height: 1.28;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--blg-ink);
  margin: 0 0 14px;
  transition: color .2s ease;
}
.wc-post-card:hover h2{color: var(--blg-accent)}
.wc-post-card p{
  font-family: var(--blg-sans);
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--blg-quiet);
  margin: 0 0 18px;
}
.wc-post-card .more{
  margin-top: auto;
  font: 650 12px/1 var(--blg-sans);
  letter-spacing: .06em;
  color: var(--blg-accent);
}

/* ============ 文章页 ============ */
.wc-article{background: var(--blg-paper); padding: 0 0 110px}

.wc-article-head{
  max-width: var(--blg-measure);
  margin: 0 auto;
  padding: 72px 24px 0;
}
.wc-article-head .meta{
  font: 650 11px/1 var(--blg-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blg-accent);
  margin-bottom: 22px;
}
.wc-article-head h1{
  font-family: var(--blg-serif);
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: -.018em;
  color: var(--blg-ink);
  margin: 0 0 24px;
}
.wc-article-head .standfirst{
  font-family: var(--blg-sans);
  font-size: 19.5px;
  line-height: 1.68;
  color: var(--blg-quiet);
  margin: 0 0 32px;
}
.wc-article-head .byline{
  font: 500 13px/1.5 var(--blg-sans);
  color: var(--blg-quiet);
  padding: 20px 0;
  border-top: 1px solid var(--blg-rule);
  border-bottom: 1px solid var(--blg-rule);
  margin-bottom: 0;
}

/* ---- 正文 ---- */
.wc-prose{
  max-width: var(--blg-measure);
  margin: 0 auto;
  padding: 44px 24px 0;
  font-family: var(--blg-sans);
  font-size: 19px;
  line-height: 1.78;
  color: var(--blg-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wc-prose > p{margin: 0 0 28px}

/* 首字下沉 */
.wc-prose > p:first-of-type::first-letter{
  float: left;
  font-family: var(--blg-serif);
  font-size: 74px;
  line-height: .84;
  font-weight: 400;
  color: var(--blg-ink);
  padding: 6px 12px 0 0;
}

.wc-prose h2{
  font-family: var(--blg-serif);
  font-size: clamp(25px, 2.8vw, 33px);
  line-height: 1.26;
  font-weight: 400;
  letter-spacing: -.014em;
  color: var(--blg-ink);
  margin: 64px 0 22px;
}
.wc-prose h2 + p{margin-top: 0}
.wc-prose h3{
  font-family: var(--blg-sans);
  font-size: 19px;
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--blg-ink);
  margin: 44px 0 16px;
}

.wc-prose ul, .wc-prose ol{margin: 0 0 28px; padding-left: 24px}
.wc-prose li{margin-bottom: 12px; padding-left: 4px}
.wc-prose li::marker{color: var(--blg-accent)}

.wc-prose strong{color: var(--blg-ink); font-weight: 650}
.wc-prose em{font-style: italic}
.wc-prose a{
  color: var(--blg-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.wc-prose a:hover{text-decoration-thickness: 2px}

.wc-prose blockquote{
  margin: 44px 0;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--blg-accent);
  font-family: var(--blg-serif);
  font-size: 23px;
  line-height: 1.58;
  font-style: italic;
  color: var(--blg-ink);
}
.wc-prose blockquote p{margin: 0}

.wc-prose hr{
  border: 0;
  border-top: 1px solid var(--blg-rule);
  margin: 52px auto;
  width: 120px;
}

.wc-prose table{
  width: 100%;
  border-collapse: collapse;
  margin: 36px 0;
  font-size: 15.5px;
  line-height: 1.6;
}
.wc-prose th, .wc-prose td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--blg-rule);
  text-align: left;
  vertical-align: top;
}
.wc-prose th{
  font: 700 11px/1.5 var(--blg-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blg-quiet);
  border-bottom: 2px solid var(--blg-ink);
}
.wc-prose img{max-width: 100%; height: auto; display: block; margin: 36px 0}
.wc-prose figcaption{
  font: 500 13px/1.6 var(--blg-sans);
  color: var(--blg-quiet);
  margin-top: 12px;
  text-align: center;
}

/* 强调框 */
.wc-note{
  background: #f6f3ec;
  border-left: 3px solid var(--blg-accent);
  padding: 24px 28px;
  margin: 36px 0;
  font-size: 17px;
  line-height: 1.72;
}
.wc-note p:last-child{margin-bottom: 0}
.wc-note strong{color: var(--blg-ink)}

/* ============ 文末 ============ */
.wc-article-cta{
  max-width: var(--blg-measure);
  margin: 72px auto 0;
  padding: 36px 32px;
  background: var(--cream, #f4f1eb);
}
.wc-article-cta h3{
  font-family: var(--blg-serif);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  margin: 0 0 12px;
  color: var(--blg-ink);
}
.wc-article-cta p{
  font-family: var(--blg-sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--blg-quiet);
  margin: 0 0 22px;
}
.wc-article-cta a{
  display: inline-block;
  padding: 14px 28px;
  background: var(--blg-ink);
  color: #fff;
  text-decoration: none;
  font: 650 13px/1 var(--blg-sans);
  letter-spacing: .04em;
  transition: background .2s ease;
}
.wc-article-cta a:hover{background: var(--blg-accent)}

.wc-back{
  max-width: var(--blg-measure);
  margin: 0 auto;
  padding: 32px 24px 0;
}
.wc-back a{
  font: 650 11.5px/1 var(--blg-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blg-quiet);
  text-decoration: none;
  transition: color .2s ease;
}
.wc-back a:hover{color: var(--blg-accent)}

/* ============ 阿拉伯语 ============ */
body.lang-ar .wc-prose{line-height: 2.05; font-size: 19.5px}
body.lang-ar .wc-prose > p:first-of-type::first-letter{float: none; font-size: inherit; padding: 0}
body.lang-ar .wc-article-head h1{line-height: 1.35}
body.lang-ar .wc-prose blockquote{font-style: normal}

/* ============ 响应式 ============ */
@media(max-width:768px){
  .wc-blog-hero{padding: 64px 0 48px}
  .wc-blog-list{padding: 52px 0 72px}
  .wc-article-head{padding-top: 48px}
  .wc-prose{font-size: 17.5px; line-height: 1.76; padding-top: 32px}
  .wc-prose > p:first-of-type::first-letter{font-size: 60px}
  .wc-prose h2{margin-top: 48px}
  .wc-prose blockquote{font-size: 20px; padding-left: 20px}
  .wc-article-cta{margin-top: 56px; padding: 28px 24px}
}
@media(max-width:480px){
  .wc-article-head h1{font-size: 30px}
  .wc-article-head .standfirst{font-size: 17px}
  .wc-prose{font-size: 17px}
}



/* ============ 目录：按品类分组 ============ */
.wc-toc-groups{margin-top:16px; display:flex; flex-direction:column; gap:22px}
.wc-toc-cat{
  font: 700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.16em; text-transform:uppercase;
  color:#be6d47; margin:0 0 10px; padding-left:2px;
  display:flex; align-items:center; gap:9px;
}
.wc-toc-cat em{
  font-style:normal; font-size:10px;
  background:#be6d47; color:#fff;
  border-radius:9px; padding:2px 7px; letter-spacing:0;
}
.wc-toc-cat::after{content:""; flex:1; height:1px; background:rgba(190,109,71,.22)}

/* 品类区块 */
.wc-cat-block{margin-bottom:56px}
.wc-cat-head{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400; font-size:clamp(22px,2.2vw,28px);
  color:var(--blg-ink,#17201d);
  margin:0 0 22px; padding-bottom:14px;
  border-bottom:2px solid var(--blg-ink,#17201d);
  display:flex; align-items:baseline; gap:12px;
}
.wc-cat-num{
  font:700 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#be6d47; letter-spacing:.05em;
}
.wc-post-card h3{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(19px,1.9vw,23px);
  line-height:1.3; font-weight:400;
  color:var(--blg-ink,#17201d);
  margin:0 0 14px; transition:color .2s ease;
}
.wc-post-card:hover h3{color:#be6d47}

/* ============ 卡片缩略图（参考 authoe 列表布局） ============ */
.wc-post-card{
  display:flex; flex-direction:column;
  border-top:0!important;
  padding:0!important;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:4px;
  overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.wc-post-card:hover{
  box-shadow:0 8px 26px rgba(23,32,29,.10);
  transform:translateY(-2px);
  border-color:rgba(190,109,71,.35);
}
.wc-card-media{
  width:100%;
  aspect-ratio:1/1;
  background:#f4f1eb;
  overflow:hidden;
}
.wc-card-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s cubic-bezier(.22,.8,.24,1);
}
.wc-post-card:hover .wc-card-media img{transform:scale(1.04)}
.wc-card-txt{padding:20px 20px 22px; display:flex; flex-direction:column; flex:1 1 auto}
.wc-card-txt .meta{
  font:650 10px/1 var(--blg-sans, sans-serif);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--blg-accent,#b0603c);
  margin-bottom:11px;
}
.wc-card-txt h3{
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px; line-height:1.36; font-weight:400;
  color:var(--blg-ink,#17201d);
  margin:0 0 14px; transition:color .2s ease;
}
.wc-post-card:hover .wc-card-txt h3{color:#be6d47}
.wc-card-txt .more{
  margin-top:auto;
  font:650 12px/1 var(--blg-sans,sans-serif);
  color:var(--blg-accent,#b0603c);
}
.wc-blog-grid{gap:26px!important; align-items:stretch}

/* 文章头图 */
.wc-hero-img{
  margin:0 auto 40px!important;
  max-width:var(--blg-measure,680px);
  padding:0 24px;
}
.wc-hero-img img{
  width:100%; height:auto; display:block;
  border-radius:3px;
}

@media(max-width:768px){
  .wc-card-txt{padding:16px 16px 18px}
  .wc-card-txt h3{font-size:16.5px}
  .wc-blog-grid{gap:18px!important}
}

/* ============ 目录（可收起 · 高对比） ============ */
.wc-toc-sec{
  background: var(--cream, #f4f1eb);
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--blg-rule, #e5e1d8);
}
.wc-toc-sec .container{max-width: var(--blg-measure, 680px)}
.wc-toc-box{border:0; margin:0}
.wc-toc-summary{
  display:flex; align-items:center; gap:14px;
  padding:18px 22px;
  background:#be6d47;
  color:#fff;
  cursor:pointer;
  list-style:none;
  border-radius:3px;
  box-shadow:0 4px 14px rgba(190,109,71,.28);
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.wc-toc-summary::-webkit-details-marker{display:none}
.wc-toc-summary::marker{content:""}
.wc-toc-summary:hover{background:#a95d3a; box-shadow:0 6px 20px rgba(190,109,71,.36); transform:translateY(-1px)}
.wc-toc-ico{
  flex:0 0 auto;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
  border-radius:50%;
  font:400 18px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  transition:transform .25s ease, background .2s ease;
}
.wc-toc-box[open] .wc-toc-ico{transform:rotate(45deg); background:rgba(255,255,255,.18)}
.wc-toc-label{
  flex:1 1 auto;
  font:650 15px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.wc-toc-count{
  flex:0 0 auto;
  min-width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.22);
  border-radius:14px;
  font:700 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.wc-toc-groups{margin-top:16px; display:flex; flex-direction:column; gap:22px}
.wc-toc-cat{
  font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.16em; text-transform:uppercase;
  color:#be6d47; margin:0 0 10px; padding-left:2px;
  display:flex; align-items:center; gap:9px;
}
.wc-toc-cat em{
  font-style:normal; font-size:10px;
  background:#be6d47; color:#fff;
  border-radius:9px; padding:2px 7px; letter-spacing:0;
}
.wc-toc-cat::after{content:""; flex:1; height:1px; background:rgba(190,109,71,.22)}
.wc-toc{
  list-style:none; margin:0; padding:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.07);
  border-radius:3px;
  animation:wcTocIn .22s ease both;
}
@keyframes wcTocIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)}}
.wc-toc li{border-top:1px solid rgba(0,0,0,.06)}
.wc-toc li:first-child{border-top:0}
.wc-toc a{
  display:flex; align-items:center; gap:16px;
  padding:15px 18px;
  text-decoration:none;
  color:var(--blg-ink, #17201d);
  transition:background .16s ease, padding-left .16s ease;
}
.wc-toc a:hover{background:#faf6f1; padding-left:24px}
.wc-toc-no{
  flex:0 0 auto;
  font:700 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#be6d47;
}
.wc-toc-body{display:flex; flex-direction:column; gap:4px; flex:1 1 auto}
.wc-toc-body b{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400; font-size:16.5px; line-height:1.4; letter-spacing:-.01em;
}
.wc-toc-body small{
  font:650 9.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.13em; text-transform:uppercase; color:#8a9490;
}
.wc-toc-arrow{
  flex:0 0 auto; color:#c9b8ae; font-size:20px; line-height:1;
  transition:transform .16s ease, color .16s ease;
}
.wc-toc a:hover .wc-toc-arrow{transform:translateX(3px); color:#be6d47}
body.lang-ar .wc-toc-body b{line-height:1.7}
body.lang-ar .wc-toc a{flex-direction:row-reverse; text-align:right}
@media(max-width:640px){
  .wc-toc-sec{padding:28px 0 32px}
  .wc-toc-summary{padding:15px 16px; gap:11px}
  .wc-toc-label{font-size:14px}
  .wc-toc-body b{font-size:15.5px}
  .wc-toc a{padding:13px 14px; gap:12px}
}