/* LNKS Luanda Music Group: Kelly Silva.
   A dark concert stage from top to bottom. The opening is a poster: the giant name behind him, the light on him,
   and as you scroll the name parts and he steps forward. Every chapter after that arrives with its own motion:
   photos wipe in through masks, numbers count up, his hits slide past, his career runs sideways like a film strip,
   records slide out of their sleeves and the anniversary counters roll.
   lnks-kelly.js sets --p (0 to 1) on any [data-ks-scroll] block as it passes through the screen, and adds .is-in to
   [data-ks-reveal] blocks when they arrive. Only transform, opacity and clip-path move.
   Reduced motion: everything is shown at once and nothing is tied to scrolling. Without JavaScript everything shows. */
@font-face {
  font-family: "Archivo Poster";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}

.page-kelly { --ks-bg: #050505; --ks-bg-2: #0D0D0D; --ks-line: rgba(255, 255, 255, .12); --ks-ink: #FFFFFF; --ks-muted: rgba(255, 255, 255, .66);
  --ks-red: var(--brand-red, #DE0412); --ks-red-glow: var(--brand-red-glow, #EF848B); --ks-ease: cubic-bezier(.16, .84, .24, 1);
  --ks-wide: "Archivo Poster", var(--font-sans); }
.page-kelly main { background: var(--ks-bg); color: var(--ks-ink); overflow-x: clip; }
.ks-wrap { max-width: var(--layout-max, 1280px); margin-inline: auto; padding-inline: var(--gutter, 24px); }
.ks-kicker { margin: 0 0 18px; display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--ks-red-glow); }
.ks-kicker b { color: var(--ks-red); font-weight: 900; }
.ks-kicker::before { content: ""; width: 34px; height: 2px; background: var(--ks-red); }
.ks-h2 { margin: 0; font-family: var(--ks-wide); font-stretch: 112%; font-weight: 900; font-size: clamp(44px, 7vw, 120px); line-height: .9; letter-spacing: -.035em; text-transform: uppercase; }
.ks-h2 em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85); }
.ks-lead { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.55; color: var(--ks-ink); }
.ks-text p { margin: 0 0 1.1em; font-size: clamp(16px, 1.12vw, 18px); line-height: 1.75; color: rgba(255, 255, 255, .8); }
.ks-text p:last-child { margin-bottom: 0; }
.ks-text em, .ks-lead em { font-style: italic; color: #FFFFFF; }
.ks-text strong { color: #FFFFFF; font-weight: 700; }
.page-kelly a:focus-visible, .page-kelly button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* EN | PT switch (driven by lnks-profile.js) */
.ks-lang { display: inline-flex; padding: 3px; border: 1px solid var(--ks-line); border-radius: 999px; }
.ks-lang button { min-width: 44px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--ks-muted); font: 800 12px/1 var(--font-sans); letter-spacing: .14em; cursor: pointer; }
.ks-lang button[aria-pressed="true"] { background: #FFFFFF; color: #050505; }
.ks-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(36px, 5vw, 72px); }

/* ======================= 1. the poster ======================= */
.ks-hero { position: relative; height: 175vh; background: var(--ks-bg); --p: 0; }
.ks-hero__sticky { position: sticky; top: var(--header-h, 68px); height: calc(100vh - var(--header-h, 68px)); height: calc(100svh - var(--header-h, 68px)); overflow: hidden; isolation: isolate; }   /* sits just under the sticky site header */
.ks-hero__light { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 60% at 50% 34%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%),
    radial-gradient(70% 70% at 50% 110%, rgba(222, 4, 18, .55), rgba(222, 4, 18, 0) 70%),
    radial-gradient(60% 80% at 50% 40%, #1A0204 0%, #070707 70%); }
.ks-hero__beam { position: absolute; top: -10%; width: 34vw; height: 120%; z-index: 0; pointer-events: none; opacity: .5; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 75%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.ks-hero__beam--l { left: 8%; transform: rotate(-16deg); }
.ks-hero__beam--r { right: 8%; transform: rotate(16deg); }
.ks-hero__name { position: absolute; left: 0; right: 0; top: 12%; z-index: 1; margin: 0; display: grid; justify-items: center; pointer-events: none;
  font-family: var(--ks-wide); font-stretch: 125%; font-weight: 900; font-size: min(23vw, 36vh); line-height: .8; letter-spacing: -.045em; text-transform: uppercase; }
.ks-hero__row { display: block; white-space: nowrap; overflow: hidden; padding: .04em .06em 0; }
.ks-hero__row--a { color: var(--ks-red); transform: translate3d(calc(var(--p) * -26vw), 0, 0); }
.ks-hero__row--b { color: transparent; -webkit-text-stroke: max(1.5px, .14vw) rgba(255, 255, 255, .9); transform: translate3d(calc(var(--p) * 26vw), 0, 0); }
.ks-hero__ch { display: inline-block; }
.ks-hero__fig { position: absolute; left: 50%; bottom: 0; z-index: 2; height: min(calc(96svh - var(--header-h, 68px)), 120vw); width: auto; margin: 0; pointer-events: none;
  transform: translate3d(-50%, calc(var(--p) * -4vh), 0) scale(calc(1 + var(--p) * .14)); transform-origin: 50% 100%; will-change: transform; }
.ks-hero__fig img { display: block; height: 100%; width: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .7)); }
.ks-hero__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #050505; opacity: calc(var(--p) * .85); }
.ks-hero__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(5, 5, 5, 0), #050505 92%); }
.ks-hero__grain { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .08;
  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"); }
.ks-hero__meta { position: absolute; z-index: 5; inset: auto clamp(16px, 3vw, 48px) clamp(22px, 4vh, 44px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; opacity: calc(1 - var(--p) * 2.2); }
.ks-hero__tag { margin: 0; max-width: 30ch; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.4; font-weight: 500; }
.ks-hero__tag span { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--ks-red-glow); }
.ks-hero__side { display: grid; gap: 12px; justify-items: end; }
.ks-hero__side p { margin: 0; text-align: right; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ks-muted); line-height: 1.7; }
.ks-hero__cue { position: absolute; z-index: 5; left: 50%; bottom: 18px; width: 22px; height: 36px; margin-left: -11px; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 12px; opacity: calc(1 - var(--p) * 4); }
.ks-hero__cue::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--ks-red); }
.ks-hero__top { position: absolute; z-index: 5; top: clamp(16px, 3vh, 32px); left: clamp(16px, 3vw, 48px); right: clamp(16px, 3vw, 48px); display: flex; justify-content: space-between; gap: 16px; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--ks-muted); }
.ks-hero__top b { color: #FFFFFF; }

@media (prefers-reduced-motion: no-preference) {
  .js .ks-hero__ch { transform: translateY(105%); }
  .js .ks-hero.is-in .ks-hero__ch { transform: none; transition: transform 1.1s var(--ks-ease); transition-delay: calc(.15s + var(--i) * 55ms); }
  .js .ks-hero__fig img { opacity: 0; transform: translateY(6%) scale(1.04); }
  .js .ks-hero.is-in .ks-hero__fig img { opacity: 1; transform: none; transition: opacity 1.4s ease .5s, transform 1.6s var(--ks-ease) .5s; }
  .js .ks-hero__beam { opacity: 0; }
  .js .ks-hero.is-in .ks-hero__beam { opacity: .5; transition: opacity 2s ease .3s; }
  .js .ks-hero__meta, .js .ks-hero__top { clip-path: inset(0 0 100% 0); }
  .js .ks-hero.is-in .ks-hero__meta, .js .ks-hero.is-in .ks-hero__top { clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ks-ease) 1.1s; }
  .ks-hero__cue::after { animation: ks-cue 1.8s var(--ks-ease) infinite; }
}
@keyframes ks-cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

/* ======================= 2. the numbers ======================= */
.ks-stats { position: relative; background: var(--ks-bg); padding: clamp(40px, 6vw, 96px) 0 clamp(56px, 7vw, 112px); }
.ks-stats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ks-line); }
.ks-stats__grid li { padding: clamp(22px, 2.6vw, 40px) clamp(12px, 2vw, 28px) 0 0; border-right: 1px solid var(--ks-line); display: grid; gap: 10px; align-content: start; }
.ks-stats__grid li + li { padding-left: clamp(16px, 2vw, 28px); }
.ks-stats__grid li:last-child { border-right: 0; }
.ks-stats__n { font-family: var(--ks-wide); font-stretch: 118%; font-weight: 900; font-size: clamp(48px, 6.4vw, 108px); line-height: .85; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ks-stats__n--word { color: var(--ks-red); font-size: clamp(36px, 4.4vw, 76px); line-height: 1.05; }
.ks-stats__l { font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ks-muted); line-height: 1.5; }

/* a red band that runs with the scroll */
.ks-band { background: var(--ks-red); color: #FFFFFF; overflow: hidden; padding: clamp(14px, 1.6vw, 22px) 0; --p: .5; }
.ks-band__track { display: flex; gap: clamp(28px, 3vw, 56px); width: max-content; transform: translate3d(calc(var(--p) * -30%), 0, 0); }
.ks-band__track span { font-family: var(--ks-wide); font-stretch: 120%; font-weight: 900; font-size: clamp(26px, 3.4vw, 56px); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: clamp(28px, 3vw, 56px); }
.ks-band__track span::after { content: ""; width: .32em; height: .32em; background: #050505; transform: rotate(45deg); }

/* ======================= 3. the artist ======================= */
.ks-artist { padding: clamp(80px, 10vw, 168px) 0; }
.ks-artist__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.ks-artist .ks-lead { margin: clamp(24px, 3vw, 40px) 0 22px; }
.ks-mask { position: relative; margin: 0; overflow: hidden; border-radius: 6px; background: var(--ks-bg-2); }
.ks-mask img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ks-artist__photo { aspect-ratio: 1200 / 1756; }
.ks-artist__photo img { transform: translate3d(0, calc((var(--p, .5) - .5) * -8%), 0) scale(1.12); }
.ks-mask__cap { position: absolute; left: 16px; bottom: 14px; z-index: 2; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.ks-mask::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5, 0) 60%, rgba(5, 5, 5, .55)); pointer-events: none; }
.ks-brand { margin-top: 28px; padding: 22px 24px; border-left: 3px solid var(--ks-red); background: rgba(255, 255, 255, .04); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; font-weight: 600; }

/* mask reveals: the photo opens out from a thin line, the words rise */
@media (prefers-reduced-motion: no-preference) {
  .js [data-ks-reveal] .ks-mask, .js .ks-mask[data-ks-reveal] { clip-path: inset(46% 0 46% 0 round 6px); transition: clip-path 1.3s var(--ks-ease); }
  .js [data-ks-reveal].is-in .ks-mask, .js .ks-mask[data-ks-reveal].is-in { clip-path: inset(0 0 0 0 round 6px); }
  .js [data-ks-rise] { opacity: 0; transform: translateY(32px); transition: opacity .9s ease, transform 1.1s var(--ks-ease); transition-delay: var(--d, 0s); }
  .js [data-ks-rise].is-in, .js .is-in [data-ks-rise] { opacity: 1; transform: none; }
  .js .ks-h2[data-ks-split] .ks-w { display: inline-block; transform: translateY(100%); transition: transform 1s var(--ks-ease); transition-delay: calc(var(--i) * 70ms); }
  .js .ks-h2[data-ks-split] .ks-wl { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
  .js .ks-h2[data-ks-split].is-in .ks-w { transform: none; }
}

/* ======================= 4. early steps ======================= */
.ks-bio { padding: 0 0 clamp(64px, 8vw, 128px); }
.ks-bio__cols { columns: 2; column-gap: clamp(32px, 4vw, 72px); }
.ks-bio__cols p { break-inside: avoid; }
.ks-bio__cols > p:first-child::first-letter { float: left; font-family: var(--ks-wide); font-stretch: 120%; font-weight: 900; font-size: 4.2em; line-height: .8; margin: .06em .1em 0 0; color: var(--ks-red); }
.ks-say { margin: clamp(48px, 6vw, 96px) 0 0; display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; }
.ks-say__mark { color: var(--ks-red); line-height: 0; align-self: start; padding-right: clamp(20px, 3vw, 48px); border-right: 2px solid rgba(255, 255, 255, .16); }   /* a red quotation mark and a thin rule, like a magazine pull quote */
.ks-say__mark svg { width: clamp(48px, 5vw, 84px); height: auto; }
.ks-say p { margin: 0; font-family: var(--ks-wide); font-stretch: 100%; font-weight: 800; font-size: clamp(28px, 3.4vw, 56px); line-height: 1.04; letter-spacing: -.02em; }
.ks-say p span { display: block; color: var(--ks-red-glow); }

/* his hits, sliding past in two directions as you scroll */
.ks-hits { padding: clamp(48px, 6vw, 96px) 0; border-block: 1px solid var(--ks-line); overflow: hidden; --p: .5; }
.ks-hits__label { margin-bottom: clamp(20px, 2.4vw, 36px); }
.ks-hits__row { display: flex; gap: clamp(20px, 2.4vw, 44px); width: max-content; list-style: none; margin: 0; padding: 0; }
.ks-hits__row + .ks-hits__row { margin-top: clamp(4px, .8vw, 12px); }
.ks-hits__row--a { transform: translate3d(calc(-8% - var(--p) * 22%), 0, 0); }
.ks-hits__row--b { transform: translate3d(calc(-30% + var(--p) * 22%), 0, 0); }
.ks-hits__row li { font-family: var(--ks-wide); font-stretch: 118%; font-weight: 900; font-size: clamp(46px, 7.4vw, 128px); line-height: 1; letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55); transition: color .35s ease, -webkit-text-stroke-color .35s ease; }
.ks-hits__row li:hover, .ks-hits__row li.is-hot { color: var(--ks-red); -webkit-text-stroke-color: var(--ks-red); }
.ks-hits__row li::after { content: "·"; margin-left: clamp(20px, 2.4vw, 44px); color: rgba(255, 255, 255, .25); -webkit-text-stroke: 0; }
.ks-hits__foot { margin-top: clamp(28px, 3vw, 48px); font-size: clamp(18px, 1.5vw, 24px); font-weight: 600; text-align: center; color: rgba(255, 255, 255, .86); }

/* ======================= 5. the stages, a film strip that runs sideways ======================= */
.ks-run { position: relative; --p: 0; }
.ks-run__intro { padding: clamp(80px, 10vw, 160px) 0 clamp(40px, 5vw, 72px); }
.ks-run__intro .ks-text { max-width: 62ch; margin-top: 28px; }
.ks-run__pin { position: relative; height: 340vh; }
.ks-run__sticky { position: sticky; top: var(--header-h, 68px); height: calc(100vh - var(--header-h, 68px)); height: calc(100svh - var(--header-h, 68px)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.ks-run__track { display: flex; gap: clamp(16px, 2vw, 28px); padding-left: max(var(--gutter, 24px), calc((100vw - var(--layout-max, 1280px)) / 2 + var(--gutter, 24px))); width: max-content;
  transform: translate3d(calc(var(--p) * var(--run, 0px) * -1), 0, 0); will-change: transform; }
.ks-card { position: relative; flex: none; width: clamp(280px, 30vw, 420px); height: min(66vh, 560px); border-radius: 8px; overflow: hidden; background: var(--ks-bg-2); border: 1px solid var(--ks-line);
  display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(20px, 2vw, 30px); }
.ks-card__big { position: absolute; top: clamp(14px, 1.6vw, 24px); left: clamp(18px, 2vw, 28px); right: 18px; margin: 0; font-family: var(--ks-wide); font-stretch: 120%; font-weight: 900; font-size: clamp(64px, 7vw, 116px); line-height: .85; letter-spacing: -.04em; color: var(--ks-red); }
.ks-card__big--sm { font-size: clamp(40px, 4.2vw, 68px); }
.ks-card__k { position: relative; z-index: 2; margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ks-red-glow); }
.ks-card__t { position: relative; z-index: 2; margin: 0 0 10px; font-size: clamp(22px, 1.9vw, 30px); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.ks-card p:last-child { position: relative; z-index: 2; margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.ks-card--photo { border: 0; }
.ks-card--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ks-ease); }
.ks-card--photo:hover img { transform: scale(1.14); }
.ks-card--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5, .1) 30%, rgba(5, 5, 5, .92)); }
.ks-card--red { background: var(--ks-red); border-color: var(--ks-red); }
.ks-card--red .ks-card__big { color: #050505; }
.ks-card--red .ks-card__k { color: #FFFFFF; }
.ks-run__bar { width: min(420px, 60vw); height: 2px; margin: clamp(22px, 3vh, 36px) 0 0 max(var(--gutter, 24px), calc((100vw - var(--layout-max, 1280px)) / 2 + var(--gutter, 24px))); background: var(--ks-line); }
.ks-run__bar i { display: block; height: 100%; background: var(--ks-red); transform-origin: 0 50%; transform: scaleX(var(--p)); }

/* who he has shared the stage with */
.ks-with { padding: clamp(72px, 9vw, 144px) 0; }
.ks-with__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ks-line); }
.ks-with__list li { position: relative; padding: clamp(16px, 1.6vw, 24px) 0; border-bottom: 1px solid var(--ks-line); font-size: clamp(20px, 2vw, 32px); font-weight: 700; letter-spacing: -.01em; overflow: hidden; }
.ks-with__list li::before { content: attr(data-n); display: inline-block; width: 3.2em; font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--ks-red-glow); vertical-align: middle; }
.ks-with__list li::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--ks-red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ks-ease); }
.ks-with__list li:hover::after { transform: scaleX(1); }

/* ======================= 6. discography ======================= */
.ks-disco { padding: clamp(80px, 10vw, 160px) 0; background: radial-gradient(70% 60% at 85% 0%, rgba(222, 4, 18, .16), transparent 70%), var(--ks-bg); }
.ks-shelf { list-style: none; margin: 0; padding: 0 0 clamp(20px, 3vw, 40px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.ks-rec { position: relative; display: grid; gap: 12px; }
.ks-rec__sleeve { position: relative; aspect-ratio: 1; perspective: 900px; }
.ks-rec__vinyl { position: absolute; top: 4%; left: 4%; width: 92%; height: 92%; border-radius: 50%; z-index: 0;
  background: repeating-radial-gradient(circle at 50% 50%, #111 0 2px, #1C1C1C 2px 4px); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transition: transform .9s var(--ks-ease); }
.ks-rec__vinyl::after { content: ""; position: absolute; inset: 33%; border-radius: 50%; background: var(--ks-red); box-shadow: inset 0 0 0 6px #050505; }
.ks-rec__cover { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); transition: transform .9s var(--ks-ease); }
.ks-rec:hover .ks-rec__vinyl, .ks-rec.is-out .ks-rec__vinyl { transform: translateX(38%) rotate(120deg); }
.ks-rec:hover .ks-rec__cover { transform: translateX(-6%) rotateY(8deg); }
.ks-rec__type { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ks-red-glow); }
.ks-rec__name { margin: 0; font-size: clamp(16px, 1.3vw, 20px); font-weight: 800; line-height: 1.15; }
.ks-feature { margin-top: clamp(48px, 6vw, 96px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 72px); align-items: start;
  padding: clamp(28px, 4vw, 64px); border-radius: 10px; background: linear-gradient(140deg, #140103, #0A0A0A 60%); border: 1px solid rgba(222, 4, 18, .35); }
.ks-feature__cover { position: relative; margin: 0; }
.ks-feature__cover img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.ks-feature__facts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ks-feature__facts li { padding-top: 14px; border-top: 2px solid var(--ks-red); }
.ks-feature__facts b { display: block; font-family: var(--ks-wide); font-stretch: 118%; font-weight: 900; font-size: clamp(34px, 3.4vw, 56px); line-height: .9; }
.ks-feature__facts span { display: block; margin-top: 8px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ks-muted); line-height: 1.5; }
.ks-feature h3 { margin: 0 0 16px; font-family: var(--ks-wide); font-stretch: 112%; font-weight: 900; font-size: clamp(36px, 4.4vw, 72px); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; }
.ks-listen { margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.ks-listen h3 { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ks-red-glow); }
.ks-listen ol { list-style: none; margin: 0; padding: 0; counter-reset: tr; }
.ks-track { position: relative; width: 100%; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; padding: 10px 6px 10px 0; border: 0; border-bottom: 1px solid var(--ks-line);
  background: none; color: #FFFFFF; font: 600 16px/1.3 var(--font-sans); text-align: left; cursor: pointer; transition: background-color .2s; }
.ks-track:hover { background: rgba(255, 255, 255, .04); }
.ks-track__btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--ks-red); display: grid; place-items: center; transition: background-color .2s, transform .2s; }
.ks-track__btn::before { content: ""; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #FFFFFF; }
.ks-track:hover .ks-track__btn { background: var(--ks-red); transform: scale(1.06); }
.ks-track__eq { display: none; gap: 2px; align-items: end; height: 12px; }
.ks-track__eq i { width: 3px; height: 100%; background: #FFFFFF; transform-origin: bottom; animation: ks-eq .9s ease-in-out infinite alternate; }
.ks-track__eq i:nth-child(2) { animation-delay: -.3s; } .ks-track__eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes ks-eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.ks-track.is-playing .ks-track__btn { background: var(--ks-red); }
.ks-track.is-playing .ks-track__btn::before { content: none; }
.ks-track.is-playing .ks-track__eq { display: flex; }
.ks-track.is-playing .ks-track__name { color: var(--ks-red-glow); }
.ks-track__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ks-red); transform: scaleX(var(--tp, 0)); transform-origin: left; pointer-events: none; }
.ks-note { margin: 18px 0 0; font-size: 14px; color: var(--ks-muted); }
.ks-note[hidden] { display: none; }
.ks-foot { margin: clamp(40px, 5vw, 72px) 0 0; text-align: center; font-size: clamp(17px, 1.4vw, 22px); font-weight: 600; color: rgba(255, 255, 255, .86); }

/* ======================= 7. the lookbook sits on the same stage ======================= */
.page-kelly .ks-moments { background: var(--ks-bg); }
.page-kelly .ks-moments.ap-gallery { margin: 0; padding: 0; max-width: none; }
.page-kelly .ks-moments .lb { margin-top: 0; }
.page-kelly .ks-moments > h2, .page-kelly .ks-moments > .ap-gallery__grid { max-width: var(--layout-max, 1280px); margin-inline: auto; padding-inline: var(--gutter, 24px); }

/* ======================= 8. coming soon ======================= */
.ks-soon { position: relative; overflow: hidden; padding: clamp(96px, 12vw, 200px) 0; isolation: isolate; }
.ks-soon__bg { position: absolute; inset: -10% 0; z-index: -1; background: radial-gradient(60% 70% at 70% 50%, rgba(222, 4, 18, .5), rgba(222, 4, 18, 0) 70%), #050505;
  transform: translate3d(0, calc((var(--p, .5) - .5) * 12%), 0); }
.ks-soon__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.ks-soon__badge { display: inline-flex; gap: 10px; align-items: center; margin-bottom: 22px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.ks-soon__badge b { padding: 6px 10px; background: var(--ks-red); color: #FFFFFF; }
.ks-soon__title { margin: 0 0 22px; font-family: var(--ks-wide); font-stretch: 100%; font-weight: 900; font-style: italic; font-size: clamp(48px, 7.6vw, 132px); line-height: .9; letter-spacing: -.035em; }
.ks-soon__title span { display: block; }
.ks-soon__plats { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ks-soon__plats li { padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.ks-soon__fig { position: relative; margin: 0; justify-self: center; height: min(78vh, 700px); }
.ks-soon__fig img { height: 100%; width: auto; display: block; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .7)); transform: translate3d(0, calc((var(--p, .5) - .5) * -10%), 0); will-change: transform; }
.ks-soon__fig::before { content: ""; position: absolute; left: 50%; top: 40%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(222, 4, 18, .55), rgba(222, 4, 18, 0) 65%); }

/* 35 years, 35 songs */
.ks-35 { padding: clamp(80px, 10vw, 160px) 0; border-top: 1px solid var(--ks-line); }
.ks-35__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.ks-35__nums { display: grid; grid-template-columns: 1fr 1fr; }
.ks-35__nums div { padding: 0 clamp(14px, 2vw, 32px); border-left: 1px solid var(--ks-line); }
.ks-35__nums div:first-child { border-left: 0; padding-left: 0; }
.ks-35__nums b { display: block; font-family: var(--ks-wide); font-stretch: 125%; font-weight: 900; font-size: clamp(96px, 11vw, 196px); line-height: .8; letter-spacing: -.05em; color: var(--ks-red); font-variant-numeric: tabular-nums; }
.ks-35__nums span { display: block; margin-top: 14px; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ks-muted); line-height: 1.5; }
.ks-35 h3 { margin: 0 0 20px; font-family: var(--ks-wide); font-stretch: 112%; font-weight: 900; font-size: clamp(34px, 4.2vw, 68px); line-height: .92; letter-spacing: -.03em; text-transform: uppercase; }
.ks-close { margin: 0; padding: clamp(40px, 5vw, 72px) var(--gutter, 24px); text-align: center; font-family: var(--ks-wide); font-stretch: 100%; font-weight: 800; font-style: italic; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.2; color: rgba(255, 255, 255, .9); border-top: 1px solid var(--ks-line); }

/* ======================= 9. management ======================= */
.ks-mgmt { position: relative; padding: clamp(88px, 11vw, 176px) 0; background: #FFFFFF; color: #0A0A0A; }
.ks-mgmt .ks-kicker { color: var(--brand-red-ink, #C40410); }
.ks-mgmt__name { margin: 0; font-family: var(--ks-wide); font-stretch: 125%; font-weight: 900; font-size: clamp(56px, 11vw, 190px); line-height: .82; letter-spacing: -.05em; }
.ks-mgmt__name span { display: block; text-transform: uppercase; }   /* LNKS on one line, LUANDA under it */
.ks-mgmt__sub { margin: 18px 0 0; font-size: 13px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #545454; }
.ks-mgmt__text { margin: clamp(28px, 3vw, 48px) 0 0; max-width: 62ch; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.6; }
.ks-mgmt__grid { list-style: none; margin: clamp(40px, 5vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid #0A0A0A; }
.ks-mgmt__grid li { padding: 26px 24px 30px 0; border-bottom: 1px solid #D9D9D9; }
.ks-mgmt__grid li:not(:nth-child(3n + 1)) { padding-left: 24px; border-left: 1px solid #D9D9D9; }
.ks-mgmt__grid h3 { margin: 0 0 8px; font-size: clamp(20px, 1.6vw, 26px); font-weight: 800; letter-spacing: -.01em; }
.ks-mgmt__grid h3::before { content: attr(data-n); display: block; margin-bottom: 14px; font-size: 12px; letter-spacing: .2em; color: var(--brand-red-ink, #C40410); }
.ks-mgmt__grid p { margin: 0; color: #3F3F3F; line-height: 1.6; }
.ks-mgmt__end { margin: clamp(36px, 4vw, 64px) 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; font-size: clamp(18px, 1.5vw, 24px); font-weight: 700; }
.ks-pill { display: inline-flex; align-items: center; gap: 12px; padding: 15px 22px 15px 26px; border-radius: 999px; background: #0A0A0A; color: #FFFFFF; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background-color .3s, transform .3s var(--ks-ease); }
.ks-pill svg { width: 18px; height: 18px; transition: transform .3s; }
.ks-pill:hover { background: var(--ks-red); transform: translateY(-2px); }
.ks-pill:hover svg { transform: translateX(4px); }
.ks-mgmt .ks-pill:focus-visible { outline-color: #0A0A0A; }

/* ======================= 10. listen and follow ======================= */
.ks-follow { background: var(--ks-red); color: #FFFFFF; padding: clamp(64px, 7vw, 112px) 0; }
.ks-follow .ks-h2 { margin-bottom: clamp(28px, 3vw, 48px); }
.ks-follow__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ks-follow__grid a, .ks-follow__grid span.ks-follow__tile { display: grid; gap: 22px; min-height: 140px; padding: 20px; background: #0A0A0A; color: #FFFFFF; text-decoration: none; border-radius: 6px; transition: transform .35s var(--ks-ease), background-color .3s; }
.ks-follow__grid a:hover { transform: translateY(-4px); background: #000000; }
.ks-follow__grid svg { width: 26px; height: 26px; }
.ks-follow__grid b { align-self: end; font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ks-follow__grid small { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .7); }

/* more artists, on the dark stage */
.page-kelly .ap-more { max-width: none; margin: 0; padding: clamp(64px, 7vw, 112px) 0; background: var(--ks-bg); }
.page-kelly .ap-more > * { max-width: var(--layout-max, 1280px); margin-inline: auto; padding-inline: var(--gutter, 24px); }
.page-kelly .ap-more h2 { color: #FFFFFF; }

/* ======================= tablets and phones ======================= */
@media (max-width: 1023.98px) {
  .ks-stats__grid { grid-template-columns: 1fr 1fr; }
  .ks-stats__grid li:nth-child(2) { border-right: 0; }
  .ks-stats__grid li:nth-child(3) { padding-left: 0; }
  .ks-stats__grid li:nth-child(n + 3) { padding-top: 28px; }
  .ks-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ks-listen { grid-template-columns: 1fr 1fr; }
  .ks-follow__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  .ks-hero { height: 150vh; }
  .ks-hero__name { top: 14%; font-size: 21.5vw; }
  .ks-hero__fig { height: 74svh; }
  .ks-hero__meta { flex-direction: column; align-items: flex-start; }
  .ks-hero__side { justify-items: start; }
  .ks-hero__side p { text-align: left; }
  .ks-mgmt__name { font-size: 13.4vw; font-stretch: 100%; }
  .ks-hero__beam { width: 60vw; }
  .ks-artist__grid, .ks-feature, .ks-soon__grid, .ks-35__grid { grid-template-columns: 1fr; }
  .ks-bio__cols { columns: 1; }
  .ks-say { grid-template-columns: 1fr; }
  .ks-say__mark { border-right: 0; padding-right: 0; }
  .ks-say__mark svg { width: 44px; }
  .ks-with__list { grid-template-columns: 1fr 1fr; }
  .ks-with__list li { font-size: 19px; }
  .ks-with__list li::before { width: 2.6em; }
  .ks-shelf { grid-template-columns: 1fr 1fr; }
  .ks-listen { grid-template-columns: 1fr; }
  .ks-mgmt__grid { grid-template-columns: 1fr; }
  .ks-mgmt__grid li:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .ks-follow__grid { grid-template-columns: 1fr 1fr; }
  .ks-soon__fig { height: 62vh; }
  /* the film strip becomes a plain column of cards */
  .ks-run__pin { height: auto; }
  .ks-run__sticky { position: static; height: auto; overflow: visible; }
  .ks-run__track { width: auto; flex-direction: column; transform: none; padding: 0 var(--gutter, 24px); }
  .ks-card { width: 100%; height: auto; min-height: 260px; }
  .ks-card--photo { min-height: 420px; }
  .ks-card .ks-card__big + * { margin-top: 110px; }
  .ks-run__bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ks-hero { height: auto; }
  .ks-hero__sticky { position: relative; }
  .ks-hero__row--a, .ks-hero__row--b, .ks-hero__fig, .ks-hits__row--a, .ks-hits__row--b, .ks-band__track, .ks-artist__photo img, .ks-soon__bg, .ks-soon__fig img { transform: none; }
  .ks-hero__fig { transform: translateX(-50%); }
  .ks-hero__shade { opacity: 0; }
  .ks-hero__meta, .ks-hero__cue { opacity: 1; }
  .ks-run__pin { height: auto; }
  .ks-run__sticky { position: static; height: auto; overflow: visible; }
  .ks-run__track { width: auto; flex-wrap: wrap; transform: none; padding-right: var(--gutter, 24px); }
  .ks-run__bar { display: none; }
  .ks-hits__row { flex-wrap: wrap; width: auto; padding: 0 var(--gutter, 24px); }
  .ks-rec__vinyl, .ks-rec__cover, .ks-card--photo img { transition: none; }
  .ks-track__eq i { animation: none; }
}

/* ---- The artist: Kelly cut out of the studio and standing on the page itself ----
   A red light that follows the mouse, rings and his name behind him moving the other way, a slow breath,
   a sheen across the photo now and then. He rises out of the floor as the section arrives. */
.ks-stage { position: relative; margin: 0; aspect-ratio: 1049 / 1500; isolation: isolate; --mx: 0; --my: 0; }
.ks-stage__glow { position: absolute; left: 50%; top: 42%; width: 120%; aspect-ratio: 1; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(222, 4, 18, .55), rgba(222, 4, 18, .16) 55%, rgba(222, 4, 18, 0) 100%);
  transform: translate3d(calc(-50% + var(--mx) * 60px), calc(-50% + var(--my) * 40px), 0); opacity: 0; transition: opacity 1.2s ease .3s; }
.ks-stage__rings { position: absolute; left: 50%; top: 40%; width: 108%; aspect-ratio: 1; z-index: 0; pointer-events: none;
  transform: translate3d(calc(-50% + var(--mx) * -18px), calc(-50% + var(--my) * -12px), 0); }
.ks-stage__rings i { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(239, 132, 139, .22); transform: scale(.3); opacity: 0;
  transition: transform 1.6s cubic-bezier(.16, .84, .24, 1), opacity 1s ease; }
.ks-stage__rings i:nth-child(2) { width: 78%; height: 78%; } .ks-stage__rings i:nth-child(3) { width: 56%; height: 56%; } .ks-stage__rings i:nth-child(4) { width: 34%; height: 34%; border-color: rgba(222, 4, 18, .5); }
.ks-stage__word { position: absolute; left: 50%; top: 18%; z-index: 0; pointer-events: none; white-space: nowrap; font-family: "Archivo Poster", var(--font-sans); font-weight: 900;
  font-size: clamp(90px, 13vw, 230px); line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22);
  transform: translate3d(calc(-50% + var(--mx) * -34px + (var(--p, .5) - .5) * 80px), 0, 0); will-change: transform; opacity: 0; transition: opacity 1.2s ease .5s; }
.ks-stage__fig { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: block; height: 100%; transform-origin: 50% 100%;
  transform: perspective(1200px) translate3d(calc(var(--mx) * 16px), calc(var(--my) * 8px), 0) rotateY(calc(var(--mx) * 5deg)); will-change: transform; }
.ks-stage__fig img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); display: block;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(222, 4, 18, .18));
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
.ks-stage__sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  -webkit-mask-image: url("../img/artists/kelly-silva-cut-purple.webp"); mask-image: url("../img/artists/kelly-silva-cut-purple.webp");
  -webkit-mask-size: auto 100%; mask-size: auto 100%; -webkit-mask-position: 50% 100%; mask-position: 50% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ks-stage__sheen::before { content: ""; position: absolute; top: -10%; bottom: -10%; width: 35%; left: -40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18) 45%, rgba(255, 200, 205, .28) 50%, transparent 60%); }
.ks-stage .ks-mask__cap { z-index: 3; bottom: 0; }
/* arriving */
.js .ks-stage[data-ks-reveal] .ks-stage__fig img { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.7, 0, .2, 1) .15s; }
.js .ks-stage[data-ks-reveal].is-in .ks-stage__fig img { clip-path: inset(0 0 0 0); }
.ks-stage.is-in .ks-stage__glow, .ks-stage.is-in .ks-stage__word { opacity: 1; }
.ks-stage.is-in .ks-stage__rings i { transform: scale(1); opacity: 1; }
.ks-stage.is-in .ks-stage__rings i:nth-child(2) { transition-delay: .12s; } .ks-stage.is-in .ks-stage__rings i:nth-child(3) { transition-delay: .24s; } .ks-stage.is-in .ks-stage__rings i:nth-child(4) { transition-delay: .36s; }
html:not(.js) .ks-stage__glow, html:not(.js) .ks-stage__word { opacity: 1; }
html:not(.js) .ks-stage__rings i { transform: none; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ks-stage.is-in .ks-stage__fig img { animation: ks-breathe 6s ease-in-out 1.6s infinite alternate; }
  .ks-stage.is-in .ks-stage__sheen::before { animation: ks-sheen 7s ease-in-out 2s infinite; }
  .ks-stage.is-in .ks-stage__rings i:nth-child(4) { animation: ks-pulse 3.2s ease-in-out 1.8s infinite; }
}
@keyframes ks-breathe { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.018); } }
@keyframes ks-sheen { 0%, 70% { transform: translateX(0); } 100% { transform: translateX(460%); } }
@keyframes ks-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .55; } }
@media (max-width: 767.98px) { .ks-stage { aspect-ratio: 1049 / 1380; max-width: 520px; width: 100%; justify-self: center; } }
@media (prefers-reduced-motion: reduce) { .ks-stage__fig, .ks-stage__glow, .ks-stage__rings, .ks-stage__word { transform: translate(-50%, -50%); } .ks-stage__fig { transform: none; } .ks-stage__word { transform: translateX(-50%); } }

/* All Vinyl: the very same shelf as Voto Gonçalves's page (styles in lnks-pages.css): four across, red count */
.ks-vinyl { margin-top: clamp(28px, 4vw, 56px); }

/* ======================= light chapters =======================
   After the opening (poster, numbers, the artist, first steps) the page breathes: the hits, the stage
   names, the records and the 35 year project sit on warm paper with black type, so the page alternates
   paper and night instead of being black all the way down. The lookbook and "coming soon" stay dark. */
.page-kelly .ks-hits, .page-kelly .ks-with, .page-kelly .ks-disco, .page-kelly .ks-35, .page-kelly .ks-close {
  --ks-bg: #F3EFEA; --ks-bg-2: #FFFFFF; --ks-line: rgba(10, 10, 10, .12); --ks-ink: #0A0A0A; --ks-muted: rgba(10, 10, 10, .62); --ks-red-glow: #C40410;
  background: var(--ks-bg); color: var(--ks-ink); }
.page-kelly .ks-hits { border-block: 0; padding-top: clamp(64px, 8vw, 128px); }
.page-kelly .ks-hits .ks-hits__row li { -webkit-text-stroke-color: rgba(10, 10, 10, .55); }
.page-kelly .ks-hits .ks-hits__row li:hover, .page-kelly .ks-hits .ks-hits__row li.is-hot { color: var(--ks-red); -webkit-text-stroke-color: var(--ks-red); }
.page-kelly .ks-hits .ks-hits__row li::after { color: rgba(10, 10, 10, .25); }
.page-kelly .ks-hits .ks-hits__foot { color: rgba(10, 10, 10, .8); }
.page-kelly .ks-with, .page-kelly .ks-disco, .page-kelly .ks-35 { --ks-h2-stroke: rgba(10, 10, 10, .85); }
.page-kelly .ks-with .ks-h2 em, .page-kelly .ks-disco .ks-h2 em, .page-kelly .ks-35 .ks-h2 em, .page-kelly .ks-hits .ks-h2 em { -webkit-text-stroke-color: rgba(10, 10, 10, .85); }
.page-kelly .ks-disco { background: radial-gradient(70% 60% at 90% 0%, rgba(222, 4, 18, .10), transparent 70%), #F3EFEA; padding-bottom: clamp(56px, 7vw, 112px); }
.page-kelly .ks-disco .ks-track { color: #0A0A0A; }
.page-kelly .ks-disco .ks-track:hover { background: rgba(10, 10, 10, .04); }
.page-kelly .ks-disco .ks-track__btn::before { border-left-color: #C40410; }
.page-kelly .ks-disco .ks-track:hover .ks-track__btn::before, .page-kelly .ks-disco .ks-track.is-playing .ks-track__btn::before { border-left-color: #FFFFFF; }
.page-kelly .ks-disco .ks-feature__cover img { box-shadow: 0 30px 70px rgba(10, 10, 10, .28); }
.page-kelly .ks-disco .ks-foot { color: rgba(10, 10, 10, .8); }
.page-kelly .ks-disco .vinyl-card { background: #FFFFFF; color: #0A0A0A; box-shadow: 0 1px 0 rgba(10, 10, 10, .06); }
.page-kelly .ks-disco .vinyl-card .btn--secondary { color: #0A0A0A; border-color: rgba(10, 10, 10, .25); }
.page-kelly .ks-35 { border-top: 0; }
.page-kelly .ks-close { background: #F3EFEA; color: #0A0A0A; padding-bottom: clamp(56px, 7vw, 96px); }
/* the Lookbook follows the records straight away, no empty night in between */
.page-kelly .ks-moments + .lb { margin-top: 0; }
.page-kelly .ks-moments + .lb .lb__intro { padding-top: clamp(48px, 5vw, 80px); }
/* the RISE vote card melts into the poster above and the numbers below: no edges */
.page-kelly .rv { background: none; border-top: 0; }
.page-kelly .rv::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 90% at 15% 50%, rgba(222, 4, 18, .34), transparent 70%), radial-gradient(60% 90% at 90% 60%, rgba(196, 4, 16, .22), transparent 70%), #050505;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%); }
.page-kelly .rv::after { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%); }
/* body text on paper (the Algo Especial ticket keeps its dark card and white text) */
.page-kelly :is(.ks-hits, .ks-with, .ks-disco, .ks-35) .ks-text p { color: rgba(10, 10, 10, .78); }
.page-kelly :is(.ks-hits, .ks-with, .ks-disco, .ks-35) .ks-text :is(em, strong), .page-kelly :is(.ks-hits, .ks-with, .ks-disco, .ks-35) .ks-lead em { color: #0A0A0A; }
.page-kelly .ks-disco .ks-feature { --ks-ink: #FFFFFF; --ks-muted: rgba(255, 255, 255, .66); --ks-red-glow: #EF848B; color: #FFFFFF; box-shadow: 0 40px 90px rgba(10, 10, 10, .25); }
.page-kelly .ks-disco .ks-feature .ks-text p { color: rgba(255, 255, 255, .8); }
.page-kelly .ks-disco .ks-feature .ks-text :is(em, strong) { color: #FFFFFF; }

/* iPhone and iPad Safari: a cut out photo sized by height alone could be drawn wider than it is (stretched).
   Every cut out now carries its own shape, and object-fit keeps the picture in proportion in every browser. */
.ks-hero__fig { aspect-ratio: 792 / 1220; }
.ks-hero__fig img { width: 100%; height: 100%; aspect-ratio: 792 / 1220; object-fit: contain; object-position: 50% 100%; }
.ks-soon__fig { aspect-ratio: 720 / 1240; }
.ks-soon__fig img { width: 100%; height: 100%; aspect-ratio: 720 / 1240; object-fit: contain; }
.ks-stage__fig img { aspect-ratio: 1049 / 1641; object-fit: contain; }