/* Desktop one-screen composition. Mobile/tablet keeps the scrollable base layout. */
@media (min-width: 861px) and (min-height: 620px) {
  html,
  body {
    height: 100%;
  }

  body {
    overflow: hidden;
  }

  .page {
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 65%) minmax(0, 35%);
    overflow: hidden;
  }

  .hero,
  .editorial-grid {
    min-height: 0;
    height: 100%;
  }

  .hero-copy,
  .cocktail-card,
  .about-card,
  .lifestyle-card,
  .music-card,
  .record-card {
    min-height: 0;
    height: 100%;
  }

  .hero-copy {
    padding:
      clamp(20px, 3.1vh, 34px)
      clamp(34px, 4.4vw, 70px)
      clamp(18px, 2.7vh, 30px);
  }

  .brand-row {
    min-height: clamp(68px, 9.5vh, 86px);
  }

  .logo-mark {
    width: clamp(70px, 9vh, 92px);
    font-size: clamp(18px, 2.5vh, 24px);
    letter-spacing: -1.35px;
  }

  .logo-mark small {
    margin-top: 7px;
    font-size: clamp(5px, .72vh, 6px);
  }

  .vinyl-large {
    width: clamp(280px, 27vw, 430px);
    height: clamp(280px, 27vw, 430px);
    right: clamp(-160px, -8vw, -100px);
    top: clamp(-195px, -10vw, -120px);
  }

  h1 {
    margin-top: clamp(10px, 1.7vh, 17px);
    font-size: clamp(70px, min(7.2vw, 13.5vh), 124px);
    line-height: .82;
  }

  .manifesto {
    margin-top: clamp(16px, 2.3vh, 24px);
    font-size: clamp(25px, min(2.45vw, 4.8vh), 42px);
    line-height: .93;
  }

  .coming {
    margin-top: clamp(13px, 1.8vh, 18px);
    max-width: 590px;
    font-size: clamp(12px, min(.92vw, 1.9vh), 15px);
    line-height: 1.28;
  }

  .hero-actions {
    margin-top: clamp(13px, 1.9vh, 19px);
    gap: 10px;
  }

  .hero-action {
    min-height: clamp(42px, 5.8vh, 48px);
    padding: 0 clamp(14px, 1.4vw, 20px);
    gap: 9px;
    border-radius: 8px;
    font-size: clamp(12px, min(.88vw, 1.8vh), 14px);
  }

  .mini-instagram {
    width: 18px;
    height: 18px;
    border-width: 1.8px;
  }

  .mini-instagram::before {
    width: 5px;
    height: 5px;
    border-width: 1.8px;
    left: 4.5px;
    top: 4.5px;
  }

  .mini-instagram::after {
    width: 2.5px;
    height: 2.5px;
  }

  .mini-phone {
    font-size: 17px;
  }

  .cocktail-card {
    background: var(--paper);
  }

  .cocktail-card img {
    object-fit: contain;
    object-position: 74% 47%;
    transform: scale(.96);
    transform-origin: center;
  }

  .cocktail-card::after {
    background: linear-gradient(
      90deg,
      rgba(247,245,241,.98) 0%,
      rgba(247,245,241,.92) 25%,
      rgba(247,245,241,.22) 50%,
      transparent 68%
    );
  }

  .cocktail-copy {
    left: clamp(30px, 4vw, 62px);
    bottom: clamp(24px, 4.6vh, 44px);
    max-width: 34%;
  }

  .cocktail-kicker {
    margin-bottom: clamp(10px, 1.6vh, 15px);
    font-size: clamp(9px, 1.35vh, 11px);
  }

  .cocktail-copy strong {
    font-size: clamp(44px, min(4vw, 8.2vh), 72px);
    line-height: .77;
  }

  .cocktail-copy i {
    width: 30px;
    height: 3px;
    margin: clamp(13px, 2vh, 19px) 0 clamp(10px, 1.6vh, 15px);
  }

  .cocktail-copy small {
    font-size: clamp(10px, min(.78vw, 1.55vh), 13px);
    line-height: 1.16;
  }

  .editorial-grid {
    grid-template-columns: 22% 31% 20% 27%;
  }

  .about-card {
    padding: clamp(18px, 2.8vh, 32px) clamp(24px, 3vw, 46px);
  }

  .eyebrow {
    font-size: clamp(22px, min(1.85vw, 4vh), 34px);
    line-height: .9;
  }

  .pink-rule {
    width: 26px;
    height: 3px;
    margin: clamp(11px, 1.8vh, 17px) 0 clamp(10px, 1.6vh, 15px);
  }

  .intro {
    font-size: clamp(10px, min(.8vw, 1.7vh), 14px);
    line-height: 1.24;
  }

  .soon {
    margin-top: clamp(8px, 1.2vh, 12px);
    font-size: clamp(10px, 1.5vh, 12px);
  }

  .lifestyle-card img {
    object-position: 53% 51%;
  }

  .music-card {
    padding: clamp(18px, 2.8vh, 32px) clamp(22px, 2.6vw, 40px);
  }

  .music-card p {
    font-size: clamp(29px, min(2.7vw, 5.6vh), 48px);
    line-height: .76;
  }

  .music-card span {
    width: 82%;
    margin-top: clamp(13px, 2vh, 19px);
    padding-top: clamp(8px, 1.2vh, 11px);
    border-top-width: 2px;
    font-size: clamp(9px, min(.65vw, 1.35vh), 11px);
  }

  .record {
    width: clamp(300px, min(30vw, 52vh), 500px);
    height: clamp(300px, min(30vw, 52vh), 500px);
  }

  .record-label {
    width: 40%;
    padding: 23% 8% 18%;
  }

  .record-label strong {
    font-size: clamp(8px, min(.66vw, 1.35vh), 11px);
  }

  .record-hole {
    width: clamp(8px, 1.2vh, 11px);
    height: clamp(8px, 1.2vh, 11px);
  }

  .record-label small {
    font-size: clamp(7px, min(.56vw, 1.15vh), 9px);
  }
}

/* Very short desktop windows should remain usable rather than clipping content. */
@media (min-width: 861px) and (max-height: 619px) {
  body {
    overflow: auto;
  }
}