/* ==================================================================
 * 読みもの（TPK_Yomimono。2026-11-08 意匠十代目。見本 https://claude.ai/artifact/13UgxBUJCA92x4qSiBwtsS）
 * 1. トップの読みもののエリア .tpk-yomi（新着の帯の下、2つの楽しみ方の上）
 * 2. 読みもの一覧 .tpk-ym（固定ページ /yomimono/）
 * 区画の割り方は黄金比（1.618:1）、表紙と写真の枠は白銀比（1:1.414）。色と字は親テーマの決まり（--tp-…）だけ。
 * 高さの目安：トップのエリアはパソコン 900px・スマホ 1266px まで（ご主人 11/6）
 * ================================================================== */

.tpk-yomi,.tpk-ym{--yomi-shadow:rgba(34,32,28,.16)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) :is(.tpk-yomi,.tpk-ym){--yomi-shadow:rgba(0,0,0,.5)} }
:root[data-theme="dark"] :is(.tpk-yomi,.tpk-ym){--yomi-shadow:rgba(0,0,0,.5)}
:is(.tpk-yomi,.tpk-ym) *{box-sizing:border-box}
:is(.tpk-yomi,.tpk-ym) a{color:inherit; text-decoration:none}
/* 題は触っても下線を引かず、字を緑にする（2026-11-08 ご主人「読み物エリアの見出しも、下線ではなくオンマウスでグリーンに」。記事の中の写真の見出しと同じ）。
   サイト全体の .tp-sen（触ると下線が左から引かれる）を、読みもののエリアと一覧だけ打ち消す。
   今日の一語の語（.tpk-yomi-go__w）は、下線が引かれる動きのまま（11/8 ご主人「単語の下線はそのままで OK」） */
:is(.tpk-yomi,.tpk-ym) .tp-sen:not(.tpk-yomi-go__w){background:none; transition:color .2s}
:is(.tpk-yomi,.tpk-ym) a:is(:hover,:focus-visible) .tp-sen:not(.tpk-yomi-go__w){color:var(--tp-green,#2F4F43)}
:is(.tpk-yomi,.tpk-ym) img{display:block; max-width:100%}
:is(.tpk-yomi,.tpk-ym) :where(h1,h2,h3,p,ul,ol){margin:0}
:is(.tpk-yomi,.tpk-ym) :where(ul,ol){list-style:none; padding:0}
:is(.tpk-yomi,.tpk-ym) a:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}

/* ---- 共通の部品 ---- */
.tpk-yomi-date{font-size:.75rem; color:var(--tp-ink-mute,#6B6559); font-variant-numeric:tabular-nums}
.tpk-yomi-t,.tpk-yomi-feat__t{display:block; font-family:var(--tp-mincho,serif); font-weight:500; letter-spacing:.04em; line-height:1.5; text-wrap:balance; word-break:auto-phrase}
.tpk-yomi-more{align-self:flex-end; flex-shrink:0; line-height:1.3; font-size:.8125rem; color:var(--tp-green,#2F4F43); border-bottom:1px solid currentColor; padding-bottom:1px; white-space:nowrap}
/* 字は小さいまま、押せる広さは上下に 44px（ご主人 10/10「指で押しやすいか」） */
.tpk-yomi-more{position:relative}
.tpk-yomi-more::after{content:""; position:absolute; left:-6px; right:-6px; top:50%; height:44px; transform:translateY(-50%)}
.tpk-yomi-more:hover{color:var(--tp-green-dark,#243D34)}
.tpk-yomi-nafuda{display:inline-flex; align-items:center; padding:2px 8px; border:1px solid var(--tp-green,#2F4F43); color:var(--tp-green,#2F4F43); font-size:.6875rem; letter-spacing:.1em; line-height:1.6; white-space:nowrap}
.tpk-yomi-ph{position:relative; display:block; overflow:hidden; background:var(--tp-kinari-hi,#FAF6EE); box-shadow:0 8px 20px var(--yomi-shadow)}
.tpk-yomi-ph img,.tpk-yomi-ph picture{display:block; width:100%; height:100%; object-fit:cover}
.tpk-yomi-cover{position:relative; display:block; aspect-ratio:1/1.414; overflow:hidden; background:var(--tp-kinari-hi,#FAF6EE); box-shadow:0 8px 20px var(--yomi-shadow)}
.tpk-yomi-cover img,.tpk-yomi-cover picture{display:block; width:100%; height:100%; object-fit:cover}
/* 読みもの一覧：指やマウスを乗せると写真が少し寄る（ほかのページのカードと同じ速さと曲線。2026-11-09 ご主人）。枠は overflow:hidden なのではみ出さない */
.tpk-ym :is(.tpk-yomi-ph,.tpk-yomi-sq,.tpk-yomi-cover) img{transition:transform var(--tpk-t-near,.6s) var(--tpk-ease,cubic-bezier(.2,.7,.2,1)), filter var(--tpk-t-near,.6s) ease}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .tpk-ym a:is(:hover,:focus-visible) :is(.tpk-yomi-ph,.tpk-yomi-sq,.tpk-yomi-cover) img{transform:scale(1.04); filter:brightness(1.05)}
}
/* 表紙の画像が無い解説（合う写真がまだ無いとき）：生成りの面に小さく「解説」 */
.tpk-yomi-cover:empty{display:grid; place-items:center; background:var(--tp-kinari-hi,#FAF6EE); border:1px dashed color-mix(in srgb, var(--tp-ink-mute,#6B6559) 55%, transparent); box-shadow:none}
.tpk-yomi-cover:empty::after{content:"解説"; font-family:var(--tp-mincho,serif); font-size:.8125rem; letter-spacing:.2em; color:var(--tp-ink-mute,#6B6559)}
.tpk-yomi-sq img,.tpk-yomi-sq picture{display:block; width:100%; height:100%; object-fit:cover}
.tpk-yomi-sub{display:block; font-size:.6875rem; color:var(--tp-ink-mute,#6B6559)}
.tpk-yomi-blurb{display:block; margin-top:8px; font-size:.78125rem; line-height:1.75; color:var(--tp-ink-sub,#5C574D)}

/* ---- 見出し（C 組み合わせ：大きな見出しは英語と日本語を横に、小さな頭は上に英語・下に日本語） ---- */
.tpk-yomi-en{font-family:var(--tp-gothic,sans-serif); font-weight:500; font-size:.65625rem; line-height:1.2; letter-spacing:.22em; text-transform:uppercase; color:var(--tp-green,#2F4F43)}
:is(.tpk-yomi-h h2,.tpk-ym-band h1,.tpk-ym-ku__h h2) .tpk-yomi-en{display:inline-block; vertical-align:middle; margin-right:14px; position:relative; top:-.1em}
:is(.tpk-yomi-h h2,.tpk-ym-band h1,.tpk-ym-ku__h h2) .tpk-yomi-en::after{content:""; display:inline-block; width:18px; height:1px; margin-left:12px; background:currentColor; vertical-align:middle; opacity:.6}
:is(.tpk-yomi-kh h3,.tpk-yomi-tana__h) .tpk-yomi-en{display:block; margin-bottom:5px; font-size:.59375rem}
:is(.tpk-yomi-kh h3,.tpk-yomi-tana__h){font-family:var(--tp-mincho,serif); font-weight:500; font-size:1rem; letter-spacing:.1em; line-height:1.4; color:var(--tp-ink,#22201C)}

/* ==================================================================
 * 1. トップの読みもののエリア
 * ================================================================== */
.tpk-yomi{background:var(--tp-kinari,#F2ECE0); color:var(--tp-ink,#22201C); padding-block:24px 28px; border-bottom:1px solid var(--tp-rule,#D8CFBE); font-size:.9375rem; line-height:1.8}
.tpk-yomi-h{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; border-bottom:1px solid var(--tp-rule,#D8CFBE); padding-bottom:10px}
.tpk-yomi-h h2{font-family:var(--tp-mincho,serif); font-weight:500; font-size:var(--tp-fs-section,1.5rem); letter-spacing:.12em; line-height:1.4}
/* 見出しの字は一覧へのリンク。ふだんは見出しの色のまま、指が乗ると日本語の字も深緑に（英語の札はもとから深緑。2026-11-08 ご主人） */
.tpk-yomi-hlink{display:inline-block; color:inherit; text-decoration:none; transition:color .2s}   /* inline-block：スマホで英語の札が上の行に分かれても、キーボードの枠が両方を囲むように（確認係） */
.tpk-yomi-hlink:is(:hover,:focus-visible){color:var(--tp-green,#2F4F43)}
@media (prefers-reduced-motion:reduce){ .tpk-yomi-hlink{transition:none} }
.tpk-yomi-dan{display:grid; gap:40px}
.tpk-yomi-dan + .tpk-yomi-dan{margin-top:20px; padding-top:18px; border-top:1px solid var(--tp-rule,#D8CFBE)}
/* 今週の写真（左）と右の列は、上の端と下の端をそろえる（2026-11-08 ご主人「上と下を揃えて」。前は縦の真ん中にそろえていて、右の列だけ上下が空いていた）。
   右の列は、おすすめの読みものを上の端に、今日の一語の枠を下の端（左の罫の線の高さ）に置く */
.tpk-yomi-dan--a{grid-template-columns:minmax(0,1.618fr) minmax(0,1fr); align-items:stretch}
.tpk-yomi-dan--a > .tpk-yomi-side{display:flex; flex-direction:column; justify-content:space-between}
.tpk-yomi-dan--b{grid-template-columns:minmax(0,1fr) minmax(0,1.618fr)}
.tpk-yomi-dan.is-one{grid-template-columns:minmax(0,1fr)}
.tpk-yomi-kh{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px}
/* 今週の写真とおすすめの読みものは、見出しの下をもう 10px あける（2026-11-09 ご主人） */
.tpk-yomi-shuu > .tpk-yomi-kh,.tpk-yomi-ninki.is-osusume > .tpk-yomi-kh{margin-bottom:20px}

/* エリアのすぐ下の「2つの楽しみ方」は、ほかの区画の間と同じだけあける（確認係：続きに見えないように） */
.tpk-yomi + .tpk-top-ways{padding-top:var(--tp-s5,64px)}
@media (max-width:781px){ .tpk-yomi + .tpk-top-ways{padding-top:var(--tp-s4,40px)} }

/* 今週の写真（大きな1本。写真は白銀比の横長、文は右） */
.tpk-yomi-feat{display:grid; grid-template-columns:minmax(0,1.414fr) minmax(0,1fr); gap:24px; align-items:start}
.tpk-yomi-feat .tpk-yomi-ph{aspect-ratio:1.414/1}
.tpk-yomi-feat__t{font-size:1.45rem; margin:10px 0 6px}
.tpk-yomi-lead{margin:8px 0 14px !important; font-size:.8125rem; color:var(--tp-ink-sub,#5C574D); line-height:1.75}
.tpk-yomi-mae{display:grid; gap:8px; border-top:1px solid var(--tp-rule,#D8CFBE); padding-top:10px}
/* 前の2本は、大きな写真と文の下に、2つ横に並べる（2026-11-08 ご主人「縦にならんでいる記事を横並びに」） */
/* 横並びの2本のサムネイルは、正方形でなく縦長（1:1.414）にして雑誌の目次のように（2026-11-08 ご主人「縦の長方形にして雑誌感を」） */
.tpk-yomi-feat > .tpk-yomi-mae a{grid-template-columns:72px minmax(0,1fr); gap:16px; align-items:stretch}
/* 題（「：」で改行）と日付をひとまとまりにして、画像の縦の真ん中にそろえる（2026-11-08 ご主人「タイトル改行：日付を、縦のセンターに」） */
.tpk-yomi-feat > .tpk-yomi-mae a > span:not(.tpk-yomi-sq){display:flex; flex-direction:column; justify-content:center}
.tpk-yomi-feat > .tpk-yomi-mae a > span:not(.tpk-yomi-sq) > small{margin-top:8px; line-height:1}
.tpk-yomi-feat > .tpk-yomi-mae .tpk-yomi-sq{width:72px; height:102px}
.tpk-yomi-feat > .tpk-yomi-mae a > span:not(.tpk-yomi-sq){font-size:.875rem; line-height:1.5; text-wrap:balance; word-break:auto-phrase}
.tpk-yomi-feat > .tpk-yomi-mae small{margin-top:4px; font-size:.75rem; letter-spacing:.06em; color:var(--tp-ink-sub,#5C574D)}
.tpk-yomi-feat > .tpk-yomi-mae{grid-column:1 / -1; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 24px; margin-top:8px; padding-block:18px; border-bottom:1px solid var(--tp-rule,#D8CFBE)}   /* 上下にゆとり（ご主人「上下にマージンをもう少し」） */
.tpk-yomi-mae a{display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; align-items:center; min-height:44px}
.tpk-yomi-mae .tpk-yomi-sq{display:block; width:44px; height:44px; overflow:hidden}
.tpk-yomi-mae .tpk-yomi-sq :is(img,picture){width:100%; height:100%; object-fit:cover}
.tpk-yomi-mae a > span{font-family:var(--tp-mincho,serif); font-size:.8125rem; line-height:1.4}
.tpk-yomi-mae small{display:block; font-family:var(--tp-gothic,sans-serif)}

/* 動く一部：絵の中の一か所（記事の tpk_ugoki）だけが、ゆっくり揺れる。全体は動かさない。動きを減らす設定では止める */
.tpk-yomi-fune{position:absolute; inset:0; background-size:cover; background-position:center; animation:tpk-yomi-yure 5.5s ease-in-out infinite alternate; pointer-events:none}
@keyframes tpk-yomi-yure{from{transform:rotate(-.9deg) translateY(0)} to{transform:rotate(.9deg) translateY(1.5px)}}
@media (prefers-reduced-motion:reduce){ .tpk-yomi-fune{animation:none} }

/* よく読まれている（小さな正方形＋右に名札・日付・題）。番号は明朝で */
.tpk-yomi-ninki ol{display:grid; gap:18px; counter-reset:n}   /* 1本ごとの間を広めに（2026-11-08 ご主人「行間をもう少し広げて」。前は 10px） */
.tpk-yomi-ninki li a{display:grid; grid-template-columns:20px 56px minmax(0,1fr); gap:12px; align-items:center; min-height:56px}
.tpk-yomi-ninki li a::before{counter-increment:n; content:counter(n); font-family:var(--tp-mincho,serif); font-size:1.1rem; color:var(--tp-ink-mute,#6B6559); text-align:center}
.tpk-yomi-ninki .tpk-yomi-sq{display:block; width:56px; height:56px; overflow:hidden; background:var(--tp-kinari-hi,#FAF6EE)}
.tpk-yomi-ninki .tpk-yomi-t{font-size:.95rem; margin-top:3px}
.tpk-yomi-row{display:flex; gap:8px; align-items:center}

/* 今日の一語（よく読まれているとの間は、パソコンで少しあける。ご主人 11/8「上部のマージンを少し」） */
.tpk-yomi-kotoba{background:var(--tp-kinari-hi,#FAF6EE); border:1px solid var(--tp-rule,#D8CFBE); padding:12px 18px; display:flex; flex-direction:column; gap:4px}
.tpk-yomi-ninki + .tpk-yomi-kotoba{margin-top:30px}
.tpk-yomi-kotoba .tpk-yomi-kh{margin:0}
.tpk-yomi-go{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; width:fit-content; max-width:100%}
/* 語も読みも、言葉の途中では折り返さない（2026-11-08 ご主人「東海道五十三次など、単語はなるべく改行しないように」）。
   入りきらないときは、読みが語の下の行へ回る。読みは空白のところでだけ折れる。語が欄より長いときだけ、はみ出さないように途中で折る */
.tpk-yomi-go__w,.tpk-yomi-go__y{word-break:keep-all; overflow-wrap:anywhere}
.tpk-yomi-go__w{font-family:var(--tp-mincho,serif); font-size:1.9rem; letter-spacing:.14em; line-height:1.2}
.tpk-yomi-go__y{font-size:.75rem; color:var(--tp-ink-mute,#6B6559); letter-spacing:.2em}
.tpk-yomi-kotoba p{margin-top:4px; font-size:.8125rem; color:var(--tp-ink-sub,#5C574D); line-height:1.75}

/* 整える前とあと：つまみを左右に動かして見比べる（パソコン 160px 幅・スマホ 120px 幅。ご主人 11/8） */
.tpk-yomi-toto__in{display:grid; grid-template-columns:160px minmax(0,1fr); gap:16px; align-items:center}
.tpk-yomi-toto__in p{font-size:.8125rem; color:var(--tp-ink-sub,#5C574D); line-height:1.75}
.tpk-yomi-cmp{position:relative; width:160px; aspect-ratio:2/3; overflow:hidden; background:var(--tp-kinari-hi,#FAF6EE); box-shadow:0 8px 20px var(--yomi-shadow)}
.tpk-yomi-cmp img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--tp-kinari-hi,#FAF6EE)}
.tpk-yomi-cmp__ue{clip-path:inset(0 0 0 var(--x,50%))}
.tpk-yomi-cmp__sen{position:absolute; top:0; bottom:0; left:var(--x,50%); width:2px; margin-left:-1px; background:var(--tp-green,#2F4F43); pointer-events:none}
.tpk-yomi-cmp__sen::after{content:"↔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--tp-green,#2F4F43); color:var(--tp-kinari-hi,#FAF6EE); font-size:.8125rem}
.tpk-yomi-cmp input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0}
.tpk-yomi-cmp:has(input:focus-visible){outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}

/* 本棚：一冊を通しての本と解説の記事。表紙は白銀比（1:1.414）。棚板の上に並べ、横に流す */
.tpk-yomi-tana{position:relative; min-width:0}
.tpk-yomi-tana .tpk-yomi-kh{align-items:flex-end}
.tpk-yomi-tabs{display:flex; gap:4px}
.tpk-yomi-tabs button{font:inherit; font-size:.75rem; letter-spacing:.12em; min-height:44px; padding:4px 12px; border:1px solid var(--tp-rule,#D8CFBE); background:none; color:var(--tp-ink-sub,#5C574D); cursor:pointer}
.tpk-yomi-tabs button[aria-selected="true"]{border-color:var(--tp-green,#2F4F43); color:var(--tp-green,#2F4F43); background:var(--tp-green-pale,#EDF2EA)}
.tpk-yomi-tabs button:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
.tpk-yomi-tana__more{margin-bottom:6px}
.tpk-yomi-shelf{margin:0; padding:4px 0 14px !important; display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin}
.tpk-yomi-panel[hidden]{display:none}
.tpk-yomi-shelf > li{flex:0 0 112px; scroll-snap-align:start}
.tpk-yomi-shelf .tpk-yomi-cover{box-shadow:4px 6px 0 var(--tp-kinari-deep,#E6DED0), 0 10px 18px var(--yomi-shadow)}
.tpk-yomi-shelf .tpk-yomi-t{font-size:.85rem; margin-top:12px; line-height:1.45}
.tpk-yomi-ita{height:8px; margin-top:-10px; background:var(--tp-kinari-deep,#E6DED0); border-top:1px solid var(--tp-rule,#D8CFBE)}
/* 空の表紙「次の一冊を準備中」：点線の枠の中に字 */
.tpk-yomi-mada .tpk-yomi-cover{display:grid; place-items:center; text-align:center; background:none; border:1px dashed color-mix(in srgb, var(--tp-ink-mute,#6B6559) 55%, transparent); box-shadow:none}
.tpk-yomi-mada .tpk-yomi-cover > span{font-size:.6875rem; letter-spacing:.12em; line-height:1.7; color:var(--tp-ink-mute,#6B6559)}
.tpk-yomi-mada .tpk-yomi-cover small{display:block; margin-top:4px; font-size:.625rem}
.tpk-yomi-mada .tpk-yomi-t{color:var(--tp-ink-mute,#6B6559)}
/* 本が1〜2冊のあいだ：表紙の横に題と短い紹介（ご主人 11/8） */
.tpk-yomi-tana.is-sukunai .tpk-yomi-shelf--hon > li:not(.tpk-yomi-mada){flex:0 0 300px}
.tpk-yomi-tana.is-hon-1 .tpk-yomi-shelf--hon > li:not(.tpk-yomi-mada){flex-basis:400px}
.tpk-yomi-tana.is-sukunai .tpk-yomi-shelf--hon > li:not(.tpk-yomi-mada) > a{display:grid; grid-template-columns:112px minmax(0,1fr); grid-template-rows:auto auto 1fr; column-gap:16px; align-items:start}
.tpk-yomi-tana.is-sukunai .tpk-yomi-shelf--hon > li:not(.tpk-yomi-mada) .tpk-yomi-cover{grid-row:1 / 4}
.tpk-yomi-tana.is-sukunai .tpk-yomi-shelf--hon > li:not(.tpk-yomi-mada) > a > :not(.tpk-yomi-cover){grid-column:2}
.tpk-yomi-tana.is-sukunai .tpk-yomi-shelf--hon > li:not(.tpk-yomi-mada) .tpk-yomi-t{margin-top:2px; font-size:1rem}

@media (max-width:781px){
  .tpk-yomi{padding-block:22px 26px}
  .tpk-yomi-dan,.tpk-yomi-dan--a,.tpk-yomi-dan--b{grid-template-columns:minmax(0,1fr); gap:22px}
  .tpk-yomi-dan + .tpk-yomi-dan{margin-top:18px; padding-top:16px}
  .tpk-yomi-feat{grid-template-columns:minmax(0,1fr); gap:12px}
  .tpk-yomi-feat .tpk-yomi-ph{aspect-ratio:1.75/1}
  .tpk-yomi-feat__t{font-size:1.25rem; margin-top:6px}
  /* スマホは高さを抑える：今週の写真の説明と前の2本、ことば帳の説明は出さない。よく読まれているは2本まで */
  .tpk-yomi-lead,.tpk-yomi-mae,.tpk-yomi-kotoba p{display:none}
  .tpk-yomi-ninki:not(.tpk-ym-ninki) li:nth-child(n+3){display:none}   /* トップだけ2本に（高さの上限）。一覧は5本とも */
  .tpk-yomi-ninki li a{grid-template-columns:18px 52px minmax(0,1fr)}
  .tpk-yomi-ninki .tpk-yomi-sq{width:52px; height:52px}
  .tpk-yomi-ninki + .tpk-yomi-kotoba{margin-top:18px}
  .tpk-yomi-kotoba{padding:10px 14px}
  .tpk-yomi-go{min-height:44px; align-items:center}
  .tpk-yomi-go__w{font-size:1.7rem}
  .tpk-yomi-dan--b .tpk-yomi-tana{order:-1}
  .tpk-yomi-shelf > li{flex-basis:84px}
  .tpk-yomi-shelf{gap:16px}
  /* スマホで本が少ないあいだは、本を幅いっぱいに（空の表紙は出さない。横に切れて見えるため。確認係） */
  .tpk-yomi-tana.is-sukunai .tpk-yomi-shelf--hon > li:not(.tpk-yomi-mada){flex-basis:100%}
  .tpk-yomi-tana.is-hon-2 .tpk-yomi-shelf--hon > li:not(.tpk-yomi-mada){flex-basis:min(300px, 86%)}
  .tpk-yomi-tana.is-sukunai .tpk-yomi-shelf--hon > .tpk-yomi-mada{display:none}
  .tpk-yomi-tana.is-sukunai .tpk-yomi-shelf--hon > li:not(.tpk-yomi-mada) > a{grid-template-columns:84px minmax(0,1fr); column-gap:12px}
  .tpk-yomi-blurb{font-size:.75rem}
  .tpk-yomi-toto__in{grid-template-columns:120px minmax(0,1fr)}
  .tpk-yomi-cmp{width:120px}
}

/* ==================================================================
 * 2. 読みもの一覧
 * ================================================================== */
.tpk-ym{background:var(--tp-kinari,#F2ECE0); color:var(--tp-ink,#22201C); font-size:.9375rem; line-height:1.8}
.tpk-ym-in{max-width:calc(var(--tp-content,1152px) + 2 * var(--tp-gutter,64px)); margin:0 auto; padding:0 var(--tp-gutter,64px)}
.tpk-ym-band{padding-block:28px 22px; border-bottom:1px solid var(--tp-rule,#D8CFBE)}
/* 題の下は 40px（2026-11-09 ご主人。前は 12px） */
.tpk-ym-band h1{margin:10px 0 40px; font-family:var(--tp-mincho,serif); font-weight:500; font-size:clamp(1.6rem,4vw,2.2rem); letter-spacing:.1em; line-height:1.4}
.tpk-ym-band p{margin:0; color:var(--tp-ink-sub,#5C574D); font-size:.875rem; line-height:1.9}
/* PC は、題と説明を左、連載のボタンを右に置き、下の線にそろえる（ご主人 11/8「ボタンを右に」） */
@media (min-width:782px){
  .tpk-ym-band > .tpk-ym-in{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:40px; align-items:end}
  .tpk-ym-band > .tpk-ym-in > :not(.tpk-ym-tabs){grid-column:1}
  .tpk-ym-band .tpk-ym-tabs{grid-column:2; grid-row:1 / span 3; align-self:end; margin-top:0; justify-content:flex-end}
}
.tpk-ym-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.tpk-ym-tabs a{display:inline-flex; align-items:center; min-height:44px; padding:6px 14px; border:1px solid var(--tp-rule,#D8CFBE); font-size:.8125rem; background:var(--tp-kinari-hi,#FAF6EE)}
.tpk-ym-tabs a:hover{border-color:var(--tp-green,#2F4F43); color:var(--tp-green,#2F4F43)}
.tpk-ym-ku-wrap,.tpk-ym-pair{border-bottom:1px solid var(--tp-rule,#D8CFBE)}
.tpk-ym-ku{padding-block:36px; scroll-margin-top:16px}
.tpk-ym-ku__h{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-bottom:30px}   /* 区画の見出しの下を 10px 広げた（2026-11-09 ご主人。前は 20px） */
.tpk-ym-ku__h h2{white-space:nowrap; flex-shrink:0; line-height:1.3; font-family:var(--tp-mincho,serif); font-weight:500; font-size:1.3rem; letter-spacing:.08em}   /* 「一冊を通し／て」と途中で折れないように（ご主人 11/8） */
.tpk-ym-ku__h p{align-self:flex-end; line-height:1.3; margin:0 0 -.22em auto !important; font-size:.75rem; color:var(--tp-ink-mute,#6B6559)}
.tpk-ym-ku__h .tpk-yomi-more{margin-left:auto}
.tpk-ym-ku__h p + .tpk-yomi-more{margin-left:0}
.tpk-ym-empty{padding-block:48px; color:var(--tp-ink-sub,#5C574D)}

/* 今週の写真：大きな1本（黄金比の横長）と、正方形の小さな3本 */
.tpk-ym-shuu{display:grid; grid-template-columns:minmax(0,1.618fr) minmax(0,1fr); gap:32px}
.tpk-ym-shuu.is-one{grid-template-columns:minmax(0,1fr)}
.tpk-ym-big .tpk-yomi-ph{aspect-ratio:1.618/1}
.tpk-ym-big .tpk-yomi-t{font-size:1.5rem; margin:12px 0 4px}
.tpk-ym-sq{display:grid; gap:16px; align-content:start}
.tpk-ym-sq a{display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:center}
.tpk-ym-sq .tpk-yomi-sq{display:block; width:96px; height:96px; overflow:hidden; background:var(--tp-kinari-hi,#FAF6EE)}
.tpk-ym-sq .tpk-yomi-t{font-size:1rem; margin-top:4px}

/* 表紙を並べる（一冊を通しては5列、解説は3列＋右に大きな1枚） */
.tpk-ym-covers{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px}
.tpk-ym-covers .tpk-yomi-t{font-size:.95rem; margin-top:10px}
.tpk-ym-covers--kai{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.618fr)}
.tpk-ym-covers--kai li:first-child{order:9}   /* 大きな1枚は右に（今週の写真の区画と左右を入れ替える） */
.tpk-ym-covers--kai li:first-child .tpk-yomi-cover{aspect-ratio:1.414/1}

/* 月のまとめ：横長の写真を3列 */
.tpk-ym-rect{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.tpk-ym-rect .tpk-yomi-ph{aspect-ratio:1.414/1}
.tpk-ym-rect .tpk-yomi-t{font-size:1rem; margin-top:10px}

/* 本が1〜2冊のあいだ：一冊を通してと解説を1段に（1:1.618）。本は表紙の横に題と短い紹介 */
.tpk-ym-pair > .tpk-ym-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.618fr); gap:48px}
.tpk-ym-pair .tpk-ym-covers--hon{grid-template-columns:minmax(0,1fr); gap:20px}
.tpk-ym-pair .tpk-ym-covers--hon > li > a{display:grid; grid-template-columns:150px minmax(0,1fr); grid-template-rows:auto auto 1fr; column-gap:18px; align-items:start}
.tpk-ym-pair .tpk-ym-covers--hon > li > a .tpk-yomi-cover{grid-row:1 / 4}
.tpk-ym-pair .tpk-ym-covers--hon > li > a > :not(.tpk-yomi-cover){grid-column:2}
.tpk-ym-pair .tpk-ym-covers--hon .tpk-yomi-t{margin-top:2px}
.tpk-ym-pair .tpk-ym-covers--hon > li.tpk-yomi-mada{display:grid; grid-template-columns:150px minmax(0,1fr); column-gap:18px; align-items:center}
.tpk-ym-pair .tpk-ym-covers--hon > li.tpk-yomi-mada .tpk-yomi-cover{aspect-ratio:auto; height:72px}
.tpk-ym-pair .tpk-ym-covers--hon > li.tpk-yomi-mada .tpk-yomi-cover > span{display:none}
.tpk-ym-pair .tpk-ym-covers--hon > li.tpk-yomi-mada .tpk-yomi-cover{grid-row:1 / 3}
.tpk-ym-pair .tpk-ym-covers--hon > li.tpk-yomi-mada .tpk-yomi-t{grid-column:2; grid-row:1; align-self:end; margin:0}
.tpk-ym-pair .tpk-ym-covers--hon > li.tpk-yomi-mada .tpk-yomi-sub{grid-column:2; grid-row:2; align-self:start}
.tpk-ym-pair .tpk-ym-covers--kai{grid-template-columns:repeat(3,minmax(0,1fr))}
.tpk-ym-pair .tpk-ym-covers--kai li:first-child{grid-column:1 / -1; order:-1}
.tpk-ym-covers--hon .tpk-yomi-date{display:block}

/* いちばん下の区画の線は消す（フッターの線と二重にならないように） */
.tpk-ym > :last-child{border-bottom:0}
@media (max-width:1023px){ .tpk-ym-in{padding:0 var(--tp-gutter,24px)} }
@media (max-width:781px){
  .tpk-ym-shuu,.tpk-ym-rect{grid-template-columns:minmax(0,1fr)}
  .tpk-ym-rect{gap:18px}
  .tpk-ym-ku{padding-block:28px}
  .tpk-ym-covers,.tpk-ym-covers--kai{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
  .tpk-ym-covers--kai li:first-child{grid-column:1/-1; order:-1}
  .tpk-ym-pair .tpk-ym-covers--kai{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tpk-ym-tabs{gap:6px}
  .tpk-ym-tabs a{padding:6px 10px}
  .tpk-ym-pair > .tpk-ym-in{display:block; padding:0}
  .tpk-ym-pair > .tpk-ym-in > .tpk-ym-ku{padding-inline:var(--tp-gutter,16px)}
  .tpk-ym-pair > .tpk-ym-in > .tpk-ym-ku + .tpk-ym-ku{border-top:1px solid var(--tp-rule,#D8CFBE)}
  .tpk-ym-pair .tpk-ym-covers--hon > li > a,.tpk-ym-pair .tpk-ym-covers--hon > li.tpk-yomi-mada{grid-template-columns:110px minmax(0,1fr); column-gap:14px}
}

/* 格子の置き場所を決め打ちにする（2026-11-08 本番のトップで崩れた直し）。
 * 本番では、画像のまわりに見えない要素（遅延読み込みの仕組みなどが足すもの）が入ることがあり、子の順に並べる形だと
 * 1列目を取られて、題が細い1列目に落ちた。画像は1列目、文は次の列、と場所を書いておけば、子が増えても崩れない */
.tpk-yomi-mae a > .tpk-yomi-sq,.tpk-ym-sq a > .tpk-yomi-sq{grid-column:1; grid-row:1}
.tpk-yomi-mae a > span:not(.tpk-yomi-sq),.tpk-ym-sq a > span:not(.tpk-yomi-sq){grid-column:2; grid-row:1}
.tpk-yomi-ninki li a::before{grid-column:1; grid-row:1}
.tpk-yomi-ninki li a > .tpk-yomi-sq{grid-column:2; grid-row:1}
.tpk-yomi-ninki li a > span:not(.tpk-yomi-sq){grid-column:3; grid-row:1}
.tpk-yomi-tana.is-sukunai .tpk-yomi-shelf--hon > li:not(.tpk-yomi-mada) > a > .tpk-yomi-cover,.tpk-ym-pair .tpk-ym-covers--hon > li > a > .tpk-yomi-cover{grid-column:1}

/* 一覧のよく読まれている（2026-11-08 ご主人「記事ランキングも」）。パソコンは5本を横に（番号の右に正方形、その下に名札と題）、スマホはトップと同じ縦の並び */
.tpk-ym-ninki ol{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none}
.tpk-ym-ninki li a{grid-template-columns:20px minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; row-gap:10px; align-items:start; min-height:0}
.tpk-ym-ninki li a::before{grid-column:1; grid-row:1}
.tpk-ym-ninki li a > .tpk-yomi-sq{grid-column:2; grid-row:1; width:100%; height:auto; aspect-ratio:1/1}
.tpk-ym-ninki li a > span:not(.tpk-yomi-sq){grid-column:2; grid-row:2}
@media (max-width:1023px){
  .tpk-ym-ninki ol{grid-template-columns:minmax(0,1fr); gap:10px}
  .tpk-ym-ninki li a{grid-template-columns:18px 52px minmax(0,1fr); grid-template-rows:auto; column-gap:12px; align-items:center; min-height:56px}
  .tpk-ym-ninki li a > .tpk-yomi-sq{grid-column:2; grid-row:1; width:52px; height:52px; aspect-ratio:auto}
  .tpk-ym-ninki li a > span:not(.tpk-yomi-sq){grid-column:3; grid-row:1}
}

/* おすすめの読みもの（よく読まれているの数がたまるまでの仮の並び）：順位ではないので番号を出さず、番号の列もつめる */
.tpk-yomi-ninki.is-osusume li a::before{content:none}
.tpk-yomi-ninki.is-osusume li a{grid-template-columns:56px minmax(0,1fr)}
.tpk-yomi-ninki.is-osusume li a > .tpk-yomi-sq{grid-column:1}
.tpk-yomi-ninki.is-osusume li a > span:not(.tpk-yomi-sq){grid-column:2}
.tpk-ym-ninki.is-osusume li a{grid-template-columns:minmax(0,1fr)}
.tpk-ym-ninki.is-osusume li a > .tpk-yomi-sq{grid-column:1; grid-row:1}
.tpk-ym-ninki.is-osusume li a > span:not(.tpk-yomi-sq){grid-column:1; grid-row:2}
@media (max-width:1023px){
  .tpk-yomi-ninki.is-osusume li a,.tpk-ym-ninki.is-osusume li a{grid-template-columns:52px minmax(0,1fr)}
  .tpk-ym-ninki.is-osusume li a > span:not(.tpk-yomi-sq){grid-column:2; grid-row:1}
}

/* 表紙の高さをそろえる（2026-11-08 ご主人「画像がガタガタ」）。本番では表紙の高さが画像ごとにばらばらになった。
 * 画像を表紙の枠に重ねて置き（中身で枠の高さが変わらないように）、枠の縦横比だけで高さを決める。画像は枠を埋めるように切る */
.tpk-yomi-cover{height:auto; min-height:0}
.tpk-yomi-cover img{position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none; object-fit:cover}
/* 長い題（国立国会図書館…）で棚の1冊だけ幅が広がらないように（中身の最小の幅で押し広げない） */
.tpk-yomi-shelf > li{min-width:0}
.tpk-yomi-shelf .tpk-yomi-t{overflow-wrap:anywhere}
/* スマホでは、大きな見出しの英語の札を上の行に（トップの欄の見出し .tpk-top-h と同じ決まり。2026-11-08） */
.tpk-yomi-h .tpk-yomi-ja{white-space:nowrap}
@media (max-width:599px){ .tpk-yomi-h h2 .tpk-yomi-en{display:block; width:max-content; margin:0 0 6px; top:0} }

/* 英語のページのトップの読みもの（2026-11-08）：左に「整える前とあと」と「今日の一語」を縦に、右に解説の棚 */
.tpk-yomi-en-left{display:flex; flex-direction:column; gap:32px; min-width:0}
@media (max-width:599px){ .tpk-yomi-en-left{gap:22px} }