/* ════════════════════════════════════════════════════════════
   SEASON WORLDS — the multi-season colour layer
   Loaded LAST, after system.css. Purely additive infrastructure.

   A "world" is nine role-named values. Worlds are keyed on
   [data-world] (not a body class) so several can coexist — an
   island in a page, four cards in one archive rail. Each world
   ALSO re-points the legacy --aq-* names at its --s-* values, so
   every shipped .mode-aq-* / var(--aq-*) consumer keeps working
   and resolves to whatever world it sits inside.

     <div data-world="spotlight">   Season One (rouge)
     <section data-world="aquatic">  Season Two (teal)
     <div data-world="house">        the franchise (linen/ink/red)

   Per-season worlds (spotlight, aquatic, …) are EMITTED FROM SANITY
   in <head> (see components/SeasonWorldStyles) so colours are
   defined per season in Studio. HOUSE is fixed and lives here.
   ════════════════════════════════════════════════════════════ */

/* ── HOUSE · the franchise itself (fixed, not a season) ─────── */
[data-world="house"] {
  --s-name: "House";
  --s-wash: #F5EFE6; --s-pale: #EDE5D8; --s-mid: #C41E3A;
  --s-deep: #1C1C1E; --s-deeper: #0E0E10; --s-ink: #0E0E10;
  --s-ink-mid: #57575E; --s-shadow: 14 14 16; --s-grade: saturate(.92);
}

/* ── SEASON WORLDS · fallbacks ───────────────────────────────
   These match production today so nothing breaks if the Sanity
   <style> is absent (dev, first paint). Sanity overrides them
   with the same or edited values, later in the cascade. */
[data-world="spotlight"] {
  --s-name: "Spotlight";
  --s-wash: #FBF0F1; --s-pale: #F0D8DC; --s-mid: #C41E3A;
  --s-deep: #6B0F20; --s-deeper: #2C060C; --s-ink: #1A0506;
  --s-ink-mid: #5C1422; --s-shadow: 44 6 12;
  --s-grade: hue-rotate(6deg) saturate(.95);
}
[data-world="aquatic"] {
  --s-name: "Aquatic";
  --s-wash: #E8F6FA; --s-pale: #D0EDF4; --s-mid: #4CA8C2;
  --s-deep: #1B5F72; --s-deeper: #103D4A; --s-ink: #0D3240;
  --s-ink-mid: #2A7A92; --s-shadow: 8 34 43;
  --s-grade: hue-rotate(-12deg) saturate(.7);
}

/* ── LEGACY BRIDGE ───────────────────────────────────────────
   Every shipped .mode-aq-* / --aq-* consumer resolves against
   the nearest world instead of the old body class. */
[data-world] {
  --aq-wash: var(--s-wash); --aq-pale: var(--s-pale);
  --aq-mid: var(--s-mid); --aq-deep: var(--s-deep);
  --aq-deeper: var(--s-deeper); --aq-ink: var(--s-ink);
  --aq-ink-mid: var(--s-ink-mid);
}

/* ── GROUND MODES (role-named) ───────────────────────────────
   New name for the aquatic-named modes; both work during the
   transition (.mode-aq-* resolve via the bridge above). */
.mode-s-wash   { background: var(--s-wash);   color: var(--s-ink); }
.mode-s-pale   { background: var(--s-pale);   color: var(--s-ink); }
.mode-s-mid    { background: var(--s-mid);    color: #fff; }
.mode-s-deep   { background: var(--s-deep);   color: var(--s-wash); }
.mode-s-deeper { background: var(--s-deeper); color: var(--s-wash); }

/* ── PHOTO GRADE HELPERS ─────────────────────────────────────
   Per-world colour grade on cinematic media. */
.s-graded      { filter: contrast(1.05) brightness(.72) var(--s-grade); }
.s-graded-soft { filter: contrast(1.03) brightness(.86) var(--s-grade); }

/* ── STATE SWITCHES ──────────────────────────────────────────
   One season document, two renderings. status shows/hides the
   airing-only vs complete-only pieces (verdict, ticket vs pointer). */
[data-status="airing"]   .only-complete { display: none; }
[data-status="complete"] .only-airing   { display: none; }

/* ── THE SEASON CHIP ─────────────────────────────────────────
   Inherits --s-mid, so it is correct in every world with zero
   per-season CSS. Airing pulses; complete is quiet; soon is hollow. */
.s-chip {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  font-family: var(--sans); font-weight: 500; font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  white-space: nowrap; border-radius: 999px; padding: 8px 16px;
  color: var(--s-ink);
  background: color-mix(in srgb, var(--s-mid) 10%, transparent);
  border: .5px solid color-mix(in srgb, var(--s-mid) 42%, transparent);
}
.s-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--s-mid); flex: none;
}
.mode-s-deep .s-chip, .mode-s-deeper .s-chip, .s-chip.on-dark {
  color: var(--s-wash); background: rgb(var(--s-shadow) / .34);
  border-color: color-mix(in srgb, var(--s-wash) 38%, transparent);
}
.mode-s-deep .s-chip::before, .mode-s-deeper .s-chip::before,
.s-chip.on-dark::before { background: var(--s-wash); }
.s-chip.is-airing::before {
  box-shadow: 0 0 12px currentColor;
  animation: s-chip-pulse 2.4s ease-in-out infinite;
}
.s-chip.is-complete::before { opacity: .45; box-shadow: none; }
.s-chip.is-soon::before { background: transparent; border: 1px solid currentColor; }
@keyframes s-chip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .s-chip.is-airing::before { animation: none; } }

/* Arabic: connected script — no tracking on the chip/strip. */
[dir="rtl"] .s-chip { letter-spacing: 0; }

/* ── THE SEASONS · the franchise archive (on /show) ──────────
   House ink ground; each .hb-card carries its own [data-world]
   so it wears that season's accent with zero per-season CSS. */
.hb-arc { padding: clamp(72px, 12vh, 150px) var(--pad-page); background: var(--ink); color: var(--linen); }
.hb-arc-header { margin-bottom: clamp(32px, 5vh, 60px); }
/* has-reel: the wrap controls horizontal alignment (to the 1320 grid), so the
   section drops its own inline padding. reel.css sets the #000 ground. */
.hb-arc.has-reel { padding-inline: 0; }
/* Full-width, page-gutter aligned — matches the hero / provocations / bridge,
   so "The Seasons" starts at the same left edge as the rest of the page. */
.hb-wrap { max-width: none; margin: 0; padding-inline: var(--pad-page); }
.hb-arc.has-reel .hb-wrap { margin-bottom: clamp(24px, 4vh, 44px); }
.hb-head { display: flex; flex-direction: column; gap: 10px; }
.hb-note {
  font-family: var(--serif); font-style: italic; font-weight: 200; font-size: var(--t-dek);
  color: color-mix(in srgb, var(--linen) 58%, transparent); margin: 6px 0 0; max-width: 46ch;
}
[dir="rtl"] .hb-note { font-style: normal; font-weight: 400; }
.hb-arc-h {
  font-family: var(--sans); font-weight: 200; font-size: var(--t-section);
  line-height: 0.96; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--linen); margin: 0;
}
[dir="rtl"] .hb-arc-h { text-transform: none; letter-spacing: 0; font-weight: 300; }
.hb-arc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
/* One complete season = one intentional wide card, not a stretched
   full-bleed slab (handoff §2.2: never auto-fit an orphan cell). */
.hb-arc.is-single .hb-arc-grid { grid-template-columns: minmax(0, 640px); }
.hb-arc.is-single .hb-card { aspect-ratio: auto; min-height: clamp(220px, 30vw, 300px); }
.hb-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: clamp(24px, 3vw, 40px);
  text-decoration: none; border-radius: 4px;
  background: linear-gradient(150% 130% at 82% 4%,
    color-mix(in srgb, var(--s-mid) 22%, transparent) 0%,
    color-mix(in srgb, var(--s-deep) 30%, transparent) 40%, transparent 78%),
    rgb(var(--s-shadow) / 0.30);
  border: 0.5px solid color-mix(in srgb, var(--s-mid) 34%, transparent);
  transition: border-color 0.2s, background 0.2s;
}
.hb-card:hover { border-color: color-mix(in srgb, var(--s-mid) 68%, transparent); }
.hb-card-num {
  font-family: var(--sans); font-weight: 500; font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: color-mix(in srgb, var(--linen) 60%, transparent); margin-top: 6px;
}
[dir="rtl"] .hb-card-num { letter-spacing: 0; }
.hb-card-title {
  font-family: var(--sans); font-weight: 200; font-size: clamp(30px, 3.4vw, 48px);
  line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--linen); margin: 0;
}
.hb-card-title em { font-family: var(--serif); font-style: italic; font-weight: 200; text-transform: none; }
[dir="rtl"] .hb-card-title { text-transform: none; letter-spacing: 0; font-weight: 300; }
.hb-card-tag {
  font-family: var(--serif); font-style: italic; font-weight: 200;
  font-size: var(--t-sub); color: color-mix(in srgb, var(--linen) 82%, transparent);
}
[dir="rtl"] .hb-card-tag { font-style: normal; }
.hb-card-count {
  font-family: var(--sans); font-weight: 400; font-size: var(--t-meta);
  color: color-mix(in srgb, var(--linen) 52%, transparent);
}

/* ── NOW AIRING · the airing season's island ─────────────────
   A LIGHT section wrapping ONE full-bleed cinematic card (the same
   video style as .show-duets-feature): video fills the frame, a
   bottom-weighted vignette, [E0n] + status chip up top, the lockup
   title overlaid at the foot. The featured card = newest live
   episode, or (pre-launch) the next upcoming episode as a dated
   teaser. The schedule rows below sit on the light ground. */
.na { background: var(--s-wash); color: var(--s-ink); }
.na-feature {
  position: relative; display: block; text-decoration: none; color: #fff;
  min-height: clamp(560px, 86vh, 960px);
  margin-inline: calc(50% - 50vw); width: 100vw;
  overflow: hidden; background: #000;
}
.na-feature-media { position: absolute; inset: 0; }
.na-feature-img, .na-feature-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: var(--s-grade); transition: transform 0.5s;
}
.na-feature:hover .na-feature-img, .na-feature:hover .na-feature-video { transform: scale(1.02); }
.na-feature-placeholder {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 78% 8%, color-mix(in srgb, var(--s-mid) 30%, transparent) 0%, transparent 60%), var(--s-deeper);
}
.na-feature-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgb(var(--s-shadow) / 0.5) 0%, transparent 28%, transparent 46%, rgb(var(--s-shadow) / 0.94) 100%);
}
.na-feature-num {
  position: absolute; top: clamp(20px,3vh,36px); left: clamp(22px,3vw,48px); z-index: 2;
  font-family: var(--sans); font-weight: 500; font-size: var(--t-meta);
  letter-spacing: 0.12em; color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums;
}
[dir="rtl"] .na-feature-num { left: auto; right: clamp(22px,3vw,48px); letter-spacing: 0; }
/* Upcoming badge — the chip at top-right (where a live card shows its status). */
.na-badge {
  position: absolute; top: clamp(20px,3vh,36px); right: clamp(22px,3vw,48px); z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 500; font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: #fff;
  background: rgb(var(--s-shadow) / 0.42); backdrop-filter: blur(6px);
  border: 0.5px solid rgba(255,255,255,0.4); border-radius: 999px; padding: 8px 15px;
}
[dir="rtl"] .na-badge { right: auto; left: clamp(22px,3vw,48px); letter-spacing: 0; }
.na-play {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: clamp(64px,7vw,92px); height: clamp(64px,7vw,92px); border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.7); display: grid; place-items: center;
  background: rgba(0,0,0,0.18); color: #fff; font-size: 22px; padding-left: 5px;
  transition: background-color .25s, transform .25s;
}
.na-feature:hover .na-play { background: rgba(0,0,0,0.34); transform: translate(-50%,-50%) scale(1.06); }
.na-feature-body {
  position: absolute; left: clamp(22px,3vw,56px); right: clamp(22px,3vw,56px);
  bottom: clamp(28px,4vh,52px); z-index: 2;
  display: flex; flex-direction: column; gap: 12px;
}
.na-kicker {
  font-family: var(--sans); font-weight: 500; font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.86);
}
[dir="rtl"] .na-kicker { letter-spacing: 0; }
.na-feature-eyebrow {
  font-family: var(--serif); font-style: italic; font-weight: 200;
  font-size: clamp(20px,2.2vw,34px); color: rgba(255,255,255,0.88);
}
[dir="rtl"] .na-feature-eyebrow { font-style: normal; font-weight: 500; }
.na-feature-title {
  font-family: var(--sans); font-weight: 200; text-transform: uppercase;
  font-size: clamp(48px,8vw,116px); line-height: 0.88; letter-spacing: -0.025em;
  color: #fff; margin: 0;
}
[dir="rtl"] .na-feature-title { text-transform: none; letter-spacing: 0; font-weight: 300; }
.na-feature-guest {
  font-family: var(--sans); font-weight: 300; font-size: clamp(15px,1.3vw,19px);
  color: rgba(255,255,255,0.82);
}
.na-feature-cta {
  margin-top: 4px; font-family: var(--sans); font-weight: 500;
  font-size: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: #fff;
}
[dir="rtl"] .na-feature-cta { letter-spacing: 0; }
.na-feature:hover .na-feature-cta { text-decoration: underline; text-underline-offset: 4px; }

/* schedule list — on the light section ground, below the card */
.na-list { padding: clamp(40px, 6vh, 80px) var(--pad-page) clamp(56px, 9vh, 120px); border-top: 0; }
.na-list-label {
  font-family: var(--sans); font-weight: 500; font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: color-mix(in srgb, var(--s-ink) 55%, transparent); margin: clamp(20px, 3vh, 32px) 0 clamp(12px, 2vh, 20px);
}
[dir="rtl"] .na-list-label { letter-spacing: 0; }
.na-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline;
  gap: 8px clamp(16px, 2.5vw, 36px); text-decoration: none;
  padding: clamp(16px, 2.4vh, 26px) 0; border-top: 0.5px solid color-mix(in srgb, var(--s-ink) 12%, transparent);
  color: color-mix(in srgb, var(--s-ink) 78%, transparent); transition: color 0.2s;
}
.na-row.is-live:hover { color: var(--s-ink); }
.na-row-num { font-family: var(--sans); font-weight: 500; font-size: var(--t-eyebrow);
  letter-spacing: 0.08em; color: color-mix(in srgb, var(--s-ink) 55%, transparent); }
.na-row-title { font-family: var(--sans); font-weight: 300; font-size: var(--t-sub); color: var(--s-ink); min-width: 0; }
.na-row-eyebrow { font-family: var(--serif); font-style: italic; font-weight: 200; color: color-mix(in srgb, var(--s-ink) 66%, transparent); margin-inline-end: 0.3em; }
[dir="rtl"] .na-row-eyebrow { font-style: normal; font-weight: 500; }
.na-row-guest { font-family: var(--sans); font-weight: 400; font-size: var(--t-meta);
  color: color-mix(in srgb, var(--s-ink) 55%, transparent); white-space: nowrap; }
.na-row-date { font-family: var(--sans); font-weight: 500; font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: color-mix(in srgb, var(--s-ink) 62%, transparent); white-space: nowrap; }
[dir="rtl"] .na-row-date { letter-spacing: 0; }
@media (max-width: 820px) {
  .na-feature { grid-template-columns: 1fr; gap: 18px; }
  .na-row { grid-template-columns: auto 1fr; }
  .na-row-guest, .na-row-date { grid-column: 2; }
}

/* ── SP-UP · the "next up" schedule row ──────────────────────
   Ground-agnostic (currentColor borders, --s-mid accent on the
   .is-next date) so it reads on house linen, teal wash, anywhere.
   Ported from the Season 2 design handoff. Used in the Home foot
   band (one row) and available to season/hub schedules. */
.sp-up { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: baseline; column-gap: clamp(16px, 3vw, 46px); row-gap: 6px; padding: clamp(15px, 2vw, 24px) 0; border-top: .5px solid rgb(from currentColor r g b / .16); }
.sp-up-num { font-family: var(--sans); font-weight: 500; font-size: var(--t-eyebrow); letter-spacing: .1em; font-variant-numeric: tabular-nums; opacity: .5; }
.sp-up-num::before { content: '['; opacity: .6; }
.sp-up-num::after { content: ']'; opacity: .6; }
.sp-up-t { display: block; }
.sp-up-eye { display: inline; margin-inline-end: .42em; font-family: var(--serif); font-style: italic; font-weight: 200; font-size: var(--t-card); opacity: .62; }
[dir="rtl"] .sp-up-eye { font-style: normal; font-weight: 500; }
.sp-up-h { display: inline; font-family: var(--sans); font-weight: 300; font-size: var(--t-card); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
[dir="rtl"] .sp-up-h { text-transform: none; letter-spacing: 0; }
.sp-up-date { font-family: var(--mono); font-size: var(--t-fine); letter-spacing: .05em; opacity: .55; white-space: nowrap; }
.sp-up-guest { font-family: var(--sans); font-weight: 400; font-size: var(--t-fine); opacity: .55; white-space: nowrap; }
.sp-up.is-next .sp-up-h { opacity: 1; }
.sp-up.is-next .sp-up-date { opacity: .9; }

/* ── 02 THE SEASON STRIP · the page's one saturated band ──────
   The single --s-mid band on /show, directly under the ink hero:
   the world starts here. Ink type (white on mid fails contrast). */
.sh-strip { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px clamp(18px, 3vw, 40px); padding: clamp(15px, 2.2vh, 26px) clamp(20px, 5vw, 80px); font-family: var(--sans); font-weight: 500; font-size: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; background: var(--s-mid); color: var(--s-ink); }
.sh-strip a { color: inherit; text-decoration: none; border-bottom: .5px solid color-mix(in srgb, var(--s-ink) 45%, transparent); padding-bottom: 2px; }
.sh-strip a:hover { border-bottom-color: var(--s-ink); }
[dir="rtl"] .sh-strip { letter-spacing: 0; }

/* ── THE PROVOCATIONS, IN A LIGHT WORLD ──────────────────────
   The shipped slab hardcodes white type for a saturated ground.
   is-light re-points those declarations at the world's ink;
   nothing else about the section changes. Ported from the
   Season 2 design handoff. */
.show-duets-title.is-light { background: var(--s-pale); color: var(--s-ink); }
.show-duets-title.is-light::before { color: color-mix(in srgb, var(--s-mid) 9%, transparent); }
.show-duets-title.is-light .duets-title-lockup,
.show-duets-title.is-light .duets-title-lockup .lockup-caret,
.show-duets-title.is-light .duets-chapter-word .lead { color: var(--s-ink); }
.show-duets-title.is-light .duets-title-note,
.show-duets-title.is-light .duets-spine-lead { color: color-mix(in srgb, var(--s-ink) 74%, transparent); }
.show-duets-title.is-light .duets-chapter-word { color: color-mix(in srgb, var(--s-ink) 64%, transparent); }
.show-duets-title.is-light .duets-chapter-sub { color: var(--s-deep); }
.show-duets-title.is-light .duets-spine { border-top-color: color-mix(in srgb, var(--s-ink) 18%, transparent); }