/* ==========================================================================
   North — Homepage
   Styles used only on index.html. New pages get their own file in /pages.
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  display: flex;
  align-items: center;
  min-height: min(calc(100svh - var(--header-h)), 860px);
  padding-block: var(--space-8) var(--space-9);
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 12ch;
}
.hero__title span { color: var(--red); }

.hero__aside {
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--red);
}

.hero__lede {
  margin-top: var(--space-6);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--muted);
  max-width: 40ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Fade-up on load */
.hero__content > * { animation: rise 700ms var(--ease) both; }
.hero__content > *:nth-child(2) { animation-delay: 120ms; }
.hero__content > *:nth-child(3) { animation-delay: 200ms; }
.hero__content > *:nth-child(4) { animation-delay: 280ms; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Fine print ---------- */
.fineprint .heading em { color: var(--red-bright); }

/* ---------- Boutique ---------- */
.boutique__body {
  font-size: var(--fs-md);
  line-height: 1.55;
  max-width: 40ch;
}
@media (min-width: 900px) {
  .boutique__body { padding-top: calc(4px + var(--space-5)); } /* align with heading text, below the red rule */
}
.boutique__body p + p { margin-top: var(--space-4); }
.boutique__body strong { font-weight: 700; color: var(--red); }

/* ---------- Contact ---------- */
.contact__heading {
  font-size: var(--fs-xl);
  max-width: 16ch;
}
.contact__email { margin-top: var(--space-6); }
.contact__actions { margin-top: var(--space-5); }

@media (max-width: 600px) {
  .site-header .status { display: none; }
  .hero { min-height: 0; padding-block: var(--space-8); }
}