/* http://meyerweb.com/eric/tools/css/reset/     v2.0 | 20110126     License: none (public domain)  */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}


:root  {

	--black:  rgb(32,32,32)  ;
	--white:  rgb(255,255,255)  ;
	--yellow: rgb(249,223,42)  ;

	--txt:  var(--black) ;
	--bkg:  var(--yellow) ;
	--hgh:  var(--white) ;

	--gap:  	1rem ;
	--gap-h4:	calc( var(--gap) / 4 ) ;
	--gap-h4_m:	calc( 0 - ( var(--gap) * 0.25 ) ) ;
	--gap-h2:	calc( var(--gap) / 2 ) ;
	--gap-h2_m:	calc( 0 - ( var(--gap) * 0.5 ) ) ;
	--gap-x2:	calc( var(--gap) * 2 ) ;
	--gap-x4:	calc( var(--gap-x2) * 2 ) ;
	--gap-x8:	calc( var(--gap-x4) * 2 ) ;

}

body  { 
	font-family: "Libre Franklin" , 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; line-height: 1.5rem ; margin: 0 ; padding: 0 ;   
	background: linear-gradient(90deg, rgba(0,0,0,0.875) 50%, transparent 50%) , var(--bkg) url(bkg--yellow--halftone.jpg) 125% 0% / 100%  ;
}

 #cnt  { 
	display: grid ; grid-template: "head" "imgA" "menu" "main" "imgB" "foot" auto / 100% ;  max-width: 1200px; margin: 0 auto ; 
	box-shadow: var(--gap-x2) 0 0 rgba(0,0,0,0.875) ; padding: 0 0 0 var(--gap-x8)  ;
	background: var(--bkg) url(bkg--yellow--halftone.jpg) 125% 0% / 67.5%  ; color: var(--txt) ; 
}
#cnt > *   { background: var(--bkg) ; padding: var(--gap) var(--gap-x4) ; }

#head  { grid-area: head ; padding-block: var(--gap-x2) }
#imgA  { grid-area: imgA ; }
#menu  { grid-area: menu ; padding-block: 0 ;}
#main  { grid-area: main ; }
#imgB  { grid-area: imgB ; }
#head  { grid-area: head ; }
#foot  { grid-area: foot ; }

.a  { font-family: "Rubik Spray Paint" ; }
.b  { font-family: "Libre Franklin" ; font-weight: 900 ; }
.c  { font-family: "Chelsea Market" ; }
.d  { font-family: "Orbitron" ; }
.e  { font-family: "Bitcount Prop Single" ; }
.f  { font-family: "Stack Sans Text" ; font-weight: 700 ;}
.g  { font-family: "Montserrat" ; font-weight: 900 ; }
.h  { font-family: "Passero One" ; }
.i  { font-family: "Arvo" ;font-weight: 700 ;  }
.j  { font-family: "Encode Sans" ; font-weight: 900 ; }
.k  { font-family: "Inter Tight" ; font-weight: 700 ; }

h1  { font-size: 1.5rem ; font-weight: bold ;  }
h2  { font-size: 2.5rem ; font-weight: bold ; text-shadow: 2px 2px 0px var(--txt) , -4px 2px 0px var(--txt) , 2px -2px 0px var(--txt) , -2px -2px 0px var(--txt)  ;  color: var(--hgh) ;  padding: var(--gap) 0; }
h3  { font-size: 1.5rem ; font-weight: bold ; }
h4  { font-size: 1.5rem ; font-weight: bold ;  }

#head  {
	display: grid ; grid-area: head ; gap: var(--gap-x2) ;  container-type: inline-size ;
	h1  { 
		font-size: 12cqi ; line-height: 107.5% ; 
		> span  { display: block ;  }
	}
	p  { 
		font-size: 1.5rem ; line-height: 175% ; padding-block: var(--gap) 0 ; max-width: 36em ; 
		&.call-to-action {
			padding-block-start: var(--gap-x2) ;
			a  { 
				background-color:  var(--txt) ; color:  var(--bkg) ; padding: var(--gap) var(--gap-x2) ; text-decoration: none ; 
				text-shadow: 2px 2px 0px var(--hgh) , -4px 2px 0px var(--hgh) , 2px -2px 0px var(--hgh) , -2px -2px 0px var(--hgh)  ; 
			}
		}
	}
	
	b , strong  { display: inline-block ; font-weight: bold ; font-size: 2rem ; line-height: 100% ; } 
}


.people  {
	display: grid ; grid-template: auto / repeat(5,1fr) ; gap: var(--gap) ; 
	.person  {
		display: grid ; gap: var(--gap-h2) ; 
		.img {
			width: 100% ; 
			img  {
				width: 100% ; display: block ; 
			}
		}
		h3  { font-size: 1.5rem ; font-weight: bold ; text-shadow: 2px 2px 0px var(--txt) , -4px 2px 0px var(--txt) , 2px -2px 0px var(--txt) , -2px -2px 0px var(--txt)  ; color: var(--bkg) ; }
		p  { font-size: 1rem ; }

	}
}

#main .hdr , 
#main .cnt  { 
	margin-block: var(--gap) ; 

}
#main--where ~ .cnt ul   { display: grid ; grid-template: auto / 1fr 1fr ; gap: var(--gap) ; }

#menu .cnt {
	--txt: var(--yellow) ; --bkg: var(--black) ; --hgh: var(--white) ; 
	ul  { 
		display: flex ; flex-flow: row wrap ; gap: var(--gap-h2) ; 
		li {
			display: block ; 
			:is(a,label)  { 
				display: flex ; place-content: center start ; place-items: center ;  background: var(--bkg) ; color: var(--txt) ; padding: var(--gap) var(--gap-x4) calc(var(--gap-h2) + var(--gap-h4)) var(--gap) ; font-size: 1.5rem ; font-weight: bold ; text-decoration: none ; position: relative; 
				border: var(--gap-h4) dotted var(--bkg) ; 
				text-shadow: 0 0 0 var(--bkg) , 0 0 0 var(--bkg) , 0 0 0 var(--bkg) , 0 0 0 var(--bkg) ; 
				input  { display: none ; }
				&:has(:checked)  { 
					color: var(--hgh) ; border-color: var(--hgh) ; background: var(--bkg) ; 
					text-shadow: 2px 2px 0px var(--bkg) , -4px 2px 0px var(--bkg) , 2px -2px 0px var(--bkg) , -2px -2px 0px var(--bkg)  ; 
				}
				&:has(:checked:hover)  { 
					border-color: var(--bkg) ; color: var(--hgh) ; cursor: default ; 
				}
				&:hover  { 
					color: var(--txt) ; background: transparent ; border-color: var(--bkg) ; cursor: pointer ; 
					text-shadow: 2px 2px 0px var(--bkg) , -4px 2px 0px var(--bkg) , 2px -2px 0px var(--bkg) , -2px -2px 0px var(--bkg)  ; 
				}
			}
		}
	}
}
#main {
	.hdr  { display: none !important; }
	.cnt  { 
		display: none ; 
	}
	p , li  { max-width: 36em ; }
}
#menu:has(#hdl--main-what label input:checked) ~ #main [data-tab="main-what"] ,
#menu:has(#hdl--main-who label input:checked) ~ #main [data-tab="main-who"] ,
#menu:has(#hdl--main-where label input:checked) ~ #main [data-tab="main-where"] ,
#menu:has(#hdl--main-how-much label input:checked) ~ #main [data-tab="main-how-much"]   { 
	display: block ; 
	max-width: 36rem;
}


.imgs  {
	position: relative ; container-type: inline-size ;
	.img {
		position: relative ; 
		outline: var(--gap-h2) solid var(--txt)  ; outline-offset: -0.5rem  ; 
		&::after  { content: '' ; display: block ; background: url(bkg--halftone.png) 0 0 / 100%  ; position: absolute ; top: 0 ; right: 0 ; bottom: 0 ; left: 0 ; z-index: 100 ; opacity: 0.125; }
		img  {
			width: 100% ; display: block ; 
		}
	}
	.cnt {
		position: absolute ; top: var(--gap-x4) ; left: var(--gap-x4) ; bottom: var(--gap-x2) ; right: 20% ; display: grid; place-items: end ; 
		p  { 
			font-size: 4cqi ; line-height: 112.5% ;  color: var(--hgh) ; padding: var(--gap-x2) ; 
			text-shadow: 2px 2px 0px var(--txt) , -4px 2px 0px var(--txt) , 2px -2px 0px var(--txt) , -2px -2px 0px var(--txt)  ; 
		}
	}
	.cnt.align-middle {
		right: var(--gap-x4) ; place-items: center ; 
		p  { font-size: 8cqi ; text-align: center ; }
	}
}