*{box-sizing:border-box}
:root{
  --sky:#b7e4ef;
  --ink:#101010;
  --grey:#c7c7c7;
  --grey2:#9f9f9f;
  --paper:#ececec;
  --blue:#0000ee;
  --line:rgba(0,0,0,.72);
}
html,body{margin:0;min-height:100%;background:var(--sky);color:var(--ink)}
body{font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
button,a{color:inherit}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px dotted var(--blue);outline-offset:3px}

#vaguery-space{
  position:relative;
  min-height:100vh;
  padding:22px 28px 116px 100px;
  background:
    radial-gradient(circle at 35% 22%,rgba(255,255,255,.14),transparent 34%),
    var(--sky);
}

.site-head{
  position:relative;
  min-height:86px;
  padding-left:95px;
  padding-right:100px;
}

.corner-logo{
  position:absolute;
  z-index:80;
  left:-72px;
  top:-10px;
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  text-decoration:none;
}
.corner-logo img{
  width:72px;
  height:72px;
  object-fit:contain;
  animation:v-spin 9s linear infinite;
  transform-origin:center;
}
.corner-logo:hover img{animation-duration:2.2s}
@keyframes v-spin{to{transform:rotate(360deg)}}

.main-nav{
  display:flex;
  gap:15px;
  width:min(920px,calc(100vw - 310px));
  margin:0 auto;
}
.main-nav button{
  flex:1;
  min-width:110px;
  height:47px;
  border:1px solid #8d8d8d;
  background:#bfbfbf;
  padding:0 14px;
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .08s,background .08s,color .08s;
}
.main-nav button:hover{
  background:var(--ink);
  color:#fff;
  transform:translateY(2px);
}
.main-nav button:active{transform:translateY(3px)}

.radio-launch{
  position:absolute;
  right:0;
  top:1px;
  width:66px;
  height:66px;
  padding:5px;
  border:0;
  background:#0c0c0c;
  cursor:pointer;
  display:grid;
  grid-template-columns:1fr;
  place-items:center;
}
.speaker-dot{
  width:28px;height:28px;border:6px solid var(--sky);border-radius:50%;position:absolute;top:7px
}
.speaker-dot.small{width:20px;height:20px;border-width:5px;top:37px}
.radio-label{
  position:absolute;
  right:74px;
  top:24px;
  font:10px "Courier New",monospace;
  letter-spacing:.12em;
  opacity:0;
  transition:opacity .15s;
}
.radio-launch:hover .radio-label{opacity:1}

.vertical-mark{
  position:absolute;
  z-index:2;
  left:23px;
  top:112px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:Arial,Helvetica,sans-serif;
  font-size:38px;
  line-height:1;
  letter-spacing:.03em;
  white-space:nowrap;
}

#desk{
  position:relative;
  min-height:690px;
  width:100%;
}

.floating-window{
  position:absolute;
  left:var(--x,26vw);
  top:var(--y,20vh);
  width:min(var(--w,420px),calc(100vw - 140px));
  min-width:250px;
  border:1px solid var(--line);
  background:var(--paper);
  box-shadow:5px 6px 0 rgba(0,0,0,.12);
  z-index:10;
}
.floating-window.is-active{box-shadow:6px 7px 0 rgba(0,0,0,.22)}
.window-bar{
  height:31px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-left:10px;
  border-bottom:1px solid var(--line);
  background:var(--grey2);
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  cursor:move;
  user-select:none;
  touch-action:none;
}
.window-close{
  width:32px;
  align-self:stretch;
  border:0;
  border-left:1px solid var(--line);
  background:transparent;
  font-size:19px;
  line-height:1;
  cursor:pointer;
}
.window-close:hover{background:var(--ink);color:white}
.window-body{
  min-height:105px;
  max-height:min(62vh,570px);
  overflow:auto;
  padding:16px;
}
.window-body p:first-child{margin-top:0}
.window-body p:last-child{margin-bottom:0}

.window-list{margin:0;padding:0;list-style:none}
.window-list li{border-bottom:1px solid rgba(0,0,0,.17)}
.window-list li:last-child{border-bottom:0}
.window-list button,
.text-link-button{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:8px 3px;
  cursor:pointer;
  font-weight:700;
  font-size:15px;
}
.window-list button:hover,
.text-link-button:hover{color:var(--blue);text-decoration:underline}

.archive-list{display:grid;gap:7px}
.archive-row{
  display:grid;
  grid-template-columns:62px 1fr;
  gap:11px;
  padding-bottom:7px;
  border-bottom:1px solid rgba(0,0,0,.2);
}
.archive-row:last-child{border-bottom:0}
.archive-thumb{
  width:62px;height:62px;object-fit:cover;border:1px solid var(--ink);background:#aaa
}
.archive-main{min-width:0}
.archive-title{
  appearance:none;border:0;background:none;padding:0;
  font-family:"Times New Roman",Times,serif;
  font-size:18px;font-weight:700;text-align:left;cursor:pointer
}
.archive-title:hover{color:var(--blue);text-decoration:underline}
.archive-artist{margin:2px 0;font-size:12px;font-weight:700}
.archive-meta{font:10px "Courier New",monospace;opacity:.7}

.artist-view{display:grid;grid-template-columns:120px 1fr;gap:15px}
.artist-view img{width:120px;height:120px;object-fit:cover;border:1px solid var(--ink)}
.artist-view h2,.release-view h2{font:700 28px/1 "Times New Roman",Times,serif;margin:0 0 7px}
.artist-bio{white-space:pre-line;line-height:1.38;font-family:"Times New Roman",Times,serif;font-size:16px}
.micro-links{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.micro-links a,.ticket-button{
  display:inline-block;border:1px solid var(--ink);background:#fff;
  padding:4px 7px;text-decoration:none;font-size:10px;font-weight:700;text-transform:uppercase
}
.micro-links a:hover,.ticket-button:hover{background:var(--ink);color:white}

.release-view{display:grid;grid-template-columns:150px 1fr;gap:16px}
.release-view>img{width:150px;height:150px;object-fit:cover;border:1px solid var(--ink)}
.release-meta{font:11px/1.5 "Courier New",monospace;margin:8px 0}

.events-table{width:100%;border-collapse:collapse;font-size:12px}
.events-table td{padding:8px 5px;border-bottom:1px solid rgba(0,0,0,.2);vertical-align:top}
.events-table tr:last-child td{border-bottom:0}
.event-date{white-space:nowrap;font:11px "Courier New",monospace}
.event-status{font:10px "Courier New",monospace}

.copy-text{
  font:17px/1.45 "Times New Roman",Times,serif;
  white-space:pre-line;
}
.contact-links{margin-top:16px}

.latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.latest-card{min-width:0}
.latest-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--ink)}
.latest-card button{
  border:0;background:none;padding:6px 0 0;text-align:left;cursor:pointer;
  font-family:"Times New Roman",Times,serif;font-size:15px;font-weight:700
}
.latest-card button:hover{color:var(--blue);text-decoration:underline}
.latest-card small{display:block;font:9px "Courier New",monospace;margin-top:2px}

.radio-shell{min-width:300px}
.radio-now{
  display:grid;grid-template-columns:54px 1fr;gap:11px;align-items:center;
  border-bottom:1px solid rgba(0,0,0,.25);padding-bottom:12px
}
.radio-cover{
  width:54px;height:54px;border:1px solid var(--ink);
  display:grid;place-items:center;background:#111;color:var(--sky);
  font:10px "Courier New",monospace
}
.radio-title{font:700 16px "Times New Roman",Times,serif}
.radio-sub{font:10px "Courier New",monospace;margin-top:3px}
.radio-progress{height:7px;border:1px solid var(--ink);margin:14px 0 4px;background:#fff}
.radio-progress span{display:block;width:0;height:100%;background:#111}
.radio-times{display:flex;justify-content:space-between;font:9px "Courier New",monospace}
.radio-controls{display:flex;gap:6px;margin-top:12px}
.radio-controls button{
  width:42px;height:31px;border:1px solid var(--ink);background:#d0d0d0;cursor:pointer
}
.radio-controls button:hover{background:#111;color:#fff}
.radio-message{
  margin-top:12px;padding-top:8px;border-top:1px dashed rgba(0,0,0,.35);
  font:10px "Courier New",monospace
}

#site-footer{
  position:absolute;
  left:100px;
  bottom:34px;
  max-width:min(650px,calc(100vw - 150px));
  font:11px/1.5 "Courier New",monospace;
}
.footer-rule{display:block;width:min(650px,60vw);border-top:2px solid var(--ink);margin-bottom:10px}
#footer-content a{color:var(--ink)}
#footer-content a:hover{color:var(--blue)}

.loading,.empty{font:11px "Courier New",monospace}

@media(max-width:820px){
  body{overflow:auto}
  #vaguery-space{padding:16px 14px 120px;min-height:100vh}
  .site-head{min-height:150px;padding:0 62px 0 64px}
  .corner-logo{left:0;top:-4px;width:56px;height:56px}
  .corner-logo img{width:54px;height:54px}
  .radio-launch{right:0;top:0;width:52px;height:52px}
  .speaker-dot{width:22px;height:22px;border-width:5px;top:5px}
  .speaker-dot.small{width:15px;height:15px;border-width:4px;top:31px}
  .radio-label{display:none}
  .main-nav{
    width:100%;margin:0;padding-top:65px;gap:5px;display:grid;
    grid-template-columns:repeat(3,1fr)
  }
  .main-nav button{min-width:0;height:35px;padding:0 5px;font-size:10px}
  .vertical-mark{
    position:fixed;left:auto;right:7px;top:auto;bottom:10px;
    writing-mode:horizontal-tb;transform:none;font-size:9px;letter-spacing:.12em;
    opacity:.6;z-index:1
  }
  #desk{min-height:600px}
  .floating-window{
    position:fixed !important;
    left:10px !important;top:155px !important;
    width:calc(100vw - 20px) !important;
    min-width:0;max-height:calc(100vh - 175px);
    z-index:100 !important;
    box-shadow:4px 4px 0 rgba(0,0,0,.16)
  }
  .window-bar{cursor:default}
  .window-body{max-height:calc(100vh - 220px)}
  .initial-window[data-window="latest"]{display:none}
  .latest-grid{grid-template-columns:repeat(2,1fr)}
  .artist-view,.release-view{grid-template-columns:92px 1fr}
  .artist-view img{width:92px;height:92px}
  .release-view>img{width:92px;height:92px}
  #site-footer{position:absolute;left:14px;right:14px;bottom:30px;max-width:none}
  .footer-rule{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .corner-logo img{animation:none}
}


/* V4.1 — more depth, less "OS", more Vaguery space */
#vaguery-space{
  background:
    linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,0) 26%),
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.30),transparent 28%),
    radial-gradient(circle at 84% 72%,rgba(0,0,0,.045),transparent 32%),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.012) 0 1px,
      transparent 1px 5px
    ),
    var(--sky);
}

#desk::before{
  content:"";
  position:absolute;
  inset:2vh 2vw 12vh 1vw;
  border:1px solid rgba(0,0,0,.08);
  pointer-events:none;
}

.site-head::after{
  content:"VAGUERY / ONLINE ARCHIVE";
  position:absolute;
  left:96px;
  top:58px;
  font:9px "Courier New",monospace;
  letter-spacing:.12em;
  opacity:.55;
}

.floating-window{
  background:
    linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 44px),
    var(--paper);
  box-shadow:
    1px 1px 0 rgba(255,255,255,.65) inset,
    7px 8px 0 rgba(0,0,0,.10),
    14px 18px 34px rgba(0,0,0,.08);
}

.floating-window.is-active{
  box-shadow:
    1px 1px 0 rgba(255,255,255,.7) inset,
    8px 9px 0 rgba(0,0,0,.16),
    18px 24px 42px rgba(0,0,0,.12);
}

.window-bar{
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.12) 0 1px,
      transparent 1px 5px
    ),
    var(--grey2);
}

.window-bar::before{
  content:"";
  width:7px;
  height:7px;
  border:1px solid rgba(0,0,0,.65);
  background:var(--sky);
  margin-right:7px;
  flex:0 0 auto;
}
.window-bar>span{margin-right:auto}
.window-close{margin-left:8px}

.no-pad{padding:0}
.window-pad{padding:16px}

.artists-browser{
  display:grid;
  grid-template-columns:170px 1fr;
  min-height:250px;
}
.artist-browser-list{
  border-right:1px solid rgba(0,0,0,.55);
  background:rgba(255,255,255,.18);
}
.artist-browser-list button{
  width:100%;
  border:0;
  border-bottom:1px solid rgba(0,0,0,.12);
  background:transparent;
  padding:9px 11px;
  text-align:left;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.artist-browser-list button:hover,
.artist-browser-list button.active{
  background:#111;
  color:#fff;
}
.artist-browser-detail{padding:14px}
.artist-browser-detail img{
  width:100%;
  height:128px;
  object-fit:cover;
  border:1px solid #111;
  
  margin-bottom:10px;
}
.artist-browser-detail h2{
  margin:0 0 4px;
  font:700 27px/1 "Times New Roman",Times,serif;
}
.artist-browser-detail .artist-sub{
  font:9px "Courier New",monospace;
  letter-spacing:.01em;
  margin-bottom:9px;
  opacity:.65;
}
.artist-browser-detail .artist-mini-bio{
  font:15px/1.3 "Times New Roman",Times,serif;
  white-space:pre-line;
  max-height:84px;
  overflow:hidden;
}
.artist-browser-detail .open-profile{
  margin-top:10px;
  border:1px solid #111;
  background:#fff;
  padding:4px 8px;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}
.artist-browser-detail .open-profile:hover{background:#111;color:#fff}

.welcome-home-window .window-body{
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 4px),
    rgba(255,255,255,.28);
}
.welcome-home-window .copy-text{
  font-family:"Courier New",monospace;
  font-size:13px;
  line-height:1.5;
}
.welcome-home-window .copy-text::after{
  content:"_";
  animation:v-cursor .9s steps(1) infinite;
}
@keyframes v-cursor{50%{opacity:0}}

.latest-home-window .window-body{
  background:rgba(255,255,255,.14);
}
.latest-home-window .latest-card{
  padding:7px;
  border:1px solid rgba(0,0,0,.28);
  background:rgba(255,255,255,.35);
}
.latest-home-window .latest-card img{
  box-shadow:3px 3px 0 rgba(0,0,0,.10);
}

.radio-launch{
  box-shadow:5px 5px 0 rgba(0,0,0,.12);
}
.radio-launch:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 rgba(0,0,0,.12)}

.vertical-mark{
  text-shadow:1px 1px 0 rgba(255,255,255,.45);
}

@media(max-width:820px){
  #desk::before{display:none}
  .site-head::after{display:none}
  .artists-browser{grid-template-columns:1fr}
  .artist-browser-list{
    display:flex;
    overflow:auto;
    border-right:0;
    border-bottom:1px solid rgba(0,0,0,.55);
  }
  .artist-browser-list button{
    width:auto;
    white-space:nowrap;
    border-bottom:0;
    border-right:1px solid rgba(0,0,0,.12);
  }
  .artist-browser-detail img{height:120px}
  .initial-window.latest-home-window,
  .initial-window.welcome-home-window{display:none}
}


/* V4.2 — tighter nav, clearer radio, centered opening windows */
.site-head{
  padding-left:95px;
  padding-right:70px;
}
.main-nav{
  justify-content:flex-start;
  width:auto;
  max-width:900px;
  margin:0;
  gap:8px;
}
.main-nav button{
  flex:0 0 auto;
  min-width:126px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:0 12px 0 10px;
  border:1px solid #111;
  background:
    linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 45%),
    #bdbdbd;
  box-shadow:2px 2px 0 rgba(0,0,0,.14);
  font-size:12px;
  letter-spacing:.04em;
}
.main-nav button:hover{
  background:#111;
  color:#fff;
  transform:translate(1px,1px);
  box-shadow:none;
}

.nav-icon{
  position:relative;
  width:18px;
  height:18px;
  flex:0 0 18px;
  border:1px solid currentColor;
}
.icon-artists::before,
.icon-artists::after{
  content:"";
  position:absolute;
  border:1px solid currentColor;
  border-radius:50%;
  background:transparent;
}
.icon-artists::before{width:5px;height:5px;left:2px;top:2px}
.icon-artists::after{width:5px;height:5px;right:2px;top:2px}
.icon-artists{
  border-top:0;
}
.icon-artists span{display:none}

.icon-catalogue{
  border-radius:50%;
}
.icon-catalogue::before{
  content:"";
  position:absolute;
  width:5px;height:5px;
  border:1px solid currentColor;
  border-radius:50%;
  left:5px;top:5px;
}
.icon-catalogue::after{
  content:"";
  position:absolute;
  width:1px;height:7px;
  background:currentColor;
  left:8px;top:1px;
}

.icon-events::before{
  content:"";
  position:absolute;
  left:2px;right:2px;top:5px;
  border-top:1px solid currentColor;
}
.icon-events::after{
  content:"•••";
  position:absolute;
  left:2px;top:5px;
  font:9px/1 monospace;
  letter-spacing:1px;
}
.icon-events{
  border-top-width:3px;
}

.icon-about::before{
  content:"i";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font:700 15px/1 "Times New Roman",serif;
}

.icon-contact::before{
  content:"";
  position:absolute;
  left:2px;right:2px;top:5px;
  border-top:1px solid currentColor;
  transform:skewY(-24deg);
}
.icon-contact::after{
  content:"";
  position:absolute;
  left:2px;right:2px;top:5px;
  border-top:1px solid currentColor;
  transform:skewY(24deg);
}

.radio-launch{
  right:4px;
  top:5px;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid #111;
  background:#111;
  box-shadow:2px 2px 0 rgba(0,0,0,.14);
}
.radio-glyph{
  display:block;
  color:var(--sky);
  font:700 22px/1 "Times New Roman",serif;
  transform:translateY(-1px);
}
.radio-label{
  right:47px;
  top:14px;
}
.radio-launch:hover{
  transform:translate(1px,1px);
  box-shadow:none;
}

.latest-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
  padding-top:9px;
  border-top:1px solid rgba(0,0,0,.22);
}
.latest-all-button{
  border:1px solid #111;
  background:#fff;
  padding:5px 9px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
}
.latest-all-button:hover{
  background:#111;
  color:#fff;
}

/* Newly created windows should read clearly as centered content */
.floating-window[data-dynamic="true"]{
  max-width:calc(100vw - 150px);
}

@media(max-width:820px){
  .site-head{padding:0 55px 0 64px}
  .main-nav{
    width:100%;
    max-width:none;
    margin:0;
    padding-top:65px;
    gap:5px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
  }
  .main-nav button{
    min-width:0;
    width:100%;
    height:34px;
    font-size:10px;
  }
  .radio-launch{width:38px;height:38px;top:2px}
  .radio-glyph{font-size:20px}
}


/* V4.3 — audio tracklists + working persistent Vaguery Radio */
.release-tracklist{margin-top:16px;border-top:1px solid rgba(0,0,0,.35)}
.release-tracklist h3{margin:10px 0 6px;font:700 11px "Courier New",monospace;letter-spacing:.08em}
.track-row{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.14)}
.track-num{font:10px "Courier New",monospace;opacity:.55}
.track-title{font:15px "Times New Roman",Times,serif}
.track-play{border:1px solid #111;background:#fff;min-width:29px;height:25px;cursor:pointer;font-size:11px}
.track-play:hover,.track-play.is-playing{background:#111;color:#fff}
.track-missing{font:9px "Courier New",monospace;opacity:.45}
.radio-shell .radio-cover.has-art{background-size:cover;background-position:center;color:transparent}
.radio-volume{display:flex;align-items:center;gap:7px;margin-top:10px;font:9px "Courier New",monospace}
.radio-volume input{width:120px}
.radio-queue-info{margin-top:7px;font:9px "Courier New",monospace;opacity:.6}

/* V4.5 */
:root{--bg:#dcecf0;--sky:#dcecf0;--gloss-edge:#356a82}
html,body,#desk{background:#dcecf0!important;background-image:none!important}
#desk::before,#desk::after,body::before,body::after{display:none!important}
.site-head{background:transparent!important;border:0!important;box-shadow:none!important}
.main-nav{gap:7px}
.main-nav button,.radio-launch,.window-max,.window-close,.latest-all-button,.open-profile,.track-play{
 border:2px solid var(--gloss-edge)!important;border-radius:9px!important;
 background:linear-gradient(180deg,#effcff 0%,#d7f2f8 10%,#9bc8d9 48%,#689ab1 52%,#a8d7e2 100%)!important;
 color:#173b4d!important;
 box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(20,65,85,.25),0 1px 2px rgba(20,65,85,.18)!important;
 text-shadow:0 1px 0 rgba(255,255,255,.8)
}
.main-nav button{height:40px;min-width:122px;font-weight:700}
.main-nav button:hover,.radio-launch:hover,.window-max:hover,.window-close:hover{filter:brightness(1.06);transform:none!important}
.main-nav button:active,.radio-launch:active,.window-max:active,.window-close:active{
 background:linear-gradient(180deg,#75a8bd,#c9e9f1)!important;box-shadow:inset 0 2px 4px rgba(20,65,85,.28)!important
}
.radio-glyph{color:#173b4d!important;text-shadow:0 1px #fff}
.window-actions{display:flex;gap:4px;align-items:center}
.window-max,.window-close{width:24px!important;height:22px!important;padding:0!important;font:700 12px/1 Arial,sans-serif!important}
.floating-window{min-width:270px;min-height:160px;resize:both;overflow:auto}
.window-bar{position:sticky;top:0;z-index:5}
.floating-window.is-maximized{left:5vw!important;top:5vh!important;width:90vw!important;height:86vh!important;max-width:none!important;max-height:none!important}
.floating-window.is-maximized .window-body{max-height:calc(86vh - 32px);overflow:auto}
.release-videos{margin-top:14px;padding-top:9px;border-top:1px solid rgba(0,0,0,.25)}
.release-videos h3{margin:0 0 7px;font:700 11px "Courier New",monospace;letter-spacing:.08em}
.video-link{display:flex;width:100%;justify-content:space-between;gap:10px;padding:7px 8px;margin:4px 0;border:1px solid rgba(0,0,0,.3);background:rgba(255,255,255,.38);cursor:pointer;text-align:left}
.video-link:hover{background:rgba(255,255,255,.72)}
.video-window{padding:0}.video-frame{display:block;width:100%;aspect-ratio:16/9;border:0;background:#111}
@media(max-width:820px){.floating-window{resize:none}.floating-window.is-maximized{left:2vw!important;top:2vh!important;width:96vw!important;height:92vh!important}}


/* V4.6 — closer to the original Vaguery mockup, less OS-like */
:root{
  --bg:#cfe8ec;
  --panel:#c7c7c7;
  --panel-light:#dedede;
  --panel-dark:#999;
  --ink:#111;
  --cyan:#89dbe4;
}
html,body,#desk{
  background:#cfe8ec!important;
  background-image:none!important;
}
.site-head{
  padding-left:92px;
  padding-right:62px;
}

/* menu: flatter, squarer, more like the mockup */
.main-nav{
  gap:6px;
  align-items:center;
}
.main-nav button{
  min-width:118px!important;
  height:34px!important;
  padding:0 10px!important;
  border:1px solid #111!important;
  border-radius:0!important;
  background:#c8c8c8!important;
  color:#111!important;
  box-shadow:
    inset 1px 1px 0 #eee,
    inset -1px -1px 0 #8e8e8e,
    2px 2px 0 rgba(0,0,0,.12)!important;
  text-shadow:none!important;
  font:700 11px "Arial Narrow",Arial,sans-serif!important;
  letter-spacing:.04em;
}
.main-nav button:hover{
  background:#d8d8d8!important;
  filter:none!important;
}
.main-nav button:active{
  transform:translate(1px,1px)!important;
  box-shadow:
    inset 1px 1px 0 #8e8e8e,
    inset -1px -1px 0 #eee!important;
}
.nav-icon{
  width:15px!important;
  height:15px!important;
  flex-basis:15px!important;
  border:1px solid currentColor!important;
}

/* tiny radio button */
.radio-launch{
  width:34px!important;
  height:34px!important;
  right:7px!important;
  top:3px!important;
  border:1px solid #111!important;
  border-radius:0!important;
  background:#c8c8c8!important;
  box-shadow:inset 1px 1px 0 #eee,inset -1px -1px 0 #8e8e8e,2px 2px 0 rgba(0,0,0,.12)!important;
}
.radio-glyph{font-size:18px!important;color:#111!important;text-shadow:none!important}
.radio-label{font-size:8px!important;right:40px!important;top:12px!important}

/* windows: depth, but not Windows 95 */
.floating-window{
  border:1px solid #111!important;
  border-radius:0!important;
  background:#cfcfcf!important;
  box-shadow:8px 8px 0 rgba(0,0,0,.18)!important;
}
.window-bar{
  min-height:26px;
  background:#bcbcbc!important;
  border-bottom:1px solid #111!important;
  box-shadow:inset 0 1px 0 #efefef!important;
}
.window-title{
  font-family:"Courier New",monospace!important;
  font-size:11px!important;
  letter-spacing:.05em!important;
}
.window-title::before{
  content:"";
  width:7px;
  height:7px;
  display:inline-block;
  margin-right:7px;
  background:#8adbe4;
  border:1px solid #111;
  vertical-align:0;
}
.window-max,.window-close{
  width:22px!important;
  height:20px!important;
  border:1px solid #111!important;
  border-radius:0!important;
  background:#d1d1d1!important;
  color:#111!important;
  box-shadow:inset 1px 1px 0 #eee,inset -1px -1px 0 #8e8e8e!important;
  text-shadow:none!important;
}
.window-max:hover,.window-close:hover{background:#e0e0e0!important;filter:none!important}
.window-body{background:#d4d4d4!important}

/* general buttons: subdued grey + cyan accent, not glossy */
.latest-all-button,.open-profile,.track-play,.video-link{
  border:1px solid #111!important;
  border-radius:0!important;
  background:#d8d8d8!important;
  color:#111!important;
  box-shadow:inset 1px 1px 0 #f3f3f3,inset -1px -1px 0 #9a9a9a!important;
  text-shadow:none!important;
}
.latest-all-button:hover,.open-profile:hover,.track-play:hover,.video-link:hover{
  background:#e6e6e6!important;
}
.latest-card,.artist-browser-detail,.artist-browser-list{
  box-shadow:none!important;
}

/* video thumbnails */
.release-videos{
  margin-top:16px;
  padding-top:10px;
}
.video-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.video-card{
  border:1px solid rgba(0,0,0,.35);
  background:#ddd;
  padding:5px;
}
.video-thumb{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid #111;
  background:#111;
  cursor:pointer;
}
.video-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.video-thumb::after{
  content:"▶";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:38px;
  height:30px;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.74);
  color:#fff;
  border:1px solid rgba(255,255,255,.7);
  font-size:13px;
}
.video-card-title{
  margin-top:5px;
  font:11px "Courier New",monospace;
  line-height:1.25;
}

/* artist clips section */
.artist-videos{
  margin-top:16px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.25);
}
.artist-videos h3{
  margin:0 0 8px;
  font:700 11px "Courier New",monospace;
  letter-spacing:.08em;
}

/* larger artist profile */
.floating-window[data-window^="artist-"]{
  min-width:680px;
}
@media(max-width:820px){
  .floating-window[data-window^="artist-"]{min-width:0}
  .video-grid{grid-template-columns:1fr}
}


/* V4.7 */
:root{
  --bg:#D7E7F7;
  --sky:#D7E7F7;
}
html,body,#desk{
  background:#D7E7F7!important;
  background-image:none!important;
}
#desk,.site-head{border:0!important;outline:0!important}
#desk::before,#desk::after,body::before,body::after{display:none!important}

/* Vaguery Records — softer/editorial */
.vertical-mark{
  font-family:Georgia,"Times New Roman",serif!important;
  font-style:italic!important;
  font-weight:400!important;
  letter-spacing:.015em!important;
}

/* More semantic menu icons */
.nav-icon{
  position:relative!important;
  border:0!important;
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
}
.icon-artists::before,.icon-artists::after{
  content:""!important;
  position:absolute!important;
  border:1px solid currentColor!important;
  border-radius:50%!important;
  width:5px!important;height:5px!important;top:1px!important;
}
.icon-artists::before{left:1px!important}
.icon-artists::after{right:1px!important}
.icon-artists{
  border-bottom:1px solid transparent!important;
}
.icon-artists span{display:none}
.icon-artists::marker{display:none}
.icon-artists{
  background:
    radial-gradient(ellipse at 25% 90%,transparent 0 34%,currentColor 36% 42%,transparent 44%),
    radial-gradient(ellipse at 75% 90%,transparent 0 34%,currentColor 36% 42%,transparent 44%);
}

.icon-catalogue{
  border:1px solid currentColor!important;
  border-radius:50%!important;
}
.icon-catalogue::before{
  content:""!important;
  position:absolute!important;
  width:5px!important;height:5px!important;
  left:5px!important;top:5px!important;
  border:1px solid currentColor!important;
  border-radius:50%!important;
}
.icon-catalogue::after{
  content:""!important;
  position:absolute!important;
  width:1px!important;height:1px!important;
  left:8px!important;top:8px!important;
  background:currentColor!important;
}

.icon-events{
  border:1px solid currentColor!important;
  border-top:4px solid currentColor!important;
}
.icon-events::before{
  content:""!important;
  position:absolute!important;
  left:3px!important;right:3px!important;top:5px!important;
  height:1px!important;background:currentColor!important;
  box-shadow:0 4px 0 currentColor!important;
}
.icon-events::after{content:""!important}

.icon-about{
  border:1px solid currentColor!important;
  border-radius:50%!important;
}
.icon-about::before{
  content:"i"!important;
  position:absolute!important;inset:0!important;
  display:grid!important;place-items:center!important;
  font:italic 700 13px Georgia,serif!important;
}
.icon-contact{
  border:1px solid currentColor!important;
}
.icon-contact::before,.icon-contact::after{
  content:""!important;
  position:absolute!important;
  width:9px!important;height:1px!important;
  top:6px!important;background:currentColor!important;
}
.icon-contact::before{left:0!important;transform:rotate(33deg)!important;transform-origin:left center!important}
.icon-contact::after{right:0!important;transform:rotate(-33deg)!important;transform-origin:right center!important}

/* Event artist links */
.event-artist{
  border:0;
  padding:0;
  background:transparent;
  color:#111;
  font:700 inherit;
  text-decoration:underline;
  cursor:pointer;
}
.event-artist:hover{background:#111;color:#fff}

/* admin-style artist selectors on public doesn't apply, harmless */


/* V4.8 — layout cleanup */
:root{
  --bg:#D7E7F7;
  --sky:#D7E7F7;
}
html, body, #desk, .site-shell, .site-main, .site-head{
  background:#D7E7F7!important;
  background-image:none!important;
}
html,body{
  margin:0!important;
  min-height:100%!important;
}
body{
  overflow:hidden;
}
#desk{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
#desk::before,#desk::after,
body::before,body::after,
.site-shell::before,.site-shell::after,
.site-main::before,.site-main::after,
.site-head::before,.site-head::after{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* Vaguery Records — sans serif, light + italic */
.vertical-mark{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-style:italic!important;
  font-weight:300!important;
  letter-spacing:.03em!important;
}

/* titlebar actions always right */
.window-bar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}
.window-title{
  flex:1 1 auto!important;
  min-width:0!important;
}
.window-actions{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;
  flex:0 0 auto!important;
}

/* safer default window sizing */
.floating-window{
  max-width:calc(100vw - 24px)!important;
  max-height:calc(100vh - 24px)!important;
}
.floating-window .window-body{
  overflow:auto;
}

/* mobile header/menu */
@media(max-width:820px){
  body{overflow:auto}
  .site-head{
    position:relative!important;
    padding:10px 50px 0 58px!important;
    min-height:auto!important;
  }
  .main-nav{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    align-items:stretch!important;
  }
  .main-nav button{
    width:100%!important;
    min-width:0!important;
    height:36px!important;
    justify-content:flex-start!important;
    padding:0 8px!important;
  }
  .radio-launch{
    position:absolute!important;
    top:10px!important;
    right:8px!important;
  }
  .vertical-mark{
    left:9px!important;
    top:10px!important;
  }
  #desk{
    min-height:calc(100vh - 96px)!important;
    padding-top:8px!important;
  }
}


/* V4.9 — blue palette + final background/titlebar cleanup */
:root{
  --bg:#D7E7F7;
  --sky:#D7E7F7;
  --blue-0:#D7E7F7;
  --blue-1:#C6DCF1;
  --blue-2:#A9C9E8;
  --blue-3:#8BB7E0;
  --blue-4:#67A4D9;
  --blue-5:#438DCC;
  --blue-6:#2F78B9;
  --blue-7:#285F92;
  --blue-8:#1C456B;
  --blue-9:#102D48;
  --blue-10:#071B2D;
}

/* Absolutely uniform page background */
html,
body,
#vaguery-space,
.site-head,
#desk,
#site-footer{
  background:#D7E7F7!important;
  background-color:#D7E7F7!important;
  background-image:none!important;
}
#vaguery-space{
  box-shadow:none!important;
  border:0!important;
  outline:0!important;
}
html::before,html::after,
body::before,body::after,
#vaguery-space::before,#vaguery-space::after,
.site-head::before,.site-head::after,
#desk::before,#desk::after,
#site-footer::before,#site-footer::after{
  display:none!important;
  content:none!important;
  background:none!important;
  box-shadow:none!important;
  border:0!important;
}

/* VAGUERY RECORDS — same sans serif, longer + bolder */
.vertical-mark{
  left:25px!important;
  top:96px!important;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-style:italic!important;
  font-weight:600!important;
  font-size:42px!important;
  line-height:1!important;
  letter-spacing:.085em!important;
  color:var(--blue-10)!important;
}

/* Windows use the supplied blue family instead of neutral grey */
.floating-window{
  background:var(--blue-1)!important;
  border:1px solid var(--blue-8)!important;
  box-shadow:7px 7px 0 rgba(16,45,72,.16)!important;
}
.floating-window.is-active{
  box-shadow:8px 8px 0 rgba(16,45,72,.23)!important;
}
.window-bar{
  position:sticky!important;
  top:0!important;
  z-index:6!important;
  display:block!important;
  height:30px!important;
  padding:0 64px 0 10px!important;
  background:var(--blue-3)!important;
  border-bottom:1px solid var(--blue-8)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62)!important;
  color:var(--blue-10)!important;
  line-height:30px!important;
}
.window-bar > span:first-child,
.window-title{
  display:block!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.window-actions{
  position:absolute!important;
  right:4px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;
  width:auto!important;
}
.window-max,.window-close{
  position:relative!important;
  inset:auto!important;
  flex:0 0 24px!important;
  width:24px!important;
  height:22px!important;
  padding:0!important;
  border:1px solid var(--blue-8)!important;
  border-radius:0!important;
  background:var(--blue-2)!important;
  color:var(--blue-10)!important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.72),inset -1px -1px 0 rgba(40,95,146,.3)!important;
  line-height:20px!important;
  text-align:center!important;
}
.window-max:hover,.window-close:hover{
  background:var(--blue-4)!important;
  color:white!important;
}
.window-body{
  background:var(--blue-1)!important;
}

/* Menu/buttons — blue but still restrained and web-like */
.main-nav button,
.radio-launch,
.latest-all-button,
.open-profile,
.track-play{
  border:1px solid var(--blue-8)!important;
  border-radius:0!important;
  background:var(--blue-2)!important;
  color:var(--blue-10)!important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.72),
    inset -1px -1px 0 rgba(40,95,146,.28),
    2px 2px 0 rgba(16,45,72,.10)!important;
  text-shadow:none!important;
}
.main-nav button:hover,
.radio-launch:hover,
.latest-all-button:hover,
.open-profile:hover,
.track-play:hover{
  background:var(--blue-4)!important;
  color:white!important;
}
.main-nav button:active,
.radio-launch:active{
  background:var(--blue-5)!important;
  box-shadow:inset 1px 1px 3px rgba(16,45,72,.28)!important;
}
.nav-icon{color:var(--blue-9)!important}

/* Internal panels */
.artist-browser-list,
.artist-browser-detail,
.latest-card,
.video-card{
  background:rgba(255,255,255,.22)!important;
  border-color:rgba(28,69,107,.38)!important;
}
.artist-browser-list button{
  color:var(--blue-10)!important;
}
.artist-browser-list button.active,
.artist-browser-list button:hover{
  background:var(--blue-6)!important;
  color:white!important;
}
.video-card{background:var(--blue-2)!important}

/* keep footer transparent over same continuous color */
#site-footer,.footer-rule,#footer-content{
  background:transparent!important;
}

@media(max-width:820px){
  .vertical-mark{
    left:10px!important;
    top:75px!important;
    font-size:24px!important;
    letter-spacing:.07em!important;
  }
  .window-bar{
    padding-right:64px!important;
  }
}


/* V4.10 — definitive titlebar fix */
.window-bar{
  position:sticky!important;
  top:0!important;
  z-index:6!important;

  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;

  width:100%!important;
  height:30px!important;
  min-height:30px!important;

  padding:0 4px 0 10px!important;
  box-sizing:border-box!important;
  line-height:normal!important;
}

/* Both initial-window titles and dynamically-created .window-title */
.window-bar > span:first-child:not(.window-actions),
.window-title{
  position:static!important;
  inset:auto!important;
  grid-column:1!important;

  display:block!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;

  margin:0!important;
  padding:0!important;

  text-align:left!important;
  justify-self:stretch!important;
  align-self:center!important;

  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Controls are always the second grid column */
.window-actions{
  position:static!important;
  inset:auto!important;
  transform:none!important;

  grid-column:2!important;
  justify-self:end!important;
  align-self:center!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;

  width:auto!important;
  height:22px!important;

  margin:0!important;
  padding:0!important;
}

.window-max,
.window-close{
  position:static!important;
  inset:auto!important;
  transform:none!important;

  flex:0 0 24px!important;
  width:24px!important;
  height:22px!important;

  margin:0!important;
  padding:0!important;

  line-height:20px!important;
  text-align:center!important;
}


/* V4.11 — titlebar alignment fix
   Remove legacy pseudo-element that was still participating in layout. */
.window-bar::before{
  content:none!important;
  display:none!important;
}

/* One stable horizontal line for title + controls */
.window-bar{
  position:sticky!important;
  top:0!important;
  z-index:6!important;

  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:0!important;

  width:100%!important;
  height:30px!important;
  min-height:30px!important;

  margin:0!important;
  padding:0 4px 0 10px!important;
  box-sizing:border-box!important;

  line-height:30px!important;
}

/* Initial windows use the first span; dynamic windows use .window-title */
.window-bar > span:first-child:not(.window-actions),
.window-title{
  position:static!important;
  inset:auto!important;

  flex:1 1 auto!important;
  align-self:center!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;

  width:auto!important;
  height:30px!important;
  min-width:0!important;

  margin:0!important;
  padding:0!important;

  box-sizing:border-box!important;
  text-align:left!important;
  line-height:30px!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Use the small cyan marker on the title itself, not on the bar */
.window-bar > span:first-child:not(.window-actions)::before,
.window-title::before{
  content:""!important;
  display:block!important;
  flex:0 0 7px!important;

  width:7px!important;
  height:7px!important;

  margin:0 7px 0 0!important;
  padding:0!important;

  background:var(--blue-4)!important;
  border:1px solid var(--blue-9)!important;
  box-sizing:border-box!important;
}

/* Controls sit on the exact same center line */
.window-actions{
  position:static!important;
  inset:auto!important;
  transform:none!important;

  flex:0 0 auto!important;
  align-self:center!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;

  width:auto!important;
  height:22px!important;

  margin:0 0 0 8px!important;
  padding:0!important;
}

.window-max,
.window-close{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  align-self:center!important;

  flex:0 0 24px!important;
  width:24px!important;
  height:22px!important;

  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  line-height:1!important;
}


/* V4.12 — absolute titlebar geometry
   Completely removes flex/grid interactions from previous versions. */
.window-bar{
  position:sticky!important;
  top:0!important;
  z-index:6!important;

  display:block!important;

  width:100%!important;
  height:32px!important;
  min-height:32px!important;

  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;

  line-height:normal!important;
  overflow:hidden!important;
}

/* Never let the bar itself create the little marker */
.window-bar::before,
.window-bar::after{
  content:none!important;
  display:none!important;
}

/* Title is physically locked to the left and vertically centred */
.window-bar > span:first-child:not(.window-actions),
.window-title{
  position:absolute!important;
  left:10px!important;
  right:68px!important;
  top:50%!important;
  bottom:auto!important;

  transform:translateY(-50%)!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;

  width:auto!important;
  height:22px!important;
  min-width:0!important;

  margin:0!important;
  padding:0!important;

  box-sizing:border-box!important;
  text-align:left!important;
  line-height:1!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Marker belongs to the title, therefore it shares the same centre line */
.window-bar > span:first-child:not(.window-actions)::before,
.window-title::before{
  content:""!important;
  display:block!important;

  flex:0 0 7px!important;
  width:7px!important;
  height:7px!important;

  margin:0 7px 0 0!important;
  padding:0!important;

  background:var(--blue-4)!important;
  border:1px solid var(--blue-9)!important;
  box-sizing:border-box!important;
}

/* Controls are independently locked to the right and same centre line */
.window-actions{
  position:absolute!important;
  right:4px!important;
  left:auto!important;
  top:50%!important;
  bottom:auto!important;

  transform:translateY(-50%)!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;

  width:auto!important;
  height:22px!important;

  margin:0!important;
  padding:0!important;
}

.window-max,
.window-close{
  position:static!important;
  inset:auto!important;
  transform:none!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  flex:0 0 24px!important;
  width:24px!important;
  height:22px!important;

  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;

  line-height:1!important;
}


/* V4.18 — BLACK & WHITE ONLY
   Visual palette override. No layout, sizing, typography or interaction changes. */
:root{
  --blue-0:#ffffff!important;
  --blue-1:#f7f7f7!important;
  --blue-2:#eeeeee!important;
  --blue-3:#dddddd!important;
  --blue-4:#cccccc!important;
  --blue-5:#aaaaaa!important;
  --blue-6:#888888!important;
  --blue-7:#666666!important;
  --blue-8:#444444!important;
  --blue-9:#222222!important;
  --blue-10:#000000!important;
  --ink:#000000!important;
  --paper:#ffffff!important;
}
html,
body,
#vaguery-space,
.site-head,
#desk,
#site-footer{
  background:#ffffff!important;
  background-color:#ffffff!important;
  background-image:none!important;
  color:#000000!important;
}
body{
  
}
.window,
.window-bar,
.window-body,
.nav-button,
.menu-badge,
button,
input,
select,
textarea{
  border-color:#000000!important;
}
.window{
  box-shadow:16px 16px 0 rgba(0,0,0,.14)!important;
}
.window-bar{
  background:#d9d9d9!important;
  color:#000000!important;
}
.window-body{
  background:#f3f3f3!important;
  color:#000000!important;
}
a,
a:visited{
  color:#000000!important;
}


/* V4.20 — PURE BLACK/WHITE THEME
   UI/chrome only. Media/content imagery keeps original colors. */
html,
body,
#vaguery-space,
.site-head,
#desk,
#site-footer{
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  color:#000!important;
}

.vertical-mark,
.site-head,
.site-head a,
#site-footer,
#site-footer a,
.window-body,
.window-body a,
.window-body p,
.window-body li,
.window-body h1,
.window-body h2,
.window-body h3,
.window-body h4,
.window-body span,
.window-body label{
  color:#000!important;
}

.window{
  background:#fff!important;
  border-color:#000!important;
  box-shadow:14px 14px 0 rgba(0,0,0,.16)!important;
}

.window-bar{
  background:#000!important;
  color:#fff!important;
  border-color:#000!important;
}

.window-bar .window-title,
.window-bar .window-actions,
.window-bar .window-actions button{
  color:#fff!important;
}

.window-bar .window-actions button{
  background:#000!important;
  border-color:#fff!important;
}

.window-bar .window-actions button:hover{
  background:#fff!important;
  color:#000!important;
}

.window-body{
  background:#fff!important;
  border-color:#000!important;
}

.nav-button,
.menu-badge,
button,
input,
select,
textarea{
  background:#fff!important;
  color:#000!important;
  border-color:#000!important;
  box-shadow:none!important;
}

.nav-button:hover,
.menu-badge:hover,
button:hover{
  background:#000!important;
  color:#fff!important;
}

a,
a:visited{
  color:#000!important;
}

hr,
.track-row,
.release-tracklist,
.radio-progress,
.radio-controls button,
.radio-volume input,
.radio-times,
.radio-queue-info{
  border-color:#000!important;
}

/* Keep media itself untouched */
img,
video,
iframe,
canvas,
svg image,
.radio-cover.has-art{
  filter:none!important;
}


/* V4.21 — MEDIA MUST KEEP ORIGINAL COLORS */
body{
  filter:none!important;
}
img,
picture,
video,
iframe,
canvas,
svg,
svg image,
.artist-browser-detail img,
.artist-view img,
.release-view img,
.latest-card img,
.archive-card img,
.radio-cover.has-art{
  filter:none!important;
  -webkit-filter:none!important;
}


/* V4.22 — STRICT TWO-COLOUR UI
   Theme = black + white only. Media keeps original colours. */
:root{
  --bg:#fff!important;
  --sky:#fff!important;
  --paper:#fff!important;
  --ink:#000!important;
  --text:#000!important;
  --line:#000!important;
  --blue:#000!important;
  --blue-0:#fff!important;
  --blue-1:#fff!important;
  --blue-2:#fff!important;
  --blue-3:#fff!important;
  --blue-4:#fff!important;
  --blue-5:#000!important;
  --blue-6:#000!important;
  --blue-7:#000!important;
  --blue-8:#000!important;
  --blue-9:#000!important;
  --blue-10:#000!important;
  --gloss-edge:#000!important;
}

html,body,#vaguery-space,.site-head,#desk,#site-footer,
.window,.window-body,.artist-browser-list,.artist-browser-detail,
.latest-home-window .window-body,.latest-home-window .latest-card,
.video-card,.release-tracklist,.track-row{
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  color:#000!important;
}

.window{
  border-color:#000!important;
  box-shadow:8px 8px 0 #000!important;
}

.window-bar{
  background:#000!important;
  background-image:none!important;
  color:#fff!important;
  border-color:#000!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
.window-title,.window-bar .window-title{color:#fff!important}

.window-max,.window-close{
  background:#000!important;
  color:#fff!important;
  border:1px solid #fff!important;
  box-shadow:none!important;
}
.window-max:hover,.window-close:hover{
  background:#fff!important;
  color:#000!important;
}

.main-nav button,.nav-button,.menu-badge,
.latest-all-button,.open-profile,.video-link,.track-play,
.radio-controls button,button,input,select,textarea{
  background:#fff!important;
  background-image:none!important;
  color:#000!important;
  border-color:#000!important;
  box-shadow:none!important;
  text-shadow:none!important;
}

.main-nav button:hover,.nav-button:hover,.menu-badge:hover,
.latest-all-button:hover,.open-profile:hover,.video-link:hover,.track-play:hover,
.radio-controls button:hover,button:hover{
  background:#000!important;
  color:#fff!important;
}

.artist-browser-list button{
  background:#fff!important;
  color:#000!important;
  border-color:#000!important;
}
.artist-browser-list button:hover,
.artist-browser-list button.active{
  background:#000!important;
  color:#fff!important;
}

a,a:visited{color:#000!important}
hr,.release-videos,.track-row,.release-tracklist,.radio-progress,
.radio-volume input,.video-card,.video-thumb,.artist-browser-list,
.artist-browser-detail,.latest-home-window .latest-card{
  border-color:#000!important;
}

/* No translucent grey UI layers */
.welcome-home-window .window-body,
.latest-home-window .window-body,
.latest-home-window .latest-card{
  background:#fff!important;
  background-image:none!important;
}

/* Keep every media asset exactly as supplied */
body{filter:none!important;-webkit-filter:none!important}
img,picture,video,iframe,canvas,
.artist-browser-detail img,.artist-view img,.release-view img,
.latest-card img,.archive-card img,.video-thumb img{
  filter:none!important;
  -webkit-filter:none!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
}
.radio-cover.has-art{
  filter:none!important;
  -webkit-filter:none!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
}


/* V4.23 — NEW VAGUERY LOGO */
.vertical-mark{
  display:none!important;
}

.corner-logo{
  left:-72px!important;
  top:0!important;
  width:156px!important;
  height:64px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:visible!important;
}

.corner-logo img{
  width:156px!important;
  height:auto!important;
  max-height:64px!important;
  object-fit:contain!important;
  object-position:left center!important;
  animation:none!important;
  transform:none!important;
  filter:none!important;
  -webkit-filter:none!important;
}

.corner-logo:hover img{
  animation:none!important;
  transform:none!important;
}

@media(max-width:820px){
  .corner-logo{
    left:0!important;
    top:2px!important;
    width:108px!important;
    height:46px!important;
  }
  .corner-logo img{
    width:108px!important;
    max-height:46px!important;
  }
}


/* V4.28 — RADIO GIF ICON ONLY */
.radio-launch .radio-gif-icon{
  display:block!important;
  width:32px!important;
  height:32px!important;
  object-fit:contain!important;
  image-rendering:pixelated;
  animation:none!important;
  transform:none!important;
  filter:none!important;
  -webkit-filter:none!important;
}


/* V4.29 — MOBILE HEADER / LOGO FIX */
@media(max-width:820px){
  .site-head{
    padding:58px 10px 0 10px!important;
  }

  .corner-logo{
    position:absolute!important;
    left:10px!important;
    top:8px!important;
    width:96px!important;
    height:42px!important;
    z-index:20!important;
  }

  .corner-logo img{
    width:96px!important;
    height:auto!important;
    max-height:42px!important;
    object-fit:contain!important;
  }

  .radio-launch{
    top:8px!important;
    right:10px!important;
    z-index:20!important;
  }

  .main-nav{
    position:relative!important;
    top:auto!important;
    margin:0!important;
    padding:0!important;
    width:100%!important;
  }
}


/* V4.30 — ARTIST PHOTO + MOBILE WINDOW FLOW */

/* Artist preview photo: square and never cropped */
.artist-browser-detail img{
  width:160px!important;
  height:160px!important;
  aspect-ratio:1 / 1!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  background:#fff!important;
  border:1px solid #000!important;
  margin:0 0 12px 0!important;
}

/* Full artist profile photo stays square too */
.artist-view img{
  aspect-ratio:1 / 1!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}

/* On mobile, windows live in the page flow UNDER the navigation
   instead of opening on top of the header/buttons. */
@media(max-width:820px){
  #desk{
    position:relative!important;
    min-height:0!important;
    padding:10px 0 80px!important;
    overflow:visible!important;
  }

  .floating-window,
  .floating-window.initial-window,
  .floating-window.is-maximized{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;

    width:calc(100% - 20px)!important;
    max-width:calc(100% - 20px)!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;

    margin:0 auto 12px!important;
    resize:none!important;
  }

  .floating-window .window-body,
  .floating-window.is-maximized .window-body{
    max-height:none!important;
    overflow:visible!important;
  }

  .artist-browser-detail img{
    width:132px!important;
    height:132px!important;
  }
}


/* V4.32 — RADIO AUTOPLAY / UNMUTE / NON-EMOJI CONTROLS */

/* Persistent, obvious mute control */
.radio-unmute{
  position:fixed!important;
  right:12px!important;
  top:54px!important;
  z-index:9999!important;
  height:30px!important;
  padding:0 10px!important;
  border:1px solid #000!important;
  border-radius:0!important;
  background:#000!important;
  color:#fff!important;
  font:700 10px/1 "Courier New",monospace!important;
  letter-spacing:.08em!important;
  box-shadow:3px 3px 0 #fff,4px 4px 0 #000!important;
  cursor:pointer!important;
}
.radio-unmute:hover{
  background:#fff!important;
  color:#000!important;
}
.radio-unmute:not(.is-muted){
  background:#fff!important;
  color:#000!important;
}

/* Radio buttons: pure CSS geometry, no Unicode/emoji arrows */
.radio-controls button{
  position:relative!important;
  width:38px!important;
  height:30px!important;
  padding:0!important;
  overflow:hidden!important;
}
.radio-controls button::before,
.radio-controls button::after{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
}

/* play */
.radio-play::before{
  left:14px!important;
  width:0!important;
  height:0!important;
  border-top:7px solid transparent!important;
  border-bottom:7px solid transparent!important;
  border-left:10px solid currentColor!important;
}
.radio-play.is-playing::before{
  left:12px!important;
  width:4px!important;
  height:14px!important;
  border:0!important;
  background:currentColor!important;
  box-shadow:8px 0 0 currentColor!important;
}

/* previous */
.radio-prev::before{
  left:13px!important;
  width:0!important;
  height:0!important;
  border-top:6px solid transparent!important;
  border-bottom:6px solid transparent!important;
  border-right:8px solid currentColor!important;
}
.radio-prev::after{
  left:9px!important;
  width:2px!important;
  height:14px!important;
  background:currentColor!important;
}

/* next */
.radio-next::before{
  left:15px!important;
  width:0!important;
  height:0!important;
  border-top:6px solid transparent!important;
  border-bottom:6px solid transparent!important;
  border-left:8px solid currentColor!important;
}
.radio-next::after{
  right:9px!important;
  width:2px!important;
  height:14px!important;
  background:currentColor!important;
}

/* Remove old Unicode play overlay from videos */
.video-thumb::after{
  content:none!important;
  display:none!important;
}

/* Custom video play button */
.video-play-mark{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:42px!important;
  height:32px!important;
  border:1px solid #fff!important;
  background:#000!important;
  box-sizing:border-box!important;
  pointer-events:none!important;
}
.video-play-mark::before{
  content:""!important;
  position:absolute!important;
  left:16px!important;
  top:8px!important;
  width:0!important;
  height:0!important;
  border-top:7px solid transparent!important;
  border-bottom:7px solid transparent!important;
  border-left:10px solid #fff!important;
}

@media(max-width:820px){
  .radio-unmute{
    top:54px!important;
    right:10px!important;
    height:28px!important;
    font-size:9px!important;
  }

  .radio-controls button{
    width:44px!important;
    height:34px!important;
  }

  .video-play-mark{
    width:46px!important;
    height:34px!important;
  }
}


/* V4.33 — TRACKLIST / MOBILE UNMUTE / ARTIST IMAGE / MAXIMIZE / STICKERS */

/* Clickable track titles */
.track-title-play{
  display:inline!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#000!important;
  box-shadow:none!important;
  text-align:left!important;
  font:inherit!important;
  text-decoration:underline!important;
  cursor:pointer!important;
}
.track-title-play:hover{
  background:#000!important;
  color:#fff!important;
  text-decoration:none!important;
}

/* Artist images: square frame completely filled */
.artist-browser-detail img,
.artist-view img{
  object-fit:cover!important;
  object-position:center!important;
  background:#000!important;
}

/* Desktop maximize: centre exactly in the viewport */
@media(min-width:821px){
  .floating-window.is-maximized{
    position:fixed!important;
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    transform:translate(-50%,-50%)!important;

    width:min(92vw,1200px)!important;
    height:88vh!important;
    max-width:1200px!important;
    max-height:88vh!important;

    margin:0!important;
    z-index:9998!important;
  }

  .floating-window.is-maximized .window-body{
    max-height:calc(88vh - 32px)!important;
    overflow:auto!important;
  }
}

/* Mobile: UNMUTE sits immediately to the left of the radio icon */
@media(max-width:820px){
  .radio-unmute{
    top:12px!important;
    right:56px!important;
    height:28px!important;
    padding:0 8px!important;
    white-space:nowrap!important;
    box-shadow:2px 2px 0 #fff,3px 3px 0 #000!important;
  }
}

/* Floating background GIF links */
#vaguery-space{
  position:relative!important;
}
.vaguery-stickers{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
.vaguery-sticker{
  position:absolute;
  display:block;
  width:max-content;
  max-width:180px;
  pointer-events:auto;
  cursor:grab;
  user-select:none;
  touch-action:none;
  text-decoration:none!important;
}
.vaguery-sticker.is-dragging{
  cursor:grabbing;
  z-index:9997;
}
.vaguery-sticker img{
  display:block;
  width:auto!important;
  height:auto!important;
  max-width:180px!important;
  filter:none!important;
  -webkit-filter:none!important;
  image-rendering:auto;
  pointer-events:none;
}
.sticker-donate img{
  image-rendering:pixelated;
}

/* Windows/navigation remain above the background stickers */
.site-head,
#desk,
#site-footer,
.corner-logo,
.radio-launch,
.radio-unmute{
  position:relative;
  z-index:10;
}

@media(max-width:820px){
  .vaguery-sticker{
    max-width:130px;
  }
  .vaguery-sticker img{
    max-width:130px!important;
  }

  /* keep stickers in the background on mobile */
  .vaguery-stickers{
    z-index:1;
  }
}

.corner-logo{position:absolute!important}
.radio-launch{position:absolute!important}
.radio-unmute{position:fixed!important}
.site-head{position:relative!important}
#desk{position:relative}


/* =========================================================
   V4.41 — GLOBAL INTERACTION REFACTOR
   Windows and stickers share one natural coordinate system:
   the browser viewport. Only the navigation buttons are protected.
   ========================================================= */

/* Nothing structural may crop desktop floating elements. */
html,
body,
#vaguery-space,
#desk{
  overflow:visible!important;
}

body{
  overflow-x:hidden!important;
}

/* Header has no white interaction mask across the page. */
.site-head{
  position:relative!important;
  z-index:3000!important;
  background:transparent!important;
  pointer-events:none!important;
}
.site-head .corner-logo,
.site-head .main-nav,
.site-head .radio-launch{
  pointer-events:auto!important;
}
.main-nav{
  position:relative!important;
  z-index:3002!important;
}

/* #desk is now only a host for the window DOM. */
#desk{
  position:static!important;
  z-index:auto!important;
  background:transparent!important;
  pointer-events:none!important;
}

/* Desktop windows are anchored to the document so they move naturally
   with the page when the visitor scrolls. Maximized windows remain fixed. */
.floating-window{
  position:absolute!important;
  left:var(--x,80px);
  top:var(--y,90px);
  width:var(--w,420px);
  max-width:calc(100vw - 12px)!important;
  max-height:calc(100vh - 12px)!important;
  z-index:2000!important;
  pointer-events:auto!important;
  overflow:visible!important;
}
.floating-window.is-active{
  z-index:2400!important;
}

/* Maximize is now a real viewport maximize; JS sets geometry. */
.floating-window.is-maximized{
  position:fixed!important;
  transform:none!important;
  margin:0!important;
  resize:none!important;
  max-width:none!important;
  max-height:none!important;
  z-index:2600!important;
}
.floating-window.is-maximized .window-body{
  height:calc(100% - 32px)!important;
  max-height:none!important;
  overflow:auto!important;
}

/* Prevent old stacking rules from masking window chrome/content. */
.window-bar,
.window-body{
  position:relative;
  z-index:1;
}

/* Stickers: full viewport, draggable, above page but below windows/nav. */
.vaguery-stickers{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  z-index:1500!important;
  pointer-events:none!important;
  overflow:visible!important;
  visibility:visible!important;
  opacity:1!important;
}
.vaguery-sticker{
  position:absolute!important;
  display:block!important;
  z-index:1501!important;
  pointer-events:auto!important;
  cursor:grab!important;
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  visibility:visible!important;
  opacity:1!important;
}
.vaguery-sticker.is-dragging{
  cursor:grabbing!important;
  z-index:1700!important;
}
.vaguery-sticker img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:180px!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  filter:none!important;
  -webkit-filter:none!important;
}

/* Footer never becomes a full-screen mask. */
#site-footer{
  z-index:100!important;
}

/* Deliberate mobile layout remains document-flow based. */
@media(max-width:820px){
  body{
    overflow:auto!important;
  }

  #desk{
    position:relative!important;
    pointer-events:auto!important;
  }

  .floating-window,
  .floating-window.initial-window,
  .floating-window.is-maximized{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:calc(100% - 20px)!important;
    max-width:calc(100% - 20px)!important;
    height:auto!important;
    max-height:none!important;
    margin:0 auto 12px!important;
    resize:none!important;
  }

  .floating-window .window-body,
  .floating-window.is-maximized .window-body{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .vaguery-sticker img{
    max-width:120px!important;
  }
}


/* V4.42 — design editor position support */
.window-bar{
  min-height:var(--design-titlebar-height,32px);
}


/* =========================================================
   V4.43 — RADIO ONLY
   MUTE + RADIO = one compact two-square rectangle.
   ========================================================= */

.site-head{
  --radio-square:42px;
  --radio-right:12px;
  --radio-top:10px;
}

/* Right square: radio launcher */
.radio-launch{
  position:absolute!important;
  top:var(--radio-top)!important;
  right:var(--radio-right)!important;
  width:var(--radio-square)!important;
  height:var(--radio-square)!important;
  min-width:var(--radio-square)!important;
  min-height:var(--radio-square)!important;
  padding:4px!important;
  margin:0!important;
  border:1px solid #000!important;
  border-radius:0!important;
  background:#fff!important;
  color:#000!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:3100!important;
}

.radio-launch:hover{
  background:#000!important;
  color:#fff!important;
}

/* Left square: mute / unmute.
   -1px makes the shared border overlap, so both squares read as one rectangle. */
.radio-unmute{
  position:absolute!important;
  top:var(--radio-top)!important;
  right:calc(var(--radio-right) + var(--radio-square) - 1px)!important;
  width:var(--radio-square)!important;
  height:var(--radio-square)!important;
  min-width:var(--radio-square)!important;
  min-height:var(--radio-square)!important;
  padding:0!important;
  margin:0!important;
  border:1px solid #000!important;
  border-radius:0!important;
  background:#fff!important;
  color:#000!important;
  box-shadow:none!important;
  font:inherit!important;
  letter-spacing:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  z-index:3101!important;
}

.radio-unmute:hover{
  background:#000!important;
  color:#fff!important;
}

/* Remove the old textual UNMUTE appearance completely. */
.radio-unmute{
  font-size:0!important;
  line-height:0!important;
  white-space:normal!important;
}

/* Speaker body */
.mute-speaker{
  position:relative;
  display:block;
  width:17px;
  height:16px;
}
.mute-speaker::before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  width:6px;
  height:7px;
  border:2px solid currentColor;
  border-right:0;
  box-sizing:border-box;
}
.mute-speaker::after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:0;
  height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-right:8px solid currentColor;
}

/* State mark: slash while muted, sound waves while unmuted */
.mute-state{
  position:relative;
  display:block;
  width:12px;
  height:18px;
  margin-left:1px;
}

/* muted slash */
.radio-unmute.is-muted .mute-state::before{
  content:"";
  position:absolute;
  left:5px;
  top:1px;
  width:2px;
  height:17px;
  background:currentColor;
  transform:rotate(-42deg);
  transform-origin:center;
}

/* unmuted sound waves */
.radio-unmute.is-unmuted .mute-state::before,
.radio-unmute.is-unmuted .mute-state::after{
  content:"";
  position:absolute;
  border:2px solid currentColor;
  border-left:0;
  border-top-color:transparent;
  border-bottom-color:transparent;
  border-radius:0 50% 50% 0;
  box-sizing:border-box;
}
.radio-unmute.is-unmuted .mute-state::before{
  left:0;
  top:5px;
  width:5px;
  height:9px;
}
.radio-unmute.is-unmuted .mute-state::after{
  left:3px;
  top:2px;
  width:8px;
  height:15px;
}

/* GIF remains itself, simply fitted to the radio square. */
.radio-launch .radio-gif-icon{
  display:block!important;
  width:30px!important;
  height:30px!important;
  max-width:30px!important;
  max-height:30px!important;
  object-fit:contain!important;
  margin:0!important;
  filter:none!important;
  -webkit-filter:none!important;
}

/* No hover label beside the new compact control. */
.radio-label{
  display:none!important;
}

/* On mobile the same 2-square rectangle stays top-right. */
@media(max-width:820px){
  .site-head{
    --radio-square:38px;
    --radio-right:10px;
    --radio-top:8px;
  }

  .radio-launch,
  .radio-unmute{
    position:absolute!important;
  }

  .radio-launch .radio-gif-icon{
    width:27px!important;
    height:27px!important;
    max-width:27px!important;
    max-height:27px!important;
  }
}


/* =========================================================
   V4.44 — RADIO MUTE CLICK + ICON
   ========================================================= */

.radio-unmute{
  pointer-events:auto!important;
  z-index:99999!important;
}

/* Larger, simpler speaker pictogram inspired by the supplied reference. */
.radio-unmute .mute-speaker{
  position:relative!important;
  display:block!important;
  width:18px!important;
  height:22px!important;
  margin:0 3px 0 0!important;
}

.radio-unmute .mute-speaker::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:7px!important;
  width:7px!important;
  height:9px!important;
  border:0!important;
  background:currentColor!important;
}

.radio-unmute .mute-speaker::after{
  content:""!important;
  position:absolute!important;
  left:6px!important;
  top:3px!important;
  width:0!important;
  height:0!important;
  border-top:8px solid transparent!important;
  border-bottom:8px solid transparent!important;
  border-right:0!important;
  border-left:10px solid currentColor!important;
}

/* Room for the waves / slash */
.radio-unmute .mute-state{
  position:relative!important;
  display:block!important;
  width:14px!important;
  height:24px!important;
  margin:0!important;
}

/* UNMUTED: two clean curved sound waves */
.radio-unmute.is-unmuted .mute-state::before,
.radio-unmute.is-unmuted .mute-state::after{
  content:""!important;
  position:absolute!important;
  background:transparent!important;
  border-style:solid!important;
  border-color:currentColor!important;
  border-left-color:transparent!important;
  border-top-color:transparent!important;
  border-bottom-color:transparent!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
  transform:none!important;
}
.radio-unmute.is-unmuted .mute-state::before{
  left:-5px!important;
  top:6px!important;
  width:10px!important;
  height:13px!important;
  border-width:2px!important;
}
.radio-unmute.is-unmuted .mute-state::after{
  left:-4px!important;
  top:2px!important;
  width:17px!important;
  height:21px!important;
  border-width:3px!important;
}

/* MUTED: same speaker + strong diagonal slash. */
.radio-unmute.is-muted .mute-state::before{
  content:""!important;
  position:absolute!important;
  left:-12px!important;
  top:10px!important;
  width:28px!important;
  height:3px!important;
  border:0!important;
  border-radius:0!important;
  background:currentColor!important;
  transform:rotate(45deg)!important;
  transform-origin:center!important;
}
.radio-unmute.is-muted .mute-state::after{
  content:none!important;
}

/* Hover inversion keeps the pictogram readable. */
.radio-unmute:hover{
  background:#000!important;
  color:#fff!important;
}


/* =========================================================
   V4.45 — CLEAN RADIO VOLUME SVG ICON
   ========================================================= */

.radio-unmute .mute-speaker,
.radio-unmute .mute-state{
  display:none!important;
}

.radio-volume-icon{
  display:block!important;
  width:27px!important;
  height:27px!important;
  overflow:visible!important;
  color:currentColor!important;
}

.radio-volume-icon .speaker-shape{
  fill:currentColor!important;
  stroke:none!important;
}

.radio-volume-icon .wave{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:3!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.radio-volume-icon .mute-slash{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:4!important;
  stroke-linecap:square!important;
}

/* Sound on = speaker + two waves */
.radio-unmute.is-unmuted .radio-volume-icon .wave{
  display:block!important;
}
.radio-unmute.is-unmuted .radio-volume-icon .mute-slash{
  display:none!important;
}

/* Muted = speaker + diagonal slash, no waves */
.radio-unmute.is-muted .radio-volume-icon .wave{
  display:none!important;
}
.radio-unmute.is-muted .radio-volume-icon .mute-slash{
  display:block!important;
}

@media(max-width:820px){
  .radio-volume-icon{
    width:25px!important;
    height:25px!important;
  }
}


/* =========================================================
   V4.47 — TRUE FULL VIEWPORT MAXIMIZE
   ========================================================= */
.floating-window.is-maximized{
  position:fixed!important;
  left:6px!important;
  top:6px!important;
  right:6px!important;
  bottom:6px!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  transform:none!important;
  margin:0!important;
  z-index:100000!important;
  box-sizing:border-box!important;
}

.floating-window.is-maximized .window-body{
  height:calc(100% - var(--titlebar-h,32px))!important;
  max-height:none!important;
  overflow:auto!important;
  box-sizing:border-box!important;
}


/* =========================================================
   V4.48 — CUSTOM NAVIGATION ICONS
   ========================================================= */
.main-nav button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
}

.main-nav .nav-custom-icon{
  display:block!important;
  width:21px!important;
  height:21px!important;
  min-width:21px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  filter:none!important;
  -webkit-filter:none!important;
  pointer-events:none!important;
}

.main-nav button::before{
  content:none!important;
}

@media(max-width:820px){
  .main-nav .nav-custom-icon{
    width:19px!important;
    height:19px!important;
    min-width:19px!important;
  }
}

/* =========================================================
   CURRENT — VAGUERY SMILEY
   One authoritative rule: keep the current size/layout and rotate the logo.
   ========================================================= */
.corner-logo{
  width:72px!important;
  height:72px!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  animation:vaguery-smiley-spin 6s linear infinite!important;
  transform-origin:50% 50%!important;
  will-change:transform;
}
.corner-logo:hover{animation-duration:1.6s!important}
.corner-logo img{
  display:block!important;
  width:68px!important;
  height:68px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  filter:none!important;
  -webkit-filter:none!important;
}
@keyframes vaguery-smiley-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@media(max-width:820px){
  .corner-logo{width:56px!important;height:56px!important}
  .corner-logo img{width:52px!important;height:52px!important}
}


/* =========================================================
   V4.53 — VAGUERY WORDMARK BESIDE SMILEY
   ========================================================= */
.header-wordmark{
  position:absolute!important;
  z-index:79!important;
  left:14px!important;
  top:0!important;
  display:block!important;
  height:34px!important; /* same height as desktop navigation buttons */
  width:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  pointer-events:none!important;
  user-select:none!important;
}

@media(max-width:820px){
  .header-wordmark{
    left:58px!important;
    top:10px!important;
    height:36px!important; /* same height as mobile navigation buttons */
    max-width:118px!important;
    object-fit:contain!important;
  }
}


/* =========================================================
   V4.61 — ARTIST PROFILE RESTORE + STICKER SIZE FIX
   ========================================================= */

.artist-view{
  grid-template-columns:240px minmax(0,1fr)!important;
  gap:20px!important;
  align-items:start!important;
}
.artist-view>img{
  width:240px!important;
  height:240px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
}

.artist-releases,
.artist-videos,
.artist-events{
  margin-top:24px!important;
}

.artist-releases h3,
.artist-videos h3,
.artist-events h3{
  margin:0 0 10px!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

.vaguery-sticker img{
  max-width:none!important;
  max-height:none!important;
}

@media(max-width:820px){
  .artist-view{
    grid-template-columns:1fr!important;
  }
  .artist-view>img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1/1!important;
  }
}


/* =========================================================
   V4.61 — TYPOGRAPHY / COLOUR / MOBILE STICKER SYSTEM
   ========================================================= */
:root{
  --site-bg:#fff;
  --site-text:#000;
  --site-border:#000;
  --site-title-bg:#000;
  --site-title-text:#fff;
  --font-ui:Arial,Helvetica,sans-serif;
  --font-heading:Arial,Helvetica,sans-serif;
  --font-body:"Times New Roman",Times,serif;
  --body-font-size:16px;
  --window-title-size:12px;
  --section-title-size:12px;
}

html,body,#vaguery-space,.site-head,#desk,#site-footer,
.floating-window,.window-body,.artist-browser-list,.artist-browser-detail,
.latest-home-window .window-body,.latest-home-window .latest-card,
.video-card,.release-tracklist,.track-row{
  background:var(--site-bg)!important;
  background-color:var(--site-bg)!important;
  color:var(--site-text)!important;
  border-color:var(--site-border)!important;
}
body{font-family:var(--font-body)!important;font-size:var(--body-font-size)!important}

.main-nav,.main-nav button,.radio-launch,.radio-unmute,
.window-bar,.window-bar button,.micro-links,.micro-links a,.ticket-button,
.latest-all-button,.open-profile,.event-artist,.track-title-play{
  font-family:var(--font-ui)!important;
}

.window-bar{
  background:var(--site-title-bg)!important;
  color:var(--site-title-text)!important;
  border-color:var(--site-border)!important;
  font-family:var(--font-ui)!important;
  font-size:var(--window-title-size)!important;
}
.window-bar>span:first-child,.window-title{
  font-family:var(--font-ui)!important;
  font-size:var(--window-title-size)!important;
  font-weight:700!important;
  letter-spacing:.05em!important;
  color:var(--site-title-text)!important;
}
.window-max,.window-close{
  background:var(--site-title-bg)!important;
  color:var(--site-title-text)!important;
  border-color:var(--site-title-text)!important;
}
.window-max:hover,.window-close:hover{
  background:var(--site-title-text)!important;
  color:var(--site-title-bg)!important;
}

.copy-text,.artist-bio,.artist-mini-bio,.release-meta,.archive-meta,.event-date,.event-status,
.radio-sub,.radio-times,.radio-queue-info,.track-row{
  color:var(--site-text)!important;
}
.copy-text,.artist-bio,.artist-mini-bio{font-family:var(--font-body)!important}

.artist-view h2,.release-view h2,.artist-browser-detail h2,.archive-title,.latest-card button,.video-card-title,
.artist-releases h3,.artist-videos h3,.artist-events h3,
.release-tracklist h3,.release-videos h3{
  font-family:var(--font-heading)!important;
  font-size:var(--section-title-size)!important;
  line-height:1.1!important;
  font-weight:700!important;
  letter-spacing:.02em!important;
  text-transform:none !important;
  color:var(--site-text)!important;
}
.artist-view h2,.release-view h2{
  font-size:calc(var(--section-title-size) * 1.65)!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

.main-nav button,button,input,select,textarea,.micro-links a,.ticket-button,.latest-all-button,.open-profile{
  border-color:var(--site-border)!important;
}
.main-nav button,input,select,textarea,.micro-links a,.ticket-button,.latest-all-button,.open-profile{
  background:var(--site-bg)!important;
  color:var(--site-text)!important;
}
.main-nav button:hover,.micro-links a:hover,.ticket-button:hover,.latest-all-button:hover,.open-profile:hover{
  background:var(--site-text)!important;
  color:var(--site-bg)!important;
}

a,a:visited{color:var(--site-text)!important}

.about-window-image{
  display:block;
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:cover;
  margin:0 0 16px;
  border:1px solid var(--site-border);
}
.about-copy{margin-top:0}

.mobile-sticker-strip{display:none}
@media(max-width:820px){
  .mobile-sticker-strip{
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:12px;
    width:100%;
    padding:18px 12px 8px;
    background:var(--site-bg)!important;
    margin-bottom:82px;
  }
  .mobile-sticker-strip a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    text-decoration:none;
  }
  .mobile-sticker-strip img{
    display:block;
    max-width:28vw!important;
    max-height:90px!important;
    width:auto;
    height:auto;
    object-fit:contain;
    filter:none!important;
  }
  .about-window-image{max-height:none;object-fit:contain}
}


/* =========================================================
   V4.61 — TYPOGRAPHY SYSTEM + CLEAN RESIZABLE WINDOWS
   ========================================================= */
:root{
  --font-nav:Arial,Helvetica,sans-serif;
  --nav-font-size:13px;
  --nav-font-weight:700;
  --nav-letter-spacing:.02em;

  --font-window-title:Arial,Helvetica,sans-serif;
  --window-title-size:12px;
  --window-title-weight:700;
  --window-title-letter-spacing:.05em;

  --font-body:"Times New Roman",Times,serif;
  --body-font-size:16px;
  --body-font-weight:400;
  --body-line-height:1.38;

  --font-section-title:Arial,Helvetica,sans-serif;
  --section-title-size:12px;
  --section-title-weight:700;
  --section-title-letter-spacing:.08em;

  --font-artist-selector:Arial,Helvetica,sans-serif;
  --artist-selector-size:15px;
  --artist-selector-weight:700;
  --artist-selector-letter-spacing:0em;

  --font-content-title:Arial,Helvetica,sans-serif;
  --content-title-size:18px;
  --content-title-weight:700;

  --font-meta:"Courier New",Courier,monospace;
  --meta-size:10px;
  --meta-weight:400;

  --font-button:Arial,Helvetica,sans-serif;
  --button-size:10px;
  --button-weight:700;

  --font-footer:"Courier New",Courier,monospace;
  --footer-size:11px;
  --footer-weight:400;
}

/* Remove the outer scroll container that produced the white strip above title bars. */
.floating-window{
  display:flex!important;
  flex-direction:column!important;
  resize:both!important;
  overflow:hidden!important;
}
.window-bar{
  position:relative!important;
  top:auto!important;
  flex:0 0 var(--titlebar-h,32px)!important;
  min-height:var(--titlebar-h,32px)!important;
  font-family:var(--font-window-title)!important;
  font-size:var(--window-title-size)!important;
  font-weight:var(--window-title-weight)!important;
  letter-spacing:var(--window-title-letter-spacing)!important;
  text-transform:uppercase!important;
}
.window-body{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
}

/* Main navigation */
.main-nav,
.main-nav button,
.main-nav button span{
  font-family:var(--font-nav)!important;
  font-size:var(--nav-font-size)!important;
  font-weight:var(--nav-font-weight)!important;
  letter-spacing:var(--nav-letter-spacing)!important;
}

/* Current artist selector */
.artist-browser-list button{
  font-family:var(--font-artist-selector)!important;
  font-size:var(--artist-selector-size)!important;
  font-weight:var(--artist-selector-weight)!important;
  letter-spacing:var(--artist-selector-letter-spacing)!important;
  line-height:1.15!important;
}

/* Main text */
.copy-text,
.artist-bio,
.artist-mini-bio,
.window-body p,
.window-body .empty,
.about-copy,
.contact-copy{
  font-family:var(--font-body)!important;
  font-size:var(--body-font-size)!important;
  font-weight:var(--body-font-weight)!important;
  line-height:var(--body-line-height)!important;
}

/* Section titles */
.artist-releases h3,
.artist-videos h3,
.artist-events h3,
.release-tracklist h3,
.release-videos h3{
  font-family:var(--font-section-title)!important;
  font-size:var(--section-title-size)!important;
  font-weight:var(--section-title-weight)!important;
  letter-spacing:var(--section-title-letter-spacing)!important;
  line-height:1!important;
  text-transform:uppercase!important;
}

/* Content titles */
.artist-view h2,
.release-view h2,
.artist-browser-detail h2,
.archive-title,
.latest-card button,
.video-card-title{
  font-family:var(--font-content-title)!important;
  font-size:var(--content-title-size)!important;
  font-weight:var(--content-title-weight)!important;
}

/* Metadata */
.archive-meta,
.release-meta,
.artist-sub,
.latest-card small,
.event-date,
.event-status,
.track-num,
.radio-sub,
.radio-queue-info,
.radio-times{
  font-family:var(--font-meta)!important;
  font-size:var(--meta-size)!important;
  font-weight:var(--meta-weight)!important;
}

/* Buttons / micro links */
.open-profile,
.micro-links a,
.ticket-button,
.latest-all-button,
.event-artist,
.text-link-button,
.track-title-play{
  font-family:var(--font-button)!important;
  font-size:var(--button-size)!important;
  font-weight:var(--button-weight)!important;
}

/* Footer */
#site-footer,
#footer-content,
#footer-content a{
  font-family:var(--font-footer)!important;
  font-size:var(--footer-size)!important;
  font-weight:var(--footer-weight)!important;
}

/* Keep maximized windows clean as well */
.floating-window.is-maximized{
  overflow:hidden!important;
}
.floating-window.is-maximized .window-body{
  flex:1 1 auto!important;
  height:auto!important;
  max-height:none!important;
  overflow:auto!important;
}


/* =========================================================
   V4.62 — REMOVE NATIVE WINDOW STRIP
   ========================================================= */
/* No browser-native resize/scroll chrome on the outer window.
   The title bar must be the absolute top edge of every window. */
.floating-window,
.floating-window.is-active,
.floating-window.is-maximized{
  resize:none!important;
  overflow:hidden!important;
  padding:0!important;
  scrollbar-width:none!important;
}
.floating-window::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}
.window-bar{
  position:relative!important;
  top:0!important;
  margin:0!important;
  width:100%!important;
  flex-shrink:0!important;
}
.window-body{
  margin:0!important;
  min-height:0!important;
  overflow:auto!important;
}


/* =========================================================
   V4.63 — HEADER MUST NEVER MASK FLOATING WINDOWS
   Root cause found from the actual Neocities archive:
   V4.61 gave .site-head the site background while V4.41 keeps
   that header above windows (z-index:3000). The header therefore
   painted a white rectangle over the upper part of windows.
   ========================================================= */
.site-head{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}

/* Keep only the real header controls visually opaque/clickable. */
.site-head .corner-logo,
.site-head .header-wordmark,
.site-head .main-nav,
.site-head .radio-launch,
.site-head .radio-unmute{
  pointer-events:auto!important;
}


/* =========================================================
   V4.65 — ARTIST NAMES KEEP THEIR ORIGINAL CASING
   ========================================================= */
.artist-browser-list button,
.artist-browser-detail h2,
.artist-view h2,
.archive-artist,
.event-artist,
.radio-sub{
  text-transform:none!important;
}


/* =========================================================
   V4.65 — CATALOGUE ARTIST TYPOGRAPHY
   Controlled independently from DESIGN admin.
   ========================================================= */
:root{
  --font-catalogue-artist:Arial,Helvetica,sans-serif;
  --catalogue-artist-size:12px;
  --catalogue-artist-weight:700;
  --catalogue-artist-letter-spacing:0em;
}

.archive-artist{
  font-family:var(--font-catalogue-artist)!important;
  font-size:var(--catalogue-artist-size)!important;
  font-weight:var(--catalogue-artist-weight)!important;
  letter-spacing:var(--catalogue-artist-letter-spacing)!important;
  text-transform:none!important;
}

/* =========================================================
   V4.66 — TYPOGRAPHY POLISH / AUTHORITATIVE FINAL LAYER
   Minimal, calm, readable hierarchy.
   Keeps the DESIGN admin variables functional.
   ========================================================= */

/* ---------- Global rhythm ---------- */
html{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body{
  font-family:var(--font-body)!important;
  font-size:var(--body-font-size)!important;
  font-weight:var(--body-font-weight)!important;
  font-style:normal!important;
  line-height:var(--body-line-height)!important;
  letter-spacing:0!important;
}

/* Avoid accidental inherited italics / uppercase in content. */
.window-body,
.window-body p,
.window-body div,
.window-body span,
.window-body td,
.window-body th{
  font-style:normal;
}

/* ---------- Main navigation ---------- */
.main-nav,
.main-nav button,
.main-nav button span{
  font-family:var(--font-nav)!important;
  font-size:var(--nav-font-size)!important;
  font-weight:var(--nav-font-weight)!important;
  font-style:normal!important;
  line-height:1!important;
  letter-spacing:var(--nav-letter-spacing)!important;
  text-transform:uppercase!important;
}

/* ---------- Window title bars ---------- */
.window-bar,
.window-bar > span:first-child:not(.window-actions),
.window-title{
  font-family:var(--font-window-title)!important;
  font-size:var(--window-title-size)!important;
  font-weight:var(--window-title-weight)!important;
  font-style:normal!important;
  line-height:1!important;
  letter-spacing:var(--window-title-letter-spacing)!important;
  text-transform:uppercase!important;
}

/* ---------- Main editorial copy ---------- */
.copy-text,
.about-copy,
.contact-copy,
.artist-bio,
.artist-mini-bio,
.window-body p{
  font-family:var(--font-body)!important;
  font-size:var(--body-font-size)!important;
  font-weight:var(--body-font-weight)!important;
  font-style:normal!important;
  line-height:var(--body-line-height)!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

/* Artist mini bio should stay slightly tighter than long copy. */
.artist-mini-bio{
  line-height:1.34!important;
}

/* ---------- Artist selector ---------- */
.artist-browser-list button{
  font-family:var(--font-artist-selector)!important;
  font-size:var(--artist-selector-size)!important;
  font-weight:var(--artist-selector-weight)!important;
  font-style:normal!important;
  line-height:1.15!important;
  letter-spacing:var(--artist-selector-letter-spacing)!important;
  text-transform:none!important;
}

/* ---------- Primary content titles ----------
   Artist names, release names, latest releases, video names.
   Original casing is preserved. */
.artist-view h2,
.release-view h2,
.artist-browser-detail h2,
.archive-title,
.latest-card button,
.video-card-title,
.radio-title{
  font-family:var(--font-content-title)!important;
  font-weight:var(--content-title-weight)!important;
  font-style:normal!important;
  line-height:1.08!important;
  letter-spacing:-0.01em!important;
  text-transform:none!important;
}

/* Main artist / release title: clear but not oversized. */
.artist-view h2,
.release-view h2{
  font-size:calc(var(--content-title-size) * 1.18)!important;
  margin-top:0!important;
  margin-bottom:8px!important;
}

/* Artist name inside ARTISTES preview. */
.artist-browser-detail h2{
  font-size:var(--content-title-size)!important;
  margin-bottom:5px!important;
}

/* Catalogue / release-list titles. */
.archive-title{
  font-size:var(--content-title-size)!important;
}

/* Latest release titles: slightly smaller for a cleaner 3-column grid. */
.latest-card button{
  font-size:calc(var(--content-title-size) * .88)!important;
  padding-top:7px!important;
}

/* Video title: subordinate to the release title. */
.video-card-title{
  font-size:calc(var(--content-title-size) * .72)!important;
  line-height:1.22!important;
  margin-top:6px!important;
}

/* Radio now-playing title. */
.radio-title{
  font-size:calc(var(--content-title-size) * .9)!important;
}

/* ---------- Catalogue artist names ---------- */
.archive-artist{
  font-family:var(--font-catalogue-artist)!important;
  font-size:var(--catalogue-artist-size)!important;
  font-weight:var(--catalogue-artist-weight)!important;
  font-style:normal!important;
  line-height:1.2!important;
  letter-spacing:var(--catalogue-artist-letter-spacing)!important;
  text-transform:none!important;
}

/* ---------- Section headings ----------
   Functional labels stay uppercase, compact and spaced. */
.artist-releases h3,
.artist-videos h3,
.artist-events h3,
.release-tracklist h3,
.release-videos h3{
  font-family:var(--font-section-title)!important;
  font-size:var(--section-title-size)!important;
  font-weight:var(--section-title-weight)!important;
  font-style:normal!important;
  line-height:1!important;
  letter-spacing:var(--section-title-letter-spacing)!important;
  text-transform:uppercase!important;
}

/* ---------- Metadata / small technical information ---------- */
.archive-meta,
.release-meta,
.artist-sub,
.latest-card small,
.event-date,
.event-status,
.track-num,
.radio-sub,
.radio-queue-info,
.radio-times,
.radio-message,
.loading,
.empty{
  font-family:var(--font-meta)!important;
  font-size:var(--meta-size)!important;
  font-weight:var(--meta-weight)!important;
  font-style:normal!important;
  line-height:1.35!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
}

/* Small system labels can use uppercase without shouting. */
.artist-sub,
.event-status{
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}

/* ---------- Tracklist ---------- */
.track-title,
.track-title-play{
  font-family:var(--font-body)!important;
  font-size:calc(var(--body-font-size) * .94)!important;
  font-weight:600!important;
  font-style:normal!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

/* ---------- Events ---------- */
.events-table{
  font-family:var(--font-body)!important;
  font-size:calc(var(--body-font-size) * .82)!important;
  font-weight:400!important;
  line-height:1.32!important;
}
.events-table strong{
  font-family:var(--font-body)!important;
  font-weight:600!important;
  font-style:normal!important;
}
.event-artist{
  font-family:var(--font-body)!important;
  font-size:inherit!important;
  font-weight:600!important;
  font-style:normal!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

/* ---------- Buttons / micro links ---------- */
.open-profile,
.micro-links a,
.ticket-button,
.latest-all-button,
.text-link-button,
.track-play,
.radio-controls button{
  font-family:var(--font-button)!important;
  font-size:var(--button-size)!important;
  font-weight:var(--button-weight)!important;
  font-style:normal!important;
  line-height:1!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
}

/* Artist-name buttons must keep artist casing. */
.event-artist,
.text-link-button[data-artist]{
  text-transform:none!important;
  letter-spacing:0!important;
}

/* ---------- Welcome window ----------
   Keep a subtle archive/computer-note feel, but improve readability. */
.welcome-home-window .copy-text{
  font-family:var(--font-meta)!important;
  font-size:calc(var(--meta-size) * 1.15)!important;
  font-weight:400!important;
  font-style:normal!important;
  line-height:1.5!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

/* ---------- Radio ---------- */
.radio-sub{
  margin-top:4px!important;
}
.radio-message{
  letter-spacing:0!important;
}

/* ---------- Footer ---------- */
#site-footer,
#footer-content,
#footer-content a{
  font-family:var(--font-footer)!important;
  font-size:var(--footer-size)!important;
  font-weight:var(--footer-weight)!important;
  font-style:normal!important;
  line-height:1.45!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
}

/* ---------- Mobile optical adjustments ---------- */
@media(max-width:820px){
  .main-nav,
  .main-nav button,
  .main-nav button span{
    line-height:1.05!important;
  }

  .artist-view h2,
  .release-view h2{
    font-size:var(--content-title-size)!important;
  }

  .latest-card button{
    font-size:calc(var(--content-title-size) * .84)!important;
  }

  .events-table{
    font-size:calc(var(--body-font-size) * .78)!important;
  }
}
.latest-card button:hover{
  color:#fff!important;
}

/* =========================================================
   V4.67 — BIO WINDOW / ARTWORK VIEWER / RADIO LINKS
   ========================================================= */
.artist-bio-button{
  display:inline-block!important;
  width:auto!important;
  margin:2px 0 10px!important;
}

.artist-bio-window{
  white-space:pre-line!important;
  max-width:72ch;
}

.release-artwork-button{
  display:block!important;
  width:150px!important;
  height:150px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:zoom-in!important;
  overflow:hidden!important;
}
.release-artwork-button:hover{
  background:transparent!important;
  color:inherit!important;
}
.release-artwork-button img{
  display:block!important;
  width:150px!important;
  height:150px!important;
  object-fit:cover!important;
}

.artwork-viewer{
  display:grid;
  place-items:center;
  width:100%;
  min-height:220px;
}
.artwork-viewer img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:calc(100vh - 110px)!important;
  object-fit:contain!important;
}

.radio-link{
  appearance:none!important;
  display:inline!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  color:inherit!important;
  box-shadow:none!important;
  font:inherit!important;
  letter-spacing:inherit!important;
  text-transform:none!important;
  text-align:left!important;
  cursor:pointer!important;
}
.radio-link:hover{
  background:transparent!important;
  color:inherit!important;
  text-decoration:underline!important;
}
.radio-track-link{
  font-weight:inherit!important;
}

@media(max-width:820px){
  .release-artwork-button,
  .release-artwork-button img{
    width:92px!important;
    height:92px!important;
  }
  .artwork-viewer img{
    max-height:calc(100vh - 170px)!important;
  }
}


/* =========================================================
   V4.69 — RELEASE CONTENT / DISCOVER / CREDITS / CATALOGUE
   ========================================================= */

/* Catalogue only: slightly larger artwork, while artist release lists keep their size. */
.floating-window[data-window="catalogue"] .archive-row{
  grid-template-columns:82px minmax(0,1fr)!important;
  gap:14px!important;
}
.floating-window[data-window="catalogue"] .archive-thumb{
  width:82px!important;
  height:82px!important;
}

/* Release pitch: three-line preview, expanded in place. */
.release-pitch{
  margin:10px 0 12px;
  max-width:56ch;
}
.release-pitch-text{
  font-family:var(--font-body)!important;
  font-size:var(--body-font-size)!important;
  font-weight:var(--body-font-weight)!important;
  line-height:var(--body-line-height)!important;
  white-space:pre-line;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.release-pitch.is-expanded .release-pitch-text{
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset;
}
.release-pitch-toggle{
  appearance:none!important;
  width:auto!important;
  margin:6px 0 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--site-text)!important;
  box-shadow:none!important;
  font-family:var(--font-button)!important;
  font-size:var(--button-size)!important;
  font-weight:var(--button-weight)!important;
  text-decoration:underline;
  cursor:pointer;
  text-transform:none!important;
  letter-spacing:0!important;
}
.release-pitch-toggle:hover{
  background:transparent!important;
  color:var(--site-text)!important;
}

/* Track credits expand directly below the track. */
.track-item{border-bottom:1px solid rgba(0,0,0,.14)}
.track-item .track-row{border-bottom:0!important}
.track-credits-toggle{
  appearance:none!important;
  width:24px!important;
  min-width:24px!important;
  height:24px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--site-text)!important;
  box-shadow:none!important;
  font:700 18px/1 Arial,Helvetica,sans-serif!important;
  cursor:pointer!important;
}
.track-credits-toggle:hover{background:transparent!important;color:var(--site-text)!important}
.track-credits{
  padding:0 8px 9px 36px;
  white-space:pre-line;
  font-family:var(--font-meta)!important;
  font-size:var(--meta-size)!important;
  font-weight:var(--meta-weight)!important;
  line-height:1.45;
}
.track-credits[hidden]{display:none!important}

.feat-label{font-style:normal;opacity:.72}

@media(max-width:820px){
  .floating-window[data-window="catalogue"] .archive-row{
    grid-template-columns:72px minmax(0,1fr)!important;
    gap:12px!important;
  }
  .floating-window[data-window="catalogue"] .archive-thumb{
    width:72px!important;
    height:72px!important;
  }
  .track-credits{padding-left:36px}
}

/* =========================================================
   V4.70 — CATALOGUE SORT / SCROLL ANCHOR / MICRO TYPOGRAPHY
   Small consistency pass only: hierarchy and controls stay familiar.
   ========================================================= */

/* BIO: give the action a little breathing room after the short intro. */
.artist-bio-button{
  margin:8px 0 11px!important;
}

/* Compact catalogue sorter. */
.catalogue-tools{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  margin:0 0 8px;
  padding:0 0 6px;
  border-bottom:1px solid rgba(0,0,0,.14);
}
.catalogue-sort-label{
  font-family:var(--font-meta)!important;
  font-size:var(--meta-size)!important;
  font-weight:var(--meta-weight)!important;
  line-height:1!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  opacity:.68;
}
.catalogue-sort-select{
  width:auto!important;
  min-width:84px;
  margin:0!important;
  padding:2px 18px 2px 5px!important;
  border:1px solid var(--site-border)!important;
  border-radius:0!important;
  background:var(--site-bg)!important;
  color:var(--site-text)!important;
  font-family:var(--font-meta)!important;
  font-size:var(--meta-size)!important;
  font-weight:var(--meta-weight)!important;
  line-height:1.2!important;
  letter-spacing:.02em!important;
}

/* Very light typographic cleanup across content and controls. */
.window-body{
  font-family:var(--font-body)!important;
  font-size:var(--body-font-size)!important;
  line-height:var(--body-line-height)!important;
}
.artist-bio,
.artist-mini-bio,
.release-pitch-text{
  max-width:62ch;
  letter-spacing:0!important;
}
.artist-mini-bio{
  line-height:1.36!important;
}
.release-artists{
  margin:2px 0 7px;
  font-family:var(--font-body)!important;
  font-size:calc(var(--body-font-size) * .92)!important;
  font-weight:var(--body-font-weight)!important;
  line-height:1.3!important;
  letter-spacing:0!important;
}
.artist-view h2,
.release-view h2,
.artist-browser-detail h2,
.archive-title,
.latest-card button{
  letter-spacing:-.008em!important;
}
.archive-title{
  line-height:1.12!important;
}
.archive-meta,
.release-meta,
.latest-card small,
.artist-sub{
  line-height:1.35!important;
}
.latest-card small{
  display:block;
  margin-top:3px;
}
.micro-links{
  gap:6px!important;
  margin-top:13px!important;
}
.open-profile,
.micro-links a,
.ticket-button,
.latest-all-button,
.release-pitch-toggle,
.radio-controls button{
  line-height:1.1!important;
  letter-spacing:.025em!important;
}
.text-link-button[data-artist],
.event-artist,
.radio-link{
  letter-spacing:0!important;
}
.track-title,
.track-title-play{
  line-height:1.24!important;
}
.track-credits{
  line-height:1.42!important;
}
.events-table td{
  line-height:1.32!important;
}

@media(max-width:820px){
  .catalogue-tools{
    justify-content:flex-start;
    margin-bottom:7px;
  }
}


/* =========================================================
   V4.71 — CATALOGUE ALIGNMENT + STICKERS FOLLOW PAGE SCROLL
   ========================================================= */

/* Catalogue sorting control stays discreet, aligned with the content start. */
.catalogue-tools{
  justify-content:flex-start!important;
}

/* Desktop stickers now live in the document layer, not the viewport.
   They therefore scroll with the background/windows. */
@media(min-width:821px){
  #vaguery-space{
    position:relative!important;
  }
  .vaguery-stickers{
    position:absolute!important;
    left:0!important;
    top:0!important;
    right:auto!important;
    bottom:auto!important;
    inset:auto!important;
    width:100vw!important;
    height:100vh!important;
  }
}


/* =========================================================
   V4.75 — DEFAULT WINDOW MAXIMIZE / MOBILE NAV FOCUS / CONTACT SMILEY
   ========================================================= */

.contact-window-content{
  display:block;
}
.contact-smiley{
  display:block!important;
  width:52px!important;
  height:52px!important;
  object-fit:contain!important;
  margin:0 0 10px 0!important;
  filter:none!important;
  -webkit-filter:none!important;
}
.contact-copy{
  margin-top:0!important;
}

@media(max-width:820px){
  /* Gives scrollIntoView a little breathing room when a menu button
     explicitly brings an already-open window back to the top. */
  .floating-window{
    scroll-margin-top:8px;
  }
  .contact-smiley{
    width:46px!important;
    height:46px!important;
    margin-bottom:8px!important;
  }
}

/* Footer stays after page content and reaches the bottom of short viewports. */
#vaguery-space{
  display:flex!important;
  flex-direction:column!important;
  min-height:100vh;
  min-height:100dvh;
  padding-bottom:34px!important;
}
#desk{
  flex:1 0 auto;
}
#site-footer{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  margin-top:auto!important;
  flex-shrink:0;
  align-self:stretch;
}
@media(max-width:820px){
  #vaguery-space{padding-bottom:30px!important}
}