/* Set css vars including default font stacks to use without downloading any webfonts */
:root {
        --system-sans:  "San Francisco", "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif;
        --system-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
        --system-mono:  ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
        --body-font:    var( --system-sans );
        --heading-font: var( --system-serif );
	--content-width: 90ch;
}


@media(hover:hover) and (min-width: 1024px) {
/**
 **      Vermiglione - Variable Serif Font - Licensed under OFL
 **      https://github.com/m-casanova/Vermiglione
 **/
        @font-face {
                font-family:            'Vermiglione';
                font-weight:            200 700;
                font-display:           swap;
                src:                    url( 'assets/vermiglione.woff2' ) format( 'woff2' );
        }


        /** Roboto Variable Font **/
        @font-face {                    /* latin */
                font-weight:            100 1000;
                font-stretch:           50% 200%;
                font-display:           swap;
		src:			local('Roboto Flex'), url('assets/RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].woff') format('woff');
/*
                font-family:            'Roboto Flex';
                src:                    url( fonts/roboto-flex.woff2 ) format( 'woff2' );
                src:                    url( 'assets/RobotoFlex.woff2' ) format( 'woff2' );
                src:                    url( 'assets/RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].woff2' ) format( 'woff2-variations' );
                unicode-range:          U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
Files are
RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].woff2
RobotoFlex.woff2
*/
        }
        @font-face {                    /* latin-ext */
                font-family:            'Roboto Flex';
                font-weight:            100 1000;
                font-stretch:           50% 200%;
                font-display:           swap;
                src:                    url( 'assets/roboto-flex-latin-ext.woff2' ) format( 'woff2' );
                unicode-range:          U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }
/**
 **      Defining the var on a tag limits the value to that tag and its children
 **      These definitions therefore override the :root ones above               **/
        body {
                --body-font:            "Roboto Flex", "San Francisco", "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif;
                --heading-font:         --body-font;
        }
        i, em, .italic {
                font-style:             oblique 12deg;
                letter-spacing:         .01em;
        }

}
/**
 **      Typography                      **/
html {
/**
 **      Declaring html element resets the browser's default rem size
 **      Not using css clamp so we avoid a max-value if users zoom in
 **      At 300px vw font-size is 15.96px & at 1920px vw it's 21.144px   **/
        font-size:                      18px; /* fallback rule */
        font-size:                      calc( 15px + ( 16 * .02vw ) );
}
html > body {
        font-family:                    var( --body-font );
        font-style:                     normal;
        font-weight:                    300;
	background:			url( assets/graph_tile.png );
}
a:link, a:visited {
	color:				#00b;
	text-decoration-thickness:	.1em;
	text-underline-offset:		.2em;
	display:			inline-block;
}
a:hover, a:focus {
	color:				#900;
	text-decoration-thickness:	.2em;
	text-underline-offset:		.3em;
	padding:			.15em;
	margin:				-.15em;
	border-radius:			.35em;
	box-shadow:			inset 0 0 3px rgba( 200, 100, 220, 0.4 );
}
ul {
	padding-left:			2ch;
	margin:				.6rem 0;
	padding-inline-start:		1lh;
}
ul li {
	list-style-position:		outside;
	padding:			.2em 0;
}
ul.bullets > li::marker {
	color:				#900;
	font-size:			1.1em;
}
ul.bullets > li:hover::marker {
/*	content:			"💡";
*/
	content:			"👉 ";
	font-size:			.9em;
}
#foss li, #volunteer li, #affiliations li {
	margin-bottom:			.5rem;
	list-style-type:		none;
	text-align:			center;
}
.card-wide li {
	list-style-position:		outside;
}
.card .flex-container {
	display:			flex;
}
@container ( width < 350px ) {
	 .card .flex-container {
		display:		block;
	}
}
#volunteer > ul.flex-container,
#affiliations > ul,
#find-follow > ul {
	flex-wrap:			wrap;
	justify-content:		space-evenly;
	gap:				.5rem;
	padding:			0;
	> li {
		flex-basis:		12ch;
		padding:		.35em 0;
	}
}
#volunteer > ul.flex-container > li,
#affiliations > ul > li {
	flex-basis:			48%;
	margin-bottom:			0;
	align-content:			center;
}
#volunteer > ul.flex-container  > li img,
#affiliations > ul > li svg,
#affiliations > ul > li img {
	max-width:			96%;
	height:				auto;
}
#affiliations > ul[class] > li {
	padding:			.65rem 0;
}
#volunteer > ul.flex-container  > li img {
	max-height:			90px;
}
#appear-publish .flex-container {
	justify-content:		space-between;
}
#appear-publish .flex-container > div {
	flex-basis:			48%;
}
#appear-publish a {
	display:			inline;
}
#appear-publish img {
	max-width:			100%;
}
li > .pub-list {
	padding-left:			2ch;
}
.pub-list > em::before {
	content:			"\A";
	white-space:			pre;
}
figure {
	margin:				0;
	padding:			.5rem 0;
}

header, main {
	max-width:			var( --content-width );
	margin:				0 auto;
}

main {
	margin:				3rem auto;
	display:			flex;
	flex-wrap:			wrap;
	gap:				2rem;
}
.card {
	container-type:			inline-size;
	container-name:			card;
	flex-basis:			calc( 50% - 3.2rem );
	justify-content:		space-between;
	padding:			0 1rem 1rem;
	border:				1px solid #cfcfcf;
	border-radius:			.2rem;
	overflow:			hidden;
	background:			rgba( 255, 255, 255, 0.7 );
	box-shadow:			0px 2px 6px rgba(0,0,0,0.2);
}
@media screen and ( max-width: 560px ) {
	.card {
		flex-basis:		100%;
	}
}
.card.card-wide {
	flex-basis:			100%;
}
h1 {
	margin:				1.5em 0 -0.75em;
	color:				#600;
}
.card h2 {
	background:			rgba( 200, 200, 200, 0.2 );
	border-bottom:			1px solid #cfcfcf;
	margin:				0 -1rem;
	padding:			.4em 1.4ch;
	color:				#600;
}
.card h3 {
	font-size:			1.15rem;
	margin:				.75em 0 0;
	padding:			.15em 0;
	font-weight:			500;
	text-align:			left;
}
.card p {
	margin:				0;
	padding:			.25em 0;
}

#volunteer > div,
#work > div {
	> ul,
	> figure {
		flex-basis:		50%;
	}
}
#work > div > figure {
	text-align:			center;
}

#photo {
	min-height:			185px;
	background: url( "assets/brt_banner_graffitti-wheel.jpg" ) 100% 42% no-repeat;
	background-size: cover;
}
ul.longform li,
ul.social li {
	list-style-type:		none;
}
span.icon > svg {
	height:				1.3em;
	margin:				-0.3em 0.5ch -0.3em 0;
}
.linkedin > svg { color:		#0077b5; }
.github   > svg { color:		#000; }
.xtwitter > svg { color:		#000; }
.mastodon > svg { color:		#563acc; }
.bluesky  > svg path { fill:		#295ef6; }
#fairpm {
	display:			inline-block;
	margin:				.8rem auto;
	padding:			.35rem 2ch .65rem;
	border:				1px solid #c0c0c0;
	border-radius:			.6rem;
}
#aspirepress-logo > svg {
	width:				135px;
}
#wp-logo > svg {
	max-width:			175px;
}
#penguinista svg {
	max-width:			280px;
	height:				auto;
}
#tedx img {
	max-width:			260px;
	height:				auto;
}
#webriggers svg {
	max-width:			200px;
	height:				auto;
}
#techapalooza img {
	max-width:			300px;
	height:				auto;
}
#vote-open img {
	height:				100px;
	width:				auto;
}
#rainy-day img {
	margin-top:			.6rem;
}
.wcba img {
	max-height:			72px;
}
#ibam-logo {
	max-height:			60px;
}