/* ═══════════════════════════════════════════════════════════════
   perle.css — общий фундамент всех страниц Perle.

   ⚠️ ПОДКЛЮЧАТЬ ПЕРВЫМ, ДО <style> страницы.

   Раньше файл подключался последним и перебивал страничные стили:
   ширина .wrap у всех становилась 960px (витрина сжималась с 1100,
   узкие страницы растягивались с 560), а :root перекрашивал палитры —
   тёмная страница rescue.html получала светлый фон и тёмный текст
   по тёмным карточкам. Теперь наоборот: здесь лежат УМОЛЧАНИЯ,
   а страница вправе их переопределить.

   Как задать свою ширину: в <style> страницы напишите
       :root{ --wrap: 1100px }
   Как задать свою палитру: переопределите нужные переменные там же.
   ═══════════════════════════════════════════════════════════════ */

/* ─── палитра по умолчанию ─── */
:root{
  --wrap:960px;
  --bg:#FAF8F5; --ink:#1C1917; --muted:#78716C; --line:#E8E4DF;
  --flame:#EA580C; --ember:#C2410C; --honey:#F59E0B;
  --soft:#FEF0E8; --paper:#FFFFFF; --up:#15803D; --down:#B91C1C;
  --night:#221E1B; --night-2:#2C2724;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg); color:var(--ink);
  font-family:'Onest', system-ui, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ─── ширина контента ───
   padding-inline, а не сокращённое padding: иначе у страниц
   пропадал нижний отступ и контент прилипал к низу экрана. */
.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:20px;
}

.display{font-family:'Unbounded', sans-serif; font-weight:600; letter-spacing:-.01em}
.mono{font-family:'JetBrains Mono', monospace}
.muted{color:var(--muted); font-size:13px}

/* ─── тестовый баннер ─── */
.banner{
  background:#FFF7ED; color:var(--ember);
  font-size:12px; text-align:center; padding:7px 12px;
  font-weight:600; line-height:1.4;
}

/* ═══ ШАПКА ═══════════════════════════════════════════════════
   Одна разметка на всех страницах: .topbar (логотип + кошелёк)
   и .navbar > nav.sections (разделы). Старые имена .hdr и .navrow
   оставлены синонимами, чтобы непереведённые страницы не рассыпались
   на время переезда. Когда переведёте все — синонимы можно убрать.
   ═════════════════════════════════════════════════════════════ */
header{background:var(--paper); border-bottom:1px solid var(--line)}

.topbar, .hdr{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:0; min-height:64px;
}

.logo-link{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.logo-link svg{display:block; flex-shrink:0}
.logo-name{display:flex; align-items:baseline; gap:7px}
.logo-ru{font-family:'Unbounded', sans-serif; font-weight:600; font-size:19px}
.logo-cv{font-size:11.5px; color:var(--muted); font-weight:600}
.logo-tag{
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}

.navbar, .navrow{
  padding:0 0 11px; min-height:36px;
  /* Строка не переносится, а прокручивается вбок: на телефоне пункты
     «Кабинет» и «Как начать» не помещаются, и раньше просто обрезались. */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* старый Edge */
}
.navbar::-webkit-scrollbar, .navrow::-webkit-scrollbar{display:none}

nav, .sections{
  display:inline-flex; gap:18px; align-items:center;
  font-size:14px; font-weight:600; white-space:nowrap;
  padding-right:4px;
}
/* Ссылки и вкладки выглядят одинаково — что бы ни стояло в разметке,
   <a> или <span>. Раньше правило описывало только span, и одиночная
   ссылка выпадала синей. :link и :visited добавлены, чтобы браузер
   не подменял цвет у посещённых. */
nav a, nav a:link, nav a:visited, nav span,
.sections a, .sections a:link, .sections a:visited, .sections span{
  color:var(--muted); text-decoration:none; flex-shrink:0;
  font:inherit; padding-bottom:2px; cursor:pointer;
  border-bottom:2px solid transparent;
}
nav a.on, nav span.on, .sections a.on, .sections span.on{
  color:var(--ink); border-bottom-color:var(--flame);
}
nav a:hover, nav span:hover, .sections a:hover, .sections span:hover{color:var(--ink)}
.nav-sep{color:var(--line); cursor:default}

/* кнопка кошелька — фирменный оранжевый MetaMask, он же узнаваемость */
.btn-mm{
  background:#F6851B; color:#fff; border:none; border-radius:12px;
  padding:10px 18px; font-size:13px; font-weight:700;
  font-family:inherit; cursor:pointer; flex-shrink:0;
}
.btn-mm:hover{background:#E2761B}

/* ─── ВНУТРЕННИЕ ВКЛАДКИ СТРАНИЦЫ ───
   Не путать с навигацией сайта: nav.sections ведёт МЕЖДУ страницами,
   .subnav переключает разделы ВНУТРИ одной (витрина / клуб / портфель
   на «Общем деле»). Раньше они были свалены в одну строку, и вкладки
   выглядели как ссылки на другие страницы. */
.subnav-wrap{background:var(--paper); border-bottom:1px solid var(--line)}
.subnav{
  display:flex; gap:6px; align-items:center;
  padding-block:9px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.subnav::-webkit-scrollbar{display:none}

/* Один вид для всех пунктов: и для вкладок-<span> внутри страницы,
   и для ссылок-<a> на соседние страницы. Человеку не должно быть
   видно, что под капотом разное. */
.subnav a, .subnav a:link, .subnav a:visited, .subnav span{
  flex-shrink:0; cursor:pointer; text-decoration:none;
  font:inherit; font-size:13.5px; font-weight:600;
  color:var(--muted); background:transparent;
  padding:7px 15px; border-radius:99px;
  border:1.5px solid transparent; white-space:nowrap;
}
.subnav a:hover, .subnav span:hover{color:var(--ink); background:var(--bg)}
.subnav a.on, .subnav span.on{
  background:var(--soft); color:var(--ember); border-color:var(--flame);
}

/* ─── подвал ─── */
footer{
  border-top:1px solid var(--line);
  padding:26px 0; margin-top:28px;
  font-size:13px; color:var(--muted);
}
footer a{color:var(--muted)}
footer a:hover{color:var(--ink)}

/* ─── доступность ─── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--flame); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media (max-width:520px){
  .logo-tag{display:none}
  .topbar, .hdr{min-height:56px}

  /* Плотнее пункты — больше влезает без прокрутки */
  nav, .sections{gap:14px; font-size:13.5px}
  .subnav a, .subnav span{padding:6px 12px; font-size:13px}

  /* Полоса прокручивается от края до края, а не внутри отступов:
     так видно, что справа есть продолжение, и палец не упирается
     в пустое поле. */
  .wrap.navbar, .wrap.navrow, .wrap.subnav{
    padding-inline:0;
    scroll-padding-inline:16px;
  }
  .wrap.navbar > *, .wrap.navrow > *{padding-inline:16px}
  .wrap.subnav{padding-inline:16px}

  /* Затухание у правого края — подсказка, что строка листается */
  .navbar, .navrow, .subnav{
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
}