/*
 * pages/single-news.css
 * NEWS 記事ページ。モック非存在のため single-art / single-artist の作法に準拠して新規構成。
 *
 * - フォント・カラーは tokens.css の変数のみ（ハードコード禁止）
 * - 英字は大文字（f-display / f-deco ＋ text-transform:uppercase）/ italic 不使用
 * - var(--fs-head) 相当は var(--fs-heading)
 * - .rv は JS無効時に消えないよう body.reveal-ready 配下にスコープ
 * - 関連アーティスト/作品/NEWS のグリッドは components.css の
 *   .artist-grid / .art-grid / .news-list を流用
 */

.boa-num { font-family: var(--f-jp); font-weight: var(--fw-medium); }

/* ═══ BREADCRUMB ═══ */
.breadcrumb { max-width: 820px; margin: 0 auto; padding: 120px 40px 0; display: flex; gap: 10px; font-family: var(--f-deco); font-size: 13px; letter-spacing: var(--ls-2); text-transform: uppercase; color: var(--mid); flex-wrap: wrap; }
.breadcrumb a { transition: color .2s; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { color: var(--border); }

/* ═══ HERO ═══ */
.sn-hero { max-width: 820px; margin: 0 auto; padding: 40px 40px 0; text-align: center; }
.sn-hero-meta { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.sn-hero-cat { font-family: var(--f-jp); font-size: 14px; font-weight: var(--fw-bold); letter-spacing: var(--ls-1); color: var(--white); background: var(--brand); padding: 5px 16px; }
.sn-hero-date { font-family: var(--f-deco); font-size: 14px; letter-spacing: var(--ls-2); color: var(--mid); }
.sn-hero-title { font-family: var(--f-jp); font-size: 34px; font-weight: var(--fw-heavy); letter-spacing: var(--ls-2); line-height: 1.5; color: var(--ink); }

/* ═══ EYECATCH ═══ */
.sn-eyecatch { max-width: 1000px; margin: 56px auto 0; padding: 0 40px; }
.sn-eyecatch img { display: block; width: 100%; height: auto; }

/* ═══ 動画埋め込み（外部リンクが YouTube の場合）═══ */
.sn-video { max-width: 1000px; margin: 56px auto 0; padding: 0 40px; }
.sn-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--border); overflow: hidden; }
.sn-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ═══ ARTICLE BODY ═══ */
.sn-article { max-width: 820px; margin: 0 auto; padding: 64px 40px 0; }
.sn-lead { font-family: var(--f-jp); font-size: 20px; font-weight: var(--fw-bold); letter-spacing: var(--ls-1); line-height: 2; color: var(--ink); margin-bottom: 48px; padding-bottom: 40px; border-bottom: 1px solid var(--border-soft); }
.sn-section { margin-bottom: 56px; }
.sn-section:last-child { margin-bottom: 0; }
.sn-section-title { font-family: var(--f-jp); font-size: 24px; font-weight: var(--fw-bold); letter-spacing: var(--ls-2); line-height: 1.5; color: var(--ink); margin-bottom: 24px; padding-left: 16px; border-left: 3px solid var(--brand); }
.sn-section-body { font-family: var(--f-jp); font-size: var(--fs-body); letter-spacing: var(--ls-1); line-height: 2.15; color: var(--ink); }
.sn-section-body p + p { margin-top: 24px; }
.sn-section-body a { color: var(--brand-deep); text-decoration: underline; }
/* 本文に挿入したメイン画像は本文幅いっぱいに大きく表示（中央）。
   src は large/full に差し替え済み（bankofart_enlarge_content_images）なので鮮明。 */
.sn-section-body img { display: block; width: 100%; height: auto; margin: 36px auto; }
.sn-section-body figure { margin: 36px auto; }
.sn-section-body figure img { margin: 0 auto; }
.sn-section-body figcaption { margin-top: 10px; font-family: var(--f-jp); font-size: 13px; letter-spacing: var(--ls-1); color: var(--mid); text-align: center; }
/* 回り込みで小さく置きたい場合（任意）：左右寄せは原寸で float。 */
.sn-section-body img.alignleft  { float: left;  width: auto; max-width: 46%; margin: 6px 28px 18px 0; }
.sn-section-body img.alignright { float: right; width: auto; max-width: 46%; margin: 6px 0 18px 28px; }
.sn-section-figs { margin-top: 28px; display: grid; grid-template-columns: 1fr; gap: 20px; }
.sn-section-figs .sn-section-fig { display: block; width: 100%; height: auto; }
.sn-section-figs:has(.sn-section-fig:nth-child(2)) { grid-template-columns: repeat(2, 1fr); }

/* ═══ 外部リンクボタン ═══ */
.sn-external { margin-top: 56px; text-align: center; }
.sn-external-btn { font-family: var(--f-jp); font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: var(--ls-2); color: var(--white); background: var(--ink); padding: 16px 40px; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; transition: background .25s; }
.sn-external-btn:hover { background: var(--brand); color: var(--white); }
.sn-external-btn::after { content: ''; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

/* ═══ 関連セクション共通ヘッダ ═══ */
.sn-related, .sn-more { max-width: 1280px; margin: 0 auto; padding: 96px 40px 0; }
.sn-related-head { text-align: center; margin-bottom: 48px; }
.sn-related-en { font-family: var(--f-display); font-size: var(--fs-heading); font-weight: var(--fw-regular); letter-spacing: var(--ls-3); color: var(--ink); margin-bottom: 8px; }
.sn-related-ja { font-family: var(--f-deco); font-size: 13px; font-weight: var(--fw-medium); letter-spacing: var(--ls-3); text-transform: uppercase; color: var(--brand); }
.sn-more .news-list { max-width: 1000px; margin: 0 auto; }

/* ═══ BACK LINK ═══ */
.sn-back { max-width: 1280px; margin: 0 auto; padding: 96px 40px 100px; text-align: center; }
.sn-back a { font-family: var(--f-deco); font-size: 14px; font-weight: var(--fw-medium); letter-spacing: var(--ls-3); text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); padding: 18px 44px; display: inline-flex; align-items: center; gap: 12px; transition: all .25s; text-decoration: none; }
.sn-back a:hover { background: var(--ink); color: var(--white); }
.sn-back a::before { content: ''; width: 8px; height: 8px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }

/* ═══ REVEAL（JS有効時のみ隠す）═══ */
body.reveal-ready .rv { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
body.reveal-ready .rv.on { opacity: 1; transform: translateY(0); }
.rv.d1 { transition-delay: .08s; }
.rv.d2 { transition-delay: .16s; }

/* ═══ レスポンシブ ═══ */
@media (max-width: 700px) {
	.sn-section-body, .sn-lead { line-height: 1.9; }
	.breadcrumb { padding: 104px 20px 0; }
	.sn-hero { padding: 32px 20px 0; }
	.sn-hero-title { font-size: 24px; }
	.sn-eyecatch, .sn-video { padding: 0 20px; margin-top: 40px; }
	.sn-article { padding: 48px 20px 0; }
	.sn-related, .sn-more { padding: 72px 20px 0; }
	.sn-back { padding: 72px 20px 72px; }
	.sn-section-figs:has(.sn-section-fig:nth-child(2)) { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
	.sn-hero { padding: 28px 16px 0; }
	.sn-eyecatch, .sn-video, .sn-article { padding-left: 16px; padding-right: 16px; }
	.sn-related, .sn-more { padding: 56px 16px 0; }
	.sn-back { padding: 56px 16px; }
	.breadcrumb { padding: 96px 16px 0; }
}