/* Shared "slate" page header used by every inner page (about, blog, contact, game, projects, services, testimonials). */
.sh-slate {
  position: relative;
  padding: clamp(9rem, 22vh, 13rem) clamp(1.25rem, 5vw, 5rem) clamp(3rem, 8vh, 5rem);
  overflow: hidden;
}

.sh-slate-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sh-slate-title {
  font-size: clamp(3rem, 9vw, 7.5rem);
  color: var(--sh-bone);
}

.sh-slate-ticks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 5vw, 5rem);
}

.sh-slate-ticks span {
  width: 1px;
  height: 14px;
  background: color-mix(in srgb, var(--sh-bone) 25%, transparent);
}

.sh-slate-ticks span:nth-child(6n + 1) {
  height: 24px;
  background: var(--sh-orange);
}

/* Mount-fired rise-in entrance, used by the slate header on every inner page. */
@media (prefers-reduced-motion: no-preference) {
  .sh-rise {
    animation: sh-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes sh-rise {
    from { transform: translateY(28px); }
    to { transform: translateY(0); }
  }
}