@charset "utf-8";

/* ==========================================================================
   Карина Оганджанян — страница
   Порядок: токены → база → появление → бренд → секции → адаптив.
   ========================================================================== */

:root{
  --ink:#171a1c;
  --white:#fdfdfb;
  --muted:#6e7275;

  /* Акцент: лососевый. Тёмный вариант — для светлых фонов, светлый — для тёмных. */
  --accent:#a8442c;
  --accent-on-dark:#e8a891;

  /* Первый экран */
  --hero-base:#8e2e1b;
  --hero-red:#a03a22;
  --hero-soft:#f3e4dc;
  --hero-sand:#f3d9c6;

  /* Светлые секции */
  --rule:#d5d8d9;
  --note:#62686b;
  --body:#61676a;
  --hair:#aeb3b6;

  /* Тёмная секция (нарративы) */
  --dark-bg:#171a1c;
  --dark-rule:#34393d;
  --dark-note:#8e9497;
  --dark-body:#b5b9bc;

  /* Секция Telegram */
  --tg-bg:#f0e3dc;
  --tg-note:#7a6a63;
  --tg-handle:#596673;

  /* Arimo — самохостинг (fonts.css), метрический аналог Arial: на Android
     нет ни Arial, ни Helvetica, и без него страница падала на Roboto. */
  --sans:'Arimo',Arial,Helvetica,sans-serif;

  /* Боковое поле секций. Расширяется на широких экранах — см. @media 1700. */
  --gutter:6%;
}

/* --------------------------------------------------------------- база --- */

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

p,h1,h2,h3,ul{margin:0}

a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
a:focus-visible{outline:2px solid currentColor;outline-offset:7px}

img{max-width:100%}

::selection{background:#f0cabb;color:var(--ink)}

.skip{
  position:absolute;
  left:20px;
  top:-100px;
  z-index:10;
  padding:14px;
  background:#fff;
  color:var(--ink);
}
.skip:focus{top:20px}

/* ---------------------------------------------------------- появление --- */
/* Скрываем только при работающем JS: без него содержимое видно сразу. */

.js .rv{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);
}
.js .rv.in{opacity:1;transform:none}

/* ------------------------------------------------------------- бренд --- */

.brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
  line-height:1;
}
.brand__mark{font-size:30px;font-weight:600;letter-spacing:-1.9px}
.brand__rule{width:1px;height:26px;background:currentColor;opacity:.28}
.brand__tagline{font-size:11px;line-height:1.45;letter-spacing:.02em;opacity:.78}

/* -------------------------------------------------------- первый экран --- */

.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:min(1100px,100svh);
  overflow:hidden;
  background:var(--hero-red);
  color:#fff;
}

/* Фон первого экрана не должен вести себя как отдельная картинка: без этого
   правый клик и долгое нажатие открывают «Открыть изображение» и показывают
   исходный кадр целиком, в обход кадрирования. pointer-events убирает пункт
   меню, touch-callout — всплывающее меню в iOS, user-drag — перетаскивание.
   Содержимое поверх фото лежит в .hero__content и остаётся кликабельным. */
.hero__blur,
.hero__photo{
  position:absolute;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  -webkit-user-drag:none;
}

/* Размытая подложка добирает кадр до краёв экрана. */
.hero__blur{
  inset:0;
  width:100%;
  height:100%;
  object-position:12% 26%;
  transform:scale(1.35);
  filter:blur(18px) saturate(1.02);
}

.hero__photo{
  top:0;
  right:0;
  width:78%;
  height:100%;
  object-position:78% 26%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 8%,#000 26%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 8%,#000 26%);
}

.hero__scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(90,25,12,.74) 0%,rgba(90,25,12,.44) 36%,rgba(90,25,12,.1) 56%,transparent 68%),
    linear-gradient(180deg,rgba(90,25,12,.35) 0%,transparent 22%);
}

.hero__content{
  position:relative;
  z-index:2;
  display:flex;
  flex:1;
  flex-direction:column;
  padding:28px 4% 30px;
}

.hero__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.hero__nav{display:flex;gap:39px;padding-top:8px;font-size:14px}
.hero__nav a{
  padding-bottom:5px;
  border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.hero__nav a:hover{color:#fff9f6;border-bottom-color:rgba(255,255,255,.8)}

.hero__intro{
  margin-top:clamp(40px,7vh,90px);
  max-width:min(430px,46%);
}

.hero__lede{
  font-size:clamp(22px,2.3vw,34px);
  line-height:1.12;
  letter-spacing:-.055em;
}

.hero__credentials{
  list-style:none;
  /* Линии-разделители равны ширине списка, а список по умолчанию тянулся во
     весь блок — линии торчали далеко за самую длинную строку. max-content
     ужимает список ровно по ней, max-width возвращает перенос там, где
     строка шире экрана. */
  width:max-content;
  max-width:100%;
  margin-top:clamp(20px,3vh,34px);
  padding:0;
  font-size:13px;
  line-height:1.4;
  color:var(--hero-soft);
}
.hero__credentials li{
  margin:0 -12px;
  padding:10px 12px clamp(9px,1.2vh,13px);
  border-top:1px solid rgba(255,255,255,.3);
  transition:background-color .35s ease,color .35s ease;
}
.hero__credentials li:hover{background:rgba(255,255,255,.13);color:#fff}

.hero__name{
  margin:auto 0 0;
  padding-top:60px;
  font-size:clamp(64px,9.7vw,140px);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.078em;
}
.hero__name span{display:block}
.hero__name span+span{margin-top:5px;color:var(--hero-sand)}

.hero__foot{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:clamp(22px,3.5vh,42px);
  font-size:13px;
  color:var(--hero-soft);
}
.hero__jump{
  padding-bottom:6px;
  border-bottom:1px solid #fff;
  color:#fff;
  transition:color .25s,border-color .25s;
}
.hero__jump:hover{color:var(--hero-sand);border-color:var(--hero-sand)}

/* ------------------------------------------------------ шапка секции --- */

.sec-top{
  display:flex;
  align-items:baseline;
  gap:24px;
  padding-bottom:18px;
  border-bottom:1px solid var(--rule);
}
.sec-top__label{
  font-size:14px;
  line-height:1.5;
  letter-spacing:.02em;
}
.sec-top__note{
  margin-left:auto;
  font-size:14px;
  line-height:1.5;
  color:var(--note);
}

/* ----------------------------------------------------------- подкаст --- */

.podcast{padding:70px var(--gutter) 0}

.podcast__title{
  margin-top:46px;
  font-size:clamp(100px,15.9vw,240px);
  font-weight:400;
  line-height:.84;
  letter-spacing:-.084em;
}
.podcast__title span{display:block;margin-top:4px;margin-left:23%}

.podcast__bottom{
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:8%;
  align-items:start;
  margin-top:62px;
}

.podcast__description{font-size:16px;line-height:1.6;color:var(--body)}

.watch__label{
  margin-bottom:22px;
  font-size:14px;
  line-height:1.5;
  color:var(--note);
}

.video-links{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.video-links a{
  padding-bottom:8px;
  border-bottom:1px solid var(--ink);
  font-size:clamp(23px,2.7vw,41px);
  line-height:1.2;
  letter-spacing:-.055em;
  transition:color .2s,border-color .2s;
}
.video-links a:hover{color:var(--accent);border-color:var(--accent)}

.listen{
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:8%;
  align-items:start;
  margin-top:67px;
  padding:35px 0 42px;
  border-top:1px solid var(--rule);
}
.listen__heading h3{
  font-size:32px;
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.05em;
}
.listen__heading p{margin-top:12px;font-size:14px;color:var(--note)}

.audio-platforms{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px 30px;
}
.audio-platforms a{
  justify-self:start;
  padding-bottom:7px;
  border-bottom:1px solid var(--hair);
  font-size:23px;
  line-height:1.5;
  letter-spacing:-.035em;
  transition:color .2s,border-color .2s;
}
.audio-platforms a:hover{color:var(--accent);border-color:var(--accent)}

.guest-note{
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:8%;
  align-items:baseline;
  padding:32px 0 12px;
  border-top:1px solid var(--rule);
}
.guest-note h3{
  font-size:14px;
  font-weight:400;
  line-height:1.6;
  color:var(--note);
}
.guest-note p{font-size:19px;line-height:1.8;letter-spacing:-.025em}
.guest-note a{
  white-space:nowrap;
  text-decoration:underline;
  text-decoration-color:#e0b3a4;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
.guest-note a:hover{color:var(--accent);text-decoration-color:currentColor}
.guest-note__more{white-space:nowrap;color:var(--note)}

/* --------------------------------------------------------- консалтинг --- */

.narrative{
  margin-top:58px;
  padding:46px var(--gutter) 60px;
  background:var(--dark-bg);
  color:var(--white);
}
.narrative .sec-top{border-bottom-color:var(--dark-rule)}
.narrative .sec-top__note{color:var(--dark-note)}

/* Кегль ниже, чем у «Смелее Чем Я»: заголовок в три строки, и самая длинная
   из них — «коммуникационной». При 15.9vw это слово выходило за поле. */
.narrative__title{
  margin-top:52px;
  font-size:clamp(32px,11.4vw,148px);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.075em;
}
.narrative__title span{
  display:block;
  margin-left:23%;
  color:var(--accent-on-dark);
  white-space:nowrap;
}

.narrative__grid{
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:8%;
  align-items:start;
  margin-top:64px;
  padding-top:30px;
  border-top:1px solid var(--dark-rule);
}
.narrative__lede{font-size:19px;line-height:1.45;letter-spacing:-.025em}
.narrative__copy{
  max-width:620px;
  font-size:16px;
  line-height:1.6;
  color:var(--dark-body);
}
.narrative__copy+.narrative__copy{margin-top:20px}
/* Просьба написать — светлее основного текста, чтобы читалась как обращение. */
.narrative__copy--ask{color:var(--white)}

.narrative__cta{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:30px;
  margin-top:44px;
}
.narrative__cta a{
  padding-bottom:8px;
  border-bottom:1px solid var(--white);
  color:var(--white);
  font-size:clamp(29px,3.7vw,54px);
  line-height:1.2;
  letter-spacing:-.055em;
  transition:color .25s,border-color .25s;
}
.narrative__cta a:hover{color:var(--accent-on-dark);border-color:var(--accent-on-dark)}
.narrative__handle{font-size:14px;line-height:1.5;color:var(--dark-note)}

/* ---------------------------------------------------------- telegram --- */

.telegram{
  padding:45px var(--gutter) 62px;
  background:var(--tg-bg);
}
.telegram .sec-top{border-bottom-color:rgba(23,26,28,.16)}
.telegram .sec-top__note{color:var(--tg-note)}

.telegram__title{
  margin-top:63px;
  margin-left:-.01em;
  font-size:clamp(100px,16vw,240px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.078em;
}

.telegram__bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:end;
  margin-top:54px;
}
.telegram__link{
  justify-self:start;
  padding-bottom:8px;
  border-bottom:1px solid var(--ink);
  font-size:clamp(29px,3.7vw,54px);
  line-height:1.2;
  letter-spacing:-.055em;
}
.telegram__link:hover{opacity:.6}
.telegram__bottom>div{justify-self:end;font-size:16px;line-height:1.5}
.telegram__handle{
  display:block;
  margin-top:17px;
  font-size:13px;
  color:var(--tg-handle);
}

/* ------------------------------------------------------------- футер --- */

.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:34px var(--gutter);
}
.footer__copy{font-size:13px;color:var(--muted)}

/* ------------------------------------------------- страница 404 --------- */
/* Отдельная страница, без reveal.js: появление сделано CSS-анимацией,
   чтобы страница ошибки не зависела от загрузки скрипта. */

.nf-page{background:var(--hero-red);color:#fff}

.nf{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100svh;
  overflow:hidden;
  background:var(--hero-red);
}

.nf__blur{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:12% 26%;
  transform:scale(1.5);
  filter:blur(46px) saturate(1.03);
  /* То же, что и на первом экране: фон не открывается как картинка. */
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  -webkit-user-drag:none;
}

.nf__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(90,25,12,.55) 0%,rgba(90,25,12,.3) 40%,rgba(90,25,12,.72) 100%);
}

.nf__wrap{
  position:relative;
  z-index:2;
  display:flex;
  flex:1;
  flex-direction:column;
  padding:28px 6% 34px;
}

.nf__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.nf__nav{display:flex;gap:39px;padding-top:8px;font-size:14px}
.nf__nav a{
  padding-bottom:5px;
  border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.nf__nav a:hover{color:#fff9f6;border-bottom-color:rgba(255,255,255,.8)}

.nf__code{
  margin:auto 0 0;
  font-size:clamp(120px,25vw,320px);
  font-weight:400;
  line-height:.82;
  letter-spacing:-.09em;
  color:var(--hero-sand);
  animation:nf-in .9s cubic-bezier(.22,.61,.36,1) .06s both;
}

.nf__body{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:8%;
  align-items:start;
  margin-top:clamp(34px,6vh,64px);
  animation:nf-in .9s cubic-bezier(.22,.61,.36,1) .22s both;
}

.nf__title{
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.12;
  letter-spacing:-.055em;
}

.nf__home{
  display:inline-block;
  margin-top:30px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.85);
  font-size:clamp(22px,2.4vw,34px);
  line-height:1.2;
  letter-spacing:-.045em;
  transition:color .3s,border-color .3s;
}
.nf__home:hover{color:var(--hero-sand);border-color:var(--hero-sand)}

.nf__rows{display:grid}
.nf__row{
  display:flex;
  align-items:baseline;
  gap:18px;
  padding:17px 0;
  border-top:1px solid rgba(255,255,255,.28);
  transition:background-color .35s ease,color .35s ease;
}
.nf__row:hover{background:rgba(255,255,255,.13)}
.nf__row-name{padding-left:12px;font-size:19px;letter-spacing:-.03em}
.nf__row-note{
  margin-left:auto;
  padding-right:12px;
  font-size:13px;
  color:var(--hero-soft);
}

.nf__foot{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:clamp(26px,4vh,44px);
  font-size:13px;
  color:var(--hero-soft);
}

@keyframes nf-in{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* Ссылки на 404 — светлые: обычный акцент рассчитан на светлый фон. */
.nf-page a:hover{color:inherit}

/* ============================================================= адаптив === */

@media(min-width:1700px){
  :root{--gutter:max(6%,calc((100vw - 1500px) / 2))}
}

@media(max-width:1000px){
  .podcast__bottom,
  .listen{grid-template-columns:1fr 1.8fr;gap:5%}
  .video-links{flex-wrap:wrap;gap:18px}
}

/* Контрольная точка 900px в исходном экспорте была заявлена, но не работала:
   инline-стили перекрывали её. Здесь она сознательно не восстановлена, чтобы
   вёрстка совпадала с утверждённым макетом. Чтобы включить задуманное
   поведение, добавьте:
     @media(max-width:900px){
       .hero__intro{max-width:min(430px,58%)}
       .narrative__grid{grid-template-columns:1fr 1.4fr;gap:5%}
     }
*/

@media(max-width:760px){
  /* Экран держим ровно во весь вьюпорт: при min-height:0 блок вытягивался
     содержимым до ~960px, и имя уходило за первый экран. */
  .hero{min-height:100svh}
  .hero__blur{display:none}
  .hero__photo{
    width:100%;
    /* Кадр сдвинут левее по снимку, чтобы сама героиня встала ближе
       к правому краю экрана. По вертикали при таком кадрировании
       обрезки нет — фото укладывается в высоту целиком. */
    object-position:18% 50%;
    /* Крупнее сам кадр. Точка отсчёта — примерно там, где лицо, поэтому
       героиня остаётся у правого края, а не уползает при увеличении. */
    transform:scale(1.16);
    transform-origin:78% 26%;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .hero__scrim{
    background:linear-gradient(180deg,rgba(90,25,12,.55) 0%,rgba(90,25,12,.28) 26%,rgba(90,25,12,.55) 52%,rgba(90,25,12,.9) 78%);
  }
  .hero__content{padding:22px 6% 28px}
  .hero__top{flex-direction:row;align-items:flex-start;flex-wrap:wrap;gap:0}

  /* Лого крупнее — на мобильном оно единственный фирменный знак на экране */
  .hero__top .brand__mark{font-size:38px;letter-spacing:-2.4px}
  .hero__top .brand__rule{height:34px}
  .hero__top .brand__tagline{font-size:13px}

  /* Меню не прилеплено к лого: своя строка с воздухом сверху, пункты
     разнесены по всей ширине, а не сбиты в левый угол. */
  .hero__nav{
    width:100%;
    justify-content:space-between;
    gap:12px;
    margin-top:20px;
    padding-top:0;
    font-size:14px;
  }
  .hero__intro{max-width:none;margin-top:min(24vh,180px)}
  .hero__lede{font-size:26px}
  .hero__credentials li{padding:8px 12px 9px}
  .hero__name{margin-top:0;padding-top:20px;font-size:13vw}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:14px;font-size:12px}

  .sec-top{flex-direction:column;align-items:flex-start;gap:8px}
  .sec-top__note{margin-left:0}

  .narrative{margin-top:30px;padding:34px 6% 42px}
  .narrative__title{margin-top:38px;font-size:11.8vw;letter-spacing:-.07em}
  .narrative__grid{grid-template-columns:1fr;gap:24px;margin-top:34px}
  .narrative__lede{font-size:17px}
  .narrative__cta{flex-direction:column;align-items:flex-start;gap:20px;margin-top:32px}
  .narrative__cta a{font-size:34px}

  /* Копирайт слева, знак справа — в одну строку, а не столбиком */
  .footer{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:30px 6%;
  }
  .footer .brand{gap:10px}
  .footer .brand__tagline{font-size:10px}
  .footer__copy{font-size:12px}

  /* 404 */
  .nf__wrap{padding:22px 6% 28px}
  .nf__head{flex-wrap:wrap;gap:14px}
  .nf__nav{
    width:100%;
    justify-content:flex-start;
    gap:22px;
    padding-top:2px;
    font-size:13px;
  }
  .nf__code{margin-top:auto;font-size:38vw;line-height:.86}
  .nf__title{font-size:27px}
  .nf__body{grid-template-columns:1fr;gap:24px;margin-top:30px}
  .nf__home{margin-top:24px;font-size:24px}
  .nf__row{gap:10px;padding:15px 0}
  .nf__row-name{font-size:17px}
  .nf__row-note{font-size:12px}
  .nf__foot{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin-top:30px;
    font-size:12px;
  }
}

/* Невысокие экраны (iPhone SE, старые Android): при 812 px всё помещается,
   при 640-667 — нет. Ужимаем отступ до текста, список регалий и имя, чтобы
   «Карина Оганджанян» оставалась на первом экране. */
@media(max-width:760px) and (max-height:720px){
  .hero__intro{margin-top:min(16vh,110px)}
  /* Плавно, а не ступенькой: на 320–350px строка «О брендах, людях
     и смелости.» при 23px не помещается и уходит на третью строку,
     выдавливая низ первого экрана за границу. */
  .hero__lede{font-size:clamp(20px,6.4vw,23px)}
  .hero__credentials li{padding:6px 12px 7px}
  .hero__name{padding-top:14px;font-size:12vw}
  .hero__foot{gap:8px}
}

/* Совсем низкие экраны (iPhone SE 1-го поколения, 320×568) */
@media(max-width:760px) and (max-height:600px){
  .hero__content{padding-bottom:22px}
  .hero__intro{margin-top:min(10vh,64px)}
  .hero__credentials{font-size:12px}
  .hero__credentials li{padding:5px 12px 6px}
  .hero__name{padding-top:10px;font-size:11.5vw}
  .hero__foot{gap:6px}
}

@media(max-width:650px){
  /* На узких экранах имя разноразмерное: «Карина» крупнее фамилии. */
  .hero__name span:first-child{font-size:1.4em}

  .podcast{padding:39px 6% 0}
  .podcast__title{margin-top:48px;font-size:21vw;line-height:.88;letter-spacing:-.078em}
  .podcast__title span{margin-top:2px;margin-left:20%}
  .podcast__bottom{display:flex;flex-direction:column;gap:34px;margin-top:34px}
  .podcast__description{line-height:1.55}

  .watch{width:100%}
  .watch__label{margin-bottom:18px;font-size:12px}
  .video-links{flex-wrap:nowrap;gap:14px}
  .video-links a{padding-bottom:6px;font-size:clamp(22px,6.2vw,36px)}

  .listen{display:block;margin-top:33px;padding:28px 0 33px}
  .listen__heading{margin-top:19px;max-width:350px}
  .listen__heading h3{font-size:29px}
  .audio-platforms{margin-top:25px;gap:24px 18px}
  .audio-platforms a{font-size:20px;line-height:1.3}

  .guest-note{display:block;padding:26px 0 4px}
  .guest-note h3{margin-bottom:12px}
  .guest-note p{font-size:17px;line-height:1.85}
  .guest-note a{white-space:normal}

  .telegram{padding:29px 6% 37px}
  .telegram__title{margin-top:48px;font-size:19vw;letter-spacing:-.077em}
  .telegram__bottom{grid-template-columns:1fr;gap:34px;margin-top:27px}
  .telegram__link{order:2;font-size:37px}
  .telegram__bottom>div{justify-self:start}
  .telegram__handle{margin-top:11px}
}

@media(max-width:420px){
  .hero__nav{gap:8px;font-size:13px}
  /* Плавно, а не ступенькой: на 320–350px строка «О брендах, людях
     и смелости.» при 23px не помещается и уходит на третью строку,
     выдавливая низ первого экрана за границу. */
  .hero__lede{font-size:clamp(20px,6.4vw,23px)}
  .hero__credentials{font-size:12.5px}
  .narrative__cta a{font-size:29px}

  /* 404: подпись строки уезжает под название */
  .nf__nav{gap:16px;font-size:12px}
  .nf__title{font-size:24px}
  .nf__home{font-size:21px}
  .nf__row{flex-direction:column;align-items:flex-start;gap:4px}
  .nf__row-name{padding-left:0}
  .nf__row-note{margin-left:0;padding-right:0}
}

/* Низкие экраны: «404» считаем от высоты, иначе цифра выдавливает
   остальное за пределы экрана и появляется прокрутка. */
@media(max-height:520px) and (min-width:761px){
  .nf__code{font-size:19vh}
}

@media(max-width:360px){
  .video-links{gap:12px}
  .video-links a{font-size:21px}
}


@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .js .rv{opacity:1;transform:none}
  .nf__code,
  .nf__body{animation:none}
}