:root{
--void:			#0a0810; /*Might as well be black*/
--deep:			#120f1e; /*Dark eggplant*/
--nexus:		#1e1640; /*Bright eggplant*/
--arcane:		#3d2c7a; /*Purple*/
--mystic:		#9b70e0; /*Eye searing purple*/
--gold:			#d4af6a;
--gold-dim:		#a07c3f;
--gold-pale:	#f0dfa8;
--starlight:	#f0eaff; /*Might as well be white*/
--mist:			rgba(240,234,255,0.65); /*Pale wisteria 65% opacity*/
--mist-faint:	rgba(240,234,255,0.35); /*Pale wisteria 35% opacity*/
--border:		rgba(212,175,106,0.18); /*Orangy goldy 18% opacity*/
}

html{scroll-behavior:smooth}

body{
	font-family:Arial,Helvetica,sans-serif;
	background:var(--deep);
	color:var(--mist);
	font-size:15px;
	line-height:1.75;
	margin:0;
}

/* Past blogs unvisited link */
.pblog a:link{
	color:var(--gold-dim);
}
/* Past blogs visited link */
.pblog a:visited{
	color:var(--arcane);
}
/* Past blogs mouse over link */
.pblog a:hover{
	color:var(--gold-pale);
}
/* Past blogs selected link */
.pblog a:active{
	color:var(--mystic);
}


h1,h2{margin:0}
.banner img{
	max-width:100%;
	height:auto;
}

.char-portrait img{max-width:200px; max-height:200px; width:auto; height:auto; display:block}
.portrait-img{border:3px solid var(--gold);transition:0.3s ease;transform:scale(1)}
.portrait-img:hover{transform:scale(1.25)}
.center{display:inline;width:auto;text-align:center}
.deep{color:#fff!important;background-color:var(--deep)!important}
.opacity60, .hover-opacity:hover{opacity:0.60}
.hover-opacity-off:hover{opacity:1}
.hover-opacity:hover{}
/*.xlarge{font-size:24px!important}*/

/*sets a uniform vertical rhythm between stacked elements. */
.stack-tight > * + *{
	margin-top:0;
	margin-bottom:0;/* space between consecutive children */
}

/* Container */
.container{
	max-width:1100px; 
	margin:0 auto; 
	padding:0 32px; 
	position:relative; 
	z-index:1; 
}

/* Navigation */
.site-nav{
	position:sticky;
	top:0;
	z-index:100;
	background:rgba(10,8,16,0.92);
	backdrop-filter:blur(14px);
	border-bottom:1px solid var(--border);
}

.nav-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:70px;
}

.nav-logo{
	font-family:Georgia,"Times New Roman",Impact,Verdana,serif;
	font-size:1.45rem;
	color:var(--gold);
	letter-spacing:0.06em;
}

.nav-links{
	display:flex;
	gap:8px;
	align-items:center;
}

.nav-links a{
	padding:8px 14px;
	color:var(--mist);
	font-weight:500;
	letter-spacing:0.08em;
	text-transform:uppercase;
	font-size:0.8rem;
	transition:all 0.2s;
	text-decoration:none;
}

/*.nav-logo-link a{*/
/*	text-decoration:none !important;*/
/*}*/

.nav-links a:hover,
.nav-links a.active{
	color:var(--gold);
}

/* Dropdown base */
.dd{position:relative}
.dd-toggle{
	background:none;
	border:none;
	cursor:pointer;
	padding:0.25rem 0.5rem;
	font:inherit;
	color:var(--mist);
	font-weight:500;
	letter-spacing:0.08em;
	text-transform:uppercase;
	font-size:0.8rem;
	transition:all 0.2s;
	text-decoration:none;
}

.dd-toggle:hover{
	color:var(--gold);
}

.dd-menu{
	position:absolute;
	top:100%;
	left:0;
	display:none;
	margin:0;
	padding:0.5rem 0;
	list-style:none;
	box-shadow:0 6px 12px rgba(0,0,0,0.1);
	min-width:140px;
	z-index:100;
}
	.dd-menu li a{display:block; padding:0.25rem 1rem; color:inherit; text-decoration:none}
	.dd li a:hover{background:rgba(10,8,16,0.92)}


/* Hamburger & responsive panel */
.nav-toggle{
	background:transparent;
	border:none;
	padding:8px;
	margin-right:12px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	color:var(--mist);
}
.hamburger{
	width:22px;
	height:2px;
	background:var(--mist);
	display:block;
	position:relative;
	transition:transform .25s ease, background .2s;
}
.hamburger::before,
.hamburger::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	height:2px;
	background:var(--mist);
	transition:transform .25s ease, opacity .2s;
}
.hamburger::before{top:-7px}
.hamburger::after{top:7px}

/* When active — transform into X */
.nav-toggle[aria-expanded="true"] .hamburger{
	background:transparent;
}
.nav-toggle[aria-expanded="true"] .hamburger::before{
	transform:translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger::after{
	transform:translateY(-7px) rotate(-45deg);
}

/* Default desktop layout nav panel shown */
@media (min-width:880px){
	.nav-toggle{display:none} /* hide hamburger on wider screens */
	.nav-links{display:flex !important; gap:8px; align-items:center}
	#nav-panel[hidden]{display:flex !important} /* ensure shown */

/* Show on hover (desktop) */
	.dd:hover > .dd-menu,
	.dd:focus-within > .dd-menu{display:block}
}

/* Small screen menu adjustments */
/* Mobile:hamburger shown, panel hidden by default */
@media (max-width:879px){
	.nav-inner{height:64px; gap:12px}
	.nav-logo{order:2; flex:1; text-align:center}
	.nav-toggle{order:1; display:inline-flex}

/* Panel hidden by default; when shown it sits below the header and is full-width */
	#nav-panel{
		position:absolute;
		left:0;
		right:0;
		top:100%;
		background:rgba(10,8,16,0.98);
		backdrop-filter:blur(10px);
		border-bottom:1px solid var(--border);
		display:none;/* default hidden */
		flex-direction:column;
		gap:0;/* flush stacking */
		padding:8px 0;/* vertical padding only */
		z-index:99;
		align-items:stretch;/* ensure children fill width */
		text-align:left;
		width:100%;
	}

/* When JS removes the hidden attribute / sets display, show panel */
	#nav-panel[aria-hidden="false"]{display:flex}

/* Make links large, touch-friendly and full width */
	#nav-panel a,
	#nav-panel .btn,
	#nav-panel .dd-toggle{
		padding:12px 20px;
		width:100%;
		text-align:left;
		font-size:0.95rem;
		box-sizing:border-box;
		display:block;
	}

	.nav-cta{margin:12px 20px; display:block}

/* Ensure nav-links stack vertically inside panel */
	#nav-panel .nav-links,
	.nav-links{flex-direction:column; align-items:stretch; width:100%}

/* Ensure each top-level item is full-width and separated */
	#nav-panel .nav-links > *{width:100%}

/* Dropdown parent:keep static flow so submenu expands vertically */
	#nav-panel .dd{
		position:relative;
		width:100%;
	}

/* Submenu:in-flow block, hidden by default */
	#nav-panel .dd-menu{
		position:relative;		/* in document flow */
		display:none;
		margin:0;
		padding:0;
		list-style:none;
		background:transparent;
		width:100%;
		box-shadow:none;
	}

/* Submenu items:align with parent links and indent slightly */
	#nav-panel .dd-menu li a{
		display:block;
		padding:10px 20px;
		padding-left:34px; /* visual indent */
		width:100%;
		box-sizing:border-box;
	}

/* Show submenu when parent is expanded via JS (click) */
	#nav-panel .dd[aria-expanded="true"] > .dd-menu{
		display:block;
	}

/* Also allow hover/focus to open submenu on touch-devices that support hover */
	#nav-panel .dd:hover > .dd-menu,
	#nav-panel .dd:focus-within > .dd-menu{
		display:block;
	}

/* Ensure hover rule takes precedence but does not force horizontal layout */
	.dd:hover > .dd-menu{display:block}

/* Avoid centering or horizontal expansion */
	#nav-panel .container,
	#nav-panel > *{align-self:stretch}

/* Small visual separators between items */
	#nav-panel .nav-links > * + *{border-top:1px solid var(--border)}

/* Small screen Social Media adjustments */
/* Reduce padding on mobile devices */
	.social-media-links{
		padding:1rem;
/* Reduce gap between icons on smaller screens */
	gap:1rem;
	}

/* Make icons slightly smaller on mobile */
	.social-link{
		width:2.5rem;
		height:2.5rem;
	}

	.heading-row{
		gap:0.5rem;
	}

	.heading-row p{
		font-size:1.125rem;
	}

	.heading-row .btn{
		padding:0.4rem 0.6rem;
		font-size:0.95rem;
	}

/* Keep hover color and active states consistent */
	.nav-links a:hover,
	.nav-links a.active,
	.btn-primary:hover{color:var(--gold)}

	.nn-hero-tagline p{
		font-size:.95rem;
		color:var(--mystic);
		margin:1rem 0 2rem;
		width:35vw;
	}

}
/* Small screen menu adjustments */
/* Navigation */

/* Hero */
.hero{
	position:relative;
	min-height:80vh;
	display:flex;
	align-items:center;
	overflow:hidden;
}

.hero-bg{
	position:absolute; 
	inset:0;
	background:linear-gradient(rgba(10,8,16,0.78), rgba(10,8,16,0.88)), url("../images/nexus-rhedrin.webp") center/cover no-repeat fixed; 
	z-index:-2;
}

.nn-hero-bg{
	position:absolute; 
	inset:0;
	background:linear-gradient(to right, rgba(0,0,0,0.7), rgba(255,255,255,0.01)), url("../images/NNCover3.webp") center/contain no-repeat fixed; 
	width:100vw;
	max-width:none;
	display:block;
	z-index:-1;
	height:100vh;
}

.dd-hero-bg{
	position:absolute; 
	inset:0;
	background:linear-gradient(to right, rgba(0,0,0,0.7), rgba(255,255,255,0.01)), url("../images/DDcoverconcept.webp") center/contain no-repeat fixed; 
	width:100vw;
	max-width:none;
	display:block;
	z-index:-1;
	height:100vh;
}

.hero-content{
	display:grid;
	grid-template-columns:1fr 420px;
	gap:60px;
	align-items:center;
	width:100%;
	z-index:1
}

.hero-text{position:relative; z-index:1}

.hero-title{
	font-family:Georgia,"Times New Roman",Impact,Verdana,serif;
	font-size:clamp(3rem, 6vw, 5.5rem);
	line-height:1.05;
	color:var(--starlight);
}

.hero-tagline{
	font-size:1.1rem;
	color:var(--mist);
	margin:1rem 0 2rem;
}

.nn-hero-tagline{
	font-size:1.6rem;
	color:var(--mystic);
	margin:1rem 0 2rem;
	width:30vw;
}

/*.hero-actions{*/
/*	display:flex;*/
/*	gap:16px;*/
/*	flex-wrap:wrap;*/
/*}*/
/* Hero */

/* Quotes */
.quote-text{
	font-size:1.45rem;
	font-style:italic;
	line-height:1.4;
	color:var(--starlight);
}

.quote-author-text{
	font-size:1.05rem;
	line-height:1.4;
	color:var(--gold);
}

.review-author-text{
	font-size:1.45rem;
	font-style:italic;
	line-height:1.4;
	color:var(--gold);
}

.review-text{
	font-size:1.05rem;
	line-height:1.4;
	color:var(--starlight);
}
/* Quotes */

/* Cards */
.topic-image{
	background-size:cover;
	background-position:center;
	border-radius:12px;
	margin-bottom:24px;
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:5rem;
	color:rgba(212,175,106,0.25);
}
.topic-image img{max-width:100%;height:auto;}
.topic-card{
	background:var(--nexus);
	padding:30px;
	border-radius:12px;
	margin-bottom:30px;
}

.teaser-toggle{cursor:pointer; color:var(--gold); font-weight:600}
.full-backstory{display:none; margin-top:12px; padding-top:12px; border-top:1px solid var(--border)}
.char-card.expanded .full-backstory{display:block}
/* Cards */

/* Buttons */
.btn{
	padding:14px 32px;
	border-radius:6px;
	font-weight:600;
	letter-spacing:0.08em;
	text-transform:uppercase;
	font-size:0.85rem;
	transition:all 0.25s;
}

.btn-primary{
	background:var(--gold);
	color:var(--void);
}

.btn-primary:hover{
	background:var(--gold-pale);
	transform:translateY(-2px);
}

.btn-ghost{
	background:transparent;
	color:var(--starlight);
	border:1px solid rgba(255,255,255,0.3);
}

.btn-ghost:hover{
	border-color:var(--gold);
	color:var(--gold);
}

/* Container that holds the heading and the button */
.heading-row{
	display:flex;/* put children on one horizontal line */
	align-items:center;/* vertically center the h1 and button */
	gap:0.75rem;/* space between h1 and button (responsive) */
	flex-wrap:nowrap;/* keep them on one line if possible */
}

/* Make the h1 flexible so it only takes the space it needs */
.heading-row h1 h2 p{
	margin:0;/* remove default margins for predictable layout */
	font-size:1.5rem;/* scalable font-size (adjust as desired) */
	line-height:1.2;
	white-space:nowrap;/* prevent heading from wrapping onto multiple lines */
	overflow:hidden;/* hide overflow if very long text */
	text-overflow:ellipsis;/* show ellipsis when text is truncated */
}
/* Buttons */

/* Other utilities */
.specialH{
	font-size:0.75rem;
	letter-spacing:0.2em;
	text-transform:uppercase;
	color:var(--gold);
	margin-bottom:8px;
}

/*.section{padding:90px 0}*/

/* Back to Top */
#backToTop{
	position:fixed;
	bottom:30px;
	right:30px;
	background:var(--gold);
	color:var(--void);
	width:52px;
	height:52px;
	border-radius:50%;
	font-size:2rem;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 10px 30px rgba(212,175,106,0.4);
	opacity:0;
	visibility:hidden;
	transition:all 0.3s;
	z-index:999;
}
#backToTop.show{
	opacity:0.5;
	visibility:visible;
}
#backToTop:hover{
	opacity:1;
	visibility:visible;
	background:var(--gold);
}

/* Social Media Links Container */
.social-media-links{
	display:flex;/* Display icons horizontally with flexbox */
	gap:1.5rem;/* Add space between icons */
	align-items:center;/* Center the icons vertically and horizontally */
	justify-content:center;
	padding:2rem;/* Add padding around the container */
}

/* Individual Social Media Link Styling */
.social-link{
	text-decoration:none;/* Remove default link underline */
	transition:transform 0.3s ease, opacity 0.3s ease;/* Smooth transition for hover effects */
	width:3rem;/* Set a fixed size for the icon container */
	height:3rem;
	display:flex;/* Display as a flex container to center the SVG */
	align-items:center;
	justify-content:center;
}

/* Hover effect for all social links */
.social-link:hover{
	transform:scale(1.15);/* Scale up the icon slightly on hover */
	opacity:0.8;/* Slightly transparent on hover for visual feedback */
}

/* SVG Icon Styling */
.social-icon{
	width:100%;/* Set the size of the SVG icon */
	height:100%;
	fill:currentColor;/* Use the fill color defined by the specific social link class */
}

/* Facebook Specific Styling */
.social-link.facebook{
	color:var(--mist);/* Facebook brand color */
}

/* Facebook hover effect */
.social-link.facebook:hover{
	color:#1877f2;/* Facebook blue on hover */
}

/* X (Twitter) Specific Styling */
.social-link.x{
	color:var(--mist);/* X brand color */
}

/* X hover effect */
.social-link.x:hover{
	color:var(--starlight)/* Gray on hover */
}
/* Social Media Links Container */

/* Copyright Boilerplate */
.copyright::after{
	content:"Copyright @ 2026 M.G. Martin. All Rights Reserved.";
}