/* The kitchen film and the catalogue share the site's tea-green palette. */
.kitchen { position:relative; background:var(--night); }
/* С полотном (tone.js) раздел своей краски не держит: у него климат «ночь»
   (data-tone="night"), и темнеет весь экран — кадр со своей студийной
   чернотой встаёт в полотно без рамки, без полос по бокам вписанного
   ролика и без стыка с соседями. */
.tone-on .kitchen { background:none; }
.kitchen-stage { --kitchen-inset:76px; position:relative; min-height:540px; height:calc(100svh - var(--kitchen-inset)); overflow:hidden; }
/* Длина секции и есть темп ролика. При 280svh все 10 с ролика уходили на неполные
   два экрана пути: щелчок колеса — полсекунды ролика, тесак пролетал ускоренно.
   Теперь пути около 3,6 экрана (у фильма с грузовиком выше — 5,6).
   Экран здесь — замороженный --vh из шапки главной, а не svh: встроенный браузер
   Telegram меняет высоту веб-вью вместе со своими панелями, и путь в svh дышал бы
   с ними, сдвигая всё, что ниже (подробно — в film.css). */
.kitchen.is-scrubbing { height:460vh; height:460svh; height:calc(var(--vh, 1svh) * 460); }
.is-scrubbing .kitchen-stage { position:sticky; top:var(--kitchen-inset); }
/* Верх и низ кадра растворяются МАСКОЙ в прозрачность, а не затемнением
   в цвет: прежняя накладка красила края в #080F0C, и пока полотно ещё
   переливалось к ночи, по верхней кромке сцены вставала тёмная линия во всю
   ширину. Маска гасит кадр в то, что под ним, — в полотно любого цвета.
   Заодно заголовок сверху и подпись снизу стоят уже не на тесаке и доске,
   а на полотне. */
/* Бока — по краю ВПИСАННОГО кадра, а не элемента: ролик 16:9 стоит по
   высоте сцены, и шире окна он не бывает. Стейк в кадре шире самого кадра,
   рамка режет его вертикальной линией — гасим её на 7 % ширины кадра. */
.kitchen-video { position:absolute; width:100%; height:100%; object-fit:contain; inset:0;
  --kv-w:min(100%, (100svh - var(--kitchen-inset, 76px)) * 16 / 9);
  --kv-l:calc(50% - var(--kv-w) / 2);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 24%, #000 70%, transparent 100%),
    linear-gradient(to right, transparent var(--kv-l), #000 calc(var(--kv-l) + var(--kv-w) * .07),
      #000 calc(100% - var(--kv-l) - var(--kv-w) * .07), transparent calc(100% - var(--kv-l)));
          mask-image:linear-gradient(to bottom, transparent 0, #000 24%, #000 70%, transparent 100%),
    linear-gradient(to right, transparent var(--kv-l), #000 calc(var(--kv-l) + var(--kv-w) * .07),
      #000 calc(100% - var(--kv-l) - var(--kv-w) * .07), transparent calc(100% - var(--kv-l)));
  -webkit-mask-composite:source-in; mask-composite:intersect; }
.kitchen-top,.kitchen-bottom { position:absolute; left:0; right:0; z-index:1; }
.kitchen-top { top:clamp(34px,6vh,80px); }
.kitchen-top h2 { max-width:820px; font-size:clamp(28px,3.6vw,56px); line-height:1.16; text-wrap:balance; }
.kitchen-top .kicker { color:var(--cta); margin-bottom:16px; }
.kitchen-bottom { bottom:32px; }
.kitchen-caption { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; font-size:14px; color:var(--muted); }
.kitchen-caption a { color:var(--ink); display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.kitchen-caption .ic { width:18px; height:18px; transform:rotate(90deg); }
.kitchen-progress { height:2px; background:rgba(234,243,239,.18); }
.kitchen-progress span { display:block; height:100%; background:var(--cta); transform:scaleX(0); transform-origin:left; }
.kitchen:not(.is-scrubbing) .kitchen-bottom { pointer-events:none; }
.kitchen:not(.is-scrubbing) .kitchen-bottom a { pointer-events:auto; }
.kitchen:not(.is-scrubbing) .kitchen-progress { display:none; }
.kitchen:not(.is-scrubbing) .kitchen-video { padding-bottom:72px;
  /* Без перемотки сцена мерится замороженным --vh (ниже), а кадр вписан в
     её высоту за вычетом подвала подписи — маска боков обязана считать так же,
     иначе после сворачивания панелей браузера она разъедется с краем кадра. */
  --kv-w:min(100%, (var(--vh, 1svh) * 100 - var(--kitchen-inset, 76px) - 72px) * 16 / 9); }
.kitchen:not(.is-scrubbing) .kitchen-top { pointer-events:none; }
/* Без перемотки сцена стоит в потоке страницы и своей высотой двигает всё ниже —
   значит, и тут замороженный экран. */
.kitchen:not(.is-scrubbing) .kitchen-stage { height:calc(var(--vh, 1svh) * 100 - var(--kitchen-inset)); }
.provisions { padding:110px 0 104px; background:var(--bg); }
.tone-on .provisions { background:none; }
.provisions-heading { display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:end; margin-bottom:48px; }
.provisions-heading h2 { max-width:790px; font-size:clamp(32px,4.4vw,66px); line-height:1.16; text-wrap:balance; }
.provisions-heading .lead { max-width:440px; justify-self:end; font-size:17px; }
.provisions-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.provision { --card-pad:26px; --photo-left:#f8f2ea; --photo-right:#ded5cc; position:relative; display:flex; flex-direction:column; grid-column:span 2; min-height:348px; overflow:hidden; padding:var(--card-pad); background:linear-gradient(100deg,var(--photo-left),var(--photo-right)); color:var(--paper-ink); border-radius:7px; isolation:isolate; }
/* Фон каждой карточки продолжает студийный фон именно её фотографии.
   Поэтому картинка больше не выглядит прямоугольником, вклеенным в кнопку. */
.provision:nth-child(1)  { --photo-left:#f9f4ec; --photo-right:#dfd3c5; }
.provision:nth-child(2)  { --photo-left:#f8f4ee; --photo-right:#ebe3da; }
.provision:nth-child(3)  { --photo-left:#f0eae5; --photo-right:#cfc7c0; }
.provision:nth-child(4)  { --photo-left:#faf2e9; --photo-right:#e6dfd3; }
.provision:nth-child(5)  { --photo-left:#fdf6ed; --photo-right:#e8dcd0; }
.provision:nth-child(6)  { --photo-left:#f8f4ee; --photo-right:#e3ddd8; }
.provision:nth-child(7)  { --photo-left:#efe5da; --photo-right:#e1d1c2; }
.provision:nth-child(8)  { --photo-left:#faf2e9; --photo-right:#e5dccf; }
.provision:nth-child(9)  { --photo-left:#f9f3f0; --photo-right:#d3ccc3; }
.provision:nth-child(10) { --photo-left:#f8f2ed; --photo-right:#dad0c5; }
.provision:nth-child(11) { --photo-left:#e5dcd1; --photo-right:#f7f1ea; }
.provision:nth-last-child(-n+2) { grid-column:span 3; }
.provision-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.provision h3 { font-family:var(--font-body,Manrope,sans-serif); font-weight:750; font-size:21px; line-height:1.25; letter-spacing:-.6px; max-width:230px; }
.provision p { color:#4f6254; font-size:13px; line-height:1.65; margin:10px 0 0; max-width:260px; }
.provision-image { display:flex; align-items:flex-end; justify-content:center; flex:1; min-height:168px; margin:22px calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); overflow:hidden; }
.provision img { display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:cover;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%); }
.kitchen-caption a:focus-visible { outline:3px solid var(--cta); outline-offset:5px; }
@media (max-width:1000px) {
  .provisions-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .provisions-heading { grid-template-columns:1fr; gap:24px; }
  .provisions-heading .lead { justify-self:start; max-width:600px; }
  .provision,.provision:nth-last-child(-n+2) { grid-column:span 1; }
  .provision { --card-pad:22px; }
}
@media (max-width:640px) {
  .kitchen-stage { --kitchen-inset:116px; min-height:520px; }
  .kitchen.is-scrubbing { height:340vh; height:340svh; height:calc(var(--vh, 1svh) * 340); }
  /* На телефоне кадр во весь экран — боков у него нет, гасим только верх и низ. */
  .kitchen-video { object-fit:cover;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 24%, #000 70%, transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 24%, #000 70%, transparent 100%); }
  .kitchen-top { top:32px; }
  .kitchen-top h2 { font-size:30px; max-width:370px; }
  .kitchen-top .kicker { font-size:10px; }
  .kitchen-bottom { bottom:24px; }
  .kitchen-caption { align-items:flex-start; font-size:11px; }
  .provisions { padding:70px 0; }
  .provisions-heading { margin-bottom:30px; gap:22px; }
  .provisions-heading h2 { font-size:32px; }
  .provisions-heading .lead { font-size:15px; }
  .provisions-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
  .provision { --card-pad:16px; min-height:284px; }
  .provision h3 { font-size:17px; letter-spacing:-.35px; }
  .provision p { font-size:12px; line-height:1.5; margin-top:8px; }
  .provision-image { min-height:150px; margin:18px calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); }
}
@media (prefers-reduced-motion:reduce) {
  .provision img { transition:none; }
}