/**
 * Aura Healing — motion, glass and 3D surface styles.
 *
 * Loaded on every page (it is small); the heavy JavaScript is conditional.
 *
 * Sections 1 to 12 are scoped under .aura-* and cannot leak anywhere. Two are
 * deliberately not: section 12 also restyles the WooCommerce product loop, and
 * section 13 restyles ZenSoul's own header. Both target markup we do not own
 * because the alternative is copying a parent template, and a broken template
 * takes a live page down where an unmatched CSS rule simply does nothing.
 *
 * Sections
 *   1. Tokens
 *   2. Reveal + parallax
 *   3. Magnetic buttons
 *   4. Glass surfaces
 *   5. Aura sphere
 *  5b. Mandala hero
 *   6. Vastu compass
 *   7. Model + Spline stages
 *   8. Direct answer blocks
 *   9. Reduced motion + print
 *  10. North finder
 *  11. Paid report — offer block and download
 *  12. Product cards          (also touches WooCommerce markup)
 *  13. Site header            (also touches ZenSoul markup)
 *  14. Cart trigger + drawer  (also touches WooCommerce markup)
 *  15. Ambient layers, type scale and chrome
 *  16. The sixteen zones grid
 *  17. Ways in, and the catalogue teasers
 *  18. Footer
 *  19. Contact block
 *  20. Floating contact buttons
 *  21. The pointer
 */

/* =========================================================================
 * 1. Tokens
 * ====================================================================== */

:root {
	/* ===============================================================
	 * COSMIC HEALING PALETTE
	 *
	 * Three accents carry the whole system: amethyst, cyan and gold.
	 * Deep indigo-black grounds it. Never flat grey, never #000000 —
	 * pure black kills the glow, because a bloom needs somewhere to
	 * fall off to.
	 * ============================================================ */

	--aura-void: #070913;       /* deepest, behind everything          */
	--aura-paper: #0a0817;      /* default surface                     */
	--aura-paper-2: #0f0a1e;    /* raised surface                      */

	--aura-amethyst: #8a2be2;   /* primary accent                      */
	--aura-cyan: #00e5ff;       /* secondary accent                    */
	--aura-gold: #d4af37;       /* Vastu gold                          */

	/* Four steps, not two. A dark page needs more rungs than a light one:
	   between full ink and a faint caption there are two useful greys, and
	   collapsing them is what makes body copy and metadata read as the same
	   weight. */
	--aura-ink: #efecf9;
	--aura-ink-subtle: #cfc8e4;
	--aura-ink-muted: #b8b0d2;
	--aura-ink-faint: #8b84a8;

	/* Text that sits on something white the site does not control — the
	   checkout's own input fields. The same value .aura-light uses for its
	   secondary ink, so a label reads as part of the same family. */
	--aura-ink-on-light: #4a4160;

	/* Errors only. Not part of the palette, and never an accent: a failed
	   payment or a rejected coupon has to read as wrong at a glance. */
	--aura-alert: #e5484d;

	/* Roads on the Direction Finder plan — the T-junction marker and its reading.
	   A marker colour, not an interface accent. */
	--aura-road: #ffb454;

	/* Kept as the old name so nothing that already reads it breaks. */
	--aura-ink-2: var(--aura-ink-muted);

	--aura-line: rgba(138, 43, 226, 0.22);

	/* A third ground, above paper-2, for panels that must sit proud. */
	--aura-raised: #140e28;

	--aura-accent: var(--aura-amethyst);
	--aura-accent-2: var(--aura-cyan);

	/* ---------------------------------------------------------------
	 * The four elements, mapped onto the palette rather than fought
	 * against it. Water is the cyan, fire is the gold, earth is the
	 * amethyst, and air sits between cyan and green. The compass then
	 * teaches the Vastu system using the brand's own colours.
	 * ------------------------------------------------------------ */
	/**
	 * Element colours.
	 *
	 * These are the reference build's values, not the brand accents. Mapping
	 * fire onto the house gold made every warm zone read as the same zone, and
	 * a visitor learning the system needs fire to look like fire. The brand
	 * accents still carry the interface; these carry the teaching.
	 */
	--aura-water: #00f5d4;
	--aura-fire: #ff5e36;
	--aura-earth: #e6a100;
	--aura-air: #5fd39a;
	--aura-space: #c9d4e8;

	/* Sixteen zones, by element. */
	--aura-north: var(--aura-water);
	--aura-northeast: var(--aura-water);
	--aura-east: var(--aura-air);
	--aura-southeast: var(--aura-fire);
	--aura-south: var(--aura-fire);
	--aura-southwest: var(--aura-earth);
	--aura-west: var(--aura-space);
	--aura-northwest: var(--aura-space);

	/* Metals, for the product photography and the objects themselves. */
	--aura-copper: #d98a4a;
	--aura-brass: var(--aura-gold);

	/* ---------------------------------------------------------------
	 * Glass. On a deep ground this is a LIGHTER film with a glowing
	 * edge — the border colour is the amethyst at low alpha, which is
	 * what makes the panels read as lit rather than drawn.
	 * ------------------------------------------------------------ */
	--aura-glass-bg: rgba(138, 43, 226, 0.06);
	--aura-glass-bg-strong: rgba(138, 43, 226, 0.11);
	--aura-glass-border: rgba(138, 43, 226, 0.25);
	--aura-glass-blur: 18px;
	--aura-glass-spot: rgba(0, 229, 255, 0.10);

	/* Bloom. Used on hover and focus everywhere. */
	--aura-glow-amethyst: 0 0 0 1px rgba(138, 43, 226, 0.35), 0 0 34px -6px rgba(138, 43, 226, 0.55);
	--aura-glow-cyan: 0 0 0 1px rgba(0, 229, 255, 0.30), 0 0 34px -6px rgba(0, 229, 255, 0.45);
	--aura-glow-gold: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 0 34px -6px rgba(212, 175, 55, 0.45);

	/* Chakra spectrum — shared with the WebGL shader. Kept separate
	   because chakras belong to the aura work and directions to the
	   Vastu work; mixing the two is what makes these sites look
	   confused. */
	--aura-root: #e03a3a;
	--aura-sacral: #ff7a2f;
	--aura-solar: #ffc93c;
	--aura-heart: #3ccf7a;
	--aura-throat: #35a7ff;
	--aura-third: #6c63ff;
	--aura-crown: #b466ff;

	/* ---------------------------------------------------------------
	 * Type
	 *
	 * A high-contrast variable serif against a neutral grotesque. The
	 * gap between the two is what stops a cream page reading like a
	 * word processor document, which is exactly what happens when a
	 * whole site is set in one system font.
	 * ------------------------------------------------------------ */
	--aura-display: "Cinzel", "Trajan Pro", Georgia, serif;
	--aura-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
	--aura-text: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--aura-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Motion */
	--aura-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--aura-dur: 0.9s;

	--aura-radius: 22px;
	--aura-radius-sm: 14px;

	/* Depth on a dark ground is shadow plus bloom, not shadow alone. */
	--aura-lift-1:
		0 2px 8px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(138, 43, 226, 0.10);
	--aura-lift-2:
		0 8px 24px rgba(0, 0, 0, 0.55),
		0 24px 64px -20px rgba(0, 0, 0, 0.65),
		0 0 44px -10px rgba(138, 43, 226, 0.35);
}

/* -------------------------------------------------------------------------
 * The ground
 *
 * Two soft nebulae over the void, fixed so they do not scroll. This is what
 * stops a dark page reading as flat black, and it is two gradients rather
 * than an image.
 * ---------------------------------------------------------------------- */

body {
	background-color: var(--aura-void);
	color: var(--aura-ink);
}

/**
 * Anchor clearance.
 *
 * ZenSoul's header is sticky, so a jump to #zones or #services would land the
 * heading underneath it. `scroll-padding-top` offsets every scroll the browser
 * performs, including the one after a hash link and the one after focusing a
 * skip link.
 *
 * Adjust the value if the header height changes; there is no way to read it
 * from CSS, which is why it is a variable rather than a literal.
 */
html {
	--aura-header-height: 6rem;
	scroll-padding-top: var(--aura-header-height);
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/**
 * Any element the theme scrolls to gets the same clearance, so a compass zone
 * or an answer opened from a link is never hidden behind the header.
 */
[id] {
	scroll-margin-top: var(--aura-header-height);
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(58% 44% at 18% 8%, rgba(138, 43, 226, 0.20), transparent 62%),
		radial-gradient(48% 40% at 86% 26%, rgba(0, 229, 255, 0.12), transparent 60%),
		radial-gradient(70% 50% at 50% 108%, rgba(212, 175, 55, 0.07), transparent 66%),
		linear-gradient(180deg, var(--aura-void), var(--aura-paper-2) 55%, var(--aura-void));
}

/* Film grain. On a dark gradient this is what removes the banding that makes
   a large blurred gradient look cheap. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
 * Display type
 * ---------------------------------------------------------------------- */

.aura-display,
.aura-sphere__heading,
.aura-mandala__heading,
.aura-compass__heading,
.aura-north__heading,
.aura-answer__q {
	font-family: var(--aura-display);
	font-optical-sizing: auto;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.08;
	text-wrap: balance;
}

/**
 * Gradient text.
 *
 * Applied to the hero by default. Kept off every other heading on purpose:
 * once every title is a gradient, none of them reads as special, and long
 * gradient body text is genuinely hard to read.
 */
.aura-gradient-text,
.aura-sphere__heading,
.aura-mandala__heading {
	background: linear-gradient(96deg, #ffffff 0%, #d8c8ff 34%, var(--aura-cyan) 78%, var(--aura-gold));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	/* A faint bloom behind the glyphs, so the text sits in the same light as
	   the sphere behind it. */
	filter: drop-shadow(0 0 26px rgba(138, 43, 226, 0.35));
}

/* Small caps label. Used above every section heading. */
.aura-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 1rem;
	font-family: var(--aura-text);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--aura-gold);
}

.aura-kicker::before {
	content: "";
	width: 2.2em;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

/* -------------------------------------------------------------------------
 * Section ornament
 *
 * Sixteen rays. The same figure the compass draws, reduced to a rule, used
 * to break long pages without importing an image.
 * ---------------------------------------------------------------------- */

.aura-ornament {
	display: block;
	width: 100%;
	height: 34px;
	margin: clamp(2rem, 6vw, 4rem) auto;
	border: 0;
	background:
		linear-gradient(90deg, transparent, var(--aura-line) 18%, var(--aura-line) 82%, transparent) center/100% 1px no-repeat,
		conic-gradient(
			from 0deg,
			var(--aura-gold) 0 1deg, transparent 1deg 22.5deg,
			var(--aura-gold) 22.5deg 23.5deg, transparent 23.5deg 45deg,
			var(--aura-gold) 45deg 46deg, transparent 46deg 67.5deg,
			var(--aura-gold) 67.5deg 68.5deg, transparent 68.5deg 90deg,
			var(--aura-gold) 90deg 91deg, transparent 91deg 112.5deg,
			var(--aura-gold) 112.5deg 113.5deg, transparent 113.5deg 135deg,
			var(--aura-gold) 135deg 136deg, transparent 136deg 157.5deg,
			var(--aura-gold) 157.5deg 158.5deg, transparent 158.5deg 180deg,
			var(--aura-gold) 180deg 181deg, transparent 181deg 202.5deg,
			var(--aura-gold) 202.5deg 203.5deg, transparent 203.5deg 225deg,
			var(--aura-gold) 225deg 226deg, transparent 226deg 247.5deg,
			var(--aura-gold) 247.5deg 248.5deg, transparent 248.5deg 270deg,
			var(--aura-gold) 270deg 271deg, transparent 271deg 292.5deg,
			var(--aura-gold) 292.5deg 293.5deg, transparent 293.5deg 315deg,
			var(--aura-gold) 315deg 316deg, transparent 316deg 337.5deg,
			var(--aura-gold) 337.5deg 338.5deg, transparent 338.5deg 360deg
		) center/34px 34px no-repeat;
}

/* -------------------------------------------------------------------------
 * Dark sections
 *
 * Put .aura-dark on any wrapper — a hero, a quote band — and the tokens
 * invert. Everything inside keeps working without a second rule.
 * ---------------------------------------------------------------------- */

/* The whole site is dark now, so this is a deeper band rather than an
   inversion. Useful for a hero or a quote section that should sink. */
.aura-dark {
	--aura-paper: var(--aura-void);
	--aura-paper-2: #0a0817;
	background: transparent;
	color: var(--aura-ink);
}

/* Escape hatch: a section that genuinely needs a light ground, such as a
   printed price table or a product shot on white. Rare, deliberate. */
.aura-light {
	--aura-paper: #f4f1fa;
	--aura-paper-2: #eae5f5;
	--aura-ink: #16121f;
	--aura-ink-2: #4a4160;
	--aura-line: rgba(22, 18, 31, 0.14);

	--aura-glass-bg: rgba(22, 18, 31, 0.04);
	--aura-glass-bg-strong: rgba(22, 18, 31, 0.07);
	--aura-glass-border: rgba(138, 43, 226, 0.22);
	--aura-glass-spot: rgba(255, 255, 255, 0.6);

	background: var(--aura-paper);
	color: var(--aura-ink);
}

.aura-eyebrow {
	margin: 0 0 0.9rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--aura-gold);
}

.aura-dark .aura-eyebrow {
	color: var(--aura-brass);
}

/* --- Focus, everywhere -------------------------------------------------------
 *
 * Fifteen components had a considered :focus-visible style and everything else
 * — body links, footer links, Journal cards, product cards, the skip link's
 * neighbours — fell back to whatever the browser draws. That differs by
 * browser, and on this near-black ground several of those defaults are close to
 * invisible. Keyboard users were navigating a site whose focus they could not
 * always see.
 *
 * :where() gives this zero specificity, so every component rule that already
 * styles its own focus still wins. This is only the floor.
 * ------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--aura-cyan);
	outline-offset: 3px;
	border-radius: 3px;
}

/* =========================================================================
 * 2. Reveal + parallax
 * ====================================================================== */

/* Rise, and pull into focus. The blur is what makes it read as depth rather
   than as a generic fade-in. */
[data-aura-reveal] {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	filter: blur(7px);
	transition:
		opacity var(--aura-dur) var(--aura-ease),
		transform var(--aura-dur) var(--aura-ease),
		filter var(--aura-dur) var(--aura-ease);
	will-change: opacity, transform, filter;
}

[data-aura-reveal].is-revealed {
	opacity: 1;
	transform: none;
	filter: blur(0);
	will-change: auto;
}

/* Failsafe: if the engine never boots, content must not stay invisible.
 *
 * One second, not three. The old delay was set when the reveals waited on GSAP
 * and needed to outlast a CDN fetch — which was the wrong way round, because it
 * meant a slow connection showed a blank page for three seconds and then had
 * the failsafe cancelled by the very script it was waiting for. The reveals no
 * longer wait for anything, so this only has to cover the case where script
 * fails outright, and a second is long enough for that. */
html:not(.aura-motion-ready) [data-aura-reveal] {
	animation: aura-failsafe-reveal 0s linear 1s forwards;
}

@keyframes aura-failsafe-reveal {
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

.aura-reveal__inner {
	will-change: transform;
}

/* =========================================================================
 * 3. Magnetic buttons
 * ====================================================================== */

/* Guarded, because some of these ship with the `hidden` attribute and are
   revealed by script — the north finder's "Download the overlay" is hidden
   until a floor plan exists. An unguarded `display` beats the user agent's
   `display: none` and the button offered a download of nothing. */
.aura-magnetic:not([hidden]) {
	display: inline-flex;
}

.aura-magnetic {
	position: relative;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 1.05em 2.2em;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	isolation: isolate;
	overflow: hidden;
	transition:
		box-shadow 0.45s var(--aura-ease),
		border-color 0.45s var(--aura-ease),
		background-color 0.45s var(--aura-ease);
	will-change: transform;
}

.aura-magnetic__label {
	position: relative;
	z-index: 2;
	display: inline-block;
	will-change: transform;
}

/* Cursor-tracked spotlight, driven by --aura-mx / --aura-my from motion-fx. */
.aura-magnetic::before {
	content: "";
	position: absolute;
	inset: -40%;
	z-index: 1;
	background: radial-gradient(
		220px circle at var(--aura-mx, 50%) var(--aura-my, 50%),
		rgba(255, 255, 255, 0.30),
		transparent 62%
	);
	opacity: 0;
	transition: opacity 0.4s var(--aura-ease);
	pointer-events: none;
}

.aura-magnetic.is-magnetised::before {
	opacity: 1;
}

/* Terracotta into copper: the south-east fire ramp. Warm, and it sits
   against the cream ground without shouting. */
/* Amethyst into cyan. The gradient is oversized and animates on hover, so the
   button appears lit from within rather than painted. */
.aura-magnetic--primary {
	color: #ffffff;
	background: linear-gradient(112deg, #6a1fb5, var(--aura-amethyst) 38%, #1b6fd6 74%, var(--aura-cyan));
	background-size: 220% 100%;
	background-position: 0% 50%;
	transition:
		background-position 0.9s var(--aura-ease),
		box-shadow 0.45s var(--aura-ease);
	box-shadow:
		0 10px 30px -12px rgba(138, 43, 226, 0.75),
		0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.aura-magnetic--primary:hover,
.aura-magnetic--primary.is-magnetised {
	background-position: 100% 50%;
	box-shadow:
		0 18px 48px -14px rgba(138, 43, 226, 0.95),
		0 0 28px -4px rgba(0, 229, 255, 0.55),
		0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}

.aura-magnetic--ghost {
	color: var(--aura-ink);
	background: var(--aura-glass-bg);
	border-color: var(--aura-glass-border);
	backdrop-filter: blur(var(--aura-glass-blur)) saturate(140%);
	-webkit-backdrop-filter: blur(var(--aura-glass-blur)) saturate(140%);
}

.aura-magnetic--ghost.is-magnetised {
	border-color: var(--aura-gold);
	box-shadow: 0 0 30px -10px rgba(0, 229, 255, 0.55);
}

.aura-magnetic--quiet {
	padding: 0.6em 0;
	color: var(--aura-ink);
	border-radius: 0;
	background: none;
	border-bottom: 1px solid currentColor;
}

.aura-magnetic:focus-visible {
	outline: 2px solid var(--aura-gold);
	outline-offset: 4px;
}

/* =========================================================================
 * 4. Glass surfaces
 * ====================================================================== */

/* Glassmorphism proper: a translucent film, a real blur, and an edge that
   glows amethyst. The panel should look lit from behind, not drawn. */
.aura-glass {
	position: relative;
	padding: 2rem;
	border-radius: var(--aura-radius);
	background:
		linear-gradient(
			168deg,
			rgba(255, 255, 255, 0.07) 0%,
			rgba(255, 255, 255, 0.02) 46%,
			rgba(138, 43, 226, 0.05) 100%
		);
	border: 1px solid var(--aura-glass-border);
	backdrop-filter: blur(var(--aura-glass-blur)) saturate(150%);
	-webkit-backdrop-filter: blur(var(--aura-glass-blur)) saturate(150%);
	box-shadow: var(--aura-lift-1);
	transition:
		transform 0.55s var(--aura-ease),
		border-color 0.55s var(--aura-ease),
		box-shadow 0.55s var(--aura-ease);
}

.aura-light .aura-glass {
	background: linear-gradient(168deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55));
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Ambient neon border: a gradient ring masked to the 1px edge. */
.aura-glass::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	padding: 1px;
	/* The eight directions, in compass order. The border is literally a
	   Vastu wheel wrapped around the card. */
	background: conic-gradient(
		from 0deg at 50% 50%,
		var(--aura-north),
		var(--aura-northeast),
		var(--aura-east),
		var(--aura-southeast),
		var(--aura-south),
		var(--aura-southwest),
		var(--aura-west),
		var(--aura-northwest),
		var(--aura-north)
	);
	opacity: 0;
	transition: opacity 0.5s var(--aura-ease);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.aura-glass:hover {
	transform: translateY(-6px);
	background:
		linear-gradient(
			168deg,
			rgba(255, 255, 255, 0.11) 0%,
			rgba(255, 255, 255, 0.04) 46%,
			rgba(0, 229, 255, 0.07) 100%
		);
	border-color: rgba(0, 229, 255, 0.40);
	box-shadow:
		var(--aura-lift-2),
		0 0 44px -12px rgba(0, 229, 255, 0.45);
}

.aura-glass:hover::after {
	opacity: 0.9;
}

/* Pointer spotlight on the card face. */
.aura-glass::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		320px circle at var(--aura-mx, 50%) var(--aura-my, 0%),
		var(--aura-glass-spot),
		transparent 60%
	);
	opacity: 0;
	transition: opacity 0.5s var(--aura-ease);
	pointer-events: none;
}

.aura-glass:hover::before {
	opacity: 1;
}

/* =========================================================================
 * 5. Aura sphere
 * ====================================================================== */

.aura-sphere {
	position: relative;
	display: grid;
	place-items: center;
	min-height: var(--aura-sphere-height, 640px);
	padding: clamp(3rem, 8vw, 7rem) 1.25rem;
	overflow: hidden;
	isolation: isolate;
}

.aura-sphere__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.aura-sphere__canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Shown when WebGL is unavailable or the context is lost. */
.aura-sphere__fallback {
	position: absolute;
	inset: 0;
	opacity: 0;
	background:
		radial-gradient(48% 48% at 50% 46%, rgba(180, 102, 255, 0.55), transparent 70%),
		radial-gradient(34% 34% at 44% 40%, rgba(53, 167, 255, 0.55), transparent 72%),
		radial-gradient(30% 30% at 58% 56%, rgba(60, 207, 122, 0.35), transparent 74%);
	filter: blur(12px);
	transition: opacity 0.6s var(--aura-ease);
}

.aura-sphere.is-fallback .aura-sphere__fallback,
.aura-sphere:not(.is-ready) .aura-sphere__fallback {
	opacity: 1;
}

.aura-sphere.is-ready .aura-sphere__fallback {
	opacity: 0;
}

.aura-sphere__content {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	text-align: center;
}

/**
 * Readability scrim.
 *
 * The aura is a full-bleed field, not a contained orb: at its centre it goes
 * to a near-white core, and the headline sits directly on top of that. Without
 * a base the gold eyebrow and the body copy drop to roughly 1.5:1 against the
 * brightest frames, which fails WCAG by a wide margin and reads as smeared.
 *
 * A feathered ellipse of the deep-space background restores contrast under the
 * text while leaving the aura fully visible around it. It is painted behind
 * the content but in front of the canvas, so the movement still shows through
 * at the edges of the type.
 */
.aura-sphere__content::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -12% -14%;
	background: radial-gradient(
		58% 52% at 50% 50%,
		rgba(7, 9, 19, 0.82) 0%,
		rgba(7, 9, 19, 0.68) 42%,
		rgba(7, 9, 19, 0.32) 70%,
		rgba(7, 9, 19, 0) 100%
	);
	pointer-events: none;
}

.aura-sphere--left .aura-sphere__content {
	text-align: left;
	justify-self: start;
}

.aura-sphere--left .aura-sphere__content::before {
	inset: -14% -20% -14% -30%;
	background: radial-gradient(
		62% 56% at 34% 50%,
		rgba(7, 9, 19, 0.84) 0%,
		rgba(7, 9, 19, 0.66) 44%,
		rgba(7, 9, 19, 0) 100%
	);
}

.aura-sphere__heading {
	margin: 0 0 1rem;
	font-size: clamp(2.1rem, 5.2vw, 3.9rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
}

.aura-sphere__text {
	margin: 0 auto 2rem;
	max-width: 34rem;
	font-size: clamp(1rem, 1.6vw, 1.16rem);
	line-height: 1.65;
	opacity: 0.85;
}

.aura-sphere--left .aura-sphere__text {
	margin-left: 0;
}

.aura-sphere__actions {
	margin: 0;
}

/* =========================================================================
 * 5b. Mandala hero
 *
 * The canvas is the ground of the section and the copy sits on top of it. The
 * mandala is a solid object rather than a diffuse wash, so the scrim under the
 * text has to be a little stronger here than it is over the sphere.
 * ====================================================================== */

/**
 * Copy sits in the upper half; the scene puts the plate in the lower third.
 * They share the section without overlapping, which is what lets the scrim
 * stay light enough to see the mandala through.
 */
/**
 * Exactly one viewport.
 *
 * border-box matters here: with the default content-box the padding is added
 * to the 100svh min-height, so the hero came out a couple of hundred pixels
 * taller than the screen and the section below never peeked. Centred, not
 * top-aligned, because the scene behind is centred too and the two have to
 * agree.
 */
.aura-mandala {
	position: relative;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	/* Tied to width as well as height, and capped in real pixels.
	 *
	 * This asked for 100svh on the homepage, which is fine until a phone is
	 * asked for the desktop site: the layout viewport goes to about 1200 CSS
	 * pixels wide, and because the physical screen has not changed, 100svh
	 * becomes roughly 2600 CSS pixels. The hero then wanted a canvas 1200 by
	 * 2600 — a tall column three times the area of a laptop's — on the device
	 * least able to paint one.
	 *
	 * 70vw keeps it in proportion to its own width, so it can never become a
	 * column, and 900px stops a very tall viewport taking it back. On a laptop
	 * the viewport height is the smallest of the three and nothing changes. */
	min-height: min(var(--aura-mandala-height, 760px), 70vw, 900px);
	padding: clamp(5rem, 9vw, 7rem) 1.25rem clamp(4rem, 7vw, 6rem);
	overflow: hidden;
	isolation: isolate;
}

.aura-mandala__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.aura-mandala__canvas {
	display: block;
	width: 100%;
	height: 100%;

	/* The page scroll wins by default, and the canvas has to ask for the
	 * gesture rather than be given it.
	 *
	 * This used to be `touch-action: none`, so that OrbitControls could turn
	 * the mandala by drag. On a full-height hero that is the whole first
	 * screen, and the result was a homepage a phone could not scroll: the
	 * swipe went to the canvas every time. Worse, it held even when the module
	 * never booted — a device without WebGL got a static gradient it could not
	 * scroll past.
	 *
	 * mandala-hero.js now sets touchAction to 'none' inline, and only on a
	 * device with no touchscreen, where there is no scroll gesture to lose. */
	touch-action: pan-y;
}

/**
 * Grounds the scene into the page.
 *
 * Without it the bottom edge of the canvas shows as a hard horizontal line
 * where the particle field stops and the next section begins.
 */
.aura-mandala::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	z-index: 0;
	height: 10rem;
	background: linear-gradient(to bottom, transparent, var(--aura-void));
	pointer-events: none;
}

/* Shown while the module loads and if WebGL is unavailable entirely. */
.aura-mandala__fallback {
	position: absolute;
	inset: 0;
	opacity: 0;
	background:
		radial-gradient(52vmin 52vmin at 50% 52%, rgba(138, 43, 226, 0.45), rgba(0, 229, 255, 0.12) 52%, transparent 72%),
		radial-gradient(22vmin 22vmin at 50% 52%, rgba(212, 175, 55, 0.4), transparent 68%);
	filter: blur(18px);
	transition: opacity 0.6s var(--aura-ease);
}

.aura-mandala.is-fallback .aura-mandala__fallback,
.aura-mandala:not(.is-ready) .aura-mandala__fallback {
	opacity: 1;
}

.aura-mandala.is-ready .aura-mandala__fallback {
	opacity: 0;
}

/**
 * Content.
 *
 * pointer-events are off so a drag anywhere across the hero turns the mandala,
 * and back on for the links, which still need to be clickable. Without this the
 * copy block would swallow the drag over most of the section and the object
 * would feel broken.
 */
/* Wide enough that the headline breaks where the writer intended rather than
   where a 46rem column forces it. The paragraph is held narrower on its own,
   because a measure that suits a display line is unreadable for body copy. */
.aura-mandala__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 58rem;
	text-align: center;
	pointer-events: none;
}

.aura-mandala__content a,
.aura-mandala__content button {
	pointer-events: auto;
}

.aura-mandala__content::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -18% -16%;
	/* Barely there. The reference hero has no scrim at all: the plate is dark
	   enough that Cinzel capitals sit over it cleanly, and a heavy wash was
	   hiding the object the section exists to show. This is just enough to hold
	   the body copy over the gold centre. */
	background: radial-gradient(
		58% 50% at 50% 52%,
		rgba(7, 9, 19, 0.30) 0%,
		rgba(7, 9, 19, 0.16) 50%,
		rgba(7, 9, 19, 0) 100%
	);
	pointer-events: none;
}

/* text-display-lg. Cinzel is all capitals and sets wide, so it is capped at
   5.25rem and given a looser line height than a lowercase face would want. */
.aura-mandala__heading {
	margin: 0 0 1.5rem;
	font-size: clamp(2.9rem, 6.4vw, 5.25rem);
	line-height: 1.03;
	letter-spacing: -0.022em;
}

/* Cormorant. The reference sets this paragraph in the serif, not the body
   face, and the change of voice is most of what makes the hero feel written
   rather than filled in. */
.aura-mandala__text {
	margin: 0 auto 2.2rem;
	max-width: 36rem;
	font-family: var(--aura-serif);
	font-size: clamp(1.2rem, 1.9vw, 1.42rem);
	line-height: 1.6;
	color: var(--aura-ink-muted);
	opacity: 1;
}

.aura-mandala__note {
	margin: 2rem 0 0;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: var(--aura-ink-faint);
}

/* Short heroes drop the note before they drop a button.
 *
 * The height query alone was not enough. Since the hero's height is capped at
 * 70vw, a tall narrow layout gets a hero far shorter than its viewport — and a
 * phone asked for the desktop site reports a viewport 980 by 2178, so
 * max-height never matched while the hero itself was only 686px. The note then
 * had to share that with a display heading, a lede and two buttons, and ended
 * up sitting across the mandala.
 *
 * The aspect ratio is the honest test: it is true exactly when 70vw is the
 * constraint, which is exactly when the hero is short. */
@media (max-height: 800px), (max-aspect-ratio: 3 / 4) {
	.aura-mandala__note {
		display: none;
	}
}

/* A wide layout on a tall screen — which is a phone asked for the desktop site,
 * and almost nothing else.
 *
 * min-height caps the hero at 70vw there, so the box it is *allowed* to be is
 * short. The type inside it is not capped: it is sized from vw, so at a 980 to
 * 1200 pixel layout width the heading comes out near 77px, the lede near 23px
 * and the vertical padding near 200px for the pair. Together they overflow the
 * cap and push the section back towards the full-screen height the cap exists
 * to prevent — min-height sets a floor, never a ceiling, and content always
 * wins. That is why the height kept coming back after the canvas itself had
 * been brought under control: the canvas was never what was tall.
 *
 * min() against the existing clamp caps without disturbing it. The 700px floor
 * keeps a real phone out of this entirely, where the clamps already bottom out
 * and the type is the right size as it is.
 */
@media (max-aspect-ratio: 3 / 4) and (min-width: 700px) {
	.aura-mandala {
		padding-block: clamp(2.5rem, 5vw, 3.5rem);
	}

	.aura-mandala__heading {
		margin-bottom: 1rem;
		font-size: min(clamp(2.9rem, 6.4vw, 5.25rem), 3.4rem);
	}

	.aura-mandala__text {
		margin-bottom: 1.6rem;
		font-size: min(clamp(1.2rem, 1.9vw, 1.42rem), 1.2rem);
	}
}

/* Scroll cue: a hairline that fades in at both ends. */
.aura-mandala__cue {
	position: absolute;
	left: 50%;
	bottom: 2.5rem;
	width: 1px;
	height: 3rem;
	transform: translateX(-50%);
	background: linear-gradient(to bottom, transparent, rgba(167, 139, 250, 0.9), transparent);
	pointer-events: none;
}

.aura-mandala__actions {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
}

.aura-mandala--left .aura-mandala__content {
	text-align: left;
	justify-self: start;
}

.aura-mandala--left .aura-mandala__actions {
	justify-content: flex-start;
}

/* The affordance has to be stated: nothing about a rendered object says it
   can be dragged until you try. */
.aura-mandala__hint {
	display: block;
	margin-top: 1.6rem;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aura-ink-2);
	opacity: 0.7;
}

/* No drag on a touch screen worth advertising, and no hover to hint with. */
@media (pointer: coarse) {
	.aura-mandala__hint {
		display: none;
	}
}

/* =========================================================================
 * 6. Vastu compass
 * ====================================================================== */

.aura-compass {
	padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.aura-compass__heading {
	margin: 0 0 0.7rem;
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	letter-spacing: -0.015em;
}

.aura-compass__intro {
	margin: 0 0 2.5rem;
	max-width: 42rem;
	line-height: 1.65;
	opacity: 0.8;
}

.aura-compass__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.aura-compass__stage {
	position: relative;
	width: 100%;
	max-width: var(--aura-compass-size, 520px);
	margin-inline: auto;
	aspect-ratio: 1 / 1;
}

/**
 * Resting state, before the module has drawn anything.
 *
 * The stage reserves a square the size of the wheel, so until the canvas has a
 * frame on it the section is a large empty band with a divider above it — which
 * reads as a page that has failed rather than one that is still arriving. A
 * faint ring and hub say "a wheel belongs here" and cost nothing: it is one
 * pseudo-element that is removed the moment the real thing is ready.
 */
.aura-compass__stage::before {
	content: "";
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	border: 1px solid var(--aura-glass-border);
	box-shadow:
		inset 0 0 0 1px rgba(0, 229, 255, 0.06),
		0 0 60px -20px rgba(138, 43, 226, 0.5);
	background: radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.10), transparent 62%);
	opacity: 1;
	transition: opacity 0.6s var(--aura-ease);
}

.aura-compass.is-ready .aura-compass__stage::before {
	opacity: 0;
}

.aura-compass__canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: pan-y;
	/* Above the resting ring, so the drawn wheel replaces it rather than
	   compositing over a visible outline. */
	position: relative;
	z-index: 1;
}

.aura-compass__hub {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	gap: 0.2rem;
	width: 44%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	text-align: center;
	color: var(--aura-ink);
	background: color-mix(in srgb, var(--aura-paper) 82%, transparent);
	border: 1px solid var(--aura-line);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: none;
}

.aura-compass__hub-label {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.aura-compass__hub-sub {
	font-size: 0.68rem;
	opacity: 0.6;
}

.aura-compass__readout {
	position: relative;
	padding: 1.9rem;
	border-radius: var(--aura-radius);
	background: var(--aura-glass-bg);
	border: 1px solid var(--aura-glass-border);
	backdrop-filter: blur(var(--aura-glass-blur)) saturate(150%);
	-webkit-backdrop-filter: blur(var(--aura-glass-blur)) saturate(150%);
	box-shadow: 0 0 44px -18px var(--aura-zone-glow, var(--aura-gold));
	transition: box-shadow 0.5s var(--aura-ease);
}

.aura-compass__readout-abbr {
	margin: 0 0 0.35rem;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--aura-zone-glow, var(--aura-gold));
}

.aura-compass__readout-name {
	margin: 0 0 0.6rem;
	font-size: 1.32rem;
	line-height: 1.2;
}

.aura-compass__readout-meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-size: 0.84rem;
	opacity: 0.72;
}

.aura-compass__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
}

.aura-compass__readout-domain {
	margin: 0 0 0.75rem;
	font-size: 1.02rem;
	line-height: 1.5;
}

.aura-compass__readout-remedy {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	opacity: 0.75;
}

/* The crawlable zone legend. Real buttons, real text, keyboard reachable. */
.aura-compass__zones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 0.6rem;
	margin: 2.75rem 0 0;
	padding: 0;
	list-style: none;
}

.aura-compass__zone-btn {
	display: grid;
	gap: 0.15rem;
	width: 100%;
	padding: 0.85rem 1rem;
	text-align: left;
	border-radius: var(--aura-radius-sm);
	border: 1px solid transparent;
	border-left: 3px solid var(--aura-zone-tint, transparent);
	background: var(--aura-glass-bg);
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition:
		background-color 0.35s var(--aura-ease),
		border-color 0.35s var(--aura-ease),
		transform 0.35s var(--aura-ease);
}

.aura-compass__zone-btn:hover,
.aura-compass__zone-btn:focus-visible {
	background: var(--aura-glass-bg-strong);
	border-color: var(--aura-glass-border);
	border-left-color: var(--aura-zone-tint, var(--aura-gold));
	transform: translateY(-2px);
}

.aura-compass__zone-btn.is-active {
	background: color-mix(in srgb, var(--aura-zone-tint, var(--aura-gold)) 14%, transparent);
	border-color: color-mix(in srgb, var(--aura-zone-tint, var(--aura-gold)) 45%, transparent);
	border-left-color: var(--aura-zone-tint, var(--aura-gold));
}

.aura-compass__zone-btn strong {
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.75;
}

.aura-compass__zone-btn span {
	font-size: 0.95rem;
	font-weight: 600;
}

.aura-compass__zone-btn em {
	font-size: 0.85rem;
	font-style: normal;
	opacity: 0.68;
}

@media (max-width: 900px) {
	.aura-compass__layout {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
 * 7. Model + Spline stages
 * ====================================================================== */

.aura-model {
	position: relative;
	width: 100%;
	height: var(--aura-model-height, 520px);
	border-radius: var(--aura-radius);
	overflow: hidden;
}

.aura-model__canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: pan-y;
}

.aura-model__loader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border-radius: 50%;
	border: 2px solid var(--aura-glass-border);
	border-top-color: var(--aura-gold);
	animation: aura-spin 0.9s linear infinite;
}

.aura-model.is-loaded .aura-model__loader,
.aura-model.is-fallback .aura-model__loader {
	display: none;
}

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

.aura-spline {
	width: 100%;
	height: var(--aura-spline-height, 600px);
	border-radius: var(--aura-radius);
	overflow: hidden;
}

.aura-spline spline-viewer {
	display: block;
	width: 100%;
	height: 100%;
}

/* =========================================================================
 * 8. Direct answer blocks
 * ====================================================================== */

/**
 * The answer block is the most important element on the site: it is what an
 * answer engine quotes and what a sceptical buyer reads first. It earns real
 * design rather than a bordered box.
 *
 * Structure: a ghosted index number, a serif question, one large lead
 * sentence that carries the whole answer, then the mechanism and the result
 * under small-caps labels.
 */

.aura-answer {
	position: relative;
	max-width: 52rem;
	/* Tighter than the old open cards: a stack of collapsed rows wants to
	   read as a list, not as separate panels floating apart. */
	margin: 0 0 0.75rem;
	border-radius: var(--aura-radius);
	overflow: hidden;
	isolation: isolate;
	background:
		linear-gradient(
			160deg,
			color-mix(in srgb, var(--aura-gold) 7%, transparent) 0%,
			transparent 42%
		),
		var(--aura-glass-bg);
	border: 1px solid var(--aura-glass-border);
	backdrop-filter: blur(var(--aura-glass-blur)) saturate(150%);
	-webkit-backdrop-filter: blur(var(--aura-glass-blur)) saturate(150%);
	box-shadow: var(--aura-lift-1);
	transition:
		box-shadow 0.6s var(--aura-ease),
		border-color 0.6s var(--aura-ease),
		transform 0.5s var(--aura-ease);
}

/* A closed row still lifts on hover, so the stack reads as a set of cards you
   can pick up rather than a list of links. */
.aura-answer:not(.aura-answer--static):hover {
	transform: translateY(-3px);
}

/* The always-open variant keeps the original padding and spacing. */
.aura-answer--static {
	margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
	padding: clamp(2rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3.25rem);
	transition:
		box-shadow 0.6s var(--aura-ease),
		transform 0.6s var(--aura-ease);
}

.aura-answer--static:hover {
	transform: translateY(-3px);
}

.aura-answer:hover,
.aura-answer[open] {
	border-color: rgba(0, 229, 255, 0.35);
	box-shadow:
		var(--aura-lift-2),
		0 0 40px -14px rgba(0, 229, 255, 0.40);
}

/**
 * The oversized ghost index.
 *
 * The always-open variant gets this from its own .aura-answer__index, which it
 * can afford to blow up because nothing shares its line. The accordion cannot:
 * its index sits inside the <summary> next to the question. So the number is
 * printed a second time here, from data-index, purely as a decorative layer.
 *
 * aria-hidden is unnecessary — a pseudo-element's content is not exposed by
 * assistive technology in any browser that matters, and the real index is
 * already in the summary.
 */
.aura-answer:not(.aura-answer--static)::after {
	content: attr(data-index);
	position: absolute;
	top: -0.36em;
	right: 0.1em;
	z-index: -1;
	font-family: var(--aura-display);
	font-size: clamp(5rem, 13vw, 9rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--aura-amethyst);
	opacity: 0.11;
	pointer-events: none;
	user-select: none;
}

/* Hairline that runs the full height, gold into the water green. */
.aura-answer::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	z-index: 1;
	background: linear-gradient(180deg, var(--aura-gold), var(--aura-north) 75%, transparent);
}

/* -------------------------------------------------------------------------
 * Accordion
 *
 * Built on <details>, so the browser supplies keyboard operation, the correct
 * announcement, and find-in-page opening the right row. The answer stays in
 * the DOM when collapsed, so the FAQ structured data is unaffected.
 * ---------------------------------------------------------------------- */

.aura-answer__summary {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: clamp(1.35rem, 2.6vw, 1.9rem) clamp(1.5rem, 3.5vw, 2.5rem);
	cursor: pointer;
	list-style: none;
	transition: background-color 0.4s var(--aura-ease);
}

/* Remove the native disclosure triangle in every engine. */
.aura-answer__summary::-webkit-details-marker { display: none; }
.aura-answer__summary::marker { content: ""; }

.aura-answer__summary:hover {
	background: rgba(255, 255, 255, 0.03);
}

.aura-answer__summary:focus-visible {
	outline: 2px solid var(--aura-cyan);
	outline-offset: -3px;
	border-radius: var(--aura-radius);
}

/* Chevron, drawn from two borders so it needs no icon font. */
.aura-answer__chevron {
	flex: 0 0 auto;
	width: 0.62rem;
	height: 0.62rem;
	margin-left: auto;
	border-right: 2px solid var(--aura-cyan);
	border-bottom: 2px solid var(--aura-cyan);
	transform: rotate(45deg) translate(-0.12rem, -0.12rem);
	transition: transform 0.45s var(--aura-ease);
}

.aura-answer[open] .aura-answer__chevron {
	transform: rotate(225deg) translate(-0.12rem, -0.12rem);
}

/**
 * Smooth expand.
 *
 * `::details-content` plus `interpolate-size` is the only way to animate a
 * <details> to its natural height without JavaScript measuring it. Browsers
 * without it simply snap open, which is a perfectly good outcome and not a
 * broken one, so this stays a progressive enhancement.
 */
@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}

	.aura-answer::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size 0.5s var(--aura-ease),
			content-visibility 0.5s allow-discrete;
	}

	.aura-answer[open]::details-content {
		block-size: auto;
	}
}

/* Ghosted index. In the accordion it sits inline in the summary rather than
   as an oversized watermark, which would collide with a collapsed row. */
.aura-answer__index {
	flex: 0 0 auto;
	font-family: var(--aura-display);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--aura-gold);
	opacity: 0.65;
	user-select: none;
}

.aura-answer--static .aura-answer__index {
	position: absolute;
	top: -0.32em;
	right: 0.06em;
	z-index: -1;
	font-size: clamp(6rem, 16vw, 11rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	opacity: 0.10;
}

.aura-answer__q {
	margin: 0;
	max-width: 30ch;
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	line-height: 1.3;
}

.aura-answer--static .aura-answer__q {
	margin: 0 0 1.25rem;
	max-width: 22ch;
	font-size: clamp(1.5rem, 3.1vw, 2.15rem);
}

/* Body padding lives on the content wrapper, so a collapsed row has none. */
.aura-answer:not(.aura-answer--static) .aura-answer__a {
	padding: 0 clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.6rem, 3vw, 2.2rem);
	padding-left: calc(clamp(1.5rem, 3.5vw, 2.5rem) + 1.95rem);
}

.aura-answer__a {
	margin: 0;
}

.aura-answer__a p {
	margin: 0 0 1rem;
}

.aura-answer__a p:last-child {
	margin-bottom: 0;
}

/* The quotable sentence. Large, full opacity, its own measure. */
.aura-answer__lead {
	max-width: 34ch;
	font-size: clamp(1.12rem, 1.9vw, 1.42rem);
	line-height: 1.45;
	font-weight: 500;
	letter-spacing: -0.011em;
	color: var(--aura-ink);
}

.aura-answer__label {
	margin: 1.75rem 0 0.45rem !important;
	font-family: var(--aura-text);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--aura-gold);
}

.aura-answer__mechanism,
.aura-answer__result {
	max-width: 60ch;
	font-size: 1rem;
	line-height: 1.72;
	color: var(--aura-ink-2);
}

/* Fallback for enclosed [aura_answer]content[/aura_answer] usage. */
.aura-answer__a > p:first-child:not([class]) {
	font-size: clamp(1.12rem, 1.9vw, 1.42rem);
	line-height: 1.45;
	font-weight: 500;
	color: var(--aura-ink);
}

.aura-light .aura-answer {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* =========================================================================
 * 9. Reduced motion + print
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	[data-aura-reveal] {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}

	.aura-magnetic,
	.aura-glass,
	.aura-answer,
	.aura-compass__zone-btn {
		transition: none;
	}

	.aura-glass:hover,
	.aura-answer:hover {
		transform: none;
	}

	.aura-model__loader {
		animation: none;
	}
}

@media print {
	.aura-sphere__stage,
	.aura-mandala__stage,
	.aura-compass__stage,
	.aura-model,
	.aura-spline {
		display: none;
	}

	[data-aura-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
 * 10. North finder
 * ====================================================================== */

.aura-north {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.aura-north__heading {
	margin: 0 0 0.7rem;
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	letter-spacing: -0.015em;
}

.aura-north__intro {
	margin: 0 0 2rem;
	max-width: 44rem;
	line-height: 1.65;
	opacity: 0.8;
}

/* --- Step indicator --- */

.aura-north__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	counter-reset: aura-step;
}

.aura-north__steps li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 1rem 0.5rem 0.6rem;
	border-radius: 999px;
	border: 1px solid var(--aura-glass-border);
	background: var(--aura-glass-bg);
	font-size: 0.86rem;
	counter-increment: aura-step;
	transition: border-color 0.35s var(--aura-ease), background-color 0.35s var(--aura-ease);
}

.aura-north__steps li::before {
	content: counter(aura-step);
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--aura-glass-bg-strong);
	font-size: 0.74rem;
	font-weight: 700;
}

.aura-north__steps li.is-current {
	border-color: var(--aura-gold);
	background: color-mix(in srgb, var(--aura-gold) 12%, transparent);
}

.aura-north__steps li.is-current::before {
	background: var(--aura-gold);
	color: #fff8ef;
}

.aura-north__steps li.is-done::before {
	content: "\2713";
	background: var(--aura-north);
	color: #fff;
}

/* --- Search --- */

.aura-north__search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 0.75rem;
}

.aura-north__input {
	flex: 1 1 18rem;
	min-width: 0;
	padding: 0.95em 1.15em;
	border-radius: 999px;
	border: 1px solid var(--aura-glass-border);
	background: var(--aura-glass-bg);
	color: var(--aura-ink);
	font: inherit;
	font-size: 0.95rem;
}

.aura-north__input:focus-visible {
	outline: 2px solid var(--aura-gold);
	outline-offset: 2px;
}

.aura-north__search .aura-magnetic {
	padding-block: 0.85em;
}

.aura-north__status {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	opacity: 0.75;
}

.aura-north__status.is-error {
	color: var(--aura-south);
	opacity: 1;
}

/* Same trap as .aura-north__plan below: this list ships with `hidden` and the
   script reveals it only when a search returns something. An unguarded
   `display: grid` overrides the user agent's `display: none` and leaves an
   empty list holding its margin under the search box for ever. */
.aura-north__results:not([hidden]) {
	display: grid;
	gap: 0.35rem;
}

.aura-north__results {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.aura-north__results button {
	width: 100%;
	padding: 0.7rem 0.95rem;
	text-align: left;
	border-radius: var(--aura-radius-sm);
	border: 1px solid var(--aura-glass-border);
	background: var(--aura-glass-bg);
	color: inherit;
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
}

.aura-north__results button:hover,
.aura-north__results button:focus-visible {
	background: var(--aura-glass-bg-strong);
	border-color: var(--aura-gold);
}

/* --- Map stage --- */

.aura-north__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 620px;
	border-radius: var(--aura-radius);
	overflow: hidden;
	border: 1px solid var(--aura-glass-border);
	background: var(--aura-paper-2);
}

@media (max-width: 640px) {
	.aura-north__stage { aspect-ratio: 1 / 1; }
}

.aura-north__map {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Leaflet sets its own stacking; keep the wheel above it. */
.aura-north__wheel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 500;
	width: min(70%, 460px);
	aspect-ratio: 1 / 1;
	cursor: grab;
	touch-action: none;
}

.aura-north__wheel.is-dragging {
	cursor: grabbing;
}

.aura-north__wheel-canvas {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

/* `:not([hidden])` is load-bearing, not tidiness.
 *
 * The overlay ships with the `hidden` attribute and the script removes it only
 * once a floor plan has been uploaded. But `hidden` is implemented in the user
 * agent stylesheet as `display: none`, and ANY author `display` beats it — so a
 * plain `display: grid` here rendered the panel permanently. Opaque background,
 * z-index 400, covering the whole stage: the satellite map at z-index 1 was
 * never visible, while the wheel at z-index 500 stayed on top and made the
 * whole thing look like it was working. The map had not failed; it was behind
 * a door nobody could see. */
.aura-north__plan:not([hidden]) {
	display: grid;
	place-items: center;
}

.aura-north__plan {
	position: absolute;
	inset: 0;
	z-index: 400;
	background: var(--aura-paper);
}

.aura-north__plan-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	/* The script writes a translate and a scale here as the plan is dragged and
	   sized. No transition: a dragged thing has to stay under the finger. */
	transform-origin: center;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

/* The plan layer takes the drag, not the image, so the cursor is right across
   the whole stage and not only where the picture happens to reach. */
.aura-north.has-plan .aura-north__plan {
	cursor: grab;
	touch-action: none;
}

.aura-north__plan.is-dragging {
	cursor: grabbing;
}

/* --- Sizing the plan ---------------------------------------------------- */

/* Guarded: this ships hidden and the script reveals it when a plan is loaded.
   An unguarded display would have it on screen from the start, offering to
   resize a floor plan nobody has chosen yet. */
.aura-north__planzoom:not([hidden]) {
	display: flex;
}

.aura-north__planzoom {
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	font-size: 0.8rem;
	color: var(--aura-ink-muted);
}

.aura-north__planzoom input[type="range"] {
	flex: 1 1 auto;
	min-width: 0;
	accent-color: var(--aura-gold);
}

.aura-north__planreset {
	flex: 0 0 auto;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--aura-line);
	border-radius: 999px;
	background: transparent;
	color: var(--aura-ink-muted);
	font: inherit;
	font-size: 0.78rem;
	cursor: pointer;
}

.aura-north__planreset:hover,
.aura-north__planreset:focus-visible {
	border-color: rgba(212, 175, 55, 0.6);
	color: var(--aura-gold);
}

/* With a plan underneath, the wheel has to be read through.
   Opaque sectors hid the very drawing they are meant to be aligned to. */
.aura-north.has-plan .aura-north__wheel-canvas {
	opacity: 0.68;
}

/* With a plan loaded the map stays underneath, and the plan is laid on it.
 *
 * It used to be hidden, the plan shown upright on an opaque panel. But a plan
 * is drawn whichever way up its draughtsman chose, and the building it shows
 * stands at whatever angle it stands — so the bearing found on the satellite
 * view had nothing to hold the drawing to, and there was no way to turn it.
 * Now the drawing is see-through over the roof it shows, and is moved, sized
 * and turned until its walls sit on the walls underneath. The wheel keeps the
 * bearing it was given. */
.aura-north.has-plan .aura-north__plan {
	background: transparent;
}

.aura-north__plan-img {
	opacity: var(--aura-plan-opacity, 0.7);
}

.aura-north__planzoom output {
	min-width: 3.2rem;
	color: var(--aura-gold);
	font-variant-numeric: tabular-nums;
	text-align: end;
}

/* --- Marking the centre -------------------------------------------------
 *
 * Its own layer between the plan and the wheel, so the outline is drawn over
 * the drawing and under the zones.
 * --------------------------------------------------------------------- */

.aura-north__trace {
	position: absolute;
	inset: 0;
	/* Above the wheel (500), so the door, the named areas and the outline are
	   never hidden under a coloured sector. It takes no pointer events except
	   while something is being placed, so the wheel keeps its drag. */
	z-index: 550;
	width: 100%;
	height: 100%;
	/* Inert except while corners are being marked. The wheel keeps its rotation
	   drag and the plan keeps its pan the rest of the time. */
	pointer-events: none;
}

/* While marking, this layer takes everything. Without it the wheel swallows
   the middle of the stage and starts rotating, and the plan drags out from
   under the very marks being placed on it. */
.aura-north.is-marking .aura-north__trace {
	pointer-events: auto;
	cursor: crosshair;
	touch-action: none;
}

/* A press that travelled is a pan, not a corner. */
.aura-north.is-marking.is-panning .aura-north__trace,
.aura-north.is-door.is-panning .aura-north__trace,
.aura-north.is-area.is-panning .aura-north__trace {
	cursor: grabbing;
}

/* Marking the door: the same tap-to-place, drag-to-pan layer. The wheel stays
   in view but fades, because the pada ring is what the visitor is aiming at
   and the door usually sits under the wheel's outer edge. */
.aura-north.is-door .aura-north__trace,
.aura-north.is-area .aura-north__trace {
	pointer-events: auto;
	cursor: crosshair;
	touch-action: none;
}

.aura-north.is-door .aura-north__wheel,
.aura-north.is-door .aura-north__plan,
.aura-north.is-area .aura-north__wheel,
.aura-north.is-area .aura-north__plan {
	pointer-events: none;
}

.aura-north.is-door .aura-north__wheel-canvas,
.aura-north.is-area .aura-north__wheel-canvas {
	opacity: 0.45;
}

/* --- Naming areas ------------------------------------------------------- */

/* Ships hidden; only given a layout once revealed. */
.aura-north__areaform:not([hidden]) {
	display: flex;
}

.aura-north__areaform {
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	padding: 0.8rem 1rem;
	border: 1px solid rgba(0, 229, 255, 0.35);
	border-radius: 12px;
	background: rgba(0, 229, 255, 0.06);
}

.aura-north__areaform label {
	flex: 0 0 100%;
	color: var(--aura-ink-subtle);
	font-size: 0.8rem;
	font-weight: 600;
}

.aura-north__areaform input,
.aura-north__floor input {
	box-sizing: border-box;
	min-height: 2.6rem;
	padding: 0.5rem 0.8rem;
	border: 1px solid var(--aura-line);
	border-radius: 10px;
	background: rgba(7, 9, 19, 0.55);
	color: var(--aura-ink);
	font: inherit;
	font-size: 0.95rem;
}

.aura-north__areaform input {
	flex: 1 1 14rem;
	min-width: 0;
}

.aura-north__areas {
	margin: 0 0 1rem;
	padding: 0 0 0 1.6rem;
	color: var(--aura-ink-subtle);
	font-size: 0.9rem;
	line-height: 1.5;
}

.aura-north__areas li {
	margin: 0 0 0.3rem;
}

.aura-north__areas li::marker {
	color: var(--aura-cyan);
	font-weight: 700;
}

/* Once the room table is approved, a room in the wrong place is marked in the
   colour that means a problem, and one in the right place in gold. */
.aura-north__areas li.is-avoid::marker,
.aura-north__areas li.is-avoid span {
	color: var(--aura-alert);
}

.aura-north__areas li.is-good::marker {
	color: var(--aura-gold);
}

.aura-north__area-remove {
	margin-left: 0.5rem;
	padding: 0 0.45rem;
	border: 1px solid var(--aura-line);
	border-radius: 999px;
	background: transparent;
	color: var(--aura-ink-muted);
	font: inherit;
	line-height: 1.4;
	cursor: pointer;
}

.aura-north__area-remove:hover,
.aura-north__area-remove:focus-visible {
	border-color: var(--aura-alert);
	color: var(--aura-alert);
}

.aura-north__floor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	margin: 0 0 1rem;
	color: var(--aura-ink-subtle);
	font-size: 0.85rem;
}

.aura-north__floor em {
	color: var(--aura-ink-faint);
	font-style: normal;
}

.aura-north__floor input {
	flex: 1 1 16rem;
	min-width: 0;
}

/* --- The plot ----------------------------------------------------------- */

.aura-north__plot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.5rem;
	margin: 0 0 1rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--aura-line);
	border-radius: 12px;
	color: var(--aura-ink-subtle);
	font-size: 0.85rem;
}

.aura-north__plot legend {
	padding: 0 0.4rem;
	font-weight: 600;
}

.aura-north__plot legend em {
	color: var(--aura-ink-faint);
	font-style: normal;
	font-weight: 400;
}

.aura-north__plot-corner,
.aura-north__plot-roads {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
}

.aura-north__plot select {
	min-height: 2.4rem;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--aura-line);
	border-radius: 10px;
	background: rgba(7, 9, 19, 0.55);
	color: var(--aura-ink);
	color-scheme: dark;
	font: inherit;
}

.aura-north__plot input[type="checkbox"] {
	accent-color: var(--aura-gold);
}

/* The T-junction reading: the same bar as the door's, in the marker's amber. */
.aura-north__door--t {
	border-left-color: var(--aura-road);
	background: rgba(255, 180, 84, 0.08);
}

/* No display set: this ships with `hidden`, and the script reveals it. */
.aura-north__door {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--aura-gold);
	border-radius: 0 10px 10px 0;
	background: rgba(212, 175, 55, 0.08);
	color: var(--aura-ink);
	font-size: 0.92rem;
	line-height: 1.5;
}

.aura-north.is-marking .aura-north__wheel,
.aura-north.is-marking .aura-north__plan {
	pointer-events: none;
}

/* And the wheel steps aside altogether. Tracing corners through sixteen
   coloured sectors meant guessing where the walls were under them; the client
   found it hard, and it is. It returns, centred on the outline, the moment the
   outline is finished. */
.aura-north.is-marking .aura-north__wheel {
	visibility: hidden;
}

/* Guarded, for the reason written out at .aura-north__plan above: this ships
   with the `hidden` attribute and any unguarded `display` would defeat it. */
.aura-north__centre:not([hidden]) {
	display: block;
}

.aura-north__centre {
	margin: 1.25rem 0 0;
	padding: 1.1rem 1.25rem;
	border: 1px solid rgba(212, 175, 55, 0.35);
	border-radius: var(--aura-radius);
	background: var(--aura-glass-bg);
}

.aura-north__centre-title {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
	color: var(--aura-gold);
}

.aura-north__centre-text p {
	margin: 0 0 0.7rem;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--aura-ink-subtle);
}

.aura-north__centre-text p:last-child {
	margin-bottom: 0;
}

/* --- Before the overlay downloads ----------------------------------------
 *
 * A native <dialog>. No `display` is set on it anywhere: a closed dialog is
 * display:none in the user agent stylesheet, and an author display would show
 * it on every page load — the `hidden` trap again, in a form the hidden-
 * attribute check does not look for. Layout lives on the form inside it.
 *
 * Padding is on the contents, not the dialog, because a click whose target is
 * the dialog itself is read as a click on the backdrop and closes it.
 * --------------------------------------------------------------------- */

.aura-north__lead {
	width: min(34rem, calc(100vw - 2rem));
	max-height: calc(100dvh - 2rem);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 1px solid var(--aura-glass-border);
	border-radius: var(--aura-radius);
	background:
		radial-gradient(80% 50% at 50% 0%, rgba(138, 43, 226, 0.22), transparent 70%),
		var(--aura-paper-2);
	color: var(--aura-ink);
	box-shadow: 0 40px 120px -40px rgba(138, 43, 226, 0.8);
}

.aura-north__lead::backdrop {
	background: rgba(7, 9, 19, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.aura-north__lead-form,
.aura-north__lead-done {
	padding: clamp(1.4rem, 4vw, 2rem);
}

.aura-north__lead-title {
	margin: 0 0 0.5rem;
	font-family: var(--aura-display);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.15;
}

.aura-north__lead-intro {
	margin: 0 0 1.4rem;
	color: var(--aura-ink-subtle);
	font-size: 0.92rem;
	line-height: 1.55;
}

.aura-north__lead-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 0.9rem 1rem;
}

.aura-north__field {
	margin: 0;
}

.aura-north__field label,
.aura-north__use legend {
	display: block;
	margin: 0 0 0.35rem;
	color: var(--aura-ink-subtle);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.aura-north__optional {
	margin-left: 0.35rem;
	color: var(--aura-ink-faint);
	font-weight: 400;
}

.aura-north__field input,
.aura-north__field select {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--aura-line);
	border-radius: 10px;
	background: rgba(7, 9, 19, 0.55);
	color: var(--aura-ink);
	font: inherit;
	font-size: 0.95rem;
}

.aura-north__field select option {
	background: var(--aura-paper-2);
	color: var(--aura-ink);
}

.aura-north__field input:focus-visible,
.aura-north__field select:focus-visible {
	outline: 2px solid var(--aura-cyan);
	outline-offset: 1px;
	border-color: transparent;
}

.aura-north__lead [aria-invalid="true"] {
	border-color: var(--aura-alert);
}

.aura-north__use {
	margin: 1.1rem 0 0;
	padding: 0;
	border: 0;
}

/* Three choices as tappable rows. The radio stays a real radio — visible and
   keyboard-operable — so nothing about it has to be rebuilt. */
.aura-north__choice {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 0.45rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--aura-line);
	border-radius: 10px;
	cursor: pointer;
	font-size: 0.92rem;
	line-height: 1.35;
}

.aura-north__choice:has(input:checked) {
	border-color: rgba(212, 175, 55, 0.6);
	background: rgba(212, 175, 55, 0.08);
}

.aura-north__choice input,
.aura-north__consent input {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	accent-color: var(--aura-gold);
}

.aura-north__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 1.1rem 0 0.5rem;
	font-size: 0.9rem;
	line-height: 1.45;
	cursor: pointer;
}

.aura-north__consent input {
	margin-top: 0.15rem;
}

.aura-north__lead-small {
	margin: 0 0 0.75rem;
	color: var(--aura-ink-faint);
	font-size: 0.78rem;
	line-height: 1.5;
}

.aura-north__lead-small a {
	color: var(--aura-ink-subtle);
}

.aura-north__lead-status {
	min-height: 1.2em;
	margin: 0 0 0.5rem;
	color: var(--aura-alert);
	font-size: 0.85rem;
}

.aura-north__lead-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.aura-north__lead-done .aura-north__lead-actions {
	justify-content: flex-start;
}

/* Off-screen rather than display:none, which some bots check for. */
.aura-north__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* A caption under the stage. It used to be a pill floating over the bottom
   middle of the stage, which covered the front of whatever plan was loaded —
   the part being lined up and traced. */
.aura-north__hint {
	margin: 0.75rem auto 1.25rem;
	max-width: 40rem;
	color: var(--aura-ink-muted);
	font-size: 0.85rem;
	line-height: 1.5;
	text-align: center;
}

.aura-north__hint:empty {
	display: none;
}

/* While corners are being marked the hint is the instruction being followed,
   so it is lifted out of the caption register. */
.aura-north.is-marking .aura-north__hint {
	color: var(--aura-gold);
}

/* --- Controls --- */

.aura-north__controls {
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0 0;
}

.aura-north__rotate {
	display: grid;
	gap: 0.5rem;
	font-size: 0.88rem;
}

.aura-north__rotate input[type="range"] {
	width: 100%;
	accent-color: var(--aura-gold);
}

.aura-north__reading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
	padding: 1rem 1.25rem;
	border-radius: var(--aura-radius-sm);
	background: var(--aura-glass-bg);
	border: 1px solid var(--aura-glass-border);
}

.aura-north__reading strong {
	font-size: 1.6rem;
	line-height: 1;
	color: var(--aura-gold);
	font-variant-numeric: tabular-nums;
}

.aura-north__reading span {
	font-size: 0.92rem;
	opacity: 0.8;
}

.aura-north__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* --- Result --- */

.aura-north__result {
	margin-top: 2.25rem;
}

.aura-north__result h3 {
	margin: 0 0 1rem;
	font-size: 1.2rem;
}

.aura-north__sides {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.aura-north__sides li {
	display: grid;
	gap: 0.2rem;
	padding: 0.9rem 1.1rem;
	border-radius: var(--aura-radius-sm);
	border: 1px solid var(--aura-glass-border);
	border-left: 3px solid var(--aura-zone-tint, var(--aura-gold));
	background: var(--aura-glass-bg);
}

.aura-north__sides strong {
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.7;
}

.aura-north__sides span {
	font-size: 0.95rem;
	font-weight: 600;
}

.aura-north__sides em {
	font-size: 0.85rem;
	font-style: normal;
	opacity: 0.7;
}

.aura-north__note {
	max-width: 42rem;
	margin: 0 0 1.5rem;
	font-size: 0.94rem;
	line-height: 1.6;
	opacity: 0.78;
}

.aura-north__credit {
	margin: 1.75rem 0 0;
	font-size: 0.78rem;
	opacity: 0.55;
}

.aura-north__credit a { color: inherit; }

.aura-north.is-fallback .aura-north__stage,
.aura-north.is-fallback .aura-north__controls {
	display: none;
}

/* Screen-reader-only, in case the parent theme does not define it. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
 * 11. Paid report — offer block and download
 * ====================================================================== */

.aura-north__offer {
	position: relative;
	margin: 2rem 0 1.75rem;
	padding: clamp(1.6rem, 3.5vw, 2.5rem);
	border-radius: var(--aura-radius);
	overflow: hidden;
	isolation: isolate;
	background:
		linear-gradient(
			152deg,
			color-mix(in srgb, var(--aura-gold) 12%, transparent) 0%,
			transparent 55%
		),
		var(--aura-paper);
	border: 1px solid color-mix(in srgb, var(--aura-gold) 30%, transparent);
	box-shadow: var(--aura-lift-1);
}

.aura-north__offer::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: linear-gradient(180deg, var(--aura-gold), var(--aura-brass));
}

.aura-north__offer-title {
	margin: 0 0 0.7rem;
	font-family: var(--aura-display);
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: clamp(1.25rem, 2.4vw, 1.7rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	max-width: 24ch;
}

.aura-north__offer-text {
	margin: 0 0 1.4rem;
	max-width: 56ch;
	font-size: 0.96rem;
	line-height: 1.68;
	color: var(--aura-ink-2);
}

.aura-north__offer-actions {
	margin: 0;
}

/* --- Delivery on the thank-you page and in My Account --- */

.aura-report {
	margin: 2.5rem 0;
	padding: clamp(1.6rem, 3.5vw, 2.5rem);
	border-radius: var(--aura-radius);
	background:
		linear-gradient(
			152deg,
			color-mix(in srgb, var(--aura-gold) 10%, transparent) 0%,
			transparent 55%
		),
		var(--aura-paper);
	border: 1px solid color-mix(in srgb, var(--aura-gold) 28%, transparent);
	box-shadow: var(--aura-lift-1);
}

.aura-report__heading {
	margin: 0 0 0.6rem;
	font-family: var(--aura-display);
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	letter-spacing: -0.02em;
}

.aura-report__intro {
	margin: 0 0 1.4rem;
	max-width: 52ch;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--aura-ink-2);
}

.aura-report__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.aura-report__status {
	margin: 0;
	font-size: 0.88rem;
	color: var(--aura-ink-2);
}

.aura-magnetic[disabled] {
	opacity: 0.55;
	pointer-events: none;
}

/* =========================================================================
 * 12. Product cards
 *
 * A remedial object is photographed on a plain ground, which on a dark page
 * leaves it looking pasted on. The fix is to light the card from behind in the
 * object's own zone colour, so the pyramid appears to sit in the light it is
 * meant to carry rather than on top of a rectangle.
 *
 * The accent travels as an RGB triple in --aura-product-rgb, set per card, so
 * one rule serves an amethyst crystal, a copper pyramid and a brass yantra.
 * Defaults to amethyst when a card does not declare one.
 * ====================================================================== */

.aura-product-card {
	--aura-product-rgb: 138 43 226;

	/* Same reason as .aura-teaser: the media runs to the card's edge, and the
	   body carries its own padding. */
	padding: 0;

	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 22px;
	box-shadow: 0 0 0 1px rgb(var(--aura-product-rgb) / 0.22);
	transition:
		transform 0.5s var(--aura-ease),
		box-shadow 0.5s var(--aura-ease);
}

.aura-product-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background:
		radial-gradient(70% 60% at 50% 46%, rgb(var(--aura-product-rgb) / 0.24), transparent 72%),
		linear-gradient(160deg, #140e28, #0a0817);
}

/**
 * The light itself: a soft pool of the accent behind where the object stands.
 * Blurred rather than a gradient stop, so its edge never lands on a pixel
 * boundary and band.
 */
.aura-product-card__media::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 48%;
	width: 62%;
	height: 52%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgb(var(--aura-product-rgb) / 0.42);
	filter: blur(34px);
	transition: transform 0.7s var(--aura-ease);
}

.aura-product-card__media img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
}

/**
 * Veil.
 *
 * The product photography is shot on a pale studio ground, which on this page
 * would otherwise read as a bright rectangle pasted onto a dark card. The
 * light pool behind the image cannot help with that, because a photograph is
 * opaque and hides whatever is behind it.
 *
 * So the light is brought round to the front instead: the accent washes in
 * from the top, and the four edges fall away into the card colour. The
 * photograph keeps its subject and loses its border.
 */
.aura-product-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		radial-gradient(78% 58% at 50% 6%, rgb(var(--aura-product-rgb) / 0.30), transparent 66%),
		radial-gradient(120% 96% at 50% 46%, transparent 42%, rgba(10, 8, 23, 0.55) 78%, #0a0817 100%);
	mix-blend-mode: normal;
	transition: opacity 0.5s var(--aura-ease);
}

.aura-product-card:hover .aura-product-card__media::after {
	opacity: 0.86;
}

.aura-product-card:hover {
	transform: translateY(-6px);
	box-shadow:
		0 0 0 1px rgb(var(--aura-product-rgb) / 0.45),
		0 24px 60px -22px rgb(var(--aura-product-rgb) / 0.55);
}

.aura-product-card:hover .aura-product-card__media::before {
	transform: translate(-50%, -50%) scale(1.12);
}

.aura-product-card__body {
	padding: 1.15rem 1.25rem 1.35rem;
}

.aura-product-card__zone {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.78rem;
	color: var(--aura-ink-2);
}

.aura-product-card__price {
	display: block;
	margin-top: 0.35rem;
	font-size: 1.05rem;
	color: rgb(var(--aura-product-rgb));
}

/**
 * WooCommerce loop.
 *
 * The shop archive renders its own markup, so the same treatment is attached
 * to the classes Woo actually emits. The thumbnail is lifted above the glow by
 * the z-index; without it the pool paints over the photograph.
 */
/* The grid.
 *
 * This was missing, and WooCommerce's own layout stylesheet filled the gap:
 * ul.products uses floats with percentage widths and negative margins, which
 * on this layout pushed the first card off the left edge and the third past
 * the right. The cards were styled and the grid holding them was not.
 *
 * Grid, not floats. The cards size themselves, the gap is a gap rather than a
 * margin to subtract, and nothing can escape the container. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 1.75rem;
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

/* Woo sets width and float per column count. Undo both — the grid decides. */
.woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

.woocommerce ul.products li.product {
	--aura-product-rgb: 138 43 226;

	position: relative;
	overflow: hidden;
	border-radius: 22px;
	box-shadow: 0 0 0 1px rgb(var(--aura-product-rgb) / 0.22);
	background:
		radial-gradient(70% 42% at 50% 22%, rgb(var(--aura-product-rgb) / 0.20), transparent 70%),
		linear-gradient(160deg, #140e28, #0a0817);
	transition:
		transform 0.5s var(--aura-ease),
		box-shadow 0.5s var(--aura-ease);
}

/**
 * Woo wraps the thumbnail and the title in one link. Making that link the
 * positioning context lets the veil cover the photograph and stop short of the
 * price, which must stay at full contrast.
 */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	position: relative;
	display: block;
}

.woocommerce ul.products li.product img {
	position: relative;
	z-index: 1;
	width: 100%;
	/* Square, cropped. Woo ships whatever the uploader did, and the catalogue
	   photographs run from 860x860 to 928x1152 — left alone, one card was half
	   again as tall as the one beside it. */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin-bottom: 0.9rem;
}

/* --- The text under the photograph ------------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0 1.2rem;
	font-family: var(--aura-display);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--aura-ink);
}

.woocommerce ul.products li.product .price {
	display: block;
	padding: 0 1.2rem;
	margin-bottom: 1rem;
	color: var(--aura-gold);
	font-size: 1rem;
	font-weight: 700;
}

.woocommerce ul.products li.product .price del { opacity: 0.55; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* =======================================================================
 * The single product page
 *
 * There was nothing here at all. WooCommerce's own template rendered into a
 * page with no container, so the description ran from one edge of the screen to
 * the other, the tabs arrived as pale browser defaults, and the summary sat in
 * a column of empty dark space beside a photograph half the width of the page.
 *
 * Everything below is Woo's markup styled by its own class names. No template
 * is overridden: a copied template is a template that stops getting WooCommerce's
 * fixes, and a broken one takes a shop down.
 * ==================================================================== */

.woocommerce div.product {
	max-width: 1160px;
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
}

@media (min-width: 60rem) {
	.woocommerce div.product {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"gallery summary"
			"tabs    tabs"
			"related related";
		gap: clamp(2rem, 4vw, 3.5rem);
		align-items: start;
	}

	.woocommerce div.product .woocommerce-product-gallery { grid-area: gallery; }
	.woocommerce div.product .summary { grid-area: summary; }
	.woocommerce div.product .woocommerce-tabs { grid-area: tabs; }
	.woocommerce div.product .related { grid-area: related; }
}

.woocommerce div.product .woocommerce-product-gallery {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	border-radius: var(--aura-radius);
	display: block;
}

.woocommerce div.product .summary {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.woocommerce div.product .product_title {
	font-family: var(--aura-display);
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 2.9rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
	text-wrap: balance;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0 0 1.4rem;
	color: var(--aura-gold);
	font-size: 1.5rem;
	font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: 1.8rem;
	font-family: var(--aura-serif);
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--aura-ink-subtle);
}

/* The quantity box and the buy button sit on one line. */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 2rem;
}

.woocommerce div.product form.cart .quantity input.qty {
	width: 4.5rem;
	min-height: 48px;
	padding: 0 0.6rem;
	border: 1px solid var(--aura-line);
	border-radius: 12px;
	background: var(--aura-glass-bg);
	color: var(--aura-ink);
	font: inherit;
	text-align: center;
}

/* Same decision as the loop button: Woo's rectangle, the header's colour. */
.woocommerce div.product form.cart button.single_add_to_cart_button {
	padding: 0.72em 1.6em;
	border: 0;
	border-radius: 3px;
	line-height: 1;
	background: linear-gradient(112deg, #6a1fb5, var(--aura-amethyst) 38%, #1b6fd6 74%, var(--aura-cyan));
	background-size: 220% 100%;
	background-position: 0% 50%;
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	box-shadow:
		0 10px 30px -12px rgba(138, 43, 226, 0.75),
		0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	cursor: pointer;
	transition:
		background-position 0.9s var(--aura-ease),
		box-shadow 0.45s var(--aura-ease);
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:focus-visible {
	background-position: 100% 50%;
	color: #ffffff;
	box-shadow:
		0 18px 48px -14px rgba(138, 43, 226, 0.95),
		0 0 28px -4px rgba(0, 229, 255, 0.55),
		0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}

.woocommerce div.product .product_meta {
	padding-top: 1.2rem;
	border-top: 1px solid var(--aura-line);
	font-size: 0.85rem;
	color: var(--aura-ink-faint);
}

.woocommerce div.product .product_meta a { color: var(--aura-ink-muted); }

/* --- Tabs ---------------------------------------------------------------
   Woo's defaults are pale tabs with a drawn border. On this ground they read
   as a browser dialogue dropped into the page. */

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1.6rem;
	padding: 0 0 0.6rem;
	border-bottom: 1px solid var(--aura-line);
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none !important;
	display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 999px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--aura-ink-muted);
	font-weight: 600;
	font-size: 0.88rem;
	text-decoration: none;
}

/* Woo gives the active tab a white fill on `li.active`, which outranks the
   plain `li` rule above whatever order the files load in. Named here so the
   active tab is ours too. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border: 0;
	background: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	border-color: rgba(212, 175, 55, 0.5);
	color: var(--aura-gold);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	background: rgba(212, 175, 55, 0.08);
}

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: 46rem;
	color: var(--aura-ink-subtle);
	line-height: 1.75;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-family: var(--aura-display);
	font-weight: 400;
	font-size: 1.6rem;
	margin: 0 0 1rem;
}

.woocommerce div.product .woocommerce-tabs .panel em { color: var(--aura-ink); }

/* --- Related ------------------------------------------------------------ */

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	font-family: var(--aura-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 1rem 0 1.6rem;
}

/* --- Notices ------------------------------------------------------------ */

/* "Added to your cart" and its siblings.
 *
 * These rules existed and never applied. woocommerce.css loads after this
 * file and uses the same bare class, so on equal specificity it won: the
 * notice came out as Woo's pale slab with grey text, edge to edge, and the
 * focus ring WooCommerce triggers on it drew a cyan box round the lot. The
 * `body` prefix is what makes them count.
 *
 * Still prominent — it confirms something the visitor just did — but in the
 * site's material: glass, the amethyst edge, a coloured rule down the left,
 * and the button that was just pressed. */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem 1rem 3.25rem;
	border: 1px solid var(--aura-glass-border);
	border-left: 3px solid var(--aura-gold);
	border-radius: var(--aura-radius-sm);
	background: var(--aura-glass-bg-strong);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 18px 50px -26px rgba(138, 43, 226, 0.7);
	color: var(--aura-ink);
	font-size: 0.95rem;
	line-height: 1.5;
}

body .woocommerce-info {
	border-left-color: var(--aura-cyan);
}

/* Errors keep a colour that means error. Gold would read as success. */
body .woocommerce-error {
	border-left-color: var(--aura-alert);
}

/* Woo's icon, centred on the bar and in the bar's colour. */
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
	top: 50%;
	left: 1.2rem;
	transform: translateY(-50%);
}

body .woocommerce-message::before { color: var(--aura-gold); }
body .woocommerce-info::before { color: var(--aura-cyan); }
body .woocommerce-error::before { color: var(--aura-alert); }

/* WooCommerce focuses the notice so a screen reader announces it. It is not
   in the tab order and there is nothing to operate, so the ring it drew round
   the whole bar marked nothing a visitor could use. */
body .woocommerce-message[tabindex="-1"]:focus,
body .woocommerce-info[tabindex="-1"]:focus,
body .woocommerce-error[tabindex="-1"]:focus {
	outline: none;
}

/* "View cart": the shop's add-to-cart button, so the next step looks like the
   one just taken. */
body .woocommerce-message .button,
body .woocommerce-info .button {
	float: right;
	margin: -0.3rem 0 -0.3rem 1rem;
	padding: 0.618em 1em;
	border: 0;
	border-radius: 3px;
	background: linear-gradient(112deg, #6a1fb5, var(--aura-amethyst) 38%, #1b6fd6 74%, var(--aura-cyan));
	background-size: 220% 100%;
	background-position: 0% 50%;
	color: #ffffff;
	font-size: 100%;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	box-shadow:
		0 10px 30px -12px rgba(138, 43, 226, 0.75),
		0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	transition: background-position 0.9s var(--aura-ease);
}

body .woocommerce-message .button:hover,
body .woocommerce-message .button:focus-visible,
body .woocommerce-info .button:hover,
body .woocommerce-info .button:focus-visible {
	background-position: 100% 50%;
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	body .woocommerce-message .button,
	body .woocommerce-info .button {
		transition: none;
	}
}

/* --- The shop's frame -------------------------------------------------------
 *
 * The notice, the result count, the sort menu and the grid are WooCommerce's
 * and sit straight in the page, so each was framed by something different:
 * the first three ran to the edges of the window while the cards sat in a
 * column and the copy below sat in .wrap. Three left edges on one screen.
 *
 * This gutter is .wrap's arithmetic — 1160px wide, 1.5rem inside — written as
 * a margin, so all four land on exactly the edges the copy above and below
 * them uses, whatever width they are given.
 * --------------------------------------------------------------------- */

.woocommerce-shop .woocommerce-notices-wrapper,
.woocommerce-shop .woocommerce-result-count,
.woocommerce-shop .woocommerce-ordering,
.woocommerce-shop ul.products,
.tax-product_cat .woocommerce-notices-wrapper,
.tax-product_cat .woocommerce-result-count,
.tax-product_cat .woocommerce-ordering,
.tax-product_cat ul.products {
	--aura-wrap-gutter: max(1.5rem, calc((100% - 1160px) / 2 + 1.5rem));
	margin-inline: var(--aura-wrap-gutter);
}

/* "Showing all 3 results" and the sort menu, in the site's voice.
 *
 * The count is a caption, not a heading: muted and small. The sort menu was
 * the browser's own white control on a dark page. color-scheme: dark asks the
 * browser for its dark rendering of the arrow and the dropdown list, so the
 * native control — keyboard behaviour, mobile picker and all — is kept and
 * only its paint changes. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-block: 0 1.5rem;
}

.woocommerce .woocommerce-result-count {
	line-height: 2.6rem;
	color: var(--aura-ink-muted);
	font-size: 0.9rem;
	letter-spacing: 0.01em;
}

.woocommerce .woocommerce-ordering select {
	min-height: 2.6rem;
	padding: 0.45rem 2rem 0.45rem 1rem;
	border: 1px solid var(--aura-glass-border);
	border-radius: 999px;
	background-color: var(--aura-glass-bg-strong);
	color: var(--aura-ink);
	color-scheme: dark;
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}

.woocommerce .woocommerce-ordering select:hover {
	border-color: rgba(212, 175, 55, 0.5);
}

.woocommerce .woocommerce-ordering select option {
	background: var(--aura-paper-2);
	color: var(--aura-ink);
}

/* --- Notices ----------------------------------------------------------------
 *
 * "Added to your cart" is WooCommerce's block notice: a white slab with a
 * coloured outline, edge to edge, on a dark page. It stays prominent — it is
 * the confirmation someone just acted on — but in the site's own material:
 * the glass film, the amethyst edge, a gold rule for success, and the same
 * button as the one that was just pressed.
 *
 * The doubled class outranks WooCommerce's `.notice-banner.is-success`.
 * --------------------------------------------------------------------- */

body .wc-block-components-notice-banner.wc-block-components-notice-banner {
	align-items: center;
	gap: 0.9rem;
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--aura-glass-border);
	border-left: 3px solid var(--aura-gold);
	border-radius: var(--aura-radius-sm);
	background: var(--aura-glass-bg-strong);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 18px 50px -26px rgba(138, 43, 226, 0.7);
	color: var(--aura-ink);
	font-size: 0.95rem;
}

/* Errors keep a colour that means error. Gold would read as success. */
body .wc-block-components-notice-banner.wc-block-components-notice-banner.is-error {
	border-left-color: var(--aura-alert);
}

body .wc-block-components-notice-banner.is-success > svg {
	background-color: var(--aura-gold);
	fill: var(--aura-void);
}

body .wc-block-components-notice-banner.is-info > svg {
	background-color: var(--aura-cyan);
	fill: var(--aura-void);
}

body .wc-block-components-notice-banner .wc-block-components-notice-banner__content {
	color: var(--aura-ink);
}

/* "View cart": the shop's add-to-cart button, so the next step looks like the
   one just taken. */
body .wc-block-components-notice-banner .wc-block-components-notice-banner__content .wc-forward {
	float: right;
	margin: -0.25rem 0 -0.25rem 1rem;
	padding: 0.618em 1em;
	border: 0;
	border-radius: 3px;
	background: linear-gradient(112deg, #6a1fb5, var(--aura-amethyst) 38%, #1b6fd6 74%, var(--aura-cyan));
	background-size: 220% 100%;
	background-position: 0% 50%;
	color: #ffffff;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	opacity: 1;
	box-shadow:
		0 10px 30px -12px rgba(138, 43, 226, 0.75),
		0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	transition: background-position 0.9s var(--aura-ease);
}

body .wc-block-components-notice-banner .wc-block-components-notice-banner__content .wc-forward:hover,
body .wc-block-components-notice-banner .wc-block-components-notice-banner__content .wc-forward:focus-visible {
	background-position: 100% 50%;
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	body .wc-block-components-notice-banner .wc-block-components-notice-banner__content .wc-forward {
		transition: none;
	}
}

/* --- Add to cart --------------------------------------------------------
 *
 * Woo's default button is a pale pill on a light grey ground. On this site it
 * arrived as a white slab under three dark glass cards and was the first thing
 * anyone noticed. It takes the magnetic button's shape instead, without the
 * script: this one has to keep working if JavaScript does not.
 * --------------------------------------------------------------------- */

/* WooCommerce's own shape, in the brand's colour.
 *
 * This went through a pill in amethyst, which sank into a card that is already
 * an amethyst glow, and then a gold outline, which read as a second price. The
 * client's answer was the right one: keep the default button exactly where and
 * what shape it was — a compact rectangle sitting left under the price, which
 * is where a buy button belongs and where every shop puts it — and change only
 * the colour, to the one the header's call to action already uses.
 *
 * So the geometry here is Woo's. Only the paint is ours. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	/* WooCommerce's own geometry, to the number.
	 *
	 * The previous attempt set a 44px minimum height AND vertical padding AND a
	 * line-height, and the three stacked into a slab twice the size of the
	 * button it was meant to replace. Woo's default is 0.618em by 1em on a
	 * line-height of 1, which is the compact rectangle the client asked to keep.
	 *
	 * Nothing here sets a height. The padding is the height. */
	display: inline-block;
	/* Woo's margin too, which is none — and this is where the shape lives.
	 *
	 * With no margin the button sits tight in the card's bottom-left corner,
	 * and the card is overflow: hidden with a 22px radius, so the card itself
	 * rounds the button's lower-left corner into its own curve. That tucked-in
	 * tab is the shape the client circled. Given a margin, the same button
	 * floats free of the corner and is just a small rectangle. */
	margin: 0;
	padding: 0.618em 1em;
	border: 0;
	border-radius: 3px;
	/* The magnetic button's gradient, not the header pill's.
	 *
	 * Same paint the primary call to action uses everywhere else on the site —
	 * amethyst running into cyan, sliding across on hover. The geometry stays
	 * WooCommerce's. */
	background: linear-gradient(112deg, #6a1fb5, var(--aura-amethyst) 38%, #1b6fd6 74%, var(--aura-cyan));
	background-size: 220% 100%;
	background-position: 0% 50%;
	color: #ffffff;
	font-family: inherit;
	/* WooCommerce's own type, to the number — and this is the part that was
	 * wrong, not the padding.
	 *
	 * The padding above is in em. So font-size is not a type choice here, it is
	 * the button's scale: dropping 100% to 0.92rem took about eight per cent off
	 * the width AND the height AND both paddings at once. The result was a
	 * visibly smaller, tighter button whose 3px corners then read as sharper
	 * than the one it replaced — which is exactly what the client kept pointing
	 * at and calling a different shape. It was. The numbers below are Woo's. */
	font-size: 100%;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	box-shadow:
		0 10px 30px -12px rgba(138, 43, 226, 0.75),
		0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	transition:
		background-position 0.9s var(--aura-ease),
		box-shadow 0.45s var(--aura-ease);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus-visible {
	background-position: 100% 50%;
	color: #ffffff;
	box-shadow:
		0 18px 48px -14px rgba(138, 43, 226, 0.95),
		0 0 28px -4px rgba(0, 229, 255, 0.55),
		0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}

/* "View cart" appears beside it once something is added. Quieter, so the two
   do not compete for the same press. */
.woocommerce ul.products li.product .added_to_cart {
	background: transparent;
	box-shadow: none;
	border: 1px solid var(--aura-line);
	color: var(--aura-ink-muted);
}

.woocommerce ul.products li.product .added_to_cart:hover {
	filter: none;
	border-color: rgba(212, 175, 55, 0.6);
	color: var(--aura-gold);
}

.woocommerce ul.products li.product .button.loading::after {
	border-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product .button {
		transition: none;
	}

	.woocommerce ul.products li.product .button:hover {
		transform: none;
	}
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img + * {
	position: relative;
	z-index: 3;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 2;
	/* Only over the square thumbnail, never over the title beneath it. */
	aspect-ratio: 1 / 1;
	pointer-events: none;
	background:
		radial-gradient(78% 58% at 50% 6%, rgb(var(--aura-product-rgb) / 0.30), transparent 66%),
		radial-gradient(120% 96% at 50% 46%, transparent 42%, rgba(10, 8, 23, 0.55) 78%, #0a0817 100%);
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-6px);
	box-shadow:
		0 0 0 1px rgb(var(--aura-product-rgb) / 0.45),
		0 24px 60px -22px rgb(var(--aura-product-rgb) / 0.55);
}

@media (prefers-reduced-motion: reduce) {
	.aura-product-card,
	.woocommerce ul.products li.product {
		transition: none;
	}

	.aura-product-card:hover,
	.woocommerce ul.products li.product:hover {
		transform: none;
	}

	.aura-product-card:hover .aura-product-card__media::before {
		transform: translate(-50%, -50%);
	}
}

/* =========================================================================
 * 13. Site header
 *
 * The one place in this stylesheet that targets ZenSoul's own classes rather
 * than .aura-*. Overriding the parent's header TEMPLATE would mean copying a
 * file that reads a dozen theme options and loads four more template parts,
 * and a mistake in it takes the live header down. Restyling what the parent
 * already renders cannot: the worst case is that a rule does not apply.
 *
 * What the parent gives us: header.top_panel, .sc_layouts_logo with .logo_text
 * and .logo_slogan, and .sc_layouts_menu_default holding the main menu.
 * ====================================================================== */

.top_panel {
	position: sticky;
	top: 0;
	z-index: 900;

	background: rgba(10, 8, 23, 0.72);
	backdrop-filter: blur(var(--aura-glass-blur)) saturate(150%);
	-webkit-backdrop-filter: blur(var(--aura-glass-blur)) saturate(150%);

	/* The glowing edge, not a grey rule. This is what keeps the bar reading
	   as lit glass rather than as a toolbar. */
	border-bottom: 1px solid var(--aura-glass-border);
	box-shadow: 0 18px 44px -30px rgba(138, 43, 226, 0.55);
}

/* --- Logo ------------------------------------------------------------- */

/**
 * The mark.
 *
 * A lit disc with the bindu at its centre — the same object the hero renders
 * in 3D, reduced to the one thing that survives at 36 pixels. Drawn entirely
 * in CSS on the logo link's ::before, so it appears on the live site without
 * uploading an image or touching ZenSoul's template. If a real logo image is
 * set in the Customizer, ZenSoul renders an <img> instead of .logo_text and
 * this rule stops applying on its own.
 */
/* A grid, not a flex row: the name and the slogan are two separate spans and
   flex would lay them side by side. Two rows in the second column stacks them
   while the mark spans both. */
.top_panel .sc_layouts_logo a {
	display: inline-grid;
	grid-template-columns: auto auto;
	align-items: center;
	column-gap: 0.75rem;
}

.top_panel .sc_layouts_logo a::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / -1;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid rgba(0, 229, 255, 0.35);
	background:
		/* The bindu. Hard stops, so it stays a dot and not a smudge. */
		radial-gradient(circle at 50% 50%, var(--aura-gold) 0 3.5px, transparent 4px),
		/* The aura around it. */
		radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.9), rgba(0, 229, 255, 0.35) 58%, transparent 74%);
	box-shadow:
		inset 0 0 14px rgba(138, 43, 226, 0.55),
		0 0 12px -2px rgba(212, 175, 55, 0.5);
	transition: transform 0.7s var(--aura-ease);
}

.top_panel .sc_layouts_logo a:hover::before {
	transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
	.top_panel .sc_layouts_logo a::before {
		transition: none;
	}

	.top_panel .sc_layouts_logo a:hover::before {
		transform: none;
	}
}

.top_panel .sc_layouts_logo .logo_text {
	grid-column: 2;
	font-family: var(--aura-display);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aura-ink);
}

/* Under the name, not beside it: side by side the two read as one long
   phrase and the brand stops being a brand. */
.top_panel .sc_layouts_logo .logo_slogan {
	grid-column: 2;
	display: block;
	font-family: var(--aura-display);
	font-style: italic;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: var(--aura-ink-2);
}

/* --- Navigation ------------------------------------------------------- */

.top_panel .sc_layouts_menu_default > ul > li > a {
	position: relative;
	font-family: var(--aura-text);
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--aura-ink-2);
	transition: color 0.35s var(--aura-ease);
}

.top_panel .sc_layouts_menu_default > ul > li > a:hover,
.top_panel .sc_layouts_menu_default > ul > li > a:focus-visible {
	color: var(--aura-ink);
}

/**
 * Current page marker.
 *
 * A dot rather than an underline: the nav sits directly above a hero whose
 * light spills upward, and a full-width rule under a word competes with it.
 */
.top_panel .sc_layouts_menu_default > ul > li.current-menu-item > a,
.top_panel .sc_layouts_menu_default > ul > li.current-menu-ancestor > a {
	color: var(--aura-ink);
}

.top_panel .sc_layouts_menu_default > ul > li.current-menu-item > a::after,
.top_panel .sc_layouts_menu_default > ul > li.current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -0.55rem;
	width: 5px;
	height: 5px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: var(--aura-cyan);
	box-shadow: 0 0 10px 1px rgba(0, 229, 255, 0.75);
}

/* Dropdowns pick up the same glass as the bar. */
.top_panel .sc_layouts_menu_default ul ul {
	background: rgba(15, 10, 30, 0.92);
	backdrop-filter: blur(var(--aura-glass-blur));
	-webkit-backdrop-filter: blur(var(--aura-glass-blur));
	border: 1px solid var(--aura-glass-border);
	border-radius: var(--aura-radius-sm);
	box-shadow: var(--aura-lift-2);
}

/**
 * Call to action.
 *
 * Add the CSS class `aura-cta` to the menu item in Appearance > Menus. Screen
 * Options must have "CSS Classes" ticked before that field appears, which is
 * the step everyone misses.
 */
.top_panel .sc_layouts_menu_default > ul > li.aura-cta > a {
	padding: 0.62rem 1.35rem;
	border-radius: 999px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--aura-amethyst), #6c3bd6);
	box-shadow: var(--aura-glow-amethyst);
	transition:
		transform 0.35s var(--aura-ease),
		box-shadow 0.35s var(--aura-ease);
}

.top_panel .sc_layouts_menu_default > ul > li.aura-cta > a:hover {
	transform: translateY(-2px);
	box-shadow: var(--aura-glow-amethyst), 0 16px 38px -14px rgba(138, 43, 226, 0.75);
}

/* The CTA is already marked out by its shape; the dot would be noise. */
.top_panel .sc_layouts_menu_default > ul > li.aura-cta.current-menu-item > a::after {
	display: none;
}

/* --- Mobile ----------------------------------------------------------- */

.top_panel .sc_layouts_menu_mobile_button .sc_layouts_item_icon {
	color: var(--aura-ink);
}

@media (prefers-reduced-motion: reduce) {
	.top_panel .sc_layouts_menu_default > ul > li.aura-cta > a {
		transition: none;
	}

	.top_panel .sc_layouts_menu_default > ul > li.aura-cta > a:hover {
		transform: none;
	}
}

/* =========================================================================
 * 14. Cart trigger and drawer
 *
 * The trigger is a menu item carrying the class `aura-cart`; Aura_Cart turns
 * its link into an icon with a live count. The drawer shows WooCommerce's own
 * mini-cart, so everything inside .aura-cart-drawer__contents is Woo's markup
 * and is styled by class names we do not own.
 * ====================================================================== */

.aura-cart-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	color: var(--aura-ink-2);
	transition:
		color 0.35s var(--aura-ease),
		background-color 0.35s var(--aura-ease);
}

.aura-cart-trigger:hover,
.aura-cart-trigger:focus-visible {
	color: var(--aura-ink);
	background: rgba(138, 43, 226, 0.16);
}

/**
 * The basket, drawn rather than downloaded.
 *
 * An inline SVG would need markup in a filter that also has to escape it; a
 * masked pseudo-element keeps the icon in the stylesheet where its colour can
 * follow currentColor without a fill attribute to maintain.
 */
.aura-cart-trigger__icon {
	width: 1.15rem;
	height: 1.15rem;
	background: currentColor;
	-webkit-mask: var(--aura-cart-icon) center / contain no-repeat;
	mask: var(--aura-cart-icon) center / contain no-repeat;
}

:root {
	--aura-cart-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

.aura-cart-count {
	position: absolute;
	top: -0.15rem;
	right: -0.15rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: var(--aura-gold);
	color: #1a1206;
	font-family: var(--aura-text);
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.15rem;
	text-align: center;
	/* Zero is hidden rather than shown: a badge reading 0 is noise. */
	opacity: 0;
	transform: scale(0.6);
	transition:
		opacity 0.3s var(--aura-ease),
		transform 0.3s var(--aura-ease);
}

.aura-cart-count.is-filled {
	opacity: 1;
	transform: scale(1);
}

/* -------------------------------------------------------------------------
 * The drawer
 * ---------------------------------------------------------------------- */

.aura-cart-drawer {
	position: fixed;
	inset: 0;
	/* Above the sticky header (900) and the preview strip (1400). */
	z-index: 2000;
}

.aura-cart-drawer[hidden] {
	display: none;
}

.aura-cart-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(3, 4, 10, 0.66);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.45s var(--aura-ease);
}

.aura-cart-drawer.is-open .aura-cart-drawer__scrim {
	opacity: 1;
}

.aura-cart-drawer__panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(26rem, 100%);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem 1.6rem 2rem;
	overflow-y: auto;
	overscroll-behavior: contain;

	background:
		linear-gradient(180deg, rgba(138, 43, 226, 0.14), transparent 42%),
		var(--aura-paper-2);
	border-left: 1px solid var(--aura-glass-border);
	box-shadow: -30px 0 80px -30px rgba(0, 0, 0, 0.85);

	transform: translateX(100%);
	transition: transform 0.45s var(--aura-ease);
}

.aura-cart-drawer.is-open .aura-cart-drawer__panel {
	transform: translateX(0);
}

.aura-cart-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--aura-line);
}

.aura-cart-drawer__title {
	margin: 0;
	font-family: var(--aura-display);
	font-weight: 400;
	font-size: 1.4rem;
	letter-spacing: -0.02em;
}

.aura-cart-drawer__close {
	flex: 0 0 auto;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid var(--aura-glass-border);
	border-radius: 50%;
	background: transparent;
	color: var(--aura-ink-2);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	transition:
		color 0.3s var(--aura-ease),
		border-color 0.3s var(--aura-ease);
}

.aura-cart-drawer__close:hover,
.aura-cart-drawer__close:focus-visible {
	color: var(--aura-ink);
	border-color: var(--aura-cyan);
}

.aura-cart-drawer__contents {
	flex: 1;
	padding-block: 1rem;
}

.aura-cart-drawer__note {
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--aura-line);
	font-size: 0.78rem;
	color: var(--aura-ink-2);
}

/* --- WooCommerce's mini-cart markup, given the house treatment ---------- */

.aura-cart-drawer .woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aura-cart-drawer .woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: 3.4rem 1fr auto;
	align-items: center;
	gap: 0.9rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--aura-line);
}

.aura-cart-drawer .woocommerce-mini-cart-item img {
	grid-column: 1;
	width: 3.4rem;
	height: 3.4rem;
	object-fit: cover;
	border-radius: 10px;
}

.aura-cart-drawer .woocommerce-mini-cart-item a:not(.remove) {
	grid-column: 2;
	color: var(--aura-ink);
	text-decoration: none;
	font-size: 0.92rem;
}

.aura-cart-drawer .woocommerce-mini-cart-item .quantity {
	grid-column: 2;
	font-size: 0.8rem;
	color: var(--aura-ink-2);
}

.aura-cart-drawer .woocommerce-mini-cart-item a.remove {
	grid-column: 3;
	grid-row: 1 / -1;
	color: var(--aura-ink-2);
	text-decoration: none;
	font-size: 1.1rem;
}

.aura-cart-drawer .woocommerce-mini-cart-item a.remove:hover {
	color: #ff6b6b;
}

.aura-cart-drawer .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.1rem 0 1.2rem;
	font-size: 1rem;
}

.aura-cart-drawer .woocommerce-mini-cart__total strong {
	font-weight: 500;
	color: var(--aura-ink-2);
}

.aura-cart-drawer .woocommerce-mini-cart__buttons {
	display: grid;
	gap: 0.65rem;
	margin: 0;
}

.aura-cart-drawer .woocommerce-mini-cart__buttons .button {
	display: block;
	padding: 0.8rem 1.2rem;
	border-radius: 999px;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	background: transparent;
	border: 1px solid var(--aura-glass-border);
	color: var(--aura-ink);
}

.aura-cart-drawer .woocommerce-mini-cart__buttons .checkout {
	background: linear-gradient(135deg, var(--aura-amethyst), #6c3bd6);
	border-color: transparent;
	color: #ffffff;
	box-shadow: var(--aura-glow-amethyst);
}

.aura-cart-drawer .woocommerce-mini-cart__empty-message {
	margin: 2rem 0;
	color: var(--aura-ink-2);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.aura-cart-drawer__scrim,
	.aura-cart-drawer__panel,
	.aura-cart-count,
	.aura-cart-trigger {
		transition: none;
	}

	.aura-cart-drawer__panel {
		transform: none;
	}
}

/* =========================================================================
 * 15. Ambient layers, type scale and chrome
 *
 * The pieces that make the design read as one system rather than as a set of
 * well-behaved components. Ported from the reference build, where the same
 * three things do most of the work: sections sit on moving light, headings
 * live at the extremes of the scale, and the browser furniture is dressed to
 * match the page.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * Aurora
 *
 * Two large blurred blobs drifting behind a section. This is the single
 * biggest reason a dark page reads as atmosphere rather than as a black
 * rectangle, and it is two pseudo-elements: no canvas, no GL context, nothing
 * on the main thread.
 *
 * Usage:  <section class="aura-band">
 *           <div class="aura-aurora" aria-hidden="true"></div>
 *           ...
 *         </section>
 * ---------------------------------------------------------------------- */

.aura-aurora {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.aura-aurora::before,
.aura-aurora::after {
	content: "";
	position: absolute;
	width: 46vw;
	height: 46vw;
	border-radius: 50%;
	filter: blur(90px);
	animation: aura-aurora 22s ease-in-out infinite;
}

.aura-aurora::before {
	top: -12%;
	left: -8%;
	background: radial-gradient(circle, rgba(138, 43, 226, 0.45), transparent 68%);
}

.aura-aurora::after {
	right: -10%;
	bottom: -18%;
	background: radial-gradient(circle, rgba(0, 229, 255, 0.28), transparent 70%);
	animation-delay: -11s;
}

@keyframes aura-aurora {
	0%,
	100% {
		transform: translate3d(-4%, 0, 0) scale(1);
		opacity: 0.55;
	}
	50% {
		transform: translate3d(4%, -3%, 0) scale(1.12);
		opacity: 0.85;
	}
}

/**
 * A section that carries its own aurora.
 *
 * isolation keeps the -1 layer inside the section instead of sliding under
 * the page background, which is what happens when a negative z-index has no
 * stacking context to belong to.
 */
.aura-band {
	position: relative;
	isolation: isolate;
}

/* -------------------------------------------------------------------------
 * Particles
 *
 * A dozen absolutely positioned dots rising through a section, each on its
 * own clock so the field never visibly loops. Pure CSS on purpose: a WebGL
 * context for background decoration is a waste of a GPU.
 *
 * Usage:  <div class="aura-particles" aria-hidden="true">
 *           <span></span>  x 12
 *         </div>
 * ---------------------------------------------------------------------- */

.aura-particles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.aura-particles > span {
	position: absolute;
	bottom: -10vh;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--aura-amethyst);
	box-shadow: 0 0 12px 2px rgba(138, 43, 226, 0.7);
	animation: aura-float 18s linear infinite;
	opacity: 0;
}

@keyframes aura-float {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0;
	}
	10% {
		opacity: 0.7;
	}
	90% {
		opacity: 0.5;
	}
	100% {
		transform: translate3d(0, -120vh, 0) scale(1.25);
		opacity: 0;
	}
}

/* Twelve stops across the width. The negative delays start the field
   mid-flight, so the first paint is not twelve dots sitting on the floor. */
.aura-particles > span:nth-child(1)  { left:  4%; animation-delay:   0s; animation-duration: 19s; }
.aura-particles > span:nth-child(2)  { left: 12%; animation-delay:  -3s; animation-duration: 24s; background: var(--aura-cyan); box-shadow: 0 0 12px 2px rgba(0, 229, 255, 0.7); }
.aura-particles > span:nth-child(3)  { left: 21%; animation-delay:  -7s; animation-duration: 16s; }
.aura-particles > span:nth-child(4)  { left: 29%; animation-delay: -11s; animation-duration: 27s; background: var(--aura-gold); box-shadow: 0 0 12px 2px rgba(212, 175, 55, 0.6); }
.aura-particles > span:nth-child(5)  { left: 38%; animation-delay:  -2s; animation-duration: 21s; }
.aura-particles > span:nth-child(6)  { left: 46%; animation-delay: -14s; animation-duration: 18s; background: var(--aura-cyan); box-shadow: 0 0 12px 2px rgba(0, 229, 255, 0.7); }
.aura-particles > span:nth-child(7)  { left: 55%; animation-delay:  -5s; animation-duration: 25s; }
.aura-particles > span:nth-child(8)  { left: 63%; animation-delay:  -9s; animation-duration: 17s; }
.aura-particles > span:nth-child(9)  { left: 71%; animation-delay: -16s; animation-duration: 23s; background: var(--aura-gold); box-shadow: 0 0 12px 2px rgba(212, 175, 55, 0.6); }
.aura-particles > span:nth-child(10) { left: 80%; animation-delay:  -1s; animation-duration: 20s; }
.aura-particles > span:nth-child(11) { left: 88%; animation-delay: -12s; animation-duration: 26s; background: var(--aura-cyan); box-shadow: 0 0 12px 2px rgba(0, 229, 255, 0.7); }
.aura-particles > span:nth-child(12) { left: 95%; animation-delay:  -6s; animation-duration: 15s; }

/* A neon edge that breathes. Attach to any bordered panel. */
.aura-glow-breathe {
	animation: aura-breathe 4.5s ease-in-out infinite;
}

@keyframes aura-breathe {
	0%,
	100% {
		box-shadow:
			0 0 0 1px rgba(138, 43, 226, 0.25),
			0 0 22px -8px rgba(138, 43, 226, 0.45);
	}
	50% {
		box-shadow:
			0 0 0 1px rgba(0, 229, 255, 0.4),
			0 0 46px -6px rgba(0, 229, 255, 0.6);
	}
}

/* -------------------------------------------------------------------------
 * Display scale
 *
 * Luxury layouts live on the contrast between a very large heading and very
 * small caps, not on the middle of the range. These three sizes plus the
 * kicker are the whole scale.
 * ---------------------------------------------------------------------- */

.aura-display-sm,
.aura-display-md,
.aura-display-lg {
	font-family: var(--aura-display);
	font-optical-sizing: auto;
	font-weight: 400;
	text-wrap: balance;
	margin-block: 0;
}

.aura-display-sm {
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.aura-display-md {
	font-size: clamp(2.6rem, 6vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
}

.aura-display-lg {
	font-size: clamp(2.9rem, 6.4vw, 5.25rem);
	line-height: 1.03;
	letter-spacing: -0.022em;
}

/* -------------------------------------------------------------------------
 * Browser chrome
 *
 * The default scrollbar is a bright grey slab on a dark page, and it is the
 * first thing that gives away an unfinished build.
 * ---------------------------------------------------------------------- */

html {
	scrollbar-width: thin;
	scrollbar-color: rgba(138, 43, 226, 0.55) transparent;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.02);
}

::-webkit-scrollbar-thumb {
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
	background-image: linear-gradient(180deg, var(--aura-amethyst), #4b0082);
}

::-webkit-scrollbar-thumb:hover {
	background-image: linear-gradient(180deg, var(--aura-cyan), var(--aura-amethyst));
}

::-webkit-scrollbar-corner {
	background: transparent;
}

::selection {
	background: rgba(138, 43, 226, 0.45);
	color: #ffffff;
}

/* One focus ring for the whole site, and it is visible against the ground. */
:focus-visible {
	outline: 2px solid var(--aura-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.aura-particles,
	.aura-aurora {
		display: none;
	}

	.aura-glow-breathe {
		animation: none;
	}
}

@media print {
	.aura-particles,
	.aura-aurora {
		display: none;
	}
}

/* =========================================================================
 * 16. The sixteen zones grid
 *
 * Sixteen cards and a readout that follows the pointer. The whole section
 * carries the active zone's colour in a --zone custom property, so one hover
 * re-tints the card edge, the labels and the panel glow together rather than
 * three rules chasing each other.
 * ====================================================================== */

.aura-zonegrid {
	position: relative;
	isolation: isolate;
	max-width: 78rem;
	margin-inline: auto;
	padding: clamp(4.5rem, 10vw, 9rem) 1.5rem;
}

.aura-zonegrid__head {
	max-width: 46rem;
}

.aura-zonegrid__head .aura-display-md {
	margin: 1.5rem 0 0;
}

.aura-zonegrid__intro {
	margin: 1.5rem 0 0;
	font-family: var(--aura-serif);
	font-size: clamp(1.2rem, 1.9vw, 1.45rem);
	line-height: 1.6;
	color: var(--aura-ink-subtle);
}

.aura-zonegrid__layout {
	display: grid;
	gap: 2rem;
	margin-top: 2.75rem;
}

@media (min-width: 62rem) {
	.aura-zonegrid__layout {
		grid-template-columns: minmax(0, 1fr) 24rem;
	}
}

/* --- The grid --------------------------------------------------------- */

/* The grid and the readout end level. The rows share the height equally
   and every card fills its row, so any height the readout needs becomes
   slightly taller cards rather than gaps between them. zone-grid.js holds
   the readout at the height of its longest zone, so hovering does not make
   the cards grow and shrink. */
.aura-zonegrid__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aura-zonegrid__list > li {
	display: flex;
	margin: 0;
	padding: 0;
}

.aura-zonegrid__list > li > .aura-zonegrid__zone {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (min-width: 40rem) {
	.aura-zonegrid__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.aura-zonegrid__zone {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	padding: 0.8rem 1rem;
	border-radius: 16px;
	text-align: left;
	cursor: pointer;
	color: inherit;
	font: inherit;
	transition:
		transform 0.5s var(--aura-ease),
		border-color 0.5s var(--aura-ease),
		box-shadow 0.5s var(--aura-ease);
}

.aura-zonegrid__zone:hover {
	transform: translateY(-4px);
}

/* Element wash, revealed on hover and held while active. */
.aura-zonegrid__zone::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(120% 90% at 20% 0%, rgb(var(--zone-rgb) / 0.85), transparent 62%);
	transition: opacity 0.5s var(--aura-ease);
}

.aura-zonegrid__zone:hover::before,
.aura-zonegrid__zone.is-active::before {
	/* The wash is the element colour at a low alpha. Painting the gradient
	   solid and fading the whole layer keeps one colour token in play instead
	   of a second, pre-mixed one. */
	opacity: 0.13;
}

/**
 * The element's edge — the border itself, not a bar on top of it.
 *
 * This was an absolutely positioned 3px strip sitting inside the glass border,
 * which read as two separate lines with a gap: the card's own hairline, then
 * the strip. Thickening the left border instead gives one edge, which is what
 * the reference has, and it follows the corner radius for free.
 */
.aura-zonegrid__zone {
	border-left: 3px solid rgb(var(--zone-rgb) / 0.45);
	transition:
		transform 0.5s var(--aura-ease),
		border-color 0.5s var(--aura-ease),
		box-shadow 0.5s var(--aura-ease);
}

.aura-zonegrid__zone.is-active {
	border-color: rgb(var(--zone-rgb));
	box-shadow: 0 0 34px -10px rgb(var(--zone-rgb));
}

.aura-zonegrid__abbr {
	position: relative;
	display: block;
	font-family: var(--aura-text);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--aura-ink-faint);
}

.aura-zonegrid__deity {
	position: relative;
	display: block;
	margin-top: 0.375rem;
	font-family: var(--aura-serif);
	font-size: 1.25rem;
	line-height: 1.2;
}

.aura-zonegrid__element {
	position: relative;
	display: block;
	margin-top: 0.25rem;
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgb(var(--zone-rgb));
}

/* --- The readout ------------------------------------------------------ */

.aura-zonegrid__readout {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	padding: 1.5rem 1.75rem;
	border-radius: 24px;
	box-shadow: 0 0 60px -24px rgb(var(--zone-rgb));
	transition: box-shadow 0.5s var(--aura-ease);
}

.aura-zonegrid__meta {
	margin: 0;
	font-family: var(--aura-text);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: rgb(var(--zone-rgb));
}

.aura-zonegrid__name {
	margin: 0.5rem 0 0;
	font-family: var(--aura-display);
	font-weight: 400;
	font-size: 1.75rem;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.aura-zonegrid__deity-line {
	margin: 0.25rem 0 0;
	font-family: var(--aura-serif);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--aura-ink-muted);
}

.aura-zonegrid__rule {
	display: block;
	height: 1px;
	margin: 1rem 0;
	background: linear-gradient(90deg, rgb(var(--zone-rgb)), transparent);
}

.aura-zonegrid__domain {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}

.aura-zonegrid__remedy {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--aura-ink-subtle);
}

.aura-zonegrid__angle {
	margin: 1rem 0 0;
	font-family: var(--aura-mono);
	font-size: 0.75rem;
	color: var(--aura-ink-faint);
}

/* Same register as the bearing above it: a fact about the zone, not copy. */
.aura-zonegrid__padas {
	margin: 0.4rem 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aura-ink-faint);
}

.aura-zonegrid__padas span {
	margin-left: 0.4rem;
	font-family: var(--aura-mono);
	letter-spacing: 0;
	text-transform: none;
	color: rgb(var(--zone-rgb, 207 200 228));
}

/* Pinned to the foot of the panel, so the button lines up with the last
   row of cards whatever the zone's text. */
.aura-zonegrid__actions {
	margin: auto 0 0;
	padding-top: 1.25rem;
}

/* border-box, or the button's own padding is added to the 100% and it hangs
   over the panel edge. */
.aura-zonegrid__actions .aura-magnetic:not([hidden]) {
	display: flex;
}

.aura-zonegrid__actions .aura-magnetic {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	justify-content: center;
	text-align: center;
}

.aura-zonegrid__note {
	max-width: 42rem;
	margin: 2.5rem 0 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--aura-ink-faint);
}

@media (prefers-reduced-motion: reduce) {
	.aura-zonegrid__zone {
		transition: none;
	}

	.aura-zonegrid__zone:hover {
		transform: none;
	}
}

/* =========================================================================
 * 17. Ways in, and the catalogue teasers
 *
 * Two homepage sections that share a shape: a header, then cards that carry
 * their own accent as an RGB triple in --aura-way-rgb. One rule set serves a
 * cyan card, an amethyst card and a gold one.
 * ====================================================================== */

/* Icon masks. Drawn in the stylesheet so the colour follows currentColor and
   no SVG has to be escaped through a PHP attribute. */
:root {
	--aura-icon-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3 3 6v15l6-3 6 3 6-3V3l-6 3Z'/%3E%3Cpath d='M9 3v15'/%3E%3Cpath d='M15 6v15'/%3E%3C/svg%3E");
	--aura-icon-scan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E");
	--aura-icon-gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 12 4-12-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
	--aura-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
}

.aura-section {
	position: relative;
	isolation: isolate;
	max-width: 78rem;
	margin-inline: auto;
	padding: clamp(4.5rem, 10vw, 9rem) 1.5rem;
}

.aura-section__head {
	max-width: 46rem;
}

.aura-section__head .aura-display-md,
.aura-section__head .aura-display-sm {
	margin: 1.5rem 0 0;
}

.aura-section__intro {
	margin: 1.5rem 0 0;
	font-family: var(--aura-serif);
	font-size: clamp(1.2rem, 1.9vw, 1.45rem);
	line-height: 1.6;
	color: var(--aura-ink-subtle);
}

/* -------------------------------------------------------------------------
 * Ways in
 * ---------------------------------------------------------------------- */

.aura-ways {
	display: grid;
	gap: 1.5rem;
	margin-top: 4rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.aura-way {
	--aura-way-rgb: 138 43 226;

	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 2rem;
	border-radius: 24px;
	text-decoration: none;
	color: inherit;
	transition:
		transform 0.5s var(--aura-ease),
		box-shadow 0.5s var(--aura-ease);
}

/* A wash from the top-left corner, in the card's own accent. */
.aura-way::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(110% 80% at 12% 0%, rgb(var(--aura-way-rgb) / 0.12), transparent 62%);
}

.aura-way:hover {
	transform: translateY(-6px);
	box-shadow:
		0 0 0 1px rgb(var(--aura-way-rgb) / 0.4),
		0 24px 60px -24px rgb(var(--aura-way-rgb) / 0.5);
}

.aura-way__top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.aura-way__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 14px;
	background: rgb(var(--aura-way-rgb) / 0.14);
	color: rgb(var(--aura-way-rgb));
}

.aura-way__icon::before {
	content: "";
	width: 1.35rem;
	height: 1.35rem;
	background: currentColor;
	-webkit-mask: var(--aura-way-icon) center / contain no-repeat;
	mask: var(--aura-way-icon) center / contain no-repeat;
}

.aura-way--map { --aura-way-icon: var(--aura-icon-map); }
.aura-way--scan { --aura-way-icon: var(--aura-icon-scan); }
.aura-way--gem { --aura-way-icon: var(--aura-icon-gem); }

.aura-way__index {
	font-family: var(--aura-mono);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	color: var(--aura-ink-faint);
}

.aura-way__title {
	position: relative;
	margin: 1.75rem 0 0;
	font-family: var(--aura-display);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.aura-way__body {
	position: relative;
	margin: 1.25rem 0 0;
	flex: 1;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--aura-ink-subtle);
}

.aura-way__meta {
	position: relative;
	margin: 2rem 0 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(var(--aura-way-rgb));
}

.aura-way__more {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 1rem;
	font-weight: 600;
	font-size: 0.94rem;
}

.aura-way__more::after {
	content: "";
	width: 0.9rem;
	height: 0.9rem;
	background: currentColor;
	-webkit-mask: var(--aura-icon-arrow) center / contain no-repeat;
	mask: var(--aura-icon-arrow) center / contain no-repeat;
	transition: transform 0.4s var(--aura-ease);
}

.aura-way:hover .aura-way__more::after {
	transform: translate(2px, -2px);
}

/* -------------------------------------------------------------------------
 * Catalogue teasers
 *
 * Drawn, not photographed. The glow is shaped to the object it stands for, so
 * a card reads as the same thing the 3D preview will show.
 * ---------------------------------------------------------------------- */

.aura-section__split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
}

.aura-teasers {
	display: grid;
	gap: 1.25rem;
	margin-top: 3.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.aura-teaser {
	--aura-way-rgb: 138 43 226;

	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 24px;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 0 0 1px rgb(var(--aura-way-rgb) / 0.12);
	transition:
		transform 0.5s var(--aura-ease),
		box-shadow 0.5s var(--aura-ease);

	/* .aura-glass pads its contents by 2rem, which is right for a panel and
	   wrong for a card whose media is meant to run edge to edge. Left in, the
	   square sat inset with a visible margin around it and the title lost
	   enough width to wrap onto two lines. The body supplies its own padding
	   below. */
	padding: 0;
}

.aura-teaser:hover {
	transform: translateY(-6px);
	box-shadow:
		0 0 0 1px rgb(var(--aura-way-rgb) / 0.4),
		0 24px 60px -24px rgb(var(--aura-way-rgb) / 0.5);
}

.aura-teaser__stage {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background:
		radial-gradient(70% 60% at 50% 46%, rgb(var(--aura-way-rgb) / 0.24), transparent 72%),
		linear-gradient(160deg, #140e28, #0a0817);
}

/* The photograph, filling the stage. The gradient behind it still shows at the
   edges where the product has been cut out, which is what keeps the three cards
   looking like a set rather than three pasted images. */
.aura-teaser__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--aura-ease);
}

.aura-teaser:hover .aura-teaser__photo {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.aura-teaser__photo,
	.aura-teaser:hover .aura-teaser__photo {
		transition: none;
		transform: none;
	}
}

/* The object itself: a blurred silhouette in the material's colour. */
.aura-teaser__shape {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: rgb(var(--aura-way-rgb) / 0.44);
	filter: blur(40px);
	transition: transform 0.7s var(--aura-ease);
}

.aura-teaser:hover .aura-teaser__shape {
	transform: translate(-50%, -50%) scale(1.1);
}

/**
 * One shape for all four.
 *
 * The silhouettes were originally cut to each object — a trapezoid for the
 * pyramid, a tall ellipse for the helix. Seen in a row they read as four
 * different kinds of card rather than four products, and the clipped triangle
 * in particular looked like a warning sign. A disc for every card lets the
 * colour do the distinguishing, which is what the eye picks up first anyway.
 */
.aura-teaser__shape {
	width: 46%;
	height: 46%;
	border-radius: 50%;
}

/* Contact shadow, matching the one the 3D viewer draws. */
.aura-teaser__stage::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 22%;
	width: 33%;
	height: 0.75rem;
	transform: translateX(-50%);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	filter: blur(12px);
}

.aura-teaser__body {
	display: block;
	padding: 1.25rem;
}

.aura-teaser__name {
	display: block;
	margin: 0;
	font-family: var(--aura-serif);
	font-size: 1.125rem;
	line-height: 1.375;
}

.aura-teaser__zones {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.76rem;
	color: var(--aura-ink-faint);
}

.aura-teaser__element {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgb(var(--aura-way-rgb));
}

.aura-teaser__price {
	display: block;
	margin-top: 0.75rem;
	font-size: 1.05rem;
	color: var(--aura-gold);
}

@media (prefers-reduced-motion: reduce) {
	.aura-way,
	.aura-teaser,
	.aura-teaser__shape,
	.aura-way__more::after {
		transition: none;
	}

	.aura-way:hover,
	.aura-teaser:hover {
		transform: none;
	}

	.aura-teaser:hover .aura-teaser__shape {
		transform: translate(-50%, -50%);
	}

	.aura-way:hover .aura-way__more::after {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Button icons
 *
 * A trailing glyph, drawn as a mask so it inherits the button's colour. Only
 * the named modifiers draw anything; an unknown name leaves the button plain
 * rather than showing a broken image.
 * ---------------------------------------------------------------------- */

:root {
	--aura-icon-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5.5-5.5 2 2-5.5Z'/%3E%3C/svg%3E");
	--aura-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 10h18M8 2v4M16 2v4'/%3E%3Cpath d='m9 15 2 2 4-4'/%3E%3C/svg%3E");
}

.aura-btn-icon--compass { --aura-btn-icon: var(--aura-icon-compass); }
.aura-btn-icon--calendar { --aura-btn-icon: var(--aura-icon-calendar); }

/**
 * Only the known modifiers draw.
 *
 * A wildcard [class*="aura-btn-icon--"] also matched --none, where the mask
 * variable is undefined; a mask with no image masks nothing, so the button
 * grew a solid square of currentColor. Naming the two that exist means an
 * unknown icon draws nothing, which is the right failure.
 */
.aura-btn-icon--compass::after,
.aura-btn-icon--calendar::after {
	content: "";
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin-left: 0.6rem;
	background: currentColor;
	-webkit-mask: var(--aura-btn-icon) center / contain no-repeat;
	mask: var(--aura-btn-icon) center / contain no-repeat;
}

/* The magnetic button is inline-block by default; the icon needs it to be a
   flex row or the glyph drops onto its own line at small widths. */
.aura-btn-icon {
	display: inline-flex;
	align-items: center;
}

/* =========================================================================
 * 18. Footer
 *
 * Four columns and a baseline. Lives in the theme rather than the preview so
 * the live site gets the same thing: on WordPress this markup goes in a child
 * footer template or a footer widget area, and the rules below do not care
 * which.
 * ====================================================================== */

.aura-footer {
	position: relative;
	margin-top: 4rem;
	border-top: 1px solid var(--aura-glass-border);
}

.aura-footer__inner {
	max-width: 78rem;
	margin-inline: auto;
	padding: 3.5rem 1.5rem 2.5rem;
}

/**
 * Four columns of unequal width, not four equal ones.
 *
 * auto-fit with equal fractions gave the brand column — which carries a
 * paragraph, a note, three contact links and a row of social icons — exactly
 * the same width as a list of four links. The brand column ran twice as tall
 * as its neighbours and the footer read as one long column with three short
 * ones beside it. Widths now follow the content.
 */
.aura-footer__grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.aura-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 3rem;
	}
}

@media (min-width: 68rem) {
	.aura-footer__grid {
		grid-template-columns: 1.5fr 1fr 1.1fr 1.4fr;
	}
}

/* --- Brand ------------------------------------------------------------ */

.aura-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

/* The same lit disc as the header, at the same size. */
.aura-footer__mark {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid rgba(0, 229, 255, 0.35);
	background:
		radial-gradient(circle at 50% 50%, var(--aura-gold) 0 3.5px, transparent 4px),
		radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.85), rgba(0, 229, 255, 0.3) 58%, transparent 74%);
	box-shadow: inset 0 0 14px rgba(138, 43, 226, 0.55);
}

.aura-footer__name {
	font-family: var(--aura-display);
	font-size: 1rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aura-ink);
}

.aura-footer__blurb {
	max-width: 24rem;
	margin: 1.25rem 0 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--aura-ink-muted);
}

.aura-footer__small {
	margin: 1rem 0 0;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--aura-ink-faint);
}

/* --- Column headings and links ---------------------------------------- */

.aura-footer__title {
	margin: 0;
	font-family: var(--aura-text);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--aura-gold);
}

.aura-footer__links {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.7rem;
}

.aura-footer__links a {
	font-size: 0.9rem;
	color: var(--aura-ink-muted);
	text-decoration: none;
	transition: color 0.3s var(--aura-ease);
}

.aura-footer__links a:hover {
	color: var(--aura-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- Elemental cheat sheet -------------------------------------------- */

.aura-footer__elements {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.7rem;
}

.aura-footer__elements li {
	padding-left: 0.85rem;
	border-left: 2px solid var(--zone, var(--aura-amethyst));
}

.aura-footer__zone {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--zone, var(--aura-ink));
}

.aura-footer__note {
	margin: 0.1rem 0 0;
	font-size: 0.75rem;
	line-height: 1.55;
	color: var(--aura-ink-muted);
}

.aura-footer__more {
	display: inline-block;
	margin-top: 1.25rem;
	font-size: 0.75rem;
	color: var(--aura-cyan);
	text-underline-offset: 4px;
}

/* --- Trust ------------------------------------------------------------ */

.aura-footer__trust {
	margin-top: 1.25rem;
	padding: 1.1rem;
	border-radius: 16px;
}

.aura-footer__trust p {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.65;
	color: var(--aura-ink-muted);
}

.aura-footer__trust strong {
	color: var(--aura-ink);
	font-weight: 600;
}

.aura-footer__shield {
	flex: 0 0 auto;
	width: 0.875rem;
	height: 0.875rem;
	margin-top: 0.15rem;
	background: var(--aura-cyan);
	-webkit-mask: var(--aura-icon-shield) center / contain no-repeat;
	mask: var(--aura-icon-shield) center / contain no-repeat;
}

:root {
	--aura-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* --- Baseline --------------------------------------------------------- */

.aura-footer__baseline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--aura-glass-border);
}

.aura-footer__baseline p {
	margin: 0;
	font-size: 0.75rem;
	color: var(--aura-ink-faint);
}

.aura-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aura-footer__legal a {
	font-size: 0.75rem;
	color: var(--aura-ink-faint);
	text-decoration: none;
	text-underline-offset: 4px;
	transition: color 0.3s var(--aura-ease);
}

.aura-footer__legal a:hover {
	color: var(--aura-ink-muted);
	text-decoration: underline;
}

/* Preview-only line. Marked out so it is obvious it is not part of the site. */
.aura-footer__previewnote {
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--aura-glass-border);
	font-size: 0.72rem;
	color: var(--aura-ink-faint);
	opacity: 0.75;
}

/* =========================================================================
 * 19. Contact block
 *
 * WhatsApp, phone, email and the social profiles. Every icon is a CSS mask so
 * it takes currentColor and no SVG has to survive a PHP attribute.
 * ====================================================================== */

:root {
	--aura-icon-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12.04 2c-5.5 0-9.97 4.47-9.97 9.97 0 1.76.46 3.48 1.34 5L2 22l5.2-1.36a9.94 9.94 0 0 0 4.84 1.24h.01c5.5 0 9.97-4.47 9.97-9.97 0-2.66-1.04-5.17-2.92-7.05A9.9 9.9 0 0 0 12.04 2Zm0 1.68c2.21 0 4.28.86 5.84 2.42a8.2 8.2 0 0 1 2.42 5.85c0 4.57-3.72 8.28-8.29 8.28a8.27 8.27 0 0 1-4.21-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.24 8.24 0 0 1-1.27-4.42c0-4.57 3.72-8.28 8.3-8.28Zm-2.6 4.3c-.14 0-.36.05-.55.26-.19.2-.72.7-.72 1.72 0 1.01.74 1.99.84 2.13.1.14 1.44 2.29 3.58 3.12 1.78.69 2.14.55 2.53.51.39-.03 1.25-.5 1.43-1 .17-.49.17-.91.12-1-.05-.09-.19-.14-.4-.24-.2-.1-1.24-.61-1.43-.68-.19-.07-.33-.1-.47.1-.14.2-.54.68-.66.82-.12.14-.24.16-.45.05-.2-.1-.86-.32-1.64-1.02a6.15 6.15 0 0 1-1.14-1.4c-.12-.21-.01-.32.09-.42.09-.09.2-.24.3-.36.1-.12.13-.2.2-.34.06-.14.03-.26-.02-.36-.05-.1-.45-1.13-.63-1.54-.16-.4-.33-.35-.45-.35h-.4Z'/%3E%3C/svg%3E");
	--aura-icon-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
	--aura-icon-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E");
	--aura-icon-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7h-2.5V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12Z'/%3E%3C/svg%3E");
	--aura-icon-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05C21.4 8.65 22 11.1 22 14.3V21h-4v-6c0-1.43-.03-3.27-2-3.27-2 0-2.3 1.56-2.3 3.17V21h-4V9Z'/%3E%3C/svg%3E");
	--aura-icon-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M23 12s0-3.5-.45-5.17a2.6 2.6 0 0 0-1.83-1.85C19.05 4.5 12 4.5 12 4.5s-7.05 0-8.72.48A2.6 2.6 0 0 0 1.45 6.83C1 8.5 1 12 1 12s0 3.5.45 5.17a2.6 2.6 0 0 0 1.83 1.85c1.67.48 8.72.48 8.72.48s7.05 0 8.72-.48a2.6 2.6 0 0 0 1.83-1.85C23 15.5 23 12 23 12ZM9.75 15.5v-7l6 3.5-6 3.5Z'/%3E%3C/svg%3E");
	--aura-icon-tiktok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M16.5 2h-3v13.2a2.7 2.7 0 1 1-2.2-2.65V9.5A5.8 5.8 0 1 0 16.5 15V8.9a6.6 6.6 0 0 0 4 1.35V7.2a3.9 3.9 0 0 1-4-4.2Z'/%3E%3C/svg%3E");
	--aura-icon-pinterest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 0 0-3.65 19.31c-.09-.79-.17-2 .03-2.86l1.16-4.93s-.3-.6-.3-1.48c0-1.39.81-2.42 1.81-2.42.86 0 1.27.64 1.27 1.41 0 .86-.55 2.15-.83 3.34-.24 1 .5 1.82 1.48 1.82 1.78 0 3.14-1.87 3.14-4.57 0-2.39-1.72-4.06-4.17-4.06-2.84 0-4.5 2.13-4.5 4.33 0 .86.33 1.78.74 2.28.08.1.09.19.07.29l-.28 1.13c-.04.18-.14.22-.33.13-1.25-.58-2.03-2.4-2.03-3.87 0-3.15 2.29-6.04 6.6-6.04 3.46 0 6.16 2.47 6.16 5.77 0 3.44-2.17 6.22-5.18 6.22-1.01 0-1.96-.53-2.29-1.15l-.62 2.37c-.22.87-.83 1.96-1.24 2.62A10 10 0 1 0 12 2Z'/%3E%3C/svg%3E");
	--aura-icon-threads: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M12 21c-4.8 0-8-3.4-8-9s3.2-9 8-9c3.4 0 5.9 1.6 7 4'/%3E%3Cpath d='M8.6 13.4c0-1.7 1.6-2.7 3.7-2.7 3 0 4.4 1.5 4.4 3.6 0 2-1.4 3.2-3 3.2-1.4 0-2.3-.8-2.3-1.9'/%3E%3C/svg%3E");
	--aura-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18.24 2H21l-6.55 7.48L22 22h-6.16l-4.83-6.3L5.5 22H2.74l7.01-8.01L2 2h6.32l4.36 5.77L18.24 2Zm-.97 18.3h1.52L7.03 3.6H5.4l11.87 16.7Z'/%3E%3C/svg%3E");
}

.aura-contact {
	display: grid;
	gap: 1.5rem;
}

.aura-contact__title {
	margin: 0;
	font-family: var(--aura-text);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--aura-gold);
}

.aura-contact__direct {
	display: grid;
	/* Centre, so the two links sit on one line whatever their icons do. */
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aura-contact--row .aura-contact__direct {
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	gap: 1.75rem;
}

@media (max-width: 48rem) {
	.aura-contact--row .aura-contact__direct {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: 0.75rem;
	}
}

.aura-contact__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9rem;
	color: var(--aura-ink-muted);
	text-decoration: none;
	transition: color 0.3s var(--aura-ease);
}

.aura-contact__link:hover,
.aura-contact__link:focus-visible {
	color: var(--aura-ink);
}

.aura-contact__icon {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	background: currentColor;
	-webkit-mask: var(--aura-contact-icon) center / contain no-repeat;
	mask: var(--aura-contact-icon) center / contain no-repeat;
}

/* WhatsApp keeps its own green even on hover: it is the one link people scan
   for rather than read. */
.aura-contact__link--whatsapp { color: #25d366; }
.aura-contact__link--whatsapp:hover { color: #3ee87c; }

.aura-contact__link--whatsapp { --aura-contact-icon: var(--aura-icon-whatsapp); }
.aura-contact__link--email { --aura-contact-icon: var(--aura-icon-email); }

/* --- Social row ------------------------------------------------------- */

.aura-contact__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aura-contact__social-link {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	border: 1px solid var(--aura-glass-border);
	color: var(--aura-ink-muted);
	transition:
		color 0.3s var(--aura-ease),
		border-color 0.3s var(--aura-ease),
		transform 0.3s var(--aura-ease);
}

.aura-contact__social-link:hover,
.aura-contact__social-link:focus-visible {
	color: var(--aura-ink);
	border-color: var(--aura-cyan);
	transform: translateY(-2px);
}

.aura-contact__social-link--instagram { --aura-contact-icon: var(--aura-icon-instagram); }
.aura-contact__social-link--facebook { --aura-contact-icon: var(--aura-icon-facebook); }
.aura-contact__social-link--linkedin { --aura-contact-icon: var(--aura-icon-linkedin); }
.aura-contact__social-link--youtube { --aura-contact-icon: var(--aura-icon-youtube); }
.aura-contact__social-link--tiktok { --aura-contact-icon: var(--aura-icon-tiktok); }
.aura-contact__social-link--pinterest { --aura-contact-icon: var(--aura-icon-pinterest); }
.aura-contact__social-link--threads { --aura-contact-icon: var(--aura-icon-threads); }
.aura-contact__social-link--x { --aura-contact-icon: var(--aura-icon-x); }

@media (prefers-reduced-motion: reduce) {
	.aura-contact__social-link,
	.aura-contact__link {
		transition: none;
	}

	.aura-contact__social-link:hover {
		transform: none;
	}
}

/**
 * Contact row, between the columns and the baseline.
 *
 * Horizontal, so it costs one line rather than a column's worth of height,
 * and it separates the four content columns from the small print without
 * needing a second rule to do it.
 */
.aura-footer__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--aura-glass-border);
}

.aura-footer__contact .aura-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2rem;
	width: 100%;
	justify-content: space-between;
}

/* The baseline already has the contact row's rule above it. */
.aura-footer__baseline {
	border-top: 0;
	padding-top: 1.25rem;
	margin-top: 1.25rem;
}

/* =========================================================================
 * 20. Floating contact buttons
 *
 * Pinned bottom-right, revealed once the visitor is past the first screen.
 * The label slides out on hover so the resting state stays a small circle;
 * two wide pills in the corner of every page is a lot of furniture.
 * ====================================================================== */

.aura-float {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 1500;

	display: grid;
	gap: 0.65rem;
	justify-items: end;

	/* Hidden until scrolled. Both properties animate, and pointer-events keeps
	   the invisible buttons from swallowing clicks near the corner. */
	opacity: 0;
	transform: translateY(0.75rem);
	pointer-events: none;
	transition:
		opacity 0.4s var(--aura-ease),
		transform 0.4s var(--aura-ease);
}

.aura-float.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.aura-float__btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6rem;

	height: 3.25rem;
	padding: 0 1rem;
	border-radius: 999px;

	color: #fff;
	font-family: var(--aura-text);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;

	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.55);
	transition:
		transform 0.35s var(--aura-ease),
		box-shadow 0.35s var(--aura-ease);
}

.aura-float__btn:hover,
.aura-float__btn:focus-visible {
	transform: translateY(-3px);
}

.aura-float__icon {
	flex: 0 0 auto;
	width: 1.45rem;
	height: 1.45rem;
	background: currentColor;
	-webkit-mask: var(--aura-float-icon) center / contain no-repeat;
	mask: var(--aura-float-icon) center / contain no-repeat;
}

/**
 * The label collapses to nothing until hover or focus.
 *
 * max-width rather than display, so it can transition. A collapsed label is
 * still in the accessibility tree, which is why the buttons also carry a
 * screen-reader-text span — the visible label is decoration, the hidden one is
 * the name.
 */
.aura-float__label {
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition:
		max-width 0.4s var(--aura-ease),
		opacity 0.3s var(--aura-ease);
}

.aura-float__btn:hover .aura-float__label,
.aura-float__btn:focus-visible .aura-float__label {
	max-width: 7rem;
	opacity: 1;
}

/* WhatsApp keeps its own brand green: people scan for that colour rather than
   read the button. */
.aura-float__btn--whatsapp {
	background: #25d366;
	--aura-float-icon: var(--aura-icon-whatsapp);
}

.aura-float__btn--whatsapp:hover,
.aura-float__btn--whatsapp:focus-visible {
	box-shadow: 0 12px 34px -8px rgba(37, 211, 102, 0.65);
}

/* Out of the way of the cart drawer, which sits at 2000. */
.aura-cart-drawer.is-open ~ .aura-float,
body:has(.aura-cart-drawer.is-open) .aura-float {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 30rem) {
	.aura-float {
		right: 0.85rem;
		bottom: 0.85rem;
	}

	.aura-float__btn {
		height: 3rem;
		padding: 0 0.85rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aura-float,
	.aura-float__btn,
	.aura-float__label {
		transition: none;
	}

	.aura-float__btn:hover {
		transform: none;
	}
}

@media print {
	.aura-float {
		display: none;
	}
}

/* =========================================================================
 * 21. The pointer
 *
 * A gold bindu under the pointer and an amethyst ring a beat behind it — the
 * logo's own mark, at six pixels. Everything here is inert until
 * assets/js/cursor.js adds .aura-cursor-active to <html>, so a visitor whose
 * JavaScript never runs keeps an ordinary working cursor.
 * ====================================================================== */

.aura-cursor__ring,
.aura-cursor__dot {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s var(--aura-ease);
	/* Promoted, because these move every frame. */
	will-change: transform;
}

.aura-cursor__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--aura-gold);
	box-shadow: 0 0 10px 2px rgba(212, 175, 55, 0.7);
}

.aura-cursor__ring {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(138, 43, 226, 0.7);
	box-shadow:
		0 0 18px -4px rgba(138, 43, 226, 0.6),
		inset 0 0 12px -6px rgba(0, 229, 255, 0.5);
	transition:
		opacity 0.3s var(--aura-ease),
		width 0.35s var(--aura-ease),
		height 0.35s var(--aura-ease),
		border-color 0.35s var(--aura-ease),
		background-color 0.35s var(--aura-ease);
}

.aura-cursor-visible .aura-cursor__ring,
.aura-cursor-visible .aura-cursor__dot {
	opacity: 1;
}

/**
 * Over something clickable.
 *
 * The ring opens and turns cyan, and the bindu shrinks away — the ring becomes
 * the pointer, so what is underneath stays readable. Cyan because that is the
 * colour the site already uses for "this responds": the active nav dot, the
 * focus ring, the answer card's edge.
 */
.aura-cursor-over .aura-cursor__ring {
	width: 58px;
	height: 58px;
	border-color: rgba(0, 229, 255, 0.85);
	background: rgba(0, 229, 255, 0.07);
	box-shadow:
		0 0 26px -4px rgba(0, 229, 255, 0.55),
		inset 0 0 16px -6px rgba(0, 229, 255, 0.5);
}

.aura-cursor-over .aura-cursor__dot {
	opacity: 0.35;
	width: 4px;
	height: 4px;
}

/**
 * Hide the native cursor — but only once the script is running.
 *
 * The class is added by JavaScript. Put `cursor: none` in the stylesheet
 * unconditionally and a blocked script leaves the visitor with no pointer at
 * all, on every element, with no way to recover.
 *
 * Text inputs keep their caret: a text field with no I-beam is genuinely hard
 * to use, and no amount of atmosphere is worth that.
 */
.aura-cursor-active,
.aura-cursor-active a,
.aura-cursor-active button,
.aura-cursor-active [role="button"],
.aura-cursor-active summary {
	cursor: none;
}

.aura-cursor-active input,
.aura-cursor-active textarea,
.aura-cursor-active select,
.aura-cursor-active [contenteditable="true"] {
	cursor: auto;
}

/* A modal dialog opens in the browser's top layer, above everything on the
   page — including the custom cursor, which then sits underneath the dialog
   and its blurred backdrop while the native pointer is hidden. Over the
   download dialog the visitor saw no pointer at all and had to guess where
   the button was. Inside an open dialog the native pointer comes back, and
   the custom one steps out of the way until it closes. */
.aura-cursor-active dialog[open],
.aura-cursor-active dialog[open] * {
	cursor: auto;
}

.aura-cursor-active dialog[open] button,
.aura-cursor-active dialog[open] a,
.aura-cursor-active dialog[open] label,
.aura-cursor-active dialog[open] input[type="checkbox"],
.aura-cursor-active dialog[open] input[type="radio"] {
	cursor: pointer;
}

body:has(dialog[open]) .aura-cursor__ring,
body:has(dialog[open]) .aura-cursor__dot {
	opacity: 0;
}

/* The map is dragged and needs its own affordances; Leaflet sets grab and
   grabbing cursors and they should survive. */
.aura-cursor-active .leaflet-container,
.aura-cursor-active .leaflet-container * {
	cursor: auto;
}

/* Nothing at all on a touch screen or under reduced motion. The script does
   not run in either case; this is belt and braces for a stale class. */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
	.aura-cursor__ring,
	.aura-cursor__dot {
		display: none;
	}

	.aura-cursor-active,
	.aura-cursor-active a,
	.aura-cursor-active button {
		cursor: auto;
	}
}

/* =========================================================================
 * 22. The book view
 *
 * A second way to read a chapter: two facing pages and a leaf you take hold of
 * by the corner. The scroll view is untouched — this sits beside it and the
 * reader picks.
 *
 * Pagination is CSS multi-column doing the work. Each window is one page wide
 * with `overflow: hidden`; the flow inside it is the same width with a matching
 * `column-width`, so its extra columns lay themselves out to the right, off the
 * edge. Turning a page is a translate, not a re-layout.
 * ====================================================================== */

.aura-book {
	--aura-book-page-w: 24rem;
	--aura-book-page-h: 34rem;
	--aura-book-gutter: 2.75rem;
	--aura-book-progress: 0;

	display: grid;
	justify-items: center;
	gap: 1.5rem;
	margin: 0 auto;
	container-type: inline-size;
}

/* The source stays in the DOM as the fallback and is only taken out of the
   flow once the reader has actually built itself. */
.aura-book.is-book-ready [data-aura-book-source] { display: none; }

.aura-book__stage {
	position: relative;
	display: flex;
	/* Nothing may escape the spread. A leaf mid-turn is a 3D transform and
	   perspective can throw part of it outside the stage box; without this the
	   overflowing columns of the flow show up beside the book. */
	overflow: hidden;
	perspective: 2400px;
	perspective-origin: 50% 45%;
	border-radius: var(--aura-radius);
	background:
		radial-gradient(90% 70% at 50% 0%, rgba(138, 43, 226, .14), transparent 65%),
		linear-gradient(180deg, rgba(20, 14, 40, .85), rgba(7, 9, 19, .92));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .05),
		0 40px 90px -40px rgba(0, 0, 0, .95);
}

/* --- A page ------------------------------------------------------------ */

.aura-book__window {
	position: relative;
	width: var(--aura-book-page-w);
	height: var(--aura-book-page-h);
	padding: 2.5rem 2rem;
	overflow: hidden;
	box-sizing: content-box;
}

.aura-book__window--verso { border-right: 1px solid rgba(138, 43, 226, .22); }

/* The paper carries its own tone: warmer toward the spine, as a real page is. */
.aura-book__window--verso { background: linear-gradient(90deg, rgba(255, 255, 255, .012), rgba(212, 175, 55, .05)); }
.aura-book__window--recto { background: linear-gradient(270deg, rgba(255, 255, 255, .012), rgba(212, 175, 55, .05)); }

.aura-book__flow {
	width: var(--aura-book-page-w);
	height: var(--aura-book-page-h);
	column-width: var(--aura-book-page-w);
	column-gap: var(--aura-book-gutter);
	column-fill: auto;
	will-change: transform;
}

/* --- The gutter -------------------------------------------------------- */

.aura-book__spine {
	position: absolute;
	inset: 0 auto 0 50%;
	width: 3.25rem;
	transform: translateX(-50%);
	pointer-events: none;
	background: linear-gradient(90deg,
		transparent,
		rgba(0, 0, 0, .34) 42%,
		rgba(0, 0, 0, .48) 50%,
		rgba(0, 0, 0, .34) 58%,
		transparent);
}

/* --- The turning leaf --------------------------------------------------- */

.aura-book__leaf {
	--aura-leaf-lift: 0;

	position: absolute;
	inset: 0 0 0 50%;
	width: 50%;
	transform-style: preserve-3d;
	transform-origin: left center;
	will-change: transform;
	z-index: 3;
}

.aura-book__leaf--back {
	inset: 0 50% 0 0;
	transform-origin: right center;
}

.aura-book__leaf.is-animating { transition: transform .52s cubic-bezier(.34, .8, .3, 1); }

.aura-book__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	overflow: hidden;
	/* Fully opaque. At .98 the page underneath ghosted through the turning
	   leaf, which read as a printing fault rather than as depth. */
	background: linear-gradient(180deg, rgb(20, 14, 40), rgb(11, 9, 24));
	/* The shadow the sheet casts on the spread beneath it, strongest when the
	   leaf is upright. */
	box-shadow: 0 0 calc(var(--aura-leaf-lift) * 3rem) rgba(0, 0, 0, calc(var(--aura-leaf-lift) * .75));
}

.aura-book__face--back { transform: rotateY(180deg); }

/* A page catching light along the edge it is turning away from. */
.aura-book__face::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: var(--aura-leaf-lift);
	background: linear-gradient(90deg, rgba(212, 175, 55, .12), transparent 38%);
}

.aura-book__leaf--back .aura-book__face::after {
	background: linear-gradient(270deg, rgba(212, 175, 55, .12), transparent 38%);
}

/* --- The corners you can take hold of ----------------------------------- */

.aura-book__grab {
	position: absolute;
	top: 0;
	bottom: 0;
	width: calc(var(--aura-book-page-w) * .38);
	z-index: 4;
	touch-action: none;
}

.aura-book__grab--next { right: 0; }
.aura-book__grab--prev { left: 0; }

.aura-book__grab::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 4.5rem;
	height: 4.5rem;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

/* The corner catches light as the pointer nears it: the affordance arrives
   before the cursor even changes. */
.aura-book__grab--next::after {
	right: 0;
	background: linear-gradient(315deg, rgba(212, 175, 55, .22), transparent 62%);
}

.aura-book__grab--prev::after {
	left: 0;
	background: linear-gradient(45deg, rgba(212, 175, 55, .22), transparent 62%);
}

.aura-book__grab:hover::after { opacity: 1; }
.aura-book.is-dragging .aura-book__grab::after { opacity: 0; }
.aura-book.is-turning .aura-book__grab { pointer-events: none; }

/* --- Typography on the page --------------------------------------------- */

.aura-book__flow > :first-child { margin-top: 0; }

.aura-book__flow p {
	margin: 0 0 .95rem;
	font-size: .96rem;
	line-height: 1.72;
	color: var(--aura-ink-subtle);
	/* A column break inside a paragraph is fine; one that strands a single
	   line is not. */
	orphans: 2;
	widows: 2;
}

.aura-book__flow h1 {
	font-family: var(--aura-display);
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.2;
	margin: 0 0 1.2rem;
	color: var(--aura-ink);
	break-after: avoid;
}

.aura-book__flow h2 {
	font-family: var(--aura-display);
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.25;
	margin: 1.6rem 0 .7rem;
	color: var(--aura-ink);
	break-after: avoid;
}

.aura-book__flow h3 {
	font-family: var(--aura-serif);
	font-weight: 600;
	font-size: 1.05rem;
	margin: 1.2rem 0 .5rem;
	break-after: avoid;
}

.aura-book__flow blockquote {
	margin: 0 0 1.2rem;
	padding: .85rem 1rem;
	border: 1px solid var(--aura-glass-border);
	border-left: 2px solid var(--aura-gold);
	border-radius: var(--aura-radius-sm);
	background: rgba(138, 43, 226, .07);
	break-inside: avoid;
}

.aura-book__flow blockquote p { margin: 0; font-family: var(--aura-serif); font-size: .95rem; }
.aura-book__flow ul,
.aura-book__flow ol { margin: 0 0 1rem; padding-left: 1.15rem; font-size: .93rem; line-height: 1.6; }
.aura-book__flow li { margin-bottom: .4rem; color: var(--aura-ink-subtle); }
.aura-book__flow strong { color: var(--aura-ink); font-weight: 600; }
.aura-book__flow a { color: var(--aura-cyan); }
.aura-book__flow hr { border: 0; height: 1px; margin: 1.5rem 0; background: var(--aura-line); }

.aura-book__flow table { width: 100%; border-collapse: collapse; font-size: .82rem; margin: 0 0 1.1rem; }
.aura-book__flow th,
.aura-book__flow td { padding: .35rem .5rem; text-align: left; border-bottom: 1px solid var(--aura-line); }
.aura-book__flow th { color: var(--aura-gold); font-weight: 600; }

/* A figure must never straddle a column break — half a diagram is worse than
   a diagram on the next page. */
.aura-book__flow figure,
.aura-book__flow .md-figure {
	break-inside: avoid;
	margin: 0 0 1.1rem;
	width: 100%;
}

.aura-book__flow .md-figure__plate { padding: .85rem .75rem; }
.aura-book__flow .md-figure__caption { font-size: .78rem; margin-top: .5rem; }
.aura-book__flow svg { display: block; width: 100%; height: auto; }

/* --- The bar ------------------------------------------------------------ */

.aura-book__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: min(100%, calc(var(--aura-book-page-w) * 2 + 8rem));
}

.aura-book__nav {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .55rem 1.1rem;
	border: 1px solid var(--aura-glass-border);
	border-radius: 999px;
	background: rgba(138, 43, 226, .08);
	color: var(--aura-ink-muted);
	font-family: var(--aura-text);
	font-size: .78rem;
	letter-spacing: .06em;
	cursor: pointer;
	transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.aura-book__nav:hover:not(:disabled) {
	color: var(--aura-ink);
	border-color: rgba(212, 175, 55, .5);
	background: rgba(212, 175, 55, .1);
}

.aura-book__nav:disabled { opacity: .3; cursor: default; }

/* At the end of a chapter the button stops being a page turn and becomes a
   chapter link. It says so: gold, and carrying the next chapter's own name. */
.aura-book__nav.is-chapter {
	color: var(--aura-gold);
	border-color: rgba(212, 175, 55, .45);
	background: rgba(212, 175, 55, .1);
}

.aura-book__nav.is-chapter .aura-book__nav-label {
	max-width: 14rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aura-book__nav-arrow {
	width: .5rem;
	height: .5rem;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
}

.aura-book__nav--prev .aura-book__nav-arrow { transform: rotate(-135deg); }
.aura-book__nav--next .aura-book__nav-arrow { transform: rotate(45deg); }
.aura-book__nav--next { flex-direction: row-reverse; }

.aura-book__status {
	margin: 0;
	font-family: var(--aura-text);
	font-size: .76rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--aura-ink-faint);
}

/* --- Narrow screens ------------------------------------------------------
   Below two pages' worth of room the book becomes a single leaf. The turn
   still works; there is simply one page on the stage instead of two. */

@container (max-width: 55rem) {
	.aura-book__window--verso { display: none; }
	.aura-book__spine { display: none; }
	.aura-book__leaf { inset: 0; width: 100%; }
	.aura-book__leaf--back { inset: 0; }
	.aura-book__grab { width: calc(var(--aura-book-page-w) * .3); }
}

@media (max-width: 40rem) {
	.aura-book {
		--aura-book-page-w: min(88vw, 22rem);
		--aura-book-page-h: 30rem;
	}
	.aura-book__window { padding: 1.75rem 1.25rem; }
	.aura-book__nav-label { display: none; }
}

/* --- Reduced motion ------------------------------------------------------
   No rotation at all. The leaf is never shown; the page simply changes, which
   is what the setting is asking for. */

@media (prefers-reduced-motion: reduce) {
	.aura-book__leaf { display: none; }
	.aura-book__leaf.is-animating { transition: none; }
}

/* =========================================================================
 * 22b. The energy hand
 *
 * The pointer's third state. Over anything that can be taken hold of, the
 * bindu and its ring give way to a hand — drawn in the same gold, with the
 * same bloom, so it reads as the site's own mark rather than a borrowed icon.
 *
 * Driven by data-aura-cursor on <html>, which assets/js/cursor.js sets from
 * data-aura-cursor on whatever the pointer is over. If the script never runs,
 * the native cursor is still there and the corner still works.
 * ====================================================================== */

.aura-cursor__glyph {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 2.1rem;
	height: 2.1rem;
	margin: 0;
	pointer-events: none;
	opacity: 0;
	color: var(--aura-gold);
	transform: translate3d(-100px, -100px, 0) translate(-50%, -50%) scale(.7);
	transition: opacity .18s ease, transform .18s cubic-bezier(.34, .8, .3, 1);
	filter: drop-shadow(0 0 6px rgba(212, 175, 55, .55));
}

.aura-cursor__glyph svg { display: block; width: 100%; height: 100%; }

/* Both hands live in one SVG; only one is ever shown. */
.aura-cursor__glyph .aura-hand--closed { opacity: 0; }

[data-aura-cursor="grab"] .aura-cursor__glyph,
[data-aura-cursor="grabbing"] .aura-cursor__glyph { opacity: 1; }

[data-aura-cursor="grabbing"] .aura-cursor__glyph .aura-hand--open { opacity: 0; }
[data-aura-cursor="grabbing"] .aura-cursor__glyph .aura-hand--closed { opacity: 1; }

/* Taking hold: the glow flares and the hand draws in. */
[data-aura-cursor="grabbing"] .aura-cursor__glyph {
	filter: drop-shadow(0 0 11px rgba(212, 175, 55, .85));
}

/* While the hand is showing, the ordinary pointer stands down. */
[data-aura-cursor] .aura-cursor__dot { opacity: 0; }
[data-aura-cursor] .aura-cursor__ring { opacity: .28; }

@media (prefers-reduced-motion: reduce) {
	.aura-cursor__glyph { transition: opacity .18s ease; }
}

/* =========================================================================
 * 23. Protecting a paid chapter
 *
 * The book is sold. These rules make the ordinary ways of lifting it —
 * select, copy, right-click save, print — not work, and they fix the bug that
 * made the reader unusable: dragging a page selected the text instead of
 * turning the leaf.
 *
 * What this does NOT do, and cannot: stop a screenshot. No web page can. The
 * measure that actually protects a paid book is the watermark below, which
 * carries the buyer's own name across every page — a leaked copy then says
 * who leaked it. See DEPLOY.md.
 * ====================================================================== */

.aura-protected,
.aura-book {
	-webkit-user-select: none;
	user-select: none;
	/* Long-press on iOS raises a copy/share sheet over the text unless this is
	   set as well. */
	-webkit-touch-callout: none;
}

/* A link still has to be clickable, and a form field still has to be typed in
   — blanket user-select:none breaks both. */
.aura-protected a,
.aura-book a,
.aura-protected input,
.aura-protected textarea {
	-webkit-user-select: auto;
	user-select: auto;
}

/* Dragging an image out of the page is the other easy lift. */
.aura-protected img,
.aura-book img,
.aura-protected svg,
.aura-book svg {
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
}

/* --- The watermark -------------------------------------------------------
   Set --aura-watermark to the buyer's name or order number and it tiles
   across every page, under the text and over the ground. Faint enough to read
   through, present enough that a photograph of the screen carries it. */

.aura-book__window,
.aura-protected {
	position: relative;
}

.aura-book__window::after,
.aura-protected::after {
	content: var(--aura-watermark, "");
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	pointer-events: none;
	font-family: var(--aura-text);
	font-size: .8rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(212, 175, 55, .085);
	transform: rotate(-24deg);
	white-space: pre;
	overflow: hidden;
}

/* --- Print ---------------------------------------------------------------
   Ctrl+P should produce the cover note, not the chapter. */

@media print {
	.aura-book__stage,
	.aura-book__bar,
	.aura-protected {
		display: none !important;
	}

	.aura-print-notice { display: block !important; }
}

.aura-print-notice { display: none; }

/* =========================================================================
 * 24. The theme's own chrome
 *
 * Everything the old parent theme used to supply: the reading column, the
 * Journal listing, a post, the search form, and the small accessibility parts
 * a theme is required to have.
 *
 * The header and footer are not here — they are sections 13 and 18, written
 * when this was still a child theme and still styling the parent's markup.
 * header.php now emits those same class names, which is why neither section
 * had to change.
 * ====================================================================== */

/* --- Required furniture --------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Visible the moment it is tabbed to, and nowhere else. */
.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 10000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.7rem 1.1rem;
	clip: auto;
	clip-path: none;
	border-radius: 999px;
	background: var(--aura-paper-2);
	border: 1px solid var(--aura-gold);
	color: var(--aura-ink);
	font-size: 0.85rem;
}

.aura-main {
	display: block;
}

/* --- The reading column ---------------------------------------------------
   A page of prose, as opposed to a page of sections. Forty to seventy-five
   characters is the measure that reads; the sections look after themselves. */

.aura-page--narrow {
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 5.5rem) 1.5rem clamp(4rem, 9vw, 7rem);
}

.aura-page--full {
	margin: 0;
	padding: 0;
}

/* The cart, the checkout and the account pages: wide enough for a form and an
   order summary side by side, and none of the prose rules below — those are
   scoped to --narrow, and WooCommerce's blocks are not prose. */
.aura-page--commerce {
	max-width: 72rem;
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 5.5rem) 1.5rem clamp(4rem, 9vw, 7rem);
}

/* A product's name in the cart and checkout summaries.
 *
 * WooCommerce prints it as an <h3>, so it picked up the heading face: Cinzel,
 * which is all capitals and sets wide. In a summary column it broke every few
 * letters. It is a line item, not a heading, and reads as one. */
.wc-block-components-product-name {
	font-family: var(--aura-text);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	font-variant: normal;
	color: var(--aura-ink);
	overflow-wrap: break-word;
}

/* Labels inside the checkout's input fields.
 *
 * The fields are WooCommerce's white boxes, but the label inside each one
 * inherited the page's ink — near-white for a dark ground — so "First name",
 * "City" and the rest were close to invisible on the white they sit on. They
 * take the ink meant for a light ground instead. */
.wc-block-components-text-input label,
.wc-block-components-text-input input::placeholder,
.wc-blocks-components-select__label,
.wc-block-components-combobox .components-base-control__label,
.wc-block-components-textarea::placeholder {
	color: var(--aura-ink-on-light);
	opacity: 1;
}

/* --- "New in store" under an empty cart -------------------------------------
 *
 * WooCommerce's product-new block. Each card was as tall as its own content,
 * so a one-line product name sat its image, price and button at a different
 * height from its two-line neighbours and the row read as uneven steps. The
 * cards are now a grid of equal-height columns: image, a name area that holds
 * two lines whether or not it needs them, and price and button pushed to the
 * bottom so they line up across the row.
 *
 * `body .wc-block-grid.wc-block-grid` is deliberate, not a typo. WooCommerce's
 * own rule is `.wc-block-grid.has-4-columns .wc-block-grid__product` and the
 * block stylesheet may load after this one, so a plain `.wc-block-grid` prefix
 * would lose to it and the 25% width would stand.
 * --------------------------------------------------------------------- */

body .wc-block-grid.wc-block-grid .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
	gap: 1.5rem;
	max-width: 46rem;
	margin: 0 auto;
	padding: 0;
	align-items: stretch;
}

/* has-4-columns gives every card a 25% flex basis and max-width, which inside
   a grid cell would shrink it to a quarter of its own column. */
body .wc-block-grid.wc-block-grid .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: auto;
	max-width: none;
	flex: none;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
}

body .wc-block-grid.wc-block-grid .wc-block-grid__product-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	border: 0;
	text-decoration: none;
	color: var(--aura-ink);
}

body .wc-block-grid.wc-block-grid .wc-block-grid__product-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 0 0.85rem;
	overflow: hidden;
	border-radius: var(--aura-radius-sm);
}

body .wc-block-grid.wc-block-grid .wc-block-grid__product-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Two lines reserved, so a short name does not lift everything under it. */
body .wc-block-grid.wc-block-grid .wc-block-grid__product-title {
	min-height: 2.7em;
	margin: 0;
	border: 0;
	font-family: var(--aura-text);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--aura-ink);
}

/* margin-top: auto is what lines the rows up: whatever is left over in a
   card goes above the price, so price and button sit on the same lines in
   every column. */
body .wc-block-grid.wc-block-grid .wc-block-grid__product-price {
	margin: auto 0 0.75rem;
	padding-top: 0.5rem;
	color: var(--aura-gold);
	font-weight: 700;
}

body .wc-block-grid.wc-block-grid .wc-block-grid__product-add-to-cart {
	margin: 0;
}

/* The same button as the shop: WooCommerce's geometry, the magnetic paint. */
body .wc-block-grid.wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: inline-block;
	margin: 0;
	padding: 0.618em 1em;
	border: 0;
	border-radius: 3px;
	background: linear-gradient(112deg, #6a1fb5, var(--aura-amethyst) 38%, #1b6fd6 74%, var(--aura-cyan));
	background-size: 220% 100%;
	background-position: 0% 50%;
	color: #ffffff;
	font-family: inherit;
	font-size: 100%;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	box-shadow:
		0 10px 30px -12px rgba(138, 43, 226, 0.75),
		0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	transition:
		background-position 0.9s var(--aura-ease),
		box-shadow 0.45s var(--aura-ease);
}

body .wc-block-grid.wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
body .wc-block-grid.wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible {
	background-position: 100% 50%;
	color: #ffffff;
	box-shadow:
		0 18px 48px -14px rgba(138, 43, 226, 0.95),
		0 0 28px -4px rgba(0, 229, 255, 0.55),
		0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}

@media (prefers-reduced-motion: reduce) {
	body .wc-block-grid.wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link {
		transition: none;
	}
}

.aura-page__head {
	margin-bottom: 2.4rem;
}

.aura-page__title {
	font-family: var(--aura-display);
	font-weight: 400;
	font-size: clamp(2.1rem, 4.6vw, 3.1rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
}

.aura-page__intro {
	margin-top: 1rem;
	font-family: var(--aura-serif);
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--aura-ink-muted);
}

/* --- Prose ----------------------------------------------------------------
   Only inside the narrow column: a section must never inherit these. */

.aura-page--narrow .aura-page__content > * + * {
	margin-top: 1.1em;
}

.aura-page--narrow .aura-page__content h2,
.aura-page--narrow .aura-page__content h3,
.aura-page--narrow .aura-page__content h4 {
	font-family: var(--aura-display);
	font-weight: 400;
	line-height: 1.2;
	color: var(--aura-ink);
	margin-top: 2.2em;
	margin-bottom: 0.6em;
	text-wrap: balance;
}

.aura-page--narrow .aura-page__content h2 { font-size: 1.85rem; }
.aura-page--narrow .aura-page__content h3 { font-size: 1.4rem; }

.aura-page--narrow .aura-page__content h4 {
	font-family: var(--aura-serif);
	font-style: italic;
	font-size: 1.2rem;
}

.aura-page--narrow .aura-page__content p,
.aura-page--narrow .aura-page__content li {
	color: var(--aura-ink-subtle);
	line-height: 1.75;
}

.aura-page--narrow .aura-page__content strong {
	color: var(--aura-ink);
	font-weight: 600;
}

.aura-page--narrow .aura-page__content ul,
.aura-page--narrow .aura-page__content ol {
	padding-left: 1.3em;
}

.aura-page--narrow .aura-page__content li + li {
	margin-top: 0.45em;
}

.aura-page--narrow .aura-page__content li::marker {
	color: var(--aura-gold);
}

/* Prose links only.
 *
 * The exclusions matter: this rule is more specific than the component styles
 * it was landing on, so a contact link inside a reading column lost its own
 * colour — WhatsApp's green became cyan — and gained an underline it was never
 * designed to carry. A button is not a sentence and does not want a rule under
 * it either. */
.aura-page--narrow .aura-page__content a:not(.aura-contact__link):not(.aura-magnetic) {
	color: var(--aura-cyan);
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 229, 255, 0.35);
}

.aura-page--narrow .aura-page__content a:not(.aura-contact__link):not(.aura-magnetic):hover {
	color: var(--aura-gold);
	border-bottom-color: rgba(212, 175, 55, 0.6);
}

.aura-page--narrow .aura-page__content blockquote {
	margin-inline: 0;
	padding: 1rem 1.3rem;
	border-left: 2px solid var(--aura-gold);
	border-radius: 0 var(--aura-radius) var(--aura-radius) 0;
	background: var(--aura-glass-bg);
	font-family: var(--aura-serif);
	font-size: 1.1rem;
	font-style: italic;
	color: var(--aura-ink-muted);
}

.aura-page--narrow .aura-page__content blockquote p { margin: 0; }

.aura-page--narrow .aura-page__content code {
	padding: 0.1em 0.4em;
	border-radius: 4px;
	background: var(--aura-glass-bg-strong);
	font-size: 0.9em;
}

.aura-page--narrow .aura-page__content hr {
	border: 0;
	height: 1px;
	margin: 2.6em 0;
	background: var(--aura-line);
}

.aura-page--narrow .aura-page__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--aura-radius);
}

/* Tables: the appendices and the service pages both carry them. */
.aura-page--narrow .aura-page__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.aura-page--narrow .aura-page__content th,
.aura-page--narrow .aura-page__content td {
	padding: 0.6em 0.7em;
	border-bottom: 1px solid var(--aura-line);
	text-align: left;
	vertical-align: top;
}

.aura-page--narrow .aura-page__content th {
	color: var(--aura-gold);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- A post ---------------------------------------------------------------- */

.aura-post__meta {
	display: flex;
	gap: 0.6em;
	margin: 0 0 0.9rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--aura-gold);
}

.aura-post__cover {
	margin: 0 0 2.2rem;
}

.aura-post__cover img {
	width: 100%;
	height: auto;
	border-radius: var(--aura-radius);
}

.aura-post__nav {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding-top: 0;
	padding-bottom: clamp(4rem, 9vw, 7rem);
	font-size: 0.9rem;
}

.aura-post__nav a {
	color: var(--aura-ink-muted);
	text-decoration: none;
}

.aura-post__nav a:hover { color: var(--aura-cyan); }

/* --- The Journal listing ---------------------------------------------------- */

/* A category or a search keeps the reading column's width. The Journal sets
   its own, because .wrap is wider than prose wants to be and the Journal is
   not prose — it is a page of cards. */
.aura-archive:not(.aura-archive--journal) {
	max-width: 68rem;
}

.aura-archive__list {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

/* .aura-glass supplies the film and the padding; a card whose image runs to
   the edge has to take the padding back. Same note as the product cards. */
.aura-archive__item {
	padding: 0;
	overflow: hidden;
	transition: transform 0.5s var(--aura-ease), box-shadow 0.5s var(--aura-ease);
}

.aura-archive__item:hover {
	transform: translateY(-5px);
	box-shadow: var(--aura-glow-amethyst);
}

/* The whole card is one link. Three separate targets inside a card means three
   stops for a keyboard and three chances to miss with a thumb. */
.aura-archive__link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/* The ratio belongs to the wrapper, not to the image.
 *
 * It was on the <img>, which works only for as long as nothing else touches
 * the image's height — and the shipped photographs are not all one shape:
 * several are portrait and two are square. With the ratio on the image, a
 * portrait cover rendered at its own proportions and the Journal cards grew to
 * twice the height they were designed for.
 *
 * On the wrapper the box is fixed whatever the picture is, overflow clips the
 * remainder, and object-fit decides what survives the crop. */
.aura-archive__cover {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.aura-archive__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.aura-archive__body {
	display: block;
	padding: 1.35rem 1.5rem 1.6rem;
}

.aura-archive__meta {
	display: block;
	margin: 0 0 0.45rem;
	color: var(--aura-ink-faint);
}

.aura-archive__title {
	display: block;
	margin: 0 0 0.55rem;
	font-family: var(--aura-display);
	font-size: 1.16rem;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.22;
	color: var(--aura-ink);
}

.aura-archive__link:hover .aura-archive__title { color: var(--aura-cyan); }

.aura-archive__excerpt {
	display: block;
	margin: 0 0 1rem;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--aura-ink-muted);
}

.aura-archive__more {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aura-gold);
}

/* The pillar post takes the full width with its photograph beside it. On a
   listing of five equals, nothing tells a reader where to start. */
@media (min-width: 60rem) {
	.aura-archive__item--lead { grid-column: 1 / -1; }

	.aura-archive__item--lead .aura-archive__link {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		align-items: stretch;
	}

	/* The lead card is side by side, so its picture takes the height of the
	   text beside it rather than a fixed ratio. */
	.aura-archive__item--lead .aura-archive__cover {
		height: 100%;
		min-height: 17rem;
		aspect-ratio: auto;
	}

	.aura-archive__item--lead .aura-archive__body {
		align-self: center;
		padding: 2rem 2.25rem;
	}

	.aura-archive__item--lead .aura-archive__title { font-size: 1.9rem; }
}

/* The Journal's closing call to action, on the same rhythm as a section. */
.aura-archive__cta {
	padding: clamp(4.5rem, 10vw, 9rem) 0;
	text-align: center;
}

.aura-archive__cta h2 {
	margin: 0 auto 1.2rem;
	max-width: 18ch;
	font-family: var(--aura-display);
	font-size: clamp(2.6rem, 6vw, 4.5rem);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.02;
	text-wrap: balance;
}

.aura-archive__cta .lede {
	margin-inline: auto;
	margin-bottom: 2.4rem;
}

@media (prefers-reduced-motion: reduce) {
	.aura-archive__item { transition: none; }
	.aura-archive__item:hover { transform: none; }
}

/* The tracking block on a customer's order, from class-aura-tracking.php. The
   rest of WooCommerce's account pages are still its own templates and still
   look like WooCommerce; this is one block, and one block can be made to
   match. */
.aura-tracking {
	margin-top: 2rem;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--aura-glass-border);
	border-left: 2px solid var(--aura-gold);
	border-radius: var(--aura-radius-sm);
	background: var(--aura-glass-bg);
}

.aura-tracking h2 {
	margin: 0 0 0.4rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aura-gold);
}

.aura-tracking p {
	margin: 0;
	font-size: 1.02rem;
}

.aura-pagination {
	margin-top: 3rem;
}

.aura-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.aura-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.7rem;
	border: 1px solid var(--aura-line);
	border-radius: 999px;
	color: var(--aura-ink-muted);
	font-size: 0.85rem;
	text-decoration: none;
}

.aura-pagination .page-numbers.current,
.aura-pagination .page-numbers:hover {
	border-color: rgba(212, 175, 55, 0.6);
	color: var(--aura-gold);
}

/* --- Search ----------------------------------------------------------------- */

.aura-search {
	display: flex;
	gap: 0.6rem;
	margin-top: 1.6rem;
}

.aura-search__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--aura-line);
	border-radius: 999px;
	background: var(--aura-glass-bg);
	color: var(--aura-ink);
	font: inherit;
	font-size: 0.95rem;
}

.aura-search__field:focus-visible {
	outline: none;
	border-color: rgba(138, 43, 226, 0.7);
	box-shadow: var(--aura-glow-amethyst);
}

.aura-search__submit {
	padding: 0.75rem 1.3rem;
	border: 1px solid rgba(212, 175, 55, 0.5);
	border-radius: 999px;
	background: transparent;
	color: var(--aura-gold);
	font: inherit;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

/* --- Comments ----------------------------------------------------------------
   Off on every page of this site, but a theme that cannot render a comment is
   a theme with a hole in it. */

.aura-comments {
	max-width: 46rem;
	margin-inline: auto;
	padding: 0 1.5rem clamp(4rem, 9vw, 7rem);
}

.aura-comments__title {
	font-family: var(--aura-display);
	font-weight: 400;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

.aura-comments .comment-list {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}

.aura-comments .comment-list li {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--aura-line);
}

.aura-comments input[type="text"],
.aura-comments input[type="email"],
.aura-comments input[type="url"],
.aura-comments textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--aura-line);
	border-radius: 12px;
	background: var(--aura-glass-bg);
	color: var(--aura-ink);
	font: inherit;
}

/* --- The menu on a small screen ----------------------------------------------
   No hamburger. A hamburger needs a script to open it, and a five-item menu
   that scrolls sideways needs nothing at all and never gets stuck shut. */

@media (max-width: 60rem) {
	.menu_main_nav_area .sc_layouts_menu_nav {
		max-width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.menu_main_nav_area .sc_layouts_menu_nav::-webkit-scrollbar {
		display: none;
	}

	.menu_main_nav_area .sc_layouts_menu_nav > li {
		flex: 0 0 auto;
	}
}

/* =========================================================================
 * 25. The page sections, and the header's own layout
 *
 * These rules lived in the preview's inline stylesheet and nowhere else, which
 * is the honest answer to why the live site did not look like the preview: the
 * preview was styling them and the theme never had them. Everything here comes
 * straight from _local-preview/_layout.php, minus the parts that only ever
 * belonged to the preview — its fixed status bar and its slug hints.
 *
 * The header scaffolding is in this section too. The old parent theme laid the
 * logo and the menu out; nothing does now, so the theme must.
 * ====================================================================== */

:root { color-scheme: dark; }

body {
	margin: 0;
	font: 17px/1.65 var(--aura-text);
	-webkit-font-smoothing: antialiased;
}

/* --- The header ------------------------------------------------------------ */

.top_panel .content_wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.top_panel .columns_wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 5.25rem;
}

.top_panel .sc_layouts_logo a {
	text-decoration: none;
	line-height: 1.25;
}

.top_panel .logo_text { font-size: 1.12rem; }

.top_panel .sc_layouts_menu_nav {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.top_panel .sc_layouts_menu_nav a {
	text-decoration: none;
	font-size: 0.93rem;
	display: inline-block;
}

/* --- Section rhythm --------------------------------------------------------
   Scoped to the full-bleed pages: the reading column sets its own spacing, and
   a bare `section` rule would reach into every widget on the site. */

/* Block padding only. This used to be "padding: … 0", which outranked the
   1.5rem side gutter of .aura-section and .aura-zonegrid and ran their text
   into the edge of a phone screen. A bare <section> has no side padding to
   lose; its .wrap provides the gutter. */
.aura-page--full .aura-page__content > section {
	padding-block: clamp(4.5rem, 10vw, 9rem);
}

/* Nothing on a page may be wider than the screen. */
.aura-page--full .aura-page__content {
	overflow-x: clip;
}

.wrap {
	max-width: 1160px;
	margin-inline: auto;
	padding: 0 1.5rem;
}

.narrow { max-width: 46rem; }

/* The reference build's display size. Cinzel sets wide, so the measure is
   capped in characters rather than pixels. */
.aura-page--full .aura-page__content h2 {
	font-family: var(--aura-display);
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: clamp(2.6rem, 6vw, 4.5rem);
	letter-spacing: -0.025em;
	margin: 0 0 1.2rem;
	line-height: 1.02;
	max-width: 18ch;
	text-wrap: balance;
}

/* Cormorant, not Cinzel: the lede is a sentence, and Cinzel has no lowercase
   to set one in. */
.lede {
	font-family: var(--aura-serif);
	font-size: clamp(1.2rem, 1.9vw, 1.45rem);
	line-height: 1.6;
	color: var(--aura-ink-subtle);
	max-width: 42rem;
	margin: 0 0 3.2rem;
}

/* h2, because these cards sit directly under the page's h1 with no section
   heading between — jumping to h3 skipped a level and broke the outline a
   screen reader navigates by. h3 is kept so nothing that still uses it loses
   its styling. */
.svc h2,
.shop h2,
.svc h3,
.shop h3,
ol.process h3 {
	font-family: var(--aura-display);
	font-weight: 500;
	letter-spacing: -0.015em;
}

/* --- Service cards ---------------------------------------------------------- */

.svc {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.svc article {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}

.svc img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.svc .body {
	padding: 1.5rem 1.6rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	flex: 1;
}

/* The page-level h2 rule sets display sizes of up to 4.5rem. A card title is
   not a section heading, so it has to out-specify it rather than inherit it. */
.aura-page--full .aura-page__content .svc h2,
.svc h2,
.svc h3 { margin: 0; font-size: 1.22rem; line-height: 1.25; max-width: none; letter-spacing: -0.015em; }
.svc p { margin: 0; font-size: 0.95rem; opacity: 0.78; flex: 1; }
.svc .meta { font-size: 0.82rem; color: var(--aura-gold); font-weight: 600; }

/* A colour, not an opacity.
 *
 * opacity: 0.5 on top of whatever the parent colour happened to be produced a
 * contrast ratio of about 2.2 against the page in the Journal cards, where this
 * sits on --aura-ink-faint. That is below the 3.0 floor for large text, let
 * alone the 4.5 for body, on a 0.72rem label. --aura-ink-faint on its own
 * measures 5.64 and passes AA, and it looks almost identical. */
.num {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	color: var(--aura-ink-faint);
}

/* --- The six stages ---------------------------------------------------------- */

ol.process {
	counter-reset: p;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

ol.process li {
	counter-increment: p;
	padding: 1.4rem 1.5rem;
	border-radius: var(--aura-radius-sm);
	background: var(--aura-glass-bg);
	border: 1px solid var(--aura-glass-border);
	/* border-image would give a nicer gradient on this edge, but it cancels
	   border-radius, and square cards are the worse trade. */
	border-top: 2px solid var(--aura-gold);
}

ol.process li::before {
	content: counter(p, decimal-leading-zero);
	display: block;
	font-family: ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	/* Same reason as .num above: a token that passes, not a dimmed guess. */
	color: var(--aura-ink-faint);
	margin-bottom: 0.5rem;
}

ol.process h3 { margin: 0 0 0.35rem; font-size: 1.02rem; }
ol.process p { margin: 0; font-size: 0.9rem; opacity: 0.76; }

/* --- Shop cards --------------------------------------------------------------- */

.shop {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.shop article { padding: 0; overflow: hidden; }

.shop img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	background: rgba(255, 255, 255, 0.04);
}

.shop .body { padding: 1.15rem 1.3rem 1.5rem; }
.aura-page--full .aura-page__content .shop h2,
.shop h2,
.shop h3 { margin: 0 0 0.3rem; font-size: 1.02rem; line-height: 1.25; max-width: none; letter-spacing: -0.015em; }
.shop .zone { font-size: 0.78rem; opacity: 0.65; display: block; margin-bottom: 0.6rem; }
.shop .price { font-weight: 700; color: var(--aura-gold); }

/* --- Odds and ends ------------------------------------------------------------- */

/* .band used to paint a tinted panel with a rule top and bottom. The design has
   neither: sections are separated by space and by the aurora drifting behind
   them, never by a line. Anything still carrying the class gets nothing rather
   than a stray border. */
.band { background: none; border: 0; }

.rules {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
	max-width: 46rem;
}

.rules li {
	padding-left: 1.6rem;
	position: relative;
	opacity: 0.82;
}

.rules li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--aura-gold);
}

/* The intro on every page that is not the homepage. */
.page-head {
	padding: clamp(3rem, 7vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.page-head h1 {
	font-family: var(--aura-display);
	font-weight: 400;
	font-size: clamp(2.4rem, 6vw, 4.4rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	margin: 0 0 1rem;
	max-width: 18ch;
	text-wrap: balance;
}

/* A wide table on a narrow phone has to scroll inside its own box rather than
   push the whole page sideways. */
.post__tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.md-block { margin-block: 1.5rem; }

/* A menu item that wraps takes the whole bar with it: the call to action
   wrapped onto three lines turned its pill into a circle. */
.top_panel .sc_layouts_menu_nav > li > a {
	white-space: nowrap;
}

.top_panel .columns_wrap {
	flex-wrap: nowrap;
}

/* --- The header on a phone --------------------------------------------------
 *
 * One row of logo, five menu items and a call-to-action pill fits a laptop and
 * nothing else. At 375px those three things were competing for about 340px of
 * usable width with nowrap on both the row and every item, so the bar simply
 * overflowed: the pill ran off the right edge and the page scrolled sideways.
 *
 * Two rows instead. The brand keeps the first, the menu takes the second and
 * scrolls within itself. Still no hamburger — a hamburger needs script to open
 * it, and a five-item menu that scrolls needs nothing and can never get stuck
 * shut.
 * ------------------------------------------------------------------------- */

@media (max-width: 60rem) {

	.top_panel .content_wrap {
		padding: 0 1rem;
	}

	.top_panel .columns_wrap {
		flex-wrap: wrap;
		gap: 0;
		min-height: 0;
		padding-block: 0.7rem;
	}

	.top_panel .sc_layouts_column {
		flex: 1 0 100%;
		min-width: 0;
	}

	.top_panel .sc_layouts_column_align_right {
		/* The menu row sits hard against the viewport edges so the scroll runs
		   the full width, while its first item still lines up with the logo. */
		margin-inline: -1rem;
	}

	.top_panel .menu_main_nav_area {
		padding-inline: 1rem;
	}

	.top_panel .sc_layouts_menu_nav {
		gap: 0.65rem;
		padding-block: 0.3rem;
	}

	/* 44px minimum on every menu link.
	 *
	 * The links were bare inline-block text: a 15px line box, so about a 15px
	 * tall target. Both Apple and Google put the floor at 44px, and a nav that
	 * needs a careful thumb is a nav people stop using. The padding is what
	 * makes the target, so the gap above comes down to compensate. */
	.top_panel .sc_layouts_menu_nav > li > a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-inline: 0.45rem;
	}

	/* The call to action is the last item in the menu, so on a narrow screen it
	   is the thing most likely to be scrolled off. Keep it legible rather than
	   letting it shrink to a dot — and keep it a 44px target too. */
	.top_panel .sc_layouts_menu_default > ul > li.aura-cta > a {
		min-height: 44px;
		padding: 0 1.15em;
		font-size: 0.85rem;
	}

	.top_panel .sc_layouts_logo .logo_text {
		font-size: 1.02rem;
	}
}

/* Below 26rem the slogan is the first thing to go: two words under the brand
   are costing a line of height on the smallest phones in use. */
@media (max-width: 26rem) {
	.top_panel .sc_layouts_logo .logo_slogan {
		display: none;
	}
}

/* =========================================================================
 * Money box placement — the household form on its product page
 *
 * Eight plain rows rather than an "add another person" button: it needs no
 * script, it works with the keyboard as it is, and empty rows are ignored.
 * ====================================================================== */

.aura-household {
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--aura-glass-border);
	border-radius: var(--aura-radius-sm);
	background: var(--aura-glass-bg);
}

.aura-household legend {
	padding: 0 0.4rem;
	color: var(--aura-gold);
	font-weight: 600;
}

.aura-household__intro,
.aura-household__plan {
	margin: 0 0 0.9rem;
	color: var(--aura-ink-subtle);
	font-size: 0.88rem;
	line-height: 1.5;
}

.aura-household__table {
	width: 100%;
	border-collapse: collapse;
}

.aura-household__table th {
	padding: 0 0.4rem 0.4rem 0;
	color: var(--aura-ink-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: left;
	text-transform: uppercase;
}

.aura-household__table td {
	padding: 0 0.4rem 0.45rem 0;
}

.aura-household__table input[type="text"],
.aura-household__table input[type="date"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.5rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--aura-line);
	border-radius: 10px;
	background: rgba(7, 9, 19, 0.55);
	color: var(--aura-ink);
	color-scheme: dark;
	font: inherit;
	font-size: 0.92rem;
}

.aura-household__table input[type="checkbox"],
.aura-household__consent input {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--aura-gold);
}

.aura-household__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0.6rem 0 0;
	color: var(--aura-ink-subtle);
	font-size: 0.88rem;
	line-height: 1.45;
}

/* Five columns do not fit a phone. Below 720px each person becomes a small
   card: the header row is hidden and every field is labelled by its own
   aria-label, which the inputs already carry. */
@media (max-width: 720px) {
	.aura-household__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.aura-household__table,
	.aura-household__table tbody,
	.aura-household__table tr,
	.aura-household__table td {
		display: block;
		width: 100%;
	}

	.aura-household__table tr {
		margin: 0 0 0.8rem;
		padding: 0.6rem 0 0.2rem;
		border-top: 1px solid var(--aura-line);
	}

	/* The column heading, shown above each field now the header row is gone. */
	.aura-household__table td::before {
		content: attr(data-label);
		display: block;
		margin: 0.2rem 0 0.15rem;
		color: var(--aura-ink-muted);
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.03em;
	}

	.aura-household__table input[type="text"],
	.aura-household__table input[type="date"],
	.aura-household__table input[type="time"] {
		margin-bottom: 0.2rem;
	}
}

.aura-household__table input[type="time"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.5rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--aura-line);
	border-radius: 10px;
	background: rgba(7, 9, 19, 0.55);
	color: var(--aura-ink);
	color-scheme: dark;
	font: inherit;
	font-size: 0.92rem;
}

/* --- Report language: the offer in the tool, and the order page --------- */

.aura-north__offer-lang,
.aura-report__lang {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 1rem;
	color: var(--aura-ink-subtle);
	font-size: 0.88rem;
}

.aura-north__offer-lang select,
.aura-report__lang select {
	min-height: 2.6rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--aura-glass-border);
	border-radius: 999px;
	background-color: var(--aura-glass-bg-strong);
	color: var(--aura-ink);
	color-scheme: dark;
	font: inherit;
}

.aura-report__waiting {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--aura-gold);
	border-radius: 0 10px 10px 0;
	background: rgba(212, 175, 55, 0.08);
	color: var(--aura-ink);
	font-size: 0.92rem;
}

/* =========================================================================
 * The Direction Finder's working surface
 *
 * Everything used while working on the picture sits in one bar under the
 * stage: the instruction, the tools in the order they are used, the box for
 * naming a spot, and the two sliders. It sticks to the bottom of the window
 * while the page scrolls, so the next step is never a scroll away.
 * ====================================================================== */

.aura-north__toolbar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: grid;
	gap: 0.65rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--aura-glass-border);
	border-radius: var(--aura-radius-sm);
	background: rgba(10, 8, 23, 0.94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 -14px 40px -26px rgba(0, 0, 0, 0.9);
}

.aura-north__toolbar .aura-north__hint {
	margin: 0;
	max-width: none;
	text-align: start;
	min-height: 1.5em;
}

.aura-north__toolbar .aura-north__buttons {
	gap: 0.5rem;
}

.aura-north__toolbar .aura-magnetic {
	padding: 0.7em 1.15em;
	font-size: 0.86rem;
}

/* The step number, so the order of the tools is the first thing read. */
.aura-north__step {
	display: inline-grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	margin-inline-end: 0.45rem;
	border-radius: 50%;
	background: var(--aura-gold);
	color: var(--aura-void);
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1;
}

/* A tool that needs the centre first looks it until the centre exists. It
   stays clickable, so a press still explains what to do. */
.aura-north__toolbar [aria-disabled="true"] {
	opacity: 0.45;
}

.aura-north__sliders {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 0.5rem 1.25rem;
	align-items: center;
}

.aura-north__sliders .aura-north__rotate,
.aura-north__sliders .aura-north__planzoom {
	margin: 0;
	font-size: 0.8rem;
}

/* --- Fine control for the two turning sliders --------------------------- */

.aura-north__tip {
	margin: 0;
	color: var(--aura-ink-muted);
	font-size: 0.78rem;
	line-height: 1.45;
}

/* Two to a row at most, so each slider has room to be moved precisely. */
.aura-north__sliders {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.aura-north__nudgerow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.aura-north__nudgerow input[type="range"] {
	flex: 1 1 auto;
	min-width: 0;
}

.aura-north__nudge {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid var(--aura-glass-border);
	border-radius: 50%;
	background: var(--aura-glass-bg-strong);
	color: var(--aura-gold);
	font: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
	user-select: none;
}

.aura-north__nudge:hover,
.aura-north__nudge:focus-visible {
	border-color: rgba(212, 175, 55, 0.6);
}

.aura-north__nudge:active {
	background: rgba(212, 175, 55, 0.18);
}

/* --- The stage and its tools side by side; the readings below -----------
 *
 * On a wide screen the tools sit in a column beside the stage and stay in
 * view while the page scrolls, so every step is next to the picture it works
 * on. The readings follow the stage at full width, two columns of them. Below
 * 1100px everything stacks, and the tool bar keeps its sticky place at the
 * bottom of the window.
 * --------------------------------------------------------------------- */

.aura-north__workspace {
	display: grid;
	gap: 1rem;
}

.aura-north__workspace > .aura-north__controls {
	margin: 0;
	min-width: 0;
}

.aura-north__readings {
	display: grid;
	align-content: start;
	gap: 0.75rem;
	min-width: 0;
	margin-top: 1rem;
}

.aura-north__readings > * {
	margin-block: 0;
}

@media (min-width: 1100px) {
	.aura-north__workspace {
		grid-template-columns: minmax(0, 1fr) 24rem;
		align-items: start;
	}

	.aura-north__workspace > .aura-north__controls {
		position: sticky;
		top: 6.5rem;
		max-height: calc(100vh - 7.5rem);
		overflow-y: auto;
		scrollbar-width: thin;
	}

	/* In the column the bar is the column: no sticking, no shadow. */
	.aura-north__workspace .aura-north__toolbar {
		position: static;
		box-shadow: none;
	}

	.aura-north__workspace .aura-north__buttons {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.aura-north__workspace .aura-north__buttons .aura-magnetic {
		justify-content: flex-start;
		text-align: start;
		white-space: normal;
	}

	/* The first and last tools — the plan, the report — take a whole row. */
	.aura-north__workspace [data-role="upload-plan"],
	.aura-north__workspace [data-role="download"] {
		grid-column: 1 / -1;
	}

	.aura-north__workspace .aura-north__sliders {
		grid-template-columns: 1fr;
	}

	.aura-north__workspace .aura-north__planzoom {
		flex-wrap: wrap;
		gap: 0.4rem 0.6rem;
	}

	.aura-north__workspace .aura-north__planzoom > span:first-child {
		flex: 1 0 100%;
	}

	.aura-north__readings {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.aura-north__readings .aura-north__reading {
		grid-column: 1 / -1;
	}

	.aura-north__readings .aura-north__centre {
		margin: 0;
	}
}

/* -------------------------------------------------------------------------
 * The book's membership: plans under the title page and in place of a
 * chapter. One card per plan; the year is marked as the better buy.
 * ---------------------------------------------------------------------- */
.aura-paywall{display:grid;gap:1rem;margin-block:2.5rem;padding:clamp(1.25rem,4vw,2rem);border:1px solid var(--aura-line);border-radius:14px;background:rgba(255,255,255,.03);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.aura-paywall > *{margin:0}
.aura-paywall__eyebrow{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--aura-gold)}
.aura-paywall__title{font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.2;color:var(--aura-ink)}
.aura-paywall p{color:var(--aura-ink-subtle)}
.aura-paywall a{color:var(--aura-cyan)}
.aura-paywall--member{padding:1rem 1.25rem}
.aura-plans{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.aura-plan{display:grid;gap:.35rem;align-content:start;padding:1rem;border:1px solid var(--aura-line);border-radius:12px;background:var(--aura-paper-2);text-align:center}
.aura-plan--best{border-color:var(--aura-gold);box-shadow:0 0 24px rgba(212,175,55,.18)}
.aura-plan__name{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--aura-ink-muted)}
.aura-plan__price{font-size:1.75rem;line-height:1.1;color:var(--aura-ink);font-variant-numeric:tabular-nums}
.aura-plan__every{font-size:.8rem;color:var(--aura-ink-faint)}
.aura-plan__cta{display:inline-block;margin-top:.5rem;padding:.6rem .9rem;border-radius:999px;background:linear-gradient(135deg,var(--aura-amethyst),var(--aura-cyan));color:var(--aura-void)!important;font-weight:600;text-decoration:none}
.aura-plan__cta:hover,.aura-plan__cta:focus-visible{filter:brightness(1.1)}
.aura-plan__cta[aria-disabled="true"]{background:none;border:1px solid var(--aura-line);color:var(--aura-ink-faint)!important;cursor:default}
.aura-plans__note{font-size:.85rem}

/* Product page: the Vastu details tab. Label and value side by side, stacked
   on a phone. */
.aura-vastu-details{display:grid;grid-template-columns:minmax(9rem,max-content) 1fr;gap:.6rem 1.5rem;margin:0}
.aura-vastu-details dt{color:var(--aura-ink-muted);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}
.aura-vastu-details dd{margin:0;color:var(--aura-ink)}
@media (max-width:560px){.aura-vastu-details{grid-template-columns:1fr;gap:.2rem}.aura-vastu-details dd{margin-bottom:.6rem}}

/* -------------------------------------------------------------------------
 * The Book an audit form. A glass card on the dark ground; fields two to a
 * row on a wide screen, one on a phone. The honeypot is off-screen, not
 * display:none, so a bot that skips hidden fields still fills it.
 * ---------------------------------------------------------------------- */
.aura-booking{display:grid;gap:1.25rem;margin-block:2rem 3rem;padding:clamp(1.25rem,4vw,2.25rem);border:1px solid rgba(138,43,226,.25);border-radius:16px;background:rgba(255,255,255,.035);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.aura-booking > *{margin:0}
.aura-booking__title{font-size:clamp(1.4rem,3vw,1.9rem);color:var(--aura-ink)}
.aura-booking__intro{color:var(--aura-ink-subtle)}
.aura-booking__group{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:.9rem 1.25rem;margin:0;padding:1rem 0 0;border:0;border-top:1px solid var(--aura-line)}
.aura-booking__group legend{padding:0 0 .25rem;color:var(--aura-gold);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.aura-booking__field{display:grid;gap:.35rem;align-content:start;color:var(--aura-ink-subtle);font-size:.9rem}
.aura-booking__field em{color:var(--aura-ink-faint);font-style:normal;font-size:.8rem}
.aura-booking__field small{color:var(--aura-ink-faint);font-size:.78rem;line-height:1.4}
.aura-booking__field small a{color:var(--aura-cyan)}
.aura-booking__field:has(textarea),.aura-booking__field:has(input[type="file"]){grid-column:1 / -1}
.aura-booking input[type="text"],.aura-booking input[type="email"],.aura-booking input[type="tel"],.aura-booking select,.aura-booking textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--aura-line);border-radius:10px;background:var(--aura-paper-2);color:var(--aura-ink);font:inherit}
.aura-booking input:focus-visible,.aura-booking select:focus-visible,.aura-booking textarea:focus-visible{outline:2px solid var(--aura-cyan);outline-offset:1px}
.aura-booking input[type="file"]{padding:.6rem;border:1px dashed rgba(0,229,255,.35);border-radius:10px;background:rgba(0,229,255,.04);color:var(--aura-ink-subtle);font:inherit;cursor:pointer}
.aura-booking__choices{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;color:var(--aura-ink)}
.aura-booking__choices label{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}
.aura-booking__consent{display:flex;gap:.6rem;align-items:flex-start;color:var(--aura-ink-subtle);font-size:.85rem}
.aura-booking__consent a{color:var(--aura-cyan)}
.aura-booking__consent input{margin-top:.2rem}
.aura-booking__hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.aura-booking__error{padding:.75rem 1rem;border:1px solid var(--aura-alert);border-radius:10px;color:var(--aura-ink);background:rgba(229,72,77,.12)}
.aura-booking--done h2{color:var(--aura-gold)}

/* Booking form on a phone: nothing may be wider than the card.
   A fieldset will not shrink below its content unless told to, grid items
   default to min-width:auto, and width:100% plus padding overflows without
   border-box — each of those pushed a field past the card's edge. */
.aura-booking,.aura-booking *,.aura-booking *::before,.aura-booking *::after{box-sizing:border-box}
.aura-booking{max-width:100%;min-width:0;overflow-wrap:anywhere}
.aura-booking__group{min-width:0;max-width:100%}
.aura-booking__field,.aura-booking__choices,.aura-booking__consent{min-width:0;max-width:100%}
.aura-booking input,.aura-booking select,.aura-booking textarea{max-width:100%;min-width:0}
.aura-booking input[type="file"]{width:100%;font-size:.85rem}
.aura-booking input[type="file"]::file-selector-button{margin-right:.6rem;padding:.45rem .8rem;border:0;border-radius:8px;background:var(--aura-paper-2);color:var(--aura-ink);font:inherit;cursor:pointer}
.aura-booking__actions .aura-magnetic{max-width:100%;white-space:normal}
@media (max-width:30rem){.aura-booking{padding:1.1rem}.aura-booking__choices{flex-direction:column;gap:.5rem}}

/* -------------------------------------------------------------------------
 * Phones: nothing wider than the screen
 *
 * Cinzel sets wide. At the display sizes' 2.6rem floor a single word such as
 * "correction" is wider than a 320px phone's column, and a heading cannot
 * wrap inside a word, so it ran off the edge. Below 30rem the floors drop
 * and a word that still cannot fit is allowed to break.
 * ---------------------------------------------------------------------- */

.aura-page__content h1,
.aura-page__content h2,
.aura-page__content h3,
.aura-display-sm,
.aura-display-md,
.aura-display-lg {
	overflow-wrap: break-word;
}

.aura-section__split > * {
	min-width: 0;
	max-width: 100%;
}

@media (max-width: 30rem) {
	.aura-display-sm {
		font-size: clamp(1.6rem, 7vw, 2rem);
	}

	.aura-display-md,
	.aura-page--full .aura-page__content h2 {
		font-size: clamp(1.75rem, 8.5vw, 2.6rem);
	}

	.aura-display-lg {
		font-size: clamp(2rem, 10vw, 2.9rem);
	}

	.aura-section,
	.aura-zonegrid {
		padding-inline: 1rem;
	}

	.wrap {
		padding-inline: 1rem;
	}
}

/* -------------------------------------------------------------------------
 * Books on Kindle — [aura_books]
 * ---------------------------------------------------------------------- */

.aura-books {
	display: grid;
	gap: 1.5rem;
	margin: 2.5rem 0 0;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
}

.aura-kbook {
	display: grid;
	grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
	padding: 1.5rem;
	border-radius: 24px;
}

.aura-kbook__cover {
	display: block;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 18px 40px -18px rgba(138, 43, 226, 0.6);
	transition: transform 0.5s var(--aura-ease);
}

.aura-kbook__cover:hover { transform: translateY(-4px); }

.aura-kbook__cover img {
	display: block;
	width: 100%;
	height: auto;
}

.aura-kbook__title {
	margin: 0.4rem 0 0;
	font-family: var(--aura-display);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
}

.aura-kbook__sub {
	margin: 0.3rem 0 0;
	font-family: var(--aura-serif);
	font-style: italic;
	color: var(--aura-ink-subtle);
}

.aura-kbook__blurb {
	margin: 0.9rem 0 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--aura-ink-subtle);
}

.aura-kbook__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.2rem 0 0;
}

.aura-books__disclosure {
	margin: 1rem 0 0;
	font-size: 0.8rem;
	color: var(--aura-ink-faint);
}

@media (max-width: 30rem) {
	.aura-kbook {
		grid-template-columns: 1fr;
	}

	.aura-kbook__cover {
		max-width: 11rem;
	}
}