/*
Theme Name: Painted Poems
Theme URI: https://alligatordesign.click/
Author: Alligator Design (Geert Valère Allegaert)
Author URI: https://alligatordesign.click/
Description: Site copy of the Alligator base theme for paintedpoems.world (Jan Van Pelt): poems, paintings, a links collection. Created and maintained by Alligator Design. This theme never receives updates from wordpress.org.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0.96-paintedpoems
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: painted-poems
Update URI: https://alligatordesign.click/alligator-theme
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, sticky-post, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* ============================================================
   Sticky footer — the footer sits at the bottom of the window on a
   page that is shorter than the screen, and simply follows the content
   on a page that is longer. Added 4 Oct 2026, for every site.

   How it works: WordPress wraps everything in .wp-site-blocks, whose
   children are the header, the main element and the footer. Making
   that wrapper a vertical flex container and letting <main> take the
   leftover space pushes the footer down. The rule is tied to <main>
   and not to a child count, so a template with an extra top-level
   block keeps working.

   100dvh rather than 100vh: on a phone, 100vh is the height of the
   window with the browser chrome hidden, which is taller than what you
   can actually see, so a short page would hide the footer below the
   fold — the opposite of the intention. 100vh stays as the fallback
   for the few browsers that do not know dvh.
   ============================================================ */
html {
	min-height: 100%;
}
body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
}
/* Logged in, WordPress pushes the whole document down by the height of its
   admin bar (html { margin-top: 32px !important }). Without this the page
   would be exactly that much too tall for the window and scroll by a sliver
   — which only you would ever see, every single day. */
body.admin-bar {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
	body.admin-bar {
		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}


/* ============================================================
   Alligator sticky header — position, glass, edge.
   ============================================================ */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* The page's own base colour, translucent — not white, so the header
	   belongs to the palette instead of floating on top of it. */
	background-color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 88%, transparent);
	backdrop-filter: blur(8px);
	pointer-events: none;
}

/* Header hide-on-scroll (variant B): assets/js/header-hide.js sets an
   inline "top" (minus the header's own height) when you scroll down past
   the first screen and clears it the moment you scroll up. Only "top"
   moves — never "transform", which would break the fixed mobile-menu
   overlay. Without JavaScript the header simply stays sticky. */
header.wp-block-template-part {
	transition: top 0.35s ease;
}
header.wp-block-template-part:has(.is-menu-open) {
	top: var(--wp-admin--admin-bar--height, 0px) !important;
}
/* ============================================================
   Alligator edge shadows — header casts down, footer casts up.
   One token, two directions, always in sync.
   ============================================================ */
:root {
	--alligator-edge-shadow: 24px rgb(0 0 0 / 0.08);
}
header.wp-block-template-part {
	box-shadow: 0 8px var(--alligator-edge-shadow);
}
footer.wp-block-template-part {
	box-shadow: 0 -8px var(--alligator-edge-shadow);
}

/* ============================================================
   Alligator mono — systeemstack, geen bestanden, geen download.
   ============================================================ */
code, kbd, pre, samp {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.9em;
}

/* Intro paragraph, a size larger (class alligator-lead; used on Colofon). */
.alligator-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

/* ============================================================
   Alligator pull quote — magazine style. One sentence lifted out of the
   text, set large, hanging into the margin with the body text flowing
   around it. Use the core "Pull quote" block and give it left or right
   alignment in the toolbar; without an alignment it centres in the
   column, which is the safe fallback for narrow screens.

   The breakout is done with a negative margin that grows with the
   viewport: at 60rem the quote leans a little into the white space, on a
   wide screen it sits almost entirely in the margin. Below 60rem there
   is no margin to hang in, so the float is dropped entirely — a floated
   quote on a phone would leave a two-word-wide column beside it.

   Convention: a pull quote REPEATS a sentence from the text around it.
   It is a signpost for whoever is scanning, not new information.
   ============================================================ */
.wp-block-pullquote,
.alligator-pull {
	margin-block: var(--wp--preset--spacing--60);
}
.wp-block-pullquote blockquote {
	margin: 0;
}
.wp-block-pullquote p,
.alligator-pull {
	margin: 0;
	/* Light and italic rather than bold: at this size weight shouts, and a
	   quote should invite rather than interrupt. Atkinson is a variable
	   font, so weight 300 and italic cost no extra file — the page still
	   loads only two typefaces. (Fraunces was tried here and dropped: too
	   much character for a quiet page.) */
	font-family: var(--wp--preset--font-family--atkinson);
	font-weight: 300;
	font-style: italic;
	/* Between the body text and the x-large preset: big enough to read as a
	   highlight, small enough to stay comfortable in a narrow floating
	   column. Fluid, so it never overwhelms a phone. */
	font-size: clamp(1.5rem, 1.15rem + 0.9vw, 1.85rem);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast, currentColor);
	text-wrap: balance;
}
/* A light box instead of a rule: it holds the quote together as an object
   on the page, which a floating block needs, and the tinted ground keeps
   it from reading as a form field. Kept deliberately soft — a hard border
   would compete with the text it is quoting. */
.wp-block-pullquote,
.alligator-pull {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1, currentColor) 28%, transparent);
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1, currentColor) 5%, transparent);
}
.wp-block-pullquote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--atkinson);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent-4, currentColor);
}
/* The attribution line is set off with an em dash, added here rather than typed
   into the content: it stays out of the XML export and out of what a screen
   reader reads as text, and every pull quote on every site gets it for free. */
.wp-block-pullquote cite::before {
	content: "\2014\00a0";
}
/* No alignment: centred in the column. */
.wp-block-pullquote:not(.alignleft):not(.alignright),
.alligator-pull:not(.alignleft):not(.alignright) {
	text-align: center;
}

/* Narrow screens: no floating at all. An aligned quote is reset to the full
   column and centred, exactly like an unaligned one — a floating block beside
   a phone column would leave a ribbon of two words. */
@media (max-width: 65.99rem) {
	.wp-block-pullquote.alignleft,
	.wp-block-pullquote.alignright,
	.alligator-pull.alignleft,
	.alligator-pull.alignright {
		float: none;
		width: auto;
		max-width: 100%;
		margin-inline: 0;
		text-align: center;
	}
}

/* From 66rem there is room for a float AND a readable column beside it.
   The rule behind every step below: whatever the quote takes from the
   42rem text column, at least 24rem of text must remain — about eleven
   words a line, the point where prose still reads as prose. So the quote
   grows only as fast as the margin it can hang in. */
@media (min-width: 66rem) {
	.wp-block-pullquote.alignright,
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignright,
	.alligator-pull.alignleft {
		width: min(20rem, 45%);
		text-align: left;
		margin-block: 0.4rem 1.8rem;
	}
	.wp-block-pullquote.alignright,
	.alligator-pull.alignright {
		float: right;
		margin-left: 2.25rem;
		margin-right: -5rem;
	}
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignleft {
		float: left;
		margin-right: 2.25rem;
		margin-left: -5rem;
	}
}

@media (min-width: 80rem) {
	.wp-block-pullquote.alignright,
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignright,
	.alligator-pull.alignleft {
		width: min(22rem, 45%);
	}
	.wp-block-pullquote.alignright,
	.alligator-pull.alignright {
		margin-right: -9rem;
	}
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignleft {
		margin-left: -9rem;
	}
}

@media (min-width: 95rem) {
	.wp-block-pullquote.alignright,
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignright,
	.alligator-pull.alignleft {
		width: min(24rem, 48%);
	}
	.wp-block-pullquote.alignright,
	.alligator-pull.alignright {
		margin-right: -13rem;
	}
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignleft {
		margin-left: -13rem;
	}
}

/* A heading never starts beside a floating quote. */
h2.wp-block-heading,
h3.wp-block-heading {
	clear: both;
}

/* ============================================================
   Alligator typographic refinements — magazine details that make a page
   feel looked-after without anyone being able to say why.
   ============================================================ */

/* Hanging punctuation: quotation marks and dashes sit a fraction outside
   the column, so the left edge of the text looks straight instead of
   nibbled. Supported in Safari today, ignored elsewhere — a refinement
   that costs nothing when it is missing. */
html {
	hanging-punctuation: first last;
}

/* Abbreviations in small capitals: WCAG, PDF, CMS and their kind stop
   shouting in the middle of a sentence. Applies to <abbr> — which is
   also where the expansion belongs, in its title attribute. */
abbr {
	font-variant-caps: all-small-caps;
	letter-spacing: 0.04em;
	text-decoration: none;
}
abbr[title] {
	cursor: help;
	border-bottom: 1px dotted color-mix(in srgb, currentColor 35%, transparent);
}

/* Page metadata — "Last updated: …" on legal pages. Quieter and smaller than
   body text, so it reads as a note about the document rather than as part of
   it. Add the class to the paragraph: block sidebar → Advanced →
   Additional CSS class(es) → alligator-update. */
.alligator-update {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent-4, #807D7A);
}
/* Email addresses from [alligator_email]. The plain class is the DEFAULT and
   deliberately quiet: in body text an address should run along with the
   sentence, not shout. Only a long address gets permission to break. */
.alligator-email a {
	word-break: break-word;
}
/* The display version — [alligator_email size=big] — for a contact section
   where the address IS the call to action. The class also works by hand on a
   paragraph, for an address typed without the shortcode. */
.alligator-email--big a,
p.alligator-email--big a {
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.02em;
	text-decoration: none;
}
.alligator-email--big a:hover {
	text-decoration: underline;
}

/* ============================================================
   Alligator in-page navigation helpers (one-pager).
   ============================================================ */
/* Jumping to a section lands on its top edge, flush with the top of the
   window: the texture of the section you are going to starts exactly where
   the window starts, with no sliver of the previous one left above it.
   No allowance is made for the header, for two reasons: it hides itself on
   the way down (so any allowance would show up as an empty strip), and
   every section carries enough padding of its own to keep its heading clear
   of the header on the way up. Other anchor targets — a heading inside an
   article, say — do need the allowance, hence the second rule. */
section.wp-block-group[id] {
	scroll-margin-top: 0;
}

:where(h1, h2, h3, h4)[id],
.wp-block-group:not(section)[id] {
	scroll-margin-top: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ============================================================
   PAINTED POEMS — site-specific styles. Everything below belongs
   to paintedpoems.world only; everything above comes from the base.
   Colours come from theme.json (the poster: grey paper, blue block,
   black type). Fonts: League Spartan for titles and labels, Source
   Serif 4 for reading.
   ============================================================ */

/* Painted Poems header — the poster's blue, white type.
   The base draws the header background in ::before (so backdrop-filter
   never turns the header into a containing block for the mobile menu);
   we only change its colour, and drop the glass. */
header.wp-block-template-part::before {
	background-color: var(--wp--preset--color--accent-1);
	backdrop-filter: none;
}
.pp-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding: 1rem var(--wp--style--root--padding-right, 1.5rem) 0.85rem var(--wp--style--root--padding-left, 1.5rem);
	color: #fff;
	font-family: var(--wp--preset--font-family--spartan);
}
.pp-header a {
	color: #fff;
	text-decoration: none;
}
.pp-site-title {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
}
.pp-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.pp-nav a:hover,
.pp-nav a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 0.3em;
}
/* Focus must be visible on blue too: white ring, not the default dark one. */
.pp-header a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}
@media (max-width: 600px) {
	.pp-header { flex-direction: column; align-items: flex-start; }
}

/* Labels: language, dates, the name under the title — the poster's
   letterspaced capitals. */
.pp-kicker,
.pp-kicker a,
.pp-date,
.pp-meta,
.pp-langs {
	font-family: var(--wp--preset--font-family--spartan);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pp-kicker a { text-decoration: none; }
.pp-meta { gap: 0.25rem 1rem; color: var(--wp--preset--color--accent-4); }
.pp-meta a { color: inherit; text-decoration: none; }

/* The big title on the homepage, as on the poster. */
.pp-display {
	font-size: clamp(3rem, 9vw, 6.5rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin-bottom: 0;
}

/* The blue block with a quote, as on the poster. White on #2E42A3 is 8.7:1. */
.pp-quote-block {
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	padding: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--spartan);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	text-align: right;
}
.pp-quote-block a { color: #fff; }

/* A poem. The Verse block keeps line breaks and indentation; here it only
   loses the monospace look and the horizontal scrollbar a long line would
   otherwise get on a phone. */
.pp-poem .wp-block-verse,
.pp-poem-list .wp-block-verse {
	font-family: var(--wp--preset--font-family--serif);
	white-space: pre-wrap;
	overflow-wrap: break-word;
	overflow: visible;
	background: none;
	padding: 0;
}
.pp-poem .wp-block-post-title { margin-top: 0.25rem; }
.pp-poem .pp-date,
.pp-painting .pp-date { color: var(--wp--preset--color--accent-4); }

/* Lists of poems: a quiet rule between them. */
.pp-poem-list .wp-block-post-template > li {
	padding-block: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}
.pp-poem-list .wp-block-post-title { margin: 0 0 0.35rem; }
.pp-poem-list .wp-block-post-title a { text-decoration: none; }
.pp-poem-list .wp-block-post-title a:hover { text-decoration: underline; }

/* Language row above the list. */
.pp-langs a {
	display: inline-block;
	margin-right: 1rem;
	text-decoration: none;
}
.pp-langs a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px !important; text-underline-offset: 0.3em; } /* same mark as the bio switch */

/* Painting grid: tiles align at the top, the painting keeps its proportions. */
.pp-grid { align-items: start; }
.pp-grid .wp-block-post-title { margin-top: 0.6rem; margin-bottom: 0; }
.pp-grid .wp-block-post-title a { text-decoration: none; }

/* A painting on its own page: the caption under the image. */
.pp-painting .wp-block-image figcaption { margin-top: 0.75rem; }

/* Previous / next under a poem or painting. */
.pp-prevnext {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--accent-6);
	gap: 1rem 2rem;
	font-size: var(--wp--preset--font-size--small);
}
.pp-back { font-size: var(--wp--preset--font-size--small); }

/* Bio with language switch — see patterns/page-bio-paintedpoems.php.
   Front end only: in the editor (body.editor-styles-wrapper) all three
   languages stay visible, or there would be nothing to type into. */
.pp-portrait img {
	width: 180px;
	height: 180px;
	object-fit: cover;
	border-radius: 50%;
}
.pp-bio-switch { text-align: center; }
.pp-bio-lang { scroll-margin-top: 10rem; } /* sticky header + the switch stay in view */
:where(body:not(.editor-styles-wrapper)) .pp-bio:not(:has(.pp-bio-lang:target)) .pp-bio-lang:not(#nl),
:where(body:not(.editor-styles-wrapper)) .pp-bio:has(.pp-bio-lang:target) .pp-bio-lang:not(:target) {
	display: none;
}
/* The language on screen is underlined in the switch. */
.pp-bio:not(:has(.pp-bio-lang:target)) .pp-bio-switch a[href="#nl"],
.pp-bio:has(#nl:target) .pp-bio-switch a[href="#nl"],
.pp-bio:has(#fr:target) .pp-bio-switch a[href="#fr"],
.pp-bio:has(#en:target) .pp-bio-switch a[href="#en"] {
	text-decoration: underline;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 0.3em;
}

/* Facts under the title (born, lives): a paragraph with the class
   pp-bio-facts, in the poster's letterspaced capitals. */
.pp-bio-facts {
	text-align: center;
	font-family: var(--wp--preset--font-family--spartan);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--wp--preset--color--accent-4);
	margin-top: 0.5rem;
}

/* Homepage only (main.pp-home, set in templates/front-page.html): wider,
   more like a magazine spread. The content column goes from 72rem to
   88rem (≈1400 px), and the gutters left and right grow with the screen,
   so on a large screen the page breathes instead of stretching.
   The inner group in the page Home still carries contentSize 72rem from
   its seed; the second rule lifts that, without touching the database. */
main.pp-home {
	/* Narrower gutters than the rest of the site: on a laptop the screen,
	   not the max-width, decides the width — so wider means less margin. */
	padding-left: clamp(1.25rem, 4vw, 4rem);
	padding-right: clamp(1.25rem, 4vw, 4rem);
}
/* The real brake: main's own layout held the post-content block itself to
   the site's text width (42rem, ≈670 px), so nothing inside could grow.
   On the homepage the content takes the screen, minus the gutters above;
   it stops growing at 76rem (≈1215 px). */
main.pp-home > .wp-block-post-content {
	max-width: none !important;
}
main.pp-home .wp-block-post-content > .alignwide {
	max-width: 76rem;
}
main.pp-home .wp-block-post-content > .alignwide > :not(.alignfull) {
	max-width: none;
}
main.pp-home .wp-block-columns {
	gap: clamp(2rem, 5vw, 5rem);
}

/* Bio page: more air at the top. Facts → portrait → switch → text, each
   step with its own breathing room, so the text starts calmly below. */
.pp-bio .pp-portrait {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: 0;
}
.pp-bio .pp-bio-switch {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: 0;
}
/* With the titles above it (see "Bio titles"), the switch sits right
   under the title; the big step moves up to the title. */
.pp-bio .pp-bio-title ~ .pp-bio-switch {
	margin-top: var(--wp--preset--spacing--40);
}
/* The switch belongs to the framed text below it, not to the photo. */
.pp-bio .pp-bio-lang {
	margin-top: var(--wp--preset--spacing--30);
}

/* Homepage intro: Jan's portrait in a circle beside the opening paragraph
   of his bio. A Media & Text block with the class pp-home-intro — native
   block, stacks on a phone by itself. */
.pp-home-intro {
	align-items: center;
	column-gap: var(--wp--preset--spacing--50);
}
.pp-home-intro .wp-block-media-text__media img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	width: 100%;
	max-width: 14rem;
}
.pp-home-intro .wp-block-media-text__content {
	padding: 0;
}
@media (max-width: 600px) {
	.pp-home-intro .wp-block-media-text__media { justify-self: center; }
	.pp-home-intro .wp-block-media-text__media img { max-width: 10rem; margin-inline: auto; display: block; }
	.pp-home-intro .wp-block-media-text__content { margin-top: 1.5rem; }
}

/* Homepage, two rows (see inc/home-layout.php for how the page was ordered):
   intro | quote, then recent poems | recent paintings side by side. */
main.pp-home .pp-home-top,
main.pp-home .pp-home-recent {
	gap: clamp(2rem, 5vw, 5rem);
}
/* Both headings start level with each other at the top of their column. */
main.pp-home .pp-home-recent .wp-block-column > .wp-block-heading:first-child {
	margin-top: 0 !important;
}
/* Paintings in a half column: two across instead of a squeezed three. */
main.pp-home .pp-home-recent .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)) !important;
}

/* Homepage intro in a light frame: a thin line in the ink colour at low
   strength, square corners like the blocks on the poster, room inside. */
.pp-home-intro {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	padding: clamp(1.25rem, 3vw, 2.5rem);
}

/* The blue quote block: the text as large as the block allows, never
   larger. The block is a size container, so the text scales with the
   block's own width (cqi), not with the screen. Its longest line,
   "moving towards finity?", is 10.1 em wide in League Spartan bold;
   9cqi leaves a little air on the right. Applies wherever the block is. */
.pp-quote-block {
	container-type: inline-size;
	/* 1.0.87: more blue above and below the text. */
	padding-top: var(--wp--preset--spacing--70) !important; /* was 50: max 50 px, now max 90 px */
	padding-bottom: var(--wp--preset--spacing--70) !important;
}
.pp-quote-block p {
	/* 1.0.86: a little larger (9 → 9.6cqi, 96% of the width for the
	   longest line) and more air between the lines (1.08 → 1.3), so the
	   blue block grows taller above and below. */
	font-size: clamp(1.25rem, 9.6cqi, 4.25rem);
	line-height: 1.4 !important; /* !important: beats a line height set on the block itself */
	letter-spacing: -0.01em;
}

/* Bio: each language (heading + text) in the same light frame as the
   intro on the homepage. Only one language shows at a time, so there is
   always exactly one frame. Heading stays left-aligned, with the text. */
.pp-bio .pp-bio-lang {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	padding: clamp(1.25rem, 3vw, 2.5rem);
}
.pp-bio .pp-bio-lang > .wp-block-heading:first-child {
	margin-top: 0;
}

/* Bio titles: Over Jan · À propos de Jan · About Jan, above the switch,
   switching with it — the same :target rule as the texts. Dutch by
   default. Front end only; in the editor all three stay visible. */
.pp-bio .pp-bio-title {
	text-align: center;
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: 0;
}
:where(body:not(.editor-styles-wrapper)) .pp-bio:not(:has(.pp-bio-lang:target)) .pp-bio-title:not(.pp-lang-nl),
:where(body:not(.editor-styles-wrapper)) .pp-bio:has(#nl:target) .pp-bio-title:not(.pp-lang-nl),
:where(body:not(.editor-styles-wrapper)) .pp-bio:has(#fr:target) .pp-bio-title:not(.pp-lang-fr),
:where(body:not(.editor-styles-wrapper)) .pp-bio:has(#en:target) .pp-bio-title:not(.pp-lang-en) {
	display: none;
}

/* Expo banner on the homepage (class pp-expo): a band in the page's own
   grey, deepened (#CDD2D6 on #E7EAEC), with ink type (12:1) and the dates
   and tagline in the poster blue (5.7:1), to tie the banner to the header.
   Three columns: what & when · where · hours; they stack on a phone.
   (Earlier trials — ink, rust, coral — were removed at the clean-up.) */
.pp-expo {
	--pp-expo-bg: #CDD2D6;
	--pp-expo-fg: var(--wp--preset--color--contrast);
	background: var(--pp-expo-bg);
	color: var(--pp-expo-fg);
	padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
	margin-top: var(--wp--preset--spacing--50);
}
.pp-expo .wp-block-columns {
	gap: clamp(1rem, 4vw, 3rem);
	margin-bottom: 0;
}
/* The banner is a constrained group, which held its columns to the text
   width (42rem) in the middle of the band. The columns take the band. */
.pp-expo > .wp-block-columns {
	max-width: none !important;
	width: 100%;
}
.pp-expo p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}
.pp-expo a { color: var(--pp-expo-fg); }
/* Two paragraphs in one banner column: a clear pause between them.
   (Kicker + dates keep their own tight spacing.) */
.pp-expo .wp-block-column > p + p:not(.pp-expo-dates) {
	margin-top: 0.9rem;
}
/* Left column: "EXPO · PAINTED POEMS" and the dates, in the poster's letter. */
.pp-expo .pp-expo-kicker {
	font-family: var(--wp--preset--font-family--spartan);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pp-expo-fg);
}
.pp-expo .pp-expo-dates {
	font-family: var(--wp--preset--font-family--spartan);
	font-weight: 800;
	/* 28px (1.75rem) on a computer, as chosen in the editor on 26 Sep;
	   smaller on a narrow screen, never below 1.4rem. */
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	line-height: 1.05;
	text-transform: uppercase;
	margin-top: 0.35rem;
	color: var(--wp--preset--color--accent-1);
}
/* Middle column, address and hours: same letter as the rest of the
   banner, heavier and a little larger, so it holds its own. */
.pp-expo .wp-block-column:nth-child(2) p {
	font-family: var(--wp--preset--font-family--spartan);
	font-weight: 600;
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	line-height: 1.35;
}
.pp-expo .wp-block-column:nth-child(2) strong {
	font-weight: 800;
}
/* Right column, the tagline ("Een selectie van recente schilderijen en
   gedichten in een intiem kader."): the dates' letter and blue, a size
   smaller, normal case, with air between the letters like a line from
   the poster. */
.pp-expo .wp-block-column:last-child p {
	font-family: var(--wp--preset--font-family--spartan);
	font-weight: 700;
	font-size: clamp(1.2rem, 1.7vw, 1.4rem);
	line-height: 1.4;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--accent-1);
}

/* Homepage, "Recente schilderijen": every preview the same square, so
   the grid is even whatever the painting's proportions. The image fills
   the square and is cropped at the edges (object-fit: cover); the whole
   painting is on its own page, one click away.
   Rather see the whole painting in the square, with paper around it?
   Change cover to contain — the background below then shows. */
.pp-home-recent .wp-block-post-featured-image {
	margin: 0;
	background: var(--wp--preset--color--accent-5);
}
.pp-home-recent .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

/* Paintings on the homepage: on a phone 2 across (6 = 3 rows). */
main.pp-home .pp-home-recent .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(2, 1fr) !important;
}

/* Second row of the homepage (1.0.90): paintings first and wide, poems
   after and narrow — 64 / 36, the same split as the bio and the quote
   above, so the two rows line up. Six paintings, 3 × 2 (PP 3d in
   inc/paintedpoems.php). The paintings column is the one with images;
   no class needed in the page. On a phone the columns stack in the
   page's own order: poems, then paintings. */
@media (min-width: 782px) {
	main.pp-home .pp-home-recent > .wp-block-column:has(.wp-block-post-featured-image) {
		order: -1;
		flex-basis: 64% !important;
	}
	main.pp-home .pp-home-recent > .wp-block-column:not(:has(.wp-block-post-featured-image)) {
		flex-basis: 36% !important;
	}
	main.pp-home .pp-home-recent .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	/* The poems column (1.0.95): everything starts at one line, a third
	   into the column (15% since 1.0.96) — heading, poems (title, language, year), the rules
	   between them and the link "Alle gedichten", all left-aligned on it. */
	/* A margin on each child, not padding on the column: a percentage in
	   padding counts from the whole row, in a child's margin from the column. */
	main.pp-home .pp-home-recent > .wp-block-column:not(:has(.wp-block-post-featured-image)) > * {
		margin-left: 15% !important; /* was 33%: "Enkele gedichten" fits on one line */
	}
}

/* Italics (proper names, words in another language) get a touch of extra
   letter spacing: Source Serif's italic is narrower than its roman, and
   a little air makes a word set apart in italics easier to read. */
em, i {
	letter-spacing: 0.03em;
}

/* Page Schilderijen (archive-painting.html, .pp-grid): the same even
   squares as on the homepage. Each painting fills its square and is
   cropped at the edges; the whole work is on its own page. */
.pp-grid .wp-block-post-featured-image {
	margin: 0;
	background: var(--wp--preset--color--accent-5);
}
.pp-grid .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

/* Lightbox on the page Schilderijen (assets/js/painting-lightbox.js).
   The painting whole, on dark, as large as the screen allows; white type
   on ink (17:1). Buttons are big enough to hit on a phone (48 px) and
   show a clear white ring when reached with the keyboard. */
.pp-lightbox {
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: clamp(1rem, 3vw, 2.5rem) clamp(3.5rem, 7vw, 6rem);
	border: 0;
	background: rgb(17 20 24 / 0.96);
	color: #fff;
	box-sizing: border-box;
	overflow: hidden;
}
.pp-lightbox[open] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}
.pp-lightbox::backdrop { background: rgb(17 20 24 / 0.6); }
html.pp-lb-open { overflow: hidden; }

.pp-lb-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	min-height: 0;
}
.pp-lb-img {
	display: block;
	max-width: 100%;
	max-height: calc(100dvh - 11rem);
	width: auto;
	height: auto;
	object-fit: contain;
}
.pp-lb-caption {
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}
.pp-lb-title {
	display: block;
	font-family: var(--wp--preset--font-family--spartan);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.02em;
}
.pp-lb-text { font-style: italic; }
.pp-lb-foot {
	margin: 0;
	display: flex;
	gap: 1.5rem;
	font-family: var(--wp--preset--font-family--spartan);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.pp-lb-title a { color: inherit; text-underline-offset: 0.2em; }
.pp-lb-title a:hover { text-decoration-thickness: 2px; }
.pp-lb-title a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.pp-lb-close,
.pp-lb-prev,
.pp-lb-next {
	position: absolute;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0 0 0.2rem;
}
.pp-lb-close { top: 1rem; right: 1rem; font-size: 1.6rem; }
.pp-lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.pp-lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.pp-lb-close:hover,
.pp-lb-prev:hover,
.pp-lb-next:hover { background: rgb(255 255 255 / 0.12); }
.pp-lightbox :focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
/* On a phone the arrows move to the bottom corners, out of the painting. */
@media (max-width: 600px) {
	.pp-lightbox { padding: 3.5rem 1rem 5rem; }
	.pp-lb-prev,
	.pp-lb-next { top: auto; bottom: 1rem; transform: none; }
	.pp-lb-img { max-height: calc(100dvh - 14rem); }
}
@media (prefers-reduced-motion: no-preference) {
	.pp-lightbox[open] { animation: pp-lb-fade 0.2s ease-out; }
	@keyframes pp-lb-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* Bio switch: when a language is chosen, the browser scrolls to that
   language's text. The title (Over Jan · À propos de Jan · About Jan)
   and the switch sit above the text, so the text stops far enough down
   for both — plus the sticky header and, when logged in, the admin bar.
   Header ≈ 3.5rem, title ≈ 2.6rem, gaps ≈ 3.2rem, switch ≈ 1.5rem, air. */
.pp-bio .pp-bio-lang {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 13rem);
}
/* On a phone the header wraps onto two lines: more room needed. */
@media (max-width: 600px) {
	.pp-bio .pp-bio-lang {
		scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 15.5rem);
	}
}

/* ============================================================
   Previous / next on a poem or painting — clear buttons, in the spirit
   of the lightbox but on the page itself: a round arrow button with
   "Volgend gedicht" and the title beside it. The whole thing is one link.
   Wide screens: beside the text, in the empty space left and right, and
   they travel along while you read (sticky). Narrower screens: below the
   text, as two blocks side by side.
   ============================================================ */
.pp-prevnext {
	border-top: 0;
	padding-top: 0;
	align-items: stretch;
}
.pp-prevnext > :not(:has(a)) { display: none; }      /* first / last item: no empty half */
.pp-prevnext .post-navigation-link-next { margin-left: auto; }
.pp-prevnext [class*="__arrow-"] { display: none; }   /* the arrow is drawn in the button */

.pp-prevnext a {
	display: grid;
	grid-template-columns: 3rem 1fr;
	align-items: center;
	column-gap: 0.9rem;
	max-width: 15rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.pp-prevnext .post-navigation-link-next a {
	grid-template-columns: 1fr 3rem;
	text-align: right;
}
.pp-prevnext a::before {
	content: "←";
	grid-row: 1 / span 2;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
	display: grid;
	place-items: center;
	font-size: 1.3rem;
	line-height: 1;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pp-prevnext .post-navigation-link-next a::before {
	content: "→";
	grid-column: 2;
}
.pp-prevnext .post-navigation-link-next a .post-navigation-link__label,
.pp-prevnext .post-navigation-link-next a .post-navigation-link__title { grid-column: 1; }
.pp-prevnext a:hover::before,
.pp-prevnext a:focus-visible::before {
	background: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
	color: #fff;
}
.pp-prevnext a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 4px;
}
.pp-prevnext .post-navigation-link__label {
	font-family: var(--wp--preset--font-family--spartan);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
	align-self: end;
}
.pp-prevnext .post-navigation-link__title {
	font-family: var(--wp--preset--font-family--spartan);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.2;
	align-self: start;
}
.pp-prevnext a:hover .post-navigation-link__title { color: var(--wp--preset--color--accent-1); }

/* Beside the text when there is room: 36rem poem column + 2 × (15rem
   button + gaps) ≈ 70rem; the painting column is 52rem ≈ 86rem. */
@media (min-width: 70rem) {
	.pp-poem { position: relative; }
	.pp-poem > .pp-prevnext {
		position: absolute;
		inset: var(--wp--preset--spacing--60) 0 0 0;
		max-width: none !important;
		margin: 0 !important;
		/* Buttons 3rem from the text column (18rem = half the 36rem column,
		   15rem = button), never closer than 1.5rem to the screen edge. */
		padding: 0 max(1.5rem, calc(50% - 36rem));
		display: flex !important;
		justify-content: space-between;
		align-items: flex-start;
		pointer-events: none;
	}
	.pp-poem > .pp-prevnext > * {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 45vh);
		pointer-events: auto;
	}
}
@media (min-width: 86rem) {
	.pp-painting { position: relative; }
	.pp-painting > .pp-prevnext {
		position: absolute;
		inset: var(--wp--preset--spacing--60) 0 0 0;
		max-width: none !important;
		margin: 0 !important;
		/* Same, around the 52rem painting column. */
		padding: 0 max(1.5rem, calc(50% - 44rem));
		display: flex !important;
		justify-content: space-between;
		align-items: flex-start;
		pointer-events: none;
	}
	.pp-painting > .pp-prevnext > * {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 45vh);
		pointer-events: auto;
	}
}

/* Poem slides in — every time a poem page opens, also after Previous /
   Next. Pure CSS keyframes instead of reveal.js: a keyframe animation
   always starts from its first frame, whatever the browser drew before,
   so a fast (cached) page load cannot skip it. The poem page has its
   content on screen straight away, so "when it scrolls into view" (what
   reveal.js is for) is not needed here. Motion only when the visitor has
   not asked for less. */
@media (prefers-reduced-motion: no-preference) {
	.pp-poem > * {
		animation: pp-slide-in 0.75s ease 0.125s both;
	}
	.pp-poem > :nth-child(2) { animation-delay: 0.25s; }
	.pp-poem > :nth-child(3) { animation-delay: 0.375s; }
	.pp-poem > :nth-child(4) { animation-delay: 0.5s; }
	.pp-poem > :nth-child(5) { animation-delay: 0.625s; }
	.pp-poem > :nth-child(n+6) { animation-delay: 0.75s; }
	/* The previous / next buttons beside the text: fade only, no slide —
	   a transform would break their sticky position. */
	.pp-poem > .pp-prevnext { animation-name: pp-fade-in; }
}
@keyframes pp-slide-in {
	from { opacity: 0; transform: translateX(3rem); }
	to   { opacity: 1; transform: none; }
}
@keyframes pp-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Poem page: "Gedichten" on top, as on the list of poems — the same size
   as that page's title, but not an h1: the poem's title is the page's h1.
   A link back to all poems. */
.pp-section-title {
	font-family: var(--wp--preset--font-family--spartan);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin-bottom: 0;
}
.pp-section-title a {
	color: inherit;
	text-decoration: none;
}
.pp-section-title a:hover { color: var(--wp--preset--color--accent-1); }
.pp-poem > .pp-langs + .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--60);
}

/* Poem page: "Gedichten" and the language row stand still — they are the
   frame, the same on every poem. Only the poem itself (title, text, date,
   back link, buttons) arrives. Delays re-counted from the title. */
@media (prefers-reduced-motion: no-preference) {
	.pp-poem > .pp-section-title,
	.pp-poem > .pp-langs { animation: none; }
	.pp-poem > .wp-block-post-title   { animation-delay: 0.125s; }
	.pp-poem > .wp-block-post-content { animation-delay: 0.25s; }
	.pp-poem > .pp-byline             { animation-delay: 0.375s; }
	.pp-poem > .pp-prevnext,
	.pp-poem > .pp-back               { animation-delay: 0.5s; }
}

/* The poem's title set apart from "Gedichten" above it: the reading
   letter (Source Serif) instead of League Spartan, a lighter weight, a
   touch smaller — the frame speaks in Spartan, the poem in serif. */
.pp-poem > .wp-block-post-title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.005em;
}

/* Previous / next buttons stand still too, like "Gedichten" and the
   language row: only the poem (title, text, date) arrives. */
@media (prefers-reduced-motion: no-preference) {
	.pp-poem > .pp-prevnext { animation: none; }
}

/* Lightbox: the dark area is a link to the painting's page — show it. */
.pp-lightbox { cursor: pointer; }
.pp-lb-figure,
.pp-lb-foot { cursor: auto; }

/* A painting's own page: the painting opens the lightbox — say so. */
.pp-lb-trigger { cursor: zoom-in; }
.pp-lb-trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 4px;
}

/* Byline — the same on a poem's page and a painting's page: title on top,
   the work, then the maker and the date under it, in one quiet line:
   "JAN VAN PELT · 12 MAART 2019". Like the signature under a poem in an
   anthology, or the label beside a painting. The name in ink, the date in
   the grey of all dates; the dot is drawn, so a screen reader reads
   "Jan Van Pelt 12 maart 2019" without it. */
.pp-byline {
	gap: 0 0.6rem;
	align-items: baseline;
	margin-top: var(--wp--preset--spacing--50);
}
.pp-byline > * { margin: 0; }
.pp-byline-name {
	font-family: var(--wp--preset--font-family--spartan);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pp-byline .pp-date::before {
	content: "·";
	margin-right: 0.6rem;
}
.pp-painting .pp-byline { margin-top: var(--wp--preset--spacing--40); }

/* A painting's page now opens like a poem's: "Schilderijen" on top in
   Spartan, the painting's title in the reading letter below it. */
.pp-painting > .pp-section-title + .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--50);
}
.pp-painting > .wp-block-post-title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.005em;
}

/* The header scrolls away with the page (from 1.0.74). The base keeps it
   sticky at the top; here it is an ordinary part of the page: the blue
   band at the top, gone once you read on, back when you scroll up to it.
   Relative, not static, so the mobile menu keeps its stacking order. */
header.wp-block-template-part {
	position: relative;
	top: auto;
}
header.wp-block-template-part:has(.is-menu-open) {
	top: auto !important;
}
/* With no header in the way, the bio text only needs room for its own
   title and the switch above it (bio-switch.js does the fine-tuning). */
.pp-bio .pp-bio-lang,
.pp-bio-lang {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 9.5rem);
}
@media (max-width: 600px) {
	.pp-bio .pp-bio-lang {
		scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 9.5rem);
	}
}

/* The blue band a little deeper (from 1.0.75): more air above and below
   the title and the links, 1rem / 0.85rem → 1.4rem / 1.25rem. */
.pp-header {
	padding-top: 1.4rem;
	padding-bottom: 1.25rem;
}

/* ============================================================
   Bio on the homepage (from 1.0.80, page Over gone): the three-language
   bio sits in the text half of the intro box, beside the portrait —
   title, facts, switch, text, all left-aligned with the text. The box
   is the frame, so the text loses its own frame; the text is a step
   smaller so the box stays compact next to the photo.
   ============================================================ */
.pp-home-bio .pp-bio-title,
.pp-home-bio .pp-bio-facts,
.pp-home-bio .pp-bio-switch {
	text-align: left;
}
.pp-home-bio .pp-bio-title {
	margin-top: 0;
}
.pp-home-bio .pp-bio-facts {
	margin-top: 0.25rem;
}
.pp-bio.pp-home-bio .pp-bio-title ~ .pp-bio-switch {
	margin-top: var(--wp--preset--spacing--30);
}
.pp-bio.pp-home-bio .pp-bio-lang {
	border: 0;
	padding: 0;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

/* The box in two rows (1.0.81). Top: title, facts and switch on the left,
   the portrait on the right. Below: the text, the full width of the frame.
   Done in CSS alone, the page content is untouched: the text half of the
   Media & Text block and the bio group step aside (display: contents), so
   their pieces sit straight in the block's own grid. The facts are two
   paragraphs (born · living), one row each. The switch lines up with the
   bottom of the portrait. */
main.pp-home .pp-home-intro {
	grid-template-columns: 1fr minmax(0, 11rem) !important;
	grid-template-rows: auto auto auto 1fr auto;
	align-items: start;
}
main.pp-home .pp-home-intro > .wp-block-media-text__content,
main.pp-home .pp-home-intro .pp-home-bio {
	display: contents;
}
main.pp-home .pp-home-intro .wp-block-media-text__media img {
	max-width: 11rem; /* was 14rem */
	display: block;
	margin-left: auto; /* right edge = right edge of the text below */
}
main.pp-home .pp-home-intro > .wp-block-media-text__media {
	justify-self: stretch;
	min-width: 0;
}
/* The text takes the full width of the frame: no centred text column
   inside it (a constrained group would hold it to 42rem, centred), and
   ordinary line breaking — "pretty" (Safari) evens out the right edge by
   making every line shorter, so the text stopped well short of the
   portrait's right edge. */
main.pp-home .pp-home-intro .pp-bio-lang > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-wrap: wrap;
}

/* Top row of the homepage (1.0.85): the bio box wider, the blue quote
   narrower — 64 / 36 instead of 60 / 40. The quote's type follows the
   width of its block, so it shrinks with it. On a phone the columns
   stack as before. */
@media (min-width: 782px) {
	main.pp-home .pp-home-top > .wp-block-column:first-child {
		flex-basis: 64% !important;
	}
	main.pp-home .pp-home-top > .wp-block-column:last-child {
		flex-basis: 36% !important;
	}
}
main.pp-home .pp-home-intro > .wp-block-media-text__media {
	grid-column: 2;
	grid-row: 1 / 5;
	align-self: center;
}
main.pp-home .pp-home-intro .pp-bio-title  { grid-column: 1; grid-row: 1; }
main.pp-home .pp-home-intro .pp-bio-facts  { grid-column: 1; grid-row: 2; }
main.pp-home .pp-home-intro .pp-bio-facts + .pp-bio-facts { grid-row: 3; margin-top: 0; }
main.pp-home .pp-home-intro .pp-bio-switch { grid-column: 1; grid-row: 4; align-self: end; }
main.pp-home .pp-home-intro .pp-bio-lang   { grid-column: 1 / -1; grid-row: 5; margin-top: var(--wp--preset--spacing--40); }

/* Nothing moves when the language changes (1.0.92). The three titles
   share one cell of the grid, and so do the three texts; the languages
   not on screen are made invisible instead of removed, so each cell keeps
   the height of its longest language. The box keeps one height, and the
   blue quote beside it stays put. (Invisible text is also left out for
   screen readers, just as before.) */
@supports selector(:has(a)) {
	main.pp-home .pp-home-intro .pp-bio-title,
	main.pp-home .pp-home-intro .pp-bio-lang {
		display: block !important;
		visibility: hidden;
	}
	main.pp-home .pp-home-intro:not(:has(.pp-bio-lang:target)) .pp-lang-nl:is(.pp-bio-title, .pp-bio-lang),
	main.pp-home .pp-home-intro:has(#nl:target) .pp-lang-nl:is(.pp-bio-title, .pp-bio-lang),
	main.pp-home .pp-home-intro:has(#fr:target) .pp-lang-fr:is(.pp-bio-title, .pp-bio-lang),
	main.pp-home .pp-home-intro:has(#en:target) .pp-lang-en:is(.pp-bio-title, .pp-bio-lang) {
		visibility: visible;
	}
}

/* Phone: one column — portrait, title, facts, switch, text; centred
   except the text. */
@media (max-width: 600px) {
	main.pp-home .pp-home-intro {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto;
	}
	main.pp-home .pp-home-intro > .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
	main.pp-home .pp-home-intro .wp-block-media-text__media img { margin-right: auto; } /* centred */
	main.pp-home .pp-home-intro .pp-bio-title  { grid-column: 1; grid-row: 2; margin-top: 1.5rem; }
	main.pp-home .pp-home-intro .pp-bio-facts  { grid-column: 1; grid-row: 3; }
	main.pp-home .pp-home-intro .pp-bio-facts + .pp-bio-facts { grid-row: 4; }
	main.pp-home .pp-home-intro .pp-bio-switch { grid-column: 1; grid-row: 5; }
	main.pp-home .pp-home-intro .pp-bio-lang   { grid-column: 1; grid-row: 6; }
	.pp-home-bio .pp-bio-title,
	.pp-home-bio .pp-bio-facts,
	.pp-home-bio .pp-bio-switch {
		text-align: center;
	}
}

/* Homepage headings in three languages: "Enkele gedichten" and "Enkele
   schilderijen", and the links "Alle gedichten" and "Alle schilderijen",
   follow the bio switch (inc/paintedpoems.php, PP 3f2).
   Dutch by default; without :has() support it simply stays Dutch. */
.pp-switch-title > .pp-lang-fr,
.pp-switch-title > .pp-lang-en,
main.pp-home:has(#fr:target) .pp-switch-title > .pp-lang-nl,
main.pp-home:has(#en:target) .pp-switch-title > .pp-lang-nl {
	display: none;
}
main.pp-home:has(#fr:target) .pp-switch-title > .pp-lang-fr,
main.pp-home:has(#en:target) .pp-switch-title > .pp-lang-en {
	display: inline;
}