@charset "utf-8";

/* =============================================================================
   foundation.css — gkkyoto 基礎レイヤ（叩き台 / 2026-06-30）
   -----------------------------------------------------------------------------
   方針: 別テーマとして作り直す土台。トークン → reset → base → layout を
   cascade layers で構造化し、既存 page CSS（未レイヤ）と安全に共存させる。

   ■ cascade layers の優先順位（低 → 高）
       @layer tokens, reset, base;
       （未レイヤの既存 page CSS は、これら全レイヤより常に優先される）
       ※ セクション 4 のレイアウトプリミティブ（.l-*）だけは**未レイヤ**。
         未レイヤの reset.css の margin/padding に負けるため（理由は当該セクション参照）。
     → このファイルを全ページに読み込んでも既存ページは壊れない。
       ページを作り直す際に、そのページ CSS を @layer components 等へ移すか
       トークン参照に書き換えて、段階的に基礎へ寄せていく。

   ■ 使い方
     - 色・余白・サイズ・BP は必ずトークン（CSS変数）を参照する
     - 余白は --space-* スケール、文字は --fs-* スケールから選ぶ
     - 段組み・コンテナは .l-container / .l-section を使う
   ============================================================================ */

@layer tokens, reset, base;

/* -----------------------------------------------------------------------------
   1. TOKENS — 基礎トークン（視覚値はページ単位で検証中）
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* --- フォント -------------------------------------------------------- */
    /* 和文の基本書体。2026-10-06 デザイン FB で Noto Sans JP からセザンヌ（Adobe Fonts / FOT-セザンヌ Pro N）へ試行中。
       キット（hfx7bfv）は全ページで読み、届くまでと届かなかったときは Noto Sans JP（500 だけ読む）で出る。
       キット収録は 500 だけなので、太さの指定にかかわらず 500 で出す（common.css の font-synthesis-weight）。 */
    --font-jp: "fot-cezanne-pron", "Noto Sans JP", system-ui, sans-serif;
    /* 欧文（ナビ・ラベル）。メインロゴ（Helvetica）に揃える（2026-09-25 に Roboto から変更）。
       Adobe Fonts のキット収録は 300 / 400 / 700（各 italic あり）。500 を指定すると
       400、600 は 700 で出る（合成太字にはならない）。 */
    --font-latin: "helvetica-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* 欧文の見出し・ラベルで一段強くする箇所の太さ。2026-09-25 に Helvetica 700 /
       Neue 500 と見比べて 400（周りと同じ太さ）に決めた。強調は大きさと色で付ける。 */
    --font-latin-strong-weight: 400;
    --font-base: var(--font-jp);
    /* 見出しに使う欧文寄りフォント（必要に応じてページで上書き） */
    --font-heading: var(--font-jp);
    /* 大見出し専用の日本語書体（Adobe Fonts / FOT-セザンヌ Pro N）。
       キット収録は 500 だけなので、当てる側も 500 で使うこと（外すと合成太字になる）。
       --font-jp も同じ書体を先頭に持つ（試行中）。 */
    --font-display-jp: "fot-cezanne-pron", var(--font-heading);

    /* --- タイポスケール（流体: clamp(最小, 推奨, 最大)） ----------------- */
    --fs-2xs: 0.75rem;                               /* 12px キャプション */
    --fs-xs:  0.8125rem;                             /* 13px 補助 */
    --fs-sm:  0.875rem;                              /* 14px */
    --fs-base: 1rem;                                 /* 16px 本文 */
    --fs-md:  clamp(1.0625rem, 0.4vw + 0.95rem, 1.125rem);   /* 17–18 */
    --fs-lg:  clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);       /* 20–24 */
    --fs-xl:  clamp(1.5rem, 1.6vw + 1.1rem, 2rem);           /* 24–32 */
    --fs-2xl: clamp(2rem, 3vw + 1.2rem, 3rem);              /* 32–48 見出し */
    --fs-3xl: clamp(2.5rem, 5vw + 1.2rem, 4.5rem);          /* 大見出し/ヒーロー */

    --lh-tight: 1.2;
    --lh-snug: 1.4;
    --lh-base: 1.75;     /* 和文本文は広めが上品 */
    --lh-loose: 2;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.12em;   /* 欧文ラベルの字間 */

    /* --- 余白スケール（4px グリッド・rem ベース） ----------------------- */
    --space-3xs: 0.25rem;   /* 4  */
    --space-2xs: 0.5rem;    /* 8  */
    --space-xs:  0.75rem;   /* 12 */
    --space-sm:  1rem;      /* 16 */
    --space-md:  1.5rem;    /* 24 */
    --space-lg:  2rem;      /* 32 */
    --space-xl:  3rem;      /* 48 */
    --space-2xl: 4rem;      /* 64 */
    --space-3xl: 6rem;      /* 96 */
    /* セクション縦リズム（流体: モバイル詰め→PC ゆったり） */
    --space-section: clamp(3rem, 6vw, 7rem);

    /* --- レイアウト（基準 = About us の見え方） -------------------------
       ヘッダー(#header max-width:1340)は広いまま、コンテンツは 960 でゆったり中央 inset。
       この「広いヘッダー + 落ち着いたコンテンツ幅」のバランスを全ページの基準にする
       （decisions/2026-07-01_layout-breakpoint-system）。 */
    --container: 960px;        /* 既定コンテンツ幅（About us 基準・中央寄せ） */
    --container-narrow: 720px; /* 本文 measure（読み物・プロース） */
    --container-wide: 1340px;  /* 画像を広く見せる用（ヘッダー幅まで） */
    --gutter: clamp(1.25rem, 4vw, 2.5rem);  /* 左右余白 */
    /* コンテナの max-width に使う。中身(content-box)を --container に保ちつつ、
       gutter は狭い画面でだけ効く（広い画面では中身が 960 のまま＝画像とズレない）。
       使い方: max-width: var(--container-box); margin-inline:auto; padding-inline: var(--gutter); */
    --container-box: calc(var(--container) + 2 * var(--gutter));
    /* ヘッダー・全幅画像グリッド等、--container-wide(1340) を中身に保つ用 */
    --container-wide-box: calc(var(--container-wide) + 2 * var(--gutter));
    /* 画面端 → フレーム(1340)グリッド端 までの距離。
       full-bleed したセクションの padding-inline に使うと、背景は画面いっぱいのまま
       中身の左右端がヘッダーと揃う（舞台型セクションの唯一の整列ルール）。
       切替点は 1340 ではなく **1340 + 2*gutter（gutter 最大時 = 1420px）**。
       それ未満では --gutter で頭打ちする。

       ⚠️ スクロールバー幅 s（100vw は s を含む）の扱いは、使う側の形で誤差方向が逆になる:
         (a) .l-stage 経由（負マージンで bleed）… 1420 以上は s が相殺されて厳密一致。
             1420 未満は bleed 箱が文書端より s/2 外から始まる分、ヘッダーより s/2 外寄り。
         (b) 素の全幅セクション（負マージンなし・Top の Works 帯がこれ）… 1420 未満は
             ヘッダーと厳密一致。1420 以上は s/2 内寄り。
       いずれもオーバーレイスクロールバー環境（s=0）では誤差ゼロ。1px 単位で合わせたい
       場面でだけ効く。厳密一致が要るなら 100vw ではなく documentElement.clientWidth
       相当の同一座標系を共有する必要がある。

       ヘッダーも同じ --gutter を使う。981px 以上は #header、980px 以下は
       #header-wrapper が gutter を一度だけ持つため、モバイルを含め同じ左右端へ揃う。 */
    --frame-inset: max(var(--gutter), calc((100vw - var(--container-wide)) / 2));
    /* Topと下層ページで共有する、ヘッダー本体の下側フレーム。
       nav 文字の上下を同じ余白で挟む考え方で決めてある（上＝画面上端→文字頂点、
       下＝文字下端→本文）。バー 85px の頃は上 59px → gap 50px だった。
       2026-09-25: ヘッダーが広いとの FB でバーを 85 → 72 / gap 36 に詰めたところ、
       今度は詰まりすぎとの FB。中間の 80 / 44 に戻した。`--header-bar` を動かすときは
       この関係も測り直すこと。
       2026-10-06: 44 → 48（--space-xl）。写真・図で始まるページ（Works・Service・Company など）は 44px で詰まって見え、
       文字で始まる Topics 一覧（字面まで 58px）は広く見えたので、中間の切りの良い値にした。あわせて文字で始まる見出し
       （Topics の見出し・左カラムの先頭項目）の上の余白を 8 → 0 にし、写真の上端 48px・字面の上端 54px にそろえた。 */
    --space-header-gap: var(--space-xl);
    /* 790 以下（モバイルのヘッダー）の gap。バーが 68px に縮み、ロゴは上下 18px の
       中央揃えになるので、PC と同じ 40px 前後ではロゴの下だけが間延びする
       （2026-10-01 ユーザー指摘で 40 → 16px）。ロゴの下端から本文の最初の文字まで約 38px。 */
    --space-header-gap-compact: var(--space-sm);
    /* ヘッダーバーの高さ。PC は 80、モバイル（790 以下）は 68。
       縦が短い PC でも詰めない（ヘッダーと本文の間が詰まって釣り合いが崩れる。足りなければスクロールさせる）。
       ロゴ（PC 180px 幅＝高さ 40px）は文字のベースラインを nav に揃える（--header-logo-drop）。 */
    --header-bar: 80px;
    --header-bar-compact: 68px;
    /* ヘッダー側で上余白を確保し、見出し帯の後ろにも同じ間隔を置く。 */
    --space-page-heading-start: 0;
    --space-page-heading-end: var(--space-header-gap);

    /* --- ブレークポイント（参照用の正準値。メディアクエリで直書きする） --
       sm 480 / md 768 / lg 1024 / xl 1280 に統一する。
       既存の 1340/1080/980/840/790/730/640/620/500… はこの4点へ寄せる。 */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* --- 色（グレースケール基調・画像を主役にする中立 UI） -------------- */
    --color-bg: #f8f8f8;
    --color-surface: #ffffff;
    --color-text: #4c4948;        /* 本文。画像と共通ラベルの間で浮かないニュートラルグレー */
    --color-text-muted: #6b6b6b;  /* 補助本文・ラベル（白背景でも通常文字のコントラストを確保） */
    --color-text-faint: #a8a8a8;  /* placeholder等の非主要表示専用。通常の本文・ナビには使わない */
    --color-heading: #4c4948;     /* 見出しは本文インクと同色に統一し、階層は weight/size で付ける */
    --color-line: #e2e2e2;        /* 罫線・区切り */
    --color-line-strong: #cfcfcf;
    --color-accent: #4c4948;      /* 既定アクセント。彩度は画像へ譲る */
    --color-link: var(--color-text);
    --color-link-hover: #2b2a29;

    /* --- 装飾 ------------------------------------------------------------ */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.08);

    /* --- モーション（緩急の唯一の基準。動きを減らす設定でも止めない・2026-10-17） --- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 0.2s;   /* hover / focus 等の微反応 */
    --dur: 0.4s;        /* 既定（base） */
    --dur-slow: 0.6s;   /* 大きな移動・フェード */
    /* ドロワー開閉に連動するプロパティの**唯一の速度**。
       面（ヘッダー背景・ドロワー本体）とUI色（ロゴ・トリガー・文字）が
       別々の速度で動くと崩れて見えるため、まとめてここを参照する。
       トリガー自身の×への変形だけは即応を優先して別（--dur-fast 相当）。 */
    --drawer-dur: 0.3s;

    /* --- 読み込み演出（`js/*` と CSS が同じ値を参照する）------------------
       「伏せておいて、揃ってから出す」系の時間はここだけに書く。
       ⚠️ JS 側は `getComputedStyle(document.documentElement)` で読む。head 同期の
       スクリプトから読めるのは、WordPress が head で「全 style → 全 script」の順に
       出力し、stylesheet が後続 script の実行をブロックするため。**この順序を
       変えると JS がトークンを読めずフォールバック値に落ちる**（壊れはしないが
       ここを直しても効かなくなる）。
       ⚠️ 単位は必ず付ける。JS 側は `s` と `ms` を見分けて ms に正規化する。 */
    --reveal-dur: var(--dur-slow);   /* 揃ってから出すときのフェード */
    --reveal-hold-max: 1200ms;       /* 揃うのを待つ上限。超えたら揃わなくても出す */
    --reveal-hold-font-max: 2600ms;  /* Adobe Fonts のキットも待つページの上限。
                                        キットの実測は 1703ms で、既定の 1200ms では
                                        毎回打ち切られる。ローダー自身の打ち切り
                                        （3000ms）より手前に置くこと */
    --reveal-hold-group-max: 4000ms; /* 複数写真グループの上限。写真1枚が届かないまま
                                        群ごと伏せ続けないための打ち切り。単写真より
                                        長いのは、正常な低速回線で代替表示へ落ちない幅 */
    --reveal-hold-first-max: 4000ms; /* 先に読ませる1枚（data-image-first）を待つ間、
                                        他の lazy 画像の読み込みを止めておく上限。
                                        1枚が届かないまま他の写真を止め続けないための打ち切り */
    --reveal-swap-out: 180ms;        /* パネル差し替え: 消える側 */
    --reveal-swap-in: 340ms;         /* パネル差し替え: 現れる側 */
    --reveal-step-out: 280ms;        /* 段送りの入れ替え（Vision の段・Service のスマホのパネル）: 消える側 */
    --reveal-step-in: 540ms;         /* 同: 現れる側。共通の差し替え（180 → 340ms）では大きな見出しが
                                        ぱっと切り替わって見えた（2026-10-01）。
                                        合計を揃える（vision-stage.js の HERO_SLIDE） */
    --reveal-panel-resize: 360ms;    /* タブ切替の高さアニメ */
    --reveal-panel-in: 260ms;        /* タブ切替の中身のフェード */

    /* --- フォーカスリング（a11y 基線・キーボード操作時に出す） ----------- */
    --focus-ring-width: 2px;
    --focus-ring-color: var(--color-heading);
    --focus-ring-offset: 2px;
    --color-selection: rgba(76, 73, 72, 0.14);   /* ::selection 背景 */

    /* --- z-index スケール（重なり順の唯一の基準・生値を直書きしない） ---- */
    --z-base: 0;
    --z-raised: 10;      /* カード hover 等のわずかな持ち上げ */
    --z-dropdown: 100;   /* メニュー展開 */
    --z-sticky: 200;     /* 追従要素 */
    --z-header: 300;     /* グローバルヘッダー */
    --z-overlay: 800;    /* 背景を覆うレイヤ */
    --z-modal: 900;      /* モーダル本体 */
    --z-toast: 1000;     /* 通知（最前面） */
  }

  /* 非トップの小型デスクトップだけを連続的に縮尺調整する。
     1440px で既定値へ接続し、端末名ごとの個別値ではなく実効 viewport で決める。
     本文(--fs-base)は可読性の基線として 16px を維持する。

     下端は **段組み軸（769）** に合わせる。ヘッダーのドロワー転換点（980）や
     Hero の構図転換点（790）とは別軸。旧 791 は Hero 境界に引かれた値の名残だった。 */
  @media (min-width: 769px) and (max-width: 1440px) {
    body.site-page {
      --container: clamp(50rem, 66.6667vw, 60rem);
      --container-narrow: clamp(40rem, 50vw, 45rem);
      --container-box: calc(var(--container) + 2 * var(--gutter));
      --fs-md: clamp(1rem, calc(0.75rem + 0.4167vw), 1.125rem);
      --fs-lg: clamp(1.25rem, calc(0.25rem + 1.3889vw), 1.5rem);
      --fs-xl: clamp(1.5rem, calc(0.5rem + 1.6667vw), 2rem);
      --fs-2xl: clamp(2rem, calc(0.5rem + 2.7778vw), 3rem);
    }
  }

}

/* -----------------------------------------------------------------------------
   2. RESET — モダンリセット
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul {
    margin: 0;
  }
  ul[class], ol[class] { list-style: none; padding: 0; }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: none; }

  a { color: inherit; text-decoration: none; }

  :where(h1, h2, h3, h4, h5, h6) { font-weight: inherit; }
}

/* -----------------------------------------------------------------------------
   3. BASE — 要素デフォルト（トークン参照）
   -------------------------------------------------------------------------- */
@layer base {
  html {
    /* 1rem = 16px 基準。和文行間を広めに取り上品さを担保 */
    font-size: 100%;
    scroll-behavior: smooth;
    text-autospace: normal;
  }

  /* WebKit（Safari・iPhone の各ブラウザ）は、セザンヌの和文と数字・欧文の境目に空きを入れるとき、境目の次の1字だけを
     右へずらして後ろの字に重ねる（「が2026」の「2」が「0」に、「2026年度」の「年」が「度」に食い込む。2026-10-31
     iPhone SE でユーザー指摘。Chromium と、WebKit でも Noto Sans JP では起きない）。WebKit では自動の空きを入れない。
     hanging-punctuation に対応しているのは WebKit だけなので、それで見分ける。 */
  @supports (hanging-punctuation: first) {
    html {
      text-autospace: no-autospace;
    }
  }

  body {
    font-family: var(--font-base);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    background: var(--color-bg);
    /* `palt` は句読点の全角幅まで半分に詰める。本文へ一律適用せず、和文フォントが
       持つ既定の字幅を保つ。欧文との間隔は html の text-autospace に任せる。 */
    /* font-feature-settings: normal; */
    font-feature-settings: "palt" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* Firefox の macOS 版で同じ描き方にする（表示だけ。読み込みには関係しない）。 */
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: var(--lh-tight);
    color: var(--color-heading);
    font-weight: 600;
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); }
  h4 { font-size: var(--fs-md); }
  h5 { font-size: var(--fs-base); }
  h6 { font-size: var(--fs-sm); }

  /* ⚠️ 段落に text-wrap: pretty を当てない。和文でも最終行を長くするために手前の行を
     わざと早く折り、禁則の追い出しと重なって右端がバラバラに欠ける（2026-09-25 に
     サイト全体で撤去。Top の序文は 390px 幅で 4〜34px 欠けていた）。見出しの balance は
     行の長さを揃える意図的な指定なので別物。 */
  p + p { margin-top: var(--space-sm); }

  a { color: var(--color-link); transition: color var(--dur-fast) var(--ease); }
  a:hover { color: var(--color-link-hover); }

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

  /* 固有名・コードなど、自動の和欧間隔を入れない範囲に使う。 */
  :where(code, pre, kbd, samp, .u-no-autospace) {
    text-autospace: no-autospace;
  }

  /* 欧文ラベル（メニュー英字・セクション見出しの英語など）に使うユーティリティ */
  .u-label-latin {
    font-family: var(--font-latin);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
  }
}

/* -----------------------------------------------------------------------------
   4. LAYOUT — レイアウトプリミティブ
   -----------------------------------------------------------------------------
   ⚠️ ここだけ **意図的に未レイヤ**（@layer に入れない）。

   理由: 未レイヤの `reset.css` が div/section/header/article/aside/nav 等ほぼ全要素へ
   `margin: 0; padding: 0` を当てている。CSS Cascade では**未レイヤの通常宣言はレイヤ内の
   通常宣言に常に勝つ**（詳細度では覆せない）ため、これらを @layer layout に入れると
   margin/padding 系が全て reset に負けて無効化される。
   実測（2026-08-27・Chromium）: レイヤ内に置いた .l-stage は margin-inline が 0px に
   潰れ、.l-stage-inset の padding も 0px。ヘッダーとの左端ズレ 190px。

   未レイヤ同士なら「後勝ち + 詳細度」で決まる。foundation.css は reset.css の**後**に
   enqueue され、`.l-stage`(0,1,0) は `section`(0,0,1) より詳細度も高いので確実に勝つ。
   ページ CSS（同じく未レイヤ・さらに後読み）からは従来どおり上書きできる。

   → reset.css を `@layer reset` へ入れる方が本筋だが、それは未レイヤの style.css との
     力関係を全ページで変えるので別途（下記 `.l-container` の件と併せて要検討）。
   -------------------------------------------------------------------------- */

/* ⚠️ 既知の不具合: container-box イディオム違反。max-width は --container-box を使うべき
   （現状は中身が gutter 分 inset して画像/ヘッダーとズレる）。実使用ゼロのため実害は
   出ていないが、使う前に直すこと。theme/CLAUDE.md「幅の4段」参照。 */
.l-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.l-container--narrow { max-width: var(--container-narrow); }
.l-container--wide { max-width: var(--container-wide); }

/* セクション縦リズム（妙な余白を一掃する単一の基準） */
.l-section {
  padding-block: var(--space-section);
}
.l-section + .l-section { padding-block-start: 0; }

/* 子要素間に一定リズムを与える stack */
.l-stack > * + * { margin-block-start: var(--space-md); }
.l-stack--lg > * + * { margin-block-start: var(--space-lg); }

/* 自動カラム（最小幅を割ったら折り返す） */
.l-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* 画像を主役に見せるフルブリード（コンテナ内から左右いっぱいへ） */
.l-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* stage — 舞台型セクションの器。コンテナ内から画面幅いっぱいへ抜く。
   背景・大判メディアは直下の子として 100% で敷き、見出し・本文は
   .l-stage-inset を噛ませてフレーム(1340)へ戻す（→ ヘッダーと左右端が揃う）。
   overflow-x は clip を使う。hidden は scroll container を作り、片軸指定でも
   反対軸が visible → auto に変わるため、中の position:sticky（Vision のピン留め等）の
   参照 scrollport が変わって効かなくなる。clip は scroll container / BFC /
   sticky・fixed の containing block のいずれも作らない。
   対応: Chrome 90+ / Firefox 81+ / Safari 16+。 */
.l-stage {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow-x: clip;
}

/* bleed した中身をフレーム(1340)グリッドへ戻す。.l-stage の子に限らず、
   すでに全幅で置かれているセクション（Top の Works 帯など）にも使える。
   注: .l-stage 経由（負マージンあり）と、素の全幅セクション（負マージンなし）では
   スクロールバー有り環境での誤差方向が逆になる。--frame-inset のコメント参照。 */
.l-stage-inset {
  padding-inline: var(--frame-inset);
}

/* --- 大見出しの書体待ち --------------------------------------------------
   Adobe Fonts は JavaScript が @font-face を後から差し込むため、
   `document.fonts.ready` はキットが届く前に解決してしまう（実測で 524ms 対 1703ms）。
   page-reveal はそれを見て解除するので、`--font-display-jp` を当てた見出しだけ
   Noto で描かれてから入れ替わるのが見える。

   そこで見出しだけ伏せて、揃ってから出す。ページ全体は待たせない。

   ⚠️ `gkk-display-font-loading` はローダー（js/adobe-fonts-vision.js）がセザンヌのキットを
   読むページでだけ立てるので、JavaScript が動かない環境やキットを読まないページでは
   最初から見えている（既定で隠す書き方にしないこと）。Adobe の `wf-loading` は使わない
   （キットが2つあると Helvetica が先に届いた時点で外れる）。
   ⚠️ 伏せるのは **color**。`opacity` は Vision の段の切り替え（css/vision_stage.css）が
   フェードに使っているので重ねない。`visibility` / `display` は寸法や配置が変わる。
   色なら配置にも寸法にも触らない。
   キットが落ちた場合はローダーの3秒の打ち切りでクラスが外れ、文字は戻る。 */
.vision-stage__hero,
.vision-panel__title,
.home-introduction h2 {
  transition: color var(--dur-slow) var(--ease);
}

html.gkk-display-font-loading .vision-stage__hero,
html.gkk-display-font-loading .vision-panel__title,
html.gkk-display-font-loading .home-introduction h2 {
  color: transparent;
}

/* `js/page-reveal.js` がキットの決着まで本文ごと伏せている間は、この色フェードを
   止める。伏せたまま色だけ先に戻し、**開けるのは本文のフェード1回だけ**にするため
   （両方フェードさせると、見出しだけ二重に薄く出て他とズレて見える）。
   属性はページを出した次のフレームで外れるので、待ち切れず打ち切った回に後から
   キットが届いたときは、従来どおり色がフェードで入れ替わる。 */
html[data-page-reveal-font] .vision-stage__hero,
html[data-page-reveal-font] .vision-panel__title,
html[data-page-reveal-font] .home-introduction h2 {
  transition: none;
}