/* ==========================================================================
   Desktop "fit to screen" landing
   Hero + finder fill exactly one viewport. Every size is a multiple of --u,
   1/100 of the 1672×941 reference frame, capped by viewport height so the
   whole frame always fits without scrolling.
   ========================================================================== */
@media (min-width: 1100px) {
  .landing {
    --u: min(1cqw, 1.777vh);
    position: relative;
    /* Above .main so the filter menus can open down over the directory */
    z-index: 3;
    isolation: isolate;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    background: linear-gradient(180deg, #fdfdf6 0%, var(--cream) 60%, #fbfcf6 100%);
  }

  .hero {
    position: static;
    overflow: visible;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    padding: calc(3.2 * var(--u)) 0 calc(1.4 * var(--u));
    background: none;
  }

  .hero-waves {
    width: 60%;
  }

  /* Fade the hero's waves into the directory below so there is no seam */
  .landing-bg::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(6 * var(--u));
    background: linear-gradient(180deg, rgba(251, 252, 246, 0), var(--bg));
  }

  .hero-art {
    width: auto;
    height: calc(56.3 * var(--u));
    aspect-ratio: 3 / 2;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(180deg, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(180deg, #000 88%, transparent 100%);
    mask-composite: intersect;
  }

  .hero-art img {
    height: 100%;
  }

  .hero-curve {
    display: none;
  }

  .hero-content {
    display: block;
    width: calc(100 * var(--u));
    max-width: 100%;
    margin: auto;
    padding: calc(3.8 * var(--u)) 0 0 calc(4.9 * var(--u));
  }

  .hero-copy {
    container-type: normal;
    max-width: calc(39 * var(--u));
  }

  .eyebrow {
    gap: calc(0.72 * var(--u));
    padding: calc(0.62 * var(--u)) calc(1.15 * var(--u)) calc(0.62 * var(--u)) calc(0.95 * var(--u));
    font-size: calc(0.78 * var(--u));
    letter-spacing: calc(0.095 * var(--u));
  }

  .eyebrow svg {
    width: calc(1.15 * var(--u));
    height: calc(1.15 * var(--u));
  }

  .hero h1 {
    margin: calc(1.75 * var(--u)) 0 0;
    font-size: calc(4.3 * var(--u));
    line-height: 0.96;
    letter-spacing: -0.035em;
  }

  .hero-copy p {
    max-width: calc(36 * var(--u));
    margin-top: calc(1.05 * var(--u));
    font-size: calc(1.2 * var(--u));
    line-height: 1.5;
    color: #4a5951;
  }

  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(37.2 * var(--u));
    gap: calc(0.85 * var(--u)) calc(1 * var(--u));
    margin-top: calc(1.85 * var(--u));
  }

  .stat {
    min-height: calc(5.8 * var(--u));
    padding: 0 calc(1.2 * var(--u)) 0 calc(1.55 * var(--u));
    gap: calc(1.55 * var(--u));
    border-radius: calc(0.85 * var(--u));
  }

  .stat-icon {
    width: calc(3.35 * var(--u));
    height: calc(3.35 * var(--u));
    border-radius: calc(0.75 * var(--u));
  }

  .stat-icon svg {
    width: calc(1.6 * var(--u));
    height: calc(1.6 * var(--u));
  }

  .stat-text strong {
    font-size: calc(2.15 * var(--u));
    font-weight: 700;
  }

  .stat-text span {
    margin-top: calc(0.45 * var(--u));
    font-size: calc(0.9 * var(--u));
    white-space: nowrap;
  }

  /* Finder pinned to the bottom of the first screen */
  .landing-finder {
    width: calc(100 * var(--u));
    max-width: 100%;
    margin: 0 auto;
    padding: 0 calc(3 * var(--u)) calc(0.15 * var(--u)) calc(3.4 * var(--u));
  }

  .finder {
    padding: calc(1.3 * var(--u)) calc(1.9 * var(--u)) calc(0.2 * var(--u)) calc(1.6 * var(--u));
    border-radius: calc(1.45 * var(--u));
  }

  .finder-head {
    flex-wrap: nowrap;
    gap: calc(1.2 * var(--u));
    margin-bottom: calc(0.85 * var(--u));
  }

  .finder-intro {
    flex: 1 1 auto;
    gap: calc(1.55 * var(--u));
  }

  .finder-intro > div {
    min-width: 0;
  }

  .finder-avatar {
    width: calc(5.6 * var(--u));
    height: calc(5 * var(--u));
    border-radius: calc(0.9 * var(--u));
    font-size: calc(2.6 * var(--u));
  }

  .finder-kicker {
    gap: calc(0.55 * var(--u));
    font-size: calc(0.75 * var(--u));
    letter-spacing: calc(0.11 * var(--u));
    line-height: 1.35;
  }

  .finder-kicker svg {
    width: calc(1 * var(--u));
    height: calc(1 * var(--u));
  }

  .finder-head h2 {
    margin: calc(0.3 * var(--u)) 0 calc(0.2 * var(--u));
    font-size: calc(1.8 * var(--u));
    font-weight: 700;
    line-height: 1.15;
  }

  .finder-head h2,
  .finder-head p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .finder-head p {
    font-size: calc(1 * var(--u));
    line-height: 1.45;
  }

  .finder-metrics {
    gap: calc(1.1 * var(--u));
  }

  .metric {
    min-width: calc(12.5 * var(--u));
    padding: calc(0.95 * var(--u)) calc(1.1 * var(--u));
    gap: calc(0.9 * var(--u));
    border-radius: calc(0.72 * var(--u));
  }

  .metric svg {
    width: calc(1.75 * var(--u));
    height: calc(1.75 * var(--u));
  }

  .metric strong {
    font-size: calc(1.4 * var(--u));
    font-weight: 700;
  }

  .metric span {
    font-size: calc(0.85 * var(--u));
  }

  .filters-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.15fr) calc(12.7 * var(--u));
    gap: calc(1.25 * var(--u));
    padding: calc(1.15 * var(--u)) calc(1.3 * var(--u)) calc(0.75 * var(--u));
    border-radius: calc(1 * var(--u));
  }

  .filter-label {
    gap: calc(0.55 * var(--u));
    margin: 0 0 calc(0.5 * var(--u)) calc(0.35 * var(--u));
    font-size: max(10px, calc(0.75 * var(--u)));
    letter-spacing: calc(0.11 * var(--u));
    line-height: 1.3;
  }

  .filter-label svg {
    width: calc(1.05 * var(--u));
    height: calc(1.05 * var(--u));
  }

  .field-btn {
    height: calc(3.05 * var(--u));
    gap: calc(0.7 * var(--u));
    padding: 0 calc(1.2 * var(--u));
    border-radius: calc(0.6 * var(--u));
    font-size: calc(1.02 * var(--u));
  }

  .field-emoji {
    width: calc(1.8 * var(--u));
    height: calc(1.8 * var(--u));
    font-size: calc(1 * var(--u));
  }

  .field-arrow {
    width: calc(1.15 * var(--u));
    height: calc(1.15 * var(--u));
  }

  .multiselect .field-btn.has-value {
    padding-right: calc(4.2 * var(--u));
  }

  .field-clear {
    right: calc(2.6 * var(--u));
  }

  .btn-search {
    height: calc(3.75 * var(--u));
    gap: calc(0.7 * var(--u));
    border-radius: calc(0.72 * var(--u));
    font-size: calc(1.14 * var(--u));
  }

  .btn-search svg {
    width: calc(1.35 * var(--u));
    height: calc(1.35 * var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}