body{background:#fdf8ff;padding-bottom:0}
.article-nav{padding:1rem 1.25rem;background:#fff;border-bottom:1px solid rgba(107,33,168,.12)}
.article-nav-inner{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.article-nav img{height:38px;width:auto}
.article-back{color:#6b21a8;font-size:.82rem;font-weight:700}
.article-page{max-width:760px;margin:0 auto;padding:2rem 1.25rem 4rem}
.article-cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;margin-bottom:2rem;box-shadow:0 10px 34px rgba(107,33,168,.12)}
.article-category{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a21caf;margin-bottom:.7rem}
.article-page h1{font-size:clamp(2rem,7vw,3.25rem);margin-bottom:.8rem}
.article-meta{color:#78716c;font-size:.82rem;margin-bottom:2rem}
.article-content{font-size:1rem;line-height:1.85}
.article-content h2,.article-content h3{margin:2rem 0 .8rem}
.article-content p,.article-content ul,.article-content blockquote{margin-bottom:1.2rem}
.article-content ul{list-style:disc;padding-left:1.3rem}
.article-content a{color:#6b21a8;text-decoration:underline;text-underline-offset:3px}
.article-content blockquote{padding:1rem 1.2rem;border-left:3px solid #7c3aed;background:#f5f0ff;border-radius:0 12px 12px 0;color:#3b0764}
.article-cta{margin-top:2.5rem;padding:1.5rem;border-radius:18px;background:linear-gradient(135deg,#f5f0ff,#fff0f9);text-align:center}
.article-footer{padding:2rem 1.25rem;text-align:center;background:#2d0060;color:rgba(255,255,255,.78);font-size:.78rem}
@media(min-width:768px){.article-page{padding-top:3.5rem}.article-content{font-size:1.06rem}}