@charset "UTF-8";
/* CSS Document */
/* Full-bleed photo + overlapping "ledge" headline band, placed between the site header and page content */

.landmark-feature {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.landmark-feature__photo {
	height: 46vh;
	min-height: 320px;
	max-height: 560px;
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
	filter: grayscale(100%);
}

/* .landmark-feature__ledge is a normal-flow sibling of .container's children
   (not inside the 100vw full-bleed wrapper above), so its right edge matches
   the page's content column exactly instead of being independently centered.
   --lf-content-width must match .container's max-width (feature-styles.css). */
.landmark-feature__ledge {
	--lf-content-width: 700px;
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	background: #ffffff;
	padding-top: 2em;
	padding-right: 2em;
	padding-bottom: 1.5em;
	margin-top: -70px;
	min-height: 80px; /* always taller than the overlap above, so the photo never shows below the white ledge */
}

.landmark-feature__headline {
	margin: 0;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 5.5em;
	font-weight: 400;
	line-height: 1.15em;
	color: #131317;
}

@media (min-width: 900px) {
	.landmark-feature__ledge {
		/* Stretch the box's left edge out to the photo's full-bleed edge, while
		   the right edge stays put at the content column's right margin. */
		margin-left: calc((var(--lf-content-width) - 100vw) / 2);
		width: calc(100% + (100vw - var(--lf-content-width)) / 2);
		/* Text starts halfway between the photo's edge and the content column's
		   left margin, so the headline sits asymmetrically to the left. */
		padding-left: calc((100vw - var(--lf-content-width)) / 4);
	}
}

@media (max-width: 899px) {
	.landmark-feature__ledge {
		margin-top: 0;
		margin-left: 0;
		width: 100%;
		min-height: 0;
		padding: 1.2em 1.2em 1em;
	}

	.landmark-feature__photo {
		height: 34vh;
		min-height: 220px;
	}
}