/* 読みもの（views/blog/index.ejs・show.ejs）。雑誌のように、最初の1本を大きく、残りを落ち着いた一覧で */
@view-transition { navigation: auto; }

/* 一覧の頭 */
.bl-hd { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: end; padding-bottom: var(--s-5); }
.bl-hd .eyebrow { margin-bottom: var(--s-3); }
.bl-t { font-size: clamp(28px, 3vw, 40px); letter-spacing: .14em; line-height: 1.3; }
.bl-lead { margin-top: var(--s-2); font-size: var(--fs-sm); letter-spacing: .12em; color: var(--ink-2); }
.bl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.bl-tools .search { flex: 1 1 240px; height: 46px; }
.bl-sort .select { min-width: 160px; background-color: transparent; }
.bl-tools .btn { flex: none; }
@media (min-width: 1000px) {
  .bl-hd { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
}
.bl-cats { margin-bottom: var(--s-5); }
.bl-cats small { margin-left: 6px; font-size: 10px; color: var(--ink-3); }
.bl-found { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-5); margin-bottom: var(--s-4); font-size: var(--fs-sm); color: var(--ink-2); }
.bl-found .tnum { margin-right: 2px; font-family: var(--f-min); font-size: var(--fs-lg); color: var(--ink); }

/* 日付・種類 */
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--fs-xs); letter-spacing: .16em; color: var(--ink-2); }
.bl-meta span { color: var(--moss); }

/* 最初の1本 */
.bl-feat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-5) clamp(40px, 4vw, 56px); border-top: 1px solid var(--ink); }
.bl-feat__ph { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--mist); }
.bl-feat__ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.04); transform: scale(1.04); transition: transform 1.6s var(--ease); }
.bl-feat:hover .bl-feat__ph img { transform: scale(1); }
.bl-feat__ph.is-empty, .bl-row__ph.is-empty { display: grid; place-items: center; color: var(--ink-3); font-family: var(--f-min); letter-spacing: .3em; }
.bl-feat__tx h2 { margin-top: var(--s-4); font-size: var(--fs-2xl); letter-spacing: .1em; line-height: 1.6; }
.bl-feat__tx h2 a { text-decoration: none; }
.bl-feat__tx h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.bl-ex { margin-top: var(--s-4); font-size: var(--fs-md); line-height: 2.1; color: var(--ink-2); }
.bl-feat__tx .lnk { margin-top: var(--s-5); }
@media (min-width: 900px) {
  .bl-feat { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .bl-feat__ph { grid-column: 1 / span 7; aspect-ratio: 16 / 10; max-height: calc(100svh - var(--hd) - 120px); }
  .bl-feat__tx { grid-column: 9 / span 4; padding-bottom: var(--s-4); }
}

/* 落ち着いた一覧（日付・題・写真を1行に） */
.bl-list { border-top: 1px solid var(--rule-strong); }
.bl-row { border-bottom: 1px solid var(--rule); }
.bl-row a { display: grid; grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "d ph" "tx ph"; gap: 6px var(--s-4); align-items: start; padding: var(--s-5) 0; text-decoration: none; }
.bl-row__d { grid-area: d; display: flex; gap: 12px; font-size: var(--fs-xs); letter-spacing: .14em; color: var(--ink-2); }
.bl-row__d span { color: var(--moss); }
.bl-row__tx { grid-area: tx; min-width: 0; }
.bl-row__tx b { display: block; font-family: var(--f-min); font-weight: 600; font-size: var(--fs-lg); letter-spacing: .08em; line-height: 1.7; text-wrap: pretty; word-break: auto-phrase; transition: color var(--t-1); }
.bl-row__tx small { display: -webkit-box; margin-top: 6px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-2); }
.bl-row__ph { grid-area: ph; overflow: hidden; aspect-ratio: 1; background: var(--mist); }
.bl-row__ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .9s var(--ease), filter .9s var(--ease); }
.bl-row a:hover .bl-row__ph img { transform: scale(1.06); filter: saturate(1); }
.bl-row a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (min-width: 900px) {
  .bl-row a { grid-template-columns: 160px minmax(0, 1fr) 144px; grid-template-areas: "d tx ph"; gap: var(--s-5); padding: var(--s-5) 0; }
  .bl-row__d { flex-direction: column; gap: 4px; padding-top: 6px; }
  .bl-row__tx b { font-size: var(--fs-lg); }
  .bl-row__ph { aspect-ratio: 4 / 3; }
}

/* 記事 */
.bp-hd { max-width: 760px; margin: var(--s-5) auto 0; text-align: center; }
.bp-hd .bl-meta { justify-content: center; }
.bp-t { margin-top: var(--s-3); font-size: clamp(24px, 2.6vw, 36px); letter-spacing: .1em; line-height: 1.55; }
.bp-body { max-width: 700px; margin: clamp(32px, 3.6vw, 48px) auto 0; }
.bp-ft { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); max-width: 700px; margin: var(--s-7) auto 0; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.bp-ft .lnk .ic { width: 14px; height: 14px; }
.bp-rel { padding-bottom: clamp(56px, 6vw, 96px); }
.bl-feat__tx h2, .bp-t, .bl-row__tx b { word-break: auto-phrase; line-break: strict; }