/* =====================================================================
   KINETIC — about, contact, blog, post, 404
   ===================================================================== */

/* ---------- About ---------- */
.about-body { padding: clamp(2rem, 5vw, 3.5rem) var(--gut); }
.about-body .container { padding-inline: 0; } /* same box as .page-hero, so the portrait's left edge lines up with the title */
/* Bio: portrait in the left gutter, copy beside it; the portrait stays put while the copy scrolls. */
.about-body__grid { display: grid; grid-template-columns: clamp(200px, 22vw, 300px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.about-body__photo { position: sticky; top: 96px; }
.about-body__grid .entry-content > * { margin-inline: 0; }
@media (max-width: 700px) { .about-body__grid { grid-template-columns: 1fr; } .about-body__photo { position: static; width: min(100%, 220px); } }
.about-block { border-top: 1px solid var(--border); }
.about-block__grid {
	display: grid;
	grid-template-columns: minmax(160px, 240px) 1fr;
	gap: clamp(1rem, 4vw, 3rem);
	align-items: start;
}
.about-block__label { font-size: var(--fs-h3); color: var(--text-muted); }
@media (max-width: 700px) { .about-block__grid { grid-template-columns: 1fr; } }
.about-cta .container { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; padding-block: clamp(3rem, 7vw, 5rem); }

/* ---------- Contact ---------- */
.contact-hero { padding-block: calc(var(--header-h) + clamp(4rem, 12vh, 9rem)) clamp(2rem, 5vw, 4rem); }
.contact-hero__title { font-size: var(--fs-display); max-width: 18ch; }
.contact-hero__email {
	display: inline-block;
	margin-top: 2rem;
	font-size: clamp(1.4rem, 1rem + 2.4vw, 2.6rem);
	font-weight: 600;
	color: var(--accent-2);
	text-underline-offset: 6px;
	transition: text-decoration-color 0.25s var(--ease), color 0.25s var(--ease);
	text-decoration: underline;
	text-decoration-color: transparent;
}
.contact-hero__email:hover { text-decoration-color: var(--accent-2); }
.contact-hero__social { margin-top: 2rem; }
.contact-hero__social .social__list { gap: 1.5rem; }

/* ---------- Blog ---------- */
.entry-cats { color: var(--text-faint); display: inline-flex; gap: 0.5rem; align-items: center; margin-left: 0.5rem; }
.entry-date { color: var(--text-faint); }

.post-single__hero { padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 4rem)); }
.post-single__title { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); margin-top: 0.75rem; }
.post-single__meta { display: flex; gap: 0.5rem; align-items: center; color: var(--text-faint); font-size: 0.9rem; }
.post-single__cover { margin-block: clamp(2rem, 5vw, 3.5rem); }
.post-single__img { width: 100%; border-radius: var(--radius-xl); aspect-ratio: 16 / 9; object-fit: cover; }

.post-nav { border-top: 1px solid var(--border); margin-top: 2rem; }
.post-nav__inner a { color: var(--text-muted); }
.post-nav__inner a:hover { color: var(--text); }
.post-nav__next { text-align: right; margin-left: auto; }

/* ---------- Comments ---------- */
.comments { padding-block: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--border); margin-top: 2rem; }
.comments__title { font-size: var(--fs-h3); margin-bottom: 1.5rem; }
.comments__list { display: grid; gap: 1.5rem; }
.comments__list .comment-body { padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.comment-form { margin-top: 2rem; display: grid; gap: 1rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: 0.75em 1em; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}

/* ---------- 404 ---------- */
.error-404 { text-align: center; padding-block: calc(var(--header-h) + clamp(5rem, 14vh, 10rem)) clamp(5rem, 14vh, 10rem); }
.error-404__code { font-size: var(--fs-display); font-weight: 700; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-404__title { font-size: var(--fs-h1); margin-top: 0.5rem; }
.error-404__text { color: var(--text-muted); max-width: 46ch; margin: 1.25rem auto 2rem; }
.error-404__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.error-404__search { max-width: 420px; margin: 2.5rem auto 0; }