/**
 * vnff03: styles on top of Architrave.
 *
 * Only Architrave's own design tokens are used, so light/dark mode, the reader's
 * text size and Vibetiles styles apply here as well.
 */

/* ---------------------------------------------------------------- Utilities */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	word-wrap: normal !important;
}

/* ---------------------------------------------------------------- Language switch */

.vnff-lang ul {
	display: flex;
	gap: 2px;
	margin: 0;
	padding: 2px;
	list-style: none;
	border-radius: var(--radius-control);
	/* An outline instead of a filled track keeps the inactive label at 4.5:1 or more. */
	box-shadow: inset 0 0 0 var(--border-width-default, 1px) var(--border);
}

.vnff-lang a {
	display: grid;
	place-items: center;
	min-width: 2.25rem;
	min-height: calc(var(--layout-action-square, 2rem) - 4px);
	padding-inline: var(--space-1-5, 0.375rem);
	border-radius: calc(var(--radius-control) - 2px);
	color: var(--text-secondary);
	font-family: var(--ui-face, var(--font-sans));
	font-size: max(var(--text-floor-ui, 12px), var(--text-sm-contextual, 0.8125rem));
	font-weight: var(--font-weight-medium, 500);
	letter-spacing: 0.04em;
	text-decoration: none;
}

.vnff-lang a:hover {
	background: var(--surface-selected);
	color: var(--text-primary);
}

.vnff-lang a.is-active {
	background: var(--surface-base);
	color: var(--text-primary);
	box-shadow: 0 0 0 var(--border-width-default, 1px) var(--border);
}

/* Sidebar head: next to the site title. */
.sidebar-logo-section .vnff-lang--rail {
	flex: none;
	margin-inline-start: auto;
	padding-inline-start: var(--space-2);
}

/* Phone bar: before the search and menu buttons. */
.mobile-nav-bar .vnff-lang--bar {
	display: flex;
	align-items: center;
	margin-inline-end: var(--space-1);
}

/* While reading in focus mode the switch steps back with the other controls. */
:root[data-focus-on] .vnff-lang {
	opacity: 0.35;
	transition: opacity var(--focus-duration, 0.2s) var(--focus-easing, ease);
}

:root[data-focus-on] .vnff-lang:is(:hover, :focus-within) {
	opacity: 1;
}

/* ---------------------------------------------------------------- Contrast (WCAG 2.2 AA) */

/*
 * Architrave's default palette draws secondary and muted text as the text colour at
 * 60 % and 50 % opacity, which falls below 4.5:1 for small text (down to 3.5:1 in dark
 * mode). Both tokens get more opacity, so every use of them passes. Styles a reader
 * or the owner picks in Vibetiles set their own values and are not affected.
 */
:root:root:root[data-tint] {
	--text-secondary: color-mix(in srgb, var(--text-primary) 78%, transparent);
	--text-muted: color-mix(in srgb, var(--text-primary) 70%, transparent);
}

/*
 * A reading column about 25 % wider than Architrave's 53ch. Architrave sets the
 * token on :root and again on every .quire-surface, so both are covered.
 */
:root:root:root[data-tint],
.quire-surface.quire-surface {
	--layout-content-width-reading: 66ch;
}

/*
 * The purple accent (links) reaches 3.5:1 on the dark sheet; a lighter purple reaches 5:1.
 * Text on accent-coloured buttons turns dark, since white on the light purple is 2.3:1.
 */
:root:root[data-theme$="-dark"][data-tint="purple"] {
	--accent: #b49dff;
	--accent-contrast: #1b1330;
}

/* Some small labels use Architrave's subtlest colours; they move up to the secondary colour. */
.quire-nav-section-head,
.quire-nav-section-head span {
	color: var(--text-secondary);
}

/* The section headings of the sidebar menu stand apart from the links: small capitals, spaced. */
.quire-nav-section-head > span:first-child {
	font-size: max(var(--text-floor-ui, 12px), 0.75rem);
	font-weight: var(--font-weight-semibold, 600);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.archive-page .arch-row-date,
.archive-page [aria-controls^="arch-fold-"] > span,
.post-neighbour .post-neighbour-label {
	color: var(--text-secondary);
}

/* ---------------------------------------------------------------- Lead paragraph (older posts) */

.single-post-article .article-intro {
	margin-block: var(--space-6) 0;
	color: var(--text-secondary);
	font-family: var(--font-reading, var(--font-serif));
	font-size: calc(var(--text-reading-body, 1.25rem) * 1.2);
	font-style: italic;
	line-height: 1.4;
	text-wrap: pretty;
}

/* ---------------------------------------------------------------- Info boxes from the Uku era */

.entry-content .box,
.wp-block-post-content .box {
	margin-block: var(--space-reading-paragraph, 1.5em);
	padding: var(--space-4) var(--space-5, 1.25rem);
	border: 3px solid var(--border-strong, var(--border));
	border-radius: var(--radius-lg, 0.5rem);
}

.wp-block-post-content .box > :first-child {
	margin-block-start: 0;
}

.wp-block-post-content .box > :last-child {
	margin-block-end: 0;
}

.wp-block-post-content .white-box {
	border-color: var(--border);
}

.wp-block-post-content .lightgrey-box {
	border-color: var(--border);
}

.wp-block-post-content .grey-box {
	border-color: var(--text-subtle);
}

.wp-block-post-content .dark-box {
	border-color: var(--text-primary);
}

.wp-block-post-content .yellow-box {
	border-color: #e0b100;
}

.wp-block-post-content .red-box {
	border-color: #d33b3b;
}

.wp-block-post-content .blue-box {
	border-color: #2f74c0;
}

.wp-block-post-content .green-box {
	border-color: #3d9a50;
}

/* ---------------------------------------------------------------- Footer of the sheet */

.content-column .vnff-credit {
	/* Architrave keeps its one-line credit sticky at the bottom; ours has three lines. */
	position: static;
	/* Wider than Architrave's 544px, so the licence sentence fits on one line from tablets up. */
	max-width: min(100%, 46rem);
	display: grid;
	gap: var(--space-2);
	justify-items: center;
	color: var(--text-muted);
	line-height: 1.5;
}

.vnff-credit p {
	margin: 0;
	font: inherit;
	text-wrap: balance;
}

.vnff-credit ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-1) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.content-column .vnff-credit a,
.vnff-credit-button {
	color: var(--text-secondary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.vnff-credit-button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}

.content-column .vnff-credit a:hover,
.vnff-credit-button:hover {
	color: var(--text-primary);
}

/* Complianz styles every .cmplz-manage-consent as its floating tab; ours is an inline link. */
.vnff-credit .cmplz-manage-consent.vnff-credit-button {
	position: static;
	z-index: auto;
	display: inline;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--text-secondary);
	transform: none;
}

/* ---------------------------------------------------------------- Cookie banner (Complianz) */

/*
 * The banner takes the theme's colours, so it follows light and dark mode.
 * Accept, deny and settings look the same: no option is pushed visually.
 */
.cmplz-cookiebanner,
#cmplz-manage-consent {
	--cmplz_banner_background_color: var(--surface-raised, var(--surface-base));
	--cmplz_banner_border_color: var(--border);
	--cmplz_banner_border_width: 1px;
	--cmplz_banner_border_radius: var(--radius-lg, 12px);
	--cmplz_text_color: var(--text-primary);
	--cmplz_hyperlink_color: var(--text-primary);
	--cmplz_button_border_radius: var(--radius-control, 6px);
	--cmplz_button_accept_background_color: var(--surface-hover);
	--cmplz_button_accept_border_color: var(--border-strong, var(--border));
	--cmplz_button_accept_text_color: var(--text-primary);
	--cmplz_button_deny_background_color: var(--surface-hover);
	--cmplz_button_deny_border_color: var(--border-strong, var(--border));
	--cmplz_button_deny_text_color: var(--text-primary);
	--cmplz_button_settings_background_color: var(--surface-hover);
	--cmplz_button_settings_border_color: var(--border-strong, var(--border));
	--cmplz_button_settings_text_color: var(--text-primary);
	--cmplz_slider_active_color: var(--text-primary);
	--cmplz_slider_inactive_color: var(--text-subtle);
	--cmplz_slider_bullet_color: var(--surface-base);
	--cmplz_category_header_always_active_color: var(--text-secondary);
	--cmplz_text_font_size: 13px;
	--cmplz_link_font_size: 13px;
	font-family: var(--ui-face, var(--font-sans));
}

.cmplz-cookiebanner {
	box-shadow: var(--elevation-floating, 0 8px 30px rgb(0 0 0 / 0.2));
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(:hover, :focus-visible) {
	background-color: var(--surface-selected);
}

/* ---------------------------------------------------------------- Phone bar */

/* The Vibetiles button (32px) sits top-aligned next to the 44px buttons otherwise. */
.mobile-nav-bar .sheet-actions {
	align-items: center;
}

/* ---------------------------------------------------------------- Contact form (WPForms) */

/* WPForms draws white fields; they take the theme's surfaces, so they work in dark mode too. */
div.wpforms-container.wpforms-container-full .wpforms-form :is(input[type="text"], input[type="email"], input[type="url"], textarea, select) {
	border: var(--border-width-default, 1px) solid var(--border-strong, var(--border));
	border-radius: var(--radius-control, 6px);
	background-color: var(--surface-base);
	color: var(--text-primary);
	font-family: var(--ui-face, var(--font-sans));
}

div.wpforms-container.wpforms-container-full .wpforms-form :is(input, textarea)::placeholder {
	color: var(--text-muted);
	opacity: 1;
}

div.wpforms-container.wpforms-container-full .wpforms-form :is(input, textarea, select):focus-visible {
	outline: 2px solid var(--text-primary);
	outline-offset: 2px;
}

div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-label,
div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
	color: var(--text-primary);
}

div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-label-inline a {
	color: var(--text-primary);
	text-decoration: underline;
}

div.wpforms-container.wpforms-container-full .wpforms-form button[type="submit"] {
	border: var(--border-width-default, 1px) solid var(--border-strong, var(--border));
	border-radius: var(--radius-control, 6px);
	background-color: var(--surface-hover);
	color: var(--text-primary);
	font-family: var(--ui-face, var(--font-sans));
}

div.wpforms-container.wpforms-container-full .wpforms-form button[type="submit"]:is(:hover, :focus-visible) {
	background-color: var(--surface-selected);
}

/* ---------------------------------------------------------------- Pictures */

/*
 * Hyphenation for all paragraph text: posts and pages, excerpts, intros and comments.
 * Architrave's own switch (--reading-hyphens) only reaches top-level paragraphs of a
 * post; paragraphs in quotes, columns and groups follow here as well. Words break
 * only when they have at least six letters, with at least three on each side.
 */
:root:root:root[data-tint] {
	--reading-hyphens: auto;
}

.content-column :is(.wp-block-post-content, .wp-block-post-excerpt, .comment-content, .wp-block-comment-content) p,
.content-column p.article-intro {
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 6 3 3;
}

/* No frame around pictures; the rounded corners stay. */
:root:root:root[data-tint] {
	--picture-frame: 0px;
}

.post-card .post-media img,
.single-post-article .article-media img,
:is(.single-post-article, .post-card.format-link .post-format-body) .wp-block-post-content img:not(.emoji, .wp-smiley, .post-link-shot) {
	border: 0;
	background: none;
}

/*
 * Featured images keep their own proportions (includes/featured-image.php) and reach
 * beyond the text column: up to 1.4 times its width, never narrower than the text
 * and never wider than the sheet.
 */
.single-post-article .article-media,
.post-card .post-media {
	--vnff-feature-width: max(100%, min(calc(var(--layout-content-width-reading) * var(--read-size, 1) * 1.4), calc(100cqi - 2 * var(--space-4))));
	width: var(--vnff-feature-width);
	max-width: none;
	margin-inline: calc((100% - var(--vnff-feature-width)) / 2);
	aspect-ratio: auto;
}

/* The image comes first (includes/featured-image.php), the title follows. */
.single-post-article > .article-media:first-child {
	margin-block: 0 var(--space-12);
}

.post-card > .post-media:first-child {
	margin-block: 0 var(--space-10);
}

/* Category line above the title (includes/featured-image.php), like the start page teasers. */
.post-card > .post-media:first-child + .post-kicker {
	margin-block-start: calc(var(--space-10) * -0.4);
}

.post-card > .post-kicker + .wp-block-post-title {
	margin-block-start: 36px !important; /* Architrave trims the title box; this matches the visible gap between title and date. */
}

.single-post-article > .article-media:first-child + .article-kicker {
	margin-block-start: calc(var(--space-12) * -0.4);
}

.single-post-article > .article-kicker + .wp-block-post-title {
	margin-block-start: var(--space-12) !important; /* Overrides the title block's inline margin; same gap as between title and date. */
}

.single-post-article > .article-media:first-child ~ .wp-block-post-content {
	margin-top: var(--space-reading-section);
}

.single-post-article .article-media img,
.post-card .post-media img {
	width: 100%;
	height: auto;
	object-fit: initial;
}

/* ---------------------------------------------------------------- About page */

/* The portrait above the text: round and aligned with it. */
/* Architrave's picture rules reach a specificity of (0,5,1); these go one step further. */
.content-column .single-post-article .wp-block-post-content > figure.wp-block-image.vnff-about-portrait {
	margin-inline: 0;
	text-align: start;
}

.content-column .single-post-article .wp-block-post-content figure.wp-block-image.vnff-about-portrait img {
	margin-inline: 0;
	border-radius: 50%;
}

/* ---------------------------------------------------------------- "More" button */

/*
 * Out of sight and use while its menu is empty (includes/more-menu.php). It keeps its
 * height: Vibetiles sizes and styles its design button after this neighbour.
 */
.rail-foot > .rail-more-trigger.vnff-more-empty {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 1px;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
}

/* ---------------------------------------------------------------- Mentions below the comments */

/* includes/mentions.php: one list of pages that link to the post. */
.comments-section .vnff-mentions-intro {
	margin: var(--space-1) 0 0;
	color: var(--text-secondary);
	font-size: var(--text-sm-contextual, 0.875rem);
}

.comments-section .comments-mentions-list a.vnff-mention-link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.comments-section .comments-mentions-list a.vnff-mention-link:is(:hover, :focus-visible) {
	color: var(--text-primary);
	text-decoration-thickness: 2px;
}

.comments-section .comments-mentions-list a.vnff-mention-link:focus-visible {
	outline: 2px solid var(--text-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------- Comment form */

/* Avatar Privacy's Gravatar checkbox sits on the line of its label. */
#commentform .comment-form-use-gravatar {
	flex-direction: row;
	align-items: baseline;
	gap: var(--space-2);
}

#commentform .comment-form-use-gravatar input[type="checkbox"] {
	flex: none;
	margin: 0;
	width: 1.05em;
	height: 1.05em;
	accent-color: var(--accent);
	transform: translateY(0.15em);
}

#commentform .comment-form-use-gravatar label {
	color: var(--text-secondary);
	font-size: var(--text-sm-contextual, 0.8125rem);
}

/* ---------------------------------------------------------------- Webmention form */

/* Same type, fields and button as the comment form above it. */
.webmention-form {
	margin-top: var(--space-10);
	font-family: var(--ui-face, var(--font-sans));
}

.webmention-form__source {
	display: grid;
	gap: var(--space-1-5, 6px);
	margin: 0;
}

.webmention-form .webmention-form__source label,
.webmention-form .webmention-form__source small,
.webmention-form .webmention-form__help,
.webmention-form .webmention-form__help * {
	font-family: var(--ui-face, var(--font-sans));
}

.webmention-form__source label {
	color: var(--text-secondary);
	font-size: var(--text-sm-contextual, 0.8125rem);
	line-height: 1.45;
}

.webmention-form__source small {
	color: var(--text-muted);
	font-size: var(--text-sm-contextual, 0.8125rem);
	line-height: 1.45;
}

.webmention-form input.webmention-source {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: var(--border-width-default, 1px) solid transparent;
	border-radius: var(--radius-control, 10px);
	background-color: var(--surface-hover);
	color: var(--text-primary);
	font: inherit;
	font-size: 16px; /* 16px keeps iOS from zooming into the field. */
}

.webmention-form input.webmention-source:focus-visible {
	outline: 2px solid var(--text-primary);
	outline-offset: 2px;
}

.webmention-form__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	margin-top: var(--space-4);
}

.webmention-form .webmention-submit.wp-element-button {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	height: auto;
	margin: 0;
	padding: 0 var(--space-3, 12px);
	border: 0;
	border-radius: var(--radius-control, 10px);
	background-color: var(--accent);
	color: var(--accent-contrast);
	font-family: var(--ui-face, var(--font-sans));
	font-size: var(--text-sm-contextual, 0.8125rem);
	font-weight: var(--font-weight-medium, 420);
	line-height: 1.2;
	cursor: pointer;
}

.webmention-form .webmention-submit.wp-element-button:is(:hover, :focus-visible) {
	filter: brightness(1.08);
}

.webmention-form .webmention-submit.wp-element-button:focus-visible {
	outline: 2px solid var(--text-primary);
	outline-offset: 2px;
}

/* The explanation opens below the button, across the full width (it was cut off on phones). */
.webmention-form .webmention-form__help {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--text-secondary);
	font-size: var(--text-sm-contextual, 0.8125rem);
	line-height: 1.5;
}

.webmention-form .webmention-form__help[open] {
	flex-basis: 100%;
}

.webmention-form .webmention-form__help summary {
	cursor: pointer;
	color: var(--text-secondary);
}

.webmention-form .webmention-form__help summary:is(:hover, :focus-visible) {
	color: var(--text-primary);
}

.webmention-form .webmention-form__help > div {
	margin-top: var(--space-2);
	max-width: 60ch;
}

.webmention-form .webmention-form__help a {
	color: var(--text-primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------- Gallery captions */

/*
 * Captions over gallery pictures: small sans text, hyphenated, at most three lines.
 * On phones they used reading size in tiles of 160 x 105px and were cut off. The full
 * caption stays in the page for screen readers.
 */
.wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	padding: var(--space-6) var(--space-2) var(--space-2);
	font-family: var(--ui-face, var(--font-sans));
	font-size: max(12px, 0.8125rem);
	line-height: 1.35;
	hyphens: auto;
	text-wrap: balance;
	background: linear-gradient(0deg, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0));
}

@media (max-width: 600px) {
	.wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
		font-size: 12px;
		-webkit-line-clamp: 2;
	}
}

/* ---------------------------------------------------------------- Start page */

/* tools/home-page.php: greeting, introduction, two buttons, the latest posts in two columns. */
.content-column .single-post-article .wp-block-post-content > figure.wp-block-image.vnff-home-portrait {
	margin: 0 0 var(--space-6);
	text-align: start;
}

.content-column .single-post-article .wp-block-post-content figure.wp-block-image.vnff-home-portrait img {
	margin: 0;
	border: 0;
	border-radius: 50%;
}

.wp-block-post-content .vnff-home-title {
	margin: 0;
	font-family: var(--font-reading, var(--font-serif));
	font-size: var(--wp--preset--font-size--font-size-xl, 2.5rem);
	line-height: 1.1;
}

.wp-block-post-content .vnff-home-lead {
	margin-top: var(--space-6);
	color: var(--text-primary);
	font-size: calc(var(--text-reading-body, 1.25rem) * 1.15);
	line-height: 1.5;
	text-wrap: pretty;
}

.wp-block-post-content .vnff-home-actions {
	gap: var(--space-3);
	margin-top: var(--space-8);
}

.wp-block-post-content .vnff-home-actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--space-4);
	border: var(--border-width-default, 1px) solid var(--accent);
	border-radius: var(--radius-control, 10px);
	font-family: var(--ui-face, var(--font-sans));
	font-size: var(--text-sm-contextual, 0.875rem);
	font-weight: var(--font-weight-medium, 500);
	text-decoration: none;
}

.wp-block-post-content .vnff-button-primary .wp-block-button__link {
	background: var(--accent);
	color: var(--accent-contrast);
}

.wp-block-post-content .vnff-button-secondary .wp-block-button__link {
	background: transparent;
	color: var(--text-primary);
	border-color: var(--border-strong, var(--border));
}

.wp-block-post-content .vnff-home-actions .wp-block-button__link:is(:hover, :focus-visible) {
	filter: brightness(1.08);
	text-decoration: none;
}

.wp-block-post-content .vnff-home-actions .wp-block-button__link:focus-visible {
	outline: 2px solid var(--text-primary);
	outline-offset: 2px;
}

.wp-block-post-content .vnff-home-latest {
	margin-top: var(--space-16, 4rem);
	padding-top: var(--space-10);
	border-top: var(--border-width-default, 1px) solid var(--border);
}

.single-post-article .wp-block-post-content .vnff-home-latest > h2.wp-block-heading {
	margin: 0 0 var(--space-8);
	font-family: var(--ui-face, var(--font-sans)) !important; /* Architrave sets heading faces with !important. */
	font-size: max(var(--text-floor-ui, 12px), 0.8125rem);
	font-weight: var(--font-weight-semibold, 600);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.vnff-home-teasers .wp-block-post-template {
	gap: var(--space-10) var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vnff-teaser {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.vnff-teaser .vnff-teaser-media {
	margin: 0 0 var(--space-2);
	overflow: hidden;
	border-radius: calc(var(--space-2-5, 10px) + var(--radius-control-base, 0px));
}

.vnff-teaser .vnff-teaser-media img {
	border: 0;
	border-radius: inherit;
	transition: transform var(--motion-duration-slow, 0.3s) var(--motion-easing-standard, ease);
}

.vnff-teaser:hover .vnff-teaser-media img {
	transform: scale(1.02);
}

.vnff-teaser .vnff-teaser-kicker {
	margin: 0 0 var(--space-1, 4px);
	color: var(--text-secondary);
	font-family: var(--font-reading, var(--font-serif));
	font-size: var(--text-reading-meta, 1rem);
	font-style: italic;
}

.vnff-teaser .vnff-teaser-kicker a {
	color: inherit;
	text-decoration: none;
}

/*
 * Architrave gives every post title inside an article the article title size with
 * !important (64px here) and trims its text box, so the teaser titles overflowed into
 * their neighbours. Teasers get their own scale; !important is needed to beat the
 * theme's !important.
 */
:is(.single-post-article, .archive-page) .vnff-teaser .wp-block-post-title.vnff-teaser-title {
	margin: 0;
	font-family: var(--font-reading, var(--font-serif));
	font-size: clamp(1.25rem, calc(var(--text-reading-body, 1.25rem) * 1.2), 1.625rem) !important;
	font-weight: var(--font-weight-semibold, 600);
	line-height: 1.22;
	letter-spacing: -0.005em;
	text-box: normal;
	text-wrap: balance;
}

.vnff-teaser .vnff-teaser-title a {
	color: var(--text-primary);
	text-decoration: none;
}

.vnff-teaser .vnff-teaser-title a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.vnff-teaser .vnff-teaser-excerpt,
.single-post-article .wp-block-post-content .vnff-teaser .vnff-teaser-excerpt p {
	margin: 0;
	color: var(--text-secondary);
	font-size: calc(var(--text-reading-body, 1.25rem) * 0.85);
	line-height: 1.5;
}

.vnff-teaser .vnff-teaser-date {
	margin: 0;
	color: var(--text-muted);
	font-family: var(--ui-face, var(--font-sans));
	font-size: var(--text-sm-contextual, 0.8125rem);
}

.single-post-article .wp-block-post-content p.vnff-home-more {
	margin-top: var(--space-10);
	font-family: var(--ui-face, var(--font-sans));
	font-size: var(--text-sm-contextual, 0.875rem);
	font-weight: var(--font-weight-medium, 500);
}


/*
 * List headers (blog, categories, tags, search) and the archive page start at the
 * same height as the page titles (About, Contact). Phones already match.
 */
@media (min-width: 1010px) {
	body.has-frame .list-head {
		padding-block-start: calc(var(--space-20) + var(--space-4));
	}

	body.has-frame .archive-page {
		--layout-reading-opening: calc(var(--space-20) + var(--space-4));
	}
}

/* ---------------------------------------------------------------- Legal documents (Complianz) */

/*
 * Privacy statement, cookie policy and imprint are Complianz documents. Its stylesheet
 * sets them in 14 px with h2 and h3 alike, and draws the cookie tables in fixed light
 * greys. Here they follow the reading typography and the colour tokens, so they work
 * in light and dark. Complianz' selectors start with an ID; #cmplz-document leads here too.
 */
#cmplz-document.cmplz-document {
	max-width: none;
	font-size: inherit;
	line-height: inherit;
}

#cmplz-document :is(p, li, td) {
	font-size: inherit;
}

#cmplz-document > p,
#cmplz-document > ul {
	margin-block: 0 var(--space-reading-paragraph);
}

#cmplz-document > ul {
	margin-inline-start: 0;
	padding-inline-start: var(--space-5);
}

#cmplz-document > ul li + li {
	margin-block-start: var(--space-2);
}

#cmplz-document :is(h2, h3, h4) {
	padding-block-end: 0;
	border: 0;
	font-weight: var(--head-weight, var(--font-weight-article-heading));
	line-height: var(--line-height-article-heading);
	letter-spacing: calc(var(--tracking-tight) + var(--head-tracking, 0em));
	text-wrap: balance;
}

#cmplz-document > h2,
#cmplz-document.impressum > h2 {
	margin-block: var(--space-reading-section) var(--space-6);
	font-size: max(var(--text-floor-content), calc(var(--text-article-h2) * var(--head-size, 1)));
}

#cmplz-document > h3,
#cmplz-document.impressum > h3 {
	margin-block: var(--space-10) var(--space-4);
	font-size: max(var(--text-floor-content), calc(var(--text-article-h4) * var(--head-size, 1)));
}

#cmplz-document > :is(h2, h3):first-child {
	margin-block-start: 0;
}

#cmplz-document .cmplz-subtitle {
	margin-block-start: var(--space-6);
}

/* Links: the theme's focus ring instead of a black box; a new-tab arrow in the text colour. */
#cmplz-document a:focus {
	padding: 0;
	border: 0;
}

#cmplz-document a[target="_blank"]::after {
	content: "\2197" / "";
	margin: 0 0 0 0.15em;
	font-family: var(--font-sans);
	font-size: 0.8em;
}

/* Dropdowns (services, cookies): quiet panels in the interface face. */
#cmplz-document .cmplz-dropdown,
#cmplz-document.cmplz-document #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
	margin-block: 0 var(--space-3);
	overflow: hidden;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-control);
	background: var(--surface-subtle);
	font-family: var(--font-sans);
	font-size: var(--text-reading-meta);
	line-height: 1.5;
}

#cmplz-document .cmplz-dropdown summary,
#cmplz-document.cmplz-document #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	background: transparent;
	color: var(--text-primary);
}

#cmplz-document .cmplz-dropdown summary:hover,
#cmplz-document.cmplz-document #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header:hover {
	background: var(--surface-hover);
}

#cmplz-document .cmplz-dropdown summary:focus-visible {
	outline: var(--focus-ring-width, 2px) solid var(--focus);
	outline-offset: -2px;
}

#cmplz-document .cmplz-dropdown[open] summary {
	border-block-end: 1px solid var(--border-subtle);
}

#cmplz-document .cmplz-dropdown summary h3,
#cmplz-document .cmplz-categories .cmplz-category-title {
	padding: 0;
	font-family: var(--head-face, var(--font-reading));
	font-weight: var(--head-weight, var(--font-weight-article-heading));
	line-height: var(--line-height-article-heading);
	font-size: max(var(--text-floor-content), calc(var(--text-article-h5) * var(--head-size, 1)));
}

#cmplz-document .cmplz-dropdown summary p {
	color: var(--text-muted);
	font-size: var(--text-reading-meta);
}

/* "Always active": Complianz colours it green (too faint on dark) through its own variables. */
#cmplz-document {
	--cmplz_category_header_always_active_color: var(--text-muted);
	--cmplz_category_header_active_font_size: var(--text-reading-meta);
}

/* Complianz' chevron is a dark image; this one takes the text colour. */
#cmplz-document .cmplz-dropdown summary div::after {
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

#cmplz-document .cmplz-categories .cmplz-icon svg {
	fill: currentColor;
}

#cmplz-document.cmplz-document #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description {
	padding: var(--space-3) var(--space-4) var(--space-4);
	border-block-start: 1px solid var(--border-subtle);
}

#cmplz-document .cmplz-dropdown :is(.cmplz-service-description, .cmplz-sharing-data) {
	padding: var(--space-4) var(--space-4) 0;
}

#cmplz-document .cmplz-dropdown :is(p, a, li) {
	font-size: inherit;
}

#cmplz-document .cmplz-dropdown :is(p, h4, ul) {
	padding: 0;
}

/* Labels inside the panels; Architrave sets every content heading's face with !important. */
#cmplz-document .cmplz-dropdown h4 {
	margin: 0 0 var(--space-1);
	font-family: var(--font-sans) !important;
	font-size: inherit;
	font-weight: 600;
	letter-spacing: normal;
}

#cmplz-document .cmplz-dropdown h5 {
	font-family: var(--font-sans) !important;
	font-size: inherit;
	font-weight: 600;
}

/* The cookie table: hairlines from the grid gap, cells on the panel colour. */
#cmplz-document .cmplz-dropdown .cookies-per-purpose {
	margin: var(--space-4);
	overflow: hidden;
	border: 1px solid var(--border-subtle);
	border-radius: calc(var(--radius-control) - 4px);
	background: var(--border-subtle);
}

#cmplz-document .cmplz-dropdown .cookies-per-purpose div {
	padding: var(--space-2) var(--space-3);
	background: var(--surface-subtle);
	overflow-wrap: anywhere;
}

#cmplz-document .cmplz-dropdown .cookies-per-purpose :is(.purpose, .name-header, .retention-header, .function-header) {
	background: var(--surface-raised);
	color: var(--text-secondary);
}

#cmplz-document .cmplz-dropdown .cookies-per-purpose .purpose h4 {
	margin: 0;
}

/* ---------------------------------------------------------------- Cookie settings button */

/* includes/consent-button.php: Complianz' floating tab moves into the sidebar foot and phone menu. */
#cmplz-manage-consent {
	display: none !important;
}

.rail-foot:has(> .vnff-consent-square) {
	grid-template-columns: minmax(0, 1fr) auto auto;
}

.rail-foot > .vnff-consent-square {
	grid-column: 2;
	display: inline-flex;
	margin: 0;
}

.rail-foot:has(> .vnff-consent-square) > .rail-foot-design {
	grid-column: 3;
}

.rail-foot > .vnff-consent-square > .paper-stack-btn {
	width: var(--layout-row-min-height);
	height: var(--layout-row-min-height);
	border-radius: var(--radius-row, var(--radius-control));
}

/* The cookie crumbs are dots; a heavier stroke keeps them visible at icon size. */
[data-vnff-consent] .vnff-cookie-crumb {
	stroke-width: 2.5;
}

.mobile-panel-foot {
	flex-wrap: wrap;
}