/* Lalakai home page: layout, rhythm and surfaces. Loaded last, on index.html
   only, so the shared bridge stays as it is for the other pages. Typefaces,
   sizes and copy are unchanged. */

:root {
  /* the vertical rhythm shared by the sections and the footer */
  --home-rhythm: clamp(72px, 7.5vw, 108px);
}

.ll-sections {
  gap: var(--home-rhythm);
}

.site-shell {
  row-gap: var(--home-rhythm);
}

/* hero: the headline and its actions share a row, the art runs full width */

.ll-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(32px, 3.4vw, 48px);
  padding-top: 2rem;
}

@media (min-width: 768px) {
  .ll-hero {
    /* the headline's first line sits level with the first sidebar item */
    padding-top: 5rem;
  }
}

.ll-hero-head {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.ll-hero-head > .ll-display {
  max-width: 640px;
}

@media (min-width: 1200px) {
  .ll-hero-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }

  .ll-hero-actions {
    flex-wrap: nowrap;
    flex-shrink: 0;
    justify-content: flex-end;
  }
}

.ll-hero > .ll-figure {
  width: 100%;
  max-width: none;
  margin-left: 0;
  border-radius: 12px;
}

.ll-hero-art {
  aspect-ratio: 21 / 9;
}

@media (max-width: 1199px) {
  .ll-hero-art {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 599px) {
  .ll-hero-art {
    aspect-ratio: 4 / 3;
  }
}

/* the title card is sized against the wider band; about its old size on desktop */

.ll-hero-art .ll-title-lead {
  font-size: clamp(40px, 4cqi, 64px);
}

.ll-hero-art .ll-title-models {
  font-size: clamp(16px, 1.7cqi, 28px);
}

.ll-hero-actions .ll-button:first-child {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-background);
}

.ll-hero-actions .ll-button:first-child:hover {
  border-color: var(--color-pri-800);
  background: var(--color-pri-800);
  color: var(--color-mono-000);
}