# 巨大なフッター — Style Reference
> 温かい黒の地に、画面幅いっぱいの社名。文字は可変フォントで、カーソルが近い字だけ太る。

**Theme:** dark  **Series:** PARTS 087  **World:** 三人の小さなデザイン事務所のサイト末尾。連絡先と社名だけが残る。

## Concept
フッターの最下段に社名を一語、画面幅にぴったり敷く。上段は 3 列の小さなリンクと、琥珀色の点が 1 つ灯る「受付中」の行。
主役は社名の文字そのもの。幅は JS が計測して合わせ、太さはカーソルとの距離で決まる(近い字ほど太い)。止まっていると、ゆっくりした波が左から右へ通る。

## Signature Technique
- 幅合わせ: 社名を `font-size:100px` で、全字 wght 240 と全字 wght 860 の2回描いて幅 w0, w1 を測る(測る間は transition を切る)。太る字は波でも指でも3字前後なので、`w = w0 + (w1 − w0)·3/字数` を想定幅とし、`100 × 利用幅 / w` を font-size にする。最後の字が太っても右余白を越えない。`document.fonts.ready` と resize で再計算。CSS 側には `clamp(40px,16.5vw,420px)` のフォールバック。
- 可変フォント: Unbounded(wght 200〜900)。1 文字ずつ `<span>` にし、`font-variation-settings:"wght" var(--w)`。`transition: font-variation-settings .38s cubic-bezier(.2,.7,.2,1)` で滑らかに追従。
- 太さの分布: 各字の中心 x を測り、`d = (pointerX − cx) / (字幅 × 1.4)`、`w = 240 + 620·exp(−d²)`。
- 待機の波: `c = (t·0.55 mod (n+4)) − 2` を中心に `240 + 220·exp(−((i−c)/1.3)²)`。reduced-motion では止める。
- 下端の切れ: `.markwrap{overflow:hidden}` と `.mark{margin-bottom:-.07em; line-height:.86}` で文字の下端を少しだけ切り、紙の端から文字がはみ出した見え方にする。
- 琥珀の点: `box-shadow` を 0 → 9px へ広げて消す 2.6 秒のループ。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --obsidian | #0C0A09 | 地。わずかに暖色の黒 |
| --graphite | #1C1917 | 罫線 |
| --slate | #44403C | hover 時の下線 |
| --ash | #78716C | 列の見出しと著作権表示とヒント |
| --pebble | #A8A29E | リンク、本文の薄い部分 |
| --fog | #F5F5F7 | 社名、強調語、hover のリンク |
| --gold | #CAB16A | メールと受付中の点とパーツ表記。唯一の彩度 |

## Typography
- 社名: Unbounded、wght 240(待機)〜860(最接近)。幅合わせで決まる font-size、line-height .86、字間 −.02em、大文字。
- 本文とリンク: Noto Sans JP 300/400、14px。
- 列見出し: 11px、字間 .18em、大文字。
- 著作権とパーツ表記: 11px、字間 .06em。

## Spacing & Layout
- フッター全体 `min-height:58svh`、`grid-template-rows: auto 1fr auto`(列 / 社名 / 法的表記)。
- 横余白 `clamp(20px,5vw,72px)`。社名の行はこの余白を負マージンで打ち消し、同じ余白を padding で戻す(文字幅は余白の内側に収める)。
- 列は 3 等分、間隔 `clamp(20px,3vw,48px)`。760px 以下で 2 列 + 連絡先を全幅に。
- 上に 42svh の短い本文を置き、フッターが文脈の中で見えるようにしてある。

## Motion
- 太さの追従 .38s。待機の波は 0.55 字/秒。
- `prefers-reduced-motion`: 波と点の脈動を止め、太さの transition も切る(カーソル追従は即時)。
- タブ非表示で rAF を止める。

## Components
- 列: 見出し + リンク 2〜3 本。リンクは hover で `--fog` になり、1px の下線が `--slate` で付く(.2s)。focus-visible は `--gold` の 1px 輪郭。
- 受付中: 琥珀の点 + 一文。
- 社名: 1 語。aria-label に社名を入れ `role="img"`。
- 法的表記: 左に ©、右に `VALE / PARTS 087 / 巨大なフッター` と操作説明 1 行。

## Do / Don't
Do
- 社名は 1 語、大文字、幅合わせに任せる。
- 彩度は琥珀の 1 色だけ(メールと点)。
- 太さの差は 240 から 860 まで振る。小さい差では気づかれない。
Don't
- 社名を 2 行にしない。長い名前は略称にする。
- 影やグラデーションを足さない。罫線 1px だけ。
- 波の速度を上げない。背景の動きとして気づくかどうかの速さ。

## Usage
1. `<footer>` ブロック全体と `<script>` を切り出す。Google Fonts の Unbounded(`wght@200..900`)を `<link>` で読む。
2. `P.text` に社名を入れる。`.mark` の文字は JS が生成する。
3. パラメータは `P`:

| パラメータ | 既定 | 意味 |
|---|---|---|
| text | 'TSUKIMI' | 社名(大文字化は CSS) |
| minW / maxW | 240 / 860 | 可変フォントの太さの下限と上限 |
| reach | 1.4 | 影響半径(字幅の倍数) |
| idle | true | 待機の波を出すか |

4. 色は `:root` の 7 トークン。別の可変フォントを使うときは `font-variation-settings` の軸名(`"wght"`)と `minW/maxW` をそのフォントの範囲に合わせる。
5. 文字の下端を切りたくないときは `.mark` の `margin-bottom` を 0 にする。

## References
- OHZI Interactive Studio: 黒い空間に無彩色の文字だけを置き、Unbounded の広い字間で記念碑的に見せる、という骨格を抽象化した。3D のオブジェクトは置かず、主役を社名の可変フォントに置き換えた。
- Inngest: 暖色の黒(#0C0A09)から始まる 4 段の灰、罫線だけの区切り、琥珀 1 色だけのアクセント、という配色の規律をそのまま考え方として借りた。操作盤のような画面は捨て、フッターの連絡先と点 1 つに絞った。