/* Highlights Page */
body {
  background: radial-gradient(1000px 800px at 50% 0%, #15303b 0%, #0c1523 70%, #0a0f1a 100%) fixed;
  color: var(--ink);
  min-height: 100vh;
  margin: 0;
}

.centered {
  text-align: center;
  padding-top: 180px;
}

.centered h1 {
  font-size: 48px;
  margin-bottom: 16px;
}

.centered p {
  font-size: 18px;
  color: var(--muted);
}

.link {
  color: var(--brand);
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}
/* Page title */
.page-title{
  margin: 40px 0 18px;
  font-size: 42px;
  color: var(--ink);
  text-align: left;
}

/* Responsive grid for videos */
.video-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Card look that matches your site */
.video-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
}

/* 16:9 frame with rounded corners */
.video-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;      /* modern, clean */
  overflow: hidden;
  border-radius: 12px;
  background: #0f1627;       /* fallback while loading */
  border: 1px solid var(--line);
}
.video-frame iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* Small title under each video */
.video-title{
  margin: 10px 6px 2px;
  font-size: 16px;
  color: var(--muted);
}

/* Hover lift for a little delight */
.video-card:hover .video-frame{
  transform: translateY(-2px);
  transition: transform .25s ease;
}

/* Mobile */
@media (max-width: 980px){
  .page-title{ margin-top: 40px; font-size: 34px; }
  .video-grid{ grid-template-columns: 1fr; gap: 16px; }
}

/* match main site nav typography */

.brand-text {
  font-weight: 700;         /* homepage brand is bold */
  font-size: 1.4rem;       /* ~20px on a 16px root */
  letter-spacing: 0.2px;
}

.nav-list a {
  font-weight: 500;         /* medium weight links */
  font-size: 1rem;          /* 16px */
  letter-spacing: 0.1px;
}


.nav-list a[aria-current="page"]::after { width: 100%; }