/* ===========================================================================
   components.css — отдельные плашки публичной страницы: баннер страницы,
   панель «JUMP TO», риббоны и содержимое блоков сайдбара, баннеры загрузок,
   виджет Discord, список ссылок, блок 404.
   TASKS P4-5, правила фолбэков — DESIGN §10.

   Четвёртый в каскаде, после tokens.css, base.css и layout.css. Граница с
   layout.css простая: там «где блок и какого он размера», здесь «как он
   выглядит». Поэтому у `.page-card` и `.side-box` тут нет ни flex-базиса, ни
   margin-ов — только фон и рамка вариантов, а у детей баннера и виджета есть
   всё, потому что размер у них свой.

   Содержимого страницы (`.cfa-rt`) здесь нет ни строки — оно в content.css,
   и это не стилистическое разделение, а требование хендоффа: тот файл
   подключается ещё и в редакторе, и разойтись они не имеют права.

   ---------------------------------------------------------------------------
   ЧТО ЗДЕСЬ СДЕЛАНО НЕ КАК В ПРОТОТИПЕ

   1. НИ ОДНОГО `gap` — то же правило, что в layout.css (DESIGN §10 п.1).
      В прототипе им разделены крошки, строки баннера, чипы «JUMP TO»,
      иконка и текст в виджете Discord, ромб и подпись в списке ссылок.
      Везде зазор переехал на ребёнка (`margin-right` / `margin-bottom`),
      а там, где блоки могут переноситься (панель «JUMP TO», крошки), часть
      нижнего отступа снята с контейнера — суммы расписаны у каждого места.
      Подавлений `lint-ok` в файле нет.

   2. Заливка H1 хромом живёт в `@supports` (DESIGN §10 п.3). По умолчанию
      заголовок просто белый: `background-clip:text` без поддержки вместе с
      `color:transparent` даёт НЕВИДИМЫЙ заголовок — худший фолбэк из всех
      возможных, и единственный, который нельзя не заметить на проде.

   3. `min(42%,240px)` у арта персонажа развёрнут в `width` + `max-width`,
      как и все `min()` в layout.css: `min()` внутри значения не откатывается
      к предыдущей строке, а сбрасывает свойство в initial.

   4. Иконка Discord в шаблоне обёрнута в `<picture>` (webp + png, Safari 13
      webp не знает). Значит, flex-ребёнком `.dc-body` оказывается `picture`,
      а не `img`, — размер и отступ стоят на обёртке, а не на `.dc-icon`.

   ПРО ПАРУ «СТАТИКА + var()» (DESIGN §10 п.11) — правило то же, что в
   layout.css: дублируется сплошным значением всё, где потеря переменной
   делает текст невидимым или уносит фон (`color`, `background`,
   `background-color`), декор идёт одним `var()`. Хексы встречаются только в
   первой строке такой пары.
   =========================================================================== */

/* ===========================================================================
   Баннер страницы

   Колонка, прижатая к низу: крошки, заголовок, строка фактов. Высота
   минимум 190px, арт персонажа торчит из правого нижнего угла и обрезается
   скруглением `.page-card` (у неё overflow:hidden).
   =========================================================================== */

.page-banner {
    position: relative;
    /* Арт уходит на 90px ниже дна баннера — обрезаем по самому баннеру,
       иначе он лёг бы поверх текста страницы. */
    overflow: hidden;

    min-height: 190px;
    padding: 22px 26px;
    /* Полоса справа под арт. Статика — те же 30%, что и середина clamp:
       ограничение сверху (250px) заметно только на широком экране, где
       лишний отступ безвреден. */
    padding-right: 30%;
    padding-right: clamp(26px, 30%, 250px);

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    border-bottom: 3px solid var(--c-outline);
}

/* Тема баннера (класс ставит рендерер: RENDER_THEMES в app/src/render.php).
   Лестница из трёх строк — §10 п.5 и п.11: без conic-gradient браузер
   отбрасывает третью строку и остаётся с диагональным градиентом, без
   var() — вторую и третью. Лучи написаны литералом, а не токеном, по той
   же причине, что в шапке сайта: внутри токена подстановка уже произошла,
   и непонятая функция обнулила бы весь фон (см. шапку tokens.css). */

.page-banner.is-cfa {
    background: linear-gradient(135deg, #0b5fa3, #1ea7f2 60%, #8fe1ff);
    background: var(--g-banner-cfa);
    background: repeating-conic-gradient(from 0deg at 85% 120%, rgba(255, 255, 255, .16) 0deg 6deg, transparent 6deg 14deg),
                linear-gradient(135deg, #0b5fa3, #1ea7f2 60%, #8fe1ff);
}

.page-banner.is-bfa {
    background: linear-gradient(135deg, #b3380a, #ff7a1a 55%, #ffc629);
    background: var(--g-banner-bfa);
    background: repeating-conic-gradient(from 0deg at 85% 120%, rgba(255, 255, 255, .16) 0deg 6deg, transparent 6deg 14deg),
                linear-gradient(135deg, #b3380a, #ff7a1a 55%, #ffc629);
}

/* Арт персонажа. `background-image` приходит инлайном из шаблона (единственный
   вычисляемый при рендере стиль на сайте, DESIGN §10), остальные части
   сокращения `url(...) center bottom/contain no-repeat` — здесь. */
.page-banner-art {
    position: absolute;
    right: 2%;
    bottom: -90px;
    height: 310px;
    /* min(42%,240px) прототипа, развёрнутый в пару */
    width: 42%;
    max-width: 240px;

    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;

    /* Белая подсветка сбоку — «вырезанность» из фона. Без поддержки filter
       арт просто останется без ореола. */
    filter: drop-shadow(4px 0 0 rgba(255, 255, 255, .7));
}

/* --- Крошки --------------------------------------------------------------- */

/* position:relative у всех трёх строк баннера: арт позиционирован и без
   слоя накрыл бы их собой. */
.page-crumbs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 8px — зазор строк баннера (в прототипе gap колонки) */
    margin: 0 0 8px;

    font-size: 13px;
    font-size: var(--fs-small);
    font-weight: 700;
    color: #ffffff;
    color: var(--c-chrome-0);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.page-crumbs-home,
.page-crumbs-sep {
    margin-right: 8px;
}

/* Ссылка на баннере белая: синяя из base.css на цветном фоне нечитаема. */
.page-crumbs-home {
    color: #ffffff;
    color: var(--c-chrome-0);
    text-decoration-color: rgba(255, 255, 255, .5);
}

.page-crumbs-home:hover,
.page-crumbs-home:focus {
    color: #ffe56e;
    color: var(--c-gold-0);
    text-decoration-color: #ffe56e;
    text-decoration-color: var(--c-gold-0);
}

/* --- Заголовок ------------------------------------------------------------ */

.page-title {
    position: relative;
    margin: 0 0 8px;

    font-family: 'Exo 2', 'Trebuchet MS', Tahoma, sans-serif;
    font-family: var(--f-display);
    font-weight: 900;
    font-style: italic;
    /* Телефонный ярус; от 420px ниже включается кривая хендоффа.
       Почему два яруса, а не один clamp, — в комментарии у медиа-запроса. */
    font-size: 26px;
    font-size: clamp(26px, 7.5vw, 32px);
    line-height: 1;
    text-transform: uppercase;

    /* Контур именно drop-shadow-ами по <h1>, а НЕ -webkit-text-stroke:
       обводка штрихует каждый глиф отдельно, и у наложенных букв курсива
       видны швы (design/README.md, раздел «Typography»). */
    filter: drop-shadow(1.5px 0 0 #0a3a6e) drop-shadow(-1.5px 0 0 #0a3a6e)
            drop-shadow(0 1.5px 0 #0a3a6e) drop-shadow(0 -1.5px 0 #0a3a6e)
            drop-shadow(0 4px 0 #0a3a6e);

    /* Деградирует без последствий — §10 п.9 */
    text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   Кривая хендоффа: clamp(32px, 4.4vw, 48px) — ровно как в прототипе.

   Почему она не работает на телефоне и почему ярусов два. Под заголовок в
   баннере остаётся не вся ширина карточки, а полоса слева от арта: на 320px
   это 168px (справа 30% забирает `padding-right` .page-banner). Слово
   «CARDFIGHT!!» при floor-е 32px занимает 198px, «BUDDYFIGHT» — 200px. Оба
   не влезают, и `overflow-wrap:break-word` из base.css рвёт их посередине:
   «CARDFIGH / T!! AREA». Горизонтального скролла нет — но читается плохо,
   и на 320 и 360px это видно на двух страницах из трёх.

   Одним clamp-ом это не чинится. Нужный размер растёт по ширине вьюпорта
   как 0.112·vw − 8.9px (замер: доступная полоса ≈ 0.7·vw − 55px), то есть
   по прямой с ОТРИЦАТЕЛЬНЫМ свободным членом, а `k·vw` внутри clamp — это
   всегда прямая через ноль. Коэффициент, влезающий в 320px (8.4vw), на
   768px дал бы 48px вместо 34px прототипа — то есть починил бы телефон,
   сломав планшет. Поэтому ярус телефона отдельный, и включается он тем же
   приёмом, что и маскоты в layout.css: mobile-first плюс один `min-width`
   (§10 п.12 других медиа-запросов и не разрешает).

   Порог 420px взят по замеру, а не на глаз: с 414px длинное слово влезает
   при 32px с запасом. На самом пороге оба яруса дают 32px (7.5×4.2 = 31.5,
   clamp сверху 32; у нижней кривой floor 32), поэтому скачка размера при
   переходе через запрос нет.
   --------------------------------------------------------------------------- */
@media (min-width: 420px) {
    .page-title {
        font-size: 40px;
        font-size: clamp(32px, 4.4vw, 48px);
    }
}

/* По умолчанию — сплошной белый. Хром появляется только там, где браузер
   умеет обрезать фон по тексту (§10 п.3). */
.page-title-fill {
    padding: 0 4px;
    color: #ffffff;
    color: var(--c-chrome-0);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .page-title-fill {
        background: linear-gradient(180deg, #ffffff 0%, #dfe8f2 40%, #8ea3b8 52%, #e9f0f7 70%, #ffffff 100%);
        background: var(--g-chrome-text);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;

        /* Каждая перенесённая строка получает свой полный градиент, а не
           кусок общего. Без поддержки — просто общий градиент на все строки. */
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
}

/* --- Бейдж и дата --------------------------------------------------------- */

.page-facts {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
}

.page-badge {
    /* 10px — зазор между чипом и датой (в прототипе gap строки) */
    margin-right: 10px;
    padding: 3px 12px;

    font-family: 'Exo 2', 'Trebuchet MS', Tahoma, sans-serif;
    font-family: var(--f-display);
    font-weight: 900;
    font-style: italic;
    font-size: 14px;
    color: #5a3300;
    color: var(--c-gold-ink);

    background: linear-gradient(180deg, #fff6c4, #ffc629);
    background: var(--g-gold-pale);
    border: 1px solid var(--c-gold-border);
    border-radius: var(--r-tag);
}

.page-updated {
    font-size: 13px;
    font-size: var(--fs-small);
    font-weight: 600;
    color: #ffffff;
    color: var(--c-chrome-0);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

/* ===========================================================================
   Панель «JUMP TO»

   В прототипе это кнопки с обработчиком, у нас — обычные якорные ссылки
   (P3-3): плавность даёт scroll-behavior из base.css, а без JS они всё равно
   работают. Отсюда сброс подчёркивания — у base.css ссылки подчёркнуты.
   =========================================================================== */

.page-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Снизу 4px вместо 12: остальные 8 приходят как margin-bottom чипа,
       иначе при переносе строки чипы слиплись бы (в прототипе это gap). */
    padding: 12px 26px 4px;

    background: linear-gradient(180deg, #e6f6ff, #cdeafc);
    background: var(--g-ice);
    border-bottom: 1px solid var(--c-border-soft);
}

.page-jump-label {
    margin: 0 8px 8px 0;

    font-family: 'Exo 2', 'Trebuchet MS', Tahoma, sans-serif;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 12px;
    font-size: var(--fs-micro);
    letter-spacing: .1em;
    color: #0b5fa3;
    color: var(--c-card-border);
}

.page-jump-item {
    margin: 0 8px 8px 0;
    padding: 3px 10px;

    font-family: 'Exo 2', 'Trebuchet MS', Tahoma, sans-serif;
    font-family: var(--f-display);
    font-weight: 900;
    font-style: italic;
    font-size: 14px;
    color: #ffffff;
    color: var(--c-chrome-0);
    text-decoration: none;
    text-shadow: 0 1px 0 #064a85;

    background: linear-gradient(180deg, #5fd0ff, #0b72c2);
    background: var(--g-sky-soft);
    border: 1px solid var(--c-outline);
    border-radius: var(--r-xs);
    box-shadow: var(--sh-btn-sm);

    transition: filter .12s, transform .08s, box-shadow .08s;
}

/* Состояния по дизайн-системе (design/README.md, «Active (pressed) state»):
   наведение — светлее и на 1px выше, нажатие — вниз на высоту сплошной
   тени, а она сжимается до 1px. Так же у кнопок админки. */
.page-jump-item:hover,
.page-jump-item:focus {
    color: #ffffff;
    color: var(--c-chrome-0);
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.page-jump-item:active {
    transform: translateY(1px);
    box-shadow: var(--sh-btn-sm-on);
}

/* ===========================================================================
   Сайдбар: общая начинка блоков

   Размеры, зазоры, скругление и тень `.side-box` задаёт layout.css. Здесь
   фон и рамка — они разные у белых блоков и у виджета Discord.
   =========================================================================== */

.side-box--dl,
.side-box--links {
    background: #ffffff;
    background: var(--c-surface);
    border: 1px solid var(--c-outline);
}

/* --- Риббон-заголовок ----------------------------------------------------- */

.side-title {
    margin: 0;
    padding: 8px 14px;

    font-family: 'Exo 2', 'Trebuchet MS', Tahoma, sans-serif;
    font-family: var(--f-display);
    font-weight: 900;
    font-style: italic;
    font-size: 17px;
    text-transform: uppercase;
    color: #ffffff;
    color: var(--c-chrome-0);
}

.side-title--red {
    background: linear-gradient(180deg, #ff5a5f 0%, #e4262c 50%, #c2121a 51%, #9e0d14 100%);
    background: var(--g-red);
    text-shadow: 0 1px 0 #6d060b;
}

.side-title--sky {
    background: linear-gradient(180deg, #8fe1ff 0%, #2cb0f6 48%, #0e8ee0 52%, #0b6fbf 100%);
    background: var(--g-sky);
    text-shadow: 0 1px 0 #064a85;
}

/* --- Баннеры загрузок ------------------------------------------------------ */

.side-body {
    padding: 12px;
}

.side-body--dl {
    /* Вертикальный зазор между баннерами — их margin-bottom, поэтому нижний
       padding снят до нуля: 0 + 12 = те же 12px, что и по бокам. */
    padding-bottom: 0;
}

.dl-banner {
    display: block;
    /* Тень «0 3px 0» рисуется ПОД баннером, поэтому margin ровно 12px:
       она не занимает места в потоке и не добавляется к зазору. */
    margin-bottom: 12px;

    border-radius: var(--r-md);
    /* Картинка обрезается по скруглению рамки */
    overflow: hidden;

    transition: filter .12s, transform .08s, box-shadow .08s;
}

.dl-banner--cfa {
    border: 2px solid var(--c-outline);
    box-shadow: 0 3px 0 #064a85;
}

.dl-banner--bfa {
    border: 2px solid var(--c-gold-border);
    box-shadow: 0 3px 0 #9a4200;
}

.dl-banner:hover,
.dl-banner:focus {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Нажатие: вниз на 2px из трёх, тень сжимается до 1px. Место в потоке не
   меняется — transform и тень его не занимают, соседи не дёргаются. */
.dl-banner--cfa:active {
    transform: translateY(2px);
    box-shadow: var(--sh-btn-sky-on);
}

.dl-banner--bfa:active {
    transform: translateY(2px);
    box-shadow: var(--sh-gold-on);
}

.dl-banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===========================================================================
   Виджет Discord

   Цифры и имя сервера подставит site.js (P4-9), в HTML лежат прочерки. Всё,
   что здесь описано, обязано выглядеть законченным и с прочерками — без JS
   виджет остаётся рабочей карточкой со ссылкой Join.
   =========================================================================== */

.side-box--discord {
    background: linear-gradient(180deg, #5865f2, #3b44b8);
    background: var(--tex-halftone-dc), linear-gradient(180deg, #5865f2, #3b44b8);
    border: 1px solid var(--c-discord-border);
}

.dc-head {
    display: flex;
    flex-wrap: wrap;
    /* baseline, а не center: заголовок и подпись разного кегля, и ровняются
       они по нижней линии букв, как в прототипе. */
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 14px 0;
}

.dc-title {
    margin-right: 8px;

    font-family: 'Exo 2', 'Trebuchet MS', Tahoma, sans-serif;
    font-family: var(--f-display);
    font-weight: 900;
    font-style: italic;
    font-size: 17px;
    text-transform: uppercase;
    color: #ffffff;
    color: var(--c-chrome-0);
}

.dc-tagline {
    font-size: 13px;
    font-size: var(--fs-small);
    color: #e3e6ff;
    color: var(--c-discord-pale);
}

.dc-body {
    display: flex;
    align-items: center;
    padding: 10px 14px;
}

/* Flex-ребёнок здесь — обёртка <picture>, а не сама картинка (см. шапку
   файла, п. 4). Отступ до текста — 12px, как в прототипе. */
.dc-body picture {
    display: block;
    flex: none;
    margin-right: 12px;
}

.dc-icon {
    display: block;
    /* Перебивает и атрибуты width/height (128×128), и `height:auto`
       из base.css — специфичность класса выше специфичности тега. */
    width: 52px;
    height: 52px;

    border: 2px solid #ffffff;
    border-radius: 14px;
    /* Подложка на время загрузки и на случай, если иконки нет вовсе */
    background-color: #2f38a8;
    background-color: var(--c-discord-border);
    object-fit: cover;
}

.dc-text {
    /* min-width:0 обязателен: без него text-overflow у длинного имени
       сервера не сработает, а колонка разъедется. */
    min-width: 0;
    flex: 1;
}

.dc-name {
    display: block;
    font-family: 'Exo 2', 'Trebuchet MS', Tahoma, sans-serif;
    font-family: var(--f-display);
    font-weight: 900;
    font-style: italic;
    font-size: 16px;
    color: #ffffff;
    color: var(--c-chrome-0);

    /* Имя сервера приходит из Discord и может быть любой длины */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dc-counts {
    display: block;
    font-size: 13px;
    font-size: var(--fs-small);
    color: #e3e6ff;
    color: var(--c-discord-pale);
}

.dc-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    vertical-align: baseline;

    background: #3ddc3d;
    background: var(--c-online);
    border-radius: 50%;
    box-shadow: 0 0 6px #3ddc3d;
}

.dc-foot {
    padding: 0 14px 14px;
}

.dc-join {
    display: block;
    padding: 9px;
    text-align: center;

    font-family: 'Exo 2', 'Trebuchet MS', Tahoma, sans-serif;
    font-family: var(--f-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    text-decoration: none;
    color: #2f38a8;
    color: var(--c-discord-border);

    background: linear-gradient(180deg, #ffffff, #dfe3ff);
    background: var(--g-white);
    border: 2px solid var(--c-discord-border);
    border-radius: var(--r-md);
    box-shadow: 0 3px 0 #2f38a8;

    transition: filter .12s, transform .08s, box-shadow .08s;
}

/* Красный hover из base.css здесь неуместен — кнопка брендовая и остаётся
   синей (design/README.md: «Keep Discord brand colour unaltered»). */
.dc-join:hover,
.dc-join:focus {
    color: #2f38a8;
    color: var(--c-discord-border);
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.dc-join:active {
    transform: translateY(2px);
    box-shadow: var(--sh-discord-on);
}

/* Движение кнопок сайта выключается целиком, если человек об этом просил:
   состояния остаются, пропадает только анимация между ними. */
@media (prefers-reduced-motion: reduce) {
    .page-jump-item,
    .dl-banner,
    .dc-join {
        transition: none;
    }
}

/* ===========================================================================
   Список ссылок
   =========================================================================== */

.link-list {
    margin: 0;
    padding: 6px 0;
    list-style: none;
}

.link-link {
    display: flex;
    align-items: center;
    padding: 8px 14px;

    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    color: #0a2a55;
    color: var(--c-navy);

    border-bottom: 1px dotted var(--c-border-dot);
}

.link-link:hover,
.link-link:focus {
    color: #0b72c2;
    color: var(--c-deep-sky);
    background: #e6f6ff;
    background: var(--c-ice);
}

/* Ромб-маркер. Тот же приём, что у списков в content.css: квадрат, повёрнутый
   на 45°, — без поддержки transform останется аккуратный квадратик. */
.link-dot {
    flex: none;
    width: 8px;
    height: 8px;
    /* 10px — зазор между ромбом и подписью (в прототипе gap ссылки) */
    margin-right: 10px;

    background: #1ea7f2;
    background: var(--c-sky);
    border: 1px solid var(--c-outline);
    transform: rotate(45deg);
}

/* ===========================================================================
   Страница 404

   Карточка без баннера: маскот слева, текст справа, на телефоне — друг под
   другом. Меню, сайдбар и подвал у неё общие с сайтом — попав сюда по
   опечатке, человек должен видеть нормальный сайт, а не тупик.
   =========================================================================== */

/* У этой карточки нет баннера — без добавки по вертикали она выглядела бы
   белой полоской в 170px посреди страницы. Нижние 40px хендоффа разделены:
   20px здесь + 20px margin-bottom у маскота, чтобы при переносе строки те же
   20px стали вертикальным зазором между ним и текстом (см. `.notfound-art`). */
.page-card--404 .page-body {
    padding: 40px 26px 20px;
}

.notfound {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.notfound-art {
    flex: none;
    width: 120px;
    height: auto;

    /* 20px — зазор между маскотом и текстом (в прототипе gap блока). Он
       нужен с ДВУХ сторон, а не только справа: на телефоне текст сваливается
       под маскота, и без нижнего отступа они соприкасаются. Внутри 320px
       колонке контента остаётся 228px — 120 у маскота плюс базис текста 240
       там не помещаются, то есть перенос на телефоне не край случая, а норма.
       Нижние 20px сняты с padding-а `.page-body` (40 → 20), поэтому в
       неперенесённом виде общая высота карточки та же, что была. */
    margin: 0 20px 20px 0;
}

.notfound-text {
    /* Базис 240px: ниже этого текст уходит под картинку в свою строку */
    flex: 1 1 240px;
    min-width: 0;
}

.notfound-title {
    margin: 0 0 10px;

    font-family: 'Exo 2', 'Trebuchet MS', Tahoma, sans-serif;
    font-family: var(--f-display);
    font-weight: 900;
    font-style: italic;
    font-size: 30px;
    line-height: 1.1;
    color: #0b72c2;
    color: var(--c-deep-sky);
    text-shadow: 0 2px 0 #cdeeff;
}

.notfound-lead {
    margin: 0 0 10px;
    font-size: 17px;
}

.notfound-back {
    font-family: 'Exo 2', 'Trebuchet MS', Tahoma, sans-serif;
    font-family: var(--f-display);
    font-style: italic;
    text-transform: uppercase;
    text-decoration: none;
}