/**
 * Psy Core — single profile (psy_music_artist).
 *
 * Implements the Figma "Astral Projection" page within the content area
 * supplied by the theme (header/footer come from get_header/get_footer).
 *
 * Loaded only on single psy_music_artist views.
 */

/* -------- Font face (display) -------- */
/* Audiowide is a close-enough futurist sans for the title. Hosted via Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;600;700;800&display=swap');

.psy-single {
	--psy-bg: #160a32;
	--psy-bg-2: #1f0e44;
	--psy-card: rgba(20, 8, 50, 0.55);
	--psy-card-strong: rgba(15, 5, 40, 0.85);
	--psy-border: rgba(255, 255, 255, 0.08);
	--psy-text: #ffffff;
	--psy-text-mute: rgba(255, 255, 255, 0.65);
	--psy-text-dim: rgba(255, 255, 255, 0.45);
	--psy-pink: #ff43c8;
	--psy-pink-2: #ff7be0;
	--psy-violet: #6c2bff;
	--psy-grad: linear-gradient(135deg, #ff43c8 0%, #ff2bbb 35%, #b328ff 100%);

	position: relative;
	color: var(--psy-text);
	font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	min-height: 100vh;
	/* Site rule: every page is boxed at 1440 max-width with clamp(20,4vw,50)
	   horizontal padding. The padding lives on the page wrapper itself so each
	   section card (.psy-hero, .psy-grid, .psy-gallery, …) fills the inner
	   1340 area edge-to-edge with its own border/radius wrapping the visible
	   content. Full-viewport background patterns sit on `::before` / `::after`
	   so they cover the viewport regardless of this max-width. */
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	/* Theme header uses padding: 14px 50px desktop / 12px 20px below 980px.
	   Mirror the same hard switch so plugin sections align pixel-perfect with
	   the theme header at every viewport (a clamp would drift between 500
	   and 1250 viewport, causing the misalignment the user keeps spotting). */
	padding: 28px 50px 80px;
	overflow-x: hidden;
	isolation: isolate;
}

/* Brand backdrop mirrors the homepage recipe (.psy-home::before) so single
   artist pages read consistent with the rest of the site: one fixed cover
   image behind the content, no vertical tiling, low opacity so the pattern
   feels like a texture instead of a hero. Body base colour lives on html
   below. Desktop uses the new Template-singolo-artista-V4 render; mobile
   falls back to the legacy bck-scaled.png Maya/mascot pattern. */
.psy-single::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url('https://psytranceartist.com/wp-content/uploads/2026/07/Template-singolo-artista-V4-scaled.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	opacity: 0.85;
	filter: brightness(1.2) saturate(1.2);
	z-index: -2;
	pointer-events: none;
}

/* Soft radial + linear overlay so the breadcrumb / hero card have enough
   contrast without killing the pattern below. */
.psy-single::after {
	content: '';
	position: fixed;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(229, 74, 218, 0.10) 0%, transparent 55%),
		linear-gradient(to bottom, transparent 0%, rgba(5, 0, 51, 0.6) 60%, #050033 100%);
	z-index: -1;
	pointer-events: none;
}

@media (max-width: 980px) {
	.psy-single::before {
		background-image: url('https://psytranceartist.com/wp-content/uploads/2026/06/bck-scaled.png');
	}
}

.psy-single * {
	box-sizing: border-box;
}

/* Direct children of .psy-single naturally fill the inner 1340 area now that
   the page wrapper itself carries the boxed max-width + padding. No
   per-child max-width or padding rules — each section paints its own
   border/radius around the visible card. */

/* -------- Breadcrumb -------- */
.psy-breadcrumb {
	font-size: 13px;
	color: var(--psy-text-mute);
	margin-bottom: 18px;
}
.psy-breadcrumb__link { color: var(--psy-pink); text-decoration: none; }
.psy-breadcrumb__link--active { color: var(--psy-pink); }
.psy-breadcrumb__sep { margin: 0 6px; opacity: 0.6; }
.psy-breadcrumb__current { color: var(--psy-text-mute); }

/* -------- Hero --------
   Sits in the same boxed 1440 envelope + clamp(20,4vw,50) horizontal padding
   as every other section. Banner + identity card live inside that padded
   area. Border radius + 1px navy stroke per Figma. */
.psy-hero {
	position: relative;
	margin-bottom: 36px;
	border-radius: 32px;
	background: transparent;
	border: 1px solid #1A0F5C;
	overflow: hidden;
}

.psy-hero__banner {
	position: relative;
	width: 100%;
	height: clamp(240px, 34vw, 440px);
	background-color: #2a1063;
	background-image: linear-gradient(135deg, #2a1063, #5a1782 60%, #1a0938);
	overflow: hidden;
}

.psy-hero__banner-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.psy-hero__card {
	position: relative;
	display: grid;
	grid-template-columns: 240px 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 28px;
	row-gap: 14px;
	padding: 28px 32px 28px 32px;
	align-items: center;
	background: #0C0548;
}

.psy-hero__avatar {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	position: relative;
	margin-top: -130px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: #1a0a3a;
	border: 3px solid var(--psy-pink);
	box-shadow: 0 0 0 4px rgba(255, 67, 200, 0.25), 0 18px 48px rgba(255, 67, 200, 0.35);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: start;
}
.psy-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.psy-hero__avatar-fallback {
	font-family: 'Audiowide', system-ui, sans-serif;
	font-size: 42px;
	color: var(--psy-pink);
}

.psy-hero__identity {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	min-width: 0;
}

/* Figma artist name: Yacote Regular 86.4 / line-height 100% / letter-spacing
   -9.5px, color #F2F2F2. Yacote is loaded via theme tokens.css @font-face.
   Long names need to wrap cleanly (no horizontal overflow) — break-word as
   the safety net + container queries handled in the responsive block. */
.psy-hero__title {
	font-family: 'Yacota Display Sans', 'Yacote', 'Audiowide', system-ui, sans-serif;
	font-weight: 400;
	font-size: 86.4px;
	line-height: 1;
	letter-spacing: -9.5px;
	margin: 0 0 6px;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
	color: #F2F2F2;
	text-transform: uppercase;
}

/* Figma role: Open Sans ExtraBold 32 / 31.5 line-height, no italic, brand
   pink #E54ADA. */
.psy-hero__role {
	font-family: 'Open Sans', system-ui, sans-serif;
	font-style: normal;
	font-weight: 800;
	font-size: 32px;
	line-height: 31.5px;
	letter-spacing: 0;
	color: #E54ADA;
	margin: 0;
}

.psy-hero__label {
	font-style: italic;
	font-size: 14px;
	color: var(--psy-pink-2);
	margin: 2px 0 0;
}

.psy-hero__location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--psy-text-mute);
	margin: 8px 0 0;
}
.psy-hero__location svg { color: var(--psy-text-mute); }

.psy-hero__actions {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.psy-hero__meta {
	grid-column: 2 / 4;
	grid-row: 2 / 3;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.psy-hero__icons {
	display: inline-flex;
	gap: 8px;
}

/* -------- Buttons + pills -------- */
.psy-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
/* Figma "LISTEN" pill: 59 hug height, padding 32 / 16, gap 8, radius 999,
   solid brand pink #E54ADA fill, dark navy text + play icon, brand pink glow. */
.psy-btn--listen {
	background: #E54ADA;
	color: #050033;
	padding: 16px 32px;
	gap: 8px;
	border-radius: 999px;
	box-shadow: 0 12px 28px rgba(229, 74, 218, 0.45);
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 27px;
	letter-spacing: -1.44px;
	text-transform: uppercase;
}
.psy-btn--listen svg { color: #050033; }
.psy-btn--listen:hover { filter: brightness(1.05); }

.psy-btn--send {
	background: var(--psy-grad);
	color: #fff;
	width: 100%;
	justify-content: center;
	padding: 12px 18px;
	box-shadow: 0 8px 22px rgba(255, 67, 200, 0.35);
}

/* Hero share button — sized identically to `.psy-favorite--single` so the
   two circular buttons (heart + share) sit visually balanced next to each
   other. The inline width/height on the IconSet SVG is overridden so the
   glyph matches the heart at 22×22. */
.psy-icon-btn {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--psy-text);
	cursor: pointer;
	padding: 0;
}
.psy-icon-btn svg { width: 22px; height: 22px; }
.psy-icon-btn:hover { background: rgba(255, 67, 200, 0.18); border-color: rgba(255, 67, 200, 0.5); }

.psy-pills {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.psy-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid var(--psy-pink);
	color: var(--psy-pink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* -------- Two-column grid (main / aside) -------- */
.psy-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
	gap: 26px;
	margin-bottom: 36px;
}

/* min-width: 0 is required so long unbreakable strings (URLs, gibberish bio
   placeholder, long titles) don't push the grid columns past the viewport. */
.psy-grid__main, .psy-grid__aside { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* -------- Section base -------- */
/* Figma "card chrome": dark navy fill + 1px brand-navy stroke + 24 radius +
   24 padding. Shared by every dark card on the page (Bio, Events, Contact,
   Travel/Fee, Releases inner cards, Socials inner cards, Gallery cards). */
.psy-section, .psy-panel {
	background: #0C0548;
	border-radius: 24px;
	padding: 24px;
	border: 1px solid #1A0F5C;
}

/* Releases + Socials are transparent (no card chrome) per Figma — only the
   individual release cards / social tiles carry the navy fill. Note: socials
   uses longhand top/bottom so the boxed padding-left/right from
   `.psy-single > *` survives and the row aligns with the rest of the page. */
.psy-section--releases {
	background: transparent;
	border: 0;
	padding: 22px 0 0;
}
.psy-section--socials {
	background: transparent;
	border: 0;
	padding: 22px 0 0;
}

/* Figma section/panel title: Open Sans Bold 33 / 39.6 line-height, -3.3px
   letter-spacing, color #F2F2F2. Shared by all major section headings on the
   page (Latest releases, Bio, Where can you listen, Find me on, …). */
.psy-section__title, .psy-panel__title {
	margin: 0 0 16px;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 33px;
	font-weight: 700;
	line-height: 39.6px;
	letter-spacing: -3.3px;
	color: #F2F2F2;
}

.psy-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.psy-section__meta { font-size: 12px; color: var(--psy-text-mute); }
.psy-section__body {
	font-size: 13px;
	color: var(--psy-text-mute);
	margin: 0;
	line-height: 1.6;
	/* Force long unbreakable strings (gibberish placeholder bios, URLs) to
	   wrap so they don't push the column past the viewport on mobile. */
	overflow-wrap: anywhere;
	word-break: break-word;
}
.psy-section__empty { color: var(--psy-text-dim); font-size: 13px; margin: 0; }

.psy-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* -------- Releases (3-up carousel, transparent track) --------
   The track is a horizontal flex that always shows exactly 3 cards in the
   viewport; extra cards live off-screen and are revealed via the white pill
   arrows below. No background on the section, only on the individual cards. */
.psy-section--releases { overflow: visible; }
.psy-releases {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	overflow-x: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding-bottom: 4px;
}
/* Figma release card — centered stack: cover → badge → title → date → link.
   Markup order in MusicArtistView is badge → cover → title → date → link;
   we use `order` to render visually in the Figma order without touching PHP. */
.psy-release {
	position: relative;
	flex: 0 0 calc((100% - 32px) / 3);
	max-width: calc((100% - 32px) / 3);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 16px;
	border-radius: 24px;
	background: #0C0548;
	border: 1px solid #1A0F5C;
	overflow: hidden;
	isolation: isolate;
	scroll-snap-align: start;
}
.psy-release__cover {
	order: 1;
	width: 96px;
	height: 96px;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 16px;
	display: block;
	background: #2a1063;
}
.psy-release__cover--empty {
	background: linear-gradient(135deg, #4a1ea0, #2a1063);
}
.psy-release__badge {
	order: 2;
	align-self: center;
	margin: 0;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 6px 14px;
	border-radius: 999px;
	background: #2D1CA3;
	color: #F2F2F2;
	text-transform: uppercase;
}
.psy-release__title {
	order: 3;
	margin: 0;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 27px;
	color: #F2F2F2;
}
.psy-release__date {
	order: 4;
	margin: 0;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: rgba(242, 242, 242, 0.6);
}
.psy-release__link {
	order: 5;
	position: static;
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--psy-pink);
	background: transparent;
}
.psy-release__link svg { width: 18px; height: 18px; }

/* White-pill carousel arrows (Figma "frecce"). 120×55, fully rounded,
   transparent fill with white border, white arrow inside. */
.psy-carousel-nav {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	margin-top: 22px;
	padding: 0 6px;
}
.psy-carousel-btn {
	width: 120px;
	height: 55px;
	border-radius: 999px;
	border: 1.25px solid #ffffff;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.psy-carousel-btn svg { width: 22px; height: 22px; }
.psy-carousel-btn:hover {
	background: #ffffff;
	color: #050033;
}
.psy-carousel-btn:active { transform: scale(0.97); }

/* -------- Bio -------- */
.psy-section--bio .psy-section__title { color: #fff; }

/* -------- Events -------- */
.psy-events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.psy-events__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background: #0C0548;
	border: 1px solid #1A0F5C;
	border-radius: 14px;
	font-size: 14px;
	color: var(--psy-text);
	/* Long URLs / festival names with no spaces still need to wrap on mobile. */
	overflow-wrap: anywhere;
	word-break: break-word;
	min-width: 0;
}
.psy-events__item svg { color: var(--psy-pink); flex-shrink: 0; }

/* -------- Socials -------- */
/* (legacy 14px override removed — use shared `.psy-section__title` spec.) */
.psy-socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
	gap: 10px;
}
.psy-social {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 8px;
	background: rgba(20, 8, 50, 0.85);
	border: 1px solid var(--psy-border);
	border-radius: 14px;
	color: var(--psy-text);
	text-decoration: none;
	font-size: 11px;
	font-weight: 600;
	transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.psy-social:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 67, 200, 0.6);
	background: rgba(40, 16, 70, 0.95);
}
.psy-social__icon {
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px;
	background: var(--psy-grad);
	color: #fff;
}

/* -------- Aside / Contact panel -------- */
.psy-panel { padding: 22px; }
.psy-panel--contact .psy-message {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.psy-message__heading { margin: 0; font-size: 15px; font-weight: 700; }
.psy-message__hint { margin: 0; font-size: 12px; color: var(--psy-text-mute); line-height: 1.5; }
.psy-message__field textarea {
	width: 100%;
	min-height: 110px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--psy-border);
	background: rgba(255, 255, 255, 0.96);
	color: #1a0a3a;
	font: inherit;
	resize: vertical;
}
.psy-message__status {
	margin: 0;
	min-height: 16px;
	font-size: 12px;
}
.psy-message__status[data-tone="success"] { color: #38e29c; }
.psy-message__status[data-tone="error"]   { color: #ff5b8e; }

.psy-panel__booking {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--psy-border);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.psy-panel__booking-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--psy-text);
	font-weight: 600;
	font-size: 13px;
	margin: 0;
}
.psy-panel__booking-email {
	color: var(--psy-pink);
	font-size: 12px;
	text-decoration: none;
	word-break: break-all;
}

/* -------- Contact panel — login gate --------
   Rendered in place of the messaging form + booking email when the visitor is
   signed out. Keeps the full messaging shell (heading, hint, read-only textarea)
   so the section still reads as a message form — the CTA below flips to
   "SIGN UP TO SEND MESSAGE" and the booking row is masked. */
.psy-panel--contact-gate .psy-message--gated {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.psy-panel--contact-gate .psy-message--gated textarea {
	cursor: pointer;
	caret-color: transparent;
}
.psy-panel--contact-gate .psy-message--gated textarea:focus {
	outline: 2px solid var(--psy-pink);
	outline-offset: 2px;
}
.psy-panel__gate-cta {
	justify-content: center;
	text-decoration: none;
}
.psy-panel__gate-login {
	text-align: center;
	font-size: 12px;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}
.psy-panel__gate-login:hover,
.psy-panel__gate-login:focus-visible {
	opacity: 1;
	color: #fff;
}

.psy-panel__booking--locked .psy-panel__booking-label {
	color: var(--psy-text-mute);
}
.psy-panel__booking-locked-hint {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--psy-text-mute);
}
.psy-panel__lock {
	color: var(--psy-text-mute);
	flex: 0 0 auto;
}

/* -------- Travel + Fee panel --------
   Auto-fit so when only one column is rendered (artist hasn't set a fee),
   it spans the full panel width instead of leaving a dead half. */
.psy-panel--travel-fee {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 18px;
}

/* Food Shop "Menu" photo block — sits at the top of `.psy-grid__main`,
   inherits the standard section card chrome (#0C0548 + 1px stroke + radius
   24 + padding 24). The image takes the full inner width, lazy-loaded. */
.psy-section--menu-photo .psy-menu-photo {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #1A0F5C;
	background: #0C0548;
}
.psy-section--menu-photo .psy-menu-photo img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.psy-section--menu-photo .psy-menu-photo:hover img {
	transform: scale(1.02);
}

/* Food Shop contact chat row — Tel / WhatsApp · Telegram tucked under the
   booking email block. Tappable on mobile thanks to the wa.me / t.me deep
   links produced by FoodShopData::whatsapp_uri / telegram_uri. */
.psy-panel__chat-links {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
}
.psy-panel__chat-links a {
	color: var(--psy-pink);
	text-decoration: none;
	font-weight: 600;
}
.psy-panel__chat-links a:hover {
	color: #fff;
}
.psy-panel__chat-links strong {
	color: #fff;
	margin-right: 4px;
	font-weight: 700;
}
.psy-panel__chat-row {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.5);
}

/* Decorator-specific full-width panel (Rental + Sale + UV). Same chrome as
   Travel/Fee; sits between socials and gallery as a direct child of
   `.psy-single`, so it picks up the boxed 1340 width naturally. 3 columns
   on desktop, collapses via auto-fit on narrow screens. */
.psy-panel--rental-uv {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
	margin-top: 22px;
}
.psy-panel--rental-uv .psy-panel__col-title {
	font-size: 14px;
	margin: 0 0 8px;
}
.psy-panel--rental-uv .psy-panel__col-value--accent {
	font-size: 18px;
}
.psy-panel__col-title {
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--psy-text);
}
.psy-panel__col-value {
	margin: 0;
	font-size: 12px;
	color: var(--psy-text-mute);
}
.psy-panel__col-value--accent {
	color: var(--psy-pink);
	font-weight: 700;
	font-size: 18px;
}

/* -------- Gallery --------
   Same boxed 1440 envelope as the other sections. Always 3 columns on
   desktop, square cards, Figma navy fill + 1px stroke chrome. */
.psy-gallery {
	margin-top: 40px;
}
.psy-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.psy-gallery__item {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 1/1;
	background: #0C0548;
	border: 1px solid #1A0F5C;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
	isolation: isolate;
}
.psy-gallery__item::after {
	/* Subtle dark vignette so the white "click to expand" cue stays readable. */
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 1;
}
.psy-gallery__item a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.psy-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.3s ease;
}
.psy-gallery__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 60px rgba(229, 74, 218, 0.35);
}
.psy-gallery__item:hover img { transform: scale(1.08); filter: saturate(1.15) brightness(1.05); }
.psy-gallery__item:hover::after { opacity: 1; }
.psy-gallery__item:focus-within { outline: 2px solid var(--psy-pink); outline-offset: 3px; }

/* -------- Lightbox (gallery zoom) -------- */
.psy-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(5, 0, 25, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	padding: 32px;
}
.psy-lightbox[aria-hidden="false"] { opacity: 1; visibility: visible; }
html.psy-lightbox-open { overflow: hidden; }

.psy-lightbox__figure {
	margin: 0;
	max-width: min(1200px, 92vw);
	max-height: 88vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.psy-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 88vh;
	width: auto;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.8);
	animation: psy-lb-pop 0.25s ease;
}
@keyframes psy-lb-pop {
	from { transform: scale(0.92); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}
.psy-lightbox__close,
.psy-lightbox__nav {
	position: absolute;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.psy-lightbox__close { top: 24px; right: 24px; }
.psy-lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.psy-lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
.psy-lightbox__close:hover,
.psy-lightbox__nav:hover { background: var(--psy-pink); border-color: var(--psy-pink); }
.psy-lightbox__nav--prev:hover,
.psy-lightbox__nav--next:hover { transform: translateY(-50%) scale(1.08); }

/* -------- Contact form: guest sender row + consent -------- */
.psy-message__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.psy-message__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--psy-text-mute);
}
.psy-message__consent input[type="checkbox"] {
	margin-top: 2px;
	accent-color: var(--psy-pink);
	flex-shrink: 0;
}
.psy-message__consent a {
	color: var(--psy-pink);
	text-decoration: none;
}
.psy-message__consent a:hover { text-decoration: underline; }
.psy-message__field input[type="text"],
.psy-message__field input[type="email"] {
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--psy-border);
	background: rgba(255, 255, 255, 0.96);
	color: #1a0a3a;
	font: inherit;
}

/* -------- Events: clickable item -------- */
.psy-events__item--link a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: inherit;
	text-decoration: none;
	width: 100%;
}
.psy-events__item--link a:hover { color: var(--psy-pink); }

/* -------- Socials: left-aligned row below grid (matches Figma "Trovami su") -------- */
.psy-section--socials {
	margin-top: 40px;
}
.psy-section--socials .psy-section__title {
	/* Use the shared Figma title spec — no per-section override. */
	margin: 0 0 16px;
}
.psy-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: flex-start;
}
.psy-socials > li {
	flex: 0 0 auto;
}
.psy-social {
	width: 108px;
	height: 91px;
	padding: 0;
	border-radius: 16px;
	background: #0C0548;
	border: 1px solid #1A0F5C;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.psy-social__icon {
	width: auto;
	height: auto;
	background: transparent;
	color: var(--psy-pink);
	border-radius: 0;
}
.psy-social__icon svg { width: 24px; height: 24px; }
.psy-social__label {
	font-size: 13px;
	font-weight: 700;
	color: var(--psy-text);
}

/* -------- Responsive --------
   Typography note: the desktop spec uses tight negative letter-spacing
   (-9.5px on the hero title, -3.3px on section titles, -1.44px on LISTEN).
   At mobile font sizes those values collapse glyphs into each other
   ("CLAUDM", "Latesreleases"), so each breakpoint resets letter-spacing to
   0 / proportional values alongside the smaller font sizes. */

/* Tablet — main grid collapses to single column, releases + gallery drop to 2-up. */
@media (max-width: 1024px) {
	.psy-grid { grid-template-columns: 1fr; }
	.psy-releases { grid-template-columns: repeat(2, 1fr); }
	.psy-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
	.psy-socials { gap: 12px; }
	.psy-section, .psy-panel { padding: 20px; border-radius: 20px; }

	.psy-hero__title { font-size: 56px; letter-spacing: -3px; }
	.psy-section__title, .psy-panel__title { font-size: 26px; line-height: 1.2; letter-spacing: -1px; }
	.psy-hero__role { font-size: 26px; line-height: 1.1; }
}

/* Plugin pages switch to mobile padding at the same 1200px breakpoint as the
   theme header. Keeps the section edges flush with the burger/logo row. */
@media (max-width: 1200px) {
	.psy-single { padding-left: 20px; padding-right: 20px; }
}

/* Mobile — hero matches Figma artist mockup: avatar overlaps bottom-left of
   banner (not centered), identity stack left-aligned, LISTEN + heart/share
   share the same row, pills below. Uses `display: contents` on the meta
   wrapper so pills and icons flow directly into the card grid areas.
   Breakpoint widened to 1024px so tablet landscape viewports also pick up
   the mobile hero (the desktop 156px avatar column doesn't fit cleanly
   below ~1100px and the centered avatar leaks through otherwise). */
@media (max-width: 1024px) {
	.psy-hero__banner {
		height: auto;
		min-height: 140px;
	}
	.psy-hero__banner-img {
		height: auto;
		object-fit: initial;
	}
	.psy-hero__card {
		position: relative;
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"avatar   avatar"
			"identity identity"
			"actions  icons"
			"pills    pills";
		padding: 20px 20px 22px;
		row-gap: 16px;
		column-gap: 14px;
		text-align: left;
	}
	/* Avatar stays top-left of the card, overlapping the banner via negative
	   margin-top. Text (title/role/label/location) flows in its OWN row
	   underneath the circle — long artist names (PERFORMER NAME, ASTRAL
	   PROJECTION, …) get the full card width to wrap into instead of
	   competing with the avatar column. */
	.psy-hero__avatar {
		position: relative;
		top: 0;
		left: 0;
		transform: none;
		grid-area: avatar;
		justify-self: start;
		align-self: start;
		width: 110px;
		height: 110px;
		margin-top: -55px;
	}
	.psy-hero__identity {
		grid-area: identity;
		text-align: left;
		padding-top: 0;
		min-width: 0;
	}
	.psy-hero__actions {
		grid-area: actions;
		justify-self: start;
		align-self: center;
	}
	.psy-hero__location { justify-content: flex-start; }
	.psy-hero__meta { display: contents; }
	.psy-pills { grid-area: pills; justify-content: flex-start; }
	.psy-hero__icons { grid-area: icons; justify-self: end; align-self: center; }

	/* CPTs without a LISTEN button (Performer, Worker, Volunteer, …) leave
	   the `.psy-hero__actions` grid cell empty — shift the heart/share pair
	   to the LEFT column so the orphan icons feel intentional instead of
	   floating in the right gutter. */
	.psy-single--performer .psy-hero__icons,
	.psy-single--decorator .psy-hero__icons,
	.psy-single--food_shop .psy-hero__icons,
	.psy-single--handmade_shop .psy-hero__icons,
	.psy-single--media_creator .psy-hero__icons {
		grid-area: actions;
		justify-self: start;
	}

	.psy-hero__title {
		font-size: 30px;
		letter-spacing: -1px;
		line-height: 1.05;
	}
	.psy-hero__role {
		font-size: 20px;
		line-height: 1.1;
	}
	.psy-hero__label { font-size: 14px; }

	.psy-section__title, .psy-panel__title {
		font-size: 22px;
		line-height: 1.2;
		letter-spacing: 0;
	}

	.psy-btn--listen {
		font-size: 16px;
		letter-spacing: 0;
		padding: 14px 24px;
	}

	.psy-release { padding: 14px; gap: 12px; }
	.psy-release__title { font-size: 17px; line-height: 1.25; }
	.psy-release__date { font-size: 14px; }

	/* Releases: at mobile, a single full-width card per snap step would hide
	   the existence of the carousel. Show the next card peeking out (~85%
	   width per card) + native horizontal swipe + hide the JS arrows. */
	.psy-releases {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 4px;
		gap: 12px;
		padding-bottom: 8px;
		/* Visual swipe affordance: hint scrollbar + peek of next card. */
		mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
	}
	.psy-release {
		flex: 0 0 85%;
		max-width: 85%;
		scroll-snap-align: start;
	}
	.psy-carousel-nav { display: none; }

	.psy-gallery__grid { grid-template-columns: 1fr; gap: 16px; }
	.psy-socials { gap: 10px; }
	.psy-social { width: 92px; height: 80px; }
	.psy-section, .psy-panel { padding: 18px; border-radius: 18px; }
	/* Releases + Socials must stay flush-left at mobile (transparent wrappers
	   only — chrome lives on the inner cards). Override the generic
	   `.psy-section { padding: 18px }` mobile rule above so the cards/title
	   sit at the same X as bio/events/contact. */
	.psy-section--releases,
	.psy-section--socials { padding: 18px 0 0; }
	.psy-section--socials .psy-section__title { font-size: 22px; }
}

/* Narrow mobile — socials switch to 2-col grid so 4/5/6 platforms stay
   visually balanced (no orphan single card on row 2). */
@media (max-width: 600px) {
	.psy-socials {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.psy-social { width: 100%; height: 84px; }
}

@media (max-width: 420px) {
	.psy-hero__title { font-size: 26px; letter-spacing: -0.5px; }
	.psy-hero__role { font-size: 20px; }
	.psy-section__title, .psy-panel__title { font-size: 20px; letter-spacing: 0; }

	.psy-social { height: 78px; }
	.psy-social__label { font-size: 12px; }
}

/* -------- Toast notifications --------
   Slide-in from the top, fixed-position so it survives any layout scroll.
   Body click anywhere on the toast dismisses it; auto-dismisses after 4s
   (5s for errors). Used by single-page contact form + favorites + share. */
.psy-toast {
	position: fixed;
	top: 24px;
	left: 50%;
	transform: translate(-50%, -120%);
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 22px 14px 18px;
	border-radius: 999px;
	background: rgba(12, 5, 72, 0.96);
	border: 1px solid #1A0F5C;
	color: #F2F2F2;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 67, 200, 0.18);
	max-width: min(92vw, 480px);
	cursor: pointer;
	opacity: 0;
	transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.32s ease;
	backdrop-filter: blur(8px);
}
.psy-toast.is-visible {
	transform: translate(-50%, 0);
	opacity: 1;
}
.psy-toast__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 16px;
	font-weight: 700;
	flex-shrink: 0;
	background: var(--psy-pink, #E54ADA);
	color: #050033;
}
.psy-toast__msg {
	line-height: 1.3;
}
.psy-toast--success {
	border-color: #E54ADA;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(229, 74, 218, 0.5), 0 8px 24px rgba(229, 74, 218, 0.35);
}
.psy-toast--success .psy-toast__icon {
	background: #E54ADA;
}
.psy-toast--error {
	border-color: rgba(255, 100, 100, 0.8);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 100, 100, 0.5);
}
.psy-toast--error .psy-toast__icon {
	background: #ff5a5a;
	color: #fff;
}
@media (max-width: 720px) {
	.psy-toast {
		top: 16px;
		left: 16px;
		right: 16px;
		transform: translateY(-120%);
		max-width: none;
	}
	.psy-toast.is-visible { transform: translateY(0); }
}

/* ---- LISTEN modal — in-page SoundCloud Widget --------------------------- */

.psy-listen-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Top padding acts as a floor: keeps the panel below the fixed site
	   theme header (~110 px desktop). With align-items:center the panel
	   sits in the vertical middle of the space *below* the header. */
	padding: calc(130px + env(safe-area-inset-top, 0px)) 24px 24px;
}

.psy-listen-modal[hidden] { display: none; }

.psy-listen-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 4, 32, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
}

.psy-listen-modal__panel {
	position: relative;
	z-index: 1;
	width: min(720px, 100%);
	max-height: calc(100vh - 154px - env(safe-area-inset-top, 0px));
	background: #0C0548;
	border: 1px solid #1A0F5C;
	border-radius: 24px;
	padding: 20px;
	box-shadow: 0 30px 80px rgba(229, 74, 218, 0.18);
	display: flex;
	flex-direction: column;
}

.psy-listen-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, border-color .2s ease;
}

.psy-listen-modal__close:hover {
	background: rgba(229, 74, 218, 0.18);
	border-color: rgba(229, 74, 218, 0.55);
	outline: none;
}

.psy-listen-modal__close:focus-visible {
	background: rgba(229, 74, 218, 0.18);
	border-color: rgba(229, 74, 218, 0.55);
	outline: 2px solid var(--psy-pink, #E54ADA);
	outline-offset: 2px;
}

.psy-listen-modal__frame {
	margin-top: 36px;
	border-radius: 14px;
	overflow: hidden;
	background: #000;
	flex: 1;
	min-height: 0;
}

.psy-listen-modal__frame iframe {
	display: block;
	border: 0;
	width: 100%;
	height: 100%;
	min-height: 420px;
}

/* Lock body scroll while the modal is open so the page behind doesn't
   scroll on touch / mousewheel through the backdrop. */
body.psy-listen-open { overflow: hidden; }

@media (max-width: 640px) {
	.psy-listen-modal {
		/* Mobile theme header is shorter — tighten top clearance. */
		padding: calc(90px + env(safe-area-inset-top, 0px)) 12px 16px;
	}
	.psy-listen-modal__panel {
		padding: 12px;
		border-radius: 18px;
		max-height: calc(100vh - 110px - env(safe-area-inset-top, 0px));
	}
	.psy-listen-modal__close { top: 8px; right: 8px; width: 34px; height: 34px; }
	.psy-listen-modal__frame { margin-top: 50px; }
	.psy-listen-modal__frame iframe { min-height: 380px; }
}

/* Dashboard form — "LISTEN button" section */

.psy-section--listen textarea {
	width: 100%;
	min-height: 110px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.45;
	background: rgba(8, 4, 32, 0.55);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	padding: 12px 14px;
	resize: vertical;
}

.psy-section--listen .psy-field__current {
	margin-top: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
	word-break: break-all;
}

.psy-section--listen .psy-field__current a {
	color: #E54ADA;
	text-decoration: none;
}

.psy-section--listen .psy-field__current a:hover { text-decoration: underline; }