:root {
  --box-margin-mobile: calc(var(--box-margin) / 3);
  --box-margin-extra: 55px;
  --vignetteZ: 1008;
  --the_curtainZ: 1009;
  --condensed-bold-stack: "UniversLTPro", "Arial Narrow", "Arial", sans-serif !important;
}


    /* Reset default margins and paddings */
    * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
    }


/* Text selection (light mode) */
    ::selection {
      background:rgba(255, 255, 0, 0.9); /* highlight yellow */
      color: #000;         /* readable text */
    }
    ::-moz-selection {
      background: rgba(255, 255, 0, 0.9);
      color: #000;
    }


#theContent {
  position:static;
  opacity:0;
}

#faux_div {
  position:fixed; left:0; top:-200px; width:1px; height:1px; display:none;
}
.outSideTheContent {
  opacity:0;
}


.noSelect {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none; /* iOS Safari: disables callout menu */
  -webkit-user-drag: none;     /* Disables dragging elements/images */
}


.mobile_shadow {
      text-shadow: 0 0 1px var(--backgroundColor), 0 0 10px var(--backgroundColor), 0 0 10px var(--backgroundColor);
    }

#faux_top { 
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:50vh;
      background: linear-gradient(180deg,var(--foregroundHundred) 0%, var(--foregroundHundred) 20%, var(--foregroundZero) 100%);
      pointer-events:none;
      display:none; 
    }
    
    
    #faux_bottom { 
      position:relative;
      left:0;
      bottom:0;
      width:100%;
      height:50vh;
      background: linear-gradient(180deg,var(--foregroundZero) 0%, var(--foregroundZero) 20%, var(--foregroundHundred) 100%);
     pointer-events:none;  
     display:none; 
    }



html, body { background-color:var(--backgroundColor); color:var(--foregroundColor);  overflow-x:hidden; }

html {
  -webkit-text-size-adjust: 100%; /* or  none */
}

.inline_hide { display:inline; }
.mobile_show { display:none; }
    /* Full-screen div with adjustable margin and border */
    .bordered-box {
	z-index:1020;
	position: fixed;
	top: var(--box-margin);
	left: var(--box-margin);
	right: var(--box-margin);
	bottom: var(--box-margin);
	border: var(--border-width) solid var(--borderColor);
	border-top:none;
	border-left:none;
	border-right:none; 
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: center;
	opacity: 0;
	border-radius:0px;
	pointer-events:none;
    }
    
    .bordered-box-bg {
	    z-index:1010;
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    border: var(--box-margin) solid var(--backgroundColor);
	    border-top:none;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    transform-origin: center;
	    opacity: 1;
	    border-radius:0px;
	    pointer-events:none;
	    visibility:hidden;
	}
    
    
    

    /* Grid container for navigation choices */
    .choices {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	font-size:max(14px);
	pointer-events:auto;
    }

    /* Choice sections */
    .left-choices, .right-choices {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
	border:0px solid #000000;
	margin-top:var(--border-width);
    }


    .choice, .mobile-choice {
font-family: var(--condensed-bold-stack); font-weight:700; font-stretch:condensed; text-transform:uppercase;    padding: 5px 15px;  display: inline-block;
   transform-origin: center;  transition-duration:.2s; }


.mobile-choice {  padding: 15px 10px; }




 .choice-divider {
     margin-top:0px;
background-color: var(--borderColor);
height:var(--border-width);
    width:100%; 
 }


    /* Logo styling (Now Clips Properly) */
    .logo, .fake_logo {
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
	color: var(--foregroundColor);
	font-family: var(--fontFamily);
	position: relative;
	background: transparent;
	display: inline-block;
	padding-left:var(--logoPadding);
	padding-right:var(--logoPadding);
	
	opacity:1;
    }
    
   .logo { position:fixed; z-index:1999; top:20px; left:50%; margin-left:var(--logoMargin);  }
   
   
   .logo_img { width:var(--logoWidth); }
   
    .fake_logo { visibility:hidden; pointer-events:none; }

    /* Centering Guidelines */
    .guideline {
	position: fixed;
	background-color: #00FFFF;
	z-index: 99999999;
	pointer-events: none;
	opacity:1;
	pointer-events:none;
	display:none;
    }

    /* Vertical Center Line */
    .vertical-line {
	width: 1px;
	height: 100%;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	position: fixed;
    }

    /* Horizontal Center Line */
    .horizontal-line {
	height: 1px;
	width: 100%;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	position: fixed;
    }


 
    .border-line {
	height: var(--border-width);
	background: var(--foregroundColor);
	flex: .1;
    }

.paddingLeft {
    margin-left:20px;
}

#copyright { position:absolute; top:100%; font-size:11px; font-weight:bold; margin-top:13px; margin-left:-3px; text-align:left; color:var(--socialColor); font-family:var(--fontFamily); left:0; z-index:1000; }

#copyright a { text-decoration:none; colour:inherit; color:var(--socialColor); pointer-events:auto; }
#copyright a:hover { color:var(--socialColor); text-decoration:underline; text-decoration-thickness:2px;  text-underline-offset: 6px;  }




#copyright ul {
  list-style: none;
  display: flex;
  gap: 0.1rem;
  padding: 0;
  margin: 0;
  line-height:15px;
}

/* Add visual separators between links */
#copyright ul li:not(:last-child)::after {
  content: "|";
  margin-left: .1rem;
  margin-right: .1rem;
  color: inherit; /* adjust colour */
}




#socials {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  font-size: 28px;
  pointer-events: auto;
 padding-top:10px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  margin-top:0.5rem;
}

.socials-inner {
  display: flex;
  justify-content: right; /* Default: right-align on desktop */
  align-items: center;
  flex-wrap: wrap;
 width:100%; 
gap: 0.5rem; /* for vertical spacing */
  
}

.social-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 28px;
}

.lozenge-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  cursor: pointer;
}

.lozenge-svg {
  display: block;
  height: 100%;
  width: auto;
}

.lozenge-link {
  display: block;
  line-height: 0;
  text-decoration: none;
}

/* Icon styling */
#socials svg:not(.lozenge-svg) {
  color: inherit;
  width: 1em;
  height: 1em;
  display: block;
}

.lozenge-bg {
  fill: var(--socialColor); /* fallback to blue */
  transition: fill 0.3s ease;
}
.lozenge-wrapper:hover .lozenge-bg {
  fill: var(--socialColorHover); /* fallback to pink */
}

#socials a {
  color: var(--socialColor);
  text-decoration: none;
}

#socials a:hover {
  color: var(--socialColorHover);
}



.fa-mimeartist-logo { font-size:13px; }

#vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 box-shadow: 0 0 min(10vw, 10vh) min(10vw, 10vh) rgba(0,0,0,0.9) inset;
  z-index:var(--vignetteZ);
  pointer-events:none;
}

.container-text-shadow {
  text-shadow: 0 0 20px rgba(0,0,0,0.3);
}

#main-logo { margin-top:-100px; }

.choice a, .mobile-choice a { text-decoration:none; color:var(--textColor);  }

.choice a:hover, .mobile-choice a:hover { color:var(--hoverColor);  text-decoration: underline;   text-decoration-color:var(--underlineColor);  text-decoration-thickness:var(--choice_underline);  text-underline-offset: 15px;   } 
.choiceChosen a, .choiceChosen a:hover  { color:var(--chosenColor);  text-decoration: underline;    text-decoration-color:var(--chosenUnderlineColor); text-decoration-thickness:var(--choice_underline);  text-underline-offset: 15px;   }

 .mobile-choice a:hover {  text-decoration: none;  }

#main-logo {
	cursor:pointer;
}


#left-menu-holder {
	position:absolute;
	left:0;
	top:0;

	height:100%;
}
	
.left-menu {
  width: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0;
  margin:0;
  height:100%;
  margin-left:-18px;
  pointer-events:auto;
}




#right-menu-holder {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

.right-menu {
  width: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0;
  margin: 0;
  height: 100%;
  margin-right: -18px; /* mirror of left-menu's -18px left margin */
  pointer-events: auto;
}




.menu-item-left {
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* 90° anticlockwise */
  text-align: center;
  cursor: pointer;
}

.menu-item-right {
  writing-mode: vertical-rl;
 
  text-align: center;
  cursor: pointer;
}



.divider {
  width: var(--border-width);
  height: 100%;
  background-color: var(--borderColor);
}

.mobile-choice { display:none; }

@media (max-width: 1000px) {
.choice { padding: 5px 5px; }

.logo, .fake_logo {
left-padding:13px;
right-padding:13px; 
}

}

























/* Drop-in highlighter swipe with slow linger fade */
.highlight-swipe-link{
  mix-blend-mode: multiply;
  position: relative;
  display: inline-block;      /* required for width animation */
  box-sizing: border-box;
  padding: 0 0px;
  line-height: 1.5;
  color: #333 !important;
  text-decoration: none !important;
  isolation: isolate;
  z-index: 0;

  /* Tunables (override per element if you like) */
  --ink: rgba(255, 255, 0, 0.9);
  --pad-top: .18em;
  --pad-btm: .12em;
  --radius: .18em;

  --wipe-dur: 1.8s;                       /* <— swipe duration */
  --wipe-ease: cubic-bezier(.22,.61,.21,1);
  --wipe-delay: 0s;

  --fade-dur: 2.5s;
  --fade-delay: .5s;
  --fade-ease: ease-out;
}

/* shared box for both layers */
.highlight-swipe-link::before,
.highlight-swipe-link::after{
  content:"";
  position:absolute;
  left:-5px; right:-5px;
  top:var(--pad-top); bottom:var(--pad-btm);
  background:var(--ink);
  border-radius:var(--radius);
  pointer-events:none;
  z-index:-1;
}

/* lingering glow – slow fade AFTER hover */
.highlight-swipe-link::after{
  opacity:0;
  mix-blend-mode:multiply; /* remove if it tints too much */
  transition: opacity var(--fade-dur) var(--fade-ease) var(--fade-delay) !important;
}
.highlight-swipe-link:hover::after{
  opacity:1;
  transition: opacity .2s ease-in !important;
}

/* swipe layer – animate width ONLY on hover (never reverses) */
.highlight-swipe-link::before{
  opacity:0;
  left:0;
  right:auto !important;          /* <— critical so width can grow */
  width:0;
  mix-blend-mode:multiply;

  /* block global transition rules */
  transition: none !important;
  transition-property: none !important;
}
.highlight-swipe-link:hover::before{
  opacity:1;
  width:100%;

  /* Force our timing to apply (so --wipe-dur always works) */
  transition-property: width !important;
  transition-duration: var(--wipe-dur) !important;
  transition-timing-function: var(--wipe-ease) !important;
  transition-delay: var(--wipe-delay) !important;
}


/* Always-on swipe when active (albums + tracks) */
#sheet1 .album-item.active.highlight-swipe-link::before,
#sheet2 .track-item.active.highlight-swipe-link::before{
  opacity: 1;
  width: 100%;
  transition: none !important;      /* keep it pinned */
}

#sheet1 .album-item.active.highlight-swipe-link::after,
#sheet2 .track-item.active.highlight-swipe-link::after{
  opacity: 1;
  transition: none !important;      /* keep the glow present */
}

/* Optional: keep your original text color/weight if you don't want bold from the base class */
#sheet1 .album-item.highlight-swipe-link,
#sheet2 .track-item.highlight-swipe-link{
  color: inherit !important;
  font-weight: inherit;
}

/* Optional: set a consistent ink just for these lists */
#sheet1 .album-item.highlight-swipe-link,
#sheet2 .track-item.highlight-swipe-link{
 
}



/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .highlight-swipe-link:hover::before{
    transition: none !important;
    width:100%;
  }
  .highlight-swipe-link::after,
  .highlight-swipe-link:hover::after{
    transition: none !important;
    opacity: 1;
  }
}















@media (max-width: 768px) {
  /* Styles for touch-based mobiles only */
  
  #socials {
    font-size: 26px;
  margin-top:22px;
}

 #faux_top,  #faux_bottom {
    display: block;
  }
  
  /* shared box for both layers */
  .highlight-swipe-link::before,
  .highlight-swipe-link::after{
    left:-5px; right:-5px;
  }
  
  .logo, .fake_logo { top:0px; }
  
  .choice { display:none; }
.mobile-choice { display:inline; }

.choiceChosen a, .choiceChosen a:hover { text-decoration:none; }

.mobile_hide { display:none !important; }



 
 
  #copyright { font-size:10px !important; }

  #copyright a:hover { color:var(--socialColorHover); text-decoration:none;  }
  
  .bordered-box {
  top: var(--box-margin-mobile);
  left: var(--box-margin-mobile);
  right: var(--box-margin-mobile);
  bottom: var(--box-margin-extra);
}

  .bordered-box-bg {
border: var(--box-margin-mobile) solid var(--backgroundColor);
border-bottom: var(--box-margin-extra) solid var(--backgroundColor);
}

#copyright { margin-top:5px; margin-left:0px; } 
  .mobile_show { display:inline; }
}



:where(a, button, [role="button"], input, textarea, select):focus-visible {
  outline: 3px solid #FFFF00 !important;
  outline-offset: 4px !important;
  border-radius:3px;
}










@media (max-width: 599px) {
  
  #socials {
    margin-top:22px;
    gap: 0.0em; /* optional spacing between icons */
   
  }
  .socials-inner {
    justify-content: space-between;
    gap: 0.0rem;
    padding: 0 3px; /* pushes items inward slightly */
    box-sizing: border-box;
   
  }
  
  .socials-inner > *:first-child {
    margin-left: -3px; /* cancels the left padding */
  }
  
  .socials-inner > *:last-child {
    margin-right: -3px; /* cancels the right padding */
  }
  
  .social-item {
    flex: 1 1 auto;
  }
  
  .lozenge-wrapper {
    order: -1; /* Put the lozenge first on mobile */
    flex: 1 1 100%;
    justify-content: center;
    margin-bottom: 0.0rem;
  }
}




/* The entire scrollbar area */
::-webkit-scrollbar {
  width: 6px;
}

/* The background track */
::-webkit-scrollbar-track {
  background:  var(--backgroundColor); /* scrollbar track colour */
}

/* The draggable thumb */
::-webkit-scrollbar-thumb {
  background-color:  var(--borderColor); /* scrollbar thumb colour */
  border-radius: 0px;
  border: 1px solid var(--backgroundColor); /* adds a border to separate from track */
}

/* On hover */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--borderColor);
}



/* Biro circle link style */
a.biro {
  position: relative;
  display: inline;
  padding: 0.25em 0.6em;
  text-decoration: none;
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

a.biro::before {
  content: '';
  position: absolute;
  top: calc(-0.15em + 2px);
  left: calc(-0.3em + 6px);
  right: calc(-0.3em + 2px);
  bottom: calc(-0.15em + 2px);
  border: 3px solid #dc2626;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  pointer-events: none;
  filter: url(#wobble3);
  transition: all 0.2s ease;
  opacity: 0.7;
  mix-blend-mode: multiply;
}

a.biro:hover::before {
  border-width: 7px;
  top: calc(-0.15em);
  left: calc(-0.3em);
  right: calc(-0.3em);
  bottom: calc(-0.15em);
}

/* Rounded biro circle link style */
a.biro-rounded {
  position: relative;
  display: inline;
  padding: 0.25em 0.6em;
  text-decoration: none;
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

a.biro-rounded::before {
  content: '';
  position: absolute;
  top: calc(-0.15em + 2px);
  left: calc(-0.3em + 6px);
  right: calc(-0.3em + 2px);
  bottom: calc(-0.15em + 2px);
  border: 3px solid #dc2626;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  pointer-events: none;
  filter: url(#wobble3);
  transition: all 0.2s ease;
  opacity: 0.7;
  mix-blend-mode: multiply;
}

a.biro-rounded:hover::before {
  border-width: 7px;
  top: calc(-0.15em);
  left: calc(-0.3em);
  right: calc(-0.3em);
  bottom: calc(-0.15em);
}