/*
 * typography.css — 文字まわり（指示書 §18）。
 *
 * スマートフォンでの可読性を最優先にする。値はすべて tokens.css の変数から。
 * ここは「素の要素」の土台だけ。記事本文（.entry-content）の見出し装飾は
 * article.css の担当（旧記事と衝突させないため specificity を分けてある）。
 */

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--picico-font-heading);
	font-weight: var(--picico-font-weight-bold);
	line-height: var(--picico-line-height-heading);
	letter-spacing: var(--picico-letter-spacing-heading);
	text-wrap: balance;
	/*
	 * 日本語の見出しを文節の切れ目で折る（Phase 4）。
	 * 「ページが見つか / りませんでした」のような読みにくい改行を避ける。
	 * 対応していないブラウザは今までどおり任意の位置で折るだけなので、
	 * 付けても壊れない。
	 */
	word-break: auto-phrase;
}

:where(h1) {
	font-size: var(--picico-font-size-display);
}

:where(h2) {
	font-size: var(--picico-font-size-xxl);
}

:where(h3) {
	font-size: var(--picico-font-size-xl);
}

:where(h4) {
	font-size: var(--picico-font-size-lg);
}

:where(h5) {
	font-size: var(--picico-font-size-md);
}

:where(h6) {
	font-size: var(--picico-font-size-sm);
}

:where(p) {
	line-height: var(--picico-line-height-body);
}

:where(small) {
	font-size: var(--picico-font-size-sm);
}

:where(strong, b) {
	font-weight: var(--picico-font-weight-bold);
}

:where(code, kbd, samp, pre) {
	font-family: var(--picico-font-mono);
	font-size: 0.9375em;
}

:where(pre) {
	padding: var(--picico-space-sm);
	overflow-x: auto;
	background-color: var(--picico-color-surface-alt);
	border-radius: var(--picico-radius-sm);
}

:where(blockquote) {
	padding-left: var(--picico-space-md);
	border-left: 4px solid var(--picico-color-border);
	color: var(--picico-color-text-muted);
}

/* ページの主見出し（アーカイブ・検索・記事タイトル）。 */
.pc-archive-title {
	font-size: var(--picico-font-size-xxl);
	line-height: var(--picico-line-height-tight);
}

/*
 * セクション見出し（.pc-section__title）・チップ・バッジ・.pc-empty は
 * components.css（Worker A）の担当。ここには置かない。
 */