/* アーカイブは読む場所。売り場ではないので、静かに組む。
   ダークにしない——作品の写真が主役で、地は紙に近いほうが色が正しく見える。 */

:root {
  --ink: #1a1a1a;
  --sub: #6b6b6b;
  --line: #e0ddd8;
  --paper: #faf9f7;
  --accent: #7a2e2e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

.top {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  /* **言語の切り替えは右端。** 題字と並べると2つ目の題字に見える。
     ナビはその間。**折り返して2行になっても壊れないように** wrap する
     （103ページ全部に出るので、スマホで崩れると全滅する） */
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px 20px; flex-wrap: wrap;
}
.top .site { flex: 0 0 auto; }

/* ── 常設のナビ（2026-09-11）───────────────────────────
   103点になって、作品ページからどこへも行けないのが効いてきた。
   入口がトップの本文にしかないと、1枚見たら戻って探し直すことになる。
   **JS は使わない。** いま居る場所は aria-current で示すだけ。 */
.nav {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  flex: 1 1 auto; margin-left: 8px;
}
.nav a {
  font-size: 13px; letter-spacing: .06em; color: var(--sub);
  text-decoration: none; padding: 2px 0; border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

@media (max-width: 620px) {
  .top { padding: 12px 16px; }
  .nav { order: 3; flex-basis: 100%; margin-left: 0; gap: 4px 14px; }
  .nav a { font-size: 12.5px; }
}
.top .lang {
  font-size: 12px; letter-spacing: .1em; color: var(--sub);
  border: 1px solid var(--line); padding: 4px 12px; border-radius: 2px;
}
.top .lang:hover { color: var(--accent); border-color: var(--accent); }
.top a { color: var(--ink); text-decoration: none; font-size: 15px; letter-spacing: .08em; }

main { max-width: 960px; margin: 0 auto; padding: 48px 24px 24px; }

h1 { font-size: 30px; font-weight: 500; margin: 0 0 4px; letter-spacing: .04em; }
.reading { display: block; font-size: 13px; color: var(--sub); letter-spacing: .1em; margin-top: 6px; }
.life { color: var(--sub); font-size: 14px; margin: 12px 0 0; }
.summary { margin: 20px 0 0; max-width: 42em; }

.count {
  font-size: 14px; font-weight: 500; letter-spacing: .1em;
  margin: 56px 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.count span { color: var(--sub); margin-left: 12px; font-size: 12px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 32px 24px; }
.card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.card img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  background: #efece7; border: 1px solid var(--line);
}
.card .t { margin-top: 12px; font-size: 15px; }
.card .y, .card .l { font-size: 12px; color: var(--sub); }
.card:hover .t { color: var(--accent); }

/* 作品ページ。写真を大きく、事実はその横に。 */
.work { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
/* **別角度は本文の下、横いっぱいに。**（2026-09-11）
   figure の中に入れていたので、スマホで1列になると
   **写真が全部並んでから本文が始まっていた**（鵜殿石仏群は5枚）。 */
.work > .views, .work > .views-h { grid-column: 1 / -1; }
.work > .views-h { margin-top: 8px; }
.work figure { margin: 0; }
.work img { width: 100%; height: auto; border: 1px solid var(--line); background: #efece7; }
.work .by { color: var(--sub); font-size: 14px; margin: 8px 0 24px; }

dl { margin: 0; }
.row { display: flex; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.row dt { flex: 0 0 5.5em; color: var(--sub); margin: 0; }
.row dd { margin: 0; }

.note { margin: 22px 0 0; font-size: 14px; }
.note a, .summary a { color: var(--accent); }   /* 「時代で見る」だけブラウザ既定の青だった。仏師の紹介文の中の名も同じ */

.credit { margin-top: 40px; padding-top: 18px; border-top: 2px solid var(--line); }
.credit h2 { font-size: 13px; font-weight: 500; color: var(--sub); letter-spacing: .1em; margin: 0 0 8px; }
.credit .row { font-size: 13px; }
.credit p { font-size: 13px; margin: 12px 0 0; }
.credit a { color: var(--accent); }

.foot {
  max-width: 960px; margin: 64px auto 0; padding: 20px 24px 48px;
  border-top: 1px solid var(--line); color: var(--sub); font-size: 12px; line-height: 1.8;
}
.foot p { margin: 0 0 6px; }
.foot strong { color: var(--ink); font-weight: 500; }

@media (max-width: 760px) {
  main { padding: 32px 20px 20px; }
  .work { grid-template-columns: 1fr; gap: 28px; }
  h1 { font-size: 24px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 16px; }
}

/* 見どころの1行と、本文の説明。事実の表とは見た目を分ける——
   表は確かめた値、こちらは人が書いた文。混ぜると出どころが曖昧になる。 */
.highlight {
  margin: 0 0 22px; padding-left: 12px;
  border-left: 2px solid var(--accent);
  font-size: 15px; line-height: 1.7;
}
.desc { margin: 24px 0 0; font-size: 14.5px; line-height: 2; }

.links { list-style: none; margin: 24px 0 0; padding: 0; }
.links li { margin: 0 0 6px; font-size: 13px; }
.links a { color: var(--accent); }

.card .h {
  font-size: 12px; color: var(--sub); line-height: 1.7; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 入口。作家を並べる。作品より前に人が来る——アーカイブは人の仕事の記録なので。 */
.lead h1 { font-size: 26px; letter-spacing: .12em; }
.lead .summary { margin-top: 16px; }

/* ── 時代の帯 ──────────────────────────────────────
   **玄関で「形」を見せる場所。** 作り手のタイル（.who）より小さく、
   8つが一目に入る大きさにする。正方形なのは一覧と同じ縮小版を使うため
   （像の頭を見つけて切ってあるので、小さくしても何の像か分かる）。
   スマホ幅（358px）で3列、机の上では8つが1行に収まる——**横に溢れさせない** */
.eras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 18px 14px;
}
.era { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.era img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  background: #efece7; border: 1px solid var(--line);
}
.era .n { margin-top: 9px; font-size: 14.5px; }
.era .c { font-size: 11.5px; color: var(--sub); margin-top: 2px; }
.era:hover .n { color: var(--accent); }

.whos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px 28px; }
.who { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.who img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 22%;
  background: #efece7; border: 1px solid var(--line);
}
.who .n { margin-top: 14px; font-size: 20px; }
.who .n .reading { display: inline; font-size: 11px; margin-left: 10px; letter-spacing: .08em; }
.who .life, .who .c { font-size: 12px; color: var(--sub); }
.who .c { margin-top: 4px; }
.who:hover .n { color: var(--accent); }

/* 共作の印。片方の作家だけの手柄に見せない */
.joint {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border: 1px solid var(--line); border-radius: 2px;
  font-size: 10.5px; color: var(--sub); letter-spacing: .08em; vertical-align: 2px;
}
.work .by a, .card .t .joint { color: inherit; }
.work .by a { color: var(--sub); text-decoration: none; border-bottom: 1px solid var(--line); }
.work .by a:hover { color: var(--accent); }

/* 作家ごとの補足（快慶の署名の変遷など） */
.extra { margin-top: 40px; padding: 18px 20px; background: #f3f0ec; border-left: 2px solid var(--line); }
.extra h2 { font-size: 13px; font-weight: 500; letter-spacing: .1em; margin: 0 0 8px; color: var(--sub); }
.extra p { margin: 0; font-size: 14px; }


/* 尊格・時代の入口 */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 8px 16px; border: 1px solid var(--line); background: #fff;
  text-decoration: none; color: var(--ink); font-size: 14px;
}
.chip span { font-size: 11px; color: var(--sub); }
a.chip:hover { border-color: var(--accent); color: var(--accent); }

.all { margin: 48px 0 0; font-size: 14px; }
.all a { color: var(--accent); }

@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
  .feature h2 { font-size: 20px; }
}

/* 特集の写真は縦横がまちまちなので、枠を決めて収める。
   決めないと縦長の1枚でブロックが画面2つ分に伸びる（金剛力士で踏んだ）。 */
.feature .shot img { max-height: 420px; object-fit: cover; object-position: center 20%; }
.feature { align-items: start; }

/* 作者リンクは既定の青にしない。どこに置いても同じ見た目にする */
.by a { color: var(--sub); text-decoration: none; border-bottom: 1px solid var(--line); }
.by a:hover { color: var(--accent); }

/* 作者不詳。**空欄にしない。** 調べていないのではなく分かっていない、という記録。 */
.unknown { color: var(--sub); }
.card .a { font-size: 12px; color: var(--sub); margin-top: 2px; }

/* 作品がまだ無い作り手の枠。存命の作家は写真の許諾が要るので、名前だけ先に立つ */
.who .nocover {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; background: #f3f0ec; border: 1px dashed var(--line);
  color: var(--sub); font-size: 12px; letter-spacing: .08em;
}

/* 別の角度・部分・箱書。1枚では記録にならないことがある */
.views { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.views .view { margin: 0; }
.views img { width: 100%; height: auto; border: 1px solid var(--line); background: #efece7; }
.views figcaption { margin-top: 6px; font-size: 11.5px; color: var(--sub); line-height: 1.6; }
.views figcaption .by { display: block; margin-top: 3px; color: var(--sub); opacity: .85; }


/* ── 写真の入れ方（2026-09-10 に全面的に直した）─────────────────
   仏像は縦に長い。実測で35枚中31枚が縦、比率は 0.44〜0.93 とばらつく。
   単一の枠に object-fit: cover で入れると必ず誰かが切れ、
   作り手カードの 4:3 では32枚が切れて最大67%が欠けていた。

   **アーカイブは記録なので、切らないほうを取る。** 枠は縦（3:4）に統一し、
   contain で全体を見せる。余った部分は地の色で埋まり、台紙のように見える。
   ずんぐりした像は小さく写るが、頭が消えるよりよい。 */

.card img,
.who img {
  object-fit: cover;
  object-position: center;
  background: #f3f0ec;
}
.card img { aspect-ratio: 3 / 4; }
.who img  { aspect-ratio: 3 / 4; }          /* 4:3 の横だった。仏像には合わない */


/* 作品ページの本図。**枠に嵌めず、画面の高さで抑える。**
   細長い像（0.44）を幅いっぱいにすると、縦に1000px を超えて読めなくなる。 */
.work figure > img {
  width: auto;
  max-width: 100%;
  max-height: 74vh;
  display: block;
  margin-inline: auto;
}
.views img { aspect-ratio: 3 / 4; object-fit: contain; background: #f3f0ec; }


/* 一覧の写真を正方形にする（2026-09-11 に切る側へ変えた）。

   **余白で正方形にすると、像が小さいままだった。** 台紙のようで整ってはいたが、
   一覧は写真を見る場所なので、像が主役にならない。**切って揃えるほうを取った。**

   切り方は build.py。**像が始まる行を探して、その少し上から切る**ので、
   「上から何％」を決め打ちにしない——頭の位置は像によって違う。
   地が一様でない写真（堂内・柵ごし）では見つからないので、
   そのときだけ縦横比から決めた既定に落ちる。

   **作品ページの本図は今まで通り切らない。** 記録は記録のまま残す。
   一覧で切るのは案内のためで、記録を切ったわけではない。 */
.card img, .who img { aspect-ratio: 1 / 1; }
/* 特集は正方形にしない。一覧と同じ形にすると「特集である」ことが伝わらない */
/* padding は入れない。台紙に見せるより、像を大きく見せるほうを取る */


/* ── 画像を主役にする（2026-09-10）──────────────────────────
   一覧は写真を見る場所。文字は添え物にする。
   スマホでは**1枚の正方形が画面に収まる**ようにした（それまでは2列で、
   1枚あたりが親指ほどの大きさしか無かった）。 */

main { max-width: 1080px; }
.index .lead, .index .artist, .index .summary { max-width: 46em; }

.grid  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 36px 24px; }
.whos  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 36px 24px; }

/* 文字は小さく、行間も詰める。写真の下に静かに置く */
.card .t { margin-top: 10px; font-size: 14px; line-height: 1.6; }
.card .y, .card .l, .card .a { font-size: 11.5px; line-height: 1.7; }
.card .h { font-size: 11.5px; margin-top: 5px; }

@media (max-width: 900px) {
  .grid, .whos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* スマホ。**1列にして、正方形を画面幅いっぱいに。**
   細長い像でも、枠が大きくなるぶん像そのものが大きく写る */
@media (max-width: 620px) {
  main { padding: 24px 16px 16px; }
  .grid, .whos { grid-template-columns: 1fr; gap: 40px; }
  .card .t { font-size: 16px; }
  .card .y, .card .l, .card .a, .card .h { font-size: 13px; }
  .views { grid-template-columns: 1fr; }
  .work figure > img { max-height: none; width: 100%; }
}



/* ── 拝観（2026-09-10）───────────────────────────────
   像は動かない。動くのは「いつ見られるか」のほう。
   **開いている日が限られている像だけ**に出す。通年のものには書かない。 */
.kaicho { margin-top: 32px; padding-top: 18px; border-top: 2px solid var(--line); }
.kaicho h2 { font-size: 13px; font-weight: 500; color: var(--sub); letter-spacing: .1em; margin: 0 0 10px; }
.kaicho ul { list-style: none; margin: 0; padding: 0; }
.kaicho li { font-size: 14px; line-height: 1.9; padding: 6px 0; border-bottom: 1px solid var(--line); }
.kaicho .next { display: block; font-size: 13px; color: var(--accent); }
.kaicho a { font-size: 12px; color: var(--sub); margin-left: 8px; }

/* **会期中だけ出る。** 所在と地図は寺のまま向けているので、
   ここで「いまはそこに無い」と言い、行き先を足す。
   **開帳の札より強く出す**——開帳は「いつ見られるか」、これは
   「所在が間違っている」という訂正なので、性格が違う */
.loan {
  margin: 18px 0 0; padding: 14px 16px; background: var(--paper, #faf7f2);
  border-left: 3px solid var(--accent);
}
.loan p { margin: 0 0 8px; font-size: 14px; line-height: 1.8; }
.loan ul { list-style: none; margin: 0; padding: 0; }
.loan li { font-size: 14px; line-height: 1.9; }
.loan a { margin-left: 4px; }


/* 展覧会の一覧 */
.where { font-size: 13px; color: var(--sub); margin: 0 0 14px; }

/* **必ず出す。** 日付を間違えると、読んだ人が実際に足を運んで空振りする */
.warn { margin: 12px 0 0; font-size: 12px; color: var(--sub); line-height: 1.8; }
.warn strong { color: var(--ink); font-weight: 500; }

/* **4列に固定する。** auto-fill だと幅によって3列にも5列にもなり、
   トップに出す4件が1行に収まらないことがある（端数の行ができる）。
   スマホは2列——4は2でも割り切れるので、どちらでも最後の行が欠けない */
.opens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; }
.open { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.open img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #f3f0ec; border: 1px solid var(--line); }
.open .t { margin-top: 10px; font-size: 14px; }
.open .l, .open .w { font-size: 11.5px; color: var(--sub); line-height: 1.7; }
.open .n { font-size: 12px; color: var(--accent); margin-top: 3px; }
/* 日付が決まっていないもの。**「次は」の欄を空にせず、決まっていないと書く。**
   赤（accent）は日付が決まっているものに取っておく */
.open .n.undecided { color: var(--sub); }
.open:hover .t { color: var(--accent); }
@media (max-width: 620px) { .opens { grid-template-columns: 1fr 1fr; gap: 20px 14px; } }

/* 写真が無い作品。**無いことを、無いと書く。**
   秘仏は撮影が許されないことが多く、公開された写真が存在しない。
   載せないと記録から落ちるので、作者不詳と同じ扱いにする。 */
.nophoto {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px; text-align: center;
  background: #f3f0ec; border: 1px dashed var(--line); color: var(--sub);
}
.nophoto.thumb { aspect-ratio: 1 / 1; font-size: 12px; }
.nophoto.hero  { min-height: 320px; font-size: 14px; }
.nophoto .why { font-size: 11.5px; line-height: 1.7; max-width: 22em; opacity: .9; }
/* 作品ページの「探しています」の枠は /photo-wanted/ へ。押せることを一行で示す */
a.nophoto-link { display: block; color: inherit; text-decoration: none; }
.nophoto .more { font-size: 12px; color: var(--accent); margin-top: 4px; }
a.nophoto-link:hover .nophoto { border-color: var(--accent); }
a.nophoto-link:hover .more { text-decoration: underline; }


/* ── 特集の送り（2026-09-10）────────────────────────────
   **JS を使わない。** 中身は全部 HTML にあり、CSS が効かなければ
   ただの一覧として読める。送りは animation だけ。

   **マウスを乗せたら止まる。** 読んでいる最中に流れていくのが
   この手のものの一番の欠点なので、hover と focus-within で止める。
   **「視差効果を減らす」設定の人には動かさない**（prefers-reduced-motion）。 */

.feature {
  display: block; padding: 0; position: relative;
  background: #f3f0ec; margin: 44px 0 12px;
}

/* **覗いている次の1枚を薄くする。** 覗かせるのは「続きがある」と伝えるためで、
   読ませるためではない。そのままだと次の写真の縁が濃く出て、いま読んでいる
   1枚と張り合う（実機で指摘された）。背景色を右端から重ねて沈める。
   **幅は覗き（52px）と同じにし、31px（60%）で完全に透明**にする——
   最後の1枚まで送ったときは右端が本文側になり、本文は36pxの余白の内側に
   始まるので、そこに掛けないため。**濃さはここで決まる**のではなく、
   透明になる位置で決まる。濃くしたいときは stop ではなく alpha を上げる。
   押せなくならないよう pointer-events は切る */
.feature::after, .feature::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 52px; pointer-events: none; z-index: 1;
}
.feature::after {
  right: 0;
  background: linear-gradient(to left,
    rgba(243, 240, 236, .96) 0,
    rgba(243, 240, 236, .80) 32%,
    rgba(243, 240, 236, 0) 60%);
}
/* **最後の1枚まで送ると、前の1枚が左に覗く**（右へ寄せきる分のスクロールが
   残らないため）。ただし左に覗くのは前の枚の**文字の側**で、幽霊のような
   字が並ぶ。写真の縁より気が散るので、**左は右より強く沈める。** */
.feature::before {
  left: 0;
  background: linear-gradient(to right,
    rgba(243, 240, 236, 1) 0,
    rgba(243, 240, 236, .90) 35%,
    rgba(243, 240, 236, 0) 68%);
}

/* **指で送る。** 以前は animation で勝手に流していたが、読んでいる最中に
   流れていくのがこの手のものの一番の欠点だった。scroll-snap なら
   スマホはスワイプ、机の上はトラックパッドで送れて、**JS が要らない。**
   枚数の決め打ちも消えた（5枚前提の keyframes だった）。
   勝手に動くものが無くなったので、prefers-reduced-motion への配慮も要らなくなった。 */
.track {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* **scroll-behavior: smooth を入れてはいけない。** 入れると、下の番号
     （#feat-3 へのアンカー）が横に動かなくなり、ページが縦に動くだけになる。
     Chrome で確かめた。スワイプやトラックパッドの滑りは元から滑らかなので、
     ここで滑らせる必要も無い */
  /* 横で行き止まったとき、後ろのページごと動かさない */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* **細い横棒を出しておく。** 番号は行き先を示すだけで、いま何枚目かは
     示せない（CSS では送り先の枚から番号を選べない）。棒が出ていれば
     位置と「まだ横にある」ことが分かる */
  scrollbar-width: thin;
  scrollbar-color: #d3cdc4 transparent;
}
.track::-webkit-scrollbar { height: 6px; }
.track::-webkit-scrollbar-track { background: transparent; }
.track::-webkit-scrollbar-thumb { background: #d3cdc4; }

.slide {
  /* **次の1枚を端から覗かせる。** ここが「横に送れる」と伝える一番の手。
     切れているものが見えれば続きがあると分かるので、言葉より早い。
     縮ませない（flex-shrink の既定は 1 なので、指定しないと5枚が
     見えている幅に押し込まれる。実際に踏んだ） */
  flex: 0 0 calc(100% - 52px); scroll-snap-align: start;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  column-gap: 40px; row-gap: 18px;
  padding: 36px; align-items: start; box-sizing: border-box;
}
/* **「ピックアップ」の札は枚の左上に置く。** 右の欄の頭に置くと、
   題の肩書きに見えて「この枠が何であるか」を言わない。左上なら枚全体の見出しになる */
/* **札は track の外に1枚だけ。** 枚ごとに持たせると、次の枚の札の1文字だけが
   右端に覗いて崩れて見える（3回目のレビュー）。覗かせたいのは写真の縁 */
.feature .tag { position: relative; z-index: 2; padding: 36px 36px 0; }

/* **送り先はスライドそのもの。** 高さ1pxの目印を置いて縦の動きを消そうとしたが、
   それだと横が1枚ずれる——目印は「いちばん近い端」に寄せられ、そのあと
   スナップが手前の枚に引き戻すため。スライドに `scroll-snap-align: start` が
   付いているので、**スライドを指した方が正確に頭で止まる。**
   代わりに、最初の1回だけページが縦に落ち着く（特集が画面の上に来る）。
   2回目以降は動かないので、これは受け入れる。 */
.slide .shot { display: block; }
.slide .shot img, .slide .shot .nophoto {
  /* **送りにしたとき 62vh に絞ったら小さくなった。** 特集は
     作品ページと同じ大きさで出す、という元の決めごとに戻す（72vh） */
  width: auto; max-width: 100%; max-height: 72vh;
  object-fit: contain; display: block; margin-inline: auto;
  background: transparent; border: none;
}
.slide .shot .nophoto { min-height: 300px; background: #ece8e2; border: 1px dashed var(--line); }
.feature .tag { margin: 0; font-size: 12px; letter-spacing: .22em; color: var(--accent); }
.slide h2 { margin: 0; font-size: 28px; font-weight: 500; }
.slide h2 a { color: inherit; text-decoration: none; }
.slide h2 a:hover { color: var(--accent); }
.slide .by { margin: 8px 0 16px; }
.slide .why { margin: 0; font-size: 14.5px; line-height: 2; }

/* 前／次と「3 / 5」。**枚ごとに持つ。** 共通の帯にすると、CSS では
   いまどの枚かが分からず、前後を出せない（送り先はスライドの id なので JS は要らない）。
   スワイプはスマホでしか使えないので、机の上ではここが送りになる */
.go-bar {
  display: flex; align-items: center; gap: 14px;
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12px; letter-spacing: .04em;
}
.go-bar .n { color: var(--sub); margin-inline: auto; font-variant-numeric: tabular-nums; }
.go {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--sub); text-decoration: none;
}
a.go:hover { color: var(--accent); }
/* 端の枚では行き先が無い。**消さずに薄く置く**——消すと左右の位置がずれて、
   送るたびに「次」の場所が動く */
.go.off { color: var(--line); }

@media (max-width: 620px) {
  .feature { margin: 28px 0 8px; }
  /* スマホでは覗かせる幅を詰める。**52px は画面の1/7を食う。**
     ただし詰めすぎると切れているのが分からないので 34px（390px 幅の約9%）。
     縦に長い写真の脇に出るので、この幅でも「切れている」とは分かる */
  .slide { flex-basis: calc(100% - 34px); grid-template-columns: 1fr; gap: 20px; padding: 20px 16px; }
  .feature::after, .feature::before { width: 34px; }
  .go-bar { gap: 10px; margin-top: 20px; }
  /* **送りなので高さを揃える。** 外すと1枚だけ縦に伸び、
     短い枚の下に大きな空きができる（作品ページと違い、ここは並ぶ） */
  .slide .shot img { max-height: 60vh; width: auto; }
  .slide h2 { font-size: 22px; }
}

/* ── 英語版（2026-09-10）─────────────────────────────
   **事実の欄だけの英語。** 散文は訳していないので、そう断る。
   断りは読み飛ばせる大きさにする（本文ではない） */
.lead .note { font-size: 13px; color: var(--sub); line-height: 1.9; max-width: 62ch; }
.work .note { margin-top: 26px; font-size: 12.5px; color: var(--sub);
  padding-top: 12px; border-top: 1px solid var(--line); }

/* 地図（2026-09-10）。**所在の付け足しであって、行の主役ではない** */
.map {
  margin-left: 10px; font-size: 11px; letter-spacing: .06em;
  color: var(--sub); text-decoration: none;
  border: 1px solid var(--line); border-radius: 2px; padding: 2px 8px;
  white-space: nowrap;
}
.map:hover { color: var(--accent); border-color: var(--accent); }

/* 写真を探しています（2026-09-11）。
   **「写真はありません」と同じ見た目にしない。** 片方は撮影が許されていない
   ものの記録で、もう片方はこちらからのお願い。混ぜると、秘仏の写真を
   送ってくださいと言っているように読める。 */
.nophoto { flex-direction: column; gap: 6px; padding: 12px; text-align: center; }
.terms { margin: 0; padding-left: 1.2em; font-size: 13.5px; line-height: 1.9; }
.terms li { margin-bottom: .4em; }
.terms strong { display: block; }
.ask { margin-top: 32px; padding: 18px 20px; background: #f3f0ec; border-left: 2px solid var(--accent); }
.ask h2 { font-size: 14px; letter-spacing: .08em; margin: 0 0 8px; }
.ask p { margin: 0 0 8px; font-size: 14px; }
.btn {
  display: inline-block; padding: 8px 20px; border: 1px solid var(--accent);
  color: var(--accent); text-decoration: none; font-size: 13.5px; letter-spacing: .06em;
}
.btn:hover { background: var(--accent); color: #fff; }

/* ── いま、ここにあるもの（2026-09-11）──────────────────
   **数字を自慢として出さない。** 103点中75点が作者不詳、52点が岩に彫られたもの、
   31点が写真待ち——これはこのアーカイブの性格で、玄関で言うべきこと。 */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fact {
  display: block; padding: 22px 20px; background: #f3f0ec;
  text-decoration: none; color: var(--ink); border-left: 2px solid var(--line);
}
.fact:hover { border-left-color: var(--accent); }
.fact .n { display: block; font-size: 34px; line-height: 1.1; letter-spacing: .02em; }
.fact .t { display: block; margin-top: 6px; font-size: 14px; }
.fact .d { display: block; margin-top: 6px; font-size: 12px; color: var(--sub); line-height: 1.8; }

/* 規模は最後に。**最初に言うと自慢、最後に置くと確かめ** */
.scale { margin: 14px 0 0; font-size: 13px; color: var(--sub); letter-spacing: .04em; }

@media (max-width: 620px) {
  .facts { grid-template-columns: 1fr; gap: 10px; }
  .fact { padding: 16px; }
  .fact .n { font-size: 28px; }
}

/* 見出しの中のリンクは既定の青にしない。**見出しは見出しのまま** */
.count a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.count a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.count span a { color: inherit; }

/* ── 節へ飛ぶ帯（2026-09-11）──────────────────────────
   105点になって、時代のページで「江戸」を見るのに延々スクロールが要る。
   アンカーは既にあるので、押せる場所を作るだけでよい。**JS は使わない。**

   **デスクトップでは上に貼り付く。** スクロールの途中で別の節へ飛べないと、
   一度上まで戻ることになる。スマホでは貼り付かせない——折り返すと
   画面を食うので、先頭に置いたまま。 */
.jump {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 34px; padding: 10px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg, #faf9f7);
}
.jump a {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 13px; border: 1px solid var(--line); background: #fff;
  text-decoration: none; color: var(--ink); font-size: 13px;
}
.jump a span { font-size: 11px; color: var(--sub); }
.jump a:hover { border-color: var(--accent); color: var(--accent); }

@media (min-width: 621px) {
  .jump { position: sticky; top: 0; z-index: 5; }
  /* 場所の帯（49個）は数段に折り返す。貼り付くと画面を食い、見出しが下に隠れる */
  .jump.many { position: static; }
}

/* スマホでは1段にして横へ流す。**折り返すと2段103pxになり、画面を食う。**
   端で切れたチップが「まだ右にある」ことを示す。貼り付かせない */
@media (max-width: 620px) {
  .jump {
    flex-wrap: nowrap; overflow-x: auto; margin: 0 0 24px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .jump::-webkit-scrollbar { display: none; }
  .jump a { flex: 0 0 auto; }
}

/* 貼り付いた帯の下に見出しが隠れないようにする */
.index .count { scroll-margin-top: 64px; }

/* 「記録が無いもの」の節（2026-09-11）。
   **落とさず、最後に置く。** 調べていないのか分かっていないのかを
   区別できるようにするための節なので、見出しは他と同じ格で出す。 */
.unknown-h { color: var(--sub); }
.unknown-h + .note { margin-top: -18px; margin-bottom: 26px; font-size: 13px; }

/* ── α の表記（2026-09-11）──────────────────────────
   実在の作り手に見せる段になった。**α と書くだけでは足りない**——
   何が未完成で、写真をどう扱っているかが伝わらないと、
   見せられた人は何を見ているのか分からない。 */
.alpha {
  display: inline-block; margin-left: 8px; padding: 1px 6px;
  border: 1px solid var(--line); border-radius: 2px;
  font-size: 10.5px; letter-spacing: .08em; color: var(--sub); vertical-align: 3px;
  white-space: nowrap;   /* 「α版」。1文字のときは要らなかった */
}
.top .site:hover .alpha { border-color: var(--accent); color: var(--accent); }

/* **末尾に置く。** 玄関に長い断りを立てると読み飛ばされる（2026-09-11 に移した）。
   写真の方針と検索避けはフッターに全ページ書いてあるので、ここは数字だけ。 */
.alpha-note {
  margin: 40px 0 0; padding: 16px 20px;
  background: #f3f0ec; border-left: 2px solid var(--accent);
}
.alpha-note p { margin: 0; font-size: 13.5px; line-height: 2; color: var(--ink); }

@media (max-width: 620px) {
  .alpha-note { padding: 14px 16px; }
  .alpha-note p { font-size: 13px; }
}

/* 本人から聞いたこと（2026-09-11）。
   **こちらが調べたことと分ける。** 存命の作り手本人の言葉は、このアーカイブが
   持てる出どころの中でいちばん強い。同じ見た目にすると、どこまでが調べたことで
   どこからが聞いたことか分からなくなる。 */
.extra.heard { border-left-color: var(--accent); }
.extra.heard h2 .when {
  margin-left: 10px; font-size: 11px; letter-spacing: .06em; color: var(--sub);
}
.extra.heard ul { margin: 0; padding-left: 1.2em; }
.extra.heard li { font-size: 14px; line-height: 2; margin-bottom: .5em; }
.extra.heard li:last-child { margin-bottom: 0; }

/* **[hidden] は display に負ける。** .card も .jump a も display を指定して
   いるので、hidden を立てても消えない。JS は無くなったが、属性の意味は守っておく */
[hidden] { display: none !important; }

/* 場所のページ: 都道府県の下に寺社の小見出し。点数の多い順 */
.place { font-size: 15px; margin: 26px 0 10px; padding-left: 13px; display: flex; align-items: baseline; gap: 10px; }
.place span { font-size: 11.5px; color: var(--sub); font-weight: 500; }

/* 説明文の出どころ。**写真の「撮影：」と同じ扱い**——本文より小さく、
   しかし作品ごとに必ず出る。文章の条件を黙って済ませないための欄 */
/* 負のマージンで説明文に寄せていたが、line-height 2 の最終行に食い込んでいた */
.src { margin: 4px 0 26px; font-size: 12px; color: var(--sub); line-height: 1.8; }
.src a { color: var(--sub); }
.src a:hover { color: var(--accent); }

/* 拝観の言い切り。**日付の前に「普段は見られない」と書く。**
   日付だけ並べても、「この日は特別に開く」のか「この日しか開かない」のかが
   読む人には分からない */
.kaicho .closed { margin: 0 0 12px; font-size: 14px; line-height: 1.9; }
.kaicho .closed strong { font-weight: 500; color: var(--accent); }
.kaicho .all { margin: 14px 0 0; font-size: 12px; }