:root {
  --rjx-brand: #caf826;
  --rjx-brand-rgb: 202, 248, 38;
  --rjx-brand-soft: #dcff6a;
  --rjx-brand-deep: #a6d916;
  --rjx-on-brand: #10160a;
  --rjx-accent: #5fd6b0;
  --rjx-accent-rgb: 95, 214, 176;
  --rjx-shell-bg: #0a0a0c;
  --rjx-layout-max: 1280px;
  --rjx-layout-gutter: 1.25rem;
  --rjx-chrome-bg: #000000;
  --rjx-gap-bg: #050506;
  --rjx-header-bg: var(--rjx-chrome-bg);
  --rjx-footer-bg: var(--rjx-chrome-bg);
  --rjx-content-bg: #0b0b0d;
  --rjx-content-bg-alt: #14141a;
  --rjx-bg: var(--rjx-content-bg);
  --rjx-bg-elevated: #080808;
  --rjx-bg-card: #16161a;
  --rjx-bg-card-hover: #1c1c22;
  --rjx-text: #ffffff;
  --rjx-text-muted: #b0b0b8;
  --rjx-text-dim: #6e6e78;
  --rjx-block-nav: rgba(255, 255, 255, 0.1);
  --rjx-block-pill-active: rgba(202, 248, 38, 0.16);
  --rjx-block-input: rgba(0, 0, 0, 0.35);
  --rjx-block-muted: rgba(255, 255, 255, 0.04);
  --rjx-font: "Inter", "Segoe UI", system-ui, -apple-system, "Tahoma", Arial, sans-serif;
  --rjx-font-display: "Inter", "Segoe UI", system-ui, -apple-system, "Tahoma", Arial, sans-serif;
  --rjx-container: min(var(--rjx-layout-max), calc(100% - 2 * var(--rjx-layout-gutter)));
  --rjx-layout-inline: max(
    var(--rjx-layout-gutter),
    calc((100% - min(var(--rjx-layout-max), 100% - 2 * var(--rjx-layout-gutter))) / 2)
  );
  --rjx-header-h: 100px;
  --rjx-logo-h: 72px;
  /* Footer block + main/footer gaps reserved in .rjx-main__surface min-height calc */
  --rjx-main-chrome-offset: 360px;
  --rjx-content-gap: 16px;
  --rjx-module-gap: 20px;
  --rjx-module-radius: 20px;
  --rjx-module-padding-y: 2.75rem;
  --rjx-module-padding-y-sm: 2rem;
  --rjx-module-padding-block: calc(var(--rjx-module-padding-y) + 1rem);
  /* Compact page-header (command bar) vertical padding — much shorter than a module banner */
  --rjx-pagehead-padding-y: 1.25rem;
  /* Horizontal inner padding for panels without an inner .rjx-container */
  --rjx-module-padding-inline: clamp(1.5rem, 2.5vw, 2.75rem);
  --rjx-section-content-gap: clamp(1.75rem, 3.2vw, 2.5rem);
  --rjx-section-intro-gap: clamp(1rem, 2vw, 1.25rem);
  --rjx-radius: 12px;
  --rjx-radius-lg: 30px;
  /* Shared corner radius for all drama posters (matches home hero poster) */
  --rjx-poster-radius: var(--rjx-radius);
  --rjx-shadow-header: 0 4px 24px rgba(0, 0, 0, 0.55);
  --rjx-shadow-content: 0 8px 40px rgba(0, 0, 0, 0.45);
  --rjx-shadow-module: 0 4px 24px rgba(0, 0, 0, 0.35);
  --rjx-shadow-glow: 0 0 38px rgba(var(--rjx-brand-rgb), 0.14);
  --rjx-shadow-card: 0 8px 28px rgba(0, 0, 0, 0.4);
  --rjx-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --rjx-space-xs: 0.5rem;
  --rjx-space-sm: 1rem;
  --rjx-space-md: 1.5rem;
  --rjx-space-lg: 2.5rem;
  --rjx-space-xl: 4rem;
  --rjx-space-2xl: 6rem;
  --rjx-eyebrow-width: 10.75rem;
}

/* Phones (portrait): the 100px desktop chrome wastes vertical space on a small
   screen, so shrink the sticky header + logo. Both are tokens, so dependent
   offsets (sticky sidebar top, section scroll-margin) follow automatically. */
@media (max-width: 640px) {
  :root {
    --rjx-header-h: 80px;
    --rjx-logo-h: 58px;
  }
}

@media (max-width: 480px) {
  :root {
    --rjx-layout-gutter: 1rem;
    --rjx-module-gap: 12px;
    --rjx-content-gap: 12px;
    --rjx-module-padding-inline: 1.25rem;
    --rjx-pagehead-padding-y: 1rem;
    --rjx-header-h: 70px;
    --rjx-logo-h: 50px;
  }
}

@media (min-width: 768px) {
  :root {
    --rjx-module-gap: 40px;
    --rjx-content-gap: 40px;
  }
}

@media (min-width: 1024px) {
  :root {
    --rjx-logo-h: 80px;
    --rjx-header-h: 108px;
  }
}