.camp-screen { background: var(--ink); }

.camp-heading,
.camp-film,
.camp-highlights {
  max-width: 960px;
  margin-inline: auto;
}

.camp-heading { margin-bottom: clamp(1.4rem, 3.6vw, 2.5rem); }

.camp-heading h2 {
  max-width: 30ch;
  font-size: clamp(1.9rem, 4.1vw, 3.25rem);
  line-height: 1.18;
  text-wrap: balance;
}

.camp-heading p {
  margin-top: .8rem;
  color: var(--muted);
}

.camp-film-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(.8rem, 2vw, 1.5rem);
  background: var(--coal);
}

.camp-film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.camp-film-play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: clamp(3.25rem, 8vw, 5rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--amber);
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  box-shadow: 0 0 0 .45rem #0e0e0f80;
}

.camp-film-play:not([hidden]) { display: grid; }
.camp-film-play:hover { background: var(--text); }
.camp-film-play svg { width: 50%; fill: currentColor; }
.camp-film-error { margin-top: .65rem; color: var(--muted); }
.camp-film-error a { color: var(--amber); text-decoration: underline; }

.camp-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem 1.25rem;
  margin-block: clamp(1.1rem, 3vw, 1.8rem) 0;
  padding: 0;
  list-style: none;
}

.camp-highlights li {
  border-top: 1px solid var(--line);
  padding-top: .7rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 660px) {
  .camp-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}