/* Second-pass art direction for authenticated Relay surfaces. */
body:not(:has(.relay-auth)) {
  background: radial-gradient(900px 620px at 72% -12%, rgb(47 123 255 / .12), transparent 66%), var(--relay-ink);
}
body:not(:has(.relay-auth)) .relay-hero {
  height: min(69vh, 760px); min-height: 540px; max-height: 760px;
  margin: 0; overflow: hidden;
  background: radial-gradient(60% 90% at 78% 34%, rgb(47 123 255 / .12), transparent 70%), var(--relay-navy);
}
body:not(:has(.relay-auth)) .relay-hero__bg { inset: 0 0 0 0; }
body:not(:has(.relay-auth)) .relay-hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 28%;
  opacity: .82; filter: saturate(.9) contrast(1.05);
}
body:not(:has(.relay-auth)) .relay-hero__shade {
  background:
    linear-gradient(90deg, var(--relay-ink) 0%, rgb(7 9 18 / .82) 25%, rgb(7 9 18 / .26) 63%, rgb(7 9 18 / .1) 100%),
    linear-gradient(180deg, rgb(7 9 18 / .04) 38%, rgb(7 9 18 / .38) 68%, var(--relay-ink) 100%);
}
body:not(:has(.relay-auth)) .relay-hero__content {
  max-width: 1500px; margin: 0; padding: 0 7vw 5.25rem 6vw; justify-content: flex-end;
}
body:not(:has(.relay-auth)) .relay-hero__title {
  max-width: 700px; margin-bottom: 1rem; color: var(--relay-white);
  font-family: var(--relay-font-sans); font-size: clamp(2.8rem, 5.4vw, 6rem);
  font-weight: 800; letter-spacing: -.065em; line-height: .98; text-shadow: 0 10px 40px rgb(0 0 0 / .4);
}
body:not(:has(.relay-auth)) .relay-hero__meta {
  gap: 1rem; margin-bottom: .9rem; color: var(--relay-silver); font-size: .86rem; font-weight: 600;
}
body:not(:has(.relay-auth)) .relay-hero__meta span + span::before { content: "·"; margin-right: 1rem; color: #6e7890; }
body:not(:has(.relay-auth)) .relay-hero__synopsis {
  max-width: 520px; margin: 0; color: #c2c8d7; font-size: .98rem; line-height: 1.65;
}
body:not(:has(.relay-auth)) .relay-hero__actions { gap: .7rem; margin-top: 1.55rem; }
body:not(:has(.relay-auth)) .relay-hero__actions .relay-btn {
  min-height: 48px; padding: 0 1.35rem; border-radius: 8px; box-shadow: 0 12px 28px rgb(0 0 0 / .25);
}
body:not(:has(.relay-auth)) .relay-hero__actions .relay-btn--primary { background: var(--relay-white); color: var(--relay-ink); }
body:not(:has(.relay-auth)) .relay-hero__actions .relay-btn--secondary { border: 1px solid rgb(247 248 252 / .3); background: rgb(7 9 18 / .34); color: var(--relay-white); }
body:not(:has(.relay-auth)) .relay-section {
  position: relative; z-index: 2; max-width: 1500px; margin: 0; padding: 1.7rem 6vw 0;
}
body:not(:has(.relay-auth)) .relay-section__head { margin-bottom: .9rem; }
body:not(:has(.relay-auth)) .relay-section__title { font-family: var(--relay-font-sans); font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; }
body:not(:has(.relay-auth)) .relay-nav__link { color: transparent; }
body:not(:has(.relay-auth)) .relay-nav__link::before { content: none; }
body:not(:has(.relay-auth)) .relay-nav__icon { position: absolute; left: 16px; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: #71809f; }
body:not(:has(.relay-auth)) .relay-nav__link:hover .relay-nav__icon,
body:not(:has(.relay-auth)) .relay-nav__link.active .relay-nav__icon { color: var(--relay-blue); }
body:not(:has(.relay-auth)) .relay-nav__link > span { opacity: 0; transition: opacity .16s ease; }
body:not(:has(.relay-auth)) .relay-nav__link::after {
  content: attr(aria-label); left: calc(100% + 12px); top: 50%; right: auto; bottom: auto;
  width: max-content; height: auto; padding: 8px 10px; border: 1px solid rgb(217 219 226 / .14);
  border-radius: 6px; background: #11172a; color: var(--relay-white); font: 600 .72rem/1 var(--relay-font-sans);
  opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(-4px);
  box-shadow: 0 10px 24px rgb(0 0 0 / .35); transition: opacity .16s ease, transform .16s ease;
}
body:not(:has(.relay-auth)) .relay-nav__link:hover::after,
body:not(:has(.relay-auth)) .relay-nav__link:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }
body:not(:has(.relay-auth)) .relay-nav__link.active { color: transparent; box-shadow: inset 2px 0 var(--relay-blue); }
body:not(:has(.relay-auth)) .relay-header:hover .relay-nav__link,
body:not(:has(.relay-auth)) .relay-header:focus-within .relay-nav__link { color: #8e96aa; }
body:not(:has(.relay-auth)) .relay-header:hover .relay-nav__link > span,
body:not(:has(.relay-auth)) .relay-header:focus-within .relay-nav__link > span { opacity: 1; }
body:not(:has(.relay-auth)) .relay-header:hover .relay-nav__link.active,
body:not(:has(.relay-auth)) .relay-header:focus-within .relay-nav__link.active { color: var(--relay-white); box-shadow: inset 2px 0 var(--relay-blue); }
body:not(:has(.relay-auth)) .relay-header:hover .relay-nav__link::after,
body:not(:has(.relay-auth)) .relay-header:focus-within .relay-nav__link::after { content: attr(aria-label); }
body:not(:has(.relay-auth)) .relay-nav__link:hover::before,
body:not(:has(.relay-auth)) .relay-nav__link.active::before { color: var(--relay-blue); opacity: 1; }
body:not(:has(.relay-auth)) .relay-companion-text { width: 0; opacity: 0; overflow: hidden; }
body:not(:has(.relay-auth)) .relay-header:hover .relay-companion-text,
body:not(:has(.relay-auth)) .relay-header:focus-within .relay-companion-text { width: auto; opacity: 1; }
/* The rail is intentionally compact; labels are per-item flyouts, never a
   full drawer that can cover hero copy. */
body:not(:has(.relay-auth)) .relay-header,
body:not(:has(.relay-auth)) .relay-header:hover,
body:not(:has(.relay-auth)) .relay-header:focus-within { width: var(--relay-rail-width); box-shadow: none; }
body:not(:has(.relay-auth)) .relay-nav__link > span,
body:not(:has(.relay-auth)) .relay-companion-text { opacity: 0; width: 0; }
body:not(:has(.relay-auth)) .relay-header:hover .relay-nav__link > span,
body:not(:has(.relay-auth)) .relay-header:focus-within .relay-nav__link > span,
body:not(:has(.relay-auth)) .relay-header:hover .relay-companion-text,
body:not(:has(.relay-auth)) .relay-header:focus-within .relay-companion-text { opacity: 0; width: 0; }
body:not(:has(.relay-auth)) .relay-row { gap: 1rem; padding-bottom: 1.5rem; }
body:not(:has(.relay-auth)) .relay-card { width: 172px; }
body:not(:has(.relay-auth)) .relay-card__poster { width: 172px; height: 258px; border-radius: 9px; background: #10172a; box-shadow: 0 14px 28px rgb(0 0 0 / .3); }

/* Premium media pass: keep the approved rail compact while giving content the full canvas. */
body:not(:has(.relay-auth)) .relay-section,
body:not(:has(.relay-auth)) .relay-grid,
body:not(:has(.relay-auth)) .relay-search,
body:not(:has(.relay-auth)) .relay-sources,
body:not(:has(.relay-auth)) .relay-detail { width:100%; max-width:none; }
body:not(:has(.relay-auth)) .relay-section { padding-left:clamp(2rem,4vw,5rem); padding-right:clamp(2rem,4vw,5rem); }
body:not(:has(.relay-auth)) .relay-row { width:100%; display:flex; gap:clamp(.8rem,1vw,1.15rem); }
body:not(:has(.relay-auth)) .relay-section__rail { position:relative; }
body:not(:has(.relay-auth)) .relay-row__control { position:absolute; top:42%; z-index:4; width:38px; height:56px; border:1px solid rgb(217 219 226 / .18); border-radius:8px; background:rgb(9 13 26 / .9); color:#f7f8fc; display:grid; place-items:center; opacity:0; transform:translateY(-50%); transition:opacity .18s ease,background .18s ease; box-shadow:0 10px 26px rgb(0 0 0 / .28); }
body:not(:has(.relay-auth)) .relay-section__rail:hover .relay-row__control,
body:not(:has(.relay-auth)) .relay-row__control:focus-visible { opacity:1; }
body:not(:has(.relay-auth)) .relay-row__control:hover { background:#172341; }
body:not(:has(.relay-auth)) .relay-row__control[hidden] { display:none; }
body:not(:has(.relay-auth)) .relay-row__control--prev { left:-12px; }
body:not(:has(.relay-auth)) .relay-row__control--next { right:-12px; }
body:not(:has(.relay-auth)) .relay-row__control svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body:not(:has(.relay-auth)) .relay-card { flex:0 0 clamp(150px,9vw,180px); width:clamp(150px,9vw,180px); min-width:0; }
body:not(:has(.relay-auth)) .relay-card__poster { width:100%; aspect-ratio:2/3; height:auto; }
body:not(:has(.relay-auth)) .relay-hero { height:clamp(560px,68vh,740px); min-height:560px; }
body:not(:has(.relay-auth)) .relay-hero__slide { position:absolute; inset:0; opacity:0; transition:opacity 900ms cubic-bezier(.22,.61,.36,1); pointer-events:none; }
body:not(:has(.relay-auth)) .relay-hero__slide.is-active { opacity:1; pointer-events:auto; }
body:not(:has(.relay-auth)) .relay-hero__bg img { opacity:1; filter:saturate(1.05) contrast(1.08); }
body:not(:has(.relay-auth)) .relay-hero__bg { position:absolute; inset:0; z-index:0; opacity:1; overflow:hidden; }
body:not(:has(.relay-auth)) .relay-hero__backdrop { position:absolute; inset:0; z-index:0; display:block; visibility:visible; width:100%; height:100%; object-fit:cover; object-position:center 28%; opacity:1; filter:none; }
body:not(:has(.relay-auth)) .relay-hero__slide { isolation:isolate; }
body:not(:has(.relay-auth)) .relay-hero__shade { z-index:1; opacity:1; }
body:not(:has(.relay-auth)) .relay-hero__content { position:relative; z-index:2; }
body:not(:has(.relay-auth)) .relay-hero__shade { background:linear-gradient(90deg,#070912 0%,rgb(7 9 18 / .68) 22%,rgb(7 9 18 / .12) 58%,rgb(7 9 18 / .02) 100%),linear-gradient(0deg,#070912 0%,transparent 42%,rgb(7 9 18 / .08) 100%); }
body:not(:has(.relay-auth)) .relay-hero__eyebrow { color:#aab8ff; letter-spacing:.18em; font-size:.68rem; font-weight:700; text-transform:uppercase; margin:0 0 1rem; }
body:not(:has(.relay-auth)) .relay-hero__actions .relay-btn svg { width:18px; height:18px; fill:currentColor; stroke:currentColor; stroke-width:1.7; }
body:not(:has(.relay-auth)) .relay-hero__actions .relay-btn--secondary svg { fill:none; }
body:not(:has(.relay-auth)) .relay-hero__fallback { position:absolute; inset:0; background:radial-gradient(circle at 72% 28%,rgb(67 73 157 / .48),transparent 42%),linear-gradient(120deg,#0b1025,#141b43 52%,#101327); }
body:not(:has(.relay-auth)) .relay-hero__control { position:absolute; right:clamp(2rem,4vw,4.5rem); bottom:2rem; z-index:5; width:38px; height:38px; border:1px solid rgb(247 248 252 / .22); border-radius:50%; background:rgb(7 9 18 / .42); color:#f7f8fc; display:grid; place-items:center; }
body:not(:has(.relay-auth)) .relay-hero__control--prev { right:calc(clamp(2rem,4vw,4.5rem) + 50px); }
body:not(:has(.relay-auth)) .relay-hero__control:hover { background:rgb(47 123 255 / .28); }
body:not(:has(.relay-auth)) .relay-hero__control svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body:not(:has(.relay-auth)) .relay-nav__link::after,
body:not(:has(.relay-auth)) .relay-companion-btn::after,
body:not(:has(.relay-auth)) .relay-avatar-btn::after { z-index:80; }
body:not(:has(.relay-auth)) .relay-companion-btn,
body:not(:has(.relay-auth)) .relay-avatar-btn { position:relative; }
body:not(:has(.relay-auth)) .relay-companion-btn::after,
body:not(:has(.relay-auth)) .relay-avatar-btn::after { content:attr(aria-label); position:absolute; left:calc(100% + 14px); top:50%; transform:translateY(-50%) translateX(-4px); opacity:0; pointer-events:none; white-space:nowrap; padding:.5rem .7rem; border:1px solid rgb(154 169 235 / .2); border-radius:7px; background:#131a30; color:#edf0ff; box-shadow:0 12px 30px rgb(0 0 0 / .35); font:600 .72rem/1 var(--relay-font-sans,sans-serif); transition:opacity .16s ease,transform .16s ease; }
body:not(:has(.relay-auth)) .relay-companion-btn:hover::after,
body:not(:has(.relay-auth)) .relay-companion-btn:focus-visible::after,
body:not(:has(.relay-auth)) .relay-avatar-btn:hover::after,
body:not(:has(.relay-auth)) .relay-avatar-btn:focus-visible::after { opacity:1; transform:translateY(-50%) translateX(0); }
@media (prefers-reduced-motion:reduce){body:not(:has(.relay-auth)) .relay-hero__slide,body:not(:has(.relay-auth)) .relay-companion-btn::after,body:not(:has(.relay-auth)) .relay-avatar-btn::after{transition:none}}
@media (max-width:700px){body:not(:has(.relay-auth)) .relay-section{padding-left:1rem;padding-right:1rem}body:not(:has(.relay-auth)) .relay-hero{height:540px;min-height:540px}body:not(:has(.relay-auth)) .relay-hero__content{left:1.25rem;right:1.25rem;bottom:2.5rem}}
body:not(:has(.relay-auth)) .relay-card__poster img { font-size: 0; color: transparent; }
body:not(:has(.relay-auth)) .relay-card__poster::after { border-color: rgb(217 219 226 / .13); }
body:not(:has(.relay-auth)) .relay-card__poster.is-fallback { background: radial-gradient(circle at 70% 20%, rgb(90 75 255 / .28), transparent 45%), linear-gradient(145deg, #17213d, #0b1020 70%); }
body:not(:has(.relay-auth)) .relay-card__poster.is-fallback::before { content: "RELAY"; position: absolute; inset: 0; display: grid; place-items: center; color: rgb(247 248 252 / .52); font: 700 .65rem var(--relay-font-sans); letter-spacing: .24em; }
body:not(:has(.relay-auth)) .relay-card__title { margin-top: .65rem; color: var(--relay-white); font-weight: 600; }
body:not(:has(.relay-auth)) .relay-card__meta { color: #8e96aa; }
body:not(:has(.relay-auth)) .relay-card:hover { transform: translateY(-5px) scale(1.025); }

@media (max-width: 900px) {
  body:not(:has(.relay-auth)) .relay-hero { min-height: 500px; height: 64vh; }
  body:not(:has(.relay-auth)) .relay-hero__content { padding: 0 5vw 4.25rem; }
  body:not(:has(.relay-auth)) .relay-hero__title { font-size: clamp(2.6rem, 8vw, 4.8rem); }
  body:not(:has(.relay-auth)) .relay-section { padding-inline: 5vw; }
}
@media (max-width: 720px) {
  body:not(:has(.relay-auth)) .relay-nav__link,
  body:not(:has(.relay-auth)) .relay-nav__link.active { color: #8e96aa; box-shadow: none; }
  body:not(:has(.relay-auth)) .relay-nav__link.active { color: var(--relay-white); }
  body:not(:has(.relay-auth)) .relay-nav__link > span { opacity: 1; width: auto; }
  body:not(:has(.relay-auth)) .relay-nav__icon { left: 50%; top: 5px; width: 20px; height: 20px; transform: translateX(-50%); }
  body:not(:has(.relay-auth)) .relay-nav__link::after,
  body:not(:has(.relay-auth)) .relay-nav__link:hover::after,
  body:not(:has(.relay-auth)) .relay-nav__link:focus-visible::after { content: ""; opacity: 0; }
  body:not(:has(.relay-auth)) .relay-companion-btn::after,
  body:not(:has(.relay-auth)) .relay-avatar-btn::after { content: none; }
  body:not(:has(.relay-auth)) .relay-hero { min-height: 490px; height: 64svh; }
  body:not(:has(.relay-auth)) .relay-hero__bg img { object-position: 58% 26%; }
  body:not(:has(.relay-auth)) .relay-hero__shade { background: linear-gradient(180deg, rgb(7 9 18 / .08) 28%, rgb(7 9 18 / .5) 62%, var(--relay-ink) 100%); }
  body:not(:has(.relay-auth)) .relay-hero__content { padding: 0 1.25rem 3.25rem; }
  body:not(:has(.relay-auth)) .relay-section { padding-inline: 1.25rem; }
  body:not(:has(.relay-auth)) .relay-card { width: 142px; }
  body:not(:has(.relay-auth)) .relay-card__poster { width: 142px; height: 213px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.relay-auth)) .relay-card { transition: none; }
}