html, body, div, span, applet, object, iframe, menu, nav, output, ruby, section, summary,
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, time, mark, audio, video, button,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup {
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing:border-box; }

@keyframes loading {
  0%{
    left: -45%;
  }
  100%{
    left: 100%;
  }
}
@font-face {
  font-display: swap; 
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 800;
  src: url('/inc/font/EBGaramond-Medium.woff') format('woff'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Roustel';
  font-style: normal;
  font-weight: 400;
  src: url('/inc/font/Roustel.ttf') format('truetype'); 
}
/* #fff0e0; */
:root {
	--hue-white: #efe7ea;
	--hue-white2: #d1cccd;
	--hue-half-white: rgb(from var(--hue-white) r g b / 70%);
	--hue-black: #170518;
	--hue-half-black: rgb(from var(--hue-black) r g b / 65%);
	--hue-key: #9b7b52;
	--hue-light-key: color-mix(in srgb, var(--hue-key) 40%, white);
	--hue-dark-key: color-mix(in srgb, var(--hue-key) 10%, var(--hue-black));
	--hue-dim-key: rgb(from var(--hue-key) r g b / 60%);
	--hue-half-key: rgb(from var(--hue-key) r g b / 50%);
	--hue-faint-key: rgb(from var(--hue-key) r g b / 25%);
	--hue-key2: #002518;
	--hue-key2: #012000;
	--hue-key3: #28002c;
	--hue-key4: #000033;
	--hue-half-key2: rgb(from var(--hue-key2) r g b / 60%);
	--hue-mid-key2: color-mix(in srgb, var(--hue-key2) 82%, white);
	--hue-half-key3: rgb(from var(--hue-key3) r g b / 60%);
	--hue-mid-key3: color-mix(in srgb, var(--hue-key3) 82%, white);
	--hue-dark-key3: color-mix(in srgb, var(--hue-key3) 10%, var(--hue-black));
	--hue-faint-key3: rgb(from var(--hue-key3) r g b / 65%);
	--hue-gray: #999;
	--hue-light-gray: #CCC;
	--hue-dark-gray: #333;
	--hue-half-gray: rgb(from var(--hue-gray) r g b / 25%);
	--stable-height: calc(101vh - 2px);
	--x-vunit: calc(2vw + 10px);
	--x-tunit: calc(0.8vw + 4px);
	--txt-unit: calc( 0.5vh + var(--x-tunit) );
	--txt-unit-quarter: calc( var(--txt-unit) / 4);
	--txt-unit-half: calc( var(--txt-unit) / 2);
	--txt-unit-three-fourths: calc( var(--txt-unit) * .75);

	--var-unit: calc( 2vh + var(--x-vunit) );
  	--var-unit-tenth: calc( var(--var-unit) / 10);
	--var-unit-eighth: calc( var(--var-unit) / 8);
	--var-unit-quarter: calc( var(--var-unit) / 4);
	--var-unit-third: calc( var(--var-unit) / 3.3);
	--var-unit-bzz: calc( var(--var-unit) / 2.8);
	--var-unit-half: calc( var(--var-unit) / 2);
	--var-unit-17-32: calc( var(--var-unit) / 1.85);
	--var-unit-three-fifths: calc( var(--var-unit) / 1.66);
	--var-unit-two-thirds: calc( var(--var-unit) / 1.5);
	--var-unit-three-fourths: calc( var(--var-unit) / 1.3);
	--var-unit-1-5x: calc(var(--var-unit) * 1.5);
	--var-unit-2x: calc(var(--var-unit) * 2);
	--var-unit-2-5x: calc(var(--var-unit) * 2.5);
	--var-unit-3x: calc(var(--var-unit) * 3);
	--var-unit-3-5x: calc(var(--var-unit) * 3.5);
	--var-unit-4x: calc(var(--var-unit) * 4);
	--var-unit-5x: calc(var(--var-unit) * 5);
	--var-unit-6x: calc(var(--var-unit) * 6);
	--var-unit-8x: calc(var(--var-unit) * 8);
	--var-unit-10x: calc(var(--var-unit) * 10);
  	--vertical-gap: calc(50px + 2vh);
	--border-rad: 4px;
	--text-shadow: 6px 6px 6px var(--hue-black);
	--font-size: calc(10px + var(--var-half-unit));
	--line-height: calc(14px + var(--var-unit));
	--line-height-2x: calc(var(--line-height) * 2);
	--font-main: EB Garamond, Georgia, Times New Roman, serif;
	--font-serif: EB Garamond, Georgia, Times New Roman, serif;
	--font-sans: Raleway, Arial, Futura, Impact, Sans, sans-serif;
	--font-script: Roustel, Arial, Futura, Impact, Sans, serif;
	--font-archive: Manrope, Sans, sans-serif;
}

body{
	overflow-x: hidden;
	font-size: var(--font-size);
	line-height: var(--line-height);
	font-weight: 100;
	font-family: var(--font-sans);
	background: #333333;
    background: var(--hue-black);
	margin:0;
	padding:0;
	color: var(--hue-white);
	.frame {
		max-width:1200px;
		margin: 0 auto;
	}
	.logo {
		font-weight: 800;
		color: var(--hue-white);
		letter-spacing: 0px;
		text-transform: uppercase;
		font-family: var(--font-main);
		white-space: nowrap;
	}
	strong, figcaption {
		font-style: normal;
		color: var(--hue-light-key);
		text-transform: uppercase;
		font-size: var(--var-unit-third);
	}
	small{
		color: var(--hue-light-key);
		font-family: var(--font-serif);
		font-weight: 100;
        letter-spacing: 2px;
		font-size: 75%;
	}
	h1 { line-height: 1.1; margin-bottom: var(--var-unit-third); }
	h2, h3, h4, h5, h6 {
		color: var(--hue-white);
		font-family: var(--font-serif);
		font-weight: 300;
		line-height: 1.1;
		margin-bottom: var(--var-unit-third);
		text-shadow: var(--text-shadow);
		small {
			letter-spacing: 6px;
			font-size: 60%;
			font-family: var(--font-sans);
			display: block;
		}
	}
	legend {
		font-size: var(--var-unit-half);
		font-weight: 900;
	}
	h4, h5, h6, p {
		font-weight: 100;
	}
	a, button, figure.link, figure.link p {
		-webkit-transition: color 0.5s, background-color 0.5s,  border-color 0.5s;
		-moz-transition:    color 0.5s, background-color 0.5s,  border-color 0.5s;
		-ms-transition:     color 0.5s, background-color 0.5s,  border-color 0.5s;
		-o-transition:      color 0.5s, background-color 0.5s,  border-color 0.5s;
		transition:         color 0.5s, background-color 0.5s,  border-color 0.5s;
	}
	a {
		color: var(--hue-white);
		text-decoration-color: var(--hue-gray);
		&:hover {
			color: var(--hue-light-key);
			text-decoration-color: var(--hue-key);
		}

	}
	p {
		font-size: var(--var-unit-half);
		line-height: 1.9;
		color: var(--hue-light-key);
		text-shadow: var(--text-shadow);
		padding-bottom: var(--var-unit-third);
		button.cta, a.button.cta {
			z-index: 0;
		}
	}
	hr {
		margin-top: var(--vertical-gap);
		width: 70%;
		height: 0px;
		border: 0;
		border-bottom: 1px solid var(--hue-key);
	}
	img {
		border-radius: var(--border-rad);
		line-height:0;
	}
	figure {
		display: inline;
		line-height: 0;
		margin-bottom: var(--var-unit-half);
		margin-top: var(--var-unit-quarter); 
		overflow: hidden;
		position: relative;
		width:fit-content;
		img {
			display: inline-block;
			max-width: 45vw;
		}
		figcaption {
			bottom: -30%;
			border-radius: var(--border-rad);
			background: var(--hue-half-key2); 
			color: var(--hue-white);
			line-height: 1.6;
			opacity: 0;
			padding: var(--var-unit-half);
			position: absolute; 
			width: 100%;
			transition: all 0.6s ease;
			-webkit-transition: all 0.6s ease;
			-moz-transition:    all 0.6s ease;
			-o-transition:      all 0.6s ease;
		}
		&.right {
			margin-left: var(--var-unit);
		}
		&.left {
			margin-right: var(--var-unit);
		}
		&:hover figcaption {
			opacity: 1;
			bottom: 0;
		}
	}
	form {
		input, textarea {
			color: var(--hue-white);
			background-color: var(--hue-faint-key);
			border: 1px solid var(--hue-key);
			border-radius: var(--border-rad);
			width: 32vw;
			padding: calc(var(--var-unit) /4);
			margin: 0 0 calc(var(--var-unit) );
			font-family: var(--font-sans);
			font-size: calc(10px + 1vw);
			&:first-child {
				margin-bottom: 0;
			}
			&::placeholder {
				color: var(--hue-light-key);
			}
		}
		&.body {
			padding-top: calc(var(--var-unit) *2);
			input, textarea {
				color: var(--hue-black);
				background-color: var(--hue-half-white);
				width: 52vw;
				&::placeholder {
					color: var(--hue-black);
				}
			}
		}
		button.cta {
			background-color: var(--hue-faint-key);
			color: var(--hue-key);
			border-color: var(--hue-key);
		}
		h5 {
			background-color: transparent;
		}
		textarea {
			height:10vh;
		}
	}
	button.cta, a.button.cta {
		align-items: center;
		background: transparent;
		border: solid 1px var(--hue-light-key);
		border-radius: var(--border-rad);
		column-gap: .75rem;
		cursor: pointer;
		color: var(--hue-light-key);
		display: table;
		font-size: var(--var-unit-third);
		justify-content: safe center;
		line-height: 2.7;
		margin-top: var(--var-unit-eighth);
		padding: var(--var-unit-eighth) var(--var-unit-third);
		text-indent: 0;
		text-align: center;
		text-transform: uppercase;
		text-decoration: none;
		white-space:nowrap;
		width: fit-content;
		&:hover{
			color: var(--hue-white);
			border-color: var(--hue-white);
			background: var(--hue-faint-key);
		}
		&.dark {
			font-weight: 900;

			color: var(--hue-white);
			border-color: var(--hue-key3);
			background: var(--hue-faint-key3);
			&:hover{
				color: var(--hue-white);
				background: var(--hue-key3);
			}
		}
	}
	button.cta-large, a.button.cta-large {
		display: block;
		font-size: calc(10px + var(--var-half-unit));
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		text-decoration: none;
	}
	figure.link {
		border: 1px solid transparent;
		cursor: pointer;
		padding: var(--var-unit) var(--var-half-unit) var(--var-half-unit);
		background: var(--hue-black);
		_border-radius: var(--border-rad);
		&:hover {
			background: var(--hue-dark-key);
			_border-color: var(--hue-key);
		}
	}
	footer {
		background: #000;
		background-attachment: fixed;
		background-repeat: repeat;
    	background-size: auto;
		padding: 12vw var(--var-unit-half) 40vh;
		h3.logo {
			font-size: var(--var-unit-half);
		}
		section.frame {
			padding: 0;
			margin-top:6vw;
			clear: both;
			&.grid {
					display: grid;
					grid-gap: var(--var-unit);
			        grid-template-columns: auto auto ;
			}
			nav {
				border-radius: var(--border-rad);
				background: transparent;
				display: inline-block;
				margin-right: 0;
				h5 {
					font-size: var(--var-unit-three-fifths);
					color: var(--hue-key);
					font-weight: 300;
				}
				a {
					color: var(--hue-light-key);
					display: block;
					font-family: var(--font-sans);
					font-size: var(--txt-unit);
					text-decoration-color: var(--hue-gray);
					text-transform: uppercase;
					white-space: nowrap;
					line-height: 2.6;
					&:hover {
						color: var(--hue-white);
						text-decoration-color: var(--hue-white);
					}
					&::after {
						content: "\00a0⎘";
						display:inline-block;
					}
				}
			}
			&.base {
				a {
					text-transform: uppercase;
					text-decoration: none;
					color: var(--hue-key);
					font-family: var(--font-sans);
					font-size: calc(4px + var(--var-half-unit));
					display: block;
					text-align: center;
					margin-bottom: var(--var-unit);
				}
			}
		}
	}
	header {
		z-index:2;
		position: fixed;
			_width: fit-content;
		color: var(--hue-white);
		_min-height: 4vw;
		_text-align: left;
		text-shadow: var(--text-shadow);
		backdrop-filter: blur(5px);
		background: #111A;
		_border-bottom: var(--hue-half-key) solid 0.7px;
		nav {
			width: fit-content;
			padding: 0 var(--var-unit-half);
			margin: 0 auto;
			white-space:nowrap;
			line-height:  calc(24px + 2vh);
			font-size: calc(8px + 1.4vw);
			h1 {
				margin-bottom: 0;
				font-weight: 300;
				text-shadow: 0px 0px 30px #fff9;
				display: inline-block;
				line-height: inherit;
				font-size: inherit;
				a {
					display:block;
					float:none;
					padding-left: 0;
					text-decoration: none;
				}
			}
		}
	}
	main {
		background-color: #000;
		z-index: 1;
		padding: 0 0 0 ;
		content {
			display: block;
			padding-top: var(--vertical-gap);
			padding-bottom: var(--vertical-gap);
			background-size: cover;
            background-repeat: no-repeat;
			transition: background-position 1s ease;
			h1{
				font-size: calc(12px + 4vh);
			}
			h4, h5, h6 {
				font-weight: 300;
			}
			h3 {
				padding: 0 ;
				text-align: right;
				text-shadow: none;
			}
			h2 {
				text-align: center;
				font-size: calc(12px + 3vh);
			}
			article.frame {
				margin: 0 auto;
        		padding: 0 var(--var-unit-half);
				.simplegrid {
					display: grid;
					grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
					grid-gap: var(--var-unit);
					text-align: center;
				}
				.simplegrid > figure {
					width: calc(320px + 1vw);
					overflow: hidden;
					_border-radius: var(--border-rad);
					position: relative;
					background: var(--hue-white);
					margin: 0 auto;
					.activity{
						position: absolute;
						left: -45%;
						height: 100%;
						width: 45%;
						background-image: linear-gradient(4deg, rgba(251,251,251, .05), rgba(251,251,251, .2), rgba(251,251,251, .35), rgba(251,251,251, .2), rgba(251,251,251, .05));
						background-image: -moz-linear-gradient(4deg, rgba(251,251,251, .05), rgba(251,251,251, .2), rgba(251,251,251, .35), rgba(251,251,251, .2), rgba(251,251,251, .05));
						background-image: -webkit-linear-gradient(4deg, rgba(251,251,251, .05), rgba(251,251,251, .2), rgba(251,251,251, .35), rgba(251,251,251, .2), rgba(251,251,251, .05));
						animation: loading 2s infinite;
						z-index: 45;
					}


				}


			}
			&.content {
				article.frame {
					strong {
						display: block;
						text-align: center;
					}
					p {
						margin: 0;
					}
				}
			}
			&.fotovent {
				background-color: var(--hue-key3);
			    background-image: url('/inc/hero/jess_mono_crop.jpg');
				background-position: center center;
				background-attachment: fixed;
				background-size: auto var(--stable-height);
				background-repeat: no-repeat;
			}
			&#signup {
				background: var(--hue-key3);
				form {
					text-align: center;
					legend {
						line-height: 1.5;
						margin-bottom: var(--var-unit-half);
					}
					fieldset {
						padding-bottom: var(--var-unit-quarter);
						width: fit-content;
						margin: 0 auto;
						button, input {
							line-height: 1.1;
							display: inline;
							font-size: var(--var-unit-half);
							margin: 0 ;
							padding: var(--var-unit-half);
						}
						input {
							margin-right:var(--var-unit);
							min-width: 35vw;
						}
					}
				}
				textarea {
					display:none;
				}
			}
			&#shopify {
				background: var(--hue-white);
				h2{
					margin-bottom: var(--var-unit);
					text-shadow: none;
					color: var(--hue-key3);
					text-transform: uppercase;
					font-family: var(--font-sans);
				}
				article {
					section#shopifyContainer {
						margin-bottom: var(--vertical-gap);
						p {
							display:none;
						}
					}
					figure.link {
						border-radius: var(--border-rad);
						padding-top: var(--var-unit-quarter);
						_background: var(--hue-black);
						&:hover {
							background: white;

						}
						aspect-ratio: 3 / 4 !important;
					}
				}
			}
			&#story {
				background:  var(--hue-key3);
				padding-top: 1px;
				article.frame {
					display: grid;
					grid-gap: var(--var-unit);
			        grid-template-columns: auto auto;
					text-align: center;
					justify-self: start;
					div.sticky{
						padding-top: var(--vertical-gap);
						display: flex;
  						flex-direction: column;
					}
					:nth-child(2) {
						_justify-self: center;
					}
					figure img {
						margin-top: var(--vertical-gap);
						width: 40vw;
					}
					h3 {
						font-weight: 300;
						color: var(--hue-white);
						font-size: calc(12px + 2vw);
						margin-bottom: 1vh;
					}
					strong {
						color: var(--hue-light-key);
					}
					p {
						padding-left: 0;
						padding-right: 0;
						font-size: calc(8px + 1vw);
					}
				}
			}
			&#offers{
				padding: 0;
				h2, h4, h6 {
					text-align: center;
				}
				h2 {
					font-size: calc(12px + 3vh);
					color: var(--hue-white);
					padding-bottom: 3px;
				}
				h6 {
					font-size: calc(10px + 1vh);
					font-family: var(--font-sans);
					font-weight: 100;
				}
				article{
					padding: 0;
					margin: 0;
				}
				nav{
					padding-top: 0;
					display: grid;
					grid-template-columns: repeat(auto-fit, minmax(125px, 1fr) minmax(125px, 1fr) );
					a.wrap { 
						background: var(--hue-key2);
						overflow: hidden;
						border: 0;
						color: var(--hue-key);
						border-bottom: solid 2px var(--hue-black);
						border-right: solid 2px var(--hue-black);
						color: var(--hue-key);
						text-decoration: none;
						text-align: center;
						display:block;
						position: relative;
						padding: 0 0 var(--var-unit-half);
						&:hover {
							background: var(--hue-black);
							span {
								color: var(--hue-dim-key);
							}
							strong {
								color: var(--hue-white);
							}
							p {
								color: var(--hue-white);
							}
						}
						font-size: 4vh;
						text-align: center;
						img {
							margin: 0 auto;
							display: block;
							height: 11vh;
						}
						span {
							color: var(--hue-dim-key);
							font-family: var(--font-serif);
							font-size: var(--var-unit-2x);
							font-weight:900;
							left:39%;
							line-height:0;
							position: absolute;
							top: 27%;
							&::before, &::after {
								content: "\A";
								white-space: pre;
							}
						}
						strong {
							color: var(--hue-light-key);
							display: block;
							font-weight: 100;
							font-size: var(--var-unit-bzz);
							justify-content: center;
							line-height: var(--var-unit-three-fifths);
							margin: 0 auto;
							padding-top: var(--var-unit-three-fifths);
							padding-bottom: var(--var-unit-quarter);
							position: relative;
							text-align: center;
							word-spacing: 100vw;
							&.x2 {
								font-size:  var(--var-unit);
								line-height: calc(var(--var-unit-three-fifths) * 2);
							}
						}
						p {
							display: none;
							color: var(--hue-light-key);
							font-size:  calc(8px + 1vw);
							line-height:  calc(10px + 1.6vw);
							text-align: right;
							text-indent: 0;
							padding-bottom: 0;
							margin-left: 35%;
						}
						i.fa-solid {
							color: var(--hue-key);
							font-size: 4vh;
						}

					}
				}
			}
			&#mission {
				article {
					padding:0;
					div {
						background: var(--hue-half-key3);
						border-radius: var(--border-rad);
						overflow: hidden;
						width: 52vw;
						h3 {
							font-size: calc(12px + 2vw);
							font-weight: 300;
							padding-top: calc( var(--var-unit) + 12px);
							padding-left:var(--var-unit);
							padding-right:var(--var-unit);
							text-align: left;
						}
						p {
							font-size:  calc(8px + 0.8vw);
							text-align: left;
							margin: var(--var-unit) 0;
							button {
								margin-top: calc( var(--var-unit) + 12px);
								display: block;
							}
						}
					}
				}
				background: var(--hue-key3) url('/inc/hero/home_mission.jpg');
				background-position: center center;
				background-attachment: fixed;
				background-size: cover;
				background-repeat: no-repeat;
			}
			&#about {
				background-color: var(--hue-key3);
			    background-image: url('/inc/hero/jess_mono_crop.jpg');
				background-position: top center;
				background-attachment: fixed;
				background-size: auto var(--stable-height);
				background-repeat: no-repeat;
  				button.browse {
					width: 60vw;
					font-size: 125%;
					color: var(--hue-white);
					display: block;
					border: 0.5vw solid var(--hue-key);
					border-radius: 0.3vw;
					background: var(--hue-half-key);
					padding: var(--var-unit);
					margin: calc(2*var(--var-unit)) auto 0;
					&:hover {
						background: var(--hue-key);
						border-color: var(--hue-half-white);
					}
				}
				article {
						_direction: rtl;
					div{
						width: 56vw;
						text-align: end;
						h2{
							font-size: calc(var(--txt-unit) * 2 );
							text-align: right;
							padding-bottom: 0;
							text-transform: uppercase;
							font-family: var(--font-sans);
						}
						a {
							display: inline-block;
						}
						h6, p {
							margin: 0 var(--var-unit);
						}
						p {
							color: var(--hue-light-key);
							font-size: var(--var-unit-third);
							margin-right: 0;
							margin-left: 26vw;
							padding-right: 0;
							text-indent: 0;
						}
					}
				}
			}
			&#hero {
				padding: 1px 0 ;
				height: calc( 24px + 46vh);
				position: relative;
				article.frame {
					_margin-right: 0;
					_padding-right: 0;
					_text-align: right;
					section {
						background: #00000022;
						background: linear-gradient(85deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
						bottom: calc(4px + 5vw);
						min-width: calc(14px + 45vw);
						padding: var(--var-unit) var(--var-unit-half) var(--var-unit-half);
						position: absolute;
						right: 0;
						width: fit-content;
						> * {
							text-align: right;
						}
						&.left {
							left: 0;
							background: linear-gradient(85deg, rgba(0, 0, 0, 0.7) 0%,rgba(0, 0, 0, 0) 100%);
							> * {
								text-align: left;
							}
						}
						.thumbs {
							&:hover {
								border-color: var(--hue-key);
								_background-size: 110%;
								transform: scale(1.04);
							}
							border-radius: var(--border-rad);

							border: solid 3px transparent;
							aspect-ratio: 1/1;
							height:calc(30px + 9vw);
							margin-top: 4vw;
							margin-left: 2vw;

						  background-size: cover;
						  background-position: center;
						  transition: transform 0.5s ease;
						}
						p {
							padding: 0;
						}
						h2 {
							text-align: right;
							padding: 0;
                			font-size: var(--var-unit-three-fourths);
						}
						strong {
							color: var(--hue-key);
							display:block;
							font-family: var(--font-script);
							font-size: calc( var(--var-unit) / 1.40);
							line-height: 0.3;
							text-align: right;
							text-transform: none;
							white-space: nowrap;
						}
						h3 {
							text-align: right;
							text-transform: uppercase;
							font-family: var(--font-sans);
							font-size: calc( var(--var-unit) / 2.7);
						}
					}
				}
				background-color: #555;
				background-position: 20% center;
				background-repeat: no-repeat;
			    background-image: url('/inc/hero/jess1.jpg');
				&.home article.frame section {
					h3, h2 {
						_text-align: center;

					}
				}
			}
		}
	}
	.quarter{width:25%;}
	.half{width:50%;}
	.left{float:left;margin-right:var(--var-unit);}
	.right{float:right;margin-left:var(--var-unit);}
	.a-left{text-align:left;}
	.a-right{text-align:right;}
	.reset,  .reset li {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
		line-height:1.2;
	}
	.event {
		background-color: var(--hue-key2);
		border: solid 1px var(--hue-key);
		border-radius: var(--border-rad);
		margin: 0 auto;
		margin-bottom: var(--var-unit);
		max-width: 800px;
		padding-bottom:var(--var-unit-half);
		z-index: 0;
		ul {
			background-position: center bottom;
			background-repeat: no-repeat;
			background-size: 123% auto;
			list-style-type: none;
			_overflow: hidden;
			li {
				display: block;
				margin: 0;
				padding: 0;
				list-style: none;
				line-height:1.2;
				font-size: calc( var(--var-unit) * .4);
				margin: 0;
				overflow: hidden;
				padding: 0 var(--var-unit-half);
				& > * {
					margin-bottom: 0;
				}
			}
			h2 {
				font-family: var(--font-sans);
				color: var(--hue-key);
				line-height:1.2;
				padding-top: var(--var-unit-third);
			}
			h3 {
				color: var(--hue-key);
				font-family: var(--font-sans);
				padding-top: var(--var-unit-quarter);
				text-align: center;
				text-transform: uppercase;
			}
			p {
				font-size: calc( var(--var-unit) * .36);
				padding-top: var(--var-unit-third);
			}
			a {
				text-decoration: none;
				&:hover {
					text-decoration: none;
				}
			}
			.banner{
				background-color: var(--hue-key);
				font-weight: 700;
				text-transform: uppercase;
				a {line-height:2;}
			}
			.pow {
				background: transparent;
				overflow: visible;
				position: relative;
				text-align: center;
				line-height: 1;
				span {
					aspect-ratio: 1;
					background: var(--hue-mid-key3);
					clip-path: polygon(100% 50%,92.72% 60.53%,94.27% 73.24%,82.93% 79.18%,78.4% 91.15%,65.6% 91.14%,56.03% 99.64%,44.7% 93.68%,32.27% 96.75%,25.01% 86.21%,12.57% 83.16%,11.04% 70.45%,1.45% 61.97%,6% 50%,1.45% 38.03%,11.04% 29.55%,12.57% 16.84%,25.01% 13.79%,32.27% 3.25%,44.7% 6.32%,56.03% 0.36%,65.6% 8.86%,78.4% 8.85%,82.93% 20.82%,94.27% 26.76%,92.72% 39.47%);
					color: var(--hue-white);
					display: grid;
					font-size: 85%;
					font-weight: 850;
					margin: 0 auto;
					place-items: center;
					position: absolute;
                    right: 1.7vw;
					text-transform: uppercase;
					top: calc(var(--var-unit) * -1.5);
					transform: rotate(15deg);
					width: calc(var(--var-unit) * 1.8);
					word-spacing: 100vw;
				}
			}
			.date {
				font-size: calc( var(--var-unit) * .4);
				background: var(--hue-key);
				color: var(--hue-key2);
				a {
					color: var(--hue-key2);
				}
			}
			.time {
				font-weight: 700;
				line-height:2;
				padding-top: var(--var-unit-third);
				text-align: center;
			}
			.location {
				a {color: var(--hue-light-key);}
				letter-spacing: 2px;
				text-align: center;
			}
			.footlink {
				align-items: flex-end;
				aspect-ratio: 3/1;
								background-position: 20% center;
				background-repeat: no-repeat;
				background-size: cover;
				border-radius: var(--border-rad);
				margin: 0 var(--var-unit-half) ;
				display: flex;
				justify-content: flex-end;
				a {
					display: inline-block;
					background: var(--hue-mid-key3);
					border-radius: 999px;
					margin: 0 0 var(--var-unit-quarter) var(--var-unit-quarter);
					line-height: 1.7;
                    padding: 0 var(--var-unit-third);
					text-decoration: none;
				}
			}
		}
	}
	.sticky {
		position: sticky;
		top: 0;
		align-items: flex-start;
		& > *{
			text-align:left;
		}
		&.right {
			align-items: flex-end;
			> *{
				text-align:right;
			}
		}
	}
	.center-margin {
		margin-left: auto;
	    margin-right: auto;
	}
	.h-red:hover {
		background:red !important;
	}
	.h-orange:hover {
		background:orange !important;
	}
	.h-yellow:hover {
		background:yellow !important;
	}
	.h-green:hover {
		background:green !important;
	}
	.h-blue:hover {
		background:blue !important;
	}
	.h-purple:hover {
		background:purple !important;
	}



.left-curve {
	display:inline-block;
	padding: 0 1rem;
  clip-path: path("M 0 47 C 30 47 50 0 80 0 L 0 0 Z");
}



}