@charset "UTF-8";
/* ==========================================================================

   落葉 / RAKUYOU  ―  Components

   記事ページ独自のパーツ。仕様書 §17〜§22 に対応する。
   すべて .rakuyou-* の名前で作ってあるので、Cocoonの既定スタイルと衝突しない。

   --------------------------------------------------------------------------
   C-1   Article Header       記事タイトルまわり          §18
   C-2   Lead                 リード文
   C-3   Work Info            カテゴリー別情報BOX          §19
   C-4   Preface              「この記事について」         §20
   C-5   Pull Quote           プルクオート                §21
   C-6   Note                 注釈
   C-7   Afterwords           余韻                       §22
   C-8   Author Profile       落葉プロフィール             §17
   C-9   Button               ボタン
   --------------------------------------------------------------------------

   ■ 使い方

   Gutenbergの「カスタムHTML」ブロックに、
   blocks/ フォルダのHTMLを貼り付けて使います。

   ========================================================================== */


/* ==========================================================================
   C-1   Article Header  ―  §18
   ========================================================================== */

.rakuyou-article-header {
  max-width: var(--rk-width-article);
  margin: 0 auto var(--rk-space-xl);
  text-align: center;
}

/* カテゴリーラベル（一般名称のみ・1段） */
.rakuyou-article-header__category {
  display: inline-block;
  margin-bottom: var(--rk-space-md);
  padding: 0.3em 1.1em;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-xs);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rakuyou-brass-deep);
  border: 1px solid var(--rakuyou-brass-light);
  border-radius: 999px;
  line-height: 1.8;
}

.rakuyou-article-header__title {
  margin: 0;
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-h1);
  font-weight: var(--rk-weight-bold);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--rk-text);
}

/* 副題（連載の号数や、タイトルを補う一行） */
.rakuyou-article-header__subtitle {
  margin-top: var(--rk-space-md);
  font-family: var(--rk-font-body);
  font-size: var(--rk-text-lead);
  font-weight: var(--rk-weight-normal);
  line-height: 1.8;
  color: var(--rakuyou-wood);
}

/* メタ情報 ― 2026.08.01 / 更新 2026.08.05 / 読了時間 8分 / 執筆：落葉 */
.rakuyou-article-header__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5em 1.25em;
  margin-top: var(--rk-space-lg);
  padding-top: var(--rk-space-md);
  border-top: 1px solid var(--rk-line);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text-muted);
  line-height: 1.8;
}

/* 項目のあいだに真鍮の小さな点を打つ */
.rakuyou-article-header__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 1.25em;
  border-radius: 50%;
  background-color: var(--rakuyou-brass);
  vertical-align: 0.35em;
}

.rakuyou-article-header__meta time {
  font-family: var(--rk-font-latin);
  font-size: 1.05em;
  letter-spacing: 0.06em;
}


/* ==========================================================================
   C-2   Lead  ―  リード文
   ========================================================================== */

.rakuyou-lead {
  max-width: var(--rk-width-article);
  margin: 0 auto var(--rk-space-xl);
  font-size: var(--rk-text-lead);
  line-height: 1.95;
  letter-spacing: var(--rk-tracking-normal);
  color: var(--rk-text);
}

.rakuyou-lead p {
  margin-bottom: 1.4em;
}

.rakuyou-lead p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   C-3   Work Info  ―  カテゴリー別情報BOX  §19
   映画なら作品名・監督・公開年、美術なら作者・技法・所蔵先、
   旅なら場所・訪問時期・費用、というように中身を入れ替えて使う。
   ========================================================================== */

.rakuyou-workinfo {
  margin-block: var(--rk-space-lg);
  padding: var(--rk-space-md) var(--rk-space-lg);
  background-color: var(--rk-bg-subtle);
  border-left: 2px solid var(--rakuyou-brass);
  border-radius: 0 var(--rk-radius-md) var(--rk-radius-md) 0;
}

.rakuyou-workinfo__label {
  display: block;
  margin-bottom: var(--rk-space-sm);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-xs);
  letter-spacing: var(--rk-tracking-widest);
  color: var(--rakuyou-brass-deep);
  line-height: 1;
}

/* 定義リスト。項目名と内容を2列に並べる */
.rakuyou-workinfo__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65em 1.5em;
  margin: 0;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-base);
  line-height: 1.75;
}

.rakuyou-workinfo__list dt {
  margin: 0;
  color: var(--rk-text-muted);
  font-weight: var(--rk-weight-normal);
  letter-spacing: var(--rk-tracking-wide);
  white-space: nowrap;
}

.rakuyou-workinfo__list dd {
  margin: 0;
  color: var(--rk-text);
}


/* ==========================================================================
   C-3b   Work Info Grid  ―  作品情報（アイコン付き4項目）  §19

   映画：公開年 / 監督 / 上映時間 / ジャンル
   美術：作者 / 制作年 / 技法 / 所蔵先
   旅　：場所 / 訪問時期 / 交通 / 費用

   配信サービスは入れない。契約が数か月で変わり、放置すると嘘になるため。
   ここに置くのは「変わらない事実」だけにする。
   ========================================================================== */

.entry-content .rakuyou-spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-block: var(--rk-space-lg);
  padding: 0;
  background-color: var(--rk-bg-content);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-md);
  overflow: hidden;
  list-style: none;
}

.entry-content .rakuyou-spec li {
  margin: 0;
  padding: var(--rk-space-md) var(--rk-space-sm);
  list-style: none;
  text-align: center;
  border-right: 1px solid var(--rk-line);
}

/* 項目が3つの回（味わいひと匙）は3列にする */
.entry-content .rakuyou-spec--3 {
  grid-template-columns: repeat(3, 1fr);
}

.entry-content .rakuyou-spec li:last-child {
  border-right: 0;
}

.entry-content .rakuyou-spec li::marker {
  content: none;
}

.entry-content .rakuyou-spec .fa {
  display: block;
  margin-bottom: 0.5em;
  font-size: 1.0625rem;
  color: var(--rakuyou-brass);
  line-height: 1;
}

/* 項目名（上映時間・監督 など） */
.entry-content .rakuyou-spec b {
  display: block;
  margin-bottom: 0.35em;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-xs);
  font-weight: var(--rk-weight-normal);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text-muted);
}

/* 値
   ⚠ :not(.fa) が必須。
     アイコンも <span class="fa"> なので、単に span を指定すると
     FontAwesomeの書体を上書きしてしまい、アイコンが豆腐（□）になる。
     私のセレクタ（0,2,1）のほうが .fa（0,1,0）より強いため。 */
.entry-content .rakuyou-spec span:not(.fa) {
  display: block;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-base);
  font-weight: var(--rk-weight-medium);
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--rk-text);
}

/* 注釈（「劇場公開は2024年」など） */
.entry-content p.rakuyou-spec__note {
  margin: calc(var(--rk-space-md) * -1 + 0.4rem) 0 var(--rk-space-lg);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-xs);
  line-height: 1.8;
  color: var(--rk-text-muted);
  text-align: right;
}


/* ==========================================================================
   C-3c   Reading Time  ―  読了時間

   「※ゆっくり読んでも、紅茶1杯分です。」
   コーヒーではなく紅茶。仕様書§9。
   ========================================================================== */

.entry-content .rakuyou-readtime {
  margin-block: var(--rk-space-lg);
  padding: var(--rk-space-sm) var(--rk-space-md);
  background-color: var(--rk-bg-subtle);
  border-left: 2px solid var(--rakuyou-brass);
  border-radius: 0 var(--rk-radius-md) var(--rk-radius-md) 0;
}

.entry-content p.rakuyou-readtime__main {
  margin: 0;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-base);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text);
}

.entry-content p.rakuyou-readtime__main .fa {
  margin-right: 0.5em;
  color: var(--rakuyou-brass);
}

.entry-content p.rakuyou-readtime__sub {
  margin: 0.35em 0 0;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-xs);
  line-height: 1.7;
  color: var(--rk-text-muted);
}


/* ==========================================================================
   C-4   Preface  ―  「この記事について」  §20
   本文の前に、この記事で何を書くのかを2〜4行で説明する。
   ========================================================================== */

.rakuyou-preface {
  margin-block: var(--rk-space-lg);
  padding: var(--rk-space-md) var(--rk-space-lg);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-md);
  background-color: transparent;
}

.rakuyou-preface__label {
  display: block;
  margin-bottom: var(--rk-space-sm);
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-base);
  font-weight: var(--rk-weight-bold);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text);
}

.rakuyou-preface__body {
  font-size: 0.96em;
  line-height: 1.85;
  color: var(--rk-text);
}

.rakuyou-preface__body p {
  margin-bottom: 0.9em;
}

.rakuyou-preface__body p:last-child {
  margin-bottom: 0;
}

/* ネタバレ注記 */
.rakuyou-preface__caution {
  display: block;
  margin-top: var(--rk-space-sm);
  padding-top: var(--rk-space-sm);
  border-top: 1px dashed var(--rk-line);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  line-height: 1.75;
  color: var(--rakuyou-wood);
}


/* ==========================================================================
   C-5   Pull Quote  ―  §21
   記事の重要な一文を大きく見せ、雑誌的な誌面をつくる。
   囲みは作らない。文字そのものを見せる。
   ========================================================================== */

.rakuyou-pullquote {
  margin-block: var(--rk-space-xl);
  padding-block: var(--rk-space-md);
  border-top: 1px solid var(--rk-line);
  border-bottom: 1px solid var(--rk-line);
  text-align: center;
}

.rakuyou-pullquote p {
  margin: 0;
  font-family: var(--rk-font-display);
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.5rem);
  font-weight: var(--rk-weight-bold);
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--rakuyou-wood);
}

.rakuyou-pullquote cite {
  display: block;
  margin-top: var(--rk-space-sm);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  font-style: normal;
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text-muted);
}


/* ==========================================================================
   C-6   Note  ―  注釈
   ========================================================================== */

.rakuyou-note {
  margin-block: var(--rk-space-md);
  padding-left: var(--rk-space-md);
  border-left: 1px solid var(--rk-line);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  line-height: 1.85;
  color: var(--rk-text-muted);
}


/* ==========================================================================
   C-7   Afterwords  ―  余韻  §22
   本文で論理的に整理したあと、
   「書き終えた今、自分の中に何が残っているか」を書く場所。
   RAKUYOU独自の要素なので、本文とは明確に空気を変える。
   ========================================================================== */

.rakuyou-afterwords {
  max-width: var(--rk-width-article);
  margin: var(--rk-space-2xl) auto 0;
  padding-top: var(--rk-space-xl);
  border-top: 1px solid var(--rk-line);
  position: relative;
}

/* --- 画像を敷いた「余韻」（§22・モックアップの形）------------------------

   背景に写真を敷くので、文字は必ずアイボリー。
   写真がどんな明るさでも読めるよう、暗い膜を必ず1枚かける。

   ■ 画像の差し替え方
     下の --rk-afterimage の url() を書き換えるだけ。全記事に反映される。

   ■ なぜ記事ごとの指定にしないか
     WordPressのセキュリティ機能（KSES）が、記事内の style 属性から
     CSSカスタムプロパティを保存時に削除してしまう。
     実際に試して削除されることを確認済み。
     全記事で同じ絵を使うので、ここに1か所書くほうが差し替えも楽。

   ■ 画像のURLについて
     日本語のファイル名は必ずパーセントエンコードしたものを使うこと。 */

:root {
  --rk-afterimage: url('https://solitaryleaflog.com/wp-content/uploads/2026/08/ChatGPT-Image-2026%E5%B9%B48%E6%9C%8813%E6%97%A5-21_23_52.png');
}

.entry-content .rakuyou-afterwords--image {
  position: relative;
  margin: var(--rk-space-2xl) auto 0;
  padding: var(--rk-space-xl) var(--rk-space-lg);
  border: 0;
  border-radius: var(--rk-radius-md);
  overflow: hidden;
  background-color: var(--rakuyou-dark);
  background-image:
    linear-gradient(100deg, rgba(35,27,20,0.92) 0%, rgba(35,27,20,0.74) 55%, rgba(35,27,20,0.62) 100%),
    var(--rk-afterimage, none);
  background-size: cover;
  background-position: center;
  text-align: left;
}

.entry-content .rakuyou-afterwords--image .rakuyou-afterwords__en {
  display: block;
  margin: 0 0 0.15em;
  font-family: var(--rk-font-script);
  font-size: 1.625rem;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--rakuyou-brass);
}

.entry-content .rakuyou-afterwords--image .rakuyou-afterwords__label {
  display: block;
  margin: 0 0 var(--rk-space-md);
  padding-bottom: var(--rk-space-sm);
  border-bottom: 1px solid rgba(167, 131, 69, 0.4);
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-base);
  font-weight: var(--rk-weight-bold);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rakuyou-ivory);
  text-align: left;
}

.entry-content .rakuyou-afterwords--image .rakuyou-afterwords__label::before {
  content: none;
}

.entry-content .rakuyou-afterwords--image p {
  margin: 0 0 1.2em;
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-lead);
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--rakuyou-ivory);
}

.entry-content .rakuyou-afterwords--image p:last-child {
  margin-bottom: 0;
}

/* 最後の問いかけ */
.entry-content .rakuyou-afterwords--image p.rakuyou-afterwords__ask {
  margin-top: var(--rk-space-md);
  padding-top: var(--rk-space-md);
  border-top: 1px solid rgba(216, 207, 192, 0.2);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  color: var(--rakuyou-brass-light);
}

@media screen and (max-width: 560px) {

  .entry-content .rakuyou-afterwords--image {
    padding: var(--rk-space-lg) var(--rk-space-md);
  }

  /* スマホでは横方向のグラデーションが効かないので、全面に膜をかける */
  .entry-content .rakuyou-afterwords--image {
    background-image:
      linear-gradient(rgba(35,27,20,0.88), rgba(35,27,20,0.88)),
      var(--rk-afterimage, none);
  }
}

/* 見出し「余韻」。中央に置き、上に真鍮の細い縦線を落とす */
.rakuyou-afterwords__label {
  display: block;
  margin-bottom: var(--rk-space-lg);
  text-align: center;
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-h3);
  font-weight: var(--rk-weight-bold);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rakuyou-wood);
}

.rakuyou-afterwords__label::before {
  content: "";
  display: block;
  width: 1px;
  height: 2rem;
  margin: 0 auto var(--rk-space-md);
  background: linear-gradient(
    to bottom,
    transparent,
    var(--rakuyou-brass)
  );
}

.rakuyou-afterwords__body {
  font-size: var(--rk-text-body);
  line-height: var(--rk-leading-loose);   /* 本文より行間を広く */
  letter-spacing: 0.05em;
  color: var(--rk-text);
}

.rakuyou-afterwords__body p {
  margin-bottom: 1.9em;
}

.rakuyou-afterwords__body p:last-child {
  margin-bottom: 0;
}

/* 署名 */
.rakuyou-afterwords__sign {
  display: block;
  margin-top: var(--rk-space-lg);
  text-align: right;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text-muted);
}


/* ==========================================================================
   C-8   Author Profile  ―  §17 記事末尾の落葉プロフィール
   ========================================================================== */

.rakuyou-profile {
  display: flex;
  gap: var(--rk-space-md);
  align-items: flex-start;
  max-width: var(--rk-width-article);
  margin: var(--rk-space-2xl) auto 0;
  padding: var(--rk-space-lg);
  background-color: var(--rk-bg-content);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-md);
}

.rakuyou-profile__avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--rk-bg-subtle);
}

.rakuyou-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.rakuyou-profile__body {
  flex: 1;
  min-width: 0;
}

.rakuyou-profile__name {
  margin: 0 0 0.15em;
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-base);
  font-weight: var(--rk-weight-bold);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text);
}

.rakuyou-profile__tagline {
  margin: 0 0 var(--rk-space-sm);
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-sm);
  color: var(--rakuyou-brass-deep);
  letter-spacing: var(--rk-tracking-wide);
}

.rakuyou-profile__text {
  margin: 0;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  line-height: 1.9;
  color: var(--rk-text-muted);
}

.rakuyou-profile__link {
  display: inline-block;
  margin-top: var(--rk-space-sm);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rakuyou-brass-deep);
  border-bottom: 1px solid var(--rakuyou-brass-light);
  padding-bottom: 0.15em;
}

.rakuyou-profile__link:hover {
  border-bottom-color: var(--rakuyou-brass);
}

.rakuyou-profile__link::after {
  content: " →";
}


/* ==========================================================================
   C-9   Button
   ========================================================================== */

.rakuyou-button {
  display: inline-block;
  padding: 0.85em 2.25em;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-base);
  letter-spacing: var(--rk-tracking-wide);
  line-height: 1.6;
  color: var(--rakuyou-brass);
  background-color: transparent;
  border: 1px solid var(--rakuyou-brass);
  border-radius: var(--rk-radius-sm);
  cursor: pointer;
  transition: color var(--rk-transition),
              background-color var(--rk-transition),
              border-color var(--rk-transition);
}

.rakuyou-button:hover {
  color: var(--rakuyou-dark);
  background-color: var(--rakuyou-brass-light);
  border-color: var(--rakuyou-brass);
}

/* 濃い背景の上に置くとき */
.rakuyou-button--inverse {
  color: var(--rakuyou-ivory);
  border-color: rgba(244, 240, 230, 0.45);
}

.rakuyou-button--inverse:hover {
  color: var(--rakuyou-dark);
  background-color: var(--rakuyou-ivory);
  border-color: var(--rakuyou-ivory);
}

/* テキストリンク型 */
.rakuyou-button--text {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--rakuyou-brass-light);
  border-radius: 0;
  padding-bottom: 0.2em;
}

.rakuyou-button--text:hover {
  background-color: transparent;
  color: var(--rakuyou-wood);
  border-bottom-color: var(--rakuyou-brass);
}


/* ==========================================================================
   C-10   Gutenberg 対応

   rakuyou-patterns.php で登録したパターンは、
   core/group と core/paragraph の組み合わせで作られています。
   HTMLを書かずに編集できる代わりに、要素が <p> や <div> になるため、
   .entry-content の既定スタイル（p の余白など）に負けないよう
   ここで打ち消しています。

   セレクタが長いのは、単に詳細度を上げるためです。
   ========================================================================== */

/* --- グループブロックの余計な余白を消す -------------------------------- */

.entry-content .rakuyou-workinfo,
.entry-content .rakuyou-preface,
.entry-content .rakuyou-pullquote,
.entry-content .rakuyou-afterwords {
  box-sizing: border-box;
}

.entry-content .rakuyou-afterwords__body.wp-block-group {
  margin-block: 0;
}

/* --- ラベルが <p> になる場合 -------------------------------------------- */

.entry-content p.rakuyou-workinfo__label {
  margin-top: 0;
  margin-bottom: var(--rk-space-sm);
  font-size: var(--rk-text-xs);
  line-height: 1;
}

.entry-content p.rakuyou-preface__label {
  margin-top: 0;
  margin-bottom: var(--rk-space-sm);
}

.entry-content p.rakuyou-afterwords__label {
  margin-top: 0;
  margin-bottom: var(--rk-space-lg);
}

.entry-content p.rakuyou-afterwords__sign {
  margin-top: var(--rk-space-lg);
  margin-bottom: 0;
}

.entry-content p.rakuyou-preface__caution {
  margin-bottom: 0;
}

/* --- 本文が <p> そのものになる場合 -------------------------------------- */

.entry-content p.rakuyou-preface__body {
  margin-bottom: 0;
}

.entry-content p.rakuyou-preface__body + p.rakuyou-preface__caution {
  margin-top: var(--rk-space-sm);
}

.entry-content p.rakuyou-note {
  margin-block: var(--rk-space-md);
}

/* --- 作品情報を <ul> で書く場合 ------------------------------------------
   dl より list ブロックのほうが編集しやすいため、
   パターンでは箇条書きを使っています。見た目は情報リストとして整えます。
   ------------------------------------------------------------------------ */

.entry-content .rakuyou-workinfo ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-base);
  line-height: 1.9;
}

.entry-content .rakuyou-workinfo ul li {
  margin-bottom: 0.35em;
  padding-left: 1em;
  position: relative;
  list-style: none;
  color: var(--rk-text);
}

.entry-content .rakuyou-workinfo ul li:last-child {
  margin-bottom: 0;
}

.entry-content .rakuyou-workinfo ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 4px;
  height: 1px;
  background-color: var(--rakuyou-brass);
}

/* --- プルクオートが group + p になる場合 -------------------------------- */

.entry-content .rakuyou-pullquote p {
  margin-bottom: 0;
}

.entry-content .rakuyou-pullquote p + p {
  margin-top: 0.8em;
}

/* --- 余韻の中の段落 ------------------------------------------------------ */

.entry-content .rakuyou-afterwords__body p {
  margin-bottom: 1.9em;
  line-height: var(--rk-leading-loose);
  letter-spacing: 0.05em;
}

.entry-content .rakuyou-afterwords__body p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   C-10b   Related Links  ―  あわせて読みたい（§23）

   Cocoonの「関連記事」は同じカテゴリーの記事を機械的に並べる。
   仕様書§23は「同一カテゴリーの記事だけを出さない」「落葉という人物の
   好奇心を辿る導線を作る」と定めているので、こちらを別に置く。

   本文の最後（余韻の後）に入る。記事本文の一部として保存されるため、
   テーマを変えても残る。
   ========================================================================== */

.entry-content .rakuyou-related {
  max-width: var(--rk-width-article);
  margin: var(--rk-space-2xl) auto 0;
  padding: var(--rk-space-md) var(--rk-space-lg);
  background-color: var(--rk-bg-content);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-md);
}

.entry-content p.rakuyou-related__label {
  margin: 0 0 var(--rk-space-sm);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rakuyou-brass);
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-base);
  font-weight: var(--rk-weight-bold);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text);
}

.entry-content .rakuyou-related ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry-content .rakuyou-related li {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rk-line);
}

.entry-content .rakuyou-related li:first-child {
  border-top: 0;
}

.entry-content .rakuyou-related li::marker {
  content: none;
}

.entry-content .rakuyou-related a {
  display: block;
  padding: 0.85em 0.25em;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-base);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--rk-text);
  border: 0;
  transition: color var(--rk-transition), padding-left var(--rk-transition);
}

.entry-content .rakuyou-related a:hover {
  color: var(--rakuyou-brass-deep);
  padding-left: 0.7em;
  border: 0;
}

/* カテゴリー名を先頭に小さく置く。分野をまたいでいることが一目で分かる */
.entry-content .rakuyou-related a strong {
  display: inline-block;
  min-width: 5.5em;
  margin-right: 0.6em;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-xs);
  font-weight: var(--rk-weight-normal);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rakuyou-brass-deep);
}

@media screen and (max-width: 560px) {

  .entry-content .rakuyou-related {
    padding: var(--rk-space-md);
  }

  .entry-content .rakuyou-related a strong {
    display: block;
    min-width: 0;
    margin: 0 0 0.2em;
  }
}


/* ==========================================================================
   C-11   About Page   ―  §25

   blocks/about-page.html を貼った固定ページのスタイル。
   「読み物」として、記事本文よりさらに静かに組む。
   ========================================================================== */

.rakuyou-about-page {
  max-width: var(--rk-width-article);
  margin-inline: auto;
}

/* Cocoonが出すページタイトル（「このブログについて」）を、このページでは隠す。

   理由は2つ。
     ① 扉「About ／ 自分を愛し、世界を面白がる。」と内容が重複して見える
     ② h1 が2つになる。display:none にすれば読み上げの対象から外れるので、
        スクリーンリーダーには見出しが1つだけ届く

   :has() は「中に .rakuyou-about-page を含む記事」という指定。
   これでAboutページだけを狙い撃ちでき、他の固定ページには影響しない。
   （日付・SNSシェアも article-header の中にあるので一緒に消える） */
.article:has(.rakuyou-about-page) .article-header,
.article:has(.rakuyou-about-page) .entry-title,
.article:has(.rakuyou-about-page) .date-tags {
  display: none;
}

/* --- 扉 ----------------------------------------------------------------- */

.rakuyou-about-page .rk-about-hero {
  margin-bottom: var(--rk-space-2xl);
  padding-bottom: var(--rk-space-xl);
  border-bottom: 1px solid var(--rk-line);
  text-align: center;
}

.rakuyou-about-page .rk-about-hero__en {
  margin-bottom: var(--rk-space-md);
  font-family: var(--rk-font-latin);
  font-size: var(--rk-text-xs);
  letter-spacing: var(--rk-tracking-widest);
  text-transform: uppercase;
  color: var(--rakuyou-brass);
  line-height: 1;
}

.entry-content .rakuyou-about-page .rk-about-hero__title {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--rk-font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  font-weight: var(--rk-weight-bold);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--rk-text);
}

.entry-content .rakuyou-about-page .rk-about-hero__title::after {
  display: none;   /* 記事H2の真鍮線は、ここでは出さない */
}

.rakuyou-about-page .rk-about-hero__sub {
  margin: var(--rk-space-md) 0 0;
  font-family: var(--rk-font-display);
  font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem);
  letter-spacing: 0.16em;
  color: var(--rakuyou-brass-deep);
}

/* --- 各節 --------------------------------------------------------------- */

.rakuyou-about-page .rk-about-section {
  margin-bottom: var(--rk-space-2xl);
}

.entry-content .rakuyou-about-page .rk-about-section__title {
  margin: 0 0 var(--rk-space-lg);
  padding: 0 0 var(--rk-space-sm);
  font-size: clamp(1.1875rem, 1.08rem + 0.5vw, 1.4375rem);
  letter-spacing: 0.09em;
  border-bottom: 0;
}

.entry-content .rakuyou-about-page .rk-about-section__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.75rem;
  height: 1px;
  background-color: var(--rakuyou-brass);
}

.rakuyou-about-page .rk-about-section p {
  line-height: 2;
  letter-spacing: 0.05em;
}

/* Love yourself. の節だけ、地色を変えて息を変える */
.rakuyou-about-page .rk-about-section--quiet {
  padding: var(--rk-space-lg);
  background-color: var(--rk-bg-content);
  border-radius: var(--rk-radius-md);
}

/* --- 好奇心の棚（リンク一覧） -------------------------------------------- */

.entry-content .rakuyou-about-page .rk-about-shelf {
  margin-top: var(--rk-space-lg);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rk-line);
}

.entry-content .rakuyou-about-page .rk-about-shelf li {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rk-line);
}

.entry-content .rakuyou-about-page .rk-about-shelf li::marker {
  content: none;
}

.entry-content .rakuyou-about-page .rk-about-shelf a {
  display: block;
  padding: 0.9em 0.25em;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-base);
  letter-spacing: 0.06em;
  color: var(--rk-text-muted);
  border: 0;
  transition: color var(--rk-transition), padding-left var(--rk-transition);
}

.entry-content .rakuyou-about-page .rk-about-shelf a:hover {
  color: var(--rakuyou-brass-deep);
  padding-left: 0.75em;
  border: 0;
}

.entry-content .rakuyou-about-page .rk-about-shelf strong {
  font-family: var(--rk-font-display);
  font-size: 1.0625em;
  font-weight: var(--rk-weight-bold);
  color: var(--rk-text);
  margin-right: 0.2em;
}

/* --- 挨拶 --------------------------------------------------------------- */

.rakuyou-about-page .rk-about-greeting {
  margin-top: var(--rk-space-2xl);
  padding: var(--rk-space-xl) var(--rk-space-lg);
  border-top: 1px solid var(--rk-line);
  border-bottom: 1px solid var(--rk-line);
  text-align: center;
}

.rakuyou-about-page .rk-about-greeting p {
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-lead);
  line-height: 2.1;
  letter-spacing: 0.09em;
  color: var(--rk-text);
}

.rakuyou-about-page .rk-about-greeting__sign {
  margin-top: var(--rk-space-lg);
  font-family: var(--rk-font-latin) !important;
  font-size: var(--rk-text-sm) !important;
  letter-spacing: 0.2em !important;
  color: var(--rk-text-muted);
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 834px) {

  .rakuyou-about-page .rk-about-hero {
    margin-bottom: var(--rk-space-xl);
    padding-bottom: var(--rk-space-lg);
  }

  .rakuyou-about-page .rk-about-section {
    margin-bottom: var(--rk-space-xl);
  }

  .rakuyou-about-page .rk-about-section--quiet {
    padding: var(--rk-space-md);
  }

  .rakuyou-about-page .rk-about-greeting {
    padding: var(--rk-space-lg) 0;
  }

  .rakuyou-article-header {
    margin-bottom: var(--rk-space-lg);
    text-align: left;
  }

  .rakuyou-article-header__meta {
    justify-content: flex-start;
  }

  .rakuyou-workinfo,
  .rakuyou-preface {
    padding: var(--rk-space-md);
  }

  .rakuyou-afterwords {
    margin-top: var(--rk-space-xl);
    padding-top: var(--rk-space-lg);
  }

  .rakuyou-profile {
    padding: var(--rk-space-md);
    gap: var(--rk-space-sm);
  }

  .rakuyou-profile__avatar {
    width: 56px;
    height: 56px;
  }
}

@media screen and (max-width: 480px) {

  /* 情報BOXの2列を1列に折る。項目名が長いと窮屈になるため */
  .rakuyou-workinfo__list {
    grid-template-columns: 1fr;
    gap: 0.15em;
  }

  .rakuyou-workinfo__list dt {
    margin-top: 0.75em;
    font-size: var(--rk-text-sm);
  }

  .rakuyou-workinfo__list dt:first-child {
    margin-top: 0;
  }

  .rakuyou-profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}