*,*::before,*::after{box-sizing:border-box}

/* Young Serif — ОДНО начертание, поэтому `font-weight:400` и в
   @font-face, и у всех заголовков: 700 заставило бы браузер
   синтезировать жир. Faustina переменная, 400–700.
   У обеих есть `tnum`, и он сохранён при подрезке, поэтому фича
   включается на `body`: в этом своде цифры стоят колонками на каждой
   странице, а по умолчанию обе дают пропорциональные. */
@font-face{font-family:'JnDis';src:url('/assets/fonts/jndis.woff2')format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JnText';src:url('/assets/fonts/jntext.woff2')format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}

html{-webkit-text-size-adjust:100%;font-size:100%;background:#faf8fb;
  scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}}

body{margin:0;color:#1a1620;background:#faf8fb;
  font-family:'JnText',Georgia,'Times New Roman',serif;
  font-size:1.075rem;line-height:1.64;font-weight:400;
  font-feature-settings:"tnum" 1,"lnum" 1;
  -webkit-font-smoothing:antialiased}

h1,h2,h3{font-family:'JnDis',Georgia,serif;font-weight:400;
  letter-spacing:-.006em;line-height:1.1;margin:0}
a{color:inherit}
img,svg{max-width:100%}

.jn-skip{position:absolute;left:-9999px}
.jn-skip:focus{left:.6rem;top:.6rem;z-index:40;background:#1a1620;
  color:#faf8fb;padding:.55rem .9rem;border-radius:6px}

.jn-wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem;width:100%}

/* Надстрочная метка. На листе — flamed, на тёмном — flamel: сам
   #db6a3a на листе даёт около 3.4:1 и мелким текстом не ставится. */
.jn-eb{margin:0 0 1rem;font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:#9c3f0d}

/* ---------------------------------------------------------------- */
/*  Липкая шапка                                                     */
/* ---------------------------------------------------------------- */
.jn-nav{position:sticky;top:0;z-index:30;background:rgba(250,248,251,.9);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid #e5dfeb}
.jn-nav__in{max-width:72rem;margin:0 auto;padding:.72rem 1.5rem;
  display:flex;gap:.6rem 1.4rem;align-items:center}
.jn-nav__b{font-family:'JnDis',Georgia,serif;font-weight:400;
  font-size:1.2rem;letter-spacing:-.01em;line-height:1;
  text-decoration:none;white-space:nowrap;margin-right:auto}
.jn-nav nav{display:flex;flex-wrap:wrap;gap:.4rem 1.15rem;align-items:center}
.jn-nav nav a{font-size:.9rem;font-weight:600;color:#4d4653;
  text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.jn-nav nav a:hover,.jn-nav nav a[aria-current]{color:#1a1620;
  border-bottom-color:#db6a3a}
/* Текст на акценте — ТЁМНЫЙ: белым по #db6a3a выходит 3.4:1, сливовым
   — 4.9:1. Пятая сессия подряд со светлым акцентом, и первая, где это
   заложено до аудита, а не исправлено после. */
.jn-nav__cta{display:inline-block;background:#db6a3a;color:#241a2e;
  font-size:.88rem;font-weight:700;text-decoration:none;
  padding:.5rem 1.05rem;border-radius:999px;white-space:nowrap}
.jn-nav__cta:hover{background:#e67c4f}

/* ---------------------------------------------------------------- */
/*  Герой и низкая шапка                                             */
/* ---------------------------------------------------------------- */
.jn-hero,.jn-head{background:#241a2e;color:#f4f0f6;
  background-image:radial-gradient(circle at 76% 18%,
    rgba(219,106,58,.22),transparent 50%),
    radial-gradient(circle at 8% 88%,rgba(127,180,154,.12),transparent 52%)}
.jn-hero .jn-eb,.jn-head .jn-eb{color:#f0996c}
.jn-hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:2.6rem;align-items:center;padding-top:4.2rem;padding-bottom:1.6rem}
.jn-hero h1{font-size:clamp(2.35rem,5.4vw,3.9rem);color:#f4f0f6}
.jn-hero__l{margin:1.5rem 0 0;font-size:1.1rem;line-height:1.62;
  color:#b9adc6;max-width:34rem}
.jn-hero__in--one{grid-template-columns:minmax(0,1fr)}
.jn-hero__in--one .jn-hero__t{max-width:46rem}
.jn-head{padding:3rem 0 0}
.jn-head h1{font-size:clamp(1.95rem,4.2vw,2.8rem);color:#f4f0f6;
  max-width:26ch}
.jn-head__d{margin:1rem 0 0;font-size:1.05rem;color:#b9adc6;max-width:52ch}

.jn-go{display:flex;flex-wrap:wrap;gap:.7rem;margin:2rem 0 0}
.jn-go a{display:inline-block;padding:.72rem 1.35rem;border-radius:999px;
  font-size:.96rem;font-weight:700;text-decoration:none;
  border:1.5px solid transparent}
.jn-go a:first-child{background:#db6a3a;color:#241a2e}
.jn-go a:first-child:hover{background:#e67c4f}
.jn-go a+a{border-color:#4d3a63;color:#f4f0f6}
.jn-go a+a:hover{border-color:#f0996c;color:#f0996c}

/* Лестница часов */
.jn-fig{margin:0}
.jn-stair{display:block;width:100%}
.jn-key{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:1.1rem 0 0;
  font-size:.76rem;font-weight:600;color:#b9adc6}
.jn-key span{display:flex;align-items:center;gap:.45rem}
.jn-key s{display:block;width:.85rem;height:.6rem;border-radius:2px;
  text-decoration:none;flex:none}

/* ---------------------------------------------------------------- */
/*  Полосы                                                           */
/* ---------------------------------------------------------------- */
.jn-band{padding:4.2rem 0}
.jn-band--c{background:#efeaf4}
.jn-band--w{background:#f8efe9}
.jn-band__h{max-width:42rem;margin:0 0 2.4rem}
.jn-band__h h2{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.jn-band__h p{margin:.9rem 0 0;color:#4d4653;font-size:1.05rem}

.jn-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.2rem;border-top:1px solid #c3bccb;padding-top:1.6rem}
.jn-stats div{min-width:0}
.jn-stats b{display:block;font-family:'JnDis',Georgia,serif;font-weight:400;
  font-size:clamp(2rem,3.8vw,2.9rem);line-height:1;letter-spacing:-.01em}
.jn-stats span{display:block;margin-top:.5rem;font-size:.88rem;
  line-height:1.45;color:#4d4653}
.jn-caveat{margin:2.2rem 0 0;max-width:62rem;font-size:.94rem;
  line-height:1.62;color:#4d4653}

/* ---------------------------------------------------------------- */
/*  Карточки                                                         */
/* ---------------------------------------------------------------- */
.jn-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1.1rem}
.jn-card{display:flex;flex-direction:column;background:#ffffff;
  border:1px solid #e5dfeb;border-radius:16px;
  padding:1.5rem 1.4rem 1.3rem;overflow:hidden;
  box-shadow:0 1px 2px rgba(36,26,46,.04),0 8px 22px rgba(36,26,46,.06);
  transition:transform .16s ease,box-shadow .16s ease}
.jn-card:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(36,26,46,.08),0 16px 34px rgba(36,26,46,.11)}
.jn-card__m{display:flex;align-items:center;justify-content:center;
  margin:-1.5rem -1.4rem 1.25rem;height:6.4rem;background:#efeaf4;
  border-bottom:1px solid #e0d8e8;color:#9c3f0d}
.jn-mot{display:block;width:10rem}
.jn-card h3{font-size:1.3rem;margin:0 0 .6rem;line-height:1.18}
.jn-card h3 a{text-decoration:none}
.jn-card h3 a:hover{color:#9c3f0d}
.jn-card p{margin:0;font-size:.97rem;line-height:1.56;color:#4d4653}
.jn-card__k{margin:0 0 .9rem!important;font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#9c3f0d}
.jn-card__c{margin-top:auto!important;padding-top:1.1rem;font-size:.86rem;
  font-weight:700;color:#1a1620}

/* ---------------------------------------------------------------- */
/*  Тёмная панель знака                                              */
/* ---------------------------------------------------------------- */
.jn-b,.jn-p{background:#332544;color:#f4f0f6;border:1px solid #4d3a63;
  border-radius:16px;padding:1.5rem 1.5rem 1.3rem;margin:0 0 1.4rem}
/* z-index обязателен: отрицательное поле выводит панель за край тёмной
   полосы, но следующая полоса — сосед ПОЗЖЕ в потоке и рисует свой фон
   поверх. transform для нахлёста не годится: он не отнимает высоту.
   Урок 86-й сессии. Третий участник пары — страница раздела, где за
   шапкой идёт .jn-wrap > .jn-hub, а не .jn-doc; забывается каждый раз
   (урок 88-й). */
.jn-hero .jn-b,.jn-head .jn-b{position:relative;z-index:2}
.jn-hero .jn-b{margin:1.8rem 0 -3.8rem}
.jn-head .jn-b{margin:1.8rem 0 -3.2rem}
.jn-hero+.jn-band,.jn-head+.jn-doc{padding-top:6.2rem}
.jn-head+.jn-wrap>.jn-hub{padding-top:6.4rem}
.jn-p{margin:2rem 0}
/* Знак ШИРЕ меры чтения: внутри 38rem колонка пилюль и область
   нахлёста съедают столько, что подпись строки ломается на три.
   Видно только на собранной СТАТЬЕ. */
.jn-body>.jn-p{width:min(60rem,calc(100vw - 3rem));margin-left:50%;
  transform:translateX(-50%)}
.jn-p__t{margin:0 0 1rem;padding-bottom:.8rem;
  border-bottom:1px solid #4d3a63;font-size:.98rem;font-weight:700;
  line-height:1.42;color:#f4f0f6}
.jn-p__k{margin:1rem 0 0;padding-top:.75rem;border-top:1px solid #4d3a63;
  font-size:.69rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#f0996c}
.jn-p__n{margin:.6rem 0 0;font-size:.88rem;line-height:1.52;color:#b9adc6}
.jn-p__n b{color:#f4f0f6;font-weight:700}
.jn-lg{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin:1rem 0 0;
  font-size:.73rem;font-weight:600;color:#b9adc6}
.jn-lg span{display:flex;align-items:center;gap:.45rem}
.jn-lg s{display:block;width:.9rem;height:.7rem;border-radius:2px;
  text-decoration:none;flex:none}
/* Плашка ответа повторяет саму зарубку на полосе, а не её фон. */
.jn-lg__a{background:#f4f0f6;width:.3rem!important}
/* Плашки двух областей повторяют их ЗАЛИВКУ и ОБВОДКУ разом: сплошной
   квадрат обещал бы на картинке сплошной цвет, которого там нет. */
.jn-lg__i{background:rgba(127,180,154,.34);box-shadow:inset 0 0 0 2px #7fb49a}
.jn-lg__r{background:rgba(219,106,58,.34);box-shadow:inset 0 0 0 2px #db6a3a}

/* --- Знак 1: откуда пришло знание --- */
.jn-t__h{display:grid;grid-template-columns:1fr 11rem 4rem;gap:.7rem;
  margin:0 0 .4rem}
.jn-t__h>b{font-size:.65rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#b9adc6}
.jn-t__h>b:last-child{text-align:right}
.jn-t__r{display:grid;grid-template-columns:1fr 11rem 4rem;gap:.7rem;
  align-items:center;padding:.55rem 0;border-bottom:1px solid #4d3a63}
.jn-t__r:last-of-type{border-bottom:0}
.jn-t__q{margin:0;font-size:.95rem;line-height:1.35}
.jn-t__p{display:inline-block;justify-self:start;padding:.16rem .6rem;
  border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  white-space:nowrap}
.jn-t__p--told{background:#7fb49a;color:#241a2e}
.jn-t__p--written{background:#b9adc6;color:#241a2e}
.jn-t__p--asked{background:#db6a3a;color:#241a2e}
.jn-t__p--alone{background:#4b4455;color:#f4f0f6}
.jn-t__n{font-size:.84rem;font-weight:600;color:#b9adc6;text-align:right}
.jn-t__n b{color:#f4f0f6;font-weight:700}
.jn-t__why{grid-column:1/-1;margin:.3rem 0 0;font-size:.88rem;
  line-height:1.48;color:#b9adc6}
/* Итоговая полоса: одна строка на все четыре источника. */
.jn-t__band{display:flex;height:1.2rem;margin:1.1rem 0 0;border-radius:4px;
  overflow:hidden;background:#4d3a63}
.jn-t__b{display:block;height:100%}
.jn-t__b--told{background:#7fb49a}
.jn-t__b--written{background:#b9adc6}
.jn-t__b--asked{background:#db6a3a}
.jn-t__b--alone{background:#4b4455}
.jn-lg s.jn-t__b--told,.jn-lg s.jn-t__b--written,
.jn-lg s.jn-t__b--asked,.jn-lg s.jn-t__b--alone{display:block}

/* --- Знак 2: часы до вопроса --- */
.jn-s__h{display:grid;grid-template-columns:1fr 18rem 8rem;gap:.7rem;
  margin:0 0 .4rem}
.jn-s__h>b{font-size:.65rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#b9adc6}
.jn-s__h>b:last-child{text-align:right}
.jn-s__r{display:grid;grid-template-columns:1fr 18rem 8rem;gap:.7rem;
  align-items:center;padding:.55rem 0;border-bottom:1px solid #4d3a63}
.jn-s__r:last-of-type{border-bottom:0}
.jn-s__q{margin:0;font-size:.95rem;line-height:1.35}
.jn-s__t{display:block}
.jn-s__bar{display:block;height:1.1rem;border-radius:3px;background:#db6a3a}
.jn-s__n{font-size:.84rem;font-weight:600;color:#b9adc6;text-align:right}
.jn-s__n b{color:#f4f0f6;font-weight:700;font-size:1rem}
/* Минуты ответа — ОТДЕЛЬНОЙ строкой и мелко. Внутри полосы они
   становятся полоской в один пиксель, которую нельзя ни увидеть, ни
   подписать; рядом числом они читаются и не врут о масштабе. */
.jn-s__n em{display:block;font-style:normal;font-size:.72rem;
  font-weight:600;color:#f0996c;margin-top:.1rem}
.jn-s__why{grid-column:1/-1;margin:.3rem 0 0;font-size:.88rem;
  line-height:1.48;color:#b9adc6}

/* --- Знак 3: две области внахлёст --- */
.jn-c__v{display:block;width:100%;max-width:34rem;margin:.2rem 0 .2rem}
.jn-c__f{fill:#f4f0f6;font-family:'JnDis',Georgia,serif;font-size:26px;
  text-anchor:middle}
.jn-c__f--m{fill:#f4f0f6}
.jn-c__gs{display:grid;gap:.9rem;margin:1.2rem 0 0}
.jn-c__g{border-top:1px solid #4d3a63;padding-top:.7rem}
.jn-c__gt{margin:0 0 .4rem;font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.jn-c__i{color:#7fb49a}
.jn-c__x{color:#f4f0f6}
.jn-c__n{color:#f0996c}
.jn-c__l{margin:0;padding:0;list-style:none}
.jn-c__l li{margin:0 0 .35rem;font-size:.9rem;line-height:1.48;
  color:#b9adc6}
.jn-c__l b{color:#f4f0f6;font-weight:700}

/* ---------------------------------------------------------------- */
/*  Списки разделов                                                  */
/* ---------------------------------------------------------------- */
.jn-sec{padding:2.6rem 0;border-top:1px solid #e5dfeb}
.jn-sec:first-of-type{border-top:0}
.jn-sec__h{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);
  gap:1.6rem 3rem;align-items:start}
.jn-sec__k{grid-column:1;margin:0 0 .7rem;display:flex;flex-wrap:wrap;
  gap:.5rem .9rem;font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#9c3f0d}
.jn-sec__k span+span{color:#4d4653;font-weight:600}
.jn-sec h2{grid-column:1;font-size:clamp(1.55rem,2.7vw,2.05rem)}
.jn-sec h2 a{text-decoration:none}
.jn-sec h2 a:hover{color:#9c3f0d}
.jn-sec__d{grid-column:1;margin:.8rem 0 0;font-size:1rem;color:#4d4653}
.jn-list{grid-column:2;grid-row:2/span 3;margin:0;padding:0;list-style:none;
  columns:2;column-gap:2.2rem}
.jn-list li{break-inside:avoid;margin:0 0 .5rem}
.jn-list a{display:block;font-size:.97rem;line-height:1.42;
  text-decoration:none;padding-left:2.2rem;position:relative}
.jn-list a::before{content:attr(data-n);position:absolute;left:0;top:.08rem;
  font-size:.74rem;font-weight:700;color:#c3bccb}
.jn-list a:hover{color:#9c3f0d}
.jn-list a:hover::before{color:#9c3f0d}

/* ---------------------------------------------------------------- */
/*  Блок призыва                                                     */
/* ---------------------------------------------------------------- */
/* Весь текст на акценте тёмный: белый по #db6a3a даёт 3.4:1. */
.jn-end{background:#db6a3a;color:#241a2e;border-radius:20px;
  padding:2.8rem 2.4rem}
/* Пятая сессия подряд, где самым тёмным местом страницы оказывается
   мелкая прописная метка на светлом акценте. На этот раз это было
   предсказано в комментарии выше и всё равно промахнулось: #4a1c02
   дал 4.21:1 при нужных 4.5. Берётся #241a2e — 4.86:1, замерено.
   Вывод на будущее: не подбирать такой цвет на глаз вовсе, а ставить
   сразу тот же тон, что у заголовка. */
.jn-end .jn-sec__k{color:#241a2e}
.jn-end h2{font-size:clamp(1.75rem,3.3vw,2.4rem);max-width:22ch;
  color:#241a2e}
.jn-end>p{margin:1.1rem 0 0;max-width:52rem;font-size:1.05rem;color:#301405}
.jn-end__l{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.7rem 0 0;padding:0;
  list-style:none}
.jn-end__l a{display:inline-block;background:#241a2e;color:#f4f0f6;
  padding:.68rem 1.3rem;border-radius:999px;font-size:.95rem;font-weight:700;
  text-decoration:none}
.jn-end__l a:hover{background:#332544}

/* ---------------------------------------------------------------- */
/*  Статья                                                           */
/* ---------------------------------------------------------------- */
.jn-doc{padding:3.4rem 1.5rem 4rem}
.jn-body{max-width:38rem;margin:0 auto}
.jn-crumb{max-width:38rem;margin:0 auto 1.6rem;font-size:.86rem;color:#4d4653}
.jn-crumb a{color:#9c3f0d;font-weight:700;text-decoration:none}
.jn-crumb a:hover{text-decoration:underline}
.jn-meta{max-width:38rem;margin:0 auto 1.6rem;font-size:.72rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4d4653}
.jn-body p{margin:0 0 1.15rem}
.jn-body>p:first-of-type{font-size:1.2rem;line-height:1.56;color:#1a1620}
.jn-body h2{font-size:clamp(1.45rem,2.5vw,1.85rem);margin:2.6rem 0 .9rem;
  line-height:1.16}
.jn-body h3{font-family:'JnText',Georgia,serif;font-size:1.1rem;
  font-weight:700;letter-spacing:0;margin:1.9rem 0 .6rem}
.jn-s2{position:relative}
.jn-s2::before{content:attr(data-n);display:block;font-size:.7rem;
  font-weight:700;letter-spacing:.14em;color:#9c3f0d;
  margin:2.6rem 0 -2.1rem}
.jn-s2>h2:first-child{margin-top:2.6rem}
.jn-body ul,.jn-body ol{margin:0 0 1.15rem;padding-left:1.3rem}
.jn-body li{margin:0 0 .45rem}
.jn-body a{color:#9c3f0d;text-decoration:underline;
  text-underline-offset:.16em;text-decoration-thickness:1px}
.jn-body a:hover{text-decoration-thickness:2px}
.jn-body strong{font-weight:700}

/* Таблицы, цитаты и код: без этих правил приезжают голыми, и видно
   это только на блок-тесте. */
.jn-body table{width:100%;border-collapse:collapse;margin:1.5rem 0;
  font-size:.94rem}
.jn-body th,.jn-body td{text-align:left;padding:.55rem .7rem;
  border-bottom:1px solid #e5dfeb;vertical-align:top}
.jn-body thead th{font-size:.69rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#4d4653;border-bottom:1.5px solid #c3bccb}
.jn-body tbody tr:last-child td{border-bottom:0}
.jn-body blockquote{margin:1.6rem 0;padding:.3rem 0 .3rem 1.3rem;
  border-left:3px solid #db6a3a;color:#4d4653;font-size:1.06rem}
.jn-body blockquote p:last-child{margin-bottom:0}
.jn-body code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.86em;background:#efeaf4;border:1px solid #e5dfeb;
  border-radius:4px;padding:.08em .34em}
.jn-body pre{margin:1.5rem 0;padding:1rem 1.1rem;background:#241a2e;
  color:#f4f0f6;border-radius:12px;overflow-x:auto;font-size:.86rem;
  line-height:1.56}
.jn-body pre code{background:none;border:0;padding:0;color:inherit}
.jn-body hr{margin:2.2rem 0;border:0;border-top:1px solid #e5dfeb}

.jn-next{max-width:60rem;margin:3.6rem auto 0;padding-top:2.4rem;
  border-top:1px solid #e5dfeb}
.jn-next__t{margin:0 0 1.2rem;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#9c3f0d}
.jn-next ul{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem;
  margin:0;padding:0;list-style:none}
.jn-next li{margin:0}
.jn-next a{display:block;height:100%;background:#ffffff;
  border:1px solid #e5dfeb;border-radius:14px;padding:1.05rem 1.15rem;
  font-size:.99rem;line-height:1.42;text-decoration:none;
  transition:border-color .16s ease,transform .16s ease}
.jn-next a:hover{border-color:#db6a3a;transform:translateY(-2px)}

.jn-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:1.1rem;padding:3.4rem 0 1rem}
.jn-hub__row{background:#ffffff;border:1px solid #e5dfeb;border-radius:16px;
  padding:1.4rem 1.35rem;transition:border-color .16s ease,transform .16s ease}
.jn-hub__row:hover{border-color:#db6a3a;transform:translateY(-2px)}
.jn-hub__row h2{font-size:1.24rem;margin:0 0 .5rem;line-height:1.2}
.jn-hub__row h2 a{text-decoration:none}
.jn-hub__row p{margin:0;font-size:.95rem;line-height:1.52;color:#4d4653}

/* ---------------------------------------------------------------- */
/*  Подвал                                                           */
/* ---------------------------------------------------------------- */
.jn-foot{background:#241a2e;color:#b9adc6;margin-top:4.5rem;
  padding:3.4rem 0 2.6rem}
.jn-foot__in{max-width:72rem;margin:0 auto;padding:0 1.5rem}
.jn-foot__g{display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(9rem,1fr));
  gap:2rem}
.jn-foot__t{margin:0 0 .9rem;font-family:'JnDis',Georgia,serif;
  font-weight:400;font-size:1.2rem;color:#f4f0f6;letter-spacing:-.01em}
.jn-foot__g>div+div .jn-foot__t{font-family:'JnText',Georgia,serif;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#f0996c}
.jn-foot__about{margin:0;font-size:.94rem;line-height:1.56;max-width:30ch}
.jn-foot ul{margin:0;padding:0;list-style:none}
.jn-foot li{margin:0 0 .5rem}
.jn-foot li a{font-size:.94rem;text-decoration:none}
.jn-foot li a:hover{color:#f0996c}
.jn-foot__note{margin:2.8rem 0 0;padding-top:1.6rem;
  border-top:1px solid #4d3a63;font-size:.84rem;line-height:1.6;
  max-width:62rem}

/* ---------------------------------------------------------------- */
/*  Узко                                                             */
/* ---------------------------------------------------------------- */
@media(max-width:1000px){
  .jn-s__h,.jn-s__r{grid-template-columns:1fr 11rem 7rem}
  .jn-t__h,.jn-t__r{grid-template-columns:1fr 9rem 3.4rem}
}
@media(max-width:960px){
  .jn-hero__in{grid-template-columns:1fr;gap:2rem;padding-top:3rem}
  .jn-hero__v{order:-1}
  .jn-sec__h{grid-template-columns:1fr}
  .jn-list{grid-column:1;grid-row:auto;margin-top:1.2rem}
  .jn-foot__g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  body{font-size:1.02rem}
  .jn-nav nav{display:none}
  .jn-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
  .jn-list{columns:1}
  .jn-band{padding:3rem 0}
  .jn-end{padding:2rem 1.5rem}
  .jn-b,.jn-p{padding:1.2rem 1.1rem 1.05rem;border-radius:14px}
  /* Полоса знака уходит под подпись, а не жмётся в колонку. */
  .jn-t__h,.jn-t__r{grid-template-columns:1fr 3.4rem}
  .jn-s__h,.jn-s__r{grid-template-columns:1fr 7rem}
  .jn-t__h>b:nth-child(2),.jn-s__h>b:nth-child(2){display:none}
  .jn-t__q,.jn-s__q{grid-column:1/-1;margin-bottom:.35rem}
  .jn-t__p,.jn-s__t{grid-column:1/-1}
  .jn-c__v{max-width:none}
  .jn-foot__g{grid-template-columns:1fr}
}


/* Career tool guides */
.jn-context{margin:1.35rem 0;padding:1rem 1.15rem;border-left:4px solid #db6a3a;background:#f2efe6}.jn-context p{margin:.35rem 0}.jn-guide-hub{margin:4rem auto}.jn-guide-hub__head{max-width:48rem}.jn-guide-hub__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.4rem}.jn-guide-card{display:block;padding:1.35rem;border:1px solid #d7ccde;background:#fff;color:inherit;text-decoration:none;transition:.18s}.jn-guide-card:hover{transform:translateY(-2px);border-color:#4d3a63}.jn-guide-card b,.jn-guide-card span{display:block}.jn-guide-card b{font-size:1.18rem;margin:.35rem 0}.jn-guide-card span{color:#725f7c}
.jn-listicle{background:#fbfaf6;color:#1e292a}.jn-list-hero{padding:5rem 0 3.5rem;background:#f4f0f6;border-bottom:1px solid #d7ccde}.jn-list-hero h1{font-size:clamp(2.7rem,7vw,6rem);line-height:.94;letter-spacing:-.045em;max-width:64rem;margin:.35rem 0 1.3rem}.jn-list-hero__dek{font-size:1.24rem;line-height:1.55;max-width:50rem}.jn-list-hero__meta{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}.jn-list-main{max-width:76rem;padding-top:2rem;padding-bottom:5rem}.jn-list-main>section{margin:4rem 0}.jn-list-main h2{font-size:clamp(1.8rem,4vw,3rem);line-height:1.08}.jn-list-intro{max-width:54rem}.jn-table-scroll{overflow:auto}.jn-compare{width:100%;border-collapse:collapse;background:#fff}.jn-compare th,.jn-compare td{text-align:left;vertical-align:top;padding:1rem;border-bottom:1px solid #ded5e3}.jn-compare th{background:#4d3a63;color:#fff}.jn-tools{display:grid;gap:1.15rem}.jn-tool{display:grid;grid-template-columns:4rem 1fr;gap:1.25rem;padding:1.55rem;background:#fff;border:1px solid #ded5e3}.jn-tool__num{font-size:2.1rem;color:#b94f27}.jn-tool h2{margin:0}.jn-tool h3{margin-bottom:.2rem}.jn-tool__verdict{font-weight:700;color:#665472}.jn-tool__link{display:inline-block;margin-top:.55rem}.jn-method{padding:2rem;background:#4d3a63;color:#fff}.jn-method__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.jn-pilot ol{list-style:none;padding:0;counter-reset:step;display:grid;gap:.75rem}.jn-pilot li{position:relative;padding:1rem 1rem 1rem 4rem;background:#f2efe6}.jn-pilot li:before{counter-increment:step;content:counter(step);position:absolute;left:1rem;font-size:1.7rem;color:#b94f27}.jn-faq details{border-top:1px solid #ded5e3;padding:1rem 0}.jn-faq summary{font-weight:700;cursor:pointer}.jn-layout-split .jn-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.jn-layout-split .jn-tool{grid-template-columns:1fr}.jn-layout-split .jn-tool__num{font-size:3.5rem}.jn-layout-directory .jn-list-hero{background:#4d3a63;color:#fff}.jn-layout-directory .jn-tools{gap:0}.jn-layout-directory .jn-tool{border-left:6px solid #db6a3a}.jn-layout-directory .jn-tool+.jn-tool{border-top:0}.jn-layout-checklist .jn-tool{border-left:5px solid #8d6cb0}.jn-foot__guides,.jn-foot nav{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem}
@media(max-width:760px){.jn-guide-hub__grid,.jn-method__grid,.jn-layout-split .jn-tools{grid-template-columns:1fr}.jn-tool{grid-template-columns:2.7rem 1fr}.jn-list-hero{padding:3.5rem 0 2.5rem}.jn-compare{font-size:.88rem}}