/* ФОГЕЛЬ — дизайн-система. Настройки сайта → Ещё → HTML-код внутрь HEAD */
/* Шрифт Golos Text загружается в Настройки сайта → Шрифты */

:root{
  --ink:#0D0D0E;        /* фон тёмных полос */
  --paper:#F0EEE9;      /* фон светлых полос */
  --amber:#F5A310;      /* единственный акцент */
  --amber-txt:#BE780A;  /* янтарь как текст на бумаге */
  --mute-d:#8C8A86;     /* вторичный текст на тёмном */
  --mute-l:#69645E;     /* вторичный текст на светлом */
  --line-l:#CEC8BE;     /* линия на светлом */
  --line-d:#343230;     /* линия на тёмном */
  --skew:-9deg;         /* угол скоса — единый на всю страницу */
}

/* ТИПОГРАФИКА — одно семейство, три роли */
.fg-h      {font-family:'Golos Text';font-weight:900;letter-spacing:-.025em;line-height:.98}
.fg-body   {font-family:'Golos Text';font-weight:400;line-height:1.55}
.fg-eyebrow{font-family:'Golos Text';font-weight:600;font-size:11px;letter-spacing:.24em;
            text-transform:uppercase;color:var(--amber)}
/* на бумаге айброу серый: тёмный янтарь выбивался из палитры сайта */
.fg-eyebrow--light{color:var(--mute-l)}

/* СКРУГЛЕНИЙ НЕТ НИГДЕ */
*{border-radius:0 !important}

/* якорная навигация из меню — с плавным скроллом */
html{scroll-behavior:smooth}

/* КНОПКИ. Обводка — только inset box-shadow: border на skew плывёт по толщине,
   и толщина обводки обеих кнопок обязана быть равной. */
.fg-btn{display:inline-block;padding:16px 35px;font-family:'Golos Text';font-weight:600;
        font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
        transition:none}
/* главная — скошенная, скос несёт иерархию.
   Ховер — заливка бумагой слева направо внутри кнопки (как строки афиши). */
.fg-btn--primary{position:relative;overflow:hidden;font-size:15px;font-weight:700;
                 letter-spacing:.09em;white-space:nowrap;
                 transform:skewX(var(--skew));background:var(--amber);color:var(--ink)}
.fg-btn--primary::before{content:"";position:absolute;inset:0;background:var(--paper);
                         transform:scaleX(0);transform-origin:left;
                         transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.fg-btn--primary:hover::before{transform:scaleX(1)}
.fg-btn--primary > span{display:inline-block;position:relative;z-index:1;
                        transform:skewX(calc(var(--skew) * -1))}
/* вторая — прямоугольная; обводка ховера бумажная, не --line-d:
   линия на чернилах не читается, обводка выглядела тоньше янтарной */
.fg-btn--second{background:var(--paper);color:var(--ink)}
.fg-btn--second:hover{background:transparent;color:var(--paper);
                      box-shadow:inset 0 0 0 1px var(--paper)}
/* акцентная скошенная — целевое действие на бумаге (музыка).
   Чернильная с бумажной обводкой; ховер — янтарная заливка слева направо. */
.fg-btn--accent{position:relative;overflow:hidden;
                transform:skewX(var(--skew));background:var(--ink);color:var(--paper);
                box-shadow:inset 0 0 0 1px var(--paper)}
.fg-btn--accent > span{display:inline-block;position:relative;z-index:1;
                       transform:skewX(calc(var(--skew) * -1))}
.fg-btn--accent::before{content:"";position:absolute;inset:0;background:var(--amber);
                        transform:scaleX(0);transform-origin:left;
                        transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.fg-btn--accent:hover::before{transform:scaleX(1)}
.fg-btn--accent:hover{color:var(--ink);box-shadow:none}

/* ЛОГОТИП: точка сидит на базовой линии, размер 20% высоты прописных.
   Долю от кегля не использовать — при смене шрифта врёт: единица cap,
   .14em — запасной вариант для старых браузеров (у Golos прописные ≈ .7em).
   Минимум 5px — на малых кеглях (меню, мобила) точка не должна пропадать. */
.fg-logo-dot{display:inline-block;width:max(.14em,5px);height:max(.14em,5px);
             background:var(--amber);vertical-align:baseline;margin-left:.09em}
@supports (width:1cap){
  .fg-logo-dot{width:max(.2cap,5px);height:max(.2cap,5px)}
}
/* Слово с точкой не разрывать: точка на отдельной строке — мусорный пиксель.
   Оборачивать «ФОГЕЛЬ» вместе с точкой. */
.fg-nowrap{white-space:nowrap}

/* Пара ЕЛ в «ФОГЕЛЬ»: на общем трекинге -.025em Л врастает в Е.
   Вешать на букву Е — раскрывает стык до нормального просвета. */
.fg-kern{letter-spacing:.005em}

/* ОКНО ФОТО НА ГЛАВНОЙ — пропорция 0,84, срез 19%.
   Низ скошен параллельно срезу под первым экраном — единая линия с клином. */
.fg-hero-photo{clip-path:polygon(19% 0,100% 0,81% 100%,0 96%)}

/* АФИША: блок на чернилах, наведение заливает строку янтарём слева направо.
   Дата — прямоугольная бумажная плашка; скос носит кнопка «Билеты». */
.fg-row{position:relative;overflow:hidden;
        background:var(--ink);color:var(--paper)}
.fg-row::before{content:"";position:absolute;inset:0;background:var(--amber);
                transform:scaleX(0);transform-origin:left;transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.fg-row:hover::before{transform:scaleX(1)}
.fg-row > *{position:relative;z-index:1}
.fg-row:hover{color:var(--ink)}
/* дата — текстом, тем же начертанием, что города */
.fg-date{display:inline-block}
.fg-date > span{display:inline-block;font-family:'Golos Text';font-weight:900;font-size:24px;
                letter-spacing:-.025em;line-height:.98;text-transform:uppercase;color:var(--paper)}
.fg-row:hover .fg-date > span{color:var(--ink)}
/* «Билеты» — заполненная скошенная янтарная кнопка; на янтарной строке уходит в чернила */
.fg-row .fg-tickets{display:inline-block;transform:skewX(var(--skew));
                    background:var(--amber);color:var(--ink);padding:13px 18px;
                    text-align:center}
.fg-row .fg-tickets > span{display:inline-block;transform:skewX(calc(var(--skew) * -1))}
.fg-row:hover .fg-tickets{background:var(--ink);color:var(--paper)}

/* ЦИФРЫ — лента во всю ширину экрана, зазор 3px. Все плашки чёрные,
   янтарь появляется только на наведении (плашка чуть приподнимается). */
.fg-stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;
          width:100vw;margin-left:calc(50% - 50vw)}
/* плашка может быть ссылкой на соцсеть — цифры проверяются одним кликом */
.fg-stat{background:var(--ink);color:var(--paper);padding:28px 24px;min-height:160px;
         display:flex;flex-direction:column;justify-content:space-between;
         text-decoration:none;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.fg-stat-num{font-size:34px}
.fg-stat .fg-eyebrow{color:var(--mute-d)}
@media (hover:hover){
  .fg-stat:hover{background:var(--amber);color:var(--ink);transform:translateY(-6px)}
  .fg-stat:hover .fg-eyebrow{color:var(--ink)}
}

@media (max-width:640px){
  .fg-stats{grid-auto-flow:row;grid-template-columns:repeat(2,1fr)}
  .fg-stat{min-height:112px;padding:18px 16px}
  .fg-stat-num{font-size:26px}
  .fg-btn{display:block;text-align:center}
  /* скосы и заливки-ховеры на мобиле сохранены как на десктопе:
     на таче ховер срабатывает по тапу */
}