/*
Theme Name: Numyra
Theme URI: https://mynumyra.com
Author: Numyra Media
Description: Custom theme for MyNumyra.com — numerology and astrology calculators, explained honestly. Desk-based organizational authorship, no fabricated personas.
Version: 1.0.0
Text Domain: numyra
*/

/* ==========================================================================
   Design tokens — from Numyra Design System v1.0 (2026-09-27), WCAG-verified
   ========================================================================== */
:root {
	/* Core palette */
	--nx-indigo: #1B1B3A;
	--nx-indigo-hover: #2E2E5C;
	--nx-indigo-active: #12122A;
	--nx-gold: #D4A857;
	--nx-gold-hover: #C99A45;
	--nx-gold-active: #B98B3A;
	--nx-cream: #FAF7F2;
	--nx-sand: #F3EEE5;
	--nx-surface: #FFFFFF;
	--nx-line: #E7E1D6;
	--nx-line-soft: #EFEAE1;

	/* Text */
	--nx-charcoal: #2B2A33;
	--nx-muted: #5E5B68;
	--nx-placeholder: #6E6A77;
	--nx-disabled: #6E6A77;

	/* Accessible "ink" variants — text-safe on Cream/Sand/White (verified AA) */
	--nx-gold-ink: #8A6420;
	--nx-sage-ink: #4A6B5F;
	--nx-terracotta-ink: #9A4F35;

	/* Decorative-only — never as small text on light backgrounds */
	--nx-sage: #6B8F82;
	--nx-terracotta: #B9694C;

	/* Dark-surface variants (Indigo cards) */
	--nx-on-indigo: #FAF7F2;
	--nx-on-indigo-muted: #D8D6E6;
	--nx-on-indigo-faint: #B9B6CC;
	--nx-indigo-panel: #24244A;
	--nx-indigo-border: #34345A;
	--nx-indigo-border-soft: #3A3A66;

	/* Inputs */
	--nx-input-border: #8F887A;
	--nx-input-error-border: #B9694C;
	--nx-input-error-bg: #FFF9F6;
	--nx-input-success-border: #6B8F82;
	--nx-tint-indigo: #EEEDF4;

	/* Status badges */
	--nx-badge-updated-bg: #DCE6E1;
	--nx-badge-corrected-bg: #F3E1D8;

	/* Type */
	--nx-font-display: 'Fraunces', Georgia, serif;
	--nx-font-body: 'Inter', system-ui, sans-serif;
	--nx-font-mono: 'JetBrains Mono', monospace;

	/* Spacing (4pt scale) */
	--nx-space-1: 4px;
	--nx-space-2: 8px;
	--nx-space-3: 12px;
	--nx-space-4: 16px;
	--nx-space-5: 24px;
	--nx-space-6: 32px;
	--nx-space-7: 48px;
	--nx-space-8: 64px;
	--nx-space-9: 96px;

	/* Radii */
	--nx-radius-sm: 4px;
	--nx-radius-md: 8px;
	--nx-radius-lg: 14px;
	--nx-radius-pill: 999px;

	/* Layout */
	--nx-max-content: 1200px;
	--nx-max-reading: 720px;

	/* Elevation */
	--nx-shadow-raised: 0 1px 2px rgba(27,27,58,0.06), 0 12px 32px rgba(27,27,58,0.10);
	--nx-shadow-header: 0 1px 0 var(--nx-line), 0 4px 16px rgba(27,27,58,0.06);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--nx-cream);
	color: var(--nx-charcoal);
	font-family: var(--nx-font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--nx-indigo); text-decoration: none; }
a:hover { color: var(--nx-gold-ink); }
::placeholder { color: var(--nx-placeholder); opacity: 1; }
:focus-visible {
	outline: 3px solid var(--nx-indigo);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--nx-cream);
}
h1, h2, h3 { font-family: var(--nx-font-display); font-weight: 500; color: var(--nx-indigo); margin: 0; }
.nx-container { max-width: var(--nx-max-content); margin: 0 auto; padding: 0 24px; }
.nx-reading { max-width: var(--nx-max-reading); }
.nx-visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.nx-skip-link {
	position: absolute; left: 12px; top: -60px; z-index: 100;
	background: var(--nx-indigo); color: var(--nx-cream);
	padding: 12px 20px; border-radius: var(--nx-radius-md);
	transition: top .15s ease;
}
.nx-skip-link:focus { top: 12px; color: var(--nx-cream); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.nx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 22px; border-radius: var(--nx-radius-pill);
	font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
	border: 0; text-decoration: none; line-height: 1;
}
.nx-btn-primary { background: var(--nx-indigo); color: var(--nx-cream); }
.nx-btn-primary:hover { background: var(--nx-indigo-hover); color: var(--nx-cream); }
.nx-btn-primary:active { background: var(--nx-indigo-active); }
.nx-btn-gold { background: var(--nx-gold); color: var(--nx-indigo); }
.nx-btn-gold:hover { background: var(--nx-gold-hover); color: var(--nx-indigo); }
.nx-btn-gold:active { background: var(--nx-gold-active); }
.nx-btn-outline { background: transparent; border: 1.5px solid var(--nx-indigo); color: var(--nx-indigo); }
.nx-btn-outline:hover { background: var(--nx-tint-indigo); color: var(--nx-indigo); }
.nx-btn[disabled], .nx-btn.is-disabled { background: var(--nx-line); color: var(--nx-disabled); cursor: not-allowed; }

/* ==========================================================================
   Forms
   ========================================================================== */
.nx-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--nx-charcoal); }
.nx-input, .nx-select {
	height: 52px; padding: 0 14px; border: 1.5px solid var(--nx-input-border);
	border-radius: var(--nx-radius-md); font: inherit; font-size: 17px;
	color: var(--nx-charcoal); background: var(--nx-surface); width: 100%;
}
.nx-input:focus, .nx-select:focus { border-color: var(--nx-indigo); box-shadow: 0 0 0 3px var(--nx-tint-indigo); outline: none; }
.nx-input[aria-invalid="true"] { border-color: var(--nx-input-error-border); background: var(--nx-input-error-bg); }
.nx-field-error { font-size: 13px; color: var(--nx-terracotta-ink); }
.nx-field-success { font-size: 13px; color: var(--nx-sage-ink); }

/* ==========================================================================
   Header (NxHeader)
   ========================================================================== */
.nx-header { background: var(--nx-cream); border-bottom: 1px solid var(--nx-line); position: sticky; top: 0; z-index: 50; }
.nx-header.is-compact { box-shadow: var(--nx-shadow-header); }
.nx-header-inner { max-width: var(--nx-max-content); margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; gap: 24px; transition: height .2s ease; }
.nx-header.is-compact .nx-header-inner { height: 56px; }
.nx-logo { flex: none; display: flex; align-items: center; gap: 10px; color: var(--nx-indigo); min-height: 44px; }
.nx-logo-word { font-family: var(--nx-font-display); font-size: 25px; font-weight: 500; letter-spacing: -0.01em; }
.nx-nav { flex: 1; min-width: 0; }
.nx-nav-list { margin: 0; padding: 0; list-style: none; display: flex; gap: 2px; }
.nx-nav-item { position: relative; }
.nx-nav-link, .nx-nav-trigger {
	display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
	border-radius: var(--nx-radius-md); font-size: 15px; font-weight: 500;
	text-decoration: none; color: var(--nx-charcoal); background: transparent; border: 0; cursor: pointer; font-family: inherit;
}
.nx-nav-link:hover, .nx-nav-trigger:hover { background: var(--nx-tint-indigo); color: var(--nx-indigo); }
.nx-nav-link[aria-current="page"], .nx-nav-trigger[aria-expanded="true"] { background: var(--nx-tint-indigo); }
.nx-dropdown {
	position: absolute; top: 100%; left: 0; padding-top: 6px; z-index: 40; min-width: 260px;
}
.nx-dropdown-inner {
	background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-radius-lg);
	box-shadow: var(--nx-shadow-raised); padding: 8px; display: flex; flex-direction: column;
}
.nx-dropdown-grid { display: grid; gap: 0 4px; }
.nx-dropdown-link { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 6px 12px; border-radius: var(--nx-radius-md); text-decoration: none; color: var(--nx-indigo); }
.nx-dropdown-link:hover { background: var(--nx-sand); color: var(--nx-indigo); }
.nx-dropdown-link strong { font-size: 15px; font-weight: 500; }
.nx-dropdown-link span { font-size: 12px; color: var(--nx-muted); }
.nx-dropdown-all { display: flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 12px; border-top: 1px solid var(--nx-line-soft); font-size: 14px; font-weight: 600; color: var(--nx-indigo); text-decoration: none; }
.nx-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nx-icon-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--nx-radius-pill); border: 1px solid var(--nx-line); color: var(--nx-indigo); background: var(--nx-surface); }
.nx-icon-btn:hover { border-color: var(--nx-indigo); color: var(--nx-indigo); }
.nx-menu-toggle { display: none; }
.nx-mobile-menu { border-top: 1px solid var(--nx-line); background: var(--nx-cream); max-height: calc(100vh - 64px); overflow-y: auto; }
.nx-mobile-menu-inner { padding: 8px 24px 24px; display: flex; flex-direction: column; }
.nx-mobile-group { display: flex; flex-direction: column; border-bottom: 1px solid var(--nx-line); padding: 8px 0; }
.nx-mobile-group > a { display: flex; align-items: center; min-height: 48px; font-family: var(--nx-font-display); font-size: 22px; font-weight: 500; color: var(--nx-indigo); text-decoration: none; }
.nx-mobile-sub { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 0 12px; padding-bottom: 6px; }
.nx-mobile-sub a { display: flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--nx-charcoal); text-decoration: none; }

@media (max-width: 899px) {
	.nx-nav { display: none; }
	.nx-menu-toggle {
		display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
		border-radius: var(--nx-radius-pill); border: 1px solid var(--nx-indigo); background: transparent; color: var(--nx-indigo);
		font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
	}
	.nx-menu-toggle.is-open { background: var(--nx-indigo); color: var(--nx-cream); }
}

/* ==========================================================================
   Footer (NxFooter)
   ========================================================================== */
.nx-footer { background: var(--nx-indigo); color: var(--nx-on-indigo-muted); font-size: 15px; line-height: 1.6; }
.nx-footer-grid { max-width: var(--nx-max-content); margin: 0 auto; padding: 64px 24px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 40px 32px; }
.nx-footer-brand { grid-column: span 2; min-width: 0; max-width: 360px; display: flex; flex-direction: column; gap: 16px; }
.nx-footer-brand-row { display: flex; align-items: center; gap: 10px; }
.nx-footer-brand-word { font-family: var(--nx-font-display); font-size: 25px; font-weight: 500; color: var(--nx-on-indigo); }
.nx-footer-tagline { margin: 0; font-family: var(--nx-font-display); font-size: 19px; line-height: 1.4; color: var(--nx-on-indigo); }
.nx-footer-disclaimer { margin: 0; font-size: 13px; color: var(--nx-on-indigo-faint); }
.nx-footer-social { margin: 4px 0 0; padding: 0; list-style: none; display: flex; gap: 8px; }
.nx-footer-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--nx-radius-pill); border: 1px solid var(--nx-indigo-border-soft); color: var(--nx-on-indigo); }
.nx-footer-social a:hover { border-color: var(--nx-gold); color: var(--nx-gold); }
.nx-footer-nav { display: flex; flex-direction: column; gap: 8px; }
.nx-footer-nav h2 { margin: 0 0 4px; font-family: var(--nx-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-gold); }
.nx-footer-nav a { color: var(--nx-on-indigo-muted); text-decoration: none; }
.nx-footer-nav a:hover { color: var(--nx-on-indigo); text-decoration: underline; }
.nx-footer-privacy-btn { align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; color: var(--nx-on-indigo-muted); cursor: pointer; display: flex; align-items: center; gap: 6px; text-align: left; }
.nx-footer-privacy-btn:hover { color: var(--nx-on-indigo); text-decoration: underline; }
.nx-footer-bottom { max-width: var(--nx-max-content); margin: 0 auto; padding: 20px 24px 32px; border-top: 1px solid var(--nx-indigo-border); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; color: var(--nx-on-indigo-faint); }
.nx-footer-bottom a { color: var(--nx-gold); }

/* ==========================================================================
   Home hero + sections
   ========================================================================== */
.nx-hero-band { background-color: var(--nx-indigo); background-image: linear-gradient(100deg, var(--nx-indigo) 0%, var(--nx-indigo) 30%, rgba(27,27,58,0.55) 55%, rgba(27,27,58,0.15) 75%), url('assets/images/homepage-hero-constellations.webp'); background-size: cover; background-position: center; }
.nx-hero { max-width: var(--nx-max-content); margin: 0 auto; padding: clamp(40px,7vw,96px) 24px clamp(40px,6vw,72px); display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.nx-hero-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.nx-overline { font-family: var(--nx-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-gold-ink); }
.nx-hero-band .nx-overline { color: var(--nx-gold); }
.nx-h1 { font-size: clamp(40px,6vw,66px); line-height: 1.03; letter-spacing: -0.02em; text-wrap: balance; }
.nx-hero-band .nx-h1 { color: var(--nx-on-indigo); }
.nx-lede { margin: 0; max-width: 520px; font-size: 19px; line-height: 1.6; color: var(--nx-muted); text-wrap: pretty; }
.nx-hero-band .nx-lede { color: var(--nx-on-indigo-muted); }
.nx-hero-form { flex: 1 1 380px; max-width: 460px; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--nx-shadow-raised); }
.nx-hero-band .nx-hero-form { box-shadow: 0 8px 40px rgba(0,0,0,0.35); }
.nx-trust-strip { background: var(--nx-sand); border-top: 1px solid var(--nx-line); border-bottom: 1px solid var(--nx-line); }
.nx-trust-strip-inner { max-width: var(--nx-max-content); margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: center; font-size: 14px; color: var(--nx-charcoal); }
.nx-trust-strip-inner a { color: var(--nx-indigo); text-underline-offset: 3px; }
.nx-section { max-width: var(--nx-max-content); margin: 0 auto; padding: 96px 24px 0; display: flex; flex-direction: column; gap: 28px; }
.nx-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.nx-h2 { font-size: clamp(28px,3.4vw,38px); line-height: 1.15; }
.nx-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; }
.nx-card { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--nx-charcoal); }
.nx-card:hover { border-color: var(--nx-indigo); color: var(--nx-charcoal); }
.nx-card-glyph { font-family: var(--nx-font-mono); font-size: 34px; line-height: 1; color: var(--nx-gold-ink); }
.nx-card-title { font-family: var(--nx-font-display); font-size: 22px; font-weight: 500; color: var(--nx-indigo); }
.nx-card-desc { font-size: 15px; line-height: 1.5; color: var(--nx-muted); flex: 1; }
.nx-card-meta { font-size: 13px; color: var(--nx-sage-ink); }
.nx-pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 20px; }
.nx-pillar-card { border-radius: 18px; padding: clamp(24px,4vw,40px); display: flex; flex-direction: column; gap: 18px; }
.nx-pillar-card.is-dark { background: var(--nx-indigo); color: var(--nx-on-indigo); }
.nx-pillar-card.is-light { background: var(--nx-surface); border: 1px solid var(--nx-line); }
.nx-pillar-number { font-family: var(--nx-font-mono); font-size: 56px; line-height: 1; color: var(--nx-gold); }
.nx-pillar-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--nx-indigo-border); }
.nx-pillar-card.is-light .nx-pillar-list { border-top-color: var(--nx-line); }
.nx-pillar-list li { border-bottom: 1px solid var(--nx-indigo-border); }
.nx-pillar-card.is-light .nx-pillar-list li { border-bottom-color: var(--nx-line); }
.nx-pillar-list a { display: flex; justify-content: space-between; padding: 14px 0; color: var(--nx-on-indigo); text-decoration: none; }
.nx-pillar-card.is-light .nx-pillar-list a { color: var(--nx-indigo); }
.nx-pillar-list a:hover { color: var(--nx-gold); }
.nx-pillar-card.is-light .nx-pillar-list a:hover { color: var(--nx-gold-ink); }

/* ==========================================================================
   Ad slots — reserved height, labelled, non-intrusive
   ========================================================================== */
.nx-ad-slot { background: var(--nx-sand); border: 1px dashed #CFC6B6; border-radius: var(--nx-radius-md); display: flex; align-items: center; justify-content: center; font-family: var(--nx-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-muted); margin: 0 auto; }
.nx-ad-slot--leaderboard { max-width: 728px; height: 100px; width: 100%; }
.nx-ad-slot--in-content { max-width: 336px; height: 280px; width: 100%; margin: 12px auto; }
.nx-ad-slot--sidebar { max-width: 300px; height: 250px; width: 100%; }
@media (max-width: 1023px) {
	.nx-ad-slot--in-content { max-width: 300px; height: 250px; }
}

/* ==========================================================================
   Calculator template
   ========================================================================== */
.nx-calc-layout { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; margin-top: 24px; }
.nx-calc-main { flex: 1 1 600px; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 28px; }
.nx-breadcrumb { font-size: 13px; color: var(--nx-muted); display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nx-breadcrumb a { color: var(--nx-muted); }
.nx-breadcrumb [aria-current="page"] { color: var(--nx-charcoal); }
.nx-trust-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--nx-muted); align-items: center; }
.nx-trust-meta strong, .nx-trust-meta time { color: var(--nx-charcoal); font-weight: 500; }
.nx-trust-meta a { color: var(--nx-indigo); text-underline-offset: 3px; }
.nx-update-line { margin: 0; display: flex; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.5; color: var(--nx-charcoal); }
.nx-badge { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--nx-indigo); }
.nx-badge--updated { background: var(--nx-badge-updated-bg); }
.nx-badge--corrected { background: var(--nx-badge-corrected-bg); }
.nx-calc-form { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.nx-calc-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); gap: 12px; }
.nx-privacy-note { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--nx-muted); }
.nx-privacy-note a { color: var(--nx-indigo); }
.nx-result-card { background: var(--nx-indigo); color: var(--nx-on-indigo); border-radius: var(--nx-radius-lg); padding: clamp(24px,4vw,40px); display: flex; flex-direction: column; gap: 20px; box-shadow: var(--nx-shadow-raised); min-height: 280px; }
.nx-result-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.nx-result-label { margin: 0; font-size: 15px; font-weight: 500; color: var(--nx-on-indigo-muted); }
.nx-result-date { font-family: var(--nx-font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--nx-on-indigo-faint); }
.nx-result-body { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; }
.nx-result-number { font-family: var(--nx-font-mono); font-size: clamp(96px,16vw,160px); line-height: 0.85; font-weight: 500; letter-spacing: -0.03em; color: var(--nx-gold); }
.nx-result-detail { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; min-width: 0; }
.nx-master-badge { align-self: flex-start; padding: 3px 10px; border: 1px solid var(--nx-gold); border-radius: 999px; font-family: var(--nx-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nx-gold); }
.nx-archetype { font-family: var(--nx-font-display); font-size: clamp(26px,3vw,34px); font-weight: 500; line-height: 1.1; }
.nx-summary { margin: 0; font-size: 16px; line-height: 1.6; color: var(--nx-on-indigo-muted); }
.nx-steps { margin: 0; padding: 16px 18px; list-style: none; background: var(--nx-indigo-panel); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.nx-steps li { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 12px; font-family: var(--nx-font-mono); font-size: 13px; line-height: 1.5; }
.nx-steps li span:first-child { color: var(--nx-on-indigo-faint); }
.nx-steps li span:last-child { color: var(--nx-on-indigo); overflow-wrap: anywhere; }
.nx-share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--nx-indigo-border); padding-top: 16px; }
.nx-share-row span:first-child { font-size: 13px; color: var(--nx-on-indigo-muted); margin-right: 4px; }
.nx-share-btn { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--nx-indigo-border-soft); background: transparent; color: var(--nx-on-indigo); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.nx-share-btn:hover { border-color: var(--nx-gold); }
.nx-share-note { flex-basis: 100%; font-size: 12px; line-height: 1.5; color: var(--nx-on-indigo-faint); }
.nx-disclaimer { margin: 0; padding: 14px 16px; background: var(--nx-sand); border-radius: var(--nx-radius-md); font-size: 14px; line-height: 1.55; color: var(--nx-charcoal); }
.nx-takeaways { margin: 0; padding: 20px 24px; background: var(--nx-tint-indigo); border-radius: var(--nx-radius-lg); display: flex; flex-direction: column; gap: 10px; }
.nx-takeaways h2 { font-size: 15px; font-family: var(--nx-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-indigo); }
.nx-takeaways ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.5; color: var(--nx-charcoal); }
.nx-details { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-radius-lg); }
.nx-details summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
.nx-details summary::-webkit-details-marker { display: none; }
.nx-details-body { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.nx-worked-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-radius-lg); overflow: hidden; }
.nx-worked-list li { display: grid; grid-template-columns: minmax(90px,120px) minmax(0,1fr); gap: 4px 20px; padding: 16px 20px; border-top: 1px solid var(--nx-line-soft); }
.nx-worked-list li:first-child { border-top: 0; }
.nx-worked-label { font-size: 13px; font-weight: 600; color: var(--nx-indigo); }
.nx-worked-math { font-family: var(--nx-font-mono); font-size: 15px; color: var(--nx-indigo); overflow-wrap: anywhere; }
.nx-worked-note { font-size: 14px; line-height: 1.55; color: var(--nx-muted); }
.nx-cross-check { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 20px; background: var(--nx-indigo); border-radius: var(--nx-radius-lg); color: var(--nx-on-indigo); }
blockquote.nx-quote { margin: 0; padding: 20px 24px; border-left: 4px solid var(--nx-gold); background: var(--nx-sand); border-radius: 0 var(--nx-radius-md) var(--nx-radius-md) 0; font-family: var(--nx-font-display); font-size: 19px; line-height: 1.5; color: var(--nx-indigo); }
blockquote.nx-quote cite { display: block; margin-top: 10px; font-family: var(--nx-font-body); font-size: 14px; font-style: normal; color: var(--nx-muted); }
.nx-sources { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--nx-line); padding-top: 24px; }
.nx-sources h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-indigo); }
.nx-sources ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.55; color: var(--nx-muted); }
.nx-sources a { color: var(--nx-indigo); }
.nx-faq-item { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 12px; }
.nx-faq-item summary { list-style: none; cursor: pointer; padding: 16px 20px; min-height: 44px; display: flex; justify-content: space-between; gap: 16px; font-size: 17px; font-weight: 600; color: var(--nx-indigo); }
.nx-faq-item summary::-webkit-details-marker { display: none; }
.nx-faq-item p { margin: 0; padding: 0 20px 18px; font-size: 16px; line-height: 1.65; color: var(--nx-charcoal); }
.nx-aside { flex: 0 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.nx-aside.is-sticky { position: sticky; top: 80px; }
.nx-related-nav { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.nx-related-nav h2 { margin: 0 0 8px; font-size: 20px; }
.nx-related-nav a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--nx-line-soft); text-decoration: none; color: var(--nx-indigo); }
.nx-related-nav a:first-of-type { border-top: 0; }
.nx-related-nav a:hover { color: var(--nx-gold-ink); }
.nx-related-nav small { font-size: 12px; color: var(--nx-muted); display: block; }

/* ==========================================================================
   Article cards (blog archive + homepage "Latest from the blog")
   ========================================================================== */
.nx-article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 24px; }
.nx-article-card { display: flex; flex-direction: column; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-radius-lg); overflow: hidden; text-decoration: none; color: var(--nx-charcoal); transition: border-color .15s ease, box-shadow .15s ease; }
.nx-article-card:hover { border-color: var(--nx-indigo); color: var(--nx-charcoal); box-shadow: var(--nx-shadow-raised); }
.nx-article-cover { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; font-family: var(--nx-font-mono); font-size: clamp(32px,6vw,48px); font-weight: 500; }
.nx-article-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nx-article-cat { font-family: var(--nx-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-sage-ink); }
.nx-article-title { font-family: var(--nx-font-display); font-size: 21px; font-weight: 500; line-height: 1.3; color: var(--nx-indigo); }
.nx-article-excerpt { font-size: 15px; line-height: 1.55; color: var(--nx-muted); flex: 1; }
.nx-article-meta { font-size: 13px; color: var(--nx-muted); margin-top: 4px; }

/* Article header band (single post) */
.nx-article-hero { background: var(--nx-sand); border-bottom: 1px solid var(--nx-line); }
.nx-article-hero-inner { max-width: var(--nx-max-content); margin: 0 auto; padding: 20px 24px clamp(32px,5vw,56px); display: flex; flex-direction: column; gap: 16px; }
.nx-article-lede { margin: 0; max-width: 720px; font-size: 19px; line-height: 1.6; color: var(--nx-muted); }

/* Table of contents */
.nx-toc { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.nx-toc h2 { margin: 0 0 10px; font-family: var(--nx-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-gold-ink); }
.nx-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.nx-toc li { border-top: 1px solid var(--nx-line-soft); }
.nx-toc li:first-child { border-top: 0; }
.nx-toc a { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 6px; padding: 9px 0; font-size: 14px; line-height: 1.4; text-decoration: none; color: var(--nx-charcoal); }
.nx-toc a:hover { color: var(--nx-gold-ink); }
.nx-toc a span:first-child { font-family: var(--nx-font-mono); font-size: 12px; color: var(--nx-muted); padding-top: 1px; }

/* Article body typography */
.nx-article-body { font-size: 18px; line-height: 1.72; display: flex; flex-direction: column; gap: 22px; }
.nx-article-body h2 { font-size: clamp(24px,3vw,30px); line-height: 1.25; margin-top: 8px; scroll-margin-top: 80px; }
.nx-article-body table { width: 100%; border-collapse: collapse; }
.nx-article-body img { border-radius: var(--nx-radius-md); }

/* Pagination */
.nx-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 16px; }
.nx-pagination .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--nx-line); background: var(--nx-surface); color: var(--nx-indigo); font-size: 14px; font-weight: 600; text-decoration: none; }
.nx-pagination .page-numbers.current { background: var(--nx-indigo); border-color: var(--nx-indigo); color: var(--nx-cream); }
.nx-pagination .page-numbers:hover:not(.current) { border-color: var(--nx-indigo); }

/* ==========================================================================
   Consent banner
   ========================================================================== */
.nx-consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; max-width: 440px; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(27,27,58,0.06), 0 16px 40px rgba(27,27,58,0.16); padding: 18px; flex-direction: column; gap: 12px; color: var(--nx-charcoal); }
.nx-consent:not([hidden]) { display: flex; }
.nx-consent-head { display: flex; gap: 12px; align-items: flex-start; }
.nx-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nx-consent-manage-btn { align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--nx-indigo); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nx-consent-cats { margin: 0; padding: 0; list-style: none; flex-direction: column; border-top: 1px solid var(--nx-line-soft); }
.nx-consent-cats:not([hidden]) { display: flex; }
.nx-consent-cats li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--nx-line-soft); }
.nx-toggle { width: 48px; height: 28px; border-radius: 999px; border: 1.5px solid var(--nx-input-border); background: var(--nx-input-border); position: relative; cursor: pointer; padding: 0; }
.nx-toggle[aria-checked="true"] { background: var(--nx-indigo); border-color: var(--nx-indigo); }
.nx-toggle-knob { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 999px; background: var(--nx-surface); transition: left .15s; }
.nx-toggle[aria-checked="true"] .nx-toggle-knob { left: 22px; }

@media (max-width: 640px) {
	.nx-consent { max-width: none; }
}