/* ================================================================
   theme.css — テーマ共通シェル（トークン・基本面・材質・コンポーネント）
   mockups/theme-base.html の <style> からの逐語移植（本番テーマ化に伴う変更点のみ）:
     - 検討パネル（.lab、OPTIONS/VARS/sel-*）は移植しない（モック専用のUI）
     - html.ambience-bright（世界観の明るさ切替の比較用）は削除。既定の「神秘」のみ残す
     - html.ground-seigaiha／html.ground-flat（地面の比較用）は削除。既定の「海図の格子」のみ残す
     - フォントは4役に固定（--font-display: Reggae One / --font-body: Zen Kaku Gothic New /
       --font-latin: Cinzel / --font-mincho: Shippori Mincho）。theme-base.html は元々この値だったため
       :root の値そのものは無変更
     - 第42次（2026-09-07）: --ink-black #1a1509→#302618、--sea-dark #1c150d→#32261c、黒鉄の板 #241c0e→#3a2d1d、空サムネ #1f1809→#352918
     - 第82次（2026-09-20 Issue #30）: 読み物紙を生成り #f4efe5→#ece7db にし、海賊旗の透かし pattern-flag-paper.svg（旗の形はオーナー支給の原画。地面の海図は不変）
     - 画像パスはモックの url('assets/x') から、このファイル（assets/css/theme.css）基準の
       url('../x') に書き換え（pattern-chart.svg・pattern-flag-paper.svg・sea-chart.jpg）
     - 第28次（記事本文を「ブログの読み物」に寄せる）で §5 記事の器（.paper--read／.prose 本文・
       h2〜h6／.toc-box）を mockups/_review/article-01/proto.css の確定値に合わせて更新。Cocoon
       互換ボックス・マーカー・アイキャッチ・記事末尾（.article-foot／.post-nav）はモックに存在しない
       テーマ固有のグルーで、ファイル末尾「以下はテーマ実装で追加した最小限のグルーCSS」に置く
   トップページ固有分（ヒーロー・縁木・4大ナビ・16体グリッド）は home.css 側。
   home.html と重複するルール（トークン・.ground・.btn-metal・.paper・.seal・セクション見出し・
   サイトヘッダー・.post-list/.post-row・フッター・モバイル固定検索バー等）はこちらを正とする。
   ================================================================ */

/* ================================================================
   TOKENS
   ================================================================ */
:root {
  --abyss:       #0a0806;
  --ink-black:   #302618;
  --sea-dark:    #32261c;
  --sea-line:    #8a6f42;
  --gold:        #c9a020;
  --gold-bright: #e8cb7a;
  --text-on-dark:#eee3c8;
  --text-dim:    #b9a887;
  --shadow-cold: #0b0d0b;
  --parchment:      #e8d5b0;
  --parchment-deep: #d9c093;
  --ink-text:       #2b2116;
  --ink-soft:       #5c4a34;
  --link-on-paper:  #8a4a12;
  --shu: #a8352a;
  --font-display: 'Reggae One', serif;
  --font-body: 'Zen Kaku Gothic New', sans-serif;
  --font-latin: 'Cinzel', serif;
  --font-mincho: 'Shippori Mincho', serif;
  --tex-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='tp'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23tp)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (min-width: 761px) { html { scroll-padding-top: 90px; } }
body {
  background: var(--ink-black);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* 粒状ノイズ（全面・1枚。blend-modeなし・スクロール性能優先） */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pg)'/%3E%3C/svg%3E");
}
/* ページ端の暗いビネット */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 59; pointer-events: none;
  background: radial-gradient(140% 120% at 50% 10%, transparent 46%, rgba(0,0,0,.5) 100%);
}

a { color: var(--gold-bright); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 2px; }
img { max-width: 100%; display: block; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
/* 判断: home.html では .container--wide はヒーロー直下（トップ限定）の16体グリッド用として home.css 側に
   あったが、page-characterslist.php（図鑑ページ）も同じ幅を必要とするため、共通ユーティリティとして
   ここへ昇格した（Sonnet判断。実測値は下記コメント参照）。 */
/* 実測（wp-env ローカル環境、本番データ・本番プラグインCSSで確認）: 1260px で
   op-char-card-list のグリッド（repeat(auto-fill, minmax(132px,1fr))、gap 8px程度）が
   133.75px×8列＝8×2段でぴったり立つ（1440×900 で検証。モックの仮値のまま確定） */
.container--wide { max-width: 1260px; }

/* 4大ナビ（黒鉄の札4連。トップのヒーロー直下だけでなく 404.php でも再掲するため共通コンポーネント化。
   home.html では .gate-nav/.gate-btn/.gate-icon はトップ固有CSSの一部だったが、ヒーローとの境目専用の
   構造（.gate-ledge/.gate-dock/.gate-hanger）とは切り離して独立コンポーネントとして扱えるため、
   ここに昇格した（Sonnet判断） */
.gate-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gate-btn.btn-metal { --cut: 9px; --rule-inset: 7px; gap: 12px; width: 100%; height: 74px; font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: .12em; text-indent: .12em; }
.gate-icon { flex-shrink: 0; width: 28px; height: 28px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)) drop-shadow(0 0 5px rgba(232,203,122,.28)); }
.gate-btn[aria-current] .gate-icon { filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)) drop-shadow(0 0 5px rgba(232,203,122,.42)); }

/* ================================================================
   地面（第19次）: ヒーロー台座〜フッターの基本面
   MONST DICTIONARY の bg_repeat（1px の金線で描いた幾何学模様のタイル）と同じ文法で、
   「海図の格子」（経緯線＋目盛＋羅針図の節から16方位へ走る羅針線）を平坦な --ink-black の上に均一に敷く。
   第17次の灯り（光の勾配・棚板）はオーナー指示で廃止（模様の見え方に干渉するため）。線の強さは第18次の45%。
   文字の下は静かな面を保つ（視認性ルール1: 1px線・低コントラストのみ。塗り面・絵は置かない）
   ================================================================ */
.ground { position: relative; z-index: 0; padding-bottom: 92px; }
.ground::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url('../pattern-chart.svg') 50% 0 / 240px 240px repeat;
}
@media (max-width: 760px) { .ground::before { background-size: 168px 168px; } }
.ground-ledger { position: relative; }
.ground-ledger::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -16px; top: 56px; bottom: 0; width: 1px;
  background: linear-gradient(180deg, var(--gold) 0, rgba(201,160,32,.3) 55%, transparent);
}

[hidden] { display: none !important; }

/* ================================================================
   材質: 黒鉄の札（面取りの額装＋金の毛引き線）— 現本番サイトのナビボタンを踏襲
   構造: 親要素の背景＝金の額縁（1pxリムとして見える）／::before＝黒鉄の面
         ／::after＝内側の毛引き罫。四隅は45°の面取り（--cut）
   ================================================================ */
.btn-metal {
  --cut: 6px;          /* 四隅の面取り量 */
  --rule-inset: 5px;   /* 内側毛引き罫の位置 */
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 0;
  background: linear-gradient(180deg, #d9b45c 0%, #7d6024 45%, #a98a2c 78%, #c9a020 100%);
  clip-path: polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  color: var(--text-on-dark);
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  height: 40px; padding: 0 20px;
  cursor: pointer; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.42)) drop-shadow(0 12px 20px rgba(0,0,0,.30));
  transition: color .2s ease-out, filter .25s ease-out, transform .15s ease-out;
}
.btn-metal::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  --cut-in: calc(var(--cut) - 1px);
  clip-path: polygon(
    var(--cut-in) 0, calc(100% - var(--cut-in)) 0, 100% var(--cut-in),
    100% calc(100% - var(--cut-in)), calc(100% - var(--cut-in)) 100%,
    var(--cut-in) 100%, 0 calc(100% - var(--cut-in)), 0 var(--cut-in));
  background:
    linear-gradient(115deg, transparent 42%, rgba(232,203,122,.13) 50%, transparent 58%),
    radial-gradient(130% 100% at 28% -12%, rgba(232,203,122,.15), transparent 56%),
    repeating-linear-gradient(90deg, rgba(255,244,214,.015) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #1b150b 0%, #0f0b06 60%, #0a0805 100%);
  background-size: 240% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 185% 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(232,203,122,.10), inset 0 -8px 14px rgba(0,0,0,.5);
  transition: background-position .5s ease-out;
}
.btn-metal::after {
  content: ''; position: absolute; inset: var(--rule-inset);
  border: 1px solid rgba(201,160,32,.20);
  pointer-events: none;
  transition: border-color .2s ease-out;
}
.btn-metal:hover {
  text-decoration: none;
  color: var(--gold-bright);
  transform: translateY(-1px);
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.46)) drop-shadow(0 16px 26px rgba(0,0,0,.32));
}
.btn-metal:hover::before { background-position: -85% 0, 0 0, 0 0, 0 0; }
.btn-metal:hover::after { border-color: rgba(201,160,32,.34); }
.btn-metal:active {
  transform: translateY(1px);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.btn-metal:active::before { box-shadow: inset 0 3px 10px rgba(0,0,0,.65), inset 0 -4px 10px rgba(0,0,0,.4); }
/* 現在地: 灯りが入る（枠と文字に金、面の下辺からランタンの暖色。沈めない） */
.btn-metal[aria-current] {
  color: var(--gold-bright);
  background: linear-gradient(180deg, #eccd74 0%, #a8842e 45%, #d8b458 100%);
}
.btn-metal[aria-current]::before {
  box-shadow: inset 0 1px 0 rgba(232,203,122,.14),
              inset 0 -22px 34px -6px rgba(206,146,46,.34),
              inset 0 0 26px rgba(201,160,32,.10);
}
.btn-metal[aria-current]::after { border-color: rgba(232,203,122,.38); }
.btn-metal--sm { --cut: 5px; --rule-inset: 4px; height: 32px; padding: 0 14px; font-size: 12.5px; }

/* ================================================================
   材質: 羊皮紙
   ================================================================ */
.paper {
  position: relative;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255,250,230,.55), transparent 60%),
    radial-gradient(140% 120% at 85% 100%, rgba(120,80,30,.30), transparent 55%),
    linear-gradient(160deg,#efddb8,#e4ca98 55%,#d9bd86);
  color: var(--ink-text);
  border-radius: 4px 7px 5px 8px / 6px 4px 9px 5px;
  box-shadow: inset 0 0 42px rgba(120,80,30,.35), inset 0 0 4px rgba(90,60,20,.4), 0 12px 26px rgba(0,0,0,.55);
}
.paper::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: var(--tex-paper);
  opacity: .5;
  mix-blend-mode: multiply;
}
.stained::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(130px 90px at 88% 82%, rgba(120,70,20,.24), transparent 70%),
    radial-gradient(70px 55px at 9% 12%, rgba(120,70,20,.16), transparent 70%);
}
.rivet-top { position: relative; }
.rivet-top::before {
  content: '';
  position: absolute; top: -5px; left: 0; right: 0; height: 10px; pointer-events: none;
  background-image:
    radial-gradient(circle at 35% 35%, #e8cb7a, #8a6f42 70%, #4a3608),
    radial-gradient(circle at 35% 35%, #e8cb7a, #8a6f42 70%, #4a3608);
  background-repeat: no-repeat;
  background-size: 9px 9px, 9px 9px;
  background-position: 22% 0, 78% 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* 朱印 */
.seal {
  position: relative; overflow: hidden; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--shu); color: #fdf0dc;
  font-family: var(--font-display); font-weight: 400; font-size: 16px; line-height: 1;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px rgba(253,240,220,.8), inset 0 0 0 3.5px var(--shu), inset 0 0 0 4.5px rgba(253,240,220,.45);
}
.seal::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--tex-paper); opacity: .32; mix-blend-mode: multiply;
}
.seal--sm { width: 28px; height: 28px; font-size: 13px; }
.seal--lg { width: 58px; height: 58px; font-size: 24px; }
.latest-seal { width: 58px; height: 58px; font-size: 17px; writing-mode: vertical-rl; letter-spacing: .1em; }

/* キャラ画像の「手配書写真」処理 */
.wanted-photo {
  display: inline-block; position: relative;
  padding: 6px;
  background: linear-gradient(160deg,#efddb8,#e4ca98 55%,#d9bd86);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(90,60,20,.5), inset 0 0 18px rgba(120,80,30,.4), 0 4px 10px rgba(0,0,0,.35);
}
.wanted-photo img { border-radius: 1px; filter: sepia(.28) saturate(.85) contrast(1.06); width: 100%; height: auto; }
.wanted-photo::after {
  content: ''; position: absolute; inset: 6px; border-radius: 1px; pointer-events: none;
  background-image: var(--tex-paper); opacity: .32; mix-blend-mode: multiply;
}

/* 順位メダリオン */
.rank-medal {
  position: absolute; top: -8px; left: -8px; z-index: 5;
  width: 22px; height: 22px; border-radius: 50%;
  background: #3a2d1d; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-latin); font-weight: 700; font-size: 11px; color: var(--gold-bright);
  box-shadow: 0 2px 5px rgba(0,0,0,.55);
}

/* 記事一覧行（第35次・Issue #7）: サムネイル＋タイトル主導。帳簿線の様式は維持しカードにしない */
.post-list { margin-top: 4px; }
.post-row { display: flex; align-items: center; gap: 20px; padding: 14px 8px; color: var(--text-on-dark); border-bottom: 1px solid rgba(138,111,66,.2); transition: background .2s ease-out; }
.post-row:first-child { border-top: 1px solid rgba(138,111,66,.2); }
.post-row:hover { text-decoration: none; background: rgba(232,203,122,.06); }
.post-row:hover .pr-title { color: var(--gold-bright); }
.post-row:hover .pr-arrow { opacity: 1; transform: translateX(0); }
.pr-thumb {
  flex-shrink: 0; position: relative; width: 132px; aspect-ratio: 4 / 3; overflow: hidden;
  background: #3a2d1d;
  box-shadow: inset 0 0 0 1px rgba(232,203,122,.18), 0 3px 8px rgba(0,0,0,.45);
}
.pr-thumb::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 22px rgba(0,0,0,.35); }  /* 面に嵌まった写真の縁の落ち込み */
.pr-thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); transition: transform .35s ease-out; }
.post-row:hover .pr-thumb-img { transform: scale(1.04); }
.pr-thumb--blank { background: #352918 url('../pattern-chart.svg') 50% 50% / 120px 120px; }
.pr-thumb-blank { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pr-thumb-mark { width: 38px; height: 38px; opacity: .7; }
.pr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.pr-title { font-size: 16px; font-weight: 500; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s ease-out; }
.pr-meta { display: flex; align-items: center; gap: 10px; }
.pr-cat { flex-shrink: 0; padding: 4px 10px; font-size: 11px; color: var(--text-on-dark); white-space: nowrap; background: #3a2d1d; border-left: 2px solid var(--sea-line); }
.pr-cat--hot { background: var(--shu); color: #fdf0dc; border-left-color: #fdf0dc; }
.pr-meta .pr-cat { padding: 2px 8px; font-size: 10.5px; }   /* 一覧行の中では小さく。記事ヘッダー／記事末尾の .pr-cat は従来サイズ */
.pr-date { font-family: var(--font-latin); font-size: 12px; letter-spacing: .06em; color: var(--text-dim); line-height: 1; }
.pr-arrow { flex-shrink: 0; color: var(--gold); opacity: 0; transform: translateX(-5px); transition: opacity .2s ease-out, transform .2s ease-out; }

/* 紙タグ（検索チップ様式） */
.hero-tag {
  position: relative;
  font-family: var(--font-body); font-size: 12.5px; padding: 6px 14px;
  background: linear-gradient(160deg,#efddb8,#e4ca98 55%,#d9bd86);
  color: var(--ink-text); border-radius: 2px;
  box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(90,60,20,.35);
  transition: transform .15s ease-out;
  display: inline-block;
}
.hero-tag::before {
  content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8cb7a, #8a6f42 70%, #4a3608);
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.hero-tag:hover { transform: translateY(-2px); text-decoration: none; }

/* ================================================================
   セクション見出し（和欧併記プレート帯）
   ================================================================ */
section { padding: 56px 0 4px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sec-plate {
  display: inline-flex; align-items: baseline; gap: 13px;
  background: #3a2d1d;
  padding: 11px 36px 11px 22px;
  margin-left: -16px;
  border-left: 3px solid var(--gold);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.plate-ja { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: #f0e3c2; line-height: 1; }
.plate-en { font-family: var(--font-latin); font-size: 10px; letter-spacing: .25em; color: var(--text-dim); line-height: 1; white-space: nowrap; }
.sec-aside { font-size: 13px; color: var(--gold-bright); padding-bottom: 8px; }
.sec-rule { height: 2px; margin: 12px 0 28px; background: linear-gradient(to bottom, var(--sea-line) 0 1px, #0d0a04 1px 2px); opacity: .85; }

/* ================================================================
   サイトヘッダー
   ================================================================ */
.site-header { position: sticky; top: 0; z-index: 40; background: #0b0906; }
.site-header::after {
  content: ''; display: block; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright) 20%, var(--gold-bright) 80%, transparent);
  opacity: .32;
}
.header-inner { max-width: 1120px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 26px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--gold-bright); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 32px; height: 32px; flex-shrink: 0; }
.brand-name { display: block; white-space: nowrap; font-family: var(--font-display); font-weight: 400; font-size: 19px; color: #f0e3c2; line-height: 1.2; }
.brand-sub { display: block; font-family: var(--font-latin); font-size: 8px; letter-spacing: .34em; color: var(--gold); margin-top: 3px; }
.brand-text { display: grid; grid-template-columns: max-content; grid-template-areas: "seal" "name" "sub"; justify-items: start; }
.brand-name { grid-area: name; }
.brand-sub  { grid-area: sub; margin-top: 2px; line-height: 1.2; }
.brand-seal {
  grid-area: seal; justify-self: start;
  position: relative; overflow: hidden; display: inline-block; white-space: nowrap;
  margin: 1px 0 4px 1px;
  font-family: var(--font-display); font-weight: 400; font-size: 10px; letter-spacing: .08em; line-height: 1.1;
  color: #fdf0dc; background: var(--shu);
  padding: 3px 8px; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(253,240,220,.7), 0 2px 4px rgba(0,0,0,.4);
  transform: rotate(-2deg);
}
.brand-seal::after { content: ''; position: absolute; inset: 0; background-image: var(--tex-paper); opacity: .3; mix-blend-mode: multiply; }
.global-nav { margin-left: auto; }
.global-nav ul { display: flex; gap: 2px; list-style: none; margin-right: -14px; }
.global-nav a {
  position: relative; display: block; padding: 8px 14px;
  color: var(--text-on-dark); font-size: 14px; font-weight: 500;
}
.global-nav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease-out;
}
.global-nav a:hover { color: var(--gold-bright); text-decoration: none; }
.global-nav a:hover::after { transform: scaleX(1); }
.global-nav a[aria-current] { color: var(--gold-bright); }
.global-nav a[aria-current]::after { transform: scaleX(1); }

/* パンくず */
.crumb-nav { padding: 16px 24px 0; max-width: 1120px; margin: 0 auto; }
.crumb-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.crumb-list li { display: flex; align-items: center; color: var(--text-dim); }
.crumb-list li + li::before { content: '›'; margin: 0 9px; color: var(--sea-line); }
.crumb-list a { color: var(--text-dim); }
.crumb-list a:hover { color: var(--gold-bright); text-decoration: underline; }
.crumb-list li[aria-current] { color: var(--text-on-dark); }

/* ================================================================
   イントロ帯（見本帳の説明。本番テンプレートでは使用しないが、theme-base.html の
   <style> の逐語移植方針により CSS は残す）
   ================================================================ */
.tb-intro { padding: 34px 0 0; }
.tb-intro h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 34px); color: #f5ead0; }
.tb-intro p { margin-top: 10px; max-width: 640px; font-size: 14px; color: var(--text-dim); line-height: 1.9; }

/* ================================================================
   2. 面の三層
   ================================================================ */
.layer-stack { display: flex; flex-direction: column; gap: 20px; margin-top: 4px; }
.layer-sample { max-width: 880px; }
.layer-sample:nth-child(2) { margin-left: 32px; }
.layer-sample:nth-child(3) { margin-left: 64px; }
.layer-label { font-size: 13px; color: var(--text-on-dark); }
.layer-label span { display: block; margin-top: 3px; font-size: 12px; color: var(--text-dim); }
.layer-band { margin-top: 10px; height: 110px; border-radius: 4px; display: flex; align-items: center; padding: 0 26px; font-size: 13px; }
.layer-band--base {
  position: relative; z-index: 0; overflow: hidden;
  background-color: var(--ink-black);
  border: 1px solid rgba(138,111,66,.25);
  color: var(--text-on-dark);
}
.layer-band--base::after {
  content: ''; position: absolute; inset: 0; z-index: -1; background: url('../pattern-chart.svg') 50% 0 / 240px 240px repeat;
}
.layer-band--dark {
  background: var(--sea-dark);
  border: 1px solid var(--sea-line);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
  color: var(--text-on-dark);
}
.layer-band--paper { color: var(--ink-text); }

/* ================================================================
   3. タイポグラフィ4役
   ================================================================ */
.type-specimens { margin-top: 6px; display: flex; flex-direction: column; gap: 42px; }
.type-spec-label { font-size: 12.5px; color: var(--text-dim); }
.type-spec-label span { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); opacity: .8; }
.type-spec--body { margin-left: 28px; }
.type-spec--latin { margin-left: 4px; }
.type-spec--mincho { margin-left: 56px; }
.type-spec-display {
  margin-top: 10px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 5vw, 62px); color: #f5ead0; line-height: 1.1;
  text-shadow: 0 3px 16px rgba(0,0,0,.6);
}
.type-spec-body {
  margin-top: 10px; max-width: 620px; font-family: var(--font-body); font-size: 16px;
  line-height: 1.9; color: var(--text-on-dark);
}
.type-spec-latin {
  display: inline-block; margin-top: 10px; padding: 14px 30px;
  background: var(--sea-dark); border: 1px solid rgba(138,111,66,.4);
  font-family: var(--font-latin); font-weight: 700; font-size: clamp(30px, 4vw, 42px); color: var(--gold-bright);
}
.type-spec-mincho-wrap { margin-top: 10px; }
.type-spec-mincho {
  writing-mode: vertical-rl; font-family: var(--font-mincho); font-size: 20px;
  letter-spacing: .3em; color: var(--text-dim); text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* ================================================================
   4. コンポーネント見本
   ================================================================ */
.comp-frag { margin-top: 36px; }
.comp-frag:first-child { margin-top: 6px; }
.comp-frag-label { font-size: 12.5px; color: var(--text-dim); letter-spacing: .03em; }
.comp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 14px; }
.comp-frag--buttons .comp-row div { text-align: center; }
.btn-caption { display: block; margin-top: 8px; font-size: 11px; color: var(--text-dim); text-align: center; }
.comp-frag--seals { margin-left: 6px; }
.seal-scatter { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 14px; }
.seal-scatter-item { text-align: center; }
.seal-scatter-item span.seal-cap { display: block; margin-top: 6px; font-size: 10.5px; color: var(--text-dim); }
.comp-frag--chips { margin-left: 26px; }
.chip-sample { display: inline-block; padding: 18px 24px; max-width: 380px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 6px; }
.data-chip { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--ink-text); }
.data-chip b { font-family: var(--font-display); font-weight: 400; color: var(--shu); }
.comp-frag--medals { margin-left: 10px; }
.medal-row { display: flex; gap: 16px; margin-top: 14px; }
.medal-row .rank-medal { position: static; }
.comp-frag--tags { margin-left: 44px; }
.comp-frag--postrow { max-width: 660px; }

/* ================================================================
   5. 記事の器
   ================================================================ */
.article-frame { max-width: 812px; margin: 6px auto 0; }
.article-panel { padding: 46px 50px 54px; }

/* 読み物紙（第28次）: .paper（材質・他パネル用）はそのまま据え置き、記事・固定ページ・コメント欄の
   読み物としての視認性を優先した平坦な地色に差し替える専用モディファイア。single.php／page.php の
   .article-panel、comments.php の .comments-area に .paper と併用して付ける。
   Issue #30（第82次）: ①紙の地を第28次の暖かいクリーム（#f7f0e0→#f3ead7・明るさ 237・彩度幅 25.5）から
   「生成り」（#f4efe5→#ece7db・明るさ 235・彩度幅 16）へ。黄みを落として長文での目の刺激を下げる
   （2026-09-20 オーナー確定。上の明かりも rgba(255,252,240,.7)→rgba(252,250,244,.6)）。②その紙に
   「海賊旗の透かし」を刷る。旗の形はオーナー支給の原画（mockups/_review/bg-content-01/src-flag.png）の
   輪郭をそのままベクタ化したもので、こちらで決めたのは置き方と色だけ＝220px のタイルに旗 2 つ（60px）を
   半段ずらしで置き、間に小さい旗 2 つ（30px・0.6 倍の濃さ）、褐色の墨 #5a3d16・alpha .025（紙に対し
   輝度差 −4.3＝Weber 1.8%）。羅針線・格子線は地面の海図と被るので紙には使わない。粒状ノイズ・染みは不変。 */
.paper--read {
  background:
    url('../pattern-flag-paper.svg') 50% 0 / 220px 220px repeat,
    radial-gradient(90% 60% at 50% 0%, rgba(252,250,244,.6), transparent 70%),
    linear-gradient(180deg, #f4efe5, #ece7db);
  box-shadow: inset 0 0 0 1px rgba(90,60,20,.18), inset 0 0 70px rgba(120,80,30,.14), 0 12px 26px rgba(0,0,0,.55);
}
.paper--read::after { opacity: .14; }
.paper--read.stained::before { opacity: .4; }
.article-panel.paper--read { padding: 40px 56px 56px; }

.prose { --ink: #221b13; color: var(--ink); }
/* 紙の頭の空白対策（第29次 Fable レビュー指摘・修正3）: 本文冒頭に空の <p></p>（Gutenberg の空段落）が
   残っていると、それが .prose の実際の最初の子要素になり、直後の h2 が :first-child に一致しなくなって
   margin-top ぶんの空白が紙の頭に出る。空段落は非表示にしつつ、直後の要素の margin-top も 0 にする。 */
.prose > p:empty { display: none; }
.prose > :first-child { margin-top: 0; }
.prose > p:empty:first-child + * { margin-top: 0; }
.prose p {
  margin-top: 1.35em; font-size: 17px; line-height: 1.95; font-weight: 500; color: var(--ink);
}
.prose strong { color: #120e08; font-weight: 700; }
.prose a { color: #8a3d0e; text-decoration: underline; text-decoration-color: rgba(138,61,14,.45); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose blockquote {
  margin: 2em 0; padding: 18px 24px; border-left: 3px solid var(--sea-line);
  background: rgba(90,60,20,.06); font-size: 15px; color: var(--ink-soft);
}
.prose blockquote cite { display: block; margin-top: 8px; font-style: normal; font-size: 12px; color: var(--link-on-paper); }

/* H2: 章題（朱＋金の二重罫＋底線。第30次・改訂: オーナーが「帯＋合印は見出しに見えない／H3の
   二重罫＋下線のほうが見出しっぽい」と指摘。H2 は独自の色面を持たず、H3〜H6 と同じ「紙に直接、
   左の二重罫＋底線」という一家族の作りにして、文字サイズ・罫の太さ・余白だけで格上を示す。 */
.prose h2 {
  position: relative;
  margin: 2.8em 0 0; padding: 4px 0 15px 24px;
  font-family: var(--font-mincho); font-weight: 700; font-size: 27px; line-height: 1.5; color: var(--ink);
  border-bottom: 2px solid rgba(90,60,20,.32);
}
.prose h2::before { content: ''; position: absolute; left: 0; top: 0; bottom: 15px; width: 5px; background: var(--shu); }
.prose h2::after { content: ''; position: absolute; left: 9px; top: 0; bottom: 15px; width: 2px; background: var(--gold); }

/* H3: 節題（金の細い底線＋左端に朱の短い太罫。第34次）
   経緯: 第31次で隅付き括弧「」→ 見出し文中の「」と衝突（第32次）→ 朱の小円「●」に変更 → 「箇条書きの
   1項目に見える」（行頭の小さな記号は箇条書きの記号そのもの）と指摘。行頭の記号を完全にやめ、下線側だけで
   見出しらしさを作る。H2 の「縦の朱＋金の二重罫」を横に展開した形で同じ色の語彙を保ちつつ、幾何が違うので
   H2 と同列には見えない。点線（H4）・二重下線（H5）・行頭の短罫（H6）のいずれとも被らない。 */
.prose h3 {
  position: relative; margin-top: 2.3em; padding: 0 0 10px;
  font-family: var(--font-mincho); font-weight: 700; font-size: 20px; line-height: 1.5; color: var(--ink);
  border-bottom: 1px solid rgba(201,160,32,.6);
}
.prose h3::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 64px; height: 3px; background: var(--shu); }

/* H4: 朱の■＋点線の底線 */
.prose h4 {
  margin-top: 2.1em; padding-bottom: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: 17.5px; line-height: 1.5; color: var(--ink);
  border-bottom: 1px dotted rgba(90,60,20,.5);
}
.prose h4::before { content: '■'; color: var(--shu); font-size: 9px; margin-right: 9px; vertical-align: 3px; }

/* H5: 金の二重下線（文字幅ぶんだけ） */
.prose h5 {
  margin-top: 1.9em;
  font-family: var(--font-body); font-weight: 700; font-size: 16.5px; line-height: 1.5; color: var(--ink);
  text-decoration: underline double; text-decoration-color: var(--gold); text-underline-offset: 6px; text-decoration-thickness: 1px;
}

/* H6: 朱の短い罫を頭に */
.prose h6 {
  margin-top: 1.7em;
  font-family: var(--font-body); font-weight: 700; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); letter-spacing: .03em;
}
.prose h6::before { content: ''; display: inline-block; width: 14px; height: 2px; background: var(--shu); margin-right: 9px; vertical-align: middle; }

.ad-slot { margin: 2.3em 0; padding: 30px; border: 1px dashed rgba(90,60,20,.45); text-align: center; }
.ad-slot-label { font-family: var(--font-latin); font-size: 11px; letter-spacing: .18em; color: var(--ink-soft); }
.ad-slot-note { margin-top: 8px; font-size: 11.5px; color: var(--ink-soft); opacity: .75; }

/* 広告（ads-01。inc/ads.php の nandemo_ad_unit_html()）。見出しと右へ伸びる細い罫で静かに区切る。 */
.ad-unit { margin: 2.4em 0; }
.ad-unit-label {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 500; line-height: 1; letter-spacing: .12em; color: var(--ink-soft);
}
.ad-unit-label::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .28; }
.ad-unit ins.adsbygoogle { min-height: 250px; }
.ad-unit:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
.ad-unit .ad-slot { min-height: 250px; margin: 0; }
/* middle の下見ラベルは .prose p の本文サイズ・余白を受けないよう既存の置き札寸法へ戻す。 */
.prose .ad-unit .ad-slot p { margin: 0; font-weight: 400; line-height: 1.4; color: var(--ink-soft); }
.prose .ad-unit .ad-slot-label { font-family: var(--font-latin); font-size: 11px; letter-spacing: .18em; }
.prose .ad-unit .ad-slot-note { margin-top: 8px; font-size: 11.5px; opacity: .75; }
/* .comments-area と同じ余白。1440px・390px とも padding 30px 34px 34px・上余白40px。 */
.ad-unit--related { margin: 0; padding: 30px 34px 34px; }
.article-frame--paper:has(> .ad-unit--related) { margin-top: 40px; }
.article-panel > .ad-unit--bottom:last-child { margin-bottom: 0; }

/* 目次（自動生成。inc/content.php の nandemo_content_toc()） */
.toc-box {
  margin: 2.2em 0 2.6em; padding: 22px 28px 24px; max-width: 480px;
  background: rgba(120,80,30,.06); border: 1px solid rgba(90,60,20,.3); border-radius: 2px;
}
.toc-box-title { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-weight: 400; font-size: 16px; color: var(--ink); }
.toc-box-title small { font-family: var(--font-latin); font-size: 10px; letter-spacing: .25em; color: var(--ink-soft); }
.toc-box ol { list-style: none; counter-reset: toc; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
/* li は grid（flex ではなく）: 1列目に番号／2列目にリンク＋（あれば）子 ol を縦積みする。
   flex のままだと h3 の入れ子 ol がリンクと同じ行に横並びしてしまう（第29次 Fable 指摘・修正1）。 */
.toc-box li { counter-increment: toc; display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.6; }
/* 章番号は色面のバッジにせず、和欧併記ロックアップと同じ書体（Cinzel）の小さな数字を素のまま置く
   （第30次・改訂: 朱地に漢数字の判はオーナーに「これもダサい」と指摘されたため撤去）。 */
.toc-box li::before {
  content: counter(toc, decimal-leading-zero);
  width: 22px;
  font-family: var(--font-latin); font-weight: 400; font-size: 12.5px; letter-spacing: .02em;
  color: var(--gold); line-height: 1.6;
}
.toc-box li > ol { grid-column: 2; }
.toc-box a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(90,60,20,.35); }
.toc-box a:hover { color: #8a3d0e; border-bottom-color: currentColor; }
.toc-box ol ol { margin: 6px 0 0; gap: 4px; }
.toc-box ol ol li { grid-template-columns: auto 1fr; column-gap: 6px; }
.toc-box ol ol li::before { content: '・'; width: auto; height: auto; background: none; color: var(--shu); font-size: 13.5px; }

/* ================================================================
   6. プロフィール表
   ================================================================ */
.profile-panel { max-width: 620px; padding: 30px 34px 34px; }
.profile-title { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--ink-text); }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 16px; }
.profile-row { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(90,60,20,.2); font-size: 14px; }
.profile-row dt { flex-shrink: 0; width: 5.6em; color: var(--ink-soft); }
.profile-row dt::before { content: '■'; color: var(--shu); font-size: 8px; margin-right: 6px; }
.profile-row dd { color: var(--ink-text); font-weight: 500; }

/* ================================================================
   7. 名台詞の縦書き
   ================================================================ */
.quote-band {
  position: relative; background: var(--sea-dark); border: 1px solid rgba(138,111,66,.4);
  padding: 56px 48px; display: flex; justify-content: center; overflow: hidden;
}
.quote-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 65% at 50% 50%, rgba(240,205,140,.10), transparent 72%);
}
.quote-rule {
  position: absolute; left: 50%; top: 12%; bottom: 12%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent);
  transform: translateX(-46px);
}
.quote-vertical {
  writing-mode: vertical-rl; font-family: var(--font-mincho); font-weight: 700;
  font-size: clamp(26px, 4vw, 38px); letter-spacing: .22em; color: var(--gold-bright);
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* ================================================================
   フッター
   ================================================================ */
.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: 0;
  background: #070503;                       /* 最暗の地。ボディ #302618 より確実に暗い */
  padding: 0 0 44px;
  box-shadow: inset 0 1px 0 rgba(232,203,122,.16);   /* 机の縁: 上辺 1px の金のハイライト（ヘッダー下線と同じ語彙） */
}
.site-footer::before {                       /* 古地図そのもの */
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: url('../sea-chart-footer.webp') 50% 40% / cover no-repeat;
  opacity: .55; filter: saturate(.7) brightness(.8);
}
.site-footer::after {                        /* 闇の勾配: 上辺はボディの闇から続き、文字の背後は沈め、外周はビネット */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,5,3,.94) 0, rgba(7,5,3,.55) 140px, rgba(7,5,3,.60) 100%),
    radial-gradient(110% 80% at 50% 105%, transparent 35%, rgba(0,0,0,.55) 100%);
}
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 56px 24px 0; display: flex; justify-content: space-between; gap: 60px; flex-wrap: wrap; }
.footer-brand-block { max-width: 420px; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-bright); font-family: var(--font-display); font-size: 17px; }
.footer-brand:hover { text-decoration: none; }
.footer-brand-mark { width: 24px; height: 24px; flex-shrink: 0; }
.footer-desc { margin-top: 12px; font-size: 13px; color: var(--text-dim); line-height: 1.8; }
.footer-copy { margin-top: 22px; font-family: var(--font-latin); font-size: 10px; letter-spacing: .18em; color: var(--gold); }
.footer-nav { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; padding-top: 4px; }
.footer-nav a { color: var(--text-on-dark); }
.footer-nav a:hover { color: var(--gold-bright); text-decoration: none; }

/* ================================================================
   モーション抑制・レスポンシブ
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 760px) {
  .site-header { position: static; }
  .global-nav { display: none; }
  .header-inner { gap: 10px; padding: 10px 16px; }
  .brand { gap: 7px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-name { font-size: 15px; }
  .brand-sub { font-size: 6.5px; letter-spacing: .22em; }
  .brand-seal { font-size: 9px; padding: 2.5px 7px; margin-bottom: 3px; }

  section { padding: 42px 0 4px; }
  .sec-plate { padding: 9px 30px 9px 18px; }
  .plate-ja { font-size: 17px; }

  .gate-nav { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .gate-btn.btn-metal {
    --cut: 8px; --rule-inset: 6px;
    height: 84px; padding: 0 2px; flex-direction: column; justify-content: center; gap: 7px;
    font-size: clamp(11px, 3.2vw, 12.5px); letter-spacing: .05em; text-indent: 0; line-height: 1;
  }
  .gate-icon { width: 38px; height: 38px; }
  .gate-label { text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 6px rgba(232,203,122,.18); }

  .post-row { gap: 12px; padding: 12px 4px; }
  .pr-thumb { width: 96px; }
  .pr-title { font-size: 14.5px; line-height: 1.5; }
  .pr-meta { gap: 8px; }
  .pr-date { font-size: 11px; }
  .pr-arrow { display: none; }

  .layer-sample:nth-child(2), .layer-sample:nth-child(3) { margin-left: 0; }
  .layer-band { height: 90px; padding: 0 18px; }

  .type-spec--body, .type-spec--latin, .type-spec--mincho { margin-left: 0; }

  .comp-frag--seals, .comp-frag--chips, .comp-frag--medals, .comp-frag--tags { margin-left: 0; }

  .article-panel { padding: 30px 24px 36px; }

  .profile-panel { padding: 24px 22px 26px; }
  .profile-grid { grid-template-columns: 1fr; }

  .quote-band { padding: 40px 24px; }

  .footer-inner { flex-direction: column; gap: 24px; padding-top: 44px; }

  /* 第35次追記・オーナー指摘: 縦長画面ではビネットが下半分を覆う層に見えるためスマホでは出さない */
  body::before { display: none; }
}

/* 読み物紙・本文タイポ・見出し・目次のモバイル（第28次）。proto.css で確認済みのブレークポイント
   720px をそのまま使う（他コンポーネントの 760px とは独立）。 */
@media (max-width: 720px) {
  /* 紙パネルを外側 .container の 24px パディングの内側にもう一枚収める「二重の余白」をやめ、
     ビューポート端までパネルを伸ばす（第30次・オーナー指摘「スマホで横幅いっぱい使えない」）。
     パネル自身の内側パディングだけが本文の左右余白になる。対象は紙パネルを内包する
     .article-frame--paper のみ（カテゴリ判・シェア行／前後記事は素の帯のままでよいので対象外）。 */
  .article-frame--paper { margin-left: -24px; margin-right: -24px; }
  .article-panel.paper--read { padding: 26px 22px 40px; }
  .prose p, .prose ul, .prose ol { font-size: 16px; line-height: 1.9; }
  .prose h2 { margin: 2.4em 0 0; padding: 3px 0 12px 18px; font-size: 21px; }
  .prose h2::before, .prose h2::after { bottom: 12px; }
  .prose h3 { font-size: 18px; }
  .prose h3::after { width: 48px; }
  .toc-box { max-width: none; padding: 18px 20px 20px; }

  /* 第35次追記・オーナー指摘: 縦長画面ではビネットが下半分を覆う層に見えるためスマホでは出さない
     （.paper--read の内側の影は画面幅いっぱいの紙の左右端に縦の暗い帯として出るため、70pxの内側の影だけ外す。
     1pxの縁線と外側の落ち影は残す） */
  .paper--read { box-shadow: inset 0 0 0 1px rgba(90,60,20,.18), 0 12px 26px rgba(0,0,0,.55); }
  /* Issue #30（第82次）: 地面のタイルが 240→168px（0.7倍）と同じ比でスマホの紙のタイルも縮める。
     background-position（50% 0）は据え置き。 */
  .paper--read { background-size: 154px 154px, auto, auto; }
}

/* ================================================================
   以下はテーマ実装で追加した最小限のグルーCSS（モックには存在しない）。
   §5「その他のテンプレート」の指示に基づき、既存トークン・既存コンポーネントだけで組む。
   新しい意匠は発明しない。
   ================================================================ */

/* 記事ヘッダー（single.php／page.php）: sec-plate 様式＋h1＋メタ行 */
.article-header { padding: 24px 0 0; }
.article-header .sec-plate { margin-top: 0; }
.article-header h1 {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px);
  color: var(--text-on-dark);
  text-align: left;
  line-height: 1.3;
}
.article-meta { margin-top: 10px; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-dim); }
.article-meta time { font-family: var(--font-latin); letter-spacing: .04em; }

/* 404.php・空の一覧などの案内文（新しい意匠は作らず、地面の上の本文色をそのまま使う） */
.notice-text { max-width: 42em; color: var(--text-on-dark); font-size: 15px; line-height: 1.9; }
.gate-nav-wrap { margin-top: 28px; }

/* コメント欄（comments.php）: 紙面 .paper.paper--read（第28次）の上に既定の comment_form()/wp_list_comments()
   を載せる。パディングは記事本文パネルより小さいコメント欄専用の値のまま据え置く（brief は .article-panel の
   padding 変更のみを指示。Sonnet判断）。 */
.comments-area { margin-top: 40px; padding: 30px 34px 34px; }
.comments-title { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--ink-text); }
.comment-list { list-style: none; margin-top: 18px; }
.comment-list .children { list-style: none; margin-left: 28px; }
.comment-body { padding: 16px 0; border-bottom: 1px solid rgba(90,60,20,.2); }
.comment-author .fn { font-style: normal; font-weight: 700; color: var(--ink-text); }
.comment-metadata { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.comment-metadata a { color: var(--ink-soft); }
.comment-content { margin-top: 8px; color: var(--ink-text); font-size: 14.5px; line-height: 1.9; }
.comment-reply-link { font-size: 12.5px; color: var(--link-on-paper); }
.no-comments { color: var(--ink-soft); }
.comment-respond { margin-top: 24px; }
.comment-form label { display: block; margin-top: 12px; font-size: 13px; color: var(--ink-soft); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  margin-top: 6px; width: 100%; padding: 10px 12px; font-family: var(--font-body); font-size: 14px;
  background: rgba(255,255,255,.5); border: 1px solid rgba(90,60,20,.35); border-radius: 2px; color: var(--ink-text);
}
.comment-form textarea { min-height: 120px; }
.form-submit { margin-top: 16px; }

/* .prose 内の Gutenberg コアブロック（画像・figure・表・リスト・引用・埋め込み）が
   羊皮紙上で読めるための最低限の追加。core の wp-block-library CSS は残したまま、色・幅だけ整える。
   h2〜h6 は §5「記事の器」で定義済み（第28次）。 */
.prose ul, .prose ol { margin-top: 1.3em; padding-left: 1.4em; color: var(--ink); font-size: 17px; line-height: 1.9; }
.prose li { margin-top: .4em; }
.prose img { max-width: 100%; height: auto; border-radius: 2px; }
.prose figure { margin: 1.8em 0; }
.prose figure.wp-block-image { margin: 2em 0; }
.prose figure.wp-block-image img { box-shadow: 0 2px 10px rgba(0,0,0,.18); border: 1px solid rgba(90,60,20,.22); border-radius: 2px; }
.prose figcaption { margin-top: .6em; font-size: 12.5px; color: var(--ink-soft); }
.prose table { margin: 1.8em 0; border-collapse: collapse; width: 100%; font-size: 14px; color: var(--ink-text); }
.prose .wp-block-table { overflow-x: auto; }
.prose table th, .prose table td { padding: 8px 12px; border: 1px solid rgba(90,60,20,.3); text-align: left; }
.prose table th { background: rgba(90,60,20,.08); font-family: var(--font-body); font-weight: 700; }
.prose .wp-block-embed { margin: 1.8em 0; max-width: 100%; }
.prose .wp-block-embed iframe { max-width: 100%; }

/* ================================================================
   Issue #9（2026-09-05）: コア画像ブロックのライトボックス（拡大表示）
   画像ブロックの inline style（aspect-ratio / object-fit:contain / height:auto）が拡大側の
   <img> にも複写され、コアが object-fit:cover を足すため、4:3 の箱に縦長画像が入って上下が切れる。
   拡大側ではコアの寸法変数（自然比で算出済み）だけに従わせる。
   追試で判明した修正（指示書からの変更・Sonnet判断）: 指示書のセレクタ
   `.wp-lightbox-overlay .wp-block-image img` は本番データの実記事では効かないケースがあった。
   コア（wp-includes/blocks/image.php）は拡大側 figure の class を元の figure の class 属性から
   そのままコピーする（`wp-lightbox-container` を付与する前の値）ため、元の figure に
   `wp-block-image` クラスが無い画像（本番に実在。例: `class="aligncenter size-large is-resized"`）は
   拡大側でも `wp-block-image` を持たず、セレクタが一致しない。拡大側の
   `.lightbox-image-container` は常にちょうど1つの img（プレースホルダ用・拡大用の2枚）しか
   持たないため、元の figure のクラス構成に依存しないこのセレクタに直す。 */
.wp-lightbox-overlay .lightbox-image-container img {
  aspect-ratio: auto !important;
  width: var(--wp--lightbox-image-width) !important;
  height: var(--wp--lightbox-image-height) !important;
  object-fit: contain !important;
}

/* 見た目の整合（Issue #9 範囲外だがダーククロームのサイトに真っ白の幕は合わないため追加）。
   scrim・閉じるボタン・前後ボタンはいずれもコアが `style="background-color: #fff"` /
   `style="fill:#000"` を要素に直書きする（テーマの色を知らないため）。インラインに勝つよう
   !important が必要。ボタンは SVG を `fill` で塗るため `color` ではなく `fill` を上書きする
   （追試で確認。`color` のままでは変わらなかった）。 */
.wp-lightbox-overlay .scrim { background-color: #0a0805 !important; opacity: .93; }
.wp-lightbox-overlay .wp-lightbox-close-button,
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next { fill: #e8cb7a !important; }

/* Cocoon 互換ボックス（is-style-memo-box 等）: 本文中の無装飾ブロックを「札付きの覚え書き」として
   装飾する（第28次。proto.css 検証済み）。is-style-default には当てない。
   第29次 Fable レビュー（本番データ実測の分布に基づく決定・修正4）で、指示書11クラスに加えて
   Cocoon の派生クラス（info-box／dark-box／light-box／good-box／ok-box／bad-box／ng-box／
   profile-box／sticky-blue・gray・green・yellow・red）にも対応した。箱の見た目（額装）は共通、
   札の文言・色だけをクラスごとに変える。 */
.prose .is-style-memo-box, .prose .is-style-information-box, .prose .is-style-alert-box, .prose .is-style-danger-box,
.prose .is-style-question-box, .prose .is-style-comment-box, .prose .is-style-sticky, .prose .is-style-success-box,
.prose .is-style-secondary-box, .prose .is-style-primary-box, .prose .is-style-warning-box,
.prose .is-style-info-box, .prose .is-style-dark-box, .prose .is-style-light-box, .prose .is-style-good-box,
.prose .is-style-ok-box, .prose .is-style-bad-box, .prose .is-style-ng-box, .prose .is-style-profile-box,
.prose .is-style-sticky-blue, .prose .is-style-sticky-gray, .prose .is-style-sticky-green, .prose .is-style-sticky-yellow,
.prose .is-style-sticky-red {
  position: relative; margin: 2.2em 0; padding: 26px 26px 22px;
  background: rgba(120,80,30,.07); border: 1px solid rgba(90,60,20,.3); border-radius: 2px;
  box-shadow: inset 0 0 0 4px rgba(247,240,224,.9), inset 0 0 0 5px rgba(90,60,20,.18);
}
.prose .is-style-memo-box::before, .prose .is-style-information-box::before, .prose .is-style-alert-box::before, .prose .is-style-danger-box::before,
.prose .is-style-question-box::before, .prose .is-style-comment-box::before, .prose .is-style-sticky::before, .prose .is-style-success-box::before,
.prose .is-style-secondary-box::before, .prose .is-style-primary-box::before, .prose .is-style-warning-box::before,
.prose .is-style-info-box::before, .prose .is-style-dark-box::before, .prose .is-style-light-box::before, .prose .is-style-good-box::before,
.prose .is-style-ok-box::before, .prose .is-style-bad-box::before, .prose .is-style-ng-box::before, .prose .is-style-profile-box::before,
.prose .is-style-sticky-blue::before, .prose .is-style-sticky-gray::before, .prose .is-style-sticky-green::before, .prose .is-style-sticky-yellow::before,
.prose .is-style-sticky-red::before {
  content: '覚書'; position: absolute; top: -12px; left: 16px; padding: 5px 12px;
  background: #241c0e; color: #f0e3c2; border-left: 2px solid var(--gold);
  font-family: var(--font-display); font-weight: 400; font-size: 12.5px; line-height: 1; letter-spacing: .14em;
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
.prose .is-style-information-box::before, .prose .is-style-secondary-box::before,
.prose .is-style-info-box::before, .prose .is-style-dark-box::before, .prose .is-style-light-box::before { content: '補足'; }
.prose .is-style-alert-box::before, .prose .is-style-warning-box::before,
.prose .is-style-bad-box::before, .prose .is-style-ng-box::before { content: '注意'; background: var(--shu); color: #fdf0dc; border-left-color: rgba(253,240,220,.7); }
.prose .is-style-danger-box::before { content: '警告'; background: var(--shu); color: #fdf0dc; border-left-color: rgba(253,240,220,.7); }
.prose .is-style-question-box::before { content: '疑問'; }
.prose .is-style-comment-box::before { content: '一言'; }
.prose .is-style-sticky::before,
.prose .is-style-sticky-blue::before, .prose .is-style-sticky-gray::before, .prose .is-style-sticky-green::before, .prose .is-style-sticky-yellow::before { content: '付箋'; }
.prose .is-style-sticky-red::before { content: '付箋'; background: var(--shu); color: #fdf0dc; border-left-color: rgba(253,240,220,.7); }
.prose .is-style-success-box::before, .prose .is-style-primary-box::before,
.prose .is-style-ok-box::before { content: '要点'; }
.prose .is-style-good-box::before { content: '参考'; }
.prose .is-style-profile-box::before { content: '人物'; }
.prose .wp-block-group[class*="is-style-"] > :first-child { margin-top: 0; }
.prose .wp-block-group[class*="is-style-"] p, .prose .wp-block-group[class*="is-style-"] li { font-size: 16px; line-height: 1.85; }
.prose .wp-block-group[class*="is-style-"] ul { margin-top: .8em; }

/* マーカー（Cocoon marker-under 系。<span class="marker-under"> として本文中に残る） */
.prose .marker-under { background: linear-gradient(transparent 62%, rgba(201,160,32,.45) 62%); }
.prose .marker-under-red { background: linear-gradient(transparent 62%, rgba(168,53,42,.34) 62%); }
.prose .marker-under-blue { background: linear-gradient(transparent 62%, rgba(70,110,150,.32) 62%); }

/* アイキャッチ（第35次・Issue #1）: 羊皮紙の台紙に貼った写真を真鍮鋲で頁の頭に留める。頁の上端をまたいで飛び出す */
.article-header--eyecatch { padding-bottom: 88px; }            /* 飛び出し分の逃げ（メタ行と写真が重ならない） */
.article-eyecatch {
  position: relative; z-index: 1;
  width: min(100%, 600px); margin: -108px 0 30px;           /* 紙の padding-top 40px + 逃げ 72px ≒ 写真の上 1/4 が紙の外 */
  padding: 8px 8px 11px;
  transform: rotate(-1.2deg); transform-origin: 50% 0;
  background: linear-gradient(160deg, #efddb8, #e4ca98 55%, #d9bd86);
  box-shadow: inset 0 0 0 1px rgba(90,60,20,.5), inset 0 0 18px rgba(120,80,30,.35), 0 10px 22px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.35);
}
.article-eyecatch::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--tex-paper); opacity: .3; mix-blend-mode: multiply; }
.article-eyecatch.rivet-top::before { background-position: 12% 0, 88% 0; }   /* 鋲は台紙の左右端寄り */
.article-eyecatch img { display: block; width: 100%; height: auto; border: 0; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); filter: sepia(.18) saturate(.9) contrast(1.04); }
@media (max-width: 720px) {
  .article-header--eyecatch { padding-bottom: 64px; }
  .article-eyecatch { width: 100%; margin: -74px 0 22px; padding: 6px 6px 9px; transform: rotate(-.8deg); }
}

/* 記事末尾（single.php。第28次）: カテゴリ・タグ／シェア。既存部品（.pr-cat・.btn-metal）だけで組む */
.article-foot { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.article-foot-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.article-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.article-share-label { font-size: 12.5px; color: var(--text-dim); }

/* 前後記事（single.php。第28次）: .post-row と同じ帳簿線様式（罫線・hover背景）を2カラムで */
.post-nav { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.post-nav-link {
  display: block; padding: 16px 18px; color: var(--text-on-dark);
  border-top: 1px solid rgba(138,111,66,.2); border-bottom: 1px solid rgba(138,111,66,.2);
  transition: background .2s ease-out;
}
.post-nav-link:hover { text-decoration: none; background: rgba(232,203,122,.06); }
.post-nav-link--next { grid-column: 2; text-align: right; }
.post-nav-dir { display: block; font-size: 12px; color: var(--text-dim); }
.post-nav-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 6px; font-size: 14.5px; color: var(--text-on-dark);
}
@media (max-width: 760px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-link--next { grid-column: 1; text-align: left; }
}

/* スクリーンリーダー専用テキスト（the_posts_pagination() の見出し等、WP core が前提とする定番ユーティリティ） */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal;
}

/* 一覧ページのページネーション（the_posts_pagination()）。リンクには functions.php の
   paginate_links フィルタで btn-metal btn-metal--sm クラスを付与し、既存の黒鉄札レシピをそのまま使う */
.pagination { margin-top: 36px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pagination .page-numbers.dots { color: var(--text-dim); display: inline-flex; align-items: center; padding: 0 6px; }

/* ================================================================
   ページの頭へ（Issue #38・第99次）— 羅針の計器
   設計 mockups/_review/pagetop-01/design-direction.md §1〜§4、試作 proto/pagetop.css の逐語移植
   （試作で Chromium 390／WebKit iPhone 15／Chromium 1440 を実測済み）。図鑑は tools/sync-theme.mjs が
   このファイルごと写す。マークアップは inc/template-tags.php の nandemo_pagetop()、振る舞いは assets/js/pagetop.js。
   部品: .pagetop-dock（sticky の置き場）> a.pagetop（当たり・出す／隠す）
         > .pt-body（hover／押し込み）> svg.pt-dial（絵）+ .pt-label（刻印）
   詳細度の約束: 出現の規則は .pagetop.is-shown:not(.is-settled) .pt-x ＝ (0,4,0)。それより後の状態
   （is-settled／is-seek／is-going／is-landed）は必ず .pagetop.is-shown.is-xxx .pt-x と書いて同じ (0,4,0) にし、
   後に書いた方が勝つ順に並べる（クラス 1 個の差で黙って負ける事故を防ぐ。character.css の教訓）。
   状態クラス（pagetop.js が付け外し）:
     .is-shown   出ている（出現の演出はこのクラスで始まる）
     .is-settled 出現の演出が終わった（show/hide で外さない＝演出はページで 1 回、以後は静かに浮かぶだけ。r3）
     .is-seek    針が北を探し直す（hover／focus／指が触れた）
     .is-pressed 指が触れている（:active の touch 版）
     .is-going   帰航中（針が回る。--pt-T が長さ）
     .is-landed  頭に着いた（針の据わり・鋲）
   ================================================================ */
:root { --pt-k: 1; --pt-ease-out: cubic-bezier(.2,.6,.2,1); --pt-ease-press: cubic-bezier(.2,1.15,.35,1); --pt-ease-sink: cubic-bezier(.4,0,.6,1); }
@media (max-width: 900px) { :root { --pt-k: .85; } }

.pagetop-dock { position: sticky; bottom: 0; height: 0; z-index: 45; pointer-events: none; }
.pagetop {
  --pt-size: 52px; --pt-hit: 60px; --pt-bottom: 28px;
  --pt-right: max(24px, calc((100vw - 1260px) / 2 + 24px));
  position: absolute; right: var(--pt-right); bottom: var(--pt-bottom);
  width: var(--pt-hit); height: var(--pt-hit);
  display: grid; place-items: center;
  border-radius: 50%;
  pointer-events: auto; cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
  /* 隠れている（既定）: 霧の中。沈む transition（320ms・ease-sink）はこちらに持つ。
     浮上も transition（520ms・ease-out）で書く＝ animation の fill を外すと transition が始まらず即 0 になる（試作の実測） */
  visibility: hidden; opacity: 0; filter: blur(6px); transform: translateY(8px) scale(.92);
  transition: opacity calc(320ms * var(--pt-k)) var(--pt-ease-sink), filter calc(320ms * var(--pt-k)) var(--pt-ease-sink),
              transform calc(320ms * var(--pt-k)) var(--pt-ease-sink), visibility 0s linear calc(320ms * var(--pt-k));
}
.pagetop:hover { text-decoration: none; }
.pagetop.is-shown {
  visibility: visible; opacity: 1; filter: none; transform: none;
  transition: opacity calc(520ms * var(--pt-k)) var(--pt-ease-out), filter calc(520ms * var(--pt-k)) var(--pt-ease-out),
              transform calc(520ms * var(--pt-k)) var(--pt-ease-out), visibility 0s;
}
@media (max-width: 900px) { .pagetop { --pt-size: 48px; --pt-hit: 56px; --pt-bottom: 20px; --pt-right: 16px; } }

.pt-body { position: relative; width: var(--pt-size); height: var(--pt-size); display: block; transition: transform 110ms ease-out; }
.pt-dial { display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)) drop-shadow(0 1px 1px rgba(0,0,0,.4));
  transition: filter 110ms ease-out; }
.pt-label {
  position: absolute; left: 0; right: 0; top: calc(50% + 10px); text-align: center; pointer-events: none;
  font-family: var(--font-latin, 'Cinzel', serif); font-weight: 700; font-size: 10px; line-height: 1; letter-spacing: .14em; text-indent: .14em;
  color: #e8cb7a; text-shadow: 0 1px 1px rgba(0,0,0,.7);
  transition: color 180ms ease-out;
}
@media (max-width: 900px) { .pt-label { font-size: 9.5px; top: calc(50% + 9.5px); } }

/* SVG の部品の回転の中心（針のグループは見えない r23 の円を含むので bbox の中心＝面の中心） */
.pt-needle, .pt-gleam { transform-box: fill-box; transform-origin: 50% 50%; }
.pt-hub { transform-box: fill-box; transform-origin: 50% 50%; }

/* ---- 出現: 霧から浮かぶ → 針が北を探して据わる → 刻印が乾く → 鋲が打たれる → 縁を灯りが撫でる ---- */
.pagetop.is-shown:not(.is-settled) .pt-needle { animation: pt-find calc(960ms * var(--pt-k)) linear calc(120ms * var(--pt-k)) both; }
.pagetop.is-shown:not(.is-settled) .pt-label  { animation: pt-ink calc(380ms * var(--pt-k)) var(--pt-ease-out) calc(480ms * var(--pt-k)) both; }
.pagetop.is-shown:not(.is-settled) .pt-hub    { animation: pt-pin calc(240ms * var(--pt-k)) var(--pt-ease-press) calc(940ms * var(--pt-k)) both; }
.pagetop.is-shown:not(.is-settled) .pt-gleam  { animation: pt-gleam calc(900ms * var(--pt-k)) var(--pt-ease-out) calc(700ms * var(--pt-k)) both; }

/* ---- 待機: 動かない（r3。オーナー指示「待機中のアニメーションは不要」＝針の揺れ（旧 pt-sway）とガラスの光（旧 pt-glint）を撤去。
        針は北を指したまま静止。SVG からも光の帯と defs を外してある） ---- */

/* ---- hover（PC）／focus／指が触れた: 針が北を探し直す（一周して据わる）、面が少し持ち上がる ---- */
.pagetop.is-shown.is-seek .pt-needle { animation: pt-seek calc(720ms * var(--pt-k)) var(--pt-ease-out) both; }
@media (hover: hover) {
  .pagetop:hover .pt-body { transform: translateY(-1px); }
  .pagetop:hover .pt-dial { filter: drop-shadow(0 5px 10px rgba(0,0,0,.5)) drop-shadow(0 1px 1px rgba(0,0,0,.4)) drop-shadow(0 0 6px rgba(232,203,122,.22)); }
  .pagetop:hover .pt-label { color: #fff0c4; }
}
.pagetop:focus-visible .pt-label { color: #fff0c4; }
.pagetop:focus-visible { border-radius: 50%; outline-offset: 3px; }   /* theme.css の :focus-visible { border-radius: 2px } を円に戻す */

/* ---- 到着のフォーカスの受け皿（r6）: 指・マウスで押して頭に着いたとき、pagetop.js はサイト名（.brand）ではなくヘッダーに
        tabindex="-1" を付けて focus する（blur で外す）。WebKit はスクリプトからの focus にも :focus-visible を当てるので、サイト名に
        渡すと theme.css の共通規則（金の 2px の輪・角丸 2px）がサイト名の外周に出る（オーナー指摘 r5）。ヘッダーには輪も角丸も出さない。
        キーボード（Enter）で押したときは JS がサイト名へ渡し、輪は共通規則のまま出る（居場所の印）。詳細度 (0,3,0) ＞ :focus-visible (0,1,0) ---- */
.site-header[tabindex="-1"]:focus { outline: none; border-radius: 0; }

/* ---- 押し込み: 計器が机に沈む（黒鉄の札の :active と同じ） ---- */
.pagetop:active .pt-body, .pagetop.is-pressed .pt-body { transform: translateY(1px) scale(.94); }
.pagetop:active .pt-dial, .pagetop.is-pressed .pt-dial { filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }

/* ---- 帰航: 針が 2 周して北に据わる（長さ --pt-T は JS が入れる＝到着と同時に北）、鋲が脈打つ、刻印は少し引く ---- */
.pagetop.is-shown.is-going .pt-needle { animation: pt-voyage var(--pt-T, 1000ms) cubic-bezier(.45,0,.2,1) both; }
.pagetop.is-shown.is-going .pt-hub    { animation: pt-pulse calc(420ms * var(--pt-k)) ease-in-out infinite; }
.pagetop.is-shown.is-going .pt-label  { color: #b9a887; }
.pagetop.is-shown.is-going .pt-gleam  { animation: pt-gleam calc(700ms * var(--pt-k)) var(--pt-ease-out) both; }

/* ---- 到着: 針が据わり、鋲が打たれる ---- */
.pagetop.is-shown.is-landed .pt-needle { animation: pt-land calc(260ms * var(--pt-k)) var(--pt-ease-press) both; }
.pagetop.is-shown.is-landed .pt-hub    { animation: pt-pin calc(220ms * var(--pt-k)) var(--pt-ease-press) both; }

/* 北を探す: 大きく振れて減衰し据わる（本物のコンパスの針） */
@keyframes pt-find {
  0%   { transform: rotate(-150deg); animation-timing-function: cubic-bezier(.3,.1,.3,1); }
  52%  { transform: rotate(16deg);   animation-timing-function: cubic-bezier(.4,0,.5,1); }
  74%  { transform: rotate(-7deg);   animation-timing-function: cubic-bezier(.4,0,.5,1); }
  89%  { transform: rotate(2.5deg);  animation-timing-function: cubic-bezier(.4,0,.5,1); }
  100% { transform: rotate(0deg); }
}
/* 探し直す（hover）: 反時計に一周、少し行き過ぎて戻る */
@keyframes pt-seek {
  0%   { transform: rotate(0deg);    animation-timing-function: cubic-bezier(.5,0,.3,1); }
  72%  { transform: rotate(-352deg); animation-timing-function: cubic-bezier(.4,0,.5,1); }
  87%  { transform: rotate(-366deg); animation-timing-function: cubic-bezier(.4,0,.5,1); }
  100% { transform: rotate(-360deg); }
}
/* 帰航: 2 周。--pt-T の終わり＝到着で北 */
@keyframes pt-voyage { from { transform: rotate(0deg); } to { transform: rotate(-720deg); } }
@keyframes pt-land   { from { transform: rotate(7deg); } to { transform: rotate(0deg); } }
@keyframes pt-ink   { from { opacity: 0; letter-spacing: .34em; } to { opacity: 1; letter-spacing: .14em; } }
@keyframes pt-pin   { from { transform: scale(1.4); opacity: .6; } to { transform: scale(1); opacity: 1; } }
@keyframes pt-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.86); } }
@keyframes pt-gleam { 0% { transform: rotate(-90deg); stroke-opacity: 0; } 25% { stroke-opacity: .75; } 100% { transform: rotate(270deg); stroke-opacity: 0; } }

@media print { .pagetop-dock { display: none; } }