Editorial-раскладка: журнальная сетка для премиум-сайта

Спроектируй раскладку страницы {{page_type}} в editorial-стиле. Не маркетинговый лендинг с грид-3-карточками, а спокойная журнальная подача: типографика — герой, всё остальное служит чтению.

1. Editorial vs маркетинговый layout

2. Сетка

// 12-колоночная асимметричная
<div className="mx-auto max-w-[1280px] grid grid-cols-12 gap-x-6 md:gap-x-8">
  <article className="col-span-12 md:col-start-2 md:col-span-7"> {/* основной столбец */}
    ...
  </article>
  <aside className="hidden md:block md:col-start-10 md:col-span-2"> {/* поля для footnotes */}
    ...
  </aside>
</div>

Правила сетки:

• Основной столбец читаемого текста — 7 колонок (≈ 65-75 символов в строке)
• Marginalia / drop quotes — отдельная узкая колонка справа
• Заголовки могут выходить на 9-10 колонок, hero — на 12 (full-bleed)
• Изображения — либо в основной колонке, либо полностью full-bleed (без gap)

3. Иерархия типографики

Line-height: 1.5 для body, 1.05 для display.

4. Editorial-блоки

• Drop cap — первая буква параграфа большая серифная (first-letter:float-left first-letter:text-7xl first-letter:font-serif first-letter:mr-2 first-letter:mt-1)
• Pull quote — фраза врезкой, серифом, центрировано или влево, без кавычек если шрифт сам визуально цитирует
• Sidenote — мелкий sans в правой узкой колонке, выровнен по абзацу
• Section rule — тонкая линия 1px разделитель + номер раздела моноширно
• Eyebrow — uppercase tracking-[0.14em] серой капителью

5. Whitespace

• Между секциями: py-24 md:py-32 (не py-16)
• Между параграфами в body: 1.2em
• Hero — занимает 80-100vh, контент дышит сверху и снизу
• НЕ ставь декоративные SVG-фоны и грид-паттерны в editorial — пусть воздух работает

6. Анти-паттерны

• ❌ Hero с 3 CTA — это marketing-layout, не editorial
• ❌ Карточки с тенями для текста — текст не нуждается в карточке
• ❌ Иконки рядом с каждым h2 — отвлечение
• ❌ Gradient overlay на full-bleed изображениях — снижает класс
• ❌ Body sans + display sans — пропадает контраст эпох
• ❌ "Узнать больше →" в каждом абзаце — один CTA в конце статьи

Формат вывода

1. Wireframe: ASCII-схема раскладки с координатами grid (col-span)
2. JSX/Tailwind скелет реального hero + body + pullquote + sidenote
3. Дизайн-токены: типографика, отступы, line-heights — таблицей
4. 3 референса: реальные страницы того же жанра с указанием что взяли