@charset 'utf-8';

body {

	--padding-inline: 22px;

	--inner-max-width: 1400px;

	--color-dark: #222;
	--color-light: #eee;
	--color-border: #ddd;

	--font-title: 'Libre Baskerville', serif;
	--font-text: 'Libre Baskerville', sans-serif;

	--transition-duration: 300ms;


}

@media (min-width: 768px) {
	body {
		--padding-inline: 20px;
	}
}

@media (min-width: 1280px) {
	body {
		--padding-inline: 40px;
	}
}

@layer reset {

	*, ::before, ::after {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		-webkit-tap-highlight-color: transparent;
		-webkit-text-size-adjust: 100%;
	}
	html {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
	  scrollbar-gutter: stable;
	}
	img, svg, picture, video, iframe {
		display: block;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}
	svg:not(:root) {
		overflow: hidden;
	}
	table {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
	}
	code, pre {
		font-family: monospace, serif;
	}
	blockquote, q {
		quotes: none;
		&::before, &::after {
			content: '';
			content: none;
		}
	}
	button, input, select, textarea {
		font: inherit;
		border-radius: 0;
	}
	label {
		display: block;
	}
	label, button, input[type="file"] {
		cursor: pointer;
	}
	input[type="search"] {
		-webkit-appearance: textfield;
		&::-webkit-search-cancel-button, &::-webkit-search-decoration {
			-webkit-appearance: none;
		}
	}
	input[type="number"]::-webkit-outer-spin-button,
	input[type="number"]::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}
	input[type="number"],
	input[type="number"]:hover,
	input[type="number"]:focus {
		appearance: none;
		-moz-appearance: textfield;
	}
	[disabled], :disabled {
		cursor: default;
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	a:hover {
		color: currentColor;
	}

	@media (prefers-reduced-motion: reduce) {
		body * {
			animation: none !important;
			transition-duration: unset !important;
		}
	}

}

@layer text {

	body {
		font-size: 14px;
		font-family: var(--font-text);
		font-style: normal;
		font-weight: 400;
		color: var(--color-dark);
	}

	p:not(:last-child) {
		margin-bottom: 1lh;
	}

	p a {
		transition: all var(--transition-duration) linear;
		text-decoration: underline;
		text-decoration-style: solid;
		text-underline-offset: 2px;
		text-decoration-thickness: 1px;
		text-decoration-color: currentColor;

		&:hover {
			text-decoration-color: transparent;
		}
	}
	ol, ul {
		padding-left: 30px;

		&:not(:last-child) {
			margin-bottom: 1lh;
		}
	}
	li {
		margin: 0;
	}

}

@layer h {

	.h1, h1,
	.h2, h2,
	.h3, h3 {
		font-family: var(--font-title);
		font-optical-sizing: auto;
		font-style: normal;
		font-weight: 400;
	}

}

@layer other {

	:has( > .inner) {
		padding-inline: var(--padding-inline);
	}
	.inner {
		max-width: var(--inner-max-width);
		margin-inline: auto;
	}

	.noscroll {
		overflow: hidden;
	}

	.fit {
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		object-fit: cover;
		object-position: center;
	}

}

@layer head {

	.head {
		/*position: sticky;
		top: 0;
		z-index: 10;*/
	}
	.head_row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100px;
	}
	.head h1 {
		font-size: 23px;
	}
	.head p {
		margin-top: 5px;
		font-size: 14px;
	}

	@media (min-width: 1024px) {
		.head {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
		}
		.head_row {
			justify-content: flex-end;
			text-align: right;
		}
	}

}

@layer promo {

	.promo {
		background: #f3e4d8;
		overflow: hidden;
	}
	.promo_row {
		display: grid;
		justify-items: center;
		gap: 20px;
		padding-block: 20px;
	}
	.promo img {
		transition: all 600ms linear;
		opacity: 0;
	}
	.promo img.shown {
		opacity: 1;
	}

	@media (max-width: 1023px) {
		.promo img.vertical {
			max-width: 60vw;
		}
		.promo img:nth-child(1) {
			transform: translate(50%, 0);
		}
		.promo img:nth-child(2) {
			transform: translate(0, -50%);
		}
		.promo img:nth-child(3) {
			transform: translate(0, 50%);
		}
		.promo img.shown {
			transform: translate(0, 0) !important;
		}
	}

	@media (min-width: 1024px) {
		.promo_row {
			position: relative;
			height: var(--jsh);
		}
		.promo img {
			position: absolute;
			top: 50%;
			left: 50%;
		}
		.promo img:nth-child(1) {
			transform: translate(0%, -50%);
		}
		.promo img:nth-child(2) {
			transform: translate(-50%, -100%);
			margin-top: -20px;
			margin-left: 40px;
		}
		.promo img:nth-child(3) {
			transform: translate(-50%, 0%);
			margin-left: -30px;
			margin-top: 30px;
		}
		.promo img.shown {
			transform: translate(-50%, -50%) !important;
		}
	}

}

@layer about {

	.about {
		padding-block: 50px;
		font-size: 24px;
		line-height: 1.4;
	}

	@media (min-width: 1024px) {
		.about {
			padding-block: 100px;
		}
		.about .inner {
			max-width: 800px;
			text-align: center;
			font-size: 30px;
		}
	}

}

@layer gallery {

	@media (max-width: 1023px) {
		.gallery {
			padding-inline: 0;
		}
		.gallery img {
			width: 100%;
		}
	}

	@media (min-width: 1024px) {
		.gallery .inner {
			max-width: 960px;
		}
		.gallery_row {
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-between;
		}
	}

}

@layer foot {

	.foot {
		margin-top: 50px;
		padding-block: 20px;
		letter-spacing: 0.05em;
		font-size: 16px;
		text-align: center;
	}
	.foot .address {
		line-height: 2;
	}

	@media (min-width: 1024px) {
		.foot_row {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			gap: 20px;
		}
		.foot .address {
			text-align: left;
		}
		.foot_contacts {
			text-align: right;
		}
		.foot_copyright {
			flex: 0 0 100%;
		}
	}

}