/*
Theme Name: Tarot Card Guide
Theme URI: https://tarotcardguide.com/
Author: TarotCardGuide.com
Description: Custom block theme for TarotCardGuide.com: Rider-Waite-Smith card pages, readings and guides.
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tarotcardguide
Fonts: Fraunces and Figtree, SIL Open Font License 1.1.
*/

/* ---------- Tokens ---------- */
:root {
	--paper: var(--wp--preset--color--paper, #fffdf8);
	--paper-2: var(--wp--preset--color--paper-2, #f5efe3);
	--ink: var(--wp--preset--color--ink, #1f1c2c);
	--ink-soft: var(--wp--preset--color--ink-soft, #55506a);
	--night: var(--wp--preset--color--night, #161a3a);
	--night-2: var(--wp--preset--color--night-2, #262d63);
	--gold: var(--wp--preset--color--gold, #c99a3b);
	--gold-deep: var(--wp--preset--color--gold-deep, #8a6419);
	--sun: var(--wp--preset--color--sun, #f3c64f);
	--lapis: var(--wp--preset--color--lapis, #2b4c9b);
	--rose: var(--wp--preset--color--rose, #b0412d);
	--leaf: var(--wp--preset--color--leaf, #3b7148);
	--line: var(--wp--preset--color--line, #e4daca);
	--display: var(--wp--preset--font-family--display);
	--radius: 14px;
	--wide: var(--wp--style--global--wide-size, 74rem);
	--gutter: clamp(1rem, 4vw, 2rem);
	--card-shadow: 0 1px 0 rgba(22, 26, 58, .06), 0 16px 34px -18px rgba(22, 26, 58, .55);
	--back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 210'%3E%3Crect width='120' height='210' rx='8' fill='%23262d63'/%3E%3Crect x='7' y='7' width='106' height='196' rx='5' fill='none' stroke='%23c99a3b' stroke-width='1.2'/%3E%3Crect x='11' y='11' width='98' height='188' rx='3' fill='none' stroke='%23c99a3b' stroke-width='.5' opacity='.7'/%3E%3Cg transform='translate(60 105)' stroke='%23f3c64f' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M0-19V-30M0 19V30M-19 0H-30M19 0H30M13.4-13.4l7.8-7.8M-13.4 13.4l-7.8 7.8M13.4 13.4l7.8 7.8M-13.4-13.4l-7.8-7.8'/%3E%3C/g%3E%3Ccircle cx='60' cy='105' r='12' fill='%23f3c64f'/%3E%3Cpath d='M60 38a9 9 0 1 0 7 15 7.5 7.5 0 1 1-7-15z' fill='%23f3c64f' opacity='.9'/%3E%3Cg fill='%23f3c64f'%3E%3Cpath d='M24 30l1.2 3 3 1.2-3 1.2-1.2 3-1.2-3-3-1.2 3-1.2zM96 30l1.2 3 3 1.2-3 1.2-1.2 3-1.2-3-3-1.2 3-1.2zM24 172l1.2 3 3 1.2-3 1.2-1.2 3-1.2-3-3-1.2 3-1.2zM96 172l1.2 3 3 1.2-3 1.2-1.2 3-1.2-3-3-1.2 3-1.2z'/%3E%3Ccircle cx='40' cy='150' r='1'/%3E%3Ccircle cx='80' cy='60' r='1'/%3E%3Ccircle cx='84' cy='152' r='1.2'/%3E%3Ccircle cx='34' cy='66' r='1.2'/%3E%3C/g%3E%3Cpath d='M60 160l3 6h-6z' fill='none' stroke='%23c99a3b' stroke-width='.8'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { background: var(--paper); color: var(--ink); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--sun); color: var(--night); }
:where(a, button, summary, input):focus-visible { outline: 2px solid var(--lapis); outline-offset: 3px; border-radius: 4px; }
a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
img { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute !important; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; }
h1, h2, h3, h4 { text-wrap: balance; font-variation-settings: "SOFT" 50; }
p { text-wrap: pretty; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.wp-site-blocks > .tcg-main { flex: 1 0 auto; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- Buttons ---------- */
.tcg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 2.9rem; padding: .7em 1.35em; border-radius: 999px; font: 600 1rem/1.2 var(--wp--preset--font-family--body); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.tcg-btn:hover { transform: translateY(-1px); }
.tcg-btn--sun { background: var(--sun); color: var(--night); }
.tcg-btn--sun:hover { background: #ffd66e; color: var(--night); }
.tcg-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.tcg-btn--ghost:hover { background: rgba(255, 255, 255, .08); color: inherit; }
.tcg-btn--ink { background: var(--night); color: var(--paper); }
.tcg-btn--ink:hover { background: var(--night-2); color: var(--paper); }
.tcg-btn--line { background: var(--paper); color: var(--ink); border-color: var(--line); }
.tcg-btn--line:hover { border-color: var(--gold); color: var(--ink); }

/* ---------- Header ---------- */
.tcg-header-part { position: relative; z-index: 20; }
.tcg-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.tcg-header__inner { max-width: var(--wide); margin: 0 auto; padding: .55rem var(--gutter); min-height: 4.25rem; gap: 1rem; }
.tcg-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.tcg-brand:hover { color: var(--ink); }
.tcg-brand__cat { width: auto; height: 2.75rem; }
.tcg-brand__name { font: 600 1.3rem/1 var(--display); letter-spacing: -.01em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.tcg-nav .wp-block-navigation-item__content { color: var(--ink); text-decoration: none; padding: .5rem .15rem; }
.tcg-nav .wp-block-navigation-item__content:hover { color: var(--lapis); }
.tcg-nav.wp-block-navigation { gap: 1.6rem; }
.tcg-nav .wp-block-navigation__submenu-container { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: 12px; padding: .4rem !important; box-shadow: 0 18px 40px -20px rgba(22, 26, 58, .45); min-width: 13rem !important; }
.tcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .5rem .75rem; border-radius: 8px; font-weight: 500; }
.tcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--paper-2); }
@media (max-width: 599px) { .tcg-nav .wp-block-navigation__responsive-container-open { width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line); } }
.tcg-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--night) !important; color: var(--paper) !important; padding: 1.25rem var(--gutter) 2rem; }
.tcg-nav .is-menu-open .wp-block-navigation__responsive-container-close { color: var(--paper); top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; }
.tcg-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem !important; gap: 1.1rem !important; align-items: flex-start !important; }
.tcg-nav .is-menu-open .wp-block-navigation-item__content { color: var(--paper) !important; font: 600 1.6rem/1.2 var(--display); padding: .15rem 0 !important; }
.tcg-nav .is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; border: 0 !important; box-shadow: none; padding: .35rem 0 .35rem 1rem !important; gap: .15rem !important; }
.tcg-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font: 500 1.05rem/1.4 var(--wp--preset--font-family--body); color: #d9d6ea !important; }
.tcg-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: transparent; color: var(--sun) !important; }
@media (max-width: 599px) { .tcg-brand__name { font-size: 1.15rem; } .tcg-brand__cat { height: 2.4rem; } }

/* ---------- Page scaffolding ---------- */
.tcg-main { padding-bottom: var(--wp--preset--spacing--60); }
.tcg-main--home { padding-bottom: 0; }
.tcg-crumbs { padding-top: 1.5rem; font-size: .88rem; color: var(--ink-soft); }
.tcg-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.tcg-crumbs li + li::before { content: "/"; color: var(--gold); margin-right: .5rem; }
.tcg-crumbs a { color: var(--ink-soft); text-decoration: none; }
.tcg-crumbs a:hover { color: var(--lapis); text-decoration: underline; }
.tcg-title { margin-top: .6rem; margin-bottom: 0; font-variation-settings: "SOFT" 100, "WONK" 0; }
.tcg-main > .tcg-title:first-child { margin-top: var(--wp--preset--spacing--50); }
.tcg-kicker, .tcg-lede { color: var(--ink-soft); font-size: 1.1rem; margin-top: .6rem; }
.tcg-content { margin-top: var(--wp--preset--spacing--40); }

/* Wide pages (hubs, readings): heading spans the same width as the card grid. */
.tcg-main--wide > .tcg-crumbs, .tcg-main--wide > .tcg-title { max-width: var(--wide) !important; }

/* ---------- Long-form content ---------- */
.tcg-content h2 { margin-top: 2.6em; margin-bottom: .55em; position: relative; }
.tcg-content h2::before { content: ""; display: block; width: 2.5rem; height: 3px; border-radius: 3px; background: var(--gold); margin-bottom: .7em; }
.tcg-content h3 { margin-top: 1.9em; margin-bottom: .4em; }
.tcg-content h2 + *, .tcg-content h3 + * { margin-top: 0; }
.tcg-content > p:first-child, .tcg-content > .tcg-card-hero:first-child { margin-top: 0; }
.tcg-content ul:not([class*="tcg-"]), .tcg-content ol { padding-left: 1.3em; }
.tcg-content li + li { margin-top: .3em; }
.tcg-content li::marker { color: var(--gold-deep); }
.tcg-content strong { font-weight: 650; }
.tcg-content .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 2.5rem auto; opacity: 1; }
.tcg-content .wp-block-image img { border-radius: 10px; }
.tcg-content .wp-block-table { overflow-x: auto; }
.tcg-content .wp-block-table table { border-collapse: collapse; width: 100%; font-size: .96rem; }
.tcg-content .wp-block-table th, .tcg-content .wp-block-table td { border: 0; border-bottom: 1px solid var(--line); padding: .7rem .6rem; text-align: left; vertical-align: top; }
.tcg-content .wp-block-table thead { border-bottom: 2px solid var(--gold); }
.tcg-content .wp-block-table tr:nth-child(even) td { background: rgba(245, 239, 227, .55); }
.tcg-content .wp-block-quote { margin-inline: 0; }
.tcg-content .wp-block-buttons { gap: .6rem; }
/* Legacy emoji-gradient buttons from the old theme: calm them down. */
.tcg-content .wp-block-button__link { background: var(--night) !important; color: var(--paper) !important; border-radius: 999px; }

/* ---------- Card page: hero ---------- */
.tcg-card-hero { display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; margin-bottom: 2rem !important; }
.tcg-card-hero .tcg-card-image { margin: 0 !important; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.tcg-card-hero .tcg-card-image img { width: 100% !important; border-radius: 10px !important; box-shadow: var(--card-shadow); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.tcg-card-image.is-reversed img { transform: rotate(180deg); }
.tcg-turn { font: 600 .9rem/1 var(--wp--preset--font-family--body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .55rem .9rem; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; }
.tcg-turn:hover { border-color: var(--gold); }
.tcg-turn svg { width: 1rem; height: 1rem; }
.tcg-card-facts { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem 1.1rem; margin: 0 !important; }
.tcg-facts { list-style: none; margin: 0; padding: 0 !important; }
.tcg-facts li { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .75rem; padding: .7rem 0; border-bottom: 1px dashed #d6c9b2; margin: 0 !important; font-size: .98rem; line-height: 1.5; }
.tcg-facts li:last-child { border-bottom: 0; }
.tcg-facts strong { font-weight: 600; color: var(--ink-soft); }
@media (max-width: 640px) {
	.tcg-card-hero { grid-template-columns: 1fr; justify-items: center; }
	.tcg-card-image { width: min(11.5rem, 56vw); }
	.tcg-card-facts { width: 100%; }
	.tcg-facts li { grid-template-columns: 5.4rem 1fr; }
}

/* Jump links */
.tcg-jump { list-style: none; padding: 0 !important; margin: 1.75rem 0 0 !important; display: flex; flex-wrap: wrap; gap: .45rem; }
.tcg-jump li { margin: 0 !important; }
.tcg-jump a { display: inline-block; padding: .38rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--paper); transition: border-color .2s, background-color .2s; }
.tcg-jump a:hover { border-color: var(--gold); background: var(--paper-2); }
@media (max-width: 640px) {
	.tcg-jump { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1) !important; padding-inline: var(--gutter) !important; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
	.tcg-jump::-webkit-scrollbar { display: none; }
	.tcg-jump a { white-space: nowrap; }
}

/* Theme lists */
.tcg-themes { list-style: none; padding: 0 !important; margin-top: .4rem; }
.tcg-themes li { position: relative; padding-left: 1.6rem; }
.tcg-themes li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .8rem; height: .8rem; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* Yes / no verdict */
.tcg-verdict { border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.2rem !important; background: var(--paper-2); border-left: 5px solid var(--gold); }
.tcg-verdict p { margin: 0; }
.tcg-verdict strong:first-child { font: 650 1.35rem/1 var(--display); margin-right: .25rem; }
.tcg-verdict--yes { border-left-color: var(--leaf); background: #eef3ea; }
.tcg-verdict--yes strong:first-child { color: var(--leaf); }
.tcg-verdict--no { border-left-color: var(--rose); background: #f7ebe6; }
.tcg-verdict--no strong:first-child { color: var(--rose); }
.tcg-verdict--maybe strong:first-child { color: var(--gold-deep); }

/* FAQ */
.tcg-faq { border-top: 1px solid var(--line); }
.tcg-faq > .wp-block-details, .tcg-content .wp-block-details { border-bottom: 1px solid var(--line); padding: 0; margin: 0 !important; }
.tcg-content .wp-block-details summary { list-style: none; cursor: pointer; font: 600 1.12rem/1.4 var(--display); padding: 1.05rem 2.25rem 1.05rem 0; position: relative; }
.tcg-content .wp-block-details summary::-webkit-details-marker { display: none; }
.tcg-content .wp-block-details summary::after { content: ""; position: absolute; right: .35rem; top: 50%; width: .75rem; height: .75rem; margin-top: -.5rem; border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(45deg); transition: transform .25s; }
.tcg-content .wp-block-details[open] summary::after { transform: rotate(-135deg); margin-top: -.15rem; }
.tcg-content .wp-block-details > :not(summary) { margin: 0 0 1.1rem; color: #37334a; }

/* ---------- Card page: explore ---------- */
.tcg-explore { max-width: var(--wide) !important; margin-top: var(--wp--preset--spacing--60) !important; padding-top: var(--wp--preset--spacing--50); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--50); }
.tcg-explore > * { min-width: 0; }
.tcg-explore__title { margin: 0; font-size: var(--wp--preset--font-size--x-large); }
.tcg-explore h3 { margin: 0; font-size: 1.3rem; }
.tcg-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tcg-pn__link { display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); background: var(--paper); transition: border-color .2s, box-shadow .2s; }
.tcg-pn__link:hover { border-color: var(--gold); box-shadow: var(--card-shadow); color: var(--ink); }
.tcg-pn__next { flex-direction: row-reverse; text-align: right; }
.tcg-pn__img { width: 3.4rem; height: auto; border-radius: 5px; flex-shrink: 0; }
.tcg-pn__text { display: grid; gap: .15rem; }
.tcg-pn__label { font-size: .85rem; color: var(--ink-soft); }
.tcg-pn__name { font: 600 1.15rem/1.25 var(--display); }
.tcg-explore__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.tcg-explore__head a { font-weight: 600; }
.tcg-strip { list-style: none; margin: 0; padding: .25rem 0 .75rem; display: grid; grid-auto-flow: column; grid-auto-columns: 5.4rem; gap: .8rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.tcg-strip li { scroll-snap-align: start; }
.tcg-strip a { display: grid; gap: .4rem; text-align: center; font-size: .85rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.tcg-strip img { border-radius: 6px; width: 100%; transition: transform .2s; }
.tcg-strip a:hover img { transform: translateY(-3px); }
.tcg-strip a[aria-current] img { outline: 3px solid var(--gold); outline-offset: 2px; }
.tcg-strip a[aria-current] span { color: var(--gold-deep); }
@media (max-width: 640px) { .tcg-pn { grid-template-columns: 1fr; } .tcg-pn__next { flex-direction: row; text-align: left; } }

/* Reading call to action */
.tcg-cta { background: var(--night); color: var(--paper); border-radius: 22px; padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem 2.5rem; align-items: center; position: relative; overflow: hidden; }
.tcg-cta::after { content: ""; position: absolute; right: -2.5rem; bottom: -4rem; width: 9rem; aspect-ratio: 120 / 210; background: var(--back) center / cover; transform: rotate(-14deg); opacity: .5; border-radius: 10px; }
.tcg-cta h3 { color: var(--paper); font-size: 1.6rem !important; }
.tcg-cta p { color: #d9d6ea; margin: .6rem 0 0; }
.tcg-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; position: relative; z-index: 1; }
.tcg-cta .tcg-btn--ghost { color: var(--paper); border-color: rgba(255, 255, 255, .45); }
@media (max-width: 760px) { .tcg-cta { grid-template-columns: 1fr; } .tcg-cta::after { display: none; } }

/* ---------- Post cards ---------- */
.tcg-post-grid { list-style: none; margin: 0; padding: 0; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.75rem 1.5rem; }
.tcg-post-card, .tcg-post-grid > * { margin: 0 !important; }
.tcg-post-card a { color: var(--ink); text-decoration: none; }
.tcg-post-card a:hover .tcg-post-card__title, .tcg-post-card__title a:hover { color: var(--lapis); }
.tcg-post-card__img, .tcg-post-card .wp-block-post-featured-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--paper-2); margin: 0 0 .8rem !important; }
.tcg-post-card__img img, .tcg-post-card .wp-block-post-featured-image img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .4s; }
.tcg-post-card a:hover img { transform: scale(1.03); }
.tcg-post-card__title { font: 600 1.18rem/1.3 var(--display) !important; margin: 0 !important; }
.tcg-post-card__excerpt { color: var(--ink-soft); font-size: .98rem; margin-top: .5rem !important; }
.tcg-post-card__excerpt p { margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tcg-post-grid--list { margin-top: var(--wp--preset--spacing--50) !important; gap: 2.5rem 1.75rem; }
.tcg-main--list .tcg-query, .tcg-main--list .tcg-post-grid { max-width: var(--wide) !important; }
.tcg-main--list .tcg-title, .tcg-main--list .tcg-lede, .tcg-main--list .tcg-crumbs { max-width: var(--wide) !important; }
.wp-block-query-pagination { margin-top: 3rem; gap: .5rem; font-weight: 600; }
.wp-block-query-pagination a, .wp-block-query-pagination .current { padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; }
.wp-block-query-pagination .current { background: var(--night); color: var(--paper); border-color: var(--night); }

/* ---------- Single post ---------- */
.tcg-meta { margin-top: .8rem !important; color: var(--ink-soft); font-size: .92rem; gap: .3rem 1.2rem; }
.tcg-meta a { color: var(--ink-soft); }
.tcg-featured { margin-top: var(--wp--preset--spacing--40) !important; }
.tcg-featured img { border-radius: var(--radius); }
.tcg-author { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: var(--wp--preset--spacing--50) !important; padding: 1.25rem; background: var(--paper-2); border-radius: var(--radius); border: 1px solid var(--line); }
.tcg-author img { width: 3.5rem; height: auto; flex-shrink: 0; }
.tcg-author p { margin: 0; font-size: .96rem; }
.tcg-author__name { font: 600 1.1rem/1.3 var(--display) !important; margin-bottom: .35rem !important; }
.tcg-more-posts { max-width: var(--wide) !important; margin-top: var(--wp--preset--spacing--60) !important; padding-top: var(--wp--preset--spacing--50); border-top: 1px solid var(--line); }
.tcg-more-posts__title { margin: 0 0 1.25rem; }

/* Cards mentioned in a post */
.tcg-post-cards { margin-top: var(--wp--preset--spacing--50) !important; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.tcg-post-cards h2 { font-size: 1.3rem; margin: 0 0 1rem; }
.tcg-post-cards .tcg-strip { grid-auto-columns: 5.6rem; }
.tcg-post-cards .tcg-strip span { font-size: .8rem; line-height: 1.3; }

/* ---------- Hubs: card grid ---------- */
.tcg-grid { list-style: none; margin: var(--wp--preset--spacing--40) auto 0 !important; padding: 0; max-width: var(--wide) !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); gap: 1.6rem 1.1rem; }
.tcg-grid a { display: grid; gap: .25rem; color: var(--ink); text-decoration: none; }
.tcg-grid img { width: 100%; border-radius: 8px; box-shadow: var(--card-shadow); margin-bottom: .45rem; transition: transform .25s; }
.tcg-grid a:hover img { transform: translateY(-4px) rotate(-1deg); }
.tcg-grid__name { font: 600 1.05rem/1.25 var(--display); }
.tcg-grid a:hover .tcg-grid__name { color: var(--lapis); }
.tcg-grid__kw { font-size: .84rem; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 480px) { .tcg-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem .75rem; } .tcg-grid__kw { display: none; } .tcg-grid__name { font-size: .92rem; } }

/* ---------- Home ---------- */
.tcg-hero { background: var(--night); color: var(--paper); position: relative; overflow: hidden; }
.tcg-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60rem 30rem at 85% 110%, rgba(38, 45, 99, .95), transparent 70%), radial-gradient(1.5px 1.5px at 12% 22%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 32% 78%, #fff6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 58% 14%, #fff7 50%, transparent 51%), radial-gradient(1px 1px at 72% 40%, #fff5 50%, transparent 51%), radial-gradient(1.5px 1.5px at 90% 18%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 46% 52%, #fff4 50%, transparent 51%); pointer-events: none; }
.tcg-hero__inner { position: relative; max-width: var(--wide); margin: 0 auto; padding: clamp(2.5rem, 7vw, 5.5rem) var(--gutter) clamp(3rem, 7vw, 5.5rem); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem 4rem; align-items: center; }
.tcg-hero__title { color: var(--paper); font-size: clamp(2.35rem, 1.5rem + 3.6vw, 4.1rem); line-height: 1.04; letter-spacing: -.025em; margin: 0; font-variation-settings: "SOFT" 100, "WONK" 1; max-width: 13em; }
.tcg-hero__lede { color: #d9d6ea; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width: 34em; margin: 1.25rem 0 0; }
.tcg-hero__links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.tcg-hero .tcg-btn--ghost { color: var(--paper); border-color: rgba(255, 255, 255, .45); }
.tcg-hero__draw { display: flex; justify-content: center; }
@media (max-width: 860px) { .tcg-hero__inner { grid-template-columns: 1fr; } .tcg-hero__draw { justify-content: flex-start; } }

.tcg-band { padding-block: var(--wp--preset--spacing--60); }
.tcg-band--tint { background: var(--paper-2); }
.tcg-band__title { margin: 0; text-align: left; }
.tcg-band__lede { color: var(--ink-soft); margin-top: .6rem !important; }
.tcg-band > .tcg-band__title, .tcg-band > .tcg-band__lede, .tcg-band > .tcg-band__more { max-width: var(--wide) !important; }
.tcg-band__more { margin-top: 1.75rem !important; font-weight: 600; }
.tcg-band .tcg-query { max-width: var(--wide) !important; margin-top: 1.75rem !important; }
.tcg-home-content { padding-top: var(--wp--preset--spacing--50); }
.tcg-home-content .tcg-content { margin-top: 0; }
.tcg-home-content .tcg-content > h2:first-child { margin-top: 0; }

/* Group tiles */
.tcg-tiles { list-style: none; margin: var(--wp--preset--spacing--40) auto 0 !important; padding: 0; max-width: var(--wide) !important; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
.tcg-tiles a { display: grid; justify-items: center; text-align: center; gap: .9rem; padding: 1.4rem 1rem 1.3rem; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; height: 100%; transition: border-color .2s, box-shadow .2s, transform .2s; }
.tcg-tiles a:hover { border-color: var(--gold); box-shadow: var(--card-shadow); transform: translateY(-3px); color: var(--ink); }
.tcg-tiles img { width: min(8.5rem, 100%); border-radius: 8px; box-shadow: var(--card-shadow); }
.tcg-tiles__text { display: grid; gap: .25rem; }
.tcg-tiles__name { font: 600 1.35rem/1.2 var(--display); }
.tcg-tiles__count { font-size: .85rem; font-weight: 600; color: var(--gold-deep); }
.tcg-tiles__blurb { font-size: .92rem; color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 960px) {
	.tcg-tiles { grid-template-columns: 1fr 1fr; }
	.tcg-tiles li:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.tcg-tiles { grid-template-columns: 1fr; gap: .75rem; }
	.tcg-tiles a { grid-template-columns: 4.2rem 1fr; justify-items: start; text-align: left; align-items: center; gap: 1rem; padding: .8rem 1rem; }
	.tcg-tiles img { width: 4.2rem; }
}

/* Reading tiles */
.tcg-readings { list-style: none; margin: var(--wp--preset--spacing--40) auto 0 !important; padding: 0; max-width: var(--wide) !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1.1rem; }
.tcg-readings a { display: grid; gap: .45rem; align-content: start; height: 100%; padding: 1.3rem 1.25rem 1.4rem; border-radius: 18px; background: var(--night); color: var(--paper); text-decoration: none; transition: transform .2s, background-color .2s; }
.tcg-readings a:hover { background: var(--night-2); color: var(--paper); transform: translateY(-3px); }
.tcg-readings__backs { display: flex; height: 4.6rem; margin-bottom: .6rem; }
.tcg-readings__backs .tcg-back { width: 2.6rem; border-radius: 4px; box-shadow: 0 6px 14px -6px #0008; }
.tcg-readings__backs .tcg-back + .tcg-back { margin-left: -.9rem; }
.tcg-readings__backs .tcg-back:nth-child(1) { transform: rotate(-8deg); }
.tcg-readings__backs .tcg-back:nth-child(3) { transform: rotate(8deg); }
.tcg-readings__backs[data-n="1"] .tcg-back { transform: rotate(-4deg); }
.tcg-readings__name { font: 600 1.3rem/1.2 var(--display); }
.tcg-readings__desc { color: #d9d6ea; font-size: .94rem; line-height: 1.5; }

/* ---------- Card backs and the reading widget ---------- */
.tcg-back { display: block; aspect-ratio: 120 / 210; background: var(--back) center / 100% 100% no-repeat; border-radius: 8px; }
.tcg-deck { position: relative; width: 11rem; aspect-ratio: 120 / 210; }
.tcg-deck .tcg-back { position: absolute; inset: 0; box-shadow: 0 10px 24px -10px #000a; }
.tcg-deck .tcg-back:nth-child(1) { transform: rotate(-9deg) translate(-14px, 6px); }
.tcg-deck .tcg-back:nth-child(2) { transform: rotate(-3deg) translate(-4px, 2px); }
.tcg-deck .tcg-back:nth-child(3) { transform: rotate(4deg) translate(8px, 0); }
.tcg-deck .tcg-back:nth-child(4) { transform: rotate(10deg) translate(18px, 4px); }

.tcg-reading { margin-block: 1.5rem 2.5rem; }
.tcg-content > .tcg-reading { max-width: min(62rem, 100%) !important; }
.tcg-reading__stage { display: grid; gap: 1.25rem; justify-content: center; }
.tcg-reading__controls { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.5rem; }
.tcg-reading__hint { text-align: center; color: var(--ink-soft); font-size: .95rem; margin: .75rem 0 0; }
.tcg-reading__question { display: grid; gap: .4rem; max-width: 30rem; margin: 0 auto 1.5rem; }
.tcg-reading__question label { font-weight: 600; font-size: .95rem; }
.tcg-reading__question input { font: inherit; padding: .75rem 1rem; border-radius: 12px; border: 1px solid #cfc3ad; background: var(--paper); }
.tcg-reading__question input:focus { outline: 2px solid var(--lapis); outline-offset: 1px; }

.tcg-slot { display: grid; gap: .7rem; justify-items: center; text-align: center; width: 100%; max-width: 12rem; }
.tcg-slot__pos { font: 600 .82rem/1.2 var(--wp--preset--font-family--body); color: var(--gold-deep); min-height: 1.2em; }
.tcg-slot__card { width: 100%; aspect-ratio: 300 / 526; perspective: 1000px; }
.tcg-slot__inner { position: relative; width: 100%; height: 100%; transition: transform .8s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; }
.tcg-slot.is-flipped .tcg-slot__inner { transform: rotateY(180deg); }
.tcg-slot__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 9px; overflow: hidden; box-shadow: var(--card-shadow); }
.tcg-slot__face--back { background: var(--back) center / 100% 100% no-repeat; }
.tcg-slot__face--front { transform: rotateY(180deg); background: var(--paper-2); }
.tcg-slot__face--front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcg-slot.is-reversed .tcg-slot__face--front img { transform: rotate(180deg); }
.tcg-slot__info { display: grid; gap: .25rem; opacity: 0; transform: translateY(6px); transition: opacity .4s .5s, transform .4s .5s; }
.tcg-slot.is-flipped .tcg-slot__info { opacity: 1; transform: none; }
.tcg-slot__name { font: 600 1.1rem/1.25 var(--display); }
.tcg-slot__name a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.tcg-slot__name a:hover { color: var(--lapis); }
.tcg-slot__rev { font-size: .8rem; font-weight: 700; color: var(--rose); }
.tcg-slot__kw { font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }

.tcg-reading[data-spread="three"] .tcg-reading__stage { grid-template-columns: repeat(3, minmax(0, 12rem)); }
.tcg-reading[data-spread="five"] .tcg-reading__stage { grid-template-columns: repeat(5, minmax(0, 10.5rem)); }
.tcg-reading[data-spread="cross"] .tcg-reading__stage { grid-template-columns: repeat(3, minmax(0, 10.5rem)); grid-template-areas: ". above ." "past heart future" ". below ."; }
.tcg-reading[data-spread="cross"] .tcg-slot:nth-child(1) { grid-area: heart; }
.tcg-reading[data-spread="cross"] .tcg-slot:nth-child(2) { grid-area: above; }
.tcg-reading[data-spread="cross"] .tcg-slot:nth-child(3) { grid-area: below; }
.tcg-reading[data-spread="cross"] .tcg-slot:nth-child(4) { grid-area: past; }
.tcg-reading[data-spread="cross"] .tcg-slot:nth-child(5) { grid-area: future; }
@media (max-width: 760px) {
	.tcg-reading[data-spread="five"] .tcg-reading__stage { grid-template-columns: repeat(2, minmax(0, 10rem)); }
	.tcg-reading[data-spread="five"] .tcg-slot:last-child { grid-column: 1 / -1; justify-self: center; max-width: 10rem; }
	.tcg-reading[data-spread="cross"] .tcg-reading__stage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
	.tcg-reading[data-spread="cross"] .tcg-slot__kw { display: none; }
}
@media (max-width: 520px) {
	.tcg-reading[data-spread="three"] .tcg-reading__stage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
	.tcg-reading[data-spread="three"] .tcg-slot__kw { display: none; }
	.tcg-slot__name { font-size: .98rem; }
}

.tcg-reading[data-spread="love"] .tcg-reading__stage { grid-template-columns: repeat(3, minmax(0, 12rem)); }
@media (max-width: 520px) {
	.tcg-reading[data-spread="love"] .tcg-reading__stage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
	.tcg-reading[data-spread="love"] .tcg-slot__kw { display: none; }
}
.tcg-love { display: none; max-width: 40rem; margin: 2rem auto 0; padding: 1.5rem 1.5rem .5rem; border-radius: 16px; background: var(--paper-2); opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.tcg-love.is-shown { display: block; opacity: 1; transform: none; }
.tcg-content .tcg-love__title { font: 600 1.5rem/1.2 var(--display); margin: 0 0 1rem; }
.tcg-content .tcg-love__title::before { display: none; }
.tcg-love__item { margin-bottom: 1.25rem; }
.tcg-love__item p { margin: 0; }
.tcg-love__pos { color: var(--gold-deep); font-weight: 600; font-size: .85rem; }
.tcg-content .tcg-love__name { font: 600 1.15rem/1.3 var(--display); margin: .1rem 0 .35rem; }
.tcg-love__name a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.tcg-love__note { color: var(--ink-soft); font-size: .9rem; margin: 0 0 1rem !important; }

/* One-card readings: card beside its message */
.tcg-reading--single .tcg-reading__stage { grid-template-columns: minmax(0, 12.5rem) minmax(0, 26rem); align-items: center; gap: 1.5rem 2.25rem; }
.tcg-reading--single .tcg-slot { max-width: 12.5rem; }
.tcg-reading--single .tcg-slot__info { display: none; }
.tcg-message { display: grid; gap: .6rem; align-content: center; opacity: 0; transform: translateY(8px); transition: opacity .45s .55s, transform .45s .55s; }
.tcg-message.is-shown { opacity: 1; transform: none; }
.tcg-message__eyebrow { color: var(--gold-deep); font-weight: 600; font-size: .92rem; margin: 0; }
.tcg-message__name { font: 600 1.8rem/1.15 var(--display); margin: 0; }
.tcg-message__answer { font: 650 2.6rem/1 var(--display); margin: 0; }
.tcg-message__answer.is-yes { color: var(--leaf); }
.tcg-message__answer.is-no { color: var(--rose); }
.tcg-message__answer.is-maybe, .tcg-message__answer.is-notyet { color: var(--gold-deep); }
.tcg-message p { margin: 0; }
.tcg-message__kw { color: var(--ink-soft); font-size: .95rem; }
.tcg-message__link { font-weight: 600; }
@media (max-width: 640px) {
	.tcg-reading--single .tcg-reading__stage { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.tcg-reading--single .tcg-slot { max-width: 10.5rem; }
}

/* Hero variant on the dark home banner */
.tcg-reading--hero .tcg-slot__card, .tcg-reading--day .tcg-slot__card { position: relative; }
.tcg-reading--single .tcg-slot__card::before, .tcg-reading--single .tcg-slot__card::after { content: ""; position: absolute; inset: 0; background: var(--back) center / 100% 100% no-repeat; border-radius: 9px; box-shadow: 0 10px 24px -12px #000a; }
.tcg-reading--single .tcg-slot__card::before { transform: rotate(-8deg) translate(-10px, 4px); }
.tcg-reading--single .tcg-slot__card::after { transform: rotate(5deg) translate(9px, 2px); }
.tcg-reading--single .tcg-slot__inner { z-index: 1; }
.tcg-reading--hero { margin: 0; width: 100%; max-width: 30rem; }
.tcg-reading--hero > .tcg-deck { margin: 0 auto; }
.tcg-reading--hero .tcg-reading__hint { color: #c9c5de; }
.tcg-reading--hero .tcg-reading__stage { grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: 1.25rem 1.75rem; }
.tcg-reading--hero .tcg-slot { max-width: 10.5rem; }
.tcg-reading--hero .tcg-message__name { color: var(--paper); font-size: 1.6rem; }
.tcg-reading--hero .tcg-message__eyebrow { color: var(--sun); }
.tcg-reading--hero .tcg-message p, .tcg-reading--hero .tcg-message__kw { color: #d9d6ea; }
.tcg-reading--hero .tcg-message__link { color: var(--sun); }
.tcg-reading--hero .tcg-reading__controls { justify-content: flex-start; }
.tcg-reading--hero .tcg-btn--line { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, .45); }
@media (max-width: 860px) { .tcg-reading--hero { max-width: none; } }
@media (max-width: 480px) { .tcg-reading--hero .tcg-reading__stage { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 1rem; text-align: left; justify-items: start; } .tcg-reading--hero .tcg-message__name { font-size: 1.3rem; } .tcg-reading--hero .tcg-message p:not(.tcg-message__eyebrow) { font-size: .92rem; } }

/* ---------- Footer ---------- */
.tcg-footer { background: var(--night); color: #d9d6ea; margin-top: 0; }
.tcg-footer__inner { max-width: var(--wide); margin: 0 auto; padding: var(--wp--preset--spacing--60) var(--gutter) var(--wp--preset--spacing--50); display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; }
.tcg-footer a { color: #ece9f7; text-decoration: none; }
.tcg-footer a:hover { color: var(--sun); text-decoration: underline; }
.tcg-footer h2 { color: var(--sun); font-size: 1.05rem; font-family: var(--wp--preset--font-family--body); font-weight: 700; margin: 0 0 .9rem; letter-spacing: .01em; }
.tcg-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tcg-footer__about p { margin: 1rem 0 0; max-width: 24rem; font-size: .96rem; }
.tcg-brand--footer { color: var(--paper) !important; }
.tcg-brand--footer:hover { text-decoration: none !important; }
.tcg-brand--footer .tcg-brand__cat { background: var(--paper); border-radius: 50%; padding: .35rem; height: 3.25rem; }
.tcg-footer__base { max-width: var(--wide); margin: 0 auto; padding: 1.4rem var(--gutter) 2rem; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; font-size: .86rem; }
.tcg-footer__base p { margin: 0; max-width: 46rem; }
.tcg-footer__legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
@media (max-width: 860px) { .tcg-footer__inner { grid-template-columns: 1fr 1fr; } .tcg-footer__about { grid-column: 1 / -1; } }

/* ---------- Search ---------- */
.tcg-search { max-width: 34rem; margin-top: 1.5rem !important; }
.tcg-search .wp-block-search__input { border-radius: 999px; border: 1px solid #cfc3ad; padding: .7rem 1.1rem; font: inherit; }
.tcg-search .wp-block-search__button { border-radius: 999px; background: var(--night); color: var(--paper); border: 0; padding: .7rem 1.3rem; font-weight: 600; margin-left: .5rem; }

/* ---------- Ads: keep Auto Ads from colliding with our layout ---------- */
.google-auto-placed { margin-block: 2rem !important; clear: both; }