/* ============================================================
   SOL.ME 369 v2 — 既存ページのヘッダーを新ページと同じ見た目にする
   （本番 css/style.css の後に読み込んで上書きする。build_v2.py が
     /assets/v2-nav.css として配置し、既存ページの</head>直前に注入）

   新ページのヘッダー仕様:
   - ブランド名（明朝19px）の下に小さく一言（縦積み）
   - ナビは枠なし・静かなリンク＋ホバーで金の下線
   - セミオーダーCTAは丸いピル
   スマホ(≤960px)は本番の右ドロワー（site-nav.js）をそのまま使う。
   ============================================================ */

/* /invite/ をブランド書体に戻す（でん決裁 2026-08-05「変えた方がいい」）。
   css/invite.css が .invite-page で3つの書体トークンをシステム書体へ
   差し替えていて、あのページだけ字面が違っていた。
   同じ詳細度でも、このファイルが後に読まれるのでこちらが勝つ。 */
.invite-page{
  --font-sans:"Zen Kaku Gothic New", -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  --font-serif:"Shippori Mincho","Noto Serif JP",serif;
  --font-en:"Cormorant Garamond",serif;
}

/* ヘッダーの見た目を全ページで固定する。
   書体トークンをここでも押さえておくのは、将来どこかのページが
   また上書きしてもヘッダーだけは崩れないようにするため。
   --sumi-soft は新ページ側（v2-refinement.css）の読みやすい濃さに合わせる。 */
.site-header{
  --font-sans:"Zen Kaku Gothic New", -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  --font-serif:"Shippori Mincho","Noto Serif JP",serif;
  --sumi-soft:#5b6376;
  font-family:var(--font-sans);
  background:rgba(246,246,243,.86);
}

/* 夜背景ページ（michibiki / meaning / namae）。
   本番CSSはナビの後ろに帯（背景色）を敷いているが、新ページの物語ページには
   帯が無い。ここで外して、リンクの明るさも物語ページと同じにする。 */
.site-header.over-night{ background:rgba(18,20,29,.7); }
.site-header.over-night .site-nav{
  background:transparent; border-color:transparent; box-shadow:none;
}
.site-header.over-night .site-nav a{ color:rgba(232,234,240,.68); }

/* ブランド: 横並び→縦積み */
.site-header .brand{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:0; line-height:1.3; white-space:nowrap;
}
.site-header .brand .en-label{
  font-family:var(--font-serif);
  font-size:19px; letter-spacing:.22em; color:var(--sumi);
}
.site-header .brand small{ font-size:10px; letter-spacing:.14em; }

/* デスクトップのナビ: 枠のレールを外して静かなリンクに */
@media (min-width:961px){
  .site-header .inner{ min-height:72px; }
  .site-header .site-nav{
    padding:0; gap:clamp(14px,2vw,26px);
    border:0; border-radius:0;
    background:transparent; box-shadow:none;
    font-size:12.5px; letter-spacing:.1em;
  }
  .site-header .site-nav a{ padding:6px 2px; }
  .site-header .site-nav a + a:not(.nav-cta){ border-left:0; }
  .site-header .site-nav a:not(.nav-cta)::after{
    left:0; right:0; bottom:0; height:1px;
  }
  .site-header .site-nav a:not(.nav-cta):hover,
  .site-header .site-nav a:not(.nav-cta)[aria-current]{
    background:transparent;
  }
  /* セミオーダーCTA: 新ページと同じ丸いピルに揃える。
     すぐ上の .site-header .site-nav a（詳細度0,3,0）に負けないよう、
     同じ深さのセレクタで書くこと。.site-header .nav-cta（0,2,0）だと
     padding も color も奪われて、既存ページだけ細い枠＋リンク色になる。 */
  .site-header .site-nav .nav-cta{
    margin-left:8px; padding:9px 18px;
    border:1px solid var(--gold); border-radius:999px;
    background:transparent; color:var(--gold-deep);
    font-size:12.5px; letter-spacing:.1em;
  }
  .site-header .site-nav .nav-cta:hover,
  .site-header .site-nav .nav-cta[aria-current]{
    background:var(--gold); border-color:var(--gold); color:var(--on-gold);
  }
  .site-header .site-nav .nav-cta::after{ display:none; }
  /* 夜背景のページ（ヘッダーが暗い上に乗るとき）は明るい金へ */
  .site-header.over-night .site-nav .nav-cta{
    border-color:var(--gold-bright); color:var(--gold-bright);
  }
  .site-header.over-night .site-nav .nav-cta:hover{
    background:var(--gold-bright); border-color:var(--gold-bright); color:var(--night);
  }
}