@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,600&display=swap");

:root {
	--bg: #f5f4f1;
	--surface: #ffffff;
	--surface-soft: #f6f2ec;
	--ink: #0f141b;
	--muted: #667085;
	--accent: #8b5e34;
	--accent-alt: #6f4a2a;
	--line: #e6dfd6;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	color: var(--ink);
	background: var(--bg);
}

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

.container {
	width: min(1100px, 92%);
	margin: 0 auto;
}

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

.site-header {
	border-bottom: 1px solid var(--line);
	background: color-mix(in srgb, var(--surface) 96%, transparent);
	backdrop-filter: blur(6px);
	position: sticky;
	top: 0;
	z-index: 10;
}

.site-header .container {
	padding: 0.9rem 0;
}

.brand {
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.nav {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.nav a {
	font-weight: 500;
	color: var(--muted);
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	transition: background-color 160ms ease, color 160ms ease;
}

.nav a:hover {
	background: #f4ece3;
	color: var(--ink);
}

.nav-dropdown {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.nav-dropdown-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.nav-dropdown-trigger::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform 180ms ease;
}

.nav-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	padding: 0.4rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 0.75rem;
	box-shadow: 0 14px 26px rgba(15, 20, 27, 0.12);
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	z-index: 25;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity 160ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.nav-dropdown-menu a {
	display: block;
	padding: 0.5rem 0.7rem;
	border-radius: 0.55rem;
	white-space: nowrap;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition-delay: 0s;
}

.nav-dropdown:hover .nav-dropdown-trigger::after,
.nav-dropdown:focus-within .nav-dropdown-trigger::after {
	transform: rotate(225deg) translateY(-1px);
}

.hero {
	padding: 4.6rem 0 2rem;
}

.hero-showcase {
	padding: 1.2rem 0 0.8rem;
}

.hero-copy-only {
	padding: 1rem 0 0.2rem;
}

.showcase-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas:
		"headline headline headline headline headline headline headline headline headline headline headline headline"
		"left left left left left left right right right right right right";
	gap: 1rem;
	align-items: end;
}

.hero-copy-only .showcase-grid {
	grid-template-areas: "headline headline headline headline headline headline headline headline headline headline headline headline";
}

.showcase-headline-wrap {
	grid-area: headline;
}

.showcase-headline {
	margin: 0.25rem 0 0;
	font-size: clamp(2rem, 6.8vw, 5rem);
	line-height: 0.88;
	letter-spacing: -0.04em;
	max-width: 11.5ch;
}

.showcase-image {
	position: relative;
	overflow: hidden;
	background: #d9dce0;
	min-height: 170px;
}

.showcase-image-left {
	grid-area: left;
}

.showcase-image-right {
	grid-area: right;
}

.showcase-image a {
	display: block;
	height: 100%;
}

.showcase-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.showcase-caption {
	position: absolute;
	right: 0.55rem;
	bottom: 0.45rem;
	margin: 0;
	font-size: 0.72rem;
	letter-spacing: 0.01em;
	color: #f9fbff;
	text-shadow: 0 1px 2px rgba(8, 10, 14, 0.6);
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.72rem;
	color: var(--accent-alt);
	margin: 0;
	font-weight: 700;
}

h1,
h2,
h3 {
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	font-weight: 800;
}

h1 {
	font-size: clamp(2.1rem, 5.4vw, 4rem);
	margin: 0.45rem 0 0.75rem;
}

.intro,
.lead {
	max-width: 65ch;
	color: var(--muted);
	font-size: 1.02rem;
	line-height: 1.65;
}

.section-space {
	padding: 2.3rem 0 4.2rem;
}

.section-space-top-tight {
	padding-top: 0.8rem;
}

.text-link {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 0.18rem;
	font-weight: 600;
}

.featured-brick-grid {
	margin-top: 0.8rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.featured-brick {
	border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
	padding-bottom: 0.9rem;
	max-width: 900px;
}

.featured-brick:nth-child(odd) {
	margin-right: auto;
}

.featured-brick:nth-child(even) {
	margin-left: auto;
}

.featured-brick-link {
	display: grid;
	grid-template-columns: minmax(240px, 0.95fr) minmax(260px, 1.05fr);
	min-height: 170px;
	height: 100%;
	gap: 0.9rem;
}

.featured-brick:nth-child(even) .brick-meta {
	order: 2;
	text-align: right;
}

.featured-brick:nth-child(even) .brick-collage {
	order: 1;
}

.brick-meta {
	padding: 0.2rem 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.brick-kicker {
	margin: 0;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--accent-alt);
	font-weight: 700;
}

.project-title-display {
	margin: 0.45rem 0 0.35rem;
	font-size: clamp(1.35rem, 2.1vw, 1.95rem);
	line-height: 0.95;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.brick-meta p:last-child {
	margin: 0;
	color: #5e646c;
	line-height: 1.4;
	font-size: 0.93rem;
}

.brick-collage {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: 1fr;
	min-height: 145px;
	gap: 0.4rem;
}

.collage-frame {
	margin: 0;
	overflow: hidden;
	background: #d9dce0;
}

.collage-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.project-card h2,
.project-card h3 {
	margin: 0.75rem 0 0.4rem;
	font-size: 1.15rem;
}

.project-card p {
	margin: 0;
	color: var(--muted);
	line-height: 1.55;
}

.project-grid {
	margin-top: 1.2rem;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1.2rem;
}

.project-card {
	grid-column: span 6;
	border: 0;
	background: transparent;
	border-radius: 0;
	overflow: visible;
}

.project-card:hover {
	transform: none;
}

.project-card a {
	display: block;
	padding: 0;
}

.thumb-wrap {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: #e7ebf1;
}

.project-card h2,
.project-card h3,
.project-card p {
	padding-left: 0;
	padding-right: 0;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.project-card p {
	padding-bottom: 0;
}

.thumb-wrap img,
.hero-image img,
.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.article-header {
	margin-bottom: 1.2rem;
}

.hero-image {
	margin: 0 auto 1.5rem;
	border: none;
	border-radius: 0;
	overflow: hidden;
	background: transparent;
	width: min(100%, 860px);
}

.hero-rotator {
	display: grid;
	grid-template-columns: 1.8fr auto 4fr auto 1.8fr;
	gap: 0;
	aspect-ratio: var(--hero-ratio, 16 / 9);
}

.hero-timeline-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(2.5rem, 6vw, 5rem);
	background: var(--bg);
}

.hero-timeline-link::after {
	content: "\00B7\2009\00B7";
	font-family: "Cormorant Garamond", serif;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--muted);
	opacity: 0.7;
}

.hero-rotator-center {
	position: relative;
	overflow: hidden;
	background: transparent;
}

.hero-rotator-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	filter: blur(28px) saturate(70%) brightness(0.92);
	transform: scale(1.15);
	transition: opacity 800ms ease;
	pointer-events: none;
	z-index: 0;
}

.hero-rotator .hero-rotator-layer {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: relative;
	z-index: 1;
}

.hero-rotator .hero-rotator-layer.is-fading-up {
	animation: hero-fade-up 700ms ease both;
}

@keyframes hero-fade-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-rotator-side {
	position: relative;
	overflow: hidden;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

.hero-rotator-side:hover,
.hero-rotator-side:focus-visible {
	outline: none;
}

.hero-rotator-side-prev {
	cursor: w-resize;
}

.hero-rotator-side-next {
	cursor: e-resize;
}

.hero-rotator-preview {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.18;
	filter: saturate(72%) contrast(90%);
	transition: opacity 600ms ease;
	pointer-events: none;
}

.hero-rotator-side-prev .hero-rotator-preview {
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.7));
	-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.7));
}

.hero-rotator-side-next .hero-rotator-preview {
	mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.7));
	-webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.7));
}

.hero-rotator:hover .hero-rotator-preview,
.hero-rotator:focus-within .hero-rotator-preview {
	opacity: 0.28;
}

.prose {
	max-width: 70ch;
	color: #293246;
	line-height: 1.72;
}

.gallery-block {
	margin-top: 2.5rem;
}

.gallery-header {
	margin-bottom: 0.9rem;
}

.gallery-layout-controls {
	display: inline-flex;
	align-items: center;
	padding: 0;
}


.layout-toggle-text {
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid var(--line);
	background: #f5eee6;
	color: var(--muted);
	padding: 0.26rem 0.66rem;
	border-radius: 2px;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}


.layout-toggle-text:hover {
	background: color-mix(in srgb, #ffffff 72%, transparent);
	color: var(--ink);
}


.layout-toggle-text:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.badge {
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid var(--line);
	padding: 0.22rem 0.62rem;
	border-radius: 2px;
	color: var(--muted);
	background: #f5eee6;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1rem;
	align-items: start;
	grid-auto-flow: row dense;
}

.gallery-grid .gallery-item {
	grid-column: span 2;
	align-self: start;
}

.gallery-grid .gallery-item.is-landscape {
	grid-column: span 4;
}

.gallery-masonry {
	column-count: 3;
	column-gap: 1rem;
}

.gallery-masonry .gallery-item {
	break-inside: avoid;
	margin-bottom: 1rem;
}

.gallery-masonry .gallery-item img {
	height: auto;
	object-fit: contain;
}

.gallery-item {
	border: 0;
	background: transparent;
	border-radius: 0;
	overflow: visible;
	transform-origin: center top;
	transition: transform 180ms ease, opacity 180ms ease;
}

.gallery.is-layout-transitioning .gallery-item {
	animation: gallery-layout-shift 210ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
	animation-delay: var(--layout-item-delay, 0ms);
}

@keyframes gallery-layout-shift {
	from {
		opacity: 0.92;
		transform: translateY(7px) scale(0.992);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.gallery-expand {
	display: block;
	width: 100%;
	border: 0;
	background: none;
	padding: 0;
	cursor: zoom-in;
}

.gallery-expand:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.gallery-item figcaption {
	display: block;
	margin: 0;
	padding: 0.58rem 0 0;
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ink);
}

.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(10, 15, 23, 0.5);
	backdrop-filter: blur(7px) saturate(110%);
	-webkit-backdrop-filter: blur(7px) saturate(110%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	z-index: 30;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.lightbox.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.lightbox-image {
	max-width: min(1200px, 95vw);
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	padding: 0.65rem;
	border: 1px solid #e8e8e8;
	background: #ffffff;
	box-shadow: 0 18px 44px rgba(6, 10, 16, 0.25);
	opacity: 0;
	transform: translateY(8px) scale(0.985);
	transition: opacity 220ms ease, transform 260ms ease;
}

.lightbox.is-open .lightbox-image {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	border: 1px solid #6d7e9a;
	background: #162132;
	color: #ecf3ff;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.hero-rotator {
		transition: none;
	}

	.hero-rotator .hero-rotator-layer {
		transition: none;
		animation: none;
	}

	.hero-rotator .hero-rotator-layer.is-fading-up {
		animation: none;
	}

	.hero-rotator-preview {
		transition: none;
	}

	.gallery-item {
		transition: none;
	}

	.gallery.is-layout-transitioning .gallery-item {
		animation: none;
	}
}

.site-footer {
	border-top: 1px solid var(--line);
	color: var(--muted);
}

.site-footer .container {
	padding: 1.2rem 0 2.2rem;
}

@media (max-width: 920px) {
	.hero-showcase {
		padding-top: 1rem;
	}

	.showcase-grid {
		grid-template-areas:
			"headline headline headline headline headline headline headline headline headline headline headline headline"
			"left left left left left left right right right right right right";
	}

	.showcase-headline {
		max-width: 13ch;
	}

	.featured-brick-link {
		grid-template-columns: 1fr;
		gap: 0.65rem;
	}

	.featured-brick:nth-child(even) .brick-meta,
	.featured-brick:nth-child(even) .brick-collage {
		order: initial;
		text-align: left;
	}

	.brick-meta {
		padding-bottom: 0.2rem;
	}

	.project-card {
		grid-column: span 12;
	}

	.gallery-masonry {
		column-count: 2;
	}
}

@media (max-width: 640px) {
	.showcase-grid {
		grid-template-areas:
			"headline headline headline headline headline headline headline headline headline headline headline headline"
			"left left left left left left left left left left left left"
			"right right right right right right right right right right right right";
	}

	.hero-image {
		width: 100%;
	}

	.hero-rotator {
		grid-template-columns: 1fr;
	}

	.hero-rotator-side {
		display: none;
	}

	.hero-timeline-link {
		display: none;
	}

	.showcase-headline {
		font-size: clamp(2rem, 14vw, 3.4rem);
		max-width: 100%;
	}

	.showcase-image {
		min-height: 140px;
	}

	.project-title-display {
		font-size: clamp(1.45rem, 9vw, 2rem);
	}

	.brick-collage {
		min-height: 120px;
		gap: 0.35rem;
	}

	.site-header .container {
		flex-direction: column;
		align-items: flex-start;
	}

	.nav {
		flex-wrap: wrap;
	}

	.nav-dropdown-menu {
		display: none;
	}

	.nav-dropdown-trigger::after {
		display: none;
	}

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

	.gallery-grid .gallery-item,
	.gallery-grid .gallery-item.is-landscape {
		grid-column: span 1;
	}

	.gallery-masonry {
		column-count: 1;
	}
}

@media (max-width: 420px) {
	.gallery-grid {
		grid-template-columns: 1fr;
	}
}

@media (hover: none), (pointer: coarse) {
	.nav a:hover {
		background: transparent;
		color: var(--muted);
	}
}