/* Support pages (About / Privacy / Terms) — same night surface as the rest of
   the site. The theme is light by default; leaving these pages white made the
   site feel like two different products. */

body.tk-page-dark {
	--tk-bg: #070d1a;
	--tk-line: rgba(255, 255, 255, .12);
	--tk-ink: #dff1f6;
	--tk-muted: rgba(223, 241, 246, .72);
	--tk-violet: 155 124 246;
	--tk-cyan: 125 211 252;
	background: var(--tk-bg);
	color: var(--tk-ink);
}

body.tk-page-dark #page,
body.tk-page-dark .site-content,
body.tk-page-dark .ast-container,
body.tk-page-dark .site-header,
body.tk-page-dark .main-header-bar,
body.tk-page-dark .ast-primary-header-bar,
body.tk-page-dark .ast-inner-header-wrap,
body.tk-page-dark .site-footer,
body.tk-page-dark .ast-small-footer-wrap {
	background-color: var(--tk-bg) !important;
	border-color: var(--tk-line) !important;
}

body.tk-page-dark .site-header *,
body.tk-page-dark .site-footer *,
body.tk-page-dark .site-title a,
body.tk-page-dark .ast-builder-menu * { color: var(--tk-ink); }

body.tk-page-dark .site-description { display: none; }

/* Astra puts the title in one container and the body in another, so the two
   end up misaligned unless both are anchored to the same column. */
body.tk-page-dark .site-content > .ast-container {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	grid-template-columns: minmax(0, 1fr) !important;
	display: grid !important;
}

body.tk-page-dark .entry-header,
body.tk-page-dark .entry-content {
	width: 100%;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 5vw, 40px);
	padding-right: clamp(20px, 5vw, 40px);
	box-sizing: border-box;
}

body.tk-page-dark .entry-header { margin-bottom: 22px; }
body.tk-page-dark .entry-header .entry-title { margin: 0; }

body.tk-page-dark .entry-content {
	color: var(--tk-muted);
	font-size: 16.5px;
	line-height: 1.78;
}

body.tk-page-dark .entry-content h1,
body.tk-page-dark .entry-content h2,
body.tk-page-dark .entry-content h3,
body.tk-page-dark .entry-title {
	color: #fff;
	letter-spacing: -.01em;
}

body.tk-page-dark .entry-content h1,
body.tk-page-dark .entry-title { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; }

body.tk-page-dark .entry-content h2 {
	margin-top: 38px;
	font-size: 21px;
}

body.tk-page-dark .entry-content h3 { font-size: 17px; color: rgb(var(--tk-cyan)); }

body.tk-page-dark .entry-content p { color: var(--tk-muted); }

body.tk-page-dark .entry-content a { color: rgb(var(--tk-violet)); }
body.tk-page-dark .entry-content a:hover { color: rgb(var(--tk-cyan)); }

body.tk-page-dark .entry-content strong { color: #fff; }

body.tk-page-dark .entry-content ul,
body.tk-page-dark .entry-content ol { color: var(--tk-muted); }

body.tk-page-dark .entry-content blockquote {
	margin: 26px 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid rgb(var(--tk-violet) / .55);
	color: var(--tk-ink);
	font-style: italic;
}

body.tk-page-dark .site-content { padding: clamp(40px, 7vw, 80px) 0 clamp(48px, 8vw, 90px); }

/* Astra styles menu links with a deep slate that vanishes on a night
   background; these need to win the cascade explicitly. */
body.tk-page-dark .main-header-menu .menu-link,
body.tk-page-dark .ast-builder-menu .menu-link,
body.tk-page-dark .ast-header-menu a,
body.tk-page-dark .main-header-menu a,
body.tk-page-dark .ast-nav-menu a {
	color: var(--tk-ink) !important;
	opacity: .82;
}

body.tk-page-dark .main-header-menu .menu-link:hover,
body.tk-page-dark .ast-builder-menu .menu-link:hover,
body.tk-page-dark .main-header-menu a:hover {
	color: rgb(var(--tk-violet)) !important;
	opacity: 1;
}

body.tk-page-dark .main-header-menu .current-menu-item > .menu-link,
body.tk-page-dark .main-header-menu .current_page_item > .menu-link {
	color: #fff !important;
	opacity: 1;
}

/* A page that hosts a full-width component (pricing table, card library)
   must not be held to the 760px reading measure. */
body.tk-page-dark .entry-content:has(.tk-pricing),
body.tk-page-dark .entry-content:has(.tk-cards) {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

body.tk-page-dark .entry-content:has(.tk-pricing) p,
body.tk-page-dark .entry-content:has(.tk-cards) p {
	color: inherit;
}

/* ---------- long-form pages (spreads / guides / legal) ---------- */

body.tk-page-dark .entry-content .tk-lead {
	font-size: clamp(15px, 1.6vw, 17.5px);
	line-height: 1.75;
	color: rgba(223, 241, 246, .78);
	max-width: 68ch;
	margin-bottom: 2em !important;
}

body.tk-page-dark .entry-content h2 {
	margin-top: 2.1em !important;
	padding-top: 1.4em;
	border-top: 1px solid rgba(223, 241, 246, .09);
}

body.tk-page-dark .entry-content h2:first-of-type { border-top: 0; padding-top: 0; }

/* the credit price riding next to a heading */
.tk-price {
	display: inline-block;
	margin-left: 10px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgb(155 124 246 / .85);
	vertical-align: middle;
	white-space: nowrap;
}

body.tk-page-dark .entry-content ul {
	max-width: 68ch;
}

body.tk-page-dark .entry-content ul li {
	margin-bottom: .5em;
	line-height: 1.7;
	color: rgba(223, 241, 246, .7);
}

body.tk-page-dark .entry-content strong { color: rgba(223, 241, 246, .94); }

body.tk-page-dark .entry-content a {
	color: rgb(155 124 246);
	text-decoration: none;
	box-shadow: inset 0 -1px 0 rgb(155 124 246 / .35);
	transition: box-shadow .25s ease, color .25s ease;
}

body.tk-page-dark .entry-content a:hover {
	color: #fff;
	box-shadow: inset 0 -1px 0 rgb(255 255 255 / .6);
}

/* h2 already carries the article link on the guides index — drop the
   underline there so it reads as a heading, not a sentence */
body.tk-page-dark .entry-content h2 a { box-shadow: none; }

body.tk-page-dark .entry-content .tk-cta {
	margin-top: 2.6em !important;
	padding-top: 1.8em;
	border-top: 1px solid rgba(223, 241, 246, .09);
}

body.tk-page-dark .entry-content .tk-cta a {
	display: inline-flex;
	align-items: center;
	padding: 12px 24px;
	border: 1px solid rgb(155 124 246 / .45);
	border-radius: 999px;
	background: rgb(155 124 246 / .1);
	color: #eef4ff;
	font-size: 13px;
	letter-spacing: .03em;
	box-shadow: none;
}

body.tk-page-dark .entry-content .tk-cta a:hover {
	background: rgb(155 124 246 / .2);
	border-color: rgb(155 124 246 / .75);
}

/* ---------------------------------------------------------------------------
   Editorial card blocks: [tarot_spread_demo] and [tarot_card].

   The spreads and guides pages were text-only walls. A page explaining where
   cards land that never shows a card is a strange thing to read — and it missed
   the one thing these pages could offer that a competitor's wall of text does
   not: the actual artwork.

   These rules deliberately do not hang off `body.tk-page-dark`; they carry
   their own palette so they behave the same on any dark surface (page, card
   library, the shared reading page).
   --------------------------------------------------------------------------- */

.tk-demo,
.tk-pick {
	--tc-line: rgba(223, 241, 246, .14);
	--tc-ink: #dff1f6;
	--tc-dim: rgba(223, 241, 246, .58);
	--tc-violet: 155 124 246;
	--tc-cyan: 125 211 252;
}

.tk-demo {
	margin: 26px 0 34px;
	padding: 22px 18px 18px;
	border: 1px solid var(--tc-line);
	border-radius: 18px;
	background:
		radial-gradient(120% 80% at 50% 0%, rgb(155 124 246 / .13) 0%, rgba(155, 124, 246, 0) 62%),
		rgba(9, 14, 28, .55);
	color: var(--tc-ink);
	box-sizing: border-box;
}

.tk-demo__table {
	display: grid;
	gap: 14px 10px;
	justify-items: center;
	align-items: start;
}

/* one card ---------------------------------------------------------------- */
.tk-demo--single .tk-demo__table { grid-template-columns: 1fr; }

/* 84px is the right size for the thirteenth card of a Celtic Cross and a
   postage stamp for the only card on the page — a single-card reading is
   judged entirely by how the artwork looks, so it gets the room. */
.tk-demo--single .tk-slot__img { width: clamp(150px, 42vw, 230px); }
.tk-demo--single .tk-slot__name { font-size: 14px; }
.tk-demo--single .tk-slot__pos { font-size: 10.5px; }

/* three cards ------------------------------------------------------------- */
.tk-demo--three .tk-demo__table { grid-template-columns: repeat(3, 1fr); }

/* four-card cross — the obstacle really is laid across the situation ------- */
.tk-demo--cross .tk-demo__table {
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas:
		". obst ."
		"sit advice out";
}
.tk-demo--cross .tk-demo__table > .tk-slot:nth-child(1) { grid-area: sit; }
.tk-demo--cross .tk-demo__table > .tk-slot:nth-child(2) { grid-area: obst; }
.tk-demo--cross .tk-demo__table > .tk-slot:nth-child(3) { grid-area: advice; }
.tk-demo--cross .tk-demo__table > .tk-slot:nth-child(4) { grid-area: out; }
.tk-demo--cross .tk-slot:nth-child(2) .tk-slot__img { transform: rotate(90deg); }

/* celtic cross — the classic ten-slot layout, the staff on the right ------- */
.tk-demo--celtic .tk-demo__table {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-areas:
		".  .      .      out"
		".  high   .      hopes"
		"past heart fut   env"
		".  found  .      self";
	gap: 12px 8px;
}
.tk-demo--celtic .tk-demo__table > .tk-slot:nth-child(1) { grid-area: heart; }
.tk-demo--celtic .tk-demo__table > .tk-slot:nth-child(2) { grid-area: found; }
.tk-demo--celtic .tk-demo__table > .tk-slot:nth-child(3) { grid-area: past; }
.tk-demo--celtic .tk-demo__table > .tk-slot:nth-child(4) { grid-area: high; }
.tk-demo--celtic .tk-demo__table > .tk-slot:nth-child(5) { grid-area: fut; }
.tk-demo--celtic .tk-demo__table > .tk-slot:nth-child(6) { grid-area: self; }
.tk-demo--celtic .tk-demo__table > .tk-slot:nth-child(7) { grid-area: env; }
.tk-demo--celtic .tk-demo__table > .tk-slot:nth-child(8) { grid-area: hopes; }
.tk-demo--celtic .tk-demo__table > .tk-slot:nth-child(9) { grid-area: out; }

/* one card in a slot ------------------------------------------------------- */
.tk-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	max-width: 100%;
	text-align: center;
}

.tk-slot__img {
	display: block;
	width: 84px;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid rgba(223, 241, 246, .16);
	background: #0a1020;
	box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .85);
}

.tk-slot__img img { display: block; width: 100%; height: auto; }
.tk-slot__img.is-rev img { transform: rotate(180deg); }

.tk-slot__name {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--tc-ink);
	line-height: 1.35;
}

.tk-slot__name em {
	font-style: normal;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgb(var(--tc-cyan));
}

.tk-slot__pos {
	display: block;
	font-style: normal;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(223, 241, 246, .42);
}

/* celtic: card 2 physically lies across card 1.
   The rotation lives on the wrapper, not on the image: rotating a tall image
   inside a narrow box pushes it out of the slot and off-centre. The rotated
   wrapper is simply centred on the card underneath it, and its labels are
   dropped — two sets of captions in one square is unreadable. */
.tk-slot--cross { position: relative; display: flex; justify-content: center; }

.tk-slot__over {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 84px;
	margin: 0;
	transform: translate(-50%, -50%) rotate(90deg);
	pointer-events: none;
}

.tk-slot__over .tk-slot { gap: 0; }
.tk-slot__over .tk-slot__img {
	width: 84px;
	box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .95);
	border-color: rgb(var(--tc-violet) / .6);
}
.tk-slot__over .tk-slot__name,
.tk-slot__over .tk-slot__pos { display: none; }

.tk-demo__cap {
	margin: 16px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--tc-dim);
	text-align: center;
}

/* a single card in prose --------------------------------------------------- */
.tk-pick {
	margin: 24px 0;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	color: var(--tc-ink);
}

.tk-pick__img {
	flex: 0 0 auto;
	width: 92px;
	border-radius: 7px;
	overflow: hidden;
	border: 1px solid rgba(223, 241, 246, .16);
	background: #0a1020;
	box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .9);
	transition: border-color .3s ease, transform .3s ease;
}

.tk-pick__img:hover { border-color: rgb(var(--tc-violet) / .6); transform: translateY(-2px); }
.tk-pick__img img { display: block; width: 100%; height: auto; }
.tk-pick__img.is-rev img { transform: rotate(180deg); }

.tk-pick__cap {
	flex: 1 1 auto;
	font-size: 13px;
	line-height: 1.65;
	color: var(--tc-dim);
	padding-top: 2px;
}

.tk-pick__cap b {
	display: block;
	font-size: 14px;
	color: var(--tc-ink);
	margin-bottom: 2px;
}

.tk-pick__cap em {
	font-style: normal;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgb(var(--tc-cyan));
}

.tk-pick__cap span { display: block; margin-top: 6px; }

@media (max-width: 640px) {
	.tk-demo { padding: 16px 12px 14px; }
	.tk-slot__img { width: 66px; }
	.tk-slot__over { width: 66px; }
	.tk-slot__over .tk-slot__img { width: 66px; }
	.tk-demo--celtic .tk-demo__table { gap: 10px 5px; }
	.tk-slot__name { font-size: 10.5px; }
	.tk-slot__pos { font-size: 8.5px; letter-spacing: .1em; }
	.tk-pick__img { width: 74px; }
}