/*
Theme Name: Alligator Design
Theme URI: https://alligatordesign.click/
Author: Alligator Design (Geert Valère Allegaert)
Author URI: https://alligatordesign.click/
Description: The Alligator theme as built for alligatordesign.net. One site, one folder, one theme name: a copy for another site has its own, so an upload can never silently replace the wrong one. Calm, fast and plugin-free — calm, fast, versatile and plugin-free websites built to last — no tracking scripts, no third-party bloat. 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.121-alligatordesign
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alligator-design
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
 *
 * 28 sep 2026: alleen nog op koppen en korte tekstsoorten. Op lopende
 * tekst is `text-wrap: pretty` in Safari géén louter afbreek-hint: die
 * browser mag ook de woordspatiëring bijstellen om het rag te redden,
 * en dan staat er een zichtbaar gat middenin een regel. De winst
 * (geen eenzaam woord onderaan) is onzichtbaar, de prijs niet.
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption {
	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 Carousel — scroll-snap, no JavaScript, no plugin.
   Usage: add the class "alligator-carousel" to a Group block
   that contains a Gallery block (or insert the ready-made
   pattern: Alligator → Carousel).
   ============================================================ */
.alligator-carousel .wp-block-gallery.has-nested-images {
	display: flex;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	padding-block-end: 0.75rem; /* room for the scrollbar */
}
.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex: 0 0 85% !important;
	width: 85% !important;
	scroll-snap-align: center;
	margin: 0;
}
.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 782px) {
	.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image {
		flex-basis: 45% !important;
		width: 45% !important;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.alligator-carousel .wp-block-gallery.has-nested-images {
		scroll-behavior: smooth;
	}
}
/* ============================================================
   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-languages { font-size: 0.85em; letter-spacing: 0.05em; }
.alligator-languages strong { opacity: 0.5; }

/* ============================================================
   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;
}

/* ============================================================
   Alligator taalswitch.
   ============================================================ */
.alligator-languages { font-size: 0.85em; letter-spacing: 0.05em; }
.alligator-languages--dropdown { position: relative; }
.alligator-languages--dropdown summary {
	cursor: pointer;
	list-style: none; /* geen driehoekje */
}
.alligator-languages--dropdown summary::after { content: " ▾"; font-size: 0.8em; }
.alligator-languages--dropdown nav {
	position: absolute;
	right: 0;
	background: var(--wp--preset--color--base);
	box-shadow: 0 8px var(--alligator-edge-shadow);
	padding: 0.5rem 0.9rem;
	display: grid;
	gap: 0.4rem;
	z-index: 101; /* boven de sticky header-inhoud */
}

/* ============================================================
   Alligator image protection — opt-in via class, geen echte
   beveiliging, enkel een drempel tegen de occasionele rechtsklik.
   ============================================================ */
.alligator-protect-image,
.alligator-protect-image img {
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

/* ============================================================
   Alligator Previous/Next nav bar — see alligator_render_prevnext_nav()
   in functions.php. Not wired to any template by default; opt in per
   project. Uses theme preset colors, so it follows the active style
   variation automatically.
   ============================================================ */
.alligator-prevnext {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
}
.alligator-prevnext__link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-decoration: none;
	color: inherit;
	max-width: 45%;
}
.alligator-prevnext__link--next {
	text-align: right;
	margin-left: auto;
}
.alligator-prevnext__label {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}
.alligator-prevnext__title {
	font-size: 1.05rem;
}
a.alligator-prevnext__link:hover .alligator-prevnext__title {
	color: var(--wp--preset--color--accent-1, currentColor);
}
.alligator-prevnext__link--disabled {
	opacity: 0.35;
	cursor: default;
}

/* ============================================================
   Alligator signup form — see [alligator_signup_form] shortcode and
   the honeypot/overlay-feedback pattern in functions.php. Not enqueued
   or shown anywhere until a project actually places the shortcode.
   ============================================================ */
.alligator-signup-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}
.alligator-signup-form input[type="email"] {
	flex: 1 1 16rem;
	padding: 0.6rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	border-radius: 0.5rem;
}
.alligator-signup-form button {
	padding: 0.6rem 1.4rem;
	border-radius: 0.5rem;
	border: none;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.alligator-signup-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	opacity: 0;
	transition: opacity 0.35s ease;
}
.alligator-signup-overlay.is-open {
	opacity: 1;
}
.alligator-signup-card {
	position: relative;
	max-width: 28rem;
	padding: 2rem 2.25rem;
	background: var(--wp--preset--color--base);
	border-radius: 0.75rem;
	box-shadow: 0 16px 48px rgb(0 0 0 / 0.25);
	transform: translateY(8px);
	transition: transform 0.35s ease;
}
.alligator-signup-overlay.is-open .alligator-signup-card {
	transform: translateY(0);
}
.alligator-signup-card--error {
	border-top: 3px solid #b32d2e;
}
.alligator-signup-card--success {
	border-top: 3px solid var(--wp--preset--color--accent-1, #2d7a3e);
}
.alligator-signup-overlay__close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: 0.6;
}
.alligator-signup-overlay__close:hover {
	opacity: 1;
}


/* ============================================================
   Alligator one-pager — section backgrounds + reveal-on-scroll.
   Origin: the look & feel of the Carrd version of alligatordesign
   (subtle wave/plus textures, content sliding in from the right).
   Usage: give a full-width Group block one of the background classes
   and, optionally, "alligator-reveal" (the whole group slides in) or
   "alligator-reveal-children" (its direct children slide in one after
   another). Script: assets/js/reveal.js — content is always visible
   without JavaScript, and never moves for prefers-reduced-motion.
   ============================================================ */

/* Two textures, straight from the Carrd site: a sparse "plus" pattern on
   a warm base, and soft waves on white. Both are inline SVG (one request
   less) and light: green pluses at 16%, clay waves at 14% opacity. */
.alligator-bg-plus {
	background-color: var(--wp--preset--color--base, #FFFBF7);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1024 1024%22 width=%221024%22 height=%221024%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bstroke-linecap:square%3Bstroke-width:7px%3Bstroke:rgba(58,122,14,0.16)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M 256 192 L 256 320 M 192 256 L 320 256%22/%3E%3Cpath d=%22M 768 704 L 768 832 M 704 768 L 832 768%22/%3E%3C/svg%3E");
	background-size: 221px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
}
.alligator-bg-waves {
	background-color: var(--wp--preset--color--accent-5, #FFFFFF);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22 width=%22512%22 height=%22512%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bfill:none%3Bstroke-width:6px%3Bstroke:rgba(181,86,31,0.14)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M0,448c128,0,128-128,256-128s128,128,256,128%22/%3E%3Cpath d=%22M0,192c128,0,128-128,256-128s128,128,256,128%22/%3E%3C/svg%3E");
	background-size: 282px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
}

/* Deep section: dark green with light text and faint white waves —
   the contrast beat between the light sections. */
.alligator-bg-deep {
	background-color: var(--wp--preset--color--accent-3, #234A11);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22 width=%22512%22 height=%22512%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bfill:none%3Bstroke-width:6px%3Bstroke:rgba(255,255,255,0.10)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M0,448c128,0,128-128,256-128s128,128,256,128%22/%3E%3Cpath d=%22M0,192c128,0,128-128,256-128s128,128,256,128%22/%3E%3C/svg%3E");
	background-size: 282px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
	color: var(--wp--preset--color--base, #F4F8EE);
}
.alligator-bg-deep h1,
.alligator-bg-deep h2,
.alligator-bg-deep h3,
.alligator-bg-deep .alligator-label,
.alligator-bg-deep .alligator-muted,
.alligator-bg-deep .alligator-top a {
	color: inherit;
}
.alligator-bg-deep .alligator-label,
.alligator-bg-deep .alligator-muted {
	opacity: 0.75;
}
.alligator-bg-deep a {
	color: inherit;
}

/* Reveal: hidden state is only applied once the script has confirmed it
   runs (html.alligator-js) — so without JS nothing is ever invisible. */
.alligator-js .alligator-reveal,
.alligator-js .alligator-reveal-children > * {
	opacity: 0;
	transform: translateX(3rem);
	transition: opacity 0.75s ease 0.125s, transform 0.75s ease 0.125s;
	will-change: opacity, transform;
}
.alligator-js .alligator-reveal.is-visible,
.alligator-js .alligator-reveal-children.is-visible > * {
	opacity: 1;
	transform: none;
	will-change: auto;
}
/* Children arrive one after another (Carrd's "stagger: 125"). */
.alligator-js .alligator-reveal-children.is-visible > :nth-child(2) { transition-delay: 0.25s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(3) { transition-delay: 0.375s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(4) { transition-delay: 0.5s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(5) { transition-delay: 0.625s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(n+6) { transition-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
	.alligator-js .alligator-reveal,
	.alligator-js .alligator-reveal-children > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Small typographic helpers used by the one-pager pattern. */
.alligator-label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4, #807D7A);
}
.alligator-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}
.alligator-muted {
	color: var(--wp--preset--color--accent-4, #807D7A);
}
/* The air above the filter row and above the grid sits on their wrappers, not
   on the elements themselves. WordPress zeroes the top margin of a first child
   with `:root :where(.is-layout-flow) > :first-child`, which outranks a single
   class — so a margin set on the nav or on the list is simply discarded. The
   `:root` here is not decoration; it is what makes the rule win. */
:root .alligator-filter-row {
	margin-block-start: var(--wp--preset--spacing--60);
}
:root .alligator-list-row {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* ============================================================
   Notes list — the index at /notes/, the category archives and the
   search results, through the pattern alligator/essay-list.

   Each note is a card: title, the one-line summary written as its
   excerpt, the opening paragraph of the piece, and the category at the
   foot. The opening paragraph is there so somebody can get a step
   further without committing to a click.

   Cards stretch to the height of their row and the category is pushed
   to the bottom, so the feet line up across a row. That is the one
   place where equal height helps: a row of boxes with their labels at
   different heights reads as a mistake.
   ============================================================ */
.alligator-essay-list {
	display: grid;
	grid-template-columns: 1fr;
	/* Wider gaps than the theme's usual rhythm, for two reasons. Horizontally
	   it narrows each card, which is what makes it tall and slim instead of
	   square — the proportion does more for the look than any amount of styling
	   inside the box. Vertically it keeps the rows from reading as one block of
	   texture. Rows get more air than columns, because a row break is a bigger
	   break than a column break. */
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--60);
	padding-left: 0;
	list-style: none;
}
@media (min-width: 40rem) {
	.alligator-essay-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 64rem) {
	.alligator-essay-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
/* WordPress gives every sibling but the first a block-gap margin-top. In a
   flow list that is right; in a grid it drops every item except the first by
   19px. The grid's own gap does the spacing, so the margin has to go. */
.alligator-essay-list > li {
	margin-top: 0;
}
/* Petrol on the notes pages — blue pulled towards teal, which is to say blue
   with some green still in it. The site is pistachio: a base of #F4F8EE, a
   yellow-green, with green and clay as its accents. A navy blue sits straight
   across the wheel from that and reads cold beside it; teal sits between the
   two, so it is clearly another place without being another temperature.

   Why the sand card did not work, measured rather than guessed: #FBF5EA
   against the page base is a contrast ratio of 1.01. That is no step at all —
   the card was held together entirely by its hairline. #DCE7F0 is 1.17: still
   quiet, but the eye now reads a surface instead of a border.

   Every pairing below is measured. Ink on the page base: 10.28. Body text on
   the card: 11.94. Ink on the card: 8.8. The category line: 5.51, where the
   old grey on sand was 3.77 and therefore failed AA — a real fault, not a
   preference.

   Three values make the whole scheme; change them to try another blue. */
:root {
	--alligator-blue-ink: #17414C;
	--alligator-blue-card: #DAE8E9;
	--alligator-blue-line: #ABCBCF;
	--alligator-blue-text: #35606A;
}
.alligator-essay {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.4rem 1.4rem 1.2rem;
	background: var(--alligator-blue-card, #DCE7F0);
	border: 1px solid var(--alligator-blue-line, #B3CADC);
	border-radius: 10px;
}
.alligator-essay-title {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0;
}
.alligator-essay-title a {
	text-decoration: none;
	color: var(--alligator-blue-ink, #1B3A5C);
}
.alligator-essay-title a:hover,
.alligator-essay-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.alligator-essay-summary {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast, inherit);
}
.alligator-essay-opening {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--alligator-blue-text, #3E5E75);
}
/* The category sits at the foot of the card: margin-top auto pushes it there
   whatever the length of the text above it. */
.alligator-essay-cat {
	margin: auto 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--alligator-blue-line, #B3CADC);
	font-size: var(--wp--preset--font-size--small);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--alligator-blue-text, #3E5E75);
}
.alligator-essay-pagination {
	margin-top: var(--wp--preset--spacing--50);
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* The sentence under the title runs the full width of the column: at 42rem it
   broke onto a second line, and a one-line subtitle that wraps looks like an
   accident. The usual objection — long lines are hard to read — is about
   running text, where the eye has to find the next line. There is no next
   line here. A longer introduction would need a width of its own. */
.alligator-notes-head .alligator-lead,
.alligator-notes-head .wp-block-term-description {
	max-width: none;
}
/* The second line: where the notes come from. Quieter than the line above it
   and in the ink of the notes pages, so the two read as a pair rather than as
   two sentences that happen to sit together. */
.alligator-sublead {
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--alligator-blue-text, #35606A);
}

/* The page title in the same blue as the card titles, so the eye reads the
   whole of /notes/ as one place. 10.8 on the page base. */
.alligator-notes-head h1 {
	color: var(--alligator-blue-ink, #1B3A5C);
}

/* ============================================================
   A single note takes the blue of the section it belongs to: the
   category label above the title, the title itself, and the practical
   card at the end of the piece. Scoped to .single-post so the offer
   cards on the home page keep the colours of the home page — the same
   class, two places, two meanings.
   ============================================================ */
.single-post .alligator-label,
.single-post .alligator-label a {
	color: var(--alligator-blue-text, #35606A);
}
.single-post .wp-block-post-title,
.single-post main > .wp-block-group h1 {
	color: var(--alligator-blue-ink, #17414C);
}
/* The section headings inside a note too. theme.json gives h1 and h2 the
   alligator green of the rest of the site; inside a note they take the colour
   of the notes section instead, so a piece does not change identity halfway
   down. Set on .single-post, which beats theme.json's :root :where(h2).
   Contrast on the page base: 10.28. */
.single-post main h2,
.single-post main h3 {
	color: var(--alligator-blue-ink, #17414C);
}
.single-post .alligator-card {
	background: var(--alligator-blue-card, #DAE8E9);
	border: 1px solid var(--alligator-blue-line, #ABCBCF);
	border-radius: 10px;
	padding: 1.5rem 1.6rem 1.3rem;
}
.single-post .alligator-card > h3 {
	color: var(--alligator-blue-ink, #17414C);
}

/* The top line of a note: the category on the left, the way back to the index
   on the right. One line, and on a narrow screen it wraps instead of shrinking
   — a chip that has to shorten its own label is worse than a chip on its own
   row. The baseline alignment is deliberate: the label is uppercase and small,
   the chip has a border, and centring them on the line makes the border look
   low. */
.alligator-note-top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
}
.alligator-note-top .alligator-label {
	margin: 0;
}
.alligator-backlink {
	display: inline-block;
	flex: none;
	padding: 0.3rem 0.85rem;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 2rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	text-decoration: none;
	color: var(--alligator-blue-text, #35606A);
	white-space: nowrap;
}
.alligator-backlink:hover,
.alligator-backlink:focus-visible {
	color: var(--alligator-blue-ink, #17414C);
	border-color: currentColor;
}

/* ============================================================
   A single note: the piece on the left, a navigation column on the
   right. Wide, like the index and the category pages, so the whole
   notes section starts at the same left edge.

   62% of 1152 is about 715px, which at this body size is roughly
   seventy-five characters a line — the top of the comfortable range.
   Wider would have been easy and would have read worse.

   The sidebar holds its place for about a screen and then scrolls away
   with the page. Below the WordPress column breakpoint the two stack
   and the sidebar lands under the piece, which is where it belongs
   when it is no longer beside it.
   ============================================================ */
.alligator-note-aside {
	font-size: var(--wp--preset--font-size--small);
}
@media (min-width: 782px) {
	.alligator-note-layout {
		gap: var(--wp--preset--spacing--60);
	}
	/* The sidebar holds its place for about one screen of scrolling and then
	   lets go. Sticky positioning runs for as long as the sidebar's
	   CONTAINING BLOCK is in view, so the length of the run is how much
	   taller that block is than the sidebar itself: align-self keeps the
	   column from being stretched to the height of the article, and the
	   spacer below adds the travel. One value — change --alligator-aside-run
	   to make it hold longer or let go sooner.

	   The spacer is an ::after and not padding, and that distinction is the
	   whole rule. A sticky child is bounded by its containing block's
	   CONTENT box; padding sits outside it. With padding-bottom the nav was
	   the column's only child, so the content box was exactly as tall as the
	   nav, the run was zero pixels, and the sidebar scrolled away as if the
	   sticky had never been declared. An empty ::after is content, so it
	   makes the content box taller and the run real. Same measurement, same
	   column height, working behaviour.

	   Why not stick the whole way: it is useful while you are deciding
	   whether to read, and two thousand words later it is a box in the corner
	   of your eye with nothing left to say. */
	.alligator-note-aside {
		--alligator-aside-run: 50vh;
		align-self: start;

		/* Where the sidebar begins, measured down from the header's
		   underside. Sticky has no "hold where you are" — it holds at
		   whatever `top` says — so for the sidebar to stay put from the
		   first pixel of scroll, `top` has to equal the distance it
		   already sits at. That distance is the main padding above the
		   title, the block gap either side of it, and one line of title.

		   Built out of the theme's own presets rather than the measured
		   number, so it cannot drift: the title size is a fluid clamp that
		   only reaches its maximum at 1152px, so any constant would be
		   right at one window width and wrong at every other. The two
		   literals are the heading line-height (1.15) and the block gap;
		   change the h1 preset and this follows on its own.

		   A title that wraps to two lines starts one line lower, so the
		   sidebar settles over that one line and then holds. That is the
		   safe direction: anchoring on the taller case would push the
		   sidebar *down* from its own start and open a gap. */
		--alligator-aside-start: calc(
			var(--wp--preset--spacing--60)
			+ (1.2rem * 2)
			+ (1.15 * var(--wp--preset--font-size--xx-large))
		);
	}
	.alligator-note-aside::after {
		content: "";
		display: block;
		height: var(--alligator-aside-run);
	}
	/* 6rem is the height of the sticky header; the start offset above puts
	   the sidebar level with the first paragraph, which is also where it
	   already is — so it holds still instead of first sliding up to the
	   header. It never reaches the header, so it cannot collide with it.
	   Logged in, the admin bar pushes the header down 32px and the sidebar
	   has to follow; the public never sees that offset. */
	.alligator-note-aside .alligator-note-nav {
		position: sticky;
		top: calc(6rem + var(--alligator-aside-start));
	}
	body.admin-bar .alligator-note-aside .alligator-note-nav {
		top: calc(6rem + var(--alligator-aside-start) + 32px);
	}
}
/* On a short screen a sidebar taller than the window cannot stick without
   hiding its own bottom, so it does not try. */
@media (max-height: 640px) {
	.alligator-note-aside .alligator-note-nav {
		position: static;
	}
}

/* The title sits above both columns, not inside the text column, so that the
   sidebar starts level with the first paragraph instead of level with the
   title. The group stays alignwide — that is what puts its left edge on the
   same line as the columns below it — and the cap goes on the title inside,
   not on the group: .alignwide carries margin:auto !important, so a narrower
   group would simply be centred over the page instead of sitting above the
   text column. */
.alligator-note-head .wp-block-post-title {
	max-width: 63%;
}

/* The body of a note is wrapped in a constrained group, left over from when
   notes were pages running the full width. Inside a 714px column that group
   centres its children: 672px of text with 21px of air on either side, so
   every paragraph and heading sat 21px to the right of the title and of the
   sidebar.

   The fix is on the group, not on its children. Capping the group at the
   content size and letting the children fill it keeps the 672px measure —
   roughly seventy-five characters, the number that was chosen — and leaves
   one single left and right edge for everything inside, text and floats
   alike. Pushing each child left instead (the first attempt) left 42px of
   unused column to the right of the text, and a right-floated pull quote
   went and stood in it, sticking out past every paragraph and heading.

   !important is not decoration here: WordPress emits a per-container rule of
   its own (.wp-container-core-group-is-layout-<hash>) that sets those auto
   margins with !important, and nothing short of !important reaches past it
   however specific the selector. */
.alligator-note-main .wp-block-group.is-layout-constrained {
	max-width: var(--wp--style--global--content-size);
}
.alligator-note-main .wp-block-group.is-layout-constrained
	> :not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
}
/* A pull quote hangs up to 13rem out of the text column on a wide screen.
   That margin was measured against a page with nothing to its right; here it
   would land in the gutter before the sidebar. Inside a note the quote floats
   but stays inside the text column, so its right edge is the same edge as
   every paragraph and every heading. Elsewhere on the site the hang stays:
   those pages have an outer margin to hang in.

   Narrower than the site-wide float, too. The rule behind the widths is that
   whatever the quote takes, at least 24rem of text must remain beside it —
   about eleven words a line. Without the hang the quote takes that width out
   of the 42rem column rather than out of the margin, so 24rem of text leaves
   it roughly 16rem. */
.alligator-note-main .wp-block-pullquote.alignright,
.alligator-note-main .alligator-pull.alignright {
	margin-right: 0;
}
.alligator-note-main .wp-block-pullquote.alignleft,
.alligator-note-main .alligator-pull.alignleft {
	margin-left: 0;
}
@media (min-width: 66rem) {
	.alligator-note-main .wp-block-pullquote.alignright,
	.alligator-note-main .wp-block-pullquote.alignleft,
	.alligator-note-main .alligator-pull.alignright,
	.alligator-note-main .alligator-pull.alignleft {
		width: min(16rem, 38%);
	}
}
/* The bar at the foot of a note. It replaces a closing paragraph that
   offered a website review on all seventeen notes; see patterns/note-next.php
   for why that went. Sits at the end of the text column rather than across
   both, so its edges are the edges of the prose above it.

   The next note is a block link with the label above the title: the title is
   the thing being chosen, so it gets the size, and the whole block is the
   target rather than a few underlined words. */
.alligator-note-next {
	margin-block-start: var(--wp--preset--spacing--70);
	padding: 1.25rem 1.4rem;
	/* The border carries the bar, not the fill. Measured against the page:
	   the card tint is 1.17:1 and the pale card line 1.60:1 — both well under
	   the 3:1 that WCAG 1.4.11 asks of a boundary that means something, and
	   in practice both nearly invisible under a long piece of text. This is
	   the same mistake as the sand-coloured card at 1.01:1. Petrol at 1px is
	   6.43:1 against the page, so the bar reads as a bar, while the soft fill
	   keeps it in the same family as the cards on the index. */
	border: 1px solid var(--alligator-blue-text, #35606A);
	border-radius: 10px;
	background: var(--alligator-blue-card, #DAE8E9);
}
.alligator-note-next-main {
	display: block;
	text-decoration: none;
}
.alligator-note-next-label {
	display: block;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--alligator-blue-text, #35606A);
}
.alligator-note-next-title {
	display: block;
	margin-block-start: 0.3rem;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--alligator-blue-ink, #17414C);
}
/* Underline on hover and on keyboard focus only: the whole block is already
   obviously a link, and a permanent underline on a 1.35rem line in a tinted
   box reads as a heading that has been struck through. Same exception the
   note lists use. */
.alligator-note-next-main:hover .alligator-note-next-title,
.alligator-note-next-main:focus-visible .alligator-note-next-title {
	text-decoration: underline;
}
.alligator-note-next-side {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-block: 1rem 0;
	padding-block-start: 0.9rem;
	border-block-start: 1px solid var(--alligator-blue-line, #ABCBCF);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--small);
}
.alligator-note-next-side a {
	color: var(--alligator-blue-text, #35606A);
	text-decoration: none;
}
.alligator-note-next-side a:hover,
.alligator-note-next-side a:focus-visible {
	text-decoration: underline;
}

/* Two small lines at the head of the sidebar: the standing line of the
   section, and the word Category above the category name. They share one
   declaration rather than two copies of the same values, so "the same type
   and colour" holds by construction and cannot drift apart later. Petrol
   text on the page base measures 6,43:1. */
.alligator-note-nav-sublead,
.alligator-note-nav-catlabel {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	color: var(--alligator-blue-text, #35606A);
}
/* The standing line is quieter than the category below it: the category says
   which subject you are in, which is the more useful fact once you are
   reading. This line is for somebody who arrived from outside and does not
   yet know what collection this is. */
.alligator-note-nav-sublead {
	/* No bottom margin: the column's gap already provides it. Together they
	   gave 46px under this rule against 14px above it. */
	margin: 0;
	padding-block-end: var(--alligator-nav-gap);
	border-block-end: 1px solid var(--alligator-blue-line, #ABCBCF);
}
/* Close under its own name, so the two read as one unit and not as two
   separate lines. */
.alligator-note-nav-catlabel {
	margin: 0 0 0.15rem;
}

/* The category at the head of the sidebar, above the first rule: it names
   where you are, so it is set like a title rather than like a label. It used
   to sit above the note's own title; there it competed with it. */
.alligator-note-nav-cat {
	margin: 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.alligator-note-nav-cat a {
	text-decoration: none;
	color: var(--alligator-blue-ink, #17414C);
}
.alligator-note-nav-cat a:hover,
.alligator-note-nav-cat a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
/* One value for the whole sidebar: the distance between a line of text and
   the rule under or over it. It is the measure Geert picked — the gap between
   the standing line and its separator — and everything else now matches it,
   so each rule has the same air above and below and the column reads as one
   rhythm instead of four.

   It replaces gap: spacing--40, which was 30px. That was the real fault: a
   flex gap ADDS to the margins of its items, so under the first rule there
   was 16px of margin plus 30px of gap — 46px against 14px above it. Spacing
   in a flex column belongs in the gap or in the items, never in both. */
.alligator-note-nav {
	--alligator-nav-gap: 0.9rem;
	display: flex;
	flex-direction: column;
	gap: var(--alligator-nav-gap);
}
.alligator-note-nav-block {
	padding-top: var(--alligator-nav-gap);
	border-top: 2px solid var(--alligator-blue-line, #ABCBCF);
}
.alligator-note-nav-title {
	margin: 0 0 0.6rem;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--alligator-blue-text, #35606A);
}
.alligator-note-nav-link {
	display: block;
	margin-bottom: 0.55rem;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	color: var(--alligator-blue-ink, #17414C);
}
/* Same principle as the gap above: a margin that sits against a block
   boundary adds to the gap instead of replacing it. The last link in a block
   gave 24px where every other rule had 14px. */
.alligator-note-nav-link:last-child {
	margin-bottom: 0;
}
.alligator-note-nav-link:hover,
.alligator-note-nav-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
/* "Earlier" and "Later" above the title they belong to: the direction is
   the label, the title is the link text — so the link still says where it
   goes when it is read out of context. */
.alligator-note-nav-dir {
	display: block;
	font-family: var(--wp--preset--font-family--atkinson);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--alligator-blue-text, #35606A);
}
/* The margin is there to lift "All 8 in this subject" off the links above it.
   In the last block it is the only child, so there is nothing to lift it off
   and the margin only widens the gap. */
.alligator-note-nav-block > .alligator-note-nav-all:first-child {
	margin-top: 0;
}
.alligator-note-nav-all {
	display: inline-block;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	color: var(--alligator-blue-text, #35606A);
	text-underline-offset: 0.2em;
}

/* ============================================================
   Tags — the cross-cutting subjects. PARKED, 5 Oct 2026: the styling
   stays, the block is out of single.html until Geert decides where on
   the page the tags belong. The tags themselves exist and the archives
   work (/tag/wordpress/), so nothing is lost by waiting.

   To put them back, drop this into single.html after wp:post-content:

       <!-- wp:group {"className":"alligator-tags","layout":{"type":"constrained"}} -->
       <div class="wp-block-group alligator-tags">
           <!-- wp:post-terms {"term":"post_tag","prefix":"Also about: ","separator":"  "} /-->
       </div>
       <!-- /wp:group -->
   ============================================================ */

/* ============================================================
   Tags — the cross-cutting subjects, at the foot of a note.

   Categories are the spine: one per note, the answer to "where does
   this belong". Tags are the crossings: as many as apply, the answer
   to "what else does this touch". Keeping them apart is what stops a
   tool like WordPress from having to compete with a subject like
   writing for a place in the same list — and it is why the filter row
   at the top shows categories only. Five chips can be read; twenty-five
   cannot.
   ============================================================ */
.alligator-tags {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4, inherit);
}
.alligator-tags .wp-block-post-terms__prefix {
	letter-spacing: 0.02em;
}
.alligator-tags a {
	display: inline-block;
	margin-inline-end: 0.35rem;
	padding: 0.2rem 0.7rem;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 2rem;
	text-decoration: none;
	color: var(--alligator-blue-text, #35606A);
}
.alligator-tags a:hover,
.alligator-tags a:focus-visible {
	color: var(--alligator-blue-ink, #17414C);
	border-color: currentColor;
}
/* A group with no tags in it still draws its rule, so hide an empty one. */
.alligator-tags:not(:has(a)) {
	display: none;
}

/* ============================================================
   Notes filter — the row of subjects above the list. Links to the
   category archives, so each filtered view has its own address.
   The current one is filled rather than outlined; aria-current says
   the same thing to a screen reader, so the colour is never the only
   signal. It wraps onto a second line rather than scrolling: five
   subjects fit, and a hidden sixth is a subject nobody clicks.
   ============================================================ */
.alligator-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.alligator-filter a {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 2rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	text-decoration: none;
	color: var(--alligator-blue-text, #3E5E75);
}
.alligator-filter a:hover,
.alligator-filter a:focus-visible {
	color: var(--alligator-blue-ink, #1B3A5C);
	border-color: currentColor;
}
/* The count is information, not a label: lighter and a size down, so the
   subject stays the thing you read and the number is the thing you glance at. */
.alligator-filter-count {
	opacity: 0.6;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
}
.alligator-filter a[aria-current="page"] {
	background: var(--alligator-blue-ink, #1B3A5C);
	border-color: var(--alligator-blue-ink, #1B3A5C);
	color: var(--wp--preset--color--base);
}

/* ============================================================
   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
 *
 * 28 sep 2026: alleen nog op koppen en korte tekstsoorten. Op lopende
 * tekst is `text-wrap: pretty` in Safari géén louter afbreek-hint: die
 * browser mag ook de woordspatiëring bijstellen om het rag te redden,
 * en dan staat er een zichtbaar gat middenin een regel. De winst
 * (geen eenzaam woord onderaan) is onzichtbaar, de prijs niet.
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption {
	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 Carousel — scroll-snap, no JavaScript, no plugin.
   Usage: add the class "alligator-carousel" to a Group block
   that contains a Gallery block (or insert the ready-made
   pattern: Alligator → Carousel).
   ============================================================ */
.alligator-carousel .wp-block-gallery.has-nested-images {
	display: flex;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	padding-block-end: 0.75rem; /* room for the scrollbar */
}
.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex: 0 0 85% !important;
	width: 85% !important;
	scroll-snap-align: center;
	margin: 0;
}
.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 782px) {
	.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image {
		flex-basis: 45% !important;
		width: 45% !important;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.alligator-carousel .wp-block-gallery.has-nested-images {
		scroll-behavior: smooth;
	}
}
/* ============================================================
   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-languages { font-size: 0.85em; letter-spacing: 0.05em; }
.alligator-languages strong { opacity: 0.5; }

/* ============================================================
   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;
}

/* ============================================================
   Alligator taalswitch.
   ============================================================ */
.alligator-languages { font-size: 0.85em; letter-spacing: 0.05em; }
.alligator-languages--dropdown { position: relative; }
.alligator-languages--dropdown summary {
	cursor: pointer;
	list-style: none; /* geen driehoekje */
}
.alligator-languages--dropdown summary::after { content: " ▾"; font-size: 0.8em; }
.alligator-languages--dropdown nav {
	position: absolute;
	right: 0;
	background: var(--wp--preset--color--base);
	box-shadow: 0 8px var(--alligator-edge-shadow);
	padding: 0.5rem 0.9rem;
	display: grid;
	gap: 0.4rem;
	z-index: 101; /* boven de sticky header-inhoud */
}

/* ============================================================
   Alligator image protection — opt-in via class, geen echte
   beveiliging, enkel een drempel tegen de occasionele rechtsklik.
   ============================================================ */
.alligator-protect-image,
.alligator-protect-image img {
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

/* ============================================================
   Alligator Previous/Next nav bar — see alligator_render_prevnext_nav()
   in functions.php. Not wired to any template by default; opt in per
   project. Uses theme preset colors, so it follows the active style
   variation automatically.
   ============================================================ */
.alligator-prevnext {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
}
.alligator-prevnext__link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-decoration: none;
	color: inherit;
	max-width: 45%;
}
.alligator-prevnext__link--next {
	text-align: right;
	margin-left: auto;
}
.alligator-prevnext__label {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}
.alligator-prevnext__title {
	font-size: 1.05rem;
}
a.alligator-prevnext__link:hover .alligator-prevnext__title {
	color: var(--wp--preset--color--accent-1, currentColor);
}
.alligator-prevnext__link--disabled {
	opacity: 0.35;
	cursor: default;
}

/* ============================================================
   Alligator signup form — see [alligator_signup_form] shortcode and
   the honeypot/overlay-feedback pattern in functions.php. Not enqueued
   or shown anywhere until a project actually places the shortcode.
   ============================================================ */
.alligator-signup-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}
.alligator-signup-form input[type="email"] {
	flex: 1 1 16rem;
	padding: 0.6rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	border-radius: 0.5rem;
}
.alligator-signup-form button {
	padding: 0.6rem 1.4rem;
	border-radius: 0.5rem;
	border: none;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.alligator-signup-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	opacity: 0;
	transition: opacity 0.35s ease;
}
.alligator-signup-overlay.is-open {
	opacity: 1;
}
.alligator-signup-card {
	position: relative;
	max-width: 28rem;
	padding: 2rem 2.25rem;
	background: var(--wp--preset--color--base);
	border-radius: 0.75rem;
	box-shadow: 0 16px 48px rgb(0 0 0 / 0.25);
	transform: translateY(8px);
	transition: transform 0.35s ease;
}
.alligator-signup-overlay.is-open .alligator-signup-card {
	transform: translateY(0);
}
.alligator-signup-card--error {
	border-top: 3px solid #b32d2e;
}
.alligator-signup-card--success {
	border-top: 3px solid var(--wp--preset--color--accent-1, #2d7a3e);
}
.alligator-signup-overlay__close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: 0.6;
}
.alligator-signup-overlay__close:hover {
	opacity: 1;
}


/* ============================================================
   Alligator one-pager — section backgrounds + reveal-on-scroll.
   Origin: the look & feel of the Carrd version of alligatordesign
   (subtle wave/plus textures, content sliding in from the right).
   Usage: give a full-width Group block one of the background classes
   and, optionally, "alligator-reveal" (the whole group slides in) or
   "alligator-reveal-children" (its direct children slide in one after
   another). Script: assets/js/reveal.js — content is always visible
   without JavaScript, and never moves for prefers-reduced-motion.
   ============================================================ */

/* Two textures, straight from the Carrd site: a sparse "plus" pattern on
   a warm base, and soft waves on white. Both are inline SVG (one request
   less) and light: green pluses at 16%, clay waves at 14% opacity. */
.alligator-bg-plus {
	background-color: var(--wp--preset--color--base, #FFFBF7);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1024 1024%22 width=%221024%22 height=%221024%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bstroke-linecap:square%3Bstroke-width:7px%3Bstroke:rgba(58,122,14,0.16)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M 256 192 L 256 320 M 192 256 L 320 256%22/%3E%3Cpath d=%22M 768 704 L 768 832 M 704 768 L 832 768%22/%3E%3C/svg%3E");
	background-size: 221px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
}
.alligator-bg-waves {
	background-color: var(--wp--preset--color--accent-5, #FFFFFF);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22 width=%22512%22 height=%22512%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bfill:none%3Bstroke-width:6px%3Bstroke:rgba(181,86,31,0.14)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M0,448c128,0,128-128,256-128s128,128,256,128%22/%3E%3Cpath d=%22M0,192c128,0,128-128,256-128s128,128,256,128%22/%3E%3C/svg%3E");
	background-size: 282px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
}

/* Deep section: dark green with light text and faint white waves —
   the contrast beat between the light sections. */
.alligator-bg-deep {
	background-color: var(--wp--preset--color--accent-3, #234A11);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22 width=%22512%22 height=%22512%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bfill:none%3Bstroke-width:6px%3Bstroke:rgba(255,255,255,0.10)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M0,448c128,0,128-128,256-128s128,128,256,128%22/%3E%3Cpath d=%22M0,192c128,0,128-128,256-128s128,128,256,128%22/%3E%3C/svg%3E");
	background-size: 282px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
	color: var(--wp--preset--color--base, #F4F8EE);
}
.alligator-bg-deep h1,
.alligator-bg-deep h2,
.alligator-bg-deep h3,
.alligator-bg-deep .alligator-label,
.alligator-bg-deep .alligator-muted,
.alligator-bg-deep .alligator-top a {
	color: inherit;
}
.alligator-bg-deep .alligator-label,
.alligator-bg-deep .alligator-muted {
	opacity: 0.75;
}
.alligator-bg-deep a {
	color: inherit;
}

/* Reveal: hidden state is only applied once the script has confirmed it
   runs (html.alligator-js) — so without JS nothing is ever invisible. */
.alligator-js .alligator-reveal,
.alligator-js .alligator-reveal-children > * {
	opacity: 0;
	transform: translateX(3rem);
	transition: opacity 0.75s ease 0.125s, transform 0.75s ease 0.125s;
	will-change: opacity, transform;
}
.alligator-js .alligator-reveal.is-visible,
.alligator-js .alligator-reveal-children.is-visible > * {
	opacity: 1;
	transform: none;
	will-change: auto;
}
/* Children arrive one after another (Carrd's "stagger: 125"). */
.alligator-js .alligator-reveal-children.is-visible > :nth-child(2) { transition-delay: 0.25s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(3) { transition-delay: 0.375s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(4) { transition-delay: 0.5s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(5) { transition-delay: 0.625s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(n+6) { transition-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
	.alligator-js .alligator-reveal,
	.alligator-js .alligator-reveal-children > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Small typographic helpers used by the one-pager pattern. */
.alligator-label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4, #807D7A);
}
.alligator-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}
.alligator-muted {
	color: var(--wp--preset--color--accent-4, #807D7A);
}
/* ============================================================
   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
 *
 * 28 sep 2026: alleen nog op koppen en korte tekstsoorten. Op lopende
 * tekst is `text-wrap: pretty` in Safari géén louter afbreek-hint: die
 * browser mag ook de woordspatiëring bijstellen om het rag te redden,
 * en dan staat er een zichtbaar gat middenin een regel. De winst
 * (geen eenzaam woord onderaan) is onzichtbaar, de prijs niet.
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption {
	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 Carousel — scroll-snap, no JavaScript, no plugin.
   Usage: add the class "alligator-carousel" to a Group block
   that contains a Gallery block (or insert the ready-made
   pattern: Alligator → Carousel).
   ============================================================ */
.alligator-carousel .wp-block-gallery.has-nested-images {
	display: flex;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	padding-block-end: 0.75rem; /* room for the scrollbar */
}
.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex: 0 0 85% !important;
	width: 85% !important;
	scroll-snap-align: center;
	margin: 0;
}
.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 782px) {
	.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image {
		flex-basis: 45% !important;
		width: 45% !important;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.alligator-carousel .wp-block-gallery.has-nested-images {
		scroll-behavior: smooth;
	}
}
/* ============================================================
   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-languages { font-size: 0.85em; letter-spacing: 0.05em; }
.alligator-languages strong { opacity: 0.5; }

/* ============================================================
   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;
}

/* ============================================================
   Alligator taalswitch.
   ============================================================ */
.alligator-languages { font-size: 0.85em; letter-spacing: 0.05em; }
.alligator-languages--dropdown { position: relative; }
.alligator-languages--dropdown summary {
	cursor: pointer;
	list-style: none; /* geen driehoekje */
}
.alligator-languages--dropdown summary::after { content: " ▾"; font-size: 0.8em; }
.alligator-languages--dropdown nav {
	position: absolute;
	right: 0;
	background: var(--wp--preset--color--base);
	box-shadow: 0 8px var(--alligator-edge-shadow);
	padding: 0.5rem 0.9rem;
	display: grid;
	gap: 0.4rem;
	z-index: 101; /* boven de sticky header-inhoud */
}

/* ============================================================
   Alligator image protection — opt-in via class, geen echte
   beveiliging, enkel een drempel tegen de occasionele rechtsklik.
   ============================================================ */
.alligator-protect-image,
.alligator-protect-image img {
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

/* ============================================================
   Alligator Previous/Next nav bar — see alligator_render_prevnext_nav()
   in functions.php. Not wired to any template by default; opt in per
   project. Uses theme preset colors, so it follows the active style
   variation automatically.
   ============================================================ */
.alligator-prevnext {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
}
.alligator-prevnext__link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-decoration: none;
	color: inherit;
	max-width: 45%;
}
.alligator-prevnext__link--next {
	text-align: right;
	margin-left: auto;
}
.alligator-prevnext__label {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}
.alligator-prevnext__title {
	font-size: 1.05rem;
}
a.alligator-prevnext__link:hover .alligator-prevnext__title {
	color: var(--wp--preset--color--accent-1, currentColor);
}
.alligator-prevnext__link--disabled {
	opacity: 0.35;
	cursor: default;
}

/* ============================================================
   Alligator signup form — see [alligator_signup_form] shortcode and
   the honeypot/overlay-feedback pattern in functions.php. Not enqueued
   or shown anywhere until a project actually places the shortcode.
   ============================================================ */
.alligator-signup-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}
.alligator-signup-form input[type="email"] {
	flex: 1 1 16rem;
	padding: 0.6rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	border-radius: 0.5rem;
}
.alligator-signup-form button {
	padding: 0.6rem 1.4rem;
	border-radius: 0.5rem;
	border: none;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.alligator-signup-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	opacity: 0;
	transition: opacity 0.35s ease;
}
.alligator-signup-overlay.is-open {
	opacity: 1;
}
.alligator-signup-card {
	position: relative;
	max-width: 28rem;
	padding: 2rem 2.25rem;
	background: var(--wp--preset--color--base);
	border-radius: 0.75rem;
	box-shadow: 0 16px 48px rgb(0 0 0 / 0.25);
	transform: translateY(8px);
	transition: transform 0.35s ease;
}
.alligator-signup-overlay.is-open .alligator-signup-card {
	transform: translateY(0);
}
.alligator-signup-card--error {
	border-top: 3px solid #b32d2e;
}
.alligator-signup-card--success {
	border-top: 3px solid var(--wp--preset--color--accent-1, #2d7a3e);
}
.alligator-signup-overlay__close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: 0.6;
}
.alligator-signup-overlay__close:hover {
	opacity: 1;
}


/* ============================================================
   Alligator one-pager — section backgrounds + reveal-on-scroll.
   Origin: the look & feel of the Carrd version of alligatordesign
   (subtle wave/plus textures, content sliding in from the right).
   Usage: give a full-width Group block one of the background classes
   and, optionally, "alligator-reveal" (the whole group slides in) or
   "alligator-reveal-children" (its direct children slide in one after
   another). Script: assets/js/reveal.js — content is always visible
   without JavaScript, and never moves for prefers-reduced-motion.
   ============================================================ */

/* Two textures, straight from the Carrd site: a sparse "plus" pattern on
   a warm base, and soft waves on white. Both are inline SVG (one request
   less) and light: green pluses at 16%, clay waves at 14% opacity. */
.alligator-bg-plus {
	background-color: var(--wp--preset--color--base, #FFFBF7);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1024 1024%22 width=%221024%22 height=%221024%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bstroke-linecap:square%3Bstroke-width:7px%3Bstroke:rgba(58,122,14,0.16)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M 256 192 L 256 320 M 192 256 L 320 256%22/%3E%3Cpath d=%22M 768 704 L 768 832 M 704 768 L 832 768%22/%3E%3C/svg%3E");
	background-size: 221px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
}
.alligator-bg-waves {
	background-color: var(--wp--preset--color--accent-5, #FFFFFF);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22 width=%22512%22 height=%22512%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bfill:none%3Bstroke-width:6px%3Bstroke:rgba(181,86,31,0.14)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M0,448c128,0,128-128,256-128s128,128,256,128%22/%3E%3Cpath d=%22M0,192c128,0,128-128,256-128s128,128,256,128%22/%3E%3C/svg%3E");
	background-size: 282px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
}

/* Deep section: dark green with light text and faint white waves —
   the contrast beat between the light sections. */
.alligator-bg-deep {
	background-color: var(--wp--preset--color--accent-3, #234A11);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22 width=%22512%22 height=%22512%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bfill:none%3Bstroke-width:6px%3Bstroke:rgba(255,255,255,0.10)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M0,448c128,0,128-128,256-128s128,128,256,128%22/%3E%3Cpath d=%22M0,192c128,0,128-128,256-128s128,128,256,128%22/%3E%3C/svg%3E");
	background-size: 282px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
	color: var(--wp--preset--color--base, #F4F8EE);
}
.alligator-bg-deep h1,
.alligator-bg-deep h2,
.alligator-bg-deep h3,
.alligator-bg-deep .alligator-label,
.alligator-bg-deep .alligator-muted,
.alligator-bg-deep .alligator-top a {
	color: inherit;
}
.alligator-bg-deep .alligator-label,
.alligator-bg-deep .alligator-muted {
	opacity: 0.75;
}
.alligator-bg-deep a {
	color: inherit;
}

/* Reveal: hidden state is only applied once the script has confirmed it
   runs (html.alligator-js) — so without JS nothing is ever invisible. */
.alligator-js .alligator-reveal,
.alligator-js .alligator-reveal-children > * {
	opacity: 0;
	transform: translateX(3rem);
	transition: opacity 0.75s ease 0.125s, transform 0.75s ease 0.125s;
	will-change: opacity, transform;
}
.alligator-js .alligator-reveal.is-visible,
.alligator-js .alligator-reveal-children.is-visible > * {
	opacity: 1;
	transform: none;
	will-change: auto;
}
/* Children arrive one after another (Carrd's "stagger: 125"). */
.alligator-js .alligator-reveal-children.is-visible > :nth-child(2) { transition-delay: 0.25s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(3) { transition-delay: 0.375s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(4) { transition-delay: 0.5s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(5) { transition-delay: 0.625s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(n+6) { transition-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
	.alligator-js .alligator-reveal,
	.alligator-js .alligator-reveal-children > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Small typographic helpers used by the one-pager pattern. */
.alligator-label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4, #807D7A);
}
.alligator-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}
.alligator-muted {
	color: var(--wp--preset--color--accent-4, #807D7A);
}
/* ============================================================
   Tables. The theme had none, because nothing used one until an
   essay needed a lookup table. Kept plain: no zebra stripes, no
   vertical rules — a horizontal hairline per row is enough to
   follow a line across, and anything more competes with the text.
   The figure scrolls sideways below the breakpoint rather than
   forcing the page to, so the rest of the article stays put.
   ============================================================ */
.wp-block-table {
	margin-block: var(--wp--preset--spacing--40);
	overflow-x: auto;
}
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-table th,
.wp-block-table td {
	text-align: left;
	vertical-align: top;
	padding: 0.5rem 1rem 0.5rem 0;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}
.wp-block-table th {
	font-weight: 600;
	letter-spacing: 0.02em;
}
.wp-block-table tr:last-child td {
	border-bottom: 0;
}
/* A table of codes: the first column is a machine value, so it is set in the
   mono face and does not wrap. */
.alligator-codes td:first-child,
.alligator-codes th:first-child {
	font-family: var(--wp--preset--font-family--fira-code);
	white-space: nowrap;
}
.alligator-card .wp-block-table {
	margin-block-end: 0;
}

/* ============================================================
   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.
   ============================================================ */
/* Italics need a little air. Atkinson's italic is narrower than its roman
   and slants the letters into each other, so a run of italic text at body
   size reads tighter and darker than the sentence around it. A hair of
   tracking gives it back the roman's rhythm. Not applied inside a pull
   quote, which is set in italic throughout and tunes its own spacing. */
em,
i,
cite,
dfn {
	letter-spacing: 0.015em;
}
.wp-block-pullquote em,
.wp-block-pullquote i,
.alligator-pull em,
.alligator-pull i {
	letter-spacing: inherit;
}

.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;
	/* Measured, not guessed: body text on these pages is 24px, and this used
	   to end at 1.85rem — 29.6px, a quarter larger than the prose. That was
	   sized for a quote hanging in the outer margin at 24rem wide. Inside a
	   note the quote no longer hangs, so it is 16rem, and 29.6px there left
	   three or four words a line and read as a headline.

	   At 1.25rem it ends at 20px, which is deliberately SMALLER than the
	   24px prose: the element has changed from a pull quote that is louder
	   than the text into a margin note that is quieter than it, and narrow
	   marginalia are set down, not up. Italic at weight 300 in a tinted box
	   is what marks it now, not size. If it should be louder than the prose
	   again, the way to do that without the hang is to let it run the full
	   text column instead of floating. */
	font-size: clamp(1.0625rem, 0.95rem + 0.38vw, 1.25rem);
	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 {
	/* One value, so all four sides are equal by construction. It was already
	   equal at 30px — what reads as more room underneath is the cite line
	   with its own margin above it, and what reads as more room on the right
	   is text-wrap: balance leaving the last line short. Neither is padding.
	   Smaller now because the box itself is: 16rem instead of 24rem. */
	padding: 1.25rem;
	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;
	}
	/* A float is lifted to the bottom edge of the paragraph it follows, while
	   the next paragraph starts one block gap lower — so by default the box
	   hangs a little above the text beside it. This class pushes it down by
	   exactly that gap, so the top of the frame lines up with the top of the
	   paragraph it sits next to. */
	.wp-block-pullquote.alligator-pull-top,
	.alligator-pull.alligator-pull-top {
		margin-top: var(--wp--preset--spacing--40);
	}
}

@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;
}
/* On the dark section the green would disappear — inherit instead. */
.alligator-bg-deep .wp-block-pullquote p,
.alligator-bg-deep .alligator-pull {
	color: inherit;
}
.alligator-bg-deep .wp-block-pullquote,
.alligator-bg-deep .alligator-pull {
	border-color: color-mix(in srgb, currentColor 30%, transparent);
	background: color-mix(in srgb, currentColor 8%, transparent);
}

/* ============================================================
   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);
}
/* An offer/work card: heading sits close to its text, cards far apart. */
.alligator-card > h3 {
	margin-block-end: 0.5rem;
}
.alligator-card > p:not(:last-child) {
	margin-block-end: 0.75rem;
}
.alligator-card p.alligator-muted {
	font-size: var(--wp--preset--font-size--small);
}
/* 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;
}
/* The mascot: never wider than its column, gently scaled. */
.alligator-mascot img {
	width: clamp(72px, 12vw, 120px);
	height: auto;
}

/* Kop naar beneden, bijvoorbeeld als de tekening naar de tekst eronder moet
   wijzen. Een halve draai en geen spiegeling: spiegelen keert de krul van de
   staart om, en dat valt op. */
.alligator-mascot--down img {
	transform: rotate(180deg);
}

/* ============================================================
   Alligator header nav — focus without the tall black bars.
   Mouse/touch focus shows nothing (that was the complaint: the
   browser's default outline drawn as vertical bars on inline links);
   keyboard focus (:focus-visible) shows a clear, rounded ring in the
   accent colour, so Tab-navigation always stays visible. WCAG 2.4.7.
   ============================================================ */
.alligator-hs-nav-desktop a:focus {
	outline: none;
	box-shadow: none;
}
.alligator-hs-nav-desktop a:focus-visible,
.alligator-hs-site-title:focus-visible,
.alligator-hs-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1, currentColor);
	outline-offset: 0.25em;
	border-radius: 0.25em;
}

/* ============================================================
   Alligator header (simple / one-pager) — layout of the flat HTML
   headers in patterns/header-simple.php and patterns/header-onepager.php.
   Lived in the Site Editor's "Extra CSS" (database) until 13 Sep 2026;
   now in the theme, so every clone and fresh install gets it.
   Position, glass and hide-on-scroll: see "Alligator sticky header".
   ============================================================ */
.alligator-site-header-simple {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem;
	min-height: 4.5rem;
	/* The header row is wider than the content, on purpose: half the gutter
	   the page itself uses. The content keeps its wide size (72rem) and the
	   header grows towards the edges, so the site name and the button sit
	   closer to the corners — where the eye looks for them.

	   The formula halves the gutter at EVERY width instead of at one. The
	   page's gutter is (100vw - 72rem) / 2; half of that is (100vw - 72rem) / 4,
	   which leaves the header 50vw + 36rem wide. min(100%, …) keeps it inside
	   the window on a narrow screen, where the padding below takes over.
	   Revert by putting back: max-width: var(--wp--style--global--wide-size, 72rem). */
	max-width: min(100%, calc(50vw + 36rem));
	margin-inline: auto;
	padding-block: 0.75rem;
	/* Half the standard gutter (spacing 50 = clamp(30px, 5vw, 50px)), on
	   request, 4 Oct 2026. The header is a single row of short labels, so it
	   does not need the breathing room a column of text does — and a narrower
	   gutter lets the site name sit closer to the corner, which is where the
	   eye looks for it. The content below keeps the full gutter. */
	padding-inline: clamp(15px, 2.5vw, 25px);
	font-size: var(--wp--preset--font-size--medium);
}
.alligator-hs-brand {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}
.alligator-hs-site-title {
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-decoration: none;
	color: var(--wp--preset--color--contrast, currentColor);
	white-space: nowrap;
}
.alligator-hs-site-title:hover {
	color: var(--wp--preset--color--accent-1, currentColor);
}
.alligator-hs-middle {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1.5rem;
	min-width: 0;
}
.alligator-hs-nav-desktop {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
}
.alligator-hs-nav-desktop a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast, inherit);
	padding-block: 0.25rem;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.01em;
}
/* Notes — the one header link that leaves the one-pager. Everything before
   it is an anchor to a section of the home page; this goes to the posts page.
   So it sits after a hairline rule, in the accent colour, slightly apart.
   The rule carries the grouping and the position carries the order, which
   means colour is never the only signal. It stays a link, not a second
   button: one call to action per header is the point of a call to action.
   Below the breakpoint the rule disappears, because the row wraps and a
   vertical line between two lines of links reads as a mistake. */
.alligator-hs-notes {
	text-decoration: none;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.01em;
	color: var(--alligator-blue-ink, #1B3A5C);
	padding-block: 0.25rem;
	padding-inline-start: 1.5rem;
	border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
.alligator-hs-notes:hover,
.alligator-hs-notes:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}
.alligator-hs-notes[aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 2px;
}
@media (max-width: 56rem) {
	.alligator-hs-notes {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
}

.alligator-hs-nav-desktop a:hover {
	color: var(--wp--preset--color--contrast, inherit);
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-color: var(--wp--preset--color--accent-1, currentColor);
}
.alligator-hs-cta {
	display: inline-block;
	padding: 0.55rem 1.3rem;
	border-radius: 2rem;
	/* Outlined, in the brand colour: the header stays two-tone (contrast +
	   accent-1); the filled clay button is reserved for the page itself. */
	border: 1.5px solid var(--wp--preset--color--accent-1, currentColor);
	background: transparent;
	color: var(--wp--preset--color--accent-1, currentColor);
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.alligator-hs-cta:hover {
	background: var(--wp--preset--color--accent-1, currentColor);
	color: var(--wp--preset--color--base, #fff);
}
/* The hamburger (wp:navigation, header-simple only) is a phone thing. */
.alligator-nav-simple-mobile {
	display: none;
}
@media (max-width: 781px) {
	/* header-simple: hide the inline nav, show the hamburger next to the logo. */
	.alligator-site-header-simple:not(.alligator-site-header-onepager) .alligator-hs-middle {
		display: none;
	}
	.alligator-site-header-simple:not(.alligator-site-header-onepager) .alligator-nav-simple-mobile {
		display: block;
	}
	/* header-onepager: no hamburger — the nav wraps onto a second row. */
	.alligator-site-header-onepager {
		grid-template-columns: 1fr auto;
		row-gap: 0.5rem;
	}
	.alligator-site-header-onepager .alligator-hs-middle {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}
	.alligator-site-header-onepager .alligator-hs-nav-desktop {
		font-size: var(--wp--preset--font-size--small);
		gap: 0.25rem 1rem;
	}
}

/* ============================================================
   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;
	}
}
/* Losse blokken tekst die iets groter en rustiger mogen staan dan de
   lopende tekst — bijvoorbeeld de afgesloten projecten onder "Earlier work".
   Zet de class op de Group (blok → Geavanceerd → Extra CSS-class), niet op
   elke alinea apart: dan blijft de opmaak uit de inhoud, en verandert ze mee
   als de typografie van de site ooit verandert. */
.alligator-note-large p {
	font-size: 1.35rem;
	line-height: 1.3;
}

@media (max-width: 47.99rem) {
	.alligator-note-large p {
		font-size: 1.15rem;
	}
}

/* Small "↑ Top" link at the end of a section. */
.alligator-top {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.alligator-top a {
	text-decoration: none;
	color: var(--wp--preset--color--accent-4, currentColor);
	padding: 0.5rem 0.9rem;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 2rem;
}
.alligator-top a:hover,
.alligator-top a:focus-visible {
	color: var(--wp--preset--color--contrast, currentColor);
	border-color: currentColor;
}

/* De vier aanbodkaarten staan in een auto-grid (minimumColumnWidth 20rem).
   Op een breed scherm levert dat 3 + 1 op, en die eenzame vierde kaart
   leest als een vergissing. Twee kolommen geeft 2 + 2: rustiger, en de
   kaarten worden breder in plaats van smaller. Onder 48rem blijft het
   één kolom, zoals het auto-grid het zelf ook zou doen. */
@media (min-width: 48rem) {
	.alligator-offers.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* Ruimer tussen de kolommen dan tussen de rijen: horizontaal moet
		   het oog zien dat het twee losse kaarten zijn, verticaal niet. */
		column-gap: clamp(2.5rem, 5vw, 5rem);
	}
}

/* Een gecentreerde terzijde die breder mag staan dan de leeskolom van
   42rem: één zin die over de volle breedte van de kaarten loopt, leest
   als een onderschrift bij het geheel in plaats van als een alinea die
   toevallig in het midden staat. Alleen op een breed scherm; daaronder
   volgt hij gewoon de kolom. */
@media (min-width: 48rem) {
	.alligator-note-wide {
		max-width: 56rem;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Portret, vierkant. De uitsnede zit in de CSS en niet in het bestand:
   zo kan er elke foto in zonder hem eerst bij te knippen, en blijft het
   origineel bruikbaar voor andere plekken. `object-fit: cover` snijdt bij
   in plaats van te vervormen. Rond geprobeerd op 28 sep en weer losgelaten
   — vierkant staat deze foto beter. */
.alligator-portrait img {
	width: clamp(7rem, 14vw, 10rem);
	aspect-ratio: 1;
	height: auto;
	object-fit: cover;
	/* Geen rand: alleen een zachte schaduw tilt het vlak van de achtergrond.
	   In de tint van de tekstkleur, niet in neutraal grijs, zodat hij op elke
	   sectiekleur klopt. */
	box-shadow: 0 4px 20px rgba(30, 42, 23, 0.09);
}

/* Lucht onder het portret, zodat de "↑ Top"-link niet tegen de foto
   aanplakt. Op de figuur en niet op de link: zo blijft de afstand kloppen
   waar het portret ook staat.
   Let op de dubbele class: WordPress zet zelf marges op
   `.wp-block-image.aligncenter`, en één class wint het daar niet van. */
.wp-block-image.alligator-portrait {
	margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* Portfoliokaarten: de omschrijving eronder is een bijschrift, geen
   lopende tekst. Kleiner gezet dan de broodtekst, zodat de naam van de
   site het werk doet en de zin eronder toelicht. */
.alligator-work .alligator-card p {
	font-size: 1rem;
	line-height: 1.5;
}