/*
Theme Name: Phil Portus
Theme URI: https://www.philportus.co.uk
Author: Phil Portus rebuild
Description: A dark "photographer black" block theme for Phil Portus Photography — a photobook aesthetic in near-black, core blocks only, no page builder, no external assets, no build step. Edit files, upload, commit. See MAINTENANCE.md.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: philportus
*/

/* Tokens live in theme.json (--wp--preset--color--*, --wp--preset--font-family--*).
   This file is the component layer + the interactive chrome the design needs
   (fixed header, full-page menu, lightbox, video posters). All monochrome:
   the only colour on any page comes from the photographs. */

:root {
	--ground: var(--wp--preset--color--ground);
	--surface: var(--wp--preset--color--surface);
	--ink: var(--wp--preset--color--ink);
	--muted: var(--wp--preset--color--muted);
	--line: var(--wp--preset--color--line);
	--bright: var(--wp--preset--color--bright);
	--serif: var(--wp--preset--font-family--serif);
	--measure: 65ch;
	--head-h: 5.75rem;
	--placeholder: #202024;   /* off-black used behind images while they load */
	/* One wrap width for the whole site: the header/footer/menu boxes are
	   sized so their content lines up exactly with wide content (galleries),
	   which sit at wide-size within the site's edge padding. Change the width
	   once in theme.json (wideSize) and header, footer and galleries all move
	   together. */
	--pp-pad: clamp(1.25rem, 4vw, 3rem);
	--pp-wrap-max: calc(var(--wp--style--global--wide-size) + 2 * var(--pp-pad));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* clip, don't scroll: the full-bleed hero is 100vw, which is a hair wider than
   the content area when a classic scrollbar is present — never a h-scrollbar. */
body { -webkit-font-smoothing: antialiased; overflow-x: clip; }

/* ---------- content column (copies the design's wrap) ----------
   The design uses a wrap of `max-width:1280px; margin:0 auto; padding:0
   clamp(1.25rem,4vw,3rem)`, giving a 1184px content section. Here the content
   sits in a 1184px column (= wideSize) centred on the page, with the site's
   edge padding around it — same result. Everything inside that column aligns
   to the LEFT; structural blocks (section heads, post lists, galleries, book
   cards) fill the column, reading text is held to a comfortable measure. */
.pp-site-main > .wp-block-post-content,
.pp-site-main > .wp-block-query,
.pp-site-main > header.pp-page-head,
.pp-site-main > .wp-block-group {
	max-width: var(--wp--style--global--wide-size) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.pp-site-main .wp-block-post-content > *,
.pp-site-main .wp-block-query > *,
.pp-site-main .wp-block-group > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}
.pp-prose,
.wp-block-post-content > p,
.wp-block-post-content > h2,
.wp-block-post-content > h3,
.wp-block-post-content > h4,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > .wp-block-list,
.wp-block-post-content > blockquote {
	max-width: var(--measure);
}
.pp-display, h1.pp-display, .pp-page-head h1 { max-width: 24ch; }
img, svg { display: block; max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--bright); outline-offset: 3px; }

/* appearanceTools makes WordPress emit a root block-gap rule that adds a 24px
   margin above every top-level block (header, main, footer) via a
   zero-specificity :where(.wp-site-blocks) > * selector. On hero pages that
   margin pushes the full-bleed header image down from the top. Header, main
   and footer own their own spacing, so zero it — this class selector outranks
   the generated :where() rule whatever the stylesheet load order. */
.wp-site-blocks > * { margin-block-start: 0; }

.pp-label {
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ---------- fixed site header ---------- */
.pp-head {
	position: fixed; top: 0; left: 0; right: 0; z-index: 60;
	background: rgba(16, 16, 19, 0.92);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}
.pp-head__inner {
	max-width: var(--pp-wrap-max); margin: 0 auto;
	padding: 1.6rem clamp(1.25rem, 4vw, 3rem);
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 2.5rem;
}
/* Home / gallery / portfolio open with a full-bleed hero: header floats
   transparent over the photograph until scrolled. */
body.pp-overlaid .pp-head:not(.pp-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
	-webkit-backdrop-filter: none; backdrop-filter: none;
	text-shadow: 0 1px 2px rgba(6, 6, 7, 0.65), 0 2px 18px rgba(6, 6, 7, 0.5);
}
body:not(.pp-overlaid) .pp-site-main { padding-top: var(--head-h); }
@media (prefers-reduced-motion: reduce) { .pp-head { transition: none; } }

.pp-brand { line-height: 1.3; }
.pp-brand a {
	font-size: 1.0625rem; font-weight: 600;
	letter-spacing: 0.32em; text-transform: uppercase;
	color: var(--ink); text-decoration: none;
}
.pp-brand .pp-label { display: block; margin-top: 0.15rem; letter-spacing: 0.26em; }

.pp-menu-btn {
	margin-left: auto; align-self: center;
	display: flex; align-items: center; gap: 0.7rem;
	font: inherit; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--ink); background: none; border: 0; padding: 0.4rem 0; cursor: pointer;
}
.pp-menu-btn:hover { color: var(--bright); }
.pp-burger { display: grid; gap: 5px; width: 26px; }
.pp-burger span { display: block; height: 1px; background: currentColor; }

/* ---------- full-page menu overlay ----------
   Three rows: the top (brand + close) and the footer are fixed height at the
   viewport's top and bottom; the nav fills the space between and scrolls
   inside itself if it's ever taller than the gap — so the footer is always
   pinned to the bottom of the screen, whatever the menu's length. */
.pp-menu {
	position: fixed; inset: 0; z-index: 90;
	background: var(--ground);
	display: flex; flex-direction: column; overflow: hidden;
	/* background fades in first; the nav items ripple in afterwards (below) */
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.pp-menu.pp-open {
	opacity: 1; visibility: visible; pointer-events: auto;
	transition: opacity 0.4s ease;
}
body.pp-menu-open { overflow: hidden; }
.pp-menu__top {
	flex: 0 0 auto;
	max-width: var(--pp-wrap-max); width: 100%; margin: 0 auto;
	padding: 1.6rem clamp(1.25rem, 4vw, 3rem);
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 2.5rem;
}
.pp-menu-close {
	margin-left: auto; align-self: center;
	font: inherit; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--ink); background: none; border: 0; padding: 0.4rem 0; cursor: pointer;
}
.pp-menu-close:hover { color: var(--bright); }
.pp-menu__nav {
	flex: 1 1 auto; overflow-y: auto;
	display: flex; flex-direction: column;
	max-width: var(--pp-wrap-max); width: 100%; margin: 0 auto;
	padding: clamp(0.35rem, 1.5vh, 1.5rem) clamp(1.25rem, 4vw, 3rem);
}
/* The nav itself is a core Navigation block; style its list + links big.
   margin-block:auto centres the list when there's room and falls back to
   top-aligned + scrollable when the menu is taller than the space. */
.pp-menu__nav .wp-block-navigation { display: block; width: 100%; margin-block: auto; }
.pp-menu__nav .wp-block-navigation__container {
	flex-direction: column; align-items: stretch; gap: 0;
	counter-reset: pp-nav;
}
/* full-width so a click anywhere on the item's line selects it (not just the word) */
.pp-menu__nav .wp-block-navigation-item__content { width: 100%; }
/* each item ripples in after the background has faded (staggered by --i, set
   in JS); the list scrolls only if the viewport is too short to fit them. */
.pp-menu__nav .wp-block-navigation-item {
	counter-increment: pp-nav;
	opacity: 0; transform: translateY(0.55em);
	transition: opacity 0.45s ease, transform 0.45s ease;
}
.pp-menu.pp-open .wp-block-navigation-item {
	opacity: 1; transform: none;
	transition-delay: calc(0.25s + var(--i, 0) * 0.05s);
}
.pp-menu__nav .wp-block-navigation-item__content {
	display: flex; align-items: baseline; gap: clamp(0.8rem, 2vw, 1.4rem);
	/* scale on the smaller of width and height so all items usually fit */
	font-size: clamp(1.5rem, min(10vw, 6.8vh), 3.9rem);
	font-weight: 300; line-height: 1.08; letter-spacing: -0.01em;
	color: var(--ink); padding: 0.08rem 0;
	transition: color 0.2s ease;
}
/* the design's numbered index — 01, 02, … from a CSS counter, no markup */
.pp-menu__nav .wp-block-navigation-item__content::before {
	content: counter(pp-nav, decimal-leading-zero);
	font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.18em; line-height: 1;
	color: var(--muted); min-width: 2rem;
	transform: translateY(-0.35em);
}
/* hover (and touch-drag via .pp-hover): brighten the item */
.pp-menu__nav .wp-block-navigation-item__content:hover,
.pp-menu__nav .wp-block-navigation-item__content.pp-hover { color: var(--bright); }
@media (prefers-reduced-motion: reduce) {
	.pp-menu, .pp-menu .wp-block-navigation-item { transition: none !important; }
	.pp-menu__nav .wp-block-navigation-item { opacity: 1; transform: none; }
}
.pp-foot { flex: 0 0 auto; }

/* ---------- social icons ---------- */
a.pp-icon { color: var(--muted); display: inline-flex; padding: 0.2rem; }
a.pp-icon:hover { color: var(--bright); }
a.pp-icon svg { width: 19px; height: 19px; }

/* ---------- section heads ---------- */
.pp-section-head {
	display: flex; align-items: baseline; gap: 1.5rem;
	border-top: 1px solid var(--line); padding-top: 0.9rem; margin-bottom: 2rem;
}
.pp-section-head :is(h2, h3) {
	font-size: 0.8125rem; font-weight: 600;
	letter-spacing: 0.22em; text-transform: uppercase; margin: 0;
}
.pp-section-head a {
	font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--muted); margin-left: auto; text-decoration: none;
}
.pp-section-head a:hover { color: var(--bright); }

/* ---------- plain page header (no featured image) ---------- */
.pp-page-head { padding-top: clamp(1.5rem, 4vw, 3rem); }
.pp-page-head .pp-label { display: block; margin-bottom: 0.5rem; }
.pp-page-head h1 { margin: 0; }

/* ---------- display headings ---------- */
.pp-display,
h1.pp-display {
	font-weight: 300;
	font-size: clamp(2rem, 5.5vw, 4rem);
	line-height: 1.05; letter-spacing: -0.015em;
	text-wrap: balance; max-width: 24ch;
}

/* ---------- photographs / captions (core image + gallery) ---------- */
figure.wp-block-image { margin: 0; }
figure.wp-block-image img { cursor: zoom-in; transition: opacity 0.25s ease; width: 100%; }
figure.wp-block-image img:hover { opacity: 0.88; }
figure.wp-block-image figcaption,
.wp-block-gallery .wp-block-image figcaption {
	font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--muted); padding-top: 0.55rem; text-align: left;
	background: none; position: static;
}

/* Core gallery = the photobook grid. Override the block's default flex
   layout with a real grid of uniform 3:2 plates (matches the mockups), and
   let the built-in lightbox flick-through handle full-size viewing. */
/* Galleries always span the full content width (the photobook look), even
   inside the narrow reading column — one theme rule, so any gallery Phil adds
   is wide automatically without setting per-block alignment. Prose stays at
   the reading measure. Descendant selector so it also catches galleries a page
   nests inside other blocks (e.g. the Fine Art page). */
.pp-site-main .wp-block-gallery {
	max-width: var(--wp--style--global--wide-size);
	margin-left: 0; margin-right: auto;
}
.wp-block-gallery.has-nested-images {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem) !important;
}
.wp-block-gallery.columns-1 { grid-template-columns: 1fr; }
.wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.wp-block-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wp-block-gallery.has-nested-images { grid-template-columns: 1fr; } }
.wp-block-gallery.has-nested-images .wp-block-image {
	width: auto !important; margin: 0 !important;
}
.wp-block-gallery.has-nested-images .wp-block-image img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
	background: var(--placeholder);
}
/* --- Gallery plate meta: the single source of truth for how every gallery
   plate looks and behaves. Each plate lays out as a grid — the photograph on
   top, then a caption strip BELOW it: title (the image caption) on the left,
   an automatic plate number on the right (a CSS counter, no markup). Works
   whether or not an image has a caption. Change the look here and it changes
   across the whole site. Core's default overlay caption is overridden. */
.wp-block-gallery.has-nested-images { counter-reset: pp-plate; }
.wp-block-gallery.has-nested-images .wp-block-image {
	counter-increment: pp-plate;
	display: grid !important;
	grid-template-columns: 1fr auto;
	column-gap: 1rem;
	align-content: start;
}
.wp-block-gallery.has-nested-images .wp-block-image > :is(a, img):first-child {
	grid-column: 1 / -1;
}
.wp-block-gallery.has-nested-images .wp-block-image figcaption {
	grid-column: 1; grid-row: 2; align-self: end;
	position: static !important; inset: auto !important;
	background: none !important; max-width: none !important;
	text-shadow: none !important;   /* core adds a blur shadow for overlay captions */
	margin: 0; padding: 0.55rem 0 0; text-align: left; line-height: 1;
	font-size: 0.6875rem !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted) !important;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-block-gallery.has-nested-images .wp-block-image::after {
	grid-column: 2; grid-row: 2; align-self: end;
	content: counter(pp-plate, decimal-leading-zero);
	padding-top: 0.55rem; text-align: right; white-space: nowrap; line-height: 1;
	text-shadow: none;
	color: var(--bright); font-weight: 600;
	font-size: 0.6875rem; letter-spacing: 0.14em;
}

/* Classic [gallery] shortcode output (imported content) — make it read the
   same as a modern gallery block: a real grid, quiet captions, no borders. */
.gallery {
	display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
	margin: 2rem 0;
	grid-template-columns: repeat(3, 1fr);
}
.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr !important; } }
.gallery-item {
	width: auto !important; margin: 0 !important; float: none !important; text-align: left;
}
.gallery-icon { margin: 0; }
.gallery-item img {
	width: 100%; height: auto; border: 0 !important;
	background: var(--surface); cursor: zoom-in; transition: opacity 0.25s ease;
}
.gallery-item img:hover { opacity: 0.88; }
.gallery-caption, .wp-caption-text {
	font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--muted); padding-top: 0.55rem; margin: 0;
}

/* ---------- the gallery (philportus/gallery block) ----------
   The ONE place the gallery grid + plate are styled. Every gallery on the site
   renders through this; edit here to change them all. */
.pp-site-main .pp-gallery {
	max-width: var(--wp--style--global--wide-size);
	margin-left: 0; margin-right: auto;
}
/* minmax(0, 1fr) — not plain 1fr — so a long caption or a wide image can never
   blow a column out wider than its equal share (grid tracks default to a
   min-content minimum, which broke mixed-orientation galleries). */
.pp-gallery {
	display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pp-gallery--cols-1 { grid-template-columns: minmax(0, 1fr); }
.pp-gallery--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-gallery--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-gallery--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pp-gallery--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { .pp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .pp-gallery { grid-template-columns: minmax(0, 1fr) !important; } }
.pp-plate { margin: 0; }
.pp-plate__link { display: block; background: var(--placeholder); }
.pp-plate img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
	background: var(--placeholder); cursor: zoom-in; transition: opacity 0.25s ease;
}
.pp-plate__link:hover img { opacity: 0.88; }
/* Fade each gallery image in as it loads (JS on) instead of a hard flash.
   No-JS keeps them visible. Respects reduced-motion. */
html.js .pp-plate img { opacity: 0; transition: opacity 0.5s ease; }
html.js .pp-plate img.pp-in { opacity: 1; }
html.js .pp-plate__link:hover img.pp-in { opacity: 0.88; }
@media (prefers-reduced-motion: reduce) {
	html.js .pp-plate img { opacity: 1; transition: none; }
}
/* caption strip below the plate: title left (when unique), plate number right.
   Real text on the pixel grid — no CSS-counter subpixel fuzz. */
.pp-plate__meta {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	padding-top: 0.55rem; line-height: 1;
	font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.pp-plate__cap { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-plate__end { display: flex; align-items: baseline; gap: 0.65rem; flex: none; }
.pp-plate__num { color: var(--bright); font-weight: 600; white-space: nowrap; flex: none; }
/* "alamy" wordmark badge — shown only on photos licensable on Alamy, sitting
   just left of the plate number. Lowercase (their brand), subtle until hover. */
.pp-plate__alamy {
	text-transform: lowercase; letter-spacing: 0.01em; font-weight: 700;
	color: var(--ink); text-decoration: none; line-height: 1;
	transition: color 0.2s ease;
}
.pp-plate__alamy:hover, .pp-plate__alamy:focus-visible { color: var(--bright); }

/* ---------- prose (journal, poems, gallery intros) ---------- */
.pp-prose, .pp-prose.wp-block-group {
	font-family: var(--serif); font-size: 1.0625rem; line-height: 1.75;
	max-width: var(--measure);
}
.pp-prose p { margin: 0 0 1.4em; }
.pp-prose--verse { font-style: italic; }
/* Geo Garden rock lists — spaced, readable numbered items */
.pp-rock-list li { margin: 0 0 0.85rem; line-height: 1.55; padding-left: 0.3rem; }
.pp-rock-list li::marker { color: var(--muted); }
.pp-rock-list strong { color: var(--bright); }
/* small illustration placed within a poem (e.g. Eek), left-aligned under the verse */
.pp-poem-image { max-width: 220px; margin-block-start: clamp(1.75rem, 4vw, 2.75rem); }

/* clickable sketch thumbnail linking to the Jazzy Sketches gallery (Fine Art) */
.pp-sketch-link { max-width: 420px; margin-block: clamp(1.5rem, 4vw, 2.5rem) 0; }
.pp-sketch-link img { transition: opacity 0.25s ease; }
.pp-sketch-link a:hover img { opacity: 0.85; }
.pp-sketch-link figcaption {
	font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--muted); padding-top: 0.55rem;
}
.pp-sketch-link figcaption a { color: var(--bright); text-decoration: none; }
.pp-sketch-link figcaption a:hover { text-decoration: underline; }

/* ---------- testimonials: consistent quote + attribution ---------- */
.pp-testimonial {
	margin: 0 0 2.75rem; max-width: 64ch;
	border-left: 2px solid var(--line); padding-left: clamp(1rem, 3vw, 1.75rem);
}
.pp-testimonial .pp-t-meta {
	font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--muted); margin: 0 0 0.85rem;
}
.pp-testimonial .pp-t-quote { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); margin: 0; }
.pp-testimonial .pp-t-by { font-size: 0.875rem; color: var(--muted); margin: 0.45rem 0 0; }
.pp-testimonial .pp-t-by + .pp-t-quote { margin-top: 1.5rem; }

/* intro pull-quote */
.pp-intro {
	font-family: var(--serif);
	font-size: clamp(1.15rem, 2.2vw, 1.45rem);
	line-height: 1.55; font-style: italic; color: var(--ink);
	max-width: 34em;
}
.pp-intro em { color: var(--bright); font-style: normal; font-weight: 600; }

/* ---------- journal / poem list ---------- */
.pp-post-list { border-top: 1px solid var(--line); }
.pp-post-list li { list-style: none; }
.pp-post-list .wp-block-post {
	display: grid; grid-template-columns: 11rem 1fr; gap: 2rem;
	border-bottom: 1px solid var(--line); padding: 1.6rem 0;
}
@media (max-width: 700px) {
	.pp-post-list .wp-block-post { grid-template-columns: 1fr; gap: 0.4rem; }
}
.pp-post-list .wp-block-post-date {
	font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--muted); padding-top: 0.45rem;
}
.pp-post-list .wp-block-post-title { font-weight: 400; font-size: 1.375rem; line-height: 1.3; margin: 0; }
.pp-post-list .wp-block-post-excerpt { color: var(--muted); font-size: 0.9375rem; max-width: var(--measure); margin-top: 0.35rem; }
.pp-post-list .wp-block-post-title a { text-decoration: none; }

/* ---------- pagination + prev/next post nav (gallery-number label style) ---------- */
.wp-block-query-pagination { gap: 0.5rem 1.6rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
.wp-block-query-pagination-numbers { display: flex; align-items: baseline; gap: 1rem; }
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination a,
.wp-block-post-navigation-link a {
	font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	text-decoration: none; color: var(--muted);
}
.wp-block-query-pagination a:hover,
.wp-block-post-navigation-link a:hover { color: var(--bright); }
.wp-block-query-pagination .page-numbers.current { color: var(--bright); }

/* ---------- portfolio archive grid ---------- */
.pp-gallery-grid.wp-block-post-template {
	display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .pp-gallery-grid.wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pp-gallery-grid.wp-block-post-template { grid-template-columns: 1fr; } }
/* grid items: kill the flow-layout block gap that adds a top margin to every
   item except the first (the grid `gap` already spaces them evenly) */
.pp-gallery-grid .wp-block-post { background: none; margin-block-start: 0 !important; }
.pp-gallery-grid .wp-block-post-featured-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
.pp-gallery-grid .wp-block-post-title {
	font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--muted); font-weight: 400; margin: 0.55rem 0 0;
}
.pp-gallery-grid .wp-block-post-title a { text-decoration: none; }

/* ---------- galleries archive: search + category filter (dynamic block) ---------- */
.pp-galleries { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.pp-galleries__filter {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem;
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.pp-gallery-search {
	font: inherit; color: var(--ink); background: var(--surface);
	/* At least 16px, or iOS Safari auto-zooms on focus and never zooms back. */
	font-size: max(16px, 1rem);
	border: 1px solid var(--line); border-radius: 0; padding: 0.6rem 0.85rem;
	flex: 1 1 15rem; min-width: 12rem; max-width: 24rem;
}
.pp-gallery-search:focus { outline: none; border-color: var(--bright); }
.pp-gallery-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pp-cat {
	font: inherit; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 999px;
	padding: 0.4rem 0.9rem; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.pp-cat:hover { color: var(--ink); }
.pp-cat.is-active { color: var(--ink); border-color: var(--bright); background: rgba(251, 250, 247, 0.06); }
.pp-galleries-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 900px) { .pp-galleries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pp-galleries-grid { grid-template-columns: 1fr; } }
.pp-gallery-item { margin: 0; }
.pp-gallery-item[hidden] { display: none; }
.pp-gallery-item__link { display: block; background: var(--placeholder); }
.pp-gallery-item img, .pp-gallery-item__ph {
	display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface);
}
.pp-gallery-item img { transition: opacity 0.25s ease; }
.pp-gallery-item__link:hover img { opacity: 0.88; }
.pp-gallery-item__title {
	font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--muted); font-weight: 400; margin: 0.55rem 0 0;
}
.pp-gallery-item__title a { text-decoration: none; }
.pp-galleries-empty { color: var(--muted); margin-top: 2rem; }

/* ---------- hero (dynamic block philportus/hero + pattern) ---------- */
.pp-hero {
	position: relative;
	min-height: 100svh;
	display: flex; flex-direction: column;
	margin-top: calc(-1 * var(--head-h));
	/* Clip horizontally so the arrows' oversized invisible hit areas
	   (::before at inset:-17px on mobile) can't spill past the hero edge
	   and trigger horizontal page scroll on iOS Safari. Vertical stays
	   visible so nothing in the overlay is cut off. */
	overflow-x: clip;
}
/* Full-bleed regardless of how deeply the block is nested — the hero now lives
   inside post-content, so WordPress' own alignfull only reaches the wide-size.
   Three classes (0,3,0) so it outranks WP's `.has-global-padding > .alignfull`
   (0,2,0), which otherwise resets the margin to the (zero) root padding. */
/* Editor-only: the .pp-hero-edit wrapper exists only in the block editor. Tame
   the server-rendered preview so its full-height, negative-margin layout can't
   cover the block's own controls (which sit above it). */
.pp-hero-edit .pp-hero {
	margin-top: 0 !important;
	min-height: 300px; max-height: 62vh; overflow: hidden;
	pointer-events: none;
}
.pp-hero-edit .pp-hero__arrow, .pp-hero-edit .pp-hero__dots { display: none; }

.pp-site-main .pp-hero.alignfull {
	width: 100vw; max-width: 100vw;
	/* !important overrides WordPress' generated alignfull margin reset, which
	   pins a nested alignfull to its (wide-size) container instead of the
	   viewport. This is the one place we need to beat core's layout CSS. */
	margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}
.pp-hero--page { min-height: min(72svh, 680px); margin-top: 0; }
body.pp-overlaid .pp-hero--page { margin-top: calc(-1 * var(--head-h)); }
.pp-hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--placeholder); }
.pp-hero__media img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 22%;
}

/* ---------- hero carousel (fade-to-white between images) ---------- */
.pp-hero--carousel .pp-hero__media img {
	opacity: 0; transition: opacity 0.35s ease;
}
.pp-hero--carousel .pp-hero__media img.pp-active { opacity: 1; }
/* white sheet the JS fades in/out to cross the images through white */
.pp-hero__white {
	position: absolute; inset: 0; z-index: 1; background: #fff;
	opacity: 0; pointer-events: none; transition: opacity 0.36s ease;
}
.pp-hero__white.pp-on { opacity: 1; }
/* ---------- shared large round nav arrow ----------
   One look for the home hero carousel AND the lightbox next/previous. */
.pp-arrow-btn {
	display: flex; align-items: center; justify-content: center;
	width: 66px; height: 66px; border-radius: 50%; padding: 0;
	color: var(--ink);
	background: rgba(6, 6, 7, 0.45);
	border: 1px solid rgba(251, 250, 247, 0.45);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pp-arrow-btn svg { width: 32px; height: 32px; display: block; }
.pp-arrow-btn:hover { background: rgba(6, 6, 7, 0.75); color: var(--bright); border-color: var(--bright); }
.pp-hero__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
}
.pp-hero__arrow--prev { left: clamp(1rem, 3vw, 2.5rem); }
.pp-hero__arrow--next { right: clamp(1rem, 3vw, 2.5rem); }
.pp-hero__dots {
	position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(1.25rem, 3vh, 2rem);
	display: flex; justify-content: center; gap: 0.15rem;
}
/* Each dot is a 24px tap target (accessibility) with a 9px visible dot inside. */
.pp-hero__dot {
	width: 24px; height: 24px; padding: 0; border: 0; background: transparent;
	cursor: pointer; display: grid; place-items: center;
	-webkit-appearance: none; appearance: none;
}
.pp-hero__dot::before {
	content: ""; width: 9px; height: 9px; border-radius: 50%;
	background: rgba(251,250,247,0.35); border: 1px solid rgba(251,250,247,0.5);
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.pp-hero__dot:hover::before { background: rgba(251,250,247,0.7); }
.pp-hero__dot.pp-on::before { background: var(--bright); border-color: var(--bright); transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) {
	.pp-hero--carousel .pp-hero__media img, .pp-hero__white { transition: none; }
}
.pp-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		rgba(16,16,19,0.55) 0%, rgba(16,16,19,0.10) 30%,
		rgba(16,16,19,0.12) 55%, rgba(16,16,19,0.86) 100%);
}
.pp-hero__overlay {
	position: relative; z-index: 2; margin-top: auto;
	display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
	text-align: center;
	padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(3rem, 9vh, 6rem);
	text-shadow: 0 1px 2px rgba(6,6,7,0.65), 0 4px 28px rgba(6,6,7,0.55);
}
.pp-hero--page .pp-hero__overlay { padding-bottom: clamp(2.5rem, 7vh, 4.5rem); }
.pp-hero__overlay .pp-label { color: var(--ink); }
.pp-hero__overlay h1 {
	font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 300;
	line-height: 1.05; letter-spacing: 0.02em; text-wrap: balance; margin: 0;
}
.pp-hero__overlay p { max-width: 38ch; font-size: 0.9375rem; color: var(--ink); margin: 0; }
.pp-cta {
	font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
	background: var(--bright); color: #101013; text-decoration: none;
	padding: 0.9rem 2.4rem; margin-top: 0.6rem; display: inline-block;
	text-shadow: none; box-shadow: 0 4px 24px rgba(6,6,7,0.45);
}
.pp-cta:hover { background: #fff; color: #101013; }

/* ---------- about: credentials line, accordions + hub rows ---------- */
.pp-creds {
	margin-top: 0.9rem; color: var(--ink);
	font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
}
details.wp-block-details {
	/* stack flush so the borders read as one continuous list — override the
	   24px WordPress block-gap that would otherwise wedge them apart. */
	border-top: 1px solid var(--line); padding: 0; margin-block-start: 0;
}
/* +/− disclosure marker, matching the design */
details.wp-block-details summary {
	list-style: none; display: flex; justify-content: space-between; align-items: center;
}
details.wp-block-details summary::-webkit-details-marker { display: none; }
details.wp-block-details summary::after {
	content: "+"; font-size: 1.25rem; font-weight: 300; color: var(--muted);
}
details.wp-block-details[open] summary::after { content: "−"; }
/* space the first accordion off the bio above it (the rest stay flush) */
.pp-two-col details.wp-block-details:first-of-type { margin-block-start: clamp(1.75rem, 4vw, 2.75rem); }
details.wp-block-details:last-of-type { border-bottom: 1px solid var(--line); }
details.wp-block-details summary {
	cursor: pointer; padding: 1.1rem 0;
	font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
}
details.wp-block-details summary:hover { color: var(--bright); }

.pp-award-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pp-award-list li {
	border-bottom: 1px solid var(--line); padding: 0.7rem 0;
	display: flex; gap: 1.5rem; font-size: 0.9375rem;
}
/* the year/label sits in its own column — in the editor Phil just makes it
   bold (a plain core List block; <strong> or a .pp-label span both work). */
.pp-award-list li strong, .pp-award-list .pp-label {
	flex: none; min-width: 4.5rem; padding-top: 0.2rem; font-weight: 600;
	font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}

.pp-hub-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.pp-hub-list li { border-bottom: 1px solid var(--line); }
.pp-hub-list a { display: flex; align-items: baseline; gap: 1.5rem; padding: 1.25rem 0; text-decoration: none; }
.pp-hub-list h3 { font-weight: 400; font-size: 1.125rem; line-height: 1.3; min-width: 13rem; margin: 0; }
.pp-hub-list p { color: var(--muted); font-size: 0.875rem; flex: 1; margin: 0; }
.pp-hub-list .pp-arrow { color: var(--muted); }
.pp-hub-list a:hover h3, .pp-hub-list a:hover .pp-arrow { color: var(--bright); }
@media (max-width: 700px) {
	.pp-hub-list a { flex-wrap: wrap; gap: 0.3rem 1rem; }
	.pp-hub-list p { flex-basis: 100%; }
}

/* Editable "More about" hub — each row is a core Group (linked heading +
   description). A stretched link keeps the whole row clickable, so Phil edits
   it as ordinary blocks while it still looks and behaves like the design. */
.pp-two-col .pp-hub-heading {
	font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
	border-top: 1px solid var(--line); padding-top: 0.9rem;
	margin: clamp(1.75rem, 4vw, 2.75rem) 0 1.5rem;
}
.pp-hub-rows { border-top: 1px solid var(--line); }
.pp-hub-rows .pp-hub-row {
	position: relative; margin-block-start: 0;
	border-bottom: 1px solid var(--line);
	display: flex; align-items: baseline; gap: 1.5rem; padding: 1.25rem 0;
}
.pp-hub-row > * { margin-block-start: 0; }
.pp-hub-row .wp-block-heading {
	font-weight: 400; font-size: 1.125rem; line-height: 1.3; min-width: 13rem; margin: 0; flex: none;
}
.pp-hub-row .wp-block-heading a { color: var(--ink); text-decoration: none; }
.pp-hub-row p { color: var(--muted); font-size: 0.875rem; flex: 1; margin: 0; }
.pp-hub-row::after { content: "→"; color: var(--muted); flex: none; }
.pp-hub-row .wp-block-heading a::after { content: ""; position: absolute; inset: 0; }
.pp-hub-row:hover .wp-block-heading a, .pp-hub-row:hover::after { color: var(--bright); }
@media (max-width: 700px) {
	.pp-hub-rows .pp-hub-row { flex-wrap: wrap; gap: 0.3rem 1rem; }
	.pp-hub-row p { flex-basis: 100%; }
}

/* ---------- two-column (about / contact) ---------- */
.pp-two-col.wp-block-columns { gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

/* ---------- callout ---------- */
.pp-callout {
	border-left: 2px solid var(--bright);
	background: rgba(251, 250, 247, 0.04);
	padding: 1.2rem 1.5rem; max-width: 56ch;
}
.pp-callout p { margin: 0; }

/* ---------- contact form (Contact Form 7) ---------- */
.wpcf7 form.contact, .wpcf7 .pp-form { display: grid; gap: 1.1rem; max-width: 30rem; }
.wpcf7 input:not([type=submit]), .wpcf7 textarea {
	font: inherit; color: var(--ink); width: 100%;
	background: var(--surface); border: 1px solid var(--line); border-radius: 0;
	padding: 0.65rem 0.8rem;
}
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--bright); }
.wpcf7 input[type=submit] {
	font: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
	background: var(--bright); color: #101013; border: 0; padding: 0.85rem 2.2rem; cursor: pointer;
	justify-self: start;
}
.wpcf7 input[type=submit]:hover { background: #fff; }
.wpcf7 .pp-form label { display: grid; gap: 0.4rem; margin: 0; }
.pp-form-note { color: var(--muted); font-size: 0.8125rem; margin: 0; }
/* validation + response messages, themed for the dark background */
.wpcf7 input.wpcf7-not-valid, .wpcf7 textarea.wpcf7-not-valid { border-color: #e0605e; }
.wpcf7-not-valid-tip { color: #e0605e; font-size: 0.8125rem; margin-top: 0.3rem; }
.wpcf7-response-output {
	border: 1px solid var(--line); padding: 0.8rem 1rem; margin: 1.2rem 0 0;
	font-size: 0.875rem; color: var(--ink); border-radius: 0;
}
.wpcf7-mail-sent-ok { border-color: var(--bright); }
.wpcf7-validation-errors, .wpcf7-mail-sent-ng { border-color: #e0605e; }

/* contact details list: labelled rows with tel:/mailto: links */
.pp-award-list a { color: var(--bright); font-weight: 600; text-decoration: none; }
.pp-award-list a:hover { text-decoration: underline; }

/* ---------- video grid (dynamic block) ---------- */
.pp-video-grid {
	display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .pp-video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pp-video-grid { grid-template-columns: 1fr; } }
.pp-video { margin: 0; }
.pp-video-poster {
	position: relative; display: block; width: 100%; padding: 0; border: 0;
	background: var(--surface); cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden;
}
.pp-video-poster img { width: 100%; height: 100%; object-fit: cover; }
.pp-play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 58px; height: 58px; border-radius: 50%;
	background: rgba(16,16,19,0.65); border: 1px solid rgba(251,250,247,0.55);
}
.pp-play::after {
	content: ""; position: absolute; top: 50%; left: calc(50% + 2px); transform: translate(-50%, -50%);
	border-style: solid; border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--bright);
}
.pp-video-poster:hover .pp-play { background: rgba(16,16,19,0.85); }
/* meta strip below the card: title left, length right — mirrors .pp-plate__meta
   (the gallery's caption + plate number). */
.pp-video__meta {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	padding-top: 0.55rem; line-height: 1.35;
	font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.pp-video__cap { color: var(--muted); }
.pp-video__num { color: var(--bright); font-weight: 600; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.pp-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* Salford interview: two parts side by side (stacks on narrow screens). */
.pp-interview-pair {
	display: grid; gap: clamp(1rem, 3vw, 2rem);
	grid-template-columns: 1fr 1fr; margin-top: 1.25rem;
}
@media (max-width: 760px) { .pp-interview-pair { grid-template-columns: 1fr; } }
.pp-interview-pair figure { margin: 0; }
.pp-interview-pair figcaption {
	font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--muted); padding-top: 0.55rem;
}
.pp-video figcaption {
	font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--muted); padding-top: 0.55rem;
}

/* ---------- footer ---------- */
.pp-foot { border-top: 1px solid var(--line); margin-top: clamp(3rem, 7vw, 6rem); }
.pp-foot__inner {
	max-width: var(--pp-wrap-max); margin: 0 auto;
	padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 2.25rem;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
	gap: 0.6rem 1.5rem;
	font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted);
}
.pp-foot__inner a { color: var(--muted); text-decoration: none; }
.pp-foot__inner a:hover { color: var(--bright); }
/* The links (Contact + socials) stay a single right-aligned block that never
   breaks apart. The copyright fills the remaining space and its text wraps;
   when too narrow it drops to its own line (left) with the links still right. */
.pp-foot .pp-copy { flex: 1 1 14rem; min-width: 0; }
.pp-foot__links { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; }
.pp-menu .pp-foot { margin-top: 0; }

/* ---------- lightbox flick-through (augments WP core lightbox) ---------- */
.pp-lightbox {
	position: fixed; inset: 0; z-index: 100; display: none;
	flex-direction: column; align-items: center; justify-content: center;
	background: rgba(6,6,7,0.96); padding: 3rem 1.5rem;
}
.pp-lightbox.pp-open { display: flex; }
.pp-lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
/* the stage wraps the photo so the white sheet covers only the photo */
.pp-lb-stage { position: relative; display: inline-block; line-height: 0; }
.pp-lightbox img {
	display: block; max-width: 94vw; max-height: 82vh;   /* JS sets exact width/height */
	object-fit: contain;   /* never squash while the box resizes between photos */
	background: var(--placeholder);
}
.pp-lightbox figcaption {
	color: var(--muted); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
	margin-top: 0.8rem; text-align: center;
}
/* "License on Alamy" button in the lightbox — shown only for licensable photos */
.pp-lb-alamy {
	display: inline-block; margin-top: 0.75rem;
	font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
	color: var(--ground); background: var(--bright); text-decoration: none;
	padding: 0.55rem 0.95rem; transition: opacity 0.2s ease;
}
.pp-lb-alamy:hover, .pp-lb-alamy:focus-visible { opacity: 0.82; }
.pp-lb-alamy[hidden] { display: none; }
/* white sheet the lightbox flashes through — sits over the PHOTO only */
.pp-lb-white {
	position: absolute; inset: 0; z-index: 2; background: #fff;
	opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.pp-lb-white.pp-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pp-lb-white { transition: none; } }
/* video mode: swap the photo stage for a 16:9 YouTube player */
.pp-lb-player { display: none; }
.pp-lightbox.pp-lb-video .pp-lb-stage { display: none; }
.pp-lightbox.pp-lb-video .pp-lb-player {
	display: block; width: min(1100px, 94vw); max-width: 100%;
	aspect-ratio: 16 / 9; max-height: 82vh; background: #000;
}
.pp-lb-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.pp-lb-btn {
	position: absolute; z-index: 6; font: inherit; color: var(--muted);
	background: none; border: 1px solid var(--line); padding: 0.5rem 1rem; cursor: pointer;
	font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.pp-lb-btn:hover { color: var(--ink); border-color: var(--ink); }
.pp-lb-close { top: 1rem; right: 1.25rem; }
/* lightbox arrows sit ABOVE the photo + white sheet */
.pp-lb-arrow { position: absolute; z-index: 6; top: 50%; transform: translateY(-50%); }
.pp-lb-prev { left: clamp(1rem, 3vw, 2.5rem); }
.pp-lb-next { right: clamp(1rem, 3vw, 2.5rem); }
/* keep the page behind the lightbox from scrolling while it's open */
body.pp-lb-open { overflow: hidden; }
/* mobile: smaller arrow buttons (lightbox + home hero), but keep a big
   invisible tap area around them */
@media (max-width: 700px) {
	.pp-lb-arrow, .pp-hero__arrow { width: 40px; height: 40px; }
	.pp-lb-arrow svg, .pp-hero__arrow svg { width: 20px; height: 20px; }
	.pp-lb-arrow::before, .pp-hero__arrow::before { content: ""; position: absolute; inset: -17px; } /* ~74px hit target */
	.pp-lb-prev, .pp-hero__arrow--prev { left: 0.5rem; }
	.pp-lb-next, .pp-hero__arrow--next { right: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	figure.wp-block-image img { transition: none; }
}

/* Book cards (Salford books section): white, bold titles */
.wp-block-media-text__content h3 {
	color: var(--bright); font-weight: 700;
}

/* Book "Buy" links (Salford books section) — the mockup's uppercase label */
.pp-buy {
	display: inline-block; text-decoration: none;
	font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	border-bottom: 1px solid var(--bright); padding-bottom: 2px;
}
.pp-buy:hover { color: var(--bright); }

/* Salford book covers: modest fixed width in the stacked book listing */
.pp-book-cover { max-width: 220px; margin-top: 1.5rem; }
.pp-book-cover + h3, .wp-block-heading + .pp-buy { margin-top: 0.4rem; }
/* two books side by side on desktop/tablet; stack only on phones */
.pp-books { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: start; margin-top: 1.5rem; }
.pp-books > * { margin-block-start: 0; }
@media (max-width: 600px) { .pp-books { grid-template-columns: 1fr; } }
.pp-book .pp-book-cover { max-width: 280px; margin-top: 0; }

/* Shop books: cover-left / text-right cards (the mockup's Shop layout).
   A card with no cover yet spans both columns. */
.pp-shop-books .pp-book {
	display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
	gap: 1.5rem; align-items: start;
}
.pp-shop-books .pp-book > * { margin-block-start: 0; }
.pp-shop-books .pp-book > :only-child { grid-column: 1 / -1; }
.pp-shop-books .pp-book-cover { max-width: none; }
/* Videos: playlist cards (the /videos/ index) — gallery-card treatment */
.pp-playlist-card { display: block; text-decoration: none; }
.pp-playlist-card__frame { display: block; background: var(--wp--preset--color--surface, #17171b); }
.pp-playlist-card__frame img { display: block; width: 100%; height: auto; transition: opacity 0.25s ease; }
.pp-playlist-card:hover .pp-playlist-card__frame img { opacity: 0.88; }
.pp-playlist-card .pp-video__meta { display: flex; }
.pp-videos-head { margin-bottom: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .pp-playlist-card__frame img { transition: none; } }

.pp-shop-books .pp-book h3 { font-weight: 400; font-size: 1.25rem; line-height: 1.3; }
.pp-shop-books .pp-book p { max-width: 32ch; }
/* the philportus/book card's text column */
.pp-book-text h3 { margin: 0; }
.pp-book-text p { margin: 0.6rem 0 0; }
.pp-book-blurb { color: var(--wp--preset--color--muted); }
@media (max-width: 600px) { .pp-shop-books .pp-book { grid-template-columns: 1fr; } }