/* 00 ヘッダー：色は「今ヘッダーの下にあるのが黒いセクションか」（js/main.js の .is-on-dark）だけで決める。一番上でも黒と決めつけない */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  height: 72px;
  padding: 0 var(--gutter);
  color: var(--text);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease-out), color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.site-header.is-on-dark { color: var(--on-dark); }
/* 黒いセクションの上でも、下の文字や写真が透けて重ならないよう、ほぼ不透明な墨色＋ぼかしを敷く */
.site-header.is-on-dark.is-scrolled {
  background: rgba(11, 11, 12, 0.9);
  border-bottom-color: var(--line-dark);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header.is-scrolled:not(.is-on-dark) { background: rgba(247, 246, 243, 0.94); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

.header-brand { display: block; flex: none; position: relative; z-index: 2; }
/* ロゴは背景を切り抜いた透過版（黒い場所用＝白＋金／生成り色の場所用＝黒＋金）を状態で出し分ける */
.header-logo { display: grid; height: 36px; }
.header-logo img { grid-area: 1 / 1; width: auto; height: 36px; max-width: none; transition: opacity 0.5s var(--ease-out); }
.header-logo-light { opacity: 0; }
.site-header.is-on-dark .header-logo-light, .site-header.is-open .header-logo-light { opacity: 1; }
.site-header.is-on-dark .header-logo-dark, .site-header.is-open .header-logo-dark { opacity: 0; }

.site-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.header-links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.header-links a { position: relative; font-size: var(--fs-small); letter-spacing: 0.12em; padding: 6px 0; white-space: nowrap; }
.header-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); }
.header-links a:hover::after { transform: scaleX(1); }
.header-cta {
  flex: none; white-space: nowrap;
  padding: 9px 24px;
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  font-size: var(--fs-small); letter-spacing: 0.14em;
  transition: background 0.5s var(--ease-out), color 0.5s var(--ease-out);
}
.site-header.is-on-dark .header-cta { color: var(--gold-light); }
.header-cta:hover, .site-header.is-on-dark .header-cta:hover { background: var(--gold); color: var(--ink); }

.menu-toggle { display: none; }

@media (max-width: 859px) {
  .site-header { height: 60px; }
  .header-logo, .header-logo img { height: 30px; }
  .menu-toggle {
    position: relative; z-index: 2;
    display: block; flex: none; width: 44px; height: 44px;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .menu-toggle span { position: absolute; left: 10px; right: 10px; height: 1px; background: currentColor; transition: transform 0.5s var(--ease-out), top 0.5s var(--ease-out); }
  .menu-toggle span:nth-child(1) { top: 18px; }
  .menu-toggle span:nth-child(2) { top: 26px; }
  .site-header.is-open .menu-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
  .site-header.is-open .menu-toggle span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

  .site-nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; align-items: flex-start; gap: 36px;
    padding: 80px var(--gutter) 40px;
    background: var(--ink); color: var(--on-dark);
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s var(--ease-out), visibility 0.5s;
  }
  .site-header.is-open { color: var(--on-dark); }
  .site-header.is-open .site-nav { opacity: 1; visibility: visible; }
  .header-links { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .header-links li { width: 100%; border-bottom: 1px solid var(--line-dark); }
  .header-links a { display: block; padding: 16px 0; font-family: var(--font-serif); font-size: 1.125rem; }
  .site-header.is-scrolled:not(.is-on-dark) .header-cta, .header-cta { color: var(--gold-light); padding: 14px 40px; }
}

/* JS が動かないとき（スマホ）：開くボタンが効かないので、メニューを隠さず普通に並べて見せる */
@media (max-width: 859px) {
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .site-header { position: absolute; height: auto; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  html:not(.js) .site-nav { position: static; opacity: 1; visibility: visible; background: none; color: inherit; padding: 8px 0 0; gap: 12px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  html:not(.js) .header-links { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
  html:not(.js) .header-links li { width: auto; border: 0; }
  html:not(.js) .header-links a { padding: 4px 0; font-family: var(--font-sans); font-size: var(--fs-small); }
}