/* ============================================================
   site-header.css
   サイト共通ヘッダー（メインページ / 作品詳細ページ 共通）

   位置:
     ページ上端から 27px
     左右も同じ 27px（700px 以下では 20px）

   サイト名（左）はページと一緒にスクロールし、
   ナビ（右）だけが画面上部に固定される。
   どちらもフローから外れるため、コンテンツの開始位置には影響しない。

   背景色 / 境界線 / シャドウ / blur / ホバー表現は付けない。
   （固定なので、コンテンツは背面をそのまま通過する）

   文字色は「背面の色の反転色」にする。
   白 + mix-blend-mode: difference は「1 - 背面の色」になるため、
   白い紙の上では黒、黒い写真の上では白、と自動で反転する。
   ============================================================ */

.site-header {
  /* サイト名はページと一緒にスクロールする（ナビだけ固定） */
  position: absolute;
  /* コンテンツがヘッダーの上に重ならないよう最前面に置く */
  z-index: var(--site-header-z-index);
  top: var(--site-header-top);                 /* 27px */
  left: var(--site-header-padding-inline);     /* 上と同じ 27px */
  right: var(--site-header-padding-inline);    /* 上と同じ 27px */

  display: flex;
  justify-content: space-between;
  align-items: center;

  /* font-family は body から継承する（ここでは指定しない）。
     サイト名・ナビともに通常テキスト扱いなので weight は 400 のまま。 */
  font-size: var(--site-header-font-size);

  /* 背面の色の反転色にする（difference = |背面の色 - この色|）。
     白い背景では #2b2b2b（本文と同じ色）に、
     暗い背景では明るい色に反転する。 */
  color: #d4d4d4;   /* 255 - 0x2b = 0xd4 */
  mix-blend-mode: difference;
}

/* 左側のサイト名（すべて大文字・2 行） */
.site-header__name {
  font-size: var(--site-header-name-font-size);   /* 15px: ナビと同じ */
  line-height: var(--line-height-base);           /* 1.4 → 2 行で 44.8px */
}

/* 右側のナビゲーション（works / about）。こちらは画面に固定する */
.site-header__nav {
  position: fixed;
  top: var(--site-header-top);
  right: var(--site-header-padding-inline);

  display: flex;
  align-items: center;
  gap: var(--site-header-nav-gap);
}

/* --- スマートフォン: 左右 20px（上からの 32px は維持） --------
   Works 一覧が 1列に切り替わる 700px 以下を基準にしている。 */

@media (max-width: 700px) {
  /* 画面が狭いとナビが本文に重なるので、固定をやめて一緒にスクロールさせる */
  .site-header__nav {
    position: static;
  }
}