/* «Дело Макоши» — сайт-портфолио. Вёрстка по утверждённому макету
   (десктоп 1440 px, мобильный 390 px). Размеры десктопа заданы в единицах
   --u (1 px макета при ширине 1440), мобильного — в --m (1 px при ширине 390). */

:root {
  --bg-hero: #F5F1E8;        /* совпадает с фоном портрета */
  --bg-about: #EFE9DF;
  --bg-works: #F7F4ED;
  --bg-materials: #F2ECE2;
  --bg-process: #F7F4ED;
  --bg-contacts: #EFE9DF;
  --bg-cta: #EAE2D6;
  --wine: #600C1F;            /* заголовки, подписи разделов (по пикселям эталона) */
  --wine-btn: #650A1D;        /* кнопки */
  --wine-btn-hover: #4C0716;
  --thread: #5E0E20;
  --ink: #2F2A27;             /* плотный текст, подписи */
  --text: #47413D;            /* абзацы */
  --muted: #625B56;
  --tan: #A47C5E;             /* тонкие пиктограммы */
  --hair: rgba(87, 10, 28, .2);
  --hair-grey: rgba(47, 42, 39, .16);
  --cream-text: #F7EFE8;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --script: 'Bad Script', 'Segoe Script', 'Brush Script MT', cursive;
  --u: 1px;
  --m: 1px;
  --hdr: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hdr); }
body {
  margin: 0;
  background: var(--bg-hero);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
::selection { background: rgba(98, 10, 30, .16); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--wine-btn); color: var(--cream-text); padding: 10px 16px;
  font: 600 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.skip-link:focus { top: 12px; }

.frame { position: relative; margin: 0 auto; }

/* ---------- общие элементы ---------- */
.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--wine);
}
.h2 { font-family: var(--serif); font-weight: 400; color: var(--wine); }
.script {
  font-family: var(--script);
  font-weight: 400;
  color: var(--wine);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wine-btn);
  color: var(--cream-text);
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .35s ease, transform .35s ease;
}
.btn:hover { background: var(--wine-btn-hover); }
.btn:active { transform: translateY(1px); }
.btn__arrow { flex: none; transition: transform .35s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }
.diamond { display: inline-block; background: var(--wine); transform: rotate(45deg); }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--wine);
  transition: background-color .3s ease;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: rgba(87, 10, 28, .07); }

/* нить */
.thread { position: absolute; pointer-events: none; overflow: visible; }
.thread__path { fill: none; stroke: var(--thread); stroke-width: 1.6; stroke-linecap: round; }
.thread--hero .thread__path { stroke-width: 1.7; }

/* шапка */
.logo { display: block; }
.logo__full { width: 100%; }
.tool { display: inline-grid; place-items: center; color: var(--wine); transition: opacity .3s ease, transform .3s ease; }
.tool svg { width: 100%; height: 100%; }
.tool:hover { opacity: .72; }

/* работы */
.work__open {
  display: block; width: 100%; position: relative; overflow: hidden;
  background: #E9E3DA;
}
.work__open picture, .work__open img { width: 100%; height: 100%; }
.work__open img { object-fit: cover; object-position: 50% 50%; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.work__pic--top img { object-position: 50% 0%; }
.work__pic--upper img { object-position: 50% 18%; }
.work__pic--soft img { object-position: 50% 30%; }
.work__title {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase; color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .5s ease;
  display: inline-block;
}
.work:hover .work__open img { transform: scale(1.02); }
.work:hover .work__title, .work:focus-within .work__title { background-size: 100% 1px; }
.works__all {
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-weight: 700; text-transform: uppercase; color: var(--ink);
}
.works__all-arrow { color: var(--wine); transition: transform .4s ease; }
.works__all:hover .works__all-arrow { transform: translateX(4px); }
.works__all[aria-expanded="true"] .works__all-arrow { transform: rotate(-90deg); }
.js .works__more:not(.is-open) { display: none; }
.works__more .work.is-shown { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s); }

/* процесс */
.step__num { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--wine); font-variant-numeric: lining-nums; line-height: 1; }
.step__icon { color: var(--tan); }
.step__label { font-family: var(--sans); font-weight: 600; text-transform: uppercase; color: var(--muted); text-align: center; }

/* контакты */
.contacts__title { font-family: var(--serif); font-weight: 500; color: var(--wine); text-transform: uppercase; }
.contacts__list li { display: flex; align-items: center; }
.contacts__list a { transition: color .3s ease; white-space: nowrap; }
.contacts__list a:hover { color: var(--wine); }
.contacts__icon { flex: none; color: var(--wine); }
.contacts__tg { display: flex; flex-direction: column; }
.contacts__group { color: var(--muted); display: inline-block; padding: 4px 0; line-height: 16px; }
.contacts__group:hover { color: var(--wine); }
.contacts__qr { display: block; }
.contacts__qr img { width: 100%; }
.contacts__qr-note { color: var(--muted); }
.contacts__arrow { color: var(--wine); position: absolute; overflow: visible; }

/* финал */
.cta__title { font-family: var(--serif); font-weight: 500; color: var(--wine); text-transform: uppercase; }


/* ======================================================================
   ДЕСКТОП (≥ 1024 px): макет 1440
   ====================================================================== */
@media (min-width: 1024px) {
  :root { --u: calc(min(100vw, 1440px) / 1440); --hdr: calc(64 * var(--u)); }
  .frame { max-width: 1440px; }
  .m-only { display: none !important; }

  /* --- шапка --- */
  .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 40; }
  .site-header__frame { height: calc(90 * var(--u)); }
  .logo { position: absolute; left: calc(106 * var(--u)); top: calc(19 * var(--u)); width: calc(187.7 * var(--u)); }
  .logo__row { display: none; }
  .nav { position: absolute; left: calc(348 * var(--u)); top: calc(33 * var(--u)); }
  .nav__list { display: flex; gap: calc(42 * var(--u)); }
  .nav a {
    display: block; padding: calc(4 * var(--u)) 0;
    font: 600 max(11px, calc(13.5 * var(--u)))/1 var(--sans);
    letter-spacing: .07em; text-transform: uppercase; color: #48413D;
    background-image: linear-gradient(var(--wine), var(--wine));
    background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
    transition: color .3s ease, background-size .4s ease;
  }
  .nav a:hover { color: var(--wine); background-size: 100% 1px; }
  .tools { position: absolute; right: calc(74 * var(--u)); top: calc(27 * var(--u)); display: flex; gap: calc(27 * var(--u)); }
  .tool { width: calc(26 * var(--u)); height: calc(26 * var(--u)); min-width: 20px; min-height: 20px; }
  .burger { display: none; }

  /* липкая компактная шапка при прокрутке */
  .site-header.is-fixed {
    position: fixed; background: rgba(245, 241, 232, .94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 var(--hair);
    transform: translateY(-100%); transition: transform .45s cubic-bezier(.2, .7, .2, 1);
  }
  .site-header.is-fixed.is-shown { transform: none; }
  .site-header.is-fixed .site-header__frame { height: calc(64 * var(--u)); }
  .site-header.is-fixed .logo { top: calc(11 * var(--u)); width: auto; }
  .site-header.is-fixed .logo__full { display: none; }
  .site-header.is-fixed .logo__row { display: flex; align-items: center; gap: calc(8 * var(--u)); }
  .site-header.is-fixed .logo__mark { width: calc(58 * var(--u)); }
  .site-header.is-fixed .logo__word { width: calc(132 * var(--u)); }
  .site-header.is-fixed .nav { top: calc(24 * var(--u)); }
  .site-header.is-fixed .tools { top: calc(20 * var(--u)); }

  /* --- 1. первый экран --- */
  .hero { background: var(--bg-hero); position: relative; overflow: clip; }
  .hero__frame { height: calc(713 * var(--u)); }
  .hero__edge { position: absolute; left: 0; top: calc(480 * var(--u)); width: calc(60 * var(--u)); height: calc(180 * var(--u)); z-index: 1; }
  .thread--hero { left: 0; top: 0; width: calc(1440 * var(--u)); height: calc(713 * var(--u)); z-index: 1; }
  .hero__photo { position: absolute; left: calc(498 * var(--u)); top: calc(-3 * var(--u)); width: calc(641.7 * var(--u)); z-index: 2; }
  .hero__photo img { width: 100%; clip-path: polygon(47.32% 6.67%, 65.96% 6.67%, 65.96% 8.33%, 69.92% 9.17%, 69.92% 10.00%, 71.05% 10.83%, 73.02% 11.67%, 73.87% 12.50%, 75.00% 13.33%, 75.00% 14.17%, 75.71% 15.00%, 76.13% 15.83%, 76.55% 16.67%, 76.98% 17.50%, 77.26% 18.33%, 77.40% 20.00%, 77.82% 20.83%, 77.82% 22.50%, 77.54% 23.33%, 77.82% 24.17%, 77.82% 25.83%, 77.12% 26.67%, 76.98% 27.50%, 76.41% 28.33%, 76.55% 32.50%, 76.98% 33.33%, 77.54% 34.17%, 78.11% 35.00%, 78.53% 35.83%, 80.08% 36.67%, 80.79% 37.50%, 81.21% 38.33%, 81.78% 39.17%, 82.91% 40.00%, 82.91% 41.67%, 83.19% 42.50%, 83.47% 43.33%, 83.76% 44.17%, 83.76% 45.83%, 84.60% 46.67%, 84.60% 50.00%, 83.62% 50.83%, 83.62% 51.67%, 85.31% 52.50%, 85.31% 53.33%, 85.59% 54.17%, 88.70% 55.00%, 89.12% 55.83%, 89.55% 56.67%, 89.69% 57.50%, 90.25% 58.33%, 91.95% 59.17%, 94.35% 60.00%, 95.20% 60.83%, 95.90% 61.67%, 96.75% 62.50%, 97.18% 63.33%, 97.60% 64.17%, 97.88% 65.00%, 98.31% 65.83%, 98.73% 66.67%, 99.15% 67.50%, 99.44% 68.33%, 99.86% 69.17%, 99.86% 88.33%, 99.01% 89.17%, 96.75% 90.00%, 91.38% 90.83%, 88.14% 91.67%, 87.57% 92.50%, 87.71% 93.33%, 88.28% 94.17%, 88.70% 95.00%, 88.98% 95.83%, 89.55% 96.67%, 90.25% 97.50%, 91.67% 98.33%, 91.67% 100.00%, 8.76% 100.00%, 8.62% 95.00%, 8.33% 94.17%, 7.77% 93.33%, 7.34% 92.50%, 5.79% 91.67%, 5.79% 90.83%, 5.51% 90.00%, 4.80% 89.17%, 4.80% 88.33%, 4.52% 87.50%, 4.10% 86.67%, 3.95% 85.83%, 3.67% 85.00%, 3.39% 84.17%, 3.25% 82.50%, 2.97% 81.67%, 2.82% 79.17%, 2.54% 78.33%, 2.68% 73.33%, 3.25% 72.50%, 3.25% 71.67%, 3.67% 70.83%, 3.67% 70.00%, 3.95% 69.17%, 4.10% 67.50%, 4.52% 66.67%, 4.66% 65.00%, 5.23% 64.17%, 5.51% 61.67%, 6.36% 60.83%, 6.64% 60.00%, 6.92% 58.33%, 6.92% 55.83%, 8.05% 55.00%, 8.33% 54.17%, 9.04% 53.33%, 9.32% 52.50%, 9.75% 51.67%, 10.17% 50.83%, 10.17% 49.17%, 10.59% 48.33%, 11.02% 47.50%, 11.16% 46.67%, 11.72% 45.83%, 11.86% 44.17%, 13.70% 43.33%, 15.25% 42.50%, 17.09% 41.67%, 22.74% 40.83%, 28.53% 40.00%, 28.53% 39.17%, 29.66% 38.33%, 30.23% 37.50%, 30.93% 36.67%, 31.50% 35.83%, 32.06% 35.00%, 32.49% 34.17%, 32.49% 33.33%, 33.33% 32.50%, 33.62% 31.67%, 32.63% 30.83%, 32.77% 28.33%, 33.19% 27.50%, 33.47% 26.67%, 33.76% 25.83%, 34.18% 25.00%, 34.18% 24.17%, 34.60% 23.33%, 34.89% 22.50%, 35.17% 21.67%, 35.17% 20.83%, 36.30% 20.00%, 36.30% 19.17%, 37.43% 18.33%, 37.43% 17.50%, 38.42% 16.67%, 38.56% 14.17%, 40.25% 13.33%, 40.82% 12.50%, 40.96% 11.67%, 42.37% 10.83%, 44.07% 10.00%, 44.63% 9.17%, 47.32% 8.33%); }
  .hero__berries { position: absolute; right: calc(-14 * var(--u)); bottom: calc(-6 * var(--u)); width: calc(272 * var(--u)); height: calc(402 * var(--u)); z-index: 1; }
  .hero__script {
    position: absolute; left: calc(1072 * var(--u)); top: calc(204 * var(--u)); z-index: 3;
    font-size: calc(52 * var(--u)); transform: rotate(-22deg) skewX(-8deg); transform-origin: 0 0;
    line-height: calc(52 * var(--u));
  }
  .hero__script span { display: block; padding-left: calc(34 * var(--u)); }
  .hero__content { position: absolute; left: calc(106 * var(--u)); top: 0; z-index: 3; width: calc(440 * var(--u)); }
  .hero__title { display: block; margin-top: calc(199.6 * var(--u)); font-weight: 400; }
  .hero__name {
    display: block; font-family: var(--serif); color: var(--wine);
    font-size: calc(98 * var(--u)); line-height: calc(101.4 * var(--u)); letter-spacing: -.055em;
    text-transform: uppercase; margin-left: calc(-4 * var(--u));
  }
  .hero__sub {
    display: block; margin-top: calc(21.1 * var(--u));
    font: 700 calc(18 * var(--u))/calc(18 * var(--u)) var(--sans);
    letter-spacing: .455em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
  }
  .hero__lead { margin-top: calc(26.4 * var(--u)); font-size: calc(21 * var(--u)); line-height: calc(25.2 * var(--u)); color: var(--text); }
  .hero__btn {
    margin-top: calc(26.2 * var(--u)); width: calc(294 * var(--u)); height: calc(51.6 * var(--u));
    font-size: max(11px, calc(13.5 * var(--u))); letter-spacing: calc(4.86 * var(--u)); gap: calc(12 * var(--u));
    padding-left: calc(6 * var(--u));
  }
  .hero__btn .btn__arrow { width: calc(19 * var(--u)); height: calc(10 * var(--u)); }
  .hero__story {
    position: relative; margin-top: calc(45.3 * var(--u)); padding-left: calc(50.7 * var(--u));
    font: 600 max(11px, calc(13 * var(--u)))/calc(13 * var(--u)) var(--sans);
    letter-spacing: .29em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
  }
  .hero__story .diamond { position: absolute; left: calc(3 * var(--u)); top: calc(-11 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); }

  /* --- 2. о бренде --- */
  .about { background: var(--bg-about); overflow: clip; }
  .about__frame { height: calc(461 * var(--u)); display: flex; align-items: flex-start; padding-top: calc(38 * var(--u)); }
  .about__photo { position: absolute; top: 0; bottom: 0; left: 0; width: calc(566 * var(--u)); }
  .about__photo picture, .about__photo img { width: 100%; height: 100%; }
  .about__photo { overflow: hidden; }
  .about__text { position: relative; z-index: 2; margin-left: calc(673 * var(--u)); width: calc(470 * var(--u)); }
  .eyebrow { font-size: max(11px, calc(14.5 * var(--u))); line-height: 1; letter-spacing: .43em; }
  .about__title { margin-top: calc(19.4 * var(--u)); font-size: calc(46 * var(--u)); line-height: calc(51.6 * var(--u)); letter-spacing: -.02em; max-width: calc(400 * var(--u)); }
  .about__text p:not(.eyebrow) { font-size: max(15px, calc(20 * var(--u))); line-height: calc(24.5 * var(--u)); color: var(--text); letter-spacing: .01em; }
  .about__title + p { margin-top: calc(17.1 * var(--u)); }
  .about__text p + p:not(.eyebrow) { margin-top: calc(19.2 * var(--u)); }
  .about__script { position: absolute; left: calc(1176 * var(--u)); top: calc(204 * var(--u)); font-size: calc(33 * var(--u)); line-height: calc(37 * var(--u)); transform: rotate(-24deg) skewX(-6deg); transform-origin: 0 0; z-index: 2; }
  .about__script span { display: block; padding-left: calc(36 * var(--u)); }
  .about__yarn { position: absolute; left: calc(1284 * var(--u)); top: calc(318 * var(--u)); width: calc(74 * var(--u)); height: calc(74 * var(--u)); color: var(--tan); z-index: 2; }
  .thread--about { left: 0; top: 0; width: calc(1440 * var(--u)); height: calc(461 * var(--u)); z-index: 1; }

  /* --- 3. избранные работы --- */
  .works { background: var(--bg-works); }
  .works__frame { padding: calc(30 * var(--u)) calc(60 * var(--u)) calc(38 * var(--u)) calc(80 * var(--u)); }
  .works__head { display: flex; justify-content: space-between; align-items: flex-start; }
  .eyebrow--lg { font-size: max(12px, calc(17 * var(--u))); letter-spacing: .31em; }
  .works__all { font-size: max(12px, calc(16 * var(--u))); line-height: 1; letter-spacing: .2em; gap: calc(14 * var(--u)); padding: calc(1 * var(--u)) 0; margin-right: calc(-6 * var(--u)); }
  .works__all-arrow { width: calc(22 * var(--u)); height: calc(11 * var(--u)); }
  .works__grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: calc(20 * var(--u)); margin-top: calc(28.6 * var(--u)); }
  .works__more { row-gap: calc(34 * var(--u)); margin-top: calc(34 * var(--u)); }
  .work__open { height: calc(300 * var(--u)); }
  .work__title { margin-top: calc(15.7 * var(--u)); font-size: max(11px, calc(16.5 * var(--u))); line-height: calc(16.5 * var(--u)); letter-spacing: .17em; padding-bottom: calc(3 * var(--u)); }

  /* --- 4. материалы --- */
  .materials { background: var(--bg-materials); }
  .materials__frame { height: calc(348 * var(--u)); display: flex; align-items: flex-start; padding-top: calc(25 * var(--u)); }
  .materials__text { position: relative; z-index: 2; margin-left: calc(80 * var(--u)); width: calc(388 * var(--u)); }
  .materials__title { margin-top: calc(19 * var(--u)); font-size: calc(50 * var(--u)); line-height: calc(52.4 * var(--u)); letter-spacing: -.03em; }
  .materials__text p:not(.eyebrow) { margin-top: calc(16.6 * var(--u)); font-size: max(15px, calc(20 * var(--u))); line-height: calc(24 * var(--u)); color: var(--text); letter-spacing: .01em; }
  .materials__photos { position: absolute; left: calc(540 * var(--u)); top: 0; bottom: 0; display: flex; gap: calc(3 * var(--u)); }
  .materials__photo { height: 100%; overflow: hidden; }
  .materials__photo picture, .materials__photo img { width: 100%; height: 100%; }
  .materials__photo img { object-fit: cover; }
  .materials__photo--label { width: calc(388 * var(--u)); }
  .materials__photo--sequins { width: calc(245 * var(--u)); }
  .materials__photo--sequins img { object-position: 60% 72%; }
  /* кадры, подобранные по эталону (fit_regions.py): ширина и сдвиг снимка в % блока */
  .about__photo { --w: 120.65%; --x: -9.89%; --y: -41.43%; }
  .work[data-id="sequin-dress"] .work__open { --w: 130.71%; --x: -14.84%; --y: -10.33%; }
  .work[data-id="soft-dress"] .work__open { --w: 139.5%; --x: -26.13%; --y: -38.33%; }
  .materials__photo--label { --w: 221.1%; --x: -45.36%; --y: -39.66%; }
  .fit-d { overflow: hidden; }
  .materials__photo { position: relative; }
  .fit-d.fit-d img { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; max-width: none; object-fit: fill; }
  .materials__list { position: absolute; left: calc(1222 * var(--u)); top: calc(41 * var(--u)); width: calc(200 * var(--u)); z-index: 2; }
  .materials__list li {
    position: relative; padding-left: calc(30.6 * var(--u));
    font: 600 max(11px, calc(16 * var(--u)))/calc(24.6 * var(--u)) var(--sans);
    letter-spacing: .12em; text-transform: uppercase; color: #3A3431;
  }
  .materials__list li + li { margin-top: calc(34 * var(--u)); }
  .materials__list li::before { content: ""; position: absolute; left: 0; top: calc(-2 * var(--u)); width: 1px; height: calc(44 * var(--u)); background: rgba(87, 10, 28, .5); }
  .materials__list li::after { content: ""; position: absolute; left: calc(-2.5 * var(--u)); top: calc(10 * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--wine); }

  /* --- 5. процесс --- */
  .process { background: var(--bg-process); }
  .process__frame { height: calc(187 * var(--u)); padding-top: calc(29.3 * var(--u)); }
  .process .eyebrow { margin-left: calc(86 * var(--u)); }
  .steps { position: absolute; left: calc(70 * var(--u)); right: calc(40 * var(--u)); top: calc(63 * var(--u)); display: grid; grid-template-columns: repeat(6, 1fr); }
  .step { position: relative; display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: start; }
  .step + .step::before { content: ""; position: absolute; left: 0; top: calc(4 * var(--u)); height: calc(92 * var(--u)); width: 1px; background: var(--hair-grey); }
  .step--no-line::before { display: none; }
  .step__num { grid-column: 2; margin: calc(5 * var(--u)) calc(44 * var(--u)) 0 0; font-size: calc(31 * var(--u)); transform: translateX(calc(-12 * var(--u))); }
  .step__icon { grid-column: 3; width: calc(42 * var(--u)); height: calc(42 * var(--u)); transform: translateX(calc(-12 * var(--u))); }
  .step__label { grid-column: 1 / -1; margin-top: calc(10 * var(--u)); font-size: max(11px, calc(14.5 * var(--u))); line-height: calc(22.7 * var(--u)); letter-spacing: .12em; white-space: nowrap; justify-self: center; color: #5C5550; }

  /* --- 6. контакты --- */
  .contacts { background: var(--bg-contacts); }
  .contacts__frame { height: calc(180 * var(--u)); --qr: max(147px, calc(172 * var(--u))); }
  .contacts__intro { position: absolute; left: calc(86 * var(--u)); top: calc(16.5 * var(--u)); width: calc(320 * var(--u)); }
  .contacts__title { font-size: calc(36 * var(--u)); line-height: calc(36 * var(--u)); letter-spacing: -.01em; }
  .contacts__intro p { margin-top: calc(11.6 * var(--u)); font-size: max(14px, calc(20 * var(--u))); line-height: calc(24.5 * var(--u)); color: var(--text); letter-spacing: .005em; }
  .contacts__list { position: absolute; left: calc(422 * var(--u)); top: calc(25.4 * var(--u)); padding-left: calc(42 * var(--u)); border-left: 1px solid var(--hair-grey); height: calc(127 * var(--u)); }
  .contacts__list li { height: calc(42.4 * var(--u)); gap: calc(23 * var(--u)); font: 400 max(14px, calc(22 * var(--u)))/1 var(--sans); color: var(--ink); }
  .contacts__icon { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
  .contacts__tg { position: relative; }
  .contacts__group { position: absolute; left: 0; top: calc(100% + 6 * var(--u)); white-space: nowrap; font-size: max(11px, calc(13 * var(--u))); letter-spacing: .02em; }
  .contacts__qr { position: absolute; left: calc(754 * var(--u)); top: calc(4 * var(--u)); width: var(--qr); padding-left: calc(6 * var(--u)); border-left: 1px solid var(--hair-grey); }
  .contacts__qr-note { position: absolute; left: calc(789 * var(--u) + var(--qr)); top: calc(47.2 * var(--u)); font-size: max(12px, calc(17 * var(--u))); line-height: calc(20.5 * var(--u)); letter-spacing: .02em; }
  .contacts__arrow { left: calc(758 * var(--u) + var(--qr)); top: calc(95 * var(--u)); width: calc(130 * var(--u)); height: calc(40 * var(--u)); }
  .contacts__script { position: absolute; left: calc(1134 * var(--u)); top: calc(110 * var(--u)); font-size: calc(38 * var(--u)); line-height: calc(44 * var(--u)); transform: rotate(-22deg) skewX(-6deg); transform-origin: 0 0; }
  .contacts__script-cap { font-size: 1.75em; line-height: 0; position: relative; top: calc(6 * var(--u)); }
  .contacts__script span:not(.contacts__script-cap) { display: block; padding-left: calc(40 * var(--u)); }

  /* --- нить через «Материалы → Процесс → Контакты» --- */
  .thread-group { position: relative; overflow: clip; }
  .thread--group { left: 50%; top: 0; width: calc(1440 * var(--u)); height: calc(715 * var(--u)); transform: translateX(-50%); z-index: 1; }
  .materials__frame, .process__frame, .contacts__frame { z-index: auto; }
  .materials__photos { z-index: 2; }
  .process .eyebrow, .steps, .contacts__intro, .contacts__list, .contacts__qr, .contacts__qr-note, .contacts__script { z-index: 2; }

  /* --- 7. финал --- */
  .cta { background: var(--bg-cta); overflow: clip; }
  .cta__frame { height: calc(262 * var(--u)); }
  .cta__texture {
    position: absolute; top: 0; bottom: 0; left: calc(690 * var(--u));
    right: calc(-1 * max(0px, (100vw - 1440px) / 2));
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0, #000 34%);
  }
  .cta__texture picture, .cta__texture img { width: 100%; height: 100%; }
  .cta__texture img { object-fit: cover; object-position: 50% 58%; }
  .cta__text { position: absolute; left: calc(86 * var(--u)); top: calc(13.3 * var(--u)); width: calc(470 * var(--u)); z-index: 2; }
  .cta__title { font-size: calc(35 * var(--u)); line-height: calc(34.4 * var(--u)); letter-spacing: -.045em; }
  .cta__text p { margin-top: calc(3.2 * var(--u)); font-size: max(14px, calc(20 * var(--u))); line-height: calc(24 * var(--u)); color: var(--text); max-width: calc(420 * var(--u)); }
  .cta__btn {
    margin-top: calc(14 * var(--u)); width: calc(287 * var(--u)); height: calc(45 * var(--u));
    font-size: max(11px, calc(13.5 * var(--u))); letter-spacing: calc(4.86 * var(--u)); gap: calc(12 * var(--u)); padding-left: calc(6 * var(--u));
  }
  .cta__btn .btn__arrow { width: calc(19 * var(--u)); height: calc(10 * var(--u)); }

}

/* ======================================================================
   МОБИЛЬНЫЙ И ПЛАНШЕТ (< 1024 px): макет iPhone 390
   ====================================================================== */
@media (max-width: 1023.98px) {
  :root { --m: calc(min(100vw, 560px) / 390); --hdr: calc(64 * var(--m)); }
  .frame { max-width: calc(390 * var(--m)); }
  .d-only { display: none !important; }
  .nav, .tools, .logo__full { display: none; }

  /* --- шапка --- */
  .site-header {
    position: sticky; top: 0; z-index: 40; background: var(--bg-hero);
    transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
  }
  .site-header.is-hidden { transform: translateY(-100%); }
  .site-header.is-scrolled { box-shadow: 0 1px 0 var(--hair); }
  .site-header__frame { height: calc(64 * var(--m)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(12 * var(--m)) 0 calc(20 * var(--m)); }
  .logo__row { display: flex; align-items: center; gap: calc(5 * var(--m)); }
  .logo__mark { width: calc(65 * var(--m)); }
  .logo__word { width: calc(150 * var(--m)); margin-top: calc(6 * var(--m)); }
  .burger { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--wine); }
  .burger svg { width: calc(30 * var(--m)); height: calc(30 * var(--m)); }

  /* --- 1. первый экран --- */
  .hero { background: var(--bg-hero); }
  .hero__frame { height: calc(718 * var(--m)); overflow: clip; }
  .hero__photo { position: absolute; left: calc(-1 * var(--m)); top: calc(-45 * var(--m)); width: calc(443.5 * var(--m)); z-index: 1; }
  .hero__photo img { width: 100%; clip-path: polygon(47.32% 6.67%, 65.96% 6.67%, 65.96% 8.33%, 69.92% 9.17%, 69.92% 10.00%, 71.05% 10.83%, 73.02% 11.67%, 73.87% 12.50%, 75.00% 13.33%, 75.00% 14.17%, 75.71% 15.00%, 76.13% 15.83%, 76.55% 16.67%, 76.98% 17.50%, 77.26% 18.33%, 77.40% 20.00%, 77.82% 20.83%, 77.82% 22.50%, 77.54% 23.33%, 77.82% 24.17%, 77.82% 25.83%, 77.12% 26.67%, 76.98% 27.50%, 76.41% 28.33%, 76.55% 32.50%, 76.98% 33.33%, 77.54% 34.17%, 78.11% 35.00%, 78.53% 35.83%, 80.08% 36.67%, 80.79% 37.50%, 81.21% 38.33%, 81.78% 39.17%, 82.91% 40.00%, 82.91% 41.67%, 83.19% 42.50%, 83.47% 43.33%, 83.76% 44.17%, 83.76% 45.83%, 84.60% 46.67%, 84.60% 50.00%, 83.62% 50.83%, 83.62% 51.67%, 85.31% 52.50%, 85.31% 53.33%, 85.59% 54.17%, 88.70% 55.00%, 89.12% 55.83%, 89.55% 56.67%, 89.69% 57.50%, 90.25% 58.33%, 91.95% 59.17%, 94.35% 60.00%, 95.20% 60.83%, 95.90% 61.67%, 96.75% 62.50%, 97.18% 63.33%, 97.60% 64.17%, 97.88% 65.00%, 98.31% 65.83%, 98.73% 66.67%, 99.15% 67.50%, 99.44% 68.33%, 99.86% 69.17%, 99.86% 88.33%, 99.01% 89.17%, 96.75% 90.00%, 91.38% 90.83%, 88.14% 91.67%, 87.57% 92.50%, 87.71% 93.33%, 88.28% 94.17%, 88.70% 95.00%, 88.98% 95.83%, 89.55% 96.67%, 90.25% 97.50%, 91.67% 98.33%, 91.67% 100.00%, 8.76% 100.00%, 8.62% 95.00%, 8.33% 94.17%, 7.77% 93.33%, 7.34% 92.50%, 5.79% 91.67%, 5.79% 90.83%, 5.51% 90.00%, 4.80% 89.17%, 4.80% 88.33%, 4.52% 87.50%, 4.10% 86.67%, 3.95% 85.83%, 3.67% 85.00%, 3.39% 84.17%, 3.25% 82.50%, 2.97% 81.67%, 2.82% 79.17%, 2.54% 78.33%, 2.68% 73.33%, 3.25% 72.50%, 3.25% 71.67%, 3.67% 70.83%, 3.67% 70.00%, 3.95% 69.17%, 4.10% 67.50%, 4.52% 66.67%, 4.66% 65.00%, 5.23% 64.17%, 5.51% 61.67%, 6.36% 60.83%, 6.64% 60.00%, 6.92% 58.33%, 6.92% 55.83%, 8.05% 55.00%, 8.33% 54.17%, 9.04% 53.33%, 9.32% 52.50%, 9.75% 51.67%, 10.17% 50.83%, 10.17% 49.17%, 10.59% 48.33%, 11.02% 47.50%, 11.16% 46.67%, 11.72% 45.83%, 11.86% 44.17%, 13.70% 43.33%, 15.25% 42.50%, 17.09% 41.67%, 22.74% 40.83%, 28.53% 40.00%, 28.53% 39.17%, 29.66% 38.33%, 30.23% 37.50%, 30.93% 36.67%, 31.50% 35.83%, 32.06% 35.00%, 32.49% 34.17%, 32.49% 33.33%, 33.33% 32.50%, 33.62% 31.67%, 32.63% 30.83%, 32.77% 28.33%, 33.19% 27.50%, 33.47% 26.67%, 33.76% 25.83%, 34.18% 25.00%, 34.18% 24.17%, 34.60% 23.33%, 34.89% 22.50%, 35.17% 21.67%, 35.17% 20.83%, 36.30% 20.00%, 36.30% 19.17%, 37.43% 18.33%, 37.43% 17.50%, 38.42% 16.67%, 38.56% 14.17%, 40.25% 13.33%, 40.82% 12.50%, 40.96% 11.67%, 42.37% 10.83%, 44.07% 10.00%, 44.63% 9.17%, 47.32% 8.33%); }
  .hero__frame::before {
    /* кремовая дуга под фотографией */
    content: ""; position: absolute; left: calc(-40 * var(--m)); right: calc(-40 * var(--m)); top: calc(352 * var(--m)); bottom: 0; z-index: 2;
    background: var(--bg-hero);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 470 120' preserveAspectRatio='none'%3E%3Cpath d='M0 10C120 12 200 6 250 12c56 7 86 26 120 50 34 24 64 40 100 46V120H0Z'/%3E%3C/svg%3E") top / 100% calc(120 * var(--m)) no-repeat, linear-gradient(#000, #000) 0 calc(119 * var(--m)) / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 470 120' preserveAspectRatio='none'%3E%3Cpath d='M0 10C120 12 200 6 250 12c56 7 86 26 120 50 34 24 64 40 100 46V120H0Z'/%3E%3C/svg%3E") top / 100% calc(120 * var(--m)) no-repeat, linear-gradient(#000, #000) 0 calc(119 * var(--m)) / 100% 100% no-repeat;
  }
  .thread--hero { left: 0; top: calc(300 * var(--m)); width: calc(390 * var(--m)); height: calc(193 * var(--m)); z-index: 3; }
  .thread--hero .thread__path { display: none; }
  .hero__edge { display: none; }
  .hero__berries { display: none; }
  .hero__script {
    position: absolute; left: calc(12 * var(--m)); top: calc(104 * var(--m)); z-index: 3;
    font-size: calc(24 * var(--m)); line-height: calc(27 * var(--m)); transform: rotate(-24deg) skewX(-8deg); transform-origin: 0 0;
  }
  .hero__script span { display: block; padding-left: calc(24 * var(--m)); }
  .hero__content { position: absolute; left: calc(36 * var(--m)); right: calc(26 * var(--m)); top: 0; z-index: 3; }
  .hero__title { display: block; margin-top: calc(375.6 * var(--m)); font-weight: 400; }
  .hero__name {
    display: block; font-family: var(--serif); color: var(--wine); text-transform: uppercase;
    font-size: calc(64 * var(--m)); line-height: calc(65.6 * var(--m)); letter-spacing: -.06em; margin-left: calc(-2 * var(--m));
  }
  .hero__sub {
    display: block; margin-top: calc(14.2 * var(--m));
    font: 600 calc(15.5 * var(--m))/calc(15.5 * var(--m)) var(--sans);
    letter-spacing: .35em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
  }
  .hero__lead { margin-top: calc(24.8 * var(--m)); font-size: calc(19 * var(--m)); line-height: calc(22.1 * var(--m)); color: var(--text); }
  .hero__btn {
    margin-top: calc(23.3 * var(--m)); width: calc(297 * var(--m)); height: calc(47.4 * var(--m));
    font-size: calc(14 * var(--m)); letter-spacing: .33em; gap: calc(12 * var(--m)); padding-left: calc(6 * var(--m));
  }
  .hero__btn .btn__arrow { width: calc(20 * var(--m)); height: calc(10 * var(--m)); }
  .hero__story { display: none; }

  /* --- 2. о бренде --- */
  .about { background: var(--bg-hero); }
  .about__frame { padding: calc(37.3 * var(--m)) calc(26 * var(--m)) calc(10 * var(--m)) calc(36 * var(--m)); display: flex; flex-direction: column; }
  .about__text { display: contents; }
  .eyebrow { font-size: calc(14 * var(--m)); line-height: 1; letter-spacing: .32em; }
  .about .eyebrow { order: 1; }
  .about__title { order: 2; margin-top: calc(12 * var(--m)); font-size: calc(38.5 * var(--m)); line-height: calc(38.2 * var(--m)); letter-spacing: -.04em; margin-right: calc(-12 * var(--m)); }
  .about__text p:not(.eyebrow) { font-size: calc(17 * var(--m)); line-height: calc(23 * var(--m)); color: var(--text); letter-spacing: .01em; }
  .about__title + p { order: 3; margin-top: calc(17.4 * var(--m)); }
  .about__photo { order: 4; margin-top: calc(22.6 * var(--m)); height: calc(256.7 * var(--m)); overflow: hidden; }
  .about__photo picture, .about__photo img { width: 100%; height: 100%; }
  .about__photo { --w: 150.71%; --x: -33.37%; --y: -58.13%; }
  .fit-m { position: relative; overflow: hidden; }
  .fit-m.fit-m img { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; max-width: none; object-fit: fill; }
  .about__text p + p:not(.eyebrow) { order: 5; margin-top: calc(18 * var(--m)); }
  .about__script, .about__yarn, .thread--about { display: none; }

  /* --- 3. избранные работы --- */
  .works { background: var(--bg-hero); }
  .works__frame { padding: calc(40 * var(--m)) calc(26 * var(--m)) calc(10 * var(--m)) calc(36 * var(--m)); }
  .works__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .eyebrow--lg { font-size: calc(13 * var(--m)); letter-spacing: .22em; }
  .works__all { font-size: calc(12 * var(--m)); line-height: 1; letter-spacing: .12em; gap: calc(9 * var(--m)); min-height: 44px; white-space: nowrap; }
  .works__all-arrow { width: calc(20 * var(--m)); height: calc(10 * var(--m)); }
  .works__grid { display: flex; flex-direction: column; gap: calc(26 * var(--m)); margin-top: calc(20 * var(--m)); }
  .works__more { margin-top: calc(26 * var(--m)); }
  .work { display: flex; flex-direction: column; }
  .work__title {
    order: -1; align-self: flex-start;
    font: 700 calc(15.5 * var(--m))/1 var(--sans); letter-spacing: .33em; color: var(--wine); padding-bottom: calc(3 * var(--m));
  }
  .work__open { margin-top: calc(16 * var(--m)); height: calc(209 * var(--m)); }
  .work__open img { object-position: 50% 42%; }
  .work__pic--top img { object-position: 50% 6%; }
  .work__pic--upper img { object-position: 50% 16%; }
  .work__pic--soft img { object-position: 50% 24%; }
  .work[data-id="sequin-dress"] .work__open img { object-position: 50% 14%; }

  /* --- 4. материалы --- */
  .materials { background: var(--bg-hero); }
  .materials__frame { padding: calc(46 * var(--m)) calc(26 * var(--m)) calc(10 * var(--m)) calc(36 * var(--m)); }
  .materials__title { margin-top: calc(20 * var(--m)); font-size: calc(40 * var(--m)); line-height: calc(40 * var(--m)); letter-spacing: -.035em; }
  .materials__text p:not(.eyebrow) { margin-top: calc(16 * var(--m)); font-size: calc(17 * var(--m)); line-height: calc(23 * var(--m)); color: var(--text); }
  .materials__photos { display: grid; grid-template-columns: 58fr 42fr; gap: calc(4 * var(--m)); margin-top: calc(24 * var(--m)); height: calc(236 * var(--m)); }
  .materials__photo { overflow: hidden; }
  .materials__photo picture, .materials__photo img { width: 100%; height: 100%; }
  .materials__photo img { object-fit: cover; }
  .materials__photo--label img { object-position: 30% 18%; }
  .materials__list { margin-top: calc(24 * var(--m)); }
  .materials__list li {
    position: relative; padding: calc(4 * var(--m)) 0 calc(4 * var(--m)) calc(22 * var(--m));
    font: 600 calc(14.5 * var(--m))/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #3A3431;
  }
  .materials__list li + li { margin-top: calc(12 * var(--m)); }
  .materials__list li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(87, 10, 28, .5); }
  .materials__list li::after { content: ""; position: absolute; left: calc(-2.5 * var(--m)); top: calc(10 * var(--m)); width: calc(6 * var(--m)); height: calc(6 * var(--m)); border-radius: 50%; background: var(--wine); }
  .materials__list br { display: none; }

  /* --- 5. процесс --- */
  .process { background: var(--bg-hero); }
  .process__frame { padding: calc(48 * var(--m)) calc(26 * var(--m)) calc(12 * var(--m)) calc(36 * var(--m)); }
  .steps { margin-top: calc(14 * var(--m)); }
  .step { display: grid; grid-template-columns: calc(48 * var(--m)) calc(52 * var(--m)) 1fr; align-items: center; min-height: calc(62 * var(--m)); border-bottom: 1px solid var(--hair-grey); }
  .step__num { font-size: calc(28 * var(--m)); }
  .step__icon { width: calc(32 * var(--m)); height: calc(32 * var(--m)); }
  .step__label { text-align: left; font-size: calc(14 * var(--m)); line-height: 1.35; letter-spacing: .1em; color: var(--ink); }
  .step__label br { display: none; }

  /* --- 6. контакты --- */
  .contacts { background: var(--bg-hero); }
  .contacts__frame {
    display: grid; grid-template-columns: minmax(0, 1fr) max(128px, calc(128 * var(--m))); column-gap: calc(8 * var(--m));
    padding: calc(48 * var(--m)) calc(26 * var(--m)) calc(24 * var(--m)) calc(36 * var(--m));
  }
  .contacts__intro { display: contents; }
  .contacts__title {
    grid-column: 1 / -1; font-family: var(--sans); font-weight: 700; font-size: calc(18 * var(--m)); line-height: 1; letter-spacing: .26em;
  }
  .contacts__intro p { grid-column: 1 / -1; grid-row: 4; margin-top: calc(22 * var(--m)); font-size: calc(17 * var(--m)); line-height: calc(23 * var(--m)); color: var(--text); }
  .contacts__list { grid-column: 1; grid-row: 2 / span 2; margin-top: calc(22 * var(--m)); }
  .contacts__list li { min-height: calc(43 * var(--m)); gap: calc(16 * var(--m)); font: 400 calc(17 * var(--m))/1.2 var(--sans); color: var(--ink); }
  .contacts__list a { padding: 4px 0; }
  .contacts__icon { width: calc(27 * var(--m)); height: calc(27 * var(--m)); }
  .contacts__group { font-size: calc(12.5 * var(--m)); padding: 6px 0 4px !important; white-space: nowrap; }
  .contacts__group-long { display: none; }
  .contacts__list li:last-child { align-items: flex-start; padding-top: calc(6 * var(--m)); }
  .contacts__list li:last-child .contacts__icon { margin-top: calc(2 * var(--m)); }
  .contacts__qr { grid-column: 2; grid-row: 2; margin-top: calc(14 * var(--m)); width: max(128px, calc(128 * var(--m))); }
  .contacts__qr-note { grid-column: 2; grid-row: 3; text-align: center; font-size: calc(13.5 * var(--m)); line-height: 1.3; margin-top: calc(-4 * var(--m)); }
  .contacts__arrow, .contacts__script, .thread--group { display: none; }

  /* --- 7. финал --- */
  .cta { background: var(--bg-hero); }
  .cta__frame { display: flex; flex-direction: column-reverse; padding: calc(48 * var(--m)) 0 env(safe-area-inset-bottom); }
  .cta__text { padding: 0 calc(26 * var(--m)) calc(26 * var(--m)) calc(36 * var(--m)); }
  .cta__title { font-size: calc(31 * var(--m)); line-height: calc(32 * var(--m)); letter-spacing: -.04em; }
  .cta__text p { margin-top: calc(12 * var(--m)); font-size: calc(17 * var(--m)); line-height: calc(23 * var(--m)); color: var(--text); }
  .cta__btn { margin-top: calc(22 * var(--m)); width: calc(297 * var(--m)); height: calc(47.4 * var(--m)); font-size: calc(14 * var(--m)); letter-spacing: .33em; gap: calc(12 * var(--m)); padding-left: calc(6 * var(--m)); }
  .cta__btn .btn__arrow { width: calc(20 * var(--m)); height: calc(10 * var(--m)); }
  .cta__texture { height: calc(210 * var(--m)); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%); mask-image: linear-gradient(180deg, transparent 0, #000 40%); }
  .cta__texture picture, .cta__texture img { width: 100%; height: 100%; }
  .cta__texture img { object-fit: cover; object-position: 50% 75%; }

}

/* ---------- меню (мобильное) ---------- */
dialog { padding: 0; border: 0; max-width: none; max-height: none; color: inherit; }
dialog:focus { outline: none; }
dialog::backdrop { background: rgba(40, 20, 22, .32); }
.menu { position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px); height: 100%; margin: 0; background: var(--bg-hero); }
.menu[open] { animation: menu-in .4s cubic-bezier(.2, .7, .2, 1); }
.menu__inner { height: 100%; display: flex; flex-direction: column; padding: 12px 22px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.menu__logo { width: 58px; }
.menu__list { margin-top: 26px; border-top: 1px solid var(--hair-grey); }
.menu__list a { display: block; padding: 17px 2px; border-bottom: 1px solid var(--hair-grey); font: 600 15px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.menu__list a:hover { color: var(--wine); }
.menu__btn { margin-top: 28px; height: 50px; font-size: 13.5px; letter-spacing: .3em; gap: 12px; }
.menu__btn .btn__arrow { width: 20px; height: 10px; }
.menu__tools { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 28px; }
.menu__tools .tool { display: flex; flex-direction: column; align-items: center; gap: 6px; width: auto; height: auto; min-width: 72px; padding: 8px 4px; font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--wine); }
.menu__tools .tool svg { width: 24px; height: 24px; }
@keyframes menu-in { from { transform: translateX(100%); } to { transform: none; } }

/* ---------- панели поиска и отмеченных ---------- */
.panel {
  position: fixed; inset: 0; margin: auto; width: min(92vw, 560px); max-height: min(86vh, 720px);
  background: var(--bg-hero); box-shadow: 0 24px 60px rgba(40, 20, 22, .18);
}
.panel[open] { animation: panel-in .35s cubic-bezier(.2, .7, .2, 1); }
.panel__inner { padding: 18px 22px 24px; display: flex; flex-direction: column; max-height: inherit; }
.panel__head { display: flex; align-items: center; justify-content: space-between; }
.panel__head .eyebrow { font-size: 13px; letter-spacing: .3em; }
.search__field { display: flex; align-items: center; gap: 10px; margin-top: 14px; border-bottom: 1px solid var(--wine); padding: 4px 2px 8px; color: var(--wine); }
.search__field svg { width: 20px; height: 20px; flex: none; }
.search__field input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 17px/1.4 var(--sans); color: var(--ink); padding: 6px 0; }
.search__field input:focus { outline: none; }
.search__field:focus-within { box-shadow: 0 1px 0 var(--wine); }
.panel__note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.panel__note:empty { display: none; }
.mini-list { margin-top: 14px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.mini-list:empty { display: none; }
.mini-list button { display: block; width: 100%; text-align: left; }
.mini-list img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #E9E3DA; transition: opacity .3s ease; }
.mini-list button:hover img { opacity: .86; }
.mini-list span { display: block; margin-top: 8px; font: 600 12px/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.panel__btn { margin-top: 18px; height: 48px; font-size: 13px; letter-spacing: .26em; gap: 12px; padding: 0 22px; }
.panel__btn .btn__arrow { width: 20px; height: 10px; }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- галерея ---------- */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; background: #1A1011; color: var(--cream-text); }
.lightbox::backdrop { background: #1A1011; }
.lightbox[open] { animation: fade-in .3s ease; }
.lightbox__inner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }
.lightbox__stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 64px 72px 12px; touch-action: pan-y; }
.lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; transition: opacity .25s ease; }
.lightbox__img.is-loading { opacity: .25; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px calc(20px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
.lightbox__title { font: 600 15px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-text); }
.lightbox__count { margin-top: 4px; font-size: 13px; color: rgba(247, 239, 232, .62); letter-spacing: .08em; }
.lightbox__actions { display: flex; align-items: center; gap: 10px; }
.lightbox .icon-btn { color: var(--cream-text); }
.lightbox .icon-btn:hover { background: rgba(255, 255, 255, .08); }
.lightbox__fav[aria-pressed="true"] { color: #E7A3AE; }
.lightbox__close { position: absolute; top: 10px; right: 12px; }
.lightbox__nav { position: absolute; top: 50%; margin-top: -40px; width: 52px; height: 52px; }
.lightbox__nav svg { width: 30px; height: 30px; }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
.btn--sm { height: 46px; padding: 0 20px; font-size: 12.5px; letter-spacing: .22em; gap: 12px; }
.btn--sm .btn__arrow { width: 20px; height: 10px; }
.lightbox .btn { background: #7A1129; }
.lightbox .btn:hover { background: #8E1631; }
@media (max-width: 640px) {
  .lightbox__stage { padding: 56px 8px 8px; }
  .lightbox__nav { top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); margin: 0; width: 46px; height: 46px; }
  .lightbox__nav--prev { left: auto; right: 58px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__bar { padding: 10px 14px calc(16px + env(safe-area-inset-bottom)); }
  .lightbox__meta { padding-right: 104px; min-height: 46px; display: flex; flex-direction: column; justify-content: center; }
  .lightbox__title { font-size: 14px; letter-spacing: .14em; }
  .lightbox__actions { width: 100%; }
  .lightbox__actions .btn { flex: 1; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
html.is-locked { overflow: hidden; }

/* ---------- анимации ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes appear { from { opacity: .01; } to { opacity: 1; } }
.js .hero__content > *, .js .hero__script { animation: rise .75s cubic-bezier(.2, .7, .2, 1) both; }
.js .hero__title { animation-delay: .05s; }
.js .hero__lead { animation-delay: .18s; }
.js .hero__btn { animation-delay: .28s; }
.js .hero__story { animation-delay: .38s; }
.js .hero__script { animation-name: appear; animation-duration: 1.2s; animation-delay: .5s; }
.js .hero__photo { animation: appear .8s ease both; }
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .about__script[data-reveal] { transform: rotate(-24deg) skewX(-6deg) translateY(12px); }
.js .about__script[data-reveal].is-in { transform: rotate(-24deg) skewX(-6deg); }
.js .contacts__script[data-reveal] { transform: rotate(-22deg) skewX(-6deg) translateY(12px); }
.js .contacts__script[data-reveal].is-in { transform: rotate(-22deg) skewX(-6deg); }
@media (max-width: 1023.98px) {
  .js .contacts__script[data-reveal] { transform: none; }
}
.js .thread__path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.45, .1, .2, 1); }
.js .thread.is-drawn .thread__path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .about__script[data-reveal] { transform: rotate(-24deg) skewX(-6deg); }
  .js .contacts__script[data-reveal] { transform: rotate(-22deg) skewX(-6deg); }
  .js .thread__path { stroke-dashoffset: 0; }
  .work:hover .work__open img { transform: none; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .js .contacts__script[data-reveal] { transform: none; }
}

/* узкие телефоны: QR не меньше 128 px, контакты — чуть мельче, чтобы адрес почты не выходил за край */
@media (max-width: 389.98px) {
  .contacts__list li { font-size: 15px; gap: 10px; }
}