# 年表 — Style Reference
> 生成りの地に、手描き風の藍の線がスクロールで伸び、通り過ぎた年の点が灯る。

**Theme:** light  **Series:** PARTS 088  **World:** 小さなデザイン事務所の七年。黒い帯の見出しの下に、白いカードが年ごとに並ぶ。

## Concept
左の縦線がスクロールに合わせて伸び、線が届いた年の点が藍に変わり、カードが起きる。最後に届いた年には橙のマーカー線が見出しの下に引かれ、チップが藍になる。
主役は線。少し揺れた手描き風の折れ線で、太さ 2.5px、藍 1 色。

## Signature Technique
- 線: 各年の点の中心座標を `getBoundingClientRect` で取り、48px ごとに `±3.5px` の揺れ(固定シードの擬似乱数)を入れた折れ線を SVG `path` に書く。同じ d を薄い灰の `base` と藍の `draw` の 2 本に使う。
- 伸び: `draw.getTotalLength()` を `stroke-dasharray` と `stroke-dashoffset` に入れ、スクロールごとに `dashoffset = total − total·(先端 y / 最後の点 y)`。先端は画面の 62% の高さ(`P.lead`)。
- 点灯: 各年の点の y が先端以下なら `.on`。`.on` で点が藍に塗られ、外側のリング(`::after`)が 0.9 秒で広がって消える。カードは透明度 .55 → 1、8px 上がる。
- 現在: 点灯している中で最後の年に `.now`。見出し下の橙の線は `pathLength="1"` の `path` を `stroke-dashoffset 1 → 0` で引く(0.6 秒、0.15 秒遅れ)。
- 更新は scroll イベントを rAF で間引き、resize は 120ms デバウンスで再構築。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --bone | #F4F2EC | 地 |
| --paper | #FFFFFF | カード |
| --ink | #0E0E10 | 見出しと灯った年号と黒い帯 |
| --charcoal | #3B3B44 | 本文、チップの文字 |
| (band p) | #B9B9C2 | 黒い帯の説明文 |
| --mist | #D9D8D2 | 薄い線、未点灯の点と年号、罫線 |
| --indigo | #4570FF | 伸びる線、点、現在のチップ、パーツ表記 |
| --orange | #FF6808 | 現在の見出しのマーカー線 |
| --lime | #C6FF94 | 黒い帯の中の期間表記だけ |

## Typography
- 見出し(帯): Inter / Noto Sans JP 600、`clamp(30px,4.4vw,60px)`、字間 −.02em。
- 年号: DM Mono 500、`clamp(20px,2.2vw,28px)`(スマホ 14px)。
- カード見出し: 600、`clamp(17px,1.5vw,21px)`。本文 400、`clamp(14px,1.05vw,15px)`、行間 1.7。
- チップと期間表記: DM Mono、11〜12px、字間 .04〜.08em。

## Spacing & Layout
- 年表の最大幅 1080px。グリッド `48px 120px 1fr`(点 / 年号 / カード)、列間 `clamp(16px,2.5vw,36px)`、行間 `clamp(36px,5vw,64px)`。
- 760px 以下: `40px 1fr` の 2 列、年号はカードの上に小さく。
- カードは角丸 4px、罫線 1px、内側 `clamp(16px,2vw,24px) clamp(18px,2.4vw,28px)`。
- 黒い帯は上余白 `clamp(28px,5vw,72px)`。

## Motion
- 線はスクロールに直結(補間なし)。点灯 .35s、カード .45s、リング .9s、マーカー .6s。
- `prefers-reduced-motion`: すべての transition とリングを切る(点灯は即時)。

## Components
- 帯: 期間(ライム)+ 見出し + 一文。
- 年: 点 + 年号 + カード(見出し / 一文 / チップ)。
- 表記: 下部に `VALE / PARTS 088 / 年表` と操作説明 1 行。

## Do / Don't
Do
- 線は 1 本、色は藍だけ。橙は現在の 1 か所。
- 一年につき一文。長い説明は別ページへ。
- 揺れは ±3.5px まで。手描きに見える最小。
Don't
- 点の間隔を詰めない。線が伸びる時間が主役。
- 年を左右交互に置かない。読む順が崩れる。
- 線にグラデーションや影を足さない。

## Usage
1. `.tl` セクション(`.rail` と `<ol>`)と `<script>` を切り出す。`<ol>` の各 `<li class="ev">` に点・年号・カードを入れる。
2. マーカー線を付けたい見出しは `<h2>` の中に `<svg viewBox="0 0 100 10"><path d="…" pathLength="1"/></svg>` を残す。
3. パラメータは `P`:

| パラメータ | 既定 | 意味 |
|---|---|---|
| lead | 0.62 | 線の先端の位置(画面高さに対する割合) |
| wobble | 3.5 | 揺れ幅(px) |
| seg | 48 | 折れ線の節の間隔(px) |

4. 色は `:root` のトークン。線の太さは `.rail .draw` の `stroke-width`。
5. スクロール以外で進めたい場合は `update()` の `tip` を外部の値に置き換える。

## References
- Twitch: 薄灰の地に白い平らなカード、近黒の文字、濃い紫 1 色が意味を担い、チップは丸薬形、という配置を抽象化した。紫は藍に替え、密度は 1 年 1 枚まで落とした。
- 7shifts: 黒い帯で周囲を明るく見せる構成、橙の手描き風の下線、ライムの強調文字、という 3 つの仕掛けを借りた。パステルのカードは使わず、手描きの感触は線の揺れとマーカーだけに残した。