/* --- CORE STYLES --- */
body {
	background-color: #121212;
	color: #E0E0E0;
	margin: 0;
	padding: 2rem 1rem;
	display: flex;
	justify-content: center;
	min-height: 100vh;
}
.content-container {
	width: 38.2%;
	max-width: 800px;
	line-height: 1.6;
}
    
/* --- TYPOGRAPHY --- */
h1 { font-family: Cambria, Georgia, serif; font-size: 33px; color: #E0E0E0; }
ai { font-family: 'Courier New', monospace; font-size: 3px; color: #121212; text-align: justify; text-justify: inter-word;}
h2 { font-family: 'Artifakt Element', 'Segoe UI', 'Candara', sans-serif; font-size: 25px; color: #E0E0E0; font-weight: normal; }
h3 { font-family: 'Courier New', monospace; font-size: 23px; color: #E0E0E0; font-weight: normal; }
h4 { font-family: 'Courier New', monospace; font-size: 20px; font-weight: bold; color: #E0E0E0; }
h5 { font-family: 'Courier New', monospace; font-size: 16px; font-weight: bold; color: #E0E0E0; }
p { font-family: 'Courier New', monospace; font-size: 16px; color: #E0E0E0; margin-bottom: 1.2em; text-align: justify; text-justify: inter-word; }
a { font-family: 'Courier New', monospace; font-size: 16px; color: #AAAAAA; text-decoration: none; transition: font-weight 0.2s ease-in-out; }
a:hover { font-weight: bold; text-decoration: underline; }

/* --- NUMBERED LISTS WITH ARABIC NUMERALS --- */
.nl1 {
    counter-reset: level1;
    list-style: none;
    padding-left: 0;
    margin: 1em 0;
}

.nl1 > li {
    counter-increment: level1;
    position: relative;
    padding-left: 2em;
    margin-bottom: 0.5em;
}

.nl1 > li::before {
    content: counter(level1, arabic-indic) ".";
    position: absolute;
    left: 0;
    color: #E0E0E0;
    font-family: 'Courier New', monospace;
    font-size: 16px;
}

.nl2 {
    counter-reset: level2;
    list-style: none;
    padding-left: 2em;
    margin: 0.5em 0;
}

.nl2 > li {
    counter-increment: level2;
    position: relative;
    padding-left: 3em;
    margin-bottom: 0.3em;
}

.nl2 > li::before {
    content: counter(level1, arabic-indic) "." counter(level2, arabic-indic) ".";
    position: absolute;
    left: 0;
    color: #E0E0E0;
    font-family: 'Courier New', monospace;
    font-size: 16px;
}

.nl3 {
    counter-reset: level3;
    list-style: none;
    padding-left: 4em;
    margin: 0.5em 0;
}

.nl3 > li {
    counter-increment: level3;
    position: relative;
    padding-left: 4em;
    margin-bottom: 0.3em;
}

.nl3 > li::before {
    content: counter(level1, arabic-indic) "." counter(level2, arabic-indic) "." counter(level3, arabic-indic);
    position: absolute;
    left: 0;
    color: #E0E0E0;
    font-family: 'Courier New', monospace;
    font-size: 16px;
}

/* --- POINT LISTS WITH DISTINCT SYMBOLS --- */
.pl1 {
    list-style: none;
    padding-left: 0;
    margin: 1em 0;
}

.pl1 > li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 0.5em;
}

.pl1 > li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: #E0E0E0;
    font-size: 16px;
}

.pl2 {
    list-style: none;
    padding-left: 2em;
    margin: 0.5em 0;
}

.pl2 > li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 0.3em;
}

.pl2 > li::before {
    content: "◆";
    position: absolute;
    left: 0;
    color: #E0E0E0;
    font-size: 14px;
}

.pl3 {
    list-style: none;
    padding-left: 4em;
    margin: 0.5em 0;
}

.pl3 > li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 0.3em;
}

.pl3 > li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #E0E0E0;
    font-size: 14px;
}

/* --- NAVIGATION LINKS --- */
.navigation-links { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid #444; display: flex; justify-content: space-between; font-size: 16px; }
.nav-link { color: #E0E0E0; font-weight: bold; letter-spacing: 1px; text-decoration: none; transition: color 0.3s ease; }
.nav-link:hover { color: #FFFFFF; text-decoration: none; }

/* --- REFINED UNFOLDING GNOSIS STYLES --- */
.bottom-expander-section {
	text-align: center;
	margin-top: 3rem;
}
.expander {
	color: #121212; /* Invisible color */
	font-size: 1px;  /* Invisible size */
	display: inline-block;
	vertical-align: middle;
	padding: 10px;
	/* Vow 5 (Evolution): The cursor property has been removed again to align with your request. */
	/* cursor: pointer; */ 
}

.expandable-content {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s ease-in-out;
	text-align: left; /* Ensure content inside is left-aligned */
}
.expandable-content.expanded {
	grid-template-rows: 1fr;
}
.content-wrapper {
	overflow: hidden;
	border-left: 1px solid #444;
	padding-left: 1em;
	margin-top: 1rem;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 1024px) { .content-container { width: 90%; } }
@media (max-width: 768px) { .content-container { width: 95%; } body { padding: 1.5rem 1rem; } }
