/*
 * Responsive overrides — the single source of truth for breakpoints.
 * Breakpoints: laptop 920px, phone 560px. The desktop status-card float (its
 * min-width:921px counterpart) lives here too, so the breakpoint pair stays
 * together instead of drifting apart.
 */

@media (min-width: 921px) {
  html.motion .current-panel {
    position: absolute;
    /* hug the hero's right edge, clear of Zack's centered ribbon-cutting scissors */
    right: clamp(20px, 3vw, 56px);
    bottom: var(--panel-clear, calc(220px - 8vh));
    z-index: 3;
    width: min(300px, 30vw);
    max-width: none;
    margin: 0;
  }
}

@media (max-width: 920px) {
  /* compact one-line nav, and start the hero below it so it never covers the photo */
  .site-header {
    padding: 12px var(--gutter);
  }
  .hero {
    display: flex;
    flex-direction: column;
    padding-top: 54px;
  }
  .hero-media {
    position: relative;
    inset: auto;
    order: -1;
    width: 100%;
    /* cropped tight so the team reads and the copy clears the clip tray */
    height: clamp(188px, 27vh, 272px);
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 24%, #000 100%);
    mask-image: linear-gradient(0deg, transparent 0%, #000 24%, #000 100%);
  }
  .hero-media img {
    object-position: 50% 40%;
  }
  /* cinematic vignette + merge, echoing the desktop frame so it isn't flat */
  .hero-media::after {
    background: radial-gradient(122% 86% at 50% 36%, transparent 40%, oklch(0 0 0 / 0.52) 100%),
      linear-gradient(0deg, var(--bg) 1%, transparent 34%);
  }
  .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: 16px clamp(40px, 8vh, 64px);
  }
  .current-panel {
    max-width: 460px;
  }
  .section-head {
    grid-template-columns: 1fr;
  }
  .section-note {
    grid-column: 1;
  }
  .role-card {
    grid-template-columns: 1fr;
  }
  .role-bullets {
    grid-column: 1;
  }
  .system-grid,
  .education-grid {
    grid-template-columns: 1fr;
  }
  .press-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .press-card.feature {
    grid-column: span 2;
  }
  .contact-card-main {
    grid-template-columns: 1fr;
  }
  .contact-portrait {
    width: 104px;
  }
  .role-card .role-meta {
    grid-column: 1;
    text-align: left;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  /* shrink the brand + links so the whole nav still fits one line on phones */
  .site-name {
    font-size: 0.9rem;
    white-space: nowrap;
  }
  .nav {
    gap: 10px;
  }
  .nav a {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
  }
  .contact-card {
    border-radius: 14px;
  }
  .contact-card-topline {
    padding-bottom: 36px;
  }
  .contact-links {
    gap: 4px 16px;
  }
  .press-grid {
    grid-template-columns: 1fr;
  }
  .press-card.feature,
  .press-card.quote {
    grid-column: span 1;
  }
}