/* ==========================================================================
   РАЗДЕЛ «ОБО МНЕ»
   Подключать последним, после style.css, motion.css и manifesto.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ПЕРЕХОД ОТ ГЛАВНОГО ЭКРАНА
   -------------------------------------------------------------------------- */
.hero-canvas { position: relative; }

.hero-canvas::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(180px, 34vh, 420px);
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 34%,
    rgba(255, 255, 255, 0.82) 66%,
    #ffffff 100%
  );
}

/* --------------------------------------------------------------------------
   2. ФОН РАЗДЕЛА
   Картинка растянута на всю секцию. Поверх — белая вуаль сверху и снизу,
   чтобы стыки с соседними блоками растворялись.
   -------------------------------------------------------------------------- */
.about-scene {
  position: relative;
  overflow: hidden;
  max-width: none;
  border-top: none;
  padding: clamp(50px, 7vw, 90px) 0 clamp(70px, 9vw, 120px);
  background: #ffffff;
}

.about-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.about-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Вуаль: середина открыта, края уходят в белый */
.about-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    rgba(255, 255, 255, .35) 26%,
    rgba(255, 255, 255, .35) 74%,
    #ffffff 100%
  );
}

.about-scene-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container, 1400px);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* --------------------------------------------------------------------------
   3. КОМПОЗИЦИЯ
   -------------------------------------------------------------------------- */
.about-note-layout {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 460px) 1fr;
  align-items: center;
  gap: clamp(8px, 1.5vw, 24px);
  margin-top: clamp(32px, 4vw, 56px);
}

.about-portrait img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.about-portrait.is-left  { margin-right: -8%; }
.about-portrait.is-right { margin-left: -8%; }

/* --------------------------------------------------------------------------
   4. ЗАПИСКА
   -------------------------------------------------------------------------- */
.note {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background: transparent;
  padding: clamp(38px, 4vw, 56px) clamp(32px, 3.4vw, 48px) clamp(42px, 4.4vw, 60px);
  transform: rotate(-0.35deg);
  transition: transform var(--transition);
}

.note:hover { transform: rotate(0deg); }

/* Лист отдельным слоем: обрезка контура не должна задеть скотч */
.note::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #F2F1EC;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 130% 90% at 50% 40%, rgba(255,255,255,.7), transparent 65%),
    radial-gradient(ellipse at 100% 100%, rgba(120,112,98,.10), transparent 45%),
    radial-gradient(ellipse at 0% 95%, rgba(120,112,98,.07), transparent 40%);
  background-blend-mode: multiply, normal, normal, normal;
  clip-path: polygon(
    0.4% 0.6%, 26% 0%, 58% 0.9%, 84% 0.2%, 100% 1.1%,
    99.4% 28%, 100% 62%, 99.2% 88%, 99.7% 99.2%,
    72% 100%, 41% 99.1%, 14% 100%, 0.6% 99%,
    0% 71%, 0.8% 38%, 0% 14%
  );
  filter: drop-shadow(0 2px 3px rgba(60, 55, 45, .10))
          drop-shadow(0 14px 30px rgba(60, 55, 45, .12));
}

/* Скотч */
.note::before {
  content: '';
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%) rotate(0.8deg);
  width: 104px;
  height: 46px;
  z-index: 3;
  background-color: rgba(196, 195, 190, .78);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.22) 0 1px,
    rgba(140,139,134,.10) 1px 2px,
    transparent 2px 4px
  );
  box-shadow: 0 1px 2px rgba(60, 55, 45, .14);
  clip-path: polygon(
    3% 0%, 97% 2%, 100% 8%, 96% 16%, 100% 24%,
    97% 100%, 3% 98%, 0% 90%, 4% 82%, 0% 74%
  );
}

.note p { color: #1F1D1A; max-width: none; }
.note p + p { margin-top: 26px; }

.note-sign {
  display: block;
  margin-top: 28px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(31, 29, 26, .5);
}

/* --------------------------------------------------------------------------
   5. МОБИЛЬНЫЙ
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .about-note-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-note-layout .note { order: -1; }

  .about-portrait { max-width: 55%; }
  .about-portrait.is-left  { margin: 0 auto 0 0; }
  .about-portrait.is-right { margin: 0 0 0 auto; }
  .about-portrait img { max-height: 320px; }
}

.about-scene-inner { text-align: center; }

.about-heading {
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* Текст внутри записки остаётся по левому краю */
.about-note-layout { text-align: left; }

.series.is-left img.series-heading { padding-left: clamp(30px, 4vw, 70px); }
.series-stage { height: 34vw !important; max-height: 620px !important; }
.series-piece { max-width: none !important; }
.series.is-left .series-piece:nth-of-type(1) { width: 13vw !important; }
.series.is-left .series-piece:nth-of-type(2) { width: 11vw !important; }
.series.is-left .series-piece:nth-of-type(3) { width: 17vw !important; }
.series.is-left .series-piece:nth-of-type(4) { width: 10vw !important; }
.series.is-right .series-piece:nth-of-type(1) { width: 10vw !important; }
.series.is-right .series-piece:nth-of-type(2) { width: 9vw !important; }
.series.is-right .series-piece:nth-of-type(3) { width: 12vw !important; }
.series.is-right .series-piece:nth-of-type(4) { width: 15vw !important; }

/* ==========================================================================
   МАНИФЕСТ — плотная стопка по эскизу
   ========================================================================== */

.manifesto {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  max-width: 100vw;
  padding: clamp(40px, 5vw, 70px) 0 0;
  overflow: hidden;
}

.manifesto-grid {
  display: grid;
  grid-template-columns: 34vw 32vw 34vw;
  align-items: start;
  gap: 0;
  width: 100vw;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Сцена высокая — стопка занимает колонку целиком */
.series-stage {
  position: relative;
  width: 100%;
  height: 46vw;
  max-height: 820px;
}

.series-piece { position: absolute; max-width: none; height: auto; }

/* Перебиваем прежние правила с nth-of-type */
/* Пропорции: главная крупная, фон умеренный */
.series.is-left .series-piece.p3 { left: -4%; top: 30%; width: 16vw; z-index: 1; }
.series.is-left .series-piece.p4 { left: 32%; top: 64%; width: 9vw;  z-index: 2; }
.series.is-left .series-piece.p1 { left: 2%;  top: 4%;  width: 13vw; z-index: 3; }
.series.is-left .series-piece.p2 { left: 6%;  top: 12%; width: 22vw; z-index: 5; }

.series.is-right .series-piece.p4 { right: -8%; top: 6%;  width: 24vw; z-index: 1; }
.series.is-right .series-piece.p3 { right: 8%;  top: 2%;  width: 19vw; z-index: 2; }
.series.is-right .series-piece.p2 { right: 20%; top: 34%; width: 14vw; z-index: 3; }
.series.is-right .series-piece.p1 { right: 26%; top: 18%; width: 13vw; z-index: 5; }
/* Заголовки */
img.series-heading {
  display: block;
  width: clamp(220px, 21vw, 420px);
  height: auto;
  margin-bottom: 10px;
  padding: 0 clamp(12px, 2vw, 36px);
}

.series.is-right img.series-heading { margin-left: auto; }

/* --- ТЕКСТ --- */
.manifesto-text p,
.series-question {
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.manifesto-text {
  max-width: none;
  margin-inline: auto;
  text-align: justify;
}
.manifesto-text p { margin-inline: auto; }
.manifesto-center { padding: clamp(30px, 5vw, 90px) clamp(12px, 1.5vw, 28px) 0; }
.manifesto-title { font-size: clamp(38px, 5.2vw, 92px); }

.series-question { padding: 0 clamp(12px, 2vw, 36px); margin-top: 18px; }

@media (max-width: 1100px) {
  .manifesto-grid { grid-template-columns: 1fr; gap: 56px; padding: 0 var(--pad-x); }
  .series-stage { height: 105vw; max-height: 600px; }
  .series-piece { width: auto; max-width: 52%; }
}

/* ==========================================================================
   МАНИФЕСТ — финальная раскладка, перебивает всё предыдущее
   ========================================================================== */
.manifesto .series.is-left .series-piece.p1,
.manifesto .series.is-left .series-piece.p3,
.manifesto .series.is-left .series-piece.p4 {
  width: 9vw !important;
}

.manifesto .series.is-left .series-piece.p1 { left: 0    !important; top: 4%  !important; z-index: 3 !important; }
.manifesto .series.is-left .series-piece.p3 { left: 2%   !important; top: 46% !important; z-index: 1 !important; }
.manifesto .series.is-left .series-piece.p4 { left: 40%  !important; top: 62% !important; z-index: 2 !important; }

.manifesto .series.is-left .series-piece.p2 {
  left: 12% !important; top: 12% !important;
  width: 22vw !important; z-index: 5 !important;
}

.manifesto .series-stage { height: 48vw !important; max-height: 780px !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Заголовок для поисковиков, скрытый визуально */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Заголовки не уезжают под липкую шапку */
#about, #manifesto, #shop, #contacts, #hero {
  scroll-margin-top: calc(var(--header-h, 72px) + 16px);
}
/* ==========================================================================
   ПРАВКИ ПО РЕВЬЮ
   ========================================================================== */

/* --- 2. Три размера на весь сайт --- */
:root {
  --fs-lg: clamp(28px, 3.4vw, 58px);
  --fs-md: clamp(15px, 1.15vw, 18px);
  --fs-sm: clamp(12px, 0.85vw, 14px);
}

h2, .manifesto-title, .about-heading, .wall-head h2 { font-size: var(--fs-lg); }

.manifesto-text p,
.series-question,
.note p,
.section-intro,
.shop-note,
.work-title { font-size: var(--fs-md); }

.section-number,
.tab-btn,
.btn,
.work-note,
.work-price,
.note-sign,
.cv-card-role,
.cv-card-hint { font-size: var(--fs-sm); }

/* --- 3. Манифест: заголовки серий над стопкой, не поверх --- */
.series { display: flex; flex-direction: column; }

img.series-heading {
  position: static;
  order: -1;
  width: clamp(180px, 17vw, 320px);
  margin: 0 0 clamp(12px, 1.5vw, 22px);
  align-self: flex-start;
}

.series.is-right img.series-heading { align-self: flex-end; }

/* Центр выравнивается по верху колонок */
.manifesto-grid { align-items: start; }
.manifesto-center { padding-top: clamp(30px, 5vw, 80px); }

/* Вопросы не липнут к краю экрана */
.series-question {
  padding: 0 clamp(20px, 3vw, 48px) clamp(12px, 2vw, 36px);
  margin-top: clamp(20px, 2.5vw, 36px);
}

/* --- 4. Стена: единая типографика --- */
.section-wall,
.section-wall h2,
.section-wall p,
.section-wall .tab-btn { font-family: var(--font-head); }

.section-wall .work-note,
.section-wall .work-price,
.section-wall .section-number,
.section-wall .shop-note { font-family: var(--font-body); }

/* --- 5. Кликабельность --- */
.tab-btn,
.cv-card,
.work,
.hang-frame,
.contact-link { cursor: pointer; }

.contact-link { border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.cv-card-download {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  opacity: .6;
  margin-top: 8px;
}

.tab-btn.active {
  border: 1px solid currentColor;
  border-radius: 100px;
  padding: 6px 16px;
}

/* --- 6. Контакты --- */
.contact-alt {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin-top: 6px;
}

.legal-note {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-soft);
  margin-top: 36px;
  max-width: 60ch;
}

/* Манифест: desktop-композиция по референсу. Мобильная раскладка выше не меняется. */
@media (min-width: 1101px) {
  .manifesto .series-stage {
    width: min(34vw, 652.8px) !important;
    height: auto !important;
    aspect-ratio: 544 / 735 !important;
    max-height: none !important;
    margin-bottom: 0 !important;
  }

  .manifesto .series-question {
    width: min(34vw, 652.8px) !important;
    box-sizing: border-box;
    margin-top: 42px !important;
  }

  .manifesto .series.is-right .series-stage,
  .manifesto .series.is-right .series-question {
    margin-left: auto;
  }

  .manifesto .series-piece {
    max-width: none !important;
  }

  .manifesto .series-circle {
    z-index: 0 !important;
  }

  .manifesto img.series-heading {
    position: relative !important;
    top: min(3.125vw, 60px) !important;
    width: min(24vw, 460.8px) !important;
    max-width: none !important;
    z-index: 6 !important;
  }

  .manifesto .series.is-left .series-piece.p1 {
    left: -13% !important;
    right: auto !important;
    top: 46.9% !important;
    width: 52.1% !important;
    z-index: 1 !important;
  }

  .manifesto .series.is-left .series-piece.p2 {
    left: 17% !important;
    right: auto !important;
    top: 27.4286% !important;
    width: 52.6% !important;
    z-index: 2 !important;
  }

  .manifesto .series.is-left .series-piece.p3 {
    left: 47% !important;
    right: auto !important;
    top: 69.2245% !important;
    width: 30.2941% !important;
    z-index: 4 !important;
  }

  .manifesto .series.is-left .series-piece.p4 {
    left: -2% !important;
    right: auto !important;
    top: 19.5918% !important;
    width: 22.7% !important;
    z-index: 3 !important;
  }

  .manifesto .series.is-right .series-piece.p1 {
    left: auto !important;
    right: -24% !important;
    top: 16.3265% !important;
    width: 64.2% !important;
    z-index: 1 !important;
  }

  .manifesto .series.is-right .series-piece.p2 {
    left: auto !important;
    right: 31% !important;
    top: 22.2041% !important;
    width: 33.8235% !important;
    z-index: 2 !important;
  }

  .manifesto .series.is-right .series-piece.p3 {
    left: auto !important;
    right: -20% !important;
    top: 18.9388% !important;
    width: 55.8824% !important;
    z-index: 3 !important;
  }

  .manifesto .series.is-right .series-piece.p4 {
    left: auto !important;
    right: -5% !important;
    top: 47.0204% !important;
    width: 58.8235% !important;
    z-index: 4 !important;
  }

}

/* Мобильная раскладка: тот же фиксированный canvas, порядок — манифест,
   левая серия, правая серия. Заголовки серий сохраняют мобильную логику. */
@media (max-width: 1100px) {
  .manifesto .manifesto-center { order: -1; }
  .manifesto .series.is-left { order: 0; left: -6%;}
  .manifesto .series.is-right { order: 1; right: -6%; }
  .manifesto img.series-heading { width: clamp(250px, 17vw, 320px); }

  .manifesto .series-stage {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 544 / 735 !important;
    max-height: none !important;
    margin-bottom: 0 !important;
  }

  .manifesto .series-question {
    width: 100% !important;
    box-sizing: border-box;
    margin-top: 42px !important;
  }

  .manifesto .series-piece {
    max-width: none !important;
  }

  .manifesto .series.is-left .series-piece.p1 {
    left: -13% !important;
    right: auto !important;
    top: 46.9% !important;
    width: 52.1% !important;
    z-index: 1 !important;
  }

  .manifesto .series.is-left .series-piece.p2 {
    left: 17% !important;
    right: auto !important;
    top: 27.4286% !important;
    width: 52.6% !important;
    z-index: 2 !important;
  }

  .manifesto .series.is-left .series-piece.p3 {
    left: 47% !important;
    right: auto !important;
    top: 69.2245% !important;
    width: 30.2941% !important;
    z-index: 4 !important;
  }

  .manifesto .series.is-left .series-piece.p4 {
    left: -2% !important;
    right: auto !important;
    top: 19.5918% !important;
    width: 22.7% !important;
    z-index: 3 !important;
  }

  .manifesto .series.is-right .series-piece.p1 {
    left: auto !important;
    right: -24% !important;
    top: 16.3265% !important;
    width: 64.2% !important;
    z-index: 1 !important;
  }

  .manifesto .series.is-right .series-piece.p2 {
    left: auto !important;
    right: 31% !important;
    top: 22.2041% !important;
    width: 33.8235% !important;
    z-index: 2 !important;
  }

  .manifesto .series.is-right .series-piece.p3 {
    left: auto !important;
    right: -20% !important;
    top: 18.9388% !important;
    width: 55.8824% !important;
    z-index: 3 !important;
  }

  .manifesto .series.is-right .series-piece.p4 {
    left: auto !important;
    right: -5% !important;
    top: 47.0204% !important;
    width: 58.8235% !important;
    z-index: 4 !important;
  }
}