/* ============================================================
   CourseFM — shared cinematic scene styling
   Used by the homepage and course pages (data-story-scenes).
   Matches the approved episode-story design language:
   painted canvas behind, chapter tags, Playfair headings,
   glass panels, translucent sections.
   ============================================================ */

.site-story-canvas-wrap {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, #eef1f7 0%, #e7ecf5 55%, #eef0f6 100%);
}

[data-theme="dark"] .site-story-canvas-wrap {
  background: linear-gradient(160deg, #0d1b3d 0%, #101a33 55%, #0a0f1e 100%);
}

#site-story-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Let the paint show through page chrome */
[data-story-scenes] {
  position: relative;
  background: transparent;
}

/* ---------- chapter tags (01 / 02 / …) ---------- */

.story-chapter-tag {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--corp-text-subdued);
  margin: 0 0 0.85rem;
}

.story-chapter-num {
  font-family: "Playfair Display", serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--corp-text);
  opacity: 0.55;
}

.story-chapter-tag::after {
  content: "";
  flex: 0 0 64px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

/* ---------- serif section titles ---------- */

[data-story-scenes] .prime-catalog-title,
[data-story-scenes] .section-title,
.story-serif-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---------- translucent sections so the paint breathes ---------- */

[data-story-scenes] .prime-catalog,
[data-story-scenes] .prime-catalog-row,
[data-story-scenes] .section {
  background: transparent;
}

[data-story-scenes] .cta-strip {
  position: relative;
  z-index: 1;
}

/* ---------- glass CTA panel (finale) ---------- */

.story-glass {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(20, 26, 38, 0.1);
  border-radius: 24px;
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 24px 80px rgba(20, 26, 38, 0.12);
}

[data-theme="dark"] .story-glass {
  background: rgba(12, 18, 36, 0.5);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

/* ---------- course page hero ---------- */

.course-story-hero {
  padding: clamp(3.5rem, 9vh, 6rem) 0 2.5rem;
}

.course-story-hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0.5rem 0 1rem;
  max-width: 22ch;
  color: var(--corp-text);
}

.course-story-hero .course-desc {
  max-width: 60ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--corp-text-subdued);
}

.course-story-hero .preview-note {
  margin-top: 1.25rem;
  color: var(--corp-text-subdued);
}

/* stack the chapter tag above the row title */
[data-story-scenes] .prime-catalog-row-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

[data-story-scenes] .prime-catalog-row-header .story-chapter-tag {
  margin-bottom: 0.35rem;
}

/* ---------- homepage row spacing under scenes ---------- */

[data-story-scenes] .prime-catalog {
  padding-top: 2.5rem;
}

[data-story-scenes] .prime-catalog-row {
  margin-bottom: 2.5rem;
}

/* keep episode cards readable over paint (course page grid) */
[data-story-scenes] .episode-card {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}