/* 夜海日记 · 墨墨的散文小站
   宣纸底、墨色字、宋体标题；零框架、零 JS，手机竖版单列优先。 */

:root {
  --paper: #f8f3e7;
  --paper-deep: #f1e9d8;
  --ink: #2c2620;
  --ink-soft: #6f6353;
  --line: #ddd0b8;
  --seal: #9c3d2e;
  --sea: #33526b;
  --measure: 42rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", "Songti TC", SimSun, serif;
  font-size: 1.0625rem;
  line-height: 1.95;
  letter-spacing: 0.02em;
}

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3.5rem;
}

/* ---------- 站头 ---------- */
.masthead {
  text-align: center;
  padding: 1.5rem 0 2rem;
  border-bottom: 1px solid var(--line);
}
.masthead .site-name {
  margin: 0;
  font-size: clamp(2.1rem, 9vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em; /* 抵消末字间距，视觉居中 */
  line-height: 1.3;
  text-wrap: balance;
}
.masthead .site-name a { color: inherit; text-decoration: none; }
.masthead .tagline {
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
}
.masthead nav {
  margin-top: 1.2rem;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
}
.masthead nav a {
  color: var(--sea);
  text-decoration: none;
  margin: 0 0.9em;
}
.masthead nav a:hover { text-decoration: underline; }

/* 文章页的小站头 */
.masthead.small { padding: 0.8rem 0 1.4rem; }
.masthead.small .site-name { font-size: 1.5rem; }

/* ---------- 首页：最新一期 ---------- */
.latest { padding: 2.2rem 0 0.5rem; }
.kicker {
  color: var(--seal);
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  margin: 0 0 0.8rem;
}
.latest h2, article.post h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.55rem, 6.5vw, 2.05rem);
  font-weight: 600;
  line-height: 1.45;
  text-wrap: balance;
}
.latest h2 a { color: inherit; text-decoration: none; }
.meta {
  color: var(--ink-soft);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  margin: 0 0 1.2rem;
}
.meta .dot { margin: 0 0.55em; color: var(--line); }
.excerpt p { margin: 0 0 1em; text-align: justify; }
.readmore {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--sea);
  text-decoration: none;
  letter-spacing: 0.15em;
  border-bottom: 1px solid var(--sea);
  padding-bottom: 0.1em;
}

/* ---------- 首页：往期 ---------- */
.archive { padding: 2rem 0 0; }
.archive h3 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  color: var(--ink);
}
.archive ul { list-style: none; margin: 0; padding: 0; }
.archive li { border-top: 1px solid var(--line); }
.archive li:last-child { border-bottom: 1px solid var(--line); }
.archive a {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 1em;
  align-items: baseline;
  padding: 0.85rem 0.1rem;
  color: inherit;
  text-decoration: none;
}
.archive a:hover .item-title { color: var(--sea); }
.archive .item-no { color: var(--seal); font-size: 0.9rem; letter-spacing: 0.1em; }
.archive .item-title { font-size: 1.08rem; }
.archive .item-meta { color: var(--ink-soft); font-size: 0.88rem; margin-left: auto; }

/* ---------- 文章页 ---------- */
article.post { padding-top: 2.2rem; }
article.post .body p {
  margin: 0 0 1.15em;
  text-align: justify;
}
article.post .sign {
  margin-top: 2.2rem;
  text-align: right;
  color: var(--ink-soft);
}
.postnav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.postnav a { color: var(--sea); text-decoration: none; }
.postnav .none { color: var(--ink-soft); }

/* ---------- 页脚 ---------- */
footer {
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.92rem;
  text-align: center;
}
footer .self { margin: 0 auto 0.8rem; max-width: 30em; }
footer .colophon { margin: 0; font-size: 0.82rem; letter-spacing: 0.25em; }

/* ---------- 关于页 ---------- */
.about-body p { margin: 0 0 1.15em; text-align: justify; }
.about-body h2 {
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  margin: 2rem 0 0.8rem;
  text-wrap: balance;
}
.about-body h2:first-child { margin-top: 0; }

@media (min-width: 640px) {
  body { font-size: 1.125rem; }
  .page { padding: 3.5rem 1.5rem 4.5rem; }
}