/*
Theme Name: Kultura Theme
Theme URI: https://kultura.agency
Author: KUL'TURA e.V.
Description: Custom theme for KUL'TURA e.V. — Events, Projects, Team, one-page homepage, and archive.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kultura
*/

/* ---------- Fonts: AtlasGrotesk, self-hosted (no external font requests) ---------- */
@font-face {
	font-family: 'Atlas Grotesk';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('assets/fonts/AtlasGrotesk-Regular.otf') format('opentype');
}
@font-face {
	font-family: 'Atlas Grotesk';
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src: url('assets/fonts/AtlasGrotesk-RegularItalic.otf') format('opentype');
}
@font-face {
	font-family: 'Atlas Grotesk';
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url('assets/fonts/AtlasGrotesk-Medium.otf') format('opentype');
}
@font-face {
	font-family: 'Atlas Grotesk';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('assets/fonts/AtlasGrotesk-Bold.otf') format('opentype');
}

/* ---------- Tokens ----------
   Grounds: white / cream / dark-grey. Accents pulled from the logo and the
   team-portrait palette — used sparingly, as punctuation, not backgrounds. */
:root {
	--color-red: #d74635;
	--color-forest: #8b9757;
	--color-olive: #cbc95c;
	--color-amber: #ffc756;
	--color-cyan: #43b2cd;
	--color-orange: #f16a32;
	--color-blue: #237fa8;
	--color-purple: #74688e;
	--color-silver: #ebe9dd;
	--color-cream: #ebe9dd;
	--color-charcoal: #141414;
	--color-dark-grey: #2c2c2c;
	--color-grey: #6b6b6b;
	--color-light-grey: #ebe9dd;
	--color-white: #ffffff;
	--font-heading: 'Atlas Grotesk', -apple-system, Helvetica, Arial, sans-serif;
	--font-body: 'Atlas Grotesk', -apple-system, Helvetica, Arial, sans-serif;
	--container-width: 1240px;
}

/* ---------- Reset & base ---------- */
/* The sticky header's height animates on scroll (see .kultura-header-inner);
   without this, browser scroll anchoring compensates for that layout shift
   by silently adjusting scrollY, which flips is-scrolled back and forth in
   an infinite loop. */
html { overflow-anchor: none; }
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--color-charcoal);
	background: var(--color-white);
	line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--color-charcoal); text-decoration: none; }
a:hover { color: var(--color-blue); text-decoration: underline; }
a:active { color: var(--color-blue); }
a:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.kultura-footer-nav .current-menu-item > a { color: #fff }

/* Underline-on-hover looks wrong on button/card/icon-style links — keep those clean. */
.kultura-btn:hover,
.kultura-social-icon:hover,
.kultura-logo:hover,
.kultura-nav-list a:hover,
.kultura-event-tile:hover,
.kultura-spotlight-media:hover,
.kultura-spotlight-title a:hover,
.kultura-mosaic-item:hover,
.kultura-view-archive a:hover,
.kultura-membership-link:hover { text-decoration: none; }

.kultura-membership-link:hover { text-decoration: underline; }

/* These are white text on a photo, not prose -- keep them white on hover
   instead of inheriting the global a:hover blue (which read as nearly
   invisible against the image), but still give a visible cue: an underline
   under the title itself (safe on any photo, since it's the same white as
   the text) plus the existing image zoom. */
.kultura-event-tile:hover { color: #fff; }
.kultura-event-tile:hover .kultura-event-tile-title { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	margin: 0 0 0.5em;
	line-height: 1.2;
}
p { margin: 0 0 1em; }
.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
[hidden] { display: none !important; }

/* ---------- Entrance / scroll-reveal ----------
   Gated behind html.js-ready (set immediately by main.js) so content is
   never hidden if JS fails to load or runs late -- the unqualified
   .kultura-reveal/.kultura-hero-fade rules below never apply on their own. */
html.js-ready .kultura-hero-fade {
	opacity: 0;
	animation: kultura-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
html.js-ready .kultura-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-ready .kultura-reveal.is-visible { opacity: 1; transform: none; }
@keyframes kultura-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	html.js-ready .kultura-hero-fade { opacity: 1; animation: none; }
	html.js-ready .kultura-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Buttons & pills ---------- */
.kultura-btn {
	display: inline-block;
	padding: 0.9rem 2rem;
	border-radius: 0;
	font-weight: 500;
	font-size: 0.9rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.kultura-btn:hover { opacity: 0.85; }
.kultura-btn-primary { background: var(--color-charcoal); color: var(--color-white); }
.kultura-btn-block { display: block; width: 100%; text-align: center; }

.kultura-pill {
	display: inline-block;
	padding: 0.3rem 0.9rem;
	/* border-radius: 999px; */
	border-radius: 3px;
	font-size: 0.8rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}
.kultura-pill-featured { background: var(--color-red); color: var(--color-white); }
.kultura-pill-status { }

.kultura-category-label { display: block; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; margin-bottom: 0.5rem; }

.kultura-meta-item { display: inline-flex; align-items: start; gap: 0.35rem; }
.kultura-meta-item svg { width: 14px; height: 14px; margin-top:2.5px; fill: currentColor; flex: 0 0 auto; }

.kultura-pill-toggle, .kultura-pill-filter {
	display: inline-flex;
	background: var(--color-light-grey);
	border-radius: 999px;
	padding: 0.25rem;
	gap: 0.25rem;
	margin: 1.75rem 0 2rem;
}
#projects .kultura-pill-filter {
	background: var(--color-white);
}
.kultura-pill-toggle button, .kultura-pill-filter button {
	border: none;
	background: transparent;
	padding: 0.5rem 1.25rem;
	border-radius: 999px;
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--color-charcoal);
}
.kultura-pill-toggle button.is-active, .kultura-pill-filter button.is-active {
	background: var(--color-charcoal);
	color: var(--color-white);
}

.kultura-icon-toggle { display: inline-flex; gap: 0.4rem; }
.kultura-icon-toggle button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border: 1px solid var(--color-silver); background: transparent;
	color: var(--color-grey); cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.kultura-icon-toggle button:hover { color: var(--color-charcoal); }
.kultura-icon-toggle button.is-active { color: var(--color-charcoal); border-color: var(--color-charcoal); }
.kultura-icon-toggle svg { width: 18px; height: 18px; fill: currentColor; }

.kultura-tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.kultura-tag { background: var(--color-light-grey); padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.8rem; }
.kultura-tag-outline { background: transparent; border: 1px solid var(--color-silver); }

/* ---------- Watermark & CI strip ---------- */
.kultura-watermark { position: absolute; fill: currentColor; pointer-events: none; }
.kultura-watermark path { fill: currentColor; }
.kultura-archive-watermark { top: .9rem; right: 2.65rem; width: 90px; height: auto; color: var(--color-amber); opacity: 0.15; }
.kultura-about-watermark { top: -1.5rem; left: -2rem; width: 110px; height: auto; color: var(--color-charcoal); opacity: 0.1; z-index: 0; }

/* ---------- Header / Nav ----------
   Always white, always sticky -- no transparent-over-hero state. The logo
   is large at rest and compacts once the page has scrolled. */
.kultura-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-silver);
}
.kultura-header-watermark {
	top: auto;
	bottom: -60px;
	right: 2.5rem;
	width: 110px;
	height: auto;
	color: var(--color-grey);
	opacity: 0.35;
	z-index: 1;
}
.kultura-header-inner {
	max-width: var(--container-width);
	margin: 0 auto;
	width: 100%;
	padding: 0 1.5rem;
	height: 181px;
	display: flex;
	align-items: center;
	gap: 2.25rem;
	transition: height 0.3s ease;
}
.kultura-header.is-scrolled .kultura-header-inner { height: 84px; }
.kultura-back-link {
	color: var(--color-grey);
	font-size: 0.9rem;
	white-space: nowrap;
}
.kultura-logo { display: inline-block; flex: 0 0 auto; position: relative; }
.kultura-logo-img { width: auto; transition: height 0.3s ease, opacity 0.3s ease; }
.kultura-logo-img-full { height: 150px; opacity: 1; }
.kultura-logo-img-compact {
	height: 100px; opacity: 0;
	position: absolute; left: 0; top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}
/* Scrolled: crossfade to the compact mark instead of a hard display swap --
   the full wordmark shrinks+fades out (in step with the header's own height
   transition) while the compact mark, already sized and centered via the
   absolute positioning above, fades in over it. */
.kultura-header.is-scrolled .kultura-logo-img-full { height: 100px; opacity: 0; }
.kultura-header.is-scrolled .kultura-logo-img-compact { opacity: 1; pointer-events: auto; }

.kultura-nav-desktop { margin-left: auto; align-self: center; }
.kultura-nav-list { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.kultura-nav-list a {
	color: var(--color-charcoal);
	font-weight: 500;
	font-size: 0.95rem;
	position: relative;
	padding-bottom: 4px;
}
.kultura-nav-list a::after {
	content: '';
	position: absolute;
	left: 0; right: 100%; bottom: 0;
	height: 1px;
	background: var(--color-charcoal);
	transition: right 0.25s ease;
}
.kultura-nav-list a:hover::after { right: 0; }

.kultura-mobile-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	width: 32px; height: 24px;
	position: relative;
	align-self: center;
}
.kultura-mobile-toggle-icon,
.kultura-mobile-toggle-icon::before,
.kultura-mobile-toggle-icon::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 2px;
	background: var(--color-charcoal);
}
.kultura-mobile-toggle-icon { top: 11px; }
.kultura-mobile-toggle-icon::before { top: -8px; }
.kultura-mobile-toggle-icon::after { top: 8px; }
.kultura-mobile-nav {
	display: none;
	position: absolute;
	top: 100%; left: 0; right: 0;
	background: var(--color-white);
	padding: 1rem 1.5rem 2rem;
	box-shadow: 0 8px 16px rgba(0,0,0,0.08);
	border-bottom: 1px solid var(--color-silver);
}
.kultura-mobile-nav .kultura-nav-list { flex-direction: column; gap: 1rem; }
.kultura-mobile-nav .kultura-nav-list a { color: var(--color-charcoal); }
body.kultura-mobile-open .kultura-mobile-nav { display: block; }

@media (max-width: 900px) {
	.kultura-nav-desktop { display: none; }
	.kultura-mobile-toggle { display: block; margin-left: auto; }
	/* Override .is-scrolled's height too -- mobile stays at one fixed,
	   compact size regardless of scroll, it doesn't also shrink further. */
	.kultura-header-inner,
	.kultura-header.is-scrolled .kultura-header-inner { height: 116px; }
	.kultura-logo-img-full { display: none; }
	/* display:block alone left this invisible: the base rule opacity:0 is
	   normally only flipped by .is-scrolled (for the desktop crossfade),
	   which isn't present on mobile at rest. Also drop the absolute
	   positioning (only needed to overlay the compact mark on top of the
	   full one for the desktop crossfade) -- with the full logo hidden,
	   an absolutely positioned compact logo was .kultura-logo's only
	   child, so the link had no in-flow content left to size itself by
	   and collapsed to 0 width, clamping the image via the global
	   img { max-width: 100% } reset. Static positioning fixes that. */
	.kultura-logo-img-compact {
		display: block; opacity: 1;
		position: static; transform: none;
	}
}

/* ---------- Sections ---------- */
.kultura-section { padding: 5rem 0; }
.kultura-section-tinted { background: var(--color-cream); }
.kultura-section-dark { background: var(--color-dark-grey); color: var(--color-white); }
.kultura-section-dark .kultura-section-label,
.kultura-section-dark .kultura-eyebrow { color: #b7b7b0; }

.kultura-section-label,
.kultura-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-grey);
	margin-bottom: 14px;
}
.kultura-section-label-centered { justify-content: center; }
.kultura-label-line { display: inline-block; width: 55px; height: 2.5px; background: var(--color-charcoal); flex: 0 0 auto; }
.kultura-accent-red .kultura-label-line { background: var(--color-red); }
.kultura-accent-forest .kultura-label-line { background: var(--color-forest); }
.kultura-accent-olive .kultura-label-line { background: var(--color-olive); }
.kultura-accent-amber .kultura-label-line { background: var(--color-amber); }
.kultura-accent-cyan .kultura-label-line { background: var(--color-cyan); }
.kultura-accent-blue .kultura-label-line { background: var(--color-blue); }
.kultura-accent-orange .kultura-label-line { background: var(--color-orange); }
.kultura-accent-purple .kultura-label-line { background: var(--color-purple); }

.kultura-section-heading { font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -0.02em; }
.kultura-section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 700px) {
	/* Stacked, not wrapped: the Events heading swaps to longer text
	   ("Upcoming Events") on tab switch, which could wrap to a second line
	   and shift the bottom-aligned toggle's position. A fixed heading-then-
	   toggle column keeps the toggle's position independent of that. */
	.kultura-section-heading-row { flex-direction: column; align-items: flex-start; }
}

.kultura-grid { display: grid; gap: 2rem; }
.kultura-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
	.kultura-grid-2 { grid-template-columns: 1fr; }
}

/* Flex + justify-content:center (not CSS Grid) so an incomplete last row
   centers instead of hugging the left edge. */
.kultura-team-grid { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 1rem; }
.kultura-team-grid .kultura-team-card { flex: 0 1 calc((100% - 4 * 1.5rem) / 5); }
@media (max-width: 1000px) { .kultura-team-grid .kultura-team-card { flex-basis: calc((100% - 2 * 1.5rem) / 3); } }
@media (max-width: 600px) { .kultura-team-grid .kultura-team-card { flex-basis: calc((100% - 1.5rem) / 2); } }

.kultura-view-archive { margin-top: 2rem; font-weight: 500; }
.kultura-view-archive a { position: relative; color: var(--color-charcoal); padding-bottom: 4px; }
.kultura-view-archive a::after {
	content: '';
	position: absolute;
	left: 0; right: 100%; bottom: 0;
	height: 1px;
	background: var(--color-charcoal);
	transition: right 0.25s ease, background 0.25s ease;
}
.kultura-view-archive a:hover { color: var(--color-blue); }
.kultura-view-archive a:hover::after { right: 0; background: var(--color-blue); }
.kultura-archive-panel .kultura-archive-view { margin-bottom: 3rem; }

/* ---------- Spotlight (opening carousel) ----------
   Single-slide, full-bleed image + a calm panel -- replaces the old motto
   hero. Header and this section are the only parts of the page that stay
   deliberately colorless. */
.kultura-spotlight { position: relative; border-bottom: 1px solid var(--color-silver); }
.kultura-spotlight-mask { overflow: hidden; }
.kultura-spotlight-track { display: flex; align-items: stretch; transition: transform 1.1s cubic-bezier(0.65, 0, 0.08, 1); }
.kultura-spotlight-slide { flex: 0 0 100%; min-width: 0; }
.kultura-spotlight-item { display: grid; grid-template-columns: 1.55fr 1fr; height: min(74vh, 640px); overflow: hidden; }
.kultura-spotlight-media { position: relative; display: block; overflow: hidden; background: var(--color-dark-grey); }
.kultura-spotlight-media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: filter 0.5s ease;
	animation: kultura-spotlight-kenburns 16s ease-in-out infinite alternate;
}
.kultura-spotlight-item:hover .kultura-spotlight-media img { filter: grayscale(0%) contrast(1); }
@keyframes kultura-spotlight-kenburns {
	0% { transform: scale(1); }
	100% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
	.kultura-spotlight-track { transition-duration: 0.3s; }
	.kultura-spotlight-media img { animation: none; }
}
.kultura-spotlight-panel { position: relative; background: var(--color-cream); display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(40px, 5vw, 88px) 64px clamp(56px, 6vw, 104px); }
.kultura-spotlight-kind { margin-bottom: 22px; }
.kultura-spotlight-title {
	font-weight: 700; font-size: clamp(1.7rem, 3vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 18px;
	display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kultura-spotlight-title a { color: inherit; }
.kultura-spotlight-title a:hover { color: var(--color-blue); }
.kultura-spotlight-excerpt {
	color: var(--color-grey); font-size: 1rem; line-height: 1.6; margin: 0; max-width: 34ch;
	display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kultura-spotlight-meta-list { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.kultura-spotlight-meta { font-weight: 600; font-size: 1rem; color: var(--color-charcoal); }
.kultura-spotlight-meta .kultura-meta-item { gap: 9px; }
.kultura-spotlight-meta .kultura-meta-item svg { width: 17px; height: 17px; }
/* A solid badge, fixed bottom-left -- reads clearly against any photo
   (unlike a thin outline) without chasing the cursor. Fades and scales in
   on hover, pure CSS. */
.kultura-spotlight-view {
	position: absolute; left: 28px; bottom: 28px; z-index: 2;
	width: 84px; height: 84px; border-radius: 50%;
	background: var(--color-charcoal); color: #fff;
	display: flex; align-items: center; justify-content: center; gap: 4px;
	font-weight: 500; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
	opacity: 0; transform: scale(0.85);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.kultura-spotlight-view svg { width: 20px; height: 11px; }
.kultura-spotlight-item:hover .kultura-spotlight-view {
	opacity: 1; transform: scale(1);
	animation: kultura-view-pulse 2.4s ease-out 0.3s infinite;
}
@keyframes kultura-view-pulse {
	0%, 20% { box-shadow: 0 0 0 0 rgba(20,20,20,0.28); }
	100% { box-shadow: 0 0 0 16px rgba(20,20,20,0); }
}
@media (prefers-reduced-motion: reduce) {
	.kultura-spotlight-view { transition: opacity 0.2s ease; transform: none; }
	.kultura-spotlight-item:hover .kultura-spotlight-view { animation: none; }
}
.kultura-spotlight-controls { position: absolute; bottom: 40px; right: clamp(40px, 5vw, 88px); z-index: 4; display: flex; align-items: center; gap: 24px; color: var(--color-charcoal); }
.kultura-spotlight-count { font-weight: 500; font-size: 0.9rem; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
.kultura-spotlight-arrow { background: none; border: 0; padding: 0; cursor: pointer; color: var(--color-charcoal); display: grid; place-items: center; opacity: 0.75; transition: opacity 0.2s ease, transform 0.2s ease; }
.kultura-spotlight-arrow:hover { opacity: 1; }
.kultura-spotlight-prev:hover { transform: translateX(-3px); }
.kultura-spotlight-next:hover { transform: translateX(3px); }
.kultura-spotlight-arrow svg { width: 56px; height: 14px; }
@media (max-width: 860px) {
	/* .kultura-spotlight-track stretches every slide to match the tallest
	   one (equal-height fix). height: 100% + a flexible panel row makes
	   each slide's own content actually fill that stretched box --
	   otherwise shorter slides leave dead space below their content and
	   the controls (anchored to the true bottom) float in that gap. */
	.kultura-spotlight-item { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100%; }
	.kultura-spotlight-media { aspect-ratio: 16 / 10; }
	.kultura-spotlight-panel { padding: 44px 28px 84px; min-height: 420px; }
	.kultura-spotlight-controls { bottom: 28px; right: 28px; }
}

/* ---------- Events: content masonry ----------
   Overlay tiles (photo + dot/date/title scrim) with one dominant 2x2
   feature — deliberately different from the pure-image Gallery masonry
   further down, which has no overlay and no single dominant tile. */
.kultura-event-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; grid-auto-flow: dense; }
.kultura-event-mosaic-past { grid-auto-rows: 170px; }
.kultura-event-tile {
	position: relative; display: block; overflow: hidden;
	background: var(--color-cream); color: #fff;
}
.kultura-event-tile-media { position: absolute; inset: 0; }
.kultura-event-tile-media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}
.kultura-event-tile:hover .kultura-event-tile-media img { transform: scale(1.05); filter: grayscale(0%) contrast(1); }
.kultura-event-tile::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(13,13,15,0.86), rgba(13,13,15,0.12) 48%, transparent 74%);
}
.kultura-event-tile-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; }
.kultura-event-tile-meta { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.92; margin-bottom: 9px; font-variant-numeric: tabular-nums; }
.kultura-dot { width: 12px; height: 12px; margin-bottom:4.5px; border-radius: 50%; flex: 0 0 auto; display: inline-block; background: var(--accent); }
.kultura-event-tile-title { font-weight: 700; font-size: 1.02rem; line-height: 1.16; letter-spacing: -0.01em; margin: 0; color: #fff; }
.kultura-event-tile-venue { margin: 7px 0 0; font-size: 0.8rem; opacity: 0.82; display: none; }
.kultura-event-tile-subtitle { display: none; margin: 10px 0 0; font-size: 0.92rem; line-height: 1.45; opacity: 0.88; max-width: 44ch; }
.kultura-event-tile--feat { grid-column: span 2; grid-row: span 2; }
.kultura-event-tile--feat .kultura-event-tile-title { font-size: 1.7rem; }
.kultura-event-tile--tall { grid-row: span 2; }
.kultura-event-tile--wide { grid-column: span 2; }
.kultura-event-tile--feat .kultura-event-tile-venue,
.kultura-event-tile--wide .kultura-event-tile-venue { display: block; }
@media (max-width: 820px) {
	.kultura-event-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
	.kultura-event-tile--tall { grid-row: span 1; }
	.kultura-event-tile--feat .kultura-event-tile-title { font-size: 1.3rem; }
}
/* Below 2 columns, mixed row/column spans leave dense-packing gaps that
   have no smaller item left to backfill them — collapse to a plain
   single-column stack instead so every tile is uniform. */
@media (max-width: 560px) {
	.kultura-event-mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.kultura-event-tile--feat,
	.kultura-event-tile--tall,
	.kultura-event-tile--wide { grid-column: span 1; grid-row: span 1; }
	.kultura-event-mosaic .kultura-event-tile { aspect-ratio: 4/3; }
	.kultura-event-tile--feat .kultura-event-tile-title { font-size: 1.15rem; }
}

/* Plain uniform 3/2/1 grid of event tiles — used for Past events on the
   homepage (max 6, capped in PHP) and the full Events archive, so both read
   as a settled list rather than a live masonry wall. */
.kultura-event-grid-plain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kultura-event-grid-plain .kultura-event-tile { aspect-ratio: 4/3; }
.kultura-event-grid-plain .kultura-event-tile-venue { display: block; }
@media (max-width: 900px) { .kultura-event-grid-plain { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kultura-event-grid-plain { grid-template-columns: 1fr; } }

/* ---------- Archive list view ----------
   Alternate to the tile grids -- a compact row with a small thumbnail on
   the left, for scanning many titles at once instead of browsing photos. */
.kultura-event-list, .kultura-project-list { display: flex; flex-direction: column; }
.kultura-list-row { display: flex; align-items: center; gap: 1.25rem; padding: 0.9rem 0; border-bottom: 1px solid var(--color-silver); }
.kultura-list-row-media { flex: 0 0 auto; width: 96px; height: 72px; border-radius: 3px; overflow: hidden; background: var(--color-cream); }
.kultura-list-row-media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.4s ease, filter 0.4s ease;
}
.kultura-list-row:hover .kultura-list-row-media img { transform: scale(1.06); filter: grayscale(0%) contrast(1); }
.kultura-list-row-body { min-width: 0; }
.kultura-list-row-meta { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-grey); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.kultura-list-row-title { display: block; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; margin-bottom: 2px; }
.kultura-list-row-venue { display: block; font-size: 0.85rem; color: var(--color-grey); }
@media (max-width: 560px) {
	.kultura-list-row { gap: 0.85rem; }
	.kultura-list-row-media { width: 72px; height: 56px; }
	.kultura-list-row-title { font-size: 0.95rem; }
}

/* ---------- Projects ----------
   Reuses the Events tile component verbatim (photo + scrim + overlay text)
   so the data sits on the image, not in a white box — but laid out as a
   plain uniform grid instead of a masonry, keeping the two sections related
   without being identical. Two per row, larger than an Events tile, since a
   project carries more to say (subtitle + period) than a single event date. */
.kultura-project-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 700px) { .kultura-project-tiles { grid-template-columns: 1fr; } }
.kultura-project-tile { aspect-ratio: 16/11; }
.kultura-project-tile .kultura-event-tile-body { padding: 30px; }
.kultura-project-tile .kultura-event-tile-title { font-size: 1.55rem; }
.kultura-project-tile .kultura-event-tile-subtitle { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kultura-project-tile .kultura-event-tile-venue { display: block; }
@media (max-width: 700px) {
	.kultura-project-tile { aspect-ratio: 4/3; }
	.kultura-project-tile .kultura-event-tile-title { font-size: 1.25rem; }
}

/* ---------- Team cards ----------
   Circular portrait with a thin colored ring — the accent reads as a mark
   of distinction per member, not a background block. */
.kultura-team-card { text-align: center; }
.kultura-team-card-avatar {
	aspect-ratio: 1; width: 84%; margin: 0 auto 1.1rem; border-radius: 0; overflow: hidden;
}
.kultura-team-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kultura-team-card-name { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; margin: 0 0 0.2rem; }
.kultura-team-card-role { font-weight: 500; font-size: 0.85rem; margin-bottom: 0.3rem; }
.kultura-team-card-email { color: var(--color-grey); font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
.kultura-team-card-email svg { width: 13px; height: 13px; fill: currentColor; flex: 0 0 auto; }

/* ---------- Gallery: pure-image masonry ----------
   No text/dot overlay and no single dominant tile (Events has the 2x2
   feature) — a steadier, photo-only rhythm so the two masonries don't rhyme. */
.kultura-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px; grid-auto-flow: dense; }
.kultura-mosaic-item { padding: 0; border: none; cursor: pointer; overflow: hidden; position: relative; background: var(--color-cream); }
.kultura-mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.kultura-mosaic-item:hover img { transform: scale(1.05); }
.kultura-mosaic-item:nth-child(8n+2) { grid-row: span 2; }
.kultura-mosaic-item:nth-child(8n+5) { grid-column: span 2; }
.kultura-mosaic-item:nth-child(8n+7) { grid-row: span 2; }
@media (max-width: 820px) {
	.kultura-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
	.kultura-mosaic-item:nth-child(8n+2), .kultura-mosaic-item:nth-child(8n+7) { grid-row: span 1; }
	.kultura-mosaic-item:nth-child(8n+5) { grid-column: span 1; }
}

/* ---------- Gallery: infinite carousel ----------
   Homepage "Impressions" only — the detail-page photo galleries above still
   use the .kultura-mosaic grid. Arrow buttons reuse .kultura-spotlight-arrow
   verbatim so the two carousels look like one system. Each slide is a column
   of 2 stacked images, so the carousel scrolls 2 rows at a time. */
.kultura-gallery-controls { display: flex; align-items: center; gap: 16px; margin-bottom:15px; }
.kultura-carousel-mask { overflow: hidden; }
.kultura-carousel-track { display: flex; align-items: flex-start; gap: 14px; }
.kultura-carousel-slide { flex: 0 0 auto; display: flex; flex-direction: column; gap: 14px; }
.kultura-carousel-slide .kultura-mosaic-item { width: 100%; aspect-ratio: 4/3; }
.kultura-carousel-slide .kultura-mosaic-item img { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease; }
.kultura-carousel-slide .kultura-mosaic-item:hover img { filter: grayscale(0%) contrast(1); }

.kultura-lightbox {
	position: fixed; inset: 0; z-index: 1000;
	background: rgba(0,0,0,0.9);
	display: flex; align-items: center; justify-content: center;
}
.kultura-lightbox img { max-width: 90vw; max-height: 90vh; }
.kultura-lightbox-close {
	position: absolute; top: 1.5rem; right: 1.5rem;
	background: none; border: none; color: var(--color-white);
	font-size: 2rem; cursor: pointer; line-height: 1;
}
/* Prev/next reuse .kultura-spotlight-arrow (same icon, same hover nudge) --
   just repositioned for the fixed overlay and recolored for the dark bg. */
.kultura-lightbox-prev, .kultura-lightbox-next { position: absolute; top: calc(50% - 7px); }
.kultura-lightbox-prev { left: 1.5rem; }
.kultura-lightbox-next { right: 1.5rem; }
.kultura-lightbox .kultura-spotlight-arrow { color: var(--color-white); }
@media (max-width: 700px) {
	.kultura-lightbox-prev { left: 0.5rem; }
	.kultura-lightbox-next { right: 0.5rem; }
}

/* ---------- About ---------- */
.kultura-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.kultura-about-content { position: relative; }
.kultura-about-content > * { position: relative; z-index: 1; }
.kultura-about-media { position: relative; aspect-ratio: 4/5; background: var(--color-cream); overflow: hidden; }
.kultura-about-media img { width: 100%; height: 100%; object-fit: cover; }
.kultura-about-badge { position: absolute; left: 1.5rem; bottom: 1.5rem; background: var(--color-charcoal); color: var(--color-white); padding: 0.75rem 1.1rem; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.kultura-stats-row { display: flex; gap: 2.5rem; margin-top: 2rem; flex-wrap: wrap; }
.kultura-stat { padding-left: 0; }
.kultura-stat strong { display: block; font-weight: 700; font-size: 2rem; letter-spacing: -0.03em; }
.kultura-stat span { color: var(--color-grey); font-size: 0.85rem; }
.kultura-stat:nth-child(1) strong { color: var(--color-red); }
.kultura-stat:nth-child(2) strong { color: var(--color-blue); }
.kultura-stat:nth-child(3) strong { color: var(--color-forest); }
@media (max-width: 900px) { .kultura-about-grid { grid-template-columns: 1fr; } }

/* ---------- Membership / Support (dark band) ---------- */
.kultura-section-heading-centered { text-align: center; max-width: 40em; margin: 0 auto 3rem; }
.kultura-membership-card { padding: 2.5rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
.kultura-membership-card-red, .kultura-membership-card-amber { border-top: none; }
.kultura-membership-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid currentColor; margin-bottom: 1.25rem; }
.kultura-membership-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
.kultura-membership-icon-red { color: var(--color-cyan); }
.kultura-membership-icon-amber { color: var(--color-amber); }
.kultura-chevron-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; }
.kultura-chevron-list li { position: relative; padding: 0.55rem 0; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.92rem; color: #d6d6d0; }
.kultura-chevron-list li::before { content: none; }
.kultura-membership-link { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 500; color: var(--color-charcoal); background: var(--color-white); padding: 0.85rem 1.5rem; font-size: 0.9rem; }
.kultura-membership-link svg { width: 17px; height: 17px; fill: currentColor; }
.kultura-membership-card-red .kultura-membership-link,
.kultura-membership-card-amber .kultura-membership-link { color: var(--color-charcoal); }
.kultura-membership-link:hover { opacity: 0.86; }
.kultura-membership-link-disabled { opacity: 0.5; cursor: default; }

/* ---------- Contact ---------- */
.kultura-contact-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 4rem; }
.kultura-contact-info { position: relative; }
.kultura-contact-info > * { position: relative; z-index: 1; }
.kultura-contact-watermark { top: -1.5rem; left: -2rem; width: 90px; height: auto; color: var(--color-charcoal); opacity: 0.1; z-index: 0; }
.kultura-contact-form-wrap { padding: 0; }
.kultura-contact-intro { color: var(--color-grey); max-width: 32em; }
.kultura-contact-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.kultura-contact-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--color-silver); color: var(--color-charcoal); }
.kultura-contact-icon svg { width: 18px; height: 18px; fill: currentColor; }
.kultura-contact-label { display: block; font-weight: 500; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-grey); margin-bottom: 2px; }
.kultura-contact-socials { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.kultura-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-silver);
	color: var(--color-charcoal);
}
.kultura-social-icon svg { width: 18px; height: 18px; fill: currentColor; }
.kultura-social-icon:hover { border-color: var(--color-blue); color: var(--color-blue); }
.kultura-form-row { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.kultura-form-row label { font-weight: 500; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-grey); }
.kultura-form-row input, .kultura-form-row textarea, .kultura-form-row select {
	padding: 0.6rem 0;
	border: none;
	border-bottom: 1px solid var(--color-silver);
	border-radius: 0;
	background: transparent;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-charcoal);
}
.kultura-form-row input:focus, .kultura-form-row textarea:focus, .kultura-form-row select:focus {
	outline: none;
	border-bottom-color: var(--color-charcoal);
}
/* The bare-underline style (above) reads fine on the white homepage
   Contact form, but disappears against a .kultura-sidebar-card's own
   cream background (the event Register form) -- give fields here a real
   box instead: white fill + full border, so they read as fields. */
.kultura-sidebar-card .kultura-form-row input,
.kultura-sidebar-card .kultura-form-row textarea,
.kultura-sidebar-card .kultura-form-row select {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--color-silver);
	border-radius: 3px;
	background: var(--color-white);
}
.kultura-sidebar-card .kultura-form-row input:focus,
.kultura-sidebar-card .kultura-form-row textarea:focus,
.kultura-sidebar-card .kultura-form-row select:focus {
	border-color: var(--color-charcoal);
}
.kultura-form-message { margin-top: 1rem; font-weight: 500; }

.kultura-form { position: relative; }
.kultura-form.is-loading { pointer-events: none; }
.kultura-form.is-loading::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.7);
	z-index: 5;
}
.kultura-form.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border: 3px solid var(--color-silver);
	border-top-color: var(--color-charcoal);
	border-radius: 50%;
	z-index: 6;
	animation: kultura-spin 0.8s linear infinite;
}
@keyframes kultura-spin {
	to { transform: rotate(360deg); }
}
@media (max-width: 900px) { .kultura-contact-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.kultura-footer { background: var(--color-dark-grey); color: var(--color-white); padding: 4rem 0 0; }
.kultura-footer-inner { display: flex; justify-content: space-between; gap: 3rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.kultura-footer-logo { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--color-white); margin-bottom: 1rem; display: inline-block; }
.kultura-footer-socials { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.kultura-footer-socials .kultura-social-icon { border-color: rgba(255,255,255,0.25); color: var(--color-white); }
.kultura-footer-socials .kultura-social-icon:hover { border-color: var(--color-cyan); color: var(--color-cyan); }
.kultura-footer-tagline { max-width: 28em; color: #b7b7b0; }
.kultura-footer-nav ul { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 3rem; }
.kultura-footer-nav li { margin-bottom: 0.75rem; break-inside: avoid; }
.kultura-footer-nav a { color: #cfcfca; font-size: 0.92rem; }
.kultura-footer-nav a:hover { color: var(--color-white); }
.kultura-footer-bottom { padding: 1.5rem; color: #9c9c96; font-size: 0.85rem; }
.kultura-footer .kultura-ci-strip { margin-top: 0rem; }

/* ---------- Detail pages (single event/project) ----------
   The hero carries the data (category/status, title, dates) as scrim text
   over the photo, same "data on the picture" language as the tile grids --
   rather than a plain image with a title repeated below it. Events and
   Projects share the structure but diverge slightly: Projects adds a
   subtitle line under the title (Events have none). */
.kultura-detail-hero { position: relative; height: 75vh; overflow: hidden; color: #fff; }
.kultura-detail-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.kultura-detail-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(13,13,15,0.9), rgba(13,13,15,0.2) 52%, transparent 78%);
}
.kultura-detail-hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding-bottom: 3.25rem; }
.kultura-detail-hero-meta {
	display: flex; align-items: center; gap: 9px;
	font-weight: 500; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
	margin-bottom: 16px; font-variant-numeric: tabular-nums;
}
.kultura-detail-hero-title { font-size: clamp(2rem, 4.5vw, 3.4rem); color: #fff; max-width: 22ch; margin-bottom: 0.35em; }
.kultura-detail-hero-subtitle { font-size: 1.5rem; opacity: 0.88; margin: -0.5em 0 0.9em; max-width: 46ch; }
.kultura-detail-hero-submeta { display: flex; gap: 1.5rem; flex-wrap: wrap; opacity: 0.92; }
.kultura-breadcrumb { padding: 1.5rem 0; color: var(--color-grey); font-size: 0.9rem; }
.kultura-breadcrumb a { color: var(--color-grey); }
.kultura-breadcrumb-sep { margin: 0 0.5rem; }
.kultura-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; padding-bottom: 4rem; align-items: start; }
.kultura-detail-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; color: var(--color-grey); margin-bottom: 2rem; }
.kultura-detail-content { position: relative; margin-bottom: 2rem; padding-left: 4rem; }
.kultura-detail-content-mark { top: -0.1em; left: -20px; width: 60px; height: auto; color: var(--color-grey); opacity: 0.35; }
@media (max-width: 600px) {
	/* Floated, not absolutely positioned: the text should actually wrap
	   around the mark's shape (like a drop cap) for its first few lines,
	   then run full-width once past it -- position:absolute never causes
	   surrounding text to wrap, only a float does. overflow:hidden on the
	   parent is a clearfix, so the float doesn't collapse the container. */
	.kultura-detail-content { padding-left: 0; overflow: hidden; }
	.kultura-detail-content-mark {
		position: static;
		float: left;
		width: 50px;
		margin: 2px 12px 8px 0;
	}
}
.kultura-detail-subheading { margin-top: 2.5rem; }
.kultura-detail-sidebar { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 1.5rem; }
.kultura-sidebar-card { background: var(--color-light-grey); border-radius: 4px; padding: 1.5rem; }
.kultura-sidebar-card-muted { background: #ececec; }
.kultura-sidebar-card-muted h3 { margin:0 }
.kultura-sidebar-card-accent { border-top: 4px solid var(--color-red); }
.kultura-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.kultura-info-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.kultura-info-list li > strong { text-align: right; }
.kultura-info-list span { color: var(--color-grey); flex: 0 0 auto; }
.kultura-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.kultura-mini-list a { display: flex; gap: 0.75rem; align-items: start; }
.kultura-mini-list img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; }
.kultura-mini-list em { display: block; font-style: normal; color: var(--color-grey); font-size: 0.8rem; }
@media (max-width: 900px) {
	.kultura-detail-grid { grid-template-columns: 1fr; }
	.kultura-detail-sidebar { position: static; }
}

.kultura-partner-list { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.kultura-partner-chip { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--color-light-grey); padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.9rem; }
.kultura-partner-chip img { width: 75px; height: auto; object-fit: contain; }
@media (max-width: 600px) {
	.kultura-partner-chip { width: 100%; }
}

/* ---------- Archive ---------- */
.kultura-archive-header { position: relative; background: var(--color-dark-grey); color: var(--color-white); padding: 4rem 0 3rem; }
.kultura-archive-header h1 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0; }
.kultura-archive-title-mark { position: static; width: 0.5em; height: 1em; color: var(--color-amber); opacity: 1; }
.kultura-archive-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kultura-archive-search, .kultura-archive-year { padding: 0.6rem 1rem; border: 1px solid var(--color-silver); border-radius: 4px; }
.kultura-archive-count { color: var(--color-grey); margin-bottom: 1.5rem; }


/* ---------- Simple page (Impressum) ---------- */
.kultura-simple-header { background: var(--color-light-grey); padding: 3rem 0 2rem; }
.kultura-prose { padding: 3rem 1.5rem; max-width: 70ch; }
.kultura-prose h2 { margin-top: 2rem; }