/**
 * Parkonomics White Papers
 *
 * Token-driven on purpose. Every colour and face resolves to the active theme's
 * theme.json presets first and only falls back to a literal if a preset is
 * missing, so the section inherits the site's design rather than restating it.
 * If the palette is ever retuned in theme.json, this stylesheet follows.
 */

.pkwp-paper,
.pkwp-section {
	--pkwp-cream: var(--wp--preset--color--cream, #faf8f2);
	--pkwp-ink: var(--wp--preset--color--ink, #151c28);
	--pkwp-navy: var(--wp--preset--color--navy, #182338);
	--pkwp-red: var(--wp--preset--color--brand-red, var(--wp--preset--color--red, #c23a2b));
	--pkwp-gold: var(--wp--preset--color--gold, #a87b33);
	--pkwp-tan: var(--wp--preset--color--tan, #ede4d0);

	--pkwp-muted: #3a4252;
	--pkwp-quiet: #5a6270;
	--pkwp-rule: #ddd6c5;
	--pkwp-rule-strong: #c9c0ae;
	--pkwp-panel: #f4efe4;

	--pkwp-display: var(--wp--preset--font-family--playfair-display, var(--wp--preset--font-family--display, "Playfair Display", Georgia, serif));
	--pkwp-body: var(--wp--preset--font-family--source-serif-4, var(--wp--preset--font-family--body, "Source Serif 4", Georgia, serif));
	--pkwp-mono: var(--wp--preset--font-family--ibm-plex-mono, var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, monospace));
}

/* -------------------------------------------------------------------------
 * Shared pieces
 * ---------------------------------------------------------------------- */

.pkwp-kicker {
	font-family: var(--pkwp-mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pkwp-gold);
	margin: 0 0 1rem;
}

.pkwp-panel {
	border: 1px solid var(--pkwp-rule-strong);
	background: var(--pkwp-panel);
	margin: 2rem 0;
}

.pkwp-panel__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.7rem 1.4rem;
	border-bottom: 1px solid var(--pkwp-rule-strong);
	font-family: var(--pkwp-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6b5426;
}

.pkwp-panel__note {
	letter-spacing: 0.06em;
	text-transform: none;
	color: #8a7448;
}

.pkwp-panel__body {
	padding: 1.25rem 1.4rem;
}

.pkwp-badge {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	font-family: var(--pkwp-mono);
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--pkwp-navy);
	color: var(--pkwp-cream);
}

.pkwp-badge--peer-review,
.pkwp-badge--development {
	background: transparent;
	color: var(--pkwp-quiet);
	border: 1px solid var(--pkwp-rule-strong);
}

.pkwp-btn {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.9rem;
	margin-bottom: 0.6rem;
	border: 1px solid #3e4a63;
	color: #e8e3d6;
	font-family: var(--pkwp-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	background: transparent;
	cursor: pointer;
	min-height: 44px;
}

.pkwp-btn:hover,
.pkwp-btn:focus-visible {
	border-color: var(--pkwp-gold);
	color: #fff;
	text-decoration: none;
}

.pkwp-btn--primary {
	background: var(--pkwp-red);
	border-color: var(--pkwp-red);
	color: #fff;
}

.pkwp-btn--primary:hover,
.pkwp-btn--primary:focus-visible {
	background: #a62f22;
	border-color: #a62f22;
	color: #fff;
}

.pkwp-btn--small {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 0.55rem 0.9rem;
	border-color: var(--pkwp-rule-strong);
	color: var(--pkwp-muted);
	background: var(--pkwp-cream);
}

.pkwp-btn--small:hover,
.pkwp-btn--small:focus-visible {
	border-color: var(--pkwp-ink);
	color: var(--pkwp-ink);
}

.pkwp-chip {
	display: inline-block;
	padding: 0.4rem 0.75rem;
	margin: 0 0.4rem 0.4rem 0;
	border: 1px solid var(--pkwp-rule-strong);
	color: var(--pkwp-muted);
	font-family: var(--pkwp-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	min-height: 32px;
}

.pkwp-chip--primary {
	border-color: var(--pkwp-red);
	color: var(--pkwp-red);
}

.pkwp-chip:hover,
.pkwp-chip:focus-visible {
	border-color: var(--pkwp-ink);
	color: var(--pkwp-ink);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Paper masthead
 * ---------------------------------------------------------------------- */

.pkwp-masthead {
	margin-bottom: 1.75rem;
	padding-bottom: 1.5rem;
	border-bottom: 3px double var(--pkwp-ink);
}

.pkwp-masthead__title {
	font-family: var(--pkwp-display);
	font-size: clamp(2.4rem, 6vw, 3.9rem);
	line-height: 1.03;
	letter-spacing: -0.02em;
	margin: 0 0 0.6rem;
}

.pkwp-masthead__dek {
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	line-height: 1.4;
	color: var(--pkwp-muted);
	margin: 0 0 1.2rem;
}

.pkwp-masthead__byline {
	font-size: 1rem;
	margin: 0 0 0.35rem;
}

.pkwp-masthead__byline span {
	color: var(--pkwp-quiet);
}

.pkwp-masthead__meta {
	font-family: var(--pkwp-mono);
	font-size: 0.72rem;
	color: var(--pkwp-quiet);
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Bibliographic record
 * ---------------------------------------------------------------------- */

.pkwp-record__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.1rem 1.6rem;
	margin: 0;
	padding: 1.25rem 1.4rem;
}

.pkwp-record__cell dt {
	font-family: var(--pkwp-mono);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6b7280;
	margin: 0 0 0.25rem;
}

.pkwp-record__cell dd {
	font-family: var(--pkwp-mono);
	font-size: 0.8rem;
	color: var(--pkwp-ink);
	margin: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 900px) {
	.pkwp-record__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.pkwp-record__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Abstract
 * ---------------------------------------------------------------------- */

.pkwp-abstract {
	display: flex;
	gap: 1.9rem;
	margin: 1.75rem 0;
}

.pkwp-abstract__label {
	flex: 0 0 9.5rem;
}

.pkwp-abstract__label h2 {
	font-family: var(--pkwp-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pkwp-ink);
	border-top: 2px solid var(--pkwp-red);
	padding-top: 0.5rem;
	margin: 0.25rem 0 0;
}

.pkwp-abstract__body p {
	font-size: 1.06rem;
	line-height: 1.68;
	color: #2a3142;
	margin: 0 0 0.9rem;
}

.pkwp-keywords {
	margin: 1rem 0 0 !important;
	font-size: 0.9rem !important;
}

.pkwp-keywords__label {
	display: block;
	font-family: var(--pkwp-mono);
	font-size: 0.64rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b7280;
	margin-bottom: 0.2rem;
}

@media (max-width: 782px) {
	.pkwp-abstract {
		display: block;
	}

	.pkwp-abstract__label {
		margin-bottom: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
 * Editions and downloads
 * ---------------------------------------------------------------------- */

.pkwp-edition {
	border-left: 4px solid var(--pkwp-rule-strong);
	padding-left: 0.9rem;
	margin-bottom: 1rem;
}

.pkwp-edition--record {
	border-left-color: var(--pkwp-red);
}

.pkwp-edition h3 {
	font-family: var(--pkwp-body);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.15rem;
}

.pkwp-edition p {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--pkwp-quiet);
	margin: 0;
}

.pkwp-downloads {
	background: var(--pkwp-navy);
	padding: 1.25rem 1.4rem;
}

.pkwp-downloads__head {
	font-family: var(--pkwp-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #c9a961;
	margin-bottom: 0.9rem;
}

/* -------------------------------------------------------------------------
 * Revision history
 * ---------------------------------------------------------------------- */

.pkwp-revision {
	display: flex;
	gap: 1.1rem;
	padding-bottom: 0.9rem;
	margin-bottom: 0.9rem;
	border-bottom: 1px dotted var(--pkwp-rule-strong);
}

.pkwp-revision:last-of-type {
	border-bottom: 0;
	margin-bottom: 0;
}

.pkwp-revision__when {
	flex: 0 0 8rem;
	font-family: var(--pkwp-mono);
	font-size: 0.74rem;
	line-height: 1.5;
	color: var(--pkwp-ink);
}

.pkwp-revision__when span {
	display: block;
	color: #8a7448;
}

.pkwp-revision__what {
	font-size: 0.94rem;
	line-height: 1.6;
	color: #2a3142;
}

.pkwp-revisions__foot {
	margin: 1rem 0 0;
	font-size: 0.84rem;
	font-style: italic;
	color: var(--pkwp-quiet);
}

@media (max-width: 600px) {
	.pkwp-revision {
		display: block;
	}

	.pkwp-revision__when {
		margin-bottom: 0.3rem;
	}
}

/* -------------------------------------------------------------------------
 * Cite
 * ---------------------------------------------------------------------- */

.pkwp-cite__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.pkwp-cite__tab {
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--pkwp-rule-strong);
	background: transparent;
	color: var(--pkwp-quiet);
	font-family: var(--pkwp-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	cursor: pointer;
	min-height: 36px;
}

.pkwp-cite__tab.is-active {
	border-color: var(--pkwp-ink);
	background: var(--pkwp-ink);
	color: var(--pkwp-cream);
}

.pkwp-cite__pane {
	display: none;
}

.pkwp-cite__pane.is-active {
	display: block;
}

.pkwp-cite__pane p {
	font-size: 0.94rem;
	line-height: 1.65;
	color: #2a3142;
	margin: 0 0 1rem;
}

.pkwp-cite__pane pre {
	font-family: var(--pkwp-mono);
	font-size: 0.76rem;
	line-height: 1.7;
	background: #fff;
	border: 1px solid var(--pkwp-rule);
	padding: 0.9rem 1rem;
	overflow-x: auto;
	margin: 0 0 1rem;
}

.pkwp-cite__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* -------------------------------------------------------------------------
 * Section landing
 * ---------------------------------------------------------------------- */

.pkwp-section__title {
	font-family: var(--pkwp-display);
	font-size: clamp(2.6rem, 7vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0 0 0.7rem;
}

.pkwp-section__dek {
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	line-height: 1.55;
	color: var(--pkwp-muted);
	max-width: 48rem;
}

.pkwp-ladder {
	background: var(--pkwp-tan);
	border-left: 3px solid var(--pkwp-gold);
	padding: 1.25rem 1.6rem;
	gap: 0 !important;
	margin: 2rem 0;
}

.pkwp-ladder__rung {
	flex: 1 1 0;
	padding: 0 1.5rem;
	border-right: 1px solid #d6c9a8;
}

.pkwp-ladder__rung:first-child {
	padding-left: 0;
}

.pkwp-ladder__rung:last-child {
	border-right: 0;
	padding-right: 0;
}

.pkwp-ladder__label {
	font-family: var(--pkwp-mono);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b5426;
	margin: 0 0 0.3rem;
}

.pkwp-ladder__text {
	font-size: 0.92rem;
	color: #2a3142;
	margin: 0;
}

@media (max-width: 782px) {
	.pkwp-ladder {
		display: block;
	}

	.pkwp-ladder__rung {
		padding: 0 0 0.9rem;
		border-right: 0;
		border-bottom: 1px solid #d6c9a8;
	}

	.pkwp-ladder__rung:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

.pkwp-index {
	margin: 2.5rem 0;
}

.pkwp-index__head {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 0.4rem;
}

.pkwp-index__head h2 {
	font-family: var(--pkwp-display);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0;
}

.pkwp-index__rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--pkwp-ink);
}

.pkwp-index--preparation .pkwp-index__head h2 {
	color: var(--pkwp-quiet);
}

.pkwp-index--preparation .pkwp-index__rule {
	background: var(--pkwp-rule-strong);
}

.pkwp-index__row {
	display: flex;
	gap: 1.8rem;
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--pkwp-rule);
}

.pkwp-index--preparation .pkwp-index__row {
	border-bottom: 0;
	border: 1px dashed var(--pkwp-rule-strong);
	padding: 1.1rem 1.25rem;
	margin-bottom: 1rem;
}

.pkwp-index__ident {
	flex: 0 0 9.5rem;
}

.pkwp-index__number {
	display: block;
	font-family: var(--pkwp-mono);
	font-size: 0.75rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	overflow-wrap: anywhere;
}

.pkwp-index__counts {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--pkwp-mono);
	font-size: 0.66rem;
	line-height: 1.5;
	color: var(--pkwp-quiet);
}

.pkwp-index__main h3 {
	font-family: var(--pkwp-display);
	font-size: clamp(1.4rem, 3vw, 1.85rem);
	line-height: 1.15;
	margin: 0 0 0.3rem;
}

.pkwp-index__main h3 a {
	color: var(--pkwp-ink);
	text-decoration: none;
}

.pkwp-index__main h3 a:hover,
.pkwp-index__main h3 a:focus-visible {
	color: var(--pkwp-red);
}

.pkwp-index__dek {
	font-size: 1.03rem;
	line-height: 1.4;
	color: var(--pkwp-muted);
	margin: 0 0 0.6rem;
}

.pkwp-index__byline {
	font-size: 0.94rem;
	margin: 0 0 0.15rem;
}

.pkwp-index__dates {
	font-family: var(--pkwp-mono);
	font-size: 0.72rem;
	color: var(--pkwp-quiet);
	margin: 0 0 0.8rem;
}

.pkwp-index__abstract {
	font-size: 0.96rem;
	line-height: 1.6;
	color: var(--pkwp-muted);
	max-width: 46rem;
	margin: 0 0 0.9rem;
}

.pkwp-index__links {
	margin: 0;
}

.pkwp-index__abridged {
	margin-top: 0.8rem;
	padding: 0.65rem 0.9rem;
	background: #f2ede1;
	border-left: 2px solid var(--pkwp-gold);
	font-size: 0.88rem;
	max-width: 46rem;
}

.pkwp-index__abridged-label {
	display: block;
	font-family: var(--pkwp-mono);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6b5426;
}

.pkwp-index__caveat {
	font-size: 0.84rem;
	font-style: italic;
	color: var(--pkwp-quiet);
	margin: 0.4rem 0 0;
}

@media (max-width: 782px) {
	.pkwp-index__row {
		display: block;
	}

	.pkwp-index__ident {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin-bottom: 0.7rem;
	}

	.pkwp-index__number,
	.pkwp-index__counts {
		display: inline-block;
		margin: 0;
	}
}

.pkwp-indexing {
	background: var(--pkwp-navy);
	color: #c6c9d2;
	padding: 1.6rem 1.8rem;
	margin: 2.5rem 0;
}

.pkwp-indexing__label {
	font-family: var(--pkwp-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #c9a961;
	margin: 0 0 0.6rem;
}

.pkwp-indexing__text {
	font-size: 0.95rem;
	line-height: 1.65;
	margin: 0;
	max-width: 52rem;
}

/* -------------------------------------------------------------------------
 * Editor previews: the server-rendered blocks need the same look in the editor
 * ---------------------------------------------------------------------- */

.editor-styles-wrapper .pkwp-panel,
.editor-styles-wrapper .pkwp-index,
.editor-styles-wrapper .pkwp-masthead {
	--pkwp-cream: #faf8f2;
	--pkwp-ink: #151c28;
	--pkwp-navy: #182338;
	--pkwp-red: #c23a2b;
	--pkwp-gold: #a87b33;
	--pkwp-tan: #ede4d0;
	--pkwp-muted: #3a4252;
	--pkwp-quiet: #5a6270;
	--pkwp-rule: #ddd6c5;
	--pkwp-rule-strong: #c9c0ae;
	--pkwp-panel: #f4efe4;
	--pkwp-display: "Playfair Display", Georgia, serif;
	--pkwp-body: "Source Serif 4", Georgia, serif;
	--pkwp-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------------------------------------------------------------------------
   Callouts inside a paper's body.

   Google Docs has no callout element, so authors reach for a one-cell table.
   The importer turns those back into real asides; this is what they look like.
   Scoped under .pkwp-paper so it cannot leak into ordinary posts.
--------------------------------------------------------------------------- */

.pkwp-paper .pkwp-callout {
	margin: 2.2rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--pkwp-red);
	background: var(--pkwp-panel);
}

.pkwp-paper .pkwp-callout__label {
	margin: 0 0 0.4rem;
	font-family: var(--pkwp-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pkwp-gold);
}

.pkwp-paper .pkwp-callout p:last-child {
	margin-bottom: 0;
}

/* The bibliographic record puts a DOI in a narrow column, where the browser
   will happily break it mid-token. Keep it whole; wrap at the slash instead. */

.pkwp-record__cell dd {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

/* ---------------------------------------------------------------------------
   Figure plates.

   The house convention from the earlier long-reads: a bordered plate, the
   picture inside it, a sans caption underneath with "Figure N." set in the
   brand red. The SVGs themselves are self-contained (inline fills, inline font
   attributes, no classes), so this only has to frame them.
--------------------------------------------------------------------------- */

.pkwp-paper .pkwp-plate {
	margin: 2.6rem 0;
	padding: 1.25rem 1.25rem 1rem;
	border: 1px solid var(--pkwp-rule-strong);
	background: #fff;
}

.pkwp-paper .pkwp-plate svg {
	display: block;
	width: 100%;
	height: auto;
}

.pkwp-paper .pkwp-plate figcaption {
	margin: 0.9rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--pkwp-rule);
	font-family: var(--pkwp-body);
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--pkwp-muted);
}

.pkwp-paper .pkwp-plate figcaption strong,
.pkwp-paper .pkwp-plate figcaption b {
	color: var(--pkwp-red);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Figure motion.

   Only figures.js ever adds these classes, and it bails out under
   prefers-reduced-motion or without IntersectionObserver. Without the script
   none of this applies and the figure is simply visible, which is also what
   the crawler gets.

   Sequence per plate: .pkwp-anim-ready sets the hidden start state with no
   transition, .pkwp-anim-armed switches the transitions on a frame later, and
   .pkwp-anim-play releases everything in a staggered sweep.
--------------------------------------------------------------------------- */

.pkwp-plate.pkwp-anim-ready .pkwp-a--bar,
.pkwp-plate.pkwp-anim-ready .pkwp-a--column,
.pkwp-plate.pkwp-anim-ready .pkwp-a--pop,
.pkwp-plate.pkwp-anim-ready .pkwp-a--fade {
	transform-box: fill-box;
}

.pkwp-plate.pkwp-anim-ready .pkwp-a--bar    { transform-origin: left center;   transform: scaleX(0); }
.pkwp-plate.pkwp-anim-ready .pkwp-a--column { transform-origin: center bottom; transform: scaleY(0); }
.pkwp-plate.pkwp-anim-ready .pkwp-a--pop    { transform-origin: center;        transform: scale(0); }
.pkwp-plate.pkwp-anim-ready .pkwp-a--fade   { opacity: 0; transform: translateY(4px); }
.pkwp-plate.pkwp-anim-ready .pkwp-a--draw   { stroke-dasharray: 1; stroke-dashoffset: 1; }

.pkwp-plate.pkwp-anim-armed .pkwp-a {
	transition:
		transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--pkwp-d, 0ms),
		opacity 0.45s ease var(--pkwp-d, 0ms),
		stroke-dashoffset 0.8s ease-out var(--pkwp-d, 0ms);
}

.pkwp-plate.pkwp-anim-play .pkwp-a--bar,
.pkwp-plate.pkwp-anim-play .pkwp-a--column,
.pkwp-plate.pkwp-anim-play .pkwp-a--pop    { transform: none; }
.pkwp-plate.pkwp-anim-play .pkwp-a--fade   { opacity: 1; transform: none; }
.pkwp-plate.pkwp-anim-play .pkwp-a--draw   { stroke-dashoffset: 0; }

.pkwp-paper .pkwp-replay {
	display: inline-block;
	margin-left: 0.6em;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--pkwp-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pkwp-gold);
	cursor: pointer;
}

.pkwp-paper .pkwp-replay:hover,
.pkwp-paper .pkwp-replay:focus-visible {
	color: var(--pkwp-red);
	text-decoration: underline;
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.pkwp-paper .pkwp-replay { display: none; }
}