/* Page: Blog Post (refined) */
/* Make page body and footer share the same background to avoid mismatch */
body{ background: linear-gradient(180deg,#0b1022,#0a0f2a); color:#e7ecff }
.footer{ background: transparent; border-top:1px solid rgba(255,255,255,.08) }
.footer p{ color:#e7ecff; opacity:.9 }

/* Hero (reuse blog styling) */
.blog-hero{ padding-block: clamp(80px,10vw,120px); background: linear-gradient(135deg,#0b1022,#0d1535); color:#e7ecff; border-bottom:1px solid rgba(255,255,255,.06) }
.blog-title{ font-family: "Noto Serif JP", Georgia, serif; font-size: clamp(30px, 5.6vw, 50px); font-weight:900; letter-spacing:.04em; margin:0 0 8px 0 }
.blog-subtitle{ font-size:15px; opacity:.85; margin:0 }
@media (max-width: 640px){ .blog-hero{ display:none } }

.post{ background: linear-gradient(180deg,#0b1022,#0a0f2a); color:#e7ecff; padding-bottom: 100px }
.post-article{ max-width: 920px; margin: 0 auto; padding: 48px 16px }

/* Progress bar */
.post-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,#60a5fa,#a78bfa); z-index:100 }

/* Breadcrumb */
.post-breadcrumb{ font-size:13px; color:#cbd5e1; margin: 0 0 8px 0 }
.post-breadcrumb a{ color:#cbd5e1; text-decoration:none }
.post-breadcrumb a:hover{ text-decoration:underline }

.post-header{ margin-bottom: 20px }
.post-title{ font-family: "Noto Serif JP", Georgia, serif; font-size: clamp(30px, 5.2vw, 50px); margin:0 0 6px 0; font-weight:900; letter-spacing:.01em }
.post-meta{ color:#cbd5e1; font-size:13px; font-weight:700; letter-spacing:.04em }

.post-cover{ margin: 18px 0 26px 0 }
.post-cover img{ width:100%; height: 480px; object-fit: cover; border-radius: 16px; box-shadow: 0 22px 54px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.08) }

/* Author */
.post-author{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:12px 14px; border-radius:12px; margin: 0 0 20px 0 }
.post-author .avatar{ width:40px; height:40px; border-radius:50%; background:#1f2937 }
.post-author .name{ font-weight:800 }
.post-author .role{ font-size:12px; color:#cbd5e1 }

/* Body */
.post-body{ font-size:16px; line-height:1.9; color:#dbe4f3 }
.post-body p{ margin: 0 0 20px 0 }
.post-body p:first-of-type::first-letter{ float:left; font-family: "Noto Serif JP", Georgia, serif; font-size: 3.2em; line-height:.9; padding: 6px 10px 0 0; color:#a5b4fc }
.post-body .pullquote{ margin: 20px 0; padding: 12px 16px; border-left:4px solid #93c5fd; color:#e7ecff; font-style:italic; background:rgba(255,255,255,.03); border-radius:8px }

/* Tags */
.post-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 16px }
.post-tag{ font-size:12px; font-weight:800; color:#0b1022; background:linear-gradient(135deg,#93c5fd,#a78bfa); padding:6px 10px; border-radius:999px }

@media (max-width:640px){ .post-cover img{ height: 260px } }