/* LNKS Luanda Music Group: the homepage hero.
   A red stage with the black silhouette of one artist, and a strip of every artist across the middle.
   Hovering (or focusing, or tapping) an artist in the strip brings their silhouette in behind everything: the tile opens
   down into their photo in full colour and the line above the strip names them. The light follows the mouse and the
   scene tilts gently with it. While nobody is touching it, the hero moves on to the next artist by itself.
   Every moving layer uses transform or opacity only, so the page stays smooth. */
.mx {
  --mx-h: clamp(100px, 13.5vh, 132px);              /* height of a resting tile; the chosen tile is twice as tall */
  --mx-x: clamp(16px, 2vw, 32px);                   /* left edge shared by the title, the strip and Music Group */
  --mx-w: calc((100vw - var(--mx-x)) / 6.5);        /* six and a half tiles show; the arrows and the auto play slide to the rest */
  --mx-gap: 4px;
  --mx-line: calc(50% - var(--mx-h) * .5);          /* top of the strip */
  --mx-ink: #FFFFFF;
  position: relative; isolation: isolate; overflow: hidden;
  height: max(600px, calc(100svh - var(--header-h, 68px))); max-height: 940px;
  background: #7A0309; color: var(--mx-ink);
}
/* the foot of the hero darkens into the RISE strip below, so the two sections meet without a seam */
.mx::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 3; pointer-events: none;   /* above the grain, so it ends in solid black */
  background: linear-gradient(180deg, rgba(5, 5, 5, 0) 0%, rgba(5, 5, 5, .55) 55%, #050505 100%);
}
.mx + .rcd { border-top: 0;
  background:
    linear-gradient(180deg, #050505 0%, rgba(5, 5, 5, 0) 45%),
    radial-gradient(120% 140% at 0% 0%, rgba(222, 4, 18, .38), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(196, 4, 16, .30), transparent 60%),
    linear-gradient(135deg, #030303 0%, var(--brand-graphite-deep, #050505) 55%, #020202 100%); }
/* film grain over the photos, like a printed poster */
.mx::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the red stage, and a soft light that follows the mouse */
.mx__field { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(70% 95% at 60% 28%, #DA1622 0%, #B20A17 45%, #6E030C 100%); }
.mx__glow { position: absolute; left: 60%; top: 30%; width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 112, 112, .30), rgba(255, 70, 70, .08) 55%, rgba(255, 60, 60, 0) 100%);
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0); will-change: transform; }

.mx.is-away .mx__glow { display: none; }   /* off screen the light is not drawn at all */
/* the silhouettes: solid black, partly see through, so each artist reads as a shape on the red */
.mx__stage { position: absolute; inset: -24px -40px; z-index: 0; --mx-sil: .62;
  transform: translate3d(calc(var(--px, 0) * -22px), calc(var(--py, 0) * -12px), 0); will-change: transform; }
.mx__bg { position: absolute; inset: 0; opacity: 0; transform: translate3d(5%, 0, 0) scale(1.03);
  transition: opacity .9s ease, transform 1.4s cubic-bezier(.16, .84, .24, 1); }
.mx__bg.is-past { transform: translate3d(-5%, 0, 0) scale(1.03); }
.mx__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 55% 30%; }
.mx__bg.is-on { opacity: var(--mx-sil); transform: none; }

/* LNKS / Luanda, sitting on top of the strip */
.mx__title, .mx__sub { position: absolute; z-index: 3; left: var(--mx-x); margin: 0; font-family: var(--font-sans); letter-spacing: -.045em; color: var(--mx-ink); }
.mx__title { bottom: calc(100% - var(--mx-line) + 10px); display: grid; font-size: clamp(56px, 7.4vw, 116px); font-weight: 600; line-height: .86; }
/* Music Group, underneath the strip (below the tall tile, so they never overlap) */
.mx { --mx-subfs: clamp(34px, 4.4vw, 70px); --mx-subtop: calc(var(--mx-line) + var(--mx-h) + 18px); --mx-open: 1; }
/* Music Group and the line under it follow the strip: they drop down with the opened photo and rise back up
   when no opened photo is in view (it was slid away), on the same curve as the tile opening */
.mx.is-shut { --mx-open: 0; }
.mx__sub, .mx__line { translate: 0 calc(var(--mx-h) * var(--mx-open)); transition: translate .6s cubic-bezier(.2, .8, .2, 1); }
.mx__sub { top: var(--mx-subtop); font-size: var(--mx-subfs); font-weight: 400; line-height: 1; opacity: .92; }
/* the promise, typed under Music Group: the changing words are what the group works on */
.mx__line {
  position: absolute; z-index: 3; left: var(--mx-x); right: var(--mx-x); top: calc(var(--mx-subtop) + var(--mx-subfs) + 14px); margin: 0;
  font-size: clamp(15px, 1.25vw, 19px); font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, .86);
}
.mx__line .mx__word { display: inline-block; color: #FFFFFF; font-weight: 700; transition: opacity .35s ease, transform .35s ease; }
.mx__line .mx__word.is-out { opacity: 0; transform: translateY(6px); }

/* the line above the strip: who is showing */
.mx__meta {
  position: absolute; z-index: 3; left: max(30%, 380px); right: clamp(16px, 2vw, 32px); bottom: calc(100% - var(--mx-line) + 12px);
  display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 16px; align-items: end;
  font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase;
}
.mx__meta p { margin: 0; transition: opacity .3s ease, transform .3s ease; }
.mx__meta .mx__k { opacity: .7; }
.mx__meta b { font-weight: 800; }
.mx__meta.is-swap p { opacity: 0; transform: translateY(6px); }
.mx__go { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; white-space: nowrap; }
.mx__go svg { width: 14px; height: 14px; transition: transform .25s ease; }
.mx__go:hover svg, .mx__go:focus-visible svg { transform: translate(2px, -2px); }
.mx__go:hover { text-decoration: underline; text-underline-offset: 4px; }

/* the strip of artists */
.mx__strip {
  position: absolute; z-index: 3; top: var(--mx-line); left: var(--mx-x); right: 0; height: calc(var(--mx-h) * 2);
  display: flex; align-items: flex-start; gap: var(--mx-gap); margin: 0; padding: 0 var(--mx-x) 0 0; list-style: none;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
}
.mx__strip::-webkit-scrollbar { display: none; }
.mx__item { scroll-snap-align: start; }
/* the strip fades out at an edge where there are more artists to slide to */
.mx.can-r .mx__strip { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent); }
.mx.can-l .mx__strip { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px); mask-image: linear-gradient(90deg, transparent, #000 64px); }
.mx.can-l.can-r .mx__strip { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 96px), transparent); mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 96px), transparent); }
/* the arrows that slide the strip, shown only when there is somewhere to go */
.mx__arrow {
  position: absolute; z-index: 4; top: calc(var(--mx-line) + var(--mx-h) * .5 - 24px); width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(5, 5, 5, .72); color: #FFFFFF; cursor: pointer;
  opacity: 0; pointer-events: none; transform: scale(.85); transition: opacity .3s ease, transform .3s ease, background-color .2s ease;
}
.mx__arrow svg { width: 22px; height: 22px; }
.mx__arrow--prev { left: calc(var(--mx-x) + 10px); }
.mx__arrow--next { right: clamp(16px, 2vw, 32px); }
.mx.can-l .mx__arrow--prev, .mx.can-r .mx__arrow--next { opacity: 1; pointer-events: auto; transform: none; }
.mx__arrow:hover { background: #DE0412; border-color: #DE0412; }
.mx__arrow:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.mx__item { flex: none; width: var(--mx-w); height: var(--mx-h); overflow: visible; }
.mx__tile {
  position: relative; display: block; width: 100%; height: calc(var(--mx-h) * 2); border-radius: 3px; overflow: hidden;
  clip-path: inset(0 0 50% 0 round 3px); transition: clip-path .6s cubic-bezier(.2, .8, .2, 1);
  background: #2A0104; outline: none;
}
.mx__tile img { position: absolute; left: 0; width: 100%; object-fit: cover; display: block; }
.mx__col { top: 0; height: 50%; transition: opacity .45s ease, filter .45s ease; }
.mx__big { top: 0; height: 100%; opacity: 0; transform: scale(1.14); transform-origin: 50% 30%;
  transition: opacity .5s ease, transform 1.1s cubic-bezier(.16, .84, .24, 1); }
.mx__tile.is-on { clip-path: inset(0 0 0 0 round 3px); }
.mx__tile.is-on .mx__big { opacity: 1; transform: none; }
.mx__tile.is-on .mx__col { opacity: 0; }
/* while the mouse is over the strip, the other tiles step back a little */
.mx__strip:has(.mx__tile:hover) .mx__tile:not(.is-on) .mx__col { filter: brightness(.72) saturate(.85); }
.mx__strip:hover .mx__tile:not(.is-on):hover .mx__col { filter: none; }
.mx__tile:focus-visible { box-shadow: inset 0 0 0 2px var(--mx-ink); }
/* RISE, Legend and No. 1 labels in the corner of a tile */
.mx__tags { position: absolute; z-index: 2; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.mx__tags:empty { display: none; }
.mx__tags .legend-badge { margin: 0; font-size: 10px; line-height: 1.2; padding: 4px 7px 3px; letter-spacing: .06em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 699.98px) { .mx__tags { top: 5px; left: 5px; right: 5px; } .mx__tags .legend-badge { font-size: 8px; padding: 3px 5px 2px; letter-spacing: .04em; } }

/* 01 ---- 07 */
.mx__count { position: absolute; z-index: 3; right: clamp(16px, 2vw, 32px); bottom: 18px; margin: 0; display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.mx__bar { position: relative; width: clamp(120px, 16vw, 240px); height: 1px; background: rgba(255, 255, 255, .35); }
.mx__bar i { position: absolute; top: -1px; left: 0; height: 3px; width: calc(100% / var(--mx-total, 8)); background: var(--mx-ink); transform: translateX(calc(var(--n, 0) * 100%)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }

/* the hero arrives: photo settles, title rises, the tiles come in one by one */
@media (prefers-reduced-motion: no-preference) {
  .mx__title span, .mx__sub { animation: mx-up .9s cubic-bezier(.2, .8, .2, 1) both; }
  .mx__title span:nth-child(2) { animation-delay: .08s; }
  .mx__sub { animation-delay: .3s; }
  .mx__line { animation: mx-up .9s cubic-bezier(.2, .8, .2, 1) .4s both; }
  .mx__meta { animation: mx-fade .8s ease .45s both; }
  .mx__item { animation: mx-up .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.15s + var(--i, 0) * 60ms); }
  .mx__bg.is-on img { animation: mx-breathe 9s ease-in-out infinite alternate; }
  .mx.is-away .mx__bg.is-on img { animation-play-state: paused; }   /* the chosen artist breathes slowly */
  .mx__field { animation: mx-fade 1.2s ease both; }
}
@keyframes mx-breathe { from { transform: scale(1); } to { transform: scale(1.035) translateY(-.6%); } }
@keyframes mx-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes mx-fade { from { opacity: 0; } to { opacity: 1; } }

/* tablets */
@media (max-width: 1099.98px) {
  .mx { --mx-w: calc((100vw - var(--mx-x)) / 4.6); }
  .mx__meta { left: max(42%, 330px); grid-template-columns: 1.4fr 1fr auto; }
  .mx__meta [data-mx-place] { display: none; }
}

/* phones: the strip scrolls sideways, Music Group and the artist line sit under it */
@media (max-width: 699.98px) {
  .mx { --mx-w: 31vw; --mx-h: 21vw; --mx-line: 44%; height: max(620px, calc(100svh - var(--header-h, 68px))); }
  .mx__bg img { object-position: 50% 0; }
  .mx__title { font-size: clamp(54px, 17vw, 76px); bottom: calc(100% - var(--mx-line) + 12px); }
  .mx__strip { left: 0; right: 0; padding: 0 16px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
  .mx__arrow { width: 40px; height: 40px; top: calc(var(--mx-line) + var(--mx-h) * .5 - 20px); }
  .mx__arrow svg { width: 18px; height: 18px; }
  .mx__arrow--prev { left: 8px; }
  .mx__arrow--next { right: 8px; }
  .mx { --mx-subfs: 32px; --mx-subtop: calc(var(--mx-line) + var(--mx-h) + 16px); }
  .mx__line { top: calc(var(--mx-subtop) + 32px + 8px); font-size: 14px; }
  .mx__meta {
    left: 16px; right: 16px; bottom: auto; top: calc(var(--mx-line) + var(--mx-h) + 96px); translate: 0 calc(var(--mx-h) * var(--mx-open)); transition: translate .6s cubic-bezier(.2, .8, .2, 1);
    grid-template-columns: 1fr auto; row-gap: 4px; font-size: 11px;
  }
  .mx__meta .mx__by { grid-column: 1 / -1; }
  .mx__meta [data-mx-place] { display: none; }
  .mx__count { left: 16px; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mx__bg, .mx__bg img, .mx__tile, .mx__col, .mx__big, .mx__meta p, .mx__bar i, .mx__arrow, .mx__sub, .mx__line, .mx__meta { transition: none; }
  .mx__bg, .mx__bg.is-past, .mx__bg img, .mx__big { transform: none; }
  .mx__stage { transform: none; }
}

/* Work in music: the record panel lives in lnks-groove.css (shared with the RISE page). */

/* ======================================================================
   Who we are: three chapters on a dark stage. On computers the photo stays
   in view while you read; each chapter you reach wipes its own photo in over
   the last one, and a red line down the side fills as you go.
   On phones each chapter carries its own photo, revealed as it arrives.
   ====================================================================== */
.hw { --hw-ink: #FFFFFF; position: relative; background: #050505; color: var(--hw-ink); padding: clamp(80px, 10vw, 160px) var(--gutter, 24px); overflow: clip;
  background-image: radial-gradient(60% 50% at 85% 10%, rgba(222, 4, 18, .18), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(222, 4, 18, .12), transparent 70%); }
.hw__head { max-width: 1280px; margin: 0 auto clamp(48px, 6vw, 96px); }
.hw__kicker { margin: 0 0 14px; display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: #EF848B; }
.hw__kicker::before { content: ""; width: 34px; height: 2px; background: #DE0412; }
.hw__title { margin: 0; max-width: 16ch; font-size: clamp(40px, 5.6vw, 96px); font-weight: 700; line-height: .95; letter-spacing: -.035em; }
.hw__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.hw__media { position: sticky; top: calc(var(--header-h, 68px) + 6vh); aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: #111; box-shadow: 0 40px 90px rgba(0, 0, 0, .55); }
.hw__fig { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
.hw__fig img { width: 100%; height: 115%; object-fit: cover; display: block; transform: translate3d(0, calc(var(--hw-p, 0) * -13%), 0) scale(1.12); transition: transform 1.4s cubic-bezier(.16, .84, .24, 1); will-change: transform; }
.hw__fig.is-on, .hw__fig.is-done { clip-path: inset(0 0 0 0); }
.hw__fig.is-on img { transform: translate3d(0, calc(var(--hw-p, 0) * -13%), 0) scale(1); }
.hw__fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5, 0) 55%, rgba(5, 5, 5, .55)); pointer-events: none; }
.hw__count { position: absolute; left: 22px; bottom: 18px; z-index: 2; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .2em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); }
.hw__count span { color: #FFFFFF; }
.hw__steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 clamp(28px, 3vw, 48px); display: grid; gap: clamp(28vh, 34vh, 380px); padding-bottom: 18vh; }
.hw__rail { position: absolute; left: 0; top: 8px; bottom: 18vh; width: 2px; background: rgba(255, 255, 255, .12); }
.hw__rail i { position: absolute; inset: 0; background: #DE0412; transform-origin: 50% 0; transform: scaleY(var(--hw-rail, 0)); }
.hw__step { position: relative; opacity: .3; transform: translateY(18px); transition: opacity .6s ease, transform .8s cubic-bezier(.16, .84, .24, 1); }
.hw__step.is-on { opacity: 1; transform: none; }
.hw__step::before { content: ""; position: absolute; left: calc(clamp(28px, 3vw, 48px) * -1 - 5px); top: 10px; width: 12px; height: 12px; border-radius: 50%; background: #050505; border: 2px solid rgba(255, 255, 255, .35); transition: background-color .4s, border-color .4s, box-shadow .4s; }
.hw__step.is-on::before { background: #DE0412; border-color: #DE0412; box-shadow: 0 0 0 6px rgba(222, 4, 18, .2); }
.hw__no { margin: 0 0 6px; font-size: clamp(64px, 7vw, 120px); font-weight: 800; line-height: .85; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .35); transition: -webkit-text-stroke-color .5s; }
.hw__step.is-on .hw__no { -webkit-text-stroke-color: #DE0412; }
.hw__t { margin: 0 0 16px; font-size: clamp(28px, 2.8vw, 44px); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; }
.hw__body p { margin: 0; max-width: 46ch; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, .78); }
.hw__body a { color: #FFFFFF; text-decoration-color: #DE0412; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hw__body a:hover { color: #EF848B; }
.hw__fig-m { display: none; }

@media (max-width: 899.98px) {
  .hw__grid { grid-template-columns: 1fr; }
  .hw__media { display: none; }
  .hw__steps { gap: 72px; padding-bottom: 0; }
  .hw__rail { bottom: 0; }
  .hw__step { opacity: 1; transform: none; }
  .hw__fig-m { display: block; margin: 0 0 22px; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: #111; clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1); }
  .hw__fig-m img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.15); transition: transform 1.4s cubic-bezier(.16, .84, .24, 1); }
  .hw__step.is-seen .hw__fig-m { clip-path: inset(0 0 0 0); }
  .hw__step.is-seen .hw__fig-m img { transform: none; }
  .hw__no { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw__fig, .hw__fig img, .hw__step, .hw__fig-m, .hw__fig-m img { transition: none; }
  .hw__fig img, .hw__fig-m img { transform: none; }
  .hw__step { opacity: 1; transform: none; }
  .hw__fig-m { clip-path: none; }
}
/* no JavaScript: show everything plainly */
html:not(.js) .hw__fig { clip-path: none; }
html:not(.js) .hw__fig-m { clip-path: none; }
html:not(.js) .hw__step { opacity: 1; transform: none; }