/* ==================================================
   article.css
   個別記事ページ / NEWSアーカイブ 専用スタイル。
   css/style.css (ヘッダー・フッター・共通コンポーネントの構造) と併用する。

   このファイルは記事ページ・NEWS一覧だけに読み込まれる(index.htmlには
   読み込まれない)。そのため、下の :root 上書きは記事ページ内だけで有効になり、
   トップページ(index.html)の見た目には一切影響しない。

   モチーフ: 老舗喫茶店のメニュー表 × 音楽雑誌 × ライナーノーツ
   ================================================== */

.article-main{ 
	--bg: #F4EBDD;
	--bg-alt: #EDE0C9;
	--bg-deep: #2A1D16;
	--cream: #FBF5EA;
	--cream-dim: #E4D5BE;
	--gold: #8C6A3F;
	--gold-dim: #6B5636;
	--rust: #5A2E20;
	--stone: #8A725F;
	--ink: #30251E;
	--border: rgba(48,37,30,0.16);
	--border-ink:rgba(48,37,30,0.18);
	--ff-jp:'Shippori Mincho','Zen Kaku Gothic New',serif;
	background-color:var(--bg);
	background-size:3px 3px, 7px 7px; background-position:0 0, 2px 3px;
	color:var(--ink);
}

/* うっすらとした紙の質感(画像を使わずCSSのみで表現・スマホでも軽い) */

.article-main{
	background-color:var(--bg);
	background-size:3px 3px, 7px 7px; background-position:0 0, 2px 3px;
	color:var(--ink);
}




/* ==================================================
   BREADCRUMB — 雑誌の隅にある小さな分類表示のように
   ================================================== */
.breadcrumb{
  padding-top:5.5rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  font-family:var(--ff-util); font-size:.7rem; letter-spacing:.06em;
  color:var(--stone);
}
.breadcrumb a{ color:var(--stone); border-bottom:1px solid transparent; transition:border-color .2s var(--ease), color .2s var(--ease); }
.breadcrumb a:hover{ color:var(--rust); border-color:var(--rust); }
.breadcrumb .sep{ opacity:.6; }
.breadcrumb .current{
  color:var(--ink);
  max-width:40ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ==================================================
   ARTICLE HEADER
   ================================================== */
.article-header{
  padding-top:1.4rem;
  padding-bottom:2.2rem;
}
.article-category{
  display:inline-block;
  font-family:var(--ff-util); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rust); border:1px solid var(--rust); border-radius:2px;
  padding:.22rem .8rem;
  margin:1rem 0 1.2rem;
}
.article-title{
  font-family:var(--ff-display); font-style:italic; font-weight:700;
  font-size:clamp(2rem, 5.4vw, 3.3rem);
  line-height:1.32;
  color:var(--ink);
}

/* "メニュー表 / 伝票" 風の情報行。DATE / VENUE / TIME をドットのリーダー線で揃える */
.article-meta{
  margin-top:2.1rem;
  padding-top:.3rem;
  border-top:1px double var(--border-ink);
  max-width:520px;
}
.meta-row{
  display:flex; align-items:baseline; gap:.7rem;
  padding:.65rem 0;
  border-bottom:1px solid var(--border-ink);
  font-size:.85rem;
}
.meta-row .k{
  font-family:var(--ff-util); text-transform:uppercase; letter-spacing:.1em;
  font-size:.68rem; color:var(--rust); white-space:nowrap; flex:none;
}
.meta-row .leader{
  flex:1; border-bottom:1px dotted var(--stone);
  height:0; align-self:end; margin-bottom:.3rem; opacity:.7;
}
.meta-row .v{ white-space:nowrap; color:var(--ink); font-weight:600; font-family:var(--ff-jp); }

/* ==================================================
   HERO IMAGE — 雑誌の記事写真のような見せ方
   ================================================== */
.article-hero{ margin:0 0 clamp(2.5rem,6vw,4rem); }
.article-hero-frame{
  border:1px solid var(--border-ink);
  padding:.5rem;
  background:var(--cream);
  box-shadow:0 22px 40px -28px rgba(48,37,30,.4);
}
.article-hero-frame img{ width:100%; height:auto; display:block; }
.article-hero figcaption{
  margin-top:.8rem;
  font-family:var(--ff-display); font-style:italic; font-size:.85rem;
  color:var(--stone); text-align:center;
}

/* ==================================================
   2カラムレイアウト:本文 + サイドバー
   ================================================== */
.article-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:3.2rem;
  align-items:start;
  padding-bottom:clamp(3.5rem,8vw,5.5rem);
}
@media (min-width:960px){
  .article-layout{ grid-template-columns:240px minmax(0,1fr); gap:4rem; }
  .article-sidebar{ order:1; position:sticky; top:6.5rem; }
  .article-main-col{ order:2; }
}
.article-main-col > * + *{ margin-top:2.8rem; }

/* ---- サイドバー ---- */
.sidebar-box{
  border:1px solid var(--border-ink);
  padding:1.5rem 1.4rem;
  margin-bottom:1.6rem;
  background:rgba(255,252,244,.4);
}
.sidebar-title{
  display:flex; align-items:center; gap:.5rem; justify-content:center;
  font-family:var(--ff-display); font-style:italic; font-weight:600;
  font-size:1.15rem; color:var(--rust);
  text-align:center;
  padding-bottom:.9rem; margin-bottom:.9rem;
  border-bottom:1px solid var(--border-ink);
}
.ornament-icon{ width:18px; height:15px; color:var(--gold); display:inline-flex; }
.ornament-icon svg{ width:100%; height:100%; }
.menu-list{ display:flex; flex-direction:column; }
.menu-list li{ border-bottom:1px dotted var(--border-ink); }
.menu-list li:last-child{ border-bottom:none; }
.menu-list a{
  display:block; padding:.6rem .1rem;
  font-family:var(--ff-util); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink);
  transition:color .2s var(--ease), padding-left .2s var(--ease);
}
.menu-list a:hover{ color:var(--rust); padding-left:.35rem; }

.recent-list li{ padding:.75rem 0; border-bottom:1px dotted var(--border-ink); }
.recent-list li:last-child{ border-bottom:none; }
.recent-list a{ display:flex; align-items:center; gap:.7rem; }
.recent-thumb{ width:46px; height:46px; flex:none; overflow:hidden; border:1px solid var(--border-ink); }
.recent-thumb img{ width:100%; height:100%; object-fit:cover; }
.recent-meta{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.recent-date{ font-family:var(--ff-util); font-size:.65rem; color:var(--stone); }
.recent-title{
  font-family:var(--ff-jp); font-size:.85rem; color:var(--ink); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---- prose ---- */
.article-prose{
  font-family:var(--ff-jp);
  font-size:1.05rem;
  line-height:2.05;
  color:var(--ink);
  max-width:760px;
}
.article-prose > * + *{ margin-top:1.6em; }
.article-prose h2{
  position:relative;
  font-family:var(--ff-display); font-style:italic; font-weight:700;
  font-size:clamp(1.3rem,3vw,1.6rem);
  color:var(--ink);
  text-align:center;
  padding:.5em 0;
  margin-top:2.6em;
}
.article-prose h2::before, .article-prose h2::after{
  content:""; position:absolute; left:50%; width:120px; height:1px;
  background:var(--border-ink); transform:translateX(-50%);
}
.article-prose h2::before{ top:0; }
.article-prose h2::after{ bottom:0; }
.article-prose h3{
  font-family:var(--ff-util); text-transform:uppercase; letter-spacing:.1em;
  font-size:.82rem; color:var(--rust); margin-top:2em;
}
.article-prose strong{ color:var(--rust); font-weight:700; }
.article-prose a{ color:var(--rust); text-decoration:underline; text-underline-offset:3px; }
.article-prose blockquote{
  font-family:var(--ff-display); font-style:italic; font-weight:500;
  font-size:clamp(1.15rem,2.4vw,1.4rem);
  line-height:1.6;
  color:var(--rust);
  border-left:2px solid var(--gold);
  padding-left:1.2em;
  margin-block:2em;
}
.article-prose ul, .article-prose ol{ padding-left:1.4em; }
.article-prose ul{ list-style:none; padding-left:0; }
.article-prose ul li{ position:relative; padding-left:1.4em; }
.article-prose ul li::before{
  content:"—"; position:absolute; left:0; color:var(--gold);
}
.article-prose ol{ list-style:decimal; }
.article-prose ol li::marker{ font-family:var(--ff-util); color:var(--rust); }
.article-prose li + li{ margin-top:.6em; }
.article-prose hr{
  border:none; height:1px;
  background:repeating-linear-gradient(90deg, var(--stone) 0 6px, transparent 6px 12px);
  opacity:.6;
  margin:2.6em 0;
}
.article-prose img{
  width:100%; border:1px solid var(--border-ink); padding:.4rem; background:var(--cream);
}
.article-prose figure{ margin:0; }
.article-prose figcaption{
  margin-top:.6rem; font-size:.82rem; color:var(--stone); text-align:center;
  font-family:var(--ff-display); font-style:italic;
}

/* ---- ギャラリー(front-matter の gallery:) 枚数に応じて自動で列数が変わる ---- */
.article-gallery{
  display:grid; gap:1rem; margin-block:1.6em;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
}

/* ---- セットリスト ---- */
.setlist-block{
  margin-block:1.8em;
  border-top:1px double var(--border-ink);
  border-bottom:1px double var(--border-ink);
  padding:1.4rem 0;
}
.setlist-title{
  font-family:var(--ff-display); font-style:italic; font-size:1rem;
  color:var(--rust); margin-bottom:1rem; display:block; text-align:center;
}
.setlist-row{
  display:flex; align-items:baseline; gap:.7rem;
  font-family:var(--ff-jp); font-size:.98rem; color:var(--ink);
  padding:.45rem 0;
}
.setlist-row .num{ font-family:var(--ff-util); color:var(--gold); font-size:.85rem; flex:none; }
.setlist-row .leader{ flex:1; border-bottom:1px dotted var(--stone); height:0; align-self:end; margin-bottom:.25rem; opacity:.7; }

/* ---- イベント情報(伝票風) ---- */
.event-block{
  margin-block:1.8em;
  border:1px solid var(--border-ink);
  padding:1.4rem 1.5rem;
  background:rgba(255,252,244,.5);
  position:relative;
}
.event-block::before{
  content:"EVENT";
  position:absolute; top:-.65em; left:1.2rem;
  background:var(--bg);
  padding:0 .6em;
  font-family:var(--ff-util); font-size:.65rem; letter-spacing:.16em; color:var(--rust);
}
.event-block .meta-row:last-child{ border-bottom:none; }

/* ---- 動画埋め込み ---- */
.video-embed{ margin-block:1.8em; }
.video-embed-frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--border-ink); background:var(--bg-deep); cursor:pointer;
}
.video-embed-frame img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.video-embed-frame .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.video-embed-frame .play span{
  width:60px; height:60px; border-radius:50%; border:1px solid var(--cream);
  color:var(--cream); display:flex; align-items:center; justify-content:center;
  font-size:1rem; padding-left:3px; background:rgba(42,29,22,.5);
}
.video-embed-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ==================================================
   RELATED ARTICLES(MORE NEWS)
   ================================================== */
.related-articles{ border-top:1px solid var(--border-ink); padding-top:2.4rem; }
.related-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  margin-top:1.4rem;
}
.related-card{
  display:flex; flex-direction:column; gap:.5rem;
  border:1px solid var(--border-ink);
  padding:1.1rem 1.2rem;
  background:rgba(255,252,244,.4);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.related-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px -20px rgba(48,37,30,.35); }
.related-cat{
  align-self:flex-start;
  font-family:var(--ff-util); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rust); border:1px solid var(--rust); border-radius:2px;
  padding:.12rem .55rem;
}
.related-title{ font-family:var(--ff-jp); font-weight:700; font-size:.94rem; color:var(--ink); }
.related-date{ font-family:var(--ff-util); font-size:.72rem; color:var(--stone); }

/* ==================================================
   前の記事 / 次の記事 — 雑誌のページをめくるような導線
   ================================================== */
.prev-next{
  display:flex; justify-content:space-between; gap:1.5rem;
  border-top:1px double var(--border-ink);
  border-bottom:1px double var(--border-ink);
  padding:1.3rem 0;
}
.prev-next-link{
  display:flex; align-items:center; gap:.6rem;
  max-width:47%;
  font-family:var(--ff-jp); font-size:.88rem; color:var(--ink);
  transition:opacity .2s var(--ease);
}
.prev-next-link:hover{ opacity:.65; }
.prev-next-link.next{ margin-left:auto; text-align:right; flex-direction:row-reverse; }
.pn-arrow{ font-family:var(--ff-display); font-size:1.4rem; color:var(--gold); flex:none; }
.pn-text{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.pn-label{ font-family:var(--ff-util); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); }
.prev-next-empty{ flex:1; }

/* ==================================================
   BACK TO NEWS
   ================================================== */
.back-to-news{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--ff-util); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:.15rem;
  transition:opacity .25s var(--ease);
}
.back-to-news:hover{ opacity:.6; }

/* ==================================================
   NEWS ARCHIVE (news/index.html)
   ================================================== */
.news-archive-header{ padding-top:1.6rem; padding-bottom:1rem; }
.news-archive-title{
  font-family:var(--ff-display); font-style:italic; font-weight:700;
  font-size:clamp(2.4rem,7vw,4rem); color:var(--ink);
}
.news-archive-list{ padding-bottom:clamp(4rem,9vw,6rem); }

/* ==================================================
   LIGHTBOX
   ================================================== */
.article-prose img.is-zoomable, .article-gallery img.is-zoomable{ cursor:zoom-in; }
.lightbox-overlay{
  position:fixed; inset:0; z-index:80;
  background:rgba(42,29,22,.92);
  display:flex; align-items:center; justify-content:center;
  padding:2rem;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease);
  cursor:zoom-out;
}
.lightbox-overlay.is-open{ opacity:1; visibility:visible; }
.lightbox-overlay img{
  max-width:100%; max-height:100%;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}

/* ==================================================
   RESPONSIVE
   ================================================== */
@media (max-width:640px){
  .breadcrumb{ padding-top:5rem; font-size:.65rem; }
  .article-category{ margin-top:.8rem; }
  .sidebar-box{ padding:1.2rem 1.1rem; }
  .prev-next{ flex-direction:column; gap:1.1rem; }
  .prev-next-link, .prev-next-link.next{ max-width:100%; }
}