/* ============================================================
   moon.css · 我本将心向明月 内页骨架：月光对照
   米白纸 + 墨蓝 + 旧金，居中月轮与横向对照
   ============================================================ */

.page-moon {
  --paper: #faf6ec;
  --ink: #1b2440;
  --ink-soft: #4d5670;
  --ink-faint: #8d93a6;
  --line: rgba(27, 36, 64, 0.13);
  --accent: #b8893c;
  --accent-ink: #faf6ec;
  --night: #151d33;
  --header-bg: rgba(250, 246, 236, 0.9);
  --header-fg: #1b2440;
  --header-line: rgba(27, 36, 64, 0.1);
  --tab-on: #1b2440;
  --tab-on-fg: #faf6ec;
  background: var(--paper);
}

/* hero */
.mo-hero { position: relative; padding: 54px 0 58px; overflow: hidden; border-bottom: 1px solid var(--line); }
.mo-moon {
  position: absolute;
  top: -90px;
  right: 6%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fff9e6, #f2dfae 58%, #e2c98d 100%);
  box-shadow: 0 0 90px 30px rgba(200, 164, 92, 0.25);
  pointer-events: none;
}
.mo-moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 66% 68%, rgba(120, 100, 60, 0.16), transparent 22%),
              radial-gradient(circle at 32% 62%, rgba(120, 100, 60, 0.1), transparent 16%);
}
.mo-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 44px;
  align-items: center;
}
.mo-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.mo-kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.mo-title {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.mo-title span { display: block; }
.mo-title .second { color: var(--accent); }
.mo-lead { max-width: 34em; margin-top: 18px; font-size: 15px; color: var(--ink-soft); line-height: 1.9; }
.mo-lead b { color: var(--ink); }
.mo-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.mo-actions .btn-primary { border-radius: 6px; }
.mo-actions .btn-room { border-radius: 6px; }
.mo-figure { position: relative; }
.mo-figure img { width: 100%; height: auto; }
.mo-verticalline {
  position: absolute;
  left: -22px;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}

/* section */
.mo-sec { padding: 72px 0; border-bottom: 1px solid var(--line); }
.mo-sec:last-of-type { border-bottom: 0; }
.mo-sec.night { background: var(--night); color: #e9e3d2; border-bottom: 0; }
.mo-sec.night .mo-k { color: #d9b877; }
.mo-sec.night h2 { color: #f4eee0; }
.mo-sec.night p { color: rgba(233, 227, 210, 0.72); }
.mo-k { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; color: var(--accent); }
.mo-sec h2 { font-family: var(--font-serif); font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.4; letter-spacing: 0.01em; }
.mo-sec > .container > p { max-width: 46em; margin-top: 10px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.9; }

/* verse block */
.mo-verse {
  margin-top: 30px;
  padding: 34px 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.mo-verse p {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.75;
  letter-spacing: 0.06em;
}
.mo-verse p + p { color: var(--accent); }
.mo-verse cite { display: block; margin-top: 14px; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--ink-faint); }

/* gloss */
.mo-gloss { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.mo-gloss article {
  padding: 26px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.45);
}
.mo-gloss article:nth-child(2) { background: var(--night); color: #e9e3d2; border-color: var(--night); }
.mo-gloss .line { font-family: var(--font-serif); font-size: 21px; letter-spacing: 0.04em; }
.mo-gloss h3 { margin-top: 14px; font-size: 14px; font-weight: 800; letter-spacing: 0.02em; }
.mo-gloss p { margin-top: 8px; font-size: 13.5px; line-height: 1.9; color: inherit; opacity: 0.82; }

/* contrast */
.mo-contrast { display: grid; grid-template-columns: 1fr 1fr; margin-top: 30px; border: 1px solid var(--line); }
.mo-contrast > div { padding: 30px; }
.mo-contrast > div:first-child { border-right: 1px solid var(--line); }
.mo-contrast h3 { font-family: var(--font-serif); font-size: 26px; font-weight: 700; }
.mo-contrast .moon h3 { color: var(--accent); }
.mo-contrast .ditch h3 { color: var(--ink-faint); }
.mo-contrast ul { margin-top: 16px; display: grid; gap: 12px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }
.mo-contrast li { padding-left: 16px; position: relative; }
.mo-contrast li::before { content: "·"; position: absolute; left: 0; opacity: 0.6; }

/* readings */
.mo-reads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.mo-read {
  padding: 26px 24px;
  border: 1px solid rgba(233, 227, 210, 0.18);
  background: rgba(233, 227, 210, 0.04);
}
.mo-read .no { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: #d9b877; }
.mo-read h3 { margin-top: 12px; font-size: 18px; font-weight: 700; color: #f4eee0; }
.mo-read p { margin-top: 8px; font-size: 13.5px; line-height: 1.9; color: rgba(233, 227, 210, 0.72); }

/* notes */
.mo-notes { margin-top: 30px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.mo-note { display: grid; grid-template-columns: 90px 90px 1fr; gap: 20px; padding: 18px 4px; border-bottom: 1px solid var(--line); align-items: baseline; }
.mo-note .w { font-family: var(--font-serif); font-size: 20px; font-weight: 700; }
.mo-note .pinyin { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-faint); }
.mo-note p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.85; }

/* rhythm */
.mo-rhythm { margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mo-beat { padding: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.5); }
.mo-beat b { display: block; font-family: var(--font-serif); font-size: 18px; }
.mo-beat span { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-faint); }

/* rewrite */
.mo-rewrite { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.mo-rewrite blockquote { margin: 0; padding: 26px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.45); }
.mo-rewrite blockquote + blockquote { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.mo-rewrite p { font-family: var(--font-serif); font-size: 19px; line-height: 1.8; }
.mo-rewrite cite { display: block; margin-top: 14px; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; opacity: 0.65; }

/* similar */
.mo-similar { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mo-similar > div { padding: 22px; border: 1px solid var(--line); }
.mo-similar b { display: block; font-family: var(--font-serif); font-size: 19px; }
.mo-similar span { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-soft); line-height: 1.8; }

/* scenes */
.mo-scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.mo-scene { padding: 24px; border: 1px solid var(--line); }
.mo-scene em { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--accent); }
.mo-scene h3 { margin-top: 10px; font-size: 16px; font-weight: 800; }
.mo-scene p { margin-top: 6px; font-size: 13px; color: var(--ink-soft); line-height: 1.85; }

/* site relation */
.mo-rel { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin-top: 30px; padding: 32px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.5); }
.mo-rel h3 { font-family: var(--font-serif); font-size: 22px; }
.mo-rel p { margin-top: 8px; font-size: 14px; color: var(--ink-soft); line-height: 1.9; }
.mo-room { font-family: var(--font-mono); font-size: clamp(30px, 4vw, 48px); letter-spacing: 0.06em; color: var(--accent); }

/* faq */
.mo-faq { margin-top: 26px; max-width: 900px; border-top: 1px solid var(--line); }

/* related */
.mo-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.mo-related a { padding: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.4); transition: border-color 0.2s, transform 0.2s; }
.mo-related a:hover { border-color: var(--accent); transform: translateY(-3px); }
.mo-related em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-faint); }
.mo-related b { display: block; margin-top: 6px; font-size: 15.5px; }
.mo-related span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-faint); }

/* cta */
.mo-cta { text-align: center; padding: 30px 0 0; }
.mo-cta h2 { font-family: var(--font-serif); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; }
.mo-cta p { margin: 8px auto 20px; max-width: 32em; font-size: 13.5px; color: var(--ink-soft); }
.mo-cta .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* responsive */
@media (max-width: 1080px) {
  .mo-hero-grid { grid-template-columns: 1fr; }
  .mo-moon { width: 260px; height: 260px; top: -70px; right: -40px; opacity: 0.75; }
  .mo-figure { max-width: 520px; }
  .mo-reads, .mo-scenes { grid-template-columns: 1fr 1fr; }
  .mo-rhythm { grid-template-columns: 1fr 1fr; }
  .mo-related { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .mo-hero { padding: 34px 0 38px; }
  .mo-sec { padding: 52px 0; }
  .mo-moon { width: 190px; height: 190px; top: -60px; right: -60px; opacity: 0.55; }
  .mo-gloss, .mo-contrast, .mo-rewrite, .mo-similar, .mo-reads, .mo-scenes { grid-template-columns: 1fr; }
  .mo-contrast > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .mo-note { grid-template-columns: 64px 1fr; }
  .mo-note .pinyin { display: none; }
  .mo-rhythm { grid-template-columns: 1fr; }
  .mo-rel { grid-template-columns: 1fr; }
  .mo-related { grid-template-columns: 1fr; }
}