/* r11 · 17.10: the opening (round 3). The stage photo and the headline, then one real iPhone: the Discover feed (three
   full-screen cards; the first is the page photo, pixel for pixel), a swipe, a swipe, a tap, and Jann's artist page pushed in
   from the right, which the page then scrolls through.
   Geometry: --u is one point of the 390 × 844 screen in CSS px (set by r11-hero.js); every length inside the phone is
   calc(N * var(--u)). The body is the SVG drawn to scale (band 417.3 × 871.3, screen inset 13.65, band radius 63 → screen
   radius 49.35, concentric with the glass).
   Motion: one pinned scene, scroll-driven, transform/opacity only; the only time-based things are inside the phone
   (the card videos, the Going press, the tap, the friends row). */

.h11 { position: relative; height: 720vh; }
.h11-vp { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); --u: .8px; }

/* 1 · the first frame: photo, headline, credit */
.h11-first { position: absolute; inset: 0; }
.h11-bg { position: absolute; left: 0; top: 0; max-width: none; will-change: transform, opacity; }   /* size, place and origin (the face) come from r11-hero.js */
.h11-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10,10,11,.94) 0, rgba(10,10,11,.6) 38%, rgba(10,10,11,0) 64%), linear-gradient(0deg, rgba(10,10,11,.95) 0, rgba(10,10,11,0) 34%); }
.h11-copy { position: absolute; left: var(--gut); top: clamp(120px, 22vh, 200px); width: min(640px, calc(100% - 2 * var(--gut))); will-change: transform, opacity; }
.h11-copy .cap { color: var(--paper); margin-bottom: 26px; }
.h11-copy h1 { font-weight: 850; font-size: clamp(44px, 6.6vw, 96px); line-height: .93; letter-spacing: -0.042em; }
.h11-copy h1 .lime { display: block; }
.h11-copy p { margin-top: 26px; max-width: 520px; font-size: clamp(15.5px, 1.4vw, 20px); line-height: 1.42; color: rgba(247,246,241,.86); }
.h11-copy .acts { margin-top: 30px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.h11-copy .hint, .h11-end .hint { font-size: 13px; color: var(--mute); max-width: 220px; line-height: 1.35; }
.h11-credit { position: absolute; left: var(--gut); bottom: 52px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: rgba(247,246,241,.6); }
.h11 .scroll-cue { transition: none; }

/* 2 · the phone */
.h11-phone { position: absolute; left: 50%; top: 50%; width: calc(417.3 * var(--u)); height: calc(871.3 * var(--u)); margin: calc(-435.65 * var(--u) - 3vh) 0 0 calc(-208.65 * var(--u)); opacity: 0; transform: translate3d(0, 8vh, 0) scale(.86); will-change: transform, opacity; }
.h11-body { position: absolute; inset: 0; }
.h11-body::before { content: ""; position: absolute; inset: 0; border-radius: calc(63 * var(--u)); box-shadow: 0 calc(40 * var(--u)) calc(90 * var(--u)) calc(-10 * var(--u)) rgba(0,0,0,.75), 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.4); }
.h11-body.nudge { animation: h11-nudge .18s ease-in-out 1; }
@keyframes h11-nudge { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0, 2px, 0); } 100% { transform: translate3d(0,0,0); } }
.h11-frame { position: absolute; left: calc(-6 * var(--u)); top: calc(-6 * var(--u)); width: calc(429.3 * var(--u)); height: calc(883.3 * var(--u)); max-width: none; pointer-events: none; user-select: none; -webkit-user-select: none; }
.h11-scr { position: absolute; left: calc(13.65 * var(--u)); top: calc(13.65 * var(--u)); width: calc(390 * var(--u)); height: calc(844 * var(--u)); border-radius: calc(49.35 * var(--u)); overflow: hidden; background: #0B0B0D; isolation: isolate; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); font-family: var(--f); color: #F4F2F8; letter-spacing: 0; line-height: 1.25; }
.h11-scr img, .h11-scr video { max-width: none; user-select: none; -webkit-user-select: none; }
.h11-scr::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); z-index: 20; }

/* shared chrome: status bar, island */
.h11-sb { position: absolute; left: 0; right: 0; top: 0; height: calc(59 * var(--u)); color: #F4F2F8; pointer-events: none; font-variant-numeric: tabular-nums; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; z-index: 12; }
.h11-sb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(90 * var(--u)); background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0)); }
.h11-sb .sb-time { position: absolute; left: calc(40 * var(--u)); top: calc(21 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 600; letter-spacing: -.01em; }
.h11-sb .sb-ic { position: absolute; right: calc(36 * var(--u)); top: calc(25 * var(--u)); height: calc(12 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); fill: currentColor; }
.h11-sb svg { display: block; height: calc(12 * var(--u)); width: auto; }
.h11-sb .sb-wifi { height: calc(11.5 * var(--u)); }
.h11-sb .sb-bat { height: calc(13 * var(--u)); }
.h11-di { position: absolute; left: 50%; top: calc(11 * var(--u)); width: calc(126 * var(--u)); height: calc(37.33 * var(--u)); margin-left: calc(-63 * var(--u)); border-radius: 999px; background: #000; z-index: 13; }

/* the tab bar (HTML, both screens): Discover active in the feed, Line-up on the artist page */
.h11-tab { position: absolute; left: 0; right: 0; bottom: 0; height: calc(83.67 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)) 0; display: flex; justify-content: space-between; background: rgba(14,11,17,.94); border-top: 1px solid rgba(255,255,255,.08); z-index: 5; }
.h11-tab::after { content: ""; position: absolute; left: 50%; bottom: calc(8 * var(--u)); width: calc(134 * var(--u)); height: calc(5 * var(--u)); margin-left: calc(-67 * var(--u)); border-radius: 999px; background: #fff; }
.h11-tab span { position: relative; width: calc(76 * var(--u)); display: grid; justify-items: center; gap: calc(5 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; color: rgba(244,242,248,.62); }
.h11-tab svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); display: block; }
.h11-tab[data-active="discover"] span:nth-child(1), .h11-tab[data-active="lineup"] span:nth-child(2) { color: #A99AF3; }
.h11-tab .h11-me b { position: absolute; left: 50%; top: calc(-5 * var(--u)); margin-left: calc(5 * var(--u)); min-width: calc(17 * var(--u)); height: calc(17 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: 999px; background: #E5484D; color: #fff; font-size: calc(11 * var(--u)); font-weight: 700; line-height: calc(17 * var(--u)); text-align: center; }

/* 3 · Discover: three full-screen cards in a column, moved by translateY; the dim is the push's backdrop */
.h11-disc { position: absolute; inset: 0; background: #0B0B0D; will-change: transform; }
.h11-cards { position: absolute; left: 0; top: 0; width: calc(390 * var(--u)); will-change: transform; }
.h11-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 6; }
.h11-card { position: relative; width: calc(390 * var(--u)); height: calc(844 * var(--u)); overflow: hidden; background: #0B0B0D; }
.h11-card.tap { animation: h11-tap .24s cubic-bezier(.2,.7,.2,1) 1; }
@keyframes h11-tap { 0% { transform: scale(1); } 50% { transform: scale(.985); } 100% { transform: scale(1); } }
.h11-cbg { position: absolute; inset: 0; overflow: hidden; }
.h11-cbg video, .h11-cbg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h11-cbg.kb > img { animation: h11-kb 8s ease-in-out infinite alternate; transform-origin: 50% 35%; }   /* a still clip: slow push-in, transform only */
@keyframes h11-kb { from { transform: scale(1); } to { transform: scale(1.04); } }
.h11-cbg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(150 * var(--u)); background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.h11-cbg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(420 * var(--u)); background: linear-gradient(180deg, rgba(11,11,13,0), rgba(11,11,13,.55) 45%, rgba(11,11,13,.92) 100%); }
/* card 1: the page photo, anchored pixel for pixel (r11-hero.js); the slow push-in starts when the phone stands */
.h11-art { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.h11-kb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.h11-kb.live { animation: h11-kb 8s ease-in-out infinite alternate; }
.h11-art img { position: absolute; left: 0; top: 0; display: block; max-width: none; }
.h11-cui { position: absolute; inset: 0; }
.h11-card:first-child .h11-cui { opacity: 0; }                       /* fades in once the phone stands, so the photo match is clean */
.h11-ctop { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(56 * var(--u)); height: calc(44 * var(--u)); display: flex; align-items: center; }
.h11-snd { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: rgba(40,34,44,.72); display: grid; justify-items: center; align-content: center; gap: 0; font-size: calc(9 * var(--u)); font-weight: 700; line-height: 1; }
.h11-snd svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); display: block; }
.h11-tabs { flex: 1; display: flex; justify-content: center; gap: calc(34 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; color: rgba(244,242,248,.82); }
.h11-tabs b { position: relative; color: #fff; font-weight: 700; }
.h11-tabs b::after { content: ""; position: absolute; left: 50%; bottom: calc(-9 * var(--u)); width: calc(26 * var(--u)); height: calc(3 * var(--u)); margin-left: calc(-13 * var(--u)); border-radius: 2px; background: #fff; }
.h11-srch { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: rgba(40,34,44,.72); display: grid; place-items: center; }
.h11-srch svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.h11-rail { position: absolute; right: calc(14 * var(--u)); top: calc(376 * var(--u)); width: calc(48 * var(--u)); display: grid; justify-items: center; gap: calc(14 * var(--u)); text-align: center; font-size: calc(12 * var(--u)); font-weight: 600; }
.h11-rail > span { display: grid; justify-items: center; gap: calc(4 * var(--u)); }
.h11-rail svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); display: block; }
.h11-rav { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 calc(2 * var(--u)) #fff; }
.h11-rav img { width: 100%; height: 100%; object-fit: cover; }
.h11-disc-ring { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; background: #111; display: grid; place-items: center; box-shadow: 0 0 0 calc(1 * var(--u)) rgba(255,255,255,.15); animation: h11-spin 7s linear infinite; }
.h11-disc-ring img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 calc(8 * var(--u)) #1a1a1e, 0 0 0 calc(9 * var(--u)) rgba(255,255,255,.1); }
@keyframes h11-spin { to { transform: rotate(360deg); } }
.h11-chip { position: absolute; left: calc(16 * var(--u)); top: calc(492 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(12 * var(--u)); border-radius: 999px; display: inline-flex; align-items: center; gap: calc(7 * var(--u)); background: rgba(24,20,26,.72); font-size: calc(13 * var(--u)); font-weight: 500; white-space: nowrap; }
.h11-chip svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.h11-chip .jp-dot { margin: 0 calc(2 * var(--u)); }
.h11-cname { position: absolute; left: calc(16 * var(--u)); top: calc(528 * var(--u)); max-width: calc(320 * var(--u)); font-size: calc(44 * var(--u)); line-height: .98; font-weight: 900; letter-spacing: calc(-1.3 * var(--u)); color: #fff; }
.h11-cname.two { top: calc(486 * var(--u)); }
.h11-card.two .h11-chip { top: calc(450 * var(--u)); }
.h11-cavs { position: absolute; left: calc(16 * var(--u)); top: calc(584 * var(--u)); right: calc(70 * var(--u)); height: calc(28 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(14 * var(--u)); color: rgba(244,242,248,.9); white-space: nowrap; overflow: hidden; }
.h11-cavs .h11-avs i { width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin-left: calc(-7 * var(--u)); }
.h11-cavs .h11-avs i:first-child { margin-left: 0; }
.h11-cavs .h11-avs img { height: calc(17 * var(--u)); }
.h11-csong { position: absolute; left: calc(16 * var(--u)); top: calc(618 * var(--u)); display: flex; align-items: center; gap: calc(9 * var(--u)); font-size: calc(15 * var(--u)); color: rgba(244,242,248,.75); white-space: nowrap; }
.h11-csong b { color: #fff; font-weight: 700; }
.h11-eq { display: inline-flex; align-items: flex-end; gap: calc(2.5 * var(--u)); height: calc(16 * var(--u)); margin-right: calc(2 * var(--u)); }
.h11-eq i { width: calc(3.5 * var(--u)); border-radius: 2px; background: #E0785A; transform-origin: bottom; animation: h11-eq .9s ease-in-out infinite alternate; }
.h11-eq i:nth-child(1) { height: 60%; } .h11-eq i:nth-child(2) { height: 100%; animation-delay: -.3s; } .h11-eq i:nth-child(3) { height: 45%; animation-delay: -.6s; }
@keyframes h11-eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.h11-ctime { position: absolute; left: calc(16 * var(--u)); top: calc(648 * var(--u)); width: calc(322 * var(--u)); height: calc(42 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(14 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.h11-ctime b { font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: calc(-.4 * var(--u)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h11-ctime span { display: grid; line-height: 1.2; min-width: 0; }
.h11-ctime span b { font-size: calc(14 * var(--u)); font-weight: 600; letter-spacing: 0; }
.h11-ctime small { font-size: calc(12 * var(--u)); color: rgba(244,242,248,.68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 4 · the artist page (Jann), pushed in from the right */
.h11-page { position: absolute; inset: 0; background: #0B0B0D; transform: translate3d(100%, 0, 0); will-change: transform; box-shadow: calc(-12 * var(--u)) 0 calc(40 * var(--u)) rgba(0,0,0,.5); }
.h11-feed { position: absolute; left: 0; top: 0; width: calc(390 * var(--u)); will-change: transform; }
.h11-hero { position: relative; width: calc(390 * var(--u)); height: calc(620 * var(--u)); overflow: hidden; background: #0B0B0D; }
.h11-hbg { position: absolute; inset: 0; }
.h11-hbg video, .h11-hposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h11-hbg video { filter: brightness(1.3) contrast(1.05); }   /* the clip is dark (Y ≈ 30–70); a static lift, not animated */
.h11-hposter { transition: opacity .3s ease-out; }
.h11-hbg.playing .h11-hposter { opacity: .45; }   /* the clip is dark and strobes (Y 26–72 per frame): the bright poster stays at 45 % over it while it runs, so the face holds */
.h11-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(170 * var(--u)); background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0)); pointer-events: none; }
.h11-hero::after { content: ""; position: absolute; left: 0; right: 0; top: calc(250 * var(--u)); bottom: 0; background: linear-gradient(180deg, rgba(11,11,13,0) 0, rgba(11,11,13,.62) 42%, rgba(11,11,13,.95) 74%, #0B0B0D 100%); pointer-events: none; }
.h11-ht { position: absolute; inset: 0; z-index: 2; }
.h11-eye { position: absolute; left: calc(20 * var(--u)); top: calc(399 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.3; font-weight: 600; letter-spacing: calc(1.68 * var(--u)); text-transform: uppercase; color: #E0785A; white-space: nowrap; }
.h11-name { position: absolute; left: calc(20 * var(--u)); top: calc(419 * var(--u)); font-size: calc(58 * var(--u)); line-height: 1; font-weight: 900; letter-spacing: calc(-1.74 * var(--u)); white-space: nowrap; }
.h11-genre { position: absolute; left: calc(20 * var(--u)); top: calc(485 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.3; font-weight: 500; color: #B9B3C6; white-space: nowrap; }
.h11-pill { position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); border-radius: 999px; font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: calc(-.2 * var(--u)); white-space: nowrap; }
.h11-pill svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; }
.h11-pill.white { left: calc(20 * var(--u)); top: calc(523 * var(--u)); width: calc(114 * var(--u)); height: calc(47 * var(--u)); background: #fff; color: #111; }
.h11-go { left: calc(144 * var(--u)); top: calc(521.5 * var(--u)); width: calc(176 * var(--u)); height: calc(50 * var(--u)); background: rgba(24,14,16,.55); color: #F4F2F8; transition: background .18s ease-out, color .18s ease-out, transform .1s ease-out; }
.h11-go .h11-ck { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .14s ease-in; }
.h11-go.press { transform: scale(.96); }
.h11-go.on { background: #C7E635; color: #0E1108; transition: background .25s cubic-bezier(.2,.7,.2,1), color .25s cubic-bezier(.2,.7,.2,1), transform .1s ease-out; }
.h11-go.on .h11-ck { stroke-dashoffset: 0; transition: stroke-dashoffset .35s cubic-bezier(.2,.7,.2,1) .06s; }
.h11-go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 calc(2 * var(--u)) #C7E635; opacity: 0; pointer-events: none; }
.h11-go.ring::after { animation: h11-ring .7s cubic-bezier(.2,.7,.2,1) .06s 1 both; }
@keyframes h11-ring { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
.h11-fr { position: absolute; left: calc(20 * var(--u)); top: calc(587 * var(--u)); height: calc(28 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); opacity: 0; transform: translate3d(0, calc(8 * var(--u)), 0); transition: opacity .18s ease-out, transform .18s ease-out; white-space: nowrap; }
.h11-fr.on { opacity: 1; transform: none; transition: opacity .38s cubic-bezier(.2,.7,.2,1), transform .38s cubic-bezier(.2,.7,.2,1); }
.h11-avs { display: flex; flex: none; }
.h11-avs i { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; background: #2A1E22; box-shadow: 0 0 0 calc(2 * var(--u)) #1A1114; display: grid; place-items: center; overflow: hidden; margin-left: calc(-8 * var(--u)); }
.h11-avs i:first-child { margin-left: 0; }
.h11-avs img { height: calc(19 * var(--u)); width: auto; max-width: none; }
.h11-fr-t { font-size: calc(14 * var(--u)); font-weight: 600; line-height: 1.2; }
.h11-fr-t b { font-weight: 600; }
.h11-fr-m { color: #B9B3C6; }

/* the page's sections, in ADT-01's order and heights */
.jp { position: relative; width: calc(390 * var(--u)); padding: 0 calc(16 * var(--u)); color: #F4F2F8; }
.jp-h { font-size: calc(22 * var(--u)); font-weight: 700; letter-spacing: calc(-.4 * var(--u)); line-height: 1.2; }
.jp-h2 { font-size: calc(17 * var(--u)); font-weight: 700; margin-top: calc(22 * var(--u)); }
.jp-mute { color: #B9B3C6; }
.jp-acc { color: #E0785A; }
.jp-note { font-size: calc(12 * var(--u)); line-height: 1.4; color: #8E889B; }
.jp-cap { font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: calc(1.68 * var(--u)); text-transform: uppercase; color: #E0785A; }
.jp-ini { font-size: calc(11 * var(--u)); font-weight: 700; color: #F4F2F8; background: #4A3B2F; }
.jp-dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #8FD3B8; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(143,211,184,.25); display: inline-block; }
.jp-set { height: calc(214 * var(--u)); padding-top: calc(22 * var(--u)); }
.jp-time { margin-top: calc(8 * var(--u)); display: flex; align-items: baseline; gap: calc(8 * var(--u)); font-variant-numeric: tabular-nums; }
.jp-time b { font-size: calc(48 * var(--u)); font-weight: 800; letter-spacing: calc(-1.5 * var(--u)); line-height: 1; }
.jp-time span { font-size: calc(24 * var(--u)); color: #B9B3C6; }
.jp-meta { margin-top: calc(10 * var(--u)); font-size: calc(14 * var(--u)); }
.jp-chips { margin-top: calc(12 * var(--u)); display: flex; gap: calc(8 * var(--u)); }
.jp-chip { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: 999px; background: rgba(255,255,255,.08); font-size: calc(12.5 * var(--u)); font-weight: 600; white-space: nowrap; }
.jp-chip svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.jp-set .jp-note { margin-top: calc(12 * var(--u)); }
.jp-who { height: calc(342 * var(--u)); padding-top: calc(10 * var(--u)); }
.jp-row { margin-top: calc(12 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); }
.jp-avs { display: flex; flex: none; }
.jp-avs i { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: #2A2026; box-shadow: 0 0 0 calc(2 * var(--u)) #0B0B0D; display: grid; place-items: center; overflow: hidden; margin-left: calc(-9 * var(--u)); }
.jp-avs i:first-child { margin-left: 0; }
.jp-avs img { height: calc(22 * var(--u)); width: auto; max-width: none; }
.jp-avs .jp-more { background: #2F2733; }
.jp-who-t { font-size: calc(14.5 * var(--u)); font-weight: 600; line-height: 1.3; min-width: 0; }
.jp-who-t b { font-weight: 600; }
.jp-card { margin-top: calc(16 * var(--u)); padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); border-radius: calc(18 * var(--u)); background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.jp-card-h { display: flex; justify-content: space-between; align-items: baseline; font-size: calc(15 * var(--u)); }
.jp-card-h b { font-weight: 700; }
.jp-card-h span { font-size: calc(12 * var(--u)); }
.jp-chart { position: relative; margin-top: calc(18 * var(--u)); height: calc(112 * var(--u)); }
.jp-yl { position: absolute; right: calc(10 * var(--u)); top: calc(-10 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; color: #E0785A; }
.jp-bars { position: absolute; left: 0; right: 0; top: calc(10 * var(--u)); height: calc(82 * var(--u)); display: flex; align-items: flex-end; gap: calc(5 * var(--u)); }
.jp-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: calc(3 * var(--u)); background: rgba(255,255,255,.16); position: relative; }
.jp-bars i.on { background: #E0785A; }
.jp-bars i.now::before { content: "now"; position: absolute; left: calc(-2 * var(--u)); bottom: 100%; margin-bottom: calc(2 * var(--u)); font-size: calc(10 * var(--u)); color: #F4F2F8; font-weight: 600; }
.jp-bars i.now::after { content: ""; position: absolute; left: calc(-3 * var(--u)); top: calc(-2 * var(--u)); bottom: calc(-8 * var(--u)); width: 1.5px; background: #fff; }
.jp-ax { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: calc(11 * var(--u)); color: #8E889B; padding: 0 calc(4 * var(--u)); }
.jp-card-p { margin-top: calc(10 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.35; color: #B9B3C6; }
.jp-vid { height: calc(496 * var(--u)); padding-top: calc(24 * var(--u)); }                /* from its content: heading, 3 × 3 grid, caption; the rest at 108 under the solid bar */
.jp-grid { margin-top: calc(14 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--u)); }
.jp-grid span { position: relative; aspect-ratio: 1; border-radius: calc(8 * var(--u)); overflow: hidden; background: #1a1a1e; }
.jp-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jp-grid .jp-sq { object-position: 50% 56%; }
.jp-grid b { position: absolute; left: calc(6 * var(--u)); bottom: calc(6 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(0,0,0,.55); font-size: calc(10 * var(--u)); font-weight: 600; }
.jp-grid b::before { content: "▶ "; font-size: calc(8 * var(--u)); }
.jp-vid .jp-note { margin-top: calc(14 * var(--u)); }
.jp-warm { height: calc(638 * var(--u)); padding-top: calc(10 * var(--u)); }
.jp-hrow { display: flex; justify-content: space-between; align-items: center; }
.jp-am { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(12 * var(--u)); color: #B9B3C6; }
.jp-am svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.jp-songs { list-style: none; margin-top: calc(8 * var(--u)); display: grid; }
.jp-songs li { display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(64 * var(--u)); }
.jp-songs img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: calc(6 * var(--u)); object-fit: cover; flex: none; }
.jp-songs span { display: grid; min-width: 0; line-height: 1.25; }
.jp-songs b { font-size: calc(15 * var(--u)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-songs small { font-size: calc(12.5 * var(--u)); color: #8E889B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-songs i { margin-left: auto; font-size: calc(16 * var(--u)); color: #8E889B; letter-spacing: calc(-1 * var(--u)); }
.jp-albums { margin-top: calc(10 * var(--u)); display: flex; gap: calc(12 * var(--u)); }
.jp-albums span { width: calc(150 * var(--u)); flex: none; display: grid; gap: calc(2 * var(--u)); }
.jp-albums img { width: calc(150 * var(--u)); height: calc(150 * var(--u)); border-radius: calc(8 * var(--u)); object-fit: cover; margin-bottom: calc(6 * var(--u)); }
.jp-albums b { font-size: calc(13.5 * var(--u)); font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jp-albums small { font-size: calc(12 * var(--u)); color: #8E889B; }
.jp-tonight { height: calc(289 * var(--u)); padding-top: calc(8 * var(--u)); }
.jp-sub { margin-top: calc(4 * var(--u)); font-size: calc(12.5 * var(--u)); color: #8E889B; }
.jp-run { list-style: none; margin-top: calc(10 * var(--u)); display: grid; gap: calc(2 * var(--u)); }
.jp-run li { display: flex; align-items: center; gap: calc(14 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(4 * var(--u)); border-radius: calc(12 * var(--u)); }
.jp-run li.on { background: rgba(224,120,90,.1); box-shadow: inset 0 0 0 1px rgba(224,120,90,.5); }
.jp-run time { width: calc(44 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }
.jp-run li.on time { color: #E0785A; }
.jp-run i { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none; }
.jp-run i img { width: 100%; height: 100%; object-fit: cover; }
.jp-run span { display: grid; line-height: 1.2; }
.jp-run b { font-size: calc(14.5 * var(--u)); font-weight: 600; }
.jp-run small { font-size: calc(12 * var(--u)); color: #8E889B; }
.jp-run li.on small { color: #E0785A; }
.jp-after { margin-top: calc(8 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(12.5 * var(--u)); color: #B9B3C6; white-space: nowrap; }
.jp-after svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex: none; }
.jp-about { height: calc(534 * var(--u)); padding-top: calc(14 * var(--u)); }
.jp-photo { margin-top: calc(12 * var(--u)); width: calc(358 * var(--u)); height: calc(224 * var(--u)); border-radius: calc(14 * var(--u)); overflow: hidden; background: #1a1a1e; }
.jp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: grayscale(1) contrast(1.05); }
.jp-p { margin-top: calc(14 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: 1.4; color: #D9D4E0; }
.jp-about .jp-note { margin-top: calc(10 * var(--u)); }

/* fixed chrome of the artist page */
.h11-bar { position: absolute; left: 0; top: 0; width: calc(390 * var(--u)); height: calc(104 * var(--u)); background: #0B0B0D; opacity: 0; pointer-events: none; will-change: opacity; z-index: 3; }
.h11-top { position: absolute; left: 0; top: 0; width: calc(390 * var(--u)); height: calc(100 * var(--u)); clip-path: inset(calc(46 * var(--u)) 0 0 0); pointer-events: none; z-index: 4; }
.h11-top img { position: absolute; left: 0; top: 0; width: calc(390 * var(--u)); height: calc(100 * var(--u)); }
.h11-mini { position: absolute; left: calc(16 * var(--u)); top: calc(689 * var(--u)); width: calc(358 * var(--u)); height: calc(64 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(10 * var(--u)); border-radius: calc(16 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); background: rgba(30,24,33,.94); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; z-index: 5; }
.h11-mini > img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(6 * var(--u)); object-fit: cover; flex: none; }
.h11-mini span { display: grid; line-height: 1.25; min-width: 0; }
.h11-mini b { font-size: calc(15 * var(--u)); font-weight: 700; }
.h11-mini small { font-size: calc(12 * var(--u)); color: #B9B3C6; }
.h11-mini svg { margin-left: auto; width: calc(22 * var(--u)); height: calc(22 * var(--u)); flex: none; }
.h11-prog { position: absolute; left: 0; bottom: 0; width: 38%; height: calc(2.5 * var(--u)); background: #E0785A; }

/* 5 · the end: the button under the phone, on black */
.h11-end { position: absolute; left: 50%; top: calc(50% + 435.65 * var(--u) - 3vh + 24px); transform: translate3d(-50%, 16px, 0); display: flex; align-items: center; gap: 20px; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.h11-end.live { pointer-events: auto; }

@media (max-width: 759px) {
  .h11-copy { top: 84px; width: min(342px, calc(100% - 2 * var(--gut))); }
  .h11-copy .cap { margin-bottom: 18px; }
  .h11-copy p { margin-top: 18px; }
  .h11-copy .acts { display: none; }                      /* the sticky lime button serves on phones, as before */
  .h11-shade { background: linear-gradient(180deg, rgba(10,10,11,.92) 0, rgba(10,10,11,.74) 30%, rgba(10,10,11,.1) 46%, rgba(10,10,11,0) 70%, rgba(10,10,11,.85) 100%); }
  .h11-credit { bottom: 92px; line-height: 1.5; width: 342px; }
  .h11-phone { margin-top: calc(-435.65 * var(--u)); }
  .h11-end { display: none; }
}

/* reduced motion: no pin, the states stacked, nothing moves; the last state is the artist page with Going done */
html.rm .h11 { height: auto; }
html.rm .h11-vp { position: relative; height: auto; display: grid; gap: 40px; padding-bottom: 64px; }
html.rm .h11-first { position: relative; height: 100vh; height: 100svh; }
html.rm .h11 .scroll-cue { display: none; }
html.rm .h11-phone { position: relative; left: auto; top: auto; margin: 0 auto; opacity: 1; transform: none; will-change: auto; }
html.rm .h11-disc { display: none; }
html.rm .h11-page { transform: none; }
html.rm .h11-end { position: relative; left: auto; top: auto; transform: none; opacity: 1; justify-content: center; pointer-events: auto; }
html.rm .h11-feed, html.rm .h11-copy { transform: none !important; opacity: 1 !important; will-change: auto; }
html.rm .h11-bg { opacity: 1 !important; will-change: auto; }
html.rm .h11-go, html.rm .h11-fr, html.rm .h11-go .h11-ck { transition: none; animation: none; }
@media (max-width: 759px) { html.rm .h11-end { display: flex; } }