#homepage {
	--pane3-bkg: rgb(198, 255, 252);
	--hero-map-width: min(40vw, 400px);
	--pane2-map-width: min(30vw, 300px);
}

#homepage .sticky-bkg {
	height: calc(var(--content-height) * 2);
}


#homepage .hero .flex-grow {
	--padding-tb: 1%;
	--padding-l: 5%;
	--padding-r: 2.5%;

	width: 100%;
	box-sizing: border-box;

	padding: var(--padding-tb) var(--padding-l) var(--padding-tb) var(--padding-r);

	flex-grow: 1;

	display: flex;
	position: relative;
}

#homepage .pane-1 .flex-grow {
	--square: min(30vw, 50%);
	--padding-each: calc(var(--content-height) * 0.05);

	align-items: flex-start;
	justify-content: space-between;
}

#homepage .pane-1 #hero-map {
	align-self: flex-start;
	flex-grow: 0;
	flex-shrink: 0;
}

#homepage .pane-1 .right-items {
	width: calc(100% - var(--hero-map-width));
	height: 100%;

	display: flex;
	flex-direction: column;
}

#homepage .pane-1 .entry-cont {
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;

	justify-content: center;
	align-items: center;
	flex-direction: row;
}

#homepage .pane-1 .entry {
	--padding-tb-each: 0;

	width: 50%;
	height: 80%;

	position: relative;

	box-sizing: border-box;
}

#homepage .pane-1 .entry:first-child {
	border-right: var(--period-thin-border);
}


#homepage .pane-1 .entry .header {
	width: 100%;
	height: 45%;

	display: flex;
	justify-content: space-evenly;
	flex-direction: row;
	align-items: center;
}

#homepage .pane-1 .entry .logo {
	max-height: 60%;
	max-width: 50%;

	flex-shrink: 0;
}

#homepage .pane-1 .entry .logo:has(use[href="#bbc-full"]) {
	padding-right: 10%;
}

#homepage .pane-1 .entry .grade {
	font-family: Luckiest Guy;
	font-size: 12vmin;

	flex-shrink: 0;
}

#homepage .pane-1 .pie-cont {
	width: 80%;
	height: 55%;

	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	bottom: 0;
}

#homepage .pane-1 .table-cont {
	width: 100%;
	
	display: flex;
	justify-content: space-between;
}

#homepage .pane-1 .table-cont table {
	margin: 0;
	width: min-content;
	flex: auto;
}

#homepage .pane-1 .footer {
	width: 100%;
	height: fit-content;
	box-sizing: border-box;

	flex-shrink: 0;
	
	margin-top: auto;

	padding: 0 var(--padding-l) 2% var(--padding-l);
}

#homepage .footer .sub {
	--font-size: min(2vh,3vw);
	font-family: "Viga";
	font-size: var(--font-size);
	line-height: var(--font-size);
	display: block;
	width: fit-content;

	padding: 0;
}



#homepage #hero-map {
	width: var(--hero-map-width);
	height: 100%;
	
	align-self: center;

	clip-path: border-box;

	border: 1px solid rgba(0,0,0,0.4);

	flex-grow: 0;
	flex-shrink: 0;
}

#homepage .pane-2 .summary-row {
	--grade-size: 15vmin;
	--grade-pad: 2vw;
	--logo-width: clamp(5vw, 120px, 15vh);
	width: 100%;
	height: 50%;
}


#homepage .pane-2 #hero-map {
	width: var(--pane2-map-width);
	flex-shrink: 0;
}




#homepage .pane-3 .contents {
	--padding-lr: 10vw;
	--n-weeks: 1;
	--content-width: calc(100vw - var(--padding-lr) - var(--padding-lr));
	--date-square: min(calc(var(--content-width) / 7), 22vh);

	width: inherit;
	height: inherit;
	box-sizing: border-box;

	position: relative;

	padding: 0 var(--padding-lr);

	background: var(--pane3-bkg);
}

#homepage .pane-3 .contents-cont {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
}

#homepage .pane-3 .title-bar {
	position: relative;
}

#homepage .pane-3 .title-bar .sub {
	padding: 0;
	--font-size: min(3vh, 4vw);
}

#homepage .pane-3 .title-bar .main {
	padding-top: 0;

	max-width: 70%;
	text-wrap-style: balance;

	text-indent: -0.5em;
	padding-left: 0.5em;
}

#homepage .pane-3 .title-bar .sub:last-of-type {
	/*padding: 0 0 0 1vw;*/
	padding: 0;
	--font-size: min(2vh, 3vw);
}

#homepage .pane-3 .title-bar svg {
	min-width: 15vw;
	height: 100%;/*width: 15vw;*/

	position: absolute;
	right: 0;
	top: 0;

	border: 2px solid rgb(0,8,61);
	border-radius: 4px;

	padding: 10px;

	box-shadow: 5px 5px 0px var(--grade-A);
	
	box-sizing: border-box;
	background: white;
}


#homepage .pane-3 .calendar {
	--detail-bkg: rgb(239, 239, 239);
	margin-top: 7vh;
	box-shadow: -5px 5px black;
}

#homepage .pane-3 .date {
	/*width: var(--date-square);
	height: var(--date-square);*/

	transition: 
		border-bottom-color 0s ease, 
		background-color 0s ease;

	border-bottom: none;
}

#homepage .pane-3 .date:not(:hover, .clicked) {
	border-bottom: var(--period-thin-border);
	transition-delay: 0.5s, 0.5s;
}

#homepage .pane-3 .date[best]:hover,
#homepage .pane-3 .date[best].clicked {
	background: var(--detail-bkg);
	border-bottom: 1px solid rgba(0,0,0,0) !important;
	transition-delay: 0s, 0s;
}

#homepage .calendar .date:first-of-type {
	border-left: none;
	border-top-left-radius: 4px;
}

#homepage .calendar .date:nth-child(7) {
	border-top-right-radius: 4px;
}


#homepage .pane-3 .detail {
	--info-height: min(1.3vh, 0.7vw);
	--padding-half: 5px;

	width: calc(var(--date-square) * 7);
	height: var(--date-square);

	background: var(--detail-bkg);

	display: flex;
	position: absolute;
	top: 0;
	left: -1px;
	z-index: -1;

	transition: top 0.5s ease;
		

	border-radius: 4px;
	box-shadow: -5px 3px black;
	border: 1px solid black;

	border-top: none;
}

#homepage .pane-3 .calendar:has(.date[best]:hover, .date[best].clicked) .date,
#homepage .pane-3 .calendar:has(.detail:hover) .detail {
	transition-delay: 0s, 0s;
}

#homepage .pane-3 .calendar:has(.date[best]:hover, .date[best].clicked) .detail,
#homepage .pane-3 .calendar:has(.detail:hover) .detail {
	top: var(--date-square);

	border-top-left-radius: 0;
	border-top-right-radius: 0;
}


#homepage .pane-3 .summary-row {
	--grade-size: 10vmin;
	--grade-pad: 2vw;
	--logo-width: clamp(5vw, 120px, 15vh);

	width: 50%;
	height: calc(var(--date-square) - var(--info-height) - var(--padding-half));
}


#homepage .pane-3 .summary-row .underline {
	display: none;
}


#homepage .pane-3 .detail .info {
	position: absolute;
	bottom: 0;
	left: 0;

	font-family: Viga;
	font-size: var(--info-height);
	line-height: var(--info-height);

	padding: 0 0 var(--padding-half) var(--padding-half);
}

#homepage .pane-3 .detail .pie-cont {
	height: calc(95% - var(--info-height) - var(--padding-half) - var(--padding-half));
	margin-top: 5%;

	flex-grow: 1;
	flex-shrink: 1;

	max-width: 85%;
}

#homepage .pane-3 .placeholder {
	width: 100%;
	height: var(--date-square);
}




#homepage .pane-4 .contents {
	--padding-tb: 8vh;
	--padding-lr: 10vw;
	--n-weeks: 6;
}

#homepage .pane-4 .title-bar {
	width: calc(var(--content-width) - var(--date-square) * 8);

	display: inline-block;
}

#homepage .pane-4 .title-bar .main {
	padding-top: 0;
}

#homepage .pane-4 .calendar {
	display: inline-grid;
	vertical-align: top;
	position: absolute;
	right: var(--padding-lr);

	box-shadow: 5px 5px black;
}


@media screen and (max-width: 1500px) {
	#homepage .pane-4 .calendar > .contents .title-bar {
		width: 80vw;
	}
}


@media screen and (max-width: 1200px) {
	#homepage .pane-2 .flex-grow {
		flex-direction: column-reverse;
	}

	#homepage .pane-2 #hero-map {
		width: 100%;
		height: 50%;
	}

	#homepage .pane-2 .rows {
		width: 100%;
		height: 50%;
	}

	#homepage .title-bar .right-items {
		bottom: auto;
		top: 2vh;
	}
}

@media screen and (max-width: 1180px) {
	#homepage table.summary-table {
		font-size: 1.5vh !important;
	}
}


@media screen and (max-width: 1080px) {
	#homepage .pane-3 .contents {
		padding: 0 calc(var(--padding-lr) / 2);
	}

	#homepage .pane-3 .title-bar svg.logo {
		display: none;
	}

	#homepage .pane-3 .contents .title-bar > a {
		max-width: 100%;
	}
}



@media screen and (max-width: 600px) {
	#homepage .pane-3 .contents-cont {
		top: 25%;
	}
	#homepage .pane-3 .detail {
		height: calc(var(--date-square) * 4);
		top: var(--date-square);
		
		flex-direction: column;
	}
	
	#homepage .pane-3 .detail .info {
		font-size: 2vw;
		line-height: 2vw;
		
		width: 80vw;
		left: 0;
		bottom: calc(var(--date-square) * -0.7);
	}
	
	#homepage .pane-3 .detail .summary-row {
		width: 100%;
		height: 50%;
	}
	
	#homepage .pane-3 .detail .summary-row .pie-cont {
		margin-top: 0;
	}
}


@media screen and (max-width: 1400px) and (min-width: 601px) {
	#homepage .pane-1 .entry-cont {
		flex-direction: column;
	}

	#homepage .pane-1 .entry-cont > :first-child {
		border-right: none;
		border-bottom: var(--period-thin-border);
	}


	#homepage .pane-1 .entry-cont .entry {
		--padding-tb-each: var(--padding-each);
		
		width: 80%;
		height: 50%;
	}
}

@media screen and (max-width: 600px) {
	#homepage .pane-1 .flex-grow {
		flex-direction: column;
	}

	#homepage .pane-1 #hero-map {
		width: 100%;
		height: 45%;
	}

	#homepage .pane-1 .right-items {
		width: 100%;
		height: 55%;
	}
}






#default .pane-1 {
	height: var(--content-height);
}


#default .hero-logo {
	width: 100%;
	height: 20vh;
	max-height: 30%;
	
	display: flex;
	justify-content: center;
	flex-direction: row;
}

#default .hero-logo img {
	max-height: 100%;
	
	object-fit: contain;
	
	filter: drop-shadow(0.1em 0.1em 0 rgba(0,0,0,0.6));
}

#default .hero-logo img.logo {
	max-width: 25%;
}

#default .hero-logo img.wordlogo {
	max-width: 75%;
}


#default .contents.title-bar {
	box-sizing: border-box;
	padding: 0 2%;
}

#default .nav-buttons {
	width: 100%;
	margin-top: 3vh;
	
	flex-grow: 1;
	row-gap: 1vh;
	
	display: flex;
	flex-wrap: wrap;
	
	justify-content: space-around;
}

#default .nav-buttons a {
	font-size: 3vh;
	font-family: Roboto;
	font-weight: 500;
	color: white;
	
	border-radius: 0.3em;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	
	padding: 0 1%;
	
	background: var(--theme);
	line-height: 2em;
	height: 2em;
}