/**
 * base.css — 基本スタイル（body・タイポグラフィ・ユーティリティ）
 *
 * peaceput DNA:
 * - 本体フォント: IBM Plex Sans JP（sans 本体層）
 * - display serif: Cormorant Garamond（年号・章番号・EN タイトルに限定）
 * - 二重見出し文法: 広字間 EN アイブロウ + 通常 JP 見出し
 * - 行間: 本文 1.8–2.0、見出し 1.2–1.3
 */

/* ---- Body ---- */
body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.9;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- コンテナ（peaceput: 1080 / 872 / 720 の3段モジュラー幅） ---- */
.container {
  width: min(100% - 5rem, var(--container));
  margin-inline: auto;
}

.container--mid {
  width: min(100% - 5rem, var(--container-mid));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 5rem, var(--container-narrow));
  margin-inline: auto;
}

/* ---- peaceput 二重見出し文法 ---- */
/* アイブロウ: 強い letter-spacing + lowercase（peaceput確認: 0.24–0.36em） */
.eyebrow {
  display: block;
  margin: 0 0 var(--space-5);
  font-family: var(--font-sans);
  font-size: clamp(0.6875rem, 1vw, 0.8125rem);
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: lowercase;
  color: var(--color-text-muted);
}

/* 暗背景上のアイブロウ */
.eyebrow--inverse {
  color: rgba(255, 255, 255, 0.55);
}

/* アイブロウの通常スペーシング部分 */
.eyebrow__normal {
  letter-spacing: 0.04em;
  margin-left: 0.4em;
}

/* セクション主見出し（peaceput: 36–52px, weight 400–500） */
.section-title {
  font-family: var(--font-sans);
  font-size: clamp(var(--font-size-xl), 3.2vw, var(--font-size-4xl));
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text);
  max-width: 18ch;
}

.section-title--inverse {
  color: var(--color-text-inverse);
}

/* セクション説明本文（peaceput: 最大 42rem、line-height 1.9） */
.section-body {
  max-width: 42rem;
  font-size: var(--font-size-base);
  line-height: 1.9;
  color: var(--color-text-secondary);
  margin: var(--space-5) 0 var(--space-7);
}

.section-body--inverse {
  color: rgba(255, 255, 255, 0.72);
}

/* ---- display serif（年号・章番号用） ---- */
.display-serif {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

/* ---- ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 var(--space-7);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-base), background-color var(--transition-base);
  cursor: pointer;
  border: 1.5px solid transparent;
}

/* プライマリ */
.btn--primary {
  background-color: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.btn--primary:hover {
  opacity: 0.82;
}

/* アウトライン */
.btn--outline {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--outline:hover {
  background-color: var(--color-accent-pale);
}

/* ゴースト（暗背景上） */
.btn--ghost {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.btn--lg {
  min-height: 56px;
  padding: 0 var(--space-8);
  font-size: var(--font-size-base);
}

/* ---- インラインリンク ---- */
.inline-link {
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--transition-fast);
}

.inline-link:hover {
  opacity: 0.7;
}

/* ---- ユーティリティ ---- */
.text-center { text-align: center; }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }

/* ---- スクロールアニメーション（reveal） ---- */
/* GSAP 非使用時フォールバック */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* prefers-reduced-motion: 即時表示 */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- レスポンシブ ---- */
@media (max-width: 820.98px) {
  .container,
  .container--mid,
  .container--narrow {
    width: min(100% - 2rem, 100%);
    padding-inline: 1rem;
  }
}