/*
Theme Name: Quitte-Art V4
Theme URI: https://quitte.raschele.it/
Author: Quitte-Art
Description: Gestaltungsstudie V4 für Quitte-Art.
Version: 0.9.24
Template: quitte-art
Text Domain: quitte-art
*/

@font-face {
	font-family: 'Quitte Knewave';
	/* Fallback für ältere Templates; V4 verwendet die lokale DM Serif Display. */
	src: url('assets/fonts/proposals/Knewave-Regular.ttf') format('truetype');
	font-display: swap;
	font-style: normal;
	font-weight: 400;
}
@font-face {
	font-family: 'Quitte DM Serif Display';
	src: url('assets/fonts/proposals/DMSerifDisplay-Regular.ttf') format('truetype');
	font-display: swap;
	font-style: normal;
	font-weight: 400;
}

:root {
	--v2-paper: #f7f2e8;
	--v2-ink: #16253c;
	--v2-blue: #4f8bad;
	--v2-coral: #d86c56;
	--v2-marker: 'Quitte DM Serif Display', Georgia, 'Times New Roman', serif;
}

body { background: var(--v2-paper); color: var(--v2-ink); }
.site-header {
	position: absolute;
	top: var(--site-admin-offset, 0px);
	padding: 1rem clamp(1rem, 4vw, 3.5rem);
	background: transparent;
	color: var(--v2-ink);
}
.site-header__actions { display: flex; align-items: center; gap: .8rem; }
.brand { font-family: var(--v2-marker); font-size: 1.3rem; letter-spacing: .04em; }
.menu-toggle, .primary-nav a { font-family: var(--v2-marker); font-size: 1.1rem; font-weight: 400; }
.menu-toggle { border: 0; border-bottom: 2px solid currentColor; border-radius: 24% 8% 31% 12%; background: transparent; }
.primary-nav a { font-size: 1.1rem; text-decoration-thickness: 2px; text-underline-offset: .22rem; }
.site-header__edit { border: 2px solid currentColor; border-radius: 14% 5% 15% 7%; padding: .25rem .55rem; background: var(--v2-paper); box-shadow: 2px 2px 0 var(--v2-ink); color: inherit; font-family: var(--v2-marker); font-size: 1rem; line-height: 1.1; text-decoration: none; }
.site-header__edit:hover, .site-header__edit:focus-visible { background: var(--v2-coral); box-shadow: 3px 3px 0 var(--v2-ink); transform: translate(-1px, -1px) rotate(-1deg); }
.v2-landing {
	position: relative;
	display: grid;
	min-height: 100svh;
	place-items: center;
	/* Die Überschrift darf nie am Rahmen der Landingpage abgeschnitten werden. */
	overflow: visible;
	isolation: isolate;
	padding: 5.4rem clamp(1rem, 4vw, 4rem) 1.5rem;
	background: var(--v2-paper);
}
.v2-landing::before {
	position: absolute;
	z-index: -2;
	inset: 0;
	background: radial-gradient(circle at 10% 85%, rgba(79,139,173,.12), transparent 28%), radial-gradient(circle at 93% 14%, rgba(216,108,86,.1), transparent 25%);
	content: '';
}
.v2-landing::after {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(115deg, rgba(247,242,232,.86), rgba(247,242,232,.49) 54%, rgba(247,242,232,.82));
	content: '';
}
.v2-landing > div { position: relative; z-index: 1; width: 100%; max-width: 100%; text-align: center; }
.v2-margin-wash { position: absolute; z-index: 0; margin: 0; overflow: hidden; pointer-events: none; mix-blend-mode: multiply; filter: saturate(.8) contrast(.9); }
.v2-margin-wash img { width: 100%; height: 100%; object-fit: cover; opacity: .48; }
.v2-margin-wash--violet { top: -7%; left: -9%; width: min(31rem, 41vw); aspect-ratio: .95; transform: rotate(-8deg); clip-path: polygon(3% 18%, 76% 1%, 100% 19%, 95% 79%, 70% 100%, 8% 91%); }
.v2-margin-wash--violet img { object-position: 23% 44%; }
.v2-margin-wash--ochre { right: -8%; bottom: -14%; width: min(34rem, 44vw); aspect-ratio: 1.12; transform: rotate(7deg); clip-path: polygon(7% 5%, 91% 14%, 100% 72%, 78% 97%, 13% 91%, 1% 38%); }
.v2-margin-wash--ochre img { object-position: 43% 48%; }
.v2-margin-wash--cyan { top: 58%; right: -12%; width: min(19rem, 28vw); aspect-ratio: .82; transform: rotate(12deg); clip-path: polygon(12% 0, 92% 12%, 100% 82%, 72% 100%, 2% 91%, 6% 25%); }
.v2-margin-wash--cyan img { object-position: 55% 53%; }
.v2-title {
	display: inline-flex;
	flex-wrap: nowrap;
	justify-content: center;
	max-width: none;
	margin: 0;
	font-family: var(--v2-marker);
	font-size: min(18svh, 10.2vw);
	font-weight: 400;
	letter-spacing: 0;
	line-height: .87;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}
.v2-title__letter {
	display: inline-block;
	/*
	 * Knewave hat bewusst über das Zeichenfeld hinauslaufende Pinselspuren.
	 * Der Freiraum bleibt Teil der animierten Fläche und verhindert, dass ein
	 * Browser beim Einzelbuchstaben-Compositing diese Spitzen beschneidet.
	 */
	box-sizing: content-box;
	margin: -.08em -.1em -.1em -.06em;
	padding: .08em .1em .1em .06em;
	overflow: visible;
	animation: v2-marker-drift var(--loop, 5s) ease-in-out var(--start, 0s) infinite;
	transform: rotate(var(--rest, 0deg));
	transform-origin: center;
}
.v2-title__letter--dash { margin-inline: .02em; color: var(--v2-coral); }
.v2-title__letter:nth-of-type(1) { --loop: 5.3s; --start: -.4s; --rest: -2deg; --x: .015em; --y: -.04em; --turn: 2deg; }
.v2-title__letter:nth-of-type(2) { --loop: 6.8s; --start: -2.2s; --rest: 1deg; --x: -.015em; --y: .025em; --turn: -1.6deg; }
.v2-title__letter:nth-of-type(3) { --loop: 4.7s; --start: -1.4s; --rest: -1.4deg; --x: .018em; --y: .03em; --turn: 1.1deg; }
.v2-title__letter:nth-of-type(4) { --loop: 7.2s; --start: -3.9s; --rest: 1.8deg; --x: -.02em; --y: -.03em; --turn: -1.5deg; }
.v2-title__letter:nth-of-type(5) { --loop: 5.8s; --start: -1.7s; --rest: -.4deg; --x: .014em; --y: .04em; --turn: 1.3deg; }
.v2-title__letter:nth-of-type(6) { --loop: 6.3s; --start: -2.7s; --rest: 2deg; --x: -.012em; --y: -.03em; --turn: -2.2deg; }
.v2-title__letter:nth-of-type(7) { --loop: 4.9s; --start: -3.1s; --rest: -1.8deg; --x: .02em; --y: .026em; --turn: 2deg; }
.v2-title__letter:nth-of-type(8) { --loop: 7.8s; --start: -.8s; --rest: 1.1deg; --x: -.018em; --y: -.035em; --turn: -1.1deg; }
.v2-title__letter:nth-of-type(9) { --loop: 5.5s; --start: -1.8s; --rest: -.7deg; --x: .012em; --y: .03em; --turn: 1.7deg; }
.v2-title__letter:nth-of-type(10) { --loop: 6.1s; --start: -4.2s; --rest: 1.5deg; --x: -.02em; --y: .02em; --turn: -1.8deg; }
.v2-title__letter:nth-of-type(11) { --loop: 4.5s; --start: -2.6s; --rest: -1.1deg; --x: .017em; --y: -.04em; --turn: 1.5deg; }
.v2-title__letter:nth-of-type(12) { --loop: 7.5s; --start: -.7s; --rest: 1.7deg; --x: -.012em; --y: .036em; --turn: -1.4deg; }
.v2-title__letter:nth-of-type(13) { --loop: 5.1s; --start: -3.3s; --rest: -.8deg; --x: .017em; --y: -.025em; --turn: 1.2deg; }
.v2-title__letter:nth-of-type(14) { --loop: 6.6s; --start: -1.3s; --rest: 1.2deg; --x: -.015em; --y: .032em; --turn: -1.6deg; }
@keyframes v2-marker-drift {
	0%, 100% { transform: translate(0, 0) rotate(var(--rest)); }
	47% { transform: translate(var(--x), var(--y)) rotate(calc(var(--rest) + var(--turn))); }
	72% { transform: translate(calc(var(--x) * -.45), calc(var(--y) * -.35)) rotate(calc(var(--rest) - var(--turn))); }
}
.v2-landing__line { max-width: 34rem; margin: 1rem auto 0; font-family: Georgia, serif; font-size: clamp(1rem, 2vw, 1.35rem); text-align: center; }
.v2-landing__links { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; gap: .9rem; margin-top: 1.6rem; }
.button { border: 2px solid var(--v2-ink); border-radius: 16% 5% 14% 7%; background: var(--v2-paper); color: var(--v2-ink); font-family: var(--v2-marker); font-size: 1.1rem; font-weight: 400; letter-spacing: .015em; line-height: 1.1; box-shadow: 2px 2px 0 var(--v2-ink); }
.button:hover, .button:focus-visible { background: var(--v2-coral); color: var(--v2-ink); box-shadow: 4px 3px 0 var(--v2-ink); transform: translate(-1px, -1px) rotate(-.5deg); }
.button--plain { background: transparent; }
.page-shell, .archive-hero, .single-work { min-height: 70vh; padding: clamp(8rem, 15vw, 12rem) clamp(1rem, 8vw, 8rem) clamp(4rem, 10vw, 8rem); background: var(--v2-paper); }
.page-shell__content { max-width: 48rem; font-family: Georgia, serif; font-size: clamp(1.12rem, 2vw, 1.38rem); line-height: 1.5; }
.single-work__content { font-family: var(--sans); }
.page-shell h1, .archive-hero h1, .single-work h1 { max-inline-size: 100%; overflow-wrap: anywhere; font-family: var(--v2-marker); font-weight: 400; hyphens: manual; letter-spacing: -.03em; text-wrap: pretty; }
.single-work__grid > * { min-width: 0; }
.page-shell h1 { font-size: clamp(3rem, 10vw, 7rem); line-height: .95; }
.page-shell__content > * + * { margin-top: 1.2em; }
.site-footer { background: var(--v2-ink); color: var(--v2-paper); }
.site-footer a { color: inherit; font-family: var(--v2-marker); font-weight: 400; }
.footer-nav li { transform: rotate(-.6deg); }
@media (max-width: 42rem) {
	.primary-nav { background: var(--v2-paper); border: 2px solid var(--v2-ink); border-radius: 9% 4% 11% 6%; box-shadow: 3px 3px 0 var(--v2-ink); }
	.primary-nav a { display: block; padding: .35rem 0; }
}
@media (max-width: 42rem) {
	.v2-margin-wash--violet { top: -3%; left: -25%; width: min(23rem, 65vw); opacity: .55; }
	.v2-margin-wash--ochre { right: -26%; bottom: -6%; width: min(24rem, 70vw); opacity: .48; }
	.v2-margin-wash--cyan { display: none; }
}
@media (prefers-reduced-motion: reduce) { .v2-title__letter { animation: none; } }

/*
 * WebKit/Safari zeichnet transformierte Einzelglyphen dieser TTF gelegentlich
 * an ihrer rechten Rastergrenze ab. Relative Versätze erhalten die einzelnen,
 * unkoordinierten Bewegungen, ohne aus jedem Buchstaben eine Textur zu machen.
 */
@media (prefers-reduced-motion: no-preference) {
	.is-safari .v2-title__letter {
		animation-name: v2-marker-drift-safari;
		transform: none;
	}
}
@keyframes v2-marker-drift-safari {
	0%, 100% { left: 0; top: 0; }
	47% { left: var(--x); top: var(--y); }
	72% { left: calc(var(--x) * -.45); top: calc(var(--y) * -.35); }
}

/* V4: Aquarellspuren – kein Motiv, nur Material und Farbe. */
.v4-landing::before { z-index: -1; background: var(--v4-random-wash-png) center / cover no-repeat; opacity: .36; filter: saturate(.82) contrast(.93); }
.v4-landing::after { z-index: 0; background: rgba(247,242,232,.5); }
.v4-landing__portrait {
	position: absolute;
	z-index: 1;
	right: clamp(1rem, 4vw, 4rem);
	bottom: clamp(2rem, 5vh, 4rem);
	width: min(47vw, 37rem);
	aspect-ratio: 4 / 3;
	margin: 0;
	mix-blend-mode: multiply;
	filter: drop-shadow(5px 7px 0 rgba(22,37,60,.11));
	transform: rotate(1.2deg);
}
.v4-landing__portrait > picture,
.v4-landing__portrait > picture > img { display: block; width: 100%; height: 100%; }
.v4-landing__portrait > picture > img { object-fit: contain; }
.v4-landing__eyes { display: none; position: absolute; inset: 0; pointer-events: none; }
.v4-landing__eye {
	position: absolute;
	width: 10%;
	aspect-ratio: 2.6;
	overflow: hidden;
	/* Nur die originale Augenfläche wird mit Bildhintergrund ersetzt. */
	clip-path: polygon(0 50%, 13% 25%, 33% 11%, 57% 10%, 82% 23%, 100% 50%, 84% 74%, 59% 90%, 34% 90%, 12% 74%);
}
.v4-landing__eye-background { position: absolute; inset: 0; overflow: hidden; }
.v4-landing__eye-background picture,
.v4-landing__pupil picture { display: block; width: 100%; height: 100%; }
.v4-landing__eye-background img {
	position: absolute;
	left: -151%;
	top: -760%;
	width: 1000%;
	max-width: none;
	height: auto;
}
.v4-landing__pupil {
	position: absolute;
	left: 33%;
	top: 9%;
	width: 25%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	clip-path: circle(46% at 50% 50%);
	transform: translate(var(--eye-x, 0px), var(--eye-y, 0px));
	transition: transform 100ms linear;
}
.v4-landing__pupil img {
	position: absolute;
	left: -1488%;
	top: -1220%;
	width: 4000%;
	max-width: none;
	height: auto;
}
.v4-landing__eye--left { left: 34%; top: 40.2%; }
.v4-landing__eye--right { left: 53.8%; top: 40.2%; }
.v4-landing__eye--right .v4-landing__eye-background img { left: -790%; }
.v4-landing__eye--right .v4-landing__pupil img { left: -2280%; }
.v4-landing > div { z-index: 2; }
.v4-landing .v2-title { font-size: min(19svh, 10.8vw); letter-spacing: .005em; }
.v4-landing .v2-title__letter--dash { color: var(--v2-coral); }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.v4-landing__eyes { display: block; }
}
@media (max-width: 42rem) {
	.v4-landing { inline-size: 100vw; max-inline-size: 100vw; overflow-x: clip; }
	.v4-landing > div { inline-size: calc(100vw - 2rem); }
	.v4-landing::before { background-size: auto 100%; background-position: center; opacity: .3; }
	.v4-landing__portrait {
		right: 50%;
		bottom: max(.75rem, env(safe-area-inset-bottom));
		width: min(70vw, 22rem);
		transform: translateX(50%) rotate(1.2deg);
	}
	/* Fallback ohne JavaScript: die ganze Wortmarke bleibt auf einer Zeile sichtbar. */
	.v4-landing .v2-title { display: flex; justify-content: center; width: 100%; font-size: 6.1vw; letter-spacing: 0; }
}

/* Dieselbe ruhige, zufällige Aquarellatmosphäre begleitet die Inhaltsseiten. */
body.post-type-archive-quitte_work,
body.page,
body.single-quitte_work {
	background-color: var(--v2-paper);
	background-image: linear-gradient(rgba(247,242,232,.75), rgba(247,242,232,.85)), var(--v4-random-wash-png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
body.post-type-archive-quitte_work {
	background-image: none;
}
body.post-type-archive-quitte_work .archive-hero {
	background-color: var(--v2-paper);
	background-image: linear-gradient(rgba(247,242,232,.62), rgba(247,242,232,.88)), var(--v4-archive-wash-top-png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
body.post-type-archive-quitte_work .section {
	background-color: var(--v2-paper);
	background-image: linear-gradient(rgba(247,242,232,.8), rgba(247,242,232,.96)), var(--v4-archive-wash-bottom-png);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
@supports (background-image: image-set(url("") type("image/webp"))) {
	.v4-landing::before {
		background-image: image-set(var(--v4-random-wash-webp) type("image/webp"), var(--v4-random-wash-png) type("image/png"));
	}
	body.post-type-archive-quitte_work,
	body.page,
	body.single-quitte_work {
		background-image: linear-gradient(rgba(247,242,232,.75), rgba(247,242,232,.85)), image-set(var(--v4-random-wash-webp) type("image/webp"), var(--v4-random-wash-png) type("image/png"));
	}
	body.post-type-archive-quitte_work .archive-hero {
		background-image: linear-gradient(rgba(247,242,232,.62), rgba(247,242,232,.88)), image-set(var(--v4-archive-wash-top-webp) type("image/webp"), var(--v4-archive-wash-top-png) type("image/png"));
	}
	body.post-type-archive-quitte_work .section {
		background-image: linear-gradient(rgba(247,242,232,.8), rgba(247,242,232,.96)), image-set(var(--v4-archive-wash-bottom-webp) type("image/webp"), var(--v4-archive-wash-bottom-png) type("image/png"));
	}
	.archive-scroll-cue__arrow {
		background-image: linear-gradient(rgba(247,242,232,.22), rgba(247,242,232,.22)), image-set(var(--v4-archive-wash-bottom-webp) type("image/webp"), var(--v4-archive-wash-bottom-png) type("image/png"));
	}
}
.archive-scroll-cue {
	display: flex;
	align-items: center;
	width: fit-content;
	flex-direction: column;
	gap: .35rem;
	margin: clamp(2rem, 6vw, 4.5rem) auto 0;
	color: var(--v2-ink);
	font-family: var(--v2-marker);
	font-size: 1.05rem;
	line-height: 1;
	text-decoration: none;
	transform: rotate(-1deg);
}
.archive-scroll-cue__arrow {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 4rem;
	border: 2px solid currentColor;
	border-radius: 47% 52% 43% 57% / 45% 38% 62% 55%;
	background: linear-gradient(rgba(247,242,232,.22), rgba(247,242,232,.22)), var(--v4-archive-wash-bottom-png);
	background-position: center;
	background-size: cover;
	box-shadow: 2px 2px 0 currentColor;
	font-family: Georgia, serif;
	font-size: 3rem;
	line-height: .7;
}
.archive-scroll-cue__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18rem; }
.archive-scroll-cue:hover,
.archive-scroll-cue:focus-visible { color: var(--v2-coral); }
#werkarchiv { scroll-margin-top: 1rem; }
@media (prefers-reduced-motion: no-preference) {
	.archive-scroll-cue { animation: v4-scroll-cue 2.8s ease-in-out infinite; }
}
@keyframes v4-scroll-cue {
	0%, 100% { transform: translateY(0) rotate(-1deg); }
	50% { transform: translateY(.55rem) rotate(1.5deg); }
}
body.page .page-shell,
body.single-quitte_work .single-work {
	background: transparent;
}

/* Kurze Seiten enden mit dem farbigen Abschluss am unteren Fensterrand. */
body.page,
body.single-quitte_work {
	display: grid;
	min-height: 100svh;
	grid-template-rows: minmax(min-content, 1fr) auto;
}

.single-work__image { position: relative; }
.work-zoom {
	position: absolute;
	right: .75rem;
	bottom: .75rem;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 2.75rem;
	padding: .42rem .7rem;
	border: 2px solid var(--v2-ink);
	border-radius: 26% 8% 21% 11%;
	background: rgba(247,242,232,.94);
	color: var(--v2-ink);
	font-family: var(--v2-marker);
	font-size: 1.08rem;
	line-height: 1;
	box-shadow: 2px 2px 0 var(--v2-ink);
	cursor: zoom-in;
}
.work-zoom svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2.3; }
.work-zoom:hover,
.work-zoom:focus-visible { background: var(--v2-coral); outline: 3px solid var(--v2-ink); outline-offset: 3px; transform: rotate(-1deg); }
.work-lightbox {
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	border: 0;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(22,37,60,.96);
	color: var(--v2-paper);
}
.work-lightbox::backdrop { background: rgba(22,37,60,.72); }
.work-lightbox img { display: block; width: 100%; height: 100%; object-fit: contain; }
.work-lightbox__close {
	position: absolute;
	top: max(1rem, env(safe-area-inset-top));
	right: max(1rem, env(safe-area-inset-right));
	min-height: 2.75rem;
	padding: .42rem .7rem;
	border: 2px solid var(--v2-paper);
	border-radius: 24% 8% 19% 11%;
	background: var(--v2-ink);
	color: var(--v2-paper);
	font-family: var(--v2-marker);
	font-size: 1.08rem;
	cursor: pointer;
}
.work-lightbox__close:focus-visible { outline: 3px solid var(--v2-coral); outline-offset: 3px; }
.site-version { margin-inline-start: .35rem; font-family: ui-monospace, monospace; font-size: .72rem; letter-spacing: .05em; opacity: .7; }
@media (max-width: 42rem) {
	.single-work { padding: 6rem 1rem 3rem; }
	.single-work__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; width: calc(100vw - 2rem); max-width: 100%; }
	.single-work__grid > div,
	.single-work__image,
	.single-work__image img,
	.work-zoom { box-sizing: border-box; max-width: 100%; width: 100%; }
	.single-work__image { display: flex; flex-direction: column; gap: .7rem; }
	.single-work__image img { max-height: none; }
	.single-work h1 { font-size: clamp(1.95rem, 8.6vw, 4rem); letter-spacing: -.05em; }
	.work-zoom { position: static; align-self: stretch; justify-content: center; margin: 0; }
	.single-work__meta { overflow-wrap: anywhere; }
	.work-lightbox { padding: 4.6rem 1rem 1rem; }
	body.post-type-archive-quitte_work .archive-hero,
	body.post-type-archive-quitte_work .section { background-size: auto 58%; }
}