/* まとめ記事のブロック（Issue #94）: キャラ説明・歴史。
   2026-11-06 オーナー選択（unslop matome-01）: キャラ説明＝PC は絵と要点の帳簿を左右に、歴史＝PC は左に時の欄・スマホは時期を題の頭に、
   「不明」の行もほかの行と同じに扱う。色・書体はテーマの紙の語彙だけ（墨・朱・金）。切り替わりは本文と同じ 720px。
   r4（同日）: キャラページへのリンクは帳簿の行の頭に金の細縁の絵。歴史の線は「航路」。開閉の動きは assets/js/matome-fold.js。
   r7（2026-11-14 matome-02）: 折りたたみをキャラ 1 人分まるごとに。「すべて開く／閉じる」のボタン（.mb-all）。
   r8（同日、unslop matome-02）: 閉じた姿を「名簿の 1 行」に（左に記事の絵の小窓・右に名前・右端に ＋。オーナーが案 C を選択）。続くキャラは行がつながり、
   ぱっと一覧として見える。開くと行がそのまま頭になり、絵・要点・残りの項目・説明・リンクが下に出る（PC は絵と要点を左右に＝r4 までの姿）。
   行が画面の外へ出たら、細い札（顔・名前・閉じる）が画面の上についてくる（高さ 0 の sticky の中に置く＝本文を押し下げない）。
   r9（同日）: 「すべて開く／閉じる」を名簿の頭の行に（人数・文言・2 枚重ねの親の印）。押すと、画面に見えている行は 1 人ずつのときと同じ動きで開閉する。
   すべての規則に .prose を付ける（inc/editor-style.php が .prose → .is-root-container に写して編集画面にも同じ見た目を出すため）。 */

/* ---------- 共通: 数が主役・単位は小さく（懸賞金と時期で同じ組み方） ---------- */
.prose .mb-num { font-variant-numeric: tabular-nums; }
.prose .mb-unit { font-size: .58em; font-weight: 500; margin-inline: .08em; color: var(--ink-soft); }

/* ---------- キャラ説明 ---------- */
/* ブロックの <section> にはテーマ全体の section { padding: 56px 0 4px }（トップページ用）が効くので外す */
.prose .mb-char, .prose .mb-ev, .prose .mb-sub { padding: 0; }

/* 名簿: キャラ説明が続くところは間を空けず、行の境は細い罫 1 本（上下の罫を 1px 重ねる）。名簿の頭の罫だけ濃い */
.prose .mb-char { position: relative; margin-top: 0; border-block: 1px solid rgba(90,60,20,.16); }
.prose .mb-char + .mb-char { margin-top: -1px; }
.prose :not(.mb-char) + .mb-char, .prose > .mb-char:first-child { margin-top: 28px; border-top-color: rgba(90,60,20,.34); }
.prose :is(h2, h3, h4, h5, h6):not(.mb-char) + .mb-char { margin-top: 20px; }
/* 間に空の段落（編集画面の空行。テーマが隠している）が挟まっても、名簿は切らない */
.prose .mb-char + p:empty + .mb-char { margin-top: -1px; border-top-color: rgba(90,60,20,.16); }

/* 行（閉じているときに見える全部）: 絵の小窓・名前・＋。行全体が押せる。中身の無いキャラは同じ形の押せない行（.mb-char__row） */
.prose .mb-fold { margin: 0; }
.prose .mb-fold > summary, .prose .mb-char__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "thumb name mark";
  align-items: center; column-gap: 16px; box-sizing: border-box; min-height: 88px; padding: 8px 0;
  list-style: none;
}
.prose .mb-fold--nothumb > summary, .prose .mb-char__row--nothumb { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name mark"; }
.prose .mb-fold > summary { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.prose .mb-fold > summary::-webkit-details-marker { display: none; }
.prose .mb-fold > summary:focus-visible { outline: 2px solid var(--link-on-paper); outline-offset: 2px; }
.prose .mb-fold > summary:active { background: rgba(120,80,30,.05); }

/* 絵の小窓: 記事の絵（キャラ説明の最初の絵）を横長に切り抜いて置く。記事の画像と同じ「コマ」の縁（墨の細い罫＋薄い影）。
   金の細縁の顔はキャラページへのリンクの行だけのもの＝ここには使わない（行を押すと開く・リンクを押すと移る、の見分け） */
.prose .mb-fold__thumb {
  grid-area: thumb; display: block; width: 96px; height: 72px; max-width: none; object-fit: cover; object-position: 50% 20%;
  border: 1px solid rgba(90,60,20,.3); border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.16); background: #e4ddcc;
}
/* 開いている間、小窓は行から消える（同じ絵が下に元の大きさで出るので繰り返さない）。開く絵は行の小窓の位置（左上）から広がる */
.prose .mb-fold--hasfig[open]:not(.is-anim-out) > summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name mark"; }
.prose .mb-fold--hasfig[open]:not(.is-anim-out) > summary .mb-fold__thumb { display: none; }
/* 閉じる動きの間は小窓の場所を行に戻しておく（絵が飛んで戻ってくる先。着くまで見せない） */
.prose .mb-fold.is-anim-out > summary .mb-fold__thumb { visibility: hidden; }
/* 行の小窓と下の絵の間を飛ぶ絵（JS が作って動かす。transform と clip-path だけを動かす） */
.prose .mb-fold__ghost {
  position: absolute; z-index: 4; display: block; margin: 0; max-width: none; object-fit: cover;
  border: 0; border-radius: 0; box-shadow: none; pointer-events: none; transform-origin: 0 0; will-change: transform, clip-path;
}

/* 名前: 見出し（h3／h4）のまま行の中に置く。テーマの見出しの罫・記号は外す（行の罫が境を作る） */
.prose .mb-fold > summary .mb-char__name, .prose .mb-char__row .mb-char__name {
  grid-area: name; position: static; min-width: 0; margin: 0; padding: 0; border: 0;
  font-family: var(--font-mincho); font-weight: 700; font-size: 18px; line-height: 1.45; letter-spacing: .02em; color: #120e08;
  /* 名前は語の途中で折らない: 折るのは「・」「：」「】」「〟」や空白の後だけ（keep-all）。それでも入らない長い語だけ途中で折る */
  word-break: keep-all; overflow-wrap: anywhere; line-break: strict;
}
.prose .mb-fold > summary .mb-char__name::before, .prose .mb-fold > summary .mb-char__name::after,
.prose .mb-char__row .mb-char__name::before, .prose .mb-char__row .mb-char__name::after { content: none; }
/* ＋／－ の印（ストーリーアーカイブの巻の開閉と同じ） */
.prose .mb-fold__mark, .prose .mb-all__mark {
  position: relative; flex: none; box-sizing: border-box; width: 20px; height: 20px;
  background: rgba(120,80,30,.06); border: 1px solid rgba(90,60,20,.35); border-radius: 2px;
}
.prose .mb-fold > summary > .mb-fold__mark { grid-area: mark; margin-right: 2px; transition: border-color .2s; }
.prose .mb-fold__mark::before, .prose .mb-fold__mark::after,
.prose .mb-all__mark::before, .prose .mb-all__mark::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--shu); }
.prose .mb-fold__mark::before, .prose .mb-all__mark::before { width: 10px; height: 2px; margin: -1px 0 0 -5px; }
.prose .mb-fold__mark::after, .prose .mb-all__mark::after { width: 2px; height: 10px; margin: -5px 0 0 -1px; }
.prose .mb-fold__mark::after, .prose .mb-all__mark::after { transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.prose .mb-fold[open] > summary .mb-fold__mark::after,
.prose .mb-fold__dock .mb-fold__mark::after,
.prose .mb-all__btn.is-all-open .mb-all__mark::after { transform: scaleY(0); }
/* 閉じ始めたらすぐ ＋ に戻す（畳み終わるのを待たない） */
.prose .mb-fold[open].is-anim-out > summary .mb-fold__mark::after { transform: none; }
@media (hover: hover) {
  .prose .mb-fold > summary:hover .mb-char__name { color: var(--link-on-paper); }
  .prose .mb-fold > summary:hover > .mb-fold__mark { border-color: rgba(168,53,42,.6); }
}

/* 「すべて開く／閉じる」＝名簿の頭の行（r9）: 左に人数（数が主役・単位は小さく）、右に「すべて開く」と親の印。
   親の印は行の ＋ と同じ列の真上に置く（この列をまとめて切り替える、と読める）。印は 2 枚重ね＝「全部」。
   全員が開くと後ろの 1 枚が前の 1 枚の裏へ収まり、＋ が － になる。文言は上へ抜けて下から入る（動きは JS） */
.prose .mb-all { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin: 28px 0 0; }
.prose .mb-all + .mb-char { margin-top: 0; }
.prose .mb-all__count {
  margin: 0; font-size: 12.5px; line-height: 1; font-weight: 500; letter-spacing: .04em; color: var(--ink-soft); white-space: nowrap;
}
.prose .mb-all__count .mb-num {
  margin-inline: .14em; font-family: var(--font-mincho); font-weight: 700; font-size: 22px; letter-spacing: 0; color: #120e08;
}
.prose .mb-all__btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-left: auto; padding: 0 2px 0 12px;
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1; color: var(--ink-soft); background: transparent;
  border: 0; border-radius: 2px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s cubic-bezier(.2,.7,.2,1);
}
.prose .mb-all__btn[hidden] { display: none; }
.prose .mb-all__btn:focus-visible { outline: 2px solid var(--link-on-paper); outline-offset: 2px; }
.prose .mb-all__btn:active { transform: scale(.97); }
.prose .mb-all__label { display: inline-block; }
/* 親の印: 前の 1 枚（.mb-all__mark。地は紙の色で塗って後ろの罫を隠す）と、右上へ 3px ずれた後ろの 1 枚（::before） */
.prose .mb-all__stack { position: relative; display: block; flex: none; }
.prose .mb-all__stack::before {
  content: ''; position: absolute; inset: 0; box-sizing: border-box; border: 1px solid rgba(90,60,20,.35); border-radius: 2px;
  transform: translate(3px, -3px); transition: transform .26s cubic-bezier(.2,.7,.2,1);
}
.prose .mb-all__stack .mb-all__mark { display: block; background: #e7e1d3; }
.prose .mb-all__btn.is-all-open .mb-all__stack::before { transform: none; }
@media (hover: hover) {
  .prose .mb-all__btn:hover { color: var(--link-on-paper); }
  .prose .mb-all__btn:hover .mb-all__mark { border-color: rgba(168,53,42,.6); }
}

/* 開いた行は「見出し」になる: 記事の H3 と同じ底線（金の細線＋左端に朱の短い太罫）を引く。朱の罫は開くときに左から伸びる */
.prose .mb-fold > summary { position: relative; }
.prose .mb-fold > summary::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 64px; height: 3px; background: var(--shu);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.prose .mb-fold > summary { box-shadow: 0 1px 0 rgba(201,160,32,0); transition: box-shadow .3s cubic-bezier(.2,.7,.2,1); }
.prose .mb-fold[open] > summary { box-shadow: 0 1px 0 rgba(201,160,32,.6); }
.prose .mb-fold[open] > summary::after { transform: scaleX(1); }
.prose .mb-fold[open].is-anim-out > summary { box-shadow: 0 1px 0 rgba(201,160,32,0); }
.prose .mb-fold[open].is-anim-out > summary::after { transform: scaleX(0); }

/* 開いた中身。高さの動きは .mb-fold__panel に掛けるので、余白は内側（.mb-fold__body）に持つ */
.prose .mb-fold.is-anim-in .mb-fold__panel, .prose .mb-fold.is-anim-out .mb-fold__panel { overflow: hidden; }
.prose .mb-fold__body { padding: 20px 0 48px; }

/* ついてくる細い札: 行が画面の上へ出ている間だけ出す（JS が .is-stuck）。高さ 0 の sticky の中に浮かせるので本文は動かない */
.prose .mb-fold__dock { position: sticky; top: calc(var(--mb-sticky-top, 0px) + 8px); z-index: 3; height: 0; }
.prose .mb-fold__dockbtn {
  position: absolute; top: 0; left: -9px; right: -9px; display: flex; align-items: center; gap: 10px; box-sizing: border-box;
  height: 44px; padding: 0 10px 0 6px; font: inherit; text-align: left; color: var(--ink-soft); cursor: pointer;
  background: #f2ede2; border: 1px solid rgba(90,60,20,.34); border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 22px -8px rgba(40,25,5,.38), 0 2px 4px rgba(40,25,5,.12);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s cubic-bezier(.2,.7,.2,1), transform .16s cubic-bezier(.2,.7,.2,1), visibility 0s linear .16s;
}
.prose .mb-fold__dock.is-stuck .mb-fold__dockbtn { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.prose .mb-fold__dockbtn:focus-visible { outline: 2px solid var(--link-on-paper); outline-offset: 2px; }
.prose .mb-fold__dockthumb {
  display: block; flex: none; width: 40px; height: 30px; max-width: none; object-fit: cover; object-position: 50% 20%;
  border: 1px solid rgba(90,60,20,.3); border-radius: 2px; box-shadow: none; background: #e4ddcc;
}
.prose .mb-fold__who {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mincho); font-weight: 700; font-size: 15px; line-height: 1; color: #120e08;
}
.prose .mb-fold__close { flex: none; font-size: 13px; line-height: 1; }

/* 上段: PC は絵（絵の幅まで・上限 44%）と要点の帳簿を左右に。絵が無ければ帳簿だけ。スマホは 1 列 */
.prose .mb-char__top { display: grid; grid-template-columns: fit-content(44%) minmax(0, 1fr); column-gap: 28px; align-items: start; }
.prose .mb-char__top--nofig { grid-template-columns: minmax(0, 1fr); }
.prose .mb-char__figs { display: grid; row-gap: 16px; justify-items: start; min-width: 0; }
/* 絵は img の width 属性（原寸）より大きくしない。テーマの .prose figure.wp-block-image（0,2,1）の余白と、
   コアのライトボックスが figure に当てる flex に勝つよう 3 クラスで書く */
.prose .mb-char__figs .mb-char__figure { display: block; margin: 0; max-width: 100%; }
.prose .mb-char__figs .mb-char__figure img { display: block; max-width: 100%; height: auto; }
.prose .mb-char__figs .mb-char__figure figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); text-align: left; }

/* 帳簿（要点・記事だけの行・残りの項目） */
.prose .mb-ledger { margin: 0; border-top: 1px solid rgba(90,60,20,.3); }
.prose .mb-ledger__row {
  display: grid; grid-template-columns: 5.6em minmax(0, 1fr); column-gap: 16px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid rgba(90,60,20,.14);
}
.prose .mb-ledger dt { font-size: 13px; line-height: 1.6; font-weight: 500; color: var(--ink-soft); letter-spacing: .02em; }
.prose .mb-ledger dd { margin: 0; font-size: 15.5px; line-height: 1.7; font-weight: 500; color: #221b13; overflow-wrap: anywhere; }
.prose .mb-ledger dd .mb-arrow { color: var(--ink-soft); margin-inline: .25em; }
.prose .mb-ledger__row--bounty dd { font-family: var(--font-mincho); font-weight: 700; font-size: 24px; line-height: 1.3; color: #120e08; }
.prose .mb-ledger__row--bounty dd .mb-unit { font-family: var(--font-body); }
/* 額は 1 つずつ折らない（折るのは → の位置だけ） */
.prose .mb-amount { white-space: nowrap; }
/* 残りの項目は要点の続き（頭の罫を引かない）。PC は 2 段組 */
.prose .mb-ledger--rest { border-top: 0; }
.prose .mb-char__top--nofig + .mb-ledger--rest, .prose .mb-fold__body > .mb-ledger--rest:first-child { border-top: 0; }
@media (min-width: 721px) {
  .prose .mb-ledger--rest { columns: 2; column-gap: 40px; margin-top: 12px; border-top: 1px solid rgba(90,60,20,.3); }
  .prose .mb-ledger--rest .mb-ledger__row { break-inside: avoid; }
}
/* 折りたたみの中の行の罫は疑似要素で引く（開くときに左から右へ引くため） */
.prose .mb-fold .mb-ledger__row { position: relative; border-bottom: 0; }
.prose .mb-fold .mb-ledger__row::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(90,60,20,.16); transform-origin: 0 50%;
}

/* 開閉の動き（段取りは JS）: 高さが伸び、絵が浮かび、罫が上の行から順に引かれ（--i＝見た目の行の番号）、文字が少し遅れて浮かぶ */
/* 絵は JS が行の小窓から飛ばす（.mb-fold__ghost）。キャプションと 2 枚目からの絵は、着いたころに浮かぶ */
.prose .mb-fold.is-anim-in .mb-char__figure figcaption,
.prose .mb-fold.is-anim-in .mb-char__figure + .mb-char__figure { animation: mb-rise .36s cubic-bezier(.2,.7,.2,1) .22s both; }
.prose .mb-fold.is-anim-in .mb-ledger__row::after { animation: mb-rule .46s cubic-bezier(.3,.8,.2,1) calc(100ms + var(--i, 0) * 34ms) both; }
.prose .mb-fold.is-anim-in .mb-ledger__row > * { animation: mb-rise .34s cubic-bezier(.2,.7,.2,1) calc(160ms + var(--i, 0) * 34ms) both; }
.prose .mb-fold.is-anim-in .mb-char__desc, .prose .mb-fold.is-anim-in .mb-char__link { animation: mb-rise .4s cubic-bezier(.2,.7,.2,1) .26s both; }
/* 閉じるとき: 文字と罫は先に引き、絵だけが行へ戻っていく */
.prose .mb-fold.is-anim-out .mb-fold__body > *:not(.mb-char__top),
.prose .mb-fold.is-anim-out .mb-char__side,
.prose .mb-fold.is-anim-out .mb-char__figure figcaption,
.prose .mb-fold.is-anim-out .mb-char__figure + .mb-char__figure { opacity: 0; transition: opacity .1s linear; }
@keyframes mb-rule { from { transform: scaleX(0); } }
@keyframes mb-rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .prose .mb-fold__mark::after, .prose .mb-all__mark::after, .prose .mb-fold__dockbtn, .prose .mb-fold > summary, .prose .mb-fold > summary::after,
  .prose .mb-all__btn, .prose .mb-all__stack::before { transition: none; }
  .prose .mb-fold.is-anim-in .mb-char__figure figcaption, .prose .mb-fold.is-anim-in .mb-char__figure + .mb-char__figure, .prose .mb-fold.is-anim-in .mb-ledger__row::after,
  .prose .mb-fold.is-anim-in .mb-ledger__row > *, .prose .mb-fold.is-anim-in .mb-char__desc,
  .prose .mb-fold.is-anim-in .mb-char__link { animation: none; }
}
.prose .mb-trans { margin: 0; padding: 0; list-style: none; }
.prose .mb-trans li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
.prose .mb-trans li::before { content: none; }
.prose .mb-trans li + li { margin-top: 2px; }
.prose .mb-trans .mb-trans__note { font-size: 13px; color: var(--ink-soft); }

/* 説明 */
.prose .mb-char__desc > :first-child { margin-top: 1.6em; }
.prose .mb-fold__body > .mb-char__desc:first-child > :first-child { margin-top: .6em; }

/* キャラページへのリンク（r4）: 全幅の帳簿の行。頭に図鑑のアイコンを生成りの余白と金の細縁で、名前は明朝、→ は ＋／－ と同じ枠に */
.prose .mb-char__link { margin-top: 1.8em; font-size: 15px; }
.prose .mb-char__link a {
  display: flex; align-items: center; gap: 18px; color: var(--ink); font-weight: 500; text-decoration: none;
  border-top: 1px solid rgba(90,60,20,.34); border-bottom: 1px solid rgba(90,60,20,.34);
}
.prose .mb-char__link a:focus-visible { outline: 2px solid var(--link-on-paper); outline-offset: 2px; }
.prose .mb-char__link-face {
  display: block; flex: none; margin: 8px 0; padding: 3px; background: #f8f4ea;
  border: 1px solid rgba(201,160,32,.85); box-shadow: 0 0 0 1px rgba(90,60,20,.16);
}
.prose .mb-char__link-face img {
  display: block; width: 58px; height: 58px; object-fit: cover; border: 0; border-radius: 0; box-shadow: none;
  background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.32), rgba(255,255,255,0) 66%), var(--face-bg, #909090);
}
.prose .mb-char__link-text { flex: 1 1 auto; min-width: 0; line-height: 1.45; }
/* アイコンが無いキャラ（図鑑に画像が無い）は文字だけの行。:has() は使わない（WebKit の編集画面で重い） */
.prose .mb-char__link--noface .mb-char__link-text { padding-block: 14px; }
.prose .mb-char__link-name { font-family: var(--font-mincho); font-weight: 700; font-size: 17px; color: #120e08; }
.prose .mb-char__link-tail { display: inline-block; white-space: nowrap; margin-left: .15em; font-size: 14px; color: var(--ink-soft); }
.prose .mb-char__link-arrow {
  display: grid; place-items: center; flex: none; box-sizing: border-box; width: 24px; height: 24px; margin-right: 6px;
  font-size: 14px; line-height: 1; color: var(--shu);
  background: rgba(120,80,30,.06); border: 1px solid rgba(90,60,20,.35); border-radius: 2px;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s;
}
.prose .mb-char__link a:hover .mb-char__link-name { color: var(--link-on-paper); }
.prose .mb-char__link a:hover .mb-char__link-arrow { transform: translateX(4px); border-color: rgba(168,53,42,.6); }

@media (max-width: 720px) {
  .prose .mb-fold > summary, .prose .mb-char__row { column-gap: 14px; min-height: 72px; }
  .prose .mb-fold__thumb { width: 74px; height: 56px; }
  .prose .mb-fold > summary .mb-char__name, .prose .mb-char__row .mb-char__name { font-size: 16px; }
  .prose .mb-fold > summary::after { width: 48px; }
  .prose .mb-char__top { grid-template-columns: minmax(0, 1fr); }
  .prose .mb-char__top > .mb-char__side { margin-top: 20px; }
  .prose .mb-ledger dd { font-size: 15px; }
  .prose .mb-ledger__row--bounty dd { font-size: 21px; }
  .prose .mb-char__link-face img { width: 52px; height: 52px; }
}

/* ---------- 歴史 ---------- */
/* PC: 左に「時の欄」（ブロックの中でいちばん長い時期の幅・上限 136px）、欄と本文の間を航路（墨の点線）が通る。
   出来事は subgrid で欄をそろえる。線は .mb-hist の 2 列目を基準にした絶対配置（欄の幅が変わっても間の真ん中）。
   航路（r4・オーナー選択）: 出来事は朱の輪（寄港地）、小さな出来事は金の粒。輪と粒は紙の色で点線を切る */
.prose .mb-hist {
  position: relative; margin-top: 40px;
  display: grid; grid-template-columns: fit-content(136px) minmax(0, 1fr); column-gap: 32px;
}
.prose .mb-hist::before {
  content: ''; position: absolute; grid-column: 2; top: 16px; bottom: 6px; left: -17px; width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(90,60,20,.5) 0 5px, transparent 5px 9px);
}
.prose .mb-ev { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
.prose .mb-ev + .mb-ev { margin-top: 96px; }
.prose .mb-ev__head { display: contents; }
.prose .mb-ev__when { grid-column: 1; grid-row: 1; text-align: right; }
.prose .mb-ev__title, .prose .mb-ev__body { grid-column: 2; }
/* 出来事の朱の輪（線の上、題の 1 行目の高さ） */
.prose .mb-ev::after {
  content: ''; position: absolute; grid-column: 2; grid-row: 1; left: -22px; top: 10px; width: 11px; height: 11px;
  box-sizing: border-box; border: 2px solid var(--shu); border-radius: 50%; background: #efe9dd;
}

/* 題（見出しのタグは H2〜H4 のどれでも）。テーマの見出しの罫・記号を外し、記事の H3 と同じ底線（金の細線＋左端に朱の
   短い太罫）を引く（r6・オーナー指摘「1 が見出しに見えない」。行頭の記号は箇条書きに見える＝第34次の H3 と同じ理由）。
   PC は題に、スマホは時期・番号と題をまとめた頭に引く。H2 の ::after は top: 0 を持つので top: auto で外す */
.prose .mb-ev__title {
  position: relative; margin: 0; padding: 0; border: 0; text-decoration: none; letter-spacing: normal;
  font-family: var(--font-mincho); font-weight: 700; font-size: 21px; line-height: 1.5; color: #120e08;
}
.prose .mb-ev__title::before, .prose .mb-ev__title::after { content: none; }
@media (min-width: 721px) {
  .prose .mb-ev__title { padding-bottom: 10px; border-bottom: 1px solid rgba(201,160,32,.6); }
  .prose .mb-ev__title::after {
    content: ''; position: absolute; left: 0; top: auto; bottom: -2px; width: 64px; height: 3px; background: var(--shu);
  }
  /* 題のある出来事は、本文が小さな出来事から始まっても底線との間を空ける（時期だけの出来事は時期の横に並べるので 0 のまま） */
  .prose .mb-ev:not(.mb-ev--when-only) > .mb-ev__body > .mb-sub:first-child { margin-top: 1.1em; }
}
/* 題の無い出来事（「ワノ国編」のまとまり）: 見出しは読み上げ用に残し、行は取らない＝最初の小さな出来事が時期の横に並ぶ */
.prose .mb-ev__title.screen-reader-text { position: absolute; }
.prose .mb-ev__body > :first-child { margin-top: 1.1em; }
/* 歴史の本文は段落どうしを少し詰める（1 文ずつの段落が「事実の連なり」に見えるように） */
.prose .mb-ev__body p, .prose .mb-sub__body p, .prose .mb-ev__body ul, .prose .mb-sub__body ul { margin-top: .9em; }

/* 小さな出来事: ゴシックの太字＋金の粒 */
.prose .mb-sub { position: relative; margin-top: 48px; }
.prose .mb-ev__body > .mb-sub:first-child { margin-top: 0; }
.prose .mb-sub__title {
  position: relative; margin: 0; padding: 0; border: 0; text-decoration: none; letter-spacing: normal;
  font-family: var(--font-body); font-weight: 700; font-size: 17px; line-height: 1.5; color: #120e08;
}
.prose .mb-sub__title::after { content: none; }
.prose .mb-sub__title::before {
  content: ''; position: absolute; left: -19px; top: .58em; width: 5px; height: 5px; margin: 0; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 2px #efe9dd; font-size: inherit; vertical-align: baseline;
}
.prose .mb-sub__body > :first-child { margin-top: .4em; }
/* 時期だけの出来事（「ワノ国編」）は PC で最初の小さな出来事が時期と同じ行に並ぶので、朱の輪と重なる金の粒を出さない */
@media (min-width: 721px) {
  .prose .mb-ev--when-only > .mb-ev__body > .mb-sub:first-child > .mb-sub__title::before { content: none; }
}

/* 時期・番号（数が主役） */
.prose .mb-when { font-family: var(--font-mincho); font-weight: 700; color: var(--shu); line-height: 1; white-space: nowrap; }
.prose .mb-when .mb-num { font-size: 26px; }
/* 番号（「番号を振る」の歴史）は 2 桁で、目次の番号と同じ Cinzel（r6） */
.prose .mb-when--num .mb-num { font-family: var(--font-latin); font-weight: 600; font-size: 28px; letter-spacing: .02em; }
.prose .mb-when .mb-unit { font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--shu); opacity: .85; }
.prose .mb-when--word { font-size: 17px; white-space: normal; line-height: 1.35; }

/* スマホ: 欄を持たず、時期・番号を題の頭に置き、頭全体に見出しの底線を引く。本文の脇には線を引かない（r5・オーナー指摘
   「左端で線で繋ぐと本文と近くなって視認性が悪い」）。航路は出来事と出来事の間の余白にだけ縦に通し、上の端をぼかして
   時期・番号の真上で止める（r6: 行頭の朱の輪は箇条書きに見えるのでやめた）。本文は全幅 */
@media (max-width: 720px) {
  .prose .mb-hist { display: block; padding-left: 0; }
  .prose .mb-hist::before, .prose .mb-ev::after, .prose .mb-sub__title::before { content: none; }
  .prose .mb-ev { display: block; }
  .prose .mb-ev + .mb-ev { margin-top: 88px; }
  .prose .mb-sub { margin-top: 40px; }
  /* 題は時期・番号の横で折り返す（丸ごと次の行に落とさない） */
  .prose .mb-ev__head {
    position: relative; display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0;
    padding: 0 0 10px; border-bottom: 1px solid rgba(201,160,32,.6);
  }
  .prose .mb-ev__head::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 48px; height: 3px; background: var(--shu); }
  /* 時期・番号の欄: 題の高さいっぱいに金の細い縦罫を立て、中身は上下の真ん中（数と単位は grid の baseline でそろえる） */
  .prose .mb-ev__when {
    flex: none; max-width: 45%; align-self: stretch; text-align: left;
    display: grid; grid-auto-flow: column; justify-content: start; align-content: center; align-items: baseline;
    padding-right: 12px; margin-right: 12px; border-right: 1px solid rgba(201,160,32,.7);
  }
  .prose .mb-ev--when-only .mb-ev__when { padding-right: 0; margin-right: 0; border-right: 0; }
  .prose .mb-ev__title { flex: 1 1 0; min-width: 0; font-size: 20px; }
  /* つなぎ: 前の出来事の下 4px から頭の 6px 上まで（時期・番号の真上）。上の 32px をぼかす */
  .prose .mb-ev + .mb-ev::before {
    content: ''; position: absolute; left: 6px; top: -84px; width: 1px; height: 78px;
    background: repeating-linear-gradient(to bottom, rgba(90,60,20,.75) 0 4px, transparent 4px 8px);
    -webkit-mask: linear-gradient(to bottom, transparent, #000 32px); mask: linear-gradient(to bottom, transparent, #000 32px);
  }
  .prose .mb-when .mb-num { font-size: 22px; }
  .prose .mb-when--num .mb-num { font-size: 26px; }
  .prose .mb-ev--when-only .mb-when--word { font-size: 20px; }
  .prose .mb-ev__head + .mb-ev__body > .mb-sub:first-child { margin-top: 1.1em; }
}