/**
 * Shared FÄNZY primitives for the Place magazine and later widgets.
 */

.faenzy-display {
	font-family: var(--fz-type);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 0.82;
	text-transform: uppercase;
}

.faenzy-support {
	font-family: var(--fz-type);
	font-weight: 400;
	font-size: 1.05rem;
	line-height: 1.45;
	max-width: 28ch;
}

.faenzy-blob {
	display: block;
	width: 16vw;
	min-width: 4.5rem;
	max-width: 11rem;
	aspect-ratio: 1;
	background: var(--fz-pink);
	-webkit-mask: url("../brand/shapes/a-umlaut.svg") center / contain no-repeat;
	mask: url("../brand/shapes/a-umlaut.svg") center / contain no-repeat;
	pointer-events: none;
}

.faenzy-frame {
	margin: 0;
	overflow: hidden;
	background: var(--fz-olive);
}

.faenzy-frame img,
.faenzy-issue img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.faenzy-score {
	position: relative;
	display: flex;
	min-height: 100svh;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--fz-olive);
	color: var(--fz-paper);
	font-family: var(--fz-type);
}

.faenzy-score__mark {
	position: absolute;
	top: 6vh;
	left: 4vw;
	margin: 0;
	font-size: clamp(1.4rem, 3vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 0.85;
}

.faenzy-score__value {
	position: relative;
	z-index: 2;
	margin: 0;
	font-size: clamp(8rem, 36vw, 44rem);
	font-weight: 800;
	letter-spacing: -0.08em;
	line-height: 0.78;
}

.faenzy-score__level,
.faenzy-score__year {
	position: absolute;
	bottom: 5vh;
	z-index: 2;
	margin: 0;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.16em;
}

.faenzy-score__level {
	left: 4vw;
}

.faenzy-score__year {
	left: 4vw;
	bottom: 2.4vh;
}

.faenzy-score .faenzy-blob {
	position: absolute;
	top: auto;
	right: -8vw;
	bottom: -18vh;
	left: auto;
	z-index: 0;
	width: min(48vw, 40rem);
	max-width: none;
	transform: none;
	opacity: 0.38;
}

.faenzy-dna-board {
	position: relative;
	overflow: hidden;
	background: var(--fz-field);
	color: var(--fz-ink);
	padding: 12vh 4vw 10vh;
}

.faenzy-dna-board > .faenzy-blob {
	position: absolute;
	right: -6vw;
	bottom: -8vh;
	z-index: 0;
	width: min(22vw, 16rem);
	opacity: 0.45;
}

.faenzy-dna-row {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 1.1rem 0 0.4rem;
}

.faenzy-dna-row + .faenzy-dna-row {
	border-top: 1px solid rgba(20, 20, 20, 0.16);
}

.faenzy-dna-row p {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	font-family: var(--fz-type);
	font-size: clamp(3.2rem, 7vw, 8rem);
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 0.8;
}

.faenzy-dna-row.is-right p {
	padding-left: 18vw;
}

.faenzy-dna-row.is-left p {
	padding-right: 10vw;
}

.faenzy-dna-row em {
	display: block;
	margin-top: 0.2rem;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
}

.faenzy-dna-row summary {
	display: block;
	cursor: pointer;
	list-style: none;
}

.faenzy-dna-row summary::-webkit-details-marker {
	display: none;
}

.faenzy-dna-row p.faenzy-dna-row__note {
	display: block;
	max-width: 28ch;
	margin: 0.45rem 0 0.2rem;
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
}

.faenzy-dna-row.is-right .faenzy-dna-row__note {
	margin-left: 14vw;
}

.faenzy-rail {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 6vw;
	background: var(--fz-paper);
	color: var(--fz-ink);
	scrollbar-width: none;
}

.faenzy-rail::-webkit-scrollbar {
	display: none;
}

.faenzy-rail ul {
	display: flex;
	gap: 0;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 6vh 6vw;
	list-style: none;
}

.faenzy-rail li {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 0.8rem;
	scroll-snap-align: start;
	min-width: 10rem;
	padding-right: 3.2rem;
	font-family: var(--fz-type);
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.faenzy-rail li + li {
	padding-left: 2.5rem;
	border-left: 1px solid currentColor;
}

.faenzy-rail__icon svg {
	display: block;
	width: 3.4rem;
	height: 3.4rem;
	stroke-width: 1.25;
}

@media (min-width: 1100px) {
	.faenzy-rail {
		scroll-snap-type: none;
	}
}

.faenzy-field strong {
	display: block;
	font-family: var(--fz-type);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 0.84;
}

.faenzy-cta {
	color: var(--fz-ink);
	background: var(--fz-paper);
	font-family: var(--fz-type);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 0.82;
	text-decoration: none;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
	.faenzy-issue .faenzy-hero-spread__photo img {
		animation: fz-settle var(--fz-settle) var(--fz-ease) both;
	}

	.faenzy-issue .faenzy-hero-spread__title span,
	.faenzy-issue .faenzy-hook__display span,
	.faenzy-issue .faenzy-why__display {
		animation: fz-rise var(--fz-fast) var(--fz-ease) both;
	}

	.faenzy-dna-row > i {
		animation: fz-bar 0.9s var(--fz-ease) both;
	}
}

@keyframes fz-settle {
	from { transform: scale(1.06); }
	to { transform: scale(1); }
}

@keyframes fz-rise {
	from { opacity: 0; transform: translateY(var(--fz-rise)); }
	to { opacity: 1; transform: none; }
}

@keyframes fz-bar {
	from { transform: rotate(var(--fz-tilt, 0deg)) scaleX(0); }
	to { transform: rotate(var(--fz-tilt, 0deg)) scaleX(1); }
}