* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	background: #0A0A0A;
	color: #F0EDE6;
	font-family: 'Inter', sans-serif;
	overflow-x: hidden;
	position: relative;
}

/* Rule 1: Ambient teal glow — fixed layer behind all content */
.ambient-glow {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(77, 198, 221, 0.18) 0%, transparent 55%),
		radial-gradient(ellipse 60% 50% at 15% 40%, rgba(77, 198, 221, 0.10) 0%, transparent 60%),
		radial-gradient(ellipse 70% 60% at 85% 70%, rgba(77, 198, 221, 0.12) 0%, transparent 60%),
		radial-gradient(ellipse 100% 70% at 50% 110%, rgba(77, 198, 221, 0.14) 0%, transparent 55%),
		#0A0A0A;
}

/* Rule 2: Frosted glass cards */
.aeonnn-card {
	background-color: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1rem;
}

/* Rule 3: Primary buttons — gold→teal gradient at 135° */
.btn-primary {
	background-image: linear-gradient(135deg, #D4A853 0%, #1DA99C 100%);
	color: #FFFFFF;
	border: none;
	transition: filter 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.btn-primary:hover {
	filter: brightness(1.08);
	box-shadow: 0 0 40px rgba(29, 169, 156, 0.35), 0 0 24px rgba(212, 168, 83, 0.25);
}
.btn-primary:disabled {
	filter: grayscale(0.4) brightness(0.7);
	cursor: not-allowed;
}

/* Rule 4: Progress / slider gradient (gold→cyan) */
.progress-gradient {
	background-image: linear-gradient(135deg, #D4A853 0%, #4DC6DD 100%);
}

/* Rule 6: Frosty icon wrapper */
.icon-frost {
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Rule 7: Top-level section headers — teal */
.aeonnn-header {
	color: #4DC6DD;
}

/* Rule 8: Frosted glass input */
.input-glass {
	background-color: rgba(255, 255, 255, 0.04);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 0.75rem;
	color: #F0EDE6;
	transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.input-glass::placeholder {
	color: rgba(160, 160, 160, 0.5);
}
.input-glass:focus {
	outline: none;
	border-color: rgba(77, 198, 221, 0.45);
	background-color: rgba(255, 255, 255, 0.06);
}

/* Selection buttons (gender / goals) — glass off, gradient on */
.selection-btn {
	background-color: rgba(255, 255, 255, 0.04);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(240, 237, 230, 0.7);
	transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.selection-btn:hover {
	border-color: rgba(255, 255, 255, 0.18);
	color: #F0EDE6;
}
.selection-btn.is-active {
	background-image: linear-gradient(135deg, #D4A853 0%, #1DA99C 100%);
	background-color: transparent;
	border-color: transparent;
	color: #FFFFFF;
}

/* Toggle switch — off uses glass, on uses gradient */
.ob-toggle.is-on {
	background-image: linear-gradient(135deg, #D4A853 0%, #1DA99C 100%);
	background-color: transparent;
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.orb, .pulse-ring, .marquee-track, .breathe, .flow-line, .btn-shimmer::after { animation: none !important; }
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background: #0A0A0A;
}

::-webkit-scrollbar-thumb {
	background: #2A2A30;
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: #D4A853;
}


/* Reveal animations — slow, luxurious easing */
.reveal {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal-delay-1 {
	transition-delay: 0.15s;
}

.reveal-delay-2 {
	transition-delay: 0.3s;
}

.reveal-delay-3 {
	transition-delay: 0.45s;
}

.reveal-delay-4 {
	transition-delay: 0.6s;
}

.reveal-delay-5 {
	transition-delay: 0.75s;
}

/* Fade from left/right */
.reveal-left {
	opacity: 0;
	transform: translateX(-50px);
	transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.reveal-right {
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.reveal-left.visible,
.reveal-right.visible {
	opacity: 1;
	transform: translateX(0);
}

/* Scale reveal */
.reveal-scale {
	opacity: 0;
	transform: scale(0.92);
	transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1), transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.reveal-scale.visible {
	opacity: 1;
	transform: scale(1);
}

/* Glowing border */
.glow-border {
	position: relative;
}

.glow-border::before {
	background: linear-gradient(135deg, rgba(212, 168, 83, 0.3), transparent 50%, rgba(78, 205, 196, 0.3));
	border-radius: inherit;
	content: '';
	inset: -1px;
	-webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
	mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	padding: 1px;
	position: absolute;
	/* The masked ring still hit-tests as a full-size box, which would swallow every
	   click on the card's own content. Only the border is meant to be visible. */
	pointer-events: none;
}

/* Pillar card hover */
.pillar-card {
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.pillar-card:hover {
	box-shadow: 0 24px 70px rgba(212, 168, 83, 0.06);
	transform: translateY(-6px);
}

/* Tier card glow on hover */
.tier-card {
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.tier-card:hover {
	transform: translateY(-5px);
}

.tier-card.tier-evolution:hover {
	box-shadow: 0 0 70px rgba(212, 168, 83, 0.12);
}

.tier-card.tier-horizon:hover {
	box-shadow: 0 0 70px rgba(78, 205, 196, 0.12);
}

/* Animated underline */
.nav-link {
	position: relative;
}

.nav-link::after {
	background: #D4A853;
	bottom: -2px;
	content: '';
	height: 1px;
	left: 0;
	position: absolute;
	transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	width: 0;
}

.nav-link:hover::after {
	width: 100%;
}

/* Pulse ring animation for AEONNN Age */
.pulse-ring {
	animation: pulseRing 5s ease-in-out infinite;
}

@keyframes pulseRing {

	0%,
	100% {
		opacity: 0.25;
		transform: scale(1);
	}

	50% {
		opacity: 0.5;
		transform: scale(1.04);
	}
}

/* Typewriter cursor */
.type-cursor::after {
	animation: blink 1s infinite;
	color: #D4A853;
	content: '|';
}

@keyframes blink {

	0%,
	50% {
		opacity: 1;
	}

	51%,
	100% {
		opacity: 0;
	}
}

/* Section divider line */
.section-divider {
	background: linear-gradient(90deg, transparent, rgba(212, 168, 83, 0.2), rgba(78, 205, 196, 0.2), transparent);
	height: 1px;
}

/* Smooth counter */
.counter {
	font-variant-numeric: tabular-nums;
}

/* NNN arc motif */
.arc-motif {
	background: linear-gradient(135deg, #D4A853, #4ECDC4);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Flowing line animation */
.flow-line {
	animation: flowDraw 4.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
}

@keyframes flowDraw {
	to {
		stroke-dashoffset: 0;
	}
}

/* Button shimmer */
.btn-shimmer {
	overflow: hidden;
	position: relative;
}

.btn-shimmer::after {
	animation: shimmer 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
	background: linear-gradient(to right,
			transparent 0%,
			rgba(255, 255, 255, 0.04) 50%,
			transparent 100%);
	content: '';
	height: 200%;
	left: -50%;
	position: absolute;
	top: -50%;
	transform: rotate(30deg);
	width: 200%;
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%) rotate(30deg);
	}

	100% {
		transform: translateX(100%) rotate(30deg);
	}
}

/* FAQ accordion */
.faq-item {
	cursor: pointer;
}

.faq-question {
	transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item:hover .faq-question {
	color: #E8E8ED;
}

.faq-chevron {
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.open .faq-chevron {
	transform: rotate(180deg);
}

.faq-answer-wrap {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mobile nav */
.mobile-nav {
	transform: translateX(100%);
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-nav.open {
	transform: translateX(0);
}

/* Marquee */
.marquee-track {
	animation: marquee 60s linear infinite;
}

@keyframes marquee {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

/* Breathing animation for hero text */
.breathe {
	animation: breathe 8s ease-in-out infinite;
}

@keyframes breathe {

	0%,
	100% {
		opacity: 0.6;
	}

	50% {
		opacity: 1;
	}
}

/* ─── Intro / Lottie Loader ─── */
#intro-overlay {
	align-items: center;
	background:
		radial-gradient(ellipse 80% 60% at 50% 50%, rgba(77, 198, 221, 0.10) 0%, transparent 65%),
		#0A0A0A;
	display: flex;
	inset: 0;
	justify-content: center;
	overflow: hidden;
	position: fixed;
	z-index: 9999;
}

#intro-overlay.intro-fade-out {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

#intro-overlay.intro-hidden {
	display: none;
}

#intro-skip {
	background: transparent;
	border: 1px solid rgba(138, 138, 154, 0.25);
	border-radius: 9999px;
	color: #8A8A9A;
	cursor: pointer;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	letter-spacing: 0.15em;
	padding: 8px 20px;
	position: absolute;
	right: 32px;
	text-transform: uppercase;
	top: 28px;
	transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 10;
}

#intro-skip:hover {
	border-color: rgba(212, 168, 83, 0.4);
	color: #E8E8ED;
}

#intro-video {
	height: auto;
	width: min(90vw, 460px);
	/* The reveal is a pure-black frame with no alpha; screen blend drops the
	   black so the overlay's cyan glow shows through behind the mark. */
	mix-blend-mode: screen;
}

@media (min-width: 768px) {
	#intro-video {
		width: min(72vw, 640px);
	}
}

body.intro-active {
	overflow: hidden;
}

/* Persistent hero scroll cue — sits in the empty band under the nav, shown by
   main.js only when the hero's own cue is pushed below the fold (laptops), and
   faded out for good on the first scroll. */
.hero-scroll-cue {
	align-items: center;
	display: none;
	flex-direction: column;
	gap: 0.3rem;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 5.5rem;
	transform: translateX(-50%) translateY(-8px);
	transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 40;
}

.hero-scroll-cue.is-active {
	display: flex;
}

.hero-scroll-cue.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* The hero's own cue yields while the fixed one is on screen, and returns as
   that one retires on the first scroll. */
#heroScrollCueInline.is-superseded {
	opacity: 0;
}

.hero-scroll-cue-label {
	color: rgba(160, 160, 160, 0.45);
	font-size: 10px;
	letter-spacing: 0.3em;
	line-height: 1;
	text-transform: uppercase;
}

.hero-scroll-cue-line {
	animation: heroCueDrift 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
	background: linear-gradient(to bottom, rgba(212, 168, 83, 0.5), transparent);
	height: 14px;
	width: 1px;
}

@keyframes heroCueDrift {
	0%, 100% {
		opacity: 0.3;
		transform: translateY(-2px);
	}
	50% {
		opacity: 1;
		transform: translateY(2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-scroll-cue {
		transition: none;
	}

	.hero-scroll-cue-line {
		animation: none;
	}
}

/* Active nav link (current page) */
.nav-link.is-active {
	color: #F0EDE6;
}
.nav-link.is-active::after {
	width: 100%;
}

/* Page hero spacing (interior pages sit below the fixed nav) */
.page-top {
	padding-top: 8rem;
}

/* ─── Legal document shell (single card: tabs + one panel) ─── */
.legal-shell {
	display: flex;
	flex-direction: column;
}
.legal-tabs {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.25);
	padding: 0.65rem 0.75rem;
	flex-shrink: 0;
}
.legal-tabs-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	justify-content: center;
}
.legal-tab {
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 9999px;
	color: #A0A0A0;
	cursor: pointer;
	font-family: inherit;
	font-size: 10px;
	letter-spacing: 0.14em;
	padding: 0.5rem 0.85rem;
	text-transform: uppercase;
	transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.legal-tab:hover {
	color: #F0EDE6;
}
.legal-tab.is-active {
	background: rgba(212, 168, 83, 0.16);
	color: #E8C170;
}
.legal-panel[hidden] {
	display: none !important;
}
.legal-panel.is-active {
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.legal-panel-header {
	padding: 1.15rem 1.25rem 0.9rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	flex-shrink: 0;
}
@media (min-width: 1024px) {
	.legal-panel-header {
		padding: 1.35rem 1.75rem 1rem;
	}
}
.legal-panel-title {
	color: #F0EDE6;
	font-size: 1.125rem; /* text-lg */
	font-weight: 300;
	line-height: 1.3;
	margin: 0 0 0.35rem;
}
@media (min-width: 768px) {
	.legal-panel-title {
		font-size: 1.25rem;
	}
}
.legal-panel-meta {
	color: rgba(160, 160, 160, 0.55);
	font-size: 10px;
	letter-spacing: 0.04em;
	line-height: 1.45;
	margin: 0;
}
.legal-body {
	/* Matches FAQ / microcopy scale on other pages */
	font-size: 0.75rem; /* text-xs */
	line-height: 1.65;
	color: rgba(160, 160, 160, 0.82);
	/* Scroll inside the card only — page stays short */
	max-height: min(58vh, 520px);
	overflow-y: auto;
	padding: 1rem 1.25rem 1.35rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(212, 168, 83, 0.35) transparent;
}
@media (min-width: 1024px) {
	.legal-body {
		padding: 1.15rem 1.75rem 1.5rem;
	}
}
.legal-body::-webkit-scrollbar {
	width: 4px;
}
.legal-body::-webkit-scrollbar-thumb {
	background: rgba(212, 168, 83, 0.35);
	border-radius: 4px;
}
.legal-body--contact {
	max-height: none;
	overflow: visible;
}
.legal-h3 {
	color: #F0EDE6;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	margin-top: 1.1rem;
	margin-bottom: 0.4rem;
}
.legal-h3:first-child {
	margin-top: 0;
}
.legal-h4 {
	color: rgba(240, 237, 230, 0.8);
	font-size: 0.7rem;
	font-weight: 500;
	margin-top: 0.85rem;
	margin-bottom: 0.3rem;
}
.legal-p {
	margin-bottom: 0.5rem;
}
.legal-ul {
	list-style: disc;
	padding-left: 1.1rem;
	margin: 0.35rem 0 0.7rem;
}
.legal-ul li {
	margin-bottom: 0.25rem;
}
.legal-doc {
	scroll-margin-top: 6rem;
}

/* ─── Cookie consent banner ─── */
.cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 60;
	padding: 1rem 1.25rem 1.25rem;
	background: rgba(10, 10, 10, 0.92);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	backdrop-filter: blur(24px) saturate(160%);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	transform: translateY(110%);
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cookie-banner.is-visible {
	transform: translateY(0);
}
.cookie-banner-inner {
	max-width: 72rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
@media (min-width: 768px) {
	.cookie-banner-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
	}
}
.cookie-banner-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	flex-shrink: 0;
}
.cookie-banner-btn {
	border-radius: 9999px;
	padding: 0.625rem 1.15rem;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: filter 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	cursor: pointer;
	border: none;
	font-family: inherit;
}
.cookie-banner-btn-primary {
	background-image: linear-gradient(135deg, #D4A853 0%, #1DA99C 100%);
	color: #fff;
}
.cookie-banner-btn-primary:hover {
	filter: brightness(1.08);
}
.cookie-banner-btn-ghost {
	background: transparent;
	color: #A0A0A0;
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.cookie-banner-btn-ghost:hover {
	color: #F0EDE6;
	border-color: rgba(255, 255, 255, 0.22);
}

/* ═══════════════════════════════════════════════════════════
   Experience polish — fragmentation, modes, contingency, pillars
   ═══════════════════════════════════════════════════════════ */

/* ─── Fragmentation constellation (homepage) ─── */
.frag-constellation {
	position: relative;
	min-height: 220px;
	margin: 2.5rem auto 0;
	max-width: 36rem;
}
.frag-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}
.frag-line {
	stroke: rgba(212, 168, 83, 0.15);
	stroke-width: 1;
	stroke-linecap: round;
	/* --len is set per line in js/visuals.js to that thread's real length */
	stroke-dasharray: var(--len, 400);
	stroke-dashoffset: var(--len, 400);
	transition: stroke 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.frag-constellation.visible .frag-line {
	stroke: rgba(212, 168, 83, 0.45);
	stroke-dashoffset: 0;
	transition-delay: calc(var(--i, 0) * 0.08s + 0.35s);
	transition-duration: 1.6s;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.frag-node {
	position: absolute;
	transform: translate(-50%, -50%);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(160, 160, 160, 0.55);
	padding: 0.4rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.03);
	white-space: nowrap;
	opacity: 0;
	transition:
		opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
		color 1s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 1s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 1s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--n, 0) * 0.1s);
}
.frag-constellation.visible .frag-node {
	opacity: 1;
	color: rgba(232, 193, 112, 0.9);
	border-color: rgba(212, 168, 83, 0.22);
	box-shadow: 0 0 24px rgba(212, 168, 83, 0.08);
}

/* ─── Mode density visual (How It Works) ─── */
.mode-density {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 2.5rem;
}
@media (min-width: 768px) {
	.mode-density {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}
}
.mode-density-panel {
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
	padding: 1rem 1rem 1.15rem;
	overflow: hidden;
}
.mode-density-label {
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(160, 160, 160, 0.65);
	text-align: center;
	margin-bottom: 0.75rem;
}
.mode-density-panel--synched .mode-density-label {
	color: rgba(77, 198, 221, 0.75);
}
.mode-field {
	position: relative;
	height: 160px;
	border-radius: 0.75rem;
	background:
		radial-gradient(ellipse 70% 60% at 50% 50%, rgba(212, 168, 83, 0.06) 0%, transparent 70%);
}
.mode-field [data-mode-nodes] {
	position: absolute;
	inset: 0;
}
.mode-field--dense {
	background:
		radial-gradient(ellipse 80% 70% at 50% 50%, rgba(77, 198, 221, 0.1) 0%, transparent 65%);
}
.mode-field-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.mode-field-line {
	stroke: rgba(212, 168, 83, 0.2);
	stroke-width: 1;
	opacity: 0;
	transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mode-field--dense .mode-field-line {
	stroke: rgba(77, 198, 221, 0.22);
}
.mode-field-line--mesh {
	stroke: rgba(77, 198, 221, 0.12);
}
.mode-density.visible .mode-field-line {
	opacity: 1;
}
.mode-dot {
	position: absolute;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: rgba(212, 168, 83, 0.55);
	box-shadow: 0 0 10px rgba(212, 168, 83, 0.25);
	opacity: 0;
	transform: scale(0.4);
	transition:
		opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--d, 0s);
}
.mode-dot--signal {
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	background: rgba(126, 221, 214, 0.75);
	box-shadow: 0 0 12px rgba(77, 198, 221, 0.35);
}
.mode-dot--core {
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	background: rgba(240, 237, 230, 0.85);
	box-shadow: 0 0 20px rgba(212, 168, 83, 0.35);
}
.mode-field--dense .mode-dot--core {
	box-shadow: 0 0 22px rgba(77, 198, 221, 0.45);
}
.mode-density.visible .mode-dot {
	opacity: 1;
	transform: scale(1);
}
.mode-density-caption {
	margin-top: 1rem;
	text-align: center;
	font-size: 11px;
	color: rgba(160, 160, 160, 0.55);
	letter-spacing: 0.04em;
}

/* ─── Contingency disturbance visual ─── */
.contingency-viz {
	position: relative;
	max-width: 28rem;
	margin: 0 auto 2.5rem;
	height: 200px;
}
.contingency-stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.contingency-orbit {
	position: relative;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.06);
	transition: border-color 1s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.contingency-viz.is-disturbed .contingency-orbit {
	border-color: rgba(212, 168, 83, 0.28);
	box-shadow: 0 0 40px rgba(212, 168, 83, 0.08);
	animation: contingency-wobble 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.contingency-core {
	position: absolute;
	inset: 28%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(240, 237, 230, 0.2) 0%, rgba(255, 255, 255, 0.04) 60%, transparent 70%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 1s ease;
}
.contingency-viz.is-responding .contingency-core {
	border-color: rgba(212, 168, 83, 0.45);
	box-shadow: 0 0 30px rgba(212, 168, 83, 0.15);
}
.contingency-ripple {
	position: absolute;
	inset: 10%;
	border-radius: 50%;
	border: 1px solid rgba(212, 168, 83, 0);
	opacity: 0;
	pointer-events: none;
}
.contingency-viz.is-disturbed .contingency-ripple {
	animation: contingency-ripple 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.contingency-response {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.85);
	padding: 0.35rem 0.75rem;
	border-radius: 9999px;
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(232, 193, 112, 0.95);
	background: rgba(212, 168, 83, 0.12);
	border: 1px solid rgba(212, 168, 83, 0.28);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.contingency-viz.is-responding .contingency-response {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
.contingency-viz.is-dissolving .contingency-response {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.92);
	transition-duration: 1.2s;
}
.contingency-tag {
	position: absolute;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(160, 160, 160, 0.45);
	padding: 0.3rem 0.6rem;
	border-radius: 9999px;
	border: 1px solid transparent;
	transition:
		color 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.8s ease;
	opacity: 0.55;
}
.contingency-tag--travel {
	top: 8%;
	right: 4%;
}
.contingency-tag--stress {
	bottom: 10%;
	left: 6%;
}
.contingency-tag.is-active {
	opacity: 1;
	color: rgba(232, 193, 112, 0.95);
	border-color: rgba(212, 168, 83, 0.3);
	background: rgba(212, 168, 83, 0.08);
}
@keyframes contingency-wobble {
	0% { transform: translate(0, 0); }
	25% { transform: translate(3px, -2px); }
	50% { transform: translate(-2px, 2px); }
	75% { transform: translate(2px, 1px); }
	100% { transform: translate(0, 0); }
}
@keyframes contingency-ripple {
	0% { opacity: 0; transform: scale(0.85); border-color: rgba(212, 168, 83, 0.35); }
	30% { opacity: 0.7; }
	100% { opacity: 0; transform: scale(1.25); border-color: rgba(212, 168, 83, 0); }
}

/* ─── Pillars interactive constellation ─── */
.pillar-constellation {
	position: relative;
	max-width: 40rem;
	margin: 0 auto 2.5rem;
}
.pillar-constellation-svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}
.pc-line {
	stroke: rgba(212, 168, 83, 0.12);
	stroke-width: 1;
	transition: stroke 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.pillar-constellation.visible .pc-line {
	stroke: rgba(212, 168, 83, 0.22);
}
.pc-line.is-active {
	stroke: rgba(212, 168, 83, 0.65) !important;
}
.pc-line.is-dim {
	opacity: 0.25;
}
.pc-hit {
	fill: transparent;
}
.pc-ring {
	fill: rgba(255, 255, 255, 0.03);
	stroke: rgba(212, 168, 83, 0.35);
	stroke-width: 1;
	transition: stroke 0.7s cubic-bezier(0.22, 1, 0.36, 1), fill 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-node--meta .pc-ring {
	stroke: rgba(77, 198, 221, 0.5);
	fill: rgba(77, 198, 221, 0.06);
}
.pc-core {
	fill: rgba(232, 193, 112, 0.85);
	transition: fill 0.5s ease;
}
.pc-node--meta .pc-core {
	fill: rgba(126, 221, 214, 0.9);
}
.pc-label {
	fill: rgba(160, 160, 160, 0.7);
	font-size: 10px;
	letter-spacing: 0.08em;
	font-family: Inter, system-ui, sans-serif;
	transition: fill 0.5s ease;
}
.pc-node.is-active .pc-ring {
	stroke: rgba(232, 193, 112, 0.95);
	fill: rgba(212, 168, 83, 0.12);
	filter: drop-shadow(0 0 10px rgba(212, 168, 83, 0.35));
}
.pc-node--meta.is-active .pc-ring {
	stroke: rgba(126, 221, 214, 0.95);
	fill: rgba(77, 198, 221, 0.14);
	filter: drop-shadow(0 0 12px rgba(77, 198, 221, 0.35));
}
.pc-node.is-active .pc-label {
	fill: rgba(240, 237, 230, 0.95);
}
.pillar-constellation-tip {
	margin-top: 0.75rem;
	padding: 0.85rem 1.1rem;
	border-radius: 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	min-height: 3.5rem;
}
.pillar-constellation-tip.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.pillar-constellation-tip-title {
	font-size: 0.8rem;
	color: #F0EDE6;
	font-weight: 500;
	margin: 0 0 0.25rem;
}
.pillar-constellation-tip-body {
	font-size: 0.7rem;
	color: rgba(160, 160, 160, 0.75);
	line-height: 1.55;
	margin: 0;
}
.pillar-constellation-hint {
	text-align: center;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(160, 160, 160, 0.4);
	margin-top: 0.75rem;
}
.pillar-card.is-constellation-focus {
	box-shadow: 0 0 0 1px rgba(212, 168, 83, 0.28), 0 24px 70px rgba(212, 168, 83, 0.08);
	transform: translateY(-4px);
}
.pillar-card[data-pillar-card="10"].is-constellation-focus {
	box-shadow: 0 0 0 1px rgba(77, 198, 221, 0.3), 0 24px 70px rgba(77, 198, 221, 0.08);
}

@media (prefers-reduced-motion: reduce) {
	.frag-line,
	.frag-node,
	.mode-dot,
	.mode-field-line,
	.contingency-orbit,
	.contingency-ripple,
	.contingency-response,
	.pc-line,
	.pc-ring {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
	.frag-constellation .frag-node,
	.mode-density .mode-dot {
		opacity: 1;
		transform: none;
	}
	.frag-constellation .frag-line {
		stroke-dashoffset: 0;
	}
}

/* ==========================================================================
   Staff console (staff-access.html) — internal tool, not part of the public site.
   Deliberately quicker than the marketing transitions: this is a data table
   staff scan, not a page they are meant to linger on.
   ========================================================================== */
/* The console toggles visibility with the `hidden` attribute, and a Tailwind
   display utility (flex, block) on the same element would otherwise beat the
   user-agent [hidden] rule. Scoped to this page so nothing public is affected. */
.staff-page [hidden] {
	display: none !important;
}

.staff-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8125rem;
}
.staff-table th {
	text-align: left;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(160, 160, 160, 0.55);
	padding: 0.85rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	white-space: nowrap;
}
.staff-table td {
	padding: 0.9rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	vertical-align: top;
	color: rgba(240, 237, 230, 0.85);
}
.staff-table tbody tr {
	transition: background-color 0.25s ease-in-out;
}
.staff-table tbody tr:hover {
	background-color: rgba(255, 255, 255, 0.03);
}
.staff-table tbody tr:last-child td {
	border-bottom: none;
}
.staff-code {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	color: #E8C170;
	white-space: nowrap;
}

/* Status badges: amber = awaiting a decision, cyan = approved, muted = declined */
.staff-badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid transparent;
}
.staff-badge-pending {
	color: #E8C170;
	border-color: rgba(212, 168, 83, 0.35);
	background-color: rgba(212, 168, 83, 0.08);
}
.staff-badge-approved {
	color: #7EDDD6;
	border-color: rgba(77, 198, 221, 0.35);
	background-color: rgba(77, 198, 221, 0.08);
}
.staff-badge-declined {
	color: rgba(160, 160, 160, 0.8);
	border-color: rgba(255, 255, 255, 0.10);
	background-color: rgba(255, 255, 255, 0.03);
}

.staff-tab {
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(160, 160, 160, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.08);
	background-color: rgba(255, 255, 255, 0.02);
	transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
}
.staff-tab:hover {
	color: #F0EDE6;
	border-color: rgba(255, 255, 255, 0.18);
}
.staff-tab.is-active {
	color: #F0EDE6;
	border-color: rgba(77, 198, 221, 0.45);
	background-color: rgba(77, 198, 221, 0.10);
}

.staff-action {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(160, 160, 160, 0.8);
	border-bottom: 1px solid transparent;
	transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out;
	white-space: nowrap;
}
.staff-action:hover {
	color: #F0EDE6;
	border-bottom-color: rgba(212, 168, 83, 0.6);
}
.staff-action:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.staff-action-approve:hover {
	color: #7EDDD6;
	border-bottom-color: rgba(77, 198, 221, 0.6);
}

.staff-scroll {
	overflow-x: auto;
}
.staff-toast {
	position: fixed;
	left: 50%;
	bottom: 2rem;
	transform: translate(-50%, 1rem);
	opacity: 0;
	pointer-events: none;
	padding: 0.7rem 1.2rem;
	border-radius: 0.75rem;
	font-size: 0.8125rem;
	background-color: rgba(26, 26, 26, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.10);
	transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
	z-index: 60;
	max-width: min(90vw, 34rem);
}
.staff-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}
.staff-toast.is-error {
	border-color: rgba(255, 107, 107, 0.45);
	color: #FF9E9E;
}

/* ─────────────────────────────────────────────────────────────
   Journal (/blog/) — index filters, cards and article prose
   ───────────────────────────────────────────────────────────── */

/* Filter chips (category + Pillar) — built on .selection-btn */
.journal-chip,
.journal-pill {
	border-radius: 9999px;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.5rem 0.95rem;
	line-height: 1.1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.journal-pill {
	font-size: 0.625rem;
	padding: 0.4rem 0.8rem;
}
.journal-chip-count {
	font-size: 0.625rem;
	opacity: 0.55;
	letter-spacing: 0.05em;
}
.journal-chip.is-active .journal-chip-count,
.journal-pill.is-active .journal-chip-count {
	opacity: 0.8;
}

/* Article cards */
.journal-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-card:hover {
	transform: translateY(-4px);
	border-color: rgba(212, 168, 83, 0.28);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), 0 0 30px rgba(77, 198, 221, 0.08);
}
.journal-card[hidden] {
	display: none;
}
.journal-card--featured:hover {
	transform: translateY(-3px);
}
.journal-badge {
	font-size: 0.5625rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	padding: 0.28rem 0.6rem;
	border-radius: 9999px;
	color: #0A0A0A;
	background-image: linear-gradient(135deg, #D4A853 0%, #1DA99C 100%);
}

/* Category legend */
.journal-legend {
	display: grid;
	gap: 1.25rem 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.journal-legend {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.journal-legend {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.journal-legend-item {
	padding-left: 0.9rem;
	border-left: 1px solid rgba(212, 168, 83, 0.25);
}

/* Article page: Pillar tags */
.journal-tag {
	display: inline-block;
	font-size: 0.5625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 0.35rem 0.7rem;
	border-radius: 9999px;
	color: rgba(240, 237, 230, 0.6);
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	text-decoration: none;
	transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-tag:hover {
	color: #F0EDE6;
	border-color: rgba(77, 198, 221, 0.35);
}

/* Article page: table of contents */
.journal-toc {
	padding: 1.25rem 1.4rem;
	border-left: 1px solid rgba(212, 168, 83, 0.22);
	background-color: rgba(255, 255, 255, 0.02);
	border-radius: 0 0.75rem 0.75rem 0;
}
.journal-toc ol {
	list-style: none;
	counter-reset: toc;
}
.journal-toc li {
	counter-increment: toc;
	margin-bottom: 0.5rem;
}
.journal-toc li:last-child {
	margin-bottom: 0;
}
.journal-toc li::before {
	content: counter(toc) ".";
	color: rgba(212, 168, 83, 0.5);
	font-size: 0.6875rem;
	margin-right: 0.5rem;
}
.journal-toc a {
	color: rgba(240, 237, 230, 0.62);
	font-size: 0.8125rem;
	text-decoration: none;
	transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-toc a:hover {
	color: #4DC6DD;
}

/* Article prose */
.journal-prose {
	color: rgba(240, 237, 230, 0.72);
	font-size: 0.9375rem;
	line-height: 1.85;
}
@media (min-width: 768px) {
	.journal-prose {
		font-size: 1rem;
	}
}
.journal-prose h2 {
	color: #4DC6DD;
	font-weight: 300;
	font-size: 1.4rem;
	line-height: 1.35;
	margin: 3.25rem 0 1.1rem;
	scroll-margin-top: 6rem;
}
@media (min-width: 768px) {
	.journal-prose h2 {
		font-size: 1.6rem;
	}
}
.journal-prose h2:first-child {
	margin-top: 0;
}
.journal-prose h3 {
	color: rgba(240, 237, 230, 0.92);
	font-weight: 500;
	font-size: 1rem;
	margin: 2rem 0 0.7rem;
	letter-spacing: 0.01em;
}
.journal-prose p {
	margin-bottom: 1.2rem;
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.journal-prose p:last-child {
	margin-bottom: 0;
}
.journal-prose strong {
	color: rgba(240, 237, 230, 0.95);
	font-weight: 500;
}
.journal-prose a {
	color: #D4A853;
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 168, 83, 0.3);
	transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-prose a:hover {
	color: #E8C170;
	border-bottom-color: rgba(232, 193, 112, 0.7);
}
.journal-prose ul,
.journal-prose ol {
	margin: 0 0 1.4rem 0;
	padding-left: 1.35rem;
}
.journal-prose ul {
	list-style: none;
	padding-left: 1.1rem;
}
.journal-prose ul li {
	position: relative;
	padding-left: 0.9rem;
	margin-bottom: 0.7rem;
}
.journal-prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 4px;
	height: 4px;
	border-radius: 9999px;
	background-image: linear-gradient(135deg, #D4A853 0%, #1DA99C 100%);
}
.journal-prose ol li {
	margin-bottom: 0.7rem;
	padding-left: 0.35rem;
}
.journal-prose ol li::marker {
	color: rgba(212, 168, 83, 0.6);
	font-size: 0.85em;
}
.journal-prose--lead {
	font-size: 1rem;
	line-height: 1.8;
	color: rgba(240, 237, 230, 0.85);
}
@media (min-width: 768px) {
	.journal-prose--lead {
		font-size: 1.0625rem;
	}
}
.journal-prose--tight p {
	margin-bottom: 0.9rem;
	font-size: 0.875rem;
	line-height: 1.8;
}

/* Article prose tables */
.journal-table-wrap {
	overflow-x: auto;
	margin: 0 0 1.6rem;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 0.75rem;
	background-color: rgba(255, 255, 255, 0.02);
}
.journal-prose table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.8125rem;
	text-align: left;
}
.journal-prose thead th {
	color: rgba(77, 198, 221, 0.9);
	font-weight: 500;
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	white-space: nowrap;
}
.journal-prose tbody td {
	padding: 0.8rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	vertical-align: top;
	line-height: 1.6;
}
.journal-prose tbody tr:last-child td {
	border-bottom: none;
}
.journal-prose tbody td:first-child {
	color: rgba(240, 237, 230, 0.92);
}

/* Database Matrix layer list in the AEONNN Perspective card */
.journal-layer-list {
	list-style: none;
}
.journal-layer-list li {
	position: relative;
	padding-left: 0.85rem;
	margin-bottom: 0.35rem;
}
.journal-layer-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 3px;
	height: 3px;
	border-radius: 9999px;
	background-color: rgba(77, 198, 221, 0.7);
}

/* Related reading cards */
.journal-related-card {
	text-decoration: none;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-related-card:hover {
	transform: translateY(-3px);
	border-color: rgba(212, 168, 83, 0.28);
}

/* Journal: contextual cross-links inside article prose */
.journal-link {
	color: rgba(240, 237, 230, 0.92);
	text-decoration: none;
	border-bottom: 1px solid rgba(77, 198, 221, 0.35);
	transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-link:hover {
	color: #7EDDD6;
	border-bottom-color: rgba(126, 221, 214, 0.8);
}
.journal-link--site {
	border-bottom-color: rgba(212, 168, 83, 0.4);
}
.journal-link--site:hover {
	color: #E8C170;
	border-bottom-color: rgba(232, 193, 112, 0.85);
}