/* =====================================================================
   ARTISTS: the rookie card (.rc-*), the artist page (.rk-*) and the
   roster (/artists). Built from site.css tokens, modeled on the About
   page's career card (about.css .ab-card) so the two feel like one set.
   ===================================================================== */
@property --rcx{syntax:"<percentage>"; inherits:true; initial-value:50%}
@property --rcy{syntax:"<percentage>"; inherits:true; initial-value:50%}
@property --rcang{syntax:"<angle>"; inherits:false; initial-value:0deg}

/* ---------- the card ---------- */
.rc-card{--rx:0deg; --ry:0deg; --flip:0deg; position:relative; container-type:inline-size}
.rc-card--full{--w:clamp(290px, 28vw, 400px); width:var(--w); perspective:1500px; animation:rcFloat 7s ease-in-out infinite}
.rc-card[data-flipped="true"]{--flip:180deg}
@keyframes rcFloat{50%{transform:translateY(-10px) rotate(.6deg)}}
.rc-card__inner{position:relative; aspect-ratio:5/7; transform-style:preserve-3d; transform:rotate(2.5deg) rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip))); transition:transform .75s cubic-bezier(.2,.8,.2,1); cursor:pointer}
.rc-card.is-tracking .rc-card__inner{transition:transform .25s ease-out}
/* Touch screens: ArtistEnhance turns the big card slowly on its own (uneven, never the same twice; no phone-motion tilt).
   Desktop keeps the pointer tilt. */
.rc-card__sway{transform-style:preserve-3d}
/* Gleam on Chrome / Holo / Gold / Grail cards (never Rookie): a soft band that shows the tier's holo foil texture
   (public/cards/tex, drawn by tools/artists/card-textures.py). The band moves with --gx; the texture inside it
   counter-moves so the foil stays put on the card and the light slides over it. On the artist page the band follows
   the card's turn (phones) or the pointer (desktop); CardGleam fires random sweeps on the roster and on desktop idle. */
.rc-gleam{--gx:-70cqw; position:absolute; inset:0; z-index:9; overflow:hidden; border-radius:inherit; pointer-events:none; visibility:hidden; opacity:var(--go, 0); mix-blend-mode:screen}
.rc-gleam.is-live,.rc-gleam.is-gleaming{visibility:visible}
.rc-gleam__band{position:absolute; top:0; bottom:0; left:0; width:var(--gw, 46cqw); overflow:hidden; transform-origin:0 50%; transform:translateX(var(--gx)) skewX(-16deg);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent); mask-image:linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent)}
.rc-gleam__band::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%)}
.rc-gleam__tex{position:absolute; top:0; left:0; width:100cqw; height:100%; transform-origin:0 50%; transform:skewX(16deg) translateX(calc(-1 * var(--gx))); background:center/cover no-repeat}
.rc-card[data-tier="chrome"] .rc-gleam__tex{background-image:url(/cards/tex/chrome.webp)}
.rc-card[data-tier="holo"] .rc-gleam__tex{background-image:url(/cards/tex/holo.webp)}
.rc-card[data-tier="gold"] .rc-gleam__tex{background-image:url(/cards/tex/gold.webp)}
.rc-card[data-tier="grail"] .rc-gleam__tex{background-image:url(/cards/tex/grail.webp)}
/* random sweep: CardGleam sets speed (--gd), direction (--gdir), strength (--gpk) and band width (--gw) each time */
.rc-gleam.is-gleaming{animation:rcGlOp var(--gd, 1.5s) ease-in-out both}
.rc-gleam.is-gleaming .rc-gleam__band{animation:rcGlBand var(--gd, 1.5s) cubic-bezier(.4,.1,.35,1) both; animation-direction:var(--gdir, normal)}
.rc-gleam.is-gleaming .rc-gleam__tex{animation:rcGlTex var(--gd, 1.5s) cubic-bezier(.4,.1,.35,1) both; animation-direction:var(--gdir, normal)}
@keyframes rcGlOp{0%{opacity:0} 22%,72%{opacity:var(--gpk, .85)} 100%{opacity:0}}
@keyframes rcGlBand{from{transform:translateX(-70cqw) skewX(-16deg)} to{transform:translateX(125cqw) skewX(-16deg)}}
@keyframes rcGlTex{from{transform:skewX(16deg) translateX(70cqw)} to{transform:skewX(16deg) translateX(-125cqw)}}
.rc-face{position:absolute; inset:0; border-radius:6.2cqw; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; padding:2.6cqw; isolation:isolate;
  box-shadow:0 0 0 3px var(--ink), 3cqw 3cqw 0 3px var(--ink), 0 40px 80px -30px rgba(0,0,0,.7)}
/* foil border: animated on the big card, still on the roster */
.rc-face::before{content:""; position:absolute; inset:0; z-index:-1; background:conic-gradient(from var(--rcang), var(--juice), var(--cream), var(--yellow), #8be15c, #c48bff, var(--juice-bright), var(--cream), var(--juice)); filter:saturate(1.2)}
.rc-card--full .rc-face::before{animation:rcSpinFoil 9s linear infinite}
@keyframes rcSpinFoil{to{--rcang:360deg}}
.rc-face--back{transform:rotateY(180deg)}
.rc-face__in{position:relative; height:100%; border-radius:4cqw; overflow:hidden; background:var(--ink)}

/* back */
.rc-face--back .rc-face__in{display:flex; flex-direction:column; padding:6cqw 6cqw 5cqw; color:var(--text);
  background:radial-gradient(120% 70% at 100% 0%, rgba(255,93,0,.3), transparent 60%), radial-gradient(circle at 1px 1px, rgba(255,247,238,.07) 1px, transparent 1.6px) 0 0/12px 12px, var(--ink-2)}
.rc-back__head{display:flex; align-items:center; gap:3.4cqw; padding-bottom:3.6cqw; border-bottom:1px dashed var(--line-2)}
.rc-back__head img{flex:none; width:12cqw; height:12cqw; border-radius:50%; box-shadow:0 0 0 2px var(--juice)}
.rc-back__head > div{min-width:0}
.rc-back__head .juice-type{display:block; font-size:9cqw; line-height:.9; overflow-wrap:anywhere}
.rc-back__head small{display:block; font-family:var(--font-mono); font-size:max(8.5px, 2.3cqw); font-weight:700; letter-spacing:.12em; color:var(--dim); margin-top:1.2cqw}
.rc-stats{margin:2cqw 0 0; display:grid}
.rc-stats div{display:grid; grid-template-columns:28cqw 1fr; gap:3cqw; padding:calc(2cqw * var(--bk, 1)) 0; border-bottom:1px solid var(--line)}
.rc-stats div[hidden]{display:none}
.rc-stats dt{font-family:var(--font-mono); font-size:calc(max(8.5px, 2.4cqw) * var(--bk, 1)); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--juice); padding-top:.5cqw}
.rc-stats dd{margin:0; font-size:calc(max(11px, 3.3cqw) * var(--bk, 1)); line-height:1.28; font-weight:600}
.rc-record{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:2cqw; margin-top:3.4cqw}
.rc-record div{border-radius:2.4cqw; background:rgba(255,247,238,.05); box-shadow:inset 0 0 0 1px var(--line); padding:2.2cqw 1cqw; text-align:center}
.rc-record b{display:block; font-family:var(--font-display); font-weight:400; font-size:calc(7.4cqw * var(--bk, 1)); line-height:1; color:var(--cream)}
.rc-record span{display:block; margin-top:1cqw; font-family:var(--font-mono); font-size:max(8px, 2.1cqw); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.rc-back__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:3cqw; padding-top:3cqw}
.rc-back__foot .juice-type{font-size:6.6cqw; line-height:.95}
/* ArtistEnhance: a long stat sheet that would run past the bottom drops the sign-off first */
.rc-back--tight .rc-back__foot{display:none}
.rc-seal{flex:none; width:14cqw; height:14cqw; border-radius:50%; overflow:hidden; box-shadow:0 0 0 2px var(--ink), 0 0 0 4px rgba(255,241,116,.6)}
.rc-seal svg{width:100%; height:100%; display:block}

/* ---------- rarity tiers, lanes and award patches (lib/artist-cards.ts) ----------
   Tier = the card's design: rookie → chrome → holo → gold → grail (the front section below).
   Lane = the artist's sound; it colors the rookie edge and side name, the holo glow and the grail's inner card.
   Only the big card animates, and ArtistEnhance pauses it off screen (.is-offscreen); roster cards stay still. */
[data-lane="westcoast"]{--lane:#FF5D00}
[data-lane="street"]{--lane:#A7B0BA}
[data-lane="melodic"]{--lane:#C48BFF}
[data-lane="rage"]{--lane:#8BE15C}
[data-lane="party"]{--lane:#FFF174}
[data-lane="golden"]{--lane:#E9C98A}
[data-lane="boards"]{--lane:#6FD3FF}
[data-tier="rookie"]{--tier-fill:linear-gradient(135deg, #FF5D00, #FC6C14)}
[data-tier="chrome"]{--tier-fill:linear-gradient(115deg, #6b7179, #f1f3f5 30%, #8d949c 50%, #ffffff 66%, #7b828a)}
[data-tier="holo"]{--tier-fill:linear-gradient(115deg, #FF5D00, #FFF174 30%, #8be15c 52%, #c48bff 76%, #FC6C14)}
[data-tier="gold"]{--tier-fill:linear-gradient(115deg, #8a5a00, #ffd76a 32%, #fff6cf 50%, #c9971c 72%, #7a4f00)}
[data-tier="grail"]{--tier-fill:conic-gradient(from 200deg, #ff5d00, #fff174, #8be15c, #6fd3ff, #c48bff, #ff5d9e, #ff5d00)}

/* ---------- front: one design per rarity tier (RookieCard Front) ----------
   rookie = "Ink" (photo, outlined side name, sound-color edge) · chrome = blue-steel cut-out on steel · holo = foil
   silhouette · gold = gold swirl refractor with a serial seal · grail = sealed in a graded slab. Layers, back to front:
   bg → fx → artist (.rc-cut: the cut-out, else the photo) → skin (foil printed on the artist only) → shade → text → glare.
   Only the big card animates (glare, foil); ArtistEnhance pauses it off screen (.is-offscreen). */
.rc-face__in--empty{background:radial-gradient(120% 80% at 30% 20%, var(--juice-bright), var(--juice) 45%, #b83f00 100%)}
.rc-mono{position:absolute; inset:0 0 22% 0; z-index:2; display:grid; place-items:center; font-family:var(--font-display); font-size:52cqw; line-height:1; color:transparent; -webkit-text-stroke:2px rgba(11,11,11,.55); letter-spacing:-.02em}
.rc-photo,.rc-cut{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%}
.rc-bg,.rc-fx,.rc-skin,.rc-shade,.rc-ink,.rc-glare,.rc-glass{position:absolute; inset:0; pointer-events:none}
.rc-bg{z-index:0} .rc-fx{z-index:1} .rc-cut{z-index:2}
.rc-skin{z-index:3; display:none; -webkit-mask-size:cover; mask-size:cover; -webkit-mask-position:50% 22%; mask-position:50% 22%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}
.rc-shade{z-index:4; background:linear-gradient(0deg, rgba(11,11,11,.9) 6%, rgba(11,11,11,.45) 24%, transparent 42%)}
.rc-glare{z-index:6; background:radial-gradient(circle at var(--rcx) var(--rcy), rgba(255,255,255,.4), rgba(255,255,255,.06) 28%, transparent 52%); mix-blend-mode:overlay}
.rc-card--full .rc-glare{animation:rcHolo 7s ease-in-out infinite alternate}
@keyframes rcHolo{from{--rcx:0%; --rcy:10%} to{--rcx:100%; --rcy:90%}}
.rc-card.is-tracking .rc-glare,.rc-card.is-tracking .rc-skin,.rc-card.is-tracking .rc-glass{animation:none}
.rc-card--mini .rc-glare{display:none}
.rc-plate{position:absolute; z-index:5; left:6cqw; right:6cqw; bottom:6cqw}
.rc-name{display:block; font-family:var(--font-display); font-weight:400; line-height:.86; letter-spacing:.01em; text-transform:uppercase; color:#fff; text-shadow:.6cqw .6cqw 0 var(--ink); white-space:nowrap}
.rc-role{display:block; margin-top:1.6cqw; font-family:var(--font-mono); font-size:max(8px, 2.5cqw); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#FFF7EE; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rc-serial{position:absolute; z-index:5; right:4cqw; top:4cqw; padding:.8cqw 1.8cqw; border-radius:1.2cqw; font-family:var(--font-mono); font-size:max(8px, 3cqw); font-weight:800; letter-spacing:.06em; color:var(--ink); background:#FFF7EE}
/* RC badge: tucked into the top-left corner, half on the frame */
.rc-badge{display:block; width:14cqw; filter:drop-shadow(0 .6cqw 1.2cqw rgba(0,0,0,.45))}
.rc-badge svg{display:block; width:100%; height:auto}
.rc-face > .rc-badge{position:absolute; z-index:8; left:.8cqw; top:.8cqw; width:12cqw}

/* rookie · Ink: the whole photo, name outlined down the side, thin sound-color edge */
.rc-card[data-tier="rookie"] .rc-face{padding:0}
.rc-card[data-tier="rookie"] .rc-face::before{background:var(--ink); animation:none!important}
.rc-card[data-tier="rookie"] .rc-face::after{content:""; position:absolute; inset:0; z-index:9; border-radius:inherit; box-shadow:inset 0 0 0 1cqw var(--lane); pointer-events:none}
.rc-card[data-tier="rookie"] .rc-face__in{border-radius:inherit}
.rc-photo{filter:contrast(1.08) saturate(.92)}
.rc-ink{z-index:1; background:linear-gradient(90deg, rgba(11,11,11,.85), transparent 45%), linear-gradient(0deg, rgba(11,11,11,.92), transparent 42%)}
.rc-vert{position:absolute; z-index:2; left:3.6cqw; top:5cqw; bottom:30cqw; writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--font-display); line-height:.85; text-transform:uppercase; color:transparent; -webkit-text-stroke:.45cqw var(--lane); white-space:nowrap; text-align:right; pointer-events:none}
.rc-card[data-tier="rookie"] .rc-plate{left:7cqw; right:20cqw; bottom:7cqw}
.rc-card[data-tier="rookie"] .rc-role{color:var(--lane)}
.rc-no{position:absolute; z-index:5; right:7cqw; bottom:7.4cqw; font-family:var(--font-mono); font-size:max(8px, 2.5cqw); font-weight:800; color:#FFF7EE; opacity:.75}
.rc-card[data-tier="rookie"] .rc-face > .rc-badge{left:auto; right:2.2cqw; top:2.2cqw}

/* chrome: blue-steel artist on a steel ground, silver frame */
.rc-card[data-tier="chrome"] .rc-face{padding:3.2cqw}
.rc-card[data-tier="chrome"] .rc-face::before{background:repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 3px), linear-gradient(115deg, #5d636a, #eef1f4 18%, #8d949c 32%, #fff 46%, #737a82 62%, #dfe3e7 80%, #555b62); animation:none!important}
.rc-card[data-tier="chrome"] .rc-face__in{border-radius:3cqw}
.rc-card[data-tier="chrome"] .rc-bg{background:radial-gradient(90% 65% at 50% 28%, #8a949f, #303740 68%, #161a1f)}
.rc-card[data-tier="chrome"] .rc-fx{background:repeating-radial-gradient(circle at 50% 115%, rgba(255,255,255,.12) 0 1.5px, transparent 1.5px 6px), linear-gradient(115deg, transparent 30%, rgba(255,255,255,.2) 44%, rgba(160,200,255,.16) 52%, transparent 66%)}
.rc-card[data-tier="chrome"] .rc-cut{filter:grayscale(1) contrast(1.18) brightness(1.06) drop-shadow(0 2cqw 3cqw rgba(0,0,0,.6))}
/* blue-steel tone: a steel color printed on the artist only (blend "color" keeps the photo's light and shade) */
.rc-card[data-tier="chrome"] .rc-skin{display:block; background:#5f84b0; mix-blend-mode:color; opacity:.7}
.rc-card[data-tier="chrome"] .rc-serial{background:linear-gradient(110deg, #9aa1a9, #fff 45%, #c4cad0)}

/* holo · foil silhouette: black card, the artist in rainbow foil, a sound-color glow; rainbow frame (spins on the big card) */
.rc-card[data-tier="holo"] .rc-face{padding:2.4cqw}
.rc-card[data-tier="holo"] .rc-face__in{border-radius:3cqw; background:#050407}
.rc-card[data-tier="holo"] .rc-bg{background:radial-gradient(55% 40% at 50% 32%, color-mix(in srgb, var(--lane) 30%, transparent), transparent 75%)}
.rc-card[data-tier="holo"] .rc-cut{filter:grayscale(1) contrast(1.15) brightness(.95) drop-shadow(0 0 .6cqw var(--lane)) drop-shadow(0 0 3cqw var(--lane))}
.rc-card[data-tier="holo"] .rc-skin{display:block; background:linear-gradient(125deg, #ff5d00, #fff174 18%, #8be15c 34%, #6fd3ff 52%, #c48bff 70%, #ff5d9e 86%, #ff5d00) var(--rcx) var(--rcy)/200% 200%; mix-blend-mode:color; opacity:.85}
.rc-card--full[data-tier="holo"] .rc-skin{animation:rcHolo 7s ease-in-out infinite alternate}
.rc-card[data-tier="holo"] .rc-name{background:linear-gradient(100deg, #ffb27a, #fff6a8 25%, #b9f59a 45%, #9fe3ff 65%, #e0b8ff 85%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(.5cqw .5cqw 0 #000)}
.rc-card[data-tier="holo"] .rc-serial{background:conic-gradient(from 200deg, #ff5d00, #fff174, #8be15c, #6fd3ff, #c48bff, #ff5d00)}

/* gold · "Gold refractor": the artist on a gold swirl refractor in a gold frame, serial on a foil-stamped round seal */
.rc-card[data-tier="gold"] .rc-face{padding:3.2cqw; box-shadow:0 0 0 3px var(--ink), 3cqw 3cqw 0 3px var(--ink), 0 0 50px -8px rgba(255,215,106,.55), 0 40px 80px -30px rgba(0,0,0,.7)}
.rc-card[data-tier="gold"] .rc-face::before{background:linear-gradient(135deg, #7a5410, #f9e08a 20%, #b8862a 38%, #fff3c4 50%, #a87a1e 64%, #f3d27a 80%, #6e4a0c); animation:none!important}
.rc-card[data-tier="gold"] .rc-face::after{content:""; position:absolute; inset:1.4cqw; border-radius:5cqw; box-shadow:inset 0 0 0 .3cqw rgba(60,38,0,.55); pointer-events:none}
.rc-card[data-tier="gold"] .rc-face__in{border-radius:2.6cqw; background:#140d02; box-shadow:0 0 0 .4cqw #3a2604}
/* the refractor: gold rays from behind the head, a second offset ray set multiplied over it, a warm glint behind the face */
.rc-card[data-tier="gold"] .rc-bg{background:radial-gradient(30% 22% at 50% 30%, rgba(255,250,225,.75), transparent 70%), repeating-conic-gradient(from 0deg at 50% 34%, rgba(255,236,170,.9) 0 3deg, rgba(110,72,10,.95) 3deg 7deg, rgba(255,214,110,.85) 7deg 9deg, rgba(60,36,4,.95) 9deg 13deg), #2a1a04; background-blend-mode:screen, normal, normal}
.rc-card[data-tier="gold"] .rc-fx{mix-blend-mode:multiply; background:repeating-conic-gradient(from 4deg at 54% 38%, #fff 0 4deg, rgba(90,58,8,.85) 4deg 8deg), radial-gradient(70% 50% at 50% 34%, transparent 30%, rgba(20,12,2,.85) 100%)}
.rc-card[data-tier="gold"] .rc-cut{filter:saturate(.55) contrast(1.2) brightness(1.06) drop-shadow(0 0 .5cqw #1a1002) drop-shadow(0 2cqw 4cqw rgba(0,0,0,.75))}
/* gold tone: warm gold printed on the artist only (blend "color" keeps the photo's light and shade; lighter at the top so faces stay natural) */
.rc-card[data-tier="gold"] .rc-skin{display:block; background:linear-gradient(180deg, #f2c869, #c99320 55%, #9a6a12); mix-blend-mode:color; opacity:.68}
.rc-card[data-tier="gold"] .rc-shade{background:linear-gradient(0deg, rgba(16,10,2,.96) 10%, rgba(16,10,2,.6) 28%, transparent 46%)}
.rc-card[data-tier="gold"] .rc-tag{position:absolute; z-index:5; right:2.8cqw; top:2.8cqw; padding:.8cqw 1.8cqw; border-radius:1cqw; font-family:var(--font-mono); font-size:max(7px, 2.3cqw); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#2a1a04; background:linear-gradient(135deg, #7a5410, #f9e08a 20%, #b8862a 38%, #fff3c4 50%, #a87a1e 64%, #f3d27a 80%, #6e4a0c); box-shadow:0 0 0 .3cqw #2a1a04}
.rc-card[data-tier="gold"] .rc-plate{left:3.8cqw; right:23cqw; bottom:3.8cqw}
.rc-card[data-tier="gold"] .rc-name{background:linear-gradient(180deg, #fff8dc, #f6d77a 40%, #b8862a 62%, #ffe9a8); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 .5cqw 0 #1a1002) drop-shadow(0 0 2cqw rgba(0,0,0,.6))}
.rc-card[data-tier="gold"] .rc-role{color:#f6d77a}
.rc-serialseal{position:absolute; z-index:5; right:2.3cqw; bottom:2.3cqw; width:17cqw; aspect-ratio:1; border-radius:50%; display:grid; place-content:center; text-align:center; font-family:var(--font-display); line-height:.8; color:#2a1a04;
  background:linear-gradient(135deg, #7a5410, #f9e08a 20%, #b8862a 38%, #fff3c4 50%, #a87a1e 64%, #f3d27a 80%, #6e4a0c);
  box-shadow:0 0 0 .5cqw #2a1a04, inset 0 0 0 1.2cqw rgba(255,255,255,.25), inset 0 0 0 1.5cqw rgba(60,38,0,.5), 0 1cqw 2cqw rgba(0,0,0,.6)}
.rc-serialseal b{font-weight:400; font-size:6.6cqw}
.rc-serialseal i{display:block; width:8cqw; height:.35cqw; margin:.6cqw auto; background:#2a1a04; transform:rotate(-20deg)}
.rc-serialseal small{font-size:4cqw}

/* grail · graded slab: a clear case, our own Gem Mint 10 label (Juice orange, never a real grader's look), and the
   card inside it in a gold frame on its sound color */
.rc-card[data-tier="grail"] .rc-face{padding:0; border-radius:5cqw; box-shadow:0 0 0 3px var(--ink), 3cqw 3cqw 0 3px var(--ink), 0 0 50px -8px rgba(255,93,0,.45), 0 40px 80px -30px rgba(0,0,0,.7)}
.rc-card[data-tier="grail"] .rc-face::before{background:linear-gradient(160deg, #f4f6f8, #cfd5db 55%, #e9edf0); box-shadow:inset 0 0 0 .6cqw rgba(255,255,255,.9), inset 0 0 0 1.4cqw rgba(160,170,180,.35); animation:none!important}
.rc-label{position:absolute; left:4.5cqw; right:4.5cqw; top:4.5cqw; height:23cqw; border-radius:1.4cqw; background:#fff; color:var(--ink); box-shadow:0 0 0 .8cqw var(--juice), 0 0 0 1.1cqw var(--ink)}
.rc-label > div:first-child{position:absolute; left:2.6cqw; top:2cqw; right:22cqw}
.rc-label b{display:block; font-family:var(--font-mono); font-size:1.9cqw; font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.rc-label span{display:block; margin-top:.8cqw; font-family:var(--font-display); line-height:.9; text-transform:uppercase; white-space:nowrap; overflow:hidden}
.rc-label small{display:block; margin-top:.6cqw; font-family:var(--font-mono); font-size:1.8cqw; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rc-grade{position:absolute; right:2.4cqw; top:1.6cqw; text-align:center}
.rc-grade b{display:block; font-family:var(--font-display); font-weight:400; font-size:13cqw; line-height:.85; color:var(--juice); -webkit-text-stroke:.3cqw var(--ink)}
.rc-grade small{display:block; font-family:var(--font-mono); font-size:1.8cqw; font-weight:800; letter-spacing:.1em; text-transform:uppercase}
.rc-barcode{position:absolute; right:2.6cqw; bottom:1.6cqw; width:17cqw; height:3cqw; background:repeating-linear-gradient(90deg, var(--ink) 0 .35cqw, transparent .35cqw .6cqw, var(--ink) .6cqw 1.2cqw, transparent 1.2cqw 1.5cqw)}
.rc-well{position:absolute; left:6.5cqw; right:6.5cqw; top:33cqw; bottom:6.5cqw; border-radius:2cqw; background:rgba(200,208,216,.55); box-shadow:inset 0 .5cqw 1.4cqw rgba(0,0,0,.25); display:grid; place-items:center}
.rc-well .rc-face__in{height:96%; aspect-ratio:5/7; border-radius:1.8cqw; background:linear-gradient(135deg, #7a5410, #f9e08a 20%, #b8862a 38%, #fff3c4 50%, #a87a1e 64%, #f3d27a 80%, #6e4a0c); box-shadow:0 1cqw 2.4cqw rgba(0,0,0,.35)}
.rc-well .rc-bg,.rc-well .rc-cut,.rc-well .rc-shade,.rc-well .rc-mono{inset:1.8cqw; width:calc(100% - 3.6cqw); height:calc(100% - 3.6cqw); border-radius:1.2cqw}
.rc-well .rc-bg{background:radial-gradient(70% 55% at 50% 35%, color-mix(in srgb, var(--lane) 70%, #fff), color-mix(in srgb, var(--lane) 45%, #000) 80%)}
.rc-well .rc-cut{filter:drop-shadow(0 1.4cqw 2cqw rgba(0,0,0,.5))}
.rc-well .rc-name{position:absolute; z-index:5; left:5cqw; right:5cqw; bottom:4.5cqw}
.rc-well .rc-badge{position:absolute; z-index:6; left:.8cqw; top:.8cqw; width:9cqw}
.rc-glass{z-index:9; border-radius:inherit; background:linear-gradient(118deg, transparent 18%, rgba(255,255,255,.5) 24%, transparent 32%, transparent 62%, rgba(255,255,255,.28) 68%, transparent 74%) var(--rcx) 0/220% 100%}
.rc-card--full .rc-glass{animation:rcHolo 7s ease-in-out infinite alternate}
.rc-card--mini[data-tier="gold"] .rc-face{box-shadow:0 0 0 3px var(--ink), 2.4cqw 2.4cqw 0 3px var(--ink), 0 0 34px -6px rgba(255,215,106,.5)}
.rc-card--mini[data-tier="grail"] .rc-face{box-shadow:0 0 0 3px var(--ink), 2.4cqw 2.4cqw 0 3px var(--ink), 0 0 34px -6px rgba(255,93,0,.5)}

/* award patch (artist page "The card" box); size = font-size of its parent */
.rc-patch{flex:none; display:grid; place-items:center; width:1em; height:1em; background:var(--ink); clip-path:var(--clip, none); border-radius:var(--rad, 0)}
.rc-patch--circle{--rad:50%}
.rc-patch__in{display:grid; place-items:center; width:84%; height:84%; clip-path:var(--clip, none); border-radius:var(--rad, 0); background:var(--tone); color:var(--tone-ink, var(--ink))}
.rc-patch--diamond .rc-patch__in,.rc-patch--star .rc-patch__in{width:86%; height:86%}
.rc-patch b{font-family:var(--font-display); font-weight:400; line-height:1; letter-spacing:.01em; font-size:.46em; white-space:nowrap; transform:translateY(.04em)}
.rc-patch[data-len="3"] b{font-size:.36em}
.rc-patch[data-len="4"] b{font-size:.29em}
.rc-patch[data-len="5"] b{font-size:.24em}
.rc-patch--diamond b{font-size:.3em!important}
.rc-patch--diamond[data-len="5"] b{font-size:.2em!important}
.rc-patch--shield b{transform:translateY(-.04em)}
.rc-patch[data-tone="juice"]{--tone:var(--juice)}
.rc-patch[data-tone="gold"]{--tone:linear-gradient(135deg, #8a5a00, #ffd76a 35%, #fff6cf 52%, #c9971c 72%, #7a4f00)}
.rc-patch[data-tone="prizm"]{--tone:conic-gradient(from 200deg, #ff5d00, #fff174, #8be15c, #6fd3ff, #c48bff, #ff5d9e, #ff5d00)}
.rc-patch[data-tone="cream"]{--tone:#FFF7EE}
.rc-patch[data-tone="ink"]{--tone:var(--ink); --tone-ink:var(--juice); background:var(--juice)}
.rc-patch[data-tone="leaf"]{--tone:#8BE15C}
.rc-patch[data-tone="ice"]{--tone:#6FD3FF}
.rc-patch[data-tone="violet"]{--tone:#C48BFF}

/* back: tier pill + lane */
.rc-tierline{display:flex; align-items:center; justify-content:space-between; gap:2cqw; margin-top:3cqw; font-family:var(--font-mono); font-size:max(8px, 2.3cqw); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.rc-tierpill,.rk-slot__tier{display:inline-block; padding:.35em .9em; border-radius:99px; background:var(--tier-fill); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(11,11,11,.35)}
.rc-card[data-tier="rookie"] .rc-tierpill,.rk-slot__tier[data-tier="rookie"]{background:var(--ink-4); color:var(--text)}

/* roster: rarity legend + tier on each slot */
.rk-tiers{display:flex; gap:8px; margin:0 calc(var(--gutter) * -1) 14px; padding:2px var(--gutter); list-style:none; overflow-x:auto; scrollbar-width:none}
.rk-tiers button{flex:none; display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 8px; border:0; border-radius:99px; background:var(--ink-3); color:var(--text); box-shadow:inset 0 0 0 1px var(--line); font:500 13px/1.2 var(--font-body); cursor:pointer}
.rk-tiers button[aria-pressed="true"]{background:var(--juice); color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink)}
.rk-tiers button[aria-pressed="true"] span{color:var(--ink)}
.rk-none{margin:0 0 clamp(22px, 3vw, 34px)}
.rk-tiers i{width:16px; height:22px; border-radius:4px; background:var(--tier-fill); box-shadow:0 0 0 2px var(--ink), 0 0 0 3px rgba(255,247,238,.18)}
.rk-tiers b{font-weight:800}
.rk-tiers span{font-family:var(--font-mono); font-size:11px; color:var(--dim)}
.rk-slot__tier{padding:3px 8px; font-size:10px; letter-spacing:.1em}

/* artist page: The card (tier, lane, every award explained) */
.rk-trophies__tier{margin:8px 0 2px; font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.rk-trophies__tier b{display:inline-block; padding:3px 10px; border-radius:99px; background:var(--tier-fill); color:var(--ink)}
.rk-trophies[data-tier="rookie"] .rk-trophies__tier b{background:var(--juice)}
.rk-trophies__tier small{display:block; margin-top:8px; font-family:var(--font-body); font-size:13.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--dim)}
.rk-trophies li{grid-template-columns:44px minmax(0,1fr)!important; align-items:center!important}
.rk-trophies .rc-patch{font-size:44px}
.rk-trophies li > span > b{font-family:var(--font-body)!important; font-size:15px!important; font-weight:800; color:var(--text)!important; display:block}
.rk-trophies li > span > small{display:block; color:var(--dim); font-size:13px}
.rk-trophies__none{margin-top:10px; font-size:14px; color:var(--dim)}

/* ---------- artist page ---------- */
.rk-hero{padding:clamp(36px, 5vw, 72px) 0 clamp(60px, 7vw, 100px)}
.rk-hero::after{content:attr(data-ghost); position:absolute; z-index:-1; right:-2vw; bottom:-.16em; max-width:110vw; overflow:hidden; white-space:nowrap; font-family:var(--font-display); font-size:clamp(160px, 26vw, 420px); line-height:1; color:transparent; -webkit-text-stroke:3px rgba(11,11,11,.12); pointer-events:none}
.rk-hero__grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); grid-template-areas:"head card" "foot card"; grid-template-rows:1fr 1fr; column-gap:clamp(32px, 5vw, 80px)}
/* head + foot are one block beside the card on desktop; on phones the card sits between them (above the IG/listen buttons) */
.rk-hero__head{grid-area:head; align-self:end}
.rk-hero__foot{grid-area:foot; align-self:start; min-width:0}
.rk-card-zone{grid-area:card; align-self:center}
.rk-hero .crumbs ol{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:8px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--on-orange-muted)}
.rk-hero .crumbs li + li::before{content:"/"; margin-right:8px; opacity:.5}
.rk-hero .crumbs a{text-decoration:underline; text-underline-offset:3px}
.rk-hero .crumbs a[aria-current]{text-decoration:none}
.rk-hero__head{container-type:inline-size; min-width:0}
/* Long one-word names (DREXTHEJOINT, FORTYFRMDAH514D) shrink to fit the column instead of breaking mid-word. */
h1.rk-h1.jt-hero{margin:0; font-size:min(clamp(64px, 9vw, 150px), calc(100cqw / (var(--fit, 8) * .5))); overflow-wrap:anywhere}
.rk-id{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.5em}
.rk-id > span::before{content:"·"; margin-right:.5em; opacity:.55}
.rk-id > .rk-id__members{flex-basis:100%; font-size:.85em}
.rk-id > .rk-id__members::before{content:none}
.rk-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); gap:8px; max-width:560px; margin:26px 0 0}
.rk-stats > div{padding:10px 12px 11px; border-radius:10px; background:var(--ink); color:var(--cream)}
.rk-stats dt{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.rk-stats [data-tier] dt::before{content:""; width:9px; height:12px; border-radius:2px; background:var(--tier-fill)}
.rk-stats dd{margin:5px 0 0; font-size:17px; font-weight:800; line-height:1.1}
.rk-act__t{overflow:hidden; text-overflow:ellipsis}
.rk-hero__foot .rk-stats ~ .rk-acts{margin-top:14px}
.rk-aka{margin-top:14px; font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--on-orange-muted)}
.rk-hero .hero-band__sub{max-width:42ch; font-size:clamp(17px, 1.6vw, 21px)}
.rk-acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.rk-meta{margin-top:24px; font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--on-orange-muted)}
.rk-verified{display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:3px 9px; border-radius:99px; background:var(--ink); color:var(--cream)}
.rk-card-zone{display:flex; flex-direction:column; align-items:center; gap:30px}
.rk-flip{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center}
.rk-flip .btn svg{transition:transform .5s var(--ease)}
.rk-flip .btn[aria-pressed="true"] svg{transform:rotate(180deg)}
.rk-flip__hint{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--on-orange-muted)}

.rk-band{background:#000; border-top:3px solid var(--ink); padding:clamp(22px, 3vw, 34px) 0}
.rk-band .proof{margin:0}
.rk-band .proof small{display:block; margin-top:4px; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
/* Phones only: wider screens already show these numbers in the hero tiles and the side column's "By the numbers". */
@media (min-width:761px){.rk-band{display:none}}
/* The two file columns are tall, so the site's reveal (done at 55% of the element's height in view) finished far too
   late. These finish after a fixed 240px of scroll instead. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rk-file__main[data-reveal],.rk-side[data-reveal]{animation-range:entry 0% entry 240px}
  }
}

.rk-file{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px, 3.4vw, 44px) clamp(36px, 5.6vw, 88px); align-items:start}
.rk-file > .sec-head{grid-column:1 / -1; margin-bottom:0}
.rk-file__main{min-width:0}
.rk-bio{font-size:17px; color:var(--muted); max-width:62ch}
.rk-bio p + p{margin-top:14px}
.rk-bio b,.rk-bio strong{color:var(--text)}
.rk-scout{margin:30px 0 0; padding:22px 24px; border-radius:var(--r); background:var(--juice); color:var(--ink); box-shadow:4px 4px 0 var(--ink), 0 0 0 3px var(--ink); max-width:56ch}
.rk-scout .kicker{color:var(--ink)}
.rk-scout p{margin-top:8px; font-family:var(--font-display); font-size:clamp(26px, 2.4vw, 34px); line-height:1.02; text-transform:uppercase}
.rk-side{display:flex; flex-direction:column; gap:var(--gap); position:sticky; top:calc(var(--hdr-t) + 28px)}
.rk-liner{border-radius:var(--r); background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); padding:20px 22px}
.rk-liner h3{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:6px}
.rk-liner ol,.rk-liner ul{list-style:none; margin:0; padding:0}
.rk-liner li{display:grid; grid-template-columns:62px minmax(0,1fr); gap:14px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px}
.rk-liner li:last-child{border-bottom:0; padding-bottom:0}
.rk-liner li > b{font-family:var(--font-display); font-weight:400; font-size:24px; line-height:1; color:var(--cream)}
.rk-liner li i{color:var(--dim); font-style:normal; text-transform:capitalize}
.rk-liner a{text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px}
.rk-liner a:hover{text-decoration-color:var(--juice)}
.rk-stat-li{grid-template-columns:minmax(0,1fr) auto!important}
.rk-stat-li b{font-size:22px!important; color:var(--juice)!important}
.rk-stat-li small{display:block; color:var(--dim); font-size:12px}
.rk-links{display:flex; flex-wrap:wrap; gap:10px}

/* listen + watch + press, under the bio */
.rk-block{margin-top:clamp(40px, 4.4vw, 60px)}
.rk-block__h{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin-bottom:18px; font-family:var(--font-display); font-weight:400; font-size:clamp(28px, 2.6vw, 38px); line-height:1; text-transform:uppercase; color:var(--text)}
.rk-player{border-radius:14px; overflow:hidden; background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line)}
.rk-player iframe{display:block; width:100%; border:0}
.rk-watch{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 18px}
.rk-watch__lead{grid-column:1 / -1}
.rk-watch__lead .video-card__title{font-family:var(--font-display); font-weight:400; font-size:clamp(24px, 2.2vw, 30px); line-height:.98; text-transform:uppercase}
.rk-watch .video-card__thumb::before{opacity:1; transform:scale(1)}
.rk-watch .video-card:not(.rk-watch__lead) .video-card__thumb::before{width:44px; height:44px; margin:-22px 0 0 -22px; background-size:20px}
.rk-watch .story-card__kicker{margin:0}
/* On Juice: our own reels of the artist (portrait clip player). Covers carry a burned-in banner on the bottom third,
   so the tile shows the photo only (image 158% tall from the top, as on phone story rows). Rows that would run past
   the side column are hidden by ArtistEnhance on desktop; phones show two rows. */
.rk-clips{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px 16px}
.rk-clips > li[hidden]{display:none}
.rk-clip{display:flex; flex-direction:column; gap:6px; color:var(--text)}
.rk-clip__media{position:relative; display:block; aspect-ratio:4/5; border-radius:14px; overflow:hidden; background:var(--ink-4); box-shadow:inset 0 0 0 1px var(--line); margin-bottom:6px; transition:box-shadow .25s}
.rk-clip__media img{position:absolute; left:0; top:0; width:100%; height:158%; object-fit:cover; object-position:50% 0; transition:transform .5s var(--ease)}
.rk-clip__media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(11,11,11,.6))}
.rk-clip .clip-play{width:46px; height:46px}
.rk-clip .clip-dur{left:auto; right:10px; bottom:10px}
.rk-clip:hover .rk-clip__media{box-shadow:0 0 0 2px var(--juice), 0 18px 44px -18px rgba(255,93,0,.85)}
.rk-clip:hover .rk-clip__media img{transform:scale(1.05)}
.rk-clip:hover .clip-play{transform:scale(1.08)}
.rk-clip.is-watched .clip-play{background:var(--paper)}
.rk-clip small{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--juice)}
.rk-clip b{font-size:14.5px; font-weight:650; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rk-clip:hover b{color:var(--cream)}

/* In the press: last on the page, one tight row per article (outlet | headline | date ↗), opens in a new tab. */
.rk-block--press{margin-top:clamp(32px, 3.4vw, 44px)}
.rk-block--press .rk-block__h{font-size:clamp(22px, 2vw, 28px); margin-bottom:8px}
.rk-press{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.rk-press li{border-bottom:1px solid var(--line)}
.rk-press a{display:grid; grid-template-columns:minmax(96px, 150px) minmax(0, 1fr) auto; align-items:baseline; gap:4px 16px; padding:10px 2px; transition:color .15s}
.rk-press span{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--juice); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rk-press b{font-size:14.5px; font-weight:600; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rk-press small{grid-column:-2; color:var(--dim); font-size:12px; white-space:nowrap}
.rk-press small::after{content:" ↗"; color:var(--dim)}
.rk-press a:hover b{color:var(--juice)}

.rk-claim{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 40px; align-items:center}
.rk-claim p{max-width:58ch; margin-top:12px; font-size:17px}
.rk-claim p.rk-claim__own{font-size:14px; margin-top:10px}
.rk-claim__own a{text-decoration:underline; text-underline-offset:3px; font-weight:700}
.rk-claim ul{margin:16px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; font-weight:700; font-size:15px}
.rk-claim li::before{content:"✓ "; color:var(--ink)}
.rk-sources{margin-top:28px; font-size:12.5px; color:var(--dim)}
.rk-sources summary{cursor:pointer; font-family:var(--font-mono); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:11px}
.rk-sources ol{margin:10px 0 0; padding-left:18px; display:grid; gap:4px; overflow-wrap:anywhere}
.rk-sources a{text-decoration:underline; text-underline-offset:2px}

/* ---------- roster (/artists) ---------- */
.rk-filter{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--gutter) * -1) clamp(22px, 3vw, 34px); padding:2px var(--gutter)}
.rk-chip{flex:none; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:99px; border:0; background:var(--ink-3); color:var(--text); box-shadow:inset 0 0 0 1px var(--line); font:700 13px/1 var(--font-body); cursor:pointer}
.rk-chip span{font-family:var(--font-mono); font-size:11px; color:var(--dim)}
.rk-chip[aria-pressed="true"]{background:var(--juice); color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink)}
.rk-chip[aria-pressed="true"] span{color:var(--ink)}
.rk-roster{margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap:clamp(18px, 2.4vw, 30px) clamp(14px, 2vw, 26px)}
.rk-roster > li{list-style:none}
.rk-roster > li[hidden]{display:none}
.rk-groups{display:grid; gap:clamp(40px, 5vw, 64px)}
.rk-group[hidden]{display:none}
.rk-group__head{display:flex; align-items:center; gap:10px; margin:0 0 clamp(16px, 2vw, 22px); font:800 13px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text)}
.rk-group__head i{width:14px; height:20px; border-radius:3px; background:var(--tier-fill); box-shadow:0 0 0 2px var(--ink), 0 0 0 3px rgba(255,247,238,.18)}
.rk-group__head span{color:var(--dim); font-weight:700}
.rk-slot{display:block; border-radius:12px; outline-offset:6px}
.rk-slot .rc-card{transition:transform .35s var(--ease)}
.rk-slot:hover .rc-card,.rk-slot:focus-visible .rc-card{transform:translateY(-6px) rotate(-1.2deg)}
.rk-slot .rc-face{box-shadow:0 0 0 3px var(--ink), 2.4cqw 2.4cqw 0 3px var(--ink)}
.rk-slot .rc-card--mini{aspect-ratio:5/7}
.rk-slot__meta{display:flex; justify-content:space-between; gap:8px; margin-top:12px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)}

@media (max-width:980px){
  .rk-file{grid-template-columns:1fr}
  /* Medium widths keep the desktop pairing (name, stats, buttons left; card right) with a smaller card, so nothing
     floats alone in one column. Phones stack it below 760. */
  .rk-hero__grid{grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(28px, 4vw, 44px)}
  .rc-card--full{--w:clamp(250px, 31vw, 300px)}
  .rk-card-zone{gap:22px}
  .rk-flip__hint{display:none}
  .rk-stats{grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:22px}
  .rk-stats > div:last-child:nth-child(odd){grid-column:1 / -1}
  .rk-acts{margin-top:22px}
  .rk-hero__foot .rk-stats ~ .rk-acts{margin-top:12px}
  .rk-clips > li:nth-child(n+7){display:none}
  .rk-side{position:static}
  /* Stacked: the card's awards and "Known for" come first, then "Who is …?" and the bio, then the rest of the side column. */
  .rk-file{display:flex; flex-direction:column; align-items:stretch; gap:var(--gap)}
  .rk-side{display:contents}
  .rk-side > .rk-liner{order:1}
  .rk-side > .rk-liner--top{order:-1}
  .rk-file > .sec-head{margin-top:clamp(24px, 5vw, 40px)}
  .rk-file__main{margin-bottom:clamp(16px, 4vw, 28px)}
}
@media (max-width:760px){
  .rk-hero::after{font-size:58vw; bottom:auto; top:40%}
  h1.rk-h1.jt-hero{font-size:min(clamp(62px, 21vw, 92px), calc(100cqw / (var(--fit, 8) * .5)))}
  .rk-acts .btn{flex:1}
  .rk-press a{grid-template-columns:minmax(0, 1fr) auto; padding:9px 0}
  .rk-press b{grid-column:1 / -1; grid-row:2; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:14px}
  .rc-card--full{--w:min(318px, 84vw)}
  .rk-hero__grid{grid-template-columns:1fr; grid-template-areas:"head" "card" "foot"; grid-template-rows:auto}
  .rk-hero__foot .rk-acts{margin-top:0}
  .rk-stats{margin-top:0}
  /* Hero, card first: tighter head, the card right after it, details as 2x2 tiles, both buttons on one row. */
  .rk-hero{padding:22px 0 40px}
  .rk-hero__grid{row-gap:22px}
  .rk-hero .crumbs ol{margin-bottom:12px}
  h1.rk-h1.jt-hero{font-size:min(clamp(50px, 15.5vw, 66px), calc(100cqw / (var(--fit, 8) * .5)))}
  .rk-hero .hero-band__sub{margin-top:10px; font-size:16px}
  .rk-card-zone{position:relative; gap:0; padding-bottom:6px}
  .rk-flip{position:absolute; right:0; bottom:-8px; z-index:6}
  .rk-flip .btn{width:50px; height:50px; padding:0; box-shadow:0 0 0 3px var(--juice)}
  .rk-flip .btn svg{width:20px; height:20px}
  .rk-flip [data-rc-flip-label]{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  .rk-flip__hint{display:none}
  .rk-stats{grid-template-columns:repeat(2, minmax(0,1fr))}
  .rk-stats > div:last-child:nth-child(odd){grid-column:1 / -1}
  .rk-acts{flex-wrap:nowrap}
  .rk-acts .btn{flex:1 1 0; min-width:0; padding:15px 12px; font-size:15px}
  .rk-act__on{display:none}
  .rk-claim{grid-template-columns:1fr}
  .rk-watch{gap:20px 12px}
  .rk-clips{grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 12px}
  .rk-clips > li:nth-child(n+5){display:none}
  .rk-clip b{font-size:13.5px}
  .rk-watch .video-card__title{font-size:14px}
  .rk-watch__lead .video-card__title{font-size:24px}
  .rk-roster{grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 12px}
  /* A tier group with an odd number of cards (counting only the ones the filters leave showing): its top card, the
     tier's best-ranked, takes the whole row at the same 5:7 shape, and the rest pair up under it. */
  .rk-roster > li:nth-child(1 of :not([hidden])):nth-last-child(odd of :not([hidden])){grid-column:1 / -1}
  .rk-roster > li:nth-child(1 of :not([hidden])):nth-last-child(odd of :not([hidden])) .rk-slot__meta{font-size:11px}
  .rk-slot__meta{font-size:10px}
  .rk-tiers{gap:12px}
  .rk-tiers button{padding:6px 10px 6px 6px; gap:6px; background:none; box-shadow:none; font-size:12.5px}
  .rk-tiers i{width:12px; height:17px}
  .rk-tiers span{display:none}
}
@media (prefers-reduced-motion: reduce){
  .rc-card__inner{transform:rotate(2.5deg)!important}
  .rc-face--back{transform:none; opacity:0}
  .rc-card[data-flipped="true"] .rc-face--back{opacity:1}
  .rc-card[data-flipped="true"] .rc-face--front{opacity:0}
  .rc-card--full,.rc-card--full .rc-face::before,.rc-card--full .rc-glare,.rc-card--full .rc-skin,.rc-card--full .rc-glass{animation:none}
  .rc-gleam{display:none}
}