/* ============================================================
   PROOF OF BUILD — style.css
   準拠：docs/03_design_system.md（トークンは §2 をそのまま使用）
   ルール：以下のトークン以外の生値をCSSに書かない
   ============================================================ */

:root {
  /* =========================================================
     COLOR — 黒＋アクセント1色（琥珀）
     アクセント根拠：
     ① 「証拠物件（Exhibit）」の物証タグ・封緘・現場の作業灯を想起させ、
        B案の編集方針（証拠の陳列）と意味レベルで接続する
     ② 黒背景上でのコントラスト比 9.47:1（AAA水準）を確保でき、
        装飾色ではなく「機能する色」（リンク・番号・CTA）として使える
     ③ 紫グラデ・シアン系の「AI系サイトの記号」を確実に回避できる
     ========================================================= */

  /* 背景階層（下ほど手前・明るい） */
  --bg-0: #0A0A0B;        /* ベース。ページ全体の黒（純黒#000は使わない） */
  --bg-1: #121214;        /* セクション差のための微差レイヤー */
  --bg-2: #1A1A1E;        /* カード・モーダルの面 */
  --bg-overlay: rgba(6, 6, 8, 0.55);   /* ヒーロー動画上のスクリム */
  --bg-scrim: rgba(6, 6, 8, 0.82);     /* モーダル背面 */

  /* テキスト階層 */
  --text-hi:  #F4F2ED;    /* 見出し・本文主要（warm white。純白は使わない） */
  --text-mid: #A9A79F;    /* 説明文・キャプション */
  --text-low: #87857D;    /* 補助情報・メタ（AA下限を確保済み、これ未満に暗くしない） */

  /* アクセント（1色のみ。追加禁止） */
  --accent:      #E3A94F; /* Exhibit番号・リンク・CTA・フォーカスリング */
  --accent-dim:  rgba(227, 169, 79, 0.14); /* ホバー面・タグ背景などの気配用 */

  /* 線 */
  --line:        #2A2A2F; /* 標準ボーダー（装飾でなく区画整理のための線） */
  --line-strong: #3A3A40; /* ホバー時・強調区画 */

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-display: 'Anton', 'Noto Sans JP', sans-serif;
  --font-body:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Menlo', monospace;

  /* 流体タイプスケール（375px→1440pxで補間） */
  --fs-hero:    clamp(3.5rem, 1.5rem + 10.5vw, 9rem);      /* PROOF OF BUILD */
  --fs-h1:      clamp(2.25rem, 1.35rem + 3.8vw, 4.5rem);   /* セクション英字見出し */
  --fs-h2:      clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);    /* 和文見出し・作品名 */
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);/* ステートメント本文 */
  --fs-body:    clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-small:   0.875rem;                                   /* タグ・キャプション */
  --fs-micro:   0.75rem;                                    /* Exhibit番号・クレジット */

  /* 行間 */
  --lh-display: 0.96;   /* 欧文ディスプレイ専用。和文には使わない */
  --lh-heading: 1.3;    /* 和文見出し */
  --lh-body:    1.9;    /* 和文本文（ゆったり＝「静かな宣言」の声） */
  --lh-tight:   1.5;    /* カード内・UI文言 */

  /* 字間 */
  --ls-display: 0.01em;  /* Antonは詰まっているため微調整のみ */
  --ls-heading: 0.04em;  /* 和文見出し */
  --ls-body:    0.03em;  /* 和文本文 */
  --ls-mono:    0.12em;  /* EXHIBIT 01 等のラベル（ゆったり空けて記録文書感） */

  /* =========================================================
     SPACING — 8px基準
     ========================================================= */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 1rem;      /* 16px */
  --sp-4: 1.5rem;    /* 24px */
  --sp-5: 2rem;      /* 32px */
  --sp-6: 3rem;      /* 48px */
  --sp-7: 4.5rem;    /* 72px */
  --sp-8: 7rem;      /* 112px */
  --section-pad: clamp(5rem, 3rem + 8vw, 10rem);  /* セクション上下。黒の余白が場面転換 */
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem); /* 画面左右の呼吸 */

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-wide:   1280px;  /* ヒーロー・ギャラリーグリッド */
  --container-text:   1120px;  /* プロセス・About等の標準 */
  --container-narrow:  720px;  /* ステートメント（1カラム読み物） */

  /* =========================================================
     SHAPE / ELEVATION — 影よりも「面の明度差＋線」で階層を作る
     ========================================================= */
  --radius-0: 0;        /* 基本。カード・画像・ボタンは直角 */
  --radius-1: 2px;      /* タグ・小さなUIのみ許可 */
  --border-1: 1px solid var(--line);
  --border-hover: 1px solid var(--line-strong);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55); /* 影はモーダル1箇所のみ使用可 */

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);   /* 登場・展開（急減速＝映画的） */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);  /* 状態の入れ替え */
  --dur-fast:   150ms;   /* ホバー・押下などのマイクロ反応 */
  --dur-base:   300ms;   /* モーダル開閉・UI状態変化 */
  --dur-slow:   700ms;   /* スクロール登場・ヒーローの一度きりの演出 */
  --reveal-shift: 24px;  /* 登場アニメの移動量（これ以上動かさない） */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --reveal-shift: 0px;
  }
}

/* ------------------------------------------------------------
   実装定数（03_design_system.md 本文中で指定されている構造値。
   トークン表外だが仕様書由来の値のみをここに集約する）
   ------------------------------------------------------------ */
:root {
  --nav-h: 64px;              /* §3 固定ナビ高さ */
  --modal-max-w: 880px;       /* §3-3 モーダル最大幅 */
  --stagger: 80ms;            /* §4-2 カードの列スタッガー */
  --hero-out-shift: -32px;    /* §4-1 タイトルアウトの移動量 */
  --hover-lift: -2px;         /* §4-3 CTAホバー */
  --scroll-line-h: 48px;      /* §3-1 スクロール誘導の縦線 */
  --tap-min: 44px;            /* §5 最小タップターゲット */
  --grain-opacity: 0.03;      /* §3-1 粒子ノイズ */
  --dur-ambient: 44s;         /* ヒーロープレースホルダーの光（超低速・唯一の環境モーション） */
  --nav-alpha: 90%;           /* §3 ナビ不透明度 */
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg-0);
  color: var(--text-hi);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: 400;
}

img, svg, video { display: block; max-width: 100%; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul, ol { list-style: none; }

/* フォーカス可視化（§5・握り潰し禁止） */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: var(--accent);
  color: var(--bg-0);
}

/* コンテナ */
.container-wide,
.container-text,
.container-narrow {
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}
.container-wide   { max-width: calc(var(--container-wide)   + var(--gutter) * 2); }
.container-text   { max-width: calc(var(--container-text)   + var(--gutter) * 2); }
.container-narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

/* セクション共通（境界線・背景替えに頼らず余白で区切る） */
.section { padding-block: var(--section-pad); }
[id] { scroll-margin-top: calc(var(--nav-h) + var(--sp-4)); }

/* 英字モノラベル（STATEMENT / ABOUT 等） */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  color: var(--accent);
  text-transform: uppercase;
}

/* 英字ディスプレイ見出し（EXHIBITS / HOW IT'S BUILT） */
.display-h {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-hi);
  text-transform: uppercase;
}

/* 和文添え書き */
.section-sub {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-mid);
}

.section-lead {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
  color: var(--text-low);
}

/* ============================================================
   スクロール登場演出（IntersectionObserver ＋ .is-in、1回きり）
   transform / opacity のみ
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* JS無効環境・reduced-motion では最初から定位置（情報の欠落ゼロ） */
.no-js .reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* スキップリンク（キーボード操作時のみ表示 / QA m-8） */
.skip-link {
  position: fixed;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 20;
  transform: translateY(calc(-100% - var(--sp-3)));
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--sp-1) var(--sp-3);
  background: var(--bg-2);
  color: var(--text-hi);
  border: var(--border-1);
  border-radius: var(--radius-1);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-mono);
  text-decoration: underline;
}
.skip-link:focus-visible { transform: translateY(0); }

/* ============================================================
   固定ナビ（高さ64px・--bg-0 90%不透明・ブラー無し）
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg-0) var(--nav-alpha), transparent);
  border-bottom: var(--border-1);
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.nav__logo {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-mono);
  line-height: 1;
  color: var(--text-hi);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  transition: color var(--dur-fast) var(--ease-inout);
}
.nav__logo:hover { color: var(--accent); }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.nav__link {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  color: var(--text-mid);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--sp-1);
  transition: color var(--dur-fast) var(--ease-inout);
}
.nav__link:hover { color: var(--accent); }
.nav__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  color: var(--text-mid);
  transition: color var(--dur-fast) var(--ease-inout);
}
.nav__x:hover { color: var(--accent); }
.nav__x svg { width: var(--sp-3); height: var(--sp-3); fill: currentColor; }

/* モバイル：ロゴ＋EXHIBITSアンカーのみ */
@media (max-width: 767.98px) {
  .nav__item--sub, .nav__x { display: none; }
}

/* ============================================================
   1. ヒーロー（100svh）
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* --- 背景スロット（実装契約：中身を差し替えても上位レイヤーは不変） ---
   現在：CSSプレースホルダー（放射光＋粒子ノイズ＋超低速の光のドリフト）
   将来：<video autoplay muted loop playsinline poster> を1枚入れるだけ。
   差し替え手順は site/README.md 参照 */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      120% 90% at 50% 32%,
      var(--bg-1),
      var(--bg-0) 72%
    );
}
.hero__media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 粒子ノイズ（SVG feTurbulence / opacity 0.03） */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/grain.svg");
  background-repeat: repeat;
  opacity: var(--grain-opacity);
  pointer-events: none;
}
/* 展示室に光が入る前の、かすかな作業灯のドリフト（transform/opacityのみ） */
.hero__media::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(
      38% 30% at 58% 30%,
      color-mix(in srgb, var(--text-hi) 7%, transparent),
      transparent 72%
    );
  animation: hero-light var(--dur-ambient) var(--ease-inout) infinite alternate;
  pointer-events: none;
}
@keyframes hero-light {
  from { transform: translate3d(-4%, -2%, 0) scale(1);    opacity: 0.5; }
  to   { transform: translate3d(4%, 3%, 0)  scale(1.18);  opacity: 0.95; }
}
/* 動画搭載時：背景にCSSアニメーションを掛けない（§4-1） */
.hero__media:has(> video)::after { animation: none; opacity: 0; }
/* 一時停止（WCAG 2.2.2 用ボタンから制御） */
.hero.is-paused .hero__media::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero__media::after { animation: none; }
}

/* スクリム＋下端の黒→透明グラデ（唯一の例外許可グラデ） */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg-overlay);
  pointer-events: none;
}
.hero__scrim::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30svh;
  background: linear-gradient(to bottom, transparent, var(--bg-0));
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-8);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-hi);
}
.hero__line { display: block; }

.hero__sub {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  font-weight: 700; /* Noto Sans JP は 400/700 のみ self-host（旧500はB-1のフォント削減で700へ） */
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-mid);
}
.hero__sub-en {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--text-low);
  font-style: italic;
}

/* EXHIBIT 00（右下・動画クレジット） */
.hero__credit {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: var(--sp-4);
  max-width: calc(var(--container-narrow) / 2);
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  line-height: var(--lh-tight);
  color: var(--text-low);
}

/* 背景の動きを止める（左下。右下は EXHIBIT 00 クレジットが占有するため。
   ※03_design_system.md §5 は「右下」だが競合回避のため左下——art-director 追認待ち（QA m-3） */
.hero__pause {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: var(--sp-4);
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--text-low);
  border: var(--border-1);
  border-radius: var(--radius-1);
  padding: var(--sp-1) var(--sp-3);
  transition: color var(--dur-fast) var(--ease-inout),
              border-color var(--dur-fast) var(--ease-inout);
}
.hero__pause:hover { color: var(--accent); border-color: var(--line-strong); }
.hero__pause[aria-pressed="true"] { color: var(--accent); }

/* スクロール誘導（下中央・CTAは置かない） */
.hero__scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--sp-4);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--text-low);
  text-align: center;
}
.hero__scroll-ja {
  font-family: var(--font-body);
  letter-spacing: var(--ls-heading);
}
.hero__scroll-line {
  width: 1px;
  height: var(--scroll-line-h);
  background: var(--line-strong);
}

/* モバイル：EXHIBIT 00 はコピー下に繰り上げ */
@media (max-width: 767.98px) {
  .hero__credit {
    position: static;
    margin-top: var(--sp-5);
    max-width: none;
    text-align: left;
  }
  .hero__pause {
    right: auto;
    left: var(--gutter);
    bottom: var(--sp-4);
  }
  .hero__scroll { display: none; }
}

/* --- キネティックタイポ（初回ロード・ヒーロー限定） --- */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(var(--reveal-shift)); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__line:nth-child(1) { animation: hero-rise var(--dur-slow) var(--ease-out) 0ms both; }
.hero__line:nth-child(2) { animation: hero-rise var(--dur-slow) var(--ease-out) 120ms both; }
.hero__sub,
.hero__sub-en            { animation: hero-rise var(--dur-slow) var(--ease-out) 320ms both; }
.hero__credit,
.hero__pause,
.hero__scroll            { animation: hero-rise var(--dur-slow) var(--ease-out) 600ms both; }

@media (prefers-reduced-motion: reduce) {
  .hero__line:nth-child(1),
  .hero__line:nth-child(2),
  .hero__sub,
  .hero__sub-en,
  .hero__credit,
  .hero__pause,
  .hero__scroll { animation: none; }
}

/* --- タイトルアウト（スクロールで文字が背景より先に消える）
   CSS Scroll-driven Animations 対応環境のみの加点演出 --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes hero-title-out {
      to { opacity: 0; transform: translateY(var(--hero-out-shift)); }
    }
    .hero__inner {
      animation: hero-title-out linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 45%;
    }
  }
}

/* ============================================================
   2. ステートメント
   ============================================================ */
.statement__sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-heading);
  color: var(--text-low);
}
.statement__body {
  margin-top: var(--sp-6);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-hi);
}
.statement__line { display: block; }
.statement__en {
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--text-low);
  font-style: italic;
}

/* ============================================================
   3. EXHIBITS（ギャラリー）
   ============================================================ */
.exhibits__grid {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5) var(--sp-4);
}
@media (min-width: 768px) {
  .exhibits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .exhibits__grid { grid-template-columns: repeat(3, 1fr); }
}

/* 列位置スタッガー（§4-2：×80ms、最大160ms） */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .exhibits__grid > li:nth-child(2n) { transition-delay: var(--stagger); }
}
@media (min-width: 1024px) {
  .exhibits__grid > li:nth-child(3n + 2) { transition-delay: var(--stagger); }
  .exhibits__grid > li:nth-child(3n)     { transition-delay: calc(var(--stagger) * 2); }
}

/* カード（全体が1つの <a>） */
.card {
  display: block;
  height: 100%;
  background: var(--bg-2);
  border: var(--border-1);
  border-radius: var(--radius-0);
  transition: border-color var(--dur-fast) var(--ease-inout);
}
.card:hover,
.card:focus-visible { border-color: var(--line-strong); }

.card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-1);
  border-bottom: var(--border-1);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.card__thumb-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--text-low);
  text-align: center;
  padding: var(--sp-3);
  transition: transform var(--dur-fast) var(--ease-inout);
}
.card:hover .card__thumb-inner { transform: scale(1.03); }

.card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card__thumb img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .card__thumb img,
  .card:hover .card__thumb img { transition: none; transform: none; }
}

/* 搬入中カード（EXHIBIT 02 以降のプレースホルダー。リンクなし） */
.card--pending { cursor: default; }
.card--pending:hover { border-color: var(--line); }
.card--pending .card__title {
  color: var(--text-mid);
  word-break: keep-all; /* 「証拠物／件」の語中折返し防止（QA m-2。読点でのみ折り返す） */
}

.card__body { padding: var(--sp-4); }

.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  color: var(--accent); /* カード内で唯一のアクセント */
}
.card__cat {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--text-low);
  border: var(--border-1);
  border-radius: var(--radius-1);
  padding: 2px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.card__title {
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: var(--text-hi);
  text-wrap: balance;
}
.card__desc {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
  color: var(--text-mid);
}
.card__tech {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--text-low);
}
.card__more {
  display: inline-block;
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--text-mid);
  transition: color var(--dur-fast) var(--ease-inout);
}
.card:hover .card__more { color: var(--accent); }

/* カード内タイトルはカードグリッド用に h2 スケール下限へ寄せる */
@media (min-width: 1024px) {
  .card__title { font-size: var(--fs-lead); }
}

/* ============================================================
   4. HOW IT'S BUILT
   ============================================================ */
.process__intro {
  margin-top: var(--sp-6);
  max-width: var(--container-narrow);
  color: var(--text-mid);
  line-height: var(--lh-body);
}
.process__intro-line { display: block; }

.process__steps {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 1024px) {
  .process__steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
.step__num {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  color: var(--accent);
}
.step__title {
  margin-top: var(--sp-3);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-hi);
}
@media (min-width: 1024px) {
  .step__title { font-size: var(--fs-lead); }
}
.step__body {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-mid);
}
.step__line { display: block; }

.process__close {
  margin-top: var(--sp-7);
  max-width: var(--container-narrow);
  color: var(--text-hi);
  line-height: var(--lh-body);
}

/* 品質数値の掲示枠 */
.process__metrics {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: var(--border-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--text-low);
}

/* ============================================================
   5. About
   ============================================================ */
.about__name {
  margin-top: var(--sp-6);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-hi);
}
.about__role {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--text-low);
  line-height: var(--lh-tight);
}
.about__body {
  margin-top: var(--sp-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-mid);
}
.about__body-line { display: block; }
.about__sns {
  margin-top: var(--sp-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-mid);
}
.about__sns-link {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-mono);
  color: var(--accent);
}
.about__sns-link:hover { text-decoration: underline; }

/* ============================================================
   6. Contact（ここだけ中央寄せ）＋ フッター
   ============================================================ */
.contact { text-align: center; }
.contact__body {
  margin-top: var(--sp-6);
  line-height: var(--lh-body);
  color: var(--text-mid);
}
.contact__body-line { display: block; }
.contact__mail {
  display: inline-block;
  margin-top: var(--sp-6);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  color: var(--accent);
  transition: color var(--dur-fast) var(--ease-inout);
}
.contact__mail:hover { text-decoration: underline; }
.contact__dm {
  display: inline-block;
  margin-top: var(--sp-4);
  font-size: var(--fs-body);
  color: var(--text-mid);
  transition: color var(--dur-fast) var(--ease-inout);
}
.contact__dm:hover { color: var(--accent); text-decoration: underline; }
.contact__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-micro);
  color: var(--text-low);
}

.footer {
  border-top: var(--border-1);
  padding-block: var(--sp-6);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  line-height: var(--lh-tight);
  color: var(--text-low);
}
/* 本文中リンクは色だけに頼らず常時下線（WCAG 1.4.1 / QA M-1） */
.footer__link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ============================================================
   モーダル（<dialog>）
   ============================================================ */
.exhibit-dialog {
  margin: auto;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--modal-max-w);
  max-height: calc(100svh - var(--gutter) * 2);
  background: var(--bg-2);
  color: var(--text-hi);
  border: var(--border-1);
  border-radius: var(--radius-0);
  box-shadow: var(--shadow-modal);
  overflow-y: auto;
  padding: 0;
}
.exhibit-dialog::backdrop {
  background: var(--bg-scrim);
}
/* モバイルは全画面 */
@media (max-width: 767.98px) {
  .exhibit-dialog {
    width: 100%;
    height: 100svh;
    max-width: none;
    max-height: none;
    border: 0;
  }
}

/* 開閉モーション（開く=base/ease-out、閉じる=fastの逆再生） */
@keyframes dialog-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.exhibit-dialog[open] {
  animation: dialog-in var(--dur-base) var(--ease-out);
}
.exhibit-dialog[open]::backdrop {
  animation: backdrop-in var(--dur-base) var(--ease-out);
}
@keyframes dialog-out {
  to { opacity: 0; transform: scale(0.98); }
}
@keyframes backdrop-out {
  to { opacity: 0; }
}
.exhibit-dialog.is-closing {
  animation: dialog-out var(--dur-fast) var(--ease-inout) forwards;
}
.exhibit-dialog.is-closing::backdrop {
  animation: backdrop-out var(--dur-fast) var(--ease-inout) forwards;
}

.dialog__close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 1;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  display: grid;
  place-items: center;
  font-size: var(--fs-lead);
  line-height: 1;
  color: var(--text-mid);
  background: color-mix(in srgb, var(--bg-0) var(--nav-alpha), transparent);
  border: var(--border-1);
  border-radius: var(--radius-1);
  transition: color var(--dur-fast) var(--ease-inout),
              border-color var(--dur-fast) var(--ease-inout);
}
.dialog__close:hover { color: var(--accent); border-color: var(--line-strong); }

.dialog__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-1);
  border-bottom: var(--border-1);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--text-low);
  text-align: center;
  padding: var(--sp-3);
}

.dialog__body { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
@media (max-width: 767.98px) {
  .dialog__body { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
}

.dialog__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.dialog__num {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  color: var(--accent);
}
.dialog__cat {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--text-low);
  border: var(--border-1);
  border-radius: var(--radius-1);
  padding: 2px 8px;
  text-transform: uppercase;
}
.dialog__title {
  margin-top: var(--sp-3);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}
.dialog__overview {
  margin-top: var(--sp-4);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-mid);
}
.dialog__label {
  display: block;
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  color: var(--accent);
  text-transform: uppercase;
}
.dialog__role,
.dialog__tech {
  margin-top: var(--sp-2);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--text-mid);
}
.dialog__tech {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-mono);
  color: var(--text-low);
}
.dialog__actions {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.dialog__hint {
  margin-top: var(--sp-4);
  font-size: var(--fs-micro);
  color: var(--text-low);
}
.dialog__hint kbd {
  font-family: var(--font-mono);
  border: var(--border-1);
  border-radius: var(--radius-1);
  padding: 0 var(--sp-1);
}

/* ボタン（主CTA=アクセント面／副CTA=線のみ） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-body);
  font-weight: 700; /* Noto Sans JP は 400/700 のみ self-host（旧500はB-1のフォント削減で700へ） */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  border-radius: var(--radius-0);
  transition: transform var(--dur-fast) var(--ease-inout),
              color var(--dur-fast) var(--ease-inout),
              border-color var(--dur-fast) var(--ease-inout),
              background-color var(--dur-fast) var(--ease-inout);
}
.btn--primary {
  background: var(--accent);
  color: var(--bg-0);
  font-weight: 700;
}
.btn--primary:hover { transform: translateY(var(--hover-lift)); }
.btn--ghost {
  border: var(--border-1);
  color: var(--text-mid);
  background: none;
}
.btn--ghost:hover {
  color: var(--text-hi);
  border-color: var(--line-strong);
  background: var(--accent-dim);
}

/* ============================================================
   404
   ============================================================ */
.notfound {
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.notfound__inner { padding-block: var(--section-pad); }
.notfound__title {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.notfound__body {
  margin-top: var(--sp-6);
  color: var(--text-mid);
  line-height: var(--lh-body);
}
.notfound__body-line { display: block; }
.notfound__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-mono);
  color: var(--accent);
}
.notfound__back:hover { text-decoration: underline; }

/* モーダル内サムネイル画像（実作品） */
.dialog__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}