@layer components {
	/* ============================================================
	 * .page-prose … 本文プロースの opt-in クラス（タイポ＋縦リズムを一体で持つ）。
	 * 付与した要素の配下の素の見出し・リンクに Figma 準拠の体裁を与え、直下の子に
	 * 縦リズム（セクション上は広く・見出し直後は詰める）を与える。編集者はクラスも
	 * グルーピングも要らず、素の H2/P/H3 を並べるだけでよい（CLAUDE.md コンテンツ
	 * 編集ポリシー「クラス不要で編集可」／グルーピング負担の解消。#122・#142）。
	 * 移植元 css/style.css の .page-content 相当。
	 *
	 * 適用箇所：page.html の post-content（テンプレに className 焼き込み）と
	 * single-project の project-sheet 本文（.project-sheet__inner）。
	 *   - 幅（content-max 1216 中央）は構造クラス .nexray-sheet__inner が持つ（shell.css）。
	 *     .page-prose は「体裁＋余白」だけを担い、幅とは関心を分離する（併記して使う）。
	 *   - opt-in なので自前 spacing/体裁を持つブロック（project-summary の概要表等）には
	 *     .page-prose を付けない＝波及ゼロ。旧 .nexray-sheet__inner 構造スコープの
	 *     project-summary__title 除外はスコープ外化で不要になった。
	 *
	 * 見出し階層：hero=H1 → 本文セクション=H2 → 下位=H3/H4。H2 スキップを避ける。
	 * リズム方式：lobotomized owl（`> * + *`）で base gap ＋ 見出し（h2/h3）に上マージンを
	 * 上書きする差分マージン。隣接セレクタなので先頭要素には余白が付かない（天余白ゼロ）。
	 * base gap は 2em 固定。blockGap を持たない生の the_content（project-sheet）でも
	 * 自己完結で動く。class は front/editor 両方に乗るので WYSIWYG。レスポンシブは
	 * モバイルファースト（clamp で流動・ADR 0009）。
	 *
	 * 除外：装飾済みブロック見出しは体裁の対象外にする。
	 *   - .content-block__title … グレー箱の箱見出し（content-block.css が持つ）。prose 内に出る。
	 *   - [class*="is-style-"]  … スタイルバリエーション見出し（例 is-style-nexray-badge
	 *     ＝project-intro の枠囲みバッジ）。素の見出しより高特異度で上書きしてしまうため
	 *     汎用属性一致で一括除外（将来の is-style 追加も自動で外れる）。prose 内に出る。
	 *
	 * H2 の体裁だけは company の動的ブロック見出し .content-table-section__title と共有する
	 * ため（DRY・#122）、.page-prose の子孫でない同セレクタを含む結合ルールとして nest の
	 * 外に置く（下部）。それ以外の .page-prose 子孫ルールは .page-prose {} に nest する。
	 * ============================================================ */

	.page-prose {
		line-height: 2;

		/* --- 縦リズム（差分マージン） ---
		 * リセット（直下の子の既定 block margin を 0 化）→ owl で base gap を積み、
		 * 見出しは上書き、の順で並べる（同特異度＝ソース順で後勝ちのため順序が要）。 */
		& > * {
			margin-block: 0;
		}

		& > * + * {
			margin-block-start: 2em;
		}

		/* セクション見出し（H2）上＝新セクションを大きく離す（移植元 gap-92 相当）。
		 * `> * + h2`（0,1,1）は base owl（0,1,0）より高特異度で勝つ。 */
		& > * + h2 {
			margin-block-start: clamp(3rem, 8vw, 6rem);
		}

		/* 小見出し（H3）上＝中位の区切り */
		& > * + h3 {
			margin-block-start: clamp(2rem, 5vw, 4rem);
		}

		/* --- 下位見出し（H3・太字中見出し。将来の入れ子見出し用） --- */
		& h3:not(.content-block__title):not([class*="is-style-"]) {
			font-size: var(--wp--preset--font-size--large);
			font-weight: 600;
			line-height: 1.4;
			color: var(--wp--preset--color--black);
		}

		/* --- 下位見出し（H4・Figma h4Title 相当） --- */
		& h4:not(.content-block__title):not([class*="is-style-"]) {
			font-size: clamp(1.125rem, 2vw, 1.5rem);
			font-weight: 600;
			line-height: 1.4;
			color: var(--wp--preset--color--black);
		}

		/* --- 本文中リンク（段落・リスト内の素の <a>） ---
		 * :where() で特異度 0 に抑え、箱内リンク（.content-block a）が勝つようにする。 */
		& :where(p, li) a {
			color: var(--wp--preset--color--primary);
			text-decoration: underline;
			text-underline-offset: 3px;
			overflow-wrap: anywhere;
			transition: opacity var(--nexray-transition);

			&:hover {
				opacity: 0.7;
			}
		}
	}

	/* --- セクション見出し（H2・下線ルール付きの細字大見出し） ---
	 * company の動的ブロック見出し .content-table-section__title も同体裁のため
	 * ここへ一本化（DRY）。content-table.css 側は構造（margin/gap）だけ持つ。
	 * .content-table-section__title は .page-prose の子孫でないため .page-prose {}
	 * の nest には入れず、結合セレクタとして nest の外に置く。 */
	.page-prose h2:not(.content-block__title):not([class*="is-style-"]),
	.content-table-section__title {
		padding-bottom: clamp(1rem, 3vw, 2rem);
		font-size: clamp(1.5rem, 3vw, 2.5rem);
		font-weight: 300;
		line-height: 1.2;
		color: var(--wp--preset--color--black);
		border-bottom: 1px solid var(--wp--preset--color--slate-300);
	}

	/* content-table のブロック見出し（company）は .page-prose の直接子でなく入れ子に
	 * 出る（owl の対象外）ため、既定 block margin をここで 0 化する。#142 */
	.content-table-section__title {
		margin: 0;
	}
}