/* ============ Станція Північна — експедиція 01 ============ */
/* Шрифт Helvetica. Справжній Helvetica — комерційний, його не можна роздавати з сайту, тому: якщо він є в системі (macOS/iOS) — беремо його,
   інакше вантажиться вільний клон Nimbus Sans (URW++, AGPL з винятком для шрифтів, див. assets/fonts/LICENSE-NimbusSans.txt) — вигляд однаковий скрізь.
   Підмножина: латиниця + кирилиця (укр.) + типографіка. */
@font-face {
  font-family: "Helvetica Web"; font-style: normal; font-weight: 100 500; font-display: swap;
  src: local("Helvetica Neue"), local("HelveticaNeue"), local("Helvetica"), url("../assets/fonts/NimbusSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Helvetica Web"; font-style: normal; font-weight: 600 900; font-display: swap;
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Helvetica Bold"), local("Helvetica-Bold"), url("../assets/fonts/NimbusSans-Bold.woff2") format("woff2");
}

: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 Web", "Helvetica Neue", Helvetica, Arial, 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; }

/* ---------- лого лейблу: готова картинка (з прозорими вирізами) ---------- */
.label-logo {
  --h: 36px;
  display: block; flex: none; height: var(--h); aspect-ratio: 1000 / 1151;
  background: url(../assets/img/logo.webp) center / contain no-repeat; opacity: .88;
  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; }

/* маленька іконка Instagram (маска — колір береться з тексту) */
.ig-ico {
  display: inline-block; flex: none; width: 15px; height: 15px; vertical-align: -2px; color: inherit; opacity: .7;
  background: currentColor; -webkit-mask: var(--ig-mask) center / contain no-repeat; mask: var(--ig-mask) center / contain no-repeat;
  transition: opacity .2s;
  --ig-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.4' cy='6.6' r='.6' fill='black'/%3E%3C/svg%3E");
}
.ig-ico:hover, .ig-ico:focus-visible { opacity: 1; }
.ig-ico[hidden] { display: none; }