/* ===================================================================
   AUDACITY REVIEW —— 左翼翻译与评论刊物
   Caslon 衬线字标 · 加宽版心 · 3 栏卡片 · 左右两栏文章页
   =================================================================== */

:root {
  /* —— 色彩 —— */
  --paper:        #fbf8f3;   /* 米白纸底 */
  --paper-edge:   #efe8da;   /* 纸边阴影 */
  --paper-tint:   #f5efe2;   /* 侧栏底色 */
  --ink:          #1c1814;   /* 墨色正文 */
  --ink-soft:     #58503f;   /* 次级文字 */
  --ink-faint:    #9a9080;   /* 最弱文字 */
  --red:          #8b1a1a;   /* 期刊红 */
  --red-deep:     #6e1313;
  --rule:         #d4c9b0;   /* 分隔线 */

  /* —— 字体 ——
     Caslon 不在 Google Fonts，用最接近的 EB Garamond 承载 logo 与拉丁；
     Spectral 做英文正文副选；中文用 Noto Serif SC。 */
  --caslon:  'EB Garamond', 'Libre Caslon Text', 'Adobe Caslon Pro', Georgia, serif;
  --serif:   'Noto Serif SC', 'EB Garamond', 'Songti SC', 'STSong', '宋体', serif;
  --latin:   'EB Garamond', Georgia, serif;
  --mono:    'JetBrains Mono', 'Courier New', monospace;

  /* —— 布局 —— */
  --page-width:  1400px;          /* 加宽带宽，容纳 3 栏 */
  --gutter:      clamp(1.25rem, 3vw, 2.5rem);
  --measure:     42rem;           /* 正文理想行长 */
}

/* ===================================================================
   重置与基础
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  background-image:
    radial-gradient(circle at 15% 8%, rgba(139,26,26,0.018), transparent 35%),
    radial-gradient(circle at 85% 85%, rgba(28,24,20,0.02), transparent 45%);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(16px, 0.85vw + 13.5px, 18px);
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--red); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--red-deep); }
img { max-width: 100%; height: auto; display: block; }

/* ===================================================================
   报头 Masthead —— AUDACITY REVIEW 纯字标
   =================================================================== */
.masthead {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}
.masthead__rule {
  border: 0;
  border-top: 3px double var(--ink);    /* 报头双线 */
  margin: 0 auto;
  max-width: var(--page-width);
  width: calc(100% - var(--gutter) * 2);
}

.masthead__inner { padding: clamp(1rem, 2.5vw, 1.75rem) 0 0.5rem; }

/* —— LOGO 纯字标 —— */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.9;
  color: var(--ink);
}
.logo:hover { text-decoration: none; color: var(--ink); }
.logo__word {
  font-family: var(--caslon);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: 0.18em;             /* 字间距开大，庄重 */
  text-indent: 0.18em;                /* 补偿字间距导致的视觉左偏 */
  display: block;
}
/* 第二行 REVIEW 稍小、更紧凑，形成层级 */
.logo__word + .logo__word {
  font-size: clamp(1.4rem, 4vw, 2.5rem);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  margin-top: 0.15em;
  font-weight: 400;
}

/* —— 导航 —— */
.masthead__nav {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(0.75rem, 2vw, 1.25rem) 0;
  max-width: var(--page-width);
  margin: 0 auto;
  border-bottom: 1px solid var(--rule);
  font-family: var(--caslon);
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.masthead__nav a {
  color: var(--ink-soft);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.masthead__nav a:hover { color: var(--red); border-bottom-color: var(--red); }
.masthead__nav a.is-active { color: var(--red); border-bottom-color: var(--red); }

/* ===================================================================
   主版面（加宽）
   =================================================================== */
.page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) 4rem;
}

/* —— 日期行 / 刊语 —— */
.dateline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--caslon);
  font-style: italic;
  color: var(--ink-faint);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.dateline__issue { color: var(--red); letter-spacing: 0.1em; font-style: normal; }

/* ===================================================================
   首页：3 栏卡片网格
   =================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

.card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  animation: rise .55s ease both;
  animation-delay: calc(var(--i, 0) * 70ms);
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}
.card__media {
  display: block;
  overflow: hidden;
  margin-bottom: 1rem;
}
.card__img {
  width: 100%;
  aspect-ratio: 4 / 3;           /* 4:3 头图 */
  object-fit: cover;
  background: var(--paper-edge);
  filter: sepia(0.06) contrast(1.02);
  transition: filter .4s ease, transform .5s ease;
}
.card__media:hover .card__img { filter: sepia(0.01) contrast(1.05); transform: scale(1.035); }

.card__img--placeholder {
  display: grid; place-items: center;
  font-family: var(--caslon);
  font-style: italic;
  font-weight: 600;
  color: var(--red);
  opacity: 0.3;
  font-size: 2.5rem;
  background: var(--paper-edge);
  letter-spacing: 0.1em;
}

.card__body { display: flex; flex-direction: column; flex: 1; }
.card__type {
  font-family: var(--caslon);
  font-style: italic;
  color: var(--red);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin: 0 0 0.4rem;
}
.card__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.4;
  margin: 0 0 0.35rem;
  letter-spacing: 0.01em;
}
.card__title a { color: var(--ink); }
.card__title a:hover { color: var(--red); }

.card__author {
  font-family: var(--caslon);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
}
.card__excerpt {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0 0 0.85rem;
  flex: 1;                        /* 让顶部对齐：摘要撑开，foot 钉底 */
}
.card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink-faint);
  font-family: var(--caslon);
  font-size: 0.82rem;
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px dotted var(--rule);
  gap: 0.5rem;
}
.readmore {
  font-family: var(--caslon);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* ===================================================================
   文章详情页：左主体 + 右侧栏
   =================================================================== */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;   /* 左大右小 */
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.article { min-width: 0; }

.article__type {
  font-family: var(--caslon);
  font-style: italic;
  color: var(--red);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.82rem;
  margin: 0 0 0.75rem;
}
.article__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.35;
  margin: 0 0 0.6rem;
  letter-spacing: 0.01em;
}
.article__author {
  font-family: var(--caslon);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 0 0 0.3rem;
}
.article__date {
  color: var(--ink-faint);
  font-family: var(--caslon);
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}
.article__source {
  font-family: var(--caslon);
  font-style: italic;
  color: var(--ink-faint);
  font-size: 0.85rem;
  margin: 0 0 1rem;
  word-break: break-all;
}
.article__rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 2rem;
}

/* —— 正文：头图浮动在右上角 —— */
.article__content {
  font-size: 1.05rem;
  line-height: 2.05;
}
.article__content > p:first-of-type img,
.article__content > img:first-child,
.article__content .lead-img {
  float: right;
  width: 40%;
  max-width: 18rem;
  margin: 0 0 1.2rem 1.5rem;
  border: 1px solid var(--rule);
}

.article__content > p {
  margin: 0 0 1.4em;
  text-align: justify;
  text-justify: inter-character;
}
.article__content h2,
.article__content h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.4;
  margin: 2em 0 0.8em;
  clear: right;                       /* 标题避开浮动图 */
}
.article__content h2 { font-size: 1.4rem; padding-bottom: 0.3em; border-bottom: 1px solid var(--rule); }
.article__content h3 { font-size: 1.15rem; }
.article__content a { border-bottom: 1px solid currentColor; }

.article__content blockquote {
  margin: 1.8em 0;
  padding: 0.5em 0 0.5em 1.5em;
  border-left: 3px solid var(--red);
  color: var(--ink-soft);
  font-style: italic;
}
.article__content blockquote p { margin: 0.5em 0; }

.article__content ul,
.article__content ol { margin: 0 0 1.4em; padding-left: 1.5em; }
.article__content li { margin: 0.3em 0; }

/* —— 表格（GFM）—— */
.article__content .md-table,
.md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: 0.92rem;
  line-height: 1.6;
}
.md-table th,
.md-table td {
  border: 1px solid var(--rule);
  padding: 0.5em 0.85em;
  text-align: left;
  vertical-align: top;
}
.md-table thead th {
  background: var(--paper-tint);
  font-weight: 700;
  border-bottom: 2px solid var(--ink);
}
.md-table tbody tr:nth-child(even) td {
  background: rgba(239, 232, 218, 0.35);
}

.article__content img { margin: 1.8em auto; border: 1px solid var(--rule); }
.article__content pre {
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  padding: 1em 1.25em;
  overflow-x: auto;
  margin: 1.5em 0;
  font-size: 0.9em;
}
.article__content code { font-family: var(--mono); font-size: 0.9em; background: var(--paper-edge); padding: 0.1em 0.35em; }
.article__content pre code { background: none; padding: 0; }
.article__content hr { border: 0; text-align: center; margin: 2.5em 0; clear: both; }
.article__content hr::after { content: '❧'; color: var(--red); font-size: 1.2em; }

/* 文章底部 tags（带分隔线） */
.article__tags { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); display: flex; gap: 0.5rem; flex-wrap: wrap; clear: both; }
/* 文章顶部 tags（标题上方，无分隔线） */
.article__tags--top { margin: 0 0 0.75rem; padding: 0; border: 0; }

/* 卡片上的 tags */
.card__tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.5rem; }

.tag {
  font-family: var(--caslon);
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: var(--paper-edge);
  padding: 0.15em 0.65em;
  letter-spacing: 0.05em;
  border: 0;
  display: inline-block;
  transition: background .15s ease, color .15s ease;
}
.tag:hover { color: var(--red); background: var(--paper-tint); text-decoration: none; }

.article__back {
  text-align: center;
  margin-top: 3rem;
  font-family: var(--caslon);
  font-style: italic;
  letter-spacing: 0.1em;
  clear: both;
}

/* —— 关于页（单栏居中）—— */
.article--single { max-width: var(--measure); margin: 0 auto; }

/* ===================================================================
   侧栏 Sidebar
   =================================================================== */
.sidebar {
  position: sticky;
  top: 1.5rem;
  font-size: 0.92rem;
}
.sidebar__block {
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  padding: 1.25rem 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.sidebar__block:first-child { border-top: 3px solid var(--ink); }

.sidebar__head {
  font-family: var(--caslon);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.related { list-style: none; margin: 0; padding: 0; }
.related__item { padding: 0.6rem 0; border-bottom: 1px dotted var(--rule); }
.related__item:last-child { border-bottom: 0; }
.related__item a { display: flex; flex-direction: column; gap: 0.2rem; color: var(--ink); }
.related__item a:hover { text-decoration: none; }
.related__item a:hover .related__title { color: var(--red); }
.related__title { font-weight: 600; font-size: 0.92rem; line-height: 1.4; }
.related__meta { font-family: var(--caslon); font-style: italic; color: var(--ink-faint); font-size: 0.78rem; }

.sidebar__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sidebar__about .sidebar__text { color: var(--ink-soft); font-size: 0.85rem; line-height: 1.75; margin: 0; }

/* ===================================================================
   页脚 Colophon
   =================================================================== */
.colophon { text-align: center; padding: 0 var(--gutter) 3rem; }
.colophon__rule { border: 0; border-top: 1px solid var(--rule); margin: 0 auto 2rem; max-width: 32rem; }
.colophon__inner { max-width: 32rem; margin: 0 auto; }
.colophon__title {
  font-family: var(--caslon);
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--red);
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.colophon__text { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.8; margin: 0 0 1rem; }
.colophon__meta { font-family: var(--caslon); font-style: italic; color: var(--ink-faint); font-size: 0.8rem; letter-spacing: 0.08em; margin: 0; }

/* ===================================================================
   动效
   =================================================================== */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.empty { color: var(--ink-faint); font-style: italic; text-align: center; padding: 3rem 0; }

/* ===================================================================
   响应式
   =================================================================== */
@media (max-width: 64rem) {
  .grid { grid-template-columns: repeat(2, 1fr); }   /* 平板 2 栏 */
}
@media (max-width: 52rem) {
  .article-layout { grid-template-columns: 1fr; }      /* 文章页转单栏，侧栏下移 */
  .sidebar { position: static; }
  .article__content > p:first-of-type img,
  .article__content > img:first-child,
  .article__content .lead-img {
    float: none; width: 100%; max-width: none; margin: 0 0 1.5rem;
  }
}
@media (max-width: 40rem) {
  body { font-size: 16px; }
  .grid { grid-template-columns: 1fr; }               /* 手机 1 栏 */
  .masthead__nav { gap: 1.25rem; font-size: 0.85rem; }
  .article__content > p { text-align: left; }
}

@media print {
  body { background: #fff; font-size: 11pt; }
  .masthead__nav, .colophon, .article__back, .sidebar { display: none; }
  a { color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}