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

/* Bevan — ОДНО начертание. Поэтому в @font-face стоит `font-weight:400`,
   и все заголовки набираются весом 400: любое 700 или 800 заставило бы
   браузер синтезировать жир, размазывая брусковые засечки.
   Heebo — вариативная, 400–700, и ею набрано всё остальное, включая
   цифры знаков: её цифры моноширинны по рисунку, поэтому колонки чисел
   стоят без фичи `tnum`, которой у неё и нет. */
@font-face{font-family:'OtDis';src:url('/assets/fonts/otdis.woff2')format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'OtText';src:url('/assets/fonts/ottext.woff2')format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}

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

body{margin:0;color:#131a19;background:#fbf9f4;
  font-family:'OtText',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem;line-height:1.66;font-weight:400;
  -webkit-font-smoothing:antialiased}

h1,h2,h3{font-family:'OtDis',Rockwell,'Courier New',Georgia,serif;
  font-weight:400;letter-spacing:-.008em;line-height:1.08;margin:0}
a{color:inherit}
img,svg{max-width:100%}

.ot-skip{position:absolute;left:-9999px}
.ot-skip:focus{left:.6rem;top:.6rem;z-index:40;background:#131a19;
  color:#fbf9f4;padding:.55rem .9rem;border-radius:6px}

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

/* Надстрочная метка. На листе — goldd, на тёмном — goldl: сама латунь
   #c9a227 на листе даёт около 2.6:1 и мелким текстом не ставится
   нигде. */
.ot-eb{margin:0 0 1rem;font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#7a5f08}

/* ---------------------------------------------------------------- */
/*  Липкая шапка                                                     */
/* ---------------------------------------------------------------- */
.ot-nav{position:sticky;top:0;z-index:30;background:rgba(251,249,244,.9);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid #e1e3de}
.ot-nav__in{max-width:72rem;margin:0 auto;padding:.72rem 1.5rem;
  display:flex;gap:.6rem 1.4rem;align-items:center}
.ot-nav__b{font-family:'OtDis',Rockwell,serif;font-weight:400;
  font-size:1.16rem;letter-spacing:-.01em;line-height:1;
  text-decoration:none;white-space:nowrap;margin-right:auto}
.ot-nav nav{display:flex;flex-wrap:wrap;gap:.4rem 1.15rem;align-items:center}
.ot-nav nav a{font-size:.88rem;font-weight:600;color:#47514f;
  text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.ot-nav nav a:hover,.ot-nav nav a[aria-current]{color:#131a19;
  border-bottom-color:#c9a227}
/* Текст на латуни — ТЁМНЫЙ. Белым по #c9a227 выходит 2.1:1; тем же
   чернильным тоном — 9.6:1. Третья сессия подряд, где акцент оказался
   слишком светлым для белого текста, и первая, где это учтено
   сразу. */
.ot-nav__cta{display:inline-block;background:#c9a227;color:#10272b;
  font-size:.86rem;font-weight:700;text-decoration:none;
  padding:.5rem 1.05rem;border-radius:999px;white-space:nowrap}
.ot-nav__cta:hover{background:#dbb236}

/* ---------------------------------------------------------------- */
/*  Герой и низкая шапка                                             */
/* ---------------------------------------------------------------- */
.ot-hero,.ot-head{background:#10272b;color:#f2efe6;
  background-image:radial-gradient(circle at 78% 16%,
    rgba(201,162,39,.20),transparent 50%),
    radial-gradient(circle at 6% 92%,rgba(111,179,171,.12),transparent 52%)}
.ot-hero .ot-eb,.ot-head .ot-eb{color:#e8c457}
.ot-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}
.ot-hero h1{font-size:clamp(2.3rem,5.2vw,3.8rem);color:#f2efe6}
.ot-hero__l{margin:1.5rem 0 0;font-size:1.1rem;line-height:1.62;
  color:#a9bdbc;max-width:34rem}
.ot-hero__in--one{grid-template-columns:minmax(0,1fr)}
.ot-hero__in--one .ot-hero__t{max-width:46rem}
.ot-head{padding:3rem 0 0}
.ot-head h1{font-size:clamp(1.9rem,4vw,2.7rem);color:#f2efe6;max-width:26ch}
.ot-head__d{margin:1rem 0 0;font-size:1.04rem;color:#a9bdbc;max-width:52ch}

.ot-go{display:flex;flex-wrap:wrap;gap:.7rem;margin:2rem 0 0}
.ot-go a{display:inline-block;padding:.72rem 1.35rem;border-radius:999px;
  font-size:.95rem;font-weight:700;text-decoration:none;
  border:1.5px solid transparent}
.ot-go a:first-child{background:#c9a227;color:#10272b}
.ot-go a:first-child:hover{background:#dbb236}
.ot-go a+a{border-color:#2a565c;color:#f2efe6}
.ot-go a+a:hover{border-color:#e8c457;color:#e8c457}

/* Недели, положенные одна под другую */
.ot-fig{margin:0}
.ot-wk{display:block;width:100%}
.ot-wk__n{fill:#a9bdbc;font-family:'OtText',system-ui,sans-serif;
  font-size:13px;font-weight:600}
.ot-wk__n--k{fill:#f2efe6;font-weight:700}
.ot-wk__d{fill:#a9bdbc;font-family:'OtText',system-ui,sans-serif;
  font-size:14px;font-weight:700;text-anchor:middle;letter-spacing:.08em}
.ot-key{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:1.1rem 0 0;
  font-size:.73rem;font-weight:600;color:#a9bdbc}
.ot-key span{display:flex;align-items:center;gap:.45rem}
.ot-key s{display:block;width:.85rem;height:.6rem;border-radius:2px;
  text-decoration:none;flex:none}

/* ---------------------------------------------------------------- */
/*  Полосы                                                           */
/* ---------------------------------------------------------------- */
.ot-band{padding:4.2rem 0}
.ot-band--c{background:#e9f0ef}
.ot-band--w{background:#f6efe0}
.ot-band__h{max-width:42rem;margin:0 0 2.4rem}
.ot-band__h h2{font-size:clamp(1.75rem,3.1vw,2.4rem)}
.ot-band__h p{margin:.9rem 0 0;color:#47514f;font-size:1.04rem}

.ot-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.2rem;border-top:1px solid #c0c6c2;padding-top:1.6rem}
.ot-stats div{min-width:0}
.ot-stats b{display:block;font-family:'OtDis',Rockwell,serif;
  font-weight:400;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1;
  letter-spacing:-.01em}
.ot-stats span{display:block;margin-top:.5rem;font-size:.86rem;
  line-height:1.45;color:#47514f}
.ot-caveat{margin:2.2rem 0 0;max-width:62rem;font-size:.92rem;
  line-height:1.62;color:#47514f}

/* ---------------------------------------------------------------- */
/*  Карточки                                                         */
/* ---------------------------------------------------------------- */
.ot-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1.1rem}
.ot-card{display:flex;flex-direction:column;background:#ffffff;
  border:1px solid #e1e3de;border-radius:16px;
  padding:1.5rem 1.4rem 1.3rem;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,39,43,.04),0 8px 22px rgba(16,39,43,.06);
  transition:transform .16s ease,box-shadow .16s ease}
.ot-card:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(16,39,43,.08),0 16px 34px rgba(16,39,43,.11)}
.ot-card__m{display:flex;align-items:center;justify-content:center;
  margin:-1.5rem -1.4rem 1.25rem;height:6.4rem;background:#e9f0ef;
  border-bottom:1px solid #d8e3e1;color:#2f6c66}
.ot-mot{display:block;width:10rem}
.ot-card h3{font-size:1.24rem;margin:0 0 .6rem;line-height:1.18}
.ot-card h3 a{text-decoration:none}
.ot-card h3 a:hover{color:#7a5f08}
.ot-card p{margin:0;font-size:.95rem;line-height:1.58;color:#47514f}
.ot-card__k{margin:0 0 .9rem!important;font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#7a5f08}
.ot-card__c{margin-top:auto!important;padding-top:1.1rem;font-size:.84rem;
  font-weight:700;color:#131a19}

/* ---------------------------------------------------------------- */
/*  Тёмная панель знака — и в шапке, и в статье                      */
/* ---------------------------------------------------------------- */
.ot-b,.ot-p{background:#17373c;color:#f2efe6;border:1px solid #2a565c;
  border-radius:16px;padding:1.5rem 1.5rem 1.3rem;margin:0 0 1.4rem}
/* z-index обязателен: отрицательное поле выводит панель за край тёмной
   полосы, но следующая полоса — сосед ПОЗЖЕ в потоке и рисует свой фон
   поверх. transform для нахлёста не годится вовсе: он не отнимает
   высоту, и нахлёста не возникает. Урок 86-й сессии. */
.ot-hero .ot-b,.ot-head .ot-b{position:relative;z-index:2}
.ot-hero .ot-b{margin:1.8rem 0 -3.8rem}
.ot-head .ot-b{margin:1.8rem 0 -3.2rem}
.ot-hero+.ot-band,.ot-head+.ot-doc{padding-top:6.2rem}
/* Страница раздела — третий случай той же пары, и его легко забыть:
   там за шапкой идёт не .ot-doc, а .ot-wrap с сеткой .ot-hub, и
   компенсация отрицательного поля к ней не применялась. Панель
   нависала над карточками в пятнадцати пикселях. */
.ot-head+.ot-wrap>.ot-hub{padding-top:6.4rem}
.ot-p{margin:2rem 0}
/* Знак ШИРЕ меры чтения: внутри 38rem семь клеток недели и недельная
   шкала съедают столько, что подпись строки ломается на три. Видно
   только на собранной СТАТЬЕ, не на главной. */
.ot-body>.ot-p{width:min(60rem,calc(100vw - 3rem));margin-left:50%;
  transform:translateX(-50%)}
.ot-p__t{margin:0 0 1rem;padding-bottom:.8rem;
  border-bottom:1px solid #2a565c;font-size:.95rem;font-weight:700;
  line-height:1.42;color:#f2efe6}
.ot-p__k{margin:1rem 0 0;padding-top:.75rem;border-top:1px solid #2a565c;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#e8c457}
.ot-p__n{margin:.6rem 0 0;font-size:.86rem;line-height:1.52;color:#a9bdbc}
.ot-p__n b{color:#f2efe6;font-weight:700}
.ot-lg{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin:1rem 0 0;
  font-size:.7rem;font-weight:600;color:#a9bdbc}
.ot-lg span{display:flex;align-items:center;gap:.45rem}
.ot-lg s{display:block;width:.9rem;height:.7rem;border-radius:2px;
  text-decoration:none;flex:none}
.ot-lg__a{width:.3rem!important}
/* Плашка «часы между» повторяет ШТРИХОВКУ шкалы, а не её фон: ровный
   прямоугольник цвета #2a565c обещал бы на шкале сплошную заливку,
   которой там нет. */
.ot-lg__g{background:repeating-linear-gradient(135deg,#2a565c 0 3px,
    transparent 3px 6px);box-shadow:inset 0 0 0 1px #2a565c}
/* Плашка показывает КОЛЬЦО, а не цвет: общий день помечен кольцом
   поверх латуни ИЛИ бирюзы, и плашка цвета одной из сторон читалась
   бы как «день вашей стороны». */
.ot-lg__s{background:#2a565c;box-shadow:inset 0 0 0 2.5px #f2efe6;
  width:1.15rem!important;height:.85rem!important;border-radius:3px}

/* --- Знак 1: чьи дни рабочие --- */
.ot-c__h{display:grid;grid-template-columns:1fr 22rem 5rem;gap:.7rem;
  margin:0 0 .4rem}
.ot-c__h>b{font-size:.64rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#a9bdbc}
.ot-c__h>b:last-child{text-align:right}
.ot-c__r{display:grid;grid-template-columns:1fr 22rem 5rem;gap:.7rem;
  align-items:center;padding:.55rem 0;border-bottom:1px solid #2a565c}
.ot-c__r:last-of-type{border-bottom:0}
.ot-c__q{margin:0;font-size:.93rem;line-height:1.35}
.ot-c__w{display:grid;grid-template-columns:repeat(7,1fr);gap:.2rem}
/* `font-style:normal` обязателен: клетки — элементы <i>, и браузер
   по умолчанию кладёт их курсивом. Буквы дней приехали наклонными, и
   в коде это не видно вовсе. */
.ot-c__w i{display:flex;align-items:center;justify-content:center;
  height:1.5rem;border-radius:4px;font-size:.62rem;font-weight:700;
  font-style:normal;letter-spacing:.02em}
.ot-c__w i s{text-decoration:none}
.ot-c__y{background:#c9a227;color:#10272b}
.ot-c__t{background:#6fb3ab;color:#10272b}
.ot-c__o{background:#40595c;color:#f2efe6}
/* День, рабочий у ВСЕХ: кремовое кольцо внутрь. Отдельным цветом его
   не выделить — цвет уже занят стороной, — а кольцо читается и на
   латуни, и на бирюзе. */
.ot-c__s{box-shadow:inset 0 0 0 2px #f2efe6}
.ot-c__n{font-size:.8rem;font-weight:600;color:#a9bdbc;text-align:right}
.ot-c__n b{color:#f2efe6;font-weight:700}
.ot-c__why{grid-column:1/-1;margin:.3rem 0 0;font-size:.84rem;
  line-height:1.48;color:#a9bdbc}

/* --- Знак 2: два прочтения одного срока --- */
.ot-d__r{display:grid;grid-template-columns:1fr 22rem 7rem;gap:.7rem;
  align-items:center;padding:.55rem 0;border-bottom:1px solid #2a565c}
.ot-d__r:last-of-type{border-bottom:0}
.ot-d__q{margin:0;font-size:.93rem;line-height:1.35}
.ot-d__t{position:relative;display:block;height:1.7rem}
.ot-d__line{position:absolute;top:.56rem;left:0;right:0;height:2px;
  background:#2a565c;border-radius:1px}
.ot-d__gap{position:absolute;top:.36rem;height:.6rem;border-radius:2px;
  background:repeating-linear-gradient(135deg,#2a565c 0 3px,
    transparent 3px 6px);box-shadow:inset 0 0 0 1px #2a565c}
.ot-d__a,.ot-d__b{position:absolute;top:.12rem;width:3px;height:1.1rem;
  border-radius:1px;transform:translateX(-1px)}
.ot-d__a{background:#c9a227}
.ot-d__b{background:#6fb3ab}
.ot-ru{position:absolute;top:1.1rem;left:0;right:0;height:.6rem;display:block}
.ot-ru s{position:absolute;top:0;width:1px;height:.2rem;
  background:#2a565c;text-decoration:none}
.ot-ru b{position:absolute;top:.14rem;font-size:.55rem;font-weight:700;
  letter-spacing:.06em;color:#a9bdbc;transform:translateX(-50%)}
.ot-d__n{font-size:.78rem;font-weight:600;color:#a9bdbc;text-align:right}
.ot-d__n b{color:#f2efe6;font-weight:700}
.ot-d__why{grid-column:1/-1;margin:.3rem 0 0;font-size:.84rem;
  line-height:1.48;color:#a9bdbc}
.ot-d__why em{font-style:normal;font-weight:700;color:#f2efe6}

/* --- Знак 3: сколько стоило ожидание --- */
.ot-q__h{display:grid;grid-template-columns:1fr 20rem 6.4rem;gap:.7rem;
  margin:0 0 .4rem}
.ot-q__h>b{font-size:.64rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#a9bdbc}
.ot-q__h>b:last-child{text-align:right}
.ot-q__r{display:grid;grid-template-columns:1fr 20rem 6.4rem;gap:.7rem;
  align-items:center;padding:.55rem 0;border-bottom:1px solid #2a565c}
.ot-q__r:last-of-type{border-bottom:0}
.ot-q__q{margin:0;font-size:.93rem;line-height:1.35}
.ot-q__t{display:block}
.ot-q__bar{display:block;height:1.15rem;border-radius:3px;
  background:#2a565c;overflow:hidden}
.ot-q__biz{display:block;height:100%;background:#6fb3ab;
  border-radius:3px 0 0 3px}
.ot-q__n{font-size:.8rem;font-weight:600;color:#a9bdbc;text-align:right}
.ot-q__n b{color:#f2efe6;font-weight:700}
.ot-q__why{grid-column:1/-1;margin:.3rem 0 0;font-size:.84rem;
  line-height:1.48;color:#a9bdbc}

/* ---------------------------------------------------------------- */
/*  Списки разделов                                                  */
/* ---------------------------------------------------------------- */
.ot-sec{padding:2.6rem 0;border-top:1px solid #e1e3de}
.ot-sec:first-of-type{border-top:0}
.ot-sec__h{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);
  gap:1.6rem 3rem;align-items:start}
.ot-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:#7a5f08}
.ot-sec__k span+span{color:#47514f;font-weight:600}
.ot-sec h2{grid-column:1;font-size:clamp(1.5rem,2.6vw,2rem)}
.ot-sec h2 a{text-decoration:none}
.ot-sec h2 a:hover{color:#7a5f08}
.ot-sec__d{grid-column:1;margin:.8rem 0 0;font-size:.98rem;color:#47514f}
.ot-list{grid-column:2;grid-row:2/span 3;margin:0;padding:0;list-style:none;
  columns:2;column-gap:2.2rem}
.ot-list li{break-inside:avoid;margin:0 0 .5rem}
.ot-list a{display:block;font-size:.95rem;line-height:1.42;
  text-decoration:none;padding-left:2.2rem;position:relative}
.ot-list a::before{content:attr(data-n);position:absolute;left:0;top:.08rem;
  font-size:.72rem;font-weight:700;color:#c0c6c2}
.ot-list a:hover{color:#7a5f08}
.ot-list a:hover::before{color:#7a5f08}

/* ---------------------------------------------------------------- */
/*  Блок призыва                                                     */
/* ---------------------------------------------------------------- */
/* Блок на ЛАТУНИ, и весь текст в нём тёмный: белый на #c9a227 даёт
   2.1:1. Тёмный на латуни — 9.6:1, и это единственный способ оставить
   акцент акцентом, не осветляя его до бледно-жёлтого. */
.ot-end{background:#c9a227;color:#10272b;border-radius:20px;
  padding:2.8rem 2.4rem}
/* Метка на латуни. #6a5406 замерился 3.01:1 — мелкому прописному
   тексту послабление для крупного не положено. #17373c даёт
   5.28:1. Четвёртая сессия подряд, где именно надстрочная метка на
   акценте оказалась самым тёмным местом страницы. */
.ot-end .ot-sec__k{color:#17373c}
.ot-end h2{font-size:clamp(1.7rem,3.2vw,2.3rem);max-width:22ch;
  color:#10272b}
.ot-end>p{margin:1.1rem 0 0;max-width:52rem;font-size:1.04rem;color:#2b2206}
.ot-end__l{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.7rem 0 0;padding:0;
  list-style:none}
.ot-end__l a{display:inline-block;background:#10272b;color:#f2efe6;
  padding:.68rem 1.3rem;border-radius:999px;font-size:.93rem;font-weight:700;
  text-decoration:none}
.ot-end__l a:hover{background:#17373c}

/* ---------------------------------------------------------------- */
/*  Статья                                                           */
/* ---------------------------------------------------------------- */
.ot-doc{padding:3.4rem 1.5rem 4rem}
.ot-body{max-width:38rem;margin:0 auto}
.ot-crumb{max-width:38rem;margin:0 auto 1.6rem;font-size:.84rem;color:#47514f}
.ot-crumb a{color:#7a5f08;font-weight:700;text-decoration:none}
.ot-crumb a:hover{text-decoration:underline}
.ot-meta{max-width:38rem;margin:0 auto 1.6rem;font-size:.72rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#47514f}
.ot-body p{margin:0 0 1.15rem}
.ot-body>p:first-of-type{font-size:1.18rem;line-height:1.58;color:#131a19}
.ot-body h2{font-size:clamp(1.42rem,2.4vw,1.8rem);margin:2.6rem 0 .9rem;
  line-height:1.16}
.ot-body h3{font-family:'OtText',system-ui,sans-serif;font-size:1.1rem;
  font-weight:700;letter-spacing:0;margin:1.9rem 0 .6rem}
.ot-s2{position:relative}
.ot-s2::before{content:attr(data-n);display:block;font-size:.7rem;
  font-weight:700;letter-spacing:.14em;color:#7a5f08;
  margin:2.6rem 0 -2.1rem}
.ot-s2>h2:first-child{margin-top:2.6rem}
.ot-body ul,.ot-body ol{margin:0 0 1.15rem;padding-left:1.3rem}
.ot-body li{margin:0 0 .45rem}
.ot-body a{color:#7a5f08;text-decoration:underline;
  text-underline-offset:.16em;text-decoration-thickness:1px}
.ot-body a:hover{text-decoration-thickness:2px}
.ot-body strong{font-weight:700}

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

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

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

/* ---------------------------------------------------------------- */
/*  Подвал                                                           */
/* ---------------------------------------------------------------- */
.ot-foot{background:#10272b;color:#a9bdbc;margin-top:4.5rem;
  padding:3.4rem 0 2.6rem}
.ot-foot__in{max-width:72rem;margin:0 auto;padding:0 1.5rem}
.ot-foot__g{display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(9rem,1fr));
  gap:2rem}
.ot-foot__t{margin:0 0 .9rem;font-family:'OtDis',Rockwell,serif;
  font-weight:400;font-size:1.16rem;color:#f2efe6;letter-spacing:-.01em}
.ot-foot__g>div+div .ot-foot__t{font-family:'OtText',system-ui,sans-serif;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#e8c457}
.ot-foot__about{margin:0;font-size:.92rem;line-height:1.58;max-width:30ch}
.ot-foot ul{margin:0;padding:0;list-style:none}
.ot-foot li{margin:0 0 .5rem}
.ot-foot li a{font-size:.92rem;text-decoration:none}
.ot-foot li a:hover{color:#e8c457}
.ot-foot__note{margin:2.8rem 0 0;padding-top:1.6rem;
  border-top:1px solid #2a565c;font-size:.82rem;line-height:1.62;
  max-width:62rem}

/* ---------------------------------------------------------------- */
/*  Узко                                                             */
/* ---------------------------------------------------------------- */
@media(max-width:1000px){
  .ot-c__h,.ot-c__r,.ot-d__r{grid-template-columns:1fr 15rem 5rem}
  .ot-q__h,.ot-q__r{grid-template-columns:1fr 13rem 6rem}
}
@media(max-width:960px){
  .ot-hero__in{grid-template-columns:1fr;gap:2rem;padding-top:3rem}
  .ot-hero__v{order:-1}
  .ot-sec__h{grid-template-columns:1fr}
  .ot-list{grid-column:1;grid-row:auto;margin-top:1.2rem}
  .ot-foot__g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  body{font-size:1rem}
  .ot-nav nav{display:none}
  .ot-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
  .ot-list{columns:1}
  .ot-band{padding:3rem 0}
  .ot-end{padding:2rem 1.5rem}
  .ot-b,.ot-p{padding:1.2rem 1.1rem 1.05rem;border-radius:14px}
  /* Полоса знака уходит под подпись, а не жмётся в колонку: семь
     клеток недели в пяти сантиметрах становятся нечитаемы. */
  .ot-c__h,.ot-c__r,.ot-d__r{grid-template-columns:1fr 5rem}
  .ot-q__h,.ot-q__r{grid-template-columns:1fr 5.4rem}
  .ot-c__h>b:nth-child(2),.ot-q__h>b:nth-child(2){display:none}
  .ot-c__q,.ot-d__q,.ot-q__q{grid-column:1/-1;margin-bottom:.35rem}
  .ot-c__w,.ot-d__t,.ot-q__t{grid-column:1/-1}
  .ot-foot__g{grid-template-columns:1fr}
}


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