/*
 * Works archive and detail redesign.
 * Scoped to work archive/detail templates so existing posts, categories, and thumbnails keep working.
 */

.tiptop-works-page {
	--tiptop-works-accent: var(--tiptop-works-ink);
	--tiptop-works-ink: var(--tt-color-heading);
	--tiptop-works-muted: var(--tt-color-muted);
	--tiptop-works-border: var(--tt-color-border);
	--tiptop-works-surface: var(--tt-color-surface);
	background: var(--tt-color-base);
	color: var(--tiptop-works-ink);
}

.tiptop-works-page .archive-hero {
	padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
	background: var(--tt-color-base);
}

.tiptop-works-page .archive-hero__inner,
.tiptop-works-page .archive-hero__inner.has-no-hero-image {
	display: block;
	width: min(calc(100% - var(--tt-gutter-desktop)), var(--tt-width-default));
	max-width: none;
	margin-inline: auto;
}

.tiptop-works-page .archive-hero__eyebrow,
.tiptop-work-detail__eyebrow {
	margin: 0 0 var(--tt-space-3);
}

.tiptop-works-page .archive-hero__title,
.tiptop-work-detail__title {
	margin: 0;
	padding-left: 0;
	color: var(--tiptop-works-ink);
}

.tiptop-works-page .archive-hero__title::before,
.tiptop-work-detail__title::before {
	display: none;
	content: none;
}

.tiptop-works-page .archive-hero__lead {
	max-width: 680px;
	margin: var(--tt-space-5) 0 0;
	color: var(--tiptop-works-muted);
	font-size: var(--tt-text-note);
	font-weight: 600;
	line-height: calc(1.95 * var(--tt-leading-scale));
}

.tiptop-works-page .archive-hero__content {
	max-width: none;
	margin-inline: 0;
}

.tiptop-works-page .archive-hero__image {
	display: none;
}

.tiptop-works-page__content {
	padding-bottom: var(--tt-space-section);
}

.tiptop-works-page__primary,
.tiptop-work-detail-page__primary {
	min-width: 0;
}

.tiptop-works-page__content .tiptop-works-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(32px, 4vw, 56px) clamp(24px, 3.2vw, 40px);
	margin: 0;
}

/* 本実装：標準モードの実績グリッドに非対称(bento)のリズムを持たせる。immersiveの
 * オーバーレイ型bento（immersive-content-pages.css）とは別物で、画像→タイトル/抜粋を
 * 常時表示する既存の標準カード契約（角丸0・絶対配置なし）はそのまま、列幅の広狭だけを
 * 変える。
 *
 * bento化の境界は 961px から（2026-08-10・Issue #833）。承認済みモック
 * （_mockup/tiptop-pages.css:573）は 960px以下で .works-grid を2列にする。
 * 旧値の 921px では 921〜960px が6列のままだった。トップの実績ショーケース
 * （front-layout-fixes.css）も同じ 961px に揃えている——同じbentoなのに
 * 境界がトップ821px・一覧921pxで割れていたのが差分の原因だった。 */
@media (min-width: 961px) {
	body.tiptop-standard-system .tiptop-works-page__content .tiptop-works-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	body.tiptop-standard-system .tiptop-works-page__content .tiptop-works-grid .work-card:nth-child(4n + 1),
	body.tiptop-standard-system .tiptop-works-page__content .tiptop-works-grid .work-card:nth-child(4n + 4) {
		grid-column: span 4;
	}

	body.tiptop-standard-system .tiptop-works-page__content .tiptop-works-grid .work-card:nth-child(4n + 2),
	body.tiptop-standard-system .tiptop-works-page__content .tiptop-works-grid .work-card:nth-child(4n + 3) {
		grid-column: span 2;
	}
}

.tiptop-works-page .work-card {
	display: block;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

/*
 * position/display/margin/aspect-ratioは実機確認の結果、常により詳細度の
 * 高いimmersive-content-pages.cssの.tiptop-works-grid .post-card__image
 * （bentoグリッドの絶対配置セル）に上書きされていて無効だったため削除。
 * background/overflowは競合する他ルールより詳細度が高く実際に効いている
 * ため維持（computed background-colorが--tiptop-works-surfaceの値と一致
 * することを実測確認済み）。
 */
.tiptop-works-page .post-card__image {
	background: var(--tiptop-works-surface);
	overflow: hidden;
}

.tiptop-works-page .post-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.tiptop-works-page .post-card__body {
	display: block;
	padding: 0;
}

.tiptop-works-page .post-card__title {
	margin: 0;
	color: var(--tiptop-works-ink);
}

.tiptop-works-page .post-card__title a {
	color: inherit;
	text-decoration: none;
}

.tiptop-works-page .post-card__title a:hover,
.tiptop-works-page .post-card__title a:focus {
	color: var(--tiptop-works-muted);
}

.tiptop-works-page .post-card__excerpt {
	margin-top: 12px;
	font-weight: 500;
}

.tiptop-works-page .post-card__excerpt p {
	margin: 0;
}

.tiptop-works-page .post-card__excerpt .excerpt-more {
	display: none !important;
}

.tiptop-work-detail-page__content {
	padding: clamp(56px, 8vw, 96px) 0 var(--tt-space-section);
}

.tiptop-work-detail,
.tiptop-work-detail__header {
	max-width: none;
}

.tiptop-works-page .tiptop-work-detail {
	padding: 0;
}

.tiptop-work-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--tt-space-5);
}

.tiptop-work-detail__image {
	margin: 0 0 var(--tt-space-7);
	background: var(--tiptop-works-surface);
}

.tiptop-work-detail__image img {
	display: block;
	width: 100%;
	height: auto;
}

.tiptop-work-detail__body {
	color: var(--tiptop-works-muted);
	font-size: var(--tt-text-body);
	font-weight: 500;
	line-height: calc(1.95 * var(--tt-leading-scale));
}

.tiptop-work-detail__body p {
	line-height: calc(2.05 * var(--tt-leading-scale));
}

.tiptop-work-detail__lead {
	max-width: var(--tiptop-text-width);
	margin: var(--tt-space-5) 0 0;
	color: var(--tiptop-works-muted);
	font-size: var(--tt-text-note);
	font-weight: 600;
	line-height: calc(1.9 * var(--tt-leading-scale));
}

/*
 * Hero image: a single designer-prepared image (the work's featured image),
 * shown full-width and uncropped ahead of the title/lead. No device-frame
 * compositing here — that mockup look is produced by the designer upstream.
 */
.tiptop-work-hero {
	width: 100%;
	margin: 0 0 clamp(64px, 8vw, 96px);
	background: var(--tiptop-works-surface);
}

.tiptop-work-hero img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * .tiptop-work-detail__header's padding-top (immersive-system.css) assumes it's
 * the first element on the page (breathing room under the site header). When a
 * hero image precedes it, that top padding stacks with the hero's own bottom
 * margin and pushes the title down too far — remove it in that case.
 */
/*
 * The title should read as one intro unit with the body copy right below it
 * (tight gap), while the outer breaks — hero-to-title above, body-to-gallery
 * below — should feel like the bigger section transitions. Overrides
 * immersive-system.css's generic clamp(48px,7vw,90px), which was tuned for
 * a header sitting directly under the site header, not under a hero image.
 * Same selector as the padding-top override below so it reliably beats
 * immersive-system.css's `.tiptop-work-detail__header.tiptop-post-detail__header`
 * (same specificity, loads after works-page.css in the enqueue chain).
 */
.tiptop-work-hero + .tiptop-work-detail-page__content .tiptop-work-detail__header {
	padding-top: 0;
	margin-bottom: clamp(20px, 2.4vw, 28px);
}

.tiptop-work-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 28px);
	width: var(--tt-width-base-wide);
	margin: clamp(64px, 8vw, 96px) auto;
	padding: 0;
	list-style: none;
}

.tiptop-work-gallery__item {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	/* 画像の角丸はクリップ側（この枠）で持つ。イマーシブは --tt-radius-md が0＝現状維持。 */
	border-radius: var(--tt-radius-md, 0);
	background: var(--tiptop-works-surface);
}

.tiptop-work-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tiptop-work-detail-nav {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: var(--tt-width-base-wide);
	/* 上余白と罫線からの距離をモックへ（2026-08-09・オーナー指摘）。
	 * モック（_mockup/tiptop-shared.css の .post-nav）は margin-top 64px・padding-top 24px。
	 * 実サイトは 48px / 32px で、罫線が本文寄り・ラベルが罫線から離れていた。 */
	margin: var(--tt-space-8) auto 0;
	padding-top: var(--tt-space-5);
	border-top: 1px solid var(--tiptop-works-border);
}

.tiptop-work-detail-nav__link {
	display: inline-flex;
	align-items: flex-end;
	gap: 10px;
	max-width: 46%;
	color: var(--tiptop-works-ink);
	text-decoration: none;
}

.tiptop-work-detail-nav__link--next {
	margin-left: auto;
	text-align: right;
}

.tiptop-work-detail-nav__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tiptop-work-detail-nav__label {
	color: var(--tiptop-works-muted);
	font-size: var(--tt-text-meta);
	font-weight: 500;
	letter-spacing: calc(0.14em + var(--tt-letter-add));
	line-height: 1.4;
	text-transform: uppercase;
}

/* 標準モードはモックの控えめなラベルへ（2026-08-09・オーナー指摘）。
 * モック（_mockup/tiptop-shared.css:638 .post-nav__label）は Jost・0.7rem・
 * w500・字間0.1em・muted。共通側のウェイトも4段階統一で500へ揃え、
 * 標準モードでは書体・サイズ・字間までモックへ合わせる。 */
body.tiptop-standard-system .tiptop-work-detail-nav__label {
	font-family: var(--tiptop-font-latin);
	font-size: var(--tt-text-meta);
	font-weight: 500;
	letter-spacing: 0.1em;
	/* モックは大文字化しない（2026-08-10・Issue #773）。ラベルは元から大文字の
	 * 「← PREV / NEXT →」なので見た目は変わらないが、翻訳で和文を入れた時に
	 * モックと違う挙動になるのを避ける。 */
	text-transform: none;
}

/* 前後ナビの寸法をモックへ（2026-08-10・Issue #773）。モック（_mockup/tiptop-shared.css:629）
 * はリンクが grid（gap 4px・max-width 22em）で、タイトルは 0.84rem・w400・行間2.0倍。
 * 実サイトは inline-flex（gap 10px・max-width 46%）でタイトルが 0.95rem・w700・行間1.3倍
 * と、ラベルより主張が強かった（1920pxで実測）。
 * **新着詳細（base-system.css の .tiptop-post-navigation）と同じ契約**だが、あちらは
 * 全ページ共通ロード・こちらは works 限定ロードなのでファイルが分かれる。値を変えるときは
 * 両方を同時に直すこと。
 * 0.95rem は Issue #776 の「モックに存在しない値」の1つでもあり、これで1件解消する。 */
/* 外枠に基準サイズを持たせるのはモックと同じ理由（`.post-nav` が 0.84rem を持つ）。
 * これが無いと下の `max-width: 22em` が16px基準で352pxになり、モックの295.68px
 * （13.44px基準）と28pxずれる——em指定は「その要素のfont-size」基準なので、
 * 基準サイズを揃えないと幅上限も揃わない（実測で確認）。 */
body.tiptop-standard-system .tiptop-work-detail-nav {
	font-size: var(--tt-text-note);
}

body.tiptop-standard-system .tiptop-work-detail-nav__link {
	display: grid;
	gap: var(--tt-space-1);
	max-width: 22em;
}

body.tiptop-standard-system .tiptop-work-detail-nav__title {
	font-size: var(--tt-text-note);
	font-weight: 400;
	line-height: calc(2 * var(--tt-leading-scale));
}

.tiptop-work-detail-nav__title {
	font-size: var(--tt-text-note);
	font-weight: 700;
	line-height: 1.3;
}

/* ホバーはアクセント色へ（2026-08-12・Issue #913・オーナー指摘
 * 「ボタンだけが青くなってるけど、ほかのテキストリンクもアクセントにするルールでしょ」）。
 * 承認済みモックは `.post-nav a:hover { color: var(--tiptop-accent) }` で
 * リンク全体が rgb(34,34,34) → rgb(52,80,220) に変わる（ラベルの「← PREV」だけは
 * 自前で muted を持つので変わらない）。実サイトはタイトルだけを muted へ落としており、
 * **モックと逆に暗くなっていた**。パン粉（design-system.css:830）と同じ寄せ先に揃える。 */
.tiptop-work-detail-nav__link:hover,
.tiptop-work-detail-nav__link:focus-visible,
.tiptop-work-detail-nav__link:hover .tiptop-work-detail-nav__title,
.tiptop-work-detail-nav__link:focus-visible .tiptop-work-detail-nav__title {
	color: var(--tiptop-accent);
}

@media (max-width: 920px) {
	.tiptop-works-page__content.content-layout,
	.tiptop-work-detail-page__content.content-layout {
		grid-template-columns: 1fr;
	}

	.tiptop-work-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 実績グリッドの2列帯は 782〜960px（2026-08-10・Issue #833）。
 * 上の920pxブロックから切り出した。上限を960pxへ上げるのは、bento化の境界を
 * 961pxに移した分の穴（921〜960px）を埋めるため。下限を782pxで切るのは、
 * responsive-fixes.css:59 の @media (max-width: 820px) が .post-list を1列に
 * しているのを 782〜820px だけ打ち消す必要があるから（.tiptop-works-grid は
 * .post-list を併記している）。あちらのブロックはナビの820px帯（Issue #834）と
 * 同じブロックなので動かさず、ここで詳細度（0,3,0 対 0,2,0）で上書きする。
 * 781px以下は responsive-fixes.css 側の1列がそのまま残る＝モックと一致。 */
@media (min-width: 782px) and (max-width: 960px) {
	body.tiptop-standard-system .tiptop-works-page__content .tiptop-works-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 前後ナビを781px以下で1列へ（2026-08-10・Issue #773）。モック
 * （_mockup/tiptop-shared.css:712）は781px以下で .post-nav を縦積みにし next の右寄せも
 * 解除する。実サイトは下の640pxブロックでしか縦積みにならず、641〜781pxでは2列のまま
 * 前後のタイトルが左右に離れていた（781px幅の実測で x=32 と x=596）。
 * 下のブロックはモード非限定でイマーシブにも効いているため、境界を動かさず
 * 641〜781pxの帯を標準スコープで足す（新着詳細は base-system.css 側で781pxに揃えてある）。 */
@media (max-width: 781px) {
	body.tiptop-standard-system .tiptop-work-detail-nav {
		flex-direction: column;
	}

	body.tiptop-standard-system .tiptop-work-detail-nav__link,
	body.tiptop-standard-system .tiptop-work-detail-nav__link--next {
		max-width: 100%;
		margin-left: 0;
		text-align: left;
	}
}

@media (max-width: 640px) {
	.tiptop-works-page .archive-hero__inner,
	.tiptop-works-page .archive-hero__inner.has-no-hero-image,
	.tiptop-works-page__content,
	.tiptop-work-detail-page__content {
		width: min(calc(100% - var(--tt-gutter-tablet)), var(--tt-width-default));
	}

	.tiptop-work-gallery {
		grid-template-columns: 1fr;
	}

	.tiptop-work-detail-nav {
		flex-direction: column;
	}

	.tiptop-work-detail-nav__link,
	.tiptop-work-detail-nav__link--next {
		max-width: 100%;
		margin-left: 0;
		flex-direction: row;
		text-align: left;
	}

	.tiptop-works-grid,
	.tiptop-works-page__content.content-layout .tiptop-works-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   ここから下は works-page-adjustments.css を吸収したもの
   （2026-08-11・Issue #645 Phase B）。

   このファイルと調整ファイルは inc/enqueue.php の鎖で完全に隣接して
   おり（間に何も挟まらない）、調整ファイルは常に直後に読まれていた。
   よって**末尾へそのまま連結すればカスケード順は変わらない**。
   宣言の中身は1文字も変えていない（cat で連結）。

   ⚠ 下のブロックは「後に書いてある方が勝つ」ことに依存している。
   同じセレクタが2回書かれている組が4つある：仕様リストの項目名、
   実績詳細メタのフォーカス表示、ページ送り番号のフォーカス表示、
   前後ナビのラベル（標準スコープ）。順序を入れ替えたり、重複を
   「片方だけ残す」形で整理すると見た目が変わる。整理するなら
   セレクタごとに最終的に効いている宣言の集合を作ってからにすること。

   ※ここにセレクタをそのまま書き並べると、scripts/check-mode-drift.js
   がコメント行を新規ルールと誤検知する（行頭の照合しか見ないため）。
   説明は日本語で書くこと。
   ============================================================ */



.tiptop-works-page .archive-hero__lead {
	max-width: 40rem;
	font-size: var(--tt-text-body);
	font-weight: 500;
	line-height: calc(2.05 * var(--tt-leading-scale));
}

/* main.css の .post-card__image（トークン参照）より詳細度が高く、ここが実質的な決定点。
 * 0のハードコードでは標準モードの角丸方針が実績ページだけ効かないためトークン参照にする
 * （イマーシブは --tt-radius-md が0のまま＝現状維持）。 */
.tiptop-works-page .post-card__image,
.tiptop-work-detail__image,
.tiptop-work-detail__image img {
	border-radius: var(--tt-radius-md, 0);
	box-shadow: none;
}

.tiptop-works-page .post-card__body {
	padding-top: 2px;
}

.tiptop-works-page .post-card__excerpt {
	color: var(--tt-color-text);
	font-size: var(--tt-text-note);
	line-height: calc(1.95 * var(--tt-leading-scale));
}

.tiptop-works-page .page-numbers:hover,
.tiptop-works-page .page-numbers:focus-visible {
	color: var(--tiptop-works-ink);
}

.tiptop-work-detail__meta a:focus-visible,
.tiptop-works-page .page-numbers:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--tiptop-works-ink) 20%, transparent);
	outline-offset: 3px;
}

.tiptop-work-detail__body {
	color: var(--tt-color-text);
	font-size: var(--tt-text-body);
	line-height: calc(2.05 * var(--tt-leading-scale));
}

/* 実績詳細の日付を欧文書体へ（2026-08-10・オーナー指摘「実績詳細の日付のフォントが違う」）。
 * モック（`_mockup/tiptop-work-single.html` の `.post-date`）は Jost・11.84px・字間0.06em・
 * 行間2.0倍。実サイトは和文書体・11.52px・字間0.04em・行間1.95倍だった（1920pxで実測）。
 * 色は既に muted で一致。日付は数字だけなので欧文書体が正で、他ページのメタ日付も
 * 欧文（`front-font-presets.css` の `.entry__meta time` 系）に揃っている。
 * 標準スコープに閉じる：イマーシブの実績詳細は独自の配色・書体契約を持つため触らない。 */
body.tiptop-standard-system .tiptop-work-detail__meta time {
	font-family: var(--tiptop-font-latin);
	font-size: var(--tt-text-meta);
	letter-spacing: 0.06em;
	line-height: calc(2 * var(--tt-leading-scale));
}

.tiptop-work-detail__meta a:hover,
.tiptop-work-detail__meta a:focus-visible {
	border-color: var(--tiptop-works-ink);
	background: var(--tiptop-works-ink);
	color: var(--tt-color-base);
}

/* 承認済みモックは @media 内に font-size を持たないため、実績も役割ごとの段をそのまま使う。 */

/* ============================================================
   実績詳細の概要リスト（2026-08-08・承認済みモックへの移行／あやちゃん承認）
   入力は inc/work-detail-settings.php のメタボックス。空欄の項目は行ごと出ない。
   ============================================================ */

.tiptop-work-spec {
	display: grid;
	grid-template-columns: 8em minmax(0, 1fr);
	margin: 0;
	border-top: 1px solid var(--tiptop-border);
	font-size: var(--tt-text-note);
}

.tiptop-work-spec dt,
.tiptop-work-spec dd {
	margin: 0;
	padding: var(--tt-space-3) 0;
	border-bottom: 1px solid var(--tiptop-border);
}

.tiptop-work-spec dt {
	color: var(--tiptop-muted);
	font-size: var(--tt-text-meta);
	font-weight: 600;
	letter-spacing: 0.08em;
}

.tiptop-work-detail__site-link {
	display: inline-flex;
	align-items: center;
	gap: var(--tt-space-2);
	color: var(--tiptop-muted);
	font-size: var(--tt-text-meta);
	font-weight: var(--tt-weight-medium);
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard);
}

.tiptop-work-spec + .tiptop-work-detail__site-link {
	margin-top: var(--tt-space-5);
}

.tiptop-work-detail__site-link:hover {
	color: var(--tiptop-contrast);
}

/* 上の2つの color はどちらもカスケードで負けていて効いていなかった（2026-08-12・Issue #913）。
 * color-palettes.css:141 の `html[data-tiptop-palette] a`(0,1,2) が
 * `.tiptop-work-detail__site-link`(0,1,0) に勝ち、リンク色 --tiptop-link が当たっていた。
 * 直前まで指定していた --tiptop-contrast は mono-editorial では --tiptop-link と同値なので、
 * 実測しても死んでいることに気づけない状態だった。
 * 承認済みモックの .text-action は「ふだんは muted・ホバーで contrast」なので、
 * !important ではなくクラスを1つ重ねて(0,2,1)で勝たせる。 */
html[data-tiptop-palette] .tiptop-work-detail__site-link {
	color: var(--tiptop-muted);
}

html[data-tiptop-palette] .tiptop-work-detail__site-link:hover,
html[data-tiptop-palette] .tiptop-work-detail__site-link:focus-visible {
	color: var(--tiptop-contrast);
}

.tiptop-work-detail__site-link svg {
	width: 14px;
	height: 14px;
}

/* 本文ブロックの枠は、概要リストの有無に関係なくヘッダー（＝ヒーロー画像・タイトル・
 * ギャラリー）と同じ --tt-width-base-wide に載せる（2026-08-09修正）。
 * 実測すると、概要リストが無いときはこのラッパーに枠が無く本文が content-area の
 * 左端（1440pxの端）に落ちて、80px内側にあるタイトルとの間に段差ができていた。
 * 概要リストがあるときも --tiptop-post-detail-frame（1040px）でヘッダーの1280pxと
 * 別枠になっていた。**枠の正本を1つ（base-system.css のヘッダーと同じ値）にする。** */
body.tiptop-standard-system .tiptop-work-detail__layout {
	width: var(--tt-width-base-wide);
	max-width: 100%;
	margin-inline: auto;
}

/* 標準モードはヒーローがヘッダー内にあるため、共通CSSの content 96px + header 120px が
 * 二重に効いていた。標準だけ外側を節トークンへ揃え、ヘッダー側の上余白を打ち消す。
 * イマーシブはヒーローがarticle直下にあり既存の96px + 0pxを維持する。 */
body.tiptop-standard-system .tiptop-work-detail-page__content {
	padding-top: var(--tt-space-section);
}

/* 下余白は承認済みモックの固定48px（--tt-space-7）へ。共通CSSは
 * clamp(48px, 7vw, 90px) で画面幅に追従し、1280px以上でモックより最大42px広い
 * （375pxでだけ一致するので1幅で測ると気づけない。Issue #913）。
 * 共通側の clamp はイマーシブが使っているので変えず、標準だけ上書きする。 */
body.tiptop-standard-system .tiptop-work-detail__header {
	padding-top: 0;
	margin-bottom: var(--tt-space-7);
}

/* 概要リストを本文の横へ。標準モード限定にしているのは、イマーシブでは
 * このラッパーを素のブロックのままにして従来の1カラムの流れを崩さないため
 * （イマーシブで概要リストを使うかは未依頼）。 */
body.tiptop-standard-system .tiptop-work-detail__layout--with-spec {
	display: grid;
	grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

body.tiptop-standard-system .tiptop-work-detail__layout--with-spec .tiptop-work-detail__aside {
	position: sticky;
	top: 104px;
}

/* 本文は base-system.css で 1040px の固定フレーム（width指定）を持つため、
 * グリッドの列に収まるよう幅指定を解いて測度だけ残す。 */
body.tiptop-standard-system .tiptop-work-detail__layout--with-spec .tiptop-work-detail__body {
	width: auto;
	max-width: var(--tt-measure-reading);
	margin-inline: 0;
}

@media (max-width: 1100px) {
	.tiptop-work-spec {
		grid-template-columns: 7em minmax(0, 1fr);
	}

	body.tiptop-standard-system .tiptop-work-detail__layout--with-spec {
		grid-template-columns: minmax(0, 1fr);
	}

	body.tiptop-standard-system .tiptop-work-detail__layout--with-spec .tiptop-work-detail__aside {
		position: static;
	}
}

/* モバイルは仕様リストを縦積みにする（2026-08-10・375px幅でモックと突合）。
 * 承認済みモックは 781px 以下で .spec-list を1カラムへ落とし、項目名の下罫線と
 * 余白を外して「項目名の直下に値」の形にしている。実サイトは 7em + 1fr の2カラムの
 * ままで、値が狭い幅に押し込まれて2行3行に折り返していた。 */
@media (max-width: 781px) {
	body.tiptop-standard-system .tiptop-work-spec {
		grid-template-columns: minmax(0, 1fr);
	}

	body.tiptop-standard-system .tiptop-work-spec dt {
		padding-bottom: 0;
		border-bottom: 0;
	}
}

/* 実績一覧のbentoをモックへ（2026-08-09）。
 * 画像比率：承認済みモックは 16/9。トップの実績ショーケースは別部品で 4/3 を維持する。
 * gap：モックは --tt-space-5(24px)。実サイトは 56px/40px で間隔が開きすぎていた。 */
body.tiptop-standard-system .tiptop-works-grid {
	gap: var(--tt-space-5);
}

body.tiptop-standard-system .tiptop-works-page .post-card__image {
	aspect-ratio: 16 / 9;
}

/* 実績詳細のヒーロー画像（2026-08-09）。
 * blog-page.css の 16:9＋角丸ルールは .single-post 限定＆ブログ系ページ
 * でしかenqueueされないため、実績詳細には届かず**画面幅いっぱいの巨大画像**のままだった
 * （ニュース詳細で踏んだのと同じ罠）。ここで同じ契約を持たせる。
 *
 * 幅（2026-08-09修正）：以前は --tiptop-site-width に追従させていたが、実測すると
 * ヒーロー1440px／タイトル1280px／本文638px と**3種類に割れていた**（サイト幅の値と
 * content-area の実幅が別）。標準モードは single-work.php でヒーローをヘッダー内へ
 * 移したので、幅指定を持たせず**親のカラム幅をそのまま使う**のが正解。こうすると
 * 幅の正本が1つ（content-area）になり、将来サイト幅を変えても勝手に追従する。 */
body.tiptop-standard-system .tiptop-work-hero {
	width: auto;
	margin-inline: 0;
	margin-bottom: var(--tt-space-7);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--tt-radius-md);
}

body.tiptop-standard-system .tiptop-work-hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 実績詳細のタイトルと本文（2026-08-09）。
 * タイトルは 54.4px でモックより大幅に大きかった。
 * 本文は #f7f7f7 の面＋82pxパディングで囲まれていたが、モックは面を作らず
 * 罫線と余白だけで組む方針なので外し、読み物の測度（--tt-measure-reading）に絞る。
 *
 * 2026-08-11：モックが組み直され、詳細ページ4種のタイトルは共通の .entry__title
 * ＝ --tt-text-title（35.2px）へ統合された。ここに書いていた
 * 「モックは clamp(1.4rem, 2.6vw, 1.9rem)」は旧モックの値で、もう正しくない。
 * 段のトークン参照へ寄せた（正本 docs/typography-scale.md §3）。 */
body.tiptop-standard-system .tiptop-work-detail__title {
	font-size: var(--tt-text-title);
	font-weight: 700;
	/* 和文なので字間を足さない（2026-08-12・Issue #913）。モックは .entry__title で
	 * letter-spacing: normal を理由つきで明示しているのに、実サイトは役割トークンの
	 * --tiptop-letter-spacing-heading が当たって幅に応じて 0.96〜1.408px ついていた。 */
	letter-spacing: normal;
	line-height: 1.65;
}

body.tiptop-standard-system .tiptop-work-detail__body {
	/* base-system.css の width: var(--tiptop-post-detail-frame)（1040px）＋ margin:0 auto が
	 * 残っていると、42emに絞った本文が1040pxの枠の中で中央に寄って見出しと左端がズレる。
	 * 幅指定を解いて左寄せにする。 */
	width: auto;
	/* 測度は --tt-measure-reading（本文0.92remの42文字＝618px）に統一する。
	 * `42em` 直書きだと本文の 0.95rem 基準で638pxになり、他ページと20pxずれていた。 */
	max-width: var(--tt-measure-reading);
	/* Issue #912：標準の本文はモックと同じ regular。上流の500継承だけを標準で戻す。 */
	font-weight: var(--tt-weight-regular);
	padding: 0;
	background: transparent;
}

/* base-system.css の標準本文共通ルールは後読みかつ同詳細度で margin-inline:auto を持つため、
 * 実績詳細の所有ラッパーを1段足した詳細度で margin だけを左寄せへ戻す。概要リストありは
 * 上の --with-spec ルールでも0のため、どちらの投稿でも同じ左端になる。 */
body.tiptop-standard-system .tiptop-work-detail__layout .tiptop-work-detail__body {
	margin-inline: 0;
}

/* 実績一覧のカードをモックへ（2026-08-09・実測突合）。
 * 画像と本文の間が2pxしか無く、タイトルが画像に張り付いていた（モックは16px）。
 * タイトルは16pxでモック（0.94rem＝15.04px）より一段大きかった。
 * リードは font-weight 500 でモックの400より太かった。 */
body.tiptop-standard-system .tiptop-works-page .tiptop-works-grid .post-card__image {
	margin-bottom: var(--tt-space-4);
}

body.tiptop-standard-system .tiptop-works-page .tiptop-works-grid .post-card__title {
	font-size: var(--tt-text-card);
	line-height: 1.7;
}

body.tiptop-standard-system .tiptop-works-page .archive-hero__lead {
	font-weight: 400;
}

/* 実績詳細の「実績一覧へ戻る」（2026-08-09・オーナー指摘で追加）。
 * モック（_mockup/tiptop-work-single.html:116）は前後ナビの下に中央揃えの
 * ゴーストボタンを置き、上マージンは --tt-space-7。
 * ボタン本体は共通部品 .tiptop-outline-action がすでに体裁を持っている。 */
body.tiptop-standard-system .tiptop-work-detail-back {
	width: var(--tt-width-base-wide);
	max-width: 100%;
	margin: var(--tt-space-7) auto 0;
	text-align: center;
}

/* 実績詳細の仕様リストを承認済みモックへ（2026-08-09・Issue #784）。
 * 項目名（Client / Year / Scope / Pages / CMS）はラテン文字だけなので欧文書体。
 * 実サイトは和文書体で、行間も1.95倍と詰まっていた。項目名と値の両方に効くので、
 * 機械比較で出ていた差分の大半（十数件）がこの2つで揃う。 */
body.tiptop-standard-system .tiptop-work-spec dt {
	font-family: var( --tiptop-font-latin );
	line-height: calc(2 * var(--tt-leading-scale));
}

body.tiptop-standard-system .tiptop-work-spec dd {
	line-height: calc(2 * var(--tt-leading-scale));
}

/* 実績詳細の本文と前後ナビをモックへ（2026-08-09・Issue #784）。
 * 本文の見出しは記事詳細と同じく字間0.02em（実サイトは0.04em）。本文中の箇条書きと
 * 前後ナビのラベルはモックが w400 で、実サイトの w500 より控えめに置いている。 */
body.tiptop-standard-system .tiptop-work-detail-page .entry__content .wp-block-heading {
	/* 2026-08-10：0.02em から normal へ訂正。記事詳細のモックは0.02emだが、実績詳細の
	 * モックは字間なし。ページごとに値が違うのを、記事詳細の値をそのまま持ち込んで
	 * 誤って当てていた（実測でサイズ18.56px/16px・行間とも一致し、字間だけ残っていた）。 */
	letter-spacing: normal;
}

body.tiptop-standard-system .tiptop-work-detail-page .entry__content li,
body.tiptop-standard-system .tiptop-work-detail-nav__label {
	font-weight: 400;
}

body.tiptop-standard-system .tiptop-work-detail-nav__label {
	line-height: calc(2 * var(--tt-leading-scale));
}

/* 一覧へ戻るボタンの枠を承認済みモックへ（2026-08-10・新着詳細と同じ是正）。
 * 理由と共通部品を触らない判断は news-page.css 側のコメント参照。 */
body.tiptop-standard-system .tiptop-work-detail-back .tiptop-outline-action {
	border-color: var(--tiptop-border);
}

/* Issue #917：781px以下で共通側の --tt-width-base-wide がtabletガターを再度差し引くため、
 * 外側content-areaを44px総ガターへ揃えた後に実績詳細だけ二重に狭くならないよう親幅へ戻す。
 * 既存の781px境界を再利用し、イマーシブには触れない。 */
@media (max-width: 781px) {
	body.tiptop-standard-system .tiptop-work-detail-page :where(
		.tiptop-work-detail__header,
		.tiptop-work-detail__layout,
		.tiptop-work-gallery,
		.tiptop-work-detail-nav,
		.tiptop-work-detail-back
	) {
		width: 100%;
	}
}