h2 {
	font-size: var(--large);
    font-weight: 500;
    margin: 1vh 0;
}
#land {
	background: var(--bg);
	background-image: var(--grain);
	display: flex;
	top:-100vh;
	width: 100vw;
	height: 100dvh;
	align-items: center;
	justify-content: center;
	position: fixed;
	overflow: hidden;
	transition: .4s;
	z-index: 1;
}
#landBg {
	opacity: .2;
	display: grid;
	position: absolute;
}
#landBg img {
	border-radius: 4vh;
	border: solid transparent 2vh;
	width: 100%;
	box-sizing: border-box;
	grid-row-start: span 2;
	grid-column-start: span 2;
}
#landBg div {
	grid-column-start: span 2;
}
#landCont {
	text-align: center;
	border-radius: 4vh;
	font-size: 7vh;
	padding: 5vh;
	z-index: 2;
	animation: land-in 1s, fade-in 1s;
}
#landCont img {
	width: 25vh;
	border-radius: 50%;
	border: .2vh solid;
	margin-bottom: 5vh;
}
#land label {
	cursor: pointer;
	font-size: var(--small);
	display: block;
	margin-top: 10vh;
	transition: .4s;
}
#landBtn:checked + #land {
	top: 0;
}
#stickyWrap::before {
	content: '';
	position: sticky;
	top: 0;
	left: 0;
	background: var(--highlight);
	display: block;
	height: .2vh;
	width: 0;
	margin-bottom: -.3vh;
	animation: scroll-pos linear;
}
#finalWrap {
	padding: 10vh;
	display: grid;
	grid-template-columns: repeat(8, 50vh);
	grid-gap: 4vh;
	align-items: center;
	width: fit-content;
}
.card {
	height: 80svh;
	display: grid;
	gap: 4vh;
}
.card a {
	color: var(--highlight);
}
.card a > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	position: relative;
	font-size: var(--large);
	overflow: hidden;
	border: .2vh solid;
	border-radius: 4vh;
	box-sizing: border-box;
	padding: 3vh;
	box-shadow: inset 0 -20px 100px 0px rgb(0,0,0,0.1), 0px 2px 4px 0px rgba(0, 0, 0, .5);
	filter: url(#shadow);
	transition: .4s;
	background-color: var(--theme);
	background-image: var(--grain);
}
.card svg {
	width: 4vh;
	height: 4vh;
}
.card .cardCenter {
	justify-content: center;
	flex-direction: column;
}
.cardCenter svg {
	padding-bottom: 1vh;
	transition: .4s;
}
.cardText {
	width: fit-content;
}
.subCard {
	font-size: var(--small);
	padding-left: 5vh;
}
.carousel {
	overflow: scroll;
	scroll-snap-type: y mandatory;
	width: 100%;
	height: 100%;
	transform: scale(1.23);
}
.carPic, .bgImg {
    background-size: cover;
    background-position: center;
}
.carPic {
	height: 100%;
	scroll-snap-align: center;
}
.carMark {
	position: absolute;
    right: 2vh;
    bottom: 0;
}
.carMark span {
    display: block;
	background: var(--highlight);
    width: 1.5vh;
    height: 1.5vh;
    margin: 2vh 0;
    border-radius: 50%;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .5);
	transition: .4s;
	&:hover {
		transform: scale(1.5);
	}
}
.carMark .on {
	transform: scale(1.5);
}
.carouselCaption {
    white-space: pre-line;
	font-size: var(--small);
	font-style: italic;
	text-align: center;
}
.carouselCaption.animate {
	animation: caption-fade 10s;
}
#calendar, .blog {
	height: 100%;
	width: 100%;
	position: relative;
}
#dots {
	display: grid;
	position: absolute;
	bottom: 0;
	width: 100%;
	grid-template-columns: auto auto auto auto auto auto auto;
	grid-template-rows: auto auto auto auto auto auto;
}
#dots span {
	background-color: var(--highlight);
	border-radius: 50%;
	margin: 30%;
	aspect-ratio: 1;
	position: relative;
	display: block;
	transition: .4s;
}
#dots span::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
	border: transparent solid .2vh;
    border-radius: 50%;
    box-sizing: border-box;
	transition: .4s;
}
#dots span.no {
	display: none;
}
#dots span.today::before {
	border: var(--highlight) solid .2vh;
	transform: scale(1.5);
}
.blog {
	display: grid;
	align-content: space-between;
}
.blogCont {
	overflow: auto;
}
.blogBtn {
	margin-top: 5vh;
	font-size: var(--small);
}
.blogBtn::before {
	content: '';
	display: block;
	width: 1.5vh;
	height: 1.5vh;
	border-radius: 50%;
	background: var(--highlight);
	box-shadow: 3.5vh 0 0 var(--highlight), 7vh 0 0 var(--highlight);
	margin-bottom: 1vh;
	transition: .4s;
}
.audioPlay {
	aspect-ratio: 1;
	cursor: pointer;
}
.audioCont {
	width: 10vh;
    background: rgb(255,255,255,.5);
	background-image: var(--grain);
    height: 10vh;
    display: flex;
	color: var(--theme);
    align-items: center;
    justify-content: center;
	position: relative;
    border-radius: 50%;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .5);
    backdrop-filter: blur(10px);
	transition: .4s;
}
play-icon, pause-icon {
	width: 100%;
	height: 100%;
	padding: 30%;
	box-sizing: border-box;
	opacity: 0;
	position: absolute;
	transform: scale(0);
	transition: .2s;
}
play-icon svg{
	transform: translate(3px, 1px);
}
.audioTog {
	transform: scale(1);
	opacity: 1;
}
.modal {
	display: none;
	animation: appear .4s;
}
.modal:target {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0,.5);
    backdrop-filter: blur(10px);
	display: flex;
	font-size: var(--large);
	align-items: center;
	justify-content: center;
	text-align: center;
}
.modal > a {
	position: fixed;
    width: 100%;
    height: 100%;
	cursor: default;
}
.modalGrid {
	display: grid;
}
.modalGrid svg {
	width: 10vh;
	height: 10vh;
	display: block;
	margin-top: 5vh;
	transition: .4s;
}
@keyframes appear {
	from {opacity: 0;}
	to {opacity: 1;}
}
@keyframes move {
	to {transform: translateX(calc(-100% + 100vw));}
}
@keyframes scroll-pos {
	to {width: 105vw;}
}
@keyframes land-in {
	from {
		transform: translateY(5vh);
	}
	to {
		transform: translateY(0);
	}
}
@keyframes caption-fade {
	0% {opacity: 0;}
	5% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}

/*touch baseline (free horizontal scroll)*/
@media (pointer: coarse) {
	body {
		overflow: hidden;
	}
	#stickyWrap {
		overflow-y: hidden;
		overflow-x: scroll;
	}
	#stickyWrap::before {
		animation-timeline: scroll(x);
	}
	plus-icon {
		position: fixed;
		width: 3.5vh;
		bottom: 3vh;
		right: 3vh;
		color: var(--highlight);
		transition: .4s;
	}
	nav {
		position: fixed;
		width: 100vw;
		height: 100dvh;
		top: -100vh;
		left: 0;
		background: var(--theme);
		box-shadow: inset 0 -20px 100px 0px rgb(0,0,0,0.2);
		transition: .4s;
	}
	#navCont {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		background-image: var(--grain);
	}
	#navCont span {
		display: block;
		text-align: center;
		font-size: var(--large);
		padding: 3vh;
	}
	#navCont span a {
		color: var(--highlight);
	}
	#phoneNav:checked + nav {
		top: 0;
	}
	#phoneNav:checked + nav plus-icon {
		transform: rotate(-225deg);
	}
	/*gallery - portrait*/
	@media (orientation: portrait) {
		#stickyWrap {
			scroll-snap-type: x mandatory;
		}
		#stickyWrap::before {
			animation-range: 11%;
		}
		#finalWrap {
			height: 100dvh;
			grid-template-columns: repeat(8, 85vw);
			box-sizing: border-box;
		}
		.card {
			scroll-snap-align: center;
		}
		@media (min-aspect-ratio: 3/4) {
			#finalWrap {
				grid-template-columns: repeat(8, 70vw);
			}
		}
	}
}

/*keyboard and mouse (computers, non-touch, vertical scroll)*/
@media (pointer: fine) and (hover: hover) {
	nav {
		display: none;
	}
	.phoneLang {
		display: none;
	}
	#mainWrap {
		height: 300vh;
		overflow: visible;
		view-timeline-name: --main-pin;
		view-timeline-axis: block;
	}
	#stickyWrap {
		height: 100vh;
		position: sticky;
		top: 0;
		overflow-x: hidden;
	}
	#stickyWrap::before {
		animation-timeline: --main-pin;
		animation-range: contain 0% contain 100%;
	}
	#finalWrap {
		animation: linear move forwards;
		animation-timeline: --main-pin;
		animation-range: contain 0% contain 100%;
	}
	.card a > div {
		will-change: transform;
		&:hover {
			box-shadow: inset 0 -20px 100px 0px rgb(0,0,0,0.1), 0px 5px 5px 0px rgba(0, 0, 0, .5);
			background-color: #e2cdb1;
			color: #042424;
			transform: scale(1.01);
			& #dots span {
				filter: invert(1);
			}
			& .blogBtn::before {
				content:'';
				filter: invert(1);
			}
		}
	}
	.modalGrid svg:hover {
		opacity: .5;
	}
	.carousel {
		overflow: hidden;
	}
	#dots div:hover span::before {
		border: var(--highlight) solid .2vh;
		transform: scale(1.5);
	}
	.deskBtn a, lang-icon {
		color: var(--highlight);
	}
	#excla {
		left: 3vh;
		transition: transform 10s;
		&:hover {
			transform: rotate(3600deg);
		}
	}
	#insta {
		right: 3vh;
		z-index: 2;
	}
}
/*extra shenanigans that work better with other considerations*/
@media (orientation: portrait) {
	#landBg {
		grid-template-columns: repeat(6, 15vh);
		grid-template-rows: repeat(12, 15vh);
	}
	.modalGrid {
		justify-content: center;
	}
}
@media (orientation: landscape) {
	#landCont {
		border: .2vh solid;
		background: var(--bg);
		filter: url(#shadowLand);
	}
	#landBg {
		grid-template-columns: repeat(12, 11.5vw);
		grid-template-rows: repeat(6, 11.5vw);
	}
	.modalGrid {
		grid-auto-flow: column;
		justify-content: center;
		grid-gap: 5vh;
	}
}