@import url("./assets/brand/tokens.css");

:root {
  color-scheme: dark;
  --page: #050816;
  --panel: #0a1024;
  --panel-2: #0e1730;
  --ink: #f7f4ea;
  --muted: #aab5d1;
  --cyan: #62e6ff;
  --amber: #ffca68;
  --violet: #b595ff;
  --green: #7ef0bd;
  --line: rgba(98, 230, 255, 0.22);
  --soft-line: rgba(170, 181, 209, 0.14);
  --max: 1180px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 82% 6%, rgba(181, 149, 255, .12), transparent 28rem),
    radial-gradient(circle at 18% 28%, rgba(98, 230, 255, .07), transparent 32rem),
    var(--page);
  color: var(--ink);
  line-height: 1.55;
}
a { color: inherit; }
button, input, select { font: inherit; }
.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 50;
  padding: .75rem 1rem;
  background: var(--amber);
  color: #07101f;
  font-weight: 850;
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 72px;
  padding: .75rem max(1.25rem, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 22, .88);
  backdrop-filter: blur(16px);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  line-height: 1;
}
.wordmark-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 22px rgba(98, 230, 255, .85);
}
.wordmark span:last-child { display: grid; gap: .28rem; }
.wordmark strong { letter-spacing: .16em; font-size: .88rem; }
.wordmark small { color: var(--muted); letter-spacing: .2em; font-size: .58rem; }
.site-header nav { display: flex; align-items: center; gap: 1.25rem; font-size: .88rem; font-weight: 750; }
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--cyan); }

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(82vh, 840px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  overflow: hidden;
  padding: clamp(5rem, 9vw, 8rem) max(1.25rem, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(5, 8, 22, .98), rgba(5, 8, 22, .72)),
    url("./assets/brand/patterns/guide-grid.svg") center / 760px repeat;
}
.starfield, .starfield i { position: absolute; inset: 0; pointer-events: none; }
.starfield { z-index: -1; opacity: .55; }
.starfield::before, .starfield::after, .starfield i::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 8vw 12vh #fff, 19vw 36vh var(--cyan), 33vw 10vh #fff, 45vw 54vh #fff, 62vw 18vh var(--violet), 75vw 43vh #fff, 88vw 14vh var(--cyan), 93vw 62vh #fff, 24vw 71vh #fff, 54vw 77vh var(--amber);
}
.starfield::before { left: 2vw; top: 4vh; }
.starfield::after { left: 7vw; top: 28vh; opacity: .55; transform: scale(.7); }
.starfield i::before { left: 15vw; top: 14vh; opacity: .35; transform: scale(.5); }
.hero-copy { min-width: 0; }
.eyebrow {
  margin: 0 0 .9rem;
  color: var(--amber);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 830px;
  margin: 0;
  font-size: clamp(3.2rem, 7.2vw, 6.9rem);
  line-height: .9;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.hero h1 span { color: var(--cyan); }
.lede {
  max-width: 720px;
  margin: 1.6rem 0 0;
  color: #d7def0;
  font-size: clamp(1.08rem, 2vw, 1.42rem);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 50px;
  padding: .78rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: .72rem;
  text-decoration: none;
  font-weight: 850;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
.button.primary { border-color: var(--amber); background: var(--amber); color: #07101f; }
.button.secondary { background: rgba(10, 16, 36, .78); }
.button:hover, .button:focus-visible { transform: translateY(-2px); border-color: var(--cyan); }
.course-status { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: 1.6rem; color: var(--muted); font-size: .8rem; }
.course-status span { display: inline-flex; align-items: baseline; gap: .4rem; }
.course-status strong { color: var(--ink); font: 900 1.2rem ui-monospace, monospace; }

.hero-model {
  position: relative;
  width: min(34vw, 420px);
  aspect-ratio: 1;
  justify-self: end;
  border-radius: 50%;
}
.course-core, .orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.course-core {
  z-index: 4;
  display: grid;
  place-items: center;
  width: 34%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 202, 104, .7);
  background: radial-gradient(circle, rgba(255, 202, 104, .19), rgba(10, 16, 36, .95) 70%);
  box-shadow: 0 0 50px rgba(255, 202, 104, .13);
  text-align: center;
  align-content: center;
  line-height: 1;
}
.course-core small { color: var(--amber); font-size: .58rem; letter-spacing: .14em; }
.course-core strong { margin: .22rem 0; font: 900 clamp(2.1rem, 5vw, 4rem) ui-monospace, monospace; }
.course-core span { color: var(--muted); font-size: .63rem; letter-spacing: .16em; }
.orbit { border: 1px solid rgba(98, 230, 255, .25); }
.orbit::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  left: 50%;
  top: -5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(98, 230, 255, .8);
}
.orbit span {
  position: absolute;
  right: -1rem;
  top: 50%;
  padding: .22rem .45rem;
  background: var(--page);
  color: var(--muted);
  font: 800 .58rem ui-monospace, monospace;
  letter-spacing: .1em;
}
.orbit-one { width: 54%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(18deg); }
.orbit-two { width: 76%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(124deg); border-color: rgba(181, 149, 255, .32); }
.orbit-two::before { background: var(--violet); }
.orbit-three { width: 98%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(242deg); border-color: rgba(126, 240, 189, .28); }
.orbit-three::before { background: var(--green); }
.orbit-one span, .orbit-two span, .orbit-three span { transform: rotate(-18deg); }
.orbit-two span { transform: rotate(-124deg); }
.orbit-three span { transform: rotate(-242deg); }

.principles {
  width: min(var(--max), calc(100% - 2.5rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
  transform: translateY(-1.6rem);
}
.principles article { padding: 1.5rem; background: rgba(10, 16, 36, .98); }
.principle-number { color: var(--cyan); font: 900 .9rem ui-monospace, monospace; }
.principles h2 { margin: .5rem 0 .4rem; font-size: 1.14rem; text-transform: uppercase; }
.principles p { margin: 0; color: var(--muted); }

.curriculum-section { width: min(var(--max), calc(100% - 2.5rem)); margin: 4rem auto 7rem; }
.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 7vw, 6rem); align-items: end; margin-bottom: 2.5rem; }
.section-heading h2 { margin: 0; max-width: 690px; font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: .96; letter-spacing: -.04em; text-transform: uppercase; }
.section-intro { margin: 0; color: var(--muted); font-size: 1.06rem; }
.lesson-list { display: grid; gap: 1.2rem; }
.lesson-card { display: grid; grid-template-columns: 68px minmax(0, 1fr); }
.lesson-rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.lesson-rail span {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--page);
  color: var(--cyan);
  font: 900 .96rem ui-monospace, monospace;
}
.lesson-rail i { flex: 1; width: 1px; min-height: 2rem; background: linear-gradient(var(--line), transparent); }
.lesson-card:last-child .lesson-rail i { display: none; }
.lesson-body {
  min-width: 0;
  overflow: hidden;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--soft-line);
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(14, 23, 48, .98), rgba(7, 12, 29, .99)),
    url("./assets/brand/patterns/guide-grid.svg") center / 620px;
}
.lesson-card.is-live .lesson-body { border-color: rgba(126, 240, 189, .42); box-shadow: inset 4px 0 0 rgba(126, 240, 189, .75); }
.lesson-card.is-live .lesson-rail span { color: var(--green); border-color: rgba(126, 240, 189, .55); }
.lesson-meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font: 800 .7rem ui-monospace, monospace; letter-spacing: .12em; }
.lesson-status { padding: .18rem .5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--cyan); }
.lesson-status.live { color: var(--green); border-color: rgba(126, 240, 189, .4); }
.lesson-question { margin: 1rem 0 .45rem; color: var(--amber); font-size: .84rem; font-weight: 750; }
.lesson-body h3 { margin: 0; max-width: 920px; font-size: clamp(1.65rem, 3.2vw, 2.8rem); line-height: 1; letter-spacing: -.025em; }
.lesson-promise { max-width: 900px; margin: 1rem 0 0; color: #d8e0f2; font-size: 1.04rem; }
.lesson-details { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1rem; margin-top: 1.4rem; }
.lesson-details > div, .lesson-details aside { padding: 1rem; border: 1px solid var(--soft-line); border-radius: .72rem; background: rgba(5, 8, 22, .46); }
.lesson-details aside { border-color: rgba(181, 149, 255, .22); }
.lesson-details h4 { margin: 0 0 .65rem; color: var(--cyan); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }
.lesson-details aside h4 { color: var(--violet); }
.lesson-details ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1.4rem; margin: 0; padding-left: 1.15rem; color: var(--muted); font-size: .9rem; }
.lesson-details li::marker { color: var(--cyan); }
.lesson-details aside p { margin: 0; color: var(--muted); font-size: .9rem; }
.lesson-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--soft-line); }
.lesson-footer p { max-width: 800px; margin: 0; color: var(--muted); font-size: .84rem; }
.lesson-footer strong { color: var(--ink); }
.lesson-action { flex: 0 0 auto; color: var(--amber); font-size: .85rem; font-weight: 850; text-decoration: none; }
.lesson-action:hover, .lesson-action:focus-visible { text-decoration: underline; }
.lesson-action.planned { color: var(--muted); font-weight: 700; }
.chapter-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.chapter-map article { display: grid; grid-template-columns: 2.2rem 1fr; gap: .65rem; padding: .85rem; border: 1px solid rgba(255, 202, 104, .22); border-radius: .68rem; background: rgba(255, 202, 104, .035); }
.chapter-map article > span { color: var(--amber); font: 900 .75rem ui-monospace, monospace; }
.chapter-map strong { font-size: .92rem; }
.chapter-map p { margin: .25rem 0 0; color: var(--muted); font-size: .82rem; }
.critical-lens { margin: .8rem 0 0; padding: .9rem; border-left: 3px solid var(--violet); background: rgba(181, 149, 255, .06); color: var(--muted); font-size: .86rem; }
.critical-lens strong { color: var(--violet); }
.load-error { padding: 2rem; border: 1px dashed var(--line); color: var(--muted); }

.course-note {
  width: min(var(--max), calc(100% - 2.5rem));
  margin: 0 auto 7rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3.2rem);
  border: 1px solid rgba(181, 149, 255, .28);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(14, 23, 48, .95), rgba(7, 12, 29, .98));
}
.note-mark { display: grid; place-items: center; width: clamp(72px, 10vw, 110px); aspect-ratio: 1; border: 1px solid rgba(181, 149, 255, .5); border-radius: 50%; color: var(--violet); font-size: clamp(2.4rem, 6vw, 4.5rem); }
.course-note h2 { margin: .15rem 0 .7rem; font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1; text-transform: uppercase; }
.course-note p:last-child { max-width: 850px; margin: 0; color: var(--muted); font-size: 1.04rem; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem max(1.25rem, calc((100vw - var(--max)) / 2));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .84rem;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-model { width: min(70vw, 420px); justify-self: center; }
  .section-heading { grid-template-columns: 1fr; gap: 1rem; }
  .lesson-details { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .site-header { gap: .8rem; }
  .site-header nav { gap: .8rem; font-size: .78rem; }
  .site-header nav a:nth-child(3) { display: none; }
  .principles { grid-template-columns: 1fr; }
  .lesson-card { grid-template-columns: 44px minmax(0, 1fr); }
  .lesson-rail span { width: 38px; height: 38px; font-size: .75rem; }
  .lesson-details ul, .chapter-map { grid-template-columns: 1fr; }
  .lesson-footer { align-items: flex-start; flex-direction: column; }
  .course-note { grid-template-columns: 1fr; }
  .note-mark { width: 76px; }
  footer { align-items: flex-start; flex-direction: column; gap: .25rem; }
  footer p { margin: 0; }
}
@media (max-width: 520px) {
  .site-header nav a:first-child { display: none; }
  .hero { padding-top: 4rem; }
  .hero h1 { font-size: clamp(2.55rem, 13vw, 3.5rem); }
  .hero h1 span { display: block; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .course-status { gap: .7rem 1rem; }
  .hero-model { width: min(82vw, 340px); }
  .curriculum-section, .principles, .course-note { width: min(100% - 1.5rem, var(--max)); }
  .lesson-card { grid-template-columns: 1fr; }
  .lesson-rail { display: none; }
  .lesson-body { padding: 1.1rem; }
  .lesson-meta { gap: .6rem; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}