/* =========================================================================
   ローマ帝国の興亡 — 共通スタイル
   レイアウトの考え方：大理石の碑文（ラテン大文字）× 斑岩（皇帝の紫）の夜。
   暗い背景に、金箔の文字と画像で「劇場」のような見せ方をする。
   ========================================================================= */

:root{
  /* ---- 色（すべてここで定義） ---- */
  --porphyry: #1b1116;      /* 背景：皇帝の石「斑岩」の暗い紫 */
  --porphyry-2: #251820;    /* 一段明るい面 */
  --porphyry-3: #33222c;    /* 枠線・区切り */
  --parchment: #ede3d1;     /* 本文：羊皮紙色 */
  --muted: #b3a593;         /* 補足テキスト */
  --gold: #cfa954;          /* 強調：金箔 */
  --gold-deep: #9c7a33;     /* 金の影 */
  --tyrian: #9b3563;        /* 差し色：ティルス紫（皇帝の色） */
  --blood: #a2382b;         /* 危機・滅亡の時代 */
  --west: #c98b55;          /* 西ローマのライン色 */
  --east: #7aa3b8;          /* 東ローマのライン色 */
  --shadow: rgba(8,4,6,.72);

  /* ---- 文字 ---- */
  --f-latin: "Cinzel", "Trajan Pro", "Times New Roman", serif;           /* ラテン碑文体 */
  --f-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; /* 見出し・本文（明朝） */
  --f-ui: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;      /* ラベル類（ゴシック） */

  /* ---- 文字サイズ（この段階だけを使う） ---- */
  --t-xs: .78rem; --t-sm: .9rem; --t-md: 1.05rem; --t-lg: 1.3rem;
  --t-xl: 1.75rem; --t-2xl: 2.4rem; --t-3xl: clamp(2.4rem, 6vw, 4.2rem);

  color-scheme: dark;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *{ animation: none !important; transition: none !important; } }

body{
  margin: 0;
  background: var(--porphyry);
  color: var(--parchment);
  font-family: var(--f-display);
  font-size: var(--t-md);
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: var(--gold); text-decoration: none; }
a:hover{ color: var(--parchment); }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
h1,h2,h3{ text-wrap: balance; font-weight: 700; line-height: 1.4; margin: 0; }
p{ margin: 0; }

/* 横の余白（スマホでも16px以上） */
.wrap{
  max-width: 1120px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.narrow{ max-width: 760px; }

.latin{ font-family: var(--f-latin); letter-spacing: .14em; }
.eyebrow{
  font-family: var(--f-ui); font-size: var(--t-xs); letter-spacing: .2em;
  color: var(--gold); text-transform: uppercase;
}

/* ---------------- ヘッダー ---------------- */
body::before{ content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--porphyry); }
.site-head{
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9;
  background: rgba(27,17,22,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--porphyry-3);
}
.site-head .wrap{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; flex-wrap: wrap; }
.brand{ display: flex; align-items: baseline; gap: 10px; color: var(--parchment); }
.brand b{ font-size: var(--t-md); letter-spacing: .08em; }
.brand span{ font-family: var(--f-latin); font-size: var(--t-xs); color: var(--gold); letter-spacing: .25em; }
.nav{ display: flex; gap: 6px; font-family: var(--f-ui); font-size: var(--t-sm); }
.nav a{ color: var(--muted); padding: 4px 10px; border-radius: 2px; }
.nav a:hover, .nav a[aria-current="page"]{ color: var(--porphyry); background: var(--gold); }

/* ---------------- トップのヒーロー ---------------- */
.hero{
  position: relative; overflow: hidden;
  background: var(--porphyry);
  border-bottom: 1px solid var(--porphyry-3);
}
.hero-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: sepia(.35) contrast(1.05); }
.hero::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,17,22,.2) 0%, rgba(27,17,22,.65) 60%, var(--porphyry) 100%); }
.hero .wrap{ position: relative; z-index: 1; padding-block: clamp(72px, 12vw, 150px) 56px; }
.hero .spqr{ font-family: var(--f-latin); color: var(--gold); letter-spacing: .5em; font-size: var(--t-sm); }
.hero h1{ font-size: var(--t-3xl); letter-spacing: .12em; margin-top: 10px; text-shadow: 0 4px 30px var(--shadow); }
.hero .latin-title{ font-family: var(--f-latin); color: var(--muted); letter-spacing: .3em; font-size: var(--t-sm); margin-top: 6px; }
.hero .prologue{ max-width: 40em; margin-top: 28px; font-size: var(--t-md); color: var(--parchment); text-shadow: 0 2px 12px var(--shadow); }
.hero .ctas{ display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-ui); font-size: var(--t-sm); letter-spacing: .1em;
  padding: 12px 22px; border: 1px solid var(--gold); color: var(--gold); background: rgba(27,17,22,.6);
  transition: background .2s, color .2s;
}
.btn:hover{ background: var(--gold); color: var(--porphyry); }
.btn.solid{ background: var(--gold); color: var(--porphyry); }
.btn.solid:hover{ background: var(--parchment); border-color: var(--parchment); }

/* ---------------- 縮尺どおりの年表（SVG） ---------------- */
.river{ padding-block: 56px 24px; }
.river h2{ font-size: var(--t-xl); }
.river .note{ color: var(--muted); font-size: var(--t-sm); margin-top: 6px; }
.river-scroll{ overflow-x: auto; margin-top: 24px; padding-bottom: 8px; }
.river svg{ min-width: 860px; width: 100%; height: auto; display: block; }
.river svg text{ font-family: var(--f-ui); }
.river svg a:hover rect{ opacity: 1; }

/* ---------------- 時代の章（トップ／一覧） ---------------- */
.era{ padding-block: 64px; border-top: 1px solid var(--porphyry-3); }
.era-head{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px 48px; align-items: start; }
.era-num{ font-family: var(--f-latin); color: var(--gold); font-size: var(--t-sm); letter-spacing: .3em; }
.era-head h2{ font-size: var(--t-2xl); margin-top: 4px; }
.era-years{ font-family: var(--f-latin); color: var(--muted); letter-spacing: .12em; margin-top: 4px; }
.era-text p + p{ margin-top: 1em; }
.era-text{ color: var(--parchment); }
@media (max-width: 760px){ .era-head{ grid-template-columns: minmax(0,1fr); } }
.era.is-west .era-num{ color: var(--west); }
.era.is-east .era-num{ color: var(--east); }
.era.is-crisis .era-num{ color: var(--blood); }

.sub-h{ font-family: var(--f-ui); font-size: var(--t-xs); letter-spacing: .2em; color: var(--muted); margin: 40px 0 14px; display: flex; align-items: center; gap: 12px; }
.sub-h::after{ content: ""; flex: 1; height: 1px; background: var(--porphyry-3); }

/* 出来事カード */
.cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.card{ display: flex; flex-direction: column; background: var(--porphyry-2); color: var(--parchment); border: 1px solid var(--porphyry-3); transition: border-color .2s, transform .2s; min-width: 0; }
.card:hover{ border-color: var(--gold-deep); color: var(--parchment); transform: translateY(-2px); }
.card .thumb{ aspect-ratio: 16/10; overflow: hidden; background: var(--porphyry-3); }
.card .thumb img{ width: 100%; height: 100%; object-fit: cover; filter: sepia(.2); transition: transform .5s; }
.card:hover .thumb img{ transform: scale(1.05); }
.card .body{ padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.card .yr{ font-family: var(--f-latin); color: var(--gold); font-size: var(--t-sm); letter-spacing: .08em; }
.card h3{ font-size: var(--t-md); }
.card .sub{ font-size: var(--t-sm); color: var(--muted); line-height: 1.7; }

/* 人物チップ（肖像の丸＋名前） */
.people-row{ display: flex; flex-wrap: wrap; gap: 12px 18px; }
.chip{ display: flex; align-items: center; gap: 10px; color: var(--parchment); font-size: var(--t-sm); }
.chip img, .chip .ph{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 1px solid var(--gold-deep); background: var(--porphyry-3); flex: none; }
.chip:hover{ color: var(--gold); }
.chip small{ display: block; color: var(--muted); font-size: var(--t-xs); line-height: 1.4; }

/* 人物カード（人物一覧） */
.pgrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.pcard{ display: flex; flex-direction: column; background: var(--porphyry-2); border: 1px solid var(--porphyry-3); color: var(--parchment); min-width: 0; transition: border-color .2s; }
.pcard:hover{ border-color: var(--gold-deep); color: var(--parchment); }
.pcard .thumb{ aspect-ratio: 4/5; overflow: hidden; background: var(--porphyry-3); }
.pcard .thumb img{ width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: sepia(.25); }
.pcard .body{ padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.pcard h3{ font-size: var(--t-md); }
.pcard .lt{ font-family: var(--f-latin); font-size: var(--t-xs); color: var(--gold); letter-spacing: .06em; line-height: 1.5; }
.pcard .ep{ font-size: var(--t-sm); color: var(--muted); line-height: 1.6; margin-top: 4px; }

/* ---------------- 一覧ページ：縦の年表 ---------------- */
.page-head{ padding-block: 56px 8px; }
.page-head h1{ font-size: var(--t-2xl); }
.page-head p{ color: var(--muted); margin-top: 10px; max-width: 40em; }
.tl{ list-style: none; margin: 24px 0 0; padding: 0; position: relative; }
.tl::before{ content: ""; position: absolute; left: 92px; top: 0; bottom: 0; width: 1px; background: var(--porphyry-3); }
.tl li{ display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 28px; padding-block: 14px; position: relative; }
.tl li::before{ content: ""; position: absolute; left: 88px; top: 26px; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.tl .when{ font-family: var(--f-latin); color: var(--gold); text-align: right; font-size: var(--t-sm); padding-top: 6px; letter-spacing: .04em; line-height: 1.4; }
.tl a.row{ display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 18px; color: var(--parchment); align-items: start; }
.tl a.row:hover h3{ color: var(--gold); }
.tl .row img{ width: 150px; aspect-ratio: 3/2; object-fit: cover; filter: sepia(.2); background: var(--porphyry-3); }
.tl h3{ font-size: var(--t-lg); transition: color .2s; }
.tl .sub{ color: var(--muted); font-size: var(--t-sm); line-height: 1.7; }
.tl .lead{ font-size: var(--t-sm); margin-top: 6px; line-height: 1.8; }
.tl li.west::before{ background: var(--west); }
.tl li.east::before{ background: var(--east); }
.tl .lane{ font-family: var(--f-ui); font-size: var(--t-xs); letter-spacing: .1em; padding: 1px 8px; border: 1px solid currentColor; margin-left: 8px; vertical-align: 2px; }
.tl li.west .lane{ color: var(--west); }
.tl li.east .lane{ color: var(--east); }
@media (max-width: 640px){
  .tl::before{ left: 6px; } .tl li::before{ left: 2px; }
  .tl li{ grid-template-columns: minmax(0,1fr); gap: 4px; padding-left: 28px; }
  .tl .when{ text-align: left; padding-top: 0; }
  .tl a.row{ grid-template-columns: minmax(0,1fr); }
  .tl .row img{ width: 100%; }
}

/* ---------------- 詳細ページ：ヒーロー ---------------- */
.d-hero{ position: relative; overflow: hidden; background: var(--porphyry); }
.d-hero .bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: sepia(.3) contrast(1.05); }
.d-hero::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,17,22,.35) 0%, rgba(27,17,22,.78) 60%, var(--porphyry) 100%); }
.d-hero .wrap{ position: relative; z-index: 1; padding-block: clamp(80px, 14vw, 180px) 40px; max-width: 980px; }
.crumb{ font-family: var(--f-ui); font-size: var(--t-xs); color: var(--muted); letter-spacing: .08em; }
.crumb a{ color: var(--muted); } .crumb a:hover{ color: var(--gold); }
.d-year{ display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.d-year b{ font-family: var(--f-latin); font-size: var(--t-xl); color: var(--gold); letter-spacing: .08em; }
.d-year .auc{ font-family: var(--f-latin); font-size: var(--t-xs); color: var(--muted); letter-spacing: .18em; }
.d-hero h1{ font-size: clamp(2rem, 5vw, 3.4rem); margin-top: 6px; text-shadow: 0 4px 30px var(--shadow); letter-spacing: .04em; }
.d-hero .tagline{ font-size: var(--t-lg); color: var(--parchment); margin-top: 10px; text-shadow: 0 2px 14px var(--shadow); }
.d-hero .place{ font-family: var(--f-ui); font-size: var(--t-sm); color: var(--muted); margin-top: 14px; }

/* 本文 */
.article{ padding-block: 24px 64px; }
.scene{
  font-size: var(--t-lg); line-height: 2.05; color: var(--parchment);
  padding-block: 28px; border-block: 1px solid var(--porphyry-3);
}
.scene::first-letter{ font-size: 3.2em; float: left; line-height: 1; margin: .08em .12em 0 0; color: var(--gold); }
.scene.nodrop::first-letter{ font-size: inherit; float: none; margin: 0; color: inherit; }
.scene-label{ font-family: var(--f-latin); font-size: var(--t-xs); color: var(--gold); letter-spacing: .4em; margin-bottom: 10px; }
.sec{ margin-top: 48px; }
.sec h2{ font-size: var(--t-xl); display: flex; gap: 14px; align-items: baseline; }
.sec h2 .rn{ font-family: var(--f-latin); color: var(--gold); font-size: var(--t-md); letter-spacing: .1em; min-width: 2.4em; }
.sec p{ margin-top: 1.1em; }
.figure{ margin: 40px 0 0; }
.figure img{ width: 100%; max-height: 560px; object-fit: contain; background: #0f0a0c; }
.figure figcaption{ font-family: var(--f-ui); font-size: var(--t-xs); color: var(--muted); margin-top: 8px; }
.meaning{ margin-top: 56px; padding: 28px 28px 30px; background: var(--porphyry-2); border: 1px solid var(--gold-deep); }
.meaning h2{ font-size: var(--t-lg); color: var(--gold); }
.meaning p{ margin-top: 10px; }
.trivia{ margin-top: 24px; padding: 18px 22px; border: 1px dashed var(--porphyry-3); font-size: var(--t-sm); color: var(--muted); line-height: 1.85; }
.trivia b{ color: var(--parchment); font-family: var(--f-ui); font-size: var(--t-xs); letter-spacing: .15em; display: block; margin-bottom: 4px; }
.related{ margin-top: 56px; }
.related h2{ font-size: var(--t-lg); margin-bottom: 16px; }

/* 前後ナビ */
.pager{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 64px; }
.pager a{ display: block; padding: 16px 18px; border: 1px solid var(--porphyry-3); color: var(--parchment); min-width: 0; }
.pager a:hover{ border-color: var(--gold); color: var(--parchment); }
.pager small{ display: block; font-family: var(--f-ui); font-size: var(--t-xs); color: var(--gold); letter-spacing: .1em; }
.pager .next{ text-align: right; grid-column: 2; }
@media (max-width: 560px){ .pager{ grid-template-columns: minmax(0,1fr); } .pager .next{ grid-column: 1; } }

/* ---------------- 人物ページ ---------------- */
.p-hero{ padding-block: 40px 24px; background: radial-gradient(ellipse at 20% 0%, rgba(155,53,99,.25), transparent 60%), var(--porphyry); }
.p-hero .grid{ display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 40px; align-items: end; margin-top: 18px; }
.niche{ position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 160px 160px 0 0; border: 1px solid var(--gold-deep); background: var(--porphyry-3); box-shadow: 0 24px 60px var(--shadow); }
.niche img{ width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: sepia(.2) contrast(1.05); }
.p-hero .lt{ font-family: var(--f-latin); color: var(--gold); letter-spacing: .12em; font-size: var(--t-sm); }
.p-hero h1{ font-size: var(--t-3xl); margin-top: 4px; }
.p-hero .meta{ display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-family: var(--f-ui); font-size: var(--t-sm); color: var(--muted); }
.p-hero .meta span b{ color: var(--parchment); font-weight: 500; margin-left: 6px; }
.p-hero .epithet{ margin-top: 16px; font-size: var(--t-lg); color: var(--parchment); }
.p-hero .lead{ margin-top: 14px; color: var(--muted); }
@media (max-width: 720px){ .p-hero .grid{ grid-template-columns: minmax(0,1fr); } .niche{ max-width: 260px; } }
.quote{ margin: 40px 0 0; padding: 32px 0; border-block: 1px solid var(--porphyry-3); text-align: center; }
.quote blockquote{ margin: 0; font-size: var(--t-xl); line-height: 1.6; color: var(--gold); }
.quote blockquote::before{ content: "「"; } .quote blockquote::after{ content: "」"; }
.quote figcaption{ font-family: var(--f-ui); font-size: var(--t-sm); color: var(--muted); margin-top: 10px; }
.finale{ margin-top: 56px; padding: 36px 28px; background: linear-gradient(180deg, rgba(162,56,43,.14), rgba(27,17,22,0)), var(--porphyry-2); border-top: 2px solid var(--blood); }
.finale .eyebrow{ color: var(--blood); }
.finale h2{ font-size: var(--t-xl); margin-top: 6px; }
.finale p{ margin-top: 12px; }

/* ---------------- 二つの道（トップ） ---------------- */
.paths{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-block: 32px 64px; }
.path{ position: relative; display: block; overflow: hidden; min-height: 240px; border: 1px solid var(--porphyry-3); color: var(--parchment); }
.path img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; filter: sepia(.35); transition: opacity .3s, transform .6s; }
.path:hover img{ opacity: .55; transform: scale(1.04); }
.path .in{ position: relative; padding: 28px; display: flex; flex-direction: column; gap: 8px; height: 100%; justify-content: flex-end; min-height: 240px; background: linear-gradient(0deg, rgba(27,17,22,.9), transparent); }
.path h2{ font-size: var(--t-xl); }
.path p{ color: var(--muted); font-size: var(--t-sm); }
.path:hover{ color: var(--parchment); border-color: var(--gold); }
@media (max-width: 680px){ .paths{ grid-template-columns: minmax(0,1fr); } }

/* ---------------- フッター ---------------- */
.site-foot{ border-top: 1px solid var(--porphyry-3); padding-block: 40px; color: var(--muted); font-family: var(--f-ui); font-size: var(--t-xs); line-height: 1.9; }
.site-foot .sig{ font-family: var(--f-display); color: var(--parchment); font-size: var(--t-sm); }
.site-foot .vale{ font-family: var(--f-latin); color: var(--gold); letter-spacing: .4em; margin-bottom: 10px; }
.site-foot p + p{ margin-top: 6px; }