/* CLC — фирменная система по брендбуку 2026.
   Слой компонентов. Единственный источник цвета и шрифта — tokens.css и
   fonts.css; здесь только готовые классы. Подключать этот файл одним
   импортом, отдельно fonts.css и tokens.css звать не нужно. */

@import url('fonts/fonts.css');
@import url('tokens.css');
@import url('pattern/patterns.css');

:root{
  /* короткие псевдонимы канонических токенов — чтобы в разметке было чище */
  --newyork: var(--clc-newyork);
  --black:   var(--clc-black);
  --gold:    var(--clc-gold);
  --green:   var(--clc-green);
  --paper:   var(--clc-warm-white);
  --s: 8px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--clc-font-ui);background:var(--clc-ink);color:var(--paper);
  font-size:16px;line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased}

/* ─── типографика ───────────────────────────────────────────────
   .d1/.d2 — Suffragette. ТОЛЬКО латиница и цифры: кириллицы в шрифте нет,
   двоеточия, тире, кавычек и & тоже. Для русского заголовка брать .d1--ru. */
.d1{font-family:var(--clc-font-display);font-size:clamp(40px,7vw,92px);line-height:.98;font-weight:400}
.d2{font-family:var(--clc-font-display);font-size:clamp(28px,4vw,52px);line-height:1.06;font-weight:400}
.d1--ru{font-family:var(--clc-font-ui);font-weight:300;font-size:clamp(36px,6vw,80px);line-height:1.04;letter-spacing:-.01em}
.d2--ru{font-family:var(--clc-font-ui);font-weight:300;font-size:clamp(26px,3.6vw,48px);line-height:1.1}

/* .gx — знак, которого в Suffragette физически нет: двоеточие, тире, слэш,
   плюс, средняя точка, ฿ и вся кириллица. Такой знак всё равно возьмётся
   из Geologica, и без подгонки он выпадает из строки жирным пятном.
   Класс делает подмену осознанной: вес и кегль подведены под волосяную
   антикву. Набирать так: 18<span class="gx">:</span>00 */
.gx,.gx.gx{font-family:var(--clc-font-ui)!important;font-style:normal;font-weight:200;
  font-size:.86em;letter-spacing:-.02em}

/* надзаголовок вразрядку — главный приём брендбука (THE CONCEPT, KARAOKE) */
.lbl{font-size:11px;letter-spacing:var(--clc-track-wide);text-transform:uppercase;font-weight:600;color:var(--gold)}
.lbl--dim{color:inherit;opacity:.7;font-weight:500;letter-spacing:var(--clc-track-mid)}
.lead{font-size:clamp(15px,1.4vw,19px);max-width:62ch}
.gold{color:var(--gold)}

/* ─── шапка ─── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:calc(var(--s)*2.5) calc(var(--s)*5);
  background:rgba(0,0,0,.55);backdrop-filter:blur(14px)}
.nav a{color:var(--paper);text-decoration:none;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.85;transition:.2s}
.nav a:hover{opacity:1;color:var(--gold)}
.nav__links{display:flex;gap:calc(var(--s)*4.5);align-items:center}
.nav__logo{width:78px;color:var(--gold);display:block}
.nav__logo svg,.nav__logo img{width:100%;height:auto;display:block}
.book{border:1px solid var(--gold);color:var(--gold)!important;padding:9px 20px;opacity:1!important}
.book:hover{background:var(--gold);color:var(--black)!important}

/* ─── секции ─── */
.sec{padding:calc(var(--s)*13) calc(var(--s)*5)}
.wrap{max-width:1240px;margin:0 auto}
.sec--wine{background:var(--newyork)}
.sec--green{background:var(--green)}
.sec--gold{background:var(--gold);color:var(--black)}
.sec--paper{background:#F7F4F0;color:var(--black)}

/* разделитель-шмуцтитул: чёрное поле + строка золотом вразрядку (стр. 14, 22, 25, 30) */
.divider{padding:calc(var(--s)*14) 0;text-align:center;background:var(--black)}
.divider span{font-size:13px;letter-spacing:var(--clc-track-wide);text-transform:uppercase;color:var(--gold)}

/* ─── золотая текстура ─── */
.goldtex{background-image:url('texture/gold-2.webp');background-size:cover;background-position:center}
.goldtex--tile{background-image:url('texture/gold-2-tile.webp');background-size:280px}
.goldtext{background-image:url('texture/gold-1.webp');background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ─── арка: главная форма бренда (стр. 19, 20, 25, 29) ─── */
.arch{aspect-ratio:1/1.45;border-radius:var(--clc-arch-radius);overflow:hidden}
.arch img{width:100%;height:100%;object-fit:cover;display:block}
.arch--framed{padding:3px;background:var(--clc-gold-edge);border-radius:var(--clc-arch-radius);aspect-ratio:auto}
.arch--framed > *{border-radius:var(--clc-arch-radius);overflow:hidden;display:block;width:100%}

/* ─── факты ─── */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:calc(var(--s)*4);
  margin-top:calc(var(--s)*6);border-top:1px solid var(--clc-gold-hair);padding-top:calc(var(--s)*4)}
.fact b{font-family:var(--clc-font-display);font-size:34px;display:block;color:var(--gold);line-height:1}
.fact span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.72;display:block;margin-top:6px}

/* ─── расписание вечера ─── */
.time{display:flex;gap:calc(var(--s)*3);align-items:baseline;padding:calc(var(--s)*2.5) 0;
  border-bottom:1px solid rgba(247,244,240,.14)}
.time b{font-family:var(--clc-font-display);font-size:26px;color:var(--gold);min-width:92px}

/* линейка, вырастающая из строки вправо — приём фасадной таблички (стр. 11) */
.rule-out{display:flex;align-items:center;gap:16px}
.rule-out::after{content:'';flex:1;height:1px;background:var(--clc-gold-hair)}

/* ─── кнопка ─── */
.btn{display:inline-block;border:1px solid var(--gold);color:var(--gold);text-decoration:none;
  padding:14px 34px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;transition:.22s}
.btn:hover{background:var(--gold);color:var(--black)}
.btn--solid{background:var(--gold);color:var(--black)}
.btn--solid:hover{background:transparent;color:var(--gold)}

/* ─── вертикальный колонтитул по боковому полю (сетка меню, стр. 23) ─── */
.sidelabel{writing-mode:vertical-rl;text-orientation:mixed;font-size:11px;
  letter-spacing:var(--clc-track-mid);text-transform:uppercase;color:var(--gold);opacity:.8}

/* ─── подвал ─── */
.foot{padding:calc(var(--s)*8) calc(var(--s)*5);border-top:1px solid var(--clc-gold-hair);
  display:flex;flex-wrap:wrap;gap:calc(var(--s)*4);justify-content:space-between;font-size:13px}
.foot a{color:var(--gold);text-decoration:none}

@media(max-width:768px){
  .nav{padding:14px 18px}
  .nav__links{gap:14px}
  .nav__links a:not(.book){display:none}
  .sec{padding:calc(var(--s)*8) calc(var(--s)*2.5)}
  .time{flex-direction:column;gap:2px}
}