/* Local-area guide, in the existing Albatross Point visual language. */
.area-page header {
	position: relative;
	background: var(--cream);
	border-bottom: 1px solid var(--line);
}
.area-page a.brand { color: inherit; text-decoration: none; }

.area-hero {
	position: relative;
	min-height: 610px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #262a25;
}
.area-hero::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(12, 19, 15, .7), rgba(12, 19, 15, .12) 75%);
	content: "";
}
.area-hero > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 52%;
	opacity: .88;
}
.area-hero-copy {
	position: relative;
	z-index: 1;
	width: min(650px, 90%);
	margin-left: 8%;
	padding: 70px 0;
	color: #fff;
}
.area-hero-copy h1 {
	margin: 20px 0;
	font-size: clamp(52px, 7vw, 86px);
	font-weight: 400;
	line-height: .98;
}
.area-hero-copy > p:not(.eyebrow) {
	max-width: 500px;
	margin: 0 0 30px;
	font-size: 18px;
	line-height: 1.65;
}

.area-jump {
	display: flex;
	justify-content: center;
	gap: clamp(18px, 4vw, 52px);
	padding: 20px 5%;
	border-bottom: 1px solid var(--line);
	background: var(--paper);
}
.area-jump a,
.area-text-link {
	color: inherit;
	font: 10px Arial, sans-serif;
	letter-spacing: 2px;
	text-decoration: none;
}
.area-jump a:hover,
.area-text-link:hover { color: var(--olive); text-decoration: underline; }

.area-intro {
	max-width: 850px;
	margin: 0 auto;
	padding: 88px 6%;
	text-align: center;
}
.area-intro h2,
.area-nearby-heading h2,
.area-book h2 {
	margin: 16px 0 20px;
	font-size: clamp(34px, 4.3vw, 54px);
	font-weight: 400;
	line-height: 1.08;
}
.area-intro > p:not(.eyebrow),
.area-nearby-heading > p:not(.eyebrow),
.area-book > p:not(.eyebrow) {
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.75;
}

.area-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
	min-height: 500px;
	background: var(--paper);
	border-top: 1px solid var(--line);
}
.area-feature > img {
	width: 100%;
	height: 100%;
	min-height: 500px;
	object-fit: cover;
}
.area-feature-reverse { grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); }
.area-feature-reverse > img { grid-column: 2; grid-row: 1; }
.area-copy {
	align-self: center;
	max-width: 610px;
	padding: 65px clamp(32px, 7vw, 100px);
}
.area-copy h2 {
	margin: 16px 0 20px;
	font-size: clamp(32px, 3.8vw, 48px);
	font-weight: 400;
	line-height: 1.12;
}
.area-copy p:not(.eyebrow) {
	font-size: 16px;
	line-height: 1.75;
}
.area-copy p + p { margin-top: 16px; }
.area-routes {
	margin-top: 25px;
	border-top: 1px solid var(--line);
}
.area-route {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 16px;
	padding: 15px 0;
	border-bottom: 1px solid var(--line);
}
.area-route-label { grid-column: 1 / -1; font: 9px Arial, sans-serif; letter-spacing: 2px; color: #5d5a51; }
.area-route strong { font-size: 15px; font-weight: 400; }
.area-route a { align-self: center; color: var(--olive); font: 9px Arial, sans-serif; letter-spacing: 1.4px; text-decoration: none; white-space: nowrap; }
.area-route a:hover { text-decoration: underline; }
.area-route-note { margin: 10px 0 0 !important; color: #6a675e; font-size: 12px !important; line-height: 1.5 !important; }
.area-text-link { display: inline-block; margin-top: 16px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }

.area-nearby { padding: 82px 6% 90px; }
.area-nearby-heading { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.area-nearby-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.area-nearby-grid article { padding: 30px 32px 34px; }
.area-nearby-grid article + article { border-left: 1px solid var(--line); }
.area-index { font: 10px Arial, sans-serif; letter-spacing: 3px; color: #625e54; }
.area-nearby-grid h3 { margin: 18px 0 12px; font-size: 25px; font-weight: 400; }
.area-nearby-grid p { margin: 0; font-size: 15px; line-height: 1.7; }
.area-feature-last { border-bottom: 1px solid var(--line); }

.moonlight-section {
	display: grid;
	grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr);
	align-items: stretch;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--paper);
}
.moonlight-copy { align-self: center; padding: 58px clamp(30px, 6vw, 82px); }
.moonlight-copy h2 { margin: 15px 0 18px; font-size: clamp(34px, 4vw, 50px); font-weight: 400; line-height: 1.08; }
.moonlight-copy p:not(.eyebrow) { font-size: 15px; line-height: 1.7; }
.moonlight-links { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 24px; }
.moonlight-links a { color: var(--olive); font: 9px Arial, sans-serif; letter-spacing: 1.5px; text-decoration: none; }
.moonlight-links a:hover { text-decoration: underline; }
.moonlight-photos { display: grid; grid-template-columns: 1fr 1fr; min-height: 390px; }
.moonlight-photos figure { position: relative; min-width: 0; min-height: 390px; overflow: hidden; border: 0; }
.moonlight-photos img { width: 100%; height: 100%; min-height: 390px; object-fit: cover; }
.moonlight-photos figcaption { position: absolute; inset: auto 0 0; padding: 35px 14px 14px; background: linear-gradient(transparent, rgba(15,18,15,.72)); color: #fff; font: 9px Arial, sans-serif; letter-spacing: 1.6px; }

.area-note {
	max-width: 900px;
	margin: 0 auto;
	padding: 34px 6%;
	text-align: center;
}
.area-note p:not(.eyebrow) { margin: 12px auto 0; font-size: 14px; line-height: 1.6; color: #5d5a51; }
.area-book { padding: 74px 6%; background: var(--olive); color: #fff; text-align: center; }
.area-book .eyebrow { color: #e2dfd4; }
.area-book > p:not(.eyebrow) { margin-bottom: 28px; }

@media (max-width: 760px) {
	.area-hero { min-height: 540px; }
	.area-hero-copy { margin-left: 7%; padding: 60px 0; }
	.area-hero-copy > p:not(.eyebrow) { font-size: 16px; }
	.area-jump { justify-content: flex-start; overflow-x: auto; white-space: nowrap; }
	.area-intro { padding: 60px 7%; }
	.area-intro > p:not(.eyebrow) { font-size: 16px; }
	.area-feature,
	.area-feature-reverse { display: flex; flex-direction: column; }
	.area-feature > img { min-height: 0; height: min(72vw, 430px); }
	.area-copy { max-width: none; padding: 34px 7% 44px; }
	.area-nearby { padding: 60px 7%; }
	.moonlight-section { grid-template-columns: 1fr; }
	.moonlight-copy { padding: 38px 7% 42px; }
	.moonlight-photos { min-height: 260px; }
	.moonlight-photos figure,
	.moonlight-photos img { min-height: 260px; }
	.area-nearby-grid { grid-template-columns: 1fr; }
	.area-nearby-grid article { padding: 26px 4px; }
	.area-nearby-grid article + article { border-top: 1px solid var(--line); border-left: 0; }
}