/* Система H8 для touch.hateagency.tech — по киту ~/Downloads/hateagency_design_kit (раздел 5, веб).
   Подключать в каждом тесте: <link rel="stylesheet" href="../h8.css">. */
@font-face { font-family: Jeko; src: url(fonts/Jeko-Black.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: Jeko; src: url(fonts/Jeko-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Jeko; src: url(fonts/Jeko-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: Jeko; src: url(fonts/Jeko-ExtraLight.woff2) format("woff2"); font-weight: 200; font-display: swap; }

:root {
  --bg: #101010;
  --text: #FFFFFF;
  --light: #EFEFEF;
  --muted: #A7A7A7;
  --line: rgba(255, 255, 255, .18);
  --line-strong: rgba(255, 255, 255, .45);
  /* лайм трендрепортов — единственный акцент: ключевое слово, цифры, кнопка, реакция сферы */
  --accent: #AEFF00;
  --accent-hover: #D4FF5A;
  --radius: clamp(16px, 1.6vw, 24px);
  --gutter: clamp(16px, 2vw, 24px);
}
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 300 16px/1.45 Jeko, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* шапка как на trends.hateagency.tech: вордмарк + раздел */
.bar { position: fixed; z-index: 10; top: var(--gutter); left: var(--gutter); right: var(--gutter);
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(16, 16, 16, .88); }
.bar .wordmark { display: flex; }
.bar .wordmark img { height: 20px; width: auto; display: block; }
.bar .end { margin-left: auto; color: var(--muted); font-weight: 200; font-size: 14px; padding-right: 12px; white-space: nowrap; }
/* стрелки только SVG (кит: никаких типографских значков в интерфейсе) */
.arr, .pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font: 600 14px/1 Jeko, sans-serif;
  text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .pill:hover, a.pill:hover { border-color: var(--line-strong); } }

/* гигантские слова: Jeko Black прописными, трекинг −4%, интерлиньяж 76% — для латиницы */
.giant { font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; line-height: .76; margin: 0; }
/* кириллица: хвосты Д, Ц, Щ уходят на 0,167 em под строку — при 76% наезжают на следующую строку,
   а у широких С, Ф, Ж при −4% слипаются буквы. Многострочный кириллический гигант — .ru */
.giant.ru { letter-spacing: -.015em; line-height: .94; }

/* метки обреза в углах экрана */
.crop { position: fixed; inset: 8px; z-index: 20; pointer-events: none; --c: rgba(239, 239, 239, .5); --l: 14px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) left top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) right top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) left bottom / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) right bottom / 1px var(--l);
  background-repeat: no-repeat; }

/* метка-плашка: прямоугольник с ExtraLight-текстом */
.plate { display: inline-block; border: 1px solid var(--line); padding: 5px 10px; font: 200 13px/1.3 Jeko, sans-serif;
  color: var(--light); font-variant-numeric: tabular-nums; }

/* крестик в углу рамки — декор */
.x { position: absolute; top: 10px; right: 10px; width: 11px; height: 11px; pointer-events: none;
  background:
    linear-gradient(45deg, transparent calc(50% - .5px), var(--light) 0 calc(50% + .5px), transparent 0),
    linear-gradient(-45deg, transparent calc(50% - .5px), var(--light) 0 calc(50% + .5px), transparent 0); }

/* штрихкод */
.barcode { display: block; width: 92px; height: 12px;
  background: linear-gradient(90deg, var(--light) 0 2px, transparent 0 3px, var(--light) 0 4px, transparent 0 6px,
    var(--light) 0 9px, transparent 0 10px, var(--light) 0 11px, transparent 0 14px, var(--light) 0 15px,
    transparent 0 17px, var(--light) 0 19px, transparent 0 20px, var(--light) 0 21px, transparent 0 24px,
    var(--light) 0 27px, transparent 0 28px, var(--light) 0 29px, transparent 0 31px, var(--light) 0 32px,
    transparent 0 33px, var(--light) 0 35px, transparent 0 38px, var(--light) 0 39px, transparent 0 46px) 0 0 / 46px 100% repeat-x; }

/* зерно поверх всего, как на фото шаблонов */
body::after { content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

@media (max-width: 600px) {
  .bar .end { display: none; }
  .bar { padding-left: 16px; }
  .bar .wordmark img { height: 17px; }
}