/* hero.css: component-owned rules. Shared priority order is declared in tokens.css. */
@layer presentation {
/* hero */
#top .hero-copy {
  top: 29%;
}

#top h1 {
  font-size: clamp(var(--font-38),4vw,var(--font-64));
  line-height: 1.65;
  letter-spacing: .1em;
}

#top .hero-description {
  margin: var(--space-35) 0 var(--space-30);
  padding: 0;
  font: var(--font-15)/2 var(--serif);
  letter-spacing: .065em;
  background: none;
}

/* hero */
@media(max-width:850px) {
#top .hero-copy {
  top: 28%;
}

#top .hero-description {
  font-size: var(--font-14);
}
}

/* hero */
@media(max-width:560px) {
#top .hero-copy {
  top: 24%;
  left: 8%;
  width: 86%;
}

#top h1 {
  font-size: clamp(var(--font-32),9.1vw,var(--font-46));
  line-height: 1.75;
  letter-spacing: .085em;
}

#top .hero-description {
  margin: var(--space-29) 0 var(--space-28);
  font-size: var(--font-14);
  line-height: 2;
  letter-spacing: .015em;
}
}

/* hero */
@media(max-width:360px) {
#top .hero-description {
  font-size: var(--font-12);
  letter-spacing: 0;
}

#top h1 {
  letter-spacing: .045em;
}
}

/* typography */
#top .hero-description {
  font-size: var(--font-16);
  letter-spacing: .025em;
}

#top .hero-copy>a.outline {
  font-size: var(--font-15);
}

/* typography */
@media(max-width:560px) {
#top .hero-description {
  font-size: var(--font-15);
  letter-spacing: 0;
}
}

/* typography */
@media(max-width:360px) {
#top .hero-description {
  font-size: var(--font-14);
}
}

/* final-polish */
#top .scroll {
  min-width: 24px;
  text-align: center;
}

/* phase1 */
@media(max-width:560px) {
#top .hero-description {
  position: relative;
  isolation: isolate;
  width: max-content;
  max-width: 100%;
  background: none;
  padding: 0;
}

#top .hero-description:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12px -20px -12px -14px;
  background: linear-gradient(90deg,var(--color-faf9f6e0) 0%,var(--color-faf9f6b0) 68%,var(--color-faf9f600) 100%);
  pointer-events: none;
}
}
}