/* Blog section. Deliberately calmer than the animated arcade homepage --
   no canvas/shader hero, just the site's existing colour and type system
   (portal.css: --blue/--violet/--orange, #f8fbff on #02040a) applied to a
   readable article layout. */

.page-hero { padding: 150px 4% 50px; border-bottom: 1px solid #11326a; }
.page-hero-compact { padding-bottom: 40px; }
.page-hero-inner { max-width: 760px; }
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(34px, 4.2vw, 58px); letter-spacing: -.03em; margin: 0 0 16px; }
.hero-lead { font-size: 16px; line-height: 1.7; color: #aebdd6; margin: 0; max-width: 640px; }

.section-block { padding: 44px 4% 90px; }

.blog-shell { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: start; }
.blog-main-column { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.blog-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 100px; }

.sidebar-panel { border: 1px solid #1c3663; background: #030818; padding: 20px; }
.panel-kicker { color: var(--blue); font-size: 10px; text-transform: uppercase; letter-spacing: .17em; font-weight: 600; margin: 0 0 14px; }
.sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sidebar-list li a { font-size: 13px; line-height: 1.5; color: #d9e6ff; }
.sidebar-list li a:hover { color: var(--blue); }

.chip-cloud, .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-cloud.compact a, .chip-row.compact a {
	border: 1px solid #2a4576; padding: 4px 10px; font-size: 11px; text-transform: uppercase;
	letter-spacing: .08em; color: #b9c8e8;
}
.chip-cloud.compact a:hover, .chip-row.compact a:hover { border-color: var(--blue); color: var(--blue); }

.reveal-up { opacity: 1; }

.blog-summary-card, .post-detail-card, .archive-card {
	border: 1px solid #1c3663; background: #030818; padding: 26px 28px;
}
.blog-summary-card h2, .post-detail-card h1, .archive-card h2 { margin: 10px 0 12px; font-size: clamp(21px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.015em; }
.blog-summary-card h2 a, .archive-card h2 a { color: #f8fbff; }
.blog-summary-card h2 a:hover, .archive-card h2 a:hover { color: var(--blue); }
.blog-summary-card p, .archive-card p { color: #aebdd6; font-size: 15px; line-height: 1.7; margin: 0 0 14px; }

.post-meta-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.post-date { font: 11px/1.7 monospace; text-transform: uppercase; letter-spacing: .1em; color: #7d92b8; margin: 0; }

.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.text-link:hover { color: #fff; }

.post-cover-image { margin: 6px 0 24px; }
.post-cover-image img { width: 100%; height: auto; display: block; border: 1px solid #1c3663; }
.post-cover-image figcaption { margin-top: 8px; font-size: 11px; color: #7d92b8; letter-spacing: .04em; }

.post-body { font-size: 16px; line-height: 1.75; color: #d5e0f4; }
.post-body h2 { font-size: clamp(20px, 2vw, 26px); margin: 40px 0 16px; letter-spacing: -.01em; }
.post-body h3 { font-size: 18px; margin: 32px 0 14px; }
.post-body p { margin: 0 0 18px; }
.post-body a { color: var(--blue); text-decoration: underline; text-decoration-color: #00beff55; }
.post-body a:hover { text-decoration-color: var(--blue); }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 22px; }
.post-body li { margin-bottom: 8px; }
.post-body code { font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace; font-size: .9em; background: #0c1a35; padding: 2px 6px; }
.post-body pre { background: #030818; border: 1px solid #1c3663; padding: 16px 18px; overflow-x: auto; margin: 0 0 20px; }
.post-body pre code { background: none; padding: 0; }
.post-body blockquote { margin: 0 0 18px; padding: 4px 0 4px 18px; border-left: 2px solid var(--violet); color: #b9c8e8; }
.post-body .table-scroll { overflow-x: auto; margin: 0 0 20px; }
.post-body table { border-collapse: collapse; width: 100%; font-size: 14px; }
.post-body th, .post-body td { border: 1px solid #1c3663; padding: 8px 12px; text-align: left; }
.post-body th { color: var(--blue); }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.tag-row a { border: 1px solid #2a4576; padding: 4px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #b9c8e8; }
.tag-row a:hover { border-color: var(--blue); color: var(--blue); }

.related-posts { margin-top: 34px; padding-top: 24px; border-top: 1px solid #1c3663; }

.archive-list { display: flex; flex-direction: column; gap: 20px; }
.pagination { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; font-size: 13px; }
.pagination a, .pagination span { border: 1px solid #1c3663; padding: 8px 14px; color: #d9e6ff; }
.pagination a:hover { border-color: var(--blue); color: var(--blue); }
.pagination .is-current { border-color: var(--blue); color: var(--blue); }

@media (max-width: 900px) {
	.blog-shell { grid-template-columns: 1fr; }
	.blog-sidebar { position: static; }
}

@media (max-width: 760px) {
	.page-hero { padding: 120px 6% 34px; }
	.section-block { padding: 30px 6% 60px; }
	.blog-summary-card, .post-detail-card, .archive-card { padding: 20px; }
}