/*
Theme Name:   PeepDrinks
Theme URI:    https://peepdrinks.com/
Description:  Child theme of GeneratePress recreating the 2010-2016 PeepDrinks.com look (WooThemes "Crisp" art and values) as a long-scroll, large-photo, single-column site.
Author:       PeepDrinks.com
Template:     generatepress
Version:      1.0.0
License:      GPL-2.0-or-later
Text Domain:  peepdrinks
*/

/* ==========================================================================
   0. Tokens + fonts
   Values copied from Crisp style.css / effects.css / Woo options.
   ========================================================================== */
@font-face {
	font-family: "League Gothic";
	src: url(assets/fonts/LeagueGothic.otf) format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "Handlee";
	src: url(assets/fonts/Handlee-Regular.woff2) format("woff2");
	font-display: swap;
}
:root {
	--peep-page: 800px;
	--peep-gutter-left: 60px;           /* room for the post badges */
	--peep-gutter-right: 40px;
	--peep-ink: #424242;
	--peep-title: #222;
	--peep-link: #2badef;               /* woo_link_color */
	--peep-link-hover: #006a7d;         /* woo_link_hover_color */
	--peep-bar: #2b2b2b;
	--peep-yellow: #f7df2b;
	--peep-gold: #a18400;
	--peep-rule: #faec80;
	--peep-meta: #959595;
	--peep-share-red: #d34544;
	--peep-serif: Georgia, Times, "Times New Roman", serif;
	--peep-sans: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   1. Page: pink/red stripes, 800px white sheet with scalloped edges
   ========================================================================== */
body {
	background: #e3093f url(assets/img/bg-body.jpg) repeat left top;
	color: var(--peep-ink);
	font: 17px/1.6 var(--peep-serif);
}
a, a:visited { color: var(--peep-link); text-decoration: none; }
a:hover, a:focus { color: var(--peep-link-hover); text-decoration: underline; }

.site-header,
.peep-navwrap,
.site.grid-container,
.site-footer {
	max-width: var(--peep-page);
	margin-left: auto;
	margin-right: auto;
}
.site-header {
	position: relative;
	margin-top: 40px;
}
.site-header::before {                  /* scalloped top edge */
	content: "";
	position: absolute;
	left: 0; right: 0; top: -20px;
	height: 20px;
	background: url(assets/img/bg-pattern-top.png) repeat-x left bottom;
}
.site-header,
.site.grid-container,
.site-footer,
.peep-bottom { background: url(assets/img/bg-wrap-tile.png) repeat-y center top; }
.separate-containers .site-main > *,
.separate-containers .inside-article,
.one-container .container,
.site-content,
.site-info { background: transparent; }
.site.grid-container, .site-content, .content-area, .site-main, .site-main > article, .inside-article { overflow: visible; }
.site.grid-container { padding: 30px 0 0; }
.site-footer {
	position: relative;
	margin-bottom: 60px;
}
.site-footer::after {                   /* scalloped bottom edge */
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -20px;
	height: 20px;
	background: url(assets/img/bg-pattern-bottom.png) repeat-x left top;
}

/* ==========================================================================
   2. Header: red logo left, welcome text right
   ========================================================================== */
.site-header .inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 8px 34px 14px 40px;       /* 8px + scallop's 8px white = 17px, matching the gap under the logo */
	max-width: none;
}
.site-logo img, .custom-logo { width: 360px; max-width: 100%; height: auto; }
.main-title, .site-description { display: none; }  /* logo carries the name */
.peep-about { margin-left: auto; align-self: flex-end; text-align: right; }   /* bottom-aligned: "and alcohol." sits on the logo's red baseline */
.peep-about p { margin: 0; }
.peep-about__motto {
	font: italic 22px/1.2 var(--peep-serif);
	color: purple;
}

/* ==========================================================================
   3. Navigation: dark bar + yellow band with the italic gold sub-menu row
   ========================================================================== */
.peep-navwrap {
	position: relative;
	max-width: calc(var(--peep-page) + 8px);   /* Crisp's bar overhangs the page */
	z-index: 50;
}
.peep-nav {
	display: flex;
	align-items: center;
	height: 40px;
	padding: 0 38px 0 20px;              /* right edge lines up with the motto (34px + 4px overhang) */
	background: var(--peep-bar);
	font: 11px/12px var(--peep-sans);
}
.peep-nav__home {
	display: block;
	margin-right: 15px;
	padding-right: 10px;
	border-right: 1px dotted #848484;
	line-height: 0;
}
.peep-nav__home:hover { opacity: .6; }
.peep-nav__pour,
.peep-nav__pour:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 5px 12px 5px 9px;
	border-radius: 5px;
	background: var(--peep-share-red);
	color: #fff;
	font: 11px/1 var(--peep-sans);
	text-transform: uppercase;
	letter-spacing: .03em;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.peep-nav__pour:hover { color: #fff; filter: brightness(1.1); text-decoration: none; }
.peep-pour__glass { width: 15px; height: 18px; flex: none; }
.peep-pour__short { display: none; }
.peep-button.peep-button--pour { display: inline-flex; align-items: center; gap: 7px; }
.peep-button--pour .peep-pour__glass { width: 16px; height: 19px; }
.peep-nav__toggle { display: none; }

.peep-menu, .peep-menu ul { list-style: none; margin: 0; padding: 0; }
.peep-menu { display: flex; gap: 20px; text-transform: uppercase; }
.peep-menu > li > a {
	display: block;
	color: var(--peep-link);
	line-height: 40px;
	text-decoration: none;
}
.peep-menu > li > a:hover,
.peep-menu > li:hover > a,
.peep-menu > li.is-open > a,
.peep-menu > li.current-menu-item > a,
.peep-menu > li.current-menu-ancestor > a {
	color: #fff;
	text-decoration: none;
	background: url(assets/img/bg-navhover.png) no-repeat center bottom;
}
.peep-menu > li.peep-has-sub > a {
	padding-right: 12px;
	background: url(assets/img/arrow-superfish.png) no-repeat right center;
}
.peep-menu > li.peep-has-sub:hover > a,
.peep-menu > li.peep-has-sub.is-open > a {
	background: url(assets/img/bg-navhover.png) no-repeat center bottom, url(assets/img/arrow-superfish.png) no-repeat right center;
}

/* second level: a horizontal row of italic gold links inside the yellow band */
.peep-menu > li > .sub-menu {
	position: absolute;
	left: 75px;
	top: 40px;
	display: none;
	gap: 0 20px;
	max-width: 540px;
	height: 32px;
	align-items: center;
	font: italic 12px/20px var(--peep-serif);
	text-transform: none;
	z-index: 60;
}
.peep-menu > li:hover > .sub-menu,
.peep-menu > li:focus-within > .sub-menu,
.peep-menu > li.is-open > .sub-menu { display: flex; }
.peep-menu > li > .sub-menu > li { position: relative; }
.peep-menu > li > .sub-menu > li > a {
	color: #ab9227;
	/* "pillow emboss" (Aaron's pick, version B): light edge + soft glow below, faint dark edge above */
	text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(255, 255, 255, .6), 0 -1px 1px rgba(100, 80, 0, .22);
	text-decoration: none;
	white-space: nowrap;
}
.peep-menu > li > .sub-menu > li > a:hover,
.peep-menu > li > .sub-menu > li.current-menu-item > a { color: var(--peep-bar); }
.peep-menu > li > .sub-menu > li.peep-has-sub > a {
	padding-right: 12px;
	background: url(assets/img/arrow-superfish-right.png) no-repeat right 7px;
}

/* third level: small dark drop-down under a gold item */
.peep-menu .sub-menu .sub-menu {
	position: absolute;
	left: -5px;
	top: 26px;
	display: none;
	width: 150px;
	background: var(--peep-bar);
	font: 11px/12px var(--peep-sans);
	font-style: normal;
	text-transform: uppercase;
}
.peep-menu .sub-menu li:hover > .sub-menu,
.peep-menu .sub-menu li:focus-within > .sub-menu,
.peep-menu .sub-menu li.is-open > .sub-menu { display: block; }
.peep-menu .sub-menu .sub-menu li {
	border-top: 1px solid rgba(255, 255, 255, .2);
	border-bottom: 1px solid #000;
}
.peep-menu .sub-menu .sub-menu a {
	display: block;
	padding: 8px 15px;
	color: #fff;
	text-shadow: -1px -1px 0 #000;                 /* effects.css: .nav li ul ul li a */
	text-decoration: none;
}
.peep-menu .sub-menu .sub-menu a:hover { color: var(--peep-yellow); }

.peep-band {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 32px;
	padding: 0 38px 0 14px;              /* search box right edge lines up with the motto */
	background: var(--peep-yellow);
	border-top: 1px solid rgba(255, 255, 255, .6);
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.peep-search input[type="search"] {
	width: 157px;
	height: 21px;
	padding: 2px 24px 1px 10px;
	border: 0;
	background: url(assets/img/bg-search.png) no-repeat left center;
	font: 11px var(--peep-sans);
	color: #333;
}
.peep-band-shadow {                     /* folded-ribbon corners under the band, on the white page */
	height: 10px;
	background:
		url(assets/img/bg-searchbar.png) no-repeat center top,
		url(assets/img/bg-wrap-tile.png) repeat-y center top;
}

/* ==========================================================================
   4. Posts: badge, title, large photos, meta row
   ========================================================================== */
.site-main { margin: 0 !important; }
.site-main > article,
.inside-article {
	position: relative;
	padding: 0 !important;
	margin: 0 !important;
}
.site-main > article {
	margin: 0 var(--peep-gutter-right) 40px var(--peep-gutter-left) !important;
	padding-bottom: 10px !important;
	border-bottom: 2px solid var(--peep-rule);
}
.page .site-main > article,
.single .site-main > article { border-bottom: 0; }

.peep-badge {
	position: absolute;
	top: -12px;
	left: -70px;
	display: block;
	width: 52px;
	height: 52px;
	line-height: 0;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}
.peep-cap { width: 52px; height: 52px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.peep-cap__edge { fill: var(--peep-bar); }
.peep-badge:hover .peep-cap { transform: rotate(24deg); }     /* bottle-cap twist */
@media (prefers-reduced-motion: reduce) { .peep-cap { transition: none; } }

.entry-header { margin-bottom: 15px; }
.entry-title,
.entry-title a,
.page-title {
	font: normal 22px/24px var(--peep-serif);
	color: var(--peep-title);
}
.entry-title a:hover { color: var(--peep-title); text-decoration: underline; }
.peep-permalink, .peep-permalink:visited { padding-left: 6px; font-style: italic; color: var(--peep-meta) !important; }

/* featured drink photos */
.post-image, .featured-image { margin: 0 0 18px !important; text-align: center; }
.post-image img, .featured-image img,
.entry-content img.peep-photo {
	display: block;
	width: auto;                 /* tall photos: never taller than ~80% of the window, so the whole drink fits on a laptop screen */
	max-width: 100%;
	max-height: calc(100vh - 140px);   /* fits the screen with its title once scrolled to */
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
/* the first drink on a page sits under the ~330px header: keep all of it above the fold */
.site-main > article:first-of-type .post-image img,
.site-main > article:first-of-type .featured-image img,
.site-main > article:first-of-type .entry-content img.peep-photo { max-height: max(320px, calc(100vh - 340px)); }

/* WooTumblog quote posts */
.peep-pullquote {
	margin: 0 0 20px !important;
	padding: 18px 22px !important;
	background: var(--peep-rule) !important;
	color: #3a371c !important;
	font: italic 20px/1.45 var(--peep-serif) !important;
}
.peep-pullquote p { margin: 0 0 10px; }
.peep-pullquote footer { text-align: right; font-size: 14px; font-style: normal; }
.peep-pullquote footer::before { content: "~ "; }
.peep-pullquote footer a { color: #424242; }

.entry-content p { margin: 0 0 18px; }
.entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--peep-serif); font-weight: normal; color: #111; }
.entry-content blockquote {
	margin: 0 0 20px;
	padding: 10px 20px 10px 50px;
	border: 0;
	background: url(assets/img/blockquote.png) no-repeat 0 12px;
	color: #444;
	font-style: italic;
	font-size: inherit;
}

/* Normalize old copy-paste formatting: 30 inline "font-size: 13px; line-height: 13px"
   spans (Apple-style-span leftovers from 2011) made some ingredient lists and
   paragraphs tiny and cramped. Everything inside a post uses the body size. */
.entry-content [style*="font-size"],
.entry-content [style*="line-height"],
.entry-content .Apple-style-span {
	font-size: inherit !important;
	line-height: inherit !important;
}

/* Ingredient lists in drink posts line up under the drink photo: peep.js measures
   the post's first photo and sets --peep-photo-inset on the article (0 when the
   photo is full width, e.g. on phones). Bullets sit just inside the photo's edge. */
.post .entry-content ul {
	margin: 0 0 18px calc(var(--peep-photo-inset, 0px) + 6px) !important;
	padding-left: 1.3em !important;
	text-align: left;
}
.post .entry-content ul li { margin: 0 0 4px; }

/* large drink photos (see peep_large_photos) */
.entry-content img.peep-photo {
	float: none;
	margin-bottom: 18px;
}
.entry-content .peep-photo-caption {
	float: none !important;
	width: 100% !important;
	max-width: 100%;
	margin: 0 0 18px;
}
.entry-content .peep-photo-caption img.peep-photo { margin-bottom: 4px; }

/* single view: photo opens full-size in a new tab (see peep_zoom_link) */
.peep-zoom {
	position: relative;
	display: table;              /* shrink to the photo so the hint sits on it */
	margin: 0 auto 18px;
	cursor: zoom-in;
}
.peep-zoom img.peep-photo, .featured-image .peep-zoom img { margin-bottom: 0; }
.featured-image .peep-zoom, .peep-photo-caption .peep-zoom { margin-bottom: 4px; }
.peep-zoom__hint {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 5px 11px 6px;
	border-radius: 14px;
	background: rgba(43, 43, 43, .82);
	color: #fff;
	font: italic 14px/1.2 var(--peep-serif);
	text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
	white-space: nowrap;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s, transform .2s;
	pointer-events: none;
}
.peep-zoom:hover .peep-zoom__hint, .peep-zoom:focus-visible .peep-zoom__hint { opacity: 1; transform: none; }
.peep-zoom:hover, .peep-zoom:focus { text-decoration: none; }
@media (hover: none) {           /* phones and tablets: no hover, so keep a quiet hint showing */
	.peep-zoom__hint { opacity: .85; transform: none; font-size: 12px; right: 8px; bottom: 8px; }
}
.wp-caption .wp-caption-text, figcaption {
	font: 11px var(--peep-sans);
	color: #666;
	text-align: center;
}
.entry-content img.alignleft, .entry-content .alignleft { margin: 4px 18px 10px 0; }
.entry-content img.alignright, .entry-content .alignright { margin: 4px 0 10px 18px; }

footer.entry-meta {
	margin: 22px 0 10px;
	font: 13px/1.5 var(--peep-sans);
	color: var(--peep-meta);
}
footer.entry-meta a { color: var(--peep-meta); }
footer.entry-meta .gp-icon { display: none; }
footer.entry-meta .posted-on,
footer.entry-meta .comments-link {
	display: inline-block;
	margin-right: 20px;
	padding: 2px 0 2px 25px;
	background: no-repeat left center;
}
footer.entry-meta .posted-on { background-image: url(assets/img/ico-date.png); }
footer.entry-meta .comments-link { background-image: url(assets/img/ico-comments.png); }
footer.entry-meta .tags-links {
	display: block;
	margin: 12px 0 5px;
	padding: 2px 0 2px 25px;
	background: url(assets/img/ico-tags.png) no-repeat left 3px;
}
footer.entry-meta .post-navigation { margin-top: 18px; font-size: 12px; }
/* page links: see "Pagination" near the end of this file */
.page-header {
	margin: 0 var(--peep-gutter-right) 40px var(--peep-gutter-left) !important;
	padding: 0 0 16px !important;
	border-bottom: 2px solid var(--peep-rule);
	background: none !important;
}
.peep-archive__kicker {
	margin: 0 0 4px;
	font: bold 11px/1.2 var(--peep-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--peep-gold);
}
.page-header .page-title {
	margin: 0;
	font: italic 400 34px/1.15 "Handlee", cursive;
	color: var(--peep-share-red);
	text-transform: none;
}
.peep-archive__count { margin: 6px 0 0; font: italic 15px var(--peep-serif); color: var(--peep-meta); }
.page-header .taxonomy-description { margin-top: 8px; font-size: 15px; }

/* ==========================================================================
   5. "Sharing is sexy!" row
   ========================================================================== */
.peep-share { position: relative; margin: 26px 0 8px; padding-left: 44px; }
.peep-share__heading { position: relative; height: 30px; }
.peep-share__arrow {
	position: absolute;
	left: -40px;
	top: 6px;
	width: 26px;
	height: 47px;
	fill: var(--peep-share-red);
}
.peep-share__headline {
	margin-left: -24px;              /* tuck the S in against the arrow's tail */
	position: relative;
	top: -5px;
	font: italic 400 24px/30px "Handlee", cursive;
	color: var(--peep-share-red);
}
.peep-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 10px 0 0;
	padding: 0 0 4px;
	list-style: none;
}
.peep-share__item {
	height: 34px;
	overflow: hidden;                   /* tiles sit a little "sunk" until hovered */
	border-radius: 6px 6px 0 0;
	box-shadow: 0 6px 6px -6px rgba(0, 0, 0, .45);
}
.peep-chicklet,
.peep-chicklet:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 38px;
	background: var(--peep-chicklet);
	border-radius: 6px 6px 0 0;
	color: #fff;
	transform: translateY(6px);
	transition: transform .18s ease-out, filter .18s;
}
.peep-chicklet__icon { width: 20px; height: 20px; fill: currentColor; margin-top: -4px; }
.peep-chicklet:hover, .peep-chicklet:focus-visible {
	color: #fff;
	transform: translateY(0);
	filter: brightness(1.1);
}
@media (prefers-reduced-motion: reduce) {
	.peep-chicklet { transition: none; }
}
.peep-share__mastodon { margin-top: 10px; font: 12px var(--peep-sans); }
.peep-share__mastodon input { width: 180px; padding: 4px 6px; margin-left: 6px; }
.peep-share__mastodon button { padding: 4px 10px; font-size: 12px; }

/* ==========================================================================
   6. Closing band (replaces the old sidebar), quotes, buttons
   ========================================================================== */
.peep-bottom {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	margin: 0 auto;
	max-width: var(--peep-page);
	padding: 26px var(--peep-gutter-right) 18px var(--peep-gutter-left);
	position: relative;
	font-size: 14px;
	line-height: 1.55;
}
.peep-bottom::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--peep-gutter-left);
	right: var(--peep-gutter-right);
	border-top: 2px dashed var(--peep-rule);
}
.peep-script {
	margin: 0 0 12px;
	font: italic 400 26px/1.1 "Handlee", cursive;
	color: var(--peep-share-red);
}
.peep-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.peep-chip, .peep-chip:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 7px 5px 12px;
	border-radius: 999px;
	background: var(--peep-yellow);
	color: #3a371c;
	font: italic 14px/1 var(--peep-serif);
	color: #ab9227;
	/* same "pillow emboss" as the yellow sub-menu (version B) */
	text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(255, 255, 255, .6), 0 -1px 1px rgba(100, 80, 0, .22);
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08);
	text-decoration: none;
	transition: transform .15s;
}
.peep-chip:hover { color: #8f7810; text-decoration: none; transform: translateY(-2px); }
.peep-chip__count {
	min-width: 20px;
	padding: 3px 6px;
	border-radius: 999px;
	background: var(--peep-bar);
	color: #fff;
	font: bold 10px/1 var(--peep-sans);
	text-align: center;
	text-shadow: none;
}
.peep-button.peep-button--pour { font-size: 13px; padding: 7px 14px 8px; background: var(--peep-share-red); }

.peep-bottom__press .peep-quote p { font: italic 16px/1.5 var(--peep-serif); color: #333; }
.peep-quote { margin: 0 0 22px; padding: 0; border: 0; background: none; font-style: normal; color: #555; }
.peep-quote p { margin: 0 0 6px; }
.peep-quote footer { font: 12px var(--peep-sans); color: var(--peep-meta); }
.peep-quote cite { font-style: normal; }
.peep-quote cite a { font-weight: bold; }
.peep-quotes .peep-quote { padding-left: 50px; background: url(assets/img/blockquote.png) no-repeat 0 4px; }

.peep-button, .peep-button:visited {
	display: inline-block;
	padding: 5px 12px 6px;
	border-radius: 5px;
	background: var(--peep-link);
	color: #fff;
	font: 12px Verdana, Geneva, sans-serif;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, .25);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	text-decoration: none;
}
.peep-button--pink { background: #e8559a; }
.peep-button--small { font-size: 11px; padding: 3px 9px 4px; }
.peep-button:hover { color: #fff; opacity: .9; text-decoration: none; }

/* ==========================================================================
   7. Comments
   ========================================================================== */
.comments-area {
	margin: 0 var(--peep-gutter-right) 30px var(--peep-gutter-left) !important;
	padding: 20px 0 0 !important;
	border-top: 2px solid var(--peep-rule);
}
.comments-title, .comment-reply-title { font: normal 18px/1.3 var(--peep-serif); color: #222; }
.comment-content { border: 0; padding: 0; }
.comment-meta { font: 11px var(--peep-sans); color: var(--peep-meta); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea { border: 1px solid #ccc; background: #fff; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] { font: 14px var(--peep-sans); padding: 8px 10px; }
.comment-form textarea { font: 15px/1.5 var(--peep-serif); }
.comment-form .submit, .comment-form input[type="submit"] {
	background: var(--peep-link);
	border-radius: 5px;
	font: 12px Verdana, Geneva, sans-serif;
}

/* ==========================================================================
   8. Footer credit
   ========================================================================== */
.site-info { padding: 20px 0 30px; }
.site-info .inside-site-info { flex-direction: column; align-items: center; gap: 6px; }
.peep-disclaimer, .peep-connect { margin: 0; font: 12px var(--peep-sans); color: #666; text-align: center; }
.peep-connect a { color: #666; text-decoration: underline; }
.peep-credit { margin: 4px 0 0; font: bold 11px var(--peep-sans); color: var(--peep-bar); text-align: center; }

/* ==========================================================================
   9. Small screens
   ========================================================================== */
@media (max-width: 840px) {
	.site-header, .site.grid-container, .site-footer, .peep-bottom, .peep-band-shadow { background-image: none; background-color: #fff; }
	.peep-band-shadow { background: #fff url(assets/img/bg-searchbar.png) no-repeat center top / 100% 10px; }
	:root { --peep-gutter-left: 16px; --peep-gutter-right: 16px; }
	.site-header { margin-top: 20px; }
	.site-header .inside-header { flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; }
	.peep-about { margin: 0; align-self: center; text-align: center; }
	.peep-nav { padding: 0 16px; }
	.peep-band { padding: 0 14px; }
	/* scallops drawn in CSS on phones so a whole dot starts at the left edge (22px pitch, as in the art) */
	.site-header::before {
		background:
			radial-gradient(circle 7px at 11px 15px, #fff 96%, transparent 100%) 0 0 / 22px 20px repeat-x,
			linear-gradient(#fff, #fff) 0 12px / 100% 8px no-repeat;
	}
	.site-footer::after {
		background:
			radial-gradient(circle 7px at 11px 5px, #fff 96%, transparent 100%) 0 0 / 22px 20px repeat-x,
			linear-gradient(#fff, #fff) 0 0 / 100% 8px no-repeat;
	}
	.peep-about .peep-about__motto { font-size: 14px; line-height: 1.3; }
	.peep-about__br { display: none; }
	.site-logo img, .custom-logo { width: 220px; }
	body { font-size: 16px; }
	footer.entry-meta { font-size: 12px; }
	.page-header .page-title { font-size: 28px; }
	.peep-navwrap { max-width: none; }
	.peep-nav { flex-wrap: wrap; height: auto; min-height: 40px; padding: 0 16px; }
	.peep-nav__toggle {
		display: block;
		margin-left: 4px;
		padding: 6px 10px;
		border: 1px solid #555;
		border-radius: 3px;
		background: transparent;
		color: #ccc;
		font: 11px var(--peep-sans);
		text-transform: uppercase;
	}
	.peep-nav__pour { order: 2; padding: 5px 10px 5px 8px; }
	.peep-nav__pour .peep-pour__long { display: none; }     /* top bar on phones: glass + "POUR" */
	.peep-nav__pour .peep-pour__short { display: inline; }
	.peep-disclaimer, .peep-connect { padding: 0 16px; }
	.peep-menu { display: none; order: 3; flex-basis: 100%; flex-direction: column; gap: 0; padding: 4px 0 10px; }
	.peep-nav.is-open .peep-menu { display: flex; }
	.peep-menu > li > a { line-height: 36px; background: none !important; }
	.peep-menu > li.peep-has-sub > a { background: url(assets/img/arrow-superfish.png) no-repeat right center !important; display: inline-block; }
	.peep-menu > li > .sub-menu,
	.peep-menu .sub-menu .sub-menu {
		position: static;
		display: flex;
		flex-direction: column;
		height: auto;
		max-width: none;
		width: auto;
		padding: 0 0 6px 14px;
		background: none;
		align-items: flex-start;
	}
	.peep-menu > li > .sub-menu > li > a { color: var(--peep-yellow); text-shadow: none; line-height: 30px; }
	.peep-menu .sub-menu .sub-menu li { border: 0; }
	.peep-menu .sub-menu .sub-menu a { padding: 4px 0; text-shadow: none; }
	.peep-band { justify-content: center; }
	.peep-badge { position: static; float: left; width: 44px; height: 44px; margin: -6px 10px 4px 0; }
	.peep-cap { width: 44px; height: 44px; }
	.peep-bottom { grid-template-columns: 1fr; gap: 20px; }
	.peep-share { padding-left: 34px; }
	.peep-share__arrow { left: -32px; }
	.peep-share__headline { margin-left: -16px; }   /* a touch more room from the arrow on phones */
	.peep-share__list { gap: 8px 7px; flex-wrap: nowrap; }      /* all six chicklets on one row */
	.peep-chicklet, .peep-chicklet:visited { width: 42px; }
}

/* ==========================================================================
   10. Pressed ("pushed in") state for every button-like control
   ========================================================================== */
.peep-nav__pour:active,
.peep-button:active,
.peep-chip:active,
.comment-form input[type="submit"]:active,
.peep-share__mastodon button:active {
	transform: translateY(1px);
	filter: brightness(.9);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35);
}
.peep-chicklet:active { transform: translateY(3px); filter: brightness(.9); }

/* ==========================================================================
   Pagination (home and archive scroll): plain bordered boxes, current page
   dark. Kept neutral so it doesn't compete with the share icons and chips.
   ========================================================================== */
.paging-navigation {
	margin: 10px var(--peep-gutter-right) 30px var(--peep-gutter-left) !important;
	padding: 0 !important;
	background: none !important;
}
.paging-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 6px;
}
.paging-navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;                    /* flex drops the space between arrow and words */
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid #d6d6d6;
	border-radius: 6px;
	background: #fff;
	color: var(--peep-ink);
	font: 16px/1 var(--peep-sans);
	text-decoration: none;
	transition: border-color .15s, color .15s, background-color .15s;
}
.paging-navigation a.page-numbers:visited { color: var(--peep-ink); }
.paging-navigation a.page-numbers:hover, .paging-navigation a.page-numbers:focus-visible {
	border-color: var(--peep-link);
	color: var(--peep-link-hover);
	background: #f3fafe;
	text-decoration: none;
}
.paging-navigation .page-numbers.current {
	border-color: var(--peep-bar);
	background: var(--peep-bar);
	color: #fff;
	font-weight: bold;
}
.paging-navigation .page-numbers.dots { min-width: 20px; padding: 0; border: 0; background: none; color: var(--peep-meta); }
.paging-navigation a.prev { margin-right: 10px; padding: 0 14px; }
.paging-navigation a.next { margin-left: 10px; padding: 0 14px; }
.paging-navigation a.page-numbers:active { background: #e6f3fb; }
@media (max-width: 840px) {
	.paging-navigation { margin-left: 16px !important; margin-right: 16px !important; }
	/* newer/older on their own row under the numbers, side by side */
	.paging-navigation a.prev, .paging-navigation a.next { order: 2; margin: 2px 4px 0; }
	.paging-navigation .nav-links::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
}
@media (prefers-reduced-motion: reduce) { .paging-navigation .page-numbers { transition: none; } }