* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif-en);
  line-height: 1.75;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--ink-pine); }
a:hover { color: var(--tea-green-deep); }

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 96px;
}

/* --- 紙のグレインテクスチャ: 写真ではなく SVG feTurbulence ノイズを低不透明度で重ねる --- */
.grain {
  position: relative;
}
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* --- ヒーロー（インデックスページ上部） --- */
.hero {
  background: var(--tea-green);
  color: #fff;
  padding: 56px 20px 48px;
  margin-bottom: 8px;
}
.hero-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.hero-icon { width: 64px; height: 64px; margin-bottom: 20px; }
.hero h1 {
  font-family: var(--font-serif-en);
  font-weight: 700;
  font-size: clamp(28px, 6vw, 42px);
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}
.hero .jp-title {
  font-family: var(--font-serif-jp);
  font-size: 15px;
  opacity: 0.92;
  margin: 0 0 4px;
}
.hero .byline {
  font-family: var(--font-sans-jp);
  font-size: 13px;
  opacity: 0.78;
  margin: 0;
}

/* --- ナビ（章ページ上部の戻る導線） --- */
.topnav {
  padding: 18px 20px 0;
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-sans-jp);
  font-size: 13px;
}
.topnav a { text-decoration: none; }
.topnav a:hover { text-decoration: underline; }

footer.site-footer {
  max-width: 760px;
  margin: 48px auto 0;
  padding: 20px 20px 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-sans-jp);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.9;
}

@media (max-width: 480px) {
  .hero { padding: 40px 16px 36px; }
}