/* ============================================================
   hooponopono-asia.org  REDESIGN PREVIEW
   Base stylesheet — adapted from Claude Design "Fixed Header" bundle
   + 10 agreed modifications (design-decisions.md §42-51)
   ============================================================ */

/* ---------- Design tokens ---------- */
/* 2026-05-12 ハワイテーマ移行 (Genio 指示・参考: hiehawaii.com):
   旧パレット (Aman 風 黄土色 + navy) を保持しつつ、value だけハワイ色に差し替え。
   トークン名は互換性のため変更しない:
   - --beige (実値: 薄い水色・ハワイの霧/海色) — 「黄土色」セクションが水色になる
   - --beige-deep (実値: その深め)
   - --navy (実値: 濃い緑・ハワイの森/コアウッド) — 全テキストが濃緑色になる
   - --navy-soft / --mute / --hair / --thread は --navy のアルファ違い
   白/水色 交互ルールは継続 (旧 白/黄土色 から色のみ変更) */
:root {
  --white:        #fafafa;
  --beige:        #e7f1f7;        /* 薄い水色 — hiehawaii 寄せ (2026-05-22 B > G に再調整) */
  --beige-deep:   #c6d6e4;        /* 水色の深め */
  --navy:         #32442f;        /* 濃い緑 (B案) — hiehawaii #32442f は暗く黒く見えるため緑を強めた (2026-05-25 #2c3e34→#32442f→#32442f, Genio 指示) */
  --navy-soft:    #536454;
  --navy-mute:    rgba(50, 68, 47, .55);
  --navy-hair:    rgba(50, 68, 47, .22);
  --navy-thread:  rgba(50, 68, 47, .12);
  --hair:         #c6d6e4;        /* beige-deep と同じ */
  --hair-light:   #d4e2ee;        /* hair の明るめ */

  --ff-jp:    "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-en:    "Cormorant Garamond", "EB Garamond", serif;
  --ff-brand: "Italiana", "Cormorant Garamond", serif;  /* Tan Meringue 近似 */
  --ff-kr:    "Noto Serif KR", serif;
  --ff-tw:    "Noto Serif TC", serif;
}

/* ============================================
   サイト全体のテキスト配置ルール (Genio 指示 2026-05-08)
   ============================================
   - 見出し (h1, h2, h3, eyebrow): 中央揃え (各セクション側で指定)
   - 本文 (p, ul, ol): 左寄せ
   - CTA: 中央揃え (CTA ルール参照、後段)
   ============================================ */

/* セクション内本文の左寄せ統一
   (明示的な中央指定がない限り、長い日本語段落は左揃えで読みやすく) */
.intro-section-body p,
.class-intro-inner p,
.class-other-info-inner p,
.sessions-intro-inner p,
.session-info-inner p,
.kr-bio p,
.kr-personal-cta-inner p,
.service-hero-inner p,
.service-body-inner p,
.kr-deeper-desc,
.booking-intro p {
  text-align: left;
}

/* 例外: eyebrow / 詩的な短い装飾文は中央維持 */
.kr-deeper-eyebrow,
.sj-feature-eyebrow,
.sec-sub {
  text-align: center;
}

/* 日本語の改行は基本的に BudouX に任せ、強制改行はオーバーフロー時のみ
   (body 全体に word-break: keep-all を効かせると BudouX の文節改行が
    上書きされて固有名詞も含めて単語境界で改行されないバグが出るため、
    text 系要素にだけ overflow-wrap を効かせる方針に 2026-05-08 変更) */
p, h1, h2, h3, h4, li {
  overflow-wrap: break-word;
}

/* 句読点が行頭に来ないように制御 (対応ブラウザのみ有効) */
p, h1, h2, h3, h4, li, span {
  hanging-punctuation: allow-end;
}

/* 固有名詞・専門用語の改行禁止クラス
   使い方: <span class="nowrap">ホ・オポノポノ</span>
   .term は意味的に同じだが、用語であることを明示したい時に使用 */
.nowrap, .term {
  white-space: nowrap;
}

/* BudouX 適用要素のデフォルトスタイル
   (Web component <budoux-ja> はラッパーなので display: contents で透過) */
budoux-ja {
  display: contents;
}

/* BudouX が読み込まれていない / 未定義の状態でもレイアウトを壊さない */
budoux-ja:not(:defined) {
  display: contents;
}

/* モバイルでは行間を少し詰めて段落のまとまり感を出す */
@media (max-width: 768px) {
  p { line-height: 1.9; }
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; margin: 0; padding: 0 }
html, body {
  background: var(--white); color: var(--navy);
  font-family: var(--ff-jp); font-weight: 300;
  line-height: 1.6;
}
body { min-height: 100vh; overflow-x: hidden }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
img { display: block; max-width: 100% }
svg { display: block }

/* ---------- Typography helpers ---------- */
.serif-en {
  font-family: var(--ff-en); font-weight: 300;
  letter-spacing: .02em; font-style: italic;
}
.serif-en-up {
  font-family: var(--ff-en); font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase; font-style: normal;
}
/* Scale #9 Eyebrow / 小ラベル */
.eyebrow {
  font-family: var(--ff-en); font-weight: 400;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--navy-mute);
}
h1, h2, h3, h4, h5 { font-family: var(--ff-jp); font-weight: 300 }

/* ---------- Reveal (もはや常時表示・フェードイン廃止) ---------- */
/* 以前は opacity:0 で IntersectionObserver で .in を付ける設計だったが、
   ファーストビューでブラウザによっては要素が見えないバグが発生したため、
   常時表示に変更。フェードイン演出は廃止 (Genio 指示 2026-05-07) */
.reveal { opacity: 1; transform: none }
.reveal.in { opacity: 1; transform: none }

/* ========================================================
   FIXED HEADER (Aman-style: burger / brand / search)
   Always solid beige across all pages and scroll states
   ======================================================== */
.fh {
  position: sticky; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(231, 241, 247, .96);  /* --beige の rgba 版 (2026-05-12 ハワイ色に更新) */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
  color: var(--navy);
}
/* fh-dark class kept for backward compat but identical to .fh now */
.fh-dark { background: rgba(231, 241, 247, .96); color: var(--navy); border-bottom: 1px solid var(--hair) }  /* --beige rgba (ハワイ色) */
.fh-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 48px;
  max-width: 1440px; margin: 0 auto;
}
.fh-brand {
  font-family: var(--ff-brand); font-weight: 400;
  letter-spacing: .22em; font-size: 22px; cursor: pointer; color: inherit;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0;
  line-height: 1;
}
.fh-brand-img {
  height: 36px; width: auto; display: block;
}
.fh-brand-text { display: none }  /* Always use logo image */
@media (max-width: 768px) {
  .fh-brand-img { height: 26px }
}
.fh-ic { stroke: currentColor; cursor: pointer; display: block }
.fh-ic:hover { opacity: .65 }

.fh-drawer-scrim {
  position: fixed; inset: 0; z-index: 58;
  background: rgba(0, 0, 0, .35); display: none;
}
.fh-drawer-scrim.open { display: block }
.fh-drawer {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: 360px; max-width: 100%; z-index: 60;
  background: var(--beige);
  transform: translateX(-102%);
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column; color: var(--navy);
}
.fh-drawer.open { transform: translateX(0) }
.fh-drawer-head {
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; border-bottom: 1px solid var(--hair);
}
.fh-drawer-nav { flex: 1; padding: 40px 36px; overflow-y: auto }
.fh-drawer-nav a {
  display: block; padding: 18px 0;
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 16px; letter-spacing: .16em; color: var(--navy); cursor: pointer;
  border-bottom: 1px solid var(--hair-light);
  transition: opacity .25s ease;
}
.fh-drawer-nav a:hover { opacity: .6 }
.fh-drawer-nav a.on { color: var(--navy-mute) }
.fh-drawer-foot {
  display: flex; gap: 10px; padding: 24px 36px;
  border-top: 1px solid var(--hair);
  font-family: var(--ff-en); font-size: 11px; letter-spacing: .26em;
}
.fh-drawer-foot button {
  background: transparent; border: 0; color: var(--navy-mute);
  padding: 6px 10px; cursor: pointer; border-radius: 999px;
  transition: opacity .25s ease, color .25s ease;
}
.fh-drawer-foot button.on { color: var(--navy); border: 1px solid var(--hair) }

/* Mobile header */
@media (max-width: 768px) {
  .fh-inner { height: 60px; padding: 0 20px }
  .fh-brand { font-size: 15px }
  .fh-drawer { width: 100% }
  .fh-drawer-head { height: 60px; padding: 0 20px }
  .fh-drawer-nav { padding: 28px 28px }
  .fh-drawer-nav a { padding: 16px 0; font-size: 15px }
  .fh-drawer-foot { padding: 24px 28px }
}

/* ========================================================
   HERO (top page only)
   ======================================================== */
.hero {
  position: relative; height: 90vh; min-height: 720px;
  color: #fff; overflow: hidden; background: #1a1a1a;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; overflow: hidden;
  background: #1a1a1a;
}
.hero-video {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%; object-fit: cover;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .55) 100%);
}
.hero-center {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
}
.hero-week {
  font-family: var(--ff-en); font-size: 11px;
  letter-spacing: .38em; text-transform: uppercase;
  opacity: .7; margin-bottom: 32px;
}
.hero-quote-jp {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 22px; letter-spacing: .14em; line-height: 2.1;
  font-feature-settings: "palt";
  max-width: 680px; margin: 0 auto;
  text-align: left;
  padding: 0 24px;
}
.hero-quote-jp.short {
  font-size: 54px; letter-spacing: .22em; line-height: 1.5;
}
.hero-quote-en {
  font-family: var(--ff-en); font-style: italic;
  font-size: 15px; margin-top: 24px; opacity: .75; letter-spacing: .08em;
  max-width: 600px; margin-left: auto; margin-right: auto;
  line-height: 1.8;
}
.hero-quote-by {
  font-family: var(--ff-jp); font-size: 12px;
  letter-spacing: .34em; margin-top: 36px; opacity: .65;
  font-weight: 300;
}
.hero-hint {
  position: absolute; bottom: 42px; left: 50%;
  transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: .7;
}
.hint-line {
  width: 1px; height: 60px; background: currentColor; opacity: .65;
  animation: hint-drop 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes hint-drop {
  0%   { transform: scaleY(0); transform-origin: top }
  50%  { transform: scaleY(1); transform-origin: top }
  51%  { transform: scaleY(1); transform-origin: bottom }
  100% { transform: scaleY(0); transform-origin: bottom }
}
.hint-label {
  font-family: var(--ff-en); font-size: 9px;
  letter-spacing: .5em; text-transform: uppercase; opacity: .8;
}
@media (max-width: 768px) {
  .hero { min-height: 640px; }
  .hero-quote-jp { font-size: 15px; letter-spacing: .08em; line-height: 2; padding: 0 24px }
  .hero-quote-jp.short { font-size: 32px; letter-spacing: .18em }
  .hero-quote-en { font-size: 12px; margin-top: 18px; padding: 0 24px }
  .hero-quote-by { font-size: 10px; margin-top: 28px }
  .hero-hint { bottom: 28px }
  .hint-line { height: 40px }
}
/* Stronger overlay for long quote readability */
.hero-bg-overlay.deep {
  background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .56) 55%, rgba(0, 0, 0, .62) 100%);
}

/* ========================================================
   SECTION: INTRO
   ======================================================== */
.intro {
  background: var(--white);
  padding: 200px 0 180px;
}
.intro-inner {
  max-width: 720px; padding: 0 24px; margin: 0 auto;
}
.intro-title { text-align: center }
.intro-body { text-align: left }
.intro-eyebrow { margin-bottom: 48px }
/* Scale #4 H2 セクションタイトル */
.intro-title {
  font-size: 36px; line-height: 1.5; letter-spacing: .22em;
  color: var(--navy); margin-bottom: 72px;
}
/* Scale #8 Body 本文 (last paragraph も同じ — italic 廃止) */
.intro-body p {
  font-size: 17px; line-height: 2.1; letter-spacing: .08em;
  color: var(--navy-soft); margin-bottom: 32px;
}
.intro-body p:last-child { margin-bottom: 0 }
@media (max-width: 768px) {
  .intro { padding: 120px 0 100px }
  .intro-inner { padding: 0 36px }
  .intro-title { font-size: 26px; margin-bottom: 48px }
  .intro-body p { font-size: 15px; margin-bottom: 26px }
}

/* ========================================================
   SECTION: DOORS (1 entry only — per decision §44)
   Simple centered content, no bordered box (more Aman-like)
   ======================================================== */
.doors {
  background: var(--beige);
  padding: 180px 0;
}
.doors-inner {
  max-width: 560px; margin: 0 auto; padding: 0 24px;
}
.door {
  cursor: pointer; display: block;
}
.door-title { text-align: center }
.door-cta { /* center via wrapper below */ }
.door-cta-wrap { text-align: center; margin-top: 8px }
.door:hover .door-cta { letter-spacing: .48em }
.door-num {
  font-family: var(--ff-en); font-size: 56px; color: var(--navy);
  opacity: .3; letter-spacing: .05em; margin-bottom: 24px; font-style: italic;
}
.door-kicker { margin-bottom: 18px }
/* Scale #4 H2 セクションタイトル相当 */
.door-title {
  font-size: 36px; letter-spacing: .22em; color: var(--navy);
  line-height: 1.5; margin-bottom: 28px;
}
/* Scale #8 Body */
.door-desc {
  font-size: 17px; line-height: 2.1; letter-spacing: .08em;
  color: var(--navy-soft); margin-bottom: 40px; max-width: 520px;
  margin-left: auto; margin-right: auto;
  text-align: left;
}
@media (max-width: 768px) {
  .door-desc { font-size: 15px }
}
/* ============================================
   サイト全体の CTA スタイル統一ルール
   ============================================
   全 CTA は以下のスタイルで統一されます。
   新規 CTA を作成する場合は、必ずこのルールに従うこと。

   ルール:
   1. 親要素は text-align: center（中央揃え）
   2. 下線あり、矢印（→）付き
   3. font-size: 15px、letter-spacing: .14em
   4. ホバーで letter-spacing が .22em に広がる
   5. color は var(--navy)
   6. font-family: var(--ff-jp)、font-weight: 300

   対象クラス:
   .door-cta, .ec-cta, .inline-cta, .kr-deeper-cta, .brief-cta

   例外: .inst-profile-link のみ
        (izi/private-session/ の講師カード内補足リンク。
         モバイル時に 2 列表示するため小さくしている)
   ============================================ */
.door-cta,
.ec-cta,
.inline-cta,
.kr-deeper-cta,
.brief-cta {
  display: inline-block;
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 15px; letter-spacing: .14em; color: var(--navy);
  border-bottom: 1px solid var(--navy); padding-bottom: 5px;
  transition: letter-spacing .5s ease;
}
.door-cta:hover,
.ec-cta:hover,
.inline-cta:hover,
.kr-deeper-cta:hover,
.brief-cta:hover { letter-spacing: .22em }

/* CTA を含む親要素は中央揃え (上記ルール 1) */
.event-card,
.notice-more,
.readings-more,
.videos-more,
.tev-more,
.door-cta-wrap,
.detail-link,
.next-card,
.kr-message-pointer,
.kr-personal-cta-inner,
.service-back {
  text-align: center;
}

/* JP-style subtle tag/eyebrow (replaces Cormorant English eyebrow) */
.tag-jp {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 11px; letter-spacing: .28em; color: var(--navy-mute);
}
@media (max-width: 768px) {
  .doors { padding: 100px 0 }
  .doors-inner { padding: 0 36px }
  .door-num { font-size: 40px; margin-bottom: 18px }
  .door-title { font-size: 26px; margin-bottom: 22px }
  .door-desc { font-size: 14px; margin-bottom: 28px }
}

/* ========================================================
   SECTION: NOTICE BLOCK (new per §46)
   White (alternates from Doors beige above)
   ======================================================== */
.notice {
  background: var(--white);
  padding: 80px 0;
}
.notice-inner {
  max-width: 800px; margin: 0 auto; padding: 0 24px;
}
.notice-item {
  display: block; padding: 32px 0; cursor: pointer;
  transition: background .4s ease;
  text-decoration: none; color: inherit;
}
.notice-item:hover { background: rgba(50, 68, 47, .02) }
.notice-item + .notice-item {
  border-top: 1px solid var(--navy-thread);
}
.notice-item .eyebrow { margin-bottom: 14px; font-size: 12px }
/* Scale #6 H4 カードタイトル相当（読みやすさ優先） */
.notice-title {
  font-size: 21px; letter-spacing: .14em; line-height: 1.8;
  color: var(--navy); margin-bottom: 10px;
}
/* 日付 (JP 形式 — 近日のイベントと統一) */
.notice-meta {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 14px; letter-spacing: .12em;
  color: var(--navy-mute); margin-bottom: 14px;
  text-align: left;
}
.notice-title {
  text-align: left;
}
.notice-more {
  text-align: center; margin-top: 60px;
}
.notice-cta {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 16px; letter-spacing: .14em;
  color: var(--navy); opacity: .9;
  border-bottom: 1px solid var(--navy);
  padding-bottom: 5px; transition: opacity .4s ease, letter-spacing .5s ease;
}
.notice-cta:hover { opacity: 1; letter-spacing: .22em }
@media (max-width: 768px) {
  .notice-cta { font-size: 15px }
}
@media (max-width: 768px) {
  .notice { padding: 60px 0 }
  .notice-inner { padding: 0 36px }
  .notice-title { font-size: 16px }
}

/* ========================================================
   SECTION: READINGS (top page grid)
   ======================================================== */
.readings-sec {
  background: var(--beige);
  padding: 180px 0 120px;
}
.sec-head {
  text-align: center; margin-bottom: 100px; padding: 0 24px;
}
.sec-eyebrow { margin-bottom: 32px }
/* Scale #4 H2 セクションタイトル */
.sec-title {
  font-size: 36px; letter-spacing: .22em; color: var(--navy); line-height: 1.5;
}
@media (max-width: 768px) {
  .sec-title { font-size: 26px; letter-spacing: .18em }
}
.readings-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px 90px; padding: 0 24px;
}
.reading {
  cursor: pointer;
}
.r-thumb {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--beige); margin-bottom: 26px;
}
.r-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s ease; filter: saturate(.92);
}
.reading:hover .r-img { transform: scale(1.04) }
/* Scale #9 Eyebrow / 小ラベル */
.r-tag {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 12px; letter-spacing: .22em;
  color: var(--navy-mute); margin-bottom: 14px;
}
/* Scale #6 H4 カードタイトル */
.r-title {
  font-size: 21px; letter-spacing: .14em; line-height: 1.8;
  color: var(--navy);
}
.readings-more { text-align: center; margin-top: 100px }
@media (max-width: 768px) {
  .readings-sec { padding: 100px 0 }
  .sec-head { margin-bottom: 70px; padding: 0 36px }
  .sec-title { font-size: 28px }
  .readings-grid { grid-template-columns: 1fr; gap: 60px; padding: 0 36px }
  .r-title { font-size: 17px }
  .readings-more { margin-top: 70px }
}

/* ========================================================
   SECTION: VIDEOS (top page)
   ======================================================== */
.videos-sec {
  background: var(--white);
  padding: 160px 0;
}
.videos-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 60px; padding: 0 60px;
}
.videos-grid.videos-grid-2 {
  max-width: 960px; grid-template-columns: 1fr 1fr; gap: 70px 80px;
}
.video { cursor: pointer }
.v-thumb {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--beige-deep); margin-bottom: 22px;
}
.v-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s ease; filter: saturate(.92);
}
.video:hover .v-img { transform: scale(1.04) }
.v-play {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.v-play svg { width: 44px; height: 44px; opacity: .95; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .3)) }
.v-long {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  font-family: var(--ff-en); font-size: 10px; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase; color: var(--navy);
  background: rgba(250, 250, 250, .88); padding: 6px 10px;
}
/* Scale #9 Eyebrow / 小ラベル */
.v-tag {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 12px; letter-spacing: .22em;
  color: var(--navy-mute); margin-bottom: 12px;
}
/* Scale #6 H4 カードタイトル */
.v-title {
  font-size: 21px; letter-spacing: .14em; line-height: 1.8; color: var(--navy);
}
@media (max-width: 768px) {
  .v-title { font-size: 17px }
}
.videos-more { text-align: center; margin-top: 90px }
@media (max-width: 768px) {
  .videos-sec { padding: 100px 0 }
  /* Force 1-column on mobile regardless of videos-grid-2 modifier */
  .videos-grid,
  .videos-grid.videos-grid-2 { grid-template-columns: 1fr; gap: 60px; padding: 0 36px }
  .v-title { font-size: 16px }
  .videos-more { margin-top: 60px }
}

/* ========================================================
   SECTION: UPCOMING EVENTS (top page — time-ordered list)
   ======================================================== */
.tev-sec {
  background: var(--beige);
  padding: 160px 0;
}
.tev-list {
  list-style: none; padding: 0 120px;
  max-width: 1100px; margin: 0 auto;
}
.tev-row {
  display: grid;
  grid-template-columns: 200px 1fr 140px;
  gap: 40px; align-items: baseline;
  padding: 32px 0; border-top: 1px solid var(--navy-hair);
  cursor: pointer; transition: background .4s ease;
}
.tev-row:last-child { border-bottom: 1px solid var(--navy-hair) }
.tev-row:hover { background: rgba(50, 68, 47, .02) }
/* 日本語日付 (例: 2026年4月1日) */
.tev-date {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 16px; letter-spacing: .12em; color: var(--navy);
}
.tev-t {
  font-size: 17px; letter-spacing: .12em; color: var(--navy);
  line-height: 1.7;
}
.tev-loc {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 16px; letter-spacing: .12em;
  color: var(--navy-mute); text-align: right;
}
.tev-more { text-align: center; margin-top: 70px }
@media (max-width: 768px) {
  .tev-sec { padding: 100px 0 }
  .tev-list { padding: 0 32px }
  .tev-row { grid-template-columns: 1fr; gap: 6px; padding: 26px 0 }
  .tev-date { font-size: 14px }
  .tev-t { font-size: 16px }
  .tev-loc { font-size: 14px; text-align: left }
  .tev-more { margin-top: 50px }
}

/* ========================================================
   FOOTER (2-column JP nav — per §50)
   Background alternates with section above (white after beige Events)
   ======================================================== */
.foot {
  background: var(--white); color: var(--navy);
  padding: 160px 0 60px;
  border-top: 1px solid var(--navy-thread);
}
.foot-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 80px;
}

/* Block 1: Welcome card */
.foot-welcome {
  padding: 50px 60px; border: 1px solid var(--navy-thread);
  background: rgba(250, 250, 250, .4); text-align: center;
  margin-bottom: 100px;
}
.foot-welcome .eyebrow { margin-bottom: 16px }
.foot-welcome-title {
  font-size: 24px; letter-spacing: .18em; color: var(--navy);
  line-height: 1.6; margin-bottom: 16px;
}
.foot-welcome-desc {
  font-size: 14px; line-height: 2; letter-spacing: .08em;
  color: var(--navy-soft); margin-bottom: 28px;
}

/* Block 2: Newsletter signup
   Title 中央 + 大きく / desc 通常本文サイズ + 左寄せ (Genio 2026-04-29) */
.foot-news {
  padding: 60px 0; border-bottom: 1px solid var(--navy-thread);
}
.foot-news .eyebrow { margin-bottom: 18px; text-align: center }
.foot-news-title {
  font-size: 28px; letter-spacing: .18em; color: var(--navy);
  line-height: 1.6; margin-bottom: 22px;
  font-family: var(--ff-jp); font-weight: 300;
  text-align: center;
}
.foot-news-desc {
  font-size: 17px; line-height: 2.1; letter-spacing: .08em;
  color: var(--navy-soft); margin-bottom: 28px;
  max-width: 480px; margin-left: auto; margin-right: auto;
  text-align: left;
}
.foot-news-form {
  display: flex; gap: 0; justify-content: center;
  max-width: 480px; margin: 0 auto;
}
.foot-news-form input[type=email] {
  flex: 1; padding: 14px 18px;
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 15px; letter-spacing: .08em;
  color: var(--navy); background: rgba(250, 250, 250, .5);
  border: 1px solid var(--navy-thread);
}
.foot-news-form input[type=email]:focus {
  outline: none; border-color: var(--navy-hair);
}
.foot-news-form button {
  padding: 14px 32px;
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 15px; letter-spacing: .14em; color: var(--beige);
  background: var(--navy); border: 1px solid var(--navy); cursor: pointer;
  transition: opacity .3s ease;
}
.foot-news-form button:hover { opacity: .82 }
@media (max-width: 768px) {
  .foot-news-title { font-size: 22px }
  .foot-news-desc { font-size: 15px }
}

/* Block 3: Nav (2 columns Japanese) */
.foot-nav {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px 90px; padding: 80px 40px 80px;
  border-bottom: 1px solid var(--navy-thread); justify-items: start;
}
.foot-col {
  display: flex; flex-direction: column; gap: 14px;
}
/* Footer nav: 15px (slightly smaller than Body for footer compactness) */
.foot-col a {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 15px; letter-spacing: .14em; color: var(--navy);
  cursor: pointer; opacity: .9; transition: opacity .4s ease;
}
.foot-col a:hover { opacity: 1 }
@media (max-width: 768px) {
  .foot-col a { font-size: 14px }
}

/* Block 4: SNS — Noto Serif JP 統一 (フッター全要素同じフォント) */
.foot-sns {
  display: flex; gap: 28px; justify-content: center;
  padding: 50px 0; border-bottom: 1px solid var(--navy-thread); flex-wrap: wrap;
}
.foot-sns a {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 14px; letter-spacing: .14em;
  color: var(--navy); opacity: .85; transition: opacity .3s ease;
}
.foot-sns a:hover { opacity: 1 }

/* Block 5: Language + copyright */
.foot-lang-row {
  display: flex; align-items: center; justify-content: center;
  padding: 50px 0; border-bottom: 1px solid var(--navy-thread);
}
.foot-lang-label {
  font-family: var(--ff-en); font-size: 11px; font-weight: 400;
  letter-spacing: .36em; text-transform: uppercase; color: var(--navy-mute);
}
.foot-lang { display: flex; gap: 12px; flex-wrap: wrap }
/* Language switcher: Noto Serif JP 統一 */
.foot-lang button {
  position: relative; font-family: var(--ff-jp); font-weight: 300;
  font-size: 14px; letter-spacing: .14em;
  padding: 10px 18px; border: 1px solid var(--navy-hair); color: var(--navy);
  background: transparent; cursor: pointer; opacity: .85;
  transition: all .4s ease;
}
.foot-lang button.on {
  opacity: 1; background: var(--navy); color: var(--beige); border-color: var(--navy);
}
.foot-lang button:hover { opacity: 1; border-color: var(--navy) }
/* Note: only show buttons for languages whose translation of THIS page exists.
   Per WP Hreflang Manager, missing-translation languages are auto-hidden.
   No "coming soon" state — preview pages just show 4 buildable languages. */

/* Copyright: Noto Serif JP 統一 */
.foot-copy {
  text-align: center; padding-top: 48px;
  font-size: 13px; letter-spacing: .12em; color: var(--navy-mute);
  font-family: var(--ff-jp); font-weight: 300;
}

@media (max-width: 768px) {
  .foot { padding: 100px 0 40px }
  .foot-inner { padding: 0 24px }
  .foot-welcome { padding: 40px 24px; margin-bottom: 60px }
  .foot-welcome-title { font-size: 20px }
  .foot-news { padding: 50px 0 }
  .foot-news-title { font-size: 17px }
  .foot-news-form { flex-direction: column; gap: 10px }
  .foot-news-form button { padding: 12px 20px }
  .foot-nav { grid-template-columns: 1fr 1fr; gap: 40px 30px; padding: 60px 0 60px }
  .foot-lang-row { flex-direction: column; gap: 20px; align-items: flex-start }
  .foot-copy { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 40px }
}

/* ========================================================
   SECTION: TEACHERS / PERSONS (for introduction Part 2, etc.)
   ======================================================== */
.persons {
  background: var(--beige);
  padding: 140px 0;
}
.persons-inner {
  max-width: 900px; margin: 0 auto; padding: 0 24px;
}
.person {
  display: grid; grid-template-columns: 240px 1fr;
  gap: 60px; align-items: start;
  padding: 60px 0;
}
.person + .person { border-top: 1px solid var(--navy-thread) }
.person-photo {
  aspect-ratio: 3/4; overflow: hidden; background: var(--beige-deep);
}
.person-photo img { width: 100%; height: 100%; object-fit: cover }
.person-body .eyebrow { margin-bottom: 14px }
.person-en {
  font-family: var(--ff-en); font-style: italic;
  font-size: 18px; color: var(--navy-mute); margin-bottom: 10px;
}
.person-jp {
  font-size: 26px; letter-spacing: .2em; color: var(--navy);
  line-height: 1.6; margin-bottom: 22px;
}
.person-bio {
  font-size: 14px; line-height: 2.1; letter-spacing: .08em;
  color: var(--navy-soft); margin-bottom: 26px;
}
.person-cta {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 13px; letter-spacing: .26em; color: var(--navy);
  padding-bottom: 6px; border-bottom: 1px solid var(--navy-hair);
  transition: letter-spacing .5s ease;
}
.person-cta:hover { letter-spacing: .36em }
@media (max-width: 768px) {
  .persons { padding: 80px 0 }
  .person { grid-template-columns: 1fr; gap: 24px; padding: 50px 0 }
  .person-photo { max-width: 240px }
  .person-jp { font-size: 22px }
}

/* ========================================================
   ARTICLE DETAIL (common)
   ======================================================== */
.article {
  background: var(--white); padding: 140px 0 100px;
}
.article-inner {
  max-width: 720px; margin: 0 auto; padding: 0 24px;
}
.article-eyebrow { margin-bottom: 18px; text-align: center }
/* Scale #3 H1 ページタイトル(記事タイトル) */
.article-title {
  font-size: 40px; letter-spacing: .22em; line-height: 1.6;
  color: var(--navy); text-align: center; margin-bottom: 40px;
}
.article-hero {
  aspect-ratio: 16/9; background: var(--beige); overflow: hidden;
  margin-bottom: 80px;
}
.article-hero img { width: 100%; height: 100%; object-fit: cover }
/* Scale #8 Body */
.article-body p {
  font-size: 17px; line-height: 2.1; letter-spacing: .08em;
  color: var(--navy-soft); margin-bottom: 28px;
}
@media (max-width: 768px) {
  .article-body p { font-size: 15px }
}
/* Scale #7 Lead */
.article-body .lead {
  font-size: 18px; font-style: italic; color: var(--navy);
  letter-spacing: .10em; line-height: 2.0; margin-bottom: 40px;
}
/* Scale #5 H3 サブセクション */
.article-body h3 {
  font-size: 22px; letter-spacing: .16em; color: var(--navy);
  line-height: 1.6; margin: 60px 0 24px;
}
.article-body .pullquote {
  font-family: var(--ff-en); font-style: italic;
  font-size: 22px; letter-spacing: .12em; line-height: 1.9;
  color: var(--navy); text-align: center;
  padding: 60px 0; border-top: 1px solid var(--navy-thread);
  border-bottom: 1px solid var(--navy-thread); margin: 70px 0;
}
.article-body .pullquote-jp {
  font-family: var(--ff-jp); font-style: normal;
  font-size: 19px; letter-spacing: .18em;
}

/* Article meta row (カテゴリ · 主題)
   IMPORTANT: 日付・投稿日は載せない (design-decisions.md 項目 29 / 2026-04-18 確定)。
   例外: /notice/ お知らせ・/events/ イベントのみ日付表示可。 */
.article-meta {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 12px; letter-spacing: .28em; color: var(--navy-mute);
  text-align: center; margin-bottom: 22px;
  display: flex; justify-content: center; align-items: center; gap: 14px;
}
.article-meta .sep {
  width: 4px; height: 4px; background: var(--navy-hair);
  border-radius: 0; display: inline-block;
}

/* Ornamental divider (between major article passages) */
.article-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 22px; margin: 70px auto; max-width: 280px;
  color: var(--navy-mute);
}
.article-divider::before,
.article-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--navy-thread);
}
.article-divider-mark {
  font-family: var(--ff-en); font-style: italic;
  font-size: 14px; letter-spacing: .32em;
}

/* Inline body figure (画像 + caption) */
.article-figure {
  margin: 70px -60px; /* slight bleed beyond 720px column for impact */
}
.article-figure img {
  width: 100%; height: auto; display: block;
  filter: saturate(.92);
}
.article-figure figcaption {
  font-family: var(--ff-jp); font-style: italic;
  font-size: 13px; letter-spacing: .12em; line-height: 1.8;
  color: var(--navy-mute); text-align: center;
  margin-top: 18px; padding: 0 24px;
}

/* Closing signature (記事末尾、書き手の余韻) */
.article-signoff {
  font-family: var(--ff-en); font-style: italic;
  font-size: 15px; letter-spacing: .14em; line-height: 1.9;
  color: var(--navy-mute); text-align: center;
  margin: 80px 0 0;
}
.article-signoff-jp {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 13px; letter-spacing: .28em; color: var(--navy-mute);
  text-align: center; margin-top: 12px;
}

@media (max-width: 768px) {
  .article { padding: 100px 0 60px }
  .article-inner { padding: 0 24px }
  .article-title { font-size: 24px }
  .article-hero { margin-bottom: 50px }
  .article-body p { font-size: 15px }
  .article-body .pullquote { font-size: 18px; padding: 44px 0; margin: 50px 0 }
  .article-body .pullquote-jp { font-size: 16px }
  .article-meta { font-size: 11px; gap: 10px; margin-bottom: 18px }
  .article-divider { margin: 50px auto; max-width: 200px }
  .article-figure { margin: 50px 0 }
  .article-figure figcaption { font-size: 12px; padding: 0 12px }
  .article-signoff { font-size: 14px; margin-top: 60px }
}

/* ========================================================
   ARTICLE END: hpp-rec — Phase B 推薦ブロック (CC00 2026-05-02 正本に整合)
   レイアウト: eyebrow + 関連 2 件 (横並びカード, 16:9 thumb 100px) +
                イベント CTA 1 件 (beige box) + 末尾 secondary link
   仕様の正本: /00. hooponopono-kpi/recommend_block_injector.py
   ======================================================== */
.hpp-rec {
  max-width: 720px; margin: 80px auto 0;
  padding: 32px 24px;
  border-top: 1px solid var(--navy-hair);
  border-bottom: 1px solid var(--navy-hair);
  font-family: var(--ff-jp); font-weight: 300;
}
.hpp-rec-eyebrow {
  font-size: 14px; letter-spacing: .14em;
  color: var(--navy-mute); margin: 0 0 24px;
}
.hpp-rec-list {
  list-style: none; padding: 0; margin: 0 0 24px;
}
.hpp-rec-item {
  border-bottom: 1px solid var(--navy-thread);
  padding: 16px 0;
  display: flex; gap: 16px; align-items: flex-start;
}
.hpp-rec-thumb {
  flex: 0 0 100px; width: 100px;
}
.hpp-rec-thumb img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16/9; object-fit: cover;
  filter: saturate(.92);
}
.hpp-rec-text { flex: 1; min-width: 0 }
.hpp-rec-cat {
  display: block;
  font-size: 13px; letter-spacing: .14em;
  color: var(--navy-mute); margin-bottom: 4px;
}
.hpp-rec-title {
  font-size: 16px; letter-spacing: .06em;
  color: var(--navy); text-decoration: none;
  line-height: 1.5;
  transition: opacity .3s ease;
}
.hpp-rec-title:hover { opacity: .72 }
.hpp-rec-cta {
  background: var(--beige); padding: 32px 24px;
  display: flex; gap: 20px; align-items: center;
  margin-bottom: 16px;
}
.hpp-rec-cta-thumb {
  flex: 0 0 100px; width: 100px;
}
.hpp-rec-cta-thumb img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16/9; object-fit: cover;
  filter: saturate(.92);
}
.hpp-rec-cta-text { flex: 1; min-width: 0 }
.hpp-rec-cta-eyebrow {
  font-size: 13px; letter-spacing: .14em;
  color: var(--navy-mute); margin: 0 0 10px;
}
.hpp-rec-cta-title {
  font-size: 17px; letter-spacing: .06em;
  color: var(--navy); margin: 0 0 14px;
  line-height: 1.5;
}
.hpp-rec-cta-link {
  font-size: 13px; letter-spacing: .14em;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--navy);
  padding-bottom: 2px;
  transition: letter-spacing .5s ease;
}
.hpp-rec-cta-link:hover { letter-spacing: .22em }
.hpp-rec-secondary {
  text-align: center; padding-top: 8px;
}
.hpp-rec-secondary-link {
  display: inline-block;
  font-size: 13px; letter-spacing: .14em;
  color: var(--navy-mute); text-decoration: none;
  border-bottom: 1px solid var(--navy-hair);
  padding-bottom: 2px;
  transition: color .4s ease, border-color .4s ease;
}
.hpp-rec-secondary-link:hover {
  color: var(--navy); border-color: var(--navy);
}
@media (max-width: 768px) {
  .hpp-rec { margin-top: 60px; padding: 28px 20px }
  .hpp-rec-thumb,
  .hpp-rec-cta-thumb { flex: 0 0 88px; width: 88px }
  .hpp-rec-title { font-size: 15px }
  .hpp-rec-cta { padding: 24px 18px; gap: 16px }
  .hpp-rec-cta-title { font-size: 16px }
}

/* ========================================================
   ARTICLE END: Context CTA + Next-to-explore nav (§51)
   ======================================================== */
.ctx-cta {
  background: var(--beige); padding: 120px 0;
}
.ctx-cta-inner {
  max-width: 640px; margin: 0 auto; padding: 0 24px; text-align: center;
}
.ctx-cta .eyebrow { margin-bottom: 18px }
.ctx-cta-title {
  font-size: 32px; letter-spacing: .18em; color: var(--navy);
  line-height: 1.6; margin-bottom: 22px;
}
.ctx-cta-desc {
  font-size: 14px; line-height: 2; letter-spacing: .08em;
  color: var(--navy-soft); margin-bottom: 36px;
}

/* NOTE: .next-nav was removed 2026-05-14 (Genio) — the in-page
   shortcut links 記事/動画/クラス/セッション/ツール/イベント duplicated
   the fixed-header drawer navigation, breaking Aman-style restraint.
   The drawer is the single source of truth for site navigation. */

/* ========================================================
   ARCHIVE PAGINATION — 全 archive 共通の "次のページ →" UI
   適用: reading.html / kamaile-rafaelovich/movies/ / 将来の各
   /teachers/{slug}/movies/ 等。9 件 / page をデフォルト。
   ======================================================== */
.archive-pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 32px; margin: 80px auto 0; padding: 0 24px;
  font-family: var(--ff-jp); font-weight: 300;
}
.archive-pagination-link {
  font-size: 14px; letter-spacing: .14em;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--navy-thread);
  padding: 4px 0;
  cursor: pointer;
  background: transparent; border-top: 0; border-left: 0; border-right: 0;
  transition: border-color .4s ease, letter-spacing .5s ease, opacity .3s ease;
}
.archive-pagination-link:hover {
  border-color: var(--navy);
  letter-spacing: .22em;
}
.archive-pagination-link[aria-disabled="true"] {
  opacity: .22; pointer-events: none;
  letter-spacing: .14em;
}
.archive-pagination-indicator {
  font-family: var(--ff-en); font-style: italic;
  font-size: 13px; letter-spacing: .18em; color: var(--navy-mute);
  user-select: none; min-width: 56px; text-align: center;
}
@media (max-width: 768px) {
  .archive-pagination { gap: 22px; margin-top: 60px }
  .archive-pagination-link { font-size: 13px }
}

@media (max-width: 768px) {
  .ctx-cta { padding: 80px 0 }
  .ctx-cta-title { font-size: 22px }
}

/* ========================================================
   READINGS LIST PAGE (vertical filter per §47)
   ======================================================== */
.page-head {
  background: var(--white); padding: 140px 0 80px; text-align: center;
}
.page-head .eyebrow { margin-bottom: 24px }
/* Scale #3 H1 ページタイトル */
.page-head h1 {
  font-size: 40px; letter-spacing: .22em; color: var(--navy);
  line-height: 1.6; margin-bottom: 24px;
}
@media (max-width: 768px) {
  .page-head h1 { font-size: 28px }
}
.page-head .sub {
  font-family: var(--ff-en); font-style: italic;
  font-size: 15px; color: var(--navy-mute); letter-spacing: .08em;
}

.rlist-wrap {
  max-width: 1100px; margin: 0 auto; padding: 40px 24px 120px;
  display: grid; grid-template-columns: 220px 1fr; gap: 80px;
}
.rlist-filter {
  position: sticky; top: 100px; align-self: start;
  display: flex; flex-direction: column; gap: 4px;
}
.rlist-filter button {
  text-align: left; padding: 10px 0;
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 14px; letter-spacing: .14em; color: var(--navy-soft);
  opacity: .7; border-bottom: 1px solid transparent;
  transition: opacity .3s ease, border-color .3s ease, padding .3s ease;
}
.rlist-filter button.on {
  opacity: 1; color: var(--navy);
  border-bottom: 1px solid var(--navy);
  padding-left: 10px;
}
.rlist-filter button:hover { opacity: 1 }

.rlist-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 70px 60px;
}
/* Mobile: collapsible filter panel (more Aman-like than horizontal scroll) */
.rlist-filter-toggle {
  display: none; /* desktop hidden */
  width: 100%; padding: 18px 24px;
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 14px; letter-spacing: .16em; color: var(--navy);
  background: rgba(250, 250, 250, .5);
  border: 1px solid var(--navy-thread); border-radius: 0;
  text-align: left; position: relative;
  transition: background .3s ease;
}
.rlist-filter-toggle::after {
  content: '▾'; position: absolute; right: 24px; top: 50%;
  transform: translateY(-50%); font-size: 10px;
  color: var(--navy-mute); transition: transform .3s ease;
}
.rlist-filter-toggle.open::after { transform: translateY(-50%) rotate(180deg) }
.rlist-filter-toggle .label-current {
  font-family: var(--ff-en); font-size: 10px;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--navy-mute); display: block; margin-bottom: 4px;
}

@media (max-width: 768px) {
  .page-head { padding: 100px 0 50px }
  .page-head h1 { font-size: 26px }
  .rlist-wrap { grid-template-columns: 1fr; gap: 24px; padding: 20px 24px 80px }
  .rlist-filter-toggle { display: block }
  .rlist-filter {
    position: static; flex-direction: column; gap: 0;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .5s ease, opacity .3s ease, padding .3s ease;
    padding: 0 24px;
    background: rgba(250, 250, 250, .6);
    border-left: 1px solid var(--navy-thread);
    border-right: 1px solid var(--navy-thread);
  }
  .rlist-filter.open {
    max-height: 500px; opacity: 1; padding: 12px 24px;
    border-bottom: 1px solid var(--navy-thread);
  }
  .rlist-filter button {
    padding: 12px 0; font-size: 14px;
    border-bottom: 1px solid var(--hair-light);
    text-align: left; justify-content: flex-start;
  }
  .rlist-filter button:last-child { border-bottom: 0 }
  .rlist-filter button.on { padding-left: 0; border-bottom: 1px solid var(--hair-light) }
  .rlist-grid { grid-template-columns: 1fr; gap: 50px }
}

/* ========================================================
   TEACHER INDIVIDUAL PAGE (§48)
   ======================================================== */
.teacher-head {
  background: var(--beige); padding: 140px 0 100px;
}
.teacher-head-inner {
  max-width: 1000px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 320px 1fr; gap: 80px; align-items: start;
}
.teacher-photo {
  aspect-ratio: 3/4; overflow: hidden; background: var(--beige-deep);
}
.teacher-photo img { width: 100%; height: 100%; object-fit: cover }
.teacher-head .eyebrow { margin-bottom: 14px }
.teacher-en {
  font-family: var(--ff-en); font-style: italic; font-size: 22px;
  color: var(--navy-mute); margin-bottom: 12px;
}
/* Scale #3 H1 ページタイトル */
.teacher-jp {
  font-size: 40px; letter-spacing: .22em; color: var(--navy);
  line-height: 1.6; margin-bottom: 30px;
}
.teacher-role {
  font-family: var(--ff-en); font-size: 11px; font-weight: 400;
  letter-spacing: .34em; text-transform: uppercase; color: var(--navy-mute);
  margin-bottom: 30px;
}
.teacher-bio {
  font-size: 15px; line-height: 2.1; letter-spacing: .08em;
  color: var(--navy-soft); margin-bottom: 24px;
}

.teacher-sec {
  padding: 120px 0; background: var(--white);
}
.teacher-sec + .teacher-sec {
  background: var(--beige);
}
.teacher-sec .sec-head { margin-bottom: 80px }
.teacher-sec .sec-title { font-size: 32px }
.teacher-grid-3 {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 60px; padding: 0 60px;
}
.teacher-grid-2 {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 70px 80px; padding: 0 60px;
}
.teacher-more { text-align: center; margin-top: 70px }

@media (max-width: 768px) {
  .teacher-head { padding: 100px 0 60px }
  .teacher-head-inner { grid-template-columns: 1fr; gap: 40px; padding: 0 36px }
  .teacher-photo { max-width: 280px }
  .teacher-jp { font-size: 28px }
  .teacher-sec { padding: 80px 0 }
  .teacher-sec .sec-title { font-size: 24px }
  .teacher-grid-3, .teacher-grid-2 {
    grid-template-columns: 1fr; gap: 50px; padding: 0 36px;
  }
}

/* ========================================================
   FALLBACK THUMB (when no image)
   ======================================================== */
.thumb-fallback {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #e3ece8 0%, #a9bdb7 100%);
}
.thumb-fallback::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(50, 68, 47, .08) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* ========================================================
   UTILS
   ======================================================== */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px }
.hidden { display: none !important }
.text-center { text-align: center }

/* ============================================================
   v2 ADDITIONS (2026-04-30)
   ============================================================ */

/* マスター・ナラティブ帯（ホーム 2nd ブロック） */
.brand-statement {
  background: var(--beige); padding: 200px 0;
  text-align: center;
}
.brand-statement-inner {
  max-width: 760px; margin: 0 auto; padding: 0 24px;
}
.brand-statement p {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 26px; line-height: 2.1; letter-spacing: .18em;
  color: var(--navy);
}
@media (max-width: 768px) {
  .brand-statement { padding: 100px 0 }
  .brand-statement p { font-size: 18px; line-height: 2; letter-spacing: .14em }
}

/* 系譜ページ — エッセイ形式 */
.lineage-page {
  background: var(--white);
}
.lineage-intro {
  padding: 140px 0 80px; text-align: center;
}
.lineage-intro h1 {
  font-size: 40px; letter-spacing: .22em; line-height: 1.6;
  color: var(--navy); margin-bottom: 18px;
  font-family: var(--ff-jp); font-weight: 300;
}
.lineage-intro .sub {
  font-size: 16px; letter-spacing: .14em; color: var(--navy-mute);
  font-family: var(--ff-jp); font-weight: 300;
}
.lineage-essay {
  max-width: 720px; margin: 0 auto; padding: 0 24px;
}
.lineage-essay > p {
  font-size: 17px; line-height: 2.1; letter-spacing: .08em;
  color: var(--navy-soft); margin-bottom: 36px;
}
.lineage-section {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 50px; align-items: start;
  margin: 100px 0;
}
.lineage-section.flip { grid-template-columns: 1fr 220px; }
.lineage-section.flip .lineage-portrait { order: 2 }
.lineage-section.flip .lineage-text { order: 1 }
.lineage-portrait {
  aspect-ratio: 3/4; background: var(--beige-deep);
  filter: sepia(0.18) brightness(0.95);
  overflow: hidden;
}
.lineage-portrait img { width: 100%; height: 100%; object-fit: cover }
.lineage-portrait .caption {
  font-family: var(--ff-en); font-style: italic;
  font-size: 13px; color: var(--navy-mute);
  margin-top: 14px;
}
.lineage-text h2 {
  font-size: 28px; letter-spacing: .2em; line-height: 1.6;
  color: var(--navy); margin-bottom: 20px;
  font-family: var(--ff-jp); font-weight: 300;
}
.lineage-text .role {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 13px; letter-spacing: .22em; color: var(--navy-mute);
  margin-bottom: 18px;
}
.lineage-text p {
  font-size: 16px; line-height: 2.1; letter-spacing: .08em;
  color: var(--navy-soft); margin-bottom: 22px;
}
.lineage-quote {
  text-align: center; padding: 80px 24px;
  max-width: 720px; margin: 0 auto;
}
.lineage-quote p {
  font-family: var(--ff-jp); font-style: italic; font-weight: 300;
  font-size: 22px; line-height: 1.9; letter-spacing: .14em;
  color: var(--navy);
}
.lineage-closing {
  background: var(--beige); padding: 140px 0;
  text-align: center;
}
.lineage-closing-inner {
  max-width: 720px; margin: 0 auto; padding: 0 24px;
}
.lineage-closing p {
  font-size: 17px; line-height: 2.1; letter-spacing: .08em;
  color: var(--navy-soft);
}
.lineage-end-image {
  width: 100%; aspect-ratio: 21/9;
  background: linear-gradient(180deg, #dde7e2 0%, #a9bdb7 100%);
  position: relative; overflow: hidden;
}
.lineage-end-image::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(50, 68, 47, .04) 1px, transparent 1px);
  background-size: 6px 6px;
}
@media (max-width: 768px) {
  .lineage-section,
  .lineage-section.flip { grid-template-columns: 1fr; gap: 30px }
  .lineage-section.flip .lineage-portrait { order: 0 }
  .lineage-section.flip .lineage-text { order: 0 }
  .lineage-portrait { max-width: 220px; margin: 0 auto }
  .lineage-text h2 { font-size: 22px }
  .lineage-quote p { font-size: 18px }
  /* grid が 1 列に潰れるモバイルでは末尾 CTA を中央揃え (Genio 指示 2026-05-08) */
  .lineage-text > p:last-child { text-align: center }
}

/* KR 個別のご依頼セクション (KR ページ用) */
.kr-individual {
  background: var(--beige); padding: 140px 0 120px;
}
.kr-individual-inner {
  max-width: 720px; margin: 0 auto; padding: 0 24px;
}
.kr-individual h2 {
  font-size: 30px; letter-spacing: .2em;
  text-align: center; color: var(--navy);
  margin-bottom: 60px;
  font-family: var(--ff-jp); font-weight: 300;
}
.kr-individual .lead {
  text-align: center; font-size: 16px; line-height: 2.1;
  letter-spacing: .08em; color: var(--navy-soft);
  margin-bottom: 80px; max-width: 600px;
  margin-left: auto; margin-right: auto;
}
.kr-service {
  padding: 50px 0;
  border-top: 1px solid var(--navy-thread);
  text-align: center; /* center the .inline-cta — see タスク2 (2026-05-08) */
}
.kr-service:last-child { border-bottom: 1px solid var(--navy-thread) }
.kr-service h3 {
  font-size: 21px; letter-spacing: .16em;
  color: var(--navy); margin-bottom: 16px;
  font-family: var(--ff-jp); font-weight: 300;
  text-align: center; /* Genio 指示 2026-05-08: 各サービスのタイトルは中央揃え */
}
.kr-service p {
  font-size: 16px; line-height: 2.1; letter-spacing: .08em;
  color: var(--navy-soft); margin-bottom: 18px;
  text-align: left; /* preserve readability */
}
.kr-service .inline-cta { margin-top: 6px; } /* typography from master */
@media (max-width: 768px) {
  .kr-individual { padding: 80px 0 }
  .kr-individual h2 { font-size: 22px }
  .kr-individual .lead { margin-bottom: 50px }
}

/* ============================================
   KR ページ共通: ヒーローバンド + Cross-Nav
   (kamaile-rafaelovich/* の各ページで使用、2026-05-08 追加)
   ============================================ */

/* ページ最上部の wide hero image (page-head の直後) */
.kr-page-hero {
  width: 100%;
  aspect-ratio: 696 / 254;
  background: var(--beige-deep);
  overflow: hidden;
}
.kr-page-hero img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}

/* 兄弟ページへの動線 (KR の他ページへ静かに誘導) */
.kr-cross-nav {
  background: var(--beige); padding: 100px 0;
  border-top: 1px solid var(--navy-thread);
}
.kr-cross-nav-inner {
  max-width: 880px; margin: 0 auto; padding: 0 24px;
}
.kr-cross-nav-eyebrow {
  font-family: var(--ff-en); font-style: italic;
  font-size: 14px; letter-spacing: .26em;
  color: var(--navy-mute);
  text-align: center;
  margin-bottom: 14px;
}
.kr-cross-nav-title {
  font-size: 24px; letter-spacing: .2em;
  color: var(--navy);
  font-family: var(--ff-jp); font-weight: 300;
  text-align: center;
  margin-bottom: 50px;
}
.kr-cross-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 50px 40px;
}
.kr-cross-card {
  display: block; text-decoration: none; color: inherit;
  transition: transform .5s ease;
}
.kr-cross-card:hover { transform: translateY(-3px); }
.kr-cross-thumb {
  aspect-ratio: 16/9; background: var(--beige-deep);
  overflow: hidden; margin-bottom: 18px;
}
.kr-cross-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease;
}
.kr-cross-card:hover .kr-cross-thumb img { transform: scale(1.04); }
.kr-cross-title {
  font-size: 16px; letter-spacing: .14em; line-height: 1.7;
  color: var(--navy);
  font-family: var(--ff-jp); font-weight: 300;
  text-align: center;
}
.kr-cross-back {
  text-align: center; margin-top: 70px;
}
.kr-cross-back a {
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 14px; letter-spacing: .14em; color: var(--navy-mute);
  border-bottom: 1px solid var(--navy-thread);
  padding-bottom: 4px;
  transition: color .4s ease, border-color .4s ease;
}
.kr-cross-back a:hover {
  color: var(--navy);
  border-color: var(--navy);
}

@media (max-width: 768px) {
  .kr-cross-nav { padding: 70px 0 }
  .kr-cross-grid { grid-template-columns: 1fr; gap: 36px; }
  .kr-cross-nav-title { font-size: 20px; margin-bottom: 36px; }
  .kr-cross-back { margin-top: 50px; }
}

/* ============================================
   KR ページ共通: service-body セクション
   (Genio 指示 2026-05-08: 白/黄土色を交互配置、h2 は中央揃え)
   ============================================
   各 service ページは service-body を意味単位で複数 <section> に分割し、
   .service-body--beige と .service-body--white を交互に当てる。
   ページ内の典型的な順序: 黄土色 (KR メッセージ) → 白 (詳細) → 黄土色 (注意/料金) */
.service-body--beige { background: var(--beige); }
.service-body--white { background: var(--white); }

/* service-body セクション内の h2 タイトルは中央揃え (Genio 指示 2026-05-08) */
.service-body h2 { text-align: center; }

/* ============================================
   POP LIST (Pattern D) — 講師ごとの記事・動画リスト
   ============================================
   小さめサムネ + タイトル の横並びリスト。日付なし。
   並び順は人気順 (Phase 2 で WP の popularity-sort 機構に接続予定;
   現状 preview は placeholder gradient + 手動順)。
   各講師プロフィールページで再利用するため global に置く。 */
.pop-section {
  padding: 80px 0;
}
.pop-section-inner {
  max-width: 720px; margin: 0 auto; padding: 0 24px;
}
.pop-section-title {
  text-align: center;
  font-size: 24px; letter-spacing: .2em; line-height: 1.6;
  color: var(--navy); margin-bottom: 50px;
  font-family: var(--ff-jp); font-weight: 300;
}
.pop-list {
  list-style: none; padding: 0; margin: 0;
}
.pop-list-item {
  border-bottom: 1px solid var(--navy-thread);
}
.pop-list-item:first-child {
  border-top: 1px solid var(--navy-thread);
}
.pop-list-item a {
  display: flex; align-items: center;
  padding: 22px 8px; gap: 22px;
  text-decoration: none; color: inherit;
  transition: background .3s ease;
}
.pop-list-item a:hover { background: rgba(50, 68, 47, .02); }
.pop-list-thumb {
  flex-shrink: 0;
  width: 110px; aspect-ratio: 16/10;
  background: var(--beige-deep); overflow: hidden;
}
.pop-list-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.pop-list-thumb-fallback {
  width: 100%; height: 100%;
}
.pop-list-title {
  flex: 1;
  font-size: 15px; line-height: 1.7; letter-spacing: .08em;
  color: var(--navy-soft);
}
.pop-section-more {
  text-align: center; margin-top: 40px;
}
@media (max-width: 540px) {
  .pop-section { padding: 60px 0; }
  .pop-section-title { font-size: 20px; margin-bottom: 36px; }
  .pop-list-item a { padding: 18px 4px; gap: 14px; }
  .pop-list-thumb { width: 80px; }
  .pop-list-title { font-size: 13px; }
}

/* KR の一人称メッセージ末尾の署名 (「平和 / KR」) */
.kr-signature {
  margin-top: 36px;
  margin-bottom: 36px;
  text-align: right;
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 16px; line-height: 2.0; letter-spacing: .14em;
  color: var(--navy);
  font-style: italic;
}

/* kr-message ページの英文メッセージ部分 */
.message-en {
  font-family: var(--ff-en); font-style: italic; font-weight: 300;
  font-size: 16px; line-height: 1.9; letter-spacing: .02em;
  color: var(--navy-mute);
  margin-bottom: 18px;
}
.message-en:last-of-type { margin-bottom: 0 }
.message-divider {
  border: 0; border-top: 1px solid var(--navy-thread);
  margin: 60px auto;
  max-width: 80px;
}
@media (max-width: 768px) {
  .message-en { font-size: 14px }
  .message-divider { margin: 40px auto }
}

/* KR の引用枠 (モーナとの会話の回想等) */
.service-body blockquote {
  margin: 50px 0;
  padding: 36px 32px;
  background: var(--white);
  border-left: 2px solid var(--navy-thread);
  font-family: var(--ff-jp); font-weight: 300;
}
.service-body blockquote p {
  font-size: 15px; line-height: 2.1; letter-spacing: .08em;
  color: var(--navy-soft);
  font-style: italic;
  margin-bottom: 16px;
}
.service-body blockquote p:last-child { margin-bottom: 0 }
@media (max-width: 768px) {
  .service-body blockquote { margin: 36px 0; padding: 28px 22px }
  .service-body blockquote p { font-size: 14px }
}

/* WWA 編集ブロック (/class/ ページ用) */
.wwa-block {
  background: var(--white); padding: 120px 0;
  border-top: 1px solid var(--navy-thread);
  border-bottom: 1px solid var(--navy-thread);
}
.wwa-block-inner {
  max-width: 720px; margin: 0 auto; padding: 0 24px;
}
.wwa-block h2 {
  font-size: 28px; letter-spacing: .2em; line-height: 1.6;
  color: var(--navy); margin-bottom: 30px;
  font-family: var(--ff-jp); font-weight: 300;
  text-align: center;
}
.wwa-block .essay-body p {
  font-size: 16px; line-height: 2.1; letter-spacing: .08em;
  color: var(--navy-soft); margin-bottom: 22px;
}
.wwa-block .returning {
  font-style: italic; color: var(--navy-mute);
  text-align: center; margin-top: 30px;
  font-size: 15px;
}
.wwa-block .next-date {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 50px; padding: 24px 0;
  border-top: 1px solid var(--navy-thread);
}
.wwa-block .next-date-label {
  font-size: 14px; letter-spacing: .14em; color: var(--navy-mute);
}
.wwa-block .next-date-value {
  font-size: 16px; letter-spacing: .12em; color: var(--navy);
}
.wwa-block .detail-link {
  text-align: right; margin-top: 30px;
}
@media (max-width: 768px) {
  .wwa-block { padding: 80px 0 }
  .wwa-block h2 { font-size: 22px }
  .wwa-block .next-date { flex-direction: column; gap: 8px; align-items: flex-start }
}

/* フッター・ミニエコー (オプション) */
.footer-echo {
  text-align: center; padding: 32px 0 0;
  border-top: 1px solid var(--navy-thread);
  margin-top: 40px;
  font-family: var(--ff-jp); font-weight: 300;
  font-size: 11px; letter-spacing: .42em;
  color: var(--navy-mute);
}