/* A restrained keynote treatment that stays inside the original editorial
   spine instead of creating a separate campaign moment. */

.keynote {
  --pad: clamp(64px, 8vw, 108px);
}

.keynote__body {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 52px);
}

.keynote__portrait {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--plate);
}

.keynote__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: grayscale(1) contrast(1.04) brightness(0.9);
  transition: filter 0.85s var(--ease);
}

.keynote:hover .keynote__portrait img {
  filter: grayscale(0.12) contrast(1.02) brightness(0.94);
}

.keynote__name {
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.keynote__lead {
  margin-top: clamp(14px, 1.8vw, 20px);
  max-width: 46ch;
  color: var(--text2);
  font-size: clamp(1rem, 1.45vw, 1.1875rem);
  line-height: 1.5;
}

.keynote__cred {
  margin-top: 12px;
  max-width: 48ch;
  color: var(--meta);
  font-size: 0.875rem;
  line-height: 1.5;
}

.keynote__link {
  display: inline-flex;
  margin-top: 14px;
}

@media (max-width: 1040px) {
  .keynote__body { grid-template-columns: minmax(160px, 230px) minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .keynote__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .keynote__portrait { width: min(100%, 420px); aspect-ratio: 16 / 10; }
  .keynote__name { font-size: clamp(2rem, 10vw, 3rem); white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .keynote__portrait img { transition: none; }
}