.blog-title .date{ 
	font:400 12px/12px 'Arimo', Helvetica, Arial, sans-serif; 
	color: #666; 
	margin-bottom: 10px; 
	background-color: #f0f0f0; 
	padding: 10px
}

.blog-title .date:before{
	content: '\f017';
    font-family: 'FontAwesome', serif;
    margin-right: 5px;
}


.blog-details-area .wrap{
    max-width:var(--max-width);
    margin:36px auto;
    padding:28px;
  }
  .blog-details-area header{ display:flex; align-items:center; gap:16px; margin-bottom:18px}
  .blog-details-area .logo{
    width:64px; height:64px; border-radius:10px;
    background:linear-gradient(135deg, rgba(178,58,47,0.12), rgba(178,58,47,0.06));
    display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--accent)
  }
  .blog-details-area h1{ font-size:1.6rem; margin:0}
  .blog-details-area p.lead{ color:var(--muted); margin-top:6px; margin-bottom:18px}

  .blog-details-area .card{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:0 6px 20px rgba(10,10,10,0.04);
    padding:18px;
    border:1px solid rgba(10,10,10,0.03);
  }

  .blog-details-area nav.toc{ margin:16px 0 24px; display:flex; gap:8px; flex-wrap:wrap }
  .blog-details-area nav.toc a{ font-size:0.9rem; color:var(--accent); text-decoration:none; padding:8px 12px; border-radius:999px; background:rgba(178,58,47,0.06) }

  .blog-details-area .accordion{ width:100%; border-radius:8px; overflow:hidden }
  .blog-details-area .acc-item{ border-bottom:1px solid rgba(0,0,0,0.06) }
  .blog-details-area .acc-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; cursor:pointer; background:transparent; border:0; width:100%;
    font-weight:600; font-size:1rem;
  }
  .blog-details-area .acc-head:focus{ outline:3px solid rgba(178,58,47,0.12); }
  .blog-details-area .acc-body{ padding:0 16px 18px; font-size:0.95rem; color:#222; display:none }
  .blog-details-area .acc-body p{ margin:12px 0 }
  .blog-details-area .small{ font-size:0.88rem; color:var(--muted) }

  .blog-details-area .muted-note{ font-size:0.86rem; color:var(--muted); margin-top:12px }
  .blog-details-area footer{ margin-top:20px; font-size:0.85rem; color:var(--muted) }

  /* responsive */
  @media (max-width:640px){
    .blog-details-area .wrap{ padding:18px; margin:18px auto }
    .blog-details-area .logo{ width:52px; height:52px }
  }