:root {
  --world-bg: #7fa8a3; --world-ink: #10262b; --world-accent: #8f1d18; --world-on-accent: #fff; --world-mark: #8f1d18;
  --ice: #f3f9f9;
  --deep: #1b4852;
  --red: #a81f24;
  --olive: #55682f;
  --yellow: #eebf62;
  --line: rgb(18 52 63 / .22);
  --serif: "Playfair Display", "Bodoni 72", Didot, Georgia, "Times New Roman", serif;
  --sans: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@view-transition { navigation: auto; }
body { font-feature-settings: "lnum"; margin: 0; background: var(--ice); color: var(--deep); font: 400 1.0625rem/1.6 var(--sans); overflow-x: clip; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--deep); color: #fff; padding: 8px 14px; }
.skip:focus { left: 8px; }

/* ---------- Header ---------- */
.demo-strip { background: var(--deep); color: var(--ice); text-align: center; font-size: .8125rem; padding: 6px var(--gutter); }
.top { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 12px var(--gutter); background: var(--ice); border-bottom: 1px solid var(--line); }
.logo { position: relative; display: inline-block; flex: none; padding: .42em .6em .5em; border: 1.5px solid currentColor; color: var(--deep); font: 400 1.28rem/.94 var(--serif); letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
.logo span { display: block; }
.logo::before, .logo::after { content: ""; position: absolute; height: 5px; background: var(--ice); }
.logo::before { top: -3px; right: 1.05em; width: .95em; } /* the breve on й breaks the frame, as in the band's logo */
.logo::after { bottom: -3px; left: 1.28em; width: .7em; } /* so does the tail of р */
.nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; font-size: .9375rem; }
.nav a { text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid transparent; }
.nav a:hover { border-color: var(--red); }
.langs { display: flex; border: 1.5px solid var(--deep); }
.langs button { min-width: 44px; min-height: 36px; border: 0; background: none; color: inherit; font: 600 .8125rem var(--sans); cursor: pointer; }
.langs button[aria-pressed="true"] { background: var(--deep); color: var(--ice); }

/* ---------- Opening: a camera move through Waone's painting ---------- */
.journey { height: 760vh; background: var(--ice); }
.journey__stage { position: sticky; top: var(--hh, 66px); height: calc(100svh - var(--hh, 66px)); overflow: hidden; }
.scene { position: absolute; inset: 0; }
.path-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.scene--cover { pointer-events: none; }
.cover-art.is-under { visibility: hidden; }
.path-word { position: absolute; z-index: 2; margin: 0; max-width: calc(100% - 2 * var(--gutter)); color: #f3f9f9; font: 400 clamp(4rem, 12vw, 12rem)/1 var(--serif); letter-spacing: -.015em; text-shadow: 0 3px 40px rgb(10 25 30 / .55); pointer-events: none; will-change: transform, opacity; }
.path-word--right { right: var(--gutter); bottom: 10%; }
.path-word--left { left: var(--gutter); bottom: 10%; }
.path-word--end { left: var(--gutter); right: var(--gutter); bottom: 4%; max-width: none; color: var(--world-ink); font-size: clamp(2.6rem, 6.6vw, 6.4rem); text-align: center; text-shadow: none; }
.still .path-word, .still .path-canvas { display: none; }
.scene img, .scene canvas { will-change: transform; }
.is-live { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.scene--cover { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(12px, 2.4vw, 40px); padding: 14px var(--gutter) calc(var(--strip, 30px) + 8px); }
.cover-title { display: contents; }
.cover-title__l, .cover-title__r { grid-row: 1; color: var(--deep); font: 400 clamp(3rem, 6vw, 7rem)/1.1 var(--serif); letter-spacing: -.01em; }
.cover-title__l { grid-column: 1; justify-self: end; }
.cover-title__r { grid-column: 3; justify-self: start; }
.cover-title__l i, .cover-title__r i { color: var(--world-mark); transition: color .7s ease; }
.cover-art { grid-column: 2; grid-row: 1; height: min(calc(100svh - var(--hh, 66px) - var(--strip, 30px) - 80px), 50vw); width: auto; max-width: 100%; box-shadow: 0 18px 44px rgb(18 52 63 / .3); transform-origin: 50% 45%; }
.cue { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 20px; padding-top: 10px; font: italic 500 clamp(1rem, 1.5vw, 1.25rem)/1.25 var(--serif); }
.scene--close { display: none; background: var(--deep); overflow: hidden; }
.still .scene--close { display: block; }
.still .cover-art.is-under { visibility: visible; }
.scene--close img, .scene--close canvas { width: 100%; height: 100%; object-fit: cover; }
.scene__caption { position: absolute; left: var(--gutter); bottom: clamp(20px, 5vh, 52px); padding: 8px 18px 10px; background: var(--ice); color: var(--deep); font: italic 500 clamp(1.7rem, 4vw, 3.6rem)/1.1 var(--serif); }
.journey__skip { position: absolute; right: var(--gutter); bottom: clamp(20px, 5vh, 52px); padding: 8px 14px; background: var(--ice); color: var(--deep); font-size: .875rem; font-weight: 600; opacity: 0; transition: opacity .25s ease; }
.journey__skip { z-index: 3; }
.journey__skip.is-on, .journey__skip:focus-visible { opacity: 1; }
/* Still version for people who ask their device to reduce motion */
.still .journey { height: auto; }
.still .journey__stage { position: static; height: auto; overflow: visible; display: grid; gap: 12px; }
.still .scene { position: relative; inset: auto; opacity: 1; }
.still .scene--cover { min-height: calc(100svh - var(--hh, 66px)); }
.still .scene--close { height: 70vh; }
.still .journey__skip { display: none; }
/* Sections and their contents rise into place as you reach them */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 130px) var(--gutter); }
.eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.heading, .universe__title, .legends__h, .press__h { text-transform: lowercase; }
.heading { font: 400 clamp(2.5rem, 6.4vw, 5.6rem)/1.08 var(--serif); letter-spacing: -.012em; margin: 8px 0 28px; }
.sample { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .04em; border: 1px solid currentColor; padding: 2px 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 22px; border: 1.5px solid var(--deep); background: var(--deep); color: var(--ice); font: 600 .9375rem var(--sans); text-decoration: none; cursor: pointer; }
.btn:hover:not(:disabled) { filter: brightness(1.25); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn:disabled { cursor: not-allowed; opacity: .68; }

/* ---------- Music: each song recolours this section ---------- */
.music { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; --bg: #7fa8a3; --ink: #10262b; --accent: #8f1d18; --on-accent: #fff; background: var(--bg); color: var(--ink); transition: background-color .7s ease, color .7s ease; }
#music-h { font-size: clamp(2.2rem, 4.4vw, 4.2rem); margin-bottom: 18px; }
.music__grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.stage { position: relative; aspect-ratio: 16 / 9; max-height: 56svh; width: 100%; margin-inline: auto; overflow: hidden; }
.stage img { width: 100%; height: 100%; object-fit: contain; }
.stage__fallback { display: none; position: absolute; inset: 0; place-items: center; padding: 16px; text-align: center; color: var(--deep); }
.stage.art-failed img { visibility: hidden; }
.stage.art-failed .stage__fallback { display: grid; }
.stage__video { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.stage__video.is-on { opacity: 1; pointer-events: auto; }
.stage__video iframe { width: 100%; height: 100%; border: 0; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.controls__now { flex: 1 1 100%; font: italic 400 clamp(2.1rem, 4.6vw, 4.4rem)/1.12 var(--serif); letter-spacing: -.01em; }
.iconbtn { width: 46px; height: 46px; border: 1.5px solid currentColor; background: none; color: inherit; font-size: 1.1rem; cursor: pointer; }
.play { min-width: 130px; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.controls a { margin-left: auto; font-weight: 600; font-size: .9375rem; }
.notice { margin-top: 14px; padding: 12px 14px; background: var(--ice); color: var(--deep); border-left: 4px solid var(--red); }
.track { display: grid; grid-template-columns: 2em 1fr auto; gap: 8px; width: 100%; padding: 13px 4px; background: none; border: 0; border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); color: inherit; font: 500 1.0625rem/1.3 var(--sans); text-align: left; cursor: pointer; transition: padding .25s ease; }
.track:hover { padding-left: 12px; }
.track[aria-current] { font-weight: 800; }
.track[aria-current] .track__n { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.track__n, .track__d { font-variant-numeric: tabular-nums; }
.streams { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 22px; font-size: .875rem; }
.credit { margin-top: 12px; font-size: .875rem; }

/* ---------- Band photo: scrolling pans from the faces down to the logo ---------- */
.band-photo { position: relative; height: min(90svh, 188.5vw); margin: 0; overflow: hidden; background: #555; }
.band-photo img { position: absolute; top: 0; left: 0; width: 100%; height: auto; will-change: transform; }
.band-photo figcaption { position: absolute; left: var(--gutter); bottom: 18px; max-width: calc(100% - 2 * var(--gutter)); padding: 5px 10px; background: var(--ice); color: var(--deep); font-size: .8125rem; font-weight: 600; }
.still .band-photo img { position: static; height: 100%; object-fit: cover; object-position: 50% 55%; }

/* ---------- Song world backdrop ---------- */
.world-backdrop { position: absolute; inset: -12%; z-index: -1; opacity: .42; pointer-events: none; will-change: transform; }
.world-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(46px) saturate(1.25); }

/* ---------- Album universe ---------- */
.universe { height: 1250vh; background: #0c1320; color: #f3f9f9; }
.universe__stage { position: sticky; top: var(--hh, 66px); height: calc(100svh - var(--hh, 66px)); overflow: hidden; perspective: 900px; background: radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1.5px 1.5px at 72% 12%, #fff, transparent), radial-gradient(1px 1px at 42% 68%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 58%, #fff, transparent), radial-gradient(1px 1px at 25% 82%, #fff, transparent), radial-gradient(1px 1px at 58% 36%, #fff, transparent), radial-gradient(ellipse at 50% 55%, #24324f 0%, #0c1320 68%); }
.universe__head { position: absolute; top: clamp(16px, 4vh, 40px); left: var(--gutter); z-index: 2; pointer-events: none; }
.universe__title { font: 400 clamp(2rem, 4.4vw, 4.2rem)/1.1 var(--serif); margin-top: 6px; }
.universe__world { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.universe__item { position: absolute; left: 50%; top: 52%; width: clamp(190px, 25vw, 360px); aspect-ratio: 1; padding: 0; border: 0; background: #24324f; cursor: pointer; box-shadow: 0 30px 70px rgb(0 0 0 / .55); }
.universe__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.universe__now { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(82px, 12vh, 112px); z-index: 2; font: italic 500 clamp(1.7rem, 4vw, 3.8rem)/1.05 var(--serif); pointer-events: none; }
.universe__hint { position: absolute; left: var(--gutter); bottom: clamp(56px, 8vh, 76px); z-index: 2; font-size: .8125rem; pointer-events: none; }
.universe__stage.is-still { position: static; height: auto; overflow: visible; perspective: none; padding: 100px var(--gutter) 40px; }
.universe:has(.is-still) { height: auto; }
.is-still .universe__head { position: static; margin-bottom: 26px; }
.is-still .universe__world { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.is-still .universe__item { position: static; width: 100%; }
.universe__years { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; gap: 2px; padding: 8px var(--gutter); overflow-x: auto; background: rgb(12 19 32 / .7); scrollbar-width: none; }
.universe__years button { flex: none; min-height: 34px; padding: 4px 10px; border: 0; background: none; color: rgb(243 249 249 / .72); font: 500 .875rem var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; }
.universe__years button:hover { color: #fff; }
.universe__years button[aria-current] { background: #f3f9f9; color: #0c1320; }
.is-still .universe__now, .is-still .universe__hint, .is-still .universe__years { display: none; }
.album__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.album__links .btn { flex: 1 1 100%; }
.album__service { font-size: .875rem; font-weight: 600; }
.album { max-width: min(760px, calc(100vw - 32px)); padding: 22px; border: 0; background: var(--ice); color: var(--deep); }
.album[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.album::backdrop { background: rgb(8 12 20 / .78); backdrop-filter: blur(6px); }
.album img { width: 100%; height: auto; }
.album h3 { font: 500 clamp(2rem, 4vw, 3rem)/1.05 var(--serif); margin: 6px 0; }
.album__kind { font-size: .8125rem; font-weight: 600; }
.album__meta { margin-bottom: 18px; }
.album__close { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; border: 0; background: none; color: inherit; font-size: 1.8rem; cursor: pointer; }

/* ---------- The Ship's Log ---------- */
.voyage { position: relative; background: #24324f; }
.voyage__stage { position: sticky; top: var(--hh, 66px); height: calc(100svh - var(--hh, 66px)); overflow: hidden; }
.voyage__sky { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.voyage__title { position: absolute; left: var(--gutter); top: clamp(10px, 2.4vh, 22px); z-index: 2; margin: 0; padding: 7px 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; background: rgb(243 249 249 / .92); color: var(--deep); font-size: .8125rem; font-weight: 600; pointer-events: none; }
.voyage__title b { font: italic 500 1.2rem/1.2 var(--serif); }
.voyage__track { position: absolute; left: 0; top: clamp(58px, 9vh, 92px); bottom: 31%; z-index: 1; display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 28px); width: max-content; padding: 0 clamp(30px, 12vw, 200px) 0 var(--gutter); will-change: transform; pointer-events: none; }
.port { flex: none; width: clamp(250px, 25vw, 360px); max-height: 100%; overflow: hidden; padding: clamp(12px, 1.5vw, 20px); background: #f6efdc; color: #2b2117; box-shadow: 0 16px 34px rgb(10 20 30 / .3); pointer-events: auto; transform: rotate(-.5deg); }
.port:nth-child(even) { transform: rotate(.6deg) translateY(14px); }
.port__year { display: block; font: italic 400 clamp(2.4rem, 4.4vw, 4.2rem)/1 var(--serif); color: #8f1d18; font-feature-settings: "lnum"; }
.port p { margin: 8px 0 0; font-size: clamp(.875rem, 1.05vw, 1rem); line-height: 1.45; }
.port__media { display: flex; gap: 10px; margin-top: 12px; }
.port__photo, .port__album { position: relative; flex: 1 1 0; min-width: 0; max-width: 130px; padding: 0; border: 0; background: #ddd2b8; color: inherit; font: 600 .6875rem var(--sans); text-decoration: none; cursor: pointer; }
.port__photo img, .port__album img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.port__photo span, .port__album span { display: block; padding: 4px 2px 2px; text-align: left; }
.voyage__years { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; gap: 2px; padding: 7px var(--gutter); overflow-x: auto; background: rgb(8 18 30 / .62); scrollbar-width: none; }
.voyage__years button { flex: none; min-height: 34px; padding: 4px 9px; border: 0; background: none; color: #f3f9f9; font: 500 .875rem var(--sans); cursor: pointer; font-feature-settings: "lnum"; }
.voyage__years button[aria-current] { background: #f3f9f9; color: #0c1320; }
.voyage.is-still { background: var(--deep); }
.is-still .voyage__stage { position: static; height: auto; overflow: visible; }
.is-still .voyage__sky, .is-still .voyage__years { display: none; }
.is-still .voyage__title { position: static; display: inline-flex; margin: 20px var(--gutter); }
.is-still .voyage__track { position: static; width: auto; flex-wrap: wrap; padding: 0 var(--gutter) 40px; transform: none !important; }

/* ---------- Tour tools ---------- */
.ticker { overflow: hidden; margin: calc(-1 * clamp(64px, 9vw, 130px)) calc(-1 * var(--gutter)) clamp(48px, 7vw, 90px); padding: 12px 0; border-bottom: 1px solid currentColor; white-space: nowrap; font: italic 500 clamp(1.2rem, 2.2vw, 2rem)/1.2 var(--serif); }
.ticker__run { display: inline-block; will-change: transform; animation: ticker 36s linear infinite paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.countdown { margin: 8px 0 30px; }
.countdown__label { margin-bottom: 8px; font-weight: 600; }
.countdown__grid { display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 3vw, 44px); }
.countdown__grid span { display: grid; font-size: .8125rem; font-weight: 600; }
.countdown__grid b { font: 500 clamp(2.8rem, 6.4vw, 6rem)/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.date__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.route { position: relative; height: 500vh; margin: clamp(20px, 3vw, 40px) calc(-1 * var(--gutter)); }
.route__stage { position: sticky; top: var(--hh, 66px); height: calc(100svh - var(--hh, 66px)); overflow: hidden; }
.route__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.route__hud { position: absolute; left: var(--gutter); top: 14px; display: flex; flex-wrap: wrap; gap: 3px 18px; padding: 7px 12px; background: rgb(243 249 249 / .92); color: var(--deep); font-size: .875rem; font-weight: 600; font-feature-settings: "lnum"; }
.route__km { font: italic 500 1.15rem/1.2 var(--serif); font-feature-settings: "lnum"; }
.route__card { position: absolute; left: var(--gutter); bottom: 34px; display: flex; gap: 14px; width: min(calc(100% - 2 * var(--gutter)), 450px); padding: 14px; background: #f6efdc; color: #2b2117; box-shadow: 0 16px 40px rgb(0 0 0 / .32); opacity: 0; transform: translateY(26px); pointer-events: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.route__card.is-on { opacity: 1; transform: none; pointer-events: auto; }
.route__card > div { min-width: 0; }
.route__card h3 { margin: 2px 0; font: 400 clamp(1.5rem, 2.5vw, 2.3rem)/1.1 var(--serif); overflow-wrap: anywhere; }
.route__card p { margin: 0; font-size: .9375rem; }
.route__kicker { font-size: .8125rem !important; font-weight: 600; font-feature-settings: "lnum"; }
.route__photo { flex: 0 0 clamp(84px, 11vw, 140px); }
.route__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.route__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.route__card .btn { min-height: 40px; padding: 6px 14px; font-size: .875rem; background: var(--deep); color: #f3f9f9; border-color: var(--deep); }
.route__card .btn--ghost { background: transparent; color: #2b2117; border-color: #2b2117; }
.route__note { position: absolute; right: var(--gutter); bottom: 8px; margin: 0; max-width: 60%; padding: 2px 8px; background: rgb(243 249 249 / .88); color: var(--deep); font-size: .6875rem; text-align: right; }
.route.is-still { height: auto; }
.is-still .route__stage { position: relative; top: 0; height: 80vh; }
.dates__h { margin: 36px 0 14px; font: 400 clamp(2rem, 4vw, 3.4rem)/1.1 var(--serif); text-transform: lowercase; }

/* ---------- Press room ---------- */
.press__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 72px); }
.press__h { font: italic 500 clamp(1.7rem, 3vw, 2.5rem)/1.1 var(--serif); margin-bottom: 16px; }
#press-bio p + p { margin-top: 12px; }
#copy-bio { margin-top: 20px; }
.press__status { min-height: 1.6em; margin-top: 8px; font-weight: 600; }
.press__facts { margin: 0; }
.press__facts div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.press__facts dt { font-weight: 600; }
.press__facts dd { margin: 0; }
.press__files li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.press__files a { font-weight: 600; }
.press__note { margin-top: 12px; font-size: .875rem; }
.press__mail { font: 500 clamp(1.5rem, 3vw, 2.4rem)/1.2 var(--serif); }

/* ---------- Opening curtain, headline words and cursor ---------- */
.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; pointer-events: auto; }
.intro__panel { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--deep); animation: curtain-up .9s 1.4s cubic-bezier(.7, 0, .2, 1) forwards; }
.intro__panel:first-child { top: 0; }
.intro__panel:nth-child(2) { bottom: 0; animation-name: curtain-down; }
.intro__mark { position: relative; width: clamp(180px, 34vw, 480px); animation: intro-name 2.2s cubic-bezier(.2, .7, .2, 1) forwards; }
.intro__mark svg { display: block; width: 100%; overflow: visible; }
.intro__mark path { fill: var(--ice); fill-opacity: 0; stroke: var(--ice); stroke-width: .28; stroke-dasharray: 1; stroke-dashoffset: 1; animation: emblem-draw .95s .1s ease-in-out forwards, emblem-fill .4s .8s ease forwards; }
@keyframes emblem-draw { to { stroke-dashoffset: 0; } }
@keyframes emblem-fill { to { fill-opacity: 1; } }
@keyframes curtain-up { to { transform: translateY(-100%); } }
@keyframes curtain-down { to { transform: translateY(100%); } }
@keyframes intro-name { 0% { opacity: 0; transform: scale(.94); } 12%, 66% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.5); } }
.heading .w, .universe__title .w, .legends__h .w { display: inline-block; overflow: hidden; padding: .04em .04em .24em 0; margin-bottom: -.24em; vertical-align: bottom; }
.heading .w > span { display: inline-block; transition: transform .95s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.heading.reveal { opacity: 1; transform: none; }
.heading.reveal:not(.is-in) .w > span { transform: translateY(112%); }

/* ---------- The record in the player ---------- */
.controls__title { flex: 1 1 100%; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); min-width: 0; }
.disc { flex: none; display: grid; place-items: center; width: clamp(56px, 6.4vw, 92px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 31%, #0b0c0e 32% 34%, #1a1b1f 35% 39%, #0b0c0e 40% 46%, #1a1b1f 47% 54%, #0b0c0e 55% 63%, #1a1b1f 64% 72%, #0b0c0e 73%); box-shadow: 0 8px 24px rgb(0 0 0 / .35); animation: spin 3.6s linear infinite paused; }
.disc svg { width: 44%; display: block; }
.disc path { fill: var(--on-accent); }
.music[data-state="playing"] .disc { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- The emblem as the star at the end of the flight, and as the sign-off ---------- */
.universe__star { position: absolute; left: 50%; top: 50%; width: min(58vw, 720px); opacity: .05; transform: translate(-50%, -50%) scale(.55); pointer-events: none; }
.universe__star svg, .foot__mark svg { display: block; width: 100%; height: auto; }
.universe__star path { fill: #f3f9f9; }
.is-still .universe__star { display: none; }
.foot__mark { display: block; width: clamp(52px, 5vw, 76px); transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .7s ease; }
.foot__mark:hover { transform: rotate(-6deg) scale(1.04); }
.foot__mark path { fill: var(--world-mark-on-deep, #eebf62); }

/* ---------- Songs inside the flight ---------- */
.album { max-height: min(88svh, 900px); overflow: auto; }
.album__tracks { margin-top: 14px; }
.album__list { max-height: 34svh; overflow: auto; border-top: 1px solid var(--line); }
.album__list li { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.album__list li[aria-current] { font-weight: 800; }
.album__list span { flex: 1; min-width: 0; }
.album__list a { font-size: .75rem; font-weight: 600; }
.album__play { flex: none; width: 36px; height: 36px; border: 1.5px solid var(--deep); background: none; color: var(--deep); font-size: .75rem; cursor: pointer; }
.album__play:disabled { border-color: transparent; color: rgb(27 72 82 / .35); cursor: default; }
.album__note { margin: 8px 0; font-size: .875rem; }

/* ---------- Archive pages: cinema, photos, hall of fame ---------- */
body.night { background: #0c1320; color: #f3f9f9; }
.top { color: var(--deep); }
.night .eyebrow, .night .heading { color: #f3f9f9; }
.cinema { max-width: 1320px; margin-inline: auto; }
.screen { position: relative; aspect-ratio: 16 / 9; max-height: 74svh; width: 100%; margin-inline: auto; overflow: hidden; background: #000; box-shadow: 0 30px 90px rgb(0 0 0 / .6); }
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.screen__poster { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.screen__poster img { width: 100%; height: 100%; object-fit: cover; }
.screen__play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: #f3f9f9; }
.screen__play::after { content: ""; position: absolute; left: 36px; top: 26px; border-style: solid; border-width: 20px 0 20px 30px; border-color: transparent transparent transparent #0c1320; }
.screen__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; margin: 18px 0 clamp(28px, 4vw, 52px); }
.screen__info { min-width: 0; flex: 1 1 340px; }
.screen__info h2 { font: italic 400 clamp(1.8rem, 4vw, 3.4rem)/1.08 var(--serif); }
.screen__info p { margin-top: 6px; font-size: .9375rem; }
.screen__controls { display: flex; align-items: center; gap: 10px; }
.screen__controls a { font-weight: 600; font-size: .9375rem; margin-left: 8px; }
.filters--archive label { max-width: 420px; }
.filters--archive input { border: 1.5px solid currentColor; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 22px; }
.chips button { min-height: 36px; padding: 4px 12px; border: 1.5px solid currentColor; background: none; color: inherit; font: 600 .8125rem var(--sans); cursor: pointer; font-feature-settings: "lnum"; }
.chips button[aria-pressed="true"] { background: var(--world-mark); border-color: var(--world-mark); color: #fff; }
.night .chips button[aria-pressed="true"] { background: #f3f9f9; border-color: #f3f9f9; color: #0c1320; }
.films { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px 16px; }
.film { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.film img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #24324f; transition: transform .4s ease; }
.film:hover img { transform: scale(1.03); }
.film[aria-current] img { outline: 3px solid #eebf62; outline-offset: 2px; }
.film__text { display: block; margin-top: 8px; font-size: .8125rem; }
.film__text b { display: block; font: 500 1.15rem/1.2 var(--serif); }
.night .empty p { color: #f3f9f9; }
.tally { display: flex; flex-wrap: wrap; gap: 14px clamp(26px, 5vw, 70px); margin: 0 0 26px; }
.tally dd { margin: 0; font: italic 400 clamp(3rem, 7vw, 6.4rem)/1 var(--serif); color: var(--world-mark); font-feature-settings: "lnum"; }
.tally dt { font-weight: 600; font-size: .875rem; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 230px), 1fr)); gap: 18px 14px; }
.shot { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #dfe6e6; transition: transform .4s ease; }
.shot:hover img { transform: scale(1.03); }
.shot__text { display: block; margin-top: 8px; font-size: .8125rem; font-feature-settings: "lnum"; }
.shot__text b { display: block; font: 500 1.1rem/1.2 var(--serif); }
.viewer { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(6 10 16 / .96); color: #f3f9f9; }
.viewer[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.viewer figure { margin: 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 12px; }
.viewer__photo { display: block; min-height: 0; max-width: 100%; max-height: calc(100% - 90px); margin-inline: auto; object-fit: contain; }
.viewer__problem { text-align: center; }
.viewer figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; padding-top: 10px; font-size: .875rem; text-align: center; font-feature-settings: "lnum"; }
.viewer__title { font: italic 500 1.25rem/1.2 var(--serif); }
.viewer__credit { flex-basis: 100%; white-space: pre-line; opacity: .85; font-size: .8125rem; }
.viewer__prev, .viewer__next, .viewer__close { width: 56px; height: 56px; border: 0; background: none; color: inherit; font-size: 1.5rem; cursor: pointer; }
.viewer__close { position: absolute; right: 8px; top: 8px; z-index: 2; font-size: 2rem; }
.fame__h { margin: clamp(38px, 5vw, 70px) 0 16px; font: 400 clamp(2rem, 4.4vw, 3.8rem)/1.08 var(--serif); text-transform: lowercase; }
.honour { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); }
.honour__year { font: italic 400 1.75rem/1 var(--serif); color: var(--world-mark); font-feature-settings: "lnum"; }
.honour p { margin: 0; }
.honours--two { columns: 2; column-gap: 40px; }
.honours--two .honour { break-inside: avoid; }
.legends__more { margin-top: 26px; }
/* News: the ship's log on paper, on a night sea */
.news { max-width: 1440px; margin-inline: auto; }
.night .tally dd { color: #eebf62; }
.news .sample { margin-bottom: 22px; }
.news__status { margin: 0 0 16px; font-size: .875rem; font-weight: 600; font-feature-settings: "lnum"; }
.stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: clamp(18px, 2.2vw, 30px); align-items: start; }
.dispatch { display: flex; flex-direction: column; min-width: 0; padding: 14px 14px 16px; background: #f6efdc; color: #2b2117; text-decoration: none; box-shadow: 0 14px 30px rgb(0 0 0 / .4); opacity: 0; transform: translateY(34px) rotate(var(--r)); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.dispatch.is-in { opacity: 1; transform: rotate(var(--r)); }
.dispatch.is-in:hover, .dispatch.is-in:focus-visible { transform: translateY(-7px) rotate(0); box-shadow: 0 24px 44px rgb(0 0 0 / .5); }
.dispatch__pic { width: 100%; height: auto; aspect-ratio: 32 / 21; margin-bottom: 12px; object-fit: cover; background: #ddd2b8; }
.dispatch__date { font-size: .8125rem; font-weight: 600; color: #8f1d18; font-feature-settings: "lnum"; }
.dispatch__title { margin: 6px 0 12px; font: 500 clamp(1.15rem, 1.5vw, 1.35rem)/1.22 var(--serif); overflow-wrap: anywhere; font-feature-settings: "lnum"; }
.dispatch__go { margin-top: auto; font-size: .75rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.stories--lead .dispatch:first-child { grid-column: span 2; }
.stories--lead .dispatch:first-child .dispatch__title { font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.news .filters { display: block; margin-bottom: 14px; }
.news .filters label { display: block; max-width: none; margin-bottom: 6px; font-weight: 600; }
.news .filters input { display: block; width: 100%; max-width: 420px; min-height: 46px; padding: 8px 12px; border: 1.5px solid #f3f9f9; background: #f3f9f9; color: #0c1320; font: 500 1rem var(--sans); }
.news__more { margin-top: 32px; text-align: center; }
.night .news__more .btn { background: #f3f9f9; color: #0c1320; }
@media (max-width: 640px) {
  .stories--lead .dispatch:first-child { grid-column: auto; }
  .news .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .news .chips button { flex: none; }
}
.band-photo figcaption a { font-weight: 800; }
.nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav a { flex: none; }
.nav a[aria-current] { border-color: var(--world-mark); }

/* ---------- Story ---------- */
.story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.lineup__h { margin-top: 28px; font: italic 500 1.6rem/1.2 var(--serif); }
.lineup li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.milestone { display: grid; grid-template-columns: clamp(92px, 12vw, 170px) minmax(0, 1fr); gap: 12px 20px; align-items: baseline; padding: clamp(20px, 3.4vw, 44px) 0; border-top: 1px solid var(--line); }
.milestone__year { font: italic 500 clamp(2.6rem, 5.4vw, 5rem)/1 var(--serif); color: #eebf62; }
.milestone p { font-size: clamp(1.0625rem, 1.5vw, 1.3rem); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px 28px; margin: clamp(36px, 5vw, 64px) 0 0; padding-top: 22px; border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.fact dt { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.fact dd { margin: 4px 0 0; font: 500 1.35rem/1.25 var(--serif); }
.legends__h { font: 400 clamp(2rem, 4.4vw, 3.8rem)/1.12 var(--serif); }
.legends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.legend { padding: 22px; background: #fff; box-shadow: 0 10px 28px rgb(18 52 63 / .1); }
.legend h4 { margin: 0 0 8px; font: italic 500 1.7rem/1.1 var(--serif); color: var(--world-mark); }
.streams a { font-weight: 600; }
.controls__info { flex: 1 1 100%; margin-top: -6px; font-size: .9375rem; }
.stage__live { position: absolute; inset: 0; }
.stage__live img, .stage__live canvas { width: 100%; height: 100%; object-fit: contain; }
.stage__video { z-index: 1; }

/* ---------- Tour ---------- */
.tour { background: var(--world-bg); color: var(--world-ink); transition: background-color .7s ease, color .7s ease; }
.dates { border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.date { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 18px 0; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.date time b { font: 500 2.2rem/1 var(--serif); }
.date__city { font: 500 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--serif); }
.tour__more { margin-top: 30px; }
.tour .btn { background: var(--world-accent); color: var(--world-on-accent); border-color: var(--world-accent); }
.tour .btn--ghost { background: transparent; color: inherit; border-color: currentColor; }

/* ---------- Merch ---------- */
.merch { background: #e9d9a8; }
.banners { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
/* The name sits behind the picture: it's what screen readers read, and what shows if the shop's image can't load. */
.banner { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--deep); color: var(--ice); font: 400 clamp(1.4rem, 3vw, 2.6rem)/1 var(--serif); text-decoration: none; box-shadow: 0 12px 28px rgb(58 42 10 / .22); }
.banner--narrow { grid-column: span 2; aspect-ratio: 11 / 6; }
.banner--wide { grid-column: span 3; aspect-ratio: 512 / 185; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.banner.reveal { transform: translateX(var(--from, -46px)) rotate(var(--turn, -1.6deg)); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.banner.reveal:nth-child(even) { --from: 46px; --turn: 1.6deg; transition-delay: .12s; }
.banner.reveal.is-in { transform: none; }
.banner.reveal.is-in:hover, .banner.reveal.is-in:focus-visible { transform: translateY(-7px) rotate(-.5deg); box-shadow: 0 22px 40px rgb(58 42 10 / .34); transition-delay: 0s; }
.banner:hover img, .banner:focus-visible img, .banner:hover .paint, .banner:focus-visible .paint { transform: scale(1.045); }
/* English version: the Russian words on the banners are covered with their own background and repainted. */
.banner { container-type: inline-size; }
.paint { display: none; position: absolute; inset: 0; font-family: Archivo, var(--sans); font-weight: 800; font-stretch: 125%; line-height: 1; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
html[lang="en"] .banner:has(img) .paint { display: block; }
.paint::before { content: ""; position: absolute; inset: 0; background: var(--patch); clip-path: var(--shape); }
.paint i { position: absolute; font-style: normal; white-space: nowrap; }
.paint--accessories { --patch: #4598c0; --shape: polygon(43.7% 0, 86% 0, 86% 41%, 70% 41%, 70% 61%, 43.7% 61%); font-size: 8.9cqw; color: transparent; -webkit-text-stroke: .22cqw #fff; }
.paint--accessories i { left: 44.6%; }
.paint--accessories i:nth-of-type(1) { top: 1%; }
.paint--accessories i:nth-of-type(2) { top: 22%; }
.paint--accessories i:nth-of-type(3) { top: 43%; }
.paint--music { --patch: linear-gradient(#bf0828 5%, #cc1835 20%, #d11f3d 35%, #d0233f 50%, #ce2541 65%, #ce2a48 80%, #d2304e 95%); --shape: polygon(45.5% 15%, 63.5% 15%, 63.5% 77.6%, 45.5% 77.6%); font-size: 7cqw; color: #ffdc04; }
.paint--music i { left: 46.4%; }
.paint--music i:nth-of-type(1) { top: 24%; letter-spacing: .24em; }
.paint--music i:nth-of-type(2) { top: 50%; }
.paint--apparel { --patch: #91c01e; --shape: polygon(38.5% 47%, 63% 47%, 63% 68%, 64.6% 68%, 64.6% 89%, 38.5% 89%); font-size: 6.5cqw; color: #fff; }
.paint--apparel i { left: 39.4%; }
.paint--apparel i:nth-of-type(1) { top: 48.5%; }
.paint--apparel i:nth-of-type(2) { top: 71%; }
.paint--books { --patch: #254c9c; --shape: polygon(5% 29%, 38% 29%, 38% 47%, 25.5% 47%, 25.5% 69%, 5% 69%); font-size: 9.6cqw; color: transparent; -webkit-text-stroke: .22cqw #f1d31a; }
.paint--books i { left: 6%; }
.paint--books i:nth-of-type(1) { top: 31%; }
.paint--books i:nth-of-type(2) { top: 53%; }
.arrow { font: 600 1em var(--sans); }
.merch__more { margin-top: 28px; }

/* ---------- Fans ---------- */
.fans { background: var(--world-accent); color: var(--world-on-accent); transition: background-color .7s ease, color .7s ease; }
.form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 620px; margin-top: 8px; }
.form label { flex: 1 1 100%; font-weight: 600; }
.form input { flex: 1 1 260px; min-height: 48px; padding: 8px 14px; border: 1.5px solid #fff; border-radius: 0; background: #fff; color: var(--deep); font: 1rem var(--sans); }
.form .btn { background: var(--deep); border-color: var(--deep); }
.form__message { flex: 1 1 100%; min-height: 1.6em; font-weight: 600; }
.form__message.is-error { background: #fff; color: #8f1d18; padding: 6px 10px; }
.form__message:empty { padding: 0; background: none; }

.foot { padding: clamp(36px, 5vw, 64px) var(--gutter) 22px; background: var(--deep); color: var(--ice); font-size: .9375rem; }
.foot__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px clamp(24px, 4vw, 64px); align-items: start; }
.foot__h { margin: 0 0 12px; font: italic 400 1.25rem/1.2 var(--serif); }
.foot__col p { margin: 0 0 8px; }
.foot__brand p { margin-top: 12px; max-width: 24ch; }
.foot__contact { font-weight: 600; overflow-wrap: anywhere; }
.foot__list li { padding: 3px 0; }
.foot a:hover { color: #eebf62; }
.foot__follow { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.foot__social { display: grid; grid-template-columns: repeat(3, 44px); gap: 8px; }
.social { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(243 249 249 / .35); border-radius: 50%; transition: border-color .2s ease, transform .2s ease, color .2s ease; }
.social:hover { border-color: #eebf62; transform: translateY(-2px); }
.social i, .foot__vrox i { display: block; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.social i { width: 19px; height: 19px; }
.social--telegram { --icon: url(assets/icons/telegram.svg); }
.social--vk { --icon: url(assets/icons/vk.svg); }
.social--x { --icon: url(assets/icons/x.svg); }
.social--youtube { --icon: url(assets/icons/youtube.svg); }
.social--instagram { --icon: url(assets/icons/instagram.svg); }
.social--facebook { --icon: url(assets/icons/facebook.svg); }
.foot__vrox { flex: none; display: block; --icon: url(assets/icons/v-rox.svg); transition: transform .2s ease, color .2s ease; }
.foot__vrox:hover { transform: translateY(-2px); }
.foot__vrox i { width: 72px; height: 96px; }
/* The footer is the harbour: a moving sea, the boat sailing past, and paper tags for listening */
.foot { position: relative; background-image: radial-gradient(1px 1px at 12% 18%, rgb(255 255 255 / .7), transparent), radial-gradient(1.5px 1.5px at 34% 8%, rgb(255 255 255 / .55), transparent), radial-gradient(1px 1px at 58% 26%, rgb(255 255 255 / .6), transparent), radial-gradient(1.5px 1.5px at 78% 12%, rgb(255 255 255 / .5), transparent), radial-gradient(1px 1px at 92% 30%, rgb(255 255 255 / .6), transparent); }
.foot__sea { position: absolute; left: 0; right: 0; top: -58px; height: 60px; overflow: hidden; pointer-events: none; }
.foot__wave { position: absolute; left: 0; bottom: 0; width: calc(100% + 360px); height: 60px; background-repeat: repeat-x; background-size: 360px 60px; }
.foot__wave--back { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='60' preserveAspectRatio='none'%3E%3Cpath fill='%232d6f7a' d='M0 30C60 6 120 6 180 30S300 54 360 30V60H0Z'/%3E%3C/svg%3E"); bottom: 5px; will-change: transform; animation: foot-wave 14s linear infinite reverse paused; }
.foot__wave--front { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='60' preserveAspectRatio='none'%3E%3Cpath fill='%231b4852' d='M0 30C60 6 120 6 180 30S300 54 360 30V60H0Z'/%3E%3C/svg%3E"); bottom: -8px; will-change: transform; animation: foot-wave 9s linear infinite paused; }
@keyframes foot-wave { to { transform: translateX(-360px); } }
.foot__boat { position: absolute; left: -70px; bottom: 8px; width: 52px; will-change: transform; animation: foot-sail 46s linear infinite paused; }
.foot__boat svg { display: block; width: 100%; will-change: transform; animation: foot-bob 3.2s ease-in-out infinite alternate paused; }
@keyframes foot-sail { to { transform: translateX(calc(100vw + 100px)); } }
@keyframes foot-bob { from { transform: translateY(2px) rotate(-3deg); } to { transform: translateY(-3px) rotate(3deg); } }
.foot.is-on .foot__wave, .foot.is-on .foot__boat, .foot.is-on .foot__boat svg, .ticker.is-on .ticker__run { animation-play-state: running; }
.foot__listen { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px clamp(24px, 4vw, 64px); margin-top: clamp(30px, 4vw, 52px); padding-top: clamp(22px, 3vw, 34px); border-top: 1px solid rgb(243 249 249 / .22); }
.foot__listen-h { margin: 0; font: 400 clamp(2.4rem, 4.6vw, 4.4rem)/1.05 var(--serif); letter-spacing: -.01em; }
.foot__listen-h i { color: #eebf62; }
.tags { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tag { --brand: #2b2117; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; background: #f6efdc; color: #2b2117 !important; text-decoration: none; box-shadow: 0 10px 22px rgb(0 0 0 / .26); transform: rotate(-1.2deg); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.tag:nth-child(even) { transform: rotate(1.1deg) translateY(4px); }
.tag:hover { transform: translateY(-5px) rotate(0); box-shadow: 0 16px 30px rgb(0 0 0 / .34); }
.tag i { flex: none; display: block; width: 30px; height: 30px; background: var(--brand); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.tag span { display: grid; min-width: 0; }
.tag small { font-size: .6875rem; font-weight: 600; opacity: .72; }
.tag b { font: 500 1.05rem/1.15 var(--serif); }
.tag--youtube-music { --brand: #f00; --icon: url(assets/icons/youtubemusic.svg); }
.tag--apple-music { --brand: #fa243c; --icon: url(assets/icons/applemusic.svg); }
.tag--spotify { --brand: #1aa34a; --icon: url(assets/icons/spotify.svg); }
.tag--vk-music { --brand: #07f; --icon: url(assets/icons/vk.svg); }
.tag--yandex-music i { background: url(assets/icons/yandex-music.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
.tags--small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.tags--small .tag { padding: 7px 9px; gap: 8px; box-shadow: 0 6px 14px rgb(0 0 0 / .2); }
.tags--small .tag i { width: 22px; height: 22px; }
.tags--small .tag small { font-size: .625rem; }
.tags--small .tag b { font-size: .9375rem; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 28px; margin-top: clamp(26px, 4vw, 44px); padding-top: 16px; border-top: 1px solid rgb(243 249 249 / .22); font-size: .8125rem; }

/* ---------- Tour page ---------- */
.page-head { padding-bottom: 28px; }
.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; margin-bottom: 18px; }
.filters label { display: grid; gap: 4px; flex: 1 1 240px; max-width: 360px; font-weight: 600; font-size: .9375rem; }
.filters select, .filters input { min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--ice); border-radius: 0; background: var(--ice); color: var(--deep); font: 1rem var(--sans); }
.empty { padding: 44px 0; }
.empty p { font: italic 500 2rem/1.2 var(--serif); margin-bottom: 16px; }

@media (max-width: 900px) {
  .music__grid, .story, .press__grid { grid-template-columns: minmax(0, 1fr); }
  .tags:not(.tags--small) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .album[open] { grid-template-columns: minmax(0, 1fr); }
  .album img { max-width: 240px; }
  .universe { height: 1050vh; }
  .banners { grid-template-columns: minmax(0, 1fr); }
  .banner--narrow, .banner--wide { grid-column: auto; }
  .banner.reveal { --from: 0px; --turn: 0deg; }
  .banner.reveal:nth-child(even) { --from: 0px; --turn: 0deg; }
  .legends { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .date { grid-template-columns: minmax(0, 1fr) auto; }
  .date time { grid-column: 1 / -1; }
  .date__country { grid-column: 1; grid-row: 3; }
  .date .btn { grid-column: 2; grid-row: 2 / 4; }
}
@media (max-width: 640px) {
  .nav { order: 3; width: 100%; margin: 0; gap: 2px 16px; font-size: .875rem; }
  .langs { margin-left: auto; }
  .scene--cover { grid-template-columns: auto auto; grid-template-rows: auto minmax(0, 1fr) auto; justify-content: center; column-gap: 10px; }
  .cover-title__l, .cover-title__r { font-size: 13vw; }
  .cover-title__l { grid-column: 1; }
  .cover-title__r { grid-column: 2; }
  .cover-art { grid-column: 1 / -1; grid-row: 2; align-self: center; justify-self: center; width: min(100%, calc(100svh - var(--hh, 66px) - var(--strip, 30px) - 170px)); height: auto; }
  .cue { grid-row: 3; }
  .date { grid-template-columns: minmax(0, 1fr); }
  .date__country, .date .btn { grid-column: 1; grid-row: auto; }
  .date .btn { justify-self: start; }
  .controls a { margin-left: 0; flex: 1 1 100%; }
  .legends { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .tags:not(.tags--small) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__listen { grid-template-columns: minmax(0, 1fr); }
  .foot__follow { justify-content: flex-start; gap: 34px; }
  .route { height: 460vh; }
  .route__card { bottom: 56px; padding: 11px; }
  .route__photo { flex-basis: 76px; }
  .route__note { max-width: none; left: var(--gutter); text-align: left; bottom: 3px; }
  .port { width: 76vw; }
  .voyage__track { top: 104px; bottom: 26%; }
  .honours--two { columns: 1; }
  .honour { grid-template-columns: 66px minmax(0, 1fr); }
  .viewer[open] { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .viewer__prev, .viewer__next { width: 44px; }
  .universe__hint { display: none; }
  .universe__now { bottom: 66px; font-size: 1.7rem; }
}
@media (max-width: 640px) {
  .route__stop text { font-size: 46px; }
  .route__stop .route__date { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}