/* ── Venue showcase ───────────────────────────────────────────────────────
   The shared stylesheet for every venue Connery shoots for free. Lombardi
   House was the first build and set the pattern; nothing here is per-venue,
   so a new venue is a new HTML file and a folder of pictures, nothing more.

   Everything here composites on transform/opacity/clip-path only, so it stays
   on the GPU. Nothing animates layout. All of it collapses to "already
   visible" under prefers-reduced-motion, which is not optional: a page this
   busy is genuinely unpleasant for someone who asked their OS for stillness. */

.vs { --ease: cubic-bezier(0.22, 1, 0.36, 1); --plate: min(82vh, 56vw); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* Cinemascope. The film is cropped 2.39:1 and the hero is sized to match, so
   the band stays wide and short instead of eating a whole screen. */
.vs-hero { position: relative; height: clamp(440px, 47vw, 76svh); overflow: hidden;
           display: grid; place-items: end center; background: var(--obsidian); }
@media (max-width: 700px) { .vs-hero { height: 58svh; min-height: 360px; } }
.vs-hero__media { position: absolute; inset: -6%; }
.vs-hero__media video, .vs-hero__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* the slow settle out of an over-scale: the shot is already moving when the
     page arrives, so it never reads as a video that "started" */
  transform: scale(1.12); animation: vs-settle 3.4s var(--ease) forwards;
}
@keyframes vs-settle { to { transform: scale(1); } }
.vs-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.12) 34%,
              rgba(10,10,11,.30) 62%, rgba(10,10,11,.92) 100%);
}
.vs-hero__inner { position: relative; z-index: 2; text-align: center;
                  padding: 0 var(--space-3) clamp(34px, 7vh, 76px); max-width: 62rem; }
.vs-eyebrow { font-family: var(--sans); font-size: .72rem; letter-spacing: .32em;
              text-transform: uppercase; color: var(--champagne); margin-bottom: var(--space-2);
              text-shadow: 0 1px 18px rgba(10,10,11,.85), 0 1px 3px rgba(10,10,11,.7); }
.vs-hero h1, .vs-hero__sub { text-shadow: 0 2px 30px rgba(10,10,11,.55); }

/* Each headline line sits in its own overflow-hidden box and slides up out of
   it. The two lines are offset so the name lands before the descriptor. */
.vs-line { display: block; overflow: hidden; }
.vs-line > span { display: block; transform: translateY(105%);
                  animation: vs-rise .95s var(--ease) forwards; }
.vs-line:nth-child(2) > span { animation-delay: .12s; }
@keyframes vs-rise { to { transform: translateY(0); } }

.vs-hero h1 { font-family: var(--serif); color: var(--ivory);
              font-size: clamp(2.3rem, 5.6vw, 4.4rem); line-height: 1.02; margin: 0 0 var(--space-2);
              /* letters draw together as the line lands — small, but it is the
                 detail that makes a title feel set rather than typed */
              letter-spacing: .06em; animation: vs-track 1.6s var(--ease) .2s forwards; }
@keyframes vs-track { to { letter-spacing: -.01em; } }
.vs-hero__sub { font-family: var(--sans); color: var(--ivory-dim); font-size: 1.02rem;
                opacity: 0; animation: vs-fade .9s var(--ease) .75s forwards; }
@keyframes vs-fade { to { opacity: 1; } }

.vs-scroll { position: absolute; left: 50%; bottom: 26px; z-index: 3; translate: -50% 0;
             width: 1px; height: 52px; background: rgba(244,241,234,.28); overflow: hidden; }
.vs-scroll::after { content: ""; position: absolute; inset: 0; background: var(--champagne);
                    animation: vs-drip 2.4s var(--ease) infinite; }
@keyframes vs-drip { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* ── The reveal every image uses ──────────────────────────────────────────
   A short lift and a fade, nothing more. The picture should look like it was
   always there and you simply arrived at it. */
.vs-fig { position: relative; overflow: hidden; margin: 0; background: var(--ink); }
.vs-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-fig { opacity: 0; transform: translateY(18px);
          transition: opacity .9s var(--ease), transform .9s var(--ease); }
.vs-fig.is-in { opacity: 1; transform: none; }
.vs-fig[data-d="1"] { transition-delay: .06s; }
.vs-fig[data-d="2"] { transition-delay: .12s; }
.vs-fig[data-d="3"] { transition-delay: .18s; }

/* ── Full-bleed plate with drift ──────────────────────────────────────────
   The section is a fixed viewport slice and the figure has to fill it exactly.
   Without the height the figure grew to the image's own aspect ratio and hung
   several hundred pixels over the section below it. */
.vs-plate { height: var(--plate); margin: var(--space-6) 0; overflow: hidden; }
.vs-plate .vs-fig { height: 100%; }
.vs-plate img { will-change: transform; }

/* ── A written section, then its photographs ──────────────────────────────
   This used to be a sticky paragraph in a side column with the pictures
   scrolling past it. Parked text sitting in the gap between photographs reads
   as a bug, not as design. The writing now leads, the photographs follow, and
   nothing is pinned.

   Every frame from this shoot is 3:2, so a uniform grid crops none of them. */
.vs-split { margin: var(--space-6) 0; }
.vs-sticky { margin-bottom: var(--space-4); }
.vs-stack { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 860px) { .vs-stack { grid-template-columns: 1fr 1fr; } }
.vs-stack .vs-fig { aspect-ratio: 3 / 2; }

/* ── Horizontal drift strip ───────────────────────────────────────────────
   Moves sideways as the page scrolls past it. Not a carousel: there is no
   control to press and nothing is hidden, it simply parallaxes. */
.vs-strip { overflow: hidden; margin: var(--space-6) 0; }
.vs-strip__rail { display: flex; gap: var(--space-2); width: max-content;
                  will-change: transform; }
.vs-strip .vs-fig { width: min(46vw, 520px); aspect-ratio: 3 / 2; flex: none; }

/* ── Facts ────────────────────────────────────────────────────────────── */
.vs-facts { display: grid; gap: 1px; background: rgba(244,241,234,.14);
            border: 1px solid rgba(244,241,234,.14); margin: var(--space-5) 0;
            grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .vs-facts { grid-template-columns: repeat(4, 1fr); } }
.vs-fact { background: rgba(244,241,234,.035); padding: var(--space-3); }
.vs-fact dt { font-family: var(--sans); font-size: .68rem; letter-spacing: .18em;
              text-transform: uppercase; color: var(--champagne); margin-bottom: 6px; }
.vs-fact dd { font-family: var(--serif); font-size: 1.42rem; color: var(--ivory); margin: 0; }

/* ── Prose ────────────────────────────────────────────────────────────── */
.vs-body { max-width: 40rem; }
.vs-body h2 { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.5rem);
              line-height: 1.12; margin: var(--space-5) 0 var(--space-2); color: var(--ivory); }
.vs-body p { font-family: var(--sans); line-height: 1.75; color: rgba(231,225,215,.82);
             margin: 0 0 var(--space-2); }
.vs-cap { font-family: var(--sans); font-size: .78rem; letter-spacing: .04em;
          color: rgba(231,225,215,.55); margin-top: 10px; }

/* ── Film ─────────────────────────────────────────────────────────────── */
.vs-film { position: relative; margin: var(--space-6) 0; background: var(--obsidian); }
.vs-film video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.vs-film__play { position: absolute; inset: 0; display: grid; place-items: center;
                 border: 0; background: rgba(10,10,11,.34); cursor: pointer; color: var(--ivory);
                 font-family: var(--sans); letter-spacing: .22em; text-transform: uppercase;
                 font-size: .74rem; transition: background .5s var(--ease); }
.vs-film__play:hover { background: rgba(10,10,11,.16); }
.vs-film__play span { display: grid; gap: 14px; justify-items: center; }
.vs-film__play svg { width: 54px; height: 54px; }

/* ── Closing ──────────────────────────────────────────────────────────── */
.vs-end { text-align: center; padding: var(--space-6) var(--space-3); }
.vs-end h2 { font-family: var(--serif); font-size: clamp(1.8rem,4vw,2.8rem); margin-bottom: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .vs-fig { opacity: 1; transform: none; transition: none; }
  .vs-hero__media video, .vs-hero__media img { animation: none; transform: none; }
  .vs-line > span, .vs-hero h1, .vs-hero__sub { animation: none; transform: none; opacity: 1; letter-spacing: normal; }
  .vs-scroll { display: none; }
  .vs-strip__rail { transform: none !important; }
}


/* ── Dark-page corrections ────────────────────────────────────────────────
   Section headings inside the closing block and the credit line inherit from
   the light-page defaults in styles.css, which are unreadable here. */
.vs-end h2 { color: var(--ivory); }
.vs-end p { color: rgba(231,225,215,.78); }
.vs-credit { color: rgba(231,225,215,.45); }


/* ── Lightbox ─────────────────────────────────────────────────────────────
   Full screen on click. Deliberately plain: a dark ground, the photograph,
   its caption, and a way out. */
.vs-fig { cursor: zoom-in; }
.vs-lb { position: fixed; inset: 0; z-index: 500; background: #060607;
         display: grid; grid-template-columns: auto 1fr auto; align-items: center;
         gap: clamp(4px, 2vw, 24px); padding: clamp(12px, 3vw, 40px);
         animation: vs-fade .28s var(--ease, ease) forwards; opacity: 0; }
.vs-lb[hidden] { display: none; }
.vs-lb__stage { margin: 0; display: grid; gap: 14px; justify-items: center;
                min-width: 0; min-height: 0; }
.vs-lb__stage img { max-width: 100%; max-height: 82vh; width: auto; height: auto;
                    display: block; object-fit: contain; }
.vs-lb__stage figcaption { font-family: var(--sans); font-size: .82rem; letter-spacing: .02em;
                           color: rgba(231,225,215,.62); text-align: center; max-width: 56ch; }
.vs-lb__nav, .vs-lb__x { background: transparent; border: 0; cursor: pointer;
                         color: var(--ivory); font-family: var(--sans); line-height: 1;
                         opacity: .62; transition: opacity .25s ease; }
.vs-lb__nav:hover, .vs-lb__x:hover, .vs-lb__nav:focus-visible, .vs-lb__x:focus-visible { opacity: 1; }
.vs-lb__nav { font-size: clamp(2rem, 5vw, 3.2rem); padding: 10px 6px; }
.vs-lb__x { position: absolute; top: clamp(10px, 2vw, 26px); right: clamp(12px, 2.4vw, 32px);
            font-size: 2.1rem; z-index: 2; }
@media (max-width: 700px) { .vs-lb__nav { font-size: 2rem; padding: 8px 2px; } }
@media (prefers-reduced-motion: reduce) { .vs-lb { animation: none; opacity: 1; } }