/**
 * Claritas quizzes.
 *
 * The theme owns the design tokens; every one of them has a fallback here so
 * the quizzes still look like themselves under any other theme.
 */

.claritas-quiz,
.cq-page {
	--cq-paper: var(--paper, #F8F2EC);
	--cq-paper-2: var(--paper-2, #FBF7F2);
	--cq-ink: var(--ink, #33243A);
	--cq-ink-soft: var(--ink-soft, #6C5A72);
	--cq-rose: var(--rose, #C9697E);
	/* The fill of a solid button. White on --rose is 3.58:1; on this it is
	   5.25:1. The theme supplies the token, and this is its own value. */
	--cq-rose-strong: var(--rose-strong, #A94F66);
	--cq-rose-deep: var(--rose-deep, #9E4459);
	--cq-rose-soft: var(--rose-soft, #F3D9DE);
	--cq-gold: var(--gold, #C39A55);
	--cq-line: var(--line, rgba(51, 36, 58, .14));
	--cq-display: var(--display, "Fraunces", Georgia, "Times New Roman", serif);
	--cq-body: var(--body, "Alegreya Sans", "Gill Sans", Calibri, system-ui, sans-serif);
	--cq-radius: 12px;
	--cq-shadow: 0 30px 44px -34px rgba(74, 40, 50, .45), 0 2px 4px rgba(74, 40, 50, .06);
}

.claritas-quiz {
	font-family: var(--cq-body);
	color: var(--cq-ink);
	font-size: 19px;
	line-height: 1.5;
	max-width: 46rem;
	margin: 0 auto;
}

.claritas-quiz p {
	margin: 0 0 16px;
}

/* The script hides the intro, the questions and the outcome by turning the
   attribute on and off, so nothing here may out-specify it. */
.claritas-quiz [hidden],
.cq-page [hidden] {
	display: none !important;
}

.claritas-quiz h2,
.claritas-quiz h3 {
	font-family: var(--cq-display);
	font-weight: 500;
	line-height: 1.1;
	margin: 0 0 14px;
}

.claritas-quiz h2 {
	font-size: clamp(28px, 3.4vw, 40px);
	letter-spacing: -.012em;
	font-variation-settings: "opsz" 96, "SOFT" 60, "WONK" 1;
}

.claritas-quiz h3 {
	font-size: 22px;
	font-variation-settings: "opsz" 48, "SOFT" 50;
}

.claritas-quiz h2:focus,
.claritas-quiz [tabindex="-1"]:focus {
	outline: none;
}

/* The shell
   ------------------------------------------------------------------ */

.cq-shell {
	background: var(--cq-paper-2);
	border: 1px solid var(--cq-line);
	border-radius: var(--cq-radius);
	box-shadow: var(--cq-shadow);
	padding: clamp(22px, 4vw, 38px);
}

.cq-hook {
	font-family: var(--cq-display);
	font-style: italic;
	font-size: 21px;
	line-height: 1.35;
	color: var(--cq-rose-deep);
	font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1;
	margin: 0 0 14px;
}

.cq-meta,
.cq-step,
.cq-card-meta {
	font-size: 15.5px;
	color: var(--cq-ink-soft);
	letter-spacing: .02em;
}

.cq-kicker {
	font-family: var(--cq-display);
	font-style: italic;
	font-size: 19px;
	color: var(--cq-rose-deep);
	font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1;
	margin: 0 0 10px;
}

.cq-start-wrap {
	margin: 22px 0 0;
}

/* Buttons and links
   ------------------------------------------------------------------ */

.cq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--cq-rose-strong);
	color: #fff;
	border: 0;
	border-radius: var(--cq-radius);
	padding: 15px 24px;
	font: 500 18px/1 var(--cq-body);
	text-decoration: none;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 22px -14px rgba(169, 79, 102, .8);
	transition: transform .25s ease, box-shadow .25s ease;
}

.cq-btn:hover {
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 28px -14px rgba(169, 79, 102, .9);
}

.cq-btn[disabled] {
	opacity: .6;
	cursor: default;
	transform: none;
}

.cq-btn-light {
	background: transparent;
	color: var(--cq-ink);
	box-shadow: none;
	border: 1.5px solid var(--cq-ink);
	padding: 13px 22px;
}

.cq-btn-light:hover {
	box-shadow: none;
	border-color: var(--cq-rose-deep);
	color: var(--cq-rose-deep);
}

.cq-link {
	background: none;
	border: 0;
	padding: 6px 0;
	font: inherit;
	font-size: 17px;
	color: var(--cq-rose-deep);
	border-bottom: 1.5px solid var(--cq-rose-soft);
	cursor: pointer;
	transition: border-color .2s ease;
}

.cq-link:hover {
	border-bottom-color: var(--cq-rose-deep);
}

.claritas-quiz :focus-visible,
.cq-page :focus-visible {
	outline: 2px solid var(--cq-rose-deep);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Questions
   ------------------------------------------------------------------ */

.cq-progress {
	height: 3px;
	background: var(--cq-rose-soft);
	border-radius: 3px;
	overflow: hidden;
	margin: 0 0 14px;
}

.cq-progress-bar {
	display: block;
	height: 100%;
	background: var(--cq-rose);
	border-radius: 3px;
	transition: width .35s ease;
}

.cq-step {
	margin: 0 0 10px;
}

.cq-question {
	margin: 0 0 22px;
}

.cq-answers {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.cq-answer {
	display: block;
	width: 100%;
	text-align: left;
	font: 400 18px/1.4 var(--cq-body);
	color: var(--cq-ink);
	background: var(--cq-paper);
	border: 1px solid var(--cq-line);
	border-radius: var(--cq-radius);
	padding: 16px 18px;
	min-height: 56px;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.cq-answer:hover {
	border-color: var(--cq-rose);
	background: #fff;
	transform: translateY(-1px);
}

.cq-answer.is-chosen {
	border-color: var(--cq-rose-deep);
	background: var(--cq-rose-soft);
}

.cq-nav {
	margin: 4px 0 0;
}

.cq-input-wrap {
	display: grid;
	gap: 10px;
	justify-items: start;
	margin: 0 0 20px;
}

.cq-input-label {
	font-size: 16px;
	color: var(--cq-ink-soft);
}

.cq-input {
	font: 400 19px/1.4 var(--cq-body);
	color: var(--cq-ink);
	background: #fff;
	border: 1px solid var(--cq-line);
	border-radius: var(--cq-radius);
	padding: 13px 15px;
	max-width: 15rem;
	width: 100%;
}

.cq-input:focus {
	border-color: var(--cq-rose);
}

.cq-input-error:empty {
	display: none;
}

.cq-input-error {
	margin: 0;
	font-size: 16px;
	color: var(--cq-rose-deep);
}

/* The outcome
   ------------------------------------------------------------------ */

.cq-outcome {
	animation: cq-fade .4s ease;
}

@keyframes cq-fade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

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

.cq-outcome-media {
	margin: 0 0 18px;
	border-radius: var(--cq-radius);
	overflow: hidden;
}

.cq-outcome-image {
	display: block;
	width: 100%;
	/* The outcome pictures are bundled with the plugin and arrive without any
	   width or height on the tag, so the box is reserved here and nothing on
	   the page jumps when one loads. Change the ratio to match the artwork if
	   it ever ships at something other than three by two. */
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	border-radius: var(--cq-radius);
}

.cq-outcome-card {
	display: flex;
	align-items: flex-end;
	min-height: 240px;
	padding: 26px;
	border-radius: var(--cq-radius);
	background:
		radial-gradient(120% 100% at 12% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 60%),
		linear-gradient(140deg, var(--cq-rose-soft), var(--cq-paper) 55%, rgba(195, 154, 85, .28));
}

.cq-outcome-card-title {
	font-family: var(--cq-display);
	font-size: clamp(26px, 4vw, 38px);
	line-height: 1.1;
	color: var(--cq-ink);
	font-variation-settings: "opsz" 96, "SOFT" 60, "WONK" 1;
}

.cq-outcome-title {
	margin: 0 0 12px;
}

.cq-cards,
.cq-override,
.cq-close {
	font-size: 17px;
	color: var(--cq-ink-soft);
}

.cq-cards-label {
	color: var(--cq-rose-deep);
}

.cq-box {
	background: var(--cq-paper);
	border: 1px solid var(--cq-line);
	border-left: 3px solid var(--cq-rose);
	border-radius: var(--cq-radius);
	padding: 18px 20px;
	margin: 0 0 20px;
}

.cq-box-title {
	font-size: 19px;
	margin: 0 0 8px;
	color: var(--cq-rose-deep);
}

.cq-box p:last-child {
	margin-bottom: 0;
}

.cq-arrival-title {
	font-family: var(--cq-display);
	font-size: 21px;
	font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
}

.cq-line {
	margin: 0 0 4px;
	padding: 0 0 0 18px;
	border-left: 2px solid var(--cq-gold);
	font-family: var(--cq-display);
	font-style: italic;
	font-size: 23px;
	line-height: 1.35;
	font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
}

.cq-line p {
	margin: 0;
}

.cq-line-label {
	font-size: 15px;
	color: var(--cq-ink-soft);
	margin: 0 0 22px;
	padding-left: 20px;
}

.cq-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
}

.cq-copied {
	font-size: 16px;
	color: var(--cq-ink-soft);
}

.cq-save {
	background: var(--cq-paper);
	border: 1px solid var(--cq-line);
	border-radius: var(--cq-radius);
	padding: 20px;
	margin: 0 0 24px;
}

.cq-save-hook {
	margin: 0 0 14px;
}

.cq-save-label {
	display: block;
	font-size: 16px;
	color: var(--cq-ink-soft);
	margin: 0 0 6px;
}

.cq-save-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cq-save-row .cq-input {
	flex: 1 1 16rem;
	max-width: 24rem;
}

.cq-save-status:empty {
	display: none;
}

.cq-save-status {
	margin: 12px 0 0;
	font-size: 17px;
	color: var(--cq-rose-deep);
}

.cq-save-privacy {
	margin: 12px 0 0;
	font-size: 15px;
	color: var(--cq-ink-soft);
}

.cq-upsell {
	margin: 0 0 24px;
}

.cq-upsell-copy {
	margin: 0 0 12px;
}

.cq-others {
	margin: 0 0 20px;
}

.cq-previous {
	margin: 16px 0 0;
	font-size: 17px;
	color: var(--cq-ink-soft);
}

.cq-again {
	margin: 0;
}

/* Lists of quizzes
   ------------------------------------------------------------------ */

.cq-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.cq-card {
	margin: 0;
}

.cq-card-link {
	display: block;
	height: 100%;
	text-decoration: none;
	color: var(--cq-ink);
	background: var(--cq-paper-2);
	border: 1px solid var(--cq-line);
	border-radius: var(--cq-radius);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cq-card-link:hover {
	transform: translateY(-2px);
	border-color: var(--cq-rose);
	box-shadow: var(--cq-shadow);
}

.cq-card-media img {
	display: block;
	width: 100%;
	height: auto;
}

.cq-card-body {
	display: block;
	padding: 18px 20px;
}

.cq-card-title {
	display: block;
	font-family: var(--cq-display);
	font-size: 22px;
	line-height: 1.15;
	margin: 0 0 8px;
	font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
}

.cq-card-hook {
	display: block;
	font-size: 17px;
	color: var(--cq-ink-soft);
	margin: 0 0 8px;
}

.cq-card-meta {
	display: block;
}

/* The shared result, rendered on the server behind ?result=
   ------------------------------------------------------------------ */

.cq-shared {
	margin: 0 0 32px;
}

.cq-shared-card {
	background: var(--cq-paper-2);
	border: 1px solid var(--cq-line);
	border-radius: var(--cq-radius);
	overflow: hidden;
	box-shadow: var(--cq-shadow);
}

.cq-shared-img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
}

.cq-card-fallback {
	display: flex;
	align-items: flex-end;
	min-height: 200px;
	padding: 24px;
	background:
		radial-gradient(120% 100% at 12% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 60%),
		linear-gradient(140deg, var(--cq-rose-soft), var(--cq-paper) 55%, rgba(195, 154, 85, .28));
	font-family: var(--cq-display);
	font-size: 30px;
	line-height: 1.1;
	font-variation-settings: "opsz" 96, "SOFT" 60, "WONK" 1;
}

.cq-shared-copy {
	padding: clamp(20px, 3vw, 30px);
}

.cq-shared-cta {
	margin: 20px 0 0;
}

/* The question list that only search engines and quiet browsers read
   ------------------------------------------------------------------ */

.cq-seo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The fallback page template
   ------------------------------------------------------------------ */

.cq-page {
	font-family: var(--cq-body);
	color: var(--cq-ink);
	max-width: 1140px;
	margin: 0 auto;
	padding: 40px 24px 64px;
}

.cq-page-title {
	font-family: var(--cq-display);
	font-weight: 500;
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.05;
	letter-spacing: -.015em;
	font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
	margin: 0 0 18px;
	text-align: center;
}

.cq-archive-head {
	max-width: 46rem;
	margin: 0 auto 32px;
	text-align: center;
	color: var(--cq-ink-soft);
}

.cq-archive-head p {
	font-size: 19px;
	line-height: 1.5;
}

.cq-pagination {
	margin: 32px 0 0;
	text-align: center;
}

/* Motion
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.claritas-quiz *,
	.cq-page * {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.cq-btn:hover,
	.cq-answer:hover,
	.cq-card-link:hover {
		transform: none;
	}
}

@media (max-width: 600px) {

	.claritas-quiz {
		font-size: 18px;
	}

	.cq-shell {
		border-radius: var(--cq-radius);
		padding: 20px;
	}

	.cq-btn,
	.cq-btn-light {
		width: 100%;
		min-height: 48px;
	}

	.cq-share .cq-btn {
		width: auto;
		flex: 1 1 auto;
	}

	/* "back", "take it again" and "see your result again" are buttons drawn as
	   links, so they need a finger-sized box of their own. */
	.cq-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.cq-answer {
		min-height: 60px;
		display: flex;
		align-items: center;
	}

	.cq-save-row {
		flex-direction: column;
		align-items: stretch;
	}

	.cq-save-row .cq-input {
		max-width: none;
		flex: 1 1 auto;
	}

	.cq-input {
		max-width: none;
	}

	.cq-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.cq-outcome-card {
		min-height: 180px;
		padding: 20px;
	}
}

/* A result on paper: the outcome, the step and the line, and none of the
   furniture around them. */
@media print {

	.cq-start-wrap,
	.cq-previous,
	.cq-share,
	.cq-save,
	.cq-others,
	.cq-again,
	.cq-nav,
	.cq-progress,
	.cq-upsell,
	.cq-shared-cta {
		display: none !important;
	}

	.claritas-quiz,
	.cq-page {
		max-width: none;
		font-size: 12pt;
	}

	.cq-shell,
	.cq-shared-card {
		border: 0;
		box-shadow: none;
		padding: 0;
		background: none;
	}

	.cq-box,
	.cq-line,
	.cq-outcome-media {
		break-inside: avoid;
	}

	.cq-seo {
		position: static;
		width: auto;
		height: auto;
		margin: 24px 0 0;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}
}

/* The door from a result into a free reading with that result in mind. */
.cq-reading {
	margin: 26px 0 0;
	padding: 20px 22px;
	border: 1px solid rgba(201, 105, 126, .28);
	border-radius: 16px;
	background: rgba(243, 217, 222, .28);
}
.cq-reading .cq-box-title { margin: 0 0 6px; }
.cq-reading-copy { margin: 0 0 12px; }
.cq-reading-link { margin: 0; }
.entry-content .cq-reading a.cq-btn,
.cq-reading a.cq-btn { color: #fff; border-bottom: 0; text-decoration: none; }

/* A tarot card for each outcome, and one for each quiz in a list
------------------------------------------------------------------ */

.cq-outcome-media.cq-outcome-tarot {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 22px 26px;
	overflow: visible;
	background:
		radial-gradient(120% 100% at 12% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 60%),
		linear-gradient(140deg, var(--cq-rose-soft), var(--cq-paper) 55%, rgba(195, 154, 85, .28));
}

.cq-tarot-img {
	flex: none;
	display: block;
	width: 118px;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 18px 26px -18px rgba(74, 40, 50, .55), 0 2px 4px rgba(74, 40, 50, .08);
	transform: rotate(-2.5deg);
}

.cq-tarot-cap {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.cq-tarot-label {
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cq-ink-soft);
}

.cq-tarot-name {
	font-family: var(--cq-display);
	font-size: clamp(24px, 3.6vw, 32px);
	line-height: 1.1;
	color: var(--cq-ink);
	text-decoration: none;
	font-variation-settings: "opsz" 96, "SOFT" 60, "WONK" 1;
}

.cq-tarot-name:hover {
	color: var(--cq-rose-deep);
}

.cq-card-media.cq-card-tarot {
	float: right;
	margin: 16px 16px 10px 12px;
}

.cq-card-media.cq-card-tarot img {
	width: 64px;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 10px 16px -12px rgba(74, 40, 50, .6);
	transform: rotate(3deg);
	transition: transform .3s ease;
}

.cq-card-link:hover .cq-card-tarot img {
	transform: rotate(0deg) translateY(-2px);
}

.cq-card-link::after {
	content: "";
	display: block;
	clear: both;
}

.cq-group {
	margin: 0 0 48px;
}

.cq-group-title {
	font-family: var(--cq-display);
	font-size: clamp(26px, 3.4vw, 34px);
	font-weight: 500;
	line-height: 1.1;
	margin: 0 0 6px;
	font-variation-settings: "opsz" 96, "SOFT" 60, "WONK" 1;
}

.cq-group-lede {
	color: var(--cq-ink-soft);
	font-size: 18px;
	margin: 0 0 18px;
	max-width: 46ch;
}

@media (max-width: 480px) {
	.cq-outcome-media.cq-outcome-tarot {
		gap: 16px;
		padding: 18px;
	}
	.cq-tarot-img {
		width: 92px;
	}
}