.blog-hero-note { max-width: 760px; color: var(--muted); font-size: 1.02rem; }
.blog-policy { margin-top: 1.25rem; display: inline-flex; gap: .55rem; align-items: center; padding: .55rem .85rem; border: 1px solid rgba(166,139,255,.24); border-radius: 999px; color: var(--violet-soft); background: rgba(166,139,255,.05); font-size: .78rem; font-weight: 760; letter-spacing: .04em; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.blog-card { display: flex; flex-direction: column; min-height: 100%; border: 1px solid rgba(242,234,223,.11); border-radius: 22px; overflow: hidden; background: linear-gradient(145deg, rgba(18,16,26,.92), rgba(7,6,11,.94)); box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.blog-card-visual { aspect-ratio: 16 / 9; position: relative; background: radial-gradient(circle at 72% 28%, rgba(166,139,255,.26), transparent 28%), radial-gradient(circle at 28% 72%, rgba(207,77,92,.14), transparent 34%), linear-gradient(145deg, #17121f, #09070d); }
.blog-card-visual::before { content: attr(data-mark); position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(2.6rem, 6vw, 5rem)/1 var(--serif); color: rgba(242,234,223,.16); letter-spacing: -.04em; }
.blog-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.35rem; }
.blog-card-meta { color: var(--violet-soft); text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; font-weight: 850; }
.blog-card h2 { margin: .55rem 0 .7rem; font: 700 1.65rem/1.05 var(--serif); letter-spacing: -.025em; }
.blog-card p { color: var(--muted); }
.blog-card .btn { margin-top: auto; align-self: flex-start; }
.blog-index-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: start; margin-bottom: 2.6rem; }
.blog-index-aside { padding: 1.25rem; border: 1px solid rgba(242,234,223,.1); border-radius: 18px; background: rgba(255,255,255,.02); color: var(--muted); }
.blog-index-aside strong { color: var(--paper); }
.article-shell { width: min(calc(100% - 2rem), 920px); margin-inline: auto; }
.article-header { padding: clamp(4.2rem, 8vw, 7rem) 0 2.4rem; }
.article-header h1 { margin: .7rem 0 1rem; max-width: 860px; font: 700 clamp(2.8rem, 7vw, 5.6rem)/.93 var(--serif); letter-spacing: -.05em; }
.article-deck { max-width: 760px; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.28rem); }
.article-meta { display: flex; flex-wrap: wrap; gap: .7rem 1rem; margin-top: 1.3rem; color: var(--faint); font-size: .82rem; }
.article-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.spoiler-safe { color: var(--violet-soft); }
.article-body { padding-bottom: clamp(5rem, 9vw, 8rem); }
.article-body p, .article-body li { color: #cbc3cf; font-size: 1.05rem; }
.article-body h2 { margin: 2.6rem 0 .9rem; font: 700 clamp(1.9rem, 4vw, 2.9rem)/1 var(--serif); letter-spacing: -.03em; color: var(--paper); }
.article-body h3 { margin: 2rem 0 .7rem; font: 700 1.35rem/1.1 var(--serif); color: var(--paper); }
.article-body blockquote { margin: 2.2rem 0; padding: 1.1rem 1.25rem; border-left: 2px solid var(--violet); background: rgba(166,139,255,.055); color: var(--paper); font: 400 1.25rem/1.55 var(--serif); }
.article-body code { padding: .12rem .35rem; border: 1px solid rgba(242,234,223,.1); border-radius: 6px; background: rgba(255,255,255,.035); color: var(--violet-soft); }
.article-end { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
.article-end p { margin: 0; font-size: .9rem; color: var(--faint); }
@media (max-width: 980px) { .blog-grid { grid-template-columns: 1fr; } .blog-index-intro { grid-template-columns: 1fr; } }