/* ==========================================================
   detail.css — 個別詳細ページ（/articles/ /festivals/ /artists/ /venues/）
   scripts/build-detail-pages.mjs が生成する静的ページ専用のスタイル。
   news.html の記事詳細と同じ見た目に揃えてある。
   ========================================================== */

.article-detail { padding: 120px 0 80px; max-width: 760px; margin: 0 auto; }
.article-detail-inner { padding: 0 40px; }
.article-back {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; opacity: 0.4; transition: opacity 0.3s ease;
  margin-bottom: 60px;
}
.article-back:hover { opacity: 1; }
.article-back .arrow { width: 24px; height: 1px; background: var(--text); position: relative; display: inline-block; }
.article-back .arrow::before { content: ''; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-left: 1px solid var(--text); border-bottom: 1px solid var(--text); transform: rotate(45deg); }

.article-meta-top {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; opacity: 0.5; margin-bottom: 24px;
}
.article-meta-top .cat-pill { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); opacity: 1; }
.article-meta-top .cat-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.article-detail h1, .detail-page h1 {
  font-family: var(--font-display); font-size: clamp(36px, 6vw, 72px);
  line-height: 1.05; text-transform: uppercase; margin-bottom: 24px;
}
.article-excerpt {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7; opacity: 0.7;
  margin-bottom: 40px; padding-bottom: 32px;
  border-bottom: 1px solid rgba(240,237,232,0.1);
}
.article-hero-img { margin: 0 -40px 48px; aspect-ratio: 16/9; overflow: hidden; background: rgba(240,237,232,0.04); }
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
/* CMS で「元画像のまま」を選んだ記事は切り抜かず、写真本来の縦横比で出す */
.article-hero-img[data-ratio="auto"] { aspect-ratio: auto; }
.article-hero-img[data-ratio="auto"] img { height: auto; display: block; }

.article-body { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.85; color: rgba(240,237,232,0.85); }
.article-body p { margin-bottom: 24px; }
.article-body h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); text-transform: uppercase; line-height: 1.1; margin: 48px 0 16px; color: var(--text); }
.article-body h3 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; margin: 36px 0 12px; color: var(--text); }
.article-body ul, .article-body ol { margin: 0 0 24px 24px; padding: 0; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: var(--text); border-bottom: 1px solid rgba(240,237,232,0.3); transition: border-color 0.2s ease; }
.article-body a:hover { border-bottom-color: var(--text); }
.article-body strong { color: var(--text); font-weight: 500; }
.article-body em { font-style: italic; }
.article-body blockquote { border-left: 2px solid var(--accent); padding: 8px 0 8px 24px; margin: 32px 0; font-style: italic; opacity: 0.85; }
.article-body img { max-width: 100%; height: auto; display: block; margin: 32px auto; border-radius: 4px; }
.article-body figure { margin: 32px 0; }
.article-body figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240,237,232,0.5); margin-top: 12px; text-align: center; }

.article-footer { margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(240,237,232,0.1); }
.article-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.article-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid rgba(240,237,232,0.15);
  opacity: 0.6; display: inline-block;
}

/* ----- フェス / アーティスト / ヴェニュー共通 ----- */
.detail-page { padding: 120px 0 80px; max-width: 860px; margin: 0 auto; }
.detail-inner { padding: 0 40px; }
.detail-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
}
.detail-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.detail-chip {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid rgba(240,237,232,0.15); opacity: 0.7;
}
.detail-hero { margin: 0 -40px 48px; aspect-ratio: 16/9; overflow: hidden; background: rgba(240,237,232,0.04); }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero-portrait { aspect-ratio: 3/2; }
.detail-body {
  font-family: var(--font-body); font-weight: 300; font-size: 16px;
  line-height: 1.85; color: rgba(240,237,232,0.85); margin-bottom: 40px;
}
.detail-body p { margin-bottom: 24px; }

.detail-facts { margin: 40px 0; border-top: 1px solid rgba(240,237,232,0.1); }
.detail-facts > div {
  display: flex; gap: 24px; padding: 14px 0;
  border-bottom: 1px solid rgba(240,237,232,0.08);
}
.detail-facts dt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; opacity: 0.45; min-width: 120px; flex-shrink: 0;
}
.detail-facts dd { font-family: var(--font-body); font-weight: 300; font-size: 15px; color: rgba(240,237,232,0.9); }
.detail-facts dd a { color: var(--accent); border-bottom: 1px solid rgba(255,45,45,0.3); word-break: break-all; }

.detail-page h2 {
  font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px);
  text-transform: uppercase; margin: 48px 0 20px;
}
.lineup-list { display: flex; flex-wrap: wrap; gap: 10px; }
.lineup-item {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid rgba(240,237,232,0.15); opacity: 0.75;
  transition: border-color 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}
a.lineup-item:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }

.detail-links { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.detail-link {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 10px 16px; border: 1px solid rgba(240,237,232,0.2); opacity: 0.8;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.detail-link:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }

@media (max-width: 768px) {
  .article-detail, .detail-page { padding: 100px 0 60px; }
  .article-detail-inner, .detail-inner { padding: 0 24px; }
  .article-hero-img, .detail-hero { margin-left: -24px; margin-right: -24px; }
  .detail-facts > div { flex-direction: column; gap: 6px; }
}


/* ==========================================================
   記事デザイン v2 — ヒーローオーバーレイ / スペック表メタ /
   本文の拡張書式（news.html と同じ見た目）
   ========================================================== */
.article-hero {
  position: relative; left: 50%; transform: translateX(-50%);
  width: min(96vw, 1100px);
  aspect-ratio: 16/9; overflow: hidden;
  margin-bottom: 0; background: rgba(240,237,232,0.04);
}
.article-hero[data-ratio="auto"] { aspect-ratio: auto; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-hero[data-ratio="auto"] img { height: auto; }
.article-hero-overlay {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(24px, 5vw, 56px);
  background: linear-gradient(to top, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.55) 55%, transparent 100%);
}
.article-hero-overlay h1 {
  font-family: var(--font-display); font-size: clamp(34px, 5.5vw, 76px);
  line-height: 1.02; text-transform: uppercase; margin: 0;
}
.article-chips { display: flex; gap: 10px; margin-bottom: 14px; }
.article-chips .cat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--text);
  border: 1px solid rgba(240,237,232,0.35); padding: 5px 12px;
}
.article-chips .cat-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.article-specs {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 32px 0 40px; padding: 0;
  border-bottom: 1px solid rgba(240,237,232,0.12);
}
.article-specs > div { flex: 1 1 0; min-width: 140px; padding: 18px 20px 16px; border-right: 1px solid rgba(240,237,232,0.12); }
.article-specs > div:first-child { padding-left: 0; }
.article-specs > div:last-child { border-right: none; }
.article-specs dt { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.4; margin-bottom: 6px; }
.article-specs dd { font-family: var(--font-body); font-weight: 300; font-size: 14px; letter-spacing: 0.02em; margin: 0; text-transform: uppercase; }

.article-body .ql-size-small { font-size: 0.85em; }
.article-body .ql-size-large { font-size: 1.35em; line-height: 1.6; }
.article-body .ql-size-huge  { font-size: 1.9em;  line-height: 1.35; font-weight: 200; }
.article-body .ql-align-center { text-align: center; }
.article-body .ql-align-right  { text-align: right; }
.article-body .ql-font-bebas { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.article-body .ql-font-mono  { font-family: var(--font-mono); font-size: 0.85em; letter-spacing: 0.05em; }

.article-body blockquote {
  border-left: none; padding: 8px 0; margin: 56px 0;
  font-family: var(--font-body); font-weight: 200; font-style: normal;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.45;
  color: var(--text); opacity: 1; text-align: center; position: relative;
}
.article-body blockquote::before { content: ''; display: block; width: 48px; height: 2px; background: var(--accent); margin: 0 auto 24px; }
.article-body blockquote::after  { content: ''; display: block; width: 48px; height: 2px; background: var(--accent); margin: 24px auto 0; }

.article-body .entity-link { color: var(--accent); border-bottom: 1px dotted rgba(255,45,45,0.5); transition: border-bottom-color 0.2s ease; }
.article-body .entity-link:hover { border-bottom-color: var(--accent); border-bottom-style: solid; }

/* ----- フェス詳細: 関連記事 ----- */
.related-stories { margin: 56px 0 0; }
.related-stories h2 { margin-bottom: 20px; }
.related-story-card {
  display: flex; gap: 20px; align-items: center;
  border: 1px solid rgba(240,237,232,0.12); padding: 16px;
  transition: border-color 0.25s ease; margin-bottom: 12px;
}
.related-story-card:hover { border-color: var(--accent); }
.related-story-thumb { width: 120px; aspect-ratio: 4/3; object-fit: cover; flex-shrink: 0; background: rgba(240,237,232,0.05); }
.related-story-meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.related-story-title { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.5; color: var(--text); }

@media (max-width: 640px) {
  .article-specs > div { flex: 1 1 100%; border-right: none; border-top: 1px solid rgba(240,237,232,0.08); padding-left: 0; }
  .article-specs > div:first-child { border-top: none; }
  .related-story-thumb { width: 88px; }
}

/* ----- 言語トグル（生成ページのナビ内） ----- */
.nav-lang { display: inline-flex; align-items: center; gap: 8px; margin-left: 18px; padding-left: 18px; border-left: 1px solid rgba(240,237,232,0.15); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; }
.nav-lang a { opacity: 0.45; transition: opacity 0.2s ease, color 0.2s ease; }
.nav-lang a:hover { opacity: 1; color: var(--accent); }
.nav-lang-cur { color: var(--accent); }
.nav-lang-sep { opacity: 0.25; }

/* ===== FESTIVAL EDITIONS（開催ヒストリー） ===== */
.edition-block-static { margin: 28px 0; padding: 20px 22px; border: 1px solid rgba(240,237,232,0.1); border-radius: 6px; }
.edition-block-static .edition-year { font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 6px; }
.edition-block-static .detail-eyebrow { margin-bottom: 12px; }
.edition-block-static .lineup-list { margin-top: 4px; }

/* ARTICLE FX styles → article-fx.css に移設（news.html と共有するため） */

/* ==============================================================
   LANG TOGGLE — 説明文の日本語/英語インライン切替（lang-toggle.js と対）
   ============================================================== */
.detail-body.bilingual { position: relative; }
.lang-toggle { display: inline-flex; margin: 0 0 18px; border: 1px solid rgba(240,237,232,0.16); border-radius: 2px; overflow: hidden; }
.lang-btn { appearance: none; -webkit-appearance: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; padding: 7px 15px; background: transparent; color: rgba(240,237,232,0.5); cursor: pointer; border: 0; line-height: 1; transition: color .18s ease, background .18s ease; }
.lang-btn + .lang-btn { border-left: 1px solid rgba(240,237,232,0.16); }
.lang-btn:hover { color: var(--text, #f0ede8); }
.lang-btn.is-active { background: var(--accent); color: #fff; }
.lang-body[hidden] { display: none; }
.lang-body { animation: langFade .35s ease; }
@keyframes langFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lang-body { animation: none; } }