*{box-sizing:border-box}body{color:#222;background:#f5f5f5;margin:0}.blog{min-height:100vh}.navbar{justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto;padding:22px 24px;display:flex}.brand{letter-spacing:-.5px;font-size:24px;font-weight:700}.nav-links a{color:#222;font-size:15px;font-weight:500;text-decoration:none}.nav-links a:hover{text-decoration:underline}.blog-header{background:#fff;border-bottom:1px solid #e8e8e8}.hero{text-align:center;max-width:850px;margin:0 auto;padding:70px 24px 80px}.hero h1{letter-spacing:-2px;margin:0 0 18px;font-size:clamp(38px,6vw,64px);line-height:1.05}.hero p{color:#666;max-width:650px;margin:0 auto;font-size:18px;line-height:1.7}.posts-container{max-width:1100px;margin:0 auto;padding:60px 24px 80px}.section-heading{margin-bottom:30px}.section-heading h2{letter-spacing:-.5px;margin:0 0 6px;font-size:32px}.section-heading p{color:#777;margin:0}.posts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;display:grid}.post-card{background:#fff;border:1px solid #e5e5e5;border-radius:14px;transition:transform .2s,box-shadow .2s;overflow:hidden}.post-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px #00000014}.post-card-content{padding:28px}.post-category{color:#555;text-transform:uppercase;letter-spacing:.5px;background:#f0f0f0;border-radius:20px;margin-bottom:14px;padding:5px 10px;font-size:12px;font-weight:600;display:inline-block}.post-card h3{letter-spacing:-.4px;margin:0 0 12px;font-size:25px;line-height:1.25}.post-meta{color:#777;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;font-size:13px;display:flex}.separator{color:#bbb}.post-preview{color:#555;margin:0 0 24px;font-size:15px;line-height:1.7}.read-more{color:#222;cursor:pointer;background:0 0;border:0;padding:0;font-size:14px;font-weight:600}.read-more:hover{text-decoration:underline}.status-message{text-align:center;background:#fff;border:1px solid #e5e5e5;border-radius:14px;padding:60px 20px}.status-message h3{margin:0 0 8px}.status-message p{color:#777;margin:0}.status-message.error{border-color:#f0cccc}.status-message.error h3{color:#b00020}.loader{border:3px solid #ddd;border-top-color:#222;border-radius:50%;width:32px;height:32px;margin:0 auto 15px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.blog-footer{text-align:center;background:#fff;border-top:1px solid #e5e5e5;padding:30px 20px}.blog-footer p{color:#777;margin:0;font-size:13px}@media (width<=700px){.navbar{padding:18px 20px}.brand{font-size:21px}.hero{padding:55px 20px 60px}.hero h1{letter-spacing:-1px}.hero p{font-size:16px}.posts-container{padding:45px 20px 60px}.posts-grid{grid-template-columns:1fr}.section-heading h2{font-size:28px}.post-card-content{padding:24px}}
