/* ── Reset & Base ── */
*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	body {
		font-family: system-ui, -apple-system, sans-serif;
		font-size: 14px;
		color: #555;
		background: #f5f5f5;
		line-height: 1.5;
	}

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

	/* ── Wireframe Utilities ── */
	.placeholder-box {
		background: #e0e0e0;
		border: 2px dashed #aaa;
		border-radius: 4px;
		color: #888;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 0.75rem 1rem;
	}

	.wireframe-label {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #bbb;
		margin-bottom: 0.5rem;
	}

	/* ── Layout ── */
	.container {
		max-width: 1100px;
		margin: 0 auto;
		padding: 0 1.5rem;
	}

	.section {
		padding: 4rem 0;
	}

	.section-title {
		font-size: 1.25rem;
		font-weight: 700;
		margin-bottom: 2rem;
		max-width: 220px;
	}

	/* ── Header ── */
	.site-header {
		background: #fff;
		border-bottom: 2px dashed #ccc;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.header-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 64px;
	}

	.logo {
		font-weight: 700;
		min-width: 120px;
		padding: 0.5rem 1rem;
	}

	.main-nav {
		display: flex;
		gap: 0.75rem;
	}

	.nav-link {
		padding: 0.4rem 0.9rem;
		font-size: 13px;
	}

	.nav-link--active {
		background: #d5d5d5;
		border-color: #999;
		color: #444;
		font-weight: 600;
	}

	/* ── Hero ── */
	.hero {
		background: #fff;
		padding: 5rem 0;
		border-bottom: 2px dashed #ddd;
	}

	.hero-inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
		align-items: center;
	}

	.hero-headline {
		font-size: 2rem;
		font-weight: 700;
		margin-bottom: 0.75rem;
		min-height: 56px;
		justify-content: flex-start;
	}

	.hero-subheadline {
		font-size: 1.1rem;
		margin-bottom: 1rem;
		min-height: 40px;
		justify-content: flex-start;
	}

	.hero-bio {
		margin-bottom: 1.5rem;
		min-height: 60px;
		justify-content: flex-start;
		text-align: left;
	}

	.hero-actions {
		display: flex;
		gap: 0.75rem;
	}

	.hero-image {
		aspect-ratio: 1;
		max-width: 360px;
		margin: 0 auto;
		font-size: 1rem;
	}

	/* ── About ── */
	.about {
		background: #fafafa;
	}

	.about-grid {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 2rem;
	}

	.about-text {
		min-height: 160px;
		justify-content: flex-start;
		text-align: left;
		align-items: flex-start;
	}

	.about-details {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.detail-card {
		min-height: 48px;
	}

	/* ── Experience ── */
	.experience {
		background: #fff;
	}

	.experience-list {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}

	.experience-card {
		border: 2px dashed #ccc;
		border-radius: 6px;
		padding: 1.25rem;
		background: #fafafa;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.experience-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		flex-wrap: wrap;
	}

	.experience-role {
		font-weight: 700;
		justify-content: flex-start;
		border: none;
		background: transparent;
		padding: 0;
	}

	.experience-date {
		font-size: 12px;
		white-space: nowrap;
	}

	.experience-company {
		font-size: 13px;
		font-weight: 600;
		justify-content: flex-start;
		border: none;
		background: transparent;
		padding: 0;
	}

	.experience-desc {
		font-size: 13px;
		min-height: 48px;
		justify-content: flex-start;
		text-align: left;
		align-items: flex-start;
	}

	/* ── Page Header ── */
	.page-header {
		background: #fff;
		padding: 3.5rem 0 2rem;
		border-bottom: 2px dashed #ddd;
	}

	.page-title {
		font-size: 1.75rem;
		font-weight: 700;
		margin-bottom: 0.75rem;
		justify-content: flex-start;
		max-width: 320px;
	}

	.page-intro {
		max-width: 560px;
		justify-content: flex-start;
		text-align: left;
		align-items: flex-start;
		min-height: 48px;
	}

	.section-cta {
		display: flex;
		justify-content: center;
		margin-top: 2rem;
	}

	/* ── Projects ── */
	.projects {
		background: #fff;
	}

	.project-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}

	.project-grid--full {
		grid-template-columns: repeat(2, 1fr);
	}

	.project-card {
		border: 2px dashed #ccc;
		border-radius: 6px;
		overflow: hidden;
		background: #fafafa;
	}

	.project-image {
		aspect-ratio: 16 / 9;
		border: none;
		border-bottom: 2px dashed #ccc;
		border-radius: 0;
	}

	.project-body {
		padding: 1rem;
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}

	.project-title {
		font-weight: 700;
		justify-content: flex-start;
	}

	.project-desc {
		font-size: 13px;
		min-height: 48px;
		justify-content: flex-start;
		text-align: left;
		align-items: flex-start;
	}

	.project-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.tag {
		font-size: 11px;
		padding: 0.25rem 0.6rem;
	}

	.project-links {
		display: flex;
		gap: 0.5rem;
		margin-top: 0.25rem;
	}

	.link {
		font-size: 12px;
		padding: 0.35rem 0.75rem;
	}

	/* ── Skills ── */
	.skills {
		background: #fafafa;
	}

	.skills-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}

	.skill-category {
		font-weight: 700;
		margin-bottom: 0.75rem;
	}

	.skill-items {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.skill {
		font-size: 12px;
		padding: 0.35rem 0.75rem;
	}

	/* ── Contact ── */
	.contact {
		background: #fff;
	}

	.contact-grid {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 2rem;
	}

	.contact-info {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.contact-item {
		min-height: 44px;
	}

	.contact-section-label {
		font-weight: 700;
		font-size: 13px;
		justify-content: flex-start;
		border: none;
		background: transparent;
		padding: 0;
		margin-top: 0.5rem;
	}

	.contact-section-label:first-child {
		margin-top: 0;
	}

	.contact-form {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.form-field {
		min-height: 44px;
		justify-content: flex-start;
		text-align: left;
	}

	.form-field-lg {
		min-height: 120px;
		align-items: flex-start;
	}

	/* ── Footer ── */
	.site-footer {
		background: #eee;
		border-top: 2px dashed #ccc;
		padding: 1.5rem 0;
	}

	.footer-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.footer-text {
		font-size: 13px;
		border: none;
		background: transparent;
		padding: 0;
	}

	.footer-social {
		display: flex;
		gap: 0.5rem;
	}

	.social-icon {
		width: 36px;
		height: 36px;
		padding: 0;
		font-size: 11px;
	}

	/* ── Responsive ── */
	@media (max-width: 900px) {
		.hero-inner {
			grid-template-columns: 1fr;
			text-align: center;
		}

		.hero-content .placeholder-box {
			justify-content: center;
			text-align: center;
		}

		.hero-actions {
			justify-content: center;
		}

		.hero-image {
			max-width: 280px;
		}

		.about-grid {
			grid-template-columns: 1fr;
		}

		.project-grid,
		.project-grid--full {
			grid-template-columns: 1fr 1fr;
		}

		.skills-grid {
			grid-template-columns: 1fr 1fr;
		}

		.contact-grid {
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 600px) {
		.main-nav {
			display: none;
		}

		.project-grid,
		.project-grid--full,
		.skills-grid {
			grid-template-columns: 1fr;
		}

		.hero-actions {
			flex-direction: column;
			align-items: center;
		}

		.footer-inner {
			flex-direction: column;
			gap: 1rem;
		}
	}