/* ============================================================
   Camillo - shared hero typography

   Hero layout and imagery remain owned by each page. This file is
   deliberately limited to the shared editorial type hierarchy.
   ============================================================ */

:root {
  --camillo-hero-title-size: clamp(3rem, 8vw, 6rem);
  --camillo-hero-title-size-long: clamp(2.65rem, 7.2vw, 5.5rem);
  --camillo-hero-title-leading: 0.9;
  --camillo-hero-title-tracking: -0.045em;
  --camillo-hero-subtitle-size: clamp(1.0625rem, 1.45vw, 1.3rem);
  --camillo-hero-kicker-size: clamp(0.7rem, 0.9vw, 0.8125rem);
}

.camillo-hero-title {
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--font-display, "Inter", system-ui, -apple-system, sans-serif) !important;
  font-size: var(--camillo-hero-title-size) !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: var(--camillo-hero-title-tracking) !important;
  line-height: var(--camillo-hero-title-leading) !important;
  text-transform: uppercase !important;
  text-wrap: balance;
}

.camillo-hero-title--long {
  max-width: 15ch;
  font-size: var(--camillo-hero-title-size-long) !important;
}

/* menu-layout.css uses a deliberately specific !important rule. Keep the
   menu inside the shared scale without weakening its page-level layout. */
body.page-id-23 .menu-page .banner h1.camillo-hero-title {
  font-size: var(--camillo-hero-title-size) !important;
  letter-spacing: var(--camillo-hero-title-tracking) !important;
  line-height: var(--camillo-hero-title-leading) !important;
}

body.page-id-23 .menu-page .banner .camillo-hero-subtitle {
  font-size: var(--camillo-hero-subtitle-size) !important;
}

.camillo-hero-title em {
  display: inline !important;
  color: var(--camillo-pink, #faa8b5) !important;
  font-style: normal !important;
}

.camillo-hero-subtitle {
  max-width: 46ch;
  margin: clamp(12px, 1.5vw, 18px) 0 0 !important;
  color: #fff !important;
  font-family: var(--font-body, "Inter", system-ui, -apple-system, sans-serif) !important;
  font-size: var(--camillo-hero-subtitle-size) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.38 !important;
  text-wrap: pretty;
}

.camillo-hero-kicker,
.pdn-hero .eb {
  margin: 0 0 clamp(10px, 1vw, 14px) !important;
  color: var(--camillo-pink, #faa8b5) !important;
  font-family: var(--font-display, "Inter", system-ui, -apple-system, sans-serif) !important;
  font-size: var(--camillo-hero-kicker-size) !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

@media (max-width: 359.98px) {
  :root {
    --camillo-hero-title-size: 2.8rem;
    --camillo-hero-title-size-long: 2.45rem;
  }
}