/*
 * global.css — tokens, reset, element defaults, utilities, and site layout.
 *
 * Rule 9: no literal colours, font sizes or spacing below :root. Structural
 * constants are exempt and written literally (linter: CLAUDE.md).
 *
 * Design source: design/annasnudel/styles.css.
 */

/* --- 1. Tokens theme.json has no schema for. Only literals in the file. --- */

:root {
	/* Motion */
	--an-duration-fast: 200ms;
	--an-duration-reduced: 1ms;
	--an-easing: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* Lines and focus */
	--an-border-width: 1px;
	--an-focus-width: 3px;
	--an-focus-offset: 4px;
	--an-rule-width: 3px;

	/* Line heights */
	--an-leading-tight: 1.06;
	--an-leading-snug: 1.3;
	--an-leading-base: 1.6;

	/*
	 * Weights. Lato ships 400 and 700 only, so medium resolves to 400 and
	 * semibold to 700. Libre Bodoni ships 400 only: headings must ask for
	 * normal, or the browser fakes a bold.
	 */
	--an-weight-normal: 400;
	--an-weight-medium: 500;
	--an-weight-semibold: 600;
	--an-weight-bold: 700;

	/* Tracking */
	--an-tracking-tight: -0.02em;
	--an-tracking-wide: 0.09em;
	--an-tracking-eyebrow: 0.15em;

	/* Radii: small chrome, buttons, card panels, pills */
	--an-radius-s: 3px;
	--an-radius-m: 10px;
	--an-radius-l: 16px;
	--an-radius-pill: 999px;

	/* Shadows */
	--an-shadow-m: 0 14px 34px rgb(38 58 45 / 0.12);
	/* Header; deeper when scrolled. */
	--an-shadow-header: 0 1px 0 #1b282014, 0 2px 3px #1b28200f, 0 6px 10px -2px #1b282014, 0 16px 28px -10px #1b282026;
	--an-shadow-header-scrolled: 0 1px 0 #1b28201a, 0 3px 5px #1b282014, 0 10px 16px -3px #1b28201f, 0 26px 40px -12px #1b28203d;

	/* Widths and heights */
	--an-measure-article: 40rem;
	--an-measure-page: 58.75rem;
	--an-hero-max: 100rem;
	--an-table-min: 34rem;
	--an-viewport-min: 100svh;
	--an-admin-bar-h: 32px;
	--an-drawer-clearance: 3.5rem;
	--an-header-h: 4.8125rem;
	--an-topbar-h: 1.5rem;
	--an-mark-w: 4.75rem;
	--an-control-h: 3rem;
	--an-toggle: 2.75rem;
	--an-icon: 1.4375rem;

	/* Tint strengths, so colour-mix percentages are not scattered literals */
	--an-tint-rule: 18%;
	--an-tint-border: 22%;
	--an-tint-head: 12%;
	--an-tint-hover: 82%;
	--an-tint-body: 80%;
	--an-tint-field: 55%;
	--an-tint-motif: 0.08;

	/* Stacking */
	--an-z-header: 50;
	--an-z-skip-link: 200;
}

/* Match core's fixed admin-bar height below its 782px breakpoint. */
@media (max-width: 782px) {
	:root {
		--an-admin-bar-h: 46px;
	}
}

@media (min-width: 48rem) {
	:root {
		--an-header-h: 5.875rem;
		--an-mark-w: 5.75rem;
	}
}

/* --- 2. Reset --- */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: none;
	scroll-behavior: smooth;
	scroll-padding-block-start: var(--an-header-h);
}

body {
	min-height: var(--an-viewport-min);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/*
 * German sizing constraint: Substratbeutelherstellungsverfahren is 34 chars
 * with no break opportunity and overflows at 320px without help. hyphens works
 * because <html lang="de"> is set in header.php.
 */
p,
li,
dd,
dt,
figcaption,
td,
th,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	hyphens: auto;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

:target {
	scroll-margin-block-start: var(--wp--preset--spacing--l);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--an-duration-fast: var(--an-duration-reduced);
	}

	html {
		scroll-behavior: auto;
	}
}

/* --- 3. Element defaults --- */

body {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--m);
	font-weight: var(--an-weight-normal);
	line-height: var(--an-leading-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--an-weight-normal);
	letter-spacing: var(--an-tracking-tight);
	line-height: var(--an-leading-tight);
}

h1 {
	font-size: var(--wp--preset--font-size--xxxl);
}

h2 {
	font-size: var(--wp--preset--font-size--xxl);
}

h3 {
	font-size: var(--wp--preset--font-size--l);
}

h4,
h5,
h6 {
	font-size: var(--wp--preset--font-size--m);
	line-height: var(--an-leading-snug);
}

a {
	color: inherit;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.2em;
	transition: color var(--an-duration-fast) var(--an-easing);
}

a:hover {
	color: var(--wp--preset--color--primary);
}

/* One focus style, :focus-visible so pointer users never see it. */
:focus-visible {
	outline: var(--an-focus-width) solid var(--wp--preset--color--primary);
	outline-offset: var(--an-focus-offset);
}

strong,
b {
	font-weight: var(--an-weight-semibold);
}

em,
i {
	font-style: italic;
}

/*
 * Prose flow. `* { margin: 0 }` zeroes everything, so long-form content gets
 * its rhythm back here. flex + gap, not `> * + *` (rule 2), and scoped to the
 * content wrapper so it never touches block-composed pages (rule 3).
 */
.entry-content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--m);
}

.entry-content h2 {
	font-size: var(--wp--preset--font-size--xl);
	margin-block-start: var(--wp--preset--spacing--l);
}

.entry-content h3 {
	margin-block-start: var(--wp--preset--spacing--m);
}

/*
 * Lists as a flex column with gap, which removes the need for `li + li`.
 * WordPress injects the admin bar into the front end for logged-in users, so
 * bare element defaults leak into it; :where() keeps these element-weight.
 */
ul:not(:where(#wpadminbar *)),
ol:not(:where(#wpadminbar *)) {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	padding-inline-start: var(--wp--preset--spacing--l);
}

li::marker {
	color: var(--wp--preset--color--primary);
}

blockquote {
	border-inline-start: var(--an-rule-width) solid var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	font-style: italic;
	line-height: var(--an-leading-snug);
	padding-block: var(--wp--preset--spacing--m);
	padding-inline-start: var(--wp--preset--spacing--l);
}

blockquote cite {
	color: var(--wp--preset--color--secondary);
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	font-style: normal;
	margin-block-start: var(--wp--preset--spacing--s);
}

hr {
	border: 0;
	border-block-start: var(--an-border-width) solid var(--wp--preset--color--line);
}

code,
pre,
kbd,
samp {
	font-family: monospace;
	font-size: var(--wp--preset--font-size--s);
}

figcaption,
.wp-element-caption {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--s);
	margin-block-start: var(--wp--preset--spacing--xs);
}

/* Tables. Core wraps them in <figure class="wp-block-table">: scroll + frame. */
.wp-block-table {
	border: var(--an-border-width) solid var(--wp--preset--color--line);
	border-radius: var(--an-radius-m);
	overflow-x: auto;
}

table {
	background-color: var(--wp--preset--color--paper);
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--s);
	min-inline-size: var(--an-table-min);
	width: 100%;
}

caption {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--xs);
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	text-align: start;
}

th,
td {
	border-block-end: var(--an-border-width) solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	text-align: start;
	vertical-align: top;
}

thead th {
	background-color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--an-tracking-wide);
	text-transform: uppercase;
}

/* Accordions: core/details, and <details> inside the theme's own blocks. */
details {
	border-block-end: var(--an-border-width) solid var(--wp--preset--color--line);
}

summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--l);
	letter-spacing: var(--an-tracking-tight);
	line-height: var(--an-leading-snug);
	list-style: none;
	padding-block: var(--wp--preset--spacing--m);
	padding-inline-end: var(--wp--preset--spacing--l);
	position: relative;
}

summary::-webkit-details-marker {
	display: none;
}

summary::after {
	content: '+';
	font-family: var(--wp--preset--font-family--body);
	inset-block-start: 50%;
	inset-inline-end: 0;
	position: absolute;
	transform: translateY(-50%);
}

details[open] > summary::after {
	content: '−';
}

details p {
	color: color-mix(in oklab, var(--wp--preset--color--contrast) var(--an-tint-body), var(--wp--preset--color--base));
	padding-block-end: var(--wp--preset--spacing--m);
}

input:not(:where([type="checkbox"], [type="radio"], #wpadminbar *)),
textarea:not(:where(#wpadminbar *)),
select:not(:where(#wpadminbar *)) {
	background-color: var(--wp--preset--color--paper);
	border: var(--an-border-width) solid color-mix(in oklab, var(--wp--preset--color--contrast) var(--an-tint-field), transparent);
	border-radius: var(--an-radius-s);
	max-width: 100%;
	min-height: var(--an-control-h);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
}

button,
.btn {
	align-items: center;
	background-color: var(--wp--preset--color--primary);
	border: var(--an-border-width) solid var(--wp--preset--color--primary);
	border-radius: var(--an-radius-m);
	color: var(--wp--preset--color--paper);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--s);
	gap: var(--wp--preset--spacing--xs);
	justify-content: center;
	line-height: var(--an-leading-snug);
	min-height: var(--an-control-h);
	padding-block: var(--wp--preset--spacing--xs);
	padding-inline: var(--wp--preset--spacing--m);
	text-decoration: none;
	transition:
		background-color var(--an-duration-fast) var(--an-easing),
		border-color var(--an-duration-fast) var(--an-easing);
}

button:hover,
.btn:hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--paper);
}

/* Cream button for the green and terracotta bands. */
.btn--light {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.btn--light:hover {
	background-color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--contrast);
}

/* --- 4. Utilities. Deliberately few; not a utility framework. --- */

.container {
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size);
	padding-inline: var(--wp--preset--spacing--gutter);
	width: 100%;
}

.eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--an-weight-medium);
	letter-spacing: var(--an-tracking-eyebrow);
	text-transform: uppercase;
}

/* The design's underlined text link, used beside or instead of a button. */
.text-link {
	border-block-end: var(--an-border-width) solid currentColor;
	display: inline-block;
	font-size: var(--wp--preset--font-size--s);
	padding-block-end: var(--wp--preset--spacing--xxs);
	text-decoration: none;
}

.icon {
	fill: none;
	flex: none;
	height: var(--an-icon);
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.5;
	width: var(--an-icon);
}

/* Paragraph block style "Notice" (registered in inc/editor.php). */
.is-style-notice {
	background-color: var(--wp--preset--color--surface);
	border-inline-start: var(--an-rule-width) solid var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--s);
	padding: var(--wp--preset--spacing--m);
}

.visually-hidden:not(:focus):not(:active) {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.skip-link {
	background-color: var(--wp--preset--color--paper);
	inset-block-start: 0;
	inset-inline-start: 0;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
	position: absolute;
	transform: translateY(-100%);
	z-index: var(--an-z-skip-link);
}

.skip-link:focus {
	transform: translateY(0);
}

/* --- 5. Site chrome --- */

/* Green strip above the header. It scrolls away; only the header sticks. */
.site-topbar {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.site-topbar__inner {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--xs);
	justify-content: space-between;
	max-width: var(--wp--style--global--wide-size);
	min-height: var(--an-topbar-h);
}

.site-topbar__note {
	font-size: calc(var(--wp--preset--font-size--xs) * 0.92);
	letter-spacing: var(--an-tracking-eyebrow);
	line-height: var(--an-topbar-h);
	text-transform: uppercase;
}

.site-topbar__social {
	display: flex;
	gap: var(--wp--preset--spacing--xs);
	margin-inline-start: auto;
}

.site-topbar__social > * {
	border-radius: 50%;
	display: grid;
	height: var(--an-topbar-h);
	place-items: center;
	width: var(--an-topbar-h);
}

.site-topbar__social a:hover {
	background-color: color-mix(in oklab, var(--wp--preset--color--base) var(--an-tint-border), transparent);
	color: var(--wp--preset--color--base);
}

.site-topbar :focus-visible {
	outline-color: var(--wp--preset--color--base);
	outline-offset: 1px;
}

.site-topbar .icon {
	height: 0.875rem;
	width: 0.875rem;
}

.site-header {
	/*
	 * Solid base, never backdrop-filter: a filter makes the header the
	 * containing block for position:fixed and clips the mobile drawer to it.
	 */
	background-color: var(--wp--preset--color--base);
	border-block-end: var(--an-border-width) solid transparent;
	box-shadow: var(--an-shadow-header);
	position: sticky;
	top: 0;
	transition: box-shadow var(--an-duration-fast);
	/* Above .site-nav so the toggle stays tappable over the open drawer. */
	z-index: calc(var(--an-z-header) + 2);
}

.is-scrolled .site-header {
	box-shadow: var(--an-shadow-header-scrolled);
}

.admin-bar .site-header {
	top: var(--an-admin-bar-h);
}

.site-header__inner {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--m);
	justify-content: space-between;
	max-width: var(--wp--style--global--wide-size);
	min-height: var(--an-header-h);
}

/* The logo in colour in the header, its light version in the footer. */
.site-branding__link {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--xs);
	text-decoration: none;
}

.site-branding__link:hover {
	color: inherit;
}

.site-branding__mark {
	aspect-ratio: 92 / 68;
	background: url(../img/annas-logo.svg?v=2) center / contain no-repeat;
	flex: none;
	width: var(--an-mark-w);
}

/* Account and cart, printed only when there is a shop. */
.site-header__actions {
	align-items: center;
	display: flex;
	/* Leaves room for the nav toggle, which is absolutely positioned. */
	margin-inline-end: calc(var(--an-toggle) + var(--wp--preset--spacing--xxs));
}

.site-header__action {
	display: grid;
	padding: var(--wp--preset--spacing--xxs);
	place-items: center;
	position: relative;
}

.site-header__count {
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--an-radius-pill);
	color: var(--wp--preset--color--paper);
	font-size: calc(var(--wp--preset--font-size--xs) * 0.92);
	inset-block-start: -0.125rem;
	inset-inline-end: -0.25rem;
	line-height: 1.125rem;
	min-width: 1.125rem;
	position: absolute;
	text-align: center;
}

/*
 * Navigation. Mobile first: off-canvas panel + toggle. Above 68.75rem the
 * toggle hides and the list is a row in the header bar. Six entries do not
 * fit sooner. site.js tests the same width.
 */
.nav-toggle {
	background-color: transparent;
	border: 0;
	color: var(--wp--preset--color--contrast);
	height: var(--an-toggle);
	inset-block-start: 50%;
	inset-inline-end: var(--wp--preset--spacing--gutter);
	min-height: 0;
	padding: var(--wp--preset--spacing--xs);
	/* Absolute in the sticky header, so it follows it and clears the top bar. */
	position: absolute;
	transform: translateY(-50%);
	width: var(--an-toggle);
	z-index: calc(var(--an-z-header) + 5);
}

.nav-toggle:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

/* No `display` here: it would outrank `.nav-toggle__close { display: none }`. */
.nav-toggle svg {
	height: 100%;
	stroke: currentColor;
	width: 100%;
}

.nav-toggle__close {
	display: none;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__open {
	display: none;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__close {
	display: block;
}

.site-nav {
	background-color: var(--wp--preset--color--base);
	border-inline-end: var(--an-border-width) solid var(--wp--preset--color--line);
	box-shadow: var(--an-shadow-m);
	display: flex;
	flex-direction: column;
	inset: 0 auto 0 0;
	max-width: 100%;
	min-height: 100svh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l);
	padding-block-start: calc(var(--wp--preset--spacing--xl) + var(--an-drawer-clearance));
	position: fixed;
	/* From the left, over twice the usual time so it reads as a slide. */
	--slide: calc(var(--an-duration-fast) * 2);
	transform: translateX(-100%);
	/*
	 * visibility, not transform alone: off-screen links must leave the tab
	 * order. Its 0s transition is delayed by the slide when closing, so the
	 * panel stays visible for the whole animation.
	 */
	transition:
		transform var(--slide) var(--an-easing),
		visibility 0s linear var(--slide);
	visibility: hidden;
	/* Stops short of the toggle, which stays in the header as the close button. */
	width: min(20rem, 100vw - var(--an-toggle) - var(--wp--preset--spacing--gutter) * 2);
	z-index: calc(var(--an-z-header) + 1);
}

.admin-bar .site-nav {
	inset-block-start: var(--an-admin-bar-h);
	min-height: calc(var(--an-viewport-min) - var(--an-admin-bar-h));
}

.site-nav.is-open {
	transform: translateX(0);
	transition:
		transform var(--slide) var(--an-easing),
		visibility 0s linear 0s;
	visibility: visible;
}

/* The panel's edge would cut through the account and cart icons. */
.site-header:has(.site-nav.is-open) .site-header__actions {
	visibility: hidden;
}

.site-nav__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	padding: 0;
	width: 100%;
}

.site-nav__list a {
	border-block-end: var(--an-border-width) solid var(--wp--preset--color--line);
	display: block;
	font-size: var(--wp--preset--font-size--m);
	padding-block: var(--wp--preset--spacing--s);
	text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
	color: var(--wp--preset--color--primary);
}

@media (min-width: 68.75rem) {
	.nav-toggle {
		display: none;
	}

	.site-header__actions {
		gap: var(--wp--preset--spacing--xs);
		margin-inline-end: 0;
	}

	.site-header {
		z-index: var(--an-z-header);
	}

	.site-nav {
		background-color: transparent;
		border: 0;
		box-shadow: none;
		display: block;
		inset: auto;
		max-width: none;
		min-height: 0;
		overflow: visible;
		padding: 0;
		position: static;
		transform: none;
		/* Static chrome: must not inherit the drawer's hidden state. */
		transition: none;
		visibility: visible;
		width: auto;
		z-index: auto;
	}

	.admin-bar .site-nav {
		min-height: 0;
	}

	.site-nav__list {
		align-items: center;
		flex-direction: row;
		gap: var(--wp--preset--spacing--l);
		width: auto;
	}

	.site-nav__list a {
		border-block-end: 2px solid transparent;
		font-size: var(--wp--preset--font-size--s);
		padding-block: var(--wp--preset--spacing--xs);
	}

	.site-nav__list a:hover {
		color: inherit;
	}

	.site-nav__list a:hover,
	.site-nav__list .current-menu-item > a {
		border-block-end-color: var(--wp--preset--color--primary);
	}
}

/* --- Plain pages: FAQ, legal, single posts --- */

.entry {
	padding-block: var(--wp--preset--spacing--xl);
}

.entry > .container {
	max-width: var(--an-measure-page);
}

.entry-header {
	margin-block-end: var(--wp--preset--spacing--l);
}

.entry-content a {
	color: var(--wp--preset--color--primary);
}

/* --- Archive listing --- */

.archive-header {
	background-color: var(--wp--preset--color--surface);
	margin-block-end: var(--wp--preset--spacing--l);
	padding: var(--wp--preset--spacing--l);
}

.page-title {
	font-size: var(--wp--preset--font-size--xxl);
}

.archive-description {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--s);
	margin-block-start: var(--wp--preset--spacing--s);
	max-width: 58ch;
}

.entry-summary {
	background-color: var(--wp--preset--color--paper);
	border: var(--an-border-width) solid var(--wp--preset--color--line);
	border-radius: var(--an-radius-l);
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	overflow: hidden;
}

.entry-summary__media {
	aspect-ratio: 4 / 3;
	display: block;
	overflow: hidden;
}

.entry-summary__image {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.entry-summary__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--m);
}

.entry-summary__title a {
	text-decoration: none;
}

.entry-meta {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--an-tracking-wide);
	text-transform: uppercase;
}

.entry-thumbnail {
	border-radius: var(--an-radius-l);
	margin-block: var(--wp--preset--spacing--l);
	overflow: hidden;
}

.entry-thumbnail img {
	width: 100%;
}

body.blog .site-main > .container,
body.archive .site-main > .container,
body.search .site-main > .container,
body.error404 .site-main > .container {
	display: grid;
	gap: var(--wp--preset--spacing--l);
	padding-block: var(--wp--preset--spacing--xl);
}

@media (min-width: 48rem) {
	body.blog .site-main > .container,
	body.archive .site-main > .container,
	body.search .site-main > .container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.blog .site-main > .container > :not(.entry-summary),
	body.archive .site-main > .container > :not(.entry-summary),
	body.search .site-main > .container > :not(.entry-summary) {
		grid-column: 1 / -1;
	}
}

/* --- Pagination --- */

.navigation.pagination .nav-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	justify-content: center;
}

.navigation.pagination .page-numbers {
	border: var(--an-border-width) solid var(--wp--preset--color--line);
	border-radius: var(--an-radius-pill);
	display: inline-grid;
	font-size: var(--wp--preset--font-size--s);
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding-inline: var(--wp--preset--spacing--s);
	place-items: center;
	text-decoration: none;
}

.navigation.pagination .page-numbers.current {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* --- Site footer --- */

.site-footer {
	background-color: var(--wp--preset--color--contrast);
	border-block-start: var(--an-border-width) solid color-mix(in oklab, var(--wp--preset--color--base) var(--an-tint-head), transparent);
	color: color-mix(in oklab, var(--wp--preset--color--base) var(--an-tint-hover), var(--wp--preset--color--contrast));
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--m);
	position: relative;
}

/*
 * Anna's line drawing as a faint motif (annasnudel_motif() in inc/site.php).
 * Two mask layers, so her hand stirs over the plate while flour falls. Whoever
 * prints it sets its place, width and --an-motif colour. Still when reduced
 * motion is asked for.
 */
.an-motif {
	aspect-ratio: 480 / 352;
	container-type: inline-size;
	opacity: var(--an-tint-motif);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.an-motif__layer {
	background-color: var(--an-motif, var(--wp--preset--color--base));
	inset: 0;
	mask: url(../img/annas-drawing-body.svg) center / 100% 100% no-repeat;
	position: absolute;
}

.an-motif__layer--hand {
	mask-image: url(../img/annas-drawing-hand.svg);
	/* On the line through the hand's two cut points, so both ends stay joined. */
	transform-origin: 24.7% 43.74%;
}

.an-motif__speck {
	aspect-ratio: 1;
	background-color: var(--an-motif, var(--wp--preset--color--base));
	border-radius: 50%;
	left: calc(20.8% + var(--x, 0%));
	opacity: 0;
	position: absolute;
	top: calc(58% + var(--y, 0%));
	width: max(3px, 0.8cqw);
}

.an-motif__speck--2 { --x: 1.8%; --y: 1.6%; --dx: 1.2cqw; animation-delay: -0.35s; }
.an-motif__speck--3 { --x: 3.5%; --y: -1%; --dx: -0.8cqw; animation-delay: -0.8s; }
.an-motif__speck--4 { --x: 5.1%; --y: 1%; --dx: 1.6cqw; animation-delay: -1.15s; }
.an-motif__speck--5 { --x: 2.6%; --y: -2.2%; --dx: 0.5cqw; animation-delay: -1.5s; }
.an-motif__speck--6 { --x: 0.8%; --y: -1.4%; --dx: -1.2cqw; animation-delay: -1.9s; }

@media (prefers-reduced-motion: no-preference) {
	.an-motif__layer--hand {
		animation: an-stir 2.8s linear infinite;
	}

	.an-motif__speck {
		animation: an-flour 2.2s linear infinite;
	}

	@keyframes an-stir {
		0%, 100% { transform: rotate(20deg) skewY(-16deg) rotate(-20deg); }
		12.5% { transform: rotate(20deg) skewY(-11.31deg) scaleX(1.212) rotate(-20deg); }
		25% { transform: rotate(20deg) scaleX(1.3) rotate(-20deg); }
		37.5% { transform: rotate(20deg) skewY(11.31deg) scaleX(1.212) rotate(-20deg); }
		50% { transform: rotate(20deg) skewY(16deg) rotate(-20deg); }
		62.5% { transform: rotate(20deg) skewY(11.31deg) scaleX(0.788) rotate(-20deg); }
		75% { transform: rotate(20deg) scaleX(0.7) rotate(-20deg); }
		87.5% { transform: rotate(20deg) skewY(-11.31deg) scaleX(0.788) rotate(-20deg); }
	}

	@keyframes an-flour {
		0% { opacity: 0; translate: 0 0; }
		15%, 70% { opacity: 1; }
		100% { opacity: 0; translate: var(--dx, 0) 7.5cqw; }
	}
}

/* Sized by the footer's height, so her head never runs into its top edge. */
.site-footer > .an-motif {
	block-size: min(29rem, calc(100% - var(--wp--preset--spacing--l)), 63vw);
	inset-block-end: 0;
	inset-inline-end: -3%;
}

.site-footer__inner {
	display: grid;
	gap: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
	.site-footer__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 68.75rem) {
	.site-footer__inner {
		grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr;
	}
}

.site-footer__col {
	font-size: var(--wp--preset--font-size--s);
	min-inline-size: 0;
}

.site-footer .site-branding__link {
	align-items: flex-start;
	color: var(--wp--preset--color--base);
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
	margin-block-end: var(--wp--preset--spacing--m);
}

/* Footer: the brand's Primary logo, in the page's cream. */
.site-footer .site-branding__mark {
	aspect-ratio: 511 / 286;
	background-image: url(../img/annas-logo-primary-light.svg);
	width: min(16rem, 100%);
}

.site-footer__heading {
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	letter-spacing: 0;
	line-height: var(--an-leading-base);
	margin-block-end: var(--wp--preset--spacing--s);
}

.site-footer__list {
	list-style: none;
	padding: 0;
}

.site-footer__col a {
	overflow-wrap: anywhere;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

.site-footer__legal {
	border-block-start: var(--an-border-width) solid color-mix(in oklab, var(--wp--preset--color--base) var(--an-tint-rule), transparent);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--xs);
	gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);
	justify-content: space-between;
	margin-block-start: var(--wp--preset--spacing--l);
	padding-block-start: var(--wp--preset--spacing--m);
}

.site-footer__legal a {
	text-decoration: none;
}

.site-footer__legal-list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
	list-style: none;
	padding: 0;
}

/* --- 404, search, no-results --- */

.entry-none,
.error-404 {
	background-color: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--l);
}

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	margin-block-start: var(--wp--preset--spacing--m);
}

.search-form__label {
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--s);
}

.search-form__field {
	flex: 1 1 12rem;
	min-inline-size: 0;
}

.site-footer__address {
	font-style: normal;
	margin-block-end: var(--wp--preset--spacing--xs);
}

.site-footer__tag {
	max-width: 15rem;
}

@media print {
	.site-topbar,
	.site-header,
	.site-footer {
		display: none;
	}
}

/* Slideshow (annasnudel_slides, site.js): the photos lie on top of each other
   and crossfade. Without the script only the first is there. */
.is-sliding .an-slides__item {
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 1.2s ease;
}

.is-sliding .an-slides__item.is-active {
	opacity: 1;
}

.an-slides__toggle {
	background: var(--wp--preset--color--base);
	border: var(--an-border-width) solid var(--wp--preset--color--line);
	border-radius: 50%;
	color: var(--wp--preset--color--contrast);
	display: grid;
	height: 2rem;
	inset-block-end: var(--wp--preset--spacing--s);
	inset-inline-end: var(--wp--preset--spacing--s);
	min-height: 0;
	padding: 0;
	place-items: center;
	position: absolute;
	width: 2rem;
	z-index: 2;
}

.an-slides__toggle[hidden],
.an-slides__play,
.an-slides__toggle.is-paused .an-slides__pause {
	display: none;
}

.an-slides__toggle.is-paused .an-slides__play {
	display: block;
}

.an-slides__toggle .icon {
	height: 0.8125rem;
	width: 0.8125rem;
}