.rv-shelf-toggle {
  padding-left: 18px;
  padding-right: 18px;
  transition: background 180ms ease, color 180ms ease;
}

.rv-shelf-toggle:hover,
.rv-shelf-toggle:focus-visible,
.rv-shelf-toggle[aria-expanded="true"] {
  background: #111;
  color: #fff;
}

.rv-shelf-index,
.rv-shelf-copy p,
.rv-shelf-meta {
  transition: color 180ms ease;
}

.rv-shelf-toggle:hover .rv-shelf-index,
.rv-shelf-toggle:focus-visible .rv-shelf-index,
.rv-shelf-toggle[aria-expanded="true"] .rv-shelf-index,
.rv-shelf-toggle:hover .rv-shelf-copy p,
.rv-shelf-toggle:focus-visible .rv-shelf-copy p,
.rv-shelf-toggle[aria-expanded="true"] .rv-shelf-copy p,
.rv-shelf-toggle:hover .rv-shelf-meta,
.rv-shelf-toggle:focus-visible .rv-shelf-meta,
.rv-shelf-toggle[aria-expanded="true"] .rv-shelf-meta {
  color: rgba(255, 255, 255, .72);
}

.rv-shelf-toggle:hover .rv-shelf-icon,
.rv-shelf-toggle:focus-visible .rv-shelf-icon,
.rv-shelf-toggle[aria-expanded="true"] .rv-shelf-icon {
  border-color: rgba(255, 255, 255, .42);
  background: #fff;
  color: #111;
}

.rv-shelf-panel[hidden] {
  display: grid;
}

.rv-shelf-panel {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 520ms cubic-bezier(.2, .72, .2, 1),
    opacity 260ms ease,
    visibility 0s linear 520ms;
}

.rv-shelf-panel > .rv-video-grid {
  min-height: 0;
  overflow: hidden;
  padding: 0;
  transition: padding 520ms cubic-bezier(.2, .72, .2, 1);
}

.rv-shelf-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 520ms cubic-bezier(.2, .72, .2, 1),
    opacity 300ms ease,
    visibility 0s;
}

.rv-shelf-panel.is-open > .rv-video-grid {
  padding: 22px 0 clamp(58px, 6vw, 92px);
}

/* Two wide columns keep the videos visually substantial. Let each row be
   only as tall as its actual titles, with a small deliberate gap before the
   next thumbnails instead of reserving two title lines plus large padding. */
.rv-video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: auto;
  align-items: start;
  column-gap: 12px;
  row-gap: clamp(12px, 1.2vw, 18px);
}

.rv-video-card {
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
  overflow: visible;
}

.rv-video-copy {
  display: block;
  overflow: visible;
  padding: 12px 2px 0;
}

.rv-video-title {
  display: block;
  min-height: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.rv-video-thumb img {
  object-fit: cover;
  object-position: center;
}

.rv-video-thumb::after {
  content: '▶';
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  box-sizing: border-box;
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: rgba(17, 17, 17, .84);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 2px;
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, background 180ms ease;
}

.rv-video-card:hover .rv-video-thumb::after,
.rv-video-card:focus-visible .rv-video-thumb::after {
  background: #111;
  transform: translate(-50%, -50%) scale(1.08);
}

.rv-video-dialog {
  width: min(96vw, 1460px);
  max-height: 94vh;
  outline: 0;
  box-shadow: none;
  overflow: auto;
}

.rv-video-dialog::backdrop {
  background: rgba(0, 0, 0, .84);
  backdrop-filter: none;
}

.rv-dialog-head {
  min-height: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.rv-dialog-head strong {
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Video stays full-width; project information sits beneath it instead of
   consuming horizontal player space. */
.rv-dialog-body {
  display: block;
}

.rv-dialog-player {
  width: 100%;
  align-self: auto;
}

.rv-dialog-info {
  min-width: 0;
  padding: clamp(24px, 3vw, 42px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-left: 0;
  background: #151515;
}

.rv-dialog-kicker {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .58);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.rv-dialog-title {
  max-width: 1100px;
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.rv-dialog-description {
  max-width: 1100px;
  max-height: none;
  margin: 16px 0 0;
  overflow: visible;
  color: rgba(255, 255, 255, .76);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-line;
}

/* Expanded categories become one black stage. The cover collapses away so
   the category heading stays visible without duplicating a video image above
   the open grid. */
.rv-shelf {
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.rv-shelf-toggle {
  grid-template-columns: 46px auto minmax(0, 1fr) auto;
}

.rv-shelf-cover {
  width: clamp(145px, 15vw, 220px);
  min-width: 0;
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: none;
}

.rv-shelf:has(> .rv-shelf-toggle[aria-expanded="true"]) {
  border-color: rgba(255, 255, 255, .18);
  background: #111;
  color: #fff;
}

.rv-shelf-toggle[aria-expanded="true"] .rv-shelf-cover {
  width: 0;
  opacity: 0;
  transform: translateX(-16px) scale(.96);
  transition:
    width 520ms cubic-bezier(.2, .72, .2, 1),
    opacity 220ms ease,
    transform 520ms cubic-bezier(.2, .72, .2, 1);
}

.rv-shelf:has(> .rv-shelf-toggle[aria-expanded="true"]) .rv-video-grid {
  padding-left: 18px;
  padding-right: 18px;
}

.rv-shelf:has(> .rv-shelf-toggle[aria-expanded="true"]) .rv-video-card,
.rv-shelf:has(> .rv-shelf-toggle[aria-expanded="true"]) .rv-video-title {
  color: #fff;
}

.rv-shelf:has(> .rv-shelf-toggle[aria-expanded="true"]) .rv-video-kicker {
  color: rgba(255, 255, 255, .56);
}

@media (max-width: 980px) and (min-width: 761px) {
  .rv-shelf-toggle {
    grid-template-columns: 34px auto minmax(0, 1fr) auto;
  }

  .rv-shelf-cover {
    width: clamp(120px, 18vw, 180px);
  }
}

@media (max-width: 760px) {
  .rv-shelf-toggle {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    padding-left: 12px;
    padding-right: 12px;
  }

  .rv-shelf:has(> .rv-shelf-toggle[aria-expanded="true"]) .rv-video-grid {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 500px) {
  .rv-video-grid {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rv-shelf-panel,
  .rv-shelf-panel > .rv-video-grid,
  .rv-video-thumb::after,
  .rv-shelf-toggle,
  .rv-shelf,
  .rv-shelf-cover {
    transition: none !important;
  }
}

/* Keep the expanded heading on the exact same left edge as a closed shelf's
   thumbnail. Explicitly animate the cover track to zero on open, then consume
   the one redundant grid gap that remains between that zero-width track and
   the copy. On close, both the track and copy snap back immediately together
   with the thumbnail, preserving the approved collapse behavior. */
@media (min-width: 981px) {
  .rv-shelf-toggle {
    --rv-shelf-gap: clamp(18px, 3vw, 46px);
    --rv-shelf-cover-width: clamp(145px, 15vw, 220px);
    grid-template-columns: 46px var(--rv-shelf-cover-width) minmax(0, 1fr) auto;
  }

  .rv-shelf-cover {
    width: 100%;
  }

  .rv-shelf-copy {
    margin-left: 0;
    transition: none;
  }

  .rv-shelf-toggle[aria-expanded="true"] {
    grid-template-columns: 46px 0 minmax(0, 1fr) auto;
    transition:
      background 180ms ease,
      color 180ms ease,
      grid-template-columns 520ms cubic-bezier(.2, .72, .2, 1);
  }

  .rv-shelf-toggle[aria-expanded="true"] .rv-shelf-copy {
    margin-left: calc(-1 * var(--rv-shelf-gap));
    transition: margin-left 520ms cubic-bezier(.2, .72, .2, 1);
  }
}

@media (max-width: 980px) and (min-width: 761px) {
  .rv-shelf-toggle {
    --rv-shelf-gap: 18px;
    --rv-shelf-cover-width: clamp(120px, 18vw, 180px);
    grid-template-columns: 34px var(--rv-shelf-cover-width) minmax(0, 1fr) auto;
  }

  .rv-shelf-cover {
    width: 100%;
  }

  .rv-shelf-copy {
    margin-left: 0;
    transition: none;
  }

  .rv-shelf-toggle[aria-expanded="true"] {
    grid-template-columns: 34px 0 minmax(0, 1fr) auto;
    transition:
      background 180ms ease,
      color 180ms ease,
      grid-template-columns 520ms cubic-bezier(.2, .72, .2, 1);
  }

  .rv-shelf-toggle[aria-expanded="true"] .rv-shelf-copy {
    margin-left: -18px;
    transition: margin-left 520ms cubic-bezier(.2, .72, .2, 1);
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  .rv-shelf-toggle[aria-expanded="true"],
  .rv-shelf-toggle[aria-expanded="true"] .rv-shelf-copy {
    transition: none !important;
  }
}