:root {
	--djomg-ink: #111217;
	--djomg-night: #090a0e;
	--djomg-night-soft: #12141b;
	--djomg-paper: #f4f1ea;
	--djomg-white: #ffffff;
	--djomg-muted: #a8adb8;
	--djomg-cyan: #69d6e7;
	--djomg-violet: #b56af2;
	--djomg-line: rgba(255,255,255,.17);
	--djomg-radius: 30px;
	--djomg-wide: 1320px;
	--djomg-focal-x: 50%;
	--djomg-focal-y: 50%;
	--djomg-darkness: .54;
	--djomg-brightness: 1;
	--djomg-footer-primary: #07151a;
	--djomg-footer-secondary: #1b1226;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

.dj-modern-page {
	background: var(--djomg-paper);
	color: var(--djomg-ink);
	margin: 0;
}

/* HERO */
.dj-hero {
	position: relative;
	isolation: isolate;
	min-height: 100svh;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background:
		radial-gradient(circle at 72% 26%, rgba(105,214,231,.18), transparent 34%),
		linear-gradient(135deg, #18131b, #07080b 70%);
}

body.admin-bar .dj-hero { min-height: calc(100svh - 32px); }

.dj-hero__media {
	position: absolute !important;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	max-width: none !important;
}

.dj-hero__media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: var(--djomg-focal-x) var(--djomg-focal-y) !important;
	filter: brightness(var(--djomg-brightness));
}

.dj-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		linear-gradient(90deg,
			rgba(5,6,9,calc(var(--djomg-darkness) + .20)) 0%,
			rgba(5,6,9,var(--djomg-darkness)) 42%,
			rgba(5,6,9,.20) 72%,
			rgba(5,6,9,.30) 100%),
		linear-gradient(0deg,
			rgba(5,6,9,.74) 0%,
			rgba(5,6,9,.10) 44%,
			rgba(5,6,9,.48) 100%);
}

.dj-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	box-shadow: inset 0 -120px 120px rgba(0,0,0,.24);
}

.dj-hero__inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: min(calc(100% - 48px), var(--djomg-wide));
	min-height: 100svh;
	margin-inline: auto !important;
	padding: clamp(26px, 4vw, 56px) 0 clamp(42px, 6vw, 78px);
	box-sizing: border-box;
	pointer-events: auto;
}

body.admin-bar .dj-hero__inner { min-height: calc(100svh - 32px); }

.dj-hero__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--djomg-line);
}

.dj-hero__topbar .wp-block-site-title {
	margin: 0;
	font-size: clamp(1.3rem, 2vw, 1.8rem);
	font-weight: 750;
	letter-spacing: -.04em;
	line-height: 1;
}

.dj-hero__topbar .wp-block-site-title a,
.dj-hero__topbar .wp-block-site-tagline,
.dj-hero__topbar .dj-hero__profession {
	color: var(--djomg-white) !important;
	text-decoration: none;
}

.dj-hero__topbar .wp-block-site-tagline,
.dj-hero__topbar .dj-hero__profession {
	margin: 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	opacity: .88;
}

.dj-hero__content {
	position: relative;
	z-index: 5;
	width: min(980px, 90%);
	margin: auto 0 0 !important;
	padding-top: clamp(90px, 17vh, 190px);
	pointer-events: auto;
}

.dj-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 24px;
	color: rgba(255,255,255,.78) !important;
	font-size: clamp(.68rem, 1vw, .8rem);
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.dj-hero__eyebrow::before {
	content: "";
	width: 38px;
	height: 1px;
	background: linear-gradient(90deg, var(--djomg-cyan), var(--djomg-violet));
}

.dj-hero__title {
	max-width: 980px;
	margin: 0 !important;
	color: #fff !important;
	font-size: clamp(3.2rem, 7.2vw, 7.25rem) !important;
	font-weight: 750 !important;
	letter-spacing: -.065em !important;
	line-height: .91 !important;
	text-wrap: balance;
	text-shadow: 0 4px 34px rgba(0,0,0,.42);
	opacity: 1 !important;
}

.dj-hero__excerpt {
	max-width: 690px;
	margin: 28px 0 0 !important;
	color: rgba(255,255,255,.88) !important;
	font-size: clamp(1rem, 1.7vw, 1.35rem) !important;
	font-weight: 350;
	line-height: 1.55;
	text-shadow: 0 2px 18px rgba(0,0,0,.42);
}

.dj-hero__excerpt .wp-block-post-excerpt__more-text { display: none; }

.dj-hero__actions {
	position: relative;
	z-index: 8;
	margin-top: 34px !important;
	pointer-events: auto;
}

.dj-hero__actions .wp-block-button__link {
	position: relative;
	z-index: 9;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 28px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 999px;
	background: rgba(255,255,255,.94) !important;
	color: #111217 !important;
	font-size: .95rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 14px 45px rgba(0,0,0,.28);
	backdrop-filter: blur(12px);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
	pointer-events: auto;
	cursor: pointer;
}

.dj-hero__actions .wp-block-button__link:hover {
	transform: translateY(-2px);
	background: #fff !important;
	box-shadow: 0 18px 55px rgba(0,0,0,.38);
}

.dj-scroll-cue {
	position: absolute;
	right: 0;
	bottom: clamp(34px, 5vw, 66px);
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 13px;
	color: rgba(255,255,255,.84) !important;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-decoration: none !important;
	text-transform: uppercase;
	pointer-events: auto;
}

.dj-scroll-cue span {
	position: relative;
	display: block;
	width: 1px;
	height: 46px;
	overflow: hidden;
	background: rgba(255,255,255,.28);
}

.dj-scroll-cue span::after {
	content: "";
	position: absolute;
	inset: -100% 0 auto;
	height: 100%;
	background: #fff;
	animation: djomg-scroll 2.2s ease-in-out infinite;
}

@keyframes djomg-scroll {
	0% { transform: translateY(0); }
	100% { transform: translateY(200%); }
}

/* CONTENT */
.dj-main {
	position: relative;
	z-index: 12;
	margin: -34px 0 0 !important;
	padding: 0 clamp(18px, 3vw, 44px) clamp(76px, 9vw, 130px);
	background:
		radial-gradient(circle at 8% 4%, rgba(105,214,231,.13), transparent 26%),
		var(--djomg-paper);
}

.dj-content-shell {
	width: min(100%, var(--djomg-wide));
	margin-inline: auto !important;
	padding: clamp(42px, 6vw, 86px) clamp(24px, 6vw, 90px);
	border: 1px solid rgba(17,18,23,.08);
	border-radius: var(--djomg-radius);
	background: rgba(255,255,255,.94);
	box-shadow: 0 34px 90px rgba(20,20,30,.12);
	box-sizing: border-box;
	backdrop-filter: blur(18px);
}

.dj-content-shell > .wp-block-post-content {
	margin: 0 !important;
}

.dj-content-shell .alignwide { max-width: 1160px; }
.dj-content-shell .alignfull {
	width: auto;
	max-width: none;
	margin-inline: calc(clamp(24px, 6vw, 90px) * -1) !important;
}

.dj-content-shell h1,
.dj-content-shell h2,
.dj-content-shell h3 {
	letter-spacing: -.045em;
	line-height: 1.04;
}

.dj-content-shell h2 {
	font-size: clamp(2.25rem, 4vw, 4.4rem);
}

.dj-content-shell p,
.dj-content-shell li {
	line-height: 1.75;
}

.dj-content-shell img,
.dj-content-shell video,
.dj-content-shell iframe {
	border-radius: 20px;
}

.dj-content-shell .wp-block-group.has-background,
.dj-content-shell .wp-block-columns.has-background {
	border-radius: 24px;
}

/* FOOTER */
.dj-footer {
	position: relative;
	margin: 0 !important;
	padding: clamp(68px, 8vw, 118px) clamp(24px, 5vw, 70px) 32px;
	overflow: hidden;
	background:
		radial-gradient(circle at 13% 8%, rgba(105,214,231,.15), transparent 30%),
		radial-gradient(circle at 88% 40%, rgba(181,106,242,.14), transparent 32%),
		var(--djomg-night);
	color: var(--djomg-white);
}

.dj-footer__inner {
	width: min(100%, var(--djomg-wide));
	margin-inline: auto !important;
}

.dj-footer__grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
	gap: clamp(50px, 8vw, 130px);
	align-items: end;
	padding-bottom: 58px;
}

.dj-footer__brand .wp-block-site-title {
	margin: 0;
	font-size: clamp(2.7rem, 5vw, 5.6rem);
	font-weight: 750;
	letter-spacing: -.065em;
	line-height: .95;
}

.dj-footer__brand .wp-block-site-title a {
	color: #fff !important;
	text-decoration: none;
}

.dj-footer__brand .wp-block-site-tagline {
	margin: 20px 0 0;
	color: rgba(255,255,255,.66);
	font-size: 1rem;
}

.dj-footer__text {
	max-width: 680px;
	margin-top: 30px !important;
	color: rgba(255,255,255,.68) !important;
	line-height: 1.7;
}

.dj-footer .wp-block-social-links {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: 0;
}

.dj-footer .wp-social-link {
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 999px !important;
	background: rgba(255,255,255,.07) !important;
	color: #fff !important;
	transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.dj-footer .wp-social-link:hover {
	transform: translateY(-3px);
	border-color: rgba(255,255,255,.40);
	background: rgba(255,255,255,.14) !important;
}

.dj-footer .wp-social-link a {
	padding: 12px 16px !important;
}

.dj-footer .wp-block-social-link-label {
	font-size: .72rem !important;
	font-weight: 700;
	letter-spacing: .04em;
}

.dj-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,.12);
	color: rgba(255,255,255,.52);
	font-size: .78rem;
}

.dj-footer__bottom p { margin: 0; }

@media (max-width: 900px) {
	body.admin-bar .dj-hero,
	body.admin-bar .dj-hero__inner { min-height: calc(100svh - 46px); }
	.dj-hero__inner { width: min(calc(100% - 36px), var(--djomg-wide)); }
	.dj-hero__topbar .wp-block-site-tagline { display: none; }
	.dj-hero__content { width: 100%; padding-top: 110px; }
	.dj-hero__title { font-size: clamp(3rem, 12vw, 5.7rem) !important; }
	.dj-scroll-cue { right: 2px; }
	.dj-footer__grid { grid-template-columns: 1fr; align-items: start; }
	.dj-footer .wp-block-social-links { justify-content: flex-start; }
}

@media (max-width: 600px) {
	.dj-hero__inner { padding-top: 22px; padding-bottom: 34px; }
	.dj-hero__content { padding-top: 80px; padding-bottom: 74px; }
	.dj-hero__title { font-size: clamp(2.8rem, 15vw, 4.6rem) !important; line-height: .94 !important; }
	.dj-hero__excerpt { font-size: 1rem !important; }
	.dj-scroll-cue { left: 0; right: auto; bottom: 24px; }
	.dj-main { margin-top: -20px !important; padding-inline: 10px; }
	.dj-content-shell { border-radius: 22px; padding: 34px 20px 54px; }
	.dj-content-shell .alignfull { margin-inline: -20px !important; }
	.dj-footer { padding-inline: 20px; }
	.dj-footer .wp-block-social-links { gap: 8px; }
	.dj-footer .wp-social-link a { padding: 11px !important; }
	.dj-footer .wp-block-social-link-label { display: none; }
	.dj-footer__bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.dj-scroll-cue span::after { animation: none; }
	.dj-hero__actions .wp-block-button__link,
	.dj-footer .wp-social-link { transition: none; }
}

/* =========================================================
   INSERTABLE DJ ORONZO CONTENT PATTERNS
   ========================================================= */

.dj-pattern {
	position: relative;
	box-sizing: border-box;
	margin-block: clamp(54px, 8vw, 110px) !important;
}

.dj-pattern:first-child {
	margin-top: 0 !important;
}

.dj-pattern-columns {
	gap: clamp(34px, 6vw, 84px) !important;
	margin: 0 !important;
}

.dj-pattern-kicker {
	margin: 0 0 18px !important;
	color: #527786 !important;
	font-size: .72rem !important;
	font-weight: 780 !important;
	letter-spacing: .22em !important;
	line-height: 1.35 !important;
	text-transform: uppercase;
}

.dj-pattern-title {
	max-width: 900px;
	margin: 0 !important;
	font-size: clamp(2.3rem, 4.3vw, 4.8rem) !important;
	font-weight: 720 !important;
	letter-spacing: -.055em !important;
	line-height: .98 !important;
	text-wrap: balance;
}

.dj-pattern-lead {
	max-width: 760px;
	margin: 25px 0 0 !important;
	font-size: clamp(1.12rem, 1.65vw, 1.4rem) !important;
	font-weight: 520;
	letter-spacing: -.02em;
	line-height: 1.55 !important;
}

.dj-pattern-actions {
	margin-top: 30px !important;
}

.dj-pattern .wp-block-button__link {
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--djomg-ink) !important;
	color: #fff !important;
	font-size: .9rem;
	font-weight: 720;
	padding: 14px 24px;
	box-shadow: 0 12px 34px rgba(17,18,23,.14);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.dj-pattern .wp-block-button__link:hover {
	transform: translateY(-2px);
	background: #252832 !important;
	box-shadow: 0 18px 42px rgba(17,18,23,.2);
}

.dj-pattern .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(17,18,23,.22);
	background: transparent !important;
	color: var(--djomg-ink) !important;
	box-shadow: none;
}

.dj-pattern-story {
	padding: clamp(10px, 2vw, 26px) 0;
}

.dj-pattern-story .wp-block-column > p:not(.dj-pattern-kicker):not(.dj-pattern-lead) {
	max-width: 720px;
}

.dj-visual-card,
.dj-editorial-image {
	position: relative;
	overflow: hidden;
	border-radius: 26px !important;
	background: #12141b;
	box-shadow: 0 28px 80px rgba(16,18,25,.2);
}

.dj-visual-card {
	padding: 12px;
}

.dj-visual-card__image,
.dj-editorial-image {
	margin: 0 !important;
}

.dj-visual-card__image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 18px !important;
}

.dj-visual-card__caption {
	padding: 25px 20px 18px;
	color: #fff;
}

.dj-visual-card__caption .dj-pattern-kicker {
	color: rgba(255,255,255,.58) !important;
}

.dj-visual-card__caption h3 {
	margin: 0 !important;
	color: #fff;
	font-size: clamp(1.45rem, 2vw, 2rem);
	font-weight: 680;
}

.dj-editorial-image img {
	display: block;
	width: 100%;
	min-height: 430px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.dj-pattern-dark {
	width: auto;
	max-width: none !important;
	margin-inline: calc(clamp(24px, 6vw, 90px) * -1) !important;
	padding: clamp(58px, 8vw, 100px) clamp(24px, 6vw, 90px);
	overflow: hidden;
	border-radius: 28px;
	background:
		radial-gradient(circle at 10% 8%, rgba(105,214,231,.17), transparent 34%),
		radial-gradient(circle at 92% 70%, rgba(181,106,242,.16), transparent 36%),
		linear-gradient(145deg, #161922, #08090d 72%);
	color: #fff;
	box-shadow: 0 28px 90px rgba(8,9,13,.22);
}

.dj-pattern-dark .dj-pattern-kicker {
	color: rgba(105,214,231,.82) !important;
}

.dj-pattern-dark .dj-pattern-title,
.dj-pattern-dark h2,
.dj-pattern-dark h3,
.dj-pattern-dark p,
.dj-pattern-dark figcaption {
	color: #fff !important;
}

.dj-pattern-dark p:not(.dj-pattern-kicker) {
	color: rgba(255,255,255,.74) !important;
}

.dj-pattern-dark .dj-pattern-lead {
	color: rgba(255,255,255,.91) !important;
}

.dj-pattern-dark .wp-block-button__link {
	background: #fff !important;
	color: #111217 !important;
}

.dj-pattern-dark .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(255,255,255,.32);
	background: transparent !important;
	color: #fff !important;
}

.dj-pattern-video__media {
	margin: 0 !important;
}

.dj-pattern-video__media video {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 22px;
	background: #000;
	box-shadow: 0 24px 70px rgba(0,0,0,.38);
}

.dj-pattern-video__media figcaption {
	margin: 12px 2px 0;
	font-size: .76rem;
	opacity: .65;
}

.dj-pattern-media__heading {
	margin: 0 0 clamp(38px, 5vw, 62px) !important;
}

.dj-media-card {
	height: 100%;
	padding: clamp(26px, 4vw, 44px);
	border: 1px solid rgba(255,255,255,.13);
	border-radius: 24px;
	background: rgba(255,255,255,.065);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
	box-sizing: border-box;
	backdrop-filter: blur(16px);
}

.dj-media-card--primary {
	background: rgba(255,255,255,.09);
}

.dj-media-card h3 {
	margin: 0 0 22px !important;
	font-size: clamp(1.8rem, 3vw, 3rem);
	font-weight: 680;
	letter-spacing: -.04em;
}

.dj-media-card__cover {
	margin: 0 0 28px !important;
}

.dj-media-card__cover img {
	width: min(100%, 290px);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 18px !important;
	box-shadow: 0 22px 54px rgba(0,0,0,.3);
}

.dj-spotify-embed {
	margin: 0 0 24px !important;
}

.dj-spotify-embed iframe {
	width: 100%;
	min-height: 352px;
	border-radius: 18px !important;
}

.dj-pattern-grid__heading {
	max-width: 850px;
	margin: 0 0 clamp(36px, 5vw, 58px) !important;
}

.dj-card-grid {
	gap: clamp(22px, 3vw, 36px) !important;
	align-items: stretch !important;
	margin: 0 !important;
}

.dj-card-grid > .wp-block-column {
	display: flex;
}

.dj-project-card {
	display: flex !important;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 12px 12px 28px;
	border: 1px solid rgba(17,18,23,.09);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 20px 56px rgba(22,24,32,.09);
	box-sizing: border-box;
}

.dj-project-card .wp-block-image {
	margin: 0 0 26px !important;
}

.dj-project-card .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 16px !important;
}

.dj-project-card > :not(.wp-block-image) {
	margin-right: 14px;
	margin-left: 14px;
}

.dj-project-card h3 {
	margin-top: 0 !important;
	font-size: clamp(1.55rem, 2.3vw, 2.25rem);
	font-weight: 680;
	letter-spacing: -.04em;
}

.dj-project-card .wp-block-buttons {
	margin-top: auto !important;
	padding-top: 18px;
}

@media (max-width: 900px) {
	.dj-pattern-columns {
		gap: 42px !important;
	}

	.dj-pattern-dark {
		margin-inline: calc(clamp(24px, 6vw, 90px) * -1) !important;
		border-radius: 22px;
	}

	.dj-card-grid {
		flex-wrap: wrap !important;
	}

	.dj-card-grid > .wp-block-column {
		flex-basis: calc(50% - 18px) !important;
		flex-grow: 1;
	}
}

@media (max-width: 781px) {
	.dj-pattern {
		margin-block: 62px !important;
	}

	.dj-pattern-columns {
		gap: 34px !important;
	}

	.dj-pattern-story--image-right .wp-block-columns {
		flex-direction: column;
	}

	.dj-pattern-story--image-left .wp-block-columns {
		flex-direction: column;
	}

	.dj-pattern-story--image-right .wp-block-column,
	.dj-pattern-story--image-left .wp-block-column,
	.dj-pattern-video .wp-block-column,
	.dj-pattern-media .wp-block-column {
		flex-basis: 100% !important;
	}

	.dj-visual-card__image img {
		aspect-ratio: 4 / 3;
	}

	.dj-editorial-image img {
		min-height: 320px;
	}

	.dj-pattern-dark {
		padding: 50px 24px;
	}

	.dj-card-grid > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 600px) {
	.dj-pattern-title {
		font-size: clamp(2.15rem, 12vw, 3.35rem) !important;
	}

	.dj-pattern-dark {
		margin-inline: -20px !important;
		border-radius: 18px;
	}

	.dj-visual-card,
	.dj-editorial-image,
	.dj-media-card,
	.dj-project-card {
		border-radius: 18px !important;
	}
}

/* English homepage composition */
.dj-letter-signature {
	margin: 24px 0 0 !important;
}

.dj-letter-signature img {
	width: min(100%, 245px) !important;
	height: auto !important;
	border-radius: 0 !important;
}

.dj-pattern-copy-grid {
	align-items: flex-start !important;
	margin-top: clamp(36px, 5vw, 64px) !important;
}

.dj-pattern-copy-grid h3 {
	margin-top: 30px !important;
	font-size: clamp(1.45rem, 2.2vw, 2.15rem);
	font-weight: 680;
	letter-spacing: -.035em;
}

.dj-pattern-copy-grid h3:first-child {
	margin-top: 0 !important;
}

.dj-pattern-copy-grid .wp-block-list {
	padding-left: 1.25em;
}

.dj-pattern-copy-grid .wp-block-list li {
	margin-top: 14px;
}

.dj-preview-heading {
	margin: clamp(48px, 7vw, 86px) 0 28px !important;
	font-size: clamp(1.8rem, 3vw, 3rem);
	font-weight: 700;
	letter-spacing: -.04em;
}

.dj-project-card--preview {
	padding-top: 30px;
}

.dj-project-card--preview ._df_thumb,
.dj-media-card ._df_thumb {
	max-width: 100%;
	margin: 12px 14px 24px !important;
	overflow: hidden;
	border-radius: 18px;
}

.dj-project-card--preview ._df_thumb img,
.dj-media-card ._df_thumb img {
	max-width: 100%;
	height: auto;
	border-radius: 18px;
}

.dj-preview-grid {
	align-items: stretch !important;
}

@media (max-width: 781px) {
	.dj-pattern-copy-grid .wp-block-column {
		flex-basis: 100% !important;
	}
}


/* Fix 3.0.3: story sections should align media to the top, not vertically centered */
.dj-pattern-story .wp-block-columns {
	align-items: flex-start !important;
}

.dj-pattern-story .wp-block-column.is-vertically-aligned-center {
	align-self: flex-start !important;
}


/* =========================================================
   FIX 3.0.4 – USE THE FULL WIDTH INSIDE INSERTED PATTERNS
   WordPress constrained-layout rules otherwise limit direct
   child columns to the global content width (about 645px).
   ========================================================= */
.dj-content-shell .dj-pattern {
	width: 100% !important;
	max-width: 1160px !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

.dj-content-shell .dj-pattern > .dj-pattern-columns,
.dj-content-shell .dj-pattern > .wp-block-columns,
.dj-content-shell .dj-pattern > .dj-card-grid,
.dj-content-shell .dj-pattern > .dj-pattern-grid__heading,
.dj-content-shell .dj-pattern > .dj-pattern-media__heading,
.dj-content-shell .dj-pattern > .dj-preview-heading {
	width: 100% !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.dj-content-shell .dj-pattern-story > .wp-block-columns.dj-pattern-columns {
	display: flex !important;
	width: 100% !important;
	max-width: none !important;
}

.dj-content-shell .dj-pattern-story > .wp-block-columns.dj-pattern-columns > .wp-block-column {
	max-width: none !important;
}

/* Keep full-width dark sections extending to the shell edges. */
.dj-content-shell .dj-pattern-dark {
	width: auto !important;
	max-width: none !important;
}

@media (max-width: 781px) {
	.dj-content-shell .dj-pattern {
		max-width: 100% !important;
	}
}


/* =========================================================
   FIX 3.0.5 – REMOVE THE WIDTH LIMIT FROM POST CONTENT ITSELF
   The Post Content block was the element restricted to the
   global content width. Child pattern width rules cannot grow
   beyond a narrow parent, so the parent must be opened first.
   ========================================================= */
.dj-content-shell > .wp-block-post-content,
.dj-content-shell > .wp-block-post-content.is-layout-constrained,
.dj-content-shell > .wp-block-post-content.is-layout-flow {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.dj-content-shell > .wp-block-post-content > .dj-pattern {
	width: 100% !important;
	max-width: 1160px !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

.dj-content-shell > .wp-block-post-content > .dj-pattern.dj-pattern-dark {
	width: auto !important;
	max-width: none !important;
}

/* =========================================================
   FIX 3.0.6 – RESPECT THE COLUMN WIDTHS SET IN WORDPRESS
   Version 3.0.5 used a fixed CSS grid (58/42 and 52/48).
   That overrode every percentage selected in the block editor.
   The layout now uses the native Columns flex layout again, so
   each column's inline flex-basis remains editable per section.
   ========================================================= */
.dj-content-shell .dj-pattern-story .dj-pattern-columns {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	align-items: flex-start !important;
	width: 100% !important;
	max-width: none !important;
}

.dj-content-shell .dj-pattern-story .dj-pattern-columns > .wp-block-column {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	/* Deliberately no flex-basis rule: WordPress controls it. */
}

@media (max-width: 781px) {
	.dj-content-shell .dj-pattern-story .dj-pattern-columns {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
	}

	.dj-content-shell .dj-pattern-story .dj-pattern-columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

/* =========================================================
   PANORAMA STORY 21:8
   Single-column editorial layout. The image is always shown
   completely; it is never cropped with object-fit: cover.
   ========================================================= */
.dj-content-shell .dj-panorama-story {
	width: 100% !important;
	max-width: 1160px !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

.dj-panorama-story__header {
	width: 100%;
	max-width: 980px;
	margin: 0 0 clamp(30px, 4vw, 48px) !important;
}

.dj-panorama-story__subtitle {
	max-width: 900px !important;
}

.dj-panorama-story__media {
	display: block;
	width: 100% !important;
	max-width: none !important;
	aspect-ratio: 21 / 8;
	margin: 0 0 clamp(34px, 5vw, 58px) !important;
	overflow: hidden;
	border: 1px solid rgba(17,18,23,.10);
	border-radius: 26px !important;
	background: #0e1016;
	box-shadow: 0 28px 80px rgba(16,18,25,.16);
}

.dj-panorama-story__media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: center center !important;
	border-radius: 0 !important;
}

.dj-panorama-story__content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.dj-panorama-story__content > p {
	margin-top: 0;
	margin-bottom: 1.35em;
}

@media (max-width: 600px) {
	.dj-panorama-story__media {
		border-radius: 18px !important;
	}
}

/* =========================================================
   VERSION 3.1.0 – LANGUAGE-INDEPENDENT MEDIA STORY
   Long text no longer sits in a narrow vertical column.
   The media and one compact highlight form the stage; the
   detailed body copy follows below in two balanced columns.
   ========================================================= */
.dj-media-story {
	width: auto !important;
	max-width: none !important;
	margin-inline: calc(clamp(24px, 6vw, 90px) * -1) !important;
	padding: clamp(58px, 8vw, 104px) clamp(24px, 6vw, 90px);
	overflow: hidden;
	border-radius: 30px;
	background:
		radial-gradient(circle at 8% 5%, rgba(105,214,231,.18), transparent 32%),
		radial-gradient(circle at 92% 72%, rgba(181,106,242,.18), transparent 35%),
		linear-gradient(145deg, #161a23 0%, #090a0f 68%, #12101a 100%);
	color: #fff;
	box-shadow: 0 30px 95px rgba(8,9,13,.22);
}

.dj-media-story__inner {
	width: 100% !important;
	max-width: 1160px !important;
	margin-inline: auto !important;
}

.dj-media-story__header {
	width: 100%;
	max-width: 980px;
	margin: 0 0 clamp(38px, 6vw, 70px) !important;
}

.dj-media-story .dj-pattern-kicker {
	color: rgba(105,214,231,.86) !important;
}

.dj-media-story .dj-pattern-title,
.dj-media-story h3 {
	color: #fff !important;
}

.dj-media-story .dj-pattern-lead {
	color: rgba(255,255,255,.82) !important;
}

.dj-media-story__stage {
	align-items: stretch !important;
	gap: clamp(28px, 5vw, 68px) !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.dj-media-story__stage > .wp-block-column {
	display: flex;
	min-width: 0;
}

.dj-media-story__media {
	width: 100%;
	margin: 0 !important;
	padding: 10px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 26px;
	background: rgba(0,0,0,.30);
	box-shadow: 0 28px 75px rgba(0,0,0,.35);
}

.dj-media-story__media video,
.dj-media-story__media img,
.dj-media-story__media iframe {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: contain !important;
	border-radius: 18px !important;
	background: #000;
}

.dj-media-story__media figcaption {
	margin: 12px 8px 2px;
	color: rgba(255,255,255,.58) !important;
	font-size: .76rem;
}

.dj-media-story__highlight {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding: clamp(32px, 5vw, 62px);
	border: 1px solid rgba(255,255,255,.13);
	border-radius: 26px;
	background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
	box-sizing: border-box;
	backdrop-filter: blur(16px);
}

.dj-media-story__highlight h3 {
	max-width: 720px;
	margin: 0 !important;
	font-size: clamp(2rem, 3.5vw, 4rem);
	font-weight: 700;
	letter-spacing: -.05em;
	line-height: 1.02;
}

.dj-media-story__highlight > p:not(.dj-pattern-kicker) {
	max-width: 680px;
	margin-top: 24px !important;
	color: rgba(255,255,255,.72) !important;
	font-size: clamp(1rem, 1.4vw, 1.18rem);
	line-height: 1.7;
}

.dj-media-story .wp-block-button__link {
	background: #fff !important;
	color: #111217 !important;
}

.dj-media-story__copy {
	gap: clamp(34px, 6vw, 86px) !important;
	width: 100% !important;
	max-width: none !important;
	margin: clamp(46px, 7vw, 82px) 0 0 !important;
	padding-top: clamp(34px, 5vw, 58px);
	border-top: 1px solid rgba(255,255,255,.13);
}

.dj-media-story__copy p {
	margin-top: 0;
	color: rgba(255,255,255,.72) !important;
	font-size: clamp(.98rem, 1.2vw, 1.08rem);
	line-height: 1.82 !important;
}

@media (max-width: 781px) {
	.dj-media-story {
		margin-inline: -20px !important;
		padding: 50px 24px;
		border-radius: 20px;
	}

	.dj-media-story__stage,
	.dj-media-story__copy {
		flex-direction: column !important;
	}

	.dj-media-story__stage > .wp-block-column,
	.dj-media-story__copy > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

/* =========================================================
   VERSION 3.1.0 – PER-PAGE MULTILINGUAL FOOTER
   ========================================================= */
.dj-footer__tagline {
	margin: 20px 0 0 !important;
	color: rgba(255,255,255,.78) !important;
	font-size: 1rem;
}

.dj-footer__tagline:empty,
.dj-footer__text:empty,
.dj-footer__bottom p:empty {
	display: none;
}

.dj-footer-socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	margin: 0;
}

.dj-footer-socials__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 10px 15px;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 999px;
	background: rgba(255,255,255,.07);
	color: #fff !important;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none !important;
	transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.dj-footer-socials__link:hover {
	transform: translateY(-3px);
	border-color: rgba(255,255,255,.40);
	background: rgba(255,255,255,.14);
}

.dj-footer-socials__icon {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
}

.dj-footer-socials__icon svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

@media (max-width: 900px) {
	.dj-footer-socials {
		justify-content: flex-start;
	}
}

@media (max-width: 600px) {
	.dj-footer-socials__link {
		padding: 11px;
	}

	.dj-footer-socials__label {
		display: none;
	}
}


/* =========================================================
   VERSION 3.1.1 – EDITABLE PARAGRAPH RHYTHM
   Adds a real gap between individual text blocks. This also
   creates enough hover area in the block editor for the blue
   inserter marker between paragraphs. Existing inserted media
   story blocks receive the fix without being reinserted.
   ========================================================= */
.dj-media-story {
	--djomg-paragraph-gap: clamp(20px, 2.2vw, 30px);
}

/* Long copy below the media stage. */
.dj-media-story__copy > .wp-block-column > :where(p, h2, h3, h4, ul, ol, .wp-block-buttons) + :where(p, h2, h3, h4, ul, ol, .wp-block-buttons) {
	margin-block-start: var(--djomg-paragraph-gap) !important;
}

/* Text placed directly in the right-hand stage column. This
   covers pages where the user has replaced the compact highlight
   with several editable paragraph blocks. */
.dj-media-story__stage > .wp-block-column:last-child > :where(p, h2, h3, h4, ul, ol, .wp-block-buttons) + :where(p, h2, h3, h4, ul, ol, .wp-block-buttons),
.dj-media-story__stage > .wp-block-column:last-child > .wp-block-group > :where(p, h2, h3, h4, ul, ol, .wp-block-buttons) + :where(p, h2, h3, h4, ul, ol, .wp-block-buttons) {
	margin-block-start: var(--djomg-paragraph-gap) !important;
}

/* Keep the compact highlight hierarchy deliberate. */
.dj-media-story__highlight > .dj-pattern-kicker + h3 {
	margin-block-start: 14px !important;
}

.dj-media-story__highlight > h3 + p,
.dj-media-story__highlight > p:not(.dj-pattern-kicker) + p:not(.dj-pattern-kicker) {
	margin-block-start: 24px !important;
}

.dj-media-story__highlight > p + .wp-block-buttons,
.dj-media-story__highlight > h3 + .wp-block-buttons {
	margin-block-start: 28px !important;
}

/* Gutenberg editor fallback: block wrappers, rather than only
   their inner p elements, need vertical room for the inserter. */
.editor-styles-wrapper .dj-media-story__copy > .wp-block-column > .block-editor-block-list__block + .block-editor-block-list__block,
.editor-styles-wrapper .dj-media-story__stage > .wp-block-column:last-child > .block-editor-block-list__block + .block-editor-block-list__block,
.editor-styles-wrapper .dj-media-story__highlight > .block-editor-block-list__block + .block-editor-block-list__block {
	margin-block-start: var(--djomg-paragraph-gap) !important;
}


/* =========================================================
   VERSION 3.1.2 – FULL-HEIGHT SPOTIFY + DEARFLIP LANGUAGE TRIGGERS
   ========================================================= */

/* Make both cards in the media section genuinely equal-height. */
.dj-pattern-media > .wp-block-columns,
.dj-pattern-media .dj-pattern-columns {
	align-items: stretch !important;
}

.dj-pattern-media > .wp-block-columns > .wp-block-column,
.dj-pattern-media .dj-pattern-columns > .wp-block-column {
	display: flex !important;
	min-width: 0;
}

.dj-pattern-media .dj-media-card {
	width: 100%;
}

/* Let the Spotify album viewer consume all remaining vertical space
   in the primary card instead of stopping at the default 352px. */
.dj-pattern-media .dj-media-card--primary {
	display: flex !important;
	flex-direction: column;
}

.dj-pattern-media .dj-media-card--primary .dj-spotify-embed {
	display: flex;
	flex: 1 1 auto;
	width: 100%;
	min-height: clamp(540px, 55vw, 690px);
	margin: 0 0 24px !important;
}

.dj-pattern-media .dj-media-card--primary .dj-spotify-embed .wp-block-embed__wrapper {
	display: flex;
	flex: 1 1 auto;
	width: 100%;
	min-height: inherit;
}

.dj-pattern-media .dj-media-card--primary .dj-spotify-embed iframe {
	display: block;
	flex: 1 1 auto;
	width: 100% !important;
	height: 100% !important;
	min-height: inherit !important;
	border-radius: 18px !important;
}

/* DearFlip Lite keeps its supported thumbnail trigger. The thumbnail
   is visually transformed into a language button, while retaining the
   plugin's native click handler that opens the lightbox. */
.dj-booklet-triggers {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 14px;
	width: 100%;
	margin-top: 28px !important;
}

.dj-booklet-trigger,
.dj-booklet-trigger .wp-block-shortcode {
	width: 100%;
	margin: 0 !important;
}

.dj-booklet-trigger ._df_thumb {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100% !important;
	max-width: none !important;
	min-height: 54px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 14px 20px !important;
	border: 1px solid rgba(255,255,255,.25) !important;
	border-radius: 999px !important;
	background: #fff !important;
	background-image: none !important;
	color: #111217 !important;
	font-size: 0 !important;
	font-weight: 760 !important;
	letter-spacing: .025em;
	line-height: 1.2 !important;
	text-align: center;
	text-transform: uppercase;
	box-shadow: 0 12px 32px rgba(0,0,0,.16);
	box-sizing: border-box;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.dj-booklet-trigger ._df_thumb:hover,
.dj-booklet-trigger ._df_thumb:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 17px 38px rgba(0,0,0,.24);
}

.dj-booklet-trigger--de ._df_thumb {
	background: transparent !important;
	color: #fff !important;
}

.dj-booklet-trigger--de ._df_thumb:hover,
.dj-booklet-trigger--de ._df_thumb:focus-visible {
	background: rgba(255,255,255,.08) !important;
}

.dj-booklet-trigger ._df_thumb::before {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: 1.22rem;
	font-weight: 400;
	line-height: 1;
}

.dj-booklet-trigger--it ._df_thumb::before {
	content: "🇮🇹";
}

.dj-booklet-trigger--de ._df_thumb::before {
	content: "🇩🇪";
}

/* Use neutral language names, independent of the language of the page. */
.dj-booklet-trigger ._df_thumb::after {
	display: inline !important;
	font-size: .82rem;
	font-weight: 760;
	letter-spacing: .025em;
	line-height: 1.2;
}

.dj-booklet-trigger--it ._df_thumb::after {
	content: "ITALIANO";
}

.dj-booklet-trigger--de ._df_thumb::after {
	content: "DEUTSCH";
}

/* Hide any thumbnail artwork that DearFlip may inject inside the trigger. */
.dj-booklet-trigger ._df_thumb img {
	display: none !important;
}

@media (max-width: 781px) {
	.dj-pattern-media .dj-media-card--primary .dj-spotify-embed {
		min-height: 500px;
	}
}

@media (max-width: 600px) {
	.dj-pattern-media .dj-media-card--primary .dj-spotify-embed {
		min-height: 430px;
	}
}


/* =========================================================
   VERSION 3.1.3 – CLEAN LANGUAGE BUTTONS
   Replaces flag emoji fallbacks (IT/DE letters) with real CSS
   flags and prevents language labels from wrapping.
   ========================================================= */
.dj-booklet-trigger ._df_thumb {
	justify-content: flex-start !important;
	gap: 13px !important;
	min-height: 58px !important;
	padding: 13px 22px !important;
	background: rgba(255,255,255,.075) !important;
	border-color: rgba(255,255,255,.22) !important;
	color: #fff !important;
	text-transform: none !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.14) !important;
	white-space: nowrap !important;
	overflow: hidden;
}

.dj-booklet-trigger ._df_thumb:hover,
.dj-booklet-trigger ._df_thumb:focus-visible,
.dj-booklet-trigger--de ._df_thumb:hover,
.dj-booklet-trigger--de ._df_thumb:focus-visible {
	background: rgba(255,255,255,.14) !important;
	border-color: rgba(255,255,255,.42) !important;
	color: #fff !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 17px 38px rgba(0,0,0,.22) !important;
}

/* Neutralise the old emoji flags. */
.dj-booklet-trigger ._df_thumb::before {
	content: "" !important;
	display: block !important;
	flex: 0 0 28px;
	width: 28px;
	height: 18px;
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(0,0,0,.28);
	box-sizing: border-box;
}

.dj-booklet-trigger--it ._df_thumb::before {
	background: linear-gradient(90deg,
		#009246 0 33.333%,
		#ffffff 33.333% 66.666%,
		#ce2b37 66.666% 100%);
}

.dj-booklet-trigger--de ._df_thumb::before {
	background: linear-gradient(180deg,
		#111111 0 33.333%,
		#dd0000 33.333% 66.666%,
		#ffce00 66.666% 100%);
}

.dj-booklet-trigger ._df_thumb::after {
	display: block !important;
	flex: 1 1 auto;
	min-width: 0;
	font-size: .92rem !important;
	font-weight: 720 !important;
	letter-spacing: .01em !important;
	line-height: 1 !important;
	text-align: left;
	text-transform: none;
	white-space: nowrap !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
}

.dj-booklet-trigger--it ._df_thumb::after {
	content: "Italiano" !important;
}

.dj-booklet-trigger--de ._df_thumb::after {
	content: "Deutsch" !important;
}

@media (max-width: 480px) {
	.dj-booklet-trigger ._df_thumb {
		padding-inline: 18px !important;
	}
}


/* =========================================================
   VERSION 3.1.4 – COMPACT FLAG + LANGUAGE LABEL
   DearFlip may position generated labels at the far edge. Force
   both pseudo-elements back into the normal flex flow so the
   language name sits directly beside its flag.
   ========================================================= */
.dj-booklet-trigger ._df_thumb {
	justify-content: flex-start !important;
	column-gap: 12px !important;
}

.dj-booklet-trigger ._df_thumb::before,
.dj-booklet-trigger ._df_thumb::after {
	position: static !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	float: none !important;
	transform: none !important;
	margin: 0 !important;
}

.dj-booklet-trigger ._df_thumb::before {
	flex: 0 0 28px !important;
}

.dj-booklet-trigger ._df_thumb::after {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	text-align: left !important;
}


/* =========================================================
   VERSION 3.1.5 – STABLE BOOKLET BUTTONS + ENGLISH
   Visible labels are no longer generated on DearFlip's own
   element. DearFlip becomes only an invisible click overlay,
   so late plugin styling cannot move the language text.
   ========================================================= */
.dj-booklet-buttons,
.dj-booklet-triggers {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 14px;
	width: 100%;
	margin-top: 28px !important;
}

.dj-booklet-button,
.dj-booklet-trigger {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	width: 100% !important;
	min-height: 58px !important;
	margin: 0 !important;
	padding: 13px 22px !important;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.22) !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,.075) !important;
	color: #fff !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.14) !important;
	box-sizing: border-box;
	cursor: pointer;
	transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dj-booklet-button:hover,
.dj-booklet-button:focus-within,
.dj-booklet-trigger:hover,
.dj-booklet-trigger:focus-within {
	transform: translateY(-2px);
	background: rgba(255,255,255,.14) !important;
	border-color: rgba(255,255,255,.42) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 17px 38px rgba(0,0,0,.22) !important;
}

.dj-booklet-button__flag,
.dj-booklet-trigger::before {
	content: "" !important;
	position: static !important;
	display: block !important;
	flex: 0 0 28px !important;
	width: 28px !important;
	height: 18px !important;
	margin: 0 !important;
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(0,0,0,.28);
	box-sizing: border-box;
}

.dj-booklet-button__label,
.dj-booklet-trigger::after {
	position: static !important;
	display: block !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	color: #fff !important;
	font-size: .92rem !important;
	font-weight: 720 !important;
	letter-spacing: .01em !important;
	line-height: 1 !important;
	text-align: left !important;
	text-transform: none !important;
	white-space: nowrap !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
	transform: none !important;
}

.dj-booklet-button--it .dj-booklet-button__flag,
.dj-booklet-trigger--it::before {
	background: linear-gradient(90deg, #009246 0 33.333%, #fff 33.333% 66.666%, #ce2b37 66.666% 100%);
}

.dj-booklet-button--de .dj-booklet-button__flag,
.dj-booklet-trigger--de::before {
	background: linear-gradient(180deg, #111 0 33.333%, #dd0000 33.333% 66.666%, #ffce00 66.666% 100%);
}

.dj-booklet-button--en .dj-booklet-button__flag,
.dj-booklet-trigger--en::before {
	background-color: #012169;
	background-image: url("../images/flag-en.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

.dj-booklet-trigger--it::after { content: "Italiano" !important; }
.dj-booklet-trigger--de::after { content: "Deutsch" !important; }
.dj-booklet-trigger--en::after { content: "English" !important; }

/* DearFlip's element is only the transparent click target. Any
   plugin-injected text, image, width or alignment stays invisible. */
.dj-booklet-button__trigger,
.dj-booklet-button__trigger .wp-block-shortcode,
.dj-booklet-button__trigger ._df_thumb,
.dj-booklet-trigger .wp-block-shortcode,
.dj-booklet-trigger ._df_thumb {
	position: absolute !important;
	inset: 0 !important;
	z-index: 5 !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 0 !important;
	border-radius: inherit !important;
	background: transparent !important;
	background-image: none !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: -9999px !important;
	opacity: .001 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transform: none !important;
}

.dj-booklet-button__trigger ._df_thumb::before,
.dj-booklet-button__trigger ._df_thumb::after,
.dj-booklet-trigger ._df_thumb::before,
.dj-booklet-trigger ._df_thumb::after,
.dj-booklet-button__trigger img,
.dj-booklet-trigger ._df_thumb img {
	display: none !important;
	content: none !important;
}

@media (max-width: 480px) {
	.dj-booklet-button,
	.dj-booklet-trigger {
		padding-inline: 18px !important;
	}
}


/* =========================================================
   VERSION 3.1.9 – SINGLE DYNAMIC BOOKLET COMPONENT
   The visible language button and the DearFlip source are now
   separate siblings. DearFlip stays available for programmatic
   activation but can no longer render a nested button.
   ========================================================= */
.dj-booklet-buttons {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 14px;
	width: 100%;
	margin-top: 28px !important;
}

.dj-booklet-button-row {
	position: relative;
	width: 100%;
	margin: 0 !important;
}

.dj-booklet-button-row .dj-booklet-button {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
}

.dj-booklet-button__source {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.dj-booklet-button__source,
.dj-booklet-button__source * {
	max-width: 1px !important;
	max-height: 1px !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Old wrapper classes must never remain visible if a legacy
   pattern reaches the DOM before the block-tree compatibility
   filter runs. */
.dj-booklet-triggers:empty,
.dj-booklet-trigger:empty {
	display: none !important;
}


/* =========================================================
   VERSION 3.2.0 – COMPACT SINGLE-ROW FOOTER + TIGHTER END SPACE
   - Brand, tagline and description stay top-aligned.
   - Social buttons sit below the copy in one compact row.
   - Mobile keeps the same sequence; labels collapse to icons only.
   - The final content pattern no longer leaves a large white void.
   ========================================================= */

.dj-footer {
	padding-top: clamp(56px, 6vw, 88px) !important;
	padding-bottom: 28px !important;
}

.dj-footer__grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: clamp(28px, 3vw, 40px) !important;
	align-items: start !important;
	padding-bottom: 42px !important;
}

.dj-footer__brand {
	align-self: start !important;
	max-width: 820px;
}

.dj-footer__brand .wp-block-site-title {
	margin: 0 !important;
}

.dj-footer__tagline {
	margin-top: 14px !important;
}

.dj-footer__text {
	max-width: 760px !important;
	margin-top: 18px !important;
	margin-bottom: 0 !important;
	font-size: clamp(.94rem, 1.1vw, 1.05rem);
	line-height: 1.65 !important;
}

.dj-footer-socials {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	width: 100%;
	max-width: 100%;
	margin: 0 !important;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0 0 2px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.dj-footer-socials::-webkit-scrollbar {
	display: none;
}

.dj-footer-socials__link {
	flex: 0 0 auto;
	min-height: 36px !important;
	padding: 7px 12px !important;
	gap: 7px !important;
	font-size: .72rem !important;
	line-height: 1 !important;
}

.dj-footer-socials__icon,
.dj-footer-socials__icon svg {
	width: 17px !important;
	height: 17px !important;
}

.dj-footer__bottom {
	padding-top: 22px !important;
}

/* Remove the excessive blank area at the end of the white content card. */
.dj-content-shell {
	padding-bottom: clamp(38px, 4vw, 52px) !important;
}

.dj-content-shell > .wp-block-post-content > :last-child,
.dj-content-shell > .wp-block-post-content > .dj-pattern:last-child,
.dj-content-shell > .wp-block-post-content > .wp-block-group:last-child {
	margin-bottom: 0 !important;
}

.dj-main {
	padding-bottom: clamp(48px, 5vw, 68px) !important;
}

@media (max-width: 900px) {
	.dj-footer__grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 28px !important;
	}

	.dj-footer-socials {
		justify-content: flex-start !important;
	}
}

@media (max-width: 600px) {
	.dj-footer {
		padding-top: 48px !important;
		padding-inline: 20px !important;
	}

	.dj-footer__brand .wp-block-site-title {
		font-size: clamp(2.6rem, 15vw, 4rem) !important;
	}

	.dj-footer__tagline {
		margin-top: 12px !important;
	}

	.dj-footer__text {
		margin-top: 16px !important;
	}

	.dj-footer-socials {
		gap: 7px !important;
	}

	.dj-footer-socials__link {
		justify-content: center;
		width: 38px;
		height: 38px;
		min-height: 38px !important;
		padding: 0 !important;
		border-radius: 999px !important;
	}

	.dj-footer-socials__label {
		display: none !important;
	}

	.dj-footer__bottom {
		gap: 10px !important;
		padding-top: 20px !important;
	}

	.dj-content-shell {
		padding-bottom: 34px !important;
	}

	.dj-main {
		padding-bottom: 42px !important;
	}
}


/* =========================================================
   VERSION 3.2.1 – FOOTER TYPOGRAPHY + NON-CLIPPING HOVER
   - Description is visually larger than the tagline.
   - Social buttons no longer translate upward on hover,
     preventing clipping inside the horizontal scroll row.
   ========================================================= */

.dj-footer__tagline {
	font-size: clamp(.92rem, 1vw, 1rem) !important;
	line-height: 1.45 !important;
}

.dj-footer__text {
	max-width: 820px !important;
	font-size: clamp(1.08rem, 1.35vw, 1.22rem) !important;
	line-height: 1.62 !important;
	color: rgba(255,255,255,.74) !important;
}

.dj-footer-socials {
	padding-top: 2px !important;
	padding-bottom: 4px !important;
}

.dj-footer-socials__link {
	position: relative;
	z-index: 1;
	transform: none !important;
	transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}

.dj-footer-socials__link:hover,
.dj-footer-socials__link:focus-visible {
	transform: none !important;
	border-color: rgba(255,255,255,.42) !important;
	background: rgba(255,255,255,.15) !important;
	box-shadow: 0 8px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12) !important;
	outline: none;
}

@media (max-width: 600px) {
	.dj-footer__text {
		font-size: 1.05rem !important;
		line-height: 1.58 !important;
	}
}


/* =========================================================
   VERSION 3.3.0 – HERO LIGHT CONTROL + LANGUAGE SWITCHER
   ========================================================= */

.dj-hero__topbar-right {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 18px !important;
	min-width: 0;
	margin: 0 !important;
}

.dj-hero__topbar-right > .wp-block-shortcode {
	margin: 0 !important;
}

.dj-language-switcher {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.dj-language-switcher__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 28px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 8px;
	background: rgba(8,9,13,.28);
	box-shadow: 0 6px 18px rgba(0,0,0,.16);
	backdrop-filter: blur(10px);
	transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dj-language-switcher__link:hover,
.dj-language-switcher__link:focus-visible {
	border-color: rgba(255,255,255,.62);
	background: rgba(255,255,255,.14);
	box-shadow: 0 8px 22px rgba(0,0,0,.24);
	outline: none;
}

.dj-language-switcher__flag {
	display: block;
	width: 24px;
	height: 16px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 2px 6px rgba(0,0,0,.24);
	overflow: hidden;
}

.dj-language-switcher__link--de .dj-language-switcher__flag {
	background: linear-gradient(to bottom, #111 0 33.333%, #dd0000 33.333% 66.666%, #ffce00 66.666% 100%);
}

.dj-language-switcher__link--it .dj-language-switcher__flag {
	background: linear-gradient(to right, #009246 0 33.333%, #fff 33.333% 66.666%, #ce2b37 66.666% 100%);
}

.dj-language-switcher__link--en .dj-language-switcher__flag {
	background-color: #012169;
	background-image: url("../images/flag-en.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

@media (max-width: 900px) {
	.dj-hero__topbar-right {
		gap: 10px !important;
	}

	.dj-hero__topbar-right .wp-block-site-tagline {
		display: none !important;
	}
}

@media (max-width: 781px) {
	/* The main CTA already scrolls to the content; the duplicate cue is hidden on mobile. */
	.dj-scroll-cue {
		display: none !important;
	}

	.dj-hero__content {
		padding-bottom: 30px !important;
	}

	.dj-language-switcher__link {
		width: 36px;
		height: 27px;
	}
}

@media (max-width: 480px) {
	.dj-hero__topbar {
		gap: 12px !important;
	}

	.dj-hero__topbar .wp-block-site-title {
		font-size: 1.25rem !important;
	}

	.dj-language-switcher {
		gap: 5px;
	}

	.dj-language-switcher__link {
		width: 33px;
		height: 25px;
		border-radius: 7px;
	}

	.dj-language-switcher__flag {
		width: 22px;
		height: 15px;
	}
}


/* =========================================================
   VERSION 3.3.1 – CRISP ENGLISH FLAG + RELIABLE MOBILE SWITCHER
   ========================================================= */

/* Keep the language controls visible and inside the top bar at every width. */
.dj-hero__topbar,
.dj-hero__topbar-right,
.dj-hero__topbar-right > .wp-block-shortcode,
.dj-language-switcher {
	overflow: visible !important;
}

.dj-hero__topbar > .wp-block-site-title {
	min-width: 0;
	flex: 0 1 auto;
}

.dj-hero__topbar-right,
.dj-hero__topbar-right > .wp-block-shortcode,
.dj-language-switcher {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.dj-hero__topbar-right {
	flex: 0 0 auto !important;
	position: relative;
	z-index: 30;
}

.dj-hero__topbar-right > .wp-block-shortcode {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
}

@media (max-width: 781px) {
	.dj-hero__topbar {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto !important;
		align-items: center !important;
		column-gap: 12px !important;
		width: 100% !important;
	}

	.dj-hero__topbar-right {
		justify-self: end !important;
		align-self: center !important;
	}

	.dj-hero__topbar-right > .wp-block-shortcode,
	.dj-language-switcher {
		min-width: max-content !important;
	}
}

@media (max-width: 480px) {
	.dj-hero__topbar {
		column-gap: 8px !important;
	}

	.dj-hero__topbar .wp-block-site-title {
		max-width: calc(100vw - 150px);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.dj-language-switcher__link {
		flex: 0 0 32px !important;
	}
}

/* =========================================================
   VERSION 3.3.3 – CONTENT CARD END SPACING
   - Slightly taller white finish inside the content card.
   - Smaller outer gap between the white card and dark footer.
   ========================================================= */

.dj-content-shell {
	padding-bottom: clamp(58px, 5.5vw, 74px) !important;
}

.dj-main {
	padding-bottom: clamp(24px, 2.8vw, 36px) !important;
}

@media (max-width: 600px) {
	.dj-content-shell {
		padding-bottom: 46px !important;
	}

	.dj-main {
		padding-bottom: 24px !important;
	}
}


/* Version 3.4.2 – page-specific profession label */
.dj-hero__profession {
	color: var(--djomg-white) !important;
}

@media (max-width: 900px) {
	.dj-hero__profession {
		display: none !important;
	}
}


/* =========================================================
   Version 3.5.0 – calmer hero hierarchy
   ========================================================= */
.dj-hero__content {
	width: min(900px, 88%);
}

.dj-hero__title {
	max-width: 900px;
	font-size: clamp(3rem, 5.7vw, 6rem) !important;
	line-height: .94 !important;
	letter-spacing: -.055em !important;
}

.dj-hero__artist {
	max-width: 690px;
	margin: 18px 0 0 !important;
	color: rgba(255,255,255,.96) !important;
	font-size: clamp(1rem, 1.35vw, 1.22rem) !important;
	font-weight: 650;
	letter-spacing: .035em;
	line-height: 1.35;
	text-shadow: 0 2px 18px rgba(0,0,0,.42);
}

.dj-hero__artist:empty {
	display: none !important;
}

.dj-hero__artist:not(:empty) + .dj-hero__excerpt {
	margin-top: 12px !important;
}

.dj-hero__excerpt {
	margin-top: 22px !important;
}

/* Album profile / search-oriented facts block. */
.dj-album-profile {
	padding: clamp(54px, 7vw, 92px) clamp(22px, 5vw, 72px);
	border: 1px solid rgba(17,18,23,.08);
	border-radius: 26px;
	background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,245,239,.96));
	box-shadow: 0 28px 70px rgba(17,18,23,.09);
}

.dj-album-profile__header {
	max-width: 920px;
}

.dj-album-profile__facts {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px !important;
	margin-top: 34px !important;
}

.dj-album-profile__fact {
	height: 100%;
	min-height: 124px;
	margin-block-start: 0 !important;
	padding: 20px 22px;
	border: 1px solid rgba(17,18,23,.08);
	border-radius: 16px;
	background: rgba(255,255,255,.78);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* WordPress adds block margins to subsequent Group blocks. Inside the
   facts grid those margins would move all cards except the first one down. */
.dj-album-profile__facts > .dj-album-profile__fact {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.dj-album-profile__fact-label {
	margin: 0 0 6px !important;
	color: #497d91 !important;
	font-size: .72rem !important;
	font-weight: 750;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.dj-album-profile__fact-value {
	margin: 0 !important;
	font-size: 1.02rem !important;
	font-weight: 650;
	line-height: 1.4;
}

.dj-album-profile__copy {
	max-width: 1040px;
	margin-top: 34px !important;
	font-size: clamp(1.03rem, 1.35vw, 1.18rem);
	line-height: 1.72;
}

@media (max-width: 781px) {
	.dj-hero__title {
		font-size: clamp(2.7rem, 10vw, 4.8rem) !important;
	}

	.dj-hero__artist {
		font-size: 1rem !important;
		margin-top: 14px !important;
	}

	.dj-album-profile__facts {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.dj-hero__title {
		font-size: clamp(2.45rem, 12.5vw, 4rem) !important;
	}
}

/* =========================================================
   Version 3.5.2 – PRESS TEASER AND PRESS PAGE PATTERNS
   ========================================================= */
.dj-press-teaser {
	padding: clamp(38px, 5vw, 62px) clamp(24px, 5vw, 70px);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 26px;
	background:
		radial-gradient(circle at 14% 10%, rgba(82,197,218,.16), transparent 38%),
		radial-gradient(circle at 88% 100%, rgba(143,82,179,.18), transparent 42%),
		linear-gradient(135deg, #101820, #121019 68%, #1d1324);
	box-shadow: 0 26px 68px rgba(17,18,23,.16);
	color: #fff;
}

.dj-press-teaser .dj-pattern-title,
.dj-press-teaser .dj-pattern-lead {
	color: #fff !important;
}

.dj-press-teaser .dj-pattern-lead {
	max-width: 920px;
	color: rgba(255,255,255,.78) !important;
}

.dj-press-teaser .dj-pattern-actions {
	margin-top: 26px !important;
}

.dj-press-teaser .wp-block-button__link {
	background: #fff !important;
	color: #111217 !important;
}

.dj-press-teaser .wp-block-button__link:hover,
.dj-press-teaser .wp-block-button__link:focus-visible {
	background: rgba(255,255,255,.88) !important;
}

.dj-press-page__facts,
.dj-press-page__highlights,
.dj-press-page__links {
	margin-top: clamp(30px, 4vw, 56px) !important;
}

@media (max-width: 600px) {
	.dj-press-teaser {
		padding: 34px 22px;
		border-radius: 20px;
	}
}


/* =========================================================
   VERSION 3.6.0 – USER-DEFINED FOOTER GRADIENT
   ========================================================= */
.dj-footer {
	background-color: var(--djomg-footer-primary) !important;
	background-image:
		radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--djomg-footer-primary) 76%, white 24%) 0%, transparent 35%),
		radial-gradient(circle at 88% 42%, color-mix(in srgb, var(--djomg-footer-secondary) 84%, black 16%) 0%, transparent 42%),
		linear-gradient(118deg, var(--djomg-footer-primary) 0%, color-mix(in srgb, var(--djomg-footer-primary) 58%, var(--djomg-footer-secondary) 42%) 52%, var(--djomg-footer-secondary) 100%) !important;
}

@supports not (background: color-mix(in srgb, #000 50%, #fff 50%)) {
	.dj-footer {
		background-image: linear-gradient(118deg, var(--djomg-footer-primary), var(--djomg-footer-secondary)) !important;
	}
}