/* Blog archive: shares the homepage's paper, ink, hand lettering and navigation. */
.page-blog { font-size: 16px; }
.page-blog .site-header__nav [aria-current="page"] { color: var(--cyan-dark); text-decoration: underline; text-underline-offset: 7px; }
.blog-hero { padding: 28px 0 52px; background: var(--paper-warm); border-bottom: 2px solid var(--ink); }
.blog-breadcrumb { display: flex; gap: 12px; margin-bottom: 32px; color: var(--ink-soft); font-size: 14px; }
.blog-breadcrumb a { text-decoration: underline; text-underline-offset: 4px; }
.blog-hero .eyebrow { background: var(--cloud); font-size: 16px; }
.blog-hero h1 { margin: 0 0 24px; font-family: var(--font-hand); font-weight: 400; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.5; letter-spacing: .015em; }
.blog-hero h1::after { content: ""; display: block; width: 150px; height: 5px; margin-top: 18px; background: var(--cyan); transform: rotate(-1deg); }
.blog-hero p:last-child { max-width: 48em; margin: 0; color: var(--ink-soft); }
.page-blog .jp-phrase { display: inline-block; white-space: nowrap; }
.blog-list { padding: 56px 0 72px; }
.page-blog .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.page-blog .post-card { display: flex; flex-direction: column; min-width: 0; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 8px; box-shadow: var(--shadow-sm); overflow: hidden; text-decoration: none; transition: transform .18s, box-shadow .18s; }
.page-blog .post-card:hover { transform: translateY(-3px); box-shadow: 5px 7px 0 rgba(22,135,138,.25); }
.page-blog .post-card:focus-visible { outline: 3px solid var(--cyan-dark); outline-offset: 5px; }
.page-blog .post-card > picture { display: block; }
.page-blog .post-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: var(--paper-warm); border-bottom: 1px solid var(--ink); }
.page-blog .post-card > div { padding: 24px; }
.page-blog .post-card time { display: block; color: var(--ink-soft); font-family: var(--font-en); font-size: 14px; line-height: 1.5; }
.page-blog .post-card time + span { display: inline-block; margin-top: 8px; padding: 3px 8px; color: var(--cyan-dark); background: var(--cloud); border-radius: 3px; font-size: 14px; line-height: 1.7; }
.page-blog .post-card h2 { margin: 16px 0 12px; font-family: var(--font-ja); font-size: 20px; font-weight: 700; line-height: 1.65; letter-spacing: 0; word-break: normal; line-break: strict; overflow-wrap: normal; text-wrap: pretty; }
.page-blog .post-card .muted { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.8; }
.blog-cta { padding: 48px 0 56px; background: var(--cloud); border-top: 2px solid var(--ink); text-align: center; }
.blog-cta h2 { margin: 0 0 24px; font-family: var(--font-hand); font-size: clamp(26px, 3vw, 36px); font-weight: 400; line-height: 1.5; }
@supports (word-break: auto-phrase) { .page-blog .post-card h2 { word-break: auto-phrase; } }
@media (max-width: 1100px) { .page-blog .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .blog-hero { padding: 22px 0 36px; }
  .blog-breadcrumb { margin-bottom: 24px; }
  .blog-hero h1 { font-size: clamp(26px, 7.5vw, 32px); }
  .blog-list { padding: 32px 0 48px; }
  .page-blog .post-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .page-blog .post-card > div { padding: 22px; }
  .blog-cta { text-align: left; }
  .blog-cta .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .page-blog .post-card { transition: none; } .page-blog .post-card:hover { transform: none; } }

.page-blog .blog-lead { text-wrap: pretty; word-break: auto-phrase; }