/* A closer look: navy block with three big video cards. The dome above it is a navy curtain that
   closer.js flattens with the scroll (flat, so invisible, without JS or with reduced motion). */
.closer {
  --dome: clamp(3.5rem, 9vw, 8rem);
  position: relative; z-index: 3;
  background: var(--navy);
  padding-block: var(--section-y) calc(var(--section-y) + var(--radius-xl));
}
.closer__dome {
  position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--dome);
  background: var(--navy); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: scaleY(0); transform-origin: 50% 100%; pointer-events: none;
}
.closer__head {
  display: grid; gap: 1.5rem clamp(2rem, 6vw, 5rem); align-items: end;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.closer__title { max-width: 10ch; }
.closer__head .lede { max-width: 26rem; }
@media (min-width: 860px) { .closer__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }

.closer__grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.vcard {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--radius-xl);
  background: var(--navy-800);
  box-shadow: 0 30px 50px -30px rgb(0 0 0 / .6);
}
.vcard__media {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 9; background: var(--navy-900); cursor: pointer;
}
.vcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.vcard__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 85% at 0 100%, rgb(16 16 45 / .72), transparent 70%),
    linear-gradient(to top, rgb(16 16 45 / .55), transparent 55%);
  transition: opacity .5s var(--ease-out);
}
.vcard__body { padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; align-content: start; gap: 1rem; }
.vcard__name { font-size: clamp(1.875rem, 1.2rem + 2vw, 2.75rem); font-weight: 900; letter-spacing: var(--track-display); line-height: 1.05; }
.vcard__body p { color: var(--on-dark-soft); text-wrap: pretty; }
/* The ::after is a touch target of 44px or more; the visible link stays as drawn. */
.reel {
  position: relative; justify-self: start; display: inline-flex; align-items: center; gap: .5rem; padding: .25rem 0;
  font-weight: 800; color: var(--lime); text-decoration: none; border-bottom: 2px solid currentColor;
}

.reel::after { content: ""; position: absolute; inset: -.5rem; }

/* Play button and its bottom-left anchor, shared with the look back card (lookback.css) */
.media-cta {
  position: absolute; z-index: 1; inset-inline: 0; bottom: 0; display: flex; align-items: center; gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.play {
  flex: none; display: grid; place-items: center; width: clamp(3.5rem, 5vw, 4.5rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--lime); color: var(--navy-900); font-size: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 0 0 0 rgb(73 248 57 / .45), 0 18px 34px -12px rgb(0 0 0 / .6);
  transition: transform .45s var(--ease-out);
}
.play i { margin-left: .12em; }
@media (hover: hover) {
  .vcard__media:hover img { transform: scale(1.06); }
  .vcard__media:hover .play { transform: scale(1.1); }
  .reel:hover { color: var(--white); }
}

@media (min-width: 720px) and (max-width: 1099px) {
  .vcard { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .vcard__media { aspect-ratio: auto; min-height: 100%; }
  .vcard__body { align-content: center; }
}
@media (min-width: 1100px) {
  .closer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
}