/* ブログ記事の共通スタイル。正はこのファイル1つ（tools/build-article.js が <link> を張る）。
   以前は記事ごとに同じ<style>を埋めていて、テンプレ更新のたびに世代の違うCSSが混在した
   （2026-08-26時点で3世代・.figや.updの有無がばらばら）。記事側には置かないこと。 */
.art{max-width:720px;margin:0 auto}
.art .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--ink-45)}
.art h1{margin-top:14px;font-family:var(--serif);font-weight:800;letter-spacing:.04em;
  font-size:clamp(24px,4vw,40px);line-height:1.5;text-wrap:balance}
/* 題字の下に細い罫を一本。名乗りは置かず、そのまま本文へ入る */
.art h1{padding-bottom:3vh;border-bottom:1px solid var(--line)}
.art h1+p{margin-top:3.4vh}
.art h2{margin-top:5.6vh;font-family:var(--serif);font-weight:800;letter-spacing:.05em;
  font-size:clamp(17px,2.4vw,23px);line-height:1.6;
  padding-left:14px;border-left:3px solid var(--sumi)}
.art p{margin-top:2vh;font-size:14.2px;line-height:2.15;color:var(--ink-70)}
/* 記事の当時の数字に付ける現在値の注記。本文より一段引いて置く */
.art .upd{color:var(--ink-45);font-size:.92em}
.art p strong{color:var(--sumi);font-weight:700}
.art ul{margin-top:2vh;padding:0;list-style:none}
.art li{position:relative;margin-top:1.4vh;padding-left:20px;
  font-size:14.2px;line-height:2.15;color:var(--ink-70)}
/* 行頭の点は小さく。長い行が折り返しても文の頭が揃うようにする */
.art li::before{content:"";position:absolute;left:4px;top:calc(1.075em - 2px);
  width:4px;height:4px;border-radius:50%;background:var(--ink-45)}
.art li strong{color:var(--sumi);font-weight:700}
/* 図はSVGの実寸で置く。横幅いっぱいに引き伸ばすと図中の文字だけ本文より大きくなる。
   狭い画面では縮むが、縦組みで作ってあるので読める（2026-08-20 実測） */
/* 図の枠は絵の幅に合わせる（--figw は build-article.js が viewBox から入れる）。
   合わせないと、本文が広いPCでは絵だけ中央・注記だけ本文幅の左端に出て崩れて見える
   （2026-09-01 MTO様ご指摘）。--figw が無い古い記事は従来どおり本文幅で置く */
/* 図とわかるように枠で囲む（2026-09-01 MTO様ご指示）。
   以前は「地の色が同じなので囲うと貼り紙のように浮く」として枠なしにしていた。
   その懸念は、罫線だけで囲わず地色を一段変える（--washi-2）ことで避けている。
   幅は「絵の幅＋余白」。--figw が無い回（PC用の図を持つ回・古い記事）は本文幅いっぱい */
.art .fig{margin:5vh auto 0;width:min(calc(var(--figw,682px) + 38px),100%);
  padding:20px 18px 16px;border:1px solid var(--line);background:var(--washi-2)}
.art .fig img{display:block;max-width:100%;height:auto;margin:0 auto}
/* 注記は枠の中に、細い罫で絵と分けて置く。図と注記でひとつの物に見せる */
.art .fig figcaption{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.9;color:var(--ink-45);text-align:left}
/* PC用の図を持つ回（build-article.js が <名前>-wide.svg を見つけたとき）。
   本文と同じ幅いっぱいに置く。縦横比が画面で変わるので、寸法ではなく比で場所を確保する */
.art .fig.wide{width:100%}
.art .fig.wide img{width:100%;height:auto;aspect-ratio:var(--ar-n)}
@media (min-width:740px){ .art .fig.wide img{aspect-ratio:var(--ar-w)} }
.art .sign{margin-top:7vh;padding:20px 22px;border:1px solid var(--line);
  background:rgba(255,255,255,.5);font-size:12.8px;line-height:2;color:var(--ink-70)}
.art .back{display:inline-block;margin-top:4vh;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;color:var(--ai);text-decoration:none}
.art .back:hover{text-decoration:underline}
/* 書き手の所属。売り込まず、名刺の裏くらいの静けさで置く */
.art .who{margin-top:4vh;padding-top:2.4vh;border-top:1px solid var(--line);
  font-size:12px;line-height:2;color:var(--ink-45)}
.art .who a{color:var(--ink-70)}