/*
  LARGE LOGO SECTION STYLES
  ===========================
  A small caption line, then your brand name rendered huge -- a classic
  "signature moment" banner used near the bottom of many ecommerce homepages.
*/

.large-logo {
  background-color: #372345d1; /* confirmed real color, same family as marquee/divider */
  color: #ffffff;
  min-height: 40vh; /* matches "medium" section height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
}

.large-logo__caption {
  font-family: var(--font-body);
  font-size: 1rem;
  max-width: 320px;
  margin: 0;
}

.large-logo__wordmark {
  font-family: var(--font-primary);
  font-size: clamp(4rem, 16vw, 13rem);
  font-weight: 400; /* confirmed via inspector -- browsers bold <h2> tags by
                        default unless told otherwise, which was making this
                        look thicker/rounder than the real site */
  letter-spacing: -0.03em; /* confirmed real site uses tight letter-spacing;
                                em units scale proportionally with font-size,
                                so this stays correct at any screen size */
  margin: 0;
  text-align: center;
  line-height: 1;
}

@media (max-width: 749px) {
  .large-logo {
    padding: 32px 20px;
    min-height: 30vh;
  }
}