*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',-apple-system,sans-serif;background:#fff;color:#111;line-height:1.7;overflow-x:hidden}
html{overflow-x:hidden}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.15}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
.section-tag{display:inline-block;font-size:0.7rem;letter-spacing:3px;text-transform:uppercase;color:#cd6903;margin-bottom:14px;font-weight:600}
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:#cd6903;z-index:9999;width:0%;transition:width 0.05s linear}
.blog-card{background:#fff;border:1px solid #e5e2dc;border-radius:14px;overflow:hidden;transition:transform 0.3s,box-shadow 0.3s;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.08)}
.blog-card-img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 0.4s}
.blog-card:hover .blog-card-img{transform:scale(1.03)}
.blog-card-body{padding:24px;flex-grow:1;display:flex;flex-direction:column}
.blog-card-tag{font-size:0.62rem;letter-spacing:2px;text-transform:uppercase;color:#cd6903;font-weight:600;margin-bottom:10px}
.blog-card-body h3{font-family:'Inter',sans-serif;font-size:0.92rem;font-weight:700;line-height:1.4;margin-bottom:8px;flex-grow:1}
.blog-card-body p{font-size:0.8rem;color:#6b6b6b;line-height:1.6;margin-bottom:12px}
.blog-card-cta{font-size:0.78rem;color:#cd6903;font-weight:600}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1024px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.blog-grid{grid-template-columns:1fr}.blog-card[style*="grid-template-columns"]{grid-template-columns:1fr !important}
.blog-card[style*="grid-column"]{grid-template-columns:1fr !important}
}
    
/* ═══ Blog card date ═══ */
.blog-card-date{font-size:0.68rem;color:#aaa;margin-bottom:6px;display:block}

/* ═══ DARK MODE COMPREHENSIVE ═══ */
body.dark { background: #111 !important; color: #e0e0e0 !important; }
body.dark .dark-switch-track { background: #333 !important; }
body.dark .dark-switch-thumb { background: #cd6903 !important; }
body.dark h1, body.dark h2, body.dark h3 { color: #fff !important; }
body.dark p { color: rgba(255,255,255,0.6) !important; }
body.dark section { background: #111 !important; }
body.dark [style*="background:#fff"] { background: #111 !important; }
body.dark [style*="background:#efe9df"] { background: #1a1a1a !important; }
body.dark [style*="background:#faf8f5"] { background: #1a1a1a !important; }
body.dark [style*="background:#f8f6f2"] { background: #1a1a1a !important; }
body.dark [style*="color:#111"] { color: #fff !important; }
body.dark [style*="color:#3a3a3a"] { color: rgba(255,255,255,0.7) !important; }
body.dark [style*="color:#6b6b6b"] { color: rgba(255,255,255,0.5) !important; }
body.dark [style*="border:1px solid #e5e2dc"] { border-color: rgba(255,255,255,0.1) !important; }
body.dark [style*="border-bottom:1px solid #e5e2dc"] { border-color: rgba(255,255,255,0.08) !important; }
body.dark [style*="border:1.5px solid #e5e2dc"] { border-color: rgba(255,255,255,0.1) !important; }
body.dark .btn-dark { background: rgba(255,255,255,0.1) !important; color: #fff !important; }
body.dark .btn-outline-dark { border-color: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.6) !important; }
/* Blog card dark mode */
body.dark .blog-card { background: #1a1a1a !important; border-color: rgba(255,255,255,0.08) !important; }
body.dark .blog-card-body h3 { color: #fff !important; }
body.dark .blog-card-body p { color: rgba(255,255,255,0.5) !important; }
body.dark .blog-card-date { color: rgba(255,255,255,0.3) !important; }
body.dark .blog-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important; }

.blog-grid .blog-card:not(.blog-card--featured)>div:first-child{aspect-ratio:16/10!important;height:auto!important;overflow:hidden;align-self:start}
.blog-grid .blog-card:not(.blog-card--featured) .blog-card-img{width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover}
.blog-card--featured:hover{box-shadow:0 14px 40px rgba(205,105,3,.18)}
@media(max-width:680px){.blog-card--featured{grid-template-columns:1fr!important}}