/* ë · artist page v2 (sample: /brainlove/, 29 Sep 2026, awaiting AV's go before rollout).
   loads AFTER the artist's site.css: same tokens (--bg --text --red --font --mono --line --ease).
   mobile first; desktop in the min-width blocks. prefix a2- so nothing in site.css collides.
   the dock at the bottom is the SAME dock as /sessions/<slug>/ (+ /sessions/resume.js): one player, the mix follows you. */

:root { --bgr: 5,5,5; --ink: var(--text); --ink2: rgba(247,247,242,.52); --wavebase: rgba(255,255,255,.12); }

/* ── hero: full bleed, name huge, one line, big play ── */
.a2-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.a2-hero-img { position: absolute; inset: 0; z-index: -2; }
.a2-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: saturate(.9) contrast(1.05); }
.a2-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,5,5,.35) 0%, rgba(5,5,5,0) 22%, rgba(5,5,5,.15) 50%, rgba(5,5,5,.92) 86%, var(--bg) 100%); }
.a2-hero-in { width: 100%; padding: 0 20px 28px; }
.a2-eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: lowercase; color: var(--red); }
.a2-name { font-family: var(--font); font-weight: 900; text-transform: lowercase; letter-spacing: -.055em; line-height: .82;
  font-size: clamp(4.2rem, 21vw, 15rem); margin: 10px 0 12px -.04em; color: var(--text); overflow-wrap: anywhere; }
.a2-line { font-size: 1.05rem; font-weight: 400; line-height: 1.4; color: var(--soft); max-width: 34ch; }

.a2-play { margin-top: 24px; display: flex; align-items: center; gap: 16px; width: 100%; padding: 12px 20px 12px 12px;
  background: rgba(5,5,5,.55); backdrop-filter: blur(14px); border: 1px solid rgba(255,59,48,.45); border-radius: 999px;
  color: var(--text); text-align: left; font: inherit; transition: border-color .2s, background .2s; }
.a2-play:hover { border-color: var(--red); background: rgba(255,59,48,.08); }
.a2-play-btn { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(255,59,48,.5); animation: a2-pulse 2.4s var(--ease) infinite; }
.a2-play-btn::before { content: ""; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 4px; }
.a2-play.playing .a2-play-btn { animation: none; }
.a2-play.playing .a2-play-btn::before { border: none; width: 16px; height: 20px; border-left: 5px solid #fff; border-right: 5px solid #fff; margin: 0; }
.a2-play-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.a2-play-t b { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.a2-play-t small { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes a2-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,48,.55); } 70% { box-shadow: 0 0 0 18px rgba(255,59,48,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); } }
@media (prefers-reduced-motion: reduce) { .a2-play-btn { animation: none; } }

.a2-scroll { display: block; margin-top: 18px; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; color: var(--muted); }

/* ── sections ── */
.a2-sec { padding: 64px 20px; border-top: 1px solid var(--line); }
.a2-sec-in { max-width: 1180px; margin: 0 auto; }
.a2-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.a2-h h2 { font-weight: 900; text-transform: lowercase; letter-spacing: -.04em; line-height: .9; font-size: clamp(2.6rem, 11vw, 5.5rem); }
.a2-h a { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; color: var(--muted); white-space: nowrap; }
.a2-h a:hover { color: var(--red); }

/* sets: big cards that play in the dock */
.a2-sets { display: grid; gap: 14px; }
.a2-set { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); background: #0a0a0a; color: var(--text);
  text-align: left; font: inherit; overflow: hidden; border-radius: 4px; }
.a2-set-art { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.a2-set-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s; filter: brightness(.82); }
.a2-set:hover .a2-set-art img { transform: scale(1.04); filter: brightness(1); }
.a2-set-art .a2-play-btn { position: absolute; left: 16px; bottom: 16px; width: 56px; height: 56px; animation: none; }
.a2-set.playing .a2-play-btn::before { border: none; width: 14px; height: 18px; border-left: 4.5px solid #fff; border-right: 4.5px solid #fff; margin: 0; }
.a2-set-dur { position: absolute; right: 12px; bottom: 16px; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; background: rgba(5,5,5,.7); padding: 4px 8px; border-radius: 3px; }
.a2-set-meta { padding: 16px 16px 18px; }
.a2-set-meta b { display: block; font-weight: 700; font-size: 1.1rem; line-height: 1.2; letter-spacing: -.01em; text-transform: lowercase; }
.a2-set-meta small { display: block; margin-top: 6px; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; color: var(--muted); }
.a2-set-meta a { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: var(--soft); }
.a2-set-meta a:hover { color: var(--red); }

/* video sets: a row of wide tiles, opens youtube */
.a2-vids { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 28px -20px 0; padding: 0 20px 6px; scrollbar-width: none; }
.a2-vids::-webkit-scrollbar { display: none; }
.a2-vid { scroll-snap-align: start; display: block; color: var(--text); }
.a2-vid-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #111; }
.a2-vid-art img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75) grayscale(.2); transition: filter .3s; }
.a2-vid:hover .a2-vid-art img { filter: brightness(1) grayscale(0); }
.a2-vid-art::after { content: "▶"; position: absolute; left: 12px; bottom: 10px; font-size: .8rem; color: #fff; background: var(--red); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding-left: 2px; }
.a2-vid b { display: block; margin-top: 10px; font-weight: 600; font-size: .95rem; text-transform: lowercase; }
.a2-vid small { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; color: var(--muted); }

/* live: honest list + ONE big book block */
.a2-gigs { list-style: none; border-top: 1px solid var(--line); }
.a2-gig { display: grid; grid-template-columns: 5.2rem 1fr; gap: 4px 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.a2-gig-when { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--red); padding-top: 4px; }
.a2-gig b { font-weight: 600; font-size: 1.08rem; line-height: 1.25; }
.a2-gig small { grid-column: 2; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; color: var(--muted); }
.a2-gigs-sub { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; color: var(--muted); margin: 28px 0 8px; }
.a2-gigs-sub:first-child { margin-top: 0; }

.a2-book { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; padding: 26px 22px;
  background: var(--red); color: #fff; border-radius: 4px; transition: transform .25s var(--ease), background .2s; }
.a2-book:hover { transform: translateY(-2px); background: #ff4d42; }
.a2-book b { display: block; font-weight: 900; text-transform: lowercase; letter-spacing: -.03em; line-height: .95; font-size: clamp(2rem, 9vw, 3.6rem); }
.a2-book small { display: block; margin-top: 8px; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; opacity: .85; }
.a2-book i { font-style: normal; font-size: 2.2rem; line-height: 1; }
.a2-book-alt { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; color: var(--soft); }
.a2-book-alt:hover { color: var(--red); }

/* releases grid (template: rendered only when the artist has public releases with covers) */
.a2-rels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.a2-rel { display: block; color: var(--text); }
.a2-rel img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; }
.a2-rel b { display: block; margin-top: 8px; font-weight: 600; font-size: .92rem; text-transform: lowercase; }
.a2-rel small { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; color: var(--muted); }

/* /20 band */
.a2-20 { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 30px 22px; border: 1px solid rgba(255,59,48,.5);
  border-radius: 4px; color: var(--text); background: radial-gradient(120% 140% at 100% 0%, rgba(255,59,48,.16), transparent 60%); transition: border-color .2s; }
.a2-20:hover { border-color: var(--red); }
.a2-20 small { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; color: var(--red); }
.a2-20 b { display: block; margin-top: 8px; font-weight: 900; text-transform: lowercase; letter-spacing: -.03em; line-height: .95; font-size: clamp(1.9rem, 8vw, 3.2rem); }
.a2-20 i { font-style: normal; font-size: 2rem; color: var(--red); }

/* bio + links */
.a2-bio p { font-size: 1.12rem; font-weight: 300; line-height: 1.7; color: rgba(247,247,242,.8); max-width: 60ch; }
.a2-bio p + p { margin-top: 16px; }
.a2-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 32px; background: var(--line); border: 1px solid var(--line); }
.a2-facts div { background: var(--bg); padding: 14px; }
.a2-facts dt { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; color: var(--muted); }
.a2-facts dd { margin-top: 4px; font-size: 1rem; font-weight: 500; }
.a2-links { list-style: none; margin-top: 32px; border-top: 1px solid var(--line); }
.a2-links a { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: 1.2rem; text-transform: lowercase; color: var(--text); transition: color .15s, padding .25s var(--ease); }
.a2-links a:hover { color: var(--red); padding-left: 8px; }
.a2-links a span { font-family: var(--mono); font-size: .8rem; color: var(--muted); }

/* ── the dock: copied from /sessions/<slug>/ so resume.js carries the mix between pages ── */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:120;display:flex;align-items:center;gap:clamp(14px,1.8vw,22px);padding:9px clamp(16px,3vw,40px);background:rgba(var(--bgr),.82);backdrop-filter:blur(22px) saturate(1.2);border-top:1px solid rgba(255,255,255,.06);transform:translateY(115%);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.dock.on{transform:translateY(0)}
.dock-cover{width:40px;height:40px;border-radius:3px;object-fit:cover;flex:none;filter:grayscale(1)}
.dock-meta{display:flex;flex-direction:column;gap:2px;min-width:0;width:clamp(102px,15vw,200px);flex:none}
.dock-t{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.dock-s{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-play{width:36px;height:36px;border-radius:50%;background:var(--red);border:none;flex:none;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.dock-play:hover{transform:scale(1.07)}
.dock-play::before{content:"";width:0;height:0;border-left:9px solid #fff;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;margin-left:2px}
.dock.playing .dock-play::before{border:none;width:7px;height:10px;border-left:2.5px solid #fff;border-right:2.5px solid #fff;margin:0}
.dock-prog{flex:1;height:3px;background:var(--wavebase);border-radius:2px;position:relative;min-width:60px}
.dock-progfill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--red);border-radius:2px}
.dock-progfill::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--red);transform:translateY(-50%)}
.dock-time{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink2);flex:none;min-width:88px;text-align:right}
.dock-x{background:transparent;border:none;color:var(--ink2);font-size:14px;flex:none;padding:4px;transition:color .15s}
.dock-x:hover{color:var(--red)}
@media(max-width:640px){.dock-meta{width:auto;max-width:30vw}.dock-time{min-width:0;font-size:9.5px}.dock-cover{width:36px;height:36px}}
body.a2 { padding-bottom: 64px; }
/* phones: the sub-nav row owns the top; the big book block below replaces the header pill */
@media (max-width: 719px) { body.a2 .header-actions { display: none; } }

/* ── wider screens ── */
@media (min-width: 720px) {
  .a2-hero-in { padding: 0 48px 56px; }
  .a2-play { width: auto; display: inline-flex; padding-right: 32px; }
  .a2-play-btn { width: 76px; height: 76px; }
  .a2-sec { padding: 96px 48px; }
  .a2-sets { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .a2-vids { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 32px 0 0; padding: 0; }
  .a2-gig { grid-template-columns: 7rem 1fr auto; align-items: baseline; }
  .a2-gig small { grid-column: 3; text-align: right; }
  .a2-book, .a2-20 { padding: 40px 44px; }
  .a2-rels { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .a2-bio-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; }
  .a2-facts, .a2-links { margin-top: 0; }
  .a2-facts + .a2-links { margin-top: 24px; }
}
@media (min-width: 1100px) {
  .a2-hero-img img { object-position: 50% 30%; }
  .a2-sets { grid-template-columns: repeat(2, minmax(0, 460px)); }
}