/* Section: hero. A star-and-cross lattice with a few tiles filled is the side image. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--forest);
  color: var(--on-dark);
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 5vw, 4.5rem);
}

/* The lattice is drawn in the markup as one SVG; only its colours are here */
.hero__art {
  position: absolute;
  inset-block: -12% -12%;
  inset-inline-end: 0;
  z-index: -1;
  inline-size: 42%;
  block-size: 124%;
  color: rgba(232, 181, 71, .5);
  -webkit-mask-image: linear-gradient(to left, #000 60%, transparent), linear-gradient(to bottom, #000 62%, transparent 86%);
  mask-image: linear-gradient(to left, #000 60%, transparent), linear-gradient(to bottom, #000 62%, transparent 86%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  will-change: transform;
}
[dir="rtl"] .hero__art {
  -webkit-mask-image: linear-gradient(to right, #000 60%, transparent), linear-gradient(to bottom, #000 62%, transparent 86%);
  mask-image: linear-gradient(to right, #000 60%, transparent), linear-gradient(to bottom, #000 62%, transparent 86%);
}
.hero__tile--amber { fill: var(--amber); }
.hero__tile--terracotta { fill: var(--terracotta); }
.hero__tile--paper { fill: rgba(247, 243, 234, .14); }

.hero__copy { max-inline-size: 56%; }

.hero__title {
  font-size: clamp(2.6rem, 5vw + .75rem, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.022em;
}
.hero__title em { color: var(--amber); }

.hero__lede {
  max-inline-size: 34rem;
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1.15rem, 1vw + .9rem, 1.375rem);
  line-height: 1.5;
  color: var(--on-dark-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
}

/* Arrival: copy rises once on load */
.js .hero__copy > * {
  animation: hero-rise 1s cubic-bezier(.2, .7, .2, 1) both;
}
.js .hero__lede { animation-delay: .12s; }
.js .hero__actions { animation-delay: .22s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(2rem); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 53.75em) {
  /* On a phone the lattice is a band across the top of the hero */
  .hero { padding-block-start: 9.5rem; }
  .hero__art {
    inset-block: 0 auto;
    inset-inline: 0;
    inline-size: 100%;
    block-size: 7rem;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero__copy { max-inline-size: none; }
  .hero__actions .btn { flex: 1 1 12rem; }
}