/*
	Custom theme layer (v3) — a middle point between the stock dark
	Solid State theme and the cosmic/vivid-blue reference (CretaThemes
	"Quantum Computing"): light-ish, cooler-toned content sections,
	a richer dark hero/footer, pill-shaped stat bar, two-tone titles,
	and a gradient highlight card. Loaded after main.css.

	Fonts: intentionally NOT loading Source Sans Pro / Raleway from a
	CDN (the original template referenced them but never actually
	loaded them, so it was silently falling back already). Using a
	system font stack instead — renders identically with zero network
	dependency, on this build machine, the homelab server, and every
	visitor's browser.
*/

:root {
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--bg: #e9edf7;
	--bg-alt: #dbe3f4;
	--card: #ffffff;
	--fg: #161a2c;
	--fg-light: rgba(22, 26, 44, 0.62);
	--border: rgba(22, 26, 44, 0.14);

	--accent: #2454d6;
	--accent-2: #7c3aed;
	--accent-dark: #131a4a;
	--accent-tint: rgba(36, 84, 214, 0.1);

	--hero-1: #15204c;
	--hero-2: #2454d6;
	--hero-3: #7c3aed;
}

/* Base */
html, body {
	background-color: var(--bg);
	background-image: none;
	color: var(--fg);
}

body, input, select, textarea {
	color: var(--fg);
	font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--fg);
	font-family: var(--font-heading);
}

/* main.css sets strong/b to #ffffff for the original all-dark theme, which
   is illegible on the light content sections. Inherit instead, so emphasis
   works on both the light sections and the dark hero/footer. */
strong, b {
	color: inherit;
}

a {
	color: var(--accent);
	border-bottom-color: rgba(36, 84, 214, 0.35);
}

a:hover {
	color: var(--accent-2) !important;
}

h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
	border-bottom-color: var(--border);
}

hr.major {
	border-bottom-color: var(--border);
}

/* Small caps / uppercase — limit to page titles and main titles only.
   (h1 = site name, h2.major = page/section titles keep their case from
   main.css; everything below is knocked back to normal case.) */
h3, h4, h5, h6 {
	text-transform: none;
}

#header nav > a,
#menu .links li a,
.button,
a.special:not(.button),
#banner p,
#wrapper > header p {
	text-transform: none;
}

/* Two-tone titles */
.accent-word {
	color: var(--accent);
}

.accent-word--on-dark {
	color: #9fb8ff;
}

/* Header */
#header {
	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 0 var(--border);
}

#header h1 a {
	color: var(--fg);
}

#header nav > a {
	color: var(--fg);
}

#header.alt {
	background-color: transparent;
	box-shadow: none;
}

#header.alt nav > a {
	color: #ffffff;
}

/* Off-canvas menu */
#menu {
	background: rgba(21, 32, 76, 0.98);
}

#menu .inner h2 {
	color: rgba(255, 255, 255, 0.45);
}

#menu .links a {
	color: #ffffff;
	border-bottom: none;
}

#menu .links a:hover {
	color: #9fb8ff !important;
}

#menu .close {
	color: #ffffff;
}

/* Banner (hero) — layered radial "nebula" glows over the mountain
   photo. (No circuit/node overlay — the globe alone carries the "tech"
   motif so the mountains stay clean and legible.) */
#banner {
	position: relative;
	background-color: var(--hero-1);
	background-image:
		radial-gradient(circle at 18% 22%, rgba(124, 58, 237, 0.14), transparent 32%),
		radial-gradient(circle at 82% 18%, rgba(36, 84, 214, 0.5), transparent 45%),
		radial-gradient(circle at 60% 85%, rgba(94, 158, 255, 0.32), transparent 50%),
		linear-gradient(160deg, rgba(21, 32, 76, 0.62) 0%, rgba(18, 26, 66, 0.72) 55%, rgba(12, 16, 44, 0.82) 100%),
		url("../../images/lagoon.jpg");
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	background-size: auto, auto, auto, auto, cover;
	background-position: 0 0, 0 0, 0 0, 0 0, center 62%;

	/* Same trick as the inner-page headers: the hero is clipped on the
	   diagonal and its 6em tail is pulled back with a negative margin, so
	   the photo continues right through the slant instead of the seam
	   being a flat block of navy. */
	padding: 2em 0 8.25em 0 !important;
	margin-bottom: -6em;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6em), 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6em), 0 100%);
}

/* Diagonal cut at the bottom of the hero, matching the site's
   section-divider mechanism: this triangle fills the complementary
   half of the first content wrapper's own top triangle, so together
   they form one clean, continuous diagonal seam instead of a flat edge.
   Sized to match the (bolder) section-divider band height below. */
#banner:after {
	display: none;
}

@media screen and (max-width: 736px) {
	#banner {
		padding: 3em 0 6.5em 0 !important;
		margin-bottom: -3em;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3em), 0 100%);
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3em), 0 100%);
	}
}

.logo .avatar--hero {
	width: 4.5em;
	height: 4.5em;
	margin: 0;
	border-color: rgba(255, 255, 255, 0.55);
}

#banner .logo,
#banner h2,
#banner p {
	opacity: 0;
	animation: bannerRise 0.8s ease forwards;
}

#banner .logo { animation-delay: 0.1s; }
#banner h2 { animation-delay: 0.3s; }
#banner p { animation-delay: 0.5s; }

@keyframes bannerRise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

#banner h2,
#banner p {
	color: #ffffff;
}

.typewriter-cursor {
	display: inline-block;
	width: 1px;
	background: rgba(255, 255, 255, 0.75);
	margin-left: 2px;
	animation: blink 0.9s step-end infinite;
}

@keyframes blink {
	50% { opacity: 0; }
}

/* ============================================================
   Retro wireframe globe — 1950s sci-fi "tracking station" style.
   Pure CSS 3D (no video/canvas/JS), so it costs nothing extra to
   serve from the homelab. Hidden below 980px to keep small
   screens uncluttered and light. */

:root {
	--globe-size: 12.5em;
	--globe-line: rgba(148, 255, 214, 0.55);
	--globe-line-bright: rgba(198, 255, 230, 0.9);
	--globe-glow: rgba(120, 255, 200, 0.3);
}

.globe-wrap {
	position: absolute;
	top: 6.25em;
	right: 8%;
	width: var(--globe-size);
	height: var(--globe-size);
	perspective: 44em;
	z-index: 1;
	pointer-events: none;
}

.globe-wrap:before {
	content: '';
	position: absolute;
	inset: -20%;
	border-radius: 50%;
	background: radial-gradient(circle, var(--globe-glow) 0%, transparent 68%);
}

/* Static tilted orbit ring (armillary-sphere flourish) */
.globe-orbit {
	position: absolute;
	inset: -6%;
	border: 1px solid rgba(198, 255, 230, 0.28);
	border-radius: 50%;
	transform: rotateX(76deg);
}

/* Static latitude bands — don't spin, since a horizontal ring
   reads the same at any rotation of the sphere anyway */
.globe-lat {
	position: absolute;
	left: 50%;
	top: 50%;
	border: 1px solid var(--globe-line);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.globe-lat--eq { width: 100%; height: 30%; }
.globe-lat--n1 { width: 84%; height: 22%; top: 32%; }
.globe-lat--s1 { width: 84%; height: 22%; top: 68%; }

/* Spinning wireframe sphere — eight meridian great-circles */
.globe {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	animation: globe-spin 28s linear infinite;
}

.globe .meridian {
	position: absolute;
	inset: 0;
	border: 1px solid var(--globe-line);
	border-radius: 50%;
}

.globe .meridian:nth-child(1) { transform: rotateY(0deg); }
.globe .meridian:nth-child(2) { transform: rotateY(22.5deg); }
.globe .meridian:nth-child(3) { transform: rotateY(45deg); }
.globe .meridian:nth-child(4) { transform: rotateY(67.5deg); }
.globe .meridian:nth-child(5) { transform: rotateY(90deg); }
.globe .meridian:nth-child(6) { transform: rotateY(112.5deg); }
.globe .meridian:nth-child(7) { transform: rotateY(135deg); }
.globe .meridian:nth-child(8) { transform: rotateY(157.5deg); }

@keyframes globe-spin {
	from { transform: rotateY(0deg); }
	to { transform: rotateY(360deg); }
}

/* Radar sweep overlay — the "tracking station screen" touch */
.globe-sweep {
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	overflow: hidden;
	background: conic-gradient(from 0deg, rgba(148, 255, 214, 0.5) 0deg, transparent 34deg, transparent 360deg);
	animation: globe-sweep-spin 8s linear infinite;
	mix-blend-mode: screen;
}

@keyframes globe-sweep-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Blinking tracking blips */
.globe-blip {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--globe-line-bright);
	box-shadow: 0 0 7px 2px var(--globe-glow);
	animation: globe-blip-pulse 2.4s ease-in-out infinite;
}

.globe-blip--1 { top: 26%; left: 64%; animation-delay: 0s; }
.globe-blip--2 { top: 58%; left: 28%; animation-delay: 0.8s; }
.globe-blip--3 { top: 72%; left: 66%; animation-delay: 1.6s; }

@keyframes globe-blip-pulse {
	0%, 100% { opacity: 0.25; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1.15); }
}

@media screen and (max-width: 980px) {
	.globe-wrap { display: none; }
}

/* Pill-shaped stat bar, overlapping the hero/content boundary */
.stat-bar {
	position: relative;
	z-index: 20;
	max-width: 50em;
	margin: -2.25em auto 0 auto;
	background: #ffffff;
	border-radius: 999px;
	box-shadow: 0 10px 26px rgba(19, 15, 56, 0.22);
	padding: 0.9em 1.5em;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 0.6em 1.5em;
}

.stat-bar .stat {
	text-align: center;
	min-width: 6em;
}

.stat-bar .stat .num {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.2em;
	color: var(--accent);
	line-height: 1.1;
}

.stat-bar .stat .label {
	display: block;
	font-size: 0.68em;
	color: var(--fg-light);
	margin-top: 0.15em;
}

@media screen and (max-width: 736px) {
	.stat-bar {
		border-radius: 24px;
		margin-top: -1.5em;
		padding: 1em;
	}
}

/* Inner-page title header — echoes the hero's cosmic treatment instead
   of the template's own unstyled dark-grey band + bg.jpg. */
#wrapper > header {
	position: relative;
	background-color: var(--hero-1);
	background-image:
		radial-gradient(circle at 15% 20%, rgba(124, 58, 237, 0.12), transparent 34%),
		radial-gradient(circle at 85% 80%, rgba(36, 84, 214, 0.5), transparent 50%),
		linear-gradient(135deg, rgba(21, 32, 76, 0.68) 0%, rgba(18, 26, 66, 0.76) 60%, rgba(12, 16, 44, 0.86) 100%),
		url("../../images/lagoon-header.jpg");
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	background-size: auto, auto, auto, cover;
	background-position: 0 0, 0 0, 0 0, left center;

	/* Shorter band (~30% less than the template default), and the photo is
	   carried right through the diagonal instead of the seam being a flat
	   block of navy: the header itself is clipped on the diagonal and its
	   6em tail is pulled back with a negative margin, so it lands exactly
	   in the gap the next .wrapper's own triangle already leaves for it. */
	padding: 4.5em 0 8em 0 !important;
	margin-bottom: -6em;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6em), 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6em), 0 100%);
}

/* The clipped header now supplies the upper-left half of the diagonal, so
   the old solid-fill triangle would double up on it. */
#wrapper > header:after {
	display: none;
}

@media screen and (max-width: 736px) {
	#wrapper > header {
		padding: 3em 0 5em 0 !important;
		margin-bottom: -3em;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3em), 0 100%);
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3em), 0 100%);
	}
}

#wrapper > header h2 {
	color: #ffffff;
	border-bottom-color: rgba(255, 255, 255, 0.18);
}

#wrapper > header p {
	color: rgba(255, 255, 255, 0.78);
}

/* Same diagonal-seam trick as the hero: fills the complementary half
   of the following wrapper's top triangle so the header doesn't end
   in a flat line. */
#wrapper > header:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: -6em;
	width: 100%;
	height: 6em;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 0,100' style='fill:%2315204c%3B' /%3E%3C/svg%3E");
	box-shadow: inset 0 -1px 0 0 #15204c, 0 1px 0 0 #15204c;
	pointer-events: none;
}

@media screen and (max-width: 736px) {
	#wrapper > header:after {
		bottom: -3em;
		height: 3em;
	}
}

/* Reproduce the template's actual angled-section mechanism: real
   margin gaps (not overlap hacks) filled by an SVG polygon triangle,
   recoloured to our palette, plus the same crisp 1px reinforcement
   line the original uses. The reason the stock template's diagonals
   tile perfectly is that every wrapper contributes its OWN triangle
   at its OWN edges into a shared margin gap — never one section's
   shape pasted over a neighbour's flat rectangle. */
#wrapper > .wrapper {
	position: relative;
	margin: 6em 0;
	background-color: var(--bg);
	background-image: none;
}

#wrapper > .wrapper:before,
#wrapper > .wrapper:after {
	content: '';
	display: block !important;
	position: absolute;
	left: 0;
	width: 100%;
	height: 6em;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23e9edf7%3B' /%3E%3C/svg%3E");
	box-shadow: inset 0 -1px 0 0 var(--bg), 0 1px 0 0 var(--bg);
	pointer-events: none;
}

#wrapper > .wrapper:before {
	top: -6em;
}

#wrapper > .wrapper:after {
	bottom: -6em;
	transform: scaleY(-1);
}

#wrapper > .wrapper.alt {
	background-color: var(--bg-alt);
}

#wrapper > .wrapper.alt:before,
#wrapper > .wrapper.alt:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23dbe3f4%3B' /%3E%3C/svg%3E");
	box-shadow: inset 0 -1px 0 0 var(--bg-alt), 0 1px 0 0 var(--bg-alt);
}

#wrapper > .wrapper.alt:before {
	transform: scaleX(-1);
}

#wrapper > .wrapper.alt:after {
	transform: scaleY(-1) scaleX(-1);
}

@media screen and (max-width: 736px) {
	#wrapper > .wrapper {
		margin: 3em 0;
	}

	#wrapper > .wrapper:before,
	#wrapper > .wrapper:after {
		height: 3em;
	}

	#wrapper > .wrapper:before { top: -3em; }
	#wrapper > .wrapper:after { bottom: -3em; }
}

/* Footer — same diagonal-seam trick, completing the mechanism at the
   very bottom of every page (every page's last section is .alt, so
   the footer always needs the same base/unflipped triangle here). */
#footer {
	position: relative;
}

#footer:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: -6em;
	width: 100%;
	height: 6em;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2317224e%3B' /%3E%3C/svg%3E");
	box-shadow: inset 0 -1px 0 0 #17224e, 0 1px 0 0 #17224e;
	pointer-events: none;
}

@media screen and (max-width: 736px) {
	#footer:before {
		top: -3em;
		height: 3em;
	}
}

/* Homepage teaser sections — no boxes: these are full-width slanted
   .wrapper sections, same diagonal-divider language as every other
   page, using the template's own "spotlight" layout (photo + text,
   alternating sides) instead of a card grid. */
#wrapper > .wrapper.spotlight .image {
	width: 12em;
	margin: 0 3em 0 0;
}

#wrapper > .wrapper.spotlight:nth-child(2n-1) .image {
	margin: 0 0 0 3em;
}

#wrapper > .wrapper.spotlight .image img {
	border: 4px solid var(--card);
	box-shadow: 0 8px 22px rgba(22, 26, 44, 0.16);
}

@media screen and (max-width: 736px) {
	#wrapper > .wrapper.spotlight .inner,
	#wrapper > .wrapper.spotlight:nth-child(2n-1) .inner {
		flex-direction: column;
		text-align: left;
	}

	#wrapper > .wrapper.spotlight .image,
	#wrapper > .wrapper.spotlight:nth-child(2n-1) .image {
		width: 9em;
		margin: 0 0 1.5em 0;
	}
}

/* Work & CV teaser — a flat accent band instead of the old gradient
   card, using the same diagonal triangle mechanism as every other
   section, just recoloured. */
#wrapper > .wrapper.teaser-work {
	background-color: var(--accent);
}

#wrapper > .wrapper.teaser-work:before,
#wrapper > .wrapper.teaser-work:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232454d6%3B' /%3E%3C/svg%3E");
	box-shadow: inset 0 -1px 0 0 #2454d6, 0 1px 0 0 #2454d6;
}

#wrapper > .wrapper.teaser-work h3,
#wrapper > .wrapper.teaser-work p {
	color: #ffffff;
}

#wrapper > .wrapper.teaser-work a.special {
	color: #ffffff;
	border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
}

#wrapper > .wrapper.teaser-work .image img {
	border-color: rgba(255, 255, 255, 0.6);
}

/* About Me teaser — no portrait here; a faded trumpet motif on the
   right instead (nods to the "still plays now and then" line), kept
   behind the text and faded into the section rather than pasted on. */
#wrapper > .wrapper.teaser-about .inner {
	position: relative;
	z-index: 1;
}

.teaser-about__motif {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	height: 100%;
	width: 17%;
	min-width: 7.2em;
	object-fit: cover;
	object-position: right center;
	opacity: 0.45;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
	mask-image: linear-gradient(to right, transparent 0%, black 40%);
}

@media screen and (max-width: 980px) {
	.teaser-about__motif {
		width: 22%;
		opacity: 0.3;
	}
}

@media screen and (max-width: 736px) {
	.teaser-about__motif {
		display: none;
	}
}

/* Avatar */
.avatar {
	display: block;
	width: 148px;
	height: 148px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 0 1.75em 0;
	border: 3px solid var(--accent);
}

/* Homepage "Welcome" intro — photo alongside the paragraph */
/* Trim the empty space above "Welcome" so it isn't pushed below the
   fold on a typical laptop screen — the site-wide .wrapper .inner
   padding-top (3em) is tuned for pages without a tall hero above it. */
#one.wrapper .inner {
	padding-top: 1.25em;
}

.welcome-intro {
	display: flex;
	align-items: center;
	gap: 2em;
	margin-bottom: 1.5em;
}

.welcome-intro .avatar {
	flex: 0 0 auto;
	width: 132px;
	height: 132px;
	margin: 0;
}

.welcome-intro p {
	margin: 0;
}

@media screen and (max-width: 736px) {
	.welcome-intro {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25em;
	}
}

/* About Me — top photo, faded behind the intro text so it doesn't cover
   the face, with text indented clear of the visible (left) part of the
   photo. */
.about-hero__inner {
	position: relative;
}

.about-hero__photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 56%;
	height: 100%;
	/* No min-height: anything taller than .about-hero__inner spills past the
	   section's bottom edge, where the next section's diagonal paints over
	   the photo's bottom-left corner and squares it off. */
	object-fit: cover;
	object-position: 28% 30%;
	border-radius: 8px;
	z-index: 0;
	-webkit-mask-image: linear-gradient(to right, black 0%, black 62%, transparent 100%);
	mask-image: linear-gradient(to right, black 0%, black 62%, transparent 100%);
}

.about-hero__text {
	position: relative;
	z-index: 1;
	padding-left: 42%;
}

.about-hero__text p {
	margin: 0 0 1.25em 0;
}

@media screen and (max-width: 980px) {
	.about-hero__text {
		padding-left: 34%;
	}
}

@media screen and (max-width: 736px) {
	.about-hero__photo {
		position: static;
		display: block;
		width: 100%;
		height: 14em;
		margin-bottom: 1.5em;
		-webkit-mask-image: none;
		mask-image: none;
		object-position: center 25%;
	}

	.about-hero__text {
		padding-left: 0;
	}
}

/* About Me — helicopter photo alongside the music paragraphs */
.about-music {
	display: flex;
	align-items: flex-start;
	gap: 2em;
}

.about-music__photo {
	flex: 0 0 auto;
	width: 11em;
	height: 14.5em;
	border-radius: 8px;
	object-fit: cover;
	object-position: center 20%;
	border: 4px solid var(--card);
	box-shadow: 0 8px 22px rgba(22, 26, 44, 0.16);
}

.about-music__text {
	flex: 1 1 auto;
	min-width: 0;
}

@media screen and (max-width: 736px) {
	.about-music {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.about-music__photo {
		width: 9em;
		height: 12em;
	}
}

/* Work & CV — career grouped by theme, on a dated timeline rail */
.career {
	list-style: none;
	margin: 2em 0 0 0;
	padding: 0 0 0 2.75em;
	position: relative;
}

.career:before {
	content: '';
	position: absolute;
	left: 0.42em;
	top: 0.7em;
	bottom: 0.9em;
	width: 2px;
	background-image: linear-gradient(180deg, var(--accent) 0%, rgba(36, 84, 214, 0.22) 100%);
}

.career__item {
	position: relative;
	margin: 0 0 3em 0;
}

.career__item:last-child {
	margin-bottom: 0.5em;
}

.career__item:before {
	content: '';
	position: absolute;
	left: -2.62em;
	top: 0.5em;
	width: 0.9em;
	height: 0.9em;
	border-radius: 50%;
	background-color: var(--accent);
	box-shadow: 0 0 0 4px var(--bg-alt);
}

.career__years {
	display: block;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 0.4em 0;
}

.career__years--inline {
	display: inline;
	margin: 0 0 0 0.5em;
	color: var(--fg-light);
}

.career__title {
	margin: 0 0 0.55em 0;
	font-size: 1.15em;
	letter-spacing: 0;
	line-height: 1.35;
}

.career__item > p {
	margin: 0 0 0.9em 0;
	color: var(--fg-light);
}

.career__item ul {
	margin: 0;
}

/* Closing reflection under a thread's bullet list */
.career__note {
	margin: 1.1em 0 0 0;
	padding-left: 0.9em;
	border-left: 2px solid rgba(36, 84, 214, 0.25);
	color: var(--fg-light);
	font-style: italic;
}

.career__item ul li {
	padding-left: 0.6em;
}

@media screen and (max-width: 736px) {
	.career {
		padding-left: 1.9em;
	}

	.career__item:before {
		left: -1.85em;
		width: 0.7em;
		height: 0.7em;
	}
}

/* Expertise tag chips */
ul.tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	padding: 0;
	margin: 0 0 2.5em 0;
}

ul.tags li {
	background-color: var(--accent-tint);
	border: 1px solid rgba(36, 84, 214, 0.22);
	color: var(--accent);
	border-radius: 999px;
	padding: 0.5em 1.1em;
	font-size: 0.85em;
	line-height: 1;
	cursor: default;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

ul.tags li:hover {
	background-color: #363c4a;
	border-color: #363c4a;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(22, 26, 44, 0.32);
}

/* Buttons */
.button {
	color: var(--accent) !important;
	box-shadow: inset 0 0 0 2px var(--accent);
}

.button:hover {
	background-color: var(--accent-tint) !important;
}

.button:active {
	background-color: rgba(36, 84, 214, 0.16) !important;
}

.button.icon:before {
	color: var(--accent);
}

ul.downloads {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	padding: 0;
	margin: 0 0 1.5em 0;
}

/* CV download gate — a one-line arithmetic check standing in for a
   real captcha, so the download stays easy for an actual visitor and
   just invisible to plain scrapers (see custom.js for why). */
.cv-downloads {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	align-items: flex-start;
	margin: 0 0 1.5em 0;
}

.cv-downloads .cv-gate {
	margin: 0;
	flex: 0 1 auto;
}

.cv-downloads__note {
	font-size: 0.88em;
	color: var(--fg-light);
	margin: 0 0 1.5em 0;
}

.cv-gate {
	margin: 0 0 1.5em 0;
}

.cv-gate__challenge {
	max-width: 26em;
	background-color: var(--accent-tint);
	border: 1px solid rgba(36, 84, 214, 0.22);
	border-radius: 8px;
	padding: 1.25em;
}

.cv-gate__challenge label {
	display: block;
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 0.95em;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	margin: 0 0 0.85em 0;
}

.cv-gate__question {
	font-weight: 700;
	color: var(--accent);
}

.cv-gate__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}

.cv-gate__input {
	width: 5em;
	padding: 0.6em 0.75em;
	border: 1px solid var(--border);
	border-radius: 6px;
	background-color: var(--card);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 1em;
}

.cv-gate__input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-tint);
}

.cv-gate__error {
	color: #b3261e;
	font-size: 0.9em;
	margin: 0.75em 0 0 0;
}

.cv-gate__done {
	color: var(--accent);
	font-weight: 600;
	margin: 0;
}

/* Footer — deep navy band, matching the hero */
#footer {
	background-color: var(--hero-1);
	background-image: linear-gradient(180deg, #17224e 0%, #0f1433 100%);
}

#footer .inner h2,
#footer .inner p {
	color: #ffffff;
}

#footer .inner h2.major {
	border-bottom-color: rgba(255, 255, 255, 0.2);
}

ul.contact-links {
	list-style: none;
	padding: 0;
	margin: 0 0 2em 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
}

ul.contact-links li {
	color: #ffffff;
}

ul.contact-links li a {
	border-bottom: none;
	color: #ffffff;
}

ul.contact-links li.icon:before {
	margin-right: 0.6em;
}

ul.contact-links li a:hover {
	color: #9fb8ff !important;
}

.email-reveal a {
	white-space: nowrap;
}

#footer .copyright li,
#footer .copyright li a {
	color: rgba(255, 255, 255, 0.55);
}

#footer .copyright li a:hover {
	color: #ffffff !important;
}

/* ============================================================
   Wayfinding: current page in the sticky header, current page in
   the menu, and a floating jump-to-top/bottom control. Added once
   the pages grew long enough that "where am I?" and "get me back
   up there" stopped being obvious. */

/* Current page name, next to the site name in the sticky header.
   main.css gives #header a fixed height with the children laid out on a
   single line box — h1 is block-level by default, so the label needs to be
   pulled onto the same line or it overflows out of the bar and lands on
   the photo below. */
#header h1 {
	display: inline-block;
	vertical-align: top;
}

.header-page {
	display: inline-block;
	vertical-align: top;
	line-height: inherit;
	position: relative;
	margin-left: 1.1em;
	padding-left: 1.1em;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	white-space: nowrap;
}

.header-page:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 1.35em;
	transform: translateY(-50%);
	background-color: var(--border);
}

@media screen and (max-width: 480px) {
	.header-page {
		display: none;
	}
}

/* Current page marker in the off-canvas menu */
#menu .links li.is-current a {
	color: #9fb8ff;
	font-weight: 600;
}

/* The menu is centre-aligned, so a bar pinned to the panel edge reads as
   disconnected — mark the current item inline instead. */
#menu .links li.is-current a:before {
	content: '';
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	margin-right: 0.6em;
	border-radius: 50%;
	background-color: #9fb8ff;
	vertical-align: 0.18em;
}

/* Floating jump-to-top / jump-to-bottom */
.page-jump {
	position: fixed;
	right: 1.25em;
	bottom: 1.25em;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.page-jump__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6em;
	height: 2.6em;
	border-radius: 50%;
	border-bottom: 0;
	background-color: rgba(21, 32, 76, 0.88);
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(12, 16, 44, 0.28);
	transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.page-jump__btn:before {
	line-height: 1;
}

.page-jump__btn:hover {
	background-color: var(--accent);
	transform: translateY(-1px);
}

.page-jump__label {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

/* Faded out (but still reachable) when you're already at that end */
.page-jump__btn.is-inactive {
	opacity: 0.28;
	pointer-events: none;
}

@media screen and (max-width: 736px) {
	.page-jump {
		right: 0.85em;
		bottom: 0.85em;
	}

	.page-jump__btn {
		width: 2.4em;
		height: 2.4em;
	}
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ============================================================
   Homepage density. The four teaser sections carry only two or
   three lines each, so the template's section padding (3em top,
   1em bottom) left them floating in a lot of dead space between
   the diagonals. Tightened here only — the inner pages have real
   content and need the breathing room. */
.is-home #wrapper > .wrapper > .inner {
	padding-top: 1.1em;
	padding-bottom: 0.35em;
}

.is-home #wrapper > .wrapper {
	margin: 3.5em 0;
}

.is-home #wrapper > .wrapper:before,
.is-home #wrapper > .wrapper:after {
	height: 3.5em;
}

.is-home #wrapper > .wrapper:before {
	top: -3.5em;
}

.is-home #wrapper > .wrapper:after {
	bottom: -3.5em;
}

.is-home #banner {
	padding-bottom: 6em !important;
	margin-bottom: -3.5em;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5em), 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5em), 0 100%);
}

.is-home #footer:before {
	top: -3.5em;
	height: 3.5em;
}

.is-home #one.wrapper .inner {
	padding-top: 1.1em;
}

@media screen and (max-width: 736px) {
	.is-home #wrapper > .wrapper {
		margin: 3em 0;
	}

	.is-home #wrapper > .wrapper:before,
	.is-home #wrapper > .wrapper:after {
		height: 3em;
	}

	.is-home #wrapper > .wrapper:before { top: -3em; }
	.is-home #wrapper > .wrapper:after { bottom: -3em; }

	.is-home #banner {
		padding-bottom: 6.5em !important;
		margin-bottom: -3em;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3em), 0 100%);
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3em), 0 100%);
	}

	.is-home #footer:before {
		top: -3em;
		height: 3em;
	}
}

/* Attribution credits (design + header photo) set to 8px, smaller than the
   copyright line they sit beside. Scoped to the non-first items so the
   copyright itself keeps its normal size. */
#footer .inner .copyright li:not(:first-child),
#footer .inner .copyright li:not(:first-child) a {
	font-size: 8px;
	line-height: 1.4;
}

#footer .inner .copyright li:not(:first-child) {
	vertical-align: baseline;
}

/* ============================================================
   Expertise chips that carry documents. The chip gets a small
   marker; hovering, focusing or tapping it opens a panel with the
   certificates (icon + label) or the article (page thumbnail).
   Each entry is a plain download link, so it all still works with
   JavaScript off — the script only adds tap-to-toggle and Escape. */

ul.tags li.tag--has-docs {
	position: relative;
	cursor: pointer;
	padding-right: 2em;
	border-color: rgba(36, 84, 214, 0.4);
}

ul.tags li.tag--has-docs:hover,
ul.tags li.tag--has-docs:focus,
ul.tags li.tag--has-docs.is-open {
	background-color: rgba(36, 84, 214, 0.16);
	outline: none;
}

/* Small paper-clip-ish marker so it's discoverable that there's
   something behind the chip */
.tag__marker {
	position: absolute;
	top: 50%;
	right: 0.75em;
	width: 0.85em;
	height: 0.85em;
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--accent);
	opacity: 0.55;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.tag__marker:after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.34em;
	height: 0.34em;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: #ffffff;
}

li.tag--has-docs:hover .tag__marker,
li.tag--has-docs.is-open .tag__marker {
	opacity: 1;
	transform: translateY(-50%) scale(1.12);
}

/* The panel */
.tag-pop {
	position: absolute;
	left: 0;
	top: calc(100% + 0.65em);
	z-index: 30;
	min-width: 17em;
	max-width: 22em;
	padding: 0.9em;
	border-radius: 10px;
	background-color: var(--card);
	border: 1px solid rgba(36, 84, 214, 0.18);
	box-shadow: 0 14px 34px rgba(19, 15, 56, 0.22);
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
	cursor: default;
}

/* little pointer up to the chip */
.tag-pop:before {
	content: '';
	position: absolute;
	left: 1.4em;
	top: -0.45em;
	width: 0.85em;
	height: 0.85em;
	transform: rotate(45deg);
	background-color: var(--card);
	border-left: 1px solid rgba(36, 84, 214, 0.18);
	border-top: 1px solid rgba(36, 84, 214, 0.18);
}

li.tag--has-docs:hover .tag-pop,
li.tag--has-docs:focus-within .tag-pop,
li.tag--has-docs.is-open .tag-pop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Flip to the right edge when the chip sits near the end of a row */
li.tag--has-docs.tag--pop-right .tag-pop {
	left: auto;
	right: 0;
}

li.tag--has-docs.tag--pop-right .tag-pop:before {
	left: auto;
	right: 1.4em;
}

.tag-pop__title {
	margin: 0 0 0.6em 0;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--fg-light);
}

.tag-pop__doc,
.tag-pop__thumb {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.5em;
	border-radius: 7px;
	border-bottom: 0;
	color: var(--fg) !important;
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.82em;
	line-height: 1.35;
	transition: background-color 0.15s ease;
}

.tag-pop__doc:hover,
.tag-pop__thumb:hover {
	background-color: var(--accent-tint);
	color: var(--fg) !important;
}

.tag-pop__icon {
	flex: 0 0 auto;
	width: 2em;
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background-color: var(--accent-tint);
	color: var(--accent);
}

.tag-pop__icon:before {
	line-height: 1;
}

.tag-pop__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tag-pop__text strong {
	font-weight: 600;
}

.tag-pop__text span {
	font-size: 0.85em;
	color: var(--fg-light);
}

/* Article variant — page thumbnail instead of an icon */
.tag-pop__thumb {
	flex-direction: column;
	align-items: stretch;
	gap: 0.6em;
	padding: 0.5em;
}

.tag-pop__thumb img {
	display: block;
	width: 100%;
	border-radius: 6px;
	border: 1px solid var(--border);
}

@media screen and (max-width: 736px) {
	.tag-pop {
		min-width: 0;
		width: min(20em, 78vw);
	}
}

/* ============================================================
   Legibility over the lagoon photo. The page titles and taglines
   sit on pale turquoise water in places, where plain white and the
   light-blue accent word were washing out. A soft dark shadow lifts
   them off the photo, and the accent word is lightened. */
#banner h2,
#banner p,
#wrapper > header h2,
#wrapper > header p {
	text-shadow:
		0 1px 2px rgba(8, 12, 32, 0.55),
		0 2px 12px rgba(8, 12, 32, 0.45);
}

#banner h2,
#wrapper > header h2 {
	text-shadow:
		0 1px 2px rgba(8, 12, 32, 0.6),
		0 3px 18px rgba(8, 12, 32, 0.5);
}

/* The two-tone accent word was the least readable part of the title */
#banner .accent-word--on-dark,
#wrapper > header .accent-word--on-dark {
	color: #dbe7ff;
}

#wrapper > header p {
	color: rgba(255, 255, 255, 0.92);
}

/* ============================================================
   Clickable stat bar. The four figures are the main way into the
   site: each links to the page — and where useful the exact
   section — that backs the number up. */
.stat-bar .stat {
	display: block;
	border-bottom: 0;
	border-radius: 999px;
	padding: 0.55em 0.9em 0.7em 0.9em;
	color: var(--fg) !important;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.stat-bar .stat:hover,
.stat-bar .stat:focus-visible {
	background-color: var(--accent-tint);
	transform: translateY(-2px);
	color: var(--fg) !important;
	outline: none;
}

.stat-bar .stat:focus-visible {
	box-shadow: 0 0 0 2px var(--accent);
}

/* The label and the "The career ›" call to action share one slot: hovering
   swaps one for the other, so the bar never changes height. */
.stat__swap {
	display: grid;
	position: relative;
}

.stat__swap > * {
	grid-area: 1 / 1;
	transition: opacity 0.18s ease;
}

.stat__go {
	font-size: 0.82em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	opacity: 0;
	align-self: center;
}

.stat__go:after {
	content: ' \203A';
}

.stat-bar .stat:hover .label,
.stat-bar .stat:focus-visible .label {
	opacity: 0;
}

.stat-bar .stat:hover .stat__go,
.stat-bar .stat:focus-visible .stat__go {
	opacity: 1;
}

/* Landing target offset, so a deep link doesn't hide the heading
   under the fixed header */
.career__title[id],
h3.major[id] {
	scroll-margin-top: 6em;
}



/* Homepage Welcome block: slightly smaller portrait so the whole intro
   clears the fold on a 768px-tall laptop screen. */
.is-home .welcome-intro .avatar {
	width: 112px;
	height: 112px;
}