@charset "UTF-8";

/**
 *   # CSS Index
 *
 *   I used to format my stylesheets like this manually back in the day.
 *
 *
 *   1. Global CSS Styles
 *       1.1 Root Variables
 *       1.2 Reset
 *       1.3 Typography
 *       1.4 Theme
 *       1.5 Transitions
 *
 *   2. Utility Styles
 *       2.1 Background
 *       2.2 Color
 *       2.3 Text Size
 *       2.4 Font Weight
 *       2.5 Font Family
 *       2.6 Line Height
 *       2.7 Gap
 *       2.8 Padding
 *       2.9 Padding Block
 *       2.10 Layout
 *       2.11 Accessibility
 *
 *   3. Block Styles
 *       3.1 Header
 *              - 3.1.1 Site Header
 *              - 3.1.2 Logo
 *              - 3.1.3 Nav
 *              - 3.1.4 Nav Link
 *       3.2 Footer
 *              - 3.2.1 Site Footer
 *       3.3 Layout
 *              - 3.3.1 Container
 *              - 3.3.2 Section Heading
 *       3.4 Hero
 *              - 3.4.1 Hero Content
 *       3.5 Projects
 *              - 3.5.1 Project Grid
 *              - 3.5.2 Project Detail
 *              - 3.5.3 Project Card
 *              - 3.5.4 Post Header
 *              - 3.5.5 Skill Badge
 *       3.6 Resume
 *              - 3.6.1 Resume View
 *              - 3.6.2 Resume Section
 *              - 3.6.3 Resume Entry
 *       3.7 Contact
 *              - 3.7.1 Contact Form
 *              - 3.7.2 Form Field
 *       3.8 Shared
 *              - 3.8.1 Button
 *              - 3.8.2 Icon
 *
 */



/* ====================================================================================================
    1. Global CSS Styles
   ==================================================================================================== */



/*  1.1 Root Variables
   ---------------------------------------------------------------------------------------------------- */

	:root {
		--color-accent: #2b4141;
		--color-error: #dc2626;
		--color-info: #0284c7;
		--color-primary: #2563eb;
		--color-secondary: #7c3aed;
		--color-success: #16a34a;
		--color-warning: #d97706;
		--container-lg: 1024px;
		--container-max: 1400px;
		--container-md: 768px;
		--container-sm: 640px;
		--container-xl: 1200px;
		--duration-fast: 150ms;
		--duration-normal: 250ms;
		--duration-slow: 400ms;
		--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
		--ease-in: cubic-bezier(0.4, 0, 1, 1);
		--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
		--ease-out: cubic-bezier(0, 0, 0.2, 1);
		--font-bold: 700;
		--font-light: 300;
		--font-medium: 500;
		--font-mono: "Courier New",
		             Courier,
		             monospace;
		--font-regular: 400;
		--font-sans: "Oswald",
		             sans-serif;
		--font-semibold: 600;
		--font-serif: Georgia,
		              "Times New Roman",
		              serif;
		--leading-loose: 2;
		--leading-none: 1;
		--leading-normal: 1.5;
		--leading-relaxed: 1.625;
		--leading-snug: 1.375;
		--leading-tight: 1.25;
		--neutral-0: #ffffff;
		--neutral-100: #f5f5f5;
		--neutral-200: #e5e5e5;
		--neutral-300: #d4d4d4;
		--neutral-400: #a3a3a3;
		--neutral-50: #fafafa;
		--neutral-500: #737373;
		--neutral-600: #525252;
		--neutral-700: #404040;
		--neutral-800: #262626;
		--neutral-900: #171717;
		--neutral-950: #0a0a0a;
		--radius-2xl: 1rem;
		--radius-full: 9999px;
		--radius-lg: 0.5rem;
		--radius-md: 0.375rem;
		--radius-none: 0;
		--radius-sm: 0.125rem;
		--radius-xl: 0.75rem;
		--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
		             0 4px 6px -4px rgb(0 0 0 / 0.1);
		--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
		             0 2px 4px -2px rgb(0 0 0 / 0.1);
		--shadow-none: none;
		--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
		--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
		             0 8px 10px -6px rgb(0 0 0 / 0.1);
		--space-0: 0;
		--space-0-5: 0.125rem;
		--space-1: 0.25rem;
		--space-10: 2.5rem;
		--space-12: 3rem;
		--space-16: 4rem;
		--space-2: 0.5rem;
		--space-20: 5rem;
		--space-24: 6rem;
		--space-2xl: var(--space-12);
		--space-3: 0.75rem;
		--space-32: 8rem;
		--space-3xl: var(--space-16);
		--space-4: 1rem;
		--space-4xl: var(--space-24);
		--space-5: 1.25rem;
		--space-6: 1.5rem;
		--space-8: 2rem;
		--space-lg: var(--space-6);
		--space-md: var(--space-4);
		--space-px: 1px;
		--space-sm: var(--space-2);
		--space-xl: var(--space-8);
		--space-xs: var(--space-1);
		--text-2xl: 1.5rem;
		--text-3xl: 1.875rem;
		--text-4xl: 2.25rem;
		--text-5xl: 3rem;
		--text-6xl: 3.75rem;
		--text-base: 1rem;
		--text-lg: 1.125rem;
		--text-sm: 0.875rem;
		--text-xl: 1.25rem;
		--text-xs: 0.75rem;
		--z-base: 0;
		--z-dropdown: 100;
		--z-modal: 400;
		--z-overlay: 300;
		--z-raised: 10;
		--z-sticky: 200;
		--z-toast: 500;
	}


/*  1.2 Reset
   ---------------------------------------------------------------------------------------------------- */

	*,
	*::before,
	*::after { box-sizing: border-box; }
	* {
		font: inherit;
		margin: 0;
		padding: 0;
	}
	html {
		color-scheme: dark light;
		hanging-punctuation: first last;
		scrollbar-gutter: stable;
	}
	@media (prefers-reduced-motion:reduce) {
		html { scroll-behavior: auto; }
	}
	::-webkit-scrollbar { width: 8px; }
	body { min-height: 100vh; }
	img,
	picture,
	svg,
	video {
		display: block;
		max-width: 100%;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 { text-wrap: balance; }
	p {
		max-width: 75ch;
		text-wrap: pretty;
	}
	@media (prefers-reduced-motion:no-preference) {
		:has(:target) {
			scroll-behavior: smooth;
			scroll-padding-top: 3rem;
		}
	}
	@font-face {
		font-family: "Oswald";
		font-style: normal;
		font-weight: 200 700;
		font-display: swap;
		src: url(/fonts/Oswald-VariableFont_wght.ttf)format("ttf");
	}


/*  1.3 Typography
   ---------------------------------------------------------------------------------------------------- */

	body {
		background-color: var(--surface-bg);
		color: var(--text-body);
		display: flex;
		flex-direction: column;
		font-family: var(--font-sans);
		font-size: var(--text-base);
		font-weight: var(--font-regular);
		line-height: var(--leading-normal);
	}
	.page-content { flex-grow: 1; }
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: var(--text-heading);
		font-weight: var(--font-bold);
		line-height: var(--leading-tight);
	}
	h1 { font-size: var(--text-5xl); }
	h2 { font-size: var(--text-4xl); }
	h3 { font-size: var(--text-3xl); }
	h4 { font-size: var(--text-2xl); }
	h5 { font-size: var(--text-xl); }
	h6 { font-size: var(--text-lg); }
	@media (min-width:768px) {
		h1 { font-size: var(--text-6xl); }
		h2 { font-size: var(--text-5xl); }
		h3 { font-size: var(--text-4xl); }
	}
	p { max-width: 65ch; }
	a {
		color: var(--action-primary);
		text-decoration: underline;
		text-underline-offset: 0.15em;
		transition: color var(--duration-fast) var(--ease-default);
	}
	a:hover { color: var(--action-primary-hover); }
	a.button {
		color: var(--button-color);
		text-decoration: none;
	}
		a.button:hover { color: var(--button-color); }
	code,
	pre {
		font-family: var(--font-mono);
		font-size: var(--text-sm);
	}
	code {
		background: var(--surface-raised);
		border-radius: var(--radius-sm);
		padding: var(--space-0-5) var(--space-1);
	}
	pre {
		background: var(--surface-raised);
		border-radius: var(--radius-md);
		overflow-x: auto;
		padding: var(--space-md);
	}
	pre code {
		background: none;
		border-radius: 0;
		padding: 0;
	}
	strong { font-weight: var(--font-semibold); }
	small { font-size: var(--text-sm); }


/*  1.4 Theme
   ---------------------------------------------------------------------------------------------------- */

	:root,
	[data-theme=light] {
		--action-primary: var(--color-primary);
		--action-primary-hover: #1d4ed8;
		--action-primary-text: var(--neutral-0);
		--action-secondary: var(--neutral-200);
		--action-secondary-text: var(--neutral-800);
		--feedback-error: var(--color-error);
		--feedback-info: var(--color-info);
		--feedback-success: var(--color-success);
		--feedback-warning: var(--color-warning);
		--focus-ring: var(--color-primary);
		--surface-bg: var(--neutral-0);
		--surface-bg-subtle: var(--neutral-50);
		--surface-border: var(--neutral-200);
		--surface-raised: var(--neutral-100);
		--text-body: var(--neutral-800);
		--text-heading: var(--neutral-900);
		--text-inverse: var(--neutral-0);
		--text-muted: var(--neutral-500);
	}
	[data-theme=dark] {
		--action-primary: var(--color-primary);
		--action-primary-hover: #3b82f6;
		--action-primary-text: var(--neutral-0);
		--action-secondary: var(--neutral-700);
		--action-secondary-text: var(--neutral-200);
		--focus-ring: var(--color-primary);
		--surface-bg: var(--neutral-950);
		--surface-bg-subtle: var(--neutral-900);
		--surface-border: var(--neutral-700);
		--surface-raised: var(--neutral-800);
		--text-body: var(--neutral-200);
		--text-heading: var(--neutral-50);
		--text-inverse: var(--neutral-950);
		--text-muted: var(--neutral-400);
	}


/*  1.5 Transitions
   ---------------------------------------------------------------------------------------------------- */

	.astro-route-announcer {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		left: 0;
		overflow: hidden;
		position: absolute;
		top: 0;
		white-space: nowrap;
		width: 1px;
	}
	@media (prefers-reduced-motion) {
		::view-transition-group(*),
		::view-transition-old(*),
		::view-transition-new(*) { animation: none; }
		[data-astro-transition-scope] { animation: none; }
	}
	::view-transition-old(nav-indicator),
	::view-transition-new(nav-indicator) {
		animation-duration: var(--duration-normal);
		animation-timing-function: var(--ease-default);
	}
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: var(--duration-fast);
		animation-timing-function: var(--ease-default);
	}
	@keyframes fade-out {
		from {
			opacity:1;
		}
		to {
			opacity:0;
		}
	}
	@keyframes slide-fade-in-right {
		from {
			opacity:0;
			transform:translateX(50px);
		}
		to {
			opacity:1;
			transform:translateX(0);
		}
	}
	@keyframes slide-fade-in-left {
		from {
			opacity:0;
			transform:translateX(-50px);
		}
		to {
			opacity:1;
			transform:translateX(0);
		}
	}
	::view-transition-old(main-content),
	::view-transition-new(main-content) {
		animation-duration: var(--duration-normal);
		animation-timing-function: var(--ease-default);
	}
	[data-astro-transition=forward]::view-transition-old(main-content) { animation-name: fade-out; }
	[data-astro-transition=forward]::view-transition-new(main-content) { animation-name: slide-fade-in-right; }
	[data-astro-transition=back]::view-transition-old(main-content) { animation-name: fade-out; }
	[data-astro-transition=back]::view-transition-new(main-content) { animation-name: slide-fade-in-left; }



/* ====================================================================================================
    2. Utility Styles
   ==================================================================================================== */



/*  2.1 Background
   ---------------------------------------------------------------------------------------------------- */

	.bg-primary { background-color: var(--action-primary); }
	.bg-surface { background-color: var(--surface-bg); }
	.bg-subtle { background-color: var(--surface-bg-subtle); }
	.bg-raised { background-color: var(--surface-raised); }


/*  2.2 Color
   ---------------------------------------------------------------------------------------------------- */

	.color-heading { color: var(--text-heading); }
	.color-body { color: var(--text-body); }
	.color-muted { color: var(--text-muted); }
	.color-primary { color: var(--action-primary); }
	.color-inverse { color: var(--text-inverse); }


/*  2.3 Text Size
   ---------------------------------------------------------------------------------------------------- */

	.text-xs { font-size: var(--text-xs); }
	.text-sm { font-size: var(--text-sm); }
	.text-base { font-size: var(--text-base); }
	.text-lg { font-size: var(--text-lg); }
	.text-xl { font-size: var(--text-xl); }
	.text-2xl { font-size: var(--text-2xl); }
	.text-3xl { font-size: var(--text-3xl); }
	.text-4xl { font-size: var(--text-4xl); }
	.text-5xl { font-size: var(--text-5xl); }
	.text-6xl { font-size: var(--text-6xl); }


/*  2.4 Font Weight
   ---------------------------------------------------------------------------------------------------- */

	.font-light { font-weight: var(--font-light); }
	.font-regular { font-weight: var(--font-regular); }
	.font-medium { font-weight: var(--font-medium); }
	.font-semibold { font-weight: var(--font-semibold); }
	.font-bold { font-weight: var(--font-bold); }
	.u-inline-heading { font-weight: bold; }


/*  2.5 Font Family
   ---------------------------------------------------------------------------------------------------- */

	.font-sans { font-family: var(--font-sans); }
	.font-mono { font-family: var(--font-mono); }
	.font-serif { font-family: var(--font-serif); }


/*  2.6 Line Height
   ---------------------------------------------------------------------------------------------------- */

	.leading-none { line-height: var(--leading-none); }
	.leading-tight { line-height: var(--leading-tight); }
	.leading-snug { line-height: var(--leading-snug); }
	.leading-normal { line-height: var(--leading-normal); }
	.leading-relaxed { line-height: var(--leading-relaxed); }


/*  2.7 Gap
   ---------------------------------------------------------------------------------------------------- */

	.gap-xs { gap: var(--space-xs); }
	.gap-sm { gap: var(--space-sm); }
	.gap-md { gap: var(--space-md); }
	.gap-lg { gap: var(--space-lg); }
	.gap-xl { gap: var(--space-xl); }
	.gap-2xl { gap: var(--space-2xl); }


/*  2.8 Padding
   ---------------------------------------------------------------------------------------------------- */

	.pad-xs { padding: var(--space-xs); }
	.pad-sm { padding: var(--space-sm); }
	.pad-md { padding: var(--space-md); }
	.pad-lg { padding: var(--space-lg); }
	.pad-xl { padding: var(--space-xl); }
	.pad-2xl { padding: var(--space-2xl); }


/*  2.9 Padding Block
   ---------------------------------------------------------------------------------------------------- */

	.pad-block-xs { padding-block: var(--space-xs); }
	.pad-block-sm { padding-block: var(--space-sm); }
	.pad-block-md { padding-block: var(--space-md); }
	.pad-block-lg { padding-block: var(--space-lg); }
	.pad-block-xl { padding-block: var(--space-xl); }
	.pad-block-2xl { padding-block: var(--space-2xl); }


/*  2.10 Layout
   ---------------------------------------------------------------------------------------------------- */

	.text-center { text-align: center; }
	.text-start { text-align: start; }
	.text-end { text-align: end; }
	.flex-center {
		align-items: center;
		display: flex;
		justify-content: center;
	}


/*  2.11 Accessibility
   ---------------------------------------------------------------------------------------------------- */

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



/* ====================================================================================================
    3. Block Styles
   ==================================================================================================== */



/*  3.1 Header
   ---------------------------------------------------------------------------------------------------- */


/* 3.1.1 Site Header ---------------------------------------------------------------------------- */
	.site-header {
		--header-bg: var(--surface-bg);
		--header-border: var(--surface-border);
		--header-container-max: var(--container-xl);
		--header-container-padding: var(--space-md);
		--header-padding-block: var(--space-md);
		--header-z: var(--z-sticky);
	}
	@media (min-width:768px) {
		.site-header { --header-container-padding: var(--space-lg); }
	}
	.site-header {
		align-items: center;
		background: var(--header-bg);
		border-block-end: 1px solid var(--header-border);
		display: flex;
		gap: var(--space-md);
		inset-block-start: 0;
		justify-content: space-between;
		padding-block: var(--header-padding-block);
		padding-inline: max(var(--header-container-padding),(100% - var(--header-container-max))/2 + var(--header-container-padding));
		position: sticky;
		z-index: var(--header-z);
	}


/* 3.1.2 Logo ----------------------------------------------------------------------------------- */
	.logo {
		--logo-color: var(--text-heading);
		--logo-size: var(--text-xl);
		--logo-weight: var(--font-bold);
		align-items: center;
		color: var(--logo-color);
		display: inline-flex;
		font-size: var(--logo-size);
		font-weight: var(--logo-weight);
		letter-spacing: -0.02em;
		text-decoration: none;
	}
		.logo:hover { color: var(--action-primary); }


/* 3.1.3 Nav ------------------------------------------------------------------------------------ */
	.nav { --nav-gap: var(--space-lg); }
		.nav__list {
			align-items: center;
			display: flex;
			gap: var(--nav-gap);
			list-style: none;
		}
		.nav__menu-toggle {
			align-items: center;
			background: none;
			border: none;
			color: var(--text-body);
			cursor: pointer;
			display: none;
			justify-content: center;
			padding: var(--space-xs);
		}
	@media (min-width:768px) {
			.nav__list { display: flex; }
			.nav__menu-toggle { display: none; }
	}
	@media (max-width:767px) {
			.nav__menu-toggle { display: flex; }
			.nav__list {
				background: var(--surface-bg);
				border-block-end: 1px solid var(--surface-border);
				display: none;
				flex-direction: column;
				gap: var(--space-md);
				inset-block-start: 100%;
				inset-inline: 0;
				padding: var(--space-md);
				position: absolute;
				z-index: var(--z-dropdown);
			}
				.nav__list[data-state=open] { display: flex; }
	}


/* 3.1.4 Nav Link ------------------------------------------------------------------------------- */
	.nav-link {
		--nav-link-active-color: var(--action-primary);
		--nav-link-color: var(--text-body);
		--nav-link-hover-color: var(--action-primary);
		--nav-link-size: var(--text-base);
		--nav-link-weight: var(--font-medium);
		color: var(--nav-link-color);
		font-size: var(--nav-link-size);
		font-weight: var(--nav-link-weight);
		position: relative;
		text-decoration: none;
		transition: color var(--duration-fast) var(--ease-default);
	}
		.nav-link:hover { color: var(--nav-link-hover-color); }
		.nav-link::after {
			background: var(--nav-link-active-color);
			block-size: 2px;
			content: "";
			inset-block-end: -4px;
			inset-inline: 0;
			opacity: 0;
			position: absolute;
			transition: transform var(--duration-fast) var(--ease-out),
			            opacity var(--duration-fast) var(--ease-out);
		}
		.nav-link[data-state=active] { --nav-link-color: var(--nav-link-active-color); }
		.nav-link[data-state=active]::after {
			opacity: 1;
			view-transition-name: nav-indicator;
		}


/*  3.2 Footer
   ---------------------------------------------------------------------------------------------------- */


/* 3.2.1 Site Footer ---------------------------------------------------------------------------- */
	.site-footer {
		--footer-bg: var(--surface-bg-subtle);
		--footer-color: var(--text-muted);
		--footer-container-max: var(--container-xl);
		--footer-container-padding: var(--space-md);
		--footer-padding-block: var(--space-xl);
	}
	@media (min-width:768px) {
		.site-footer { --footer-container-padding: var(--space-lg); }
	}
	.site-footer {
		align-items: center;
		background: var(--footer-bg);
		border-block-start: 1px solid var(--surface-border);
		color: var(--footer-color);
		display: flex;
		flex-wrap: wrap;
		font-size: var(--text-sm);
		gap: var(--space-md);
		justify-content: space-between;
		padding-block: var(--footer-padding-block);
		padding-inline: max(var(--footer-container-padding),(100% - var(--footer-container-max))/2 + var(--footer-container-padding));
	}
		.site-footer__social {
			display: flex;
			gap: var(--space-md);
			list-style: none;
		}
		.site-footer__social-link {
			color: var(--footer-color);
			text-decoration: none;
			transition: color var(--duration-fast) var(--ease-default);
		}
			.site-footer__social-link:hover { color: var(--text-heading); }


/*  3.3 Layout
   ---------------------------------------------------------------------------------------------------- */


/* 3.3.1 Container ------------------------------------------------------------------------------ */
	.container {
		--container-max: var(--container-xl);
		--container-padding: var(--space-md);
		margin-inline: auto;
		max-inline-size: var(--container-max);
		padding-inline: var(--container-padding);
	}
		.container[data-size=sm] { --container-max: var(--container-sm); }
		.container[data-size=md] { --container-max: var(--container-md); }
		.container[data-size=lg] { --container-max: var(--container-lg); }
		.container[data-size=xl] { --container-max: var(--container-xl); }
		.container[data-size=max] { --container-max: var(--container-max); }


/* 3.3.2 Section Heading ------------------------------------------------------------------------ */
	.section-heading {
		--section-heading-color: var(--text-heading);
		--section-heading-spacing: var(--space-lg);
		color: var(--section-heading-color);
	}
		.section-heading:not(:has(+.section-heading__subtitle)) { margin-block-end: var(--section-heading-spacing); }
		.section-heading__subtitle {
			color: var(--text-muted);
			font-size: var(--text-lg);
			margin-block-end: var(--section-heading-spacing, var(--space-lg));
			margin-block-start: var(--space-xs);
		}


/*  3.4 Hero
   ---------------------------------------------------------------------------------------------------- */


/* 3.4.1 Hero Content --------------------------------------------------------------------------- */
	.hero-content {
		--hero-max-width: 42rem;
		--hero-padding-block-end: var(--space-4xl);
		--hero-padding-block-start: 8.1875rem;
		max-inline-size: var(--hero-max-width);
		padding-block-end: var(--hero-padding-block-end);
		padding-block-start: var(--hero-padding-block-start);
	}
		.hero-content__tagline {
			color: var(--action-primary);
			font-size: var(--text-lg);
			font-weight: var(--font-medium);
			margin-block-end: var(--space-sm);
		}
		.hero-content__name { margin-block-end: var(--space-md); }
		.hero-content__bio {
			color: var(--text-muted);
			font-size: var(--text-lg);
			line-height: var(--leading-relaxed);
			margin-block-end: var(--space-xl);
			text-wrap: balance;
		}
		.hero-content__actions {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-sm);
		}
	@media (min-width:768px) {
		.hero-content {
			--hero-padding-block-end: var(--space-32);
			--hero-padding-block-start: 9.125rem;
		}
	}


/*  3.5 Projects
   ---------------------------------------------------------------------------------------------------- */


/* 3.5.1 Project Grid --------------------------------------------------------------------------- */
	.project-grid {
		--grid-gap: var(--space-lg);
		--grid-min: 20rem;
		display: grid;
		gap: var(--grid-gap);
		grid-auto-rows: subgrid;
		grid-template-columns: repeat(auto-fill,minmax(min(var(--grid-min),100%),1fr));
		list-style: none;
		padding: 0;
	}
	.project-grid>li {
		display: grid;
		grid-row: span 6;
		grid-template-rows: subgrid;
		row-gap: 0;
	}


/* 3.5.2 Project Detail ------------------------------------------------------------------------- */
	.project-detail {
		--_device-offset: 0.33;
		--_pad: var(--space-md);
		--project-detail-summary-size: var(--text-base);
	}
	@media (min-width:768px) {
		.project-detail {
			--_pad: var(--space-lg);
			--project-detail-summary-size: var(--text-lg);
		}
	}
	.project-detail {
		display: grid;
		grid-template: 
			"header  header  header" auto
			"figure  figure  figure" auto
			"summary .       sidebar" auto
			"body    .       sidebar" 1fr
			"footer  .       sidebar" auto
			/ 1fr var(--space-2xl) 0.6129fr;
		padding-block-end: var(--space-4xl);
		padding-block-start: var(--space-2xl);
		padding-inline: max(var(--_pad),(100% - var(--container-xl))/2);
	}
		.project-detail__header { grid-area: header; }
		.project-detail__figure {
			grid-area: figure;
			margin-block: 0;
			margin-inline: calc(max(var(--_pad),(100% - var(--container-xl))/2)*-1);
		}
		.project-detail__picture {
			display: block;
			margin-inline: auto;
			max-inline-size: var(--container-xl);
		}
		.project-detail__image {
			border-radius: var(--radius-xl);
			box-shadow: var(--shadow-md);
			display: block;
			height: auto;
			transition: border-radius var(--duration-slow) var(--ease-out);
		}
		.project-detail__sidebar {
			align-self: start;
			display: flex;
			flex-direction: column;
			gap: var(--space-lg);
			grid-area: sidebar;
			margin-block-start: calc(min(100vw,var(--container-xl))*9/16*var(--_device-offset)*-1);
			padding-inline-end: 4%;
			position: sticky;
			top: 6.5rem;
			transition: padding-inline-end var(--duration-slow) var(--ease-out);
		}
		.project-detail__body {
			grid-area: body;
			margin-block-end: var(--space-2xl);
		}
		.project-detail__body p { max-width: unset; }
		.project-detail__body h2,
		.project-detail__body h3 {
			overflow: visible;
			position: relative;
		}
		.project-detail__body h2 {
			color: var(--text-heading);
			font-size: var(--text-2xl);
			margin-block: var(--space-xl) var(--space-sm);
			scroll-margin-top: 6rem;
		}
		.project-detail__body h3 {
			color: var(--text-heading);
			font-size: var(--text-xl);
			margin-block: var(--space-lg) var(--space-xs);
			scroll-margin-top: 6rem;
		}
		.project-detail__body h2>a[href^="#"],
		.project-detail__body h3>a[href^="#"] {
			color: inherit;
			text-decoration: none;
		}
			.project-detail__body h2>a[href^="#"]::before,
			.project-detail__body h3>a[href^="#"]::before {
				color: var(--color-primary);
				content: "#";
				font-weight: var(--font-normal);
				opacity: 0;
				pointer-events: none;
				position: absolute;
				right: calc(100% + 0.4em);
				transition: opacity var(--duration-fast) ease;
				user-select: none;
			}
			.project-detail__body h2>a[href^="#"]:hover::before,
			.project-detail__body h2>a[href^="#"]:focus-visible::before,
			.project-detail__body h3>a[href^="#"]:hover::before,
			.project-detail__body h3>a[href^="#"]:focus-visible::before {
				opacity: 1;
				pointer-events: auto;
			}
			.project-detail__body h2:target>a[href^="#"]::before,
			.project-detail__body h3:target>a[href^="#"]::before { opacity: 0.4; }
		.project-detail__body p {
			color: var(--text-body);
			line-height: var(--leading-relaxed);
			margin-block-end: var(--space-md);
		}
		.project-detail__body ul,
		.project-detail__body ol {
			margin-block-end: var(--space-md);
			padding-inline-start: var(--space-lg);
		}
		.project-detail__body ul li,
		.project-detail__body ol li {
			color: var(--text-body);
			line-height: var(--leading-relaxed);
			margin-block-end: var(--space-xs);
		}
		.project-detail__body strong { color: var(--text-heading); }
		.project-detail__footer {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-sm);
			grid-area: footer;
			margin-block-start: var(--space-md);
		}
		.project-detail__figcaption {
			color: var(--text-muted);
			font-size: var(--project-detail-summary-size);
			grid-area: summary;
			line-height: var(--leading-relaxed);
			padding-block-start: var(--space-lg);
		}
		.project-detail__device {
			border-radius: var(--radius-lg);
			box-shadow: var(--shadow-xl);
			overflow: hidden;
		}
		.project-detail__device img {
			border-radius: var(--radius-lg);
			display: block;
			height: 100%;
			object-fit: cover;
			width: 100%;
		}
			.project-detail__device--tablet {
				aspect-ratio: 4/3;
				box-shadow: none;
				opacity: 0;
				overflow: visible;
				position: relative;
				width: 100%;
			}
			.project-detail__device--tablet>img { box-shadow: var(--shadow-xl); }
			.project-detail__device--mobile {
				aspect-ratio: 9/19;
				bottom: -12%;
				opacity: 0;
				overflow: hidden;
				position: absolute;
				right: -8%;
				width: 30%;
			}
	@keyframes device-slide-in-right {
		from {
			opacity:0;
			transform:translateX(24px);
		}
		to {
			opacity:1;
			transform:translateX(0);
		}
	}
			.project-detail__device--tablet.is-entering { animation: device-slide-in-right 380ms var(--ease-out) 180ms both; }
			.project-detail__device--mobile.is-entering { animation: device-slide-in-right 320ms var(--ease-out) 360ms both; }
		.project-detail__toc {
			opacity: 0;
			padding-block-start: var(--space-lg);
			padding-inline-start: var(--space-xl);
			transition: opacity 600ms ease;
		}
		.project-detail__toc.is-visible { opacity: 1; }
		.project-detail__toc-list {
			display: flex;
			flex-direction: column;
			gap: var(--space-xs);
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.project-detail__toc-link {
			border-inline-start: 2px solid transparent;
			color: var(--text-muted);
			display: block;
			font-size: var(--text-sm);
			line-height: var(--leading-snug);
			padding-inline-start: var(--space-sm);
			text-decoration: none;
			transition: color var(--duration-fast) ease,
			            border-color var(--duration-fast) ease;
		}
			.project-detail__toc-link:hover { color: var(--text-heading); }
		.project-detail__toc-link.is-active {
			border-inline-start-color: var(--color-primary);
			color: var(--text-heading);
		}
	@media (max-width:1023px) {
		.project-detail {
			--_device-offset: 0.20;
			grid-template: 
				"header  header  header" auto
				"figure  figure  figure" auto
				"summary .       sidebar" auto
				"body    body    body" auto
				"footer  footer  footer" auto
				/ 1fr var(--space-lg) 0.6129fr;
		}
			.project-detail__figcaption { grid-area: summary; }
			.project-detail__sidebar {
				align-self: start;
				grid-area: sidebar;
				margin-block-start: calc(min(100vw,var(--container-xl))*9/16*var(--_device-offset)*-1);
				position: static;
			}
			.project-detail__body { grid-area: body; }
			.project-detail__footer { grid-area: footer; }
			.project-detail__toc { display: none; }
	}
	@media (max-width:1200px) {
			.project-detail__image { border-radius: 0; }
			.project-detail__sidebar { padding-inline-end: 8%; }
	}
	@media (prefers-reduced-motion:reduce) {
			.project-detail__device { display: none; }
	}
		.project-detail__toc-drawer { display: none; }
	@media (max-width:1023px) {
			.project-detail__toc-drawer {
				bottom: 0;
				display: block;
				inset-inline: 0;
				position: fixed;
				z-index: var(--z-sticky);
			}
	}
		.project-detail__toc-bar {
			align-items: center;
			background: var(--surface-raised);
			border: none;
			border-block-start: 1px solid var(--surface-border);
			color: var(--text-body);
			cursor: pointer;
			display: flex;
			font-size: var(--text-sm);
			gap: var(--space-sm);
			padding: var(--space-sm) var(--space-md);
			padding-block-end: max(var(--space-sm),env(safe-area-inset-bottom));
			text-align: start;
			width: 100%;
		}
			.project-detail__toc-bar:hover { background: var(--surface-bg); }
		.project-detail__toc-bar-label {
			color: var(--text-heading);
			font-weight: var(--font-semibold);
			white-space: nowrap;
		}
		.project-detail__toc-bar-arrow {
			color: var(--text-muted);
			flex-shrink: 0;
			transition: rotate var(--duration-fast) var(--ease-default);
		}
			[data-state=open] .project-detail__toc-bar-arrow { rotate: 90deg; }
		.project-detail__toc-bar-heading {
			color: var(--text-muted);
			flex: 1;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.project-detail__toc-drawer-panel {
			background: var(--surface-bg);
			border-block-start: 1px solid var(--surface-border);
			max-block-size: 0;
			overflow: hidden;
			transition: max-block-size var(--duration-normal) var(--ease-out);
		}
			[data-state=open] .project-detail__toc-drawer-panel {
				max-block-size: 50vh;
				overflow-y: auto;
			}
		.project-detail__toc-drawer-panel-inner { padding: var(--space-md); }
		.project-detail__toc-drawer-title {
			color: var(--text-muted);
			font-size: var(--text-xs);
			font-weight: var(--font-semibold);
			letter-spacing: 0.08em;
			margin-block-end: var(--space-sm);
			text-transform: uppercase;
		}


/* 3.5.3 Project Card --------------------------------------------------------------------------- */
	.project-card {
		--card-bg: var(--surface-bg);
		--card-border: var(--surface-border);
		--card-padding: var(--space-lg);
		--card-radius: var(--radius-lg);
		--card-shadow: var(--shadow-sm);
		--card-shadow-hover: var(--shadow-md);
		background: var(--card-bg);
		border: 1px solid var(--card-border);
		border-radius: var(--card-radius);
		box-shadow: var(--card-shadow);
		color: inherit;
		display: grid;
		grid-row: span 6;
		grid-template-rows: subgrid;
		overflow: hidden;
		position: relative;
		transition: box-shadow var(--duration-normal) var(--ease-default),
		            transform var(--duration-normal) var(--ease-default),
		            border-color var(--duration-normal) var(--ease-default);
	}
		.project-card:has(.project-card__link:hover) {
			border-color: var(--action-primary);
			box-shadow: var(--card-shadow-hover);
			transform: translateY(-1px);
		}
		.project-card__title {
			color: var(--text-heading);
			font-size: var(--text-xl);
			font-weight: var(--font-semibold);
			margin: 0;
			padding-block-end: var(--space-xs);
			padding-block-start: var(--card-padding);
			padding-inline: var(--card-padding);
		}
		.project-card__meta {
			align-items: center;
			color: var(--text-muted);
			display: flex;
			font-size: var(--text-xs);
			gap: var(--space-xs);
			margin: 0;
			padding-block: var(--space-xs);
			padding-inline: var(--card-padding);
		}
			.project-card__meta>span+span::before {
				content: "·";
				margin-inline-end: var(--space-sm);
			}
		.project-card__link {
			color: inherit;
			text-decoration: none;
		}
			.project-card__link::after {
				content: "";
				inset: 0;
				position: absolute;
			}
		.project-card__summary {
			align-self: start;
			color: var(--text-muted);
			font-size: var(--text-sm);
			line-height: var(--leading-relaxed);
			margin: 0;
			padding-block-end: 0;
			padding-block-start: var(--space-xs);
			padding-inline: var(--card-padding);
		}
		.project-card__image {
			align-self: stretch;
			aspect-ratio: 16/9;
			background: var(--surface-raised);
			display: block;
			object-fit: cover;
			width: 100%;
		}
		.project-card__tags {
			--badge-border: 1px solid transparent;
			--badge-offset: var(--space-sm);
			--badge-padding-y: var(--space-xs);
			align-self: start;
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-xs);
			list-style: none;
			margin: 0;
			padding-block-end: var(--space-xs);
			padding-block-start: var(--space-md);
			padding-inline-end: var(--card-padding);
			padding-inline-start: calc(var(--card-padding) - var(--badge-offset));
		}
		.project-card__cta {
			align-self: end;
			color: var(--action-primary);
			display: block;
			font-size: var(--text-sm);
			font-weight: var(--font-medium);
			padding-block-end: var(--card-padding);
			padding-inline: var(--card-padding);
			text-align: end;
			transition: color var(--duration-fast) var(--ease-default);
		}
		.project-card:has(.project-card__link:hover) .project-card__cta { color: var(--action-primary-hover); }


/* 3.5.4 Post Header ---------------------------------------------------------------------------- */
	.post-header { --post-header-summary-size: var(--text-base); }
	@media (min-width:768px) {
		.post-header { --post-header-summary-size: var(--text-lg); }
	}
		.post-header__back {
			justify-self: start;
			margin-block-end: var(--space-lg);
		}
		.post-header__title-row {
			align-items: baseline;
			display: flex;
			gap: var(--space-md);
			justify-content: flex-start;
		}
		.post-header__title { margin-block-end: var(--space-sm); }
		.post-header__year {
			color: var(--text-muted);
			flex-shrink: 0;
			font-size: var(--text-sm);
			white-space: nowrap;
		}
		.post-header__meta {
			align-items: center;
			color: var(--text-muted);
			display: flex;
			flex-wrap: wrap;
			font-size: var(--text-sm);
			gap: var(--space-sm);
			margin-block: var(--space-xs) var(--space-sm);
		}
			.post-header__meta>span+span::before {
				content: "·";
				margin-inline-end: var(--space-sm);
			}
		.post-header__tags {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-xs);
			list-style: none;
			margin-block-end: var(--space-md);
			padding: 0;
		}
		.post-header__summary {
			color: var(--text-muted);
			font-size: var(--post-header-summary-size);
			line-height: var(--leading-relaxed);
		}


/* 3.5.5 Skill Badge ---------------------------------------------------------------------------- */
	.skill-badge {
		--badge-bg: var(--surface-raised);
		--badge-border: none;
		--badge-color: var(--text-body);
		--badge-padding-x: var(--space-sm);
		--badge-padding-y: var(--space-0-5);
		--badge-radius: var(--radius-md);
		--badge-size: var(--text-sm);
		background: var(--badge-bg);
		border: var(--badge-border);
		border-radius: var(--badge-radius);
		color: var(--badge-color);
		display: inline-block;
		font-size: var(--badge-size);
		font-weight: var(--font-medium);
		line-height: var(--leading-tight);
		padding: var(--badge-padding-y) var(--badge-padding-x);
		white-space: nowrap;
	}


/*  3.6 Resume
   ---------------------------------------------------------------------------------------------------- */


/* 3.6.1 Resume View ---------------------------------------------------------------------------- */
	.resume-view {
		--view-gap: var(--space-2xl);
		--view-padding-block: var(--space-2xl);
		padding-block: var(--view-padding-block);
	}
		.resume-view__header { margin-block-end: var(--view-gap); }
		.resume-view__summary {
			color: var(--text-muted);
			font-size: var(--text-lg);
			line-height: var(--leading-relaxed);
			max-inline-size: 55ch;
		}
		.resume-view__download { margin-block-start: var(--space-md); }
		.resume-view__sections {
			display: flex;
			flex-direction: column;
			gap: var(--view-gap);
		}
		.resume-view__skills { margin-block-start: var(--view-gap); }
		.resume-view__skill-groups {
			margin: 0;
			padding: 0;
		}
		.resume-view__skill-label {
			color: var(--text-heading);
			font-size: var(--text-sm);
			font-weight: var(--font-semibold);
			margin-block-end: var(--space-xs);
			margin-block-start: var(--space-md);
		}
		.resume-view__skill-list {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-xs);
			margin: 0;
		}


/* 3.6.2 Resume Section ------------------------------------------------------------------------- */
	.resume-section { --section-gap: var(--space-lg); }
	.resume-section .resume-entry+.resume-entry { margin-block-start: var(--section-gap); }


/* 3.6.3 Resume Entry --------------------------------------------------------------------------- */
	.resume-entry {
		--entry-border: var(--action-primary);
		--entry-padding-inline-start: var(--space-md);
		border-inline-start: 3px solid var(--entry-border);
		padding-inline-start: var(--entry-padding-inline-start);
	}
		.resume-entry__header { margin-block-end: var(--space-xs); }
		.resume-entry__role {
			color: var(--text-heading);
			font-size: var(--text-lg);
			font-weight: var(--font-semibold);
		}
		.resume-entry__company {
			color: var(--text-muted);
			font-size: var(--text-base);
		}
		.resume-entry__meta {
			color: var(--text-muted);
			display: flex;
			flex-wrap: wrap;
			font-size: var(--text-sm);
			gap: var(--space-sm);
			margin-block-end: var(--space-sm);
		}
			.resume-entry__meta:has(+.resume-entry__note) { margin-block-end: var(--space-xs); }
		.resume-entry__note {
			color: var(--text-muted);
			font-size: var(--text-sm);
			font-style: italic;
			margin-block-end: var(--space-sm);
		}
		.resume-entry__highlights {
			color: var(--text-body);
			font-size: var(--text-sm);
			line-height: var(--leading-relaxed);
			list-style: disc;
			padding-inline-start: var(--space-md);
		}
		.resume-entry__highlights li+li { margin-block-start: var(--space-xs); }


/*  3.7 Contact
   ---------------------------------------------------------------------------------------------------- */


/* 3.7.1 Contact Form --------------------------------------------------------------------------- */
	.contact-form {
		--form-gap: var(--space-md);
		display: grid;
		gap: var(--form-gap);
		grid-template-columns: 1fr;
	}
	@media (min-width:768px) {
		.contact-form { grid-template-columns: 1fr 1fr; }
	}
	@media (min-width:768px) {
			.contact-form .form-field:has(textarea),
			.contact-form>.button:last-child { grid-column: 1/-1; }
	}
	@media (min-width:768px) {
			.contact-form__status { grid-column: 1/-1; }
	}
		.contact-form__status {
			border-radius: var(--radius-md);
			display: none;
			font-size: var(--text-sm);
			padding: var(--space-sm) var(--space-md);
		}
			.contact-form__status[data-state=success] {
				background: color-mix(in srgb,
				            var(--color-success) 10%,
				            transparent);
				border: 1px solid var(--color-success);
				color: var(--color-success);
				display: block;
			}
			.contact-form__status[data-state=error] {
				background: color-mix(in srgb,
				            var(--color-error) 10%,
				            transparent);
				border: 1px solid var(--color-error);
				color: var(--color-error);
				display: block;
			}


/* 3.7.2 Form Field ----------------------------------------------------------------------------- */
	.form-field {
		--field-bg: var(--surface-bg);
		--field-border: var(--surface-border);
		--field-font-size: var(--text-base);
		--field-gap: var(--space-xs);
		--field-padding: var(--space-sm) var(--space-md);
		--field-radius: var(--radius-md);
		display: flex;
		flex-direction: column;
		gap: var(--field-gap);
	}
		.form-field__label {
			color: var(--text-heading);
			font-size: var(--text-sm);
			font-weight: var(--font-medium);
		}
		.form-field__input,
		.form-field__textarea {
			background: var(--field-bg);
			border: 1px solid var(--field-border);
			border-radius: var(--field-radius);
			color: var(--text-body);
			font-size: var(--field-font-size);
			padding: var(--field-padding);
			transition: border-color var(--duration-fast) var(--ease-default);
		}
			.form-field__input:focus,
			.form-field__textarea:focus {
				border-color: var(--focus-ring);
				box-shadow: 0 0 0 3px color-mix(in srgb,
				            var(--focus-ring) 20%,
				            transparent);
				outline: none;
			}
			.form-field__input::placeholder,
			.form-field__textarea::placeholder { color: var(--text-muted); }
		.form-field__textarea {
			min-block-size: 8rem;
			resize: vertical;
		}


/*  3.8 Shared
   ---------------------------------------------------------------------------------------------------- */


/* 3.8.1 Button --------------------------------------------------------------------------------- */
	.button {
		--button-bg: var(--action-primary);
		--button-color: var(--action-primary-text);
		--button-font-size: var(--text-base);
		--button-font-weight: var(--font-medium);
		--button-padding-x: var(--space-md);
		--button-padding-y: var(--space-sm);
		--button-radius: var(--radius-md);
		align-items: center;
		background: var(--button-bg);
		border: 1px solid transparent;
		border-radius: var(--button-radius);
		color: var(--button-color);
		cursor: pointer;
		display: inline-flex;
		font-size: var(--button-font-size);
		font-weight: var(--button-font-weight);
		gap: var(--space-xs);
		justify-content: center;
		line-height: var(--leading-tight);
		padding: var(--button-padding-y) var(--button-padding-x);
		text-decoration: none;
		transition: background-color var(--duration-fast) var(--ease-default),
		            color var(--duration-fast) var(--ease-default),
		            border-color var(--duration-fast) var(--ease-default);
	}
		.button:hover,
		.button:hover:visited {
			--button-bg: var(--action-primary-hover);
			color: var(--button-color);
		}
		.button:focus-visible {
			outline: 2px solid var(--focus-ring);
			outline-offset: 2px;
		}
		.button[data-variant=secondary] {
			--button-bg: var(--action-secondary);
			--button-color: var(--action-secondary-text);
		}
		.button[data-variant=secondary]:hover {
			--button-bg: var(--surface-border);
			color: var(--button-color);
		}
		.button[data-variant=ghost] {
			--button-bg: transparent;
			--button-color: var(--text-body);
		}
		.button[data-variant=ghost]:hover {
			--button-bg: var(--surface-raised);
			color: var(--button-color);
		}
		.button[data-size=sm] {
			--button-font-size: var(--text-sm);
			--button-padding-x: var(--space-sm);
			--button-padding-y: var(--space-xs);
		}
		.button[data-size=lg] {
			--button-font-size: var(--text-lg);
			--button-padding-x: var(--space-xl);
			--button-padding-y: var(--space-md);
		}


/* 3.8.2 Icon ----------------------------------------------------------------------------------- */
	.icon {
		--icon-color: currentColor;
		--icon-size: 1.25em;
		color: var(--icon-color);
		display: inline-block;
		flex-shrink: 0;
		height: var(--icon-size);
		width: var(--icon-size);
	}
	.icon svg {
		height: 100%;
		width: 100%;
	}
		.icon[data-size=sm] { --icon-size: 1em; }
		.icon[data-size=lg] { --icon-size: 1.5em; }
		.icon[data-size=xl] { --icon-size: 2em; }