/* ============================================================
   Ольга Джамп — стол Ольги
   Палитра снята пипеткой с ассетов: мат, кремовая ткань, мёд, коралл.
   ============================================================ */

@font-face{font-family:Spectral;font-style:normal;font-weight:600;font-display:swap;
  src:url(assets/fonts/spectral-600-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Пробел и неразрывный пробел лежат в обеих подрезках, но в диапазоне латинской.
   Из-за этого латинский файл тянулся на любой заголовок с пробелом, даже
   целиком кириллический: Spectral набирает только заголовки, латиницы в них нет,
   и 23 КБ уходили впустую. Пробелы отданы кириллическому файлу, который их
   содержит; латинский теперь грузится только под настоящую латиницу. */
@font-face{font-family:Spectral;font-style:normal;font-weight:600;font-display:swap;
  src:url(assets/fonts/spectral-600-latin.woff2) format('woff2');
  unicode-range:U+0021-009F,U+00A1-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/golos-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/golos-latin.woff2) format('woff2');
  unicode-range:U+0021-009F,U+00A1-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

:root{
  --mat:#42593d;
  --mat-deep:#22351e;
  --mat-shadow:rgba(20,34,17,.55);
  --cream:#f0e6d2;
  --cream-dim:#cfc0a2;
  --panel:#ded2bd;      /* поле панели — цвет снят с лепной кромки */
  --cream-soft:#e6dbc3; /* вторичный текст поверх сцены */
  --honey:#e8af48;
  --coral:#e56d4d;
  --ink:#1d2b19;
  --ink-soft:#3c4a35;   /* вторичный текст на панели; от 18px и крупнее */

  --display:Spectral,'Iowan Old Style',Georgia,serif;
  --text:'Golos Text','Segoe UI',system-ui,sans-serif;

  --panel-inset:clamp(0px,5vw,88px); /* поля мата по бокам панели */
  --panel-col:60rem;                 /* колонка содержимого внутри панели */

  --p:0;   /* прокрутка внутри героя, px  */
  --pn:0;  /* она же, нормированная 0…1   */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  /* Ниже героя панель лежит не во всю ширину, а полями на столе — поэтому
     грунт страницы это сам мат, а не плоская зелёная заливка. Тайл уже
     загружен сценой героя, лишнего байта не стоит. */
  background:var(--mat-deep) url(assets/hero/mat.webp) 50% 0/900px auto repeat;
  color:var(--cream);
  font:400 clamp(1rem,.94rem + .3vw,1.15rem)/1.6 var(--text);
}
::selection{background:var(--honey);color:var(--ink)}
/* Индикатор фокуса двухслойный. Медовое кольцо читается на тёмной сцене (6.7:1),
   но по кремовой панели даёт 1.3:1 — ниже порога 3:1, а вся форма стоит именно
   на панели. Тёмный контур вплотную к элементу добирает контраст там, где
   медовое кольцо его не даёт; наружу по-прежнему смотрит мёд. */
:focus-visible{outline:3px solid var(--honey);outline-offset:3px;border-radius:2px;
  box-shadow:0 0 0 2px var(--ink)}
html{scrollbar-color:var(--mat) var(--mat-deep)}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;z-index:99;padding:.6rem 1rem;
  background:var(--cream);color:var(--ink);border-radius:0 0 2rem 0}
.skip:focus{left:0}

/* ---------- шапка ---------- */
.top{
  position:absolute;inset:0 0 auto;z-index:6;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1rem,2.2vw,1.8rem) clamp(1.1rem,3.4vw,3rem);
}
.top__mark{
  display:flex;align-items:center;gap:.55rem;white-space:nowrap;
  font:600 clamp(1.05rem,1.5vw,1.35rem)/1 var(--display);
  letter-spacing:.01em;text-decoration:none;
  text-shadow:0 2px 10px rgba(18,30,15,.5);
}
/* знак — лепная катушка; вектор `assets/logo/mark.svg` для мест, где нужен плоский силуэт */
.top__mark img{
  width:clamp(2rem,2.6vw,2.4rem);height:auto;display:block;
  filter:drop-shadow(0 6px 10px rgba(18,30,15,.5));
}
.top__link{
  font-size:.9rem;color:var(--cream);
  text-decoration:underline;text-decoration-color:rgba(240,230,210,.45);
  text-underline-offset:.35em;text-decoration-thickness:1px;
  text-shadow:0 2px 10px rgba(18,30,15,.75);
  transition:text-decoration-color .25s;
}
.top__link:hover{text-decoration-color:var(--honey)}

/* ---------- герой ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  align-content:start;
  justify-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero__stage{position:absolute;inset:0;z-index:0}

.layer{
  position:absolute;inset:0;
  transform:translate3d(0,calc(var(--p) * var(--k) * -1px),0)
            scale(calc(1 + var(--pn) * var(--z)));
  transform-origin:50% 42%;
  will-change:transform;
}
  /* дальние слои теряют резкость по мере погружения */
.layer--mat{
  --k:.03;--z:.04;
  background:url(assets/hero/mat.webp) 50% 0/900px auto repeat;
  inset:-6% -6% -12%;
  filter:saturate(.96) brightness(.98) blur(calc(var(--pn) * 2.4px));
}
/* стол темнеет к краям — центр остаётся читаемым */
.hero__stage::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 38%,transparent 34%,rgba(20,34,17,.5) 100%),
    linear-gradient(180deg,rgba(20,34,17,.72) 0,rgba(20,34,17,.36) 9%,transparent 26%);
}
.layer--pattern{--k:.11;--z:.09;
  filter:drop-shadow(0 calc(10px + var(--pn) * 8px) calc(14px + var(--pn) * 10px) rgba(20,34,17,.42))
         blur(calc(var(--pn) * 1.4px))}
.layer--fabric {--k:.19;--z:.14;
  filter:drop-shadow(0 calc(16px + var(--pn) * 12px) calc(20px + var(--pn) * 12px) rgba(20,34,17,.46))}
.layer--tools  {--k:.28;--z:.20;
  filter:drop-shadow(0 calc(20px + var(--pn) * 16px) calc(24px + var(--pn) * 14px) rgba(20,34,17,.48))}
.layer--garment{--k:.36;--z:.26;
  filter:drop-shadow(0 calc(26px + var(--pn) * 20px) calc(32px + var(--pn) * 16px) rgba(20,34,17,.5))}
.layer--hands  {--k:.48;--z:.32;z-index:4;
  filter:drop-shadow(0 calc(-6px + var(--pn) * 22px) calc(40px + var(--pn) * 18px) rgba(20,34,17,.55))}

.prop{position:absolute;display:block;height:auto}

.prop--hands{
  left:50%;bottom:0;width:min(1040px,88vw);
  transform:translateX(-50%) translateY(31%);
}

/* выкройка — самый дальний реквизит, держит углы */
.prop--pattern-1{left:-3%; top:2%;  width:17vw;transform:rotate(-7deg)}
.prop--pattern-2{left:84%; top:1%;  width:18vw;transform:rotate(6deg)}
.prop--pattern-3{left:-4%; top:38%; width:14vw;transform:rotate(13deg)}
.prop--pattern-4{left:80%; top:66%; width:15vw;transform:rotate(-11deg)}

/* ткани — левый и правый край */
.prop--fabric-cream{left:1%; top:24%;width:14vw;transform:rotate(-4deg)}
.prop--fabric-honey{left:85%;top:14%;width:14vw;transform:rotate(5deg)}
.prop--fabric-coral{left:88%;top:42%;width:12vw;transform:rotate(-6deg)}

/* инструменты — кольцо вокруг текстового коридора */
.prop--scissors  {left:4%; top:14%;width:11vw;transform:rotate(-18deg)}
.prop--tape      {left:1%; top:64%;width:12vw;transform:rotate(8deg)}
.prop--pincushion{left:38%;top:3%; width:7vw;transform:rotate(-6deg)}
.prop--spool-cream{left:24%;top:3%; width:5.5vw;transform:rotate(-12deg)}
.prop--spool-coral{left:33%;top:-1%;width:5vw;transform:rotate(9deg)}
.prop--spool-honey{left:63%;top:2%; width:5vw;transform:rotate(-8deg)}
.prop--spool-white{left:10%;top:46%;width:5.5vw;transform:rotate(14deg)}
.prop--button-coral{left:6%; top:62%;width:3.4vw}
.prop--button-cream{left:92%;top:52%;width:3.2vw}
.prop--button-honey{left:11%;top:58%;width:3vw;transform:rotate(20deg)}

/* боди — единственная готовая вещь в кадре, лежит у самых рук */
.prop--garment{left:70%;top:49%;width:18vw;transform:rotate(4deg)}

/* ---------- текст героя ---------- */
.hero__type{
  position:relative;z-index:5;
  width:min(50rem,86vw);
  margin-top:clamp(5.5rem,15svh,9rem);
  text-align:center;
  transform:translate3d(0,calc(var(--p) * -.34px),0) scale(calc(1 - var(--pn) * .06));
  opacity:calc(1 - var(--pn) * 1.15);
  will-change:transform,opacity;
}
.hero__type h1{
  margin:0 0 .7em;
  font:600 clamp(2.05rem,1.1rem + 3.6vw,4rem)/1.08 var(--display);
  letter-spacing:-.018em;
  text-wrap:balance;
  text-shadow:0 3px 26px rgba(18,30,15,.6),0 1px 2px rgba(18,30,15,.5);
}
.hero__type p{
  margin:0 auto;max-width:34rem;
  color:var(--cream-soft);
  text-shadow:0 2px 14px rgba(18,30,15,.7);
}
.hero__act{
  margin-top:clamp(1.6rem,3vw,2.4rem);
  display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;justify-content:center;
}
/* Кнопка — вылепленная плашка, а не CSS-заливка: подложка растровая,
   тень навешена фильтром на подложку, чтобы не пачкать надпись. */
/* Кнопка — целиком вылепленная плашка с надписью: буквы из того же пластилина,
   что и сцена. Текст живёт в alt, поэтому ссылка остаётся ссылкой с именем. */
.btn{
  display:inline-block;width:min(15rem,62vw);
  text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.9,.25,1);
}
/* .btn ставится и на <a>, и на <button type=submit> — у второго сбрасываем
   нативный вид (фон, рамку, поля), иначе вокруг лепной плашки виден прямоугольник. */
button.btn{
  appearance:none;-webkit-appearance:none;
  background:none;border:0;padding:0;margin:0;
  cursor:pointer;font:inherit;
}
.btn img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 10px 18px rgba(18,30,15,.5));
  transition:filter .22s;
}
/* Лепная плашка прозрачна по углам, и box-shadow светит сквозь неё, разрезая
   силуэт прямоугольником. Контур с отступом лежит целиком снаружи бокса и
   плашку не задевает — поэтому у кнопок только outline, а цвет берётся по
   грунту: мёд на тёмной сцене, тёмный на кремовой панели. */
.btn:focus-visible{box-shadow:none;outline-offset:6px;border-radius:1.4rem}
.request .btn:focus-visible{outline-color:var(--ink)}

.btn:hover{transform:translateY(-2px)}
.btn:hover img{filter:drop-shadow(0 16px 24px rgba(18,30,15,.55)) brightness(1.06)}
.btn:active{transform:translateY(1px)}

.cue{
  margin-top:clamp(1.4rem,3.4svh,2.6rem);
  display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;color:var(--coral);text-decoration:none;
}
.cue svg{width:1.35rem;height:1.35rem;stroke:currentColor;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none;
  filter:drop-shadow(0 2px 8px rgba(18,30,15,.8))}
.cue:hover{color:var(--cream)}

/* ---------- панель ---------- */
/* Кремовое поле идёт во всю ширину от лепной кромки до конца страницы, а всё
   содержимое четырёх секций стоит в одной колонке. Раньше секции сами задавали
   ширину — 100%, 72rem и 40rem, — и панель шла лестницей: у заявки по краям
   оставалось около 1000px голого мата, а левый край текста прыгал от секции
   к секции. Поле полноширинное, колонка общая, уступов больше нет. */
.next,.embroidery,.about,.request{
  background:var(--panel);color:var(--ink);
  margin-inline:var(--panel-inset);
  padding-inline:max(clamp(1.2rem,6vw,4rem),
                     (100% - var(--panel-inset) * 2 - var(--panel-col)) / 2);
}

/* ---------- секция под героем (леса) ---------- */
/* Панель цепляется за сцену не скруглением, а лепной кромкой со строчкой:
   верх полосы прозрачный, низ сливается с полем панели. */
/* Текст слева, предмет справа: правая половина секции иначе остаётся пустой,
   и «Что я шью» читается незавёрстанной — это единственная секция панели,
   у которой своего предмета не было. */
.next{
  position:relative;z-index:1;
  padding-block:clamp(4.5rem,10vw,8rem) clamp(3.5rem,9vw,7rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,14rem);
  column-gap:clamp(2rem,5vw,4rem);align-items:center;
}
.next h2,.next__lead,.next__list{grid-column:1}
.next__prop{
  grid-column:2;grid-row:1 / span 3;justify-self:center;
  width:100%;height:auto;
  filter:drop-shadow(0 18px 26px rgba(29,43,25,.26));
}
.next__list{margin-bottom:0}
.next::before{
  content:"";position:absolute;left:0;right:0;
  height:clamp(2rem,3.4vw,3.2rem);
  top:calc(clamp(2rem,3.4vw,3.2rem) * -.71);
  background:url(assets/hero/edge-strip.webp) 0 0/auto 100% repeat-x;
  filter:drop-shadow(0 -10px 18px rgba(15,26,12,.45));
  pointer-events:none;
}
.next__lead{margin:0 0 2rem;max-width:38rem;color:var(--ink-soft)}
.next__list{
  display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0 0 2rem;padding:0;
}
.next__list li,.embroidery__list li{
  padding:.45em 1em;border-radius:1.1rem;font-size:1rem;
  color:var(--cream);
  background:url(assets/hero/mat.webp) 0 0/300px auto;
  box-shadow:0 6px 10px rgba(29,43,25,.22),
             inset 0 1px 0 rgba(240,230,210,.16),
             inset 0 -2px 3px rgba(20,34,17,.35);
}
/* Соседние лоскуты берут разные места тайла, иначе пятнадцать одинаковых
   отпечатков в ряд читаются как штамп, а не как материал. */
.next__list li:nth-child(3n+2),.embroidery__list li:nth-child(3n+2){background-position:-90px -40px}
.next__list li:nth-child(3n+3),.embroidery__list li:nth-child(3n+3){background-position:-170px -90px}
.next__list li:nth-child(4n+1),.embroidery__list li:nth-child(4n+1){background-position:-40px -130px}
/* ---------- вышивка ---------- */
.next h2,.embroidery h2,.about h2,.request h2{
  margin:0 0 .5em;
  font:600 clamp(1.7rem,1.1rem + 2.2vw,2.8rem)/1.12 var(--display);
  letter-spacing:-.015em;
}
.embroidery{
  display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);align-items:center;
  gap:clamp(2rem,5vw,4rem);
  padding-block:clamp(2rem,5vw,3.5rem) clamp(4rem,9vw,7rem);
}
.embroidery__media{display:flex;justify-content:center}
.embroidery__media img{
  width:100%;max-width:20rem;height:auto;
  filter:drop-shadow(0 16px 22px rgba(29,43,25,.24));
}
.embroidery__lead{margin:0 0 1.4rem;max-width:32rem;color:var(--ink-soft)}
.embroidery__list{
  display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0 0 1.6rem;padding:0;
  max-width:32rem;
}
.embroidery__price{margin:0;max-width:32rem;color:var(--ink-soft)}
.embroidery__price strong{color:var(--ink)}

/* ---------- о мастере ---------- */
.about{
  /* Первый трек тот же, что у «Вышивки»: две одинаково устроенные секции
     стоят подряд, и при 17rem против 20rem их текстовые колонки начинались
     с разницей в 48px — на общем скролле джог виден. */
  display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);align-items:center;
  gap:clamp(2rem,5vw,4rem);
  padding-block:clamp(2rem,5vw,3.5rem) clamp(4rem,9vw,7rem);
}
.about__portrait{position:relative;width:100%;max-width:20rem;margin:0 auto;aspect-ratio:780/917}
.about__photo{
  /* Окно рамки посчитано заливкой по цвету от центра дырки: 11.5% слева,
     11% справа, по 10% сверху и снизу. Ширина обязана быть остатком, то есть
     77.5%; стояло 78.5%, и лишний процент вылезал из-под правого бруска.
     Бокс задаётся ровно одной парой значений, без второго набора отступов. */
  position:absolute;top:10.0%;left:11.5%;
  width:77.5%;height:80%;object-fit:cover;object-position:50% 26%;
}
.about__frame{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  filter:drop-shadow(0 18px 26px rgba(29,43,25,.28));
}
.about__text p{margin:0 0 1.1rem;max-width:32rem;color:var(--ink-soft)}
.about__text p:last-child{margin-bottom:0}

/* ---------- форма заявки ---------- */
.request{
  padding-block:clamp(2rem,5vw,3.5rem) clamp(4.5rem,10vw,8rem);
}
.request__lead{margin:0 0 2.2rem;max-width:36rem;color:var(--ink-soft)}
.request__steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.8rem,3vw,2.2rem);
  list-style:none;margin:0 0 2.6rem;padding:0;
  max-width:30rem;   /* ровно ширина формы: шаги вводят её, а не живут отдельно */
}
.request__step{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
/* Шаги размечены <ol>, но порядок в нём не виден: показываем его вылепленной
   цифрой в медовой плашке — тем же приёмом, что буквы на кнопках. Обычный
   шрифт здесь нельзя, в этом мире символы вылеплены. */

/* Силуэты у трёх иконок разной пропорции (карандаш 2.65:1, конверт 1.38:1,
   сердце 1.04:1). При общей высоте карандаш выходил втрое шире сердца, поэтому
   общий бокс — квадрат, а вписывание внутри него. */
.request__step img{width:5rem;height:5rem;object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(29,43,25,.22))}
/* Общий квадрат уравнял канвасы, но не предметы: по альфе конверт занимает
   69.7% своего канваса, карандаш 22.7%, сердце 25.8% — в кадре конверт втрое
   тяжелее соседей и ряд разваливается. Масштаб задаём поштучно, по
   оптической массе, а не по канвасу.
   Бокс общий и неподвижный — меняем только картинку внутри него:
   разные размеры бокса ставят три подписи на три разные высоты. */
.request__step img[src*="pencil"]  {transform:scale(1.08)}
.request__step img[src*="envelope"]{transform:scale(.78)}
.request__step img[src*="heart"]   {transform:scale(1.18)}
.request__step img.request__num{
  width:1.45rem;height:1.45rem;
  filter:drop-shadow(0 3px 5px rgba(29,43,25,.28));
}
.request__step span{font-size:.9rem;color:var(--ink)}

.request__form{display:grid;gap:1.2rem;max-width:30rem}
.request__field{display:grid;gap:.4rem}
.request__field label{font-size:.9rem;color:var(--ink)}
.request__field input,.request__field textarea{
  font:inherit;color:var(--ink);
  padding:.7em 1.1em;
  background:rgba(240,230,210,.4);
  border:1px solid rgba(66,89,61,.3);
}
.request__field input,.request__field textarea{border-radius:1.25rem}
/* Подсказка о формате контакта — единственное, что объясняет, что сюда писать.
   Браузерный дефолт даёт по пикселям 2.96; поле набирается 18.4px, а это ровно
   тот размер, от которого --ink-soft на панели разрешён. opacity сбрасываем:
   Firefox иначе приглушает цвет ещё раз поверх заданного. */
.request__field ::placeholder{color:var(--ink-soft);opacity:1}
.request__field textarea{resize:vertical;min-height:5.5rem}
.request__submit{margin-top:.4rem;width:min(15rem,100%)}
.request__alt{margin:1.6rem 0 0;color:var(--ink);font-size:.9rem}
.request__alt a{color:var(--ink);text-decoration-color:rgba(66,89,61,.4)}

/* ---------- мобильный стол: два слоя вместо шести ---------- */
@media (max-width:759px){
  /* Вертикальный кадр стола кладётся по ширине экрана — иначе cover раздувает
     предметы вдвое; ниже кадра тот же мат продолжается тайлом, стык уходит под руки. */
  .layer--mat{
    background-image:url(assets/hero/mat-mobile.webp),url(assets/hero/mat.webp);
    background-size:100% auto,620px auto;
    background-position:50% 0,50% 0;
    background-repeat:no-repeat,repeat;
    inset:-4% 0 -10%;
  }
  .layer--pattern,.layer--fabric,.layer--tools,.layer--garment{display:none}
  .prop--hands{width:min(480px,124vw);transform:translateX(-50%) translateY(-10%)}
  .hero__type{margin-top:clamp(5rem,19svh,9rem);width:90vw}
  /* панель въезжает под руки, а не начинается за пустой полосой мата */
  .next{margin-top:-9svh}
  /* на телефоне сцена лежит прямо под текстом — стол притемняется полосой,
     чтобы кремовая ткань не съедала кремовые буквы */
  .hero__stage::after{
    background:
      linear-gradient(180deg,
        rgba(20,34,17,.16) 0%,
        rgba(20,34,17,.30) 20%,
        rgba(20,34,17,.30) 62%,
        rgba(20,34,17,.14) 84%),
      radial-gradient(120% 60% at 50% 46%,transparent 30%,rgba(20,34,17,.5) 100%);
  }
  /* Выключка одна на все четыре секции — влево. Центрировались только вышивка
     и «обо мне», и абзац на восемь строк вставал по центру. Медиа-блок
     по-прежнему центрируется, текст — нет. */
  /* Предмет — украшение правой половины десктопа; на телефоне правой половины
     нет, и он только удлинил бы экран перед вышивкой. */
  .next{grid-template-columns:1fr}
  .next__prop{display:none}
  .embroidery,.about{grid-template-columns:1fr}
  .embroidery__media,.about__portrait{margin:0 auto 1.6rem}
  .request__form{max-width:none}
}

/* ---------- движение выключается целиком ---------- */
@media (prefers-reduced-motion:reduce){
  .layer,.hero__type{transform:none!important;opacity:1!important}
  .cue{opacity:1!important}
  .btn:hover,.btn:active{transform:none}
  *{transition-duration:.001ms!important}
}