/* ============================================================
   TOPBAR — край белой страницы (газетная логика)
   ============================================================ */

.topbar{
  /* компенсируем body padding, но НЕ через rem (rem на мобиле у тебя очень маленький) */
  --page-pad: clamp(16px, 2vw, 32px);

  /* высота топбара (десктоп) + множитель для мобилы */
  --topbar-h: 64px;
  --topbar-mult-mobile: 1.20;
  
  --topbar-shift: 0%;          /* десктоп */
  --topbar-shift-mobile: 10%;  /* мобила */

  margin: calc(-1 * var(--page-pad)) calc(-1 * var(--page-pad)) 1.2rem;
  padding: 0;
  background: #fdfdfc;

  box-shadow:
    0 1px 0 rgba(0,0,0,0.06),
    0 3px 10px rgba(0,0,0,0.08);

  border: none;
}

/* ширина как у основного контента */
.topbar__wrap{
  max-width: var(--topbar-maxw, 1100px);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* высота строки — чтобы это был «край», а не полоска */
.topbar__inner{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;

  min-height: var(--topbar-h);
  
  
  transform: translateY(var(--topbar-shift));
}

/* ------------------------------------------------------------
   КНОПКИ — типографика, не UI
------------------------------------------------------------ */

.topbar__btn,
.topbar__link{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  color: #111;
  text-decoration: none;

  padding: 0.35rem 0.6rem;

  background: transparent;
  border: none;
  border-radius: 0;

  position: relative;

  transition: color 0.2s ease;
}

/* visited — НИЧЕГО не меняет */
.topbar__btn:visited,
.topbar__link:visited{
  color: #111;
}

/* hover — типографский, не кнопочный */
.topbar__btn:hover,
.topbar__link:hover{
  color: #000;
}

/* тонкое подчёркивание как в печати */
.topbar__btn::after,
.topbar__link::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;

  height: 1px;
  background: rgba(0,0,0,0.25);

  opacity: 0;
  transition: opacity 0.2s ease;
}

.topbar__btn:hover::after,
.topbar__link:hover::after{
  opacity: 1;
}

/* ------------------------------------------------------------
   мобильная версия — ничего не ломаем
------------------------------------------------------------ */

@media (max-width: 640px){
  .topbar{
    --topbar-shift: var(--topbar-shift-mobile);
    --page-pad: 16px;
  }

  .topbar__inner{
    min-height: calc(var(--topbar-h) * var(--topbar-mult-mobile));
    justify-content: flex-end; /* НЕ центрируем */
  }

  .topbar__btn,
  .topbar__link{
    font-size: 0.9rem;
  }
}



/* ЗАЗОР ПОСЛЕ ТОПБАРА — двигаем следующий блок вниз */
.topbar + .u-cover{
  margin-top: 3rem !important;
}

/* на мобиле чуть меньше */
@media (max-width: 640px){
  .topbar + .u-cover{
    margin-top: 2rem !important;
  }
}