/* LNKS Luanda Music Group: the RISE Chart and the No. 1 on RISE showcase.
   The leaderboard follows the reference: stepped bars that start at the left edge of the screen and get shorter
   down the list, the artist name in white, the artist photo tinted in the bar colour, and a big outlined number.
   Bar colours (brand plus Angola): 1 brand red, 2 Angola gold, 3 crimson, 4 burnt orange, 5 slate, 6 graphite,
   then wine, old gold, steel and bronze for places 7 to 10. White names pass contrast on every bar.
   Motion: bars slide to their new places and change length when the order changes. Transform, opacity and
   the bar length only. Reduced motion: instant changes, nothing pulses. */

@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;
}

/* ================= the chart section ================= */
.rc {
  --rc-bg: #030303;
  --rc-text: #FFFFFF;
  --rc-muted: rgba(255, 255, 255, .66);
  --rc-red: #DE0412;
  --rc-edge: max(var(--gutter), calc((100vw - var(--layout-max)) / 2 + var(--gutter)));
  position: relative; overflow: hidden; color: var(--rc-text); background: var(--rc-bg);
  padding: clamp(56px, 7vw, 112px) 0; scroll-margin-top: var(--header-h);
}
.rc__inner { max-width: var(--layout-max); margin-inline: auto; padding-inline: var(--gutter); }

.rc__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-5) var(--space-7); margin-bottom: clamp(40px, 5vw, 64px); }
.rc__kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--space-3); color: var(--rc-muted);
  font: 600 var(--text-xs-size)/1 var(--font-sans); letter-spacing: var(--text-xs-tracking); text-transform: uppercase; }
.rc__live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--rc-red); color: #FFFFFF; letter-spacing: .12em; }
.rc__live[hidden] { display: none; }
.rc__dot { width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF; animation: rc-pulse 1.6s ease-in-out infinite; }
@keyframes rc-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.rc__title { margin: 0; font-family: "Archivo Poster", var(--font-sans); font-weight: 900; font-stretch: 112%;
  font-size: clamp(44px, 6.4vw, 96px); line-height: .9; text-transform: uppercase; letter-spacing: -.01em; }
.rc__title span { color: var(--rc-red); }
.rc__lede { max-width: 46ch; margin: var(--space-4) 0 0; color: var(--rc-muted); font-size: var(--text-lg-size); line-height: 1.45; }
.rc__clock { display: grid; gap: 6px; justify-items: end; text-align: right; margin: 0; }
.rc__clock-label { color: var(--rc-muted); font: 600 var(--text-xs-size)/1 var(--font-sans); letter-spacing: var(--text-xs-tracking); text-transform: uppercase; }
.rc__clock-time { font-family: "Archivo Poster", var(--font-sans); font-weight: 800; font-stretch: 100%; font-size: clamp(28px, 3vw, 40px); line-height: 1; font-variant-numeric: tabular-nums; }

/* the leaderboard heading, as in the reference: "Top 6 RISE Artists" over "This week LEADERBOARD" */
.rc-board__head { margin: 0 0 clamp(22px, 3vw, 34px); }
.rc-board__title { margin: 0; font: 400 clamp(30px, 3.4vw, 50px)/1.02 var(--font-sans); letter-spacing: -.015em; }
.rc-board__title b { font-weight: 700; }
.rc-board__sub { margin: 4px 0 0; font: 400 clamp(18px, 2vw, 28px)/1.1 var(--font-sans); letter-spacing: -.01em; }
.rc-board__word { font-family: "Archivo Poster", var(--font-sans); font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: .02em; margin-left: .25em; }

/* ---------- the bars ---------- */
.rc-board { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.6vw, 20px); }
.rc-bar {
  --h: clamp(84px, 9vw, 116px);
  --c: #DE0412;
  position: relative; isolation: isolate; overflow: hidden;
  width: var(--w, 100%); height: var(--h); background: var(--c);
  display: flex; align-items: center;
  padding-left: var(--rc-edge); padding-right: calc(var(--h) * 2.25);
  transition: width .7s cubic-bezier(.2, .8, .2, 1), background-color .7s ease;
}
.rc-bar[hidden] { display: none; }
.rc-bar[data-place="1"] { --c: #DE0412; }
.rc-bar[data-place="2"] { --c: #B47E00; }
.rc-bar[data-place="3"] { --c: #900A0C; }
.rc-bar[data-place="4"] { --c: #C2410C; }
.rc-bar[data-place="5"] { --c: #3E3E3E; }
.rc-bar[data-place="6"] { --c: #212121; }
.rc-bar[data-place="7"] { --c: #85020B; }
.rc-bar[data-place="8"] { --c: #8C6A1A; }
.rc-bar[data-place="9"] { --c: #2E2E2E; }
.rc-bar[data-place="10"] { --c: #9A4A17; }

.rc-bar__text { position: relative; z-index: 3; display: grid; gap: 6px; min-width: 0; }
.rc-bar__name { color: #FFFFFF; text-decoration: none; font: 700 clamp(19px, 2.1vw, 32px)/1.05 var(--font-sans); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 12px rgba(0, 0, 0, .18); }
.rc-bar__name:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.rc-bar__name:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.rc-bar__meta { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; color: rgba(255, 255, 255, .96); font-size: var(--text-sm-size); white-space: nowrap; }
.rc-bar__votes { font-variant-numeric: tabular-nums; }
.rc-bar__votes b { color: #FFFFFF; font-weight: 700; }
.rc-bar__move { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: #FFFFFF; }
.rc-bar__move:empty { display: none; }
.rc-bar__move svg { width: 10px; height: 10px; }
.rc-bar__mine { padding: 4px 9px; border-radius: 999px; background: #FFFFFF; color: #050505; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.rc-bar__mine[hidden] { display: none; }

/* the photo, tinted in the bar colour and fading into the bar on its left, like the reference */
.rc-bar__photo { position: absolute; z-index: 1; top: 0; bottom: 0; right: calc(var(--h) * .3); width: calc(var(--h) * 1.9); background: var(--c); isolation: isolate; transition: background-color .7s ease;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36%, #000 70%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 36%, #000 70%, transparent 100%); }
.rc-bar__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 22%; display: block;
  filter: grayscale(1) contrast(1.15) brightness(1.05); mix-blend-mode: luminosity; }

/* the big outlined number */
.rc-bar__num { position: absolute; z-index: 2; right: calc(var(--h) * .1); top: 50%; transform: translateY(-50%);
  font-family: "Archivo Poster", var(--font-sans); font-weight: 600; font-stretch: 125%; font-size: calc(var(--h) * .92); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.6px #FFFFFF; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---------- hover to vote: a glossy see through layer wipes across the whole bar in slow motion, and the word
   (VOTE, VOTED, CLOSED…) is cut out of it, so the bar's own colour and photo show through the letters.
   The layer is drawn with mix-blend-mode: screen, so its black letters become windows onto the bar.
   Moving away wipes the layer back and fades it out. The photo slowly pushes in while the layer is on. */
.rc-hit { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  margin: 0; padding: 0; border: 0; color: #000000; cursor: default; font: inherit;
  background: linear-gradient(100deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .62) 45%, rgba(255, 255, 255, .8) 100%) no-repeat 0 0 / 0% 100%;
  mix-blend-mode: screen; opacity: 0;
  transition: background-size .7s cubic-bezier(.65, 0, .35, 1), opacity .6s ease; }
/* the wipe is drawn with background-size, not clip-path, so the whole bar stays pressable at all times */
.rc-hit:not(:disabled) { cursor: pointer; }
.rc-hit::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .9) 48%, transparent 66%); transform: translateX(-100%); }
.rc-hit__big, .rc-hit__small { position: relative; pointer-events: none; color: #000000; opacity: 0; transition: opacity .6s ease, letter-spacing 1.1s cubic-bezier(.2, .8, .2, 1), transform 1.1s cubic-bezier(.2, .8, .2, 1), filter .9s ease; }
.rc-hit__big { font-family: "Archivo Poster", var(--font-sans); font-weight: 900; font-stretch: 125%; font-size: calc(var(--h, 100px) * .62); line-height: .86;
  letter-spacing: .32em; text-transform: uppercase; transform: scale(1.08); filter: blur(6px); }
.rc-hit__small { font: 800 12px/1 var(--font-sans); letter-spacing: .3em; text-transform: uppercase; transform: translateY(8px); }
.rc-bar__name, .rc-card__name { position: relative; z-index: 3; }
.rc-bar__text, .rc-card__text { transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.rc-bar__photo img, .rc-card__photo img { transition: transform 1.6s cubic-bezier(.2, .8, .2, 1), filter .9s ease; }
.rc-bar__num { transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; }

/* the layer on: hover (mouse), the armed first tap (touch), or keyboard focus */
.rc.is-live .rc-bar:hover .rc-hit, .rc.is-live .rc-card:hover .rc-hit,
.rc-hit:focus-visible, .is-armed-vote .rc-hit { opacity: 1; background-size: 100% 100%; transition: background-size 1.1s cubic-bezier(.65, 0, .35, 1), opacity .35s ease; }
.rc.is-live .rc-bar:hover .rc-hit__big, .rc.is-live .rc-card:hover .rc-hit__big, .rc-hit:focus-visible .rc-hit__big, .is-armed-vote .rc-hit__big {
  opacity: 1; letter-spacing: .06em; transform: none; filter: none; transition-delay: .25s; }
.rc.is-live .rc-bar:hover .rc-hit__small, .rc.is-live .rc-card:hover .rc-hit__small, .rc-hit:focus-visible .rc-hit__small, .is-armed-vote .rc-hit__small {
  opacity: 1; letter-spacing: .18em; transform: none; transition-delay: .45s; }
.rc.is-live .rc-bar:hover .rc-bar__text, .rc.is-live .rc-card:hover .rc-card__text, .rc-bar:has(.rc-hit:focus-visible) .rc-bar__text, .is-armed-vote .rc-bar__text, .is-armed-vote .rc-card__text { opacity: 0; transform: translateX(-16px); }
.rc.is-live .rc-bar:hover .rc-bar__photo img, .is-armed-vote .rc-bar__photo img { transform: scale(1.14) translateX(-5%); filter: grayscale(1) contrast(1.2) brightness(1.2); }
.rc.is-live .rc-card:hover .rc-card__photo img { transform: scale(1.1); }
.rc.is-live .rc-bar:hover .rc-bar__num, .is-armed-vote .rc-bar__num { transform: translate(14px, -50%); }
@media (prefers-reduced-motion: no-preference) {
  .rc.is-live .rc-bar:hover .rc-hit::after, .rc.is-live .rc-card:hover .rc-hit::after, .is-armed-vote .rc-hit::after { opacity: 1; animation: rc-hit-sheen 2.4s cubic-bezier(.65, 0, .35, 1) 1s infinite; }
}
@keyframes rc-hit-sheen { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .rc-hit, .rc-hit__big, .rc-hit__small, .rc-bar__text, .rc-card__text { transition: opacity .2s ease !important; transform: none !important; filter: none !important; }
  .rc-hit__big { letter-spacing: .06em !important; }
  .rc-bar__photo img, .rc-card__photo img, .rc-bar__num { transition: none !important; }
  .rc.is-live .rc-bar:hover .rc-bar__photo img, .rc.is-live .rc-card:hover .rc-card__photo img { transform: none; }
  .rc.is-live .rc-bar:hover .rc-bar__num { transform: translateY(-50%); }
  .rc-hit { background-size: 100% 100% !important; }
}
.rc-hit:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -6px; }
.rc-hit:active:not(:disabled) .rc-hit__big { transform: scale(.94); transition-duration: .15s; transition-delay: 0s; }
.rc-bar.is-mine, .rc-card.is-mine { box-shadow: inset 0 0 0 2px #FFFFFF; }

.rc-bar.is-flash::after, .rc-card.is-flash::after, .rc-bar.is-promoted::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: #FFFFFF; animation: rc-flash .9s ease-out forwards; }
.rc-bar.is-promoted::after { animation-duration: 1.4s; }
@keyframes rc-flash { from { opacity: .5; } to { opacity: 0; } }
.rc-plus { position: absolute; z-index: 5; top: 10px; right: 26%; color: #FFFFFF; font: 800 22px/1 var(--font-sans); pointer-events: none; animation: rc-plus 1s ease-out forwards; }
@keyframes rc-plus { from { opacity: 0; transform: translateY(8px); } 25% { opacity: 1; } to { opacity: 0; transform: translateY(-22px); } }

/* ---------- scroll reveal: each bar slides in from the left, each card rises, as it scrolls into view ---------- */
/* bars grow from the left edge like a chart bar (a wipe, so the bar never leaves its place) */
.rc.is-armed .rc-bar { clip-path: inset(0 100% 0 0); }
.rc.is-armed .rc-bar .rc-bar__text { opacity: 0; transform: translateX(-24px); }
.rc.is-armed .rc-bar .rc-bar__num { opacity: 0; transform: translate(-24px, -50%); }
.rc.is-armed .rc-bar.is-in { clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.65, 0, .25, 1), width .7s cubic-bezier(.2, .8, .2, 1), background-color .7s ease; }
.rc.is-armed .rc-bar.is-in .rc-bar__text { opacity: 1; transform: none; transition: opacity .6s ease .45s, transform .7s cubic-bezier(.2, .8, .2, 1) .45s; }
.rc.is-armed .rc-bar.is-in .rc-bar__num { opacity: 1; transform: translateY(-50%); transition: opacity .6s ease .45s, transform .7s cubic-bezier(.2, .8, .2, 1) .45s; }
.rc.is-armed .rc-card { opacity: 0; transform: translateY(26px); }
.rc.is-armed .rc-card.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }

/* ---------- Climbing the chart: places 11 and below ---------- */
.rc-rest { margin-top: clamp(40px, 5vw, 64px); }
.rc-rest[hidden] { display: none; }
.rc-rest__title { margin: 0; font-family: "Archivo Poster", var(--font-sans); font-weight: 800; font-stretch: 112%; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; text-transform: uppercase; }
.rc-rest__lede { margin: 8px 0 var(--space-5); color: var(--rc-muted); }
.rc-rest__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rc-card { --h: 84px; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 2.4ch 64px minmax(0, 1fr); align-items: center; gap: 14px;
  min-height: var(--h); padding: 10px 16px 10px 12px; background: #080808; border: 1px solid rgba(255, 255, 255, .08); }
.rc-card[hidden] { display: none; }
.rc-card__num { font-family: "Archivo Poster", var(--font-sans); font-weight: 600; font-stretch: 112%; font-size: 30px; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px #FFFFFF; text-align: right; font-variant-numeric: tabular-nums; }
.rc-card__photo img { width: 64px; height: 64px; object-fit: cover; object-position: 50% 25%; display: block; filter: grayscale(1) contrast(1.1); }
.rc-card__text { display: grid; gap: 4px; min-width: 0; }
.rc-card__name { color: #FFFFFF; text-decoration: none; font-weight: 700; font-size: 17px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-card__name:hover { text-decoration: underline; text-underline-offset: 4px; }
.rc-card__votes { display: flex; align-items: center; gap: 8px; color: var(--rc-muted); font-size: var(--text-sm-size); font-variant-numeric: tabular-nums; }
.rc-card__votes b { color: #FFFFFF; }
.rc-card .rc-hit__big { font-size: 34px; }
.rc-card__text, .rc-card__photo, .rc-card__num { transition: opacity .25s ease; }
@media (hover: hover) {
  .rc.can-vote .rc-card:hover .rc-card__text, .rc.can-vote .rc-card:hover .rc-card__photo, .rc.can-vote .rc-card:hover .rc-card__num { opacity: .12; }
}
.rc-card.is-armed-vote .rc-card__text, .rc-card.is-armed-vote .rc-card__photo, .rc-card.is-armed-vote .rc-card__num,
.rc-card:has(.rc-hit:focus-visible) .rc-card__text, .rc-card:has(.rc-hit:focus-visible) .rc-card__photo { opacity: .12; }
.rc-card .rc-hit__small { display: none; }
.rc-card:hover, .rc-card.is-armed-vote { background: #111111; }

/* ---------- foot ---------- */
.rc__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: var(--space-4) var(--space-6); margin-top: clamp(28px, 4vw, 44px); }
.rc__status { margin: 0; min-height: 1.5em; font-size: var(--text-base-size); color: var(--rc-text); }
.rc__status.is-error { color: #F1979C; }
.rc__rules { max-width: 56ch; color: var(--rc-muted); font-size: var(--text-sm-size); }
.rc__rules summary { cursor: pointer; color: var(--rc-text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.rc__rules ul { margin: var(--space-3) 0 0; padding-left: 1.1em; display: grid; gap: 6px; line-height: 1.5; }

.rc__toast { position: fixed; z-index: var(--z-toast, 90); left: 50%; bottom: 28px; transform: translate(-50%, 140%); padding: 14px 20px; background: var(--rc-red); color: #FFFFFF;
  font: 700 var(--text-base-size)/1.2 var(--font-sans); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.2, .4, 1), opacity .3s ease; pointer-events: none; }
.rc__toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ================= No. 1 on RISE: a light, magazine style feature. Red is only the accent. ================= */
.rc-one { position: relative; overflow: hidden; isolation: isolate; color: var(--c-text); background: var(--c-bg);
  padding: clamp(72px, 9vw, 140px) var(--gutter); scroll-margin-top: var(--header-h); }
.rc-one__inner { max-width: var(--layout-max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.rc-one__body { min-width: 0; }
.rc-one__media { position: relative; display: block; padding: 0 0 22px 22px; }
.rc-one__media::before { content: ""; position: absolute; left: 0; bottom: 0; width: 78%; height: 70%; background: var(--brand-red); z-index: 0; }
.rc-one__num { position: absolute; z-index: 2; left: -.06em; top: -.12em; pointer-events: none; font-family: "Archivo Poster", var(--font-sans); font-weight: 600; font-stretch: 125%;
  font-size: clamp(170px, 20vw, 320px); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--brand-red); }
.rc-one__frame { position: relative; z-index: 1; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--brand-graphite); }
.rc-one__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: 0; transition: opacity .8s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.rc-one__frame img.is-on { opacity: 1; }
.rc-one__media:hover .rc-one__frame img.is-on { transform: scale(1.03); }
.rc-one__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 var(--space-5); color: var(--c-text-muted); font: 700 var(--text-xs-size)/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; }
.rc-one__badge { padding: 8px 12px; background: var(--brand-red); color: #FFFFFF; }
.rc-one__name { margin: 0; font-family: "Archivo Poster", var(--font-sans); font-weight: 900; font-stretch: 118%;
  font-size: clamp(54px, 7.6vw, 128px); line-height: .86; text-transform: uppercase; letter-spacing: -.015em; }
.rc-one__name a { color: inherit; text-decoration: none; }
.rc-one__name a span { display: block; width: max-content; max-width: none; }
.rc-one__name a span:last-child { color: var(--brand-red); }
.rc-one__name a:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 10px; }
.rc-one__tag { margin: var(--space-5) 0 0; font: 600 var(--text-lg-size)/1.2 var(--font-sans); }
.rc-one__tag .legend-badge { margin-right: 4px; vertical-align: 2px; }
.rc-one__tag .legend-badge[hidden] { display: none; }
.rc-one__line { max-width: 46ch; margin: var(--space-3) 0 0; font-size: var(--text-lg-size); line-height: 1.5; color: var(--c-text-muted); }
.rc-one__stats { display: flex; flex-wrap: wrap; gap: var(--space-7); margin: var(--space-6) 0; padding-top: var(--space-5); border-top: 1px solid var(--c-border); }
.rc-one__stats div { display: grid; gap: 6px; }
.rc-one__stats dt { font-family: "Archivo Poster", var(--font-sans); font-weight: 800; font-stretch: 110%; font-size: clamp(40px, 4.2vw, 60px); line-height: 1; font-variant-numeric: tabular-nums; }
.rc-one__stats div:first-child dt { color: var(--brand-red); }
.rc-one__stats dd { margin: 0; font-size: var(--text-sm-size); color: var(--c-text-muted); }
.rc-one.is-new .rc-one__name { animation: rc-one-in .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rc-one-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ================= smaller screens ================= */
@media (max-width: 900px) {
  .rc-one__inner { grid-template-columns: 1fr; }
  .rc-one__media { max-width: 520px; }
}
@media (max-width: 640px) {
  .rc__clock { justify-items: start; text-align: left; }
  .rc-bar { --h: 92px; padding-right: calc(var(--h) * 1.2); }
  .rc-bar__name { font-size: 18px; }
  .rc-bar__photo { right: calc(var(--h) * .2); width: calc(var(--h) * 1.5); }
  .rc-bar__num { font-size: calc(var(--h) * .74); right: 8px; -webkit-text-stroke-width: 1.3px; }
  .rc-bar__meta { gap: 8px; font-size: 13px; }
  .rc-hit__big { font-size: 38px; }
  .rc-rest__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rc__dot, .rc-bar.is-flash::after, .rc-card.is-flash::after, .rc-bar.is-promoted::after, .rc-plus, .rc-one.is-new .rc-one__name { animation: none; }
  .rc-bar, .rc-card, .rc-one__frame img, .rc__toast, .rc-hit__big, .rc-hit__small, .rc-bar::before, .rc-card::before { transition: none; }
}

/* Narrow bars: the VOTE word sits over the name, so the name steps back while a bar is armed. */
@media (max-width: 900px) {
  .rc .rc-bar.is-armed-vote .rc-bar__text, .rc.is-armed .rc-bar.is-in.is-armed-vote .rc-bar__text { opacity: .1; transition: opacity .25s ease; }
}
.rc.can-vote .rc-card.is-armed-vote .rc-card__text, .rc.can-vote .rc-card.is-armed-vote .rc-card__photo, .rc.can-vote .rc-card.is-armed-vote .rc-card__num { opacity: .06; }
@media (hover: hover) {
  .rc.can-vote .rc-card:hover .rc-card__text, .rc.can-vote .rc-card:hover .rc-card__photo, .rc.can-vote .rc-card:hover .rc-card__num { opacity: .06; }
}

/* ================= sign in, the Voted card, the bot check ================= */
.rc-signin { margin: 0 0 var(--space-4); }
.rc-signin__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 22px 12px 16px; border: 0; border-radius: 999px; background: #FFFFFF; color: #050505; font: 700 16px/1 var(--font-sans); cursor: pointer; box-shadow: 0 0 0 0 rgba(222, 4, 18, .55); transition: transform .25s var(--motion-ease), box-shadow .25s var(--motion-ease); }
.rc-signin__btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(222, 4, 18, .55); }
.rc-signin__btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.rc-signin__btn svg { flex: none; }
.rc__signout { margin-top: var(--space-3); padding: 0; border: 0; background: none; color: var(--rc-muted); font: 500 var(--text-sm-size)/1.4 var(--font-sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.rc__signout:hover { color: var(--rc-text); }
.rc.is-busy .rc-hit { cursor: progress; }

.rc-voted { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); margin: 0 0 var(--space-5); padding: clamp(16px, 2vw, 24px); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; max-width: 560px; }
.rc-voted__ring { --p: 1; position: relative; flex: none; width: clamp(84px, 11vw, 112px); aspect-ratio: 1; border-radius: 50%; padding: 5px;
  background: conic-gradient(var(--rc-red) calc(var(--p) * 360deg), rgba(255, 255, 255, .14) 0); box-shadow: 0 0 32px rgba(222, 4, 18, .35); }
.rc-voted__ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; border: 3px solid #030303; }
.rc-voted__tick { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--rc-red); color: #FFFFFF; font: 700 16px/1 var(--font-sans); box-shadow: 0 0 0 3px #030303; }
.rc-voted__body { display: grid; gap: 4px; min-width: 0; }
.rc-voted__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--rc-muted); }
.rc-voted__name { font: 700 clamp(22px, 2.6vw, 32px)/1.05 var(--font-sans); text-transform: uppercase; letter-spacing: -0.01em; color: var(--rc-text); }
.rc-voted__next { margin-top: 6px; font-size: var(--text-sm-size); color: var(--rc-muted); }
.rc-voted__clock { display: inline-block; margin-left: 4px; font: 700 clamp(22px, 2.6vw, 30px)/1 var(--font-sans); color: var(--rc-text); font-variant-numeric: tabular-nums; letter-spacing: .02em; text-shadow: 0 0 18px rgba(239, 132, 139, .55); }
.rc-voted__change { font-size: var(--text-sm-size); color: var(--rc-muted); }
.rc-bot { margin: 0 0 var(--space-4); min-height: 0; }
.rc-bot[hidden] { display: none; }
@media (max-width: 479.98px) { .rc-voted { flex-direction: column; align-items: flex-start; } }

/* ================= Hall of Fame ================= */
.rc-hall { position: relative; overflow: hidden; background: #050505; color: #FFFFFF; padding: clamp(64px, 8vw, 128px) 0; }
.rc-hall::before { content: ""; position: absolute; inset: -30% -20% auto; height: 70%; background: radial-gradient(closest-side, rgba(222, 4, 18, .22), rgba(222, 4, 18, 0) 72%); pointer-events: none; }
.rc-hall__inner { position: relative; max-width: var(--layout-max); margin-inline: auto; padding: 0 var(--gutter); }
.rc-hall__head { margin-bottom: clamp(28px, 4vw, 52px); }
.rc-hall__kicker { margin: 0 0 8px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-red-glow, #EF848B); }
.rc-hall__title { position: relative; margin: 0; padding-bottom: 14px; font: 700 clamp(44px, 7vw, 120px)/.9 var(--font-sans); text-transform: uppercase; letter-spacing: -0.03em; }
.rc-hall__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 96px; height: 5px; background: var(--brand-red, #DE0412); }
.rc-hall__empty { margin: 0; max-width: 46ch; font-size: var(--text-lg-size); color: rgba(255, 255, 255, .72); }
.rc-hall__empty[hidden], .rc-hall__list[hidden], [data-rc-hall-hero][hidden] { display: none; }
.rc-hall__hero-link, .rc-hall__card-link { position: relative; display: grid; color: inherit; text-decoration: none; overflow: hidden; background: #030303; }
.rc-hall__hero-link { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: end; min-height: 380px; }
.rc-hall__hero-photo, .rc-hall__card-photo { display: block; overflow: hidden; }
.rc-hall__hero-photo { aspect-ratio: 4 / 5; }
.rc-hall__hero-photo img, .rc-hall__card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--motion-ease); }
.rc-hall__hero-link:hover img, .rc-hall__card-link:hover img { transform: scale(1.04); }
.rc-hall__ghost { position: absolute; z-index: 0; right: -2%; top: -6%; font: 800 clamp(160px, 28vw, 420px)/1 "Archivo Poster", var(--font-sans); font-stretch: 75%; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .14); pointer-events: none; letter-spacing: -0.04em; }
.rc-hall__body { position: relative; z-index: 1; display: grid; gap: 8px; padding: clamp(20px, 3vw, 44px); }
.rc-hall__week { justify-self: start; padding: 5px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: var(--brand-red-ink, #C40410); color: #FFFFFF; }
.rc-hall__name { font: 700 clamp(30px, 4.2vw, 68px)/.95 var(--font-sans); text-transform: uppercase; letter-spacing: -0.02em; }
.rc-hall__votes { font-size: var(--text-lg-size); color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; }
.rc-hall__times { justify-self: start; margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: #FFFFFF; color: #050505; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rc-hall__list { list-style: none; margin: clamp(20px, 3vw, 36px) 0 0; padding: 0 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 22vw, 280px); gap: clamp(12px, 1.6vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.rc-hall__card { scroll-snap-align: start; }
.rc-hall__card-photo { aspect-ratio: 3 / 4; }
.rc-hall__card .rc-hall__ghost { font-size: clamp(120px, 14vw, 200px); top: auto; bottom: 30%; right: -4%; }
.rc-hall__card .rc-hall__body { padding: 16px; gap: 4px; }
.rc-hall__card .rc-hall__name { font-size: clamp(20px, 1.8vw, 26px); }
.rc-hall__card .rc-hall__votes { font-size: var(--text-sm-size); }
@media (max-width: 799.98px) { .rc-hall__hero-link { grid-template-columns: 1fr; min-height: 0; } .rc-hall__hero-photo { aspect-ratio: 4 / 5; } }
@media (prefers-reduced-motion: reduce) { .rc-hall__hero-link:hover img, .rc-hall__card-link:hover img { transform: none; } .rc-signin__btn:hover { transform: none; } }

/* RISE hero: the champion's name over the photo (lnks-chart.js swaps photo and name when a new No. 1 is crowned) */
.up-hero__crown { position: absolute; z-index: 2; left: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); max-width: calc(100% - 32px);
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px 14px;
  background: rgba(2, 2, 2, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14); color: #FFFFFF; text-decoration: none; }
.up-hero__crown .legend-badge { margin: 0; font-size: 11px; }
.up-hero__crown-name { font-family: var(--font-brand, inherit); font-weight: 800; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.05; letter-spacing: -.01em; }
.up-hero__crown:hover .up-hero__crown-name, .up-hero__crown:focus-visible .up-hero__crown-name { text-decoration: underline; text-underline-offset: 4px; }
.up-hero__crown:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.up-hero__crown-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .78); }
.up-hero__live { position: absolute; z-index: 2; right: clamp(16px, 3vw, 32px); top: clamp(16px, 3vw, 32px); max-width: calc(100% - 32px); display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(3, 3, 3, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #FFFFFF; font-size: 13px; font-weight: 700; text-decoration: none; }
.up-hero__live[hidden] { display: none; }
.up-hero__live i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--brand-red, #DE0412); box-shadow: 0 0 0 0 rgba(222, 4, 18, .7); animation: up-live 1.8s ease-out infinite; }
.up-hero__live:hover span, .up-hero__live:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
.up-hero__live:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
@keyframes up-live { 0% { box-shadow: 0 0 0 0 rgba(222, 4, 18, .7); } 80%, 100% { box-shadow: 0 0 0 10px rgba(222, 4, 18, 0); } }
@media (prefers-reduced-motion: reduce) { .up-hero__live i { animation: none; } }
.rc-board__top { font-weight: 400; opacity: .7; }
@media (max-width: 899.98px) { .up-hero__live { top: 84px; right: 16px; left: 16px; width: max-content; margin-left: auto; font-size: 12px; } }
@media (max-width: 899.98px) { .up-hero__crown { bottom: 40px; } }

/* Seasons: the race to the chart. Artists not yet on the chart are bars without a chart number: the bar fills
   towards the right as votes come in, and the big number on the right counts down the votes still needed. */
.rc-race { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 34%); gap: clamp(20px, 3vw, 40px); align-items: start; }
.rc-race .rc-rest__grid { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; gap: 10px; }
.rc-race__panel { grid-column: 2; grid-row: 1; position: sticky; top: 96px; padding: clamp(20px, 2.4vw, 30px); border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(160deg, rgba(222, 4, 18, .22), rgba(255, 255, 255, .03) 55%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.rc-race__kicker { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #F3A0A6; }
.rc-race__big { margin: 0 0 12px; display: flex; align-items: baseline; gap: 12px; line-height: 1; }
.rc-race__big b { font-family: "Archivo Poster", var(--font-sans); font-weight: 800; font-stretch: 112%; font-size: clamp(56px, 6vw, 84px); font-variant-numeric: tabular-nums; }
.rc-race__big span { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .8); }
.rc-race__text { margin: 0 0 18px; color: rgba(255, 255, 255, .78); line-height: 1.55; }
.rc-race__facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rc-race__facts div { padding: 12px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .08); }
.rc-race__facts dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.rc-race__facts dd { margin: 6px 0 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-race__next { margin: 16px 0 0; font-weight: 700; color: #F9D5D7; }
.rc-race__next[hidden] { display: none; }

.rc-race .rc-card { --h: 88px; grid-template-columns: 64px minmax(0, 1fr) auto; background: #050505; }
.rc-race .rc-card__photo { grid-column: 1; grid-row: 1; position: relative; z-index: 2; }
.rc-race .rc-card__text { grid-column: 2; grid-row: 1; position: relative; z-index: 2; }
.rc-race .rc-card__num { grid-column: 3; grid-row: 1; position: relative; z-index: 2; display: grid; justify-items: end; font-size: 44px; color: transparent; -webkit-text-stroke: 1.4px #FFFFFF; }
.rc-race .rc-card__num::after { content: attr(data-togo); margin-top: 4px; font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; -webkit-text-stroke: 0; color: rgba(255, 255, 255, .7); }
.rc-race .rc-road { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }
.rc-race .rc-road__bar { position: absolute; inset: 0; height: auto; border-radius: 0; background: transparent; }
.rc-race .rc-road__bar i { border-radius: 0; background: linear-gradient(90deg, rgba(196, 4, 16, .55), rgba(222, 4, 18, .85)); box-shadow: 6px 0 24px rgba(236, 107, 115, .45); }
.rc-race .rc-road__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rc-race .rc-card.is-close .rc-card__num { color: #FFFFFF; -webkit-text-stroke: 0; text-shadow: 0 0 18px rgba(236, 107, 115, .9); }
.rc-race .rc-card.is-close .rc-road__bar i { background: linear-gradient(90deg, rgba(196, 4, 16, .7), #EC6B73); }
@media (prefers-reduced-motion: no-preference) { .rc-race .rc-card.is-close .rc-card__num { animation: rc-pulse 1.6s ease-in-out infinite; } }
.rc-card.is-locked { opacity: .5; }
.rc-rest.is-full .rc-rest__grid { display: none; }
.rc-board.is-empty { display: none; }
.rc-board__empty { display: none; }
@media (max-width: 899.98px) {
  .rc-race { grid-template-columns: 1fr; }
  .rc-race__panel { grid-column: 1; grid-row: 1; position: static; }
  .rc-race .rc-rest__grid { grid-row: 2; }
}
.rc-race .rc-card .rc-hit__big { font-size: 48px; }
/* hover layer: hide the name under it (placed last so it wins over the scroll reveal rules) */
.rc.is-live .rc-bar.is-in:hover .rc-bar__text, .rc.is-live .rc-bar:hover .rc-bar__text, .rc .rc-bar.is-armed-vote .rc-bar__text,
.rc.is-live .rc-card:hover .rc-card__text, .rc .rc-card.is-armed-vote .rc-card__text {
  opacity: 0; transform: translateX(-16px); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.rc-race .rc-card .rc-hit__small { display: block; font-size: 10px; }
.rc-race .rc-road__bar i { position: absolute; inset: 0; display: block; transform-origin: 0 50%; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }