/* ブログ用。日本語は標準の角ゴで、斜体・字間広げはしない */
:root { --font: "Archivo", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif; }

nav.main a[aria-current="page"] { border-bottom-color: var(--ink); }

.blog { padding: 44px var(--gutter) 72px; max-width: 64rem; }
.blog-h { margin: 0 0 12px; font-weight: 900; font-stretch: 72%; font-size: 64px; line-height: 1; }
:lang(ja) .post h1 { font-stretch: 100%; font-weight: 800; letter-spacing: 0; }
.blog-h .ja, .shelf-head h2 .ja { margin-left: .45em; font-size: .42em; font-weight: 800; font-stretch: 100%; letter-spacing: 0; color: var(--label); white-space: nowrap; }
.shelf-head p span, .shelf-about span, .empty span { margin-left: .35em; }
.crumb { margin: 0 0 24px; font-size: 14px; color: var(--label); }
.crumb a { color: var(--ink); font-weight: 800; }
.shelf-about { margin: 0 0 32px; color: var(--label); }

.shelf { padding: 32px 0 40px; border-top: 1px solid var(--ink); }
.shelf:first-of-type { margin-top: 28px; }
.shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-bottom: 20px; }
.shelf-head h2 { margin: 0; font-weight: 900; font-stretch: 72%; font-size: 40px; line-height: 1; }
.shelf-head p { margin: 0; color: var(--label); }
.shelf-head a { margin-left: auto; font-weight: 800; font-size: 15px; }
.empty { margin: 0; color: var(--label); }

.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.post-row a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; padding: 18px 0; border-bottom: 1px solid #D6D6D6; text-decoration: none; }
.post-row a:hover .post-title { text-decoration: underline; text-underline-offset: 4px; }
.post-row img, .post-noimg { width: 120px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; background: var(--hush); }
.post-body { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.post-meta { color: var(--label); font-size: 14px; margin: 0; }
.post-title { font-weight: 800; font-size: 22px; line-height: 1.3; }
.post-desc { color: var(--label); font-size: 15px; }

.post { max-width: 40rem; }
.post h1 { margin: 0 0 8px; font-weight: 900; font-stretch: 72%; font-size: 52px; line-height: 1.05; text-wrap: balance; }
.post-cover { margin: 28px 0 8px; }
.post-cover img { width: min(100%, 320px); height: auto; background: var(--hush); }
.post-cover figcaption { margin-top: 8px; font-size: 14px; color: var(--label); }
.prose { margin-top: 28px; font-size: 17px; line-height: 1.8; }
:lang(ja) .prose { line-height: 2; }
.prose h2 { margin: 2.2em 0 .6em; font-weight: 800; font-size: 24px; line-height: 1.3; }
.prose h3 { margin: 1.8em 0 .4em; font-weight: 800; font-size: 19px; }
.prose p { margin: 0 0 1.2em; }
.prose img { margin: 1.4em 0; max-width: 100%; height: auto; }
.prose blockquote { margin: 1.4em 0; padding-left: 18px; border-left: 3px solid var(--ink); color: var(--label); }
.prose code { background: var(--hush); padding: 1px 6px; font-size: .92em; }
.prose em { font-style: normal; font-weight: 800; }

@media (max-width: 760px) {
  .blog { padding-top: 28px; }
  .blog-h { font-size: 46px; }
  .post h1 { font-size: 38px; }
  .post-row a { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .post-row img, .post-noimg { width: 88px; }
  .post-title { font-size: 19px; }
}

.recent-blog .more { margin: 14px 0 0; }
.recent-blog .more a { text-decoration: none; font-weight: 500; }
.recent-blog .more a:hover { text-decoration: underline; text-underline-offset: 4px; }