@charset "UTF-8";
/* ==========================================================================
   Sovereign Terminal v10 — "Night Sky"
   --------------------------------------------------------------------------
   An astrology news publication set on a midnight field.

   THE FIELD. A deep indigo-to-midnight gradient with a canvas of twinkling
   gold stars behind everything (main.js). Content sits on it as frosted,
   gold-hairlined panels — never on white.

   COLOUR. Midnight ground, lavender-white ink, and gold as the one accent:
   every action, every eyebrow, every emphasised word. Topic tints (violet,
   rose, aqua, azure, ember) appear only as small marks.

   TYPE. Cormorant Garamond for every headline, with italic gold <em> for the
   emphasised word; Jost for body, labels and the tracked-out eyebrows.

   Sections:
      1  Tokens           9  Topics, plates, quote band, Star Letter
      2  Base            10  Sidebar panels
      3  Layout / bands  11  Footer
      4  Type, buttons   12  Archive, pages, notices
      5  Header / drawer 13  Single post + entry content
      6  Hero, wheel     14  Utilities, motion, print
      7  Today's sky
      8  Cards, headlines, explorer
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
	--night: #0A0E24;
	--deep: #131A3C;
	--deep-2: #1A2150;
	--panel: rgba(255, 255, 255, 0.04);
	--panel-2: rgba(255, 255, 255, 0.07);
	--panel-solid: #121838;

	--gold: #D8B46A;
	--gold-2: #F3DEA8;
	--gold-deep: #B8924A;
	--gold-glow: rgba(243, 222, 168, 0.45);
	--gold-wash: rgba(216, 180, 106, 0.12);

	--ink: #ECE9F7;
	--muted: #A6A5C4;
	--faint: #8584A8;

	--violet: #A99BF0;
	--rose: #E59BB4;
	--ok: #8FD6B4;
	--err: #F2A0A0;

	--line: rgba(216, 180, 106, 0.28);
	--line-strong: rgba(216, 180, 106, 0.55);
	--line-soft: rgba(236, 233, 247, 0.1);

	--serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
	--sans: "Jost", "Helvetica Neue", Arial, sans-serif;
	--symbols: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", serif;

	--r-sm: 12px;
	--r: 18px;
	--r-lg: 26px;
	--r-xl: 32px;
	--r-pill: 999px;

	--container: 1200px;
	--gutter: clamp(16px, 4vw, 32px);
	--band-y: clamp(56px, 8vw, 104px);

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--speed: 260ms;

	--shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.65);
	--logo-h: 40px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	background: var(--night);
	color-scheme: dark;
}

body {
	margin: 0;
	min-height: 100vh;
	background:
		radial-gradient(ellipse 120% 70% at 50% -10%, #1F2760 0%, rgba(26, 33, 80, 0.55) 35%, transparent 70%),
		radial-gradient(ellipse 60% 40% at 100% 60%, rgba(169, 155, 240, 0.08), transparent 70%),
		var(--night);
	background-attachment: fixed;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

.starfield {
	position: fixed;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.site-header,
.site-main,
.site-footer { position: relative; z-index: 1; }

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 500;
	line-height: 1.12;
	color: var(--ink);
	text-wrap: balance;
}

em { font-style: italic; color: var(--gold-2); }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold); color: var(--night); }

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

.screen-reader-text {
	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: 1rem;
	top: -4rem;
	z-index: 300;
	padding: 0.7rem 1.1rem;
	border-radius: var(--r-pill);
	background: var(--gold);
	color: var(--night);
	font-weight: 500;
	text-decoration: none;
	transition: top var(--speed) var(--ease);
}

.skip-link:focus { top: 1rem; }

/* ── 3. Layout / bands ───────────────────────────────────────────────────── */
.container,
.band__inner {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.band { padding-block: var(--band-y); }

.band__head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	column-gap: 1.5rem;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.band__head > .eyebrow { grid-column: 1 / -1; margin-bottom: 0.6rem; }

.band__title {
	font-size: clamp(2rem, 4.4vw, 3.2rem);
	letter-spacing: -0.005em;
}

.band__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding-bottom: 0.35rem;
	color: var(--gold);
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--speed) var(--ease), gap var(--speed) var(--ease);
}

.band__link:hover { color: var(--gold-2); gap: 0.7rem; }

.band__head--center {
	display: block;
	max-width: 680px;
	margin-inline: auto;
	text-align: center;
}

.band__lead {
	margin-top: 1rem;
	color: var(--muted);
	font-size: 1.05rem;
}

/* Gold hairline between consecutive bands, fading out at both ends. */
.band + .band,
.quote-band + .band { position: relative; }

.band + .band::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: min(var(--container), calc(100% - 2 * var(--gutter)));
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--line), transparent);
	transform: translateX(-50%);
}

/* ── 4. Type primitives, buttons, chips ──────────────────────────────────── */
.eyebrow {
	display: inline-block;
	color: var(--gold);
	font-family: var(--sans);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	line-height: 1.5;
}

.meta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.55rem;
	color: var(--faint);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
}

.meta__dot { color: var(--gold); font-size: 0.6rem; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.95rem 2rem;
	border: 1px solid var(--gold);
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--gold-2);
	font-family: var(--sans);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.btn:hover,
.btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 40px rgba(216, 180, 106, 0.3);
}

.btn--gold {
	background: linear-gradient(135deg, var(--gold-2), var(--gold));
	color: var(--night);
}

.btn--ghost:hover { background: var(--gold-wash); }

.btn--sm { padding: 0.7rem 1.35rem; font-size: 0.72rem; }

.btn__star { font-size: 0.8em; }

/* Kept for any content that still prints the old arrow helper. */
.arrow-badge { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; }
.arrow-badge svg { width: 0.75rem; height: 0.75rem; }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	color: var(--gold-2);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.chip::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--chip-bg, var(--gold));
	box-shadow: 0 0 10px var(--chip-bg, var(--gold));
}

.chip:hover { background: var(--gold-wash); border-color: var(--gold); }

/* ── 5. Header / drawer ──────────────────────────────────────────────────── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	transition: box-shadow var(--speed) var(--ease);
}

/* The frosted plate is a pseudo-element, not the header's own background:
   backdrop-filter on the header would make it the containing block for the
   position:fixed drawer inside it, trapping the drawer in a 76px strip. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(10, 14, 36, 0);
	border-bottom: 1px solid transparent;
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.site-header--scrolled::before {
	background: rgba(10, 14, 36, 0.82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom-color: var(--line-soft);
}

.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}

.masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 84px;
}

.masthead__brand { flex: none; display: flex; align-items: center; }

.site-logo {
	font-family: var(--serif);
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--gold-2);
	text-decoration: none;
}

.custom-logo-link { display: inline-block; line-height: 0; }

.custom-logo {
	width: auto;
	height: auto;
	max-height: var(--logo-h);
	max-width: min(240px, 52vw);
	object-fit: contain;
}

/* A logo drawn for a light page renders as a warm light silhouette on the
   night ground (Customizer → Site Identity → Logo on dark background). */
.logo-light .custom-logo { filter: brightness(0) invert(1) sepia(0.18) brightness(1.02); }

.nav-list {
	display: flex;
	align-items: center;
	gap: clamp(1.1rem, 2.4vw, 2.2rem);
}

.nav-list a {
	position: relative;
	display: inline-block;
	padding-block: 0.4rem;
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}

.nav-list a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -0.15rem;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 8px var(--gold);
	transform: translateX(-50%) scale(0);
	transition: transform var(--speed) var(--ease);
}

.nav-list a:hover,
.nav-list a:focus-visible,
.nav-list .current-menu-item > a,
.nav-list .current-category-ancestor > a { color: var(--gold-2); }

.nav-list a:hover::after,
.nav-list .current-menu-item > a::after { transform: translateX(-50%) scale(1); }

.masthead__util { display: flex; align-items: center; gap: 0.75rem; flex: none; }

.nav-head,
.nav-extra { display: none; }

.menu-pill {
	display: none;
	place-items: center;
	width: 2.85rem;
	height: 2.85rem;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--panel);
	color: var(--gold-2);
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.menu-pill:hover,
.menu-pill:focus-visible { background: var(--gold-wash); border-color: var(--gold); }

.menu-pill__bars { display: grid; gap: 4px; width: 1.05rem; }

.menu-pill__bars span { display: block; height: 1.5px; border-radius: 2px; background: currentColor; }

.menu-pill__bars span:nth-child(2) { width: 70%; justify-self: end; }

@media (max-width: 1080px) {
	.menu-pill { display: grid; }

	.masthead { min-height: 72px; }

	.nav-menu {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 90;
		display: flex;
		flex-direction: column;
		width: min(22rem, 88vw);
		padding: 1.1rem 1.5rem 2rem;
		background:
			radial-gradient(ellipse at top right, rgba(216, 180, 106, 0.14), transparent 60%),
			linear-gradient(180deg, var(--deep-2), var(--night));
		border-left: 1px solid var(--line);
		box-shadow: -30px 0 80px rgba(0, 0, 0, 0.55);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 320ms var(--ease), visibility 320ms;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.nav-primary.is-open .nav-menu { transform: translateX(0); visibility: visible; }

	.nav-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 1rem;
		margin-bottom: 0.5rem;
		border-bottom: 1px solid var(--line);
	}

	.nav-head__title {
		font-family: var(--serif);
		font-size: 1.6rem;
		font-style: italic;
		color: var(--gold-2);
	}

	.nav-close {
		display: grid;
		place-items: center;
		width: 2.6rem;
		height: 2.6rem;
		padding: 0;
		border: 1px solid var(--line);
		border-radius: 50%;
		background: var(--panel);
		color: var(--gold-2);
	}

	.nav-close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

	.nav-close:hover,
	.nav-close:focus-visible { background: var(--gold-wash); border-color: var(--gold); }

	.nav-list { flex-direction: column; align-items: stretch; gap: 0; }

	.nav-list a {
		display: block;
		padding: 0.95rem 0;
		border-bottom: 1px solid var(--line-soft);
		color: var(--ink);
		font-family: var(--serif);
		font-size: 1.45rem;
		font-weight: 500;
		letter-spacing: 0.01em;
		text-transform: none;
	}

	.nav-list a::after { left: auto; right: 0.2rem; top: 50%; bottom: auto; transform: translateY(-50%) scale(0); }

	.nav-list a:hover::after,
	.nav-list .current-menu-item > a::after { transform: translateY(-50%) scale(1); }

	.nav-extra { display: grid; gap: 1.25rem; margin-top: 1.75rem; }

	.nav-subscribe { width: 100%; }

	body.nav-open { overflow: hidden; }

	body.nav-open .site-header { z-index: 100; }

	.nav-scrim {
		position: fixed;
		inset: 0;
		z-index: 80;
		background: rgba(5, 7, 20, 0.66);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 320ms var(--ease), visibility 320ms;
	}

	.nav-scrim.is-open { opacity: 1; visibility: visible; }
}

@media (max-width: 520px) {
	.masthead__cta { padding: 0.65rem 1rem; letter-spacing: 0.14em; }
	.masthead__cta .btn__star { display: none; }
}

@media (max-width: 360px) {
	.masthead__cta { display: none; }
}

@media (min-width: 1081px) {
	.nav-scrim { display: none; }

	/* Only the burger lives here, so on desktop the slot is dropped and the
	   menu sits flush right, as in the reference. */
	.masthead__util { display: none; }
}

.read-progress {
	position: fixed;
	inset: 0 0 auto;
	z-index: 70;
	height: 2px;
	pointer-events: none;
}

.read-progress__fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--gold), var(--gold-2));
	box-shadow: 0 0 12px var(--gold-glow);
	transition: width 80ms linear;
}

/* ── 6. Hero + zodiac wheel ──────────────────────────────────────────────── */
.hero { padding-block: clamp(24px, 4vw, 48px) clamp(48px, 6vw, 80px); }

.hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
	min-height: min(64vh, 580px);
}

.hero__claim {
	margin: 1.1rem 0 1.5rem;
	font-size: clamp(2.9rem, 6.4vw, 5.6rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
}

.hero__intro {
	max-width: 30rem;
	margin-bottom: 2.25rem;
	color: var(--muted);
	font-size: clamp(1.02rem, 1.4vw, 1.18rem);
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.hero__wheel { display: grid; place-items: center; }

.wheel {
	position: relative;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 1;
}

.wheel__spin {
	position: absolute;
	inset: 0;
	animation: st-spin 140s linear infinite;
}

.wheel__ring {
	position: absolute;
	inset: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
}

.wheel__ring--2 { inset: 14%; }

.wheel__ring--3 { inset: 30%; border-style: dashed; }

/* Twelve spokes between the outer rings, drawn with a conic gradient. */
.wheel__ring--2::before {
	content: "";
	position: absolute;
	inset: -16.5%;
	border-radius: 50%;
	background: repeating-conic-gradient(from 15deg, var(--line) 0 0.25deg, transparent 0.25deg 30deg);
	-webkit-mask: radial-gradient(circle, transparent 59%, #000 59.5%, #000 70%, transparent 70.5%);
	mask: radial-gradient(circle, transparent 59%, #000 59.5%, #000 70%, transparent 70.5%);
}

.wheel__glyph {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2.9rem;
	height: 2.9rem;
	margin: -1.45rem 0 0 -1.45rem;
	transform: rotate(var(--a)) translateY(calc(-1 * min(43cqw, 206px))) rotate(calc(-1 * var(--a)));
}

.wheel { container-type: inline-size; }

.wheel__glyph span {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--gold-2);
	font-family: var(--symbols);
	font-size: clamp(1.1rem, 3.6cqw, 1.55rem);
	animation: st-spin 140s linear infinite reverse;
}

.wheel__glyph.is-now span {
	border-radius: 50%;
	background: radial-gradient(circle, rgba(243, 222, 168, 0.28), transparent 70%);
	color: #fff;
	text-shadow: 0 0 16px var(--gold-2);
}

.wheel__core {
	position: absolute;
	inset: 36%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #FFF6DC, var(--gold) 45%, #8A6A2C);
	box-shadow: 0 0 80px var(--gold-glow);
	animation: st-glow 6s ease-in-out infinite;
}

@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes st-glow { 50% { box-shadow: 0 0 130px rgba(243, 222, 168, 0.65); } }

/* ── 7. Today's sky ──────────────────────────────────────────────────────── */
.sky {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: clamp(28px, 4vw, 48px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: linear-gradient(160deg, rgba(26, 33, 80, 0.7), rgba(10, 14, 36, 0.7));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	overflow: hidden;
}

.sky__item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.15rem 1.4rem;
	min-width: 0;
}

.sky__item + .sky__item { border-left: 1px solid var(--line-soft); }

.sky__item--date { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.1rem; }

.sky__text { display: flex; flex-direction: column; min-width: 0; }

.sky__label {
	color: var(--gold);
	font-size: 0.66rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

.sky__value {
	font-family: var(--serif);
	font-size: 1.22rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink);
}

.sky__glyph {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--gold-2);
	font-family: var(--symbols);
	font-size: 1.25rem;
	text-shadow: 0 0 14px var(--gold-glow);
}

.sky__glyph--el { font-size: 0.95rem; }

.moonmark { flex: none; width: 2.6rem; height: 2.6rem; }
.moonmark__dark { fill: rgba(236, 233, 247, 0.08); stroke: var(--line); stroke-width: 1; }
.moonmark__lit { fill: var(--gold-2); filter: drop-shadow(0 0 6px rgba(243, 222, 168, 0.55)); }

.sky--compact {
	grid-template-columns: 1fr;
	margin-top: 0;
	border-radius: var(--r);
	background: var(--panel);
}

.sky--compact .sky__item { flex-direction: row; align-items: center; padding: 0.8rem 1rem; gap: 0.8rem; }
.sky--compact .sky__item + .sky__item { border-left: 0; border-top: 1px solid var(--line-soft); }
.sky--compact .sky__item--date { justify-content: space-between; }
.sky--compact .sky__text { flex: 1; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.sky--compact .sky__value { font-size: 1.05rem; text-align: right; }
.sky--compact .sky__glyph,
.sky--compact .moonmark { width: 2rem; height: 2rem; font-size: 0.95rem; }

/* ── 8. Cards, headlines, explorer ───────────────────────────────────────── */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.card__media {
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--deep);
	aspect-ratio: 4 / 3;
}

.card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(10, 14, 36, 0.5));
	pointer-events: none;
}

.card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease), filter 700ms var(--ease);
	filter: saturate(0.9);
}

.card:hover .card__img { transform: scale(1.045); filter: saturate(1.05); }

.card__body { display: flex; flex-direction: column; gap: 0.55rem; padding-top: 1.15rem; flex: 1; }

.card__topic {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--tint, var(--gold));
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-decoration: none;
}

.card__topic::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 8px currentColor;
}

.card__title {
	font-size: clamp(1.35rem, 2vw, 1.6rem);
	line-height: 1.18;
}

.card__title a {
	text-decoration: none;
	background-image: linear-gradient(var(--gold), var(--gold));
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 400ms var(--ease), color var(--speed) var(--ease);
}

.card__title a:hover { color: var(--gold-2); background-size: 100% 1px; }

/* The whole card is the hit area for the headline link. */
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.card__topic { position: relative; z-index: 2; }

.card__text { color: var(--muted); font-size: 0.95rem; }

.card__foot { margin-top: auto; padding-top: 0.5rem; }

/* The plate: no photography, a frosted panel. */
.card--plate {
	padding: 1.6rem 1.6rem 1.4rem;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--panel);
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.card--plate:hover {
	background: linear-gradient(160deg, rgba(243, 222, 168, 0.1), rgba(216, 180, 106, 0.02));
	border-color: var(--line-strong);
	transform: translateY(-3px);
}

.card--plate .card__body { padding-top: 0; }

/* The lead: headline set over the photograph. */
.card--lead { min-height: 100%; }

.card--lead .card__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: var(--r-lg); }

.card--lead .card__media::after {
	background: linear-gradient(180deg, rgba(10, 14, 36, 0) 25%, rgba(10, 14, 36, 0.78) 62%, rgba(10, 14, 36, 0.96));
}

.card--lead .card__body {
	position: relative;
	z-index: 1;
	justify-content: flex-end;
	min-height: clamp(420px, 46vw, 560px);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	pointer-events: none;
}

.card--lead .card__body a { pointer-events: auto; }

.card__title--lead { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.08; }

.card--lead .card__text { max-width: 36rem; color: #C9C8E0; }

.card--lead .card__foot { margin-top: 0.3rem; }

.headlines__grid {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: stretch;
}

.ranked {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--panel);
	padding: 0.5rem 1.6rem;
}

.ranked__item {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.1rem;
	padding: 1.25rem 0;
	flex: 1;
}

.ranked__item + .ranked__item { border-top: 1px solid var(--line-soft); }

.ranked__num {
	font-family: var(--serif);
	font-size: 2.2rem;
	font-style: italic;
	line-height: 1;
	color: var(--gold);
	min-width: 2.2rem;
}

.ranked__body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }

.ranked__title { font-size: 1.28rem; line-height: 1.2; }

.ranked__title a { text-decoration: none; transition: color var(--speed) var(--ease); }

.ranked__title a::after { content: ""; position: absolute; inset: 0; }

.ranked__item .card__topic { z-index: 2; }

.ranked__item:hover .ranked__title a { color: var(--gold-2); }

.cardrow,
.platerow,
.archive-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 32px);
}

.platerow { gap: clamp(14px, 1.8vw, 22px); }

/* The Sign Explorer. */
.explorer__signs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px);
}

.signbtn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 1.05rem 0.4rem 0.95rem;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--panel);
	color: var(--ink);
	text-align: center;
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.signbtn__glyph {
	color: var(--gold-2);
	font-family: var(--symbols);
	font-size: 1.7rem;
	line-height: 1.2;
}

.signbtn__name { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }

.signbtn:hover,
.signbtn.is-active {
	background: linear-gradient(160deg, rgba(243, 222, 168, 0.22), rgba(216, 180, 106, 0.06));
	border-color: var(--gold);
	transform: translateY(-3px);
}

.signbtn.is-active { box-shadow: 0 12px 40px -12px rgba(216, 180, 106, 0.45); }

.signbtn.is-active .signbtn__glyph { text-shadow: 0 0 18px var(--gold-2); }

.reading {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
	padding: clamp(28px, 4vw, 48px);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background:
		radial-gradient(circle at 12% 30%, rgba(243, 222, 168, 0.1), transparent 45%),
		linear-gradient(160deg, rgba(26, 33, 80, 0.88), rgba(10, 14, 36, 0.88));
	text-align: left;
}

.reading__aside { display: flex; flex-direction: column; align-items: center; text-align: center; }

.reading__glyph {
	color: var(--gold-2);
	font-family: var(--symbols);
	font-size: clamp(4.5rem, 9vw, 7rem);
	line-height: 1;
	text-shadow: 0 0 40px rgba(243, 222, 168, 0.5);
}

.reading__dates {
	margin-top: 0.9rem;
	color: var(--muted);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.reading__name { margin-top: 0.4rem; font-size: clamp(2.2rem, 4vw, 3rem); }

.reading__motto {
	margin: 0.3rem 0 1.6rem;
	color: var(--gold);
	font-family: var(--serif);
	font-size: 1.35rem;
	font-style: italic;
}

.reading__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.reading__col { border-top: 1px solid var(--line); padding-top: 1rem; }

.reading__col b {
	display: block;
	margin-bottom: 0.45rem;
	color: var(--gold-2);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.reading__col p { color: var(--muted); font-size: 0.97rem; }

.reading .is-fresh { animation: st-fade 500ms var(--ease) both; }

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

/* Compact (sidebar). */
.explorer--compact .explorer__signs { grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 0 0 0.9rem; }

.explorer--compact .signbtn { padding: 0.55rem 0; border-radius: 10px; }

.explorer--compact .signbtn__glyph { font-size: 1.15rem; }

.explorer--compact .signbtn__name { display: none; }

.explorer--compact .signbtn:hover,
.explorer--compact .signbtn.is-active { transform: none; }

.explorer--compact .reading {
	grid-template-columns: 72px 1fr;
	gap: 1rem;
	padding: 1.1rem 1.2rem;
	border-radius: var(--r);
	align-items: start;
}

.explorer--compact .reading__glyph { font-size: 3rem; }
.explorer--compact .reading__dates { margin-top: 0.4rem; font-size: 0.6rem; letter-spacing: 0.08em; }
.explorer--compact .reading__name { font-size: 1.6rem; margin-top: 0.2rem; }
.explorer--compact .reading__motto { margin: 0 0 0.5rem; font-size: 1.05rem; }
.explorer--compact .reading__line { color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
.explorer--compact .eyebrow { font-size: 0.58rem; letter-spacing: 0.16em; }

/* ── 9. Quote band, topics, Star Letter ──────────────────────────────────── */
.quote-band {
	position: relative;
	z-index: 1;
	padding-block: clamp(48px, 7vw, 80px);
	border-block: 1px solid var(--line);
	background: linear-gradient(90deg, transparent, rgba(216, 180, 106, 0.05), transparent);
}

.quote-band p {
	max-width: 860px;
	margin-inline: auto;
	font-family: var(--serif);
	font-size: clamp(1.55rem, 3.4vw, 2.6rem);
	font-style: italic;
	line-height: 1.35;
	text-align: center;
	color: var(--ink);
}

.topicrow {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 22px);
}

.topiccard {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 1.3rem 1.4rem;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--panel);
	text-decoration: none;
	overflow: hidden;
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.topiccard::before {
	content: "";
	position: absolute;
	right: -40px;
	top: -40px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--tint, var(--gold)), transparent 70%);
	opacity: 0.12;
	transition: opacity var(--speed) var(--ease);
}

.topiccard:hover { border-color: var(--line-strong); transform: translateY(-3px); background: var(--panel-2); }

.topiccard:hover::before { opacity: 0.28; }

.topiccard__glyph {
	flex: none;
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%);
	color: var(--tint, var(--gold-2));
	font-family: var(--symbols);
	font-size: 1.4rem;
	text-shadow: 0 0 14px currentColor;
}

.topiccard__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.topiccard__title { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; line-height: 1.2; color: var(--ink); }

.topiccard__text { color: var(--faint); font-size: 0.82rem; letter-spacing: 0.04em; }

.topiccard__arrow { color: var(--gold); transition: transform var(--speed) var(--ease); }

.topiccard:hover .topiccard__arrow { transform: translateX(4px); }

.letter {
	position: relative;
	max-width: 960px;
	margin-inline: auto;
	padding: clamp(44px, 6vw, 70px) clamp(20px, 5vw, 40px);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background:
		radial-gradient(circle at 50% 0%, rgba(216, 180, 106, 0.18), transparent 60%),
		var(--panel);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

/* Decorative orbit rings in the panel's top-right corner. */
.letter__orbit {
	position: absolute;
	right: -140px;
	top: -140px;
	z-index: -1;
	width: 380px;
	height: 380px;
	border: 1px solid var(--line);
	border-radius: 50%;
	pointer-events: none;
}

.letter__orbit::before,
.letter__orbit::after {
	content: "";
	position: absolute;
	inset: 50px;
	border: 1px dashed var(--line-soft);
	border-radius: 50%;
}

.letter__orbit::after { inset: -60px; border-style: solid; border-color: rgba(216, 180, 106, 0.12); }

.letter__title { margin: 0.8rem 0 1rem; font-size: clamp(2.2rem, 4.5vw, 3.4rem); }

.letter__sub { max-width: 620px; margin-inline: auto; color: var(--muted); }

.letter__form { max-width: 520px; margin: 2.25rem auto 0; text-align: left; }

/* How it works. */
.steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin-top: clamp(36px, 5vw, 60px);
	text-align: left;
}

.step {
	padding: 40px 32px;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: var(--panel);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.step:hover { border-color: var(--line-strong); transform: translateY(-3px); }

.step__num { display: block; font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--gold); }

.step__title { margin: 14px 0 10px; font-size: 1.6rem; }

.step__text { color: var(--muted); font-size: 0.98rem; }

/* ── 10. Sidebar panels ──────────────────────────────────────────────────── */
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

.panel {
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--panel);
}

.panel__heading {
	margin-bottom: 1rem;
	font-size: 1.55rem;
	line-height: 1.15;
}

.panel--subscribe {
	background:
		radial-gradient(circle at 50% 0%, rgba(216, 180, 106, 0.18), transparent 60%),
		linear-gradient(160deg, rgba(26, 33, 80, 0.85), rgba(10, 14, 36, 0.85));
}

.panel--subscribe .eyebrow { margin-bottom: 0.4rem; }

.panel--subscribe .panel__heading { font-size: 2rem; margin-bottom: 0.5rem; }

.panel__intro { margin-bottom: 1.15rem; color: var(--muted); font-size: 0.93rem; }

.panel--sky,
.panel--signs { padding: 1.25rem; }

.cat-list { display: flex; flex-direction: column; }

.cat-list__item + .cat-list__item { border-top: 1px solid var(--line-soft); }

.cat-list__link {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 0;
	color: var(--ink);
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}

.cat-list__link::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tint, var(--gold));
	box-shadow: 0 0 8px var(--tint, var(--gold));
}

.cat-list__name { flex: 1; font-size: 0.95rem; }

.cat-list__count {
	min-width: 1.9rem;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--line-soft);
	border-radius: var(--r-pill);
	color: var(--faint);
	font-size: 0.72rem;
	text-align: center;
}

.cat-list__link:hover { color: var(--gold-2); }

.minilist { display: flex; flex-direction: column; }

.minilist__item {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.9rem;
	align-items: center;
	padding: 0.8rem 0;
}

.minilist__item + .minilist__item { border-top: 1px solid var(--line-soft); }

.minilist__media {
	display: block;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
}

.minilist__img { width: 100%; height: 100%; object-fit: cover; }

.minilist__body { grid-column: 2; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.minilist__item:not(:has(.minilist__media)) .minilist__body { grid-column: 1 / -1; }

.minilist__title { font-size: 1.08rem; line-height: 1.25; }

.minilist__title a { text-decoration: none; transition: color var(--speed) var(--ease); }

.minilist__title a::after { content: ""; position: absolute; inset: 0; }

.minilist__item:hover .minilist__title a { color: var(--gold-2); }

.minilist__meta { color: var(--faint); font-size: 0.74rem; letter-spacing: 0.06em; }

/* ── 11. Footer ──────────────────────────────────────────────────────────── */
.site-footer {
	padding-block: 50px 60px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.82rem;
	text-align: center;
}

.footer-brand { display: flex; justify-content: center; margin-bottom: 1rem; }

.footer-brand .site-logo { font-size: 1.8rem; }

.footer-brand .custom-logo { max-height: calc(var(--logo-h) * 1.1); max-width: min(240px, 70vw); }

.footer-note { max-width: 720px; margin-inline: auto; }

.footer-base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem 1.2rem;
	margin-top: 0.9rem;
}

.footer-copy { color: var(--muted); }

.footer-copy a,
.footer-legal__menu a { color: var(--muted); text-decoration: none; transition: color var(--speed) var(--ease); }

.footer-copy a:hover,
.footer-legal__menu a:hover { color: var(--gold-2); }

.footer-legal__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.2rem; }

/* ── 12. Archive, pages, notices ─────────────────────────────────────────── */
.band--head { padding-block: clamp(32px, 5vw, 64px) 0; }

.page-head { max-width: 48rem; }

.page-head__eyebrow {
	display: inline-block;
	margin-bottom: 0.8rem;
	color: var(--gold);
	font-size: 0.72rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.page-head__title { font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: 1.04; }

.page-head__text { margin-top: 1rem; color: var(--muted); font-size: 1.05rem; }

.listing { padding-top: clamp(32px, 4vw, 48px); }

.layout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.layout__main { min-width: 0; }

.archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(32px, 4vw, 48px); }

.pagination,
.navigation.pagination { margin-top: clamp(36px, 5vw, 56px); }

.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.nav-links .page-numbers,
.nav-links > a,
.nav-links > span {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 1rem;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	color: var(--ink);
	font-size: 0.85rem;
	text-decoration: none;
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.nav-links .page-numbers:hover,
.nav-links > a:hover { background: var(--gold-wash); border-color: var(--gold); }

.nav-links .page-numbers.current,
.nav-links > span.current {
	background: linear-gradient(135deg, var(--gold-2), var(--gold));
	border-color: var(--gold);
	color: var(--night);
	font-weight: 500;
}

.nav-links .dots { border-color: transparent; }

.page-band { padding-top: clamp(32px, 5vw, 64px); }

.page-band .page-head { margin-inline: auto; max-width: 46rem; margin-bottom: clamp(24px, 4vw, 40px); }

.page-content { max-width: 46rem; margin-inline: auto; }

.notice-page { display: grid; place-items: center; padding-block: clamp(24px, 6vw, 72px); }

.notice-page__inner { max-width: 38rem; text-align: center; }

.notice-page__mark {
	display: inline-grid;
	place-items: center;
	width: 5rem;
	height: 5rem;
	margin-bottom: 1.5rem;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(243, 222, 168, 0.18), transparent 70%);
	color: var(--gold-2);
	font-family: var(--symbols);
	font-size: 2rem;
	text-shadow: 0 0 20px var(--gold-glow);
}

.notice-page__title { font-size: clamp(2.2rem, 5vw, 3.4rem); }

.notice-page__text { margin-top: 1rem; color: var(--muted); font-size: 1.05rem; }

.notice-page__note { margin-top: 0.9rem; color: var(--faint); font-size: 0.9rem; }

.notice-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 2rem; }

/* ── 13. Single post + entry content ─────────────────────────────────────── */
.layout--single { padding-top: clamp(28px, 4vw, 56px); }

.post-head { max-width: 52rem; margin-bottom: clamp(24px, 3vw, 36px); }

.post-head__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }

.post-head__title { font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.05; letter-spacing: -0.005em; }

.post-head__standfirst {
	margin-top: 1.1rem;
	color: var(--muted);
	font-family: var(--serif);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-style: italic;
	line-height: 1.45;
}

.post-head__meta { margin-top: 1.4rem; }

.post-hero {
	margin: 0 0 clamp(28px, 4vw, 48px);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--deep);
}

.post-hero__img { width: 100%; max-height: 600px; object-fit: cover; }

.entry-content {
	color: #DAD8EC;
	font-size: 1.08rem;
	font-weight: 300;
	line-height: 1.85;
	overflow-wrap: break-word;
}

.entry-content > * + * { margin-top: 1.4em; }

.entry-content > *:first-child { margin-top: 0; }

.entry-content h2,
.entry-content h3,
.entry-content h4 { margin-top: 1.8em; color: var(--ink); }

.entry-content h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.entry-content h3 { font-size: clamp(1.5rem, 2.4vw, 1.8rem); }
.entry-content h4 { font-size: 1.3rem; }

.entry-content h2 + *,
.entry-content h3 + *,
.entry-content h4 + * { margin-top: 0.7em; }

.entry-content a {
	color: var(--gold-2);
	text-decoration: underline;
	text-decoration-color: var(--line-strong);
	transition: text-decoration-color var(--speed) var(--ease);
}

.entry-content a:hover { text-decoration-color: var(--gold-2); }

.entry-content strong, .entry-content b { color: var(--ink); font-weight: 500; }

.entry-content ul,
.entry-content ol { padding-left: 1.4em; }

.entry-content ul { list-style: none; }

.entry-content ul > li { position: relative; }

.entry-content ul > li::before {
	content: "✦";
	position: absolute;
	left: -1.3em;
	top: 0.15em;
	color: var(--gold);
	font-size: 0.7em;
}

.entry-content ol { list-style: decimal; }

.entry-content ol > li::marker { color: var(--gold); font-family: var(--serif); font-weight: 600; }

.entry-content li + li { margin-top: 0.45em; }

.entry-content blockquote,
.entry-content .wp-block-quote {
	margin-inline: 0;
	padding: 1.2rem 0 1.2rem 1.6rem;
	border-left: 2px solid var(--gold);
	color: var(--ink);
	font-family: var(--serif);
	font-size: 1.45rem;
	font-style: italic;
	line-height: 1.45;
}

.entry-content blockquote cite,
.entry-content .wp-block-quote cite {
	display: block;
	margin-top: 0.7rem;
	color: var(--gold);
	font-family: var(--sans);
	font-size: 0.75rem;
	font-style: normal;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.entry-content .wp-block-pullquote {
	padding: 2rem;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--panel);
	text-align: center;
}

.entry-content .wp-block-pullquote blockquote { border: 0; padding: 0; }

.entry-content img { border-radius: var(--r); }

.entry-content figure { margin-inline: 0; }

.entry-content figcaption,
.entry-content .wp-caption-text,
.entry-content .wp-element-caption {
	margin-top: 0.6rem;
	color: var(--faint);
	font-size: 0.85rem;
	text-align: center;
}

.entry-content hr,
.entry-content .wp-block-separator {
	height: 1px;
	margin-block: 2.4em;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.entry-content table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }

.entry-content th,
.entry-content td { padding: 0.7rem 0.9rem; border: 1px solid var(--line-soft); text-align: left; }

.entry-content th { background: var(--panel-2); color: var(--gold-2); font-weight: 500; }

.entry-content .wp-block-table { overflow-x: auto; }

.entry-content code,
.entry-content kbd {
	padding: 0.15em 0.4em;
	border-radius: 6px;
	background: var(--panel-2);
	color: var(--gold-2);
	font-size: 0.88em;
}

.entry-content pre {
	padding: 1.2rem;
	overflow-x: auto;
	border: 1px solid var(--line-soft);
	border-radius: var(--r-sm);
	background: rgba(0, 0, 0, 0.35);
	font-size: 0.9rem;
}

.entry-content pre code { padding: 0; background: none; }

.entry-content iframe,
.entry-content video,
.entry-content embed { max-width: 100%; border-radius: var(--r); }

.entry-content .wp-block-button__link,
.entry-content .wp-block-file__button {
	display: inline-block;
	padding: 0.9rem 1.8rem;
	border-radius: var(--r-pill);
	background: linear-gradient(135deg, var(--gold-2), var(--gold));
	color: var(--night);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
}

.entry-content .has-background { border-radius: var(--r); }

.alignleft { float: left; margin: 0.4em 1.5em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }

.single-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2.5rem;
}

.single-tags__label {
	margin-right: 0.4rem;
	color: var(--gold);
	font-size: 0.7rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

.single-tags a {
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--line-soft);
	border-radius: var(--r-pill);
	color: var(--muted);
	font-size: 0.82rem;
	text-decoration: none;
	transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.single-tags a:hover { border-color: var(--gold); color: var(--gold-2); }

.single-share { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); }

.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

.share-row__label {
	margin-right: 0.5rem;
	color: var(--gold);
	font-size: 0.7rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

.share-row__link {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--gold-2);
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.share-row__link svg { width: 1rem; height: 1rem; fill: currentColor; }

.share-row__link:hover {
	background: linear-gradient(135deg, var(--gold-2), var(--gold));
	color: var(--night);
	transform: translateY(-2px);
}

.postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 2.5rem;
}

.postnav__item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.2rem 1.4rem;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--panel);
	text-decoration: none;
	transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}

.postnav__item--next { grid-column: 2; text-align: right; }

.postnav__item:hover { border-color: var(--gold); background: var(--panel-2); }

.postnav__label { color: var(--gold); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; }

.postnav__title { font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; color: var(--ink); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {

	.layout__grid { grid-template-columns: 1fr; }

	.layout__grid > .sidebar {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.sky:not(.sky--compact) { grid-template-columns: repeat(2, 1fr); }
	.sky:not(.sky--compact) .sky__item:nth-child(3) { border-left: 0; }
	.sky:not(.sky--compact) .sky__item:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
}

@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; min-height: 0; text-align: center; }


	.hero__intro { margin-inline: auto; }
	.hero__ctas { justify-content: center; }

	.wheel { max-width: 340px; }

	.headlines__grid { grid-template-columns: 1fr; }

	.cardrow,
	.platerow,
	.topicrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.cardrow > :nth-child(3):last-child { display: none; }

	.explorer__signs { grid-template-columns: repeat(4, 1fr); }

	.reading { grid-template-columns: 1fr; text-align: center; }
	.reading__cols { grid-template-columns: 1fr; text-align: left; }

	.steps { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
	.band__head { grid-template-columns: 1fr; }
	.band__link { justify-self: start; margin-top: 0.9rem; }

	.cardrow,
	.platerow,
	.topicrow,
	.archive-grid { grid-template-columns: 1fr; }

	.cardrow > :nth-child(3):last-child { display: flex; }

	.layout__grid > .sidebar { grid-template-columns: 1fr; }


	.postnav { grid-template-columns: 1fr; }
	.postnav__item--next { grid-column: auto; }

	.ranked { padding: 0.25rem 1.15rem; }
}

@media (max-width: 520px) {
	.explorer:not(.explorer--compact) .explorer__signs { grid-template-columns: repeat(3, 1fr); gap: 8px; }

	.sky:not(.sky--compact) { grid-template-columns: 1fr 1fr; }
	.sky__item { padding: 0.95rem 1rem; gap: 0.65rem; }
	.sky__value { font-size: 1.05rem; }
	.sky__glyph, .moonmark { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; }

	.hero__ctas .btn { flex: 1 1 100%; }

	.card--lead .card__body { min-height: 420px; padding: 1.25rem; }

	.letter { border-radius: var(--r-lg); }
	.step { padding: 30px 24px; }
}

/* ── 14. Utilities, motion, print ────────────────────────────────────────── */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
html.js .reveal.is-in { opacity: 1; transform: none; }
body.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.starfield,
	.site-header,
	.site-footer,
	.sidebar,
	.read-progress,
	.single-share,
	.postnav,
	.related { display: none !important; }

	body { background: #fff; color: #000; }
	.entry-content { color: #000; }
}