/* ==========================================================================
   NAXOS.ONE PRODUCTION GHOST 6 THEME STYLESHEET (assets/css/screen.css)
   Design Tokens (Spec_HE.md Section 4.1):
   - Ink: #0A0A0A (Primary text, icons, strong borders)
   - Naxos Pink: #FA0063 (Single primary action, selected state, brand dot)
   - Paper: #F6F6F6 (Primary canvas, card surface)
   - Charcoal: #15171A (Dark panels, image scrim, footer)
   - Deep Violet: #4C35C7 (Progress fill, restrained gradient behind hero)
   - Blue-Violet: #5E6AD2 (Focus ring, secondary accent, active tab)
   - Sky: #A8D8FF (Quiet glow, progress end, small highlights)
   - White: #FFFFFF (Text on dark surfaces & buttons)
   - Muted: #626773 (Supporting text, legal lines, captions)
   - Lavender: #F0EEFF (Selected answer card fill)
   ========================================================================== */

:root {
  --ink: #0A0A0A;
  --pink: #FA0063;
  --paper: #F6F6F6;
  --charcoal: #15171A;
  --deep-violet: #4C35C7;
  --blue-violet: #5E6AD2;
  --sky: #A8D8FF;
  --white: #FFFFFF;
  --muted: #626773;
  --lavender: #F0EEFF;

  /* Semantic aliases */
  --color-ink: var(--ink);
  --color-pink: var(--pink);
  --color-paper: var(--paper);
  --color-charcoal: var(--charcoal);
  --color-deep-violet: var(--deep-violet);
  --color-blue-violet: var(--blue-violet);
  --color-sky: var(--sky);
  --color-white: var(--white);
  --color-muted: var(--muted);
  --color-selected-lavender: var(--lavender);

  /* Typography scale: 12, 14, 16, 18, 20, 24, 32, 44, 60 px */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Arial Hebrew", "Noto Sans Hebrew", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --size-12: 0.75rem;
  --size-14: 0.875rem;
  --size-16: 1rem;
  --size-18: 1.125rem;
  --size-20: 1.25rem;
  --size-24: 1.5rem;
  --size-32: 2rem;
  --size-44: 2.75rem;
  --size-60: 3.75rem;

  /* Layout & Geometry */
  --max-width: 1260px;
  --content-width: 68ch;
  --radius-sm: 6px;
  --radius-btn: 9px;
  --radius-card: 12px;
  --radius-pill: 9999px;

  --transition-fast: 150ms ease;
  --transition-normal: 220ms ease;
}

/* Base Reset & Overflow Prevention (320px+) */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

img, video, audio, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Screen Reader Utility */
.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;
}

/* Skip Link & Keyboard Focus */
.skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: 1rem;
  background: var(--ink);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-btn);
  z-index: 9999;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--blue-violet);
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--blue-violet);
  outline-offset: 2px;
}

/* Layout Containers */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1 0 auto;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding-inline: 1.75rem;
  }
}

@media (min-width: 1440px) {
  .container {
    padding-inline: 2.5rem;
  }
}

/* Typography (Weights limited to 400, 600, 700) */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.22;
  color: var(--ink);
  letter-spacing: -0.02em;
}

h2, h3 {
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--pink);
}

code {
  font-family: var(--font-mono);
  font-size: var(--size-14);
  background: var(--paper);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
}

kbd {
  font-family: var(--font-mono);
  font-size: var(--size-12);
  border: 1px solid var(--muted);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  background: var(--white);
}

/* Buttons (Spec 4.3: Primary = Pink + White Bold, Secondary = Ink Border + Transparent, min-height 44px) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: var(--size-16);
  line-height: 1.1;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-btn);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  min-height: 44px;
  min-width: 44px;
  text-align: center;
}

.btn-primary {
  background-color: var(--pink);
  color: var(--white);
  border-color: var(--pink);
}

.btn-primary:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.btn-secondary {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 600;
}

.btn-secondary:hover {
  background-color: var(--lavender);
  border-color: var(--blue-violet);
  color: var(--deep-violet);
}

.btn-sm {
  padding: 0.5rem 0.875rem;
  font-size: var(--size-14);
  min-height: 44px;
}

.btn-lg {
  padding: 0.875rem 1.625rem;
  font-size: var(--size-18);
  min-height: 48px;
}

.btn-block {
  width: 100%;
}

/* Tag Pills & Meta Row (Spec 4.3: Tag pill small/muted/plain; Meta row 14px Muted) */
.meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--size-14);
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--size-12);
  font-weight: 600;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--muted);
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-pill);
  line-height: 1.3;
}

a.tag-pill:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.tag-pill-dark {
  background: var(--charcoal);
  color: var(--white);
  border-color: var(--muted);
}

.hub-tab-active {
  background: var(--lavender);
  color: var(--deep-violet);
  border-color: var(--blue-violet);
}

/* System Messages (Spec 4.3: Success, Error, Empty, Loading, Info — Icon + Text, never color alone) */
.system-message {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-card);
  background: var(--paper);
  border: 1px solid var(--muted);
  border-inline-start: 4px solid var(--blue-violet);
  color: var(--ink);
  margin: 1.5rem 0;
}

.system-message-success {
  background: var(--lavender);
  border-color: var(--blue-violet);
  border-inline-start-color: var(--deep-violet);
}

.system-message-error,
.system-message-locked {
  background: var(--paper);
  border-color: var(--ink);
  border-inline-start-color: var(--pink);
}

.system-message-icon {
  color: var(--deep-violet);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.system-message-error .system-message-icon,
.system-message-locked .system-message-icon {
  color: var(--pink);
}

.system-message-title {
  font-size: var(--size-18);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.system-message-text {
  font-size: var(--size-16);
  color: var(--muted);
}

.system-message-text a {
  color: var(--deep-violet);
  font-weight: 600;
  text-decoration: underline;
}

/* Selected Answer Card (Spec 4.3: Lavender fill, Blue-Violet border + non-color marker) */
.selected-answer-card {
  background: var(--lavender);
  border: 2px solid var(--blue-violet);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
  color: var(--ink);
}

/* Header & Navigation (Spec 5 & 6: stable, active item marked with color + weight/underline, submenus) */
.site-header {
  border-bottom: 1px solid var(--paper);
  background-color: var(--white);
}

@media (min-width: 768px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
  }
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 1rem;
}

.site-logo-link {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: var(--size-20);
  letter-spacing: -0.03em;
  color: var(--ink);
  min-height: 44px;
}

.brand-dot {
  color: var(--pink);
}

.header-nav {
  display: none;
}

@media (min-width: 768px) {
  .header-nav {
    display: block;
  }
}

.nav-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
}

.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-link {
  font-size: var(--size-14);
  font-weight: 400;
  color: var(--muted);
  padding: 0.5rem 0.25rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}

.nav-link:hover,
.nav-current > .nav-link,
.nav-link[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--pink);
}

.nav-submenu-toggle {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  min-width: 32px;
  min-height: 44px;
  padding: 0 0.25rem;
  font-size: var(--size-14);
  border-radius: var(--radius-sm);
}

.nav-submenu-toggle:hover,
.nav-submenu-toggle[aria-expanded="true"] {
  color: var(--ink);
  background: var(--paper);
}

.nav-submenu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: var(--radius-card);
  padding: 0.5rem;
  list-style: none;
  z-index: 200;
}

.nav-submenu-item .nav-link {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-bottom: none;
  border-radius: var(--radius-sm);
}

.nav-submenu-item .nav-link:hover {
  background: var(--lavender);
  color: var(--deep-violet);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.search-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--paper);
  border: 1px solid var(--muted);
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-btn);
  font-size: var(--size-14);
  font-weight: 600;
  color: var(--ink);
  min-height: 44px;
}

.search-trigger-btn:hover {
  background: var(--lavender);
  border-color: var(--blue-violet);
  color: var(--deep-violet);
}

.search-label {
  display: none;
}

@media (min-width: 640px) {
  .search-label {
    display: inline;
  }
}

.member-nav-actions {
  display: none;
}

@media (min-width: 768px) {
  .member-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
}

.btn-text-nav {
  font-size: var(--size-14);
  font-weight: 600;
  color: var(--ink);
  padding: 0.5rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius-btn);
  cursor: pointer;
  color: var(--ink);
  width: 44px;
  height: 44px;
}

@media (min-width: 768px) {
  .mobile-nav-toggle {
    display: none;
  }
}

.mobile-nav-drawer {
  border-top: 1px solid var(--muted);
  background: var(--white);
  padding: 1.25rem 0;
}

.mobile-nav-drawer .nav-list {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
}

.mobile-nav-drawer .nav-submenu {
  position: static;
  border: none;
  background: var(--paper);
  margin-top: 0.25rem;
}

.mobile-nav-auth {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Hero Section (Spec 4.2 & 5: clamp() on hero headline only, restrained violet gradient) */
.hero-section {
  padding: 3.5rem 0 3rem;
  background: linear-gradient(180deg, var(--lavender) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--paper);
}

.hero-container {
  max-width: 820px;
  text-align: center;
  margin-inline: auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.875rem;
  background: var(--white);
  color: var(--deep-violet);
  border: 1px solid var(--blue-violet);
  border-radius: var(--radius-pill);
  font-size: var(--size-12);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.badge-dot,
.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}

.hero-title {
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.hero-description {
  font-size: var(--size-18);
  color: var(--muted);
  max-width: 64ch;
  margin: 0 auto 2rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Section Headers & Responsive Grids (Spec 5: 1 col mobile, 2 col 768px+, 3 col 1024px+) */
.featured-section,
.courses-spotlight-section,
.articles-section,
.courses-directory-section,
.learning-paths-section,
.lessons-by-course-section,
.all-lessons-section,
.related-articles-section {
  padding: 3rem 1rem;
}

@media (min-width: 768px) {
  .featured-section,
  .courses-spotlight-section,
  .articles-section,
  .courses-directory-section,
  .learning-paths-section,
  .lessons-by-course-section,
  .all-lessons-section,
  .related-articles-section {
    padding: 3.5rem 1.75rem;
  }
}

.section-header {
  margin-bottom: 1.75rem;
}

.section-header-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-pill {
  font-size: var(--size-12);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--deep-violet);
  margin-bottom: 0.375rem;
}

.section-title {
  font-size: var(--size-32);
}

.section-link {
  font-weight: 600;
  color: var(--deep-violet);
  font-size: var(--size-16);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.articles-grid,
.courses-grid,
.rise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .articles-grid,
  .courses-grid,
  .rise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .articles-grid,
  .courses-grid,
  .rise-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Featured Card (Charcoal surface) */
.featured-card {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--charcoal);
  color: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--ink);
}

@media (min-width: 1024px) {
  .featured-card {
    grid-template-columns: 1.15fr 1fr;
  }
}

.featured-image-wrapper {
  aspect-ratio: 3 / 2;
  background: var(--ink);
}

.featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.featured-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .featured-content {
    padding: 2.25rem;
  }
}

.featured-meta {
  color: var(--sky);
}

.featured-title {
  font-size: var(--size-24);
  color: var(--white);
  margin: 0.5rem 0 1rem;
}

.featured-title a:hover {
  color: var(--sky);
}

.featured-excerpt {
  color: var(--paper);
  font-size: var(--size-16);
  margin-bottom: 1.5rem;
}

.featured-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--muted);
  padding-top: 1rem;
  font-size: var(--size-14);
  color: var(--paper);
}

.author-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.featured-card .author-name {
  color: var(--white);
  font-weight: 600;
}

/* Cards: Post Card, Course Card, Rise Video Card (Spec 4.3: Paper surface, 12px radius, 20-24px padding, 3:2 image) */
.post-card,
.course-card,
.rise-card {
  background: var(--paper);
  border: 1px solid var(--muted);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-fast);
}

.post-card:hover,
.course-card:hover,
.rise-card:hover {
  border-color: var(--blue-violet);
}

.post-card-image-link-wrapper,
.course-card-media,
.rise-card-thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--charcoal);
  overflow: hidden;
}

.post-card-image,
.course-card-image,
.rise-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-access-pill {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  font-size: var(--size-12);
  font-weight: 700;
}

.pill-paid,
.access-badge-paid,
.lesson-access-locked {
  background: var(--charcoal);
  color: var(--white);
  border-color: var(--charcoal);
}

.pill-member,
.access-badge-member {
  background: var(--deep-violet);
  color: var(--white);
  border-color: var(--deep-violet);
}

.access-badge-public,
.lesson-access-open {
  background: var(--lavender);
  color: var(--deep-violet);
  border-color: var(--blue-violet);
}

.post-card-content,
.course-card-body,
.rise-card {
  padding: 1.375rem;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.post-card-title,
.course-title,
.rise-card-title {
  font-size: var(--size-20);
  margin-bottom: 0.625rem;
}

.post-card-excerpt,
.course-summary {
  font-size: var(--size-16);
  color: var(--muted);
  margin-bottom: 1.25rem;
  flex: 1 0 auto;
}

.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--muted);
  padding-top: 0.875rem;
  font-size: var(--size-14);
  color: var(--muted);
}

.post-card-author {
  font-weight: 600;
  color: var(--ink);
}

.post-card-read-link {
  font-weight: 600;
  color: var(--deep-violet);
}

/* Rise Guide Spotlight & Vertical Feed (Spec 5 & 8.7: vertical video capped at 100svh, mobile scroll snap) */
.rise-spotlight-section {
  background-color: var(--paper);
  padding: 3.5rem 0;
  border-block: 1px solid var(--muted);
}

.rise-spotlight-section .rise-card {
  background: var(--white);
}

.rise-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--lavender);
  color: var(--deep-violet);
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--size-12);
  font-weight: 700;
}

.rise-card-thumb {
  border-radius: var(--radius-btn);
  margin: 0.75rem 0 1rem;
}

.play-overlay-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.45);
  color: var(--white);
}

.rise-card-takeaway {
  background: var(--lavender);
  border-inline-start: 3px solid var(--deep-violet);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: var(--size-14);
  margin-bottom: 1.25rem;
  flex: 1 0 auto;
}

.takeaway-label {
  display: block;
  font-weight: 700;
  color: var(--deep-violet);
  font-size: var(--size-12);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.rise-feed-snap-stream {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .rise-feed-snap-stream {
    scroll-snap-type: y proximity;
  }
  .rise-feed-snap-item {
    scroll-snap-align: start;
  }
}

@media (min-width: 768px) {
  .rise-feed-snap-stream {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .rise-feed-snap-stream {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Course Hub, Progressive Syllabus Disclosure & Lesson Rows */
.courses-hub-header,
.search-header,
.taxonomy-header,
.author-archive-header {
  padding: 3rem 1rem 2rem;
  border-bottom: 1px solid var(--paper);
}

.courses-hub-title,
.search-title,
.taxonomy-title {
  font-size: var(--size-44);
  margin-bottom: 0.75rem;
}

.courses-hub-description,
.search-description,
.taxonomy-description {
  font-size: var(--size-18);
  color: var(--muted);
  max-width: var(--content-width);
  margin-bottom: 1.25rem;
}

.hub-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1rem;
}

.hub-filter-bar .tag-pill {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: var(--size-14);
}

.course-curriculum-preview {
  border-top: 1px solid var(--muted);
  padding-top: 1rem;
  margin-bottom: 1.25rem;
}

.course-lesson-count-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--size-14);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.course-syllabus-disclosure {
  margin-top: 0.75rem;
  background: var(--white);
  border: 1px solid var(--muted);
  border-radius: var(--radius-btn);
  padding: 0.625rem 0.875rem;
}

.course-syllabus-summary {
  font-size: var(--size-14);
  font-weight: 600;
  color: var(--deep-violet);
  cursor: pointer;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.course-syllabus-list,
.lesson-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.875rem;
}

.course-lesson-group {
  background: var(--paper);
  border: 1px solid var(--muted);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.course-lesson-group-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--muted);
  margin-bottom: 1.25rem;
}

.course-group-title {
  font-size: var(--size-24);
  margin: 0.375rem 0;
}

.course-group-summary {
  color: var(--muted);
  font-size: var(--size-16);
}

.lesson-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  background: var(--white);
  border: 1px solid var(--muted);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  flex-wrap: wrap;
}

.lesson-row:focus-within {
  border-color: var(--blue-violet);
  background: var(--lavender);
}

.lesson-row-index {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--deep-violet);
  font-weight: 700;
  font-size: var(--size-14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lesson-row-main {
  flex: 1 1 240px;
}

.lesson-row-title {
  font-size: var(--size-18);
  margin-bottom: 0.375rem;
}

.lesson-row-excerpt {
  font-size: var(--size-14);
  color: var(--muted);
}

/* Article, Lesson & Rise Guide Detail Views + Desktop Floating TOC (Spec 4.4 & 5) */
.reading-progress-bar {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--deep-violet) 0%, var(--pink) 70%, var(--sky) 100%);
  width: 0%;
  z-index: 999;
}

.article-header {
  max-width: var(--content-width);
  padding-top: 2.5rem;
  padding-bottom: 1.75rem;
}

.article-title,
.lesson-title,
.rise-guide-title {
  font-size: var(--size-32);
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .article-title {
    font-size: var(--size-44);
  }
}

.article-lead {
  font-size: var(--size-20);
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.article-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--paper);
  padding-top: 1.25rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.author-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.author-title {
  font-size: var(--size-14);
  color: var(--muted);
}

.article-feature-image-container,
.page-feature-image-container {
  margin: 1rem auto 2.5rem;
  max-width: 1000px;
}

.article-feature-image,
.page-feature-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  display: block;
}

.article-feature-caption {
  font-size: var(--size-14);
  color: var(--muted);
  margin-top: 0.625rem;
  text-align: center;
}

.article-layout-grid,
.lesson-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .article-layout-grid,
  .lesson-grid {
    grid-template-columns: minmax(0, var(--content-width)) 280px;
    justify-content: center;
  }
}

.article-body-wrapper,
.page-body-container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
}

.article-toc-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .article-toc-sidebar:not([hidden]) {
    display: block;
    position: sticky;
    top: 96px;
  }
}

.toc-card,
.sidebar-block {
  background: var(--paper);
  border: 1px solid var(--muted);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.toc-heading,
.sidebar-title {
  font-size: var(--size-16);
  margin-bottom: 0.75rem;
}

.toc-list,
.sidebar-lesson-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--size-14);
}

.toc-level-h3 {
  padding-inline-start: 0.875rem;
}

.toc-link,
.sidebar-lesson-link {
  color: var(--muted);
  display: block;
  padding: 0.25rem 0;
}

.toc-link:hover,
.sidebar-lesson-link:hover {
  color: var(--pink);
}

.sidebar-text {
  font-size: var(--size-14);
  color: var(--muted);
  margin-bottom: 1rem;
}

.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Prose Content & Responsive Table Frame (Spec 4.2 & 5) */
.gh-content {
  font-size: var(--size-18);
  line-height: 1.72;
  color: var(--ink);
  max-width: var(--content-width);
}

.gh-content p,
.gh-content ul,
.gh-content ol,
.gh-content pre {
  margin-bottom: 1.5rem;
}

.gh-content ul,
.gh-content ol {
  padding-inline-start: 1.5rem;
}

.gh-content h2 {
  font-size: var(--size-24);
  margin: 2.25rem 0 0.875rem;
}

.gh-content h3 {
  font-size: var(--size-20);
  margin: 1.75rem 0 0.625rem;
}

.gh-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: var(--size-14);
  border: 1px solid var(--muted);
  border-radius: var(--radius-sm);
}

.gh-content th,
.gh-content td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--paper);
  text-align: start;
}

.gh-content th {
  background: var(--paper);
  font-weight: 700;
}

/* Koenig Editor Cards (Spec Section 12: all 14 card types supported) */
.kg-card {
  margin: 2rem 0;
}

.kg-image-card img,
.kg-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  display: block;
}

.kg-width-wide,
.kg-width-full {
  max-width: 100%;
}

.kg-gallery-card,
.kg-gallery-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.kg-gallery-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .kg-gallery-row {
    flex-direction: row;
  }
}

.kg-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.kg-card figcaption {
  font-size: var(--size-14);
  color: var(--muted);
  margin-top: 0.5rem;
  text-align: center;
  overflow: visible;
  white-space: normal;
}

.kg-video-card video,
.kg-embed-card iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: var(--radius-card);
  background: var(--charcoal);
}

.media-video-vertical .kg-video-card video,
.media-video-vertical .kg-embed-card iframe,
.media-video-vertical video,
.media-video-vertical iframe {
  aspect-ratio: 9 / 16;
  max-height: 100svh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  display: block;
}

.media-video,
.media-audio-card {
  background: var(--paper);
  border: 1px solid var(--muted);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  margin: 1.75rem 0;
}

.media-video-meta-bar,
.media-audio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  font-size: var(--size-14);
  color: var(--muted);
}

.media-type-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 700;
  color: var(--deep-violet);
}

.media-transcript-disclosure {
  margin-top: 1rem;
  border-top: 1px solid var(--muted);
  padding-top: 0.75rem;
}

.media-transcript-summary {
  font-weight: 600;
  font-size: var(--size-14);
  color: var(--deep-violet);
  cursor: pointer;
}

.gh-content blockquote,
.kg-blockquote-alt {
  border-inline-start: 4px solid var(--pink);
  padding-inline-start: 1.25rem;
  font-style: italic;
  font-size: var(--size-20);
  color: var(--ink);
  background: transparent;
  margin: 2rem 0;
}

.kg-callout-card {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-card);
  background: var(--lavender);
  border: 1px solid var(--blue-violet);
}

.kg-toggle-card,
.kg-file-card,
.kg-product-card,
.kg-bookmark-card,
.kg-signup-card {
  background: var(--paper);
  border: 1px solid var(--muted);
  border-radius: var(--radius-card);
  padding: 1.25rem;
}

.kg-header-card {
  background: var(--charcoal);
  color: var(--white);
  padding: 2.5rem 1.5rem;
  border-radius: var(--radius-card);
  text-align: center;
}

.kg-header-card h2,
.kg-header-card h3 {
  color: var(--white);
}

.kg-button-card a.kg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pink);
  color: var(--white);
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-btn);
  min-height: 44px;
}

/* One Practical Idea Card & Contextual Content CTA */
.practical-idea-card {
  margin: 2.25rem 0;
  background: var(--lavender);
  border: 1px solid var(--blue-violet);
  border-inline-start: 5px solid var(--deep-violet);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}

.idea-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.idea-icon-wrap {
  color: var(--deep-violet);
  flex-shrink: 0;
}

.idea-card-badge {
  display: block;
  font-size: var(--size-12);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--deep-violet);
}

.idea-heading {
  font-size: var(--size-20);
  color: var(--ink);
}

.idea-card-source {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--blue-violet);
  font-size: var(--size-14);
}

.source-link {
  font-weight: 600;
  color: var(--deep-violet);
}

.content-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--muted);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  margin: 2rem 0;
}

.content-cta-kicker {
  font-size: var(--size-12);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--deep-violet);
}

.content-cta-title {
  font-size: var(--size-20);
  margin: 0.25rem 0 0.5rem;
}

.content-cta-description {
  font-size: var(--size-16);
  color: var(--muted);
  max-width: 56ch;
}

/* Charcoal Membership Strip & Paywall CTA (Spec 4.3: Charcoal with subtle gradient, white heading, one pink button) */
.membership-cta {
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--deep-violet) 100%);
  color: var(--white);
  padding: 3.5rem 0;
  margin-top: 3rem;
}

.membership-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.membership-cta-copy {
  max-width: 60ch;
}

.membership-cta-kicker {
  font-size: var(--size-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sky);
}

.membership-cta-heading {
  color: var(--white);
  font-size: var(--size-32);
  margin: 0.375rem 0 0.75rem;
}

.membership-cta-text {
  color: var(--paper);
  font-size: var(--size-16);
}

.membership-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}

.membership-cta-btn-secondary {
  color: var(--white);
  border-color: var(--white);
}

.membership-cta-signin-link {
  font-size: var(--size-14);
  color: var(--sky);
  text-decoration: underline;
}

.paywall-cta-container {
  margin: 2.5rem 0;
  background: var(--charcoal);
  color: var(--white);
  border-radius: var(--radius-card);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.paywall-lock-icon {
  color: var(--pink);
  margin-bottom: 0.75rem;
}

.paywall-kicker {
  font-size: var(--size-12);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sky);
}

.paywall-title {
  color: var(--white);
  font-size: var(--size-24);
  margin: 0.5rem 0 0.75rem;
}

.paywall-description {
  color: var(--paper);
  max-width: 54ch;
  margin: 0 auto 1.5rem;
}

.paywall-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.paywall-actions .btn-secondary {
  color: var(--white);
  border-color: var(--white);
}

/* Search Page & Highlighting */
.search-form {
  background: var(--paper);
  border: 1px solid var(--muted);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.search-form-label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.625rem;
}

.search-form-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.search-input-wrapper {
  position: relative;
  flex: 1 1 240px;
  display: flex;
  align-items: center;
}

.search-input-icon {
  position: absolute;
  inset-inline-start: 0.875rem;
  color: var(--muted);
  pointer-events: none;
}

.search-input {
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 1rem 0.625rem 2.5rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-btn);
  font-size: var(--size-16);
  background: var(--white);
  color: var(--ink);
}

.search-help-text {
  font-size: var(--size-14);
  color: var(--muted);
  margin-top: 0.625rem;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.search-result-card {
  background: var(--paper);
  border: 1px solid var(--muted);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
}

.search-result-title {
  font-size: var(--size-20);
  margin-bottom: 0.375rem;
}

.search-result-excerpt {
  font-size: var(--size-16);
  color: var(--muted);
}

mark.search-highlight {
  background: var(--lavender);
  color: var(--deep-violet);
  font-weight: 700;
  padding: 0 0.2rem;
  border-radius: 3px;
}

/* Membership, Account, Author, Footer & Error Pages */
.membership-page,
.account-page,
.error-page {
  padding: 3rem 1rem 4.5rem;
}

.membership-options-card,
.account-details-card,
.account-auth-card,
.error-card,
.pricing-card,
.platform-note-card,
.author-bio-card {
  background: var(--paper);
  border: 1px solid var(--muted);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.pricing-grid,
.platform-notes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

@media (min-width: 768px) {
  .pricing-grid,
  .platform-notes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.membership-options-actions,
.account-actions,
.error-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--muted);
}

.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.form-input {
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 1rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-btn);
  font-size: var(--size-16);
  background: var(--white);
  color: var(--ink);
}

.form-messages .form-message-loading,
.form-messages .form-message-success,
.form-messages .form-message-error {
  display: none;
}

form.loading .form-messages .form-message-loading,
form.success .form-messages .form-message-success,
form.error .form-messages .form-message-error {
  display: flex;
}

.article-footer {
  max-width: var(--content-width);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--muted);
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0.5rem 0 1.5rem;
}

.author-bio-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.author-bio-avatar,
.author-archive-avatar {
  border-radius: 50%;
  object-fit: cover;
}

.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 0;
  flex-wrap: wrap;
}

/* Footer (Charcoal surface) */
.site-footer {
  background: var(--charcoal);
  color: var(--white);
  padding: 3.5rem 0 2rem;
  margin-top: auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .footer-top {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

.footer-brand-link {
  color: var(--white);
  font-weight: 700;
  font-size: var(--size-20);
  display: inline-block;
  margin-bottom: 0.5rem;
}

.footer-tagline,
.app-note {
  color: var(--paper);
  font-size: var(--size-14);
  margin-bottom: 0.5rem;
}

.footer-heading {
  color: var(--sky);
  font-size: var(--size-14);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.site-footer .nav-list,
.nav-secondary-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

.site-footer .nav-link,
.nav-secondary-link,
.footer-util-link {
  color: var(--paper);
  font-size: var(--size-14);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.site-footer .nav-link:hover,
.nav-secondary-link:hover,
.footer-util-link:hover {
  color: var(--sky);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--muted);
  padding-top: 1.5rem;
  font-size: var(--size-14);
  color: var(--paper);
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-links-inline {
  display: flex;
  gap: 1rem;
}

/* Reduced Motion (Spec 4.4 & 14) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Koenig Bookmark Card Required Classes (GScan Specification) */
.kg-bookmark-container {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  width: 100%;
}

@media (min-width: 640px) {
  .kg-bookmark-container {
    flex-direction: row;
  }
}

.kg-bookmark-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  flex: 1 1 auto;
}

.kg-bookmark-title {
  font-size: var(--size-18);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.kg-bookmark-description {
  font-size: var(--size-14);
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.kg-bookmark-metadata {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--size-12);
  color: var(--muted);
}

.kg-bookmark-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.kg-bookmark-author {
  font-weight: 600;
}

.kg-bookmark-publisher {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kg-bookmark-thumbnail {
  position: relative;
  min-width: 180px;
  max-width: 240px;
}

.kg-bookmark-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   TEXT DIRECTION (RTL / HEBREW)
   Spacing and alignment above are already written with logical properties
   (margin-inline, padding-inline, inset-inline), so the layout mirrors by
   itself once the html element carries dir="rtl". The rules below cover the
   two cases logical properties cannot: technical content that must stay
   left-to-right inside a right-to-left page, and icon glyphs that point the
   wrong way after mirroring.
   ========================================================================== */
[dir="rtl"] pre,
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] samp,
[dir="rtl"] .kg-code-card,
[dir="rtl"] .kg-bookmark-url,
[dir="rtl"] .kg-file-card-filename {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

[dir="rtl"] pre {
    border-radius: 6px;
}

[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}


[dir="rtl"] .nav-submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   COMPONENT STYLES
   Every class the templates emit. Spacing uses logical properties so the
   same rules mirror correctly under dir="rtl".
   ========================================================================== */
.section-pill{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:var(--radius-pill);background:var(--lavender);color:var(--deep-violet);font-size:var(--size-12);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:1rem}
.meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.tag-pill,.article-primary-tag,.course-type-pill,.lesson-order-tag{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:var(--radius-pill);background:var(--paper);color:var(--charcoal);border:1px solid rgba(10,10,10,.08);font-size:var(--size-12);font-weight:600}
.meta-separator,.meta-dot{width:3px;height:3px;border-radius:50%;background:var(--muted);display:inline-block}
.article-tags,.lesson-header-badges,.account-actions,.error-actions,.content-cta-actions,.course-card-actions,.search-pagination-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.author-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.author-info,.author-bio-content,.author-bio-location,.author-bio-name,.author-bio-text{display:block}
.author-bio-name{font-weight:700;color:var(--ink)}
.author-bio-text{color:var(--muted);font-size:var(--size-14);line-height:1.6}
.author-avatar-link,.author-avatar-link img,.author-archive-avatar{display:block;width:56px;height:56px;border-radius:50%;object-fit:cover}
.author-archive-info,.author-archive-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;color:var(--muted);font-size:var(--size-14)}
.icon{width:1.125rem;height:1.125rem;flex:0 0 auto;display:inline-block;vertical-align:middle;stroke:currentColor}
.icon-check{color:var(--deep-violet)}
.icon-alert{color:var(--pink)}
.icon-lock{color:var(--muted)}
.brand-text{font-weight:800;font-size:var(--size-20);letter-spacing:.02em;color:var(--ink)}
.site-logo{display:block;height:32px;width:auto}
.footer-brand{color:var(--white);font-weight:800}
.header-left{display:flex;align-items:center}
.member-account-btn{white-space:nowrap}
.mobile-nav-content{display:flex;flex-direction:column;gap:1.25rem;padding-block:1.25rem}
.system-message{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem;border-radius:var(--radius-card);background:var(--white);border:1px solid rgba(10,10,10,.08)}
.system-message-body{display:block}
.system-message-info{border-inline-start:3px solid var(--blue-violet)}
.system-message-empty{border-inline-start:3px solid var(--muted)}
.account-page,.membership-page,.taxonomy-archive,.search-page,.rise-guide-page,.rise-feed-hub,.courses-hub,.lessons-hub,.article-detail,.post-template-page{padding-block:3rem}
.account-header,.membership-header,.page-header,.lesson-header,.rise-guide-header,.course-header{padding-block:2rem;max-width:60rem}
.account-title,.membership-title,.page-title,.lesson-title,.rise-guide-title,.article-title{font-size:2rem;line-height:1.2;margin:0 0 .75rem;color:var(--ink)}
.account-subtitle,.membership-subtitle,.page-lead,.article-lead{color:var(--muted);font-size:var(--size-18);line-height:1.6;margin:0 0 1rem}
.account-details-card,.auth-form,.support-block,.membership-options-card,.system-message,.error-card{background:var(--white);border:1px solid rgba(10,10,10,.08);border-radius:var(--radius-card);padding:1.5rem}
.account-row{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;padding-block:.6rem;border-bottom:1px solid rgba(10,10,10,.06)}
.account-row:last-child{border-bottom:0}
.account-label{color:var(--muted);font-size:var(--size-14)}
.account-value{color:var(--ink);font-weight:600;text-align:end}
.status-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.2rem .7rem;border-radius:var(--radius-pill);font-size:var(--size-12);font-weight:700}
.status-paid{background:rgba(76,53,199,.12);color:var(--deep-violet)}
.status-free{background:var(--paper);color:var(--muted)}
.auth-card-footer{margin-top:1rem;color:var(--muted);font-size:var(--size-14)}
.form-messages{margin-block:1rem;color:var(--pink);font-size:var(--size-14)}
.membership-tiers-section{padding-block:1rem}
.tier-name{font-size:var(--size-24);margin:0 0 .5rem;color:var(--ink)}
.tier-desc{color:var(--muted);font-size:var(--size-14);line-height:1.6;margin:0 0 1rem}
.tier-features{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.5rem}
.tier-features li{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--size-14);color:var(--charcoal)}
.feature-check{display:inline-flex;color:var(--deep-violet)}
.tier-card-footer{margin-top:auto;padding-top:.75rem}
.membership-options-title{font-size:var(--size-20);margin:0 0 .5rem}
.membership-options-text,.membership-platform-notes{color:var(--muted);font-size:var(--size-14);line-height:1.6;margin:0 0 .5rem}
.membership-platform-notes{margin-top:1rem}
.article-content,.page-content,.lesson-content{max-width:var(--content-width);line-height:1.8;color:var(--charcoal)}
.article-content>*+*,.page-content>*+*,.lesson-content>*+*{margin-top:1.25rem}
.article-content img,.page-content img,.lesson-content img{max-width:100%;height:auto;border-radius:var(--radius-card)}
.article-content blockquote,.page-content blockquote,.lesson-content blockquote{margin:1.5rem 0;padding-inline-start:1.25rem;border-inline-start:3px solid var(--pink);color:var(--charcoal);font-size:var(--size-20);line-height:1.5}
.article-content pre,.lesson-content pre,.page-content pre{overflow-x:auto;padding:1rem;border-radius:var(--radius-card);background:var(--charcoal);color:var(--white);font-family:var(--font-mono);font-size:var(--size-14)}
.article-content code,.lesson-content code{font-family:var(--font-mono);font-size:.9em}
.article-content table,.lesson-content table{width:100%;border-collapse:collapse;font-size:var(--size-14)}
.article-content th,.article-content td,.lesson-content th,.lesson-content td{padding:.6rem .75rem;border:1px solid rgba(10,10,10,.1);text-align:start}
.article-header-meta,.post-card-meta,.post-card-date,.post-card-reading-time,.article-reading-time,.card-date{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-size:var(--size-14)}
.card-image,.post-card-image-link img,.rise-card-thumb-link img,.course-card-image-link img{display:block;width:100%;height:100%;border-radius:0;object-fit:cover}
/* keep the [hidden] attribute authoritative over layout rules */
[hidden]{display:none!important}
.post-card-title-link,.rise-card-title-link,.course-title-link{display:block;font-weight:700;color:var(--ink);text-decoration:none;margin-block:.5rem}
.post-card-title-link:hover,.rise-card-title-link:hover,.course-title-link:hover{color:var(--deep-violet)}
.rise-card-header,.rise-card-footer,.rise-card-meta,.course-card-meta-top,.course-instructor,.course-duration-meta,.course-lesson-count,.lesson-row-meta,.lesson-date,.lesson-duration,.lesson-time{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;color:var(--muted);font-size:var(--size-14)}
.featured-badge,.hub-count-badge,.lesson-order-number{display:inline-flex;align-items:center;justify-content:center;min-width:1.75rem;min-height:1.75rem;padding-inline:.5rem;border-radius:var(--radius-pill);background:var(--charcoal);color:var(--white);font-size:var(--size-12);font-weight:700}
.rise-card-thumb-locked,.play-overlay-locked{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem;border-radius:var(--radius-sm);background:rgba(21,23,26,.85);color:var(--white);font-size:var(--size-12)}
.idea-source-label{display:block;margin-top:.75rem;color:var(--muted);font-size:var(--size-12);font-weight:600}
.course-detail-syllabus{margin-top:1.5rem}
.courses-hub .course-grid,.lessons-hub .lesson-list{display:grid;gap:1.25rem}
.lesson-layout{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
@media (min-width:1024px){.lesson-layout{grid-template-columns:minmax(0,1fr) 300px}}
.lesson-main{min-width:0}
.lesson-sidebar{position:sticky;top:1.5rem}
.sidebar-lesson-item{margin-bottom:.5rem}
.lesson-row-link{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:var(--radius-card);background:var(--white);border:1px solid rgba(10,10,10,.08);color:inherit;text-decoration:none;transition:border-color var(--transition-fast)}
.lesson-row-link:hover,.lesson-row-link:focus-visible{border-color:var(--blue-violet)}
.lesson-row-action{margin-inline-start:auto}
.lesson-media-badge{display:inline-flex;align-items:center;gap:.25rem;color:var(--muted);font-size:var(--size-12)}
.lesson-navigation,.lesson-breadcrumbs,.rise-feed-nav{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-block:1.5rem;font-size:var(--size-14)}
.lesson-nav-next{margin-inline-start:auto}
.lesson-nav-prev{margin-inline-end:auto}
.current-crumb{color:var(--muted)}
.lesson-preview{color:var(--muted);font-size:var(--size-16)}
.media-video-frame,.media-video-player{display:block;width:100%;border-radius:var(--radius-card);background:var(--charcoal)}
.media-video-frame{aspect-ratio:16/9;overflow:hidden}
.media-audio-artwork{width:64px;height:64px;border-radius:var(--radius-sm);object-fit:cover}
.media-audio-title{display:block;font-weight:700;color:var(--ink)}
.media-caption-note,.media-transcript-body{color:var(--muted);font-size:var(--size-14);line-height:1.6}
.media-transcript-body{margin-top:.75rem;max-width:var(--content-width)}
.search-results-section,.search-fallback-section{margin-top:2rem}
.search-status-region{min-height:1.5rem;color:var(--muted);font-size:var(--size-14)}
.search-index-card{padding:1rem;border-radius:var(--radius-card);background:var(--white);border:1px solid rgba(10,10,10,.08)}
.search-submit-btn,.search-clear-btn{min-height:44px}
.error-card{max-width:42rem;margin-inline:auto;padding-block:3rem;text-align:center}
.error-icon-wrap{display:flex;justify-content:center;margin-bottom:1rem;color:var(--pink)}
.error-code{display:block;font-size:var(--size-60);font-weight:800;line-height:1;color:var(--ink)}
.error-title{font-size:var(--size-24);margin-block:.75rem}
.error-description{color:var(--muted);margin-bottom:1.5rem}
.content-cta-actions{margin-top:1rem}
.toc-nav{padding:1rem;border-radius:var(--radius-card);background:var(--lavender);font-size:var(--size-14)}
.toc-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.toc-nav a{color:var(--deep-violet);text-decoration:none}
.toc-nav a:hover{text-decoration:underline}
.footer-nav-group{display:block}
.copyright-text{color:var(--paper);font-size:var(--size-12);opacity:.8}
.app-badge-wrapper{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.taxonomy-meta,.tags-label{color:var(--muted);font-size:var(--size-14)}
.kg-canvas{max-width:var(--content-width);margin-inline:auto}
/* ---- COMPONENT TAIL ---- */
.homepage{display:block}
.hero{position:relative}
.hero-inner,.hero-content{max-width:var(--max-width);margin-inline:auto;padding-inline:1.25rem}
.rise-guide-container,.rise-feed-container{max-width:var(--max-width);margin-inline:auto;padding-inline:1.25rem}
.rise-guide-meta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;color:var(--muted);font-size:var(--size-14)}
.page-detail{padding-block:2.5rem}
.media-audio-info,.membership-options-body,.content-cta-body,.idea-card-content,.article-preview-content,.rise-preview-content,.rise-guide-meta,.footer-container{display:block}
.nav-secondary-item{display:inline-flex;align-items:center;padding:.35rem .6rem;border-radius:var(--radius-sm);color:var(--charcoal);text-decoration:none;font-size:var(--size-14)}
.nav-secondary-item:hover{background:var(--lavender);color:var(--deep-violet)}
.paywall-header{font-weight:700;color:var(--ink);margin-bottom:.5rem}
.takeaway-text{font-size:var(--size-16);line-height:1.7;color:var(--charcoal);padding:1rem 1.25rem;border-inline-start:3px solid var(--blue-violet);background:var(--lavender);border-radius:var(--radius-sm)}
.preview-excerpt,.rise-preview-content,.article-preview-content{color:var(--muted);font-size:var(--size-16);line-height:1.7}
.idea-body-text{color:var(--charcoal);line-height:1.7}
.pagination-info{color:var(--muted);font-size:var(--size-14)}
.pagination-link{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .9rem;border:1px solid rgba(10,10,10,.12);border-radius:var(--radius-btn);color:var(--ink);text-decoration:none;font-size:var(--size-14);transition:border-color var(--transition-fast),color var(--transition-fast)}
.pagination-link:hover,.pagination-link:focus-visible{border-color:var(--pink);color:var(--pink)}
.pagination-next,.pagination-prev{display:inline-flex;align-items:center;gap:.35rem}
.pagination-next .icon,.pagination-prev .icon{width:1rem;height:1rem}
.lesson-nav-next{display:inline-flex;align-items:center;gap:.35rem}
.lesson-open-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .85rem;border-radius:var(--radius-btn);border:1px solid rgba(10,10,10,.12);color:var(--ink);font-size:var(--size-14);text-decoration:none;margin-inline-start:auto}
.lesson-open-btn:hover{border-color:var(--deep-violet);color:var(--deep-violet)}
.icon-article,.icon-audio,.icon-close,.icon-empty,.icon-info,.icon-lightbulb,.icon-menu,.icon-play,.icon-search,.icon-video{stroke:currentColor;fill:none}
.icon-close,.icon-menu{color:var(--ink)}
.icon-info{color:var(--blue-violet)}
.icon-lightbulb{color:var(--pink)}
.icon-play{color:var(--white)}
.icon-empty{color:var(--muted)}



/* Header: logo and account actions on the first row, the menu on its own row below,
   wrapping inside the page width so nothing is pushed off screen */
@media (min-width: 900px) {
  .header-container {
    flex-wrap: wrap;
    row-gap: 0;
    padding-bottom: 0;
  }
  .header-nav {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0.25rem 0 0;
    border-top: 1px solid var(--paper);
  }
  .header-nav .nav-list {
    flex-wrap: wrap;
    gap: 0.15rem 1.1rem;
    justify-content: flex-start;
  }
  .header-nav .nav-link {
    white-space: nowrap;
    font-size: 0.95rem;
  }
}