/* =====================================================================
   sections.css — セクション固有スタイル（STRATA / CSS 3D パララックス）
   ---------------------------------------------------------------------
   ■ 3D 演出の仕組み
     すべてのスクロール演出は進捗変数 --p（0..1）だけを消費する。
     --p の供給源は 2 系統あり、どちらでも同じ見た目になる:
       A) CSS Scroll-driven Animations（下の @supports ブロック内で定義）
       B) engine.js のフォールバック（非対応ブラウザでのみ、要素の
          インラインスタイルに --p を書き込む。対象は HTML の data-p 属性）
   ■ --p を消費する opacity / transform の演出は、
       1) @supports (animation-timeline: scroll()) ブロック内（ネイティブ系）
       2) html[data-scroll-driven="fallback"] スコープ内（JS フォールバック系）
     の 2 箇所「のみ」に対で書く（内容は完全に同期させること）。
     どちらでもない環境（scroll-driven 非対応 + JS 無効）では演出が一切
     適用されず、カード・本文が全表示・通常配置になる（素の HTML+CSS で全文可読）。
   ■ 単位系は cover 進捗（要素がビューポートに触れてから抜けきるまで 0→1）に統一。
     animation-range: cover X% cover Y% と data-p-range="X/100 Y/100" は機械的同値。
   ■ 色はすべて tokens.css の変数か color-mix() を使う（生の色コード禁止）
   ■ mask-image の black / transparent はアルファ形状の指定であり
     ブランド色ではないため、キーワードのまま使用している
   ===================================================================== */

/* =====================================================
   A) 進捗変数の供給 — CSS Scroll-driven Animations
   （非対応ブラウザはこのブロックを無視 → engine.js が代行）
   ===================================================== */
@supports (animation-timeline: scroll()){
  /* HERO: 自身の view-timeline を名前で参照。
     contain 0%〜100% = 320svh の胴体を sticky が貼り付いている区間 */
  .hero{
    view-timeline: --hero-tl block;
    animation: kf-progress linear both;
    animation-timeline: --hero-tl;
    animation-range: contain 0% contain 100%;
  }
  /* ヘッダー: ページ全体のスクロール 0〜240px で --p 0→1 */
  .site-header{
    animation: kf-progress linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 240px;
  }
  /* カード群: 各カード自身のビューポート通過進捗。
     cover 基準に統一し、HTML の data-p-range と機械的同値にする */
  .acard, .wcard{
    animation: kf-progress linear both;
    animation-timeline: view(block);
  }
  .acard:nth-child(1){ animation-range: cover 5%  cover 44%; }  /* = 0.05 0.44 */
  .acard:nth-child(2){ animation-range: cover 12% cover 52%; }  /* = 0.12 0.52 */
  .acard:nth-child(3){ animation-range: cover 19% cover 60%; }  /* = 0.19 0.60 */
  .wcard:nth-child(3n+1){ animation-range: cover 2%  cover 40%; }  /* = 0.02 0.40 */
  .wcard:nth-child(3n+2){ animation-range: cover 8%  cover 46%; }  /* = 0.08 0.46 */
  .wcard:nth-child(3n)  { animation-range: cover 14% cover 52%; }  /* = 0.14 0.52 */

  /* ── --p を消費する演出（ネイティブ系）──
     ※ 下の html[data-scroll-driven="fallback"] ブロックと内容を完全同期させること */
  .hero__world{ transform: translateZ(calc(var(--p) * var(--travel))); }
  .layer--louver{ opacity: clamp(.10, (0.88 - var(--p)) * 3, 1); }
  .layer--motes{
    opacity: calc(clamp(0, (0.62 - var(--p)) * 3.2, 1) * var(--motes-mult, 1));
  }
  /* 近景レイヤーは通過終盤 0.85〜0.95 で一気にフェード（終盤の間延び防止） */
  .layer--slabs{ opacity: clamp(.14, (1.02 - var(--p)) * 7, 1); }
  .layer--arc  { opacity: clamp(0.42, (1.02 - var(--p)) * 6, 1); }
  .hero__copy{
    transform: translate(calc(var(--mx) * -10px), calc(var(--p) * -7vh + var(--my) * -6px));
    /* 見出しは最後まで読める（旧: p=0.69 で opacity 0 → 空白画面の主因）。
       退くのは 1.0 → 0.72 まで。0.72 でも --c-ink は背景比 9:1 を保つ */
    opacity: clamp(.72, 1.34 - var(--p) * .62, 1);
  }
  .hero__cue{ opacity: clamp(0, 1 - var(--p) * 5, 1); }
  .acard__obj{
    transform: rotateY(calc((1 - var(--p)) * -55deg))
               translateZ(calc((1 - var(--p)) * -140px + var(--hov)));
    opacity: calc(.15 + var(--p) * .85);
  }
  .wcard__obj{
    transform: rotateX(calc((1 - var(--p)) * -42deg))
               translateZ(calc((1 - var(--p)) * -120px + var(--hov)));
    opacity: calc(.1 + var(--p) * .9);
  }
}

/* =====================================================
   B) 進捗変数の供給 — engine.js フォールバック
   （scroll-driven 非対応 + JS 有効の環境のみ。engine.js が
    html[data-scroll-driven="fallback"] を設定し、--p をインラインで供給する）
   ── --p を消費する演出（フォールバック系）──
   ※ 上の @supports ブロック内の演出と内容を完全同期させること。
      どちらのスコープにも該当しない素の HTML+CSS 環境では、
      演出が適用されず全文が通常配置で表示される（B-1 対応）
   ===================================================== */
html[data-scroll-driven="fallback"] .hero__world{
  transform: translateZ(calc(var(--p) * var(--travel)));
}
html[data-scroll-driven="fallback"] .layer--louver{
  opacity: clamp(.10, (0.88 - var(--p)) * 3, 1);
}
html[data-scroll-driven="fallback"] .layer--motes{
  opacity: calc(clamp(0, (0.62 - var(--p)) * 3.2, 1) * var(--motes-mult, 1));
}
html[data-scroll-driven="fallback"] .layer--slabs{
  opacity: clamp(.14, (1.02 - var(--p)) * 7, 1);
}
html[data-scroll-driven="fallback"] .layer--arc{
  opacity: clamp(0.42, (1.02 - var(--p)) * 6, 1);
}
html[data-scroll-driven="fallback"] .hero__copy{
  transform: translate(calc(var(--mx) * -10px), calc(var(--p) * -7vh + var(--my) * -6px));
  opacity: clamp(.72, 1.34 - var(--p) * .62, 1);
}
html[data-scroll-driven="fallback"] .hero__cue{
  opacity: clamp(0, 1 - var(--p) * 5, 1);
}
html[data-scroll-driven="fallback"] .acard__obj{
  transform: rotateY(calc((1 - var(--p)) * -55deg))
             translateZ(calc((1 - var(--p)) * -140px + var(--hov)));
  opacity: calc(.15 + var(--p) * .85);
}
html[data-scroll-driven="fallback"] .wcard__obj{
  transform: rotateX(calc((1 - var(--p)) * -42deg))
             translateZ(calc((1 - var(--p)) * -120px + var(--hov)));
  opacity: calc(.1 + var(--p) * .9);
}

/* =====================================================
   ヘッダー（固定・スクロールで背景が濃くなり、ぼける）
   ===================================================== */
.site-header{
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-header);
  /* フォールバック（color-mix 非対応環境）→ 常時ソリッド */
  background: var(--c-bg);
  background: color-mix(in srgb, var(--c-bg) calc(var(--p) * 88%), transparent);
  border-bottom: 1px solid transparent;
  border-bottom-color: color-mix(in srgb, var(--c-line-strong) calc(var(--p) * 100%), transparent);
  backdrop-filter: blur(calc(var(--p) * 10px));
  -webkit-backdrop-filter: blur(calc(var(--p) * 10px));
}
.header__bar{
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 68px;
}
.brand{
  display: inline-flex; align-items: baseline; gap: var(--sp-3);
  min-height: 44px; align-items: center;
  font-family: var(--ff-serif);
  font-size: 1.3rem; letter-spacing: .18em;
}
.brand__sub{
  font-family: var(--ff-eyebrow);
  font-size: .6875rem; letter-spacing: var(--tr-wide);
  color: var(--c-ink-muted);
  white-space: nowrap;
}
@media (max-width: 479px){
  .brand__sub{ display: none; }
}
.site-nav{ margin-left: auto; }
.site-nav ul{ display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.site-nav a{
  display: inline-flex; align-items: center;
  min-height: 44px; padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-small); letter-spacing: .1em;
  color: var(--c-ink-muted);
  transition: color var(--dur-fast) var(--ease-in-out);
}
.site-nav a:hover{ color: var(--c-ink); }
.menu-toggle{
  display: none;
  min-width: 44px; min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  margin-left: auto;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  font-family: var(--ff-mono); font-size: var(--fs-small);
  letter-spacing: .12em;
  white-space: nowrap;
}
.menu-toggle[aria-expanded="true"]{
  background: var(--c-surface-2);
  border-color: var(--c-accent);
}

@media (max-width: 859px){
  .header__cta{ display: none; }
  /* JS 有効時のみドロワー化（JS 無効時は通常のナビが折り返して表示される） */
  html.js .menu-toggle{ display: inline-flex; }
  html.js .site-nav{
    display: none;
    /* backdrop-filter を持つヘッダーが containing block になるため
       fixed ではなく absolute でヘッダー直下に展開する */
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    max-height: calc(100svh - 68px);
    overflow: auto;
  }
  html.js .site-nav.is-open{ display: block; }
  html.js .site-nav ul{ flex-direction: column; gap: 0; padding: var(--sp-4) var(--gutter) var(--sp-8); }
  html.js .site-nav a{
    width: 100%; min-height: 52px;
    font-size: 1rem;
    border-bottom: 1px solid var(--c-line);
  }
}

/* =====================================================
   HERO — 多層 3D パララックス
   構造:
     .hero        (320svh。--p をここで供給 → 子孫が継承)
     └ .hero__pin (sticky 100svh / overflow hidden / perspective)
        ├ .hero__tilt  (マウス追従の rotateX/rotateY / preserve-3d)
        │  └ .hero__world (スクロールで translateZ 前進 / preserve-3d)
        │     └ .layer ×6 (Z 深度の異なる装飾レイヤー)
        ├ .hero__scrim (テキスト保護のグラデーション)
        ├ .hero__copy  (見出し。3D の外に置きコントラストを担保)
        └ .hero__cue   (スクロール誘導)
   ===================================================== */
/* 尺 200svh: 旧 320svh ではピン解除後に「何も無い 1 画面」が生まれていた。
   100svh を引いた 100svh 分がフライスルー区間、残りがそのまま
   APPROACH への受け渡しになる長さ */
.hero{
  position: relative;
  height: 200vh; height: 200svh;
}
.hero__pin{
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  perspective: var(--hero-persp, 1100px);
  perspective-origin: 50% 42%;
  background:
    radial-gradient(120% 90% at 68% 18%,
      color-mix(in srgb, var(--c-surface-2) 65%, transparent), transparent 62%),
    var(--c-bg);
}
.hero__tilt{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--my) * var(--tilt-rx, -3.2deg)))
             rotateY(calc(var(--mx) * var(--tilt-ry, 4.6deg)));
}
.hero__world{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* 前進距離。transform 自体は --p 供給がある 2 スコープでのみ適用される
     （素の HTML+CSS では transform 無し = 初期構図で静止） */
  --travel: var(--hero-travel, 520px);
}

/* ---- レイヤー共通 ---- */
.layer{
  position: absolute; left: 50%; top: 50%;
  transform: translate3d(-50%, -50%, var(--z, 0px));
  pointer-events: none;
}

/* L1: 等高線（最奥 -900px）。敷地図のようなリング */
.layer--contour{
  width: 175vmax; height: 175vmax;
  background:
    radial-gradient(closest-side at 62% 40%,
      color-mix(in srgb, var(--c-accent) 12%, transparent), transparent 68%),
    repeating-radial-gradient(circle at 62% 40%,
      var(--c-line) 0 1px, transparent 1px 76px);
}

/* L2: グリッドの床（-640px）。rotateX で水平面に倒す */
.layer--floor{
  width: 200vw; height: 130vh;
  top: 76%;
  transform: translate3d(-50%, -50%, var(--z, 0px)) rotateX(78deg);
  background:
    repeating-linear-gradient(90deg, var(--c-line) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg,  var(--c-line) 0 1px, transparent 1px 84px);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 35%, transparent 78%);
}

/* L3: コンパスの円（-520px） */
.layer--arc{
  width: 74vmin; height: 74vmin;
  left: 63%; top: 44%;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
}
.layer--arc::before{
  content: ""; position: absolute; inset: 13%;
  border: 1px dashed var(--c-line);
  border-radius: 50%;
}
.layer--arc::after{
  content: ""; position: absolute;
  left: -12%; right: -12%; top: 50%; height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--c-accent) 50%, transparent);
  opacity: .8;
}

/* L4: 建築ボリュームのスラブ群（-340px 中心 / 擬似要素は別深度） */
.layer--slabs{
  width: min(560px, 66vw); height: min(400px, 46vh);
  left: 41%; top: 46%;
  transform-style: preserve-3d;
  transform: translate3d(-50%, -50%, var(--z, 0px));
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--c-surface-2) 88%, transparent),
    color-mix(in srgb, var(--c-surface) 30%, transparent));
  border: 1px solid var(--c-line);
  border-top: 1px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
  clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
}
.layer--slabs::before{
  content: ""; position: absolute; inset: 8% 58% -14% -34%;
  transform: translateZ(70px);
  background: linear-gradient(200deg,
    color-mix(in srgb, var(--c-surface-2) 80%, transparent),
    color-mix(in srgb, var(--c-surface) 24%, transparent));
  border: 1px solid var(--c-line);
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
}
.layer--slabs::after{
  content: ""; position: absolute; inset: -18% -30% 22% 62%;
  transform: translateZ(140px);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--c-accent) 22%, transparent),
    color-mix(in srgb, var(--c-surface-2) 55%, transparent));
  border: 1px solid var(--c-line-strong);
  clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
}

/* L5: ルーバー（-180px）。縦の細いライン群 */
.layer--louver{
  width: 145vw; height: 48vh;
  top: 36%;
  background: repeating-linear-gradient(90deg,
    var(--c-line-strong) 0 1px, transparent 1px 58px);
  mask-image: linear-gradient(90deg, transparent, black 22%, black 78%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 22%, black 78%, transparent);
}

/* L6: 浮遊する粒（-60px）。box-shadow で複製した小さな正方形 */
.layer--motes{
  width: 6px; height: 6px;
  background: var(--c-accent-2);
  box-shadow:
    -34vw -20vh 0 1px color-mix(in srgb, var(--c-accent)   82%, transparent),
     26vw -12vh 0 0   color-mix(in srgb, var(--c-accent-2) 70%, transparent),
    -18vw  14vh 0 2px var(--c-line-strong),
     38vw  10vh 0 1px color-mix(in srgb, var(--c-accent)   60%, transparent),
      8vw -26vh 0 0   var(--c-line-strong),
    -42vw   4vh 0 0   color-mix(in srgb, var(--c-accent-2) 55%, transparent),
     18vw  24vh 0 1px color-mix(in srgb, var(--c-accent)   45%, transparent),
    -8vw  -6vh  0 0   color-mix(in srgb, var(--c-accent-2) 80%, transparent),
     44vw -22vh 0 0   var(--c-line),
    -26vw  26vh 0 1px color-mix(in srgb, var(--c-accent)   35%, transparent);
}

/* 近景レイヤーの通過時フェードアウト（カメラ衝突の違和感を消す）は
   --p 供給のある 2 スコープ側（ファイル冒頭）で定義している */

/* ---- テキスト保護スクリム（3D コンテキストの外） ---- */
.hero__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    var(--c-bg) 4%,
    color-mix(in srgb, var(--c-bg) 62%, transparent) 34%,
    transparent 62%);
  pointer-events: none;
}

/* ---- コピー ---- */
.hero__copy{
  position: absolute;
  left: 0; right: 0; bottom: 11svh;
  padding-inline: var(--gutter);
  max-width: var(--container); margin-inline: auto;
  /* --p / --mx / --my は .hero / .hero__pin から継承される。
     これらを消費する transform / opacity は --p 供給のある 2 スコープ側で定義 */
}
.hero__kicker{
  font-family: var(--ff-eyebrow);
  font-size: var(--fs-small);
  letter-spacing: var(--tr-wide);
  color: var(--c-accent);
  margin-bottom: var(--sp-6);
}
.hero__title{
  font-size: var(--fs-display);
  line-height: var(--lh-tight-ja);
  letter-spacing: var(--tr-tight-ja);
  font-weight: 500;
}
.hero__lead{
  margin-top: var(--sp-8);
  max-width: 36em;
  color: var(--c-ink-muted);
  text-shadow: 0 1px 12px var(--c-scrim);
}

/* ---- スクロール誘導 ---- */
.hero__cue{
  position: absolute; left: 50%; bottom: var(--sp-6);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  font-family: var(--ff-eyebrow); font-size: .6875rem;
  letter-spacing: var(--tr-wide);
  color: var(--c-ink-muted);
}
.hero__cue-line{
  width: 1px; height: 44px;
  background: linear-gradient(var(--c-accent), transparent);
  transform-origin: top;
  animation: cue-pulse 2.2s var(--ease-in-out) infinite;
}
@keyframes cue-pulse{
  0%{ transform: scaleY(0); } 55%{ transform: scaleY(1); } 100%{ transform: scaleY(0); transform-origin: bottom; }
}

/* =====================================================
   APPROACH — 厚みのある 3D カードがスクロールで起き上がる
   カード構造: .acard(タイムライン供給) > .acard__obj(3D 本体)
     __face(前面 +12px) / __back(背面 -12px) / ::before,::after(左右の木口 24px)
   ===================================================== */
.approach__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-16);
  perspective: 1300px;
}
.acard{ transform-style: preserve-3d; min-height: 100%; }
.acard__obj{
  position: relative; height: 100%;
  transform-style: preserve-3d;
  transform-origin: 18% 50%;
  /* --p 消費の transform / opacity は 2 スコープ側で定義（素の状態では全表示） */
  transition: --hov var(--dur-base) var(--ease-out-expo);
}
.acard:hover .acard__obj{ --hov: 26px; }
.acard__face{
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-8);
  background: linear-gradient(165deg, var(--c-surface-2), var(--c-surface));
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transform: translateZ(12px);
  backface-visibility: hidden;
}
.acard__back{
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--c-surface) 70%, var(--c-bg));
  border: 1px solid var(--c-line);
  transform: rotateY(180deg) translateZ(12px);
  backface-visibility: hidden;
}
/* 左右の木口（カードの厚み）。中心が辺上に来るよう ±12px */
.acard__obj::before, .acard__obj::after{
  content: ""; position: absolute; top: 0; bottom: 0; width: 24px;
  background: color-mix(in srgb, var(--c-surface-2) 55%, var(--c-bg));
}
.acard__obj::before{ left: -12px;  transform: rotateY(90deg); }
.acard__obj::after { right: -12px; transform: rotateY(90deg); }

.acard__num{
  font-family: var(--ff-eyebrow); font-size: var(--fs-small);
  letter-spacing: var(--tr-wide); color: var(--c-accent);
}
.acard h3{ font-size: var(--fs-h3); }
.acard p{ color: var(--c-ink-muted); font-size: var(--fs-small); line-height: 2; }

@media (max-width: 860px){
  .approach__grid{ grid-template-columns: 1fr; perspective: 1000px; }
}

/* =====================================================
   WORKS — スクロールで rotateX(-42deg) からせり上がるグリッド
   カード構造は APPROACH と同型（木口は上下辺 / 20px 厚）
   ===================================================== */
.works__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-16);
  perspective: 1400px;
}
.wcard{ transform-style: preserve-3d; }
.wcard__obj{
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 92%;
  /* --p 消費の transform / opacity は 2 スコープ側で定義（素の状態では全表示） */
  transition: --hov var(--dur-base) var(--ease-out-expo);
}
.wcard:hover .wcard__obj{ --hov: 30px; }
.wcard__face{
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: clip;
  transform: translateZ(10px);
  backface-visibility: hidden;
}
.wcard__back{
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--c-surface) 70%, var(--c-bg));
  border: 1px solid var(--c-line);
  transform: rotateX(180deg) translateZ(10px);
  backface-visibility: hidden;
}
.wcard__obj::before, .wcard__obj::after{
  content: ""; position: absolute; left: 0; right: 0; height: 20px;
  background: color-mix(in srgb, var(--c-surface-2) 55%, var(--c-bg));
}
.wcard__obj::before{ top: -10px;    transform: rotateX(90deg); }
.wcard__obj::after { bottom: -10px; transform: rotateX(90deg); }

/* CSS だけで描く「竣工写真」プレースホルダ */
.wcard__art{
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--c-line);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.wcard:hover .wcard__art{ transform: scale(1.04); }
.wcard__art--1{ /* 六甲の家: 山の稜線と屋根 */
  background:
    linear-gradient(155deg, transparent 46%, color-mix(in srgb, var(--c-accent) 40%, var(--c-surface-2)) 46% 48%, var(--c-surface-2) 48%),
    linear-gradient(200deg, transparent 58%, var(--c-surface-2) 58%),
    radial-gradient(140% 100% at 20% 0%, color-mix(in srgb, var(--c-accent-2) 18%, transparent), transparent 60%),
    var(--c-surface);
}
.wcard__art--2{ /* 北野のギャラリー: 垂直ルーバー */
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-accent-2) 26%, transparent) 0 2px, transparent 2px 26px),
    linear-gradient(var(--c-surface-2), var(--c-surface));
}
.wcard__art--3{ /* 塩屋の集合住宅: 積層スラブ */
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--c-accent) 30%, transparent) 0 2px, transparent 2px 34px),
    linear-gradient(20deg, var(--c-surface), var(--c-surface-2));
}
.wcard__art--4{ /* 海辺の茶室: 水平線と円 */
  background:
    radial-gradient(circle at 70% 36%, color-mix(in srgb, var(--c-accent-2) 55%, transparent) 0 9%, transparent 10%),
    linear-gradient(to top, var(--c-surface-2) 34%, transparent 34%),
    var(--c-surface);
}
.wcard__art--5{ /* 元町の本屋: 書架のグリッド */
  background:
    repeating-linear-gradient(90deg, var(--c-line-strong) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, var(--c-line-strong) 0 1px, transparent 1px 26px),
    linear-gradient(160deg, var(--c-surface-2), var(--c-surface));
}
.wcard__art--6{ /* 灘の醸造所: 鋸屋根 */
  background:
    linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--c-accent) 26%, transparent) 30% 32%, transparent 32%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--c-accent-2) 20%, transparent) 0 2px, transparent 2px 40px),
    linear-gradient(var(--c-surface), var(--c-surface-2));
}
.wcard__meta{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6);
}
.wcard__meta h3{ font-size: var(--fs-h3); }
.wcard__meta p{
  font-family: var(--ff-eyebrow); font-size: .6875rem;
  letter-spacing: .1em; color: var(--c-ink-muted);
  white-space: nowrap;
}
@media (max-width: 960px){
  .works__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .works__grid{ grid-template-columns: 1fr; perspective: 1000px; }
}

/* =====================================================
   STATEMENT — 行単位のテキスト reveal（reveal.js + base.css）
   ===================================================== */
.statement{
  background:
    repeating-radial-gradient(circle at 82% 20%, var(--c-line) 0 1px, transparent 1px 90px),
    var(--c-surface);
  border-block: 1px solid var(--c-line);
}
.statement__body{
  margin-top: var(--sp-12);
  /* システム明朝任せにせず、読み込み済み webfont を明示（Win/Mac の差を消す） */
  font-family: "Zen Old Mincho", var(--ff-serif);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.66;
  letter-spacing: .02em;
  max-width: 30em;
}
.statement__body .line + .line{ margin-top: var(--sp-3); }
.statement__note{
  margin-top: var(--sp-12);
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
}

/* =====================================================
   CONTACT + フッター
   ===================================================== */
.contact__inner{
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-16);
  margin-top: var(--sp-16);
}
.contact h2{ font-size: var(--fs-h1); }
.contact__lead{ color: var(--c-ink-muted); margin-top: var(--sp-6); max-width: 34em; }
.contact__cta{ margin-top: var(--sp-8); }
.contact__list{ display: grid; gap: var(--sp-6); align-content: start; }
.contact__list dt{
  font-family: var(--ff-eyebrow); font-size: .6875rem;
  letter-spacing: var(--tr-wide); color: var(--c-accent);
  margin-bottom: var(--sp-1);
}
.contact__list dd{ color: var(--c-ink-muted); }
.contact__list a{
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--c-accent);
  display: inline-flex; align-items: center; min-height: 44px;
}
@media (max-width: 780px){
  .contact__inner{ grid-template-columns: 1fr; gap: var(--sp-12); }
}

.site-footer{
  border-top: 1px solid var(--c-line);
  padding-block: var(--sp-12);
}
.footer__inner{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6);
}
.footer__nav{ display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.footer__nav a{
  display: inline-flex; align-items: center;
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small); color: var(--c-ink-muted);
}
.footer__nav a:hover{ color: var(--c-ink); }
.footer__copy{
  margin-left: auto;
  font-size: var(--fs-small); color: var(--c-ink-muted);
}
@media (max-width: 640px){
  .footer__copy{ margin-left: 0; }
}

/* =====================================================
   品質ティア（engine.js が html[data-quality] を設定）
   low: 最奥レイヤーと粒・ぼかしを省き、描画負荷を落とす
   ===================================================== */
html[data-quality="low"] .layer--contour,
html[data-quality="low"] .layer--motes{ display: none; }
html[data-quality="low"] .site-header{
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--c-bg);
}
/* medium: motes の明るさを半減。opacity を直接上書きせず乗算係数で渡す
   （通過フェード clamp(...) * var(--motes-mult, 1) と衝突させない） */
html[data-quality="medium"] .layer--motes{ --motes-mult: .5; }

/* =====================================================
   モバイル: 深度と perspective を浅くして酔い・負荷を抑える
   ===================================================== */
@media (max-width: 720px){
  .hero{ height: 260vh; height: 260svh; }
  .hero__pin{ perspective: var(--hero-persp, 880px); }
  .hero__world{ --travel: var(--hero-travel, 480px); }
  .layer--arc{ left: 58%; }
  .layer--slabs{ left: 46%; width: 78vw; }
  .hero__copy{ bottom: 12svh; }
}
/* 小画面×低い高さでは誘導とリード文が重なるため誘導を隠す */
@media (max-width: 720px) and (max-height: 760px){
  .hero__cue{ display: none; }
}

/* =====================================================
   prefers-reduced-motion — 全モーション停止・静止した 1 構図
   ・--p を固定値にしてスクロール/フォールバック双方の視差を止める
     （インラインスタイルより !important 付き宣言が優先されるため
      engine.js が動いても値は固定される）
   ===================================================== */
@media (prefers-reduced-motion: reduce){
  .hero{ height: auto; min-height: 100vh; min-height: 100svh; --p: 0.24 !important; animation: none !important; }
  .site-header, .acard, .wcard{ --p: 1 !important; animation: none !important; }
  .hero__tilt{ transform: none !important; }
  .hero__copy{ transform: none !important; opacity: 1 !important; }
  .hero__cue-line{ animation: none !important; }
  .acard__obj, .wcard__obj{ transition: none !important; }
  .acard:hover .acard__obj, .wcard:hover .wcard__obj{ --hov: 0px; }
  .wcard:hover .wcard__art{ transform: none; }
}

/* ──────────────────────────────────────────────────────────────
   和文タイポグラフィ調整
   1. palt        … 句読点・括弧まわりの余分なアキを詰める
   2. auto-phrase … 文節単位で折り返す（「書」「く。」のような分断を防ぐ）
   3. balance     … 見出しの行長を揃え、1文字だけ落ちる行を作らない
   4. strict      … 禁則処理を厳密にし、行頭に 。 、 」 が来ないようにする
   auto-phrase / balance / pretty は非対応ブラウザでは無視されるだけで、
   崩れることはない（プログレッシブ・エンハンスメント）。
   ────────────────────────────────────────────────────────────── */
body {
  font-feature-settings: "palt" 1;
  font-kerning: normal;
  line-break: strict;
  word-break: normal;
}
h1, h2, h3, h4, h5, .kicker, dt {
  word-break: auto-phrase;
  text-wrap: balance;
}
p, li, dd, td, .note, .desc, .caption,
.lede, .lead, .statement, blockquote, figcaption {
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* 手動改行は広い画面でのみ効かせ、狭い画面では自動折り返しに任せる */
@media (max-width: 640px) {
  h1 br, h2 br, h3 br,
  .lede br, .lead br, .statement br { display: none; }
}


/* ── 書体設計（見出し＝個性 / 本文＝可読性） ──────────────────────
   見出し: Zen Old Mincho
   本文  : BIZ UDPMincho（Google Fonts の和文で palt が効く数少ない書体。
           読点のあとのアキが締まり、Mac / Windows で見え方が揃う）
   欧文は先頭に置いた書体から取り、和文だけが差し替わる。 */
h1, h2, h3, h4, .lede, .lead, .kicker, .statement, blockquote {
  font-family: "Zen Old Mincho", serif;
}
p, li, dd, td, .note, .desc, .caption, figcaption, small {
  font-family: "BIZ UDPMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}