/**
* CSS
* 
* @version 2.0
* @author Vaska 
*
* There are also some obscure rules in base.css
*/

@font-face {
  font-family: "Snell Roundhand";
  src: url("fonts/.60371.otf") format("opentype"),
       url("fonts/.60371.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "Snell Roundhand";
    src: url("/ndxzsite/css/fonts/.60371.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Stickley";
    src: url("/ndxzsite/css/fonts/Stickley-regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Stickley";
    src: url("/ndxzsite/css/fonts/Stickley-italic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

body {
	

font-size: 12px;
	font-family: "Stickley", serif;
	background: #0D0D0D;
	color: #FFFFFF80;
	line-height: 1.5em;
	/* font-weight: 300; */
}

}

/* link scheme */
/* you can customize links further down the page too */
a:link { text-decoration: none; color: #FFFFFF80; }
a:visited { text-decoration: none; color: #FFFFFF80; }
a:hover { text-decoration: underline;  color:  #ffffff; }
a:active { text-decoration: none; color:  #ffffff; }
a img { border: none; }
audio:focus { outline: none; }

/* general styles */
small { font-size: 9px; }
code { font-family: monospace; }
blockquote { padding-left: 9px; }

/* headings */
h1 { font-size: 16px; margin-bottom: 1em; font-weight: bold; color: #FFFFFF80; }
h2 { font-size: 16px; margin-bottom: 1em; font-weight: bold; }
h3 { font-size: 12px; margin-bottom: 1em; color: #3D3D3D; }
h4 { font-size: 16px; margin-bottom: 1em; }
h6 {
    font-family: "Stickley-Regular", serif;
}

/* paragraph width */
#index p { margin-top: 3em; margin-bottom: 1em; font-size: 8px; color: #FFFFFF80 !important;}
/* Covers normal, unvisited, and visited links */
#index p a,
#index p a:link,
#index p a:visited {
  color: #FFFFFF80 !important;
  text-decoration: none;
}

#exhibit p, code, blockquote { width: 600px; margin-bottom: 1em; /* line-height: 1.3em; */ }

/* highlighter style - maybe you want to change colors? */
.highlight { background: #ccff00; color: #000; }

/* never adjust the margin or padding here unless you seriously know what you are doing */
/* think #index .container and #exhibit .container for only padding adjustments */
#index { width: 215px; background: #0D0D0D; font-family: "Stickley", serif;/* line-height: 1.3em; */ }
#exhibit { margin: 0 0 0 215px; }

/* styling the index */
#index ul { list-style: none; margin: 0; color: #FFFFFF80; }
#index ul.section { margin-bottom: 1em; }
#index ul.subsection {  }

/* the follow rules for index are not required */
/* they are mostly for complex customization */
/* for tag display */
#index ul#all_tags { list-style-type: none; margin-bottom: 1em; }
#index ul#all_tags li { display: inline; margin-right: 3px; }
#index ul#all_tags li a {  }

/* styles for the section titles */
#index ul.section span.section_title, 
#index ul.section span.section_title a 
{ color: #FFFFFF80;  font-size: 12px;}

/* active section title */
#index span.active_section_title,
#index span.active_section_title a { font-weight: bold; }

/* active exhibit title parts */
/* color of active exhibit title link and font-weight */
li.active a:link, li a.active, li.active a:hover, li a.active, li.active a:active, li a.active, 
li.active a:visited, li a.active, li span.active, #index ul.section li.active a:link, 
#index ul.section li.active a:hover, #index ul.section li.active a:active, #index ul.section li.active a:visited
{ font-weight: normal; color: #ffffff; }

/* additional #index options */
#index ul li .password a { /* background: url(../img/locked.gif) right center no-repeat; padding-right: 18px; */ }

/* the "new" indicator */
#index ul li sup.new_exhibit { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; }
#index ul li sup.new_exhibit:before { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; content: "New"; }
/* end styling for index */

/* links styles only for the #index region */
#index a:link { text-decoration: none; } 
#index a:visited {  }
#index a:hover { color: #ffffff;} 
#index a:active { color:  #ffffff ; } 

/* links styles only for the #exhibit region */
#exhibit a:link {text-decoration: none; color: #FFFFFF80 }
#exhibit a:visited {  }
#exhibit a:hover { text-decoration: underline; } 
#exhibit a:active { text-decoration: underline; } 

/* links styles just for h1 title of site (your name/logo) */
#index h1 a { font-family: 'Snell Roundhand';font-size: 20px; font-weight: lighter; text-decoration: none; color: #FFFFFF80; transition: color 0.2s ease; display: inline-block; /* Required for transform or precise margin alignment */
  margin-left: -6px;     /* Nudges the 'S' slightly to the left */}
#index h1 {
  display: block;
  margin: 0 0 35px 0 !important;
  padding: 0 !important;
}

/* this is where you adjust your paddings for #index and #exhibit together */
.container { padding: 8px 9px 8px 0px; }

/* this is where you pad them separately */
#index .container { padding: 8px 9px 8px 27px;  }
#exhibit .container { }

/* size and style of titles and captions (not mobile though) */

.over {
    text-align: center;
}

.over .asset {
    text-align: center;
}

.over .spacer {
    text-align: center;
     padding-top: 10px;
    padding-bottom: 35px;
}

.over .captioning {
    display: inline-block;
    text-align: center;
}

.over .title {
    font-size: 12px;
    font-family: "Stickley", serif;
    font-style: italic;
    line-height: 1.5em;
    color: #FFFFFF80;
    text-align: center;
}

/* Force dark background and text on main containers on mobile */
body.format-mobile #index,
body.format-mobile #exhibit,
body.format-mobile #exhibit .content,
body.format-mobile .content {
  background-color: #0D0D0D !important;
  color: #3D3D3D !important;
  font-family: "Stickley-Regular", serif !important;
}


/* =========================================================
   SLIDESHOW CURSORS & OVERLAYS
   ========================================================= */

#slide-previous,
#slide-next {
  display: none !important;
}

#slideshow .picture,
#slideshow .picture a,
#slideshow .picture img {
  cursor: default !important;
}

.slide-overlay-left {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 50% !important;
  height: 100% !important;
  z-index: 999999 !important;
  cursor: w-resize !important;
  background: transparent !important;
}

.slide-overlay-right {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 50% !important;
  height: 100% !important;
  z-index: 999999 !important;
  cursor: e-resize !important;
  background: transparent !important;
}

/* =========================================================
   HOVER / TAP IMAGE PREVIEW LIST
   ========================================================= */

/* Item container setup */
.work-item {
  position: relative;
  display: block;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.work-title {
  display: block;
}

.work-role {
  display: block;
  font-style: italic;
  opacity: 0.7;
}

/* Hidden image setup for Desktop */
.work-item .preview-img {
  display: none;
  position: absolute;
  top: 0;
  left: 320px;            /* Positions image to the right of your text list */
  width: 350px;           /* Fixed width on desktop */
  height: auto;
  z-index: 9999;
  pointer-events: none;   /* Prevents flickering on hover */
}

/* Display image on Desktop Hover */
.work-item:hover .preview-img {
  display: block;
}


/* =========================================================
   WORK ITEM LAYOUT & SPACING FIX
   ========================================================= */

/* Parent item container */
#exhibit .work-item,
div.work-item {
  display: block !important;
  margin-bottom: 22px !important; /* Space between different projects */
  margin-top: 0 !important;
  padding: 0 !important;
  position: relative !important;
  clear: both !important;
  cursor: pointer;
}

/* Neutralize any <p> tags Indexhibit auto-injects inside work-item */
#exhibit .work-item p {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Eliminate auto-injected <br> spacing inside work items */
#exhibit .work-item br {
  display: none !important;
}

/* Title styling */
#exhibit .work-item .work-title,
.work-item span.work-title {
  display: block !important;
  margin-bottom: 3px !important; /* Vertical gap between Title and Role */
  line-height: 1.4 !important;
  font-size: 12px !important;
  color: #FFFFFF80 !important;
}

/* Subtitle/Role styling */
#exhibit .work-item .work-role,
.work-item em.work-role {
  display: block !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  font-size: 10px !important;
  font-style: italic !important;
  opacity: 0.55 !important;
}

/* Hover Preview Image */
#exhibit .work-item .preview-img {
  display: none;
  position: absolute !important;
  top: 0 !important;
  left: 320px !important;
  width: 350px !important;
  height: auto !important;
  z-index: 99999 !important;
  pointer-events: none !important;
}

#exhibit .work-item:hover .preview-img {
  display: block !important;
}