/* Узкий экран сохраняет композицию доски шириной 1100 px.
   Размеры и интервалы уменьшаются вместе; блоки не переставляются.
   Эти правила относятся только к главной, шапка и диалог остаются обычными.

   Пропорциональное сжатие работает только до планшета. На телефоне множитель
   опускал текст до 5–6 px и кнопки до 13 px, поэтому ниже 851 px страница
   отдаётся композиции из mobile-layout.css с читаемым текстом и одним
   экраном на блок. */
.home-hero-screen,.story-layout{display:contents}
@media(min-width:851px) and (max-width:1100px){
  .home-hero-screen{display:grid;align-items:center;min-height:calc(100svh - 104px)}
  .hero,.production-story{--u:calc(100vw / 1100);font-size:calc(16 * var(--u));-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .hero,.journey-enabled .hero{width:calc(100% - 56 * var(--u));height:calc(796 * var(--u));min-height:0;display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:center;gap:0 2%;padding:calc(52 * var(--u)) 0 calc(26 * var(--u))}
  .hero .copy{padding:0 calc(26 * var(--u)) 0 calc(24 * var(--u));transform:translateY(calc(-18 * var(--u)));min-width:0}
  .hero .wordmark{font-size:calc(57 * var(--u));margin-bottom:calc(25 * var(--u))}
  .hero h1{font-size:calc(34 * var(--u))}
  .hero .description{font-size:calc(14 * var(--u));margin:calc(24 * var(--u)) 0 calc(34 * var(--u))}
  .hero .actions{flex-wrap:nowrap;gap:calc(14 * var(--u))}
  .hero .btn{flex:1 1 0;min-width:0;padding:calc(16 * var(--u)) calc(12 * var(--u));font-size:calc(13 * var(--u));border-width:calc(2 * var(--u));white-space:nowrap}
  .hero .composition{height:100%;min-height:calc(540 * var(--u));max-height:calc(900 * var(--u))}
  .hero .oil-description{left:5%;top:46%;width:32%;max-width:none;gap:calc(20 * var(--u))}
  .hero .oil-description-name{font-size:calc(24 * var(--u));overflow-wrap:normal}
  .hero .oil-description .product-text{font-size:calc(14 * var(--u))}
  .hero .oil-price-line{flex-wrap:nowrap;gap:calc(5 * var(--u)) calc(9 * var(--u));margin-top:calc(4 * var(--u))}
  .hero .oil-price{font-size:calc(24 * var(--u))}
  .hero .oil-price-volume{font-size:calc(11 * var(--u))}
  .hero .oil-switcher{bottom:calc(4 * var(--u));gap:calc(6 * var(--u));padding:calc(6 * var(--u))}
  .hero .oil-counter{min-width:calc(52 * var(--u));font-size:calc(12 * var(--u));letter-spacing:calc(1 * var(--u))}
  .hero .oil-step,.hero .product-link{width:calc(38 * var(--u));height:calc(38 * var(--u));font-size:calc(22 * var(--u))}
  .hero .product-link{margin-left:calc(4 * var(--u))}
  .hero .product-link span{font-size:calc(15 * var(--u))}
  .hero .story-jump,.production-story .story-jump{gap:calc(18 * var(--u));padding:calc(13 * var(--u)) 0;font-size:calc(14 * var(--u))}
  .hero .story-jump{left:calc(24 * var(--u));bottom:calc(26 * var(--u))}
  .story-board .story-jump{bottom:calc(12 * var(--u))}
  .story-jump span{font-size:calc(23 * var(--u))}
  .hero .sun{left:42%;width:82%;height:74%}
  .hero .ingredient-art{inset:0 0 11%}
  .hero .botanical-plate{--plant-scale:1.12;--plant-x:-4px;--plant-y:8px}
  .hero .plate-sunflower{--plant-x:-18px}
  .hero .plate-apricot,.hero .plate-walnut{--plant-x:-16px}
  .hero .botanical-plate .seed-detail{transform:none}
  .hero .seed-field{inset:0 calc(-20 * var(--u))}
  .hero .ambient-seed{display:block;left:var(--seed-x);top:var(--seed-y);width:min(var(--seed-size),5vw)}
  .hero .bottle-shadow{height:calc(16 * var(--u));filter:blur(calc(12 * var(--u)))}

  .production-story{width:calc(100% - 64 * var(--u));margin:calc(80 * var(--u)) auto 0}
  .story-board{height:max(100svh,calc(900 * var(--u)));min-height:0;display:block;padding:0}
  .story-layout{display:block;position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:calc(900 * var(--u))}
  .story-heading{position:absolute;left:5%;top:calc(54 * var(--u));max-width:calc(640 * var(--u))}
  .story-heading h2{font-size:calc(39 * var(--u))}
  .story-heading .story-eyebrow{font-size:calc(11 * var(--u));margin-bottom:calc(16 * var(--u))}
  .story-lead{font-size:calc(22 * var(--u));margin-bottom:calc(22 * var(--u))}
  .story-bottle-anchor{position:absolute;left:var(--bottle-x);top:var(--bottle-y);transform:translate(-50%,-50%);width:34%;height:var(--bottle-h)}
  .story-ground{display:block;width:calc(160 * var(--u));height:calc(16 * var(--u));top:calc(var(--bottle-y) + var(--bottle-h)/2 - 16 * var(--u));filter:blur(calc(12 * var(--u)))}
  .story-bottle-caption{position:absolute;left:var(--bottle-x);top:calc(var(--bottle-y) + var(--bottle-h)/2 + 14 * var(--u));transform:translateX(-50%);gap:calc(7 * var(--u))}
  .story-bottle-caption span{font-size:calc(9 * var(--u))}
  .story-bottle-caption strong{font-size:calc(14 * var(--u))}
  .story-signature{bottom:1%;font-size:calc(10 * var(--u))}
  .story-seeds{width:calc(145 * var(--u))}
  .story-facts li{grid-template-columns:calc(28 * var(--u)) 1fr;gap:calc(10 * var(--u));font-size:calc(15 * var(--u))}
  .story-facts li>span{font-size:calc(10 * var(--u));padding-top:calc(3 * var(--u))}
  .story-facts p{font-size:calc(13 * var(--u));margin-top:calc(6 * var(--u))}

  .storage-board{--bottle-h:calc(570 * var(--u))}
  .storage-copy{position:absolute;left:5%;top:30%;width:25%;max-width:none}
  .storage-copy p:not(.story-lead){font-size:calc(15 * var(--u));line-height:1.75}
  .storage-copy p+p:not(.story-lead){margin-top:calc(18 * var(--u))}
  .storage-figure{position:absolute;right:2%;top:10%;width:25%}
  .storage-figure img{height:calc(270 * var(--u))}
  .storage-figure figcaption{padding:calc(12 * var(--u)) 0;font-size:calc(10 * var(--u))}
  .storage-note{position:absolute;left:5%;bottom:8%;width:25%;padding-top:calc(18 * var(--u))}
  .storage-note span{font-size:calc(10 * var(--u));margin-bottom:calc(12 * var(--u))}
  .storage-note p{max-width:calc(240 * var(--u));font-size:calc(17 * var(--u))}
  .storage-facts{position:absolute;right:2%;bottom:7%;width:25%}
  .storage-facts li{padding:calc(13 * var(--u)) 0;font-size:calc(15 * var(--u))}
  .storage-seeds{left:33%;top:auto;bottom:14%}

  .press-board{--bottle-h:calc(540 * var(--u))}
  .press-study{position:absolute;left:3%;top:24%;width:23%}
  .press-study img{height:calc(360 * var(--u))}
  .press-study figcaption,.value-study figcaption{margin-top:calc(10 * var(--u));padding-top:calc(12 * var(--u));font-size:calc(10 * var(--u))}
  .press-copy{position:absolute;right:3%;top:24%;width:30%;max-width:none}
  .press-copy>p:not(.story-lead){font-size:calc(14 * var(--u))}
  .press-steps{margin-top:calc(26 * var(--u))}
  .press-steps li{grid-template-columns:calc(24 * var(--u)) 1fr;gap:calc(10 * var(--u));padding:calc(17 * var(--u)) 0}
  .press-steps li>span{font-size:calc(10 * var(--u));padding-top:calc(3 * var(--u))}
  .press-steps h3{font-size:calc(16 * var(--u))}
  .press-steps p{font-size:calc(13 * var(--u));margin-top:calc(7 * var(--u))}
  .press-film{position:absolute;left:3%;bottom:8%;width:24%;gap:calc(16 * var(--u));padding:calc(12 * var(--u)) 0}
  .press-film>img{width:calc(76 * var(--u));height:calc(100 * var(--u))}
  .press-film-kicker{font-size:calc(9 * var(--u));margin-bottom:calc(10 * var(--u))}
  .press-film strong{font-size:calc(16 * var(--u))}
  .press-film small{font-size:calc(10 * var(--u));margin-top:calc(10 * var(--u))}
  .press-play{width:calc(35 * var(--u));height:calc(35 * var(--u));font-size:calc(21 * var(--u))}
  .press-footnote{position:absolute;right:3%;bottom:7%;width:30%;font-size:calc(11 * var(--u))}
  .press-seeds{left:55%;right:auto;top:26%;bottom:auto;width:calc(105 * var(--u))}

  .value-board{--bottle-h:calc(500 * var(--u))}
  .value-copy{position:absolute;left:5%;top:27%;width:25%;max-width:none}
  .value-copy>p:not(.story-lead){font-size:calc(14 * var(--u));line-height:1.7}
  .value-study{position:absolute;left:31%;top:16%;width:25%}
  .value-study img{height:calc(378 * var(--u))}
  .value-facts{position:absolute;left:5%;bottom:8%;width:46%;grid-template-columns:1fr 1fr;gap:calc(22 * var(--u)) calc(30 * var(--u))}
  .value-facts li{padding-top:calc(14 * var(--u))}
  .value-seeds{right:4%;top:14%;bottom:auto;width:calc(120 * var(--u))}

  .shelf-board{--bottle-h:calc(414 * var(--u));padding:0}
  .shelf-board .story-heading{position:absolute;left:5%;top:calc(54 * var(--u));max-width:46%}
  .shelf-board .story-heading h2{font-size:calc(37.4 * var(--u))}
  .shelf-copy{position:absolute;right:5%;top:calc(62 * var(--u));width:28%;max-width:none}
  .shelf-copy .story-lead{font-size:calc(22 * var(--u));margin-bottom:calc(14 * var(--u))}
  .shelf-copy>p:not(.story-lead){font-size:calc(14 * var(--u))}
  .shelf-link{gap:calc(22 * var(--u));margin-top:calc(22 * var(--u));padding-bottom:calc(9 * var(--u));font-size:calc(14 * var(--u))}
  .shelf-link span{font-size:calc(18 * var(--u))}
  .shelf-showcase{position:absolute;inset:0;height:auto}
  .shelf-row{position:absolute;inset:0;height:auto;display:block}
  .shelf-slot{position:absolute;left:var(--slot-x);top:var(--bottle-y);transform:translate(-50%,-50%);width:calc(var(--bottle-h)*.44);height:var(--bottle-h)}
  .shelf-slot img{height:100%}
  .shelf-slot-2{--shelf-lift:calc(6 * var(--u))}
  .shelf-slot-empty{display:block}
  .shelf-slot:not(.shelf-slot-empty)::after{bottom:calc(var(--bottle-h)*.05);height:calc(11 * var(--u));filter:blur(calc(9 * var(--u)))}
  .shelf-label{top:calc(100% + 12 * var(--u));bottom:auto;width:auto;min-width:calc(148 * var(--u));padding-top:calc(13 * var(--u));gap:calc(8 * var(--u));white-space:nowrap}
  .shelf-label strong{font-size:calc(15 * var(--u))}
  .shelf-label span{font-size:calc(12 * var(--u))}
  .shelf-board .story-bottle-anchor{left:var(--bottle-x);top:var(--bottle-y);width:34%;height:var(--bottle-h)}
  .shelf-board .story-bottle-caption{display:none}
  .shelf-board .story-ground{display:block;top:calc(var(--bottle-y) + var(--bottle-h)*.437 - 9 * var(--u));width:calc(120 * var(--u))}
  .shelf-seeds{left:46%;top:4%;bottom:auto;width:18%;max-width:calc(220 * var(--u));opacity:.48}
  .shelf-board .story-signature{bottom:calc(22 * var(--u));font-size:calc(10 * var(--u))}
  .story-seeds+.story-seeds{width:calc(78 * var(--u))}
  .storage-seeds-extra{left:auto;right:32%;top:14%;bottom:auto}
  .press-seeds-extra{left:auto;right:6%;top:auto;bottom:12%}
  .value-seeds-extra{right:auto;left:24%;top:auto;bottom:10%}
  .shelf-seeds-extra{left:auto;right:7%;top:16%;bottom:auto}

  .followup-block{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8%;row-gap:calc(32 * var(--u));padding:calc(76 * var(--u)) 5%}
  .followup-eyebrow{font-size:calc(11 * var(--u));margin-bottom:calc(20 * var(--u))}
  .followup-block h2{font-size:calc(37.4 * var(--u))}
  .followup-copy>p{font-size:calc(16 * var(--u));margin-bottom:calc(16 * var(--u))}
  .followup-copy .followup-lead{font-size:calc(20 * var(--u));margin-bottom:calc(14 * var(--u))}
  .flour-block .followup-copy>p:last-of-type{margin-bottom:calc(22 * var(--u))}
  .followup-button{gap:calc(28 * var(--u));margin-top:calc(12 * var(--u));padding:calc(16 * var(--u)) calc(27 * var(--u));font-size:calc(14 * var(--u));white-space:nowrap}
  .followup-button span{font-size:calc(17 * var(--u))}
  .flour-grid.catalog__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(26 * var(--u));margin-top:calc(48 * var(--u))}
  .flour-grid .catalog-card{--catalog-card-radius:calc(18 * var(--u));min-width:0;max-width:none;min-height:0}
  .flour-grid .catalog-card__image{height:calc(250 * var(--u))}
  .flour-grid .catalog-card__body{padding:calc(13 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));gap:calc(5 * var(--u))}
  .flour-grid .catalog-card__title{font-size:calc(12 * var(--u));line-height:1.2}
  .flour-grid .catalog-card__tagline{font-size:calc(13 * var(--u));line-height:1.35}
  .flour-grid .catalog-card__purchase{gap:calc(8 * var(--u));padding-top:calc(4 * var(--u))}
  .flour-grid .catalog-card__purchase-main{gap:calc(10 * var(--u));padding-bottom:calc(8 * var(--u))}
  .flour-grid .catalog-card__volume-static{min-height:calc(22 * var(--u));font-size:calc(14 * var(--u))}
  .flour-grid .card-actions{margin-top:calc(10 * var(--u))}
  .flour-grid .catalog-card__action-btn{min-width:0;min-height:0;padding:calc(12 * var(--u)) calc(8 * var(--u));font-size:calc(11 * var(--u));white-space:nowrap}
}
