/* ============================================================
   書体（自ホスト・OFL）
   Google Fonts の日本語は unicode-range で732ファイル・約27MBに分割されている。
   必要な字だけを抜いた woff2 を自前で作って置いている。
   作り直しは tools/fonts/build.py（記事が増えて字が足りなくなったら走らせる）。
   ライセンス本文は assets/fonts/OFL-*.txt
   ============================================================ */
@font-face {
  font-family: "Zen Old Mincho";           /* 本文 */
  src: url("fonts/zenold-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho B1";       /* 見出し・演目名・数字・題簽 */
  src: url("fonts/shippori-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho B1";       /* 外題 */
  src: url("fonts/shippori-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
/* 英語版（/en/）の本文。ラテンだけなので二つ合わせて約115KB。
   ⚠️ イタリックは必須。body の font-synthesis: none で合成が止まるので、
   実体が無いと <i>（ローマ字の術語・作品名）が直立のまま出る */
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/garamond-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/garamond-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ============================================================
   歌舞伎あるき LP プロトタイプ v0
   コンセプト: 古紙・和紙 × 江戸 × ハイテク（ヌルヌル動く）
   外部ライブラリなし・自前実装
   ============================================================ */
:root {
  --washi: #f2ead8;        /* 生成り（和紙） */
  --washi-deep: #e8dcc0;   /* 焼けた和紙 */
  --sumi: #211c17;         /* 墨 */
  --sumi-usui: #57493c;    /* 薄墨 */
  --shu: #b23a2f;          /* 朱 */
  --shu-fukai: #8c2b22;    /* 深い朱 */
  --kin: #b8963e;          /* 金 */
  --kumo: #ece2cb;         /* すやり霞の雲 */
  --ai: #3d5a6c;           /* 藍（川の色） */
  /* 群青。本所絵図の川がすでに画面へ寒色を持ち込んでいるので、それを意図として拾う。
     朱は「強調」、群青は「場所と骨組み」と役を分ける（二つの強調色で殴り合わせない） */
  --gunjo: #2d4a6b;
  --gunjo-usui: #4d6d8f;
  /* 本文。落ちてくるまでは端末の明朝でしのぐ */
  --serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  /* 表示用（外題・題簽・見出し・演目名・数字）。縦画が太く木版の彫りに近い */
  --serif-hyoji: "Shippori Mincho B1", "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* 英語版の本文。和文明朝のラテンは短い添え書きなら持つが、英文が本文として
     続くと字面が持たない（STRATEGY §8.5 論点2）。自ホスト済み・OFL。
     ⚠️ 和文を後ろに置いてあるのは、英語ページに混じる漢字（出所表記の書名など）の
        受け皿。ここを外すと端末の既定書体に落ちて画面の中で浮く */
  --serif-en: "EB Garamond", "Zen Old Mincho", "Iowan Old Style", Palatino, Georgia, serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--serif);
  background: var(--washi);
  color: var(--sumi);
  /* overflow-x: hidden はスクロールコンテナ化して position: sticky を壊すため clip を使う */
  overflow-x: clip;
  line-height: 1.9;
  /* 本文の太ウェイトは持っていない。偽の太字を作らせない
     （強調は朱色で立てる。明朝の太字はもともと近代の発明でもある） */
  font-synthesis: none;
}
/* 和紙の質感（全体に繊維ノイズを敷く） */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.26 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
}
/* 和紙の耳（左右のわずかな影） */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 999;
  box-shadow: inset 0 0 120px rgba(87, 62, 30, .18);
}

/* ============ ヒーロー：錦絵の摺り ============
   白紙の和紙に版を一枚ずつ重ねて、一枚の錦絵が摺り上がる。
   色版は原画そのものから inline SVG の feColorMatrix で抜いている（下の #sep-* 参照）。
   摺順は lp.js の PLATES 配列の並びがそのまま順序になる。
   ============================================================ */
.hero-track { height: 320vh; position: relative; }
.hero {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* 摺台（紙を置く板。中央を起こし、四隅を沈めて紙を浮かせる） */
.dai {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 78% 62% at 50% 46%, rgba(255, 251, 240, .72) 0%, rgba(255, 251, 240, 0) 70%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(120, 96, 60, .16) 100%);
}
/* ============ 地染め（じぞめ）— 摺った色が紙を抜けて、下の大和紙へ ============
   中央の .kami は摺台に置かれた小さな一枚。版を摺るたび、その色が紙を抜けて
   下の大きな和紙へ落ち、繊維に沿って左右へ走る。
   .ban が multiply で紙の「上に載る」（インキ）のに対し、こちらは紙の「中に入る」。

   形を作らないための決まり（v0.5の破綻はここを外したこと）:
     滲みの縁は「画面の外」か「紙の裏」にしか置かない。
     ・帯の幅は常に画面幅より広く取り、左右の縁を画面外へ出す
     ・濃度の頂点(--gx, --cy)は必ず紙の裏に置く。見えるのは常に裾だけ
     ・裾の外側20%は密度の7.5%未満しか持たない（知覚閾以下＝境界が見えない）

   置き場所は .dai より前＝下。.dai 中央のハイライトが上から乗るので、
   絵に近いほど色が澄み、離れるほど染まる＝減衰を自前で書かずに済む。

   グラデはピーク alpha を 1.0 で塗り、濃度は要素の opacity で与える。
   層のテクスチャが8bitの階調をフルに使い、合成側はfloatで掛けるので、
   低アルファのグラデにつきもののバンディングが原理的に出ない。 */
.jizome-ba {
  position: absolute; inset: 0;   /* .dai の直前に挿すので z-index は不要 */
  pointer-events: none;
  contain: layout paint;          /* 無効化の波及をここで止める */
}
.jizome {
  position: absolute;
  left:  calc(50% - var(--w) / 2);
  width: var(--w);
  top:    calc(var(--cy) - var(--h) * var(--jz-h, 1) / 2);
  height: calc(var(--h) * var(--jz-h, 1));
  opacity: 0;
  transform: scale(.94, .55);     /* JSの初期値と一致させる */
  will-change: opacity, transform;
  /* 色（--iro）は lp.js が PLATES[i].iro と和紙色の積から作る。
     ここに色を書かない＝色の情報源は PLATES ひとつのまま */
  background: radial-gradient(ellipse 50% 50% at var(--gx) 50%,
    rgb(var(--iro) / 1)    0%,
    rgb(var(--iro) / .78) 22%,
    rgb(var(--iro) / .50) 40%,
    rgb(var(--iro) / .24) 60%,
    rgb(var(--iro) / .075) 80%,
    rgb(var(--iro) / 0)  100%);
}
/* 摺り上がったら合成レイヤーを手放す（JSが .suriage を付ける） */
.hero.suriage .jizome { will-change: auto; }

/* ============ 花吹雪 — 摺台の空に桜が降る ============
   絵の中の助六の周りにはすでに桜が舞っている。それが紙の外へ飛び火する見立て。
   地染めが「摺り上がりで引く」のに対し、こちらは**引かずに最後まで降り続ける**。

   奥と手前の二枚に分けてあるのは、一枚だと紙との前後が作れず、
   花びらが全部同じ平面に貼り付いて「背景の模様」になってしまうため。
   要素は lp.js が作って .hero へ入れる（動きを減らす設定では一枚も作らない）。 */
.hana { position: absolute; inset: 0; pointer-events: none; }
.hana-oku { z-index: 5; }   /* .dai より上・.kami(10) より下 */
.hana-mae { z-index: 20; }  /* .kami(10) より上・ツケ(21) と外題(30) より下 */

/* 紙（摺られる一枚。地色は摺り進むにつれて生成りへ沈む＝JSで補間） */
.kami {
  position: relative;
  z-index: 10;
  width: min(46svh, 70vw, 400px);
  aspect-ratio: 529 / 800;
  background: var(--kami-iro, #f7f1e0);
  padding: 6px;
  box-shadow: 0 16px 44px rgba(60, 45, 25, .26), 0 1px 0 rgba(255, 255, 255, .7) inset;
}
/* 紙の耳（縁のわずかな毛羽立ち） */
.kami::after {
  content: ""; position: absolute; inset: -3px;
  border: 3px solid rgba(250, 245, 232, .8);
  filter: blur(2px);
  pointer-events: none;
}
/* 各版。乗算で紙に摺り重ねる */
.ban {
  position: absolute; inset: 6px;
  width: calc(100% - 12px); height: calc(100% - 12px);
  object-fit: cover;
  opacity: 0;
  mix-blend-mode: multiply;
  will-change: transform, opacity;
}
/* 摺り上がりの一枚だけは原画そのもの。乗算にすると重ねた版の分だけ沈むので通常合成。
   これで着地は必ず原画と同一になり、分解フィルタの精度に最終形が左右されない */
.ban-zen { mix-blend-mode: normal; }
/* 版とフィルタの結び付け。PLATES の並びを変えてもここは触らなくてよい */
#ban-usubeni { filter: url(#sep-usubeni); }
#ban-kusa    { filter: url(#sep-kusa); }
#ban-beni    { filter: url(#sep-beni); }
#ban-sumi    { filter: url(#sep-sumi); }

/* 見当（きっけん）。摺っているあいだだけ見せる */
.kento {
  position: absolute; z-index: 12; pointer-events: none;
  stroke: var(--shu); stroke-width: 2.5; fill: none; opacity: 0;
}
.kento-kagi { left: -22px; bottom: 12%; width: 26px; height: 38px; }
.kento-hikitsuke { right: -22px; bottom: 12%; width: 26px; height: 38px; }

/* 摺順の札（版が摺られるたびに一行ずつ増える） */
.fuda {
  position: absolute; z-index: 30;
  left: clamp(12px, 4vw, 76px); top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: clamp(.72rem, 1.75vmin, .92rem);
  letter-spacing: .28em;
  line-height: 1;
}
.fuda span {
  display: block;
  margin-left: .9em;
  white-space: nowrap;
  opacity: 0;
}

/* 題簽（だいせん）— 和本の表紙に貼る題名の紙。
   外題を摺りへ返した代わりに、ここが最初の一画面での名乗りを引き受ける。
   将来サイト本体を作るときのヘッダーの先取りでもある。 */
@keyframes shizuka-ni { from { opacity: 0; } to { opacity: 1; } }
.daisen {
  position: absolute;
  top: clamp(18px, 4vh, 46px);
  left: clamp(16px, 4vw, 54px);
  z-index: 32;
  writing-mode: vertical-rl;
  font-family: var(--serif-hyoji);
  font-weight: 600;
  padding: 15px 8px 17px;
  background: linear-gradient(160deg, #fbf6e9, #f2e8d0);
  color: var(--sumi);
  font-size: clamp(.86rem, 1.6vmin, 1rem);
  letter-spacing: .16em;
  line-height: 1;
  border: 1px solid rgba(87, 73, 60, .45);
  box-shadow: 0 2px 7px rgba(60, 45, 25, .2);
  transform: rotate(-.6deg); /* 貼った紙のわずかな傾き */
  opacity: 0;
  animation: shizuka-ni 1.2s ease 1.5s both;
}
.daisen::after { /* 題簽の内罫 */
  content: ""; position: absolute; inset: 3px;
  border: 1px solid rgba(87, 73, 60, .25);
  pointer-events: none;
}

/* 外題（版の数だけ重なり、摺りと同じ順で寄って合う）
   重ねる版は lp.js が PLATES から生成する。摺順を入れ替えれば外題も追従する。 */
.hero-title {
  position: absolute;
  right: clamp(12px, 5vw, 110px);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  z-index: 30;
}
.hero-title .kasane { position: relative; }
.hero-title .han {
  /* 縦組み（vertical-rl）では行の進む向きが右→左なので、基準は right でとる */
  position: absolute; top: 0; right: 0;
  margin: 0;
  font-family: var(--serif-hyoji);
  font-size: clamp(1.9rem, 6.2vmin, 3.9rem);
  font-weight: 800;
  letter-spacing: .22em;
  white-space: nowrap;
  mix-blend-mode: multiply;
  opacity: 0;
  will-change: transform, opacity;
}
.hero-title h1.han { position: relative; }
.hero-title .sub {
  margin-top: 1.2em;
  margin-right: 1.2em;
  font-size: clamp(.8rem, 2.1vmin, 1.02rem);
  letter-spacing: .3em;
  color: var(--sumi-usui);
  white-space: nowrap;
  opacity: 0;
}
/* 朱印（落款） */
.rakkan {
  position: absolute;
  left: clamp(14px, 5vw, 92px);
  bottom: clamp(54px, 11vh, 116px);
  width: clamp(46px, 6vmin, 58px);
  aspect-ratio: 1;
  background: var(--shu);
  color: var(--washi);
  writing-mode: vertical-rl;
  display: grid; place-items: center;
  font-family: var(--serif-hyoji);
  font-weight: 600;
  font-size: clamp(.8rem, 1.9vmin, .95rem);
  letter-spacing: .1em;
  border-radius: 6px;
  box-shadow: 2px 3px 8px rgba(140, 43, 34, .35);
  z-index: 30;
  line-height: 1.25;
  opacity: 0;
}
/* ============ ツケ打ち ============
   墨の版が落ちて絵が締まる瞬間＝この演出の見得。そこへツケを二つ入れる。
   黒の輪が弾け、わずかに遅れて朱の輪が追う。

   スクロール進行度に直に繋がず、閾値を越えた瞬間に一度だけCSSアニメーションを
   走らせている。ツケは「速い二連打」であることが本体なので、
   ゆっくり巻き戻せばゆっくり鳴る、では鳴ったことにならない。 */
@keyframes tsuke-utsu {
  /* 波紋ではなく打撃。立ち上がりを詰め、半ばで消し切る */
  0%   { opacity: 0;  transform: translate(-50%, -50%) scale(.40); }
  6%   { opacity: 1;  }
  50%  { opacity: 0;  transform: translate(-50%, -50%) scale(1.34); }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(1.38); }
}
/* 打たれた紙が一瞬とぶ。見得は「極まる」ものなので、
   輪を大きくするより紙が動くほうが打撃として効く */
@keyframes tsuke-haneru {
  0%   { transform: scale(1); }
  12%  { transform: scale(1.022); }
  38%  { transform: scale(.995); }
  100% { transform: scale(1); }
}
/* 閃光。長く光ると雷になるので、90msで抜く */
@keyframes tsuke-senko {
  0%   { opacity: 0; }
  8%   { opacity: .3; }
  100% { opacity: 0; }
}
.tsuke {
  position: absolute; left: 50%; top: 50%;
  /* 紙と同じ寸法。輪は絵の中から生まれて縁を少し越える */
  width: min(46svh, 70vw, 400px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid var(--sumi);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.44);
  pointer-events: none;
  z-index: 22;
}
.tsuke-2 { border-color: var(--shu); border-width: 3px; }
.tsuke-3 { border-color: var(--sumi); border-width: 2px; }
/* 閃光の面 */
.tsuke-senko {
  position: absolute; inset: 0; z-index: 21;
  background: radial-gradient(ellipse 62% 52% at 50% 46%,
    #fff6e2 0%, rgba(255, 246, 226, .35) 46%, rgba(255, 246, 226, 0) 76%);
  opacity: 0; pointer-events: none; mix-blend-mode: screen;
}
.hero.tsuke-utsu .tsuke        { animation: tsuke-utsu .44s cubic-bezier(.1, .8, .3, 1) both; }
.hero.tsuke-utsu .tsuke-2      { animation-delay: .14s; }
.hero.tsuke-utsu .tsuke-3      { animation-delay: .28s; }
.hero.tsuke-utsu .tsuke-senko  { animation: tsuke-senko .5s ease-out both; }
.hero.tsuke-utsu .kami         { animation: tsuke-haneru .46s cubic-bezier(.2, .9, .25, 1) both; }

/* ============ 定式幕 ============
   【向き】下手（客席から見て左）から上手（右）へ**開く**。
   閉じるのが「上手から下手」なので、開くのはその逆。
   出典: Wikipedia「定式幕」（現在は上手から下手に引いて閉じるのが普通／
   江戸時代は下手から上手に引いて閉じていた）。運営者調査で確認・2026-08-10。
   → 幕は右へ動き、左側から先に見えてくる。

   【配色＝中村座式（黒・白・柿）】
   ⚠️ 歌舞伎座の並び（黒・柿・萌葱＝森田座式）は**松竹（株式会社歌舞伎座）が
   商標登録している**。同社は「デザインを使用するにあたり、同社の許諾が必要に
   なる場合があります」と明記している。
   出典: https://www.shochiku.co.jp/engeki/kabuki-license/a_right/
   → 登録されている並びを避け、**中村座式**を採る。色そのものが違う（萌葱→白）
     ので紛れがなく、しかも近所が中村座跡というこのサイトの縁に合う。
   配色を替えるときは下の3つの変数だけを差し替える:
     中村座式  #1c1714 / #efe6d1 / #b0552c （黒・白・柿）… 採用
     市村座式  #1c1714 / #2c5545 / #b0552c （黒・萌葱・柿）＝国立劇場
     森田座式  #1c1714 / #b0552c / #2c5545 （黒・柿・萌葱）＝歌舞伎座【商標】

   【動き】縞の比率は保ったまま前縁が走る。実際の見えは布がたぐり寄せられる
   のではなく、縞幅を保って引かれていく。だから scaleX ではなく translateX。

   【布の質感】色帯はフラットに保つ。縞と同じ周期の影を入れると
   「一色の中に2ブロック」に見えてしまう（前回の失敗はこれ）。
   質感は ①縞よりずっと細かい織り目 ②幕全体を通す縦の光 ③引かれる縁の折り返し
   の三つだけで出す。どれも色帯を分割しない。

   スクロール駆動にすると p=0 のとき画面が幕だけになり、「下へ」の誘いまで
   幕の裏に隠れて何も伝わらない。幕開きだけは読み込み時に一度演じ、
   以降の摺りをスクロールに渡す。 */
@keyframes maku-hiku {
  from { transform: translateX(0); }
  to   { transform: translateX(101%); }
}
.hikimaku {
  position: absolute; inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}
.hikimaku-nuno {
  --maku-1: #1c1714;  /* 黒 */
  --maku-2: #efe6d1;  /* 白（さらしの生成り） */
  --maku-3: #b0552c;  /* 柿 */
  position: absolute; inset: 0;
  will-change: transform;
  background: repeating-linear-gradient(90deg,
    var(--maku-1) 0 42px, var(--maku-2) 42px 84px, var(--maku-3) 84px 126px);
  animation: maku-hiku 1.3s cubic-bezier(.45, 0, .3, 1) .45s both;
}
/* 織り目。縞（42px）よりはるかに細かい 1px の格子なので色帯を分割しない。
   経糸をわずかに強く出すと、平織の布らしい詰まりが出る */
.hikimaku-nuno::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 1px, rgba(0,0,0,0) 1px 2px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.07) 0 1px, rgba(255,255,255,.03) 1px 2px);
  mix-blend-mode: overlay;
}
/* 光。幕全体を通す縦のグラデーション一枚。縦方向なので縞は分割されない。
   上は幕溜まりの影、中ほどが最も明るく、裾へ向かって布の重みで沈む。
   引かれる縁（左）だけ、折り返しの細い光と影を重ねる */
.hikimaku-nuno::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.42) 0%, rgba(255,255,255,.13) 1.4%,
      rgba(0,0,0,.22) 4%, rgba(0,0,0,0) 13%),
    linear-gradient(180deg,
      rgba(0,0,0,.26) 0%, rgba(0,0,0,.04) 12%,
      rgba(255,255,255,.05) 34%, rgba(0,0,0,.06) 62%, rgba(0,0,0,.3) 100%);
}
/* スクロール誘い */
.scroll-cue {
  position: absolute;
  bottom: 62px; left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  writing-mode: vertical-rl;
  font-size: .8rem;
  letter-spacing: .35em;
  color: var(--sumi-usui);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: translate(-50%, 0); opacity: .85; }
  50% { transform: translate(-50%, 10px); opacity: .35; }
}
/* 出所明記（CC0で表示義務はないが、当サイトの規則として必ず出す） */
.shussho {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  max-width: min(94vw, 780px);
  text-align: center;
  font-size: .62rem;
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--sumi-usui);
  opacity: .8;
}
.shussho a { color: inherit; }

/* ============ 共通セクション ============ */
section.block {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(70px, 12vh, 140px) clamp(20px, 5vw, 48px);
}
.block-head {
  display: flex;
  align-items: baseline;
  gap: 1.2em;
  margin-bottom: 2.6em;
  position: relative;
}
.block-head h2 {
  font-family: var(--serif-hyoji);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  letter-spacing: .18em;
  font-weight: 600;
}
.block-head .en {
  font-size: .78rem;
  letter-spacing: .3em;
  color: #9a7a2c;
  text-transform: uppercase;
}
.block-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--gunjo), rgba(45, 74, 107, 0));
  opacity: .55;
}
/* 隈取の紅筋。見出しの下を朱の払いが一本走る。
   面ではなく線なので、絵の外側に第二の絵を作ってしまう例の失敗にはならない。
   両端を消して筆の入りと抜きにし、わずかに傾けて「引いた跡」に見せる */
.block-head .beniSuji {
  position: absolute;
  left: -.15em; bottom: -.62em;
  height: 11px;
  width: var(--w, 168px);
  /* 筆の入りは細く鋭く、腹で最も濃く、抜きで掠れる */
  background: linear-gradient(90deg,
    rgba(178, 58, 47, 0) 0%, var(--shu) 10%, #a32c22 42%, var(--shu-fukai) 68%,
    rgba(140, 43, 34, .5) 88%, rgba(140, 43, 34, 0) 100%);
  transform: skewX(-16deg) scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) .15s;
  border-radius: 2px 9px 9px 2px;
  box-shadow: 0 1px 3px rgba(140, 43, 34, .28);
}
.block-head.on .beniSuji { transform: skewX(-16deg) scaleX(1); }
/* ふわっと現れる */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.22, 1, .36, 1);
}
.reveal.on { opacity: 1; transform: none; }

/* ============ 口上（コンセプト） ============ */
.kojo {
  text-align: center;
}
.kojo p.lead {
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  letter-spacing: .12em;
  line-height: 2.4;
}
.kojo p.lead strong {
  /* 本文の太ウェイトを持たないので、強調は色で立てる */
  color: var(--shu-fukai);
  font-weight: 400;
}
/* ============ 数字 ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  margin-top: 3em;
}
.stat {
  border: 1px solid rgba(87, 73, 60, .3);
  background: rgba(255, 252, 244, .5);
  padding: 26px 14px 20px;
  text-align: center;
  position: relative;
}
.stat::before {
  content: "";
  position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px solid rgba(184, 150, 62, .35);
  pointer-events: none;
}
.stat .num {
  font-family: var(--serif-hyoji);
  /* 4桁の年が折り返さない上限。ここを上げると「2016」と「年〜」が泣き別れる */
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--shu-fukai);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
.stat .num small { font-size: .45em; color: var(--sumi-usui); }
.stat .label {
  margin-top: .4em;
  font-size: .82rem;
  letter-spacing: .15em;
  color: var(--sumi-usui);
}

/* ============ 古地図（本所絵図） ============ */
.ezu { margin: 0; }
.ezu-ba {
  position: relative;
  border: 1px solid rgba(87, 73, 60, .35);
  background: var(--washi-deep);
  box-shadow: 0 10px 30px rgba(60, 45, 25, .16);
}
.ezu-zu { display: block; width: 100%; height: auto; }

/* ピン。位置は絵図に対する百分率で持つので、拡大縮小しても付いて回る */
.ezu-pin {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: .5em;
  white-space: nowrap;
  font-size: clamp(.68rem, 1.35vw, .82rem);
  line-height: 1.35;
  pointer-events: none;
}
.ezu-pin::before { /* 点 */
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--shu);
  box-shadow: 0 0 0 2px var(--washi), 0 1px 4px rgba(60, 30, 20, .5);
}
.ezu-pin b, .ezu-pin i {
  display: block;
  font-style: normal;
  font-weight: 400;
}
.ezu-pin b {
  font-family: var(--serif-hyoji);
  font-weight: 600;
  color: var(--sumi);
  background: rgba(255, 252, 244, .88);
  padding: .1em .5em;
  border: 1px solid var(--shu);
}
.ezu-pin i {
  font-size: .8em;
  color: var(--sumi-usui);
  background: rgba(255, 252, 244, .78);
  padding: 0 .5em;
}
/* 照合中は破線で、読み取れたものと見分けがつくようにする＝
   「わからないことは正直に」を地図の上でもやる */
.ezu-pin.shoukou::before { background: transparent; border: 2px dashed var(--shu); width: 13px; height: 13px; }
.ezu-pin.shoukou b { border-style: dashed; color: var(--sumi-usui); }
/* 絵図の左端に近いピンは、札を横へ出すと絵からはみ出るので下へ回す */
.ezu-pin.tate {
  flex-direction: column;
  align-items: flex-start;
  gap: .25em;
  transform: translate(-5px, -5px);
}

figcaption { margin-top: 1.1em; }
.ezu-shussho {
  font-size: .76rem;
  line-height: 1.9;
  color: var(--sumi-usui);
  letter-spacing: .03em;
}
.ezu-shussho b { font-weight: 400; color: var(--sumi); }
.ezu-shussho a { color: inherit; }

/* 絵図に刷られている凡例をそのまま起こしたもの */
.ezu-hanrei {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5em 1.4em;
  margin: 1.2em 0 1em;
  padding: .9em 1.1em;
  border: 1px solid rgba(87, 73, 60, .28);
  background: rgba(255, 252, 244, .5);
  font-size: .78rem;
  color: var(--sumi-usui);
}
.ezu-hanrei > span { display: flex; align-items: center; gap: .45em; }
.ezu-hanrei-mi {
  font-family: var(--serif-hyoji); font-weight: 600;
  color: var(--sumi); letter-spacing: .1em;
}
.ezu-hanrei .mi { flex: none; width: 15px; height: 11px; display: block; }
.ezu-hanrei .mon { width: 11px; height: 11px; border-radius: 50%; background: #a4472e; }
.ezu-hanrei .kaku { width: 10px; height: 10px; background: #3b332a; }
.ezu-hanrei .maru { width: 10px; height: 10px; border-radius: 50%; background: #3b332a; }
.ezu-hanrei .iro { border: 1px solid rgba(87, 73, 60, .4); }
.ezu-hanrei .shu { background: #e0704a; }
.ezu-hanrei .hai { background: #cfc9bd; }
.ezu-hanrei .ki { background: #f0c64a; }
.ezu-hanrei .ao { background: #3d7ab0; }
.ezu-hanrei .midori { background: #4f7a5c; }

.ezu-tadashi {
  font-size: .8rem;
  line-height: 2;
  color: var(--sumi-usui);
}
.ezu-tadashi b { font-weight: 400; color: var(--shu-fukai); }

@media (max-width: 640px) {
  /* 幅が足りないと札が絵図を覆うので、点だけ残す */
  .ezu-pin b, .ezu-pin i { display: none; }
  .ezu-hanrei { gap: .4em .9em; font-size: .72rem; }
}

/* ============ 演目カード ============ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.card {
  background: rgba(255, 252, 244, .55);
  border: 1px solid rgba(87, 73, 60, .3);
  padding: 30px 24px 22px;
  position: relative;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}
/* 札の上辺に定式幕を渡す（中村座式・黒白柿）。触ると幕がもう一段引かれる */
.card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg,
    #1c1714 0 14px, #e8dcc0 14px 28px, #b0552c 28px 42px);
  box-shadow: inset 0 -1px 0 rgba(33, 28, 23, .4);
  transform-origin: left center;
  transform: scaleY(1);
  transition: height .45s cubic-bezier(.22, 1, .36, 1);
}
.card:hover::before { height: 10px; }
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(60, 45, 25, .16);
}
.card .enmoku {
  font-family: var(--serif-hyoji);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .1em;
  margin-bottom: .35em;
}
.card .basho {
  color: var(--gunjo);
  font-size: .92rem;
  letter-spacing: .08em;
  margin-bottom: .8em;
}
.card .basho::before { content: "◉ "; font-size: .8em; }
.card p.desc {
  font-size: .88rem;
  color: var(--sumi-usui);
  line-height: 2;
}
.card .tag {
  display: inline-block;
  margin-top: 1em;
  font-size: .72rem;
  letter-spacing: .12em;
  padding: 3px 10px;
  border: 1px solid var(--kin);
  color: #8a6f2c;
}
.card .tag.pending { border-color: rgba(87, 73, 60, .4); color: var(--sumi-usui); }
/* 記事が公開された札はカードごとリンクにする（a要素）。意匠は divの札と同一に保つ */
a.card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.card .tag.yomeru { border-color: var(--shu); color: var(--shu); }
a.card:hover .tag.yomeru { background: var(--shu); color: var(--washi); }

/* ============ 作法（制作方針） ============ */
.sahou {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
}
.sahou .rule { border-top: 2px solid var(--shu); padding-top: 1em; }
.sahou .rule h3 {
  font-family: var(--serif-hyoji);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .15em;
  margin-bottom: .5em;
}
.sahou .rule p { font-size: .85rem; color: var(--sumi-usui); }

/* 再演（本文を読み終わったところで、もう一度幕を開ける） */
.saien-wrap { text-align: center; margin: 0 0 6vh; }
.saien {
  font-family: var(--serif);
  font-size: .84rem;
  letter-spacing: .22em;
  color: var(--shu-fukai);
  background: rgba(255, 252, 244, .6);
  border: 1px solid rgba(140, 43, 34, .45);
  padding: 10px 26px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.saien:hover { background: var(--shu-fukai); color: var(--washi); }
.saien:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }

/* ============ フッター ============ */
footer {
  margin-top: 6vh;
  padding: 48px 24px 60px;
  text-align: center;
  border-top: 1px solid rgba(87, 73, 60, .25);
}
footer .joushikimaku {
  height: 18px;
  margin: -48px -24px 40px;
  /* 中村座式（黒・白・柿）。歌舞伎座の並びは松竹の登録商標なので使わない。
     白の帯は地の和紙とほぼ同じ明るさなので、そのまま置くと溶けて消える。
     ①上下の際を墨で締め ②布の光を通し ③織り目を入れる の三段で帯として立たせる */
  background:
    linear-gradient(180deg,
      rgba(33,28,23,.6) 0 1px, rgba(0,0,0,0) 1px calc(100% - 1px),
      rgba(33,28,23,.4) calc(100% - 1px) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,.26) 0%, rgba(255,255,255,.07) 44%, rgba(0,0,0,.18) 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.11) 0 1px, rgba(0,0,0,0) 1px 2px),
    repeating-linear-gradient(90deg,
      #1c1714 0 42px, #efe6d1 42px 84px, #b0552c 84px 126px);
}
footer p { font-size: .82rem; color: var(--sumi-usui); letter-spacing: .1em; }
footer a { color: var(--shu-fukai); text-decoration-color: rgba(140, 43, 34, .4); }
footer a:hover { color: var(--shu); }
/* 出所の誤認がいちばんの火種なので、非公式であることは明示しておく */
footer .hikoushiki { margin: .9em 0 .5em; color: var(--sumi); }
footer .domain {
  font-family: var(--serif-hyoji);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .25em;
  color: var(--sumi);
  margin-bottom: .6em;
}

/* モバイル調整 */
@media (max-width: 640px) {
  /* 紙を細くし、外題も詰める。375px幅で 札 / 紙 / 外題 が重ならない実測値 */
  .kami { width: min(46svh, 54vw, 400px); }
  /* 紙が細くなるぶん地染めの帯の丈を詰め、画面に対する面積比を戻す */
  .hero { --jz-h: .78; }
  .tsuke { width: min(46svh, 54vw, 400px); } /* 紙に合わせる */
  .hero-title { right: 2.5vw; }
  .hero-title .han { font-size: 1.55rem; letter-spacing: .18em; }
  .hero-title .sub { font-size: .66rem; letter-spacing: .2em; margin-right: .55em; }
  .fuda { left: 3vw; font-size: .68rem; }
  .fuda span { margin-left: .55em; }
  .rakkan { left: 4vw; bottom: 8.5vh; }
  .kento { display: none; }
  /* 出所が4行になるぶん、スクロール誘いを上へ逃がす */
  .scroll-cue { bottom: 92px; }
  .shussho { font-size: .6rem; bottom: 8px; }
}
/* 動きを減らす設定の尊重 — 摺り上がった一枚だけを静止画として見せる */
@media (prefers-reduced-motion: reduce) {
  .hero-track { height: 100svh; }
  .hikimaku, .fuda, .kento { display: none; }
  .ban { display: none; }
  .ban-zen { display: block; opacity: 1 !important; transform: none !important;
             mask-image: none !important; -webkit-mask-image: none !important; }
  .hero-title p.han { display: none; } /* 生成された色版は出さない */
  .hero-title h1.han, .hero-title .sub, .rakkan, .daisen { opacity: 1 !important; transform: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue { animation: none; }
  .saien-wrap { display: none; } /* 演じ直すものが無い */
  .jizome { will-change: auto; }
  .tsuke, .tsuke-senko { display: none; } /* 打つべき瞬間が無い */
}

/* ============================================================
   英語版（/en/）の上書き
   方針は STRATEGY §8.5 論点2「絵は縦のまま、道具は横へ」。
     縦のまま残す = 題簽・外題・落款（名乗りと印＝絵。日本語のまま lang="ja" を付けてある）
     横に倒す     = 摺順の札・スクロールの誘い・外題の副題（読ませる情報と操作の道具）
   ⚠️ ここに書くのは「向き」と「英字のための寸法」だけ。
      配色・演出・進行度に関わる値は日英で共有する（二重管理にしない）。
   ============================================================ */
[lang="en"] .fuda {
  writing-mode: horizontal-tb;
  left: clamp(12px, 4vw, 76px);
  letter-spacing: .12em;
  line-height: 1.15;
  font-size: clamp(.66rem, 1.5vmin, .82rem);
}
[lang="en"] .fuda span {
  margin-left: 0;
  margin-top: .9em;
  font-variant-numeric: tabular-nums;
}
[lang="en"] .fuda span:first-child { margin-top: 0; }

[lang="en"] .scroll-cue {
  writing-mode: horizontal-tb;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: .68rem;
}

/* 外題は縦の日本語のまま。副題だけを横に倒し、題字の左に添える
   （縦組みは右→左に流れるので、あとに置いた要素が左へ回る＝題字の脇に付く） */
[lang="en"] .hero-title .sub {
  writing-mode: horizontal-tb;
  margin: 0 1.1em 0 0;
  /* ⚠️ 親（.hero-title）が vertical-rl なので、この子の物理 width は親のブロック方向。
     親の幅は外題の字送りで決まっているから、width も max-width も効かず約104pxに張り付く。
     → **幅で押さない。標語のほうを短くする。**（縦組みの脇に長い英文は入らない、と考える） */
  text-align: right;
  text-wrap: balance;   /* 最終行に一語だけ落ちるのを防ぐ */
  letter-spacing: .04em;
  line-height: 1.55;
  white-space: normal;
  font-size: clamp(.68rem, 1.7vmin, .86rem);
}
/* 題簽の下に横組みで名乗りを添える。縦の日本語＝絵、横の英字＝読ませる名前 */
[lang="en"] .daisen-en {
  position: absolute;
  top: calc(clamp(18px, 4vh, 46px) + 1px);
  left: calc(clamp(16px, 4vw, 54px) + clamp(34px, 4.4vmin, 40px));
  z-index: 32;
  font-size: .58rem;
  letter-spacing: .22em;
  line-height: 1.5;
  color: var(--sumi-usui);
  text-transform: uppercase;
  writing-mode: horizontal-tb;
  opacity: 0;
  animation: shizuka-ni 1.2s ease 1.7s both;
}
/* 英文は和文明朝のラテンでは字面が持たない。本文だけ別のセリフに預ける
   （見出し・数字・題簽は Shippori のまま＝彫りの太さを保つ） */
[lang="en"] body,
[lang="en"] .lead,
[lang="en"] .desc,
[lang="en"] .rule p,
[lang="en"] footer,
[lang="en"] .ezu-shussho,
[lang="en"] .ezu-tadashi,
[lang="en"] .ezu-hanrei,
[lang="en"] .shussho { font-family: var(--serif-en); }
/* 英字は和文より字面が小さく見えるので、行間だけ詰める */
[lang="en"] .lead { line-height: 1.8; }
[lang="en"] .block-head h2 { letter-spacing: .06em; }
[lang="en"] .stat .label { letter-spacing: .04em; line-height: 1.5; }
[lang="en"] .enmoku { letter-spacing: .06em; }
/* 言語切替 */
.gengo { margin-top: 1.4em; }
.gengo a { color: var(--gunjo); }