/* ========================================
   Tianwen · Essays — English stylesheet
   ======================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Crimson Pro", "Source Serif Pro", "Charter", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.75;
  color: #2c2c2c;
  background: #fdfdf8;
  min-height: 100vh;
}

/* ---- Navigation ---- */
.site-nav {
  text-align: center;
  padding: 14px 20px;
  font-size: 0.9em;
  border-bottom: 1px solid #e8e4dd;
}
.site-nav a {
  color: #888;
  text-decoration: none;
  margin: 0 12px;
  transition: color 0.2s;
}
.site-nav a:hover { color: #2c2c2c; }
.site-nav a.active { color: #2c2c2c; font-weight: 600; }

/* ---- Container ---- */
.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 36px 20px 60px;
}

/* ---- Back link ---- */
.back-link {
  display: inline-block;
  margin-bottom: 28px;
  color: #a93226;
  text-decoration: none;
  font-size: 0.92em;
  transition: color 0.2s;
}
.back-link:hover { color: #c0392b; }

/* ---- Article header ---- */
header {
  text-align: center;
  padding: 36px 0;
  border-bottom: 2px solid #a93226;
  margin-bottom: 40px;
}
.essay-number {
  font-size: 3.2em;
  font-weight: 700;
  color: #a93226;
  opacity: 0.25;
  line-height: 1;
  margin-bottom: 8px;
}
.subtitle {
  color: #888;
  margin-top: 8px;
  font-size: 0.95em;
}

/* ---- Body content ---- */
.content { margin-bottom: 40px; }

/* h1: article title, centred */
.content h1 {
  font-size: 1.75em;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin: 36px 0 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid #2c2c2c;
  letter-spacing: 1px;
}

/* h2: top-level heading, left-rule decoration */
.content h2 {
  font-size: 1.3em;
  font-weight: 700;
  color: #1a1a1a;
  margin: 36px 0 14px;
  padding-left: 12px;
  border-left: 4px solid #a93226;
}

/* h3: second-level heading */
.content h3 {
  font-size: 1.1em;
  font-weight: 600;
  color: #333;
  margin: 28px 0 12px;
}

/* paragraphs */
.content p {
  margin-bottom: 18px;
  text-align: justify;
}

/* bold */
.content strong { color: #1a1a1a; font-weight: 700; }

/* blockquotes */
.content blockquote {
  margin: 22px 0;
  padding: 14px 20px;
  background: #f4f3ef;
  border-left: 3px solid #b0a590;
  color: #555;
  font-size: 0.95em;
  line-height: 1.8;
}
.content blockquote p { margin-bottom: 10px; }
.content blockquote p:last-child { margin-bottom: 0; }

/* tables */
.content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.9em;
}
.content th, .content td {
  padding: 8px 10px;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
}
.content thead td {
  background: #f4f3ef;
  font-weight: 600;
  color: #1a1a1a;
}

/* lists */
.content ul, .content ol {
  margin: 16px 0;
  padding-left: 2em;
}
.content li { margin-bottom: 8px; }

/* horizontal rule */
.content hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 36px 0;
}

/* footnotes / small print */
.footnote {
  font-size: 0.85em;
  color: #999;
  border-top: 1px solid #e8e4dd;
  margin-top: 48px;
  padding-top: 16px;
}

/* ---- Footer ---- */
footer {
  text-align: center;
  padding: 48px 0 36px;
  color: #999;
  font-size: 0.85em;
  border-top: 1px solid #e8e4dd;
  margin-top: 48px;
}

/* ---- Responsive ---- */
@media screen and (max-width: 480px) {
  body { font-size: 15px; }
  .container { padding: 20px 14px 40px; }
  .content h1 { font-size: 1.45em; }
  .content h2 { font-size: 1.15em; }
  .content h3 { font-size: 1.05em; }
  .essay-number { font-size: 2.6em; }

  /* tighter paragraph spacing on small screens */
  .content p { margin-bottom: 14px; }
}