/* ==========================================================================
   pages.css - ページ固有のデザイン
   いまは「トップページ」のKEY VISUALのみ。他のセクションは追加していきます。
   ========================================================================== */

/* --------------------------------------------------------------------------
   トップページ:KEY VISUAL
   -------------------------------------------------------------------------- */
.kv {
	padding-block: var(--space-8) var(--space-12);
	text-align: center; /* 文学的な静けさを出すため、中央揃え */
}

.kv__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 箱のイラスト:線の色はCSS変数から取るので、テーマカラーを変えれば一緒に変わる */
.kv-box {
	width: clamp(180px, 52vw, 260px);
	height: auto;
	margin-bottom: var(--space-4);
	overflow: visible; /* 回転したふたが枠の外に出ても切れないように */
}

.kv-box__body,
.kv-box__latch,
.kv-box__lid {
	stroke: var(--color-primary);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.kv-box__lid {
	fill: var(--color-bg); /* ふたの後ろの光を隠すため、背景色で塗る */
}

/* 光のグラデーションの色(紫のごく淡い光) */
.kv-box__glow-start {
	stop-color: var(--color-primary-light);
	stop-opacity: 0.4;
}

.kv-box__glow-end {
	stop-color: var(--color-primary-light);
	stop-opacity: 0;
}

/* ---- 表示したときに1回だけ起こる動き ----
   ① ふたがゆっくり持ち上がる  ② 少し遅れて光がこぼれる
   animation-fill-mode: both → 開始前は「閉じた状態」、終了後は「開いた状態」を保つ。
   「動きを減らす」設定の人は、base.css の指定で最初から開いた状態になる。 */
.kv-box__lid {
	transform-box: fill-box;      /* 変形の基準を、このふた自身の枠にする */
	transform-origin: 0 100%;     /* 左下の角が軸 */
	animation: kv-lid-open 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both;
}

.kv-box__glow {
	animation: kv-glow-in 1.6s ease 1.1s both;
}

@keyframes kv-lid-open {
	from { transform: rotate(0deg); }
	to   { transform: rotate(-14deg); }
}

@keyframes kv-glow-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* メインコピー */
.kv__title {
	font-size: clamp(1.875rem, 7.5vw, 3.25rem);
	line-height: 1.45;
	letter-spacing: 0.08em;
}

/* 「、」のところで改行できるよう、かたまりごとに折り返さない指定 */
.kv__title-part {
	display: inline-block;
}

/* サブコピー:1行ずつ表示 */
.kv__lead {
	margin-top: var(--space-4);
	margin-bottom: var(--space-6);
	font-size: var(--fs-base);
	line-height: 2.1;
	color: var(--color-text-muted);
}

.kv__line {
	display: block;
}

@media (min-width: 768px) {
	.kv {
		padding-block: var(--space-12) calc(var(--space-12) + var(--space-4));
	}

	.kv__lead {
		font-size: var(--fs-lg);
		margin-top: var(--space-6);
	}
}

/* --------------------------------------------------------------------------
   トップページ:ABOUT
   スマホは縦に積み、タブレット以上で「文章 | 合言葉」の2列にする
   -------------------------------------------------------------------------- */
.about {
	display: grid;
	gap: var(--space-6);
}

.about__text > * + * {
	margin-top: var(--space-2); /* 段落どうしの間隔 */
}

.about__text {
	max-width: 36rem; /* 1行が長くなりすぎない幅(日本語で約36文字) */
}

.about__more {
	padding-top: var(--space-1);
}

/* このブログの合言葉。左に細い紫の線だけを引く */
.about__message {
	padding-left: var(--space-3);
	font-family: var(--font-serif);
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1.9;
	color: var(--color-primary);
	border-left: 3px solid var(--color-primary);
	word-break: auto-phrase;
}

@media (min-width: 768px) {
	.about {
		grid-template-columns: 1.4fr 1fr;
		gap: var(--space-8);
		align-items: center;
	}
}

/* --------------------------------------------------------------------------
   トップページ:CONTACT(濃い紫の帯)
   -------------------------------------------------------------------------- */
.contact {
	padding-block: var(--space-8);
	text-align: center;
	color: var(--color-on-dark-muted);
	background-color: var(--color-primary-dark);
}

.contact__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 濃い背景の上なので、見出しは白に */
.contact__title {
	font-size: var(--fs-xl);
	color: var(--color-on-dark);
}

.contact__text {
	margin-block: var(--space-2) var(--space-4);
}

@media (min-width: 768px) {
	.contact {
		padding-block: var(--space-12);
	}
}

/* --------------------------------------------------------------------------
   下層ページ共通:ページ見出し(固定ページ・一覧・404)
   -------------------------------------------------------------------------- */
.page-header {
	padding-block: var(--space-6);
	background-color: var(--color-bg-sub);
}

.page-header__title {
	font-size: var(--fs-2xl);
}

.page-header__lead {
	max-width: 36rem;
	margin-top: var(--space-1);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

@media (min-width: 768px) {
	.page-header {
		padding-block: var(--space-8);
	}
}

/* 404:ボタンの上の余白 */
.not-found__action {
	margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   記事ページ
   -------------------------------------------------------------------------- */
.entry-header {
	padding-top: var(--space-6);
	padding-bottom: var(--space-4);
}

.entry-meta__category {
	text-decoration: none;
}

.entry-title {
	margin-top: 0.4rem;
	font-size: clamp(1.5rem, 5.5vw, 2.25rem);
	line-height: 1.6;
}

.entry-thumb {
	margin-bottom: var(--space-6);
}

.entry-thumb__img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

/* 本文のあと(タグ)との間隔 */
.entry-content {
	padding-bottom: var(--space-4);
}

.entry-footer {
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}

/* タグ:小さな枠のラベル */
.entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.entry-tags a {
	display: inline-block;
	padding: 0.15rem 0.8rem;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	text-decoration: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: color var(--transition), border-color var(--transition);
}

.entry-tags a:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

/* 前の記事・次の記事(WordPressが出力する .post-navigation のクラスに合わせている) */
.post-navigation {
	padding-block: var(--space-8) var(--space-12);
}

.post-navigation .nav-links {
	display: grid;
	gap: var(--space-2);
}

.post-navigation a {
	display: block;
	height: 100%;
	padding: var(--space-2) var(--space-3);
	color: var(--color-text);
	text-decoration: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color var(--transition);
}

.post-navigation a:hover {
	border-color: var(--color-primary);
}

.post-nav__label {
	display: block;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.post-nav__title {
	display: block;
	margin-top: 0.2rem;
	line-height: 1.6;
}

@media (min-width: 640px) {
	.post-navigation .nav-links {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 「次の記事」だけがある場合も、右の列に置く */
	.post-navigation .nav-next {
		grid-column: 2;
		text-align: right;
	}
}