/*
Theme Name: vestige
Theme URI: https://suzukimou.com/
Author: 鈴木林
Author URI: https://suzukimou.com/
Description: 「盲腸」のための作品中心テーマ。青とグレーのミニマルなeditorialデザイン。作品（worksカスタム投稿）一覧をトップに、お知らせ（通常投稿）・活動（固定ページ）で構成。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vestige
*/

/* ============================================================
   デザイントークン（全ページ共通の変数）
   静的プレビュー6ページで確定した値をここに一本化。
   ============================================================ */
:root{
  /* 色 */
  --color-bg:#C3C0BD;      /* 背景／ホバー反転時の文字色 */
  --color-blue:#052DE7;    /* リンク文字／ホバー時の背景 */
  --color-ink:#1b1b1b;     /* 通常テキスト */
  --color-muted:#8f8c88;   /* コピーライト等 */
  --color-line:#1b1b1b;    /* 罫線 */

  /* 余白（8pxスケール） */
  --space-1:8px; --space-2:16px; --space-3:24px;
  --space-4:32px; --space-5:48px; --space-6:64px;

  /* 本文の“流れ”のリズム */
  --gap-section:36px;      /* 広い区切り（H2の前／画像の前／公開日まわり） */
  --gap-subsection:12px;   /* 狭い区切り（H3の上下） */
  --gap-images:16px;       /* 画像どうし */
  --gap-flow:40px;         /* 予備（現在未使用・将来用に残置） */

  /* 文字 */
  --font-base:14px;        /* 本文の基準 */
  --font-title:16px;       /* サイトタイトル「盲腸」 */

  /* 寸法（ページの役割ごとに幅を変える） */
  --content-width:1040px;  /* 外枠＝ヘッダー／フッター／front-pageのカード一覧 */
  --read-width:760px;      /* 読み物系＝single / single-works / home の本文（中央寄せ） */
  --about-width:500px;     /* 活動ページ＝短い年表向けにさらに狭く（中央寄せ） */
  --side-pad:24px;         /* 左右の最小余白 */
  --thumb-w:200px;         /* front-pageサムネ幅（5:2 → 高さ80px） */
  --detail-img-w:400px;    /* single-works本文の画像幅 */
}

/* ============================================================
   ベース
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--color-bg); color:var(--color-ink);
  font-family:"游ゴシック体","YuGothic","游ゴシック","Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  font-size:var(--font-base); line-height:1.7;
}
img{ display:block; max-width:100%; }

/* リンク共通：通常=青文字／ホバー=青ベタに反転 */
a{ color:var(--color-blue); text-decoration:none; transition:background-color .2s ease,color .2s ease; }
a:hover, a:focus-visible{ background:var(--color-blue); color:var(--color-bg); }

/* ============================================================
   共通レイアウト（ヘッダー／メイン／フッターの中央カラム）
   ============================================================ */
.site-header,.site-main,.site-footer{
  max-width:var(--content-width); margin-inline:auto; padding-inline:var(--side-pad);
}

/* ヘッダー */
.site-header{ text-align:center; padding-top:var(--space-6); padding-bottom:var(--space-4); }
.site-title{ margin:0 0 var(--space-3); }
.site-title a{
  display:inline-block; background:var(--color-blue); color:var(--color-bg);
  font-size:var(--font-title); letter-spacing:.4em; padding:4px 16px 4px 20px;
}
.site-title a:hover{ background:var(--color-blue); color:var(--color-bg); } /* 常に青ベタ（反転させない） */
.site-tagline{ margin:0 0 var(--space-3); color:var(--color-ink); }
.global-nav{ display:flex; justify-content:center; align-items:center; gap:var(--space-3); }
.global-nav a{ display:inline-block; padding:2px 8px; }
.nav-bluesky{ line-height:0; }
.nav-bluesky svg{ display:block; width:20px; height:20px; fill:currentColor; }

/* ============================================================
   front-page：作品一覧（worksカスタム投稿）
   ============================================================ */
.works-list{ display:flex; flex-direction:column; gap:var(--space-3); }
.work-item{ display:flex; align-items:center; gap:var(--space-3); }
.work-thumb{
  position:relative; flex:0 0 var(--thumb-w); width:var(--thumb-w);
  aspect-ratio:5 / 2; background:#b3b0ad; overflow:hidden;
}
.work-thumb img{ width:100%; height:100%; object-fit:cover; }
.work-thumb::after{
  content:""; position:absolute; inset:0;
  background:var(--color-blue); opacity:0; transition:opacity .2s ease;
}
.work-item:hover .work-thumb::after,
.work-item:focus-visible .work-thumb::after{ opacity:.42; }

.work-body{ flex:1 1 auto; min-width:0; }
.work-meta{
  margin:0 0 4px; display:flex; flex-wrap:wrap; align-items:center; gap:.5em; line-height:1.4;
}
/* タグ共通（カテゴリ／ステータス）＝青枠で囲う */
.tag{
  display:inline-block; border:1px solid var(--color-blue); color:var(--color-blue);
  padding:0 8px; font-size:.82em; line-height:1.5;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.tag--fill{ background:var(--color-blue); color:var(--color-bg); } /* 「公開中」だけ塗り */
.work-item:hover .tag:not(.tag--fill),
.work-item:focus-visible .tag:not(.tag--fill){ color:var(--color-bg); border-color:var(--color-bg); }
.work-external{ font-size:.78em; }
.work-excerpt{
  margin:0; line-height:1.5;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* ============================================================
   お知らせ（news）— 共通土台
   front-page（teaser）と home（archive）で見た目が違うので、
   .news--teaser / .news--archive の修飾で振り分ける。
   ============================================================ */
.news-item{ display:flex; gap:var(--space-3); }
.news-date{ flex:0 0 auto; white-space:nowrap; }

/* --- front-page のお知らせ欄（teaser：見出し付き・1行省略・SP非表示） --- */
.news--teaser{ margin-top:var(--space-6); }
.news--teaser .news-heading{
  display:flex; align-items:center; gap:var(--space-3);
  margin:0 0 var(--space-3); font-size:1em; font-weight:normal; color:var(--color-ink);
}
.news--teaser .news-heading::before,
.news--teaser .news-heading::after{ content:""; flex:1; height:1px; background:var(--color-line); }
.news--teaser .news-item{ padding:var(--space-1) 0; }
.news--teaser .news-excerpt{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; /* 1行省略 */
}
.news--teaser .news-more{ text-align:center; margin:var(--space-4) 0 0; }
.news--teaser .news-more a{ display:inline-block; padding:2px 8px; }

/* --- home のお知らせ一覧（archive：760px中央・上下罫線・2行省略・行間ゆったり） --- */
.news--archive{ max-width:var(--read-width); margin-inline:auto; }
.news--archive .news-list{
  border-top:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
}
.news--archive .news-item{
  margin:40px 0;   /* padding→marginで、ホバー青反転を中身の高さだけに */
}
.news--archive .news-excerpt{
  flex:1 1 auto; min-width:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; /* 2行省略 */
}

/* ============================================================
   本文（.entry-content）— single / single-works / page-about 共通
   段落は詰める。空けるのは見出し・画像の前だけ。
   ============================================================ */
.entry-content > *{ margin:0; }                              /* 段落は詰まる */
.entry-content > h3{ margin:var(--gap-subsection) 0; }       /* H3（公開日）の上下：狭い区切り */
.entry-content > h2{ margin-top:var(--gap-section); }        /* H2の前：広い区切り */
.entry-content > figure{ margin-top:var(--gap-section); }    /* 画像の前：広い */
.entry-content > figure + figure{ margin-top:var(--gap-images); } /* 画像どうし：狭め */
.entry-content h2,
.entry-content h3{ font-size:var(--font-base); font-weight:normal; } /* 見た目は本文と同じ */
.entry-content figure{ width:var(--detail-img-w); max-width:100%; }
.entry-content figure img{ width:100%; height:auto; }

/* 動線ブロック（[cta]ショートコードが出力） */
.cta{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.cta-link{ text-decoration:underline; }
.cta-site{ display:inline-flex; align-items:center; gap:4px; color:var(--color-ink); font-size:.9em; }
.cta-site svg{ width:14px; height:14px; }

/* ============================================================
   本文コンテナ（役割ごとの幅）
   ============================================================ */
.work-detail{ padding-top:var(--space-2); max-width:var(--read-width); margin-inline:auto; }
.work-detail-title{ margin:0; font-size:var(--font-base); font-weight:normal; }

.single-post{ padding-top:var(--space-2); max-width:var(--read-width); margin-inline:auto; }

.page-about{ padding-top:var(--space-2); max-width:var(--about-width); margin-inline:auto; }

.error-page{ padding-top:var(--space-2); max-width:var(--read-width); }
.error-message{ margin:0; }

/* ============================================================
   ページネーション（home / single 共通）
   ============================================================ */
.pagination{ display:flex; justify-content:center; gap:var(--space-5); margin-top:var(--space-4); }
.pagination a{ display:inline-block; padding:2px 10px; }
.single-post .pagination{ margin-top:var(--space-6); } /* single詳細では本文から広めに離す */

/* ============================================================
   戻る動線
   ============================================================ */
.back-list{ margin-top:var(--space-6); }
.back-home{ margin-top:var(--space-6); }
.single-post .back-home{ margin-top:var(--space-3); } /* single詳細では「一覧に戻る」と近づけてまとめる */
.back-list a, .back-home a{ display:inline-block; padding:2px 8px; }
/* home / page-about など、本文を絞ったページで戻る動線も同じ幅に揃える */
.news--archive ~ .back-home{ max-width:var(--read-width); margin-inline:auto; }

/* ============================================================
   フッター
   ============================================================ */
.site-footer{ text-align:center; padding:var(--space-5) 0; }
.copyright{ margin:0; color:var(--color-muted); font-size:12px; }

/* ============================================================
   SP（幅576px以下）
   ============================================================ */
@media (max-width:576px){
  :root{ --side-pad:20px; }
  .site-header{ padding-top:var(--space-5); }

  /* front-page カード：縦積み（サムネ全幅／テキスト下） */
  .works-list{ gap:var(--space-5); }
  .work-item{ flex-direction:column; align-items:stretch; gap:var(--space-2); }
  .work-thumb{ flex:none; width:100%; }
  .work-meta{ margin:0 0 var(--space-1); }
  .work-meta .work-title{ order:10; flex-basis:100%; margin-top:var(--space-1); }
  .work-excerpt{ -webkit-line-clamp:initial; display:block; }

  /* front-page のお知らせ欄はSPで非表示 */
  .news--teaser{ display:none; }

  /* 本文中の画像は全幅 */
  .entry-content figure{ width:100%; }
}