/* =========================================================
   隠しページ 共通。本編と 同じ 書体・紙・墨・赤で そろえる
   ページごとの 「時代の 見た目」は 各ページで 上書きする
   ========================================================= */
:root {
  --h-bg: #0b0a09;
  --h-paper: #e9e1cf;
  --h-paper2: #d8cdb5;
  --h-ink: #d9d0bf;
  --h-ink-soft: #8f8474;
  --h-ink-dark: #241c16;
  --h-red: #a3202a;
  --h-red-dark: #6a1010;
  --h-line: #2c2723;
  --h-mincho: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --h-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Meiryo", sans-serif;
  --h-hand: "Klee One", "Zen Maru Gothic", cursive;
  --h-dot: "DotGothic16", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--h-bg); color: var(--h-ink); font-family: var(--h-mincho); line-height: 1.9; overflow-x: clip; }
a { color: inherit; }
img { max-width: 100%; }
::selection { background: #3a0d0d; color: #ffb4b4; }

/* 粒子（js/fx/grain.js） */
#grain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; mix-blend-mode: overlay; }

/* ゆれ・反転（すべて コマ単位。フェードしない） */
body.h-shake > *:not(.h-gate):not(#grain) { animation: h-shake .12s steps(2) 1; }
@keyframes h-shake { 0% { transform: translate(4px, -2px) skewX(1deg); } 100% { transform: translate(-3px, 2px) skewX(-1deg); } }
body.h-inv { filter: invert(1); }
.h-static { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 99980; image-rendering: pixelated; pointer-events: none; }

/* 入口 */
.h-gate { position: fixed; inset: 0; z-index: 99990; display: grid; place-items: center; background: #050404; text-align: center; padding: 16px; }
.h-gate__lead { font-size: clamp(17px, 3.8vw, 22px); letter-spacing: .12em; margin: 0 0 .4em; }
.h-gate__sub { font-size: 12px; color: var(--h-ink-soft); letter-spacing: .1em; margin: 0 0 2.2em; }
.h-gate button { font: 600 16px var(--h-mincho); letter-spacing: .5em; padding: 10px 26px 10px 34px; background: none; color: var(--h-ink); border: 1px solid var(--h-ink-soft); cursor: pointer; }
.h-gate button:hover, .h-gate button:focus-visible { background: var(--h-ink); color: #000; outline: none; }

/* ぼかした 写真（押している あいだ 少しずつ 晴れる） */
.h-blur { --b: 0; position: relative; margin: 0; user-select: none; -webkit-user-select: none; touch-action: none; cursor: zoom-in; overflow: hidden; background: #000; }
.h-blur img { display: block; width: 100%; height: auto; filter: blur(calc(9px - var(--b) * 2.5px)) grayscale(calc(.55 - var(--b) * .12)) contrast(1.15) brightness(calc(.78 + var(--b) * .07)); transform: scale(calc(1.08 - var(--b) * .02)); pointer-events: none; -webkit-user-drag: none; }
.h-blur.clear img { filter: none; transform: none; }
.h-blur::after { content: '押して いる あいだだけ'; position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 11px; letter-spacing: .3em; color: rgba(255,255,255,.55); pointer-events: none; }
.h-blur.clear::after { content: ''; }
.h-blur figcaption { position: relative; padding: 8px 10px; font-size: 12px; color: var(--h-ink-soft); background: #0b0a09; }
.h-blur .h-mark { position: absolute; z-index: 2; font-family: var(--h-hand); color: #b00; display: none; pointer-events: none; }
.h-blur.clear .h-mark { display: block; }

/* 共通の 小物 */
.h-wrap { max-width: 760px; margin: 0 auto; padding: 48px 18px 120px; }
.h-small { font-size: 12px; color: var(--h-ink-soft); }
.h-back { position: fixed; top: 12px; left: 14px; z-index: 50; font-size: 12px; color: var(--h-ink-soft); text-decoration: none; letter-spacing: .1em; }
.h-redact { background: #111; color: #111; }
.h-vert { writing-mode: vertical-rl; }
@media print { #grain, .h-gate { display: none !important; } }
@media (prefers-reduced-motion: reduce) { body.h-shake > * { animation: none !important; } body.h-inv { filter: none; } }