/* Simply Luxury Video Window */
.slvw-active { position: relative !important; overflow: hidden; }
/* the publications plugin re-tags hero children on mobile; keep our poster full-size regardless */
.slvw-stage > .slvw-poster { position: absolute !important; inset: 0 !important; height: auto !important; min-height: 0 !important; }
.slvw-active .slp-home-publications { z-index: 20; }

.slvw-layer {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 5; overflow: hidden;
}
.slvw-stage { position: absolute; inset: 0; overflow: hidden; }

.slvw-frame {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.4s ease;
}
.slvw-poster {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
}
.slvw-frame.is-in, .slvw-poster.is-in { opacity: 1; }
.slvw-frame.is-leaving, .slvw-poster.is-leaving { opacity: 0; }

.slvw-shade {
  position: absolute; inset: 0; cursor: pointer;
  background:
    linear-gradient(90deg, rgba(3,16,28,.35), rgba(3,16,28,0) 30%),
    linear-gradient(0deg, rgba(3,10,18,.88) 0%, rgba(3,10,18,.35) 32%, rgba(3,10,18,0) 55%);
}

.slvw-caption {
  position: absolute; left: 28px; right: 28px; bottom: 26px;
  display: flex; flex-direction: column; gap: 8px;
  color: #f4ede1; pointer-events: none;
}
.slvw-kicker {
  font: 600 11px/1 Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase;
  color: #c99a4b;
}
.slvw-title {
  font: 400 20px/1.3 Georgia, "Times New Roman", serif;
  max-width: 34ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.slvw-actions { display: flex; align-items: center; gap: 22px; margin-top: 4px; pointer-events: auto; }

.slvw-play {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 14px;
  background: rgba(3,10,18,.35); color: #f4ede1;
  border: 1px solid #c99a4b; border-radius: 0;
  font: 600 11px/1 Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: background .3s ease, color .3s ease;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.slvw-play:hover, .slvw-play:focus-visible { background: #c99a4b; color: #07121d; outline: none; }
.slvw-play-icon {
  width: 0; height: 0;
  border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.slvw-channel {
  font: 600 11px/1 Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase;
  color: #c99a4b; text-decoration: none; border-bottom: 1px solid transparent;
}
.slvw-channel:hover, .slvw-channel:focus-visible { border-bottom-color: #c99a4b; outline: none; }

.slvw-dots { position: absolute; top: 22px; right: 24px; display: flex; gap: 8px; }
.slvw-dot {
  width: 22px; height: 2px; padding: 8px 0; border: 0; cursor: pointer;
  background: rgba(244,237,225,.35) content-box;
}
.slvw-dot.is-on { background-color: #c99a4b; }

/* ---------- Cinema player ---------- */
.slvw-lock { overflow: hidden; }
.slvw-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .4s ease;
}
.slvw-modal.is-open { opacity: 1; }
.slvw-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(3,10,18,.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.slvw-modal-inner {
  position: relative; width: min(92vw, 150vh, 1280px);
  display: flex; flex-direction: column; gap: 14px;
  transform: translateY(12px); transition: transform .5s ease;
}
.slvw-modal.is-open .slvw-modal-inner { transform: none; }
.slvw-modal.is-vertical .slvw-modal-inner { width: min(92vw, 44vh); }

.slvw-modal-head { display: flex; justify-content: space-between; align-items: center; }
.slvw-close {
  background: none; border: 0; color: #f4ede1; cursor: pointer;
  font: 300 34px/1 Georgia, serif; padding: 0 4px;
}
.slvw-close:hover, .slvw-close:focus-visible { color: #c99a4b; outline: none; }

.slvw-screen {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  border: 1px solid rgba(201,154,75,.55);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.slvw-modal.is-vertical .slvw-screen { aspect-ratio: 9 / 16; }
.slvw-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.slvw-modal-title {
  color: #f4ede1; font: 400 18px/1.35 Georgia, "Times New Roman", serif; text-align: center;
}

/* On phones the publications plugin forces its host to height:auto; restore the theme's hero proportions */
@media (max-width: 850px) {
  .hero-home .hero-image.slvw-active { height: 48vw !important; min-height: 270px !important; }
}
@media (max-width: 520px) {
  .hero-home .hero-image.slvw-active { height: 62vw !important; min-height: 250px !important; }
}
/* ---------- Phone: "Video Channel" band beneath the crest ---------- */
.slvw-mobile[hidden] { display: none !important; }
.slvw-mobile { margin: 26px 0 30px; width: 100%; }
.slvw-mobile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.slvw-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201,154,75,0), #c99a4b 40%, #c99a4b 60%, rgba(201,154,75,0)); }
.slvw-mobile-label {
  font: 600 10px/1 Arial, sans-serif; letter-spacing: .32em; text-transform: uppercase;
  color: #c99a4b; white-space: nowrap;
}
.slvw-mobile-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background-color: #03101c; background-position: center; background-size: cover; background-repeat: no-repeat;
  border: 1px solid rgba(201,154,75,.55);
}
.slvw-mobile::after {
  content: ""; display: block; height: 1px; margin-top: 26px;
  background: linear-gradient(90deg, rgba(201,154,75,0), #c99a4b 40%, #c99a4b 60%, rgba(201,154,75,0));
}
.slvw-layer.is-mobile { left: 0 !important; }
.slvw-layer.is-mobile .slvw-kicker { display: none; }
.slvw-layer.is-mobile .slvw-shade {
  background: linear-gradient(0deg, rgba(3,10,18,.9) 0%, rgba(3,10,18,.4) 38%, rgba(3,10,18,0) 62%);
}

@media (max-width: 850px) {
  .slvw-caption { left: 14px; right: 14px; bottom: 12px; gap: 8px; }
  .slvw-kicker { font-size: 9px; letter-spacing: .2em; }
  .slvw-title { font-size: 15px; -webkit-line-clamp: 1; max-width: none; }
  .slvw-actions { gap: 14px; margin-top: 2px; }
  .slvw-play { padding: 8px 12px 8px 10px; font-size: 9.5px; letter-spacing: .16em; white-space: nowrap; }
  .slvw-channel { font-size: 9.5px; letter-spacing: .16em; white-space: nowrap; }
  .slvw-dots { top: 10px; right: 12px; }
  .slvw-modal-inner { width: 94vw; }
  .slvw-modal.is-vertical .slvw-modal-inner { width: min(86vw, 46vh); }
}
@media (prefers-reduced-motion: reduce) {
  .slvw-frame, .slvw-poster, .slvw-modal, .slvw-modal-inner { transition: none; }
}


/* ---------- Echo: previous / next arrows, swipe and film strip ---------- */
.slvw-arrow {
  position: absolute; z-index: 7; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0 0 3px;
  border: 1px solid rgba(201,154,75,.75); background: rgba(3,10,18,.5); color: #f4ede1;
  font: 300 30px/1 Georgia, "Times New Roman", serif; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .3s ease, color .3s ease;
}
.slvw-arrow:hover, .slvw-arrow:focus-visible { background: #c99a4b; color: #07121d; outline: none; }
.slvw-layer > .slvw-prev, .slvw-layer > .slvw-next { bottom: 26px; }
.slvw-layer > .slvw-prev { right: 76px; }
.slvw-layer > .slvw-next { right: 26px; }
.slvw-layer.is-mobile > .slvw-prev, .slvw-layer.is-mobile > .slvw-next { top: 38%; bottom: auto; transform: translateY(-50%); width: 36px; height: 36px; font-size: 26px; }
.slvw-layer.is-mobile > .slvw-prev { left: 8px; right: auto; }
.slvw-layer.is-mobile > .slvw-next { right: 8px; }
.slvw-layer.is-mobile .slvw-dot { width: 18px; padding: 10px 0; }

.slvw-modal { overflow-y: auto; align-items: flex-start; padding: 4vh 0; }
.slvw-modal-inner { margin: auto; }
.slvw-player { position: relative; }
.slvw-player .slvw-arrow { top: 50%; transform: translateY(-50%); }
.slvw-player .slvw-prev { left: -58px; }
.slvw-player .slvw-next { right: -58px; }
.slvw-modal.is-vertical .slvw-modal-inner { width: min(94vw, 1000px); }
.slvw-modal.is-vertical .slvw-screen { width: min(100%, 46vh, 420px); margin: 0 auto; }
.slvw-count { margin-left: 10px; color: #f4ede1; letter-spacing: .12em; }
.slvw-more { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.slvw-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.slvw-thumb {
  flex: 0 0 180px; scroll-snap-align: start; padding: 0; text-align: left; cursor: pointer;
  background: rgba(3,10,18,.6); border: 1px solid rgba(201,154,75,.3); color: #f4ede1;
  transition: border-color .3s ease;
}
.slvw-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.slvw-thumb span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: 400 12.5px/1.35 Georgia, "Times New Roman", serif; padding: 8px 8px 10px;
}
.slvw-thumb:hover, .slvw-thumb:focus-visible { border-color: #c99a4b; outline: none; }
.slvw-thumb.is-on { border-color: #c99a4b; box-shadow: 0 0 0 1px #c99a4b; }
.slvw-modal-channel { align-self: center; margin-top: 4px; }
@media (max-width: 850px) {
  .slvw-player .slvw-prev { left: 6px; }
  .slvw-player .slvw-next { right: 6px; }
  .slvw-player .slvw-arrow { width: 36px; height: 36px; font-size: 26px; }
  .slvw-thumb { flex-basis: 140px; }
  .slvw-modal { padding: 3vh 0; }
  .slvw-modal.is-vertical .slvw-screen { width: min(100%, 58vh); }
}


/* Echo 28 Sep 2026: phone fix. Tall (vertical) films made the player taller than the screen,
   pushing the Close button off the top with no way to scroll back to it. */
@media (max-width: 900px) {
  .slvw-modal { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .slvw-modal-backdrop { position: fixed; }
  .slvw-modal-inner { width: 94vw; margin: max(14px, env(safe-area-inset-top)) auto max(18px, env(safe-area-inset-bottom)); gap: 10px; }
  .slvw-modal.is-vertical .slvw-modal-inner { width: min(92vw, calc((100vh - 380px) * 9 / 16)); width: min(92vw, calc((100svh - 380px) * 9 / 16)); min-width: 230px; }
  .slvw-modal-head { padding: 2px 0; }
  .slvw-close { min-width: 44px; min-height: 44px; font-size: 30px; line-height: 1; }
  .slvw-player .slvw-arrow { z-index: 4; }
}
