/* CIE 深度阅读 · 长文报道共享样式 */

:root {
  /* 系统字体栈 —— 零外部请求。Apple 走 Songti，Windows 走 SimSun，Android 走系统 */
  --font-serif: 'Songti SC', STSong, 'Source Han Serif SC', 'Source Han Serif CN', 'Noto Serif CJK SC', SimSun, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', serif;
  --font-sans:  'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Source Han Sans CN', 'Noto Sans CJK SC', sans-serif;
  --font-mono:  Consolas, Menlo, 'SF Mono', 'JetBrains Mono', 'Courier New', monospace;
  --font-display: 'GT Sectra Display', GTSectraDisplay, 'Songti SC', 'STSong', 'Times New Roman', serif;
}

/* Hero */
.article-hero { min-height: 88vh; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 80px 56px 60px; position: relative; }
.article-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.92) 100%); z-index: 1; }
.article-hero .inner { position: relative; z-index: 2; max-width: 900px; }
.article-hero .issue { font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.28em; color: #C8841F; margin-bottom: 18px; font-weight: 600; }
.article-hero .kicker { font-family: var(--font-serif); font-size: 14px; letter-spacing: 0.22em; color: #FAFAF7; opacity: 0.85; margin-bottom: 22px; }
.article-hero h1 { font-family: var(--font-serif); font-weight: 700; font-size: 64px; line-height: 1.18; letter-spacing: 0.01em; color: #FAFAF7; margin-bottom: 26px; }
.article-hero .deck { font-family: var(--font-serif); font-size: 22px; line-height: 1.6; color: rgba(255,255,255,0.85); max-width: 760px; margin-bottom: 36px; }

/* Byline */
.article-byline { background: #0d0d0d; padding: 28px 56px; border-bottom: 1px solid #1a1a1a; }
.byline-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.byline-authors { font-family: var(--font-serif); font-size: 14px; line-height: 1.85; color: rgba(255,255,255,0.78); }
.byline-authors .name { font-weight: 700; color: #FAFAF7; }
.byline-authors .role { color: #888; font-size: 12px; letter-spacing: 0.08em; }
.byline-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: #666; text-align: right; line-height: 2; }
.byline-meta .high { color: #C8841F; }

/* Article body */
.article-body { padding: 90px 56px 60px; max-width: 760px; margin: 0 auto; }
.article-body .lead { font-family: var(--font-serif); font-size: 22px; line-height: 1.85; color: #FAFAF7; margin-bottom: 50px; letter-spacing: 0.005em; font-weight: 500; }
.article-body .lead::first-letter { float: left; font-family: var(--font-serif); font-weight: 700; font-size: 78px; line-height: 0.85; padding: 6px 14px 0 0; color: #C8841F; }
.article-body p { font-family: var(--font-serif); font-size: 17px; line-height: 2.05; color: rgba(255,255,255,0.86); margin-bottom: 22px; letter-spacing: 0.005em; }
.article-body p strong { color: #FAFAF7; font-weight: 600; }
.article-body p em { font-style: normal; color: #C8841F; }
.article-body h2 { font-family: var(--font-serif); font-weight: 700; font-size: 30px; line-height: 1.4; margin: 60px 0 28px; letter-spacing: 0.01em; color: #FAFAF7; }
.article-body h2::before { content: '— '; color: #C8841F; }
.article-body h2::after { content: ' —'; color: #C8841F; }
.article-body h2.numbered { font-size: 14px; font-weight: 600; letter-spacing: 0.24em; color: #C8841F; margin: 70px 0 20px; text-align: center; }
.article-body h2.numbered::before, .article-body h2.numbered::after { content: ''; }
.article-body h3 { font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 1.5; margin: 40px 0 18px; color: #FAFAF7; }

/* Pull quote */
.article-body .pullquote { margin: 50px -40px; padding: 38px 40px; border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; }
.article-body .pullquote .q { font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 1.6; color: #FAFAF7; margin-bottom: 18px; letter-spacing: 0.01em; }
.article-body .pullquote .src { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.16em; color: #C8841F; font-weight: 600; }

/* Figure / Image */
.article-figure { margin: 50px 0; }
.article-figure.bleed { margin-left: -180px; margin-right: -180px; }
.article-figure .img { background-size: cover; background-position: center; aspect-ratio: 3 / 2; }
.article-figure .img.tall { aspect-ratio: 3 / 4; }
.article-figure figcaption { font-family: var(--font-serif); font-size: 13px; line-height: 1.85; color: #888; margin-top: 14px; letter-spacing: 0.04em; }
.article-figure figcaption strong { color: #C8841F; font-weight: 600; margin-right: 8px; }

/* Inline note */
.article-body .note { background: #1a1815; border-left: 3px solid #C8841F; padding: 24px 28px; margin: 32px 0; }
.article-body .note .label { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.22em; color: #C8841F; font-weight: 600; margin-bottom: 10px; }
.article-body .note p { font-size: 15px; margin-bottom: 12px; color: rgba(255,255,255,0.8); }
.article-body .note p:last-child { margin-bottom: 0; }

/* Data block */
.article-body .data-block { background: #1a1a1a; padding: 32px 36px; margin: 40px 0; border: 1px solid #2a2a2a; }
.article-body .data-block .data-title { font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.22em; color: #C8841F; font-weight: 600; margin-bottom: 18px; }
.article-body .data-block dl { display: grid; grid-template-columns: 160px 1fr; gap: 12px 24px; font-family: var(--font-serif); }
.article-body .data-block dt { font-size: 13px; color: #888; letter-spacing: 0.06em; }
.article-body .data-block dd { font-size: 14px; color: #FAFAF7; }

/* Section divider */
.article-divider { text-align: center; margin: 60px 0; color: #C8841F; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.5em; }

/* Footer block: references & related */
.article-footer { background: #0d0d0d; padding: 80px 56px; border-top: 1px solid #1a1a1a; }
.footer-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.footer-block h4 { font-family: var(--font-serif); font-weight: 700; font-size: 14px; letter-spacing: 0.2em; color: #C8841F; margin-bottom: 22px; }
.footer-block p, .footer-block li { font-family: var(--font-serif); font-size: 13px; line-height: 1.95; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.footer-block ul { list-style: none; padding: 0; }
.footer-block li::before { content: '· '; color: #C8841F; }

/* Related articles */
.related-section { padding: 80px 56px; background: #1a1815; border-top: 1px solid #2a2620; }
.related-container { max-width: 1180px; margin: 0 auto; }
.related-section .eyebrow { font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.22em; color: #C8841F; margin-bottom: 14px; font-weight: 600; text-align: center; }
.related-section h2 { font-family: var(--font-serif); font-weight: 700; font-size: 28px; text-align: center; margin-bottom: 50px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.related-card { display: block; cursor: pointer; }
.related-card .img { aspect-ratio: 4 / 3; background-size: cover; background-position: center; margin-bottom: 16px; filter: grayscale(0.1); transition: filter 0.3s; }
.related-card:hover .img { filter: grayscale(0); }
.related-card .tag { font-family: var(--font-serif); font-size: 11px; letter-spacing: 0.2em; color: #C8841F; margin-bottom: 8px; font-weight: 600; }
.related-card h4 { font-family: var(--font-serif); font-weight: 700; font-size: 18px; line-height: 1.4; margin-bottom: 8px; }
.related-card .meta { font-family: var(--font-serif); font-size: 12px; color: #666; letter-spacing: 0.06em; }

/* ========== 极地编辑学派 · 新增编辑元素 ========== */

/* Epigraph · 题词 · 文章开蒙的引语 */
.article-epigraph { background: #0d0d0d; padding: 80px 56px; border-bottom: 1px solid #1a1a1a; }
.epigraph-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.epigraph-inner .mark { font-family: 'GT Sectra Display', var(--font-serif); font-size: 64px; line-height: 1; color: #C8841F; opacity: 0.4; margin-bottom: 20px; font-weight: 400; }
.epigraph-foreign { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.7; color: rgba(255,255,255,0.9); margin-bottom: 24px; letter-spacing: 0.01em; }
.epigraph-chinese { font-family: var(--font-serif); font-weight: 400; font-size: 18px; line-height: 1.95; color: rgba(255,255,255,0.78); margin-bottom: 28px; letter-spacing: 0.02em; }
.epigraph-source { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.22em; color: #888; font-weight: 600; }

/* Etymology · 地名学溯源 */
.etymology-block { background: #1a1815; border-left: 2px solid #C8841F; padding: 32px 36px 28px; margin: 40px 0; }
.etymology-block .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em; color: #C8841F; font-weight: 600; margin-bottom: 18px; text-transform: uppercase; }
.etymology-block .term-row { display: grid; grid-template-columns: 140px 1fr; gap: 18px 24px; margin-bottom: 14px; align-items: baseline; }
.etymology-block .term { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 18px; color: #FAFAF7; line-height: 1.5; }
.etymology-block .term-cn { font-family: var(--font-serif); font-weight: 700; font-size: 16px; color: #C8841F; }
.etymology-block .gloss { font-family: var(--font-serif); font-size: 14px; line-height: 1.95; color: rgba(255,255,255,0.78); }
.etymology-block .gloss strong { color: #FAFAF7; font-weight: 600; }

/* Deep time · 深时插入 · 把当下放进百万年尺度 */
.deeptime-block { margin: 60px -40px; padding: 50px 40px; background: linear-gradient(180deg, transparent, #14110d 30%, #14110d 70%, transparent); position: relative; }
.deeptime-block .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em; color: #C8841F; font-weight: 600; margin-bottom: 28px; text-align: center; }
.deeptime-block ol { list-style: none; padding: 0; margin: 0; counter-reset: time; }
.deeptime-block li { position: relative; padding: 14px 0 14px 90px; border-bottom: 1px dashed rgba(200,132,31,0.15); font-family: var(--font-serif); font-size: 15px; line-height: 1.85; color: rgba(255,255,255,0.82); }
.deeptime-block li:last-child { border-bottom: none; }
.deeptime-block li .when { position: absolute; left: 0; top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: #C8841F; font-weight: 600; width: 80px; text-align: right; }
.deeptime-block li strong { color: #FAFAF7; font-weight: 600; }

/* Sidenote · 边栏注释（桌面端右侧浮出） */
.sidenote-wrap { position: relative; }
.sidenote { position: absolute; right: -300px; top: 0; width: 260px; font-family: var(--font-serif); font-size: 13px; line-height: 1.85; color: rgba(255,255,255,0.62); padding-left: 16px; border-left: 1px solid #2a2620; letter-spacing: 0.02em; }
.sidenote .marker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: #C8841F; font-weight: 600; display: block; margin-bottom: 6px; }
.sidenote em { color: #C8841F; font-style: normal; }

/* Indigenous · 原住民语原词内联标注 */
.indigenous { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: #FAFAF7; }
.gloss-bracket { font-family: var(--font-mono); font-style: normal; font-size: 12px; color: #888; letter-spacing: 0.04em; }

/* Section interlude · 章节小间隔 */
.interlude { text-align: center; margin: 70px 0 40px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.5em; color: #C8841F; opacity: 0.55; }

/* Open ending · 开放式收尾 */
.article-end { padding: 60px 0 100px; }
.article-end p { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.85; color: #FAFAF7; max-width: 580px; margin: 0 auto; letter-spacing: 0.005em; text-align: center; }
.article-end .signoff { display: block; text-align: center; margin-top: 60px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em; color: #666; }

/* Issue navigation · 翻杂志（上一篇/本期目录/下一篇） */
.issue-nav { background: #1a1815; border-top: 1px solid #2a2620; border-bottom: 1px solid #2a2620; padding: 70px 56px; }
.issue-nav-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; gap: 48px; align-items: center; }
.issue-nav .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; color: rgba(200,132,31,0.85); margin-bottom: 10px; font-weight: 600; }
.issue-nav a { text-decoration: none; color: inherit; transition: opacity 0.2s; display: block; }
.issue-nav a:hover { opacity: 0.72; }
.issue-nav a:hover .title-link { color: #C8841F; }
.issue-nav .title-link { font-family: var(--font-serif); font-weight: 700; font-size: 18px; line-height: 1.45; color: #FAFAF7; transition: color 0.2s; }
.issue-nav .prev .title-link::before { content: '← '; color: #C8841F; }
.issue-nav .next { text-align: right; }
.issue-nav .next .title-link::after { content: ' →'; color: #C8841F; }
.issue-nav .center { text-align: center; }
.issue-nav .center a { padding: 14px 28px; border: 1px solid #C8841F; color: #C8841F; font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.22em; font-weight: 600; display: inline-block; }
.issue-nav .center a:hover { background: #C8841F; color: #0A0A0A; opacity: 1; }
.issue-nav .empty { color: rgba(255,255,255,0.3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; }
.issue-nav .empty .title-link { color: rgba(255,255,255,0.3); font-weight: 400; font-size: 14px; }

/* Language toggle in article nav */
.lang-toggle-art { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; color: rgba(255,255,255,0.6); padding: 7px 12px; border: 1px solid rgba(255,255,255,0.2); margin-right: 12px; transition: color 0.2s, border-color 0.2s; }
.lang-toggle-art:hover { color: #C8841F; border-color: #C8841F; }

/* Caption labels · 图说强化 */
.caption-line { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: #888; margin-top: 12px; padding-top: 12px; border-top: 1px solid #2a2a2a; }
.caption-line span { color: #C8841F; }

/* Lead refinement · 更慢的开篇 */
.article-body .lead-quiet { font-family: var(--font-serif); font-size: 19px; line-height: 2.1; color: rgba(255,255,255,0.86); margin-bottom: 40px; letter-spacing: 0.008em; font-weight: 400; }
.article-body .lead-quiet:first-of-type { margin-top: 0; }
.article-body .lead-quiet em { color: #FAFAF7; font-style: italic; font-weight: 500; }

@media (max-width: 1024px) {
  .article-hero h1 { font-size: 40px; }
  .article-hero .deck { font-size: 18px; }
  .article-body { padding: 60px 28px 40px; }
  .article-body h2 { font-size: 24px; }
  .article-body .lead { font-size: 19px; }
  .article-body .pullquote { margin: 40px 0; padding: 28px 0; }
  .article-body .pullquote .q { font-size: 21px; }
  .article-figure.bleed { margin-left: 0; margin-right: 0; }
  .byline-inner { grid-template-columns: 1fr; gap: 16px; }
  .byline-meta { text-align: left; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .related-grid { grid-template-columns: 1fr; }
  .sidenote { position: static; right: auto; top: auto; width: auto; margin: 24px 0; padding: 16px 0 0 16px; border-left: 2px solid #C8841F; }
  .etymology-block .term-row { grid-template-columns: 1fr; gap: 6px; }
  .deeptime-block { margin: 40px 0; padding: 32px 24px; }
  .deeptime-block li { padding-left: 70px; }
  .deeptime-block li .when { width: 60px; font-size: 11px; }
  .article-epigraph { padding: 50px 28px; }
  .epigraph-foreign { font-size: 18px; }
  .article-end p { font-size: 18px; }
  .issue-nav { padding: 50px 28px; }
  .issue-nav-inner { grid-template-columns: 1fr; gap: 32px; }
  .issue-nav .next { text-align: left; }
  .issue-nav .next .title-link::after { content: ' →'; }
  .issue-nav .center { order: -1; }
}