/* ───────────────────────────────────────────────────────────────────────────
   Christine 2026 — shared hero + template layouts
   One hero system for every template (template-parts/hero.php).
   ─────────────────────────────────────────────────────────────────────────── */

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(400px, 58vh, 640px);
	background: #0f1112;
	color: #fff;
}
.hero--home { min-height: max(640px, calc(100svh - 76px)); }
.hero--utility { min-height: clamp(320px, 42vh, 460px); }
.hero--with-figure { padding-bottom: clamp(70px, 10vw, 150px); }

/* Backdrop layers: grid → glow → ghost outline → lime shape */
.hero__backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(ellipse 80% 75% at 70% 25%, #000 15%, transparent 72%);
	mask-image: radial-gradient(ellipse 80% 75% at 70% 25%, #000 15%, transparent 72%);
}
.hero__glow {
	position: absolute;
	width: min(1100px, 130vw);
	aspect-ratio: 1;
	left: var(--glow-x, 74%);
	top: var(--glow-y, 16%);
	translate: -50% -50%;
	/* soft by gradient alone — no filter, so nothing re-rasterizes under the header glass */
	background: radial-gradient(circle, rgba(215, 255, 63, 0.18) 0%, rgba(215, 255, 63, 0.08) 22%, rgba(215, 255, 63, 0.03) 42%, transparent 66%);
}
.hero__shape { position: absolute; aspect-ratio: 1; }
.hero__shape--main {
	width: clamp(280px, 38vw, 560px);
	right: clamp(-170px, -7vw, -70px);
	top: clamp(-210px, -13vw, -90px);
	border: clamp(56px, 7.5vw, 112px) solid #d7ff3f;
	rotate: 18deg;
	opacity: 0.95;
}
.hero__shape--ghost {
	width: clamp(400px, 54vw, 820px);
	right: clamp(-280px, -11vw, -130px);
	top: clamp(-280px, -17vw, -130px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	rotate: 30deg;
}
.hero--page .hero__shape--main,
.hero--post .hero__shape--main {
	width: clamp(200px, 24vw, 340px);
	border-width: clamp(40px, 4.4vw, 64px);
	right: clamp(-110px, -4vw, -50px);
	top: clamp(-150px, -9vw, -70px);
}
.hero--page .hero__shape--ghost,
.hero--post .hero__shape--ghost {
	width: clamp(300px, 34vw, 520px);
	right: clamp(-180px, -7vw, -90px);
	top: clamp(-200px, -12vw, -100px);
}
.hero--utility .hero__shape--main { display: none; }

/* Content */
.hero__inner { position: relative; padding-block: clamp(96px, 14vh, 150px) clamp(56px, 9vh, 96px); }
.hero--with-figure .hero__inner { padding-bottom: 0; }

.hero__eyebrow {
	display: inline-flex; align-items: center; gap: 12px;
	margin: 0 0 24px;
	font-size: 0.76rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
	color: #d7ff3f; text-decoration: none;
}
.hero__eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.hero__eyebrow--link:hover { color: #fff; }

.hero__title {
	margin: 0;
	max-width: 1100px;
	font-size: clamp(2.8rem, 6.4vw, 6.2rem);
	line-height: 0.95;
	letter-spacing: -0.05em;
	font-weight: 800;
	text-wrap: balance;
	/* light catching the type — the sheen sweeps across once on load (motion.css) */
	background: linear-gradient(100deg, #fff 0%, #fff 40%, #effcbf 50%, #fff 60%, #c9ccce 100%);
	background-size: 250% 100%;
	background-position: 0% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-bottom: 0.06em; /* keep descenders inside the clip */
}
.hero--home .hero__title { font-size: clamp(3.5rem, 9.2vw, 8.8rem); line-height: 0.88; letter-spacing: -0.055em; max-width: 1000px; }
.hero--utility .hero__title { font-size: clamp(2.4rem, 5vw, 4.6rem); }

.hero__lede {
	max-width: 800px;
	margin: 30px 0 0;
	font-size: clamp(1.3rem, 2.3vw, 2rem);
	line-height: 1.28;
	letter-spacing: -0.015em;
	color: #f2f3f3;
	text-wrap: pretty;
}
.hero__copy { max-width: 700px; margin: 16px 0 0; font-size: 1.05rem; line-height: 1.65; color: #aeb2b5; }

.hero__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
	margin: 28px 0 0;
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	color: #aeb2b5;
}
.hero__meta > span + span::before {
	content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 16px;
	background: #d7ff3f; vertical-align: middle;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }

.hero__tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 46px 0 0; padding: 0; list-style: none; }
.hero__tags li {
	padding: 9px 15px;
	font-size: 0.82rem; font-weight: 650; color: #e6e8e9;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-top-color: rgba(255, 255, 255, 0.24); /* light catching the top edge */
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
}

/* Search form inside a dark hero */
.hero__extra { margin-top: 32px; max-width: 560px; }
.hero .search-form { display: flex; gap: 8px; }
.hero .search-form label { flex: 1; margin: 0; }
.hero .search-form .search-field {
	width: 100%; padding: 14px 16px;
	color: #fff; background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0;
	font: inherit;
}
.hero .search-form .search-field::placeholder { color: #8f9498; }
.hero .search-form .search-field:focus { outline: 2px solid #d7ff3f; outline-offset: 2px; }
.hero .search-form .search-submit {
	padding: 14px 20px; border: 0; border-radius: 0;
	background: #d7ff3f; color: #111315; font-weight: 750; cursor: pointer;
}

/* Scroll cue (home only) */
.hero__scroll {
	position: absolute; left: 50%; bottom: 22px; translate: -50% 0;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
	color: #8f9498; text-decoration: none;
}
.hero__scroll::after { content: ""; width: 1px; height: 38px; background: linear-gradient(#d7ff3f, transparent); }
.hero__scroll:hover { color: #fff; }

/* Featured image overlapping the bottom of a post/page hero */
.hero-figure {
	position: relative; z-index: 2;
	width: min(1100px, calc(100% - 48px));
	margin: calc(-1 * clamp(50px, 8vw, 120px)) auto 0;
}
.hero-figure img {
	display: block; width: 100%; height: auto;
	box-shadow: 0 40px 80px -30px rgba(17, 19, 21, 0.45);
}

/* Single post body */
.post-article { width: min(760px, calc(100% - 48px)); margin-inline: auto; padding-block: clamp(48px, 7vw, 88px) 40px; }
.post-content { font-size: 1.1rem; line-height: 1.75; }
.post-content > :first-child { margin-top: 0; }
.post-content h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.08; letter-spacing: -0.03em; margin-top: 2em; }
.post-content h3 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; margin-top: 1.8em; }
.post-content img { max-width: 100%; height: auto; }
.post-content a { color: #111315; text-decoration-color: #9fbd20; text-decoration-thickness: 2px; }

.post-nav {
	width: min(1100px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 90px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
	border-top: 1px solid #cfd0ca;
}
.post-nav a { display: block; padding: 26px; background: #eeeeea; color: #111315; text-decoration: none; }
.post-nav a span { display: block; margin-bottom: 8px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #686d72; }
.post-nav a strong { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.post-nav .post-nav__next { text-align: right; grid-column: 2; }
.post-comments { width: min(760px, calc(100% - 48px)); margin: 0 auto; padding-bottom: 90px; }

/* Lists: archives / search / posts index */
.listing { padding-block: 70px 90px; }
.listing-empty { font-size: 1.15rem; color: #555b60; }
.posts-pagination, .listing .navigation { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 34px; }
.posts-pagination .page-numbers, .listing .navigation .page-numbers {
	display: inline-block; min-width: 44px; padding: 10px 14px; text-align: center;
	background: #eeeeea; color: #111315; font-weight: 700; text-decoration: none;
}
.posts-pagination .page-numbers.current, .listing .navigation .page-numbers.current { background: #111315; color: #fff; }

/* ── Career timeline (Professional Experience) ───────────────────────────── */
.page-layout-professional-experience .page-content .page-intro { max-width: 1100px; }
.page-layout-professional-experience .page-content > h2,
.page-layout-professional-experience .page-content > p:not(.page-intro) { max-width: 1100px; }

.page-content .career-highlight.has-logo {
	display: grid;
	grid-template-columns: clamp(200px, 22vw, 300px) minmax(0, 1fr);
	column-gap: clamp(28px, 4.5vw, 72px);
	align-items: start;
	padding: clamp(40px, 5vw, 68px) 0;
	border-top: 1px solid #cfd0ca;
}
.career-highlight.has-logo > .wp-block-group__inner-container { grid-column: 2; min-width: 0; }
.page-content .career-highlight.has-logo .eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	margin: 0 0 16px; padding: 0;
	color: #5b6168;
}
.page-content .career-highlight.has-logo .eyebrow::before { content: ""; width: 22px; height: 3px; background: #d7ff3f; }
.page-content .career-highlight.has-logo h2.career-role {
	max-width: none;
	margin: 0 0 22px; padding: 0;
	font-size: clamp(1.7rem, 2.8vw, 2.6rem);
	line-height: 1.06;
	letter-spacing: -0.035em;
}
.career-company {
	display: block; margin-top: 8px;
	font-size: 0.6em; font-weight: 600; letter-spacing: -0.015em;
	color: #686d72;
}
.page-content .career-highlight.has-logo p:not(.eyebrow) { max-width: 68rem; font-size: 1.08rem; }

.career-logo {
	position: sticky; top: 110px;
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 16% 14%;
	background: #151719;
	border-top: 4px solid #d7ff3f;
	overflow: hidden;
	text-decoration: none;
}
.career-logo img {
	display: block; width: 100%; height: 100%;
	object-fit: contain;
	filter: brightness(0) invert(1); /* every logo reads as one white family on the dark tile */
}
.career-logo--wordmark span {
	color: #fff; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
	font-size: clamp(1.25rem, 2vw, 1.9rem); text-align: center;
}

/* Earlier career — compact expandable rows (no logos: most of these companies are gone) */
.page-content .career-earlier { margin: 34px 0 70px; border-top: 1px solid #cfd0ca; max-width: none; }
.career-early { border-bottom: 1px solid #cfd0ca; margin: 0; }
.career-early > summary {
	display: grid;
	grid-template-columns: clamp(110px, 12vw, 160px) minmax(0, 1fr) minmax(0, auto) 28px;
	align-items: baseline;
	column-gap: clamp(16px, 3vw, 40px);
	padding: 22px 6px;
	cursor: pointer;
	list-style: none;
}
.career-early > summary::-webkit-details-marker { display: none; }
.ce-years { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; color: #686d72; font-variant-numeric: tabular-nums; }
.ce-role { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 750; letter-spacing: -0.025em; line-height: 1.2; color: #111315; }
.ce-company { font-size: 1rem; font-weight: 600; color: #5b6168; text-align: right; }
.career-early > summary::after {
	content: ""; justify-self: end; align-self: center;
	width: 12px; height: 12px;
	background:
		linear-gradient(#111315, #111315) center / 12px 2px no-repeat,
		linear-gradient(#111315, #111315) center / 2px 12px no-repeat;
	transition: rotate var(--dur-ui, 470ms) var(--ease-out, ease);
}
.career-early[open] > summary::after { rotate: 135deg; }
.career-early > summary:focus-visible { outline: 2px solid #9fbd20; outline-offset: 2px; }
.career-early[open] > summary .ce-role { color: #111315; }
.page-content .career-early h4 {
	margin: 4px 0 8px;
	padding-left: calc(clamp(110px, 12vw, 160px) + clamp(16px, 3vw, 40px) + 6px);
	font-size: 0.74rem; letter-spacing: 0.14em; color: #686d72;
}
.page-content .career-early ul {
	margin: 0 0 22px;
	padding-left: calc(clamp(110px, 12vw, 160px) + clamp(16px, 3vw, 40px) + 26px);
	max-width: none;
	columns: 2 340px; column-gap: 48px;
}
.page-content .career-early li { margin: 0 0 10px; break-inside: avoid; color: #3f4449; line-height: 1.55; }
.page-content .career-early li::marker { color: #9fbd20; }
@media (hover: hover) and (pointer: fine) {
	.career-early > summary { transition: background-color var(--dur-ui, 470ms) var(--ease-out, ease); }
	.career-early > summary:hover { background: #eeeeea; }
}

@media (max-width: 760px) {
	.career-early > summary { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 4px; }
	.ce-years, .ce-role, .ce-company { grid-column: 1; text-align: left; }
	.career-early > summary::after { grid-column: 2; grid-row: 1 / span 3; }
	.page-content .career-early h4 { padding-left: 6px; }
	.page-content .career-early ul { padding-left: 26px; columns: 1; }
}

@media (max-width: 760px) {
	.page-content .career-highlight.has-logo { grid-template-columns: 1fr; }
	.career-highlight.has-logo > .wp-block-group__inner-container { grid-column: auto; }
	.career-logo { position: static; width: min(220px, 60%); aspect-ratio: 16 / 9; padding: 7% 9%; margin-bottom: 24px; }
}

@media (max-width: 900px) {
	.hero__shape--main { opacity: 0.35; }
}
@media (max-width: 640px) {
	.hero--home { min-height: max(560px, calc(100svh - 70px)); }
	.hero--home .hero__title { font-size: 3.4rem; }
	.hero__scroll { display: none; }
	.hero-figure, .post-article, .post-nav, .post-comments { width: calc(100% - 30px); }
	.post-nav { grid-template-columns: 1fr; }
	.post-nav .post-nav__next { grid-column: auto; }
}
@media (prefers-contrast: more) {
	.hero__title { background: none; color: #fff; }
}