.blog-page { background: #000; }
.blog-shell, .post-shell { width: min(1180px, calc(100% - 42px)); margin: 0 auto; padding: 180px 0 100px; }
.blog-hero { max-width: 860px; margin-bottom: 70px; }.blog-hero h1, .post-head h1 { margin: 12px 0 22px; font-family: var(--display); font-size: clamp(4rem, 9vw, 8rem); line-height:1.05; font-weight:900; letter-spacing: .01em; }.blog-hero h1 span { color: #f72a94; }.blog-hero > p:last-child { max-width: 680px; color: #aab0b5; font-size: 1.08rem; line-height: 1.7; }
.section-kicker { color: #39d9df; font-weight: 800; letter-spacing: .18em; font-size: .72rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }.blog-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: #000; }.blog-card a { height: 100%; display: flex; flex-direction: column; color: inherit; text-decoration: none; }.blog-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: saturate(.92) contrast(1.05); }.blog-card-copy { display: flex; flex: 1; flex-direction: column; padding: 24px; }.blog-card-copy span { color: #39d9df; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }.blog-card-copy h2 { margin: 12px 0 10px; font-size: 1.5rem; line-height: 1.08; }.blog-card-copy p { flex: 1; margin: 0 0 26px; color: #9ba2a7; line-height: 1.55; }.blog-card-copy strong { color: #f72a94; font-size: .75rem; letter-spacing: .08em; }.blog-card:hover { border-color: rgba(247,42,148,.6); transition: border-color .2s ease, background .2s ease, opacity .2s ease; }
.blog-status { grid-column: 1/-1; padding: 70px 20px; color: #979da2; text-align: center; border: 1px solid rgba(255,255,255,.1); }.blog-more { display: block; margin: 40px auto 0; }
.post-shell { max-width: 960px; }.post-back { display: inline-block; margin-bottom: 42px; color: #39d9df; font-weight: 800; text-decoration: none; letter-spacing: .08em; }.post-head h1 { max-width: 920px; font-size: clamp(4rem, 8vw, 7rem); }.post-excerpt { max-width: 760px; color: #aab0b5; font-size: 1.25rem; line-height: 1.65; }.post-cover { width: 100%; max-height: 610px; margin: 50px 0; object-fit: cover; border: 1px solid rgba(255,255,255,.12); }.post-body { max-width: 760px; margin: 0 auto; color: #d0d3d5; font-size: 1.1rem; line-height: 1.85; }.post-body p { margin: 0 0 1.5em; }.post-tags { max-width: 760px; display: flex; flex-wrap: wrap; gap: 9px; margin: 50px auto 0; }.post-tags span { padding: 8px 11px; color: #39d9df; border: 1px solid rgba(57,217,223,.28); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-shell, .post-shell { width: min(100% - 26px, 1180px); padding-top: 135px; }.blog-grid { grid-template-columns: 1fr; }.blog-hero { margin-bottom: 45px; }.blog-card-copy { padding: 19px; } }