:root {
	--xxs: 8rem;
	--xs: 16rem;
	--sm: 32rem;
	--md: 48rem;
	--lg: 64rem;
	--xl: 72rem;

	--size: 1rem;
	--size-0-2-5: calc(var(--size) / 4);
	--size-0-5: calc(var(--size) / 2);
	--size-1-2-5: calc(var(--size) * 1.25);
	--size-1-5: calc(var(--size) * 1.5);
	--size-2: calc(var(--size) * 2);
	--size-2-5: calc(var(--size) * 2.5);
	--size-3: calc(var(--size) * 3);
	--size-4: calc(var(--size) * 4);
	--size-5: calc(var(--size) * 5);
	--size-6: calc(var(--size) * 6);

	--text-max-width: 65ch;

	--heading-font: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto,
		sans-serif;
}

/* Resets */
*,
*::before,
*::after {
	box-sizing: border-box;
	/* outline: 1px solid red; */
}

:target {
	scroll-margin-block: 2rem; /* Firefox fallback */
	scroll-margin-block: 5rlh;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

html {
	font-family: system-ui, sans-serif;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	interpolate-size: allow-keywords;
}

body {
	margin: 0;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
button,
input,
label {
	line-height: 1.2;
	text-wrap: balance;
}

p,
li,
figcaption,
blockquote {
	max-width: var(--text-max-width);
	text-wrap: pretty;
}

.full-width {
	max-width: initial;
}

img,
picture {
	inline-size: 100%;
	height: auto;
	display: block;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: var(--size);
}

img[src$=".svg"] {
  inline-size: auto;
  height: 1em;   /* or whatever size works for icons */
  display: inline-block;
  font-style: normal;
}

input,
button,
textarea,
select {
	min-inline-size: 0;
	font-family: inherit;
	font-size: inherit;
}

input,
textarea {
	padding: var(--size-0-5);
}

textarea:not([rows]) {
	min-height: 10em;
}

.details summary::marker {
	content: '\002b';
}

.details[open] summary::marker {
	content: '\2212';
}

summary {
	cursor: pointer;
}

pre,
code,
kbd,
samp {
	font-family: monospace;
	font-size: 1em;
}

table {
	border-collapse: collapse;
}

td,
math,
time[datetime*=':'] {
	font-variant-numeric: tabular-nums lining-nums;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Utility Layouts */
.wrapper {
	min-height: 100dvh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	align-items: start;
}

.flow > * + * {
	--flow-margin-block-start: var(--size-1-5);

	margin-block-start: var(--flow-margin-block-start);
}

.outer {
	overflow: hidden;
}

.inner {
	--inner-width: var(--size-3);
	--inner-padding-block: var(--size-6);

	width: min(100% - var(--inner-width), var(--lg));
	margin-inline: auto;
	padding-block: var(--inner-padding-block);
}

.auto-fit {
	--auto-fit-min: var(--xs);
	--auto-fit-gap: var(--size-3);

	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(var(--auto-fit-min), 100%), 1fr)
	);
	align-items: start;
	gap: var(--auto-fit-gap);
}

.auto-fill {
	--auto-fill-min: var(--xs);
	--auto-fill-gap: var(--size-3);

	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(min(var(--auto-fill-min), 100%), 1fr)
	);
	align-items: start;
	gap: var(--auto-fill-gap);
}

.spread-apart {
	--spread-apart-gap: var(--size-1-5);

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--spread-apart-gap);
}

.float-left {
	--float-left-margin-inline-end: var(--size-3);
	--float-left-margin-block-end: var(--size-1-5);

	width: auto;
	float: inline-start;
	margin-inline-end: var(--float-left-margin-inline-end);
	margin-block-end: var(--float-left-margin-block-end);
}

.float-right {
	--float-right-margin-inline-end: var(--size-3);
	--float-right-margin-block-end: var(--size-1-5);

	width: auto;
	float: inline-end;
	margin-inline-end: var(--float-right-margin-inline-end);
	margin-block-end: var(--float-right-margin-block-end);
}

.image-shape-right {
	float: right;
	width: clamp(var(--xs), 40vw, var(--sm));
	background-position: center;
	background-size: cover;
	shape-margin: var(--size-2);
	/* shape-outside: url('/man.png'); */
}

/* Utility classes */
.container {
	container-type: inline-size;
}

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

.grid {
	display: grid;
}

.flex {
	display: flex;
}

.flex-wrap {
	flex-wrap: wrap;
}

.align-items-center {
	align-items: center;
}

.gap-0-2-5 {
	gap: var(--size-0-2-5);
}

.gap-0-5 {
	gap: var(--size-0-5);
}

.gap-1 {
	gap: var(--size);
}

.gap-1-5 {
	gap: var(--size-1-2-5);
}

.gap-2 {
	gap: var(--size-2);
}

.gap-3 {
	gap: var(--size-3);
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.linethrough {
	text-decoration: line-through;
}

.list-style-none {
	list-style: none;
}

.balance {
	text-wrap: balance;
}

.no-balance {
	text-wrap: initial;
}

.no-margin {
	margin: 0;
}

.no-padding {
	padding: 0;
}

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

.pretty {
	text-wrap: pretty;
}

.square {
	aspect-ratio: 1;
}

.landscape {
	aspect-ratio: 4/3;
}

.portrait {
	aspect-ratio: 3/4;
}

.widescreen {
	aspect-ratio: 16/9;
}

.ultrawide {
	aspect-ratio: 18/5;
}

.golden {
	aspect-ratio: 1.618/1;
}

.fit {
	object-fit: cover;
}

/* Skins & Typography */
body {
	color: var(--gray-800);
	line-height: 1.6;
}

h1,
.h1 {
	font-size: var(--size-2-5);
	font-weight: bold;
}

.h1,
h1,
.h2,
h2,
.h3,
h3 {
	color: var(--gray-800);
	font-family: var(--heading-font);
	font-weight: 750; /* slightly heavier if supported */
	letter-spacing: -0.015em; /* subtle tighten */
	line-height: 1.05;
	text-wrap: balance; /* nicer multi-line titles */
	margin: 0 0 0.5em;
}

.kicker {
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gray-500);
}

main h2 {
	margin-block-start: var(--size-2-5);
}

button,
.button {
	padding-block: var(--size-0-5);
	padding-inline: var(--size-1-5);
}

blockquote {
	margin: 0;
	padding-block: var(--size);
	padding-inline: var(--size-1-5);
	background-color: var(--gray-100);
}

.bg-white {
	background-color: white;
}

button,
.button {
	display: inline-flex;
	justify-content: center;
	margin-block-start: var(--size-0-2-5);
	padding: 0.6em 1.2em;
	appearance: none;
	background-color: var(--gray-900);
	color: white;
	border: none;
	font: inherit;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

button:hover,
.button:hover {
	background-color: var(--gray-900);
}

button:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--gray-900);
	outline-offset: 2px;
	background-color:var(--gray-800);
}

button:active,
.button:active {
	transform: translateY(1px);
}

/* Disabled state */
button:disabled,
.button[aria-disabled='true'] {
	background-color: var(--gray-600);
	color: var(--gray-300);
	cursor: not-allowed;
	opacity: 0.7;
}

a {
	color: var(--blue-700);
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

figure {
	border: 1px solid var(--gray-200);
	box-shadow: var(--shadow-4);

}

/* Header */
/* Hamburger: hidden on desktop */
.nav-toggle {
	display: none;
	margin: 0;
	padding: 0;
	background: none;
	line-height: 1;
	border: 0;
	cursor: pointer;
}

header {
	.outer {
		background-color: var(--gray-900);
		color: var(--gray-100);

		.inner {
			--inner-padding-block: var(--size-2);

			a {
				color: var(--gray-100);
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}

				&.active {
					font-weight: bold;
				}
			}
		}
	}

	.brand {
		font-size: var(--size-1-5);
		font-weight: bold;
	}

	.github-link {
		border-radius: 50%;
		
		&:hover {
			background-color: var(--blue-700);
		}
	}
	

	/* --------- Mobile ≤ 48rem --------- */
	@media (width <= 48rem) {
		/* show hamburger */
		.nav-toggle {
			display: grid;
			grid-column: 2;
			grid-row: 1;
			justify-self: end;
			align-items: center;
			gap: var(--size-0-5);
		}

		/* turn header inner into a 2-col grid (brand | button) */
		.inner.spread-apart {
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
		}

		/* nav sits on row 2 and is hidden by default */
		#site-nav {
			display: none;
			/* show stacked menu when expanded */
			&[aria-expanded='true'] {
				display: grid;
				grid-template-columns: 1fr;
			}
		}
	}
}

/* Footer */
footer {
	.outer {
		background-color: var(--gray-900);
		color: white;

		.inner {
			--inner-padding-block: var(--size-1-5);
		}
	}
}

/* Card */
.card {
	/* border: 1px solid var(--gray-100); */
	/* border: var(--border-size-2) solid var(--gray-200); */
	box-shadow: var(--shadow-1);

	img {
		min-height: var(--xs);
		object-fit: cover;
	}

	.card-text {
		padding-block: var(--size-3);
		padding-inline: var(--size-1-5);

		.card-title {
			display: flex;
			align-items: center;
			gap: var(--size-0-5);
		}

		.card-title .icon {
			display: grid;
			grid-template-columns: auto 1fr;
		}
	}
}

/* Hero */
.hero {
	.hero-grid {
		display: grid;
	}

	.hero-bg {
		grid-area: 1 / 1;
		height: 100%;
		object-fit: cover; /* crop to fill */
	}

	.hero-content {
		grid-area: 1 / 1;
		display: grid;
		place-content: center;
		padding: var(--size-2);
		color: var(--gray-100);
		text-align: center;
		background: rgba(0, 0, 0, 0.4); /* dark overlay for readability */

		.h1 {
			margin: 0;
			color: var(--gray-100);
			font-size: clamp(1.5rem, 5vw, 3rem);
		}

		.hero-sub {
			font-size: clamp(1rem, 3vw, 1.5rem);
			margin-top: 0.5rem;
		}
	}
}

/* Contact Form */
.contact-form {
	display: grid;
	gap: var(--size);
	max-width: var(--sm);

	label {
		display: grid;
		gap: var(--size-0-2-5);
	}

	input,
	textarea {
		padding: var(--size-0-5);
		border: 1px solid var(--gray-300);
	}
}

/* Sidebar layout */
.two-col {
	display: grid;
	grid-template-columns: 1fr min(18rem, 30%);
	gap: var(--size-3);
}

/* Stack on narrow screens */
@media (width <= 48rem) {
	.two-col {
		grid-template-columns: 1fr;
	}
	.sidebar {
		order: 2; /* put sidebar below content */
	}
}

/* Components */
.todo-list {
	menu {
		display: flex;
		flex-wrap: wrap;
		gap: var(--size-0-2-5);
		padding: 0;
		list-style: none;

		[aria-pressed='true'] {
			font-weight: bold;
		}
	}
}

[data-grid-toggle][aria-pressed="true"] + [data-card-grid] {
	gap: var(--size-1-5);

	.card {
		background-color: unset;
		border: unset;
		box-shadow: none;

		.card-image {
			display: none;
		}

		.card-text {
			padding: 0;
		}
	
		& :is(.card-excerpt, .card-cta) {
			display: none;
		}
	}
}

.gallery {
	margin-block: var(--size-3);
}