/* ============================================================
   サイト共通の枠と扉（DESIGN.md §4 の実装）
   ------------------------------------------------------------
   ここが持つのは3つだけ。
     1. ページの幅（--page-w / --page-pad）
     2. 上下の枠（.sitebar / .sitefoot）
     3. 扉（header.page：眉 → 見出し → リード）

   どのページも同じ形にする。

     <div class="sitebar"><a href="/">私の平和学習</a></div>
     <div class="wrap">
       <header class="page">
         <p class="eyebrow">…</p>   ← 任意（UI書体の小さい肩見出し）
         <p class="meta">…</p>      ← 任意（日付）
         <h1>…</h1>
         <p class="lede">…</p>      ← 任意（.desc も同じ扱い）
       </header>
     </div>

   幅はページごとに違ってよい（年譜は 1080px、数字は 62rem など）。
   ただし .sitebar / .sitefoot が本文とズレないように、
   各ページの CSS で :root に --page-w と --page-pad を宣言する。

     --page-w   本文の幅（そのページの .wrap の max-width と同じ値）
     --page-pad 左右の余白。body 側で padding を持っているページは 0

   色と書体は shared/design.css から受け取る。
   ============================================================ */

/* 既定値は :root に置かず var() の第2引数で持つ。
   このファイルが各ページの CSS の後ろに読み込まれても、
   ページ側の --page-w を上書きしてしまわないようにするため。 */

/* ---- 上の1行 ---- */
.sitebar{
  box-sizing:border-box;
  max-width:var(--page-w,42rem); margin:0 auto;
  padding:1.4rem var(--page-pad,0) 0;
  font-family:var(--ui); font-size:.8rem; letter-spacing:.05em;
  color:var(--ink-faint);
}
.sitebar a{color:inherit; text-decoration:none; border:0;}
.sitebar a:hover{color:var(--accent-mid);}

/* ---- 下の数行 ---- */
.sitefoot{
  box-sizing:border-box;
  max-width:var(--page-w,42rem); margin:4.5rem auto 0;
  padding:1.6rem var(--page-pad,0) 4rem;
  border-top:1px solid var(--rule);
  font-family:var(--ui); font-size:.82rem; letter-spacing:.06em;
  color:var(--ink-soft); line-height:2;
}
.sitefoot a{display:block; color:inherit; text-decoration:none; border:0;}
.sitefoot a:hover{color:var(--accent-mid);}

/* ---- 扉 ----
   見出しは太らせずサイズで階層を作る（明朝に太字ウェイトが無いため）。
   眉と日付だけが UI 書体で、読ませる行は明朝。 */
header.page{
  padding:3.2rem 0 2rem; border-bottom:1px solid var(--rule); border-top:0;
}
header.page .eyebrow{
  font-family:var(--ui); font-size:.74rem; font-weight:400; letter-spacing:.14em;
  color:var(--ink-faint); margin:0 0 .9rem;
}
header.page .meta{
  font-family:var(--ui); font-size:.78rem; letter-spacing:.06em;
  color:var(--ink-faint); margin:0 0 1rem;
}
header.page h1{
  font-family:var(--serif);
  font-size:1.8rem; font-weight:400; letter-spacing:.04em; line-height:1.55;
  margin:0;
}
header.page .lede,
header.page .desc{
  font-family:var(--serif);
  color:var(--ink-soft); font-size:.95rem; line-height:1.9;
  margin:1.1rem 0 0;
}
header.page .lede + .lede,
header.page .desc + .desc{margin-top:.6rem;}
header.page .lede strong{color:var(--ink);}

@media (max-width:480px){
  header.page{padding:2.4rem 0 1.6rem;}
  header.page h1{font-size:1.6rem;}
  .sitefoot{margin-top:3.2rem;}
}