/*
Theme Name: Pippa Press
Theme URI: https://padraigriley.com
Author: Padraig Riley
Description: Block theme for padraigriley.com. Palette drawn from the Pilot Light cover; a tree-of-life motif runs through the dividers. Fonts are self-hosted -- no third-party CDN, no tracking, nothing loaded from outside this server.
Version: 1.2.1
Update URI: false
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pippa-press
Tags: blog, portfolio, one-column, full-site-editing, block-patterns, custom-colors, custom-menu
*/

/*
 * Everything that can live in theme.json lives there. This file is only for
 * what the block system cannot express: the torn edge under dark sections,
 * the root divider, the wordmark lockup, and the shelf rows.
 */

/* ---------------------------------------------------------------- header */

/*
 * Sticky lives on the wrapper, not on this block. See the rule further down
 * that makes `body .wp-site-blocks > header` sticky.
 *
 * It was here, and it did nothing. A sticky element can only travel inside its
 * containing block, and this block's parent -- the template-part <header> --
 * shrink-wraps to exactly its height. Zero room to move, so it scrolled away
 * like a static element while still reporting `position: sticky`, which is why
 * it read as working.
 */
.pp-header {
	z-index: 20;
}

.pp-brand {
	display: flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
}

.pp-brand img {
	width: 64px;
	height: 64px;
	display: block;
}

.pp-wordmark {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 30px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--cream);
}

.pp-wordmark small {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
	margin-top: 3px;
}

/* Navigation: small caps, brass on hover. The block supplies the markup. */
.pp-header .wp-block-navigation {
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 600;
}

.pp-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--brass);
}

/* --------------------------------------------- full-bleed band spacing */

/*
 * WordPress puts a block gap between every top-level block, which leaves a
 * strip of page background showing between the header and whatever follows it.
 * On a site built from edge-to-edge coloured bands that reads as a mistake --
 * a pale line under the header, with the torn edge stranded below it.
 *
 * Bands butt directly against each other. Vertical rhythm comes from each
 * band's own padding, not from gaps between them.
 */
/*
 * Specificity note: WordPress prints its global styles after the theme
 * stylesheet, and its own rule is :where(.wp-site-blocks > *), which has
 * zero specificity but wins on source order. body + class clears it without
 * resorting to !important.
 */
body .wp-site-blocks > *,
body .wp-site-blocks > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * The header is a template part wrapped in <header>. The gradient lives on the
 * group inside it, so any padding or margin on the wrapper shows as a strip of
 * page background beneath the header. Carry the gradient on the wrapper too.
 */
/*
 * The header sticks, and it is the element carrying the gradient that does it.
 *
 * The comp puts background and stickiness on one element for a reason: a
 * sticky element with no background of its own is a window onto whatever
 * scrolls beneath it. Keeping both here means there is no transparent region
 * to leak through, whatever the inner blocks do with their padding.
 *
 * It also has to be this element rather than the block inside it, because a
 * sticky element can only travel within its containing block and that inner
 * block's parent is exactly its own height.
 */
body .wp-site-blocks > header {
	background: linear-gradient(180deg, var(--wp--preset--color--deep), var(--wp--preset--color--ink));
	line-height: 0;
	position: sticky;
	top: 0;
	z-index: 20;
}

body .wp-site-blocks > header > * {
	line-height: 1.7;
}

/*
 * The same two rules again for the editor canvas, which wraps blocks in
 * .is-root-container inside .editor-styles-wrapper rather than in
 * .wp-site-blocks. Without these the Site Editor shows a pale strip under the
 * header that does not exist on the live site, which is worse than a bug --
 * it is a bug you only see while deciding whether the design works.
 */
.editor-styles-wrapper .is-root-container > *,
.editor-styles-wrapper .is-root-container > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.editor-styles-wrapper .is-root-container > header {
	background: linear-gradient(180deg, var(--wp--preset--color--deep), var(--wp--preset--color--ink));
	line-height: 0;
}

.editor-styles-wrapper .is-root-container > header > * {
	line-height: 1.7;
}

/* ------------------------------------------------------- the torn edge */

/*
 * A dark section meeting a light one along a broken line rather than a ruled
 * one. Applied to the hero and to page heads. The clip-path is deliberately
 * irregular -- an even sawtooth reads as decoration, this reads as a torn
 * edge. The pseudo-element takes the colour of whatever follows it.
 */
.pp-torn {
	position: relative;
	overflow: hidden;
}

.pp-torn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 26px;
	background: var(--wp--preset--color--cream);
	clip-path: polygon(
		0 40%, 7% 62%, 15% 46%, 24% 68%, 34% 44%, 46% 66%,
		58% 40%, 72% 62%, 85% 46%, 100% 66%, 100% 100%, 0 100%
	);
}

.pp-torn--paper::after {
	background: var(--wp--preset--color--paper);
}

/* ------------------------------------------------------ root divider */

/*
 * A hairline that grows a small root cluster at its centre and fades out at
 * both ends. Padraig asked for the fade specifically. Same drawing language
 * as the roots under the PR monogram, kept spare on purpose -- repeat a motif
 * too often and it stops meaning anything.
 */
.pp-rootrule {
	display: flex;
	align-items: center;
	gap: 0;
	color: var(--wp--preset--color--moss);
	margin: var(--wp--preset--spacing--50) 0;
}

.pp-rootrule::before,
.pp-rootrule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: .5;
}

.pp-rootrule::before {
	background: linear-gradient(90deg, transparent 0%, currentColor 100%);
}

.pp-rootrule::after {
	background: linear-gradient(90deg, currentColor 0%, transparent 100%);
}

.pp-rootrule svg {
	flex: none;
	display: block;
}

/* --------------------------------------------------------------- hero */

.pp-hero {
	color: var(--wp--preset--color--cream);
	background-color: var(--wp--preset--color--ink);
	background-size: cover;
	background-position: center 28%;
	background-repeat: no-repeat;
}

/*
 * The cover art carries the hero, heavily darkened. The gradient is weighted
 * left because the streetlight on the cover falls under the headline.
 *
 * The fallback matters: if --pp-hero-image is unset, var() with no default
 * makes the whole background-image declaration invalid and the gradient is
 * lost with it. A transparent 1px keeps the gradient and simply shows the
 * background colour beneath, so a page without a cover still looks deliberate.
 */
/*
 * HERO FRAMING. Read this before changing the front page's background-position.
 *
 * The front page overrides the default below with `30% 20%`, set in
 * templates/front-page.html. It frames the WIDE Bell banner (attachment 129,
 * keeping-c-bell-hero-wide.jpg, 2172x724, a 3:1 landscape): the bell sits at
 * about 74% across in its locust frame, rope descending into the trail, quiet
 * dark forest on the left.
 *
 * WHICH VALUE ACTUALLY MOVES ANYTHING DEPENDS ON THE SCREEN WIDTH.
 * `background-size: cover` scales the image to cover both axes using whichever
 * ratio is larger, so the axis WITHOUT overflow ignores its position value
 * entirely. The hero is about 440px tall at every desktop width, so it is 3:1
 * -- the same shape as the image -- at roughly 1335px wide, and the moving axis
 * flips there. Measured in a real browser:
 *
 *    viewport  hero        overflow           what the value does
 *    1896px    1896x445    vertical, 187px    only the VERTICAL value moves it
 *    1416px    1416x445    vertical,  27px    almost nothing moves either way
 *    1000px    1000x437    horizontal, 311px  only the HORIZONTAL value moves it
 *     492px     492x449    horizontal, 857px  only the HORIZONTAL value moves it
 *
 * Why 20% vertical: at wide screens `center` (50%) crops the locust beam off
 * the top and leaves the bell hanging from nothing. 20% keeps the beam, the
 * bell and the rope in frame.
 *
 * Why 30% horizontal: on tablets the lede sits across the middle of the hero,
 * not under the headline. Raising the horizontal value slides the image LEFT
 * and pushes the bell onto the lede; 30% keeps it clear with margin. At
 * `center` it clears the lede by only a few pixels.
 *
 * NARROW SCREENS SHOW NO BELL, AND THAT IS DELIBERATE. Below about 600px the
 * copy spans the full width of the hero, so there is no empty right side for
 * the bell to sit in. Bringing it into frame (it needs 60% or more) would put
 * it directly behind the words. The quiet left of the forest shows instead;
 * the bell is on the book cover in the shelf directly below.
 *
 * READABILITY was measured on real browser renders with the hero's text hidden,
 * sampling the actual composited background under each text element's own box,
 * against each element's computed colour. At 30% 20%, across 1920/1440/1024:
 *    h1      #F4EFE6   16.4:1 mean, 16.1:1 at the 95th percentile
 *    eyebrow #D9932F    7.3:1 mean,  7.2:1 at the 95th percentile
 *    lede    #E6DDCD   13.8:1 mean, 13.0:1 at the 95th percentile
 *    lede, single brightest pixel: 7.1-8.1:1 (5.8:1 at 500px) -- a sparse
 *    highlight, not a band; the lede is large display text (AA needs 3:1).
 * All at or above the previous plate on mean and 95th percentile. Note the
 * eyebrow is #D9932F and the lede #E6DDCD: earlier figures quoted against
 * #B8956A and cream were measured against colours the page does not use.
 * If the art is ever swapped for a lighter plate, re-measure rather than
 * assuming the scrim will cope; the fix would be more darkening in the
 * gradient, not thinner art.
 *
 * THE FALLBACK. The old portrait plate (attachment 128,
 * keeping-c-bell-hero.jpg, 1024x1536) stays in the library. If it is ever put
 * back, the numbers above do not apply: on a portrait source the image always
 * scales to width, so the horizontal value does nothing at ANY width, and it
 * needs `center 12%` -- the 28% default below shows the rope and no bell.
 *
 * WHERE THINGS LIVE. The override is in templates/front-page.html, so it
 * applies to the front page only and any future hero keeps the default below.
 * This note lives here rather than beside the override because a comment in
 * the template is served in the page HTML to every visitor; a comment in this
 * file is a cached static asset.
 */
.pp-hero--cover {
	background-image:
		linear-gradient(90deg,
			rgba(13, 20, 18, .94) 0%,
			rgba(13, 20, 18, .86) 46%,
			rgba(13, 20, 18, .52) 100%),
		var(--pp-hero-image, linear-gradient(var(--wp--preset--color--deep), var(--wp--preset--color--ink)));
}

.pp-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
	font-weight: 600;
	margin: 0 0 14px;
}

/* A lede carries its emphasis in the italic serif and the size, not in a
   lighter colour. On paper it is ink, the same as body: going greyer than
   body would turn a lede into a caption and invert the hierarchy. */
.pp-lede {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--lede);
	max-width: 34ch;
	color: var(--wp--preset--color--ink);
}

/* On a dark ground the equivalent is mist. This is deliberately an override
   rather than the default: the pale value only ever worked over the hero, and
   defaulting to it is what made this text invisible everywhere else it was
   used. Keyed off the dark containers and the background classes, so the
   class stays safe wherever the editor puts it. */
.pp-hero .pp-lede,
.pp-subscribe .pp-lede,
.has-ink-background-color .pp-lede,
.has-deep-background-color .pp-lede {
	color: var(--wp--preset--color--mist);
}

/* --------------------------------------------------------- shelf rows */

.pp-shelf-row {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 34px;
	align-items: start;
	padding: 34px 0;
}

.pp-shelf-row + .pp-shelf-row {
	border-top: 1px solid rgba(47, 93, 90, .22);
}

.pp-shelf-row img {
	width: 100%;
	display: block;
	border: 1px solid rgba(0, 0, 0, .3);
	box-shadow: 0 16px 36px rgba(13, 20, 18, .26);
}

.pp-series {
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
	font-weight: 600;
	margin: 0 0 14px;
}

@media (max-width: 700px) {
	.pp-shelf-row {
		grid-template-columns: 110px 1fr;
		gap: 20px;
	}
}

/* ----------------------------------------------------------- the list */

.pp-subscribe {
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--cream);
}

/*
 * The comp puts the signup on one line: a field and a button, nothing else.
 * Riley Forms renders a conventional stacked form with a heading and labels,
 * which is correct markup and the wrong shape here -- so the band is laid out
 * rather than the plugin rewritten. The labels stay for screen readers.
 */
/*
 * Centred, per Raphiel and per the comp.
 *
 * The hero is left-aligned because it is a story block -- headline, lede,
 * button. This band is a single ask on a dark interrupt, and one field sitting
 * left across 1080px reads as a form that has lost a column, which is most of
 * why the block felt oversized. Centring is what makes it a modest invitation.
 * The paper sections are a different surface and stay left.
 */
.pp-subscribe {
	text-align: center;
}

/*
 * 26px from the paragraph to the form, carried by the paragraph as the comp
 * has it, rather than left on the form wrapper where it had drifted to 32px.
 *
 * The 46ch cap is the measure. It went missing the same way the lede colour
 * did -- a constraint that did not travel with the declaration it belonged to.
 * Full-width light type on a dark ground is a measure error, not a choice.
 */
.pp-subscribe .wp-block-group > p {
	margin: 0 auto 26px;
	max-width: 46ch;
}

/*
 * The wrapper is a fixed-width block, so centring the items inside it is not
 * enough -- the box itself has to be centred or the whole form sits left while
 * appearing internally balanced.
 */
.pp-subscribe .rf-wrap {
	margin-top: 0;
	margin-inline: auto;
}

.pp-subscribe .rf-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: 12px;
	margin-top: 0;
}

.pp-subscribe .rf-promise {
	margin-left: auto;
	margin-right: auto;
}

.pp-subscribe .rf-form > p,
.pp-subscribe .rf-field {
	margin: 0;
}

/*
 * The wrapper carries the sizing, not the input.
 *
 * A minimum width on the input while its wrapper stayed free to shrink meant
 * the two could disagree: the wrapper narrowed under pressure, the input
 * refused, and the button was then placed against the wrapper's edge -- on
 * top of the input that had outgrown it.
 *
 * flex-basis 280px with grow and shrink lets the field take the space it can
 * get and drop to its own row when it cannot, so the row is always internally
 * consistent. The input simply fills whatever the wrapper turns out to be.
 */
.pp-subscribe .rf-field {
	flex: 1 1 280px;
	min-width: 0;
}

/* The plugin's own title duplicates the band heading above it. */
.pp-subscribe .rf-form h2,
.pp-subscribe .rf-title {
	display: none;
}

/*
 * The email label duplicates the placeholder beside it, so it is hidden from
 * sight while kept for screen readers.
 *
 * The consent field is excluded, and the exclusion is load-bearing. Its label
 * *wraps* its checkbox rather than sitting beside it, so clipping the label
 * clips the control with it -- leaving a required checkbox rendered at one
 * pixel, which no visitor can tick and no visitor can see. The form then
 * refuses to submit, and the browser points its validation bubble at nothing.
 * Never hide a label that contains its own input.
 */
.pp-subscribe .rf-field:not(.rf-consent) label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.pp-subscribe input[type="email"],
.pp-subscribe input[type="text"] {
	padding: 13px 15px;
	border: 1px solid rgba(244, 239, 230, .25);
	border-radius: 2px;
	background: rgba(244, 239, 230, .06);
	color: inherit;
	font: inherit;
	width: 100%;
}

.pp-subscribe input[type="email"]::placeholder,
.pp-subscribe input[type="text"]::placeholder {
	color: rgba(244, 239, 230, .55);
}

.pp-subscribe input[type="email"]:focus,
.pp-subscribe input[type="text"]:focus {
	outline: 2px solid var(--wp--preset--color--brass);
	outline-offset: 1px;
}

.pp-subscribe button,
.pp-subscribe input[type="submit"] {
	padding: 13px 26px;
	border: 0;
	border-radius: 2px;
	background: var(--wp--preset--color--brass);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

.pp-subscribe button:hover,
.pp-subscribe input[type="submit"]:hover {
	background: var(--wp--preset--color--brass-dark);
	color: var(--wp--preset--color--cream);
}

/* The consent line sits under the row, not beside the field. */
.pp-subscribe .rf-consent {
	flex-basis: 100%;
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(244, 239, 230, .7);
}

/*
 * The same treatment wherever a Riley form appears on a light background --
 * the Books page notify box and the Contact form.
 */
.rf-form input[type="email"],
.rf-form input[type="text"],
.rf-form textarea {
	padding: 12px 14px;
	border: 1px solid rgba(47, 93, 90, .3);
	border-radius: 2px;
	background: #fff;
	font: inherit;
	color: inherit;
	max-width: 100%;
}

.rf-form textarea {
	min-height: 150px;
	width: min(100%, 560px);
	resize: vertical;
}

.rf-form button {
	padding: 12px 24px;
	border: 0;
	border-radius: 2px;
	background: var(--wp--preset--color--brass);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

.rf-form button:hover {
	background: var(--wp--preset--color--brass-dark);
	color: var(--wp--preset--color--cream);
}

/* --------------------------------------------------------- typography */

/* Long-form reading. Wider measure than the layout default would give. */
.entry-content > p {
	max-width: 68ch;
}

/* Prevent a lone word on the last line of a serif heading. */
h1, h2, h3 {
	text-wrap: balance;
}

/* ------------------------------------------------------ accessibility */

/*
 * The sticky header and the torn edge both rely on motion or overlap that
 * some readers find uncomfortable. Nothing here animates, but honour the
 * preference for anything added later.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

:where(a:focus-visible),
:where(button:focus-visible) {
	outline: 2px solid var(--wp--preset--color--brass);
	outline-offset: 2px;
}

/* ------------------------------------------------- cards and shelf rows */

/*
 * The comp gives the shelf and Writing bands bordered cards rather than bare
 * columns. A hairline plus generous padding is most of what makes a comp read
 * as designed; without it the structure is identical and the page is plainer.
 */
.pp-card {
	border: 1px solid rgba(47, 93, 90, .22);
	border-radius: 3px;
	padding: 24px 22px 26px;
	background: var(--wp--preset--color--paper);
	height: 100%;
}

/*
 * Core sets `word-break: break-word` on every .wp-block-column. That value is
 * a deprecated alias that behaves like overflow-wrap, so normalising it here
 * is correctness rather than a fix -- it changes nothing today, and stops a
 * future browser treating it as the eager `break-all` it is named after.
 *
 * It does NOT solve the broken word on the homepage shelf. That one is a
 * measurement problem, not a wrapping mode: in the four-across shelf row the
 * card is 155px with 22px side padding, leaving 109px of text, and
 * "preoccupations." measures 115px at the body size. It overflows by six
 * pixels, so overflow-wrap breaks it, correctly and unavoidably.
 *
 * Six pixels. Any of a slightly narrower side padding, a smaller body size in
 * the shelf, three cards instead of four, or `hyphens: auto` would clear it --
 * all of which are design levers, so none are chosen here.
 */
.pp-card {
	word-break: normal;
}

.pp-card h3 {
	margin: 0 0 8px;
}

/*
 * A standalone "read more" link under a card.
 *
 * PROVISIONAL treatment, pending Raphiel. The site sets links to inherit the
 * text colour with no underline, which is a deliberate choice and right for a
 * link inside prose, where the sentence carries the context. It leaves a
 * standalone call to action with no affordance at all: this one rendered as
 * ink, undecorated, identical to the paragraph above it, and nothing told a
 * reader it could be clicked.
 *
 * An underline is the minimum that fixes that without inventing a colour --
 * brass fails contrast on this ground at 2.41:1. The comp's idiom for this
 * role is actually a button (.btn / .btn ghost), so he may well want that
 * instead. Replace rather than defend.
 */
.pp-more a {
	text-decoration: underline;
	text-underline-offset: .18em;
}

.pp-more a:hover,
.pp-more a:focus {
	text-decoration-thickness: 2px;
}

.pp-card p:last-child {
	margin-bottom: 0;
}

/* Book covers carry a hairline and a real shadow, as on a shelf. */
.pp-shelf-row figure,
.pp-shelf-row .wp-block-image {
	margin: 0;
}

.pp-shelf-row .wp-block-image img {
	width: 100%;
	display: block;
	border: 1px solid rgba(0, 0, 0, .3);
	box-shadow: 0 16px 36px rgba(13, 20, 18, .26);
}

/* ------------------------------------------- the author photograph */

/*
 * SETTLED -- Raphiel, 15 September 2026. Padraig asked for "some curve on the
 * corners and some unnoticeable shadow to just lift the picture a bit", and
 * this is that request answered directly. Shipped provisional, then confirmed
 * with one change: the radius came down from 5px to 4px.
 *
 * The border and the shadow's shape and hue are deliberately the shelf
 * covers' treatment, twelve lines above, rather than new values. The photo
 * sitting flat while every cover on the site is lifted is what made it look
 * like it belonged to a different page.
 *
 * Two departures from that rule, both because a photograph is not a jacket:
 *
 *   - Radius 4px. Covers have square corners, because a book does. 2px is
 *     invisible at 480px wide; 6px starts to read as a card or a Polaroid,
 *     which is a new object type nobody asked for. 4px is the curve he asked
 *     for and nothing more. Raphiel's note: do not match the 3px card token
 *     literally -- at this width 4px is the same visual softness as 3px on a
 *     shelf card.
 *   - Weight. The cover shadow is tuned for a 150px object on a shelf. At
 *     480px the same values read as a drop rather than a lift, so the offset
 *     and blur come in slightly and the opacity comes down from .26 to .18.
 *     He asked for unnoticeable. The shape is unchanged.
 *
 *     If it ever reads flat, raise the opacity to .20. Do not grow the blur
 *     -- that turns a lift into a drop, which is the thing this avoids.
 *
 * The border is 1px solid rgba(0, 0, 0, .3) with the covers, and stays there.
 * It is a print edge, not --rule, which is the moss divider used on cards.
 *
 * Scope: a *direct* child of the About page's content. That combinator is
 * the ground guard, not just tidiness -- an image on a dark band would be
 * wrapped in a group and so could never be a direct child, which is why a
 * dark border and a dark shadow are safe here. Nothing else on the site can
 * match: not the shelf covers, not the footer mark, not the share image,
 * which never appears in a body at all.
 */
.pp-about-body > .entry-content > .wp-block-image img {
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 4px;
	box-shadow: 0 14px 30px rgba(13, 20, 18, .18);
}

/* ------------------------------------------------------------- footer */

.pp-footer-press {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ash);
}

.pp-footer-press figure,
.pp-footer-press .wp-block-image {
	margin: 0;
}

.pp-footer-press img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: block;
}