/* Blog-style homepage CSS - colors chosen to match img/rcmonsterdude_2.png */
:root {
    --bg: #0f0f10;
    --panel: #141416;
    --accent: #d94f2a; /* warm orange to match logo */
    --muted: #9aa1a6;
    --text: #e9ecef;
}

* { box-sizing: border-box; }
html,body{ height:100%; margin:0; }
body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: linear-gradient(180deg, var(--bg), #070708 80%);
    color:var(--text);
    line-height:1.45;
    padding:24px;
}

.site-header{
    max-width:1100px; margin:0 auto 28px; display:flex; align-items:center; gap:18px;
}
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text);} 
.logo img{ height:72px; width:auto; border-radius:10px; box-shadow:0 6px 30px rgba(0,0,0,0.6);} 
.site-title{ font-size:28px; font-weight:700; letter-spacing: -0.02em; }
.site-sub{ color:var(--muted); font-size:13px; }

.container{ max-width:1100px; margin:0 auto; }

.intro{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    padding:18px; border-radius:10px; margin-bottom:18px; border:1px solid rgba(255,255,255,0.03);
}

.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
    padding:14px; border-radius:10px; border:1px solid rgba(255,255,255,0.03);
    display:flex; flex-direction:column; gap:12px;
}
.card img{ width:100%; height:160px; object-fit:cover; border-radius:8px; }
.card h3{ margin:0; font-size:18px; }
.meta{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px; }
.status{ margin-left:auto; padding:4px 8px; border-radius:999px; font-weight:600; font-size:12px; }
.status.active{ background: linear-gradient(90deg, rgba(217,79,42,0.12), rgba(217,79,42,0.06)); color:var(--accent); border:1px solid rgba(217,79,42,0.12); }
.status.idle{ color:var(--muted); background:rgba(255,255,255,0.02); }

.card p{ margin:0; color:var(--muted); font-size:14px; }

.read-more{ display:inline-block; margin-top:auto; color:var(--accent); font-weight:700; text-decoration:none; }

/* footer */
.site-footer{ max-width:1100px; margin:28px auto 0; color:var(--muted); font-size:13px; }

@media (max-width:520px){
    .logo img{ height:56px; }
    .site-title{ font-size:20px; }
}