/* Bas Tieltjes Fotografie — minimal portfolio. */
@theme {
	--color-background: #0d0d0d;
	--color-neutral: #f4f4f2;
	--color-primary: #f4f4f2;
	--color-secondary: #a0a0a0;
	--font-display: "Manrope", sans-serif;
	--font-sans: "Manrope", sans-serif;
	--text-sm: .82rem;
	--text-base: 1rem;
	--text-lg: 1.2rem;
	--text-xl: 1.5rem;
	--text-2xl: 2rem;
	--text-3xl: 3rem;
	--text-4xl: 4.5rem;
}

@layer base {
	:root {
		color-scheme: dark;
		--page: #0d0d0d;
		--text: #f4f4f2;
		--muted: #9a9a96;
		--line: #292929;
		--container: min(92vw, 1500px);
		--font: "Manrope", sans-serif;
	}
	* { box-sizing: border-box; }
	html { scroll-behavior: smooth; background: var(--page); }
	body {
		margin: 0;
		background: var(--page);
		color: var(--text);
		font-family: var(--font);
		font-size: 16px;
		-webkit-font-smoothing: antialiased;
	}
	a { color: inherit; text-decoration: none; }
	img { max-width: 100%; height: auto; }
	figure { margin: 0; }
	button,
	input,
	select,
	textarea { font: inherit; }
}

@layer components {
	.site-container {
		width: var(--container);
		margin-inline: auto;
	}
	.skip-link {
		position: fixed;
		left: 1rem;
		top: -5rem;
		z-index: 100;
		padding: .75rem 1rem;
		background: #f4f4f2;
		color: #0d0d0d;
	}
	.skip-link:focus { top: 1rem; }

	.site-header {
		position: relative;
		z-index: 20;
		background: rgba(13,13,13,.96);
		border-bottom: 1px solid var(--line);
	}
	.header-inner {
		min-height: 86px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
	}
	.site-logo {
		display: flex;
		align-items: baseline;
		gap: .65rem;
		white-space: nowrap;
	}
	.site-logo strong {
		font-size: .96rem;
		font-weight: 700;
		letter-spacing: -.02em;
	}
	.site-logo span {
		color: var(--muted);
		font-size: .72rem;
		font-weight: 500;
	}
	.site-nav {
		display: flex;
		align-items: center;
		gap: clamp(1.2rem, 3vw, 3rem);
		font-size: .78rem;
		font-weight: 600;
	}
	.site-nav a,
	.footer-links a,
	.text-arrow {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: .3em;
		text-decoration-color: transparent;
		transition: text-decoration-color .2s ease, opacity .2s ease;
	}
	.site-nav a:hover,
	.footer-links a:hover,
	.text-arrow:hover { text-decoration-color: currentColor; }

	.home-intro {
		padding-block: clamp(5.5rem, 11vw, 11rem) clamp(4rem, 8vw, 7rem);
		display: grid;
		grid-template-columns: 1.35fr 1fr;
		gap: 8vw;
		align-items: end;
	}
	.home-intro h1 {
		margin: 0;
		font-size: clamp(3.8rem, 9vw, 9rem);
		font-weight: 600;
		line-height: .9;
		letter-spacing: -.075em;
	}
	.home-intro p {
		margin: 0 0 .4rem;
		max-width: 470px;
		font-size: clamp(1rem, 1.4vw, 1.25rem);
		line-height: 1.55;
	}

	.project-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(1rem, 2.2vw, 2.5rem);
		row-gap: clamp(3rem, 7vw, 7rem);
		padding-bottom: clamp(6rem, 11vw, 11rem);
	}
	.project-card { display: block; }
	.project-card figure {
		aspect-ratio: 3 / 2;
		overflow: hidden;
		background: #1a1a1a;
	}
	.project-card img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform .45s ease, opacity .25s ease;
	}
	.project-card:hover img { transform: scale(1.012); opacity: .94; }
	.project-info {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		padding-top: 1rem;
	}
	.project-info h2 {
		margin: 0;
		font-size: clamp(1rem, 1.4vw, 1.25rem);
		font-weight: 650;
		letter-spacing: -.025em;
	}
	.project-info p {
		margin: 0;
		color: var(--muted);
		font-size: .76rem;
	}

	.home-about {
		padding-block: clamp(4rem, 8vw, 8rem);
		border-top: 1px solid var(--line);
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 2rem;
	}
	.home-about p { margin: 0; color: var(--muted); }

	.page-intro {
		padding-block: clamp(5rem, 10vw, 10rem) clamp(3.5rem, 7vw, 7rem);
	}
	.page-intro h1 {
		margin: 0;
		max-width: 1200px;
		font-size: clamp(3.5rem, 8vw, 8rem);
		font-weight: 600;
		line-height: .92;
		letter-spacing: -.07em;
	}
	.page-intro > p:not(.page-label) {
		max-width: 650px;
		margin: 2rem 0 0;
		font-size: clamp(1rem, 1.4vw, 1.2rem);
		line-height: 1.6;
	}
	.page-label {
		margin: 0 0 1rem;
		color: var(--muted);
		font-size: .72rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .08em;
	}
	.project-intro {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 6vw;
		align-items: end;
	}
	.project-intro .page-label { grid-column: 1 / -1; }
	.project-intro > p:last-child {
		margin: 0 0 .6rem;
		justify-self: end;
	}

	.photo-grid {
		column-count: 3;
		column-gap: clamp(.5rem, 1vw, 1rem);
		padding-bottom: clamp(5rem, 9vw, 9rem);
	}
	.photo-grid figure {
		width: 100%;
		margin: 0 0 clamp(.5rem, 1vw, 1rem);
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		background: #181818;
	}
	.photo-grid img {
		display: block;
		width: 100%;
		height: auto;
	}
	.project-nav {
		display: flex;
		justify-content: space-between;
		gap: 2rem;
		padding-block: 2rem 6rem;
		border-top: 1px solid var(--line);
		font-size: .82rem;
		font-weight: 600;
	}
	.project-nav a:hover { opacity: .55; }

	.text-page {
		display: grid;
		grid-template-columns: 1fr 1.2fr;
		gap: 10vw;
		padding-bottom: clamp(7rem, 14vw, 14rem);
	}
	.text-lead p {
		margin: 0;
		font-size: clamp(1.8rem, 3.5vw, 4rem);
		font-weight: 550;
		line-height: 1.08;
		letter-spacing: -.045em;
	}
	.text-copy { max-width: 650px; }
	.text-copy p {
		margin: 0 0 1.5rem;
		font-size: 1.05rem;
		line-height: 1.75;
	}
	.text-arrow {
		display: inline-flex;
		gap: 1rem;
		margin-top: 1.5rem;
		font-size: .82rem;
		font-weight: 650;
	}

	.services-list { padding-bottom: clamp(5rem, 10vw, 10rem); }
	.services-list article {
		display: grid;
		grid-template-columns: 1fr 1.2fr;
		gap: 8vw;
		padding-block: 2rem;
		border-top: 1px solid var(--line);
	}
	.services-list article:last-child { border-bottom: 1px solid var(--line); }
	.services-list h2 {
		margin: 0;
		font-size: clamp(1.5rem, 2.5vw, 2.5rem);
		font-weight: 600;
		letter-spacing: -.04em;
	}
	.services-list p {
		margin: 0;
		color: var(--muted);
		line-height: 1.65;
	}
	.simple-cta { padding-bottom: 8rem; }

	.contact-layout {
		display: grid;
		grid-template-columns: .75fr 1.25fr;
		gap: 10vw;
		padding-bottom: clamp(7rem, 12vw, 12rem);
	}
	.contact-note p { margin: 0; color: var(--muted); line-height: 1.6; }
	.contact-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.6rem;
	}
	.contact-form label {
		display: grid;
		gap: .5rem;
	}
	.contact-form label span {
		font-size: .72rem;
		font-weight: 600;
	}
	.contact-form input,
	.contact-form select,
	.contact-form textarea {
		width: 100%;
		padding: .85rem 0;
		border: 0;
		border-bottom: 1px solid #4a4a4a;
		border-radius: 0;
		outline: 0;
		background: transparent;
		color: var(--text);
	}
	.contact-form input:focus,
	.contact-form select:focus,
	.contact-form textarea:focus { border-color: var(--text); }
	.contact-form select { appearance: none; cursor: pointer; }
	.contact-form .message-field { grid-column: 1 / -1; }
	.contact-form textarea { resize: vertical; }
	.contact-form button {
		justify-self: start;
		padding: .85rem 1.6rem;
		border: 1px solid #f4f4f2;
		background: #f4f4f2;
		color: #0d0d0d;
		font-size: .78rem;
		font-weight: 650;
		cursor: pointer;
		transition: background .2s ease, color .2s ease;
	}
	.contact-form button:hover { background: transparent; color: #f4f4f2; }
	.contact-honeypot {
		position: absolute !important;
		left: -9999px !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
	}
	.form-privacy {
		grid-column: 1 / -1;
		margin: 0;
		color: var(--muted);
		font-size: .72rem;
		line-height: 1.5;
	}
	.form-message {
		padding: 1rem;
		margin: 0 0 2rem;
		border: 1px solid var(--line);
	}
	.form-message.success { border-color: #2b7d45; }

	.page-content { margin-top: 2rem; max-width: 760px; line-height: 1.7; }

	.site-footer { border-top: 1px solid var(--line); }
	.footer-inner {
		min-height: 110px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		font-size: .72rem;
	}
	.footer-inner p { margin: 0; color: var(--muted); }
	.footer-links { display: flex; gap: 1.5rem; }

	.post-list { padding-bottom: 8rem; }
	.post-list article { padding-block: 2rem; border-top: 1px solid var(--line); }
	.post-list article > p:first-child { margin: 0 0 .7rem; color: var(--muted); font-size: .72rem; }
	.post-list h2 { margin: 0 0 1rem; font-size: clamp(1.6rem, 3vw, 3rem); font-weight: 600; letter-spacing: -.04em; }
	.post-list h2 a:hover { opacity: .55; }
	.post-list article > p:last-child { max-width: 650px; color: var(--muted); line-height: 1.65; }
	.single-post { padding-bottom: 9rem; }
	.single-post .page-intro { width: 100%; }
	.single-image { margin-bottom: 5rem; }
	.single-image img { display: block; width: 100%; height: auto; }
	.post-content { max-width: 760px; margin-inline: auto; font-size: 1.05rem; line-height: 1.8; }
	.post-content img { height: auto; }

	@media (max-width: 1100px) {
		.photo-grid { column-count: 2; }
	}

	@media (max-width: 760px) {
		.page-intro h1 { font-size: clamp(2.8rem, 14vw, 4.5rem); }
		.header-inner { min-height: 72px; }
		.site-logo span { display: none; }
		.site-nav { gap: 1rem; font-size: .72rem; }
		.home-intro,
		.project-intro,
		.text-page,
		.contact-layout { grid-template-columns: 1fr; }
		.home-intro { gap: 2rem; }
		.home-intro h1 { font-size: clamp(3.5rem, 17vw, 6rem); }
		.project-intro > p:last-child { justify-self: start; margin-top: 1.5rem; }
		.project-grid { grid-template-columns: 1fr; row-gap: 3.5rem; }
		.photo-grid { column-count: 1; width: 100%; }
		.photo-grid figure { margin-bottom: 4px; }
		.project-nav { width: 92vw; }
		.text-page { gap: 3rem; }
		.services-list article { grid-template-columns: 1fr; gap: .8rem; }
		.contact-layout { gap: 4rem; }
		.contact-form { grid-template-columns: 1fr; }
		.contact-form .message-field { grid-column: 1; }
		.home-about,
		.footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; }
		.footer-inner { padding-block: 2rem; }
	}

	@media (max-width: 420px) {
		.site-logo strong { font-size: .86rem; }
		.site-nav { gap: .75rem; font-size: .68rem; }
		.project-info { align-items: flex-start; flex-direction: column; gap: .3rem; }
		.project-nav { flex-direction: column; }
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}