/* 下層共通キービジュアル（sg-pagehead）のCSS。
   旧: parts/sg-pagehead.php のインライン<style>（2026-07-30に外部化） */
  /* 下層 明るい編集的KV（philosophy fp-hero に揃える） */
  .sg-phhead{position:relative;padding:clamp(150px,16vw,240px) 0 clamp(78px,9vw,140px);}
  /* 見出し・コピーの左端を下のKV写真と同じ基準線に揃える。
     philosophy の fp-hero__copy / fp-hero__media と同じく、本文側も
     「1360px上限・左右ガター確保」のワイド幅をそのまま使う。 */
  .sg-phhead .inner{
    width:min(1360px,calc(100vw - 2*var(--gutter,48px)));
    max-width:none;
    margin:0 auto;
    padding:0;
  }
  .sg-phhead .kick{display:block;margin:0;font-family:var(--serif-en);font-weight:400;font-style:normal;
    font-size:clamp(58px,8vw,112px);line-height:.94;letter-spacing:.015em;color:var(--ink);}
  /* 罫（—）は全廃（2026-07-20 オーナー指示） */
  .sg-phhead .sub{display:block;
    margin:clamp(26px,3vw,40px) 0 0;font-family:var(--serif-jp);font-weight:400;
    font-size:clamp(15px,1.3vw,19px);line-height:1.9;letter-spacing:.12em;color:var(--ink);}
  /* メタ行を4px大きく（オーナー指示 2026-07-30。11px → 15px）。
     works詳細（カテゴリ／Architect）とブログ詳細（日付／カテゴリ）が対象 */
  .sg-phhead .meta{display:flex;flex-wrap:wrap;gap:10px 0;margin:clamp(20px,2.4vw,30px) 0 0;
    font-family:var(--sans);font-size:15px;letter-spacing:.24em;color:var(--stone);text-transform:uppercase;}
  .sg-phhead .meta span+span::before{content:"／";margin:0 14px;opacity:.5;letter-spacing:0;}
  .sg-phhead .lead{width:100%;max-width:64em;margin:clamp(40px,5vw,64px) 0 0;font-size:15px;line-height:2.1;letter-spacing:.06em;color:var(--ink-soft);}/* text-wrap:pretty は撤去（2026-08-07）。iOS26系WebKitは段落全体を均等折返しするため、本文が幅いっぱいに届かず「早く改行される」とオーナー報告 */
  .sg-phhead .kv{position:relative;width:min(1360px,calc(100vw - 2*var(--gutter,48px)));margin:clamp(64px,8vw,120px) auto 0;}
  .sg-phhead .kv .bl-ph{position:relative;aspect-ratio:1360/560;max-height:640px;background-size:cover;background-position:center;overflow:hidden;overflow:clip;filter:saturate(.9) contrast(1.02);}/* hiddenはスクロールコンテナ扱いになりview()の基準を奪うため、対応環境ではclipへ（見た目同一・旧環境はhiddenのまま） */
  /* KV写真のスクロール視差（2026-07-20 オーナー指摘で追加）:
     bl-ph は白残りバグ回避で m-reveal-img を使わないため sg-scrollfx の
     対象から漏れていた。同じ「内層ブリード＋--py」機構を専用に用意し、
     JS側（sg-menu の sg-scrollfx）で登録する。JS死亡時は m-on ごと
     不活性＝通常背景のまま（安全弁） */
  /* ゲートは html.m-on ではなく .is-kvplx（下のインラインスクリプトが
     パーサ直下＝初回描画前に付与）。m-on 待ちだと素の写真が一瞬
     描画されてからズーム版に差し替わり「ぐいん」と見える
     （オーナー指摘 2026-07-20） */
  @media (prefers-reduced-motion: no-preference){
    .sg-phhead .kv .bl-ph.is-kvplx{background-size:0 0;}
    .sg-phhead .kv .bl-ph.is-kvplx::before{
      content:"";position:absolute;left:0;right:0;top:-13%;bottom:-13%;
      background-image:inherit;background-size:cover;background-position:center;
      translate:0 var(--py,0);
    }
  }
  @media(max-width:860px){
    .sg-phhead{padding:clamp(120px,30vw,150px) 0 60px;}
    .sg-phhead .kv .bl-ph{aspect-ratio:12/5;} /* スマホKVを横長にして縦幅を抑える */
    .sg-phhead .kick{font-size:clamp(48px,17vw,84px);}
  }

  /* スマホの視差復活（2026-08-07・CSSスクロール駆動）。
     JS駆動の視差はiOSでカクつくため全廃したが、animation-timeline:view() なら
     コンポジタがスクロール位置に直結して動かすためカクつかない。
     対応外の端末は @supports で自動的に静止（現状維持）にフォールバック。
     ::before は±13%ブリード済みなので±4%の漂いは端が見えない */
  @supports (animation-timeline: view()) {
    @media (pointer: coarse) {
      .sg-phhead .kv .bl-ph.is-kvplx::before{
        animation: sg-kv-drift auto linear both; /* durationはauto必須 */
        animation-timeline: view();
      }
    }
  }
  @keyframes sg-kv-drift{
    /* ±4%では実機で知覚できなかったため±8%へ（::beforeの上下ブリード13%内に収まる 2026-08-07） */
    from{ translate:0 8%; }
    to{ translate:0 -8%; }
  }