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

/* Gloock — дисплейная антиква высокого контраста, одно начертание.
   Мельче 1.4rem НЕ СТАВИТСЯ НИГДЕ: штрихи разваливаются. */
@font-face{font-family:'NtDis';src:url('/assets/fonts/ntdis.woff2')format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
/* Vazirmatn — вариативная гротеска, wght 400–800. Один файл на все
   начертания: диапазон сужен при подрезке, лишнего веса нет. */
@font-face{font-family:'NtText';src:url('/assets/fonts/nttxt.woff2')format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap}

html{-webkit-text-size-adjust:100%;font-size:100%;background:#fbf9f5;
  scroll-behavior:smooth;
  /* Ширина ночи, ширина метки работы и шаг линейки — одно место.
     Python пишет позиции засечек как calc(var(--nt-step)*N), поэтому
     при сужении ночи линейка сужается вместе с ней сама. */
  --nt-night:2.3rem;--nt-work:.36rem;
  --nt-step:calc(var(--nt-night) + var(--nt-work))}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}}

body{margin:0;color:#14151c;background:#fbf9f5;
  font-family:'NtText',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:1.0625rem;line-height:1.66;font-weight:400;
  font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased}

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

.nt-skip{position:absolute;left:-9999px}
.nt-skip:focus{left:.6rem;top:.6rem;z-index:40;background:#14151c;
  color:#fbf9f5;padding:.55rem .9rem;border-radius:6px}

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

/* Надстрочная метка. Акцент на тёмном — sunl, на светлом — sund:
   один и тот же #e68a2e даёт на листе 2.4:1 и текстом негоден. */
.nt-eb{margin:0 0 1rem;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#8a4a08}

/* ---------------------------------------------------------------- */
/*  Липкая шапка                                                     */
/* ---------------------------------------------------------------- */
.nt-nav{position:sticky;top:0;z-index:30;background:rgba(251,249,245,.88);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid #e0e2ea}
.nt-nav__in{max-width:72rem;margin:0 auto;padding:.72rem 1.5rem;
  display:flex;gap:.6rem 1.4rem;align-items:center}
.nt-nav__b{font-family:'NtDis',Georgia,serif;font-size:1.4rem;
  line-height:1;text-decoration:none;white-space:nowrap;margin-right:auto}
.nt-nav nav{display:flex;flex-wrap:wrap;gap:.4rem 1.15rem;align-items:center}
.nt-nav nav a{font-size:.9rem;font-weight:500;color:#4c5162;
  text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.nt-nav nav a:hover{color:#14151c;border-bottom-color:#e68a2e}
.nt-nav nav a[aria-current]{color:#14151c;border-bottom-color:#e68a2e}
.nt-nav__cta{display:inline-block;background:#101631;color:#f5eee3;
  font-size:.86rem;font-weight:600;text-decoration:none;
  padding:.5rem 1.05rem;border-radius:999px;white-space:nowrap}
.nt-nav__cta:hover{background:#1c2448}

/* ---------------------------------------------------------------- */
/*  Герой и низкая шапка — одно вещество, разная высота              */
/* ---------------------------------------------------------------- */
.nt-hero,.nt-head{background:#101631;color:#f5eee3;
  background-image:radial-gradient(circle at 78% 12%,
    rgba(230,138,46,.16),transparent 46%),
    radial-gradient(circle at 10% 92%,rgba(246,184,96,.08),transparent 52%)}
.nt-hero .nt-eb,.nt-head .nt-eb{color:#f6b860}
.nt-hero__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:2.4rem;align-items:center;padding-top:4.2rem;padding-bottom:1.6rem}
.nt-hero h1{font-size:clamp(2.6rem,6.2vw,4.5rem);color:#f5eee3}
.nt-hero__l{margin:1.5rem 0 0;font-size:1.12rem;line-height:1.6;
  color:#c2c6d8;max-width:34rem}
.nt-head{padding:3rem 0 1.4rem}
.nt-head h1{font-size:clamp(2rem,4.6vw,3.1rem);color:#f5eee3;
  max-width:26ch}
.nt-head__d{margin:1rem 0 0;font-size:1.05rem;color:#c2c6d8;
  max-width:52ch}

/* Кнопки. Сплошная — акцентом, вторая — контуром. */
.nt-go{display:flex;flex-wrap:wrap;gap:.7rem;margin:2rem 0 0}
.nt-go a{display:inline-block;padding:.72rem 1.35rem;border-radius:999px;
  font-size:.95rem;font-weight:600;text-decoration:none;
  border:1.5px solid transparent}
.nt-go a:first-child{background:#e68a2e;color:#1b1206}
.nt-go a:first-child:hover{background:#f6b860}
.nt-go a+a{border-color:#2b3560;color:#f5eee3}
.nt-go a+a:hover{border-color:#f6b860;color:#f6b860}

/* Кольцо суток */
.nt-ring{display:block;width:100%;max-width:25rem;margin:0 auto}
/* Кегль ВНУТРИ SVG задаётся в px НАМЕРЕННО, и менять это на rem
   нельзя. У свг есть viewBox, поэтому px здесь — пользовательские
   единицы системы координат рисунка: текст масштабируется вместе с
   кольцом. rem считался бы от корневого кегля и к рисунку отношения
   не имел бы — число в середине съехало бы при любой другой ширине.
   Аудит доступности честно считает эти три объявления; это тот
   случай, когда он прав формально и неправ по существу. */
.nt-ring__h{font-family:'NtText',system-ui,sans-serif;font-size:11px;
  font-weight:600;letter-spacing:.08em;fill:#c2c6d8}
.nt-ring__n{font-family:'NtDis',Georgia,serif;font-size:54px;fill:#f5eee3}
.nt-ring__s{font-family:'NtText',system-ui,sans-serif;font-size:11.5px;
  font-weight:600;letter-spacing:.04em;fill:#c2c6d8}

.nt-hero__in--one{grid-template-columns:minmax(0,1fr)}
.nt-hero__in--one .nt-hero__t{max-width:46rem}
.nt-fig{margin:0}
.nt-key{display:flex;flex-wrap:wrap;justify-content:center;
  gap:.4rem 1.1rem;margin:1.1rem 0 0;font-size:.74rem;font-weight:600;
  letter-spacing:.03em;color:#c2c6d8}
.nt-key span{display:flex;align-items:center;gap:.45rem}
.nt-key s{display:block;width:.9rem;height:.62rem;border-radius:2px;
  text-decoration:none;flex:none}
.nt-caveat{margin:2.2rem 0 0;max-width:62rem;font-size:.92rem;
  line-height:1.62;color:#4c5162}

/* ---------------------------------------------------------------- */
/*  Полосы во всю ширину                                             */
/* ---------------------------------------------------------------- */
.nt-band{padding:4.2rem 0}
.nt-band--c{background:#edf0f7}
.nt-band--w{background:#fbf0df}
.nt-band__h{max-width:40rem;margin:0 0 2.4rem}
.nt-band__h h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.nt-band__h p{margin:.9rem 0 0;color:#4c5162;font-size:1.06rem}

/* Строка чисел */
.nt-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.2rem;border-top:1px solid #c3c7d4;padding-top:1.6rem}
.nt-stats div{min-width:0}
.nt-stats b{display:block;font-family:'NtDis',Georgia,serif;font-weight:400;
  font-size:clamp(2rem,4vw,2.9rem);line-height:1}
.nt-stats span{display:block;margin-top:.5rem;font-size:.86rem;
  line-height:1.4;color:#4c5162}

/* ---------------------------------------------------------------- */
/*  Карточки                                                         */
/* ---------------------------------------------------------------- */
.nt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1.1rem}
.nt-card{position:relative;display:flex;flex-direction:column;
  background:#ffffff;border:1px solid #e0e2ea;border-radius:16px;
  padding:1.5rem 1.4rem 1.3rem;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,22,49,.04),0 8px 22px rgba(16,22,49,.05);
  transition:transform .16s ease,box-shadow .16s ease}
.nt-card:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(16,22,49,.06),0 16px 34px rgba(16,22,49,.1)}
.nt-card h3{font-size:1.4rem;margin:0 0 .6rem}
.nt-card h3 a{text-decoration:none}
.nt-card h3 a:hover{color:#8a4a08}
.nt-card p{margin:0;font-size:.95rem;line-height:1.55;color:#4c5162}
.nt-card__k{margin:0 0 .9rem!important;font-size:.7rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#8a4a08}
.nt-card__c{margin-top:auto;padding-top:1.1rem;font-size:.82rem;
  font-weight:600;color:#4c5162}
/* Рисунок в собственной плашке над меткой. Первый вариант — вылет
   под нижний край карточки, как на референсах, — не сработал: там
   рисунки крупные и цветные, а здесь тонкая штриховая графика, и
   обрезок читался как грязь в углу. Приём взят не всякий, а тот,
   который держит именно эту графику. */
.nt-card__m{display:flex;align-items:center;justify-content:center;
  margin:-1.5rem -1.4rem 1.25rem;height:6.4rem;background:#fbf0df;
  border-bottom:1px solid #f0dcbd;color:#8a4a08}
.nt-mot{display:block;width:9.5rem}

/* ---------------------------------------------------------------- */
/*  Тёмная панель знака. И в герое, и внутри статьи — одна и та же.  */
/* ---------------------------------------------------------------- */
.nt-b,.nt-p{background:#1c2448;color:#f5eee3;border:1px solid #2b3560;
  border-radius:16px;padding:1.5rem 1.5rem 1.3rem;margin:0 0 1.4rem}
/* z-index обязателен. Отрицательное поле выводит панель за край
   тёмной полосы, но следующая полоса — сосед ПОЗЖЕ в потоке и свой
   фон рисует поверх: нижняя треть панели вместе со счётчиком
   закрашивалась тёплым, и подпись оказывалась кремовой по песочному.
   Видно только на собранной странице. */
.nt-hero .nt-b,.nt-head .nt-b{position:relative;z-index:2}
.nt-hero .nt-b{margin:1.8rem 0 -3.8rem}
.nt-head .nt-b{margin:1.8rem 0 -3.2rem}
/* Нахлёст делается отрицательным полем, а НЕ transform: transform
   не отнимает высоту, и следующая полоса всё равно начиналась ниже
   панели, так что нахлёста не возникало — панель просто упиралась в
   стык. Отступ у следующего блока добавлен здесь же, иначе он
   наезжает на панель сверху. */
.nt-hero+.nt-band,.nt-head+.nt-doc{padding-top:6.2rem}
.nt-p{margin:2rem 0}
/* Знак ШИРЕ меры чтения. Внутри 38rem колонка ленты в 16rem съедала
   столько, что подпись строки ломалась на три, и знак переставал
   читаться как таблица. Выход за меру — не украшение, а условие
   того, чтобы знак вообще работал. Ловится только сборкой статьи, а
   не главной: на главной знаки стоят во всю ширину полосы. */
.nt-body>.nt-p{width:min(60rem,calc(100vw - 3rem));margin-left:50%;
  transform:translateX(-50%)}
.nt-p__t,.nt-b__t{margin:0 0 1rem;padding-bottom:.8rem;
  border-bottom:1px solid #2b3560;font-size:.95rem;font-weight:600;
  line-height:1.4;color:#f5eee3}

.nt-hd{display:grid;grid-template-columns:1fr 16rem 5.4rem;gap:.7rem;
  margin:0 0 .4rem}
.nt-hd>b{font-size:.64rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#c2c6d8}
.nt-g{margin:0}
.nt-r{display:grid;grid-template-columns:1fr 16rem 5.4rem;gap:.7rem;
  align-items:center;padding:.5rem 0;border-bottom:1px solid #2b3560}
.nt-r:last-child{border-bottom:0}
.nt-r__l{font-size:.93rem;line-height:1.35}
/* Ячейка СЖИМАЕТСЯ ПО ЛЕНТЕ. Без этого линейка суток, у которой
   засечки позиционированы абсолютно и своей ширины нет, растягивалась
   на всю колонку в 16rem, и подпись последнего дня уезжала вправо от
   конца ленты. Ловится только замером ширины. */
.nt-r__t{display:inline-block;justify-self:start}
.nt-r__n{font-size:.74rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:#c2c6d8;text-align:right}
.nt-r__n b{font-weight:700;color:#f5eee3;
  font-variant-numeric:lining-nums tabular-nums}
.nt-p__w{grid-column:1/-1;margin:.3rem 0 0;font-size:.84rem;line-height:1.45;
  color:#c2c6d8}

/* Лента: чередование работы и ночей. НЕ в масштабе — см. подпись. */
.nt-s{position:relative;display:flex;align-items:stretch;height:1.25rem;
  gap:0;border-radius:3px;overflow:hidden}
.nt-s i{display:block;flex:none}
/* Метка работы узкая НАМЕРЕННО: это минуты против пятнадцати часов.
   На ночи она светится акцентом, и рамка ей не нужна — в отличие от
   первой редакции, где панель была светлой и метку держала рамка. */
.nt-s__w{width:var(--nt-work);background:#e68a2e}
.nt-s__n{width:var(--nt-night);background:#101631}
.nt-s__n+.nt-s__n{border-left:1px solid #1c2448}
.nt-s--never{width:13rem;border-radius:3px 0 0 3px}
.nt-s__x{width:.55rem;background:#8b82a6}
.nt-s--never::after{content:"";flex:1;align-self:center;height:1px;
  background:repeating-linear-gradient(90deg,#8b82a6 0 4px,
    transparent 4px 8px)}

.nt-ru{position:relative;display:block;height:.78rem;margin-top:.14rem}
.nt-ru s{position:absolute;top:0;width:1px;height:.26rem;
  background:#2b3560;text-decoration:none}
.nt-ru b{position:absolute;top:.2rem;font-size:.56rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:#c2c6d8}

.nt-lg{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin:1rem 0 0;
  font-size:.7rem;font-weight:500;letter-spacing:.04em;color:#c2c6d8}
.nt-lg span{display:flex;align-items:center;gap:.45rem}
.nt-lg s{display:block;height:.72rem;text-decoration:none;flex:none;
  border-radius:2px}
/* Образец работы в легенде ШИРЕ, чем в ленте: в ленте он узкий по
   смыслу, а в легенде должен быть опознаваем. Разные задачи. */
.nt-lg__w{width:.95rem;background:#e68a2e}
.nt-lg__n{width:1.7rem;background:#101631}
.nt-lg__x{width:.55rem;background:#8b82a6}

.nt-b__k,.nt-p__k{margin:1rem 0 0;padding-top:.75rem;
  border-top:1px solid #2b3560;font-size:.68rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:#f6b860}
.nt-b__c,.nt-p__n{margin:.6rem 0 0;font-size:.86rem;line-height:1.5;
  color:#c2c6d8}
.nt-b__c b,.nt-p__n b{color:#f5eee3;font-weight:700}

/* Знак 2 — карта суток */
.nt-w__r{display:grid;grid-template-columns:1fr 18rem 4rem;gap:.7rem;
  align-items:center;padding:.55rem 0;border-bottom:1px solid #2b3560}
.nt-w__r:last-of-type{border-bottom:0}
.nt-w__q{margin:0;font-size:.93rem;line-height:1.35}
.nt-w__d{position:relative;display:block;height:1.25rem;background:#101631;
  border-radius:3px;overflow:hidden}
.nt-w__d>i{position:absolute;top:0;height:100%;background:#e68a2e}
.nt-w__h{position:absolute;inset:0;display:block}
.nt-w__h s{position:absolute;top:0;width:1px;height:100%;
  background:#2b3560;text-decoration:none}
.nt-w__n{font-size:.78rem;font-weight:600;color:#c2c6d8;text-align:right;
  font-variant-numeric:lining-nums tabular-nums}
.nt-w__n b{color:#f5eee3;font-weight:700}
.nt-w__w{grid-column:1/-1;margin:.3rem 0 0;font-size:.84rem;line-height:1.45;
  color:#c2c6d8}

/* Знак 3 — вопросы и обороты */
.nt-a__r{display:grid;grid-template-columns:1fr 5.6rem;gap:.8rem;
  align-items:start;padding:.6rem 0;border-bottom:1px solid #2b3560}
.nt-a__r:last-of-type{border-bottom:0}
.nt-a__q{margin:0;font-size:.95rem;line-height:1.4}
.nt-a__why{margin:.25rem 0 0;font-size:.84rem;line-height:1.45;
  color:#c2c6d8}
.nt-a__n{font-size:.74rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:#c2c6d8;text-align:right;
  padding-top:.1rem}
.nt-a__n b{color:#f6b860;font-weight:700;
  font-variant-numeric:lining-nums tabular-nums}
.nt-a__r--one .nt-a__n b{color:#f5eee3}

/* ---------------------------------------------------------------- */
/*  Списки разделов на главной                                       */
/* ---------------------------------------------------------------- */
.nt-sec{padding:2.6rem 0;border-top:1px solid #e0e2ea}
.nt-sec:first-of-type{border-top:0}
.nt-sec__h{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);
  gap:1.6rem 3rem;align-items:start}
.nt-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:#8a4a08}
.nt-sec__k span+span{color:#4c5162;font-weight:600}
.nt-sec h2{grid-column:1;font-size:clamp(1.65rem,2.8vw,2.2rem)}
.nt-sec h2 a{text-decoration:none}
.nt-sec h2 a:hover{color:#8a4a08}
.nt-sec__d{grid-column:1;margin:.8rem 0 0;font-size:.98rem;color:#4c5162}
.nt-list{grid-column:2;grid-row:2/span 3;margin:0;padding:0;list-style:none;
  columns:2;column-gap:2.2rem}
.nt-list li{break-inside:avoid;margin:0 0 .5rem}
.nt-list a{display:block;font-size:.95rem;line-height:1.4;
  text-decoration:none;padding-left:2.2rem;position:relative}
.nt-list a::before{content:attr(data-n);position:absolute;left:0;top:.08rem;
  font-size:.7rem;font-weight:700;letter-spacing:.06em;color:#c3c7d4;
  font-variant-numeric:lining-nums tabular-nums}
.nt-list a:hover{color:#8a4a08}
.nt-list a:hover::before{color:#e68a2e}

/* ---------------------------------------------------------------- */
/*  Блок призыва — единственное место, где акцент залит целиком      */
/* ---------------------------------------------------------------- */
.nt-end{background:#e68a2e;color:#1b1206;border-radius:20px;
  padding:2.8rem 2.4rem}
/* Замерено: #5a3404 на акценте даёт 4.17:1 — ниже 4.5. Метка
   мелкая и прописная, то есть как раз тот случай, где послабления
   нет. #4a2a00 даёт 4.96:1. */
.nt-end .nt-sec__k{color:#4a2a00}
.nt-end h2{font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:22ch}
.nt-end>p{margin:1.1rem 0 0;max-width:52ch;font-size:1.04rem;
  color:#2d1d08}
.nt-end__l{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.7rem 0 0;padding:0;
  list-style:none}
.nt-end__l a{display:inline-block;background:#101631;color:#f5eee3;
  padding:.68rem 1.3rem;border-radius:999px;font-size:.93rem;font-weight:600;
  text-decoration:none}
.nt-end__l a:hover{background:#1c2448}

/* ---------------------------------------------------------------- */
/*  Статья                                                           */
/* ---------------------------------------------------------------- */
.nt-doc{padding:3.4rem 1.5rem 4rem}
.nt-body{max-width:38rem;margin:0 auto}
.nt-crumb{max-width:38rem;margin:0 auto 1.6rem;font-size:.84rem;
  color:#4c5162}
.nt-crumb a{color:#8a4a08;font-weight:600;text-decoration:none}
.nt-crumb a:hover{text-decoration:underline}
.nt-meta{max-width:38rem;margin:0 auto 1.6rem;font-size:.72rem;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#4c5162}
.nt-body p{margin:0 0 1.15rem}
.nt-body>p:first-of-type{font-size:1.2rem;line-height:1.56;color:#14151c}
.nt-body h2{font-size:clamp(1.55rem,2.6vw,2rem);margin:2.6rem 0 .9rem}
.nt-body h3{font-size:1.2rem;font-family:'NtText',system-ui,sans-serif;
  font-weight:700;letter-spacing:0;margin:1.9rem 0 .6rem}
.nt-s2{position:relative}
.nt-s2::before{content:attr(data-n);display:block;font-size:.7rem;
  font-weight:700;letter-spacing:.13em;color:#8a4a08;
  margin:2.6rem 0 -2.1rem;font-variant-numeric:lining-nums tabular-nums}
.nt-s2>h2:first-child{margin-top:2.6rem}
.nt-body ul,.nt-body ol{margin:0 0 1.15rem;padding-left:1.3rem}
.nt-body li{margin:0 0 .45rem}
.nt-body a{color:#8a4a08;text-decoration:underline;
  text-underline-offset:.16em;text-decoration-thickness:1px}
.nt-body a:hover{text-decoration-thickness:2px}
.nt-body strong{font-weight:700}

/* Таблицы, цитаты и код. Урок 75-го и 76-го: без этих правил они
   приезжают голыми, и видно это только на блок-тесте. */
.nt-body table{width:100%;border-collapse:collapse;margin:1.5rem 0;
  font-size:.92rem}
.nt-body th,.nt-body td{text-align:left;padding:.55rem .7rem;
  border-bottom:1px solid #e0e2ea;vertical-align:top}
.nt-body thead th{font-size:.68rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#4c5162;border-bottom:1.5px solid #c3c7d4}
.nt-body tbody tr:last-child td{border-bottom:0}
.nt-body blockquote{margin:1.6rem 0;padding:.3rem 0 .3rem 1.3rem;
  border-left:3px solid #e68a2e;color:#4c5162;font-size:1.04rem}
.nt-body blockquote p:last-child{margin-bottom:0}
.nt-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86em;background:#edf0f7;border:1px solid #e0e2ea;
  border-radius:4px;padding:.08em .34em}
.nt-body pre{margin:1.5rem 0;padding:1rem 1.1rem;background:#101631;
  color:#f5eee3;border-radius:12px;overflow-x:auto;font-size:.86rem;
  line-height:1.55}
.nt-body pre code{background:none;border:0;padding:0;color:inherit}
.nt-body hr{margin:2.2rem 0;border:0;border-top:1px solid #e0e2ea}

/* Следующая ночь — карточки, а не список ссылок */
.nt-next{max-width:60rem;margin:3.6rem auto 0;padding-top:2.4rem;
  border-top:1px solid #e0e2ea}
.nt-next__t{margin:0 0 1.2rem;font-size:.72rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#8a4a08}
.nt-next ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:.9rem;margin:0;padding:0;list-style:none}
.nt-next li{margin:0}
.nt-next a{display:block;height:100%;background:#ffffff;
  border:1px solid #e0e2ea;border-radius:14px;padding:1.05rem 1.15rem;
  font-size:.97rem;line-height:1.4;font-weight:500;text-decoration:none;
  transition:border-color .16s ease,transform .16s ease}
.nt-next a:hover{border-color:#e68a2e;transform:translateY(-2px)}

/* Перечень на странице раздела */
.nt-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:1.1rem;padding:3.4rem 0 1rem}
.nt-hub__row{background:#ffffff;border:1px solid #e0e2ea;border-radius:16px;
  padding:1.4rem 1.35rem;transition:border-color .16s ease,transform .16s ease}
.nt-hub__row:hover{border-color:#e68a2e;transform:translateY(-2px)}
.nt-hub__row h2{font-size:1.3rem;margin:0 0 .5rem}
.nt-hub__row h2 a{text-decoration:none}
.nt-hub__row p{margin:0;font-size:.93rem;line-height:1.5;color:#4c5162}

/* ---------------------------------------------------------------- */
/*  Подвал                                                           */
/* ---------------------------------------------------------------- */
.nt-foot{background:#101631;color:#c2c6d8;margin-top:4.5rem;
  padding:3.4rem 0 2.6rem}
.nt-foot__in{max-width:72rem;margin:0 auto;padding:0 1.5rem}
.nt-foot__g{display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(9rem,1fr));
  gap:2rem}
.nt-foot__t{margin:0 0 .9rem;font-family:'NtDis',Georgia,serif;
  font-size:1.25rem;color:#f5eee3;letter-spacing:-.01em}
.nt-foot__g>div+div .nt-foot__t{font-family:'NtText',system-ui,sans-serif;
  font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#f6b860}
.nt-foot__about{margin:0;font-size:.92rem;line-height:1.55;max-width:30ch}
.nt-foot ul{margin:0;padding:0;list-style:none}
.nt-foot li{margin:0 0 .5rem}
.nt-foot li a{font-size:.92rem;text-decoration:none}
.nt-foot li a:hover{color:#f6b860}
.nt-foot__note{margin:2.8rem 0 0;padding-top:1.6rem;
  border-top:1px solid #2b3560;font-size:.82rem;line-height:1.6;
  max-width:62rem}

/* ---------------------------------------------------------------- */
/*  Узко                                                             */
/* ---------------------------------------------------------------- */
@media(max-width:960px){
  .nt-hero__in{grid-template-columns:1fr;gap:2rem;padding-top:3rem}
  .nt-hero__v{order:-1;max-width:20rem}
  .nt-sec__h{grid-template-columns:1fr}
  .nt-list{grid-column:1;grid-row:auto;margin-top:1.2rem}
  .nt-foot__g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  body{font-size:1rem}
  .nt-nav__b{font-size:1.2rem}
  .nt-nav nav{display:none}
  .nt-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
  .nt-list{columns:1}
  .nt-band{padding:3rem 0}
  .nt-end{padding:2rem 1.5rem}
  .nt-b,.nt-p{padding:1.2rem 1.1rem 1.05rem;border-radius:14px}
  .nt-hd,.nt-r{grid-template-columns:1fr 4.8rem}
  .nt-hd>b:nth-child(2){display:none}
  .nt-r__l{grid-column:1/-1;margin-bottom:.2rem}
  .nt-r__t{grid-column:1;overflow-x:auto}
  html{--nt-night:1.5rem}
  .nt-w__r{grid-template-columns:1fr 4rem}
  .nt-w__q{grid-column:1/-1;margin-bottom:.25rem}
  .nt-w__d{grid-column:1}
  .nt-foot__g{grid-template-columns:1fr}
}


/* Editorial software guides */
.nt-organic-link,.nt-source-link{padding:.85rem 1rem;border-left:3px solid #f6b860;background:rgba(246,184,96,.08)}
.nt-source-link{border-left-color:#8b82a6;background:rgba(139,130,166,.08)}
.listicle-hero{padding:5.5rem 0 3.5rem;background:linear-gradient(135deg,#101631 0%,#202c57 70%,#33426f 100%);color:#fff}
.listicle-hero h1{max-width:980px;font-size:clamp(2.5rem,6vw,5.5rem);line-height:.98;margin:.5rem 0 1.2rem}
.listicle-dek{max-width:760px;font-size:1.16rem;line-height:1.65;color:#e9e8ef}
.listicle-jump{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.7rem}.listicle-jump a{display:inline-block;padding:.8rem 1rem;border:1px solid #f6b860;color:#101631;background:#f6b860;text-decoration:none;font-weight:700}.listicle-jump a+ a{background:transparent;color:#fff}
.listicle-shell{padding-top:3rem;padding-bottom:4rem}.listicle-intro{max-width:850px;font-size:1.08rem;line-height:1.75}.method-panel,.comparison-panel,.decision-guide,.listicle-faq{margin:3.5rem 0;padding:2rem;border:1px solid #d5d8e4;background:#f8f7f3}.comparison-panel{background:#fff}.comparison-panel table{min-width:800px}
.tool-list{display:grid;gap:1.5rem}.tool-card{position:relative;display:grid;grid-template-columns:76px 1fr;border:1px solid #ccd1df;background:#fff;padding:1.8rem}.tool-rank{font:700 2.3rem/1 var(--nt-display,serif);color:#7a84a4}.tool-best{text-transform:uppercase;letter-spacing:.08em;font-size:.77rem;font-weight:700;color:#735124}.tool-copy h2{font-size:2rem;margin:.2rem 0 .8rem}.tool-copy p{line-height:1.68}.tool-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;padding:0;list-style:none}.tool-points li{padding:.8rem;background:#f2f3f7}.tool-link a{font-weight:800;color:#101631}.decision-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.decision-grid>div{padding:1rem;background:#fff}.listicle-faq details{border-top:1px solid #ccd1df;padding:1rem 0}.listicle-faq summary{font-weight:800;cursor:pointer}
.layout-editorial .tool-card:nth-child(even){margin-left:5%;border-left:7px solid #8b82a6}.layout-editorial .tool-card:nth-child(odd){margin-right:5%;border-left:7px solid #f6b860}
.layout-scorecards .tool-list{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-scorecards .tool-card{display:block;border-radius:18px;box-shadow:0 10px 30px rgba(16,22,49,.08)}.layout-scorecards .tool-rank{float:right;background:#101631;color:#fff;border-radius:999px;padding:.55rem}.layout-scorecards .tool-points{grid-template-columns:1fr}
.layout-catalog .tool-list{gap:.7rem}.layout-catalog .tool-card{grid-template-columns:56px 230px 1fr;align-items:start;padding:1.2rem}.layout-catalog .tool-best{grid-column:2}.layout-catalog .tool-copy{display:grid;grid-template-columns:220px 1fr;column-gap:1.2rem}.layout-catalog .tool-copy h2{grid-column:1;grid-row:1/5}.layout-catalog .tool-copy .tool-best{grid-column:2}.layout-catalog .tool-copy p,.layout-catalog .tool-copy ul{grid-column:2}.layout-catalog .tool-points{grid-template-columns:repeat(3,minmax(0,1fr))}
.guide-home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.guide-home-grid article{padding:1.4rem;border:1px solid #ccd1df;background:#fff}.guide-home-grid span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#735124;font-weight:700}.guide-home-grid h3{font-size:1.35rem}.guide-home-grid a{color:#101631}
@media(max-width:850px){.layout-scorecards .tool-list,.decision-grid,.guide-home-grid{grid-template-columns:1fr}.tool-card,.layout-catalog .tool-card{display:block}.layout-catalog .tool-copy{display:block}.tool-points,.layout-catalog .tool-points{grid-template-columns:1fr}.layout-editorial .tool-card:nth-child(n){margin-left:0;margin-right:0}.listicle-hero{padding-top:3.5rem}}
