/*
Theme Name: Jason Romeyko
Theme URI: https://romeyko.com
Author: Levels
Author URI: https://levels.dev
Description: Block-Theme für romeyko.com – Leder, Messing, Textur. Sektionen als ACF-Pro-Blöcke.
Version: 0.4.5
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: romeyko
*/

/* ================================================================ Tokens */
:root {
	--espresso: #170f0a;
	--leather: #2a1a11;
	--saddle: #4a2e1d;
	--cognac: #8a5532;
	--brass: #b6935a;
	--brass-hi: #e3c68f;
	--brass-lo: #7d6236;
	--bone: #efe6d6;
	--bone-dim: #b9ab96;
	--gutter: clamp(16px, 3vw, 48px);
	--gap: clamp(12px, 2vw, 28px);
	--ease: cubic-bezier(.16, 1, .3, 1);
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--pores: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='turbulence' baseFrequency='.22 .26' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.1 .55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
	--tone-bw: grayscale(1) sepia(.38) contrast(1.08) brightness(.9);
}

/* ================================================================ Base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--espresso); }
body {
	margin: 0;
	font-family: "Antarctica VAR", sans-serif;
	font-weight: 370;
	font-stretch: 96%;
	font-variation-settings: "ital" 0, "CNTR" 33;
	font-size: 17px;
	line-height: 1.55;
	color: var(--bone);
	background-color: var(--leather);
	background-image: var(--grain), var(--pores), radial-gradient(120% 80% at 20% 0%, #3a2416 0%, transparent 60%);
	background-blend-mode: multiply, soft-light, normal;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6, .h {
	margin: 0;
	font-weight: 530;
	font-stretch: 100%;
	font-variation-settings: "ital" 0, "CNTR" 0;
}
figure { margin: 0; }
::selection { background: var(--brass); color: var(--espresso); }
:focus-visible { outline: 1px solid var(--brass-hi); outline-offset: 4px; }

.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + *, main > * + * { margin-block-start: 0; }
main.rm-main { margin: 0; }

.cap { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.6; }
.brass {
	background: linear-gradient(100deg, var(--brass-lo) 0%, var(--brass-hi) 28%, var(--brass) 48%, var(--brass-lo) 70%, var(--brass-hi) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.screen-reader-text, .sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip-link:focus { position: fixed !important; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--bone); color: var(--espresso); }

/* Fließtext aus dem Editor */
.rm-prose { color: var(--bone-dim); max-width: 62ch; }
.rm-prose > * + * { margin-top: 1.1em; }
.rm-prose h2, .rm-prose h3, .rm-prose h4 { color: var(--bone); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; margin-top: 2em; }
.rm-prose h2:first-child, .rm-prose h3:first-child { margin-top: 0; }
.rm-prose strong { color: var(--bone); font-weight: 530; }
.rm-prose a { color: var(--brass-hi); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .6s var(--ease); }
.rm-prose a:hover { background-size: 0 1px; background-position: 100% 100%; }
.rm-prose ul { padding-left: 1.1em; }
.rm-prose li::marker { color: var(--brass); }
.rm-prose blockquote { margin: 1.6em 0; padding-left: 24px; border-left: 1px solid var(--brass); color: var(--bone); font-size: 1.25em; line-height: 1.35; }

/* ================================================================ Bewegung (nur mit JS, siehe assets/js/motion.js) */
.js [data-r] { opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity 1.4s var(--ease), transform 1.6s var(--ease); transition-delay: var(--d, 0s); }
.js [data-r].in { opacity: 1; transform: none; }
.lines .ln { display: block; }
.js .lines .ln { overflow: hidden; padding: .14em 0 .12em; margin: -.14em 0 -.12em; }
.js .lines .ln > span { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform 1.5s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0s)); }
.js .lines.in .ln > span { transform: none; }
.js .curtain { clip-path: inset(100% 0 0 0); transition: clip-path 1.8s var(--ease); transition-delay: var(--d, 0s); }
.js .curtain img { transform: scale(1.18); transition: transform 2.4s var(--ease); transition-delay: var(--d, 0s); }
.js .curtain.in { clip-path: inset(0 0 0 0); }
.js .curtain.in img { transform: scale(1); }
.js .curtain img.par { transform: none; transition: none; }
.js .hair { transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease); transition-delay: var(--d, 0s); }
.js .hair.in { transform: none; }
.par { will-change: transform; }
.hair { display: block; height: 1px; background: linear-gradient(90deg, var(--brass), rgba(182, 147, 90, .15)); }

/* Bild, das per Parallaxe etwas größer als sein Rahmen ist */
.rm-frame { position: relative; overflow: hidden; background: var(--saddle); }
.rm-frame > img { width: 100%; height: 100%; object-fit: cover; }
.rm-frame > img.par { position: relative; top: -10%; height: 120%; }
.tone-bw img { filter: var(--tone-bw); }

/* ================================================================ Schlagschatten unter Bildern (Kundenentscheid 2026-11-12) */
.rm-frame, .rm-video { box-shadow: 0 44px 90px -14px rgba(0, 0, 0, .9), 0 14px 30px -4px rgba(0, 0, 0, .6); }
/* Bildunterschriften liegen über dem Schatten (das Bild bildet wegen clip-path eine eigene Ebene). */
figcaption { position: relative; }
/* Der Vorhang (clip-path) zeigt nach dem Aufdecken auch den Schatten. */
.js .curtain.in { clip-path: inset(-50px -80px -140px -80px); }

/* ================================================================ Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 28px;
	border: 1px solid var(--brass);
	background: none;
	color: var(--brass-hi);
	font-family: inherit;
	cursor: pointer;
	transition: background .5s var(--ease), color .5s;
}
.btn:hover, .btn:focus-visible { background: var(--brass); color: var(--espresso); }
.btn i { position: relative; width: 28px; height: 1px; background: currentColor; transition: width .6s var(--ease); }
.btn:hover i { width: 40px; }
.btn i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.btn.is-back i::after { right: auto; left: 0; transform: rotate(-135deg); }

/* ================================================================ Sektionen (gemeinsam) */
.rm-block { position: relative; padding: clamp(90px, 11vw, 180px) var(--gutter); }
.rm-kicker { display: flex; align-items: center; gap: 18px; color: var(--brass); margin-bottom: clamp(28px, 4vw, 56px); }
.rm-kicker .hair { width: 90px; flex: none; }
.rm-bg-espresso { background-color: var(--espresso); }
.rm-bg-cognac { background-color: var(--cognac); background-image: var(--grain), var(--pores); background-blend-mode: multiply, soft-light; }
.rm-bg-cognac .brass { background: none; color: var(--espresso); }
.rm-bg-cognac .rm-kicker, .rm-bg-cognac .rm-prose { color: rgba(239, 230, 214, .82); }

/* ================================================================ Header */
.rm-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 18px var(--gutter);
	border-bottom: 1px solid transparent;
	transition: background .6s var(--ease), border-color .6s, padding .6s var(--ease);
}
.admin-bar .rm-header { top: var(--wp-admin--admin-bar--height, 32px); }
.rm-header.scrolled { background: rgba(23, 15, 10, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: rgba(182, 147, 90, .22); padding-block: 12px; }
.rm-logo {
	display: block;
	width: 104px;
	aspect-ratio: 634.3 / 249.27;
	background: var(--bone);
	-webkit-mask: var(--logo) center / contain no-repeat;
	mask: var(--logo) center / contain no-repeat;
	transition: opacity .6s var(--ease);
}
.rm-nav { display: flex; gap: clamp(14px, 2.4vw, 36px); }
.rm-nav a { position: relative; color: var(--bone-dim); transition: color .4s; }
.rm-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease); }
.rm-nav a:hover, .rm-nav a[aria-current] { color: var(--bone); }
.rm-nav a:hover::after, .rm-nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.rm-nav sup { font-size: 8px; margin-left: 2px; color: var(--brass); }
.rm-header__end { justify-self: end; display: flex; align-items: center; gap: 12px; }
.rm-contact { border: 1px solid var(--brass); padding: 9px 16px; color: var(--brass-hi); transition: background .5s var(--ease), color .5s; }
.rm-contact:hover { background: var(--brass); color: var(--espresso); }
.rm-burger { display: none; position: relative; width: 44px; height: 44px; border: 0; background: none; color: var(--bone); cursor: pointer; }
.rm-burger span { position: absolute; left: 11px; right: 11px; height: 1px; background: currentColor; transition: transform .6s var(--ease), top .6s var(--ease); }
.rm-burger span:first-child { top: 18px; }
.rm-burger span:last-child { top: 25px; }
.menu-open .rm-burger span:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .rm-burger span:last-child { top: 21px; transform: rotate(-45deg); }

/* Menü-Overlay (mobil) */
.rm-overlay {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 110px var(--gutter) 40px;
	background-color: var(--espresso);
	background-image: var(--grain);
	background-blend-mode: multiply;
	clip-path: inset(0 0 100% 0);
	visibility: hidden;
	transition: clip-path .9s var(--ease), visibility 0s .9s;
}
.menu-open .rm-overlay { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .9s var(--ease); }
.rm-overlay nav { display: flex; flex-direction: column; gap: 6px; }
.rm-overlay nav a { font-size: clamp(34px, 9vw, 64px); line-height: 1.1; font-weight: 530; font-stretch: 100%; font-variation-settings: "ital" 0, "CNTR" 0; opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.rm-overlay nav a sup { font-size: 12px; color: var(--brass); vertical-align: super; margin-left: 4px; }
.menu-open .rm-overlay nav a { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i, 0) * 60ms); }
.rm-overlay .cap { display: flex; justify-content: space-between; margin-top: 48px; padding-top: 18px; border-top: 1px solid rgba(182, 147, 90, .3); color: var(--bone-dim); }
.menu-open { overflow: hidden; }

/* ================================================================ Footer */
.rm-footer {
	background-color: var(--cognac);
	background-image: var(--grain), var(--pores);
	background-blend-mode: multiply, soft-light;
	color: var(--bone);
	padding: clamp(70px, 9vw, 140px) var(--gutter) 28px;
	overflow: hidden;
}
.rm-footer__big { font-size: clamp(46px, 8vw, 140px); line-height: .95; letter-spacing: -.01em; }
.rm-footer__mail { display: inline-flex; margin-top: clamp(36px, 4vw, 56px); border-color: var(--bone); color: var(--bone); }
.rm-footer__mail:hover { background: var(--bone); color: var(--cognac); }
.rm-footer__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: clamp(56px, 7vw, 100px); padding-top: 20px; border-top: 1px solid rgba(239, 230, 214, .35); }
.rm-footer__row nav { display: flex; gap: 22px; flex-wrap: wrap; }
.rm-footer__row a { transition: opacity .4s; }
.rm-footer__row a:hover { opacity: .65; }

/* ================================================================ Labor-Look (Blöcke lab-*: Übercreativity) */
.rm-lab {
	--steel: #9aa4a8;
	--steel-hi: #dfe5e6;
	--grid: rgba(182, 147, 90, .09);
	background-color: #120e0b;
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px),
		var(--grain);
	background-size: 80px 80px, 80px 80px, auto;
	background-position: -1px -1px, -1px -1px, 0 0;
	background-blend-mode: normal, normal, multiply;
	overflow: hidden;
}
.rm-lab .cap { font-variant-numeric: tabular-nums; }
.rm-lab__code { color: var(--steel); }
/* Auf Labor-Seiten: engere Abstände zwischen den Sektionen. */
.rm-lab-page .rm-block { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); }
.rm-lab-page .rm-labhero { padding-top: clamp(130px, 13vw, 190px); }
/* Bildtafel: Stahlton, Eckwinkel, Scan-Linie */
.rm-plate { position: relative; }
.rm-plate .rm-frame { background: #1b1d1f; }
.rm-plate::before, .rm-plate::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 18px;
	height: 18px;
	border: 1px solid var(--brass);
	pointer-events: none;
}
.rm-plate::before { top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.rm-plate::after { bottom: -8px; right: -8px; border-left: 0; border-top: 0; }
.rm-scan { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.rm-scan::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -30%;
	height: 30%;
	background: linear-gradient(180deg, transparent, rgba(227, 198, 143, .14) 85%, rgba(227, 198, 143, .55) 99%, transparent);
	animation: rm-scan 6s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes rm-scan { 0% { transform: translateY(0); } 55%, 100% { transform: translateY(440%); } }
@media (prefers-reduced-motion: reduce) { .rm-scan::after { animation: none; display: none; } }

/* ================================================================ Projekte: Raster (Startseite + /projects/) */
.rm-work__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; margin-bottom: clamp(48px, 6vw, 96px); }
.rm-work__title { grid-column: 1 / 8; font-size: clamp(40px, 6vw, 104px); line-height: .95; letter-spacing: -.015em; }
.rm-work__side { grid-column: 9 / 13; color: var(--bone-dim); }
.rm-work__side p + p { margin-top: 18px; }
.rm-work__count { color: var(--brass); }
.rm-work--archive { padding-top: clamp(150px, 16vw, 240px); }
.rm-work--archive .rm-work__count { grid-column: 9 / 13; }

.rm-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: clamp(56px, 7vw, 120px); }
.rm-card { display: block; }
.rm-card[hidden] { display: none; }
.rm-card .rm-frame img { aspect-ratio: 16 / 10; transition: transform 2.4s var(--ease); }
.rm-card.is-tall .rm-frame img { aspect-ratio: 4 / 5; }
.rm-card:hover .rm-frame img, .rm-card:focus-visible .rm-frame img { transform: scale(1.05); }
.rm-card figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.rm-card figcaption b { font-weight: 530; color: var(--bone); }
.rm-card figcaption > span { color: var(--brass); text-align: right; }
.rm-card .no { margin-left: 4px; font-size: 10px; color: var(--brass); vertical-align: super; }
.rm-card.s1 { grid-column: 1 / 8; }
.rm-card.s2 { grid-column: 9 / 13; margin-top: 22%; }
.rm-card.s3 { grid-column: 3 / 7; }
.rm-card.s4 { grid-column: 8 / 13; margin-top: -12%; }
.rm-card.s5 { grid-column: 1 / 6; margin-top: 6%; }
.rm-card.s6 { grid-column: 7 / 13; }
.rm-card.s7 { grid-column: 2 / 9; }
.rm-card.s8 { grid-column: 10 / 13; margin-top: 30%; }
.rm-more { display: flex; justify-content: center; margin-top: clamp(64px, 8vw, 110px); }

/* ================================================================ Projektseite */
.rm-phead { padding-top: clamp(150px, 16vw, 240px); padding-bottom: clamp(48px, 6vw, 90px); }
.rm-phead__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; }
.rm-phead__title { grid-column: 1 / 8; font-size: clamp(44px, 7.4vw, 132px); line-height: .94; letter-spacing: -.02em; overflow-wrap: anywhere; }
.rm-phead__side { grid-column: 9 / 13; }
.rm-phead__lead { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.42; }
.rm-phead__lead > * + * { margin-top: .8em; }
.rm-phead__meta { display: grid; gap: 10px; margin: 32px 0 0; padding-top: 18px; border-top: 1px solid rgba(182, 147, 90, .3); }
.rm-phead__meta div { display: flex; justify-content: space-between; gap: 16px; }
.rm-phead__meta dt { color: var(--bone-dim); }
.rm-phead__meta dd { margin: 0; color: var(--brass-hi); text-align: right; }

.rm-pmedia { padding: 0 var(--gutter); }
.rm-pmedia__main .rm-video, .rm-pmedia__still { aspect-ratio: 16 / 9; }
.rm-pmedia__more { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--gap); }
.rm-pmedia__more .rm-video, .rm-pmedia__more .rm-frame { aspect-ratio: 16 / 9; }

.rm-video { position: relative; overflow: hidden; background: var(--espresso); }
.rm-video > img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.78); transition: transform 2.4s var(--ease), filter 1s var(--ease); }
.rm-video:hover > img { filter: brightness(.9); transform: scale(1.03); }
.rm-video__play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; border: 0; background: none; color: var(--bone); cursor: pointer; }
.rm-video__ring { position: relative; width: clamp(72px, 8vw, 116px); aspect-ratio: 1; border: 1px solid var(--brass); border-radius: 50%; transition: transform .8s var(--ease), background .6s var(--ease); }
.rm-video__ring::after { content: ""; position: absolute; left: 50%; top: 50%; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--brass-hi); transform: translate(-35%, -50%); }
.rm-video__play:hover .rm-video__ring { transform: scale(1.08); background: rgba(182, 147, 90, .18); }
.rm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rm-video.is-playing > img, .rm-video.is-playing .rm-video__play { display: none; }

.rm-pnext { padding: clamp(110px, 13vw, 200px) var(--gutter) clamp(70px, 8vw, 120px); }
.rm-pnext__link { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr auto; gap: 18px var(--gap); }
.rm-pnext__label { grid-column: 1 / 8; grid-row: 1; color: var(--brass); }
.rm-pnext__title { grid-column: 1 / 8; grid-row: 2; align-self: end; font-size: clamp(40px, 6.4vw, 112px); line-height: .95; transition: color .6s var(--ease); }
.rm-pnext__link:hover .rm-pnext__title { color: var(--brass-hi); }
.rm-pnext__client { grid-column: 1 / 8; grid-row: 3; color: var(--bone-dim); }
.rm-pnext__img { grid-column: 9 / 13; grid-row: 1 / 4; aspect-ratio: 4 / 5; }
.rm-pnext__back { margin-top: clamp(56px, 7vw, 100px); }

/* 404 */
.rm-404 { min-height: 80vh; padding: clamp(150px, 16vw, 240px) var(--gutter) 120px; }
.rm-404__title { font-size: clamp(48px, 8.4vw, 148px); line-height: .94; letter-spacing: -.02em; margin-bottom: 48px; }

/* ================================================================ Responsive */
@media (max-width: 960px) {
	.rm-work__title, .rm-work__side, .rm-work--archive .rm-work__count, .rm-phead__title, .rm-phead__side { grid-column: 1 / -1; }
	.rm-grid > .rm-card { grid-column: 1 / -1; margin-top: 0; }
	.rm-grid > .rm-card.is-tall { grid-column: 3 / -1; }
	.rm-phead__side { margin-top: 28px; }
	.rm-pmedia__more { grid-template-columns: 1fr; }
	.rm-pnext__link { grid-template-rows: none; }
	.rm-pnext__title, .rm-pnext__client { grid-column: 1 / -1; grid-row: auto; }
	.rm-pnext__img { grid-column: 4 / -1; grid-row: auto; margin-top: 28px; }
}
@media (max-width: 960px) {
	.rm-header { grid-template-columns: 1fr auto; }
	.rm-header .rm-nav, .rm-header .rm-contact { display: none; }
	.rm-burger { display: block; }
}
@media (min-width: 961px) {
	.rm-overlay { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.js [data-r], .js .lines .ln > span, .js .curtain, .js .curtain img, .js .hair {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
	.rm-overlay, .rm-overlay nav a { transition: none !important; }
}