/* The partner signature and Explore use one shared typographic scale. */
.hero,
.stone-bridge {
  --opening-x-size: 22px;
  --opening-wayfinding-size: 20px;
  --opening-label-size: 1rem;
  --opening-label-gap: 14px;
}

.hero .hero-partner,
.hero .explore-link {
  font-size: var(--opening-label-size);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  gap: var(--opening-label-gap);
}

.hero .hero-partner {
  display: flex;
  align-items: center;
  margin-top: 26px;
  color: var(--ink);
}

.hero .hero-partner > span {
  min-width: 0;
}

.hero .hero-partner > svg,
.hero .explore-link > svg:first-child {
  width: var(--opening-x-size);
  height: var(--opening-x-size);
  flex: 0 0 var(--opening-x-size);
  color: var(--copper);
}

.hero .hero-foot .eyebrow {
  font-weight: 700;
}

/* Catalogue swatches retain their proportions; each joint follows the
   material directly above it. The original floor remains below the band. */
.hero {
  --wood-start: 59.505208%;
  --bronze-start: 75.911458%;
  --inlay-top: 66.992188%;
}

.hero-inlay {
  position: absolute;
  top: var(--inlay-top);
  bottom: 7.8125%;
  overflow: hidden;
}

.hero-ripple {
  left: var(--wood-start);
  right: calc(100% - var(--bronze-start));
}

.hero-sage {
  left: var(--bronze-start);
  right: 0;
}

.hero-inlay > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-inlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(108deg, #fff5df0d, transparent 57%, #3a34210d);
  box-shadow: inset 1px 0 #55442d55, inset 0 1px #55442d55, inset 0 -1px #55442d55;
}

/* Continue the Explore circle's centreline into the smaller page marker. */
.stone-bridge .bridge-line {
  left: calc(var(--gutter) - 12px + var(--opening-x-size) / 2);
}

.stone-bridge > svg {
  width: var(--opening-wayfinding-size);
  height: var(--opening-wayfinding-size);
  left: calc(var(--gutter) - 12px + var(--opening-x-size) / 2 - var(--opening-wayfinding-size) / 2);
}

@media (max-width: 760px) {
  .hero,
  .stone-bridge {
    --opening-x-size: 20px;
    --opening-wayfinding-size: 18px;
    --opening-label-size: .9375rem;
  }

  .hero {
    --wood-start: 61%;
    --bronze-start: 77%;
    --inlay-top: 67%;
  }

  .hero .hero-partner {
    margin-top: 20px;
  }

  .stone-bridge .bridge-line {
    left: calc(var(--gutter) - 8px + var(--opening-x-size) / 2);
  }

  .stone-bridge > svg {
    left: calc(var(--gutter) - 8px + var(--opening-x-size) / 2 - var(--opening-wayfinding-size) / 2);
  }
}

@media (max-width: 360px) {
  .hero {
    --opening-label-size: .875rem;
    --opening-label-gap: 4px;
  }

  .hero .hero-foot .eyebrow {
    letter-spacing: normal;
  }

  .hero .explore-link .line-arrow {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }
}