/* =========================================================================
   Zawa Nippon — direction « Journal »
   書体は自前配信（/fonts.css）。第三者へのリクエストは既定でゼロ。
   ========================================================================= */

:root {
  /* 素材 */
  --paper:  oklch(0.949 0.024 91);
  --paper2: oklch(0.929 0.026 89);
  --ink:    oklch(0.22 0.012 60);
  --ink2:   oklch(0.38 0.012 60);
  --muted:  oklch(0.55 0.012 60);
  --line:   oklch(0.818 0.024 82);
  --accent: oklch(0.50 0.16 27);
  --art-bg:     oklch(0.918 0.028 87);
  --art-line:   oklch(0.730 0.030 80);
  --art-accent: oklch(0.50 0.16 27);

  /* 構造 */
  --wide: 74rem;
  --measure: 41rem;
  --list: 52rem;      /* 一列に積む一覧（カテゴリ）の幅 */
  --serif: Newsreader, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: Archivo, ui-sans-serif, system-ui, "Helvetica Neue", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body { overflow-x: clip; }   /* 題字の 100vw が横スクロールを生まないように */
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17.5px/1.72 var(--serif);
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

.rule { width: 100%; }
.rule--hair { height: 1px; background: var(--line); }
.rule--heavy { height: 3px; background: var(--ink); }

/* ---- 題字 --------------------------------------------------------------- */
.masthead {
  max-width: var(--wide); margin: 0 auto;
  padding: 26px 1.5rem 0;
  display: flex; flex-direction: column; align-items: center;
  position: relative; isolation: isolate;   /* 背景の波紋を内側に閉じ込める */
}
/* 題字の背後の波紋。線だけ・塗りなしで、上下は霞ませて罫とぶつからないようにする。
   記事ごとに変えない —— 毎日違う絵が題字に出ると同じ新聞に見えなくなる。 */
.masthead-bg {
  /* 版面（74rem）ではなく**画面の左右いっぱい**に敷く。題字は紙の端まで届く方が新聞らしい。
     100vw は縦スクロールバーのぶん溢れ得るので、body 側を overflow-x: clip で押さえる
     （clip はスクロール容器を作らないので、hidden と違って他の挙動を壊さない） */
  position: absolute; top: -8px; bottom: 0;
  left: 50%; transform: translateX(-50%); width: 100vw;
  z-index: -1; overflow: hidden;
  opacity: .55; pointer-events: none;
  /* 上は日付の行、下は太罫。どちらにも絵をかぶせないよう、その手前で霞ませる */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 16%, #000 36%, #000 64%, transparent 96%);
          mask-image: linear-gradient(to bottom, transparent 0%, transparent 16%, #000 36%, #000 64%, transparent 96%);
}
.masthead-bg svg { width: 100%; height: 100%; }
/* 絵を敷く場合。地の色は絵の中にも入っているので、境目が出ないよう薄く重ねるだけにする */
.masthead-bg--img { background-size: cover; background-position: center 45%; opacity: .42; }
/* 波紋の芯は左右にあるので、幅の広い版を狭い画面に出すと真ん中しか映らず消える。
   幅ごとに版を差し替える（1つを引き伸ばすと円が楕円に潰れるため） */
.masthead-bg--narrow { display: none; }
.masthead-line {
  display: flex; justify-content: space-between; width: 100%;
  font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 9px;
}
.wordmark {
  color: inherit; font: 600 clamp(2.4rem, 6vw, 3.4rem)/1 var(--serif);
  letter-spacing: -0.022em; padding: 16px 0 7px;
}
.wordmark:hover { text-decoration: none; }
.wordmark-mark { color: var(--accent); }
.masthead-tag {
  margin: 0 0 14px; font: 500 11.5px/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
/* カテゴリの帯。**PC も狭い画面も同じ作り** —— 1行に並べ、選んでいる項目を
   スクロール位置で画面の中央に置く（位置合わせは Base.astro の place()）。
   折り返し（flex-wrap: wrap）にすると、place() が足す左右の余白で縦に崩れる（2026-08-20 実測）。 */
.nav {
  width: 100%; padding: 11px 0 10px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  font: 600 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.nav::-webkit-scrollbar { display: none; }
/* 動かすのはこの中身。スクロール位置は先に最終値へ飛ばして、見た目だけ transform で
   戻してから 0 へ寄せる（合成だけで動くので、塗り直しが重い画面でもコマが落ちない）。 */
.nav-track {
  display: flex; gap: clamp(1rem, 3vw, 2rem); align-items: center;
  width: max-content; min-width: 100%; position: relative;
  /* will-change は常時付けない（層を持ちっぱなしにすると、外した瞬間に描き直しが入る）。
     動かす間だけ JS が付け外しする。 */
}
.nav a { flex: 0 0 auto; }
.nav a { color: var(--ink); }
.nav a:hover { color: var(--accent); text-decoration: none; }

/* ---- 版面 --------------------------------------------------------------- */
.page {
  max-width: var(--wide); margin: 0 auto; padding: 28px 1.5rem 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2.75rem;
  align-items: start;
}
.col-main { display: flex; flex-direction: column; gap: 1.9rem; min-width: 0; }
.col-side { display: flex; flex-direction: column; gap: 1.9rem; }

/* 共通の見出し語 */
.kicker {
  margin: 0; font: 700 11.5px/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.dek { margin: 0; color: var(--ink2); line-height: 1.55; }
.dek--lead { font-size: 1.15rem; }
.meta { margin: 0; font: 400 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* 図版 */
.art { overflow: hidden; background: var(--art-bg); border: 1px solid var(--line); border-radius: 8px; }
.art svg, .art img { width: 100%; height: 100%; object-fit: cover; }
.art--photo { margin: 0; }
.art--bleed { border: 0; }

/* 一面 */
.lead { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.8rem; align-items: start; }
.lead-text { display: flex; flex-direction: column; gap: .8rem; }
.lead h1 { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.015em; text-wrap: pretty; }
.lead h1 a { color: var(--ink); }

/* 3本組 */
.row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.6rem; }
.card a { color: inherit; display: flex; flex-direction: column; gap: .6rem; }
.card a:hover, .lead h1 a:hover { text-decoration: none; }
.card-body { display: flex; flex-direction: column; gap: .35rem; }
.card h2 { margin: 0; font-size: 1.2rem; line-height: 1.28; font-weight: 600; text-wrap: pretty; }
.card .dek { font-size: .92rem; }

/* 小札（短信・関連記事で共用）—— 図版を左、本文を右に置く1行。
   ※ かつて `.briefs .card` に書いていたが、それだと関連記事で効かず
     大きな図版が8枚並んでしまった。**置き場所に依存しない `.card--brief` に一本化** */
.briefs { display: flex; flex-direction: column; }
.card--brief { border-bottom: 1px solid var(--line); }
.briefs .card--brief:first-child { border-top: 1px solid var(--line); }
.card--brief h2 { font-size: 1.08rem; }
.card--brief .dek { font-size: .89rem; }

/* 側柱 */
.side-head {
  margin: 0 0 .55rem; padding-bottom: .5rem; border-bottom: 2px solid var(--ink);
  font: 700 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.side-block { display: flex; flex-direction: column; }
.ranked { list-style: none; margin: 0; padding: 0; }
.ranked li {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .7rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.ranked .num { font-size: 1.5rem; line-height: 1.1; font-weight: 300; color: var(--accent); }
.ranked a { color: var(--ink); font-size: .97rem; line-height: 1.35; }
.side-text { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink2); }

/* 広告 —— 置き場所ごとに形が違う。空枠のときも同じ高さを取って、版面で位置を確認できるようにする */
.ad {
  border: 1px dashed var(--line); background: var(--paper2);
  padding: 1.4rem 1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
}
.ad::before {
  content: attr(data-label);
  font: 400 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
[data-locale="ja"] .ad::before { font-family: var(--jp-sans); }
.ad--side   { min-height: 15rem; }
.ad--wide   { min-height: 6.5rem; margin: .4rem 0; }
.ad--inline { min-height: 8rem; margin: 2rem 0; }
.grid-page > .ad--wide { margin-top: 2rem; }

/* ---- 記事 --------------------------------------------------------------- */
.post { max-width: var(--measure); margin: 2rem auto 0; padding: 0 1.5rem; }
/* 記事も版面グリッドに入れて側柱を出す（2026-08-20）。決まったこと3つ:
   ① **読み幅は変えない**——本文は --measure のまま。行の長さが変わると読み心地が変わる。
   ② **版面と柱の位置はトップと同じに固定**（74rem / 柱 19rem）。柱は読者が場所で覚える
      要素なので、ページを移るたびに動くと画面全体がずれて見える。柱を内側に寄せると
      題字の罫だけが右にはみ出た切れ端になる。
   ③ **本文は、柱の左に残った領域の中で中央**に置く。左端に貼り付けると本文と柱の間だけが
      大きく空いて、記事が左に寄って見える（本人指摘・2回）。
   ⚠️ 版面の padding-top を 0 にすると柱の頭が題字に食い込む。上の余白は殺さず、
   本文側の margin を外して両列の頭を揃えること。 */
.col-main > .post { margin: 0 auto; padding: 0; max-width: var(--measure); }
.post-head { display: flex; flex-direction: column; gap: .75rem; }
.post-head h1 { margin: 0; font-size: clamp(1.9rem, 4.4vw, 2.6rem); line-height: 1.13; font-weight: 600; letter-spacing: -0.015em; text-wrap: pretty; }
.post > .art { margin: 1.6rem 0 1.9rem; border-radius: 10px; }

/* 記事のメイン画像は **切らない**（絵そのものの形で出す）。21:9 に切っていた頃は
   上下が落ちるうえ、挿絵と同じ大きさに見えていた（2026-08-20 指摘）。
   ⚠️ **版面からはみ出させない**（同日・2度目の指摘）。幅を広げて主役に見せようとしたが、
   新聞の版面は全部が同じ左右の罫に揃うことで成り立っているので、そこを破ると事故に見える。
   **主役であることは幅ではなく高さで示す** —— 4:3 を切らずに出すと 21:9 のほぼ倍の高さになり、
   本文と同じ幅のままでも挿絵とは別物として読める。 */
.art--natural { height: auto; }
.art--natural img { height: auto; object-fit: contain; }
.post > .art--hero { margin-block: 1.8rem 2.1rem; }

.prose p { margin: 1.1rem 0; line-height: 1.85; }
.prose > p:first-of-type::first-letter {
  float: left; font-size: 3.3em; line-height: .84; font-weight: 600;
  padding: .06em .09em 0 0; color: var(--accent);
}
.prose h2 {
  margin: 2.6rem 0 .8rem;
  font-size: 1.45rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em;
}
/* 話題の切れ目は罫でなく三つ星（asterism）。文芸誌の作法 */
.prose h2::before {
  content: "⁂"; display: block; text-align: center;
  color: var(--accent); font-size: 1.15rem; letter-spacing: .34em;
  font-weight: 400; margin: 0 0 1.7rem; text-indent: .32em;
}
.prose strong { font-weight: 600; }
.prose blockquote { margin: 0; }

/* 引用 */
.quote {
  margin: 1.8rem 0; padding: 1rem 1.15rem; border-radius: 10px;
  background: oklch(0.926 0.026 89);
  box-shadow: inset 0 2px 5px -2px oklch(0.35 0.03 60 / .22),
              inset 0 0 0 1px oklch(0.35 0.03 60 / .07),
              0 1px 0 oklch(1 0 0 / .5);
}
.quote blockquote { margin: 0; font-size: 1.12rem; line-height: 1.62; font-style: italic; }
.quote figcaption {
  margin-top: .45rem; font: 400 11.5px/1.5 var(--sans);
  letter-spacing: .04em; color: var(--muted);
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline;
}
.quote .who { font-weight: 600; color: var(--ink2); }
details.original { margin-top: .5rem; font: 400 12px/1.5 var(--sans); color: var(--muted); }
details.original summary { cursor: pointer; list-style: none; opacity: .7; }
details.original summary::-webkit-details-marker { display: none; }
details.original summary::before { content: "▸ "; }
details.original[open] summary { opacity: 1; }
details.original[open] summary::before { content: "▾ "; }
details.original p { margin: .4rem 0 0; font-family: var(--serif); font-size: .95rem; line-height: 1.85; }

/* 共有 */
.share {
  display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap;
  margin-top: 2.4rem; padding: .8rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font: 500 12.5px/1 var(--sans);
}
.share-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* 出典 */
.sources { margin-top: 1.8rem; }
.sources h2 { margin: 0 0 .5rem; font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sources ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.sources li { font-size: .95rem; }
.src-kind { font: 400 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-left: .5rem; }

.related { margin-top: 2.6rem; }
.related-grid {
  margin-top: 1rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.4rem;
}
.related-grid .card--brief:nth-child(-n + 2) { border-top: 1px solid var(--line); }
.post .ad--wide { margin-top: 2.2rem; }

/* カテゴリの一覧。一列に積むので、版面いっぱい（74rem）だと1行が長すぎる */
.grid-page { max-width: var(--list); margin: 0 auto; padding: 0 1.5rem; }
.page-title { max-width: var(--list); margin: 1.8rem auto .4rem; padding: 0 1.5rem; font-size: 1.9rem; font-weight: 600; }
.notice { color: var(--muted); }

/* ---- フッター ----------------------------------------------------------- */
.site-footer {
  max-width: var(--wide); margin: 4rem auto 2.5rem; padding: 1.2rem 1.5rem 0;
  border-top: 1px solid var(--line);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.1rem; font: 400 12px/1 var(--sans); }
.site-footer nav a { color: var(--muted); }
.fine { margin-top: .9rem; font: 400 11px/1 var(--sans); color: var(--muted); }

/* 狭い画面の規則はファイル末尾に1箇所だけ置く（後続の規則に負けないため）。 */

/* =========================================================================
   日本語版（公開しない・原稿確認用）
   版面はフランス語版と同一。和文の組みに要る調整だけを当てる。
   ========================================================================= */
:root {
  --jp: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --jp-sans: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}

.ja-banner {
  margin: 0; padding: .45rem 1rem; text-align: center;
  background: oklch(0.50 0.16 27); color: oklch(0.98 0.01 90);
  font: 500 12px/1.4 var(--jp-sans); letter-spacing: .08em;
}

[data-locale="ja"] body,
[data-locale="ja"] .prose p { font-family: var(--jp); }
[data-locale="ja"] h1,
[data-locale="ja"] h2,
[data-locale="ja"] h3,
[data-locale="ja"] .wordmark { font-family: var(--jp); }
[data-locale="ja"] .kicker,
[data-locale="ja"] .meta,
[data-locale="ja"] .masthead-line,
[data-locale="ja"] .masthead-tag,
[data-locale="ja"] .nav,
[data-locale="ja"] .side-head,
[data-locale="ja"] .share,
[data-locale="ja"] .site-footer nav,
[data-locale="ja"] .fine { font-family: var(--jp-sans); }

/* 和文は字間を詰めず、行間を広く取る */
[data-locale="ja"] h1 { letter-spacing: .01em; line-height: 1.32; }
[data-locale="ja"] .prose p { line-height: 2.0; }
[data-locale="ja"] .dek { line-height: 1.85; }
[data-locale="ja"] .kicker,
[data-locale="ja"] .side-head,
[data-locale="ja"] .nav { letter-spacing: .12em; }

/* 和文にドロップキャップは効かない */
[data-locale="ja"] .prose > p:first-of-type::first-letter {
  float: none; font-size: inherit; line-height: inherit; font-weight: inherit;
  padding: 0; color: inherit;
}
[data-locale="ja"] .quote blockquote { font-style: normal; line-height: 1.85; }

/* =========================================================================
   ホバー —— 記事そのものが持ち上がる。見出しだけを光らせない。
   ========================================================================= */
:root { --lift-ease: cubic-bezier(.22,.61,.20,1); --lift-radius: 10px; }

/* 浮くには余白が要る。図版はそのぶん内側に入る */
.row3 { gap: 1rem; }
.row3 .card { padding: .8rem; border-radius: var(--lift-radius); }
.lead { padding: .9rem; margin: -.9rem; border-radius: var(--lift-radius); }

.card, .lead {
  transition: transform .32s var(--lift-ease), box-shadow .32s var(--lift-ease),
              background-color .32s var(--lift-ease);
  will-change: transform;
}
.card:hover, .lead:hover {
  transform: translateY(-4px);
  /* 紙の上の札が少し浮く程度。冷たい黒でなく、地の色に寄せた暖かい影 */
  box-shadow: 0 12px 26px -14px oklch(0.35 0.03 60 / .30),
              0 3px 8px -4px oklch(0.35 0.03 60 / .16);
}

.card .art, .lead-art .art { position: relative; border-radius: 6px; }
.card .art svg, .card .art img,
.lead-art .art svg, .lead-art .art img { transition: transform .5s var(--lift-ease); }
.card:hover .art svg, .card:hover .art img,
.lead:hover .art svg, .lead:hover .art img { transform: scale(1.03); }

/* 図版の下端を朱の線が左から引かれる */
.card .art::after, .lead-art .art::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--accent); border-radius: 0 0 6px 6px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--lift-ease);
}
.card:hover .art::after, .lead:hover .art::after { transform: scaleX(1); }

.card h2, .lead h1 a { transition: color .25s var(--lift-ease); }
.card:hover h2 { color: var(--accent); }
.lead h1 a { color: var(--ink); }
.lead:hover h1 a { color: var(--accent); }

/* 小札は浮かせず、面の反転で示す（列の中で持ち上げると隣とぶつかる） */
.card--brief { padding: .85rem .7rem; margin-inline: -.7rem; border-radius: 6px; }
.card--brief a { padding: 0; }
.card--brief:hover { transform: none; box-shadow: none; background: var(--paper2); }

/* 側柱 */
.ranked a { transition: color .25s var(--lift-ease); }
.ranked a:hover { color: var(--accent); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .card, .lead, .card .art svg, .card .art img, .card .art::after, .lead-art .art::after { transition: none; }
  .card:hover, .lead:hover { transform: none; }
  .card:hover .art svg, .card:hover .art img,
  .lead:hover .art svg, .lead:hover .art img { transform: none; }
}

/* 本文中の図版 */
.fig { margin: 2rem 0; }
.fig figcaption {
  margin-top: .5rem; font: 400 11.5px/1.6 var(--sans);
  color: var(--muted); letter-spacing: .02em;
}
[data-locale="ja"] .fig figcaption { font-family: var(--jp-sans); }

/* 本文中の表 */
.prose table {
  width: 100%; margin: 1.6rem 0; border-collapse: collapse;
  font-size: .95rem;
}
.prose thead th {
  text-align: left; padding: .5rem .7rem;
  border-bottom: 2px solid var(--ink);
  font: 700 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
[data-locale="ja"] .prose thead th { font-family: var(--jp-sans); letter-spacing: .1em; }
.prose tbody td {
  padding: .6rem .7rem; border-bottom: 1px solid var(--line);
  line-height: 1.6; vertical-align: top;
}
[data-locale="ja"] .prose tbody td { line-height: 1.85; }
.prose tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.prose table + p { margin-top: 1.3rem; }
.prose .fig figcaption { margin-top: .5rem; }

/* =========================================================================
   反応のかたまり —— ここが唯一の定義（重複を作らないこと）

   線の引き方: 幹は「区間」に分けて各行が引く。1行が自分のポチから次のポチまでを
   引くので、行の高さを CSS が知らなくても必ず繋がる（実測で 2px ずれた反省）。
   太さは整数 px にする —— border は整数に丸められ、background は丸められないため、
   1.5px にすると幹と枝で太さが変わってしまう。
   ========================================================================= */
.rx {
  margin: 2rem 0;
  padding: .95rem 1.15rem 1.05rem;
  border-radius: 10px;
  background: oklch(0.926 0.026 89);
  box-shadow:
    inset 0 2px 5px -2px oklch(0.35 0.03 60 / .22),
    inset 0 0 0 1px oklch(0.35 0.03 60 / .07),
    0 1px 0 oklch(1 0 0 / .5);
}
.rx-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .8rem;
}
.rx-head {
  margin: 0; font: 700 11px/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
[data-locale="ja"] .rx-head { font-family: var(--jp-sans); letter-spacing: .14em; }
.rx-src {
  font: 400 11px/1 var(--sans); letter-spacing: .06em; color: var(--muted);
  text-decoration: none; flex-shrink: 0;
}
.rx-src:hover { color: var(--accent); }

.rx-body {
  /* すべての辺がデバイスピクセルの境界に落ちるように値を選ぶ。
     ポチが奇数径 → 中心が .5 → 太さ1pxの線の左端が整数になり、
     計算上の中心と描画上の中心が一致する（偶数径だと 0.5px ずれて見える）。
       ポチ: left = 4.5 - 2.5 = 2      / 線: left = 4.5 - 0.5 = 4
       ポチ: top  = 15.5 - 2.5 = 13    / 横線の下端 = 16 */
  --dot: 5px;
  --trunk-w: 1px;  /* 整数のみ。border は整数に丸められるため。
                      :root の --line は罫の「色」なので、太さは別名にする（値の取り違え防止） */
  --dot-x: 4.5px;
  --dot-y: 15.5px;
  --step: 22px;
  --r: 8px;
  --gap: 9px;
  font-size: 0; line-height: 0;
}

.rx-item {
  position: relative;
  font-size: 1rem; line-height: normal;
  padding-left: calc(var(--dot-x) + 10px);
}
.rx-item[data-depth="2"] { padding-left: calc(var(--dot-x) + var(--step) + 10px); }
.rx-item[data-depth="3"] { padding-left: calc(var(--dot-x) + var(--step) * 2 + 10px); }
.rx-item + .rx-item { margin-top: var(--gap); }

.rx-item::before {
  content: ""; position: absolute; z-index: 2;
  left: calc(var(--dot-x) - var(--dot) / 2);
  top: calc(var(--dot-y) - var(--dot) / 2);
  width: var(--dot); height: var(--dot);
  border-radius: 50%; background: var(--accent);
}
.rx-item[data-depth="2"]::before { left: calc(var(--dot-x) + var(--step) - var(--dot) / 2); }
.rx-item[data-depth="3"]::before { left: calc(var(--dot-x) + var(--step) * 2 - var(--dot) / 2); }

.rx-text { margin: 0; font-size: .97rem; line-height: 1.72; }
[data-locale="ja"] .rx-text { line-height: 1.9; }
.prose .rx-text { margin: 0; }
.prose .rx-item p { margin: 0; }

.rx-rally { position: relative; font-size: 0; line-height: 0; margin: 11px 0; }
.rx-rally .rx-item + .rx-item { margin-top: var(--gap); }

/* 幹の一区間：自分のポチ → 次のポチ（= 自分の高さ + 行間）。
   次が第3階層なら、幹は第2階層の列へ移るのでここでは引かない。 */
.rx-tr { display: none; }
.rx-rally .rx-item:not(:last-child):not(:has(+ .rx-item[data-depth="3"])) > .rx-tr {
  display: block; position: absolute;
  left: calc(var(--dot-x) - var(--trunk-w) / 2);
  top: var(--dot-y);
  height: calc(100% + var(--gap) - var(--trunk-cut, 0px));
  width: var(--trunk-w); background: var(--accent);
}
/* 次が第3階層のときは、第2階層の列に幹を立てる */
.rx-rally .rx-item[data-depth="2"]:has(+ .rx-item[data-depth="3"]) > .rx-tr {
  display: block; position: absolute;
  left: calc(var(--dot-x) + var(--step) - var(--trunk-w) / 2);
  top: var(--dot-y);
  height: calc(100% + var(--gap) - var(--trunk-cut, 0px));
  width: var(--trunk-w); background: var(--accent);
}

/* 幹を曲線の始点で止める場所は2つ。満尺のままだと角から突き抜けて見える。
   ① 最後の角（次が最終行） ② 列が切り替わる角（次の行が第3階層へ分岐する）
   height を規則ごとに書くと詳細度で負けるので、変数で渡す。 */
.rx-rally .rx-item { --trunk-cut: 0px; }
.rx-rally .rx-item:nth-last-child(2),
.rx-rally .rx-item:has(+ .rx-item[data-depth="2"] + .rx-item[data-depth="3"]) {
  --trunk-cut: var(--r);
}

/* 枝：曲がりだけ。縦は幹が引くので重ねない */
.rx-rally .rx-item[data-depth="2"]::after,
.rx-rally .rx-item[data-depth="3"]::after {
  content: ""; position: absolute; z-index: 1;
  top: calc(var(--dot-y) - var(--r));
  height: calc(var(--r) + var(--trunk-w) / 2);
  width: calc(var(--step) + var(--trunk-w) / 2);
  border-left: var(--trunk-w) solid var(--accent);
  border-bottom: var(--trunk-w) solid var(--accent);
  border-bottom-left-radius: var(--r);
}
.rx-rally .rx-item[data-depth="2"]::after { left: calc(var(--dot-x) - var(--trunk-w) / 2); }
.rx-rally .rx-item[data-depth="3"]::after { left: calc(var(--dot-x) + var(--step) - var(--trunk-w) / 2); }

.rx-note {
  margin: 8px 0 0 15px;
  font: 400 11.5px/1.6 var(--sans); color: var(--muted); font-style: italic;
}
[data-locale="ja"] .rx-note { font-family: var(--jp-sans); font-style: normal; }
.prose .rx-note { margin: 8px 0 0 15px; }

/* =========================================================================
   .prose p の段落余白を、面の中の部品から確実に外す。
   `.prose p` は `.rx-head` などより詳細度が高いので、必ず `.prose` を付けて打ち消す。
   これを忘れると「枠の上だけ余白が広い」状態になる（実測 上32.8 / 下16.8）。
   ========================================================================= */
.prose .rx-head,
.prose .rx-text,
.prose .rx-note,
.prose .rx-item p,
.prose .quote p,
.prose .quote blockquote,
.prose .xembed p,
.prose .fig figcaption { margin: 0; }

.prose .rx-note { margin: 8px 0 0 15px; }
.prose .fig figcaption { margin-top: .5rem; }

/* 図版はすべて角丸。カードの図版は既に 6px なので、本文側と揃える */
.fig .art { border-radius: 8px; }
.card .art, .lead-art .art { border-radius: 8px; }
.card .art::after, .lead-art .art::after { border-radius: 0 0 8px 8px; }

/* =========================================================================
   カテゴリのホバー —— 赤い枠がホバー先へ滑る
   ========================================================================= */
.nav-pill {
  position: absolute; left: 0; top: 50%;
  height: 1.85rem; margin-top: calc(-1 * 1.85rem / 2);
  border-radius: 999px; background: var(--accent);
  opacity: 0; pointer-events: none;
  transform: translateX(0); width: 0;
  transition: transform .28s var(--lift-ease), width .28s var(--lift-ease), opacity .18s var(--lift-ease);
}
.nav--on .nav-pill { opacity: 1; }
.nav a {
  position: relative; z-index: 1;
  padding: .35rem .7rem; border-radius: 999px;
  transition: color .2s var(--lift-ease);
}
.nav a:hover, .nav a:focus-visible { color: var(--paper); text-decoration: none; }
/* 今いるカテゴリ。ホバー（朱の塗り）と別物に見えるよう、こちらは朱の枠だけにする */
.nav a.is-current { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* 帯の中の語。狭い画面では短い方に差し替える（display:none 側は読み上げからも外れる） */
.nav-short { display: none; }
.nav a.is-current:hover, .nav a.is-current:focus-visible { color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .nav-pill { transition: opacity .01s; } }

/* =========================================================================
   小さな図版（側柱の一覧・短信）
   ========================================================================= */
.thumb {
  overflow: hidden; background: var(--art-bg);
  border: 1px solid var(--line); border-radius: 6px; flex-shrink: 0;
}
.thumb svg, .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb--round { border-radius: 50%; }

/* 側柱の一覧 */
.latest { list-style: none; margin: 0; padding: 0; }
.latest li { border-bottom: 1px solid var(--line); }
.latest a {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .8rem;
  align-items: center; padding: .6rem 0; color: var(--ink);
}
.latest a:hover { text-decoration: none; color: var(--accent); }
.latest span { font-size: .95rem; line-height: 1.38; }
.latest .thumb { width: 2.6rem; }
.latest a .thumb { transition: transform .3s var(--lift-ease); }
.latest a:hover .thumb { transform: scale(1.06); }

/* 小札にもトップ画。日付の行まで含めた高さいっぱいに伸ばす */
.thumb--fill { height: 100%; }
.card--brief a { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.card--brief .thumb { width: 7rem; }
.card--brief .card-body { padding-top: 0; display: flex; flex-direction: column; gap: .2rem; }
/* 関連記事は本文の幅（--measure）を2列に割るので、図版はひと回り小さく */
.related-grid .card--brief a { grid-template-columns: 5rem minmax(0, 1fr); gap: .8rem; }
.related-grid .card--brief .thumb { width: 5rem; }
.related-grid .card--brief .dek { display: none; }   /* 半幅に3行の要約は入らない */

/* =========================================================================
   狭い画面 —— **ここが唯一の定義**。ファイル末尾に置く（前に置くと、後続の
   規則に同じ詳細度で負けて効かない。実際 .row3 の gap で一度そうなっていた）。

   段は上から順に: 側柱が下に回る（62rem） → 手に持つ幅（48rem） → 小さい端末（26rem）
   ========================================================================= */
@media (max-width: 62rem) {
  .page { grid-template-columns: minmax(0, 1fr); }
  .lead { grid-template-columns: minmax(0, 1fr); }
  .lead-art { order: -1; }
  .col-side { border-top: 1px solid var(--line); padding-top: 1.5rem; }
  /* 側柱が本文の下に回ると縦長の広告は間延びするので、横長に振る舞わせる */
  .col-side .ad--side { min-height: 6.5rem; }
}

@media (max-width: 48rem) {
  body { font-size: 17px; }

  /* 余白を締める。1.5rem のままだと本文が窮屈に見える */
  .masthead, .page, .post, .site-footer, .page-title, .grid-page { padding-left: 1.1rem; padding-right: 1.1rem; }
  .masthead { padding-top: 16px; }

  /* カテゴリは**必ず全部見えるようにする**。横に流す作りにしていたが、
     「Internet」が画面の外に出たまま左寄せに見えて、切れているとしか読めなかった
     （2026-08-20 指摘）。字を詰めて 390px なら1行に収め、入らない幅では中央揃えで折り返す。 */
  /* 2行に折り返すと題字が間延びして邪魔になる（2026-08-20 指摘）。1行に固定して横に流す。
     収まるときは中央に置き、溢れるときだけスクロールする（`safe center` は溢れた瞬間に
     start へ落ちるので、左が切れて読めなくなる事故が起きない）。
     どこから始めるかは Base.astro の place0() が決める —— 左端に揃えると最後の項目が
     完全に隠れて「切れている」と読まれるため、**両端が半端に切れた状態**で始める。 */
  .nav {
    /* ⚠️ scroll-snap は入れない。中身を transform で滑らせている間、スナップ先の位置も
       一緒に動くので、**動きの終わりでカクッと吸い寄せられる**（2026-08-20 指摘）。
       選んだ項目はぴったり中央で止まるので、スナップの利点も無い。 */
    padding: 8px 0;
    font-size: 11.5px; letter-spacing: .05em;
  }
  .nav-track { gap: .1rem; }
  .nav a { padding: .3rem .4rem; }
  /* 中央寄せは `place0()` が**スクロール位置**で行う（選んでいる項目を中央に置くため）。
     ここで auto 余白や justify-content を使うと、位置合わせと喧嘩する。 */
  /* 長い語を短縮して、狭い端末でも4項目が1行に収まるようにする。
     収まらないと auto 余白が 0 に潰れ、左寄せ＝「中央に見えない」状態になる */
  .nav-long  { display: none; }
  .nav-short { display: inline; }
  /* 流れているときだけ、両端を薄く霞ませる（続きがあることの補助。これ単独では伝わらない） */
  .nav--scroll {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  /* 滑る赤枠は指では解除されないので出さない。現在地の枠だけが残る */
  .nav-pill { display: none; }

  .masthead-tag { font-size: 10px; letter-spacing: .14em; text-align: center; }
  /* 波紋（SVG）は幅ごとに版を差し替える。**絵を敷いている場合は隠さない** ——
     ここを素の .masthead-bg にしていたため、狭い画面で絵が丸ごと消えていた（2026-08-20） */
  .masthead-bg:not(.masthead-bg--img):not(.masthead-bg--narrow) { display: none; }
  .masthead-bg--narrow { display: block; }
  /* 絵は横幅を全部見せる。中央を空けた構図なので、切ると何も映らなくなる。
     **カテゴリの行までは届かせない** —— 太罫（題字の高さの約75%）の手前で消す。
     絵の上に細かい文字が重なると読みにくい（2026-08-20 指摘） */
  .masthead-bg--img {
    background-size: 100% auto; background-position: center 46%; opacity: .46;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 14%, #000 32%, #000 56%, transparent 72%);
            mask-image: linear-gradient(to bottom, transparent 0%, transparent 14%, #000 32%, #000 56%, transparent 72%);
  }

  /* 一面 */
  .lead { padding: .7rem; margin: -.7rem; }
  .lead h1 { font-size: clamp(1.6rem, 6.4vw, 2.1rem); }
  .dek--lead { font-size: 1.05rem; }

  /* 3本組は1列。2列だと札が細くなりすぎて図版が潰れる */
  .row3 { grid-template-columns: minmax(0, 1fr); gap: .4rem; }

  /* 小札の図版は小さく。7rem のままだと見出しが2文字ずつ折り返す */
  .card--brief a { grid-template-columns: 5rem minmax(0, 1fr); gap: .8rem; }
  .card--brief .thumb { width: 5rem; }
  .card--brief h2 { font-size: 1rem; }
  .card--brief .dek { display: none; }   /* 幅が無いところで3行の要約は効かない */

  /* 関連記事は8本のまま1列に積む */
  .related-grid { grid-template-columns: minmax(0, 1fr); }
  .related-grid .card--brief:nth-child(-n + 2) { border-top: none; }
  .related-grid .card--brief:first-child { border-top: 1px solid var(--line); }

  /* 記事 */
  .post-head h1 { font-size: clamp(1.55rem, 6.6vw, 2.1rem); }
  .prose p { line-height: 1.8; }
  .prose h2 { font-size: 1.28rem; margin-top: 2.1rem; }
  .prose > p:first-of-type::first-letter { font-size: 2.9em; }
  .quote { padding: .85rem .95rem; }
  .quote blockquote { font-size: 1.05rem; }
  .fig { margin: 1.6rem 0; }

  /* 表は指で横に送れるようにする。列を潰して読めなくするより送らせる方がよい */
  .prose table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; }
  .prose table + p { margin-top: 1.1rem; }

  /* 反応 —— 字下げの1段を詰める。3階層まで入れて画面から出ないように */
  .rx { padding: .85rem .9rem .95rem; }
  .rx-body { --step: 16px; --r: 6px; }
  .rx-item { padding-left: calc(var(--dot-x) + 8px); }
  .rx-item[data-depth="2"] { padding-left: calc(var(--dot-x) + var(--step) + 8px); }
  .rx-item[data-depth="3"] { padding-left: calc(var(--dot-x) + var(--step) * 2 + 8px); }

  .share { gap: .8rem; }
  .ad--inline, .ad--wide { min-height: 5.5rem; }
}

@media (max-width: 26rem) {
  body { font-size: 16.5px; }
  .masthead-line { font-size: 9.5px; letter-spacing: .1em; }
  .wordmark { font-size: 2.15rem; padding-top: 10px; }
  .card--brief a { grid-template-columns: 4.2rem minmax(0, 1fr); }
  .card--brief .thumb { width: 4.2rem; }
  .site-footer nav { gap: .7rem; font-size: 11px; }
}

/* 指で触る端末では、押していないのに浮いたままにならないようにする
   （ホバーは指では解除されない） */
@media (hover: none) {
  .card:hover, .lead:hover { transform: none; box-shadow: none; }
  .card:hover .art svg, .card:hover .art img,
  .lead:hover .art svg, .lead:hover .art img { transform: none; }
  .card:hover .art::after, .lead:hover .art::after { transform: scaleX(0); }
  .card--brief:hover { background: transparent; }
}

/* =========================================================================
   ページ遷移。**全面をクロスフェードしない** —— 一覧には生成SVGが 13〜26 枚あり
   （円だけで 89〜176 個）、題字は薄い絵にマスクを重ねている。画面全体の写しを2枚
   重ねて溶かすと、その塗り直しでコマが落ちる（2026-08-20 指摘）。
   題字・足元は据え置き、**本文だけ**を溶かす。速くするほど粗は目立たない。
   ========================================================================= */
::view-transition-old(root),
::view-transition-new(root) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}