/* 共通ヘッダ・フッタ（/d/ と /events/）。各ページのトークン（--teal 等）を前提にする。
   紺のバーはプロジェクトサイト（A）と同じ #004455。金のボタン＝案内メールの無料登録、
   という色の役割は A の規約に合わせる（同じ見た目のボタンに別の行き先を割り当てない）。 */
:root{ --gold:#C0962F; --gold-ink:#1f2d31; }

.topbar .in{ position:relative; }

/* ブランド＝プロジェクトのワードマーク（A と同じ logo-mincho の白版）＋「ライブラリー」。
   **所属をここで見せる。** `<title>` に「｜AI戦略実践プロジェクト」まで足すと、
   検索結果でもタブでも後ろが切れて読まれないので、名前は短いまま header で関係を示す。
   各ページの CSS にも `.brand` があるので、詳細度を上げて（`.topbar .brand`）上書きする。 */
.topbar .brand{ gap:10px; }
.topbar .brand .wm{ height:26px; width:auto; display:block; flex:none; }
.topbar .brand .bn{ font-size:14px; font-weight:700; letter-spacing:.02em;
  padding-left:10px; border-left:1px solid rgba(255,255,255,.3); }
@media (max-width:480px){
  .topbar .brand{ gap:7px; }
  .topbar .brand .wm{ height:21px; }
  .topbar .brand .bn{ font-size:12.5px; padding-left:7px; }
}
.gnav{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:8px;
  font-size:11.5px; }
.gnav a{ color:#C9DCE1; text-decoration:none; }
.gnav a:hover{ color:#fff; text-decoration:underline; }
.gnav .sp{ flex:1 1 auto; }
.gnav .cta{ display:inline-block; background:var(--gold); color:var(--gold-ink); font-weight:700;
  border-radius:6px; padding:4px 12px; font-size:11.5px; white-space:nowrap; }
.gnav .cta:hover{ background:#d4a83a; text-decoration:none; }
@media (min-width:880px){
  .gnav{ position:absolute; right:0; top:0; margin-top:0; }
}

.sitefoot{ max-width:1100px; margin:8px auto 40px; padding:14px 14px 0; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted); line-height:1.8; }
.sitefoot .who{ font-weight:700; color:var(--teal); }
.sitefoot .links{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:6px; }
.sitefoot a{ color:var(--teal); }
.sitefoot .note{ margin-top:6px; font-size:11px; }

/* 発言録の下に置く「講義を読む」リンク */
.ctxlink{ display:inline-block; margin:2px 0 8px; font-size:11.5px; font-weight:700;
  color:var(--teal); text-decoration:none; }
.ctxlink:hover{ text-decoration:underline; }

/* ページ末尾の「関連する日」 */
.related{ margin-top:18px; }
.related .rl a{ display:block; background:var(--paper); border:1px solid var(--line);
  border-radius:9px; padding:9px 13px; margin-bottom:7px; text-decoration:none; color:var(--ink); }
.related .rl .dt{ font-size:12.5px; font-weight:700; color:var(--teal); font-variant-numeric:tabular-nums; }
.related .rl .hd{ font-size:12px; line-height:1.65; margin-top:2px; }
.related .rl .sh{ font-size:10.5px; color:var(--muted); margin-top:3px; }


/* タブ（携帯幅）
 *
 * タブが5つになってから、狭い画面では一行に収まらなくなった。各ページの CSS で
 * 折り返すようにしてあるが、`/d/` は左右の余白が広いぶん 360px で3行に割れる。
 * ヘッダだけで画面の半分近くを使ってしまうので、狭い画面では詰めて2行に収める。
 *
 * ここに置くのは、4面（今日・セッションの記録・用語集・AI関連イベント）で
 * 同じ見え方にするため ―― タブの定義は各ページの CSS に散っているので、
 * 詰め方まで散らすと片面だけ直され続ける。 */
@media(max-width:430px){
  .topbar .tabs{ gap:4px; }
  .topbar .tabs a{ padding:7px 10px; font-size:12px; flex:1 1 auto; text-align:center; }
}