:root{
--bg:#f0f0f0;
--ink:#222;
--muted:#555;
--card:#fff;
--brand:#6a0dad;
--line:#ccc;
--header-bg:#4b0082;  /* header deep purple */
--header-text:#ffea00;/* header yellow */
}
html,body{
margin:0;
padding:0;
background:var(--bg);
color:var(--ink);
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
line-height:1.6
}
header{
background:#4F3485;
color:#FAEF53;
text-align:center;
padding:1.25rem
}
header h1{
margin:.1rem 0 .25rem
}
header p{
margin:0;opacity:.85
}
main{
max-width:900px;
margin:2rem auto;
padding:0 1rem
}

.about{margin-bottom:1.75rem}
.about h2{margin-top:0}
.author-logo{float:left;max-width:100px;height:auto;margin:0 1rem 1rem 0;border-radius:50%}

.tabs{margin-top:1.5rem;border-bottom:1px solid var(--line)}
.tabs ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem;flex-wrap:wrap}
.tabs a{
  display:inline-block; padding:.6rem 1rem; text-decoration:none; color:#222;
  background:#f3f3f3; border:1px solid var(--line); border-bottom:none;
  border-top-left-radius:10px; border-top-right-radius:10px; position:relative; top:1px; font-weight:600;
}
.tabs a.is-active{background:#fff; color:#000; z-index:2}
.panel{
  background:#fff; border:1px solid var(--line); border-radius:0 10px 10px 10px;
  padding:1rem; position:relative; top:-1px;
}

.item{
display:flex;
flex-wrap:wrap;
gap:1rem;
align-items:flex-start;
background: var(--card);
border:1px solid #eee;
border-radius:10px;
padding:1rem;
box-shadow:0 2px 4px rgba(0,0,0,.06);
margin-bottom:1rem
}
.item img{width:auto;height:auto;max-width:150px;max-height:240px;border-radius:6px;object-fit:contain;flex:0 0 auto; border: 1px solid black;}
.item img:hover{border: 1px solid red;}
.item-body{min-width:220px;flex:1}
.item-body h3{margin:.1rem 0 .35rem}
.item-body p{margin:.4rem 0}
.btn{display:inline-block;margin-top:.5rem;padding:.5rem .9rem;background:var(--brand);color:#fff;text-decoration:none;border-radius:6px;font-weight:600}
.btn:hover{filter:brightness(.95)}

.meta{font-size:.9rem;color:var(--muted);margin-bottom:.25rem}
.meta .date{font-variant-numeric:tabular-nums}

footer{text-align:center;padding:1rem;color:var(--muted);font-size:.9rem}
.social-links{margin-top:.5rem}
.social-links a{margin:0 .5rem;color:var(--muted);font-size:1.4rem;text-decoration:none}
.social-links a:hover{color:var(--brand)}

@media (max-width:560px){
  .item{padding:.85rem}
  .item img{max-width:120px;max-height:190px}
}

.summary-hover {
    cursor: pointer; /* Recommended for interactivity */
    transition: background-color 0.3s; /* Smooth transition */
}

/* Color on hover */
.summary-hover:hover {
    background-color: #4F3485; 
    color:#FAEF53;
}

.blog-intro {
    text-align: center;
}