/**
 * WordPress integration that does not restyle the public design.
 * Loaded after the static stylesheets.
 */

.admin-bar .site-header {
	top: 32px;
}

.admin-bar .nav-mobile {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header,
	.admin-bar .nav-mobile {
		top: 46px;
	}
}

.brand .custom-logo {
	width: auto;
	height: 2.75rem;
	max-width: 12rem;
	object-fit: contain;
}

.footer-brand .brand .custom-logo {
	height: 3.4rem;
	max-width: 14rem;
}

.page-fallback .display {
	font-size: clamp(2.6rem, 5.4vw, 5rem);
	max-width: 16ch;
}

.page-fallback .lede,
.page-fallback .entry-content {
	margin-top: 1.5rem;
	max-width: 62ch;
}

.page-fallback .entry-content p + p,
.page-fallback .entry-content > * + * {
	margin-top: 1rem;
}

.page-fallback .entry-content a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.page-header {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(22rem, 58vh, 38rem);
	color: var(--text-on-dark);
	background: var(--background-dark);
	overflow: hidden;
}

.page-header-media,
.page-header-shade {
	position: absolute;
	inset: 0;
}

.page-header-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

.page-header-shade {
	background:
		linear-gradient(90deg, rgba(20, 17, 14, 0.55) 0%, rgba(20, 17, 14, 0.16) 46%, rgba(20, 17, 14, 0.1) 100%),
		linear-gradient(180deg, rgba(20, 17, 14, 0.28) 0%, transparent 34%, rgba(20, 17, 14, 0.62) 100%);
	pointer-events: none;
}

.page-header-copy {
	position: relative;
	z-index: 1;
	width: min(100%, var(--max));
	margin: 0 auto;
	padding: calc(var(--header-h) + 2.4rem) var(--space-page) clamp(2.2rem, 5vw, 4rem);
}

.page-header-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem 0.7rem;
	margin: 0 0 1rem;
	font-size: 0.68rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--text-on-dark-muted);
}

.page-header-crumb a {
	color: inherit;
}

.page-header-crumb a:hover {
	color: var(--text-on-dark);
}

.page-header .display {
	font-size: clamp(2.8rem, 6.2vw, 5.6rem);
	max-width: 16ch;
	color: var(--text-on-dark);
}

.post-type-archive-suites .others-section {
	padding-top: calc(var(--header-h) + clamp(2.2rem, 5vw, 4.5rem));
}