/*
  Shared StoryCam lecture chapter theme.
  Individual chapters keep their own body layout; this normalizes the opening
  visual so the sequence feels like one course instead of separate exports.
*/

:root {
  --lecture-hero-ink: #fff5e8;
  --lecture-hero-muted: #d5c5ad;
  --lecture-hero-cyan: #52d7df;
  --lecture-hero-pink: #ff6d91;
  --lecture-hero-gold: #e4b868;
  --lecture-hero-line: rgba(255, 245, 232, 0.18);
}

.session-chapter > .hero,
.session-chapter > .chapter-hero,
.session-chapter > header:first-child,
.session-chapter > section.hero {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(82, 215, 223, 0.24) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(90deg, rgba(255, 245, 232, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 245, 232, 0.05) 1px, transparent 1px),
    linear-gradient(135deg, rgba(13, 16, 20, 0.98) 0%, rgba(38, 19, 28, 0.96) 52%, rgba(12, 36, 42, 0.98) 100%) !important;
  background-size: 44px 44px, 44px 44px, auto !important;
  box-shadow: 0 30px 88px rgba(0, 0, 0, 0.28) !important;
  color: var(--lecture-hero-ink) !important;
}

.session-chapter > .hero *,
.session-chapter > .chapter-hero *,
.session-chapter > header:first-child *,
.session-chapter > section.hero * {
  border-color: var(--lecture-hero-line);
}

.session-chapter > .hero h1,
.session-chapter > .chapter-hero h1,
.session-chapter > header:first-child h1,
.session-chapter > section.hero h1 {
  color: var(--lecture-hero-ink) !important;
  letter-spacing: 0 !important;
  text-shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
}

.session-chapter > .hero p,
.session-chapter > .chapter-hero p,
.session-chapter > header:first-child p,
.session-chapter > section.hero p,
.session-chapter > .hero li,
.session-chapter > .chapter-hero li,
.session-chapter > header:first-child li,
.session-chapter > section.hero li {
  color: var(--lecture-hero-muted);
}

.session-chapter > .hero .eyebrow,
.session-chapter > .chapter-hero .eyebrow,
.session-chapter > header:first-child .eyebrow,
.session-chapter > section.hero .eyebrow,
.session-chapter > .hero .chapter-kicker,
.session-chapter > .chapter-hero .chapter-kicker,
.session-chapter > header:first-child .chapter-kicker,
.session-chapter > section.hero .chapter-kicker,
.session-chapter > .hero .chapter-mark,
.session-chapter > .chapter-hero .chapter-mark,
.session-chapter > header:first-child .chapter-mark,
.session-chapter > section.hero .chapter-mark {
  color: var(--lecture-hero-cyan) !important;
}

.session-chapter > .hero .pill,
.session-chapter > .chapter-hero .pill,
.session-chapter > header:first-child .pill,
.session-chapter > section.hero .pill,
.session-chapter > .hero code,
.session-chapter > .chapter-hero code,
.session-chapter > header:first-child code,
.session-chapter > section.hero code {
  border-color: rgba(82, 215, 223, 0.28) !important;
  background: rgba(255, 245, 232, 0.08) !important;
  color: var(--lecture-hero-ink) !important;
}

.session-chapter > .hero aside,
.session-chapter > .chapter-hero aside,
.session-chapter > header:first-child aside,
.session-chapter > section.hero aside,
.session-chapter > .hero .roadmap,
.session-chapter > .chapter-hero .roadmap,
.session-chapter > header:first-child .roadmap,
.session-chapter > section.hero .roadmap,
.session-chapter > .hero .route-map,
.session-chapter > .chapter-hero .route-map,
.session-chapter > header:first-child .route-map,
.session-chapter > section.hero .route-map,
.session-chapter > .hero .route-card,
.session-chapter > .chapter-hero .route-card,
.session-chapter > header:first-child .route-card,
.session-chapter > section.hero .route-card,
.session-chapter > .hero .hero-note,
.session-chapter > .chapter-hero .hero-note,
.session-chapter > header:first-child .hero-note,
.session-chapter > section.hero .hero-note {
  border-color: rgba(255, 245, 232, 0.16) !important;
  background:
    linear-gradient(135deg, rgba(255, 245, 232, 0.11), rgba(82, 215, 223, 0.07)),
    rgba(10, 12, 15, 0.46) !important;
  box-shadow: none !important;
  color: var(--lecture-hero-muted) !important;
}

.session-chapter > .hero img,
.session-chapter > .chapter-hero img,
.session-chapter > header:first-child img,
.session-chapter > section.hero img {
  border-color: rgba(82, 215, 223, 0.28) !important;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.34) !important;
}

@media (max-width: 760px) {
  .session-chapter > .hero,
  .session-chapter > .chapter-hero,
  .session-chapter > header:first-child,
  .session-chapter > section.hero {
    border-radius: 16px !important;
  }
}