/*
Theme Name: PEARL
Theme URI: https://www.pearl-organoids.com
Author: PEARL Organoids
Description: Purpose-built WordPress block theme for PEARL Organoids. Monochrome, typography-led deep-tech design system for a life-science platform company. Colour appears only where it carries scientific meaning.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pearl
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-logo, accessibility-ready
*/

/* ==========================================================================
   1. Tokens
   Semantic variables flip inside .pearl-dark, so every component below works
   unchanged on both the light and the black canvas.
   ========================================================================== */

:root {
	--fg: #0a0a0a;
	--bg: #ffffff;
	--surface: #f5f5f4;
	--line: #e5e5e3;
	--line-strong: #c9c9c6;
	--muted: #6b6b6b;

	--pearl-gutter: clamp(1.25rem, 5vw, 4rem);
	--pearl-header-h: 4.5rem;
	--pearl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--pearl-dur: 0.4s;

	/* WordPress generates preset custom properties from theme.json slugs by
	   inserting a hyphen at every letter-to-digit boundary ("h1" -> "h-1"),
	   so the font-size presets are actually emitted as --h-1..--h-4. Every
	   var(--wp--preset--font-size--h1) reference in this codebase — including
	   HTML already baked into page content by the installer — predates that
	   discovery and still uses the unhyphenated name. Aliasing here fixes all
	   of them at once without touching installed pages. */
	--wp--preset--font-size--h1: var(--wp--preset--font-size--h-1);
	--wp--preset--font-size--h2: var(--wp--preset--font-size--h-2);
	--wp--preset--font-size--h3: var(--wp--preset--font-size--h-3);
	--wp--preset--font-size--h4: var(--wp--preset--font-size--h-4);
}

.pearl-dark,
.is-style-pearl-dark {
	--fg: #ffffff;
	--bg: #000000;
	--surface: #111111;
	--line: #262626;
	--line-strong: #3d3d3d;
	--muted: #a3a3a3;
	background-color: var(--bg);
	color: var(--fg);
}

@media (min-width: 782px) {
	:root { --pearl-header-h: 5.25rem; }
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant-numeric: tabular-nums lining-nums;
	/* clip, not hidden: hidden gives the body its own scroll box (the browser
	   has to compute a value for overflow-y too, and defaults it to auto),
	   which stops it from propagating scroll to the viewport — and that is
	   exactly what breaks the sticky header, since position:sticky then
	   sticks relative to a box that scrolls independently of what the user
	   actually sees scrolling. clip suppresses the horizontal overflow the
	   same way without creating that scroll container. */
	overflow-x: clip;
}

/* Anchors land below the sticky header. */
:target { scroll-margin-top: calc(var(--pearl-header-h) + 2rem); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

::selection { background: var(--fg); color: var(--bg); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 1px;
}

.pearl-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.85rem 1.25rem;
	background: #0a0a0a;
	color: #fff;
	font-size: 0.875rem;
	text-decoration: none;
}
.pearl-skip-link:focus { left: 0; }

/* Prose links carry an underline; navigational/CTA links are styled per component. */
.pearl-prose a,
.entry-content p > a,
.entry-content li > a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--line-strong);
	transition: text-decoration-color var(--pearl-dur) var(--pearl-ease);
}
.pearl-prose a:hover,
.entry-content p > a:hover,
.entry-content li > a:hover { text-decoration-color: currentColor; }

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

/* WordPress's root block layout adds a margin between the header template
   part and #pearl-main, which pushed .pearl-hero down and broke its
   negative-margin overlap with the sticky header above it. Zeroed here
   specifically — the hero's own overlap math already sets the spacing.

   Deliberately narrow: a blanket `.is-layout-flow > * + *` reset was tried
   and reverted. It needed !important to outrank WordPress's own layout CSS,
   and !important also outranks inline styles — which is where every pattern
   in this codebase sets its real spacing (style="margin-top:var(...)"), so
   the whole page collapsed into unspaced text. The per-component resets
   further down (.pearl-grid, .pearl-aside, .pearl-metric, .pearl-duo, …)
   already handle flow margin exactly where it needs handling. */
#pearl-main { margin-top: 0; }

/* Root padding is zero so any section can bleed to the viewport edge; every
   section then re-establishes the gutter with .pearl-wrap. */
.pearl-wrap {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--pearl-gutter);
}
.pearl-wrap--prose { max-width: calc(var(--wp--style--global--content-size) + var(--pearl-gutter) * 2); }

.pearl-section {
	padding-block: var(--wp--preset--spacing--80);
}
.pearl-section--tight { padding-block: var(--wp--preset--spacing--70); }

/* Editor + prose pages: give core's constrained layout the same gutter. */
.pearl-prose-page .entry-content { padding-inline: var(--pearl-gutter); }

/* A hairline that spans the content column, used to separate chapters. */
.pearl-rule {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 0;
	height: 0;
}

/* Two-column editorial split: sticky label on the left, content on the right. */
.pearl-split {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.pearl-split {
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}
	.pearl-split__aside { position: sticky; top: calc(var(--pearl-header-h) + 2.5rem); align-self: start; }
}

/* ==========================================================================
   4. Eyebrow labels — the mono voice of the system
   ========================================================================== */

.pearl-label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 1.25rem;
}
.pearl-label--rule {
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}
.pearl-label__index { color: var(--fg); margin-right: 0.9em; }

/* ==========================================================================
   5. Header
   ========================================================================== */

/* WordPress wraps every template part in its own <div class="wp-block-template-part">.
   That wrapper is exactly as tall as the header inside it (~85px), and a
   position:sticky element can never travel outside its own parent's box — so
   the header "sticks" for 85px of scrolling and then leaves with its wrapper,
   which reads as the header simply vanishing. The static design preview never
   showed this because there the header is a direct child of <body>.
   display:contents removes the wrapper's box from layout without removing its
   children, making .pearl-header a layout child of .wp-site-blocks, which
   spans the whole document — the structure the sticky behaviour assumes.
   The wrapper carries no styling of its own, so nothing is lost with it. */
.wp-block-template-part:has(> .pearl-header) { display: contents; }

.pearl-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	transition: background-color var(--pearl-dur) var(--pearl-ease),
	            border-color var(--pearl-dur) var(--pearl-ease),
	            color var(--pearl-dur) var(--pearl-ease);
}

@supports (backdrop-filter: blur(12px)) {
	.pearl-header { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); }
}

/* Applied by pearl.js only when the page opens on a dark hero.
   Deliberately visual-only: the header stays in flow as `sticky` in both
   states. Switching it to `fixed` here would remove it from the flow and jolt
   the whole page up by its own height at the moment the class is toggled. The
   hero is pulled up underneath it instead (see .pearl-hero below). */
.pearl-header.is-overlay {
	--fg: #ffffff;
	--line: transparent;
	--muted: #a3a3a3;
	background: transparent;
	backdrop-filter: none;
	color: #fff;
}

.pearl-header__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--pearl-gutter);
	min-height: var(--pearl-header-h);
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.pearl-header__brand {
	display: inline-flex;
	align-items: center;
	margin-right: auto;
	text-decoration: none;
	color: inherit;
}
.pearl-header__brand img {
	display: block;
	height: 1.75rem;
	width: auto;
}
@media (min-width: 782px) {
	.pearl-header__brand img { height: 2.125rem; }
}
/* Ship both masters and swap, rather than filtering — keeps edges crisp.
   Every selector here is scoped to an ancestor so it outweighs the
   `.pearl-header__brand img` rule above; a bare `.pearl-logo--light` lost to
   it and left the white wordmark standing beside the black one, invisible on
   white but showing through the header's blur over a dark section. */
.pearl-header__brand .pearl-logo--light,
.pearl-header.is-overlay .pearl-logo--dark,
.pearl-dark .pearl-logo--dark { display: none; }
.pearl-header.is-overlay .pearl-logo--light,
.pearl-dark .pearl-logo--light { display: block; }

.pearl-nav { display: none; }
@media (min-width: 900px) {
	.pearl-nav {
		display: flex;
		align-items: center;
		gap: clamp(1.25rem, 2.4vw, 2.25rem);
	}
}

.pearl-nav__link {
	position: relative;
	font-size: 0.9375rem;
	line-height: 1;
	color: var(--fg);
	text-decoration: none;
	padding-block: 0.5rem;
	white-space: nowrap;
	transition: opacity var(--pearl-dur) var(--pearl-ease);
}
.pearl-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--pearl-dur) var(--pearl-ease);
}
.pearl-nav__link:hover::after,
.pearl-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.pearl-header__cta {
	display: none;
	border: 1px solid currentColor;
	border-radius: 2px;
	padding: 0.6rem 1.15rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	color: var(--fg);
	transition: background-color var(--pearl-dur) var(--pearl-ease), color var(--pearl-dur) var(--pearl-ease);
}
.pearl-header__cta:hover { background: var(--fg); color: var(--bg); }
@media (min-width: 900px) { .pearl-header__cta { display: inline-block; } }

/* --- Mobile menu --------------------------------------------------------- */

.pearl-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	margin-left: auto;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
@media (min-width: 900px) { .pearl-burger { display: none; } }
.pearl-burger span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--pearl-dur) var(--pearl-ease), opacity 0.2s linear;
}
.pearl-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.pearl-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pearl-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.pearl-drawer {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: var(--bg);
	color: var(--fg);
	padding: calc(var(--pearl-header-h) + 2.5rem) var(--pearl-gutter) 3rem;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.5rem);
	transition: opacity 0.3s var(--pearl-ease), transform 0.3s var(--pearl-ease), visibility 0.3s;
}
.pearl-drawer.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 900px) { .pearl-drawer { display: none; } }

.pearl-drawer a {
	display: block;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--line);
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: inherit;
}
.pearl-drawer__cta {
	margin-top: 2rem;
	border: 1px solid var(--fg) !important;
	border-radius: 2px;
	text-align: center;
	font-size: 1rem !important;
	padding: 1rem !important;
	background: var(--fg);
	color: var(--bg) !important;
}
body.pearl-menu-open { overflow: hidden; }

/* ==========================================================================
   6. Hero
   ========================================================================== */

.pearl-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(46rem, 92svh);
	padding-block: calc(var(--pearl-header-h) + var(--wp--preset--spacing--70)) var(--wp--preset--spacing--70);
	overflow: clip;
}

/* A dark hero runs up behind the header so the transparent overlay state has
   something to sit on. The top padding above already clears the header, so
   with scripts disabled — header opaque — nothing is hidden behind it. */
.pearl-hero.is-style-pearl-dark,
.pearl-hero.pearl-dark {
	margin-top: calc(var(--pearl-header-h) * -1);
}

.pearl-hero__grid {
	position: relative;
	z-index: 2;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	width: 100%;
	padding-inline: var(--pearl-gutter);
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.pearl-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		align-items: center;
		gap: var(--wp--preset--spacing--60);
	}
}

.pearl-hero__title {
	font-size: var(--wp--preset--font-size--h1);
	font-weight: 500;
	line-height: 1.03;
	letter-spacing: -0.035em;
	margin: 0;
	text-wrap: balance;
}
.pearl-hero__title em {
	font-style: normal;
	color: var(--muted);
}

.pearl-hero__lede {
	margin: 1.75rem 0 0;
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.45;
	color: var(--muted);
	text-wrap: pretty;
}

.pearl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.5rem;
}

.pearl-hero__figure { margin: 0; }
.pearl-hero__figure img {
	display: block;
	width: 100%;
	height: auto;
	/* The microscopy plate is captured on black; bleeding it into the canvas
	   removes the "pasted rectangle" look. */
	mask-image: radial-gradient(120% 110% at 50% 50%, #000 55%, transparent 88%);
}

/* Specimen metadata strip beneath the hero image. */
.pearl-specimen {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ==========================================================================
   7. Buttons
   ========================================================================== */

.pearl-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	border: 1px solid var(--fg);
	border-radius: 2px;
	padding: 0.95rem 1.75rem;
	background: var(--fg);
	color: var(--bg);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--pearl-dur) var(--pearl-ease),
	            color var(--pearl-dur) var(--pearl-ease),
	            border-color var(--pearl-dur) var(--pearl-ease);
}
.pearl-btn:hover { background: transparent; color: var(--fg); }

.pearl-btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.pearl-btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Core button block, re-skinned per canvas. theme.json covers the light case;
   these rules invert it inside a dark section. */
.pearl-dark .wp-block-button__link,
.is-style-pearl-dark .wp-block-button__link {
	background-color: #fff;
	color: #000;
	border-color: #fff;
}
.pearl-dark .wp-block-button__link:hover,
.is-style-pearl-dark .wp-block-button__link:hover {
	background-color: transparent;
	color: #fff;
	border-color: #fff;
}
.pearl-dark .wp-block-button.is-style-outline .wp-block-button__link,
.is-style-pearl-dark .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: #fff;
	border-color: #3d3d3d;
}
.pearl-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.is-style-pearl-dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: #fff;
	color: #000;
	border-color: #fff;
}
/* Core's outline variant ships its own geometry — border-width:2px plus
   em-based padding of calc(.667em + 2px) — which silently replaces the button
   padding and border width set in theme.json. The two buttons in a pair then
   render ~10px different in height, which is what reads as "unrund" next to
   each other. Restated here so both variants share one set of metrics; only
   the colours differ between them. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1px;
	padding: 0.95rem 1.75rem;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--fg);
	border-color: var(--line-strong);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--fg);
	color: var(--bg);
	border-color: var(--fg);
}

/* Inline text link with a travelling arrow. */
.pearl-arrow {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--fg);
	border-bottom: 1px solid var(--line-strong);
	padding-bottom: 0.35rem;
	transition: border-color var(--pearl-dur) var(--pearl-ease);
}
.pearl-arrow:hover { border-color: var(--fg); }
.pearl-arrow::after {
	content: "\2192";
	transition: transform var(--pearl-dur) var(--pearl-ease);
}
.pearl-arrow:hover::after { transform: translateX(0.25em); }

/* ==========================================================================
   8. Grids and cells — hairline framing, no shadows, no rounded cards
   ========================================================================== */

.pearl-grid {
	display: grid;
	gap: 1px;
	background: var(--line);
	border-block: 1px solid var(--line);
	grid-template-columns: 1fr;
}
.pearl-grid > * {
	background: var(--bg);
	padding: var(--wp--preset--spacing--40) 0;
}
@media (min-width: 640px) {
	.pearl-grid--2, .pearl-grid--3, .pearl-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.pearl-grid > * { padding: var(--wp--preset--spacing--40); }
	.pearl-grid > *:nth-child(2n + 1) { padding-left: 0; }
	.pearl-grid > *:nth-child(2n) { padding-right: 0; }
}
@media (min-width: 1000px) {
	.pearl-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.pearl-grid--4 { grid-template-columns: repeat(4, 1fr); }
	.pearl-grid--3 > *, .pearl-grid--4 > * { padding: var(--wp--preset--spacing--40); }
	.pearl-grid--3 > *:nth-child(2n + 1),
	.pearl-grid--4 > *:nth-child(2n + 1) { padding-left: var(--wp--preset--spacing--40); }
	.pearl-grid--3 > *:nth-child(2n),
	.pearl-grid--4 > *:nth-child(2n) { padding-right: var(--wp--preset--spacing--40); }
	.pearl-grid--3 > *:first-child,
	.pearl-grid--4 > *:first-child { padding-left: 0; }
	.pearl-grid--3 > *:last-child,
	.pearl-grid--4 > *:last-child { padding-right: 0; }
}

/* These grids draw their hairlines as a 1px gap over a line-coloured
   background. That is efficient, but an odd number of items in a two-column
   row leaves one cell empty — and the background then shows through it as a
   grey block. Letting the final item span the row closes the hole.
   Each range below is exactly where that component is two columns wide. */
@media (min-width: 640px) and (max-width: 999px) {
	.pearl-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

	/* Technology § 03's six-cell grid: at three columns "Function" already
	   falls under "Viability" by DOM order alone, which is the pairing a
	   reader would look for (both are "how do we know it worked" properties).
	   At two columns the same order reflows Function beside Morphology
	   instead. Swapping their columns here is visual only — the DOM order
	   (and the single-column mobile reading order) is untouched — and puts
	   Function back under Viability at this width specifically. */
	#characterisation .pearl-grid--3 > *:nth-child(3) { grid-column: 2; grid-row: 2; }
	#characterisation .pearl-grid--3 > *:nth-child(4) { grid-column: 1; grid-row: 2; }
}
@media (min-width: 700px) and (max-width: 859px) {
	.pearl-flow--3 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 700px) and (max-width: 1039px) {
	.pearl-flow--4 > *:last-child:nth-child(odd),
	.pearl-flow--5 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 760px) and (max-width: 1099px) {
	.pearl-news > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* These containers space their children with grid gap, so cancel the block-gap
   margin core's flow layout would otherwise add between them.
   Every grid/flex container that appears as a wp:group in the patterns has to
   be listed here. Three were missing and each produced a visible defect:
   .pearl-metrics let the container's hairline background show as a 24px grey
   band above columns 2-4 (only the first child escapes the margin), and
   .pearl-split / .pearl-contact-grid dropped their second column 24px below
   the first, which is what misaligned the section labels against their
   headings. Anything added to this file with `display: grid` or `flex` and a
   `gap` belongs in this list too. */
.pearl-grid > * + *,
.pearl-flow > * + *,
.pearl-panels > * + *,
.pearl-team > * + *,
.pearl-news > * + *,
.pearl-news__item > * + *,
.pearl-metrics > * + *,
.pearl-split > * + *,
.pearl-step > * + *,
.pearl-contact-grid > * + *,
.pearl-hero__actions > * + *,
.pearl-hero__grid > * + * { margin-block-start: 0; }

.pearl-cell__title {
	font-size: var(--wp--preset--font-size--h4);
	font-weight: 500;
	letter-spacing: -0.015em;
	margin: 0 0 0.75rem;
}
.pearl-cell p {
	margin: 0;
	color: var(--muted);
	font-size: 1rem;
	line-height: 1.6;
	text-wrap: pretty;
}

/* Text beside a figure, rather than a full-width image block between
   paragraphs. Images this way read as part of the argument instead of as
   something dropped in after it — and the figure stays small enough not to
   dominate the section. */
.pearl-aside {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 900px) {
	.pearl-aside {
		grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
		gap: var(--wp--preset--spacing--60);
	}
	/* Wider than the default figure column — used on Home for the two proof
	   graphs (reproducibility, calcium activity), where the data needs to be
	   readable at a glance rather than treated as an illustration beside the
	   text. Both --wide and --flip are Home-only right now, so widening them
	   here does not touch any other page. */
	.pearl-aside--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); }
	/* Figure first, text second. */
	.pearl-aside--flip { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); }
	/* When the figure is markedly taller than its text (a square photo next to
	   two short paragraphs), top-aligning both columns leaves the shorter one
	   stranded near the top with dead space below it. Centring the text against
	   the figure reads as intentional instead. */
	.pearl-aside--align-center { align-items: center; }
}
.pearl-aside > * + * { margin-block-start: 0; }
.pearl-aside > * > :first-child { margin-block-start: 0; }

/* Specification rows — a mono label against its explanation, separated by
   hairlines. Deliberately a different gesture from the card grid above: a page
   that states everything in identical four-up cards reads as a template, and
   the properties of a platform belong on a datasheet, not on flashcards. */
.pearl-specs {
	border-top: 1px solid var(--line);
	margin: 0;
}
.pearl-specs > * {
	display: grid;
	gap: 0.45rem 2.5rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--line);
	grid-template-columns: 1fr;
	margin-block: 0;
}
@media (min-width: 760px) {
	.pearl-specs > * {
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		align-items: baseline;
	}
}
.pearl-specs h3 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
	margin: 0;
}
.pearl-specs p {
	margin: 0;
	color: var(--muted);
	text-wrap: pretty;
}
/* An entry may run to more than one paragraph. Each row is a two-cell grid, so
   without this the second paragraph wraps into the label column and sits under
   the date instead of continuing the text. */
.pearl-specs > * > p ~ p { margin-top: 0.9rem; }
@media (min-width: 760px) {
	.pearl-specs > * > p ~ p { grid-column: 2; }
}

/* A full-bleed dark band used as a mid-section visual break — e.g. Home § 01's
   feature list, set apart from the metrics and proof figure around it. Pairs
   with .pearl-dark for the colour flip; this class only adds the padding.
   Sits as a direct child of the section, outside .pearl-wrap, the same way
   .pearl-bleed images do — the content inside it opens its own nested .pearl-wrap
   so the text still lines up with the rest of the page. */
.pearl-feature-band { padding-block: var(--wp--preset--spacing--70); }

/* An image that runs the full width of the viewport, breaking the column grid
   deliberately. Used sparingly — its job is to let the page breathe between
   dense sections. Sits as a direct child of the section, outside .pearl-wrap. */
.pearl-bleed { margin: 0; }
.pearl-bleed img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 68svh;
	object-fit: cover;
}
.pearl-bleed figcaption {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: 1.1rem var(--pearl-gutter) 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	line-height: 1.65;
	letter-spacing: 0.02em;
	color: var(--muted);
}
.pearl-bleed figcaption b { color: var(--fg); font-weight: 500; }

/* Figures for the platform's headline numbers. Hairline-separated like the
   other grids, but the value is set large in the text face with tabular
   figures so the digits align optically between cells. */
.pearl-metrics {
	display: grid;
	gap: 1px;
	background: var(--line);
	border-block: 1px solid var(--line);
	grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .pearl-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pearl-metrics { grid-template-columns: repeat(4, 1fr); } }

.pearl-metric {
	background: var(--bg);
	padding: var(--wp--preset--spacing--40) clamp(1rem, 2vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.pearl-metric > * + * { margin-block-start: 0; }

.pearl-metric__value {
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums lining-nums;
	margin: 0;
}
.pearl-metric__value small {
	font-size: 0.4em;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin-left: 0.15em;
	color: var(--muted);
}
.pearl-metric__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0;
}
.pearl-metric__note {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--muted);
	margin: 0;
	text-wrap: pretty;
}

/* Larger two-up blocks used for the commercial models. */
.pearl-panels {
	display: grid;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	grid-template-columns: 1fr;
}
@media (min-width: 860px) { .pearl-panels { grid-template-columns: 1fr 1fr; } }
.pearl-panel {
	background: var(--bg);
	padding: clamp(1.75rem, 4vw, 3.25rem);
	display: flex;
	flex-direction: column;
}
.pearl-panel h3 { margin: 0.75rem 0 1rem; }
.pearl-panel p { color: var(--muted); margin: 0 0 1.5rem; text-wrap: pretty; }
.pearl-panel ul {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	font-size: 1rem;
}
.pearl-panel li {
	padding: 0.7rem 0;
	border-top: 1px solid var(--line);
	display: flex;
	gap: 0.9rem;
}
.pearl-panel li::before {
	content: "\2014";
	color: var(--muted);
	flex: none;
}
.pearl-panel__foot { margin-top: auto; }

/* ==========================================================================
   9. Process / workflow
   ========================================================================== */

.pearl-flow {
	display: grid;
	gap: 1px;
	background: var(--line);
	border-block: 1px solid var(--line);
	counter-reset: pearl-step;
	grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .pearl-flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .pearl-flow--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .pearl-flow--5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1040px) { .pearl-flow--4 { grid-template-columns: repeat(4, 1fr); } }

.pearl-step {
	counter-increment: pearl-step;
	background: var(--bg);
	padding: var(--wp--preset--spacing--40) clamp(1rem, 2vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	min-height: 11rem;
}
.pearl-step::before {
	content: counter(pearl-step, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--muted);
}
.pearl-step__title {
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0;
}
.pearl-step p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--muted);
	text-wrap: pretty;
}

/* Compact single-line chain: Compound → Organoid → Response → Analysis */
.pearl-chain {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.15rem;
	padding: 1.5rem 0;
	border-block: 1px solid var(--line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.pearl-chain li { list-style: none; }
.pearl-chain li:not(:last-child)::after {
	content: "\2192";
	margin-left: 1.15rem;
	color: var(--muted);
}

/* ==========================================================================
   10. Scientific figures
   ========================================================================== */

.pearl-figure {
	margin: 0;
	border: 1px solid var(--line);
}
.pearl-figure img {
	display: block;
	width: 100%;
	height: auto;
	background: #fff;
}
.pearl-figure figcaption {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	line-height: 1.65;
	letter-spacing: 0.02em;
	color: var(--muted);
	background: var(--bg);
}
.pearl-figure figcaption b { color: var(--fg); font-weight: 500; }

/* Two figures side by side. Deliberately not core's columns block: that relies
   on block-library CSS for its stacking behaviour, which this theme would then
   have to track. Here the breakpoint is ours. */
.pearl-duo {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
}
@media (min-width: 860px) {
	.pearl-duo { grid-template-columns: 1fr 1fr; align-items: start; }
}
.pearl-duo > * + * { margin-block-start: 0; }

/* Plots and panels are drawn on white; on the dark canvas they sit on a white
   plate rather than being inverted, which would corrupt the channel colours. */
/* Microscopy only. A plot carries its own white ground, and on black it needs
   the plate's padding more than anywhere else — without the :not() this rule
   outweighed .pearl-figure--plate and stripped it. */
.pearl-dark .pearl-figure:not(.pearl-figure--plate) img,
.is-style-pearl-dark .pearl-figure:not(.pearl-figure--plate) img { padding: 0; }

.pearl-figure--plate img { padding: clamp(0.75rem, 2vw, 1.5rem); }

/* Some source plots only exist at modest resolution. Capping the display width
   keeps them crisp instead of stretching them across the full column. */
.pearl-figure--narrow { max-width: 40rem; margin-inline: auto; }

/* ==========================================================================
   11. Comparison table
   ========================================================================== */

/* The table cannot usefully collapse below ~40rem, so it scrolls sideways.
   The container is focusable and labelled so keyboard users can reach and
   scroll it, and a right-edge fade signals there is more to see. */
.pearl-table-wrap {
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	border-block: 1px solid var(--line);
}
.pearl-table-wrap:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 700px) {
	.pearl-table-wrap {
		/* Fades the trailing edge only while the content is actually clipped. */
		mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent 100%);
	}
	.pearl-table-hint {
		display: block;
		margin-top: 0.85rem;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.6875rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--muted);
	}
}
.pearl-table-hint { display: none; }
.pearl-table {
	width: 100%;
	min-width: 40rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.pearl-table th,
.pearl-table td {
	padding: 1.1rem 1.25rem 1.1rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}
.pearl-table tr:last-child th,
.pearl-table tr:last-child td { border-bottom: 0; }
.pearl-table thead th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	padding-top: 0;
}
.pearl-table tbody th { font-weight: 500; width: 26%; }
.pearl-table td:last-child { color: var(--fg); }
.pearl-table td.is-conventional { color: var(--muted); }

/* ==========================================================================
   12. Accordion (characterisation)
   ========================================================================== */

.pearl-accordion { border-top: 1px solid var(--line); }
.pearl-accordion details { border-bottom: 1px solid var(--line); }
.pearl-accordion summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.35rem 0;
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--h4);
	font-weight: 500;
	letter-spacing: -0.01em;
}
.pearl-accordion summary::-webkit-details-marker { display: none; }
.pearl-accordion summary::after {
	content: "+";
	margin-left: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--muted);
	transition: transform var(--pearl-dur) var(--pearl-ease);
}
.pearl-accordion details[open] summary::after { content: "\2212"; }
.pearl-accordion__body {
	padding: 0 0 1.75rem;
	max-width: 46rem;
	color: var(--muted);
}
.pearl-accordion__body > :first-child { margin-top: 0; }
.pearl-accordion__body > :last-child { margin-bottom: 0; }

/* ==========================================================================
   13. Publications
   ========================================================================== */

.pearl-pubs { border-top: 1px solid var(--line); margin: 0; padding: 0; list-style: none; }
.pearl-pub {
	display: grid;
	gap: 0.35rem 2.5rem;
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: 1px solid var(--line);
	grid-template-columns: 1fr;
}
@media (min-width: 800px) {
	.pearl-pub { grid-template-columns: 5rem minmax(0, 1fr) auto; align-items: baseline; }
}
.pearl-pub__year {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--muted);
}
.pearl-pub__title {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.015em;
	margin: 0 0 0.4rem;
	text-wrap: pretty;
}
.pearl-pub__title a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--line-strong);
	transition: text-decoration-color var(--pearl-dur) var(--pearl-ease);
}
.pearl-pub__title a:hover { text-decoration-color: currentColor; }
.pearl-pub__meta { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.pearl-pub__meta cite { font-style: italic; }
.pearl-pub__desc { margin: 0.65rem 0 0; font-size: 0.9375rem; color: var(--muted); max-width: 60ch; }
.pearl-pub__link { white-space: nowrap; }

/* ==========================================================================
   14. News
   ========================================================================== */

.pearl-news { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 760px)  { .pearl-news { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pearl-news { grid-template-columns: repeat(3, 1fr); } }
.pearl-news__item {
	background: var(--bg);
	padding: var(--wp--preset--spacing--40) clamp(1rem, 2vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.pearl-news__date {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.pearl-news__title { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.015em; margin: 0; line-height: 1.35; }
.pearl-news__title a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--line-strong);
	transition: text-decoration-color var(--pearl-dur) var(--pearl-ease);
}
.pearl-news__title a:hover { text-decoration-color: currentColor; }
.pearl-news__excerpt { margin: 0; font-size: 0.9375rem; color: var(--muted); }

/* ==========================================================================
   15. Team
   ========================================================================== */

.pearl-team { display: grid; gap: var(--wp--preset--spacing--40); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.pearl-team__photo {
	aspect-ratio: 4 / 5;
	background: var(--surface);
	border: 1px solid var(--line);
	margin-bottom: 1.1rem;
	overflow: hidden;
}
.pearl-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.pearl-team__photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: center;
	padding: 1rem;
}
.pearl-team__name { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.pearl-team__role {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0.4rem 0 0.85rem;
}
.pearl-team__bio { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); margin: 0 0 0.85rem; }

/* ==========================================================================
   16. Placeholders — deliberately visible until PEARL supplies content
   ========================================================================== */

.pearl-placeholder {
	border: 1px dashed var(--line-strong);
	background: var(--surface);
	padding: 1.15rem 1.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	line-height: 1.65;
	letter-spacing: 0.02em;
	color: var(--muted);
	/* Quick-look pass: hidden site-wide so the site can be shown around before
	   every open editorial/legal note is resolved. These notes are real work
	   items (see docs/06-content-gaps.md), not decoration — un-hide before
	   the site is treated as final, especially on Imprint and Privacy Policy,
	   where German law requires the information they flag. */
	display: none;
}
.pearl-placeholder strong { color: var(--fg); font-weight: 500; }
.pearl-placeholder--block { display: grid; place-items: center; min-height: 14rem; text-align: center; }

/* A paragraph that earns more visual weight than the surrounding prose
   without reading as a to-do — a solid border and a tint, not the dashed
   placeholder treatment. Used for the IP paragraph on Technology § 04, so a
   pharma reader's eye catches it rather than reading past it as one more
   paragraph under the table. */
.pearl-highlight {
	border: 1px solid var(--line-strong);
	background: var(--surface);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
/* Nested inside a grid cell (e.g. Technology § 03's "Quality control" card),
   the placeholder's own padding stacks on top of the cell's, pushing its text
   out of line with every sibling card's heading above it. Pull the box back
   by exactly that padding so the text reads flush; the dashed border bleeds
   a little into the grid gutter instead, which reads as intentional. */
.pearl-cell > .pearl-placeholder { margin-inline: -1.35rem; }

.pearl-empty {
	padding: var(--wp--preset--spacing--50) 0;
	border-block: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.9375rem;
}

/* ==========================================================================
   17. Contact
   ========================================================================== */

.pearl-contact-grid {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: 1fr;
}
@media (min-width: 940px) { .pearl-contact-grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--wp--preset--spacing--70); } }

/* Quick-look pass: the "How to reach us" column repeated the form's own
   "Reason for contact" field, so it is hidden — the form alone covers it. */
.pearl-contact-grid > *:first-child { display: none; }
@media (min-width: 940px) { .pearl-contact-grid { grid-template-columns: 1fr; } }

.pearl-contact-channel { padding: 1.35rem 0; border-top: 1px solid var(--line); }
.pearl-contact-channel h3 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 0.6rem;
}
.pearl-contact-channel a { font-size: 1.0625rem; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.pearl-contact-channel a:hover { border-color: var(--fg); }
.pearl-contact-channel p { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--muted); }

/* --- Form ---------------------------------------------------------------- */

.pearl-form { display: grid; gap: var(--wp--preset--spacing--30); }
.pearl-form__row { display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pearl-form__row { grid-template-columns: 1fr 1fr; } }

.pearl-field { display: flex; flex-direction: column; gap: 0.5rem; }
.pearl-field label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.pearl-field .req { color: var(--fg); }

.pearl-field input,
.pearl-field select,
.pearl-field textarea {
	width: 100%;
	/* This theme has no global box-sizing reset — it inherits border-box from
	   core's block CSS, which does not reach form controls inside a
	   server-rendered block. <select> is border-box by UA default, <input> and
	   <textarea> are content-box, so width:100% plus this padding made every
	   text field 32px wider than its grid column: the inputs overhung the
	   select beside them and the message field overhung the form.
	   Not visible in the static preview, whose shim supplies the global reset
	   WordPress does not — so it has to be stated here, not assumed. */
	box-sizing: border-box;
	padding: 0.85rem 0.95rem;
	background: var(--bg);
	border: 1px solid var(--line-strong);
	border-radius: 2px;
	color: var(--fg);
	font: inherit;
	font-size: 1rem;
	transition: border-color var(--pearl-dur) var(--pearl-ease);
}

/* An <input> takes its height from the inherited line-height (1.6); a <select>
   does not — browsers force line-height:normal on it and ignore any attempt to
   set it, `font: inherit` included. The select therefore came out ~3.6px
   shorter than the input beside it in the same row, so the two fields did not
   line up along their bottom edge. Stating the box model as an explicit
   min-height makes both resolve to the same height regardless.
   Mirrors the padding and border above: 2x0.85rem + 1.6rem line + 2x1px. */
.pearl-field input,
.pearl-field select { min-height: calc(1.7rem + 1.6rem + 2px); }
.pearl-field textarea { min-height: 10rem; resize: vertical; }
.pearl-field input:focus,
.pearl-field select:focus,
.pearl-field textarea:focus { border-color: var(--fg); outline-offset: 2px; }
.pearl-field input::placeholder,
.pearl-field textarea::placeholder { color: var(--muted); opacity: 1; }

.pearl-consent { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 0.875rem; color: var(--muted); }
.pearl-consent input { margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--fg); }
.pearl-consent a { color: var(--fg); text-decoration: underline; text-underline-offset: 0.18em; }

/* Honeypot: hidden from people, reachable by naive bots. */
.pearl-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

.pearl-notice { padding: 1.1rem 1.25rem; border: 1px solid var(--fg); border-radius: 2px; font-size: 0.9375rem; }
.pearl-notice--error { border-color: var(--line-strong); }
.pearl-notice ul { margin: 0.5rem 0 0; padding-left: 1.15rem; }

/* ==========================================================================
   18. Footer
   ========================================================================== */

.pearl-footer { border-top: 1px solid var(--line); padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40); }
.pearl-footer__inner { max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding-inline: var(--pearl-gutter); }
.pearl-footer__top { display: grid; gap: var(--wp--preset--spacing--50); grid-template-columns: 1fr; }
@media (min-width: 860px) { .pearl-footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--60); } }

/* The mark only — see the note in patterns/footer.php. */
.pearl-footer__brand img { height: 2.75rem; width: auto; display: block; }
.pearl-footer__blurb { margin: 1.5rem 0 0; max-width: 32ch; font-size: 0.9375rem; color: var(--muted); }

.pearl-footer h2 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 1.25rem;
}
.pearl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.pearl-footer a { font-size: 0.9375rem; text-decoration: none; color: var(--fg); }
.pearl-footer a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.pearl-footer__bottom {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	align-items: center;
	font-size: 0.8125rem;
	color: var(--muted);
}
.pearl-footer__bottom a { font-size: inherit; color: var(--muted); }
.pearl-footer__bottom .pearl-footer__legal { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-left: auto; }

/* ==========================================================================
   19. Entry (news / publication single views)
   ========================================================================== */

.pearl-entry { padding-block: calc(var(--pearl-header-h) / 2 + var(--wp--preset--spacing--70)) var(--wp--preset--spacing--80); }
.pearl-entry__title { max-width: 20ch; }
.pearl-entry .entry-content > * { margin-block: 1.5rem; }
.pearl-entry .entry-content > h2 { margin-block: 3rem 1rem; }
.pearl-entry .entry-content > h3 { margin-block: 2.25rem 0.75rem; }
.pearl-entry .entry-content > :first-child { margin-top: 0; }

/* ==========================================================================
   20. Motion — additive only, so the page is complete without it
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.pearl-reveal {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.7s var(--pearl-ease), transform 0.7s var(--pearl-ease);
	}
	.pearl-reveal.is-visible { opacity: 1; transform: none; }
	/* Never hide content when the observer cannot run. */
	html.no-js .pearl-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   21. Print
   ========================================================================== */

@media print {
	.pearl-header, .pearl-footer, .pearl-drawer, .pearl-burger, .pearl-hero__actions { display: none !important; }
	.pearl-dark, .is-style-pearl-dark { background: #fff !important; color: #000 !important; }
	.pearl-reveal { opacity: 1 !important; transform: none !important; }
}