/* ==========================================================================
   wa-press / kaku.css — 格（真・行・草）
   --------------------------------------------------------------------------
   書・華・作庭に共通する日本の格式の三段階を、ページごとのトーンに使う。
   格は body のクラス（wa-kaku--shin / --gyo / --so）として付く。判定は PHP 側。

   ここで書き換えるのはトークンだけ。テンプレートもパターンも共通のまま、
   同じマークアップが別のトーンで組み上がる。

     真（しん）… 正式・静・格式。会社概要／日本文化を楽しもう／お問い合わせ
     行（ぎょう）… 標準。既定値なので上書きしない
     草（そう）… くだけた・動・親密。職場環境

   草で崩すのは「配置とリズム」だけ。書体と伝統色は動かさない。
   ここを外すと、和風テンプレートを崩しただけに見える。
   ========================================================================== */

/* ==========================================================================
   1. トークンの上書き
   ========================================================================== */

.wa-kaku--shin {
	letter-spacing: 0.09em;
	line-height: 2.1;

	--wa-tate-tracking: 0.10em;
	--wa-tate-leading: 2.2;

	/* 「間」を最大に取る。節の間隔を広げる */
	--wp--preset--spacing--50: clamp(4.5rem, 9vw, 8.5rem);
	--wp--preset--spacing--60: clamp(6.5rem, 14vw, 13rem);

	/* 動きはほぼ無し。あっても淡く現れる程度（motion.css） */
	--wa-motion: 0.35;
}

.wa-kaku--so {
	letter-spacing: 0.02em;
	line-height: 1.8;

	--wa-tate-tracking: 0.04em;
	--wa-tate-leading: 1.9;

	/* 詰めてリズムを作る */
	--wp--preset--spacing--50: clamp(2.5rem, 5vw, 4rem);
	--wp--preset--spacing--60: clamp(3.5rem, 7vw, 6rem);

	/* 軽く跳ねてよい（motion.css） */
	--wa-motion: 1.3;
}

/* ==========================================================================
   2. 一覧の見出し
   ========================================================================== */

.wa-archive__title {
	margin-block: 0;
}

/*
   真 … 見出しを右端の柱として立て、その左に一覧を流す。

   縦書きの見出しを一覧の「上」に置くと、9字もあれば画面が埋まり、
   最初の一枚すら見えない。掛け軸の気配は大きさではなく
   「余白と、縦の柱が版面の右に通っていること」で出る。
   見出しは柱として貼り付いたまま、左を記事が流れていく。
*/
.wa-kaku--shin .wa-archive__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: clamp(1.75rem, 5vw, 4.5rem);
	align-items: start;
}

.wa-kaku--shin .wa-archive__head {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: clamp(1rem, 2.5vw, 2rem);
	margin-block-end: 0 !important;

	/* 一覧が長いので、柱は画面に留める */
	position: sticky;
	inset-block-start: clamp(2rem, 8vh, 5rem);
}

.wa-kaku--shin .wa-archive__body > .wp-block-query {
	grid-column: 1;
	grid-row: 1;
}

.wa-kaku--shin .wa-archive__title {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-feature-settings: "vpal" 1, "vkrn" 1, "vert" 1;
	letter-spacing: 0.2em;
	line-height: 1.35;

	/* 柱の高さ。画面の半分ほどに収め、残りは余白として効かせる */
	--wa-fit-space: min(46svh, 26rem);
}

.wa-kaku--shin .wa-archive__desc {
	writing-mode: vertical-rl;
	font-feature-settings: "vpal" 1, "vkrn" 1;
	letter-spacing: 0.08em;
	line-height: 2.1;
	max-inline-size: min(22rem, 44svh);
	margin-block: 0;
	color: var(--wp--preset--color--contrast-2);
}

/* 狭い画面では柱を諦め、上に横組みで置く */
@media (max-width: 782px) {
	.wa-kaku--shin .wa-archive__body {
		display: block;
	}
	.wa-kaku--shin .wa-archive__head {
		position: static;
		flex-direction: column;
		margin-block-end: var(--wp--preset--spacing--40) !important;
	}
	.wa-kaku--shin .wa-archive__title,
	.wa-kaku--shin .wa-archive__desc {
		writing-mode: horizontal-tb;
		max-inline-size: none;
	}
}

/* 草 … 横組みで左に置き、朱の短い罫を添える */
.wa-kaku--so .wa-archive__title {
	position: relative;
	padding-block-end: 0.5em;
	letter-spacing: 0.06em;
	max-inline-size: none;
}

.wa-kaku--so .wa-archive__title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 3.5rem;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
}

.wa-kaku--so .wa-archive__desc {
	margin-block-start: 1em;
	color: var(--wp--preset--color--contrast-2);
}

/* ==========================================================================
   3. 一覧 — 真：積む
   --------------------------------------------------------------------------
   写真を一枚ずつ大きく、縦書きの記事名を右に添える。
   一画面に一件しか入らなくてよい。急がせないことが格。
   ========================================================================== */

.wa-kaku--shin .wa-list {
	list-style: none;
	padding-inline-start: 0;
	margin-block: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

.wa-kaku--shin .wa-list > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.25rem, 3.5vw, 3rem);
	align-items: start;
}

.wa-kaku--shin .wa-list__photo {
	margin: 0;
	grid-column: 1;
}

.wa-kaku--shin .wa-list__photo img {
	inline-size: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.wa-kaku--shin .wa-list__meta {
	grid-column: 2;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-feature-settings: "vpal" 1, "vkrn" 1, "vert" 1;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 1.2em;
	block-size: auto;
}

.wa-kaku--shin .wa-list__title {
	letter-spacing: 0.16em;
	line-height: 1.4;
	margin-block: 0;
}

.wa-kaku--shin .wa-list__title a {
	text-decoration: none;
}

.wa-kaku--shin .wa-list__title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.4em;
	text-decoration-thickness: 1px;
}

.wa-kaku--shin .wa-list__date {
	letter-spacing: 0.14em;
	margin-block: 0;
}

/* ==========================================================================
   4. 一覧 — 草：散らす
   --------------------------------------------------------------------------
   台紙に写真を貼っていった感じ。碁盤の目に整列させない。
   大小を混ぜ、上下をずらし、ごくわずかに傾ける。
   ========================================================================== */

.wa-kaku--so .wa-list {
	list-style: none;
	padding-inline-start: 0;
	margin-block: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	column-gap: clamp(1rem, 2.5vw, 2rem);
	row-gap: clamp(1.75rem, 4vw, 3rem);
	align-items: start;
}

.wa-kaku--so .wa-list > li {
	grid-column: span 3;
	transition: transform 0.35s ease, filter 0.35s ease;
}

/* 大小を混ぜる。6件で一巡するリズム */
.wa-kaku--so .wa-list > li:nth-child(6n + 1) { grid-column: span 4; }
.wa-kaku--so .wa-list > li:nth-child(6n + 2) { grid-column: span 2; }
.wa-kaku--so .wa-list > li:nth-child(6n + 3) { grid-column: span 2; }
.wa-kaku--so .wa-list > li:nth-child(6n + 4) { grid-column: span 4; }
.wa-kaku--so .wa-list > li:nth-child(6n + 5) { grid-column: span 3; }
.wa-kaku--so .wa-list > li:nth-child(6n)     { grid-column: span 3; }

/* 上下をずらす */
.wa-kaku--so .wa-list > li:nth-child(6n + 2) { margin-block-start: clamp(1rem, 3vw, 2.75rem); }
.wa-kaku--so .wa-list > li:nth-child(6n + 5) { margin-block-start: clamp(0.75rem, 2vw, 1.75rem); }

/* ごくわずかに傾ける。貼った写真の気配。1度を超えると散らかって見える */
.wa-kaku--so .wa-list > li:nth-child(3n + 1) { rotate: -0.7deg; }
.wa-kaku--so .wa-list > li:nth-child(3n + 2) { rotate: 0.5deg; }
.wa-kaku--so .wa-list > li:nth-child(3n)     { rotate: 0.9deg; }

.wa-kaku--so .wa-list > li:hover {
	rotate: 0deg;
	transform: translateY(-4px);
}

.wa-kaku--so .wa-list__photo {
	margin: 0;
	/* 台紙に貼った縁。白フチではなく、地の色をわずかに敷く */
	background-color: var(--wp--preset--color--base-3);
	padding: 0.5rem;
	box-shadow: 0 1px 2px rgb(from var(--wp--preset--color--contrast) r g b / 0.10);
}

.wa-kaku--so .wa-list__photo img {
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* 大きい枠だけ横長にして、単調さを崩す */
.wa-kaku--so .wa-list > li:nth-child(6n + 1) .wa-list__photo img,
.wa-kaku--so .wa-list > li:nth-child(6n + 4) .wa-list__photo img {
	aspect-ratio: 3 / 2;
}

/* 説明は写真の外に少しずらして置く */
.wa-kaku--so .wa-list__meta {
	margin-block-start: 0.85em;
	padding-inline-start: 0.6rem;
}

.wa-kaku--so .wa-list__title {
	margin-block: 0;
	letter-spacing: 0.04em;
	line-height: 1.6;
	max-inline-size: none;
	writing-mode: horizontal-tb;
}

.wa-kaku--so .wa-list__title a {
	text-decoration: none;
}

.wa-kaku--so .wa-list__title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.wa-kaku--so .wa-list__date {
	margin-block: 0.35em 0;
	letter-spacing: 0.08em;
}

/* 画面が狭いときは2列に落とす。傾きとずらしは残す */
@media (max-width: 782px) {
	.wa-kaku--so .wa-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.wa-kaku--so .wa-list > li,
	.wa-kaku--so .wa-list > li:nth-child(6n + 1),
	.wa-kaku--so .wa-list > li:nth-child(6n + 2),
	.wa-kaku--so .wa-list > li:nth-child(6n + 3),
	.wa-kaku--so .wa-list > li:nth-child(6n + 4),
	.wa-kaku--so .wa-list > li:nth-child(6n + 5),
	.wa-kaku--so .wa-list > li:nth-child(6n) {
		grid-column: span 2;
	}
}

/* 真の一覧も、狭い画面では縦書きの見出しを下に回す */
@media (max-width: 600px) {
	.wa-kaku--shin .wa-list > li {
		grid-template-columns: minmax(0, 1fr);
	}
	.wa-kaku--shin .wa-list__photo,
	.wa-kaku--shin .wa-list__meta {
		grid-column: 1;
	}
	.wa-kaku--shin .wa-list__meta {
		writing-mode: horizontal-tb;
		flex-direction: column;
		gap: 0.4em;
	}
	.wa-kaku--shin .wa-list__title {
		letter-spacing: 0.06em;
		max-inline-size: none;
	}
}

/* ==========================================================================
   4.2 固定ページ — 真
   --------------------------------------------------------------------------
   一覧と同じ約束にする。見出しは右端の柱、本文はその左を流れる。
   ページ間で構造が揃うことで、格が「装飾」ではなく「体系」に見える。
   ========================================================================== */

.wa-kaku--shin .wa-page__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: clamp(1.75rem, 5vw, 4.5rem);
	align-items: start;
}

.wa-kaku--shin .wa-page__head {
	grid-column: 2;
	grid-row: 1;
	margin-block-end: 0 !important;
	position: sticky;
	inset-block-start: clamp(2rem, 8vh, 5rem);
}

/*
   本紙 — 掛け軸の見立て

   外枠は付けない。枠で囲むと「額装」になり、掛け軸ではなくなる。
   代わりに、本文の載る帯だけをごくわずかに明るくし、
   上下の端を沈めて天地を作る。境目は作らず、濃淡だけで見せる。
*/
.wa-kaku--shin .wa-page__body > .wa-page__content {
	grid-column: 1;
	grid-row: 1;
	max-inline-size: none;

	position: relative;
	padding-inline: clamp(1.25rem, 4vw, 3.5rem);
	padding-block: clamp(2.5rem, 6vh, 5rem);

	background-image:
		/* 天地 … 上下をわずかに沈める */
		linear-gradient(
			180deg,
			rgb(from var(--wp--preset--color--contrast) r g b / 0.045) 0,
			transparent 7rem,
			transparent calc(100% - 7rem),
			rgb(from var(--wp--preset--color--contrast) r g b / 0.045) 100%
		),
		/* 本紙 … 中央を紙一枚ぶん明るく。左右の端は地に溶かす */
		linear-gradient(
			90deg,
			transparent 0,
			rgb(from var(--wp--preset--color--base-3) r g b / 0.85) 6%,
			rgb(from var(--wp--preset--color--base-3) r g b / 0.85) 94%,
			transparent 100%
		);
}

/* 一文字 … 天地との境に引く細い罫。枠にはせず、上下だけ */
.wa-kaku--shin .wa-page__body > .wa-page__content::before,
.wa-kaku--shin .wa-page__body > .wa-page__content::after {
	content: "";
	position: absolute;
	inset-inline: 6%;
	block-size: 0;
	border-block-start: 1px solid rgb(from var(--wp--preset--color--contrast-3) r g b / 0.35);
}

.wa-kaku--shin .wa-page__body > .wa-page__content::before {
	inset-block-start: 1.75rem;
}

.wa-kaku--shin .wa-page__body > .wa-page__content::after {
	inset-block-end: 1.75rem;
}

/*
   本文中の写真は文字の幅に揃える。
   真では本文の器を広く取っているので、alignwide をそのままにすると
   写真だけが柱の際まで伸びて、版面の中心が写真に持っていかれる。
*/
.wa-kaku--shin .wa-page__content :where(.alignwide, .alignfull) {
	max-inline-size: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.wa-kaku--shin .wa-page__title {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-feature-settings: "vpal" 1, "vkrn" 1, "vert" 1;
	letter-spacing: 0.2em;
	line-height: 1.35;
	margin-block: 0;
	--wa-fit-space: min(46svh, 26rem);
}

/* 縦の柱では、見出し帯の罫は上端に回す */
.wa-kaku--shin .wa-page__title.is-style-obi {
	padding-inline-start: 0;
	padding-block-start: 1.1em;
}

.wa-kaku--shin .wa-page__title.is-style-obi::before {
	inset-inline-start: auto;
	inset-block: 0 auto;
	inset-inline: 0;
	inline-size: auto;
	block-size: 0;
	border-inline-start: 0;
	border-block-start: 3px solid var(--wp--preset--color--accent);
}

/* 真の本文は節ごとに大きく空ける */
.wa-kaku--shin .wa-page__content > :where(h2) {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wa-kaku--shin .wa-page__content > :first-child {
	margin-block-start: 0;
}

@media (max-width: 782px) {
	.wa-kaku--shin .wa-page__body {
		display: block;
	}
	.wa-kaku--shin .wa-page__head {
		position: static;
		margin-block-end: var(--wp--preset--spacing--40) !important;
	}
	.wa-kaku--shin .wa-page__title {
		writing-mode: horizontal-tb;
		max-inline-size: none;
	}
	.wa-kaku--shin .wa-page__title.is-style-obi {
		padding-block-start: 0;
		padding-inline-start: 1.1em;
	}
	.wa-kaku--shin .wa-page__title.is-style-obi::before {
		inset-inline: 0 auto;
		inset-block: 0.15em;
		inline-size: 0;
		border-block-start: 0;
		border-inline-start: 3px solid var(--wp--preset--color--accent);
	}
}

/* ==========================================================================
   4.3 諸元表 — 罫だけで組む
   --------------------------------------------------------------------------
   法人情報のような「項目名と値」は、囲み枠を作らず罫だけで区切る。
   和の版面では枠より罫のほうが素直に馴染む。
   ========================================================================== */

.wa-spec {
	margin-block: var(--wp--preset--spacing--30) 0;
}

.wa-spec table {
	inline-size: 100%;
	border-collapse: collapse;
}

.wa-spec th,
.wa-spec td {
	text-align: start;
	vertical-align: top;
	padding-block: 0.9em;
	padding-inline: 0 1.5em;
	/* ブロックライブラリが四辺に引く罫を消してから、下罫だけ引き直す */
	border: 0;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	font-weight: 400;
}

.wa-spec th {
	inline-size: 9em;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast-2);
	letter-spacing: 0.1em;
}

.wa-spec tr:first-child th,
.wa-spec tr:first-child td {
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
}

@media (max-width: 600px) {
	.wa-spec th {
		inline-size: 7em;
	}
}

/* 地図の埋め込み。枠線を消して地に馴染ませる */
.wa-map {
	margin-block: var(--wp--preset--spacing--30) 0;
	aspect-ratio: 16 / 9;
	inline-size: 100%;
	background-color: var(--wp--preset--color--base-4);
}

.wa-map iframe {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
}

/* ==========================================================================
   4.5 記事ページ — 草
   --------------------------------------------------------------------------
   散歩や季節の話。読みやすさを最優先にしつつ、写真を先に見せる。
   ========================================================================== */

.wa-kaku--so .wa-single {
	display: flex;
	flex-direction: column;
}

/*
   写真を見出しより前に出す。
   DOM 順は見出し → 写真のままにしてあるので、読み上げや文書構造は崩れない。
*/
.wa-kaku--so .wa-single__photo {
	order: -1;
	margin-block: 0 var(--wp--preset--spacing--40) !important;
}

.wa-kaku--so .wa-single__photo img {
	inline-size: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	background-color: var(--wp--preset--color--base-3);
}

.wa-kaku--so .wa-single__title {
	position: relative;
	padding-block-end: 0.45em;
	margin-block: 0;
	letter-spacing: 0.05em;
}

/* 草の見出しには朱の短い罫。一覧と同じ約束にして、続き物に見せる */
.wa-kaku--so .wa-single__title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 3rem;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
}

.wa-kaku--so .wa-single__head {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* 本文中の写真も台紙に貼る。一覧との連続性を保つ */
.wa-kaku--so .wa-single__body :where(figure.wp-block-image) {
	background-color: var(--wp--preset--color--base-3);
	padding: 0.5rem;
	box-shadow: 0 1px 2px rgb(from var(--wp--preset--color--contrast) r g b / 0.10);
}

.wa-kaku--so .wa-single__body :where(figure.wp-block-image) figcaption {
	margin-block-end: 0;
	padding-inline: 0.25rem;
}

/* 前後の記事は色面のボタンに。罫より軽い */
.wa-kaku--so .wa-single__nav a {
	text-decoration: none;
	padding: 0.5em 1.1em;
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
}

.wa-kaku--so .wa-single__nav a:hover {
	background-color: var(--wp--preset--color--base-4);
}

/* ==========================================================================
   5. 草では縦書きの自動縮めを止める
   --------------------------------------------------------------------------
   .wa-tate-fit は縦組み用に器の長さを持っている。
   横組みに落ちる草では、その器が横幅の上限として効いてしまうので外す。
   ========================================================================== */

.wa-kaku--so .wa-tate-fit {
	max-inline-size: none;
}