/* 1. Theme Variables & System Dark Mode */
:root {
	--void:#07060f;
	--nebula:#161235;
	--gold:#ffd98a;
	--ember:#F0C060;
	--parchment:#f5ead3;
	--mist:#C2BCC8;
	--bg-color: #101010;
	--text-color: #ECECf0;
	--text-color-head: #C0A060;
	--text-color-quote: #D8D0D0;
	--link-color: #2997ff;
	--code-bg: #1c1c1e;
	--border-color: #2c2c2e;
	--max-width: 680px; /* Optimal reading line length */	
}

/* 2. Page & Layout Structure */
body {
	background: #000000;
  color: var(--mist);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
  line-height: 1.5;	
  margin: 0;
  padding: 10px;
}

.clickable { cursor:pointer }

/* Centered container with responsive width */
.chapter {
  box-sizing: border-box;
  min-width: 200px;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* 3. Fluid Typography & Mobile Font Sizing */
h1 {
	font-weight: normal;
	font-size: calc(1.2rem + 0.5vw);
	margin-top: 0;
	color: #f5ead3; }

.title-underline {
	height:1px;
	background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 45%, transparent), transparent);
}

.chapter h2 { font-size: 1rem; margin-top: 1.3em; color: var(--text-color-head); font-weight: normal; }
.chapter h3 { font-size: calc(1rem + 0.2vw); margin-top: 1.3em; color: var(--text-color-head); font-weight: normal; }

/* 4. Polishing Elements (Images, Code, Tables) */
.chapter a {
  color: var(--link-color);
  text-decoration: none;
}
.chapter a:hover {
  text-decoration: underline;
}

.section-label {
	display:flex;
	align-items:center;
	gap:14px;
	margin:clamp(30px, 6vw, 48px) 0 20px;
	font-family:var(--display);
	text-transform:uppercase;
	letter-spacing:.24em;
	font-size:.66rem;
	font-weight:500;
	color:var(--gold);
}

.section-label::after {
	content:"";
	flex:1;
	height:1px;
	background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 45%, transparent), transparent);
}

.chapter blockquote {
  margin: 0 0 1.5em 0;
  padding: 0 1em;
  color: var(--text-color-quote);
	font-style: italic;
	font-size: 106%;
  border-left: 4px solid var(--border-color);
}