/* 北杜の見どころ（/stories）と記事（/story-*）だけの組み方。部品そのものは parts.css。
   記事は3つの幅の軸で組む。本文は1行40字の列（720px）、章の間の写真はその 1.414 倍（1018px）、場所と体験の方法は 1200px まで。
   どの幅も同じ中心にそろえる */

/* ---------- 記事：幅の軸 ---------- */
.silver.page-story main .article--story {
  --measure: 40em;
  --mid-side: calc(var(--measure) * .207);
  display: grid;
  grid-template-columns:
    [wide-start] minmax(0, 1fr)
    [mid-start] minmax(0, var(--mid-side))
    [text-start] min(100%, var(--measure)) [text-end]
    minmax(0, var(--mid-side)) [mid-end]
    minmax(0, 1fr) [wide-end];
  max-width: none;
  margin: 0 auto;
}
.silver.page-story main .article--story > * { grid-column: text; min-width: 0; }

/* 頭 A：全幅の写真 → h1 → 小見出しの一文 → 要約（リード 21px） */
.silver.page-story main .article--story > .media:first-child {
  grid-column: wide; width: calc(100vw - var(--sbw, 0px)); max-width: none;
  margin: var(--s-0) calc(50% - 50vw + var(--sbw, 0px) / 2) 0;
  border-radius: 0;
}
.silver.page-story main .story-head { margin: 0; }
.silver.page-story main .story-head h1 { margin: var(--s-6) 0 0; }
.silver.page-story main .story-head .article__lead { margin: var(--s-n2) 0 0; color: var(--ds-muted); }
.silver.page-story main .story-claim {
  max-width: none; margin: var(--s-4) 0 0; padding: 0; border: 0;
  font-size: var(--s-1); font-weight: 400; line-height: var(--lh-body); color: var(--ds-sumi);
}

/* 章：墨の線＋h2。本文 18px、1行40字 */
.silver.page-story main .story-part { margin: var(--s-8) 0 0; }
.silver.page-story main .story-part > h2 {
  display: block; margin: 0 0 var(--s-4); padding: var(--s-0) 0 0; border-top: 1px solid var(--ds-sumi);
  font-size: var(--ds-h2); line-height: var(--lh-head); letter-spacing: .04em;
}
.silver.page-story main .story-part > p { margin: 0; }
.silver.page-story main .story-part > p + p { margin-top: 1em; }

/* 章の間の写真：本文の列より広く（1.414 倍）、比率 1.414 : 1。市の写真は右下のクレジットを切らないよう右にそろえる */
.silver.page-story main .story-figure { grid-column: mid; width: 100%; max-height: none; margin: var(--s-8) 0 0; aspect-ratio: 1.414 / 1; overflow: hidden; background: var(--ds-face); }
.silver.page-story main .story-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.silver.page-story main .story-figure img[data-asset-id^="city-"] { object-position: 100% 50%; }

/* 脚注の番号 */
.silver.page-story main .cite { font-size: var(--s-n2); line-height: 0; vertical-align: super; }
.silver.page-story main .cite a { padding: 0 2px; color: var(--ds-muted); text-decoration: none; }
.silver.page-story main .cite a:hover { color: var(--ds-sumi); text-decoration: underline; text-underline-offset: .2em; }

/* ---------- この話を体験できる場所：1200px まで、PC 3列。まとめて保存するボタンは章の頭に ---------- */
.silver.page-story main .story-places-sec { grid-column: wide; margin: var(--ds-sec) 0 0; }
.silver.page-story main .story-places-sec__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-0) var(--s-4);
  margin: 0 0 var(--s-4); padding: var(--s-0) 0 0; border-top: 1px solid var(--ds-sumi);
}
.silver.page-story main .story-places-sec__head > h2 { margin: 0; padding: 0; border: 0; font-size: var(--ds-h2); line-height: var(--lh-head); letter-spacing: .04em; }
.silver.page-story main .story-add-all { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-n2) var(--s-1); margin: 0; }
.silver.page-story main .story-places {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-4);
  margin: 0; padding: 0; list-style: none;
}
/* 一言（なぜこの場所か）の行と、カードの行を、列をまたいでそろえる */
.silver.page-story main .story-place { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: var(--s-0); margin: 0; padding: 0; border: 0; }
.silver.page-story main .story-place__note { margin: 0; font-size: var(--s-n1); line-height: var(--lh-body); color: var(--ds-sumi); }
.silver.page-story main .story-place .card { flex: none; }

/* ---------- 体験する方法・旅程にする：横に並べた送り ---------- */
.silver.page-story main .story-how { grid-column: wide; margin: var(--ds-sec) 0 0; }
.silver.page-story main .story-how > h2 {
  margin: 0 0 var(--s-4); padding: var(--s-0) 0 0; border-top: 1px solid var(--ds-sumi);
  font-size: var(--ds-h2); line-height: var(--lh-head); letter-spacing: .04em;
}
.silver.page-story main .story-how__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.silver.page-story main .story-how__item { display: flex; flex-direction: column; margin: 0; padding: var(--s-0) 0 0; border-top: 1px solid var(--ds-rule); background: none; }
.silver.page-story main .story-how__item h3 { margin: 0 0 var(--s-n2); font-size: var(--ds-h3); }
.silver.page-story main .story-how__item p { margin: 0; }
.silver.page-story main .story-how__item p:last-child { margin-top: auto; padding-top: var(--s-1); }

/* ---------- 出典：畳む。中の文は 13px ---------- */
.silver.page-story main .sources { margin: var(--ds-sec) 0 0; padding: 0; border: 0; font-size: var(--s-n2); }
.silver.page-story main .sources__fold > summary h2 { margin: 0; padding: 0; border: 0; font-size: var(--s-1); line-height: var(--lh-head); letter-spacing: .04em; }
.silver.page-story main .sources__list { margin: 0 0 var(--s-1); padding-left: 2.2em; }
.silver.page-story main .sources__list li { margin: 0; padding: var(--s-n4) 0; font-size: var(--s-n2); line-height: var(--lh-body); overflow-wrap: anywhere; }
.silver.page-story main .sources__list li { scroll-margin-top: calc(var(--s-8) + var(--s-1)); }
.silver.page-story main .sources__list li:target { background: var(--ds-tint); }
.silver.page-story main .sources__list a { color: var(--ds-sumi); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.silver.page-story main .sources__host { margin-left: .25em; }
.silver.page-story main :is(.sources__host, .checked) { font-size: var(--s-n2); color: var(--ds-muted); }

@media (max-width: 1023px) {
  .silver.page-story main .story-places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .silver.page-story main .story-head h1 { margin-top: var(--s-4); }
  .silver.page-story main .story-claim { margin-top: var(--s-1); }
  .silver.page-story main .story-part { margin-top: var(--s-6); }
  .silver.page-story main .story-part > h2 { margin-bottom: var(--s-1); }
  .silver.page-story main .story-figure { width: auto; margin-top: var(--s-6); margin-inline: calc(-1 * var(--gutter)); }
  .silver.page-story main :is(.story-places-sec__head, .story-how > h2) { margin-bottom: var(--s-1); }
  .silver.page-story main .story-add-all { width: 100%; }
  .silver.page-story main .story-add-all .btn--primary { width: 100%; padding-block: var(--s-n2); line-height: var(--lh-head); }
  .silver.page-story main .story-how__list { grid-auto-flow: row; gap: var(--s-1); }
}
@media (max-width: 559px) {
  .silver.page-story main .story-places { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

/* ---------- 一覧（/stories）：最初に江戸街道を大きく（写真と文を 1.414 : 1）、残りは PC 3列 ---------- */
.silver.page-stories main .story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); margin-top: var(--s-8); }
.silver.page-stories main .story-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.silver.page-stories main .card--story { gap: 0; min-width: 0; }
.silver.page-stories main .card--story .card__link { display: block; color: inherit; text-decoration: none; }
.silver.page-stories main .card--story .media { aspect-ratio: 1.414 / 1; margin: 0 0 var(--s-0); }
.silver.page-stories main .card--story .card__title { margin: 0; font-size: var(--s-1); line-height: var(--lh-head); letter-spacing: .04em; }
.silver.page-stories main .card--story .card__lead { margin: var(--s-n2) 0 0; font-size: var(--s-0); color: var(--ds-sumi); }
.silver.page-stories main .card--story .card__link:hover .card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }

.silver.page-stories main .card--feature {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.414fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  column-gap: var(--s-4);
}
.silver.page-stories main .card--feature .card__link { display: contents; }
.silver.page-stories main .card--feature .media { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
.silver.page-stories main .card--feature .card__title { grid-column: 2; align-self: start; padding-top: var(--s-0); border-top: 1px solid var(--ds-sumi); font-size: var(--ds-h2); }
.silver.page-stories main .card--feature .card__lead { grid-column: 2; margin-top: var(--s-0); font-size: var(--s-1); }
.silver.page-stories main .card--feature .card__excerpt { grid-column: 2; align-self: end; margin: var(--s-4) 0 0; color: var(--ds-muted); }
.silver.page-stories main .card--feature .card__link:focus-visible { outline: none; }
.silver.page-stories main .card--feature .card__link:focus-visible .card__title { outline: 2px solid var(--semantic-color-focus-default, currentColor); outline-offset: 4px; }

@media (max-width: 1023px) {
  .silver.page-stories main .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .silver.page-stories main .story-grid { margin-top: var(--s-6); gap: var(--s-4) var(--s-1); }
  .silver.page-stories main .card--feature { display: flex; flex-direction: column; }
  .silver.page-stories main .card--feature .card__link { display: block; }
  .silver.page-stories main .card--feature .media { margin-bottom: var(--s-0); }
  .silver.page-stories main .card--feature .card__title { padding-top: 0; border-top: 0; }
  .silver.page-stories main .card--feature .card__lead { font-size: var(--s-0); }
}
@media (max-width: 559px) {
  .silver.page-stories main .story-grid, .silver.page-stories main .story-grid:has(> :nth-child(5):last-child) { grid-template-columns: minmax(0, 1fr); }
}