/* Atlas Academy — standalone article template
   Loaded alongside /colors_and_type.css which supplies CSS variables.
*/

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; padding: 0;
  background: var(--bg-1, #080c18);
  color: var(--text-2, rgba(255,255,255,0.72));
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.ac-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(16px, 4vw, 48px); height: 60px;
  background: rgba(8,12,24,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.ac-nav-logo { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700;
  color: var(--text-1, rgba(255,255,255,0.92)); text-decoration: none; font-family: var(--font-display, 'Inter', sans-serif); }
.ac-nav-logo img { border-radius: 4px; }
.ac-nav-logo span { color: var(--text-4, rgba(255,255,255,0.38)); font-weight: 400; }
.ac-nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px;
  background: var(--brand-500, #2E80FF); color: #fff; border-radius: 8px; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: background 0.2s; }
.ac-nav-cta:hover { background: var(--brand-400, #4EA0FF); }

.ac-page { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px) 0; }

.ac-hero { margin-bottom: 0; }
.ac-eyebrow { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-4, rgba(255,255,255,0.38)); margin: 0 0 16px; }
.ac-eyebrow a { color: var(--brand-400, #4EA0FF); text-decoration: none; }
.ac-eyebrow a:hover { text-decoration: underline; }
.ac-hero h1 { font-family: var(--font-display, 'Inter', sans-serif); font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-1, rgba(255,255,255,0.92));
  margin: 0 0 20px; }
.ac-lead { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.7; color: var(--text-2, rgba(255,255,255,0.72));
  margin: 0 0 16px; max-width: 62ch; }
.ac-meta { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-4, rgba(255,255,255,0.38));
  margin: 0; letter-spacing: 0.04em; }

.ac-divider { border: none; border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  margin: clamp(28px, 4vw, 48px) auto; max-width: 760px; padding: 0 clamp(20px, 4vw, 48px); }

.ac-body { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px) clamp(60px, 8vw, 100px); }

.ac-body h2 { font-family: var(--font-display, 'Inter', sans-serif); font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700; color: var(--text-1, rgba(255,255,255,0.92)); letter-spacing: -0.01em;
  margin: 2.2em 0 0.7em; line-height: 1.25; }
.ac-body h2:first-child { margin-top: 0; }
.ac-body h3 { font-family: var(--font-display, 'Inter', sans-serif); font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 700; color: var(--text-1, rgba(255,255,255,0.92)); margin: 1.8em 0 0.5em; line-height: 1.3; }
.ac-body p { font-size: 16px; line-height: 1.78; color: var(--text-2, rgba(255,255,255,0.72)); margin: 0 0 1.1em; }
.ac-body strong { color: var(--text-1, rgba(255,255,255,0.92)); font-weight: 700; }
.ac-body em { font-style: italic; }

.ac-body ul, .ac-body ol { padding-left: 0; list-style: none; margin: 0 0 1.2em;
  display: flex; flex-direction: column; gap: 8px; }
.ac-body ul li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.65; color: var(--text-2, rgba(255,255,255,0.72)); }
.ac-body ul li::before { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-400, #4EA0FF); flex-shrink: 0; margin-top: 9px; }
.ac-body ol { counter-reset: ac-ol; }
.ac-body ol li { display: flex; gap: 14px; font-size: 15.5px; line-height: 1.65; color: var(--text-2, rgba(255,255,255,0.72)); counter-increment: ac-ol; }
.ac-body ol li::before { content: counter(ac-ol) "."; font-family: var(--font-mono, monospace);
  font-size: 12px; font-weight: 700; color: var(--brand-400, #4EA0FF); min-width: 20px; padding-top: 2px; flex-shrink: 0; }

.ac-body a { color: var(--brand-400, #4EA0FF); text-decoration: none;
  border-bottom: 1px solid rgba(78,160,255,0.3); transition: border-color 0.2s; }
.ac-body a:hover { border-color: var(--brand-400, #4EA0FF); }
.ac-body blockquote { margin: 1.4em 0; padding: 18px 20px 18px 22px; border-left: 3px solid var(--brand-400, #4EA0FF);
  background: rgba(46,128,255,0.05); border-radius: 0 8px 8px 0; font-size: 15.5px; font-style: italic;
  color: var(--text-2, rgba(255,255,255,0.72)); }
.ac-body code { font-family: var(--font-mono, monospace); font-size: 13px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 4px; padding: 1px 6px; color: var(--text-1, rgba(255,255,255,0.92)); }
.ac-body pre { background: rgba(8,14,28,0.8); border: 1px solid var(--border-strong, rgba(255,255,255,0.14));
  border-radius: 8px; padding: 18px 20px; overflow-x: auto; margin: 1.2em 0; }
.ac-body pre code { background: none; border: none; padding: 0; font-size: 13.5px; line-height: 1.6; }

.ac-callout { margin: 1.6em 0; padding: 18px 20px; background: rgba(46,128,255,0.07);
  border: 1px solid rgba(46,128,255,0.22); border-radius: 10px; font-size: 15px; line-height: 1.65;
  color: var(--text-2, rgba(255,255,255,0.72)); }
.ac-callout-warn { background: rgba(212,162,76,0.07); border-color: rgba(212,162,76,0.28); }

.ac-footnotes { margin-top: 3em; padding-top: 1.5em; border-top: 1px solid var(--border, rgba(255,255,255,0.08)); }
.ac-footnotes ol { margin: 0; gap: 6px; }
.ac-footnotes ol li { font-size: 12px; color: var(--text-4, rgba(255,255,255,0.38)); line-height: 1.5; }
.ac-footnotes a { color: var(--text-4, rgba(255,255,255,0.38)); }
sup a { font-size: 10px; color: var(--brand-400, #4EA0FF); text-decoration: none;
  font-family: var(--font-mono, monospace); font-weight: 700; }

.ac-cta { margin: 3em auto 0; max-width: 760px; padding: 0 clamp(20px, 4vw, 48px) clamp(40px, 6vw, 72px); }
.ac-cta-inner { padding: 28px; background: linear-gradient(135deg, rgba(46,128,255,0.12), rgba(11,61,120,0.06));
  border: 1px solid rgba(46,128,255,0.30); border-radius: 14px;
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.ac-cta-text { flex: 1; min-width: 220px; }
.ac-cta-text h3 { font-family: var(--font-display, 'Inter', sans-serif); font-size: 18px; font-weight: 700;
  color: var(--text-1, rgba(255,255,255,0.92)); margin: 0 0 6px; }
.ac-cta-text p { font-size: 14px; color: var(--text-3, rgba(255,255,255,0.52)); margin: 0; line-height: 1.6; }
.ac-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px;
  background: var(--brand-500, #2E80FF); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 700;
  text-decoration: none; transition: background 0.2s; white-space: nowrap; }
.ac-cta-btn:hover { background: var(--brand-400, #4EA0FF); }

@media (max-width: 600px) {
  .ac-body h2 { font-size: 20px; }
  .ac-body p  { font-size: 15px; }
  .ac-cta-inner { padding: 20px; }
}