/* GEM Video Library (gem-video-library.html), the "Featured Surgical Videos"
   carousel on professional-education.html, and the single video page
   (video.html). Loaded AFTER the site's own stylesheets and only by those
   three pages. Everything here is prefixed vl- and
   restyles nothing in the header, menu or footer. Colours are the site's
   tokens (purple #3A2A66 / #2E2150, gold #BB863F, light gold #E7C97A for small
   text on purple). */

/* Chinese text (when it is switched on): system Chinese faces after the site's own fonts. */
#main [lang="zh-Hans"] { font-family: var(--font-body), "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }

/* The room for the scrollbar is kept at all times, so opening the player
   (which stops the page behind from scrolling) moves nothing sideways. */
html { scrollbar-gutter: stable; }
html.vl-locked { overflow: hidden; }

/* ---- Hero ----------------------------------------------------------------------
   A deep-purple band with the proportions of the Experts page hero: left
   aligned, the same depth, a gold rule along its foot. */
.vl-hero {
  background:
    radial-gradient(900px 480px at 92% -30%, rgba(187, 134, 63, 0.26), transparent 62%),
    linear-gradient(120deg, var(--purple-deep) 0%, var(--purple-deep) 55%, var(--purple) 100%);
  border-bottom: 2px solid var(--gold);
  color: var(--white);
}
.vl-hero > .container { padding-block: clamp(1.9rem, 5vw, 3.6rem); }
.vl-hero__eyebrow { margin: 0 0 0.5rem; max-width: none; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--guide-gold-light); }   /* 9.0:1 on --purple-deep, 7.6:1 on --purple */
.vl-hero__title { margin: 0; max-width: none; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.7rem, 4.5vw, 2.61rem); line-height: 1.12; color: var(--white); }   /* 14.6:1 */
.vl-hero__intro { margin: 0.6rem 0 0; max-width: 56ch; font-size: clamp(1rem, 2.2vw, 1.2rem); line-height: 1.5; color: var(--white); }
/* the one small line under the subtitle (2026-10-12): the advisory sentence, in the place and the
   style of the former line of figures - small, semibold, white, no box, no icon. Static HTML, so
   nothing moves when the script runs. White on --purple-deep 14.5:1, on --purple 12.3:1. */
.vl-hero__line { margin: 1.1rem 0 0; max-width: none; font-size: 0.9375rem; font-weight: 600; line-height: 1.5; color: var(--white); }

/* ---- The advisory: one notice for the whole page -------------------------------- */
.vl-advisory {
  display: flex; align-items: flex-start; gap: 0.75rem; margin: 0 0 2rem; max-width: none; padding: 0.9rem 1.1rem;
  background: var(--cream); border: 1px solid rgba(187, 134, 63, 0.55); border-left: 4px solid var(--gold); border-radius: 12px;
  font-size: 0.9375rem; font-weight: 600; line-height: 1.5; color: var(--purple-deep);      /* 13.9:1 */
}
.vl-advisory__icon { flex: none; width: 22px; height: 22px; margin-top: 0.05rem; color: var(--gold-deep); }
/* the compact form, under the carousel's heading on professional-education.html */
.vl-advisory--compact { display: inline-flex; gap: 0.55rem; margin: 0 0 1rem; max-width: 100%; padding: 0.5rem 0.85rem 0.5rem 0.7rem; border-left-width: 3px; border-radius: 10px; font-size: 0.875rem; line-height: 1.45; }
.vl-advisory--compact .vl-advisory__icon { width: 18px; height: 18px; margin-top: 0.1rem; }

/* ---- Loading / nothing yet / could not load ---------------------------------- */
.vl-state { padding: 0.5rem 0; }
.vl-state[hidden] { display: none; }
.vl-state__line { margin: 0; max-width: none; font-size: 1.0625rem; color: var(--text-warm); }   /* 8.9:1 on white */
.vl-state__group { display: grid; gap: 1rem; justify-items: start; }
.vl-retry { min-height: 44px; }

/* ---- The grid: 1 column on phones, 2 on tablets, 3 from 1100px ------------------- */
.vl-videos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 1.5rem; }
.vl-videos[hidden] { display: none; }
@media (min-width: 40rem) { .vl-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vl-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vl-card { min-width: 0; margin: 0; padding: 0; }

/* ---- The library page, by category ------------------------------------------------
   One section per category: its name (h2), the number of videos, a thin gold
   rule, then the same card grid. Above them - only when there are two or more
   categories - a row of chips that show one section or all. */
.vl-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 3.5rem); }
.vl-groups[hidden], .vl-cat[hidden] { display: none; }
.vl-cat { min-width: 0; }      /* #slug lands below the site header: the site's own scroll-padding sees to that */
.vl-cat__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; margin: 0 0 1.5rem; padding-bottom: 0.65rem; border-bottom: 1px solid rgba(187, 134, 63, 0.45); }
.vl-cat__title { margin: 0; max-width: none; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.25; color: var(--purple-deep); }      /* 14.6:1 on white */
.vl-cat__count { margin: 0; max-width: none; font-size: 0.9375rem; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--text-warm); }      /* 8.9:1 */
/* ONE CARD PER CATEGORY ON PHONES (2026-10-17 Maggie; revised 2026-10-29, Maggie). In the "All" view under 48rem
   the script shows every section as its heading, its first card and a "See all N <Category> videos" button
   (section.is-folding - the class keeps its 17 Oct name; the fold itself, its heading toggle, chevron and grid
   transition went on 29 Oct: nothing folds, the headings are plain titles). The "See all" button is the site's
   outline button (1.5px --purple, pill, white, 44px - the Copy link style of the video page). No new colours.
   Outside that view (and the desktop rows) the button carries [hidden] and these rules sleep. */
.vl-cat__all { box-sizing: border-box; display: block; width: 100%; min-height: 44px; margin: 1.25rem 0 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; text-align: center; color: var(--purple); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }      /* 11.7:1 */
.vl-cat__all:hover { background: var(--purple); color: var(--white); }
.vl-cat__all:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.vl-cat__all[hidden] { display: none; }
/* ---- THE CONTROLS (2026-10-21, the client's design): ONE ROW from 48rem - the category drop-down at the
   left, showing the current choice with its count, and the search box at its right, the same height - and
   the two stacked at full width on a phone; a muted caption ("51 videos in 4 categories") under the row.
   The row has its height from the start (visibility: hidden until the script has filled it), so nothing
   moves when it appears. The sidebar of the same day and the chip row of 17 Oct are gone (git keeps them). */
.vl-tabbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem 1rem; margin: -0.85rem 0 0.6rem; }
.vl-tabbar[hidden] { display: none; }
.vl-tabbar:not(.is-ready) { visibility: hidden; }
.vl-cats__sum { margin: 0 0 1.25rem; max-width: none; font-size: 0.8125rem; line-height: 1.4; color: #5a5466; }      /* #5a5466 on white 7.1:1 */
/* the drop-down (17 Oct's control, restored; 2026-10-21 later: a soft 10px rectangle, 48px, a 1px --purple edge, the
   same as the search box beside it): the trigger with the current
   choice and its count and a gold caret; a white panel with a soft shadow under it, role=menu, one 44px
   menuitemradio per choice with its count at the right - hover #faf8fd, the checked one #eee8f6 + 700 + a
   3px --gold bar on the left edge, the ring inside the edge; the panel scrolls inside itself beyond ~10
   items. --purple on white 11.7:1, on #faf8fd 11.5:1, on #eee8f6 10.4:1; the counts --text-muted 7.0:1. */
.vl-cats { position: relative; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.vl-cats__btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.6rem; box-sizing: border-box; width: 100%; max-width: 100%; min-height: 48px; margin: 0; padding: 0.5rem 1rem; border: 1px solid var(--purple); border-radius: 10px; 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.12s ease; }
.vl-cats__btn:hover { background: #faf8fd; }
.vl-cats__btn[aria-expanded="true"] { background: #eee8f6; }
.vl-cats__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.vl-cats__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-cats__caret { flex: none; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--gold); transition: transform 0.12s ease; }
.vl-cats__btn[aria-expanded="true"] .vl-cats__caret { transform: rotate(180deg); }
.vl-cats__list { position: absolute; top: calc(100% + 0.35rem); left: 0; z-index: 20; box-sizing: border-box; min-width: 100%; width: max-content; max-width: min(24rem, calc(100vw - 2rem)); max-height: min(60vh, 30rem); overflow: auto; margin: 0; padding: 0.35rem; list-style: none; border: 1px solid var(--purple); border-radius: 10px; background: var(--white); box-shadow: 0 2px 6px rgba(46, 33, 80, 0.12), 0 14px 34px rgba(46, 33, 80, 0.18); }
.vl-cats__list[hidden] { display: none; }
.vl-cats__list:focus { outline: none; }
.vl-cats__opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; box-sizing: border-box; min-height: 44px; margin: 0; padding: 0.55rem 1rem; border-left: 3px solid transparent; border-radius: 8px; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--purple); cursor: pointer; transition: background-color 0.12s ease; }
.vl-cats__opt + .vl-cats__opt { margin-top: 2px; }
.vl-cats__opt:hover { background: #faf8fd; }
.vl-cats__opt:focus { outline: none; background: #faf8fd; }
.vl-cats__opt:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.vl-cats__opt[aria-checked="true"] { background: #eee8f6; border-left-color: var(--gold); font-weight: 700; }
.vl-cats__opt__count { flex: none; font-weight: 400; color: var(--text-muted); }
/* the search box: 44px, a magnifier inside at the left; beside the drop-down from 48rem, its own full-width
   line under it on a phone */
.vl-search { position: relative; flex: 0 0 20rem; margin: 0; }
.vl-search__icon { position: absolute; top: 50%; left: 0.9rem; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.vl-search input { display: block; box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 0.5rem 1rem; border: 1px solid var(--purple); border-radius: 10px; background: var(--white); font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.3; color: var(--text); }      /* the edge --purple on white 11.7:1 (2026-10-21: the trigger's rectangle) */
.vl-search input::placeholder { color: var(--text-muted); opacity: 1; }      /* 6.9:1 */
.vl-search input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vl-search input { padding-left: 2.5rem; }
@media (max-width: 47.99rem) {
  .vl-cats { flex: 1 1 100%; }
  .vl-search { flex: 1 1 100%; margin: 0; }
}
/* a chosen category's heading reads "Name · N videos"; the same dot heads every section's count */
.vl-cat__count::before { content: "\00B7\00A0"; }
.vl-cat__title:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
/* CATEGORY ROWS (desktop "All", >= 64rem, unchanged from the sidebar round): the section's first three cards in
   one row of the three-column grid and the right-aligned "See all N <Category> videos →" link-button (the
   phone's See-all element, laid out for the row); the script sets .is-rows and [hidden] on the other cards. */
.vl-cat.is-rows .vl-cat__inner { display: flex; flex-direction: column; align-items: flex-end; }
.vl-cat.is-rows .vl-cat__list { align-self: stretch; }
.vl-cat.is-rows .vl-cat__all { display: inline-flex; align-items: center; gap: 0.4rem; width: auto; margin: 1rem 0 0; }
.vl-cat.is-rows .vl-cat__all::after { content: "\2192"; }
.vl-cat.is-rows .vl-cat__all[hidden] { display: none; }
@media (min-width: 64rem) { .vl-groups .vl-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }      /* three columns from 64rem, so a row is one row (the page's 1100px rule says the same above it) */
.vl-nomatch { margin: 0; max-width: none; font-size: 1.0625rem; color: var(--text-warm); }      /* empty (and no height) until nothing matches; 8.9:1 */
.vl-nomatch:not(:empty) { margin: 0.5rem 0 1.5rem; }

/* ---- The card --------------------------------------------------------------------
   The cover is the video's title slide, filling 16:9 from its top edge, under
   a 3px gold edge. Over it: a number chip (top right, clear of the slide's own
   heading, which starts top left), a gold play button
   (centre) and the length (bottom right) - nothing else. The title sits under
   the cover, once, two lines at most; then one topic tag. */
.vl-card__cover {
  position: relative; display: block; box-sizing: border-box; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0;
  overflow: hidden; border: 0; border-top: 3px solid var(--gold); border-radius: 12px; font: inherit; color: var(--white); cursor: pointer;
  background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple) 100%);      /* shows only if the slide cannot be fetched */
  box-shadow: 0 1px 2px rgba(46, 33, 80, 0.18), 0 8px 22px rgba(46, 33, 80, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vl-card__cover--off { cursor: default; }
/* the whole card - cover and title - is one link to the video's own page */
.vl-card__link { display: block; color: inherit; text-decoration: none; border-radius: 12px; }
a.vl-card__link:hover .vl-card__cover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(46, 33, 80, 0.2), 0 18px 36px rgba(46, 33, 80, 0.26); }
a.vl-card__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.vl-card__thumb { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* the chips sit on their own dark ground, so they read over any slide */
.vl-card__num, .vl-card__len, .vl-card__off {
  position: absolute; padding: 0.15rem 0.55rem; border-radius: 6px; background: rgb(18, 12, 38);
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; line-height: 1.45; font-variant-numeric: tabular-nums;
}
.vl-card__num { top: 0.6rem; right: 0.6rem; letter-spacing: 0.04em; color: var(--guide-gold-light); }      /* 11.4:1 */
.vl-card__len { right: 0.6rem; bottom: 0.6rem; color: var(--white); }                                      /* 18.6:1 */
.vl-card__off { left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; color: var(--white); }
.vl-card__play {
  position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 50%; background: var(--gold); color: var(--purple-deep); box-shadow: 0 0 0 4px rgba(18, 12, 38, 0.38), 0 6px 18px rgba(0, 0, 0, 0.35);      /* triangle on gold 4.5:1; the dark ring sets the button off any slide */
  transition: transform 0.2s ease;
}
a.vl-card__link:hover .vl-card__play, a.vl-card__link:focus-visible .vl-card__play { transform: scale(1.1); }
.vl-card__playicon { width: 58%; height: 58%; }
@media (max-width: 29.99rem) { .vl-card__play { width: 52px; height: 52px; margin: -26px 0 0 -26px; } }
.vl-card__title { margin: 0.8rem 0 0; max-width: none; min-height: 2.6em; font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; color: var(--purple-deep); }      /* 14.6:1 on white; room kept for two lines so every row lines up */
/* the words themselves: two lines at most, then an ellipsis. A link to the video's own page where there is one. */
.vl-card__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; color: inherit; text-decoration: none; }
a.vl-card__link:hover .vl-card__name { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.vl-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.55rem 0 0; max-width: none; min-height: 1.75rem; font-size: 0.8125rem; line-height: 1.4; }
/* the members tag (2026-10-11): quiet small text under the title on the library page's cards */
.vl-card__meta--access { min-height: 0; }
.vl-card__tag { font-size: 0.8125rem; font-weight: 500; line-height: 1.4; color: var(--text-muted); }      /* #5B5670: 7.0:1 on white, 6.6:1 on cream */
.vl-card__topic { padding: 0.15rem 0.7rem; border-radius: 999px; background: var(--lavender); font-size: 0.8125rem; font-weight: 600; color: var(--purple-deep); }      /* 12.7:1 */

/* ---- The carousel (professional-education.html) -----------------------------------
   One row of the same cards: 3 in view from 1100px, 2 on tablets, 1 on phones.
   The row's height is known before the cards arrive (cover + two title lines +
   the tag), so nothing below it moves when they do. */
.vl-carousel { --vl-gap: 1.5rem; --vl-per: 1; position: relative; container-type: inline-size; }
@media (min-width: 40rem) { .vl-carousel { --vl-per: 2; } }
@media (min-width: 1100px) { .vl-carousel { --vl-per: 3; } }
.vl-carousel__viewport {
  overflow: hidden; margin: -0.5rem -0.5rem 0; padding: 0.5rem 0.5rem 0.75rem;      /* room for the hover lift, the shadow and the focus ring */
  min-height: calc(((100cqi - (var(--vl-per) - 1) * var(--vl-gap)) / var(--vl-per)) * 9 / 16 + 3px + 0.8rem + 2.6 * 1.0625rem + 0.55rem + 1.75rem + 1.25rem);
}
.vl-carousel .vl-videos { display: flex; flex-wrap: nowrap; gap: var(--vl-gap); grid-template-columns: none; transition: transform 0.44s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; }
.vl-carousel .vl-videos[hidden] { display: none; }
.vl-carousel .vl-card { flex: 0 0 calc((100% - (var(--vl-per) - 1) * var(--vl-gap)) / var(--vl-per)); }
.vl-carousel .vl-state { position: absolute; left: 0; top: 0; padding: 0.5rem 0; }
/* Pause / Play and Previous / Next sit above the row (they come first for the keyboard too); the dots sit under it. */
.vl-carousel__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin: 0 0 0.6rem; min-height: 44px; }
.vl-carousel__dots { display: flex; justify-content: center; min-width: 0; min-height: 44px; }
.vl-carousel__dot { position: relative; flex: 0 1 44px; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.vl-carousel__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--purple); transition: background-color 0.15s ease; }      /* ring 11.7:1 on white */
.vl-carousel__dot:hover::before { background: rgba(58, 42, 102, 0.3); }
.vl-carousel__dot[aria-current="true"]::before { width: 26px; margin-left: -13px; border-radius: 999px; background: var(--purple); }
/* a thin gold line under the current dot fills over the 5.6 seconds before the next move (--vl-progress, 0 to 1, is set by the script) */
.vl-carousel__dot[aria-current="true"]::after {
  content: ""; position: absolute; left: 50%; top: calc(50% + 10px); width: 26px; height: 3px; margin-left: -13px; border-radius: 2px;
  background: linear-gradient(var(--gold), var(--gold)) left center / calc(var(--vl-progress, 0) * 100%) 100% no-repeat, rgba(58, 42, 102, 0.16);      /* gold 3.2:1 on white */
}
.vl-carousel.is-stopped .vl-carousel__dot::after, .vl-carousel.is-still .vl-carousel__dot::after { display: none; }      /* nothing is about to move */
.vl-carousel__toggle, .vl-carousel__prev, .vl-carousel__next {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--purple); border-radius: 999px; background: var(--white); color: var(--purple); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;      /* 11.7:1 */
}
.vl-carousel__toggle { padding: 0 1rem 0 0.7rem; }
.vl-carousel__toggle[hidden] { display: none; }
.vl-carousel__arrows { display: flex; gap: 0.5rem; margin-left: auto; }
.vl-carousel__toggle:hover, .vl-carousel__prev:hover, .vl-carousel__next:hover { background: var(--lavender); }
.vl-carousel__bar :focus-visible, .vl-carousel__dot:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vl-carousel__icon { width: 22px; height: 22px; flex: none; }
.vl-carousel:not(.is-ready) .vl-carousel__bar, .vl-carousel:not(.is-ready) .vl-carousel__dots { visibility: hidden; }      /* the controls appear with the cards, in room already kept for them */
@media (max-width: 29.99rem) { .vl-carousel__toggle > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .vl-carousel__toggle { padding: 0; } .vl-carousel__dots { margin-inline: -1.25rem; } }      /* seven dots take the phone's full width (the page gutter is 1.25rem), so each stays 44px on a 320px screen */

/* ---- The single video page (video.html) -------------------------------------------
   Player first: a short purple band (back link, title, length), then the
   advisory, the player at 16:9, and the other videos. */
.vl-hero--single > .container { padding-block: clamp(1.25rem, 3.4vw, 2.25rem) clamp(1.5rem, 3.8vw, 2.5rem); }
.vl-back { margin: 0 0 0.35rem; max-width: none; font-size: 0.9375rem; }
.vl-back a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; font-weight: 600; color: var(--guide-gold-light); text-decoration: none; }      /* 9.0:1 on --purple-deep */
.vl-back a:hover { text-decoration: underline; text-underline-offset: 4px; }
.vl-back a:focus-visible, .vl-more__link:focus-visible { outline: 3px solid var(--guide-gold-light); outline-offset: 3px; border-radius: 6px; }
.vl-hero--single .vl-hero__title { min-height: 1.12em; font-weight: 600; font-size: clamp(1.5rem, 3.6vw, 2.25rem); line-height: 1.2; overflow-wrap: break-word; }      /* weight 600 = the Lora file every page preloads, so the title does not re-wrap when a second font file arrives */
.vl-single__len { margin: 0.7rem 0 0; max-width: none; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--white); }
.vl-single__len[hidden] { display: none; }
.vl-single__lenlabel { font-weight: 400; color: var(--lavender); }
.vl-single .vl-advisory { margin-bottom: 1.25rem; }
.vl-single__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 1px 2px rgba(46, 33, 80, 0.18), 0 14px 34px rgba(46, 33, 80, 0.2); }
.vl-single__stage iframe { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; border: 0; }
.vl-single__stage iframe:focus-visible { outline: 3px solid var(--guide-gold-light); outline-offset: -3px; }
.vl-single__stage.is-error { aspect-ratio: auto; min-height: 12rem; background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple) 100%); }
#vl-watch[hidden], #vl-missing[hidden], .vl-more[hidden] { display: none; }
/* No layout shift while the video's details arrive: until the script marks the
   page ready, its parts are laid out but not painted (only "Loading" shows) and
   the page is kept taller than the window, so the footer never jumps. */
.vl-single:not(.is-ready) { min-height: 150vh; }
.vl-single:not(.is-ready) .vl-hero .container > *, .vl-single:not(.is-ready) > .section { visibility: hidden; }
.vl-single:not(.is-ready) .vl-state { visibility: visible; }
.vl-single.is-missing { min-height: 70vh; }
#vl-missing { display: grid; gap: 1rem; justify-items: start; padding: 0.5rem 0 1rem; }
.vl-more { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.vl-more__title { margin: 0 0 1.25rem; max-width: none; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.25; color: var(--purple-deep); }
.vl-more__link { display: block; color: inherit; text-decoration: none; }
.vl-more__link:focus-visible { outline-color: var(--focus); }
.vl-card__cover--still { cursor: inherit; }
.vl-more__link:hover .vl-card__cover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(46, 33, 80, 0.2), 0 18px 36px rgba(46, 33, 80, 0.26); }
.vl-more__link:hover .vl-card__title { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* ---- The lightbox ----------------------------------------------------------------
   Centred over the dimmed page; the player is 16:9 and at most 1100px wide,
   and never taller than the window allows. */
.vl-lightbox {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 1rem;
  background: rgba(18, 12, 38, 0.86);
}
.vl-lightbox[hidden] { display: none; }
.vl-lightbox__edge { position: absolute; width: 1px; height: 1px; overflow: hidden; outline: none; }
.vl-lightbox__frame { width: 100%; max-width: min(1100px, calc((100vh - 9.5rem) * 16 / 9)); min-width: min(100%, 17rem); }
.vl-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 0.6rem; }
.vl-lightbox__title { margin: 0; max-width: none; min-width: 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.3; color: var(--white); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.vl-lightbox__close {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.7); border-radius: 50%; background: transparent; color: var(--white); cursor: pointer;
}
.vl-lightbox__close:hover { background: var(--white); color: var(--purple-deep); }
.vl-lightbox__close:focus-visible, .vl-lightbox__again:focus-visible { outline: 3px solid var(--guide-gold-light); outline-offset: 3px; }
.vl-lightbox__x { width: 22px; height: 22px; }
.vl-lightbox__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); }
.vl-lightbox__stage iframe { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; border: 0; }
.vl-lightbox__stage iframe:focus-visible { outline: 3px solid var(--guide-gold-light); outline-offset: -3px; }
.vl-lightbox__hint { margin: 0.7rem 0 0; max-width: none; font-size: 0.875rem; line-height: 1.45; color: rgba(255, 255, 255, 0.86); }
/* the message may need more room than 16:9 on a narrow phone: the stage grows, never clips */
.vl-lightbox.is-error .vl-lightbox__stage { aspect-ratio: auto; min-height: 12rem; background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple) 100%); }
.vl-lightbox__error { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1rem; min-height: 12rem; padding: 1.5rem; }
.vl-lightbox__error .vl-state__line { font-size: 1rem; color: var(--white); }
.vl-lightbox__again {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 1.25rem; border: 2px solid var(--white); border-radius: 999px;
  background: var(--white); color: var(--purple-deep); font: inherit; font-weight: 700; font-size: 0.9375rem; cursor: pointer;      /* 14.6:1 */
}
.vl-lightbox__again:hover { background: var(--lavender); }
@media (prefers-reduced-motion: no-preference) {
  .vl-lightbox:not([hidden]) { animation: vl-fade 0.18s ease-out; }
  .vl-lightbox:not([hidden]) .vl-lightbox__frame { animation: vl-rise 0.22s ease-out; }
}
@keyframes vl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vl-rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .vl-cats__btn, .vl-cats__caret, .vl-cats__opt { transition: none; }
  .vl-cat__all { transition: none; }
  .vl-more__link:hover .vl-card__cover { transform: none; }
  .vl-card__cover, .vl-card__play, .vl-carousel .vl-videos, .vl-carousel__dot::before { transition: none; }
  a.vl-card__link:hover .vl-card__cover, a.vl-card__link:hover .vl-card__play, a.vl-card__link:focus-visible .vl-card__play { transform: none; }
}