/* Каталог і профілі: місячна палітра, читабельні факти та чіткі переходи. */
.reader-directory,
.reader-profile {
	--reader-ink: #2d1b4e;
	--reader-muted: #5d5870;
	--reader-line: #dcdce8;
	--reader-surface: #f7f8fc;
	--reader-lilac: #e8e6f4;
	color: var(--reader-ink);
	background: var(--reader-surface);
}

.reader-eyebrow {
	margin: 0 0 12px;
	color: #625395;
	font: 700 0.73rem/1.3 var(--font-body);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.reader-directory__intro {
	padding: clamp(56px, 8vw, 104px) 0 72px;
	background: radial-gradient(circle at 79% 24%, #d8d9ef 0, transparent 31%), linear-gradient(120deg, #f5f6fb, #e9ebf5);
}

.reader-directory__intro .container {
	max-width: 900px;
}

.reader-directory__intro h1,
.reader-profile__hero h1 {
	margin: 0;
	color: var(--reader-ink);
	font: 700 clamp(2.5rem, 5.5vw, 4.5rem)/1.12 var(--font-heading) !important;
	letter-spacing: -0.045em;
}

.reader-directory__intro p:not(.reader-eyebrow) {
	max-width: 670px;
	margin: 22px 0 0;
	color: var(--reader-muted);
	font-size: 1.1rem;
	line-height: 1.65;
}

.reader-directory__search {
	max-width: 560px;
	margin-top: 38px;
}

.reader-directory__search label {
	display: block;
	margin-bottom: 10px;
	font-weight: 700;
}

.reader-directory__search input {
	width: 100%;
	min-height: 54px;
	padding: 14px 18px;
	border: 1px solid #c9c6db;
	border-radius: 12px;
	background: #fff;
	color: var(--reader-ink);
	font: inherit;
	box-shadow: 0 8px 26px rgba(45, 27, 78, 0.06);
}

.reader-directory__search input:focus-visible,
.reader-profile a:focus-visible,
.reader-profile button:focus-visible,
.reader-tile a:focus-visible {
	outline: 3px solid #927cc3;
	outline-offset: 3px;
}

.reader-directory__search #reader-search-count {
	margin: 10px 0 0;
	font-size: 0.82rem;
}

.reader-directory__listing {
	padding: 54px 0 100px;
}

.reader-directory__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.reader-tile {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 22px;
	border: 1px solid var(--reader-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(45, 27, 78, 0.045);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.reader-tile[hidden] {
	display: none;
}

.reader-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 35px rgba(45, 27, 78, 0.1);
}

.reader-tile__main {
	display: flex;
	align-items: center;
	gap: 15px;
	color: var(--reader-ink);
	text-decoration: none;
}

.reader-tile__photo {
	width: 72px;
	height: 72px;
	flex: 0 0 72px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--reader-lilac);
}

.reader-tile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reader-tile__photo img[src*="psychic_orion-delacroix"] {
	transform: scale(1.42);
}

.reader-tile__body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.reader-tile__name {
	font: 700 1.07rem/1.35 var(--font-heading);
}

.reader-tile__tagline {
	color: var(--reader-muted);
	font-size: 0.82rem;
	line-height: 1.4;
}

.reader-tile__arrow {
	margin-left: auto;
	align-self: flex-start;
	font-size: 1.35rem;
}

.reader-tile__tags,
.reader-profile__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.reader-tile__tags {
	margin: 22px 0 18px;
}

.reader-tile__tags span,
.reader-profile__tags span {
	padding: 6px 10px;
	border-radius: 99px;
	background: #eeedf7;
	color: #483965;
	font-size: 0.76rem;
	font-weight: 700;
}

.reader-tile__meta {
	margin: auto 0 0;
	padding-top: 15px;
	border-top: 1px solid var(--reader-line);
	color: var(--reader-muted);
	font-size: 0.8rem;
}

.reader-tile__meta span {
	margin: 0 4px;
}

.reader-directory__empty {
	margin: 40px 0;
	text-align: center;
}

.reader-profile {
	padding: 22px 0 100px;
}

.reader-profile__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 20px;
	color: var(--reader-muted);
	font-size: 0.8rem;
}

.reader-profile__breadcrumb a {
	color: var(--reader-ink);
}

.reader-profile__hero {
	display: grid;
	grid-template-columns: minmax(260px, 0.68fr) 1.32fr;
	gap: clamp(28px, 6vw, 80px);
	align-items: center;
	overflow: hidden;
	min-height: 430px;
	padding: clamp(26px, 5vw, 62px);
	border-radius: 28px;
	background: radial-gradient(circle at 20% 35%, rgba(217, 210, 243, 0.35), transparent 32%), #e9eaf5;
}

.reader-profile__portrait {
	position: relative;
	display: grid;
	place-items: center;
	width: min(100%, 340px);
	aspect-ratio: 1;
	margin: auto;
}

.reader-profile__portrait::before,
.reader-profile__portrait::after {
	position: absolute;
	content: "";
	border: 1px solid rgba(70, 54, 107, 0.25);
	border-radius: 50%;
}

.reader-profile__portrait::before {
	inset: -17px;
}

.reader-profile__portrait::after {
	inset: -34px;
	border-style: dashed;
}

.reader-profile__portrait-photo {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 20px 46px rgba(45, 27, 78, 0.18);
}

.reader-profile__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #d8d8e6;
}

.reader-profile__portrait img[src*="psychic_orion-delacroix"] {
	transform: scale(1.42);
}

.reader-profile__lead {
	max-width: 570px;
	margin: 22px 0;
	color: #544b66;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	line-height: 1.55;
}

.reader-profile__tags span {
	background: #fff;
	border: 1px solid #d9d5e5;
}

.reader-profile__jump {
	display: inline-flex;
	gap: 16px;
	align-items: center;
	margin-top: 30px;
	padding: 12px 0;
	border-bottom: 1px solid var(--reader-ink);
	color: var(--reader-ink);
	font-weight: 800;
	text-decoration: none;
}

.reader-profile__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: clamp(34px, 5vw, 70px);
	align-items: start;
	margin-top: 70px;
}

.reader-profile__section {
	padding: 0 0 56px;
	margin-bottom: 52px;
	border-bottom: 1px solid var(--reader-line);
}

.reader-profile__section h2,
.reader-profile__related h2 {
	max-width: 680px;
	margin: 0 0 20px;
	color: var(--reader-ink);
	font: 700 clamp(1.7rem, 3vw, 2.45rem)/1.25 var(--font-heading) !important;
	letter-spacing: -0.035em;
}

.reader-profile__section > p:not(.reader-eyebrow),
.reader-profile__note,
.reader-profile__disclosure {
	color: var(--reader-muted);
	line-height: 1.7;
}

.reader-profile__focus-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 28px;
}

.reader-profile__focus {
	padding: 18px;
	border: 1px solid var(--reader-line);
	border-radius: 14px;
	background: #fff;
}

.reader-profile__focus span {
	color: #625395;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.reader-profile__focus p {
	margin: 12px 0 0;
	font-size: 0.88rem;
	line-height: 1.55;
}

.reader-profile__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 24px 0;
}

.reader-profile__facts div {
	padding: 17px 0;
	border-top: 1px solid var(--reader-line);
}

.reader-profile__facts dt {
	margin-bottom: 8px;
	color: var(--reader-muted);
	font-size: 0.76rem;
}

.reader-profile__facts dd {
	margin: 0;
	font-weight: 800;
}

.reader-profile__note {
	font-size: 0.85rem;
}

.reader-profile__quiz {
	padding: 32px;
	border: 1px solid #d9d6e7;
	border-radius: 20px;
	background: #fff;
}

.reader-profile__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0;
}

.reader-profile__choices button {
	padding: 10px 15px;
	border: 1px solid #c9c4dc;
	border-radius: 99px;
	background: #f8f7fc;
	color: var(--reader-ink);
	font: 700 0.85rem var(--font-body);
	cursor: pointer;
}

.reader-profile__choices button[aria-pressed="true"] {
	border-color: var(--reader-ink);
	background: var(--reader-ink);
	color: #fff;
}

.reader-profile__answer {
	padding: 18px 20px;
	border-left: 3px solid #8d7ab7;
	background: #f2f0f8;
	color: var(--reader-ink) !important;
	font-weight: 700;
}

.reader-profile__partner {
	display: inline-flex;
	gap: 24px;
	align-items: center;
	margin-top: 16px;
	padding: 14px 22px;
	border-radius: 8px;
	background: var(--reader-ink);
	color: #fff !important;
	font-weight: 800;
	text-decoration: none;
}

.reader-profile__disclosure {
	margin: 14px 0 0;
	font-size: 0.77rem;
}

.reader-profile__aside {
	position: sticky;
	top: 92px;
	padding: 26px;
	border: 1px solid var(--reader-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(45, 27, 78, 0.06);
}

.reader-profile__aside-price {
	margin: 4px 0;
	font: 700 2.25rem var(--font-heading);
}

.reader-profile__aside-price span {
	font: 400 0.9rem var(--font-body);
}

.reader-profile__aside p:not(.reader-eyebrow) {
	color: var(--reader-muted);
	font-size: 0.85rem;
	line-height: 1.5;
}

.reader-profile__aside-divider {
	height: 1px;
	margin: 20px 0;
	background: var(--reader-line);
}

.reader-profile__aside strong {
	color: var(--reader-ink);
}

.reader-profile__aside a {
	display: block;
	margin-top: 20px;
	color: var(--reader-ink);
	font-weight: 800;
}

.reader-profile__related {
	margin-top: 36px;
}

.reader-profile__related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.reader-profile__related-grid a {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 15px;
	border: 1px solid var(--reader-line);
	border-radius: 13px;
	background: #fff;
	color: var(--reader-ink);
	text-decoration: none;
}

.reader-profile__related-grid img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
}

.reader-profile__related-grid a > span:nth-child(2) {
	display: grid;
	flex: 1;
	gap: 3px;
	min-width: 0;
}

.reader-profile__related-grid small {
	color: var(--reader-muted);
	font-size: 0.7rem;
	line-height: 1.3;
}

@media (max-width: 900px) {
	.reader-directory__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.reader-profile__layout {
		grid-template-columns: 1fr;
	}
	.reader-profile__aside {
		position: static;
		grid-row: 1;
	}
	.reader-profile__related-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.reader-directory__grid,
	.reader-profile__hero,
	.reader-profile__focus-grid,
	.reader-profile__facts {
		grid-template-columns: 1fr;
	}
	.reader-directory__intro {
		padding: 50px 0;
	}
	.reader-profile__hero {
		gap: 44px;
	}
	.reader-profile__portrait {
		width: min(70vw, 250px);
	}
	.reader-profile__quiz {
		padding: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reader-tile {
		transition: none;
	}
}