/*@import url('../../fonts/Montserrat/font.css');*/
@import url('../../fonts/Noto%20Sans/font.css');

:root{

	--gold:#d5b555;
	--base-font-size:clamp(11pt,1vw,14pt);
	--font-size-xs:calc(var(--base-font-size) * 0.75);
	--base-gap:calc(var(--base-font-size) * 4);
}

html{
	scroll-behavior: smooth;
}

body{
	font-family:'Noto Sans','Helvetiva',Arial, Verdana,sans-serif;
	font-weight:400;
	font-size:var(--base-font-size);
	line-height:1.5em;
	padding:var(--base-gap) calc(var(--base-gap) * 2);
	background:#fff;
	color:#000;

}

a:link,a:visited{
	color:inherit;
}

a:hover{
	color:var(--gold);
}



h1,h2{
	
	text-transform:uppercase;
	font-family:'Montserrat',sans-serif;
	font-weight:500;
	font-size:calc(3 * var(--base-font-size));
	line-height:calc(3 * var(--base-font-size));
	transform:scale(0.8,1);
	transform-origin:left center;
}

h1{
	font-size:clamp( 24pt , calc(3.0 * var(--base-font-size)) , 48pt);


	line-height:1em;
	/*
	margin-bottom:calc(1 * var(--base-gap));
	margin-top:0;*/
	margin:0;

	
	line-height:1em;
}

h1 strong{
	display:block;
	width:100%;
}

h1{
	display:none;
}

#navigation h1{
	display:block;
	text-align:left;
}

h2{
	color:var(--gold);
	margin-top:0;
	margin-bottom:calc(1 * var(--base-gap));
}

h3{
	font-size:var(--base-font-size);
	font-weight:600;
}

strong{
	font-weight:600;
}

strong em{
	font-style:inherit;
	color:var(--gold);
}

h1 strong{
	font-weight:600;
}

h2 + p strong,
.layout.text-and-images-in-second-area .area:not(:has(p + p)) > h3,
.layout.image-and-text-in-2-areas .area:not(:has(p + p)) > h3{
	font-size:1.5em;
	font-weight:300;
	line-height:1.5em;
}

p:has(small){
	font-size:var(--font-size-xs);
	line-height:1.5em;
}

small{
	font-size:font-size:var(--font-size-xs);
	line-height:1.5em;
	strong{
		font-weight:inherit;
		text-decoration:underline;
	}
}

blockquote{
	margin:0;
	padding:0;
}

blockquote p{
	font-weight:600;
	margin-top:0;
}

blockquote p:before{
	content:'» ';
}
blockquote p:after{
	content:' «';
}

img{
	width:100%;
	height:auto;
}

.container-fluid{
	max-width:1200px;
	margin: calc(4 * var(--base-gap)) auto calc(4 * var(--base-gap)) auto;
	width:100%;
	/*position:relative;*/
}

.layout .area > *{
	margin-top:0;
}

.layout.single-area{
	
}

.layout.no-images-and-2-areas{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:var(--base-gap);
}

.layout.no-images-and-3-areas{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:var(--base-gap);
}

.layout.image-and-text-in-2-areas{
	display:grid;
	grid-template-columns:2fr 1fr;
	gap:var(--base-gap);
	.area + .area{
		position:relative;
		h3{
			width:100%;
		}
		h3 + h3{
			position:absolute;
			bottom:0;
		}
	}
	
}

.layout.images-and-text{
	p:has(img + img){
		width:100%;
		display:grid;
		grid-template-columns:1fr 2fr;
		gap:var(--base-gap);
		img{
			width:100%;
			height:100%;
			object-fit:contain;

		}
		&+ p{
			margin-top:4em;
		}
	}
	
}

.layout.text-and-images-in-second-area{
	display:grid;
	grid-template-columns:1fr 2fr;
	gap:var(--base-gap);
	p:has(img){
		display:flex;
		flex-flow:column nowrap;
		gap:var(--base-gap);
		justify-content:space-between;
		img{
			width:100%;
			height:auto;
		}
		
	}
	.area{
		position:relative;
	}
	.area h3 + p:not(:has(+p)){
		position:absolute;
		bottom:var(--base-font-size);
		font-size:var(--font-size-xs);
		line-height:1.5emr;
	}
	
}

.section + .section{
	padding-top:calc(2 * var(--base-gap));
}




#navigation{



	position:absolute;
	top:0;
	left:0;
	z-index:2;
	text-transform:uppercase;
	padding:calc(2 * var(--base-gap));
	
	text-align:right;
	font-size:calc(2 * var(--base-font-size));
	line-height:1em;
	width:100vw;
	box-sizing:border-box;
	height:100vh;
	transition:all 500ms ease-in-out;


	.container-fluid{
		display:grid;
		grid-template-areas: "title toggle " "nav nav";
		width:100%;
		max-width:1200px;
		box-sizing:border-box;
		height:auto;
		margin:0 auto;
		justify-items:start;
		align-items:start;
		gap:0;
		
	}

	h1{
		grid-area:title;
		
	}

	ul{

		grid-area:nav;
		align-self:start;
		max-width:1200px;
		list-style-type:none;
		margin:0 auto;
		padding:1em;
		box-sizing:border-box;
		opacity:0;
		background:transparent;
		
		display:grid;
		gap:var(--base-font-size);
		grid-template-columns:1fr 1fr 1fr;
		text-align:left;
		margin-top:var(--base-font-size);
		height:auto;
		display:none;

		li{
			margin-right:0.7em;

		}
		a{
			display:block;
			text-decoration:none;
			
			width:100%;
			height:100%;
			padding:0.5em;
			box-sizing:border-box;
			transition:all 400ms ease-in-out;

		}
		a:hover{
			color:#000;
			background:#fff;
		}
		padding-top:1em;

	}
	a.toggle{
		grid-area: toggle;
		margin:0 auto;
		color:var(--gold);
		font-family:'Montserrat',sans-serif;
		font-weight:500;
		font-size:calc(4 * var(--base-font-size));
		transform:scale(0.8,1);
		transform-origin:left center;
		text-decoration:none;
		display:inline-block;
		text-align:right;
		justify-self:end;
		transform:rotate(90deg) translateX(0em) translateY(0.4em);
		transform-origin:center center;
		width:1em;
		height:1em;
		margin:0;
		padding:0;
	}
	&.hover{
		background:var(--gold);
		ul{
			display:grid;
			opacity:1;	
		}
		a.toggle{
			color:#000;
		}
	}
	
	

}


@media (max-width: 960px) {
	:root{
		--base-gap: calc(var(--base-font-size) * 2);
	}
	body{
		padding:calc(var(--base-gap));
		padding-top:calc(var(--base-gap) + 2 * var(--base-font-size));
	}
	.layout,
	#navigation ul{
		display:flex !important;
		flex-flow:column nowrap;
	}	

	h1{
		font-size:clamp( 24pt , calc(2.5 * var(--base-font-size)) , 48pt);
	}
	h3,p{
		position:relative !important;
	}
	#navigation{
		font-size:calc(3 * var(--base-font-size));
		line-height:calc(3 * var(--base-font-size));
		top:0;
		left:0;
		padding-top:calc(var(--base-gap));
		padding-left:calc(1 * var(--base-gap));
		/*
		.container-fluid{
			width:100%;
			padding:calc(var(--base-gap));
			box-sizing:border-box;
		}
		*/
	}
}