/*
Theme Name: Pasta & Panda Cinematic
Theme URI: https://pastaandpanda.com/
Author: Pasta & Panda
Author URI: https://pastaandpanda.com/
Description: Cinematic full-site-editing block theme for the Pasta & Panda slow-travel vlogumentary channel. Teal-and-amber design language, HUD hero with "NOW FILMING" badge, timecode navigation, films archive, media kit, and guides.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pasta-panda-cinematic
Tags: full-site-editing, block-theme, travel, blog, portfolio, custom-colors, wide-blocks
*/

/*
 * Design-token aliases. Maps DESIGN_TOKENS.md names onto WP preset variables
 * generated from theme.json. Use --pp-* throughout custom CSS so a single
 * token update in theme.json propagates everywhere automatically.
 *
 * NOTE: --pp-rec and --pp-rec-text are FIXED tally-light reds.
 * They must NEVER be remapped by any per-continent accent system.
 */
:root {
	--pp-ink:      var(--wp--preset--color--ink);
	--pp-cream:    var(--wp--preset--color--cream);
	--pp-amber:    var(--wp--preset--color--amber);
	--pp-teal:     var(--wp--preset--color--teal);
	--pp-cream-70: rgba(239, 234, 224, 0.70);
	--pp-rule:     rgba(239, 234, 224, 0.18);

	/* Accent alias — used by headline line 2; easier to retheme than --pp-amber */
	--pp-accent:   var(--pp-amber);

	/* REC / tally-light tokens — camera recording red, immutable, accent-system exempt */
	--pp-rec:      #E5484D;
	--pp-rec-text: #F0736C;

	--pp-font-serif: var(--wp--preset--font-family--serif-editorial);
	--pp-font-sans:  var(--wp--preset--font-family--clean-sans);
	--pp-font-mono:  var(--wp--preset--font-family--mono-hud);

	/* Content inset: ~9% from left (DESIGN_TOKENS layout spec) */
	--pp-inset-left:  clamp(1.5rem, 9vw, 8rem);
	--pp-inset-right: clamp(1.5rem, 4vw, 4rem);

	/* Hero height budget: subtract sticky header + optional future letterbox bars.
	   --pp-header-height is updated at runtime by JS from .pp-header.offsetHeight. */
	--pp-header-height: 64px;
	--pp-letterbox:     0px;
}

/* ── Reset / base ────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background-color: var(--pp-ink);
	color: var(--pp-cream);
	font-family: var(--pp-font-sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.wp-site-blocks {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.wp-site-blocks > * {
    margin-block-start: 0 !important;
}

/* ── Global typography ───────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--pp-font-serif);
	color: var(--pp-cream);
	line-height: 1.1;
}

a {
	color: var(--pp-cream);
	text-decoration: none;
}

a:hover {
	color: var(--pp-accent);
}

/* ── WordPress Button Normalization ──────────────────────────────────────── */
.wp-block-button__link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	padding: 0.75rem 1.5rem !important;
	background: var(--pp-amber) !important;
	color: var(--pp-ink) !important;
	font-family: var(--pp-font-mono) !important;
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	border: none !important;
	border-radius: 0 !important;
	line-height: 1 !important;
	transition: background 0.2s ease, color 0.2s ease !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

.wp-block-button__link:hover {
	background: var(--pp-cream) !important;
	color: var(--pp-ink) !important;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.pp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--pp-ink);
	border-bottom: 1px solid var(--pp-rule);
	padding: 0.75rem var(--pp-inset-right) 0.75rem var(--pp-inset-left);
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.pp-wordmark {
	font-family: var(--pp-font-serif);
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 400;
	letter-spacing: -0.015em;
	color: var(--pp-cream);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	margin: 0 !important;
	padding: 0 !important;
}

/* wp:site-title renders a p.wp-block-site-title — reset all default styles */
.pp-wordmark.wp-block-site-title,
p.pp-wordmark {
	background: transparent;
	font-family: var(--pp-font-serif);
	font-size: clamp(1.125rem, 2vw, 1.375rem) !important;
	font-weight: 400;
	color: var(--pp-cream);
}

/* The link inside site-title or paragraph wordmark */
.pp-wordmark a,
.pp-wordmark .wp-block-site-title__link {
	color: var(--pp-cream);
	text-decoration: none;
}

.pp-wordmark .pp-amp {
	font-style: italic;
	color: var(--pp-amber);
}

/* Footer wordmark via wp:site-title */
.pp-footer__wordmark.wp-block-site-title,
p.pp-footer__wordmark {
	font-family: var(--pp-font-serif);
	font-size: 1.25rem !important;
	font-weight: 400;
	color: var(--pp-cream);
	background: transparent;
	margin-bottom: 1rem !important;
}

.pp-footer__wordmark a,
.pp-footer__wordmark .wp-block-site-title__link {
	color: var(--pp-cream);
	text-decoration: none;
}

.pp-footer__wordmark .pp-amp {
	font-style: italic;
	color: var(--pp-amber);
}

/* Footer navigation via wp:navigation (vertical, no overlay) */
.pp-footer__nav-list.wp-block-navigation {
	display: flex !important;
	flex-direction: column;
	gap: 0.625rem;
}

.pp-footer__nav-list .wp-block-navigation-item__content {
	font-size: 0.9375rem;
	color: var(--pp-cream-70);
	text-decoration: none;
	padding: 0;
	transition: color 0.2s ease;
}

.pp-footer__nav-list .wp-block-navigation-item__content:hover {
	color: var(--pp-cream);
}

/* Social links block */
.pp-social-links.wp-block-social-links {
	display: flex !important;
	gap: 1rem;
	list-style: none !important;
	padding: 0 !important;
	margin: 0.75rem 0 0 !important;
}

.pp-social-links .wp-block-social-link a {
	color: var(--pp-cream-70);
	transition: color 0.2s ease;
}

.pp-social-links .wp-block-social-link a:hover {
	color: var(--pp-cream);
}

.pp-timecode-nav {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp-timecode-nav a,
.tc-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--pp-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pp-cream);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.pp-timecode-nav a:hover,
.tc-link:hover {
	opacity: 0.8;
	color: var(--pp-cream);
}

.tc-time {
	color: var(--pp-teal);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.pp-header-cta {
	flex-shrink: 0;
}

.pp-header-cta a,
.pp-cta-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	background: var(--pp-amber);
	color: var(--pp-ink) !important;
	font-family: var(--pp-font-mono) !important;
	font-size: 0.8125rem !important;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0 1rem !important;
	text-decoration: none !important;
	border: none;
	border-radius: 0 !important;
	cursor: pointer;
	line-height: 1 !important;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

.pp-header-cta a:hover,
.pp-cta-btn:hover {
	background: var(--pp-cream);
	color: var(--pp-ink) !important;
}

.pp-header .wp-block-navigation {
	gap: 0;
}

/* ── Primary navigation ──────────────────────────────────────────────────── */
/*
 * Pasta & Panda navigation
 *
 * Desktop:
 *   Wordmark | Guides | Films | About | Work With Us
 *
 * Mobile:
 *   Wordmark | hamburger
 *   Full-screen navigation overlay
 *
 * IMPORTANT:
 * Do not use global `li.wp-block-navigation-link` rules here.
 * WordPress reuses those elements inside the mobile overlay.
 */

.pp-site-nav {
	font-family: var(--pp-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ── Desktop navigation ──────────────────────────────────────────────────── */

.pp-site-nav .wp-block-navigation__container {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Navigation items — scoped so mobile overlay isn't affected */
.pp-site-nav .wp-block-navigation__container > .wp-block-navigation-item {
	margin: 0 1rem;
	padding: 0;
}

/* Links */
.pp-site-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	color: var(--pp-cream);
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.pp-site-nav .wp-block-navigation-item__content:hover {
	color: var(--pp-cream);
	opacity: 0.75;
}

/* ── Timecode prefixes ───────────────────────────────────────────────────── */

.pp-site-nav .pp-nav-guides .wp-block-navigation-item__content::before,
.pp-site-nav .pp-nav-films .wp-block-navigation-item__content::before,
.pp-site-nav .pp-nav-about .wp-block-navigation-item__content::before {
	color: var(--pp-teal);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	margin-right: 0.5em;
}

.pp-site-nav .pp-nav-guides .wp-block-navigation-item__content::before {
	content: "00:00";
}

.pp-site-nav .pp-nav-films .wp-block-navigation-item__content::before {
	content: "04:12";
}

.pp-site-nav .pp-nav-about .wp-block-navigation-item__content::before {
	content: "11:30";
}

/* ── Responsive controls ────────────────────────────────────────────────── */

.pp-site-nav .wp-block-navigation__responsive-container-open,
.pp-site-nav .wp-block-navigation__responsive-container-close {
	color: var(--pp-cream);
	background: transparent;
	border: 0;
}

/* Desktop: hamburger hidden */
@media (min-width: 901px) {

	.pp-site-nav .wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	.pp-site-nav .wp-block-navigation__responsive-container {
		display: block !important;
		position: static;
		width: auto;
		height: auto;
		background: transparent;
	}

	.pp-site-nav .wp-block-navigation__responsive-container-content {
		display: block;
	}

	.pp-site-nav .wp-block-navigation__responsive-container-close {
		display: none;
	}
}


/* ── Mobile navigation ──────────────────────────────────────────────────── */

@media (max-width: 900px) {

	/* Header */
	.pp-header {
		min-height: 64px;
		padding: 0.75rem 1.25rem;
		gap: 1rem;
	}

	/* Wordmark gets the available space */
	.pp-wordmark {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Nav sits on the right */
	.pp-site-nav {
		flex: 0 0 auto;
		margin-left: auto;
	}

	/* Hide desktop navigation container until opened */
	.pp-site-nav
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/*
	 * Hamburger button.
	 * Explicitly override WordPress/core styles because this theme
	 * uses a custom 900px breakpoint.
	 */
	.pp-site-nav
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		color: var(--pp-cream);
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	.pp-site-nav
	.wp-block-navigation__responsive-container-open svg {
		width: 24px;
		height: 24px;
		fill: currentColor;
	}

	/*
	 * FULL-SCREEN MOBILE OVERLAY
	 *
	 * Fixed rather than absolute so it is genuinely viewport-wide,
	 * regardless of the sticky header or WordPress block wrappers.
	 */
	.pp-site-nav
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		height: 100dvh !important;
		min-height: 100dvh;
		margin: 0 !important;
		padding: 0 !important;
		background: var(--pp-ink) !important;
		z-index: 9999 !important;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/*
	 * Overlay inner wrapper
	 */
	.pp-site-nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-close {
		width: 100%;
		min-height: 100%;
		padding: 1rem 1.25rem 2rem;
	}

	/*
	 * Close button aligned with the header/hamburger position.
	 */
	.pp-site-nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0.75rem;
		right: 1.25rem;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		color: var(--pp-cream);
		background: transparent;
		border: 0;
		cursor: pointer;
		z-index: 2;
	}

	.pp-site-nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close svg {
		width: 24px;
		height: 24px;
		fill: currentColor;
	}

	/*
	 * Mobile menu content.
	 *
	 * Push the links down enough to clear the close button.
	 */
	.pp-site-nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
		display: flex !important;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		min-height: calc(100dvh - 64px);
		padding: 6rem 0 3rem;
	}

	/*
	 * Mobile links become large editorial navigation.
	 */
	.pp-site-nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/*
	 * Reset the desktop 1rem margins.
	 */
	.pp-site-nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container
	> .wp-block-navigation-item {
		width: 100%;
		margin: 0 !important;
		padding: 0;
		border-bottom: 1px solid var(--pp-rule);
	}

	/*
	 * Big editorial links
	 */
	.pp-site-nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 1.25rem 0;
		font-family: var(--pp-font-serif) !important;
		font-size: clamp(2.5rem, 11vw, 5rem) !important;
		font-weight: 400;
		line-height: 0.95;
		letter-spacing: -0.025em;
		text-transform: none;
		color: var(--pp-cream);
	}

	.pp-site-nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover {
		color: var(--pp-accent);
		opacity: 1;
	}

	/*
	 * No timecodes inside mobile menu.
	 */
	.pp-site-nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content::before {
		content: none !important;
	}

	/*
	 * Make sure nested WP navigation elements don't introduce
	 * unwanted spacing.
	 */
	.pp-site-nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
		display: block;
	}

}


/* ── Small phones ────────────────────────────────────────────────────────── */

@media (max-width: 700px) {

	.pp-header-cta {
		display: none !important;
	}

	.pp-header {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.pp-site-nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
		right: 1rem;
	}

	.pp-site-nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
		padding-left: 0;
		padding-right: 0;
	}

}


/* ── Prevent page scrolling while mobile menu is open ───────────────────── */

/*
 * WordPress adds `.has-modal-open` to the navigation container.
 * This keeps the underlying page from scrolling when the full-screen
 * navigation is active.
 */
@media (max-width: 900px) {

	body:has(
		.pp-site-nav
		.wp-block-navigation__responsive-container.is-menu-open
	) {
		overflow: hidden;
	}

}

/* ── Hero ────────────────────────────────────────────────────────────────── */
/*
 * Layout: the hero's INNER layer is a CSS grid with two rows.
 *   Row 1 (1fr): content (badge + headline + body) — vertically centred.
 *   Row 2 (auto): scrubber bar — pinned to bottom.
 * Height: calc(100svh – sticky header – optional letterbox).
 * 100svh = smallest viewport height, safe on mobile browser chrome.
 */
.pp-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--pp-ink);
	margin: 0;
	padding: 0;
}

/* Background image: absolutely fills the hero */
.pp-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0 !important;
}

.pp-hero__bg img,
.pp-hero__bg figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.pp-hero__bg img,
.pp-hero__bg figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Gradient scrim: darkens bottom-left for text legibility */
.pp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top right,
		rgba(19, 42, 32, 0.92) 0%,
		rgba(19, 42, 32, 0.72) 35%,
		rgba(19, 42, 32, 0.20) 65%,
		rgba(19, 42, 32, 0.08) 100%
	);
	pointer-events: none;
}

/* Inner content layer: GRID layout, above scrim */
.pp-hero__inner {
	position: relative;
	z-index: 2;
	min-height: calc(100svh - var(--pp-header-height) - var(--pp-letterbox));
	display: grid;
	grid-template-rows: 1fr auto;
}

/* Row 1 — content block, vertically centred */
.pp-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem var(--pp-inset-right) 2rem var(--pp-inset-left);
}

/* NOW FILMING badge */
.pp-badge {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 1.75rem;
}

/*
 * Pulse dot: rendered as .pp-badge::before so the pattern needs no extra
 * markup (avoids a core/html block). Uses --pp-rec (#E5484D), the camera
 * tally-light red. NEVER use --pp-amber here — these tokens are immutable
 * and accent-system exempt.
 */
.pp-badge::before {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pp-rec);
	display: inline-block;
	/* Fallback for browsers without color-mix */
	box-shadow: 0 0 12px rgba(229, 72, 77, 0.45);
	/* Modern browsers with color-mix */
	box-shadow: 0 0 12px color-mix(in oklch, var(--pp-rec) 60%, transparent);
}

/* Legacy .pp-pulse-dot element kept as an alias if present */
.pp-pulse-dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pp-rec);
	display: inline-block;
	box-shadow: 0 0 12px rgba(229, 72, 77, 0.45);
	box-shadow: 0 0 12px color-mix(in oklch, var(--pp-rec) 60%, transparent);
}

.pp-badge-text,
.pp-badge p {
	font-family: var(--pp-font-mono) !important;
	font-size: 0.8125rem !important;
	line-height: 1 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pp-rec-text) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* ── Hero headline (3-line editorial, each line a display:block paragraph) ── */
/*
 * Structure: .pp-hero__headline (group, blockGap:0)
 *   .pp-hl-1  ROMAN, cream   "Travel like you're"
 *   .pp-hl-2  ITALIC, amber  "chasing the story,"
 *   .pp-hl-3  ROMAN, cream   "not the itinerary."
 * Max-width is set here; font metrics are on .pp-hl.
 */
.pp-hero__headline {
	max-width: min(56vw, 60rem);
	margin: 0 0 1.75rem !important;
	padding: 0 !important;
}

/* Individual line */
.pp-hl {
	font-family: var(--pp-font-serif) !important;
	font-size: clamp(2rem, 5.2vw, 6rem) !important;
	font-weight: 700 !important;
	line-height: 0.92 !important;
	letter-spacing: -0.02em !important;
	display: block;
	margin: 0 !important;
	padding: 0 !important;
}

/* Lines 1 & 3 — roman weight, cream */
.pp-hl-1,
.pp-hl-3 {
	font-style: normal !important;
	color: var(--pp-cream) !important;
}

/* Line 2 — italic, accent amber */
.pp-hl-2 {
	font-style: italic !important;
	color: var(--pp-accent) !important;
}

@media (max-width: 900px) {
	.pp-hero__headline {
		max-width: 88vw;
	}
}

/* Hero body copy */
.pp-hero__body,
.pp-hero__body p {
	font-family: var(--pp-font-sans) !important;
	font-size: 1.0625rem !important;
	line-height: 1.65 !important;
	color: var(--pp-cream-70) !important;
	max-width: 44ch;
	margin: 0 0 2.5rem !important;
}

/* ── Row 2 — Scrubber bar (pinned to bottom) ─────────────────────────────── */
.pp-hero__bar-wrap {
	padding: 0 var(--pp-inset-right) 2.5rem var(--pp-inset-left);
}

.pp-hero__bar {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	border-top: 1px solid var(--pp-rule);
	padding-top: 1.125rem;
}

.pp-ep-label {
	font-family: var(--pp-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	color: var(--pp-cream);
	white-space: nowrap;
	flex-shrink: 0;
}

.pp-scrubber {
	flex: 1;
	position: relative;
	height: 2px;
	cursor: pointer;
	align-self: center;
}

.pp-scrubber__track {
	position: absolute;
	inset: 0;
	background: var(--pp-rule);
}

.pp-scrubber__fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 38%;
	background: var(--pp-accent);
	pointer-events: none;
}

.pp-scrubber__knob {
	position: absolute;
	top: 50%;
	left: 38%;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--pp-accent);
	transform: translate(-50%, -50%);
	pointer-events: none;
	box-shadow: 0 0 6px color-mix(in oklch, var(--pp-accent) 50%, transparent);
}

.pp-scrubber__tooltip {
	position: absolute;
	bottom: calc(100% + 0.625rem);
	transform: translateX(-50%);
	background: var(--pp-ink);
	border: 1px solid var(--pp-rule);
	color: var(--pp-accent);
	font-family: var(--pp-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	padding: 0.25rem 0.5rem;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.pp-scrubber:hover .pp-scrubber__tooltip,
.pp-scrubber.is-scrubbing .pp-scrubber__tooltip {
	opacity: 1;
}

.pp-yt-link {
	font-family: var(--pp-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	color: var(--pp-cream);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
	flex-shrink: 0;
	transition: color 0.2s ease;
}

.pp-yt-link:hover {
	color: var(--pp-accent);
}

/* ── Front-page query sections ───────────────────────────────────────────── */
.pp-section {
	padding: 5rem var(--pp-inset-right) 5rem var(--pp-inset-left);
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/*
 * EYEBROW LABELS — section ("LATEST FILMS") and card ("SICILY")
 * Per DESIGN_TOKENS.md, --pp-teal is reserved for nav timecodes ONLY.
 * Eyebrows use --pp-cream at 42% opacity (= cream-70 × 60%).
 */
.pp-section__label,
.pp-card__eyebrow,
.pp-card__film-hud {
	font-family: var(--pp-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(239, 234, 224, 0.42); /* cream-70 @ 60 % opacity */
	margin-bottom: 0;
	display: block;
}

.pp-section__label {
	font-size: 0.8125rem;
	margin-bottom: 2.5rem;
}

.pp-section__heading {
	font-family: var(--pp-font-serif);
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	font-weight: 700;
	color: var(--pp-cream);
	margin: 0 0 2.5rem;
	line-height: 1.05;
	letter-spacing: -0.015em;
}

/* ── BUG 3 — Card grid ───────────────────────────────────────────────────── */
/*
 * .pp-card-grid  is the wp:query block — just a wrapper, no grid styles.
 * .wp-block-post-template  is where the CSS grid lives.
 * minmax(0, 1fr) prevents content from inflating track widths (the bug).
 */
.pp-card-grid {
	width: 100%;
}

/* Remove WP's own grid/flow layout inline styles so our CSS wins */
.pp-card-grid > .wp-block-post-template,
.pp-card-grid .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
	width: 100%;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

/* 2-col at 1100 px, 1-col at 700 px */
@media (max-width: 1099px) {
	.pp-card-grid > .wp-block-post-template,
	.pp-card-grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 699px) {
	.pp-card-grid > .wp-block-post-template,
	.pp-card-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* ── Card ────────────────────────────────────────────────────────────────── */
/*
 * The whole card is a single link: .pp-card__title a::after expands to
 * cover the card. Do NOT nest any other <a> inside .pp-card.
 *
 * Vertical rhythm: image → 1rem → eyebrow → 0.5rem → title → 0.5rem → excerpt
 */
.pp-card.wp-block-group {
	--wp--style--block-gap: 0;     /* kill WP default block gap */
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	padding: 0 !important;
	position: relative;            /* stacking context for ::after link */
	background: transparent;
	color: var(--pp-cream);
}

/* WP wraps each post-template item in a <li> — reset it */
.pp-card-grid .wp-block-post-template > li,
.pp-card-grid .wp-block-post-template > .wp-block-post {
	list-style: none;
	display: block;
	border-top: 1px solid var(--pp-rule);
	padding-top: 1.25rem;
}

/* ── BUG 5 — Featured image ──────────────────────────────────────────────── */
.pp-card__thumb {
	overflow: hidden;
	margin: 0 0 0 0;
	background: rgba(239, 234, 224, 0.04);
	border-radius: 0;
	/* 1px inset border  */
	box-shadow: inset 0 0 0 1px var(--pp-rule);
	flex-shrink: 0;
}

.pp-card__thumb img,
.pp-card__thumb figure img,
.pp-card__thumb .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* Hover: image scale, transform only, pointer:fine */
@media (pointer: fine) {
	.pp-card__thumb img,
	.pp-card__thumb figure img {
		transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	.pp-card:hover .pp-card__thumb img,
	.pp-card:hover .pp-card__thumb figure img {
		transform: scale(1.04);
	}
}

/* ── Card meta group ─────────────────────────────────────────────────────── */
.pp-card__meta.wp-block-group {
	--wp--style--block-gap: 0;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	padding: 0 !important;
	margin-top: 1rem;  /* 1rem gap after image */
	flex: 1;
}

/* Eyebrow spacing */
.pp-card__eyebrow,
.pp-card__film-hud {
	margin-bottom: 0.5rem !important;
}

/* Film HUD flex row: EP number + separator + location */
.pp-card__film-hud.wp-block-group {
	--wp--style--block-gap: 0;
	display: flex !important;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.4em;
	margin-bottom: 0.5rem !important;
}

.pp-card__ep-badge.wp-block-paragraph {
	font-family: var(--pp-font-mono) !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(239, 234, 224, 0.42) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.pp-card__loc {
	color: rgba(239, 234, 224, 0.42);
}

/* ── BUG 4 — Card title: 2-line clamp ────────────────────────────────────── */
.pp-card__title,
.pp-card__title.wp-block-post-title {
	font-family: var(--pp-font-serif) !important;
	font-size: clamp(1.1rem, 1.5vw, 1.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	color: var(--pp-cream) !important;
	margin: 0 0 0.5rem !important;
	padding: 0 !important;
	hyphens: none;
	overflow-wrap: break-word; /* last resort only */

	/* 2-line clamp */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* Whole-card link trick: title <a>::after covers the full card */
.pp-card__title a {
	color: inherit;
	text-decoration: none;
}

.pp-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Lift the link above the ::after pseudo so real links in excerpt still work */
.pp-card__excerpt a,
.pp-card__eyebrow a {
	position: relative;
	z-index: 3;
}

/* ── BUG 4 — Card excerpt: 3-line clamp ─────────────────────────────────── */
.pp-card__excerpt,
.pp-card__excerpt.wp-block-post-excerpt {
	font-size: 0.9375rem !important;
	line-height: 1.6 !important;
	color: var(--pp-cream-70) !important;
	margin: 0.5rem 0 0 !important;
	padding: 0 !important;
}

.pp-card__excerpt p,
.pp-card__excerpt .wp-block-post-excerpt__excerpt {
	/* 3-line clamp */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 0;
}

/* Remove WP "Read more" link — spec says no inline read-more */
.pp-card__excerpt .wp-block-post-excerpt__more-link {
	display: none;
}

/* ── No-results block ────────────────────────────────────────────────────── */
.pp-no-results {
	padding: 2rem 0;
	grid-column: 1 / -1; /* span full grid width */
}

.pp-no-results__text,
.pp-no-results p {
	font-family: var(--pp-font-mono) !important;
	font-size: 0.8125rem !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pp-cream-70) !important;
	margin: 0 !important;
}

.pp-no-results__text a,
.pp-no-results p a {
	color: var(--pp-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Section CTA button row — .wp-block-buttons from wp:buttons block */
.pp-section-cta {
	margin-top: 2.5rem !important;
}

/*
 * Separator: wp:separator with className pp-divider renders as
 * <hr class="wp-block-separator pp-divider">. Override WP defaults.
 */
.pp-divider,
hr.wp-block-separator.pp-divider {
	border: none !important;
	border-top: 1px solid var(--pp-rule) !important;
	margin: 0 !important;
	height: 0 !important;
}

/* Reset WP default list indentation for footer nav and pricing features */
.pp-footer__nav-list.wp-block-list,
ul.pp-footer__nav-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.pp-pricing__features.wp-block-list,
ul.pp-pricing__features {
	list-style: none !important;
	padding: 0 !important;
}

/*
 * Stats audiences row: flex, using wp:group + wp:paragraph children.
 * Paragraphs need zero margin so they sit inline as tags.
 */
.pp-stats__audiences.wp-block-group {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	border-top: 1px solid var(--pp-rule);
	padding-top: 1.5rem;
}

.pp-stats__aud-label,
.pp-stats__aud {
	margin: 0 !important;
}

/* Stats columns */
.pp-stats-grid.wp-block-columns {
	flex-wrap: nowrap !important;
	gap: 2rem !important;
	margin-top: 2rem;
	margin-bottom: 2.5rem;
}

@media (max-width: 700px) {
	.pp-stats-grid.wp-block-columns { flex-wrap: wrap !important; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.pp-footer {
	background-color: var(--pp-ink);
	border-top: 1px solid var(--pp-rule);
	padding: 4rem var(--pp-inset-right) 3rem var(--pp-inset-left);
}

.pp-footer__inner.wp-block-group {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 3rem;
	align-items: start;
	max-width: 1440px;
	margin: 0 auto;
}

.pp-footer__wordmark {
	font-family: var(--pp-font-serif);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--pp-cream);
	text-decoration: none;
	display: inline-block;
	margin-bottom: 1rem;
}

.pp-footer__wordmark .pp-amp {
	font-style: italic;
	color: var(--pp-amber);
}

.pp-footer__tagline {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--pp-cream-70);
	max-width: 30ch;
	margin: 0;
}

.pp-footer__nav-heading.wp-block-heading {
	font-family: var(--pp-font-mono);
	font-size: 0.6875rem !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pp-teal);
	margin: 0 0 1rem !important;
	font-weight: 400;
}

.pp-footer__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.pp-footer__nav-list li {
	margin: 0;
}

.pp-footer__nav-list a {
	font-size: 0.9375rem;
	color: var(--pp-cream-70);
	text-decoration: none;
	transition: color 0.2s ease;
}

.pp-footer__nav-list a:hover {
	color: var(--pp-cream);
}

.pp-footer__bottom.wp-block-group {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	border-top: 1px solid var(--pp-rule);
	padding-top: 1.5rem;
	margin-top: 3rem;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

.pp-footer__copy,
.pp-footer__legal {
	margin: 0 !important;
}

.pp-footer__copy {
	font-family: var(--pp-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--pp-cream-70);
}

.pp-footer__legal a {
	font-family: var(--pp-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--pp-cream-70);
	text-decoration: none;
	transition: color 0.2s ease;
}

.pp-footer__legal a:hover {
	color: var(--pp-cream);
}

/* ── Single / Archive article layout ─────────────────────────────────────── */
/*
 * Editorial article system
 *
 * Structure:
 *
 *       CATEGORY
 *       Large title
 *       META
 *
 *              ┌──────────────────────────────┐
 *              │                              │
 *              │       FEATURED IMAGE         │
 *              │                              │
 *              └──────────────────────────────┘
 *
 *                  Reading column
 *                  68ch max-width
 *
 * The article is intentionally narrower than the site-wide 1440px grid.
 * This gives editorial pages a more deliberate, magazine-like composition.
 */


/* ── Article header ──────────────────────────────────────────────────────── */

.pp-article-header {
	width: min(100% - 3rem, 1080px);
	margin: 0 auto;
	padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 5vw, 4.5rem);
	border-bottom: 1px solid var(--pp-rule);
}


/* Category / eyebrow */

.pp-article__category {
	display: inline-block;
	margin: 0 0 1.5rem;

	font-family: var(--pp-font-mono);
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;

	color: var(--pp-teal);
	text-decoration: none;
}


/* Article title */

.pp-article__title {
	max-width: 18ch;
	margin: 0 0 2rem;

	font-family: var(--pp-font-serif);
	font-size: clamp(2.75rem, 6vw, 5.5rem);
	font-weight: 700;
	line-height: 0.96;
	letter-spacing: -0.035em;

	color: var(--pp-cream);
}


/* Article metadata */

.pp-article__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;

	margin: 0;

	font-family: var(--pp-font-mono);
	font-size: 0.6875rem;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;

	color: var(--pp-cream-70);
}

.pp-article__meta-sep {
	color: var(--pp-rule);
}


/* ── Featured image ──────────────────────────────────────────────────────── */

/*
 * The image is deliberately wider than the reading column, but narrower
 * than the full 1440px site grid.
 *
 * This creates the "cinematic image / editorial text" hierarchy instead
 * of making the image look like a random WordPress block.
 */

.pp-article__featured {
	width: min(100% - 3rem, 1200px);
	margin: clamp(3rem, 5vw, 5rem) auto 0;

	overflow: hidden;

	background: rgba(239, 234, 224, 0.04);
}


/*
 * Force a cinematic frame.
 *
 * The previous height:100% had no meaningful parent height, which is one
 * reason the image could behave like a dumped rectangular block.
 */

.pp-article__featured img {
	display: block;

	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;

	object-fit: cover;
	object-position: center;
}


/* Slight cinematic crop on very wide screens */

@media (min-width: 1200px) {
	.pp-article__featured img {
		aspect-ratio: 2 / 1;
	}
}


/* ── Article body ───────────────────────────────────────────────────────── */

.pp-article-body {
	width: min(100% - 3rem, 1080px);
	margin: 0 auto;
	padding: clamp(4rem, 6vw, 6rem) 0 6rem;
}


/*
 * Actual reading column.
 *
 * Keep the text narrower than the outer article container. This is what
 * makes long-form travel writing comfortable to read.
 */

.pp-article-body .entry-content,
.pp-article-body > .wp-block-post-content {
	width: 100%;
	max-width: 68ch;
	margin-left: auto;
	margin-right: auto;
}


/* Paragraphs */

.pp-article-body p {
	margin: 0 0 1.5em;

	font-size: 1.0625rem;
	line-height: 1.8;

	color: var(--pp-cream-70);
}


/* First paragraph — subtle editorial lead */

.pp-article-body .entry-content > p:first-child,
.pp-article-body > .wp-block-post-content > p:first-child {
	font-size: 1.1875rem;
	line-height: 1.75;
	color: var(--pp-cream);
}


/* Headings */

.pp-article-body h2,
.pp-article-body h3 {
	color: var(--pp-cream);
	margin-left: 0;
	margin-right: 0;
}

.pp-article-body h2 {
	margin-top: 3.5em;
	margin-bottom: 1rem;

	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.pp-article-body h3 {
	margin-top: 2.75em;
	margin-bottom: 0.75rem;

	font-size: clamp(1.25rem, 2vw, 1.6rem);
	font-weight: 700;
	line-height: 1.1;
}


/* Links */

.pp-article-body a {
	color: var(--pp-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.pp-article-body a:hover {
	color: var(--pp-cream);
}


/* Blockquotes */

.pp-article-body blockquote {
	margin: 3rem 0;
	padding: 0 0 0 1.5rem;

	border-left: 3px solid var(--pp-accent);

	font-family: var(--pp-font-serif);
	font-size: 1.25rem;
	line-height: 1.5;
	font-style: italic;

	color: var(--pp-cream);
}


/* Article images inside the reading column */

.pp-article-body figure {
	margin: 3rem 0;
}

.pp-article-body figure img {
	display: block;
	width: 100%;
	height: auto;
}


/*
 * Allow explicitly wide images to break out of the text column.
 *
 * Useful for maps, landscapes, screenshots, etc.
 */

.pp-article-body .alignwide {
	width: min(100vw - 3rem, 1080px);
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.pp-article-body .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}


/* Captions */

.pp-article-body figcaption {
	margin-top: 0.75rem;

	font-family: var(--pp-font-mono);
	font-size: 0.6875rem;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;

	color: var(--pp-cream-70);
}


/* Inline code */

.pp-article-body code {
	font-family: var(--pp-font-mono);
	font-size: 0.875em;

	background: rgba(239, 234, 224, 0.06);
	padding: 0.1em 0.4em;
}


/* Code blocks */

.pp-article-body pre {
	margin: 2rem 0;

	background: rgba(239, 234, 224, 0.06);
	border-left: 3px solid var(--pp-rule);
	padding: 1.25rem 1.5rem;

	overflow-x: auto;
}


/* ── Post navigation ────────────────────────────────────────────────────── */

.pp-article-nav {
	width: min(100% - 3rem, 1080px);
	margin: 0 auto;

	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;

	border-top: 1px solid var(--pp-rule);
	padding: 2rem 0 4rem !important;
}

.pp-article-nav__link,
.pp-article-nav a {
	font-family: var(--pp-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;

	color: var(--pp-cream-70);
	text-decoration: none;

	transition: color 0.2s ease;
}

.pp-article-nav__link:hover,
.pp-article-nav a:hover {
	color: var(--pp-accent);
}


/* ── Mobile article layout ──────────────────────────────────────────────── */

@media (max-width: 700px) {

	.pp-article-header {
		width: min(100% - 2rem, 1080px);
		padding-top: 3.5rem;
		padding-bottom: 2.5rem;
	}

	.pp-article__category {
		margin-bottom: 1.25rem;
	}

	.pp-article__title {
		max-width: none;
		margin-bottom: 1.5rem;

		font-size: clamp(2.5rem, 12vw, 4rem);
		line-height: 0.95;
	}

	.pp-article__meta {
		gap: 0.5rem 0.875rem;
	}

	.pp-article__featured {
		width: 100%;
		margin-top: 2rem;
	}

	.pp-article__featured img {
		aspect-ratio: 16 / 10;
	}

	.pp-article-body {
		width: min(100% - 2rem, 1080px);
		padding-top: 3.5rem;
		padding-bottom: 4rem;
	}

	.pp-article-body p {
		font-size: 1rem;
		line-height: 1.75;
	}

	.pp-article-body .entry-content > p:first-child,
	.pp-article-body > .wp-block-post-content > p:first-child {
		font-size: 1.0625rem;
	}

	.pp-article-body h2 {
		margin-top: 2.75em;
	}

	.pp-article-body blockquote {
		margin: 2.5rem 0;
		padding-left: 1.125rem;
	}

	.pp-article-body .alignwide,
	.pp-article-body .alignfull {
		width: 100%;
		margin-left: 0;
		transform: none;
	}

	.pp-article-nav {
		width: min(100% - 2rem, 1080px);
		padding-bottom: 3rem !important;
	}
}

/* ── Archive grid ────────────────────────────────────────────────────────── */
.pp-archive-header {
	padding: 5rem var(--pp-inset-right) 3rem var(--pp-inset-left);
	max-width: 1440px;
	margin: 0 auto;
	border-bottom: 1px solid var(--pp-rule);
}

.pp-archive__kicker {
	font-family: var(--pp-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pp-teal);
	margin-bottom: 1rem;
	display: block;
}

.pp-archive__title {
	font-family: var(--pp-font-serif);
	font-size: clamp(2rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1.0;
	letter-spacing: -0.02em;
	color: var(--pp-cream);
	margin: 0;
}

.pp-archive-grid {
	padding: 4rem var(--pp-inset-right) 5rem var(--pp-inset-left);
	max-width: 1440px;
	margin: 0 auto;
}

.pp-pagination {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	padding: 3rem var(--pp-inset-right) 3rem var(--pp-inset-left);
	max-width: 1440px;
	margin: 0 auto;
	border-top: 1px solid var(--pp-rule);
	font-family: var(--pp-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
}

.pp-pagination a,
.pp-pagination .page-numbers {
	font-family: var(--pp-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: var(--pp-cream-70);
	text-decoration: none;
	padding: 0.375rem 0.625rem;
	border: 1px solid var(--pp-rule);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.pp-pagination a:hover,
.pp-pagination .current {
	border-color: var(--pp-accent);
	color: var(--pp-accent);
}

/* ── Single Films template ───────────────────────────────────────────────── */
.pp-film-header {
	padding: 4rem var(--pp-inset-right) 2.5rem var(--pp-inset-left);
	max-width: 1440px;
	margin: 0 auto;
}

/* HUD badges row: episode, runtime, location */
.pp-film-hud {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.pp-film-badge,
.pp-film-badge p,
.pp-film-ep p,
.pp-film-runtime p {
	font-family: var(--pp-font-mono) !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pp-teal) !important;
	border: 1px solid var(--pp-rule);
	padding: 0.25rem 0.625rem;
	margin: 0 !important;
	background: transparent !important;
	display: inline-block;
}

/* Episode number badge — accent colour */
.pp-film-ep,
.pp-film-ep p {
	color: var(--pp-accent) !important;
	border-color: color-mix(in oklch, var(--pp-accent) 40%, transparent) !important;
}

.pp-film-title {
	font-family: var(--pp-font-serif) !important;
	font-size: clamp(2rem, 5vw, 4rem) !important;
	font-weight: 700 !important;
	line-height: 1.0 !important;
	letter-spacing: -0.02em !important;
	color: var(--pp-cream) !important;
	max-width: 22ch;
	margin: 0 0 2.5rem !important;
}

/* YouTube facade */
.pp-yt-facade {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16/9;
	max-width: 1440px;
	margin: 0 auto;
	cursor: pointer;
	overflow: hidden;
	background: var(--pp-ink);
	border: none;
	padding: 0;
}

.pp-yt-facade__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.2s ease;
}

.pp-yt-facade:hover .pp-yt-facade__thumb {
	opacity: 0.85;
}

.pp-yt-facade__btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	pointer-events: none;
}

.pp-yt-facade__iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16/9;
	border: none;
	max-width: 1440px;
	margin: 0 auto;
}

.pp-film-body {
	padding: 3rem var(--pp-inset-right) 5rem var(--pp-inset-left);
	max-width: 1440px;
	margin: 0 auto;
}

.pp-film-body .wp-block-post-content,
.pp-film-body .entry-content {
	max-width: 68ch;
}

/* ── Media Kit: Stats HUD ────────────────────────────────────────────────── */
.pp-stats-hud {
	padding: 4rem var(--pp-inset-right) 4rem var(--pp-inset-left);
	background: var(--pp-ink);
	border-top: 1px solid var(--pp-rule);
	border-bottom: 1px solid var(--pp-rule);
}

.pp-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 2rem;
	margin-top: 2rem;
	margin-bottom: 2.5rem;
}

.pp-stat__value {
	font-family: var(--pp-font-serif);
	font-size: clamp(2.5rem, 5vw, 5rem);
	font-weight: 700;
	color: var(--pp-cream);
	display: block;
	line-height: 0.9;
	margin-bottom: 0.5rem;
	letter-spacing: -0.02em;
}

.pp-stat__label {
	font-family: var(--pp-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	color: var(--pp-teal);
	text-transform: uppercase;
	display: block;
}

.pp-stats__audiences {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	border-top: 1px solid var(--pp-rule);
	padding-top: 1.5rem;
}

.pp-stats__aud-label {
	font-family: var(--pp-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	color: var(--pp-teal);
	text-transform: uppercase;
}

.pp-stats__aud {
	font-family: var(--pp-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: var(--pp-cream);
	text-transform: uppercase;
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--pp-rule);
}

/* ── Media Kit: Pricing ──────────────────────────────────────────────────── */
.pp-pricing-wrap {
	padding: 4rem var(--pp-inset-right) 4rem var(--pp-inset-left);
	max-width: 1440px;
	margin: 0 auto;
}

.pp-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.pp-pricing-card {
	border-top: 2px solid var(--pp-rule);
	padding: 2rem 1.5rem 2.5rem;
	display: flex;
	flex-direction: column;
}

.pp-pricing-card--featured {
	border-top-color: var(--pp-accent);
	background: color-mix(in oklch, var(--pp-accent) 4%, transparent);
}

.pp-pricing__tier {
	font-family: var(--pp-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pp-teal);
	margin-bottom: 1rem;
	display: block;
}

.pp-pricing-card--featured .pp-pricing__tier {
	color: var(--pp-accent);
}

.pp-pricing__title {
	font-family: var(--pp-font-serif);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--pp-cream);
	margin: 0 0 1.5rem;
	line-height: 1.15;
}

.pp-pricing__from {
	font-family: var(--pp-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	color: var(--pp-teal);
	text-transform: uppercase;
	display: block;
	margin-bottom: 0.25rem;
}

.pp-pricing__price {
	font-family: var(--pp-font-serif);
	font-size: clamp(2rem, 3vw, 2.75rem);
	font-weight: 700;
	color: var(--pp-cream);
	line-height: 1;
	margin: 0 0 1.5rem;
	letter-spacing: -0.02em;
}

.pp-pricing__desc {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--pp-cream-70);
	margin-bottom: 1.5rem;
}

.pp-pricing__features {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.pp-pricing__features li {
	font-family: var(--pp-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--pp-cream-70);
	padding-left: 1.25rem;
	position: relative;
}

.pp-pricing__features li::before {
	content: "\2014";
	position: absolute;
	left: 0;
	color: var(--pp-teal);
}

.pp-pricing__cta {
	margin-top: auto;
}

/* ── Media Kit: Case Studies ─────────────────────────────────────────────── */
.pp-case-wrap {
	padding: 4rem var(--pp-inset-right) 4rem var(--pp-inset-left);
	max-width: 1440px;
	margin: 0 auto;
}

.pp-case-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
	gap: 2rem;
}

.pp-case-card {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--pp-rule);
	padding-top: 1.5rem;
}

.pp-case-card__media {
	aspect-ratio: 16/9;
	overflow: hidden;
	margin-bottom: 1.25rem;
	background: rgba(239, 234, 224, 0.05);
	position: relative;
}

.pp-case-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pp-case-card__brand {
	font-family: var(--pp-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pp-teal);
	margin-bottom: 0.5rem;
}

.pp-case-card__title {
	font-family: var(--pp-font-serif);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--pp-cream);
	margin: 0 0 0.75rem;
	line-height: 1.2;
}

.pp-case-card__desc {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--pp-cream-70);
	flex-grow: 1;
}

.pp-case-card__tag {
	font-family: var(--pp-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pp-cream-70);
	margin-top: 1rem;
}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.pp-404 {
	padding: 6rem var(--pp-inset-right) 6rem var(--pp-inset-left);
	max-width: 1440px;
	margin: 0 auto;
	min-height: calc(100svh - var(--pp-header-height) - var(--pp-letterbox));
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pp-404__code {
	font-family: var(--pp-font-serif);
	font-size: clamp(6rem, 15vw, 14rem);
	font-weight: 700;
	color: rgba(239, 234, 224, 0.08);
	line-height: 0.85;
	margin: 0 0 2rem;
	letter-spacing: -0.04em;
}

.pp-404__headline {
	font-family: var(--pp-font-serif);
	font-size: clamp(1.75rem, 3.5vw, 3rem);
	font-weight: 700;
	color: var(--pp-cream);
	margin: 0 0 1.25rem;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.pp-404__body {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--pp-cream-70);
	max-width: 44ch;
	margin: 0 0 2.5rem;
}

/* ── Search ──────────────────────────────────────────────────────────────── */
.pp-search-header {
	padding: 5rem var(--pp-inset-right) 3.5rem var(--pp-inset-left);
	max-width: 1440px;
	margin: 0 auto;
	border-bottom: 1px solid var(--pp-rule);
}

.pp-search-title {
	font-family: var(--pp-font-serif);
	font-size: clamp(2rem, 5vw, 4rem);
	font-weight: 700;
	color: var(--pp-cream);
	margin: 0 0 2rem;
	letter-spacing: -0.02em;
	line-height: 1.0;
}

.wp-block-search .wp-block-search__input {
	background: transparent !important;
	border: 1px solid var(--pp-rule) !important;
	color: var(--pp-cream) !important;
	font-family: var(--pp-font-sans) !important;
	font-size: 1rem !important;
	padding: 0.75rem 1rem !important;
	border-radius: 0 !important;
	outline-color: var(--pp-teal);
}

.wp-block-search .wp-block-search__button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	background: var(--pp-amber) !important;
	color: var(--pp-ink) !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: var(--pp-font-mono) !important;
	font-size: 0.8125rem !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	padding: 0.75rem 1.5rem !important;
	line-height: 1 !important;
}

.pp-search-results {
	padding: 4rem var(--pp-inset-right) 5rem var(--pp-inset-left);
	max-width: 1440px;
	margin: 0 auto;
}

.pp-search-count {
	font-family: var(--pp-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: var(--pp-teal);
	text-transform: uppercase;
	margin-bottom: 2.5rem;
	display: block;
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.pp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.pp-pricing-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
	}
}

@media (max-width: 720px) {
	.pp-footer__inner.wp-block-group {
		grid-template-columns: 1fr !important;
		gap: 2rem;
	}

	.pp-footer__bottom.wp-block-group {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Headline line font-size on small screens */
	.pp-hl {
		font-size: clamp(1.75rem, 9vw, 3rem) !important;
	}
}