/*
 Theme Name:   Eileen Gunn
 Theme URI:    https://eileengunn.com/
 Description:  TwentyTwentyOne Child Theme
 Author:       Paul Novitski & John D. Berry
 Author URI:   http://juniperwebcraft.com/
 Template:     twentytwentyone
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  eileengunn
*/

/* Sitka Text normal normal */
/* Webfont: Sitka-b0000-1900000 */
@font-face {
    font-family: 'SitkaText';
    src: url('fonts/Sitka/Sitka-b0000-1900000.eot'); /* IE9 Compat Modes */
    src: url('fonts/Sitka/Sitka-b0000-1900000.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Sitka/Sitka-b0000-1900000.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Sitka/Sitka-b0000-1900000.woff') format('woff'), /* Modern Browsers */
         url('fonts/Sitka/Sitka-b0000-1900000.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/Sitka/Sitka-b0000-1900000.svg#Sitka-b0000-1900000') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Sitka Text italic normal */
/* Webfont: SitkaI-b0000-1900000 */@font-face {
    font-family: 'SitkaText';
    src: url('fonts/Sitka/SitkaI-b0000-1900000.eot'); /* IE9 Compat Modes */
    src: url('fonts/Sitka/SitkaI-b0000-1900000.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Sitka/SitkaI-b0000-1900000.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Sitka/SitkaI-b0000-1900000.woff') format('woff'), /* Modern Browsers */
         url('fonts/Sitka/SitkaI-b0000-1900000.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/Sitka/SitkaI-b0000-1900000.svg#SitkaI-b0000-1900000') format('svg'); /* Legacy iOS */
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}


/* Sitka Text normal bold */
/* Webfont: Sitka-b0000-2bc0000 */@font-face {
    font-family: 'SitkaText';
    src: url('fonts/Sitka/Sitka-b0000-2bc0000.eot'); /* IE9 Compat Modes */
    src: url('fonts/Sitka/Sitka-b0000-2bc0000.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Sitka/Sitka-b0000-2bc0000.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Sitka/Sitka-b0000-2bc0000.woff') format('woff'), /* Modern Browsers */
         url('fonts/Sitka/Sitka-b0000-2bc0000.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/Sitka/Sitka-b0000-2bc0000.svg#Sitka-b0000-2bc0000') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}


/* Sitka Text italic bold */
/* Webfont: SitkaI-b0000-2bc0000 */@font-face {
    font-family: 'SitkaText';
    src: url('fonts/Sitka/SitkaI-b0000-2bc0000.eot'); /* IE9 Compat Modes */
    src: url('fonts/Sitka/SitkaI-b0000-2bc0000.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Sitka/SitkaI-b0000-2bc0000.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Sitka/SitkaI-b0000-2bc0000.woff') format('woff'), /* Modern Browsers */
         url('fonts/Sitka/SitkaI-b0000-2bc0000.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/Sitka/SitkaI-b0000-2bc0000.svg#SitkaI-b0000-2bc0000') format('svg'); /* Legacy iOS */
    font-style: italic;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}




@font-face
{
	src: url('fonts/Gimlet/GimletSansVariable-VF.woff2') format("woff2"),
		 url('fonts/Gimlet/GimletSansVariable-VF.woff') format("woff");
	font-family: 'Gimlet Sans Variable Web';
}
/* Variables */
:root
{
	/* Font Family */
	--heading--font-family: 'Gimlet Sans Variable Web', sans-serif;
	--primary-nav--font-family: var(--heading--font-family);
	--entry-content--font-family: Sitka, Georgia, serif;
	--branding--title--font-size: 2rem;
	--branding--title--mobile--font-size: 1.0rem;
	--primary-nav--font-size: var(--global--font-size-lg);
	
	--color-black: #000000;	/* dark black */
	--color-red: #ac3823;	/* dark red */
	--color-green: #018b00;	/* dark green */
	--color-orange: #d87a00;	/* dark orange */
	
	--color-menu-item: var(--color-black);
	--color-menu-hover: var(--color-orange);
	--color-menu-current: var(--color-red);

	/* Line Height */
	--global--line-height-body: 1.5;
}
/* text font */
html,
.entry-content,
.entry-summary
{
	font-family: var(--entry-content--font-family);
}
/* display font */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
.wp-block-latest-comments .wp-block-latest-comments__comment-meta,
.site-title,
.site-description,
.site-footer .site-info .site-name
{
	font-family: var(--heading--font-family);
	font-weight: 700;
	letter-spacing: 1px;
}
.site-content h2,
.wp-block-columns .wp-block-column h2,
.site-content h3,
.wp-block-columns .wp-block-column h3
{
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.site-content h2 > h3,
.wp-block-columns .wp-block-column h2 > h3
{
	margin-top: .6rem;
	margin-bottom: 1rem;
}
.site-content ul li
{
	margin-bottom: .8rem;
	padding-left: 2rem;
	text-indent: -2rem;
	list-style-type: none;
}
.subtitle
{
	display: block;
	color: var(--color-red);
}

.entry-content a,
.site-footer .site-info .credits a
{
	text-decoration: none;
	text-decoration-thickness: 0px;
	text-underline-offset: 3px;
	text-decoration-skip-ink: all;

	color: var(--content--color--link,var(--global--color-primary));
}
.entry-content a:hover,
.site-footer .site-info .credits a:hover,
.site-footer .site-info .credits a:hover
{
	Xborder-bottom: 1px dotted #C2482E;
	color: #C2482E;
}
/*====================
site navigation menu
====================*/
@media only screen and (min-width: 482px)
{
	.primary-navigation
	{
		margin-left: 3rem;
	}
}
.primary-navigation a
{
	font-family: var(--primary-nav--font-family);
	font-weight: 600;
	font-size: var(--primary-nav--font-size);

	color: var(--color-menu-item);

	text-decoration: none;
	text-decoration-color: transparent;
	text-decoration-line: none;
	text-decoration-thickness: 0;
	text-underline-offset: 0
}
.primary-navigation > a:link,
.primary-navigation > a:visited
{
	color: var(--color-menu-item);
	text-decoration: none;
}
.primary-navigation > a:hover,
.primary-navigation > a:active
{
	color: var(--color-menu-hover);
	text-decoration: none;
}
html body .site .primary-navigation .current-menu-item a:link,
html body .site .primary-navigation .current-menu-item a:hover,
html body .site .primary-navigation .current-menu-item a:active,
html body .site .primary-navigation .current-menu-item a:visited,

html body .site .primary-navigation .current-menu-parent a:link,
html body .site .primary-navigation .current-menu-parent a:hover,
html body .site .primary-navigation .current-menu-parent a:active,
html body .site .primary-navigation .current-menu-parent a:visited
{
	color: var(--color-menu-current);
	cursor: default !important;

	text-decoration: none;
	text-decoration-color: transparent;
	text-decoration-line: none;
	text-decoration-thickness: 0;
	text-underline-offset: 0
}

@media only screen and (min-width: 482px)
{
	.primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle
	{
/*		margin-left: calc(5px - var(--primary-nav--padding));*/
		margin-left: calc(-5px - var(--primary-nav--padding));
	}
}


/*====================
site-wide block & line spacing
====================*/
.wp-block-column > .wp-block-quote:only-child,
.wp-block-column > :last-child:not(:only-child),
.wp-block-columns .wp-block-column p
{
	margin-bottom: 1em;
}
.wp-block-columns .wp-block-column p
{
	line-height: var(--global--line-height-body);
}
body.page article .entry-header
{
	margin-bottom: 0;
	padding-bottom: 0;
}

/*====================
site branding
====================*/
.site-branding h1,
.site-branding p
{
	display: inline-block;
}
.site-title span
{
	text-transform: lowercase;
}
.site-header .site-branding .site-title a:hover
{
	border-bottom: none;
	color: var(--content--color--link);
}
.site-header .site-branding .site-title
{
	font-size: var(--branding--title--font-size);
	text-transform: none;
}
.site-header
{
	box-shadow: none;
}
@media only screen and (max-width: 482px)
{
	.site-header .site-branding .site-title
	{
		font-size: var(--branding--title--mobile--font-size);
	}
}

/*====================
fiction pages - story copyright
====================*/
.site-main > article #story-copyright
{
	margin-top: 4rem;
	padding-top: 1rem;
	border-top: 1px solid black;
}
.story-break
{
	margin-top: 4rem;
}

/*===========================
site footer
===========================*/
.site-footer .site-info
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30px;
	justify-items: end;
}
.site-footer .site-info .site-name
{
	justify-self: end;
	align-self: start;
	text-transform: none;
}
.site-footer .site-info .site-name .tag
{
	text-transform: lowercase;
}
.site-footer .site-info .site-name a
{
	text-decoration: none;
	text-decoration-thickness: 0px;
	text-underline-offset: 3px;
	text-decoration-skip-ink: all;

	color: var(--content--color--link,var(--global--color-primary));
}
.site-footer .site-info .site-name a:link,
.site-footer .site-info .site-name a:visited
{
	color: var(--color-menu-item);
	text-decoration: none;
}
.site-footer .site-info .site-name a:hover,
.site-footer .site-info .site-name a:active
{
	color: var(--color-menu-hover);
	text-decoration: none;
}
.site-footer .site-info .credits
{
	display: grid;
	grid-template-columns: 1fr;
	justify-self: start;
	align-self: start;

	font-family: var(--entry-content--font-family);
	font-size: var(--global--font-size-md);
}
/*@media only screen and (min-width: 482px)*/
@media only screen and (max-width: 885px)
{
	.site-footer .site-info
	{
		display: grid;
		grid-template-columns: 1fr;
		column-gap: 30px;
		justify-items: start;
	}
	.site-footer .site-info .site-name
	{
		justify-self: start;
		align-self: start;
		text-transform: none;
		margin-bottom: 30px;
	}
}

/*====================
======================
page-specific styling:
======================
====================*/

/*====================
home page
====================*/
/*
	home page markup structure: (as of 2022-09-05)
	
	(This is the markup structure generated by WP Blocks, amended by our insertion of object ids and class names. I'm not yet confident that making a "visual editor" change in WP will not mangle the ids & classes in the markup.)
	
	For mobile layout, stack blocks:
	
	#home-block-1
	#home-block-2.column-feature
		#home-block-2.column-feature
			h2 .home-block-2-feature-head
			figure #home-block-2-feature-image .feature-cover
			p blurbs
		
	
	
	article
		.entry-content
			.wp-container-9.wp-block-group.alignfull
				.wp-block-group__inner-container
					.wp-container-8.wp-block-group.alignwide
						.wp-block-group__inner-container
							#home-blocks-top .wp-container-7 .wp-block-columns .alignwide .tw-gutter-large

								#home-block-1 .wp-container-1.wp-block-column
									figure
										img (Eileen on polkadot background)
									h2 "upcoming appearances:"
									p Chicon
									p "Coode Street Podcast | Sept 3"

								#home-block-2.column-feature
									h2 .home-block-2-feature-head
										span.pretitle "Eileen’s new book"
										span.title "Night shift"
										span.subtitle "stories and essays"

									figure #home-block-2-feature-image .feature-cover
									p blurb
									p blurb
									p blurb
									...
									
									.wp-container-5.wp-block-group.previous-titles
										.wp-block-group__inner-container
											h3 "Previously on Eileen Gunn:"
												div.wp-container-4 wp-block-columns is-not-stacked-on-mobile other-titles is-style-default tw-gutter-no has-text-align-left
													div#/questionable-practices/
														div.wp-block-image
															figure
																img
																figcaption "Questionable practices"
													div#/stable-strategies/
														div.wp-block-image
															figure
																img
																figcaption "Stable strategies and others"
																
	
*/
body.home h2
{
	font-size: var(--global--font-size-md);
}

body.home .entry-content h2 + .wp-block-columns
{
	margin-top: calc(var(--global--spacing-vertical)*1);
}
body.home .wp-block-image figcaption
{
	font-family: var(--heading--font-family);
	font-size: var(--global--font-size-md);
	font-weight: 900;
	letter-spacing: 1px;
	text-align: left;
	color: var(--color-black);
}
body.home .column-feature
{
	display: grid;
	grid-template-columns: 2fr 1fr;
	column-gap: 50px;
	row-gap: 1em;
}
body.home .column-feature > h2
{
	font-family: var(--heading--font-family);
	font-weight: 900;
	letter-spacing: 1px;
}
body.home .column-feature > h2 .pretitle
{
	font-size: var(--global--font-size-xl);
	color: var(--color-black);
}
body.home .column-feature > h2 .title
{
	font-size: var(--global--font-size-xxl);
	color: var(--color-red);
}
body.home .column-feature > h2 .subtitle
{
	display: block;
	font-size: var(--global--font-size-xl);
	color: var(--color-black);
}

body.home .column-feature > *
{
	grid-column: 1 / 2;
	margin-bottom: 0;
}
/* move featured book cover & caption to sidebar (second column, top row)  */
body.home .column-feature > *:nth-child(2)
{
	margin-top: 0;
	grid-column: 2 / 3;
	grid-row: 1 / 10;
}
.feature-cover figcaption
{
}
/*---------------------------
home - Previously on Eileen Gunn
---------------------------*/
body.home .column-feature .previous-titles .wp-block-columns
{
	margin-top: 0;
}
body.home .column-feature .previous-titles .wp-block-columns figcaption
{
	color: var(--color-red);
}

/*@media only screen and (min-width: 482px)*/
@media only screen and (max-width: 885px)
{
	body.home #home-block-2,
	body.home .column-feature
	{
		display: grid;
		grid-template-columns: 1fr;
		column-gap: 0px;
		row-gap: 1em;
	}
	body.home #home-block-2 > *
	{
		margin-top: 0;
		grid-column: 1 / 2;
		grid-row: none;
	}
	/* block sequence: title, img, blurb, previous  */
	body.home #home-block-2 > *:nth-child(1)
	{
		grid-row: 1 / 2;
	}
	body.home #home-block-2 > *:nth-child(2)
	{
		grid-row: 2 / 3;
	}
	body.home #home-block-2 > *:nth-child(3)
	{
		grid-row: 3 / 4;
	}
	body.home #home-block-2 > *:nth-child(4)
	{
		grid-row: 4 / 5;
	}
	body.home .previous-titles .wp-block-image figcaption
	{
		font-size: var(--global--font-size-sm);
	}
}

/*====================

====================*/
.tw-header-bg .site-header
{
	padding-bottom: 0;
}

.singular:not(.tw-title-no-border) .entry-header::after
{
	border-bottom: none;
}

.entry-header .post-thumbnail img
{
	margin-top: 0;
	max-width: 610px;
}
html body .site .site-content
{
	padding-top: 0;
}

/*====================
page - bibliography
====================*/
body.page_bibliography h3
{
	line-height: 1;
	margin-bottom: 1rem;
}
