/*
AstLog — 公開ページと管理画面の共通スタイル。
値を決めるのはこのファイルの :root だけ。各セレクタに生の色やサイズを
書かないこと。値が散ると、差に意味があるのか後から分からなくなる。
幅は「画面ごと」ではなく「部品ごと」に決める。
メディアクエリは 600 と 900 の2つだけ。連続的に変わるもの（見出し・余白・
列数）は clamp() と auto-fill に任せ、ブレークポイントを増やさない。
モバイルファースト: 素の指定が Phone、min-width で足していく。
質感と手触りは React Bits（reactbits.dev）の Micro を手本にしている。
向こうのコードは使っていない。JavaScript を持ち込まず、CSS だけで作り直した:
- 公開ページは箱（枠・面・影）を並べず、罫線で区切り、角を立てる。面（白をうっすら
重ねた「ゴースト」と、上辺の 1px の光）は管理画面の部品だけが持つ
- 押すと縮み、離すとばねで戻る。ばねの曲線は :root の --ease-spring だけを使う
*/
:root {
--font-sans:
'Helvetica Neue', 'Hiragino Sans', 'Noto Sans JP', system-ui, -apple-system, sans-serif;
/*
等幅は英数字の札だけ（実績値の数・タグ・英大文字の小見出し・番号）。和文が入りうる所には使わない——等幅の書体は
和文の字を持たず、字は結局ほかの書体に落ちる。残るのは等幅のための字間
（letter-spacing）と小ささだけで、和文には読みにくさしか渡さない。
打ち込んだ文字が入る札（タグ・肩書き・技術の小見出し）は、日本語を1字も
含まないときだけ lang="en" が付き（components.tsx の langOf）、等幅はその
:lang(en) にだけ掛ける。年と期間は「2024 — 現在」と和文を含む書き方に
決めた（CLAUDE.md「文言」）ので、等幅にせず数字の幅だけそろえる（tabular-nums）。
Windows の書体（Consolas）も名指しする。ui-monospace と Mac の名前は Windows の Chrome に
無く、素の monospace に落ちる——lang="en" の札は Consolas になるが、番号だけの札（一覧の
行の番号・見出しの件数）は日本語のページの等幅（MS ゴシック）になり、細い古い数字で
英字の札と別の書体に見えた
*/
--font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace;
--font-serif: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', Georgia, serif;
/* 見出しの書体。本文は読みやすさを優先して常に --font-sans */
--font-display: var(--font-sans);
/*
文字の段（静的）。6つだけ。中間値を足さない。
和文の最小は --fs-meta（12px）。--fs-label（11px）は英大文字の小見出し
（Skills の LANGUAGES・管理画面の ADMIN・404 の番号）だけに使う。11px の
和文は画数の多い字が潰れる——以前は業界名・帯の件数・節の添え・経歴の
期間・足元が 11px（しかも等幅）で、和文の札がいちばん読みにくかった。
どこに使ってよいかは test/theme.test.ts の「文字の段」が名指しで数えている。
*/
--fs-label: 11px;
--fs-meta: 12px;
--fs-sm: 13px;
--fs-base: 14px;
--fs-md: 15px;
--fs-lg: 18px;
/*
文字の段（画面に連動）。見出しの4段だけで、本文には使わない。
xl > 素 > sm > xs の1本のはしごで、部品の名前は持たせない。
連動する段をこの4つに絞ったのは、残りが設計域（390 / 768 / 1440）で
ほとんど動かなかったため。--fs-card-title は 390 と 768 で 15.00px、
1440 で 15.84px——名前は「連動」でも実体は静的な 15px（= --fs-md）
だった。--fs-lead（14.00 / 14.00 / 15.12px）と --fs-section
（17.00 / 17.00 / 18.72px）も同じで、3つとも静的な段に畳んである。
可変部は幅と高さの小さいほう（下の @supports で svh を足す）。
*/
--fs-display-xl: clamp(30px, 4.3vw, 62px);
--fs-display: clamp(28px, 4vw, 52px);
--fs-display-sm: clamp(24px, 3vw, 38px);
--fs-display-xs: clamp(19px, 1.7vw, 24px);
/* 余白の段。7つから選ぶ */
--sp-1: 2px;
--sp-2: 4px;
--sp-3: 8px;
--sp-4: 12px;
--sp-5: 16px;
--sp-6: 24px;
--sp-7: 32px;
/*
版面の幅。上の帯・本文・足元の中身をこの幅にそろえ、広い画面では左右に
余りを均等に置く（「骨格」の .top / main / .foot の padding-inline）。
地と帯の罫線だけは画面の端まで伸びる。
*/
--w-page: 1344px;
--gutter: clamp(16px, 3.4vw, 60px);
/* 管理画面の面は大きく、操作部品は小さく丸める（公開ページは角を立てるので使わない） */
--radius: 16px;
--radius-sm: 10px;
/*
画面1つぶんの高さ。svh は道具の帯を出したときの高さなので、帯の出入りで
表紙の高さが跳ねない。
100vh の控えは置かない。svh を知らない環境ではこの値が計算できず、min-height が
素の auto に落ちる——表紙が中身の高さになるだけで、読めなくなるものは無い。
*/
--screen-h: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
/*
上の帯（.top）の高さ。ロゴと目次の1行で、行き先の的（--tap）が入る高さ。
帯の段の数を中身で変えない（目次は1行のまま横に送る）ので、高さはいつもこれ。
*/
--top-h: 64px;
/*
本文（main）の上下の余白。帯の罫線から節の見出しまで、どのページも同じだけ
空ける（見出しの錨。「ページの外枠」）。
*/
--page-pad: clamp(32px, 5vw, 72px);
/*
表紙（入口と締めの Contact）の高さの下限。帯と本文の上下の余白を除いた、
画面の残りいっぱい。表紙の下端が画面の下端に来て、足元は次の画面に回る。
*/
--cover-h: calc(var(--screen-h) - var(--top-h) - var(--page-pad) * 2);
/*
貼り付いた上の帯の下に、送った先（#about などのフラグメント・フォーカス）を
止める空き（html の scroll-padding-top。「ページの外枠」）。帯の高さ＋ --sp-5。
npm run check:fit が、節の id へ送った先の上端が帯の下端より下にあることを測る。
*/
--top-clear: calc(var(--top-h) + var(--sp-5));
/*
上の帯のロゴ（ワードマーク ΛSTLOG。O がブラックホール）の字の高さ。字の幅は字の
高さの約 6.6 倍（15px で 99px）。ログイン画面のワードマークも同じ規則（.brand__word）。
--hole-core はロゴの O の黒い円（影）の色で、地より一段深い黒。src/ui/logo.ts の
LOGO_COLORS（素材のファイルに焼く色）と同じ値
*/
--brand-h: 15px;
--hole-core: #000;
/*
段落（.bio p。紹介文・メモ・作品の説明と本文）の1行の長さ。約40字で止める。
和文の本文は1行 35〜40字あたりを超えると、行末から次の行頭へ目を戻すときに
行を取り違えやすくなる。止めていなかったころは、1440 の About が1行約65字
で流れていた（本文の列 869px ÷ 13px = rail @1440x900, Hiragino Sans,
macOS Chromium）。em で書くのは、和文の1字がちょうど 1em の幅だから
（本文には palt を掛けていない）——段落の字の大きさを変えても、字数のまま
ついてくる。390 の電話では画面のほうが狭い（1行 23字前後）ので効かない。
*/
--measure: 40em;
/*
作品の画像の枠。どちらも「絵に合わせて伸び縮みさせない」ための段で、
寸法の分からない画像でも、読み込む前から高さが決まっている（DB の寸法は
この列より前の画像には無いので、この2つの枠には使わない。寸法は共有カードと、
画像そのものの縦横比のために使う）。
--thumb-ratio は一覧のサムネイルの縦横比。Mac の画面と同じ 16:10 で、画面の
スクリーンショットがそのまま枠いっぱいに収まる（絵は切らない。.entry__thumb）。
3:1 の帯に切り抜いていたころは、画面の上の半分だけが部品の途中で切れて見えた
（持ち主の「途切れている」）。
--shot-h は作品ページの画像の枠の高さ。絵はこの中に縮めて収める
（object-fit: contain。切らない）。可変部は幅と高さの小さいほうで、
背の低い窓ほど小さくなる——ページを開いた最初の画面に、見出しと画像だけで
なく説明の頭まで入るように。
*/
--thumb-ratio: 16 / 10;
--shot-h: clamp(120px, min(30vw, 20svh), 280px);
/*
作品のページのギャラリー（.gallery）。先頭を広く、続きは大小の列で見せる。
比は一覧と同じ --thumb-ratio。高さの上限だけ持つので、狭い画面では幅いっぱいに
収まり、広い画面の縦長の画像でも何画面ぶんも伸びない。絵は contain で切らない。
--head-icon は作品のページの見出しの左のアイコンの大きさ（.head__icon）
*/
--gallery-lead-h: 680px;
--gallery-shot-h: 480px;
--gallery-shift: clamp(24px, 4vw, 64px);
--head-icon: clamp(44px, 5vw, 64px);
/* The bodies share the black hole's subdued light. Narrow profiles keep the
decoration compact; identity symbols retain one readable size. */
--celestial-w: 580px;
--celestial-profile-w: clamp(200px, 52vw, 240px);
--celestial-symbol: 24px;
/*
横に送る帯（上の帯の目次と、狭い画面の絞り込み）の右端のぼかし。切れている
ことを見せる。覆いなので色ではなく不透明度の坂で、地の色とは関わらない。
ぼかす幅（--fade-w）は、帯の右の余白（--gutter）に収まる幅。帯は右端に同じ幅の
空き（padding）を持ち、同じだけ右の余白へはみ出して置く（「骨格」の .toc）——
溢れていなければ、ぼかしは何も無い空きに掛かるだけで、最後の行き先は薄まらない。
溢れたときだけ、送れる中身がぼかしの下に入る。
*/
--fade-w: min(var(--sp-6), var(--gutter));
--fade-right: linear-gradient(to right, #000 calc(100% - var(--fade-w)), transparent);
/*
入口の軌道図（.system。components.tsx の OrbitSystem、形は src/lib/orbits.ts）。
--system-ratio / --contact-ratio は入口と締めの枠の縦横比。orbits.ts の
HERO_FRAME / CONTACT_FRAME の width / height と同じ数（test/theme.test.ts が
突き合わせる）。SVG は枠いっぱいに貼るので、ずれると絵が枠の中で縮み、
焦点（ブラックホール）が軌道の焦点から外れる。枠の幅は置かれた列の幅（入口の
右の列、900 未満は本文の列いっぱい）。
--system-tilt は軌道面の画面の中での傾き（orbits.ts の TILT と同じ数。test が
突き合わせる）。軌道は orbits.ts が傾けて描き、ブラックホールの絵（円盤は軌道と同じ面）は
ここで同じだけ回す。いまは水平（0deg）。
*/
--system-ratio: 1000 / 560;
--contact-ratio: 1000 / 512;
--system-tilt: 0deg;
/*
締めの軌道図の幅の上限と、高さの上限（表紙の高さの半分）。星系は枠の幅いっぱいに描くので、
広い画面で本文の列いっぱいに伸ばすと、表紙の高さを図だけで食う。背の低い窓では高さで
止める——止めないと、誘いの1文とメールと GitHub の手が1画面目の下へ押し出される
（npm run check:contrast の 1024x768 が字を測れなくなる）
*/
--contact-w: 900px;
--contact-h: calc(var(--cover-h) * 0.5);
/*
軌道の線と天体。
線の太さは画面の px（vector-effect: non-scaling-stroke）で、1px のまま。天体（中心から
溶ける白い光と、まわりのにじみと、業務の天体の輪）は枠の単位で描き、枠の幅に比例する。
手前の天体ほど大きい（奥行きの倍率。回る天体の大きさは transform で変える）。
線はアクセント色。濃さは軌道面の奥から手前へ続けて変わる——手前の端が --orbit-ink、
奥の端はそれに --orbit-far を掛けた薄さ（奥ほど遠い）。外の軌道ほど淡く、いちばん外側は
内側の --orbit-outer 倍（同じ濃さの輪が並ぶと、的のような平らな縞に見えた）。
天体の光のまわりにも外へ消えるにじみ（濃さ --body-halo。色はアクセント。大きさは
components.tsx の Bodies）。字は軌道の上に乗せないので、濃さの
上限は見た目だけで決まり、下限は npm run check:contrast が測る（線が消えるのは改善
ではない）。
*/
--orbit-line: 1px;
--orbit-ink: 0.34;
--orbit-far: 0.15;
--orbit-outer: 0.55;
--orbit-band: 0.42;
/*
ブラックホールの光の絵の濃さ（components.tsx の Hole。影の黒い円には掛けない）。白い光が
濃いと、星屑の円盤よりブラックホールが先に目に入った（持ち主の「主張が強すぎる」）
*/
--hole-light: 0.72;
/*
星屑の粒の太さと濃さ（components.tsx の Stardust）。星屑は回るのでぼかしを掛けない。
ぼかしてにじませていたころと同じ明るさに見えるよう、粒を少し太く濃くしてある
*/
--stardust-w: clamp(0.6px, 0.16cqi, 1.25px);
--stardust-ink: 1;
--stardust-far: 0.35;
--body-halo: 0.55;
/*
星雲（components.tsx の Nebula。形は orbits.ts の nebulaMap）。雲の4枚（光・雲・筋・塵）を
透過 WebP に焼くときの濃さ。色は見た目のプリセットごとの3色（--nebula-a / -b / -c。下の「見た目の
プリセット」）で、モノクロのときも星雲だけは青紫と桃と空色にする（持ち主の「星雲だけ色を
付ける」）。字は星雲の上に乗せない（星空の覆いが字の後ろで消す）。下限は
npm run check:contrast が測る
*/
--nebula-art: url('/assets/nebula-iris.webp?v=c5b0f3ae');
--nebula-light: 0.3;
--nebula-cloud: 0.95;
--nebula-veil: 0.85;
--nebula-dust: 0.85;
--nebula-a: var(--iris);
--nebula-b: var(--rose);
--nebula-c: var(--sky);
/*
宇宙（components.tsx の Cosmos）。星空に敷く星雲の色の淡い広がりの濃さ（2色を透明に
混ぜる割合）
*/
--cosmos-wash: 16%;
/*
字の暗がり（「入口の軌道図」の .hero__copy と、Contact の .contact の ::before）。字の塊の
箱は地の色で塗りきり、その外で星空と星雲へ溶かす長さ。上と下と左（--veil）は短く——900
未満ではすぐ上に図がある。右（--veil-side）は長く——900 以上の入口では右に図があり、短い
坂の縦の縁が、星雲を断ち切る線に見えた。
坂は覆い（--veil-y は縦、--veil-x は横。900 以上だけ重ねる）。濃さは S 字に変える
（3次のなめらかな段差の 1/4・1/2・3/4 の値）——まっすぐな坂は、両端の折れ目が淡い星雲の上で
線に見えた
*/
--veil: clamp(40px, 5vw, 72px);
--veil-side: clamp(64px, 14vw, 240px);
--veil-y: linear-gradient(
to bottom,
transparent,
rgb(0 0 0 / 0.16) calc(var(--veil) * 0.25),
rgb(0 0 0 / 0.5) calc(var(--veil) * 0.5),
rgb(0 0 0 / 0.84) calc(var(--veil) * 0.75),
#000 var(--veil),
#000 calc(100% - var(--veil)),
rgb(0 0 0 / 0.84) calc(100% - var(--veil) * 0.75),
rgb(0 0 0 / 0.5) calc(100% - var(--veil) * 0.5),
rgb(0 0 0 / 0.16) calc(100% - var(--veil) * 0.25),
transparent
);
--veil-x: linear-gradient(
to right,
transparent,
rgb(0 0 0 / 0.16) calc(var(--veil) * 0.25),
rgb(0 0 0 / 0.5) calc(var(--veil) * 0.5),
rgb(0 0 0 / 0.84) calc(var(--veil) * 0.75),
#000 var(--veil),
#000 calc(100% - var(--veil-side)),
rgb(0 0 0 / 0.84) calc(100% - var(--veil-side) * 0.75),
rgb(0 0 0 / 0.5) calc(100% - var(--veil-side) * 0.5),
rgb(0 0 0 / 0.16) calc(100% - var(--veil-side) * 0.25),
transparent
);
/* 入口の字が先に読める短い待ちから、件数だけを数え上げる。図は初めから完成形。 */
--count-dur: 1200ms;
--count-delay: 600ms;
/*
着いたあとも動き続けるもの（「動き続ける」）。星屑と天体の公転と軌道を流れる星（1周の長さは
orbits.ts の INNER_PERIOD から。外側の軌道ほど長い）、吸い込まれる粒（落ちるほど速く回り、
速く寄る。曲線は keyframes の orbit-grain-*）、ブラックホールの光の揺らぎ（明るさが
--breathe-low まで沈んで戻る。片道 --breathe-dur）、星雲の漂い（片道 --drift-dur）と星の
瞬き（周期は星ごと。orbits.ts の nebulaMap）。止める手は置かない（持ち主の判断。動きを
減らす設定では全部止まる）
*/
--drift-dur: 40s;
--drift-ticks: 400;
--breathe-dur: 4s;
--breathe-ticks: 40;
--breathe-low: 0.82;
/* 天体の小さな浮遊・外周の光。画像は固定画素、更新は約100msごと。 */
--celestial-moon-dur: 14s;
--celestial-moon-ticks: 18;
--celestial-neptune-dur: 16s;
--celestial-neptune-ticks: 20;
--celestial-saturn-dur: 14s;
--celestial-saturn-ticks: 18;
--celestial-radiance-dur: 5s;
--celestial-radiance-ticks: 50;
--celestial-breathe-dur: 4s;
--celestial-breathe-ticks: 40;
--celestial-flow-dur: 10s;
--celestial-flow-ticks: 25;
--celestial-flow-offset: -5s;
--celestial-flow-beam-w: 40%;
--celestial-flow-beam: linear-gradient(100deg, transparent, var(--ink), transparent);
--celestial-flow-mask: linear-gradient(
to bottom,
transparent 42%,
#000 49%,
#000 56%,
transparent 63%
);
--celestial-corona-mask: radial-gradient(
circle closest-side,
transparent 59%,
#000 71%,
#000 85%,
transparent 98%
);
--celestial-corona-light: 0.2;
/*
軌道を流れる星（components.tsx の Flows）。後ろに引く尾の、星の側の濃さ（--flow-trail。
後ろへ消える）と、十字の光芒の濃さ（--flow-glint）
*/
--flow-trail: 0.5;
--flow-glint: 0.75;
/* 塗りの押し手（.cta）の高さ。指の的（--tap）より大きく取る、ページでいちばん強い1本 */
--cta-h: 52px;
/*
一覧の行（.entry）の区画の幅。番号の列・札の列・技術の列・矢印の列で、本文の列が
残りを受ける。サムネイルは本文の下に、--entry-thumb を上限に列いっぱいまで。
--entry-title-lh は行の題（--fs-display-xs）の1行の高さで、番号と矢印を題の
1行目の高さの真ん中に置くために読む。
*/
--entry-index: 56px;
--entry-meta: 160px;
--entry-tags: 200px;
--entry-thumb: 320px;
--entry-go: var(--sp-6);
--entry-title-lh: calc(var(--fs-display-xs) * 1.3);
/* 行の題の左のアイコン（.entry__icon）。題の字より一回り大きく、1行目の高さの真ん中に置く */
--entry-icon: calc(var(--fs-display-xs) * 1.7);
--ease: cubic-bezier(0.23, 1, 0.32, 1);
--dur-fast: 180ms;
--dur: 320ms;
/*
ばね。押した部品が戻るとき、スイッチのつまみが走るとき、知らせが出るときに使う。
linear() が使えない環境向けの近似をここに置き、本物は下の @supports で差し替える
*/
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--dur-spring: 640ms;
--press: 0.96;
--dot: 6px;
/*
入口の字の浮かび上がり。不透明度と下からのずれ（--enter-shift）を解き、
句読点で切った塊を --stagger ずつ遅らせて
出す。曲線はばねと同じ1本（--ease-spring）で、量だけをここで決める
*/
--enter-shift: var(--sp-4);
--stagger: 90ms;
/*
配色は黒基調の1つ（夜の地）。文字もボタンも白で組む——アクセントの既定は
白黒（--mono。管理画面の「見た目」でほかの色も選べる）。OS がライトを選んで
いても白い地には切り替えない。「黒の上に白」がこのサイトの見た目の芯で、
白い地に裏返すと別のサイトに見える。紙だけは白い地で刷る（末尾の @media print）。
color-scheme は、フォームの部品やスクロールバーのようなブラウザが描くものも
暗い側にそろえるため（ と同じ値。components.tsx の
ColorSchemeMeta）。
地は色味を持たない黒にする。紫や青に寄せると、面も文字も全部その色に
染まって見え、アクセントを変えても画面の印象が変わらなくなる。
面は不透明な色で塗らず、白をうっすら重ねて作る（ゴースト。管理画面の部品だけ）。
上辺の 1px の光（--highlight）もその面を立たせるためのもの。公開ページは面を
持たず、罫線（--line / --line-strong）で区切る
*/
color-scheme: dark;
--bg: #0c0c0e;
--surface: rgba(255, 255, 255, 0.04);
--surface-hover: rgba(255, 255, 255, 0.07);
--line: rgba(255, 255, 255, 0.07);
--line-strong: rgba(255, 255, 255, 0.13);
--highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
--ink: #f2f2f4;
--ink-mid: #b4b4c2;
--ink-weak: #8a8a96;
/*
アクセントの候補。どれを使うかは管理画面の「見た目」で選ぶ。既定はモノクロ
（--mono）で、リンク・塗りのボタン・選んだ印・軌道の線がどれも白になり、
塗りのボタンの字（--accent-ink）は黒になる
*/
--mono: #f2f2f4;
--mono-soft: rgba(242, 242, 244, 0.1);
--iris: #8f8ff5;
--iris-soft: rgba(143, 143, 245, 0.13);
--violet: #b58cf8;
--violet-soft: rgba(181, 140, 248, 0.16);
--ember: #e8a15c;
--ember-soft: rgba(232, 161, 92, 0.14);
--mint: #5fd0ab;
--mint-soft: rgba(95, 208, 171, 0.13);
--sky: #6fb6f2;
--sky-soft: rgba(111, 182, 242, 0.13);
--rose: #f0899f;
--rose-soft: rgba(240, 137, 159, 0.13);
--accent: var(--mono);
--accent-soft: var(--mono-soft);
--accent-ink: #12121a;
--danger: #e5848a;
--danger-soft: rgba(229, 132, 138, 0.14);
/* 公開する / しない のスイッチ。つまみは押すと潰れて横に伸びる */
--switch-w: 44px;
--switch-h: 24px;
--switch-knob: 18px;
--switch-squish: 1.35;
--switch-track: rgba(255, 255, 255, 0.1);
--switch-track-on: var(--ink);
--switch-knob-off: var(--ink-weak);
--switch-knob-on: var(--bg);
--tap: 40px;
/*
フォーカスの輪郭の太さと、要素からの離し方。素の :focus-visible と、
輪郭を自分で描く3か所（一覧の行の面・スイッチ・見た目の見本）が同じ段を
読む。行の面（.entry__link::after）は輪郭をリンクではなく行に描くので、
素の規則をそのまま受けられず、値を写すことになる——写した値は
いつか食い違うので、ここで1つにしておく。
*/
--focus-ring: 2px;
--focus-offset: 3px;
}
/*
ばねの本物。減衰比 0.62 のばねの応答を、折れ線で近似したもの（行き過ぎて 8% 戻る）。
使えないブラウザでは上の cubic-bezier のまま動く
*/
@supports (transition-timing-function: linear(0, 1)) {
:root {
--ease-spring: linear(
0,
0.008 1.5%,
0.032 3%,
0.068 4.5%,
0.13 6.5%,
0.246 9.5%,
0.628 18.5%,
0.739 21.5%,
0.834 24.5%,
0.901 27%,
0.965 30%,
1.007 32.5%,
1.043 35.5%,
1.076 40.5%,
1.083 46%,
1.071 52%,
1.02 67%,
1.003 75%,
0.993 88%,
0.995 99.5%,
1
);
}
}
/*
見出しの段に高さを足す。
連動する値の可変部が全部 vw だと、幅が広くて背の低い画面（横向きの電話、
分割表示、短い窓）では、見出しだけが画面の高さに対して大きくなりすぎ、
1行の見出しが画面の大半を食う。
可変部を「幅と高さの小さいほう」にすれば、背が低いぶんだけ見出しが下がる。
svh の係数は、設計サイズの3つで今日と同じ数になるように選んである
（いちばん厳しいのは 1440x900 で、svh = 9px。上限 ÷ 9 を上回る係数にする）。
390x844 svh 8.44px / vw 3.90px → どの段も下限に当たる（幅が先に効く）
768x1024 svh 10.24px / vw 7.68px → 幅が先に効く
1440x900 svh 9.00px / vw 14.40px → 高さが先に効くが、値は上限のまま
つまり設計サイズでは1pxも変わらず、背の低い画面でだけ効く。
括りは @supports。svh を知らない環境ではこの節ごと落ちて、上の幅だけの段が
そのまま残る（括らないと var() の差し替えに失敗して、見出しが本文の 14px を
受け継いでしまう）。
*/
@supports (font-size: 1svh) {
:root {
--fs-display-xl: clamp(30px, min(4.3vw, 6.9svh), 62px);
--fs-display: clamp(28px, min(4vw, 6svh), 52px);
--fs-display-sm: clamp(24px, min(3vw, 4.4svh), 38px);
--fs-display-xs: clamp(19px, min(1.7vw, 2.7svh), 24px);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
ページの中の節へのリンク（#about など）では、なめらかに動かす。公開ページだけ
（body[data-site]）で、管理画面には持たせない。送った先の上の空きは、
貼り付いた上の帯の下に隠れないよう「ページの外枠」が帯の高さぶんに差し替える
（帯が貼り付かない全体ページはこの --sp-7 のまま）。
詳細度を 0 にしてあるのは、下の prefers-reduced-motion で素の html の
指定に譲るため。
*/
:where(html:has(> body[data-site])) {
scroll-behavior: smooth;
scroll-padding-top: var(--sp-7);
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
fieldset {
margin: 0;
}
ul,
ol {
padding: 0;
list-style: none;
}
fieldset {
border: 0;
padding: 0;
min-width: 0;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
:focus-visible {
outline: var(--focus-ring) solid var(--accent);
outline-offset: var(--focus-offset);
}
/*
目に見せないが読み上げには残す。
padding と border を0に落としてあるのは必須。clip-path: inset(50%) は
ボーダーボックスの中央を切り抜くので、padding のある要素にこの組を付けると
切り抜きが中身の外側に落ち、文字が見えたまま残る。次に使う人が「この部品は
padding 無しでだけ安全」という条件を覚えなくて済むよう、部品の側で閉じておく。
*/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.skip {
position: absolute;
left: var(--sp-4);
top: -80px;
z-index: 10;
padding: var(--sp-3) var(--sp-5);
background: var(--accent);
color: var(--accent-ink);
font-size: var(--fs-sm);
transition: top var(--dur-fast) var(--ease);
}
.skip:focus {
top: var(--sp-4);
}
/* ============================================================ 骨格 */
/*
公開ページの骨格は body の直下の3つ——上の帯（.top）・本文（main）・足元（.foot）
（src/ui/Layout.tsx）。どのページも同じ骨格で、見た目のプリセットで並べ方は
変えない（src/theme.ts）。
3つとも中身を同じ版面の幅（--w-page）にそろえ、地と罫線だけを画面の端まで
伸ばす。左右の余白は --gutter と、版面より広い画面で余った幅の半分の大きいほう。
箱で包まずに余白で版面を作るのは、帯と足元の罫線を画面の端から端まで引くため。
本文は data-site（公開ページの印）の下の main だけを名指しする。管理画面の
main（admin.css の .admin-main）には当てない。
*/
:is(.top, .foot),
body[data-site] > main {
padding-inline: max(var(--gutter), (100% - var(--w-page)) / 2);
}
body[data-site] > main {
display: flex;
flex-direction: column;
gap: calc(var(--sp-7) * 2);
min-width: 0;
padding-block: var(--page-pad);
}
/*
本文は、入口と締めの星空（.cosmos）の位置の基準で、重なりの容れ物。星空は本文の幅いっぱい
（inset: 0）に、本文の中身の後ろ（z-index: -1）に敷く。容れ物にしないと、-1 の星空が
ページの地の後ろへ沈むことがある。
横だけ切る（overflow-x: clip。スクロール箱は作らず、縦は出してよい）。字の暗がり（「入口の
軌道図」）は字の塊の外へ広げて溶かすので、締めの字が長いと画面の右端の先まで伸びる——
切らないと、見えない暗がりでページが横に動く。本文の幅は画面の幅なので、ほかに切られる
ものは無い（目次と絞り込みのはみ出しは右の余白の中まで）
*/
body[data-site] > main {
position: relative;
isolation: isolate;
overflow-x: clip;
}
/* --- 上の帯 --- */
/*
ロゴ（入口へ）を左に、目次を右に置く1行の帯。下に1本の罫線を引き、面は持たない
（地の --bg のまま。貼り付いたとき、下を流れる本文の字が透けないように地を敷く）。
高さは --top-h で決め打ちにせず下限にする——字を大きくした人の帯を切らない。
*/
.top {
display: flex;
align-items: center;
gap: var(--sp-5);
min-height: var(--top-h);
border-bottom: 1px solid var(--line);
background: var(--bg);
}
.brand {
display: inline-flex;
align-items: center;
flex-shrink: 0;
min-height: var(--tap);
color: var(--ink);
}
/*
ロゴの O の影の黒い円（src/ui/icons.tsx の HoleArt。上の帯・ログイン画面・404・管理画面）。
光は焼いた絵（.logo-art。入口のブラックホールと同じ1枚）で、色を持たない
*/
.logo-core {
fill: var(--hole-core);
}
/*
ワードマーク（ΛSTLOG）。上の帯とログイン画面。高さで大きさを決め、幅は縦横比から。
O の光は字の箱の外へはみ出して見せる（箱を光に合わせると、字が小さくなる）
*/
.brand__word {
display: block;
height: var(--brand-h);
width: auto;
overflow: visible;
}
/*
目次。帯の残りの幅を取り、行き先は右へ寄せる（safe: 溢れたら左から並べる）。
1行のまま横に送れる帯で、折り返さない——折り返すと帯が2段になり、貼り付いた帯が
画面の上を食う（帯の段の数を中身で変えない）。
右端のぼかし（--fade-right）のぶん、帯は右に空き（padding）を持ち、同じだけ右の
余白へはみ出して置く（負の margin）。溢れていなければ最後の行き先は薄まらず、
版面の右端（ほかの行の右端と同じ縦の線）にそろう。理由は :root の --fade-w。
*/
.toc {
display: flex;
flex: 1 1 0;
justify-content: safe flex-end;
gap: var(--sp-5);
min-width: 0;
margin-inline-end: calc(var(--fade-w) * -1);
padding-inline-end: var(--fade-w);
overflow-x: auto;
scrollbar-width: none;
mask-image: var(--fade-right);
}
/*
目次に番号は振らない。目次の番号はブロックの並び順でしかなく、読む人に言う
ことが無い（src/ui/Layout.tsx の目次の注記）。
英字だけの行き先（Projects・Contact…）は、等幅の小さな大文字の札にする。
打ち込んだ見出し（「あとがき」）が行き先の名前になることもあるので、和文の
行き先は本文の書体のまま（lang="en" は Layout.tsx が langOf で付ける。
:root の --font-mono を見ること）。
*/
.toc a {
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: var(--sp-3);
min-height: var(--tap);
color: var(--ink-weak);
font-size: var(--fs-sm);
transition:
color var(--dur-fast) var(--ease),
scale var(--dur-spring) var(--ease-spring);
}
.toc a:lang(en) {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.16em;
text-transform: uppercase;
}
/*
帯は横に送れる箱で、はみ出した輪郭は箱の縁で切られる。フォーカスの輪郭は
行き先の内側に描く（一覧の行の面と同じ扱い。.entry__link:focus-visible::after）
*/
.toc a:focus-visible {
outline-offset: calc(var(--focus-ring) * -1);
}
/*
いまのページ。字を --ink に上げ、頭に四角い印を1つ置く。色だけで分けない
（印の形が残る。WCAG 1.4.1）。目次の行き先は節（#projects）ではなく画面の URL
（/projects）なので、'true' ではなく 'page'
印は枠線で塗る。地（background）で塗ると、強制色モード（Windows のハイコントラスト）
では地の色に置き換わって消える——枠線は字の色になって残る
*/
.toc a[aria-current='page'] {
color: var(--ink);
}
.toc a[aria-current='page']::before {
content: '';
width: var(--dot);
height: var(--dot);
border: calc(var(--dot) / 2) solid var(--accent);
}
/*
管理画面への入口（AdminLink）。ログインしている人にだけ、目次の右に出る。
目次の行と同じ的の高さで、色だけアクセントに寄せる——目次（画面の移動）とは
別の行き先だと見分けるため。鉛筆の形も添えるので、色だけには頼っていない。
npm run check:fit はログインした姿でも測る。
*/
.top__admin {
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: var(--sp-2);
min-height: var(--tap);
color: var(--accent);
font-size: var(--fs-sm);
transition: scale var(--dur-spring) var(--ease-spring);
}
/* --- 足元 --- */
/*
足元。誰のサイトか（名前・職種・一言）と連絡先、その下に著作権表示と全体ページへの
1本。上に1本の罫線を引き、面は持たない。どの幅でも畳まない（上の帯には
ロゴと目次しか置かないので、名乗りと連絡先はここが受ける）。
*/
.foot {
display: flex;
flex-direction: column;
gap: var(--sp-6);
padding-block: var(--sp-7) calc(var(--sp-7) + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
}
.identity {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-5) var(--sp-6);
}
.identity__who {
display: flex;
flex-direction: column;
gap: var(--sp-1);
min-width: 0;
}
/* 名前が主、職種が添え、一言がその下。字の段も色も1段ずつ下げる */
.identity__name {
color: var(--ink);
font-size: var(--fs-lg);
font-weight: 600;
line-height: 1.4;
}
.identity__role {
color: var(--ink-mid);
font-size: var(--fs-sm);
}
.identity__tagline {
color: var(--ink-weak);
font-size: var(--fs-meta);
}
/*
GitHub とメール（components.tsx の Socials）。足元と、Contact のページの本文で
同じ部品。札の面は持たず、字と印だけの行き先にする（的の高さは --tap）。
*/
.socials {
display: flex;
flex-wrap: wrap;
gap: 0 var(--sp-5);
}
.socials a {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
min-height: var(--tap);
color: var(--ink-mid);
font-size: var(--fs-sm);
transition:
color var(--dur-fast) var(--ease),
scale var(--dur-spring) var(--ease-spring);
}
/*
著作権表示と「全体を1ページで見る →」。和文が入るので等幅にせず、和文の最小の
段（--fs-meta）。
*/
.foot__meta {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-5);
color: var(--ink-weak);
font-size: var(--fs-meta);
}
/*
「全体を1ページで見る →」。素の a は color: inherit / text-decoration: none
なので、置くだけでは著作権表示と同じ姿になり、押せるものだと分からない
（WCAG 1.4.1）。下線を引き、色も1段上げる（--ink-weak → --ink-mid）。
文の中のリンクのままにしてある（WCAG 2.5.8 の inline の例外）。
*/
.foot__meta a {
color: var(--ink-mid);
text-decoration: underline;
text-underline-offset: var(--sp-1);
}
/* --- 顔 --- */
.avatar {
position: relative;
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
box-shadow: inset 0 0 0 1px var(--line);
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar__fallback {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: var(--accent-soft);
color: var(--accent);
font-size: calc(var(--avatar-size) * 0.38);
font-weight: 600;
}
/* ============================================================ 本文 */
/*
入口と個人ページの頭（components.tsx の Hero。）と、全体ページの頭。
*/
.hero {
display: flex;
flex-direction: column;
gap: var(--sp-5);
}
/* --- 入口 --- */
/*
入口（.hero--orbit）。左に大見出しの列（.hero__copy）、右に作品の軌道図
（.system）、底に件数の帯（.tally）。900 未満は1列に積み、軌道図を上に置く。
見出しの列が DOM の先頭なのは、読み上げと Tab の順を見出しから始めるため。
並べ替えは grid-template-areas だけで、字の並びは変えない。
表紙の高さ（--cover-h。「ページの外枠」）の余りは 1fr の行が受け、件数の帯は底に
座る。1列のときは見出しの列を軌道図のすぐ下に置き（余りは件数の帯の上に残る）、
2列のときは見出しの列と軌道図を残りの高さの縦の真ん中に置く。
*/
.hero--orbit {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr auto;
grid-template-areas: 'map' 'copy' 'tally';
gap: var(--sp-7);
}
.hero__copy {
grid-area: copy;
align-self: start;
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--sp-5);
min-width: 0;
}
/*
見出しの上の小さな札（components.tsx の Eyebrow。入口の「職種 — 所在地」）。
英字だけなら等幅の小さな大文字（--fs-label を使ってよい「和文が入らない英大文字の
小見出し」）、和文を含めば本文の書体で和文の最小の段。
*/
.eyebrow {
color: var(--ink-weak);
font-size: var(--fs-meta);
}
.eyebrow :lang(en) {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.16em;
text-transform: uppercase;
}
/*
部分のあいだの区切り。飾りなので読み上げには流さない（/ の後ろの代わりの字が空）。
代わりの字は書けるブラウザにだけ渡す（@supports）——書けないブラウザは宣言ごと
捨て、区切りが消えて「SYSTEM ENGINEER神奈川」と続く
*/
.eyebrow > * + *::before {
content: ' — ';
}
@supports (content: '' / '') {
.eyebrow > * + *::before {
content: ' — ' / '';
}
}
/*
大見出し（入口の一文、全体ページの頭の名前、個人ページの大見出し）。
塊（、。まで）を1行ずつに積む。1行に流していたころは、幅しだいで
「置いてお / く。」と語の途中で折れていた（名前は句読点を持たないので1つの塊のまま）。
palt は和文を詰める字形。仮名と約物（、。）の空きが半分になり、見出しの
大きさでもスカスカに見えない。本文には掛けない（小さい字で詰めると読みにくい）。
大きさははしごの最上段（--fs-display-xl）。個人ページの名乗りは下の
.hero__headline で段を下げる。
*/
.hero h1 {
font-family: var(--font-display);
font-size: var(--fs-display-xl);
font-weight: 600;
font-feature-settings: 'palt';
line-height: 1.25;
letter-spacing: -0.02em;
}
.hero h1 .phrase {
display: block;
}
/* リード文。入口と全体ページの頭の1文。小さい字なので 4.5:1 が要る（--ink-mid） */
.hero__lead {
max-width: 32em;
color: var(--ink-mid);
font-size: var(--fs-md);
line-height: 1.9;
/* 塊より細かい所の折れ（1語だけ次の行へ落ちる）を、対応する環境では避ける */
text-wrap: pretty;
}
/*
塗りの押し手（components.tsx の Cta。入口の「一覧で見る →」）。ページで
いちばん強い1本。角は立て、面は --accent で塗る（既定のモノクロでは白い面に黒い字）。
600 未満は列いっぱいに伸ばして、字を左・矢印を右に置く（指で押す的を広く）。
*/
.cta {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-6);
min-height: var(--cta-h);
margin-top: var(--sp-3);
padding-inline: var(--sp-6);
background: var(--accent);
color: var(--accent-ink);
font-size: var(--fs-base);
font-weight: 600;
transition: scale var(--dur-spring) var(--ease-spring);
}
.cta__arrow {
transition: translate var(--dur-spring) var(--ease-spring);
}
/* --- 入口の軌道図 --- */
/*
入口の軌道図（components.tsx の OrbitSystem）。真ん中にブラックホールを置き、
そのまわりに作品を1つずつ軌道に載せる（形は src/lib/orbits.ts。件数だけから
決まる）。天体に作品の札は添えない（持ち主が「いらない」と外した）。図は全部飾り。
絵の層は枠いっぱいに重ねる——軌道の奥の半分・ブラックホール（.hole）・軌道の手前の
半分・天体の順（DOM の順がそのまま重なりの順）。星雲と星空は枠の外、本文の幅いっぱいに
敷く（.cosmos）。縦横比は :root の
--system-ratio（orbits.ts の HERO_FRAME と同じ数）。
横だけ切る（overflow-x: clip。縦は出してよい——着いたときに灯るブラックホールと、
渦を巻いて収まる軌道が、枠の上下へ少し出る）。回して霞ませた出だしの軌道が枠の左右へ
出ても、ページを横に動かさない。
枠は星屑の太さ（cqi）を自分の幅から取る容れ物（container）。重なりの順は
枠の中に閉じる（isolation。貼り付いた上の帯より上には来ない）。
*/
.system {
grid-area: map;
position: relative;
width: 100%;
aspect-ratio: var(--system-ratio);
overflow-x: clip;
container-type: inline-size;
isolation: isolate;
}
.system__bands,
.system__orbits,
.system__stardust,
.system__bodies {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/*
動かない層と、刻んで動く層は、それぞれ自分の合成の層に描き、描いた層を使い回す。
- 動かない層（光の帯 .system__bands・軌道の線 .system__orbits、締めはまとめて .orbits__still）。
帯のぼかし（SVG のフィルタ）を一度だけ描いて使い回す。帯と線は完成形で表示する
- 刻んで動く層（星屑 .system__stardust / .orbits__stardust、天体 .system__bodies /
.orbits__bodies）。どれも同じ刻み（orbits.ts の TICK・BODY_TICK）でだけ姿を変える
（「動き続ける」の steps()）ので、そのあいだは描き直さない
流れる星と吸い込まれる粒は、小さい HTML の箱だけを動かす。動くものをまとめて毎コマ
描き直していたころは、144Hz の画面で GPU の仕事が
1コマの枠を超え、ブラウザごと重くなった
*/
:is(
.system__bands,
.system__orbits,
.orbits__still,
.system__stardust,
.orbits__stardust,
.system__bodies,
.orbits__bodies
) {
will-change: transform;
}
/*
宇宙（components.tsx の Cosmos。入口と締め）。軌道図のまわりを、本文の幅いっぱいの星空に
する——星と、星雲（ブラックホールのまわりから画面の端まで）と、星雲の2色の淡い広がり
（背景の放射の坂。図の焦点のあたりに置く）と流れ星。
字の後ろには何も出さない。小さい字は地の黒で 4.5:1 ぎりぎりの所があり（職種と所在地の札・
件数の見出し）、星1つが字の行に掛かるだけで割る。消し方は2つ——
- 字の塊（入口の見出しの列・締めの字）は、自分の後ろに地の色の暗がりを敷く（下の「字の
暗がり」）。暗がりは塊の箱に付いてくるので、字の長さや画面の幅で塊が動いても外れない。
図の場所から字の列を見積もった覆いで消していたころは、900 以上で左の列を丸ごと消すぶん、
星雲が画面の右半分に寄っていた
- 星空は底で消える（静止した地の色の覆い）。入口は件数の帯の上で、締めは本文の底で
（足元の罫線で雲を断ち切らない）
位置の基準は本文（main。「骨格」）。npm run check:contrast が字の下を測る。
*/
.cosmos {
--cosmos-x: 50%;
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
container-type: size;
}
/*
底のフェードは、動く星空をまとめて抜く mask の代わりに、逆の濃さの地を重ねる。
同じ --bg の上では見え方は同じ。親の mask は星や雲が動くたびに画面大の中間面を合成し、
アクセラレーションを切った Edge で重くなった。覆いは底の帯だけの静止した1枚。
cosmos の子より上、外の軌道と文字より下（cosmos 自体の z-index は -1）に置く。
*/
.cosmos::after {
content: '';
position: absolute;
inset: 0;
top: auto;
height: var(--cosmos-fade-h);
z-index: 1;
background: var(--cosmos-fade);
pointer-events: none;
}
.cosmos__stars {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* HTML の星と流れ星も SVG と同じ1600×1000の視野を中央で slice する。 */
.cosmos__stars--twinkle,
.cosmos__meteors {
position: absolute;
inset: auto;
left: 50%;
top: 50%;
width: max(100cqw, 160cqh);
height: max(62.5cqw, 100cqh);
transform: translate(-50%, -50%);
}
.cosmos__twinkle {
position: absolute;
border-radius: 50%;
background: var(--ink);
transform: translate(-50%, -50%);
will-change: opacity;
}
/*
星。太さは星ごと（style）で、画面の px のまま。光芒は細い十字で、真ん中から先へ消える
（坂は部品が style で渡す。同じ明るさの十字は照準に見えた）
*/
.cosmos__stars path {
fill: none;
stroke: var(--ink);
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.cosmos__stars .cosmos__glint {
stroke-width: var(--orbit-line);
stroke-linecap: butt;
opacity: 0.5;
}
.cosmos__spark {
stop-color: var(--ink);
}
/* 流れ星。90視野単位の筋を置いた向きのまま流す。太さは画面pxのまま。 */
.cosmos__meteor-frame {
position: absolute;
transform-origin: 0 0;
}
.cosmos__meteor {
position: absolute;
right: 100%;
top: calc(var(--orbit-line) * -0.75);
width: 100%;
height: calc(var(--orbit-line) * 1.5);
background: linear-gradient(to right, transparent, var(--ink));
opacity: 0;
will-change: transform, opacity;
}
/* 元の丸い線端と同じ、筋の先の半円。 */
.cosmos__meteor::after {
content: '';
position: absolute;
left: 100%;
top: 0;
width: calc(var(--orbit-line) * 1.5);
height: 100%;
border-radius: 50%;
background: var(--ink);
transform: translateX(-50%);
}
/*
図の幅（--cosmos-fig-w）と高さ（--cosmos-fig）と、底の消え方。入口の図は本文の幅
いっぱい（900 以上は右の列）で縦横比が --system-ratio、締めの図は .orbits と同じ幅の
決め方で --contact-ratio。本文の幅は min(画面 − 余白, 版面)。
入口は件数の帯の上で消えきる（帯と行の間は約 112px。帯の上の罫線より 20px ほど上）。
締めは本文の底（足元の罫線）の手前で消えきる
*/
.cosmos--hero {
--cosmos-fig-w: min(100vw - 2 * var(--gutter), var(--w-page));
--cosmos-fig: calc(var(--cosmos-fig-w) / (var(--system-ratio)));
--cosmos-fade-h: calc(var(--page-pad) + 220px);
--cosmos-fade: linear-gradient(to bottom, transparent 0, var(--bg) 120px);
}
.cosmos--contact {
--cosmos-fig-w: min(
min(100vw - 2 * var(--gutter), var(--w-page)),
var(--contact-w),
var(--contact-h) *
(var(--contact-ratio))
);
--cosmos-fig: calc(var(--cosmos-fig-w) / (var(--contact-ratio)));
--cosmos-fade-h: calc(var(--page-pad) * 2);
--cosmos-fade: linear-gradient(to bottom, transparent, var(--bg));
}
/* 図の焦点の高さと、星雲の色の淡い広がり（星雲の芯のまわり） */
.cosmos--hero,
.cosmos--contact {
--cosmos-y: calc(var(--page-pad) + var(--cosmos-fig) * var(--cosmos-focus));
background:
radial-gradient(
ellipse calc(var(--cosmos-fig-w) * 0.9) calc(var(--cosmos-fig) * 0.9) at
calc(var(--cosmos-x) - 8%) var(--cosmos-y),
color-mix(in srgb, var(--nebula-a) var(--cosmos-wash), transparent),
transparent
),
radial-gradient(
ellipse calc(var(--cosmos-fig-w) * 0.7) calc(var(--cosmos-fig) * 0.8) at
calc(var(--cosmos-x) + 10%) var(--cosmos-y),
color-mix(in srgb, var(--nebula-b) var(--cosmos-wash), transparent),
transparent
);
}
/*
字の暗がり。入口の見出しの列と、締めの字の塊の後ろに、地の色を敷く。塊の箱は塗りきり、
上と下へ --veil だけ広げた所で、星空と星雲へ溶かす。900 未満は字の塊が本文の列いっぱい
なので、横は本文の端から端まで（左右の余白 --gutter ぶん広げる）の帯にする。900 以上は
塊を中身の幅に縮め、左は --veil、右は --veil-side で溶かす（「900px 以上」）。
重なりは星空（.cosmos）と同じ z-index: -1 の層で、文書の順が星空より後——星空と星雲の上、
字の下に描かれる（本文 main が重なりの容れ物。「骨格」）。軌道図（.system・.orbits）は
ふつうの層なので、暗がりが図に掛かっても、軌道の線と天体は消さない。
*/
.hero--orbit > .hero__copy,
.orbital > .contact {
position: relative;
}
.hero--orbit > .hero__copy::before,
.orbital > .contact::before {
content: '';
position: absolute;
inset: calc(-1 * var(--veil)) calc(-1 * var(--gutter));
z-index: -1;
background: var(--bg);
mask-image: var(--veil-y);
pointer-events: none;
}
/*
星雲（components.tsx の Nebula。星空の中、ブラックホールのまわりから画面の端まで）。
ブラックホールの位置（--cosmos-x / --cosmos-y）を真ん中に、図の幅（--cosmos-fig-w）に
比例した大きさで置く——軌道のまわりの芯の雲は図と一緒に伸び縮みし、外の雲が画面の端へ
届く（900 以上の入口では、箱の左の端が本文の左の端より外に出る）。箱の縦横比は orbits.ts の
NEBULA と同じ（test/theme.test.ts が突き合わせる）。はみ出したぶんは星空（.cosmos）が切る。
位置は余白（margin）で引く——translate は漂う動きが使う（「動き続ける」）。
4層の模様は生成時にだけフィルタを掛けて透過 WebP に焼く（scripts/nebula/render.mjs）。
色と濃さは :root の --nebula-* が生成入力。配色は [data-accent] が版つきの
--nebula-art を選ぶ。瞬く星と同じ描画に、大きなノイズのフィルタを持たせない。
*/
.cosmos__nebula {
--nebula-w: calc(var(--cosmos-fig-w) * 3.53);
position: absolute;
left: var(--cosmos-x);
top: var(--cosmos-y);
width: var(--nebula-w);
aspect-ratio: 3600 / 2000;
margin-left: calc(var(--nebula-w) / -2);
margin-top: calc(var(--nebula-w) / -3.6);
background-image: var(--nebula-art);
background-size: 100% 100%;
}
/*
ブラックホール（components.tsx の Hole）を焦点に置き、枠と一緒に伸び縮みさせる。置き場所
（--hole-x / --hole-y）と大きさ（--hole-w）は、部品が orbits.ts の数（枠の focus と hole）
から組んで style で渡す。軌道面と同じ傾きに回す（--system-tilt）。
焼いた光の絵（logo.ts の BLACKHOLE_ART。ロゴの O と同じ1枚）と、その下に敷く影の黒い円
（::before。径は部品が絵の幅に対する割合 --hole-shadow で渡す）。箱の高さは絵の縦横比
（img の width / height）から決まる。影は不透明なので、奥を回る軌道はその後ろに隠れる。
光だけが揺らぐ（「動き続ける」）。
光は白銀、影は --hole-core（ロゴの O の .logo-core と同じ段）。見た目の
プリセットのアクセント色では塗らない（ロゴの O と同じ1つのものに見せる）。
*/
.hole {
position: absolute;
left: var(--hole-x);
top: var(--hole-y);
width: var(--hole-w);
translate: -50% -50%;
rotate: var(--system-tilt);
pointer-events: none;
}
.hole::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: var(--hole-shadow);
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: var(--hole-core);
}
.hole__art {
position: relative;
display: block;
width: 100%;
height: auto;
opacity: var(--hole-light);
}
/*
軌道と天体（入口と締めで同じ）。絵は色を持たず、線はアクセント色、点は字の色。
線の太さは画面の px（non-scaling-stroke。:root の --orbit-line の話）。
線の色は、部品が線ごとに渡す坂（components.tsx の OrbitLines。stroke 属性の
url(#…)）が持つ。坂の両端の色と濃さはここで敷く——奥の端は --orbit-far を掛けて薄く、
手前へ続けて --orbit-ink まで濃くなる（奥ほど遠い）。.orbit に stroke を書かない（書くと
坂を上書きする）。外の軌道ほど淡い——部品が軌道ごとに内側の 0 から外側の 1 までの
位置（--reach）を渡し、濃さは外側で --orbit-outer 倍まで落ちる
*/
.orbit {
fill: none;
vector-effect: non-scaling-stroke;
stroke-width: var(--orbit-line);
opacity: calc(1 - var(--reach, 0) * (1 - var(--orbit-outer)));
}
/*
軌道に沿う光の帯（components.tsx の OrbitBands）。色は線と同じアクセント。区間ごとの太さと
濃さは部品が渡し（手前ほど太く明るい）、帯ぜんぶの濃さは :root の --orbit-band
*/
.orbit-bands {
fill: none;
stroke: var(--accent);
opacity: var(--orbit-band);
}
/*
軌道に沿って散る星屑（components.tsx の Stardust）。明るさの段ごとの太さ（--stardust-w の
倍）と濃さ。太さは画面の px（点を軌道の楕円の枠で潰さない）で、枠の幅に比例する（電話の
小さな枠で粒が帯を埋めない）。色は字の白で、外側 SVG の奥・手前に代表の濃さを掛ける。
--stardust-far から不透明へ続く坂の1/4・3/4の濃さにして、奥ほど淡い手がかりを保つ。
SVG 内・外側とも mask を掛けない（ソフトウェア描画では大きい層を描き直す）
*/
.stardust path {
fill: none;
stroke: var(--ink);
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.system__stardust--far,
.orbits__stardust--far {
opacity: calc((1 + 3 * var(--stardust-far)) / 4);
}
.system__stardust--near,
.orbits__stardust--near {
opacity: calc((3 + var(--stardust-far)) / 4);
}
.stardust__0 {
stroke-width: var(--stardust-w);
opacity: calc(var(--stardust-ink) * 0.45);
}
.stardust__1 {
stroke-width: calc(var(--stardust-w) * 1.5);
opacity: calc(var(--stardust-ink) * 0.65);
}
.stardust__2 {
stroke-width: calc(var(--stardust-w) * 2.1);
opacity: calc(var(--stardust-ink) * 0.85);
}
.stardust__3 {
stroke-width: calc(var(--stardust-w) * 2.8);
opacity: var(--stardust-ink);
}
.orbit-depth__far {
stop-color: var(--accent);
stop-opacity: calc(var(--orbit-ink) * var(--orbit-far));
}
.orbit-depth__near {
stop-color: var(--accent);
stop-opacity: var(--orbit-ink);
}
/*
天体は光る惑星（components.tsx の Bodies）。中心がいちばん明るく外へ溶ける白い光（字の色の
放射の坂）と、そのまわりのにじみ（アクセント色の、外へ消える放射の坂）。縁のくっきりした
白い円は、軌道を回る平らな丸い点に見えた。奥行きの倍率（手前ほど大きい）は部品が scale で
掛け、光・にじみ・輪がそろって縮む（線の太さを画面の px に保つ non-scaling-stroke は輪の
線だけ）。業務は輪のある惑星——軌道面と同じ角度から見た輪を、奥の半分は光の後ろ、手前の
半分は前に描く。区分を色だけで分けない（形で分ける）
*/
.orbit-body path {
fill: none;
stroke-linecap: round;
}
.orbit-body__light {
stop-color: var(--ink);
}
.orbit-body__halo {
opacity: var(--body-halo);
}
.orbit-body__glow {
stop-color: var(--accent);
}
.orbit-body__ring {
stroke: var(--ink);
stroke-width: var(--orbit-line);
vector-effect: non-scaling-stroke;
}
/* --- 入口の件数の帯 --- */
/*
件数の帯（components.tsx の Tally）。表紙の底に、上に1本の罫線を引いて、
セルを同じ幅で横に並べる（セルの数は区分の数で変わる）。値が上・見出しが下
（ の dt が先なので、並べ替えは column-reverse。読む順は「見出し → 値」）。
*/
.tally {
grid-area: tally;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: var(--sp-5);
border-top: 1px solid var(--line);
}
.tally__cell {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
gap: var(--sp-2);
padding-top: var(--sp-5);
}
.tally dt {
color: var(--ink-weak);
font-size: var(--fs-meta);
}
.tally dt:lang(en) {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* 値。字は細く大きく、数字の幅をそろえる（数え上げで幅が揺れない） */
.tally__num,
.tally__year {
font-size: var(--fs-display-sm);
font-weight: 300;
letter-spacing: -0.02em;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
/* --- 締めの軌道図 --- */
/*
締めの軌道図（components.tsx の ContactOrbits）。入口と同じ星系を、横長の枠に
描いて列の真ん中に置く。縦横比は :root の --contact-ratio（orbits.ts の
CONTACT_FRAME）、幅の上限は --contact-w と、高さの上限 --contact-h から決まる幅。
*/
.orbits {
position: relative;
align-self: stretch;
justify-self: center;
width: min(100%, var(--contact-w), calc(var(--contact-h) * var(--contact-ratio)));
aspect-ratio: var(--contact-ratio);
container-type: inline-size;
}
/* 星雲・軌道の奥の半分・ブラックホール・手前の半分の順に重ねる（入口と同じ） */
.orbits > svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* --- 入口に着いたとき --- */
/*
星系は完成形で初めから出す。大きい層の opacity・blur・scale や軌道の stroke-dashoffset を
動かす登場は、アクセラレーションを切った Edge で毎コマの描き直しになった。
文字・名札・件数だけが opacity と translate で浮かぶ（ぼかしを掛けない）。件数は600ms待って
数え上がる。どれも一度きりで5秒以内に止まる。続く動きは下の「動き続ける」。
終わりの姿（to）は書かず、動きを減らす設定で animation: none になった姿も完成形にする。
*/
@keyframes rise-in {
from {
opacity: 0;
translate: 0 var(--enter-shift);
}
}
.hero h1 .phrase,
.hero__copy > :not(h1),
.hero > .nameplate,
.tally__cell {
animation: rise-in var(--dur-spring) var(--ease-spring) backwards;
}
/* 札 → 見出しの塊 → リード文 → 押し手。件数の帯は字を先に見せてから */
.hero h1 .phrase {
animation-delay: calc((var(--i, 0) + 1) * var(--stagger));
}
.hero__copy > .hero__lead {
animation-delay: calc(3 * var(--stagger));
}
.hero__copy > .cta {
animation-delay: calc(4 * var(--stagger));
}
.tally__cell {
animation-delay: calc(var(--count-delay) + var(--i, 0) * var(--stagger));
}
/* --- 動き続ける --- */
/*
着いたあとも動き続けるもの（components.tsx の Flows・Stardust・Bodies・Dust・Hole）。入口と
締めで同じ。
- 星屑と天体が軌道ごと公転する（持ち主の「軌道の線を星と一緒に動かして」）。軌道の楕円の
枠の中で、星屑と天体の置き場所を1周回す（orbit-swirl を linear で。周期は軌道ごとの
--dur で、内側ほど速い）。天体の形はその中で回転を打ち消し（orbit-unswirl）、大きさは
手前へ回るほど大きい（orbit-sway。0 から 1 の keyframes を、軌道ごとの大きさの揺れを
書いた linear() で送る——量は keyframes ではなく timing が持つ）
- 軌道に沿って星が流れる。輝く星が、星屑と天体より速く回る。65点の投影位置と尾の姿勢を
SSR で固定の CSS keyframes へ焼き、区間ごとの steps() を60Hzの格子にそろえる。
周期は軌道ごとの --dur。芯と光芒の小さい SVG は向きを保ち、尾の箱だけを matrix で回す
- 光の粒が渦を巻いてブラックホールへ吸い込まれ、黒い円の縁で光に溶ける（orbit-grain-fall で
投影した螺旋の道を進む）。落ちるほど速い10%ごとの曲線を65点へ写し、明滅の節点と一緒に
SSR で固定の CSS keyframes へ焼く。位置と opacity の両方を区間ごとの steps() で60Hzへそろえる
- ブラックホールの光が明るさを沈めては戻す（orbit-breathe。光の絵の不透明度だけを変え、
下に敷いた影の黒い円は動かさない——絵の明るさを filter で落とすと、白い光が灰色に
くすんだ）
- 星雲がゆっくり漂い（orbit-drift。透過 WebP を敷いた箱ごと動かし、生成時のフィルタを
ブラウザで掛け直さない）、星が瞬き（orbit-twinkle。小さい HTML の円の明るさだけ。
もとの明るさは星ごとの style の opacity で、
keyframes は真ん中の暗さだけを持つ）、流れ星が流れる（orbit-meteor）
keyframes に var() を書かない（光の揺らぎの1つを除く）。var() を持つ keyframes は、
動いている要素ごとに毎コマ解き直され、粒の多い入口では style の計算だけでコマの予算を
食った（電話相当で 1 秒あたり 480ms。固定の値にして 75ms）。流れる星の位置と尾の姿勢、粒の
螺旋と明滅は、SSR が計算した固定の数値だけを keyframes に持つ。星屑と天体は楕円の形と
置き場所を動かない親の transform 属性が持ち、動く子が1周する。天体の大きさの揺れの量は timing（linear()）が
持つ（timing は一度だけ読まれ、毎コマ解き直されない）。
- 止める手は置かない（持ち主の判断。5 秒を超えて続く動きの止め方は、動きを減らす設定
だけが受ける）。動きを減らす設定では、星屑と天体は回らず、流れる光と粒の層は出さない
——止まった姿が完成形
*/
@keyframes orbit-swirl {
to {
transform: rotate(1turn);
}
}
@keyframes orbit-unswirl {
to {
transform: rotate(-1turn);
}
}
/*
天体の大きさの揺れ。0 から 1 へ送るだけで、どの向きでどれだけの大きさかは、部品が軌道
ごとに渡す linear()（--sway。orbits.ts の OrbitPath の sway）が決める
*/
@keyframes orbit-sway {
from {
scale: 0;
}
to {
scale: 1;
}
}
@keyframes orbit-drift {
to {
translate: 0.7% -0.45%;
}
}
@keyframes orbit-twinkle {
50% {
opacity: 0.15;
}
}
/*
流れ星。置いた向きのまま、周期の頭の 6% で420視野単位だけ流れて消える。
自分の長さ90の 420/90 倍へ動かすので、slice の倍率が変わっても距離を保つ。
*/
@keyframes orbit-meteor {
from {
transform: translate(0px, 0px);
opacity: 0;
}
1% {
opacity: 1;
}
6%,
to {
transform: translate(466.666667%, 0px);
opacity: 0;
}
}
/* 光の揺らぎは1つの要素だけなので、明るさの下限を :root の段から読む（光の濃さに掛ける） */
@keyframes orbit-breathe {
from {
opacity: calc(var(--hole-light) * var(--breathe-low));
}
}
/*
軌道を流れる星（components.tsx の Flows）。輝く星——中心から外へ溶ける芯の光と、先へ消える
十字の光芒（入口の星空のいちばん明るい星と同じ形）——が、後ろに淡い尾を引いて軌道を回る。
尾は星の側が濃く、後ろへ消える坂（--flow-trail）。軌道の線の破線を送っていたころは、軌道の
上を移る線に見えた（持ち主の「移動する線をもっと星っぽく」）
*/
.orbit-flows {
position: absolute;
inset: 0;
overflow: clip;
container-type: inline-size;
pointer-events: none;
}
.orbit-flow,
.orbit-flow__tail {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
transform-origin: 0 0;
will-change: transform;
}
.orbit-flow__star,
.orbit-flow__tail-art {
position: absolute;
overflow: visible;
}
.orbit-flow__light {
stop-color: var(--ink);
}
.orbit-flow__fade {
stop-color: var(--ink);
stop-opacity: var(--flow-trail);
}
.orbit-flow__glint {
fill: none;
stroke-width: var(--orbit-line);
vector-effect: non-scaling-stroke;
opacity: var(--flow-glint);
}
.orbit-dust {
position: absolute;
inset: 0;
overflow: clip;
container-type: inline-size;
pointer-events: none;
}
.orbit-grain__dot {
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
opacity: 0;
will-change: transform, opacity;
}
:is(.orbit-flows, .orbit-dust, .cosmos__meteors) {
display: none;
}
@media (prefers-reduced-motion: no-preference) {
/* 初期化 helper が小さい装飾群を順に始める。印が無いJS無効時は通常のCSS動作。 */
html[data-motion-staged]
:is(
.orbit-flow,
.orbit-flow__tail,
.cosmos__twinkle,
.cosmos__meteor,
.orbit-grain__dot,
.orbit-spin,
.orbit-unspin,
.orbit-body,
.hole__art,
.cosmos__nebula
):not([data-motion-ready]) {
/* biome-ignore lint/complexity/noImportantStyles: 下の通常animationを開始済みの印が付くまで止める */
animation: none !important;
}
/* 未開始の星は枠の原点に出さない。準備後は元の可視状態へ戻る。 */
html[data-motion-staged] .orbit-flow:not([data-motion-ready]) {
visibility: hidden;
}
:is(.orbit-flows, .orbit-dust) {
display: inline;
}
.cosmos__meteors {
display: block;
}
.cosmos__meteor {
animation: orbit-meteor var(--dur) linear var(--delay) infinite;
}
/* SSR が投影した65点の固定 CSS を小さい箱だけに掛ける。区間の steps() は60Hzの格子 */
.orbit-flow,
.orbit-flow__tail {
animation: var(--motion) var(--dur) linear infinite;
}
/*
星屑と天体の公転。天体は置き場所ごと回り（orbit-spin）、その中で回転を打ち消す
（orbit-unspin）。どちらも読み込んだ時から同じ秒数で回るので、打ち消しはずれない
*/
.orbit-spin {
animation: orbit-swirl var(--dur) linear infinite;
}
.orbit-unspin {
animation: orbit-unswirl var(--dur) linear infinite;
}
/*
星屑は1周を --ticks 回に刻んで進める（1秒に10回。ゆっくりした公転）。進まない
あいだは星屑の層を描き直さない（「入口の軌道図」の .system__stardust）
*/
.stardust .orbit-spin {
animation-timing-function: steps(var(--ticks));
}
/*
天体も1周を --ticks 回に刻んで進める（BODY_TICK ごと。回転と打ち消しは同じ刻みなので、
どの瞬間も打ち消し合う）。大きさの揺れは段の linear()（部品の stairs）
*/
.orbit-bodies :is(.orbit-spin, .orbit-unspin) {
animation-timing-function: steps(var(--ticks));
}
/*
天体の大きさの揺れ。出だしの向きのぶんだけ先から始める（--delay）。linear() を知らない
ブラウザでは、この宣言ごと読めない（var() で入れた値が読めない宣言は、無いのと同じ）——
大きさは止まった姿のまま回る
*/
.orbit-body {
animation: orbit-sway var(--dur) var(--sway) var(--delay) infinite;
}
.orbit-grain__dot {
animation: var(--motion) var(--dur) linear var(--delay) infinite;
}
.hole > .hole__art {
animation: orbit-breathe var(--breathe-dur) steps(var(--breathe-ticks)) infinite alternate;
}
/* 星雲は完成形の背景の箱ごと漂う。入口も締めも同じ動き。 */
.cosmos__nebula {
animation: orbit-drift var(--drift-dur) steps(var(--drift-ticks)) infinite alternate;
}
/*
星の瞬きも刻んで変える（明暗の片道を --ticks 回に。orbits.ts の cosmosMap が周期と遅れを
TICK の格子に乗せる）。静止星とは分けた小さい HTML の円の opacity だけを変える
*/
.cosmos__twinkle {
animation: orbit-twinkle var(--dur) steps(var(--ticks)) var(--delay) infinite;
}
}
/*
件数の数え上げ。値の字（07）はページにそのまま置き、数え上げは ::after の
counter() が上に重なるだけ——止まった姿は字そのもので、読み上げも Ctrl-F も
字を読む。数えるあいだだけ、字を透明にして ::after を見せる。
--n は @property で整数として登録する（登録しないと途中の値を持てず、跳ぶ）。
*/
@property --n {
syntax: '';
inherits: false;
initial-value: 0;
}
@keyframes orbit-count {
from {
--n: 0;
}
}
@keyframes orbit-count-cover {
from,
to {
color: transparent;
}
}
@keyframes orbit-count-show {
from,
to {
opacity: 1;
}
}
.tally__num {
position: relative;
--n: var(--to);
counter-reset: n var(--n);
animation:
orbit-count var(--count-dur) var(--ease) var(--count-delay) backwards,
orbit-count-cover var(--count-dur) linear var(--count-delay) backwards;
}
/*
数え上げの字。代わりの字を空にして読み上げに流さない——流すと、dd の字と合わせて
「07 07」と2度読まれる（opacity: 0 は読み上げの木から外さない）。代わりの字は
書けるブラウザにだけ渡す（区切りの字の .eyebrow と同じ）
*/
.tally__num::after {
content: counter(n, decimal-leading-zero);
position: absolute;
inset: 0;
color: var(--ink);
opacity: 0;
animation: orbit-count-show var(--count-dur) linear var(--count-delay) backwards;
}
@supports (content: '' / '') {
.tally__num::after {
content: counter(n, decimal-leading-zero) / '';
}
}
/* --- 句読点と折り返し --- */
/*
句読点までの塊（src/ui/components.tsx の Phrases）。塊の中では折らせない。
塊が行より長いときだけ中で折れる（inline-block は行の幅を超えない）
*/
.phrase {
display: inline-block;
}
/*
見出し・一覧の行の説明・段落の折り返し。語の途中で折らない。
和文は既定だとどの字の間でも折れるので、「プラットフォームを1 / つの」
「置いてお / く。」のように語の途中で行が変わる。word-break: auto-phrase は
ブラウザが文節を見て、文節の切れ目でだけ折る指定（lang="ja" の文書で効く）。
いまは Chromium にしか無く、知らないブラウザではこの1行だけが捨てられて、
今までどおり字の間で折れる（進歩的な強化。壊れる環境は無い）。
text-wrap: pretty は段落の最後の行に1〜2字だけ落ちるのを避ける。
打ち込む中身（見出し・説明・本文）は、Phrases のように句読点で塊に切って
おけない——段落の長い塊を inline-block にすると、行に入りきらない塊が丸ごと
次の行へ落ち、行末に大きな空きが残る。Phrases は短い一文（入口の大見出しと
リード文、締めの誘いの1文）の、どのブラウザでも同じ所で折りたい場所だけに使い、
ここは文節を知っているブラウザに任せる。入口の大見出しを入れてあるのは、
塊が1行より長くなった（背の低い窓で字が大きい）ときに、塊の中でも文節で折るため。
*/
:is(
.hero h1,
.head :is(h1, h2, h3),
.entry__main :is(h3, p),
.statement__text,
.contact__lead,
.bio p
) {
word-break: auto-phrase;
text-wrap: pretty;
}
/* --- 個人ページの頭 --- */
/*
個人ページの名乗りは、入口の大見出しより1段下げる（--fs-display）。章の見出し
（About…。--fs-display-sm）よりは大きく、ページの h1 として立つ。
要素とクラスの両方で書いてあるのは必須。この見出しは