:root{
    --paper:#f5f2ea; --card:#fffdf7; --ink:#202020; --muted:#77716a;
    --red:#bc002d; --red-dark:#8f0022; --line:#e5dfd0;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:'Segoe UI',system-ui,Arial,sans-serif;background:var(--paper);color:var(--ink)}
  header{padding:60px 20px 40px;text-align:center}
  .sun{width:96px;height:96px;border-radius:50%;background:var(--red);color:#fff;
       display:inline-flex;align-items:center;justify-content:center;font-size:34px;
       font-family:serif;letter-spacing:2px;box-shadow:0 6px 24px rgba(188,0,45,.35);margin-bottom:18px}
  h1{font-size:34px;letter-spacing:1px}
  header p{color:var(--muted);margin-top:8px}
  .grid{max-width:1100px;margin:0 auto;display:grid;
        grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;padding:0 20px 60px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
        display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
  .card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
  .cover{height:300px;background:#23272e}
  .cover img{width:100%;height:100%;object-fit:cover;display:block}
  .card-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
  h2{font-size:19px}
  .author{color:var(--red);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
  .desc{color:var(--muted);font-size:14px;flex:1}
  .btn{display:block;text-align:center;background:var(--red);color:#fff;text-decoration:none;
       padding:11px;border-radius:9px;font-weight:600;transition:background .2s}
  .btn:hover{background:var(--red-dark)}
  footer{border-top:1px solid var(--line);padding:24px 20px;text-align:center;color:var(--muted);font-size:13px}