/* 青月 公式サイト。色と書体は docs/visual-identity.md に従う。
   紙(クリーム)に紺の墨。装飾は落款の朱だけ(ジャケット背後のハローは試して外した。
   ジャケット自身が紙地を持つので、四角の周りに光が出て不自然だった)。 */
:root {
  --paper: #faf7ef;
  --ink: #101c3a;
  --blue: #2a4d9b;
  --amber: #e8a04c;
  --cream: #f2e9d4;
  --mute: #6b7390;
  --rule: rgba(16, 28, 58, .14);
  --measure: 646px; /* 日本語 17px × 38字。em だと署名(44px)で膨らむので px */
}
* { box-sizing: border-box; }
html {
  background: var(--paper);
  color: var(--ink);
  /* 日本語は全部 Klee One(リールと同じ、ペンの手つき)。欧文だけ Jost */
  font-family: "Klee One", "Hiragino Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none; /* 無い太さを機械的に太らせない */
  text-underline-offset: .22em;
}
body { margin: 0; padding: 0 20px; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
h1, h2 { font-weight: 400; line-height: 1.35; margin: 0; letter-spacing: .02em; }
p { margin: 0 0 1.4em; }

/* 欧文はすべて Jost・字間広め。日本語と役割をはっきり分ける */
.lat, .brand, nav a, .kind, .date, .pn, .n {
  font-family: Jost, "Klee One", sans-serif;
  font-weight: 300;
  letter-spacing: .18em;
}

/* ---------- 頭とナビ ---------- */
.top {
  max-width: 1000px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 30px 0 18px;
}
.brand { font-size: 21px; letter-spacing: .34em; color: var(--ink); }
.brand:hover { text-decoration: none; }
/* 落款。差し色の琥珀はここだけ */
.seal {
  font-weight: 600;
  font-size: 10px; letter-spacing: .08em; line-height: 1;
  color: var(--amber); border: 1px solid var(--amber);
  padding: 3px 4px 2px; margin-left: 14px; vertical-align: .35em;
}
.top nav a { font-size: 13px; color: var(--ink); margin-left: 26px; }
.top nav a:hover { color: var(--blue); text-decoration: none; }

main { max-width: 1000px; margin: 0 auto; min-height: 60vh; }

/* 小さな見出し語(作品種別・曲番号)。大文字にしない */
.kind { font-size: 13px; color: var(--mute); margin: 0 0 .6em; letter-spacing: .22em; }
.date { font-size: 14px; color: var(--mute); margin: .2em 0 1.6em; }
h1 .lat { display: block; font-size: 13px; color: var(--mute); margin-top: .7em; letter-spacing: .22em; }

/* ---------- TOP ヒーロー: ジャケットの背後にだけ月の光 ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px; align-items: center; padding: 48px 0 24px;
}
.cover-link { display: block; }
.cover { width: 100%; aspect-ratio: 1; box-shadow: 0 18px 50px -24px rgba(16, 28, 58, .45); }
.hero h1 { font-size: clamp(38px, 6vw, 64px); letter-spacing: .12em; }
.hero-text .sub a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.hero-text .sub a:hover { text-decoration: none; border-color: var(--ink); }
.btn {
  font-weight: 600;
  display: inline-block; min-height: 44px; line-height: 44px; padding: 0 28px;
  border: 1px solid var(--ink); color: var(--ink); letter-spacing: .12em; font-size: 14px;
  transition: background .2s, color .2s;
}
.btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.cta { margin: 0 0 1em; }

.reel { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 48px; align-items: center; padding: 56px 0 24px; border-top: 1px solid var(--rule); margin-top: 32px; }
.reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--ink); }
.reel .lead p { font-size: 21px; line-height: 2.1; max-width: var(--measure); margin-bottom: .8em; }
.reel .lead-en { font-family: Jost, sans-serif; font-weight: 300; font-size: 16px; line-height: 1.8; color: var(--mute); }

/* ---------- 文章(STORY・ライナー・NEWS) ---------- */
.prose { max-width: var(--measure); padding: 40px 0 32px; }
/* 対訳: 日本語の連の右に、同じ連の英語を小さく薄く(図録の対訳の組み方)。
   .prose の幅は日本語の行長のままにして、英語は右の余白にはみ出させる */
.prose:has(.bi-rows) { max-width: none; }
.bi { display: grid; grid-template-columns: var(--measure) minmax(0, 26em); gap: 0 56px; align-items: start; }
.bi .en-side p { font-family: Jost, sans-serif; font-weight: 300; font-size: 14px; line-height: 1.8; letter-spacing: .01em; color: var(--mute); margin: .35em 0 2.6em; }
/* 上の余白は日本語の引用(34px)と同じにして、行頭を揃える */
.bi .en-side blockquote { font-family: Jost, sans-serif; font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--mute); margin: 38px 0 2em; padding-left: 1em; border-left: 2px solid var(--rule); }
.bi .en-side a { color: var(--blue); }
.en-stack { display: none; }
.prose:has(.bi-rows) .sign { max-width: var(--measure); }
.prose + .prose { border-top: 1px solid var(--rule); margin-top: 24px; padding-top: 56px; }
.prose h1 { font-size: clamp(26px, 4vw, 34px); margin-bottom: 1.4em; font-weight: 400; }
.prose h2 { font-size: 18px; font-weight: 600; margin: 2.4em 0 .9em; }
.prose p { text-align: left; font-size: 17px; line-height: 2.15; margin-bottom: 2.2em; }
.prose blockquote { margin: 34px 0; padding-left: 1.2em; border-left: 2px solid var(--blue); font-size: 18px; line-height: 2; }
/* 署名。筆記体の Akira Okumura を、ペンで書いたサインのように右下へ */
.prose .sign { font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: 44px; line-height: 1.2; text-align: right; color: var(--ink); margin: 1.2em 0 0; padding-right: .2em; letter-spacing: .01em; }

/* 英語の全文。日本語のあとに、同じ行分けで。字は Jost の細いほう */
.en { max-width: var(--measure); margin-top: 3em; padding-top: 2.4em; border-top: 1px solid var(--rule); }
.en p { font-family: Jost, sans-serif; font-weight: 300; font-size: 16.5px; line-height: 1.85; letter-spacing: .01em; color: var(--ink); margin-bottom: 1.8em; }
.en blockquote { font-family: Jost, sans-serif; font-weight: 300; font-size: 18px; line-height: 1.7; margin: 0 0 1.8em; padding-left: 1.2em; border-left: 2px solid var(--blue); }
.en a { color: var(--blue); }

/* ---------- MUSIC 一覧 ---------- */
.grid { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px 32px; }
.grid a { display: block; color: var(--ink); }
.grid a:hover { text-decoration: none; }
.grid img { width: 100%; aspect-ratio: 1; margin-bottom: 14px; }
.grid .t { display: block; font-size: 18px; }
.grid .m { display: block; font-family: Jost, sans-serif; font-weight: 300; font-size: 12px; letter-spacing: .18em; color: var(--mute); }

/* ---------- 作品ページ ---------- */
.release { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 56px; padding: 40px 0 24px; align-items: start; }
.release .cover { box-shadow: 0 18px 50px -24px rgba(16, 28, 58, .45); }
.release h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: .12em; }
.tracks { list-style: none; padding: 0; margin: 1.6em 0 0; border-top: 1px solid var(--rule); }
.tracks li { border-bottom: 1px solid var(--rule); }
.tracks a { display: flex; align-items: baseline; gap: 18px; min-height: 48px; padding: 10px 0; color: var(--ink); }
.tracks a:hover { color: var(--blue); text-decoration: none; }
.tracks .n { font-size: 12px; color: var(--mute); }
.liner { border-top: 1px solid var(--rule); margin-top: 24px; }
.liner p { font-size: 17px; }
.credits { display: grid; grid-template-columns: 4em 1fr; gap: .2em 1.4em; max-width: var(--measure); margin: 0 0 2em; padding-top: 1.2em; border-top: 1px solid var(--rule); font-size: 14px; }
.credits dt { color: var(--mute); }
.credits dd { margin: 0; }
.credits .lat { font-size: 12px; color: var(--mute); margin-left: .8em; }

/* ---------- 歌詞 ---------- */
.song { max-width: var(--measure); padding: 40px 0; }
.song h1 { font-size: clamp(28px, 4.5vw, 38px); letter-spacing: .1em; margin-bottom: 1.6em; }
.lyrics { font-size: 18px; line-height: 2.25; margin-bottom: 2.4em; }
.lyrics p { margin: 0 0 2em; }
.lyrics-en { font-family: Jost, sans-serif; font-size: 18px; line-height: 1.9; letter-spacing: .01em; }
.pn { display: flex; justify-content: space-between; font-size: 13px; }
.pn a { color: var(--ink); min-height: 44px; line-height: 44px; }

/* ---------- NEWS ---------- */
.news h2 { font-family: Jost, "Klee One", sans-serif; font-weight: 300; font-size: 13px; letter-spacing: .2em; color: var(--mute); margin: 2.2em 0 .4em; }
.news h2:first-child { margin-top: .6em; }

/* ---------- 足 ---------- */
footer { max-width: 1000px; margin: 96px auto 44px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--mute); }
.social a { font-family: Jost, sans-serif; font-weight: 300; letter-spacing: .16em; font-size: 13px; color: var(--ink); margin-right: 22px; }
.company, .copy { margin: .8em 0 0; letter-spacing: .04em; }
.company a { color: var(--mute); }

/* ---------- 狭い画面 ---------- */
@media (max-width: 900px) {
  /* 横幅が無いので、日本語の下に英語をまとめて置く */
  .bi { display: block; }
  .bi .en-side { display: none; }
  .en-stack { display: block; }
}
@media (max-width: 720px) {
  .hero, .release, .reel { grid-template-columns: 1fr; gap: 28px; }
  .hero { padding-top: 16px; }
  .cover-link { max-width: 420px; margin: 0 auto; width: 100%; }
  .reel video { max-width: 260px; }
  .top { flex-wrap: wrap; gap: 10px; }
  .top nav a { margin: 0 24px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .reel video { display: none; }
}