/* =========================================================
   Tategumi — 本文の組版（縦組み / 横組み）
   ---------------------------------------------------------
   行送り（--step）を基準にした 1 次元グリッドで組む。
   縦組み時は  step = 1 行ぶんの列幅。すべてのブロックの
   送り方向のサイズを step の整数倍に揃えることで、
   ページ送りが必ず行間で切れるようにしている。
   ========================================================= */

.reader {
	--reader-fs: 1.0625rem;
	--reader-lh: 2.05;
	--step: calc(var(--reader-fs) * var(--reader-lh));

	/* 縦組みでの 1 ページの幅。JS が実測値で上書きする。 */
	--tate-page: 100vw;

	/* 図版の送り方向の上限。1 ページに収まる範囲で頭打ちにする。 */
	--tate-figure: min(calc(var(--step) * 12), calc(var(--tate-page) - var(--step) * 2));
	--tate-block: min(calc(var(--step) * 18), calc(var(--tate-page) - var(--step)));

	position: relative;
}

/* 文字サイズ 5 段階（ツールバー / localStorage から html に付与） */
:root[data-reader-size="1"] .reader { --reader-fs: .9375rem; }
:root[data-reader-size="2"] .reader { --reader-fs: 1rem; }
:root[data-reader-size="3"] .reader { --reader-fs: 1.0625rem; }
:root[data-reader-size="4"] .reader { --reader-fs: 1.1875rem; }
:root[data-reader-size="5"] .reader { --reader-fs: 1.3125rem; }

/* ---------------------------------------------------------
   ツールバー
   --------------------------------------------------------- */

.reader-bar {
	position: sticky;
	top: 4.05rem;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
	padding-block: .5rem;
	margin-bottom: .5rem;
	background: var(--paper);
	background: color-mix(in srgb, var(--paper) 90%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
	backdrop-filter: saturate(1.4) blur(8px);
	font-family: var(--font-sans);
}

.reader-bar__group {
	display: flex;
	align-items: center;
	border: 1px solid var(--rule);
	border-radius: 4px;
	overflow: hidden;
	background: var(--paper-raised);
}

.reader-bar__btn {
	appearance: none;
	background: none;
	border: 0;
	color: var(--ink-soft);
	font: inherit;
	font-size: .75rem;
	letter-spacing: .08em;
	line-height: 1;
	padding: .62em .85em;
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: .35em;
	transition: background .15s ease, color .15s ease;
}

.reader-bar__btn + .reader-bar__btn { border-inline-start: 1px solid var(--rule-soft); }
.reader-bar__btn:hover { background: var(--rule-soft); color: var(--ink); }

.reader-bar__btn[aria-pressed="true"],
.reader-bar__btn[aria-expanded="true"] {
	background: var(--ink);
	color: var(--paper);
}

.reader-bar__btn svg { width: 1em; height: 1em; fill: currentColor; }

.reader-bar__btn--icon { padding-inline: .8em; font-size: .8125rem; }

.no-js .reader-bar { display: none; }

/* ---------------------------------------------------------
   記事本体（共通）
   --------------------------------------------------------- */

.entry {
	font-size: var(--reader-fs);
	line-height: var(--reader-lh);
}

.entry-title {
	margin: 0;
	font-weight: 600;
	letter-spacing: .045em;
}

.entry-meta {
	font-family: var(--font-sans);
	font-size: .6875rem;
	letter-spacing: .12em;
	color: var(--ink-faint);
	display: flex;
	gap: 1rem;
	margin: 0;
	list-style: none;
	padding: 0;
}

.entry-meta a { text-decoration: none; }

.entry-content > :first-child { margin-block-start: 0; }
.entry-content > :last-child { margin-block-end: 0; }

.entry-content :is(h2, h3, h4) {
	font-weight: 600;
	letter-spacing: .04em;
}

.entry-content h2 { font-size: 1.1875em; }
.entry-content h3 { font-size: 1.0625em; }
.entry-content h4 { font-size: 1em; color: var(--ink-soft); }

.entry-content p { text-indent: 1em; }
.entry-content p:where(.has-text-align-center, .has-text-align-right) { text-indent: 0; }

.entry-content :is(ul, ol) { padding-inline-start: 1.6em; }
.entry-content li { margin-block: .25em; }

.entry-content blockquote {
	border-inline-start: 2px solid var(--rule);
	padding-inline-start: 1.2em;
	color: var(--ink-soft);
	font-size: .95em;
}

.entry-content blockquote p { text-indent: 0; }

.entry-content :is(code, kbd, samp) {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .875em;
	background: var(--rule-soft);
	border-radius: 3px;
	padding: .1em .4em;
}

.entry-content pre {
	writing-mode: horizontal-tb;
	background: var(--rule-soft);
	border: 1px solid var(--rule);
	border-radius: 4px;
	padding: 1em 1.2em;
	overflow: auto;
	font-size: .8125em;
	line-height: 1.7;
}

.entry-content pre code { background: none; padding: 0; }

.entry-content figure { margin-inline: 0; }

.entry-content figcaption {
	font-family: var(--font-sans);
	font-size: .75em;
	color: var(--ink-faint);
	line-height: 1.8;
	margin-block-start: .6em;
}

.entry-content a { text-decoration-color: var(--accent-soft); }

.entry-content table {
	writing-mode: horizontal-tb;
	border-collapse: collapse;
	font-family: var(--font-sans);
	font-size: .875em;
	line-height: 1.7;
}

.entry-content :is(th, td) {
	border: 1px solid var(--rule);
	padding: .55em .9em;
	text-align: start;
}

.entry-content th { background: var(--rule-soft); font-weight: 600; }

.entry-content ruby rt { font-size: .5em; }

/* 縦中横（1〜2 桁の算用数字。JS が付与する） */
.tcy {
	-webkit-text-combine: horizontal; /* Safari 15.3 以前 */
	text-combine-upright: all;
}

/* ---------------------------------------------------------
   横組みモード
   --------------------------------------------------------- */

[data-reader-mode="horizontal"] .reader .reader__viewport {
	width: auto;
	height: auto;
	max-width: var(--measure);
	margin-inline: auto;
	overflow: visible;
	writing-mode: horizontal-tb;
}

[data-reader-mode="horizontal"] .reader .entry-title {
	font-size: clamp(1.5rem, 4.2vw, 2.125rem);
	line-height: 1.6;
	margin-bottom: 1.1rem;
}

[data-reader-mode="horizontal"] .reader .entry-meta { margin-bottom: 2rem; }

[data-reader-mode="horizontal"] .reader .entry-thumb {
	margin: 0 0 2.75rem;
}

[data-reader-mode="horizontal"] .reader .entry-thumb img {
	display: block;
	width: 100%;
	/* 縦長の写真が画面を占領しないよう、扉写真くらいの高さで頭打ちにする */
	max-height: clamp(12rem, 40vh, 22rem);
	height: auto;
	object-fit: cover;
	object-position: center;
	border-radius: 3px;
}

[data-reader-mode="horizontal"] .reader .entry-content :is(h2, h3, h4) {
	margin-block: 2.6em .9em;
	line-height: 1.7;
}

[data-reader-mode="horizontal"] .reader .entry-content h2 {
	border-inline-start: 3px solid var(--accent);
	padding-inline-start: .7em;
}

[data-reader-mode="horizontal"] .reader .entry-content > * { margin-block: 0 1.85em; }
[data-reader-mode="horizontal"] .reader .entry-content :is(figure, pre, table) { margin-block-end: 2.4em; }

[data-reader-mode="horizontal"] .reader .reader__pager,
[data-reader-mode="horizontal"] .reader .reader__progress { display: none; }

/* ---------------------------------------------------------
   縦組みモード
   --------------------------------------------------------- */

[data-reader-mode="vertical"] .reader .reader__viewport {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-feature-settings: "vpal" 1, "vkrn" 1;
	hanging-punctuation: allow-end;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;

	/* 横方向は JavaScript が 1 ページずつ送る。
	   縦方向はページ全体のスクロール、つまむ操作は拡大に譲る。 */
	touch-action: pan-y pinch-zoom;
	height: 70vh; /* JS が実測値で上書きする */

	/* 論理プロパティはこの要素自身の縦組みを基準に解決されてしまうため、
	   左右の中央寄せは物理プロパティで指定する。 */
	margin-left: auto;
	margin-right: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

[data-reader-mode="vertical"] .reader .reader__viewport::-webkit-scrollbar { display: none; }

[data-reader-mode="vertical"] .reader .entry {
	padding-block: var(--step); /* 前後に 1 列ぶんの余白（グリッド維持） */
	padding-inline: .5rem;      /* 天地のアキ */
	block-size: max-content;
}

[data-reader-mode="vertical"] .reader .entry-title {
	font-size: 1.45em;
	line-height: calc(var(--step) * 2);
	margin-block: 0 var(--step);
	block-size: fit-content;
}

/* 縦組みでは日付や分量を 1 列にまとめる。
   列を 3 本使うと、扉のぶんだけ本文が押し出されてしまうため。 */
[data-reader-mode="vertical"] .reader .entry-meta {
	display: block;
	line-height: var(--step);
	margin-block: 0 var(--step);
	font-size: .6875rem;
}

[data-reader-mode="vertical"] .reader .entry-meta li {
	display: inline;
	margin: 0;
}

[data-reader-mode="vertical"] .reader .entry-meta li + li::before {
	content: "・";
	color: var(--rule);
}

[data-reader-mode="vertical"] .reader .entry-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	margin-block-end: var(--step);
	max-inline-size: 100%;
}

[data-reader-mode="vertical"] .reader .entry-thumb img {
	max-block-size: var(--tate-figure);
	max-inline-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
	border-radius: 3px;
}

[data-reader-mode="vertical"] .reader .entry-content > * { margin-block: 0 var(--step); }

[data-reader-mode="vertical"] .reader .entry-content :is(h2, h3, h4) {
	margin-block: calc(var(--step) * 2) var(--step);
}

[data-reader-mode="vertical"] .reader .entry-content h2 {
	line-height: calc(var(--step) * 2);
	border-inline-start: 0;
	padding: 0;
}

[data-reader-mode="vertical"] .reader .entry-content :is(h3, h4) {
	line-height: calc(var(--step) * 1);
}

[data-reader-mode="vertical"] .reader .entry-content p { line-height: var(--reader-lh); }

[data-reader-mode="vertical"] .reader .entry-content blockquote {
	margin-inline: 1.5em;
	padding-inline-start: 0;
	padding-block-start: 1em;
	border-inline-start: 0;
	border-block-start: 1px solid var(--rule);
}

[data-reader-mode="vertical"] .reader .entry-content hr {
	border: 0;
	border-inline-start: 1px solid var(--rule);
	block-size: 0;
	inline-size: 6em;
	margin: auto var(--step);
}

[data-reader-mode="vertical"] .reader .entry-content figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	block-size: auto;
	max-inline-size: 100%;
}

[data-reader-mode="vertical"] .reader .entry-content figure img {
	max-block-size: var(--tate-figure);
	max-inline-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}

[data-reader-mode="vertical"] .reader .entry-content figcaption {
	writing-mode: vertical-rl;
	max-block-size: 100%;
}

[data-reader-mode="vertical"] .reader .entry-content :is(pre, table) {
	max-block-size: var(--tate-block);
}

/* ページ送りボタン（縦組みでは左＝次、右＝前） */

.reader__pager {
	position: absolute;
	top: 0;
	bottom: 0;
	width: clamp(2rem, 4vw, 3rem);
	display: grid;
	place-items: center;
	appearance: none;
	background: none;
	border: 0;
	color: var(--ink-faint);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease, color .2s ease;
	z-index: 5;
}

.reader:hover .reader__pager,
.reader__pager:focus-visible { opacity: 1; }

.reader__pager:hover { color: var(--accent); }
.reader__pager[disabled] { opacity: 0 !important; pointer-events: none; }
.reader__pager--next { inset-inline-start: calc(var(--gutter) * -.6); }
.reader__pager--prev { inset-inline-end: calc(var(--gutter) * -.6); }

@media (hover: none) { .reader__pager { display: none; } }

/* 進行度 */

.reader__progress {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin-top: 1.1rem;
	font-family: var(--font-sans);
	font-size: .6875rem;
	letter-spacing: .1em;
	color: var(--ink-faint);
}

.reader__track {
	flex: 1;
	height: 2px;
	background: var(--rule);
	position: relative;
	overflow: hidden;
}

.reader__bar {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 0;
	background: var(--accent);
	transition: width .2s ease;
}

.reader__count { font-variant-numeric: tabular-nums; white-space: nowrap; }

.no-js .reader__progress { display: none; }

/* ---------------------------------------------------------
   目次パネル
   --------------------------------------------------------- */

.toc-panel {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(22rem, 86vw);
	background: var(--paper-raised);
	border-inline-start: 1px solid var(--rule);
	box-shadow: var(--shadow);
	z-index: 90;
	padding: 1.75rem 1.5rem;
	overflow-y: auto;
	transform: translateX(102%);
	transition: transform .25s ease;
	font-family: var(--font-sans);
}

.toc-panel[data-open="true"] { transform: none; }

.toc-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.1rem;
}

.toc-panel__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: .9375rem;
	letter-spacing: .14em;
}

.toc-panel__close {
	appearance: none;
	background: none;
	border: 0;
	color: var(--ink-faint);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	padding: .25rem .4rem;
}

.toc-panel ol { list-style: none; margin: 0; padding: 0; }

.toc-panel li { border-top: 1px solid var(--rule-soft); }

.toc-panel a {
	display: block;
	padding: .7rem .2rem;
	font-size: .8125rem;
	line-height: 1.7;
	text-decoration: none;
	color: var(--ink-soft);
}

.toc-panel a:hover { color: var(--accent); }
.toc-panel li[data-level="3"] a { padding-inline-start: 1.2rem; font-size: .78125rem; }

.toc-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .25);
	z-index: 80;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.toc-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------
   記事フッター
   --------------------------------------------------------- */

.entry-footer {
	max-width: var(--measure);
	margin: clamp(3rem, 7vw, 4.5rem) auto 0;
	padding-top: 2rem;
	border-top: 1px solid var(--rule);
	font-family: var(--font-sans);
}

.entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	font-size: .75rem;
	letter-spacing: .06em;
}

.entry-tags a {
	display: inline-block;
	border: 1px solid var(--rule);
	border-radius: 999px;
	padding: .3em 1em;
	text-decoration: none;
	color: var(--ink-soft);
}

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

.entry-nav {
	display: grid;
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	border-radius: 4px;
	overflow: hidden;
}

@media (min-width: 40em) { .entry-nav { grid-template-columns: 1fr 1fr; } }

.entry-nav a {
	display: block;
	background: var(--paper);
	padding: 1.1rem 1.25rem;
	text-decoration: none;
}

.entry-nav a:hover { background: var(--paper-raised); }

.entry-nav__label {
	display: block;
	font-size: .625rem;
	letter-spacing: .16em;
	color: var(--ink-faint);
	margin-bottom: .4rem;
}

.entry-nav__title {
	display: block;
	font-family: var(--font-serif);
	font-size: .9375rem;
	line-height: 1.7;
}

.entry-nav__item--next { text-align: end; }

/* ---------------------------------------------------------
   スマホ
   --------------------------------------------------------- */

@media (max-width: 47.9375em) {
	.reader-bar { top: 4.05rem; justify-content: center; flex-wrap: wrap; }
	[data-reader-mode="vertical"] .reader .entry { padding-inline: .25rem; }
	.reader__progress { margin-top: .9rem; }
}

/* 縦組みで印刷するのは無理があるので、印刷時は横組みに戻す */
@media print {
	.site-header, .site-footer, .reader-bar, .reader__pager,
	.reader__progress, .toc-panel, .toc-backdrop, .entry-nav { display: none !important; }

	.reader .reader__viewport {
		writing-mode: horizontal-tb !important;
		height: auto !important;
		width: auto !important;
		overflow: visible !important;
		max-width: none;
	}

	.reader .entry-content > * { margin-block: 0 1.6em !important; block-size: auto !important; }
}

/* ---------------------------------------------------------
   コメント（常に横組み）
   --------------------------------------------------------- */

.comments-area {
	max-width: var(--measure);
	margin: clamp(3rem, 7vw, 4.5rem) auto 0;
	writing-mode: horizontal-tb;
	font-family: var(--font-sans);
	font-size: .9375rem;
}

.comments-area__title {
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	letter-spacing: .08em;
	margin: 0 0 1.5rem;
}

.comment-list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.comment-list ol.children { list-style: none; padding-inline-start: 1.5rem; }
.comment-list article { border-top: 1px solid var(--rule-soft); padding: 1.25rem 0; }
.comment-list .comment-meta { font-size: .75rem; color: var(--ink-faint); margin-bottom: .5rem; }
.comment-list .comment-content { line-height: 1.95; }

.comment-form label { display: block; font-size: .8125rem; margin-bottom: .35rem; }
.comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	font: inherit;
	width: 100%;
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: .7em .9em;
	color: inherit;
}
.comment-form .submit {
	font: inherit;
	font-size: .875rem;
	letter-spacing: .1em;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 3px;
	padding: .8em 2em;
	cursor: pointer;
}
.comment-form .submit:hover { background: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------------
   フロントページの最新記事
   --------------------------------------------------------- */

.front-entry { max-width: var(--wrap); }
.front-latest { margin-top: clamp(3rem, 8vw, 5rem); }
.front-latest .page-header { margin-bottom: 1rem; }

/* ページ分割リンク */
.page-links {
	writing-mode: horizontal-tb;
	font-family: var(--font-sans);
	font-size: .8125rem;
	letter-spacing: .08em;
	display: flex;
	gap: .5rem;
	margin-top: 2rem;
}