/* site-width-v2 — site-width-v1.css の写し（共通の枠の担当、2026-09-28）。違いは 1 点だけ：
   旧 PRODUCTS（STUDIO・HUB の列：#products.s48-products、.s48-products-inner、.s55-output、.s55-hub-banner の格子）の
   1441px 以上の上書き（帯の余白・内側の幅・STUDIO の升目・HUB の升目と格子）を外した。ホームの PRODUCTS を v10 に差し替えたため（主指揮 2026-09-28）、当たる要素がない
   （current.html・rising-v10f.html と下層 10 ページを 1920 幅で開いて数え、すべて 0。
   research-refresh/round55/direction-reset/site-shell-v1/probe-site-width-selectors.mjs）。
   それ以外の値・説明は v1 のまま。build-site-links.py --shell が、ページの site-width-v1.css をこれに差し替える（重複も 1 つにする）。 */
/* site-width-v1 — サイト共通の列（中身の最大幅とガター）。2026-09-28、横長の画面の再監査（hero-wide-v1 担当）。
   オーナー：「横長な画面だとヒーローの要素が真ん中に寄り過ぎてていまいちだな」「ヒーローに限らず、1920まではちゃんと想定して
   レスポンシブ対応してほしい」。

   共通の変数（ホームも下層ページも、列とガターはこの 3 つだけを使う。1168px を直書きしない）
   - --site-max    中身の列の最大幅。1440 以下は 1168px（今と同じ）。1440 を超えると画面の幅に比例して広がり
                   （1168 / 1440 = 画面の 81.1%）、2160 以上で 1752px（1168 の 1.5 倍）に止まる。
   - --site-pad    ページの余白（画面の端からの最小距離）：40（1101 以上）/ 24（1100 以下）/ 20（760 以下）/ 16（360 以下）。
                   ホームの --page-pad と同じ値。
   - --site-gutter max(--site-pad, (100% − --site-max) ÷ 2)。100% は使う場所の包含ブロックの幅なので、全幅の要素の
                   padding-inline や left にそのまま使える。
   スクロールバー：CSS の 100vw は縦のスクロールバー（Windows で 15〜17px）を含む。--site-max は 100vw ではなく
   --site-vw（スクロールバーを除いた画面の幅。site-width-v1.js が documentElement.clientWidth を書く）から求め、
   --site-gutter は 100% で求めるので、ヘッダー・ヒーロー・各節・フッターの左右の端は、スクロールバーの有無にかかわらず
   同じ位置になる（スクロールバーを出したヘッドレスで実測）。JS が動かないときは --site-vw = 100vw（列が最大 14px 広く
   なるだけで、端どうしは揃ったまま）。
   値の理由
   - 1440 の設計（1u = 1px、ガター 136、列 1168）をそのまま画面に合わせて拡大すると、1920 でガター 181・列 1557、
     2160 でガター 204・列 1752。どの幅でも「ガター：列 = 136 : 1168」の比が保たれ、ヒーローの構図（1440u のステージ）
     と列の関係も変わらない。
   - 上限 1752（1.5 倍）：ヒーローのキャストと題字は列と同じ倍率で大きくなる。1.5 倍で 1 人 450px、題字 474px、リード 22.5px。
     これ以上は節の文字（大きさ据え置き）との差が開きすぎる。2160 を超える画面（2560、ウルトラワイド）ではガターが広がる。
   - 1 行の長さ：ホームには長い地の文がない（節の説明は 2〜3 行の改行指定、ニュースと実績は見出しだけ）。下層ページで本文を
     組むときは、列の中で本文の幅を別に制限する（例：max-width 40em）。列の幅を本文の行長に使わない。

   上書き（1441px 以上だけ。1440 以下は変数の値が今と同じなので、既存の規則をそのまま使う） */
:root {
  --site-vw: 100vw; /* site-width-v1.js がスクロールバーを除いた幅（px）で上書きする */
  --site-max: clamp(1168px, calc(var(--site-vw) * 1168 / 1440), 1752px);
}
/* ページの地：edition.css の :root { background: #100c17 }（契約外の色）を黒の帯 #08090e に。ページが画面より短いとき
   フッターの下に見えていた（契約 §2「新しい暗色を作らない」）。ホームはページが長いので見た目は変わらない。 */
html:root {
  background: #08090e;
}
body {
  --site-pad: 40px;
  --site-gutter: max(var(--site-pad), calc((100% - var(--site-max)) / 2));
}
@media (max-width: 1100px) { body { --site-pad: 24px; } }
@media (max-width: 760px) { body { --site-pad: 20px; } }
@media (max-width: 360px) { body { --site-pad: 16px; } }

@media (min-width: 1441px) {
  /* ヘッダー：header-scroll-v1.css の --hs-gutter の 1168px を --site-max に。ヘッダーの箱は幅 100vw で列の中心に置かれて
     いる（hero-current-header.css）ので、この式だけは 100vw のまま（スクロールバーがあっても内側の端は列の端と一致する。
     スクロールバーを出したヘッドレスで実測済み）。 */
  body.hs.eh-study.s55 {
    --hs-gutter: max(var(--page-pad, 40px), calc((100vw - var(--site-max)) / 2));
  }

  /* 各節の列：study16.css の width: min(1168px, 100% − 2 × page-pad) */
  body.study16 #main > .edition-live-wrap,
  body.study16 #main > #news,
  body.study16 #main > #works,
  body.study16 #main > .edition-contact,
  body.study16 .edition-shell > .edition-footer {
    width: min(var(--site-max), calc(100% - 2 * var(--page-pad, 40px)));
  }

  /* ヒーローの題字の左端（ensemble-stage.css の --edge）。通常は ensemble-stage.js が LIVE の列の左端を測った値
     （--ens-edge）が使われる。これは測る前の初期値の 1168px を --site-max に置き換えるだけ。 */
  .ensemble-stage {
    --edge: var(--ens-edge, max(var(--page-pad, 40px), calc((100cqw - var(--site-max)) / 2)));
  }

  /* 試作の注記バー（本番には無い） */
  body .study-bar,
  body .study-note {
    padding-inline: var(--site-gutter);
  }
}