.detail-page {
  --section-space: clamp(3rem, 5vw, 5rem);
}

.detail-page main > .section {
  min-height: calc(100svh - 5rem);
}

.detail-page h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7.5vw, 7.5rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.detail-page--cv h1 {
  font-size: clamp(2.6rem, 5.5vw, 5.5rem);
  overflow-wrap: normal;
}

.detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line-light);
}

.detail-links a {
  border-bottom: 1px solid var(--line-light);
}

.detail-links a:hover,
.detail-links a:focus-visible {
  color: var(--accent);
}

.detail-photo {
  position: relative;
  height: clamp(18rem, 38vw, 34rem);
  margin: 0;
  overflow: hidden;
  background: var(--charcoal);
}

.detail-photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(8 9 8 / 45%), transparent 45%);
  pointer-events: none;
  content: '';
}

.detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.detail-page--cv .detail-photo img {
  object-position: center 25%;
}

.detail-page--contact .detail-photo img {
  object-position: center 30%;
}

.detail-page--contact .contact {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}