/* NOIRA, подача «чёрное на белом» (noira4.tickra.org): светлая и лёгкая.

   Модный журнал, а не отчёт: белый лист, чёрный шрифт, тонкие линии и много
   воздуха. Гротеск Jost в заголовках (геометрия в духе Futura), без теней и
   цветных заливок. Цвет появляется ровно в одном месте: приглушённый красный
   на минусах и просадке, чтобы риск был виден, а страница оставалась чёрно-белой.

   Прежняя «серая» версия была тёмно-серой и тяжёлой; эта светлая.
   Сырой цвет живёт только здесь. */

:root {
  --night:      #fbfbfa;
  --night-2:    #f2f2f0;
  --card:       #ffffff;
  --card-2:     #f6f6f4;

  --line:       rgba(17, 17, 17, .12);
  --line-2:     rgba(17, 17, 17, .26);

  --cream:      #111111;
  --cream-2:    #4a4a4a;
  --cream-3:    #6b6b6b;

  /* чёрный: цифры, кривая и действие; красный: только минус и просадка */
  --gold:       #111111;
  --gold-soft:  rgba(17, 17, 17, .05);
  --gold-deep:  #111111;
  --gold-lift:  #333333;
  --on-gold:    #ffffff;
  --rose:       #b42318;
  --rose-lift:  #c8372b;
  --on-rose:    #ffffff;
  --rose-soft:  rgba(180, 35, 24, .08);

  --ink-fill:   rgba(17, 17, 17, .06);
  --bar:        #2b2b2b;
  --spot:       rgba(17, 17, 17, .04);

  --f-display:  "Jost";
  --f-num:      "Jost";
  --w-num:      400;

  --r-s: 2px;
  --r-m: 4px;
  --r-l: 6px;

  --col: 1180px;
  --pad: 24px;

  --ease: cubic-bezier(.25, .7, .25, 1);
  --t: 200ms;
}

body::before { background: var(--night); }
body::after { opacity: 0; }

body { font-weight: 400; }
h1, h2 { font-family: "Jost", "Golos", sans-serif; font-weight: 400; letter-spacing: -.02em; }
.display { font-weight: 300; letter-spacing: -.03em; }
.display em, .h2 em { font-family: "Jost", sans-serif; font-style: normal; font-weight: 500; color: var(--cream); }
.h2 { font-weight: 300; letter-spacing: -.025em; }

.top { background: rgba(251, 251, 250, .9); }
.dock { background: rgba(251, 251, 250, .96); }
.mnav { background: var(--card); }
.mark-word { font-family: "Jost", sans-serif; font-weight: 500; letter-spacing: .34em; font-size: 20px; }
.mark-dot { background: var(--cream); border-radius: 0; }
.nav a::after { background: var(--cream); }

/* кнопки: чёрная плашка и тонкий контур, без теней и переливов */
.btn { border-radius: var(--r-s); letter-spacing: .04em; }
.btn-ink { background: var(--cream); color: var(--card); box-shadow: none; }
.btn-ink:hover { background: var(--gold-lift); transform: none; box-shadow: none; }
.btn-line { border-color: var(--cream); color: var(--cream); }
.btn-line:hover { background: var(--cream); color: var(--card); border-color: var(--cream); }
.lang, .burger, .panel-range, .panel-range button, .copy { border-radius: var(--r-s); }
.lang button.on, .panel-range button.on { background: var(--cream); color: var(--card); }
.kicker, .sec-num { color: var(--cream); letter-spacing: .22em; }

/* ── карточка графика: тонкая рамка, чёрная кривая, серая заливка ── */
.hcard { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-s); box-shadow: none; }
.hcard-t { color: var(--cream); }
.hcard-v { font-weight: 300; letter-spacing: -.03em; }
.g-line { stroke: var(--cream); stroke-width: 1.8; }
.g-fill { fill: var(--ink-fill); }
.g-grid { stroke: rgba(17, 17, 17, .08); }

/* ── плитки: белое на белом, разделяют линии, а не тени ── */
.brief-item, .xs, .way, .mon, .mo-col, .tranche-wrap, .calc-out, .refbox, .final-in {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: none;
}
.brief-item, .xs { transition: border-color var(--t) var(--ease); }
.brief-item:hover, .xs:hover, .way:hover { border-color: var(--cream); transform: none; }
.brief-ic { border-color: var(--cream); color: var(--cream); border-radius: 0; }
.brief-n { color: var(--cream-3); font-family: "Jost", sans-serif; }
.brief-item h3, .steps-title, .way h3, .refbox h3 { font-family: "Jost", sans-serif; font-weight: 500; letter-spacing: -.01em; }
.way h3 { font-weight: 400; font-size: 30px; }
.xs-n, .fig-n, .calc-n, .pf-n, .tranche td { font-weight: 300; }

/* заливки и столбики графитом, минус красным */
.mo-fill, .dist-in, .sym-in, .xs-up, .xs-pfbar i.up, .xs-legend i.up, .xs-cell.up { background: var(--bar); }
.g-bar { fill: var(--bar); }
.xs-tk.up { stroke: var(--bar); opacity: .5; }
.sl-win { fill: var(--cream); opacity: .06; stroke: var(--cream); }
.sl-knob, .sl-grip { fill: var(--cream); stroke: var(--cream); }

.sec-risk { background: none; }
.mo-year { background: var(--card-2); }
.dist-bar, .sym-bar, .mo-zero { background: var(--night-2); }
.field input, .field textarea { background: var(--card); border-radius: var(--r-s); }
#cd { color-scheme: light; }
.modal { background: var(--card); border-radius: var(--r-s); }
.modal::backdrop { background: rgba(17, 17, 17, .4); }
.mon-shot img { filter: grayscale(1) contrast(1.05); transition: filter var(--t) var(--ease); }
.mon:hover .mon-shot img { filter: none; }
.mon-shot { background: var(--night-2); }
.chart-tip { background: var(--cream); color: var(--card); border-radius: var(--r-s); }
.sl-mask { fill: var(--night); opacity: .75; }
.way-warn { background: var(--night-2); }
.faq summary::after { border-color: var(--cream); }
.ticks li::before { border-color: var(--cream); border-radius: 0; }
.final-in { border-color: var(--cream); }