# Design Book `marketing-light-5` — Components

Инвентарь компонентов, извлечённых с editorial marketing archetype (Webflow-based). HTML-сниппеты используют токены `--ml5-*` из [`tokens.css`](tokens.css).

Ключевая эстетика: **editorial whisper** — cream ivory тело, slate-dark текст, мягчайшие тени (rgba 0.01/0.02/0.04), подчёркивания как «редакторская правка», single-source clay #d97757 для редких акцентов.

---

## 1. Pill Button (Primary / Secondary / Tertiary / Nav-variant)

Универсальная pill-кнопка с `border-radius: 100vw` (токен `--ml5-radius-round`). Три visual-роли + nav-variant, который меняет hover-поведение на clay-акцент. Текст всегда сохраняет сдержанный вес `500` (не bold) — в книге нет агрессивных CTA.

```html
<!-- Primary (default) -->
<a class="ml5-btn" href="/signup">Start free</a>

<!-- Secondary (ghost) -->
<a class="ml5-btn ml5-btn--secondary" href="/read">Read the story</a>

<!-- Tertiary (subtle) -->
<a class="ml5-btn ml5-btn--tertiary" href="/details">Model details</a>

<!-- Nav-variant (внутри шапки; hover → clay) -->
<a class="ml5-btn ml5-btn--nav" href="/download">Download app</a>

<!-- Disabled -->
<button class="ml5-btn" type="button" disabled aria-disabled="true">
  Start free
</button>
```

```css
/* Базовый pill */
.ml5-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ml5-space-2);
  padding: var(--ml5-space-3) var(--ml5-space-5);
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-m);      /* 1rem */
  font-weight: var(--ml5-font-weight-medium);    /* 500 */
  line-height: 1;
  letter-spacing: 0;
  color: var(--ml5-color-ivory-light);
  background-color: var(--ml5-color-slate-dark);
  border: 1px solid var(--ml5-color-slate-dark);
  border-radius: var(--ml5-radius-round);        /* 100vw */
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease;
}

.ml5-btn:hover {
  background-color: var(--ml5-color-slate-medium);
  border-color: var(--ml5-color-slate-medium);
}

.ml5-btn:active {
  background-color: var(--ml5-color-slate-light);
}

.ml5-btn:focus-visible {
  outline: var(--ml5-focus-width) solid var(--ml5-color-slate-dark);
  outline-offset: var(--ml5-focus-offset-outer);
}

.ml5-btn:disabled,
.ml5-btn[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* --- Secondary (ghost outline) --- */
.ml5-btn--secondary {
  background-color: transparent;
  color: var(--ml5-color-slate-dark);
}
.ml5-btn--secondary:hover {
  background-color: var(--ml5-color-slate-dark);
  color: var(--ml5-color-ivory-light);
}

/* --- Tertiary (faded border) --- */
.ml5-btn--tertiary {
  background-color: transparent;
  color: var(--ml5-color-slate-dark);
  border-color: var(--ml5-color-slate-faded-10);
}
.ml5-btn--tertiary:hover {
  background-color: var(--ml5-color-ivory-medium);
  border-color: var(--ml5-color-slate-faded-20);
}

/* --- Nav-variant (в шапке) --- */
.ml5-btn--nav:hover {
  background-color: var(--ml5-color-clay);   /* #d97757 — signature accent */
  border-color: var(--ml5-color-clay);
  color: var(--ml5-color-ivory-light);
}

/* Инверсия на тёмном фоне */
.ml5-on-dark .ml5-btn {
  background-color: var(--ml5-color-ivory-light);
  color: var(--ml5-color-slate-dark);
  border-color: var(--ml5-color-ivory-light);
}
.ml5-on-dark .ml5-btn:hover {
  background-color: var(--ml5-color-ivory-medium);
}
.ml5-on-dark .ml5-btn--secondary {
  background-color: transparent;
  color: var(--ml5-color-ivory-light);
  border-color: var(--ml5-color-ivory-faded-20);
}
.ml5-on-dark .ml5-btn--secondary:hover {
  background-color: var(--ml5-color-ivory-light);
  color: var(--ml5-color-slate-dark);
}
```

### States Matrix

| State           | Primary                                 | Secondary (ghost)                              | Tertiary                                    | Nav-variant                              |
|-----------------|-----------------------------------------|------------------------------------------------|---------------------------------------------|------------------------------------------|
| Default         | bg slate-dark, text ivory               | bg transparent, border slate-dark, text slate | bg transparent, border slate-faded-10       | bg slate-dark, text ivory                |
| Hover           | bg slate-medium                         | bg slate-dark, text ivory                      | bg ivory-medium, border slate-faded-20      | **bg clay #d97757**                      |
| Active          | bg slate-light                          | bg slate-medium                                | bg ivory-dark                               | bg clay + brightness(0.95)               |
| Focus-visible   | outline 2px slate-dark, offset 0.25rem  | outline 2px slate-dark                          | outline 2px slate-dark                      | outline 2px clay                         |
| Disabled        | opacity 0.4, pointer-events none        | opacity 0.4                                    | opacity 0.4                                 | opacity 0.4                              |

**Anti-patterns:**
- Не использовать `font-weight: 700` — это нарушит editorial-whisper тональность (96% weight 400/500).
- Не добавлять `text-transform: uppercase` — CTA остаются sentence-case («Start free», не «START FREE»).
- Не ставить тень на кнопке. В этой системе тени живут только на карточках (см. §3).
- Не смешивать clay hover с primary вариантом — clay зарезервирован за `.ml5-btn--nav`.
- Не делать выступающий `border-radius: 8px` на pill — радиус `100vw` — единственный для кнопок.

---

## 2. Editorial H1 with Underline-as-Editing

Сигнатурный приём: в H1 ключевые слова («research», «products») обёрнуты в `<span class="ml5-h1__underline">` с `text-decoration: underline`. Это декорация, не ссылка. В DOM H1 дублируется (`.ml5-h1--mirror`) для reveal-анимации underline (один слой без линии → второй поверх с линией `fadein`).

```html
<h1 class="ml5-h1">
  AI <span class="ml5-h1__underline">research</span> and <span class="ml5-h1__underline">products</span>
  that put safety at the frontier
</h1>

<!-- Визуальный mirror для reveal-анимации (aria-hidden) -->
<h1 class="ml5-h1 ml5-h1--mirror" aria-hidden="true">
  AI <span class="ml5-h1__underline">research</span> and <span class="ml5-h1__underline">products</span>
  that put safety at the frontier
</h1>
```

```css
.ml5-h1 {
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-display-xxl);   /* clamp(2.75rem, … , 4.5rem) */
  font-weight: var(--ml5-font-weight-bold);      /* 700 — только в H1 */
  line-height: var(--ml5-line-height-1-1);       /* 1.1 */
  letter-spacing: var(--ml5-letter-spacing-0-02em); /* -.02em */
  color: var(--ml5-color-slate-dark);
  text-align: left;
  text-wrap: balance;
  margin: 0;
}

.ml5-h1__underline {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;   /* 3-5px на больших кеглях */
  text-underline-offset: 0.1em;
  text-decoration-color: var(--ml5-color-slate-dark);
  text-decoration-skip-ink: none;
  /* альтернатива: text-decoration-style: wavy; */
}

/* Mirror-слой для reveal */
.ml5-h1--mirror {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: ml5-fadein 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.2s both;
}
.ml5-h1--mirror .ml5-h1__underline {
  animation: ml5-underline-draw 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.5s both;
}

@keyframes ml5-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ml5-underline-draw {
  from { text-decoration-color: transparent; }
  to   { text-decoration-color: var(--ml5-color-slate-dark); }
}

/* Ответственная раскладка */
@media (prefers-reduced-motion: reduce) {
  .ml5-h1--mirror,
  .ml5-h1--mirror .ml5-h1__underline {
    animation: none;
  }
}
```

### States Matrix

| State            | Поведение                                                        |
|------------------|------------------------------------------------------------------|
| Default          | H1 sans 700, underline 0.06em thickness, offset 0.1em            |
| On scroll-in     | `.ml5-h1--mirror` opacity 0 → 1, underline draws in              |
| Hover (если CTA) | Не применимо: H1 — не ссылка                                     |
| Dark mode        | `color: var(--ml5-color-ivory-light)`, underline такого же цвета |
| prefers-reduced-motion | mirror видим сразу без анимации                             |

**Anti-patterns:**
- Не оборачивать в `<a>` — подчёркивание здесь не «ссылка», а редакторский знак. Если нужен линк в H1 — делать отдельный класс `ml5-h1__link`.
- Не использовать `border-bottom` вместо `text-decoration` — при переносе строки border уедет в неправильное место.
- Не применять к H2/H3 — приём эксклюзивен для H1 hero.
- Не выставлять `text-decoration-thickness` в px — использовать em, иначе ломается при масштабе.

---

## 3. Release Card (Editorial)

Cream-карточка для «Latest releases» — трёхколоночная сетка с DATE (uppercase detail-xs), CATEGORY (detail-xs), serif H3 и meta-ссылкой. Hover запускает **whisper-shadow** — дорожную карту этой книги: три наложенных тени с rgba 0.01 / 0.02 / 0.04 (буквально шёпот).

```html
<div class="ml5-releases">
  <h2 class="ml5-h2">Latest releases</h2>

  <ul class="ml5-releases__grid" role="list">

    <li class="ml5-release-card">
      <a class="ml5-release-card__link" href="/news/standard-release">
        <div class="ml5-release-card__meta">
          <time class="ml5-release-card__date" datetime="2026-04-10">April 10, 2026</time>
          <span class="ml5-release-card__category">Announcements</span>
        </div>
        <h3 class="ml5-release-card__title">
          Standard model brings long-horizon agents to everyone
        </h3>
        <span class="ml5-release-card__cta">
          Read announcement
          <svg class="ml5-release-card__arrow" aria-hidden="true" width="16" height="16"><!-- arrow-right --></svg>
        </span>
      </a>
    </li>

    <li class="ml5-release-card">…</li>
    <li class="ml5-release-card">…</li>

  </ul>
</div>
```

```css
.ml5-releases__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--ml5-space-6);              /* ~2rem */
  padding: 0;
  margin: 0;
  list-style: none;
}

.ml5-release-card {
  grid-column: span 4;                  /* 12/3 = 4 col per card */
  background-color: var(--ml5-color-ivory-medium);
  border-radius: var(--ml5-radius-large); /* 16px */
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (max-width: 767px) {
  .ml5-release-card { grid-column: span 12; }
}

.ml5-release-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--ml5-space-5);
  padding: var(--ml5-space-6);
  color: var(--ml5-color-slate-dark);
  text-decoration: none;
  height: 100%;
}

.ml5-release-card__meta {
  display: flex;
  gap: var(--ml5-space-4);
  align-items: baseline;
}

.ml5-release-card__date,
.ml5-release-card__category {
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-xs);   /* 0.75rem */
  font-weight: var(--ml5-font-weight-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ml5-color-slate-light);
}

.ml5-release-card__title {
  font-family: var(--ml5-font-serif);
  font-size: var(--ml5-font-size-display-l);   /* 3rem clamp */
  font-weight: var(--ml5-font-weight-regular); /* 400 на serif */
  line-height: var(--ml5-line-height-1-1);
  letter-spacing: 0;
  color: var(--ml5-color-slate-dark);
  margin: 0;
  text-wrap: balance;
}

.ml5-release-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ml5-space-2);
  margin-top: auto;
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-m);
  font-weight: var(--ml5-font-weight-medium);
  color: var(--ml5-color-slate-dark);
  text-decoration: underline;
  text-underline-offset: 0.1em;
  transition: text-underline-offset 0.2s ease, color 0.2s ease;
}

/* --- Hover: whisper-shadow --- */
.ml5-release-card:hover {
  box-shadow:
    rgba(0, 0, 0, 0.01) 0px 2px 2px 0px,
    rgba(0, 0, 0, 0.02) 0px 4px 4px 0px,
    rgba(0, 0, 0, 0.04) 0px 16px 24px 0px;
}

.ml5-release-card:hover .ml5-release-card__title,
.ml5-release-card:hover .ml5-release-card__cta {
  color: var(--ml5-color-slate-medium);
}

.ml5-release-card:hover .ml5-release-card__cta {
  text-underline-offset: 0.2em;       /* editorial nudge */
}

.ml5-release-card__link:focus-visible {
  outline: var(--ml5-focus-width) solid var(--ml5-color-slate-dark);
  outline-offset: -2px;
  border-radius: var(--ml5-radius-large);
}
```

### States Matrix

| State           | Изменения                                                                  |
|-----------------|----------------------------------------------------------------------------|
| Default         | bg ivory-medium, без тени, title serif 400                                 |
| Hover           | whisper-shadow (три слоя rgba 0.01/0.02/0.04), title/cta → slate-medium   |
| Hover (cta)     | text-underline-offset 0.1em → 0.2em                                         |
| Focus-visible   | outline 2px slate-dark inset -2px (карточка целиком как link target)       |
| Active          | Без отдельного стиля (переход по ссылке быстрый)                           |

**Anti-patterns:**
- Не добавлять `transform: translateY(-4px)` — книга запрещает лифт. Только shadow-whisper.
- Не использовать `font-weight: 700` на title — serif 400 намеренно «книжный».
- Не делать полный uppercase на title — только мета-строка.
- Не уменьшать тень до одного слоя — сигнатура именно в трёх наложенных rgba.

---

## 4. Dark Inset Inversion Block (Flagship Initiative)

Тёмная карточка-инверсия внутри cream body. Используется **однократно на viewport** — ядро editorial-контраста. Фон slate-dark #141413, внутри может жить organic SVG (biomimicry, сетка) как бэкграунд. Text — ivory-light, H2 — serif 400 display-xl.

```html
<section class="ml5-invert" aria-labelledby="flagship-title">
  <div class="ml5-invert__inner">

    <!-- Декоративный organic SVG bg (может быть grid/biomimicry) -->
    <svg class="ml5-invert__bg" aria-hidden="true" viewBox="0 0 600 400">
      <!-- тонкая сетка ivory-faded-10 или wing-pattern -->
    </svg>

    <div class="ml5-invert__content">
      <span class="ml5-invert__eyebrow">A research collaboration</span>
      <h2 id="flagship-title" class="ml5-invert__title">Flagship Initiative</h2>
      <p class="ml5-invert__body">
        Exploring the intersection of AI safety and biological systems —
        what nature can teach us about alignment.
      </p>
      <div class="ml5-invert__actions">
        <a class="ml5-btn" href="/flagship">Read the story</a>
      </div>
    </div>

  </div>
</section>
```

```css
.ml5-invert {
  padding: var(--ml5-section-space-main) var(--ml5-site-margin);
}

.ml5-invert__inner {
  position: relative;
  max-width: var(--ml5-site-width);
  margin: 0 auto;
  padding: clamp(3rem, 1.8rem + 5vw, 5rem);
  background-color: var(--ml5-color-slate-dark);
  color: var(--ml5-color-ivory-light);
  border-radius: var(--ml5-radius-large);       /* 16px */
  overflow: hidden;
  isolation: isolate;
}

.ml5-invert__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.08;
  color: var(--ml5-color-ivory-faded-20);
  z-index: 0;
  pointer-events: none;
}

.ml5-invert__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ml5-space-5);
  max-width: 48rem;
}

.ml5-invert__eyebrow {
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-xs);
  font-weight: var(--ml5-font-weight-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ml5-color-cloud-medium);
}

.ml5-invert__title {
  font-family: var(--ml5-font-serif);
  font-size: var(--ml5-font-size-display-xl);   /* 4rem clamp */
  font-weight: var(--ml5-font-weight-regular);
  line-height: var(--ml5-line-height-1-05);
  letter-spacing: 0;
  color: var(--ml5-color-ivory-light);
  margin: 0;
}

.ml5-invert__body {
  font-family: var(--ml5-font-serif);
  font-size: var(--ml5-font-size-paragraph-m);
  font-weight: var(--ml5-font-weight-regular);
  line-height: var(--ml5-line-height-1-4);
  color: var(--ml5-color-ivory-faded-20);
  max-width: 40rem;
  margin: 0;
}

.ml5-invert__actions {
  margin-top: var(--ml5-space-3);
}

/* В тёмном контексте primary btn должна инвертироваться.
   Добавляем класс ml5-on-dark на .ml5-invert__inner, если нужно */
.ml5-invert__inner .ml5-btn {
  background-color: var(--ml5-color-ivory-light);
  color: var(--ml5-color-slate-dark);
  border-color: var(--ml5-color-ivory-light);
}
.ml5-invert__inner .ml5-btn:hover {
  background-color: var(--ml5-color-ivory-medium);
}
```

### States Matrix

| State                 | Изменения                                                     |
|-----------------------|---------------------------------------------------------------|
| Default               | bg slate-dark, text ivory-light, SVG bg opacity 0.08          |
| Scroll-in             | opacity 0 → 1, translateY(24px) → 0, ease-out 0.8s            |
| Button hover (внутри) | bg ivory-medium (инверсия primary)                            |
| Focus-visible (btn)   | outline 2px ivory-light                                       |
| Mobile                | padding сжимается до `clamp(2rem, 5vw, 3rem)`                 |

**Anti-patterns:**
- Не дублировать на одной странице — один dark-invert на viewport-экран, иначе теряется «editorial accent».
- Не класть глянцевые градиенты — фон всегда solid slate-dark.
- Не использовать `font-weight: 700` на title — serif 400.
- Не ставить `border-radius: 24+` — в этой книге карточки держатся на `--ml5-radius-large` = 16px.

---

## 5. Navigation Bar + Mega-Menu (Dropdown Desktop / Hamburger Mobile)

Фиксированный `4.25rem` nav (от `--nav--height`), прозрачный на hero → solid ivory на scroll. Desktop: hover/click на `Products`/`Learn` раскрывает dropdown с grid-layout и preview-картинкой. Mobile: hamburger → full-screen drawer с `clip-path` curtain-down анимацией (keyframes `menuOpen`/`menuClose`).

```html
<header class="ml5-nav" data-scrolled="false">
  <div class="ml5-nav__inner">

    <a class="ml5-nav__logo" href="/" aria-label="Home">
      <svg width="112" height="24" aria-hidden="true"><!-- wordmark --></svg>
    </a>

    <!-- Desktop: primary menu -->
    <nav class="ml5-nav__menu" aria-label="Primary">
      <div class="ml5-nav__item ml5-nav__item--dropdown">
        <button class="ml5-nav__link"
                aria-haspopup="true"
                aria-expanded="false"
                aria-controls="nav-dropdown-product">
          Product
          <svg class="ml5-nav__caret" aria-hidden="true" width="12" height="12"><!-- chevron --></svg>
        </button>
        <div class="ml5-nav__dropdown" id="nav-dropdown-product" role="region" hidden>
          <!-- см. компонент 8 -->
        </div>
      </div>

      <div class="ml5-nav__item ml5-nav__item--dropdown">
        <button class="ml5-nav__link" aria-haspopup="true" aria-expanded="false">
          Commitments
          <svg class="ml5-nav__caret" aria-hidden="true" width="12" height="12"></svg>
        </button>
      </div>

      <a class="ml5-nav__link" href="/research">Research</a>
      <a class="ml5-nav__link" href="/news">News</a>
      <a class="ml5-nav__link" href="/company">Company</a>
    </nav>

    <!-- CTA cluster -->
    <div class="ml5-nav__actions">
      <a class="ml5-nav__action-link" href="/login">Sign in</a>
      <a class="ml5-btn ml5-btn--nav" href="/signup">Start free</a>
    </div>

    <!-- Mobile: hamburger -->
    <button class="ml5-nav__hamburger"
            aria-label="Open menu"
            aria-expanded="false"
            aria-controls="ml5-nav-drawer">
      <span class="ml5-nav__hamburger-line"></span>
      <span class="ml5-nav__hamburger-line"></span>
    </button>

  </div>

  <!-- Mobile drawer -->
  <div class="ml5-nav__drawer" id="ml5-nav-drawer" hidden>…</div>
</header>
```

```css
.ml5-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--ml5-z-header);       /* 1000 */
  height: var(--ml5-nav-height);      /* 4.25rem */
  background-color: transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.ml5-nav[data-scrolled="true"] {
  background-color: var(--ml5-color-ivory-light);
  box-shadow:
    rgba(0, 0, 0, 0.01) 0px 2px 2px 0px,
    rgba(0, 0, 0, 0.02) 0px 4px 4px 0px;
}

.ml5-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ml5-space-6);
  height: 100%;
  max-width: var(--ml5-site-width);
  margin: 0 auto;
  padding: 0 var(--ml5-site-margin);
}

.ml5-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--ml5-space-2);
}

.ml5-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ml5-space-2);
  padding: var(--ml5-space-2) var(--ml5-space-3);
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-m);     /* 1rem */
  font-weight: var(--ml5-font-weight-regular);  /* 400 */
  color: var(--ml5-color-slate-dark);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, text-underline-offset 0.2s ease;
}

.ml5-nav__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;     /* signature hover */
  text-decoration-color: var(--ml5-color-slate-dark);
}

.ml5-nav__caret {
  transition: transform 0.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.ml5-nav__link[aria-expanded="true"] .ml5-nav__caret {
  transform: rotate(180deg);
}

.ml5-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--ml5-space-5);
}

.ml5-nav__action-link {
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-m);
  font-weight: var(--ml5-font-weight-regular);
  color: var(--ml5-color-slate-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ml5-nav__action-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Hamburger (mobile) */
.ml5-nav__hamburger {
  display: none;
  width: 24px;
  height: 24px;
  flex-direction: column;
  justify-content: center;
  gap: var(--ml5-hamburger-gap);    /* 0.4rem */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.ml5-nav__hamburger-line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--ml5-color-slate-dark);
  transition: transform 0.2s ease;
}
.ml5-nav__hamburger[aria-expanded="true"] .ml5-nav__hamburger-line:nth-child(1) {
  transform: translateY(calc(var(--ml5-hamburger-gap) / 2 + 0.5px)) rotate(45deg);
}
.ml5-nav__hamburger[aria-expanded="true"] .ml5-nav__hamburger-line:nth-child(2) {
  transform: translateY(calc(var(--ml5-hamburger-gap) / -2 - 0.5px)) rotate(-45deg);
}

@media (max-width: 991px) {
  .ml5-nav__menu,
  .ml5-nav__actions { display: none; }
  .ml5-nav__hamburger { display: flex; }
}

/* Full-screen drawer + curtain keyframes */
.ml5-nav__drawer {
  position: fixed;
  inset: var(--ml5-nav-height) 0 0 0;
  background-color: var(--ml5-color-ivory-light);
  overflow-y: auto;
  padding: var(--ml5-space-6) var(--ml5-site-margin);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  animation: ml5-menu-open 400ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.ml5-nav__drawer[data-closing="true"] {
  animation: ml5-menu-close 400ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes ml5-menu-open {
  from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes ml5-menu-close {
  from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
}
```

### States Matrix

| State                      | Изменения                                                     |
|----------------------------|---------------------------------------------------------------|
| Default (hero overlay)     | bg transparent, links slate-dark                              |
| Scrolled (`data-scrolled`) | bg ivory-light, whisper-shadow (2 слоя)                       |
| Link hover                 | text underline, offset 0.2em                                  |
| Dropdown open              | caret rotate 180°, dropdown opacity 0→1 200ms cubic           |
| Hamburger open             | drawer clip-path curtain 400ms, lines cross 45°               |
| Focus-visible (link)       | outline 2px slate-dark, offset 0.25rem                        |
| Drawer close               | reversed curtain, 400ms                                       |

**Anti-patterns:**
- Не включать `background-color` в transition на hover ссылок — signature именно в underline-offset, не в подсветке.
- Не использовать `font-weight: 500` в навигации — **regular 400** (в отличие от большинства сайтов).
- Не ставить иконки рядом с ссылками — nav чисто текстовый (кроме caret-chevron).
- `.ml5-btn--nav` — единственная кнопка с clay hover. Не применять clay к `.ml5-nav__link`.

---

## 6. Footer Mega-Menu (Slate-dark + 8 Column Groups)

Большой финальный блок. Фон slate-dark, текст ivory-light. `footer_grid` — 12 колонок с gap `~3.4rem`. 8 тематических групп (Product / Products / Models / Solutions / Platform / Resources / Company / Legal). Внизу small-print + cookie choices + language switcher.

```html
<footer class="ml5-footer">
  <div class="ml5-footer__inner">

    <div class="ml5-footer__grid">

      <div class="ml5-footer__group">
        <h4 class="ml5-footer__heading">Product</h4>
        <ul class="ml5-footer__list" role="list">
          <li><a class="ml5-footer__link" href="/product">Product</a></li>
          <li><a class="ml5-footer__link" href="/product-code">Product Code</a></li>
          <li><a class="ml5-footer__link" href="/product-code-enterprise">Product Code for Enterprise</a></li>
          <li><a class="ml5-footer__link" href="/skills">Skills</a></li>
          <li><a class="ml5-footer__link" href="/pricing">Pricing</a></li>
        </ul>
      </div>

      <div class="ml5-footer__group">
        <h4 class="ml5-footer__heading">Models</h4>
        <ul class="ml5-footer__list" role="list">
          <li><a class="ml5-footer__link" href="/flagship">Flagship</a></li>
          <li><a class="ml5-footer__link" href="/standard">Standard</a></li>
          <li><a class="ml5-footer__link" href="/compact">Compact</a></li>
        </ul>
      </div>

      <div class="ml5-footer__group">
        <h4 class="ml5-footer__heading">Solutions</h4>
        <ul class="ml5-footer__list" role="list">
          <li><a class="ml5-footer__link" href="/agents">AI agents</a></li>
          <li><a class="ml5-footer__link" href="/coding">Coding</a></li>
          <li><a class="ml5-footer__link" href="/healthcare">Healthcare</a></li>
          <li><a class="ml5-footer__link" href="/government">Government</a></li>
        </ul>
      </div>

      <!-- …ещё 5 групп -->

    </div>

    <div class="ml5-footer__bottom">
      <small class="ml5-footer__copyright">© Example Co. All rights reserved.</small>
      <div class="ml5-footer__legal">
        <a class="ml5-footer__link" href="/privacy">Privacy choices</a>
        <a class="ml5-footer__link" href="/terms">Terms of service</a>
        <button class="ml5-footer__link" type="button" data-open="cookie-banner">Customize cookie settings</button>
      </div>
      <div class="ml5-footer__locale">
        <button class="ml5-footer__lang" type="button" aria-haspopup="listbox">English (US)</button>
      </div>
    </div>

  </div>
</footer>
```

```css
.ml5-footer {
  background-color: var(--ml5-color-slate-dark);
  color: var(--ml5-color-ivory-light);
  padding: var(--ml5-section-space-medium) var(--ml5-site-margin) var(--ml5-space-6);
}

.ml5-footer__inner {
  max-width: var(--ml5-site-width);
  margin: 0 auto;
}

.ml5-footer__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3.4rem;
  padding-bottom: var(--ml5-space-9);
  border-bottom: 1px solid var(--ml5-color-ivory-faded-10);
}

.ml5-footer__group {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: var(--ml5-space-4);
}

@media (max-width: 991px) { .ml5-footer__group { grid-column: span 6; } }
@media (max-width: 479px) { .ml5-footer__group { grid-column: span 12; } }

.ml5-footer__heading {
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-xs);
  font-weight: var(--ml5-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ml5-color-cloud-medium);
  margin: 0;
}

.ml5-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--ml5-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ml5-footer__link {
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-m);
  font-weight: var(--ml5-font-weight-regular);
  color: var(--ml5-color-ivory-light);
  text-decoration: none;
  transition: text-underline-offset 0.2s ease, text-decoration-color 0.2s ease;
}

.ml5-footer__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;      /* чуть больше чем в nav */
  text-decoration-color: var(--ml5-color-ivory-light);
}

.ml5-footer__link:focus-visible {
  outline: var(--ml5-focus-width) solid var(--ml5-color-ivory-light);
  outline-offset: var(--ml5-focus-offset-outer);
}

.ml5-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ml5-space-5);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--ml5-space-6);
  font-size: var(--ml5-font-size-detail-s);
  color: var(--ml5-color-cloud-medium);
}

.ml5-footer__legal {
  display: flex;
  gap: var(--ml5-space-5);
}
```

### States Matrix

| State                   | Изменения                                                   |
|-------------------------|-------------------------------------------------------------|
| Default                 | bg slate-dark, links ivory-light, headings cloud-medium     |
| Link hover              | underline, offset **0.25em** (больше чем nav 0.2em)         |
| Link focus-visible      | outline 2px ivory-light                                     |
| Mobile (991-)           | 4 cols → 2 (span 6)                                         |
| Mobile (479-)           | 2 cols → 1 (span 12)                                        |
| Language switcher hover | underline + offset 0.25em                                   |

**Anti-patterns:**
- Не уменьшать gap ниже `2rem` — разреженная сетка — часть editorial-прочтения.
- Не раскрашивать headings — только cloud-medium (средне-серый).
- Не использовать разные weights в колонках — regular 400 везде.
- Не ставить иконки соцсетей в body footer — если нужны, отдельная секция над `footer__bottom`.

---

## 7. Cookie Consent Banner (Dark Modal)

Плавающий тёмный баннер, привязан к правому нижнему углу. Повторяет dark-invert эстетику (§4): slate-dark bg, ivory-light текст, radius `--ml5-radius-large` = 16px. Три CTA: Reject / Customize / Accept — в порядке возрастания веса (tertiary → secondary → primary).

```html
<aside class="ml5-cookie"
       role="dialog"
       aria-live="polite"
       aria-labelledby="cookie-title">
  <div class="ml5-cookie__inner">

    <h3 id="cookie-title" class="ml5-cookie__title">Privacy choices</h3>

    <p class="ml5-cookie__body">
      We use cookies to deliver and improve our services, analyse site usage,
      and personalise your experience. You can change your choices at any time.
    </p>

    <div class="ml5-cookie__actions">
      <button class="ml5-btn ml5-btn--tertiary" type="button">Reject all cookies</button>
      <button class="ml5-btn ml5-btn--secondary" type="button">Customize cookie settings</button>
      <button class="ml5-btn" type="button">Accept all cookies</button>
    </div>

    <button class="ml5-cookie__close" type="button" aria-label="Dismiss banner">
      <svg width="16" height="16" aria-hidden="true"><!-- x --></svg>
    </button>

  </div>
</aside>
```

```css
.ml5-cookie {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: 480px;
  width: calc(100% - 32px);
  z-index: 2000;
  animation: ml5-fadein 0.3s ease-out;
}

.ml5-cookie__inner {
  position: relative;
  padding: var(--ml5-space-6);
  background-color: var(--ml5-color-slate-dark);
  color: var(--ml5-color-ivory-light);
  border-radius: var(--ml5-radius-large);       /* 16px */
  box-shadow:
    rgba(0, 0, 0, 0.01) 0px 2px 2px 0px,
    rgba(0, 0, 0, 0.02) 0px 4px 4px 0px,
    rgba(0, 0, 0, 0.04) 0px 16px 24px 0px;
}

.ml5-cookie__title {
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-xl);    /* 1.25rem */
  font-weight: var(--ml5-font-weight-medium);
  margin: 0 0 var(--ml5-space-3) 0;
  color: var(--ml5-color-ivory-light);
}

.ml5-cookie__body {
  font-family: var(--ml5-font-serif);
  font-size: var(--ml5-font-size-detail-s);
  font-weight: var(--ml5-font-weight-regular);
  line-height: var(--ml5-line-height-1-4);
  color: var(--ml5-color-ivory-faded-20);
  margin: 0 0 var(--ml5-space-5) 0;
}

.ml5-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ml5-space-3);
  align-items: center;
}

/* В dark-контексте primary btn инвертируется; tertiary/secondary уже корректные */
.ml5-cookie .ml5-btn {
  background-color: var(--ml5-color-ivory-light);
  color: var(--ml5-color-slate-dark);
  border-color: var(--ml5-color-ivory-light);
}
.ml5-cookie .ml5-btn:hover {
  background-color: var(--ml5-color-ivory-medium);
}
.ml5-cookie .ml5-btn--secondary {
  background-color: transparent;
  color: var(--ml5-color-ivory-light);
  border-color: var(--ml5-color-ivory-faded-20);
}
.ml5-cookie .ml5-btn--secondary:hover {
  background-color: var(--ml5-color-ivory-light);
  color: var(--ml5-color-slate-dark);
}
.ml5-cookie .ml5-btn--tertiary {
  background-color: transparent;
  color: var(--ml5-color-cloud-medium);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.ml5-cookie .ml5-btn--tertiary:hover {
  color: var(--ml5-color-ivory-light);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ml5-cookie__close {
  position: absolute;
  top: var(--ml5-space-4);
  right: var(--ml5-space-4);
  width: 24px; height: 24px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ml5-color-cloud-medium);
  cursor: pointer;
}
.ml5-cookie__close:hover { color: var(--ml5-color-ivory-light); }

@media (max-width: 479px) {
  .ml5-cookie { right: 8px; bottom: 8px; }
  .ml5-cookie__actions { flex-direction: column; align-items: stretch; }
}
```

### States Matrix

| State                 | Изменения                                      |
|-----------------------|------------------------------------------------|
| Default               | entry fadein 0.3s, shadow whisper              |
| Accept hover          | bg ivory-medium                                |
| Customize hover       | bg ivory-light, text slate-dark (inversion)    |
| Reject hover          | text cloud-medium → ivory-light, underline 0.2em |
| Close (dismiss)       | fadeout 0.2s                                    |
| Mobile (479-)         | actions column, full-width buttons             |

**Anti-patterns:**
- Не центрировать баннер — всегда правый нижний угол, не modal overlay.
- Не делать «Accept» красным или зелёным — primary остаётся primary (ivory на dark).
- Не блокировать скролл страницы — баннер живёт сбоку, не перекрывает контент.
- Не прятать «Reject» (dark-pattern). Все 3 кнопки равно-доступны.

---

## 8. Nav Dropdown Mega-Menu (Desktop)

Разворачивается по hover/click на trigger-линке в шапке. Контент: **2-колоночная сетка** — левая колонка preview-картинка/промо, правая — список ссылок с подписями. Анимация opacity 0→1 за 200ms cubic-bezier.

```html
<div class="ml5-nav__dropdown" id="nav-dropdown-product" role="region" hidden>
  <div class="ml5-nav__dropdown-inner">

    <a class="ml5-nav__dropdown-feature" href="/standard-model">
      <img src="/assets/model-preview.jpg" alt="Standard model" class="ml5-nav__dropdown-img">
      <span class="ml5-nav__dropdown-feature-eyebrow">New</span>
      <span class="ml5-nav__dropdown-feature-title">Standard model</span>
      <span class="ml5-nav__dropdown-feature-desc">The fastest, most agentic model yet.</span>
    </a>

    <ul class="ml5-nav__dropdown-list" role="list">
      <li><a class="ml5-nav__dropdown-link" href="/product-code">
        <span class="ml5-nav__dropdown-link-title">Product Code</span>
        <span class="ml5-nav__dropdown-link-desc">A delegate-grade coding agent</span>
      </a></li>
      <li><a class="ml5-nav__dropdown-link" href="/product-chrome">
        <span class="ml5-nav__dropdown-link-title">Product for Chrome</span>
        <span class="ml5-nav__dropdown-link-desc">Browse and act on the web</span>
      </a></li>
      <li><a class="ml5-nav__dropdown-link" href="/product-slack">
        <span class="ml5-nav__dropdown-link-title">Product for Slack</span>
        <span class="ml5-nav__dropdown-link-desc">Work where your team works</span>
      </a></li>
      <li><a class="ml5-nav__dropdown-link" href="/skills">
        <span class="ml5-nav__dropdown-link-title">Skills</span>
        <span class="ml5-nav__dropdown-link-desc">Reusable capability packs</span>
      </a></li>
    </ul>

  </div>
</div>
```

```css
.ml5-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--ml5-color-ivory-light);
  border-top: 1px solid var(--ml5-color-slate-faded-10);
  box-shadow:
    rgba(0, 0, 0, 0.01) 0px 2px 2px 0px,
    rgba(0, 0, 0, 0.02) 0px 4px 4px 0px,
    rgba(0, 0, 0, 0.04) 0px 16px 24px 0px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.ml5-nav__item--dropdown[data-open="true"] .ml5-nav__dropdown,
.ml5-nav__item--dropdown:hover .ml5-nav__dropdown {
  opacity: 1;
  pointer-events: auto;
}

.ml5-nav__dropdown-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--ml5-space-7);
  max-width: var(--ml5-site-width);
  margin: 0 auto;
  padding: var(--ml5-space-6) var(--ml5-site-margin);
  /* из parse-css-rules: padding 20/20/20/40 в Webflow-оригинале */
}

.ml5-nav__dropdown-feature {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: var(--ml5-space-2);
  padding: var(--ml5-space-5);
  background-color: var(--ml5-color-ivory-medium);
  border-radius: var(--ml5-radius-large);
  color: var(--ml5-color-slate-dark);
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
.ml5-nav__dropdown-feature:hover {
  box-shadow:
    rgba(0, 0, 0, 0.01) 0px 2px 2px 0px,
    rgba(0, 0, 0, 0.02) 0px 4px 4px 0px,
    rgba(0, 0, 0, 0.04) 0px 16px 24px 0px;
}

.ml5-nav__dropdown-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--ml5-radius-main);   /* 8px */
}

.ml5-nav__dropdown-feature-eyebrow {
  font-size: var(--ml5-font-size-detail-xs);
  font-weight: var(--ml5-font-weight-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ml5-color-clay);           /* единственный акцент */
}

.ml5-nav__dropdown-feature-title {
  font-family: var(--ml5-font-serif);
  font-size: var(--ml5-font-size-display-s);
  font-weight: var(--ml5-font-weight-regular);
  line-height: var(--ml5-line-height-1-1);
}

.ml5-nav__dropdown-feature-desc {
  font-family: var(--ml5-font-serif);
  font-size: var(--ml5-font-size-detail-m);
  font-weight: var(--ml5-font-weight-regular);
  color: var(--ml5-color-slate-medium);
}

.ml5-nav__dropdown-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ml5-space-2) var(--ml5-space-5);
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

.ml5-nav__dropdown-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--ml5-space-3) var(--ml5-space-4);
  border-radius: var(--ml5-radius-main);
  color: var(--ml5-color-slate-dark);
  text-decoration: none;
  transition: background-color 0.2s ease, text-underline-offset 0.2s ease;
}

.ml5-nav__dropdown-link-title {
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-m);
  font-weight: var(--ml5-font-weight-medium);
}

.ml5-nav__dropdown-link-desc {
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-s);
  font-weight: var(--ml5-font-weight-regular);
  color: var(--ml5-color-slate-light);
}

.ml5-nav__dropdown-link:hover .ml5-nav__dropdown-link-title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--ml5-color-slate-dark);
}
```

### States Matrix

| State                    | Изменения                                                       |
|--------------------------|-----------------------------------------------------------------|
| Closed                   | opacity 0, pointer-events none                                  |
| Opening (hover/click)    | opacity 0 → 1, 200ms cubic-bezier(0.77, 0, 0.175, 1)            |
| Closing (mouse-leave)    | opacity → 0 с delay 200ms (чтобы не терялся на зазоре)          |
| Link hover               | title underline + offset 0.2em                                  |
| Feature hover            | whisper-shadow                                                  |
| Focus-visible            | outline 2px slate-dark внутри link-блока                         |

**Anti-patterns:**
- Не превращать в 3+ колонки — 2 колонки (промо + список) — подпись книги.
- Не использовать цветной background hover для ссылок — только underline (editorial жест).
- Не закрывать dropdown мгновенно — делать 200ms задержку, иначе теряется на движении между trigger и контентом.
- Не ставить уровень вложенности глубже 2 — без sub-sub меню.

---

## 9. Chip / Tab Pill (для фильтров)

Полноценный «таб-пилюля» с border-radius round. Используется в listing-страницах (News, Research) как фильтр категорий. Класс `.ml5-chip.is-tab` из оригинала. Hover-состояние вытекает из token `button-primary-hover`.

```html
<ul class="ml5-chips" role="list">
  <li><button class="ml5-chip ml5-chip--active" type="button" aria-pressed="true">All</button></li>
  <li><button class="ml5-chip" type="button" aria-pressed="false">Announcements</button></li>
  <li><button class="ml5-chip" type="button" aria-pressed="false">Research</button></li>
  <li><button class="ml5-chip" type="button" aria-pressed="false">Policy</button></li>
  <li><button class="ml5-chip" type="button" aria-pressed="false">Interpretability</button></li>
</ul>
```

```css
.ml5-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ml5-space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.ml5-chip {
  padding: var(--ml5-space-2) var(--ml5-space-4);
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-s);
  font-weight: var(--ml5-font-weight-regular);
  color: var(--ml5-color-slate-dark);
  background-color: transparent;
  border: 1px solid var(--ml5-color-slate-faded-10);
  border-radius: var(--ml5-radius-round);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ml5-chip:hover {
  background-color: var(--ml5-color-slate-medium);
  color: var(--ml5-color-ivory-light);
  border-color: var(--ml5-color-slate-medium);
}

.ml5-chip:focus-visible {
  outline: var(--ml5-focus-width) solid var(--ml5-color-slate-dark);
  outline-offset: var(--ml5-focus-offset-outer);
}

.ml5-chip--active,
.ml5-chip[aria-pressed="true"] {
  background-color: var(--ml5-color-slate-dark);
  color: var(--ml5-color-ivory-light);
  border-color: var(--ml5-color-slate-dark);
}

.ml5-chip--active:hover,
.ml5-chip[aria-pressed="true"]:hover {
  background-color: var(--ml5-color-slate-medium);
  border-color: var(--ml5-color-slate-medium);
}
```

### States Matrix

| State              | Изменения                                            |
|--------------------|------------------------------------------------------|
| Default            | bg transparent, border slate-faded-10, text slate-dark |
| Hover              | bg slate-medium, text ivory                         |
| Active / pressed   | bg slate-dark, text ivory                            |
| Active + hover     | bg slate-medium                                      |
| Focus-visible      | outline 2px slate-dark offset 0.25rem                |
| Disabled           | opacity 0.4, pointer-events none                     |

**Anti-patterns:**
- Не делать цветным (`color: clay`) — чипы нейтральные, акцент только на активном.
- Не использовать `border-radius: 8px` — pill (100vw) — условие.
- Не ставить иконки внутри — текст only.
- Максимум 6-7 чипов в ряду; больше — `overflow-x: auto` + snap.

---

## 10. Article-list Item (для Research / News listing)

Full-width строка с editorial-разметкой: дата слева, serif title посередине (span flex-grow), автор и chevron справа. Нижняя граница `slate-faded-10` — тонкая линия между записями. Hover: color → slate-medium (без underline — подпись этой книги в list-режиме).

```html
<ul class="ml5-article-list" role="list">

  <li class="ml5-article-list__item">
    <a class="ml5-article-list__link" href="/research/sleeper-agents">
      <time class="ml5-article-list__date" datetime="2026-04-12">April 12, 2026</time>
      <h3 class="ml5-article-list__title">Sleeper agents: training deceptive LLMs that persist through safety training</h3>
      <span class="ml5-article-list__author">Evan Hubinger et al.</span>
      <svg class="ml5-article-list__chevron" aria-hidden="true" width="16" height="16"><!-- chevron-right --></svg>
    </a>
  </li>

  <li class="ml5-article-list__item">…</li>
  <li class="ml5-article-list__item">…</li>

</ul>
```

```css
.ml5-article-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--ml5-color-slate-faded-10);
}

.ml5-article-list__item {
  border-bottom: 1px solid var(--ml5-color-slate-faded-10);
}

.ml5-article-list__link {
  display: grid;
  grid-template-columns: 160px 1fr auto 24px;
  gap: var(--ml5-space-5);
  align-items: baseline;
  padding: var(--ml5-space-6) 0;
  color: var(--ml5-color-slate-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ml5-article-list__date {
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-s);
  font-weight: var(--ml5-font-weight-regular);
  color: var(--ml5-color-slate-light);
}

.ml5-article-list__title {
  font-family: var(--ml5-font-serif);
  font-size: var(--ml5-font-size-display-s);   /* 1.5rem */
  font-weight: var(--ml5-font-weight-regular); /* 400 */
  line-height: var(--ml5-line-height-1-3);
  margin: 0;
  text-wrap: balance;
}

.ml5-article-list__author {
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-s);
  font-weight: var(--ml5-font-weight-regular);
  color: var(--ml5-color-slate-light);
  white-space: nowrap;
}

.ml5-article-list__chevron {
  color: var(--ml5-color-slate-light);
  transition: transform 0.2s ease, color 0.2s ease;
  align-self: center;
}

/* --- Hover --- */
.ml5-article-list__link:hover {
  color: var(--ml5-color-slate-medium);
}

.ml5-article-list__link:hover .ml5-article-list__chevron {
  transform: translateX(4px);
  color: var(--ml5-color-slate-dark);
}

.ml5-article-list__link:focus-visible {
  outline: var(--ml5-focus-width) solid var(--ml5-color-slate-dark);
  outline-offset: var(--ml5-focus-offset-outer);
}

/* Mobile: дата уходит в первую строку, title — во вторую */
@media (max-width: 767px) {
  .ml5-article-list__link {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date chevron"
      "title title"
      "author author";
    gap: var(--ml5-space-2);
  }
  .ml5-article-list__date { grid-area: date; }
  .ml5-article-list__title { grid-area: title; font-size: var(--ml5-font-size-display-xs); }
  .ml5-article-list__author { grid-area: author; }
  .ml5-article-list__chevron { grid-area: chevron; }
}
```

### States Matrix

| State           | Изменения                                      |
|-----------------|------------------------------------------------|
| Default         | text slate-dark, chevron slate-light           |
| Hover           | text slate-medium, chevron slate-dark + translateX(4px) |
| Focus-visible   | outline 2px slate-dark                         |
| Mobile          | grid стекается вертикально (date/title/author) |

**Anti-patterns:**
- Не добавлять `text-decoration: underline` на hover title — здесь только color shift. Underline живёт в nav/footer.
- Не ставить box-shadow на строку — list-режим намеренно «плоский».
- Не использовать border-left для visual accent — только border-bottom единого токена.
- Не хардкодить date format — `<time datetime="…">` + читаемая строка.

---

## 11. Mission Statement Block (Editorial Prose)

Центрированная колонка max-width ~40rem с крупным serif H2 и длинным serif параграфом. Используется как завершение секции с mission-statement. Опциональная декоративная горизонтальная линия `slate-faded-10` сверху или снизу.

```html
<section class="ml5-mission" aria-labelledby="mission-title">
  <div class="ml5-mission__inner">

    <hr class="ml5-mission__divider" aria-hidden="true">

    <h2 id="mission-title" class="ml5-mission__title">
      We build AI to serve humanity's long-term well-being.
    </h2>

    <p class="ml5-mission__body">
      We believe AI will have a vast impact on the world. The company is dedicated
      to building systems that people can rely on and generating research about
      the opportunities and risks of AI.
    </p>

    <div class="ml5-mission__actions">
      <a class="ml5-btn ml5-btn--secondary" href="/company">Our approach</a>
    </div>

  </div>
</section>
```

```css
.ml5-mission {
  padding: var(--ml5-section-space-main) var(--ml5-site-margin);
  background-color: var(--ml5-color-ivory-light);
}

.ml5-mission__inner {
  max-width: 40rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--ml5-space-5);
  text-align: left;
}

.ml5-mission__divider {
  width: 100%;
  height: 1px;
  border: 0;
  background-color: var(--ml5-color-slate-faded-10);
  margin: 0 0 var(--ml5-space-6) 0;
}

.ml5-mission__title {
  font-family: var(--ml5-font-serif);
  font-size: var(--ml5-font-size-display-xl);   /* clamp(2.5rem, …, 4rem) */
  font-weight: var(--ml5-font-weight-regular);  /* 400 */
  line-height: var(--ml5-line-height-1-1);
  letter-spacing: 0;
  color: var(--ml5-color-slate-dark);
  margin: 0;
  text-wrap: balance;
}

.ml5-mission__body {
  font-family: var(--ml5-font-serif);
  font-size: var(--ml5-font-size-paragraph-l);  /* 1.5rem */
  font-weight: var(--ml5-font-weight-regular);
  line-height: var(--ml5-line-height-1-5);      /* 1.5 — editorial */
  color: var(--ml5-color-slate-medium);
  margin: 0;
}

.ml5-mission__actions {
  margin-top: var(--ml5-space-3);
}
```

### States Matrix

| State            | Изменения                                       |
|------------------|-------------------------------------------------|
| Default          | bg ivory-light, title serif 400, body serif 400 |
| Scroll-in        | opacity 0→1, translateY(24px)→0, 0.8s cubic     |
| Mobile           | font-size display-xl клампится до ~2.5rem       |
| prefers-reduced-motion | без translateY, только opacity fade      |

**Anti-patterns:**
- Не центрировать текст (`text-align: center`) — editorial-проза всегда left-aligned для читаемости.
- Не использовать sans-serif — этот блок — единственное место, где serif paragraph-l работает с полным весом тишины.
- Не добавлять border вокруг блока — divider сверху/снизу max.
- Не ставить bold/italic на отдельные слова — единый ровный вес 400.

---

## 12. Terminal CTA (code-block with callable action)

Редкий, но сигнатурный элемент: «терминал-ссылка» — псевдо-команда на cloud-light bg, которая на hover уходит в cloud-dark. В оригинале встречается в `.terminal_cta` / `.terminal_cta.cc-result` (для product-code страницы).

```html
<div class="ml5-terminal">
  <code class="ml5-terminal__prompt">$ npm install @example/product-code</code>
  <button class="ml5-terminal__copy" type="button" aria-label="Copy command">
    <svg width="16" height="16" aria-hidden="true"><!-- clipboard --></svg>
    <span class="ml5-terminal__copy-label">Copy</span>
  </button>
</div>

<!-- Result variant (cc-result) -->
<div class="ml5-terminal ml5-terminal--result">
  <code class="ml5-terminal__prompt">✓ product-code@2.0.0 installed</code>
</div>
```

```css
.ml5-terminal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ml5-space-4);
  padding: var(--ml5-space-4) var(--ml5-space-5);
  background-color: var(--ml5-color-cloud-light);   /* #d1cfc5 */
  border-radius: var(--ml5-radius-main);            /* 8px */
  font-family: var(--ml5-font-mono);
  font-size: var(--ml5-font-size-monospace);        /* 1.125rem */
  color: var(--ml5-color-slate-dark);
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.ml5-terminal:hover {
  background-color: var(--ml5-color-cloud-light);
  /* cloud-light на hover пока же; при клике → light-dark */
}

.ml5-terminal:active {
  background-color: var(--ml5-color-cloud-dark);    /* #87867f */
  color: var(--ml5-color-ivory-light);
}

.ml5-terminal__prompt {
  font-family: inherit;
  font-weight: var(--ml5-font-weight-regular);
  white-space: pre;
  overflow-x: auto;
}

.ml5-terminal__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--ml5-space-2);
  padding: var(--ml5-space-2) var(--ml5-space-3);
  background: none;
  border: 0;
  color: var(--ml5-color-slate-medium);
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-s);
  cursor: pointer;
  transition: color 0.2s ease;
}
.ml5-terminal__copy:hover { color: var(--ml5-color-slate-dark); }

.ml5-terminal__copy:focus-visible {
  outline: var(--ml5-focus-width) solid var(--ml5-color-slate-dark);
  outline-offset: var(--ml5-focus-offset-outer);
}

/* --- Result variant (после успешного выполнения) --- */
.ml5-terminal--result {
  background-color: var(--ml5-color-cloud-light);
  color: var(--ml5-color-olive);                    /* success tint */
}

.ml5-terminal--result:hover {
  background-color: var(--ml5-color-cloud-dark);
  color: var(--ml5-color-ivory-light);
}
```

### States Matrix

| State               | Default                                            | Result variant                                        |
|---------------------|----------------------------------------------------|-------------------------------------------------------|
| Default             | bg cloud-light, text slate-dark                    | bg cloud-light, text olive                            |
| Hover               | bg cloud-light (shift в активное)                  | bg cloud-dark, text ivory-light                       |
| Active / copied     | bg cloud-dark, text ivory-light                    | —                                                     |
| Copy btn hover      | color slate-medium → slate-dark                    | —                                                     |
| Focus-visible       | outline 2px slate-dark на copy btn                 | —                                                     |

**Anti-patterns:**
- Не раскрашивать prompt в зелёный (`rgb(57, 181, 74)` — классический terminal-зелёный) — книга не имитирует консоль. Цвет остаётся slate-dark.
- Не использовать `monospace` system font — мономодуль через токен `--ml5-font-mono`.
- Не ставить иконку $ внутри code — символ $ уже в тексте, не дублировать как before-pseudo.
- Не делать авто-copy по клику на весь блок без aria-live announcement — accessibility требование.

---

## 13. Nav Banner Strip (опциональная announcement-полоска)

Тонкая полоска над шапкой, высотой `--nav--banner-height` = 2.75rem, на clay или slate-dark фоне. Текст + CTA-ссылка с inline-arrow. Сигнал о событии/релизе.

```html
<div class="ml5-nav-banner" role="region" aria-label="Announcement">
  <div class="ml5-nav-banner__inner">
    <span class="ml5-nav-banner__text">
      The new Standard model is now available.
    </span>
    <a class="ml5-nav-banner__cta" href="/standard-model">
      Read announcement
      <svg width="12" height="12" aria-hidden="true"><!-- arrow --></svg>
    </a>
    <button class="ml5-nav-banner__close" type="button" aria-label="Dismiss announcement">
      <svg width="14" height="14" aria-hidden="true"><!-- x --></svg>
    </button>
  </div>
</div>
```

```css
.ml5-nav-banner {
  height: var(--ml5-nav-banner-height);     /* 2.75rem */
  background-color: var(--ml5-color-clay);
  color: var(--ml5-color-ivory-light);
}

.ml5-nav-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ml5-space-4);
  height: 100%;
  padding: 0 var(--ml5-site-margin);
  font-family: var(--ml5-font-sans);
  font-size: var(--ml5-font-size-detail-s);
  font-weight: var(--ml5-font-weight-regular);
}

.ml5-nav-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ml5-space-1);
  color: var(--ml5-color-ivory-light);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: text-underline-offset 0.2s ease;
}
.ml5-nav-banner__cta:hover { text-underline-offset: 0.25em; }

.ml5-nav-banner__close {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--ml5-color-ivory-faded-20);
  cursor: pointer;
  transition: color 0.2s ease;
}
.ml5-nav-banner__close:hover { color: var(--ml5-color-ivory-light); }

/* Когда banner виден — nav сдвигается вниз */
body[data-banner="true"] .ml5-nav {
  top: var(--ml5-nav-banner-height);
}

@media (max-width: 479px) {
  .ml5-nav-banner__text {
    display: none;     /* только CTA + close */
  }
}
```

### States Matrix

| State              | Изменения                                   |
|--------------------|---------------------------------------------|
| Default            | bg clay, text ivory-light                   |
| CTA hover          | text-underline-offset 0.2em → 0.25em        |
| Close hover        | color ivory-faded-20 → ivory-light          |
| Dismissed          | banner hidden, `body[data-banner]="false"` |
| Mobile (479-)      | text скрывается, остаётся только CTA + close |

**Anti-patterns:**
- Не использовать slate-dark + orange border — clay bg — signature.
- Не прятать «Dismiss» — обязательная доступность.
- Не делать высоту больше 3rem — banner тонкий, он не забирает внимание от hero.

---

## 14. Focus Ring — Global System

Общий паттерн фокуса. Ширина `--focus--width: 0.125rem`, outer offset `0.25rem`, inner offset `-0.125rem`. Применяется автоматически ко всем интерактивным элементам через `:focus-visible`.

```css
/* Универсальный фокус — не переопределять в компонентах без нужды */
*:focus-visible {
  outline: var(--ml5-focus-width) solid var(--ml5-color-slate-dark);
  outline-offset: var(--ml5-focus-offset-outer);
  border-radius: inherit;
}

/* На тёмном фоне — ivory */
.ml5-on-dark *:focus-visible,
.ml5-invert__inner *:focus-visible,
.ml5-footer *:focus-visible,
.ml5-cookie *:focus-visible {
  outline-color: var(--ml5-color-ivory-light);
}

/* Inner-offset для элементов, где важно не уехать за bounds
   (release card link, nav-dropdown link) */
.ml5-release-card__link:focus-visible,
.ml5-nav__dropdown-link:focus-visible {
  outline-offset: var(--ml5-focus-offset-inner);  /* -0.125rem */
}
```

### States Matrix

| Контекст              | Цвет outline            | Offset               |
|-----------------------|-------------------------|----------------------|
| Light bg              | slate-dark              | 0.25rem (outer)      |
| Dark bg (footer, invert)| ivory-light           | 0.25rem              |
| Inset (card link)     | slate-dark              | -0.125rem (inner)    |

**Anti-patterns:**
- Не убирать `outline: none` без замены — нарушение WCAG 2.1 AA.
- Не красить outline в clay — акцент не подходит для системного фокуса (слабый контраст с ivory).
- Не использовать `box-shadow` вместо `outline` — outline корректно обходит transform + не влияет на layout.

---

## Сводная таблица компонентов

| №  | Компонент              | Ключевая фишка                                                 |
|----|------------------------|-----------------------------------------------------------------|
| 1  | Pill Button            | 4 варианта; nav-variant → clay на hover                         |
| 2  | Editorial H1           | `<span>` underline как редакторская правка; duplicated mirror   |
| 3  | Release Card           | Whisper-shadow rgba 0.01/0.02/0.04 на hover                     |
| 4  | Dark Inset Block       | Одна инверсия slate-dark на viewport; serif 400 H2              |
| 5  | Nav + Mega-Menu        | transparent → ivory data-scrolled; curtain menuOpen keyframes   |
| 6  | Footer Mega-Menu       | 8 групп, underline-offset 0.25em на hover                       |
| 7  | Cookie Banner          | Dark modal справа снизу, 3 pill-CTA (reject/customize/accept)   |
| 8  | Nav Dropdown           | 2-колоночный grid: promo feature + link list                    |
| 9  | Chip / Tab Pill        | `aria-pressed` двоичное; clay не используется                   |
| 10 | Article-list Item      | Grid 160px/1fr/auto/24px; только color shift на hover           |
| 11 | Mission Statement      | max-width 40rem, serif 400 во всём, оптический divider          |
| 12 | Terminal CTA           | cloud-light → cloud-dark на active (copy)                       |
| 13 | Nav Banner             | clay полоска 2.75rem; inline CTA с arrow                        |
| 14 | Focus Ring (global)    | 0.125rem slate-dark/ivory, context-aware inversion              |

## Правила композиции

1. **Whisper-shadow используется 1-3 раза на страницу** (release cards, nav dropdown, cookie banner). Никогда на body-фоне.
2. **Clay #d97757 — единственный тёплый акцент.** Применяется в: nav-variant hover, nav-banner bg, dropdown eyebrow «New». Максимум 2-3 появления на viewport.
3. **Underline-as-editing** — только в H1 (decorative span) и на hover ссылок (nav/footer/dropdown-link-title). Никогда на обычной body-прозе.
4. **Serif vs Sans роль:** Serif — это *контент* (H2/H3 titles, paragraph-m/l body, mission prose). Sans — это *ui* (nav, buttons, chips, meta, eyebrows, detail-text).
5. **Radius иерархия:** 8px (`--radius-main`) на input/code → 16px (`--radius-large`) на card/invert/cookie → 100vw (`--radius-round`) на button/chip.
6. **Dark-inversion — структурная, не косметическая.** Блок §4 (Flagship Initiative), §6 (Footer), §7 (Cookie) = три места, где живёт slate-dark. Больше нигде.

---

Каталог компонентов используется в связке с [`tokens.css`](tokens.css) + [`patterns.md`](patterns.md) (композиционные паттерны). DNA-разбор — в [`dna.md`](dna.md).