# 石と光 — Style Reference
> 石の灰と闇の中で、色はステンドグラスを通った光だけ。スクロールで時刻が進み、光の筋と床の投影が石の上を移る。

**Theme:** dark  **Series:** EDGE 008  **World:** ゴシック大聖堂の身廊。尖頭窓と薔薇窓のある砂岩の身廊に埃が舞う。

## Concept
大聖堂の一日を 09:00 から 20:30 まで縦スクロールで進める。右上の時計(可変フォント。日が高いほど太る)と右端の縦線が進行を示す。
主役はヒーローの「窓の光が石の上に落ちる投影」と、それを見せる「光の筋と埃」。UI は無彩色(砂岩の灰、墨、塩色の文字)に限定し、色はガラスの光にだけ許す。見出しは縦書きで、パイプオルガンのように画面の左右に長く立てる。
5つの時刻(朝・昼・午後・夕・夜)はそれぞれ光の長さ・色・強さの事実を一文で言う。夜は窓が外の明かりで薄く光るだけの静止で終える。

## Signature Technique
生の WebGL(webgl2優先、webgl1フォールバック)。全画面クアッドのフラグメントシェーダー4パス + GPGPU 粒子。ライブラリなし。

1. 室内の解析的レイキャスト(scene パス、フル解像度)
   - カメラ (0, 2.4, 13.5)、pitch 0.2 rad、fov 0.98。各ピクセルの視線を床 y=0・奥壁 z=-10・側壁 x=±7.5・天井 y=18 と交差させ最近傍を取る。
   - 石: 高さ場 `stoneH(uv)` = 煉瓦割り(2.4×1.2、半段ずらし)の目地の面取り + fbm の粒 + 欠け。接線方向の差分で法線を作る(強さ 2.2)。アルベドは砂岩写真(512px、data URI、world uv×0.16 でタイル)にブロックごとの明度差 ±15% と低周波の汚れを掛ける。
   - 投影: 表面点 P から太陽方向 -L に戻して奥壁 z=-10 との交点 W を求め、`inLancet(W)` なら `glass(W)` の色 × 鉛線マスクで照らす。`direct = lit × 太陽色 × 強さ × max(n·-L,0) × 2.8`。
   - 環境光: 窓中心からの距離で減る青灰 `(0.30,0.36,0.50)*(0.10+0.62/(1+0.12d))`、天井は 0.45 倍。距離霧 `exp(-0.012t)`、ビネット、IGN ディザ。
2. ステンドグラス `glass(w)`
   - 尖頭窓: 幅 ±2.6、y 3.4〜12.6、上部は半径 2×HW の2円弧。上に半径 1.55 の薔薇窓(中心 y=14.6)。
   - 本体: ボロノイ(セル密度 x3.4 / y2.9)。鉛線 = `smoothstep(0.06,0.13, sqrt(F2)-sqrt(F1))`。中央の方立と 3.07 ごとの横桟も鉛線。
   - 薔薇窓: 12 分割の扇 × 半径 2.6 刻みの環。扇の境界と環の境界が鉛線、中心ハブは半径 0.17。
   - 色: セルの hash を低周波 fbm で寄せ(`fract(hash*0.38 + fbm(id*0.23)*1.6)`)、隣り合うセルが似た色になる。パレット6色: ルビー (0.58,0.09,0.11)、コバルト (0.10,0.19,0.58)、琥珀 (0.82,0.56,0.16)、オリーブ (0.16,0.36,0.22)、紫 (0.36,0.16,0.46)、淡色 (0.72,0.70,0.56)。セルごとの厚み差 0.55〜1.0、筋状のノイズ。
   - ガラスを直接見るとき: `1 - exp(-1.6 × 色 × 空の明るさ)` で露出を抑える。
   - 床と壁に落ちる色: `litThrough` の色を輝度から 2.3 倍に離して彩度を上げ、`× 太陽色 × 強さ × N·L × 4.1`。光の当たる場所では石のアルベドを輝度に寄せ(最大 70%)、石の色でガラス色が濁らないようにする。最後に最も明るいチャンネルだけで `1/(1 + 1.1·max(m − 0.75, 0))` の圧縮をかけ、色相と彩度を保ったまま白飛びを防ぐ。
3. 光の筋(vol パス、半解像度)
   - 視線を部屋の壁まで 24 歩(mobile 14 歩)で進み、各点で `litThrough(P)`(= その点から太陽方向に窓が見えるか)。見えればガラス色 × 密度を積む。密度は `0.65 + 0.55×noise(xy)×noise(zy)`、床に近いほど `1+0.7e^{-0.22y}` で濃い。ピクセルごとのジッタで縞を消す。`acc × 太陽色 × 強さ × 0.055`。
   - 補助として、窓の輝度マスク(1/4 解像度)を窓の画面位置へ 30 タップ放射状ブラーし、彩度を 45% 落として 0.16 倍で足す(窓まわりの滲み)。
4. 埃(GPGPU)
   - 64×64 = 4096(mobile 32×32)。RGBA32F ping-pong。(x,y,z,seed)。部屋の箱 x±7, y 0〜14, z -9.5〜8 内を value noise の流れ(0.35)+わずかな上昇 0.08 で漂う。ポインタの速度 ×30 を風として足し、`0.03^dt` で減衰。
   - 描画: 視線変換して gl.POINTS。サイズ `(2+3s)×dpr×14/d + 1.4dpr`。頂点シェーダーで `litThrough` を評価し、光の筋の中だけ ガラス色 × 3.2 × きらめき(sin)。外は (0.012,0.014,0.02) でほぼ見えない。加算ブレンド。
5. 時刻 → 太陽
   - 時刻 h(9.0〜20.5)はセクション中心の通過で線形補間。`d=(h-6.3)/13.4`、方位 `az=(d-0.5)×0.8`、高度 `el=0.42+0.36 sin(dπ)`。L = (sin az cos el, -sin el, cos az cos el)。
   - 色: 07:12 付近で青寄り、18:36 付近で赤寄り(G −0.35、B −0.62)。強さ `sin((h-6)/14 π)^0.6`、19:00 から 1.2 時間で 0 へ。夜は窓に (0.35,0.42,0.6)×0.22 の外光だけ。
   - 表示時刻は `1-exp(-5dt)` で追従(フレームレート非依存)。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --void | #0A0A0B | 地、霧の行き先 |
| --stone | #2A2724 | 石の基調(アルベド (0.52,0.47,0.41) × 環境光) |
| --salt | #EDEAE4 | 見出し・本文 |
| --salt-2 | rgba(237,234,228,.74) | リード文 |
| --ash | rgba(237,234,228,.42) | ラベル、時計の補助語 |
| --ghost | rgba(237,234,228,.14) | 縦線、フッターの罫 |
| --amber | #E8B25A | 進行バー、ボタンの hover。UI 側で唯一の色 |
| glass ruby / cobalt / amber / olive / violet / pale | #94171C / #1A3094 / #D18F29 / #295C38 / #5C2975 / #B8B38F | ガラス6色(リニア値を sRGB 近似) |
| sky-ambient | rgb(77,92,128) | 窓からの青灰の環境光 |

## Typography
- 見出し: Zen Antique 400、縦書き(`writing-mode: vertical-rl`)。h1 `clamp(64px, 11vh, 150px)` letter-spacing .18em、章 h2 `clamp(34px, 5.4vh, 64px)` .16em、min-height 40vh(mobile 34vh)で柱のように立てる。
- 本文・ラベル: Zen Kaku Gothic New 300。本文 `clamp(14px, 1.15vw, 17px)`、line-height 2.1、letter-spacing .06em、max-width 30em、`<br>` で1文1行。ラベル 11px / .22em。本文の text-shadow は3重(20px, 6px, 2px)で投影の上でも読める。
- 時計: Big Shoulders Display(可変 wght 200〜700)、34px(mobile 26px)、tabular-nums。`--wght = 200 + 400×sin(時刻)` で正午に最も太く、夜に細い。時間帯の英語(morning / noon / afternoon / evening / night)は同書体 11px の大文字。
- 締め h2: Zen Antique `clamp(28px, 4vw, 50px)`、横書き、nowrap(420px以下で解除)。

## Spacing & Layout
- 左右 `--pad: clamp(20px, 5vw, 72px)`。ブランド左上、時計右上、縦線は右端 16vh〜84vh。
- hero: 100svh、`grid-template-columns: auto 1fr`。縦書き h1 を左に、本文を右下に。窓は画面中央上。
- 章: min-height 100svh + 上下 20vh、`auto 1fr` の2列で見出しと本文を下揃え。偶数章は `1fr auto` で右寄せ(mobile では左)。
- end: 100svh 中央、32em。footer は上罫 1px。
- 640px 以下: 窓が本文の真後ろに来るので、hero と章の本文ブロックに `rgba(10,10,11,.62)` + `blur(8px)` の煙板(padding 14px 16px、角丸 6px)を敷く。

## Motion
- 光: 時刻の関数。スクロールを止めれば止まる(静止画で筋と埃が伝わる)。埃だけが時間で漂い、筋の中で 1.5〜4.5 Hz のきらめき。
- 時刻の追従 `1-exp(-5dt)`、風の減衰 `0.03^dt`。
- 時計の太さは CSS transition .6s。
- reduced-motion: 時間を t=5 で固定、GPGPU 更新停止、スクロール時だけ1フレーム。光の位置は時刻の関数なので静止でも章の違いが分かる。
- WebGL なし: `.nogl` でキャンバスに CSS の斜めの色帯(琥珀・青・赤)と上下グラデーション、ヒーローに1行の説明。
- `visibilitychange` で停止・再開、リサイズ 120ms デバウンスで FBO を作り直す。

## Components
- hero: 縦書き h1、ラベル「大聖堂 / 一日」、2行のリード、「スクロールで時刻が進む」+ 落ちる縦線。
- 時計(.clock): 時刻 + 時間帯。縦線(.rail): 1px の幽霊線に琥珀の進行。
- 章(.st): ラベル(時刻 / 時間帯)の下に縦書き h2 と本文。装飾なし。
- 締め: ラベル「20:30 / 夜」と1文のあとに h2「朝から、もう一度。」。pill ボタン「09:00 へ戻る」(hover で琥珀の線)。
- footer: 上罫、`VALE / EDGE 008` と題名。

## Do / Don't
Do
- 色はガラスを通った光だけ。UI の色は琥珀の進行バー1本まで。
- 光の筋は視線に沿った体積のレイマーチで作る(窓の方向への放射状ブラーだけでは斜めの筋にならない)。
- 埃は筋の中でだけ光らせる。外の埃は見えない程度に。
- 投影の形(窓の形と鉛線の影)が床の上で読めるよう、太陽高度は 24〜45° に抑える。
- 本文は投影の上に載ることがあるので、text-shadow を3重にして読ませる。

Don't
- ガラスを純色で塗らない(最初の版は彩度が高すぎて玩具に見えた)。
- 太陽高度を 70° まで上げない(投影が窓の真下の小さな点になる)。
- 埃を 4096 個より増やさない。未照射の埃を明るくしない(雪に見える)。
- 石を緑や茶に寄せない。灰のまま、色は光に任せる。
- 窓を2つ以上置かない。光源は1つ。

## References
- Framer(stock/refero/md/framer-2.md): 「純黒の地に白の編集的な大見出し、1色のアクセントは面を塗らず縁をなぞる」を抽象化。縦長の見出しは縦書きの明朝で置き換え、アクセントの青を琥珀の進行バー1本にした。
- Julia Krantz(stock/refero/md/julia-krantz.md): 「UI は完全に無彩色、色は内容(写真)にだけ委ねる。weight 300 の薄い文字、1px の幽霊線」を抽象化。写真の役をステンドグラスの光に渡し、幽霊線は縦線とフッターの罫、鉛線のモチーフに使った。