/* Combined image and text brand lockup. */
/* Ported unchanged from the approved static reference (website/dist/style.css). Keep file order: later files override earlier ones. */

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.brand-image {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
	flex-shrink: 0;
}

.brand-text {
	display: block;
}

@media(min-width:761px) and (max-width:1100px) {
	.menu-toggle {
		display: flex;
		gap: 15px;
		border: 0;
		background: none;
		color: var(--ink);
		padding: 12px;
	}
	nav {
		display: none;
		position: absolute;
		top: 105px;
		left: 0;
		right: 0;
		background: var(--paper);
		padding: 24px;
		box-shadow: 0 20px 30px #111f4420;
	}
	nav.open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		font-size: 1rem;
	}
}

@media(max-width:760px) {
	.wordmark {
		gap: 8px;
	}
	.brand-image {
		width: 48px;
		height: 48px;
	}
	header .wordmark {
		font-size: .62rem;
	}
	header .wordmark strong {
		font-size: 1.2rem;
	}
	.menu-toggle {
		gap: 6px;
		padding: 8px;
	}
}

@media(max-width:360px) {
	header .brand-image {
		width: 40px;
		height: 40px;
	}
	header .wordmark {
		gap: 5px;
		font-size: .56rem;
	}
	header .wordmark strong {
		font-size: 1.05rem;
	}
}