/* Blog-specific styles, layered on top of main-new.css. */

/* Compact hero: override Pixelarity's 6em main padding for the accent3 strip
   above each blog page. Specificity matches `.wrapper > .inner > .main`. */
.wrapper > .inner > .main.blog-hero {
	padding: 2.25em 4em 2em 4em;
}
.wrapper > .inner > .main.blog-hero > header.major {
	margin: 0;
}
.wrapper > .inner > .main.blog-hero h2 {
	margin: 0 0 0.25em 0;
	font-size: 1.5em;
}
.wrapper > .inner > .main.blog-hero p {
	margin: 0;
	font-size: 0.95em;
	opacity: 0.85;
}
@media screen and (max-width: 1680px) {
	.wrapper > .inner > .main.blog-hero {
		padding: 1.75em 3em 1.5em 3em;
	}
}
@media screen and (max-width: 736px) {
	.wrapper > .inner > .main.blog-hero {
		padding: 1.25em 1.5em;
	}
}

/* Tighter post-content section: still has padding for readability,
   but trim the extra below the hero. */
.wrapper > .inner > .main.blog-content {
	padding: 3em 6em 3em 6em;
}
@media screen and (max-width: 1680px) {
	.wrapper > .inner > .main.blog-content {
		padding: 2.5em 5em;
	}
}
@media screen and (max-width: 736px) {
	.wrapper > .inner > .main.blog-content {
		padding: 1.5em 2em;
	}
}



.lang-switch .current-lang {
	font-weight: bold;
	opacity: 0.55;
}
.lang-switch .lang-divider {
	margin: 0 0.35em;
	opacity: 0.45;
}
.lang-switch a {
	border-bottom: none;
}


.blog-meta {
	color: #888;
	font-size: 0.9em;
	margin-top: 0;
	margin-bottom: 1em;
}

.blog-post { margin-top: 1em; }
.blog-post img { max-width: 100%; height: auto; }
.blog-post h1, .blog-post h2, .blog-post h3, .blog-post h4 {
	margin-top: 1.6em;
}
.blog-post h1:first-child, .blog-post h2:first-child {
	margin-top: 0;
}
.blog-post blockquote {
	border-left: 4px solid #ccc;
	padding: 0.2em 1em;
	color: #666;
	margin: 1em 0 1em 0;
	font-style: italic;
}
.blog-post pre {
	overflow-x: auto;
	padding: 1em 1.2em;
	background: #272822;
	color: #f8f8f2;
	border-radius: 4px;
	font-size: 0.9em;
	line-height: 1.5;
}
.blog-post code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.blog-post p code, .blog-post li code, .blog-post td code {
	background: rgba(0, 0, 0, 0.05);
	padding: 0.1em 0.4em;
	border-radius: 3px;
	font-size: 0.92em;
}
.blog-post table {
	border-collapse: collapse;
	margin: 1em 0;
}
.blog-post table th, .blog-post table td {
	border: 1px solid #ddd;
	padding: 0.4em 0.8em;
}

.blog-back { margin-top: 3em; }
.blog-feed-link {
	margin-top: 3em;
	font-size: 0.9em;
	color: #888;
}
.blog-feed-link a { color: #888; }

/* Pygments (codehilite), Monokai-ish palette on dark <pre>. */
.highlight .hll { background-color: #49483e }
.highlight .c, .highlight .ch, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs { color: #75715e }
.highlight .err { color: #960050; background-color: #1e0010 }
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kp, .highlight .kr, .highlight .kt { color: #66d9ef }
.highlight .kn, .highlight .o, .highlight .ow, .highlight .nt { color: #f92672 }
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .il, .highlight .se { color: #ae81ff }
.highlight .n, .highlight .nb, .highlight .ni, .highlight .nl, .highlight .nn, .highlight .py, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .p, .highlight .w { color: #f8f8f2 }
.highlight .na, .highlight .nc, .highlight .nd, .highlight .ne, .highlight .nf, .highlight .nx, .highlight .no, .highlight .bp { color: #a6e22e }
.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .s1, .highlight .ss { color: #e6db74 }
.highlight .ge { font-style: italic }
.highlight .gs { font-weight: bold }