/* ============================================================
   ナビ整理（2026-09-27）で足したページの部品。全ページで読み込む
   - ヘッダのナビの「今いるタブ」
   - タブの中の切り替え（人物: ページ内の見出しへ / About: 2枚のページを行き来）
   - About の削除要請・情報提供、人物ページの相関図・年表のセクション
   - フッタの2ブロック（削除要請は色なし、情報提供はシアン）
   設計: planning/design/pages/README.md §4-5・4-6、04-artists.md、05-about.md
   色は site.css の変数（3色）だけ。
   ============================================================ */

/* ---------- ヘッダ: 今いるタブ ---------- */
.main-nav a[aria-current="page"] { color: var(--cyan); box-shadow: inset 0 -2px 0 var(--cyan); padding-bottom: 6px; }
@media (max-width: 900px) {
  .main-nav.is-open a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--cyan); padding-left: 12px; padding-bottom: 0; }
}

/* ---------- タブの中の切り替え ---------- */
.section-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 34px; }
.section-tabs a {
  font: 500 12px/1 "JetBrains Mono", "Noto Sans JP", monospace; letter-spacing: .06em; color: #b8b8b8;
  text-decoration: none; border: 1px solid var(--line); padding: 11px 14px; background: #050505cc;
}
.section-tabs a:hover { color: var(--cyan); border-color: var(--cyan); }
.section-tabs a[aria-current="page"] { color: #000; background: var(--cyan); border-color: var(--cyan); }

/* ---------- 足したセクション ---------- */
.page-block { margin: 0 9vw; padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.page-block .pb-h { margin: 10px 0 18px; font: 700 clamp(22px, 2.6vw, 32px)/1.35 "Noto Sans JP", sans-serif; color: var(--white); }
.page-block p { max-width: 46em; margin: 0 0 14px; font-size: 14px; line-height: 1.9; color: #b8b8b8; }
.page-block .pb-note { font-size: 12px; color: #777; }
.pb-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; letter-spacing: 2px; color: var(--cyan); font: 500 10px "JetBrains Mono", monospace; }
.pb-later { letter-spacing: .06em; color: #000; background: var(--acid); padding: 3px 7px; font-weight: 700; }
#artists { scroll-margin-top: 24px; }

/* 削除要請: アクセント色を使わない（白＋罫線だけ）。情報提供より静かに、でも上に置く */
.page-block.plain .pb-h { font-size: clamp(18px, 2vw, 24px); }
.pb-mail { color: var(--white); text-decoration: underline; text-underline-offset: 4px; font: 500 15px "JetBrains Mono", monospace; }

.pb-aside { margin: 0 9vw; padding: 18px 0; font-size: 12px; color: #9a9a9a; border-bottom: 1px solid var(--line); }
.pb-aside a { color: var(--white); }

/* 相関図の代わりの一覧（共演の多い相手） */
.pb-rank { list-style: none; counter-reset: r; padding: 0; margin: 22px 0 18px; max-width: 520px; }
.pb-rank li { counter-increment: r; display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pb-rank li::before { content: counter(r, decimal-leading-zero); font: 500 11px "JetBrains Mono", monospace; color: #666; }
.pb-name { color: var(--white); font-size: 15px; }
.pb-name a { color: var(--cyan); }
.pb-count { font: 500 12px "JetBrains Mono", monospace; color: #9a9a9a; font-variant-numeric: tabular-nums; }

/* 年表 */
.pb-years { list-style: none; padding: 0; margin: 22px 0 18px; }
.pb-years > li { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pb-y { font: 400 22px/1 "Archivo Black", sans-serif; color: var(--cyan); }
.pb-years ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pb-years a { color: var(--white); text-decoration: none; font-size: 15px; }
.pb-years a:hover { color: var(--cyan); }
.pb-years small { margin-left: 10px; font: 500 10px "JetBrains Mono", "Noto Sans JP", monospace; color: #777; letter-spacing: .06em; }

/* ---------- フッタ: 削除要請（上・色なし）と情報提供（下・シアン） ---------- */
.footer-contact > a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.footer-help { margin-top: 16px; padding-top: 14px; border-top: 1px solid #252525; }
.footer-help a { color: var(--cyan) !important; }

@media (max-width: 800px) {
  .page-block { margin: 0 7vw; padding: 44px 0; }
  .pb-aside { margin: 0 7vw; }
  .pb-years > li { grid-template-columns: 1fr; gap: 10px; }
  .section-tabs a { flex: 1 1 auto; text-align: center; }
}

/* ヘッダの「非公認ファンサイト」を大きく（2026-10-15 ユーザー「もっと大きくしてほしい」）。site.css の 8px では読めなかった。
   非公認表記は必須（01-concept.md）なので、ロゴの下で読める大きさにする */
.brand-note { margin-top: 7px; font: 700 12px/1.2 "Noto Sans JP", sans-serif; letter-spacing: .04em; }

/* 「YACA IN DA HOUSE」の配色をヘッダのロゴ（site.css の .brand）にそろえる: YACA シアン / IN ピンク / DA HOUSE 黄。
   フッタのロゴ（YACA だけシアン）とトップの見出し（白）が別の配色だった（2026-10-15 ユーザー「配色が違うのが気になる」） */
.brand-colors span { color: var(--cyan); }
.brand-colors i { color: var(--pink); font-style: normal; }
.brand-colors b { color: var(--acid); font-weight: inherit; }
/* トップの見出しは .hero h1 span（白・ブロック）が中の色分けを上書きするので、ここで戻す */
.hero h1 .brand-colors, .hero h1 .brand-colors span, .hero h1 .brand-colors i, .hero h1 .brand-colors b { display: inline; text-shadow: none; }
.hero h1 .brand-colors span { color: var(--cyan); }

/* ヘッダを画面の上に固定（2026-10-15 ユーザー「ヘッダー固定にしておいて」）。
   .site-shell の overflow: hidden があると sticky が効かないので clip にする（はみ出しを隠すのは同じ） */
.site-shell { overflow: clip; }
.site-header { position: sticky; top: 0; z-index: 50; }
/* ページ内リンクで飛んだ先の見出しが、固定したヘッダの下に隠れないように */
html { scroll-padding-top: 90px; }
@media (max-width: 800px) { html { scroll-padding-top: 76px; } }
/* トップの見出し: RGB ずれの重ね（シアン＋ピンクを screen で重ねる）が濃いと、3色が白っぽく飛ぶ。重ねを薄くして色を残す */
.hero .page-heading-glitch .glitch-channel { opacity: .3; }