/* Prodigy components. Every color is a token; every transition and animation sits in the
   prefers-reduced-motion: no-preference block at the end of this file.

   Markup contract (header.php, footer.php and each skin's home.html use these names):
   header.site-header > optional .topbar > .topbar-in (phone, email, nav.social), then .bar > a.brand (img + .wordmark >
     .name + .tagline, or a.brand.brand--logo > img.logo.logo-light + img.logo.logo-dark), nav.nav,
     button.theme-toggle (svg.ic-moon + svg.ic-sun), optional a.btn.btn--primary.header-cta,
     details.menu > summary.menu-btn + nav.menu-panel; a nav parent with children is li.has-sub > a + button.sub-btn
     + ul.sub > li > a in nav.nav and div.menu-group > a + button.sub-btn + div.menu-sub > a in nav.menu-panel
   section.band [.band--alt | .band--deep | .band--dusk] > .wrap > .section-head (.eyebrow, h2, .lede)
   .btn.btn--primary | .btn--ghost, .stores (store buttons), a.more (text link with a chevron), a.textlink (with an arrow)
   footer.site-footer > .wrap > p + nav + optional nav.social.social--foot + optional p.credit
   then optional .quickbar (phone Book and Call) and button.to-top, shown by engine/js/page.js
   header.band.page-hero (the title band of page, single, index and 404) + .band.page-body > .wrap > .entry */

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 20;
	background: var(--header-bg);
	-webkit-backdrop-filter: saturate(1.3) blur(12px);
	backdrop-filter: saturate(1.3) blur(12px);
	border-bottom: 1px solid var(--line);
}
.site-header .bar {
	max-width: var(--max);
	margin-inline: auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
	min-height: 64px;
	padding-block: 8px;
	display: flex;
	align-items: center;
	gap: 12px;
}
/* The Observatory header (a top bar above the bar, prodigyhealing) spaces its items a little wider; other skins keep 12 px. */
@media (min-width: 560px) { .site-header .topbar + .bar { gap: 16px; } }

/* The top bar: phone, email and the social marks, on wide screens only */
.topbar { display: none; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
@media (min-width: 761px) { .topbar { display: block; } }
.topbar-in {
	max-width: var(--max);
	margin-inline: auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 44px;
}
.topbar a { color: var(--fg-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.topbar a:hover { color: var(--link); }
.topbar-gap { flex: 1; }
.social { display: flex; flex-wrap: wrap; gap: 0; }
.social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--fg-2); }
.social a svg { width: 18px; height: 18px; }
.social a:hover { color: var(--link); }
.social--foot a { width: 44px; height: 44px; }
.social--foot a svg { width: 20px; height: 20px; }
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	min-width: 0;
	margin-right: auto;
	color: var(--heading);
	text-decoration: none;
}
.brand:hover { color: var(--heading); }
.brand img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 0 6px var(--halo)); }
.brand .wordmark { display: flex; flex-direction: column; min-width: 0; }
.brand .name {
	font-family: var(--f-display);
	font-weight: var(--w-head);
	font-size: 1.4rem;
	line-height: 1.05;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.brand .tagline {
	display: none;
	font-size: 0.72rem;
	font-weight: var(--w-body-strong);
	letter-spacing: 0.06em;
	color: var(--fg-2);
	white-space: nowrap;
}
@media (min-width: 1240px) { .brand .tagline { display: block; } }
@media (max-width: 359px) { .brand { gap: 8px; } .brand .name { font-size: 1.2rem; } .brand img { width: 34px; height: 34px; } }
/* The horizontal logo: the light file in the light theme, the dark file in the dark one (the toggle's own tokens) */
.brand--logo img.logo { width: auto; height: 48px; filter: none; }
.brand--logo .logo-light { display: var(--show-moon); }
.brand--logo .logo-dark { display: var(--show-sun); }
@media (max-width: 560px) { .brand--logo img.logo { width: auto; height: 40px; } }
@media (max-width: 359px) { .brand--logo img.logo { width: auto; height: 34px; } }

.nav { display: flex; align-items: center; gap: 2px; }
.nav > ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 10px;
	border-radius: var(--radius-btn);
	color: var(--fg-2);
	font-size: 0.96rem;
	font-weight: var(--w-body-strong);
	text-decoration: none;
	white-space: nowrap;
}
.nav a:hover,
.nav a[aria-current="page"],
.nav a.is-current { color: var(--link); }

.theme-toggle,
.menu-btn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	flex: none;
	padding: 0;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	background: var(--surface);
	color: var(--heading);
	cursor: pointer;
}
.site-header .topbar + .bar .theme-toggle,
.site-header .topbar + .bar .menu-btn { background: var(--glass); }
.theme-toggle:hover,
.menu-btn:hover { border-color: var(--accent-2); color: var(--link); }
.theme-toggle svg,
.menu-btn svg { width: 20px; height: 20px; }
.theme-toggle .ic-sun { display: var(--show-sun); }
.theme-toggle .ic-moon { display: var(--show-moon); }
.header-cta { min-height: 44px; padding: 0 18px; font-size: 0.95rem; }

.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	width: min(300px, calc(100vw - 32px));
	max-height: calc(100svh - 96px);
	overflow-y: auto;
	padding: 8px;
	display: grid;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 50px var(--shadow);
}
/* While the menu is open (html.menu-open, set by engine/js/nav.js) the header sits above the fixed bottom controls
   (.quickbar 58, .to-top 59, the Ask launcher 60 and panel 61), so a long panel with its groups open stays tappable. */
.menu-open .site-header { z-index: 62; }
.menu-panel a {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 0 14px;
	border-radius: 12px;
	color: var(--fg);
	font-weight: var(--w-body-strong);
	text-decoration: none;
}
.menu-panel a:hover { background: var(--surface-2); color: var(--heading); }

/* Submenus. Wide nav: li.has-sub > a + button.sub-btn + ul.sub, opened by the button and by keyboard focus inside it
   (engine/js/nav.js sets li.open), and by hover where the pointer is fine. Phone menu: div.menu-group > a + button.sub-btn +
   div.menu-sub. The chevron turns with the button's aria-expanded. */
.sub-btn {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	min-width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-btn);
	background: none;
	color: var(--fg-2);
	cursor: pointer;
}
.sub-btn svg { width: 14px; height: 14px; }
.sub-btn:hover,
.sub-btn[aria-expanded="true"] { color: var(--link); }
.sub-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav .has-sub { position: relative; display: flex; align-items: center; }
.nav .has-sub > a { padding-right: 0; }
.nav .sub {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 30;
	display: grid;
	gap: 0;
	width: max-content;
	min-width: 240px;
	max-width: min(320px, calc(100vw - 32px));
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 50px var(--shadow);
	visibility: hidden;
	opacity: 0;
}
/* The bridge across the 10 px gap, so the pointer can travel from the parent into the panel. */
.nav .sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 11px; }
/* Set by nav.js when the panel would pass the right edge of the window. */
.nav .sub.sub--end { left: auto; right: 0; }
/* No :focus-within rule: focus can stay on a button after the pointer moves to another item, and the panel would stay
   up with aria-expanded false. nav.js opens the panel on keyboard focus instead. */
.nav .has-sub.open > .sub { visibility: visible; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
	.nav .has-sub:hover:not(.shut) > .sub { visibility: visible; opacity: 1; }
}
.nav .sub a {
	display: flex;
	min-height: 46px;
	padding: 6px 14px;
	border-radius: 12px;
	color: var(--fg);
	line-height: 1.3;
	white-space: normal;
}
.nav .sub a:hover { background: var(--surface-2); color: var(--heading); }
.nav .sub a[aria-current="page"] { color: var(--link); }
.menu-group { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; }
.menu-group > .sub-btn { width: 44px; min-width: 44px; height: 46px; min-height: 46px; border-radius: 12px; }
.menu-group > .sub-btn:hover { background: var(--surface-2); }
.menu-sub { grid-column: 1 / -1; display: none; padding-left: 14px; }
.menu-group.open > .menu-sub { display: grid; }
.menu-sub a { min-height: 46px; padding-block: 6px; line-height: 1.3; }

@media (max-width: 1039px) {
	.site-header .bar > .nav { display: none; }
}
@media (min-width: 1040px) {
	.menu { display: none; }
}
/* Five 44 px chevrons fit beside the brand and the call to action from 1180 px (the --max width) once the nav's gap goes.
   Below that the wide nav's chevrons are 24 px wide (the WCAG 2.5.8 floor), and from 1040 to 1139 px the links
   tighten as well. */
@media (min-width: 1180px) {
	.nav > ul { gap: 0; }
}
@media (min-width: 1040px) and (max-width: 1179px) {
	.nav .sub-btn { width: 24px; min-width: 24px; }
}
@media (min-width: 1040px) and (max-width: 1139px) {
	.nav > ul { gap: 0; }
	.nav > ul > li > a { padding: 0 6px; }
}
@media (max-width: 559px) {
	.site-header .header-cta { display: none; }
}

/* ---------- Buttons and links ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--clear);
	border-radius: var(--radius-btn);
	font-family: var(--f-body);
	font-size: 1rem;
	font-weight: var(--w-body-strong);
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px var(--halo); }
.btn--primary:hover { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 30px var(--halo); }
.btn--ghost { background: var(--glass); color: var(--heading); border-color: var(--line-2); }
.btn--ghost:hover { color: var(--heading); border-color: var(--accent-2); }
.btn svg { width: 20px; height: 20px; flex: none; }
.cta-row,
.stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.stores .btn { min-width: 220px; }
@media (max-width: 479px) { .stores .btn { flex: 1 1 100%; } }

.more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--link);
	font-weight: var(--w-body-strong);
	text-decoration: none;
}
.more::after {
	content: "";
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}
.textlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--link);
	font-weight: var(--w-body-strong);
	text-decoration: none;
}
.textlink::after { content: "\2192"; }
.links { display: flex; flex-wrap: wrap; gap: 4px 24px; }

/* ---------- Labels and section heads ---------- */
.eyebrow,
.label {
	font-family: var(--f-body);
	font-size: var(--fs-label);
	font-weight: var(--w-body-strong);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--label);
}
.section-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--center { justify-items: center; text-align: center; margin-inline: auto; }
.section-head h2 { display: flex; align-items: flex-start; gap: 0.28em; }
.section-head--center h2 { justify-content: center; }
.spark { width: 0.42em; height: 0.42em; flex: none; margin-top: 0.14em; color: var(--accent-2); fill: currentColor; overflow: visible; }

/* ---------- Bands ---------- */
.band--alt { background: var(--bg-2); }
.band > canvas.sparkles,
.hero > canvas.sparkles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}
.band--deep {
	background: radial-gradient(ellipse 80% 70% at 50% 45%, var(--deep-2), var(--deep) 72%);
	color: var(--on-deep);
	--focus: var(--deep-accent);
}
.band--deep h2, .band--deep h3 { color: var(--on-deep); }
.band--deep .eyebrow { color: var(--deep-accent); }
.band--deep .lede, .band--deep p { color: var(--on-deep-2); }
.band--deep .btn--ghost { background: var(--deep-panel); color: var(--on-deep); border-color: var(--deep-line); }
.band--deep .btn--ghost:hover { border-color: var(--deep-accent); }
.band--deep .more, .band--dusk .more { color: var(--deep-accent); }

/* Dusk: the sigil sets at the bottom of the page */
.band--dusk {
	overflow: hidden;
	background: linear-gradient(to bottom, var(--deep-top) 0, var(--deep-2) 70px, var(--deep) 200px);
	color: var(--on-deep);
	--sig-glow: var(--deep-sig-glow);
	--sig-line: var(--deep-sig-line);
	--sig-core: var(--deep-sig-core);
	--focus: var(--deep-accent);
}
.band--dusk::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: radial-gradient(60% 50% at 50% 0%, var(--deep-glow), var(--clear) 70%);
}
.band--dusk > .wrap { padding-top: 0; }
.band--dusk h2, .band--dusk h3 { color: var(--on-deep); }
.band--dusk h2 { display: flex; align-items: flex-start; gap: 0.28em; }
.band--dusk p { color: var(--on-deep-2); }
.band--dusk .spark { color: var(--deep-accent); }
.band--dusk .btn--primary { background: var(--deep-accent); color: var(--deep-accent-ink); box-shadow: 0 0 30px var(--deep-halo); }
.band--dusk .btn--ghost { background: var(--deep-panel); color: var(--on-deep); border-color: var(--deep-line); }
.band--dusk .btn--ghost:hover { border-color: var(--deep-accent); }
.sunset { display: grid; justify-items: center; }
.sunset-line { height: 1.5px; width: 100%; opacity: 0.7; background: linear-gradient(90deg, var(--clear), var(--deep-accent) 35%, var(--deep-accent) 65%, var(--clear)); }
.sunset svg { width: min(420px, 86%); display: block; transform: scaleY(-1); filter: drop-shadow(0 0 16px var(--deep-halo)); }
.dusk-grid { display: grid; gap: 36px; padding-top: clamp(36px, 6vw, 64px); }
.dusk-grid > div { display: grid; gap: 14px; align-content: start; }
.dusk-grid .cta-row, .dusk-grid .stores { margin-top: 10px; }
@media (min-width: 900px) { .dusk-grid { grid-template-columns: 1.1fr 1fr; align-items: start; } }

/* Sigil strokes and fills, tinted by tokens */
.s-glow { stroke: var(--sig-glow); } .f-glow { fill: var(--sig-glow); }
.s-line { stroke: var(--sig-line); } .f-line { fill: var(--sig-line); }
.s-core { stroke: var(--sig-core); } .f-core { fill: var(--sig-core); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Heroes ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-copy { display: grid; gap: 22px; min-width: 0; max-width: 760px; }
.hero h1 { font-size: var(--fs-hero); font-weight: var(--w-hero); letter-spacing: -0.02em; line-height: 1; }
.hero h1 em, .hero h1 .plus { color: var(--label); font-style: italic; font-weight: var(--w-hero); }
.hero .who { color: var(--fg-2); max-width: 54ch; }
.facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	color: var(--fg-2);
	font-size: 0.95rem;
}
.facts b { color: var(--fg); }

/* Plate hero: copy beside a round photo inside an astrolabe ring */
.hero--plate > .wrap {
	display: grid;
	gap: clamp(40px, 6vw, 72px);
	align-items: center;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	padding-block: clamp(48px, 7vw, 96px) var(--band-pad);
}
@media (max-width: 899px) { .hero--plate > .wrap { grid-template-columns: minmax(0, 1fr); } }
.hero--plate .hero-copy { gap: 24px; }
.hero--plate h1 { letter-spacing: -0.015em; line-height: 1.02; }
.hero--plate h1 em { color: var(--label); }
.hero--plate .lede { font-size: 1.18rem; }
/* The hero turns through its slides (engine/js/page.js, [data-slides]): the words fade out and in, the two photo
   layers cross-fade inside the dial. Each slide is a <template class="slide"> in the content. */
.slide-text { display: grid; gap: 24px; }
.slide-text .eyebrow:empty { display: none; }
.slide-text .cta-row { padding-top: 4px; }
.slide-text.is-fading { opacity: 0; }
.rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-block: -6px; /* a 44 px target that sits where the mockup's 32 px line sits */
	justify-self: start;
	color: var(--fg-2);
	font-size: 0.95rem;
	text-decoration: none;
}
.rating b { color: var(--fg); font-weight: var(--w-body-strong); }
.rating:hover { color: var(--link); }
.hero--plate .facts { margin-top: 6px; }
.moon { display: inline-flex; align-items: center; gap: 8px; }
.moon svg { width: 18px; height: 18px; }
.moon-dark { fill: var(--line); }
.moon-lit { fill: var(--accent-2); }

.plate { display: grid; gap: 16px; justify-items: center; min-width: 0; }
.astrolabe { position: relative; width: min(100%, 480px); aspect-ratio: 1; }
@media (max-width: 899px) { .astrolabe { width: min(100%, 400px); } }
.astrolabe img {
	position: absolute;
	inset: 11.8%;
	width: 76.4%;
	height: 76.4%;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 50%;
	box-shadow: 0 24px 60px var(--shadow), 0 0 0 1px var(--line);
}
.astrolabe img.photo { opacity: 0; }
.astrolabe img.photo.is-on { opacity: 1; }
.astrolabe svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-line { fill: none; stroke: var(--fg-2); stroke-opacity: 0.45; stroke-width: 1; }
.ring-minor { fill: none; stroke: var(--fg-2); stroke-opacity: 0.55; stroke-width: 9; }
.ring-copper { fill: none; stroke: var(--accent-2); stroke-opacity: 0.7; stroke-width: 1; }
.ring-major { fill: none; stroke: var(--accent-2); stroke-width: 18; }
.ring-label { font-family: var(--f-body); font-size: 15px; font-weight: var(--w-body-strong); letter-spacing: 0.42em; fill: var(--label); }
.ring-label.is-dim { fill-opacity: 0.45; }
.ring-label.is-lit { fill: var(--accent-2); }
.ring-star { color: var(--accent-2); fill: currentColor; }
/* The Atlantean ornaments beside MIND, BODY and SPIRIT light and dim with their word */
.orn-line { fill: none; stroke: var(--label); stroke-width: 1.3; stroke-linecap: square; stroke-linejoin: miter; }
.orn circle { fill: var(--label); }
.orn.is-dim { opacity: 0.45; }
.orn.is-lit .orn-line { stroke: var(--accent-2); }
.orn.is-lit circle { fill: var(--accent-2); }
.ticks { transform-origin: 0 0; }
/* The two nested triangles behind the photo: only their corners show past the dial */
.tri { fill: none; stroke: var(--accent-2); stroke-opacity: 0.8; stroke-width: 1.6; stroke-linejoin: round; }
.tri-inner { stroke-opacity: 0.45; stroke-dasharray: 2 6; }
.tri-dot { fill: var(--accent-2); }
.dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: -4px; }
.dots button {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: var(--clear);
	color: var(--line);
	cursor: pointer;
	display: grid;
	place-items: center;
}
.dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.dots button[aria-current="true"] { color: var(--accent-2); }
.dots button:hover { color: var(--link); }

/* Horizon hero: an aurora sky with a sigil rising on the horizon */
.hero--horizon { border-bottom: 1px solid var(--line); }
.hero--horizon::before {
	content: "";
	position: absolute;
	inset: -12%;
	z-index: -2;
	background:
		radial-gradient(42% 46% at 16% 22%, var(--aurora-1), var(--clear) 72%),
		radial-gradient(40% 44% at 86% 14%, var(--aurora-2), var(--clear) 72%),
		radial-gradient(60% 40% at 58% 88%, var(--aurora-3), var(--clear) 70%),
		radial-gradient(34% 40% at 72% 52%, var(--aurora-4), var(--clear) 72%),
		linear-gradient(to bottom, var(--sky-1), var(--sky-2) 55%, var(--sky-3));
}
.hero--horizon > .wrap { position: relative; padding-top: clamp(44px, 8vw, 96px); padding-bottom: 0; }
.hero--horizon .hero-copy { position: relative; z-index: 1; }
.hero-note { color: var(--fg-2); font-size: 0.98rem; }
.horizon { position: relative; display: grid; justify-items: center; margin-top: clamp(28px, 5vw, 40px); container-type: inline-size; }
.horizon::before {
	content: "";
	position: absolute;
	left: -50vw;
	right: -50vw;
	/* The sun box is min(560px, the row's width) wide; its base sits at that width times the viewBox ratio. */
	top: calc(min(560px, 100cqw) * 308.15 / 480);
	height: 1.5px;
	opacity: 0.75;
	background: linear-gradient(90deg, var(--clear), var(--sig-glow) 30%, var(--sig-line) 50%, var(--sig-glow) 70%, var(--clear));
}
.sun-wrap { width: min(560px, 100%); display: grid; }
.hero-sun, .hero-sun-reflect { width: 100%; display: block; overflow: visible; }
.hero-sun { filter: drop-shadow(0 0 18px var(--halo)); }
.hero-sun-reflect {
	height: calc(min(560px, 100cqw) * 308.15 / 480 * 0.42);
	opacity: 0.5;
	transform: scaleY(-1);
	-webkit-mask-image: linear-gradient(to top, var(--print-ink) 0%, var(--clear) 70%);
	mask-image: linear-gradient(to top, var(--print-ink) 0%, var(--clear) 70%);
}
@media (min-width: 1000px) { .horizon { justify-items: end; margin-top: -150px; } .hero--horizon .hero-copy { max-width: 600px; } }

/* Overview hero: the copy and a row of cards on one screen */
.hero--overview > .wrap { padding-bottom: var(--band-pad); }
.hero--overview .hero-copy { margin-bottom: clamp(28px, 4vw, 48px); }

/* Solo hero: a small site on one screen, copy beside a phone */
.hero--solo > .wrap {
	display: grid;
	gap: clamp(32px, 6vw, 72px);
	align-items: center;
	min-height: calc(100svh - 65px - env(safe-area-inset-top, 0px));
	padding-block: clamp(40px, 7vw, 88px);
}
@media (min-width: 820px) { .hero--solo > .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.hero--solo .say { font-family: var(--f-display); font-size: clamp(1.45rem, 1.6vw + 1rem, 2.1rem); line-height: 1.25; color: var(--heading); }
.solo-shot { display: grid; justify-items: center; }
.solo-shot img { width: auto; max-height: min(640px, 70svh); filter: drop-shadow(0 24px 44px var(--shadow)); }
@media (max-width: 819px) { .solo-shot img { max-height: 460px; } }

/* ---------- Cards ---------- */
.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 10px 30px var(--shadow-soft);
}
.card figure { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.card figure img { width: 100%; height: 100%; object-fit: cover; }
.card figure.contain { position: relative; background: radial-gradient(closest-side at 50% 70%, var(--halo), var(--clear)); }
.card figure.contain img { position: absolute; inset: 16px 12px 0; width: calc(100% - 24px); height: calc(100% - 16px); object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 14px 24px var(--shadow)); }
.card--account figure.contain img { inset: 20%; width: 60%; height: 60%; object-position: 50% 50%; }
/* Five overview cards on a phone: picture beside the words, so the list stays short */
@media (max-width: 599px) {
	.cards--five { gap: 12px; }
	.cards--five .card { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
	.cards--five .card figure { aspect-ratio: auto; min-height: 100%; }
	.cards--five .card .body { padding: 14px 16px 6px; gap: 6px; }
	.cards--five .card h2 { font-size: 1.3rem; }
}
.card .body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 20px 14px; }
.card h2, .card h3 { font-size: 1.55rem; letter-spacing: 0; }
@media (min-width: 1100px) { .cards--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .cards--five .card h2 { font-size: 1.4rem; } }
.card p { color: var(--fg-2); }
.card .more { margin-top: auto; align-self: flex-start; }
/* The card's link covers the whole card */
.card .more::before { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ---------- Sessions with a constellation ---------- */
.svc-wrap { position: relative; }
.constellation { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.constellation path { fill: none; stroke: var(--accent-2); stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 0.1 8; }
.svc-grid { position: relative; z-index: 1; padding-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 88px 48px; }
@media (max-width: 759px) { .svc-grid { grid-template-columns: minmax(0, 1fr); gap: 84px; } }
.svc { position: relative; display: grid; gap: 14px; align-content: start; min-width: 0; padding-bottom: 6px; background: var(--bg); }
.band--alt .svc { background: var(--bg-2); }
.svc figure { position: relative; }
.svc figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.svc .eyebrow { padding-top: 8px; }
.svc p { color: var(--fg-2); }
.svc .meta { font-size: 0.95rem; color: var(--fg); border-left: 2px solid var(--accent-2); padding-left: 12px; }
.node {
	position: absolute;
	left: 22px;
	top: -52px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--bg);
	border: 1px solid var(--accent-2);
	color: var(--accent-2);
	box-shadow: 0 0 0 6px var(--halo);
}
.band--alt .node { background: var(--bg-2); }
.node svg { width: 18px; height: 18px; fill: currentColor; }
/* Each node sparks as the dotted line reaches it (engine/js/sparkle.js), and answers a hover on its card */
.node.is-on { box-shadow: 0 0 0 6px var(--halo), 0 0 18px var(--accent-2); }
.svc:hover .node { box-shadow: 0 0 0 10px var(--halo); }
.svc:hover figure img { filter: saturate(1.08); }
.code {
	font-family: var(--f-body);
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--label);
	border: 1px dashed var(--accent-2);
	padding: 2px 8px;
	border-radius: 4px;
}

/* ---------- App rows (one short line each, linking out) ---------- */
.app-rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.app-row {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	gap: 6px 20px;
	align-items: center;
	padding-block: 22px;
	border-bottom: 1px solid var(--line);
}
.app-row .node { position: static; box-shadow: 0 0 0 5px var(--halo); }
.app-row h3 { font-size: 1.45rem; }
.app-row p { color: var(--fg-2); }
.app-row .eyebrow { display: block; margin-bottom: 4px; }
@media (max-width: 639px) {
	.app-row { grid-template-columns: 34px minmax(0, 1fr); }
	.app-row .more { grid-column: 2; }
}

/* ---------- Apps: three devices, each with its line and a link out ---------- */
.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.app { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; min-width: 0; }
.app .shot {
	height: 380px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-top: 24px;
	margin-bottom: 10px;
	background: radial-gradient(closest-side at 50% 62%, var(--halo), var(--clear) 100%);
}
.app .shot img { width: auto; height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 18px 30px var(--shadow)); }
.app .say { font-family: var(--f-display); font-style: italic; font-size: 1.25rem; line-height: 1.3; color: var(--heading); }
.app p.body { color: var(--fg-2); }
.app .copy { display: grid; gap: 10px; align-content: start; }
.app .textlink { justify-self: start; }
@media (max-width: 900px) {
	.apps { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.app .shot { height: 340px; }
}

/* ---------- App feature and app pair ---------- */
.app-feature {
	display: grid;
	gap: 28px;
	align-items: center;
	padding: clamp(20px, 4vw, 44px);
	background: var(--glass);
	border: 1px solid var(--line);
	border-radius: 28px;
}
@media (min-width: 900px) { .app-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.app-feature > div { display: grid; gap: 14px; min-width: 0; }
.app-feature p { color: var(--fg-2); }
.app-feature .shot { justify-self: center; max-height: 620px; width: auto; filter: drop-shadow(0 24px 40px var(--shadow)); }
.steps { display: grid; gap: 12px; counter-reset: step; }
.steps li { position: relative; padding-left: 40px; color: var(--fg-2); }
.steps li::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--accent-2);
	color: var(--label);
	font-size: 0.85rem;
	font-weight: var(--w-body-strong);
}
.stat { display: flex; align-items: baseline; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.stat b { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; font-weight: var(--w-head); color: var(--label); }
.stat span { color: var(--fg-2); font-size: 0.98rem; }
.app-pair { display: grid; gap: 20px; }
@media (min-width: 800px) { .app-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.app-mini {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 120px;
	gap: 18px;
	align-items: center;
	padding: 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 24px;
}
.app-mini > div { display: grid; gap: 10px; min-width: 0; }
.app-mini h3 { font-size: 1.5rem; }
.app-mini p { color: var(--fg-2); font-size: 1rem; }
.app-mini img { filter: drop-shadow(0 14px 26px var(--shadow)); }
@media (max-width: 419px) { .app-mini { grid-template-columns: minmax(0, 1fr) 92px; padding: 18px; } }

/* ---------- Card fan (oracle cards) ---------- */
.split { display: grid; gap: clamp(36px, 6vw, 64px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.fan { display: flex; justify-content: center; align-items: flex-end; width: 100%; max-width: 520px; margin: 0 auto; padding: 24px 0 8px; }
.fan img { width: 34%; max-width: 190px; border-radius: 12px; transform-origin: 50% 100%; box-shadow: 0 18px 40px var(--shadow), 0 0 46px var(--halo); }
.fan img:nth-child(1) { transform: rotate(-9deg) translateX(14%); }
.fan img:nth-child(2) { position: relative; z-index: 1; transform: translateY(-6%); }
.fan img:nth-child(3) { transform: rotate(9deg) translateX(-14%); }
.fan-caption { color: var(--fg-2); font-size: 0.95rem; }
.split .section-head { margin-bottom: 0; }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 899px) { .reviews { grid-template-columns: minmax(0, 1fr); gap: 44px; } }
.review { display: grid; gap: 18px; align-content: start; min-width: 0; }
.review blockquote { font-family: var(--f-display); font-size: 1.32rem; line-height: 1.42; color: var(--heading); }
.review blockquote::before { content: "\201C"; display: block; margin-bottom: 10px; font-size: 3.4rem; line-height: 0.6; color: var(--accent-2); }
.review figcaption { display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: 0.95rem; }
.review figcaption b { color: var(--fg); }
/* The stars carry meaning (role=img, "Five stars"), so they take the text-safe accent, not the decorative --accent-2. */
.stars { color: var(--label); letter-spacing: 2px; }

/* The reviews track: every review as a card on one scroll-snap row, three whole cards per view on a wide screen,
   two on a tablet, one on a phone, never a cut card; engine/js/page.js ([data-reviews]) shuffles the cards on each
   load, pages a full view every nine seconds, and keeps the "1 to 3 of 28" count. It swipes without the script. */
.band > .wrap.rev-top { padding-bottom: 0; }
.band > .wrap.rev-wrap { padding-block: 0; }
.band > .wrap.rev-foot { padding-block: 6px var(--band-pad); }
.rev-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rev-head .section-head { gap: 10px; margin-bottom: 0; }
.rev-nav { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.rev-count { margin-right: 6px; color: var(--fg-2); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.rev-btn {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--clear);
	color: var(--fg);
	font-size: 1.1rem;
	cursor: pointer;
}
.rev-btn:hover { border-color: var(--link); color: var(--link); }
.rev-track {
	display: flex;
	gap: 24px;
	padding: 22px 0 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.rev-track::-webkit-scrollbar { display: none; }
.rev-track:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.rev-card {
	flex: 0 0 calc((100% - 48px) / 3);
	scroll-snap-align: start;
	display: grid;
	gap: 18px;
	align-content: start;
	min-width: 0;
	padding: 28px 30px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 18px 44px var(--shadow);
}
@media (max-width: 980px) { .rev-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 640px) { .rev-card { flex-basis: 100%; padding: 24px 22px 20px; } }
.rev-card blockquote {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;
	overflow: hidden;
	font-family: var(--f-display);
	font-size: 1.22rem;
	line-height: 1.5;
	color: var(--heading);
}
.rev-card .who { display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: 0.95rem; }
.rev-card .who b { color: var(--fg); font-weight: var(--w-body-strong); }
.rev-src { margin-left: auto; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }

/* ---------- Panels ---------- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 759px) { .pair { grid-template-columns: minmax(0, 1fr); } }
.panel {
	display: grid;
	gap: 14px;
	align-content: start;
	min-width: 0;
	padding: clamp(24px, 4vw, 40px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.panel p { color: var(--fg-2); }
.panel p.next-class { color: var(--fg); }
.next-class a { color: var(--link); }

/* ---------- Posts ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 899px) { .posts { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.post { display: grid; gap: 10px; align-content: start; min-width: 0; color: var(--fg); text-decoration: none; }
.post img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.post h3 { font-size: 1.3rem; line-height: 1.25; }
.post:hover { color: var(--fg); }
.post:hover h3 { color: var(--link); }
.post time { color: var(--fg-2); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.post-mark { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); }
.post .post-mark img { width: 96px; height: 96px; aspect-ratio: 1; border-radius: 0; filter: drop-shadow(0 0 10px var(--halo)); }
.band-foot { margin-top: 28px; }

/* ---------- Start and contact ---------- */
.start { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.start-copy { display: grid; gap: 18px; }
.contact { display: grid; gap: 18px; padding-left: clamp(20px, 4vw, 40px); border-left: 1px solid var(--line); }
.contact > div { display: grid; gap: 2px; }
.contact .v { font-size: 1.1rem; color: var(--fg); }
.contact a.v { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.contact a.v:hover { color: var(--link); }
@media (max-width: 819px) {
	.start { grid-template-columns: minmax(0, 1fr); }
	.contact { padding-left: 0; padding-top: 24px; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); color: var(--fg-2); font-size: 0.9rem; }
.site-footer .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	justify-content: space-between;
	align-items: center;
	padding-block: 32px max(32px, env(safe-area-inset-bottom, 0px));
}
.site-footer p { max-width: 72ch; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--fg-2); }
.site-footer nav a:hover { color: var(--link); }
.site-footer .credit { flex-basis: 100%; }
.site-footer .credit a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); }

/* ---------- Phone quick bar and back to top ---------- */
/* Book and Call stay at the foot of a phone screen once the first band has scrolled away; the helper's launcher
   and the top button move up to make room (html.has-quickbar, set by engine/js/page.js). The bar is 69 px plus the
   home indicator inset tall, so what sits above it is lifted by 90 px plus that inset (20 px clear of it). */
.quickbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 58;
	display: none;
	gap: 10px;
	padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
	background: var(--header-bg);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--line);
}
.quickbar .btn { flex: 1; min-height: 48px; }
.quickbar .btn--ghost { flex: 0 0 auto; padding: 0 22px; }
/* The back to top button sits in the bottom right corner; while the helper's launcher shows (html.has-ask, set by
   engine/js/assistant.js) it sits above it (the same size, 14 px apart), so the two stack. */
.to-top {
	position: fixed;
	right: max(20px, env(safe-area-inset-right, 0px));
	bottom: max(20px, env(safe-area-inset-bottom, 0px));
	z-index: 59;
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--accent-2);
	border-radius: 50%;
	background: var(--surface);
	color: var(--label);
	cursor: pointer;
	box-shadow: 0 4px 16px var(--shadow);
}
.has-ask .to-top { bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 64px + 14px); }
.to-top svg { width: 26px; height: 26px; }
.to-top:hover { color: var(--accent-2); }
@media (max-width: 560px) {
	.quickbar:not([hidden]) { display: flex; }
	.has-quickbar body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
	.to-top { width: 58px; height: 58px; }
	.has-ask .to-top { bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 58px + 14px); }
	.has-quickbar .to-top { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
	.has-ask.has-quickbar .to-top { bottom: calc(90px + env(safe-area-inset-bottom, 0px) + 58px + 14px); }
}

/* ---------- Forms ---------- */
label { display: block; margin-bottom: 6px; font-weight: var(--w-body-strong); color: var(--fg); }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
select {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	font: inherit;
	color: var(--fg);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: 12px;
}
textarea { min-height: 140px; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--focus); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); }
::placeholder { color: var(--fg-2); opacity: 0.8; }
button[type="submit"],
input[type="submit"] {
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--radius-btn);
	background: var(--accent);
	color: var(--accent-ink);
	font: inherit;
	font-weight: var(--w-body-strong);
	cursor: pointer;
}
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.searchform { display: flex; gap: 10px; flex-wrap: wrap; }
.searchform input { flex: 1 1 220px; }

/* ---------- Page and post content ---------- */
/* The title band: the sky field behind the h1 (and a post's date), a hairline, then the reading band. */
.page-hero { overflow: hidden; border-bottom: 1px solid var(--line); }
.band.page-hero > .wrap { position: relative; display: grid; gap: 14px; padding-block: clamp(44px, 7vw, 88px) clamp(32px, 5vw, 56px); }
.page-hero h1 { max-width: 24ch; }
.page-hero .eyebrow time { color: inherit; }
.band.page-body > .wrap { padding-block: clamp(36px, 6vw, 64px) var(--band-pad); }
.page-head { display: grid; gap: 12px; margin-bottom: clamp(24px, 4vw, 40px); }
.page-head time { color: var(--fg-2); font-size: 0.95rem; }
.entry-image img { width: 100%; }
.entry { max-width: 72ch; }
.entry > * + * { margin-top: 1.1em; }
.entry h2 { font-size: clamp(1.7rem, 1.6vw + 1.1rem, 2.4rem); margin-top: 1.6em; }
.entry h3 { font-size: 1.45rem; margin-top: 1.4em; }
.entry ul:not([class]), .entry ol:not([class]) { padding-left: 1.3em; }
.entry li + li { margin-top: 0.4em; }
/* A list item that is only a link (a table of contents) is a 44 px tap target. */
.entry li > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
.entry img { border-radius: var(--radius); }
.entry figcaption { margin-top: 8px; color: var(--fg-2); font-size: var(--fs-small); }
.entry blockquote { padding-left: 18px; border-left: 2px solid var(--accent-2); font-family: var(--f-display); font-size: 1.3rem; color: var(--heading); }
.entry hr { border: 0; border-top: 1px solid var(--line); }
.entry table { width: 100%; border-collapse: collapse; }
.entry th, .entry td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.entry .alignwide, .entry .alignfull { max-width: none; }
.entry iframe, .entry video, .entry embed { max-width: 100%; }
/* An outside scheduler or form in an iframe (the Acuity booking sheet on /appointments/): framed as a card on the
   theme's surface so its own light sheet reads as a sheet of paper in either theme; the embed script sets its height. */
.entry iframe[src*="acuityscheduling.com"] { display: block; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 10px 30px var(--shadow-soft); }
.entry .aligncenter { margin-inline: auto; text-align: center; }
.entry .aligncenter img { margin-inline: auto; }
.entry .alignleft { float: left; margin: 0.3em 24px 12px 0; }
.entry .alignright { float: right; margin: 0.3em 0 12px 24px; }
@media (max-width: 599px) { .entry .alignleft, .entry .alignright { float: none; margin: 0; } }
.entry figcaption, .entry .wp-element-caption { text-align: center; }
.entry .wp-block-quote cite, .entry .wp-block-pullquote cite { display: block; margin-top: 8px; font-family: var(--f-body); font-size: var(--fs-small); font-style: normal; color: var(--fg-2); }
.entry .wp-block-separator { border: 0; border-top: 1px solid var(--line); opacity: 1; }
.entry .wp-block-columns { gap: clamp(20px, 4vw, 40px); }
@media (max-width: 781px) {
	.entry .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap; }
	.entry .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100%; }
}
/* Button blocks read as the engine's buttons: copper fill, or the outline style as the ghost button */
.entry .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.entry .wp-block-buttons.is-content-justification-center { justify-content: center; }
.entry .wp-block-buttons.is-content-justification-right { justify-content: flex-end; }
.entry .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--clear);
	border-radius: var(--radius-btn);
	background: var(--accent);
	color: var(--accent-ink);
	font-family: var(--f-body);
	font-size: 1rem;
	font-weight: var(--w-body-strong);
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 8px 24px var(--halo);
}
.entry .wp-block-button__link:hover { color: var(--accent-ink); }
.entry .is-style-outline > .wp-block-button__link { background: var(--glass); color: var(--heading); border-color: var(--line-2); box-shadow: none; }
.entry .is-style-outline > .wp-block-button__link:hover { border-color: var(--accent-2); color: var(--heading); }
/* Details blocks read as the FAQ accordion: a hairline between questions, a plus that turns to a minus */
.entry .wp-block-details { border-block: 1px solid var(--line); }
.entry .wp-block-details + .wp-block-details { margin-top: 0; border-top: 0; }
.entry .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding-block: 12px;
	list-style: none;
	cursor: pointer;
	font-family: var(--f-display);
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--heading);
}
.entry .wp-block-details > summary::-webkit-details-marker { display: none; }
.entry .wp-block-details > summary::after { content: "+"; flex: none; font-family: var(--f-body); font-size: 1.5rem; line-height: 1; color: var(--accent-2); }
.entry .wp-block-details[open] > summary::after { content: "\2212"; }
.entry .wp-block-details > :not(summary) { margin-top: 0.6em; color: var(--fg-2); }
.entry .wp-block-details[open] { padding-bottom: 18px; }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-btn); text-decoration: none; }

/* ---------- Motion: only for people who have not asked for less ---------- */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
	.btn { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
	.btn--primary:hover { transform: translateY(-1px); }
	.more::after { transition: transform 0.2s ease; }
	.more:hover::after { transform: translateX(3px) rotate(45deg); }
	.textlink::after { transition: transform 0.2s ease; }
	.textlink:hover::after { transform: translateX(4px); }
	.social a, .rev-btn, .dots button, .to-top { transition: color 0.15s ease, border-color 0.15s ease; }
	.nav a, .menu-panel a, .theme-toggle, .menu-btn { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
	.sub-btn { transition: color 0.15s ease, background-color 0.15s ease; }
	.sub-btn svg { transition: transform 0.15s ease; }
	.nav .sub { transition: opacity 0.15s ease, visibility 0.15s ease; }
	.card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
	.card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px var(--shadow), 0 0 0 1px var(--accent-2); }
	.post img { transition: opacity 0.2s ease; }
	.post:hover img { opacity: 0.88; }
	.fan img { transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
	.fan:hover img:nth-child(1) { transform: rotate(-14deg) translateX(4%); }
	.fan:hover img:nth-child(2) { transform: translateY(-10%); }
	.fan:hover img:nth-child(3) { transform: rotate(14deg) translateX(-4%); }
	/* The dial: both tick rings turn clockwise at different rates, so the copper ticks meet the fine ones and drift
	   apart on a slow cycle; the triangles behind the photo turn once in 150 seconds. */
	.ticks-minor { animation: prodigy-turn 240s linear infinite; }
	.ticks-major { animation: prodigy-turn 400s linear infinite; }
	.orbiter { animation: prodigy-turn 150s linear infinite; }
	.astrolabe img.photo { transition: opacity 900ms ease; }
	.slide-text { transition: opacity 350ms ease; }
	.ring-label { transition: fill-opacity 600ms ease, fill 600ms ease; }
	.orn { transition: opacity 600ms ease; }
	.node { transition: box-shadow 600ms ease; }
	.svc figure img { transition: filter 300ms ease; }
	.hero--horizon::before { animation: prodigy-aurora 38s ease-in-out infinite alternate; }
	.hero-sun { animation: prodigy-breathe 9s ease-in-out infinite; }
	.section-head h2:hover .spark, .band--dusk h2:hover .spark { animation: prodigy-spark 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) 1; }
	/* engine/js/sparkle.js sets .is-away on <html> while the tab is in the background */
	.is-away *, .is-away *::before { animation-play-state: paused; }
	@keyframes prodigy-turn { to { transform: rotate(360deg); } }
	@keyframes prodigy-aurora {
		0% { transform: translate3d(0, 0, 0) scale(1); }
		50% { transform: translate3d(-3%, 2%, 0) scale(1.06); }
		100% { transform: translate3d(3%, -1%, 0) scale(1.03); }
	}
	@keyframes prodigy-breathe {
		0%, 100% { filter: drop-shadow(0 0 14px var(--halo)); }
		50% { filter: drop-shadow(0 0 30px var(--halo)); }
	}
	@keyframes prodigy-spark {
		0% { transform: scale(1) rotate(0); }
		45% { transform: scale(1.9) rotate(90deg); }
		100% { transform: scale(1) rotate(180deg); }
	}
}