/* ============================================================
   essay.css — 散文模块：宣纸质感 + 衬线排版 + 首字下沉
   ============================================================ */

.essay-stage { padding: 26px 0 40px; }

.essay-sheet {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  background: #f8f4e9;
  border: 1px solid #e6dcc3;
  border-radius: 4px;
  padding: clamp(28px, 5vw, 58px) clamp(22px, 5vw, 56px);
  box-shadow: 0 1px 2px rgba(120, 100, 60, .08),
              0 18px 44px -18px rgba(120, 100, 60, .28);
  overflow: hidden;
}
/* 纸纹噪点 */
.essay-sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .05;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 旧纸边缘暗角 */
.essay-sheet::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(120, 90, 40, .1) 100%);
}
.essay-sheet > * { position: relative; z-index: 1; }

/* 页眉装饰：居中菱形分隔 */
.essay-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 26px;
  color: #a5946f;
}
.essay-ornament::before, .essay-ornament::after {
  content: '';
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #cdbf9d);
}
.essay-ornament::after { background: linear-gradient(90deg, #cdbf9d, transparent); }
.essay-ornament .diamond {
  width: 8px; height: 8px;
  border: 1px solid #a5946f;
  transform: rotate(45deg);
}

.essay-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  text-align: center;
  color: #3a332a;
  letter-spacing: .06em;
  line-height: 1.5;
  margin-bottom: 10px;
}
.essay-meta {
  text-align: center;
  font-family: var(--font-serif);
  color: #a5946f;
  font-size: 13.5px;
  letter-spacing: .18em;
  margin-bottom: 34px;
}

/* 正文：衬线 + 1.9 行距 + 段首缩进 */
.essay-body {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.95;
  letter-spacing: .05em;
  color: #453e33;
  max-width: 40em;
  margin: 0 auto;
  text-align: justify;
}
.essay-body p { margin: 0 0 1em; text-indent: 2em; }
.essay-body h1, .essay-body h2, .essay-body h3 {
  font-weight: 700;
  color: #3a332a;
  margin: 1.8em 0 .8em;
  text-align: center;
  text-indent: 0;
}
.essay-body h2 { font-size: 21px; letter-spacing: .12em; }
.essay-body h3 { font-size: 18px; letter-spacing: .1em; }
.essay-body img { margin: 1.2em auto; border-radius: 3px; box-shadow: 0 8px 22px rgba(120, 100, 60, .22); }
.essay-body blockquote {
  margin: 1.2em 2em;
  padding: .6em 1.2em;
  border-left: 3px solid #c9b98d;
  color: #7a6f5c;
  text-indent: 0;
  background: rgba(201, 185, 141, .1);
}
.essay-body blockquote p { text-indent: 0; }
.essay-body code { font-family: var(--font-mono); font-size: .85em; background: rgba(180, 160, 110, .18); padding: .1em .4em; border-radius: 3px; }
.essay-body pre { background: #3a352c; color: #ece5d3; padding: 14px 16px; border-radius: 6px; overflow-x: auto; font-size: 13px; }
.essay-body a { color: #8c6b2f; text-decoration: underline; text-underline-offset: 3px; }
.essay-body ul, .essay-body ol { padding-left: 1.8em; margin-bottom: 1em; }
.essay-body li { margin-bottom: .4em; text-indent: 0; }
.essay-body hr { border: none; text-align: center; margin: 2em 0; }
.essay-body hr::after { content: '❖'; color: #b3a47e; font-size: 14px; }

/* 首字下沉（首段以汉字开头时才优雅） */
.essay-body > p:first-of-type::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: 1;
  padding: .06em .12em 0 0;
  font-weight: 600;
  color: #3a332a;
}
@supports (initial-letter: 3) {
  .essay-body > p:first-of-type::first-letter {
    float: none;
    font-size: inherit;
    padding: 0;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}

/* 结尾落款 */
.essay-end {
  margin-top: 40px;
  text-align: center;
  font-family: var(--font-serif);
  color: #a5946f;
  letter-spacing: .4em;
  text-indent: .4em;
  font-size: 13px;
}
