cssfish

отвечу в обратном порядке

2. ну видимо тем что слой смешивается с родительским и выше по дереву не лезет.
css-live.ru/articles/o-rezhimax-nalozheniya-v-css-...

Учтите, что mix-blend-mode применяется к элементу и ко всем его потомкам

т.е. если дать стиль page__header, он смешивается (и что в нем- с ним смешивается). а вот если его потомку дать стиль, то он ни с чем кроме page__header уже не смешается.

видимо так, но точной инфы конечно маловато

1. выкатить навигацию в отдельный слой на один уровень с .page__header и .content
типа того- https://jsfiddle.net/znohd8pp/3/

upd.
либо пробовать isolate, но у меня что-то на скорую руку не вышло ничего вменяемого.

ну так "ловите льва в пустыне":
1. скопируйте верстку в отд папку
2. удаляйте там все лишнее (js, css), по кусочкам (только css подключения шрифтов ессно не удалять) и смотрите, когда выправится

ту дело может быть в чем угодно, например базовый weight задан в 300 и все

можно попробовать изменить кегль на плюс-минус пиксель. но чаще это оттого что шрифт неоригинальный.

дать popup окну z-index выше левого
это точно сработает если оно (popup) в корне. если оно внутри блока какого-то, то смотреть по ситуации

если по уму, тут надо изучать css, а не БЭМ.

это заказчик должен объяснять. потому что мы вам напишем, а человек, скажем, имел в ввиду другое :))

верно вам пишут, cover/contain решает. тут нужно мыслить не картинками, а просто строить структуру блоков, а картинки натягивать фонами.

1. для многострочного текста мерять ничего не надо, тупо кликаем инструментом "текст" на текстовый слой и смотрим в панели шрифта значение line-height в px (соотв в настройках должно быть настроено на пиксели).
2. для однострочного (обычно это для заголовков) - смотрим все макеты проекта, если многострочного аналога нет, то либо спросить диза, либо набить теста в блок больше (в редакторе или отладчике) и пробовать разные Line-height. Сначала можно тот, что указан для body, т.е. базовый (+ он может быть фикс величиной или множителем), потом корректируем на глаз.
upd: если базовый lh фикс величиной, то это как раз и будет верт. ритм. но с заголовками оно не всегда хорошо.

или через псевдо с transform skew
типа того https://jsfiddle.net/v4uw6mvs/1/
при таком подходе высота всегда будет совпадать, с шириной можно играться ( и с z-index тоже )

1. потому что прописано border: 2px solid #D5CC5A
2. потому что размер margin-left: -45px; и width: 650px при контейнере в 600

текст внутри h1 заверните в span (inline-block, relative) и от него уже делаем псевдо на 100% ширины (спана)

в шопе в панели Layers встаем на векторный слой, клик правой, "quick export as svg", сохраняем.
далее в inkscape можно собрать эти svg в спрайт

хм а где связь между версткой и наполнением ? :)