/* ============================================================
   LUMÉRA — Обо мне (светлая секция)
   ============================================================ */

.about__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 1rem + 5vw, 5.5rem);
  align-items: center;
}

.about__media { position: relative; }
.about__media img {
  position: relative; z-index: 1;
  width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
/* золотая рамка-смещение для глубины */
.about__media::before {
  content: ""; position: absolute; z-index: 0;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
}

.signature {
  position: absolute; z-index: 2;
  right: -.2rem; bottom: -1.4rem;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); line-height: 1; rotate: -6deg;
  background: linear-gradient(135deg, #B49F6C, #8C7A4E);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 4px 12px rgba(140, 122, 78, .35));
}

.about__text { margin-top: 1.3rem; color: #4A453C; max-width: 52ch; }
.about__text + .about__text { margin-top: 1rem; }

@media (max-width: 820px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 380px; margin-inline: auto; }
  .about__media::before { inset: 14px -14px -14px 14px; }
}