@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --night: #070e19;
  --night-soft: #0f1a2a;
  --ink: #192029;
  --muted: #69717d;
  --paper: #f5f2eb;
  --paper-deep: #ebe6dc;
  --earth: #b98555;
  --earth-soft: #e8d3bb;
  --sky: #84b7d8;
  --sky-soft: #cfe4f0;
  --gold: #dfb96e;
  --violet: #a79acb;
  --line: rgba(25,32,41,.14);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', Arial, sans-serif;
  --display: 'Manrope', 'DM Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 18px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; }

.skip-link { position: fixed; top: 0; left: 1rem; z-index: 100; padding: .7rem 1rem; color: var(--night); background: #fff; transform: translateY(-120%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; max-width: 1260px; margin: 0 auto; padding: 1.4rem 2rem; color: rgba(255,255,255,.9); }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--display); font-size: .95rem; font-weight: 600; letter-spacing: .02em; text-decoration: none; }
.brand-mark { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; font-size: .7rem; letter-spacing: .08em; }
.site-header nav { display: flex; gap: 1.8rem; font-size: .8rem; }
.site-header nav a { text-decoration-color: transparent; text-underline-offset: .3rem; }
.site-header nav a:hover, .site-header nav a:focus-visible { text-decoration-color: currentColor; }

.hero { position: relative; display: grid; min-height: min(920px, 100svh); place-items: center; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 42%, rgba(74,119,150,.43), transparent 25rem), radial-gradient(circle at 18% 80%, rgba(140,86,116,.15), transparent 30rem), linear-gradient(145deg,#050b14,#111e31 58%,#07101c); }
.stars { position: absolute; inset: 0; opacity: .52; background-image: radial-gradient(circle,#fff 0 1px,transparent 1.3px),radial-gradient(circle,var(--gold) 0 1px,transparent 1.4px); background-position: 0 0,47px 73px; background-size: 137px 151px,191px 173px; }
.stars-two { opacity: .2; transform: rotate(19deg) scale(1.25); background-size: 211px 239px,271px 219px; }
.orbit { position: absolute; width: min(70vw,720px); aspect-ratio: 1; border: 1px solid rgba(223,185,110,.2); border-radius: 50%; }
.orbit-two { width: min(92vw,980px); border-color: rgba(132,183,216,.08); }
.hero-content { position: relative; z-index: 2; max-width: 1000px; padding: 8rem 1.5rem 4rem; text-align: center; }
.eyebrow,.section-label { margin: 0 0 .9rem; color: var(--gold); font-family: var(--display); font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(4.2rem,10vw,8.8rem); font-weight: 400; letter-spacing: -.055em; line-height: .85; }
.hero-message { margin: 2.4rem 0 1.2rem; color: rgba(255,255,255,.92); font-family: var(--serif); font-size: clamp(2rem,4.4vw,4rem); line-height: 1.05; }
.hero-summary { max-width: 700px; margin: 0 auto 2.5rem; color: rgba(255,255,255,.65); font-size: 1rem; }
.scroll-cue { color: rgba(255,255,255,.58); font-size: .7rem; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.scroll-cue span { display: block; margin-top: .4rem; color: var(--gold); font-size: 1.2rem; }

.section-shell { width: min(100% - 3rem,1120px); margin: 0 auto; }
h2,h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; line-height: 1.08; }
h2 { margin: 0; font-size: clamp(2.4rem,5vw,4.7rem); }
h3 { margin: 0; font-size: clamp(2rem,4vw,3.5rem); }
p { margin: 0 0 1.1rem; }
.lead { font-family: var(--serif); font-size: clamp(1.45rem,2.8vw,2rem); line-height: 1.4; }

.intro { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem,9vw,9rem); padding: clamp(5rem,10vw,9rem) 0; }
.intro-copy .note { margin-top: 2rem; padding: 1.2rem 1.4rem; border-left: 2px solid var(--earth); color: var(--muted); background: rgba(255,255,255,.28); font-size: .88rem; }

.map-section { padding: clamp(5rem,10vw,9rem) 0; color: #fff; background: var(--night); }
.map-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(3rem,7vw,7rem); align-items: end; margin-bottom: 4rem; }
.map-heading > p { color: rgba(255,255,255,.58); }
.circuit-map { display: grid; width: min(100% - 3rem,1260px); margin: 0 auto; gap: 1rem; }
.map-group { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.map-group-title { grid-column: 1/-1; margin: 0 0 .3rem; color: rgba(255,255,255,.38); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.map-node { position: relative; display: flex; min-height: 190px; flex-direction: column; justify-content: flex-end; padding: 1.4rem; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: .6rem; background: rgba(255,255,255,.025); text-decoration: none; transition: transform .25s ease,background .25s ease,border-color .25s ease; }
.map-node:hover,.map-node:focus-visible { transform: translateY(-4px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.25); }
.map-node span { position: absolute; top: .7rem; right: 1rem; color: rgba(255,255,255,.1); font-family: var(--display); font-size: 4rem; line-height: 1; }
.map-node strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; }
.map-node small { color: rgba(255,255,255,.48); font-size: .68rem; }
.upper .map-node { box-shadow: inset 0 -3px 0 rgba(132,183,216,.5); }
.earth .map-node { box-shadow: inset 0 -3px 0 rgba(185,133,85,.58); }
.jump-line { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--gold); font-size: .66rem; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.jump-line::before,.jump-line::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg,transparent,rgba(223,185,110,.5),transparent); }

.circuits-heading { padding: clamp(5rem,10vw,9rem) 0 3rem; }
.circuits-heading h2 { max-width: 850px; }
.circuit { display: grid; grid-template-columns: .3fr .85fr 1.35fr; width: min(100% - 3rem,1120px); margin: 0 auto; gap: clamp(1.5rem,5vw,5rem); padding: clamp(4rem,8vw,7rem) 0; border-top: 1px solid var(--line); }
.circuit-number { color: var(--earth); font-family: var(--display); font-size: clamp(2rem,5vw,4rem); font-weight: 500; line-height: 1; }
.circuit-upper .circuit-number { color: #6b9bbd; }
.circuit-family { margin-bottom: .7rem; color: var(--muted); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.consciousness { margin-top: .7rem; color: var(--muted); font-size: .82rem; }
.circuit-lead { font-family: var(--serif); font-size: clamp(1.35rem,2.5vw,1.9rem); line-height: 1.35; }
.balance { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 2rem 0; }
.balance p { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: .5rem; font-size: .82rem; line-height: 1.5; }
.balance span { display: block; margin-bottom: .35rem; color: var(--earth); font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.circuit-upper .balance span { color: #477e9f; }
.circuit blockquote { margin: 2.1rem 0; padding-left: 1.3rem; border-left: 2px solid var(--gold); font-family: var(--serif); font-size: clamp(1.3rem,2.5vw,1.8rem); line-height: 1.3; }
.practice { color: var(--muted); font-size: .82rem; }

.grand-jump { position: relative; width: min(100% - 2rem,1250px); margin: 3rem auto 7rem; padding: clamp(3rem,8vw,7rem); overflow: hidden; border-radius: 1rem; color: rgba(255,255,255,.75); background: radial-gradient(circle at 80% 20%,rgba(167,154,203,.3),transparent 22rem),var(--night-soft); }
.grand-jump::after { content: ''; position: absolute; top: -10rem; right: -9rem; width: 27rem; height: 27rem; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.02); }
.grand-jump h2 { color: #fff; }
.jump-lead { position: relative; z-index: 1; max-width: 850px; margin: 1.5rem 0 3rem; color: var(--sky-soft); font-family: var(--serif); font-size: clamp(1.8rem,4vw,3.4rem); line-height: 1.12; }
.jump-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 900px; }
.jump-reminder { max-width: 820px; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.14); color: #fff; font-family: var(--serif); font-size: 1.35rem; }

.connections { padding: clamp(5rem,10vw,9rem) 0; color: #fff; background: var(--night); }
.connections-heading { display: grid; grid-template-columns: 1fr .75fr; gap: 3rem; align-items: end; }
.connections-heading .section-label { grid-column: 1/-1; }
.connections-heading > p:last-child { color: rgba(255,255,255,.58); }
.pairs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin-top: 4rem; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: .6rem; background: rgba(255,255,255,.11); }
.pair { min-height: 270px; padding: clamp(1.8rem,4vw,3rem); background: var(--night); }
.pair span { color: var(--gold); font-family: var(--display); font-size: 1.5rem; }
.pair h3 { margin: 2rem 0 1rem; font-size: 1.8rem; }
.pair p { color: rgba(255,255,255,.54); }

.feedback { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem,9vw,9rem); padding: clamp(5rem,10vw,9rem) 0; }
.feedback-loop { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: 2rem; }
.feedback-loop span { padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; }
.feedback-loop b { color: var(--earth); font-weight: 400; }

.self-observation { padding: clamp(5rem,10vw,9rem) 0; background: var(--paper-deep); }
.self-observation h2 { max-width: 850px; }
.questions { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 3rem; border: 1px solid var(--line); background: var(--line); }
.questions p { min-height: 145px; margin: 0; padding: 1.7rem; background: var(--paper-deep); font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; }
.closing { max-width: 850px; margin: 3rem 0 0; font-family: var(--serif); font-size: clamp(1.6rem,3vw,2.4rem); line-height: 1.25; }

.sources { display: grid; grid-template-columns: .5fr 1.5fr; gap: clamp(2rem,8vw,8rem); padding: clamp(5rem,10vw,9rem) 0; }
.sources h2 { margin-bottom: 1.5rem; }
.sources div { max-width: 750px; }
.book-link { display: inline-block; margin-top: 1rem; padding-bottom: .2rem; border-bottom: 1px solid var(--ink); font-size: .82rem; font-weight: 600; text-decoration: none; }

.floating-nav { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 30; display: flex; align-items: center; gap: .25rem; padding: .45rem; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.7); background: rgba(7,14,25,.9); box-shadow: 0 12px 40px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
.floating-nav span { padding: 0 .55rem; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.floating-nav a { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; font-size: .68rem; text-decoration: none; }
.floating-nav a:hover,.floating-nav a:focus-visible,.floating-nav a.is-active { color: var(--night); background: var(--gold); }

footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 3rem max(1.5rem,calc((100% - 1120px)/2)); color: rgba(255,255,255,.72); background: var(--night); font-size: .8rem; }
.footer-brand .brand-mark { border-color: rgba(255,255,255,.25); }
footer p { margin: 0; }

@media (max-width: 900px) {
  .circuit { grid-template-columns: .2fr .8fr; }
  .circuit-body { grid-column: 2; }
  .map-group { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .site-header { padding: 1rem 1.2rem; }
  .site-header nav a:not(:last-child) { display: none; }
  .section-shell { width: min(100% - 2rem,1120px); }
  .hero { min-height: 780px; }
  .hero-content { padding-top: 7rem; }
  .intro,.map-heading,.connections-heading,.feedback,.sources { grid-template-columns: 1fr; gap: 2rem; }
  .circuit-map { width: min(100% - 2rem,1260px); }
  .map-node { min-height: 155px; }
  .circuit { grid-template-columns: 3rem 1fr; width: min(100% - 2rem,1120px); gap: 1rem; }
  .circuit-body { grid-column: 1/-1; }
  .balance,.jump-copy,.pairs,.questions { grid-template-columns: 1fr; }
  .grand-jump { margin-bottom: 4rem; }
  .floating-nav { right: .6rem; bottom: .6rem; max-width: calc(100% - 1.2rem); }
  .floating-nav span { display: none; }
  footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }