/* pictkura の紹介サイト。アプリの「Darkroom Neutral」をそのまま web へ持ってきた。
 *
 * 方針:
 * - 無彩色（chroma 0）で組み、彩度は青のアクセント1色だけに使う。写真の色を歪めないため。
 *   アプリ側の `ui/src/tokens.css` と同じ理屈で、値もそこから取っている。
 * - サイトはダーク固定。OSのテーマには追従しない（写真家向けの読み物として黒地に寄せる）。
 *   **アプリに同梱されるマニュアル（docs/manual*.html）はここを読み込まない**——
 *   同梱物から外部への通信が発生すると、READMEの「外に出る通信は更新確認の1本だけ」が
 *   崩れるため、あちらは同じ値をインラインで持ち、書体も端末内蔵のものだけを使う。
 * - 幅で折るのは 1180 / 1080 / 900 / 760 / 360px の5か所だけ。凝った可変は入れない。
 *   1080px が帯の分かれ目——ここから下はナビを ☰ の中へ畳む（`.bar` の注を見よ）。
 */

:root {
  --bg: oklch(0.145 0 0);
  --bg-deep: oklch(0.115 0 0);
  --bg-raise: oklch(0.16 0 0);
  --surface: oklch(0.19 0 0);
  --line: oklch(1 0 0 / 0.08);
  --line-strong: oklch(1 0 0 / 0.14);
  --text: oklch(0.95 0 0);
  --text-soft: oklch(0.78 0 0);
  --text-muted: oklch(0.7 0 0);
  --text-faint: oklch(0.55 0 0);
  --accent: oklch(0.72 0.14 255);
  --accent-bright: oklch(0.82 0.12 255);
  --fav: oklch(0.82 0.16 85);
  --pick: oklch(0.72 0.15 165);
  --danger: oklch(0.62 0.2 25);
  --warn: oklch(0.68 0.15 60);
  --radius: 4px;
  --pad: 64px;
  --font-jp: "Zen Kaku Gothic New", "Archivo", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --font-en: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* display を持つ要素に hidden を付けても消えないのを塞ぐ（`download.js` の出し分け） */
[hidden] { display: none !important; }

/* 見出しへ飛んだとき、上の帯（`.bar` は sticky で 72px）に隠れないよう逃がす */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-jp);
  font-size: 15.5px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
/* 英文の面にも和字が1文字だけ出ることがある（about の `kura (蔵)`）。
   Archivo は CJK を持たないので、和字だけが落ちる先を後ろに足しておく——
   font-family は1文字ずつ落ちるので、ラテン字の見た目は変わらない */
body[lang="en"] { font-family: var(--font-en), "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", sans-serif; line-height: 1.65; }

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent-bright); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0 0 18px; }

::selection { background: oklch(0.72 0.14 255 / 0.35); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.disp {
  font-family: var(--font-en);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.14;
}
:lang(ja) .disp { font-family: var(--font-en), var(--font-jp); }
/* 小見出し。大文字化も広い字間もしない——和文に効かないうえ、飾りだけが浮く */
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.muted { color: var(--text-muted); }
.em { font-weight: 500; color: var(--text); }

/* 画面読み上げにだけ渡す見出し・リンク */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--text); color: var(--bg); padding: 10px 16px; z-index: 10;
}
.skip:focus { left: 8px; top: 8px; }

/* ─── 上のバー ─── */
/* **帯はこのサイトの目次である。** 読む人はここで「どれだけの場所があるか」を掴むので、
   幅やページで中身が変わると地図が壊れる（利用者の指摘）。だから**何も間引かない**——
   14ページすべて、どの幅でも同じ7項目。
   ただし**並べ方は幅で変える**。横一列のままだと、実測で日本語の帯は 890px、英語は 813px を
   切ったところから折り返しが始まり、電話の幅（390px）では帯そのものが 220px まで伸びていた。
   そこで 1080px 以下では項目を ☰ の中へ畳み、帯にはブランドとダウンロードだけを残す
   （`.nav-toggle` 以下）。畳むのは見せ方であって、行き先は 1 つも減らさない。
   JS が動かない端末では畳まず、今まで通り折り返して全部出す。 */
.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; min-height: 72px; padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
}
/* 地とぼかしは擬似要素へ逃がす。`.bar` 自身に `backdrop-filter` を置くと、
   **WebKit では絶対配置の子（＝開いた札）が帯の箱で切られる**ことがある
   （ゲート2の指摘。iPhone も macOS の Safari も手元で確かめられなかったので、
   確かめる代わりに、切られようのない形にした）。見た目は変わらない */
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: oklch(0.145 0 0 / 0.9);
  backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand .disp { font-size: 19px; letter-spacing: 0.01em; }
.brand .kind {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint);
  border-left: 1px solid var(--line-strong); padding-left: 14px;
}
.nav {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end;
  gap: 12px 28px; font-size: 14px; color: var(--text-soft);
  /* 余白はブランドとナビの間に置く。ナビとダウンロードは右端で隣り合わせておく */
  margin-left: auto;
}
/* 項目の中では折らない。折るなら項目と項目の間で折る。
   断点を丁寧に置いても字体・言語・拡大率で実寸は動くので、広い側にも折り返しは残しておく */
.nav a { color: var(--text-soft); white-space: nowrap; }
.nav a[aria-current] { color: var(--text); border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
/* 帯の右端。ダウンロードは狭くしても畳まない——ここだけは押しに来る人がいる */
.bar-end { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.bar-end .btn[aria-current] { border-bottom-color: var(--accent); color: var(--text); }
/* ☰ は狭いときだけ出す。JS が無ければ（`js-nav` が付かなければ）最後まで出ない */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid oklch(1 0 0 / 0.22); border-radius: var(--radius);
  background: none; color: var(--text-soft); cursor: pointer;
}
.nav-toggle:hover { border-color: oklch(1 0 0 / 0.4); color: var(--text); }
.nav-toggle .i-close, .nav-toggle[aria-expanded="true"] .i-open { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }
.lang {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);
  border-left: 1px solid var(--line-strong); padding-left: 20px; white-space: nowrap;
}
.lang a { color: var(--text-faint); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 28px; border-radius: var(--radius);
  font-size: 15px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap;
}
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: #fff; color: var(--bg); }
.btn-ghost { border: 1px solid oklch(1 0 0 / 0.2); color: var(--text-soft); }
.btn-ghost:hover { border-color: oklch(1 0 0 / 0.4); color: var(--text); }
.btn-sm { height: 38px; padding: 0 20px; font-size: 13.5px; border: 1px solid oklch(1 0 0 / 0.22); }

/* ─── 見出しのある区画 ─── */
.section { padding: 104px var(--pad) 96px; }
.section.deep { background: var(--bg-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section.raise { background: oklch(0.125 0 0); border-top: 1px solid var(--line); }
.sec-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 40px; }
.sec-head .num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--accent); }
.sec-head .num.off { color: var(--text-faint); }
.sec-head h2 { font-size: 32px; }
.sec-head .rule { flex-grow: 1; height: 1px; background: oklch(1 0 0 / 0.1); }
.lead { max-width: 760px; font-size: 17px; line-height: 1.95; color: var(--text-muted); }

/* ─── 冒頭 ─── */
.hero {
  display: grid; grid-template-columns: 560px minmax(0, 1fr);
  align-items: start; padding: 68px 0 0 var(--pad);
  background: oklch(0.125 0 0); border-bottom: 1px solid var(--line);
}
.hero-copy { display: flex; flex-direction: column; gap: 26px; padding: 0 56px 64px 0; }
.hero h1 { font-size: 64px; line-height: 1.16; }
body[lang="en"] .hero h1 { font-size: 66px; line-height: 1.06; }
.hero p { margin: 0; font-size: 17px; line-height: 2; color: var(--text-soft); max-width: 480px; }
/* 冒頭の小さい2行（機種と条件）は、本文の折り返し幅に巻き込まれないようにする */
.hero .eyebrow, .hero .hero-meta { max-width: none; }
body[lang="en"] .hero p { font-size: 17px; line-height: 1.7; }
.hero-cta { display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.hero-meta { font-size: 12.5px; color: var(--text-faint); letter-spacing: 0.02em; }
.hero-shot { position: relative; padding: 6px 0 40px; }
.hero-shot .frame {
  border: 1px solid oklch(1 0 0 / 0.16); border-right: none; border-radius: var(--radius) 0 0 var(--radius);
  overflow: hidden; box-shadow: 0 40px 90px -30px oklch(0 0 0 / 0.85);
}
/* 3:2 のままだと縦に重い。上を残して切り、横に広い板に見せる */
.hero-shot .frame img {
  display: block; width: 100%;
  aspect-ratio: 1152 / 632; object-fit: cover; object-position: 50% 0;
}
.fig { font-size: 12.5px; line-height: 1.7; color: var(--text-faint); }
.hero-shot .fig { margin: 14px 0 0; max-width: 560px; }

/* ─── 写真だけの帯。文言はひとことだけ載せる ─── */
.band { position: relative; margin: 0; border-bottom: 1px solid var(--line); }
.band img {
  display: block; width: 100%;
  aspect-ratio: 1152 / 330; object-fit: cover; object-position: 50% 55%;
}
.band .band-text {
  position: absolute; inset: 0; display: flex; align-items: center; padding: 0 var(--pad);
  background: linear-gradient(90deg,
    oklch(0.115 0 0 / 0.9) 0%, oklch(0.115 0 0 / 0.62) 52%, oklch(0.115 0 0 / 0.15) 100%);
}
.band p { margin: 0; max-width: 620px; font-size: 26px; line-height: 1.75; letter-spacing: -0.01em; }
body[lang="en"] .band p { font-size: 30px; line-height: 1.3; }
/* 写真の権利表示。帯・見出しの面・節の中の写真で使い回す */
.by {
  position: absolute; right: var(--pad); bottom: 12px; z-index: 1;
  font-size: 11px; color: oklch(1 0 0 / 0.42); letter-spacing: 0.02em;
}

/* 写真を敷いた区画。読ませる面なので、幕は濃いままにする。
   写真は `--photo`、幕の濃さは `--veil-a`（上）と `--veil-b`（下）で差し替える。
   幕は写真の明るさに合わせて決めた——暗い写真ほど薄くしないと、ただの黒面になる */
.section.photo {
  position: relative;
  background-image:
    linear-gradient(oklch(0.115 0 0 / var(--veil-a, 0.86)), oklch(0.115 0 0 / var(--veil-b, 0.78))),
    var(--photo, url("../images/photo/forest-mist.jpg"));
  background-size: cover; background-position: var(--photo-pos, 50% 40%);
}
/* 「外に出るのは 1 本だけ」の面。真上から見た森を、1 本だけ通る道ごと敷く */
.section.photo.aerial {
  --photo: url("../images/photo/forest-drone.jpg");
  --photo-pos: 50% 46%; --veil-a: 0.8; --veil-b: 0.72;
}

/* ─── 数値の帯 ─── */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.metrics > div {
  padding: 44px 40px 48px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.metrics > div:first-child { padding-left: var(--pad); }
.metrics > div:last-child { padding-right: var(--pad); border-right: none; }
.metrics .n { font-family: var(--font-mono); font-size: 32px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.metrics .n span { font-size: 18px; color: var(--text-muted); }
.metrics p { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--text-muted); }
body[lang="en"] .metrics p { line-height: 1.7; }
/* 実測値の下に敷く、仕様ページの実測値一覧への一行。4列でも2列でも横いっぱいに伸ばす */
.metrics .metrics-note {
  grid-column: 1 / -1; margin: 0; padding: 20px var(--pad) 22px;
  border-top: 1px solid var(--line); font-size: 13px; line-height: 1.8; color: var(--text-faint);
}

/* ─── 枠を分け合うカード ─── */
.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards > div { background: var(--bg); padding: 34px 32px 38px; display: flex; flex-direction: column; gap: 12px; }
.section.deep .cards > div { background: var(--bg-deep); }
/* 写真の上に置くカードは、下の森が薄く透けるくらいに留める（枠線は残す） */
.section.photo .cards > div { background: oklch(0.115 0 0 / 0.72); }
.cards .tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0; color: var(--accent); }
.cards h3 { font-size: 15.5px; font-weight: 500; }
.cards p { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--text-muted); }
.cards h3 .glyph { font-size: 17px; margin-right: 9px; vertical-align: -1px; }
body[lang="en"] .cards p { line-height: 1.75; }

/* 独立した枠のカード */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tile {
  border: 1px solid oklch(1 0 0 / 0.1); border-radius: var(--radius);
  padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 14px;
}
.tile.pick { border-color: oklch(1 0 0 / 0.22); background: var(--bg-raise); }
.tile h3 { font-size: 15.5px; font-weight: 500; }
.tile p { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--text-muted); flex-grow: 1; }
.tile .exts { font-family: var(--font-mono); font-size: 13.5px; line-height: 2.15; color: oklch(0.86 0 0); }
.tile .foot-note {
  font-size: 12.5px; line-height: 1.85; color: var(--text-faint);
  border-top: 1px solid var(--line); padding-top: 12px;
}
.tile .file { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.badge {
  font-size: 11px; letter-spacing: 0.02em;
  color: var(--accent); border: 1px solid oklch(0.72 0.14 255 / 0.5);
  border-radius: 2px; padding: 1px 6px;
}

/* ─── 全面に敷く写真 ─── */
.bleed { margin: 0 calc(var(--pad) * -1) 44px; }
.bleed img {
  display: block; width: 100%;
  aspect-ratio: 1152 / 372; object-fit: cover; object-position: 50% 48%;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}
.bleed figcaption { padding: 14px var(--pad) 0; }

/* 同じ全幅でも、写真のときは横長に切って、読み物の息継ぎにする */
.bleed.photo { position: relative; }
.bleed.photo img { aspect-ratio: 1152 / 306; object-position: 50% 46%; }

/* ─── 法務・資料の頁に敷く細い写真 ─── */
.strip { position: relative; margin: 0; border-bottom: 1px solid var(--line); }
.strip img {
  display: block; width: 100%;
  aspect-ratio: 1152 / 132; object-fit: cover; object-position: 50% 52%;
}
.strip::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(oklch(0.115 0 0 / 0.5), oklch(0.115 0 0 / 0.78));
}

/* 画面を2枚並べる */
.shots-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 44px; }
.shots-2 figure { margin: 0; }
.shots-2 img {
  display: block; width: 100%; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--bg-deep);
}
.shots-2 figcaption { margin-top: 12px; }

/* ─── 動いている画面 ─── */
/* 実際に操作しているところ。写真が全面で入れ替わる絵は GIF に載らないので mp4 で置く。
   音は無い（`muted` が無いと自動再生できない）。HTML に `autoplay` は書いておらず、
   再生を始めるのは `assets/demo.js` が「動きを減らす」設定を見たあとだけ */
.demo { margin: 0 0 44px; }
.demo video {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg-deep);
}
.demo figcaption { margin-top: 12px; }
/* 資料の頁（アプリ仕様・インストール）では、本文の段落と同じ間合いで置く */
.doc-body .demo { margin: 28px 0 0; }

/* ─── 画面と説明を並べる ─── */
.split { display: grid; gap: 64px; align-items: center; }
.split.shot-left { grid-template-columns: minmax(0, 1fr) 420px; }
.split.shot-right { grid-template-columns: 440px minmax(0, 1fr); }
.split.aside { grid-template-columns: 520px minmax(0, 1fr); gap: 80px; align-items: start; }
.shot { border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--bg-deep); }
.shot img { display: block; width: 100%; }
.points { display: flex; flex-direction: column; gap: 18px; }
.point { display: flex; gap: 14px; }
.point .mark { width: 5px; flex-shrink: 0; background: var(--accent); margin: 6px 0 8px; }
.point h3 { font-size: 15.5px; font-weight: 500; margin-bottom: 4px; }
.point p { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--text-muted); }
.point .glyph { font-size: 20px; line-height: 1.4; width: 22px; flex-shrink: 0; }
.key {
  font-family: var(--font-mono); font-size: 12px; border: 1px solid oklch(1 0 0 / 0.2);
  border-radius: 3px; padding: 2px 7px; margin-right: 8px;
}

/* ─── 注意書き ─── */
.note {
  padding: 18px 22px; border-left: 2px solid var(--accent);
  background: var(--bg-raise); font-size: 14px; line-height: 1.95; color: var(--text-soft);
}
.note.warn { border-left-color: var(--warn); }
.note p:last-child { margin-bottom: 0; }
.note a { color: var(--accent-bright); border-bottom: 1px solid oklch(0.82 0.12 255 / 0.4); }

/* 打ち込んでもらうコマンド。長いので横だけスクロールさせる——
   折り返すと、行のどこまでが1つの引数か読めなくなる */
.cmd {
  margin: 0; padding: 16px 20px; border: 1px solid var(--line);
  border-radius: var(--radius); background: oklch(0.145 0 0);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.9;
  color: oklch(0.86 0 0); overflow-x: auto; white-space: pre;
}

/* できないことの一覧 */
.limits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.limits div {
  padding: 26px 28px 28px; border-right: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.9; color: var(--text-muted);
}
.limits div:first-child { padding-left: 0; }
.limits div:last-child { padding-right: 0; border-right: none; }
.limits b { font-weight: 400; color: oklch(0.88 0 0); }
/* この升の中のリンクは「読んで終わり」ではなく**押して確かめてもらう**もの
   （配布物の作られ方の節）。地の文と同じ色だと、リンクだと気付かれない。
   **既存の升にも効く**——ダウンロード頁の「写真ファイル本体は変更しません」に
   ある `spec.html#storage` への1本。そこも同じ理由で見えるべきなので、
   わざと絞っていない（ゲート2の指摘・据え置き） */
.limits a { color: var(--accent-bright); border-bottom: 1px solid oklch(0.82 0.12 255 / 0.4); }

.more {
  display: inline-block; margin-top: 30px; font-size: 13px;
  letter-spacing: 0.02em; color: var(--accent-bright);
  border-bottom: 1px solid oklch(0.82 0.12 255 / 0.4); padding-bottom: 3px;
}
.more.off { color: var(--text-muted); border-bottom-color: oklch(1 0 0 / 0.2); }
/* 2本並べるとき。`.more` は inline-block なので、狭い画面で折り返した2本目が
   前の行の字下がりを引き継いでずれる（ゲート2の指摘）。並びは flex で持ち、
   段の余白は gap に任せる */
.more-row { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 30px; }
.more-row .more { margin-top: 0; }

/* ─── 文書ページ（仕様・法的情報） ─── */
.page-head { padding: 72px var(--pad) 56px; border-bottom: 1px solid var(--line); background: oklch(0.125 0 0); }
/* 見出しの面に写真を敷く。ここも文字を読ませる面なので、幕は濃いまま */
.page-head.photo {
  position: relative;
  background-image:
    linear-gradient(oklch(0.115 0 0 / var(--veil-a, 0.9)), oklch(0.115 0 0 / var(--veil-b, 0.8))),
    var(--photo);
  background-size: cover; background-position: var(--photo-pos, 50% 50%);
}
.page-head.photo.slope  { --photo: url("../images/photo/forest-slope.jpg"); --photo-pos: 50% 58%; }
.page-head.photo.gate   { --photo: url("../images/photo/forest-gate.jpg"); --photo-pos: 50% 62%; }
/* 「なぜ作ったのか」の面。朝の光が差し込む1枚を、始まりの頁に敷く */
.page-head.photo.rays { --photo: url("../images/photo/forest-rays.jpg"); --photo-pos: 50% 62%; --veil-a: 0.88; --veil-b: 0.8; }
.page-head.photo.canopy {
  --photo: url("../images/photo/forest-canopy.jpg");
  --photo-pos: 50% 55%; --veil-a: 0.86; --veil-b: 0.78;
}
.crumb { font-size: 12.5px; color: var(--text-faint); margin-bottom: 22px; }
.crumb a { color: var(--text-faint); }
.page-head h1 { font-size: 44px; margin-bottom: 20px; }
.page-head .lead { max-width: 780px; }
.stamps { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 30px; font-size: 12.5px; color: var(--text-faint); }
.stamps b { font-weight: 400; color: oklch(0.85 0 0); }

.doc { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 72px; padding: 64px var(--pad) 96px; align-items: start; }
.doc.legal { grid-template-columns: 300px minmax(0, 1fr); padding-top: 72px; }
.doc-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; border-left: 1px solid oklch(1 0 0 / 0.1); padding-left: 22px; }
.doc-nav a { font-size: 14px; color: var(--text-muted); }
.doc-nav a.sub { padding-left: 14px; font-size: 13.5px; }
.doc-nav a:hover, .doc-nav a.here { color: var(--text); }
.doc-nav .hr { height: 1px; background: oklch(1 0 0 / 0.1); margin: 12px 0; }
.doc-body { display: flex; flex-direction: column; gap: 72px; max-width: 900px; }
.doc-body section > h2 { font-size: 24px; display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.doc-body section > h2 .num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 400; }
.doc-body h3 { margin: 32px 0 14px; }
.doc-body p { font-size: 15px; line-height: 1.95; color: var(--text-soft); }
.doc-body p:last-child { margin-bottom: 0; }
.doc-body a { color: var(--accent-bright); }

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th {
  text-align: left; font-weight: 500; font-size: 12.5px; letter-spacing: 0.02em;
  color: var(--text-faint);
  padding: 0 16px 12px 0; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
td {
  padding: 14px 16px 14px 0; border-bottom: 1px solid oklch(1 0 0 / 0.07);
  vertical-align: top; font-size: 14px; line-height: 1.85; color: var(--text-soft);
}
td.k { color: var(--text); }
td code, .doc-body code { font-family: var(--font-mono); font-size: 12.5px; color: oklch(0.9 0 0); }
.legend { display: flex; flex-wrap: wrap; gap: 22px; font-size: 13.5px; color: var(--text-muted); margin-bottom: 20px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.yes { color: var(--pick); }
.part { color: var(--warn); }
.no { color: var(--text-faint); }

.aside-card {
  border: 1px solid oklch(1 0 0 / 0.12); border-radius: var(--radius);
  padding: 28px 32px 30px; background: var(--bg-raise);
}
.aside-card p { margin: 0; font-size: 15px; line-height: 1.95; color: var(--text-soft); }

/* 話の折り返しに置く1行。記事側で `>` を使っている位置に当たる。
   `.note` と同じ左罫の作法に合わせ、背景は敷かない——地の文の続きだから */
.doc-body .pull {
  margin: 30px 0; padding-left: 22px; border-left: 2px solid var(--accent);
  font-size: 17px; line-height: 1.9; color: var(--text);
}
.facts { font-size: 13px; line-height: 2; color: var(--text-muted); }
.facts div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid oklch(1 0 0 / 0.06); }
.facts div:last-child { border-bottom: none; }
.facts span { color: var(--text-faint); }

/* ─── 配布物の一覧 ─── */
/* 版番号・行き先・大きさは書いた時点のものを埋めてあり、`assets/download.js` が
 * Releases を引いて最新へ差し替える。**JS が動かなくても埋めた版は落とせる**。
 * 幅を 980px で止めるのは、説明とボタンの間が間延びしないため（読み物側の
 * `.doc-body` を 900px で止めているのと同じ理由）。 */
.dl-pick, .dl-rows { max-width: 980px; }
.dl-pick {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 44px; align-items: center;
  border: 1px solid oklch(1 0 0 / 0.18); border-radius: var(--radius);
  background: var(--bg-raise); padding: 34px 38px 36px;
}
.dl-pick h2 { font-size: 24px; margin-bottom: 12px; }
.dl-pick p { margin: 0; }
.dl-pick .why { font-size: 14.5px; line-height: 1.95; color: var(--text-muted); }
.dl-pick .cta { display: flex; flex-direction: column; gap: 12px; }
.dl-pick .cta .btn { width: 100%; }
.dl-pick .meta {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.9;
  color: var(--text-faint); text-align: center; word-break: break-all;
}

.dl-rows { border-top: 1px solid var(--line-strong); }
.dl-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 40px;
  align-items: center; padding: 26px 0 28px;
  border-bottom: 1px solid oklch(1 0 0 / 0.07);
}
.dl-row h3 { font-size: 15.5px; font-weight: 500; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dl-row p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.9; color: var(--text-muted); }
.dl-row .file {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint);
  margin-top: 10px; word-break: break-all;
}
.dl-row .get { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.dl-row .size { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); text-align: center; }
/* 版が変わって配布物が入れ替わったとき、`download.js` が付ける */
.dl-gone { opacity: 0.5; }

/* ─── 下のまとまり ─── */
.foot { padding: 64px var(--pad) 56px; border-top: 1px solid var(--line); background: var(--bg-deep); }
.foot-cols { display: grid; grid-template-columns: 320px repeat(3, minmax(0, 1fr)); gap: 48px; }
.foot-cols > div { display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; color: var(--text-muted); }
.foot-cols a { color: var(--text-muted); }
.foot-cols .about { font-size: 13px; line-height: 1.9; color: var(--text-faint); }
.foot-end {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-faint);
}
.foot-end a { color: var(--text-faint); }
.foot-slim {
  padding: 48px var(--pad) 44px; border-top: 1px solid var(--line); background: var(--bg-deep);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.foot-slim .links { display: flex; gap: 28px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-muted); }
.foot-slim .links a { color: var(--text-muted); }

/* ─── 折り返し ─── */
@media (max-width: 1180px) {
  :root { --pad: 40px; }
  .hero { grid-template-columns: 460px minmax(0, 1fr); }
  .hero h1, body[lang="en"] .hero h1 { font-size: 52px; }
  .doc { grid-template-columns: 210px minmax(0, 1fr); gap: 48px; }
}

/* ─── 狭い画面の帯：項目は ☰ の中へ ───
   断点は端末名ではなく「フルのナビが素直に収まるか」で決めた。書体を読み込んだ状態の実測は
   日本語 890px・英語 813px（14ページとも同値）。ここに 2 割ほどの余裕を足して 1080px にしてある。
   余裕は書体が落ちたときと、ブラウザの拡大（110% で 979px 相当）のため。
   1080px なら iPad の縦（768px）も横（1024px）も確実にこちら側に入る。
   ここから下では帯に残るのはブランド・ダウンロード・☰ の3つだけで、原則1行に収まる。 */
@media (max-width: 1080px) {
  .js-nav .nav-toggle { display: flex; }
  /* **畳めないときは折り返す。** JS が無いと ☰ は出ないので、帯は3つの並びのまま。
     `.brand` と `.bar-end` は縮まないので `.nav` だけが潰され、320px では項目が
     ブランドの上に重なっていた（ゲート1の指摘。横スクロールは出ないので測るだけでは
     見えず、実際に描かせて分かった）。折り返せば高さは伸びるが、これは
     「JS が無ければ今まで通り全部出す」という元の形そのものである */
  html:not(.js-nav) .bar { flex-wrap: wrap; row-gap: 10px; }
  /* 札は帯の中に絶対配置する。`.bar` は sticky なので位置の基準になり、
     本文を押し下げないので開いても下の文章がずれない */
  .js-nav .nav {
    position: absolute; top: 100%; right: var(--pad); left: auto; margin: 0;
    display: none; flex-direction: column; align-items: stretch;
    gap: 0; min-width: 232px; max-width: calc(100vw - var(--pad) * 2);
    padding: 6px 0; font-size: 15px;
    /* 帯と違ってここは透かさない。0.97 でも下の写真や見出しが薄く透けて、
       札の字と重なって読みづらかった（`.bar` の blur は入れ子だと札には効かない） */
    background: oklch(0.16 0 0);
    /* 横向きの電話のように背が低いときは札の中を送る */
    max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px);
    overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--line-strong); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 20px 44px oklch(0 0 0 / 0.5);
  }
  .js-nav .bar[data-nav-open] .nav { display: flex; }
  /* 開いたときに焦点を受ける入れ物。輪は出さない（中の項目の輪は消していない） */
  .js-nav .nav:focus { outline: none; }
  /* 送るときに項目が潰れないように */
  .js-nav .nav > * { flex-shrink: 0; }
  /* 指で押せる高さ（13+22+13）を確保する。**直下の項目にだけ**効かせること——
     `.nav a` だと `.lang` の中の JA / EN まで拾い、言語の行だけ字が 20px ずれて、
     hover の帯が仕切り線をまたいでいた（ゲート2の指摘） */
  .js-nav .nav > a { padding: 13px 20px; }
  .js-nav .nav > a:hover { background: oklch(1 0 0 / 0.05); color: var(--text); }
  /* 縦に積むと下線は次の項目との仕切りに見えるので、いま居る場所は左の線で示す */
  .js-nav .nav > a[aria-current] {
    border-bottom: none; padding-bottom: 13px;
    box-shadow: inset 2px 0 0 var(--accent);
  }
  .js-nav .nav .lang {
    border-left: none; border-top: 1px solid var(--line);
    margin-top: 6px; padding: 15px 20px 9px; font-size: 12px;
  }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 64px var(--pad) 0; }
  .hero-copy { padding: 0 0 48px; }
  .hero-shot { padding: 0 0 56px; margin: 0 calc(var(--pad) * -1) 0 0; }
  .hero-shot .fig { position: static; display: block; margin-top: 12px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics > div:nth-child(2n) { border-right: none; padding-right: var(--pad); }
  .metrics > div:nth-child(2n+1) { padding-left: var(--pad); }
  .metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cards.c3, .cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots-2 { grid-template-columns: minmax(0, 1fr); }
  /* **1段組みになったら目次は落とす。** 縦に積んだままだと本文の前に立ちはだかり
     （iPad の縦で about が 525px、spec が 678px）、横並びに畳む案も試したが、
     リンクの断片が一続きの文のように流れて目次として読めなかった。
     節には番号付きの見出しがあるので、狭い画面では素直に流し読みしてもらう。
     **ただし柱の下に付いている外向きのリンクまで道連れにしない。** spec の
     「GitHub で報告する →」は**そのページの他のどこにも無く**、狭い画面で報告先が
     消えていた（ゲート2の指摘。帯の GitHub は資源置き場の入口で、報告先ではない）。
     あれは柱ではなくフッターの持ち物なので、`spec.html` の `.foot-slim` へ移した。
     **`.doc.legal` の柱は目次ではないので残す**——制作者・所在・連絡先・価格の
     `.facts` はサイト中でここにしか無い */
  .doc:not(.legal) .doc-nav { display: none; }
  .band img { aspect-ratio: 1152 / 460; }
  .band p { font-size: 23px; }
  .bleed img { aspect-ratio: 1152 / 500; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split.shot-left, .split.shot-right, .split.aside { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .split.shot-right .shot { order: -1; }
  .limits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .limits div:nth-child(2n) { border-right: none; padding-right: 0; }
  .limits div:nth-child(2n+1) { padding-left: 0; }
  .limits div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .doc, .doc.legal { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .doc-nav { position: static; }
  /* 残した柱は、**本文の後ろへ回す**。縦に積むと法的ページを開いた人は
     リンクと事実の一覧を半画面ぶん読まされてから題名にたどり着いていた
     （iPhone で本文の始まりが 735px 目）。消さずに順番だけ入れ替える */
  .doc.legal .doc-body { order: 1; }
  .doc.legal .doc-nav {
    order: 2; border-left: none; padding-left: 0;
    border-top: 1px solid var(--line); padding-top: 32px;
  }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .dl-pick { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 30px 28px 32px; }
  .dl-row { grid-template-columns: minmax(0, 1fr) 160px; gap: 28px; }
}

@media (max-width: 760px) {
  :root { --pad: 20px; }
  body { font-size: 15px; }
  .bar { min-height: 60px; gap: 12px; padding: 8px var(--pad); }
  .bar .brand .disp { font-size: 17px; }
  /* JS が動かず畳めなかったときの詰め方。畳めていれば上の札の指定が勝つ */
  .nav { gap: 10px 16px; font-size: 13.5px; min-width: 0; }
  .lang { padding-left: 14px; }
  .section { padding: 56px var(--pad) 52px; }
  .sec-head { gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }
  .sec-head h2 { font-size: 24px; }
  .sec-head .rule { display: none; }
  .hero h1, body[lang="en"] .hero h1 { font-size: 38px; }
  .hero-copy { gap: 22px; }
  .hero p, body[lang="en"] .hero p { font-size: 15.5px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  /* 上のバーの中だけは横に広げない。全幅のボタンがナビを押し出して
     折り返しを増やしていた */
  .bar-end .btn { width: auto; }
  .metrics > div { padding: 24px 20px 26px !important; }
  .metrics .n { font-size: 28px; }
  .cards.c3, .cards.c2, .tiles { grid-template-columns: minmax(0, 1fr); }
  .bleed { margin-bottom: 32px; }
  .band img { aspect-ratio: 1152 / 620; }
  .band p { font-size: 20px; }
  body[lang="en"] .band p { font-size: 22px; }
  .bleed img { aspect-ratio: 4 / 3; }
  .bleed.photo img { aspect-ratio: 3 / 2; }
  .strip img { aspect-ratio: 1152 / 220; }
  .hero-shot .frame img { aspect-ratio: 1152 / 700; }
  .limits { grid-template-columns: minmax(0, 1fr); }
  .limits div { border-right: none; padding: 20px 0 !important; border-bottom: 1px solid var(--line); }
  .page-head { padding: 48px var(--pad) 40px; }
  .page-head h1 { font-size: 32px; }
  .doc { padding: 40px var(--pad) 64px; }
  .doc-body { gap: 52px; }
  .doc-body section > h2 { font-size: 21px; }
  .foot, .foot-slim { padding: 40px var(--pad) 36px; }
  .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .foot-end { margin-top: 36px; }
  .dl-row { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 0 26px; }
}

/* ここから下はもう美観の話ではない。ブランド・ダウンロード・☰ の3つを画面の中へ
   収めきることだけを見る。実測では 340px を切るあたりで右端が画面からはみ出したので、
   ボタンと☰を一段小さくして逃がす（320px で 17px ほど残る） */
@media (max-width: 360px) {
  .bar { gap: 10px; }
  .brand { gap: 10px; }
  .bar .brand .disp { font-size: 16px; }
  .bar-end { gap: 8px; }
  .bar-end .btn { height: 36px; padding: 0 14px; font-size: 13px; }
  .nav-toggle { width: 36px; height: 36px; }
}