body {
     background-color: #FFFFFF;
     color: #374151;
     margin: 0;
 }

 .article-container {
     max-width: 1100px;
     margin-left: auto;
     margin-right: auto;
     padding: 1.5rem;
 }

 .article-breadcrumb {
     margin-bottom: 2rem;
 }

 .breadcrumb-link {
     display: inline-flex;
     align-items: center;
     gap: 0.75rem;
     color: #4B5563;
     text-decoration: none;
     font-size: 0.875rem;
     font-weight: 500;
     transition: color 0.2s;
 }

 .breadcrumb-link:hover {
     color: #111827;
 }

 .breadcrumb-link svg {
     width: 1rem;
     height: 1rem;
 }

 .article-header {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     margin-bottom: 2rem;
 }

 .article-title {
     font-size: 2rem;
     line-height: 2.5rem;
     font-weight: 500;
     color: #111827;
     letter-spacing: -0.025em;
     margin-bottom: 1.5rem;
 }

 .article-meta {
     display: flex;
     align-items: center;
     gap: 1.5rem;
     font-size: 0.875rem;
     color: #6B7280;
 }

 .meta-date {
     background-color: #FD865B33;
     color: #FD865B;
     padding: 0.25rem 0.75rem;
     border-radius: 9999px;
     font-weight: 500;
 }

 .meta-read-time {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
 }

 .meta-read-time svg {
     width: 1rem;
     height: 1rem;
 }

 .featured-image-wrapper {
     margin: 0 0 2.5rem 0;
 }

 .featured-image {
     width: 100%;
     border-radius: 1rem;
     background-color: #F3F4F6;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
 }

 .post-body {
     font-size: 1.125rem;
     line-height: 1.75;
     color: #374151;
 }

 .post-body h2,
 .post-body h3,
 .post-body h4 {
     color: #111827;
     font-weight: 700;
     line-height: 1.3;
     margin-top: 2.5rem;
     margin-bottom: 1rem;
 }

 .post-body h2 {
     font-size: 1.875rem;
 }

 .post-body h3 {
     font-size: 1.5rem;
 }

 .post-body h4 {
     font-size: 1.25rem;
 }

 .post-body p {
     margin-bottom: 1.25rem;
 }

 .post-body a {
     color: #2563EB;
     text-decoration: underline;
     font-weight: 500;
     overflow-wrap: break-word;
     word-wrap: break-word;
 }

 .post-body a:hover {
     color: #1D4ED8;
 }

 .post-body ul,
 .post-body ol {
     margin-bottom: 1.25rem;
     padding-left: 1.5rem;
 }

 .post-body li {
     margin-bottom: 0.5rem;
     position: relative;
     padding-left: 1.75rem;
 }

 .post-body li::before {
     content: '•';
     position: absolute;
     left: 0;
     top: -0.1em;
     font-size: 1.5rem;
     color: #111111;
 }

 .post-body img {
     display: block;
     max-width: 100%;
     height: auto !important;
     border-radius: 0.75rem;
     margin: 2rem auto;
     float: none !important;
 }


 /* =============================================
* Responsive Breakpoints (Mobile First)
* =============================================*/

 @media (min-width: 768px) {
     .article-container {
         padding: 3rem;
     }
 }

 @media (min-width: 1024px) {
     .article-header {
         flex-direction: row;
         justify-content: space-between;
         align-items: flex-start;
         gap: 2rem;
     }

     .article-header-main {
         flex: 1;
     }
 }