/* ==========================================================================
   WES BARKER — SHOW PAGE V3 "NIGHT OUT" (private demo). Loads after show-v2.css and reuses its
   hero, buttons, ticker, Wes block, FAQ, sticky bar and demo chip. This file is the timeline.
   The gold line is the night; it fills in as you scroll through it.
   ========================================================================== */
.v3-hero .v2-hero-media img, .v3-hero .v2-hero-media video { object-position: 50% 35%; }

.v3-night { padding: 56px 0 24px; }
.v3-night-h { margin-bottom: 28px; }
.v3-night-h .v2-hand { font-size: .85em; }
.v3-stops { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.v3-stops::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.12); }
.v3-stop { position: relative; display: grid; gap: 14px; padding: 8px 0 44px 32px; }
.v3-stop::before { content: ""; position: absolute; left: 0; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 2px solid rgba(255,255,255,.35); transition: border-color .4s, background .4s, box-shadow .4s; }
.v3-stop::after { content: ""; position: absolute; left: 7px; top: 14px; bottom: -8px; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform .8s var(--ease); }
.v3-stop.is-here::before { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 6px rgba(245,184,0,.18); }
.v3-stop.is-here::after { transform: scaleY(1); }
.v3-stop:last-child::after { display: none; }
.v3-time { font: 900 clamp(26px, 7vw, 44px)/1 var(--display); text-transform: uppercase; letter-spacing: -.03em; color: var(--gold); }
.v3-body h3 { font: 900 clamp(24px, 5.5vw, 40px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.025em; color: #fff; margin: 0 0 10px; text-wrap: balance; }
.v3-body p { font: 400 16px/1.5 var(--body); color: var(--mid); margin: 0 0 8px; max-width: 46ch; }
.v3-body p strong { color: #fff; }
.v3-body a:not(.v2-btn) { color: var(--gold); font-weight: 700; text-decoration: none; }
.v3-body a:not(.v2-btn):hover { text-decoration: underline; }
.v3-body .v2-hand { font-size: 20px; line-height: 1.2; color: var(--gold); margin-top: 6px; transform: rotate(-1deg); transform-origin: left; }
.v3-body .v2-btn { margin-top: 8px; }
.v3-media { margin: 0; border-radius: 10px; overflow: hidden; background: var(--ink-2); aspect-ratio: 4/3; }
.v3-media img, .v3-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-media--tall { aspect-ratio: 4/5; }
.v3-stop--show .v3-time { color: #fff; }
.v3-stop--show.is-here .v3-time { color: var(--gold); }
.v3-buy { margin-top: 18px; padding: 20px; border-radius: 14px; background: var(--ink-2); border: 1px solid rgba(245,184,0,.35); display: grid; gap: 12px; }
.v3-buy p { color: var(--warm); margin: 0; }
.v3-buy .v2-btn { width: 100%; }
.v3-buy .v2-times { gap: 6px; }
@media (min-width: 860px) {
  .v3-night { padding: 96px 0 40px; }
  .v3-night-h { margin-bottom: 48px; }
  .v3-stops::before { left: 50%; margin-left: -1px; }
  .v3-stop { grid-template-columns: 1fr 1fr; gap: 0 64px; padding: 0 0 72px 0; align-items: center; }
  .v3-stop::before { left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
  .v3-stop::after { left: 50%; margin-left: -1px; top: 50%; bottom: -50%; }
  .v3-stop:last-child::after { display: none; }
  .v3-time { grid-column: 1; grid-row: 1; text-align: right; padding-right: 40px; align-self: start; }
  .v3-body { grid-column: 1; grid-row: 2; padding-right: 40px; text-align: right; justify-items: end; display: grid; }
  .v3-body .v2-hand { transform-origin: right; transform: rotate(1deg); }
  .v3-body p { margin-left: auto; }
  .v3-media { grid-column: 2; grid-row: 1 / span 2; padding-left: 0; max-width: 520px; }
  .v3-stop:nth-child(even) .v3-time, .v3-stop:nth-child(even) .v3-body { grid-column: 2; text-align: left; padding-right: 0; padding-left: 40px; justify-items: start; }
  .v3-stop:nth-child(even) .v3-body p { margin-left: 0; }
  .v3-stop:nth-child(even) .v3-body .v2-hand { transform-origin: left; transform: rotate(-1deg); }
  .v3-stop:nth-child(even) .v3-media { grid-column: 1; justify-self: end; }
  .v3-buy { text-align: left; justify-self: stretch; width: 100%; }
  .v3-buy .v2-btn { width: auto; justify-self: start; }
  .v3-media--tall { max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) { .v3-stop::after { transition: none; } }