/* =============================================================================
   ふだん着 — 装幀(book cover/和漢書院)スタイル
   配色: ink #1A1A1A / paper #F8F2E6 / vermillion #C73E3A (+ neutral grays)
   書体: Noto Serif JP (本文・タイトル・章タイトル・章扉) / Klee One (kanji counter のみ)
         / Space Mono (技術文字列メタ・ASIN/ISBN調)
   ============================================================================= */

:root {
  --ink: #1A1A1A;
  --ink-soft: #2B2724;
  --paper: #F8F2E6;
  --paper-deep: #EFE6D2;
  --vermillion: #B8332F;        /* paper(#F8F2E6)に対し ~5.0:1 でAAクリア+バッファ確保 */
  --vermillion-deep: #9A2A26;

  /* グレー段階のみ。彩度はゼロ寄り。 */
  --rule: #6E685A;        /* 罫線(意味境界に対し paper #F8F2E6 比 4.0:1 以上を確保) */
  --rule-soft: #C8BFA8;   /* 装飾だけの薄罫(テキスト境界には使わない) */
  --mute: #4E483E;        /* 紙系の文字グレー(本文サイズで4.5:1以上) */
  --mute-strong: #2B2724; /* タイトル隣接のメタ */

  --serif: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
  --display: "Klee One", "Noto Serif JP", serif; /* 章番号 kanji の単独装飾のみ */
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace; /* 技術文字列(ASIN/日付/ラベル)に限定 */

  --gutter: clamp(16px, 4vw, 36px);
  --measure: 64ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.85;
  font-feature-settings: "palt" 1;
  text-rendering: geometricPrecision;
  /* 表紙感を全面に効かせる極薄の縦罫(印刷オフセット感) */
  background-image:
    linear-gradient(90deg, transparent 0, transparent calc(50% - 0.5px), rgba(26,26,26,0.018) 50%, transparent calc(50% + 0.5px)),
    repeating-linear-gradient(90deg, transparent 0, transparent 7px, rgba(26,26,26,0.015) 7px, rgba(26,26,26,0.015) 8px);
  background-attachment: fixed;
  background-size: 100% 100%, 8px 100%;
}

/* 朱の使用は『章番号 kanji 下線』『朱印(冒頭1個)』『その上で 判子』『hover/focus』のみ。
   ::selection は朱以外(墨反転)で記憶を持たせ、朱の希少化を担保する。 */
::selection { background: var(--ink); color: var(--paper); }

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.15s, color 0.15s;
}
a:hover { color: var(--vermillion); border-color: var(--vermillion); }
a:focus-visible {
  outline: 2px solid var(--vermillion);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────
   0. 紙質感(SVG fractalNoise) — 表紙感の主軸
   ───────────────────────────────────────────────────────────────────────── */
.paper-grain-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.38;
  z-index: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   1. 装幀ヘッダ — 表紙感
   ───────────────────────────────────────────────────────────────────────── */
.binding {
  position: relative;
  padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  isolation: isolate;
}

/* 表紙左端の朱色帯 */
.binding::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--vermillion);
  z-index: 1;
}

/* 上端の極細罫 */
.binding::after {
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter); top: 18px;
  border-top: 1px solid var(--ink);
  height: 0;
  z-index: 1;
}

.binding-inner {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(60px, 1fr) minmax(0, 8fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: end;
  position: relative;
  z-index: 2;
}

.binding-counter {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--mute);
  align-self: start;
  padding-top: 12px;
}
/* 縦組みはタブレット以上だけ(モバイルでのグリッド崩れ回避) */
@supports (writing-mode: vertical-rl) {
  @media (min-width: 481px) {
    .binding-counter {
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }
  }
}
.binding-counter strong { color: var(--ink); font-weight: 700; }

.binding-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(38px, 7.2vw, 84px);
  line-height: 1.10;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
}
.binding-title .accent { color: var(--vermillion); }
/* 朱の角判子(版ずれ・刷り掠れの紙質感を載せる) — 表紙の主役カット */
.binding-title .accent-underline {
  position: relative;
  display: inline-block;
  background-color: var(--vermillion);
  color: var(--paper);
  padding: 0 12px 2px;
  margin: 0 2px;
  transform: rotate(-0.4deg);
  box-shadow:
    -1px 0 0 var(--vermillion-deep),
     1px 1px 0 rgba(154, 42, 38, 0.45);
  isolation: isolate;
}
/* 版ずれ風 fractalNoise レイヤー(欠け・かすれ) */
.binding-title .accent-underline::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='40'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.97 0 0 0 0 0.95 0 0 0 0 0.90 0 0 0 0.65 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 80px 40px;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.55;
  z-index: -1;
}

.binding-sub {
  font-family: var(--serif);
  font-size: clamp(15px, 1.8vw, 19px);
  line-height: 1.8;
  margin: 24px 0 0;
  color: var(--ink-soft);
  border-left: 2px solid var(--rule);
  padding-left: 16px;
}

/* 装画 — 抽象意匠(本の小口+栞紐)のみ。衣類リテラル要素は廃止。 */
.binding-mark {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(20px, 4vw, 56px);
  width: clamp(72px, 11vw, 132px);
  height: auto;
  color: var(--ink);
  opacity: 0.78;
  pointer-events: none;
  z-index: 2;
}
.binding-mark .stamp { fill: var(--vermillion); }
@media (max-width: 640px) {
  .binding-mark { right: 16px; bottom: 16px; width: 68px; opacity: 0.72; }
}

.binding-colophon {
  margin-top: clamp(28px, 5vw, 52px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mute);
}
.binding-colophon span + span::before {
  content: "──"; margin-right: 10px; color: var(--rule); letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. 本文セクション — 縦組カウンタ + 章扉
   ───────────────────────────────────────────────────────────────────────── */
main { padding: 0; }

.chapter {
  position: relative;
  padding: clamp(56px, 8vw, 96px) var(--gutter);
  max-width: 100%;
}

.chapter + .chapter { border-top: 1px solid var(--rule); }

.chapter-inner {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(60px, 1fr) minmax(0, 8fr);
  gap: clamp(20px, 4vw, 48px);
}

/* 章扉カウンタ — 朱印形ではなく細罫の漢字+ラベル(朱印の連発を抑止) */
.chapter-counter {
  font-family: var(--display);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: start;
  padding-top: 6px;
}
.chapter-counter .kanji {
  font-size: clamp(28px, 3.5vw, 40px);
  color: var(--vermillion);
  font-weight: 600;
  display: inline-block;
  padding: 4px 0;
  border-bottom: 2px solid var(--vermillion);
  line-height: 1;
}
.chapter-counter .label {
  font-family: var(--serif);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--mute);
  font-weight: 500;
}
@supports (writing-mode: vertical-rl) {
  @media (min-width: 481px) {
    .chapter-counter .label {
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }
  }
}

/* 章タイトル — Noto Serif JPで統一 */
.chapter-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.45;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.chapter-lead {
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: var(--mute);
  margin: 0 0 28px;
  font-weight: 500;
}

.chapter-body p { margin: 0 0 1.4em; max-width: var(--measure); }
.chapter-body p:last-child { margin-bottom: 0; }

/* 行頭装飾 — 朱は使わず墨で。朱の希少化のため */
.chapter-body p.lede::first-letter {
  font-family: var(--serif);
  font-size: 2.6em;
  float: left;
  line-height: 0.95;
  padding: 4px 10px 0 0;
  color: var(--ink);
  font-weight: 700;
}

.chapter-body .ruled {
  border-left: 1px dashed var(--rule);
  padding: 4px 0 4px 18px;
  color: var(--mute);
  font-size: 14.5px;
  max-width: var(--measure);
}

/* ─────────────────────────────────────────────────────────────────────────
   3. 記事リード(hub)
   ───────────────────────────────────────────────────────────────────────── */
.index-list { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.index-list li {
  border-top: 1px solid var(--rule);
  padding: 22px 0;
}
.index-list li:last-child { border-bottom: 1px solid var(--rule); }

.index-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: baseline;
}
.index-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--mute-strong);
  letter-spacing: 0.1em;
}
.index-title {
  font-family: var(--serif);
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}
.index-title a { border-bottom: none; }
.index-title a:hover { color: var(--vermillion); }
.index-desc { font-size: 14px; color: var(--mute); margin: 0; line-height: 1.7; }
.index-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--mute);
  margin-top: 8px;
}

/* 次の章(近刊) — 本文末の1行だけで予告。装幀メタファ「分冊綴じ加える」に回収。 */
.next-chapter-line {
  margin-top: 28px;
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--mute);
  border-top: 1px dashed var(--rule);
  padding-top: 18px;
  max-width: var(--measure);
  line-height: 1.85;
}
.next-chapter-line .next-mark {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  margin-right: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. 記事ページ
   ───────────────────────────────────────────────────────────────────────── */
.article {
  padding: 0;
}
.article-head {
  padding: clamp(48px, 7vw, 88px) var(--gutter) clamp(40px, 6vw, 64px);
  border-bottom: 1px solid var(--ink);
  position: relative;
  background: var(--paper);
  isolation: isolate;
}
.article-head::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px; background: var(--vermillion);
  z-index: 1;
}
.article-head-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.article-eyebrow {
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: var(--mute-strong);
  margin: 0 0 18px;
  font-weight: 500;
}
.article-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.35;
  margin: 0 0 18px;
  letter-spacing: 0.02em;
}
.article-meta {
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--mute);
  font-weight: 500;
}

/* 著者バイライン(記事冒頭・記事本文の前に挿入) */
.author-byline {
  background: var(--paper-deep);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 24px var(--gutter);
}
.author-byline-inner {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
}
.author-mark svg { width: 48px; height: 48px; display: block; }
.author-byline-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14.5px;
  margin: 0 0 4px;
  color: var(--ink);
}
.author-byline-bio {
  font-size: 13.5px;
  line-height: 1.75;
  margin: 0 0 6px;
  color: var(--mute-strong);
  max-width: 60ch;
}
.author-byline-link {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  margin: 0;
  font-weight: 500;
}
.author-byline-link a { color: var(--ink); border-bottom: 1px solid var(--rule); }

.article-body {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) var(--gutter);
}
.article-body p {
  margin: 0 0 1.5em;
  font-size: 16.5px;
  line-height: 1.95;
}
.article-body p.lede {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.article-body p.aside-note {
  font-size: 14.5px;
  color: var(--mute-strong);
  border-left: 2px dashed var(--rule);
  padding: 6px 0 6px 16px;
  background: rgba(26, 26, 26, 0.025);
}
.article-body p.aside-note em { font-style: italic; color: var(--mute-strong); font-weight: 500; }
.article-body p.advisory-note {
  font-size: 14px;
  color: var(--mute-strong);
  background: var(--paper-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 14px 18px;
  margin: 24px 0 32px;
}
.article-body p.advisory-note strong {
  color: var(--ink);
  font-weight: 700;
  margin-right: 6px;
}

/* h2 — 朱バー廃止。上罫+左マージン縦組み番号で装幀の書院規律へ。 */
.article-body h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.45;
  margin: 72px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  position: relative;
}
.article-body h2 .num {
  font-family: var(--serif);
  font-size: 0.45em;
  color: var(--mute);
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}
@supports (writing-mode: vertical-rl) {
  @media (min-width: 720px) {
    .article-body h2 {
      padding-left: 28px;
    }
    .article-body h2 .num {
      position: absolute;
      left: -10px;
      top: 14px;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      margin-bottom: 0;
      font-size: 11px;
      letter-spacing: 0.18em;
    }
  }
}
/* 章扉(scene-divider)直後のH2は上罫・番号を抑制 */
.article-body .scene-divider + h2 {
  border-top: none;
  padding-top: 0;
  margin-top: 24px;
}
.article-body .scene-divider + h2 .num {
  display: none;
}
@supports (writing-mode: vertical-rl) {
  @media (min-width: 720px) {
    .article-body .scene-divider + h2 {
      padding-left: 0;
    }
  }
}

.article-body h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  margin: 36px 0 8px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
/* 商品行内見出し(margin-note内) */
.article-body .margin-note .gear-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16.5px;
  margin: 0 0 4px;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: 0.01em;
  display: inline;
}

/* 章扉(scene-divider) — Day1-3は罫+漢字+番号のフル仕様。
   メタ章(肆/伍/終)は『縦組み小漢字+横一本罫』のミニ意匠に格下げ。 */
.article-body .scene-divider {
  margin: 56px 0 36px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--vermillion);
  font-family: var(--display);
  font-weight: 600;
  padding: 12px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px dashed var(--rule);
  position: relative;
}
.article-body .scene-divider .kanji {
  display: inline-block;
  padding: 4px 0;
  border-bottom: 2px solid var(--vermillion);
  font-size: 22px;
  line-height: 1;
}
.article-body .scene-divider .scene-name {
  font-family: var(--serif);
  font-size: 13.5px;
  letter-spacing: 0.12em;
  color: var(--mute-strong);
  flex: 1;
  font-weight: 500;
}
.article-body .scene-divider .kanji-vertical {
  font-family: var(--display);
  font-size: 13px;
  color: var(--mute);
  letter-spacing: 0.1em;
}
@supports (writing-mode: vertical-rl) {
  @media (min-width: 481px) {
    .article-body .scene-divider .kanji-vertical {
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }
  }
}

/* メタ系統 — 仕込み(肆)・失敗(伍)・終 はミニ意匠 */
.article-body .scene-divider.day4-divider,
.article-body .scene-divider.day5-divider,
.article-body .scene-divider.day6-divider {
  border-top: 1px solid var(--rule);
  border-bottom: none;
  padding: 8px 0;
  margin: 48px 0 28px;
  gap: 14px;
}
.article-body .scene-divider.day4-divider .kanji,
.article-body .scene-divider.day5-divider .kanji,
.article-body .scene-divider.day6-divider .kanji {
  font-size: 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--mute-strong);
  padding: 2px 0;
}
.article-body .scene-divider.day4-divider .scene-name,
.article-body .scene-divider.day5-divider .scene-name,
.article-body .scene-divider.day6-divider .scene-name {
  font-size: 12.5px;
  color: var(--mute);
}
.article-body .scene-divider.day4-divider .kanji-vertical,
.article-body .scene-divider.day5-divider .kanji-vertical,
.article-body .scene-divider.day6-divider .kanji-vertical {
  font-size: 11.5px;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. 商品 — 編集体裁(margin-note 余白注記+ 識別子→章注)
   全14品をカード=2 CTAボタングリッドから、本文に組み込む「余白注記」体裁へ。
   著者の一筆(why/aged)を主、リンクを従にする。
   ───────────────────────────────────────────────────────────────────────── */
.article-body .margin-note {
  margin: 22px 0 22px;
  padding: 14px 0 14px 18px;
  border-left: 1px solid var(--rule);
  max-width: 60ch;
  position: relative;
}
.article-body .margin-note .gear-marker {
  position: absolute;
  left: -56px;
  top: 14px;
  width: 44px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.12em;
  text-align: right;
  line-height: 1.4;
}
@media (max-width: 720px) {
  .article-body .margin-note {
    padding-left: 14px;
    margin-left: 0;
  }
  .article-body .margin-note .gear-marker {
    position: static;
    width: auto;
    text-align: left;
    margin-bottom: 6px;
    display: block;
  }
}

.article-body .margin-note .gear-name {
  font-weight: 700;
  color: var(--ink);
}
.article-body .margin-note .gear-why {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.85;
  margin: 6px 0 0;
}
.article-body .margin-note .gear-aged {
  font-size: 13.5px;
  color: var(--mute);
  line-height: 1.75;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
.article-body .margin-note .gear-aged::before {
  content: "──半年経時 ";
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--mute);
  margin-right: 6px;
}
.article-body .margin-note .gear-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--mute);
  margin-top: 8px;
}

/* 識別子のみの脚注的 CTA(本文に組み込まれた小さなインライン参照) */
.article-body .margin-note .gear-refs {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--mute);
}
.article-body .margin-note .gear-refs a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  margin-right: 14px;
  padding-bottom: 1px;
}
.article-body .margin-note .gear-refs a:hover {
  color: var(--vermillion);
  border-color: var(--vermillion);
}
.article-body .margin-note .gear-refs a::before {
  content: "→ ";
  color: var(--mute);
  margin-right: 2px;
}
/* 章注の脚紐(下端微小マーク) — 朱の希少化のため墨グレーで */
.article-body .margin-note::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 8px;
  height: 1px;
  background: var(--rule);
}

/* 章扉ヒーロー(記事冒頭の朱印章) — 本記事唯一の朱印 */
.article-head-mark {
  margin: 0 0 22px;
  display: block;
  width: 88px;
  height: 88px;
  color: var(--ink);
}
.article-head-mark .stamp { fill: var(--vermillion); }
.article-head-mark .line { fill: none; stroke: currentColor; stroke-width: 1.6; }
.article-head-mark .line-thin { fill: none; stroke: currentColor; stroke-width: 0.8; }

/* 公式リンク(ユニクロ/GU/無印) */
.official-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 28px;
  border-left: 2px solid var(--rule);
  padding-left: 16px;
}
.official-list li {
  font-size: 14.5px;
  margin: 0 0 8px;
  font-family: var(--serif);
}
.official-list li:last-child { margin-bottom: 0; }
.official-list a {
  border-bottom: 1px solid var(--rule);
}
.official-list a::after {
  content: " →";
  color: var(--mute);
  font-family: var(--mono);
  letter-spacing: 0;
  margin-left: 4px;
}
.official-list .badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 1px 6px;
  border: 1px solid var(--mute);
  color: var(--mute);
  margin-right: 10px;
  vertical-align: middle;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. PR/コンプライアンス表示
   ───────────────────────────────────────────────────────────────────────── */
.pr-strip {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--paper);
  background: var(--ink);
  padding: 8px var(--gutter);
  text-align: center;
}
.pr-strip strong {
  color: var(--paper);
  font-weight: 700;
  padding: 0 10px;
  margin: 0 8px;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

.disclosure {
  background: var(--paper-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 24px var(--gutter);
  font-size: 13px;
  line-height: 1.85;
  color: var(--mute-strong);
  margin: 56px 0 0;
}
.disclosure-inner { max-width: 760px; margin: 0 auto; }
.disclosure h4 {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin: 0 0 8px;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────
   7. フッタ(奥付)
   ───────────────────────────────────────────────────────────────────────── */
footer.colophon {
  background: var(--paper);
  border-top: 1px solid var(--ink);
  padding: clamp(56px, 8vw, 88px) var(--gutter) clamp(40px, 5vw, 56px);
  margin-top: 0;
}
.colophon-inner {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
}
.colophon-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 10px;
}
.colophon-title .accent { color: var(--mute); }
.colophon-tag {
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--mute);
  margin: 0 0 18px;
  max-width: 50ch;
}
.colophon-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
}
.colophon-links a { border-bottom: none; color: var(--mute-strong); }
.colophon-links a:hover { color: var(--vermillion); }
.colophon-imprint {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--mute);
  text-align: right;
  line-height: 1.9;
}
.colophon-imprint .seal-name { color: var(--mute-strong); font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────────
   8. 帰路リンク(記事末→ハブ)
   ───────────────────────────────────────────────────────────────────────── */
.way-home {
  margin: 64px 0 0;
  padding: 28px 0;
  border-top: 1px solid var(--ink);
  font-family: var(--serif);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.way-home a { font-size: 15px; border-bottom: 1px solid var(--rule); }
.way-home .home::before { content: "← "; }
.way-home .next-pending {
  font-size: 14px;
  color: var(--mute);
  font-family: var(--mono);
  letter-spacing: 0.1em;
}

/* ─────────────────────────────────────────────────────────────────────────
   9. About / Privacy 用 共通
   ───────────────────────────────────────────────────────────────────────── */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--gutter);
}
.legal-page h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 38px);
  margin: 0 0 8px;
  padding-left: 16px;
  border-left: 3px solid var(--vermillion);
}
.legal-page .lede {
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: var(--mute);
  margin: 0 0 36px;
  font-weight: 500;
}
.legal-page h2 {
  font-family: var(--serif);
  font-size: 19px;
  margin: 40px 0 8px;
  color: var(--ink);
  font-weight: 700;
}
.legal-page p, .legal-page li {
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 1em;
  color: var(--mute-strong);
}
.legal-page ul { padding-left: 20px; }
.legal-page a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.legal-page a:hover { color: var(--vermillion); border-color: var(--vermillion); }
.legal-page .legal-updated {
  margin-top: 36px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--mute);
}
.legal-page .legal-backlink {
  margin-top: 48px;
  font-family: var(--serif);
  font-size: 15px;
}
.legal-page .legal-backlink a { border-bottom: 1px solid var(--rule); }

/* ─────────────────────────────────────────────────────────────────────────
   10. レスポンシブ
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { overflow-x: hidden; }
  .binding-inner,
  .chapter-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .binding-counter {
    padding-top: 0;
  }
  .chapter-counter {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
  .chapter-body p.lede::first-letter {
    font-size: 2em;
    padding: 2px 6px 0 0;
  }
  .binding-colophon { gap: 8px 18px; font-size: 11.5px; }

  .colophon-inner { grid-template-columns: 1fr; }
  .colophon-imprint { text-align: left; }

  .author-byline-inner { grid-template-columns: 1fr; }
  .author-mark svg { width: 36px; height: 36px; }

  .article-body .scene-divider {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* Print friendly */
@media print {
  .pr-strip { display: none; }
  body {
    background: white;
    color: black;
    background-image: none;
  }
  a { color: black; }
  .paper-grain-svg { display: none; }
  .margin-note .gear-refs { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   11. アクセシビリティ — skip-nav(視覚的に隠し、focus時に表示)
   ───────────────────────────────────────────────────────────────────────── */
.skip-nav {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-bottom: none;
  z-index: 9999;
}
.skip-nav:focus,
.skip-nav:focus-visible {
  left: 16px;
  top: 12px;
  outline: 2px solid var(--vermillion);
  outline-offset: 3px;
  color: var(--paper);
}

/* ─────────────────────────────────────────────────────────────────────────
   12. margin-note 内 商品挿絵 — 装幀世界観の線画/押し台スタンプ感
   写真風gearではなく、白地紙・墨線・朱印の延長として馴染ませる
   ───────────────────────────────────────────────────────────────────────── */
.article-body .margin-note .gear-figure {
  float: right;
  width: 104px;
  margin: 0 0 10px 18px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 0 0 1px var(--paper-deep);
  position: relative;
}
.article-body .margin-note .gear-figure::after {
  /* 押し台スタンプ感の朱の角点(右下) */
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  background: var(--vermillion);
  opacity: 0.6;
}
.article-body .margin-note .gear-figure img {
  display: block;
  width: 100%;
  height: auto;
  /* 装幀世界観に合わせて若干セピア/墨寄せの紙質感 */
  filter: contrast(0.96) saturate(0.85);
  mix-blend-mode: multiply;
}

@media (max-width: 640px) {
  .article-body .margin-note .gear-figure {
    float: none;
    width: 96px;
    margin: 0 0 12px 0;
  }
}

/* ============================================================================
   §13 gear-photo ── Amazon公式写真の装幀枠
   gear-figure(装幀風挿絵=「記号」)とは差別化:
   - 単独枠 + 朱色1px罫 + 右上角点(蔵書印のリズム)
   - CTA直上に「これがそのもの」の明示として配置
   - 紙地への馴染ませは mix-blend-mode: multiply のみ(過剰加工しない)
   ──────────────────────────────────────────────────────────────────────── */
.article-body .margin-note .gear-photo {
  margin: 1.4rem 0 0.8rem;
  padding: 0.6rem 0.6rem 0.4rem;
  background: var(--paper);
  border: 1px solid var(--vermillion);
  border-radius: 0;
  text-align: center;
  position: relative;
  clear: both;
}
.article-body .margin-note .gear-photo::before {
  /* 装幀風の右上角点(gear-figureの右下とリズムを変える) */
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  background: var(--vermillion);
}
.article-body .margin-note .gear-photo img {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
  margin: 0 auto;
  mix-blend-mode: multiply;
}
.article-body .margin-note .gear-photo-caption {
  font-family: "Space Mono", monospace;
  font-size: 0.7rem;
  color: var(--ink);
  opacity: 0.55;
  letter-spacing: 0.05em;
  margin: 0.4rem 0 0 0;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .article-body .margin-note .gear-photo {
    padding: 0.5rem 0.4rem 0.3rem;
  }
  .article-body .margin-note .gear-photo img {
    max-width: 160px;
  }
}