/* ============ Станція Північна — експедиція 01 ============ */
:root {
  --ink: #14568f;            /* основний синій з обкладинок */
  --ink-soft: #5d8db8;
  --bg: #ffffff;
  --tint: rgba(228, 240, 250, .52);   /* підсвітка розмитого фону плеєра */
  --line: rgba(20, 86, 143, .16);
  --ratio: 1.41;             /* пропорція обкладинок (3496×2480) */
  --gutter: clamp(16px, 3vw, 40px);
  --ease: cubic-bezier(.22, .7, .2, 1);
  --font: "Helvetica Neue", Arial, "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
}
body.is-locked { overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }

/* ---------- верхня смуга ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px var(--gutter);
  font-size: 12px; letter-spacing: .14em; text-transform: lowercase;
}
.topbar__title { opacity: .7; }

/* ---------- лого лейблу (Київпастранс Records): одноколірна маска, колір = колір тексту ---------- */
.label-logo {
  --h: 38px;
  display: block; flex: none; height: var(--h); aspect-ratio: 560 / 267;
  background: currentColor; opacity: .78;
  -webkit-mask: url(../assets/img/label.webp) center / contain no-repeat;
          mask: url(../assets/img/label.webp) center / contain no-repeat;
  user-select: none; -webkit-tap-highlight-color: transparent; transition: opacity .25s;
}
.label-logo:hover, .label-logo:focus-visible { opacity: 1; }
.label-logo--m { display: none; }
/* веб: під віджетом плеєра (позицію рахує alignLayout у js/strip.js; до його запуску — правий кут) */
.topbar { position: relative; }
.label-logo--web { position: absolute; left: var(--logo-x, calc(100% - var(--gutter) - 40px)); top: var(--logo-y, calc(100% - 4px)); translate: -50% 0; z-index: 3; }  /* над .home, інакше перекривається й не клікається */
/* низьке вікно: лого переходить у верхню смугу (клас ставить strip.js) */
.logo-top .topbar { justify-content: flex-start; align-items: center; }
.logo-top .topbar__title { margin-left: auto; }
.logo-top .label-logo--web { position: static; translate: none; --h: 22px; margin: -6px 0; }