.site-header {
	height: 80px;
	position: fixed;
	z-index: 5;
	inset: 0 0 auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 0 4.2vw;
	color: #fff;
	transition: background .3s, color .3s
}

.site-header.scrolled,
.site-header.open {
	background: rgba(239, 239, 233, .96);
	color: var(--ink);
	border-bottom: 1px solid var(--line)
}

.wordmark {
	font: 500 25px/1 Georgia, "Times New Roman", serif;
	letter-spacing: .11em;
	text-decoration: none;
	color: inherit
}

.wordmark small {
	font: 9px/1 "PingFang SC", sans-serif;
	letter-spacing: .16em;
	margin-left: 6px
}

.site-header nav {
	display: flex;
	gap: 34px
}

.site-header nav a,
.header-cta {
	color: inherit;
	text-decoration: none;
	font-size: 11px;
	letter-spacing: .12em
}

.header-cta {
	justify-self: end;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px
}

.menu-toggle {
	display: none
}

.hero {
	position: relative;
	min-height: 100dvh;
	color: #fff;
	overflow: hidden
}

.hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover
}

.hero-shade {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .25)
}

.hero-copy {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -42%);
	text-align: center;
	white-space: nowrap
}

.hero-copy p {
	font-size: 11px;
	letter-spacing: .36em;
	margin: 0 0 10px
}

.hero-copy h1 {
	font: 400 clamp(76px, 11vw, 162px)/.8 Georgia, "Times New Roman", serif;
	letter-spacing: .06em;
	margin: 0
}

.hero-copy span {
	font-size: 12px;
	letter-spacing: .55em;
	margin-left: .55em
}

.eyebrow {
	font-size: 10px;
	letter-spacing: .19em;
	color: var(--sage);
	margin: 0 0 23px
}

h2 {
	font: 400 clamp(39px, 4.5vw, 68px)/1.25 Georgia, "Times New Roman", serif;
	letter-spacing: -.045em;
	margin: 0
}

h3 {
	font: 400 clamp(28px, 2.7vw, 40px)/1.3 Georgia, "Times New Roman", serif;
	letter-spacing: -.035em;
	margin: 0
}

em {
	font-family: Georgia, "Times New Roman", serif
}

.intro {
	max-width: 850px;
	margin: auto;
	padding: 145px 35px 130px;
	text-align: center
}

.intro-copy {
	max-width: 585px;
	color: #5f625b;
	margin: 38px auto 0
}

.button {
	display: inline-block;
	background: var(--ink);
	color: #fff;
	text-decoration: none;
	padding: 15px 27px;
	font-size: 11px;
	letter-spacing: .13em;
	margin-top: 37px;
	transition: background .2s
}

.button:hover {
	background: var(--sage)
}

.pair-images {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.4vw;
	padding: 0 4.2vw
}

.pair-images img {
	display: block;
	width: 100%;
	height: min(48vw, 690px);
	object-fit: cover
}

.two-stories {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10vw;
	max-width: 1110px;
	padding: 130px 0;
	margin: auto
}

.two-stories article {
	max-width: 420px
}

.two-stories p {
	color: #61635d;
	margin: 25px 0 0
}

.information {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: 10vw;
	padding: 130px 13vw;
	background: var(--soft)
}

.hours {
	max-width: 520px;
	border-top: 1px solid var(--line);
	margin-top: 40px
}

.hours div {
	padding: 17px 0;
	border-bottom: 1px solid var(--line);
	display: grid;
	grid-template-columns: 130px 1fr
}

.hours strong {
	font-size: 13px
}

.hours span,
.note {
	font-size: 13px;
	color: #60635c
}

.note {
	margin: 24px 0 0
}

.menu-links {
	align-self: end
}

.menu-links a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--ink);
	text-decoration: none;
	border-top: 1px solid var(--line);
	padding: 19px 0;
	font-size: 14px
}

.menu-links a:last-child {
	border-bottom: 1px solid var(--line)
}

.menu-links span,
.text-link span {
	margin-left: 18px
}

.feature-story {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	min-height: 760px
}

.feature-story>img {
	width: 100%;
	height: 100%;
	min-height: 650px;
	object-fit: cover
}

.feature-story>div {
	padding: 14vh 11vw 10vh 9vw;
	align-self: center
}

.feature-story>div>p:not(.eyebrow),
.celebrations p:not(.eyebrow) {
	color: #5d6059;
	max-width: 410px;
	margin: 32px 0 0
}

.celebrations {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	min-height: 740px;
	background: #3d4635;
	color: #fff
}

.celebrations>div {
	padding: 15vh 8vw 10vh 13vw;
	align-self: center
}

.celebrations .eyebrow {
	color: #d5dacb
}

.celebrations p:not(.eyebrow) {
	color: rgba(255, 255, 255, .74)
}

.celebrations img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.text-link {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	font-size: 11px;
	letter-spacing: .12em;
	border-bottom: 1px solid currentColor;
	padding-bottom: 8px;
	margin-top: 34px
}

.contact {
	padding: 130px 13vw 150px
}

.contact h2 {
	font-size: clamp(45px, 5vw, 72px)
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2vw;
	margin-top: 65px
}

.contact-grid a {
	color: var(--ink);
	text-decoration: none;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 18px 0;
	font-size: 13px
}

.contact-grid span {
	float: right
}
/*悬浮 */
p {
	color: #666;
	font-size: 14px
}



.popup {
	position: fixed;
	right: 0;
	bottom: 380px;
	width: 476px;
	height: 168px;
	background: #f3efe9;
	box-shadow: 0 12px 32px #0002;
	z-index: 1000;
	display: flex;
	align-items: center;
	padding: 6px 34px 6px 16px;
	gap: 30px;
	animation: slide-in 1.5s cubic-bezier(.22, 1, .36, 1) both;
	
}

@keyframes slide-in {
	from {
		transform: translateX(calc(100% + 40px));
		opacity: 0
	}

	to {
		transform: translateX(0);
		opacity: 1
	}
}

@media (prefers-reduced-motion: reduce) {
	.popup {
		animation: none
	}
}

.popup[hidden] {
	display: none
}

.code {
	flex: none;
	width: 158px;
	height: 156px;
	background-image: url('https://www.yeelenresort.com/uploads/allimg/20261030/2-26103016315AN.png');
	background-repeat: no-repeat;
	/* background-position: -458px -185px;
				background-size: 923px 361px */
	background-position: 0px 0px;
	background-size: 150px 150px;
}

.copy {
	align-self: stretch;
	padding-top: 29px
}

.copy h2 {
	font-size: 21px;
	line-height: 1.08;
	font-weight: 400;
	margin: 0 0 34px
}

.copy p {
	font-size: 14px;
	margin: 0;
	color: #171717
}

.close {
	position: absolute;
	right: 8px;
	top: 8px;
	border: 0;
	background: #ffffff60;
	width: 28px;
	height: 28px;
	font-size: 22px;
	line-height: 24px;
	cursor: pointer
}

.close:focus-visible {
	outline: 2px solid #333
}

@media(prefers-reduced-motion:reduce) {
	* {
		scroll-behavior: auto !important;
		transition: none !important
	}
}

@media(max-width:740px) {
	.popup{
		display: none;
	}
	.site-header {
		height: 68px;
		padding: 0 6vw;
		grid-template-columns: 1fr auto
	}

	.site-header nav,
	.header-cta {
		display: none
	}

	.menu-toggle {
		display: flex;
		flex-direction: column;
		gap: 6px;
		color: inherit;
		border: 0;
		background: none
	}

	.menu-toggle i {
		width: 21px;
		height: 1px;
		background: currentColor
	}

	.site-header.open nav {
		display: flex;
		position: absolute;
		top: 68px;
		left: 0;
		right: 0;
		padding: 26px 6vw;
		background: var(--paper);
		flex-direction: column;
		gap: 16px;
		border-bottom: 1px solid var(--line)
	}

	.hero-copy h1 {
		font-size: 80px
	}

	.hero-copy p {
		font-size: 9px
	}

	.intro {
		padding: 98px 7vw 90px
	}

	.pair-images {
		display: block;
		padding: 0
	}

	.pair-images img {
		height: 87vw;
		margin-bottom: 2px
	}

	.two-stories {
		display: block;
		padding: 87px 7vw
	}

	.two-stories article+article {
		margin-top: 63px
	}

	.information {
		display: block;
		padding: 88px 7vw
	}

	.menu-links {
		margin-top: 62px
	}

	.feature-story,
	.celebrations {
		display: flex;
		flex-direction: column
	}

	.feature-story>img {
		height: 93vw;
		min-height: 0
	}

	.feature-story>div,
	.celebrations>div {
		padding: 88px 7vw
	}

	.celebrations img {
		height: 95vw
	}

	.contact {
		padding: 90px 7vw
	}

	.contact-grid {
		display: block;
		margin-top: 48px
	}

	.contact-grid a {
		display: block
	}

	.contact-grid a+a {
		border-top: 0
	}


}