/* General Reset and Basic Styles */
body, html {
    background-image: url("../grcsWeb/WhitePaper.jpg");
    margin: 0px auto;
    padding-top: 0px;
    box-sizing: border-box;
    width: 1080px;
    border: solid 0px;
}
        * {
            box-sizing: inherit;
         font-family: "Times New Roman", Cambria, "Hoefler Text", "Liberation Serif", "serif";
            line-height: 1.25;
            color: #333;
        }

        /* Header Typography */
        h1 {
            text-align: center;
            margin: 0px;
        }

 
		
		/* Podcast Button */
		.podcast {
            font-size: clamp(10px, 2vw, 14px);
            width: 50px;
			height: 50px;
			padding: 5px 5px 5px 5px;
        }
		
		.infoBar {
           	text-align: center;
			margin: auto;
        }

        /* Footer Typography */
        footer {
            font-size: clamp(12px, 1.5vw, 14px);
            text-align: center;
            margin-top: 40px;
            padding: 10px;
            background-color: #f0f0f0;
        }
		
		
 
      
	
	
		
.image-wrapper img {
	filter: grayscale(100%);
	transition: filter .7s ease-in;
	width: 100%;
	display: block;
}

	.image-wrapper.colorized img,
	.image-wrapper:hover img {
	filter: grayscale(0%);
}
	
	.dept-wrapper img {
	filter: grayscale(100%);
	transition: filter .3s ease-in;
	display: block;
}

	.dept-wrapper.colorized img,
	.dept-wrapper:hover img {
	  filter: grayscale(0%);
}
	.pubData{
		width: 650px;
		margin: 0 auto;
		font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
		font-size: 12pt;
		text-align: center;
	}
	
	.f-cover{
		width:440px; 
		height:440px;
		transform: translate(30px, 212px);
	}
	
	.m-cover{
		width:200px; 
		height:200px;
		transform: translate(30px, 212px);
	}
	
	
	.pubData{
		width: 540px;
		margin: 0 auto;
		font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
		font-size: 18pt;
		text-align: center;
		line-height: normal;
	}
	.writtenBy{
		
	}
	.dMag{
		font-size: 24pt;
	}
	.pubDate{
		font-size: 14pt;
		
	}
	.contentBin {
		width: 540px;
		padding-left: 180px;
	}

	.rollOverInfo{
		position:relative;
		top:260px;
		left: 330px;
		background-color:black;
		color:white;
		height: 110px;
		width: 320px;
		align-content: center;
		text-align: center;
		border:groove 4px;
		border-radius: 15px;
		border-color: goldenrod;
	}
	
	.rollOverInfo span{
		background-color:black;
		color:white;
		align-content: center;
		text-align: center;
	}
	
	/*sort sinage*/
.currentSort {
	border:dashed 1px;
    color: whitesmoke;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 36pt;
	font-weight: bold;
	font-variant-caps:normal;
    transform: translate(-195px, -900px);
}

/*shelf navigation*/
	.nav-wrapper img {
		filter: grayscale(100%);
		transition: filter .3s ease-in;
		display: block;
	}
	.nav-wrapper.colorized img,
	.nav-wrapper:hover img {
		filter: grayscale(0%);
	}	
	
	.nnL img{
		height: 60px;
		transform: translate(-46px, 396px);
	}
	
	.nnR img {
		height: 60px;
		transform: translate(888px, 340px);
	}
	
	
	
/*rack positions*/
	.NS01 {
		transform: translate(-248px, 82px);
	}
	.NS02 {
		transform: translate(-75px, -139px);
	}	
	.NS03 {
		transform: translate(95px, -359px);
	}	
	.NS04 {
		transform: translate(260px, -580px);
	}
	
	
	.NS05 {
		transform: translate(-248px, -534px);
	}	
	.NS06 {
		transform: translate(-75px, -753px);
	}	
	.NS07 {
		transform: translate(95px, -974px);
	}	
	.NS08 {
		transform: translate(260px, -1195px);
	}
		

	
.sort-wrapper img {
    filter: grayscale(100%);
    transition: filter .3s ease-in;
    display: block;
}
.sort-wrapper.colorized img,
.sort-wrapper:hover img {
    filter: grayscale(0%);
}
    
/* User-defined Newsstand slots: NS01–NS12 are authoritative geometry. */

/* --- Newsstand cover interaction: LOCKED --- */
.image-wrapper {
    position: relative;
    overflow: visible;
    border: 0 !important;
}

.ns-cover-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
	
.crop-container {
  width: 145px;
  height: 220px;
  overflow: hidden;    /* Clips everything extending outside this box */
  position: relative;
}

.crop-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* Combined here to ensure it scales correctly */
}

.NS01 img, .NS02 img, .NS03 img, .NS04 img,
.NS05 img, .NS06 img, .NS07 img, .NS08 img,{   
  	display:block;	
  	overflow: hidden;
    filter: grayscale(100%);
    transition: filter .3s ease-in;
	box-shadow: 5px 5px 8px #000;
	border-right: solid 2px #888;
}

.NS01:hover img, .NS02:hover img, .NS03:hover img, .NS04:hover img,
.NS05:hover img, .NS06:hover img, .NS07:hover img, .NS08:hover img {
    filter: grayscale(0%);
}

.ns-info {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 245px;
    box-sizing: border-box;
    padding: 8px 12px;
    background: rgba(20,20,20,.96);
    color: #fff;
    border: 2px solid goldenrod;
    border-radius: 6px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1001 !important;
    transition: opacity .2s ease;
}

.image-wrapper:hover {
    z-index: 1000 !important;
}

.image-wrapper:hover .ns-info {
    opacity: 1;
    visibility: visible;
}

.ns-card-title {
    display: block;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
    font-weight: bold;
    color: #fff;
    font-size: 16pt;
    line-height: 1.05;
}
	
.ns-card-author {
    display: block;
    margin-top: 4px;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    color:bisque;
    font-size: 13pt;
    line-height: 1.05;
}

.dDate {
    display: none;
}


/* Rule of the Rack: clickable objects always use the hand cursor. */
a,
button,
[role="button"],
.nnL,
.nnR,
.newsNavL,
.newsNavR,
.sort-wrapper,
.image-wrapper {
    cursor: pointer;
}

.nav-disabled { pointer-events: none; cursor: default; }

/* --- Sort menus --- */
.sort-wrapper {
    position: relative;
    z-index: 120;
    cursor: pointer;
}
.sort-wrapper img {
    position: relative;
    z-index: 130;
}




/* P23b: hover menus. Sort button geometry remains untouched. */
.sort-wrapper {
    position: relative;
    z-index: 200;
    cursor: pointer;
}
.sort-menu {
    position:absolute;
    display: block;
    visibility: hidden;
    opacity: 0;
    z-index: 190;
    width: auto;
    padding: 0px 18px;
    background-image: url("../grcsWeb/PulpPaperBkg.jpg");
    border: 2px solid #3b2b1b;
    box-shadow: 10px 10px 5px rgba(0,0,0,);
    font-family: Georgia, "Times New Roman", serif;
    text-align: center;
    transform: translateY(-18px);
    transform-origin: top center;
    transition: transform .18s ease-out, opacity .18s ease-out, visibility 0s linear .18s;
    pointer-events: none;
}
.sort-menu.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
    pointer-events: auto;
}
.sort-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 18px;
    right: 18px;
    height: 12px;
    background: #e9d3a5;
    border-left: 2px solid #3b2b1b;
    border-right: 2px solid #3b2b1b;
}
.sort-menu-item {
    display: block;
    padding: 8px 0px 8px 0px;
    color: #17110b;
    font-size: 32px;
    line-height: 1.00;
    font-style: italic;
    cursor: pointer;
    user-select: none;
}
.sort-menu-item:hover {
    color: red;
}


/* P27: clean sort menu */
.sort-wrapper { z-index: 200; }
.sort-menu {
    z-index: 190;
    width: auto;
    min-width: 200px !important;
    box-shadow: 8px 8px 8px rgba(0,0,0, 0.6);
    overflow: visible;
}