/* Page: Blog (blog.html) */
body{ background:#0b1022; color:#e7ecff }
.footer{ background:#0b1022; border-top:1px solid rgba(255,255,255,.08) }
.footer p{ color:#e7ecff; opacity:.9 }

.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 }

.blog-list{ padding-block: clamp(48px,8vw,96px); background: linear-gradient(180deg,#0b1022,#0a0f2a) }
.blog-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:24px }
.blog-card{ grid-column: span 4; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.35); transition: transform .25s ease, box-shadow .25s ease; display:flex; flex-direction:column }
.blog-card:hover{ transform: translateY(-6px); box-shadow:0 22px 50px rgba(0,0,0,.45) }
/* Unify wide card to normal size */
.blog-card--wide{ grid-column: span 4 }
.blog-thumb{ display:block; position:relative; overflow:hidden }
.blog-thumb img{ display:block; width:100%; height:280px; object-fit:cover; transition: transform .5s ease }
.blog-card:hover .blog-thumb img{ transform: scale(1.05) }
.blog-meta{ padding:14px 16px 0 16px; font-size:12px; color:#cbd5e1; font-weight:700; letter-spacing:.04em }
.blog-heading{ padding:2px 16px 0 16px; margin:0; font-family: "Noto Serif JP", Georgia, serif; font-size:22px }
.blog-heading a{ color:#e7ecff; text-decoration:none }
.blog-heading a:hover{ text-decoration:underline }
/* Stabilize excerpt height for uniform cards */
.blog-excerpt{ padding:10px 16px 18px 16px; color:#cbd5e1; margin:0; line-height:1.7; min-height:72px }

@media (max-width:1024px){ .blog-card{ grid-column: span 6 } .blog-card--wide{ grid-column: span 6 } }
@media (max-width:640px){ .blog-card{ grid-column: span 12 } .blog-card--wide{ grid-column: span 12 } .blog-thumb img{ height:220px } }