/* Коносамент: шрифты, токены, база */

/* Заголовки: Sofia Sans Extra Condensed. Текст: Golos Text. ₽ лежит в latin-ext. */
@font-face { font-family: "Sofia Sans XC"; font-weight: 700; font-display: swap; src: url("../fonts/sofia-sans-extra-condensed-cyrillic-700-normal.885a135dedb3.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Sofia Sans XC"; font-weight: 700; font-display: swap; src: url("../fonts/sofia-sans-extra-condensed-latin-700-normal.10d5a8028380.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Sofia Sans XC"; font-weight: 700; font-display: swap; src: url("../fonts/sofia-sans-extra-condensed-latin-ext-700-normal.19a30214a4e4.woff2") format("woff2"); unicode-range: U+20BD; }
@font-face { font-family: "Sofia Sans XC"; font-weight: 800; font-display: swap; src: url("../fonts/sofia-sans-extra-condensed-cyrillic-800-normal.4a64828f358a.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Sofia Sans XC"; font-weight: 800; font-display: swap; src: url("../fonts/sofia-sans-extra-condensed-latin-800-normal.1eeee1248c62.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Sofia Sans XC"; font-weight: 800; font-display: swap; src: url("../fonts/sofia-sans-extra-condensed-latin-ext-800-normal.86f7e4c1d85b.woff2") format("woff2"); unicode-range: U+20BD; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url("../fonts/golos-text-cyrillic-400-normal.a82793f97f91.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url("../fonts/golos-text-latin-400-normal.4b88b42724af.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url("../fonts/golos-text-latin-ext-400-normal.38f4f407f988.woff2") format("woff2"); unicode-range: U+20BD; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap; src: url("../fonts/golos-text-cyrillic-500-normal.97abfef86e34.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap; src: url("../fonts/golos-text-latin-500-normal.b0c19f244d45.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap; src: url("../fonts/golos-text-latin-ext-500-normal.6589ecef5b22.woff2") format("woff2"); unicode-range: U+20BD; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url("../fonts/golos-text-cyrillic-600-normal.894768c4c711.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url("../fonts/golos-text-latin-600-normal.2938437410d6.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url("../fonts/golos-text-latin-ext-600-normal.a4d80354de74.woff2") format("woff2"); unicode-range: U+20BD; }

:root {
  /* бумага */
  --paper: #f3ede0;
  --paper-deep: #e8dfcc;
  --sheet: #fcf9f2;
  /* чернила */
  --ink: #11263d;
  --ink-2: #1b3753;
  --ink-3: #2b4a69;
  --ink-text: #3d4f62;
  --on-ink: #f3ede0;
  --on-ink-soft: #b9c4cd;
  --rule: rgb(17 38 61 / 0.22);
  --rule-strong: #11263d;
  --rule-on-ink: rgb(243 237 224 / 0.2);
  /* штамп: только действия и печати */
  --stamp: #bb2c19;
  --stamp-hover: #99210f;
  --stamp-on-ink: #ff8a73;
  /* страны */
  --jp: #8e2a4e;
  --jp-soft: #efd9dd;
  --jp-on-ink: #f2a6bc;
  --kr: #0c6660;
  --kr-soft: #d3e6df;
  --kr-on-ink: #7fd6cc;
  --cn: #8a5600;
  --cn-soft: #f0e0b9;
  --cn-on-ink: #f0c45c;
  /* состояния */
  --ok: #1d6a42;
  --err: #a8200e;
  /* шрифты */
  --font-display: "Sofia Sans XC", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-text: "Golos Text", "Segoe UI", system-ui, sans-serif;
  /* кегли */
  --fs-hero: clamp(3.75rem, 1.9rem + 7.2vw, 8.6rem);
  --fs-h2: clamp(2.75rem, 1.9rem + 3.9vw, 6rem);
  --fs-h3: clamp(1.75rem, 1.5rem + 0.9vw, 2.5rem);
  --fs-body: 1rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;
  /* ритм */
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);
  --section: clamp(4rem, 2.6rem + 6vw, 8.5rem);
  --max: 1440px;
  --header-h: 4.25rem;
  /* движение */
  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow-sheet: 0 1px 0 rgb(17 38 61 / 0.14), 0 18px 34px -22px rgb(17 38 61 / 0.5);
}

.c-jp { --accent: var(--jp); --accent-soft: var(--jp-soft); --accent-on-ink: var(--jp-on-ink); }
.c-kr { --accent: var(--kr); --accent-soft: var(--kr-soft); --accent-on-ink: var(--kr-on-ink); }
.c-cn { --accent: var(--cn); --accent-soft: var(--cn-soft); --accent-on-ink: var(--cn-on-ink); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--paper) url("../img/grain.7dc14b68b7d1.svg");
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
main { flex: 1 0 auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
summary { cursor: pointer; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.002em;
  text-wrap: balance;
}

:focus-visible { outline: 3px solid var(--stamp); outline-offset: 2px; }
.on-ink :focus-visible { outline-color: var(--on-ink); }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--on-ink);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* honeypot: скрыт от людей и от чтения с экрана */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* индикатор htmx: скрипт не вставляет свои стили, см. includeIndicatorStyles */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}