h3 {
	font-family: 'Noto Sans', SecondaryFont, Helvetica-Light, 'Helvetica Neue', Helvetica, Roboto, sans-serif; 
	font-size: 1.5em;
	color: #333;
}

.headerlogo {
	font-family: 'Noto Sans', SecondaryFont, Helvetica-Light, 'Helvetica Neue', Helvetica, Roboto, sans-serif; 
	font-weight: 700; 
	text-rendering: optimizeLegibility;
}

.bodytext {
	font-family: 'Noto Sans', SecondaryFont, Helvetica-Light, 'Helvetica Neue', Helvetica, Roboto, sans-serif; 
	font-weight: 400; 
	text-rendering: optimizeLegibility;
	font-size: 16px;
}

.ck-content {
	font-family: 'Noto Sans', SecondaryFont, Helvetica-Light, 'Helvetica Neue', Helvetica, Roboto, sans-serif; 
	min-height: 550px !important;
	font-size: 16px;
	color: #333;
}

.col-nomargin-nopad {
	margin: 0;
	padding: 0;
}

.storylump {
	background-color: rgba(255,255,255,1); 
	color: #333; 
	font-size: 16px;
	margin: 5px;
	padding: 10px;
	border-radius: 4px;
}

.storylump h3 {
	color: #333;
	font-size: 1.5em;
	margin-bottom: 8px;
}

.previewdate {
	color: #555;
	font-size: 10px;
}

.wholeelement1 {
  background-image: 
    linear-gradient(rgba(182, 166, 146, 0.5), rgba(182, 166, 146, 0.5)),  /* Overlay color: black with 50% opacity */
    url('assets/img/bg/building_backdrop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* Optional: Enhance the tint effect */
  background-blend-mode: overlay;  /* Try multiply (darken), screen (lighten), hue, etc. */
}

.wholeelement2 {
  background-image: url('assets/img/bg/building_backdrop.jpg');
  background-size: cover;
  position: relative;
}

.wholeelement2::before {
  content: "";
  position: absolute;
  inset: 0;  /* Shorthand for top/right/bottom/left: 0 */
  /*filter: hue-rotate(90deg) saturate(150%) brightness(80%);*/
  background: rgba(182, 166, 146, 0.5);
}

.wholeelement3 {
  position: relative;
  background-image: url('assets/img/bg/building_backdrop.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;  /* Ensures pseudo-elements stay contained */
}

/* Grayscale layer (inherits and filters the background) */
.wholeelement3::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;  /* Copies the background image */
  filter: grayscale(100%);  /* Or 80-100% for partial desaturation */
}

/* Warm beige-brown tint overlay */
.wholeelement3::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(182, 166, 146, 0.5);
  /* Optional: mix-blend-mode: soft-light; for more natural blending */
}