/*  ==========================================================================
	Learning pages (/learn/) — generated by learn_build.node.js, June 2026.
	Same design language as the chart pages: warm near-black, gold
	hairlines, Cinzel headings, Georgia body.
	========================================================================== */
:root {
	--bg: #121110;
	--panel: #18150f;
	--panel-2: #131109;
	--hairline: rgba(238, 194, 50, 0.16);
	--hairline-soft: rgba(238, 194, 50, 0.08);
	--text: #d9d2c2;
	--text-dim: rgba(217, 210, 194, 0.62);
	--gold: #eec232;
	--gold-soft: #d8b765;
}
* { box-sizing: border-box; }
body {
	margin: 0;
	padding: 2rem 1.5rem 5rem;
	background:
		radial-gradient(1000px 640px at 50% 260px, rgba(238, 194, 50, 0.05), transparent 65%),
		var(--bg);
	color: var(--text);
	font-family: Georgia, 'Times New Roman', serif;
}
.wrap { max-width: 880px; margin: 0 auto; }

.topbar { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 2rem; flex-wrap: wrap; }
.brand {
	font-family: "Cinzel", serif; font-size: 1.6rem;
	color: var(--gold); text-decoration: none; letter-spacing: .04em;
}
.brand span { color: #f4efe2; }
.page-tag {
	font-family: "Cinzel", serif; font-size: .8rem; color: var(--gold-soft);
	letter-spacing: .42em; text-transform: uppercase;
}
.topbar nav { margin-left: auto; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.topbar nav a { font-size: .85rem; color: var(--text-dim); text-decoration: none; letter-spacing: .04em; }
.topbar nav a:hover { color: var(--gold); }

.crumbs { font-size: .8rem; color: var(--text-dim); margin-bottom: 1.6rem; letter-spacing: .04em; }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }

.eyebrow {
	font-family: "Cinzel", serif; font-size: .72rem; letter-spacing: .34em;
	text-transform: uppercase; color: var(--gold-soft); font-weight: 400;
	margin: 0 0 .8rem;
}
h1 {
	font-family: "Cinzel", serif; font-weight: 400; color: var(--gold);
	letter-spacing: .06em; font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 1.2rem;
	line-height: 1.3;
}
h2 {
	font-family: "Cinzel", serif; font-weight: 400; font-size: .85rem;
	letter-spacing: .3em; text-transform: uppercase; color: var(--gold-soft);
	margin: 2.6rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline);
}
p { line-height: 1.75; margin: .9rem 0; color: rgba(217, 210, 194, .9); font-size: 1.02rem; }
a { color: var(--gold-soft); }
a:hover { color: var(--gold); }
a:focus-visible, .cta a:focus-visible { outline: 2px solid rgba(238, 194, 50, .85); outline-offset: 2px; }

.lede { display: flex; gap: 2.2rem; align-items: flex-start; }
.lede .body { flex: 1; }
figure.hexagram {
	margin: .4rem 0 0; flex: 0 0 auto; text-align: center;
}
figure.hexagram svg { display: block; }
figure.hexagram figcaption {
	margin-top: .6rem; font-family: "Cinzel", serif; font-size: .62rem;
	letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim);
}
@media (max-width: 620px) {
	.lede { flex-direction: column-reverse; gap: 1rem; }
}

.facts {
	background: linear-gradient(180deg, var(--panel), var(--panel-2));
	border: 1px solid var(--hairline); border-radius: 12px;
	padding: 1.1rem 1.3rem; margin: 1.6rem 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem 1.4rem;
}
.facts div .k {
	font-size: .62rem; text-transform: uppercase; letter-spacing: .22em;
	color: var(--gold-soft); margin-bottom: .3rem;
}
.facts div .v { font-size: .98rem; color: var(--text); line-height: 1.45; }
.facts div .v a { text-decoration: none; border-bottom: 1px dotted rgba(238, 194, 50, .4); }

ul.linklist { list-style: none; padding: 0; columns: 2; column-gap: 3rem; margin: 1rem 0; }
ul.linklist li { padding: .45rem 0; border-bottom: 1px solid var(--hairline-soft); break-inside: avoid; }
ul.linklist a { text-decoration: none; }
ul.linklist .sub { color: var(--text-dim); font-size: .85rem; }
@media (max-width: 620px) { ul.linklist { columns: 1; } }

.gate-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: .55rem; margin: 1rem 0;
}
.gate-grid a {
	display: block; padding: .6rem .75rem; text-decoration: none;
	border: 1px solid var(--hairline-soft); border-radius: 10px;
	background: rgba(0, 0, 0, 0.2);
}
.gate-grid a:hover { border-color: rgba(238, 194, 50, .5); }
.gate-grid .num { font-family: "Cinzel", serif; color: var(--gold); }
.gate-grid .nm { display: block; font-size: .78rem; color: var(--text-dim); margin-top: .15rem; line-height: 1.35; }

.cta {
	background: linear-gradient(180deg, var(--panel), var(--panel-2));
	border: 1px solid var(--hairline); border-radius: 14px;
	padding: 1.5rem 1.7rem; margin: 2.6rem 0 0; text-align: center;
}
.cta p { margin: 0 0 1.1rem; color: var(--text); }
.cta a.btn {
	display: inline-block; background: linear-gradient(180deg, #f3cf52, #dcae22);
	color: #18130a; text-decoration: none; font-family: "Cinzel", serif;
	letter-spacing: .14em; padding: .7rem 1.6rem; border-radius: 8px;
}
.cta a.btn:hover { filter: brightness(1.07); }

.related { margin-top: 2.2rem; font-size: .9rem; color: var(--text-dim); line-height: 2; }
.related a { text-decoration: none; border-bottom: 1px dotted rgba(238, 194, 50, .4); margin-right: 1.1rem; white-space: nowrap; }

footer {
	margin-top: 3.4rem; font-size: .8rem; color: var(--text-dim); line-height: 1.7;
	border-top: 1px solid var(--hairline); padding-top: 1.2rem;
}
footer a { color: var(--gold-soft); }