/* Technical enhancements; retain the existing Vien.noir design system. */
/* This was a DIV before. Keep its exact typography when using a real H1. */
h1.intro-word {
  margin: 0;
  font-family: var(--sans);
  font-size: inherit;
  font-weight: 400;
  line-height: 1.7;
  text-wrap: wrap;
}
/* The image/video box is reserved before either media file has loaded. */
.home-hero__video video { aspect-ratio: 16 / 9; }
.home-hero__bottom--single { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.background-video-control {
  appearance: none; flex-shrink: 0; border: 1px solid var(--line-strong);
  border-radius: 0; padding: 8px 12px; background: rgba(8, 7, 10, .45);
  color: var(--cream); font: inherit; font-size: .64rem;
  letter-spacing: .1em; line-height: 1.4; cursor: pointer;
}
.background-video-control[hidden] { display: none; }
.background-video-control:hover { border-color: var(--gold-light); color: var(--gold-light); }
/* No visible video button in the normal mouse/touch layout. Keep a
   keyboard-accessible pause/play control that is revealed only on focus. */
.background-video-control:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}
.background-video-control:focus {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 100%;
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
  background: rgba(8, 7, 10, .92);
}
/* Avoid an unnecessary reveal delay for page titles even with older CSS. */
.page-hero__content { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Keep anchor targets below the fixed header. */
main [id], h1.intro-word, #vn-newsletter { scroll-margin-top: calc(var(--header-h) + 24px); }