/* TV presentation: keep the desktop 16:9 experience inside one visible screen. */
@media screen and (min-width: 1200px) and (min-aspect-ratio: 16/10) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid var(--deep);
    outline-offset: 4px;
  }

  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
  }

  body {
    display: flex;
    flex-direction: column;
    --footer-space: 6vh;
  }

  main {
    flex: 1 1 auto;
    min-height: 0;
  }

  .site-header {
    position: fixed;
    inset: 0 0 auto;
    padding: 2vh 4vw;
  }

  .section {
    min-height: calc(100dvh - var(--footer-space));
    padding: 13vh 4vw 4vh;
  }

  .hero {
    min-height: calc(100dvh - var(--footer-space));
    height: calc(100dvh - var(--footer-space));
    grid-template-columns: 1.05fr .95fr;
    gap: 4vw;
    padding-top: 15vh;
    padding-bottom: 5vh;
  }

  .hero h1 {
    font-size: clamp(3rem, 5.8vw, 6.5rem);
    line-height: .94;
    margin: 1vh 0 2vh;
  }

  .hero p {
    font-size: clamp(1rem, 1.25vw, 1.45rem);
    line-height: 1.45;
  }

  .hero-media,
  .about-media {
    max-height: 72dvh;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .hero-media > img,
  .about-media > img {
    display: block;
    width: 100%;
    max-height: 68dvh;
    margin: 0;
    border: 5px solid var(--blue);
    object-fit: cover;
    object-position: top center;
  }

  .section h1,
  .section h2 {
    font-size: clamp(2.25rem, 4vw, 5rem);
    line-height: 1;
    margin-top: 1vh;
    margin-bottom: 2vh;
  }

  .split {
    min-height: calc(100dvh - var(--footer-space));
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 5vw;
    align-items: center;
  }

  .portrait {
    max-height: 67dvh;
    width: 100%;
    object-fit: contain;
  }

  .cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.3vw;
  }

  .card {
    padding: clamp(16px, 1.4vw, 28px);
  }

  .card h2,
  .card h3 {
    font-size: clamp(1.15rem, 1.5vw, 1.8rem);
    margin-top: 0;
  }

  .card p,
  .merch p,
  .contact p,
  .cta-banner p {
    font-size: clamp(.95rem, 1.1vw, 1.25rem);
    line-height: 1.45;
  }

  .merch,
  .contact,
  .cta-banner {
    min-height: calc(100dvh - var(--footer-space));
    padding: 13vh 4vw 5vh;
  }

  .give-layout {
    height: calc(100dvh - var(--footer-space));
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .give-layout .give-space {
    min-height: 0;
  }

  .give-layout .cta-banner {
    min-height: 0;
    height: auto;
    margin: 0 5vw;
    padding: 4vh 4vw;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .give-layout .cta-banner > div {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .give-layout .cta-banner h1 {
    margin: 1vh 0 1.5vh;
    font-size: clamp(2rem, 3.2vw, 4rem);
    line-height: 1;
  }

  .give-layout .cta-banner p {
    margin: 0 auto;
    max-width: 64rem;
    font-size: clamp(.9rem, 1.05vw, 1.25rem);
    line-height: 1.35;
  }

  .give-layout .give-buttons {
    width: 100%;
    justify-content: center;
    gap: clamp(8px, 1vw, 16px);
  }

  .give-layout .give-buttons .btn {
    min-width: min(10rem, 100%);
    max-width: 100%;
    font-size: clamp(.9rem, 1vw, 1.2rem);
  }

  .gallery {
    max-height: 68dvh;
  }

  .gallery img {
    max-height: 32dvh;
    object-fit: contain;
  }

  .contact-form {
    gap: 1vh 1.2vw;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    padding: 1.2vh 1vw;
    font-size: clamp(1rem, 1.1vw, 1.3rem);
  }

  .btn {
    min-height: 5vh;
    padding: 1.4vh 1.4vw;
    font-size: clamp(1rem, 1.1vw, 1.3rem);
  }

  footer {
    position: static;
    flex: 0 0 auto;
    padding: 1.5vh 4vw;
  }

  footer p {
    margin: 0;
    font-size: clamp(.7rem, .75vw, 1rem);
  }
}

@media screen and (min-width: 3000px) and (min-aspect-ratio: 16/10) {
  .site-header {
    padding: 2.5vh 4vw;
  }

  .hero h1 {
    font-size: clamp(5rem, 5.8vw, 9rem);
  }

  .hero p,
  .card p,
  .merch p,
  .contact p,
  .cta-banner p {
    font-size: clamp(1.35rem, 1.25vw, 2rem);
  }

  .btn {
    font-size: clamp(1.35rem, 1.1vw, 2rem);
  }
}

.brand-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: contain;
}

.give-page {
  background: url('../img/giveback.webp') center / cover fixed no-repeat;
}

.give-layout .cta-banner {
  background: linear-gradient(135deg, rgba(6, 27, 73, .88), rgba(7, 87, 255, .78));
}

.give-page footer {
  background: rgba(6, 27, 73, .82);
}

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .about-copy {
    animation: about-copy-slide-in .6s ease-out both;
  }

  .hero-copy {
    animation: about-copy-slide-in .6s ease-out both;
  }

  ::view-transition-group(root) {
    animation-duration: .4s;
    animation-timing-function: ease-in-out;
  }

  ::view-transition-old(root) {
    animation: page-slide-out .4s ease-in-out both;
    mix-blend-mode: normal;
  }

  ::view-transition-new(root) {
    animation: page-slide-in .4s ease-in-out both;
    mix-blend-mode: normal;
  }

  @keyframes page-slide-in {
    from {
      transform: translateX(100%);
    }

    to {
      transform: translateX(0);
    }
  }

  @keyframes about-copy-slide-in {
    from {
      opacity: 0;
      transform: translateX(-12%);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes page-slide-out {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-100%);
    }
  }
}