/*
Theme Name: Quark Child
Theme URI: https://maddisondesigns.com/quark/
Description: Quark Child Theme
Author: Nathan Grover
Author URI: http://nathangrover.com
Template: quark
Version: 1.0.0
*/

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1.  FONTS
   2.  GLOBAL LINK COLORS
   3.  BASE / TYPOGRAPHY
   4.  NAVIGATION
   5.  LAYOUT
   6.  WIDGETS & MISC FIXES
   7.  FRONT PAGE
   8.  SHARED ENTRY HEADER
   9.  BOOKS
   10. BLOG - SHARED (Index / Archive / Search)
   11. BLOG - SINGLE
   12. ENTRY CONTENT TYPOGRAPHY (shared)
   13. COMMENTS
   14. BOTTOM NAVIGATION
   15. MEDIA QUERIES
   ========================================================================== */


/* ==========================================================================
   MARK: 1. FONTS
   ========================================================================== */

@font-face {
  font-family: 'Latin Roman Slanted';
  src: url('fonts/lmromanslant10-regular.woff') format('woff');
}

@font-face {
  font-family: 'Latin Roman Slanted';
  src: url('fonts/lmromanslant10-bold.woff') format('woff');
  font-weight:bold
}

@font-face {
  font-family: 'Latin Roman Demi';
  src: url('fonts/lmromandemi10-regular.woff') format('woff');
}

@font-face {
  font-family: 'Latin Roman Demi';
  src: url('fonts/lmromandemi10-oblique.woff') format('woff');
  font-style: italic;
}

@font-face {
  font-family: 'Palanquin';
  src: url('fonts/palanquin-regular.woff') format('woff');
}

@font-face {
  font-family: 'Palanquin';
  src: url('fonts/palanquin-bold.woff') format('woff');
  font-weight:bold
}

@font-face {
  font-family: 'Palanquin';
  src: url('fonts/palanquindark-semibold.woff') format('woff');
  font-weight:900
}

@font-face {
  font-family: 'Palanquin';
  src: url('fonts/palanquin-thin.woff') format('woff');
  font-weight:100
}


/* ==========================================================================
   MARK: 2. GLOBAL LINK COLORS
   ========================================================================== */

a:focus,
a:hover, a:active,
.social-media-icons a:hover, .social-media-icons a:active,
.entry-header h1 a:hover,
.header-meta a:hover,
.author-link a:focus,
.author-link a:hover,
.author-link a:active,
.site-footer a:hover,
.site-footer a:focus,
.smallprint a:hover,
li a:hover.prev,
li a:hover.next,
.main-navigation li:hover > a, /* Nav bar link color on hover */
.main-navigation ul ul a:hover, /* Nav bar dropdown link color on hover */
.main-navigation .current-menu-item > a, /* Nav bar link color for current menu item or ancestor */
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a, .main-navigation .current-page-item > a,
.main-navigation .current_page_ancestor > a, .main-navigation .current-page-ancestor > a,
.main-navigation .current_page_parent > a, /* .main-navigation .current-page-parent > a, */
body.single .post-categories a:hover {
	color: #EA9775;
}

.post-categories a:hover,
.post-tags a:hover,
.page-links a:hover .page-numbers,
li a:hover.page-numbers {
	background-color: #EA9775;
}


/* ==========================================================================
   MARK: 3. BASE / TYPOGRAPHY
   ========================================================================== */

body {
	background-color:#E5D360;
	font: 16px / 1.5 'Palanquin';
}

h2, h3, h4, h5 {
    font-family: 'Latin Roman Demi';
}

a {
    text-decoration:none;
    transition: color 0.25s, background-color 0.25s;
}

a:hover {
	color:#EA9775;
}


/* ==========================================================================
   MARK: 4. NAVIGATION
   ========================================================================== */

.main-navigation li { /*navigation links on the main header*/
	font-family:Palanquin;
	font-weight:400;
	font-size:1rem;
	text-transform:uppercase;
}

.main-navigation .current-menu-item > a { /*active page  on the main header*/
	color:#EA9775;
}

/* ==========================================================================
   MARK: 5. LAYOUT
   ========================================================================== */

.site-content {
    max-width:none;
    width:100%;
}

body #primary {
    padding:3rem 12.5%;
    background-size:400px 400px;
    background-repeat: repeat;
}

body.wp-singular #primary {
    background-color:#FDF9DB;
	background-image: url("/wp-content/uploads/2026/09/grassy-main3.png");
}

body.blog #primary,
body.single-post #primary,
body.archive #primary,
body.search #primary,
body.page-template-page-series #primary {
	background-color:#FDF9DB;
	background-image: url("/wp-content/uploads/2026/09/grassy5.png");
}

.site-header {
    width:95%;
}

#headercontainer {
    background-color:#ffffff;
    border-top:0.25em solid #E5D360;
}

body article {
	padding:2rem;
	background-color:#fff;
}

.site-title h1 {
    margin:0.25rem 0rem;
}

.pg-header-img {
    width: 23.8%;
}

#maincontentcontainer {
	background-color:#F9926E;
}


/* ==========================================================================
   MARK: 6. WIDGETS & MISC FIXES
   ========================================================================== */

/* Latest Comments widget — per-instance block settings, so this only
   affects the sidebar copy of the widget. */
ol.wp-block-latest-comments article {
	padding:0;
}


/* ==========================================================================
   MARK: 7. FRONT PAGE
   ========================================================================== */

body.home #primary {
	background-image:
		url("images/latest-posts-cap.svg"),
		url("/wp-content/uploads/2026/09/grassy5.png");
	background-position:
		top left,
		left top;
	background-size:
		100% auto,
		400px 400px;
	background-repeat:
		no-repeat,
		repeat
}


#pg-frontpage-header {
	border-top: 8px solid #E5D360;
	background-color:#F9926E;
	background-size:contain;
	background-position-x:center;
	background-position-y:32px;
	background-image: url('/wp-content/uploads/2025/10/pg-main-image-w-bad-rodeo-scaled.png');
	background-attachment: fixed;
	background-repeat: no-repeat;
	padding-bottom:45px;
}

/* -- Mission Statement -- */

#pg-frontpage-header #statement {
	background-color:#F9926E;
	padding:1rem;
	margin:46% auto 0 auto;
	max-width: 75%;
}

#pg-frontpage-header #statement .pg-name-statement { /* the big "Puzzlegrass" at the beginning of the statement */
	font-size:185%;
}

#pg-frontpage-header #statement p {
	color:#ffffff;
	font-size: 20pt;
	text-transform:uppercase;
	font-family: 'Latin Roman Slanted';
}

#pg-frontpage-header #statement p:last-of-type {
	margin-bottom:0px;
}

#pg-frontpage-header #statement p a {
	color:#b94517;
	transition: color 0.35s;
}

#pg-frontpage-header #statement p a:hover {
	color:#67281F;
}

a.frontpage-more-link {
	font-size:1.5rem;
	padding:0.25rem;
	margin: 1rem;
}

/* -- Promo Card Elements (shared structure — colors set per-instance below) -- */

.pg-promo-badge-wrap {
	transform: rotate(-3deg);
}

.pg-promo-badge {
	font-weight: 900;
	font-size: 1.5rem;
	padding: 0.5rem;
}

.pg-promo-title {
	font-family: 'Latin Roman Demi';
	line-height: 1em;
	padding: 0em 1rem 1rem 1rem;
	margin-top: 1.75rem;
}

.pg-promo-author {
	font-family: 'Latin Roman Demi';
	line-height: 1em;
	padding: 1rem;
	margin-top: 1.75rem;
}

.pg-promo-description {
	padding: 1em;
	margin: 1em;
	text-align: left;
	transform: rotate(2deg);
}

.pg-promo-cta-wrap {
	transform: rotate(-1deg);
}

/* -- Latest Publication (BBF) -- */

#latest-publication-2 {
    background-image: url("/wp-content/uploads/2026/07/BBF-Promo-2.jpg");
    background-color:#6D766C;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right top;
    width: 100%;
    margin-bottom:1rem;
}

#latest-publication-2 #latest-publication-inner {
    min-height:550px;
    display:flex;
}

#latest-publication-2 #latest-publication-inner-left {
	flex: 1 1 55%;
	display: flex;
	flex-direction: column;
	justify-content: center;  /* vertical centering */
	align-items: center;      /* horizontal centering */
	text-align: center;
	padding: 2rem;
	max-width:100%;
}

#latest-publication-2 #latest-publication-inner-right {
	flex: 1 1 45%;
}

/* BBF-specific colors/sizes */

#latest-publication-2 .pg-promo-badge {
	background-color: #324D3E;
	color: #FFC436;
}

#latest-publication-2 .pg-promo-title {
	font-size: 450%;
	color: white;
	background-color: #324D3E;
}

#latest-publication-2 .pg-promo-author {
	background-color: #324D3E;
	font-size: 200%;
	color: white;
}

#latest-publication-2 .pg-promo-description {
	color: #FFC436;
	background-color: #324D3E;
	max-width: 600px;
}

/* button */

#latest-publication-2 a.frontpage-more-link {
	display:block;
	background-color:#324D3E;
	color:white;
	font-size:1.5rem;
	margin:1em;
}

#latest-publication-2 a.frontpage-more-link:hover {
	background-color:#FFC436;
	color: #324D3E;
}

/* -- Latest Publication (GENESIS) -- */

#latest-publication-1 {
    background-image: url("/wp-content/uploads/2025/11/genesis-promo1-scaled.jpg");
    background-color:#444662;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    width: 100%;
}

#latest-publication-1 #latest-publication-inner {
    min-height:550px;
    display:flex;
}

#latest-publication-1 #latest-publication-inner-left {
    flex: 1 1 45%;
}

#latest-publication-1 #latest-publication-inner-right {
	flex: 1 1 55%;
	display: flex;
	flex-direction: column;
	justify-content: center;  /* vertical centering */
	align-items: center;      /* horizontal centering */
	text-align: center;
	padding: 2rem;
	max-width:100%;
}

/* GENESIS-specific colors/sizes */

#latest-publication-1 .pg-promo-badge {
	background-color: #67281F;
	color: #F9926E;
}

#latest-publication-1 .pg-promo-title {
	font-size: 700%;
	color: white;
	text-shadow: 0px 0px 12px #ffffff;
	background-color: #67281F;
}

#latest-publication-1 .pg-promo-description {
	color: #F9926E;
	background-color: #67281F;
}

/* button */

#latest-publication-1 a.frontpage-more-link {
	background-color:#67281F;
	color:white;
}

#latest-publication-1 a.frontpage-more-link:hover {
	background-color:#EA9775;
	color:#67281F;
}

/* -- Latest Posts -- */

.home #primary {
    clear:left;
}

#latest-posts {
	margin-bottom:4rem;
}

#latest-posts h2 { /* Frontpage heading for listing of latest posts */
    text-align:center;
    font-size:4rem;
    color: #83282C;
    margin-bottom:3rem;
}

#latest-posts .post-teaser-list {
    display:flex;
    flex-flow: wrap;
    /* justify-content: space-between; */
    gap: 2%;
    margin-bottom:1.25rem;
}

#latest-posts .post-teaser {
    display:flex;
    width:32%;
    margin-bottom:1.25rem;
    padding:1.5rem 1rem 1rem 1rem;
    background-color:#ffffff;
    border:1px solid #333333;
    position: relative; /* anchor for the stretched link */
    cursor: pointer;
    transition: box-shadow 0.5s, transform 0.35s, background-color 0.35s;
}
/* NOTE: this used to be two separate ".post-teaser" rulesets — one with
   a stray, invalid "': box-shadow 0.2s ease, transform 0.2s ease;"
   line (a leftover half-written property with no name), and a second
   one that only set cursor:pointer. Merged into the single block above;
   the valid transition line already covers box-shadow/transform timing. */

#latest-posts .post-teaser:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    background-color: #fff7f6;
    transform: translateY(-2px);
}

#latest-posts .post-title a {
    text-decoration: none;
    color: inherit; /* optional, so it doesn't look like a lone blue link */
}

#latest-posts .post-title a::after {
    content: "";
    position: absolute;
    inset: 0; /* top/right/bottom/left: 0 */
    z-index: 1;
}

#latest-posts .post-teaser-img {
    flex:0 0 35%;
}

#latest-posts .post-teaser-text {
    flex: 1;
    padding:0rem 1rem;
    display: flex;
    flex-direction:column;
}

#latest-posts .post-date {
    font-size:0.8rem;
    font-weight:900;
}

#latest-posts .post-category {
    text-transform:uppercase;
    font-size:0.75rem;
    font-weight:100;
}

#latest-posts .post-teaser h3 {
    font-family: 'Latin Roman Demi';
    font-weight: bold;
}
/* NOTE: this used to be declared twice (once with font-weight:bold, once
   without) plus an empty, unused "#latest-posts-dev .post-teaser
   .post-excerpt {}" ruleset right between them — looked like a leftover
   from an experiment. Both removed/merged; nothing here should have
   changed visually. */

/* button */

#latest-posts a.frontpage-more-link {
	background-color:#67281F;
	color:white;
}

#latest-posts a.frontpage-more-link:hover {
	background-color:#EA9775;
	color:#67281F;
}

/* Subscription Form Area */

/* 
#frontpage-subscribe-area {
	background-image:
		url("/wp-content/uploads/2026/09/grassy5.png");
	background-position:
		left top;
	background-size:
		250px 250px;
	background-repeat:
		repeat;
	background-color:#511C12;
	margin:0em auto;	
}
 */

#frontpage-subscribe-area #subscribe-form {
	padding: 2rem 0.5rem;
    margin: 0 auto;

}


/* ==========================================================================
   MARK: 8. SHARED ENTRY HEADER
   ========================================================================== */

/* Base entry-title styling — overridden by higher-specificity rules in
   BLOG - SHARED and BLOG - SINGLE below, so it's safe for this to live
   earlier in the file. */
.entry-header .entry-title {
	font-family: 'Latin Roman Demi';
	font-weight: bold;
	font-size:3rem;
	margin-top: 0;
}


/* ==========================================================================
   MARK: 9. BOOKS
   ========================================================================== */

/* -- Books Index -- */

.book-title {
	line-height:3rem;
	margin-bottom:0.5rem;
}

body .entry-content p.book-author {
	margin-bottom:0.8rem;
}

body .entry-content p.book-entry {
	font: 16px / 1.5 'Palanquin';
}

/* -- Book Single Page — uses full-width-book.php + content-book.php -- */

body.page-template-full-width-book h1.entry-title {
	margin-bottom:0;
}

body.page-template-full-width-book p.pg-book-subtitle {
	font-family: Palanquin;
	font-size:2em;
	margin-bottom:0.67em;
}

/* Book Single Media-Text (content left, book cover right) block */

.pg-book-block-media-text .wp-block-media-text__content {
	padding:0;
}

.pg-book-block-media-text .wp-block-media-text__media {
	padding-left:2rem;
}


/* ==========================================================================
   MARK: 10. BLOG - SHARED (Index / Archive / Search)
   ========================================================================== */

body.blog .entry-header h1.entry-title,
body.archive .entry-header h1.entry-title,
body.search-results .entry-header h1.entry-title {
	font-family: 'Latin Roman Demi';
	font-weight: bold;
	font-size:2rem;
	margin-top: 0;
}

body.blog .post-date,
body.archive .post-date,
body.search-results .post-date {
    font-size:1rem;
    font-weight:900;
}

body.blog .post-category,
body.archive .post-category,
body.search-results .post-category {
    text-transform:uppercase;
    font-size:0.85rem;
    font-weight:100;
}

body.blog .entry-content,
body.archive .entry-content,
body.search-results .entry-content {
	margin-bottom:0px;
}

body.blog .entry-content p,
body.archive .entry-content p,
body.search-results .entry-content {
	margin-bottom:1rem;
}

body.blog a.more-link,
body.archive a.more-link,
body.search-results a.more-link {
	display:block;
	text-align:right;
	border-top: 1px solid #333333;
	font-family: Palanquin;
	font-size:1rem;
	padding:0.35rem 0.85rem;
	color:#333333;
	transition: color 0.25s;
}

/* NOTE: same trailing-comma issue as the header-meta rule above —
   the last selector in this list has a comma with nothing after it,
   so this rule is currently invalid/ignored by browsers. */
body.blog a.more-link:hover,
body.archive a.more-link:hover,
body.search-results a.more-link:hover, {
	color: #EA9775;
}

body.blog .edit-link,
body.archive .edit-link,
body.search-results .edit-link {
	margin: 1rem 0 1rem 0;
}

.site-content article {
	margin-bottom:1rem;
}

.series-post-date {
	font-family:Palanquin;
	text-transform:uppercase;
	font-size:0.875rem;
}

/* -- Blog Index Widget Area -- */

#secondary.widget-area aside {
	background-color:#fff;
	padding:0.75rem;
	margin-bottom:1rem;
}

#secondary.widget-area aside h2 {
	font-size:1.6em;
}

#secondary.widget-area ul, #secondary.widget-area p {
	margin-bottom: 0;
}

/* -- Comments Sidebar Widget -- */

.sidebar-comments-block {
	margin-right:0.25em;
}

.sidebar-comments a {
	color: #EA9775;
}

.sidebar-comments a:hover {
	color: #ea5633;
}

/* -- Archive Indexes -- */

header.archive-header,
body.search-results header.page-header {
	background-color:#EA9775;
	padding:1rem 2rem;
	margin-bottom: 1rem;
	border:0;
}

header.archive-header h1.archive-title,
body.search-results header.page-header h1.page-title {
	font-size:1rem;
	font-family:Palanquin;
	font-weight:bold;
	margin:0;
	color:#FBED7E;
}

header.archive-header h1.archive-title span,
body.search-results header.page-header h1.page-title span {
	font-weight:normal;
}


/* ==========================================================================
   MARK: 11. BLOG - SINGLE
   ========================================================================== */

body.single h1.entry-title {
	margin-bottom:1.25rem;
}

body.single .header-meta {
	border-top: 1px solid #333333;
	border-bottom: 0;
	padding: 0;
	margin-bottom:1rem;
}

body.single .posted-on,
body.single .byline,
body.single .post-categories,
body.single .comments-link {
	display:inline-block;
	border:0;
	font-family:Palanquin;
	font-style:normal;
	padding:0.5rem 0 0.5rem 0;
	margin:0;
}

body.single time.entry-date {
	font-style:normal;
	font-weight:bold;
}

body.single .posted-on,
body.single .post-categories {
	padding-right: 1.5rem;
	border-right:1px solid #333333;
}

body.single .post-categories a {
	color: #333333;
	text-transform:uppercase;
	font-size:0.8rem;
}

body.single .post-categories a,
body.single .post-categories a:hover {
	background-color:transparent;
}

body.single .comments-link .fa-comment {
	color:#B0B0B0;
}

body.single .entry-content {
	margin:2rem 0 0 0;
}

body.single .entry-content h2,
body.single .entry-content h3,
body.single .entry-content h4 {
	margin-bottom:1.5rem;
}

.edit-link {
	display:none;
}

body .pg-callout {
	border-radius: 3px;
	padding:1em;
	background-color: #fdf9de;
	margin-bottom:1.5rem;
}

body.single .pg-callout p:last-of-type, body .pg-callout ul:last-of-type {
	margin-bottom:0px;
}

body.single hr {
	border-top:1px solid;
	margin:0 0 1.5rem 0;
}


/* ==========================================================================
   MARK: 12. ENTRY CONTENT TYPOGRAPHY (shared — single posts, books, etc.)
   ========================================================================== */

body .entry-content p, .entry-content ul, .entry-content ol {
	font-size: 1.25rem;
	line-height: 1.9rem;
	font-family:Cardo;
}

body .entry-content em {
	font-family: Cardo;
	font-style: italic;
}

body .entry-content strong {
	font-family: 'Cardo';
	font-weight:bold;
}

body .entry-content a,
body #comments a,
body #comments a:visited {
	color: #EA9775;
	transition: color 0.25s;
}

body .entry-content a:hover,
body #comments a:hover {
	color: #ea5633;
}

body .entry-content blockquote {
    border-left: 10px solid #EA9775;
    margin: 0 0 1.125rem 0.65rem;
    padding: 0 0 0 1.5rem;
    font-style:normal;
}

body .entry-content blockquote strong {
	font-family: 'Cardo 700';
	font-weight:bold;
}

.entry-meta .tag-label { /* theme list at the end of the post */
	color: #333333;
	text-transform:uppercase;
	font-size:0.8rem;
	margin-right:0.35rem;
}
/* NOTE: there used to be a second, near-identical
   "body .entry-content a, .entry-content a:visited { color: #EA9775; }"
   rule right before the one above — same color, no transition. Folded
   into the single rule above since it was fully redundant. */


/* ==========================================================================
   MARK: 13. COMMENTS
   ========================================================================== */

body .comments-area {
	background-color: #314b3c;
	padding: 2rem;
}

body .comments-area h2,
body .comments-area h3,
body .comments-area p {
	color: #FDF9E0;
}

body .comment-content h2,
body .comment-content h3,
body .comment-content p {
	color: #333333;
}

body #respond {
	background-color: #314b3c;
	margin-top:0;
}

.comments-area article.comment {
	border-radius:0.5rem;
	padding:1.25rem;
}

.comments-area article header cite,
.comments-area article header time {
	margin-left: 3.5rem;
}

#comments .commentlist {
	padding-bottom:2rem;
	border-bottom: 1px solid #FDF9E0;
}

#respond form {
	margin-bottom:0px;
}

#respond form label {
	display:inline-block;
	min-width:75px;
	margin-left:0.25rem;
}

#respond #wp-comment-cookies-consent {
	margin:0;
}


/* ==========================================================================
   MARK: 14. BOTTOM NAVIGATION
   ========================================================================== */

#nav-below a {
	display:inline-block;
	background-color:#FDF9E0;
	padding:0.5rem;
	margin: 1rem 0;
}


/* ==========================================================================
   MARK: 15. MEDIA QUERIES
   ========================================================================== */

/* TODO: mobile nav toggle behavior still needs styling work — default
   state flagged as unsatisfying. */
   
   
   
/* -- Latest Posts 1200px-wide and less --*/
   	
@media only screen and (max-width: 1200px) {
	
	#latest-posts article.post-teaser {
		width: 49%
	}
}

/* Go full width below 800px */
@media only screen and (max-width: 800px) {

	.pg-header-img {
        width: 100%;
    }

	.grid_1_of_12,
	.grid_2_of_12,
	.grid_3_of_12,
	.grid_4_of_12,
	.grid_5_of_12,
	.grid_6_of_12,
	.grid_7_of_12,
	.grid_8_of_12,
	.grid_9_of_12,
	.grid_10_of_12,
	.grid_11_of_12,
	.grid_12_of_12 {
		width: 100%;
		margin-left: 0;
		margin-right:0;
	}
	
	
	.site-title h1 {
		text-align:center;
	}
	
	.site-title img {
		max-width:250px;
		margin:1rem auto;
	}
	
	/* Setting the main nav (horizontally listed) to center */
	
	.main-navigation .menu-menu-1-container {
		text-align: center;
	}
	
	.main-navigation .nav-menu {
		display: inline-block;
		margin-bottom:0.5rem;
	}

	/* Reducing main body area padding at smaller screen sizes */
	
	body #primary {
		padding-left:1.5rem;
		padding-right:1.5rem;
	}
	
	/* -- Front Page 800px-wide and less */
	
	/* Front Page Header */
	
	#pg-frontpage-header #statement {
		margin-top:50%;
		max-width:80%;
	}
	
	#pg-frontpage-header #statement p {
		font-size:16pt;
	}
	
	/* Promos */
	
	/* Promo Card Shared Elements 800px-wide & less */

	
	.pg-promo-badge {
		font-weight: 900;
		font-size: 1rem;
		padding: 0.25rem;
	}
	
	.pg-promo-title {
		padding: 0.5rem 0.75rem 0.75rem 0.75rem;
		margin-top: 1.25rem;
	}
	
	.pg-promo-author {
		line-height: 1em;
		padding: 0.5rem 0.75rem 0.75rem 0.75rem;
		margin-top: 1rem;
	}
	
	.pg-promo-description {
		padding: 1em;
		margin: 1em;
		text-align: left;
		transform: rotate(2deg);
	}
	
	.pg-promo-cta-wrap {
		transform: rotate(-1deg);
		margin:0;
	}

	/* -- Latest Publication (BBF) 800px-wide and less -- */

	#latest-publication-2 {
		background-image: url("/wp-content/uploads/2026/09/BBF-Promo-2-small.jpg");
		background-size: auto 520px;
		background-position: center top;
	}
	
	#latest-publication-2 #latest-publication-inner-left {
		flex: 1 1 100%;
		margin-top:520px;
	}
	
	#latest-publication-2 #latest-publication-inner-right {
		flex: 1 1 0%;
	}
	
	
	#latest-publication-2 .pg-promo-title {
		font-size: 250%;
	}
	
	#latest-publication-2 .pg-promo-author {
		font-size: 150%;
	}
	
	/* button */
	
	#latest-publication-2 a.frontpage-more-link {
		margin:0px;
	}
	
	/* -- Latest Publication (GENESIS) 800px-wide and less -- */
	

	#latest-publication-1 {
		background-image: url("/wp-content/uploads/2026/09/genesis-promo-small2.jpg");
		background-color:#c16b57;
		background-size: auto 520px;
		background-position: center top;
	}
	
	#latest-publication-1 #latest-publication-inner-left {
		flex: 1 1 0%;
	}
	
	#latest-publication-1 #latest-publication-inner-right {
		flex: 1 1 100%;
		margin-top:520px;
	}
	
	#latest-publication-1 .pg-promo-title {
		font-size: 425%;
	}
	
	/* button */
	
	#latest-publication-1 a.frontpage-more-link {
		margin:0;
	}
	
	#secondary.widget-area aside {
		margin-bottom:0px;
	}

}

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

	body #primary {
		padding:1.5rem 1rem;
	}
	
	body article {
    	padding:1.25rem;
    }
	
	/* -- Front Page 650px-wide and less */
	
	/* -- Latest Posts 650px-wide and less --*/
	
	#latest-posts article.post-teaser {
		width: 100%
	}
		
	body.home #primary {
		background-image:
			url("images/latest-posts-cap-small.svg"),
			url("/wp-content/uploads/2026/09/grassy5.png");
		background-position:
			top left,
			left bottom;
		background-size:
			100% auto,
			250px 250px;
		background-repeat:
			no-repeat,
			repeat
	}
}
	
@media only screen and (max-width: 600px) {
	
	
	#latest-posts h2 { /* Frontpage heading for listing of latest posts */
    font-size:2.5rem;
    margin-bottom:1.5rem;
}
	
	/*-- Books Index --*/
	
		.wp-block-media-text__media {
		padding-bottom:1.5rem;
	}
	
	/*-- Book Single --*/
	
	/* book single media-text block */
	
	.pg-book-block-media-text .wp-block-media-text__content {
		padding:0;
	}

	.pg-book-block-media-text .wp-block-media-text__media {
		padding-left:0rem;
	}
	
	.commentlist .children {
		margin-left:0px;
		padding-left:1.5rem;
	}

}

@media only screen and (max-width: 520px) {
	
	#pg-frontpage-header #statement .pg-name-statement { /* the big "Puzzlegrass" at the beginning of the statement */
	font-size:140%;
}

	
	.main-navigation ul li {
		width: auto;
		margin: 0 0 0 0.7rem;
		font-size:80%;
	}
	
}

@media only screen and (max-width: 460px) {
	body.single .header-meta {
		padding-top: 1rem;
	}

	.header-meta span.posted-on time {
		margin:0px;
	}



	.header-meta span.posted-on,
	.header-meta span.post-categories,
	.header-meta span.comments-link {
		display:inline-block;
		padding:0px;
		margin:0px;
		border:0px;
		float:none;
	}
}