@charset "UTF-8";
/* ============================================================
   Round 8 — actor page rework (apX classes)
   New layout for individual /VA/{XX}.html pages.

   Round 12 updates:
     • Actor portrait + shortbio overlay REMOVED from face area.
     • Long bio moved into col1+col2; bio2.jpg sits bottom-right.
     • Voice profile moves to col3 below the player.
     • Player main demo column 2 shows a poster image (1st-frame thumb).
     • Play-All long oval changed to a rounded-corner button.
   ============================================================ */

.apX-wrap {
    /* Bridge between the existing .main-row-content (face area) and the
       new bio/player/longbio block below it. We keep the padding scheme
       consistent with the rest of the actor template. */
    margin-top: 6px;
}

/* ----- 3-column row (bio1 | video | player) ----- */
.apX-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;   /* col3 a touch wider for the player */
    gap: 22px;
    align-items: stretch;
    padding: 24px 24px 8px;
    background: rgba(255,255,255,.95);
}
.apX-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.apX-col__top {
    /* The "top" item of a column (bio1 image, video widget, or player). */
    width: 100%;
    margin-bottom: 14px;
}
.apX-bio1 {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center top;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(20,30,60,.12);
    display: block;
}

/* shortBio area (Round 12: REMOVED — kept rule with display:none so that
   any older markup on the page is hidden silently). */
.apX-shortbio {
    display: none !important;
}

/* Round 20: player auto-sizes to its content. Previously the player span
   was fixed via grid-row: 1/3 which left blank space when an actor's
   demo list was short. Now the player only spans grid row 1 (top half)
   and the voice-profile (.apX-vp via .apX-vp-row) sits BELOW it in row 2,
   right next to the longbio that occupies cols 1-2 row 2. */
.apX-player {
    grid-column: 3 / 4;
    grid-row: 1 / 2;            /* was 1/3 — now only row 1 */
    align-self: start;
}
.apX-player .demo-player {
    width: 100%;
    height: auto;
    min-height: 0;
}

/* ----- Long bio area ---------------------------------------------------
   Round 12: longBio is now placed INSIDE the 3-col row, spanning col1+col2
   (under the bio1 image and the video). The bio2.jpg image is floated to
   the bottom-right corner of the long bio body. The player keeps col3 by
   spanning rows 1-3 (we just expanded its row span).
*/
.apX-longbio {
    grid-column: 1 / 3;        /* span the 2 left columns */
    padding: 18px 22px 22px;
    background: rgba(255,255,255,.95);
    border-left: 4px solid var(--actor-color, #0e4ccc);
    border-radius: 0 8px 8px 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #2a3245;
    margin-top: 6px;
}
.apX-longbio h2 {
    margin: 0 0 10px;
    color: var(--actor-color, #0e4ccc);
    font-size: 1.4rem;
}
.apX-longbio__body {
    /* Allow bio2 to be floated inside this paragraph block */
    overflow: hidden;          /* contain the float */
    position: relative;
}
.apX-bio2 {
    /* Round 12: bio2 sits in the bottom-right corner of the long bio area.
       We use shape-outside not being needed; instead, the image is floated
       right with margin-top large enough to push it down (so the prose
       text wraps along the LEFT side of the image). For a true bottom-
       right anchor, we use float:right and let prose wrap. */
    float: right;
    width: 240px;
    max-width: 42%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
    margin: 8px 0 0 22px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(20,30,60,.16);
    /* shape-outside lets the text hug the left side, treating the image
       as if it lives in the corner. */
    shape-outside: margin-box;
}
@media (max-width: 760px) {
    .apX-bio2 {
        float: none;
        display: block;
        width: 100%;
        max-width: 360px;
        margin: 14px auto 4px;
    }
}

/* ----- Voice profile (Round 12: lives inside the apX-row, col3, ROW 2,
   right under the player) -----
   Implementation: we expand the player to span row 1 only and the .apX-vp
   sits in row 2 of col3. But it's simpler to keep the player at row 1/3
   span and append the voice-profile after the longbio in the markup, so
   we use the dedicated .apX-vp-row container that follows .apX-row. To
   keep voice-profile under col3, the row uses the same grid template
   and we place .apX-vp in column 3.
*/
.apX-vp-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;   /* same proportions as apX-row */
    gap: 22px;
    padding: 8px 24px 24px;
    background: rgba(255,255,255,.95);
}
.apX-vp {
    grid-column: 3 / 4;     /* under the player column */
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
    border: 1px solid #e3e7ee;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: -8px;
}

/* Round 20: when JS moves the voice-profile INTO .apX-row (col3, row 2),
   it sits directly under the player and beside the longbio. */
.apX-row > .apX-vp {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    align-self: start;
    margin-top: 14px;
}
/* When JS has moved the .apX-vp out, hide the now-empty placeholder row. */
.apX-vp-row.is-emptied { display: none; }
.apX-vp h3 {
    margin: 0 0 8px;
    color: var(--actor-color, #0e4ccc);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.apX-vp dl {
    margin: 0 0 10px;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 10px;
    font-size: 0.86rem;
}
.apX-vp dt {
    font-weight: 700;
    color: #4a5168;
}
.apX-vp dd {
    margin: 0;
    color: #2a3245;
}
.apX-vp ul {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #2a3245;
}
.apX-vp ul li { margin-bottom: 4px; }

/* ----- Mobile collapse to single column ----- */
@media (max-width: 980px) {
    .apX-row,
    .apX-vp-row {
        display: block;
        padding-left: 14px;
        padding-right: 14px;
    }
    .apX-row > .apX-col,
    .apX-row > .apX-shortbio,
    .apX-row > .apX-longbio,
    .apX-row > .apX-player {
        grid-column: auto;
        grid-row: auto;
        margin-bottom: 16px;
    }
    .apX-vp { margin-top: 12px; }
}

/* ----- Container break (the "close container, open new one") -----
   Below the apX-actor-specialties section we close .main-container and
   open a new full-width band. The new band has a soft background to
   distinguish it from the actor's own section above.

   Round 12: the band ("Wait — they're an actual family?") now uses a
   subtle grey-white-grey vertical gradient.
*/
.apX-extra-band {
    background: linear-gradient(180deg,
                #e6e9ef 0%,
                #f7f9fc 18%,
                #ffffff 50%,
                #f7f9fc 82%,
                #e6e9ef 100%);
    padding: 32px 0 8px;
    margin-top: 18px;
}
.apX-extra-band__inner {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px;
}
.apX-extra-band h2 {
    text-align: center;
    margin: 0 0 18px;
    color: #0e4ccc;
}

/* The .fam-cards block is already styled in specialty-page.css. We add
   actor-page-specific overrides for Round 12: arrows shifted UP by 120px,
   peek images flush with the top of the info card body, and the body’s
   top-padding tightened to 5px so the info sits higher.

   These rules are scoped under .apX-extra-band so we only affect the
   actor-page family-cards block, NOT the specialty pages where the
   layout is currently working as desired.
*/
.apX-extra-band .fam-cards__nav {
    /* Move both prev/next arrows up by 120px from the vertical center. */
    top: calc(50% - 120px);
}

.apX-extra-band .fam-card__peek {
    /* Round 12: peek image flush with the TOP of the info card body
       (i.e. it sits above with its bottom edge touching the body's top
       border-radius). Previously top:-85px placed it floating well
       above the body; now we anchor it to the top.
       We also remove the rounded-bottom-corner so it meets the body
       cleanly and inherit the body border-radius for the top corners. */
    top: 0;
    height: 110px;
    border-radius: 14px 14px 0 0;
}

.apX-extra-band .fam-card__body {
    /* Round 12: top padding 5px (was 10px) so the info text moves up
       and sits right under the peek image. */
    padding: 5px 10px 0;
    /* The peek now sits AT top:0 with height:110px. The body must start
       below that, so its margin-top equals the peek height. */
    margin-top: 110px;
}

/* Track: keep enough headroom so the now-anchored peek image still has
   visible space (it lives INSIDE the card now, anchored to top:0, and
   the card no longer needs the big top-headroom padding for a peek
   poking ABOVE it). Reduce the track top padding here. */
.apX-extra-band .fam-cards__track {
    padding-top: 28px;
}

/* ==================================================================
   Round 30 — apX actor-page responsive layout
   ==================================================================
   These rules target the real /VA/{actor}.html structure: two .apX-col
   blocks, .apX-player, and .apX-longbio inside .apX-row.
*/
@media (min-width: 981px) {
  .apX-row {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) minmax(360px, 1.1fr) !important;
    grid-template-areas:
      "bio video player"
      "story story player" !important;
    align-items: start !important;
  }
  .apX-row > .apX-col:nth-of-type(1) { grid-area: bio !important; }
  .apX-row > .apX-col:nth-of-type(2) { grid-area: video !important; }
  .apX-player {
    grid-area: player !important;
    align-self: start !important;
    display: flex !important;
    justify-content: center !important;
  }
  .apX-player .demo-player {
    width: 100% !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .apX-longbio {
    grid-area: story !important;
    margin-top: 0 !important;
    align-self: start !important;
  }
}

@media (min-width: 901px) and (max-width: 980px) {
  .apX-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr) !important;
    grid-template-areas:
      "left player" !important;
    gap: 20px !important;
    align-items: start !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .apX-row > .apX-col:nth-of-type(1) {
    grid-area: left !important;
    display: block !important;
  }
  .apX-row > .apX-col:nth-of-type(2) {
    grid-area: left !important;
    width: calc(50% - 8px) !important;
    float: right !important;
    margin-left: 16px !important;
  }
  .apX-row > .apX-col:nth-of-type(1) .apX-bio1 {
    width: calc(50% - 8px) !important;
    float: left !important;
  }
  .apX-longbio {
    grid-area: left !important;
    clear: both !important;
    margin-top: 16px !important;
  }
  .apX-player {
    grid-area: player !important;
    display: flex !important;
    justify-content: center !important;
    align-self: start !important;
  }
  .apX-player .demo-player {
    width: 100% !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  /* Round 37b: 2-column layout — photo+shortBio | voiceProfile+player
     Override L196 @media(max-width:980px) block properties that persist
     even when display:grid is restored with !important. */
  .apX-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1.3fr) !important;
    grid-template-areas:
      "left player"
      "story player" !important;
    gap: 18px !important;
    align-items: start !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Neutralize L196 margin-bottom:16px and grid-column/grid-row:auto */
  .apX-row > .apX-col,
  .apX-row > .apX-shortbio,
  .apX-row > .apX-longbio,
  .apX-row > .apX-player {
    margin-bottom: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .apX-row > .apX-col:nth-of-type(1) {
    grid-area: left !important;
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
    gap: 14px !important;
  }
  .apX-row > .apX-col:nth-of-type(2) {
    grid-area: left !important;
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  .apX-row > .apX-col:nth-of-type(1) .apX-bio1 {
    float: none !important;
    width: 100% !important;
  }
  .apX-longbio {
    grid-area: story !important;
    clear: none !important;
    margin-top: 14px !important;
  }
  .apX-player {
    grid-area: player !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    align-self: start !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
  }
  .apX-player > .demo-player,
  .apX-player > .apX-vp {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .apX-player .demo-player {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 760px) {
  .apX-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "bio video"
      "player player"
      "story story" !important;
    gap: 14px !important;
    align-items: start !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .apX-row > .apX-col:nth-of-type(1) {
    grid-area: bio !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .apX-row > .apX-col:nth-of-type(2) {
    grid-area: video !important;
    width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
  }
  .apX-bio1,
  .main-demo {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .apX-player {
    grid-area: player !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .apX-player .demo-player {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .apX-longbio {
    grid-area: story !important;
    width: 100% !important;
    margin-top: 0 !important;
    clear: both !important;
    box-sizing: border-box !important;
  }
}

/* ==================================================================
   Round 30b — safer apX 761–980 grid, no overlapping grid-area stack
   ================================================================== */
@media (min-width: 901px) and (max-width: 980px) {
  .apX-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(170px, 1fr) minmax(170px, 1fr) !important;
    grid-template-areas:
      "bio video player player"
      "story story player player" !important;
    gap: 18px !important;
    align-items: start !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .apX-row > .apX-col:nth-of-type(1) {
    grid-area: bio !important;
    display: flex !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .apX-row > .apX-col:nth-of-type(2) {
    grid-area: video !important;
    display: flex !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .apX-row > .apX-col:nth-of-type(1) .apX-bio1 {
    float: none !important;
    width: 100% !important;
  }
  .apX-longbio {
    grid-area: story !important;
    clear: none !important;
    margin-top: 0 !important;
  }
  .apX-player {
    grid-area: player !important;
    display: flex !important;
    justify-content: center !important;
    align-self: start !important;
    min-width: 0 !important;
  }
  .apX-player .demo-player {
    width: 100% !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ==================================================================
   Follow-up — Voice Profile lives below Player inside .apX-player
   ================================================================== */
.apX-player {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
}
.apX-player > .demo-player,
.apX-player > .apX-vp {
  width: 100% !important;
  max-width: 720px !important;
  box-sizing: border-box !important;
}
.apX-player > .apX-vp {
  margin-top: 0 !important;
}
@media (max-width: 980px) {
  .apX-player > .demo-player,
  .apX-player > .apX-vp {
    max-width: 680px !important;
  }
}
@media (min-width: 761px) and (max-width: 900px) {
  /* Round 37b: override Follow-up global align-items:center for 2-col layout */
  .apX-player {
    align-items: flex-start !important;
  }
  .apX-player > .demo-player,
  .apX-player > .apX-vp {
    max-width: 100% !important;
  }
}
@media (max-width: 760px) {
  .apX-player > .demo-player,
  .apX-player > .apX-vp {
    max-width: 100% !important;
  }
}
.apX-vp-row:empty,
.apX-vp-row.is-emptied {
  display: none !important;
}

/* ==================================================================
   Round 38 — AUTHORITATIVE individual actor body layout
   Goals:
   • Preserve player/video/card visuals; control only body placement.
   • Code largest-to-smallest breakpoints.
   • Body order uses existing DOM:
     col1 = Actor Image #1, col2 = main video, player = demos + VP,
     longbio = Actor's Story.
   ================================================================== */

/* ---------- DEFAULT / LARGE: >1260, centered 1260 max container ---------- */
body.actor-page-r8 main.main-container,
body[data-page="actor"] main.main-container {
  max-width: 1260px !important;
  width: calc(100% - 36px) !important;
  margin: 30px auto 0 !important;
  background: rgba(255,255,255,.95) !important;
  border: 2px solid rgba(255,255,255,.95) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(20, 30, 60, .20) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.actor-page-r8 .main-row-title,
body[data-page="actor"] .main-row-title {
  background: rgba(217,236,255,.95) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 92px !important;
  height: auto !important;
  padding: 18px 24px 14px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
body.actor-page-r8 .main-row-title h1,
body[data-page="actor"] .main-row-title h1 {
  font-family: var(--font-h, 'Rise of Kingdom', Georgia, serif) !important;
  color: var(--actor-color, #0e4ccc) !important;
  font-size: clamp(2.3rem, 4vw, 4rem) !important;
  line-height: .95 !important;
  margin: 0 !important;
  font-weight: 800 !important;
}
body.actor-page-r8 .main-row-title__subtitle,
body[data-page="actor"] .main-row-title__subtitle {
  font-family: Verdana, Geneva, sans-serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  color: #4a4a4a !important;
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  margin: 6px 0 0 !important;
  text-transform: lowercase !important;
}

body.actor-page-r8 .apX-wrap,
body[data-page="actor"] .apX-wrap {
  margin: 0 !important;
  background: rgba(255,255,255,.95) !important;
}

/* Large layout: 67/33. Left two-thirds contain image+video in 50/50 row, story below. */
body.actor-page-r8 .apX-row,
body[data-page="actor"] .apX-row {
  display: grid !important;
  /* 67/33 body: left two-thirds split 50/50 for image + main demo; right third for player+VP */
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-areas:
    "image image video video player player"
    "story story story story player player" !important;
  gap: 18px !important;
  align-items: start !important;
  padding: 22px !important;
  background: rgba(255,255,255,.95) !important;
  box-sizing: border-box !important;
}

body.actor-page-r8 .apX-row > .apX-col,
body.actor-page-r8 .apX-row > .apX-player,
body.actor-page-r8 .apX-row > .apX-longbio,
body[data-page="actor"] .apX-row > .apX-col,
body[data-page="actor"] .apX-row > .apX-player,
body[data-page="actor"] .apX-row > .apX-longbio {
  float: none !important;
  clear: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
body.actor-page-r8 .apX-row > .apX-col:nth-of-type(1),
body[data-page="actor"] .apX-row > .apX-col:nth-of-type(1) {
  grid-area: image !important;
  display: flex !important;
  flex-direction: column !important;
}
body.actor-page-r8 .apX-row > .apX-col:nth-of-type(2),
body[data-page="actor"] .apX-row > .apX-col:nth-of-type(2) {
  grid-area: video !important;
  display: flex !important;
  flex-direction: column !important;
}
body.actor-page-r8 .apX-row > .apX-player,
body[data-page="actor"] .apX-row > .apX-player {
  grid-area: player !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 14px !important;
}
body.actor-page-r8 .apX-row > .apX-longbio,
body[data-page="actor"] .apX-row > .apX-longbio {
  grid-area: story !important;
}

body.actor-page-r8 .apX-col__top,
body[data-page="actor"] .apX-col__top {
  width: 100% !important;
  margin: 0 !important;
  min-width: 0 !important;
}
body.actor-page-r8 .apX-bio1,
body[data-page="actor"] .apX-bio1 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 10px !important;
}
body.actor-page-r8 .main-demo,
body[data-page="actor"] .main-demo,
body.actor-page-r8 .demo-player,
body[data-page="actor"] .demo-player,
body.actor-page-r8 .apX-vp,
body[data-page="actor"] .apX-vp {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.actor-page-r8 .main-demo,
body[data-page="actor"] .main-demo {
  margin-top: 0 !important;
}

/* Actor story: desktop/tablet has blue left border and floated image #2. */
body.actor-page-r8 .apX-longbio,
body[data-page="actor"] .apX-longbio {
  padding: 18px 22px 22px !important;
  background: rgba(255,255,255,.95) !important;
  border: 0 !important;
  border-left: 4px solid var(--actor-color, #0e4ccc) !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #2a3245 !important;
}
body.actor-page-r8 .apX-longbio h2,
body[data-page="actor"] .apX-longbio h2 {
  margin: 0 0 10px !important;
  color: var(--actor-color, #0e4ccc) !important;
  font-size: 1.4rem !important;
  line-height: 1.15 !important;
}
body.actor-page-r8 .apX-longbio__body,
body[data-page="actor"] .apX-longbio__body {
  overflow: hidden !important;
  position: relative !important;
}
body.actor-page-r8 .apX-bio2,
body[data-page="actor"] .apX-bio2 {
  float: right !important;
  width: 240px !important;
  max-width: 42% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: center top !important;
  margin: 8px 0 0 22px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(20,30,60,.16) !important;
}

/* Voice profile stays below the demo player inside the player column. */
body.actor-page-r8 .apX-vp,
body[data-page="actor"] .apX-vp {
  grid-column: auto !important;
  grid-row: auto !important;
  margin-top: 0 !important;
}

/* Copy home/specialty family-card behavior by cancelling actor-page overrides. */
body.actor-page-r8 .apX-extra-band .fam-cards__nav,
body[data-page="actor"] .apX-extra-band .fam-cards__nav {
  top: 50% !important;
}
body.actor-page-r8 .apX-extra-band .fam-card__peek,
body[data-page="actor"] .apX-extra-band .fam-card__peek {
  top: -95px !important;
  width: 150px !important;
  height: 100px !important;
  border-radius: 10px 10px 0 0 !important;
}
body.actor-page-r8 .apX-extra-band .fam-card__body,
body[data-page="actor"] .apX-extra-band .fam-card__body {
  padding: 5px 10px 0 !important;
  margin-top: 0 !important;
}
body.actor-page-r8 .apX-extra-band .fam-cards__track,
body[data-page="actor"] .apX-extra-band .fam-cards__track {
  padding: 96px 18px 24px !important;
}

/* ---------- <1261: full-width body container, same internal layout ---------- */
@media (max-width: 1260px) {
  body.actor-page-r8 main.main-container,
  body[data-page="actor"] main.main-container {
    max-width: none !important;
    width: 100% !important;
    margin: 30px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* ---------- <901: 1/3 + 2/3 columns; actor+bio left, VP+player right ---------- */
/* Round 54: replaced 50/50 with 1/3 + 2/3 layout. Disabled the old 50/50 block. */
@media (min-width: 761px) and (max-width: 900px) {
  body.actor-page-r8 .apX-row,
  body[data-page="actor"] .apX-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 2fr) !important;
    grid-template-areas:
      "left player"
      "story player" !important;
    gap: 18px !important;
    align-items: start !important;
    padding: 18px !important;
  }
}

/* ---------- <761: row 1 image/video 50/50; then player, VP, story ---------- */
@media (max-width: 760px) {
  body.actor-page-r8 .apX-row,
  body[data-page="actor"] .apX-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "image video"
      "player player"
      "story story" !important;
    gap: 14px !important;
    padding: 14px !important;
  }
  body.actor-page-r8 .apX-row > .apX-player,
  body[data-page="actor"] .apX-row > .apX-player {
    gap: 14px !important;
  }
  /* Round 54: cap actor image at 400px on mobile */
  body.actor-page-r8 .apX-bio1,
  body[data-page="actor"] .apX-bio1 {
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------- MOBILE: single column full-width sequence ---------- */
@media (max-width: 560px) {
  body.actor-page-r8 main.main-container,
  body[data-page="actor"] main.main-container {
    margin-top: 0 !important;
  }
  body.actor-page-r8 .main-row-title,
  body[data-page="actor"] .main-row-title {
    min-height: 76px !important;
    padding: 14px 12px 10px !important;
  }
  body.actor-page-r8 .main-row-title h1,
  body[data-page="actor"] .main-row-title h1 {
    font-size: clamp(1.9rem, 12vw, 3rem) !important;
  }
  body.actor-page-r8 .main-row-title__subtitle,
  body[data-page="actor"] .main-row-title__subtitle {
    font-size: .9rem !important;
  }
  body.actor-page-r8 .apX-row,
  body[data-page="actor"] .apX-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "image"
      "video"
      "player"
      "story" !important;
    gap: 14px !important;
    padding: 12px !important;
  }
  body.actor-page-r8 .apX-longbio,
  body[data-page="actor"] .apX-longbio {
    border-left: 0 !important;
    border-radius: 0 !important;
    padding: 10px 0 0 !important;
    font-size: .96rem !important;
  }
  body.actor-page-r8 .apX-longbio h2,
  body[data-page="actor"] .apX-longbio h2 {
    text-align: center !important;
    margin: 0 0 12px !important;
  }
  body.actor-page-r8 .apX-longbio__body,
  body[data-page="actor"] .apX-longbio__body {
    overflow: visible !important;
  }
  body.actor-page-r8 .apX-bio2,
  body[data-page="actor"] .apX-bio2 {
    float: none !important;
    display: block !important;
    width: 80vw !important;
    max-width: 80vw !important;
    margin: 0 auto 14px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 760px) {
  body.actor-page-r8 .apX-extra-band .fam-cards__track,
  body[data-page="actor"] .apX-extra-band .fam-cards__track {
    padding: 88px 14px 20px !important;
  }
  body.actor-page-r8 .apX-extra-band .fam-card__peek,
  body[data-page="actor"] .apX-extra-band .fam-card__peek {
    width: 130px !important;
    height: 86px !important;
    top: -82px !important;
  }
  body.actor-page-r8 .apX-extra-band .fam-card__body,
  body[data-page="actor"] .apX-extra-band .fam-card__body {
    padding: 5px 8px 0 !important;
    margin-top: 0 !important;
  }
}