/* =================================================================
   Sub:Port Music — shared Win98 desktop theme
   Always heavy, always underground.
   ================================================================= */
:root{
  --teal:#008080;
  --silver:#c0c0c0;
  --navy:#000080;
  --navy2:#1084d0;
  --cyan:#00ffff;
  --magenta:#ff00ff;
  --hi:#ffffff;
  --hi2:#dfdfdf;
  --sh:#808080;
  --dk:#000000;
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;height:100%;}

body{
  background:var(--teal);
  /* faint dithered desktop texture */
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
  font-family:Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif;
  font-size:13px;
  color:#000;
  min-height:100vh;
  padding:18px 14px 56px;        /* bottom space for taskbar */
  overflow-x:hidden;
}

/* ===================== 3D BEVEL HELPERS ===================== */
.raised{
  box-shadow:
    inset 1px 1px 0 0 var(--hi),
    inset -1px -1px 0 0 var(--dk),
    inset 2px 2px 0 0 var(--hi2),
    inset -2px -2px 0 0 var(--sh);
}
.inset{
  box-shadow:
    inset 1px 1px 0 0 var(--dk),
    inset -1px -1px 0 0 var(--hi),
    inset 2px 2px 0 0 var(--sh),
    inset -2px -2px 0 0 var(--hi2);
}

/* ===================== MAIN WINDOW ===================== */
.window{
  max-width:920px;
  margin:0 auto;
  position:relative;
  z-index:10;
  background:var(--silver);
  border:1px solid #0a0a0a;
  box-shadow:
    inset 1px 1px 0 0 var(--hi),
    inset -1px -1px 0 0 var(--dk),
    inset 2px 2px 0 0 var(--hi2),
    inset -2px -2px 0 0 var(--sh),
    3px 3px 0 0 rgba(0,0,0,.35);
  padding:3px;
}

.titlebar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:3px 3px 3px 5px;
  background:linear-gradient(90deg,var(--navy) 0%, var(--navy2) 100%);
  color:#fff;
  user-select:none;
}
.titlebar .ico{width:16px;height:16px;flex:0 0 auto;image-rendering:pixelated;}
.titlebar .ttl{
  font-weight:bold;
  font-size:12px;
  letter-spacing:.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1 1 auto;
  text-shadow:1px 1px 0 rgba(0,0,0,.4);
}
.titlebar .tb-btns{display:flex;gap:2px;flex:0 0 auto;}
.tb-btn{
  width:18px;height:16px;
  background:var(--silver);
  color:#000;
  font-size:10px;
  line-height:14px;
  text-align:center;
  font-family:Tahoma,sans-serif;
  cursor:pointer;
  box-shadow:
    inset 1px 1px 0 0 var(--hi),
    inset -1px -1px 0 0 var(--dk),
    inset 2px 2px 0 0 var(--hi2),
    inset -2px -2px 0 0 var(--sh);
}
.tb-btn:active{
  box-shadow:
    inset 1px 1px 0 0 var(--dk),
    inset -1px -1px 0 0 var(--hi),
    inset 2px 2px 0 0 var(--sh);
}

/* ===================== MENU BAR ===================== */
.menubar{
  display:flex;
  gap:2px;
  padding:2px 4px;
  background:var(--silver);
  font-size:12px;
}
.menubar span{padding:2px 7px;cursor:default;border:1px solid transparent;}
.menubar span u{text-decoration:underline;}
.menubar span:hover{
  background:var(--navy);color:#fff;
  border:1px solid #00000022;
}

/* ===================== WINDOW BODY ===================== */
.win-body{padding:14px;}

.panel{
  background:var(--silver);
  padding:14px 16px;
  margin-bottom:14px;
}
.panel:last-child{margin-bottom:0;}
.panel.work{
  background:#bfceca; /* faint workspace tint */
}

/* ===================== GLITCH TITLE ===================== */
.brandwrap{
  text-align:center;
  padding:18px 8px 10px;
  background:#000;
  position:relative;
  overflow:hidden;
  border:2px solid #2a2a2a;
}
.brandwrap::after{ /* scanlines */
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  pointer-events:none;
  animation:flicker 4s infinite steps(2);
}
.brand{
  font-family:"Press Start 2P",monospace;
  font-size:clamp(22px,7vw,52px);
  color:#fff;
  margin:0;
  position:relative;
  display:inline-block;
  letter-spacing:2px;
  line-height:1.15;
}
/* RGB channel split */
.brand::before,.brand::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;
  width:100%;
  overflow:hidden;
}
.brand::before{color:var(--cyan);  mix-blend-mode:screen;animation:splitC 2.2s infinite steps(8);}
.brand::after { color:var(--magenta);mix-blend-mode:screen;animation:splitM 2.6s infinite steps(8);}
.brand .colon{color:var(--cyan);}

.tagline{
  font-family:"VT323",monospace;
  font-size:clamp(15px,3.5vw,22px);
  color:var(--cyan);
  margin:8px 0 0;
  position:relative;
  letter-spacing:1px;
  text-shadow:1px 0 var(--magenta),-1px 0 #0aa;
}

/* ===================== TICKER ===================== */
.ticker{
  margin-top:0;
  background:#000;
  color:var(--magenta);
  font-family:"VT323",monospace;
  font-size:18px;
  white-space:nowrap;
  overflow:hidden;
  border-left:2px solid #2a2a2a;
  border-right:2px solid #2a2a2a;
  border-bottom:2px solid #2a2a2a;
  letter-spacing:1px;
}
.ticker span{
  display:inline-block;
  padding:4px 0;
  animation:scroll 18s linear infinite;
  will-change:transform;
}
.ticker b{color:var(--cyan);}

/* ===================== HERO TEXT ===================== */
.hero-flex{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-top:14px;}
.hero-img{
  flex:1 1 260px;min-width:220px;
}
.hero-img img{width:100%;display:block;image-rendering:auto;}
.hero-txt{flex:2 1 320px;min-width:260px;}
.hero-txt h2{
  font-family:"VT323",monospace;
  font-size:26px;margin:0 0 8px;color:var(--navy);letter-spacing:.5px;
}
.hero-txt p{margin:0 0 12px;line-height:1.5;font-size:13px;}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-block;
  background:var(--silver);
  color:#000;
  text-decoration:none;
  font-family:Tahoma,sans-serif;
  font-size:13px;
  padding:7px 16px;
  margin:4px 8px 4px 0;
  cursor:pointer;
  border:1px solid #000;
  box-shadow:
    inset 1px 1px 0 0 var(--hi),
    inset -1px -1px 0 0 var(--dk),
    inset 2px 2px 0 0 var(--hi2),
    inset -2px -2px 0 0 var(--sh);
}
.btn:active{
  box-shadow:
    inset 1px 1px 0 0 var(--dk),
    inset -1px -1px 0 0 var(--hi),
    inset 2px 2px 0 0 var(--sh);
  padding:8px 15px 6px 17px;
}
.btn:focus-visible{outline:1px dotted #000;outline-offset:-4px;}

/* ===================== SECTION HEADERS ===================== */
.sec-h{
  font-family:"VT323",monospace;
  font-size:22px;
  color:var(--navy);
  margin:0 0 10px;
  border-bottom:1px solid var(--sh);
  padding-bottom:4px;
}
.panel p{line-height:1.5;}

/* ===================== ARTIST DESKTOP ICONS (home) ===================== */
.icons{
  display:flex;flex-wrap:wrap;gap:22px;justify-content:flex-start;margin-top:6px;
}
.icon{
  width:150px;
  text-align:center;
  cursor:pointer;
  padding:6px;
  border:1px dotted transparent;
  text-decoration:none;
}
.icon:hover{border:1px dotted #fff;background:rgba(0,0,128,.18);}
.icon .thumb{
  width:84px;height:84px;margin:0 auto 6px;
  background-size:cover;background-position:center;
  box-shadow:
    inset 1px 1px 0 0 var(--dk),
    inset -1px -1px 0 0 var(--hi),
    inset 2px 2px 0 0 var(--sh);
  border:1px solid #000;
  image-rendering:auto;
}
.icon .nm{
  color:#fff;font-size:12px;font-weight:bold;
  background:var(--navy);
  display:inline-block;padding:1px 5px;
  text-shadow:1px 1px 0 #000;
}
.icon .meta{display:block;color:#103030;font-size:11px;margin-top:4px;}

.platforms{display:flex;gap:14px;align-items:center;margin-top:12px;flex-wrap:wrap;}
.platforms img{height:26px;image-rendering:auto;filter:saturate(.9);}

/* ===================== CONTENT COMPONENTS (sub-pages) ===================== */
.crumb{font-family:"VT323",monospace;font-size:16px;color:#0a3a3a;margin:0 0 12px;}
.prose p{line-height:1.6;margin:0 0 12px;max-width:70ch;}
.prose p:last-child{margin-bottom:0;}
.lead{font-family:"VT323",monospace;font-size:20px;color:var(--navy);line-height:1.4;}

/* artist roster cards */
.artist-card{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;}
.artist-card .photo{flex:0 0 auto;width:170px;}
.artist-card .photo img{
  width:170px;height:170px;object-fit:cover;border:1px solid #000;image-rendering:auto;
  box-shadow:inset 1px 1px 0 0 var(--dk),inset -1px -1px 0 0 var(--hi),inset 2px 2px 0 0 var(--sh);
}
.artist-card .info{flex:1 1 300px;min-width:260px;}
.artist-card .info h3{font-family:"VT323",monospace;font-size:24px;color:var(--navy);margin:0 0 6px;}
.artist-card .info p{margin:0 0 10px;line-height:1.5;}

.socials{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:10px 0;}
.socials a{
  display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:#000;text-decoration:none;background:var(--silver);padding:4px 9px;border:1px solid #000;
  box-shadow:inset 1px 1px 0 0 var(--hi),inset -1px -1px 0 0 var(--dk),inset 2px 2px 0 0 var(--hi2),inset -2px -2px 0 0 var(--sh);
}
.socials a:active{box-shadow:inset 1px 1px 0 0 var(--dk),inset -1px -1px 0 0 var(--hi),inset 2px 2px 0 0 var(--sh);}

.embed{
  margin-top:12px;border:1px solid #000;background:#000;
  box-shadow:inset 1px 1px 0 0 var(--dk),inset -1px -1px 0 0 var(--hi),inset 2px 2px 0 0 var(--sh);
}
.embed iframe{display:block;width:100%;border:0;}

/* form */
.form{max-width:560px;display:flex;flex-direction:column;gap:12px;}
.field{display:flex;flex-direction:column;gap:4px;}
.field label{font-size:12px;font-weight:bold;color:#000;}
.field .req{color:#c00;}
.field input,.field textarea{
  font:inherit;font-size:13px;background:#fff;color:#111;border:1px solid #000;padding:6px 8px;width:100%;
  box-shadow:inset 1px 1px 0 0 var(--dk),inset -1px -1px 0 0 var(--hi),inset 2px 2px 0 0 var(--sh);
}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field textarea:focus{outline:1px dotted #000;outline-offset:-3px;}
.form-note{font-size:12px;color:#1d3a3a;line-height:1.5;max-width:560px;margin-top:4px;}

/* coming soon */
.coming{text-align:center;padding:30px 10px;}
.coming .big{font-family:"Press Start 2P",monospace;font-size:clamp(20px,6vw,40px);color:var(--navy);line-height:1.35;margin:0;}
.coming p{margin-top:16px;}

/* shop / bandcamp store */
.shop-grid{display:flex;flex-wrap:wrap;gap:18px;margin-top:6px;}
.shop-item{flex:0 1 350px;max-width:100%;}
.shop-item .label{font-family:"VT323",monospace;font-size:18px;color:var(--navy);margin:0 0 6px;}
.bc-frame{
  border:1px solid #000;background:#fff;line-height:0;
  box-shadow:inset 1px 1px 0 0 var(--dk),inset -1px -1px 0 0 var(--hi),inset 2px 2px 0 0 var(--sh);
}
.bc-player{display:block;border:0;width:350px;max-width:100%;height:442px;}

/* ===================== ERROR DIALOG ===================== */
.errwrap{display:flex;justify-content:center;margin:20px 0 6px;}
.dialog{
  width:380px;max-width:100%;
  background:var(--silver);
  border:1px solid #0a0a0a;
  box-shadow:
    inset 1px 1px 0 0 var(--hi),
    inset -1px -1px 0 0 var(--dk),
    inset 2px 2px 0 0 var(--hi2),
    inset -2px -2px 0 0 var(--sh),
    3px 3px 0 0 rgba(0,0,0,.4);
  padding:3px;
  animation:dlgglitch 5s infinite;
}
.dialog .titlebar .ttl{font-size:12px;}
.dialog-body{display:flex;gap:14px;align-items:center;padding:18px 16px;}
.err-ico{
  flex:0 0 auto;
  width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff6a6a, #c00 70%);
  border:2px solid #800;
  color:#fff;font-weight:bold;font-size:30px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 2px 2px 4px rgba(255,255,255,.4);
  font-family:Tahoma,sans-serif;
}
.dialog-body p{margin:0;font-size:13px;line-height:1.4;}
.dialog-btns{display:flex;justify-content:center;gap:10px;padding:0 16px 16px;}
.dialog-btns .btn{min-width:84px;text-align:center;margin:0;}

/* ===================== TASKBAR ===================== */
.taskbar{
  position:fixed;left:0;right:0;bottom:0;
  height:36px;
  background:var(--silver);
  display:flex;align-items:center;gap:6px;
  padding:3px 4px;
  z-index:1000;
  box-shadow:
    inset 0 1px 0 0 var(--hi),
    inset 0 2px 0 0 var(--hi2);
  border-top:1px solid var(--hi);
}
.start-btn{
  display:flex;align-items:center;gap:6px;
  font-weight:bold;font-size:13px;
  background:var(--silver);
  padding:4px 10px 4px 6px;
  cursor:pointer;
  height:28px;
  box-shadow:
    inset 1px 1px 0 0 var(--hi),
    inset -1px -1px 0 0 var(--dk),
    inset 2px 2px 0 0 var(--hi2),
    inset -2px -2px 0 0 var(--sh);
}
.start-btn:active,.start-btn.open{
  box-shadow:
    inset 1px 1px 0 0 var(--dk),
    inset -1px -1px 0 0 var(--hi),
    inset 2px 2px 0 0 var(--sh);
}
.flag{
  width:18px;height:16px;flex:0 0 auto;
  background:
    linear-gradient(135deg,#ff3b3b 0 50%, #fff 50% 100%) ,
    linear-gradient(135deg,#21c521 0 50%, #2aa9ff 50% 100%);
  background-size:100% 50%,100% 50%;
  background-position:0 0,0 100%;
  background-repeat:no-repeat;
  border-radius:2px 2px 0 0;
  transform:skewX(-6deg);
  box-shadow:1px 1px 0 rgba(0,0,0,.3);
}
.task-open{
  flex:0 0 auto;
  display:flex;align-items:center;gap:6px;
  font-size:12px;height:28px;padding:0 10px;
  background:var(--silver);
  box-shadow:
    inset 1px 1px 0 0 var(--dk),
    inset -1px -1px 0 0 var(--hi),
    inset 2px 2px 0 0 var(--sh);
}
.task-open .ico{width:14px;height:14px;}
.tray{
  margin-left:auto;
  display:flex;align-items:center;gap:8px;
  padding:0 8px;height:28px;
  font-size:12px;
  box-shadow:
    inset 1px 1px 0 0 var(--dk),
    inset -1px -1px 0 0 var(--hi),
    inset 2px 2px 0 0 var(--sh);
}
.tray .tico{font-size:13px;line-height:1;}
.clock{font-variant-numeric:tabular-nums;}

/* ===================== START MENU ===================== */
.startmenu{
  position:fixed;left:4px;bottom:39px;
  width:230px;
  background:var(--silver);
  display:none;
  z-index:1001;
  box-shadow:
    inset 1px 1px 0 0 var(--hi),
    inset -1px -1px 0 0 var(--dk),
    inset 2px 2px 0 0 var(--hi2),
    inset -2px -2px 0 0 var(--sh),
    3px 3px 0 0 rgba(0,0,0,.4);
  padding:3px;
}
.startmenu.open{display:flex;}
.sm-side{
  width:30px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--navy),#202060);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:#fff;font-weight:bold;font-size:15px;
  text-align:center;
  font-family:"VT323",monospace;
  letter-spacing:2px;
  padding:8px 0;
}
.sm-side b{color:var(--cyan);}
.sm-list{flex:1 1 auto;padding:2px;}
.sm-list a{
  display:flex;align-items:center;gap:8px;
  padding:7px 8px;color:#000;text-decoration:none;font-size:13px;
}
.sm-list a .ico{width:18px;height:18px;text-align:center;}
.sm-list a:hover,.sm-list a[aria-current="page"]{background:var(--navy);color:#fff;}
.sm-sep{height:1px;background:var(--sh);box-shadow:0 1px 0 var(--hi);margin:3px 2px;}

/* ===================== DESKTOP ICONS ===================== */
.desktop-icons{
  position:absolute;top:16px;left:14px;
  width:94px;
  display:flex;flex-direction:column;gap:14px;
  z-index:5;
}
.dicon{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:94px;
  text-decoration:none;cursor:pointer;
  padding:5px 2px 4px;
  border:1px dotted transparent;
  background:transparent;font:inherit;
}
.dicon .dico{
  width:46px;height:42px;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;line-height:1;
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.45));
}
.dicon .dlabel{
  color:#fff;font-size:12px;text-align:center;line-height:1.18;
  text-shadow:1px 1px 0 #000, 0 0 2px #000;
  padding:0 3px;
}
.dicon:hover{border-color:#fff;}
.dicon:hover .dlabel,.dicon:focus-visible .dlabel{background:var(--navy);text-shadow:none;}
.dicon:focus-visible{outline:1px dotted #fff;outline-offset:-1px;}
.dicon:active .dico{transform:translateY(1px);}

@media (max-width:1180px){
  .desktop-icons{
    position:static;width:auto;
    flex-direction:row;flex-wrap:wrap;justify-content:center;
    gap:8px 14px;margin:0 auto 16px;max-width:920px;
  }
  .dicon{width:84px;}
}

/* ===================== POPUP (desktop dialog) ===================== */
.popup-overlay{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.18);
}
.popup{
  width:360px;max-width:92vw;
  background:var(--silver);
  box-shadow:
    inset 1px 1px 0 0 var(--hi),
    inset -1px -1px 0 0 var(--dk),
    inset 2px 2px 0 0 var(--hi2),
    inset -2px -2px 0 0 var(--sh),
    3px 3px 0 0 rgba(0,0,0,.45);
  padding:3px;
}
.popup .dialog-body{display:flex;gap:14px;align-items:center;padding:18px 16px;}
.popup .dialog-body p{margin:0;font-size:13px;line-height:1.45;}
.popup .dialog-btns{display:flex;justify-content:center;padding:0 16px 16px;}
.popup .dialog-btns .btn{min-width:84px;text-align:center;margin:0;}
.popup .info-ico{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #7ec8ff, #06c 70%);
  border:2px solid #036;color:#fff;font-weight:bold;font-size:24px;font-style:italic;
  display:flex;align-items:center;justify-content:center;font-family:Georgia,Tahoma,serif;
}

/* ===================== APP WINDOWS / WINDOW MANAGER ===================== */
.app-win{
  position:fixed;top:90px;left:80px;
  width:360px;max-width:96vw;
  background:var(--silver);
  padding:3px;
  display:none;
  z-index:100;
  box-shadow:
    inset 1px 1px 0 0 var(--hi),
    inset -1px -1px 0 0 var(--dk),
    inset 2px 2px 0 0 var(--hi2),
    inset -2px -2px 0 0 var(--sh),
    4px 4px 0 0 rgba(0,0,0,.4);
}
.app-win.open{display:block;}
.app-tb{cursor:move;touch-action:none;}
.app-win.dragging{opacity:.97;}

.task-apps{display:flex;align-items:center;gap:4px;overflow:hidden;}
.task-btn{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  font-size:12px;height:28px;padding:0 10px;max-width:170px;
  background:var(--silver);cursor:pointer;color:#000;
  white-space:nowrap;overflow:hidden;
  box-shadow:
    inset 1px 1px 0 0 var(--hi),
    inset -1px -1px 0 0 var(--dk),
    inset 2px 2px 0 0 var(--hi2),
    inset -2px -2px 0 0 var(--sh);
}
.task-btn .ico{flex:0 0 auto;}
.task-btn .lbl{overflow:hidden;text-overflow:ellipsis;}
.task-btn.active{
  box-shadow:
    inset 1px 1px 0 0 var(--dk),
    inset -1px -1px 0 0 var(--hi),
    inset 2px 2px 0 0 var(--sh);
  font-weight:bold;
}

/* ---- Winamp ---- */
#win-amp{top:70px;left:auto;right:5%;width:344px;}
#win-amp .app-tb{background:linear-gradient(90deg,#3b3b56,#0d0d18);}
.amp{background:#1b1b22;padding:8px;}
.amp-lcd{
  background:#0a0f0a;border:1px solid #000;box-shadow:inset 1px 1px 2px #000;
  padding:5px 8px;margin-bottom:6px;
  font-family:"VT323",monospace;color:#19e600;font-size:15px;
  display:flex;justify-content:space-between;gap:8px;align-items:center;
  text-shadow:0 0 4px rgba(25,230,0,.55);
}
.amp-lcd .marq{overflow:hidden;white-space:nowrap;flex:1;}
.amp-lcd .marq span{display:inline-block;animation:scroll 9s linear infinite;}
.amp-lcd .khz{flex:0 0 auto;font-size:12px;opacity:.85;}
.amp-viz{display:flex;align-items:flex-end;gap:2px;height:26px;margin-bottom:7px;}
.amp-viz i{flex:1;background:linear-gradient(#9dff5a,#19a000);height:30%;animation:viz .9s ease-in-out infinite;}
.amp-ctrl{display:flex;gap:3px;margin-bottom:8px;}
.amp-ctrl button{
  width:30px;height:22px;font-size:11px;background:var(--silver);border:none;cursor:pointer;color:#000;
  box-shadow:inset 1px 1px 0 0 var(--hi),inset -1px -1px 0 0 var(--dk),inset 2px 2px 0 0 var(--hi2),inset -2px -2px 0 0 var(--sh);
}
.amp-ctrl button:active{box-shadow:inset 1px 1px 0 0 var(--dk),inset -1px -1px 0 0 var(--hi);}
.amp-embed{border:1px solid #000;box-shadow:inset 1px 1px 2px #000;background:#000;}
.amp-embed iframe{display:block;width:100%;border:0;}

/* ---- Browser / retro site ---- */
#win-site{top:58px;left:6%;width:min(820px,94vw);}
.browser-bar{display:flex;align-items:center;gap:6px;padding:5px 7px;background:var(--silver);border-bottom:1px solid var(--sh);font-size:12px;}
.browser-bar .addr{
  flex:1;background:#fff;padding:3px 7px;font-size:12px;color:#222;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:inset 1px 1px 0 0 var(--dk),inset -1px -1px 0 0 var(--hi),inset 2px 2px 0 0 var(--sh);
}
.site-frame{background:#000;}
.site-frame iframe{display:block;width:100%;height:60vh;max-height:540px;border:0;background:#000;}

@keyframes viz{0%,100%{height:22%}25%{height:80%}50%{height:42%}75%{height:100%}}

/* ===================== GLOBAL GLITCH OVERLAY ===================== */
.glitch-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:40;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
  animation:flicker 6s infinite steps(3);
}
.tear{
  position:fixed;left:0;right:0;height:60px;pointer-events:none;z-index:41;
  background:rgba(0,255,255,.06);
  mix-blend-mode:screen;
  opacity:0;
  animation:tear 7s infinite;
}

/* ===================== KEYFRAMES ===================== */
@keyframes splitC{
  0%,100%{transform:translate(-2px,1px);clip-path:inset(0 0 60% 0);}
  25%{transform:translate(2px,-1px);clip-path:inset(40% 0 20% 0);}
  50%{transform:translate(-3px,0);clip-path:inset(70% 0 0 0);}
  75%{transform:translate(1px,1px);clip-path:inset(10% 0 50% 0);}
}
@keyframes splitM{
  0%,100%{transform:translate(2px,-1px);clip-path:inset(50% 0 10% 0);}
  25%{transform:translate(-2px,1px);clip-path:inset(0 0 70% 0);}
  50%{transform:translate(3px,0);clip-path:inset(20% 0 40% 0);}
  75%{transform:translate(-1px,-1px);clip-path:inset(60% 0 0 0);}
}
@keyframes flicker{
  0%,100%{opacity:1;}
  48%{opacity:.92;}
  49%{opacity:.6;}
  50%{opacity:1;}
  73%{opacity:.85;}
}
@keyframes scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@keyframes tear{
  0%,92%,100%{opacity:0;top:20%;}
  93%{opacity:1;top:30%;transform:translateX(-14px);}
  94%{opacity:1;top:55%;transform:translateX(18px);}
  95%{opacity:1;top:70%;transform:translateX(-10px);}
  96%{opacity:0;top:45%;transform:translateX(0);}
}
@keyframes dlgglitch{
  0%,90%,100%{transform:translate(0,0);}
  91%{transform:translate(-3px,1px) skewX(-1deg);}
  92%{transform:translate(4px,-1px);}
  93%{transform:translate(-2px,0);}
  94%{transform:translate(0,0);}
}
/* whole-window slice glitch (occasional) */
.window{animation:winglitch 9s infinite;}
/* pages that opt out of the window jitter (e.g. the form page) */
.page-static .window{animation:none;}
@keyframes winglitch{
  0%,96%,100%{transform:translateX(0);filter:none;clip-path:none;}
  97%{transform:translateX(-6px);filter:hue-rotate(20deg);}
  98%{transform:translateX(7px);}
  99%{transform:translateX(-3px);}
}

/* ===================== CRASH SEQUENCE (easter egg) ===================== */
.crash-shake{animation:crashshake .12s steps(2) infinite;}
@keyframes crashshake{
  0%{transform:translate(0,0)}
  25%{transform:translate(-4px,2px)}
  50%{transform:translate(5px,-3px)}
  75%{transform:translate(-3px,-2px)}
  100%{transform:translate(3px,3px)}
}
.crash-glitch{
  position:fixed;inset:0;z-index:3000;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,0,255,.10) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, rgba(0,255,255,.07) 0 3px, transparent 3px 6px);
  mix-blend-mode:screen;
  animation:crashglitch .18s steps(3) infinite;
}
@keyframes crashglitch{
  0%{transform:translateX(0);opacity:.7;filter:hue-rotate(0deg)}
  33%{transform:translateX(-8px);opacity:1;filter:hue-rotate(90deg)}
  66%{transform:translateX(10px);opacity:.5;filter:hue-rotate(220deg)}
  100%{transform:translateX(0);opacity:.85}
}
.crash-err{
  position:fixed;width:300px;max-width:88vw;z-index:3100;
  background:var(--silver);padding:3px;
  box-shadow:
    inset 1px 1px 0 0 var(--hi),inset -1px -1px 0 0 var(--dk),
    inset 2px 2px 0 0 var(--hi2),inset -2px -2px 0 0 var(--sh),
    3px 3px 0 0 rgba(0,0,0,.4);
}
.bsod{
  position:fixed;inset:0;z-index:4000;background:#0000aa;color:#fff;
  font-family:"VT323",monospace;font-size:clamp(15px,2.4vw,21px);line-height:1.5;
  padding:8vh 8vw;overflow:hidden;
}
.bsod h2{
  background:#bdbdbd;color:#0000aa;display:inline-block;padding:0 12px;
  font-family:"VT323",monospace;font-weight:normal;font-size:1em;letter-spacing:2px;margin:0 0 1.4em;
}
.bsod p{margin:0 0 1em;max-width:62ch;}
.blink{animation:bsodblink 1.1s steps(1) infinite;}
@keyframes bsodblink{50%{opacity:0;}}
.reboot{
  position:fixed;inset:0;z-index:4000;background:#000;color:#c8c8c8;
  font-family:"VT323",monospace;font-size:clamp(14px,2.2vw,19px);line-height:1.6;
  padding:6vh 7vw;overflow:hidden;
}
.reboot .ok{color:#2de02d;}
@media (prefers-reduced-motion: reduce){
  .crash-shake{animation:none;}
  .crash-glitch{animation:none;}
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce){
  .brand::before,.brand::after{
    animation:none;
  }
  .brand::before{transform:translate(-2px,0);}
  .brand::after{transform:translate(2px,0);}
  .ticker span{animation-duration:60s;}
  .glitch-overlay,.brandwrap::after,.tear,.window,.dialog{animation:none !important;}
  .tear{display:none;}
  .amp-viz i{animation:none;height:55%;}
}

/* ===================== MOBILE ===================== */
@media (max-width:560px){
  body{padding:10px 6px 50px;}
  .win-body{padding:10px;}
  .menubar{flex-wrap:wrap;}
  .icons{justify-content:center;}
  .hero-flex{flex-direction:column;}
  .artist-card{flex-direction:column;}
  .artist-card .photo,.artist-card .photo img{width:100%;max-width:240px;}
  .sm-side{display:none;}
  .task-open{display:none;}
}