:root {
	color-scheme:dark;
	--bg:#080a10;
	--surface:#10131c;
	--ink:#f1f0ee;
	--muted:#a1a6b5;
	--line:#ffffff17;
	--accent:#bfe6c8;
}

* {
	box-sizing:border-box;
}

html {
	scroll-behavior:smooth;
	scroll-padding-top:2rem;
}

body {
	margin:0;
	background:var(--bg);
	color:var(--ink);
	font-family:Inter,"Segoe UI",Arial,sans-serif;
	line-height:1.65;
	font-size:16px;
}

a {
	color:inherit;
	text-decoration:none;
}

button,input,textarea {
	font:inherit;
}

button,a,input,textarea {
	-webkit-tap-highlight-color:transparent;
}

button {
	cursor:pointer;
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:6px;
}

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

button[hidden] {
	display:none;
}

.wrap {
	width:min(1160px,calc(100% - 96px));
	margin-inline:auto;
}

.skip-link {
	position:fixed;
	top:-100px;
	left:20px;
	z-index:10;
	background:var(--ink);
	color:var(--bg);
	padding:10px 18px;
}

.skip-link:focus {
	top:12px;
}

.site-header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	min-height:100px;
	gap:24px;
}

.identity {
	display:flex;
	align-items:center;
	gap:12px;
	font-size:14px;
	font-weight:600;
}


nav {
	display:flex;
	gap:32px;
	font-size:14px;
}

nav a:last-child {
	color:var(--accent);
}

.hero {
	position:relative;
	isolation:isolate;
	overflow:hidden;
	min-height:680px;
	border-bottom:1px solid var(--line);
	background:radial-gradient(ellipse at 78% 50%,#1d243e60,transparent 55%);
}

.hero-copy {
	position:relative;
	z-index:2;
	padding-top:80px;
	pointer-events:none;
}

.hero-copy a {
	pointer-events:auto;
}

.eyebrow {
	font-size:12px;
	font-weight:500;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--muted);
	margin:0 0 24px;
}

.signal {
	display:inline-block;
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--accent);
	margin-right:10px;
	box-shadow:0 0 12px #bfe6c866;
}

h1 {
	font-size:clamp(68px,8.4vw,116px);
	letter-spacing:-.07em;
	line-height:.98;
	font-weight:500;
	margin:0 0 28px;
}

h1 span {
	color:#b4bacb;
}

.lede {
	color:#afb4c3;
	font-size:20px;
	line-height:1.6;
	margin:0 0 34px;
}

.hero-actions {
	display:flex;
	gap:28px;
	align-items:center;
}

.button,form button {
	display:inline-flex;
	align-items:center;
	gap:28px;
	border:1px solid transparent;
	background:var(--accent);
	color:#101b16;
	border-radius:7px;
	padding:12px 20px;
	font-size:14px;
	font-weight:600;
}

.button:hover,form button:hover {
	background:#d6f3dc;
	color:#101b16;
}

.text-link {
	font-size:14px;
}

.text-link span {
	margin-left:12px;
}

.hero-bottom {
	position:relative;
	z-index:3;
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-top:70px;
	padding-bottom:24px;
	font-size:12px;
	color:var(--muted);
	letter-spacing:.035em;
}

.motion-toggle {
	border:1px solid var(--line);
	border-radius:30px;
	color:#bfc3cf;
	background:#0b0e1899;
	padding:7px 14px;
	font-size:12px;
}

.stars {
	position:absolute;
	inset:0;
	opacity:.65;
	background-image:radial-gradient(1px 1px at 12% 16%,#b9c6e8 70%,transparent),radial-gradient(1px 1px at 42% 68%,#b9c6e8 70%,transparent),radial-gradient(1px 1px at 72% 29%,#b9c6e8 70%,transparent),radial-gradient(1.5px 1.5px at 93% 83%,#b9c6e8 70%,transparent);
	background-size:291px 251px,373px 321px,461px 373px,557px 457px;
}

.orbit-scene {
	position:absolute;
	z-index:-1;
	inset:0 0 0 43%;
	overflow:hidden;
}

.horizon {
	position:absolute;
	left:2%;
	top:49%;
	width:155%;
	aspect-ratio:1;
	border-radius:50%;
	background:radial-gradient(ellipse at 30% 0%,#243047 0%,#101722 15%,#080a10 45%);
	border-top:1px solid #a6c1e6;
	box-shadow:0 -8px 28px -10px #a8bcff,0 -35px 100px -55px #b7b8ff;
	transform:rotate(-20deg);
}

.horizon-glow {
	position:absolute;
	width:90%;
	height:170px;
	top:41%;
	left:15%;
	background:radial-gradient(ellipse,#797ca41f,transparent 68%);
	transform:rotate(-18deg);
}

.orbit {
	position:absolute;
	border:1px solid #a7b9df15;
	border-radius:50%;
	width:90%;
	height:64%;
	top:13%;
	left:8%;
	transform:rotate(-35deg);
}

.orbit-two {
	width:120%;
	height:77%;
	top:5%;
	left:0;
}

.floating-icon {
	position:absolute;
	display:grid;
	place-items:center;
	width:66px;
	height:66px;
	background:linear-gradient(140deg,#272d41,#111520);
	border:1px solid #b4c5e32e;
	border-radius:19px;
	box-shadow:0 14px 40px #0006;
	font-size:29px;
	animation:float 8s ease-in-out infinite;
}

.icon-build {
	top:21%;
	left:22%;
	color:#c3c9e7;
	transform:rotate(-10deg);
}

.icon-play {
	top:34%;
	left:72%;
	animation-delay:-3s;
	transform:rotate(12deg);
}

.icon-wonder {
	top:67%;
	left:40%;
	width:48px;
	height:48px;
	font-size:26px;
	color:#d7d3b8;
	animation-delay:-5s;
}

.scene-note {
	position:absolute;
	bottom:11%;
	right:15%;
	font-size:12px;
	color:#aab4c1;
	transform:rotate(-8deg);
	font-family:Georgia,serif;
	font-style:italic;
}

@keyframes float {
	0%,100% {
		translate:0 0;
	}
	50% {
		translate:0 -12px;
	}
}

.motion-paused * {
	animation-play-state:paused!important;
}

.section {
	padding-block:100px;
}

.section-top {
	display:flex;
	justify-content:space-between;
	align-items:end;
	gap:24px;
	margin-bottom:40px;
}

.section-top .text-link {
	padding-bottom:6px;
}

h2 {
	font-size:clamp(30px,3.3vw,44px);
	letter-spacing:-.045em;
	line-height:1.2;
	font-weight:500;
	margin:0;
}

.work-grid {
	display:grid;
	grid-template-columns:1.35fr 1fr;
	gap:24px;
}

.work-card {
	border:1px solid var(--line);
	border-radius:12px;
	overflow:hidden;
	background:var(--surface);
}

.work-art {
	height:280px;
	position:relative;
	display:grid;
	place-items:center;
	background:radial-gradient(ellipse at 45% 60%,#4d59674f,transparent 65%),linear-gradient(140deg,#192329,#121820);
	overflow:hidden;
}

.window {
	width:65%;
	transform:rotate(-6deg) translateY(30px);
	border:1px solid #77898c66;
	box-shadow:0 20px 50px #0007;
	border-radius:9px;
	background:#0d1519;
}

.window-bar {
	height:32px;
	display:flex;
	align-items:center;
	gap:4px;
	padding:0 12px;
	border-bottom:1px solid #ffffff15;
}

.window-bar i {
	width:4px;
	height:4px;
	border-radius:50%;
	background:#7e8e91;
}

.window-bar span {
	font-size:9px;
	color:#90a7aa;
	margin:auto;
}

.window-content {
	padding:20px 28px;
	font-size:32px;
	line-height:1.12;
	letter-spacing:-.045em;
}

.window-content em {
	font-family:Georgia,serif;
	font-weight:normal;
	color:var(--accent);
}

.tiny-star {
	float:right;
	font-size:48px;
	color:var(--accent);
}

.window-line {
	width:45%;
	height:3px;
	background:#91a7a440;
	margin-top:20px;
}

.art-caption {
	position:absolute;
	bottom:14px;
	right:20px;
	font-size:10px;
	color:#95a7aa;
	letter-spacing:.06em;
}

.card-copy {
	padding:30px;
}

.card-copy .eyebrow,.small-card .eyebrow {
	font-size:11px;
	margin-bottom:10px;
}

h3 {
	font-size:24px;
	letter-spacing:-.035em;
	line-height:1.3;
	font-weight:500;
	margin:0 0 14px;
}

.work-card p:not(.eyebrow) {
	color:var(--muted);
	margin:0;
	max-width:440px;
	font-size:15px;
}

.card-bottom {
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-top:26px;
	gap:12px;
	font-size:13px;
}

.tag {
	border:1px solid var(--line);
	border-radius:30px;
	padding:4px 12px;
	color:#bec3ce;
	font-size:11px;
}

.work-secondary {
	display:grid;
	gap:24px;
}

.small-card {
	padding:30px;
	position:relative;
}

.work-symbol {
	float:right;
	font-size:26px;
	color:#b6bbd0;
}

.small-card .eyebrow {
	margin-top:4px;
}

.small-card p:not(.eyebrow) {
	max-width:290px;
}

.card-note {
	display:block;
	color:#bac1cf;
	font-size:12px;
	margin-top:24px;
}

.about-section {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:80px;
	border-top:1px solid var(--line);
}

.about-copy p {
	color:var(--muted);
	margin-top:0;
}

.about-copy .large-copy {
	font-size:24px;
	color:var(--ink);
	line-height:1.5;
	letter-spacing:-.02em;
}

.about-copy .text-link {
	display:inline-block;
	margin-top:14px;
}

.explore-section {
	padding:85px 0;
	background:radial-gradient(ellipse at 30% 70%,#20243c40,transparent 65%),#0c0e16;
	border-block:1px solid var(--line);
}

.explore-heading {
	text-align:center;
}

.explore-heading>p:last-child {
	color:var(--muted);
	font-size:15px;
	margin-top:16px;
}

.constellation {
	display:grid;
	grid-template-columns:1.5fr 1fr;
	gap:48px;
	align-items:center;
	margin-top:40px;
}

.constellation-map {
	height:340px;
	position:relative;
}

.connections {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	fill:none;
	stroke:#ffffff19;
	stroke-width:1;
}

.connections circle {
	fill:var(--accent);
}

.connections path {
	transition:stroke .25s;
}

.constellation[data-active="build"] [data-path="build"],.constellation[data-active="play"] [data-path="play"],.constellation[data-active="wander"] [data-path="wander"],.constellation[data-active="wonder"] [data-path="wonder"] {
	stroke:#bfe6c880;
}

.map-center {
	position:absolute;
	left:50%;
	top:50%;
	translate:-50% -50%;
	display:grid;
	place-items:center;
	width:42px;
	height:42px;
	border-radius:50%;
	background:#161d25;
	color:var(--accent);
	font:italic 27px Georgia,serif;
	border:1px solid #bfe6c833;
}

.interest {
	position:absolute;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	color:var(--muted);
	font-size:14px;
	border:0;
	background:transparent;
	translate:-50% -40%;
	padding:8px;
}

.interest-icon {
	display:grid;
	place-items:center;
	width:64px;
	height:64px;
	font-size:28px;
	border:1px solid #ffffff20;
	border-radius:20px;
	background:#181d2b;
	transition:border-color .2s,background .2s,transform .2s;
}

.interest:hover .interest-icon {
	transform:translateY(-4px);
	border-color:#bfe6c877;
}

.interest[aria-pressed="true"] {
	color:var(--accent);
}

.interest[aria-pressed="true"] .interest-icon {
	border-color:#bfe6c899;
	background:#24332f;
	box-shadow:0 0 32px #bfe6c810;
}

.interest-build {
	left:22.5%;
	top:22%;
}

.interest-play {
	left:78.3%;
	top:26.5%;
}

.interest-wander {
	left:18.3%;
	top:78%;
}

.interest-wonder {
	left:74.2%;
	top:76.5%;
}

.interest-wonder .interest-icon {
	color:#ded4b1;
}

.interest-panel {
	border-left:1px solid var(--line);
	padding:24px 0 24px 40px;
	min-height:280px;
}

.interest-panel .eyebrow {
	color:var(--accent);
	margin-bottom:20px;
}

.interest-panel h3 {
	font-size:32px;
	max-width:320px;
}

.interest-panel>p:not(.eyebrow) {
	color:var(--muted);
	font-size:15px;
	max-width:320px;
}

.interest-panel .text-link {
	display:inline-block;
	margin-top:12px;
}

.no-script {
	color:var(--muted);
}

.contact-section {
	display:grid;
	grid-template-columns:1.1fr 1fr;
	gap:80px;
}

.contact-intro>p:not(.eyebrow) {
	color:var(--muted);
	margin-block:24px;
}

.accent {
	color:var(--accent);
}

form label {
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:0 0 18px;
	font-size:13px;
	color:#bbc0cc;
}

input,textarea {
	width:100%;
	border:1px solid #ffffff24;
	border-radius:6px;
	background:#10131b;
	color:var(--ink);
	padding:12px 14px;
	font-size:16px;
	resize:vertical;
}

input:hover,textarea:hover {
	border-color:#ffffff40;
}

form button {
	margin-top:5px;
}

.contact-honeypot {
	position:absolute;
	left:-10000px;
	width:1px;
	height:1px;
	overflow:hidden;
}

.ok {
	color:var(--accent);
}

.err,.field-err {
	color:#ffa7a7;
}

.field-err {
	font-size:14px;
	margin-top:-10px;
}

.contact-feedback {
	padding:12px 16px;
	border:1px solid currentColor;
	border-radius:6px;
}

footer {
	padding-block:28px;
	border-top:1px solid var(--line);
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:20px;
	color:var(--muted);
	font-size:12px;
}

footer .identity {
	font-size:12px;
}

footer .text-link {
	font-size:12px;
}

@media(min-width:1500px) {
	.orbit-scene {
		right:calc((100vw - 1400px)/2);
	}
}

@media(max-width:900px) {
	.wrap {
		width:calc(100% - 48px);
	}
	.hero {
		min-height:640px;
	}
	.hero-copy {
		padding-top:65px;
	}
	.orbit-scene {
		left:38%;
		opacity:.75;
	}
	.hero-copy h1 {
		font-size:86px;
	}
	.hero-bottom {
		margin-top:80px;
	}
	.work-grid {
		grid-template-columns:1.1fr 1fr;
	}
	.small-card,.card-copy {
		padding:24px;
	}
	.work-art {
		height:300px;
	}
	.window {
		width:80%;
	}
	.about-section,.contact-section {
		gap:40px;
	}
	.constellation {
		gap:16px;
		grid-template-columns:1.3fr 1fr;
	}
	.interest-panel {
		padding-left:24px;
	}
	.interest-panel h3 {
		font-size:28px;
	}
}

@media(max-width:600px) {
	.wrap {
		width:calc(100% - 40px);
	}
	.site-header {
		min-height:110px;
		flex-direction:column;
		align-items:flex-start;
		justify-content:center;
		gap:18px;
	}
	.identity {
		font-size:13px;
	}
	nav {
		gap:24px;
		font-size:13px;
		width:100%;
		justify-content:space-between;
	}
	.hero {
		min-height:750px;
	}
	.hero-copy {
		padding-top:45px;
	}
	.hero .eyebrow {
		font-size:10px;
		letter-spacing:.13em;
	}
	.hero-copy h1 {
		font-size:76px;
	}
	.lede {
		font-size:18px;
	}
	.hero-actions {
		gap:20px;
		flex-wrap:wrap;
	}
	.hero-actions .text-link {
		font-size:13px;
	}
	.button {
		font-size:13px;
		gap:20px;
		padding:12px 16px;
	}
	.orbit-scene {
		inset:370px -30px 15px 0;
		opacity:1;
	}
	.horizon {
		top:46%;
		left:0;
		width:150%;
	}
	.icon-build {
		top:16%;
		left:22%;
		width:46px;
		height:46px;
		font-size:24px;
		border-radius:14px;
	}
	.icon-play {
		top:27%;
		left:74%;
		width:50px;
		height:50px;
		font-size:25px;
		border-radius:15px;
	}
	.icon-wonder {
		top:65%;
		left:45%;
		width:38px;
		height:38px;
		font-size:23px;
		border-radius:12px;
	}
	.scene-note {
		bottom:10%;
		font-size:11px;
	}
	.hero-bottom {
		margin-top:290px;
		font-size:10px;
		gap:10px;
		align-items:end;
	}
	.motion-toggle {
		font-size:10px;
		padding:7px 10px;
		white-space:nowrap;
	}
	.section {
		padding-block:64px;
	}
	.section-top {
		align-items:start;
		flex-direction:column;
		gap:20px;
		margin-bottom:28px;
	}
	.eyebrow {
		font-size:11px;
		margin-bottom:18px;
	}
	.work-grid {
		grid-template-columns:1fr;
		gap:18px;
	}
	.work-secondary {
		gap:18px;
	}
	.work-art {
		height:240px;
	}
	.window {
		width:72%;
	}
	.window-content {
		font-size:29px;
	}
	.card-copy,.small-card {
		padding:24px;
	}
	.small-card p:not(.eyebrow) {
		max-width:100%;
	}
	.about-section,.contact-section {
		grid-template-columns:1fr;
		gap:32px;
	}
	.about-copy .large-copy {
		font-size:22px;
	}
	.explore-section {
		padding-block:60px;
	}
	.constellation {
		grid-template-columns:1fr;
		gap:30px;
		margin-top:28px;
	}
	.constellation-map {
		height:auto;
	}
	.connections,.map-center {
		display:none;
	}
	.interest-choices {
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:20px;
	}
	.interest {
		position:static;
		translate:none;
		padding:12px;
		gap:10px;
	}
	.interest-panel {
		min-height:270px;
		border-left:0;
		border-top:1px solid var(--line);
		padding:28px 8px 0;
	}
	.interest-panel h3 {
		max-width:100%;
	}
	.interest-panel>p:not(.eyebrow) {
		max-width:100%;
	}
	footer {
		flex-wrap:wrap;
		padding-block:24px;
	}
	footer>span {
		order:3;
		width:100%;
	}
}

@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior:auto;
	}
	*,*::before,*::after {
		animation:none!important;
		transition:none!important;
	}
}

/* Keep the interest icons independent of installed emoji fonts. */
.floating-icon svg, .interest-icon svg {
    width: 32px;
    height: 32px;
}
.floating-icon {
    z-index: 2;
}
.motion-toggle:disabled {
    cursor: default;
}
@media (max-width: 600px) {
    .hero {
        min-height: 0;
    }
    .orbit-scene {
        position: relative;
        inset: auto;
        width: 100%;
        height: 290px;
        margin-top: 28px;
        z-index: 1;
    }
    .hero-bottom {
        margin-top: 0;
    }
}

/* Shared actions and the two-page portfolio shell. */
.ui-icon { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
.text-link .ui-icon { width: 17px; height: 17px; margin-left: 7px; }
.hello-action, .conversation-action, .professional-links a { display: inline-flex; align-items: center; gap: 9px; }
.site-header nav { align-items: center; }
.site-header nav [aria-current="page"] { color: var(--ink); box-shadow: 0 2px 0 -1px var(--accent); }
.site-header .hello-action { border: 1px solid #bfe6c840; border-radius: 30px; padding: 9px 15px; }
.hello-action .icon-hand { transform-origin: 70% 85%; }
.hello-action:hover .icon-hand, .hello-action:focus-visible .icon-hand { animation: welcome-wave .65s ease-in-out 2; }
.conversation-action:hover .ui-icon, .conversation-action:focus-visible .ui-icon { animation: conversation-pop .4s ease-out; }
form button:hover .icon-send, form button:focus-visible .icon-send { transform: translate(3px, -3px); }
form button .icon-send { transition: transform .2s; }
form button:disabled { opacity: .65; cursor: wait; }
@keyframes welcome-wave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(18deg); } 65% { transform: rotate(-14deg); } }
@keyframes conversation-pop { 50% { transform: translateY(-4px) scale(1.08); } }
.work-invitation { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 56px; }
.work-invitation h2 { font-size: clamp(24px, 2.6vw, 34px); }
.work-invitation p:not(.eyebrow) { color: var(--muted); margin-bottom: 0; }
.work-invitation .eyebrow { margin-bottom: 12px; }
.work-invitation .button { white-space: nowrap; gap: 12px; }
.arrival-wave { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 24px; border: 1px solid #bfe6c840; border-radius: 18px; color: var(--accent); background: #bfe6c808; }
.arrival-wave .ui-icon { width: 28px; height: 28px; transform-origin: 70% 85%; }
.journey-arrived:not(.motion-paused) .arrival-wave .ui-icon { animation: welcome-wave .7s ease-in-out 2; }

/* Scroll-driven decoration stays outside the content's usable width. */
.journey-main { position: relative; }
.journey-rail { position: absolute; top: 0; right: 4px; bottom: 0; width: 64px; pointer-events: none; z-index: 4; visibility: hidden; }
.journey-ready .journey-rail { visibility: visible; }
.journey-track { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.journey-base { stroke: #bfe6c81c; stroke-width: 1; }
.journey-drawn { stroke: #bfe6c88c; stroke-width: 1.5; }
.journey-craft { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 30px; height: 30px; color: #d1ecd8; border: 1px solid #bfe6c855; background: #111c21; border-radius: 10px; box-shadow: 0 0 22px #bfe6c822; will-change: transform; }
.journey-craft .ui-icon { width: 20px; height: 20px; }
.journey-dock { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border: 1px solid #bfe6c888; border-radius: 50%; box-shadow: 0 0 0 6px #bfe6c80a; }
.home-page .motion-toggle { position: fixed; right: 20px; bottom: 18px; z-index: 10; background: #121722f5; box-shadow: 0 3px 18px #0007; }
.home-page .stars { top: -120px; bottom: -120px; }
.motion-paused [data-reveal] { opacity: 1 !important; transform: none !important; }
.motion-paused .journey-rail { opacity: .4; }
.motion-paused .ui-icon { transition: none !important; }
.home-page footer { padding-bottom: 70px; }

/* Work remains a readable document, independent of animation. */
.professional-layout { display: grid; grid-template-columns: 285px minmax(0, 1fr); gap: 80px; padding-block: 62px 100px; align-items: start; }
.professional-profile { position: sticky; top: 36px; }
.professional-profile h1 { font-size: 38px; letter-spacing: -.045em; line-height: 1.12; margin-bottom: 18px; }
.profile-role { font-size: 20px; line-height: 1.5; margin-bottom: 22px; }
.profile-role span { color: var(--accent); }
.profile-summary { color: var(--muted); font-size: 15px; }
.professional-links { display: flex; gap: 20px; margin-block: 26px; font-size: 14px; }
.professional-links .ui-icon { width: 15px; height: 15px; }
.professional-profile .button { gap: 10px; }
.work-index { display: grid; gap: 12px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.work-index a, .work-index a:last-child { color: var(--muted); font-size: 13px; }
.work-index a:hover { color: var(--accent); }
.resume-section { padding-bottom: 52px; margin-bottom: 48px; border-bottom: 1px solid var(--line); scroll-margin-top: 32px; }
.resume-section .eyebrow { margin-bottom: 16px; }
.resume-section h2 { font-size: 32px; margin-bottom: 36px; }
.role-entry { position: relative; border-left: 1px solid #bfe6c82b; margin-left: 6px; padding: 0 0 34px 27px; }
.role-entry:last-child { padding-bottom: 0; border-color: transparent; }
.role-marker { position: absolute; top: 8px; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: #65777b; box-shadow: 0 0 0 5px var(--bg); }
.current-role .role-marker { background: var(--accent); box-shadow: 0 0 0 5px #16201b; }
.role-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.role-heading h3 { font-size: 22px; margin-bottom: 5px; }
.employer { margin: 0 0 15px; color: #ccd0d9; font-size: 16px; }
.employer .tag { margin-left: 8px; color: var(--accent); }
.role-date { color: var(--muted); font-size: 12px; white-space: nowrap; margin: 5px 0 15px; }
.role-date span { color: #8994a5; }
.achievements { margin: 12px 0 20px; padding-left: 18px; color: #b6bdca; font-size: 15px; }
.achievements li { padding-left: 5px; margin-bottom: 14px; }
.achievements li::marker { color: #839b8b; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-tags span { font-size: 12px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 5px; color: #b9c5c1; background: #bfe6c804; }
.project-entry { display: flex; gap: 20px; margin-top: 32px; }
.project-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; background: #151c23; border: 1px solid var(--line); border-radius: 12px; color: var(--accent); }
.project-entry h3 { font-size: 22px; }
.project-entry p { color: var(--muted); font-size: 15px; }
.project-entry .text-link { display: inline-block; margin-top: 20px; }
.skill-domains { margin: 0; }
.skill-domains>div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding-block: 18px; border-bottom: 1px solid #ffffff09; }
.skill-domains dt { color: #d3d7df; font-size: 14px; }
.skill-domains dd { margin: 0; color: var(--muted); font-size: 15px; }
.education-entry { display: flex; gap: 18px; margin-bottom: 26px; }
.education-entry>.ui-icon { color: var(--accent); width: 28px; height: 28px; }
.education-entry h3 { font-size: 22px; }
.education-entry p:not(.role-date) { color: var(--muted); font-size: 15px; margin-bottom: 8px; }
.work-contact { display: flex; gap: 20px; padding: 24px; background: #bfe6c806; border: 1px solid #bfe6c81c; border-radius: 10px; }
.work-contact>.ui-icon { color: var(--accent); width: 28px; height: 28px; }
.work-contact h3 { font-size: 23px; }
@media (max-width: 1100px) {
    .journey-rail { width: 42px; }
    .professional-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
    .role-heading { flex-direction: column; gap: 0; }
}
@media (max-width: 760px) {
    .professional-layout { grid-template-columns: 1fr; gap: 48px; padding-top: 36px; }
    .professional-profile { position: static; }
    .profile-summary { max-width: 560px; }
    .work-index { display: flex; flex-wrap: wrap; gap: 12px 22px; }
    .work-invitation { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
    .home-page .wrap { width: calc(100% - 64px); margin-left: 24px; margin-right: 40px; }
    .site-header nav { justify-content: flex-start; gap: 22px; }
    .site-header .hello-action { padding: 6px 10px; font-size: 12px; gap: 6px; }
    .site-header .hello-action .ui-icon { width: 16px; height: 16px; }
    .journey-rail { right: 1px; width: 30px; }
    .journey-craft { width: 30px; height: 30px; scale: .75; }
    .journey-craft .ui-icon { width: 21px; height: 21px; }
    .journey-dock { scale: .7; }
    .home-page .motion-toggle { right: 12px; bottom: 12px; font-size: 12px; }
    .hero-actions { gap: 20px; }
    .hero-actions .button { gap: 12px; }
    .professional-profile h1 { font-size: 40px; }
    .resume-section h2 { font-size: 29px; }
    .role-heading h3 { font-size: 21px; }
    .skill-domains>div { grid-template-columns: 1fr; gap: 8px; }
    .project-entry { gap: 13px; }
    .project-entry h3, .education-entry h3 { font-size: 21px; }
    .role-entry { padding-left: 22px; }
    .role-date { white-space: normal; }
    .work-contact { padding: 20px 16px; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-page .stars, .home-page .orbit-scene, [data-reveal] { transform: none !important; opacity: 1 !important; }
}
@media (min-width: 601px) and (max-width: 1255px) {
    .home-page .wrap { width: calc(100% - 112px); margin-left: 48px; margin-right: 64px; }
}
html:has(body.motion-paused) { scroll-behavior: auto; }

/* Immersive Home: colourful compositions that assemble with native scrolling. */
.home-page { background: #070914; }
.cosmic-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.home-page .site-header, .home-page main, .home-page footer { position: relative; }
.home-page .identity, .work-page .identity { letter-spacing: -.025em; font-size: 16px; }
.home-page .hero { background: radial-gradient(ellipse at 20% 35%, #090b1bec 0%, #080b19bb 35%, transparent 70%); }
.hero h1 .name-first, .hero h1 .name-last { display: block; transform-origin: left center; }
.hero h1 .name-first { color: #f5f5ff; }
.hero h1 .name-last, .colour-type { background: linear-gradient(100deg, #74e7ef, #ada0ff 52%, #ffc499); background-clip: text; -webkit-background-clip: text; color: transparent; }
.home-page .horizon { background: radial-gradient(ellipse at 30% 0%, #544486 0%, #171d39 15%, #080a10 48%); border-top-color: #d4baff; box-shadow: 0 -12px 35px -10px #ac8dff, 0 -45px 110px -40px #df78bb66; }
.home-page .hero-copy { perspective: 900px; }
.home-page .button { background: linear-gradient(105deg, #a5e9de, #bfb5ff); color: #14182b; border-color: #d9cfff66; }
.home-page .work-invitation { border-block: 1px solid #b7a0ff26; padding: 38px; border-radius: 18px; background: linear-gradient(120deg, #162b3ce8, #29203ae6); margin-block: 60px; box-shadow: 0 25px 70px #0003; }
.home-page .about-section { border-top: 0; padding-block: 60px 30px; }
.home-page .about-copy { background: #080b16b3; border-radius: 16px; padding: 20px; margin: -20px; }
.assembly-stage { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: center; min-height: 330px; padding-block: 65px; perspective: 1000px; }
.assembly-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-height: 164px; border-radius: 25px; border: 1px solid #ffffff30; box-shadow: 0 20px 60px #0005, inset 0 1px #ffffff22; }
.assembly-tile .ui-icon { width: 48px; height: 48px; stroke-width: 1.2; }
.assembly-tile span { font-size: 14px; }
.tile-code { background: linear-gradient(140deg,#173d44f5,#12302bf5); color:#9cf6d5; }
.tile-game { background: linear-gradient(140deg,#44366af5,#242344f5); color:#d2bcff; }
.tile-compass { background: linear-gradient(140deg,#5c3d38f5,#35202bf5); color:#ffcea0; }
.tile-orbit { background: linear-gradient(140deg,#24445ef5,#19283df5); color:#9fdfff; }
.assembly-orbit { position: absolute; inset: 16% -2%; border: 1px solid #bcb0ff3a; border-radius: 50%; transform: rotate(-8deg); pointer-events: none; }
.home-page .explore-section { position: relative; overflow: clip; background: radial-gradient(ellipse at 30% 65%,#3431696b,transparent 65%),linear-gradient(160deg,#0d1729dd,#141021dd); border-color: #b6a1ff30; }
.home-page .explore-heading h2 { font-size: clamp(34px,4.8vw,62px); }
.home-page .interest-icon { width: 76px; height: 76px; border-radius: 24px; box-shadow: 0 12px 35px #0004; }
.home-page .interest-build .interest-icon { background: #143b37; color: #9cf6d5; border-color: #73d6b365; }
.home-page .interest-play .interest-icon { background: #3b2d5d; color: #dbc5ff; border-color: #b491eb65; }
.home-page .interest-wander .interest-icon { background: #4d302f; color: #ffcca1; border-color: #edb27665; }
.home-page .interest-wonder .interest-icon { background: #203e59; color: #a0dcff; border-color: #6fb6e465; }
.home-page .interest[aria-pressed="true"] .interest-icon { outline: 1px solid currentColor; outline-offset: 5px; }
.home-page .map-center { width: 50px; height: 50px; background: #342848; color: #ddd0ff; }
.home-page .contact-form { padding: 28px; border: 1px solid #e8ae9033; border-radius: 18px; background: linear-gradient(140deg,#1c1b2aeb,#111928f5); }
.home-page .contact-intro h2 { font-size: clamp(34px,4vw,54px); }
.home-page .arrival-wave { background: #533731; border-color: #ffb88166; color: #ffd5a9; }
.home-page .contact-section { border-top: 1px solid #ffffff18; }
.home-page .journey-rail { opacity: .5; }
.motion-paused .assembly-tile, .motion-paused .name-first, .motion-paused .name-last { transform: none !important; }
@media(max-width:760px) {
    .assembly-stage { grid-template-columns: repeat(2,1fr); gap: 18px; min-height: 430px; padding-block: 40px; }
    .assembly-tile { min-height: 150px; border-radius: 20px; gap: 15px; }
    .assembly-tile .ui-icon { width: 38px; height: 38px; }
    .assembly-tile span { font-size: 12px; }
}
@media(max-width:600px) {
    .home-page .work-invitation { padding: 25px 20px; margin-block: 40px; }
    .home-page .about-copy { padding: 14px; margin: -14px; }
    .home-page .contact-form { padding: 22px 18px; }
    .home-page .hero-copy h1 { font-size: clamp(60px,19vw,76px); }
    .home-page .interest-icon { width: 66px; height: 66px; }
}
@media(prefers-reduced-motion:reduce) {
    .cosmic-canvas { display: none; }
    .assembly-tile, .name-first, .name-last { transform: none !important; }
}
.home-page { overflow-x: clip; }
.home-page .assembly-stage { overflow: clip; }
.home-page .journey-main { overflow-x: clip; }
.home-page .contact-form, .home-page input, .home-page textarea { min-width: 0; }