/* ============================================================
   テーマ: machikoba（町工場ノート）— 「現場のクリップボード」
   クラフト紙 / ラスト橙 / 太角タグ / 無骨で読みやすい角ゴシック
   書体: Zen Kaku Gothic Antique ＋ Overpass Mono
   ============================================================ */
:root {
  --paper:    #F7F4EC;  /* クラフト寄りの紙 */
  --ink:      #211D17;
  --ink-soft: #645B4E;
  --grid:     #E4DCCB;
  --rule:     #D9CFB9;
  --pen:      #C9622B;  /* ラスト橙 */
  --pen-deep: #A24A1E;
  --marker:   #F3D6B2;
  --disp: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
  --mono: "Overpass Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
body { background-image: none; }
/* マストヘッド：上に太いアクセント帯＋下に濃インクの太罫（掲示物の額縁）*/
.masthead, .site-header { border-top: 6px solid var(--pen); border-bottom: 3px solid var(--ink); background: var(--paper); }
.site-footer { border-top: 3px solid var(--ink); }
.brand { font-weight: 700; letter-spacing: .01em; }  /* Zen Kaku Gothic Antique */
/* 蛍光一筆 → 太い塗りタグ */
.swipe::before {
  top: 2%; bottom: 0; left: -.14em; right: -.14em;
  background: var(--marker); transform: none; border-radius: 2px; mix-blend-mode: multiply;
}
/* 見出し：太い左バー（赤6px → 媒体色8px・太字書体）*/
h2 { border-left: 8px solid var(--pen); padding-left: .55em; }
.article-body h2 { border-left: 8px solid var(--pen); padding-left: .55em; border-top: none; padding-top: 0; }
h3::before { content: "■ "; color: var(--pen); font-size: .8em; }

/* ── 変数化されていない黄/赤tintを媒体色へ ── */
blockquote { background: color-mix(in srgb, var(--marker) 45%, transparent); border-left-color: var(--pen); }
.toc__list a:hover, .toc__list a:focus-visible { background: color-mix(in srgb, var(--marker) 50%, transparent); }
.topicnav__item:hover, .topicnav__item.is-active { background: color-mix(in srgb, var(--marker) 50%, transparent); }
.tokushu-cta__link { background: color-mix(in srgb, var(--marker) 35%, transparent); }
.tokushu-cta__link:hover { background: color-mix(in srgb, var(--marker) 55%, transparent); }
a.tk-item:hover { background: color-mix(in srgb, var(--marker) 28%, transparent); }
.thumb__mark { background: color-mix(in srgb, var(--marker) 85%, transparent); }
.calc-tab:hover { background: color-mix(in srgb, var(--pen) 8%, transparent); }
.calc-input:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pen) 14%, transparent); }
.cta__btn--ghost:hover { background: color-mix(in srgb, var(--pen) 8%, transparent); }