/* ============================================
   シリーズ「AIのいま」— 紙もの版（paper）の共通の顔
   ============================================
   元の暗い版（ai-news-jev）を複製して、見た目だけ差し替えたもの。
   台本・音声・字幕・場面の時刻・キャラの動きは1つも変えていない。

   design: クラフト紙の地に、白いカードと番号タブを並べる。
           差し色は 珊瑚（見出しの下線・番号タブ）／黄（バッジ・強調・下の帯）／
           青緑（棒グラフ）／藍（ラベル）。
   ============================================ */

:root {
  /* 紙 */
  --paper: #f7f1e3;       /* 舞台の地 */
  --paper-soft: #f1e9d8;  /* 一段沈めたところ */
  --card: #fdfaf2;        /* カードの白 */
  --card-line: #ece0c9;   /* カードの縁 */

  --ink: #2f2a24;         /* 文字 */
  --ink-mid: #6d6155;     /* 補助の文字 */
  --ink-soft: #9b9081;

  --coral: #dd5c3c;       /* 番号タブ・見出しの下線・否定 */
  --coral-tint: #f7ded3;  /* 帯 */
  --blue: #4a7ea8;        /* 番号タブ（偶数）*/
  --blue-tint: #d2e2ef;   /* 帯 */
  --yellow: #f5c945;      /* バッジ・強調・下の帯 */
  --yellow-deep: #e0ad22;
  --teal: #2f9a9a;        /* 棒グラフの伸びる色 */
  --navy: #3f6b92;        /* ラベルの下地 */
  --track: #ccd6dd;       /* 棒の下地 */

  /* 元の版と同じ名前も残す（player.js とキャラ側が参照するため） */
  --bg: var(--paper);
  --accent: var(--yellow);

  --font: "Noto Sans JP", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  /* 舞台の基準。ここを変えると比率が変わる */
  --stage-w: 540;
  --stage-h: 960;

  /* 紙のざらつき。地の色の上にこれを重ねる */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

body {
  margin: 0;
  color: var(--ink);
  background: #efe7d6;
  font-family: var(--font);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.page {
  width: min(620px, calc(100% - 28px));
  margin: 0 auto;
  padding: 36px 0 56px;
}

.page-head {
  margin-bottom: 20px;

  .page-kicker {
    margin: 0 0 8px;
    color: var(--coral);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
  }

  .page-title {
    margin: 0;
    font-size: clamp(26px, 6vw, 38px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -.02em;
  }

  .page-note {
    margin: 12px 0 0;
    color: var(--ink-mid);
    font-size: 14px;

    strong { color: var(--ink); }
  }
}

.page-foot {
  margin-top: 22px;
  color: var(--ink-mid);
  font-size: 12px;
  line-height: 1.9;

  p { margin: 0 0 4px; }
  a { color: var(--coral); }
}