/* Общая основа лендинга и админки. Язык дизайна — как у демо SKIA:
   узкий гротеск крупно, моно-подписи, уголь / известь / охра, острые углы. */

@font-face { font-family: "Sofia XC"; src: url("fonts/sofia-sans-xc-latin-wght.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sofia XC"; src: url("fonts/sofia-sans-xc-cyrillic-wght.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos"; src: url("fonts/golos-text-latin-wght.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos"; src: url("fonts/golos-text-cyrillic-wght.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-cyrillic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-cyrillic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  color-scheme: dark;
  --char: #12110f; --char-2: #1c1a17; --lime: #ece7dd; --lime-2: #e2dbcd;
  --ochre: #c9934a; --ochre-ink: #85561a;
  --pad: clamp(16px, 3.2vw, 48px);
  --display: "Sofia XC", "Arial Narrow", sans-serif;
  --text: "Golos", system-ui, -apple-system, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}
.tone-dark {
  --bg: var(--char); --fg: var(--lime); --muted: #a8a194;
  --line: rgba(236, 231, 221, 0.16); --line-strong: rgba(236, 231, 221, 0.5); --accent: var(--ochre);
  --error: #e39a7f;
  background: var(--bg); color: var(--fg);
}
.tone-light {
  --bg: var(--lime); --fg: var(--char); --muted: #68625a;
  --line: rgba(18, 17, 15, 0.16); --line-strong: rgba(18, 17, 15, 0.5); --accent: var(--ochre-ink);
  --error: #9a3f2a;
  background: var(--bg); color: var(--fg);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--char); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--text); font-size: 17px; line-height: 1.55; color: var(--lime); background: var(--char);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
:where(h1, h2, h3, p, figure, dl, dd, ol, ul, blockquote) { margin: 0; padding: 0; }
:where(ol, ul) { list-style: none; }
:where(h1, h2, h3) { font-weight: inherit; font-size: inherit; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }
::selection { background: var(--ochre); color: var(--char); }

.wrap { padding-inline: var(--pad); max-width: 1760px; margin-inline: auto; }
.label { font-family: var(--mono); font-weight: 400; font-size: 11.5px; line-height: 1.45; letter-spacing: 0.08em; text-transform: uppercase; }
.muted { color: var(--muted); }
.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.005em; }

/* ссылка-действие: моно, подчёркивание, стрелка уезжает вправо */
.arrow { width: 24px; height: 12px; flex: none; }
.link {
  display: inline-flex; align-items: center; gap: 14px; min-height: 44px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; transition: color 0.3s ease;
}
.link .arrow { transition: transform 0.5s var(--ease); }
.link:hover .arrow, .link:focus-visible .arrow { transform: translateX(6px); }
.link:hover { color: var(--accent, var(--ochre)); }
.link--plain { border: 0; min-height: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }

/* кнопка: прямоугольник, моно, стрелка */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 60px; padding: 0 22px; background: var(--fg); color: var(--bg);
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn .arrow { transition: transform 0.5s var(--ease); }
.btn:hover { background: var(--ochre); color: var(--char); }
.btn:hover .arrow { transform: translateX(6px); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.btn--wide { width: 100%; }
.btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost:hover { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px currentColor; }
.btn--small { min-height: 46px; padding: 0 16px; font-size: 12px; }

/* поля: только нижняя линия */
.field { display: grid; gap: 8px; }
.field > span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.field > span i { font-style: normal; opacity: 0.7; margin-left: 8px; }
.field small { font-size: 13px; color: var(--muted); }
.field input, .field textarea {
  width: 100%; padding: 10px 0 12px; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; color: var(--fg); font: 400 20px/1.35 var(--text);
  transition: border-color 0.3s ease; -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.6; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ochre); }
.field.bad input, .field.bad textarea { border-bottom-color: var(--error); }
.field__error { font-style: normal; font-size: 14px; color: var(--error); }
.field__error:empty { display: none; }

/* движение: буквы поднимаются из-под края слова, блоки всплывают один раз */
.rise__word { display: inline-block; overflow: hidden; white-space: nowrap; padding-block: 0.16em 0.06em; margin-block: -0.16em -0.06em; vertical-align: bottom; }
.rise__ch { display: inline-block; }
.js .rise .rise__ch { transform: translateY(112%); }
.js .rise.in .rise__ch { transform: none; transition: transform 1s var(--ease) calc(var(--i, 0) * 38ms); }
.js .rise--load .rise__ch { animation: ch-rise 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms + 120ms); transform: none; }
@keyframes ch-rise { from { transform: translateY(112%); } to { transform: none; } }
.js [data-reveal] { opacity: 0; transform: translateY(12px); }
.js [data-reveal].in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.6s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
[data-d="1"] { --d: 1; } [data-d="2"] { --d: 2; } [data-d="3"] { --d: 3; } [data-d="4"] { --d: 4; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rise .rise__ch, .js [data-reveal] { transform: none; opacity: 1; }
}