/* ============================================================
   AK²Lab テーマ style.css
   コンセプト: エンジニアの精度 × デザイナーの余白。
   - 白背景・広い余白・可読性優先。静かなプロの余裕に、小さな遊び心。
   - 見出し＝明朝（余裕）、本文＝ゴシック、ラベル/メタ＝等幅（エンジニアの signal）。
   - アクセントは澄んだ青1色＋淡い水色の面。グレーは無彩色のまま分離して使う
     （水色×グレーの混色はしない）。青紫は不使用。連番・飾りの英語ラベルも不使用。
   - Markdown 変換器の出力クラス（契約 §6.1: toc / footnotes / マーカー6種 /
     box-button / notice-block / language-*）をすべてここで装飾する。
   ============================================================ */

/* ---- テーマ変数 ------------------------------------------------ */
:root {
  --color-text: #1b1e22;          /* 本文（無彩色のインク。青みは混ぜない） */
  --color-ink-soft: #464b52;      /* 見出しの締め色 */
  --color-muted: #72767c;         /* 補助テキスト（無彩色グレー） */
  --color-bg: #ffffff;            /* ページ背景（白） */
  --color-bg-subtle: #f6f6f7;     /* 淡い面（無彩色。水色とは混ぜない） */
  --color-border: #d9dbdf;        /* 罫線（無彩色ヘアライン）。白地でほぼ不可視だった #e6e7e9 を一段だけ底上げ＝区切り線を「見える最小限」に */
  --color-border-strong: #c8cbcf; /* 一段強い線。カードの枠・入力/ボタン/タグ等の輪郭・主要な見出し下線。ライトグレーの「枠」として読めるがチャコールにはしない（大人の軽さ） */

  /* カードの影（静止／ホバー）。接触層＝ほぼ黒の無彩色インクで縁に青ハローを出さず、
     拡散層＝テーマ既存語彙の澄んだ青（rgba(18,99,173)・duo-figure img / home-card:hover と同系）を極薄で敷く。
     不透明度は静止 0.15／ホバー 0.24 を上限とする（超えると量産Web的に安っぽくなる）。 */
  --shadow-card: 0 1px 2px rgba(24, 30, 37, 0.05), 0 10px 30px -18px rgba(18, 99, 173, 0.15);
  --shadow-card-hover: 0 2px 4px rgba(24, 30, 37, 0.06), 0 18px 40px -20px rgba(18, 99, 173, 0.24);

  /* アクセント（澄んだ青。青紫には寄せない） */
  --color-accent: #4489c8;
  --color-accent-dark: #0c4a86;
  --color-accent-hover: #073764; /* 白文字ボタンの hover 用。accent-dark より一段濃い青 */
  --color-accent-soft: #d9e9f7;   /* 淡い水色の面（チップ/選択/リンク下線）。near-white すぎたので同一hueのまま一段だけ発色（グレーと混色しない） */
  --color-accent-bright: #17b6d6; /* 見出しグラデーションの明るい端（青緑寄りの青。紫にしない） */
  --color-hero-tint: #f2f7fc;     /* ヒーロー全面・ホーム限定ヘッダーを薄く染める色（--color-accent-softよりさらに淡い） */
  --color-band-tint: #eaf3fc;     /* トップの交互セクション帯の clean な淡い水色。グレー(--color-bg-subtle)とは別トークンにして混色しない。明度は hero-tint > band > accent-soft の順に階調化 */

  --color-danger: #b8432e;        /* 警告・受付休止など、注意を促す文字色 */
  --color-strong: var(--color-danger); /* 既存 ::重要:: マーカーとの互換用 */
  --color-mark: #ffe27a;          /* ハイライト・検索 <mark> の黄 */

  --color-notice-bg: #f7f2e8;     /* 注意ブロック（{% notice %}）のベージュ地 */
  --color-notice-border: #ddd0b8; /* 同上の枠（暖色・青紫不使用） */

  --color-code-bg: #f2f3f4;
  --color-pre-bg: #21262d;        /* コードブロック背景（ダークインク） */
  --color-pre-text: #e9ecef;

  --width-site: 1120px;
  --width-read: 44rem;            /* 長文の読みやすい measure */
  --width-sidebar: 260px;
  /* ヘッダーが sticky で常時上に張り付く分の高さ（余裕を含めた概算値）。
     サイドバーの張り付き位置と、ページ内ジャンプ時のスクロール余白の両方で使い回す。
     実測ヘッダー高さ（デスクトップ80px・モバイル73px）より確実に大きくしておくことで、
     フォント差やOSの違いで多少ずれても見出しがヘッダーの下に隠れることはない
     （逆に大きすぎても隙間が少し空くだけで実害はない）。 */
  --header-offset: 6rem;
  /* トップのヒーロー高計算専用。nav-toggle.js が実測値で上書きする。 */
  --hero-header-height: var(--header-offset);

  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
                "Noto Serif JP", "Times New Roman", serif;
  /* "Yu Gothic Medium" を先に指定: 游ゴシックは Regular/Bold の2ウェイトしか
     正式に持たず font-weight:500 相当の中間値はブラウザ間で太さが不安定になる
     ため、実体フォントとして Medium を直接名指しして安定させる。 */
  --font-body: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
               "Roboto Mono", Menlo, monospace;
}

/* ---- リセット最小限 -------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* ページ内ジャンプ（目次・脚注・スキップリンク等）が sticky ヘッダーの下に
   隠れないよう、ジャンプ先の手前に常にヘッダー分の余白を確保する。
   scroll-padding-top は「ページ全体のスクロール」に効く1箇所指定で足りるため、
   見出し等の個別要素に scroll-margin-top を1つずつ足して回る必要がない。 */
html {
  scroll-padding-top: var(--header-offset);
  /* .home-sec-band の 100vw 帯はスクロールバー幅のぶん僅かにはみ出すため、
     横スクロールが生まれないようルートで刈り取る（縦のスクロールには影響しない） */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

a { color: var(--color-accent-dark); text-underline-offset: 2px; }
a:hover { color: var(--color-accent-hover); }

/* グラデーション見出しは通常時に文字色を透明化しているため、
   選択中は文字色と WebKit の塗り色を明示して可読性を保つ。 */
::selection {
  color: var(--color-bg);
  background-color: var(--color-accent-dark);
  -webkit-text-fill-color: var(--color-bg);
}

/* キーボード操作時のスキップリンク（通常は不可視） */
.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  transform: translateY(calc(-100% - 2rem));
  background: var(--color-accent-dark);
  color: #fff;
  padding: 0.7em 1.1em;
  border-radius: 4px;
  box-shadow: var(--shadow-card-hover);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus { transform: translateY(0); color: #fff; }
.skip-link:hover { background: var(--color-accent-hover); }

/* ---- ヘッダー --------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;   /* コンテンツより手前・スキップリンク(z-index:100)より奥 */
  border-top: 3px solid var(--color-accent);   /* ブランドの青をひと筋 */
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
/* ホームのみ: ヘッダーをヒーローと同じ淡い青(--color-hero-tint)に染めて継ぎ目を消す。
   他ページは白基調のまま（sticky運用中は不透明を維持し、現行ak2lab.comの
   透明固定ヘッダーがスクロール後に本文と重なって読めなくなる不具合は再現しない）。 */
.page-index .site-header {
  background: var(--color-hero-tint);
  border-bottom-color: transparent;
}
/* ホームだけ .site-body の上パディングを消す（他ページは通常のpadding-topが必要なので
   .page-index に限定）。無いとヘッダーとヒーローの間に白い帯ができてしまう
   （どちらも --color-hero-tint だが、その間の .site-body 分だけ地の白が挟まるため）。 */
.page-index .site-body { padding-top: 0; }
.site-header-inner {
  max-width: var(--width-site);
  margin: 0 auto;
  padding: 1.05rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.75rem;
}

/* サイトタイトル＝屋号テキストのみ（アイコンはヒーローが担うため置かない）。
   plain な inline のまま＝ .site-header-inner の align-items:baseline で
   隣接するナビ文字と自然にベースラインが揃う（flex子にすると baseline 合成がずれるため避ける）。 */
.site-title a {
  color: var(--color-text);
  text-decoration: none;
}
.site-title a:hover { color: var(--color-accent-dark); }
.site-title-text {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.header-menu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header-menu-item a {
  color: var(--color-ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.header-menu-item a:hover {
  color: var(--color-accent-dark);
  border-bottom-color: var(--color-accent);
}
.header-menu-item a[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

/* ナビ＋検索パネル（デスクトップでは素通し。中身は header-menu-list と search-form） */
.site-nav-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.75rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* ハンバーガーボタン（デスクトップでは常に非表示。900px以下でのみ CSS が表示する） */
.nav-toggle {
  display: none;
  align-self: center;
  align-items: center;
  gap: 0.5em;
  margin-left: auto;
  padding: 0.4em 0.3em;
  border: none;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  min-height: 44px;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

/* 検索フォーム（ヘッダー・検索ページ共用） */
.search-form { display: flex; margin-left: auto; }
.search-form input[type="search"] {
  font: inherit;
  font-size: 0.88rem;
  padding: 0.35em 0.8em;
  border: 1px solid var(--color-border-strong);
  border-right: none;
  border-radius: 4px 0 0 4px;
  /* 幅は input 側だけが伸縮する（basis=11em・足りなければ縮む）。button は
     flex-shrink:0 で常に自然幅を守るので、狭い画面でボタン側が潰れて
     「検索」の文字が縦に折り返す事故を構造的に防ぐ。min-width:0 は input の
     既定の縮小下限（size属性由来）を外すために必須。 */
  flex: 1 1 11em;
  min-width: 0;
  background: var(--color-bg);
  color: var(--color-text);
}
.search-form input[type="search"]:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
}
.search-form button {
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.35em 1em;
  border: 1px solid var(--color-accent-dark);
  border-radius: 0 4px 4px 0;
  background: var(--color-accent-dark);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;      /* 狭い画面でも縮まない（input側だけが縮む） */
  white-space: nowrap;  /* 「検索」が縦に折り返さない */
  transition: background 0.15s, border-color 0.15s;
}
.search-form button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.search-form-page { margin: 0 0 2rem; }
.search-form-page input[type="search"] { width: 100%; max-width: 24em; font-size: 1rem; }
.search-form-page button { font-size: 1rem; }

/* ---- 本体レイアウト（メイン＋サイドバー） ----------------------- */
.site-body {
  max-width: var(--width-site);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}
.site-body.has-sidebar { grid-template-columns: minmax(0, 1fr) var(--width-sidebar); }
.site-main { min-width: 0; }
/* スキップリンクの移動先は tabindex=-1 でのみフォーカスされる。
   main 全体を囲むブラウザ既定の巨大な枠は位置の理解に役立たず、
   全幅ヒーローでは特に崩れて見えるため、移動先に限って消す。 */
.site-main:focus { outline: none; }

/* 長文（記事・固定ページ）は読みやすい幅に。トップ（entry-home）は全幅。 */
.entry:not(.entry-home) .entry-body { max-width: var(--width-read); }

/* ---- サイドバー -------------------------------------------------- */
.sidebar-menu-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
}
.sidebar-menu-list { margin: 0; padding: 0; list-style: none; }
.sidebar-menu-item a {
  display: block;
  padding: 0.4em 0.2em;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}
.sidebar-menu-item a:hover { color: var(--color-accent-dark); background: var(--color-bg-subtle); }
.sidebar-menu-item a[aria-current="page"] { color: var(--color-accent-dark); font-weight: 700; }

/* 右レールに複数のウィジェットが積み重なるときの間隔 */
.sidebar-menu + .sidebar-menu { margin-top: 2rem; }

/* カテゴリー／アーカイブ ウィジェット（件数つき・WordPressのウィジェット表示を踏襲）。
   .sidebar-menu-item は素の手動メニューでも使うため、件数つきの行だけ .has-count で
   レイアウトを分ける（リンクをブロック化せず、件数を右寄せで独立させる）。 */
.sidebar-menu-item.has-count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6em;
  padding: 0.4em 0.2em;
  border-bottom: 1px solid var(--color-border);
}
.sidebar-menu-item.has-count a {
  display: inline;
  padding: 0;
  border-bottom: none;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.95rem;
  /* カテゴリの階層インデント（--widget-depth はテンプレートが整数のみで出力） */
  margin-left: calc(var(--widget-depth, 0) * 0.9em);
}
.sidebar-menu-item.has-count a:hover { color: var(--color-accent-dark); }
.widget-count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-muted);
}

/* タグ ウィジェット（.tag チップを流し込むだけ。件数は薄く添える） */
.widget-tagcloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag .widget-count { margin-left: 0.3em; opacity: 0.65; }

/* 右レールはスクロールに追従（レール全体を1枚として固定する。
   ウィジェット個々を sticky にすると複数積み重なったときに重なって表示されるため、
   コンテナ側に align-self: start を添えて grid item としての伸長を止めるのが正しい）。 */
.site-sidebar { position: sticky; top: calc(var(--header-offset) + 0.5rem); align-self: start; }

/* 右レールがあるページでは、本文カラムの幅自体が読み幅になる
   （44rem の上限を外し、「右の余白がなぜあるのか」を構造で説明する） */
.site-body.has-sidebar .entry-header,
.site-body.has-sidebar .entry-footer,
.site-body.has-sidebar .entry:not(.entry-home) .entry-body { max-width: none; }

/* ---- パンくずリスト（等幅で控えめに） --------------------------- */
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-muted);
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin: 0 0.6em;
  color: var(--color-border-strong);
}
.breadcrumb-link { color: var(--color-muted); text-decoration: none; }
.breadcrumb-link:hover { color: var(--color-accent-dark); text-decoration: underline; }
.breadcrumb-current { color: var(--color-text); }

/* ---- ページ見出し（一覧・検索・404 共通） ------------------------ */
.page-header {
  margin: 0 0 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border-strong);
}
.page-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--color-accent-dark);
}
.page-title {
  font-family: var(--font-serif);
  font-weight: 600;
  margin: 0.3em 0 0.2em;
  font-size: 1.9rem;
  line-height: 1.4;
}
/* ページ最上部の H1 だけに使う、濃紺→ブランド青の控えめなグラデーション。
   セクション H2 とヒーローの明るい3色グラデーションは別の役割として維持する。 */
.page-title,
.entry-title,
.hero-title { color: var(--color-accent-dark); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .page-title,
  .entry-title,
  .hero-title {
    width: fit-content;
    max-width: 100%;
    background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.page-meta { margin: 0; font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-muted); }

/* ---- トップページ（ヒーロー＝センター構成） ---------------------
   ロゴ → ブランド名 → 見出し → リード → ボタン を中央に積み、
   背景では格子線で描いた3D地形の波が静かにうねる。 */
.home-hero {
  /* 全幅ブレイクアウト: .home-sec-band::before と同じ手法を要素自身に適用
     （キャンバスが inset:0 で親基準のため、背景だけでなく箱自体を100vwにする必要がある）。
     はみ出す分は html { overflow-x: hidden } が受け止める。 */
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 印象的な高さを保ちつつ、次のセクションが少し見える縦幅にする。 */
  min-height: clamp(680px, 84dvh, 820px);
  overflow: hidden;
  padding: 3rem 1.5rem 3.5rem;
  background: var(--color-hero-tint);
  margin-bottom: 0;
}

/* ヒーロー背景キャンバス */
.home-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* 文字を守るヴェール（中央＝白 → 外周＝透明。粒子の波は縁側でよく見える）。
   以前は中心92%不透明で粒子の大半を隠していたため大幅に弱め、
   見出し側はグラデーション自体のコントラストで可読性を担保する。 */
.home-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 56% 46% at 50% 44%,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.34) 46%,
    rgba(255, 255, 255, 0.12) 72%,
    rgba(255, 255, 255, 0) 92%);
}
.home-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 46em;
  margin-inline: auto;
}
/* ロゴ＝120px枠のほぼ全体を実マークが占める大きさ（112px）。 */
.home-hero-icon-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin: 0 auto 1rem;
}
.home-hero-icon { display: block; width: 112px; height: 112px; }
.home-hero-brandname {
  margin: 0 0 1.5rem;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  color: var(--color-accent-dark);
}
.home-hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2rem, 4.8vw, 3.1rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}
/* 見出しの色付け（青→青緑のグラデーション。紫にはしない） */
.home-hero-title .text-gradient {
  background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 55%, var(--color-accent-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-hero-subtitle-en {
  margin: 0 0 1.6rem;
  font-family: var(--font-mono);
  font-size: 1.02rem;
  letter-spacing: 0.03em;
  color: var(--color-accent-dark);
}
.home-hero-lead {
  margin: 0;
  font-size: 1.03rem;
  line-height: 2.05;
  color: var(--color-ink-soft);
}
.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin: 2.25rem 0 0;
}

/* ボタン（ヒーロー等・手書きHTML用） */
.btn-primary,
.btn-ghost {
  display: inline-block;
  padding: 0.7em 1.7em;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--color-accent-dark); color: #fff; border: 1px solid var(--color-accent-dark); }
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; }
.btn-ghost { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border-strong); }
.btn-ghost:hover { border-color: var(--color-accent-dark); color: var(--color-accent-dark); }

/* ---- トップのセクション（白と淡地の全幅バンドを交互に） ---------
   .home-sec が1章。 .home-sec-band は背景を 100vw に広げて画面幅の帯にする
   （はみ出す分は html { overflow-x: hidden } が受け止める）。 */
.home-sec { padding: 3.75rem 0; }
.home-sec-band { position: relative; }
.home-sec-band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--color-band-tint);
  z-index: -1;
}
.home-sec-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}
.home-sec-title::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.55em;
  background: var(--color-accent);
  border-radius: 2px;
  transform: translateY(1px);
}
.home-sec-lead {
  margin: 0 0 1.5rem;
  max-width: var(--width-read);
  color: var(--color-ink-soft);
}
/* ブランド名の意味を4要素で見せる。静的カードなので hover 演出は付けない。 */
.home-sec-about { text-align: center; padding-bottom: 4.5rem; }
.home-sec-about-lead,
.home-sec-about-links { max-width: 42em; margin-inline: auto; }
.home-sec-about-lead { margin-top: 0; margin-bottom: 0; }
.home-sec-about-links { margin-top: 1.75rem; margin-bottom: 0; }
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 2.25rem 0 0;
}
.philosophy-card {
  padding: 1.8rem 1.35rem 1.9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}
.philosophy-char {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-serif);
  font-size: 2.65rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent-dark);
}
.philosophy-char-square sup {
  position: relative;
  top: -0.28em;
  vertical-align: baseline;
  font-size: 0.82em;
  line-height: 1;
}
.philosophy-term {
  margin: 0 0 0.85rem;
  padding: 0;
  border: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
.philosophy-desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--color-muted);
}

/* ---- 図版つき2カラム（テキスト｜図版。duo-flip は図版が左） ------
   見出しの直後から本文が始まるよう上端で揃える（中央揃えにすると
   図版の高さぶん本文が下がり、見出しとの間に不自然な空白が生まれる）。 */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 30%, 340px);
  gap: 1.5rem 2.75rem;
  align-items: start;
  margin-top: 1rem;
}
.duo-flip { grid-template-columns: clamp(300px, 42%, 480px) minmax(0, 1fr); }
.duo-text { min-width: 0; }
.duo-text p { margin: 0 0 1.4em; }
.duo-text p:last-child { margin-bottom: 0; }
.duo-figure { margin: 0; min-width: 0; }
.duo-figure canvas { display: block; width: 100%; height: 260px; }
.duo-figure a { display: block; transition: transform 0.2s; }
.duo-figure a:hover { transform: translateY(-3px); }
.duo-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 24px 48px -28px rgba(18, 99, 173, 0.24);
}
.duo-caption {
  margin: 0.7rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--color-muted);
  text-align: right;
}

/* 領域4枚グリッド（情報カード。リンクではないので静的な見た目に） */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin: 2rem 0 0;
}
.skill-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.7rem 1.5rem 1.85rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}
.skill-card-title { font-family: var(--font-serif); font-size: 1.12rem; font-weight: 600; }
.skill-card-text { font-size: 0.88rem; line-height: 1.8; color: var(--color-muted); }

/* ---- Web制作ページ: 料金プラングリッド -------------------------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin: 1.75rem 0 2.5rem;
}
.plan-card {
  padding: 1.6rem 1.5rem 1.7rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}
.plan-name { margin: 0; padding: 0; border: none; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; }
.plan-tag {
  margin: 0.2rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.plan-price {
  margin: 0.85rem 0 0.6rem;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--color-accent-dark);
}
.plan-text { margin: 0; font-size: 0.9rem; line-height: 1.8; color: var(--color-muted); }

/* トップの3枚カード（ここでやっていること） */
.home-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin: 2rem 0 0;
}
.home-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.6rem 1.5rem 1.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.home-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.home-card-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
}
.home-card-title::after {
  content: "→";
  font-family: var(--font-mono);
  margin-left: 0.5em;
  color: var(--color-accent-dark);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
  display: inline-block;
}
.home-card:hover .home-card-title::after { opacity: 1; transform: translateX(0); }
.home-card-text { font-size: 0.92rem; line-height: 1.8; color: var(--color-muted); }

/* 旧 .hero（HOME_TYPE=posts 用のフォールバック） */
.hero { margin: 0 0 2.5rem; }
.hero-title { font-family: var(--font-serif); font-weight: 600; margin: 0 0 0.3em; font-size: 2rem; line-height: 1.4; }
.hero-description { margin: 0; color: var(--color-muted); }

.section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.35rem;
  margin: 0 0 1.4rem;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--color-border-strong);
}
.more-link { margin-top: 1.5rem; text-align: right; font-family: var(--font-mono); font-size: 0.85rem; }
.more-link a { text-decoration: none; }
.more-link a:hover { text-decoration: underline; }

/* HOME_TYPE=page でも記事の入り口が見える、静かな新着3件。
   直前の白い About と交互になるよう淡い全幅バンドに置く。 */
.home-recent { padding: 3.75rem 0 4rem; }
.home-recent .entry-card { background: transparent; }

/* ---- 記事一覧（カード） ----------------------------------------- */
.entry-list { display: grid; gap: 0; }
.entry-card {
  padding: 1.6rem 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg);
}
.entry-list > .entry-card:first-child { padding-top: 0; }
.entry-card:hover .entry-card-title a { color: var(--color-accent-dark); }

.entry-card.has-thumbnail { display: flex; align-items: flex-start; gap: 1.4rem; }
.entry-card-thumbnail { flex-shrink: 0; }
.entry-card-thumbnail img {
  display: block;
  width: 140px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--color-bg-subtle);
}
.entry-card-main { min-width: 0; }

.entry-card-title {
  font-family: var(--font-serif);
  font-weight: 600;
  margin: 0 0 0.5em;
  font-size: 1.3rem;
  line-height: 1.5;
}
.entry-card-title a { color: var(--color-text); text-decoration: none; transition: color 0.15s; }
.entry-card-title a:hover { color: var(--color-accent-dark); }
.entry-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-muted);
}
.entry-card-description {
  margin: 0.7em 0 0;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}
.entry-list-empty { color: var(--color-muted); text-align: center; padding: 3rem 0; }

/* カテゴリリンク（一覧・記事メタ共用・小さなアウトラインチップ） */
.entry-category {
  color: var(--color-accent-dark);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--color-accent-soft);
  background: var(--color-accent-soft);
  padding: 0.1em 0.7em;
  border-radius: 4px;
}
.entry-category:hover { background: var(--color-accent-dark); color: #fff; border-color: var(--color-accent-dark); }

/* 子カテゴリ・タグのチップ */
.category-children {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
.tag {
  display: inline-block;
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  padding: 0.12em 0.8em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-muted);
  text-decoration: none;
  background: var(--color-bg);
}
.tag::before { content: "#"; color: var(--color-border-strong); margin-right: 0.15em; }
.tag:hover { color: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.tag[aria-current="page"] { color: var(--color-accent-dark); border-color: var(--color-accent-dark); background: var(--color-accent-soft); }

/* ---- 記事ページ -------------------------------------------------- */
.entry-header {
  margin: 0 0 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border-strong);
  max-width: var(--width-read);
}
.entry-title {
  font-family: var(--font-serif);
  font-weight: 600;
  margin: 0 0 0.5em;
  font-size: clamp(1.6rem, 3.4vw, 2.15rem);
  line-height: 1.42;
}
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-muted);
}
.entry-footer { margin-top: 3rem; max-width: var(--width-read); }
.entry-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

/* ---- 記事本文のタイポグラフィ（Markdown 出力） ------------------
   :where() でゼロ specificity（.toc / .footnotes / .box-button 等が確実に勝つ）。 */
.entry-body { overflow-wrap: break-word; }

:where(.entry-body) h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 2.4em 0 0.9em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--color-border-strong);
}
:where(.entry-body) h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.5;
  margin: 2em 0 0.8em;
  padding-left: 0.65em;
  border-left: 3px solid var(--color-accent);
}
:where(.entry-body) h4 { font-size: 1.05rem; margin: 1.8em 0 0.7em; }

:where(.entry-body) p { margin: 0 0 1.4em; }
:where(.entry-body) ul,
:where(.entry-body) ol { margin: 0 0 1.4em; padding-left: 1.6em; }
:where(.entry-body) li { margin: 0.3em 0; }
:where(.entry-body) li::marker { color: var(--color-accent); }

:where(.entry-body) a { text-decoration: underline; text-decoration-color: var(--color-accent-soft); text-decoration-thickness: 2px; }
:where(.entry-body) a:hover { text-decoration-color: var(--color-accent); }

:where(.entry-body) blockquote {
  margin: 1.6em 0;
  padding: 0.2em 1.3em;
  border-left: 3px solid var(--color-accent);
  color: var(--color-ink-soft);
  font-style: normal;
}
:where(.entry-body) blockquote p:last-child { margin-bottom: 0; }

:where(.entry-body) hr { margin: 3em 0; border: none; border-top: 1px solid var(--color-border); }
:where(.entry-body) img { border-radius: 8px; }
:where(.entry-body) h2,
:where(.entry-body) h3,
:where(.entry-body) h4 { scroll-margin-top: 1rem; }

:where(.entry-body) code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--color-code-bg);
  padding: 0.15em 0.45em;
  border-radius: 4px;
}
:where(.entry-body) pre {
  margin: 1.6em 0;
  padding: 1.1em 1.3em;
  background: var(--color-pre-bg);
  color: var(--color-pre-text);
  border-radius: 8px;
  overflow-x: auto;
  line-height: 1.6;
}
:where(.entry-body) pre code { background: none; padding: 0; font-size: 0.86rem; color: inherit; }

:where(.entry-body) table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.95rem;
}
:where(.entry-body) th,
:where(.entry-body) td { border: 1px solid var(--color-border); padding: 0.55em 0.95em; }
:where(.entry-body) th { background: var(--color-bg-subtle); font-weight: 700; }
:where(.entry-body) tbody tr:nth-child(even) { background: var(--color-bg-subtle); }

/* ---- 目次（[[toc]]） -------------------------------------------- */
.toc {
  margin: 1.75em 0;
  padding: 1rem 1.4rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.toc h2 { margin: 0 0 0.5em; padding: 0; border: none; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.06em; color: var(--color-ink-soft); }
.toc-list { margin: 0; padding: 0; list-style: none; }
.toc-item { margin: 0.3em 0; }
.toc-item-h3.toc-indent { padding-left: 1.4em; font-size: 0.93em; }
.toc-link { text-decoration: none; }
.toc-link:hover { text-decoration: underline; }

/* ---- 脚注 ------------------------------------------------------- */
.footnotes-sep { margin: 3em 0 0; border: none; border-top: 1px dashed var(--color-border-strong); }
.footnotes { font-size: 0.9rem; color: var(--color-muted); }
.footnotes-title { font-size: 1.05rem; color: var(--color-text); margin: 1.2em 0 0.6em; padding: 0; border: none; font-family: var(--font-serif); }
.footnotes-list { margin: 0; padding-left: 1.6em; }
.footnote-item { margin: 0.4em 0; }
.footnote-ref a { text-decoration: none; font-weight: 600; }
.footnote-backref { text-decoration: none; margin-left: 0.35em; }

/* ---- マーカー（::名前::文::） ------------------------------------ */
.emphasis { font-weight: 700; color: var(--color-danger); }
.underline { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.highlight { background: linear-gradient(transparent 55%, var(--color-mark) 55%); }
.soft-accent { color: var(--color-accent-dark); font-weight: 600; }
.note { font-family: var(--font-mono); font-size: 0.82em; color: var(--color-ink-soft); background: var(--color-bg-subtle); padding: 0.1em 0.5em; border-radius: 4px; }
.box { display: inline-block; border: 1px solid var(--color-border-strong); background: var(--color-bg-subtle); padding: 0.05em 0.6em; border-radius: 6px; }

/* ---- 注意ブロック（{% notice %}） -------------------------------- */
.notice-block {
  margin: 0 0 1.75em;
  padding: 1.05em 1.25em;
  background: var(--color-notice-bg);
  border: 1px solid var(--color-notice-border);
  border-radius: 6px;
  color: var(--color-text);
  font-size: 0.96rem;
  line-height: 1.75;
}
.notice-block > :first-child { margin-top: 0; }
.notice-block > :last-child { margin-bottom: 0; }

/* ---- ボタン風リンク（{% button %}） ----------------------------- */
.box-button { margin: 1.9em 0; }
.box-button a {
  display: inline-block;
  background: var(--color-accent-dark);
  color: #fff;
  padding: 0.7em 1.9em;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--color-accent-dark);
  transition: background 0.15s, border-color 0.15s;
}
.box-button a:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* ---- ページャ --------------------------------------------------- */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.75rem 1.25rem; margin: 3rem 0 0; font-family: var(--font-mono); font-size: 0.85rem;
}
.pager-prev, .pager-next {
  border: 1px solid var(--color-border-strong); border-radius: 4px;
  padding: 0.45em 1.2em; text-decoration: none;
}
.pager-prev:hover, .pager-next:hover { border-color: var(--color-accent); }
.pager-info { color: var(--color-muted); }

/* ---- 検索結果 --------------------------------------------------- */
.search-hit { padding: 1.2rem 0; border-bottom: 1px solid var(--color-border); }
.search-hit-title { font-family: var(--font-serif); font-weight: 600; margin: 0 0 0.3em; font-size: 1.3rem; line-height: 1.5; }
.search-hit-title a { color: var(--color-text); text-decoration: none; transition: color 0.15s; }
.search-hit-title a:hover { color: var(--color-accent-dark); }
.search-snippet { margin: 0; font-size: 0.92rem; color: var(--color-muted); }
.search-status { color: var(--color-muted); font-family: var(--font-mono); font-size: 0.85rem; }
mark { background: var(--color-mark); color: inherit; padding: 0 0.1em; }
.search-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 1.75rem 0 0; }
.search-pager button {
  font: inherit; font-family: var(--font-mono); font-size: 0.85rem; padding: 0.45em 1.2em;
  border: 1px solid var(--color-border-strong); border-radius: 4px; background: var(--color-bg); color: var(--color-accent-dark); cursor: pointer;
}
.search-pager button:hover { border-color: var(--color-accent); }
.search-pager .page-info { font-size: 0.85rem; color: var(--color-muted); }

/* ---- 404 -------------------------------------------------------- */
.notfound { text-align: center; padding: 3.5rem 0; }
.notfound-code { font-family: var(--font-mono); margin: 0; font-size: 4rem; font-weight: 400; color: var(--color-border-strong); line-height: 1; }

/* ---- ライトボックス --------------------------------------------- */
.lightbox-target { cursor: zoom-in; }
.lightbox-target:focus-visible { outline: 3px solid var(--color-accent-dark); outline-offset: 4px; }
.lightbox {
  position: fixed; inset: 0; background: rgba(20, 24, 22, 0.85);
  display: flex; align-items: center; justify-content: center; padding: 4rem 2rem 2rem; z-index: 1000;
}
.lightbox-image { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); }
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font: 700 1.5rem/1 var(--font-body);
  cursor: pointer;
}
.lightbox-close:hover,
.lightbox-close:focus-visible { background: #fff; color: var(--color-text); outline: none; }
.lightbox-open { overflow: hidden; }

/* ---- フッター --------------------------------------------------- */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-bg); margin-top: 1rem; }
.site-footer-inner { max-width: var(--width-site); margin: 0 auto; padding: 2.5rem 1.5rem; }
.footer-menu-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.75rem;
  margin: 0 0 1rem; padding: 0; list-style: none;
}
.footer-menu-item a { color: var(--color-ink-soft); text-decoration: none; font-size: 0.88rem; }
.footer-menu-item a:hover { color: var(--color-accent-dark); text-decoration: underline; }
.footer-menu-item a[aria-current="page"] { color: var(--color-accent-dark); font-weight: 700; }
.site-copyright { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--color-muted); }

/* ---- レスポンシブ ----------------------------------------------- */
@media (max-width: 900px) {
  .site-body.has-sidebar { grid-template-columns: minmax(0, 1fr); }
  .home-cards { grid-template-columns: 1fr; gap: 1rem; }
  .skill-grid { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
  .philosophy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .home-sec { padding: 2.75rem 0; }
  .duo,
  .duo-flip { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .duo-flip .duo-figure { order: 2; }   /* 狭い画面では常に「文→図」の順 */
  /* 下に回り込んだ図版は中央に置く（右寄り・全幅のまま置かない） */
  .duo-figure canvas { height: 230px; max-width: 380px; margin-inline: auto; }
  .duo-figure img,
  .duo-figure a { max-width: 480px; margin-inline: auto; }
  .duo-caption { text-align: center; }

  /* ナビ＋検索のハンバーガー化（JS有効時のみ・契約は nav-toggle.js のコメント参照） */
  .js-nav-ready .nav-toggle { display: inline-flex; }
  .js-nav-ready .site-nav-panel { display: none; }
  .js-nav-ready .site-nav-panel.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    flex-basis: 100%;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
  }
  .js-nav-ready .site-nav-panel.is-open .header-menu-list { flex-direction: column; gap: 0.15rem; }
  .js-nav-ready .site-nav-panel.is-open .header-menu-item a { display: block; padding: 0.5em 0.1em; }
  .js-nav-ready .site-nav-panel.is-open .search-form { margin-left: 0; width: 100%; }
  /* input はフォームの幅いっぱいまで flex-grow で伸びる（flex-basis指定済みのため
     width指定は効かない。button側は flex-shrink:0 のぶん自然と押し出される） */
}

@media (prefers-reduced-motion: no-preference) {
  .site-nav-panel.is-open { animation: nav-panel-in 0.15s ease-out; }
  @keyframes nav-panel-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 600px) {
  body { font-size: 15px; }
  .site-header-inner { padding: 0.85rem 1.15rem; }
  .skill-grid { grid-template-columns: 1fr; }
  .philosophy-grid { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .search-form { margin-left: 0; width: 100%; }
  .site-body { padding: 2rem 1.15rem 3rem; gap: 2.25rem; }
  .home-hero { padding: 2rem 1.15rem 2.5rem; }
  .home-hero-icon-frame { width: 96px; height: 96px; }
  .home-hero-icon { width: 88px; height: 88px; }
  .home-hero-title { font-size: 1.7rem; }   /* 12字の見出しが1行に収まるサイズ（「躍動」の途中で割らない） */
  .home-hero-lead .br-w { display: none; }   /* 狭い画面では強制改行を外して自然に折り返す */
  .home-hero-actions .btn-primary,
  .home-hero-actions .btn-ghost { flex: 1 1 auto; text-align: center; }
  .entry-title { font-size: 1.55rem; }
  .page-title { font-size: 1.5rem; }
  .entry-card.has-thumbnail { gap: 0.9rem; }
  .entry-card-thumbnail img { width: 96px; height: 74px; }
  :where(.entry-body) pre { padding: 0.9em 1em; }
  .footer-menu-item a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.3em 0.25em; }
}

/* Windows ハイコントラストで background-clip が無効化されても
   H1 を透明のまま残さない。 */
@media (forced-colors: active) {
  .home-hero-title .text-gradient,
  .page-title,
  .entry-title,
  .hero-title {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}