@charset "UTF-8";
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
}
* {
	/*
color: #FFFFED; v1 yellow
*/
	color: #4c4323;
}
#nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: auto;
	z-index: 10;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	box-sizing: border-box;
	padding: 7px 20px 0 0;
}
#nav a {
	font-size: 18px;
	display: block;
	margin: 0 5px;
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	cursor: pointer;
	opacity: 1;
	transition: opacity 500ms ease-in-out;
	letter-spacing: 1px;
	font-weight: 300;
}
#nav a:hover {
	opacity: .5;
}
#nav a.nav-active {
	opacity: .5;
	transition: opacity 500ms ease-in-out;
}
#nav a.nav-active:hover {
	opacity: 1;
}
#header {
	position: fixed;
	top: 40px; /* a little padding from the top */
	left: 0;
	width: 100vw;
	height: auto;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;     /* <-- this centers children horizontally */
	justify-content: flex-start;
	pointer-events: none;    /* optional: let clicks pass through if needed */
}
#header img:nth-of-type(1) {
	width: 400px;
	background: transparent;
}
#header img:nth-of-type(2) {
width:calc(400px * .4518);
	margin: 20px 0 0 0;
	background: transparent;
}

#header * {
	text-align: center;      /* helpful for multi-line h1 or h2 */
	padding: 0;
	margin: 0;
}
#header h1 {
	font-size: 40px;
	font-family: 'Lora', serif;
	font-weight: 300;
	margin: 0;
	letter-spacing: 2px;
}
#header h2 {
	font-family: 'Inter', sans-serif;
	font-weight: normal;
	margin: 0;
	letter-spacing: 2px;
	font-size: 28px;
}
#header h1 span {
	font-size: 34px;            /* Make the “c” smaller */
	vertical-align: top;         /* Align to top of capital letters */
	position: relative;
	top: -5px;                 /* Fine-tune to sit snugly */
}


/* ─── WebKit Browsers (Chrome, Safari, Edge, etc.) ─── */
::-webkit-scrollbar {
 width: 12px;                  /* width of the vertical scrollbar */
/* 
	  background-color: #f0f0f0;
	  overall scrollbar background (optional) */
}

::-webkit-scrollbar-track {
 background-color: #b4ae91;    /* the “track” area behind the thumb */
}

::-webkit-scrollbar-thumb {
 background-color: #98906d;       /* the draggable thumb */
 border-radius: 6px;           /* round the corners of the thumb */
 border: 0;    /* optional: give the thumb a border so it stands out against the track */
}

::-webkit-scrollbar-thumb:hover {
 background-color: #878061;       /* darker thumb on hover */
}
/* ─── Firefox ─── */
/* “scrollbar-width” and “scrollbar-color” are Firefox-only */
html {
	/* “thin” makes the scrollbar a bit narrower than default */
	scrollbar-width: thin;
	/* first color = thumb, second color = track */
	scrollbar-color: #98906d #b4ae91;
}
/* If you want to target a specific container instead of the whole page,
   replace “html” with the selector of that container, e.g. “.my-scroll-box”. */


/* HOME */

body.page-home {
	overflow: hidden;
}
.slideshow {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
}
.slideshow img {
	/* WORKS
	  position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 2s ease;
	  
	 */ 
	  
	position: absolute;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 0;
	transition: opacity 2s ease-in-out;
	backface-visibility: hidden;
	will-change: opacity;
}
.slideshow img.active {
	opacity: 1;
	z-index: 1;
}
/*

footer {height:30px;position:fixed;bottom:0;left:0;width:100vw;z-index:10;background:#5C4033;display:flex;
align-items: center;
  justify-content: flex-end;padding:00;}
footer a {color:lightyellow;font-size:18px;text-decoration:none;display:block;padding:0;margin:0 30px 0 0;font-family: 'Lora', serif;letter-spacing:.5px;}

*/

/* GALLERY */

body.page-gallery {
	align-items: center;       /* center .gallery horizontally (optional) */
	min-height: 100vh;         /* ensure body is at least the height of the viewport */
	margin: 0;                 /* remove default body margins */
	/*
  background: #a9a17a; 
  

background: rgba(165, 165, 105, 1);


background: #878f5e;
    
  */
	background: #bab5a1;
	background: rgba(186, 181, 161, .6);
	overflow: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;   /* ⬅︎ stop vertical centring */
	padding: 130px 0 0px 0;
	box-sizing: border-box;
}
body.page-gallery .gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
}
body.page-gallery.three-up .gallery {
	padding: 0px 0 20px 0;
	gap: 20px;
}
body.page-gallery.four-up .gallery {
	height: calc(100vh - 150px);
	padding: 50px 0;
}
body.page-gallery .gallery img {
	cursor: pointer;
	transition: opacity .3s;
}
body.page-gallery .gallery img:hover {
	opacity: .7;
}
body.page-gallery.three-up .gallery img {
	display: block;
	width: auto;
	height: 214px;/*
margin: 0 20px 20px 20px;	

*/

}
body.page-gallery.four-up .gallery img {
	display: block;
	width: 20%;
	height: auto;
	margin: 0 20px;
}
body.page-gallery.two-up .gallery img {
	display: block;
	width: 40%;
	height: auto;
	margin: 0 15px 30px;
}
body.page-gallery p {
	font-size: 18px;
	font-family: 'Inter', serif;
	font-weight: 300;
	letter-spacing: .5px;
	margin: 10px 0 0;
}
body.page-gallery p:last-of-type {
	margin: 10px 0 20px 0;
}
/* CONTACT */

body.page-contact {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	background: rgba(146, 172, 159, .7);
	box-sizing: border-box;
	padding: 110px 0 0 0;
}
body.page-contact .contact {
	margin: 0;
	width: 80vw;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 0 10vw;
	height: calc(100vh - 110px);
	box-sizing: border-box;
	text-align: center;
}
body.page-contact .contact a, body.page-contact .contact * {
	padding: 5px 0;
}
body.page-contact .contact a, body.page-contact .contact p {
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	cursor: pointer;
	opacity: 1;
	transition: opacity 500ms ease-in-out;
	letter-spacing: 1px;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.3;
}
body.page-contact .contact a:hover {
	opacity: .5;
}
body.page-contact .contact a:nth-of-type(1) {
	font-size: 22px;
	margin: 0 0 0 0;
	display: block;
}
body.page-contact .contact a:nth-of-type(2) {
	font-size: 18px;
	display: block;
}
/*––– full-screen overlay –––*/
#lightbox * {
	outline: none !important;
}
#lightbox {
	position: fixed;
	inset: 0;                       /* cover entire viewport */
	background: rgba(46, 37, 25, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s;
	z-index: 9999;
}
#lightbox.open {
	visibility: visible;
	opacity: 1;
}
/* Make click outside slide close the overlay */
#lightbox::before {
	content: "";
	position: absolute;
	inset: 0;
}
/*––– Swiper inside the overlay –––*/
#lightbox .swiper-wrapper {
	transition-timing-function: cubic-bezier(.25, .8, .25, 1);  /* ease-in-out */
}
#lightbox .swiper {
	width: 80vw;               /* 80 % wide */
	height: 80vh;
	z-index: 1;                /* above the ::before “backdrop” */
}
#lightbox .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Close button */
#lightbox .close-btn {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 36px;
	cursor: pointer;
	z-index: 2;
}
#lightbox .close-btn, .swiper-button-next, .swiper-button-prev {
	color: #c8c3af;
}
/* Mobile toggle button */
#menu-toggle {
	display: none; /* Hidden by default */
}
.slideshow img.active.home-desktop {
	display: block;
}
.slideshow img.active.home-mobile {
	display: none;
}

@media (max-width: 767px) {
/* ················································· start MOBILE */ 

.slideshow img.active.home-desktop {
	display: none;
}
.slideshow img.active.home-mobile {
	display: block;
}
body.page-gallery {
	padding: 50px 0 0px 0;
}
body.page-gallery .gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	box-sizing: border-box;
	width: 100%;
}
body.page-gallery.two-up .gallery img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0 0px 30px;
	pointer-events: none;
	cursor: none;
}
#menu-toggle {
	display: block; /* Show hamburger */
	cursor: pointer !important;
	font-size: 28px;
	background: none;
	border: none;
	color: #4c4323;
	position: fixed;
	right: 6px;
	top: 2px;
	/*
	font-family: Helvetica, Arial, sans-serif;

	*/
	  -webkit-tap-highlight-color: transparent;

}

#menu-toggle::-moz-focus-inner {
  border: 0;
}


#menu-toggle:focus,
#menu-toggle:active {
  outline: none;
  box-shadow: none;
  background: none;
}
#menu-toggle::before {
  content: '☰';
  font-size: 28px;
  line-height: 1;
}

#menu-toggle.menu-open::before {
  content: '×';
  font-size: 30px; /* larger X */
 position: relative;
  top: 1px;
  right: 1px; 
}


body.page-home #header {pointer-events:auto;top: 70px;}
body.page-home #header img:nth-of-type(1) {
	width: 90vw;
	background: transparent;
}
body.page-home #header img:nth-of-type(2) {
width:calc(90vw * .4518);
	margin: 20px 0 0 0;
	background: transparent;
}





body.page-home #header.nav-open,
body.page-gallery #header, 
body.page-contact #header {
	top: 14px;
	flex-direction: row;
	align-items: baseline;
	padding: 0 0 0 6px;
	box-sizing: border-box;
	pointer-events: auto;
}
body.page-home #header.nav-open img:nth-of-type(1),
body.page-gallery #header img:nth-of-type(1), body.page-contact #header img:nth-of-type(1) {
	width: 210px;
}
body.page-home #header.nav-open img:nth-of-type(2),
body.page-gallery #header img:nth-of-type(2), body.page-contact #header img:nth-of-type(2) {
 width: calc(210px * .4518);
	margin: 0 0 0 10px;
	background: transparent;
	position: relative;
	top: 1px;
}


#nav {
	display: none;
	flex-direction: column;
	align-items: center;
	background: rgba(186, 181, 161, 1);
	padding: 0;
	z-index: 2;
	height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	justify-content: center;
	box-sizing: border-box;
	overflow: hidden;
}
#nav a {
	margin: 10px 0;
	font-size: 24px;
}
#nav.open {
	display: flex;
}
body.page-contact {
	justify-content: flex-start;
	min-height: 100vh;
	padding: 50px 0 0 0;
	height: 100vh;
	overflow: auto;
}
body.page-contact .contact {
	margin: 0;
	width: 90vw;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	padding: 0 5vw;
	height: calc(100vh - 50px);
	box-sizing: border-box;
	text-align: center;
	overflow: auto;
}
body.page-contact .contact a:nth-of-type(1) {
	font-size: 18px;
	margin: 0 0 0 0;
	display: block;
}
/* ················································· end MOBILE */ 
}