/* ============================================================
   Load & Form — screen.css
   Ghost theme · Dark navy + blueprint blue · IBM Plex
   ============================================================ */

/* ── Google Fonts ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  /* dark (default) */
  --bg:       oklch(0.205 0.018 258);
  --panel:    oklch(0.246 0.020 258);
  --panel-2:  oklch(0.285 0.022 258);
  --panel-3:  oklch(0.170 0.016 258);
  --line:     oklch(0.360 0.022 258);
  --text:     oklch(0.930 0.008 250);
  --mute:     oklch(0.640 0.018 250);
  --blue:     oklch(0.700 0.130 246);
  --blue-dim: oklch(0.520 0.142 252);
  /* light body (lesson / help / contact) */
  --lt-bg:      oklch(0.985 0.004 250);
  --lt-bg-2:    oklch(0.965 0.007 250);
  --lt-ink:     oklch(0.255 0.024 258);
  --lt-slate:   oklch(0.460 0.030 258);
  --lt-mute:    oklch(0.590 0.025 258);
  --lt-line:    oklch(0.885 0.012 250);
  --lt-line-2:  oklch(0.820 0.016 250);
  --lt-blue:    oklch(0.500 0.142 252);
  /* type */
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* spacing */
  --pad: clamp(20px, 5vw, 72px);
}

/* ── Light mode override ─────────────────────────────────── */
body.light-mode {
  --bg:       oklch(0.985 0.004 250);
  --panel:    oklch(0.965 0.007 250);
  --panel-2:  oklch(0.942 0.010 250);
  --panel-3:  oklch(0.978 0.005 250);
  --line:     oklch(0.855 0.012 250);
  --text:     oklch(0.255 0.024 258);
  --mute:     oklch(0.520 0.025 258);
  --blue:     oklch(0.500 0.142 252);
}
body.light-mode .logo-dark-only  { display: none;  }
body.light-mode .logo-light-only { display: block; }
.logo-dark-only  { display: block; }
.logo-light-only { display: none;  }
body.light-mode .icon-sun  { display: block; }
body.light-mode .icon-moon { display: none;  }
.icon-sun  { display: none;  }
.icon-moon { display: block; }

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  { margin: 0; font-family: var(--sans); background: var(--bg); color: var(--text);
        -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1,h2,h3,h4,p,ul,ol,blockquote,figure { margin: 0; }
img   { display: block; max-width: 100%; }
a     { text-decoration: none; color: inherit; }
em    { font-style: italic; }
input, textarea, button, select { font-family: var(--sans); }

/* ── Utilities ───────────────────────────────────────────── */
.mono  { font-family: var(--mono); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; }
.blue  { color: var(--blue); }
.mute  { color: var(--mute); }
.rule  { height: 1px; background: var(--line); border: none; margin: 0; }
.section-label {
  display: flex; align-items: center; gap: 16px; font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue);
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--line); max-width: 200px; }

/* ── Logo B ──────────────────────────────────────────────── */
.logo-b-wrap       { display: flex; align-items: center; color: inherit; text-decoration: none; gap: 0; }
.logo-mark         { height: 36px; width: auto; display: block; flex-shrink: 0; }
.logo-divider      { width: 2px; height: 32px; margin: 0 16px; background: currentColor; opacity: 0.25; flex-shrink: 0; }
.logo-text         { display: flex; flex-direction: column; gap: 2px; }
.logo-line1        { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; }
.logo-line2        { font-family: var(--mono); font-size: 12px; font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; opacity: 0.55; }

/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  transition: box-shadow 0.2s;
}
.nav.scrolled   { box-shadow: 0 4px 24px rgba(0,0,0,0.4); }
.nav-links      { display: flex; gap: 26px; align-items: center; }
.nav-link       { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
                  color: var(--mute); transition: color 0.15s; white-space: nowrap; }
.nav-link:hover { color: var(--text); }
.btn-primary    { background: var(--blue); color: var(--bg); font-family: var(--mono); font-size: 12px;
                  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 11px 20px;
                  cursor: pointer; border: none; transition: opacity 0.15s; display: inline-block; }
.btn-primary:hover { opacity: 0.88; }
.btn-primary.lg { font-size: 14px; padding: 17px 44px; letter-spacing: 0.06em; }
.btn-outline    { background: transparent; color: var(--text); font-family: var(--mono);
                  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 11px 20px;
                  border: 1px solid var(--line); cursor: pointer; transition: border-color 0.15s; display: inline-block; }
.btn-outline:hover { border-color: var(--mute); }
.btn-sm         { background: var(--blue); color: var(--bg); font-family: var(--mono); font-size: 11px;
                  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 9px 16px; cursor: pointer; border: none; white-space: nowrap; }
.sign-in-link   { border: 1px solid var(--line); padding: 8px 14px; font-family: var(--mono);
                  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
                  color: var(--mute); transition: border-color 0.15s; }
.sign-in-link:hover { border-color: var(--mute); }
.theme-toggle   { background: transparent; border: 1px solid var(--line); color: var(--mute);
                  width: 34px; height: 34px; cursor: pointer; display: flex; align-items: center;
                  justify-content: center; transition: border-color 0.15s, color 0.15s; padding: 0;
                  flex-shrink: 0; margin-left: 8px; }
.theme-toggle:hover { border-color: var(--mute); color: var(--text); }
.hamburger      { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px;
                  background: none; border: none; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--mute); transition: 0.2s; }
.nav-mobile     { display: none; background: var(--panel); border-bottom: 1px solid var(--line); }
.nav-mobile a   { display: block; padding: 14px var(--pad); font-family: var(--mono); font-size: 12px;
                  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line); }
.nav-mobile.open { display: flex; flex-direction: column; }

/* ── Moment curve motif ──────────────────────────────────── */
.motif     { padding: 0 var(--pad); color: var(--line); overflow: hidden; }
.motif svg { width: 100%; display: block; height: 64px; }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  padding: 24px var(--pad); background: var(--panel-3);
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); flex-wrap: wrap; gap: 12px;
}
.footer-copy  { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.footer-links { display: flex; gap: 24px; }
.footer-links a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
                  text-transform: uppercase; color: var(--mute); transition: color 0.15s; }
.footer-links a:hover { color: var(--text); }

/* =============================================================
   HOMEPAGE — index.hbs
   ============================================================= */

/* Hero */
.hero         { padding: 72px var(--pad) 64px; border-bottom: 1px solid var(--line); }
.hero-inner   { display: grid; grid-template-columns: 1fr 360px; gap: 64px; align-items: center; }
.hero h1      { font-size: clamp(44px, 5.5vw, 80px); font-weight: 700; line-height: 1.0;
                letter-spacing: -0.033em; margin: 20px 0 28px; }
.hero p       { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.58; color: var(--mute);
                max-width: 48ch; margin-bottom: 38px; text-wrap: pretty; }
.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-actions .sign-note { font-family: var(--mono); font-size: 11px; color: var(--mute);
                            letter-spacing: 0.06em; text-transform: uppercase; }
.hero-actions .sign-note a { color: var(--blue); text-decoration: underline; }
.stat-stack   { display: flex; flex-direction: column; gap: 16px; }
.stat-card    { display: flex; align-items: center; gap: 22px; padding: 20px 24px;
                border: 1px solid var(--line); background: var(--panel); }
.stat-n       { font-family: var(--sans); font-weight: 700; font-size: 44px;
                letter-spacing: -0.03em; color: var(--blue); line-height: 1; min-width: 88px; }
.stat-l       { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
                text-transform: uppercase; color: var(--mute); }

/* Features grid */
.features         { border-bottom: 1px solid var(--line); }
.features-grid    { display: grid; grid-template-columns: repeat(4, 1fr); }
.feat-cell        { padding: 44px 32px; border-right: 1px solid var(--line); }
.feat-cell:last-child { border-right: none; }
.feat-icon        { font-size: 20px; margin-bottom: 4px; }
.feat-cell h3     { font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; letter-spacing: -0.01em;
                    line-height: 1.2; margin: 18px 0 12px; }
.feat-cell p      { font-size: clamp(14px, 1vw, 15.5px); line-height: 1.65; color: var(--mute); }

/* Curriculum index */
.curriculum           { padding: 80px var(--pad); border-bottom: 1px solid var(--line); }
.curriculum-header    { max-width: 72ch; margin-bottom: 36px; }
.curriculum-header h2 { font-size: clamp(26px, 2.4vw, 38px); font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; margin: 16px 0 14px; }
.curriculum-header p  { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; color: var(--mute); }
.curriculum-bar       { display: flex; border: 1px solid var(--line); margin-bottom: 36px; }
.curriculum-bar-item  { flex: 1; padding: 18px 20px; border-right: 1px solid var(--line); text-align: center; }
.curriculum-bar-item:last-child { border-right: none; }
.curriculum-bar-n     { font-weight: 700; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.02em; color: var(--blue); line-height: 1; }
.curriculum-bar-l     { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin-top: 5px; }
.curriculum-grid      { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 32px; }
.curriculum-cat       { background: var(--bg); padding: 26px 26px 22px; transition: background 0.15s; }
.curriculum-cat:hover { background: var(--panel); }
.curriculum-cat-head  { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.curriculum-cat-name  { font-weight: 600; font-size: clamp(14px, 1.05vw, 16px); letter-spacing: -0.01em; }
.curriculum-cat-link  { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); transition: opacity 0.15s; }
.curriculum-cat-link:hover { opacity: 0.75; }
.curriculum-cat-count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }
.curriculum-lesson    { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in oklch, var(--line) 55%, transparent); }
.curriculum-lesson:last-of-type { border-bottom: none; }
.curriculum-lock      { font-size: 11px; flex-shrink: 0; opacity: 0.45; }
.curriculum-title     { font-size: clamp(12.5px, 0.9vw, 14px); color: var(--mute); line-height: 1.35; }
.curriculum-more      { margin-top: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklch, var(--blue) 55%, var(--mute)); }
.curriculum-footer    { text-align: center; }

/* Instructor */
.instructor         { padding: 80px var(--pad); border-bottom: 1px solid var(--line);
                      display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: start; }
.instructor-photo   { aspect-ratio: 2/3; overflow: hidden; border: 1px solid var(--line); }
.instructor-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(15%); }
.instructor-bio     { display: flex; flex-direction: column; gap: 20px; }
.instructor-bio h2  { font-size: clamp(34px, 3vw, 48px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.instructor-bio p   { font-size: clamp(15px, 1.1vw, 17.5px); line-height: 1.68; color: oklch(0.80 0.01 250); text-wrap: pretty; }
.badge-row          { display: flex; gap: 10px; flex-wrap: wrap; }
.badge              { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
                      border: 1px solid var(--blue); color: var(--blue); padding: 6px 12px; display: inline-block; white-space: nowrap; }

/* Transcript excerpt */
.excerpt            { padding: 64px var(--pad); background: var(--panel); border-bottom: 1px solid var(--line); }
.excerpt-inner      { max-width: 900px; }
.excerpt blockquote { font-family: var(--mono); font-size: clamp(13px, 1vw, 15px); line-height: 1.78;
                      color: oklch(0.78 0.012 250); border-left: 2px solid var(--blue); padding-left: 24px; margin: 20px 0 16px; }
.excerpt cite       { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); font-style: normal; }

/* Testimonials */
.testimonials       { padding: 80px var(--pad); border-bottom: 1px solid var(--line); }
.testimonials-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.testimonial        { background: var(--panel); border: 1px solid var(--line); padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.testimonial blockquote { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; color: var(--text); font-style: normal; text-wrap: pretty; }
.testimonial blockquote::before { content: '\201C'; font-size: 48px; color: var(--blue); line-height: 0.7; display: block; margin-bottom: 10px; font-family: serif; }
.testimonial-attr   { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin-top: auto; }
.testimonial-attr strong { display: block; color: var(--text); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; margin-bottom: 4px; }

/* Final CTA */
.cta-final      { padding: 96px var(--pad); text-align: center; border-top: 2px solid var(--blue); }
.cta-final h2   { font-size: clamp(42px, 5.5vw, 78px); font-weight: 700; letter-spacing: -0.033em;
                  line-height: 0.97; margin: 0 auto 26px; max-width: 18ch; }
.cta-final p    { font-size: clamp(15px, 1.2vw, 19px); color: var(--mute); max-width: 52ch;
                  margin: 0 auto 44px; line-height: 1.55; text-wrap: pretty; }
.cta-actions    { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* =============================================================
   POST / LESSON PAGE — post.hbs
   ============================================================= */

/* Dark header */
.lesson-header  { background: var(--bg); color: var(--text); padding: 44px var(--pad) 0; }
.breadcrumb     { display: flex; align-items: center; gap: 8px; font-family: var(--mono);
                  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
                  color: var(--mute); margin-bottom: 28px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--blue); transition: color 0.15s; }
.breadcrumb .sep    { opacity: 0.4; }
.breadcrumb .current { color: var(--blue); }
.lesson-kicker  { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.series-pill    { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
                  color: var(--bg); background: var(--blue); padding: 4px 10px; }
.lesson-num     { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.lesson-title   { font-size: clamp(30px, 3.5vw, 54px); font-weight: 700; line-height: 1.06;
                  letter-spacing: -0.028em; margin-bottom: 22px; max-width: 22ch; }
.lesson-dek     { font-size: clamp(16px, 1.3vw, 19px); color: var(--mute); line-height: 1.5;
                  max-width: 58ch; margin-bottom: 26px; text-wrap: pretty; }
.lesson-meta    { display: flex; gap: 28px; flex-wrap: wrap; padding: 18px 0 32px; border-top: 1px solid var(--line); }
.meta-item      { display: flex; flex-direction: column; gap: 4px; }
.meta-label     { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.meta-value     { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; }

/* Video section */
.video-section      { background: var(--panel-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.video-container    { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); }
.video-player       { position: relative; width: 100%; padding-bottom: 56.25%; background: var(--panel); overflow: hidden; }
.video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; }
.video-player .vfallback { position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in oklch, var(--blue) 8%, transparent) 11px 12px) var(--panel);
  pointer-events: none; }
.video-play-btn     { width: 80px; height: 80px; border-radius: 50%; background: var(--blue);
                      display: grid; place-items: center; box-shadow: 0 8px 40px color-mix(in oklch, var(--blue) 42%, transparent);
                      cursor: pointer; transition: transform 0.2s; }
.video-play-btn:hover { transform: scale(1.06); }
.video-play-btn::after { content: ''; width: 0; height: 0; margin-left: 6px;
                          border-left: 24px solid var(--bg); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.video-controls     { display: flex; align-items: center; gap: 16px; padding: 14px 0; flex-wrap: wrap; }
.video-controls .dur { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.video-controls .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-left: auto; }

/* Ghost kg-embed-card (Vimeo inserted from editor) */
.video-section .kg-embed-card { margin: 0; padding: 0; }
.video-section .kg-embed-card iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: none; display: block; }

/* Light body */
.lesson-body    { background: var(--lt-bg); color: var(--lt-ink); padding: 60px var(--pad) 80px; }
.body-inner     { max-width: 900px; margin: 0 auto; }
.body-section   { display: grid; grid-template-columns: 52px 1fr; gap: 0 32px; margin-bottom: 56px; }
.body-section:last-of-type { margin-bottom: 0; }
.section-marker { padding-top: 5px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
                  color: var(--lt-blue); border-top: 2px solid var(--lt-blue); height: fit-content; }
.section-content h2 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -0.015em;
                      line-height: 1.2; margin-bottom: 18px; color: var(--lt-ink); }
.section-content p  { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.68; color: oklch(0.34 0.022 258);
                      margin-bottom: 18px; text-wrap: pretty; }
.section-content p:last-child { margin-bottom: 0; }
.pull-quote     { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.36; font-weight: 500;
                  letter-spacing: -0.012em; color: var(--lt-blue); border-left: 2px solid var(--lt-blue);
                  padding: 8px 0 8px 24px; margin: 30px 0; max-width: 46ch; }

/* Ghost content styles within lesson body */
.lesson-body .gh-content { max-width: 72ch; }
.lesson-body .gh-content h2 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin: 44px 0 16px; color: var(--lt-ink); }
.lesson-body .gh-content h3 { font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 32px 0 12px; color: var(--lt-ink); }
.lesson-body .gh-content p  { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: oklch(0.34 0.022 258); margin-bottom: 20px; text-wrap: pretty; }
.lesson-body .gh-content ul, .lesson-body .gh-content ol { padding-left: 24px; margin-bottom: 20px; }
.lesson-body .gh-content li { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; color: oklch(0.38 0.022 258); margin-bottom: 8px; }
.lesson-body .gh-content blockquote { border-left: 2px solid var(--lt-blue); padding: 8px 0 8px 24px; margin: 28px 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; color: var(--lt-blue); }
.lesson-body .gh-content strong { font-weight: 600; }
.lesson-body .gh-content a  { color: var(--lt-blue); text-decoration: underline; }
.lesson-body .kg-embed-card { margin: 36px 0; }
.lesson-body .kg-embed-card iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: none; }
.lesson-body .kg-image-card { margin: 36px 0; }
.lesson-body .kg-image-card img { width: 100%; border: 1px solid var(--lt-line); }
.lesson-body .kg-image-card figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lt-mute); margin-top: 10px; }

/* Ghost card widths — required by GScan */
.kg-width-wide { position: relative; margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); }
.kg-width-full { position: relative; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Tags */
.lesson-tags  { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--lt-line);
                display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tag-label    { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lt-mute); }
.tag-item     { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
                color: var(--lt-blue); border: 1px solid color-mix(in oklch, var(--lt-blue) 50%, var(--lt-line));
                padding: 5px 11px; transition: border-color 0.15s; }
.tag-item:hover { border-color: var(--lt-blue); }

/* Lesson prev/next nav */
.lesson-nav       { background: var(--bg); color: var(--text); border-top: 1px solid var(--line); }
.lesson-nav-inner { display: grid; grid-template-columns: 1fr 1fr; max-width: 1200px; margin: 0 auto; }
.nav-lesson       { padding: 36px var(--pad); display: flex; flex-direction: column; gap: 10px; cursor: pointer;
                    border-right: 1px solid var(--line); transition: background 0.18s; }
.nav-lesson:last-child  { border-right: none; text-align: right; align-items: flex-end; }
.nav-lesson:hover       { background: var(--panel); }
.nav-dir        { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 8px; }
.nav-lesson-series { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.nav-lesson-title  { font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--text); max-width: 34ch; }

/* Related */
.related        { background: var(--panel); padding: 60px var(--pad); border-top: 1px solid var(--line); }
.related-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
.related-header h2 { font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.related-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-card   { background: var(--bg); border: 1px solid var(--line); transition: border-color 0.18s; cursor: pointer; }
.related-card:hover { border-color: var(--blue); }
.related-card .rc-body  { padding: 18px 18px 20px; }
.related-card .rc-series { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.related-card h3        { font-size: clamp(14px, 1.1vw, 16px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--text); margin-bottom: 6px; }
.related-card .rc-dur   { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.related-thumb  { position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in oklch, var(--blue) 7%, transparent) 11px 12px) var(--panel);
  display: grid; place-items: center; }
.related-thumb .rplay { width: 36px; height: 36px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; }
.related-thumb .rplay::after { content: ''; width: 0; height: 0; margin-left: 3px;
  border-left: 12px solid var(--bg); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }

/* Ghost membership upgrade CTA */
.gh-post-upgrade-cta {
  background: var(--panel); border: 1px solid var(--line);
  padding: 56px; text-align: center; margin: 48px 0;
}
.gh-post-upgrade-cta h2 { font-size: clamp(24px, 2.2vw, 34px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; color: var(--lt-ink); }
.gh-post-upgrade-cta p  { font-size: 17px; color: var(--lt-mute); max-width: 48ch; margin: 0 auto 32px; line-height: 1.55; }
.gh-post-upgrade-cta a  { display: inline-block; background: var(--lt-blue); color: white; font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 14px 32px; }

/* =============================================================
   TAG / CATEGORY ARCHIVE — tag.hbs
   ============================================================= */
.cat-header    { padding: 52px var(--pad) 44px; border-bottom: 1px solid var(--line); }
.cat-kicker    { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; }
.cat-title     { font-size: clamp(36px, 4vw, 64px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 18px; }
.cat-desc      { font-size: clamp(15px, 1.2vw, 18px); color: var(--mute); max-width: 62ch; line-height: 1.58; margin-bottom: 28px; text-wrap: pretty; }
.cat-stats     { display: flex; gap: 28px; flex-wrap: wrap; }
.cat-stat      { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--mute); }
.cat-stat b    { color: var(--text); font-weight: 500; }

.filter-bar    { padding: 0 var(--pad); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 0; overflow-x: auto; }
.filter-item   { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
                  color: var(--mute); padding: 14px 20px; border-bottom: 2px solid transparent;
                  cursor: pointer; white-space: nowrap; transition: color 0.15s; }
.filter-item.active { color: var(--blue); border-bottom-color: var(--blue); }
.filter-item:hover  { color: var(--text); }

.lesson-grid-wrap { padding: 48px var(--pad) 72px; }
.lesson-grid      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lcard            { background: var(--panel); border: 1px solid var(--line); cursor: pointer;
                    transition: border-color 0.18s, background 0.18s; }
.lcard:hover      { border-color: var(--blue); background: var(--panel-2); }
.lthumb           { position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in oklch, var(--blue) 7%, transparent) 11px 12px) var(--panel);
  display: grid; place-items: center; }
.lthumb .play     { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; }
.lthumb .play::after { content: ''; width: 0; height: 0; margin-left: 3px;
  border-left: 13px solid var(--bg); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.lthumb .ldur     { position: absolute; bottom: 9px; right: 9px; font-family: var(--mono); font-size: 12px; color: white; background: rgba(0,0,0,0.7); padding: 2px 7px; }
.lcontent         { padding: 18px 18px 20px; }
.lrow             { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.lseries          { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.llock            { font-size: 11px; opacity: 0.45; }
.ltitle           { font-size: clamp(14px, 1.05vw, 16px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--text); }

.all-cats         { padding: 48px var(--pad); border-top: 1px solid var(--line); }
.all-cats h2      { font-size: clamp(18px, 1.6vw, 24px); font-weight: 700; letter-spacing: -0.018em; margin-bottom: 24px; }
.cats-grid        { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cat-chip         { padding: 18px 20px; border: 1px solid var(--line); background: var(--panel); transition: border-color 0.15s; cursor: pointer; }
.cat-chip:hover   { border-color: var(--blue); }
.cat-chip.active  { border-color: var(--blue); background: var(--panel-2); }
.cat-chip-name    { font-size: clamp(13px, 1vw, 15px); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.cat-chip-count   { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }

/* Pagination */
.pagination       { padding: 32px var(--pad); text-align: center; }
.pagination-inner { display: inline-flex; gap: 8px; align-items: center; }
.page-number      { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--mute); padding: 8px 14px; border: 1px solid var(--line); transition: border-color 0.15s; }
.page-number:hover, .page-number.active { border-color: var(--blue); color: var(--text); }

/* =============================================================
   PRICING PAGE — page-pricing.hbs
   ============================================================= */
.page-header      { padding: 64px var(--pad) 56px; border-bottom: 1px solid var(--line); background: var(--bg); }
.page-header .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; }
.page-header h1   { font-size: clamp(38px, 4.5vw, 66px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 20px; }
.page-header p    { font-size: clamp(16px, 1.3vw, 19px); color: var(--mute); max-width: 54ch; line-height: 1.55; }

.pricing-section  { padding: 72px var(--pad); border-bottom: 1px solid var(--line); }
.pricing-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 40px auto 0; }
.price-card       { border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--blue); }
.price-card-top   { padding: 36px 36px 28px; border-bottom: 1px solid var(--line); }
.price-card-badge { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bg); background: var(--blue); padding: 4px 10px; display: inline-block; margin-bottom: 20px; }
.price-card-name  { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 16px; }
.price-amount     { display: flex; align-items: baseline; gap: 4px; margin-bottom: 8px; }
.price-currency   { font-family: var(--mono); font-size: 18px; color: var(--mute); }
.price-num        { font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--text); }
.price-per        { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.price-note       { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--mute); }
.price-card-features { padding: 28px 36px 32px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.price-feature    { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--text); }
.price-feature::before { content: '✓'; font-family: var(--mono); font-size: 12px; color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.price-card-cta   { padding: 0 36px 36px; }
.price-card-cta a { display: block; text-align: center; padding: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.price-card-cta a.primary { background: var(--blue); color: var(--bg); }
.price-card-cta a.secondary { border: 1px solid var(--line); color: var(--text); transition: border-color 0.15s; }
.price-card-cta a.secondary:hover { border-color: var(--mute); }

.faq-section      { padding: 64px var(--pad); }
.faq-section h2   { font-size: clamp(24px, 2.2vw, 34px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 32px; }
.faq-item         { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q            { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; cursor: pointer; gap: 24px; }
.faq-q span       { font-size: clamp(16px, 1.2vw, 18px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.faq-toggle       { font-family: var(--mono); font-size: 20px; color: var(--blue); flex-shrink: 0; line-height: 1; transition: transform 0.2s; }
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-a            { display: none; padding: 0 0 24px; font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.68; color: var(--mute); max-width: 70ch; }
.faq-item.open .faq-a { display: block; }

/* =============================================================
   HELP / FAQs PAGE — page-help.hbs
   ============================================================= */
.help-cats        { padding: 48px var(--pad) 32px; display: flex; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.help-cat-btn     { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
                    padding: 10px 18px; border: 1px solid var(--line); color: var(--mute); cursor: pointer;
                    background: transparent; transition: border-color 0.15s, color 0.15s; }
.help-cat-btn:hover { border-color: var(--mute); color: var(--text); }
.help-cat-btn.active { border-color: var(--blue); color: var(--blue); }
.help-section-group { padding: 48px var(--pad); border-bottom: 1px solid var(--line); }
.help-section-group h2 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -0.018em; margin-bottom: 24px; }

/* =============================================================
   CONTACT PAGE — page-contact.hbs
   ============================================================= */
.contact-section  { padding: 64px var(--pad) 80px; display: grid; grid-template-columns: 1fr 420px; gap: 80px; }
.contact-info     { display: flex; flex-direction: column; gap: 36px; }
.contact-info h2  { font-size: clamp(24px, 2.2vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.contact-info p   { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.68; color: var(--mute); max-width: 48ch; }
.contact-detail   { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--line); background: var(--panel); }
.contact-detail-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.contact-detail-value { font-size: 16px; font-weight: 500; }
.contact-form     { background: var(--panel); border: 1px solid var(--line); padding: 40px; }
.form-group       { margin-bottom: 22px; }
.form-label       { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; }
.form-input, .form-textarea, .form-select {
  width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  font-family: var(--sans); font-size: 15px; padding: 12px 14px;
  transition: border-color 0.15s; outline: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--blue); }
.form-textarea    { resize: vertical; min-height: 140px; }
.form-row         { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-submit      { width: 100%; background: var(--blue); color: var(--bg); font-family: var(--mono);
                    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
                    padding: 15px; border: none; cursor: pointer; transition: opacity 0.15s; }
.form-submit:hover { opacity: 0.88; }
.form-note        { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); margin-top: 14px; text-align: center; }
.form-success     { display: none; background: oklch(0.965 0.007 250); border: 1px solid color-mix(in oklch, var(--lt-blue) 40%, var(--lt-line)); padding: 24px; text-align: center; }
.form-success.visible { display: block; }
.form-success h3  { font-size: 20px; font-weight: 600; color: var(--lt-blue); margin-bottom: 10px; }
.form-success p   { font-size: 15px; color: var(--lt-slate); }

/* =============================================================
   ERROR PAGE — error.hbs
   ============================================================= */
.error-page       { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: var(--pad); }
.error-num        { font-size: clamp(80px, 12vw, 160px); font-weight: 700; letter-spacing: -0.04em; color: var(--line); line-height: 1; margin-bottom: 24px; }
.error-page h1    { font-size: clamp(26px, 2.5vw, 38px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 18px; }
.error-page p     { font-size: 18px; color: var(--mute); max-width: 44ch; margin: 0 auto 36px; line-height: 1.55; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1100px) {
  .instructor { grid-template-columns: 240px 1fr; gap: 48px; }
}
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-cell:nth-child(2) { border-right: none; }
  .feat-cell:nth-child(3), .feat-cell:nth-child(4) { border-top: 1px solid var(--line); }
  .feat-cell:nth-child(4) { border-right: none; }
  .lesson-grid { grid-template-columns: repeat(2, 1fr); }
  .cats-grid   { grid-template-columns: repeat(3, 1fr); }
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero-inner       { grid-template-columns: 1fr; gap: 48px; }
  .stat-stack       { flex-direction: row; flex-wrap: wrap; }
  .stat-card        { flex: 1 1 160px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .instructor       { grid-template-columns: 1fr; }
  .instructor-photo { max-width: 260px; }
  .contact-section  { grid-template-columns: 1fr; }
  .body-section     { grid-template-columns: 36px 1fr; gap: 0 20px; }
  .pricing-grid     { grid-template-columns: 1fr; max-width: 460px; }
  .lesson-nav-inner { grid-template-columns: 1fr; }
  .nav-lesson       { border-right: none !important; border-top: 1px solid var(--line); text-align: left; align-items: flex-start; }
}
@media (max-width: 700px) {
  .nav-links          { display: none; }
  .hamburger          { display: flex; }
  .nav-mobile.open    { display: flex; flex-direction: column; }
  .curriculum-grid    { grid-template-columns: 1fr; }
  .curriculum-bar     { flex-wrap: wrap; }
  .curriculum-bar-item { flex: 1 1 50%; border-bottom: 1px solid var(--line); }
  .curriculum-bar-item:nth-child(even) { border-right: none; }
  .curriculum-bar-item:nth-last-child(-n+2) { border-bottom: none; }
  .lesson-grid        { grid-template-columns: 1fr; }
  .cats-grid          { grid-template-columns: repeat(2, 1fr); }
  .related-grid       { grid-template-columns: 1fr; }
  .help-section-group  { padding: 32px var(--pad); }
  .form-row           { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .features-grid      { grid-template-columns: 1fr; }
  .feat-cell          { border-right: none !important; border-top: 1px solid var(--line); }
  .feat-cell:first-child { border-top: none; }
  .footer             { flex-direction: column; align-items: flex-start; }
  .cta-final h2       { font-size: clamp(36px, 10vw, 60px); }
}