@charset "utf-8";
/* ============================================================================
   学び直し帳面 ── デザインシステム
   引いたカード：C-6（ベージュ紙面＋藤）／ F-3（游ゴシック体 Pr6N 型）／
                 L-8（リスト型：ナビを目次にする）／
                 M-13 線が引かれる・M-15 角を折る・M-16 留まる ／
                 G-7（実寸の帳票を figure として起こす）／ V-9（帳票見開き型）
   値は既出台帳から写していない。今回ゼロから決めた。
   ------------------------------------------------------------------------
   有彩色（HSLのS≧25%）は 色相 285度 ただ1つ。
   地・文字・罫はすべて S<25% の無彩に寄せた温色で、有彩色として数えない。
   ------------------------------------------------------------------------
   動きの語彙（自動発火）は3種：
     ① 線が引かれる（stroke-dashoffset）
     ② 角を折る（clip-path polygon の左上だけを動かす）
     ③ 留まる（sticky ＋ 章見出しの状態変化）
   不透明度と色だけの変化は語彙に数えない（門番 P-12）。
   数えない状態変化：読み飛ばしリンクの表示（.skip:focus の top）、
   押せるものの色と影（.btn:hover）、入力の輪郭（:focus-visible）。
   いずれも操作したときだけの合図で、読み物としての動きではない。
   ------------------------------------------------------------------------
   背景の線画（.scn）＝この帳面そのものを線で起こした絵。全ページの上・中・下に敷く。
   絵の中に文字は1つも置かない（読ませるものではないため）。
   線は語彙①のまま引かれる。stroke-dashoffset は継承する性質なので、
   包む箱に1本かけるだけで絵の中の線が全部いっしょに引かれる（pathLength="100"で長さを揃えた）。
   語彙①を使う場所を増やした：背景の線画／見出しの下の罫（.hrule）／読書プログレス（.prog、B-14）。
   語彙②を使う場所も増やした：注記の枠・広告枠・記事の入口（[data-rv]）。
   @keyframes の総数は3本のまま（fold-in／fold-in-s／draw-in）。語彙は増えていない。
   ========================================================================= */

/* ── 1. トークン ─────────────────────────────────────────────────────── */
:root{
  /* 無彩の階段5段（P-01）。暗部を細かく、明部を粗く。 */
  --n-1:#191713;   /* いちばん濃い（大見出し） */
  --n-2:#2C2924;   /* 本文 */
  --n-3:#57524A;   /* 補足 */
  --n-4:#8A8378;   /* 注記 */
  --n-5:#BDB6AA;   /* 罫・輪郭 */

  /* 面（章の地）3段。すべて S<25%。 */
  --face-1:#F0EEE8;
  --face-2:#E6E2D9;
  --face-3:#24211C;

  /* 有彩色は色相285度の1色相だけ（R-03） */
  --accent:#824696;        /* H285 S36.4% L43.1% */
  --accent-deep:#5E3070;
  --accent-tint:#EDE4F1;   /* 同一色相の弱ペア。面積は常に画面の10%未満に留める */

  /* 影と輪郭の色を、純黒ではなく紙の墨から作る */
  --tint-rgb:25,23,19;
  --paper-rgb:240,238,232;

  /* 透明度は6段に限定（P-02）。影・地の層・図の濃さも、全部ここから取る。
     生の端数（.045 や .07）は1つも書かない。 */
  --a-1:.06; --a-2:.12; --a-3:.22; --a-4:.42; --a-5:.68; --a-6:.90;

  /* 影は4段＋輪郭（P-13）。押せるものにだけ付ける（A-06）。 */
  --shadow-rest:
     0 0 0 1px rgba(var(--tint-rgb),var(--a-1)),
     0 1px 1px rgba(var(--tint-rgb),var(--a-1)),
     0 6px 14px -6px rgba(var(--tint-rgb),var(--a-2)),
     0 20px 38px -22px rgba(var(--tint-rgb),var(--a-3));
  --shadow-lift:
     0 0 0 1px rgba(var(--tint-rgb),var(--a-2)),
     0 2px 3px rgba(var(--tint-rgb),var(--a-1)),
     0 12px 26px -10px rgba(var(--tint-rgb),var(--a-3)),
     0 34px 58px -30px rgba(var(--tint-rgb),var(--a-4));

  /* 操作できる要素の色は、ブランド色と別の名前空間にする（P-19） */
  --form-face:#F6F5F2;   /* S=18.2%。白に寄せすぎると彩度が跳ねる */
  --form-ink:#221F1A;
  --form-line:#C6BFB2;
  --form-focus:#6A3C7C;
  --form-ghost:#7C766B;

  /* 書体。欧文→和文→総称の順（P-04） */
  --font-latin:"Fraunces",Georgia,"Times New Roman";
  --font-jp:"Yu Gothic Pr6N","YuGothic","Yu Gothic Medium","Yu Gothic",
            "BIZ UDPGothic","Hiragino Sans","ヒラギノ角ゴシック";
  --font-num:"Num Slot","Roboto Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --font-head:var(--font-latin),var(--font-jp),sans-serif;
  --font-body:var(--font-latin),var(--font-jp),sans-serif;

  /* 級数。見出しは最小:最大＝1:1.5 で全段そろえる（P-09） */
  --t-display:clamp(2.375rem,1.10rem + 5.44vw,3.5625rem);
  --t-h1     :clamp(1.875rem,1.06rem + 3.48vw,2.8125rem);
  --t-h2     :clamp(1.4375rem,0.94rem + 2.13vw,2.15625rem);
  --t-h3     :clamp(1.1875rem,0.94rem + 1.05vw,1.78125rem);
  --t-lede   :clamp(1.125rem,0.98rem + 0.62vw,1.6875rem);
  /* 本文帯は、見本の「1.02〜1.09 の細かい刻み」を持ち帰った段 */
  --t-body   :clamp(1.0625rem,1.03rem + 0.16vw,1.1875rem);
  --t-small  :0.9375rem;
  --t-note   :0.875rem;
  --t-label  :0.8125rem;

  /* 行間は6段。1.06（見出し）と 1.88（本文）で二極化させる（R-05／P-07）。
     直書きの line-height は置かず、必ずこの6本から取る。 */
  --lh-display:1.06;
  --lh-head:1.14;
  --lh-ui:1.40;
  --lh-lede:1.62;
  --lh-read:1.68;   /* 表・箇条書き・図の説明のような、本文より少し詰めた読み物 */
  --lh-body:1.88;
  --lh-note:1.72;

  /* 字間はサイズ連動（P-08）。40px以上は必ず負（R-06）。 */
  --ls-display:-.034em;
  --ls-h1:-.028em;
  --ls-h2:-.022em;
  --ls-h3:-.012em;
  --ls-lede:.004em;
  --ls-body:.016em;
  --ls-label:.16em;

  /* 余白は4px刻みの8段（見本の実測：4px刻みが71%を説明した） */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:80px;

  /* 本文カラム。見本は1440pxで690px。 */
  --col:41.5rem;      /* 664px */
  --col-wide:60rem;   /* 960px。P-10 の上限 980px の内側 */

  /* イージングは2本だけ（P-11）。ブラウザ既定は1つも使わない（R-04）。 */
  --e:cubic-bezier(.22,.61,.30,1);
  --e-back:cubic-bezier(.55,.06,.68,.19);
  /* スクロール進捗の等倍写像だけは別枠（P-11 の例外・運用）。
     時間の演出ではなく座標変換なので、カーブは2本のままと数える。 */
  --e-map:cubic-bezier(0,0,1,1);
  --d-color:.18s;   /* 色 */
  --d-move:.34s;    /* 移動 */
  --d-face:.68s;    /* 面・線 */

  --stable-lvh:1vh;
  --rule:1px solid rgba(var(--tint-rgb),var(--a-2));
}
@supports (height:1lvh){ :root{ --stable-lvh:1lvh; } }

/* 数字だけを等幅の欧文に差し替える合成ファミリー（P-05／R-12） */
@font-face{
  font-family:"Num Slot";
  src:local("Roboto Mono"),local("RobotoMono-Regular"),local("SFMono-Regular"),local("Menlo");
  unicode-range:U+0030-0039,U+002C,U+002E,U+002F,U+0025,U+00A5,U+FF05;
  font-display:swap;
}

/* ── 暗いほうの配色 ─────────────────────────────────────────────────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --n-1:#F1EFEA; --n-2:#DCD7CE; --n-3:#ABA49A; --n-4:#7C766C; --n-5:#4A453D;
    --face-1:#17150F; --face-2:#1F1C16; --face-3:#EDEAE3;
    --accent:#C79BDA; --accent-deep:#E0C6EC; --accent-tint:#2B2033;
    --tint-rgb:0,0,0; --paper-rgb:23,21,15;
    --a-1:.10; --a-2:.18; --a-3:.30; --a-4:.52; --a-5:.76; --a-6:.94; --a-6:.94;
    --form-face:#221F19; --form-ink:#EFECE5; --form-line:#4E4840;
    --form-focus:#CBA4DC; --form-ghost:#9B958B;
  }
}
:root[data-theme="dark"]{
  --n-1:#F1EFEA; --n-2:#DCD7CE; --n-3:#ABA49A; --n-4:#7C766C; --n-5:#4A453D;
  --face-1:#17150F; --face-2:#1F1C16; --face-3:#EDEAE3;
  --accent:#C79BDA; --accent-deep:#E0C6EC; --accent-tint:#2B2033;
  --tint-rgb:0,0,0; --paper-rgb:23,21,15;
  --a-1:.10; --a-2:.18; --a-3:.30; --a-4:.52; --a-5:.76; --a-6:.94;
  --form-face:#221F19; --form-ink:#EFECE5; --form-line:#4E4840;
  --form-focus:#CBA4DC; --form-ghost:#9B958B;
}

/* ── 2. 土台 ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
/* 章の面を左右へ伸ばす（P-16）ので、その分は切り落とす。
   overflow:clip はスクロール枠を作らないため、sticky（M-16）を壊さない。 */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;
  background:var(--face-1);
  color:var(--n-2);
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  font-feature-settings:"palt" 1;     /* 約物の詰め（P-06） */
  font-optical-sizing:auto;           /* Fraunces の光学サイズ（B-09） */
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg{max-width:100%;height:auto;display:block;}
a{color:inherit;}
::selection{background:var(--accent-tint);color:var(--n-1);}

.skip{
  position:absolute;left:var(--s-4);top:calc(var(--s-4) * -6);
  z-index:60;padding:var(--s-2) var(--s-4);
  background:var(--form-face);color:var(--form-ink);
  border:1px solid var(--form-line);
  transition:top var(--d-move) var(--e);
}
.skip:focus{top:var(--s-4);}
:focus-visible{outline:2px solid var(--form-focus);outline-offset:3px;}

/* ── 3. 骨格：非対称グリッド（R-02） ──────────────────────────────────── */
.frame{
  display:grid;
  grid-template-columns:
     minmax(var(--s-4),1fr)
     minmax(0,var(--col))
     minmax(var(--s-4),.58fr);
  column-gap:var(--s-4);
}
.frame > *{grid-column:2;}
.frame > .bleed-l{grid-column:1 / 3;}
.frame > .bleed-r{grid-column:2 / 4;}
.frame--wide{grid-template-columns:
     minmax(var(--s-4),1fr)
     minmax(0,var(--col-wide))
     minmax(var(--s-4),.58fr);}

/* 章＝地の切り替え（P-16）。ベタ塗りにせず、層と目盛りを重ねる（A-07）。 */
.band{position:relative;padding-block:var(--s-8);}
.band--paper{
  background-color:var(--face-1);
  background-image:
    repeating-linear-gradient(180deg,
      rgba(var(--tint-rgb),var(--a-1)) 0 1px, transparent 1px 32px),
    radial-gradient(120% 70% at 12% 0%, rgba(var(--tint-rgb),var(--a-1)), transparent 62%);
}
.band--tint{
  background-color:var(--face-2);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(var(--tint-rgb),var(--a-1)) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, rgba(var(--tint-rgb),var(--a-1)), transparent 38%);
}
.band--deep{
  background-color:var(--face-3);
  color:var(--face-1);
  background-image:
    repeating-linear-gradient(180deg,
      rgba(var(--paper-rgb),var(--a-1)) 0 1px, transparent 1px 40px),
    radial-gradient(90% 60% at 88% 6%, rgba(var(--paper-rgb),var(--a-1)), transparent 60%);
}
.band--deep .t-h2,.band--deep .t-h3,.band--deep .t-display{color:var(--face-1);}
.band--deep .t-body{color:rgba(var(--paper-rgb),var(--a-5));}
.band--deep .eyebrow{color:rgba(var(--paper-rgb),var(--a-4));}

/* ── 4. 文字の役 ─────────────────────────────────────────────────────── */
.t-display{
  font-family:var(--font-head);font-weight:600;
  font-size:var(--t-display);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);color:var(--n-1);
  margin:0;text-wrap:pretty;
}
.t-h1{
  font-family:var(--font-head);font-weight:600;
  font-size:var(--t-h1);line-height:var(--lh-head);
  letter-spacing:var(--ls-h1);color:var(--n-1);margin:0;text-wrap:pretty;
}
.t-h2{
  font-family:var(--font-head);font-weight:600;
  font-size:var(--t-h2);line-height:var(--lh-head);
  letter-spacing:var(--ls-h2);color:var(--n-1);margin:0;text-wrap:pretty;
}
.t-h3{
  font-family:var(--font-head);font-weight:600;
  font-size:var(--t-h3);line-height:var(--lh-head);
  letter-spacing:var(--ls-h3);color:var(--n-1);margin:0;text-wrap:pretty;
}
.t-lede{
  font-size:var(--t-lede);line-height:var(--lh-lede);
  letter-spacing:var(--ls-lede);color:var(--n-2);margin:0;
}
.t-body{
  font-size:var(--t-body);line-height:var(--lh-body);
  letter-spacing:var(--ls-body);color:var(--n-2);margin:0;
}
.t-small{font-size:var(--t-small);line-height:var(--lh-ui);color:var(--n-3);margin:0;}
.eyebrow{
  font-family:var(--font-num);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  line-height:var(--lh-ui);color:var(--n-4);margin:0;
}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
strong{font-weight:700;color:var(--n-1);}
ruby rt{font-size:.45em;letter-spacing:0;font-weight:400;color:var(--n-4);}

/* 見出しの折り返しは文節でロックする（P-21／R-19） */
.w{white-space:nowrap;}

/* ★display は指定しない。
   .frame と同じ要素に付くことがあり、display:flex が grid を上書きして
   本文カラムの上限（P-10）が丸ごと効かなくなっていた。余白だけを持たせる。 */
.stack > * + *{margin-top:var(--s-5);}          /* 24px　既定 */
.stack > .eyebrow + *{margin-top:var(--s-3);}   /* 12px　小見出しの直後は詰める */
.stack > .t-h2 + *{margin-top:var(--s-4);}      /* 16px　見出しと本文 */
.stack > * + .cl{margin-top:var(--s-4);}        /* 16px　箇条書き */
.stack > * + .fig{margin-top:var(--s-6);}       /* 32px　図の前は開ける */
.stack > * + .notes{margin-top:var(--s-6);}     /* 32px　注記の前 */
.stack > * + .tblwrap{margin-top:var(--s-6);}   /* 32px　表の前 */
.stack > * + .lane{margin-top:var(--s-7);}      /* 48px　横に流れる列の前 */

/* ── 5. 注記・出典・広告開示（B-12） ───────────────────────────────────── */
.note{
  font-size:var(--t-note);line-height:var(--lh-note);
  color:var(--n-3);margin:0;
}
.notes{
  border-left:3px solid var(--accent);
  padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background:linear-gradient(90deg, rgba(var(--tint-rgb),var(--a-1)), transparent 78%);
}
.notes > * + *{margin-top:var(--s-2);}
.notes__t{
  font-size:var(--t-label);letter-spacing:var(--ls-label);
  font-family:var(--font-num);color:var(--n-3);
  text-transform:uppercase;margin:0;line-height:var(--lh-ui);
}
.disclose{
  display:flex;gap:var(--s-3);align-items:flex-start;
  padding:var(--s-3) var(--s-4);
  background:color-mix(in srgb, var(--n-5) 34%, var(--face-1));
  border-left:3px solid var(--accent);
  color:var(--n-1);
  font-size:var(--t-note);line-height:var(--lh-note);
}
.disclose__mark{
  flex:none;font-family:var(--font-num);font-size:var(--t-label);
  letter-spacing:var(--ls-label);padding:2px var(--s-2);
  border:1px solid var(--accent);color:var(--accent-deep);
  line-height:var(--lh-ui);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .disclose__mark{color:var(--accent-deep);}
}

/* ── 6. 広告を貼る枠（S-11） ──────────────────────────────────────────── */
.adslot{
  border:1px solid var(--n-5);
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--tint-rgb),var(--a-1)) 0 2px, transparent 2px 12px);
  padding:var(--s-5) var(--s-4);
  text-align:center;
}
.adslot__t{
  font-family:var(--font-num);font-size:var(--t-label);
  letter-spacing:var(--ls-label);color:var(--n-3);
  margin:0 0 var(--s-2);line-height:var(--lh-ui);
}
.adslot__b{font-size:var(--t-note);line-height:var(--lh-note);color:var(--n-3);margin:0;}

/* ── 7. リスト型のナビ＝目次（L-8） ───────────────────────────────────── */
/* ナビは固定しない。章見出しの sticky（M-16）と上端を取り合わないため。 */
.topbar{
  position:relative;z-index:10;
  background:var(--face-1);
  border-bottom:var(--rule);
}
.topbar__in{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;row-gap:var(--s-3);column-gap:var(--s-5);
  padding:var(--s-3) var(--s-4);
}
.topbar__in > .navrow{grid-column:1 / -1;}
@media (min-width:760px){
  .topbar__in{grid-template-columns:minmax(0,1fr) auto auto;}
  .topbar__in > .navrow{grid-column:2;grid-row:1;}
  .topbar__sw{grid-column:3;grid-row:1;}
}
.brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;}
.brand__mk{flex:none;}
.brand__n{
  font-family:var(--font-head);font-weight:600;font-size:1.0625rem;
  letter-spacing:-.01em;line-height:var(--lh-ui);color:var(--n-1);
}
.brand__s{
  font-family:var(--font-num);font-size:var(--t-label);
  letter-spacing:var(--ls-label);color:var(--n-4);line-height:var(--lh-ui);
}
.navlink{
  font-size:var(--t-small);color:var(--n-3);text-decoration:none;
  padding:var(--s-2) 0;line-height:var(--lh-ui);
  border-bottom:1px solid transparent;
  transition:color var(--d-color) var(--e),border-color var(--d-color) var(--e);
}
.navlink:hover{color:var(--n-1);border-bottom-color:var(--form-focus);}
.navrow{
  display:flex;gap:var(--s-4);align-items:center;flex-wrap:wrap;
  justify-content:flex-start;
}
@media (min-width:760px){ .navrow{justify-content:flex-end;} }


/* 目次そのものであるナビ（見出し＋3行の説明） */
.idx{display:grid;gap:0;border-top:var(--rule);}
.idx__i{
  display:grid;grid-template-columns:3.25rem minmax(0,1fr);
  gap:var(--s-4);
  padding:var(--s-5) 0;
  border-bottom:var(--rule);
  text-decoration:none;color:inherit;
  transition:background-color var(--d-color) var(--e);
}
.idx__i:hover{background-color:rgba(var(--tint-rgb),var(--a-1));}
.idx__n{
  font-family:var(--font-num);font-size:var(--t-small);
  color:var(--form-focus);line-height:var(--lh-ui);letter-spacing:.02em;
}
.idx__h{
  font-family:var(--font-head);font-weight:600;
  font-size:var(--t-h3);line-height:var(--lh-head);
  letter-spacing:var(--ls-h3);color:var(--n-1);margin:0 0 var(--s-2);
}
.idx__d{font-size:var(--t-small);line-height:var(--lh-read);color:var(--n-3);margin:0;}
.idx__m{
  margin-top:var(--s-3);display:flex;gap:var(--s-3);flex-wrap:wrap;
  font-family:var(--font-num);font-size:var(--t-label);
  letter-spacing:.06em;color:var(--n-4);line-height:var(--lh-ui);
}
@media (min-width:900px){
  .idx__i{grid-template-columns:3.75rem minmax(0,25rem) minmax(0,1fr);}
  .idx__d{margin-top:0;}
  .idx__body{display:contents;}
}

/* ── 8. 記事の骨格：本文列＋章の柱（sticky＝M-16「留まる」） ───────────── */
.art{
  display:grid;
  grid-template-columns:minmax(var(--s-4),1fr) minmax(0,var(--col)) minmax(var(--s-4),.58fr);
  column-gap:var(--s-4);
}
.art > *{grid-column:2;}
@media (min-width:1080px){
  .art{
    grid-template-columns:
      minmax(var(--s-5),1fr)
      minmax(0,13.5rem)
      minmax(0,var(--col))
      minmax(var(--s-5),.72fr);
    column-gap:var(--s-6);
  }
  .art > *{grid-column:3;}
  .art > .rail{grid-column:2;grid-row:1 / span 999;}
}
.rail{display:none;}
@media (min-width:1080px){
  .rail{
    display:block;position:sticky;top:var(--s-8);
    align-self:start;padding-top:var(--s-2);
  }
}
.rail__t{
  font-family:var(--font-num);font-size:var(--t-label);
  letter-spacing:var(--ls-label);color:var(--n-4);
  margin:0 0 var(--s-3);line-height:var(--lh-ui);
}
.rail__l{list-style:none;margin:0;padding:0;border-left:1px solid var(--n-5);}
.rail__l li{margin:0;}
.rail__a{
  display:block;padding:var(--s-2) 0 var(--s-2) var(--s-3);
  margin-left:-1px;border-left:2px solid transparent;
  font-size:var(--t-note);line-height:var(--lh-ui);color:var(--n-4);
  text-decoration:none;
  transition:color var(--d-color) var(--e),border-color var(--d-color) var(--e);
}
.rail__a:hover{color:var(--n-2);}
.rail__a[aria-current="true"]{color:var(--form-ink);border-left-color:var(--form-focus);}

/* ── 9. 図版（G-7 実寸の帳票を figure として起こす） ───────────────────── */
.fig{margin:0;}
.fig__box{
  position:relative;
  background:var(--form-face);
  border:1px solid var(--n-5);
  padding:var(--s-5) var(--s-4);
}
.fig__box::before{
  content:"";position:absolute;left:0;top:0;width:22px;height:22px;
  background:linear-gradient(135deg, var(--n-5), transparent 62%);
  pointer-events:none;
}
/* 図版は本文より狭くする。広い画面で図の文字だけ大きくならないようにするため
   （viewBox 620 の図を 480px で描くと、fx-2 の 28 は画面上 21.7px になる）。 */
@media (min-width:760px){
  .fig__box{max-width:32rem;}
}
.fig__cap{
  font-size:var(--t-small);line-height:var(--lh-read);color:var(--n-3);
  margin-top:var(--s-3);
}
.fig__note{
  font-size:var(--t-note);line-height:var(--lh-note);color:var(--n-4);
  margin-top:var(--s-2);
}
.fig svg{width:100%;height:auto;}
/* 図の文字の大きさの決め方（実測しなおした値）
   375px幅では、図の枠の外側が 311px。内側は左右の余白 16px×2 と
   枠線 1px×2 を引いた 277px。viewBox の幅は 620 なので、
   描かれる大きさは 277 ÷ 620 ＝ 0.4468 倍になる。
   和文の下限を 13px に置くと、viewBox 側の下限は 13 ÷ 0.4468 ＝ 29.1 → 30。 */
.fig text{font-family:var(--font-num);}
.fig .fx-1{font-size:38px;}   /* 画面では 16.98px（375px幅） */
.fig .fx-2{font-size:32px;}   /* 画面では 14.30px */
.fig .fx-3{font-size:30px;}   /* 画面では 13.40px。ここが下限 */
/* 図の濃さも、透明度の6段からしか取らない（P-02） */
.fig .o-3{opacity:var(--a-3);}
.fig .o-4{opacity:var(--a-4);}
.fig .o-5{opacity:var(--a-5);}
.fig .o-6{opacity:var(--a-6);}

/* 端を溶かす（P-15／R-11 は -webkit- を必ず併記） */
.lane{
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#111 40px,#111 calc(100% - 40px),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#111 40px,#111 calc(100% - 40px),transparent 100%);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  padding-inline:40px;
}
.lane__row{display:flex;gap:var(--s-4);width:max-content;}
.lane__c{width:16.5rem;flex:none;scroll-snap-align:center;}

/* ── 10. カード・表 ──────────────────────────────────────────────────── */
.card{
  border:1px solid var(--n-5);
  background:linear-gradient(180deg, rgba(var(--paper-rgb),var(--a-3)), transparent 40%);
  padding:var(--s-5) var(--s-4);
}
.card__h{
  font-family:var(--font-head);font-weight:600;font-size:1.0625rem;
  line-height:var(--lh-head);letter-spacing:-.008em;color:var(--n-1);
  margin:0 0 var(--s-3);
}
.card__b{font-size:var(--t-small);line-height:var(--lh-note);color:var(--n-3);margin:0;}

.tbl{width:100%;border-collapse:collapse;font-size:var(--t-small);}
.tbl caption{
  text-align:left;font-size:var(--t-note);color:var(--n-4);
  line-height:var(--lh-note);padding-bottom:var(--s-3);
}
.tbl th,.tbl td{
  text-align:left;padding:var(--s-3) var(--s-3);
  border-bottom:var(--rule);line-height:var(--lh-read);vertical-align:top;
}
.tbl thead th{
  font-family:var(--font-num);font-size:var(--t-label);
  letter-spacing:.08em;color:var(--n-4);font-weight:500;
  border-bottom:1px solid var(--n-4);
}
.tbl td.n{font-family:var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap;}
.tblwrap{
  overflow-x:auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#111 16px,#111 calc(100% - 16px),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#111 16px,#111 calc(100% - 16px),transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  padding-inline:16px;
}

/* 箇条書き */
.cl{list-style:none;margin:0;padding:0;}
.cl__item{
  display:grid;grid-template-columns:1.5rem minmax(0,1fr);
  gap:var(--s-3);padding:var(--s-3) 0;border-bottom:var(--rule);
}
.cl__item p{margin:0;font-size:var(--t-small);line-height:var(--lh-note);color:var(--n-3);}
.cl__k{
  font-family:var(--font-num);font-size:var(--t-note);color:var(--accent);
  line-height:var(--lh-note);
}

/* 開いて畳む（この案では使わないが、質問の一覧に使う） */
.qa{border-top:var(--rule);}
.qa__i{border-bottom:var(--rule);}
.qa__s{
  display:grid;grid-template-columns:minmax(0,1fr) 1.5rem;gap:var(--s-3);
  align-items:center;cursor:pointer;list-style:none;
  padding:var(--s-4) 0;font-size:var(--t-small);line-height:var(--lh-read);color:var(--n-1);
}
.qa__s::-webkit-details-marker{display:none;}
.qa__i p{margin:0 0 var(--s-4);font-size:var(--t-small);line-height:var(--lh-note);color:var(--n-3);}

/* 押せるもの＝影がある（A-06） */
.btn{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--font-body);font-size:var(--t-small);line-height:var(--lh-ui);
  padding:var(--s-3) var(--s-5);
  background:var(--form-face);color:var(--form-ink);
  border:0;border-radius:2px;text-decoration:none;cursor:pointer;
  box-shadow:var(--shadow-rest);
  transition:box-shadow var(--d-move) var(--e),color var(--d-color) var(--e);
}
.btn:hover{box-shadow:var(--shadow-lift);color:var(--form-focus);}
.btn .num{letter-spacing:.02em;}

/* ── 11. ファーストビュー（V-9 帳票見開き型） ─────────────────────────── */
.fv{
  display:grid;gap:var(--s-6);
  padding-block:var(--s-4) var(--s-8);
  /* 最初の1画面が、画面の7割より低くならないようにする。
     vh ではなく --stable-lvh を使うのは、スマホでアドレスバーが伸縮したときに
     高さがガタつかないようにするため（P-14／R-09）。 */
  min-height:calc(70 * var(--stable-lvh));
}
@media (min-width:960px){
  .fv{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
      align-items:center;gap:var(--s-8);}
}
.fv__sub{
  display:flex;gap:var(--s-3);align-items:baseline;flex-wrap:wrap;
  margin-bottom:var(--s-4);
}
.fv__rule{margin-top:var(--s-5);}

/* ── 12. 動きの語彙 ───────────────────────────────────────────────────
   自動で走るのは3種類だけ。
     ① 線が引かれる（stroke-dashoffset）
     ② 角を折る（clip-path polygon の左上）
     ③ 留まる（sticky）
   不透明度は1つも動かさない。色だけの状態変化は語彙に数えない（門番 P-12）。

   ★ここは一度作り直している。
     最初は JavaScript の IntersectionObserver で「画面に入ったら出す」形にしていたが、
     速くスクロールしたときに監視が回らず、本文が隠れたままになることが実測で分かった
     （scripts/はかる.py よむ で 12個中10個が隠れたまま）。
     いまは CSS のスクロール連動だけで動かし、**要素を透明にしない**。
     対応していないブラウザ・JavaScript が動かない相手には、
     最初から「出た状態」（角が折れ、線が引かれた状態）が見えている。 */

/* 到達形＝ふつうの状態。ここが「出た状態」。 */
.fig__box{
  clip-path:polygon(22px 0,100% 0,100% 100%,0 100%,0 22px);
}
.card{
  clip-path:polygon(18px 0,100% 0,100% 100%,0 100%,0 18px);
}

@supports (animation-timeline:view()){
  /* ② 角を折る（M-15）── スクロールの位置がそのまま折れ具合になる */
  [data-rv]{
    clip-path:polygon(22px 0,100% 0,100% 100%,0 100%,0 22px);
    animation:fold-in var(--e-map) both;
    animation-timeline:view();
    animation-range:entry 8% entry 94%;
  }
  .card[data-rv]{animation-name:fold-in-s;}
  @keyframes fold-in{
    from{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
    to  {clip-path:polygon(22px 0,100% 0,100% 100%,0 100%,0 22px);}
  }
  @keyframes fold-in-s{
    from{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
    to  {clip-path:polygon(18px 0,100% 0,100% 100%,0 100%,0 18px);}
  }

  /* ① 線が引かれる（M-13）── 図の線が、読む位置に合わせて引かれる */
  [data-draw] path,
  [data-draw] line,
  [data-draw] polyline{
    stroke-dasharray:var(--len,1200);
    animation:draw-in var(--e-map) both;
    animation-timeline:view();
    animation-range:entry 14% cover 34%;
  }
  @keyframes draw-in{
    from{stroke-dashoffset:var(--len,1200);}
    to  {stroke-dashoffset:0;}
  }
}

/* ③ 留まる（M-16）＝ 章見出しが上に残り、いま読んでいる章を示す */
.chap{
  position:sticky;top:0;z-index:20;
  scroll-margin-top:var(--s-8);
  display:flex;gap:var(--s-3);align-items:baseline;
  padding:var(--s-3) 0 var(--s-2);
  background:var(--face-1);
  transition:color var(--d-color) var(--e);
}
/* 留まっている見出しの下は、地に溶かして切れ目を作らない */
.chap::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:var(--s-4);
  background:linear-gradient(180deg, var(--face-1),
             color-mix(in srgb, var(--face-1) 0%, transparent));
  pointer-events:none;
}
.chap__n{font-family:var(--font-num);font-size:var(--t-label);
  letter-spacing:var(--ls-label);color:var(--accent);line-height:var(--lh-ui);}
.chap__t{font-family:var(--font-head);font-weight:600;font-size:var(--t-small);
  letter-spacing:-.006em;line-height:var(--lh-ui);color:var(--n-3);}

/* 動きを止める（R-10）。止めたときは、全部「出た状態」で置く。 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    transition-duration:.001s !important;
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
  }
  [data-rv]{animation:none;}
  [data-draw] path,
  [data-draw] line,
  [data-draw] polyline{animation:none;stroke-dasharray:none;stroke-dashoffset:0;}
}

/* ── 章＝地の切り替え（P-16）────────────────────────────────────
   記事ページも、章の境目で地の色が変わるようにする。
   章の箱を全幅まで広げず、後ろに敷く面だけを左右へ伸ばす。
   body に overflow-x:hidden があるので、横スクロールは増えない。 */
.chapter{position:relative;isolation:isolate;padding-block:var(--s-5) var(--s-6);}
.chapter::before{
  content:"";position:absolute;z-index:-1;
  top:0;bottom:0;left:-100vw;right:-100vw;
  background-color:var(--face-1);
  background-image:
    repeating-linear-gradient(180deg,
      rgba(var(--tint-rgb),var(--a-1)) 0 1px, transparent 1px 32px),
    radial-gradient(120% 70% at 12% 0%, rgba(var(--tint-rgb),var(--a-1)), transparent 62%);
}
.chapter--b::before{
  background-color:var(--face-2);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(var(--tint-rgb),var(--a-1)) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, rgba(var(--tint-rgb),var(--a-1)), transparent 38%);
}
.chapter--b .chap{background:var(--face-2);}
.chapter--b .chap::after{
  background:linear-gradient(180deg, var(--face-2),
             color-mix(in srgb, var(--face-2) 0%, transparent));
}
.chapter--b .fig__box{background:var(--face-1);}

/* 見出しへ飛んだとき、留まっている章見出しの下に潜らせない */
.sec{scroll-margin-top:calc(var(--s-8) + var(--s-4));}

/* ── 13. フッター ────────────────────────────────────────────────────── */
.foot{border-top:var(--rule);padding-block:var(--s-7) var(--s-7);}
.foot__grid{display:grid;gap:var(--s-6);}
@media (min-width:760px){
  .foot__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);}
}
.foot__t{
  font-family:var(--font-num);font-size:var(--t-label);
  letter-spacing:var(--ls-label);color:var(--n-4);
  margin:0 0 var(--s-3);line-height:var(--lh-ui);
}
.foot__l{list-style:none;margin:0;padding:0;}
.foot__l li + li{margin-top:var(--s-2);}
.foot__l a{font-size:var(--t-small);color:var(--n-3);text-decoration:none;
  line-height:var(--lh-read);
  transition:color var(--d-color) var(--e);}
.foot__l a:hover{color:var(--n-1);}

/* 未記入であることを隠さない（S-10） */
.blank{
  font-family:var(--font-num);font-size:1em;
  padding:1px var(--s-2);border:1px solid var(--accent);
  color:var(--accent-deep);
  background:color-mix(in srgb, var(--n-5) 22%, var(--face-1));
}

/* ── 14. 印刷（B-15） ────────────────────────────────────────────────── */
@media print{
  .scn,.prog{display:none !important;}
  .topbar,.rail,.adslot,.skip{display:none !important;}
  body{background:none;color:var(--n-1);font-size:10.5pt;}
  .band{padding-block:12pt;background:none;}
  .card,.fig__box,.notes{break-inside:avoid;}
  .t-h2,.t-h3{break-after:avoid;}
  html.js [data-rv]{opacity:1 !important;transform:none !important;}
}


/* === scenery+motion v1 === */
/* ── 背景の線画（scenery）と、増やした動く箇所 ───────────────────────
   背景に敷くのは、このサイトの主題そのものを線で起こした絵。
   飾りではなく「いま何の話をしている場所か」を示す（R-17 の装飾ではない）。
   絵の中に文字は1つも置いていない。読ませるものではないため。
   線の色は不透明度を使わず、地の色と混ぜて作る（P-02 を汚さない）。
   動きは、このサイトが持っている語彙のままで、新しい語彙を足していない。 */
main{position:relative;}
main,.band,.foot{isolation:isolate;}
.foot{position:relative;overflow:clip;}
.scn{
  --scn-ground:var(--face-1);
  position:absolute;z-index:-1;overflow:clip;
  /* 章の箱は本文の幅しかない。地を敷く ::before と同じやり方で左右へ伸ばす。
     html に overflow-x:clip があるので、横のスクロール量は増えない。 */
  top:0;bottom:0;left:-100vw;right:-100vw;
  pointer-events:none;display:grid;justify-items:center;
  color:color-mix(in srgb, var(--n-4) 70%, var(--scn-ground));
}
/* 記事の骨格が grid のときは、絵を全部の列にまたがらせる */
.art > .scn{grid-column:1 / -1;}
.sec--b .scn,.chapter--b .scn,.band--tint .scn{--scn-ground:var(--face-2);}
.band--deep .scn{--scn-ground:var(--face-3);}
.scn--top{align-items:start;}
.scn--mid{align-items:center;}
.scn--foot{align-items:end;}
.scn__i{width:212vw;line-height:0;}
@media (min-width:760px){ .scn__i{width:min(1560px,112vw);} }
.scn svg{width:100%;height:auto;display:block;}
.scn .ln{fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.scn .ln--b{stroke-width:4;}
.scn .ln--f{stroke:color-mix(in srgb, var(--n-4) 38%, var(--scn-ground));}
.scn .pn{fill:var(--scn-ground);stroke:currentColor;stroke-width:2;}
.scn .sd{fill:currentColor;}

/* 読書プログレス（B-14）。JSは1行も使わない。 */
.prog{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  pointer-events:none;
}

.prog svg{width:100%;height:100%;display:block;}
.prog__l{stroke:var(--accent);stroke-width:2;}

/* ① 線が引かれる（M-13）を、背景の絵と読書プログレスにも使う。
   stroke-dashoffset は継承する性質なので、包む箱に1本かけるだけで
   絵の中の線が全部いっしょに引かれる。絵の線は pathLength="100" で
   長さをそろえてあるので、長い線も短い線も同じ進み方になる。 */
@supports (animation-timeline:view()){
  .scn__i{
    --len:100;stroke-dasharray:100;
    animation:draw-in var(--e-map) both;
    animation-timeline:view();
    animation-range:entry 2% cover 44%;
  }
}
@supports (animation-timeline:scroll()){
  .prog__l{
    --len:100;stroke-dasharray:100;
    animation:draw-in var(--e-map) both;
    animation-timeline:scroll(root block);
  }
}
/* 見出しの下に、読む位置に合わせて罫が引かれる（同じ語彙①） */
.hrule{display:block;width:100%;height:4px;}
.stack > .t-h2 + .hrule{margin-top:var(--s-2);}
.stack > .hrule + *{margin-top:var(--s-4);}
.hrule line{stroke:var(--accent);stroke-width:2;}
@supports (animation-timeline:view()){
  .hrule line{
    --len:100;stroke-dasharray:100;
    animation:draw-in var(--e-map) both;
    animation-timeline:view();
    animation-range:entry 10% cover 40%;
  }
}

/* ── 動きを止める（R-10）── 増やした分 ──────────────────────────────
   ★ここはファイルのいちばん最後に置く。
     同じ強さの指定は「あとに書いたほう」が勝つので、
     上のほうに書くと、下にある絵の指定に負けて止まらない。
     実際に一度そうなっていた（止めたはずの階段が途中の形で固まっていた）。 */
@media (prefers-reduced-motion:reduce){
  .scn__i{animation:none !important;stroke-dasharray:none;stroke-dashoffset:0;}
  .scn .step,.scn .riser,
  .scn .pn--a,.scn .pn--b,.scn .pn--c{animation:none !important;transform:none;}
  .hrule line,.prog__l{animation:none !important;stroke-dasharray:none;stroke-dashoffset:0;}
  .barhr,.slab__f,.prog__i{animation:none !important;transform:none;}
}