.blog-list { max-width: 900px; margin: 58px 0 72px; border-top: 1px solid #555; }
.blog-list[aria-busy="true"] { min-height: 120px; }
.blog-entry { padding: 28px 0 30px; border-bottom: 1px solid #555; }
.blog-entry-link { display: block; color: inherit; text-decoration: none; }
.blog-entry-link:focus-visible { outline: 1px solid #eee; outline-offset: 8px; }
.blog-entry h2 { max-width: 760px; margin: 0; color: #eee; font: clamp(1.7rem, 4vw, 2.65rem) "PT Serif", "Noto Serif TC", Georgia, serif; font-weight: 400; letter-spacing: -.035em; line-height: 1.12; }
.blog-entry-meta { display: block; margin-top: 11px; color: #999; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.blog-entry-excerpt { max-width: 700px; margin: 16px 0 0; color: #bbb; font-family: "PT Serif", "Noto Serif TC", Georgia, serif; font-size: 1.05rem; line-height: 1.7; white-space: pre-line; }
.blog-entry-link:hover h2, .blog-entry-link:focus-visible h2 { color: #fff; }
.blog-entry-link:hover .blog-entry-excerpt, .blog-entry-link:focus-visible .blog-entry-excerpt { color: #ddd; }
.blog-list-state { margin: 0; padding: 26px 0; color: #999; font-family: "PT Serif", "Noto Serif TC", Georgia, serif; font-size: 1.08rem; font-style: italic; line-height: 1.5; }
.blog-list-state.is-error { color: #e0a39b; font-family: inherit; font-size: .86rem; font-style: normal; }
.blog-retry { margin-top: 14px; }
.blog-detail.life-page { width: min(920px, calc(100% - 40px)); max-width: none; margin: 0 auto; padding: 66px 0 72px; }
.blog-detail-content { max-width: 760px; }
.blog-detail-header { display: block; position: static; width: 100%; padding: 0 0 30px; color: inherit; text-align: left; border-bottom: 1px solid #555; }
.blog-detail-header::after { content: none; }
.blog-detail-heading-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px 36px; }
.blog-detail h1 { justify-self: start; margin: 0; color: #eee; font: clamp(2.3rem, 7vw, 5.4rem) "PT Serif", "Noto Serif TC", Georgia, serif; font-weight: 400; letter-spacing: -.055em; line-height: 1.03; text-align: left; }
.blog-detail-metadata { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 10px 24px; max-width: 360px; color: #999; text-align: right; }
.blog-detail-date { display: block; margin: 0; color: inherit; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.blog-detail-translation { margin: 0; color: #888; font-size: .74rem; font-style: italic; line-height: 1.5; }
.blog-detail-body { max-width: 700px; margin: 38px 0 0; color: #ddd; font-family: "PT Serif", "Noto Serif TC", Georgia, serif; font-size: clamp(1.06rem, 1.7vw, 1.2rem); line-height: 1.9; overflow-wrap: anywhere; }
.blog-detail-body p { margin: 0 0 28px; white-space: pre-line; }
.blog-detail-body p:last-child { margin-bottom: 0; }
.blog-detail-state { color: #999; font-family: "PT Serif", "Noto Serif TC", Georgia, serif; font-size: 1.08rem; font-style: italic; line-height: 1.5; }
.blog-detail-state.is-error { color: #e0a39b; font-family: inherit; font-size: .86rem; font-style: normal; }
.blog-detail-back { display: inline-block; margin-top: 58px; color: #ccc; font-size: .86rem; text-decoration: none; }
.blog-detail-back:hover, .blog-detail-back:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.blog-translation-notice { display: block; margin-top: 10px; color: #777; font-size: .68rem; font-style: italic; line-height: 1.4; }
@media (max-width: 600px) {
  .blog-list { margin: 48px 0 58px; }
  .blog-entry { padding: 23px 0 26px; }
  .blog-entry-excerpt { margin-top: 13px; font-size: 1rem; line-height: 1.65; }
  .blog-detail.life-page { width: min(920px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 58px; }
  .blog-detail-header { padding-bottom: 24px; }
  .blog-detail-heading-row { grid-template-columns: 1fr; gap: 16px; }
  .blog-detail h1 { justify-self: start; text-align: left; }
  .blog-detail-metadata { align-items: flex-start; justify-content: flex-start; max-width: none; text-align: left; }
  .blog-detail-body { margin-top: 30px; font-size: 1.08rem; line-height: 1.8; }
  .blog-detail-body p { margin-bottom: 23px; }
}