/* /show/:slug on the X stage (DoubloonWeb.Projects.ShowX). J's tokens and
   type; the X pieces (screen, credits panel) come from project_x.css inside
   .px-root.px-jc islands, the tiles from shows_j.css; the tabs strip, the
   slim bar and the title block are this file's. Top to bottom at every
   width: the screen, its tabs, the bar, the title block, the buttons.
   From 1024 px: the credits panel beside them. Below that: the five seats in
   a band under the site header, one at a time. */

.ssx {
  --s-bg: #07070f;
  --s-surface: #0f0f1e;
  --s-surface-2: #17172c;
  --s-line: rgba(242, 237, 228, 0.13);
  --s-line-2: rgba(242, 237, 228, 0.26);
  --s-text: #f2ede4;
  --s-gold: #f5c518;
  --s-ink: #1a1300;
  --s-green: #21e458;
  --s-red: #ff5a4f;
  /* The page's side gutter; the block (screen, tabs, bar) bleeds across it on
     phones. --ssx-w is the stage's width: none on phones, sized by the window
     from 720 px (below). */
  --ssx-gut: 16px;
  --ssx-w: none;

  background: var(--s-bg);
  color: var(--s-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 0 var(--ssx-gut) 56px;
  /* Its own stacking layer, under the site header: the screen's pill tabs
     (z-index 20 in project_x.css) and the credits band stay beneath the
     header's menu (also z-20) instead of drawing over it. */
  isolation: isolate;
}
.ssx :where(*, *::before, *::after) { box-sizing: border-box; }
.ssx [x-cloak] { display: none !important; }
.ssx :where(ul, ol) { list-style: none; margin: 0; padding: 0; }

/* X islands: project_x.css styles their insides; the page owns the box. */
.ssx .px-root.ssx-px { min-height: 0; background: transparent; }
/* The Verified tooltip only takes up room while it's open: hidden, its 262px
   box still widened the phone page. */
.ssx .px-root .px-vb:not(:focus-within) .px-vb-tip { display: none; }

/* ── The screen's panes (Info, Backers, Artist, LOOR) ── */
/* No scrollbar inside the screen, and text scrolled up fades out before it
   reaches the pill tabs. */
.ssx .px-root .px-info-scroll,
.ssx .px-root .px-roll { scrollbar-width: none; }
.ssx .px-root .px-info-scroll::-webkit-scrollbar,
.ssx .px-root .px-roll::-webkit-scrollbar { display: none; }
.ssx .px-root .px-info-scroll {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 52px, #000 76px);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 52px, #000 76px);
}

/* ── Back from the membership's checkout: the trial's end ── */
.ssx-joined {
  max-width: 1280px;
  margin: 12px auto 16px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--s-surface);
  box-shadow: inset 0 0 0 1px rgba(33, 228, 88, 0.45);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}
.ssx-joined .is-wait { color: rgba(242, 237, 228, 0.75); }
.ssx-joined a { color: var(--s-gold); text-decoration: underline; text-underline-offset: 2px; }

/* ── Stage: the block, the title block, the buttons and the creator in one
   column; the Live credits beside it from 1024 px; then the shelf ──
   Order at every width: the screen, its tabs, the bar (one block), the title
   block, the buttons. Each piece is a cell of .ssx-main's grid: none is
   placed by hand, so none can lie on another. */
.ssx-stage {
  max-width: var(--ssx-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.ssx-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stack" "head" "act" "chip";
}
.ssx-block { grid-area: stack; min-width: 0; }
.ssx-head { grid-area: head; min-width: 0; margin-top: 18px; }
.ssx-actions { display: contents; }
.ssx-actions-btns { grid-area: act; min-width: 0; margin-top: 16px; }
.ssx .ssx-chip { grid-area: chip; margin-top: 28px; }
.ssx-shelf { margin-top: 22px; }

/* Phones: the block runs edge to edge, square, with no shadow. */
@media (max-width: 719px) {
  .ssx-block { margin: 0 calc(var(--ssx-gut) * -1); }
  .ssx .px-root .px-main .px-screen-stack { border-radius: 0; box-shadow: none; }
  .ssx .px-root .px-main .trailer-wrap { border: 0; border-radius: 0; }
  /* The tips, streaming and preview bars keep their drawing, square here. */
  .ssx .px-root .px-hbar:not(.px-hbar-slim) { border: 0; border-radius: 0; }
}

/* From 720 px the block is sized by the window's height as well as its width,
   so the buttons stay on a laptop's first screen: --ssx-top is what stands
   above the screen (header, padding) and --ssx-below what the first screen
   must still show under it (tabs 56, bar 32, kicker, title, a logline of one
   or two lines, buttons, a little air). The title block's pieces become cells
   of the same grid: the creator stands beside the title, and Share, at the
   end of the kicker's line, meets the block's right edge. */
@media (min-width: 720px) {
  .ssx {
    --ssx-side: 0px;
    --ssx-top: 92px;
    --ssx-below: 330px;
    --ssx-vid: clamp(640px, calc((100vh - var(--ssx-top) - var(--ssx-below)) * 16 / 9), 1000px);
    --ssx-w: min(1184px, calc(var(--ssx-vid) + var(--ssx-side)));
    padding-top: 20px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .ssx-joined { max-width: var(--ssx-w); margin-top: 0; }
  .ssx-main {
    grid-template-columns: minmax(0, 1fr) fit-content(324px);
    grid-template-areas: "stack stack" "kicker kicker" "title chip" "line line" "act act";
  }
  .ssx-block { margin: 0; }
  .ssx-head { display: contents; }
  .ssx .ssx-kicker { grid-area: kicker; margin-top: 20px; }
  .ssx .ssx-title { grid-area: title; }
  .ssx .ssx-logline { grid-area: line; }
  .ssx-actions-btns { margin-top: 18px; }
  .ssx .ssx-chip { align-self: center; margin: 6px 0 0 24px; }
  .ssx-shelf { margin-top: 36px; }
}

@media (min-width: 1024px) {
  .ssx {
    --ssx-side: clamp(308px, 28vw, 348px);   /* the credits column: 280 to 320 of panel, and 28 of gap */
    --ssx-top: 96px;
    padding: 24px 48px 64px;
  }
  .ssx.ssx-nocredits { --ssx-side: 0px; }
  .ssx-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ssx-side);
    grid-template-areas: "main side" "below below";
    align-items: stretch;
  }
  .ssx-main { grid-area: main; }
  .ssx-side { grid-area: side; display: flex; flex-direction: column; margin-left: 28px; }
  .ssx .ssx-side .px-credits { flex: 1 1 auto; }
  .ssx-shelf { grid-area: below; }
  /* No credits (a show not crowdfunded on LOOR): the block takes the stage. */
  .ssx-nocredits .ssx-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "below";
  }
}

/* ── Actions: J's buttons, and full-width blocks above them ── */
.ssx-actions-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ssx-actions-btns > .ssx-fund,
.ssx-actions-btns > .ssx-closed,
.ssx-actions-btns > .tjp { flex: 1 1 100%; }
.ssx .ssx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.ssx .ssx-btn:active { transform: translateY(1px); }
.ssx .ssx-btn-gold { background: var(--s-gold); color: var(--s-ink); }
.ssx .ssx-btn-gold:hover { background: #f8d44f; }
.ssx .ssx-btn-line { box-shadow: inset 0 0 0 2px var(--s-text); color: var(--s-text); }
.ssx .ssx-btn-line:hover { box-shadow: inset 0 0 0 2px var(--s-gold); }
/* Subscribe to Watch: green is for watching, gold for buying. */
.ssx .ssx-btn-green { background: var(--s-green); color: var(--s-ink); }
.ssx .ssx-btn-green:hover { background: #5eef86; }
.ssx .ssx-btn .px-loot-mark { width: 0.72em; height: 0.92em; }
.ssx .ssx-play-i { width: 18px; height: 18px; margin-left: -4px; }
/* "Free with an account" by a signed-out viewer's Watch (sign-up first). */
.ssx .ssx-note { font-size: 14px; font-weight: 600; color: rgba(242, 237, 228, 0.7); text-wrap: balance; }
.ssx .ssx-cap-act { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* A shelf caption's action with no note under it: no box of its own. */
.ssx .ssx-cap-do { display: contents; }
.ssx-closed {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--s-surface);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 79, 0.4);
  font-size: 15px;
  line-height: 1.45;
}
.ssx-closed-t { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-red); }
/* Phones: the buttons share one row at their own, smaller size; a note
   takes the line below. */
@media (max-width: 599px) {
  .ssx-actions-btns { width: 100%; }
  .ssx .ssx-actions-btns .ssx-btn { flex: 0 0 auto; min-height: 44px; padding: 0 16px; font-size: 15px; }
  .ssx-actions-btns .ssx-note { flex: 1 1 100%; }
}
@media (max-width: 359px) {
  .ssx .ssx-actions-btns .ssx-btn { padding: 0 12px; font-size: 14px; }
}

/* ── Thumbs, the play glyph, states ── */
.ssx .ssx-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 38px;
  height: 38px;
  padding: 9px 8px 9px 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(7, 7, 15, 0.7);
  box-shadow: inset 0 0 0 1.5px rgba(242, 237, 228, 0.7);
  color: var(--s-text);
  transition: background 0.15s, color 0.15s;
}
.ssx a:hover .ssx-play { background: var(--s-gold); color: var(--s-ink); box-shadow: none; }
.ssx .ssx-lock-i { width: 14px; height: 14px; flex: none; }
.ssx .is-pct { color: var(--s-green); font-weight: 800; }

/* ── The shelf: J's tiles, one row, one caption ── */
.ssx .ssx-shelf { background: transparent; font-size: 16px; min-width: 0; }
.ssx .ssx-states { margin-bottom: 16px; }
.ssx .ssx-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 44%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 4px 6px;
  margin: -4px -4px 0;
}
.ssx .ssx-row::-webkit-scrollbar { display: none; }
.ssx .ssx-cell { scroll-snap-align: start; min-width: 0; }
@media (min-width: 640px) { .ssx .ssx-row { grid-auto-columns: 240px; gap: 18px; } }
@media (min-width: 1024px) { .ssx .ssx-row { grid-auto-columns: 272px; } }
.ssx .ssx-tile { width: 100%; text-align: left; color: inherit; }
.ssx .ssx-tile .sj-vessel { transition: box-shadow 0.15s; }
.ssx .ssx-tile.is-picked .sj-vessel { box-shadow: 0 0 0 2px var(--s-bg), 0 0 0 4px var(--s-text); }
.ssx .ssx-tile .sj-name { font-weight: 700; }
.ssx .ssx-n { color: var(--s-gold); font-weight: 900; margin-right: 2px; }
.ssx .ssx-tile .sj-meta { display: inline-flex; align-items: center; gap: 6px; }
.ssx .ssx-tile.is-free .sj-meta { color: var(--s-green); }
.ssx .ssx-lock {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
  display: inline-flex;
  padding: 6px;
  border-radius: 8px;
  background: rgba(7, 7, 15, 0.82);
}
.ssx .ssx-vessel-range .sj-art { filter: saturate(0.4) brightness(0.32); }
.ssx .ssx-range-n {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.ssx .ssx-cap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--s-line);
}
.ssx .ssx-cap-text { min-width: 0; max-width: 72ch; }
.ssx .ssx-cap-t { font-size: 20px; font-weight: 800; line-height: 1.3; }
.ssx .ssx-cap-n { color: var(--s-gold); font-weight: 900; margin-right: 4px; }
.ssx .ssx-cap-min { margin-left: 12px; font-size: 15px; font-weight: 600; }
.ssx .ssx-cap-s { margin-top: 6px; font-size: 16px; line-height: 1.5; }
@media (max-width: 639px) {
  .ssx .ssx-cap-s {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ssx .ssx-cap { flex-direction: column; align-items: stretch; }
  .ssx .ssx-cap .ssx-btn { width: 100%; }
}

/* ── The creator: under the buttons on phones, beside the title from 720 px ── */
.ssx .ssx-chip { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ssx .ssx-chip-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.ssx .ssx-chip-name { min-width: 0; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.ssx .ssx-chip-follow {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--s-line-2);
  font-size: 15px;
  font-weight: 700;
  color: var(--s-text);
  text-decoration: none;
}
.ssx .ssx-chip-follow:hover { box-shadow: inset 0 0 0 1.5px var(--s-gold); }

/* ── The title block (ShowX.title_block): kicker, title, logline, under the bar ──
   The kicker is the format, "EP n" (a list show, in the bar's green) and a
   clock with the days left; Share ends its line. Words are never cut: a long
   title takes another line, a kicker that runs out of room wraps. It stands
   outside the .px-root islands, so it is set here, in the page's tokens. */
.ssx .ssx-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 2px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
}
.ssx .ssx-kicker-ep { color: var(--s-green); }
.ssx .ssx-kicker-ep::before,
.ssx .ssx-kicker-clock::before { content: '·'; padding: 0 0.4em; color: var(--s-text); }
.ssx .ssx-kicker-clock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ssx .ssx-clock {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ssx .ssx-kicker, .ssx .ssx-title, .ssx .ssx-logline { min-width: 0; }
.ssx .ssx-title {
  margin: 8px 0 0;
  font-size: clamp(31px, 9vw, 40px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.ssx .ssx-logline { margin: 8px 0 0; font-size: 17px; line-height: 1.4; }
@media (min-width: 720px) {
  .ssx .ssx-title { margin-top: 6px; font-size: 40px; line-height: 1.1; }
  .ssx .ssx-logline { margin-top: 6px; max-width: 64ch; font-size: 18px; line-height: 1.45; }
}
@media (min-width: 1024px) {
  .ssx .ssx-title { font-size: clamp(40px, 3.4vw, 44px); }
}
/* Share: a 44 by 40 px tap area whose icon, not the area, meets the gutter; it
   adds no height to the kicker's line, and clears the creator's Follow under it. */
.ssx .ssx-share-wrap { display: flex; margin-left: auto; }
.ssx .ssx-share {
  display: grid;
  place-items: center;
  width: 44px;
  height: 40px;
  margin: -10px -12px -10px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--s-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.ssx .ssx-share:hover { color: var(--s-gold); }
.ssx .ssx-share.ssx-share-copied { color: var(--s-green); }
.ssx .ssx-share .px-share-mark { width: 20px; height: 20px; }
.ssx .ssx-share:focus-visible { outline: 2px solid var(--s-gold); outline-offset: -4px; border-radius: 10px; }

/* ── The live credits ── */
.ssx .ssx-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--s-text);
}
.ssx .ssx-live i {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--s-green);
  animation: ssx-live 2s ease-out infinite;
}
@keyframes ssx-live {
  0% { box-shadow: 0 0 0 0 rgba(33, 228, 88, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(33, 228, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(33, 228, 88, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ssx .ssx-live i { animation: none; }
}
/* ── Below 1024 px: the five seats in a band under the site header ──
   One seat at a time: the seats lie in one place and each is lit for its 4 s
   of the loop (opacity only, so the compositor does it), a dot lighting in
   step. A signed-in backer's Current rank is a sixth turn (.ssx-band-you).
   The site header scrolls away with the page; the band stays at the top of
   the screen and the page passes under it (at rest nothing of it lies on the
   picture). Reduced motion: the first seat stands. From 1024 px the side
   column shows the seats. */
.ssx .ssx-band { display: none; }

@media (max-width: 1023px) {
  .ssx-side { display: none; }

  .ssx .ssx-band {
    --ssx-turn: ssx-turn-5;
    --ssx-loop: 20s;
    --ssx-dots: 62px;   /* five dots (6 px, 5 apart) and 12 of gap */
    position: sticky;
    top: 0;
    z-index: 30;        /* over the page passing under it, under the offer's scrim (41) */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0 calc(var(--ssx-gut) * -1);
    padding: 8px var(--ssx-gut) 9px;
    background: var(--s-bg);
    box-shadow: inset 0 -1px 0 var(--s-line);
  }
  .ssx .ssx-band-you { --ssx-turn: ssx-turn-6; --ssx-loop: 24s; --ssx-dots: 73px; }
  .ssx .ssx-band ol { grid-area: 1 / 1 / auto / -1; display: grid; }
  .ssx .ssx-band li {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "role role" "name loot";
    align-items: baseline;
    column-gap: 12px;
    opacity: 0;
    animation: var(--ssx-turn) var(--ssx-loop) linear infinite;
    animation-delay: calc(var(--i) * 4s);
  }
  .ssx .ssx-seat-role {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--s-gold);
  }
  /* The title's line ends short of the dots; a long title wraps under them. */
  .ssx .ssx-band li > .ssx-seat-role { grid-area: role; padding-right: var(--ssx-dots); }
  /* A long name takes a second line: no word is cut. */
  .ssx .ssx-seat-name { grid-area: name; font-size: 18px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
  .ssx .ssx-seat-name.is-open { font-weight: 500; font-style: italic; }
  .ssx .ssx-seat-name .ssx-seat-role { margin-left: 4px; }
  .ssx .ssx-seat-loot {
    grid-area: loot;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--s-green);
  }
  .ssx .ssx-band-dots { grid-area: 1 / 2; align-self: start; display: flex; gap: 5px; margin-top: 5px; }
  .ssx .ssx-band-dots i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: rgba(242, 237, 228, 0.38); }
  .ssx .ssx-band-dots i::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--s-green);
    opacity: 0;
    animation: var(--ssx-turn) var(--ssx-loop) linear infinite;
    animation-delay: calc(var(--i) * 4s);
  }
}
/* A turn: in over 0.3 s, lit to 3.7 s, out by 4 s (of five turns, of six). */
@keyframes ssx-turn-5 { 0% { opacity: 0; } 1.5%, 18.5% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes ssx-turn-6 { 0% { opacity: 0; } 1.25%, 15.42% { opacity: 1; } 16.67%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ssx .ssx-band li,
  .ssx .ssx-band-dots i::after { animation: none; }
  .ssx .ssx-band li:first-child,
  .ssx .ssx-band-dots i:first-child::after { opacity: 1; }
}
/* 720 to 1023 px: the band crosses the page's padding (20 above it, 24 at the
   sides) to stand under the header, and counts in what stands above the
   screen (--ssx-top: header 72, band 55, padding 20). */
@media (min-width: 720px) and (max-width: 1023px) {
  .ssx:not(.ssx-nocredits) { --ssx-top: 147px; }
  .ssx .ssx-band { margin: -20px -24px 20px; padding-left: 24px; padding-right: 24px; }
}

/* ── Phones: the screen ── */
@media (max-width: 639px) {
  /* Info, Artist and LOOR get room to read, as Backers does on /x. */
  .ssx .px-root .trailer-wrap:has(> .px-info:not([x-cloak]):not([style*="none"])) {
    aspect-ratio: auto;
    height: 360px;
  }
  .ssx .px-root .px-info-scroll { padding-top: 60px; }
  .ssx .px-root .px-info-scroll {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 40px, #000 58px);
    mask-image: linear-gradient(to bottom, transparent 0, transparent 40px, #000 58px);
  }
}
/* The five pill tabs fit on one row down to a 320px phone. */
@media (max-width: 480px) {
  .ssx .px-root .trailer-tab { padding: 8px 6px; }
}
@media (max-width: 374px) {
  .ssx { --ssx-gut: 12px; }
  /* J's tab strip bleeds by --gut to the page edge: match the narrower edge. */
  .ssx .ssx-shelf.sj-root { --gut: 12px; }
  .ssx .px-root .trailer-tab { font-size: 11px; padding: 7px 5px; }
}
/* The welded bar's percent and totals share a phone's width (on /x they
   overlap there). */
@media (max-width: 479px) {
  .ssx .px-root .px-hbar-label,
  .ssx .px-root .px-hbar-pct { font-size: 14px; }
  .ssx .px-root .px-hbar-label { right: 12px; }
  .ssx .px-root .px-hbar-pct { left: 12px; }
}
@media (max-width: 400px) {
  .ssx .px-root .px-hbar-label,
  .ssx .px-root .px-hbar-pct { font-size: 13px; }
}
@media (max-width: 359px) {
  .ssx .px-root .px-hbar-goal { display: none; }
}

/* ── The slim funding bar (px_hbar `slim`, the funding clause only) ──
   The raised LOOT at its start and the goal (a check once it is met) at its
   end, both inside the bar and exact. The fill is the percent, so no percent
   is written. The totals are drawn twice: in ink over the green and in the
   bar's green over the dark, each clipped to where it reads (the green flip).
   Tips (yellow), streaming and the preview note keep their own drawing.
   Nothing here animates. */
.ssx .px-root .px-hbar.px-hbar-slim {
  height: 30px;
  border: 0;
  border-radius: 0;
  background: #191b26;
  font-size: 16px;
}
.ssx .px-hbar-slim::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--green-deep), var(--green));
  clip-path: inset(0 calc((1 - var(--fill)) * 100%) 0 0);
}
.ssx .px-hbar-slim .px-hbar-in {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 var(--ssx-gut);
  font-weight: 800;
  line-height: 30px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--s-green);
  clip-path: inset(0 0 0 calc(var(--fill) * 100% + 2px));
}
.ssx .px-hbar-slim .px-hbar-in.is-ink {
  color: var(--s-bg);
  clip-path: inset(0 calc((1 - var(--fill)) * 100%) 0 0);
}
.ssx .px-hbar-slim .px-loot-mark,
.ssx .ssx-seat-loot .px-loot-mark,
.ssx .ssx-stat-num .px-loot-mark {
  display: inline-block;
  width: 0.79em;
  height: 1em;
  margin-right: 0.14em;
  vertical-align: -0.125em;
}
.ssx .px-hbar-slim .px-hbar-check {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 720px) {
  .ssx .px-root .px-hbar.px-hbar-slim { height: 32px; border-radius: 0 0 14px 14px; }
  .ssx .px-hbar-slim .px-hbar-in { line-height: 32px; }
}

/* ── The tabs strip (px_console_tabs): /shows' text tabs under the screen ──
   Screen, strip and bar are one block, as wide as the screen; the bar closes
   it (the stack owns the radius). No rule under the tabs: the bar is their
   base line. The panes still open inside the picture, so with the pills gone
   they need no clearance at the top. */
.ssx .ssx-tabs { background: var(--s-surface); padding: 0 var(--ssx-gut) 8px; }
.ssx .ssx-tabs .sj-states {
  margin: 0;
  padding: 0;
  gap: 0;
  justify-content: space-between;
  overflow: visible;
  box-shadow: none;
}
.ssx .ssx-tablist { display: contents; }
.ssx .ssx-tabs .sj-state {
  justify-content: center;
  min-width: 44px;
  padding: 0 5px;
  font-family: inherit;
  color: var(--s-text);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ssx .ssx-tabs .sj-state:first-child { padding-left: 0; }
/* The underline runs under the word, not the tap area (the scope names on
   the picture are the same tabs: below). */
.ssx .ssx-tabs .sj-state.is-on::after,
.ssx .ssx-names .sj-state.is-on::after { content: none; }
.ssx .ssx-tabs .sj-state-l,
.ssx .ssx-names .sj-state-l { position: relative; align-self: stretch; justify-content: center; }
.ssx .ssx-tabs .sj-state.is-on .sj-state-l::before,
.ssx .ssx-names .sj-state.is-on .sj-state-l::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--s-green);
}
.ssx .ssx-tabs .sj-state:focus-visible,
.ssx .ssx-names .sj-state:focus-visible,
.ssx .ssx-help:focus-visible { outline: 2px solid var(--s-gold); outline-offset: -2px; border-radius: 6px; }
/* The "?": the LOOR pane's words, behind a ring. */
.ssx .ssx-help {
  flex: none;
  display: grid;
  place-items: center;
  align-self: center;
  width: 48px;
  height: 48px;
  margin-right: -11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--s-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ssx .ssx-help > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(242, 237, 228, 0.6);
  font: 600 16px/1 'Inter', system-ui, sans-serif;
}
.ssx .ssx-help.is-on > span { background: var(--s-text); color: var(--s-surface); box-shadow: none; }
@media (min-width: 640px) {
  .ssx .ssx-tabs .sj-states { justify-content: flex-start; gap: 4px; }
  .ssx .ssx-tabs .sj-state { padding: 0 12px; }
  .ssx .ssx-help { margin-left: auto; }
}
/* Under 360 px the tabs and the "?" cannot all stand in one row: the row
   slides sideways, as /shows' own tabs do, instead of widening the page. */
@media (max-width: 359px) {
  .ssx .ssx-tabs .sj-states { justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ssx .ssx-tabs .sj-states::-webkit-scrollbar { display: none; }
}
/* 360 to 389 px: the five tabs and the "?" stand closer, so the row is whole
   on a 360 px phone (it needs 333 px there and has 336). */
@media (min-width: 360px) and (max-width: 389px) {
  .ssx .ssx-tabs .sj-state { padding: 0 3px; }
  .ssx .ssx-help { width: 44px; margin-right: -10px; }
}
/* No pills over the picture: the panes start at its top, with no fade. */
.ssx .px-root .px-console-strip .px-info-scroll { padding-top: 22px; -webkit-mask-image: none; mask-image: none; }
.ssx .px-root .px-console-strip .px-backers { padding-top: 22px; }

/* ── The Stats pane (px_console on the strip, behind the Stats tab) ──
   The four numbers that stood over the credits, exact, at the picture's foot:
   LOOT pledged as the display number, then the three quiet ones; no boxes.
   The pane is the display number's container, so the number is sized by the
   picture: nine digits and the LOOT mark fit from a 320 px phone up (a
   browser without container units takes the size before it, which fits too).
   No number is cut: the quiet three take another row when one runs out; on
   phones their labels stand on two lines, so the three share a row there too.
   Nothing here animates. */
.ssx .px-root .ssx-statpane {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  gap: 10px 20px;
  padding: 22px var(--ssx-gut) 18px;
  font-variant-numeric: tabular-nums;
}
.ssx .ssx-stat { flex: none; }
.ssx .ssx-stat.is-hero { flex-basis: 100%; }
.ssx .ssx-stat-num { display: block; font-size: 20px; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; }
.ssx .ssx-stat.is-hero .ssx-stat-num { font-size: clamp(38px, 11.4vw, 60px); font-size: clamp(38px, 12.4cqw, 96px); line-height: 1.1; letter-spacing: -0.03em; }
.ssx .ssx-stat-label { display: block; width: min-content; margin-top: 3px; font-size: 16px; font-weight: 600; line-height: 1.2; }
.ssx .ssx-stat.is-hero .ssx-stat-label { width: auto; }
@media (min-width: 720px) {
  .ssx .px-root .ssx-statpane { gap: 20px 48px; padding: 22px 48px 44px; }
  .ssx .ssx-stat-num { font-size: 28px; }
  .ssx .ssx-stat-label { width: auto; }
}

/* ── The scope names (px_console `scopes`): Series, Ep 1..n ──
   The strip's text tabs again, across the head of the picture, while the
   Producers or the Stats pane is open and at no other time: nothing lies on
   the key art at rest. They are labels on the picture, not a second tab bar:
   no hairline, one soft shade that is deepest at their foot, so the credits
   leave under them. The row never wraps and no name is shortened: a row
   longer than the picture slides sideways, at every width (thirteen names
   outgrow a small laptop's picture too). Seven names or more stand closer,
   so a phone holds Series and six episodes. The credits and the numbers
   start under the row. */
/* The gutters are the strip's, and the row is cut at them: slid, a name
   stands at the row's start with nothing of the one before it showing. */
.ssx .px-root .ssx-names { position: absolute; inset: 0 0 auto; z-index: 2; padding: 0 var(--ssx-gut); }
.ssx .ssx-names::before {
  content: '';
  position: absolute;
  inset: 0 0 -28px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 7, 15, 0.5), rgba(7, 7, 15, 0.82) 44px, rgba(7, 7, 15, 0));
}
.ssx .ssx-names .sj-states {
  position: relative;
  margin: 0;
  /* --ssx-names-end: room at the end of a row that slides, so that a name
     can stand whole at its start (px_scope_names' see()). */
  padding: 0 var(--ssx-names-end, 0px) 0 0;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  box-shadow: none;
}
.ssx .ssx-names .sj-states::-webkit-scrollbar { display: none; }
.ssx .px-root .ssx-names .sj-state {
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--s-text);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ssx .px-root .ssx-names .sj-state.is-on { font-weight: 800; }
.ssx .ssx-names .sj-states.is-tight { gap: 0; }
.ssx .px-root .ssx-names .is-tight .sj-state { padding: 0 6px; }
/* Under 360 px they always do: Series and five episodes then fit a 320 px phone. */
@media (max-width: 359px) {
  .ssx .ssx-names .sj-states { gap: 0; }
  .ssx .px-root .ssx-names .sj-state { padding: 0 6px; }
}
.ssx .px-root .ssx-names .sj-state:first-child { padding-left: 0; }
.ssx .px-root .px-console-scoped .px-backers { padding-top: 44px; }
.ssx .px-root .px-console-scoped .ssx-statpane { padding-top: 56px; }
/* A pick: the new credits and the new numbers fade in (opacity only). The
   credits' fade is the roll's own rule, below. */
.ssx .px-console-scoped .ssx-stat { animation: ssx-scope-in 180ms ease-out; }
@keyframes ssx-scope-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ssx .px-console-scoped .ssx-stat { animation: none; }
}

/* ── The credits roll (px_crawl: px_console with `roll`) ──
   The shipped credits, crawling as on /x by other means. One CSS animation
   of the track's transform, which the browser's compositor runs by itself:
   no script runs while it rolls (/x's pxRoll adds to scrollTop every frame).
   No mask on the moving list: the fades at its head and foot are two plain
   gradients lying over it. Only transform and opacity animate. */
/* The pane is cut 4 px short of the picture's foot: the browser can then
   tell that the tabs under the picture are not under the moving layer, and
   does not lift the page below into a layer of its own. */
.ssx .px-root .px-console-strip .px-backers { bottom: 4px; overflow: hidden; overflow: clip; }
.ssx .px-root .ssx-roll { -webkit-mask-image: none; mask-image: none; }
/* The first credit starts clear of the shade at the roll's head. */
.ssx .px-root .ssx-roll .px-roll-copy { padding-top: 34px; }
/* The track is one copy tall: the second copy (the loop's head) hangs under
   it, so -100% is exactly one copy and nothing is measured per frame. 36 px
   a second on every screen: the duration is the copy's height (px_crawl's
   `secs`). A beat to read the first name, then it rolls. A new roll (the
   pane opened, another scope picked) fades in. */
.ssx .ssx-roll .px-roll-track {
  position: relative;
  animation: ssx-crawl var(--ssx-crawl, 60s) linear 0.9s infinite, ssx-scope-in 180ms ease-out;
}
.ssx .ssx-roll .px-roll-copy[data-roll-dup] { position: absolute; top: 100%; left: 0; right: 0; }
@keyframes ssx-crawl { to { transform: translate3d(0, -100%, 0); } }
/* It rests off screen and under a mouse (the fade-in still finishes). */
.ssx .ssx-roll.is-away .px-roll-track { animation-play-state: paused, running; }
@media (hover: hover) {
  .ssx .ssx-roll:hover .px-roll-track { animation-play-state: paused, running; }
}
/* A list under about a window and a half tall does not roll and has no
   second copy. It stands in the middle; one taller than the window starts
   at its top and scrolls by hand. */
.ssx .ssx-roll.is-still { display: flex; flex-direction: column; }
.ssx .ssx-roll.is-still .px-roll-track { margin: auto 0; animation: ssx-scope-in 180ms ease-out; }
.ssx .px-root .ssx-roll.is-still .px-roll-copy { padding-bottom: 34px; }
/* The viewer took it: the crawl stops, the second copy goes, and the list
   scrolls once to its end. */
.ssx .ssx-roll.is-manual .px-roll-track { animation: none; }
.ssx .ssx-roll.is-still .px-roll-copy[data-roll-dup],
.ssx .ssx-roll.is-manual .px-roll-copy[data-roll-dup] { display: none; }
/* The credits rise out of the ink at the picture's foot and leave under a
   short shade at the roll's head (with names over the roll, under the
   names' own shade). Each is a small layer of its own, so the browser does
   not lift what is around the roll into a second screen-size layer. */
.ssx .ssx-roll-shade {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  will-change: transform;
}
.ssx .ssx-roll-foot {
  bottom: 0;
  height: 40px;
  background: linear-gradient(180deg, rgba(7, 7, 15, 0), rgb(7, 7, 15) 88%);
}
.ssx .ssx-roll-head {
  top: 22px;
  height: 28px;
  background: linear-gradient(180deg, rgba(7, 7, 15, 0.86), rgba(7, 7, 15, 0));
}
.ssx .px-console-scoped .ssx-roll-head,
.ssx .ssx-roll.is-still ~ .ssx-roll-head { display: none; }
/* Reduce Motion: no crawl. One copy, a list the viewer scrolls. */
@media (prefers-reduced-motion: reduce) {
  .ssx .ssx-roll .px-roll-track,
  .ssx .ssx-roll.is-still .px-roll-track { animation: none; }
  .ssx .ssx-roll .px-roll-copy[data-roll-dup] { display: none; }
}
/* Until the names are in the page (px_crawl's stand-in): the shape of the
   first credit, in the place it will take. It shows only when the wait is
   long enough to be seen (opacity, once). */
.ssx .ssx-roll-wait {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding-top: 36px;
  opacity: 0;
  animation: ssx-wait-in 240ms ease-out 350ms forwards;
}
.ssx .ssx-roll-wait span { display: block; width: 132px; height: 8px; border-radius: 4px; background: rgba(242, 237, 228, 0.14); }
.ssx .ssx-roll-wait span:nth-child(2) { width: 168px; height: 14px; }
.ssx .ssx-roll-wait span:nth-child(3) { width: 72px; }
@keyframes ssx-wait-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ssx .ssx-roll-wait { animation-duration: 1ms; }
}

/* ── The panes stand on the show's own key art (px_console with `blur`) ──
   Info, Producers, Stats, Artist and "?" draw the show's 16:9 art behind
   their words, blurred and darkened. The blur is in the picture: a 96 x 54
   copy baked on the server (Doubloon.Thumbs), carried once in the page as a
   data URI in --px-blur on the console, and stretched over the pane. No
   filter, no backdrop-filter and no mask: nothing is blurred in the
   browser and nothing is fetched. No pixel of it is brighter than 0.09
   relative luminance, so cream type reads at 6.4:1 or better and gold at
   4.6:1 or better anywhere on it. It melts into the ink at the picture's
   foot, where the roll's foot shade and the bar meet it. A show whose blur
   is not made yet has no such class and keeps the plain pane, and nothing
   changes on the Trailer tab: the picture is the panes' own. */
.ssx .px-root .px-console-blur .px-info {
  background:
    linear-gradient(180deg, rgba(7, 7, 15, 0) 66%, rgba(7, 7, 15, 0.7) 88%, rgb(7, 7, 15) 100%),
    var(--px-blur, none) center / cover no-repeat,
    var(--screen);
}
/* Two of the Artist pane's colours were chosen for the plain ink and fall
   under 4.5:1 on the brightest picture there can be (the maker's title, deep
   gold, 3.2:1; the link, green, 4.4:1). On the picture the title takes the
   page's gold (4.6:1) and the link its own hover green (5.0:1), and is
   underlined under a pointer instead. */
.ssx .px-root .px-console-blur .maker-title { color: var(--gold); }
.ssx .px-root .px-console-blur .maker-link { color: var(--green-bright); }
.ssx .px-root .px-console-blur .maker-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* A roll with no names over it: its head shade began where the roll does,
   22 px down, which no one could see on the plain pane. On the picture it
   starts at the picture's top, deepest where the credits leave, as the
   names' shade is. */
.ssx .px-console-blur .ssx-roll-head {
  top: 0;
  height: 50px;
  background: linear-gradient(180deg, rgba(7, 7, 15, 0.5), rgba(7, 7, 15, 0.86) 22px, rgba(7, 7, 15, 0));
}

/* /watch/:slug/episode/:id when the player won't play it (WatchController,
   still a 404): the membership offer, or "Still in production". */
.ssx.ssx-locked { min-height: 62vh; display: flex; align-items: center; justify-content: center; padding: 48px 16px 64px; }
.ssx .ssx-locked-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ssx .ssx-locked-h { margin: 0; font-size: clamp(28px, 7vw, 40px); font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.ssx .ssx-locked-card .ssx-note { margin: 0; font-size: 16px; }
.ssx .ssx-locked-btns { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 16px; }
.ssx .ssx-locked-btns .ssx-btn { width: 100%; max-width: 320px; white-space: normal; text-align: center; }
.ssx .ssx-locked-back { color: var(--s-text); font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ssx .ssx-locked-back:hover { color: var(--s-gold); }

/* A members-only tile's tap: the membership offer over the page, in the
   locked episode page's words (ShowX.offer/1). Above the credits band
   (z-index 30), so nothing of it sits behind the band. */
/* Open, the page rises over the site header (z-10), as the fund sheet's
   html.sjf-lock does, so the scrim covers the header too and the header
   never sits on the offer (a phone held sideways). */
html.ssx-offer-lock .ssx { position: relative; z-index: 20; }
.ssx .ssx-offer-scrim { position: fixed; inset: 0; z-index: 41; background: rgba(7, 7, 15, 0.78); }
.ssx .ssx-offer-box {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 42;
  width: calc(100% - 32px);
  max-width: 400px;
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 24px 20px;
  text-align: center;
  background: var(--s-surface);
  border: 1px solid rgba(245, 197, 24, 0.45);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.ssx .ssx-offer-box:focus { outline: none; }
.ssx .ssx-offer-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.ssx .ssx-offer-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ssx .ssx-offer-ep {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  font-size: 15px;
  font-weight: 700;
  color: rgba(242, 237, 228, 0.7);
}
.ssx .ssx-offer-ep .ssx-cap-n { margin-right: 0; }
.ssx .ssx-offer-ep span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssx .ssx-offer-h { margin: 0; font-size: 28px; font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.ssx .ssx-offer-box .ssx-note { margin: 0; font-size: 16px; }
.ssx .ssx-offer-box .ssx-btn { width: 100%; margin-top: 8px; }
.ssx .ssx-offer-no { min-height: 44px; padding: 0 16px; font-size: 15px; font-weight: 700; color: var(--s-text); text-decoration: underline; text-underline-offset: 3px; }
.ssx .ssx-offer-no:hover { color: var(--s-gold); }
/* Welcome back and the offer take turns in the box's own column. */
.ssx .ssx-offer-step { display: contents; }
.ssx .ssx-offer-mask { letter-spacing: 0.01em; }
.ssx .ssx-offer-err { margin: 0; font-size: 14px; font-weight: 600; color: var(--s-red); }
.ssx .ssx-offer-member { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 0; font-size: 15px; font-weight: 600; color: rgba(242, 237, 228, 0.66); }
.ssx .ssx-offer-member a { font-weight: 700; color: var(--s-text); text-decoration: underline; text-underline-offset: 3px; }
.ssx .ssx-offer-member a:hover { color: var(--s-gold); }