/* Massage Polina · первый экран по 02 Qasimi (21.10), ниже таплинк по 02 English with Polly.
   Палитра спокойная: льняной фон, тёплый графит, бежевый текст на тёмном. Фото в одной коррекции (G5). */

:root {
  --bg: #e8e3d8;
  --paper: #cfc5b5;
  --fiber: #f1ece4;
  --ink: #2a2826;
  --text: #69625a;
  --line: rgba(42, 40, 38, 0.32);
  --rule: rgba(42, 40, 38, 0.2);
  /* сетка: одно поле по краям на телефоне (по левому краю иконки меню), один шаг между секциями */
  --side: 20px;
  --sec: 80px;
  --disp: 'Noto Serif Display Cond', 'Cormorant Garamond', Georgia, serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', system-ui, sans-serif;
  /* первый экран: тёмный, как Qasimi */
  --h-bg: #282624;
  --h-fg: #cfc6ba;
  --h-head: #d8cab4;
  --h-line: rgba(216, 202, 180, 0.16);
  --h-track: rgba(216, 202, 180, 0.2);
  --h-thumb: rgba(216, 202, 180, 0.62);
  --h-btn: rgba(216, 202, 180, 0.62);
  /* зерно и пятна бумаги */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .22 0 0 0 0 .18 .5 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800' preserveAspectRatio='none'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .95 .75 0 0 0 -.33'/%3E%3C/filter%3E%3Crect width='800' height='800' filter='url(%23m)'/%3E%3C/svg%3E");
}

/* вариант B: светлый первый экран, та же сетка */
[data-hero='b'] .hero { border-bottom: 1px solid var(--h-line); }
[data-hero='b'] {
  --h-bg: var(--bg);
  --h-fg: #4a4640;
  --h-head: var(--ink);
  --h-line: rgba(42, 40, 38, 0.16);
  --h-track: rgba(42, 40, 38, 0.16);
  --h-thumb: rgba(42, 40, 38, 0.6);
  --h-btn: rgba(42, 40, 38, 0.55);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--sans);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
strong { color: var(--ink); font-weight: 500; }

.wrap { max-width: 560px; margin: 0 auto; padding: 0 var(--side); }

.h-sec {
  margin: 0 0 24px;
  color: var(--ink);
  font: 400 54px/1 var(--disp);
  text-align: center;
}

.btn {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 17px 20px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #e8e1d5;
  font: 500 15px/1 var(--sans);
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s;
}
.btn:hover { background: #45413d; }

/* ---------- вайрфрейм-плашки вместо фото ---------- */

.ph {
  --phbg: #e3d3c3;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(to top right, transparent calc(50% - 0.7px), rgba(58, 42, 35, 0.26) 50%, transparent calc(50% + 0.7px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.7px), rgba(58, 42, 35, 0.26) 50%, transparent calc(50% + 0.7px)),
    var(--phbg);
  color: var(--ink);
  text-align: center;
}
.ph > img,
.ph > picture,
.ph > picture img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.ph:has(img) { border-color: transparent; background: none; }
.ph:has(img) .ph__tag,
.ph:has(img) .ph__txt { display: none; }
.ph__tag,
.ph__txt { position: relative; background: var(--phbg); }
.ph__tag {
  padding: 5px 9px 4px;
  font: 500 9px/1.3 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ph__txt {
  max-width: 82%;
  padding: 3px 8px 4px;
  font: 500 16px/1.25 var(--serif);
}
.ph--obj {
  --phbg: var(--bg);
  border-style: dashed;
  border-radius: 4px;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.6px), rgba(58, 42, 35, 0.16) 50%, transparent calc(50% + 0.6px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), rgba(58, 42, 35, 0.16) 50%, transparent calc(50% + 0.6px)),
    var(--phbg);
}
.ph--obj > img { object-fit: contain; background: var(--bg); }
.ph--obj .ph__txt { font-size: 14px; }

/* ---------- рваная бумага (края рисует main.js) ---------- */

.paper {
  position: relative;
  background-color: var(--paper);
  background-image: var(--grain), var(--mottle);
  background-size: auto, cover;
}
.paper.is-torn { background: none; }
.paper > :not(.paper__bg) { position: relative; z-index: 1; }
.paper__bg {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 1.5px rgba(50, 44, 38, 0.26));
  pointer-events: none;
}
.paper__bg i { position: absolute; inset: 0; }
.paper__bg .f { background-color: var(--fiber); background-image: var(--grain); }
.paper__bg .d { background-color: #b9ad9c; background-image: var(--grain); }
.paper__bg .p { background-color: var(--paper); background-image: var(--grain), var(--mottle); background-size: auto, cover; }

/* ---------- первый экран · как 02 Qasimi ---------- */

.hero {
  --gut: var(--side);
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--h-bg);
  color: var(--h-fg);
}

.bar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: stretch;
  height: 56px;
  border-bottom: 1px solid var(--h-line);
}
.bar__menu,
.bar__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}
.bar__menu {
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 58px;
  padding: 0 0 0 19px;
  border: 0;
  border-right: 1px solid var(--h-line);
  background: none;
  cursor: pointer;
}
.bar__menu i { display: block; width: 20px; height: 1px; background: currentColor; }
.bar__menu i:nth-child(2) { width: 22px; }
.bar__menu i:nth-child(3) { width: 17px; }
.bar__logo {
  flex: 1;
  align-self: center;
  padding-left: 0.46em;
  color: inherit;
  font: 400 15px/1 var(--sans);
  letter-spacing: 0.46em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.bar__cell {
  flex: none;
  padding: 0 17px;
  border-left: 1px solid var(--h-line);
  font: 400 13px/1 var(--sans);
}
.bar__cell--wide { display: none; }

/* выбор языка списком: только вид, сайт всегда на русском */
.lang { position: relative; padding: 0; }
.lang button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.lang__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 17px;
}
.lang__btn i {
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s, margin 0.2s;
}
.lang__btn[aria-expanded='true'] i { margin-top: 3px; transform: rotate(-135deg); }
.lang__list {
  position: absolute;
  top: calc(100% + 1px);
  left: -1px;
  right: 0;
  margin: 0;
  padding: 2px 0 6px;
  border: 1px solid var(--h-line);
  border-top: 0;
  background: var(--h-bg);
  list-style: none;
}
.lang__list[hidden] { display: none; }
.lang__list button {
  display: block;
  width: 100%;
  padding: 12px 17px;
  text-align: left;
  opacity: 0.5;
}
.lang__list button:hover { opacity: 0.8; }
.lang__list button[aria-pressed='true'] { opacity: 1; }

.menu {
  position: absolute;
  z-index: 6;
  top: 56px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 18px var(--gut) 26px;
  border-bottom: 1px solid var(--h-line);
  background: var(--h-bg);
}
.menu[hidden] { display: none; }
.menu a {
  padding: 8px 0;
  color: var(--h-head);
  font: 400 34px/1.1 var(--disp);
  text-decoration: none;
}
.hero { position: relative; }

.hero__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 34px var(--gut) 30px;
}
.hero__title {
  margin: auto 0 32px;
  color: var(--h-head);
  font: 400 92px/0.9 var(--disp);
  letter-spacing: -0.005em;
}
.hero__title span { display: block; }

/* стопка фото: первое крупно, следующие ниже и уже, уходят вправо */
.stack {
  --w0: 68%; --w1: 15%; --w2: 10.5%; --w3: 6.5%;
  position: relative;
  aspect-ratio: 350 / 297.5;
  margin-top: auto;
  cursor: pointer;
}
.stack__item {
  position: absolute;
  top: 50%;
  margin: 0;
  overflow: hidden;
  background: #3a3733;
  transform: translateY(-50%);
  transition: left 0.9s cubic-bezier(0.6, 0, 0.2, 1), width 0.9s cubic-bezier(0.6, 0, 0.2, 1), height 0.9s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.6s;
}
.stack__item img { width: 100%; height: 100%; object-fit: cover; }
.stack__item.s0 { z-index: 4; left: 0; width: var(--w0); height: 100%; }
.stack__item.s1 { z-index: 3; left: var(--w0); width: var(--w1); height: 86.7%; }
.stack__item.s2 { z-index: 2; left: calc(var(--w0) + var(--w1)); width: var(--w2); height: 67.9%; }
.stack__item.s3 { z-index: 1; left: calc(var(--w0) + var(--w1) + var(--w2)); width: var(--w3); height: 47%; }
.stack__item.s4 { z-index: 0; left: 100%; width: 0; height: 30%; opacity: 0; }
.stack__item.out { z-index: 5; opacity: 0; }
.stack__item.jump { transition: none; }
/* без JS: просто первые четыре кадра */
.stack:not(.is-ready) .stack__item:nth-child(1) { z-index: 4; left: 0; width: var(--w0); height: 100%; }
.stack:not(.is-ready) .stack__item:nth-child(2) { z-index: 3; left: var(--w0); width: var(--w1); height: 86.7%; }
.stack:not(.is-ready) .stack__item:nth-child(3) { z-index: 2; left: calc(var(--w0) + var(--w1)); width: var(--w2); height: 67.9%; }
.stack:not(.is-ready) .stack__item:nth-child(4) { z-index: 1; left: calc(var(--w0) + var(--w1) + var(--w2)); width: var(--w3); height: 47%; }
.stack:not(.is-ready) .stack__item:nth-child(n+5) { display: none; }

.stack__track {
  position: relative;
  height: 1px;
  margin-top: 24px;
  background: var(--h-track);
}
.stack__track i {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 1px;
  background: var(--h-thumb);
  transition: transform 0.9s cubic-bezier(0.6, 0, 0.2, 1);
}

.hero__btn {
  align-self: flex-start;
  margin-top: 26px;
  padding: 14px 28px 13px;
  border: 1px solid var(--h-btn);
  border-radius: 999px;
  color: var(--h-fg);
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.hero__btn:hover { background: var(--h-head); color: var(--h-bg); }


/* ---------- обо мне ---------- */

.about { padding-top: var(--sec); text-align: center; }
.about__lead { margin: 0 0 32px; }
.points { margin: 0; padding: 0; list-style: none; }
.points li { margin: 0 0 24px; }
.points li:last-child { margin-bottom: 0; }
.points__n { display: block; margin-bottom: 6px; color: var(--ink); font: 400 46px/1 var(--disp); }
.points p { margin: 0 auto; max-width: 320px; }

/* ---------- что я делаю (как Why me? в 02) ---------- */

.work { padding-top: var(--sec); }
.row {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 32px;
}
.row:last-child { margin-bottom: 0; }
.row--flip { grid-template-columns: 1fr 40%; }
.row--flip .row__obj { order: 2; }
.row__obj { aspect-ratio: 1 / 0.82; }
.row__txt { margin: 0; text-align: center; font-size: 15px; line-height: 1.5; }

/* ---------- прайс: две группы, строки «название слева, время и цена справа» ---------- */

.price { margin-top: var(--sec); padding: 84px 0 88px; }
.price__in { text-align: center; }
.plist { margin-top: 12px; font-variant-numeric: lining-nums tabular-nums; text-align: left; }
.plist ul { margin: 0; padding: 0; list-style: none; }
.plist p { margin: 0; }
.plist__grp + .plist__grp { margin-top: 44px; }
.plist__title { margin: 0 0 14px; color: var(--ink); font: 400 30px/1 var(--disp); }
.plist li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 18px;
  align-items: baseline;
  padding: 15px 0 14px;
  border-top: 1px solid var(--rule);
}
.plist li:first-child { border-top-color: rgba(42, 40, 38, 0.42); }
.plist li:last-child { border-bottom: 1px solid var(--rule); }
.plist__name { grid-row: span 2; color: var(--ink); font-weight: 500; font-size: 16.5px; line-height: 1.35; }
.plist__name i { display: block; margin-top: 3px; color: #6b645b; font-style: normal; font-weight: 400; font-size: 13px; }
.plist__opt { grid-column: 2; display: flex; justify-content: flex-end; gap: 16px; color: #6b645b; font-size: 15.5px; line-height: 1.35; white-space: nowrap; }
.plist__opt + .plist__opt { margin-top: 5px; }
.plist__opt b { min-width: 2.6em; color: var(--ink); font-weight: 600; text-align: right; }

.cta { margin-top: 48px; }

/* ---------- частые вопросы: те же тонкие линии, что в прайсе ---------- */

.faq { padding-top: var(--sec); }
.faq__list { border-bottom: 1px solid var(--rule); }
.faq__item { border-top: 1px solid var(--rule); }
.faq__item:first-child { border-top-color: rgba(42, 40, 38, 0.42); }
.faq__item summary {
  position: relative;
  display: block;
  padding: 19px 40px 18px 0;
  color: var(--ink);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* плюс из двух линий; у открытого вопроса остаётся минус */
.faq__item summary::before,
.faq__item summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1px;
  width: 13px;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s;
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__item p { margin: 0; padding: 0 40px 22px 0; }
/* плавное открытие там, где браузер это умеет; в остальных просто открывается */
.faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s, content-visibility 0.35s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
:root { interpolate-size: allow-keywords; }

/* ---------- контакты ---------- */

.contacts { padding-top: var(--sec); padding-bottom: 48px; text-align: center; }
.pills { display: flex; gap: 12px; margin: 0 0 32px; }
.pill {
  flex: 1 1 auto;
  padding: 15px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font: 500 14px/1 var(--sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.pill:hover { color: var(--ink); border-color: var(--ink); }
.contacts__obj { width: 190px; height: 156px; margin: 0 auto 20px; }
.contacts__txt { margin: 0; color: #57524b; }

.foot {
  padding: 32px 20px 30px;
  color: #8f887e;
  font: 400 11px/1 var(--sans);
  letter-spacing: 0.06em;
  text-align: center;
}

/* ---------- десктоп ---------- */

@media (min-width: 900px) {
  :root { --side: 40px; --sec: 120px; }
  body { font-size: 17px; }

  /* первый экран: размеры в пикселях референса (сайт 700×420), u = пикселей на 1 px референса */
  .hero {
    --u: min(calc(100vw / 700), calc(100svh / 420));
    min-height: 0;
    height: max(100svh, calc(420 * var(--u)));
  }
  .bar { height: calc(35 * var(--u)); }
  .bar__menu { width: calc(44 * var(--u)); padding-left: calc(14 * var(--u)); gap: calc(2.6 * var(--u)); }
  .bar__menu i { width: calc(9 * var(--u)); }
  .bar__menu i:nth-child(2) { width: calc(10.5 * var(--u)); }
  .bar__menu i:nth-child(3) { width: calc(7.5 * var(--u)); }
  .bar__logo { font-size: calc(11.5 * var(--u)); }
  .bar__cell { padding: 0 calc(10 * var(--u)); font-size: calc(6.6 * var(--u)); }
  .bar__cell--wide { display: flex; min-width: calc(35 * var(--u)); }
  .lang { padding: 0; }
  .lang__btn { gap: calc(3.6 * var(--u)); padding: 0 calc(10 * var(--u)); }
  .lang__btn i { width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); }
  .lang__list { right: -1px; padding: calc(1 * var(--u)) 0 calc(3 * var(--u)); }
  .lang__list button { padding: calc(5.5 * var(--u)) calc(10 * var(--u)); }
  .menu { top: calc(35 * var(--u)); padding: calc(10 * var(--u)) calc(22 * var(--u)) calc(16 * var(--u)); }
  .menu a { font-size: calc(22 * var(--u)); }

  .hero__body {
    position: relative;
    flex: none;
    width: calc(700 * var(--u));
    height: calc(385 * var(--u));
    margin: auto;
    padding: 0;
  }
  .hero__title {
    position: absolute;
    top: calc(36 * var(--u));
    left: calc(22 * var(--u));
    margin: 0;
    font-size: calc(56 * var(--u));
    line-height: 0.92;
  }
  .stack {
    --w0: 49.7%; --w1: 21.7%; --w2: 17.15%; --w3: 11.45%;
    position: absolute;
    top: calc(41.7 * var(--u));
    left: calc(241.7 * var(--u));
    width: calc(437.3 * var(--u));
    aspect-ratio: auto;
    height: calc(272.3 * var(--u));
    margin: 0;
  }
  .stack__track {
    position: absolute;
    top: calc(340 * var(--u));
    left: calc(241.7 * var(--u));
    width: calc(437.3 * var(--u));
    margin: 0;
  }
  /* кнопка крупнее, низ на одной линии с низом большого фото (как верх заголовка с верхом фото) */
  .hero__btn {
    position: absolute;
    top: calc(286 * var(--u));
    left: calc(22 * var(--u));
    margin: 0;
    padding: 0 calc(21 * var(--u));
    height: calc(28 * var(--u));
    display: flex;
    align-items: center;
    font-size: calc(8.4 * var(--u));
  }

  /* ниже первого экрана одна сетка: контейнер 920 px, две колонки с промежутком 64 px (прайс, «что я делаю») */
  .wrap { max-width: 1000px; }
  .h-sec { font-size: 76px; margin-bottom: 40px; }
  .btn { max-width: 380px; font-size: 16px; padding: 21px 20px 20px; }

  .about__lead { max-width: 640px; margin: 0 auto 56px; font-size: 19px; }
  .points { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 64px; }
  .points li { margin: 0; }
  .points__n { font-size: 62px; margin-bottom: 10px; }

  .row,
  .row--flip { grid-template-columns: 1fr 1fr; column-gap: 64px; margin-bottom: 48px; }
  .row:last-child { margin-bottom: 0; }
  .row__obj { width: 100%; max-width: 340px; justify-self: center; }
  .row__txt { max-width: 380px; font-size: 18px; text-align: left; }
  /* текст всегда у центральной линии, рядом с фото */
  .row--flip .row__txt { justify-self: end; text-align: right; }

  .price { padding: 110px 0 116px; }
  /* две группы колонками; строки обеих колонок на одних линиях (subgrid) */
  .plist { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); column-gap: 64px; margin-top: 0; }
  .plist__grp { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  .plist__grp ul { display: contents; }
  .plist__grp + .plist__grp { margin-top: 0; }
  .plist__title { margin-bottom: 20px; font-size: 38px; }
  .plist li { padding: 18px 0 17px; }
  .plist__name { font-size: 18px; }
  .plist__name i { font-size: 14px; }
  .plist__opt { gap: 26px; font-size: 16.5px; }

  .cta { margin-top: 72px; }

  .faq__item summary { padding: 22px 48px 21px 0; font-size: 18px; }
  .faq__item p { padding: 0 48px 26px 0; }

  .contacts { max-width: 560px; padding-bottom: 56px; }
  .pills { gap: 14px; margin-bottom: 40px; }
  .pill { flex: 1 1 0; padding: 18px 14px; font-size: 15px; }
  .contacts__obj { width: 240px; height: 197px; }
}