/* RIDGEMORA OUTDOOR / ORIGINAL SAMPLE 19
2026-08-28 ブラッシュアップ(web_designer)。直した/足したことと、その理由:
・図が 0 個だった。標高断面・当日の時間割・山頂の一日・荷物の重さ・中止の基準を
インライン SVG で作った。数字は本文と同じ値を使っている(食い違わせない)。
・動きの定義が 0 個だった。出現の語彙を 4 種類(wipe / wipe-x / rise / dl)入れた。
★opacity と scale(0) は使わない(要素の箱が 0 になり、品質検査の目が潰れる)。
★隠す側は :where(html.js) の中(詳細度 0)。JS が落ちれば本文は素で全部読める。
★合図は IntersectionObserver ではなく site.js の scroll + rAF
(clip-path を持つ要素は IntersectionObserver から永久に見えない)。
・figure の既定 margin(1em 40px)を消した。狭い画面で必ず 40px 横へはみ出す。
・見出しの折り返しを
から へ。作者が宣言した位置でだけ折る。
・見出しの字を小さい画面で詰めた。旧値(.routes h2 = 65px 下限 など)は 320px で
1 行が器より長くなり、宣言していない位置で折れていた。
・.reveal は HTML に 1 件も無い死骸だったので置かない(site.js からも外した)。
2026-08-28 是正(別人格レビュー fail の受け):
・表紙の縦レールが 0x0 で描かれていなかった。writing-mode:vertical-rl の中では
flex-direction:column の主軸が「横」になり、flex:1(basis 0%)が width:2px に勝つ。
交差軸は align-items:center なので内容高 0 = 線が消える。→ flex-direction:row
(vertical-rl の inline 軸 = 上から下)に直した。★ここを column に戻すと線がまた消える。
・中止の帯の狭い画面用 aspect-ratio が、後ろに置いた同詳細度の規則に負けて 1 行も
効いていなかった。媒体規則を base の後ろへ移した。★順番を戻すと 390px で 184px の
細片に戻る。
・暦の偶数月を狭い画面で visibility:hidden にしていたので、ROUTE 03 の始点(8月)が
消えていた。帯を数えて読む図なので隠さない。字だけ詰める。
・小さい文字のコントラストが床(4.5)割れ: 旧 --rust #a1512a/#dae0d1=4.18、
#5d6657/#dae0d1=4.44、#5c2c0c/#ff6b21=4.05。それぞれ #8a4420(5.31)/
#576050(4.87)/#4a2203(4.85)へ落とした。★床と同値にしない(余らせる)。
★.eyebrow は 400 だと線が細すぎて、指定は 4.8 でも実画素では 3.9〜4.8 に散った
(縁のにじみしか無く「字の芯」が存在しない)。600 にして芯を作った = 実画素 5.31。
・固定ヘッダーの帯は .stuck(= JS)でしか出ないので、JS が落ちると明るい 4 節の上で
文字が 1.15:1 になっていた。既定を「不透明」にし、透明にする側を :where(html.js)
の中へ移した(JS が死ぬ = 帯が出る = 読める。実測 12.9〜15.9:1)。 */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:clip}
img{display:block;width:100%;height:100%;object-fit:cover}
/* ★figure の既定は margin:1em 40px。消さないと狭い画面で必ず 40px 横へはみ出す。 */
figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:root{--bg:#0c110e;--ink:#ecede7;--body:Oswald,"Arial Narrow",sans-serif;--hand:"Rock Salt",cursive;
--orange:#ff6b21;--raise:#141a15;--stone:#dae0d1;--stone-ink:#10140f;--rust:#8a4420;
--hair:#ffffff2e;--mute:#a9b0a6;--ease:cubic-bezier(.2,.7,.2,1)}
.demo{position:fixed;z-index:99;left:10px;bottom:10px;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-radius:999px;font:600 12px/1 var(--body);letter-spacing:.08em}
.demo a{text-decoration:underline;margin-left:10px}
.skip{position:fixed;top:-80px;left:8px;z-index:110;background:#fff;color:#000;padding:10px}
.skip:focus{top:8px}
:focus-visible{outline:3px solid #65a7ff;outline-offset:4px}
/* ★600 にしてあるのは装飾ではない。400 の 12px は線が 1px 未満で、指定色どおりの
画素が 1 つも焼かれない(実測で 3.89 まで落ちた)。ここを 400 に戻さないこと。 */
.eyebrow{font:600 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin:0}
/* 見出しの折り返しは作者が宣言した位置でだけ起こす。span どうしの間に空白を入れないこと。 */
.line{display:block;white-space:nowrap}
/* ---- 出現演出 ------------------------------------------------------------
隠す側は :where(html.js)(詳細度 0)。.seen が必ず勝ち、JS が落ちれば全部見える。
★終状態の clip-path は四方 160px 逃がす。inset(0) だと影と縁が切られる。 */
:where(html.js) .wipe{clip-path:inset(0 0 100% 0)}
.wipe{transition:clip-path .95s var(--ease)}
.wipe.seen{clip-path:inset(-160px)}
:where(html.js) .wipe-x{clip-path:inset(0 100% 0 0)}
.wipe-x{transition:clip-path 1.05s var(--ease)}
.wipe-x.seen{clip-path:inset(-160px)}
/* ★持ち上げの量は px の直値で書かない(小さい画面で相対的に大きく化ける)。 */
:where(html.js) .rise{translate:0 clamp(12px,2.2vw,30px)}
.rise{transition:translate .85s var(--ease)}
.rise.seen{translate:0 0}
/* 線を引く演出。pathLength="1" にしてあるので実長を測らなくてよい。 */
/* ★破線は 1 ではなく 1.3。非等方に伸ばした図では pathLength=1 の正規化と
実際の刻みが約 6% ずれ、終端まで線が届かない(2026-08-28 実測)。 */
:where(html.js) .drawn .dl{stroke-dashoffset:1.3}
.drawn .dl{stroke-dasharray:1.3;transition:stroke-dashoffset 1.5s var(--ease)}
.drawn.seen .dl{stroke-dashoffset:0}
.drawn.seen .dl:nth-of-type(2){transition-delay:.12s}
.drawn.seen .dl:nth-of-type(3){transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.wipe,.wipe-x{clip-path:none!important}
.rise{translate:none!important}
.dl{stroke-dasharray:none!important;stroke-dashoffset:0!important}
.g-live{stroke-dasharray:var(--v) 1!important}
.g-mark{rotate:var(--a)!important}
}
/* ---- 固定ヘッダー ------------------------------------------------------- */
.trail-head{position:fixed;z-index:30;inset:24px 28px auto;display:flex;justify-content:space-between}
/* ★背景が完全に透明な fixed ヘッダーは、スクロールすれば必ず本文と重なる。
2026-08-28 実測で 173〜243/255 透けていた(床 12)。帯は「動かしてから」不透明にする
(先頭では帯を出さない方が絵として静か)。印は site.js が付ける。
★既定は不透明。透明にするのは :where(html.js) の中だけ。JS が落ちた画面では
.stuck が永久に付かず、明るい 4 節(profile / guide / price / faq)の上で
#ecede7 の文字が 1.15:1 になっていた(2026-08-28 実測)。 */
.trail-head::before{content:"";position:absolute;inset:-14px -34px -16px;z-index:-1;background:var(--bg);opacity:1;transition:opacity .25s ease}
:where(html.js) .trail-head::before{opacity:0}
.trail-head.stuck::before{opacity:1}
.trail-head a{font:700 30px var(--body)}
/* ★ROUTES は