/* readability layer (2026-10-13). loaded after every page's own <style> by ensure_tags.py, so a rule here
   wins over the page rule with the same selector, and survives the laptop re-rendering a page.
   one job: small print that reads on a phone.
   - secondary text is a lighter grey on night, and a darker one on the paper sections
   - space mono keeps the short labels (dates, chips, kickers) but loses the wide tracking and never drops
     under about 12.5px
   - long phrases (buttons, jump links, mono paragraphs) move to poppins, which reads faster than mono */
:root{--steel:#A9A9B1;--read-dim:#C9C9C4}
.day-section,.lane-vibes{--steel:#5E5E58}

/* ---------- home ---------- */
.tagline{color:var(--read-dim)}
.mono{letter-spacing:.04em}
.mono.eyebrow{letter-spacing:.06em}
a.pill{font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem;letter-spacing:0;line-height:1.35;padding:13px 24px;text-wrap:balance}
/* on a phone the stacked buttons share one width and centre their words, so the stack reads as a list */
@media (max-width:640px){.hero-links a.pill,.fold-nav a.pill,.mix-row a.pill,#friday .fgf-cta a.pill{flex:1 1 100%;text-align:center}}
.area-nav{gap:4px 20px}
.area-nav a{font-family:'Poppins',sans-serif;font-weight:500;font-size:.92rem;letter-spacing:0;color:var(--read-dim);min-height:40px;padding:9px 0 4px}
@media (min-width:641px){.hero .area-nav a{padding-left:8px;padding-right:8px}}
.wall span,.wall a{font-family:'Poppins',sans-serif;font-weight:500;font-size:.92rem;letter-spacing:0;color:#dcdcd6}
.wall span.hot,.wall a.hot{color:var(--racing)}
.cluster h3{letter-spacing:.06em;font-size:.82rem}
.wall-note{color:var(--read-dim)}
#labels .wall-cta a,.serie a.more,#tonight a.more,#nextup a.more,body #friday .upcoming a.more,.foot-links a{font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem;letter-spacing:0}
#tonight .drops .d,#nextup .drops .d,#tonight .drops a.go,#nextup .drops a.go,body #friday .upcoming .drops a{font-size:.82rem;letter-spacing:.02em}
#tonight .drops .w,#nextup .drops .w{color:var(--read-dim)}
.about-foot{color:var(--read-dim)}
.lane .who{font-size:.8rem;letter-spacing:.02em}
.player .note{font-size:.78rem}
.coming{letter-spacing:.03em}
.fold>summary .mono{font-size:.8rem}
#gm-pv .pv-eye,#gm-pv .pv-m{font-size:.7rem;letter-spacing:.08em}
.fine{font-size:.78rem;letter-spacing:.03em}
.set-meta .mono{font-size:.8rem;letter-spacing:.03em}
.day-section .set-meta .mono{color:#55554f}

/* ---------- directories and profiles (artists, labels, radio, badges, newsletter, tracklists) ---------- */
/* the small red labels: lowercase like the home page, so every page speaks the same way */
.eyebrow,.eyebrow2{text-transform:lowercase;letter-spacing:.06em;font-size:.8rem}
.back{letter-spacing:.03em}
.letterhead{letter-spacing:.06em}
.tag{font-size:.8rem;letter-spacing:.03em}
.fact .k{font-size:.8rem;letter-spacing:.02em}
.lk{font-size:.82rem}
blockquote cite{font-size:.8rem}
.dm,.lc,.azctl .azn,details.az>summary .cnt{font-size:.8rem;letter-spacing:.02em}
.rel .t small{color:var(--read-dim)}
/* mono paragraphs on profile pages read as poppins */
.wip p,.subtle,.note:not(.player .note){font-family:'Poppins',sans-serif;font-size:.92rem;line-height:1.65;color:var(--read-dim);letter-spacing:0}
.wip p b{color:var(--day);font-weight:600}
.imeta{font-size:.8rem}

/* ---------- events, upcoming, sets, interviews ---------- */
.kicker,.L h3,.tierline,.vhead,.city,.date,.jump a,.mini .d,.wall-head,.inum,.grp{text-transform:lowercase;font-size:13px;letter-spacing:.04em}
.chip{letter-spacing:.03em}
.g h2 .n,h2.azh .n,details.a .n{font-size:12.5px;letter-spacing:.04em}
.ivtab{letter-spacing:.04em}
.v .meta{font-size:.8rem}
.tour .go,.v .links,#tcount{font-size:.8rem}

/* ---------- shared player ---------- */
body .gmx-stage .set-meta .mono,body .gmx-stage .set-count{letter-spacing:.03em;font-size:.8rem}

/* ---------- more, search and the account layer: the small section labels (scan.html and more.html carry their own fixes inline) ---------- */
.aform label,.sounds .sl,
.gmx-acct-ways h3,.gmx-acct-form label,.gmx-you h3,.gmx-you h4,#gmx-claims h4,#gmx-team h4{text-transform:lowercase;letter-spacing:.06em;font-size:.8rem}
.gmx-acct-code span,.gmx-acct-code small,.gmx-badge{letter-spacing:.06em}
.gmx-acct-sub,.gmx-acct-p.small,.gmx-acct-msg,.gmx-claim-why,.gmx-you-list small,.gmx-you-counts li,.gmx-track-tx small{font-size:.78rem}

/* ---------- the "everything on this artist" block gmx-related.js adds, and the sets page cards ---------- */
body .gmx-rel .eyebrow2,body .gmx-rel h3{text-transform:lowercase;letter-spacing:.06em;font-size:.8rem}
body .gmx-rel .row a{font-size:.82rem}
body .gmx-rel .row a small{font-size:.92em}
.card .m,.card .m a{font-size:12.5px}
.pg{font-size:13px}

/* ---------- the last low-contrast spots found by the contrast sweep ---------- */
.day-section .canon i{color:#6f6f69}
.lane-nonspoty .who{color:#2a0400}
.hub .fine{color:var(--steel)}

/* ---------- desktop pass (2026-10-13) ---------- */
/* the sign in chip sits level with the logo and search buttons beside it, and matches their 36px height */
/* events, sets, upcoming, interviews: the back link's 34px gap moves to the header row, so the link lines up with the buttons */
.gmx-top>.back{margin-bottom:0}
.gmx-top:has(>.back){margin-bottom:34px}
.gmx-hdr .gmx-chip{float:none;margin-top:0;min-height:36px;display:inline-flex;align-items:center;box-sizing:border-box;font-size:.76rem}
/* buttons with a sentence on them read in poppins, like the home page buttons (scan, more, the account sheet) */
.btn,.gmx-acct-btn{font-family:'Poppins',sans-serif;font-weight:600;font-size:.88rem;letter-spacing:0;line-height:1.2}
/* a readable line length on wide screens */
#letter .note{max-width:680px}
.legend,.take{max-width:760px}
/* the folded home sections: the small hint sits beside the + instead of floating mid row */
.fold>summary .mono{margin-left:auto}
/* the home video stages stop at a comfortable width on a big screen instead of filling it */
@media (min-width:1025px){#library .set-stage,#podcasts .set-stage{max-width:880px}}
/* the sets page letter bar: on a tablet or wider it wraps instead of hiding y and z behind a scrollbar you cannot see */
@media (min-width:600px){.rail{flex-wrap:wrap}}
@media (min-width:600px) and (max-width:820px){.rail{gap:0}.rail a,.rail span{min-width:26px}}
/* a stage with more than 30 sets (radio has 700) drops the dots: a wall of them says nothing the "1 of 701" count
   and the arrows do not already say */
body .gmx-stage .set-dots:has(>button:nth-child(31)){display:none}

/* ---------- keyboard focus (2026-10-13) ----------
   the account sheet, the header chip, the claim button, the "…" button, the floating search and its sheet marked focus with a
   colour change alone, which is hard to spot on a phone with a keyboard and lost on some colour vision. one red
   ring for all of them, the same ring the pages already draw. ":root body" outranks the injected chip style. */
:root body .gmx-chip:focus-visible,:root body .gmx-claim:focus-visible,:root body .gmx-acct-x:focus-visible,
:root body .gmx-acct-btn:focus-visible,:root body .gmx-acct-link:focus-visible,:root body .gmx-acct-rowbtn:focus-visible,
:root body .gmx-fab:focus-visible,:root body .gmx-hdr .gmx-hsearch:focus-visible,:root body .gmx-hdr .gmx-hmark:focus-visible,
:root body .gmx-quick-x:focus-visible,:root body .gmx-quick-chip:focus-visible,:root body .gmx-quick-all:focus-visible,:root body .gmx-more:focus-visible{outline:3px solid #FF1C02;outline-offset:3px}
:root body .gmx-acct-form input:focus-visible,:root body .gmx-acct-row input:focus-visible,:root body .gmx-acct-check input:focus-visible{outline:3px solid #FF1C02;outline-offset:2px}

/* ---------- the "more" expander (gmx-more.js, 2026-10-14) ---------- */
.gmx-more-clip{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--more-lines,3);line-clamp:var(--more-lines,3);overflow:hidden}
[data-more-hide],[data-more="fold"][hidden]{display:none!important}
.gmx-more-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:6px 0 2px;padding:10px 18px;border:1px solid rgba(255,28,2,.45);border-radius:999px;background:transparent;color:var(--day,#F2F2EF);font:600 .92rem/1.2 'Poppins',sans-serif;letter-spacing:0;text-transform:lowercase;cursor:pointer}
.gmx-more-btn::after{content:'';width:7px;height:7px;border-right:2px solid var(--racing,#FF1C02);border-bottom:2px solid var(--racing,#FF1C02);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.gmx-more-btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.gmx-more-btn:hover{border-color:var(--racing,#FF1C02)}
.gmx-more-btn:focus-visible{outline:2px solid var(--racing,#FF1C02);outline-offset:3px}
.day-section .gmx-more-btn{color:var(--night,#0B0B0D)}
@media (prefers-reduced-motion:reduce){.gmx-more-btn::after{transition:none}}

/* ---------- home on a phone: the first screen is the music (2026-10-14) ----------
   the hero shrinks, its page links stay open (owner's call, 2026-10-14), then the sets, your crate, friday and the
   denver dates. about groovesMAXXING sits last, just above the footer. */
@media (max-width:640px){
  body:has(>header.hero){display:flex;flex-direction:column}
  body:has(>header.hero)>*{order:9}
  body:has(>header.hero)>header.hero{order:0;min-height:0;padding:34px 20px 22px}
  body:has(>header.hero)>#library{order:1}
  body:has(>header.hero)>#nextup{order:2}
  body:has(>header.hero)>#friday{order:3}
  body:has(>header.hero)>#tonight{order:4}
  body:has(>header.hero)>#about{order:10}
  body:has(>header.hero)>footer{order:11}
  .hero .mark{width:min(34vw,150px);margin-bottom:14px}
  .hero .wordmark{font-size:clamp(2rem,10vw,2.6rem)}
  .hero .tagline{margin-top:6px}
  .hero .icon-row{margin-top:18px;gap:10px}
  body:has(>header.hero)>#library{padding-top:36px}
}

/* ---------- the tracklists hub: the tracklists tab lands here, the rest of the area folds under the list ---------- */
.hub-more{margin-top:18px}
.hub-links{display:grid;gap:0;margin:6px 0 4px}
.hub-links a{display:flex;align-items:center;min-height:48px;padding:10px 2px;border-top:1px solid #26262b;color:var(--day,#F2F2EF);text-decoration:none;font:500 .95rem/1.3 'Poppins',sans-serif}
.hub-links a:last-child{border-bottom:1px solid #26262b}
.hub-links a::after{content:'→';margin-left:auto;color:var(--racing,#FF1C02)}
/* the tagline and its chart stay on one line on a phone (owner's call, 2026-10-14) */
@media (max-width:640px){.hero .tagline{white-space:nowrap;letter-spacing:0;font-size:min(3.25vw,15px);max-width:100%}}

/* ---------- the artists tab, layout a (owner's pick, 2026-10-14) ----------
   names first: one sticky bar holds the search, the lanes and the a to z, the letters fold, every row is a
   big tap target with a lettered disc, and wider screens pour each open letter into columns. */
.wrap:has(#az-open){max-width:1180px}
.wrap:has(#az-open) .top{padding:22px 0 0}
.wrap:has(#az-open) .searchbar{padding:12px 0 8px;margin-top:6px}
.wrap:has(#az-open) .searchbar input{padding:12px 16px;font-size:1rem}
.wrap:has(#az-open) .lanechips{margin-top:8px}
.searchbar .rail{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px;margin:8px -4px 0;padding:0 4px;-webkit-overflow-scrolling:touch}
.searchbar .rail::-webkit-scrollbar{display:none}
.searchbar .rail a{flex:none;min-width:34px;min-height:36px;font-size:.82rem;color:var(--read-dim)}
.searchbar .rail a:hover,.searchbar .rail a:focus-visible{color:var(--racing)}
.wrap:has(#az-open) .azctl{margin:10px 0 0}
.wrap:has(#az-open) details.az>summary{scroll-margin-top:200px}
.wrap:has(#az-open) .letterhead{scroll-margin-top:200px}
.wrap:has(#az-open) .drow{align-items:center;min-height:52px;padding:8px 2px;gap:12px;break-inside:avoid}
.wrap:has(#az-open) .drow .dav{order:0;flex:none;width:32px;height:32px;border-radius:50%;background:var(--card);border:1px solid #33333a;display:grid;place-items:center;font:900 .74rem/1 'Poppins',sans-serif;color:var(--racing)}
.wrap:has(#az-open) .drow .dn{order:1;min-width:0;overflow-wrap:anywhere}
.wrap:has(#az-open) .drow .dm{display:none}
.wrap:has(#az-open) .drow .dlane{order:2;margin-left:auto;width:auto;text-align:right}
@media (min-width:700px){
  .wrap:has(#az-open) details.az .azin{column-width:230px;column-gap:28px}
  .wrap:has(#az-open) details.az .drow:last-child{border-bottom:1px solid #1b1b1f}
}
.gmx-more-btn.q{border:0;border-radius:6px;padding:10px 2px;margin:2px 0;min-height:44px;color:var(--racing,#FF1C02);font-size:.88rem}
.gmx-more-btn.q::after{width:6px;height:6px}
.day-section .gmx-more-btn.q{color:var(--deep,#CC1400)}

/* ---------- section titles and edges, every page but home (owner's call, 2026-10-14) ----------
   a section title always outranks the rows under it: bold poppins in day white, a step above row text.
   the more page's lists become panels with a border, so you can see where one ends and the next starts. */
body:not(:has(>header.hero)):not(:has(.aname)) .wrap h2:not(.tier):not(.azh):not(.vh){font-family:'Poppins',sans-serif;font-weight:800;font-size:1.22rem;line-height:1.2;letter-spacing:-.01em;color:var(--day);text-transform:lowercase;margin:40px 0 12px}
body:not(:has(>header.hero)):not(:has(.aname)) .wrap h2:not(.tier):not(.azh):not(.vh) .n,body:not(:has(>header.hero)):not(:has(.aname)) .wrap h2:not(.tier):not(.azh):not(.vh) small{font-family:'Space Mono',monospace;font-weight:400;font-size:.78rem;color:var(--steel);letter-spacing:.03em;margin-left:8px}
body .gmx-rel h3{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:0;color:var(--day);text-transform:lowercase;margin:26px 0 10px}
/* the more page: each list is a panel */
.wrap .list{border:1px solid #2a2a30;border-radius:18px;background:var(--card,#141417);padding:0 16px;overflow:hidden}
.wrap .list li:last-child{border-bottom:0}
.wrap .list li{border-color:#232328}
.wrap .list a,.wrap .list .rowbtn,.wrap .list .wipe,.wrap .list label.sw{padding-top:15px;padding-bottom:15px}
.wrap .list small{font-size:.84rem;line-height:1.45;margin-top:3px}
.gmx-you-switches{border:1px solid #2a2a30;border-radius:18px;background:var(--card,#141417);padding:0 16px;margin-top:10px}
.gmx-you-switches:empty{display:none}
.acct .card{border-color:#2a2a30}

/* ---------- the closed row (details.gmx-fold): a full-width row, title left, red chevron right ---------- */
details.gmx-fold{border:1px solid #2a2a30;border-radius:14px;background:var(--card,#141417);margin:10px 0 0}
details.gmx-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:12px 16px;font:600 .98rem/1.3 'Poppins',sans-serif;color:var(--day)}
details.gmx-fold>summary::-webkit-details-marker{display:none}
details.gmx-fold>summary::after{content:'';flex:none;width:8px;height:8px;border-right:2px solid var(--racing,#FF1C02);border-bottom:2px solid var(--racing,#FF1C02);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
details.gmx-fold[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
details.gmx-fold>summary:focus-visible{outline:2px solid var(--racing,#FF1C02);outline-offset:2px;border-radius:14px}
.gmx-fold-body{padding:0 16px 14px;display:grid;gap:10px}
.gmx-fold-body p{margin:0;font-size:.92rem;line-height:1.6;color:var(--read-dim)}
.gmx-fold-body b{color:var(--day)}
.gmx-fold-body a{color:var(--day);text-decoration:underline;text-decoration-color:#55555c;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){details.gmx-fold>summary::after{transition:none}}

/* ---------- the artists intro: "who we play", the two closed rows, then the names ---------- */
.mast[data-gmx="artists-mast"]{padding:18px 0 4px}
.mast[data-gmx="artists-mast"] h1{font-size:clamp(2rem,8vw,2.8rem);margin:0 0 8px}

/* ---------- home: the name reels (build_reels.py writes them, gmx-reel.js loops them) ----------
   bigger name, more tracks on our playlists (artists) or more tracks through the skip test (labels). */
.reel{display:grid;gap:6px;margin:22px 0 18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reel-row{overflow-x:auto;scrollbar-width:none}
.reel-row::-webkit-scrollbar{display:none}
.reel-track{display:flex;align-items:baseline;gap:6px 22px;width:max-content;padding:2px 0}
.reel-track a{white-space:nowrap;text-decoration:none;font-family:'Poppins',sans-serif;letter-spacing:-.01em;line-height:1.25;color:var(--day)}
.reel-track a:hover{color:var(--racing)}
.reel-track .r4{font-size:1.9rem;font-weight:900;color:var(--racing)}
.reel-track .r3{font-size:1.45rem;font-weight:800}
.reel-track .r2{font-size:1.12rem;font-weight:700}
.reel-track .r1{font-size:.95rem;font-weight:600;color:var(--read-dim)}
.reel-track .r0{font-size:.82rem;font-weight:500;color:var(--steel)}
.day-section .reel-track a{color:var(--night)}
.day-section .reel-track .r4{color:var(--deep)}
.day-section .reel-track .r1{color:#3c3c38}
.day-section .reel-track .r0{color:#5E5E58}
.reel-on .reel-row{overflow:hidden}
.reel-on .reel-track{animation:gmx-reel linear infinite}
.reel-on .reel-row:nth-child(even) .reel-track{animation-direction:reverse}
.reel-on .reel-row:hover .reel-track,.reel-on .reel-row:active .reel-track{animation-play-state:paused}
@keyframes gmx-reel{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.reel-track{animation:none!important}}
#labels .reel+div[data-more],#labels .gmx-more-btn{margin-top:4px}

/* the library wears the logo drawn for the paper */
.lib-mark{display:block;width:64px;height:64px;margin:0 0 12px}
/* a title over plain paragraphs (privacy, terms) gets a rule above it, so each section has a clear start */
body:not(:has(>header.hero)):not(:has(.aname)) .wrap h2:not(.tier):not(.azh):not(.vh):has(+p){border-top:1px solid #2a2a30;padding-top:26px}

/* ---------- home hero: smaller page buttons, tracklists first, and the area links as neat boxes (2026-10-14) ---------- */
.hero .area-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;width:100%;max-width:760px;margin-top:18px}
.hero .area-nav a,.gmx-motion .hero .area-nav a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:8px 10px;border:1px solid #2c2c31;border-radius:12px;background:rgba(20,20,23,.88);font-size:.86rem;line-height:1.25;color:var(--day);border-bottom:1px solid #2c2c31}
.hero .area-nav a:hover,.hero .area-nav a:focus-visible{border-color:var(--racing);color:var(--day);background-color:rgba(20,20,23,.88)}
@media (max-width:640px){
  .hero .hero-links{display:grid;grid-template-columns:1fr;gap:8px;width:100%;margin-top:18px}
  .hero .hero-links a.pill{padding:9px 14px;font-size:.86rem;min-height:42px;display:flex;align-items:center;justify-content:center}
  .hero .area-nav{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
}
.eyebrow .caps,.eyebrow2 .caps{text-transform:none}
/* the seven social icons stay on one row on a phone (owner's call, 2026-10-14): each one sized from the screen width */
@media (max-width:640px){
  .icon-row{flex-wrap:nowrap;gap:8px;justify-content:center}
  .icon-row .icon-btn{flex:none;--ib:min(48px,calc((100vw - 88px) / 7));width:var(--ib);height:var(--ib)}
  .icon-row:has(>:nth-child(8)) .icon-btn{--ib:min(48px,calc((100vw - 96px) / 8))}
  .icon-row .icon-btn svg{width:calc(var(--ib) * .44);height:calc(var(--ib) * .44)}
}