/* video.html - the single video page. Loaded by video.html alone, after the
   site's stylesheets and video-library.css. Everything here is prefixed vp-
   (or narrows a vl- rule to this page) and restyles nothing in the header,
   menu or footer. Colours are the site's tokens: purple #3A2A66 / #2E2150,
   gold #BB863F, deep gold #8A6222 for small gold text on light, cream #FBF9F4
   for the page. The near-black rgb(18, 12, 38) is the ground the library's
   own chips already use.

   Layout: one column up to 1100px; from 1100px a main column (68) and a side
   column (32). The script moves "Presented by" and "More videos" into the
   side column at that width, so the reading and Tab order always match what
   is on screen. */

.vp [hidden] { display: none !important; }

/* ---- The band is the page's hero: breadcrumb, title, facts --------------------
   The Video Library hero's own purple gradient and gold rule (.vl-hero). Three
   rows: a small breadcrumb whose last crumb is this page; the h1; one line of
   facts. The band keeps a fixed minimum height, so it is the same band while
   the page loads and for a short or a long title. Type is Lora 600 and Inter
   400 - the two files every page preloads - so nothing re-wraps when fonts
   arrive.
   Spacing: the block (breadcrumb, category, title, facts) is centred in the
   band - the same room above and below it - with a fixed rhythm between the
   lines of text: breadcrumb 20px category 10px title 12px facts. The 44px
   press areas of the breadcrumb links and of the category reach into that
   room (the breadcrumb's mostly upwards, the category's up to the
   breadcrumb's and down into the 10px gap) without overlapping each other or
   the title's words. */
.vp-band > .container { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-height: 14.25rem; padding-block: 1.5rem; }
.vp-crumbs ol { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; margin: 0; padding: 0; }
.vp-crumbs li { flex: none; display: inline-flex; align-items: center; min-width: 0; margin: 0; padding: 0; max-width: none; font-size: 0.8125rem; line-height: 16px; white-space: nowrap; color: var(--white); }
.vp-crumbs li + li::before { content: "\203A"; flex: none; margin: 0 0.55rem; font-size: 1.15em; line-height: 1; color: var(--guide-gold-light); }
/* a breadcrumb link: its line is 16px; its press area is 44px - 24px above the line, 4px below */
.vp-crumbs a { display: inline-block; box-sizing: border-box; min-height: 44px; padding: 24px 0 4px; margin: -24px 0 -4px; color: var(--white); text-decoration: underline; text-decoration-color: rgba(231, 201, 122, 0.75); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.vp-crumbs a:hover { color: var(--guide-gold-light); }
.vp-crumbs a:focus-visible { outline: 3px solid var(--guide-gold-light); outline-offset: 2px; border-radius: 6px; }
.vp-crumbs .vp-crumbs__here { flex: 0 1 auto; color: var(--lavender); }      /* #F2EEF8 on --purple 11.0:1, on --purple-deep 13.0:1 */
.vp-crumbs__here > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-single.is-missing .vp-crumbs__here, .vl-single.is-missing .vp-band .vp-meta, .vp-band .vp-title:empty { display: none; }
/* the category: a small gold eyebrow over the title, a link to its section of the library.
   One line of 16px; its press area is 44px - 16px above the line (up to the breadcrumb
   links' area) and 12px below (into the 10px gap and the title's top half-leading). */
.vp-band__cat { display: flex; margin: 20px 0 0; max-width: none; min-width: 0; }
.vp-band__cat a { display: inline-block; box-sizing: border-box; min-width: 44px; min-height: 44px; max-width: 100%; padding: 16px 0 12px; margin: -16px 0 -12px; overflow: hidden; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; line-height: 16px; text-transform: uppercase; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; color: var(--guide-gold-light); }      /* #E7C97A: 9.0:1 on --purple-deep, 7.6:1 on --purple */
.vp-band__cat a:hover { text-decoration: underline; text-underline-offset: 4px; }
.vp-band__cat a:focus-visible { outline: 3px solid var(--guide-gold-light); outline-offset: -3px; border-radius: 6px; }
.vl-single.is-missing .vp-band__cat { display: none; }
.vp-band__cat:not([hidden]) + .vp-title { margin-top: 10px; }
.vp-band .vp-title { margin: 20px 0 0; max-width: none; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.25rem, 0.82rem + 2.15vw, 2.1rem); line-height: 1.2; overflow-wrap: break-word; color: var(--white); }      /* 14.6:1 */
.vp-band .vp-title.is-long { font-size: clamp(1.0625rem, 0.72rem + 1.72vw, 1.95rem); }
.vp-band .vp-meta { list-style: none; display: flex; flex-wrap: wrap; margin: 12px 0 0; padding: 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; color: var(--lavender); }
.vp-band .vp-meta li { margin: 0; padding: 0; max-width: none; white-space: nowrap; }
.vp-band .vp-meta li:not(:last-child)::after { content: "\00B7"; margin: 0 0.6rem; color: var(--guide-gold-light); }
.vp-band .vp-meta time { font-variant-numeric: tabular-nums; color: var(--white); }
/* phones: "< GEM Video Library" and the title, on one row */
@media (max-width: 47.99rem) {
  /* the band's height is reserved here too - room for the breadcrumb, the category, three lines of title and two of facts -
     so it is the same band before the title arrives and after, whatever the title's length */
  .vp-band > .container { min-height: calc(88px + 3.6 * clamp(1.0625rem, 5.2vw, 1.5rem) + 4.6rem); padding-block: 1.5rem; }
  .vp-crumbs .vp-crumbs__up { display: none; }
  .vp-crumbs .vp-crumbs__lib::before { content: "\2039"; margin: 0 0.4rem 0 0; line-height: 1; }
  .vp-band .vp-title { font-size: clamp(1.0625rem, 5.2vw, 1.5rem); }
  .vp-band .vp-title.is-long { font-size: clamp(0.9375rem, 4.7vw, 1.3rem); }      /* three lines at most, down to a 320px screen */
  .vp-band .vp-meta { font-size: 0.8125rem; }
  .vp-band .vp-meta li:not(:last-child)::after { margin: 0 0.4rem; }
  /* phone reading order (2026-10-11): player, actions, presenter, Discussion, More videos, Previous/Next.
     The blocks are siblings of the one-column grid .vp-main, so this is CSS order alone; at wider
     widths no order is set and the written order stands. The hidden slot spans and the hidden case
     section take no part. */
  .vp-main > .vp-player { order: 1; }
  .vp-main > .vp-advisory { order: 1; }      /* the line under the player follows it (same order, written order) */
  .vp-main > .vp-head { order: 2; }
  .vp-main > .vp-presenter { order: 3; }
  .vp-main > .vp-case { order: 4; }
  .vp-main > .vl-discussion { order: 5; }
  .vp-main > .vp-more { order: 6; }
  .vp-main > .vp-steps { order: 7; }
  .vp .vp-actions .vp-jump { display: inline-flex; }      /* the "Discussion" jump link in the actions row (outranks the rule below) */
}
/* the jump link exists on phones only: not shown and not in the Tab order elsewhere
   (two classes, so it outranks .vp-textlink's display, which comes later in this file) */
.vp-actions .vp-jump { display: none; }
/* the jump scrolls smoothly, unless the person has asked for less motion (styles.css then forces auto) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---- The page ground ---------------------------------------------------------- */
.vp-page { padding-block: clamp(1.25rem, 2.6vw, 1.75rem) clamp(3rem, 6vw, 4.5rem); background: var(--cream); }
/* Nothing half-built is ever seen: until the page is ready the band and the page
   ground are not drawn at all (their room is kept), only the "Loading" line. So
   when the site header settles into place just after the first paint, there is
   no empty band on screen to be nudged with it. */
.vl-single.vp:not(.is-ready) > .vp-band, .vl-single.vp:not(.is-ready) > .vp-page { visibility: hidden; }
.vl-single:not(.is-ready) > .vp-page .vl-state { visibility: visible; }
.vp-layout, .vp-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.vp-side { display: none; }
@media (min-width: 1100px) {
  .vp-layout { grid-template-columns: minmax(0, 68fr) minmax(0, 32fr); gap: 2rem; align-items: start; }
  .vp-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
/* the side column stays in view while the main column scrolls. The script adds
   is-sticky only when the whole column fits in the window under the header;
   in a shorter window it scrolls with the page, so its last rows can always be reached. */
@media (min-width: 1100px) {
  .vp-side.is-sticky { position: sticky; top: calc(var(--header-h, 5.5rem) + 1rem); }
  .vp-side .vp-row__title { -webkit-line-clamp: 2; }      /* the whole title is still read out, and shows on hover */
  .vp-side .vp-row__link { grid-template-columns: 6.75rem minmax(0, 1fr); padding-block: 0.4rem; }
}
@media (max-width: 29.99rem) { .vp .vp-page > .container, .vp .vp-band > .container { padding-inline: 1rem; } }

/* ---- m1: the player box -----------------------------------------------------
   One 16:9 box. It holds the cover first and the player after "Watch video";
   the box itself never changes size. From tablet width up its height is capped so
   the whole box fits in the window under the header and the band. The cap's floor is
   28rem (2026-10-17, meeting item 3; was 26rem): a phone turned sideways - say 863x360,
   where the height term goes negative - gets a 448px stage, above the ~430px at which
   Vimeo folds its control bar, so the full bar with its Fullscreen button shows. On a
   desktop window the height term is far larger and the floor never binds: unchanged. */
.vp-player { overflow: hidden; border-radius: 16px; background: rgb(18, 12, 38); box-shadow: 0 1px 2px rgba(46, 33, 80, 0.18), 0 18px 40px rgba(46, 33, 80, 0.2); }
.vp-player.is-gated { background: var(--video-paused-bg); }      /* gated: the bands beside a width-capped stage match the prompt's ground */
.vp-stage { width: 100%; margin-inline: auto; border-radius: 0; box-shadow: none; }
/* the Alibaba-hosted copy plays in a native <video> that fills the same box; the advisory stays over it until it plays */
.vp-stage video.vp-native { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.vp-stage video.vp-native:focus-visible { outline: 3px solid var(--guide-gold-light); outline-offset: -3px; }
/* the advisory (2026-10-12, Maggie): one plain line under the player and above the actions row, the
   bar's small size (clamp 12-15px), normal weight, --text-muted, no box. The grid's 24px gap is pulled
   in to ~10px above it and ~12px below. --text-muted #5B5670 on the cream page 6.7:1. (The captions note
   that followed it on the Alibaba path left on 2026-10-17, Maggie.) */
.vp-advisory { margin: -0.875rem 0 -0.75rem; max-width: none; font-size: clamp(0.75rem, 1.5vw, 0.9375rem); font-weight: 400; line-height: 1.5; text-align: left; color: var(--text-muted); }
.vp-advisory[hidden] { display: none; }
@media (min-width: 48rem) {
  .vp-stage { max-width: max(28rem, calc((100vh - var(--header-h, 5.5rem) - 18.5rem) * 16 / 9)); }
}
.vp-cover { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr); justify-items: start; padding: clamp(0.5rem, 2vw, 1.1rem); color: var(--white); background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple) 100%); }
/* every cover is the picture and the button (the advisory bar left the cover on 2026-10-12); a Patient Video keeps its button low */
.vp-cover--plain { grid-template-rows: minmax(0, 1fr); }
.vp-cover--plain .vp-cover__btn { align-self: end; margin-bottom: clamp(0.35rem, 2.5%, 1.25rem); }
.vp-cover__img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.vp-cover__shade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(18, 12, 38, 0.25) 0%, rgba(18, 12, 38, 0.45) 100%); }      /* light, so the title slide stays readable; the pill and the button carry their own solid grounds */
.vp-cover__btn { position: relative; place-self: center; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 48px; margin: 0; padding: 0.5rem 1.4rem 0.5rem 0.85rem; border: 0; border-radius: 999px; background: var(--gold); font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.2; white-space: nowrap; color: rgb(18, 12, 38); cursor: pointer; box-shadow: 0 0 0 4px rgba(18, 12, 38, 0.4), 0 8px 22px rgba(0, 0, 0, 0.38); transition: transform 0.2s ease, background-color 0.2s ease; }      /* rgb(18,12,38) on --gold 5.9:1 */
.vp-cover__btn:hover { transform: scale(1.05); background: var(--guide-gold-light); }      /* on #E7C97A 11.4:1 */
.vp-cover__btn:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }
.vp-cover__play { flex: none; width: 1.9rem; height: 1.9rem; }
@media (max-width: 29.99rem) {
  .vp-cover { padding: 0.4rem; }
  .vp-cover__btn { min-height: 44px; padding-block: 0.3rem; font-size: 0.9375rem; }
}

/* ---- the members preview gate (2026-10-11): over the player box, covering the controls, so
   playback cannot be resumed under it. Absolute inside the 16:9 stage: nothing on the page moves
   when it appears. Gold rule, white and lavender text, a light-gold button. No animation.
   Ground (2026-10-12): the video's own title slide (.vp-gate__img, object-fit: cover, centred) under
   a scrim of --video-paused-scrim, so the prompt reads as the paused video; --video-paused-bg
   #072944 is the ground when there is no slide or it fails to load. Measured on the lightest slide
   pixel (white, gem-vl-01 and gem-vl-08) under the 78% scrim: white 7.4:1, --lavender #F2EEF8
   6.5:1, the button's --guide-gold-light edge 4.6:1; on the solid ground white 14.9:1, lavender
   13.0:1; button --purple-deep on --guide-gold-light #E7C97A 9.0:1. */
.vp-stage .vp-gate { position: absolute; top: 0; left: 0; z-index: 3; box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: clamp(0.5rem, 2.5vw, 2rem); overflow: auto; text-align: center; background: var(--video-paused-bg); border-top: 3px solid var(--gold); color: var(--white); }
.vp-gate__img { position: absolute; top: 0; left: 0; z-index: 0; display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: center; pointer-events: none; }
.vp-gate::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: var(--video-paused-scrim); pointer-events: none; }
.vp-gate__title, .vp-gate__text, .vp-gate__btn, .vp-gate__login { position: relative; z-index: 2; }
.vp-gate__title { margin: 0; max-width: none; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.05rem, 3.4vw, 1.6rem); line-height: 1.2; color: var(--white); }
.vp-gate__title:focus { outline: none; }      /* the focus target when the prompt appears; the group is read as a whole */
.vp-gate__text { margin: 0; max-width: 34ch; font-size: clamp(0.8125rem, 2.3vw, 1rem); line-height: 1.45; color: var(--lavender); }
.vp-gate__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 0.25rem; padding: 0.5rem 1.4rem; border-radius: 999px; background: var(--guide-gold-light); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700; line-height: 1.2; color: var(--purple-deep); text-decoration: none; }
.vp-gate__btn:hover { background: var(--white); color: var(--purple-deep); }      /* 14.5:1 (the site's generic link hover would otherwise lighten it) */
.vp-gate__btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.vp-gate__login { margin: 0; max-width: none; font-size: 0.875rem; line-height: 1.4; color: var(--lavender); }
.vp-gate__login a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0.3rem; font-weight: 600; color: var(--white); text-decoration: underline; text-decoration-color: var(--guide-gold-light); text-underline-offset: 3px; }
.vp-gate__login a:hover { color: var(--guide-gold-light); }
.vp-gate__login a:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; border-radius: 6px; }

/* ---- m3: the actions under the player (the title and the facts are in the band) */
.vp-head { padding-bottom: 1.5rem; border-bottom: 1px solid rgba(187, 134, 63, 0.45); }      /* a thin gold hairline closes the block */
.vp-title--missing { margin: 0; max-width: none; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.35rem, 2.5vw, 1.8rem); line-height: 1.24; color: var(--purple-deep); }
.vp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.vp-copy, .vp-fullscreen { box-sizing: border-box; min-width: 9rem; min-height: 44px; margin: 0; padding: 0.55rem 1.2rem; border: 1.5px solid var(--purple); border-radius: 999px; background: var(--white); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; line-height: 1.2; color: var(--purple); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }      /* 11.7:1 */
.vp-copy:hover, .vp-fullscreen:hover { background: var(--purple); color: var(--white); }
.vp-copy.is-done, .vp-copy.is-done:hover { border-color: var(--gold); background: var(--white); color: var(--gold-deep); }      /* 5.4:1 */
/* "Full screen" (2026-10-17, meeting item 3): phones only. Vimeo folds its own Fullscreen button behind a 24px
   "Show controls" chevron whenever the player is ~430px wide or less - every phone in portrait - so the actions
   row carries a 44px button of its own, in the Copy link outline (the rules above), with an expand icon in the
   text colour. The script shows it once a player is on the stage ([hidden] until then, and again while the
   preview gate covers the player); from 48rem up it is never displayed - the player is wide enough there for
   Vimeo's full bar. Purple on white 11.7:1, white on purple on hover 11.7:1. */
.vp-fullscreen { display: none; align-items: center; justify-content: center; gap: 0.45rem; }
.vp-fullscreen__icon { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
@media (max-width: 47.99rem) { .vp .vp-actions .vp-fullscreen:not([hidden]) { display: inline-flex; } }
.vp-textlink { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; font-size: 0.9375rem; font-weight: 600; color: var(--purple); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }      /* 11.7:1 on white, 11.1:1 on cream */
.vp-textlink:hover { color: var(--purple-bright); }
.vp-copy:focus-visible, .vp-fullscreen:focus-visible, .vp-textlink:focus-visible, .vp-row__link:focus-visible, .vp-step:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.vp-textlink:focus-visible { border-radius: 6px; }

/* the inline medical disclaimer (2026-10-11): a native disclosure in the actions row. Closed, its
   summary is the old link, in the old place; open, the disclosure takes the whole row and its text
   sits under the summary, small and muted (--text-muted #5B5670 on the cream page: 6.6:1). Closed by
   default, keyboard-operable, no script. */
.vp-disclaimer { margin: 0; max-width: 100%; }
.vp-disclaimer > summary { list-style: none; cursor: pointer; }
.vp-disclaimer > summary::-webkit-details-marker { display: none; }
.vp-disclaimer[open] { flex-basis: 100%; }
.vp-disclaimer__body { margin: 0.5rem 0 0; max-width: 60ch; }
.vp-disclaimer__body p { margin: 0 0 0.5rem; max-width: none; font-size: 0.875rem; line-height: 1.55; color: var(--text-muted); }
.vp-disclaimer__body p:last-child { margin-bottom: 0; }
.vp-disclaimer__body .vp-textlink { font-size: 0.875rem; min-height: 44px; }

/* ---- Cards ----------------------------------------------------------------------
   White on the cream page, 16px corners, a soft two-layer shadow and a thin
   gold hairline along the top that fades out to the right. */
.vp-card { position: relative; margin: 0; padding: 1.35rem 1.25rem 1.25rem; border: 1px solid rgba(58, 42, 102, 0.08); border-radius: 16px; background: var(--white); box-shadow: 0 1px 2px rgba(46, 33, 80, 0.06), 0 12px 30px rgba(46, 33, 80, 0.08); }
.vp-card::before { content: ""; position: absolute; top: -1px; left: 1.25rem; right: 1.25rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold) 0%, rgba(187, 134, 63, 0) 100%); }
.vp-label { margin: 0 0 0.9rem; max-width: none; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; line-height: 1.4; text-transform: uppercase; color: var(--gold-deep); }      /* 5.4:1 on white */
.vp-heading { margin: 0 0 0.75rem; max-width: none; font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: var(--purple-deep); }

/* m4: the presenter */
.vp-presenter__row { display: flex; align-items: center; gap: 1rem; }
.vp-presenter__photo { flex: none; display: block; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--gold); }
.vp-presenter__body { min-width: 0; }
.vp-presenter__name { margin: 0; max-width: none; font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--purple-deep); }
.vp-presenter__role { margin: 0.15rem 0 0; max-width: none; font-size: 0.9375rem; line-height: 1.4; color: var(--text-warm); }
.vp-presenter__more { margin: 0.5rem 0 -0.5rem; max-width: none; }

/* m5: case information - the record's own words, nothing added */
.vp-case__body > * { margin: 0; max-width: none; }
.vp-case__body > * + * { margin-top: 0.7rem; }
.vp-case__body h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: var(--purple-deep); }
.vp-case__body p { font-size: 1rem; line-height: 1.6; color: var(--text); white-space: pre-line; overflow-wrap: break-word; }

/* m7: previous / next */
.vp-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 40rem) {
  .vp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-step--prev { grid-column: 1; }
  .vp-step--next { grid-column: 2; }
}
.vp-step { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); align-items: center; gap: 0.9rem; min-height: 44px; padding: 0.85rem; border: 1px solid rgba(58, 42, 102, 0.08); border-radius: 16px; background: var(--white); color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(46, 33, 80, 0.06), 0 10px 26px rgba(46, 33, 80, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.vp-step:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(46, 33, 80, 0.1), 0 18px 36px rgba(46, 33, 80, 0.14); }
.vp-step__label { display: block; margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; color: var(--gold-deep); }
.vp-step__title, .vp-row__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: break-word; }
.vp-step__title { font-family: var(--font-head); font-weight: 600; font-size: 0.9375rem; line-height: 1.35; color: var(--purple-deep); }
.vp-step:hover .vp-step__title, .vp-row__link:hover .vp-row__title { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* a small still of the title slide (never a play button: the whole row or card is the link) */
.vp-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple) 100%); box-shadow: 0 1px 2px rgba(46, 33, 80, 0.2); }
.vp-thumb img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* m8: the other videos, as compact rows */
.vp-rows { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; margin: 0 -0.5rem -0.5rem; padding: 0; }
.vp-rows > li { margin: 0; padding: 0; max-width: none; }
.vp-row__link { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); align-items: center; gap: 0.85rem; min-height: 44px; padding: 0.5rem; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease; }
.vp-row__link:hover { background: var(--lavender-light); transform: translateY(-2px); }
.vp-row__title { font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--purple-deep); }      /* 13.5:1 on --lavender-light */
.vp-row__len { display: block; margin-top: 0.2rem; font-size: 0.8125rem; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--text-muted); }      /* 6.5:1 on --lavender-light */
@media (min-width: 40rem) and (max-width: 1099.98px) { .vp-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; } }

/* "This video isn't available" */
.vp-missing { display: grid; gap: 1.25rem; justify-items: start; padding-block: 1rem 2rem; }
.vp-missing p { margin: 0; max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .vp-cover__btn, .vp-copy, .vp-step, .vp-row__link { transition: none; }
  .vp-cover__btn:hover, .vp-step:hover, .vp-row__link:hover { transform: none; }
}