/* ==========================================================================
   HIGH ON LIFE — Cortnie's invitation
   A facade, not an embed: the poster is a plain image and a button, and the
   YouTube player is only built when someone actually asks for it. That keeps
   roughly a megabyte of third-party script off the page for the majority of
   visitors who never press play, and it keeps the poster inside the umbral
   palette instead of dropping a raw YouTube card into it.
   ========================================================================== */

/* ---------- the play control ---------- */
.vplay {
  position: relative; display: grid; place-items: center;
  width: var(--vp, 92px); height: var(--vp, 92px);
  border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(207, 74, 36, 0.92);
  box-shadow: 0 10px 40px rgba(8, 6, 14, 0.55);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), background 220ms;
}
.vplay:hover, .vplay:focus-visible { transform: scale(1.07); background: var(--copper); }
.vplay svg { width: 38%; height: 38%; fill: var(--limb); margin-left: 8%; }

/* a ring travelling outward — the one thing on the page asking to be pressed */
.vplay::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(239, 131, 64, 0.5);
  animation: vbeat 2.6s ease-out infinite; pointer-events: none;
}
@keyframes vbeat {
  0%        { box-shadow: 0 0 0 0 rgba(239, 131, 64, 0.45); }
  60%, 100% { box-shadow: 0 0 0 26px rgba(239, 131, 64, 0); }
}

.vlabel {
  font-family: var(--ff-wide); font-variation-settings: 'wght' 400, 'wdth' 122;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--limb); margin: 0;
}
.vlabel span { display: block; color: var(--ash-dim); letter-spacing: 0.2em; margin-top: 0.4rem; }

/* ---------- the poster card ---------- */
/* The card itself does not clip: the play mark hangs off its left edge. The
   photograph is clipped by an inner frame instead, so the hover zoom still has
   something to crop against. */
.vcard {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: visible;
  border: 1px solid var(--edge); background: var(--umbra);
  cursor: pointer; display: block; padding: 0;
}
.vcard__frame { position: absolute; inset: 0; overflow: hidden; }
.vcard img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* YouTube's own thumbnail is a full-colour frame; the page is not. Pulling
     the saturation down and laying ember over it drops the frame into the
     palette without needing a separate graded file. */
  filter: saturate(0.72) contrast(1.06) brightness(0.86);
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 500ms;
}
.vcard:hover img, .vcard:focus-visible img { transform: scale(1.035); filter: saturate(0.85) brightness(0.95); }
.vcard__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 70% at 50% 46%, rgba(207, 74, 36, 0.16) 0%, transparent 70%),
    linear-gradient(180deg, rgba(8,6,14,0.42) 0%, rgba(8,6,14,0.06) 40%, rgba(8,6,14,0.72) 100%);
}
.vcard__in {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.1rem; text-align: center; padding: 1rem;
}

/* ---------- the play mark, hung off the left edge ---------- */
/* A disc in the middle of the frame lands on whoever is in it — here, straight
   on Cortnie's face. Straddling the left edge keeps the whole frame readable
   and gives the mark somewhere to cast a shadow from. */
.vmark {
  --tri: clamp(58px, 8.4vw, 104px);
  position: absolute; z-index: 3;
  left: calc(var(--tri) * -0.44); top: 50%;
  width: var(--tri); height: calc(var(--tri) * 1.16);
  transform: translateY(-50%);
  /* drop-shadow follows the triangle; box-shadow would draw its rectangle */
  filter: drop-shadow(10px 16px 22px rgba(0, 0, 0, 0.85))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 260ms;
  pointer-events: none;
}
.vmark svg { width: 100%; height: 100%; display: block; }
.vcard:hover .vmark, .vcard:focus-visible .vmark {
  transform: translateY(-50%) translateX(6px) scale(1.05);
  filter: drop-shadow(12px 20px 26px rgba(0, 0, 0, 0.9))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
.vcard__tag {
  position: absolute; left: 0; right: 0; bottom: clamp(0.9rem, 2.4vw, 1.5rem); z-index: 2;
  text-align: center;
}

/* ---------- v1: the control sits on the hero photograph ---------- */
.heroplay {
  position: absolute; z-index: 3;
  right: 9%; top: 46%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center;
}
.heroplay .vlabel { text-shadow: 0 2px 14px rgba(8, 6, 14, 0.9); }

/* ---------- v2: copy left, card right ---------- */
.hero--v2 .hero__in { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* she is in the video too — leaving the photograph at full strength puts the
   same person on screen twice, which reads as a mistake rather than a layering */
.hero--v2 .hero__bg { opacity: 0.2; }
.hero--v2 .hero__sub { max-width: 34ch; }

/* ---------- v3: its own band below the hero ---------- */
.vband { background: var(--umbra); }
.vband .vcard { max-width: 980px; margin: clamp(1.8rem, 4vw, 2.8rem) auto 0; }

/* ---------- v4: the video is the hero ---------- */
.hero--v4 {
  text-align: center; align-items: center;
  /* a 16:9 card plus the full hero copy overruns a laptop screen, and the whole
     point of this treatment is that all of it is visible at once */
  min-height: 0;
  /* the bar is fixed, so the hero has to reserve its height or the wordmark
     starts underneath it */
  padding: calc(var(--nav-h) + 1.4rem) 0 clamp(2rem, 4vw, 3rem);
}
.hero--v4 .hero__bg { opacity: 0.3; }
.hero--v4 .hero__in { max-width: 860px; margin: 0 auto; }
.hero--v4 h1 { display: block; font-size: clamp(2.6rem, 7vw, 5rem); }
/* With the photograph gone, this line is the only thing between the wordmark
   and the video — as a small tracked-out caption it just evaporated. It takes
   the display face instead and becomes the second voice on the page. */
.hero--v4 .hero__tag {
  margin-top: clamp(0.7rem, 1.6vw, 1.1rem);
  font-family: var(--ff-display); font-variation-settings: normal;
  font-size: clamp(1.32rem, 3.5vw, 2.35rem);
  line-height: 1.0; letter-spacing: 0.012em; text-transform: uppercase;
  color: var(--limb); text-shadow: 0 0 0.7em rgba(207, 74, 36, 0.34);
  max-width: 20ch;
}
.hero--v4 .hero__sub { max-width: 46ch; }
.hero--v4 .hero__tag,
.hero--v4 .hero__sub { margin-left: auto; margin-right: auto; }
.hero--v4 .hero__sub { margin-top: 1.2rem; }
.hero--v4 .hero__facts { margin-top: 1.3rem; }
.hero--v4 .hero__facts,
.hero--v4 .cta-row { justify-content: center; }
.hero--v4 .cta-row { margin-top: 1.5rem; }
.hero--v4 .vcard { max-width: 720px; margin: clamp(1.4rem, 3vw, 2rem) auto 0; }
.hero--v4 .contact { justify-content: center; }
.hero--v4 .scrollcue { text-align: center; }

/* ---------- the lightbox ---------- */
.vlight {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(5, 4, 10, 0.94);
  opacity: 0; transition: opacity 260ms ease;
}
.vlight[data-open] { display: flex; }
.vlight[data-shown] { opacity: 1; }
.vlight__box { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; }
.vlight__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vlight__x {
  position: absolute; top: -3rem; right: 0; z-index: 2;
  background: none; border: 0; cursor: pointer; padding: 0.4rem;
  font-family: var(--ff-wide); font-variation-settings: 'wght' 400, 'wdth' 122;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ash);
}
.vlight__x:hover { color: var(--limb); }
.vlight__yt {
  position: absolute; top: -3rem; left: 0; z-index: 2;
  font-family: var(--ff-wide); font-variation-settings: 'wght' 400, 'wdth' 122;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ash-dim); text-decoration: none;
}
.vlight__yt:hover { color: var(--copper); }
body.vopen { overflow: hidden; }

@media (max-width: 900px) {
  .hero--v2 .hero__in { grid-template-columns: 1fr; gap: 2rem; }
  .hero--v2 .hero__bg { opacity: 0.28; }
  /* On a phone the label has nowhere to go: laid beside the button it runs off
     the screen, laid under it, it lands on the copy. The pulsing ember disc
     reads as play on its own, so the words are dropped and it moves up over
     her shoulder, clear of every line of type. */
  .heroplay { --vp: 58px; right: 7%; top: 17%; transform: none; }
  .heroplay .vlabel { display: none; }
  .vplay { --vp: 66px; }
  /* the page gutter is narrower than the mark's overhang on a phone, so the
     point was being clipped at the edge of the screen — hang it out less */
  .vmark { left: calc(var(--tri) * -0.26); }
  .vlight__x { top: auto; bottom: -2.6rem; right: 0; }
  .vlight__yt { top: auto; bottom: -2.6rem; left: 0; letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce) {
  .vplay::after { animation: none; }
  .vcard img, .vplay { transition: none; }
}