/* ============================================================
   page.css — 固定ページ共通スタイル

   静的プロトタイプ /page.html の inline <style> から page-* セレクタを
   移植。page.php / page-{slug}.php の双方で再利用される building blocks。

   構成:
     ① .page-hero               (タイトル)
     ② .page-lede               (任意のリード文)
     ③ .page-body > section*    (本文 / 繰り返し可)
     ④ .page-body .pull         (任意の強調ブロック)
     ⑤ .page-body figure        (任意の画像)
     ⑤b .page-ig                (任意の Instagram embed)
     ⑥ .page-cta                ← page-cta.css 側

   依存:
     tokens.css → base.css → header.css → footer.css → page.css

   メモ:
     - 静的 page.html は h1 を var(--en) (Inter) で組んでいたが、
       WP の the_title() は日本語が主のため var(--jp) で再定義。
     - body の line-height / letter-spacing は base.css にないため、
       読み心地のリズムを page-* セレクタ側で保証する。
   ============================================================ */

/* body のリズム (volto 共通の静かな間)
   front.css には :is(.hero,.coda,.news,...) ごとに微調整があるが、
   page では section 単位で統一する */
body{
	line-height: 1.95;
	letter-spacing: 0.05em;
}

/* ① PAGE HERO */
.page-hero{
	padding: 170px 26px 80px;
	background: var(--paper);
	color: var(--ink);
}
.page-hero .kicker{
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(10,10,10,0.45);
	margin: 0 0 28px;
}
.page-hero .kicker:empty{ display: none; }
.page-hero h1{
	margin: 0;
	font-family: var(--jp);
	font-weight: 200;
	font-size: clamp(28px, 6.8vw, 38px);
	letter-spacing: 0.10em;
	line-height: 1.5;
	color: var(--ink);
	text-wrap: balance;
}
.page-hero h1 .jp{
	display: block;
	font-family: var(--jp);
	font-weight: 300;
	font-size: clamp(15px, 3.8vw, 17px);
	letter-spacing: 0.18em;
	color: rgba(10,10,10,0.55);
	margin-top: 22px;
}
.page-hero h1 .jp:empty{ display: none; }

/* ② LEDE */
.page-lede{
	padding: 0 26px 90px;
	background: var(--paper);
	color: var(--ink);
}
.page-lede:empty{ display: none; }
.page-lede p{
	margin: 0;
	font-family: var(--jp);
	font-weight: 300;
	font-size: clamp(16px, 4.4vw, 19px);
	line-height: 2.15;
	letter-spacing: 0.08em;
	color: var(--ink);
	text-wrap: pretty;
}

/* ③ CONTENT SECTIONS */
.page-body{
	padding: 0 26px 60px;
	background: var(--paper);
	color: var(--ink);
}
.page-body > section{
	padding: 70px 0;
}
.page-body > section + section{
	border-top: 1px solid var(--line-on-light-soft);
}
.page-body > section:first-child{ padding-top: 0; }

.page-body .sec-label{
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(10,10,10,0.45);
	margin: 0 0 22px;
}
.page-body .sec-label:empty{ display: none; }

.page-body h2{
	margin: 0 0 32px;
	font-family: var(--jp);
	font-weight: 300;
	font-size: clamp(22px, 5.6vw, 26px);
	letter-spacing: 0.1em;
	line-height: 1.55;
	color: var(--ink);
	text-wrap: pretty;
}

.page-body h3{
	margin: 2.4em 0 1.0em;
	font-family: var(--jp);
	font-weight: 400;
	font-size: clamp(16px, 4.2vw, 17.5px);
	letter-spacing: 0.08em;
	line-height: 1.7;
	color: var(--ink);
	display: table;
	position: relative;
	padding-bottom: 0.55em;
}
.page-body h3::after{
	content: "";
	position: absolute;
	left: -10px; right: -10px; bottom: 0;
	height: 1px;
	background: rgba(10,10,10,0.14);
}

.page-body h4{
	margin: 2.0em 0 0.6em;
	font-family: var(--jp);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0.06em;
	line-height: 1.7;
	color: var(--ink);
}

.page-body p{
	margin: 0 0 1.7em;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 14.5px;
	line-height: 2.15;
	letter-spacing: 0.06em;
	color: var(--ink);
	text-wrap: pretty;
}
.page-body p:last-child{ margin-bottom: 0; }
.page-body a{
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--line-on-light);
	transition: opacity .2s ease;
}
.page-body a:hover{ opacity: 0.7; }

.page-body ul,
.page-body ol{
	margin: 0 0 1.7em;
	padding-left: 1.4em;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 14.5px;
	line-height: 2.15;
	letter-spacing: 0.06em;
}
.page-body li{ margin-bottom: 0.4em; }

/* ④ PULL */
.page-body .pull{
	margin: 110px 0;
	padding: 0;
	border: 0;
}
.page-body .pull p{
	font-family: var(--jp);
	font-weight: 300;
	font-size: clamp(18px, 5.2vw, 22px);
	line-height: 2.0;
	letter-spacing: 0.12em;
	color: var(--ink);
	margin: 0;
	text-align: center;
	text-wrap: balance;
}
.page-body .pull .mark{
	display: block;
	width: 24px; height: 1px;
	background: rgba(10,10,10,0.35);
	margin: 0 auto 32px;
}
.page-body .pull cite{
	display: block;
	font-family: var(--mono);
	font-style: normal;
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(10,10,10,0.45);
	margin-top: 28px;
	text-align: center;
}

/* ⑤ FIGURE */
.page-body figure{
	margin: 60px 0;
}
.page-body figure img{
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--paper-soft);
}
.page-body figure figcaption{
	margin-top: 14px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(10,10,10,0.45);
}

/* ⑤b INSTAGRAM (embed area) */
.page-ig{
	padding: 110px 26px 0;
	text-align: center;
	background: var(--paper);
}
.page-ig .ig-intro{
	margin: 0 auto 56px;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 13.5px;
	letter-spacing: 0.08em;
	line-height: 2.0;
	color: rgba(10,10,10,0.62);
}
.page-ig .ig-intro span{ display: block; }
.page-ig .ig-feed{
	max-width: 980px;
	margin: 0 auto;
}
.page-ig .ig-feed img,
.page-ig .ig-feed iframe{
	width: 100%;
	display: block;
}
.page-ig .ig-placeholder{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.page-ig .ig-placeholder .slot{
	aspect-ratio: 1 / 1;
	background: #f0efec;
	border: 1px solid rgba(10,10,10,0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(10,10,10,0.32);
}
.page-ig .ig-link{
	display: inline-block;
	margin-top: 56px;
	font-family: var(--en);
	font-size: 12px;
	letter-spacing: 0.22em;
	color: rgba(10,10,10,0.7);
	text-decoration: none;
	border-bottom: 1px solid rgba(10,10,10,0.25);
	padding-bottom: 4px;
	transition: color .25s ease, border-color .25s ease;
}
.page-ig .ig-link:hover{
	color: var(--ink);
	border-color: rgba(10,10,10,0.55);
}

/* ============================================================
   @media (min-width: 540px) — small-tablet padding
   ============================================================ */
@media (min-width: 540px){
	.page-hero{ padding: 200px 32px 90px; }
	.page-lede{ padding: 0 32px 110px; }
	.page-body{ padding: 0 32px 80px; }
	.page-body > section{ padding: 90px 0; }
	.page-ig{ padding: 140px 32px 0; }
	.page-ig .ig-placeholder{ grid-template-columns: repeat(3, 1fr); gap: 18px; }
	.page-ig .ig-intro{ margin-bottom: 72px; font-size: 14px; }
	.page-ig .ig-link{ margin-top: 72px; }
}

/* ============================================================
   @media (min-width: 768px) — PC: 中央寄せの読み物コラム
   静的 page.html と同じく content max-width は ~880px
   (front-page の 1200px より狭く、文章の読みやすさを優先)
   ============================================================ */
@media (min-width: 768px){
	body{
		line-height: 1.95;
		letter-spacing: 0.05em;
	}

	.page-hero,
	.page-lede,
	.page-body,
	.page-ig{
		max-width: min(880px, calc(100% - 80px));
		margin-left: auto;
		margin-right: auto;
	}
}