/* =============================================================
   くだ — 個人サイト / 「午後の光 — Lumière de l'après-midi」
   設計書: docs/design.md §5〜§10
   方針: HEXをフォールバックとし、oklch()対応環境では上書きする
   ============================================================= */

/* ---------- 1. カスタムプロパティ（フォールバック: HEX） ---------- */
:root {
  --color-bg: #FBF6E9;          /* 生成り（背景ベース） */
  --color-pale: #F6E4A8;        /* ペールイエロー（にじみ・面） */
  --color-gold: #E9B937;        /* ゴッホイエロー（アクセント） */
  --color-ink: #3A2F25;         /* 焦げ茶（本文文字色） */
  --color-mist: #8C9AA6;        /* くすんだ青灰（装飾のみ） */
  --color-slate: #46545F;       /* ダーク青灰（キャプション文字） */

  --line-thin: 1px;
  --line-hair: 0.5px;
  --border-ink: rgba(58, 47, 37, 0.2);
  --border-ink-soft: rgba(58, 47, 37, 0.12);

  --font-body: "Pretendard JP Variable", Pretendard, system-ui, -apple-system,
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* 和文明朝（§20）: 銘・見出し・リード文。到着前・非対応環境はシステム明朝へ */
  --font-serif-jp: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho",
    "Noto Serif JP", serif;

  --radius: 2px;                /* 角丸は控えめに統一（§9） */

  /* 本文: 小さめ・流体（§6） */
  --fs-body: clamp(0.875rem, 0.5vw + 0.8rem, 1rem);
  --fs-display: clamp(2.75rem, 6vw + 1rem, 4.5rem);
  --fs-caption: clamp(0.6875rem, 0.3vw + 0.65rem, 0.75rem);

  /* ---------- 光の設計（§17） ---------- */
  /* 光だまりの色（既定 = afternoon。時間帯・夜モードで下の宣言が上書きする） */
  --blob-a: oklch(0.92 0.085 95 / 0.55);
  --blob-b: oklch(0.92 0.085 95 / 0.38);
  --grain-blend: multiply;
  --grain-opacity: 0.04;

  /* ---------- 展示タイポと展示壁（§18） ---------- */
  --ghost: color-mix(in srgb, var(--color-ink) 8%, transparent);      /* ゴースト番号 */
  --frame-bg: #FFFDF4;                                                 /* 額縁マットの紙色 */
  --shadow-deep: rgba(58, 47, 37, 0.32);                               /* 額の落ち影（深） */
  --shadow-near: rgba(58, 47, 37, 0.16);                               /* 額の落ち影（近） */
  --lamp: rgba(233, 185, 55, 0.14);                                    /* スポットライトの光すだれ */
  --mat: clamp(0.625rem, 1.4vw, 1rem);                                 /* マット（パスパルトゥー）幅 */
}

/* OKLCH対応環境では上書き（§5。近似値は設計時のもの）
   ※ 昼の既定値。夜モード（[data-mode="night"]）はこの後に宣言し、後勝ちで上書きさせる */
@supports (color: oklch(0 0 0)) {
  :root {
    --color-bg: oklch(0.97 0.027 95);
    --color-pale: oklch(0.92 0.085 95);
    --color-gold: oklch(0.79 0.135 85);
    --color-ink: oklch(0.29 0.03 75);
    --color-mist: oklch(0.67 0.027 240);
    --color-slate: oklch(0.44 0.031 240);
  }
}

/* 時間帯トーン（head スクリプトが data-hour を設定。JS無効時は既定=afternoon） */
[data-hour="morning"] {
  --blob-a: oklch(0.96 0.045 95 / 0.45);
  --blob-b: oklch(0.96 0.045 95 / 0.3);
}

[data-hour="evening"] {
  --blob-a: oklch(0.84 0.11 70 / 0.5);
  --blob-b: oklch(0.86 0.09 75 / 0.35);
}

[data-hour="night"] {
  --blob-a: oklch(0.92 0.085 95 / 0.14);
  --blob-b: oklch(0.67 0.027 240 / 0.14);
}

/* ---------- 夜のカフェテラス（data-mode="night"）----------
   実測コントラスト（§17検証済み）: 本文 13.53:1 / キャプション 7.42:1 / ゴールド 9.15:1 */
[data-mode="night"] {
  --color-bg: #241C15;              /* 深い焦げ茶 */
  --color-ink: #F0E6D0;             /* クリーム */
  --color-slate: #B8AB93;           /* キャプション */
  --color-gold: #E9B937;
  --color-pale: #3A3126;            /* 小さな面は「暗がりに灯る面」へ */
  --border-ink: rgba(240, 230, 208, 0.16);
  --border-ink-soft: rgba(240, 230, 208, 0.1);
  --blob-a: oklch(0.92 0.085 95 / 0.1);    /* 窓の灯り（黄・微光） */
  --blob-b: oklch(0.67 0.027 240 / 0.16);  /* テラスの青（§4 案Cの気配） */
  --grain-blend: overlay;
  --grain-opacity: 0.05;

  /* §18: 夜の展示室。額は暗がりに灯る面、スポットはやや強く */
  --frame-bg: #2E2620;
  --shadow-deep: rgba(0, 0, 0, 0.6);
  --shadow-near: rgba(0, 0, 0, 0.45);
  --lamp: rgba(233, 185, 55, 0.2);
}

@supports (color: oklch(0 0 0)) {
  [data-mode="night"] {
    --color-bg: oklch(0.23 0.021 75);
  }

  [data-mode="night"] ::selection {
    background-color: #4A3F2E;
  }
}

/* ---------- 2. 最小限のリセット ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- 3. ベース ---------- */
html {
  background-color: var(--color-bg);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.9;             /* 行間広め（§6） */
  letter-spacing: 0.02em;       /* 字間わずかに（§6） */
  color: var(--color-ink);
  background-color: var(--color-bg); /* 光だまりは .light レイヤーへ（§17） */
  transition: background-color 0.6s ease, color 0.6s ease;
  -webkit-font-smoothing: antialiased;
}

/* 紙の質感ノイズ: 全面・操作不能（§9。昼=multiply 4% / 夜=overlay 5%） */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  pointer-events: none;
  z-index: 1;
}

::selection {
  background-color: var(--color-pale);
  color: var(--color-ink);
}

/* フォーカスリングは消さずにデザインへ馴染ませる（§10） */
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
  border-radius: var(--radius);
}

/* ---------- 4. ユーティリティ ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.caption {
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  color: var(--color-slate);    /* 実測 7.23:1（§5） */
}

/* ---------- 5. レイアウト: 非対称グリッド（§7） ---------- */
.wrap {
  position: relative;
  z-index: 2;                   /* grainより上 */
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* 右端の縦書きラベル: 768px以上で表示（§7） */
.vlabel {
  display: none;
}

@media (min-width: 768px) {
  .vlabel {
    display: block;
    position: fixed;
    top: clamp(2rem, 8vh, 5rem);
    right: clamp(1rem, 2.5vw, 2.25rem);
    writing-mode: vertical-rl;
    font-family: var(--font-serif-jp);   /* 縦書きの銘も明朝で（§20） */
    font-size: 0.8125rem;
    letter-spacing: 0.32em;
    color: var(--color-slate);
    z-index: 2;
  }

  /* 左に大きな余白を残し、コンテンツを左寄せに（非対称・§7） */
  .wrap {
    margin-inline: clamp(2rem, 12vw, 10rem) auto;
    padding-inline: 0 clamp(3rem, 8vw, 5rem);
  }
}

/* ---------- 6. ファーストビュー（§18: 展示タイトルウォール）----------
   美術館の壁に直接描かれた展示タイトルのような巨大タイポ。
   アイコンは署名の横の落印（シール）。行高を固定しているため
   フォントスワップでも高さが変わらず CLS は 0 を保つ */
.hero {
  padding-block: clamp(5rem, 22vh, 11rem) clamp(4rem, 18vh, 9rem);
}

.hero__title {
  display: grid;
  grid-template-areas:
    "en"
    "ja";
  font-weight: 400;
}

/* 落印: 署名の直後に添える。小さなマットと細い枠で壁に貼った印鑑のように */
.hero__icon {
  flex: none;
  width: clamp(56px, 9vw, 84px);
  height: auto;
  margin-left: clamp(0.875rem, 2vw, 1.25rem);
  padding: 4px;
  background-color: var(--frame-bg);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px -14px var(--shadow-deep);
}

/* 巨大展示タイトル。vh に依存しない固定の行高が CLS 0 の鍵 */
.hero__en {
  grid-area: en;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(4.5rem, 21vw, 13.5rem);
  line-height: 0.82;
  letter-spacing: -0.015em;
  margin-left: -0.06em;         /* K の左の余白を詰めて視覚的に壁に寄せる */
}

.hero__ja {
  grid-area: ja;
  display: flex;
  align-items: center;
  font-family: var(--font-serif-jp);   /* 署名は額の銘のように（§20） */
  font-size: clamp(0.8125rem, 1vw + 0.6rem, 0.9375rem);
  letter-spacing: 0.22em;
  padding-top: 1.1rem;
}

/* 名刺スタイル（§20）: 上下の罫線で挟んだ銘。明朝と字間で格式を添える */
.hero__headline {
  margin-top: clamp(1.5rem, 4vh, 3rem);
  font-family: var(--font-serif-jp);
  font-size: clamp(0.8125rem, 0.4vw + 0.72rem, 0.9375rem);
  letter-spacing: 0.24em;
  display: inline-block;
  justify-self: start;
  padding: 0.65rem 0.5rem 0.65rem 0.74rem;   /* 右の字間のぶんだけ左詰め */
  border-top: var(--line-thin) solid var(--border-ink);
  border-bottom: var(--line-thin) solid var(--border-ink);
}

/* ---------- 7. リンク目録（§7: ボタンではなく番号付き目録） ---------- */
.index {
  max-width: 34rem;
}

.index__title {
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  margin-bottom: 0.25rem;
}

.index__list {
  list-style: none;
  padding: 0;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  border-top: var(--line-thin) solid var(--border-ink);
}

.index__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.125rem;
  border-bottom: var(--line-thin) solid var(--border-ink);
  color: inherit;
  text-decoration: none;
}

/* 番号: Cormorant Garamond italic（§7）＋ 背後に小さな面（§4 案A） */
.index__no {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1;
  padding: 0.3125rem 0.4375rem;
  border-radius: var(--radius);
  background-color: color-mix(in srgb, var(--color-pale) 55%, transparent);
}

.index__label {
  font-family: var(--font-serif-jp);   /* 目録のラベルも明朝で統一（§20） */
  letter-spacing: 0.1em;
}

.index__arrow {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  transition: translate 0.35s ease, color 0.35s ease;
}

/* ホバー時の変化: 罫線が黄色く、矢印が動く（§4 案A） */
.index__list a {
  border-bottom-color: var(--border-ink);
  transition: border-color 0.35s ease;
}

.index__list a:hover {
  border-bottom-color: var(--color-gold);
}

.index__list a:hover .index__arrow {
  translate: 0.25rem -0.25rem;
  color: oklch(0.29 0.03 75);
}

/* ---------- 8. セクション ---------- */
.section {
  /* セクション間の余白を大胆に（画面高さの20〜40%・§7） */
  margin-top: clamp(6rem, 30vh, 14rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  position: relative;           /* ゴースト番号の位置基準（§18） */
}

/* 展示番号のゴーストタイポ（§18）。装飾のみ・aria-hidden。
   墨 8% のトーンで壁に薄く印刷された番号。本字の可読性を損なわない */
.section__no {
  position: absolute;
  top: -0.52em;
  left: -0.04em;
  z-index: -1;                  /* .wrap の重ね順内で本文の下・光の上 */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(5.5rem, 15vw, 10rem);
  line-height: 1;
  color: var(--ghost);
  pointer-events: none;
  user-select: none;
}

@media (min-width: 768px) {
  .section {
    /* 非対称: 左に本文列、右に細いキャプション列 */
    grid-template-columns: minmax(0, 40rem) minmax(0, 12rem);
    justify-content: start;
    column-gap: clamp(2rem, 6vw, 5rem);
  }

  .section__side {
    writing-mode: vertical-rl;
    justify-self: end;
    align-self: start;
    letter-spacing: 0.24em;
  }
}

.section__title {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.25rem;
  font-weight: 400;
  /* 見出し: 極端に大きい英字と小さな和文の対比（§6） */
}

.section__en {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.section__ja {
  font-family: var(--font-serif-jp);   /* 和文見出しは明朝（§20）。小さくても0.8125rem以上 */
  font-size: 0.8125rem;
  letter-spacing: 0.26em;
}

/* リード文（§20）: 各セクションの顔の一文を明朝でやや大きく。
   2段落目以降はゴシックのまま（小サイズの可読性ガード） */
.section__body > p:first-child {
  font-family: var(--font-serif-jp);
  font-size: 1.08em;
  letter-spacing: 0.05em;
}

.section__body > p:first-child + p {
  margin-top: 1.1em;
}

.section__body p + p {
  margin-top: 0.75em;
}

.section__body {
  max-width: 38rem;
}

/* Notes（注意・苦手な人）: 青灰の細い左罫線で落ち着いた扱いに（§5 差し色） */
.section--notes .section__body {
  border-left: var(--line-thin) solid color-mix(in srgb, var(--color-mist) 60%, transparent);
  padding-left: 1.25rem;
}

/* ---------- 9. ギャラリー（§18: 展示壁）----------
   3点を「壁パネル ＋ 額縁（マット付き）＋ スポットライトの光すだれ」
   として展示する。サロン型に少しずつ吊り位置と傾きをずらす */
.gallery {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
  margin-top: 0.5rem;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.75rem) clamp(2.5rem, 6vw, 4rem);
}

/* 展示壁パネル: 墨 3% の壁面。夜はクリームが 3% のり「暗がりに照らされた壁」 */
.gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--color-ink) 3%, transparent);
  border: 1px solid var(--border-ink-soft);
  border-radius: var(--radius);
}

@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3rem);
  }

  /* サロン型の吊り: 真ん中を下げ、右をわずかに下げ、手作り感の傾きを添える */
  .gallery__item:nth-child(2) {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
    rotate: 0.3deg;
  }

  .gallery__item:nth-child(3) {
    margin-top: clamp(1rem, 3vw, 2.25rem);
    rotate: -0.35deg;
  }
}

.gallery__item {
  position: relative;
}

/* 鑑賞への入口（§21）: 額ごとクリックできる。JS無効では原画への通常リンク */
.gallery__zoom {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* スポットライトの光すだれ（§4 にじみの yellow の小さな面）。額の上から掛かる */
.gallery__item::before {
  content: "";
  position: absolute;
  top: clamp(-2.2rem, -3vw, -1.4rem);
  left: 50%;
  translate: -50% 0;
  width: 64%;
  height: clamp(3.5rem, 8vw, 6rem);
  background: radial-gradient(60% 100% at 50% 0%, var(--lamp), transparent 75%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

/* 額縁: マット（パスパルトゥー）付き。二層の落ち影で壁から浮かせる */
.gallery__frame {
  position: relative;
  padding: var(--mat);
  background-color: var(--frame-bg);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius);
  box-shadow:
    0 14px 34px -16px var(--shadow-deep),
    0 3px 8px -4px var(--shadow-near);
}

/* マットの裁ち目: 内側の細い一本の罫線 */
.gallery__frame::after {
  content: "";
  position: absolute;
  inset: var(--mat);
  border: 1px solid var(--border-ink-soft);
  pointer-events: none;
}

.gallery__item img {
  width: 100%;
  height: auto;
  border-radius: 0;             /* 額の中の絵は直角（マットが施される） */
}

/* 美術館のラベル: 番号は Cormorant italic、作品名はキャプション */
.gallery__label {
  margin-top: 1.1rem;
  padding-inline: 0.25rem;
  display: grid;
  gap: 0.2rem;
}

.gallery__fig {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-ink);
}

.gallery__name {
  font-family: var(--font-serif-jp);  /* 作品名の銘は明朝（§20）。0.8125remで可読性確保 */
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--color-slate);    /* 実測 昼7.23:1 / 夜7.42:1 */
}

/* ホバー: 額がわずかに浮き、スポットが強まる（精密ポインタかつ動き許容のみ） */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gallery__frame {
    transition: translate 0.45s ease, box-shadow 0.45s ease;
  }

  .gallery__item::before {
    transition: opacity 0.45s ease;
  }

  .gallery__item:hover .gallery__frame {
    translate: 0 -3px;
    box-shadow:
      0 24px 48px -20px var(--shadow-deep),
      0 4px 10px -4px var(--shadow-near);
  }

  .gallery__item:hover::before {
    opacity: 1;
  }
}

/* ---------- 10. フッター ---------- */
.footer {
  margin-top: clamp(6rem, 30vh, 14rem);
  padding-block: clamp(3rem, 10vh, 6rem) clamp(4rem, 12vh, 7rem);
  border-top: var(--line-thin) solid var(--border-ink-soft);
  display: grid;
  gap: 0.75rem;
}

.footer__link a {
  color: inherit;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--border-ink);
  transition: text-decoration-color 0.35s ease;
}

.footer__link a:hover {
  text-decoration-color: var(--color-gold);
}

.footer__copy {
  margin-top: 1.5rem;
  font-family: var(--font-serif-jp);
  letter-spacing: 0.12em;
}

/* ---------- 11. モーション（§8: プログレッシブエンハンスメント） ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal both ease-out;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    @keyframes reveal {
      from {
        opacity: 0;
        transform: translateY(14px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    /* 展示番号がスクロールに対してわずかに逆らって漂う（§18） */
    .section__no {
      animation: ghost-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    @keyframes ghost-drift {
      from {
        transform: translateY(2.5rem);
      }

      to {
        transform: translateY(-2.5rem);
      }
    }
  }
}

/* 動きを減らす設定では一切動かない（§8） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =============================================================
   §17. 光の設計 — 時間帯 × スクロール × ポインタ × 昼/夜
   光だまりを1つのレイヤーに集約し、4つの入力で織りなす。
   どの入力も無い環境では「静止した午後の光」として完全成立する。
   ============================================================= */

.light {
  position: fixed;
  inset: 0;
  z-index: 0;                   /* 背景(上)・grain(下)。grainが光にも質感を添える */
  overflow: hidden;
  pointer-events: none;
}

.light__blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--blob-c, transparent), transparent 72%);
  transition: background 0.8s ease;
}

/* 上部左: 現在の主光（時間帯トーン --blob-a） */
.light__blob--a {
  --blob-c: var(--blob-a);
  width: 85vw;
  height: 70vh;
  left: -16vw;
  top: -21vh;
}

/* 下部右: 副光（--blob-b） */
.light__blob--b {
  --blob-c: var(--blob-b);
  width: 65vw;
  height: 55vh;
  right: -13vw;
  bottom: -16vh;
}

/* 頁の終端でにじむ夕暮れ（青灰）。スクロール駆動（§17-4） */
.light__blob--dusk {
  --blob-c: oklch(0.67 0.027 240 / 0.16);
  width: 75vw;
  height: 55vh;
  left: -18vw;
  bottom: -24vh;
  opacity: 0;
}

/* ポインターライト（§17-3）。座標はJSが設定（無ければ中央に静止） */
.light__blob--cursor {
  --blob-c: oklch(0.92 0.085 95 / 0.14);
  width: 46vmin;
  height: 46vmin;
  left: var(--px, 62%);
  top: var(--py, 35%);
  margin-left: -23vmin;
  margin-top: -23vmin;
}

[data-mode="night"] .light__blob--cursor {
  --blob-c: oklch(0.92 0.085 95 / 0.09);  /* 夜は足元の灯りとして微光 */
}

/* スクロールで光が巡る（§17-4）— 対応環境・動き許可のみ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .light__blob--a {
      animation: light-drift-a linear both;
      animation-timeline: scroll(root);
    }

    .light__blob--b {
      animation: light-drift-b linear both;
      animation-timeline: scroll(root);
    }

    .light__blob--dusk {
      animation: light-dusk linear both;
      animation-timeline: scroll(root);
    }

    @keyframes light-drift-a {
      to {
        transform: translate(12vw, 9vh) rotate(8deg);
      }
    }

    @keyframes light-drift-b {
      to {
        transform: translate(-9vw, -7vh) rotate(-6deg);
      }
    }

    @keyframes light-dusk {
      0%,
      62% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
  }
}

/* ---------- 昼/夜トグル ---------- */
/* JS無効環境では data-mode が付かないため表示されない（押しても無反応のボタンを出さない） */
.mode-toggle {
  display: none;
  position: fixed;
  top: 1.1rem;
  right: clamp(1rem, 3vw, 2rem);
  z-index: 3;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-pale) 45%, transparent);
  border: var(--line-thin) solid var(--border-ink);
  border-radius: var(--radius);
  padding: 0.42rem 0.85rem;
  cursor: pointer;
  transition: background-color 0.6s ease, color 0.6s ease, border-color 0.35s ease;
}

[data-mode] .mode-toggle {
  display: inline-block;
}

.mode-toggle:hover {
  border-color: var(--color-gold);
}

/* =============================================================
   §19. 花舞う光の展 — 展示歩行 × 花びら（immersive.js と対になる）
   JS無効・reduced-motion・WebGL2非対応では何も表示・動作せず、
   従来の縦並びギャラリー + 静止したCSS光として完全に成立する
   ============================================================= */

/* 花びらキャンバス: 光のレイヤーの上・紙の質感の下。内容はWebGLが描く */
.petals {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* 展示歩行: JS無効時は display:contents で箱を持たず、従来のグリッドに還元 */
.gallery-pin,
.gallery-view {
  display: contents;
}

.gallery__hint {
  display: none;
}

@media (min-width: 768px) {
  /* .js-pin は immersive.js が 768px以上・動き許容のときに <html> へ付与する */
  .js-pin #gallery {
    display: block;
    animation: none;               /* reveal は pin と併用しない */
  }

  .js-pin .gallery-pin {
    display: block;
    height: 340vh;                 /* 壁を歩くための巻き尺 */
  }

  .js-pin .gallery-view {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.5rem, 4vh, 2.5rem);
    position: sticky;
    top: 0;
    min-height: 100vh;
    overflow: hidden;
    padding-block: clamp(2rem, 6vh, 4rem);
  }

  .js-pin .gallery {
    display: flex;
    align-items: flex-start;
    gap: clamp(4rem, 12vw, 9rem);
    padding: 0 28vw 0 30vw;        /* 最初の1点を光の位置に、終端で中心へ */
    translate: calc(var(--walk, 0) * 1px) 0;
    will-change: translate;
  }

  .js-pin .gallery__item {
    flex: none;
    width: clamp(230px, 34vh, 360px);
  }

  .js-pin .gallery__hint {
    display: block;
  }
}

/* =============================================================
   §21. 作品鑑賞モード — 暗転の鑑賞室（viewer.js と対になる）
   昼でも「展示室の夜」。作品・キャプション・3つのボタンだけが灯る。
   JS無効では hidden のまま何も出ない。reduced-motionでは動きだけが消え
   （開閉は即時・チルトなし）、ズームという操作自体は残る
   ============================================================= */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 10;                  /* トグル(3)・紙の質感(1)・花びら(1)の上 */
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  overflow: hidden;             /* 拡大時のはみ出しを鑑賞室の中に留める */
  color: #F0E6D0;               /* 常夜のクリーム（暗転床上 実測 12.6:1） */
  background: rgba(20, 16, 12, 0.94);
}

.viewer[hidden] {
  display: none;
}

.viewer__backdrop {
  position: absolute;
  inset: 0;
}

.viewer :focus-visible {
  outline-color: #F0E6D0;       /* 暗転床の上では昼の墨色は見えないため */
}

.viewer__stage {
  position: relative;
  z-index: 1;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  perspective: 1200px;          /* チルトの奥行き */
}

.viewer__img {
  max-width: min(86vw, 560px);
  max-height: 72vh;
  width: auto;
  height: auto;
  border: 1px solid rgba(240, 230, 208, 0.14);
  box-shadow: 0 34px 90px -24px rgba(0, 0, 0, 0.85);
  cursor: zoom-in;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  scale: var(--zoom, 1);
}

.viewer--zoomed .viewer__img {
  --zoom: 2.2;
  cursor: zoom-out;
}

.viewer__cap {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  text-align: center;
}

.viewer__fig {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.85;
}

.viewer__name {
  font-family: var(--font-serif-jp);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
}

.viewer__close,
.viewer__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: #F0E6D0;
  background: transparent;
  border: 1px solid rgba(240, 230, 208, 0.28);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.35s ease;
}

.viewer__close:hover,
.viewer__nav:hover {
  border-color: var(--color-gold);
}

.viewer__close {
  top: clamp(0.9rem, 3vw, 1.6rem);
  right: clamp(0.9rem, 3vw, 1.6rem);
}

.viewer__nav {
  top: 50%;
  translate: 0 -50%;
}

.viewer__nav--prev {
  left: clamp(0.5rem, 3vw, 2rem);
}

.viewer__nav--next {
  right: clamp(0.5rem, 3vw, 2rem);
}

/* 作品の色の花びら（§20の抽出値を小さな面用に調色。舞いは動き許容のみ） */
.viewer[data-work="0"] { --petal-a: #2E6E63; --petal-b: #7FB4C7; }
.viewer[data-work="1"] { --petal-a: #6E6A4E; --petal-b: #A8A294; }
.viewer[data-work="2"] { --petal-a: #C4553B; --petal-b: #E8C9A0; }

.viewer__petals {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.viewer__petals i {
  position: absolute;
  bottom: -5vh;
  left: var(--x, 50%);
  width: 9px;
  height: 13px;
  border-radius: 60% 40% 55% 45% / 70% 60% 40% 30%;
  background: var(--petal, var(--color-pale));
  opacity: 0;
}

.viewer__petals i:nth-child(odd) { --petal: var(--petal-a, var(--color-pale)); }
.viewer__petals i:nth-child(even) { --petal: var(--petal-b, var(--color-pale)); }

.viewer__petals i:nth-child(1) { --x: 30%; }
.viewer__petals i:nth-child(2) { --x: 38%; width: 11px; height: 15px; }
.viewer__petals i:nth-child(3) { --x: 46%; }
.viewer__petals i:nth-child(4) { --x: 52%; width: 12px; height: 16px; }
.viewer__petals i:nth-child(5) { --x: 58%; }
.viewer__petals i:nth-child(6) { --x: 64%; width: 10px; height: 14px; }
.viewer__petals i:nth-child(7) { --x: 70%; }
.viewer__petals i:nth-child(8) { --x: 76%; width: 8px; height: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .viewer:not([hidden]) {
    animation: viewer-in 0.4s ease both;
  }

  .viewer:not([hidden]) .viewer__img {
    transition: scale 0.5s ease;
  }

  .viewer:not([hidden]) .viewer__petals i {
    animation: viewer-petal linear infinite;
  }

  .viewer:not([hidden]) .viewer__petals i:nth-child(1) { animation-duration: 11s; animation-delay: -1s; }
  .viewer:not([hidden]) .viewer__petals i:nth-child(2) { animation-duration: 14s; animation-delay: -6s; }
  .viewer:not([hidden]) .viewer__petals i:nth-child(3) { animation-duration: 12s; animation-delay: -3s; }
  .viewer:not([hidden]) .viewer__petals i:nth-child(4) { animation-duration: 15s; animation-delay: -9s; }
  .viewer:not([hidden]) .viewer__petals i:nth-child(5) { animation-duration: 10s; animation-delay: -5s; }
  .viewer:not([hidden]) .viewer__petals i:nth-child(6) { animation-duration: 13s; animation-delay: -2s; }
  .viewer:not([hidden]) .viewer__petals i:nth-child(7) { animation-duration: 16s; animation-delay: -11s; }
  .viewer:not([hidden]) .viewer__petals i:nth-child(8) { animation-duration: 12s; animation-delay: -8s; }

  @keyframes viewer-in {
    from {
      opacity: 0;
    }
  }

  @keyframes viewer-petal {
    0% {
      transform: translateY(0) rotate(0deg);
      opacity: 0;
    }

    10%,
    85% {
      opacity: 0.42;
    }

    100% {
      transform: translateY(-105vh) rotate(320deg);
      opacity: 0;
    }
  }
}

/* =============================================================
   §22. エントランスの儀 — 1セッション1度の開幕（約2.3秒）
   html.entrance は head のガードスクリプトが付ける
   （JS有効・動き許容・このセッションで未見 のときだけ）。
   JS無効・reduced-motionでは幕はそもそも存在しない。
   文言は展示タイトルの再利用のみ（推測禁止）
   ============================================================= */

.entrance {
  display: none;
}

html.entrance {
  overflow: hidden;             /* 幕が上がるまで頁を止めておく */
}

html.entrance .entrance {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 30;                  /* すべてのレイヤーの上 */
  align-items: center;
  justify-content: center;
  background: var(--color-bg);  /* 紙色の幕（自動夜なら夜の紙色から始まる） */
}

.entrance__inner {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
}

/* 落印: hero の署名横と同じ意匠の小さな枠 */
.entrance__icon {
  width: 64px;
  height: auto;
  padding: 4px;
  background-color: var(--frame-bg);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius);
}

.entrance__en {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 11vw, 5.5rem);
  line-height: 1;
}

.entrance__ja {
  font-family: var(--font-serif-jp);
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  padding-left: 0.3em;          /* 字間のぶんだけ視覚的に中央へ */
}

.entrance__rule {
  width: min(230px, 42vw);
  height: 1px;
  background: var(--border-ink);
}

@media (prefers-reduced-motion: reduce) {
  /* 二重ガード: JSの判定が何らかの理由で失敗しても幕は決して出ない */
  html.entrance .entrance {
    display: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.entrance .entrance {
    animation: entrance-lift 0.55s ease 1.75s forwards;
  }

  html.entrance .entrance__icon {
    animation: entrance-fade 0.55s ease both;
  }

  /* 題字は広がった状態から集まってくる（scaleX: レイアウト計算のない合成のみの動き） */
  html.entrance .entrance__en {
    animation: entrance-en 1.15s cubic-bezier(0.19, 0.66, 0.22, 1) 0.25s both;
  }

  html.entrance .entrance__ja {
    animation: entrance-fade 0.7s ease 0.95s both;
  }

  html.entrance .entrance__rule {
    animation: entrance-rule 0.6s ease 1.25s both;
  }

  /* スキップ（スクロール・クリック・キー入力）: 0.45秒で退場 */
  html.entrance--skip .entrance {
    animation: entrance-lift 0.45s ease 0s forwards;
  }

  html.entrance--skip .entrance__icon,
  html.entrance--skip .entrance__en,
  html.entrance--skip .entrance__ja,
  html.entrance--skip .entrance__rule {
    animation-duration: 0.01s;
    animation-delay: 0s;
  }

  @keyframes entrance-fade {
    from {
      opacity: 0;
    }
  }

  @keyframes entrance-en {
    from {
      opacity: 0;
      transform: scaleX(1.6);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes entrance-rule {
    from {
      transform: scaleX(0);
    }
  }

  @keyframes entrance-lift {
    to {
      transform: translateY(-100%);
      visibility: hidden;
    }
  }
}