/* ONE AI STUDIO — 余白と文字サイズの正本。

   1440 x 900 が版面の基準。719〜1439 はその相似縮小で、この帯の中に構造の境界を作らない。
   718以下だけが別の構成を書いてよい場所。

   【設計意図】1440 を超えたら編集上の値は固定し、外側の空気だけが伸びる。
   ただし **Top と Works は現状これに従っていない**（1440超でページ余白が160pxまで伸びる）。
   移行用に --rs-edge-page-ramp を置いてある。詳しくはその定義のコメントを見ること。

   トークンを置いただけでは見た目が保たれている証明にならない。変更したら必ず測る：
     python3 tools/serve_ref.py &          # 4186 = 整理前
     python3 tools/serve_local.py 4185 &   # 4185 = 現在
     tools/compare_live.sh gutters "/,/about/,/works/,/contact/" "390,430,718,719,1440,1920"
   回し方と、検査そのものの穴は bp-report/README.md に書いてある。 */

:root {
  /* One master pixel. Editorial geometry scales from the fixed 1440px artboard. */
  --rs-u: clamp(0.4993056px, 0.0694444vw, 1px);

  --rs-content-max: 1440px;
  --rs-frame-max: 1760px; /* 1440 content + 160 outer air each side */

  /* 左右の余白。ページに 5vw / 10vw / 10px を直接書かない。
     版面（1440）での値を持ち、幅に比例して縮み、1440 で止まる。 */
  --rs-gutter-sp: 16px;                         /* 718以下の共通ガター。全ページ共通 */
  --rs-edge-page: calc(144 * var(--rs-u));      /* Top・Works のページ枠 */
  --rs-edge-editorial: calc(72 * var(--rs-u));  /* About の二段組 */
  --rs-edge-form: calc(64 * var(--rs-u));       /* Contact のフォーム面。Top(144) / About(72) に続く
                                                  第三の余白で、名前が無いまま contact.html に
                                                  3回直書きされていた。値は変えていない */
  --rs-gutter-edge: calc(36 * var(--rs-u));

  /* ページの左右余白。Top と Works が実際に使っている値で、1440 を超えても 160px まで伸びる。
     --rs-edge-page（1440 で 144px に固定）とは 1440 までは同値、それより広いと食い違う。

     設計意図（冒頭のコメント）に合わせるなら、ここを var(--rs-edge-page) に替えるだけでよい。
     ただし media-system.css の「内容を --media-content-max で止めて中央寄せ」と
     同時に替えないと、見出しだけが動いてグリッドとずれる（1760px 以上で実測・2026-09-12）。
     ページ側だけを先に固定して、この事故を一度起こしている。 */
  --rs-edge-page-ramp: clamp(40px, 10vw, 160px);

  /* Editorial type. Composition — scales. */
  --rs-display-en: calc(146.88 * var(--rs-u));   /* was clamp(88px,10.2vw,156px)  */
  --rs-heading-ja: calc(105.84 * var(--rs-u));   /* was clamp(60px,7.35vw,108px)  */
  --rs-thought-ja: calc(92 * var(--rs-u));       /* was clamp(44px,6.4vw,92px)    */
  --rs-afterword-ja: calc(83.52 * var(--rs-u));  /* was clamp(60px,5.8vw,92px)    */
  --rs-world-heading: calc(67.68 * var(--rs-u)); /* was clamp(46px,4.7vw,74px)    */
  --rs-statement-ja: calc(61.92 * var(--rs-u));  /* was clamp(31px,4.3vw,62px)    */
  --rs-body-ja: max(16px, calc(30.96 * var(--rs-u))); /* was clamp(25px,2.15vw,32px) */
  --rs-story-title: calc(18 * var(--rs-u));      /* was clamp(13px,1.15vw,18px)   */

  --rs-heading-line: 1.24;
  --rs-body-line: 1.72;
  --rs-heading-tracking: -.11em;
  --rs-body-tracking: .01em;

  /* Interface type. Not composition — does not scale, keeps a 44px hit area. */
  --rs-label: 14px;
  --rs-nav: 14px;
  --rs-nav-h: 56px;
  --rs-logo-w: max(90px, calc(126 * var(--rs-u)));
  --rs-hit-area: 44px;

  /* Editorial columns, measured at 1440. */
  --rs-copy-col: calc(680 * var(--rs-u));
  --rs-photo-col: calc(500 * var(--rs-u));
  --rs-spread-gap: calc(116 * var(--rs-u));
  --rs-grid-gap: calc(23.76 * var(--rs-u));

  /* Vertical rhythm follows width, so the 1440 proportions survive a narrow window. */
  --rs-space-label-heading: calc(18 * var(--rs-u));
  --rs-space-heading-body: calc(36 * var(--rs-u));
  --rs-space-block: calc(110 * var(--rs-u));
}

/* SP is the one place a different composition is authored. It uses absolute px,
   never the ramp, so nothing here can leak into the fluid band. */
@media (max-width:718px){
  :root{
    --rs-u:1px;
    --rs-edge-page:var(--rs-gutter-sp);
    --rs-edge-editorial:var(--rs-gutter-sp);
    --rs-edge-form:var(--rs-gutter-sp);
    --rs-gutter-edge:var(--rs-gutter-sp);
    --rs-edge-page-ramp:var(--rs-gutter-sp);
    --rs-display-en:10.2vw;
    --rs-heading-ja:clamp(40px, 11.2vw, 46px);
    --rs-thought-ja:clamp(40px, 11.2vw, 46px);
    --rs-afterword-ja:clamp(40px, 11.2vw, 46px);
    --rs-world-heading:clamp(42px, 13vw, 58px);
    --rs-statement-ja:clamp(34px, 9.2vw, 40px);
    --rs-body-ja:18px;
    --rs-story-title:clamp(12px, 3.6vw, 15px);
    --rs-heading-line:1.24;
    --rs-body-line:1.75;
    --rs-heading-tracking:-.025em;
    --rs-label:12px;
    --rs-nav:10px;
    --rs-nav-h:48px;
    --rs-logo-w:108px;
    --rs-copy-col:100%;
    --rs-photo-col:100%;
    --rs-spread-gap:0px;
    --rs-grid-gap:8px;
    --rs-space-label-heading:18px;
    --rs-space-heading-body:36px;
    --rs-space-block:80px;
  }
}