/* ============================================================
   typography.css  —  見出し階層・装飾・eyebrow・本文
   装飾は「デフォルト1つ＋クラスで切替」方式
   見出しに読点「、」は置かない運用（コピー側のルール）
   ============================================================ */
@layer typography {

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-body);
  color: var(--c-text);
  background: var(--c-bg);
}

/* --- 見出し階層：サイズ × 太さ ------------------------- */
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold);     line-height: var(--lh-heading); letter-spacing: var(--tr-heading); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold);     line-height: var(--lh-heading); letter-spacing: var(--tr-heading); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); }

/* --- ディスプレイ（ヒーロー h1） ----------------------- */
.t-display { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); }

/* --- 垂直リズム：上に大きく、下に少し ------------------ */
h1 { margin: 0 0 var(--sp-4); }
h2 { margin: var(--sp-6) 0 var(--sp-4); }
h3 { margin: var(--sp-5) 0 var(--sp-3); }
h4 { margin: var(--sp-4) 0 var(--sp-2); }
p  { margin: 0 0 var(--sp-3); word-break: auto-phrase; } /* 日本語の孤立行（一文字終わり）を抑制 */
p:last-child { margin-bottom: 0; }

:where(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
/* flex/grid の gap で制御する箱では margin を解除して二重加算を防ぐ */
.l-section__header > :where(h1, h2, h3, h4) { margin: 0; }

/* ============================================================
   h2 デフォルト装飾：左縦線（bar）
   ============================================================ */
h2 {
  position: relative;
  padding-left: 1.2em;
}
h2::before {
  content: "";
  position: absolute;
  left: 0; top: 0.2em; bottom: 0.2em;
  width: 3px;
  background: var(--c-accent);
  border-radius: 2px;
}

/* 番号付き（順序が意味を持つ節だけ：物語の章立てなど） */
h2.t-heading--number {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  padding-left: 0;
}
h2.t-heading--number::before {
  content: attr(data-number);
  position: static;
  width: auto; height: auto;
  background: transparent;
  border-radius: 0;
  font-family: var(--ff-num);
  font-size: 0.55em;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  color: var(--c-accent);
}

/* センター＋下線（TOPの大セクション・ヒーロー的） */
h2.t-heading--centered {
  text-align: center;
  padding-left: 0;
  padding-bottom: 0.7em;
}
h2.t-heading--centered::before {
  left: 50%; top: auto; bottom: 0;
  transform: translateX(-50%);
  width: 2.4em; height: 3px;
  border-radius: 2px;
}

/* 下線のみ（本文中の区切り見出し） */
h2.t-heading--underline {
  padding-left: 0;
  padding-bottom: 0.6em;
}
h2.t-heading--underline::before {
  left: 0; top: auto; bottom: 0;
  width: 2.4em; height: 3px;
  border-radius: 2px;
}

/* 装飾なし */
h2.t-heading--plain { padding-left: 0; }
h2.t-heading--plain::before { display: none; }

/* ============================================================
   h3 デフォルト装飾：左に小さな四角
   ============================================================ */
h3 {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
}
h3::before {
  content: "";
  display: block;
  width: 0.5em; height: 0.5em;
  margin-top: 0.5em;          /* 見出し1行目の位置に固定（複数行でも上に揃う） */
  background: var(--c-accent);
  border-radius: 1px;
  flex-shrink: 0;
}
h3.t-heading--rule {
  display: block;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--c-line);
}
h3.t-heading--rule::before { display: none; }
h3.t-heading--plain { display: block; }
h3.t-heading--plain::before { display: none; }

/* h4：左罫は廃止（縦線・インデントとも除去） */

/* ============================================================
   Eyebrow（セクション上の小ラベル）
   原則：日本語カテゴリ or 「01/02」の番号のみ
   ============================================================ */
.t-eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}

/* --- リード文 ------------------------------------------ */
.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--c-text-muted);
}

/* --- キャプション・小見出し補助 ------------------------ */
.t-caption { font-size: var(--fs-caption); color: var(--c-text-subtle); }
.t-small   { font-size: var(--fs-small); }

/* ============================================================
   grad-text：キーワード1語だけに効かせる強調（1ページ1〜2回）
   ============================================================ */
.t-grad {
  background: var(--c-brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* フォールバック（clip非対応時） */
  -webkit-text-fill-color: transparent;
}

/* --- 本文リンク ---------------------------------------- */
.t-body a,
a.t-link {
  color: var(--c-brand-800);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease);
}
.t-body a:hover,
a.t-link:hover { color: var(--c-brand-900); }
}