/* Base layout */
body { margin:0; font-family:Arial,sans-serif; overflow:hidden; display:flex; height:100vh; }

html, body { overflow:hidden; }

#thePage { position:absolute; left:0; top:0; width:100%; height:100%; z-index:calc(var(--vignetteZ) - 20) !important; pointer-events:none;  }
#text-column { width:100vw; padding:0px; box-sizing:border-box;  z-index:calc(var(--vignetteZ) - 19) !important; position:absolute; left:0; top:0; bottom:0; overflow:hidden; pointer-events:none; }

.vt323-regular { font-family:"VT323", monospace; font-weight:400; font-style:normal; }

/* Sheets: global 14px type + pointers */
.sheet {
  font-size:14px;
  line-height:22px;
  background:#f4f4f4;
  color:#000;
  padding:20px;
  box-shadow:3px 3px 30px rgba(0,0,0,.5);
  position:absolute; z-index:1001; display:none;
  font-family:"1913_Typewriter", monospace; font-weight:400;
  pointer-events:auto;
}
#sheet1 { left:80px !important; width:300px; display:none; z-index:1; top:10000px; min-height:400px; }
#sheet2 { left: 360px !important; width:350px; z-index:2; }
#sheet3 { left: 120px !important; width:550px; z-index:3;  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout paint style;
  touch-action: none;
 }


html.sheet3-open, body.sheet3-open {
   overscroll-behavior-y: contain;
   touch-action: none;
 }


.sheet ::selection, .sheet ::-moz-selection {
  background: rgba(255,255,0,.9); color:#000; mix-blend-mode:multiply; filter:brightness(1.5) saturate(1.5);
}

#lyrics-container p {  margin-bottom:1rem; }

.album-divider { }

.album-link { text-decoration:none; color:inherit; position:relative; display:block;   width: fit-content;  padding:0 5px; font-size:inherit; }

.music-link { font-size:inherit;  }

.no-left-pad {
  padding-left: 0;
}
/* Lists as a11y anchor lists */
.album-list[role="list"], .track-list[role="list"] { display:block; }
.album-item, .track-item {
  display:block;       /* shrink to text width */
  width: fit-content; 
  padding: 0;
  text-decoration:none;
  font-size:inherit; 
  cursor:pointer;
  color:#000000;
}
.album-item:focus-visible, .track-item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Track lyrics panel */
.track-lyrics { font-size:14px; line-height:23px; background:#f1f1f1; color:#333; padding:40px; }
.disco-links { border:0; pointer-events:auto; touch-action:auto !important; }

/* Polaroids */
.polaroid { position:absolute; width:200px; height:200px; z-index:3; cursor:pointer; border-radius:3px; border-left:2px solid rgba(255,255,255,.1); border-top:2px solid rgba(255,255,255,.1); pointer-events:auto; }
.polaroidInside { position:absolute; left:0; top:0; width:100%; height:100%; background:#000; z-index:4; overflow:hidden; }
.polaroidWhite { position:absolute; z-index:2; inset:0; background:#fff; }
.imageInside { position:absolute; left:0; top:0; width:100%; height:100%; z-index:4; }
.actualImageInside { position:absolute; width:100%; height:100%; left:0; top:0; opacity:0; }
.coverInside { position:absolute; left:0; top:0; width:100%; height:100%; z-index:3; overflow:hidden; }
.coverImageInside { width:100%; height:100%; object-fit:cover; }
.boxShadow { box-shadow:4px 4px 2px rgba(0,0,0,.3); }

/* Tear edge */
.tear::after {
  content:""; position:absolute; top:100%; height:20px; width:100%; left:0;
  background:url(/xch/images/xch_backgrounds/rip.svg) bottom; background-size:100%;
  margin-top:-1px;
}





:root {
  --gradient-height: 100px;   /* Height of visible fade on screen */
  --offscreen-height: 100px;   /* Extra solid black beyond screen */
}

#discography_gradient {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; /* Allow taps through */
  z-index:calc(var(--vignetteZ) + 1);
  height: calc(var(--gradient-height) + var(--offscreen-height));
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) var(--gradient-height),
    rgba(0, 0, 0, 1) 100%
  );
}



@media (max-width:599px){
  
  #thePage { 
    position:absolute;
     top:10px;
  }
  
.sheet {
    font-size:12px;
    padding:10px; 
    line-height:18px;
  }
  
  #sheet1{ width:60vw; left:30px !important;  min-height:40vh; }
  #sheet2 { width:auto; left:auto !important; right:30px !important; max-width:60vw; }
  #sheet3 {width: calc(100vw - 80px); left:40px !important; }

  .album-item, .track-item { padding:0px; }

#vignette {
  box-shadow: 0 0 20px 20px rgba(0,0,0,1) inset;
}



}


.bordered-box-bg {
    visibility: visible !important;
    border-top:none;
    border-left:none;
    border-right:none; 
    z-index:999;
}