/* Home presentation only. Keep the artwork and door leaves in their 8:5 frame. */
@media screen {
  body.is-category .hero > .home-visual { display: none; }

  body:not(.is-category) .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    row-gap: clamp(12px, 2vh, 24px);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    overflow: visible;
  }

  body:not(.is-category) .hero nav {
    grid-area: 1 / 1;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: 16px;
  }

  body:not(.is-category) .hero > .home-visual {
    grid-area: 2 / 1;
    justify-self: center;
    width: 92%;
    max-width: 1600px;
    min-height: 0;
    display: grid;
    place-items: center;
    container-type: size;
  }

  body:not(.is-category) .hero .door-stage {
    position: relative;
    grid-area: auto;
    inset: auto;
    transform: none;
    width: min(100cqw, 160cqh);
    max-width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 8 / 5;
    margin: 0;
    align-self: center;
  }

  body:not(.is-category) .hero .copy {
    grid-area: 3 / 1;
    justify-self: center;
    align-self: center;
    width: 92%;
    max-width: 1600px;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 20px;
  }

  body:not(.is-category) .hero .copy .eyebrow {
    grid-column: 1 / -1;
    margin: 0;
  }

  body:not(.is-category) .hero .copy h1 {
    margin: 0;
    font-size: clamp(22px, 3.6vh, 36px);
    line-height: 1.35;
  }

  body:not(.is-category) .hero .copy .sub {
    margin: 0;
    align-self: end;
    text-align: right;
  }

  @media (max-width: 800px) {
    body:not(.is-category) .hero {
      row-gap: clamp(8px, 1.5vh, 14px);
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    body:not(.is-category) .hero nav {
      gap: 8px;
      padding: max(12px, env(safe-area-inset-top)) max(4vw, env(safe-area-inset-right)) 10px max(4vw, env(safe-area-inset-left));
    }
    body:not(.is-category) .hero .logo { width: 164px; }
    body:not(.is-category) .hero nav .menu {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0 8px;
      font-size: 12px;
    }
    body:not(.is-category) .hero .menu a,
    body:not(.is-category) .hero .menu .quote-link {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 2px;
      min-height: 44px;
    }
    body:not(.is-category) .hero .copy { gap: 5px 12px; }
    body:not(.is-category) .hero .copy .eyebrow { font-size: 9px; }
    body:not(.is-category) .hero .copy h1 {
      font-size: clamp(20px, 5.8vw, 28px);
      line-height: 1.35;
    }
    body:not(.is-category) .hero .copy .sub {
      font-size: 8px;
      letter-spacing: .1em;
      line-height: 1.7;
    }
  }

  /* Short landscape screens use the same artwork beside the headline. */
  @media (max-height: 600px) and (min-aspect-ratio: 3/2) {
    body:not(.is-category) .hero {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      grid-template-rows: auto minmax(0, 1fr);
      column-gap: 3vw;
      row-gap: 10px;
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    body:not(.is-category) .hero nav {
      grid-area: 1 / 1 / 2 / -1;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 6px 16px;
      padding-top: max(8px, env(safe-area-inset-top));
      padding-bottom: 8px;
    }
    body:not(.is-category) .hero nav .home-link { grid-area: 1 / 1; }
    body:not(.is-category) .hero .logo { width: 156px; }
    body:not(.is-category) .hero nav .nav-auth {
      grid-area: 1 / 2;
      display: flex;
      width: auto;
    }
    body:not(.is-category) .hero nav .menu {
      grid-area: 2 / 1 / 3 / -1;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      width: 100%;
      gap: 6px;
      font-size: 12px;
    }
    body:not(.is-category) .hero .menu a,
    body:not(.is-category) .hero .menu .quote-link {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 40px;
      padding: 6px 2px;
    }
    body:not(.is-category) .hero > .home-visual {
      grid-area: 2 / 2;
      justify-self: start;
    }
    body:not(.is-category) .hero .copy {
      grid-area: 2 / 1;
      justify-self: end;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    body:not(.is-category) .hero .copy h1 { font-size: clamp(22px, 3vw, 32px); }
    body:not(.is-category) .hero .copy .sub { text-align: left; }
  }
}