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

/* かみを祀る。色は紫系（本人、2026-09-16「紫系が良い気がする」）。
   紫紺はリンク・見どころの縦線・いま居るナビ、朱は α版とピックアップの札（鳥居の朱）、藤は点数と chip の hover。面には塗らない。
   本家（ほとけを彫る）の臙脂・うつわ（うつわを焼く）の呉須・古刹（古刹をめぐる）の苔と並べて、四つが一目で分かれる。
   **古刹の style.css の写し。** 語と色だけ変え、規則の骨は同じ（4本目なので、直すときは4か所——lib に出すのは3本が揃ってから、と古刹で決めた線のまま）。 */
:root {
  --ink: #221c17;
  --sub: #6b665c;
  --line: #d9d6cb;
  --paper: #f4f3ec;
  --accent: #55467f;      /* 紫紺 */
  --accent2: #b3402a;     /* 朱（鳥居） */
  --earth: #7d6a9e;       /* 藤 */
}

* { 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; }

/* ── 常設のナビ ──────────────────────────────────────
   神社の頁からどこへも行けない、を無くす（本家で踏んだ）。**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; }
.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(--earth); 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; }
/* **この社の神像と開帳は本文の下、横いっぱいに。** figure の中に入れると、スマホで1列になったとき
   写真が全部並んでから本文が始まる（本家で踏んだ） */
.work > .views { grid-column: 1 / -1; }
.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 .row { font-size: 13px; }

.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; }
}
.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; }

/* 写真の「撮影：」の中のリンク（出どころ）は既定の青にしない。どこに置いても同じ見た目にする */
.work .by a, .by a { color: var(--sub); text-decoration: none; border-bottom: 1px solid var(--line); }
.work .by a:hover, .by a:hover { color: var(--accent); }
.card .a { font-size: 12px; color: var(--sub); margin-top: 2px; }

/* 神社の頁の下段。この社の神像（本家の札）と開帳を2列で */
.views { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.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; }

/* ── 一覧の写真 ────────────────────────────────────
   神社の写真は横長が多い（門・堂・境内）。カードの枠は正方形（下）で、build が中央で切った縮小版を入れる */

.card img {
  object-fit: cover;
  object-position: center;
  background: #f3f0ec;
}
.card img { aspect-ratio: 3 / 4; }          /* 下で 1/1 に上書きしている（一覧は正方形） */

/* 神社の頁の本図。**枠に嵌めず、画面の高さで抑える。** 縦長の写真（鳥居・社殿）を幅いっぱいにすると縦に長すぎる */
.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; }

/* 一覧の写真は正方形（本家と同じ。余白で正方形にすると写真が小さいままなので、切って揃える）。
   切り方は build.py の _square——神社の写真は横長が多いので中央、縦長なら上寄り（鳥居や社殿の上を残す）。
   **神社の頁の本図は切らない。** 記録は記録のまま */
.card img { aspect-ratio: 1 / 1; }

/* ── 画像を主役にする ─────────────────────────────────
   一覧は写真を見る場所。文字は添え物にする。スマホでは**1枚の正方形が画面に収まる**ようにする */

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

.grid  { 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 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* スマホ。**1列にして、正方形を画面幅いっぱいに。** */
@media (max-width: 620px) {
  main { padding: 24px 16px 16px; }
  .grid { 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%; }
}

/* ── 例祭 ───────────────────────────────────────
   infobox の「例祭」から「次の例祭」を出す（寺の開帳に当たる。毎年同じ日なので計算だけで出る） */
.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; }

/* 写真が無い社。**無いことを、無いと書く**（「写真を探しています」）。載せないと記録から落ちる */
.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; }

/* 断り書き。読み飛ばせる大きさにする（本文ではない）。神社の頁では「記事が無い」「http のみ」の注記 */
.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); }
.row .note { margin: 0 0 0 6px; padding: 0; border: 0; font-size: 11.5px; color: var(--sub); }

/* 地図（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); }

.nophoto { flex-direction: column; gap: 6px; padding: 12px; text-align: center; }

/* 見出しの中のリンクは既定の青にしない。**見出しは見出しのまま** */
.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(--paper);
}
.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; }

/* 「記録が無いもの」の節（祭神・時代が infobox に無い社）。**落とさず、最後に置く。** 見出しは他と同じ格で */
.unknown-h { color: var(--sub); }
.unknown-h + .note { margin-top: -18px; margin-bottom: 26px; font-size: 13px; }

/* ── α の表記 ──────────────────────────────────────
   **α と書くだけでは足りない**——何が未完成で、写真をどう扱っているかが伝わらないと、見た人は何を見ているのか分からない */
.alpha {
  display: inline-block; margin-left: 8px; padding: 1px 6px;
  border: 1px solid var(--accent2); border-radius: 2px;
  font-size: 10.5px; letter-spacing: .08em; color: var(--accent2); vertical-align: 3px;   /* α版は朱。断りは目に付く色で */
  white-space: nowrap;
}
.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; }
}

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

/* 要約の出どころ（ウィキペディアの記事名）。**写真の「撮影：」と同じ扱い**——本文より小さく、しかし社ごとに必ず出る */
/* 負のマージンで説明文に寄せていたが、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); }

/* **補助の写真**（本殿・拝殿・鳥居）。主写真の下に2列。caption に何が写っているか */
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 12px 0 28px; }
.shots figure { margin: 0; }
.shots img { width: 100%; height: auto; display: block; }
.shots figcaption { font-size: 14px; margin-top: 6px; }
.shots figcaption .by { display: block; margin-top: 3px; color: var(--sub); font-size: 13px; }
@media (max-width: 600px) { .shots { grid-template-columns: 1fr; } }

/* **玄関の「都道府県でたどる」。** 本家の「時代でたどる」の写し（正方形の写真・名前・数）。47タイルなので本家（92px）より
   小さくして、スマホ幅で4列・机の上で10列ほどに収める（2026-09-16、本人） */
.eras { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 16px 12px; }
.era { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.era img, .era .nophoto { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #efece7; border: 1px solid var(--line); }
.era .n { margin-top: 7px; font-size: 13.5px; }
.era .c { font-size: 11px; color: var(--sub); margin-top: 2px; }
.era:hover .n { color: var(--accent); }

/* ── 五本の帯（2026-09-16、本人）───────────────────────
   どの頁にいても、五つのサイトが一つの並びだと分かる。順は 仏像・寺・神社・神々・やきもの。
   いま居るサイトは色を付けるだけでリンクにしない。スマホでは折り返さず横に流す（節へ飛ぶ帯と同じ）。
   **5本の style.css に同じ規則がある**（HTML は lib/site.py の1か所） */
.five {
  display: flex; gap: 18px; padding: 6px 24px; font-size: 11.5px; letter-spacing: .08em;
  border-bottom: 1px solid var(--line); color: var(--sub); white-space: nowrap; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.five::-webkit-scrollbar { display: none; }
.five a { color: var(--sub); text-decoration: none; flex: 0 0 auto; }
.five a:hover { color: var(--accent); }
.five [aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--accent); flex: 0 0 auto; }
@media (max-width: 620px) { .five { padding: 6px 16px; gap: 14px; font-size: 11px; } }