/* アーカイブは読む場所。売り場ではないので、静かに組む。
   **六本目だけ地を濃い灰にする**（本人、2026-09-17「神が白なので、妖怪は黒かグレー」→ 墨（#161618）は「文字が読みにくすぎる」→ 薄い灰（#e8e7e4）
   → 「もっと濃いグレーに。おどろおどろしくしたい」）。黒ではなく炭の灰（#2b2b2e）に、字は生成りを明るめに、行間と字の太さはそのまま。
   五本の白の裏で、光と影を地の色で分ける。 */

/* あやかしを視る。地は灰（#3a3a3e）、字は生成り（#ece8e0）、色は鬼火の青（--accent。灰の上で光る明るさ）。
   朱は α版の札、鈍い灰は数と chip の hover。面には塗らない。
   **やおよろずの style.css の写し。** 語と色だけ変えた（光の面の色を、影の面の色に置き換えた）。 */
:root {
  --ink: #ece8e0;         /* 生成り。炭の上で読める明るさ */
  --sub: #b8b3aa;
  --line: #57575d;
  --paper: #3a3a3e;       /* 灰。炭（#2b2b2e）より一段明るい（本人、2026-09-17「グレーを明るくしよう」） */
  --accent: #9ccbd8;      /* 鬼火の青。炭の上で光る */
  --accent2: #d0604a;     /* 朱（α版の札） */
  --earth: #979289;       /* 鈍い灰 */
}

* { 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: #454549; 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: #454549; }
.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: #454549; }
.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: #424246;
}
.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: #424246; }

/* 一覧の写真は正方形（本家と同じ。余白で正方形にすると写真が小さいままなので、切って揃える）。
   切り方は 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%; }
}

/* ── 祀る神社 ────────────────────────────────────
   かみを祀るの jinja.json から逆引きした社の一覧（開帳の枠の写し） */
.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: #424246; 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: #3f3f43;
  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; }

/* 「記録が無いもの」の節（神格の記録が無い神）。**落とさず、最後に置く。** 見出しは他と同じ格で */
.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: #424246; 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; }
/* 事実の欄のリンクは既定の青にしない——炭の上では読めない（他の五本は白地で既定の青のまま。2026-09-17） */
.work dd a, .desc a, .alpha-note a, .note a { color: var(--accent); }
.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: #454549; 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); }

/* ── 表記の表（このサイトのマスターをそのまま見せる） ───────────── */
.names { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.7; }
.names th, .names td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.names thead th { font-weight: 500; color: var(--sub); font-size: 12px; letter-spacing: .08em; }
.names tbody th { font-weight: 500; white-space: nowrap; }
.names a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.names a:hover { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 620px) { .names { font-size: 12px; } .names th, .names td { padding: 6px 6px; } }

/* 絵の無い神は、総本社（か祀る社）の写真で代える。**絵と見分けがつくように**、縁を薄く色づける */
img.shrine { border-color: var(--earth) !important; }

/* ── 五本の帯（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; } }

/* ── ピックアップ（指で送る）。本家 art-archive/style.css の写し（2026-09-17、本人「ほとけ うつわのピックアップの形に合わせたい」）。
   変えるときは本家を先に変えてから写す ── */
.feature {
  display: block; padding: 0; position: relative;
  background: #424246; 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(66, 66, 70, .96) 0,
    rgba(66, 66, 70, .80) 32%,
    rgba(66, 66, 70, 0) 60%);
}
/* **最後の1枚まで送ると、前の1枚が左に覗く**（右へ寄せきる分のスクロールが
   残らないため）。ただし左に覗くのは前の枚の**文字の側**で、幽霊のような
   字が並ぶ。写真の縁より気が散るので、**左は右より強く沈める。** */
.feature::before {
  left: 0;
  background: linear-gradient(to right,
    rgba(66, 66, 70, 1) 0,
    rgba(66, 66, 70, .90) 35%,
    rgba(66, 66, 70, 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: #6a6a70 transparent;
}
.track::-webkit-scrollbar { height: 6px; }
.track::-webkit-scrollbar-track { background: transparent; }
.track::-webkit-scrollbar-thumb { background: #6a6a70; }

.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: #454549; 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; }
}

.by a { color: var(--sub); text-decoration: none; border-bottom: 1px solid var(--line); }