/*
Theme Name: 百人一首
Theme URI:
Author: suzu
Description: 百人一首を縦書きの二列グリッドで一覧するテーマ。和歌は上の句・下の句の二行に組み、現代語訳と作者を添える。迷いそうな漢字にはふりがな。季節とテーマのタグで絞り込める。
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hyakunin-isshu
Tags: japanese, vertical-writing, minimal
*/

:root{
	--paper:#f7f4ee;
	--paper-2:#efe9df;
	--ink:#221f1b;
	--ink-soft:#6d675d;
	--ink-faint:#a8a196;
	--rule:#ded7ca;
	--accent-soft:#c9a9a4;
	--serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
	--sans:"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
	background:var(--paper);
	color:var(--ink);
	font-family:var(--serif);
	-webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important;}

/* ---------- 見出しとタグ ---------- */
.head{padding:44px 24px 24px; text-align:center;}
.title{font-size:23px; letter-spacing:.5em; margin:0 0 10px; font-weight:400; text-indent:.5em;}
.sub{font-size:12px; color:var(--ink-soft); letter-spacing:.15em; margin:0; font-family:var(--sans);}

.tagbar{
	display:flex; flex-wrap:wrap; gap:7px; justify-content:center;
	padding:0 24px 8px; max-width:820px; margin:0 auto;
}
.tag{
	font-family:var(--sans); font-size:12px; letter-spacing:.06em;
	padding:4px 13px; border:1px solid var(--rule); border-radius:999px;
	background:transparent; color:var(--ink-soft); cursor:pointer; transition:.15s;
}
.tag:hover{border-color:var(--accent-soft); color:var(--ink);}
.tag.on{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.tag:focus-visible{outline:1px solid var(--ink); outline-offset:2px;}

.count{
	text-align:center; font-family:var(--sans); font-size:11.5px;
	color:var(--ink-faint); letter-spacing:.12em; margin:18px 0 0;
}

/* ---------- 二列の縦書きグリッド ---------- */
.grid{
	display:flex; flex-wrap:wrap; flex-direction:row-reverse;
	align-content:flex-start;
	max-width:1000px; margin:26px auto 110px; padding:0 24px;
	border-top:1px solid var(--rule);
}
.cell{
	position:relative;
	width:50%; height:452px; padding:38px 30px;
	border-bottom:1px solid var(--rule); border-left:1px solid var(--rule);
	display:flex; flex-direction:row-reverse;
	align-items:flex-start; justify-content:center;
	transition:background .2s;
}
/* 解説のある歌だけ、1枚のまとまりだと分かるように反応させる */
.cell:has(.more):hover{background:var(--paper-2);}

/* 右から　歌 → 訳 → 作者。作者だけ下揃えにして、頭が三つ揃うのを崩す */
.uta   {order:-1;}
.yaku  {order:1;}
.author{order:2; align-self:flex-end; margin:0 22px 0 0;}

/* 和歌は上の句・下の句の二行に収める */
.uta{
	flex:0 0 auto; writing-mode:vertical-rl; margin:0;
	font-size:18px; line-height:2.8; letter-spacing:.08em;
}
.uta i{font-style:normal; display:block;}

.yaku{
	flex:0 0 auto; writing-mode:vertical-rl; margin:0 22px 0 0; height:100%;
	font-size:13px; line-height:2; letter-spacing:.04em; color:var(--ink-soft);
}
.author{
	flex:0 0 auto; writing-mode:vertical-rl;
	font-size:12px; letter-spacing:.2em; color:var(--ink-soft); white-space:nowrap;
}
.author em{font-style:normal; font-size:10px; letter-spacing:.1em; color:var(--ink-faint);}

/* 訳の見出し。縦組みの中で、訳の右肩に小さく立てる */
.yaku b{
	display:block; font-weight:400;
	font-size:10px; letter-spacing:.2em; color:var(--ink-faint);
	margin:0 0 0 9px; /* 縦組みなので、次の列（訳文）との間は左マージン */
}

/* カードの足元に置く、控えめな解説への入口 */
.more{
	position:absolute; left:28px; bottom:34px; margin:0;
	writing-mode:vertical-rl; /* 歌・訳・作者と字の向きを揃える */
	font-family:var(--sans); font-size:10.5px; letter-spacing:.24em;
}
.more a{
	color:var(--ink-faint); text-decoration:none;
	transition:color .18s;
}
.more a:hover{color:var(--ink);}
.more a:focus-visible{outline:1px solid var(--ink); outline-offset:3px;}

/* ---------- ふりがな ---------- */
ruby{ruby-align:center;}
rp{display:none;}
.uta rt{font-size:.5em; color:var(--ink-faint); letter-spacing:.02em; font-weight:400;}
.author rt{font-size:.6em; color:var(--ink-faint); letter-spacing:0;}

/* ---------- 解説ページ（ここだけ横書き） ---------- */
.kaisetsu{
	max-width:660px; margin:0 auto; padding:34px 24px 90px;
	line-height:2.05;
}
/* 下の .kaisetsu p より詳しい指定にしておく。でないと本文の15pxに負ける */
.kaisetsu .back{
	margin:0 0 44px; font-family:var(--sans);
	font-size:10px; letter-spacing:.16em; line-height:1.6;
}
.kaisetsu .back a{color:var(--ink-faint); text-decoration:none;}
.kaisetsu .back a:hover{color:var(--ink);}

/* 歌だけは縦書きのまま残す */
.kaisetsu-head{
	display:flex; flex-direction:row-reverse;
	align-items:flex-start; justify-content:center;
	padding:20px 0 46px; margin-bottom:8px;
	border-bottom:1px solid var(--rule);
}
.kaisetsu-head .uta{font-size:21px; line-height:2.9;}
.kaisetsu-head .author{align-self:flex-end; margin:0 26px 0 0;}

.kaisetsu .block{margin:0 0 46px;}
.kaisetsu h2{
	font-family:var(--sans); font-size:11.5px; font-weight:400;
	letter-spacing:.24em; color:var(--ink-faint);
	margin:0 0 16px; padding-bottom:9px;
	border-bottom:1px solid var(--rule);
}
.kaisetsu p{margin:0 0 1.1em; font-size:15px;}
.kaisetsu p:last-child{margin-bottom:0;}

/* 語釈 */
.goshaku{margin:0; font-size:14.5px;}
.goshaku dt{
	margin:0 0 3px; color:var(--ink);
	letter-spacing:.06em;
}
.goshaku dd{
	margin:0 0 18px; padding-left:16px;
	border-left:1px solid var(--rule);
	color:var(--ink-soft); font-size:14px;
}
.goshaku dd:last-child{margin-bottom:0;}

/* 前後の歌へ */
.near{
	display:flex; gap:18px; flex-wrap:wrap;
	padding-top:34px; border-top:1px solid var(--rule);
}
.near a{
	flex:1 1 240px; min-width:0;
	color:var(--ink-soft); text-decoration:none;
	font-size:13.5px; line-height:1.9;
	padding:16px 18px; border:1px solid var(--rule);
	transition:.18s;
}
.near a:hover{border-color:var(--accent-soft); color:var(--ink);}
.near span{
	display:block; font-family:var(--sans); font-size:10.5px;
	letter-spacing:.2em; color:var(--ink-faint); margin-bottom:7px;
}
.near-next{text-align:right;}

/* ---------- 足 ---------- */
.site-foot{
	padding:0 24px 60px; text-align:center;
	font-family:var(--sans); font-size:11px; letter-spacing:.2em; color:var(--ink-faint);
}
.site-foot p{margin:0;}

@media(max-width:720px){
	/* 一列になるので、一覧の左右余白は要らない。ここが48pxを占めていた */
	.grid{padding:0;}

	/* 横幅が足りないので、マスを縦に伸ばす。
	   縦が長いほど訳の列数が減り、そのぶん横に余白ができる。 */
	.cell{width:100%; height:560px; padding:30px 18px; border-left:none;}

	/* 狭い画面では「解説を見る」を浮かせない。
	   重ねて置くと余白が無くなったときに作者と重なるため、列として並べる。 */
	.more{
		position:static; order:3;
		align-self:flex-end; margin:0 12px 0 0;
	}

	/* 列と列のあいだは少しだけ詰める（字の大きさは画面幅を問わず同じ） */
	.yaku{margin:0 18px 0 0;}
	.author{margin:0 18px 0 0;}
}