/**
 * AFAYR homepage composition (front page only).
 * Colours come from theme.json presets. Motion is CSS-only, progressive,
 * and disabled for prefers-reduced-motion.
 */

.afayr-home {
	--afayr-gutter: clamp(1rem, 4.5vw, 4rem);
	--afayr-section: clamp(4.5rem, 9vw, 8rem);
	--afayr-gold: var(--wp--preset--color--gold);
	--afayr-black: var(--wp--preset--color--black);
	--afayr-ink: var(--wp--preset--color--ink);
	--afayr-ivory: var(--wp--preset--color--ivory);
	--afayr-silver: var(--wp--preset--color--silver);
	--afayr-charcoal: var(--wp--preset--color--charcoal);
	overflow-x: clip;
}

.afayr-home img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.afayr-home picture {
	display: contents;
}

.afayr-home .afayr-wrap {
	width: min(100% - 2 * var(--afayr-gutter), 1280px);
	margin-inline: auto;
}

.afayr-home .afayr-eyebrow {
	margin: 0 0 1.1rem;
	font-size: 0.72rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--afayr-gold);
}

.afayr-home .afayr-todo {
	color: var(--afayr-silver);
	font-style: italic;
}

.afayr-home .afayr-note {
	margin-top: 1.5rem;
	font-size: 0.85rem;
	color: var(--afayr-silver);
}

.afayr-home .afayr-rule.wp-block-separator {
	width: 64px;
	margin: 1.6rem 0;
	border: 0;
	border-top: 1px solid var(--afayr-gold);
	opacity: 1;
}

.afayr-home h2.wp-block-heading {
	font-size: clamp(2.1rem, 5vw, 3.75rem);
}

/* Static film grain (no animation). */
.afayr-grain {
	position: relative;
	isolation: isolate;
}

.afayr-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 1 THE ARRIVAL */
.afayr-arrival {
	display: grid;
	place-items: center;
	min-height: calc(100svh - 5rem);
	padding: 4rem var(--afayr-gutter) 5rem;
	text-align: center;
	background:
		radial-gradient(70% 55% at 50% 118%, rgb(29 63 160 / 0.62), transparent 70%),
		radial-gradient(40% 30% at 50% 40%, rgb(201 165 74 / 0.05), transparent 70%),
		var(--afayr-black);
}

.afayr-arrival > * {
	position: relative;
	z-index: 3;
}

.afayr-arrival .afayr-emblem {
	width: clamp(96px, 9vw, 128px);
	margin: 0 auto 2rem;
}

.afayr-arrival .afayr-emblem img {
	height: auto;
	object-fit: contain;
}

.afayr-arrival .afayr-arrival__name {
	margin: 0 -0.3em 0 0;
	font-size: clamp(3.4rem, 15vw, 10rem);
	letter-spacing: 0.3em;
	color: var(--afayr-gold);
}

.afayr-arrival .afayr-rule.wp-block-separator {
	margin: 2rem auto;
}

.afayr-arrival p {
	max-width: 34ch;
	margin: 0 auto;
}

/* Opening statement: subordinate to the wordmark. */
.afayr-arrival .afayr-arrival__statement {
	max-width: 46ch;
	text-wrap: balance;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
	font-style: italic;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: rgb(244 241 234 / 0.82);
}

.afayr-arrival .afayr-arrival__actions {
	gap: 0.8rem;
	margin-top: 2.5rem;
}

/* 2 THE MYSTERY */
.afayr-mystery {
	padding: var(--afayr-section) 0;
	background: radial-gradient(70% 40% at 50% -6%, rgb(29 63 160 / 0.45), transparent 70%), var(--afayr-black);
}

.afayr-mystery .afayr-mystery__stage {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1.25rem;
	align-items: end;
}

.afayr-mystery__stage > * {
	margin: 0 !important;
}

.afayr-mystery__stage > .wp-block-html {
	display: contents;
}

.afayr-mystery__face {
	grid-column: 1 / -1;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.afayr-mystery__figure {
	position: relative;
	z-index: 1;
	grid-column: 5 / -1;
	margin-top: -32% !important;
	aspect-ratio: 1024 / 1126;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgb(201 165 74 / 0.35);
}

.afayr-mystery__figure img {
	object-position: 50% 0;
}

.afayr-mystery__line {
	grid-column: 1 / -1;
	margin-top: 1.5rem !important;
}

.afayr-mystery__line h2.wp-block-heading {
	font-size: clamp(1.8rem, 4vw, 3rem);
}

/* The two-sentence story is set smaller than a one-line title would be. */
.afayr-mystery__line h2.afayr-mystery__story {
	max-width: 34ch;
	font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
	line-height: 1.35;
	text-wrap: pretty;
}

@media (min-width: 760px) {

	.afayr-mystery__face {
		grid-column: 1 / 9;
		grid-row: 1 / 3;
		aspect-ratio: 3 / 2;
	}

	.afayr-mystery__figure {
		grid-column: 8 / 13;
		grid-row: 1 / 4;
		margin-top: 18% !important;
	}

	.afayr-mystery__line {
		grid-column: 1 / 7;
		grid-row: 3;
		margin-top: 2.5rem !important;
	}
}

/* 3 THE MUSIC */
.afayr-music {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--afayr-section) 0;
}

.afayr-music__hall {
	position: absolute;
	inset: 0 0 auto;
	z-index: -2;
	height: min(78vh, 760px);
}

.afayr-music__hall img {
	object-position: 50% 20%;
}

.afayr-music::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, rgb(10 10 11 / 0.35) 0, rgb(10 10 11 / 0.78) 28%, var(--afayr-black) min(70vh, 680px));
}

.afayr-music > .wp-block-html {
	margin: 0;
}

.afayr-music__head {
	margin-bottom: clamp(2rem, 4vw, 3rem);
	gap: 1rem;
}

.afayr-music__head > * {
	margin: 0;
}

.afayr-music__all a {
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

.afayr-latest-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.afayr-latest {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	padding: clamp(1.25rem, 3vw, 2.5rem);
	background: rgb(10 10 11 / 0.88);
	box-shadow: inset 0 0 0 1px rgb(201 165 74 / 0.28);
}

.afayr-latest > * {
	margin: 0 !important;
}

@media (min-width: 600px) {

	.afayr-latest {
		grid-template-columns: minmax(200px, 38%) 1fr;
		align-items: start;
	}
}

@media (min-width: 1080px) {

	.afayr-latest {
		grid-template-columns: minmax(260px, 400px) 1fr;
	}
}

.afayr-artwork {
	aspect-ratio: 1;
	overflow: hidden;
	background: radial-gradient(80% 80% at 30% 20%, rgb(29 63 160 / 0.55), transparent 70%), var(--afayr-ink);
	box-shadow: inset 0 0 0 1px rgb(201 165 74 / 0.4);
}

@media (max-width: 599px) {

	.afayr-latest .afayr-artwork {
		width: min(100%, 360px);
	}

	/* No artwork yet: keep the placeholder sleeve small. */
	.afayr-latest .afayr-artwork:not(:has(img)):not(:has(.afayr-cover)) {
		width: min(100%, 200px);
	}
}

.afayr-artwork .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}

.afayr-artwork .afayr-cover {
	aspect-ratio: auto;
	height: 100%;
}

/* Card links: a comfortable target without changing the layout. */
.afayr-latest__title a,
.afayr-catalog__title a {
	display: inline-block;
	padding-block: 0.3rem;
}

.afayr-latest__body > * + * {
	margin-top: 1rem;
}

.afayr-meta,
.afayr-catalog__meta {
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--afayr-gold);
}

.afayr-meta p,
.afayr-catalog__meta p {
	margin: 0;
}

.afayr-latest__title {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
}

.afayr-latest__title a {
	color: var(--afayr-ivory);
	text-decoration: none;
}

.afayr-latest__title a:hover {
	color: var(--afayr-gold);
}

.afayr-latest__links {
	margin-top: 1.5rem !important;
}

.afayr-latest__links .wp-block-button__link {
	min-height: 44px;
}

.afayr-latest__tracks {
	margin-top: 1.5rem !important;
}

.afayr-latest__more {
	display: inline-block;
	padding-block: 0.3rem;
	margin-top: 1.5rem !important;
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.afayr-music__empty {
	padding: 2rem;
	color: var(--afayr-silver);
	background: rgb(10 10 11 / 0.88);
	box-shadow: inset 0 0 0 1px rgb(201 165 74 / 0.28);
}

.afayr-catalog-query {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.afayr-catalog {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.afayr-catalog > li {
	margin: 0;
}

.afayr-catalog__item {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 0.9rem;
	align-items: center;
	padding: 0.75rem;
	background: var(--afayr-charcoal);
}

.afayr-catalog__item > * {
	margin: 0 !important;
}

.afayr-catalog__title {
	font-size: 1.15rem;
}

.afayr-catalog__title a {
	color: var(--afayr-ivory);
	text-decoration: none;
}

.afayr-catalog__meta {
	margin-top: 0.25rem !important;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	color: var(--afayr-silver);
}

/* 4 THE ARTIST REVEALED */
.afayr-artist {
	padding: var(--afayr-section) 0;
	background: linear-gradient(var(--afayr-black), var(--afayr-ink));
}

.afayr-spread {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.afayr-spread > * {
	margin: 0 !important;
}

.afayr-portrait {
	position: relative;
}

.afayr-portrait__main {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.afayr-portrait__main img {
	object-position: 50% 25%;
}

.afayr-portrait__frame {
	position: absolute;
	inset: 1.25rem -1.25rem -1.25rem 1.25rem;
	z-index: -1;
	box-shadow: inset 0 0 0 1px rgb(201 165 74 / 0.45);
}

.afayr-portrait__detail {
	position: absolute;
	right: -6%;
	bottom: -8%;
	width: 38%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	box-shadow: 0 0 0 6px var(--afayr-ink);
}

.afayr-portrait__detail img {
	object-position: 50% 35%;
}

.afayr-bio p {
	max-width: 58ch;
}

.afayr-bio .afayr-bio__intro {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
	line-height: 1.5;
	color: var(--afayr-ivory);
}

@media (min-width: 900px) {

	.afayr-spread {
		grid-template-columns: 1.05fr 1fr;
	}

	.afayr-bio {
		padding-left: 2rem;
	}
}

@media (max-width: 899px) {

	.afayr-spread > .wp-block-html {
		width: min(100% - 0.75rem, 560px);
	}

	.afayr-portrait {
		margin-bottom: 2.5rem;
	}

	.afayr-portrait__detail {
		right: 0;
		bottom: -6%;
	}

	.afayr-portrait__frame {
		inset: 0.75rem -0.75rem -0.75rem 0.75rem;
	}
}

/* 5 THE OBSERVANT (fan community) */
.afayr-observant {
	padding: var(--afayr-section) 0;
	background:
		radial-gradient(60% 70% at 85% 40%, rgb(201 165 74 / 0.1), transparent 70%),
		linear-gradient(var(--afayr-ink), var(--wp--preset--color--ember) 140%);
}

.afayr-observant__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.afayr-observant__grid > * {
	margin: 0 !important;
}

.afayr-observant__photo {
	aspect-ratio: 4 / 5;
	overflow: hidden;

	/* Quiet solid panel while the photograph loads. */
	background: linear-gradient(160deg, var(--afayr-charcoal), var(--afayr-ink));
	box-shadow: inset 0 0 0 1px rgb(201 165 74 / 0.28);
}

.afayr-observant__photo picture,
.afayr-observant__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.afayr-observant__photo img {
	object-position: 50% 30%;
}

@media (min-width: 900px) {

	.afayr-observant__grid {
		grid-template-columns: 1fr 1fr;
	}

	.afayr-observant__grid > .wp-block-html {
		order: 2;
	}
}

.afayr-observant__text > * {
	margin: 0;
}

.afayr-observant__text h2.wp-block-heading {
	margin-bottom: 1rem;
}

.afayr-observant__tagline {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
	font-style: italic;
	color: var(--afayr-gold);
}

.afayr-observant__intro {
	margin-top: 1rem !important;
	max-width: 40ch;
}

/* Status text only: deliberately not styled like a button or link. */
.afayr-observant__status {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin-top: 2rem !important;
	font-size: 0.75rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--afayr-silver);
}

.afayr-observant__status::before {
	content: "";
	width: 2rem;
	height: 1px;
	background: var(--afayr-gold);
}

@media (max-width: 899px) {

	.afayr-observant__grid > .wp-block-html {
		width: min(100%, 560px);
	}
}

/* Restrained reveal motion. */
@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) {

		.afayr-mystery__face img {
			animation: afayr-unveil-up linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 40%;
		}

		.afayr-mystery__figure {
			animation: afayr-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 35%;
		}

		.afayr-portrait__main img {
			animation: afayr-unveil-side linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 40%;
		}
	}
}

@keyframes afayr-unveil-up {

	from {
		clip-path: inset(50% 0 0 0);
		opacity: 0.25;
	}

	to {
		clip-path: inset(0);
		opacity: 1;
	}
}

@keyframes afayr-unveil-side {

	from {
		clip-path: inset(0 55% 0 0);
	}

	to {
		clip-path: inset(0);
	}
}

@keyframes afayr-rise {

	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.afayr-bio__more {
	margin-top: 2rem !important;
}

.afayr-bio__more a {
	display: inline-block;
	padding-block: 0.6rem;
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--afayr-gold);
}

.afayr-bio__more a:hover {
	text-decoration: underline;
}