/* ==========================================================================
   Part Hero ── 各部ページの表紙を「夜の天体図書館」の言語に統一する
   トップの hero と同じ夜空を背に、部のテーマカラーが地平から静かに照らす。
   body[data-part] が部色を決め、tokens.css の --part1〜9 を参照する。
   ========================================================================== */

body[data-part="1"]   { --part-color: var(--part1); }
body[data-part="2"]   { --part-color: var(--part2); }
body[data-part="3"]   { --part-color: var(--part3); }
body[data-part="4"]   { --part-color: var(--part4); }
body[data-part="5"]   { --part-color: var(--part5); }
body[data-part="6"]   { --part-color: var(--part6); }
body[data-part="7"]   { --part-color: var(--part7); }
body[data-part="8"]   { --part-color: var(--part8); }
body[data-part="8-2"] { --part-color: var(--part8-2); }
body[data-part="9"]   { --part-color: var(--part9); }
body[data-part="10"]  { --part-color: var(--part10); }
body[data-part="11"]  { --part-color: var(--part11); }
body[data-part="12"]  { --part-color: var(--part12); }
body[data-part="13"]  { --part-color: var(--part13); }
body[data-part="14"]  { --part-color: var(--part14); }
body[data-part="15"]  { --part-color: var(--part15); }
body[data-part="16"]  { --part-color: var(--part16); }
body[data-part="17"]  { --part-color: var(--part17); }
body[data-part="18"]  { --part-color: var(--part18); }
body[data-part="19"]  { --part-color: var(--part19); }
body[data-part="20"]  { --part-color: var(--part20); }

/* ---- 表紙の夜空 ---- */
body[data-part] .cover {
  position: relative;
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 80px 32px;
  overflow: hidden;
  color: var(--text);
  background:
    /* 地平からの部色の灯り */
    radial-gradient(ellipse 720px 340px at 50% 116%, color-mix(in srgb, var(--part-color), transparent 74%), transparent 72%),
    /* 深い夜のトーン（下のヒーロー画像を静かに透かす） */
    linear-gradient(180deg, rgba(5,5,12,0.86) 0%, rgba(10,10,19,0.8) 62%, rgba(13,13,24,0.84) 100%),
    url("../hero-proposals/hero-proposal-01-celestial-parchment-map.png") center / cover;
}
body[data-part] .cover > :not(.cover-constellation) {
  position: relative;
  z-index: 1;
}
body[data-part] .cover-constellation {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--part-color);
  opacity: 0.18;
  pointer-events: none;
}
body[data-part] .cover-constellation svg {
  width: 100%;
  height: 100%;
}

/* ---- タイポグラフィ ---- */
body[data-part] .cover-series {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.34em;
  color: var(--text-dim);
  margin-bottom: 26px;
}
body[data-part] .cover-title {
  font-feature-settings: "palt";
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--text-bright);
  margin-bottom: 20px;
  text-shadow: 0 0 48px color-mix(in srgb, var(--part-color), transparent 55%);
}
body[data-part] .cover-colorname {
  display: block;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: color-mix(in srgb, var(--part-color), #ffffff 30%);
  opacity: 0.8;
  margin-top: -18px;
  margin-bottom: 26px;
}
body[data-part] .cover-colorname small {
  margin-left: 6px;
  font-size: 9.5px;
  opacity: 0.75;
}
body[data-part] .cover-subtitle {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(13px, 1.9vw, 16px);
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--part-color), #ffffff 42%);
  margin-bottom: 8px;
}
body[data-part] .cover-tagline {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(13.5px, 1.8vw, 15.5px);
  line-height: 2.4;
  max-width: 640px;
  color: var(--text-dim);
  margin: 0 auto;
}
body[data-part] .cover-tagline em {
  font-style: normal;
  color: var(--text);
}
body[data-part] .cover-sigil {
  width: 28px;
  height: 28px;
  margin: 30px auto -18px;
  color: var(--part-color);
  opacity: 0.52;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--part-color), transparent 55%));
}
body[data-part] .cover-sigil svg {
  width: 100%;
  height: 100%;
}

/* ---- 区切り線: 部色の経緯線 ---- */
body[data-part] .cover-divider {
  width: 64px;
  height: 1px;
  margin: 34px auto;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--part-color), transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--part-color), transparent 55%);
  opacity: 0.9;
}

@media (max-width: 520px) {
  body[data-part] .cover {
    padding: 72px 22px;
  }
  body[data-part] .cover-series {
    letter-spacing: 0.22em;
    line-height: 1.8;
  }
  body[data-part] .cover-colorname {
    letter-spacing: 0.22em;
  }
  body[data-part] .cover-sigil {
    margin-top: 24px;
  }
}

/* ---- 不要情報は表紙から取り除く ---- */
body[data-part] .cover-film,
body[data-part] .cover-chapter,
body[data-part] .cover-note {
  display: none;
}

/* ---- 行き先: 静かなゴーストボタン ---- */
body[data-part] .cover-yt-cta,
body[data-part] .cover-podcast-cta,
body[data-part] .cover-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border: 1px solid color-mix(in srgb, var(--part-color), transparent 55%);
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--part-color), #ffffff 30%);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
body[data-part] .cover-yt-cta:hover,
body[data-part] .cover-podcast-cta:hover,
body[data-part] .cover-action:hover {
  border-color: var(--part-color);
  color: var(--text-bright);
  box-shadow: 0 0 24px color-mix(in srgb, var(--part-color), transparent 80%);
}
body[data-part] .cover-yt-cta svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
body[data-part] .cover-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}