# 色が変わる — Style Reference
> 生成りの紙が、スクロールで若草・藤・薄紅へ溶け、最後に墨に落ちる

**Theme:** light  **Series:** PARTS 070  **World:** 架空の案件目録「Huddle Index」。仕事の種類ごとに色がある。

## Concept
スクロール演出。5 つの区画それぞれに背景色・文字色・アクセント色を `data-*` で持たせ、画面中央がどの区画の間にあるかを求めて、隣り合う 2 区画の色を OKLab で補間し、CSS 変数(`--bg --fg --acc`)に書き戻す。読み込み時は「設計」の区画を画面中央に置き、画面の下端からは次の区画の色(ラベンダー)がすでに滲んでいる状態で止まる。右上に現在の背景色の HEX を実測で出す。

## Signature Technique
- 区画: `<section data-bg data-fg data-acc>`。読み込み時に全色を OKLab に変換して保持。
- 進行: `y = scrollY + H × PROBE(.72)`(中央より下で色を測るので、区画が中央にあるときにも次の色へ動き始めている)。`y` が `secs[i+1].offsetTop + H/2` を超えるまで `i` を進め、`t = (y - ya) / (yb - ya)`(ya/yb は区画 i, i+1 の中央)。
- 補間: `u = clamp((t-.05)/.9)`、`e = u²(3-2u)`(smoothstep)。
- 滲み: 固定レイヤー `.wash`(z-index -1)に `linear-gradient(上端の色 0%, transparent 38%, transparent 58%, 下端の色 100%)`。上端は `scrollY - .15H`、下端は `scrollY + 1.35H` の位置の背景色を、区画中央どうしの間の smoothstep(停留なし)で求める。静止画でも上下で色が違い、溶けている途中が見える。
- 初期位置: `secs[START]` の中央を画面中央に合わせる(START = 1)。
- 補間: OKLab の 3 成分を線形に `A + (B-A)·e`、sRGB に戻して HEX。パステル同士でも灰色に沈まない。
- 書き戻し: 値が変わったときだけ `root.style.setProperty('--bg', hex)`。本文・カード・タグは全て変数を参照しているので、1 か所の更新で画面全体が変わる。
- 最後の区画は墨(#1d1b18)で、カードの地だけ `style="--card:#2a2723"` で上書き。
- `prefers-reduced-motion`: 補間はスクロール位置に直結なので、そのまま(自動の動きは無い)。読み込み時の位置だけ先頭にする。

```js
function toLab(hex){ /* sRGB → linear → LMS → cbrt → OKLab */ }
const h=toHex(A.map((v,j)=>v+(B[j]-v)*e));
root.style.setProperty('--bg',h);
```

## Color Palette
| Token | HEX | Role |
|---|---|---|
| cream | #f3efe6 / #1d1b18 | 区画 0 の地 / 文字 |
| sage | #cfdcc8 / #1f2a1c / #3f6a3a | 区画 1 の地 / 文字 / アクセント |
| lavender | #d9d3ea / #241f33 / #5a4a8c | 区画 2 |
| rose | #e6cfcc / #33201e / #9a4a44 | 区画 3 |
| ink | #1d1b18 / #f3efe6 | 区画 4(終わり)の地 / 文字 |
| --card | #ffffff(墨の区画は #2a2723) | カードの地 |
| --fg2 | #6b665c | 本文、ラベル(補間しない) |

## Typography
- 欧文と見出しは Instrument Sans 1 つ(400/500/600)。見出し `clamp(40px, 7vw, 104px)` 500、letter-spacing -.03em、line-height 1.02、下 16px。
- ヘッダー: 12px、letter-spacing .06em。目録名は 600 15px、letter-spacing -.01em。
- 本文: Zen Kaku Gothic New 300、`clamp(14px, 1.1vw, 16px)`、line-height 1.9、最大幅 28em。
- ラベル: 12px、大文字、letter-spacing .2em、下 16px。ヘッダーの HEX は tabular-nums。
- カード: 行ラベル 13px(値は 500、tabular-nums)、大きな値 `clamp(28px, 3.4vw, 48px)` 500、letter-spacing -.03em。
- タグ: Zen Kaku Gothic New 11px、letter-spacing .1em。

## Spacing & Layout
- 区画は `min-height: 100svh`、上下 `clamp(80px, 12vh, 140px)`、横 `clamp(20px, 5vw, 72px)`、内容幅 1100px の 2 列(文 1.2fr / カード 1fr、列間 `clamp(28px, 6vw, 96px)`)。
- カードは角丸 18px、padding 22px、行間 14px、10px の色帯(アクセント、角丸 999px)、`box-shadow: 0 1px 0 rgba(0,0,0,.04)`。
- ヘッダーは fixed(上 22px + safe-area)、左に目録名、右に `bg #hex`。
- 760px 未満: 1 列、カード最大幅 420px、タグを左下へ。

## Motion
- スクロール直結、トゥイーンなし。区画中央の前後 5% で停留、残り 90% で遷移。
- 変数が変わると CSS の `background`/`color` は即時に追従する(transition を付けない。付けるとスクロールに遅れて不気味になる)。
- `prefers-reduced-motion: reduce`: 同じ。

## Components
- head: 目録名 + 現在の背景 HEX。
- section: ラベル / 見出し / 1〜2 文 / カード(件数・名前・色帯・平均日数)。
- tag: `VALE / PARTS 070 / 色が変わる` と操作説明 1 行。

## Do / Don't
- Do: OKLab(または OKLCH)で補間する。sRGB の直線補間はパステル間で灰色に沈む。
- Do: 文字色も一緒に補間する。背景だけ変えると途中でコントラストが落ちる。
- Do: 区画の色は中央付近でほぼ止め、次の色は画面の下端から滲ませる。
- Don't: `transition: background` を足さない。スクロールに遅れる。
- Don't: 彩度の高い色を並べない。溶ける途中が濁る。

## References
- Huddle: 「生成りの紙に、若草・藤・薄紅の淡い 3 色を分類のタイルとして使う」配色の考え方を借りた。ページ全体の色を分類に割り当てた。
- Twocreate: 「書体 1 つ、墨 1 色、極端なサイズ差だけで構成する」姿勢を借りた。見出しを 104px まで上げ、装飾は色帯 1 本にした。

## Usage
1. HTML: 各 `<section>` に `data-bg` `data-fg` `data-acc` を付ける。順序 = スクロール順。
2. CSS: `:root` に `--bg --fg --fg2 --card --acc` を置き、地・文字・アクセントをすべて変数で参照する。
3. JS: `<script>` 全体を移植。`keys` に補間したい変数名を足せば、`data-*` と `--*` が同名で増える。
   - 停留と遷移の幅は `(t-.05)/.9` の 2 つの数字。色を測る高さは `P.PROBE`(.72)。
   - 読み込み時の `scrollTo` は見本用。本番では消す。
4. GSAP ScrollTrigger を使う場合は、`render()` を `onUpdate` から呼ぶだけでよい(進行度の計算はそのまま)。