@charset "utf-8";

/* ==========================================================================
   記録と語り ─ 白（生成り寄り）・墨・朱
   見出しと引用は明朝、本文はゴシック（画面で長く読みやすいため）。
   webフォントは読み込まない（表示が速く、外に通信も出ないため）。

   色は 2026-10-25 にキョウが選んだ「白（生成り寄り）」。
   地をわずかな生成りにして、表とカードだけを純白にしてある。
   「紙の上に資料が置かれている」形にして、記録と語りの表を前に出すのがねらい。
   ========================================================================== */

:root {
  --washi:        #fbfaf7;   /* 地（わずかに生成り） */
  --washi-deep:   #f0eee8;   /* 帯・表の見出しの列 */
  --paper:        #ffffff;   /* 札・表の地（純白） */
  --sumi:         #211e1a;   /* 墨 */
  --sumi-soft:    #54514a;   /* 薄墨 */
  --sumi-faint:   #857f76;   /* 淡墨 */
  --shu:          #a4322a;   /* 朱 */
  --shu-soft:     #c2695f;
  --rule:         #ddd8cf;   /* 罫 */
  --rule-faint:   #ece8e0;
  --ai:           #3a5675;   /* 藍 */
  --uguisu:       #6f6436;   /* 鶯（土） */

  --mincho: "Hiragino Mincho ProN", "HiraMinProN-W3", "Yu Mincho", "YuMincho",
            "MS PMincho", "Noto Serif JP", serif;
  --gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic",
            "Noto Sans JP", "Meiryo", system-ui, sans-serif;

  --wrap: 50rem;
  --wrap-wide: 66rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--gothic);
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: .01em;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.wrap-wide { max-width: var(--wrap-wide); }

a { color: var(--shu); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--sumi); }

.skip {
  position: absolute; left: -9999px;
  background: var(--sumi); color: var(--washi); padding: .5rem 1rem; z-index: 10;
}
.skip:focus { left: .5rem; top: .5rem; }

:focus-visible { outline: 2px solid var(--shu); outline-offset: 2px; }

/* --- 見出し ------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--mincho);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .02em;
}

h1 { font-size: 1.85rem; margin: 0 0 .6rem; }
h2 {
  font-size: 1.35rem;
  margin: 3rem 0 1rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}
h2 .num {
  display: inline-block;
  color: var(--shu);
  font-size: .72em;
  margin-right: .6em;
  letter-spacing: .12em;
}
h3 { font-size: 1.1rem; margin: 2rem 0 .6rem; }
h4 { font-size: 1rem; margin: 1.4rem 0 .4rem; color: var(--sumi-soft); }

p { margin: 0 0 1.1em; }

.book { font-family: var(--mincho); }

/* --- ヘッダー ----------------------------------------------------------- */

.site-head {
  background: var(--sumi);
  color: var(--washi);
  border-bottom: 3px solid var(--shu);
}
.site-head .wrap {
  max-width: var(--wrap-wide);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1.6rem;
  padding-top: .9rem;
  padding-bottom: .9rem;
}
.site-name {
  text-decoration: none; color: inherit;
  display: flex; align-items: center; gap: .7rem;
}
.site-icon {
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  flex: none;
  /* 円相のまわりの和紙が暗い帯に浮かないよう、少しなじませる */
  filter: saturate(.9);
}
.site-name-text { display: block; }
.site-name-main {
  font-family: var(--mincho);
  font-size: 1.3rem;
  letter-spacing: .22em;
  display: block;
}
.site-name-sub {
  display: block;
  font-size: .72rem;
  color: #bdb3a2;
  letter-spacing: .04em;
  line-height: 1.6;
  margin-top: .1rem;
}
.site-nav { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin-left: auto; }
.site-nav a {
  color: #ded5c4;
  text-decoration: none;
  font-size: .85rem;
  padding: .2rem 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: #fff; border-bottom-color: var(--shu); }

/* --- パンくず ----------------------------------------------------------- */

.crumb { background: var(--washi-deep); border-bottom: 1px solid var(--rule); }
.crumb .wrap { max-width: var(--wrap-wide); padding-top: .5rem; padding-bottom: .5rem; }
.crumb { font-size: .8rem; color: var(--sumi-soft); }
.crumb a { color: var(--sumi-soft); }
.crumb-sep { margin: 0 .5em; color: var(--sumi-faint); }

/* --- バナー（トップの頭） ----------------------------------------------- */

.masthead {
  background: var(--washi-deep);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.masthead img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 20rem;
  object-fit: cover;
  object-position: center;
}
/* 狭い画面では、絵の中央（題字）を切り出して高さを抑える */
@media (max-width: 40rem) {
  .masthead img { height: 9.5rem; object-fit: cover; }
}

/* --- 扉（トップの頭） --------------------------------------------------- */

.hero {
  background: var(--washi-deep);
  border-bottom: 1px solid var(--rule);
  padding: 3rem 0 2.6rem;
  text-align: center;
}
.hero .series-label {
  font-size: .78rem;
  letter-spacing: .3em;
  color: var(--shu);
  margin: 0 0 1rem;
}
.hero h1 {
  font-size: clamp(1.6rem, 5.5vw, 2.5rem);
  letter-spacing: .14em;
  margin-bottom: 1.1rem;
}
.hero .theme {
  font-family: var(--mincho);
  font-size: 1.02rem;
  color: var(--sumi-soft);
  max-width: 34rem;
  margin: 0 auto 1.4rem;
  line-height: 1.95;
}
.hero .meta {
  font-size: .82rem;
  color: var(--sumi-faint);
  letter-spacing: .08em;
  margin: 0;
}

/* --- 本文の区切り ------------------------------------------------------- */

.section { padding: 2.2rem 0; }
.section + .section { padding-top: 0; }
.lead { font-size: 1.02rem; }

.callout {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--shu);
  padding: 1rem 1.2rem;
  margin: 1.6rem 0;
  font-size: .94rem;
}
.callout :last-child { margin-bottom: 0; }

/* --- 章の一覧 ----------------------------------------------------------- */

.part { margin: 2.4rem 0 0; }
.part-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  border-bottom: 2px solid var(--sumi);
  padding-bottom: .4rem;
  margin-bottom: 0;
}
.part-head .part-no {
  font-family: var(--mincho);
  font-size: 1.15rem;
  letter-spacing: .1em;
}
.part-head .part-range { font-size: .78rem; color: var(--sumi-faint); }
.part-head .part-summary {
  font-size: .85rem;
  color: var(--sumi-soft);
  margin-left: auto;
}

ol.chapters { list-style: none; margin: 0; padding: 0; }
ol.chapters > li { border-bottom: 1px solid var(--rule-faint); }

.ch {
  display: grid;
  grid-template-columns: 10rem 4.2rem 1fr auto;
  gap: .2rem 1rem;
  align-items: start;
  padding: 1rem .25rem;
  text-decoration: none;
  color: inherit;
}
a.ch:hover { background: var(--paper); }
a.ch:hover .ch-title { color: var(--shu); }
a.ch:hover .ch-thumb img { transform: scale(1.03); }

.ch-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--washi-deep);
}
.ch-thumb img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}
/* 公開前の章は、サムネの代わりに章番号だけの枠を置く */
.ch-thumb-soon {
  border-style: dashed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ch-thumb-soon img {
  width: 2.4rem; height: 2.4rem;
  opacity: .16;
  mix-blend-mode: multiply;
}

.ch-no {
  font-family: var(--mincho);
  font-size: .9rem;
  color: var(--shu);
  letter-spacing: .06em;
  padding-top: .15rem;
}
.ch.soon .ch-no { color: var(--sumi-faint); }
.ch-body { min-width: 0; }
.ch-body > span { display: block; }
.ch-title {
  font-family: var(--mincho);
  font-size: 1.12rem;
  line-height: 1.5;
  margin: 0 0 .25rem;
}
.kana { font-size: .68em; color: var(--sumi-faint); margin-left: .5em; font-weight: 400; }
.ch-q {
  font-size: .88rem;
  color: var(--sumi-soft);
  margin: 0 0 .2rem;
}
.ch-period {
  font-size: .76rem;
  color: var(--sumi-faint);
  letter-spacing: .03em;
  margin: 0;
}
.ch-state {
  font-size: .76rem;
  white-space: nowrap;
  padding-top: .3rem;
  color: var(--sumi-faint);
  text-align: right;
}
.ch-state .soon-label { color: var(--sumi-soft); }
.ch.soon { color: var(--sumi-faint); }
.ch.soon .ch-title { color: var(--sumi-soft); }

/* --- 記録と語りの表 ----------------------------------------------------- */

.table-wrap { overflow-x: auto; margin: 1.4rem 0 1.8rem; }

/* 表はこのサイトの中心なので、画面に余裕があれば本文より広く見せる */
@media (min-width: 62rem) {
  .table-wrap {
    width: calc(100% + 9rem);
    margin-left: -4.5rem;
  }
}

table {
  border-collapse: collapse;
  width: 100%;
  background: var(--paper);
  font-size: .92rem;
  line-height: 1.8;
}
th, td {
  border: 1px solid var(--rule);
  padding: .7rem .8rem;
  text-align: left;
  vertical-align: top;
}
thead th {
  background: var(--washi-deep);
  font-family: var(--mincho);
  font-weight: 600;
  font-size: .88rem;
  white-space: nowrap;
}
tbody th {
  font-family: var(--mincho);
  font-weight: 600;
  background: var(--washi-deep);
  min-width: 8rem;
}

/* 記録／語り／わかっていないこと */
.kiroku-katari td.kiroku { }
.kiroku-katari td.katari { }
.kiroku-katari td.unknown { color: var(--sumi-soft); }
.kiroku-katari th[scope="row"] { width: 22%; }

.cell-head {
  display: block;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--sumi-faint);
  margin-bottom: .2rem;
}

/* --- 確度のラベル ------------------------------------------------------- */

.tag {
  display: inline-block;
  font-size: .72rem;
  line-height: 1.5;
  padding: .08em .5em;
  border: 1px solid currentColor;
  border-radius: 2px;
  letter-spacing: .06em;
  white-space: nowrap;
  vertical-align: .08em;
  font-family: var(--gothic);
}
.tag.c-fact   { color: var(--sumi); background: rgba(38,33,25,.06); }
.tag.c-common { color: var(--ai); background: rgba(58,86,117,.07); }
.tag.c-debate { color: var(--uguisu); background: rgba(111,100,54,.08); }
.tag.c-myth   { color: var(--shu); background: rgba(164,50,42,.07); }

/* --- 動画の埋め込み ----------------------------------------------------- */

.video {
  margin: 1.6rem 0;
  border: 1px solid var(--rule);
  background: var(--sumi);
}
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.video-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.video-note {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: .5rem .8rem;
  font-size: .78rem;
  color: var(--sumi-soft);
  margin: 0;
}

/* --- 3行のあらすじ ------------------------------------------------------ */

ul.summary3 {
  list-style: none;
  margin: 1.4rem 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
ul.summary3 li {
  border-bottom: 1px solid var(--rule);
  padding: .7rem .2rem .7rem 2.1rem;
  position: relative;
  font-size: .97rem;
}
ul.summary3 li::before {
  content: attr(data-n);
  position: absolute;
  left: .2rem;
  top: .72rem;
  font-family: var(--mincho);
  font-size: .82rem;
  color: var(--shu);
}

/* --- 年表 --------------------------------------------------------------- */

ol.timeline { list-style: none; margin: 1.4rem 0; padding: 0; }
ol.timeline > li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: .2rem 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--rule-faint);
}
ol.timeline .when {
  font-family: var(--mincho);
  font-size: .88rem;
  color: var(--sumi-soft);
  letter-spacing: .02em;
}
ol.timeline .what { font-size: .95rem; }
ol.timeline .what .tag { margin-left: .4em; }

/* --- 人物・史料の札 ----------------------------------------------------- */

ul.cards {
  list-style: none;
  margin: 1.4rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .9rem;
}
ul.cards > li {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: .8rem .9rem;
}
.card-name {
  font-family: var(--mincho);
  font-size: 1.02rem;
  margin: 0 0 .2rem;
}
.card-name .yomi { font-size: .7em; color: var(--sumi-faint); margin-left: .4em; }
.card-note { font-size: .84rem; color: var(--sumi-soft); margin: 0; line-height: 1.75; }

/* --- 参考文献 ----------------------------------------------------------- */

ul.refs { margin: 1.2rem 0; padding-left: 1.3em; }
ul.refs li { margin-bottom: .5em; font-size: .92rem; line-height: 1.8; }
ul.refs .ref-kind {
  font-size: .72rem;
  color: var(--sumi-faint);
  margin-left: .4em;
}

/* --- 前後の章 ----------------------------------------------------------- */

.prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 3rem 0 1rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.4rem;
}
.prevnext a, .prevnext span {
  display: block;
  padding: .8rem .9rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  font-size: .92rem;
}
.prevnext a:hover { border-color: var(--shu); }
.prevnext .dir {
  display: block;
  font-size: .72rem;
  color: var(--shu);
  letter-spacing: .1em;
  margin-bottom: .2rem;
}
.prevnext .next { text-align: right; }
.prevnext span { color: var(--sumi-faint); background: transparent; border-style: dashed; }

/* --- フッター ----------------------------------------------------------- */

.site-foot {
  margin-top: 4rem;
  background: var(--washi-deep);
  border-top: 1px solid var(--rule);
  padding: 2rem 0 2.4rem;
}
.site-foot .wrap { max-width: var(--wrap-wide); }
.foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 1.2rem; font-size: .9rem; }
.site-foot .notes { font-size: .76rem; color: var(--sumi-soft); line-height: 1.85; }
.site-foot .notes p { margin: 0 0 .5em; }
.copy {
  font-family: var(--mincho);
  font-size: .78rem;
  color: var(--sumi-faint);
  letter-spacing: .2em;
  margin: 1.4rem 0 0;
}

/* --- 狭い画面 ----------------------------------------------------------- */

@media (max-width: 40rem) {
  body { line-height: 1.85; }
  .site-head .wrap { padding-top: .7rem; padding-bottom: .7rem; }
  .site-nav { margin-left: 0; width: 100%; font-size: .8rem; }
  .part-head .part-summary { margin-left: 0; width: 100%; }
  .ch { grid-template-columns: 6.5rem 1fr auto; gap: .2rem .8rem; }
  .ch-thumb { grid-column: 1; grid-row: 1 / span 2; }
  .ch-no { grid-column: 2; grid-row: 1; }
  .ch-state { grid-column: 3; grid-row: 1; }
  .ch-body { grid-column: 2 / -1; grid-row: 2; }
  .ch-thumb-soon img { width: 1.8rem; height: 1.8rem; }
  ol.timeline > li { grid-template-columns: 1fr; }
  ol.timeline .when { color: var(--shu); font-size: .82rem; }

  /* 表は横スクロールをやめ、1話＝1枚の札に積み直す */
  .table-wrap { overflow-x: visible; }
  table.kiroku-katari,
  table.layers { display: block; }
  table.kiroku-katari thead,
  table.layers thead { display: none; }
  table.kiroku-katari tbody,
  table.layers tbody { display: block; }
  table.kiroku-katari tr,
  table.layers tr {
    display: block;
    border: 1px solid var(--rule);
    margin-bottom: 1rem;
    background: var(--paper);
  }
  table.kiroku-katari th,
  table.kiroku-katari td,
  table.layers th,
  table.layers td {
    display: block;
    width: auto;
    border: 0;
    border-top: 1px solid var(--rule-faint);
  }
  table.kiroku-katari tr > :first-child,
  table.layers tr > :first-child { border-top: 0; }
  table.kiroku-katari th[scope="row"],
  table.layers th[scope="row"] {
    font-size: 1.05rem;
    background: var(--washi-deep);
    border-left: 0;
  }
  table.layers .layer-when { white-space: normal; }
  table.kiroku-katari td::before,
  table.layers td::before {
    content: attr(data-label);
    display: block;
    font-size: .72rem;
    letter-spacing: .1em;
    color: var(--sumi-faint);
    margin-bottom: .15rem;
  }
  /* 「いつ」は見出しの上に小さく出す */
  table.layers .layer-when {
    font-size: .8rem;
    padding-bottom: .2rem;
  }
  .prevnext { grid-template-columns: 1fr; }
  .prevnext .next { text-align: left; }
}

/* --- 印刷 --------------------------------------------------------------- */

@media print {
  .site-head, .site-nav, .crumb, .prevnext, .video { display: none; }
  body { background: #fff; }
}

/* --- 夜（端末の設定が暗いとき） ----------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --washi:      #1b1815;
    --washi-deep: #221e1a;
    --paper:      #232019;
    --sumi:       #e6ded0;
    --sumi-soft:  #b3a897;
    --sumi-faint: #8a8072;
    --shu:        #d9766a;
    --shu-soft:   #e0988e;
    --rule:       #3b352d;
    --rule-faint: #2e2922;
    --ai:         #8fb0d0;
    --uguisu:     #b9ad74;
  }
  :root:not([data-theme="light"]) .site-head { background: #100e0c; }
  :root:not([data-theme="light"]) .tag.c-fact { color: var(--sumi); background: rgba(230,222,208,.07); }
}

/* --- その話はいつ現れたか（書かれた時代の古い順） --------------------- */

table.layers th[scope="row"] { width: 26%; min-width: 10rem; }
table.layers .layer-when {
  width: 9rem;
  font-family: var(--mincho);
  font-size: .86rem;
  color: var(--sumi-soft);
  white-space: nowrap;
}
table.layers tbody tr:first-child th[scope="row"] { border-left: 3px solid var(--sumi); }
table.layers tbody tr:last-child th[scope="row"] { border-left: 3px solid var(--shu); }

/* --- 俗説チェック一覧 --------------------------------------------------- */

ul.z-legend {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: .35rem 1.4rem;
  font-size: .82rem;
}
ul.z-legend li { display: flex; align-items: baseline; gap: .5em; }
ul.z-legend .tag { flex: none; }

table.z-summary th[scope="row"] { font-family: var(--gothic); font-weight: 400; min-width: 0; }
table.z-summary th[scope="row"] a { text-decoration-color: var(--rule); }
table.z-summary td { width: 7.5rem; white-space: nowrap; }

.z-item {
  border-top: 1px solid var(--rule);
  padding-top: 1.6rem;
  margin-top: 2.2rem;
  /* 早見表から飛んだとき、見出しがヘッダーに隠れないように */
  scroll-margin-top: 1rem;
}
.z-claim {
  font-size: 1.18rem;
  margin: 0 0 .6rem;
  line-height: 1.55;
}
.z-claim .tag { margin-left: .5em; vertical-align: .22em; }
.z-verdict {
  font-size: 1rem;
  background: var(--paper);
  border-left: 3px solid var(--shu);
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: .8rem 1rem;
  margin: 0 0 1.2rem;
}

dl.z-detail { margin: 0 0 1rem; }
dl.z-detail dt {
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--sumi-faint);
  margin-top: 1rem;
}
dl.z-detail dd {
  margin: .15rem 0 0;
  font-size: .95rem;
}
dl.z-detail dt:first-child { margin-top: 0; }

.z-chapters {
  font-size: .88rem;
  margin: 1rem 0 0;
  padding-left: 1em;
  border-left: 2px solid var(--rule);
  color: var(--sumi-soft);
}

@media (max-width: 40rem) {
  table.z-summary { display: table; }
  table.z-summary thead { display: table-header-group; }
  table.z-summary tbody { display: table-row-group; }
  table.z-summary tr { display: table-row; border: 0; margin: 0; background: none; }
  table.z-summary th, table.z-summary td {
    display: table-cell;
    border: 1px solid var(--rule);
    width: auto;
  }
  table.z-summary th[scope="row"] { font-size: .92rem; background: var(--paper); }
  table.z-summary td { width: 5.5rem; white-space: normal; }
}

/* --- 史料ガイド --------------------------------------------------------- */

.tag.k-now     { color: var(--sumi);   background: rgba(38,33,25,.06); }
.tag.k-witness { color: var(--ai);     background: rgba(58,86,117,.07); }
.tag.k-later   { color: var(--uguisu); background: rgba(111,100,54,.08); }
.tag.k-outside { color: var(--shu);    background: rgba(164,50,42,.07); }

.src-kind-line {
  display: flex;
  align-items: baseline;
  gap: .6em;
  font-size: .84rem;
  color: var(--sumi-soft);
  margin: 0 0 1.6rem;
}

ul.src-list { list-style: none; margin: 1.2rem 0 0; padding: 0; }
ul.src-list > li {
  border-top: 1px solid var(--rule-faint);
  padding: 1rem .2rem;
}
ul.src-list > li:last-child { border-bottom: 1px solid var(--rule-faint); }
.src-name {
  font-family: var(--mincho);
  font-size: 1.12rem;
  margin: 0 0 .15rem;
}
.src-name .yomi { font-size: .68em; color: var(--sumi-faint); margin-left: .5em; }
.src-meta {
  font-size: .78rem;
  color: var(--sumi-faint);
  margin: 0 0 .35rem;
}
.src-note { font-size: .92rem; color: var(--sumi-soft); margin: 0; }

/* --- 人物 --------------------------------------------------------------- */

ul.people-cards > li { padding: 0; overflow: hidden; }
ul.people-cards .card-name,
ul.people-cards .src-meta,
ul.people-cards .card-note { padding: 0 .9rem; }
ul.people-cards .card-name { margin-top: .7rem; }
ul.people-cards > li > :last-child { padding-bottom: .9rem; }

.people-thumb { display: block; border-bottom: 1px solid var(--rule); }
/* 設定画（縦長）と場面の絵（横長）が混ざるので、札は同じ形にそろえる */
.people-thumb img {
  display: block;
  width: 100%;
  /* height 属性が付いているので、auto にしないと aspect-ratio が効かない */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 18%;
}

figure.portrait {
  margin: 1.6rem 0 2rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
figure.portrait img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 30rem;
  object-fit: contain;
}
figure.portrait figcaption {
  border-top: 1px solid var(--rule);
  padding: .6rem .9rem;
  font-size: .78rem;
  line-height: 1.75;
  color: var(--sumi-soft);
}
figure.portrait figcaption strong { color: var(--shu); }

/* --- 前の章・次の章（章ページの下） ------------------------------------- */

/* 札の地は、明るいモードでも暗いモードでも暗いままにする（白文字を重ねるため） */
:root { --ink-panel: #2a251f; }

.chapter-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 3rem 0 1rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.6rem;
}

.pn-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-panel);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: #fff;
}
a.pn-card:hover { border-color: var(--shu); }

.pn-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
a.pn-card:hover img { transform: scale(1.04); }

/* 絵の明るいところに字が乗っても読めるよう、下から黒い帯をかける */
.pn-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.4rem .9rem .8rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .88) 0%,
    rgba(0, 0, 0, .72) 38%,
    rgba(0, 0, 0, .32) 70%,
    rgba(0, 0, 0, 0) 100%
  );
}
.pn-blank .pn-text { background: none; padding-top: .8rem; }

.pn-dir {
  display: block;
  font-size: .72rem;
  letter-spacing: .18em;
  color: #e3b7b1;
  margin-bottom: .2rem;
}
.pn-title {
  display: block;
  font-family: var(--mincho);
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* 公開前の章・端の札 */
.pn-blank {
  border-style: dashed;
  display: flex;
  align-items: flex-end;
}
.pn-blank .pn-title { color: rgba(255, 255, 255, .72); text-shadow: none; }
.pn-blank .pn-dir { color: rgba(255, 255, 255, .45); }
.pn-soon {
  display: inline-block;
  font-family: var(--gothic);
  font-size: .7rem;
  letter-spacing: .1em;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 2px;
  padding: .05em .5em;
  margin-left: .5em;
  vertical-align: .12em;
  white-space: nowrap;
}

/* 「次の章」は右寄せにして、前後の向きを目で分かるようにする */
.pn-card.next .pn-text { text-align: right; }

/* 片方しか無いとき（第一章・最終章）も、左右の位置は保つ。
   「次の章」だけが左に寄ると、どちら向きか分からなくなるため */
.pn-card.prev { grid-column: 1; }
.pn-card.next { grid-column: 2; }

@media (max-width: 40rem) {
  .chapter-nav { grid-template-columns: 1fr; gap: .8rem; }
  .pn-card.prev, .pn-card.next { grid-column: auto; }
  .pn-card.next .pn-text { text-align: left; }
  .pn-title { font-size: .95rem; }
  /* 縦に並ぶときは、絵のない札を文字の高さまで縮める */
  .pn-blank {
    aspect-ratio: auto;
    min-height: 0;
  }
  .pn-blank .pn-text { position: static; padding: .9rem; }
}