/* ---- Design tokens (brand-true) ---- */
		:root {
			--teal-deep: #264653;
			--teal: #2a9d8f;
			--coral: #e76f51;
			--ink: #233139;
			--muted: #5f7079;
			--faint: #8a99a0;
			--paper: #ffffff;
			--canvas: #f3f1ec;
			--surface: #fbfaf7;
			--line: rgba(38, 70, 83, 0.10);
			--line-strong: rgba(38, 70, 83, 0.16);
			--radius: 14px;
			--radius-sm: 10px;
			--radius-pill: 999px;
			--shadow-sm: 0 1px 2px rgba(38, 70, 83, 0.06), 0 2px 6px rgba(38, 70, 83, 0.05);
			--shadow-md: 0 6px 18px rgba(38, 70, 83, 0.10), 0 2px 6px rgba(38, 70, 83, 0.06);
			--shadow-lg: 0 18px 40px rgba(38, 70, 83, 0.16), 0 6px 14px rgba(38, 70, 83, 0.08);
			--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
			--maxw: 820px;
		}

		* { box-sizing: border-box; }

		html { -webkit-text-size-adjust: 100%; }

		body {
			font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
			margin: 0;
			padding: 28px 20px 56px;
			min-height: 100vh;
			color: var(--ink);
			line-height: 1.6;
			letter-spacing: -0.003em;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			background:
				radial-gradient(1100px 540px at 50% -160px, rgba(42, 157, 143, 0.10), transparent 60%),
				radial-gradient(820px 420px at 88% 8%, rgba(231, 111, 81, 0.06), transparent 55%),
				var(--canvas);
		}

		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 56px 52px 48px;
			background: var(--paper);
			border: 1px solid var(--line);
			border-radius: 22px;
			box-shadow: var(--shadow-md);
			width: 100%;
			max-width: var(--maxw);
			margin: 0 auto;
			position: relative;
		}

		.print-btn {
			position: absolute;
			top: 18px;
			right: 18px;
			padding: 7px 14px;
			background: rgba(42, 157, 143, 0.06);
			color: var(--teal);
			border: 1px solid rgba(42, 157, 143, 0.35);
			border-radius: var(--radius-pill);
			font-size: 12px;
			font-weight: 600;
			font-family: inherit;
			letter-spacing: 0.01em;
			cursor: pointer;
			text-decoration: none;
			transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
		}

		.print-btn:hover {
			background: var(--teal);
			border-color: var(--teal);
			color: #fff;
		}

		/* ---- Section headers: small-caps + accent rule ---- */
		.section-header {
			color: var(--teal-deep);
			font-size: 13px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.14em;
			margin: 52px 0 22px;
			width: 100%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 14px;
		}

		.section-header::before,
		.section-header::after {
			content: "";
			height: 1px;
			flex: 1 1 auto;
			max-width: 96px;
			background: linear-gradient(90deg, transparent, var(--line-strong));
		}

		.section-header::after {
			background: linear-gradient(90deg, var(--line-strong), transparent);
		}

		/* ---- Hero ---- */
		.hero-mark {
			width: 128px;
			height: 128px;
			display: block;
			margin: 8px auto 22px;
			border-radius: 26px;
			box-shadow: var(--shadow-lg);
		}

		.title {
			font-size: clamp(36px, 7vw, 52px);
			font-weight: 800;
			letter-spacing: -0.035em;
			line-height: 1.02;
			color: var(--teal-deep);
			text-align: center;
			margin: 0;
		}

		.subtitle {
			font-size: 16px;
			font-weight: 600;
			letter-spacing: 0.02em;
			color: var(--teal);
			margin: 12px 0 0;
			text-align: center;
		}

		.tagline {
			font-size: 17px;
			color: var(--muted);
			margin: 16px auto 6px;
			text-align: center;
			line-height: 1.6;
			max-width: 460px;
		}

		.description {
			font-size: 16px;
			color: var(--muted);
			margin-top: 20px;
			text-align: center;
			line-height: 1.6;
		}

		.coming-soon {
			color: var(--muted);
			font-style: italic;
			margin: 10px 0;
		}

		/* ---- Profiles: icon row ---- */
		.icon-row {
			display: flex;
			justify-content: center;
			gap: 12px;
			flex-wrap: wrap;
			margin: 24px 0 4px;
		}

		.icon-link {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 44px;
			height: 44px;
			border-radius: var(--radius-pill);
			border: 1px solid var(--line-strong);
			color: var(--teal-deep);
			background: var(--surface);
			box-shadow: var(--shadow-sm);
			transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
		}

		.icon-link svg { width: 20px; height: 20px; fill: currentColor; }

		.icon-link:hover {
			background: var(--teal);
			border-color: var(--teal);
			color: #fff;
			transform: translateY(-3px);
			box-shadow: var(--shadow-md);
		}

		/* ---- Companies / Work-with-me: chips ---- */
		.chip-row {
			display: flex;
			justify-content: center;
			gap: 10px;
			flex-wrap: wrap;
			margin: 4px 0;
		}

		.chip {
			display: inline-flex;
			align-items: center;
			gap: 9px;
			padding: 9px 16px;
			border-radius: var(--radius-pill);
			border: 1px solid var(--line-strong);
			background: var(--surface);
			color: var(--teal-deep);
			text-decoration: none;
			font-size: 14px;
			font-weight: 600;
			box-shadow: var(--shadow-sm);
			transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
		}

		.chip:hover {
			background: var(--teal);
			border-color: var(--teal);
			color: #fff;
			transform: translateY(-2px);
			box-shadow: var(--shadow-md);
		}

		.chip:hover .dot { background: #fff; }

		.chip .dot {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: var(--coral);
			flex: 0 0 auto;
			transition: background 0.2s var(--ease);
		}

		/* ---- Selected Work: card grid (the centerpiece) ---- */
		.work-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
			gap: 12px;
			width: 100%;
			margin-top: 4px;
		}

		.tile {
			display: flex;
			flex-direction: column;
			border-radius: var(--radius);
			overflow: hidden;
			border: 1px solid rgba(38, 70, 83, 0.07);
			background: var(--paper);
			text-decoration: none;
			box-shadow: 0 1px 2px rgba(38, 70, 83, 0.04);
			transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
		}

		.tile .thumb-wrap {
			position: relative;
			width: 100%;
			aspect-ratio: 16 / 10;
			overflow: hidden;
			background: var(--surface);
		}

		.tile .thumb {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			transition: transform 0.5s var(--ease);
		}

		.tile:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 14px rgba(38, 70, 83, 0.08);
			border-color: var(--line);
		}

		.tile:hover .thumb { transform: scale(1.02); }

		/* Branded fallback tile (no image) */
		.tile .thumb-fallback {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 12px;
			background: linear-gradient(135deg, var(--teal-deep) 0%, var(--teal) 100%);
			color: #fff;
			font-size: 14px;
			font-weight: 700;
			letter-spacing: 0.01em;
			transition: transform 0.5s var(--ease);
		}

		.tile:hover .thumb-fallback { transform: scale(1.02); }

		.tile .tile-body {
			padding: 9px 11px 11px;
			border-top: 1px solid rgba(38, 70, 83, 0.06);
		}

		.tile .tile-name {
			display: block;
			color: var(--muted);
			font-size: 10px;
			font-weight: 600;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			transition: color 0.2s var(--ease);
		}

		/* Benefit line, the hook */
		.tile .tile-benefit {
			display: block;
			color: var(--teal-deep);
			font-size: 12.5px;
			font-weight: 500;
			letter-spacing: -0.01em;
			line-height: 1.35;
			margin-top: 3px;
		}

		/* CTA, the advertising element */
		.tile .tile-cta {
			display: inline-block;
			margin-top: 6px;
			color: var(--teal);
			font-size: 11.5px;
			font-weight: 600;
			letter-spacing: 0.005em;
			transition: color 0.2s var(--ease), transform 0.2s var(--ease);
		}

		.tile:hover .tile-cta {
			color: var(--coral);
			transform: translateX(2px);
		}

		/* ---- Book card ---- */
		.book-card {
			width: 100%;
			margin: 4px 0;
			padding: 24px;
			border: 1px solid var(--line);
			border-radius: var(--radius);
			background: var(--surface);
			box-shadow: var(--shadow-sm);
			text-align: left;
			display: flex;
			gap: 24px;
			align-items: flex-start;
		}

		.book-card .book-cover {
			flex: 0 0 140px;
			width: 140px;
			height: auto;
			border-radius: var(--radius-sm);
			box-shadow: var(--shadow-md);
			align-self: flex-start;
		}

		.book-card .book-body {
			flex: 1;
			min-width: 0;
		}

		.book-card .book-title {
			font-size: 22px;
			font-weight: 800;
			letter-spacing: -0.02em;
			color: var(--teal-deep);
		}

		.book-card .book-subtitle {
			margin-top: 6px;
			font-size: 14px;
			color: var(--muted);
			font-style: italic;
			line-height: 1.5;
		}

		.book-card .book-blurb {
			margin-top: 14px;
			font-size: 15px;
			line-height: 1.65;
			color: var(--ink);
		}

		.book-actions {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 18px;
		}

		/* ---- Buttons ---- */
		.btn {
			display: inline-block;
			padding: 9px 16px;
			border-radius: var(--radius-pill);
			text-decoration: none;
			font-size: 14px;
			font-weight: 600;
			border: 1px solid rgba(42, 157, 143, 0.45);
			color: var(--teal);
			background: var(--paper);
			cursor: pointer;
			transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
		}

		.btn:hover {
			background: var(--teal);
			border-color: var(--teal);
			color: #fff;
			transform: translateY(-2px);
			box-shadow: var(--shadow-md);
		}

		.btn.primary {
			background: var(--teal-deep);
			border-color: var(--teal-deep);
			color: #fff;
		}

		.btn.primary:hover {
			background: var(--teal);
			border-color: var(--teal);
		}

		/* ---- Shop links ---- */
		.shop-link {
			text-decoration: none;
			color: var(--teal-deep);
			font-size: 16px;
			font-weight: 600;
			margin: 0 0 12px;
			padding: 16px 20px;
			width: 100%;
			display: block;
			text-align: center;
			border: 1px solid var(--line);
			border-radius: var(--radius);
			background: var(--surface);
			box-shadow: var(--shadow-sm);
			transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
		}

		.shop-link:hover {
			color: var(--coral);
			border-color: var(--line-strong);
			transform: translateY(-2px);
			box-shadow: var(--shadow-md);
		}

		.shop-link .sub {
			display: block;
			font-size: 13px;
			font-weight: 400;
			color: var(--muted);
			margin-top: 4px;
		}

		.note {
			font-size: 12.5px;
			color: var(--faint);
		}

		.note a { color: var(--teal); text-decoration: none; }
		.note a:hover { color: var(--coral); }

		/* ---- Writing list ---- */
		.writing-list {
			width: 100%;
			max-width: 560px;
		}

		.writing-list a {
			display: block;
			color: var(--ink);
			text-decoration: none;
			font-size: 15px;
			font-weight: 500;
			padding: 12px 16px;
			border-radius: var(--radius-sm);
			transition: color 0.2s var(--ease), background 0.2s var(--ease);
		}

		.writing-list a:hover {
			color: var(--coral);
			background: var(--surface);
		}

		/* ---- Responsive ---- */
		@media (max-width: 680px) {
			body { padding: 16px 12px 40px; }

			.container {
				padding: 36px 22px 36px;
				border-radius: 18px;
			}

			.work-grid {
				grid-template-columns: repeat(2, 1fr);
				gap: 10px;
			}

			.hero-mark { width: 104px; height: 104px; border-radius: 22px; }

			.section-header { margin: 42px 0 18px; }

			.book-card {
				flex-direction: column;
				align-items: center;
				gap: 18px;
				padding: 22px 18px;
			}

			.book-card .book-cover { width: 168px; flex: none; }
			.book-card .book-body { text-align: center; width: 100%; }
			.book-card .book-actions { justify-content: center; }

			.print-btn { font-size: 11px; padding: 6px 11px; top: 14px; right: 14px; }
		}

		@media (prefers-reduced-motion: reduce) {
			* { transition: none !important; }
			.tile:hover { transform: none; }
			.tile:hover .thumb, .tile:hover .thumb-fallback { transform: none; }
		}

		@media print {
			body { background: #fff; padding: 0; }
			.container { box-shadow: none; border: none; max-width: 100%; width: 100%; }
			.print-btn { display: none; }
			.book-card, .shop-link, .tile { break-inside: avoid; box-shadow: none; }
			.work-grid { gap: 10px; }
			.icon-link { border-color: var(--muted); box-shadow: none; }
			a::after { content: " (" attr(href) ")"; font-size: 11px; color: var(--muted); }
		}

/* =========================================================
   Portfolio additions (research / work / writing / about)
   ========================================================= */

/* ---- Top nav ---- */
.site-nav {
	display: flex;
	justify-content: center;
	gap: 22px;
	flex-wrap: wrap;
	margin: 0 0 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
	width: 100%;
}
.site-nav a {
	color: var(--muted);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 4px 2px;
	border-bottom: 2px solid transparent;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
	color: var(--teal-deep);
	border-color: var(--coral);
}

/* ---- Current-focus strip ---- */
.focus-line {
	width: 100%;
	max-width: 560px;
	margin: 4px auto 8px;
	padding: 10px 16px;
	text-align: center;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--teal-deep);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.focus-line .label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 10.5px;
	color: var(--coral);
	margin-right: 6px;
}

/* ---- Type/status badges ---- */
.badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 9px;
	border-radius: var(--radius-pill);
	background: rgba(38, 70, 83, 0.07);
	color: var(--teal-deep);
	border: 1px solid var(--line-strong);
	white-space: nowrap;
}
.badge.ai { background: rgba(231, 111, 81, 0.09); color: #b5502f; border-color: rgba(231, 111, 81, 0.3); }
.badge.pub { background: rgba(42, 157, 143, 0.12); color: var(--teal-deep); border-color: rgba(42,157,143,0.3); }

/* ---- Disclosure box ---- */
.disclosure {
	width: 100%;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--muted);
	background: var(--surface);
	border-left: 3px solid var(--coral);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	padding: 10px 14px;
	margin: 6px 0 18px;
}

/* ---- Portfolio card list (research/work index) ---- */
.card-list { width: 100%; display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; }
.pcard {
	display: block;
	text-decoration: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	padding: 16px 18px;
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.pcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.pcard-title { font-size: 16px; font-weight: 800; color: var(--teal-deep); letter-spacing: -0.01em; }
.pcard-scope { font-size: 13px; color: var(--muted); margin: 2px 0 8px; }
.pcard-meta { font-size: 12px; color: var(--faint); }

/* ---- Filter chips (Research/Work index) ---- */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 18px; }
.filter-chip {
	font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: var(--radius-pill);
	border: 1px solid var(--line-strong); background: var(--surface); color: var(--teal-deep);
	cursor: pointer;
}
.filter-chip[aria-pressed="true"] { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }

/* ---- Case-study detail page ---- */
.cs-header { text-align: center; margin-bottom: 10px; }
.cs-title { font-size: clamp(24px, 5vw, 32px); font-weight: 800; color: var(--teal-deep); letter-spacing: -0.02em; margin: 10px 0 6px; }
.cs-scope { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.cs-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 6px; }
.cs-section { width: 100%; margin: 22px 0; }
.cs-section h2 { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal-deep); margin: 0 0 8px; }
.cs-section p, .cs-section li { font-size: 15px; line-height: 1.65; color: var(--ink); }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cs-back { align-self: flex-start; font-size: 13px; color: var(--muted); text-decoration: none; margin-bottom: 6px; }
.cs-back:hover { color: var(--coral); }
@media (max-width: 680px) { .cs-grid { grid-template-columns: 1fr; } }

/* ---- Secondary link row (papers / atlases) ---- */
.link-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 6px; }
.link-row a {
	font-size: 12.5px; font-weight: 600; color: var(--teal-deep); text-decoration: none;
	padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface);
}
.link-row a:hover { background: var(--teal-deep); color: #fff; }

/* ---- Research directions ---- */
.rdir-list {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 6px 0 10px;
}
.rdir {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px 18px;
	box-shadow: var(--shadow-sm);
}
.rdir.lead { border-color: rgba(42, 157, 143, 0.35); }
.rdir-code {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--teal);
}
.rdir-title {
	display: block;
	font-size: 15.5px;
	font-weight: 800;
	color: var(--teal-deep);
	letter-spacing: -0.01em;
	margin: 2px 0 6px;
}
.rdir-body {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--muted);
	margin: 0;
}
@media (max-width: 680px) {
	.rdir-list { grid-template-columns: 1fr; }
}