/* ============================================================
   Redflix theme — cover.css
   Authored from scratch for the redflix surface. Prefix: rfx-
   ============================================================ */

@layer reset, tokens, base, layout, parts, pages, util;

/* ---------- I. RESET ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { min-block-size: 100dvh; -webkit-text-size-adjust: 100%; }
  img, svg, video, picture { max-inline-size: 100%; display: block; }
  button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
  input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
}

/* ---------- II. TOKENS ---------- */
@layer tokens {
  :root {
    --rfx-shell:        rgb(8 8 9);
    --rfx-canvas:       rgb(12 12 13);
    --rfx-rail:         rgb(16 16 17);
    --rfx-card:         rgb(22 22 24);
    --rfx-card-up:      rgb(31 31 34);
    --rfx-card-edge:    rgb(38 38 42);
    --rfx-line:         rgb(255 255 255 / .06);
    --rfx-line-strong:  rgb(255 255 255 / .12);

    --rfx-ink:          rgb(243 243 245);
    --rfx-ink-soft:     rgb(186 186 192);
    --rfx-ink-mute:     rgb(128 128 135);
    --rfx-ink-faint:    rgb(82 82 88);

    --rfx-brand:        rgb(220 38 38);
    --rfx-brand-glow:   rgb(220 38 38 / .55);
    --rfx-brand-soft:   rgb(220 38 38 / .12);
    --rfx-brand-deep:   rgb(154 22 27);
    --rfx-brand-light:  rgb(255 90 95);
    --rfx-gold:         rgb(245 197 24);

    --rfx-shadow-sm:    0 1px 2px rgb(0 0 0 / .35);
    --rfx-shadow:       0 8px 22px rgb(0 0 0 / .45);
    --rfx-shadow-lg:    0 24px 60px rgb(0 0 0 / .55);

    --rfx-radius-xs:    6px;
    --rfx-radius-sm:    8px;
    --rfx-radius-md:    12px;
    --rfx-radius-lg:    18px;
    --rfx-radius-pill:  999px;

    --rfx-rail-w:       72px;
    --rfx-bar-h:        66px;
    --rfx-gut:          clamp(16px, 2vw, 28px);

    --rfx-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --rfx-body:    'Albert Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --rfx-ease:    cubic-bezier(.32, .72, .26, 1);
    --rfx-ease-out: cubic-bezier(.16, 1, .3, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ---------- III. BASE ---------- */
@layer base {
  body {
    background: var(--rfx-shell);
    color: var(--rfx-ink);
    font-family: var(--rfx-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    font-family: var(--rfx-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
  }

  a:hover { color: var(--rfx-brand-light); }

  ::selection { background: var(--rfx-brand); color: #fff; }

  *:focus-visible {
    outline: 2px solid var(--rfx-brand-light);
    outline-offset: 2px;
    border-radius: 3px;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: -10000px;
    inset-block-start: -10000px;
    background: var(--rfx-brand);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--rfx-radius-sm);
    z-index: 9999;
    font-weight: 600;
  }
  .skip-link:focus { inset-inline-start: 12px; inset-block-start: 12px; }
}

/* ---------- IV. LAYOUT ---------- */
@layer layout {
  body { padding-inline-start: var(--rfx-rail-w); }

  .rfx-wrap { padding-inline: var(--rfx-gut); }

  .rfx-shell {
    display: flow-root;
    min-block-size: 100dvh;
    background: linear-gradient(180deg, rgb(15 4 5) 0%, var(--rfx-shell) 600px);
  }

  /* ----- IV.A. Side rail (vertical icon nav) ----- */
  .rfx-rail {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--rfx-rail-w);
    background: rgb(0 0 0 / .94);
    backdrop-filter: blur(14px);
    border-inline-end: 1px solid var(--rfx-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 18px;
    gap: 14px;
    z-index: 80;
  }
  .rfx-rail__brand {
    inline-size: 38px;
    block-size: 38px;
    border-radius: var(--rfx-radius-md);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--rfx-brand) 0%, var(--rfx-brand-deep) 100%);
    color: #0c0405;
    font-family: var(--rfx-display);
    font-weight: 800;
    font-size: 20px;
    box-shadow: 0 4px 14px var(--rfx-brand-glow);
    margin-block-end: 10px;
  }
  .rfx-rail__brand img { inline-size: 100%; block-size: 100%; border-radius: inherit; object-fit: cover; }
  .rfx-rail__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
  }
  .rfx-rail__item {
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--rfx-radius-md);
    display: grid;
    place-items: center;
    color: var(--rfx-ink-mute);
    transition: color .2s var(--rfx-ease), background .2s var(--rfx-ease), transform .2s var(--rfx-ease);
    position: relative;
  }
  .rfx-rail__item svg { inline-size: 18px; block-size: 18px; }
  .rfx-rail__item:hover { color: var(--rfx-ink); background: rgb(255 255 255 / .04); }
  .rfx-rail__item.rfx-now {
    color: var(--rfx-brand-light);
    background: var(--rfx-brand-soft);
  }
  .rfx-rail__item.rfx-now::before {
    content: "";
    position: absolute;
    inset-inline-start: -14px;
    inset-block: 8px;
    inline-size: 3px;
    background: var(--rfx-brand);
    border-radius: 2px;
  }
  .rfx-rail__tip {
    position: absolute;
    inset-inline-start: calc(100% + 14px);
    inset-block-start: 50%;
    transform: translateY(-50%);
    background: var(--rfx-card-up);
    color: var(--rfx-ink);
    padding: 6px 12px;
    border-radius: var(--rfx-radius-sm);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s var(--rfx-ease);
    border: 1px solid var(--rfx-line-strong);
    z-index: 5;
  }
  .rfx-rail__item:hover .rfx-rail__tip { opacity: 1; }

  /* ----- IV.B. Top bar (search + actions) ----- */
  .rfx-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 60;
    block-size: var(--rfx-bar-h);
    background: linear-gradient(180deg, rgb(0 0 0 / .85) 0%, rgb(0 0 0 / .55) 100%);
    backdrop-filter: blur(16px);
    border-block-end: 1px solid var(--rfx-line);
    display: flex;
    align-items: center;
    padding-inline: var(--rfx-gut);
    gap: 14px;
  }
  .rfx-bar__pill {
    flex: 1 1 auto;
    max-inline-size: 480px;
    block-size: 38px;
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line);
    border-radius: var(--rfx-radius-pill);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 16px;
    transition: border-color .2s var(--rfx-ease), background .2s var(--rfx-ease);
  }
  .rfx-bar__pill:focus-within {
    border-color: var(--rfx-brand);
    background: var(--rfx-card-up);
  }
  .rfx-bar__pill svg { color: var(--rfx-ink-mute); flex-shrink: 0; }
  .rfx-bar__pill input {
    flex: 1; background: none; border: 0; outline: 0;
    color: var(--rfx-ink); font-size: 14px;
  }
  .rfx-bar__pill input::placeholder { color: var(--rfx-ink-mute); }
  .rfx-bar__act {
    inline-size: 38px;
    block-size: 38px;
    border-radius: var(--rfx-radius-md);
    display: grid;
    place-items: center;
    color: var(--rfx-ink-soft);
    border: 1px solid var(--rfx-line);
    background: var(--rfx-card);
    transition: color .2s var(--rfx-ease), border-color .2s var(--rfx-ease);
  }
  .rfx-bar__act:hover { color: var(--rfx-brand-light); border-color: var(--rfx-brand); }
  .rfx-bar__burger { display: none; }

  /* ----- IV.C. Page main area ----- */
  main { display: block; }
  .rfx-section { padding-block: 28px; }
  .rfx-section--first { padding-block-start: 16px; }

  .rfx-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 14px;
  }
  .rfx-section__title {
    font-family: var(--rfx-display);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    color: var(--rfx-ink);
  }
  .rfx-section__more {
    font-size: 13px;
    font-weight: 600;
    color: var(--rfx-ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--rfx-radius-pill);
    border: 1px solid var(--rfx-line);
    transition: border-color .2s var(--rfx-ease), color .2s var(--rfx-ease);
  }
  .rfx-section__more:hover { color: var(--rfx-brand-light); border-color: var(--rfx-brand); }

  /* Mobile: collapse rail to top dock + show burger */
  @media (width < 880px) {
    body { padding-inline-start: 0; }
    .rfx-rail {
      inset-inline-start: 0; inset-inline-end: 0;
      inset-block: auto;
      inset-block-end: 0;
      inline-size: 100%;
      block-size: 60px;
      flex-direction: row;
      justify-content: space-around;
      padding: 8px var(--rfx-gut);
      border-block-start: 1px solid var(--rfx-line);
      border-inline-end: 0;
    }
    .rfx-rail__brand { display: none; }
    .rfx-rail__list { flex-direction: row; gap: 4px; }
    .rfx-rail__item.rfx-now::before {
      inset-inline-start: 8px; inset-inline-end: 8px;
      inset-block: auto;
      inset-block-end: -6px;
      inline-size: auto;
      block-size: 3px;
    }
    .rfx-rail__tip { display: none; }
    main { padding-block-end: 80px; }
  }
}

/* ---------- V. PARTS (reusable components) ---------- */
@layer parts {
  /* ---- V.A. Notification bar ---- */
  .rfx-notice {
    background: linear-gradient(135deg, var(--rfx-brand-deep) 0%, var(--rfx-brand) 100%);
    color: #fff;
    padding: 10px var(--rfx-gut);
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .rfx-notice__btn {
    background: rgb(0 0 0 / .25);
    border: 1px solid rgb(255 255 255 / .25);
    padding: 4px 10px;
    border-radius: var(--rfx-radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
  }
  .rfx-notice__close {
    margin-inline-start: auto;
    color: #fff;
    opacity: .8;
  }
  .rfx-notice__close:hover { opacity: 1; }
  .rfx-notice-modal { background: var(--rfx-card); color: var(--rfx-ink); border: 1px solid var(--rfx-line-strong); border-radius: var(--rfx-radius-lg); padding: 0; max-inline-size: 480px; }
  .rfx-notice-modal::backdrop { background: rgb(0 0 0 / .7); backdrop-filter: blur(6px); }
  .rfx-notice-modal__hd { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-block-end: 1px solid var(--rfx-line); }
  .rfx-notice-modal__hd h3 { font-size: 16px; flex: 1; }
  .rfx-notice-modal__close { color: var(--rfx-ink-soft); }
  .rfx-notice-modal__bd { padding: 16px 20px; font-size: 14px; color: var(--rfx-ink-soft); }
  .rfx-notice-modal__ft { padding: 12px 20px 16px; }
  .rfx-notice-modal__link { color: var(--rfx-brand-light); font-weight: 600; }

  /* ---- V.B. Card (landscape backdrop poster) ---- */
  .rfx-card {
    position: relative;
    border-radius: var(--rfx-radius-md);
    overflow: hidden;
    background: var(--rfx-rail);
    aspect-ratio: 2 / 3;
    isolation: isolate;
    transition: transform .25s var(--rfx-ease-out), box-shadow .25s var(--rfx-ease-out);
  }
  .rfx-card:hover { transform: translateY(-4px); box-shadow: var(--rfx-shadow-lg); }
  .rfx-card__shot {
    position: absolute; inset: 0;
    inline-size: 100%; block-size: 100%;
    object-fit: cover;
    transition: transform .35s var(--rfx-ease-out), filter .25s var(--rfx-ease);
  }
  .rfx-card:hover .rfx-card__shot { transform: scale(1.05); filter: brightness(1.06); }

  /* Top-left rank ribbon (TOP 10) */
  .rfx-card__rank {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 0;
    z-index: 3;
    background: var(--rfx-brand);
    color: #fff;
    font-family: var(--rfx-display);
    font-weight: 800;
    font-size: 10px;
    line-height: 1;
    padding: 5px 8px 5px 10px;
    border-start-end-radius: var(--rfx-radius-xs);
    border-end-end-radius: var(--rfx-radius-xs);
    letter-spacing: 1px;
    box-shadow: 0 2px 6px rgb(0 0 0 / .4);
  }
  .rfx-card__rank b { display: block; font-size: 13px; letter-spacing: 0; }

  /* Top-right rating chip */
  .rfx-card__rate {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    z-index: 3;
    background: rgb(0 0 0 / .82);
    color: var(--rfx-gold);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: var(--rfx-radius-xs);
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  .rfx-card__rate svg { color: var(--rfx-gold); inline-size: 11px; block-size: 11px; }

  /* Bottom-left status flag (RECENTLY ADDED, NEW EPISODE) */
  .rfx-card__flag {
    position: absolute;
    inset-block-end: 8px;
    inset-inline-start: 0;
    z-index: 3;
    background: var(--rfx-brand);
    color: #fff;
    font-family: var(--rfx-display);
    font-size: 9px;
    font-weight: 700;
    padding: 4px 8px 4px 10px;
    border-start-end-radius: var(--rfx-radius-xs);
    border-end-end-radius: var(--rfx-radius-xs);
    letter-spacing: .8px;
    text-transform: uppercase;
  }
  .rfx-card__flag--neutral { background: rgb(20 20 22 / .9); color: var(--rfx-ink); }

  /* Type badge (TV) bottom-right */
  .rfx-card__type {
    position: absolute;
    inset-block-end: 8px;
    inset-inline-end: 8px;
    z-index: 3;
    background: rgb(0 0 0 / .82);
    color: var(--rfx-ink);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: var(--rfx-radius-xs);
    letter-spacing: .5px;
  }

  /* Hover veil + caption */
  .rfx-card__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 0%, transparent 45%, rgb(0 0 0 / .92) 100%);
    opacity: 0;
    transition: opacity .25s var(--rfx-ease);
    z-index: 2;
  }
  .rfx-card:hover .rfx-card__veil { opacity: 1; }
  .rfx-card__cap {
    position: absolute;
    inset-inline: 12px;
    inset-block-end: 12px;
    z-index: 4;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s var(--rfx-ease), transform .25s var(--rfx-ease-out);
  }
  .rfx-card:hover .rfx-card__cap { opacity: 1; transform: translateY(0); }
  .rfx-card__title {
    color: #fff;
    font-family: var(--rfx-display);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rfx-card__year { color: var(--rfx-ink-soft); font-size: 11px; margin-block-start: 2px; }

  /* Mobile: hide hover-only decoration */
  @media (hover: none) {
    .rfx-card__veil { opacity: 0; }
    .rfx-card__cap { display: none; }
  }

  /* ---- V.C. Rail (horizontal scroll) ---- */
  .rfx-rail-row {
    position: relative;
  }
  .rfx-rail-row__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(140px, 13vw, 188px);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rfx-gut);
    padding-block: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .rfx-rail-row__track::-webkit-scrollbar { display: none; }
  .rfx-rail-row__track > * { scroll-snap-align: start; }
  .rfx-rail-row__nudge {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    background: rgb(0 0 0 / .85);
    border: 1px solid var(--rfx-line-strong);
    color: var(--rfx-ink);
    z-index: 5;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .2s var(--rfx-ease);
  }
  .rfx-rail-row:hover .rfx-rail-row__nudge { opacity: 1; }
  .rfx-rail-row__nudge:hover { background: var(--rfx-brand); border-color: var(--rfx-brand); }
  .rfx-rail-row__nudge--prev { inset-inline-start: -10px; }
  .rfx-rail-row__nudge--next { inset-inline-end: -10px; }
  .rfx-rail-row__nudge[disabled] { opacity: 0; pointer-events: none; }

  /* Grid for browse/search/category pages — portrait posters dense */
  .rfx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }
  @media (width < 480px) {
    .rfx-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  }

  /* ---- V.D. Buttons ---- */
  .rfx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    block-size: 42px;
    padding-inline: 22px;
    border-radius: var(--rfx-radius-pill);
    font-weight: 700;
    font-family: var(--rfx-display);
    font-size: 14px;
    letter-spacing: .2px;
    transition: transform .15s var(--rfx-ease), background .2s var(--rfx-ease), box-shadow .2s var(--rfx-ease);
    cursor: pointer;
    border: 0;
    white-space: nowrap;
  }
  .rfx-btn:hover { transform: translateY(-1px); }
  .rfx-btn:active { transform: translateY(0); }
  .rfx-btn--primary {
    background: #fff;
    color: #0c0405;
  }
  .rfx-btn--primary:hover { background: rgb(245 245 245); box-shadow: var(--rfx-shadow); color: #0c0405; }
  .rfx-btn--ghost {
    background: rgb(20 20 22 / .85);
    color: var(--rfx-ink);
    border: 1px solid var(--rfx-line-strong);
  }
  .rfx-btn--ghost:hover { background: var(--rfx-card-up); border-color: var(--rfx-brand); color: var(--rfx-ink); }
  .rfx-btn--brand {
    background: var(--rfx-brand);
    color: #fff;
    box-shadow: 0 6px 18px var(--rfx-brand-glow);
  }
  .rfx-btn--brand:hover { background: var(--rfx-brand-deep); color: #fff; }
  .rfx-btn--icon {
    inline-size: 42px; block-size: 42px;
    padding: 0;
    border-radius: 50%;
  }
  .rfx-btn--sm { block-size: 34px; padding-inline: 14px; font-size: 13px; }

  /* ---- V.E. Filter dropdowns (custom) ---- */
  .rfx-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-block: 14px 22px;
  }
  .rfx-drop {
    position: relative;
  }
  .rfx-drop__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    block-size: 38px;
    padding-inline: 14px;
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line);
    color: var(--rfx-ink);
    border-radius: var(--rfx-radius-pill);
    font-size: 13px;
    font-weight: 600;
    transition: border-color .2s var(--rfx-ease), background .2s var(--rfx-ease);
  }
  .rfx-drop__btn:hover { border-color: var(--rfx-brand); background: var(--rfx-card-up); }
  .rfx-drop__btn[aria-expanded="true"] { border-color: var(--rfx-brand); background: var(--rfx-card-up); }
  .rfx-drop__chev {
    inline-size: 14px; block-size: 14px;
    transition: transform .2s var(--rfx-ease);
  }
  .rfx-drop__btn[aria-expanded="true"] .rfx-drop__chev { transform: rotate(180deg); }
  .rfx-drop__panel {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    min-inline-size: 220px;
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line-strong);
    border-radius: var(--rfx-radius-md);
    box-shadow: var(--rfx-shadow-lg);
    z-index: 30;
    padding: 6px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .15s var(--rfx-ease), transform .15s var(--rfx-ease);
  }
  .rfx-drop[data-open="true"] .rfx-drop__panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .rfx-drop__panel--scroll {
    max-block-size: 280px;
    overflow-y: auto;
  }
  .rfx-drop__panel--scroll::-webkit-scrollbar { inline-size: 8px; }
  .rfx-drop__panel--scroll::-webkit-scrollbar-thumb { background: var(--rfx-card-edge); border-radius: 4px; }
  .rfx-drop__opt {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--rfx-radius-sm);
    font-size: 13px;
    color: var(--rfx-ink-soft);
    transition: background .15s var(--rfx-ease), color .15s var(--rfx-ease);
    cursor: pointer;
    user-select: none;
  }
  .rfx-drop__opt:hover { background: var(--rfx-card-up); color: var(--rfx-ink); }
  .rfx-drop__opt.rfx-now {
    background: var(--rfx-brand-soft);
    color: var(--rfx-brand-light);
    font-weight: 600;
  }

  /* ---- V.F. Pagination ---- */
  .pagination__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-block: 32px;
    padding: 0;
    list-style: none;
  }
  .pagination__item { list-style: none; }
  .pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 38px;
    block-size: 38px;
    padding-inline: 10px;
    border-radius: var(--rfx-radius-md);
    background: var(--rfx-card);
    color: var(--rfx-ink-soft);
    border: 1px solid var(--rfx-line);
    font-size: 13px;
    font-weight: 600;
    transition: all .15s var(--rfx-ease);
  }
  .pagination__link:hover { color: var(--rfx-ink); border-color: var(--rfx-brand); background: var(--rfx-card-up); }
  .pagination__link--active {
    background: var(--rfx-brand);
    color: #fff;
    border-color: var(--rfx-brand);
    cursor: default;
  }
  .pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 38px;
    block-size: 38px;
    color: var(--rfx-ink-mute);
  }

  /* ---- V.G. Footer ---- */
  .rfx-foot {
    margin-block-start: 56px;
    padding: 48px var(--rfx-gut) 32px;
    background: var(--rfx-canvas);
    border-block-start: 1px solid var(--rfx-line);
  }
  .rfx-foot__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
    max-inline-size: 1280px;
    margin: 0 auto;
  }
  @media (width < 880px) {
    .rfx-foot__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  }
  @media (width < 560px) {
    .rfx-foot__grid { grid-template-columns: 1fr; }
  }
  .rfx-foot__brand {
    font-family: var(--rfx-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--rfx-ink);
    margin-block-end: 8px;
  }
  .rfx-foot__lede { font-size: 14px; font-weight: 600; color: var(--rfx-ink); margin-block: 0 6px; }
  .rfx-foot__desc { color: var(--rfx-ink-soft); font-size: 13px; line-height: 1.6; margin: 0; }
  .rfx-foot__hd {
    font-family: var(--rfx-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--rfx-ink-mute);
    text-transform: uppercase;
    margin-block-end: 14px;
  }
  .rfx-foot__nav { display: flex; flex-direction: column; gap: 10px; }
  .rfx-foot__nav a { color: var(--rfx-ink-soft); font-size: 13px; transition: color .15s var(--rfx-ease); }
  .rfx-foot__nav a:hover { color: var(--rfx-brand-light); }
  .rfx-foot__discord {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgb(88 101 242 / .15);
    border: 1px solid rgb(88 101 242 / .35);
    color: rgb(127 140 255);
    border-radius: var(--rfx-radius-pill);
    font-size: 13px;
    font-weight: 600;
    margin-block-end: 16px;
  }
  .rfx-foot__discord:hover { background: rgb(88 101 242 / .25); color: rgb(178 188 255); }
  .rfx-foot__share-hd { font-family: var(--rfx-display); font-size: 11px; font-weight: 700; color: var(--rfx-ink-mute); letter-spacing: 1.5px; text-transform: uppercase; margin-block-end: 10px; }
  .rfx-foot__shares {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .rfx-foot__share {
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    background: var(--rfx-card-up);
    border: 1px solid var(--rfx-line);
    color: var(--rfx-ink-soft);
    display: grid;
    place-items: center;
    transition: all .15s var(--rfx-ease);
  }
  .rfx-foot__share:hover { background: var(--rfx-brand); border-color: var(--rfx-brand); color: #fff; transform: translateY(-2px); }
  .rfx-foot__bottom {
    border-block-start: 1px solid var(--rfx-line);
    margin-block-start: 32px;
    padding-block-start: 18px;
    max-inline-size: 1280px;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--rfx-ink-mute);
    font-size: 12px;
  }
  .rfx-foot__dots { display: flex; gap: 12px; align-items: center; }
  .rfx-foot__dots span:not(:last-child)::after { content: "•"; margin-inline-start: 12px; color: var(--rfx-ink-faint); }

  /* ---- V.H. Breadcrumbs ---- */
  .rfx-crumbs {
    padding: 16px var(--rfx-gut) 0;
  }
  .rfx-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 4px;
    align-items: center;
    font-size: 13px;
    color: var(--rfx-ink-mute);
  }
  .rfx-crumbs__list a { color: var(--rfx-ink-soft); transition: color .15s var(--rfx-ease); }
  .rfx-crumbs__list a:hover { color: var(--rfx-brand-light); }
  .rfx-crumbs__list li:not(:last-child)::after { content: "›"; margin-inline: 8px 4px; color: var(--rfx-ink-faint); }
  .rfx-crumbs__list [aria-current="page"] { color: var(--rfx-ink); font-weight: 600; }

  /* ---- V.I. Subscribe popup ---- */
  .rfx-sub {
    position: fixed;
    inset-block-end: 16px;
    inset-inline-end: 16px;
    inline-size: 300px;
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line-strong);
    border-radius: var(--rfx-radius-lg);
    padding: 18px;
    box-shadow: var(--rfx-shadow-lg);
    z-index: 70;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s var(--rfx-ease-out), opacity .25s var(--rfx-ease-out);
  }
  .rfx-sub.rfx-live { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .rfx-sub__close {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    color: var(--rfx-ink-mute);
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
  }
  .rfx-sub__close:hover { color: var(--rfx-ink); background: var(--rfx-card-up); }
  .rfx-sub__title {
    font-family: var(--rfx-display);
    font-size: 15px;
    font-weight: 700;
    margin-block-end: 6px;
  }
  .rfx-sub__desc { font-size: 13px; color: var(--rfx-ink-soft); margin-block-end: 14px; }
  .rfx-sub__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgb(38 153 226);
    color: #fff;
    padding: 10px;
    border-radius: var(--rfx-radius-md);
    font-weight: 600;
    font-size: 14px;
  }
  .rfx-sub__cta:hover { background: rgb(20 130 200); color: #fff; }

  /* ---- V.J. Ad container ---- */
  .rfx-ad {
    margin: 16px auto;
    text-align: center;
    padding-inline: var(--rfx-gut);
  }

  /* ---- V.K. ShareThis CTA ---- */
  .rfx-share-cta {
    text-align: center;
    margin: 32px auto;
    padding: 22px 16px;
    max-inline-size: 720px;
    background: linear-gradient(135deg, rgb(20 20 22 / .6) 0%, rgb(28 14 16 / .6) 100%);
    border: 1px solid var(--rfx-line);
    border-radius: var(--rfx-radius-lg);
  }
  .rfx-share-cta__t { font-family: var(--rfx-display); font-size: 17px; font-weight: 700; margin: 0 0 4px; }
  .rfx-share-cta__d { font-size: 13px; color: var(--rfx-ink-soft); margin: 0 0 14px; }
}

/* ---------- VI. PAGES ---------- */
@layer pages {
  /* ---- VI.A. Hero (home + index) ---- */
  .rfx-hero {
    position: relative;
    margin-inline: var(--rfx-gut);
    margin-block-start: 16px;
    border-radius: var(--rfx-radius-lg);
    overflow: hidden;
    aspect-ratio: 21 / 9;
    min-block-size: 320px;
    isolation: isolate;
    background: var(--rfx-rail);
  }
  @media (width < 720px) { .rfx-hero { aspect-ratio: 16 / 11; min-block-size: 380px; } }

  .rfx-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s var(--rfx-ease);
    pointer-events: none;
  }
  .rfx-hero__slide.rfx-live { opacity: 1; pointer-events: auto; z-index: 2; }
  .rfx-hero__shot {
    position: absolute; inset: 0;
    inline-size: 100%; block-size: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .rfx-hero__shade {
    position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .35) 60%, transparent 100%),
      linear-gradient(180deg, transparent 30%, rgb(0 0 0 / .55) 100%);
    z-index: 2;
  }
  .rfx-hero__inner {
    position: relative;
    z-index: 3;
    block-size: 100%;
    padding: clamp(20px, 4vw, 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-inline-size: 720px;
  }
  .rfx-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgb(0 0 0 / .55);
    border: 1px solid var(--rfx-line-strong);
    color: var(--rfx-ink);
    font-family: var(--rfx-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 6px 12px;
    border-radius: var(--rfx-radius-pill);
    text-transform: uppercase;
    align-self: flex-start;
    margin-block-end: 14px;
  }
  .rfx-hero__pill--brand { background: var(--rfx-brand); border-color: var(--rfx-brand); color: #fff; }
  .rfx-hero__kicker {
    color: var(--rfx-ink-soft);
    font-family: var(--rfx-display);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-block-end: 10px;
  }
  .rfx-hero__title {
    font-family: var(--rfx-display);
    font-size: clamp(34px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.05;
    color: #fff;
    margin-block-end: 12px;
    letter-spacing: -.02em;
  }
  .rfx-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--rfx-ink-soft);
    font-size: 13px;
    margin-block-end: 12px;
  }
  .rfx-hero__meta b { color: var(--rfx-ink); font-weight: 600; }
  .rfx-hero__meta span:not(:last-child)::after { content: "•"; margin-inline-start: 14px; color: var(--rfx-ink-faint); }
  .rfx-hero__lede {
    color: var(--rfx-ink-soft);
    font-size: 14px;
    line-height: 1.5;
    max-inline-size: 540px;
    margin-block-end: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rfx-hero__cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Hero strip (mini thumbs lower-right) */
  .rfx-hero__strip {
    position: absolute;
    inset-inline-end: 16px;
    inset-block-end: 16px;
    z-index: 4;
    display: flex;
    gap: 6px;
    background: rgb(0 0 0 / .65);
    backdrop-filter: blur(10px);
    border: 1px solid var(--rfx-line);
    border-radius: var(--rfx-radius-pill);
    padding: 6px 8px;
    align-items: center;
  }
  .rfx-hero__nudge {
    inline-size: 26px; block-size: 26px;
    border-radius: 50%;
    color: var(--rfx-ink-soft);
    background: rgb(0 0 0 / .4);
    display: grid;
    place-items: center;
  }
  .rfx-hero__nudge:hover { color: var(--rfx-brand-light); }
  .rfx-hero__thumb {
    inline-size: 56px;
    block-size: 32px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    border: 2px solid transparent;
    transition: border-color .15s var(--rfx-ease), transform .15s var(--rfx-ease);
  }
  .rfx-hero__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .rfx-hero__thumb.rfx-cued { border-color: var(--rfx-brand); transform: scale(1.05); }
  @media (width < 720px) { .rfx-hero__strip { display: none; } }

  /* ---- VI.B. Index/Landing ---- */
  .rfx-land-hero {
    padding: clamp(40px, 6vw, 80px) var(--rfx-gut) clamp(28px, 4vw, 48px);
    text-align: center;
    background:
      radial-gradient(800px 360px at 50% 20%, rgb(220 38 38 / .12), transparent 70%),
      linear-gradient(180deg, var(--rfx-canvas), var(--rfx-shell));
  }
  .rfx-land-hero h1 {
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 800;
    color: #fff;
    margin-block-end: 14px;
    letter-spacing: -.02em;
    max-inline-size: 22ch;
    margin-inline: auto;
  }
  .rfx-land-hero h1 b { color: var(--rfx-brand); font-weight: 800; }
  .rfx-land-hero p {
    color: var(--rfx-ink-soft);
    font-size: clamp(14px, 1.5vw, 18px);
    max-inline-size: 56ch;
    margin: 0 auto 28px;
  }
  .rfx-land-search {
    max-inline-size: 540px;
    margin-inline: auto;
    display: flex;
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line-strong);
    border-radius: var(--rfx-radius-pill);
    padding: 6px;
    transition: border-color .2s var(--rfx-ease);
  }
  .rfx-land-search:focus-within { border-color: var(--rfx-brand); }
  .rfx-land-search input {
    flex: 1;
    background: none;
    border: 0;
    outline: 0;
    color: var(--rfx-ink);
    padding: 8px 16px;
    font-size: 14px;
  }
  .rfx-land-search input::placeholder { color: var(--rfx-ink-mute); }
  .rfx-land-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-block-start: 18px;
  }
  .rfx-land-quick a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--rfx-radius-pill);
    background: rgb(255 255 255 / .04);
    border: 1px solid var(--rfx-line);
    color: var(--rfx-ink-soft);
    font-size: 13px;
    transition: all .15s var(--rfx-ease);
  }
  .rfx-land-quick a:hover { color: var(--rfx-ink); border-color: var(--rfx-brand); background: var(--rfx-brand-soft); }

  .rfx-land-stats {
    max-inline-size: 1280px;
    margin: 32px auto;
    padding-inline: var(--rfx-gut);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
  }
  .rfx-land-stat {
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line);
    border-radius: var(--rfx-radius-lg);
    padding: 22px 18px;
    text-align: center;
  }
  .rfx-land-stat b {
    display: block;
    font-family: var(--rfx-display);
    font-size: clamp(28px, 3vw, 38px);
    color: var(--rfx-brand);
    font-weight: 800;
    margin-block-end: 4px;
  }
  .rfx-land-stat span { color: var(--rfx-ink-soft); font-size: 13px; }

  .rfx-land-hot {
    max-inline-size: 1280px;
    margin: 36px auto;
    padding-inline: var(--rfx-gut);
  }
  .rfx-land-hot__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    margin-block-start: 18px;
  }
  .rfx-land-hot__row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line);
    border-radius: var(--rfx-radius-md);
    color: var(--rfx-ink);
    transition: all .15s var(--rfx-ease);
  }
  .rfx-land-hot__row:hover { border-color: var(--rfx-brand); background: var(--rfx-card-up); }
  .rfx-land-hot__num {
    font-family: var(--rfx-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--rfx-brand);
    text-align: center;
  }
  .rfx-land-hot__t {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rfx-land-hot__meta { font-size: 11px; color: var(--rfx-ink-mute); display: flex; gap: 6px; }
  .rfx-land-hot__meta .rfx-tag { background: rgb(255 255 255 / .06); padding: 2px 6px; border-radius: 4px; }
  .rfx-land-hot__meta .rfx-rate { color: var(--rfx-gold); }

  .rfx-land-genres {
    max-inline-size: 1280px;
    margin: 36px auto;
    padding-inline: var(--rfx-gut);
  }
  .rfx-land-genres__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-block-start: 18px;
  }
  .rfx-land-genres__cell {
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line);
    color: var(--rfx-ink);
    border-radius: var(--rfx-radius-md);
    padding: 14px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: all .15s var(--rfx-ease);
  }
  .rfx-land-genres__cell:hover {
    border-color: var(--rfx-brand);
    background: linear-gradient(135deg, var(--rfx-brand-soft), transparent);
    color: var(--rfx-ink);
  }
  .rfx-land-genres__cell small { color: var(--rfx-ink-mute); font-weight: 500; font-size: 11px; }

  .rfx-land-why {
    max-inline-size: 1280px;
    margin: 48px auto;
    padding-inline: var(--rfx-gut);
  }
  .rfx-land-why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-block-start: 18px;
  }
  .rfx-land-why__card {
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line);
    border-radius: var(--rfx-radius-lg);
    padding: 22px;
  }
  .rfx-land-why__num {
    font-family: var(--rfx-display);
    font-size: 36px;
    font-weight: 800;
    color: var(--rfx-brand);
    line-height: 1;
    margin-block-end: 12px;
  }
  .rfx-land-why__h { font-size: 16px; font-weight: 700; margin-block-end: 6px; }
  .rfx-land-why__p { color: var(--rfx-ink-soft); font-size: 13px; line-height: 1.6; margin: 0; }

  .rfx-land-faq {
    max-inline-size: 880px;
    margin: 48px auto;
    padding-inline: var(--rfx-gut);
  }
  .rfx-land-faq__list { display: flex; flex-direction: column; gap: 10px; margin-block-start: 18px; }
  .rfx-land-faq__item {
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line);
    border-radius: var(--rfx-radius-md);
    padding: 14px 18px;
  }
  .rfx-land-faq__item[open] { border-color: var(--rfx-brand); }
  .rfx-land-faq__q {
    font-weight: 700;
    color: var(--rfx-ink);
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .rfx-land-faq__q::after {
    content: "+";
    font-family: var(--rfx-display);
    font-size: 22px;
    line-height: 1;
    color: var(--rfx-brand);
    transition: transform .2s var(--rfx-ease);
  }
  .rfx-land-faq__item[open] .rfx-land-faq__q::after { transform: rotate(45deg); }
  .rfx-land-faq__a { color: var(--rfx-ink-soft); font-size: 14px; line-height: 1.6; margin: 12px 0 0; }
  .rfx-land-faq__a a { color: var(--rfx-brand-light); }

  .rfx-land-prose {
    max-inline-size: 880px;
    margin: 48px auto;
    padding-inline: var(--rfx-gut);
    color: var(--rfx-ink-soft);
    font-size: 14px;
    line-height: 1.75;
  }
  .rfx-land-prose h2 { color: var(--rfx-ink); font-size: 22px; margin: 24px 0 10px; }
  .rfx-land-prose ul { padding-inline-start: 22px; list-style: disc; margin-block: 12px 18px; }
  .rfx-land-prose ul li { margin-block-end: 6px; }
  .rfx-land-prose a { color: var(--rfx-brand-light); }

  /* Section title alignment for centered sections */
  .rfx-section-title-c { text-align: center; font-family: var(--rfx-display); font-size: clamp(22px, 3vw, 30px); font-weight: 700; }

  /* ---- VI.C. Detail page ---- */
  .rfx-detail {
    position: relative;
    isolation: isolate;
  }
  .rfx-detail__back {
    position: absolute;
    inset: 0;
    inset-block-end: auto;
    block-size: 540px;
    z-index: -1;
    overflow: hidden;
  }
  .rfx-detail__back img {
    inline-size: 100%; block-size: 100%;
    object-fit: cover;
    transform: scale(1.05);
    filter: brightness(.45) saturate(1.05);
  }
  .rfx-detail__back::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 0%, var(--rfx-shell) 100%);
  }
  .rfx-detail__wrap {
    max-inline-size: 1280px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) var(--rfx-gut) 0;
  }
  .rfx-detail__grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
  }
  @media (width < 720px) {
    .rfx-detail__grid { grid-template-columns: 1fr; }
    .rfx-detail__poster-col { display: flex; flex-direction: column; align-items: center; }
  }
  .rfx-detail__poster {
    aspect-ratio: 2 / 3;
    border-radius: var(--rfx-radius-lg);
    overflow: hidden;
    box-shadow: var(--rfx-shadow-lg);
    inline-size: 100%;
    max-inline-size: 280px;
    background: var(--rfx-rail);
  }
  .rfx-detail__poster img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .rfx-detail__cta {
    margin-block-start: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  @media (width < 720px) {
    .rfx-detail__cta { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  }
  .rfx-detail__type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 12px;
    flex-wrap: wrap;
  }
  .rfx-detail__type-pill {
    background: var(--rfx-brand);
    color: #fff;
    font-family: var(--rfx-display);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--rfx-radius-xs);
    letter-spacing: 1px;
  }
  .rfx-detail__status {
    background: var(--rfx-card-up);
    color: var(--rfx-ink-soft);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--rfx-radius-xs);
    border: 1px solid var(--rfx-line-strong);
  }
  .rfx-detail__rate {
    color: var(--rfx-gold);
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .rfx-detail__title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    margin-block-end: 6px;
    letter-spacing: -.02em;
  }
  .rfx-detail__sub {
    color: var(--rfx-ink-mute);
    font-size: 14px;
    font-style: italic;
    margin-block-end: 12px;
  }
  .rfx-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 14px;
  }
  .rfx-detail__chip {
    background: rgb(255 255 255 / .06);
    color: var(--rfx-ink-soft);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--rfx-radius-xs);
    border: 1px solid var(--rfx-line);
  }
  a.rfx-detail__chip:hover { color: var(--rfx-ink); border-color: var(--rfx-brand); }
  .rfx-detail__genres { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 18px; }
  .rfx-detail__genre {
    color: var(--rfx-brand-light);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid rgb(220 38 38 / .35);
    border-radius: var(--rfx-radius-pill);
    background: var(--rfx-brand-soft);
    transition: all .15s var(--rfx-ease);
  }
  .rfx-detail__genre:hover { background: var(--rfx-brand); color: #fff; border-color: var(--rfx-brand); }
  .rfx-detail__lede {
    color: var(--rfx-ink-soft);
    font-size: 15px;
    line-height: 1.65;
    margin-block-end: 18px;
    max-inline-size: 78ch;
  }
  .rfx-detail__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    border-block-start: 1px solid var(--rfx-line);
    padding-block-start: 18px;
    margin-block-end: 18px;
  }
  .rfx-detail__fact dt {
    font-family: var(--rfx-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--rfx-ink-mute);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-block-end: 4px;
  }
  .rfx-detail__fact dd { margin: 0; color: var(--rfx-ink); font-size: 13px; }
  .rfx-detail__fact dd a { color: var(--rfx-ink); }
  .rfx-detail__fact dd a:hover { color: var(--rfx-brand-light); }

  .rfx-detail__phone {
    display: none;
    gap: 10px;
    flex-wrap: wrap;
    margin-block-end: 18px;
  }
  @media (width < 720px) {
    .rfx-detail__phone { display: flex; }
    .rfx-detail__cta { display: none; }
  }

  /* ---- VI.D. Inline player ---- */
  .rfx-watch {
    max-inline-size: 1280px;
    margin: 28px auto 0;
    padding-inline: var(--rfx-gut);
  }
  .rfx-watch--latent { display: none; }
  .rfx-watch__frame {
    aspect-ratio: 16 / 9;
    background: rgb(0 0 0);
    border-radius: var(--rfx-radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--rfx-shadow-lg);
    border: 1px solid var(--rfx-line);
  }
  .rfx-watch__cover {
    position: absolute; inset: 0;
    cursor: pointer;
    z-index: 2;
  }
  .rfx-watch__cover img {
    inline-size: 100%; block-size: 100%;
    object-fit: cover;
    filter: brightness(.65);
  }
  .rfx-watch__cover::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at center, transparent 30%, rgb(0 0 0 / .4) 100%);
  }
  .rfx-watch__cue {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    inline-size: 84px;
    block-size: 84px;
    border-radius: 50%;
    background: var(--rfx-brand);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 12px 40px var(--rfx-brand-glow);
    transition: transform .2s var(--rfx-ease);
    z-index: 3;
  }
  .rfx-watch__cue::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgb(220 38 38 / .35);
    animation: rfx-pulse 2.4s var(--rfx-ease) infinite;
  }
  @keyframes rfx-pulse {
    0%, 100% { transform: scale(1); opacity: .6; }
    50%      { transform: scale(1.18); opacity: 0; }
  }
  .rfx-watch__cover:hover .rfx-watch__cue { transform: translate(-50%, -50%) scale(1.06); }
  .rfx-watch__iframe {
    position: absolute; inset: 0;
    inline-size: 100%; block-size: 100%;
    border: 0;
    z-index: 1;
  }

  /* Server tab strip */
  .rfx-srv-card {
    margin-block-start: 14px;
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line);
    border-radius: var(--rfx-radius-md);
    padding: 14px;
  }
  .rfx-srv-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--rfx-ink-mute);
    font-size: 12px;
    margin-block-end: 10px;
  }
  .rfx-srv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .rfx-srv {
    background: var(--rfx-card-up);
    border: 1px solid var(--rfx-line-strong);
    color: var(--rfx-ink);
    padding: 7px 14px;
    border-radius: var(--rfx-radius-pill);
    font-size: 13px;
    font-weight: 600;
    transition: all .15s var(--rfx-ease);
    min-inline-size: 64px;
  }
  .rfx-srv:hover { border-color: var(--rfx-brand); color: var(--rfx-brand-light); }
  .rfx-srv.rfx-now {
    background: var(--rfx-brand);
    border-color: var(--rfx-brand);
    color: #fff;
    box-shadow: 0 4px 14px var(--rfx-brand-glow);
  }

  /* Episode prev/next strip */
  .rfx-epnav {
    margin-block-start: 12px;
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line);
    border-radius: var(--rfx-radius-md);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .rfx-epnav__btn {
    background: var(--rfx-card-up);
    border: 1px solid var(--rfx-line-strong);
    color: var(--rfx-ink);
    padding: 7px 14px;
    border-radius: var(--rfx-radius-pill);
    font-size: 12px;
    font-weight: 600;
  }
  .rfx-epnav__btn:hover:not([disabled]) { border-color: var(--rfx-brand); color: var(--rfx-brand-light); }
  .rfx-epnav__btn[disabled] { opacity: .4; cursor: not-allowed; }
  .rfx-epnav__now {
    font-family: var(--rfx-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--rfx-ink);
  }

  /* Report */
  .rfx-report { margin-block-start: 12px; }
  .rfx-report__toggle {
    background: transparent;
    color: var(--rfx-ink-mute);
    font-size: 12px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--rfx-radius-sm);
  }
  .rfx-report__toggle:hover { color: var(--rfx-brand-light); background: var(--rfx-brand-soft); }
  .rfx-report__form {
    margin-block-start: 8px;
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line);
    border-radius: var(--rfx-radius-md);
    padding: 12px;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr auto;
  }
  .rfx-report__form select,
  .rfx-report__form textarea {
    background: var(--rfx-card-up);
    border: 1px solid var(--rfx-line-strong);
    color: var(--rfx-ink);
    padding: 8px 10px;
    border-radius: var(--rfx-radius-sm);
    font-size: 13px;
    grid-column: 1 / -1;
  }
  .rfx-report__form textarea { resize: vertical; min-block-size: 60px; }
  .rfx-report__submit {
    background: var(--rfx-brand);
    color: #fff;
    padding: 8px 18px;
    border-radius: var(--rfx-radius-sm);
    font-weight: 600;
    font-size: 13px;
    grid-column: 1 / -1;
  }
  .rfx-report__submit:hover { background: var(--rfx-brand-deep); }
  .rfx-shut { display: none !important; }

  /* ---- VI.E. Episodes section ---- */
  .rfx-eps {
    max-inline-size: 1280px;
    margin: 28px auto 0;
    padding-inline: var(--rfx-gut);
  }
  .rfx-eps__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-end: 16px;
  }
  .rfx-eps__head h2 {
    font-family: var(--rfx-display);
    font-size: 22px;
    font-weight: 700;
  }
  .rfx-eps__tools {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  .rfx-eps__find {
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line);
    border-radius: var(--rfx-radius-pill);
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .rfx-eps__find:focus-within { border-color: var(--rfx-brand); }
  .rfx-eps__find input {
    background: none;
    border: 0;
    outline: 0;
    font-size: 13px;
    color: var(--rfx-ink);
    inline-size: 180px;
  }
  .rfx-eps__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
  }
  .rfx-ep {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line);
    border-radius: var(--rfx-radius-md);
    color: var(--rfx-ink);
    text-align: start;
    transition: all .15s var(--rfx-ease);
    cursor: pointer;
  }
  .rfx-ep:hover {
    border-color: var(--rfx-brand);
    background: linear-gradient(135deg, var(--rfx-brand-soft), transparent);
  }
  .rfx-ep__n {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    background: var(--rfx-card-up);
    color: var(--rfx-ink-soft);
    display: grid;
    place-items: center;
    font-family: var(--rfx-display);
    font-weight: 700;
    font-size: 14px;
  }
  .rfx-ep:hover .rfx-ep__n { background: var(--rfx-brand); color: #fff; }
  .rfx-ep__t {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: nowrap;
  }
  .rfx-ep__mute { color: var(--rfx-ink-mute); font-size: 12px; }
  .rfx-ep__cue {
    color: var(--rfx-ink-mute);
    transition: color .15s var(--rfx-ease);
  }
  .rfx-ep:hover .rfx-ep__cue { color: var(--rfx-brand); }
  .rfx-ep--soon {
    cursor: not-allowed;
    opacity: .6;
  }
  .rfx-ep--soon:hover {
    border-color: var(--rfx-line);
    background: var(--rfx-card);
  }
  .rfx-ep--soon .rfx-ep__n { background: var(--rfx-card-up); color: var(--rfx-ink-faint); }
  .rfx-ep--soon:hover .rfx-ep__n { background: var(--rfx-card-up); color: var(--rfx-ink-faint); }
  .rfx-ep.rfx-now {
    border-color: var(--rfx-brand);
    background: var(--rfx-brand-soft);
  }
  .rfx-ep.rfx-now .rfx-ep__n { background: var(--rfx-brand); color: #fff; }

  /* ---- VI.F. Search page ---- */
  .rfx-search-empty {
    max-inline-size: 640px;
    margin: 64px auto;
    padding: 0 var(--rfx-gut);
    text-align: center;
  }
  .rfx-search-empty h1 {
    font-size: clamp(26px, 3vw, 38px);
    margin-block-end: 8px;
  }
  .rfx-search-empty p { color: var(--rfx-ink-soft); margin-block-end: 24px; }
  .rfx-search-types {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-block-start: 14px;
    flex-wrap: wrap;
  }
  .rfx-search-type {
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line);
    color: var(--rfx-ink-soft);
    padding: 6px 16px;
    border-radius: var(--rfx-radius-pill);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s var(--rfx-ease);
  }
  .rfx-search-type:hover { border-color: var(--rfx-brand); color: var(--rfx-ink); }
  .rfx-search-type input { display: none; }
  .rfx-search-type:has(input:checked) {
    background: var(--rfx-brand);
    border-color: var(--rfx-brand);
    color: #fff;
  }
  .rfx-search-results {
    max-inline-size: 1280px;
    margin: 24px auto;
    padding: 0 var(--rfx-gut);
  }
  .rfx-search-meta {
    color: var(--rfx-ink-soft);
    font-size: 14px;
    margin-block-end: 18px;
  }
  .rfx-search-meta strong { color: var(--rfx-ink); }

  /* ---- VI.G. Request form ---- */
  .rfx-req {
    max-inline-size: 720px;
    margin: 32px auto;
    padding: 0 var(--rfx-gut);
  }
  .rfx-req h1 {
    font-size: clamp(28px, 3vw, 38px);
    margin-block-end: 6px;
  }
  .rfx-req__lede { color: var(--rfx-ink-soft); margin-block-end: 24px; }
  .rfx-req__form {
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line);
    border-radius: var(--rfx-radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .rfx-req__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  @media (width < 480px) { .rfx-req__row { grid-template-columns: 1fr; } }
  .rfx-req__group { display: flex; flex-direction: column; gap: 6px; }
  .rfx-req__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--rfx-ink);
  }
  .rfx-req__opt { color: var(--rfx-ink-mute); font-weight: 400; font-size: 11px; }
  .rfx-req__req { color: var(--rfx-brand); }
  .rfx-req__input,
  .rfx-req__select,
  .rfx-req__area {
    background: var(--rfx-card-up);
    border: 1px solid var(--rfx-line-strong);
    color: var(--rfx-ink);
    padding: 10px 14px;
    border-radius: var(--rfx-radius-md);
    font-size: 14px;
    transition: border-color .15s var(--rfx-ease);
  }
  .rfx-req__input:focus,
  .rfx-req__select:focus,
  .rfx-req__area:focus { outline: 0; border-color: var(--rfx-brand); }
  .rfx-req__area { resize: vertical; min-block-size: 90px; font-family: inherit; }
  .rfx-req__alert {
    padding: 12px 16px;
    border-radius: var(--rfx-radius-md);
    font-size: 14px;
    margin-block-end: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .rfx-req__alert--ok { background: rgb(34 139 79 / .15); border: 1px solid rgb(34 139 79 / .4); color: rgb(108 215 153); }
  .rfx-req__alert--err { background: rgb(220 38 38 / .15); border: 1px solid rgb(220 38 38 / .4); color: var(--rfx-brand-light); }
  .rfx-req__submit {
    background: var(--rfx-brand);
    color: #fff;
    padding: 12px 28px;
    border-radius: var(--rfx-radius-md);
    font-weight: 700;
    font-family: var(--rfx-display);
    font-size: 14px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .rfx-req__submit:hover { background: var(--rfx-brand-deep); }

  /* ---- VI.H. Person header ---- */
  .rfx-person {
    max-inline-size: 1280px;
    margin: 32px auto 24px;
    padding: 0 var(--rfx-gut);
  }
  .rfx-person__role {
    display: inline-flex;
    background: var(--rfx-brand-soft);
    color: var(--rfx-brand-light);
    border: 1px solid rgb(220 38 38 / .35);
    padding: 4px 12px;
    border-radius: var(--rfx-radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-block-end: 12px;
  }
  .rfx-person__name {
    font-size: clamp(30px, 4vw, 44px);
    margin-block-end: 8px;
  }
  .rfx-person__lede { color: var(--rfx-ink-soft); max-inline-size: 60ch; margin: 0; }

  /* ---- VI.I. 404 ---- */
  .rfx-404 {
    text-align: center;
    padding: 64px var(--rfx-gut);
    max-inline-size: 640px;
    margin: 0 auto;
  }
  .rfx-404__code {
    font-family: var(--rfx-display);
    font-size: clamp(80px, 14vw, 160px);
    font-weight: 800;
    line-height: 1;
    color: var(--rfx-brand);
    letter-spacing: -.04em;
    margin-block-end: 12px;
  }
  .rfx-404__h { font-size: clamp(24px, 3vw, 32px); margin-block-end: 12px; }
  .rfx-404__p { color: var(--rfx-ink-soft); margin-block-end: 28px; }
  .rfx-404__cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

  /* ---- VI.J. Empty state ---- */
  .rfx-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--rfx-ink-soft);
  }
  .rfx-empty p { margin-block-end: 16px; }

  /* ---- VI.K. Trailer modal ---- */
  .rfx-trailer-veil {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / .9);
    backdrop-filter: blur(10px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .rfx-trailer-veil.rfx-live { display: flex; }
  .rfx-trailer-glass {
    inline-size: 100%;
    max-inline-size: 920px;
    background: var(--rfx-card);
    border: 1px solid var(--rfx-line-strong);
    border-radius: var(--rfx-radius-lg);
    padding: 16px;
    box-shadow: var(--rfx-shadow-lg);
  }
  .rfx-trailer-frame {
    aspect-ratio: 16 / 9;
    background: rgb(0 0 0);
    border-radius: var(--rfx-radius-md);
    overflow: hidden;
    margin-block-start: 12px;
  }
  .rfx-trailer-frame iframe { inline-size: 100%; block-size: 100%; border: 0; }
  .rfx-trailer-x {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--rfx-card-up);
    border: 1px solid var(--rfx-line-strong);
    color: var(--rfx-ink);
    padding: 6px 14px;
    border-radius: var(--rfx-radius-pill);
    font-size: 13px;
  }
  .rfx-trailer-x:hover { border-color: var(--rfx-brand); }

  /* ---- VI.L. TOP 10 row decorative numbers ---- */
  .rfx-top10__num {
    background: var(--rfx-brand);
    color: #fff;
    font-family: var(--rfx-display);
    font-weight: 800;
    font-size: 9px;
    line-height: 1;
    padding: 4px 6px 4px 8px;
  }
  .rfx-top10__num b { display: block; font-size: 14px; letter-spacing: 0; }
}

/* ---------- VII. UTILITIES ---------- */
@layer util {
  .rfx-only-sr {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
}