/* ============================================
   トップページ 上質化テーマ（top.css）
   静寂舘・玉響茶園 参考／style.css の後に読み込む上書き層
   body.top-elegant にのみ適用
   ============================================ */

/* ---- 全体トーン ---- */
body.top-elegant { --kincha: #c9a86a; }
body.top-elegant .section { position: relative; }

/* ---- ヒーロー：写真主役の映画的トーンへ ---- */
body.top-elegant .hero { min-height: 100vh; }
body.top-elegant .hero-bg-img {
  opacity: 0.7;
  filter: saturate(0.9) contrast(1.04) brightness(0.92);
  object-position: center 45%;
  transform: scale(1.04);
}
body.top-elegant .hero-overlay {
  background:
    linear-gradient(180deg, rgba(16,16,20,0.5) 0%, rgba(16,16,20,0.22) 42%, rgba(14,14,18,0.92) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(201,168,106,0.10) 0%, transparent 62%);
}
body.top-elegant .hero-sub {
  letter-spacing: 0.4em;
  color: rgba(201,168,106,0.9);
  font-size: clamp(0.7rem, 1.2vw, 0.9rem);
  margin-bottom: 2.4rem;
}
body.top-elegant .hero-title-main {
  font-size: clamp(2.8rem, 8.5vw, 6rem);
  letter-spacing: 0.24em;
  text-shadow: 0 4px 40px rgba(0,0,0,0.55);
}
body.top-elegant .hero-title-main::before { display: none; }
body.top-elegant .hero-title-main::after { width: 78px; margin: 1.6rem auto 0; opacity: 0.8; }
body.top-elegant .hero-title-sub { letter-spacing: 0.42em; margin-top: 1rem; }
body.top-elegant .hero-catch { color: rgba(250,248,245,0.85); letter-spacing: 0.16em; }

/* ---- セクション見出し：端正に大きく ---- */
body.top-elegant .section-label {
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  color: var(--kincha-dark);
}
body.top-elegant .section-title {
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  letter-spacing: 0.12em;
  line-height: 1.4;
}
body.top-elegant .section-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  background: var(--kincha);
  margin-top: 22px;
  opacity: 0.85;
}
body.top-elegant .section-intro { color: #7a756c; }

/* ---- 大きな縦書きの章番号／和のアクセントを主要セクション左に ---- */
@media (min-width: 1320px) {
  body.top-elegant #about::before,
  body.top-elegant #shiseki::before,
  body.top-elegant #jinjutsu::before,
  body.top-elegant #book::before {
    position: absolute;
    top: clamp(72px, 9vw, 128px);
    left: max(24px, calc((100% - 1100px) / 2 - 60px));
    writing-mode: vertical-rl;
    font-family: var(--font-serif);
    font-size: 0.72rem;
    letter-spacing: 0.4em;
    color: var(--kincha);
    opacity: 0.7;
  }
  body.top-elegant #about::before { content: "笠原町"; }
  body.top-elegant #shiseki::before { content: "史蹟巡り"; }
  body.top-elegant #jinjutsu::before { content: "医の仁術"; }
  body.top-elegant #book::before { content: "玄桐筆記"; }
}

/* ---- 写真帯：より映画的に ---- */
body.top-elegant .section-photo-band { min-height: 62vh; }
body.top-elegant .section-photo-band--slim { min-height: 44vh; }
body.top-elegant .photo-band-overlay {
  background: linear-gradient(180deg, rgba(14,14,18,0.28), rgba(14,14,18,0.5));
}
body.top-elegant .photo-band-overlay--light {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(14,14,18,0.35));
}
body.top-elegant .photo-band-caption {
  letter-spacing: 0.2em;
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  font-family: var(--font-serif);
}

/* ---- 引用（あとがき）：静謐に ---- */
body.top-elegant .section-quote { position: relative; }
body.top-elegant .quote-block p {
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  line-height: 2.3;
  letter-spacing: 0.1em;
}
body.top-elegant .quote-block cite { letter-spacing: 0.14em; margin-top: 1.6rem; }

/* ---- 序文・後書：料紙のような上品さ ---- */
body.top-elegant .section-preface { background: linear-gradient(180deg, #faf8f4, #f3efe6); }
body.top-elegant .preface-card {
  box-shadow: 0 18px 50px rgba(60,45,20,0.06);
  border-color: #e7e0d2;
}
body.top-elegant .preface-card-title { letter-spacing: 0.1em; }

/* ---- お知らせ：余白と罫を上品に ---- */
body.top-elegant .section-news { background: var(--gofun); }
body.top-elegant .news-item { padding: 18px 4px; }

/* ---- 書籍情報／医の仁術：落ち着いた背景 ---- */
body.top-elegant .section-info { background: var(--shironeri); }

/* ---- ナビ：スクロール後の質感 ---- */
body.top-elegant .nav.scrolled {
  background: rgba(20,20,24,0.9);
  backdrop-filter: blur(10px);
}

/* ---- レスポンシブ調整 ---- */
@media (max-width: 640px) {
  body.top-elegant .section-title::after { margin-top: 16px; }
}