/*
 * PoeticTemperance main stylesheet.
 * Colours, fonts and spacing come from theme.json (the --wp--preset--* variables), so
 * changing a colour there changes it everywhere, including in the block editor.
 */

/*
 * Backup for the Brush Script tagline on phones and other devices without Brush Script MT.
 * Declared here, not in theme.json, because WordPress would publish it under the name
 * "Brush Script MT" and hide the real font on computers that have it. Only downloads on
 * pages that show the tagline on such a device.
 */
@font-face {
	font-family: "Damion";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/damion-400-normal.woff2") format("woff2");
}

:root {
	/* Colours copied from poetictemperance.com (Flatsome settings, Nov 2026). */
	--pt-base: var(--wp--preset--color--base, #000000);
	--pt-surface: var(--wp--preset--color--surface, #1c050d);
	--pt-raised: var(--wp--preset--color--raised, #331e25);
	--pt-line: var(--wp--preset--color--line, #3f2a72);
	--pt-text: var(--wp--preset--color--text, #f8ecd9);
	--pt-muted: var(--wp--preset--color--muted, #cccccc);
	--pt-accent: var(--wp--preset--color--accent, #da70d6);
	--pt-accent-deep: var(--wp--preset--color--accent-deep, #be73fb);
	--pt-secondary: var(--wp--preset--color--secondary, #6c5ce7);
	--pt-lilac: var(--wp--preset--color--lilac, #c9a3f5);
	--pt-white: var(--wp--preset--color--white, #ffffff);
	/* Buttons: indigo-to-orchid gradient. The colours are deep enough for white text
	   (at least 4.5:1 everywhere), the glow does the "lighting up". */
	--pt-btn-grad: linear-gradient(110deg, #4a2bc4 0%, #7a3ad8 28%, #a145c9 52%, #7a3ad8 76%, #4a2bc4 100%);
	--pt-btn-sheen: linear-gradient(110deg, transparent 38%, rgb(255 255 255 / 0.32) 50%, transparent 62%);
	--pt-btn-glow: 0 0 0 1px rgb(201 163 245 / 0.85), 0 0 18px rgb(190 115 251 / 0.6), 0 0 44px rgb(218 112 214 / 0.3);
	--pt-btn-glow-strong: 0 0 0 2px #eadbff, 0 0 24px rgb(190 115 251 / 0.95), 0 0 64px rgb(218 112 214 / 0.55);
	/* Fonts copied from poetictemperance.com, self-hosted in assets/fonts (see theme.json). */
	--pt-display: var(--wp--preset--font-family--display, "Cormorant Garamond", Garamond, serif);
	--pt-body: var(--wp--preset--font-family--body, Lato, system-ui, sans-serif);
	--pt-banner: var(--wp--preset--font-family--banner, Georgia, serif);
	--pt-script: var(--wp--preset--font-family--script, "Brush Script MT", Damion, cursive);
	--pt-radius: var(--wp--custom--radius, 10px);
	--pt-header-h: var(--wp--custom--header-height, 64px);
	--pt-gutter: var(--wp--preset--spacing--30, 1.25rem);
	--pt-content: var(--wp--style--global--content-size, 720px);
	--pt-wide: var(--wp--style--global--wide-size, 1200px);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pt-header-h) + 1rem); }

body {
	margin: 0;
	background: var(--pt-base);
	color: var(--pt-text);
	font-family: var(--pt-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
.entry-content img { display: inline-block; }

a { color: var(--pt-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--pt-secondary); }

:focus-visible { outline: 2px solid var(--pt-lilac); outline-offset: 3px; }

::selection { background: var(--pt-accent-deep); color: var(--pt-text); }

hr { border: 0; border-top: 1px solid var(--pt-line); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: 1rem; top: -100px; z-index: 1000;
	padding: 0.75rem 1rem; border-radius: var(--pt-radius);
	background: var(--pt-lilac); color: var(--pt-base); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.pt-icon { display: block; width: 24px; height: 24px; flex: none; }

/* ---------- Layout ---------- */

.wrap {
	width: 100%;
	max-width: calc(var(--pt-content) + 2 * var(--pt-gutter));
	margin-inline: auto;
	padding-inline: var(--pt-gutter);
}
.wrap--wide { max-width: calc(var(--pt-wide) + 2 * var(--pt-gutter)); }

.site-main { display: block; min-height: 60vh; padding-bottom: var(--wp--preset--spacing--50, 3rem); }
.site-main:focus { outline: none; }

/* Block content widths: normal blocks at reading width, wide and full alignments break out.
   (Groups inside get WordPress's own constrained layout.) */
.entry-content { padding-inline: var(--pt-gutter); }
.entry-content > * { max-width: var(--pt-content); margin-inline: auto; margin-block: 0; }
.entry-content > * + * { margin-block-start: var(--wp--style--block-gap, 1.25rem); }
/* Whole sections (groups) get more room around them. */
.entry-content > .wp-block-group + *,
.entry-content > * + .wp-block-group { margin-block-start: var(--wp--preset--spacing--50, 3rem); }
.entry-content > .alignwide,
.entry-content > .woocommerce { max-width: var(--pt-wide); }
.entry-content > .alignfull { max-width: none; margin-inline: calc(-1 * var(--pt-gutter)); }
.entry-content > .alignfull.has-background,
.entry-content > .alignfull.is-layout-constrained { padding-inline: var(--pt-gutter); }
.entry-content > .alignleft { float: left; margin-right: 1.5rem; }
.entry-content > .alignright { float: right; margin-left: 1.5rem; }
.entry-content > :first-child { margin-top: 0; }

/* ---------- Header ---------- */
/* One row at every width: the menu collapses behind a button before it can wrap,
   which fixes the old two-row menu spilling over the page. */

.header-sentinel { display: block; height: 1px; margin-bottom: -1px; }

/* Dark glass with a faint violet glow along the top, the logo's blue-to-violet rule along the
   bottom, and a thin line that fills left to right as you read down the page. Once you
   scroll, the header slims down and the rule starts to glow. */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background:
		radial-gradient(ellipse 60% 120% at 50% -40%, rgb(122 58 216 / 0.22), transparent 70%),
		linear-gradient(180deg, rgb(12 4 14 / 0.92), rgb(8 2 10 / 0.82));
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	transition: box-shadow 0.35s ease;
}
.site-header::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
	background: linear-gradient(90deg, transparent, #3d5bd8 20%, var(--pt-accent-deep) 50%, var(--pt-accent) 80%, transparent);
	opacity: 0.45; transition: opacity 0.35s ease, box-shadow 0.35s ease;
}
.site-header__progress {
	position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 2px; pointer-events: none;
	background: linear-gradient(90deg, #3d5bd8, var(--pt-accent-deep), var(--pt-accent));
	transform: scaleX(var(--pt-progress, 0)); transform-origin: 0 50%;
	box-shadow: 0 0 10px rgb(190 115 251 / 0.8);
	opacity: 0; transition: opacity 0.3s ease;
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.site-header.is-stuck { box-shadow: 0 10px 30px rgb(0 0 0 / 0.45); }
.site-header.is-stuck::after { opacity: 1; box-shadow: 0 0 14px rgb(190 115 251 / 0.55); }
.site-header.is-stuck .site-header__progress { opacity: 1; }

.site-header__inner {
	display: flex; align-items: center; gap: 1rem;
	max-width: calc(var(--pt-wide) + 2 * var(--pt-gutter));
	min-height: calc(var(--pt-header-h) + 16px);
	margin-inline: auto; padding-inline: var(--pt-gutter);
	transition: min-height 0.35s ease;
}
.site-header.is-stuck .site-header__inner { min-height: var(--pt-header-h); }

.site-brand { display: flex; align-items: center; color: var(--pt-text); text-decoration: none; margin-right: auto; }
.site-brand:hover { color: var(--pt-text); }
.site-brand__name { font-family: var(--pt-display); font-weight: 700; font-size: 1.4rem; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; }
/* Logo shown at the live site's size (276 x 69); the image is 4:1 with built-in padding.
   It glows on hover and shrinks a little once the header slims down. */
.site-brand__logo { display: block; width: 276px; max-width: none; height: auto; transition: width 0.35s ease, filter 0.4s ease; }
.site-brand:is(:hover, :focus-visible) .site-brand__logo { filter: drop-shadow(0 0 10px rgb(190 115 251 / 0.75)) drop-shadow(0 0 22px rgb(61 91 216 / 0.4)); }
@media (min-width: 1101px) { .site-header.is-stuck .site-brand__logo { width: 236px; } }
/* Mid-size screens: a slightly smaller logo and tighter menu so six links fit. */
@media (min-width: 1100px) and (max-width: 1400px) { .site-brand__logo { width: 220px; } .site-header.is-stuck .site-brand__logo { width: 210px; } .site-nav a { padding-inline: 0.5rem; font-size: 0.95rem; letter-spacing: 0.03em; } }
.site-brand { flex-shrink: 0; }
.site-brand { min-width: 0; }
/* Phones: the spaced-out capital name has to leave room for the account, cart and menu buttons. */
@media (max-width: 480px) {
	.site-header__inner { gap: 0.25rem; }
	.site-brand__name { font-size: 1rem; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.site-brand__logo { width: 150px; }
	.site-actions { gap: 0.2rem; }
	.site-action, .nav-toggle, .site-newsletter { width: 40px; height: 40px; }
	.site-action .pt-icon, .site-newsletter .pt-icon, .nav-toggle .pt-icon { width: 21px; height: 21px; }
}

.site-nav__list, .site-nav .sub-menu { list-style: none; margin: 0; padding: 0; }
.site-nav a {
	position: relative; display: block; padding: 0.5rem 0.75rem;
	color: var(--pt-text); text-decoration: none; white-space: nowrap;
	font-family: var(--pt-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase;
	border-radius: 8px;
	transition: color 0.3s ease, text-shadow 0.3s ease;
}
.site-nav a:hover, .site-nav .is-current > a { color: #fff; }
.site-nav a:is(:hover, :focus-visible) { text-shadow: 0 0 14px rgb(190 115 251 / 0.8); }

.site-actions { display: flex; align-items: center; gap: 0.4rem; }
/* Account and cart: glass circles that light up like the footer's social icons. */
.site-action {
	position: relative; display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 50%;
	color: var(--pt-text);
	box-shadow: inset 0 0 0 1px rgb(201 163 245 / 0.18);
	transition: box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.site-action .pt-icon { transition: translate 0.35s cubic-bezier(.3,1.6,.5,1); }
.site-action:is(:hover, :focus-visible) {
	color: #fff; outline: none;
	background: radial-gradient(circle at 50% 30%, rgb(190 115 251 / 0.45), rgb(74 43 196 / 0.4));
	box-shadow: inset 0 0 0 1px rgb(234 219 255 / 0.6), 0 0 20px rgb(190 115 251 / 0.5);
}
.site-action:is(:hover, :focus-visible) .pt-icon { translate: 0 -2px; }
.cart-count {
	position: absolute; top: -1px; right: -3px;
	min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
	background: var(--pt-btn-grad); background-size: 200% 100%; color: var(--pt-white);
	font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
	box-shadow: 0 0 0 2px #0b030c, 0 0 10px rgb(190 115 251 / 0.6);
}
.cart-count[hidden] { display: none; }
.cart-count.is-bumped { animation: pt-bump 0.6s cubic-bezier(.3,1.8,.5,1); }
@keyframes pt-bump { 30% { scale: 1.45; box-shadow: 0 0 0 2px #0b030c, 0 0 22px rgb(218 112 214 / 0.95); } }

/* Newsletter: a pill with a gradient edge; a sheen passes over it every few seconds. */
.site-newsletter {
	position: relative; overflow: hidden;
	display: inline-flex; align-items: center; gap: 0.5rem;
	height: 42px; padding: 0 1.05rem 0 0.85rem; margin-right: 0.35rem;
	border: 1.5px solid transparent; border-radius: 99px; cursor: pointer;
	color: var(--pt-text); font: 700 0.78rem/1 var(--pt-body); letter-spacing: 0.12em; text-transform: uppercase;
	background: linear-gradient(rgb(14 5 20 / 0.85), rgb(14 5 20 / 0.85)) padding-box, var(--pt-btn-grad) border-box;
	background-size: 100% 100%, 200% 100%;
	transition: box-shadow 0.3s ease, color 0.3s ease;
}
.site-newsletter::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 0.28) 50%, transparent 65%) -150% 0 / 60% 100% no-repeat;
	animation: pt-sheen 6s ease-in-out 2s infinite;
}
@keyframes pt-sheen { 0%, 70% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
.site-newsletter .pt-icon { width: 20px; height: 20px; transition: rotate 0.4s cubic-bezier(.3,1.6,.5,1), translate 0.4s ease; }
.site-newsletter:is(:hover, :focus-visible) {
	color: #fff; outline: none;
	background: var(--pt-btn-grad) border-box; background-size: 200% 100%;
	box-shadow: var(--pt-btn-glow);
}
.site-newsletter:is(:hover, :focus-visible) .pt-icon { rotate: -12deg; translate: 0 -1px; }
.site-newsletter:active { scale: 0.96; box-shadow: var(--pt-btn-glow-strong); }
@media (max-width: 1240px) {
	.site-newsletter { width: 44px; height: 44px; padding: 0; margin-right: 0; justify-content: center; }
	.site-newsletter__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.nav-toggle {
	display: grid; place-items: center; order: 3;
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: var(--pt-text); cursor: pointer;
	box-shadow: inset 0 0 0 1px rgb(201 163 245 / 0.18);
	transition: box-shadow 0.3s ease, background 0.3s ease;
}
.nav-toggle:is(:hover, :focus-visible), .nav-toggle[aria-expanded="true"] {
	outline: none; background: rgb(190 115 251 / 0.15);
	box-shadow: inset 0 0 0 1px rgb(234 219 255 / 0.55), 0 0 18px rgb(190 115 251 / 0.4);
}
.nav-toggle .pt-icon { transition: rotate 0.35s ease; }
.nav-toggle[aria-expanded="true"] .pt-icon { rotate: 90deg; }
.nav-toggle__close, .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Small screens: the menu is a full-width panel under the header. */
@media (max-width: 1099px) {
	.site-nav {
		position: absolute; top: 100%; left: 0; right: 0;
		max-height: calc(100vh - var(--pt-header-h)); overflow-y: auto;
		padding: 0.5rem var(--pt-gutter) 1.5rem;
		background:
			radial-gradient(ellipse 80% 50% at 50% 0%, rgb(122 58 216 / 0.2), transparent 70%),
			#08020a;
		border-bottom: 1px solid rgb(201 163 245 / 0.3);
		box-shadow: 0 30px 60px rgb(0 0 0 / 0.6);
		display: none;
	}
	.site-nav.is-open { display: block; }
	.site-nav a {
		padding: 0.95rem 0; font-size: 1.2rem; border-radius: 0;
		border-bottom: 1px solid rgb(201 163 245 / 0.14);
	}
	.site-nav a::after { content: "✦"; float: right; font-size: 0.75em; color: var(--pt-lilac); opacity: 0.35; transition: opacity 0.3s, rotate 0.4s; }
	.site-nav a:is(:hover, :focus-visible)::after { opacity: 1; rotate: 90deg; }
	.site-nav .sub-menu a { padding-left: 1rem; font-size: 1rem; color: var(--pt-muted); }
	/* Menu items slide in one after another. */
	.site-nav.is-open .site-nav__list > li { animation: pt-slide-in 0.45s cubic-bezier(.2,.7,.2,1) both; }
	.site-nav.is-open .site-nav__list > li:nth-child(2) { animation-delay: 0.05s; }
	.site-nav.is-open .site-nav__list > li:nth-child(3) { animation-delay: 0.1s; }
	.site-nav.is-open .site-nav__list > li:nth-child(4) { animation-delay: 0.15s; }
	.site-nav.is-open .site-nav__list > li:nth-child(5) { animation-delay: 0.2s; }
	.site-nav.is-open .site-nav__list > li:nth-child(n+6) { animation-delay: 0.25s; }
	@keyframes pt-slide-in { from { opacity: 0; translate: -18px 0; } }
}

/* Large screens: inline menu with hover/focus dropdowns. */
@media (min-width: 1100px) {
	.nav-toggle { display: none; }
	.site-nav { order: 0; }
	.site-nav__list { display: flex; align-items: center; gap: 0.15rem; }
	.site-nav .has-children { position: relative; }
	.site-nav .sub-menu {
		position: absolute; top: 100%; left: 0; min-width: 220px;
		padding: 0.5rem; border: 1px solid var(--pt-line); border-radius: var(--pt-radius);
		background: var(--pt-surface); box-shadow: 0 12px 32px rgb(0 0 0 / 0.35);
		opacity: 0; visibility: hidden; transform: translateY(6px);
		transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
	}
	.site-nav .has-children:hover > .sub-menu,
	.site-nav .has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

	/* Hover: a gradient line grows out from the middle and a small star appears above.
	   The current page keeps its line and star. */
	.site-nav__list > li > a::after {
		content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.2rem; height: 1.5px;
		background: linear-gradient(90deg, #3d5bd8, var(--pt-accent-deep), var(--pt-accent));
		box-shadow: 0 0 8px rgb(190 115 251 / 0.7);
		scale: 0 1; transition: scale 0.35s cubic-bezier(.2,.7,.2,1);
	}
	.site-nav__list > li > a::before {
		content: "✦"; position: absolute; left: 50%; top: -0.35rem; translate: -50% 4px;
		font-size: 0.55rem; color: var(--pt-lilac); text-shadow: 0 0 8px rgb(190 115 251 / 0.9);
		opacity: 0; transition: opacity 0.3s ease, translate 0.35s cubic-bezier(.3,1.6,.5,1);
	}
	.site-nav__list > li > a:is(:hover, :focus-visible)::after, .site-nav__list > .is-current > a::after { scale: 1 1; }
	.site-nav__list > li > a:is(:hover, :focus-visible)::before, .site-nav__list > .is-current > a::before { opacity: 1; translate: -50% 0; }
}

/* ---------- Pop-up dialog (newsletter) ---------- */

html:has(dialog[open]) { overflow: hidden; }
.pt-dialog {
	width: min(560px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
	padding: 0; border: 0; border-radius: 18px; overflow: auto;
	color: var(--pt-text);
	background: radial-gradient(ellipse 90% 60% at 50% 0%, rgb(122 58 216 / 0.25), transparent 70%), #12060f;
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.35), 0 0 60px rgb(190 115 251 / 0.25), 0 30px 80px rgb(0 0 0 / 0.7);
}
.pt-dialog::backdrop { background: rgb(5 1 8 / 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pt-dialog[open] { animation: pt-dialog-in 0.45s cubic-bezier(.2,.8,.2,1); }
.pt-dialog[open]::backdrop { animation: pt-fade-in 0.35s ease; }
@keyframes pt-dialog-in { from { opacity: 0; translate: 0 18px; scale: 0.96; } }
@keyframes pt-fade-in { from { opacity: 0; } }

.pt-dialog__art {
	height: 150px;
	background: linear-gradient(180deg, transparent 40%, #12060f), url("../images/offer-soulmate-letters.webp") 78% 45% / cover no-repeat;
}
.pt-dialog__close-form { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; margin: 0; }
.pt-dialog__close {
	display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
	color: var(--pt-text); background: rgb(10 3 12 / 0.6); box-shadow: inset 0 0 0 1px rgb(201 163 245 / 0.35);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	transition: rotate 0.35s ease, box-shadow 0.3s ease;
}
.pt-dialog__close:is(:hover, :focus-visible) { rotate: 90deg; outline: none; box-shadow: inset 0 0 0 1px var(--pt-lilac), 0 0 16px rgb(190 115 251 / 0.6); }
.pt-dialog__body { padding: 0.25rem clamp(1.25rem, 5vw, 2.25rem) 2rem; text-align: center; }
.pt-dialog__eyebrow { margin: -0.5rem 0 0.5rem; color: var(--pt-lilac); font: 700 0.75rem/1 var(--pt-body); letter-spacing: 0.3em; text-transform: uppercase; }
.pt-dialog__title { margin: 0; font: 700 clamp(1.7rem, 5vw, 2.2rem)/1.1 var(--pt-banner) !important; text-transform: uppercase; letter-spacing: 0.03em; }
.pt-dialog__text { margin: 0.7rem auto 1.4rem; max-width: 40ch; color: #e1d3c1; }

/* ---------- Newsletter form ---------- */

.pt-newsletter { position: relative; display: grid; gap: 0.9rem; text-align: left; }
.pt-newsletter__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pt-newsletter__fields { display: grid; gap: 0.75rem; }
@media (min-width: 520px) { .pt-newsletter__fields { grid-template-columns: 1fr 1.3fr; } }

/* Floating labels: the label sits in the box, then floats up when you type. */
.pt-field { position: relative; }
.pt-newsletter .pt-field input {
	width: 100%; min-height: 54px; padding: 1.35rem 0.95rem 0.45rem;
	color: var(--pt-text); background: rgb(255 255 255 / 0.04);
	border: 1px solid rgb(201 163 245 / 0.28); border-radius: 12px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.pt-field label {
	position: absolute; left: 0.95rem; top: 50%; translate: 0 -50%; pointer-events: none;
	color: var(--pt-muted); font-size: 0.95rem;
	transition: top 0.25s ease, font-size 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.pt-newsletter .pt-field input:focus {
	outline: none; background: rgb(190 115 251 / 0.07);
	border-color: var(--pt-lilac); box-shadow: 0 0 0 3px rgb(190 115 251 / 0.25), 0 0 20px rgb(190 115 251 / 0.25);
}
.pt-newsletter .pt-field input:focus + label, .pt-newsletter .pt-field input:not(:placeholder-shown) + label {
	top: 0.95rem; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pt-lilac);
}
.pt-newsletter .pt-field input:not(:placeholder-shown):not(:focus):invalid { border-color: #ff8fab; }

/* Checkbox: a small box that fills with the gradient and draws a tick. */
.pt-newsletter__consent { position: relative; display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer; font-size: 0.9rem; color: #e1d3c1; line-height: 1.45; }
.pt-newsletter__consent input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.pt-newsletter__box {
	flex: none; width: 22px; height: 22px; margin-top: 0.05rem; border-radius: 6px;
	box-shadow: inset 0 0 0 1.5px rgb(201 163 245 / 0.5);
	transition: background 0.25s ease, box-shadow 0.25s ease;
	display: grid; place-items: center;
}
.pt-newsletter__box::after {
	content: ""; width: 10px; height: 5px; margin-top: -3px;
	border-left: 2px solid #fff; border-bottom: 2px solid #fff; rotate: -45deg; scale: 0;
	transition: scale 0.3s cubic-bezier(.3,1.8,.5,1);
}
.pt-newsletter__consent input:checked + .pt-newsletter__box { background: var(--pt-btn-grad); background-size: 200% 100%; box-shadow: 0 0 12px rgb(190 115 251 / 0.6); }
.pt-newsletter__consent input:checked + .pt-newsletter__box::after { scale: 1; }
.pt-newsletter__consent input:focus-visible + .pt-newsletter__box { box-shadow: inset 0 0 0 1.5px var(--pt-lilac), 0 0 0 3px rgb(190 115 251 / 0.35); }

.pt-newsletter__submit { position: relative; width: 100%; min-height: 52px; justify-content: center; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem; }
.pt-newsletter__spinner {
	position: absolute; width: 20px; height: 20px; border-radius: 50%;
	border: 2px solid rgb(255 255 255 / 0.35); border-top-color: #fff; opacity: 0;
}
.pt-newsletter.is-busy .pt-newsletter__label { opacity: 0; }
.pt-newsletter.is-busy .pt-newsletter__spinner { opacity: 1; animation: pt-spin 0.8s linear infinite; }
.pt-newsletter.is-busy .pt-newsletter__submit { pointer-events: none; }

.pt-newsletter__status { margin: 0; min-height: 1.4em; text-align: center; font-size: 0.95rem; }
.pt-newsletter.is-error .pt-newsletter__status { color: #ff9fb8; }
/* Done: the form fields fold away and the thank-you note takes their place with a star. */
.pt-newsletter.is-done > :not(.pt-newsletter__status) { display: none; }
.pt-newsletter.is-done .pt-newsletter__status {
	padding: 1.25rem 1rem 0.5rem; font: 400 2rem/1.25 var(--pt-script); color: var(--pt-lilac);
	animation: pt-dialog-in 0.6s cubic-bezier(.2,.8,.2,1);
}
.pt-newsletter.is-done .pt-newsletter__status::before {
	content: "✦"; display: block; margin-bottom: 0.4rem; font: 400 1.6rem/1 var(--pt-body); color: #fff;
	text-shadow: 0 0 14px rgb(190 115 251 / 0.95), 0 0 32px rgb(218 112 214 / 0.7);
	animation: pt-twinkle 1.6s ease-in-out infinite;
}
@keyframes pt-twinkle { 50% { scale: 1.25; rotate: 45deg; } }
.pt-newsletter--external { text-align: left; }

/* ---------- Page and post headers ---------- */

.page-header, .entry__header { padding-block: var(--wp--preset--spacing--50, 3rem) var(--wp--preset--spacing--30, 1.5rem); }
.page-title, .entry__title { margin: 0; font-family: var(--pt-display); font-weight: 700; font-size: var(--wp--preset--font-size--xx-large, 3rem); line-height: 1.1; }
.page-description { margin-top: 0.75rem; color: var(--pt-muted); }
.entry__eyebrow, .pt-eyebrow, .card__meta, .entry__meta {
	margin: 0 0 0.6rem;
	color: var(--pt-lilac); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.entry__eyebrow a { color: inherit; text-decoration: none; }
.entry__meta { margin: 0.9rem 0 0; color: var(--pt-muted); }
.entry__media { margin-block: 0 var(--wp--preset--spacing--40, 2rem); }
.entry__media img { width: 100%; border-radius: var(--pt-radius); }
.entry--landing .entry__content > :first-child { margin-top: 0; }

.empty { color: var(--pt-muted); }

/* ---------- Pattern helpers ---------- */

.pt-hero { padding-block: var(--wp--preset--spacing--60, 5rem); }
/* Hero over a photo (cover block): darker behind the words, the scene still glowing at the edges. */
.wp-block-cover.pt-hero { padding-inline: var(--pt-gutter); color: var(--pt-text); }
.wp-block-cover.pt-hero .wp-block-cover__background.has-background-dim {
	opacity: 1;
	background-color: transparent !important; /* the overlay colour class is !important; the gradient below does the darkening */
	background-image: radial-gradient(ellipse 70% 85% at 50% 50%, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.38) 75%, rgb(0 0 0 / 0.25)),
		linear-gradient(to bottom, transparent 70%, var(--pt-base));
}
.wp-block-cover.pt-hero .wp-block-cover__inner-container { text-shadow: 0 2px 12px rgb(0 0 0 / 0.6); }
.wp-block-cover.pt-hero .wp-block-button__link { text-shadow: none; }
@media (max-width: 600px) { .wp-block-cover.pt-hero { min-height: 560px !important; } }
/* Live-site banner styles: Georgia capitals for the title, Brush Script for the tagline. */
.pt-banner-title { font-family: var(--pt-banner) !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.pt-script-line { font-family: var(--pt-script) !important; font-weight: 400; color: var(--pt-accent); line-height: 1.2; }
.pt-card {
	padding: 1.5rem; display: flex; flex-direction: column;
	background: var(--pt-surface); border: 1px solid var(--pt-line); border-radius: var(--pt-radius);
}
.pt-card > .wp-block-buttons { margin-top: auto; padding-top: 0.5rem; }
.pt-price { color: var(--pt-lilac); font-weight: 700; }
.pt-offers { align-items: stretch !important; }

/* ---------- "Work with me": picture cards ---------- */

/* Anything a link jumps to (e.g. /#work-with-me from the menu) stops below the sticky header. */
:target, [id].wp-block-group, [id].wp-block-cover { scroll-margin-top: calc(var(--pt-header-h) + var(--wp-admin--admin-bar--height, 0px) + 1.5rem); }

.pt-offers-section {
	position: relative;
	margin-top: var(--wp--preset--spacing--60, 5rem) !important;
}
/* A faint violet haze behind the section, like light through a window. */
.pt-offers-section::before {
	content: ""; position: absolute; inset: -4rem 0 auto; height: 70%; z-index: -1; pointer-events: none;
	background: radial-gradient(ellipse 60% 70% at 50% 0%, rgb(108 92 231 / 0.18), transparent 70%);
}
.pt-section-title { font-family: var(--pt-banner) !important; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.25rem !important; }
/* The logo's blue-to-violet rule with a small diamond, under the heading. */
.pt-section-title::after {
	content: "✦"; display: block; width: min(260px, 60%); margin: 0.7rem auto 0;
	color: var(--pt-lilac); font: 400 0.9rem/1 var(--pt-body); letter-spacing: 0; text-align: center;
	background:
		linear-gradient(90deg, transparent, #3d5bd8 15%, var(--pt-accent-deep) 46%, transparent 46% 54%, var(--pt-accent-deep) 54%, #3d5bd8 85%, transparent) center / 100% 1.5px no-repeat;
}
.pt-offers { gap: 1.5rem !important; margin-top: 2.5rem !important; }

.wp-block-cover.pt-offer {
	height: 100%; min-height: 540px; margin: 0; padding: 2.5rem 1.75rem;
	border-radius: 14px; overflow: hidden; isolation: isolate;
	color: var(--pt-text);
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.18), 0 18px 40px rgb(0 0 0 / 0.55);
	transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s ease;
}
/* Slow push-in on the picture. */
.wp-block-cover.pt-offer > .wp-block-cover__image-background { transition: transform 1.6s cubic-bezier(.2,.7,.2,1), filter 0.8s ease; filter: saturate(0.95); }
/* Darker in the middle where the words sit, glowing at the edges. */
.wp-block-cover.pt-offer > .wp-block-cover__background.has-background-dim {
	opacity: 1;
	background-color: transparent !important;
	background-image:
		radial-gradient(ellipse 80% 48% at 50% 52%, rgb(6 2 10 / 0.68), rgb(6 2 10 / 0.3) 72%, rgb(6 2 10 / 0.08)),
		linear-gradient(to top, rgb(20 4 30 / 0.7), transparent 35%);
	transition: opacity 0.6s ease;
}
/* An old picture-frame line inset from the edge... */
.wp-block-cover.pt-offer::before {
	content: ""; position: absolute; inset: 12px; z-index: 1; pointer-events: none;
	border: 1px solid rgb(234 219 255 / 0.22); border-radius: 8px;
	transition: border-color 0.5s ease, box-shadow 0.5s ease, inset 0.5s ease;
}
/* ...and candlelight that rises from the bottom on hover. */
.wp-block-cover.pt-offer::after {
	content: ""; position: absolute; inset: auto -10% -35% -10%; height: 70%; z-index: 1; pointer-events: none;
	background: radial-gradient(ellipse at 50% 100%, rgb(218 112 214 / 0.55), rgb(122 58 216 / 0.25) 45%, transparent 70%);
	mix-blend-mode: screen; opacity: 0;
	transition: opacity 0.6s ease;
}
.wp-block-cover.pt-offer > .wp-block-cover__inner-container {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
	text-shadow: 0 2px 14px rgb(0 0 0 / 0.75);
}

.pt-offer__eyebrow {
	margin: 0 !important; color: var(--pt-lilac);
	font: 700 0.78rem/1 var(--pt-body); letter-spacing: 0.32em; text-transform: uppercase;
}
.pt-offer__eyebrow::before, .pt-offer__eyebrow::after { content: "✦"; margin: 0 0.6em; font-size: 0.7em; opacity: 0.8; letter-spacing: 0; }
.pt-offer__title {
	margin: 0 !important;
	max-width: 100%; padding-inline: 0.1em; /* room for the last letter's edge inside the clipped lettering */
	font-family: var(--pt-banner) !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
	font-size: clamp(1.35rem, 1.75vw, 1.8rem) !important; line-height: 1.15;
	/* Cream lettering with a lilac light that passes over it on hover. */
	background: linear-gradient(100deg, var(--pt-text) 0 40%, #eadbff 47%, #d9b8ff 50%, #eadbff 53%, var(--pt-text) 60% 100%) 100% 0 / 260% 100% no-repeat;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	text-shadow: none; filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.8));
	transition: background-position 1.1s ease;
}
.pt-offer__text { max-width: 30ch; margin: 0.25rem auto 0.75rem !important; color: #e9ddcd; font-size: 1rem; line-height: 1.55; }
.pt-offer__buttons { gap: 0.6rem !important; margin-top: 0.25rem; }
.pt-offer__buttons .wp-block-button__link {
	padding: 0.75rem 1.2rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; text-shadow: none;
}
.pt-offer__buttons .wp-block-button__link::after { content: "→"; display: inline-block; margin-left: 0.55em; transition: transform 0.3s ease; }
.pt-offer__buttons .wp-block-button__link:hover::after { transform: translateX(4px); }

/* Hover or keyboard focus anywhere in the card lights it up. */
.wp-block-cover.pt-offer:is(:hover, :focus-within) {
	transform: translateY(-6px);
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.6), 0 0 34px rgb(190 115 251 / 0.35), 0 26px 60px rgb(0 0 0 / 0.65);
}
.wp-block-cover.pt-offer:is(:hover, :focus-within) > .wp-block-cover__image-background { transform: scale(1.08); filter: saturate(1.15); }
.wp-block-cover.pt-offer:is(:hover, :focus-within)::before {
	inset: 9px; border-color: rgb(234 219 255 / 0.6); box-shadow: inset 0 0 24px rgb(190 115 251 / 0.25);
}
.wp-block-cover.pt-offer:is(:hover, :focus-within)::after { opacity: 1; animation: pt-candle 3.2s ease-in-out infinite; }
.wp-block-cover.pt-offer:is(:hover, :focus-within) .pt-offer__title { background-position: 0% 0; }
@keyframes pt-candle {
	0%, 100% { opacity: 0.85; } 22% { opacity: 1; } 41% { opacity: 0.75; } 63% { opacity: 0.95; } 80% { opacity: 0.8; }
}

/* Cards rise in one after another as the section scrolls into view (set up by main.js,
   so they're never hidden if the script doesn't run). */
.pt-offers.is-armed .pt-offer { opacity: 0; transform: translateY(28px); }
.pt-offers.is-armed .pt-offer.is-in {
	opacity: 1; transform: none;
	transition: opacity 0.8s ease var(--pt-delay, 0s), transform 0.8s cubic-bezier(.2,.7,.2,1) var(--pt-delay, 0s), box-shadow 0.5s ease;
}
.pt-offers.is-armed .pt-offer.is-in:is(:hover, :focus-within) { transform: translateY(-6px); transition-delay: 0s; }

@media (max-width: 781px) {
	.wp-block-cover.pt-offer { min-height: 440px !important; padding-inline: 1.25rem; }
	.pt-offer__buttons .wp-block-button__link { padding-inline: 1rem; letter-spacing: 0.06em; }
}
.pt-offer__buttons .wp-block-button__link::after { white-space: nowrap; }
@media (min-width: 782px) and (max-width: 1023px) {
	.wp-block-cover.pt-offer { padding-inline: 1.1rem; }
	.pt-offer__eyebrow { letter-spacing: 0.2em; }
	.pt-offer__buttons .wp-block-button__link { padding-inline: 0.85rem; letter-spacing: 0.04em; font-size: 0.75rem; }
}

/* ---------- Buttons: purple gradient that lights up and glows ----------
   Covers block buttons, plain .button links, form submits, Gravity Forms, MemberPress and
   WooCommerce block buttons (classic Woo buttons are in woocommerce.css). Hover: a light
   sheen sweeps across and the glow comes on. Click: brighter glow, a small press. */

.button, button.submit, input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	min-height: 48px; padding: 0.75rem 1.5rem; border: 0; border-radius: var(--pt-radius);
	font: 700 1rem/1.2 var(--pt-body); text-decoration: none; cursor: pointer;
}

.wp-element-button, .wp-block-button__link,
.button, button.submit, input[type="submit"],
.gform_wrapper .gform_button, .gform_wrapper .gform_next_button, .gform_wrapper .gform_previous_button,
.mepr-submit, .mepr_submit,
.wc-block-components-button:not(.is-link) {
	background-color: #7a3ad8;
	background-image: var(--pt-btn-sheen), var(--pt-btn-grad);
	background-size: 250% 100%, 200% 100%;
	background-position: 140% 0, 0% 0;
	background-repeat: no-repeat;
	color: var(--pt-white);
	border-color: transparent;
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.25), 0 4px 14px rgb(74 43 196 / 0.3);
	transition: background-position 0.7s ease, box-shadow 0.3s ease, transform 0.15s ease, filter 0.3s ease;
}

.wp-element-button:is(:hover, :focus-visible), .wp-block-button__link:is(:hover, :focus-visible),
.button:is(:hover, :focus-visible), button.submit:is(:hover, :focus-visible), input[type="submit"]:is(:hover, :focus-visible),
.gform_wrapper :is(.gform_button, .gform_next_button, .gform_previous_button):is(:hover, :focus-visible),
:is(.mepr-submit, .mepr_submit):is(:hover, :focus-visible),
.wc-block-components-button:not(.is-link):is(:hover, :focus-visible) {
	color: var(--pt-white);
	background-position: -40% 0, 100% 0;
	box-shadow: var(--pt-btn-glow);
	filter: brightness(1.1) saturate(1.1);
	outline: none;
}

.wp-element-button:active, .wp-block-button__link:active,
.button:active, button.submit:active, input[type="submit"]:active,
.gform_wrapper :is(.gform_button, .gform_next_button, .gform_previous_button):active,
:is(.mepr-submit, .mepr_submit):active,
.wc-block-components-button:not(.is-link):active {
	transform: scale(0.97);
	box-shadow: var(--pt-btn-glow-strong);
	filter: brightness(1.2) saturate(1.15);
	transition-duration: 0.7s, 0.08s, 0.08s, 0.08s;
}

/* Outline buttons: dark glass with a gradient edge; they fill with the gradient on hover. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--pt-text);
	border: 1.5px solid transparent;
	background-image: linear-gradient(rgb(12 4 18 / 0.6), rgb(12 4 18 / 0.6)), var(--pt-btn-grad);
	background-size: 100% 100%, 200% 100%;
	background-position: 0 0, 0% 0;
	background-origin: border-box;
	background-clip: padding-box, border-box;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible, :active) {
	background-image: var(--pt-btn-sheen), var(--pt-btn-grad);
	background-size: 250% 100%, 200% 100%;
	background-clip: border-box;
}

/* A colour picked for one button in the editor still wins over the gradient. */
.wp-block-button__link.has-background { background-image: none; }

:is(.wp-element-button, .wp-block-button__link, .button, input[type="submit"]):disabled,
:is(.wp-element-button, .wp-block-button__link, .button)[aria-disabled="true"] {
	filter: grayscale(0.6); opacity: 0.55; box-shadow: none; transform: none; cursor: not-allowed;
}

/* ---------- Forms (search, comments, MemberPress) ---------- */

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"],
input[type="tel"], input[type="number"], input[type="date"], select, textarea {
	width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
	background: var(--pt-surface); color: var(--pt-text);
	border: 1px solid var(--pt-line); border-radius: var(--pt-radius);
	font: 400 1rem/1.4 var(--pt-body);
}
textarea { min-height: 140px; }
input:focus, select:focus, textarea:focus { border-color: var(--pt-accent); outline: 2px solid color-mix(in srgb, var(--pt-accent) 40%, transparent); outline-offset: 0; }
label { font-weight: 500; }

.search-form { display: flex; gap: 0.5rem; margin-top: 1rem; }
.search-form label { flex: 1; }

/* ---------- Single post ---------- */

.entry__footer { padding-top: var(--wp--preset--spacing--40, 2rem); }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 2rem; }
.tag-list a { display: inline-block; padding: 0.3rem 0.75rem; border: 1px solid var(--pt-line); border-radius: 99px; color: var(--pt-muted); text-decoration: none; font-size: 0.875rem; }
.tag-list a:hover { border-color: var(--pt-lilac); color: var(--pt-lilac); }

.post-nav { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding-top: 2rem; border-top: 1px solid var(--pt-line); }
.post-nav a { display: block; color: var(--pt-text); text-decoration: none; font-family: var(--pt-display); font-size: 1.15rem; }
.post-nav a:hover { color: var(--pt-lilac); }
.post-nav span { display: block; margin-bottom: 0.25rem; color: var(--pt-muted); font-family: var(--pt-body); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; }
.post-nav__next { text-align: right; }

/* ---------- Comments ---------- */

.comments-area { padding-top: var(--wp--preset--spacing--40, 2rem); }
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; padding-left: 1.5rem; border-left: 1px solid var(--pt-line); }
.comment-body { padding: 1.25rem 0; border-bottom: 1px solid var(--pt-line); }
.comment-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--pt-muted); }
.comment-meta a { color: inherit; }
.comment-author .avatar { border-radius: 50%; }
.comment-form p { margin: 0 0 1rem; }
.comment-form label { display: block; margin-bottom: 0.35rem; }

/* ---------- Pagination ---------- */

.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; list-style: none; padding: 0; margin: 3rem 0 0; }
.pagination a, .pagination span {
	display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 0.9rem;
	border: 1px solid var(--pt-line); border-radius: var(--pt-radius);
	color: var(--pt-text); text-decoration: none;
}
.pagination a:hover { border-color: var(--pt-lilac); color: var(--pt-lilac); }
.pagination .current { background: var(--pt-accent-deep); border-color: var(--pt-accent-deep); }

/* ---------- 404 ---------- */

.not-found { padding-block: var(--wp--preset--spacing--60, 5rem); text-align: center; }
.not-found .search-form { max-width: 480px; margin: 2rem auto; }

/* ---------- Footer ---------- */

/* A moonlit Southern Gothic night under the page: the soundscapes picture (moon, moss,
   plantation house) fades up from black, wisps of light drift over it, and the logo's
   blue-to-violet rule crowns the top edge. */

.site-footer {
	position: relative; isolation: isolate; overflow: hidden;
	margin-top: var(--wp--preset--spacing--40, 2rem);
	background: linear-gradient(180deg, var(--pt-base) 0%, #12060d 45%, #1c050d 100%);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* The crest: a gradient rule with a glowing star in the middle. */
.site-footer::before {
	content: "✦"; position: absolute; top: 1.25rem; left: 50%; z-index: 2; translate: -50% 0;
	width: min(560px, 80%); text-align: center;
	font: 400 1rem/1 var(--pt-body); color: var(--pt-lilac);
	text-shadow: 0 0 12px rgb(190 115 251 / 0.9), 0 0 28px rgb(218 112 214 / 0.6);
	background: linear-gradient(90deg, transparent, #3d5bd8 18%, var(--pt-accent-deep) 44%, transparent 46% 54%, var(--pt-accent-deep) 56%, #3d5bd8 82%, transparent) center / 100% 1px no-repeat;
}

.site-footer__scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.site-footer__scene::before { /* the picture, faded in from black */
	content: ""; position: absolute; inset: 0;
	background: url("../images/offer-soundscapes.webp") center 32% / cover no-repeat;
	opacity: 0.38; filter: saturate(0.9);
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 55%, transparent 100%);
}
.site-footer__scene::after { /* darker in the middle so the words stay crisp */
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(ellipse 60% 60% at 50% 55%, rgb(10 3 8 / 0.75), transparent 75%);
}
/* Wisps: a few dots of pale lilac light, each layer drifting and flickering on its own clock. */
.site-footer__wisps {
	position: absolute; top: 0; left: 0; width: 3px; height: 3px; border-radius: 50%;
	background: transparent; color: rgb(234 219 255 / 0.95);
	box-shadow:
		8vw 140px 6px 1px, 17vw 360px 6px 1px, 24vw 70px 6px 1px, 33vw 270px 6px 1px,
		41vw 430px 6px 1px, 49vw 160px 6px 1px, 57vw 320px 6px 1px, 63vw 50px 6px 1px,
		71vw 230px 6px 1px, 78vw 400px 6px 1px, 86vw 120px 6px 1px, 93vw 290px 6px 1px,
		12vw 480px 6px 1px, 67vw 500px 6px 1px;
	animation: pt-wisp 11s ease-in-out infinite alternate;
}
.site-footer__wisps--far {
	width: 2px; height: 2px; color: rgb(201 163 245 / 0.7);
	box-shadow:
		4vw 250px 4px, 14vw 90px 4px, 21vw 420px 4px, 29vw 180px 4px, 37vw 30px 4px,
		45vw 340px 4px, 53vw 260px 4px, 60vw 450px 4px, 69vw 130px 4px, 75vw 310px 4px,
		82vw 40px 4px, 89vw 380px 4px, 97vw 200px 4px;
	animation-duration: 17s; animation-delay: -6s;
}
@keyframes pt-wisp {
	0% { translate: 0 0; opacity: 0.35; }
	20% { opacity: 1; }
	45% { translate: 22px -30px; opacity: 0.5; }
	70% { opacity: 0.95; }
	100% { translate: -14px -58px; opacity: 0.4; }
}

.site-footer__invite, .site-footer__inner, .site-footer__legal {
	position: relative; max-width: calc(var(--pt-wide) + 2 * var(--pt-gutter));
	margin-inline: auto; padding-inline: var(--pt-gutter);
}

/* The gift invitation (from the announcement bar's text and link). */
.site-footer__invite { padding-block: clamp(4.5rem, 9vw, 6.5rem) 1rem; text-align: center; }
.site-footer__eyebrow, .site-footer__heading {
	margin: 0 0 0.9rem; color: var(--pt-lilac);
	font: 700 0.78rem/1 var(--pt-body); letter-spacing: 0.3em; text-transform: uppercase;
}
.site-footer__invite-title {
	margin: 0 auto 1.6rem; max-width: 22ch;
	font: 700 clamp(1.7rem, 3.6vw, 2.75rem)/1.12 var(--pt-banner); text-transform: uppercase; letter-spacing: 0.03em;
	color: var(--pt-text); text-shadow: 0 2px 18px rgb(0 0 0 / 0.8), 0 0 40px rgb(190 115 251 / 0.25);
}
.site-footer__invite-button { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.7rem; border-radius: var(--pt-radius); text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9rem; }
.site-footer__invite-button .pt-icon { width: 18px; height: 18px; transition: translate 0.3s ease; }
.site-footer__invite-button:hover .pt-icon { translate: 4px 0; }

/* Columns. */
.site-footer__inner {
	display: grid; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
	text-align: center; justify-items: center;
}
@media (min-width: 782px) {
	.site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; text-align: left; justify-items: start; align-items: start; }
}
.site-footer__logo { display: inline-block; }
.site-footer__logo img { display: block; width: 240px; height: auto; transition: filter 0.4s ease; }
.site-footer__logo:hover img { filter: drop-shadow(0 0 12px rgb(190 115 251 / 0.7)); }
.site-footer__tagline { margin: 0.6rem 0 0; font: 400 1.7rem/1.2 var(--pt-script); color: var(--pt-accent); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }

/* Links: a star slides in and a gradient underline draws across. */
.footer-links { display: grid; gap: 0.15rem; }
.footer-links a, .legal-links a {
	position: relative; display: inline-block; padding: 0.35rem 0; color: var(--pt-text); text-decoration: none;
	background: linear-gradient(90deg, #3d5bd8, var(--pt-accent-deep), var(--pt-accent)) 0 85% / 0% 1.5px no-repeat;
	transition: background-size 0.4s cubic-bezier(.2,.7,.2,1), color 0.3s ease, translate 0.3s ease;
}
.footer-links a::before {
	content: "✦"; position: absolute; left: -1.1em; top: 50%; translate: 0 -50%;
	font-size: 0.7em; color: var(--pt-lilac); opacity: 0; scale: 0.4;
	transition: opacity 0.3s ease, scale 0.35s cubic-bezier(.3,1.6,.5,1);
}
.footer-links a:is(:hover, :focus-visible), .legal-links a:is(:hover, :focus-visible) { color: #fff; background-size: 100% 1.5px; }
.footer-links a:is(:hover, :focus-visible) { translate: 0.9em 0; }
.footer-links a:is(:hover, :focus-visible)::before { opacity: 1; scale: 1; }
@media (max-width: 781px) { .footer-links a:is(:hover, :focus-visible) { translate: 0 0; } .footer-links a::before { display: none; } }

/* Social icons: glass circles; hover spins a gradient ring, fills with colour, lifts the icon
   and shows the name in a little tag underneath. */
.social-icons { display: flex; flex-wrap: wrap; gap: 0.85rem; }
@media (max-width: 781px) { .social-icons { justify-content: center; } }
.social-icon {
	position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	color: var(--pt-text); text-decoration: none;
	background: rgb(255 255 255 / 0.04);
	box-shadow: inset 0 0 0 1px rgb(201 163 245 / 0.3);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	transition: box-shadow 0.35s ease, background 0.35s ease, color 0.3s ease;
}
.social-icon::before {
	content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
	background: conic-gradient(from 0deg, #3d5bd8, var(--pt-accent-deep), var(--pt-accent), #3d5bd8);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity 0.35s ease;
}
.social-icon::after {
	content: attr(data-label); position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% -4px;
	padding: 0.25rem 0.55rem; border-radius: 6px; white-space: nowrap; pointer-events: none;
	font: 700 0.7rem/1.2 var(--pt-body); letter-spacing: 0.08em; text-transform: uppercase;
	color: #fff; background: #2a1140; box-shadow: 0 0 0 1px rgb(201 163 245 / 0.35);
	opacity: 0; transition: opacity 0.25s ease, translate 0.25s ease;
}
.social-icon .pt-icon { width: 22px; height: 22px; transition: translate 0.35s cubic-bezier(.3,1.6,.5,1); }
.social-icon:is(:hover, :focus-visible) {
	color: #fff; outline: none;
	background: radial-gradient(circle at 50% 30%, rgb(190 115 251 / 0.55), rgb(74 43 196 / 0.55));
	box-shadow: 0 0 22px rgb(190 115 251 / 0.6), 0 0 48px rgb(218 112 214 / 0.3);
}
.social-icon:is(:hover, :focus-visible)::before { opacity: 1; animation: pt-spin 2.4s linear infinite; }
.social-icon:is(:hover, :focus-visible)::after { opacity: 1; translate: -50% 0; }
.social-icon:is(:hover, :focus-visible) .pt-icon { translate: 0 -2px; }
.social-icon:active { scale: 0.94; }
@keyframes pt-spin { to { rotate: 1turn; } }

/* Fine print. */
.site-footer__legal { padding-block: 1.75rem 2.25rem; font-size: 0.875rem; color: var(--pt-muted); }
.site-footer__legal::before {
	content: ""; display: block; height: 1px; margin-bottom: 1.75rem;
	background: linear-gradient(90deg, transparent, rgb(201 163 245 / 0.35), transparent);
}
.disclaimer { margin: 0 auto 1.25rem; max-width: 80ch; text-align: center; opacity: 0.85; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.site-footer__bottom p { margin: 0; }
.legal-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.legal-links a { color: var(--pt-muted); }
@media (max-width: 781px) { .site-footer__bottom { flex-direction: column; text-align: center; } }

/* Back to top: a small glowing pill; the arrow hops on hover. */
.to-top {
	display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.95rem 0.45rem 0.6rem;
	border-radius: 99px; color: var(--pt-text); text-decoration: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
	box-shadow: inset 0 0 0 1px rgb(201 163 245 / 0.35);
	transition: box-shadow 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.to-top .pt-icon { width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--pt-btn-grad); background-size: 200% 100%; color: #fff; }
.to-top:is(:hover, :focus-visible) { color: #fff; outline: none; background: rgb(190 115 251 / 0.12); box-shadow: inset 0 0 0 1px var(--pt-lilac), 0 0 20px rgb(190 115 251 / 0.45); }
.to-top:is(:hover, :focus-visible) .pt-icon { animation: pt-hop 0.6s cubic-bezier(.3,1.6,.5,1); }
@keyframes pt-hop { 40% { translate: 0 -5px; } }

/* ---------- Live List (plugin) ---------- */
/* "body" raises specificity above the plugin's own rules, so these win without !important.
   To go back to the plugin's poster look (Anton headline, gold), delete this block. */

body #livelist-root.livelist {
	--ll-ground: var(--pt-base);
	--ll-panel: var(--pt-surface);
	--ll-line: var(--pt-line);
	--ll-taken: var(--pt-raised);
	--ll-taken-line: var(--pt-line);
	--ll-text: var(--pt-text);
	--ll-soft: var(--pt-muted);
	--ll-gold: var(--pt-lilac);
	--ll-hot: var(--pt-accent-deep);
	font-family: var(--pt-body);
	border-bottom: 1px solid var(--pt-line);
}
body #livelist-root .ll-headline,
body #livelist-root .ll-price,
body #livelist-root .ll-clock,
body #livelist-root .ll-number,
body #livelist-root .ll-steps li::before { font-family: var(--pt-display); font-weight: 700; text-transform: none; }
body #livelist-root button,
body #livelist-root .ll-form input { font-family: var(--pt-body); }

/* ---------- "What clients say": quote cards ----------
   Micro interactions (main.js sets the variables):
   - a soft light follows the pointer across the card (--mx, --my)
   - the card tilts a few degrees toward the pointer (--rx, --ry)
   - the big quote mark lifts and glows; the gradient edge lights up
   - each bold phrase is underlined in lilac as the card scrolls into view
   - the signature's line stretches out
   On phones the cards swipe sideways, with dots underneath. */

.pt-quotes-section { position: relative; margin-top: var(--wp--preset--spacing--60, 5rem) !important; }
.pt-quotes { gap: 1.5rem !important; margin-top: 2.5rem !important; align-items: stretch !important; perspective: 1100px; }
.pt-quotes > .wp-block-column { display: flex; }

.wp-block-quote.pt-quote {
	--mx: 50%; --my: 0%; --rx: 0deg; --ry: 0deg; --lift: 0px;
	position: relative; isolation: isolate; flex: 1;
	display: flex; flex-direction: column;
	margin: 0; padding: 3.5rem 1.75rem 1.6rem;
	border: 0; border-radius: 16px;
	background: linear-gradient(160deg, rgb(51 30 37 / 0.6), rgb(20 4 12 / 0.92));
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.14), 0 18px 40px rgb(0 0 0 / 0.5);
	transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform 0.45s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease,
		opacity 0.8s ease var(--pt-delay, 0s), translate 0.8s cubic-bezier(.2,.7,.2,1) var(--pt-delay, 0s);
	will-change: transform;
}
.wp-block-quote.pt-quote.is-tilting { transition-duration: 0.12s, 0.4s, 0.8s, 0.8s; }
/* Gradient edge (blue to orchid, like the logo), faint until hover. */
.wp-block-quote.pt-quote::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	border-radius: inherit; padding: 1px;
	background: linear-gradient(140deg, #3d5bd8, var(--pt-accent-deep) 40%, var(--pt-accent) 70%, rgb(218 112 214 / 0));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0.3; transition: opacity 0.4s ease;
}
/* Light that follows the pointer. */
.wp-block-quote.pt-quote::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
	background: radial-gradient(340px circle at var(--mx) var(--my), rgb(190 115 251 / 0.17), transparent 62%);
	opacity: 0; transition: opacity 0.4s ease;
}
/* The big quote mark. */
.wp-block-quote.pt-quote > p:first-of-type::before {
	content: "\201C"; position: absolute; top: 0.35rem; left: 1.2rem;
	font: 700 6rem/1 Georgia, serif; font-style: normal;
	background: linear-gradient(160deg, var(--pt-lilac), var(--pt-accent-deep) 55%, #3d5bd8);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	opacity: 0.55; transform-origin: 30% 60%;
	transition: transform 0.5s cubic-bezier(.3,1.6,.5,1), opacity 0.4s ease, filter 0.4s ease;
}
.wp-block-quote.pt-quote > p {
	margin: 0; color: var(--pt-text);
	font-family: var(--pt-display); font-style: italic; font-weight: 500;
	font-size: 1.32rem; line-height: 1.5;
}
/* Key phrase: a lilac underline that draws in, then brightens on hover. */
.wp-block-quote.pt-quote strong {
	font-weight: 700; color: #fff; padding-inline: 0.08em;
	background: linear-gradient(90deg, rgb(122 58 216 / 0.55), rgb(218 112 214 / 0.55)) 0 90% / 100% 0.36em no-repeat;
	transition: background-size 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--pt-delay, 0s) + 0.35s), text-shadow 0.4s ease;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.wp-block-quote.pt-quote cite {
	display: flex; align-items: center; gap: 0.75rem;
	margin-top: auto; padding-top: 1.4rem;
	font: 400 2rem/1 var(--pt-script); font-style: normal; color: var(--pt-lilac);
}
.wp-block-quote.pt-quote cite::before {
	content: ""; width: 28px; height: 1.5px; flex: none;
	background: linear-gradient(90deg, #3d5bd8, var(--pt-accent-deep));
	transition: width 0.5s cubic-bezier(.2,.7,.2,1);
}

.wp-block-quote.pt-quote:hover {
	--lift: -6px;
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.3), 0 0 38px rgb(190 115 251 / 0.22), 0 28px 60px rgb(0 0 0 / 0.6);
}
.wp-block-quote.pt-quote:hover::before { opacity: 1; }
.wp-block-quote.pt-quote:hover::after { opacity: 1; }
.wp-block-quote.pt-quote:hover > p:first-of-type::before {
	opacity: 0.95; transform: translate(-3px, -7px) rotate(-8deg) scale(1.1);
	filter: drop-shadow(0 0 14px rgb(190 115 251 / 0.75));
}
.wp-block-quote.pt-quote:hover strong { background-size: 100% 0.9em; text-shadow: 0 0 18px rgb(218 112 214 / 0.55); transition-delay: 0s; }
.wp-block-quote.pt-quote:hover cite::before { width: 60px; }

/* Scroll-in: rise, then the underline draws (armed by main.js; never hidden without it). */
.pt-quotes.is-armed .pt-quote:not(.is-in) { opacity: 0; translate: 0 28px; }
.pt-quotes.is-armed .pt-quote:not(.is-in) strong { background-size: 0% 0.36em; }

.pt-dots { display: none; }

/* Phones: swipe through the quotes, with the next one peeking in. */
@media (max-width: 781px) {
	.wp-block-columns.pt-quotes {
		flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scrollbar-width: none;
		gap: 1rem !important; padding: 0.5rem var(--pt-gutter) 1.25rem;
		margin-inline: calc(-1 * var(--pt-gutter)); scroll-padding-inline: var(--pt-gutter);
	}
	.wp-block-columns.pt-quotes::-webkit-scrollbar { display: none; }
	.wp-block-columns.pt-quotes > .wp-block-column { flex: 0 0 84% !important; scroll-snap-align: start; }
	.wp-block-quote.pt-quote { padding: 3.25rem 1.4rem 1.4rem; }
	.wp-block-quote.pt-quote > p { font-size: 1.22rem; }
	.pt-dots { display: flex; justify-content: center; gap: 0.25rem; margin-top: 0.25rem; }
	.pt-dots button {
		width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
		display: grid; place-items: center;
	}
	.pt-dots button::before {
		content: ""; width: 8px; height: 8px; border-radius: 99px;
		background: rgb(201 163 245 / 0.35); transition: width 0.35s ease, background 0.35s ease;
	}
	.pt-dots button[aria-current="true"]::before { width: 24px; background: linear-gradient(90deg, #3d5bd8, var(--pt-accent-deep), var(--pt-accent)); }
}

/* ---------- "From the shop": gritty vintage showcase ----------
   A grainy sepia-plum band with torn-paper edges. Each product is an aged paper print taped
   up with lilac washi tape, numbered like an old catalogue, its photo sepia-toned until you
   hover. Hover straightens the print, lifts it and brings the photo back to full colour. */

.pt-shop-section {
	position: relative; isolation: isolate;
	margin-top: var(--wp--preset--spacing--60, 5rem) !important;
	padding: clamp(4.5rem, 9vw, 7rem) var(--pt-gutter) clamp(4rem, 8vw, 6rem) !important;
	background:
		radial-gradient(ellipse 70% 55% at 50% 0%, rgb(140 90 50 / 0.22), transparent 70%),
		radial-gradient(ellipse 50% 60% at 0% 100%, rgb(108 92 231 / 0.14), transparent 70%),
		radial-gradient(ellipse 50% 60% at 100% 100%, rgb(218 112 214 / 0.1), transparent 70%),
		linear-gradient(180deg, #170c0b, #0f0709 60%, #140a0f);
}
/* Film grain, gently shifting like old footage. */
.pt-shop-section::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: url("../images/grain.svg") 0 0 / 220px 220px;
	opacity: 0.22; mix-blend-mode: overlay;
	animation: pt-grain 0.9s steps(3) infinite;
}
@keyframes pt-grain {
	0% { background-position: 0 0; } 33% { background-position: -37px 21px; } 66% { background-position: 53px -44px; } 100% { background-position: 0 0; }
}
/* Torn paper top and bottom (the page's black, ripped over the band). */
.pt-shop-section::after {
	content: ""; position: absolute; inset: -1px 0; z-index: -1; pointer-events: none;
	background:
		url("../images/torn-edge.svg") top / 100% 26px no-repeat,
		url("../images/torn-edge-bottom.svg") bottom / 100% 26px no-repeat;
}
.pt-shop-section > * { position: relative; }
.pt-shop-section .pt-shop-intro {
	margin: 0.75rem auto 0 !important; max-width: 46ch;
	font-family: "Courier Prime", "Courier New", Courier, monospace; font-size: 0.95rem; letter-spacing: 0.02em;
	color: #cdb89a;
}

/* The prints. */
.pt-shop-section .woocommerce { margin-top: 2.75rem; }
.pt-shop-section .woocommerce ul.products {
	counter-reset: pt-item; gap: 2.25rem 1.75rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	padding-top: 0.75rem;
}
.pt-shop-section .woocommerce ul.products li.product {
	counter-increment: pt-item;
	position: relative; overflow: visible;
	padding: 12px 12px 16px; border: 0; border-radius: 3px;
	color: #2b1a10;
	background-color: #e8dcc4;
	background-image:
		radial-gradient(circle at 12% 18%, rgb(150 105 55 / 0.22), transparent 38%),
		radial-gradient(circle at 88% 82%, rgb(120 78 38 / 0.26), transparent 42%),
		radial-gradient(circle at 70% 8%, rgb(160 120 70 / 0.14), transparent 30%),
		linear-gradient(180deg, #ece2cc, #dccdb0);
	box-shadow: inset 0 0 38px rgb(110 70 30 / 0.38), 0 14px 28px rgb(0 0 0 / 0.55), 0 2px 4px rgb(0 0 0 / 0.4);
	rotate: -1.4deg;
	transition: rotate 0.5s cubic-bezier(.3,1.4,.5,1), translate 0.45s cubic-bezier(.2,.7,.2,1), box-shadow 0.45s ease;
}
.pt-shop-section .woocommerce ul.products li.product:nth-child(2n) { rotate: 1.2deg; }
.pt-shop-section .woocommerce ul.products li.product:nth-child(3n) { rotate: -0.6deg; }
.pt-shop-section .woocommerce ul.products li.product:nth-child(4n) { rotate: 1.8deg; }
/* Paper grain on the print. */
.pt-shop-section .woocommerce ul.products li.product::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
	background: url("../images/grain.svg") 0 0 / 180px 180px; opacity: 0.32; mix-blend-mode: multiply;
}
/* Lilac washi tape. */
.pt-shop-section .woocommerce ul.products li.product::before {
	content: ""; position: absolute; top: -13px; left: 50%; z-index: 3; width: 96px; height: 26px;
	translate: -50% 0; rotate: -4deg;
	background:
		repeating-linear-gradient(90deg, rgb(255 255 255 / 0.12) 0 6px, transparent 6px 12px),
		linear-gradient(rgb(201 163 245 / 0.72), rgb(190 115 251 / 0.62));
	clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 20%);
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
	transition: rotate 0.5s ease;
}
.pt-shop-section .woocommerce ul.products li.product:nth-child(2n)::before { rotate: 3deg; left: 42%; }

.pt-shop-section .woocommerce ul.products li.product a img {
	margin: 0 0 0.9rem; border-radius: 1px;
	filter: sepia(0.65) contrast(1.08) saturate(0.75) brightness(0.95);
	box-shadow: 0 0 0 1px rgb(60 35 15 / 0.35);
	transition: filter 0.6s ease;
}
.pt-shop-section .woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0 0.25rem !important; color: #2b1a10;
	font-family: var(--pt-display); font-weight: 700; font-size: 1.3rem !important; line-height: 1.15;
}
/* Catalogue number above the name. */
.pt-shop-section .woocommerce ul.products li.product .woocommerce-loop-product__title::before {
	content: "No. " counter(pt-item, decimal-leading-zero);
	display: block; margin-bottom: 0.3rem;
	font: 700 0.7rem/1 "Courier Prime", "Courier New", Courier, monospace; letter-spacing: 0.22em; color: #7c5a3a;
}
/* Price as a rubber stamp in plum ink. */
.pt-shop-section .woocommerce ul.products li.product .price {
	display: inline-block !important; margin: 0.55rem 0 1rem 0.25rem; padding: 0.2rem 0.55rem !important;
	color: #5e2370 !important; font: 700 0.95rem/1.2 "Courier Prime", "Courier New", Courier, monospace;
	border: 2px solid currentColor; border-radius: 4px; rotate: -3deg;
	box-shadow: inset 0 0 0 2px rgb(232 220 196), inset 0 0 0 3px rgb(94 35 112 / 0.5);
	opacity: 0.88; /* ink soaked into paper; the card's grain sits over it */
	transition: rotate 0.4s cubic-bezier(.3,1.6,.5,1);
}
.pt-shop-section .woocommerce ul.products li.product .button { position: relative; z-index: 2; margin: auto 0 0; }

/* Hover: straighten, lift, colour comes back. */
.pt-shop-section .woocommerce ul.products li.product:is(:hover, :focus-within) {
	rotate: 0deg; translate: 0 -8px;
	box-shadow: inset 0 0 30px rgb(110 70 30 / 0.3), 0 26px 50px rgb(0 0 0 / 0.65), 0 0 40px rgb(190 115 251 / 0.18);
}
.pt-shop-section .woocommerce ul.products li.product:is(:hover, :focus-within) a img { filter: none; }
.pt-shop-section .woocommerce ul.products li.product:is(:hover, :focus-within)::before { rotate: 0deg; }
.pt-shop-section .woocommerce ul.products li.product:is(:hover, :focus-within) .price { rotate: -7deg; }

.pt-shop-section .pt-shop-more { margin-top: 2.5rem !important; }

@media (max-width: 600px) {
	.pt-shop-section .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
	.pt-shop-section .woocommerce ul.products li.product { padding: 8px 8px 12px; }
	.pt-shop-section .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.05rem !important; }
	.pt-shop-section .woocommerce ul.products li.product .button { padding-inline: 0.5rem; font-size: 0.85rem; }
	.pt-shop-section .woocommerce ul.products li.product::before { width: 70px; height: 20px; top: -10px; }
}

/* ---------- About Me page (pattern: poetictemperance/about) ---------- */

.entry-content > :is(.pt-about-intro, .pt-about-story, .pt-about-services, .pt-about-connect) { margin-block: 0 !important; }

/* Intro banner */
.wp-block-cover.pt-about-intro { padding: 6rem var(--pt-gutter) 4rem; color: var(--pt-text); }
.wp-block-cover.pt-about-intro > .wp-block-cover__background.has-background-dim {
	opacity: 1; background-color: transparent !important;
	background-image: radial-gradient(ellipse 60% 70% at 50% 50%, rgb(6 2 10 / 0.8), rgb(6 2 10 / 0.35) 75%, rgb(6 2 10 / 0.2)),
		linear-gradient(to bottom, transparent 70%, var(--pt-base));
}
.pt-about-intro .wp-block-cover__inner-container { text-shadow: 0 2px 16px rgb(0 0 0 / 0.75); }
.pt-about-intro p { margin-block: 0; }
.pt-about-hey { font: 400 clamp(1.9rem, 4vw, 2.6rem)/1 var(--pt-script) !important; color: var(--pt-accent); }
.pt-about-name {
	margin-block: 0.35rem 0.2rem !important; max-width: none !important; font-size: clamp(1.45rem, 5.6vw, 3.6rem) !important; letter-spacing: 0.04em;
	text-shadow: 0 0 30px rgb(190 115 251 / 0.35), 0 3px 18px rgb(0 0 0 / 0.8);
}
.pt-about-aka { font: 400 clamp(1.3rem, 2.6vw, 1.7rem)/1.2 var(--pt-script) !important; color: var(--pt-text); opacity: 0.9; }
/* The four descriptions, with a slow light passing through them. */
.pt-about-roles {
	margin-top: 1.4rem !important;
	font: 700 clamp(1.5rem, 3.4vw, 2.3rem)/1.3 var(--pt-display) !important;
	background: linear-gradient(100deg, var(--pt-text) 0 42%, #fff 47%, #d9b8ff 50%, #fff 53%, var(--pt-text) 58% 100%) 100% 0 / 280% 100% no-repeat;
	-webkit-background-clip: text; background-clip: text; color: transparent !important;
	text-shadow: none !important; filter: drop-shadow(0 2px 12px rgb(0 0 0 / 0.85));
	animation: pt-sweep 7s ease-in-out 1s infinite;
}
.pt-about-roles::before {
	content: "✦"; display: block; margin: 0 auto 1rem; width: min(220px, 60%);
	font: 400 0.9rem/1 var(--pt-body); color: var(--pt-lilac); -webkit-text-fill-color: var(--pt-lilac);
	background: linear-gradient(90deg, transparent, var(--pt-accent-deep) 40%, transparent 42% 58%, var(--pt-accent-deep) 60%, transparent) center / 100% 1px no-repeat;
}
@keyframes pt-sweep { 0%, 15% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
.pt-about-tag { margin-top: 1rem !important; color: var(--pt-lilac) !important; font-size: clamp(1.5rem, 3vw, 2rem) !important; }

/* My Story: an aged parchment page taped over the candle-lit desk. */
.wp-block-cover.pt-about-story { padding: clamp(4rem, 9vw, 7rem) var(--pt-gutter); }
.wp-block-cover.pt-about-story > .wp-block-cover__background.has-background-dim {
	opacity: 1; background-color: transparent !important;
	background-image: linear-gradient(180deg, var(--pt-base), rgb(10 3 8 / 0.55) 9%, rgb(10 3 8 / 0.55) 88%, var(--pt-base));
}
.pt-story-card {
	position: relative; max-width: 780px !important; margin-inline: auto !important;
	padding: clamp(2.25rem, 6vw, 4rem) clamp(1.5rem, 6vw, 4rem) !important;
	color: #2b1a10; border-radius: 4px;
	background-color: #e8dcc4;
	background-image:
		radial-gradient(circle at 10% 12%, rgb(150 105 55 / 0.24), transparent 32%),
		radial-gradient(circle at 92% 88%, rgb(120 78 38 / 0.28), transparent 38%),
		radial-gradient(circle at 80% 18%, rgb(160 120 70 / 0.14), transparent 26%),
		linear-gradient(180deg, #eee4cf, #dccdb0);
	box-shadow: inset 0 0 60px rgb(110 70 30 / 0.4), 0 30px 60px rgb(0 0 0 / 0.6), 0 3px 6px rgb(0 0 0 / 0.4);
	rotate: -0.6deg;
}
.pt-story-card::after { /* paper grain */
	content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background: url("../images/grain.svg") 0 0 / 200px 200px; opacity: 0.3; mix-blend-mode: multiply;
}
.pt-story-card::before { /* lilac tape */
	content: ""; position: absolute; top: -14px; left: 50%; width: 130px; height: 30px; translate: -50% 0; rotate: -3deg;
	background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.12) 0 6px, transparent 6px 12px), linear-gradient(rgb(201 163 245 / 0.75), rgb(190 115 251 / 0.65));
	clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 20%);
}
.pt-story-card > * { position: relative; z-index: 1; }
.pt-story-card__title {
	margin: 0 0 1.25rem !important; color: #3b1846 !important;
	font: 700 clamp(2.1rem, 5vw, 2.9rem)/1.1 var(--pt-display) !important;
}
.pt-story-card__title::after {
	content: ""; display: block; width: 90px; height: 2px; margin-top: 0.7rem;
	background: linear-gradient(90deg, #5e2370, rgb(94 35 112 / 0));
}
.pt-story-card p { margin: 0 0 1.05rem !important; color: #2b1a10; font: 500 1.22rem/1.65 var(--pt-display); }
.pt-dropcap { display: flow-root; } /* keeps the big letter inside its own paragraph */
.pt-dropcap::first-letter {
	float: left; margin: 0.08em 0.12em 0 0; padding: 0;
	font: 700 4.1em/0.8 var(--pt-banner); color: #5e2370;
	text-shadow: 2px 2px 0 rgb(201 163 245 / 0.6);
}
/* "Part storyteller. Part philosopher..." in handwriting, one line at a time. */
.pt-story-card .pt-parts { list-style: none; margin: 1.75rem 0 0; padding: 1.25rem 0 0; border-top: 1px dashed rgb(94 35 112 / 0.35); }
.pt-parts li {
	position: relative; padding-left: 1.6rem; margin: 0.25rem 0;
	font: 400 clamp(1.5rem, 3.2vw, 1.95rem)/1.3 var(--pt-script); color: #5e2370;
	transition: opacity 0.6s ease var(--pt-delay, 0s), translate 0.6s cubic-bezier(.2,.7,.2,1) var(--pt-delay, 0s), rotate 0.3s ease;
}
.pt-parts li::before { content: "✦"; position: absolute; left: 0; top: 0.35em; font: 400 0.8rem/1 var(--pt-body); color: #7a3ad8; }
.pt-parts li:last-child:hover { rotate: -1.5deg; }
.pt-parts.is-armed li:not(.is-in) { opacity: 0; translate: -18px 0; }

/* What I Do: dark glass cards with floating medallions over the mauve parchment. */
.wp-block-cover.pt-about-services { padding: clamp(4.5rem, 9vw, 7rem) var(--pt-gutter); color: var(--pt-text); }
.wp-block-cover.pt-about-services > .wp-block-cover__background.has-background-dim {
	opacity: 1; background-color: transparent !important;
	background-image: linear-gradient(180deg, var(--pt-base), rgb(24 6 26 / 0.62) 16%, rgb(24 6 26 / 0.62) 84%, var(--pt-base));
}
.pt-about-services .pt-section-title { text-shadow: 0 2px 16px rgb(0 0 0 / 0.8); }
.pt-services { gap: 1.5rem !important; margin-top: 2.75rem !important; align-items: stretch !important; }
.pt-service {
	display: flex; flex-direction: column; align-items: center;
	padding: 1.75rem 1.4rem 1.75rem; border-radius: 16px;
	background: linear-gradient(170deg, rgb(28 8 30 / 0.86), rgb(12 3 14 / 0.9));
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.2), 0 20px 44px rgb(0 0 0 / 0.5);
	transition: transform 0.45s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease, opacity 0.8s ease var(--pt-delay, 0s), translate 0.8s cubic-bezier(.2,.7,.2,1) var(--pt-delay, 0s);
}
.pt-services.is-armed .pt-service:not(.is-in) { opacity: 0; translate: 0 30px; }
.pt-service p { margin: 0 0 0.85rem !important; color: #e6d8c6; font-size: 0.98rem; line-height: 1.6; }
.pt-service .wp-block-buttons { margin-top: auto; padding-top: 0.5rem; }
.pt-medallion { margin: -0.25rem auto 0.9rem !important; }
.pt-medallion img {
	width: 150px; height: auto; border-radius: 50%;
	filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.65));
	animation: pt-float 6s ease-in-out infinite;
	transition: filter 0.4s ease, scale 0.5s cubic-bezier(.3,1.6,.5,1), rotate 0.6s ease;
}
.pt-service:nth-child(2) .pt-medallion img { animation-delay: -1.5s; }
.pt-service:nth-child(3) .pt-medallion img { animation-delay: -3s; }
.pt-service:nth-child(4) .pt-medallion img { animation-delay: -4.5s; }
@keyframes pt-float { 50% { translate: 0 -7px; } }
.pt-service__title {
	margin: 0 0 0.9rem !important; text-align: center;
	font: 700 1.3rem/1.2 var(--pt-banner) !important; text-transform: uppercase; letter-spacing: 0.05em;
}
.pt-service__title::after { content: "✦"; display: block; margin-top: 0.55rem; font: 400 0.8rem/1 var(--pt-body); color: var(--pt-lilac); transition: rotate 0.5s ease, text-shadow 0.4s ease; }
.pt-service:is(:hover, :focus-within) {
	transform: translateY(-6px);
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.55), 0 0 36px rgb(190 115 251 / 0.28), 0 28px 60px rgb(0 0 0 / 0.6);
}
.pt-service:is(:hover, :focus-within) .pt-medallion img {
	scale: 1.07; rotate: 8deg;
	filter: drop-shadow(0 0 18px rgb(255 190 120 / 0.55)) drop-shadow(0 0 30px rgb(190 115 251 / 0.5));
}
.pt-service:is(:hover, :focus-within) .pt-service__title::after { rotate: 180deg; text-shadow: 0 0 10px rgb(190 115 251 / 0.9); }
@media (min-width: 782px) and (max-width: 1100px) {
	.wp-block-columns.pt-services { flex-wrap: wrap !important; }
	.wp-block-columns.pt-services > .wp-block-column { flex-basis: calc(50% - 0.75rem) !important; }
}

/* Quote */
.pt-about-quote-wrap { margin-block: clamp(4rem, 8vw, 6rem) !important; }
.wp-block-quote.pt-about-quote {
	position: relative; max-width: 820px; margin-inline: auto; padding: 2.75rem 1.5rem 1.5rem;
	border: 0; text-align: center;
}
.wp-block-quote.pt-about-quote::before {
	content: "\201C"; position: absolute; top: -1.6rem; left: 50%; translate: -50% 0;
	font: 700 6rem/1 Georgia, serif;
	background: linear-gradient(160deg, var(--pt-lilac), var(--pt-accent-deep) 55%, #3d5bd8); -webkit-background-clip: text; background-clip: text; color: transparent;
	opacity: 0.7;
}
.wp-block-quote.pt-about-quote p {
	margin: 0; font: 400 clamp(1.8rem, 4vw, 2.6rem)/1.35 var(--pt-script); color: var(--pt-accent);
	text-shadow: 0 0 24px rgb(218 112 214 / 0.3);
}
.wp-block-quote.pt-about-quote cite {
	display: block; margin-top: 1.1rem; font: 700 0.8rem/1 var(--pt-body); font-style: normal;
	letter-spacing: 0.3em; text-transform: uppercase; color: var(--pt-lilac);
}
.wp-block-quote.pt-about-quote cite::before, .wp-block-quote.pt-about-quote cite::after { content: "✦"; margin: 0 0.8em; font-size: 0.7em; }

/* Let's Connect: a glass panel in the empty frame of the picture. */
.wp-block-cover.pt-about-connect { padding: clamp(4rem, 8vw, 6rem) var(--pt-gutter); color: var(--pt-text); }
.wp-block-cover.pt-about-connect > .wp-block-cover__background.has-background-dim {
	opacity: 1; background-color: transparent !important;
	background-image: linear-gradient(180deg, var(--pt-base), transparent 16%, transparent 84%, var(--pt-base)),
		linear-gradient(90deg, rgb(6 2 10 / 0.55), rgb(6 2 10 / 0.15) 60%, transparent);
}
.wp-block-cover .wp-block-cover__inner-container > .pt-connect-card {
	width: 100%; max-width: 560px !important; margin-left: clamp(0px, 5vw, 110px) !important; margin-right: auto !important;
}
.pt-connect-card {
	padding: clamp(2rem, 5vw, 2.75rem) !important; border-radius: 18px;
	background: linear-gradient(170deg, rgb(26 8 30 / 0.82), rgb(10 3 12 / 0.88));
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.28), 0 0 50px rgb(190 115 251 / 0.15), 0 30px 70px rgb(0 0 0 / 0.6);
}
.pt-connect-card .pt-section-title { margin-top: 0 !important; }
.pt-connect-sub { margin: 0.5rem 0 1.5rem !important; color: var(--pt-accent) !important; font-size: clamp(1.6rem, 3vw, 2rem) !important; }
.pt-connect-buttons { margin-top: 1.5rem !important; gap: 0.75rem !important; }
@media (max-width: 781px) { .wp-block-cover .wp-block-cover__inner-container > .pt-connect-card { margin-left: auto !important; } }

/* ---------- Ashes & Ink (blog listings: views/blog.twig) ----------
   Banner with drifting embers and a title that "inks in"; topic chips and search in a glass
   bar; the newest story as a large featured card, then three across. Cards lift, a soft light
   follows the pointer, the photo warms from sepia to full colour, the title underlines and
   the arrow slides. On phones: one column, a press-down on tap, swipeable topic chips,
   full-colour photos, and "Load more stories" in place of page numbers. */

.ink-banner {
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; place-items: center; min-height: clamp(320px, 40vw, 470px);
	padding: 4rem var(--pt-gutter) 5.5rem; text-align: center;
	background: var(--ink-banner) center 40% / cover no-repeat, #12060d;
}
.ink-banner::before { /* darker behind the words, fading into the page at the bottom */
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(ellipse 55% 70% at 50% 48%, rgb(8 2 10 / 0.78), rgb(8 2 10 / 0.35) 75%, rgb(8 2 10 / 0.25)),
		linear-gradient(to bottom, transparent 55%, var(--pt-base));
}
.ink-banner__inner { position: relative; z-index: 1; max-width: 760px; text-shadow: 0 2px 16px rgb(0 0 0 / 0.75); }
.ink-banner__eyebrow {
	margin: 0 0 0.75rem; color: var(--pt-lilac);
	font: 700 0.8rem/1 var(--pt-body); letter-spacing: 0.34em; text-transform: uppercase;
}
.ink-banner__eyebrow a { color: inherit; text-decoration: none; }
.ink-banner__eyebrow a:hover { color: #fff; }
.ink-banner__eyebrow::before, .ink-banner__eyebrow::after { content: "✦"; margin: 0 0.9em; font-size: 0.75em; letter-spacing: 0; }
/* The title writes itself in, left to right, like ink soaking into paper. */
.ink-banner__title {
	margin: 0; color: var(--pt-text);
	font: 700 clamp(2.6rem, 7vw, 5rem)/1.05 var(--pt-display) !important;
	animation: pt-ink-in 1.6s cubic-bezier(.3,.6,.2,1) both;
}
@keyframes pt-ink-in {
	from { clip-path: inset(-10% 100% -10% 0); filter: blur(8px); opacity: 0.4; }
	to { clip-path: inset(-10% 0 -10% 0); filter: blur(0); opacity: 1; }
}
.ink-banner__title::after {
	content: "✦"; display: block; width: min(280px, 70%); margin: 1rem auto 0;
	font: 400 0.9rem/1 var(--pt-body); color: var(--pt-lilac); text-shadow: 0 0 12px rgb(190 115 251 / 0.9);
	background: linear-gradient(90deg, transparent, #3d5bd8 15%, var(--pt-accent-deep) 44%, transparent 46% 54%, var(--pt-accent-deep) 56%, #3d5bd8 85%, transparent) center / 100% 1px no-repeat;
}
.ink-banner__intro { margin: 1.1rem auto 0; max-width: 46ch; color: #e6d8c6; font: 500 clamp(1.1rem, 2vw, 1.3rem)/1.55 var(--pt-display); font-style: italic; }

/* Embers: three layers of glowing specks rising and fading, each on its own clock. */
.ink-banner__embers { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ink-banner__embers span {
	position: absolute; left: 0; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
	color: rgb(255 150 190 / 0.95);
	box-shadow: 6vw 0 4px 1px, 15vw -40px 4px 1px, 27vw -10px 4px 1px, 36vw -60px 4px 1px, 48vw -20px 4px 1px,
		59vw -50px 4px 1px, 68vw -5px 4px 1px, 79vw -35px 4px 1px, 88vw -15px 4px 1px, 95vw -55px 4px 1px;
	animation: pt-ember 9s linear infinite;
}
.ink-banner__embers span:nth-child(2) {
	width: 2px; height: 2px; color: rgb(201 163 245 / 0.9); animation-duration: 12s; animation-delay: -4s;
	box-shadow: 3vw -30px 3px, 11vw -5px 3px, 21vw -45px 3px, 32vw -15px 3px, 43vw -55px 3px, 54vw -25px 3px,
		64vw -40px 3px, 73vw -10px 3px, 84vw -50px 3px, 92vw -20px 3px;
}
.ink-banner__embers span:nth-child(3) {
	color: rgb(255 175 140 / 0.85); animation-duration: 15s; animation-delay: -9s;
	box-shadow: 9vw -20px 5px 1px, 19vw -50px 5px 1px, 31vw -30px 5px 1px, 45vw -5px 5px 1px, 57vw -40px 5px 1px,
		70vw -25px 5px 1px, 82vw -45px 5px 1px, 97vw -10px 5px 1px;
}
@keyframes pt-ember {
	0% { translate: 0 0; opacity: 0; }
	10% { opacity: 1; }
	50% { translate: 18px -220px; opacity: 0.8; }
	100% { translate: -12px -480px; opacity: 0; }
}

.ink-wrap {
	max-width: calc(var(--pt-wide) + 2 * var(--pt-gutter));
	margin: 0 auto; padding: 0 var(--pt-gutter) var(--wp--preset--spacing--60, 5rem);
}

/* Search, in a glass pill that overlaps the bottom of the banner. */
.ink-tools {
	position: relative; z-index: 2;
	display: flex; justify-content: center;
	width: fit-content; max-width: 100%;
	margin: -2.1rem auto 2.75rem; padding: 0.5rem;
	border-radius: 99px;
	background: rgb(16 5 20 / 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.22), 0 18px 40px rgb(0 0 0 / 0.5);
}

.ink-search { position: relative; flex: none; display: flex; align-items: center; }
.ink-search input[type="search"] {
	width: 380px; min-height: 46px; padding: 0.5rem 3rem 0.5rem 1.25rem;
	color: var(--pt-text); background: rgb(255 255 255 / 0.05);
	border: 1px solid rgb(201 163 245 / 0.28); border-radius: 99px; font-size: 0.95rem;
	transition: width 0.4s cubic-bezier(.2,.7,.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.ink-search input[type="search"]:focus { width: 460px; outline: none; border-color: var(--pt-lilac); box-shadow: 0 0 0 3px rgb(190 115 251 / 0.25), 0 0 20px rgb(190 115 251 / 0.25); }
.ink-search button {
	position: absolute; right: 5px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
	border: 0; border-radius: 50%; color: #fff; cursor: pointer; background: var(--pt-btn-grad); background-size: 200% 100%;
}
.ink-search button .pt-icon { width: 17px; height: 17px; }
.ink-search button:is(:hover, :focus-visible) { box-shadow: var(--pt-btn-glow); outline: none; }

/* The grid. */
.ink-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ink-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ink-grid { grid-template-columns: minmax(0, 1fr); gap: 1.35rem; } }

.ink-card {
	--mx: 50%; --my: 0%;
	position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden;
	border-radius: 16px;
	background: linear-gradient(170deg, rgb(40 14 34 / 0.9), rgb(18 5 14 / 0.95));
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.14), 0 16px 36px rgb(0 0 0 / 0.45);
	transition: transform 0.45s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease, opacity 0.7s ease var(--pt-delay, 0s), translate 0.7s cubic-bezier(.2,.7,.2,1) var(--pt-delay, 0s);
}
.ink-card::after { /* light that follows the pointer */
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
	background: radial-gradient(360px circle at var(--mx) var(--my), rgb(190 115 251 / 0.16), transparent 62%);
	opacity: 0; transition: opacity 0.4s ease;
}
.ink-grid.is-armed .ink-card:not(.is-in) { opacity: 0; translate: 0 26px; }

.ink-card__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #1c050d; }
.ink-card__media img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	filter: sepia(0.35) saturate(0.85) brightness(0.88);
	transition: filter 0.7s ease, scale 1.4s cubic-bezier(.2,.7,.2,1);
}
.ink-card__media::after { /* shade at the top so the date badge always reads */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgb(8 2 10 / 0.45), transparent 35%, transparent 70%, rgb(18 5 14 / 0.55));
}
.ink-card__placeholder {
	position: absolute; inset: 0; display: grid; place-items: center;
	background:
		url("../images/grain.svg") 0 0 / 180px 180px,
		radial-gradient(circle at 30% 30%, rgb(122 58 216 / 0.45), transparent 60%),
		radial-gradient(circle at 75% 80%, rgb(218 112 214 / 0.3), transparent 55%),
		#1c050d;
	background-blend-mode: overlay, normal, normal, normal;
}
.ink-card__placeholder span {
	font: 700 clamp(4rem, 10vw, 6.5rem)/1 var(--pt-banner); color: transparent;
	-webkit-text-stroke: 1.5px rgb(201 163 245 / 0.75); text-shadow: 0 0 30px rgb(190 115 251 / 0.4);
	transition: scale 0.8s cubic-bezier(.3,1.4,.5,1);
}
.ink-card__date {
	position: absolute; top: 0.85rem; left: 0.85rem; z-index: 1;
	display: grid; place-items: center; min-width: 52px; padding: 0.4rem 0.45rem 0.45rem; border-radius: 10px;
	color: #e6d8c6; font: 700 0.62rem/1 var(--pt-body); letter-spacing: 0.18em; text-transform: uppercase;
	background: rgb(12 4 16 / 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	box-shadow: inset 0 0 0 1px rgb(201 163 245 / 0.35);
	transition: rotate 0.45s cubic-bezier(.3,1.6,.5,1), box-shadow 0.4s ease;
}
.ink-card__date b { display: block; margin-bottom: 0.2rem; font: 700 1.35rem/1 var(--pt-display); letter-spacing: 0; color: #fff; }
.ink-card__latest {
	position: absolute; top: 0.9rem; right: 0.9rem; z-index: 1;
	display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem 0.4rem 0.6rem; border-radius: 99px;
	color: #fff; font: 700 0.68rem/1 var(--pt-body); letter-spacing: 0.16em; text-transform: uppercase;
	background: var(--pt-btn-grad); background-size: 200% 100%; box-shadow: 0 0 16px rgb(190 115 251 / 0.55);
}
.ink-card__latest::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pt-pulse 1.8s ease-in-out infinite; }
@keyframes pt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0.7); } 60% { box-shadow: 0 0 0 7px rgb(255 255 255 / 0); } }

.ink-card__body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: 1.25rem 1.35rem 1.4rem; }
.ink-card__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.55rem; margin: 0 0 0.6rem;
	color: var(--pt-muted); font: 700 0.7rem/1.3 var(--pt-body); letter-spacing: 0.14em; text-transform: uppercase;
}
.ink-card__meta [aria-hidden] { color: var(--pt-lilac); font-size: 0.8em; }
.ink-card__title { margin: 0 0 0.6rem; font: 700 1.42rem/1.2 var(--pt-display) !important; }
.ink-card__link {
	color: var(--pt-text); text-decoration: none;
	background: linear-gradient(90deg, #3d5bd8, var(--pt-accent-deep), var(--pt-accent)) 0 100% / 0% 1.5px no-repeat;
	transition: background-size 0.5s cubic-bezier(.2,.7,.2,1), color 0.3s ease;
}
.ink-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* makes the whole card clickable */
.ink-card__link:focus-visible { outline: none; }
.ink-card__excerpt {
	margin: 0 0 1rem; color: #cdbfb0; font-size: 0.97rem; line-height: 1.6;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ink-card__more {
	margin-top: auto; display: inline-flex; align-items: center; gap: 0.45rem;
	color: var(--pt-lilac); font: 700 0.75rem/1 var(--pt-body); letter-spacing: 0.16em; text-transform: uppercase;
}
.ink-card__more .pt-icon { width: 16px; height: 16px; transition: translate 0.35s cubic-bezier(.3,1.6,.5,1); }

/* Hover (and keyboard focus) lights the card up. */
.ink-card:is(:hover, :focus-within) {
	transform: translateY(-6px);
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.5), 0 0 36px rgb(190 115 251 / 0.22), 0 26px 56px rgb(0 0 0 / 0.6);
}
.ink-card:has(.ink-card__link:focus-visible) { outline: 2px solid var(--pt-lilac); outline-offset: 3px; }
.ink-card:is(:hover, :focus-within)::after { opacity: 1; }
.ink-card:is(:hover, :focus-within) .ink-card__media img { filter: none; scale: 1.06; }
.ink-card:is(:hover, :focus-within) .ink-card__placeholder span { scale: 1.12; }
.ink-card:is(:hover, :focus-within) .ink-card__date { rotate: -6deg; box-shadow: inset 0 0 0 1px var(--pt-lilac), 0 0 16px rgb(190 115 251 / 0.5); }
.ink-card:is(:hover, :focus-within) .ink-card__link { color: #fff; background-size: 100% 1.5px; }
.ink-card:is(:hover, :focus-within) .ink-card__more .pt-icon { translate: 5px 0; }
/* Phones and tablets: no hover, so photos are in full colour and a tap presses the card in. */
@media (hover: none) {
	.ink-card__media img { filter: none; }
	.ink-card:active { transform: scale(0.985); transition-duration: 0.12s; }
}

/* The featured (newest) story spans the row, picture on the left. */
.ink-card--featured { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.ink-card--featured { display: grid; grid-template-columns: 1.25fr 1fr; min-height: 420px; }
	.ink-card--featured .ink-card__media { aspect-ratio: auto; height: 100%; }
	.ink-card--featured .ink-card__body { justify-content: center; padding: 2.5rem 2.5rem 2.5rem 2.25rem; }
	.ink-card--featured .ink-card__title { font-size: clamp(1.9rem, 2.8vw, 2.6rem) !important; line-height: 1.12; }
	.ink-card--featured .ink-card__excerpt { -webkit-line-clamp: 5; font-size: 1.05rem; }
	.ink-card--featured .ink-card__more { margin-top: 0.5rem; }
}
.ink-card--featured .ink-card__media img { animation: pt-kenburns 18s ease-in-out infinite alternate; }
@keyframes pt-kenburns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }

/* Load more / page numbers. */
.ink-more { display: grid; justify-items: center; margin-top: 3rem; }
.ink-more[hidden] { display: none; }
.ink-more__button { position: relative; min-width: 240px; min-height: 52px; justify-content: center; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem; }
.ink-more.is-busy .ink-more__label { opacity: 0; }
.ink-more.is-busy .pt-newsletter__spinner { opacity: 1; animation: pt-spin 0.8s linear infinite; }
.ink-end { margin: 3rem 0 0; text-align: center; color: var(--pt-lilac); font: 400 1.8rem/1.2 var(--pt-script); }
.ink-end::before { content: "✦"; display: block; margin-bottom: 0.4rem; font: 400 1rem/1 var(--pt-body); text-shadow: 0 0 12px rgb(190 115 251 / 0.9); }
.ink-pages { margin-top: 3rem; }
.ink-pages[hidden] { display: none; }
.ink-empty { padding: 3rem 0; text-align: center; color: var(--pt-muted); }

@media (max-width: 781px) {
	.ink-banner { padding-bottom: 5rem; }
	.ink-tools { width: 100%; margin-top: -2rem; }
	.ink-search { width: 100%; }
	.ink-search input[type="search"], .ink-search input[type="search"]:focus { width: 100%; min-height: 46px; }
	.ink-search button { width: 38px; height: 38px; }
	.ink-card__title { font-size: 1.32rem !important; }
	.ink-more__button { width: 100%; }
}

/* ---------- Other Shit I Do (pattern: poetictemperance/other-stuff) ---------- */

.entry-content > :is(.pt-other-intro, .pt-label, .pt-podcast, .pt-other-quote, .pt-collab) { margin-block: 0 !important; }
.wp-block-cover:is(.pt-other-intro, .pt-label, .pt-podcast, .pt-other-quote, .pt-collab) { padding: clamp(4rem, 8vw, 6.5rem) var(--pt-gutter); color: var(--pt-text); }
.wp-block-cover:is(.pt-other-intro, .pt-label, .pt-podcast, .pt-other-quote, .pt-collab) > .wp-block-cover__background.has-background-dim {
	opacity: 1; background-color: transparent !important;
	background-image: linear-gradient(180deg, var(--pt-base), rgb(8 2 10 / 0.35) 14%, rgb(8 2 10 / 0.35) 86%, var(--pt-base));
}

/* Intro */
.wp-block-cover.pt-other-intro > .wp-block-cover__background.has-background-dim {
	background-image: radial-gradient(ellipse 60% 70% at 50% 50%, rgb(6 2 10 / 0.82), rgb(6 2 10 / 0.35) 75%), linear-gradient(to bottom, transparent 70%, var(--pt-base));
}
.pt-other-intro .wp-block-cover__inner-container { text-shadow: 0 2px 16px rgb(0 0 0 / 0.8); }
.pt-other-title { margin: 0.3rem 0 0 !important; font: 700 clamp(2.5rem, 6.5vw, 4.6rem)/1.05 var(--pt-banner) !important; text-transform: uppercase; letter-spacing: 0.05em; animation: pt-ink-in 1.6s cubic-bezier(.3,.6,.2,1) both; }
.pt-other-title em {
	display: block; margin-top: 0.15em; font: 400 1.25em/1 var(--pt-script); text-transform: none; letter-spacing: 0;
	color: var(--pt-accent); text-shadow: 0 0 26px rgb(218 112 214 / 0.55), 0 2px 12px rgb(0 0 0 / 0.8);
}
.pt-other-intro__text { margin: 1.3rem auto 0 !important; max-width: 52ch !important; color: #eadfce; font: 500 clamp(1.1rem, 2vw, 1.3rem)/1.6 var(--pt-display); font-style: italic; }

/* Sneaky Beagle Records: a glass card with a vinyl record peeking out behind it. */
.wp-block-cover.pt-label > .wp-block-cover__background.has-background-dim {
	background-image: linear-gradient(90deg, transparent 30%, rgb(8 2 10 / 0.7) 70%), linear-gradient(180deg, var(--pt-base), transparent 14%, transparent 86%, var(--pt-base));
}
.wp-block-cover .wp-block-cover__inner-container > .pt-label-card {
	position: relative; max-width: 470px !important; margin-left: auto !important; margin-right: clamp(0px, 4vw, 80px) !important;
	padding: clamp(1.75rem, 4vw, 2.5rem) !important; border-radius: 20px;
	background: linear-gradient(170deg, rgb(26 8 30 / 0.84), rgb(10 3 12 / 0.9)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.3), 0 0 50px rgb(190 115 251 / 0.18), 0 30px 70px rgb(0 0 0 / 0.6);
}
.pt-label-card::before { /* the record */
	content: ""; position: absolute; top: -46px; right: -46px; z-index: -1; width: 150px; height: 150px; border-radius: 50%;
	background:
		radial-gradient(circle, #be73fb 0 13%, #2a0f3a 13.5% 15%, transparent 15.5%),
		repeating-radial-gradient(circle, #0b0b0d 0 2px, #17171b 2px 3px),
		#0b0b0d;
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.06);
	animation: pt-vinyl 8s linear infinite;
}
.pt-label-card::after { /* light catching the grooves */
	content: ""; position: absolute; top: -46px; right: -46px; z-index: -1; width: 150px; height: 150px; border-radius: 50%; pointer-events: none;
	background: conic-gradient(from 30deg, transparent 0 20%, rgb(255 255 255 / 0.16) 25%, transparent 30% 70%, rgb(255 255 255 / 0.1) 75%, transparent 80%);
}
.pt-label-card:hover::before { animation-duration: 1.6s; }
@keyframes pt-vinyl { to { rotate: 1turn; } }
.pt-label-card__title { margin: 0 0 1rem !important; font: 700 clamp(1.7rem, 3vw, 2.3rem)/1.1 var(--pt-banner) !important; text-transform: uppercase; letter-spacing: 0.05em; }
.pt-label-card p { margin: 0 0 0.9rem; color: #e6d8c6; }
.pt-label-card__lede { margin-bottom: 0 !important; font: 400 1.55rem/1.35 var(--pt-script) !important; color: var(--pt-accent) !important; }
@media (max-width: 781px) {
	.wp-block-cover .wp-block-cover__inner-container > .pt-label-card { margin-inline: auto !important; }
	.pt-label-card::before, .pt-label-card::after { width: 110px; height: 110px; top: -36px; right: -14px; }
}

/* Releases: record sleeves. On hover the record slides out and spins. */
.pt-releases { margin-block: clamp(4rem, 8vw, 6rem) !important; padding-inline: var(--pt-gutter); }
.pt-releases .pt-section-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important; }
.pt-releases__sub { margin-top: 0.6rem !important; font-size: clamp(1.4rem, 2.6vw, 1.8rem) !important; color: var(--pt-accent) !important; }
.pt-sleeves { gap: 2.25rem 1.75rem !important; margin-top: 3rem !important; }
.wp-block-image.pt-sleeve { position: relative; margin: 0; isolation: isolate; }
.wp-block-image.pt-sleeve a { position: relative; display: block; border-radius: 6px; }
.wp-block-image.pt-sleeve a::before { /* the record inside the sleeve */
	content: ""; position: absolute; top: 3%; left: 3%; z-index: -1; width: 94%; aspect-ratio: 1; border-radius: 50%;
	background:
		radial-gradient(circle, #be73fb 0 12%, #2a0f3a 12.5% 14%, #0b0b0d 14.5% 15%, transparent 15.5%),
		conic-gradient(from 20deg, transparent 0 18%, rgb(255 255 255 / 0.28) 25%, transparent 32% 68%, rgb(234 219 255 / 0.2) 75%, transparent 82%),
		repeating-radial-gradient(circle, #121216 0 2px, #26262d 2px 3px);
	box-shadow: 0 0 0 2px rgb(201 163 245 / 0.45), 0 0 26px rgb(190 115 251 / 0.45), 0 12px 30px rgb(0 0 0 / 0.6);
	transition: translate 0.7s cubic-bezier(.3,1.3,.5,1);
}
.wp-block-image.pt-sleeve img {
	position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px;
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.2), 0 18px 40px rgb(0 0 0 / 0.55);
	transition: transform 0.6s cubic-bezier(.3,1.3,.5,1), box-shadow 0.4s ease;
}
.wp-block-image.pt-sleeve figcaption { margin-top: 1.1rem; text-align: center; color: var(--pt-muted); font-size: 0.95rem; line-height: 1.4; }
.wp-block-image.pt-sleeve figcaption strong { display: block; margin-bottom: 0.2rem; color: #fff; font: 700 1.05rem/1.2 var(--pt-banner); text-transform: uppercase; letter-spacing: 0.08em; }
.wp-block-image.pt-sleeve figcaption::after { content: "Listen ↗"; display: block; margin-top: 0.5rem; color: var(--pt-lilac); font: 700 0.68rem/1 var(--pt-body); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; transition: opacity 0.3s ease; }
.wp-block-image.pt-sleeve:is(:hover, :focus-within) a::before { translate: 44% 0; animation: pt-vinyl 2.4s linear infinite; }
.wp-block-image.pt-sleeve:is(:hover, :focus-within) img { transform: translateX(-8%) rotate(-3deg); box-shadow: 0 0 0 1px rgb(201 163 245 / 0.5), 0 0 34px rgb(190 115 251 / 0.3), 0 24px 50px rgb(0 0 0 / 0.6); }
.wp-block-image.pt-sleeve:is(:hover, :focus-within) figcaption::after { opacity: 1; }
.pt-sleeve__title { display: block; color: #e6d8c6; }
.pt-sleeve__meta { display: block; margin-top: 0.2rem; color: var(--pt-muted); font-size: 0.78rem; letter-spacing: 0.04em; }
.pt-sleeve__new { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 1; padding: 0.3rem 0.6rem; border-radius: 99px; color: #fff; font: 700 0.65rem/1 var(--pt-body); letter-spacing: 0.14em; text-transform: uppercase; background: linear-gradient(110deg, #7c3aed, #d0266f); box-shadow: 0 0 14px rgb(208 38 111 / 0.6); }
.pt-sleeves > .wp-block-column { position: relative; z-index: 1; }
.pt-sleeves > .wp-block-column:is(:hover, :focus-within) { z-index: 2; }
.wp-block-image.pt-sleeve a:focus-visible { outline: 2px solid var(--pt-lilac); outline-offset: 4px; }
@media (max-width: 781px) {
	.wp-block-columns.pt-sleeves { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.1rem !important; }
	.wp-block-image.pt-sleeve a::before { translate: 14% 0; } /* a little of the record always shows */
	.wp-block-image.pt-sleeve figcaption { font-size: 0.85rem; }
	.wp-block-image.pt-sleeve figcaption strong { font-size: 0.76rem; letter-spacing: 0.02em; overflow-wrap: normal; word-break: keep-all; }
	.wp-block-image.pt-sleeve:is(:hover, :focus-within) a::before { translate: 24% 0; }
}
@media (min-width: 782px) and (max-width: 1023px) {
	.wp-block-columns.pt-sleeves { flex-wrap: wrap !important; }
	.wp-block-columns.pt-sleeves > .wp-block-column { flex-basis: calc(50% - 1rem) !important; }
}

/* The Flat Circle Podcast: an ON AIR light and sound-wave bars. */
.wp-block-cover.pt-podcast > .wp-block-cover__background.has-background-dim {
	background-image: linear-gradient(90deg, transparent 25%, rgb(8 2 10 / 0.75) 65%), linear-gradient(180deg, var(--pt-base), transparent 14%, transparent 86%, var(--pt-base));
}
.wp-block-cover .wp-block-cover__inner-container > .pt-podcast-card {
	max-width: 480px !important; margin-left: auto !important; margin-right: clamp(0px, 4vw, 80px) !important;
	padding: clamp(1.75rem, 4vw, 2.5rem) !important; border-radius: 20px;
	background: linear-gradient(170deg, rgb(26 8 30 / 0.84), rgb(10 3 12 / 0.9)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.3), 0 30px 70px rgb(0 0 0 / 0.6);
}
.pt-onair {
	display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 1rem !important; padding: 0.4rem 0.8rem; border-radius: 6px;
	color: #ffd6e4; font: 700 0.72rem/1 var(--pt-body); letter-spacing: 0.26em; text-transform: uppercase;
	box-shadow: inset 0 0 0 1.5px #ff3d7f, 0 0 16px rgb(255 61 127 / 0.55);
	text-shadow: 0 0 8px rgb(255 61 127 / 0.9);
	animation: pt-onair 2.6s ease-in-out infinite;
}
.pt-onair::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff3d7f; box-shadow: 0 0 10px #ff3d7f; }
@keyframes pt-onair { 0%, 100% { opacity: 1; } 46% { opacity: 1; } 50% { opacity: 0.55; } 54% { opacity: 1; } 58% { opacity: 0.7; } 62% { opacity: 1; } }
.pt-podcast-card__title { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 0.75rem !important; font: 700 clamp(1.7rem, 3vw, 2.3rem)/1.1 var(--pt-banner) !important; text-transform: uppercase; letter-spacing: 0.05em; }
.pt-podcast-card__title::after { /* sound-wave bars */
	content: ""; flex: none; width: 30px; height: 22px;
	background:
		linear-gradient(var(--pt-accent), var(--pt-accent-deep)) 0 100% / 4px 40% no-repeat,
		linear-gradient(var(--pt-accent), var(--pt-accent-deep)) 6.5px 100% / 4px 80% no-repeat,
		linear-gradient(var(--pt-accent), var(--pt-accent-deep)) 13px 100% / 4px 55% no-repeat,
		linear-gradient(var(--pt-accent), var(--pt-accent-deep)) 19.5px 100% / 4px 95% no-repeat,
		linear-gradient(var(--pt-accent), var(--pt-accent-deep)) 26px 100% / 4px 30% no-repeat;
	filter: drop-shadow(0 0 6px rgb(218 112 214 / 0.7));
	animation: pt-eq 1.1s ease-in-out infinite alternate;
}
@keyframes pt-eq {
	0% { background-size: 4px 40%, 4px 80%, 4px 55%, 4px 95%, 4px 30%; }
	33% { background-size: 4px 90%, 4px 35%, 4px 100%, 4px 45%, 4px 70%; }
	66% { background-size: 4px 55%, 4px 100%, 4px 30%, 4px 75%, 4px 95%; }
	100% { background-size: 4px 75%, 4px 50%, 4px 85%, 4px 35%, 4px 55%; }
}
.pt-podcast-card__lede { margin: 0 0 0.6rem !important; color: #fff; font: 700 1.15rem/1.4 var(--pt-display); }
.pt-podcast-card p { color: #e6d8c6; }
@media (max-width: 781px) { .wp-block-cover .wp-block-cover__inner-container > .pt-podcast-card { margin-inline: auto !important; } }

/* Quote */
.wp-block-cover.pt-other-quote > .wp-block-cover__background.has-background-dim {
	background-image: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(6 2 10 / 0.7), rgb(6 2 10 / 0.3) 80%), linear-gradient(180deg, var(--pt-base), transparent 18%, transparent 82%, var(--pt-base));
}
.pt-other-quote__text {
	max-width: 24ch; margin: 0 auto !important;
	font: 400 clamp(2rem, 4.6vw, 3.2rem)/1.3 var(--pt-script) !important; color: var(--pt-accent);
	text-shadow: 0 0 30px rgb(218 112 214 / 0.45), 0 3px 16px rgb(0 0 0 / 0.85);
}
.pt-other-quote__text::before, .pt-other-quote__text::after { content: "✦"; display: block; margin: 0.6rem 0; font: 400 1rem/1 var(--pt-body); color: var(--pt-lilac); }

/* Let's Collaborate: the form in a glass card between the picture's two columns. */
.wp-block-cover .wp-block-cover__inner-container > .pt-collab-card {
	max-width: 560px !important; padding: clamp(1.75rem, 4vw, 2.5rem) !important; border-radius: 20px;
	background: linear-gradient(170deg, rgb(26 8 30 / 0.86), rgb(10 3 12 / 0.92)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.3), 0 0 60px rgb(190 115 251 / 0.18), 0 30px 70px rgb(0 0 0 / 0.6);
}
.pt-collab-card .pt-section-title { margin-top: 0 !important; }
/* The picture already shows the eight kinds of collaboration on wide screens; on smaller
   screens (where the picture's edges are cropped) they appear as readable cards. */
.pt-collab-list { display: none; }
@media (max-width: 1100px) {
	.pt-collab-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 1.5rem 0 1.75rem; padding: 0; list-style: none; }
	.pt-collab-list li {
		padding: 0.75rem 0.85rem; border-radius: 12px; color: #d9c9b6; font-size: 0.85rem; line-height: 1.4;
		background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(201 163 245 / 0.2);
	}
	.pt-collab-list strong { display: block; margin-bottom: 0.2rem; color: #fff; font: 700 0.78rem/1.2 var(--pt-body); letter-spacing: 0.1em; text-transform: uppercase; }
}
@media (max-width: 420px) { .pt-collab-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contact (pattern: poetictemperance/contact) ---------- */

.entry-content > .pt-contact-hero { margin-block: 0 !important; }
.pt-contact-hero {
	position: relative; isolation: isolate; overflow: hidden;
	padding: clamp(3rem, 7vw, 6rem) var(--pt-gutter) clamp(3rem, 6vw, 5rem) !important;
	background:
		radial-gradient(ellipse 50% 70% at 75% 45%, rgb(214 120 40 / 0.12), transparent 70%),
		radial-gradient(ellipse 45% 60% at 15% 40%, rgb(122 58 216 / 0.22), transparent 70%),
		linear-gradient(180deg, #0c0409, var(--pt-base));
}
.pt-contact-hero::before { /* grain */
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: url("../images/grain.svg") 0 0 / 220px 220px; opacity: 0.16; mix-blend-mode: overlay;
}
.pt-contact-hero__cols { gap: clamp(2rem, 5vw, 4rem) !important; }
@media (min-width: 782px) {
	.pt-contact-hero__cols > .pt-contact-hero__text { flex-basis: 54% !important; flex-grow: 0 !important; }
	.pt-contact-title { white-space: nowrap; font-size: clamp(2.6rem, 5.4vw, 4.6rem) !important; }
}
.pt-contact-hero__text .pt-eyebrow { margin: 0 0 0.6rem; }
.pt-contact-title {
	margin: 0 !important; color: var(--pt-text);
	font: 700 clamp(2.8rem, 6.5vw, 5.2rem)/1 var(--pt-banner) !important; text-transform: uppercase; letter-spacing: 0.04em;
	text-shadow: 0 0 40px rgb(190 115 251 / 0.25);
	animation: pt-ink-in 1.6s cubic-bezier(.3,.6,.2,1) both;
}
/* "I'd love to hear from you." with an underline that draws itself and a twinkling star. */
.pt-contact-script {
	position: relative; display: inline-block; margin: 0.9rem 0 0 !important; padding-bottom: 0.55em; padding-right: 1.4em;
	font: 400 clamp(2rem, 4.4vw, 3.1rem)/1.15 var(--pt-script); color: var(--pt-accent);
	text-shadow: 0 0 24px rgb(218 112 214 / 0.45);
}
.pt-contact-script::after {
	content: ""; position: absolute; left: 0; right: 1.2em; bottom: 0; height: 0.45em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 80 6, 170 4, 250 7 S 360 12, 397 6' fill='none' stroke='%23da70d6' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	filter: drop-shadow(0 0 6px rgb(218 112 214 / 0.8));
	clip-path: inset(0 100% 0 0); animation: pt-draw 1.3s cubic-bezier(.6,.1,.3,1) 1s forwards;
}
.pt-contact-script::before {
	content: "✦"; position: absolute; right: 0; bottom: 0.05em; font: 400 0.55em/1 var(--pt-body); color: #fff;
	text-shadow: 0 0 12px rgb(218 112 214 / 0.95);
	animation: pt-star-in 0.5s cubic-bezier(.3,1.6,.5,1) 2.2s both, pt-twinkle 2.4s ease-in-out 2.7s infinite;
}
@keyframes pt-draw { to { clip-path: inset(0 0 0 0); } }
@keyframes pt-star-in { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }

/* The scene, in a glowing frame, with candlelight that flickers. */
.wp-block-image.pt-contact-scene {
	position: relative; margin: 0; border-radius: 22px; overflow: hidden; rotate: 1.2deg;
	box-shadow: 0 0 0 1px rgb(234 200 160 / 0.25), 0 0 60px rgb(214 120 40 / 0.18), 0 34px 70px rgb(0 0 0 / 0.6);
	transition: rotate 0.6s cubic-bezier(.3,1.4,.5,1), box-shadow 0.4s ease;
	animation: pt-rise 1s cubic-bezier(.2,.8,.2,1) 0.3s both;
}
.wp-block-image.pt-contact-scene img { display: block; width: 100%; height: auto; }
.wp-block-image.pt-contact-scene::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
	background: radial-gradient(circle at 63.5% 31%, rgb(255 190 110 / 0.5), rgb(255 150 60 / 0.15) 14%, transparent 32%);
	animation: pt-flicker 3.4s ease-in-out infinite;
}
@keyframes pt-flicker { 0%, 100% { opacity: 0.85; } 12% { opacity: 1; } 24% { opacity: 0.7; } 38% { opacity: 0.95; } 52% { opacity: 0.78; } 70% { opacity: 1; } 84% { opacity: 0.82; } }
.wp-block-image.pt-contact-scene:hover { rotate: 0deg; box-shadow: 0 0 0 1px rgb(234 200 160 / 0.45), 0 0 80px rgb(214 120 40 / 0.3), 0 34px 70px rgb(0 0 0 / 0.6); }

/* Your note and the letter card. */
.pt-contact-main { margin-block: clamp(3rem, 6vw, 5rem) !important; padding-inline: var(--pt-gutter); }
.pt-contact-main__cols { gap: clamp(2.5rem, 6vw, 5rem) !important; align-items: flex-start !important; }
.pt-contact-note__lede { margin-top: 0 !important; color: #fff; font: italic 500 clamp(1.3rem, 2.2vw, 1.55rem)/1.5 var(--pt-display) !important; }
.pt-contact-note p { color: #e6d8c6; font-size: 1.08rem; line-height: 1.8; }
/* "xo, PT" writes itself in, like a signature, when it comes into view. */
.pt-signature {
	display: inline-block; margin: 0.4rem 0 2rem !important; padding-right: 0.3em;
	font: 400 clamp(2.4rem, 4vw, 3rem)/1.1 var(--pt-script) !important; color: var(--pt-accent) !important;
	text-shadow: 0 0 22px rgb(218 112 214 / 0.5);
}
.pt-signature.is-armed { clip-path: inset(-20% 100% -20% 0); }
.pt-signature.is-armed.is-in { animation: pt-sign 1.6s cubic-bezier(.6,.1,.3,1) forwards; }
@keyframes pt-sign { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }

.pt-reach { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.pt-reach a {
	position: relative; display: flex; flex-direction: column; gap: 0.25rem;
	padding: 1rem 3rem 1rem 1.2rem; border-radius: 14px; text-decoration: none; color: var(--pt-muted); font-size: 0.92rem;
	background: rgb(255 255 255 / 0.03); box-shadow: inset 0 0 0 1px rgb(201 163 245 / 0.2);
	transition: transform 0.35s cubic-bezier(.3,1.4,.5,1), box-shadow 0.3s ease, background 0.3s ease;
}
.pt-reach strong { color: #fff; font: 700 0.95rem/1.2 var(--pt-banner); text-transform: uppercase; letter-spacing: 0.06em; }
.pt-reach a::after { content: "→"; position: absolute; right: 1.2rem; top: 50%; translate: 0 -50%; color: var(--pt-lilac); font-size: 1.2rem; transition: translate 0.35s cubic-bezier(.3,1.6,.5,1); }
.pt-reach a:is(:hover, :focus-visible) {
	outline: none; transform: translateX(4px); background: rgb(190 115 251 / 0.1);
	box-shadow: inset 0 0 0 1px var(--pt-lilac), 0 0 24px rgb(190 115 251 / 0.3);
}
.pt-reach a:is(:hover, :focus-visible)::after { translate: 6px -50%; }

/* The form as a letter with a glowing wax seal; the card lights up while you write. */
.pt-contact-letter {
	position: relative; padding: 3.25rem clamp(1.4rem, 4vw, 2.5rem) 2rem !important; border-radius: 22px;
	background: linear-gradient(170deg, rgb(36 12 32 / 0.92), rgb(14 4 12 / 0.95));
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.25), 0 30px 70px rgb(0 0 0 / 0.55);
	transition: box-shadow 0.5s ease;
}
.pt-contact-letter::before { /* the seal */
	content: "✦"; position: absolute; top: 0; left: 50%; translate: -50% -50%; z-index: 2;
	display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
	color: #fff; font: 400 1.6rem/1 var(--pt-body);
	background: radial-gradient(circle at 35% 30%, #c04fd0, #6b1e7a 55%, #3a0d45);
	box-shadow: 0 0 0 4px rgb(16 5 20), 0 0 0 5px rgb(201 163 245 / 0.4), 0 0 26px rgb(190 115 251 / 0.6), inset 0 -4px 10px rgb(0 0 0 / 0.35);
	text-shadow: 0 0 10px rgb(255 255 255 / 0.8);
	transition: box-shadow 0.5s ease, rotate 0.8s cubic-bezier(.3,1.5,.5,1);
}
.pt-contact-letter::after { /* a slowly turning gradient ring around the card's edge */
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
	background: conic-gradient(from var(--pt-angle, 0deg), #3d5bd8, var(--pt-accent-deep), var(--pt-accent), transparent 40%, transparent 60%, #3d5bd8);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0.35; animation: pt-angle 8s linear infinite; transition: opacity 0.5s ease;
}
@property --pt-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pt-angle { to { --pt-angle: 360deg; } }
.pt-contact-letter:focus-within { box-shadow: 0 0 0 1px rgb(201 163 245 / 0.45), 0 0 60px rgb(190 115 251 / 0.25), 0 30px 70px rgb(0 0 0 / 0.55); }
.pt-contact-letter:focus-within::after { opacity: 1; animation-duration: 3s; }
.pt-contact-letter:focus-within::before { rotate: 20deg; box-shadow: 0 0 0 4px rgb(16 5 20), 0 0 0 5px var(--pt-lilac), 0 0 40px rgb(218 112 214 / 0.9), inset 0 -4px 10px rgb(0 0 0 / 0.35); }
.pt-contact-letter__title { margin: 0 0 1.5rem !important; font: 700 clamp(1.6rem, 3vw, 2.1rem)/1.1 var(--pt-banner) !important; text-transform: uppercase; letter-spacing: 0.05em; }
/* Gravity Forms' thank-you message pops in. */
.pt-contact-letter .gform_confirmation_message, .pt-collab-card .gform_confirmation_message, .pt-connect-card .gform_confirmation_message {
	padding: 1.5rem 1rem; text-align: center; color: var(--pt-text); font: 500 1.2rem/1.5 var(--pt-display); font-style: italic;
	animation: pt-dialog-in 0.7s cubic-bezier(.2,.8,.2,1) both;
}
.pt-contact-letter .gform_confirmation_message::before, .pt-collab-card .gform_confirmation_message::before, .pt-connect-card .gform_confirmation_message::before {
	content: "✦"; display: block; margin-bottom: 0.6rem; font: 400 1.8rem/1 var(--pt-body); font-style: normal; color: #fff;
	text-shadow: 0 0 14px rgb(190 115 251 / 0.95), 0 0 32px rgb(218 112 214 / 0.7); animation: pt-twinkle 1.6s ease-in-out infinite;
}

/* Admins only, while Gravity Forms isn't active: shows where the form will go. */
.pt-form-placeholder {
	margin: 0; padding: 1.5rem; border: 1.5px dashed rgb(201 163 245 / 0.45); border-radius: 14px;
	color: var(--pt-muted); font-size: 0.92rem; text-align: center;
}

@media (max-width: 781px) {
	.pt-contact-hero__text { text-align: center; }
	.pt-contact-title { font-size: clamp(2rem, 10vw, 2.6rem) !important; white-space: nowrap; }
	.pt-contact-script { font-size: clamp(1.4rem, 6.4vw, 1.9rem); white-space: nowrap; }
	.wp-block-image.pt-contact-scene { rotate: 0deg; }
	.pt-contact-letter { margin-top: 2.5rem; }
}

/* ---------- A single story (views/single-post.twig) ---------- */

/* Opening: words beside the featured image (large, uncropped), over a blurred glow of it. */
.story-hero {
	position: relative; isolation: isolate; overflow: hidden;
	padding: clamp(3rem, 6vw, 5.5rem) var(--pt-gutter) clamp(3.5rem, 7vw, 6rem);
	background: radial-gradient(ellipse 70% 80% at 70% 40%, rgb(122 58 216 / 0.25), transparent 70%), #10050c;
}
.story-hero::before { /* the picture itself, blurred into a glow */
	content: ""; position: absolute; inset: -12%; z-index: -2;
	background: var(--story-glow, none) center / cover no-repeat;
	filter: blur(70px) saturate(1.5) brightness(0.55); opacity: 0.95;
	animation: pt-glow-drift 24s ease-in-out infinite alternate;
}
@keyframes pt-glow-drift { to { transform: scale(1.12) translate(2%, -2%); } }
.story-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		url("../images/grain.svg") 0 0 / 220px 220px,
		linear-gradient(180deg, rgb(8 2 10 / 0.35), transparent 30%, transparent 70%, var(--pt-base));
	background-blend-mode: overlay, normal;
	opacity: 0.9;
}
.story-hero__inner {
	display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
	max-width: var(--pt-wide); margin-inline: auto;
}
.has-image .story-hero__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr); }
.story:not(.has-image) .story-hero__text { max-width: 820px; margin-inline: auto; text-align: center; }
.story:not(.has-image) .story-meta { justify-content: center; }

.story-hero__eyebrow { margin: 0 0 1.1rem; font: 700 0.78rem/1 var(--pt-body); letter-spacing: 0.3em; text-transform: uppercase; }
.story-hero__eyebrow a { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--pt-lilac); text-decoration: none; }
.story-hero__eyebrow .pt-icon { width: 16px; height: 16px; rotate: 180deg; transition: translate 0.35s cubic-bezier(.3,1.6,.5,1); }
.story-hero__eyebrow a:is(:hover, :focus-visible) { color: #fff; }
.story-hero__eyebrow a:is(:hover, :focus-visible) .pt-icon { translate: -5px 0; }
.story-hero__title {
	margin: 0; color: var(--pt-text); text-wrap: balance;
	font: 700 clamp(2.3rem, 4.6vw, 4.1rem)/1.06 var(--pt-display) !important;
	text-shadow: 0 2px 20px rgb(0 0 0 / 0.6);
	animation: pt-ink-in 1.6s cubic-bezier(.3,.6,.2,1) both;
}
.story-meta {
	display: flex; flex-wrap: wrap; gap: 0.4rem 0; margin: 1.5rem 0 0; padding: 0; list-style: none;
	color: #d9c9b6; font: 700 0.74rem/1.4 var(--pt-body); letter-spacing: 0.16em; text-transform: uppercase;
}
.story-meta li:not(:last-child)::after { content: "✦"; margin: 0 0.8em; color: var(--pt-lilac); font-size: 0.8em; }

.story-hero__media { margin: 0; perspective: 1200px; animation: pt-rise 1s cubic-bezier(.2,.8,.2,1) 0.25s both; }
@keyframes pt-rise { from { opacity: 0; translate: 0 30px; } }
.story-image {
	--rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 30%;
	position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
	border-radius: 18px; overflow: hidden; background: #1c050d;
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.3), 0 0 60px rgb(190 115 251 / 0.22), 0 40px 80px rgb(0 0 0 / 0.65);
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease;
}
.story-image.is-tilting { transition-duration: 0.12s, 0.4s; }
.story-image img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: cover; }
.story-image__glare {
	position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
	background: radial-gradient(circle at var(--gx) var(--gy), rgb(255 255 255 / 0.35), transparent 50%);
	opacity: 0; transition: opacity 0.4s ease;
}
.story-image__zoom {
	position: absolute; right: 0.9rem; bottom: 0.9rem; display: grid; place-items: center; width: 42px; height: 42px;
	border-radius: 50%; color: #fff; background: rgb(12 4 16 / 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	box-shadow: inset 0 0 0 1px rgb(234 219 255 / 0.4);
	opacity: 0; scale: 0.8; transition: opacity 0.3s ease, scale 0.35s cubic-bezier(.3,1.6,.5,1);
}
.story-image__zoom .pt-icon { width: 20px; height: 20px; }
.story-image:is(:hover, :focus-visible) { outline: none; box-shadow: 0 0 0 1px rgb(234 219 255 / 0.6), 0 0 80px rgb(190 115 251 / 0.35), 0 40px 80px rgb(0 0 0 / 0.65); }
.story-image:focus-visible { outline: 2px solid var(--pt-lilac); outline-offset: 4px; }
.story-image:is(:hover, :focus-visible) .story-image__glare { opacity: 1; }
.story-image:is(:hover, :focus-visible) .story-image__zoom { opacity: 1; scale: 1; }
@media (hover: none) { .story-image__zoom { opacity: 1; scale: 1; } }

@media (max-width: 899px) {
	.has-image .story-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.story-hero { padding-top: 2.5rem; }
}

/* Reading column, with a sticky share rail beside it on wide screens. */
.story-layout { position: relative; padding-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 1200px) {
	.story-layout { display: grid; grid-template-columns: 64px minmax(0, var(--pt-content)) 64px; justify-content: center; gap: 3rem; }
	.story-layout .story-body { grid-column: 2; }
	.story-layout .story-body > * { padding-inline: 0; }
}
.share-rail { display: none; }
@media (min-width: 1200px) {
	.share-rail {
		grid-column: 1; grid-row: 1; align-self: start;
		position: sticky; top: calc(var(--pt-header-h) + var(--wp-admin--admin-bar--height, 0px) + 2rem);
		display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
	}
	.share-rail .share-btn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
	.share-rail .share-btn span { /* label slides out as a tag on hover */
		position: absolute; left: calc(100% + 10px); top: 50%; translate: -6px -50%; white-space: nowrap; pointer-events: none;
		padding: 0.3rem 0.6rem; border-radius: 6px; background: #2a1140; box-shadow: 0 0 0 1px rgb(201 163 245 / 0.35);
		font-size: 0.68rem; opacity: 0; transition: opacity 0.25s ease, translate 0.25s ease;
	}
	.share-rail .share-btn:is(:hover, :focus-visible) span { opacity: 1; translate: 0 -50%; }
}
.share-rail__label { margin: 0 0 0.3rem; writing-mode: vertical-rl; rotate: 180deg; color: var(--pt-lilac); font: 700 0.68rem/1 var(--pt-body); letter-spacing: 0.3em; text-transform: uppercase; }
.share-btn {
	position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
	min-height: 44px; padding: 0 1rem 0 0.85rem; border: 0; border-radius: 99px; cursor: pointer;
	color: var(--pt-text); text-decoration: none; font: 700 0.75rem/1 var(--pt-body); letter-spacing: 0.1em; text-transform: uppercase;
	background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(201 163 245 / 0.28);
	transition: box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.share-btn[hidden] { display: none; }
.share-btn .pt-icon { width: 19px; height: 19px; flex: none; transition: translate 0.35s cubic-bezier(.3,1.6,.5,1); }
.share-btn:is(:hover, :focus-visible) {
	outline: none; color: #fff;
	background: radial-gradient(circle at 50% 30%, rgb(190 115 251 / 0.45), rgb(74 43 196 / 0.4));
	box-shadow: inset 0 0 0 1px rgb(234 219 255 / 0.6), 0 0 18px rgb(190 115 251 / 0.5);
}
.share-btn:is(:hover, :focus-visible) .pt-icon { translate: 0 -2px; }
.share-btn:active { scale: 0.94; }

/* The words. */
.story-body { font: 400 1.1rem/1.85 var(--pt-body); color: #eadfce; }
.story-body p { margin: 0 0 1.4em; }
.story-body > p:first-of-type { display: flow-root; font-size: 1.24rem; line-height: 1.75; color: #fff; }
.story-body > p:first-of-type::first-letter {
	float: left; margin: 0.06em 0.14em 0 0;
	font: 700 4.4em/0.78 var(--pt-banner);
	background: linear-gradient(160deg, #eadbff, var(--pt-accent-deep) 55%, #3d5bd8);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 0 14px rgb(190 115 251 / 0.45));
}
.story-body strong { color: #fff; }
.story-body a:not(.wp-element-button) {
	color: var(--pt-lilac); text-decoration: none;
	background: linear-gradient(90deg, #3d5bd8, var(--pt-accent-deep), var(--pt-accent)) 0 100% / 100% 1px no-repeat;
	transition: background-size 0.35s ease, color 0.3s ease;
}
.story-body a:not(.wp-element-button):is(:hover, :focus-visible) { color: #fff; background-size: 100% 2px; }
.story-body :is(h2, h3, h4) { margin: 2.2em 0 0.7em; font-family: var(--pt-display); line-height: 1.2; color: #fff; }
.story-body h2::before { content: "✦"; display: block; margin-bottom: 0.4rem; font: 400 0.8rem/1 var(--pt-body); color: var(--pt-lilac); }
.story-body blockquote {
	position: relative; margin: 2.2em auto; padding: 0.5rem 0 0 1.5rem; border: 0;
	border-left: 2px solid transparent; border-image: linear-gradient(#3d5bd8, var(--pt-accent-deep), var(--pt-accent)) 1;
}
.story-body blockquote p { margin: 0; font: 400 clamp(1.5rem, 3vw, 1.9rem)/1.4 var(--pt-script); color: var(--pt-accent); }
.story-body blockquote cite { display: block; margin-top: 0.6rem; font: 700 0.75rem/1 var(--pt-body); font-style: normal; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pt-lilac); }
.story-body hr, .story-body .wp-block-separator { border: 0; height: auto; margin: 2.5em auto; text-align: center; color: var(--pt-lilac); background: none; }
.story-body hr::after, .story-body .wp-block-separator::after { content: "✦  ✦  ✦"; letter-spacing: 0.6em; }
.story-body :is(figure, .wp-block-image) img { border-radius: 12px; box-shadow: 0 20px 50px rgb(0 0 0 / 0.5); }
.story-body figcaption { color: var(--pt-muted); font-size: 0.85rem; text-align: center; }
.story-body ::selection { background: rgb(190 115 251 / 0.45); color: #fff; }

/* The end. */
.story-end { max-width: calc(var(--pt-content) + 2 * var(--pt-gutter)); margin: 0 auto; padding: 1rem var(--pt-gutter) 0; }
.story-end__fin { margin: 1rem 0 2.5rem; text-align: center; color: var(--pt-lilac); letter-spacing: 1em; text-shadow: 0 0 12px rgb(190 115 251 / 0.8); }
.story-tags { justify-content: center; }
.story-share { margin: 0 0 3rem; text-align: center; }
.story-share__label { margin: 0 0 0.9rem; font: 400 1.8rem/1 var(--pt-script); color: var(--pt-accent); }
.story-share__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }

.author-card {
	display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.5rem; align-items: center;
	padding: 1.75rem; border-radius: 18px;
	background: linear-gradient(170deg, rgb(36 12 32 / 0.9), rgb(14 4 12 / 0.95));
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.22), 0 24px 50px rgb(0 0 0 / 0.5);
}
.author-card__mark { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; }
.author-card__mark::before { /* a slowly turning gradient ring */
	content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 2px;
	background: conic-gradient(from 0deg, #3d5bd8, var(--pt-accent-deep), var(--pt-accent), #3d5bd8);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	animation: pt-spin 12s linear infinite;
}
.author-card__mark span { font-size: 2rem; color: #fff; text-shadow: 0 0 16px rgb(190 115 251 / 0.95), 0 0 36px rgb(218 112 214 / 0.6); animation: pt-twinkle 3.2s ease-in-out infinite; }
.author-card__eyebrow { margin: 0; color: var(--pt-lilac); font: 700 0.7rem/1 var(--pt-body); letter-spacing: 0.3em; text-transform: uppercase; }
.author-card__name { margin: 0.4rem 0 0.25rem; font: 700 1.6rem/1.15 var(--pt-display); color: #fff; }
.author-card__bio { margin: 0 0 1.1rem; color: #d9c9b6; font-style: italic; }
.author-card__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.author-card__links .wp-element-button { padding: 0.65rem 1.1rem; font-size: 0.85rem; text-decoration: none; }
.wp-element-button.is-ghost {
	color: var(--pt-text);
	background-image: linear-gradient(rgb(14 5 20 / 0.85), rgb(14 5 20 / 0.85)), var(--pt-btn-grad);
	background-origin: border-box; background-clip: padding-box, border-box; border: 1.5px solid transparent;
	background-size: 100% 100%, 200% 100%;
}
.wp-element-button.is-ghost:is(:hover, :focus-visible) { background-image: var(--pt-btn-sheen), var(--pt-btn-grad); background-clip: border-box; background-size: 250% 100%, 200% 100%; }
.author-card__nl { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--pt-lilac); font-size: 0.9rem; text-decoration: none; }
.author-card__nl .pt-icon { width: 18px; height: 18px; }
.author-card__nl:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
	.author-card { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
	.author-card__links { justify-content: center; }
}

/* Older / newer: the next story's picture shows through, and wakes up on hover. */
.story-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.story-nav__item {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem;
	min-height: 160px; padding: 1.25rem 1.35rem; border-radius: 16px; text-decoration: none; color: var(--pt-text);
	background: #1a0714; box-shadow: 0 0 0 1px rgb(201 163 245 / 0.18);
	transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.story-nav__item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(10 3 10 / 0.92), rgb(10 3 10 / 0.45)); }
.story-nav__bg { position: absolute; inset: 0; z-index: -2; background: center / cover no-repeat; opacity: 0.3; filter: sepia(0.4); scale: 1.04; transition: opacity 0.6s ease, scale 1.2s cubic-bezier(.2,.7,.2,1), filter 0.6s ease; }
.story-nav__item--next { text-align: right; align-items: flex-end; }
.story-nav__label { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--pt-lilac); font: 700 0.7rem/1 var(--pt-body); letter-spacing: 0.2em; text-transform: uppercase; }
.story-nav__label .pt-icon { width: 16px; height: 16px; transition: translate 0.35s cubic-bezier(.3,1.6,.5,1); }
.story-nav__item--prev .story-nav__label .pt-icon { rotate: 180deg; }
.story-nav__title { font: 700 1.25rem/1.2 var(--pt-display); }
.story-nav__item:is(:hover, :focus-visible) {
	outline: none; transform: translateY(-4px);
	box-shadow: 0 0 0 1px rgb(201 163 245 / 0.55), 0 0 30px rgb(190 115 251 / 0.25), 0 20px 44px rgb(0 0 0 / 0.55);
}
.story-nav__item:is(:hover, :focus-visible) .story-nav__bg { opacity: 0.7; scale: 1.12; filter: none; }
.story-nav__item--prev:is(:hover, :focus-visible) .pt-icon { translate: -5px 0; }
.story-nav__item--next:is(:hover, :focus-visible) .pt-icon { translate: 5px 0; }
@media (max-width: 600px) { .story-nav { grid-template-columns: minmax(0, 1fr); } .story-nav__spacer { display: none; } }

.story-more {
	max-width: calc(var(--pt-wide) + 2 * var(--pt-gutter)); margin: clamp(4rem, 8vw, 6rem) auto 0; padding: 0 var(--pt-gutter);
	text-align: center;
}
.story-more .ink-grid { margin-top: 2.5rem; text-align: left; }
.story-comments { max-width: calc(var(--pt-content) + 2 * var(--pt-gutter)); margin: 4rem auto 0; padding-inline: var(--pt-gutter); }
.story-comments .comment-body { padding: 1.25rem 1.35rem; margin-bottom: 1rem; border: 0; border-radius: 14px; background: rgb(255 255 255 / 0.03); box-shadow: inset 0 0 0 1px rgb(201 163 245 / 0.16); }
.story-comments :is(.comments-title, .comment-reply-title) { font-family: var(--pt-display); }

/* Full-size picture viewer. */
.pt-lightbox {
	max-width: 94vw; max-height: 94dvh; padding: 0; border: 0; overflow: visible; background: transparent;
}
.pt-lightbox::backdrop { background: rgb(5 1 8 / 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pt-lightbox[open] { animation: pt-zoom-in 0.4s cubic-bezier(.2,.8,.2,1); }
.pt-lightbox[open]::backdrop { animation: pt-fade-in 0.3s ease; }
@keyframes pt-zoom-in { from { opacity: 0; scale: 0.9; } }
.pt-lightbox img { display: block; max-width: 94vw; max-height: 90dvh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 0 80px rgb(190 115 251 / 0.3); cursor: zoom-out; }
.pt-lightbox form { position: absolute; top: -0.75rem; right: -0.75rem; z-index: 1; margin: 0; }

/* "Copy quote" bubble over selected text, and the little confirmation toast. */
.quote-bubble {
	position: fixed; z-index: 120; translate: -50% calc(-100% - 10px);
	display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem 0.5rem 0.7rem;
	border: 0; border-radius: 99px; cursor: pointer; color: #fff;
	font: 700 0.72rem/1 var(--pt-body); letter-spacing: 0.12em; text-transform: uppercase;
	background: var(--pt-btn-grad); background-size: 200% 100%; box-shadow: var(--pt-btn-glow);
	animation: pt-pop 0.3s cubic-bezier(.3,1.6,.5,1);
}
.quote-bubble[hidden] { display: none; }
.quote-bubble .pt-icon { width: 16px; height: 16px; }
@keyframes pt-pop { from { opacity: 0; scale: 0.7; } }
.pt-toast {
	position: fixed; left: 50%; bottom: 1.5rem; z-index: 130; translate: -50% 20px; margin: 0;
	padding: 0.7rem 1.2rem; border-radius: 99px; pointer-events: none;
	color: #fff; font: 700 0.85rem/1 var(--pt-body); letter-spacing: 0.06em;
	background: #2a1140; box-shadow: 0 0 0 1px rgb(201 163 245 / 0.45), 0 0 30px rgb(190 115 251 / 0.4);
	opacity: 0; transition: opacity 0.3s ease, translate 0.35s cubic-bezier(.3,1.6,.5,1);
}
.pt-toast.is-shown { opacity: 1; translate: -50% 0; }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Print ---------- */

@media print {
	.site-header, .site-footer, .announcement, .post-nav, .comments-area, .pt-livelist-slot { display: none !important; }
	body { background: #fff; color: #000; }
	a { color: #000; }
}