:root
{
	--ink: #19241d;
	--cream: #f2ecdf;
	--paper: #faf8f2;
	--rust: #bd603e;
	--section-padding: clamp(48px,8vw,96px) clamp(24px,8vw,120px) clamp(48px,8vw,96px);
	--section-padding_wide: 0 clamp(16px,8vw,48px) clamp(24px,4vw,48px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body
{
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: Arial,Helvetica,sans-serif;
}

a
{
	color: inherit;
	text-decoration: none;
}

h1,h2,h3,.brand span
{
	font-family: "Stint Ultra Expanded",Georgia,serif;
	font-weight: 400;
}

nav
{
	height: 94px;
	padding: 0 clamp(24px,7vw,110px);
	position: absolute;
	z-index: 2;
	inset: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	border-bottom: 1px solid #ffffff3d;
}

.brand
{
	display: flex;
	align-items: center;
	gap: 12px;
}

.brand img
{
	width: 56px;
	height: 64px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.brand span { font-size: 17px; }

.links
{
	display: flex;
	align-items: center;
	gap: clamp(18px,3vw,42px);
	font-size: 14px;
}

.pill
{
	display: inline-block;
	border-radius: 999px;
	padding: 15px 21px;
	background: var(--cream);
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
}

.pill.outline
{
	padding: 11px 17px;
	border: 1px solid #ffffffcc;
	background: transparent;
	color: #fff;
}

.hero
{
	min-height: 94vh;
	position: relative;
	color: #fff;
	display: flex;
	align-items: center;
	padding: var(--section-padding);
	/* padding: 100px clamp(24px,7vw,110px) clamp(100px,5vh,250px); */
	background: linear-gradient(90deg,#08130dd1,#08130d57 56%,#08130d1f),url('images/property/hero-property1.jpg') center 90%/cover no-repeat;
}

.hero>div { max-width: 800px; }

.eyebrow
{
	margin: 1 0 12px;
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: clamp(9px,3vw,12px);
	font-weight: 700;
}

.rust { color: var(--rust); }

h1
{
	margin: 0;
	font-size: clamp(32px,5.5vw,100px);
	line-height: 1.1;
	letter-spacing: -.025em;
}

.lede
{
	margin: 34px 0 0;
	max-width: 620px;
	font-size: clamp(18px,2vw,23px);
	line-height: 1.55;
	color: #ffffffdb;
}

.actions
{
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 36px;
}

.actions>a:last-child
{
	font-size: 14px;
	border-bottom: 1px solid #ffffff99;
	padding-bottom: 5px;
}
 
.intro
{
	/* padding: clamp(80px,12vw,170px) clamp(24px,9vw,138px) clamp(70px,9vw,130px); */
	padding: var(--section-padding);
	display: grid;
	grid-template-columns: minmax(190px,.55fr) minmax(380px,1.45fr);
/* 	gap: 20px 8vw; */
}

.intro h2,.know h2,.experience h2,.night h2,.inquire h2,.nearby h2
{
	/* max-width: 850px; */
	margin: 0;
	font-size: clamp(36px,5vw,80px);
	line-height: 1.1;
}



.intro div>p
{
	/* max-width: 650px; */
	margin: 32px 0 0;
	font-size: 18px;
	line-height: 1.65;
	color: #526057;
}

.stays
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: var(--section-padding_wide);
	/* padding: 0 clamp(24px,5vw,76px) clamp(90px,11vw,165px); */
	gap: 18px;
}

.stays>article
{
	min-height: 590px;
	padding: clamp(30px,4vw,58px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.light { background: #e8e0d1; }

.dark
{
	background: var(--ink);
	color: #f8f2e8;
}

.dark img {
    filter: invert(1);
}


.stays>article>b
{
	align-self: flex-end;
	font-family: "Stint Ultra Expanded",Georgia,serif;
	font-weight: 400;
	opacity: .6;
}

.stays h3
{
	font-size: clamp(34px,4vw,56px);
	letter-spacing: -.025em;
	margin: 0 0 24px;
}

.stays div>p:not(.eyebrow)
{
	font-size: 17px;
	line-height: 1.65;
	opacity: .8;
}

.stays ul
{
	list-style: none;
	padding: 24px 0 0;
	margin: 24px 0 0;
	display: flex;
	flex-direction: column;	
	align-items: flex-start;
	gap: 12px 24px;
/* 	flex-wrap: wrap; */
	border-top: 1px solid #7776;
}
.stays li { 
	font-size: 13px; 
	display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;

}
.stays li img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}



.stays>article>a
{
	border-top: 1px solid currentColor;
	padding-top: 18px;
	margin-top: 40px;
	font-size: 14px;
	font-weight: 700;
}

/* Gallery Section Styling */
.gallery {
  background-color: transparent; 
}

/* Main Layout Container */
.custom-container {
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
 /*  margin-top: 24px; */
  box-sizing: border-box;
  
  /* Fluid padding */
  /* padding: clamp(90px, 12vw, 165px) clamp(24px, 9vw, 138px); */
  padding: var(--section-padding_wide);
}

/* Grid Layout (Mobile First: 1 Column) */
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}

/* Base Image Card Styling */
.grid-item {
  width: 100%;
  height: 350px; /* Mobile height stability */
  overflow: hidden;
  border-radius: 12px; /* Rounded image corners */
}

/* Make image fill its wrapper dynamically */
.grid-item img, .grid-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Desktop & Tablet Layout Adjustments (min-width: 768px) */
@media (min-width: 768px) {
  .mosaic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* force exactly 3 columns */
    grid-auto-rows: 400px; /* Default height for desktop grid cells */
  }

  .grid-item {
    height: auto; 
  }

  /* Mix orientation logic for 3 columns */
  .grid-item.landscape {
    grid-column: span 2; /* Spans full width of the 3 columns */
  }

  .grid-item.portrait {
    grid-row: span 2; /* Spans vertically across 2 rows */
  }
}

.experience
{
	background: #874730;
	color: #f8eee2;
	padding: var(--section-padding);
	/* padding: clamp(85px,12vw,165px) clamp(24px,9vw,138px); */
}

.experience-head
{
	display: grid;
	grid-template-columns: .7fr 1.3fr;
	gap: 24px 7vw;
}

.experience-head .eyebrow { grid-row: span 2; }

.experience-head>p:last-child
{
	grid-column: 2;
	max-width: 850px;
	font-size: 18px;
	line-height: 1.65;
	color: #ffffffbd;
}

.amenities
{
	display: grid;
	grid-template-columns: repeat(5,1fr);
	margin-top: clamp(70px,10vw,135px);
	border-top: 1px solid #ffffff52;

}

.amenities article { padding: 34px 28px 20px; }
.amenities article+article { border-left: 1px solid #ffffff52; }

.amenities h3
{
	font-size: 25px;
	margin: 54px 0 14px;
}

.amenities p
{
	font-size: 14px;
	line-height: 1.6;
	color: #ffffffb3;
}

.amenities img {
    filter: invert(1);
    width: 28px;
    height: 28px;

}

.night
{
	min-height: 72vh;
	display: flex;
	align-items: flex-end;
	padding: var(--section-padding);
	/* padding: clamp(70px,10vw,145px) clamp(24px,9vw,138px); */
	color: #fff;
	background: linear-gradient(0deg,#08110cb3,#08110c0d 68%),url('images/property/night-sky.jpg') center 62%/cover no-repeat;
}


.know
{
	/* padding: clamp(90px,12vw,165px) clamp(24px,9vw,138px); */
	padding: var(--section-padding);
	display: grid;
	grid-template-columns: .75fr 1.25fr;
	gap: 7vw;
}

.details { border-top: 1px solid #19241d40; }

.details p
{
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 18px;
	padding: 26px 0;
	margin: 0;
	border-bottom: 1px solid #19241d40;
	line-height: 1.6;
	color: #526057;
}

.details b
{
	font-family: "Stint Ultra Expanded",Georgia,serif;
	color: var(--rust);
}

.details strong { color: var(--ink); }

.inquire
{
	background: #213329;
	color: #f8f2e8;
	text-align: center;
	padding: var(--section-padding);
	/* padding: clamp(95px,14vw,190px) 24px; */
}

/* 
.inquire h2
{
	font-size: clamp(58px,8.5vw,118px);
	line-height: .85;
	margin: 0;
}
 */

.inquire>p:not(.eyebrow)
{
	max-width: 610px;
	margin: 38px auto;
	font-size: 18px;
	line-height: 1.65;
	color: #ffffffb3;
}

.inquire img {
    display: block;
    width: 35px;
    max-width: 35px;
    height: 35px;
    object-fit: contain;
    margin: 16px auto;
    flex: 0 0 35px;
}

footer
{
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 35px;
	padding: 26px clamp(24px,5vw,76px);
	background: #17241d;
	color: #ffffffb8;
	font-size: 12px;
}

footer img {
	width: 96px;
	height: 94px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

@media (max-width:900px)
{
	.hero aside { display: none; }
	.stays { grid-template-columns: 1fr; }
	.gallery { grid-template-columns: 1fr 1fr; }
	.kitchen { grid-column: 1/span 2; }
	
	.rainbow
	{
		grid-column: 1;
		grid-row: 2;
	}
	
	.bedroom
	{
		grid-column: 2;
		grid-row: 2;
	}
	
	.airstream
	{
		grid-column: 1/span 2;
		grid-row: 3;
	}
	
	.amenities { grid-template-columns: 1fr 1fr; }
	.know,.experience-head { grid-template-columns: 1fr; }
	.experience-head .eyebrow { grid-row: auto; }
	.experience-head>p:last-child { grid-column: auto; }
}

@media (max-width:760px)
{
	nav { height: 86px; }
	.links>a:not(.outline) { display: none; }
	.brand span { font-size: 14px; }
	
	.brand img
	{
		width: 54px;
		height: 54px;
	}
	
	.hero
	{
		min-height: 780px;
		background-position: 58% center;
		padding-top: 140px;
	}
	
	.actions
	{
		align-items: flex-start;
		flex-direction: column;
	}
	
	.intro { grid-template-columns: 1fr; }
	.gallery { grid-template-columns: 1fr; }
	
	.gallery figure,.kitchen,.rainbow,.bedroom,.airstream
	{
		grid-column: 1;
		grid-row: auto;
		min-height: 320px;
	}
	
	.rainbow { aspect-ratio: 3/4; }
	.amenities { grid-template-columns: 1fr; }
	
	.amenities article+article
	{
		border-left: 0;
		border-top: 1px solid #ffffff52;
	}
	
	footer
	{
		grid-template-columns: 1fr;
		text-align: center;
	}
	
	footer img { margin: auto; }
}

.nearby
{
	/* padding: clamp(90px,12vw,165px) clamp(24px,7vw,110px); */
	padding: var(--section-padding);
	background: #e8e0d1;
}

.nearby-head
{
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	align-items: end;
	gap: 7vw;
	margin-bottom: clamp(55px,7vw,95px);
}


.nearby-head>p
{
	margin: 0 0 6px;
	color: #526057;
	font-size: 18px;
	line-height: 1.65;
}


.places
{
	display: grid;
	grid-template-columns: repeat(5,1fr);
	margin-top: 18px;
	border-top: 1px solid #19241d40;
}

.places>a
{
	min-height: 330px;
	padding: 28px 24px 24px;
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #19241d40;
}

.places>a+a { border-left: 1px solid #19241d40; }

.places small
{
	margin-top: 34px;
	margin-bottom: 13px;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--rust);
	font-size: 10px;
	font-weight: 700;
}

.places h3
{
	margin: 0 0 15px;
	font-size: 22px;
	line-height: 1.12;
}

.places p
{
	margin: 0;
	color: #526057;
	font-size: 14px;
	line-height: 1.6;
}

.places b
{
	margin-top: auto;
	padding-top: 25px;
	font-size: 13px;
}

@media (max-width:900px)
{
	.nearby-head { grid-template-columns: 1fr; }
	.places { grid-template-columns: repeat(2,1fr); }
	.places>a { border-left: 0!important; }
	.places>a:nth-child(even) { border-left: 1px solid #19241d40!important; }
}

@media (max-width:760px)
{
	
	.places { grid-template-columns: 1fr; }
	
	.places>a,.places>a:nth-child(even)
	{
		border-left: 0!important;
		min-height: 280px;
	}
}