:root { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #201a29; background: #f8f6f4; font-family: Montserrat, Arial, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid #ae8ee0; outline-offset: 4px; }
.blog-skip { position: absolute; top: -100px; left: 16px; z-index: 100; padding: 12px 16px; color: #21152d; background: #fff; }
.blog-skip:focus { top: 12px; }
.blog-hero { min-height: 360px; padding: 28px clamp(24px, 5vw, 76px) 70px; color: #fff; background: radial-gradient(circle at 85% 20%, rgba(156, 112, 213, .28), transparent 35%), linear-gradient(135deg, #2e203f 0%, #18131f 78%); }
.blog-hero-inner { max-width: 1320px; margin: 60px auto 0; }
.blog-eyebrow { margin: 0 0 18px; color: #a983cf; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.blog-hero .blog-eyebrow { color: #d7b7f2; }
.blog-hero h1 { max-width: 920px; margin: 0; font-size: clamp(42px, 6.2vw, 88px); line-height: 1.04; letter-spacing: -.055em; }
.blog-hero-inner > p:last-child { max-width: 690px; margin: 24px 0 0; color: #e4dfe9; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65; }
.blog-section { min-height: 360px; padding: 84px clamp(24px, 5vw, 76px) 112px; }
.blog-container { max-width: 1320px; margin: auto; }
.blog-empty { max-width: 780px; padding: clamp(34px, 6vw, 76px); border: 1px solid #e3dce6; border-radius: 28px; background: #fff; box-shadow: 0 20px 60px rgba(49, 29, 63, .04); }
.blog-empty h2, .blog-list-heading h2 { margin: 0; color: #251831; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.1; letter-spacing: -.045em; }
.blog-empty > p:not(.blog-eyebrow) { max-width: 57ch; margin: 22px 0 28px; color: #625b67; font-size: 16px; line-height: 1.7; }
.blog-button { display: inline-flex; align-items: center; min-height: 46px; padding: 12px 20px; border-radius: 100px; color: #fff; background: #3a2750; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.blog-button:hover { background: #65417f; }
.blog-list-heading { margin-bottom: 40px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.blog-card { display: block; overflow: hidden; border: 1px solid #e3dce6; border-radius: 22px; color: inherit; background: #fff; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 18px 45px rgba(49, 29, 63, .1); }
.blog-card-media { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #30203f, #8e63aa); }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-mark { color: rgba(255,255,255,.7); font-size: 84px; font-weight: 700; }
.blog-card-copy { padding: 28px; }
.blog-card-copy time, .blog-article-meta { color: #785a8f; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.blog-card-copy h2 { margin: 16px 0 12px; font-size: 24px; line-height: 1.25; letter-spacing: -.035em; }
.blog-card-copy p { color: #625b67; font-size: 14px; line-height: 1.65; }
.blog-card-copy span { display: inline-block; margin-top: 14px; color: #56356c; font-size: 12px; font-weight: 700; }
.blog-article { max-width: 850px; margin: auto; }
.blog-article-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 32px; }
.blog-article-cover { display: block; width: 100%; max-height: 560px; margin-bottom: 42px; border-radius: 20px; object-fit: cover; }
.blog-article-body { color: #3f3944; font-family: Georgia, serif; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.75; overflow-wrap: anywhere; }
.blog-article-body h2, .blog-article-body h3 { margin: 1.6em 0 .5em; color: #24182e; font-family: Montserrat, Arial, sans-serif; line-height: 1.25; letter-spacing: -.035em; }
.blog-article-body h2 { font-size: 1.65em; }
.blog-article-body h3 { font-size: 1.25em; }
.blog-article-body p, .blog-article-body ul, .blog-article-body ol { margin: 0 0 1.4em; }
.blog-article-body a { color: #684487; text-underline-offset: 3px; }
.blog-article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.blog-article-body blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 4px solid #a983cf; color: #61546a; }
.blog-article-body pre { overflow-x: auto; padding: 20px; border-radius: 12px; color: #fff; background: #21182b; font-size: 14px; }
.blog-back { display: inline-block; margin-top: 38px; color: #56356c; font-size: 13px; font-weight: 700; text-decoration: none; }
.blog-back:hover { text-decoration: underline; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .blog-hero { min-height: 310px; padding-top: 18px; padding-bottom: 54px; } .blog-hero-inner { margin-top: 40px; } .blog-section { padding-top: 56px; padding-bottom: 72px; } .blog-grid { grid-template-columns: 1fr; } .blog-empty { border-radius: 18px; } }