/* Collection entries (blog / work / projects) + long-form post content.
   Neo-brutalist: chunky bordered cards with hard shadows. */

/* ---- Long-form content ---- */

div.text.post {
	padding: 4px 2px;
	line-height: 1.65;
}

div.text.post h2 {
	font-family: "Archivo Black", sans-serif;
	margin: 28px 0 10px 0;
}

div.text.post h3 {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	margin: 22px 0 8px 0;
}

/* Manual horizontal rule (---) styled to match; when it directly follows any
   heading it's pulled up tight so there isn't a big gap between them. */
div.text.post hr {
	border: 0;
	border-top: 3px solid var(--ink);
	margin: 22px 0;
}

div.text.post h1 + hr,
div.text.post h2 + hr,
div.text.post h3 + hr {
	margin-top: -6px;
}

div.text.post p {
	margin: 10px 0;
}

div.text.post ul,
div.text.post ol {
	margin: 10px 0;
	padding-left: 22px;
}

div.text.post li {
	margin: 6px 0;
}

div.text.post img {
	max-width: 100%;
	height: auto;
	border: var(--border);
	border-radius: var(--border-radius);
}

div.text.post pre {
	background: var(--ink);
	color: #f5f1e6;
	padding: 14px;
	border-radius: var(--border-radius);
	overflow-x: auto;
}

div.text.post code {
	background: var(--accent3);
	color: var(--ink);
	padding: 1px 5px;
	border-radius: 3px;
	font-weight: 500;
}

div.text.post pre code {
	background: transparent;
	color: #f5f1e6;
	padding: 0;
}

div.text.post blockquote {
	margin: 12px 0;
	padding: 6px 14px;
	border-left: 5px solid var(--accent);
	background: rgba(255, 92, 56, 0.08);
	color: var(--muted);
}

p.post-meta {
	color: var(--muted);
	font-size: 0.85em;
	font-weight: 500;
	margin-top: 0;
}

/* ---- Tags ---- */

.post-tags {
	margin: 18px 0;
}

.tag {
	display: inline-block;
	padding: 2px 9px;
	margin-right: 6px;
	border: 2px solid var(--ink);
	border-radius: var(--border-radius);
	background: var(--accent3);
	color: var(--ink);
	font-size: 0.78em;
	font-weight: 700;
}

/* ---- Comments (giscus) ---- */
div.comments {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 3px solid var(--ink);
}

/* ---- Static content box (e.g. the about page) ---- */
/* Matches the card look so its text aligns with the entry cards on other pages. */
div.panel {
	margin: 14px 0;
	padding: 8px 16px 14px;
	background-color: var(--card);
	border: var(--border);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
}

div.panel > .text.post {
	padding: 0;
}

/* ---- Collapsible entries ---- */

details.post-entry {
	margin: 14px 0;
	background: var(--card);
	border: var(--border);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
}

details.post-entry > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	cursor: pointer;
	list-style: none;
}

details.post-entry > summary::-webkit-details-marker {
	display: none;
}

details.post-entry > summary::after {
	content: "+";
	font-family: "Archivo Black", sans-serif;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--ink);
}

details.post-entry[open] > summary::after {
	content: "\2013"; /* en dash */
}

details.post-entry[open] > summary {
	background: var(--accent3);
	border-bottom: var(--border);
}

.post-entry-title {
	flex: 1 1 auto;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
}

.post-entry-date {
	color: var(--muted);
	font-size: 0.82em;
	font-weight: 500;
}

details.post-entry > .text.post {
	padding: 12px 16px 8px 16px;
}

/* ---- On-demand embedded apps (playtracer / hasty) ---- */

.app-embed {
	margin: 14px 0;
	width: 100%;
	max-width: 100%;
	background-color: #000;
	border: var(--border);
	border-radius: var(--border-radius);
	overflow: hidden;
}

.app-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}