/* HALSHICA BLOG — layout */
.blog-page main {
  max-width: 748px;
  width: 100%;
  margin: 0 auto;
  padding: 45px 24px 90px;
}
.blog-page .meta { font-size: 11px; color: #999; }
.blog-page .post { padding: 24px 0; border-bottom: 1px solid #eee; }
.blog-page .post:first-of-type { padding-top: 0; }
.blog-page .post h2 { font-size: 18px; font-weight: 500; margin: 9px 0; color: #202020; }
.blog-page .post p { font-size: 13px; color: #777; line-height: 1.9; margin: 7px 0; }
.blog-page .empty { padding: 45px 0; color: #999; }
.blog-page .pager { display: flex; gap: 18px; justify-content: center; margin-top: 40px; font-size: 12px; }
.blog-page .pager a { color: #76543e; }
.blog-page .title { font-size: 27px; font-weight: 500; line-height: 1.6; margin: 14px 0 36px; }

/* Article body (shared by index and individual post) */
.blog-page .content { font-size: 15px; line-height: 2.2; overflow-wrap: anywhere; }
.blog-page .content h2 { font-size: 22px; font-weight: 500; margin: 2em 0 .6em; }
.blog-page .content h3 { font-size: 18px; font-weight: 500; margin: 1.8em 0 .5em; }
.blog-page .content img {
  display: block;
  width: 700px;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.blog-page .content blockquote { border-left: 2px solid #cbb8a8; padding-left: 18px; color: #777; margin: 1.5em 0; }
.blog-page .content a, .blog-page .content a:visited { color: #777; text-decoration: none; }
.blog-page .content a:hover, .blog-page .post-date:hover, .blog-page .back:hover { opacity: .6; }
.blog-page .post .content p { font-size: 15px; color: #202020; line-height: 2.2; margin: 1em 0; }
.blog-page .post-date { color: #999; text-decoration: none; }
.blog-page .back { display: inline-block; margin-top: 55px; font-size: 12px; color: #777; }

/* Share actions */
.blog-page .share-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 52px; }
.blog-page .share-tools a, .blog-page .share-tools button { background: transparent; border: 1px solid #dededc; border-radius: 2px; color: #777; font: inherit; font-size: 12px; padding: 8px 13px; cursor: pointer; text-decoration: none; }
.blog-page .share-tools a:hover, .blog-page .share-tools button:hover { opacity: .6; }
.blog-page .share-tools #shareMessage { color: #777; font-size: 12px; }
.blog-page .share-tools [hidden] { display: none; }

/* Header values match ../style.css (kept explicit for compatibility) */
body > header { padding: 25px 7%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dededc; }
body > header nav { display: flex; gap: 25px; font-size: 10px; letter-spacing: .15em; }
body > header .logo { font-size: 12px; letter-spacing: .25em; }

@media (max-width: 650px) {
  body > header { padding: 20px 5%; }
  body > header nav { gap: 12px; font-size: 9px; }
  .blog-page main { padding-top: 25px; }
}
@media (max-width: 600px) {
  .blog-page main { padding-right: 6%; padding-bottom: 70px; padding-left: 6%; }
  .blog-page .title { font-size: 23px; }
}