/* M∀NUS Press — 共通クローム（ヘッダー / フッター）
   自己完結: このファイルはページ側の CSS 変数に依存しない。
   視覚のターゲットは public/index.html のヘッダー/フッター（余白・書体・字間・ロゴ寸法は
   index の実測値から移した）。挿し込みは scripts/site_apply_chrome.py（manus-works repo）。
   ハンバーガーへの切替は index と同じ 980px（720px でさらに縮む）。罫線は index の tan（--chrome-line）。 */

:root {
  --chrome-paper: #fbfaf6;
  --chrome-wine: #8f1530;
  --chrome-gold: #b88a2a;
  --chrome-ink: #111;

  --chrome-muted: #4f4a43;
  --chrome-muted-soft: #6b6660;
  --chrome-line: #ded5bf;
  --chrome-line-soft: #e8e1d0;
  --chrome-gold-text: #7d5c14;

  --chrome-sans: "Noto Sans JP", "Noto Sans", system-ui, sans-serif;
  --chrome-serif: "Cormorant Garamond", "EB Garamond", Didot, "Times New Roman", Georgia, serif;
  --chrome-display: "Cormorant Garamond", "EB Garamond", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --chrome-max: 1120px;
}

/* ── ヘッダー ───────────────────────────── */

.chrome-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 28px;
  min-height: 78px;
  margin: 0;
  padding: 0 clamp(20px, 4vw, 56px);
  background: var(--chrome-paper);
  border-bottom: 1px solid var(--chrome-line);
  font-family: var(--chrome-sans);
}
.chrome-brand { display: inline-flex; align-items: center; width: max-content; text-decoration: none; }
.chrome-brand-image { width: 176px; height: auto; display: block; }

.chrome-nav { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; }
.chrome-nav a {
  color: var(--chrome-muted);
  font-family: var(--chrome-sans);
  font-size: 14px;
  letter-spacing: .06em;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.chrome-nav a:hover { color: var(--chrome-wine); border-bottom-color: var(--chrome-wine); }
.chrome-nav a[aria-current="page"] { color: var(--chrome-wine); border-bottom-color: var(--chrome-wine); }

.chrome-lang {
  justify-self: end;
  color: var(--chrome-muted-soft);
  font-family: var(--chrome-serif);
  font-size: 15px;
  letter-spacing: .12em;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.chrome-lang:hover { color: var(--chrome-wine); border-bottom-color: var(--chrome-wine); }

.chrome-menu-button {
  display: none;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  color: var(--chrome-muted);
  background: transparent;
  border: 0;
  font-family: var(--chrome-sans);
  font-size: 13px;
  letter-spacing: .1em;
  cursor: pointer;
}

@media (max-width: 980px) {
  .chrome-header { grid-template-columns: 1fr auto auto; }
  .chrome-menu-button { display: inline-flex; }
  .chrome-menu-button span { font-size: 0; }
  .chrome-menu-button::before { content: "≡"; font-size: 26px; line-height: 1; }
  .chrome-nav {
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    z-index: 49;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
    background: var(--chrome-paper);
    border-bottom: 1px solid var(--chrome-line);
  }
  .chrome-nav.open { display: flex; }
  .chrome-nav a { min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid var(--chrome-line-soft); }
}

@media (max-width: 720px) {
  .chrome-header { min-height: 66px; padding: 0 16px; }
  .chrome-brand-image { width: 132px; }
  .chrome-nav { top: 66px; }
  .chrome-footer { padding: 28px 20px 36px; }
  .chrome-footer-row { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ── ページ側の body レイアウトに負けないようにする ─────────
   content 系 25 面は body{display:flex;align-items:center;padding:36px 24px 32px}。
   flex の子は shrink-to-fit になるため、そのままだとクロームだけ本文幅（640px）に縮む。
   index は body{display:block;padding:0} なので影響を受けない（.chrome-header を持たない）。 */
.chrome-header, .chrome-footer { box-sizing: border-box; width: auto; max-width: none; align-self: stretch; }
/* ページ側の footer{max-width:640px} 等に負けないよう、クローム側で明示的に解除する。 */
body:has(> .chrome-header) { padding-top: 0; }
.chrome-header { margin-bottom: 44px; }
.chrome-footer { margin-top: 64px; }