.hero {
  margin-bottom: 6vw;
}

.side-line {
  top: 8vw;
  bottom: 20vw;
}

/* ── Topbar floats over hero image ────────────────────── */

.detail-page .detail-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
}

.detail-page .detail-topbar .detail-nav-link {
  color: white;
}

/* ── Hero photo ───────────────────────────────────────── */

.about-hero {
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.about-hero img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ── Content wrapper ──────────────────────────────────── */

.about-content {
  position: relative;
  padding-bottom: 80px;
}

/* ── Two-column split (no photo above) ───────────────── */

.about-split {
  display: flex;
  gap: 11%;
  align-items: flex-start;
  padding: 6vw 21.5%;
  box-sizing: border-box;
}

.about-split__title {
  flex: 0 0 34%;
  margin: 0;
  font-family: "Vinnytsya", sans-serif;
  font-size: 2.4vw;
  font-weight: 400;
  line-height: 1.15;
  color: #C695BA;
}

.about-split__text {
  flex: 1;
  min-width: 0;
  font-family: "Merriweather", serif;
  font-size: 1.2vw;
  line-height: 1.5;
  color: #6E2A5E;
}

.about-split__text p { margin: 0 0 1.6em; text-wrap: pretty; }

/* ── Photo sections ───────────────────────────────────── */

.about-photo-first {
  margin-top: 7vw;
  margin-bottom: 0;
}

.about-photo-second {
  margin-top: 4vw;
  margin-bottom: 0;
}

/* ── Workshops split ──────────────────────────────────── */

.about-workshops-split {
  padding-top: 15vw;
  padding-bottom: 2vw;
}

.about-names-row {
  padding-top: 3vw;
  padding-bottom: 6vw;
  align-items: flex-start;
}

.about-preview {
  flex: 0 0 65%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.about-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.about-preview.visible img { opacity: 1; }

/* ── Location tags ────────────────────────────────────── */

.about-locations {
  display: flex;
  justify-content: center;
  gap: 3vw;
  align-items: center;
  padding: 4vw 8% 1.5vw;
  box-sizing: border-box;
}

.about-location {
  position: relative;
  font-family: "Vinnytsya", sans-serif;
  font-size: 1.4vw;
  color: #C695BA;
  text-decoration: none;
  white-space: nowrap;
}

.about-location::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.2vw;
  height: 10px;
  background-image: url("images/dash.svg");
  background-repeat: repeat-x;
  background-size: auto 10px;
  background-position: center;
  opacity: 0;
  transform: scaleX(0.7);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.about-location:hover::after,
.about-location.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.about-location.active { color: #6E2A5E; }

/* ── Names list ───────────────────────────────────────── */

.about-names {
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: flex-start;
  font-family: "Merriweather", serif;
  font-size: 1.2vw;
  line-height: 1.7;
  color: #6E2A5E;
}

.about-name-link {
  color: #6E2A5E;
  text-decoration: none;
  transition: color 0.15s ease;
}

.about-name-link:hover { color: #C695BA; }

.about-thanks {
  padding-top: 15vw;
}

/* ── Tablet ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .about-split { padding: 6vw 6%; gap: 6%; }
  .about-split__text { font-size: 1.9vw; }
  .about-split__title { flex: 0 0 25%; }

  .about-locations {
    padding: 4vw 6%;
    flex-wrap: wrap;
    gap: 3vw;
    justify-content: center;
  }

  .about-location { font-size: 2.5vw; }

  .about-names-row {
    flex-direction: column;
    padding: 6vw 6% 12vw;
  }

  .about-preview {
    flex: unset;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .about-names {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 6vw;
    font-size: 2vw;
    line-height: 2;
    text-align: center;
  }
}

/* ── Phone ────────────────────────────────────────────── */

@media (max-width: 768px) {
  .about-split {
    flex-direction: column;
    gap: 4vw;
    padding: 12vw 6%;
  }

  .about-split__title {
    flex: unset;
    font-size: 7vw;
  }
  .about-split__title br { display: none; }
  .about-split__text  { font-size: 4vw; }

  .about-locations {
    gap: 3vw 5vw;
    padding: 10vw 6% 4vw;
  }

  .about-location { font-size: 4.5vw; }

  .about-names {
    grid-template-columns: 1fr 1fr;
    font-size: 4vw;
    gap: 0 8vw;
    line-height: 2.2;
  }
}