@charset "UTF-8";




@font-face {

	font-family: "Akzidenz";
	font-weight: 400;
	font-style: normal;
	src: url( "/fonts/Akzidenz/Akzidenz-Grotesk-Next-Regular.woff2" ) format( "woff2" );
	font-display: swap;
}
@font-face {

	font-family: 'JetBrains Mono';
	font-weight: 400;
	font-style: normal;
	src: url( "/fonts/JetBrainsMono/JetBrainsMono-Light.woff2" ) format( "woff2" );
	font-display: swap;
}
@font-face {

	font-family: 'JetBrains Mono';
	font-weight: 700;
	font-style: normal;
	src: url( "/fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2" ) format( "woff2" );
	font-display: swap;
}




* {

	box-sizing: border-box;
}
:root {

	--font-family-sans: "Akzidenz", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	--font-family-mono: "JetBrains Mono", "Courier New", monospace;
	line-height: 24px;
	font-size:   24px;
	font-weight: 400;
}
html, body {

	width:  100%;
	height: 100%;
}
body {

	margin:  0;
	padding: 0;
	background-color: #BF3326;
	color: rgba( 0, 0, 0, 0.85 );
}
body, 
.font-family-sans {

	font-family: var( --font-family-sans );
}
.font-family-mono {

	font-family: var( --font-family-mono );
	font-weight: 300;
	font-size: 0.75rem;
	strong {

		font-weight: 700;
	}
	&.square-glyphs {

		transform-origin: 0 0;
		transform: scale( 1, 0.465 );
		font-size: 0.56rem;
		line-height: 0.75rem;
		word-wrap: break-word;
		/* white-space-collapse: preserve; */
		/* white-space-collapse: preserve-spaces; /*  Works! but loses initial line spaces at head of line.  */
		/* white-space-collapse: break-spaces;/*  Keeps lines initial spaces, but does not collapse the line breaks, sadly.  */
	}
}
main {

	position: relative;
	height: 100%;
	min-height: 20rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 10dvh;

	line-height: 1rem;
	font-size: 0.75rem;
}
footer {
	
	margin: 1rem auto 0 auto;
	max-width: 18rem;
	line-height: 0.75rem;
	font-size:   0.5rem;
	color: rgb( 0 0 0 / 60% );
}




a {

	color: white;
	text-decoration: none;
}
a:hover {

	text-decoration: underline;
	text-underline-offset: 0.25rem;
}






@property --cursor {

	syntax: "<percentage>";
	inherits: false;
	initial-value: -200%;
}
/*
                            0%        100%
							║          ║
							║          ║
	-200%      -100%        ║          ║         200%       300%
	  │          │          ║          ║          │          │
	  ╳░░░░░░░░░░│██████████║░░░░░░░░░░║          │          │  Default
	  │          │░░░░░░░░░░║██████████║░░░░░░░░░░│          │  On pointer enter
	  │          │          ║░░░░░░░░░░║██████████│░░░░░░░░░░│  On pointer exit
	  ╳░░░░░░░░░░│██████████║░░░░░░░░░░║          │          │  Default
	  │          │          ║          ║          │          │
	-200%      -100%        ║          ║         200%       300%
							║          ║
							║          ║
                            0%        100%
*/
/* a {

	text-decoration: none;
	
	--stop-A: calc( var( --cursor ) + 100% );
	--stop-B: calc( var( --cursor ) + 200% );
	--stop-C: calc( var( --cursor ) + 300% );

	--color-default: white;
	--color-active:   hsl( 0 0% 100% / 30% );
	
	background-image: linear-gradient(
		90deg,
		var( --color-default ) 0% var( --stop-A ),
		var( --color-active   ) var( --stop-A ) var( --stop-B ),
		var( --color-default ) var( --stop-B ) var( --stop-C )
	);
	background-clip: text;
	color: transparent;
	
	--cursor: -200%;
	animation-name: on-mouse-leave;
	animation-delay: 0s;
	animation-duration: 0.2s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
}
a:hover {

	animation-name: on-mouse-enter;
	animation-delay: 0s;
	animation-duration: 0.1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
} */


@keyframes on-mouse-enter {

	from { --cursor: -200%; }
	to   { --cursor: -100%; }
}
@keyframes on-mouse-leave {

	  0% { --cursor: -100%; }
	 99% { --cursor:    0%; }
	100% { --cursor: -200%; }
}




.center-center {

	margin: 0 auto;
	width: 100%;
	text-align: center;
}
.mark {

	max-width: 22rem;
}
/* 
It’s in the SVG itself now.
.mark-apg {

	fill: white;
}
.mark-words {

	mix-blend-mode: multiply;
	opacity: 0.65;
	fill: black;
} */




.color-background {

	color: #BF3326;
}
.color-transparent {

	color: transparent;
}



.color-emphasis {

	color: rgb( 255 255 255 / 67% );
}





.callout {

	position: relative;
	z-index: -1;
	margin: -0.125rem -0.25rem;
	background-color: rgba( 255, 255, 255, 0.1 );
	padding: 0.125rem 0.25rem;
	color: inherit;
}
a .callout {

	background-color: rgba( 0, 0, 0, 0.1 );
}