/* Typography refresh. Load after the original demo CSS. */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/bebas-neue.ttf') format('truetype');
}

:root {
  --display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  /* Existing selectors keep working without changing the animated markup. */
  --brush: var(--display);
}

.hero__claim,
.hero__enter,
.hh__title,
.hh__name,
.parco__title,
.room__big,
.room__title,
.lista__title,
.signed__sig,
.faq__title {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: .015em;
}

/* Remove the paint texture from text; the original image logo is untouched. */
.hero__claim,
.room__big,
.lista__title {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Keep the reveal mask and its moving child; replace brush-stroke spacing. */
.rise,
.lista__title .rise {
  padding: .09em .035em .07em;
  margin: -.09em -.035em -.07em;
}

.hero__claim {
  font-size: clamp(36px, 4.4vw, 72px);
  line-height: 1.08;
  text-wrap: balance;
}

.hero__enter {
  padding-inline: var(--gutter);
  font-size: clamp(44px, 7vw, 116px);
  line-height: 1;
}

.hh__title {
  font-size: clamp(56px, 7.5vw, 128px);
  line-height: .98;
}

.parco__title {
  font-size: clamp(52px, 7.5vw, 124px);
  line-height: 1;
  text-wrap: balance;
}

.hh__name {
  font-size: clamp(42px, 4.3vw, 74px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .025em;
}

.hh__num {
  right: 70px;
  line-height: 1.4;
  letter-spacing: .12em;
}

.hh__collab span {
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .08em;
}

.hh__collab strong {
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.35;
  font-stretch: 100%;
  letter-spacing: .03em;
}

.room__big {
  font-size: clamp(72px, 8.4vw, 144px);
  line-height: .98;
}

.room__title {
  font-size: clamp(34px, 3.4vw, 56px);
  line-height: 1.08;
  margin-top: 10px;
}

.lista__title {
  font-size: clamp(68px, 10.4vw, 176px);
  line-height: .98;
}

.faq__title {
  font-size: clamp(48px, 6vw, 92px);
  line-height: 1.05;
}

.signed__sig {
  font-size: clamp(48px, 6vw, 86px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.btn,
.dock {
  font-family: var(--ui);
  font-stretch: 100%;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.btn--sm { font-size: 12px; }
.btn--lg { font-size: 16px; }
.dock { padding: 14px 20px; }

.field label { line-height: 1.5; }
.field .opt { line-height: 1.45; }
.faq summary { line-height: 1.35; }
.foot__cols nav { flex-wrap: wrap; }

@media (max-width: 767px) {
  .hero__claim {
    font-size: clamp(28px, 7.2vw, 40px);
    line-height: 1.12;
  }

  .hero__meta {
    gap: 10px;
    font-stretch: 100%;
    font-size: 11px;
    letter-spacing: .1em;
  }

  .hero__meta span + span::before {
    width: 20px;
    margin-right: 10px;
  }

  .hh__title {
    font-size: clamp(52px, 10.5vw, 80px);
    line-height: 1;
  }

  .parco__title {
    font-size: clamp(48px, 9.2vw, 72px);
    line-height: 1.04;
  }

  .lista__title {
    font-size: clamp(68px, 19vw, 110px);
    line-height: 1;
  }

  .room__big { line-height: 1; }
  .btn--lg { padding-inline: 24px; font-size: 15px; }
  .field .opt { display: block; margin: 3px 0 0; }
  .faq summary { font-stretch: 100%; gap: 18px; }
  .foot__cols nav { gap: 16px 22px; }
}