/* ==========================================================================
   Time Capsule Daily — design tokens & base
   読者層35-60歳を前提に本文18pxを基準とし、行長は66-72文字に収める。
   広告枠は必ず高さを予約し、CLS(レイアウトシフト)を出さない。
   ========================================================================== */

:root {
  /* --- 色: 温かみのある紙とインク（ノスタルジーの基調） --- */
  --paper:        #faf7f1;
  --paper-raised: #ffffff;
  --paper-sunk:   #f2ece1;
  --ink:          #1b1714;
  --ink-soft:     #4d4540;
  --ink-faint:    #7d746c;
  --rule:         #e2d9c9;

  --accent:       #b04a24;  /* rust — 見出し・リンク・番号 */
  --accent-deep:  #8a3718;
  --accent-wash:  #fbeee7;

  /* カテゴリ色分け（listverse同様、セクションを色で識別させる） */
  --cat-retro:    #b04a24;
  --cat-history:  #4a6fa5;
  --cat-home:     #4f7d52;
  --cat-tech:     #7a5ea8;

  /* --- タイポグラフィ --- */
  --font-display: 'Bitter', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --step--1: 0.9375rem;   /* 15px  メタ情報 */
  --step-0:  1.125rem;    /* 18px  本文（大きめ） */
  --step-1:  1.3125rem;   /* 21px  リード文 */
  --step-2:  1.625rem;    /* 26px  項目見出し */
  --step-3:  2.125rem;    /* 34px  セクション */
  --step-4:  2.75rem;     /* 44px  記事タイトル */

  /* --- レイアウト --- */
  --measure:    68ch;
  --gutter:     1.25rem;
  --radius:     4px;
  --shadow:     0 1px 2px rgba(27,23,20,.06), 0 4px 12px rgba(27,23,20,.05);
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --paper:        #14110f;
    --paper-raised: #1d1917;
    --paper-sunk:   #0f0d0c;
    --ink:          #f0e9df;
    --ink-soft:     #c3b8ab;
    --ink-faint:    #8d8378;
    --rule:         #332d28;
    --accent:       #e07a4f;
    --accent-deep:  #f0a077;
    --accent-wash:  #2a1d16;
    --shadow:       0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}

:root[data-theme="dark"] {
  --paper:        #14110f;
  --paper-raised: #1d1917;
  --paper-sunk:   #0f0d0c;
  --ink:          #f0e9df;
  --ink-soft:     #c3b8ab;
  --ink-faint:    #8d8378;
  --rule:         #332d28;
  --accent:       #e07a4f;
  --accent-deep:  #f0a077;
  --accent-wash:  #2a1d16;
  --shadow:       0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  font-weight: 700;
}

/* --- 汎用レイアウト --- */
.wrap { width: min(100% - 2rem, 1280px); margin-inline: auto; }
.prose { width: min(100%, var(--measure)); margin-inline: auto; }
.stack > * + * { margin-top: var(--flow, 1rem); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  text-decoration: none;
}

.meta { font-size: var(--step--1); color: var(--ink-faint); }

/* --- 広告枠: 高さを予約してCLSを防ぐ ---------------------------------- */
.ad-slot {
  display: flex; align-items: center; justify-content: center;
  margin: 2.5rem auto;
  background: var(--paper-sunk);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  color: var(--ink-faint);
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  contain: layout;
}
.ad-slot[data-size="leaderboard"] { min-height: 90px;  max-width: 728px; }
.ad-slot[data-size="rectangle"]   { min-height: 250px; max-width: 336px; }
.ad-slot[data-size="inarticle"]   { min-height: 280px; max-width: 100%;  }
@media (max-width: 640px) {
  .ad-slot[data-size="leaderboard"] { min-height: 100px; }
}

/* 検閲がFLAGを出した記事では広告を一切描画しない（仕様書6-1） */
body[data-ads="off"] .ad-slot { display: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}