/* ==========================================================================
   Pasta & Panda – single film layout + film blocks
   Built on the --pp-* tokens from style.css and palette.css.
   ========================================================================== */

body,
.pp-header,
.pp-hero,
.pp-footer,
.pp-film-stage,
.pp-dark {
	--pp-f-gold: var(--pp-accent, #B8341F);
	--pp-f-cream: var(--pp-cream, #1D2422);
	--pp-f-text: var(--pp-cream-70, #46524D);
	--pp-f-muted: var(--pp-faint, #4A6B5D);
	--pp-f-line: var(--pp-rule, #D3DAD4);
	--pp-f-ink: var(--pp-on-accent, #F2F3EE); /* text on accent buttons */
	--pp-f-panel: color-mix(in oklch, var(--pp-celadon, #B7CCBD) 40%, var(--pp-paper, #F2F3EE));
	--pp-f-sage: var(--pp-celadon, #B7CCBD); /* handwritten note */
	--pp-f-serif: var(--pp-font-serif, Georgia, serif);
	--pp-f-mono: var(--pp-font-mono, ui-monospace, monospace);
	--pp-f-hand: var(--wp--preset--font-family--handwritten, "Caveat", "Segoe Print", "Bradley Hand", cursive);
	--pp-f-radius: 6px; /* the rest of the site is square – set to 0 to match */
}

/* ---------- Header: title left, handwritten note right ---------- */

.pp-film-header {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	column-gap: clamp(1.5rem, 4vw, 4rem);
}
.pp-film-header > * { margin-block: 0; }

.pp-film-crumbs {
	margin-top: 1.1rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pp-f-muted);
}
.pp-film-crumbs a { color: inherit; text-decoration: none; }
.pp-film-crumbs a:hover,
.pp-film-crumbs a:focus-visible { color: var(--pp-f-cream); }

.pp-hero-note {
	position: relative;
	z-index: 3; /* sit over the torn edge of the player */
	max-width: 15rem;
	margin: 0 0 -4.5rem !important;
	color: var(--pp-f-sage);
	transform: rotate(-8deg);
	transform-origin: left bottom;
	pointer-events: none;
}
.pp-hero-note__text {
	margin: 0;
	font-family: var(--pp-f-hand);
	font-size: clamp(1.35rem, 1rem + 1vw, 1.8rem);
	line-height: 1.12;
}
.pp-hero-note__arrow {
	display: block;
	width: 2.6rem;
	height: auto;
	margin: 0.3rem 0 0 0.25rem;
	transform: rotate(10deg);
}

@media (max-width: 781px) {
	.pp-film-header { grid-template-columns: 1fr; }
	.pp-hero-note {
		justify-self: end;
		max-width: 12rem;
		margin: 1rem 0 -2.5rem !important;
	}
}

/* ---------- Body: story + sidebar ---------- */

.pp-film-layout {
	display: grid;
	grid-template-columns: minmax(0, 68ch) 17.5rem;
	justify-content: start;
	gap: clamp(2rem, 4vw, 3.5rem);
	max-width: 1440px;
	margin-inline: auto;
	padding: 3rem var(--pp-inset-right) 0 var(--pp-inset-left);
}
.pp-film-layout > * { margin-block: 0 !important; min-width: 0; }

.pp-film-body .entry-content { color: var(--pp-f-text); }
.pp-film-body .entry-content::after { content: ""; display: table; clear: both; }
.pp-film-body .entry-content h2,
.pp-film-body .entry-content h3 { color: var(--pp-f-cream); font-family: var(--pp-f-serif); }
.pp-film-body .entry-content .wp-block-image img {
	border: 1px solid var(--pp-f-line);
	border-radius: var(--pp-f-radius);
}

.pp-film-aside {
	display: flex;
	flex-direction: column;
	gap: 2.25rem;
	align-self: start;
	padding-left: clamp(1.5rem, 3vw, 2.25rem);
	border-left: 1px solid var(--pp-f-line);
}
.pp-film-aside > * { margin-block: 0 !important; }
.pp-film-aside > * + * { padding-top: 2.25rem; border-top: 1px solid var(--pp-f-line); }
.pp-film-aside > .pp-quick-facts { border-top: 0; padding-top: 0; }

@media (max-width: 960px) {
	.pp-film-layout { grid-template-columns: 1fr; }
	.pp-film-aside {
		padding: 2.5rem 0 0;
		border-left: 0;
		border-top: 1px solid var(--pp-f-line);
	}
}

/* ---------- Lede paragraph (block style) ---------- */

.is-style-pp-lede {
	padding-left: 1.5rem;
	border-left: 3px solid var(--pp-f-gold);
	font-family: var(--pp-f-serif);
	font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
	line-height: 1.55;
	color: var(--pp-f-cream);
}

/* ---------- Film quote (block style for core/quote; every quote in a blog post) ---------- */

.wp-block-quote.is-style-pp-film,
.pp-post-body .wp-block-quote:not(.is-style-plain) {
	position: relative;
	overflow: hidden;
	margin-block: 2.5rem;
	padding: 2rem 2rem 1.75rem 6.25rem;
	border: 1px solid var(--pp-f-line);
	border-radius: var(--pp-f-radius);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110'%3E%3Cpath d='M0 110 50 70l25 16 45-54 30 32 22-18 42 44 30-26 56 46z' fill='%231D2422' fill-opacity='.05'/%3E%3Cpath d='M60 110l55-44 30 20 40-30 45 34 30-14 40 34z' fill='%231D2422' fill-opacity='.04'/%3E%3C/svg%3E") right bottom / 75% auto no-repeat,
		var(--pp-f-panel);
	color: var(--pp-f-cream);
}
.wp-block-quote.is-style-pp-film::before,
.pp-post-body .wp-block-quote:not(.is-style-plain)::before {
	content: "\201C";
	position: absolute;
	top: 0.35rem;
	left: 1.5rem;
	font-family: var(--pp-f-serif);
	font-size: 6rem;
	font-weight: 700;
	line-height: 1;
	color: var(--pp-f-gold);
}
.wp-block-quote.is-style-pp-film p,
.pp-post-body .wp-block-quote:not(.is-style-plain) p {
	margin: 0;
	font-family: var(--pp-f-serif);
	font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
	font-style: italic;
	line-height: 1.35;
}
.wp-block-quote.is-style-pp-film cite,
.pp-post-body .wp-block-quote:not(.is-style-plain) cite {
	display: block;
	margin-top: 1.1rem;
	font-size: 0.7rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pp-f-muted);
}
.wp-block-quote.is-style-pp-film cite::before,
.pp-post-body .wp-block-quote:not(.is-style-plain) cite::before { content: "— "; }

@media (max-width: 600px) {
.wp-block-quote.is-style-pp-film,
.pp-post-body .wp-block-quote:not(.is-style-plain) { padding: 3.75rem 1.5rem 1.5rem; }
.wp-block-quote.is-style-pp-film::before,
.pp-post-body .wp-block-quote:not(.is-style-plain)::before { font-size: 4.5rem; left: 1.25rem; }
}

/* ---------- Quick facts ---------- */

.pp-quick-facts__heading {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pp-f-cream);
}
.pp-quick-facts__heading::after { content: ""; flex: 1; height: 1px; background: var(--pp-f-line); }

.pp-quick-facts__list { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.pp-quick-facts__item {
	display: grid;
	grid-template-columns: 1.4rem 1fr;
	column-gap: 0.9rem;
	align-items: start;
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.4;
}
.pp-quick-facts__icon { grid-row: span 2; color: var(--pp-f-gold); }
.pp-quick-facts__icon svg { display: block; width: 1.4rem; height: 1.4rem; }
.pp-quick-facts__label { color: var(--pp-f-cream); }
.pp-quick-facts__value { color: var(--pp-f-muted); }

/* Compact card variant (inline, next to a photo) */
.pp-quick-facts--card {
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--pp-f-line);
	border-radius: var(--pp-f-radius);
	text-align: center;
}
.pp-quick-facts--card .pp-quick-facts__list { gap: 0; }
.pp-quick-facts--card .pp-quick-facts__item {
	grid-template-columns: 1fr;
	justify-items: center;
	row-gap: 0.35rem;
	padding-block: 1.1rem;
}
.pp-quick-facts--card .pp-quick-facts__item + .pp-quick-facts__item { border-top: 1px solid var(--pp-f-line); }
.pp-quick-facts--card .pp-quick-facts__icon { grid-row: auto; order: 0; }
.pp-quick-facts--card .pp-quick-facts__value {
	order: 1;
	font-family: var(--pp-f-serif);
	font-size: 1rem;
	font-weight: 600;
	color: var(--pp-f-cream);
}
.pp-quick-facts--card .pp-quick-facts__label {
	order: 2;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pp-f-muted);
}

/* ---------- Watch card (sidebar) ---------- */

.pp-watch-card__link {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--pp-f-line);
	border-radius: var(--pp-f-radius);
	color: inherit;
	text-decoration: none;
}
.pp-watch-card__media { position: relative; display: block; }
.pp-watch-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; }
.pp-watch-card__play {
	position: absolute;
	top: 42%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border: 1px solid color-mix(in srgb, var(--pp-f-gold) 60%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--pp-f-ink) 85%, transparent);
	color: var(--pp-f-gold);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}
.pp-watch-card__play svg { width: 1.35rem; height: 1.35rem; margin-left: 2px; }
.pp-watch-card__link:hover .pp-watch-card__play,
.pp-watch-card__link:focus-visible .pp-watch-card__play { transform: translate(-50%, -50%) scale(1.08); }
.pp-watch-card__cta {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	left: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.65rem;
	border-radius: 4px;
	background: var(--pp-f-gold);
	color: var(--pp-f-ink);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---------- More films (sidebar) ---------- */

.pp-more-films__icon { display: block; width: 2.6rem; color: var(--pp-f-gold); }
.pp-more-films__icon svg { display: block; width: 100%; height: auto; }
.pp-more-films__heading {
	margin: 0.6rem 0 0.4rem;
	font-family: var(--pp-f-serif);
	font-size: 1.1rem;
	color: var(--pp-f-cream);
}
.pp-more-films__desc { margin: 0 0 1.1rem; font-size: 0.82rem; color: var(--pp-f-muted); }
.pp-more-films__card { display: block; color: var(--pp-f-cream); text-decoration: none; }
.pp-more-films__card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	border: 1px solid var(--pp-f-line);
	border-radius: 4px;
}
.pp-more-films__title { display: block; margin-top: 0.5rem; font-size: 0.8rem; }
.pp-more-films__all {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.9rem;
	font-size: 0.78rem;
	color: var(--pp-f-cream);
}
.pp-more-films__all svg { width: 1rem; height: 1rem; color: var(--pp-f-gold); }

/* ---------- Related article box ---------- */

.pp-related-card {
	position: relative;
	display: grid;
	grid-template-columns: 1.4rem 1fr;
	column-gap: 0.9rem;
	box-sizing: border-box;
	width: min(100%, 18rem);
	padding: 1.35rem 1.35rem 1.5rem;
	border: 1px solid var(--pp-f-line);
	border-radius: var(--pp-f-radius);
	font-size: 0.82rem;
}
.entry-content .pp-related-card.alignright { float: right; margin: 0.35rem 0 1rem 2rem; }
.entry-content .pp-related-card.alignleft { float: left; margin: 0.35rem 2rem 1rem 0; }
.pp-related-card__icon { color: var(--pp-f-gold); }
.pp-related-card__icon svg { display: block; width: 1.4rem; height: 1.4rem; }
.pp-related-card__body > * { margin: 0; }
.pp-related-card__title { font-family: var(--pp-f-serif); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.pp-related-card__title a { color: var(--pp-f-cream); text-decoration: none; }
.pp-related-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole box is clickable */
.pp-related-card__title a:focus-visible { outline: none; }
.pp-related-card:focus-within { outline: 2px solid var(--pp-f-gold); outline-offset: 3px; }
.pp-related-card__excerpt { margin-top: 0.6rem !important; color: var(--pp-f-muted); line-height: 1.5; }
.pp-related-card__button {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 1rem !important;
	padding: 0.55rem 0.9rem;
	border-radius: 3px;
	background: var(--pp-f-gold);
	color: var(--pp-f-ink);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}
.pp-related-card__button svg { width: 0.9rem; height: 0.9rem; }
.pp-related-card:hover { border-color: color-mix(in srgb, var(--pp-f-gold) 50%, transparent); }
.pp-related-card--empty { display: block; color: var(--pp-f-muted); }

@media (max-width: 600px) {
	.entry-content .pp-related-card.alignright,
	.entry-content .pp-related-card.alignleft { float: none; width: 100%; margin: 1.5rem 0; }
}

/* ---------- Prev / next ---------- */

.pp-article-nav {
	gap: 1.5rem;
	margin-top: 3rem;
	padding-block: 2rem 3rem;
	border-top: 1px solid var(--pp-f-line);
}
.pp-article-nav__link a { color: var(--pp-f-muted); font-size: 0.78rem; text-decoration: none; }
.pp-article-nav .post-navigation-link__label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pp-f-gold);
}
.pp-article-nav .post-navigation-link-next { margin-left: auto; text-align: right; }
.pp-article-nav__link a:hover .post-navigation-link__title,
.pp-article-nav__link a:focus-visible .post-navigation-link__title { color: var(--pp-f-cream); }

/* ---------- Editor-only placeholders ---------- */

.pp-film-placeholder {
	margin: 0;
	padding: 1rem;
	border: 1px dashed var(--pp-f-line);
	border-radius: var(--pp-f-radius);
	font-size: 0.8rem;
	color: var(--pp-f-muted);
}

@media (prefers-reduced-motion: reduce) {
	.pp-watch-card__play { transition: none; }
}

/* ==========================================================================
   Compatibility with style.css
   ========================================================================== */

/* style.css gives .pp-film-body its own insets + 1440px width; the grid now owns that. */
.pp-film-layout .pp-film-body { max-width: none; margin: 0; padding: 0; }

/* Title had a 2.5rem bottom margin; the category line now follows it. */
.pp-film-header .pp-film-title { margin-bottom: 0 !important; }

/* .pp-article-nav is sized for the 1080px article layout; here it lives in the story column. */
.pp-film-body .pp-article-nav { width: 100%; margin: 3rem 0 0; padding: 2rem 0 3rem !important; }
.pp-article-nav .post-navigation-link__title {
	display: block;
	font-family: var(--pp-font-sans);
	font-size: 0.85rem;
	letter-spacing: 0;
	text-transform: none;
}
/* Small uppercase labels use the theme's HUD mono,
like the EP / runtime badges. */
.pp-film-crumbs,
.pp-quick-facts__heading,
.pp-quick-facts--card .pp-quick-facts__label,
.wp-block-quote.is-style-pp-film cite,
.pp-post-body .wp-block-quote:not(.is-style-plain) cite,
.pp-watch-card__cta,
.pp-related-card__button,
.pp-article-nav .post-navigation-link__label { font-family: var(--pp-f-mono); }

/* Film blocks used inside regular posts: beat .pp-article-body p / a / blockquote. */
.pp-related-card .pp-related-card__body > p { margin: 0; }
.pp-related-card .pp-related-card__title { font-size: 1rem; line-height: 1.3; color: var(--pp-f-cream); }
.pp-related-card .pp-related-card__title a { color: var(--pp-f-cream); text-decoration: none; }
.pp-related-card .pp-related-card__title a:hover { color: var(--pp-f-gold); }
.pp-related-card .pp-related-card__excerpt { margin-top: 0.6rem; font-size: 0.82rem; line-height: 1.5; color: var(--pp-f-muted); }
.pp-related-card .pp-related-card__button { color: var(--pp-f-ink); text-decoration: none; }
.pp-related-card .pp-related-card__button:hover { color: var(--pp-f-ink); }
.pp-article-body .wp-block-quote.is-style-pp-film { font-style: normal; }

/* ── Film stage: header + player as one dark band ── */
.pp-film-stage { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.pp-film-stage > * { margin-block: 0; }

/* ==========================================================================
   Blog posts (templates/single.html): the film layout with a reading sidebar
   ========================================================================== */

/* ── Stage: HUD badges, title, then the featured image as the "screen" ── */
.pp-film-hud .wp-block-post-terms a { color: inherit; text-decoration: none; }
.pp-post-meta { display: inline-flex; gap: 0.5em; }
.pp-post-header .pp-film-title { max-width: 24ch; }
.pp-post-screen.wp-block-post-featured-image {
	max-width: 1440px;
	margin: 0 auto !important;
}
.pp-post-screen img {
	display: block;
	width: 100%;
	height: auto !important;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}
@media (max-width: 781px) {
	.pp-post-screen img { aspect-ratio: 4 / 3; }
}

/* ── Reading column ── */
.pp-post-layout { padding-bottom: 2rem; }
.pp-film-layout .pp-post-body { width: auto; }
.pp-post-body .entry-content { max-width: none; }

.pp-post-body h2[id] { scroll-margin-top: calc(var(--pp-header-height, 64px) + 1.5rem); }
.pp-post-body h2[data-pp-num]::before {
	content: attr(data-pp-num);
	display: block;
	margin-bottom: 0.9rem;
	font-family: var(--pp-f-mono);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	color: var(--pp-f-gold);
}

.pp-post-body .entry-content ul > li::marker { color: var(--pp-f-gold); }
.pp-post-body .entry-content ol > li::marker { color: var(--pp-f-gold); font-family: var(--pp-f-mono); font-size: 0.85em; }
.pp-post-body .entry-content li { margin-bottom: 0.6em; color: var(--pp-f-text); line-height: 1.7; }
.pp-post-body .entry-content li strong { color: var(--pp-f-cream); }

/* Videos */
.pp-post-body .entry-content .wp-block-embed iframe,
.pp-post-body .entry-content .wp-block-embed__wrapper {
	border-radius: var(--pp-f-radius);
}
.pp-post-body .entry-content .wp-block-embed { margin-block: 2.5rem; }
.pp-post-body .entry-content .wp-block-embed__wrapper { overflow: hidden; }

/* Separators between sections */
.pp-post-body .entry-content hr.wp-block-separator {
	width: 3rem;
	margin: 3.5rem 0;
	border: 0;
	border-top: 2px solid var(--pp-f-gold);
	opacity: 1;
}

/* Tables */
.pp-post-body .entry-content table {
	width: 100%;
	margin: 2.5rem 0;
	border-collapse: collapse;
	font-size: 0.9rem;
	line-height: 1.5;
}
.pp-post-body .entry-content th,
.pp-post-body .entry-content thead td {
	padding: 0.75rem 1rem;
	background: var(--pp-f-panel);
	color: var(--pp-f-cream);
	font-family: var(--pp-f-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-align: left;
	text-transform: uppercase;
}
.pp-post-body .entry-content td {
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--pp-f-line);
	color: var(--pp-f-text);
	vertical-align: top;
}
.pp-post-body .entry-content .wp-block-table { overflow-x: auto; border: 1px solid var(--pp-f-line); border-radius: var(--pp-f-radius); margin: 2.5rem 0; }
.pp-post-body .entry-content .wp-block-table table { margin: 0; }
.pp-post-body .entry-content .wp-block-table td,
.pp-post-body .entry-content .wp-block-table th { border-left: 0; border-right: 0; border-top: 0; }
.pp-post-body .entry-content .wp-block-table figcaption { margin: 0; padding: 0.6rem 1rem; font-size: 0.75rem; color: var(--pp-f-text); }

/* Inline Rank Math contents boxes: a quiet panel on phones,
   hidden on wide screens where the sidebar list takes over. */
.pp-post-body .wp-block-rank-math-toc-block {
	margin: 2.5rem 0 !important;
	padding: 1.5rem 1.75rem !important;
	border: 1px solid var(--pp-f-line) !important;
	border-radius: var(--pp-f-radius);
	background: var(--pp-f-panel) !important;
}
.pp-post-body .wp-block-rank-math-toc-block h2 {
	margin: 0 0 1rem !important;
	font-family: var(--pp-f-mono) !important;
	font-size: 0.7rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase;
	color: var(--pp-f-cream) !important;
}
.pp-post-body .wp-block-rank-math-toc-block ul,
.pp-post-body .wp-block-rank-math-toc-block ol { margin: 0 !important; padding-left: 1.1rem !important; }
.pp-post-body .wp-block-rank-math-toc-block a {
	color: var(--pp-f-cream) !important;
	font-size: 0.92rem;
	text-decoration: none !important;
}
@media (min-width: 961px) {
	.pp-post-body .wp-block-rank-math-toc-block { display: none !important; }
}

/* ── Sidebar ── */
.pp-post-aside { align-self: stretch; }
.pp-post-aside .pp-more-films__heading::before {
	content: "Watch the film";
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--pp-f-mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pp-f-gold);
}

/* "In this guide": sticks while you read, highlights the current section */
.pp-post-toc {
	position: sticky;
	top: calc(var(--pp-header-height, 64px) + 1.5rem);
	max-height: calc(100vh - var(--pp-header-height, 64px) - 3rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.pp-post-toc__list { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.pp-post-toc__list li { margin: 0; }
.pp-post-toc__link {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: 0.4rem;
	padding: 0.45rem 0 0.45rem 0.8rem;
	border-left: 2px solid var(--pp-f-line);
	color: var(--pp-f-muted);
	font-size: 0.8rem;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.pp-post-toc__num { padding-top: 0.1rem; font-family: var(--pp-f-mono); font-size: 0.66rem; letter-spacing: 0.08em; }
.pp-post-toc__link:hover,
.pp-post-toc__link:focus-visible { color: var(--pp-f-cream); }
.pp-post-toc__link[aria-current] { border-left-color: var(--pp-f-gold); color: var(--pp-f-cream); }
.pp-post-toc__link[aria-current] .pp-post-toc__num { color: var(--pp-f-gold); }

@media (max-width: 960px) {
	.pp-post-toc { display: none; }
}

/* ── Keep reading ── */
.pp-related-posts { border-top: 1px solid var(--pp-rule); }
.pp-related-posts .pp-card__date { margin-top: 0.75rem; font-family: var(--pp-font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pp-faint); }
.pp-related-posts .pp-card__thumb { margin: 0 0 1rem; }

@media (prefers-reduced-motion: reduce) {
	.pp-post-toc__link { transition: none; }
}