@charset "utf-8";
/* haishinlab.com「ソクミルの使い方ガイド」
   ------------------------------------------------------------------
   組版の方針（duga-douga.com と同じ体系。色だけ分けている）

   使わないもの
     角丸・ドロップシャドウ・グラデーション・カード・丸アイコン・
     ピル型バッジ・欧文Webフォント・均等な4分割グリッド。
     どれも「作った感」ではなく「生成された感」を出す原因になる。

   代わりに使うもの
     罫。太さは3種類しか使わない。
       2px 墨       … 章の始まり（見出しの上の短い罫）
       1px 実線     … 欄の外枠
       1px 点線     … 行の区切り
     余白は非対称にする。見出しの前を広く、後を狭く。
     見出しは版面より半角ぶん左へ出す。左端が一直線に揃わないことで
     機械が並べた感じが消える。

   色
     藍 --ai  … このサイトの色。リンク・記号・題字の判に使う。
     朱 --shu … CTA だけに使う。赤がページ内で1か所しか出ないので、
                 押してほしい場所が自然に浮き上がる。
                 藍と朱の取り合わせは藍刷りに朱の判を捺す和装本の配色。
   ------------------------------------------------------------------ */

:root {
  --paper:   #f7f6f4;
  --paper-2: #edebe7;
  --ink:     #1a1a1a;
  --ink-2:   #454440;
  --muted:   #656b73;
  --rule:    #d5d2cb;
  --rule-2:  #b0ada5;

  /* 藍。紙 #f7f6f4 に対して 7.49:1 */
  --ai:      #1a4f7a;
  --ai-ink:  #16456a;
  --ai-bg:   #eaf0f5;
  /* 朱。白文字で 5.71:1 */
  --shu:     #bf3122;
  --shu-ink: #a1281b;
  --btn:     #bf3122;
  --btn-dk:  #7d1e13;
  --marker:  rgba(191, 49, 34, .22);

  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
          "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium",
          "Segoe UI", Meiryo, sans-serif;
  /* 見出し用。"Yu Gothic Medium" を外し、Windows の合成ボールドを避ける */
  --sans-b: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
            "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic",
            "Segoe UI", Meiryo, sans-serif;
  /* 明朝は 1.05rem 以上でしか使わない（小サイズは Android で掠れる）。
     Android にはヒラギノも游明朝も無いので Noto Serif CJK まで拾う。
     それでもゴシックに落ちた場合に備え、見出しの階層は明朝ではなく
     「上の太罫 + 級数差 + 字間」で成立するように組んである */
  --mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro",
            "Yu Mincho", "YuMincho", "游明朝",
            "Noto Serif JP", "Noto Serif CJK JP", "Source Han Serif JP",
            "源ノ明朝", "IPAexMincho", "MS PMincho", serif;

  /* 級数は7段に固定。中間値を足さない */
  --fs-2xs:  .75rem;
  --fs-xs:   .8125rem;
  --fs-s:    .875rem;
  --fs-m:    .9375rem;
  --fs-base: 1rem;
  --fs-lead: 1.0625rem;
  --fs-h3:   1.125rem;

  --col:      38rem;   /* 版面。全角38〜40字で折り返す */
  --col-wide: 54rem;
  --gut:      1.35rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #131312;
    --paper-2: #1b1b1a;
    --ink:     #eae8e3;
    --ink-2:   #bdbab4;
    --muted:   #999790;
    --rule:    #302f2d;
    --rule-2:  #4a4845;
    --ai:      #7fb2d9;
    --ai-ink:  #96c1e2;
    --ai-bg:   #16222c;
    --shu:     #e2705d;
    --shu-ink: #ec8471;
    --btn:     #bf3122;   /* 塗りは暗い側でも固定。白文字で 5.71:1 を保つ */
    --btn-dk:  #6b190f;
    --marker:  rgba(226, 112, 93, .26);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.95;
  font-feature-settings: "palt" 1;
  letter-spacing: .02em;
  text-underline-offset: .2em;
}

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
img { max-width: 100%; height: auto; }

a { color: var(--ai); text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:where(a, summary):focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; }

/* 強調。蛍光色ではなく朱を薄く敷いたマーカー。
   下から4割だけ塗るので、下線より強くベタ塗りより静か */
.em {
  font-style: normal; font-weight: inherit;
  background-image: linear-gradient(transparent 58%, var(--marker) 58%);
  padding-inline: .08em;
}

.wrap   { width: 100%; max-width: var(--col);      margin-inline: auto; padding-inline: var(--gut); }
.wrap-w { width: 100%; max-width: var(--col-wide); margin-inline: auto; padding-inline: var(--gut); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; z-index: 99; }
.skip:focus { left: .5rem; top: .5rem; }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- 題字部 */
.masthead__in {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem 1.2rem; flex-wrap: wrap; padding-block: .9rem .75rem;
}
.brand { text-decoration: none; color: inherit; display: flex; align-items: center; gap: .6rem; }
.brand__mark { display: block; flex: none; }
.brand__mark img { display: block; }
.brand__text { display: flex; align-items: baseline; gap: .45rem; }
.brand__text b { font-family: var(--mincho); font-size: .95rem; font-weight: 600; letter-spacing: .16em; }
.brand__text small { font-size: var(--fs-2xs); color: var(--muted); letter-spacing: .2em; }
.masthead__meta { margin: 0; font-size: var(--fs-2xs); color: var(--muted); letter-spacing: .06em; }
/* 題字下の藍の細罫。新聞の柱まわりの記号 */
.masthead__bar { height: 2px; background: var(--ai); }

/* -------------------------------------------------------------- 目次の柱 */
/* ハンバーガーにしない。新聞の面名のように横一列に並べ、
   狭い画面では横スクロールさせる（JS を使わない） */
.gnav { border-bottom: 1px solid var(--rule); }
.gnav__l {
  list-style: none; margin: 0 auto; display: flex; gap: 0 1.35rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; white-space: nowrap;
}
.gnav__l::-webkit-scrollbar { display: none; }
.gnav__l a {
  display: block; padding: .55rem 0;
  font-size: var(--fs-xs); letter-spacing: .06em;
  color: var(--ink-2); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.gnav__l a:hover { color: var(--ai); }
.gnav__l .is-current a { color: var(--ink); font-weight: 700; border-bottom-color: var(--ai); }

/* ------------------------------------------------------------------ 扉 */
.doc { padding-block: clamp(1.6rem, 4.5vw, 2.4rem) clamp(2.6rem, 7vw, 3.6rem); }
.doc--center { text-align: center; }
.doc--center .doc__lead { margin-inline: auto; }

.crumb { margin-bottom: 1.4rem; font-size: var(--fs-2xs); color: var(--muted); display: flex; gap: .5rem; flex-wrap: wrap; }
.crumb a { color: var(--muted); }

.doc__code { margin: 0 0 .4rem; font-family: var(--mincho); font-size: 3.4rem; line-height: 1; color: var(--rule-2); }

.doc__h1 {
  font-family: var(--mincho); font-feature-settings: "palt" 1; font-weight: 600;
  margin: 0 0 1.05rem;
  font-size: clamp(1.5rem, 4.6vw, 2rem);
  line-height: 1.5; letter-spacing: .03em; text-wrap: balance;
}
.doc__h1--home { font-size: clamp(1.75rem, 5.8vw, 2.45rem); line-height: 1.42; }
/* 見出しの上に短い墨の太罫。章の開始をこれ1本で示す */
.doc__h1::before {
  content: ""; display: block; width: 3.4em; height: 2px;
  background: var(--ink); margin-bottom: .85rem;
}
.doc--center .doc__h1::before { margin-inline: auto; }

.doc__lead {
  margin: 0; max-width: 34rem;
  font-size: var(--fs-lead); line-height: 2.05; color: var(--ink-2);
}

/* 広告表示。景表法の運用基準に合わせ、本文と同じ級数・同じ濃さで出す。
   小さくも薄くもしない（運用基準 第3-1(2) カ・キ）。囲みは左罫1本だけ */
.disclose {
  margin: 1.6rem 0 0; padding: .2rem 0 .2rem 1rem;
  border-left: 3px solid var(--shu);
  font-size: var(--fs-base); line-height: 1.9; color: var(--ink);
}
.disclose b { font-weight: 700; }

/* ----------------------------------------------------------------- 目次 */
.toc { margin-top: 1.9rem; padding-block: 1.3rem 1.4rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.toc__t { margin: 0 0 .8rem; font-size: var(--fs-2xs); letter-spacing: .32em; color: var(--muted); }
.toc__l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.toc__l li { break-inside: avoid; border-bottom: 1px dotted var(--rule); }
.toc__l li:last-child { border-bottom: 1px solid var(--rule); }
.toc__l a {
  display: flex; align-items: flex-start; gap: .5rem; padding: .26rem 0;
  color: var(--ink-2); text-decoration: none; font-size: var(--fs-s); line-height: 1.7;
}
.toc__l a:hover { color: var(--ai); }
.toc__x { flex: 0 1 auto; }
/* 書籍の目次の点リーダー */
.toc__lead { flex: 1 1 auto; min-width: 1.2rem; align-self: flex-end; margin-bottom: .42em; border-bottom: 1px dotted var(--rule-2); }
.toc__n { flex: none; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ 本文 */
.prose { margin-top: .2rem; }

.prose h2 {
  font-family: var(--mincho); font-feature-settings: "palt" 1; font-weight: 600;
  /* 見出しの前を広く、後を狭く。均等な段落リズムを崩す */
  margin: clamp(2.6rem, 6.5vw, 3.6rem) 0 1.05rem;
  font-size: clamp(1.28rem, 3.6vw, 1.55rem);
  line-height: 1.55; letter-spacing: .03em; text-wrap: balance;
  scroll-margin-top: 1.2rem;
}
.prose h2::before {
  content: ""; display: block; width: 3.4em; height: 2px;
  background: var(--ink); margin-bottom: .8rem;
}
/* 版面より半角ぶん左へ出す。左端が一直線に揃わないことで機械感が消える */
@media (min-width: 46rem) { .prose h2 { margin-left: -.5em; } }

.prose h3 {
  font-family: var(--sans-b);
  margin: 2.2rem 0 .8rem; font-size: var(--fs-h3); font-weight: 600;
  line-height: 1.65; letter-spacing: .04em;
  scroll-margin-top: 1.2rem;
}
.prose h3::before { content: "──"; color: var(--ai); margin-right: .5em; letter-spacing: -.15em; }

.prose h4 {
  font-family: var(--sans-b);
  margin: 1.7rem 0 .5rem; font-size: var(--fs-m); font-weight: 700;
  line-height: 1.7; letter-spacing: .04em; color: var(--ink);
}

.prose p { font-size: var(--fs-base); line-height: 1.95; }
.prose > p + h3, .prose > ul + h3, .prose > ol + h3 { margin-top: 2.4rem; }

.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.25em; font-size: var(--fs-m); line-height: 1.95; color: var(--ink-2); }
.prose li { margin-bottom: .35rem; }
.prose ul > li::marker { color: var(--rule-2); }
.prose ol > li::marker { color: var(--ai); font-variant-numeric: tabular-nums; }
.prose li > ul, .prose li > ol { margin: .35rem 0 .1rem; }

.prose code {
  padding: .05em .4em; border: 1px solid var(--rule);
  background: var(--paper-2); font-size: .92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: normal; overflow-wrap: anywhere;
}

.prose hr { margin: 2.4rem 0; border: 0; border-top: 1px solid var(--rule); }

/* 出典・注記。本文より一段落とす */
.fine, .prose .fine { margin-top: .9rem; font-size: var(--fs-xs); line-height: 1.9; color: var(--muted); }
.fine a { color: var(--muted); }

/* 注記の囲み。引用記法（>）をここに割り当てている。
   カードにしない。左罫1本と級数差だけで本文と区別する */
.prose blockquote {
  margin: 1.8rem 0; padding: .1rem 0 .1rem 1rem;
  border-left: 3px solid var(--rule-2);
}
.prose blockquote p { margin: 0; font-size: var(--fs-m); line-height: 1.95; color: var(--ink-2); }
.prose blockquote strong:first-child { color: var(--ink); }

/* ------------------------------------------------------------------ 表 */
.prose table {
  width: 100%; margin: 1.5rem 0; border-collapse: collapse;
  font-size: var(--fs-s); min-width: 20rem;
}
.prose th, .prose td {
  padding: .55rem .9rem .55rem 0; text-align: left; vertical-align: top;
  line-height: 1.75; border-bottom: 1px dotted var(--rule);
}
.prose thead th {
  font-size: var(--fs-2xs); letter-spacing: .12em; color: var(--muted);
  font-weight: 400; white-space: nowrap; border-bottom: 1px solid var(--ink);
}
.prose tbody td { color: var(--ink-2); }
.prose tbody td:first-child { color: var(--ink); font-weight: 700; }
.prose tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
/* 列の多い表は版面の右へ少しはみ出させる。左端は本文と揃えたままにするので、
   組みは崩れず、セルの折り返しだけが減る（図版を版面から出す組み方） */
@media (min-width: 56rem) {
  .prose table { width: calc(100% + 6rem); }
}

/* 狭い画面では表だけを横スクロールさせる。本文は絶対に横に溢れさせない */
@media (max-width: 34rem) {
  .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .prose td, .prose th { white-space: normal; min-width: 6.5rem; }
}

/* -------------------------------------------------------------- 問答（FAQ）*/
/* FAQ ページは h3 が質問、続く段落が答え。
   丸アイコンを置かず、Q と A の活字だけで示す */
/* Q と A の活字は、段落を grid にせず絶対配置でぶら下げる。
   grid にすると <a> や <code> が独立したグリッド項目になり、
   1文字ずつ縦に折り返して組みが崩れる（実際に踏んだ）。 */
.prose--faq h3, .prose--faq h3 + p {
  position: relative; padding-left: 2rem;
}
.prose--faq h3 {
  margin: 0; padding-top: 1rem; padding-bottom: .35rem;
  border-top: 1px dotted var(--rule);
  font-size: var(--fs-m); font-weight: 700; line-height: 1.8;
}
.prose--faq h3::before {
  content: "Q"; position: absolute; left: 0; top: 1rem;
  color: var(--shu); font-family: var(--sans-b);
  font-size: 1.02rem; font-weight: 700; line-height: 1.8;
  letter-spacing: 0; margin: 0;
}
.prose--faq h3 + p {
  margin: 0 0 1.1rem; font-size: var(--fs-m); line-height: 2; color: var(--ink-2);
}
.prose--faq h3 + p::before {
  content: "A"; position: absolute; left: 0; top: 0;
  color: var(--muted); font-family: var(--sans-b);
  font-size: 1.02rem; font-weight: 700; line-height: 2;
}
.prose--faq h2 + h3 { border-top: 1px solid var(--ink); }

/* --------------------------------------------------------------- 記事一覧 */
.idx { list-style: none; margin: 1.5rem 0 0 !important; padding: 0 !important; border-top: 1px solid var(--ink); }
.idx__r { margin: 0 !important; border-bottom: 1px dotted var(--rule); }
.idx__r a {
  display: block; padding: .8rem 0; font-size: var(--fs-m); line-height: 1.75;
  color: var(--ink); text-decoration: none;
}
.idx__r a::after { content: "→"; color: var(--ai); margin-left: .6em; }
.idx__r a:hover { color: var(--ai); }
.idx__r:last-child { border-bottom: 1px solid var(--ink); }
.idx--plain { text-align: left; max-width: 24rem; margin-inline: auto !important; }

/* ------------------------------------------------------------------ CTA */
/* 設計の根拠
   - NN/g「Flat-Design Best Practices」: フラットな面はクリックできる手がかりを
     失う。影やグラデーションを使わずに、境界・色・大きさ・位置・一貫性で
     押せることを示す必要がある。
     → 影とグラデは使わないまま、(a) 版面いっぱいの大きさ (b) 下辺の濃い帯
       (c) 進行方向を示す三角、の3つで手がかりを作る。
   - ボタンは大きいほどクリック率が上がる。最小 44×44px ではなく
     版面の全幅 × 高さ 60px を取る。
   - 背景が無彩色寄りのページでは暖色の CTA が最も目立つ。
     このサイトは他をすべて藍でまとめてあるので、朱はここにしか出てこない。
   - ボタン直下の短い一文（不安を打ち消す文）は効果が確認されている。
     ここでは「登録は無料」「買わなければ料金は発生しない」を置く。 */
.cta { margin: 2.2rem 0 0; }

/* ボタンの上の行。フラッグは光学的に中央、PR は右端に固定する */
.cta__head {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 1.45rem; margin-bottom: .55rem;
}
/* ＼会員登録は無料／ の斜線は文字ではなく CSS で引く。
   字形に依存しないので、角度と太さを揃えられる */
.cta__flag {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  color: var(--shu-ink);
}
.cta__flag::before, .cta__flag::after {
  content: ""; width: 1.15rem; height: 2px; background: currentColor; flex: none;
}
.cta__flag::before { transform: rotate(62deg); }
.cta__flag::after  { transform: rotate(-62deg); }

/* 広告表記。雑誌の記事広告と同じ「PR」の枠を、ボタンの右肩に置く。
   級数と色はボタン下に続く一文（.cta__sub）と揃えてある。
   運用基準 第3-1(2) が不明瞭な例として挙げるのは
     カ「周囲の文字と比較して小さく表示」
     キ「他の文字より薄い色を使用」
     オ「視認しにくい表示の末尾の位置」
   の3つだが、いずれも「その結果、認識しにくい表示となった場合」が条件。
   同じ級数・同じ色の文が隣にあり、位置もリンクの直前（末尾ではない）なので
   この3つのどれにも当たらない。各ページ冒頭には本文級数・本文色の
   広告開示ブロック（.disclose）を別に置いてある。
   → これより小さく・薄くすることは今後もしないこと。 */
.cta__pr {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted);
}
.cta__pr span {
  display: inline-block; padding: .04em .45em;
  border: 1px solid currentColor;
  font-weight: 700; letter-spacing: .14em; text-indent: .14em;
}

.cta__btn {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  width: 100%; min-height: 3.75rem; padding: 1rem 1.2rem;
  background: var(--btn); color: #fff; border: 0;
  /* 下辺の濃い帯。影ではなく面なので、平らな組みを崩さずに
     「押せる物」の手がかりだけを足せる */
  border-bottom: 3px solid var(--btn-dk);
  border-radius: 2px;
  font-family: var(--sans-b); font-size: 1.09rem; font-weight: 700; letter-spacing: .08em;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease;
  /* ごく浅い呼吸。7秒に一度だけ 1.5% 伸び縮みして存在を知らせる。
     常時動かすと落ち着きが無くなるので、周期の大半は静止させている */
  animation: cta-breathe 7s cubic-bezier(.34, .01, .27, 1) 2.5s infinite;
  transform-origin: center; will-change: transform;
}
@keyframes cta-breathe {
  0%, 100% { transform: scale(1); }
  4%       { transform: scale(1.015); }
  9%       { transform: scale(1); }
  13%      { transform: scale(1.008); }
  18%, 99% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .cta__btn { animation: none; } }
.cta__btn:hover  { background: #a92c1d; border-bottom-color: #6b190f; animation-play-state: paused; }
.cta__btn:active { background: #8e2417; border-bottom-width: 1px; margin-bottom: 2px; }
.cta__btn:focus-visible { outline: 3px solid var(--shu); outline-offset: 3px; }
/* 進行方向の手がかり。字形に依存しないよう CSS で三角を描く */
.cta__go {
  flex: none; width: 0; height: 0;
  border-left: 8px solid currentColor;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  transition: transform .18s ease;
}
.cta__btn:hover .cta__go { transform: translateX(3px); }
.cta__sub { margin: .7rem 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.85; }

/* ----------------------------------------------------------------- 末尾 */
.finale {
  margin-top: clamp(2.6rem, 6.5vw, 3.6rem);
  padding-top: clamp(1.6rem, 4vw, 2.2rem);
  border-top: 2px solid var(--ink);
}
.finale__k { margin: 0 0 .6rem; font-size: var(--fs-2xs); letter-spacing: .32em; color: var(--muted); }
.finale__t { margin: 0 0 .6rem; font-family: var(--mincho); font-size: clamp(1.2rem, 3.4vw, 1.45rem); font-weight: 600; line-height: 1.65; text-wrap: balance; }
.finale__b { margin: 0; font-size: var(--fs-m); color: var(--ink-2); line-height: 1.95; }

/* ----------------------------------------------------------------- 奥付 */
.site-foot { border-top: 1px solid var(--rule); padding-block: 1.9rem 2.6rem; }
.site-foot__note { margin: 0 0 1.2rem; font-size: var(--fs-xs); line-height: 1.95; color: var(--ink-2); max-width: 42rem; }
.site-foot__note b { color: var(--ink); }
.site-foot__nav { display: flex; flex-wrap: wrap; gap: .35rem 1.6rem; margin-bottom: 1.2rem; }
.site-foot__nav a { font-size: var(--fs-xs); color: var(--ink-2); text-decoration: none; }
.site-foot__nav a:hover { color: var(--ai); text-decoration: underline; }
.site-foot__copy {
  margin: 0; padding-top: 1rem; border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .2rem;
  font-size: var(--fs-2xs); color: var(--muted); line-height: 1.85;
}
.site-foot__copy a { color: var(--muted); }

/* ---------------------------------------------------------------- 印刷 */
@media print {
  .masthead__bar, .gnav, .cta, .toc, .site-foot__nav { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .prose h2 { page-break-after: avoid; }
  .prose table, .prose blockquote { page-break-inside: avoid; }
}