/*
 * TakaJun02 メインスタイル
 *
 * デザイントークン（色，フォント，余白，角丸）は theme.json で定義し，
 * ここでは theme.json だけでは表現できないコンポーネントの装飾を記述する．
 * 同じ値をハードコードせず，--wp--preset--* / --wp--custom--* を参照すること．
 */

:root {
	--tj-header-height: var(--wp--custom--header--height, 72px);
	--tj-transition: var(--wp--custom--transition--base, 0.2s ease);
}

/* ----------------------------------------
 * ベース・アクセシビリティ
 * ---------------------------------------- */

/* スクロール位置の復元まで滑らかにならないよう，フォーカス移動を伴う場合のみ適用する */
html:focus-within {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--wp--preset--color--primary-subtle);
	color: var(--wp--preset--color--primary-dark);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* スキップリンク（WordPressが自動出力する .skip-link） */
.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	clip-path: none;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	border-radius: var(--wp--custom--radius--small);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}

/* 見出しアンカーへのスクロール時，固定ヘッダーと重ならないようにする */
:where(h1, h2, h3, h4, h5, h6)[id],
:target {
	scroll-margin-top: calc(var(--tj-header-height) + 24px);
}

/* ----------------------------------------
 * ヘッダー
 * ---------------------------------------- */

.site-header-wrap {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--background);
	border-bottom: 1px solid transparent;
	transition: border-color var(--tj-transition), box-shadow var(--tj-transition);
}

.site-header-wrap.is-scrolled {
	border-bottom-color: var(--wp--preset--color--border);
	box-shadow: 0 1px 0 rgb(24 35 44 / 0.02);
}

.site-header__inner {
	min-height: var(--tj-header-height);
}

/* ナビゲーション：下線アニメーションと現在位置の表示 */
.site-nav .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
	padding: 0.65rem 0.2rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.site-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0.2rem;
	right: 0.2rem;
	bottom: 0.4rem;
	height: 2px;
	border-radius: 1px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--tj-transition);
}

.site-nav .wp-block-navigation-item__content:hover::after,
.site-nav .wp-block-navigation-item__content:focus-visible::after,
.site-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.site-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

/* モバイルメニューの開閉ボタン：44pxの操作領域を確保 */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: calc(var(--tj-header-height) + var(--wp--preset--spacing--50));
}

.wp-block-navigation__responsive-container.is-menu-open .site-nav,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

/* ----------------------------------------
 * ヒーロー
 * ---------------------------------------- */

.hero-section {
	background-color: var(--wp--preset--color--background);
	background-image:
		linear-gradient(180deg, transparent 40%, var(--wp--preset--color--background) 96%),
		linear-gradient(color-mix(in srgb, var(--wp--preset--color--border) 55%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--border) 55%, transparent) 1px, transparent 1px);
	background-size: auto, 44px 44px, 44px 44px;
}

.eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
}

/* サイト名を特大表示し，末尾にアクセント色のドットを付ける */
.hero-section__title {
	letter-spacing: -0.03em;
	line-height: 1.02;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.hero-section__title::after {
	content: ".";
	color: var(--wp--preset--color--primary);
}

/* 名前直下のロール表示 */
.hero-section__role {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text);
	margin-block-start: 0.5rem;
}

.hero-section__row {
	margin-block-start: var(--wp--preset--spacing--60);
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
}

.hero-section__intro {
	flex: 1 1 420px;
}

.hero-section__intro > * + * {
	margin-block-start: 0.75rem;
}

.hero-section__copy {
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

.hero-section__lead {
	max-width: 620px;
	line-height: 2;
}

/* 右側のモノスペースなメタ情報 */
.hero-section__meta {
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 2.1;
}

.hero-section__actions {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* ----------------------------------------
 * 文字フリップ演出（hero-text.js）
 * 1文字ずつX軸回転で入れ替わる．reduced-motion時はJS側で無効化される．
 * ---------------------------------------- */

.tj-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.tj-word {
	display: inline-block;
	white-space: nowrap;
}

.tj-char {
	display: inline-block;
	backface-visibility: hidden;
}

.tj-flip-in {
	animation: tj-flip-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tj-flip-out {
	animation: tj-flip-out 0.4s cubic-bezier(0.55, 0, 0.55, 0.2) both;
}

@keyframes tj-flip-in {
	from {
		transform: perspective(600px) rotateX(95deg);
		opacity: 0;
	}

	to {
		transform: perspective(600px) rotateX(0deg);
		opacity: 1;
	}
}

@keyframes tj-flip-out {
	from {
		transform: perspective(600px) rotateX(0deg);
		opacity: 1;
	}

	to {
		transform: perspective(600px) rotateX(-95deg);
		opacity: 0;
	}
}

/* ----------------------------------------
 * スクロールリビール（reveal.js）
 * ビューポートへ入った要素をふわっと立ち上げる．
 * クラスはJSが付与するため，JS無効時は通常表示のまま．
 * ---------------------------------------- */

.tj-reveal {
	opacity: 0;
}

.tj-reveal--visible {
	animation: tj-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: var(--tj-reveal-delay, 0s);
}

@keyframes tj-reveal {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ----------------------------------------
 * ボタンのマイクロインタラクション
 * ---------------------------------------- */

.wp-block-button__link {
	transition:
		background-color var(--tj-transition),
		border-color var(--tj-transition),
		color var(--tj-transition),
		transform var(--tj-transition);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-1px);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* ----------------------------------------
 * トップページのセクション
 * ---------------------------------------- */

.section-header {
	margin-block-end: var(--wp--preset--spacing--60);
}

.section-header__title::before {
	content: "";
	display: block;
	width: 2rem;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
	margin-block-end: 0.75rem;
	transform-origin: left;
}

/* リビール時にアクセントバーを左から伸ばす．
 * 本体の tj-reveal（0.6s）より先に終わらせること．終了時のクラス除去で途中で切れないように． */
.section-header.tj-reveal--visible .section-header__title::before {
	animation: tj-bar-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--tj-reveal-delay, 0s) + 0.1s);
}

@keyframes tj-bar-in {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

.section-header__link a {
	text-decoration: none;
	font-weight: 500;
}

.section-header__link a:hover,
.section-header__link a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ----------------------------------------
 * カード（プロジェクト，Tech Stack）
 * ---------------------------------------- */

.project-card,
.stack-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50);
	height: 100%;
	transition:
		transform var(--tj-transition),
		border-color var(--tj-transition),
		box-shadow var(--tj-transition);
}

.project-card:hover,
.project-card:focus-within {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

.project-card > * + * {
	margin-block-start: 0.6rem;
}

.project-card__meta {
	gap: 0.5rem;
}

.project-card__year,
.project-fact__value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-secondary);
	letter-spacing: 0.04em;
}

.project-card__type,
.project-card__team {
	font-size: var(--wp--preset--font-size--x-small);
	background: var(--wp--preset--color--primary-subtle);
	color: var(--wp--preset--color--primary-dark);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.1rem 0.55rem;
}

.project-card .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ----------------------------------------
 * タグ・バッジ類
 * ---------------------------------------- */

/* 使用技術タグ（post-terms） */
.tech-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

.tech-tags .wp-block-post-terms__separator {
	display: none;
}

.tech-tags a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.1rem 0.55rem;
	transition: color var(--tj-transition), border-color var(--tj-transition);
}

.tech-tags a:hover,
.tech-tags a:focus-visible {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* カテゴリバッジ */
.term-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.term-badges .wp-block-post-terms__separator {
	display: none;
}

.term-badges a {
	font-size: var(--wp--preset--font-size--x-small);
	background: var(--wp--preset--color--primary-subtle);
	color: var(--wp--preset--color--primary-dark);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.1rem 0.55rem;
	text-decoration: none;
	transition: background-color var(--tj-transition);
}

.term-badges a:hover,
.term-badges a:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

/* 投稿タグ */
.term-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--x-small);
}

.term-tags .wp-block-post-terms__separator {
	display: none;
}

.term-tags a {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
}

.term-tags a::before {
	content: "#";
	opacity: 0.6;
}

.term-tags a:hover,
.term-tags a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Tech Stack のタグリスト */
.tag-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0;
	margin: 0;
}

.tag-list li {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-secondary);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.15rem 0.6rem;
	background: var(--wp--preset--color--surface);
}

.stack-card__title {
	margin-block-end: 0.75rem;
}

/* ----------------------------------------
 * 記事リスト（縦型・CPS研究室の新着情報風）
 * ---------------------------------------- */

.post-list .wp-block-post-template {
	list-style: none;
	padding: 0;
}

.post-row {
	padding-block: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.post-list .wp-block-post-template > li:first-child .post-row {
	border-top: 1px solid var(--wp--preset--color--border);
}

.post-row > * + * {
	margin-block-start: 0.5rem;
}

.post-row__meta {
	gap: 0.75rem;
}

.post-row .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-row .wp-block-post-excerpt__more-text {
	display: none;
}

/* 関連記事などのコンパクト表示 */
.post-row--compact {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1rem;
	padding-block: var(--wp--preset--spacing--40);
}

.post-row--compact > * + * {
	margin-block-start: 0;
}

/* ----------------------------------------
 * プロジェクトの全幅行（Selected Projects）
 * ---------------------------------------- */

.work-list .wp-block-post-template {
	list-style: none;
	padding: 0;
	counter-reset: tj-work;
}

.work-list .wp-block-post-template > li {
	counter-increment: tj-work;
}

/* 先頭行の上線．ホバー背景が左右へ広がるため，幅が変わらない li 側へ引く */
.work-list .wp-block-post-template > li:first-child {
	border-top: 1px solid var(--wp--preset--color--border);
}

.work-row {
	position: relative;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	column-gap: 1rem;
	row-gap: 1rem;
	padding-block: var(--wp--preset--spacing--60);
	transition: background-color var(--tj-transition);
}

.work-row:hover,
.work-row:focus-within {
	background-color: var(--wp--preset--color--background-subtle);
}

.work-row > * {
	margin-block-start: 0;
}

/* 行の区切り線．リビール時に左から描画するため，borderではなく擬似要素で引く */
.work-row::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 1px;
	background: var(--wp--preset--color--border);
	transform-origin: left;
}

/* リビール時に区切り線を左から伸ばす．
 * 本体の tj-reveal（0.6s）より先に終わらせること．終了時のクラス除去で途中で切れないように． */
.work-row.tj-reveal--visible::after {
	animation: tj-bar-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--tj-reveal-delay, 0s) + 0.1s);
}

/* 連番（01, 02, …） */
.work-row::before {
	content: counter(tj-work, decimal-leading-zero);
	grid-row: 1;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--heading);
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.06em;
	padding-block-start: 0.3em;
}

/* 行ホバーでタイトルをアクセント色にする */
.work-row .wp-block-post-title {
	transition: color var(--tj-transition);
}

.work-row:hover .wp-block-post-title,
.work-row:focus-within .wp-block-post-title {
	color: var(--wp--preset--color--primary);
}

.work-row__main {
	grid-column: 2;
}

.work-row__main > * + * {
	margin-block-start: 0.6rem;
}

.work-row__main .wp-block-post-excerpt__excerpt,
.work-row__main .wp-block-post-content {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
	max-width: 640px;
}

.work-row__main .wp-block-post-content > * {
	margin-block: 0;
}

.work-row__main .wp-block-post-content > * + * {
	margin-block-start: 0.6rem;
}

.work-row__side {
	grid-column: 2;
}

.work-row__side > * + * {
	margin-block-start: 0.75rem;
}

/* 使用技術タグは枠線チップではなく淡い塗りチップにして，行へ彩りを足す */
.work-row__tags a {
	background: var(--wp--preset--color--primary-subtle);
	border-color: transparent;
	color: var(--wp--preset--color--primary-dark);
	transition: background-color var(--tj-transition), color var(--tj-transition);
}

.work-row__tags a:hover,
.work-row__tags a:focus-visible {
	background: var(--wp--preset--color--primary);
	border-color: transparent;
	color: var(--wp--preset--color--background);
}

.work-row__meta {
	gap: 0.35rem 0.9rem;
}

.work-row__fact {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-secondary);
	letter-spacing: 0.04em;
}

.work-row__fact + .work-row__fact::before {
	content: "·";
	margin-inline-end: 0.9rem;
	opacity: 0.6;
}

/* デモ動画プレーヤー（メタ設定時のみプラグインが出力する） */
.project-demo-video {
	max-width: 560px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--wp--preset--color--code-background);
}

.project-demo-video video {
	display: block;
	width: 100%;
	height: auto;
}

.project-demo-video--embed iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.work-row__main .project-demo-video {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* システムスクリーンショット（本文内の project-screenshots グループ）．
 * 横1列に並べ，収まらない分は横スクロール．タップで拡大（コア画像ブロックのライトボックス） */
.project-screenshots {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0.5rem;
	overflow-x: auto;
}

.project-screenshots .wp-block-image {
	flex: 0 0 auto;
	margin: 0;
}

.project-screenshots img {
	display: block;
	width: auto;
	height: auto;
	max-height: 110px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--code-background);
}

.work-row__main .project-screenshots {
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (min-width: 900px) {
	.project-screenshots img {
		max-height: 140px;
	}
}

/* ライトボックス（タップ拡大）の背景．コアは背景色（白）をインラインで指定するため
 * !important で上書きし，やや透過の暗転にする．透明度はコアが opacity を管理するため
 * color-mix で背景色側に持たせる．閉じるボタンも暗背景用に明色へ */
.wp-lightbox-overlay .scrim {
	background-color: color-mix(in srgb, var(--wp--preset--color--code-background) 85%, transparent) !important;
}

.wp-lightbox-overlay .wp-lightbox-close-button {
	fill: var(--wp--preset--color--background) !important;
}

/* 外部リンク一覧（GitHub ↗ / Demo ↗ / 任意の「ラベル ↗」．プラグインがメタから出力する） */
.work-row__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
}

.project-external-links a {
	display: inline-block;
	padding: 0.4rem 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.project-external-links a:hover,
.project-external-links a:focus-visible {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 900px) {
	/* ホバー背景を本文より少し外側まで広げる．paddingと負のmarginを相殺させ，内容の位置は変えない */
	.work-row {
		grid-template-columns: 3.5rem minmax(0, 1fr) 16rem;
		column-gap: 2rem;
		padding-inline: 1.5rem;
		margin-inline: -1.5rem;
		border-radius: var(--wp--custom--radius--card);
	}

	/* 区切り線は広げた分を戻し，本文と同じ幅に揃える */
	.work-row::after {
		inset-inline: 1.5rem;
	}

	.work-row__side {
		grid-column: 3;
		grid-row: 1;
	}

	.work-row__side .tech-tags,
	.work-row__meta,
	.work-row__links {
		justify-content: flex-end;
	}
}

/* ----------------------------------------
 * タイムライン（Research & Experience）
 * ---------------------------------------- */

/* 縦線の中心は左端から22px（ロゴ44pxの中心）．ドット・ロゴはこの中心に揃える */
.timeline {
	position: relative;
	padding-left: 3.75rem;
	max-width: 760px;
}

.timeline::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 21px;
	width: 2px;
	border-radius: 1px;
	background: var(--wp--preset--color--border);
}

/* 縦の線をスクロールに連動して上から描画する（対応ブラウザのみ・JS不使用） */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.timeline::before {
			transform-origin: top;
			animation: tj-line-draw linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 90%;
		}
	}
}

@keyframes tj-line-draw {
	from {
		transform: scaleY(0);
	}

	to {
		transform: scaleY(1);
	}
}

.timeline > * + * {
	margin-block-start: var(--wp--preset--spacing--60);
}

.timeline__item {
	position: relative;
}

/* 組織ロゴ（任意）．Wantedly風に，縦線上のドットを置き換えて表示する */
.timeline__logo {
	position: absolute;
	left: -3.75rem;
	top: calc(0.35em - 16px); /* ドット中心（0.35em + 6px）にロゴ中心（22px）を揃える */
	margin: 0;
}

.timeline__logo img {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: contain;
	padding: 3px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: var(--wp--preset--color--background);
}

.timeline__body {
	flex: 1;
	min-width: 0;
}

.timeline__item::before {
	content: "";
	position: absolute;
	left: -2.75rem;
	top: 0.35em;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--background);
	border: 2px solid var(--wp--preset--color--primary);
}

/* ロゴがある項目はドットを出さない（非対応ブラウザでもロゴが不透明背景でドットを覆う） */
.timeline__item:has(.timeline__logo)::before {
	content: none;
}

/* リビール時にドットをポップイン（軽いオーバーシュート）させる．
 * 本体の tj-reveal（0.6s）より先に終わらせること． */
.timeline__item.tj-reveal--visible::before,
.timeline__item.tj-reveal--visible .timeline__logo {
	animation: tj-dot-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	animation-delay: calc(var(--tj-reveal-delay, 0s) + 0.15s);
}

@keyframes tj-dot-in {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

.timeline__body > * + * {
	margin-block-start: 0.35rem;
}

.timeline__meta {
	gap: 0.4rem 0.75rem;
}

.timeline__date {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--primary);
}

.timeline__type {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-secondary);
}

.timeline__title {
	margin: 0;
}

/* 外部リンク（任意）．プロジェクト行の外部リンクとトーンを揃える */
.timeline__link a {
	display: inline-block;
	padding: 0.4rem 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.timeline__link a:hover,
.timeline__link a:focus-visible {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.demo-note {
	margin-block-start: 0.5rem;
}

/* ----------------------------------------
 * About
 * ---------------------------------------- */

.about-layout {
	gap: var(--wp--preset--spacing--60);
	align-items: flex-start;
}

.about-avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-subtle);
	color: var(--wp--preset--color--primary-dark);
	border: 1px solid var(--wp--preset--color--border);
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}

.about-body {
	max-width: 640px;
	flex: 1 1 320px;
}

/* ----------------------------------------
 * 記事詳細
 * ---------------------------------------- */

.single-article__header {
	margin-block-end: var(--wp--preset--spacing--50);
}

.single-article__header > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.post-meta {
	gap: 0.4rem 0.5rem;
	align-items: baseline;
}

.post-meta__label {
	margin: 0;
}

.post-meta .wp-block-post-date + .post-meta__label {
	margin-inline-start: 0.75rem;
}

/* 本文 */
.wp-block-post-content {
	line-height: var(--wp--custom--line-height--body);
}

.wp-block-post-content > h2 {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-end: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-post-content > h3 {
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-post-content a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* コードブロック：横スクロール可能にして崩れを防ぐ */
.wp-block-code {
	overflow-x: auto;
	max-width: 100%;
}

.wp-block-code code {
	display: block;
	white-space: pre;
	min-width: max-content;
	tab-size: 4;
}

/* インラインコード */
:not(pre) > code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
	background: var(--wp--preset--color--background-subtle);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 0.1em 0.4em;
	overflow-wrap: break-word;
}

kbd {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
	background: var(--wp--preset--color--background-subtle);
	border: 1px solid var(--wp--preset--color--border);
	border-bottom-width: 2px;
	border-radius: 4px;
	padding: 0.1em 0.4em;
}

/* テーブル：横スクロールで崩れを防ぐ */
.wp-block-table {
	overflow-x: auto;
	max-width: 100%;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.5rem 0.85rem;
	text-align: left;
}

.wp-block-table th {
	background: var(--wp--preset--color--background-subtle);
	font-weight: 600;
}

.wp-block-table thead {
	border-bottom: 2px solid var(--wp--preset--color--border);
}

/* 引用 */
.wp-block-quote cite {
	display: block;
	margin-block-start: 0.5rem;
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
}

/* 画像 */
.wp-block-image img {
	max-width: 100%;
	height: auto;
}

.wp-block-image figcaption {
	margin-block-start: 0.5rem;
}

/* 脚注 */
.wp-block-footnotes {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block-start: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--70);
}

/* 前後の記事 */
.post-navigation {
	gap: var(--wp--preset--spacing--40);
}

.post-navigation .wp-block-post-navigation-link {
	max-width: 48%;
	font-size: var(--wp--preset--font-size--small);
}

.post-navigation .post-navigation-link-next {
	text-align: right;
	margin-inline-start: auto;
}

.post-navigation a {
	text-decoration: none;
}

.post-navigation a:hover,
.post-navigation a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 著者情報 */
.author-box__heading {
	color: var(--wp--preset--color--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-block-end: 0.75rem;
}

.author-box .wp-block-post-author__avatar img {
	border-radius: 50%;
}

.author-box .wp-block-post-author__bio {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
}

/* プロジェクト詳細 */
.project-facts {
	gap: 0.5rem 1.5rem;
}

.project-fact {
	gap: 0.5rem;
}

.project-fact > * {
	margin: 0;
}

.project-links {
	margin-block-start: var(--wp--preset--spacing--40);
}

.back-link a {
	text-decoration: none;
	font-weight: 500;
}

.back-link a:hover,
.back-link a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ----------------------------------------
 * ページネーション
 * ---------------------------------------- */

.post-pagination {
	margin-block-start: var(--wp--preset--spacing--60);
	gap: 0.5rem;
}

.post-pagination a,
.post-pagination .page-numbers {
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.4rem 0.8rem;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--tj-transition), color var(--tj-transition);
}

.post-pagination a:hover,
.post-pagination a:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.post-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

/* ----------------------------------------
 * 検索フォーム
 * ---------------------------------------- */

.wp-block-search__input {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.6rem 0.85rem;
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
}

.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

/* ----------------------------------------
 * Contact（連絡フォーム）
 * フォーム本体のHTMLは takajun02-core プラグインが出力する．
 * ---------------------------------------- */

/* ヒーローのタイトルと同じく，末尾にアクセント色のドットを付ける */
.contact-section__title {
	letter-spacing: -0.02em;
	font-weight: 800;
	margin-block-start: 0.35rem;
}

.contact-section__title::after {
	content: ".";
	color: var(--wp--preset--color--primary);
}

/* 見出しブロックは constrained レイアウトの子（左右marginがautoになる）ため，
 * 幅の制限は中の段落側へかける */
.contact-section__lead {
	max-width: 44rem;
	margin-block-start: 0.75rem;
	line-height: 1.9;
}

.contact-layout {
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	align-items: flex-start;
}

.contact-form-slot {
	flex: 1 1 22rem;
	max-width: 40rem;
}

.contact-aside {
	flex: 0 1 16rem;
}

/* 入力欄 */

.contact-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-block: 0 var(--wp--preset--spacing--50);
}

.contact-field__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

.contact-field__required {
	margin-inline-start: 0.4rem;
	padding: 0.05rem 0.4rem;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--primary-subtle);
	color: var(--wp--preset--color--primary-dark);
	font-size: 0.75em;
	letter-spacing: 0.02em;
	text-transform: none;
}

.contact-field__control {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	transition: border-color var(--tj-transition);
}

.contact-field__control--textarea {
	resize: vertical;
}

.contact-field__control:hover {
	border-color: var(--wp--preset--color--primary);
}

.contact-field__control:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.contact-field__control[aria-invalid="true"] {
	border-color: var(--wp--preset--color--primary-dark);
}

.contact-field__error {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--primary-dark);
	font-weight: 500;
}

/* ハニーポット：人間には見せず，スクリーンリーダーの読み上げ順からも外す */
.contact-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.contact-form__actions {
	margin-block: var(--wp--preset--spacing--50) 0;
}

.contact-form__submit {
	min-height: 44px;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition:
		background-color var(--tj-transition),
		transform var(--tj-transition);
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
	transform: translateY(-1px);
}

.contact-form__submit:active {
	transform: translateY(0);
}

.contact-form__submit-arrow {
	transition: transform var(--tj-transition);
}

.contact-form__submit:hover .contact-form__submit-arrow {
	transform: translateX(3px);
}

.contact-form__note {
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-secondary);
}

/* 送信結果 */

.contact-notice {
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--50);
}

.contact-notice--error {
	margin-block: 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
}

.contact-notice__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	margin: 0;
}

.contact-notice__body {
	margin-block: 0.5rem 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-secondary);
}

/* 補足リンク */

.contact-aside__title {
	color: var(--wp--preset--color--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.contact-aside__links {
	list-style: none;
	padding: 0;
	margin-block: 0.75rem;
}

.contact-aside__links a {
	display: inline-block;
	padding-block: 0.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-decoration: none;
}

.contact-aside__links a:hover,
.contact-aside__links a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.contact-aside__note {
	line-height: 1.9;
}

/* ----------------------------------------
 * フッター
 * ---------------------------------------- */

.site-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer__links li {
	margin-block: 0.5rem;
}

.site-footer__links a {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	display: inline-block;
	padding-block: 0.2rem;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer__heading {
	color: var(--wp--preset--color--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.site-footer__copyright {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block-start: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--60);
}

/* ----------------------------------------
 * 404
 * ---------------------------------------- */

.error-404__code {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-block-end: 0;
}

/* ----------------------------------------
 * ページ遷移（View Transitions）
 * 対応ブラウザのみ，ページ間を短いクロスフェードで繋ぐ．
 * ヘッダーは独立レイヤーにして遷移中も静止させる．
 * ---------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	.site-header-wrap {
		view-transition-name: site-header;
	}

	::view-transition-old(root) {
		animation-duration: 0.2s;
	}

	::view-transition-new(root) {
		animation: tj-page-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
}

@keyframes tj-page-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ----------------------------------------
 * 読了プログレスバー（記事詳細のみ）
 * ヘッダー下端のバーがスクロール位置に連動して伸びる（対応ブラウザのみ・JS不使用）．
 * ---------------------------------------- */

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.single-post .site-header-wrap::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -1px;
			height: 2px;
			background: var(--wp--preset--color--primary);
			transform: scaleX(0);
			transform-origin: left;
			animation: tj-reading-progress linear both;
			animation-timeline: scroll(root);
		}
	}
}

@keyframes tj-reading-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* ----------------------------------------
 * モーション設定の尊重
 * ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.project-card:hover,
	.project-card:focus-within {
		transform: none;
	}

	.wp-block-button__link:hover,
	.wp-block-button__link:focus-visible,
	.wp-block-button__link:active {
		transform: none;
	}

	.contact-form__submit:hover,
	.contact-form__submit:focus-visible,
	.contact-form__submit:active,
	.contact-form__submit:hover .contact-form__submit-arrow {
		transform: none;
	}
}