@media screen {

	header {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		padding-block: 1lh;
		z-index: 1000;

		display: flex;
		gap: 1ch;


		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1ch;

		background-color: var(--color-bg);
		color: var(--color-text);


		/* background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%); */
		font-size: var(--fs-nav);
		padding-left: 1ch;

	}

	header p {
		margin-block: 0;
		text-indent: 0;
	}

	header::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: calc(var(--baseline) * 2);
		background: linear-gradient(to bottom, var(--color-bg), rgba(255, 255, 255, 0));
		background: linear-gradient(180deg, var(--color-bg) 0%, rgba(255, 255, 255, 0) 100%);
		pointer-events: none;
	}


	.header-symb {
		/* position: absolute; */
		letter-spacing: var(--sign-spacing);
		font-family: var(--sign-family);
		line-height: var(--sign-baseline);
		/* padding-right: 0.5ch; */
		white-space: nowrap;
		flex: 1 1 0%;
		min-width: 0;
		overflow: hidden;

	}


	header .site-name {
		font-family: var(--fontTitle);
		letter-spacing: 0.02rem;
		text-transform: uppercase;
		margin: 0;
		flex: 0 0 auto;
		white-space: nowrap;


	}

	header .site-name a:hover{
		color: var(--copper-text);
		text-decoration: none;

	}

	header .site-name a:hover::before{
		color: var(--color-text);
	}

	header .site-name a::before {
		content: "----";
		letter-spacing: var(--sign-spacing);
		font-family: var(--sign-family);
		line-height: var(--sign-baseline);
		padding-right: 0.5ch;

	}


	header nav {
		background-color: var(--color-bg);
		z-index: 100;
		padding-inline: 0.75ch;
		/* margin-right: 5ch; */
		flex: 0 0 auto;
		white-space: nowrap;
	}

	header nav button:hover,
	header nav a:hover {
		opacity: 0.55;
		cursor: pointer;
		text-decoration: none;
	}

	header nav li.active {
		/* text-decoration: underline; */
	}

	header nav li::after {
		content: "---";
		letter-spacing: var(--sign-spacing);
		font-family: var(--sign-family);
		line-height: var(--sign-baseline);
		padding-left: 1ch;
	}

	header nav ul {
		display: flex;
		/* gap: 3ch; */

	}

	header nav ul li {
		font-family: var(--fontTitle);
		letter-spacing: 0.02rem;
		/* font-size: 1rem; */
	}

	header nav ul li a::before,
	header nav ul li button::before {
		content: "(";
		padding-right: 1.5ch;
	}

	header nav ul li a::after,
	header nav ul li button::after {
		content: ")";
		padding-left: 1.5ch;
	}




	header.row {
		margin: 0;
	}

}


@media screen and (max-width: 640px) {

	header .nav-index{
		display: none;
	}

	.site-name a:nth-of-type(2){
display: none;
	}


	header .site-name a::before {
		content: "--";
		}

		header nav li::after {
		content: "--";
		}


}