:root {
  --ink: #201926;
  --mist: #f6f2ef;
  --wine: #6a3254;
  --ivy: #4f6d5f;
  --rose: #ffdbd6;
  --paper: #fffaf5;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Merriweather", "Georgia", "Noto Serif SC", serif;
  color: var(--ink);
  background: radial-gradient(circle at 10% 10%, #fff4ef 0, var(--mist) 40%, #efe6dd 100%);
  line-height: 1.7;
}
.bg-gradient { position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='960' viewBox='0 0 960 960'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop stop-color='%23ffeadf' offset='0'/%3E%3Cstop stop-color='%23f3d0d5' offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='%23fff8f3' width='960' height='960'/%3E%3Cpath fill='url(%23g)' d='M0,0 C220,120 320,300 580,220 C760,170 830,260 960,220 L960,960 0,960Z' opacity='0.35'/%3E%3C/svg%3E") no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
}
.frame {
  max-width: 980px;
  margin: 0 auto;
  padding: 2rem 1.2rem 3rem;
}
.frame.narrow { max-width: 640px; }
.hero, .chapter, .note-list, .qa, .about, .poetry, .not-found {
  background: color-mix(in srgb, var(--paper) 90%, #fff 10%);
  border: 1px solid #ecd7cc;
  border-radius: 18px;
  padding: 1.2rem;
  margin: 0.9rem 0;
  box-shadow: 0 14px 40px rgba(32, 23, 38, 0.06);
}
.logo { display: flex; align-items: center; gap: .8rem; }
.logo img { width: 42px; height: 42px; border-radius: 50%; }
.logo span { font-weight: 700; letter-spacing: .02em; }
.kicker { color: #7a5d63; margin-top: .4rem; }
h1 { margin: .3rem 0 0; font-size: clamp(1.8rem, 6vw, 2.9rem); line-height: 1.2; }
.lead { color: #4f434a; }
.path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}
.path-grid article { min-height: 170px; }
.index-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.index-links a {
  display: inline-block;
  padding: .7rem .9rem;
  background: #fff;
  border: 1px dashed #e0becc;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
}
.footer, footer { color: #6b5960; font-size: .95rem; margin-top: 2rem; }
.back { display: inline-block; margin-bottom: .6rem; color: #5d3f58; }
.chapter h2, .note-list h2, .qa h2, .about h2 {
  margin-top: 0;
  color: #6a3254;
}
.qa, .about, .note-list, .chapter { padding-right: 1rem; }
.not-found h1 { font-size: 3rem; margin: .2rem 0; }
@media (max-width: 860px) {
  .path-grid { grid-template-columns: 1fr; }
}