/* journal/<slug>/index.html — JOURNAL 個別記事（長文インタビュー用） */

.journal-article-page {
  padding-bottom: 100px;
}

.journal-article-container {
  padding-inline: var(--sp-section-x);
}

/* --- head: 戻るリンク + 号数 + カテゴリ + タイトル --- */

.journal-article-head {
  max-width: 800px;
  margin-inline: auto;
  padding-top: calc(var(--h-header) + 50px);
}

.journal-article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-line);
  font-family: var(--font-grotesk);
  font-size: var(--fs-12);
  font-weight: 400;
  letter-spacing: 1.2px;
}

.journal-article-back::before {
  content: "";
  width: 20px;
  height: 1px;
  background: currentColor;
}

.journal-article-number {
  margin-top: 24px;
  color: var(--c-accent-deep);
  font-family: var(--font-grotesk);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 17.4px;
  letter-spacing: 1.2px;
}

.journal-article-category {
  margin-top: 8px;
  color: #828282;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 17.4px;
  letter-spacing: 1.2px;
}

.journal-article-title {
  margin-top: 15px;
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-30);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
  font-feature-settings: "palt";
}

/* --- lead: リード文 --- */

.journal-article-lead {
  max-width: 800px;
  margin: 40px auto 0;
}

.journal-article-lead p {
  color: var(--c-slate);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.journal-article-lead p + p {
  margin-top: 20px;
}

/* --- hero / セクション画像: 写真は 16:9 でトリミング。未着はグレープレースホルダー --- */

.journal-article-hero {
  max-width: 800px;
  margin: 50px auto 0;
}

.journal-article-ph {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--c-bg-alt);
}

/* プレースホルダーのリビール: 親 [data-reveal] の .is-visible 連動で
   スケール 1.04→1 + フェード（reveal.css と同じ 0.9s ease） */
[data-reveal] .journal-article-ph {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible .journal-article-ph {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] .journal-article-ph {
    transform: none;
    transition: opacity 0.9s ease;
    transition-delay: var(--reveal-delay, 0ms);
  }

  [data-reveal].is-visible .journal-article-ph {
    transform: none;
  }
}

/* fail-open: reveal.js が動かなかった場合は無条件表示（reveal.css と同方式） */
html:not(.js-reveal) [data-reveal] .journal-article-ph {
  opacity: 1;
  transform: none;
}

/* --- body: Q&A 本文 --- */

.journal-article-body {
  max-width: 800px;
  margin: 60px auto 0;
}

.journal-article-section + .journal-article-section {
  margin-top: 72px;
}

.journal-article-section h2 {
  padding-bottom: 14px;
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-21);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-feature-settings: "palt";
  border-bottom: 1px solid var(--c-line);
}

.journal-article-section h2 + .journal-article-ph {
  margin-top: 24px;
}

.journal-article-section p {
  margin-top: 20px;
  color: var(--c-slate);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.journal-article-section .journal-article-ph + p {
  margin-top: 32px;
}

/* 質問行（――で始まる行）。.journal-article-section p より詳細度を上げて色・サイズを勝たせる */
.journal-article-section .journal-article-q {
  margin-top: 32px;
  color: var(--c-ink);
  font-size: var(--fs-14);
}

.journal-article-q + p {
  margin-top: 12px;
}

/* --- foot: トップへ戻る --- */

.journal-article-foot {
  max-width: 800px;
  margin: 80px auto 0;
  text-align: left;
}

.journal-article-foot .view-all {
  display: inline-flex;
}

@media (hover: hover) {
  .journal-article-back {
    transition: color 180ms ease;
  }

  .journal-article-back:hover {
    color: var(--c-accent-deep);
  }
}

@media (max-width: 1024px) {
  .journal-article-container {
    padding-inline: var(--sp-section-x-tablet);
  }

  .journal-article-head {
    padding-top: calc(var(--h-header) + 32px);
  }

  .journal-article-hero {
    margin-top: 40px;
  }

  .journal-article-body {
    margin-top: 48px;
  }
}

@media (max-width: 560px) {
  .journal-article-page {
    padding-bottom: 64px;
  }

  .journal-article-container {
    padding-inline: var(--sp-section-x-mobile);
  }

  .journal-article-head {
    padding-top: calc(var(--h-header) + 24px);
  }

  .journal-article-title {
    font-size: var(--fs-26);
    line-height: 1.4;
  }

  .journal-article-hero {
    margin-top: 32px;
  }

  .journal-article-body {
    margin-top: 40px;
  }

  .journal-article-foot {
    margin-top: 56px;
  }
}

/* --- footer: このページは responsive.css を読まないため、1024px 以下で
   site-footer の絶対配置の子要素がはみ出す。responsive.css の .site-footer
   系ルールに準拠したレイアウトをここで用意する（005追補） --- */

@media (max-width: 1024px) {
  .site-footer {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 40px;
    height: auto;
    min-height: 0;
    padding: 72px clamp(24px, 6vw, 64px) 70px;
  }

  .site-footer__inner {
    display: contents;
  }

  .site-footer__past,
  .site-footer__credit,
  .site-footer__brand,
  .site-footer__brand p,
  .site-footer__brand img,
  .site-footer__logo-line1,
  .site-footer__logo-line2,
  .site-footer__logo-line3 {
    position: static;
    inset: auto;
    left: auto;
    top: auto;
    transform: none;
  }

  .site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .site-footer__brand img {
    width: min(300px, 80vw);
    height: auto;
  }

  .site-footer__logo-line2 {
    margin-top: -30px;
  }

  .site-footer__logo-line3 {
    margin-top: 10px;
  }

  .site-footer__brand p {
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: max-content;
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
  }

  .site-footer__past,
  .site-footer__credit {
    width: auto;
    color: #fff;
    white-space: normal;
  }

  .site-footer__past {
    grid-column: 1;
    grid-row: 2;
  }

  .site-footer__credit {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }
}

@media (max-width: 700px) {
  .site-footer {
    grid-template-columns: 1fr;
  }

  .site-footer__past,
  .site-footer__credit {
    grid-column: 1;
    text-align: left;
  }

  .site-footer__credit {
    grid-row: 3;
  }
}