/* ================================================================
   HUG Foundation — Story Pages CSS
   story.css
   archive-story.php / single-story.php / taxonomy-story_cat.php
   ================================================================ */

/* .label-en / .inner / @keyframes heroZoom / @keyframes scrollLineAnim → global.css に集約 */


/* ================================================================
   01. ARCHIVE — HERO
   ================================================================ */
.story-arc-hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.story-arc-hero-bg {
  position: absolute; inset: 0;
}
.story-arc-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.55) sepia(12%);
  transform: scale(1.05);
  animation: heroZoom 14s ease-out forwards;
}
.story-arc-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(26,24,20,0.96) 0%,
    rgba(26,24,20,0.40) 50%,
    rgba(26,24,20,0.20) 100%
  );
}
/* フォールバック：画像なしのとき */
.story-arc-hero--no-image {
  background: var(--charcoal);
}
.story-arc-hero--no-image .story-arc-hero-overlay {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(201,169,110,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(201,169,110,0.05) 0%, transparent 50%);
}

/* ページラベル（左上）*/
.story-arc-page-label {
  position: absolute;
  top: 120px; left: 80px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
}
.story-arc-label-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-micro);
  font-style: italic;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(201,169,110,0.7);
}
.story-arc-label-slash  { color: rgba(201,169,110,0.3); font-size: var(--fs-micro); }
.story-arc-label-ja {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  color: rgba(245,240,232,0.5);
  font-weight: 300;
}

/* ヒーローテキスト */
.story-arc-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 80px 120px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.story-arc-eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
}
.story-arc-eyebrow-line {
  display: block;
  width: 48px; height: 1px;
  background: var(--gold);
  opacity: 0.7;
}
.story-arc-eyebrow-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold);
  font-size: var(--fs-sm);
}
.story-arc-hero-title {
  font-family: 'Noto Serif JP', serif;
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--cream);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: 28px;
}
.story-arc-hero-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gold-light);
}
.story-arc-hero-sub {
  font-size: var(--fs-base);
  color: rgba(245,240,232,0.6);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-body);
  font-weight: 300;
}

/* スクロールインジケーター */
.story-arc-hero-scroll {
  position: absolute;
  bottom: 48px; right: 80px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.story-arc-scroll-line {
  display: block;
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollLineAnim 2s ease-in-out infinite;
}
.story-arc-scroll-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(201,169,110,0.5);
  writing-mode: vertical-rl;
}


/* ================================================================
   02. ARCHIVE — カテゴリフィルター
   ================================================================ */
.story-arc-section {
  background: var(--warm-white);
  padding: 120px 80px;
}
.story-arc-section-inner {
  max-width: 1300px;
  margin: 0 auto;
}
.story-arc-section-label {
  margin-bottom: 32px;
}

/* ——— フィルタータブ ——— */
.story-arc-filter {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 72px;
  border-bottom: 1px solid rgba(44,40,32,0.09);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.story-arc-filter::-webkit-scrollbar { display: none; }

.story-arc-filter-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 30px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.13em;
  color: rgba(44,40,32,0.35);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;         /* コンテナのborder-bottomに重ねる */
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.story-arc-filter-item:hover {
  color: var(--charcoal);
}
.story-arc-filter-item.is-active {
  color: var(--charcoal);
  font-weight: 500;
  border-bottom-color: var(--gold);
  /* アクティブタブに極薄の背景色 — 存在感を強調 */
  background: rgba(201,169,110,0.05);
}

/* カウントバッジ */
.story-arc-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  background: rgba(44,40,32,0.07);
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(44,40,32,0.38);
  font-weight: 400;
  transition: background 0.25s, color 0.25s;
}
.story-arc-filter-item.is-active .story-arc-filter-count {
  background: var(--gold);
  color: #2c2820;
}
.story-arc-filter-item:hover .story-arc-filter-count {
  background: rgba(44,40,32,0.12);
  color: var(--charcoal);
}

/* ——— AJAXローディング状態 ——— */
#story-arc-results {
  transition: opacity 0.3s ease;
}
#story-arc-results.is-loading {
  opacity: 0.3;
  pointer-events: none;
}


/* ================================================================
   03. ARCHIVE — カードグリッド
   ================================================================ */
.story-arc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;          /* 2px → 28px : エディトリアルな余白 */
}

/* ——— カード共通 ——— */
.story-arc-card {
  display: block;
  text-decoration: none;
  position: relative;
  background: var(--charcoal);
  overflow: hidden;
}
.story-arc-card-link {
  display: block;
  text-decoration: none;
}
.story-arc-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.story-arc-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.70) sepia(8%);
  transition: transform 1.4s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.7s;
}
.story-arc-card:hover .story-arc-card-image img {
  transform: scale(1.05);
  filter: brightness(0.50) sepia(5%);
}
/* グラデーションを高めまで伸ばし、テキスト可読性を確保 */
.story-arc-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(26,24,20,0.96) 0%,
    rgba(26,24,20,0.65) 40%,
    rgba(26,24,20,0.12) 68%,
    rgba(26,24,20,0.00) 100%
  );
  transition: background 0.5s;
}
.story-arc-card:hover .story-arc-card-overlay {
  background: linear-gradient(
    to top,
    rgba(26,24,20,0.98) 0%,
    rgba(26,24,20,0.75) 45%,
    rgba(26,24,20,0.18) 72%,
    rgba(26,24,20,0.00) 100%
  );
}
.story-arc-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 28px;   /* 横長カード用に収める */
  z-index: 1;
}
.story-arc-card-cat {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid rgba(201,169,110,0.38);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-micro);
  font-style: italic;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.story-arc-card-title {
  font-family: 'Noto Serif JP', serif;
  font-size: var(--fs-sm);   /* md → sm : 横長カードに適した行長 */
  font-weight: 400;
  color: var(--cream);
  line-height: 1.65;
  letter-spacing: var(--ls-normal);
  margin-bottom: 14px;

  /* 2行を超えたら省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-arc-card-arrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-micro);
  font-style: italic;
  letter-spacing: var(--ls-label);
  color: rgba(245,240,232,0.45);
  transition: color 0.4s, gap 0.4s;
}
.story-arc-card-arrow-line {
  flex: 1;
  max-width: 28px; height: 1px;
  background: currentColor;
  transition: max-width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.story-arc-card:hover .story-arc-card-arrow {
  color: var(--gold-light);
  gap: 16px;
}
.story-arc-card:hover .story-arc-card-arrow-line { max-width: 52px; }

/* ——— フィーチャーカード（最初の1枚・全幅） ——— */
.story-arc-card--featured {
  grid-column: 1 / -1;
}
.story-arc-card--featured .story-arc-card-image {
  aspect-ratio: 21/9;
}
.story-arc-card--featured .story-arc-card-body {
  padding: 44px 56px;
}
.story-arc-card--featured .story-arc-card-title {
  font-size: var(--fs-xl);    /* 大きく見せてフィーチャー感を出す */
  max-width: 720px;
  margin-bottom: 22px;
  display: block;             /* line-clamp を解除 */
  -webkit-line-clamp: unset;
  overflow: visible;
  line-height: var(--lh-tight);
}
.story-arc-card--featured .story-arc-card-cat {
  padding: 6px 18px;
  margin-bottom: 18px;
}

/* 投稿なし */
.story-arc-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 100px 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-md);
  font-style: italic;
  color: rgba(44,40,32,0.4);
  letter-spacing: var(--ls-label);
}


/* ================================================================
   04. ARCHIVE — ページネーション & フッター
   ================================================================ */
.story-arc-pagination {
  margin-top: 80px;
  padding-top: 60px;
  border-top: 1px solid rgba(44,40,32,0.08);
  display: flex;
  justify-content: center;
}
.story-arc-pagination .nav-links {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.story-arc-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; height: 44px;
  padding: 0 12px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--text-light);
  text-decoration: none;
  border: 1px solid rgba(44,40,32,0.12);
  transition: all 0.35s;
}
.story-arc-pagination .page-numbers:hover,
.story-arc-pagination .page-numbers.current {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--charcoal);
}


/* ================================================================
   05. CATEGORY ARCHIVE — ヒーロー（taxonomy-story_cat.php）
   ================================================================ */
.story-cat-hero {
  background: var(--charcoal);
  padding: 200px 80px 120px;
  position: relative;
  overflow: hidden;
}
.story-cat-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(201,169,110,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(201,169,110,0.04) 0%, transparent 50%);
  pointer-events: none;
}
.story-cat-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
}
.story-cat-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 48px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.story-cat-breadcrumb a {
  color: rgba(201,169,110,0.6);
  text-decoration: none;
  transition: color 0.3s;
}
.story-cat-breadcrumb a:hover { color: var(--gold); }
.story-cat-breadcrumb-sep { color: rgba(201,169,110,0.25); }
.story-cat-breadcrumb span:last-child { color: rgba(245,240,232,0.5); }
.story-cat-title {
  font-family: 'Noto Serif JP', serif;
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--cream);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-top: 28px;
}
.story-cat-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gold-light);
}
.story-cat-desc {
  margin-top: 36px;
  font-size: var(--fs-base);
  color: rgba(245,240,232,0.5);
  font-weight: 300;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  max-width: 640px;
}


/* ================================================================
   06. SINGLE — HERO
   ================================================================ */
.story-single-hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.story-single-hero-bg {
  position: absolute; inset: 0;
}
.story-single-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.55) sepia(10%);
  transform: scale(1.04);
  animation: heroZoom 14s ease-out forwards;
}
.story-single-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(26,24,20,0.97) 0%,
    rgba(26,24,20,0.50) 45%,
    rgba(26,24,20,0.25) 100%
  );
}
/* 画像なし（フォールバック）*/
.story-single-hero--no-image {
  background: var(--charcoal);
}
.story-single-hero--no-image .story-single-hero-overlay {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(201,169,110,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(201,169,110,0.05) 0%, transparent 50%);
}

/* パンくずリスト */
.story-single-breadcrumb {
  position: absolute;
  top: 120px; left: 80px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.story-single-breadcrumb a {
  color: rgba(201,169,110,0.65);
  text-decoration: none;
  transition: color 0.3s;
}
.story-single-breadcrumb a:hover { color: var(--gold); }
.story-single-breadcrumb-sep { color: rgba(201,169,110,0.25); }

/* ヒーローテキスト */
.story-single-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 80px 120px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.story-single-cat {
  display: inline-block;
  padding: 6px 20px;
  border: 1px solid rgba(201,169,110,0.45);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-micro);
  font-style: italic;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
.story-single-title {
  font-family: 'Noto Serif JP', serif;
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--cream);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: 28px;
  max-width: 820px;
}
.story-single-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gold-light);
}
.story-single-hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-sm);
  color: rgba(245,240,232,0.45);
  letter-spacing: var(--ls-wide);
  font-weight: 300;
}
.story-single-hero-meta-sep { color: rgba(201,169,110,0.3); }

/* スクロールインジケーター */
.story-single-hero-scroll {
  position: absolute;
  bottom: 48px; right: 80px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.story-scroll-line {
  display: block;
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollLineAnim 2s ease-in-out infinite;
}
.story-scroll-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(201,169,110,0.5);
  writing-mode: vertical-rl;
}


/* ================================================================
   07. SINGLE — メタバー（ヒーロー直下）
   ================================================================ */
.story-single-meta-bar {
  background: var(--cream);
  border-bottom: 1px solid rgba(44,40,32,0.06);
}
.story-single-meta-bar-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 28px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.story-single-meta-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.story-single-meta-date {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-micro);
  font-style: italic;
  letter-spacing: var(--ls-label);
  color: rgba(44,40,32,0.4);
}
.story-single-meta-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,169,110,0.3);
  padding-bottom: 2px;
  transition: border-color 0.3s;
}
.story-single-meta-cat:hover { border-color: var(--gold); }
.story-single-meta-sep {
  color: rgba(44,40,32,0.2);
  font-size: var(--fs-micro);
}
.story-single-meta-back {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-light);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.6;
  transition: opacity 0.3s, color 0.3s;
}
.story-single-meta-back:hover { opacity: 1; color: var(--gold); }


/* ================================================================
   08. SINGLE — コンテンツ
   ================================================================ */
.story-single-content {
  background: var(--warm-white);
  padding: 120px 80px;
}
.story-single-content-inner {
  max-width: 820px;
  margin: 0 auto;
}

/* イントロ（excerpt をスタイリング）*/
.story-single-intro {
  position: relative;
  margin-bottom: 80px;
  padding: 52px 60px;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  overflow: hidden;
}
.story-single-intro::before {
  content: '\201C';
  font-family: 'Cormorant Garamond', serif;
  font-size: 160px;
  color: var(--gold);
  opacity: 0.08;
  position: absolute;
  top: -20px; left: 16px;
  line-height: 1;
  pointer-events: none;
}
.story-single-intro-text {
  font-family: 'Noto Serif JP', serif;
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--text);
  line-height: 2;
  letter-spacing: var(--ls-normal);
  position: relative;
  z-index: 1;
}

/* 本文 */
.story-single-body p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-light);
  font-weight: 300;
  letter-spacing: var(--ls-normal);
  margin-bottom: 32px;
}
.story-single-body p:last-child { margin-bottom: 0; }
.story-single-body h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--text);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-normal);
  margin: 64px 0 24px;
  padding-top: 64px;
  border-top: 1px solid rgba(44,40,32,0.08);
}
.story-single-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.story-single-body h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--text);
  line-height: var(--lh-heading);
  margin: 48px 0 18px;
}

/* 動画埋め込み（YouTube / Vimeo oEmbed）*/
.story-single-body .wp-block-embed,
.story-single-body figure.wp-block-embed {
  margin: 60px 0;
  background: var(--charcoal);
  overflow: hidden;
}
.story-single-body .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.story-single-body .wp-block-embed__wrapper iframe,
.story-single-body iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
/* Classic Editor の oEmbed */
.story-single-body .wp-block-embed-youtube .wp-block-embed__wrapper,
.story-single-body .wp-block-embed-vimeo .wp-block-embed__wrapper {
  padding-bottom: 56.25%;
}

/* 引用 blockquote */
.story-single-body blockquote,
.story-single-body .wp-block-quote {
  margin: 64px -40px;
  padding: 48px 56px;
  background: var(--cream);
  border: none;
  border-left: 3px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.story-single-body blockquote::before,
.story-single-body .wp-block-quote::before {
  content: '\201C';
  font-family: 'Cormorant Garamond', serif;
  font-size: 120px;
  color: var(--gold);
  opacity: 0.1;
  position: absolute;
  top: 0; left: 20px;
  line-height: 1;
  pointer-events: none;
}
.story-single-body blockquote p,
.story-single-body .wp-block-quote p {
  font-family: 'Noto Serif JP', serif;
  font-size: var(--fs-md) !important;
  font-weight: 400;
  color: var(--text) !important;
  line-height: 2 !important;
  letter-spacing: var(--ls-normal);
  margin-bottom: 0 !important;
  position: relative;
  z-index: 1;
}
.story-single-body blockquote cite,
.story-single-body .wp-block-quote cite {
  display: block;
  margin-top: 16px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: rgba(44,40,32,0.4);
  font-style: normal;
  position: relative;
  z-index: 1;
}

/* インライン画像 */
.story-single-body img {
  width: 100%; height: auto;
  display: block;
  margin-bottom: 8px;
}
.story-single-body figure { margin-bottom: 48px; }
.story-single-body figcaption {
  font-size: var(--fs-micro);
  color: rgba(44,40,32,0.4);
  letter-spacing: var(--ls-wide);
  text-align: center;
  margin-top: 12px;
  font-style: italic;
}


/* ================================================================
   09. SINGLE — ナビゲーション（前後）
   ================================================================ */
.story-single-nav {
  background: var(--warm-white);
  border-top: 1px solid rgba(44,40,32,0.06);
  padding: 60px 80px;
}
.story-single-nav-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.story-single-nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.35s, gap 0.35s;
  flex: 1;
}
.story-single-nav-link:hover { color: var(--gold); }
.story-single-nav-link--next {
  justify-content: flex-end;
  text-align: right;
}
.story-single-nav-link--prev:hover { gap: 20px; }
.story-single-nav-link--next:hover { gap: 20px; }
.story-single-nav-label {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  color: var(--text);
  line-height: var(--lh-heading);
  margin-top: 6px;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-normal);
  text-transform: none;
}
.story-single-nav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.story-single-nav-center a {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-sm);
  font-style: italic;
  color: rgba(44,40,32,0.35);
  text-decoration: none;
  letter-spacing: var(--ls-label);
  transition: color 0.3s;
}
.story-single-nav-center a:hover { color: var(--gold); }
.story-single-nav-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(201,169,110,0.3);
}


/* ================================================================
   10. SINGLE — 関連ストーリー
   ================================================================ */
.story-related {
  background: var(--charcoal);
  padding: 140px 80px;
}
.story-related-inner {
  max-width: 1300px;
  margin: 0 auto;
}
.story-related-heading {
  font-family: 'Noto Serif JP', serif;
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--cream);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-normal);
  margin: 40px 0 80px;
}
.story-related-heading em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gold-light);
}
.story-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
/* 関連カードは 16:9 横長 */
.story-related-grid .story-arc-card-image {
  aspect-ratio: 16/9;
}

/* 「すべてのストーリーを見る」フッターリンク */
.story-arc-footer {
  text-align: center;
  margin-top: 80px;
  padding-top: 60px;
  border-top: 1px solid rgba(201,169,110,0.12);
}
.story-arc-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-sm);
  font-style: italic;
  letter-spacing: var(--ls-label);
  text-decoration: none;
  color: var(--gold);
  border-bottom: 1px solid rgba(201,169,110,0.35);
  padding-bottom: 6px;
  opacity: 0.75;
  transition: opacity 0.35s, border-color 0.35s, letter-spacing 0.4s;
}
.story-arc-footer-link:hover {
  opacity: 1;
  border-color: var(--gold);
  letter-spacing: calc(var(--ls-label) + 0.04em);
}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1100px) {
  /* 1100px 以下: グリッドギャップを縮小 */
  .story-arc-grid              { gap: 20px; }
  .story-single-body blockquote,
  .story-single-body .wp-block-quote {
    margin: 48px 0;
  }
  .story-single-body blockquote,
  .story-single-body .wp-block-quote { margin: 48px 0; }
}

@media (max-width: 900px) {
  /* Hero */
  .story-arc-hero-content  { padding: 0 28px 100px; }
  .story-arc-hero-scroll   { right: 28px; }
  .story-arc-page-label    { left: 28px; top: 100px; }

  /* Archive section */
  .story-arc-section       { padding: 72px 24px; }

  /* メインアーカイブグリッド: 1カラム・ギャップ 20px */
  .story-arc-grid              { grid-template-columns: 1fr; gap: 20px; }

  /* フィーチャーカードは 1カラム時はシネマ比をやめて 16:9 に */
  .story-arc-card--featured    { grid-column: auto; }
  .story-arc-card--featured .story-arc-card-image {
    aspect-ratio: 16/9;
  }
  .story-arc-card--featured .story-arc-card-body  { padding: 28px 28px; }
  .story-arc-card--featured .story-arc-card-title {
    font-size: var(--fs-md);
    max-width: none;
    -webkit-line-clamp: 3;
  }

  /* Category hero */
  .story-cat-hero          { padding: 160px 28px 80px; }

  /* Single hero */
  .story-single-hero-content { padding: 0 28px 100px; }
  .story-single-breadcrumb   { left: 28px; top: 100px; }
  .story-single-hero-scroll  { right: 28px; }

  /* Meta bar */
  .story-single-meta-bar-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 28px;
  }

  /* Content */
  .story-single-content    { padding: 80px 28px; }
  .story-single-intro      { padding: 36px 32px; }

  /* Nav */
  .story-single-nav        { padding: 48px 28px; }

  /* Related: 2カラム横長 */
  .story-related           { padding: 80px 28px; }
  .story-related-grid      { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  /* スマホ: カードを 3:2 にして縦に情報量を増やす */
  .story-arc-card-image    { aspect-ratio: 3/2; }
  .story-arc-card--featured .story-arc-card-image { aspect-ratio: 3/2; }

  /* スマホ: カード本文パディングを縮小 */
  .story-arc-card-body     { padding: 20px 22px; }
  .story-arc-card-title    { font-size: var(--fs-sm); }

  /* フィルタータブ: padding 縮小でタブを見やすく */
  .story-arc-filter-item   { padding: 14px 18px; }

  /* Related: 1カラムに */
  .story-related-grid      { grid-template-columns: 1fr; }

  /* Single nav */
  .story-single-nav-inner  {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .story-single-nav-link--next { justify-content: flex-start; }
}