.site-nav a[aria-current="page"] { color: var(--violet); }

.blog-intro { padding: 74px 0 46px; overflow: hidden; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: end; gap: 64px; }
.blog-intro h1 { max-width: 720px; margin: 0; font-size: clamp(2.8rem, 4.6vw, 4.65rem); }
.blog-intro h1 span { background: linear-gradient(100deg, #752cf2, #e60dd5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-right: .08em; }
.intro-copy { max-width: 420px; margin: 0 0 12px; font-size: 1.08rem; }

.featured-wrap { padding-bottom: 120px; }
.featured-card { display: grid; grid-template-columns: 1.12fr .88fr; min-height: 540px; overflow: hidden; border-radius: var(--radius-lg); background: var(--night); box-shadow: var(--shadow); }
.featured-visual { position: relative; display: flex; min-height: 540px; align-items: flex-end; overflow: hidden; padding: 46px; color: #fff; background: radial-gradient(circle at 70% 18%, rgba(66, 174, 241, .52), transparent 24%), radial-gradient(circle at 28% 70%, rgba(185, 28, 247, .65), transparent 37%), linear-gradient(140deg, #1c1433, #11131e 65%, #081725); isolation: isolate; }
.featured-visual::after { position: absolute; inset: 0; z-index: -1; content: ""; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.visual-kicker { position: absolute; top: 38px; left: 42px; color: rgba(255,255,255,.72); font-size: .75rem; font-weight:700; letter-spacing: .16em; }
.visual-caption { position: relative; z-index: 2; font-size: clamp(2.3rem, 4vw, 4rem); font-weight: 780; line-height: 1; letter-spacing: -.055em; }
.album-stack { position: absolute; top: 64px; right: 38px; width: 56%; aspect-ratio: 1; transform: rotate(8deg); }
.album { position: absolute; display: grid; width: 54%; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 22px; box-shadow: 0 25px 65px rgba(0,0,0,.28); }
.album i { width: 38%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.12); }
.album-one { top: 2%; right: 2%; background: linear-gradient(145deg, #b52bea, #5a35d8); }
.album-two { top: 27%; left: 3%; background: linear-gradient(145deg, #2fa8ed, #4051c8); }
.album-three { right: 0; bottom: 0; background: linear-gradient(145deg, #ef5db4, #9a25e8); }
.featured-content { display: flex; flex-direction: column; justify-content: center; padding: 58px; color: #fff; }
.featured-content h2 { margin: 22px 0 20px; font-size: clamp(2rem, 2.8vw, 3.2rem); }
.featured-content h2 a:hover { color: #B79DF3; }
.featured-content p { max-width: 520px; margin-bottom: 32px; color: #aaaab7; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 14px; color: #898995; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.article-meta > * + *::before { margin-right: 14px; color: #bbb8c2; content: "•"; }
.featured-content .article-meta span:first-child { color: #B79DF3; }
.read-link, .card-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 780; }
.read-link { color: #fff; }
.read-link span, .card-link span { transition: transform .2s; }
.read-link:hover span, .card-link:hover span { transform: translateX(4px); }

.latest-posts { padding: 120px 0; background: var(--soft); }
.posts-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 54px; }
.posts-head h2 { margin: 0; font-size: clamp(2.25rem, 3.4vw, 3.5rem); }
.category-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.category-nav a { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; color: #666673; background: #fff; font-size: .86rem; font-weight: 700; }
.category-nav a:hover, .category-nav a.active { border-color: var(--ink); color: #fff; background: var(--ink); }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.posts-empty { padding: 40px 0 10px; color: #79798a; font-size: 1rem; text-align: center; }
.post-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.post-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(25, 19, 38, .14); }
.post-cover { position: relative; display: block; min-height: 270px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.1); }
.cover-label { position: absolute; top: 20px; left: 20px; z-index: 2; padding: 7px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #fff; background: rgba(12,12,19,.25); backdrop-filter: blur(10px); font-size:.75rem; font-weight:700; letter-spacing: .05em; text-transform: uppercase; }
.post-body { display: flex; flex: 1; flex-direction: column; padding: 30px; }
.post-body h3 { margin: 20px 0 14px; font-size: 1.52rem; line-height: 1.18; }
.post-body h3 a:hover { color: var(--violet); }
.post-body p { margin-bottom: 25px; font-size:1.0625rem; line-height: 1.62; }
.card-link { margin-top: auto; color: var(--violet); font-size: .91rem; }
.cover-folders { background: linear-gradient(145deg, #190d25, #7c23bf); }
.folder-art { position: absolute; right: 12%; bottom: 0; width: 74%; height: 70%; transform: rotate(-4deg); }
.folder-art span { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 18px 18px 0 0; background: linear-gradient(140deg, rgba(239,173,255,.92), rgba(114,71,223,.9)); box-shadow: 0 -8px 35px rgba(0,0,0,.13); }
.folder-art span::before { position: absolute; top: -16px; left: 0; width: 38%; height: 20px; border-radius: 9px 9px 0 0; background: inherit; content: ""; }
.folder-art span:nth-child(2) { transform: translate(12%, 25%); filter: hue-rotate(24deg); }
.folder-art span:nth-child(3) { transform: translate(24%, 50%); filter: hue-rotate(50deg); }
.cover-remote { background: radial-gradient(circle at center, #244ba1, #0b122d 70%); }
.remote-art { position: absolute; inset: 0; display: grid; place-items: center; }
.remote-art i { position: absolute; width: 36%; aspect-ratio: 1; border: 1px solid rgba(125,202,255,.4); border-radius: 50%; }
.remote-art i:nth-child(2) { width: 55%; }
.remote-art i:nth-child(3) { width: 76%; }
.remote-art b { display: grid; z-index: 1; width: 74px; aspect-ratio: 1; place-items: center; border-radius: 24px; color: #fff; background: linear-gradient(145deg, #a724ef, #397eea); font-size: 1.8rem; box-shadow: 0 20px 40px rgba(0,0,0,.3); }
.cover-playlist { background: linear-gradient(135deg, #f767b5, #7b26e9 60%, #243dd5); }
.playlist-art { position: absolute; right: 7%; bottom: -4%; left: 7%; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; transform: rotate(-5deg); }
.playlist-art span { display: flex; min-height: 86px; align-items: flex-end; padding: 15px; border: 1px solid rgba(255,255,255,.28); border-radius: 16px; color: rgba(255,255,255,.8); background: rgba(255,255,255,.12); font-size: 1.5rem; font-weight:700; backdrop-filter: blur(8px); }
.cover-metadata { background: #efeafa; }
.metadata-art { position: absolute; inset: 66px 28px 28px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 9px; transform: rotate(2deg); }
.metadata-art strong { grid-row: span 3; display: grid; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #ad21ec, #5b57df); font-size: 3.2rem; }
.metadata-art span { display: flex; align-items: center; padding: 0 16px; border: 1px solid #d9d0e9; border-radius: 12px; color: #61586d; background: rgba(255,255,255,.72); font-size: .8rem; font-weight: 750; }
.cover-metadata .cover-label { color: #7C4DE9; background: rgba(255,255,255,.65); border-color: rgba(100,50,120,.15); }
.cover-sharing { background: linear-gradient(145deg, #071b26, #123a41); }
.sharing-art { position: absolute; inset: 0; display: grid; place-items: center; }
.sharing-art span { display: grid; width: 104px; aspect-ratio: 1; place-items: center; border-radius: 28px; color: #fff; background: linear-gradient(145deg, #31b2dd, #7847e4); font-size: 2.2rem; box-shadow: 0 25px 55px rgba(0,0,0,.28); }
.sharing-art i { position: absolute; top: 47%; left: 57%; width: 24%; height: 2px; background: rgba(255,255,255,.55); transform: rotate(-25deg); transform-origin: left; }
.sharing-art b { position: absolute; top: 24%; right: 17%; display: grid; width: 62px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; background: rgba(255,255,255,.1); font-size: 1.5rem; }
.cover-update { background: linear-gradient(145deg, #111119, #261039); }
.update-art { position: absolute; inset: 0; display: grid; place-items: center; }
.update-art span { display: grid; z-index: 1; width: 118px; aspect-ratio: 1; place-items: center; border-radius: 33px; color: #fff; background: linear-gradient(145deg, #bb22ef, #5375ea); font-size: 4.5rem; font-weight:700; box-shadow: 0 30px 80px rgba(144,23,221,.35); }
.update-art i { position: absolute; width: 210px; aspect-ratio: 1; border: 1px solid rgba(196,110,255,.24); border-radius: 40px; transform: rotate(18deg); }
.update-art i:last-child { transform: rotate(42deg); }
.archive-action { display: flex; justify-content: center; padding-top: 54px; }
.button-outline { min-height: 54px; border-color: #cbc8d1; color: var(--ink); background: transparent; font-size: .95rem; }
.button-outline:hover { border-color: var(--ink); background: #fff; }

.blog-cta { padding: 110px 0; }
.cta-panel { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 70px; overflow: hidden; padding: 70px; border-radius: var(--radius-lg); color: #fff; background: radial-gradient(circle at 84% 18%, rgba(71,171,237,.32), transparent 26%), linear-gradient(135deg, #101017, #1d1029); }
.cta-panel::after { position: absolute; top: -90px; right: -45px; width: 330px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; content: ""; }
.cta-panel h2 { max-width: 680px; margin-bottom: 18px; font-size: clamp(2.35rem, 3.7vw, 3.8rem); }
.cta-panel p:not(.eyebrow) { max-width: 600px; margin-bottom: 0; color: #aaaab7; }
.cta-actions { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cta-link { color: #ddd8e3; font-size: .9rem; font-weight: 700; }
.cta-link:hover { color: #fff; }

@media (max-width: 1000px) {
  .intro-grid { grid-template-columns: 1fr; gap: 30px; }
  .intro-copy { max-width: 700px; }
  .featured-card { grid-template-columns: 1fr; }
  .featured-visual { min-height: 500px; }
  .featured-content { padding: 48px; }
  .post-grid { grid-template-columns: 1fr 1fr; }
  .cta-panel { grid-template-columns: 1fr; align-items: start; }
  .cta-actions { align-items: flex-start; }
}

@media (max-width: 700px) {
  .blog-intro { padding: 58px 0 38px; }
  .blog-intro h1 { font-size: clamp(2.55rem, 11.5vw, 3.55rem); }
  .featured-wrap { padding-bottom: 84px; }
  .featured-card, .post-card, .cta-panel { border-radius: 22px; }
  .featured-visual { min-height: 400px; padding: 28px; }
  .visual-kicker { top: 26px; left: 28px; }
  .album-stack { top: 68px; right: 22px; width: 62%; }
  .featured-content { padding: 34px 28px 40px; }
  .featured-content h2 { font-size: 2.1rem; }
  .latest-posts { padding: 85px 0; }
  .posts-head { align-items: flex-start; flex-direction: column; margin-bottom: 38px; }
  .category-nav { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .category-nav a { flex: 0 0 auto; }
  .post-grid { grid-template-columns: 1fr; }
  .post-cover { min-height: 245px; }
  .cta-panel { gap: 36px; padding: 44px 28px; }
  .cta-panel h2 { font-size: 2.45rem; }
}