/*
Theme Name: Tarotis Almanac
Theme URI: https://tarotis.com/
Author: Tarotis
Description: An editorial almanac theme for tarot, astrology, horoscope and numerology publishing. Parchment and ink palette, tarot-card Popular Topics spread, moon phase strip, Header code widget area printed right after the header.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
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: tarotis
Tags: blog, news, two-columns, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Tokens (semantic, daisyUI-style naming)
   ========================================================================== */
:root {
	--color-base-100: #f4efe6;
	--color-base-200: #ece4d6;
	--color-base-300: #ddd2be;
	--color-base-content: #1e1a2e;
	--color-muted: #5a5468;
	--color-primary: #1e1a2e;
	--color-primary-content: #f4efe6;
	--color-accent: #b23a1e;
	--color-accent-content: #fff8f0;
	--color-gold: #8a6a24;
	--color-gold-soft: #c7a75e;
	--color-card: #fbf8f2;
	--color-night: #17141f;
	--color-night-content: #ece4d6;
	--color-ring: #b23a1e;

	--font-display: "Libre Bodoni", "Bodoni 72", "Didot", Georgia, serif;
	--font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	--radius-card: 6px;
	--radius-pill: 999px;
	--rule: 1px solid var(--color-base-content);
	--rule-soft: 1px solid color-mix(in srgb, var(--color-base-content) 18%, transparent);
	--shell: 1240px;
	--measure: 680px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-base-100: #15121c;
		--color-base-200: #1d1927;
		--color-base-300: #2c2739;
		--color-base-content: #ece4d6;
		--color-muted: #aaa2b6;
		--color-primary: #ece4d6;
		--color-primary-content: #15121c;
		--color-accent: #e8775a;
		--color-accent-content: #15121c;
		--color-gold: #d1b06a;
		--color-gold-soft: #8f7640;
		--color-card: #1b1724;
		--color-night: #0e0c13;
		--color-ring: #e8775a;
	}
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-base-100);
	color: var(--color-base-content);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	background-image:
		radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--color-gold-soft) 14%, transparent) 0, transparent 38%),
		radial-gradient(circle at 92% 30%, color-mix(in srgb, var(--color-accent) 6%, transparent) 0, transparent 30%);
	background-attachment: fixed;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-accent); }

:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; margin: 0; text-wrap: balance; }

p { margin: 0 0 1em; }

.shell { width: min(100% - 32px, var(--shell)); margin-inline: auto; }

.sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: 16px; top: -60px; z-index: 100;
	background: var(--color-primary); color: var(--color-primary-content);
	padding: 10px 16px; border-radius: 4px; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--color-primary-content); }

/* ==========================================================================
   3. Components: buttons, badges, inputs, eyebrow
   ========================================================================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 46px; padding: 0 22px;
	font: 600 .82rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
	border: 1px solid var(--color-base-content); border-radius: var(--radius-pill);
	background: transparent; color: var(--color-base-content);
	text-decoration: none; cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn-primary { background: var(--color-primary); color: var(--color-primary-content); }
.btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-content); }
.btn-ghost:hover { background: var(--color-base-content); color: var(--color-base-100); }

.badge {
	display: inline-flex; align-items: center;
	padding: 5px 10px 4px;
	font: 600 .7rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
	color: var(--color-accent); text-decoration: none;
	border: 1px solid currentColor; border-radius: var(--radius-pill);
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.badge:hover { background: var(--color-accent); color: var(--color-accent-content); border-color: var(--color-accent); }

.input {
	flex: 1; min-width: 0; min-height: 46px; padding: 0 18px;
	font: inherit; color: inherit;
	background: var(--color-card);
	border: 1px solid color-mix(in srgb, var(--color-base-content) 35%, transparent);
	border-radius: var(--radius-pill);
}
.input::placeholder { color: var(--color-muted); }

.eyebrow {
	display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-3);
	font: 600 .74rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase;
	color: var(--color-gold);
}
.ornament { color: var(--color-accent); flex: none; }

.section-head { text-align: center; margin-bottom: var(--space-7); }
.section-head .eyebrow { justify-content: center; }
.section-head--left { text-align: left; }
.section-head--left .eyebrow { justify-content: flex-start; }
.section-title { font-size: clamp(2rem, 4.2vw, 3.2rem); font-style: italic; }
.section-title--sm { font-size: 1.7rem; margin-bottom: var(--space-5); }

.search-form { display: flex; gap: 10px; width: 100%; max-width: 640px; }

/* ==========================================================================
   4. Header
   ========================================================================== */
.site-header { position: relative; z-index: 20; border-bottom: var(--rule); background: var(--color-base-100); }

.almanac-strip { background: var(--color-night); color: var(--color-night-content); font-size: .76rem; letter-spacing: .08em; }
.almanac-strip__inner { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 34px; flex-wrap: wrap; padding-block: 6px; }
.almanac-item { display: inline-flex; align-items: center; gap: 7px; }
.almanac-sep { width: 4px; height: 4px; transform: rotate(45deg); background: var(--color-gold-soft); }
.moon-glyph .moon-dark { fill: #3a3448; }
.moon-glyph .moon-lit { fill: #f1e6c8; }

.masthead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5); min-height: 84px; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-base-content); }
.brand:hover { color: var(--color-base-content); }
.brand:hover .logo-star { fill: var(--color-gold); }
.brand-word { font: 500 1.75rem/1 var(--font-display); letter-spacing: .26em; text-transform: uppercase; padding-left: .1em; }
.logo-star { fill: var(--color-accent); transition: fill .2s var(--ease); }
.custom-logo { max-height: 56px; width: auto; }

.primary-nav { justify-self: center; }
.primary-menu { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.primary-menu > li { position: relative; }
.primary-menu a { display: inline-block; padding: 10px 2px; font-size: .9rem; font-weight: 500; letter-spacing: .04em; text-decoration: none; }
.primary-menu a:hover,
.primary-menu .current-menu-item > a { color: var(--color-accent); }
.primary-menu .current-menu-item > a { box-shadow: inset 0 -1px 0 currentColor; }
.primary-menu .sub-menu {
	position: absolute; left: -16px; top: 100%; min-width: 220px; padding: 8px 0; margin: 0; list-style: none;
	background: var(--color-card); border: var(--rule); border-radius: var(--radius-card);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s var(--ease);
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.primary-menu .sub-menu a { display: block; padding: 8px 16px; }

.masthead__tools { display: flex; gap: 6px; justify-self: end; }
.icon-btn {
	display: inline-grid; place-items: center; width: 44px; height: 44px;
	border: 1px solid transparent; border-radius: 50%;
	background: transparent; color: inherit; cursor: pointer;
	transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.icon-btn:hover { border-color: var(--color-base-content); }
.icon-btn[aria-expanded="true"] { background: var(--color-primary); color: var(--color-primary-content); }
.menu-btn { display: none; }

.search-panel { border-top: var(--rule-soft); padding: var(--space-5) 0; background: var(--color-base-200); }
.search-panel .shell { display: flex; justify-content: center; }

/* ==========================================================================
   5. Lead story ("the spread")
   ========================================================================== */
.lead-wrap { padding-block: var(--space-8) var(--space-8); border-bottom: var(--rule-soft); }
.lead { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-8); align-items: center; }
.lead__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--color-muted); letter-spacing: .04em; }
.lead__title { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.02; margin: var(--space-4) 0 var(--space-5); }
.lead__title a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 92%; transition: background-size .4s var(--ease); }
.lead__title a:hover { color: inherit; background-size: 100% 1px; }
.lead__excerpt { font-size: 1.12rem; color: var(--color-muted); max-width: 52ch; margin-bottom: var(--space-6); }

.lead__figure { position: relative; margin: 0; padding: 12px; justify-self: center; width: min(100%, 420px); }
.lead__seal {
	position: absolute; left: -44px; bottom: 40px; z-index: 2;
	width: 132px; height: 132px; display: grid; place-items: center;
	background: var(--color-base-100); border: var(--rule); border-radius: 50%;
	color: var(--color-gold);
}
.lead__seal .ornament { width: 22px; height: 22px; color: var(--color-accent); }
.lead__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: tarotis-spin 60s linear infinite; }
.lead__ring text { font: 600 17px var(--font-body); fill: currentColor; }
.lead__arch {
	position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
	border-radius: 999px 999px 8px 8px; border: var(--rule);
	outline: 1px solid var(--color-gold); outline-offset: 8px;
	background: var(--color-base-200);
}
.lead__arch img,
.lead__arch .card-art { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.lead__arch:hover img { transform: scale(1.04); }

@keyframes tarotis-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   6. Ledger (post lists)
   ========================================================================== */
.ledger-wrap { padding-block: var(--space-8); }
.ledger { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-7); border-top: var(--rule); }

.entry {
	display: grid; grid-template-columns: 72px 1fr 120px; gap: var(--space-5); align-items: start;
	padding: var(--space-5) 0; border-bottom: var(--rule-soft);
}
.entry__date { display: flex; flex-direction: column; align-items: flex-start; padding-top: 2px; }
.entry__day { font: italic 500 2.6rem/1 var(--font-display); color: var(--color-accent); }
.entry__month { margin-top: 6px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
.entry__meta { margin-bottom: 10px; }
.entry__title { font-size: 1.42rem; line-height: 1.18; margin-bottom: 8px; }
.entry__title a { text-decoration: none; }
.entry__title a:hover { color: var(--color-accent); }
.entry__excerpt { font-size: .93rem; color: var(--color-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.entry__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 60px 60px 4px 4px; border: var(--rule-soft); background: var(--color-night); }
.entry__media img,
.entry__media .card-art { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.entry:hover .entry__media img { transform: scale(1.05); }

/* Pagination */
.pagination { margin-top: var(--space-7); }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.page-numbers {
	display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px;
	border: var(--rule-soft); border-radius: var(--radius-pill); text-decoration: none; font-size: .9rem; white-space: nowrap;
}
.page-numbers.current { background: var(--color-primary); color: var(--color-primary-content); border-color: var(--color-primary); }
a.page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent); }
.page-numbers.dots { border: 0; }

/* ==========================================================================
   7. Popular Topics: tarot card spread
   ========================================================================== */
.popular { padding-block: var(--space-9); background: var(--color-base-200); border-top: var(--rule); border-bottom: var(--rule); position: relative; overflow: hidden; }
.popular::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image: radial-gradient(circle, color-mix(in srgb, var(--color-gold) 40%, transparent) 1px, transparent 1.5px);
	background-size: 28px 28px;
	mask-image: linear-gradient(180deg, #000, transparent 55%);
}
.popular .shell { position: relative; }
.popular--article { margin-top: var(--space-8); }

.spread { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.spread__slot { display: flex; }

.tarot-card { flex: 1; display: flex; }
.tarot-card__link {
	flex: 1; display: grid; grid-template-rows: auto auto 1fr; gap: 12px;
	padding: 14px 14px 18px;
	background: var(--color-card); color: var(--color-base-content); text-decoration: none;
	border: 1px solid var(--color-base-content); border-radius: var(--radius-card);
	box-shadow: inset 0 0 0 5px var(--color-card), inset 0 0 0 6px var(--color-gold-soft), 0 1px 0 var(--color-base-300);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.spread__slot:nth-child(odd) .tarot-card__link:hover { transform: translateY(-6px) rotate(-1.2deg); }
.spread__slot:nth-child(even) .tarot-card__link:hover { transform: translateY(-6px) rotate(1.2deg); }
.tarot-card__link:hover { color: var(--color-base-content); box-shadow: inset 0 0 0 5px var(--color-card), inset 0 0 0 6px var(--color-gold), 0 18px 30px -18px rgba(30, 26, 46, .55); }

.tarot-card__index {
	display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 4px;
	font: 500 .95rem/1 var(--font-display); letter-spacing: .2em; color: var(--color-gold);
}
.tarot-card__index::before,
.tarot-card__index::after { content: ""; width: 18px; height: 1px; background: currentColor; }

.tarot-card__window {
	display: block; aspect-ratio: 3 / 4; overflow: hidden;
	border-radius: 999px 999px 3px 3px; border: 1px solid color-mix(in srgb, var(--color-base-content) 30%, transparent);
	background: var(--color-night);
}
.tarot-card__window img,
.tarot-card__window .card-art { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .6s var(--ease); filter: saturate(.85) sepia(.12); }
.tarot-card__link:hover .tarot-card__window img { transform: scale(1.05); filter: none; }

.tarot-card__title {
	align-self: end; text-align: center;
	font: 500 1.06rem/1.25 var(--font-display);
	padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--color-base-content) 14%, transparent);
}
.tarot-card__name {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 3.75em;
}

/* Generated card artwork (posts without a featured image) */
.card-art .art-bg { fill: var(--color-night); }
.card-art .art-stars circle { fill: var(--color-gold-soft); }
.card-art .art-fill { fill: var(--color-gold-soft); }
.card-art .art-line { stroke: var(--color-gold-soft); stroke-width: 1.4; fill: none; }
.card-art .art-dot { fill: #f1e6c8; }
.card-art .art-hole { fill: var(--color-night); }

/* ==========================================================================
   8. Article
   ========================================================================== */
.article__head { max-width: 920px; text-align: center; padding-block: var(--space-8) var(--space-6); }
.article__meta { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .84rem; color: var(--color-muted); }
.article__meta .dot { width: 4px; height: 4px; background: var(--color-gold); transform: rotate(45deg); }
.article__title { font-size: clamp(2.3rem, 5vw, 4rem); margin: var(--space-5) 0 var(--space-4); line-height: 1.05; }
.article__dek { font: italic 400 1.3rem/1.5 var(--font-display); color: var(--color-muted); max-width: 46ch; margin: 0 auto; }

.article__figure { max-width: 1040px; margin: 0 auto var(--space-7); }
.article__figure img { width: 100%; max-height: 620px; object-fit: cover; border-radius: 280px 280px var(--radius-card) var(--radius-card); border: var(--rule); }
.article__figure figcaption { font-size: .82rem; color: var(--color-muted); text-align: center; margin-top: 10px; }

.prose { width: min(100% - 32px, var(--measure)); margin-inline: auto; font-size: 1.1rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose p { margin: 0; }
.prose > p:first-of-type::first-letter {
	float: left; font: 500 4.4em/.82 var(--font-display); color: var(--color-accent);
	padding: .06em .12em 0 0;
}
.prose h2 { font-size: 2rem; margin-top: 2em; }
.prose h3 { font-size: 1.5rem; margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { color: var(--color-accent); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--color-gold); }
.prose blockquote {
	margin: 2em 0; padding: 0 0 0 1.2em; border-left: 2px solid var(--color-accent);
	font: italic 400 1.35rem/1.5 var(--font-display);
}
.prose img { border-radius: var(--radius-card); }
.prose figure { margin-inline: 0; }
.prose figcaption { font-size: .85rem; color: var(--color-muted); margin-top: 6px; }
.prose hr { border: 0; height: 14px; margin: 2.5em 0; background: radial-gradient(circle, var(--color-gold) 2px, transparent 2.5px) center / 18px 14px repeat-x; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: 10px 12px; border-bottom: var(--rule-soft); text-align: left; }
.prose .alignwide { width: min(100vw - 32px, 1040px); margin-left: 50%; transform: translateX(-50%); }
.prose .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: none; }

.page-links { margin-top: 2em; display: flex; gap: 8px; }
.after-article { margin-top: var(--space-7); }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); max-width: 1040px; margin-top: var(--space-8); }
.post-nav__item { display: block; padding: var(--space-5); border: var(--rule-soft); border-radius: var(--radius-card); text-decoration: none; transition: border-color .2s var(--ease); }
.post-nav__item:hover { border-color: var(--color-accent); color: inherit; }
.post-nav__item--next { text-align: right; grid-column: 2; }
.post-nav__label { display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 6px; }
.post-nav__title { font: 500 1.2rem/1.3 var(--font-display); }

/* Comments */
.comments { max-width: var(--measure); padding-block: var(--space-8); }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { padding-left: var(--space-6); }
.comment-body { padding: var(--space-5) 0; border-bottom: var(--rule-soft); }
.comment-meta { display: flex; align-items: center; gap: 12px; font-size: .88rem; margin-bottom: 8px; }
.comment-meta time { color: var(--color-muted); }
.comment-avatar { border-radius: 50%; }
.comment-author { font-weight: 600; }
.comment-reply-link { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); }
.comment-form label { display: block; font-size: .85rem; margin-bottom: 4px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%; padding: 12px 14px; font: inherit; color: inherit;
	background: var(--color-card); border: 1px solid color-mix(in srgb, var(--color-base-content) 35%, transparent); border-radius: var(--radius-card);
}
.comment-form p { margin-bottom: var(--space-4); }

/* ==========================================================================
   9. Page heads, empty states
   ========================================================================== */
.page-head { padding-block: var(--space-8) 0; text-align: center; }
.page-head .eyebrow { justify-content: center; }
.page-title { font-size: clamp(2.2rem, 5vw, 3.8rem); font-style: italic; }
.page-intro { max-width: 60ch; margin: var(--space-4) auto 0; color: var(--color-muted); }

.empty-state { text-align: center; padding-block: var(--space-9); display: grid; justify-items: center; gap: var(--space-4); }
.empty-state .eyebrow { justify-content: center; }

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer { background: var(--color-night); color: var(--color-night-content); padding-top: var(--space-8); }
.site-footer__inner { display: grid; grid-template-columns: 1fr auto; gap: var(--space-7); align-items: end; padding-bottom: var(--space-7); border-bottom: 1px solid rgba(236, 228, 214, .16); }
.brand--footer { color: var(--color-night-content); }
.brand--footer:hover { color: var(--color-night-content); }
.brand--footer .brand-word { font-size: clamp(2.2rem, 6vw, 4.2rem); }
.logo-mark--lg { width: 44px; height: 62px; }
.site-footer .logo-star { fill: #e8775a; }
.site-footer__tagline { margin: var(--space-4) 0 0; color: rgba(236, 228, 214, .7); max-width: 46ch; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: flex-end; }
.footer-menu a { display: inline-block; padding: 8px 0; font-size: .86rem; letter-spacing: .04em; text-decoration: none; color: rgba(236, 228, 214, .85); }
.footer-menu a:hover { color: #e8775a; }
.site-footer__base { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-5); font-size: .8rem; color: rgba(236, 228, 214, .62); }
.site-footer__base p { margin: 0; }
.to-top { color: rgba(236, 228, 214, .85); text-decoration: none; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
.to-top:hover { color: #e8775a; }

/* ==========================================================================
   11. WordPress core classes
   ========================================================================== */
.alignleft { float: left; margin: .3em 1.4em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.4em; }
.aligncenter { margin-inline: auto; }
.wp-caption-text, .gallery-caption { font-size: .85rem; color: var(--color-muted); }
.sticky .entry__title::before { content: "✦ "; color: var(--color-accent); }
.bypostauthor > .comment-body .comment-author::after { content: " ·  author"; color: var(--color-gold); font-weight: 400; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ==========================================================================
   12. Responsive
   ========================================================================== */
@media (max-width: 1080px) {
	.spread { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
	.tarot-card__title { font-size: .98rem; }
}

@media (max-width: 960px) {
	.masthead { grid-template-columns: 1fr auto; min-height: 72px; }
	.menu-btn { display: inline-grid; }
	.primary-nav {
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--color-base-100); border-bottom: var(--rule);
		padding: var(--space-4) 16px var(--space-5);
		display: none;
	}
	.primary-nav.is-open { display: block; }
	.primary-menu { flex-direction: column; gap: 0; }
	.primary-menu a { padding: 12px 0; font-size: 1.05rem; display: block; border-bottom: var(--rule-soft); }
	.primary-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; background: none; padding-left: 16px; }

	.lead { grid-template-columns: 1fr; gap: var(--space-7); }
	.lead__figure { order: -1; width: min(72%, 360px); }
	.lead__seal { width: 96px; height: 96px; left: -30px; bottom: 24px; }
	.ledger { grid-template-columns: 1fr; }
	.spread { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__inner { grid-template-columns: 1fr; align-items: start; }
	.footer-menu { justify-content: flex-start; }
}

@media (max-width: 600px) {
	body { font-size: 16px; }
	.almanac-strip { font-size: .7rem; }
	.almanac-strip__inner { gap: 10px; }
	.brand-word { font-size: 1.4rem; letter-spacing: .2em; }
	.lead-wrap { padding-block: var(--space-6) var(--space-7); }
	.entry { grid-template-columns: 54px 1fr 84px; gap: var(--space-4); }
	.entry__day { font-size: 2rem; }
	.entry__title { font-size: 1.2rem; }
	.entry__excerpt { display: none; }
	.entry__media { border-radius: 40px 40px 3px 3px; }
	.popular { padding-block: var(--space-8); }
	.spread { gap: var(--space-4) 12px; }
	.tarot-card__link { padding: 10px 10px 14px; gap: 10px; }
	.tarot-card__index { font-size: .82rem; }
	.tarot-card__title { font-size: .92rem; }
	.post-nav { grid-template-columns: 1fr; }
	.post-nav__item--next { grid-column: auto; }
	.prose { font-size: 1.04rem; }
	.search-form { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
	.almanac-strip, .masthead__tools, .popular, .site-footer, .post-nav, .comments { display: none; }
}