@charset "UTF-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	list-style: none;
	/*text-transform: lowercase;*/
}

html {
	scroll-behavior: smooth;
}

#about,
#studio,
#events,
#resources {
    scroll-margin-top: 120px;
}

.spacer {
	display: block;
	height: 50vh;
}

/*colors light*/

.color-none {
	background-color: hsla(0,0%,95%,0);
}

.color-grey {
	background-color: hsla(0,0%,95%,1.00);
}

.color-yellow {
	background-color: hsla(60,10%,95%,1.00);
}

.color-yelloworange {
	background-color: hsla(40,12%,95%,1.00);
}

.color-orange {
	background-color: hsla(20,12%,95%,1.00);
}

.color-red {
	background-color: hsla(348,12%,95%,1.00);
}

.color-magenta {
	background-color: hsla(285,10%,95%,1.00);
}

.color-violet {
	background-color: hsla(255,10%,95%,1.00);
}

.color-blueviolet {
	background-color: hsla(225,10%,95%,1.00);
}

.color-blue {
	background-color: hsla(216,12%,95%,1.00);
}

.color-cyan {
	background-color: hsla(195,11%,95%,1.00);
}

.color-teal {
	background-color: hsla(176,11%,95%,1.00);
}

.color-green {
	background-color: hsla(135,10%,95%,1.00);
}


.color-yellowgreen {
	background-color: hsla(90,10%,95%,1.00);
}


/*colors dark*/

.color-grey-dark {
	background-color: hsla(0,0%,85%,1.00);
}

.color-yellow-dark {
	background-color: hsla(45,5%,85%,1.00);
}

.color-yelloworange-dark {
	background-color: hsla(48,7%,85%,1.00);
}

.color-orange-dark {
	background-color: hsla(24,7%,85%,1.00);
}

.color-red-dark {
	background-color: hsla(348,7%,85%,1.00);
}

.color-magenta-dark {
	background-color: hsla(285,5%,85%,1.00);
}

.color-violet-dark {
	background-color: hsla(255,5%,85%,1.00);
}

.color-blueviolet-dark {
	background-color: hsla(225,5%,85%,1.00);
}

.color-blue-dark {
	background-color: hsla(216,7%,85%,1.00);
	
}

.color-cyan-dark {
	background-color: hsla(195,6%,85%,1.00);
}

.color-teal-dark {
	background-color: hsla(176,6%,85%,1.00);
}

.color-green-dark {
	background-color: hsla(135,5%,85%,1.00);
}


.color-yellowgreen-dark {
	background-color: hsla(90,5%,85%,1.00);
}



#loading {
	display: flex;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 100vh;
	width: 100vw;
	background-color: black;
	justify-content: center;
	align-items: center;
	z-index: 999;
	visibility: visible;
}


.img-container img {
	display: block;
	width: 100%;
}  

header {
	padding-top: .9em;
	padding-bottom: .9em;
	margin: 1% 1% 0;
	border-top: solid 2px black;
	border-bottom: solid 2px black;
}
.land-header {
	padding-top: .9em;
	padding-bottom: .9em;
	margin: 1% 1% 0;
	border-top: solid 2px white;
	border-bottom: solid 2px white;
}

.panel {
	
}

.fullscreenhero {
      position: absolute;
	width: 100vw;
	height: 100vh;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
	opacity: 90%;
    filter: brightness(40%) blur(0px) grayscale(0%);
	background-image: url("../img/work/paintings/CS_P_24_010_BlossomingPlumTreefromStudioWindow3_2.jpg");
	background-repeat: repeat;
	background-size: cover;
	z-index: -999;
	background-position: center;

}

.fullscreenhero2 {
      position: absolute;
	width: 100vw;
	height: 100vh;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
	opacity: 60%;
    filter: brightness(30%) blur(0px) grayscale(95%);
	background-image: url("../img/Hero17.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -999;
	background-position: center;

}

h1, h2 {
	font-size: 3.5vw;
	line-height: 2vw;
	letter-spacing: -.2vw;
	-o-transition: all ease-in-out .7s;
	-ms-transition: all ease-in-out .7s;
	-moz-transition: all ease-in-out .7s;
	-webkit-transition: all ease-in-out .7s;
	transition: all ease-in-out .7s;
	color: black;
	text-decoration: none;
}

h1, h2, h3, h4, h5, p, a, li {
	font-family: "franklin-gothic-urw", sans-serif;
	font-weight: 400;
	text-transform: lowercase;
	
}

h4 {
	font-size: 2vw;
	letter-spacing: -.1vw;
	line-height: 1.4vw;
}

h5 {
	font-size: 1.5vw;
	letter-spacing: -.05vw;
	line-height: 1.5vw;
	margin: 0;
}

.year {
	font-size: 2.75vw;
	letter-spacing: -.18vw;
	line-height: 1.4vw;
}

.info-element h5 {
	font-size: .9vw;
	letter-spacing: 0;
	line-height: 1.4vw;
}

h3, p, a, li, input, textarea {
	font-size: .9vw;
	letter-spacing: 0;
	line-height: 1.4vw;
	
}


.paypal-wrapper input{
	text-transform: lowercase;
}


.loadingp {color: white;}

a {
	-o-transition: all ease-in-out .7s;
	-ms-transition: all ease-in-out .7s;
	-moz-transition: all ease-in-out .7s;
	-webkit-transition: all ease-in-out .7s;
	transition: all ease-in-out .7s;
	color: black;
	text-decoration: underline 1.5px rgba(0, 0, 0, 0);
}

a:hover {
	/*color: hsla(0,0%,10%,1.00);*/
	cursor: pointer;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	text-decoration-color: rgba(0, 0, 0, 1);
}

li {
	-o-transition: all ease-in-out .7s;
	-ms-transition: all ease-in-out .7s;
	-moz-transition: all ease-in-out .7s;
	-webkit-transition: all ease-in-out .7s;
	transition: all ease-in-out .7s;
	color: black;
	
}

.bodydm {
	color: white !important;
}



.external-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
}

.external-link-icon {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transform: translateY(0.2em);
}

.external-link-box {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.external-link-arrow {
  stroke-linecap: butt;
  stroke-linejoin: miter;
}




.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 1s;
}

.contact-modal.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.contact-modal-backdrop {
  position: absolute;
  inset: 0;
  background: hsla(0,0%,95%,0.8);
  opacity: 0;
  transition: opacity 1s ease;
}

.contact-modal.is-open .contact-modal-backdrop {
  opacity: 1;
}

.contact-modal-panel {
  position: absolute;
  right: 1%;
  bottom: 2%;
  width: 30vw;
  padding: 28px;
  background: hsla(0,0%,95%,1.00);
  border: 3px solid #000;
  border-radius: 24px;

  opacity: 0;
  transform: scale(0);
  transform-origin: bottom right;

  /* closing animation */
  transition:
    transform 500ms cubic-bezier(.4, 0, .2, 1),
    opacity 180ms ease 320ms;
}

.contact-modal.is-open .contact-modal-panel {
  opacity: 1;
  transform: scale(1);

  /* opening animation, delayed after backdrop starts */
  transition:
    transform .75s cubic-bezier(.2, .5, .2, 1) .2s,
    opacity 120ms ease 180ms;
}

.contact-modal-close {
  position: absolute;
  top: -16px;
  left: -50px;
  border: 0;
  background: transparent;
  color: hsla(0,0%,60%,1);
  font-weight: 300;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;

  opacity: 0;
  transition:
    opacity 1s ease,
    color 1s ease;
}

.contact-modal.is-open .contact-modal-close {
  opacity: 1;
  transition-delay: 1s, 0s;
}

.contact-modal-close:hover {
  color: #000;
}

.contact-modal-heading h4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 24px;
	font-size: 3.5vw;
	line-height: 2vw;
	letter-spacing: -.2vw;
	
}

.contact-modal-text {
  max-width: 100%;
  margin: 0 0 42px;
}

.contact-form {
  display: grid;
  gap: 12px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 2px solid #000;
  border-radius: 0;
  background: transparent;
  padding: 8px 0;
  font-family: "franklin-gothic-urw", sans-serif;
	font-weight: 400;
	font-size: .9vw;
	letter-spacing: 0;
	line-height: 1.4vw;

}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: #000;
}

.contact-form button {
  width: fit-content;
  margin-top: 14px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}



.contact-form-success,
.contact-form-error,
.contact-field-error {
  	display: none;
  	font-family: "franklin-gothic-urw", sans-serif;
  	font-weight: 400;
  	text-transform: lowercase;
	font-size: 5vw;
	line-height: 4vw;
	letter-spacing: -.23vw;
	padding-top: 50px
}

.contact-form-success:not(:empty),
.contact-form-error:not(:empty) {
  display: block;
}

.contact-form-success {
  margin: 36px 0 0;
}

.contact-form-error {
  margin: 24px 0 0;
}

.contact-field-error {
  margin-top: -8px;
  font-size: 14px;
}

.contact-form-success:not(:empty),
.contact-form-error:not(:empty),
.contact-field-error:not(:empty) {
  display: block;
}

.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
  border-bottom-color: #000;
}








.header-elements {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: 1.75vw 1vw;
	width: 100%;
	padding: 0;
	
}

.header-list-1 {
	grid-column: 10 / span 1;
	grid-row: 2;
	align-self: flex-end;
	margin-bottom: -.4vw;
	text-transform: lowercase;
	
}

.header-list-2 {
	grid-column: 11 / span 2;
	grid-row: 2;
	align-self: flex-end;
	margin-bottom: -.4vw;
	text-transform: lowercase;
}

.header-list-2 a {
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

/*.header-list-2 a:hover {
	color: hsla(0,0%,66%,1.00) !important;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	
}*/

.header-list-3 {
	grid-column: 10 / span 1;
	grid-row: 1 / span 1;
	align-self: flex-start;
	text-transform: lowercase;
	margin-top:-.4vw;
}


.h3work {
	grid-column: 7 / span 1;
	grid-row: 2;
	align-self: flex-start;
	margin-bottom: -.4vw;
	text-transform: lowercase;
}


.h3info {
	grid-column: 7 / span 1;
	grid-row: 1;
	margin-top: -.4vw;
	text-transform: lowercase;
}

.logo h2 {
}

.logo h1 {
	align-self: flex-end;
	margin-bottom: var(--space-s2);
}


.logo {
	display: grid;
	grid-column: span 2;
	grid-row: 1;
}

.statement {
	display: block;
	grid-column: 7 / span 2;
	grid-row: 1;
	column-count: 1;
	column-gap: 20px;
	margin-top: -.4vw;
}

.catnav {
	display: block;
	grid-column: 8 / span 1;
	grid-row: 2;
	align-self: flex-end;
	margin-bottom: -.4vw;
	text-transform: lowercase;
}

.catnav-col2 {
	display: block;
	grid-column: 8 / span 1;
	grid-row: 2;
	align-self: flex-end;
	margin-bottom: -.4vw;
	text-transform: lowercase;
}

.infonav {
	display: block;
	grid-column: 8 / span 1;
	grid-row: 1;
	margin-top: -.4vw;
	text-transform: lowercase;
}

.infonav-col2 {
	display: block;
	grid-column: 8 / span 1;
	grid-row: 1;
	margin-top: -.4vw;
	text-transform: lowercase;
}

.active a {
	/*color: hsla(0,0%,66%,1.00) !important;*/
	text-decoration: underline 1.5px rgba(0, 0, 0, 1)

}

.active {
	/*color: hsla(0,0%,66%,1.00) !important;*/
	text-decoration: underline 1.5px rgba(0, 0, 0, 1)

}



.catnav li a, .infonav li a {
	text-decoration: underline 1.5px rgba(0, 0, 0, 0);
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.catnav li a:hover, .infonav li a:hover {
	/*color: hsla(0,0%,66%,1.00) !important;*/
	text-decoration-color: rgba(0, 0, 0, 1);
	cursor: pointer;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}


.catnav-col2 li a, .infonav-col2 li a {
	text-decoration: underline 1.5px rgba(0, 0, 0, 0);
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}
	


.catnav-col2 li a:hover, .infonav-col2 li a:hover {
	/*color: hsla(0,0%,66%,1.00) !important;*/
	text-decoration-color: rgba(0, 0, 0, 1);
	cursor: pointer;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}


.active a:hover {
	cursor: default !important;
}



/*landing header*/

.land-header-elements {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: 1.75vw 1vw;
	width: 100%;
	padding: 0;
	height: 85vh;
	
}

.land-header-list-1 {
	grid-column: 7 / span 1;
	grid-row: 1;
	align-self: center;
	margin-bottom: -.4vw;
	margin-left: .4vw;
	text-transform: lowercase;
	
}

.land-header-list-2 {
	grid-column: 8 / span 1;
	grid-row: 1;
	align-self: center;
	margin-bottom: -.4vw;
	text-transform: lowercase;
}

.land-header-list-2 a {
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	color: hsla(48,7%,95%,1.00) !important;
	
}

.land-header-list-2 a:hover {
	color: hsla(0,0%,80%,1.00) !important;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	
}

.land-header-list-3 {
	grid-column: 7 / span 2;
	grid-row: 2 / span 1;
	align-self: flex-end;

	text-transform: lowercase;
}








.land-h3work {
	grid-column: 7 / span 1;
	grid-row: 1;
	align-self: flex-start;
	margin-bottom: -.4vw;
	margin-left: .4vw;
	text-transform: lowercase;
}



.land-logo {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1.75vw 1vw;
	grid-column: 1 / span 4;
	grid-row: 1;
	color: hsla(48,7%,95%,1.00) !important;
}

.land-logo h2 {
	font-size: 4.5vw;
	line-height: 2.7vw;
	letter-spacing: -.3vw;
	grid-column: 1 / span 2;
	color: hsla(48,7%,95%,1.00) !important;
}

.land-logo h1 {
	font-size: 4.5vw;
	line-height: 2.7vw;
	letter-spacing: -.3vw;
	grid-column: 3 / span 2;
	margin-bottom: .5vw;
	color: hsla(48,7%,95%,1.00) !important;
}

.land-h3statement {
	grid-column: 1 / span 2;
	grid-row: 2;
	margin-top: -.4vw;
	text-transform: lowercase;
}


.land-statement {
	display: block;
	grid-column: 1 / span 4;
	grid-row: 2;
	column-count: 1;
	column-gap: 1vw;
	margin-top: -.4vw;
	padding-right: 8.2vw;
	letter-spacing: 0;
	align-self: flex-end;
	font-size: 1.3vw;
	line-height: 2vw;
}

.land-catnav {
	display: block;
	grid-column: 8 / span 1;
	grid-row: 1;
	align-self: flex-start;
	margin-bottom: -.4vw;
	color: hsla(48,7%,95%,1.00) !important;
	text-transform: lowercase;
}


.land-catnav li {
	color: hsla(48,7%,95%,1.00) !important;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	
}


.land-catnav a {
	color: hsla(48,7%,95%,1.00) !important;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	
}

.land-catnav a:hover {
	color: hsla(0,0%,80%,1.00) !important;
	cursor: pointer;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}


.land-signup-wrapper {
	display: block;
	grid-column: 7 / span 2;
	grid-row: 2 / span 1;
	margin-top: -.4vw;
	letter-spacing: 0;
	align-self: flex-end;
}

.form-input {
	background: transparent;
	border: 1.5px solid hsla(0,0%,95%,1.00);
	border-radius: .4vw;
	padding: 8px 14px;
	font-size: .9vw;
	letter-spacing: 0;
	line-height: 1.4vw;
	color: hsla(0,0%,95%,1.00);
	width: 90%;
	margin-bottom: 10px;
}

.form-input:hover {
	border: solid 1.5px hsla(0,0%,95%,1.00);
	border-radius: .4vw;
	color: black;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	background: none hsla(0,0%,95%,1.00);
}

.form-input:focus {
	border: solid 1.5px hsla(0,0%,95%,1.00);
	border-radius: .4vw;
	color: black;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	background: none hsla(0,0%,95%,1.00);
}



.form-btn {
	-webkit-appearance: none;
  	appearance: none;
	font-weight: 400;
	font-family: "franklin-gothic-urw", sans-serif;

	display: inline-block;
	font-size: .9vw;
	letter-spacing: .0vw;
	line-height: 1.4vw;
	color: black;
	text-align: center;
	padding: 8px 14px;
	border: solid 1.5px hsla(0,0%,95%,1.00);
	cursor: pointer;
	outline: none;
	background: none hsla(0,0%,95%,1.00);
	border-radius: .4vw;
	transition: all ease-in-out 1s;
}
.form-btn:hover {
	background: none;
	border: solid 1.5px hsla(0,0%,95%,1.00);
	border-radius: .4vw;
	color: hsla(0,0%,95%,1.00);
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}


/* Error message */
.form-message {
  display: none;
  margin-top: 10px;
  font-size: .85vw;
  line-height: 1.2vw;
  color: hsla(0,0%,95%,1.00); /* matches your palette */
}

.newsletter-form.is-error .form-message {
  display: block;
}

/* Optional: error outline on input */
.newsletter-form.is-error .form-input {
  border-color: hsla(0,0%,95%,1.00);
}

/* Loading state: lock interaction */
.newsletter-form.is-loading .form-btn {
  pointer-events: none;
  opacity: 0.9;
	
}
/*

.btn-spinner {
  display: none;
  width: 0.9vw;
  height: 0.9vw;
  border: 2px solid hsla(0,0%,95%,1.00);
  border-right-color: transparent;
  border-radius: 999px;
  margin-left: 0.6vw;
  vertical-align: middle;
  animation: spin 0.8s linear infinite;
}
*/

.ml-form-embedSubmitLoad {
  	border-right-color: transparent;
  	border-radius: 999px;
  	vertical-align: middle;
  	width: 1.5vw;
  	height: 1.5vw;
  	border: 1.5px solid hsla(0,0%,95%,1.00);
  	border-top-color: transparent;
  	animation: ml-spin 0.8s linear infinite;
}
.submitload-dark  {
  	border: 1.5px solid black;
}

@keyframes ml-spin {
  to { transform: rotate(360deg); }
}


.newsletter-form.is-loading .ml-form-embedSubmitLoad {
  display: inline-block;
}

.loading {display: none;}

/* Remove MailerLite loading button visuals */
button.loading {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Hide the "Loading..." text but keep it for screen readers */
button.loading .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}















.signup-wrapper {
	display: block;
	grid-column: 11 / span 2;
	grid-row: 1 / span 1;
	margin-top: -.4vw;
	letter-spacing: 0;
	align-self: flex-start;
}




.form-input-dark {
	background: transparent;
	border: 1.5px solid black;
	border-radius: .4vw;
	padding: 8px 14px;
	font-size: .9vw;
	letter-spacing: 0;
	line-height: 1.4vw;
	color: black;
	width: 85%;
	margin-bottom: 10px;
}

.form-input-dark:hover {
	border: solid 1.5px black;
	border-radius: .4vw;
	color: hsla(0,0%,95%,1.00);
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	background: none black;
}

.form-input-dark:focus {
	border: solid 1.5px black;
	border-radius: .4vw;
	color: hsla(0,0%,95%,1.00);
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	background: none black;
}



.form-btn-dark {
	display: inline-block;
	font-size: .9vw;
	letter-spacing: .0vw;
	line-height: 1.4vw;
	color: hsla(0,0%,95%,1.00);
	text-align: center;
	padding: 8px 14px;
	border: solid 1.5px black;
	cursor: pointer;
	outline: none;
	background: none black;
	border-radius: .4vw;
	transition: all ease-in-out 1s;
}
.form-btn-dark:hover {
	background: none;
	border: solid 1.5px black;
	border-radius: .45vw;
	color: black;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}


.work-night-signup-form {
	display: flex;
	align-items: center;
	gap: .75vw;
	width: 100%;
}

.work-night-input {
	flex: 1;
	width: auto;
	margin-bottom: 0;
}

.work-night-button {
	flex: 0 0 auto;
}



/* Error message */
.form-message-dark {
  display: none;
  margin-top: 10px;
  font-size: .85vw;
  line-height: 1.2vw;
  color: black; /* matches your palette */
}

.newsletter-form.is-error .form-message {
  display: block;
}

/* Optional: error outline on input */
.newsletter-form.is-error .form-input-dark {
  border-color: black;
}

/* Loading state: lock interaction */
.newsletter-form.is-loading .form-btn {
  pointer-events: none;
  opacity: 0.9;
}

/* Spinner: inherits button color */
.btn-spinner {
  display: none;
  width: 0.9vw;
  height: 0.9vw;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  margin-left: 0.6vw;
  vertical-align: middle;
  animation: spin 0.8s linear infinite;
}


















/* End landing header */








.main-content {
	display: grid;
	padding: 0 1%;
	min-height: 100vh;
}
.main-content-404 {
	display: grid;
	padding: 0 1%;
}




body {
	-o-transition: background 1s ease;
	-ms-transition: background 1s ease;
	-moz-transition: background 1s ease;
	-webkit-transition: background 1s ease;
	transition: background 1s ease;
}

.panel-content {
	/* min height incase content is higher than window height */
	width: 100%;
	/*height: 1fr;*/
	padding: 1vw 0;
	border-bottom: solid 2px black;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 1vw;
	  /*outline: 10px solid hotpink;*/
	  /* turn above on to see the edge of panels */
	}




.page-signup-wrapper {
	display: block;
	grid-column: 7 / span 3;
	grid-row: 3 / span 1;
	margin-top: -.4vw;
	letter-spacing: 0;
	align-self: flex-end;
}




.success-panel {
	height: 50vh;
	width: 100%;
	/*height: 1fr;*/
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 1vw;
	grid-column: 1 / span 12;
}

.success-panel h2 {
	grid-column: 7 / span 6;
	grid-row: 1 / span 1;
	align-self: flex-end;
}

.success-h3 {
	grid-column: 7 / span 3;
	grid-row: 2 / span 1;
	align-self: flex-start;
	font-size: 1.6vw;
	letter-spacing: -.05vw;
	line-height: 1.4vw;
	
}

.success-body {
	grid-column: 7 / span 5;
	grid-row: 2 / span 1;
	align-self: flex-end;
	margin-bottom: 2vw;
}




.success-links {
	
	grid-row: 3 / span 1;
	align-self: flex-start;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(1, 1fr);
	grid-gap: 1vw;
	grid-column: 7 / span 6;
	margin-top: -5vw;
	
}


.success-link-2 {
	grid-column: 2 / span 2;
}

.panel-content-slideshow {
	/* min height incase content is higher than window height */
	width: 100%;
	
	padding: 1% 0;
	border-bottom: solid 2px black;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 1vw;
	  /*outline: 10px solid hotpink;*/
	  /* turn above on to see the edge of panels */
	}

.slideshow-vertical {
	height: 40vw;
	
}

.slideshow-horizontal {
	height: 35vw;
	
}
	

.panel:first-child {
	border-top: none;
}

.panel:last-child {
	border: none;
}


.panel-content-404 {
	/* min height incase content is higher than window height */
	width: 100%;
	height: 57vh;
	padding: 1% 0;
	border-bottom: solid 2px black;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 1vw;
	  /*outline: 10px solid hotpink;*/
	  /* turn above on to see the edge of panels */
	}
	

.fourzerofour {
	grid-column: span 6;
	font-size: 7vw;
	font-family: "franklin-gothic-urw", sans-serif;
	font-weight: 400;
	letter-spacing: -.125vw;
	line-height: 5vw;
}

.fourzerofour2 {
	grid-column: 7 / span 6;
	font-size: 7vw;
	font-family: "franklin-gothic-urw", sans-serif;
	font-weight: 400;
	letter-spacing: -.125vw;
	line-height: 5vw;
}

.fourzerofour2:hover {
	color: hsla(0,0%,50%,1.00);
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.shop-item-photo {
		grid-column: 1 / span 7;
		
	}
	
	

.shop-item-photo figure {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url("../img/store/hanford/Hanford_RightAligned.png");
	-webkit-transition: none;
	transition: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	
}
  

.shop-item-photo figure:hover {
	-webkit-transition: none;
	transition: none;
	overflow: hidden;
	-webkit-animation: item-one-hover 5s infinite; /* Chrome, Safari, Opera */ 
	animation: item-one-hover 5s infinite;
	animation-timing-function: step-start;
	background-repeat: no-repeat;
}








/*scroll animation*/

.scroll-animation {
	opacity: 0;
	-moz-transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
	-moz-transform: translate3d(0px, 100px, 0px);
	-webkit-transform: translate3d(0px, 100px, 0px);
	-o-transform: translate(0px, 100px);
	-ms-transform: translate(0px, 100px);
	transform: translate3d(0px, 100px, 0px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	transition-delay: .1s;

}

.scroll-animation.in-view {
	opacity: 1;
	-moz-transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
	-moz-transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate3d(0px, 0px, 0px);
	transition-delay: .1s;
}

footer {
	margin-bottom: 1%;
	/*display: flex;
	align-content: space-between;
	justify-content: space-between;*/
	padding: 0 1%;
}



.footer-elements {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 1.5vw 1vw;
	width: 100%;
	padding: 10% 0 1.5%;
	border-bottom: solid 2px black;
}


.h3work-footer {
	grid-column: 9 / span 1;
	grid-row: 1;
	margin-top: -.4vw;
	text-transform: lowercase;
}


.catnav-footer {
	display: block;
	grid-column: 10 / span 1;
	grid-row: 1;
	align-self: flex-start;
	margin-top: -.4vw;
	text-transform: lowercase;
}

.catnav-col2-footer {
	display: block;
	grid-column: 10 / span 1;
	grid-row: 1;
	align-self: flex-start;
	margin-top: 2.4vw;
	margin-bottom: 1vw;
	text-transform: lowercase;
}

.catnav-footer li {
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.catnav-footer li a:hover {
	/*color: hsla(0,0%,66%,1.00) !important;*/
	cursor: pointer;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.catnav-col2-footer li {
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.catnav-col2-footer li a:hover {
	/*color: hsla(0,0%,66%,1.00) !important;*/
	cursor: pointer;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}




.h3info-footer {
	grid-column: 9 / span 1;
	grid-row: 2;
	margin-top: -.4vw;
	text-transform: lowercase;
}

.infonav-footer {
	display: block;
	grid-column: 10 / span 1;
	grid-row: 2;
	margin-top: -.4vw;
	text-transform: lowercase;
}

.infonav-col2-footer {
	display: block;
	grid-column: 10 / span 1;
	grid-row: 2;
	text-transform: lowercase;
	margin-top: 2.4vw;
	margin-bottom: .5vw;
}


.footer-newsletterh3 {
	grid-column: 4 / span 1;
	grid-row: 2 / span 1;
	align-self: flex-start;
	text-transform: lowercase;
	margin-top:-.4vw;
}

.signup-wrapper-footer {
	display: block;
	grid-column: 5 / span 2;
	grid-row: 2 / span 1;
	margin-top: -.4vw;
	letter-spacing: 0;
	margin-bottom: 2vw;
	align-self: flex-start;
}



.footer-list-1 {
	grid-column: 10 / span 1;
	grid-row: 3;
	align-self: flex-end;
	text-transform: lowercase;
	margin-bottom: -.4vw;
	
}

.footer-list-2 {
	grid-column: 11 / span 2;
	align-self: flex-end;
	text-transform: lowercase;
	grid-row: 3;
	margin-bottom: -.4vw;
}


.footer-list-2 a {
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.footer-list-2 a:hover {
	/*color: hsla(0,0%,66%,1.00) !important;*/
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	
}






.brightness {
	position: fixed;
	rotate: -90deg;
	bottom: 40%;
	left: 1%;
	width: 30px;
	height: 40px;
	cursor: pointer;
	display: block;
	}





/*start of back to top*/

.top {
	position: fixed;
  	top: 34.2vh;
  	right: 1%;
	cursor: pointer;
	background-color: transparent;  /* No background color */
	color: black;
	border: 3px solid black;  /* Border color */
	padding: 8px;  /* Padding to make it a rectangle */
	border-radius: 8px;  /* Rounded corners */
	visibility: hidden;
	opacity: 0;
	justify-content: center;
	align-items: center;
}


/* Increase the hitbox size without affecting visible button */
.top::before {
	content: "";
	position: absolute;
	top: -20px; /* Adjust this value to control the expansion of the hitbox */
	left: -20px;
	right: -20px;
	bottom: -20px;
	background-color: transparent;
	border-radius: 8px; /* Ensure the hitbox matches the button's rounded corners */
}


.top.topbtnEntrance {
	opacity: 1;
	visibility: visible;
	transition: transform 0.3s ease 0.2s, background-color .6s ease, opacity 2s ease;
}

.top.topbtnExit {
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease-in-out, visibility 0s linear .3s;
}



.top:hover {
	background-color: black;
	transform: translateY(-5px);
	/*border-color: hsla(0,0%,66%,1.00);   */
}


/* Arrow styling using lines */
.toparrow {
	position: relative;
	width: 28px;
	height: 28px;
}

/* Top diagonal line (45 degrees for upward pointing) */
.toparrow::before {
	content: "";
	position: absolute;
	width: 20px;
	height: 3px;
	top: 13px;
	left: -2.5px;
	transform: rotate(-45deg);  /* Arrowhead, top left to bottom right */
	background-color: black;
}

/* Bottom diagonal line (-45 degrees for upward pointing) */
.toparrow::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 3px;
	top: 13px;  /* Positioned just below the first line */
	left: 10.5px;
	transform: rotate(45deg);  /* Arrowhead, top right to bottom left */
	background-color: black;
}

/* Arrow stem (regular div) */
.toparrow .topstem {
	width: 3px;
	height: 20px;  /* Stem height */
	top: 10px;  /* Align it vertically with the center of the arrow */
	left: 12.25px;  /* Center stem horizontally */
	background-color: black;  /* Stem color */
	position: absolute;
}

.toparrow .topstem::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 30px;
  top: -24px; /* Position after original stem */
  left: 0px;  /* Align with the original stem */
  background-color: black;
	  transform: rotate(90deg);  /* Arrowhead, top right to bottom left */

}

/* Hover effect for the arrow */
.top:hover .toparrow::before,
.top:hover .toparrow::after,
.top:hover .toparrow .topstem, 
.top:hover .toparrow .topstem::after {
	transition: background-color .1s ease;
	background-color: hsla(0,0%,95%,1.00);
	/* background-color: hsla(0,0%,66%,1.00); */
}




/*start of bottom*/

.bottom {
	position: fixed;
  	top: 41vh;
  	right: 1%;
	cursor: pointer;
  	background-color: transparent;  /* No background color */
  	color: black;
  	border: 3px solid black;  /* Border color */
	padding: 8px;
  	border-radius: 8px;  /* Rounded corners */
  	visibility: hidden;
	opacity: 0;
  	justify-content: center;
  	align-items: center;
}


/* Increase the hitbox size without affecting visible button */
.bottom::before {
  content: "";
  position: absolute;
  top: -20px; /* Adjust this value to control the expansion of the hitbox */
  left: -20px;
  right: -20px;
  bottom: -20px;
  background-color: transparent;
  border-radius: 8px; /* Ensure the hitbox matches the button's rounded corners */
}



.bottom.bottomBtnEntrance {
  opacity: 1;
  visibility: visible;
  transition: transform 0.3s ease 0.2s, background-color .6s ease, opacity 2s ease;
}

.bottom.bottomBtnExit {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease-in-out, visibility 0s linear .3s;
}




.bottom:hover {
	background-color: black;
  transform: translateY(5px);
  /*border-color: hsla(0,0%,66%,1.00);   */
}




/* Arrow styling using lines */
.bottomarrow {
  position: relative;
  width: 28px;
  height: 28px;
}

/* Top diagonal line (45 degrees for upward pointing) */
.bottomarrow::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 3px;
  top: 13px;
  left: -2.5px;
  transform: rotate(45deg);  /* Arrowhead, top left to bottom right */
  background-color: black;
}

/* Bottom diagonal line (-45 degrees for upward pointing) */
.bottomarrow::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 3px;
  top: 13px;  /* Positioned just below the first line */
  left: 10.5px;
  transform: rotate(-45deg);  /* Arrowhead, top right to bottom left */
  background-color: black;
}

/* Arrow stem (regular div) */
.bottomarrow .bottomstem {
  width: 3px;
  height: 20px;  /* Stem height */
  top: -1px;  /* Align it vertically with the center of the arrow */
  left: 12.25px;  /* Center stem horizontally */
  background-color: black;  /* Stem color */
  position: absolute;
}


.bottomarrow .bottomstem::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 30px;
  top: 13px; /* Position after original stem */
  left: 0.5px;  /* Align with the original stem */
  background-color: black;
	transform: rotate(90deg);  /* Arrowhead, top left to bottom right */

}

/* Hover effect for the arrow */
.bottom:hover .bottomarrow::before,
.bottom:hover .bottomarrow::after,
.bottom:hover .bottomarrow .bottomstem,
.bottom:hover .bottomarrow .bottomstem::after {
	transition: background-color .1s ease;
  background-color: hsla(0,0%,95%,1.00);
	/* background-color: hsla(0,0%,66%,1.00); */
}





.info-hr {
	width: 100%;
	display: block;
	height: 100%;
}


hr {
	outline: solid 2px black;
}

.info-wrapper {
	grid-column: span 4;
	display: block;
	height: 100%;
}

.info-wrapper-horizontal {
	grid-column: 9 / span 4;
	display: block;
	height: 100%;
}

.info-element {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1vw;
	margin-bottom: 1vw;
}

.info-element h5 {
	grid-column: 1 / span 1;
	margin-top: -.4vw;
}

.info-element p {
	grid-column: 2 / span 4;
	margin-top: -.4vw;
}

.sales-button {
	grid-column: 2 / span 2;
	
	
}
.sales-button p{
	grid-column: 2 / span 2;
	margin-top: -0.5vw;
	margin-bottom: .75vw;

}



.info-wrapper-product {
	grid-column: span 6;
	display: block;
	height: 100%;
}

.info-wrapper-product .info-element {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 2vw;
	margin-bottom: 2vw;
}

.info-wrapper-product .info-element h5 {
	grid-column: 1 / span 1;
	margin-top: -.4vw;
}

.info-wrapper-product .info-element p {
	grid-column: 2 / span 4;
	margin-top: -.4vw;
}


.info-heading {
	grid-column: 1 / span 2;

}


.center {
	text-align: center;
}

.bio-text {
	grid-column: 3 / span 4;
	margin-top: -.4vw;
}

.statement-text {
	grid-column: 3 / span 4;
	margin-top: -.4vw;
}

.bio-gallery {
	grid-row: 1 / span 2;
    grid-column: 8 / span 5;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1vw;
	height: 31vw;
}

.bio-image1 {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: lightgray;
	overflow: hidden;
	grid-column: 1 / span 3;
	grid-row: 1 / span 2;
}

.bio-image2 {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: lightgray;
	overflow: hidden;
	grid-column: 4 / span 2;
	grid-row: 1 / span 1;
}

.bio-image3 {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: lightgray;
	overflow: hidden;
	grid-column: 4 / span 2;
	grid-row: 2 / span 1;
}




.studio-text1 {
	grid-row: 1 / span 1;
	grid-column: 3 / span 4;
	margin-top: -.4vw;
}

.studio-text2 {
	grid-row: 1 / span 1;
	grid-column: 8 / span 2;
	margin-top: -.4vw;
}

.studio-text3 {
	grid-row: 1 / span 1;
	grid-column: 11 / span 2;
	margin-top: -.4vw;
}

.studio-gallery {
	grid-row: 2 / span 2;
    grid-column: 3 / span 10;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1vw;
	height: 30vw;
	margin-top: var(--space-s4);
}

.studio-image1 {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: lightgray;
	overflow: hidden;
	grid-column: 1 / span 5;
	grid-row: 1 / span 2;
}

.studio-image2 {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: lightgray;
	overflow: hidden;
	grid-column: 6 / span 2;
	grid-row: 1 / span 1;
}

.studio-image3 {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: lightgray;
	overflow: hidden;
	grid-column: 6 / span 3;
	grid-row: 2 / span 1;
}

.studio-image4 {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: lightgray;
	overflow: hidden;
	grid-column: 8 / span 3;
	grid-row: 1 / span 1;
}

.studio-image5 {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: lightgray;
	overflow: hidden;
	grid-column: 9 / span 2;
	grid-row: 2 / span 1;
}




.events-panel {
	grid-column: 3 / span 10;
	/* min height incase content is higher than window height */
	width: 100%;
	/*height: 1fr;*/
	padding-bottom: var(--space-s3);
	border-bottom: solid 1px black;
	
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-gap: 1vw;
	}

.events-panel:last-child {
	border-bottom: none;
	padding-bottom: 0vw;
}



.publications {
	grid-column: 3 / span 4;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: var(--space-s3);
	row-gap: var(--space-s7);
	align-content: start;
}

.publications-heading {
	grid-column: 1 / span 4;
}

.publications-content {
	grid-column: 1 / span 4;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1vw;
	margin-top: 0;
}

.publications-col1 {
	grid-column: 1 / span 2;
}

.publications-col2 {
	grid-column: 3 / span 2;
}

.publications h5,
.donate h5,
.contact h5 {
	margin-top: 0;
	margin-bottom: .5vw;
}

.publications-col1 h5:not(:first-child) {
	margin-top: var(--space-s7);
}

.donate {
	grid-column: 7 / span 3;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--space-s3);
	row-gap: var(--space-s7);
	align-content: start;
}

.donate-heading {
	grid-column: 1 / span 3;
}

.donate-col {
	grid-column: 1 / span 3;
}

.donate-col p {
	margin-bottom: var(--space-s4);
	padding-right: 6vw;
}

.donate-button {
	display: inline-block;
	width: fit-content;
}

.contact {
	grid-column: 10 / span 3;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--space-s3);
	row-gap: var(--space-s7);
	align-content: start;
}

.contact-heading {
	grid-column: 1 / span 3;
}

.contact-col {
	grid-column: 1 / span 3;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1vw;
}

.contact-col h5 {
	grid-column: 1 / span 3;
}

.contact-col-list-1 {
	grid-column: 1 / span 1;
}

.contact-col-list-2 {
	grid-column: 2 / span 2;
}


.contact-btn-wrapper {
	display: flex;
	align-items: flex-end;
	grid-column: 1 / span 1;
	
}

.donate-col,
.contact-col {
	margin-top: 1.25vw;
	align-content: start;
}


.contact-col button {
	grid-column: 1 / span 1;
	width: fit-content;
	margin-top: 0;
	margin-bottom: 1.5vw;
}


.information img {
	min-width: 100%;
	min-height: 100%;
}

.bio-image1 img {
	min-width: 135%;
	
}

.bio-image2 img {
	min-width: 135%;
	
	
}

.bio-image3 img {
	min-width: 135%;
	
	
}


.events-heading {
	grid-column: 1 / span 10;
	margin-bottom: var(--space-s3);
}

.publications-heading {
	grid-column: 1 / span 4;
	margin-bottom: 0;
}

.exhibitions-image {
	height: 30vw;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: lightgray;
	overflow: hidden;
	grid-column: 1 / span 5;
	grid-row: 2 / span 1;
}

.exhibition-info {
	grid-column: 6 / span 5;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	column-gap: 1vw;
	row-gap: var(--space-s5);
}

.current-exhibitions {
	grid-column: 1 / span 5;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	column-gap: 1vw;
	align-content: start;
}

.exhibition-heading {
	grid-column: 1 / span 5;
	/*font-size: 1.75vw;
	letter-spacing: -.05vw;*/
	margin: -.2vw 0 var(--space-s4) 0;
}

.current-exhibition-status, .gatherings-date {
	grid-column: 1 / span 2;
}

.gatherings-note {
	margin-top: var(--space-s4);
	padding-right: 7vw;
	grid-column: 1 / span 5;
}

.current-exhibition-note, .gatherings-venue {
	grid-column: 3 / span 3;
}

.current-exhibition-note p {
	margin: 0;
}


.past-exhibitions-list {
	grid-column: 1 / span 5;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	column-gap: 1vw;
}

.exhibition-venue,
.exhibition-name,
.exhibition-date {
	margin: 0;
	padding: 0;
	align-self: start;
}

.exhibition-venue {
	grid-column: 1 / span 2;
}

.exhibition-name {
	grid-column: 3 / span 2;
}

.exhibition-date {
	grid-column: 5 / span 1;
}

.exhibition-venue p,
.exhibition-name p,
.exhibition-date p {
	margin: 0;
	padding: 0;
}

.exhibition-date p {
	text-align: end;
}


.current-exhibition-status {
	grid-column: 1 / span 2;
}

.current-exhibition-note {
	grid-column: 3 / span 3;
}


#resources .panel-content {
	padding-bottom: 7vw;
}





.gallery {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 1vw;
	grid-column: 1 / span 6;
	height: 100%;
	width: 100%;
	grid-row: 1 / span 2;
	
}

.gallery-horizontal {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 1vw;
	
	grid-column: 1 / span 8;
	height: 100%;
	width: 100%;
	
	grid-row: 1 / span 2;
	
}



.imgBox {
	grid-column: 2 / span 4;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.imgBox img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.imgBox-horizontal {
	grid-column: 2 / span 6;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.imgBox-horizontal img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.imgBox-vertical {
	grid-column: 2 / span 4;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.imgBox-vertical img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}



.thumbnails {
	grid-column: 1 / span 1;
	/*display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-flow: row wrap;*/

}

/*.thumbnail:first-child {
	margin-left: 0;
}

.thumbnail:last-child {
	margin-right: 0;
}*/

.thumbnail {
	margin-bottom: 1.075vw;
	/*display: flex;
	align-items: center;
	justify-content: center;*/
	overflow: hidden;
	width: 100%;
	height: 7.25vw;
  	vertical-align: middle;
  	-webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;
  	-webkit-transition-property: transform;
  	transition-property: transform;
  	-webkit-transition-timing-function: ease-out;
  	transition-timing-function: ease-out;
}


.thumbnail img { 
	width: 100%;
	height: 100%;
	object-fit: cover;

}


/*.thumbnail:hover, .thumbnail:focus, .thumbnail:active {
  -webkit-transform: translateX(1vw);
  transform: translateX(1vw);
}*/


.gallery .thumbnails .thumbnail.selected a {
  opacity: 0.33;
  pointer-events: none; /* Optional: Disable clicks on the selected thumbnail */
}

/* Prevent the hover effect on the selected (active) thumbnail */
.gallery .thumbnails .thumbnail.selected:hover,
.gallery .thumbnails .thumbnail.selected:focus,
.gallery .thumbnails .thumbnail.selected:active {
  -webkit-transform: none !important;
  transform: none !important;
}

/* Hover effect for other thumbnails */
.gallery .thumbnails .thumbnail:hover, 
.gallery .thumbnails .thumbnail:focus, 
.gallery .thumbnails .thumbnail:active {
  -webkit-transform: translateX(1vw);
  transform: translateX(1vw);
}



.gallery-horizontal .thumbnails .thumbnail.selected a {
  opacity: 0.33;
  pointer-events: none; /* Optional: Disable clicks on the selected thumbnail */
}

/* Prevent the hover effect on the selected (active) thumbnail */
.gallery-horizontal .thumbnails .thumbnail.selected:hover,
.gallery-horizontal .thumbnails .thumbnail.selected:focus,
.gallery-horizontal .thumbnails .thumbnail.selected:active {
  -webkit-transform: none !important;
  transform: none !important;
}

/* Hover effect for other thumbnails */
.gallery-horizontal .thumbnails .thumbnail:hover, 
.gallery-horizontal .thumbnails .thumbnail:focus, 
.gallery-horizontal .thumbnails .thumbnail:active {
  -webkit-transform: translateX(1vw);
  transform: translateX(1vw);
}







/* Lightbox Gallery */

/* Gallery container with CSS columns for masonry effect */
.lbgallery {
    column-count: 6; /* 6 columns for the gallery */
    column-gap: 1vw; /* Space between columns */
    padding: 1vw 0;
    width: 100%;
    display: block;
    margin: 0 auto;
	border-bottom: solid 2px black;
}

/* Image container for each gallery item */
.lbgallery-item {
    break-inside: avoid; /* Prevent items from breaking in the middle */
    margin-bottom: 1vw; /* Space between images vertically */
    position: relative;
	overflow: hidden;
}

/* Image itself with object-fit to retain aspect ratio */
.lbgallery-image {
    width: 100%; /* Ensure the image takes the full width of the container */
    height: auto; /* Height is auto so that the aspect ratio is maintained */
    object-fit: contain; /* Ensure image fits within container without stretching */
    transition: transform 15s ease, filter .3s ease;
}

/* Hover effect: zoom-in effect */
.lbgallery-item:hover .lbgallery-image {
    transform: scale(1);
    filter: brightness(1.5);
	cursor: pointer;
}

/* Responsive grid - adjusts the number of columns based on viewport size */
@media (max-width: 1200px) {
    .lbgallery {
        column-count: 4; /* 4 columns on medium screens */
    }
}

@media (max-width: 900px) {
    .lbgallery {
        column-count: 3; /* 3 columns on smaller screens */
    }
}

@media (max-width: 600px) {
    .lbgallery {
        column-count: 2; /* 2 columns on very small screens */
    }
}















/* When swiping to the left (previous image) */
.slide-out-left {
    transform: translateX(-100%);
}

/* When swiping to the right (next image) */
.slide-out-right {
    transform: translateX(100%);
}

/* When the image is entering */
.slide-in-left {
    transform: translateX(-100%);
}

/* When the image is entering from the right */
.slide-in-right {
    transform: translateX(100%);
}

/* To hide images during transition */
.lightbox-image.hidden {
    opacity: 0;
}








/* Lightbox style */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 97.5%;
    height: 98%;
   	background-color: hsla(0,0%,95%,.98);
    display: none;
    align-items: center;
    justify-content: center;
	flex-direction: column;
    z-index: 1000;
	padding: 1vw 1vw 1vw 1.5vw;
}

/* Lightbox content container */
.lightbox-content {
    position: relative;
    text-align: center;
    background-color: transparent; /* No background color around image */
    padding: 1vw;
    width: 100%;
    height: 100%;
    overflow: hidden;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	transition: transform 0.5s ease;
    will-change: transform;
}

.lightbox-record {
	width: 25%;
	min-width: 0;
	margin-left: 2vw;
	text-align: left;
	align-self: center;
	font-family: "franklin-gothic-urw", sans-serif;
	font-weight: 400;
	text-transform: lowercase;
}

.lightbox-record h2 {
	font-size: 3.5vw;
	line-height: 3.1vw;
	font-weight: 400;
	letter-spacing: -.2vw;
	margin: 0 0 3vw;
}

.lightbox-metadata {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1vw;
	row-gap: 1.2vw;
	margin: 0;
}

.lightbox-field {
	min-width: 0;
}

.lightbox-field-wide {
	grid-column: 1 / span 2;
}

.lightbox-field[hidden] {
	display: none;
}

.lightbox-field dt,
.lightbox-field dd {
	font-family: "franklin-gothic-urw", sans-serif;
	font-weight: 400;
	font-size: .9vw;
	line-height: 1.15vw;
	margin: 0;
}

.lightbox-field dt {
	margin-bottom: .35vw;
}

.lightbox-image {
	flex: 1 1 auto;
	min-width: 0;
}

.lightbox-content {
	align-items: center;
}

.lightbox-inquiry {
	margin-top: 3vw;
}

.lightbox-inquiry[hidden] {
	display: none;
}

.lightbox-inquiry p {
	margin: 0 0 .75vw;
}

@media (max-width: 1100px) {
	.lightbox-record {
		width: 30%;
	}

	.lightbox-record h2 {
		font-size: 5.5vw;
		line-height: 5vw;
	}

	.lightbox-field dt,
	.lightbox-field dd {
		font-size: 1.75vw;
		line-height: 2.15vw;
	}
}

@media (max-width: 500px) {
	.lightbox-content {
		flex-direction: column;
		justify-content: flex-start;
		overflow-y: auto;
	}

	.lightbox-image {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 55vh;
	}

	.lightbox-image img {
		max-height: 55vh;
	}

	.lightbox-record {
		width: 100%;
		margin: 5vw 0 2.5vw;
		align-self: auto;
	}

	.lightbox-record h2 {
		font-size: 9vw;
		line-height: 8.2vw;
		letter-spacing: -.5vw;
		margin-bottom: 7.5vw;
	}

	.lightbox-metadata {
		column-gap: 2.5vw;
		row-gap: 4vw;
	}

	.lightbox-field dt,
	.lightbox-field dd {
		font-size: 3vw;
		line-height: 3.6vw;
	}

	.lightbox-field dt {
		margin-bottom: 1vw;
	}
}



/* Lightbox image styling */
.lightbox-image img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
	box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1), /* main shadow */
              0px 3px 5px rgba(0, 0, 0, 0.175);  /* subtle, softer second shadow */
	transition: opacity 0.3s ease;
    opacity: 1;
}






/* Lightbox Navigation */


.lightbox-nav {
	position: relative;
	width: 100%;
	border-bottom: 2px solid black;
	height: auto;
	display: flex;
	align-content: flex-end;
	align-items: flex-end;
	justify-content: space-between;
	flex-direction: row;
	flex-flow: row;
	padding: 0 0 1vw 0;
	
}

.lbkey {
	display: flex;
		/*flex: 1;*/
		flex-flow: row;
	flex-direction: row;
	flex-wrap: nowrap;
	
}

.lightbox-nav p { 
	font-size: .7vw;
	letter-spacing: .04vw;
	line-height: 1.4vw;
	margin-right: 1vw;
}

.lightbox-nav .lbpmargin {
	margin-right: 5vw;
}

.arrow-btns {
	display: flex;
	flex-flow: row;
	flex-direction: row;
	flex-wrap: nowrap;
}


.nav-btn {
  position: relative;
  z-index: 1;
  cursor: pointer;
  background-color: transparent;
  color: black;
  border: 3px solid black;  /* Border color */
  border-radius: 8px;  /* Rounded corners */
  justify-content: center;
  align-items: center;
  display: flex;  /* Flexbox to align arrow properly */
  width: 50px;    /* Adjust the width for button size */
  height: 50px;   /* Adjust the height for button size */
  visibility: visible;  /* Always visible */
  opacity: 1;  /* Always visible */
  transition: background-color .2s ease;
}

/* Hover effect for navigation buttons */
.nav-btn:hover {
  background-color: black;
}

/* Arrow base styling */
.arrow-nav-stem {
  height: 3px;
  width: 20px;
  top: 20px; /* Align vertically */
  left: 16px;  /* Center stem horizontally */
  background-color: black;
  position: absolute;
}



/* Arrow head (diagonal line) */
.arrow-nav-head::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 3px;
  top: 0px;
  left: 0px;
  transform: rotate(0deg);  /* Default arrowhead direction */
  background-color: black;
}

.arrow-nav-head::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 3px;
  top: 0px; /* Below the top line */
  left: 0px;
  transform: rotate(0deg);  /* Default arrowhead direction */
  background-color: black;
}


/* First button - Rotate the arrow to point to the right */
#first-image .arrow-nav-first .arrow-nav-stem {
  left: 17px;  /* Move the stem horizontally */
  top: 20px; /* Adjust vertical position */
}




/* Add duplicate stem only for the first and previous buttons */
#first-image .arrow-nav-first .arrow-nav-stem::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 30px;
  top: -13px; /* Position after original stem */
  left: -10px;  /* Align with the original stem */
  background-color: black;
}

/* Individual Button Variations (ID-based) */




/* First button - Rotate the arrow to point to the right */
#first-image .arrow-nav-first .arrow-nav-head::before {
  	transform: rotate(-45deg); /* Arrowhead points right */
	top: 14.5px; /* Position after original stem */
  	left: 11px;  /* Align with the original stem */
}

#first-image .arrow-nav-first .arrow-nav-head::after {
 	transform: rotate(45deg); /* Arrowhead points right */
	top: 26.5px; /* Position after original stem */
  	left: 11px;  /* Align with the original stem */
}

/* Previous button - Rotate the arrow to point left */
#prev-image .arrow-nav-stem {
  left: 13px;  /* Move the stem horizontally */
  top: 20px; /* Adjust vertical position */
}

/* Previous button - Rotate the arrow to point up */
#prev-image .arrow-nav-prev .arrow-nav-head::before {
  	transform: rotate(-45deg); /* Arrowhead points up */
	top: 14.5px; /* Position after original stem */
  	left: 7px;
}

#prev-image .arrow-nav-prev .arrow-nav-head::after {
  transform: rotate(45deg); /* Arrowhead points up */
	top: 26.5px; /* Position after original stem */
  	left: 7px;
}

/* Next button - Rotate the arrow to point left */
#next-image .arrow-nav-stem {
  left: 11px;  /* Move the stem horizontally */
  top: 20px; /* Adjust vertical position */
}

/* Next button - Rotate the arrow to point down */
#next-image .arrow-nav-next .arrow-nav-head::before {
  	transform: rotate(45deg); /* Arrowhead points down */
	top: 14.5px; /* Position after original stem */
  	left: 17px;
}

#next-image .arrow-nav-next .arrow-nav-head::after {
  transform: rotate(-45deg); /* Arrowhead points down */
	top: 26.5px; /* Position after original stem */
  	left: 17px;
}

/* Last button - Rotate the arrow to point left */
#last-image .arrow-nav-last .arrow-nav-head::before {
  transform: rotate(45deg); /* Arrowhead points left */
	top: 14.5px; /* Position after original stem */
  	left: 14px;
}

#last-image .arrow-nav-last .arrow-nav-head::after {
  transform: rotate(-45deg); /* Arrowhead points left */
		top: 26.5px; /* Position after original stem */
  	left: 14px;
}

/* Last button - Rotate the arrow to point left */
#last-image .arrow-nav-last .arrow-nav-stem {
  left: 7px;  /* Move the stem horizontally */
  top: 20px; /* Adjust vertical position */
}

#last-image .arrow-nav-last .arrow-nav-stem::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 30px;
  top: -13px; /* Position after original stem */
  left: 27px;  /* Align with the original stem */
  background-color: black;
}



/* Hover effect for arrow */
.nav-btn:hover .arrow-nav-head::before,
.nav-btn:hover .arrow-nav-head::after,
.nav-btn:hover .arrow-nav-stem,
.nav-btn:hover .arrow-nav-stem::after {
  background-color: hsla(0, 0%, 95%, 1.00);  /* Light hover effect for the arrow */
}

#first-image:hover .arrow-nav-stem::after {
	  background-color: hsla(0, 0%, 95%, 1.00);  /* Light hover effect for the arrow */
}

#last-image:hover .arrow-nav-stem::after {
	  background-color: hsla(0, 0%, 95%, 1.00);  /* Light hover effect for the arrow */
}




#prev-image {
   margin-left: 1vw;
}

#first-image {
   margin-left: 1vw;
}


/* Position Next and Last buttons */
#next-image {
    margin-left: 1vw;
	
}



/* Position Next and Last buttons */
#last-image {
   margin-left: 1vw;
}












/* Close button (X) using pseudo-elements */
.close-btn {
	margin-left: 1vw;
    position: relative;
	width: 28px; 
  	height: 28px;  
	padding: 8px;
    cursor: pointer;
    z-index: 10;
	border: 3px solid black;  /* Border color */
	border-radius: 8px;
  	background-color: transparent;  /* No background color */
  	color: black;
	transition: background-color .2s ease;
}

.close-btn:hover {
	background-color: black;
	transition: background-color .2s ease;
  /*border-color: hsla(0,0%,66%,1.00);   */
}

/* Using pseudo-elements to create the X (cross) */
.close-btn::before, .close-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px; /* Length of the cross lines */
    height: 3px; /* Width of the cross lines */
    background-color: black; /* White color for the X */
    transform-origin: center;
    transform: translate(-50%, -50%); /* Centering the lines */
	transition: background-color .2s ease;
}

/* First line of the X (diagonal top-left to bottom-right) */
.close-btn::before {
    transform: translate(-50%, -50%) rotate(45deg); /* Rotate to create the first diagonal */
}

/* Second line of the X (diagonal top-right to bottom-left) */
.close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg); /* Rotate to create the second diagonal */
}

/* Hover effect for the arrow */
.close-btn:hover::before, .close-btn:hover::after {
	transition: background-color .2s ease;
  background-color: hsla(0,0%,95%,1.00);
	/* background-color: hsla(0,0%,66%,1.00); */
}



































.paypal-wrapper {
	
	grid-column: 7 / span 4;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1vw;
}

.paypal-btn-wrapper {
	display: flex;
	align-items: flex-end;
	grid-column: 1 / span 1;
	
}

.paypal-cart-wrapper {
	display: flex;
	align-items: flex-end;
	grid-column: 2 / span 1;
	
	
}


.paypal_btn {
	display: inline-block;
	font-size: .9vw;
	letter-spacing: 0vw;
	line-height: 1.4vw;
	color: #e6e6e6;
	text-align: center;
	padding: 10px 14px;
	border: solid 2px black;
	cursor: pointer;
	outline: none;
	background: none black;
	border-radius: .45vw;
	transition: all ease-in-out 1s;
}
.paypal_btn:hover {
	background: none;
	border: solid 2px black;
	border-radius: .45vw;
	color: black;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

#paypal_btn_blue-dark {
	color: hsla(216,7%,85%,1.00);
}

#paypal_btn_blue-dark:hover {
	color: black;
}




.paypal_cart {
	display: inline-block;
	font-size: .9vw;
	letter-spacing: .045vw;
	line-height: 1.4vw;
	color: black;
	text-align: center;
	padding: 13px 5px 10px 22px;
	border: none;
	cursor: pointer;
	outline: none;
	background: none;
	-o-transition: all ease-in-out .7s;
	-ms-transition: all ease-in-out .7s;
	-moz-transition: all ease-in-out .7s;
	-webkit-transition: all ease-in-out .7s;
	transition: all ease-in-out .7s;
	border-radius: 0!important;
}

.paypal_cart:hover {
	color: hsla(0,0%,66%,1.00);
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}






.paypal-opt {
	color: black;
	font-size: .98vw;
	line-height: 1.25vw;
	
}
/*
.paypal-list {
	color: black;
	font-size: .98vw;
	line-height: 1.25vw;
	width: 15vw;
   	height: 1.25vw;
   	overflow: hidden;
   	background: url("../img/icons/CS_Dropdown_Icon_Normal.png") no-repeat right;
	background-size: contain;
	margin-bottom: 3%;
	
}

.paypal-list select {
	color: black;
	font-size: .98vw;
	line-height: 1.25vw;
	background: transparent;
	width: 15vw;
	height: 1.25vw;	
	border: 0;
	border-radius: 0;
	margin-left: -.2vw;
	-webkit-appearance: none;
}

.paypal-list select:hover {
	color: white;
	cursor: pointer;
	
}

.paypal-list:hover {
	background: url("../img/icons/CS_Dropdown_Icon_Hover.png") no-repeat right;
	background-size: contain;
}*/






@media (max-width: 1100px) {
	
	.header-elements {
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-gap: 2vw;
	}
	
	header {
		margin: 2.5% 2.5% 0%;
	}
		
	.main-content {
		display: grid;
		padding: 0 2.5%;
		min-height: 100vh;
	}
	
	h1, h2 {
		font-size: 7vw;
		line-height: 5vw;
		letter-spacing: -.5vw;
	}

	
	h3, p, a, li, h5 {
		font-size: 1.75vw;
		letter-spacing: 0vw;
		line-height: 2.5vw;
	
	}
	

	
	
	
	
	.contact-modal-panel {
	  position: absolute;
	  right: 2.5%;
	  bottom: 3%;
	  width: 50vw;
	  padding: 28px;
	  background: hsla(0,0%,95%,1.00);
	  border: 3px solid #000;
	  border-radius: 24px;
	
	  opacity: 0;
	  transform: scale(0);
	  transform-origin: bottom right;
	
	  /* closing animation */
	  transition:
	    transform 500ms cubic-bezier(.4, 0, .2, 1),
	    opacity 180ms ease 320ms;
	}
	
	.contact-modal.is-open .contact-modal-panel {
	  opacity: 1;
	  transform: scale(1);
	
	  /* opening animation, delayed after backdrop starts */
	  transition:
	    transform .75s cubic-bezier(.2, .5, .2, 1) .2s,
	    opacity 120ms ease 180ms;
	}
	
	.contact-modal-close {
	  position: absolute;
	  top: -16px;
	  left: -50px;
	  border: 0;
	  background: transparent;
	  color: hsla(0,0%,60%,1);
	  font-weight: 300;
	  font-size: 36px;
	  line-height: 1;
	  cursor: pointer;
	
	  opacity: 0;
	  transition:
	    opacity 1s ease,
	    color 1s ease;
	}
	
	.contact-modal.is-open .contact-modal-close {
	  opacity: 1;
	  transition-delay: 1s, 0s;
	}
	
	.contact-modal-close:hover {
	  color: #000;
	}
	
	.contact-modal-heading h4 {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 0;
	  margin: 0 0 24px;
		font-size: 7vw;
		line-height: 5vw;
		letter-spacing: -.5vw;
		
	}
	
	.contact-modal-text {
	  max-width: 100%;
	  margin: 0 0 42px;
	}
	
	.contact-form {
	  display: grid;
	  gap: 12px;
	}
	
	.contact-form input,
	.contact-form textarea {
	  width: 100%;
	  border: 0;
	  border-bottom: 2px solid #000;
	  border-radius: 0;
	  background: transparent;
	  padding: 8px 0;
	  font-family: "franklin-gothic-urw", sans-serif;
		font-weight: 400;
		font-size: 1.75vw;
		letter-spacing: 0vw;
		line-height: 2.5vw;
	
	}
	
	.contact-form textarea {
	  min-height: 120px;
	  resize: vertical;
	}
	
	.contact-form input:focus,
	.contact-form textarea:focus {
	  outline: none;
	  border-bottom-color: #000;
	}
	
	.contact-form button {
	  width: fit-content;
	  margin-top: 14px;
	}
	
	.sr-only {
	  position: absolute;
	  width: 1px;
	  height: 1px;
	  overflow: hidden;
	  clip: rect(0, 0, 0, 0);
	}
	
	
	
	.contact-form-success,
	.contact-form-error,
	.contact-field-error {
	  	display: none;
	  	font-family: "franklin-gothic-urw", sans-serif;
	  	font-weight: 400;
	  	text-transform: lowercase;
		font-size: 9vw;
		line-height: 6.75vw;
		letter-spacing: -.5vw;
		padding-top: 50px
	}
	
	.contact-form-success:not(:empty),
	.contact-form-error:not(:empty) {
	  display: block;
	}
	
	.contact-form-success {
	  margin: 36px 0 0;
	}
	
	.contact-form-error {
	  margin: 24px 0 0;
	}
	
	.contact-field-error {
	  margin-top: -8px;
	  font-size: 14px;
	}
	
	.contact-form-success:not(:empty),
	.contact-form-error:not(:empty),
	.contact-field-error:not(:empty) {
	  display: block;
	}
	
	.contact-form input[aria-invalid="true"],
	.contact-form textarea[aria-invalid="true"] {
	  border-bottom-color: #000;
	}

	
	
	
	
	
	
	
	
	
	.h3work {
		grid-column: 1 / span 1;
		grid-row: 2;
		margin-bottom: -.4vw;
		/*margin-top: 23vw;*/
	}
	
	
	.catnav {
		display: block;
		grid-column: 2 / span 1;
		grid-row: 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
		margin-left: -2vw;
		
	}
	
	
	.catnav-col2 {
		display: block;
		grid-column: 3 / span 1;
		grid-row: 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
	}
	
	
		
	.header-list-1 {
		grid-column: 5 / span 1;
		grid-row: 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
	
	}

	.header-list-2 {
		grid-column: 6 / span 2;
		grid-row: 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
	
	}
	
		

	.header-list-3 {
		grid-column: 7 / span 1;
		grid-row: 1 / span 1;
		align-self: flex-start;
		margin-top:-.4vw;
	}


	.h3statement {
		display: none;
	
	}

	.statement {
		grid-column: 5 / span 2;
		grid-row: 1;
		column-count: 1;
		column-gap: 10px;
		margin-top: -.4vw;
		align-self: flex-start;
	}
		
	.logo {
		grid-column: span 3;
		grid-row: 1;
	}
	
	
	
	.signup-wrapper {
		display: block;
		grid-column: 7 / span 2;
		grid-row: 1 / span 1;
		margin-top: -.4vw;
		letter-spacing: 0;
		align-self: flex-end;
	}
	
	
	.signup-wrapper p {
		margin-top: 5vw;
		margin-bottom: -3.5vw;
	}

	


	.page-signup-wrapper {
		display: block;
		grid-column: 5 / span 3;
		grid-row: 3 / span 1;
		margin-top: -.4vw;
		letter-spacing: 0;
		align-self: flex-start;
	}
	
	
	
	
	.success-panel {
		height: 50vh;
		width: 100%;
		/*height: 1fr;*/
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-gap: 2vw;
		grid-column: 1 / span 12;
	}
	
	.success-panel h2 {
		grid-column: 5 / span 4;
		grid-row: 1 / span 1;
		align-self: flex-end;
	}
	
	.success-h3 {
		grid-column: 5 / span 4;
		grid-row: 2 / span 1;
		align-self: flex-start;
		font-size: 3.5vw;
		letter-spacing: -0.2vw;
		line-height: 1.4vw;
		margin-top: -.5vw;
		
	}
	
	.success-body {
		grid-column: 5 / span 4;
		grid-row: 2 / span 1;
		align-self: flex-end;
		margin-bottom: 7vw;
	}




	.success-links {
		grid-column: 5 / span 2;
		grid-row: 3 / span 1;
		align-self: flex-start;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(1, 1fr);
		grid-gap: 2vw;
		margin-left: 0;
	}
	
	.success-link-2 {
		grid-column: 1 / span 1;
	}

		
	
	
	
	/*landing header*/
	
	.land-header-elements {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-gap: 1.75vw 1vw;
		width: 100%;
		padding: 0;
		height: 94vh;
		
	}
	
	.land-header-list-1 {
		grid-column: 3 / span 1;
		grid-row: 1;
		align-self: flex-start;
		margin-bottom: -.4vw;
		margin-left: .4vw;
		text-transform: lowercase;
	}
	
	.land-header-list-2 {
		grid-column: 4 / span 1;
		grid-row: 1;
		align-self: flex-start;
		margin-bottom: -.4vw;
		text-transform: lowercase;
	}

	
	
	
	.land-logo {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 1.75vw 1vw;
		grid-column: 1 / span 2;
		grid-row: 1;
		align-self: flex-end;
	}
	
	.land-logo h2 {
		font-size: 7vw;
		line-height: 4vw;
		letter-spacing: -.5vw;
		grid-column: 1 / span 1;
	}
	
	.land-logo h1 {
		font-size: 7vw;
		line-height: 4vw;
		letter-spacing: -.5vw;
		grid-column: 2 / span 1;
		margin-bottom: .5vw;
	}

	
	
	.land-h3work {
		grid-column: 1 / span 1;
		grid-row: 1;
		align-self: flex-start;
		margin-bottom: -.4vw;
		margin-left: .4vw;
		text-transform: lowercase;
	}
	
	.land-catnav {
		display: block;
		grid-column: 2 / span 1;
		grid-row: 1;
		align-self: flex-start;
		margin-bottom: -.4vw;
		text-transform: lowercase;
	}
	
	
	.land-statement {
		display: block;
		grid-column: 1 / span 2;
		grid-row: 2 / span 1;
		column-count: 1;
		column-gap: 1vw;
		margin-top: -.4vw;
		padding-right: 0;
		font-size: 1.75vw;
		letter-spacing: .0vw;
		line-height: 2.5vw;
	}
	
	.land-signup-wrapper {
		display: block;
		grid-column: 4 / span 1;
		grid-row: 2 / span 1;
		margin-top: -.4vw;
		letter-spacing: 0;
		align-self: flex-end;
	}

	
	.form-input {
		background: transparent;
		border: 1.5px solid hsla(0,0%,95%,1.00);
		border-radius: .4vw;
		padding: 8px 14px;
		font-size: 1.75vw;
		letter-spacing: 0;
		line-height: 1.4vw;
		color: hsla(0,0%,95%,1.00);
		width: 30vw;
		margin-bottom: 10px;
	}
	
	
	
	
	.form-btn {
		display: inline-block;
		font-size: 1.5vw;
		letter-spacing: .0vw;
		line-height: 1.4vw;
		color: black;
		text-align: center;
		padding: 8px 14px;
		border: solid 1.5px hsla(0,0%,95%,1.00);
		cursor: pointer;
		outline: none;
		background: none hsla(0,0%,95%,1.00);
		border-radius: .4vw;
		transition: all ease-in-out 1s;
	}
	
	.form-input-dark {
		background: transparent;
		border: 1.5px solid black;
		border-radius: .4vw;
		padding: 8px 14px;
		color: black;
		width: 85%;
		margin-bottom: 10px;
		font-size: 1.75vw;
		letter-spacing: 0vw;
		line-height: 2.5vw;
	}
	
	
	
	
	.form-btn-dark {
		display: inline-block;
		color: hsla(0,0%,95%,1.00);
		text-align: center;
		padding: 8px 14px;
		border: solid 1.5px black;
		cursor: pointer;
		outline: none;
		background: none black;
		border-radius: .4vw;
		transition: all ease-in-out 1s;
		font-size: 1.75vw;
		letter-spacing: 0vw;
		line-height: 2.5vw;
	}
	

	
	/* End landing header */
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		
	
	
	.lbkey {
		display: none;
		
	}
		
	
	
	
	
	
	
	
	
	.panel-content {
	  /* min height incase content is higher than window height */
		padding: 2vw 0;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		/*grid-template-rows: repeat(3, 1fr);*/
		grid-gap: 2vw;
	  /*outline: 10px solid hotpink;*/
	  /* turn above on to see the edge of panels */
	}
	
	
		
		
	
	
	.gallery {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-gap: 2vw;
		grid-column: 1 / span 6;
		height: 100%;
		width: 100%;
		grid-row: 1 / span 2;
		
	}
	
	.gallery-horizontal {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		grid-gap: 2vw;
		
		grid-column: 1 / span 8;
		height: 100%;
		width: 100%;
		
		grid-row: 1 / span 2;
		
	}
	
	
	
	.imgBox {
		grid-column: 2 / span 4;
		grid-row: 1 / span 1;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		height: auto;
		width: 100%;
		overflow: hidden;
	}
	
	.imgBox img {
		display: block;
		height: auto;
		width: 100%;
		object-fit: cover;
	}
	
	.imgBox-horizontal {
		grid-column: 2 / span 6;
		grid-row: 1 / span 2;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		height: auto;
		width: 100%;
		overflow: hidden;
	}
	
	.imgBox-horizontal img {
		display: block;
		height: auto;
		width: 100%;
		object-fit: cover;
	}
	
	.imgBox-vertical {
		grid-column: 2 / span 4;
		grid-row: 1 / span 2;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		height: auto;
		width: 100%;
		overflow: hidden;
	}
	
	.imgBox-vertical img {
		display: block;
		height: auto;
		width: 100%;
		object-fit: cover;
	}
	
	
	
	.thumbnails {
		grid-column: 1 / span 1;
		/*display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-flow: row wrap;*/
	
	}
	
	/*.thumbnail:first-child {
		margin-left: 0;
	}
	
	.thumbnail:last-child {
		margin-right: 0;
	}*/
	
	.thumbnail {
		margin-bottom: 2vw;
		/*display: flex;
		align-items: center;
		justify-content: center;*/
		overflow: hidden;
		width: 100%;
		height: 6.5vw;
	  	vertical-align: middle;
	  	-webkit-transition-duration: 0.3s;
	  	transition-duration: 0.3s;
	  	-webkit-transition-property: transform;
	  	transition-property: transform;
	  	-webkit-transition-timing-function: ease-out;
	  	transition-timing-function: ease-out;
	}
	
	.thumbnail:last-child {
		margin-bottom: 0;
	}
	
	.thumbnail img { 
		width: 100%;
		height: 100%;
		object-fit: cover;
	
	}
	
		
		
		
		
	
	
	.info-wrapper {
		grid-column: span 4;
		display: block;
		height: 100%;
	}
	
	.info-wrapper-horizontal {
		grid-column: span 4;
		display: block;
		height: 100%;
	}
	
	.info-element {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 2vw;
		margin-bottom: 2vw;
	}
	
	.info-element h5 {
		grid-column: 1 / span 2;
		margin-top: -.4vw;
	}
	
	.info-element p {
		grid-column: 3 / span 2;
		margin-top: -.4vw;
	}
	
	.sales-button {
		grid-column: 3 / span 2;
		
		
	}
	.sales-button p{
		grid-column: 2 / span 2;
		margin-top: -0.5vw;
		margin-bottom: 1vw;
	
	}
	
	
	
	
	.info-wrapper-product {
		grid-column: span 6;
		display: block;
		height: 100%;
	}
	
	.info-wrapper-product .info-element {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-gap: 2vw;
		margin-bottom: 2vw;
	}
	
	.info-wrapper-product .info-element h5 {
		grid-column: 1 / span 2;
		margin-top: -.4vw;
	}
	
	.info-wrapper-product .info-element p {
		grid-column: 3 / span 4;
		margin-top: -.4vw;
	}
	
	
	
	
	.paypal-wrapper {
		grid-column: 7 / span 4;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 2vw;
	}
	
	.paypal-btn-wrapper {
		display: flex;
		align-items: flex-end;
		grid-column: 1 / span 2;
		
	}
	
	.paypal-cart-wrapper {
		display: flex;
		align-items: flex-end;
		grid-column: 3 / span 2;
		
		
	}
	
	
	.paypal_btn {
		display: inline-block;
		font-size: 1.75vw;
		letter-spacing: .075vw;
		line-height: 2.25vw;
		
		text-align: center;
		padding: 10px 14px;
		border: solid 2px black;
		cursor: pointer;
		outline: none;
		background: none black;
		border-radius: .45vw;
		transition: all ease-in-out 1s;
	}
	.paypal_btn:hover {
		background: none;
		border: solid 2px black;
		border-radius: .45vw;
		color: black;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	#paypal_btn_blue-dark {
		color: hsla(216,7%,85%,1.00);
	}
	
	#paypal_btn_blue-dark:hover {
		color: black;
	}
	
	
	
	
	.paypal_cart {
		display: inline-block;
		font-size: 1.75vw;
		letter-spacing: .075vw;
		line-height: 2.25vw;
		color: black;
		text-align: center;
		padding: 13px 5px 10px 22px;
		border: none;
		cursor: pointer;
		outline: none;
		background: none;
		-o-transition: all ease-in-out .7s;
		-ms-transition: all ease-in-out .7s;
		-moz-transition: all ease-in-out .7s;
		-webkit-transition: all ease-in-out .7s;
		transition: all ease-in-out .7s;
		border-radius: 0!important;
	}
		
		
		
		
		
		
	
	
	
	
	
	
	
	
	
	
	
	
	

	.shop-item-photo {
		grid-row-start: 2;
		grid-column: 1 / span 12;
		grid-row: 2 / span 2;
	}
	
	.horizontal {
		grid-row-start: 2;
		grid-column: 2 / span 10;
		grid-row: 2 / span 2;
	}
	
	.vertical {
		padding-bottom: .5vw;
		grid-row-start: 2;
		grid-column: 3 / span 8;
		grid-row: 2 / span 2;
	}
	
		
	.vertical-tall{
		margin-bottom: 3.5vw;
		grid-row-start: 2;
		grid-column: 7 / span 6;
		grid-row: 2 / span 2;
	}
	
	.square {
		grid-row-start: 2;
		grid-column: 5 / span 8;
		grid-row: 2 / span 2;
	}

	
	.yeardiv {
		padding: 2.5% 0% 1.75%;
		display: block;
		height: 2.5vw;
	}
	
	h4 {
		display: block;
		font-size: 5.5vw;
		letter-spacing: -.5vw;
	}
/*
	footer {
		display: flex;
		align-content: space-between;
		justify-content: space-between;
		padding: 2.5%;
	}*/
	
	
	footer {
		margin-bottom: 1%;
		/*display: flex;
		align-content: space-between;
		justify-content: space-between;
		padding: 1%;*/
	}
	
	
	
	.footer-elements {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-gap: 4vw 2vw;
		width: 100%;
		padding: 25vw 0 1.5%;
		border-bottom: solid 2px black;
		
	}
	
	
	.h3work-footer {
		grid-column: 7 / span 1;
		margin-bottom: -.4vw;
	}
	
	
	.catnav-footer {
		display: block;
		grid-column: 8 / span 3;
		align-self: flex-end;
		margin-bottom: -.4vw;
	}
	
	.catnav-col2-footer {
		display: block;
		grid-column: 8 / span 3;
		align-self: flex-end;
		margin-top: -3.5vw;
		margin-bottom: -.4vw;
	}
	
	.catnav-footer li {
		/*color: hsla(0,0%,66%,1.00);*/
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.catnav-footer li:hover {
		/*color: hsla(0,0%,66%,1.00) !important;*/
		cursor: pointer;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.catnav-col2-footer li {
		/*color: hsla(0,0%,66%,1.00);*/
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.catnav-col2-footer li:hover {
		/*color: hsla(0,0%,66%,1.00) !important;*/
		cursor: pointer;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	
	
	
	
	.footer-list-1 {
		grid-column: 7 / span 1;
		align-self: flex-end;
		margin-bottom: -.4vw;
		
	}
	
	.footer-list-2 {
		grid-column: 8 / span 3;
		align-self: flex-end;
		margin-bottom: -.4vw;
		
	}
	
	
	.footer-list-2 a {
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.footer-list-2 a:hover {
		color: hsla(0,0%,66%,1.00) !important;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
		
	}

	

	
	
	
	
	
	
	
	/* Lightbox style */
	.lightbox {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 96vw;
	    height: 98%;
	   	background-color: hsla(0,0%,95%,.98);
	    display: none;
	    align-items: center;
	    justify-content: center;
		flex-direction: column;
	    z-index: 1000;
		padding: 2vw;
	}
	
	/* Lightbox content container */
	.lightbox-content {
	    position: relative;
	    text-align: center;
	    background-color: transparent; /* No background color around image */
	    padding: 2vw;
	    width: 100%;
	    height: 100%;
	    overflow: hidden;
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: center;
	}
		

	
	#prev-image {
	   margin-left: 1.75vw;
	}
	
	#first-image {
	   margin-left: 0vw;
	}
	
	
	/* Position Next and Last buttons */
	#next-image {
	    margin-left: 1.75vw;
		
	}
	
	
	
	/* Position Next and Last buttons */
	#last-image {
	   margin-left: 1.75vw;
	}

		
	
	.arrow-btns {
		margin-left: 0vw;
	}
	
	.lightbox-nav {

		padding: 0 0 2vw 0;
		
	}

	
	
	
	
	
	
	
	
	
	
	
		
		
	/*start of back to top*/
	
	.top {
		position: fixed;
	  	top: 40.75vh;
	  	right: 2.5vw;
		border: 3px solid black;  /* Border color */
		padding: 8px;  /* Padding to make it a rectangle */
		border-radius: 8px;  /* Rounded corners */
	}
	
	
	/* Increase the hitbox size without affecting visible button */
	.top::before {
		content: "";
		position: absolute;
		top: -20px; /* Adjust this value to control the expansion of the hitbox */
		left: -20px;
		right: -20px;
		bottom: -20px;
		border-radius: 8px; /* Ensure the hitbox matches the button's rounded corners */
	}
	
	/* Arrow styling using lines */
	.toparrow {
		position: relative;
		width: 28px;
		height: 28px;
	}
	
	/* Top diagonal line (45 degrees for upward pointing) */
	.toparrow::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 3px;
		top: 13px;
		left: -2.5px;
		transform: rotate(-45deg);  /* Arrowhead, top left to bottom right */
	}
	
	/* Bottom diagonal line (-45 degrees for upward pointing) */
	.toparrow::after {
		content: "";
		position: absolute;
		width: 20px;
		height: 3px;
		top: 13px;  /* Positioned just below the first line */
		left: 10.5px;
		transform: rotate(45deg);  /* Arrowhead, top right to bottom left */
	}
	
	/* Arrow stem (regular div) */
	.toparrow .topstem {
		width: 3px;
		height: 20px;  /* Stem height */
		top: 10px;  /* Align it vertically with the center of the arrow */
		left: 12.25px;  /* Center stem horizontally */
	}
	
	.toparrow .topstem::after {
	  content: "";
	  position: absolute;
	  width: 3px;
	  height: 30px;
	  top: -24px; /* Position after original stem */
	  left: 0px;  /* Align with the original stem */
		transform: rotate(90deg);  /* Arrowhead, top right to bottom left */
	
	}

	
	
	
	/*start of bottom*/
	
	.bottom {
		position: fixed;
	  	top: 47vh;
	  	right: 2.5vw;
	  	border: 3px solid black;  /* Border color */
		padding: 8px;
	  	border-radius: 8px;  /* Rounded corners */
	}
	
	
	/* Increase the hitbox size without affecting visible button */
	.bottom::before {
	  content: "";
	  position: absolute;
	  top: -20px; /* Adjust this value to control the expansion of the hitbox */
	  left: -20px;
	  right: -20px;
	  bottom: -20px;
	  border-radius: 8px; /* Ensure the hitbox matches the button's rounded corners */
	}

	/* Arrow styling using lines */
	.bottomarrow {
	  position: relative;
	  width: 28px;
	  height: 28px;
	}
	
	/* Top diagonal line (45 degrees for upward pointing) */
	.bottomarrow::before {
	  content: "";
	  position: absolute;
	  width: 20px;
	  height: 3px;
	  top: 13px;
	  left: -2.5px;
	  transform: rotate(45deg);  /* Arrowhead, top left to bottom right */
	}
	
	/* Bottom diagonal line (-45 degrees for upward pointing) */
	.bottomarrow::after {
	  content: "";
	  position: absolute;
	  width: 20px;
	  height: 3px;
	  top: 13px;  /* Positioned just below the first line */
	  left: 10.5px;
	  transform: rotate(-45deg);  /* Arrowhead, top right to bottom left */
	}
	
	/* Arrow stem (regular div) */
	.bottomarrow .bottomstem {
	  width: 3px;
	  height: 20px;  /* Stem height */
	  top: -1px;  /* Align it vertically with the center of the arrow */
	  left: 12.25px;  /* Center stem horizontally */
	  position: absolute;
	}
	
	.bottomarrow .bottomstem::after {
	  content: "";
	  position: absolute;
	  width: 3px;
	  height: 30px;
	  top: 13px; /* Position after original stem */
	  left: 0.5px;  /* Align with the original stem */
		transform: rotate(90deg);  /* Arrowhead, top left to bottom right */
	
	}
	
	

}


@media (max-width: 500px) {
	

	
	.header-elements {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 4% 2.5%;
		width: 100%;
		padding: 0;
		grid-template-rows: repeat(4, 45vw);
		margin-bottom: 7vw;
	}
	
	.news-header-elements {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, 45vw);
		margin-bottom: -1vw;
	}
	
	
	h1, h2 {
		font-size: 12vw;
		line-height: 7.75vw;
		letter-spacing: -1vw;
	}

	
	h3, h5, p, a, li {
		font-size: 3vw;
		letter-spacing: 0;
		line-height: 4vw;
	
	}
	
	
	.contact-modal-panel {
	  position: absolute;
	  right: 2.5%;
	  bottom: 2%;
	  width: 82.5vw;
	  padding: 28px;
	  background: hsla(0,0%,95%,1.00);
	  border: 3px solid #000;
	  border-radius: 24px;
	
	  opacity: 0;
	  transform: scale(0);
	  transform-origin: bottom right;
	
	  /* closing animation */
	  transition:
	    transform 500ms cubic-bezier(.4, 0, .2, 1),
	    opacity 180ms ease 320ms;
	}
	
	.contact-modal.is-open .contact-modal-panel {
	  opacity: 1;
	  transform: scale(1);
	
	  /* opening animation, delayed after backdrop starts */
	  transition:
	    transform .75s cubic-bezier(.2, .5, .2, 1) .2s,
	    opacity 120ms ease 180ms;
	}
	
	.contact-modal-close {
	  position: absolute;
	  top: -60px;
	  left: 0px;
	  border: 0;
	  background: transparent;
	  color: hsla(0,0%,60%,1);
	  font-weight: 300;
	  font-size: 36px;
	  line-height: 1;
	  cursor: pointer;
	
	  opacity: 0;
	  transition:
	    opacity 1s ease,
	    color 1s ease;
	}
	
	.contact-modal.is-open .contact-modal-close {
	  opacity: 1;
	  transition-delay: 1s, 0s;
	}
	
	.contact-modal-close:hover {
	  color: #000;
	}
	
	.contact-modal-heading h4 {
	  	display: grid;
	  	grid-template-columns: 1fr 1fr;
	  	gap: 0;
	  	margin: 0 0 24px;
		font-size: 12vw;
		line-height: 7.75vw;
		letter-spacing: -1vw;
		
	}
	
	.contact-modal-text {
	  max-width: 100%;
	  margin: 0 0 42px;
	}
	
	.contact-form {
	  display: grid;
	  gap: 12px;
	}
	
	.contact-form input,
	.contact-form textarea {
	  width: 100%;
	  border: 0;
	  border-bottom: 2px solid #000;
	  border-radius: 0;
	  background: transparent;
	  padding: 8px 0;
	  font-family: "franklin-gothic-urw", sans-serif;
		font-weight: 400;
		font-size: 3vw;
		letter-spacing: 0;
		line-height: 4vw;
	
	}
	
	.contact-form textarea {
	  min-height: 120px;
	  resize: vertical;
	}
	
	.contact-form input:focus,
	.contact-form textarea:focus {
	  outline: none;
	  border-bottom-color: #000;
	}
	
	.contact-form button {
	  width: fit-content;
	  margin-top: 14px;
	}
	
	.sr-only {
	  position: absolute;
	  width: 1px;
	  height: 1px;
	  overflow: hidden;
	  clip: rect(0, 0, 0, 0);
	}
	
	
	
	.contact-form-success,
	.contact-form-error,
	.contact-field-error {
	  	display: none;
	  	font-family: "franklin-gothic-urw", sans-serif;
	  	font-weight: 400;
	  	text-transform: lowercase;
		font-size: 15vw;
		line-height: 11vw;
		letter-spacing: -.9vw;
		padding-top: 50px
	}
	
	.contact-form-success:not(:empty),
	.contact-form-error:not(:empty) {
	  display: block;
	}
	
	.contact-form-success {
	  margin: 36px 0 0;
	}
	
	.contact-form-error {
	  margin: 24px 0 0;
	}
	
	.contact-field-error {
	  margin-top: -8px;
	  font-size: 14px;
	}
	
	.contact-form-success:not(:empty),
	.contact-form-error:not(:empty),
	.contact-field-error:not(:empty) {
	  display: block;
	}
	
	.contact-form input[aria-invalid="true"],
	.contact-form textarea[aria-invalid="true"] {
	  border-bottom-color: #000;
	}
	
	
	
	
	
	
		
	.logo {
		display: flex;
		grid-column: 1 / span 4;
		align-self: flex-end;
	}
	
	.logo h1 {
		width: 50%;
		flex-grow: 1;
	}
	
	.logo h2 {
		width: 50%;
		flex-grow: 1;
	}
	
	.h3statement {
		display: block;
		grid-column: 2 / span 1;
		grid-row: 3;
		margin-top: -.4vw;
		align-self: flex-start;
	}

	.statement {
		letter-spacing: 0;
		grid-column: 3 / span 2;
		grid-row: 3;
		column-count: 1;
		column-gap: 20px;
		margin-top: -.4vw;
		align-self: flex-start;
	}
	
	.news-h3statement {
		display: none;
	}
	.news-statement {
		display: none;
	}
	
	
	.h3work {
		grid-column: 2 / span 1;
		grid-row: 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
	}
	
	.catnav {
		grid-column: 3 / span 1;
		grid-row: 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
		margin-left: 0;
	}
	
	.catnav-col2 {
		display: block;
		grid-column: 4 / span 1;
		grid-row: 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
	}
	
	.news-h3work {
		display: none;
	}
	
	.news-catnav {
		display: none;
	}
	
	.news-catnav-col2 {
		display: none;
	}
	
	.header-list-1 {
		grid-column: 2 / span 1;
		grid-row: 1;
		align-self: flex-start;
		margin-top: -1.75vw;
		
	}
	
	.header-list-2 {
		grid-column: 3 / span 2;
		grid-row: 1;
		align-self: flex-start;
		margin-top: -1.75vw;
		
	}
	
	.header-list-3 {
		grid-column: 1 / span 1;
		grid-row: 4 / span 1;
		align-self: flex-start;
		margin-top:-.4vw;
	}
	
	.signup-wrapper {
		display: flex;
		grid-column: 2 / span 3;
		grid-row: 4 / span 1;
		margin-top: -5.45vw;
		letter-spacing: 0;
		align-self: flex-start;
	}	

	.signup-wrapper p {
		margin-bottom: -5vw;
	}	
	
	
	
	
	
	.news-header-list-3 {
		display: none;
	}
	
	.news-signup-wrapper {
		display: none;
	}
	
	
	
	
	.page-signup-wrapper {
		display: block;
		grid-column: 1 / span 2;
		grid-row: 3 / span 1;
		margin-top: -.4vw;
		margin-bottom: 2.5vw;
		letter-spacing: 0;
		align-self: flex-end;
	}
	
	
	
	
	.success-panel {
		height: 50vh;
		width: 100%;
		/*height: 1fr;*/
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-gap: 2vw;
		grid-column: 1 / span 4;
	}
	
	.success-panel h2 {
		grid-column: 1 / span 3;
		grid-row: 1 / span 1;
		align-self: flex-end;
		line-height: 9vw;
	}
	
	.success-h3 {
		grid-column: 1 / span 3;
		grid-row: 2 / span 1;
		align-self: flex-start;
		font-size: 6vw;
		letter-spacing: -0.2vw;
		line-height: 5vw;
		margin-top: 1vw;
		
	}
	
	.success-body {
		grid-column: 1 / span 2;
		grid-row: 2 / span 1;
		align-self: flex-end;
		margin-bottom: 0vw;
	}




	.success-links {
		grid-column: 1 / span 2;
		grid-row: 3 / span 1;
		align-self: flex-start;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, 1fr);
		grid-gap: 1vw;
		grid-column: 1 / span 4;
	}
	
	.success-link-2 {
		grid-column: 2 / span 1;
	}

	


		
	
	
	
	
	
	
	/*landing header*/
	
	.land-header-elements {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(6, 1fr);
		grid-gap: 3vw 2vw;
		width: 100%;
		padding: 0;
		height: 94vh;

		
	}
	
	.land-header-list-1 {
		grid-column: 1 / span 1;
		grid-row: 1;
		align-self: flex-start;
		margin-bottom: -.4vw;
		margin-left: .4vw;
		
	}
	
	.land-header-list-2 {
		grid-column: 2 / span 1;
		grid-row: 1;
		align-self: flex-start;
		margin-bottom: -.4vw;
	}
	
	.land-header-list-1 h3 {
		font-size: 3vw !important;
		letter-spacing: 0;
		line-height: 4.5vw !important;
		text-transform: lowercase;
	}
	
	.land-header-list-2 li a {
		font-size: 3vw !important;
		letter-spacing: 0;
		line-height: 4.5vw !important;
		text-transform: lowercase;
	}
	
		
	.land-header-list-2 li {

		line-height: 4.5vw !important;

	}
	
	
	
	.land-logo {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 3vw 2vw;
		grid-column: 1 / span 2;
		grid-row: 3;
		align-self: flex-end;
	}
	
	.land-logo h2 {
		font-size: 12vw;
		line-height: 7.75vw;
		letter-spacing: -1vw;
		grid-column: 1 / span 1;

	}
	
	.land-logo h1 {
		font-size: 12vw;
		line-height: 7.75vw;
		letter-spacing: -1vw;
		grid-column: 2 / span 1;
		margin-bottom: .5vw;
	}

	
	
	.land-h3work {
		grid-column: 1 / span 1;
		grid-row: 2;
		align-self: flex-start;
		margin-bottom: -.4vw;
		margin-left: .4vw;
		font-size: 3vw !important;
		letter-spacing: 0;
		line-height: 4.5vw !important;
		text-transform: lowercase;
	}
	
	.land-catnav {
		display: block;
		grid-column: 2 / span 1;
		grid-row: 2;
		align-self: flex-start;
		margin-bottom: -.4vw;
		column-count: 2;
		column-gap: 2vw;

	}
	
	.land-catnav li a{
		font-size: 3vw !important;
		letter-spacing: 0;
		line-height: 4.5vw !important;
		text-transform: lowercase;
	}	
	.land-catnav li{
		font-size: 2.5vw !important;
		letter-spacing: 0;
		line-height: 4.5vw !important;
		text-transform: lowercase;
	}
	
	
	.land-statement {
		display: block;
		grid-column: 1 / span 2;
		grid-row: 4 / span 1;
		column-count: 1;
		column-gap: 2vw;
		margin-top: -.4vw;
		font-size: 3vw;
		letter-spacing: 0;
		line-height: 4.5vw;
		
	}
	
	
	
	
	
	
	.land-signup-wrapper {
		display: block;
		grid-column: 1 / span 2;
		grid-row: 6 / span 1;
		margin-top: -.4vw;
		letter-spacing: 0;
		align-self: flex-end;
	}
	
	.land-signup-wrapper p {
		margin-bottom: -2vw;
		margin-top: -5vw;
	}

	
	.form-input {
		background: transparent;
		border: 1.5px solid hsla(0,0%,95%,1.00);
		border-radius: .4vw;
		padding: 8px 14px;
		font-size: 3vw;
		letter-spacing: 0;
		line-height: 4.5vw;
		color: hsla(0,0%,95%,1.00);
		margin-bottom: 10px;
	}
	
	

	.form-btn {
		
		display: inline-block;
		font-size: 3vw;
		letter-spacing: .0vw;
		line-height: 4.5vw;
		color: black;
		text-align: center;
		padding: 8px 14px;
		border: solid 1.5px hsla(0,0%,95%,1.00);
		cursor: pointer;
		outline: none;
		background: none hsla(0,0%,95%,1.00);
		border-radius: .4vw;
		transition: all ease-in-out 1s;
	}
	
	.form-input-dark {
		background: transparent;
		border: 1.5px solid black;
		border-radius: 1vw;
		padding: 8px 14px;
		font-size: 3vw;
		letter-spacing: 0;
		line-height: 5vw;
		color: black;
		margin-bottom: 10px;
	}
	
	
	
	
	
	
	.form-btn-dark {
		display: inline-block;
		font-size: 3vw;
		letter-spacing: 0;
		line-height: 5vw;
		color: hsla(0,0%,95%,1.00);
		text-align: center;
		padding: 8px 14px;
		border: solid 1.5px black;
		cursor: pointer;
		outline: none;
		background: none black;
		border-radius: 1vw;
		transition: all ease-in-out 1s;
	}
	
	
	
	
	/* End landing header */
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

	.yeardiv {
		height: 9vw;
	}

	.year {
		margin-top: 2.3vw;
	}
	
	h4 {
		display: block;
		font-size: 9vw;
		letter-spacing: -.75vw;
	}
	
	.fourzerofour {
		font-size: 12vw;
		line-height: 7.75vw;
	}
	.fourzerofour2 {
		font-size: 12vw;
		line-height: 9vw;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	.panel-content {
	  /* min height incase content is higher than window height */
		padding: 3vw 0 0vw;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		/*grid-template-rows: repeat(3, 1fr);*/
		grid-gap: 3vw;
	  /*outline: 10px solid hotpink;*/
	  /* turn above on to see the edge of panels */
	}
	
	
		
		
	
	
	.gallery {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 2.5vw;
		grid-column: 1 / span 4;
		height: 100%;
		width: 100%;
		grid-row: 1 / span 2;
		
	}
	
	.gallery-horizontal {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 2.5vw;
		
		grid-column: 1 / span 4;
		height: 100%;
		width: 100%;
		
		grid-row: 1 / span 2;
		
	}
	
	
	
	.imgBox {
		grid-column: 2 / span 3;
		grid-row: 1 / span 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	
	.imgBox img {
		display: block;
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
	
	.imgBox-horizontal {
		grid-column: 2 / span 3;
		grid-row: 1 / span 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	
	.imgBox-horizontal img {
		display: block;
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
	
	.imgBox-vertical {
		grid-column: 2 / span 3;
		grid-row: 1 / span 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	
	.imgBox-vertical img {
		display: block;
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
	
	
	
	.thumbnails {
		grid-column: 1 / span 1;
		/*display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-flow: row wrap;*/
	
	}
	
	/*.thumbnail:first-child {
		margin-left: 0;
	}
	
	.thumbnail:last-child {
		margin-right: 0;
	}*/
	
	.thumbnail {
		margin-bottom: 2.5vw;
		/*display: flex;
		align-items: center;
		justify-content: center;*/
		overflow: hidden;
		width: 100%;
		/*height: 22.5vw;*/
		
		height: 11vw;
	  	vertical-align: middle;
	  	-webkit-transition-duration: 0.3s;
	  	transition-duration: 0.3s;
	  	-webkit-transition-property: transform;
	  	transition-property: transform;
	  	-webkit-transition-timing-function: ease-out;
	  	transition-timing-function: ease-out;
	}
	
	.thumbnail:last-child {
		margin-bottom: 0;
	}
	
	.thumbnail img { 
		width: 100%;
		height: 100%;
		object-fit: cover;
	
	}
	
		
		
		
		
	
	
	.info-wrapper {
		grid-column: span 4;
		display: block;
		height: 100%;
	}
	
	.info-wrapper-horizontal {
		grid-column: span 4;
		display: block;
		height: 100%;
	}
	
	.info-element {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 2vw;
		margin-bottom: 2vw;
	}
	
	.info-element h5 {
		grid-column: 1 / span 1;
		margin-top: -.4vw;
	}
	
	.info-element p {
		grid-column: 2 / span 2;
		margin-top: -.4vw;
	}
	
	
		
	.sales-button {
		grid-column: 2 / span 2;
		
		
	}
	.sales-button p {
		grid-column: 2 / span 2;
		margin-top: -0.5vw;
		margin-bottom: 0vw;
	
	}
	
	
	
	.info-wrapper-product {
		grid-column: span 4;
		display: block;
		height: 100%;
	}
	
	.info-wrapper-product .info-element {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 2vw;
		margin-bottom: 2vw;
	}
	
	.info-wrapper-product .info-element h5 {
		grid-column: 1 / span 1;
		margin-top: -.4vw;
	}
	
	.info-wrapper-product .info-element p {
		grid-column: 2 / span 2;
		margin-top: -.4vw;
	}
	
	
	
	
	.paypal-wrapper {
		grid-column: 1 / span 4;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 2vw;
		margin-top: 3vw;
		margin-bottom: 2.5vw;
	}
	
	.paypal-btn-wrapper {
		display: flex;
		align-items: flex-start;
		grid-column: 1 / span 1;
		
	}
	
	.paypal-cart-wrapper {
		display: flex;
		align-items: flex-start;
		grid-column: 3 / span 1;
		
		
	}
	
	
	.paypal_btn {
		display: inline-block;
		font-size: 3vw;
		letter-spacing: .045vw;
		line-height: 4vw;
		
		text-align: center;
		padding: 10px 14px;
		border: solid 2px black;
		cursor: pointer;
		outline: none;
		background: none black;
		border-radius: 1vw;
		transition: all ease-in-out 1s;
	}
	.paypal_btn:hover {
		background: none;
		border: solid 2px black;
		border-radius: .45vw;
		color: black;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	#paypal_btn_blue-dark {
		color: hsla(216,7%,85%,1.00);
	}
	
	#paypal_btn_blue-dark:hover {
		color: black;
	}
	
	
	
	
	.paypal_cart {
		display: inline-block;
		font-size: 3vw;
		letter-spacing: .045vw;
		line-height: 4vw;
		color: black;
		text-align: center;
		padding: 13px 5px 10px 22px;
		border: none;
		cursor: pointer;
		outline: none;
		background: none;
		-o-transition: all ease-in-out .7s;
		-ms-transition: all ease-in-out .7s;
		-moz-transition: all ease-in-out .7s;
		-webkit-transition: all ease-in-out .7s;
		transition: all ease-in-out .7s;
		border-radius: 0!important;
	}
		
		
		
		
	

	/* Lightbox Gallery */
	
	/* Gallery container with CSS columns for masonry effect */
	.lbgallery {
	    column-count: 2; /* 6 columns for the gallery */
	    column-gap: 2.5vw; /* Space between columns */
	    padding: 2.5vw 0;
	    width: 100%;
	    display: block;
	    margin: 0 auto;
		border-bottom: solid 2px black;
	}
	
	/* Image container for each gallery item */
	.lbgallery-item {
	    break-inside: avoid; /* Prevent items from breaking in the middle */
	    margin-bottom: 2.5vw; /* Space between images vertically */
	    position: relative;
		overflow: hidden;
	}	
		
	
	
	
	
	
	
	
	
	
	
	
	footer {
		margin-bottom: 3vw;
		/*display: flex;
		align-content: space-between;
		justify-content: space-between;
		padding: 1%;*/
	}
	
	
	
	.footer-elements {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 4vw 2vw;
		width: 100%;
		padding: 2.25vw 0 2.75vw;
		border-bottom: solid 2px black;
		
	}
	
	
	.h3work-footer {
		grid-column: 2 / span 1;
		margin-bottom: -.4vw;
	}
	
	
	.catnav-footer {
		display: block;
		grid-column: 3 / span 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
	}
	
	.catnav-col2-footer {
		display: block;
		grid-column: 3 / span 2;
		align-self: flex-end;
		margin-top: -3.5vw;
		margin-bottom: -.4vw;
	}
	
	.catnav-footer li {
		color: hsla(0,0%,66%,1.00);
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.catnav-footer li:hover {
		color: hsla(0,0%,66%,1.00) !important;
		cursor: pointer;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.catnav-col2-footer li {
		color: hsla(0,0%,66%,1.00);
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.catnav-col2-footer li:hover {
		color: hsla(0,0%,66%,1.00) !important;
		cursor: pointer;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	
	
	
	
	.footer-list-1 {
		grid-column: 2 / span 1;
		align-self: flex-end;
		margin-bottom: -.4vw;
		
	}
	
	.footer-list-2 {
		grid-column: 3 / span 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
		
	}
	
	
	.footer-list-2 a {
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.footer-list-2 a:hover {
		color: hsla(0,0%,66%,1.00) !important;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
		
	}

	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		
		
	/*start of back to top*/
	
	.top {
		position: fixed;
	  	top: 39.75vh;
	  	right: 2.5vw;
		border: 3px solid black;  /* Border color */
		padding: 8px;  /* Padding to make it a rectangle */
		border-radius: 8px;  /* Rounded corners */
	}
	
	
	/* Increase the hitbox size without affecting visible button */
	.top::before {
		content: "";
		position: absolute;
		top: -20px; /* Adjust this value to control the expansion of the hitbox */
		left: -20px;
		right: -20px;
		bottom: -20px;
		border-radius: 8px; /* Ensure the hitbox matches the button's rounded corners */
	}
	
	/* Arrow styling using lines */
	.toparrow {
		position: relative;
		width: 28px;
		height: 28px;
	}
	
	/* Top diagonal line (45 degrees for upward pointing) */
	.toparrow::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 3px;
		top: 13px;
		left: -2.5px;
		transform: rotate(-45deg);  /* Arrowhead, top left to bottom right */
	}
	
	/* Bottom diagonal line (-45 degrees for upward pointing) */
	.toparrow::after {
		content: "";
		position: absolute;
		width: 20px;
		height: 3px;
		top: 13px;  /* Positioned just below the first line */
		left: 10.5px;
		transform: rotate(45deg);  /* Arrowhead, top right to bottom left */
	}
	
	/* Arrow stem (regular div) */
	.toparrow .topstem {
		width: 3px;
		height: 20px;  /* Stem height */
		top: 10px;  /* Align it vertically with the center of the arrow */
		left: 12.25px;  /* Center stem horizontally */
	}
	
	.toparrow .topstem::after {
	  content: "";
	  position: absolute;
	  width: 3px;
	  height: 30px;
	  top: -24px; /* Position after original stem */
	  left: 0px;  /* Align with the original stem */
		transform: rotate(90deg);  /* Arrowhead, top right to bottom left */
	
	}

	
	
	
	/*start of bottom*/
	
	.bottom {
		position: fixed;
	  	top: 47vh;
	  	right: 2.5vw;
	  	border: 3px solid black;  /* Border color */
		padding: 8px;
	  	border-radius: 8px;  /* Rounded corners */
	}
	
	
	/* Increase the hitbox size without affecting visible button */
	.bottom::before {
	  content: "";
	  position: absolute;
	  top: -20px; /* Adjust this value to control the expansion of the hitbox */
	  left: -20px;
	  right: -20px;
	  bottom: -20px;
	  border-radius: 8px; /* Ensure the hitbox matches the button's rounded corners */
	}

	/* Arrow styling using lines */
	.bottomarrow {
	  position: relative;
	  width: 28px;
	  height: 28px;
	}
	
	/* Top diagonal line (45 degrees for upward pointing) */
	.bottomarrow::before {
	  content: "";
	  position: absolute;
	  width: 20px;
	  height: 3px;
	  top: 13px;
	  left: -2.5px;
	  transform: rotate(45deg);  /* Arrowhead, top left to bottom right */
	}
	
	/* Bottom diagonal line (-45 degrees for upward pointing) */
	.bottomarrow::after {
	  content: "";
	  position: absolute;
	  width: 20px;
	  height: 3px;
	  top: 13px;  /* Positioned just below the first line */
	  left: 10.5px;
	  transform: rotate(-45deg);  /* Arrowhead, top right to bottom left */
	}
	
	/* Arrow stem (regular div) */
	.bottomarrow .bottomstem {
	  width: 3px;
	  height: 20px;  /* Stem height */
	  top: -1px;  /* Align it vertically with the center of the arrow */
	  left: 12.25px;  /* Center stem horizontally */
	  position: absolute;
	}
	
	.bottomarrow .bottomstem::after {
	  content: "";
	  position: absolute;
	  width: 3px;
	  height: 30px;
	  top: 13px; /* Position after original stem */
	  left: 0.5px;  /* Align with the original stem */
		transform: rotate(90deg);  /* Arrowhead, top left to bottom right */
	
	}

}
	
}

@media (max-width: 500px) {
	.lightbox-content {
		flex-direction: column;
		justify-content: flex-start;
		overflow-y: auto;
		align-items: flex-start;
	}
}

@media (min-width: 501px) and (max-width: 1100px) {
	.lightbox-content {
		align-items: center;
	}

	.h3info {
		grid-column: 4 / span 1;
		grid-row: 1;
	}

	.infonav {
		grid-column: 5 / span 1;
		grid-row: 1;
	}
}

.header-list-3,
.signup-wrapper {
	align-self: flex-start;
	margin-top: -.4vw;
}

.signup-wrapper .ml-form-embedBody p:first-child {
	margin-top: 0;
}

@media (max-width: 500px) {
	.h3info {
		grid-column: 1 / span 1;
		grid-row: 3;
		align-self: flex-start;
		margin-top: -.4vw;
	}

	.infonav {
		grid-column: 2 / span 2;
		grid-row: 3;
		align-self: flex-start;
		margin-top: -.4vw;
	}

	.header-list-3,
	.signup-wrapper {
		margin-top: -.4vw;
	}
}

/* Compact shared work-page header */
@media (min-width: 1101px) {
	header.panel { height: 33vh; box-sizing: border-box; }
	header.panel .header-elements { height: 100%; grid-template-rows: repeat(2, minmax(0, 1fr)); row-gap: .75vw; }
	header.panel .logo { position: relative; display: block; grid-row: 1 / span 2; height: 100%; }
	header.panel .logo h2 { position: absolute; top: 0; left: 0; }
	header.panel .logo h1 { position: absolute; left: 0; bottom: 50%; margin: 0; }
	header.panel .h3info { grid-column: 8 / span 1; grid-row: 1; align-self: flex-start; }
	header.panel .infonav { grid-column: 9 / span 1; grid-row: 1; align-self: flex-start; }
	header.panel .h3work { grid-column: 8 / span 1; grid-row: 2; align-self: flex-start; margin: -.4vw 0 0; }
	header.panel .catnav { grid-column: 9 / span 1; grid-row: 2; align-self: flex-start; margin: -.4vw 0 0; }
	header.panel .header-list-3 { grid-column: 10 / span 1; grid-row: 1; }
	header.panel .signup-wrapper { grid-column: 11 / span 2; grid-row: 1; }
}

@media (min-width: 501px) and (max-width: 1100px) {
	header.panel { height: 33vh; box-sizing: border-box; }
	header.panel .header-elements { height: 100%; grid-template-rows: repeat(2, minmax(0, 1fr)); row-gap: .75vw; }
	header.panel .logo { position: relative; display: block; grid-row: 1 / span 2; height: 100%; }
	header.panel .logo h2 { position: absolute; top: 0; left: 0; }
	header.panel .logo h1 { position: absolute; left: 0; bottom: 50%; margin: 0; }
	header.panel .h3info { grid-column: 4 / span 1; grid-row: 1; align-self: flex-start; }
	header.panel .infonav { grid-column: 5 / span 1; grid-row: 1; align-self: flex-start; }
	header.panel .h3work { grid-column: 4 / span 1; grid-row: 2; align-self: flex-start; margin: -.4vw 0 0; }
	header.panel .catnav { grid-column: 5 / span 1; grid-row: 2; align-self: flex-start; margin: -.4vw 0 0; }
	header.panel .header-list-3 { grid-column: 6 / span 1; grid-row: 1; align-self: flex-start; margin-top: -.4vw; }
	header.panel .signup-wrapper { grid-column: 7 / span 2; grid-row: 1; align-self: flex-start; margin-top: -.4vw; }
	header.panel .header-list-1 { grid-column: 6 / span 1; grid-row: 2; }
	header.panel .header-list-2 { grid-column: 7 / span 2; grid-row: 2; }
}

@media (max-width: 500px) {
	header.panel { height: auto; }
}

/* Artwork gallery sizing */
.gallery .thumbnails .thumbnail a,
.gallery-horizontal .thumbnails .thumbnail a {
	display: block;
	width: 100%;
	height: 100%;
}

.gallery .thumbnails .thumbnail img,
.gallery-horizontal .thumbnails .thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.imgBox,
.imgBox-horizontal,
.imgBox-vertical {
	height: auto;
	align-self: start;
	align-items: flex-start;
}

.imgBox img,
.imgBox-horizontal img,
.imgBox-vertical img {
	display: block;
	width: 100%;
	height: auto;
}

.panel-content {
	align-items: start;
}

.gallery,
.gallery-horizontal {
	height: auto;
	grid-row: 1;
	align-self: start;
}

.info-wrapper,
.info-wrapper-horizontal {
	height: auto;
	align-self: start;
}

.gallery .thumbnails,
.gallery-horizontal .thumbnails {
	align-self: start;
}

.gallery .thumbnails .thumbnail,
.gallery-horizontal .thumbnails .thumbnail {
	position: relative;
}

.gallery .thumbnails .thumbnail a,
.gallery-horizontal .thumbnails .thumbnail a {
	position: absolute;
	inset: 0;
}

/* Shared editorial spacing and section-heading rhythm */
:root {
	--space-s1: .25vw;
	--space-s2: .5vw;
	--space-s3: 1vw;
	--space-s4: 1.5vw;
	--space-s5: 2vw;
	--space-s6: 2.5vw;
	--space-s7: 3vw;
	--heading-inset: .9rem;
	--section-heading-block-height: 8vh;
	--section-heading-size: 2.75vw;
	--section-heading-line-height: 1.4vw;
	--section-heading-letter-spacing: -.18vw;
}

header {
	padding-top: var(--heading-inset);
	padding-bottom: var(--heading-inset);
}

@media (min-width: 701px) {
	.yeardiv {
		height: var(--section-heading-block-height);
		padding: var(--heading-inset) 0;
		box-sizing: border-box;
	}

	.year {
		margin: 0;
		font-size: var(--section-heading-size);
		line-height: var(--section-heading-line-height);
		letter-spacing: var(--section-heading-letter-spacing);
	}
}

/* A horizontal product gallery uses eight columns, leaving four for its data. */
.gallery-horizontal + .info-wrapper-product {
	grid-column: span 4;
}


/* Semantic information-page heading hierarchy
   h2 = major region; h3 = subsection; h4 = subdivision.
   Visual equality on desktop does not erase document rank. */
.events-heading,
.publications-heading,
.donate-heading,
.contact-heading {
	font-size: 3.5vw;
	line-height: 2vw;
	letter-spacing: -.2vw;
	font-weight: 400;
}

.content-heading,
.exhibition-heading {
	font-size: 2vw;
	line-height: 1.8vw;
	letter-spacing: -.1vw;
	font-weight: 400;
	margin: 0;
}

.minor-heading {
	font-size: 1.5vw;
	line-height: 1.5vw;
	letter-spacing: -.05vw;
	font-weight: 400;
	margin: 0;
}

@media (min-width: 501px) and (max-width: 1100px) {
	.events-heading,
	.publications-heading,
	.donate-heading,
	.contact-heading {
		font-size: 5.5vw;
		line-height: 4.5vw;
		letter-spacing: -.35vw;
	}

	.content-heading,
	.exhibition-heading {
		font-size: 3.5vw;
		line-height: 3.5vw;
		letter-spacing: -.18vw;
	}

	.minor-heading {
		font-size: 1.75vw;
		line-height: 2.5vw;
		letter-spacing: 0;
	}
}

@media (max-width: 500px) {
	.events-heading,
	.publications-heading,
	.donate-heading,
	.contact-heading {
		font-size: 7vw;
		line-height: 5.5vw;
		letter-spacing: -.5vw;
	}

	.content-heading,
	.exhibition-heading {
		font-size: 5.5vw;
		line-height: 5.5vw;
		letter-spacing: -.3vw;
	}

	.minor-heading {
		font-size: 3vw;
		line-height: 4vw;
		letter-spacing: 0;
	}
}


/* Information page: deliberate four-column mobile composition.
   Desktop placements must not create implicit columns on narrow screens. */
@media (max-width: 500px) {
	.information .panel-content {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 3vw;
		row-gap: 6vw;
	}

	.information .info-heading {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.information .bio-text,
	.information .statement-text,
	.information .studio-text1,
	.information .studio-text2,
	.information .studio-text3 {
		grid-column: 1 / -1;
		grid-row: auto;
		width: auto;
		margin-top: 0;
	}

	.information .bio-gallery,
	.information .studio-gallery {
		grid-column: 1 / -1;
		grid-row: auto;
		width: 100%;
		height: auto;
		margin-top: 0;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: none;
		gap: 3vw;
	}

	.information .bio-gallery {
		aspect-ratio: 4 / 3;
	}

	.information .bio-image1 {
		grid-column: 1 / span 3;
		grid-row: 1 / span 2;
	}

	.information .bio-image2 {
		grid-column: 4;
		grid-row: 1;
	}

	.information .bio-image3 {
		grid-column: 4;
		grid-row: 2;
	}

	.information .studio-image1 {
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}

	.information .studio-image2,
	.information .studio-image3,
	.information .studio-image4,
	.information .studio-image5 {
		grid-column: span 2;
		grid-row: auto;
		aspect-ratio: 1 / 1;
	}

	.information img,
	.information .bio-image1 img,
	.information .bio-image2 img,
	.information .bio-image3 img {
		display: block;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		object-fit: cover;
	}

	.information .events-panel {
		grid-column: 1 / -1;
		width: 100%;
		padding-bottom: 6vw;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 3vw;
		row-gap: 6vw;
	}

	.information .events-heading,
	.information .exhibitions-image,
	.information .exhibition-info,
	.information .current-exhibitions,
	.information .past-exhibitions-list {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.information .events-heading {
		margin: 0;
	}

	.information .exhibitions-image {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.information .exhibition-info,
	.information .current-exhibitions,
	.information .past-exhibitions-list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 3vw;
		row-gap: 4vw;
	}

	.information .exhibition-heading,
	.information .current-exhibition-status,
	.information .current-exhibition-note,
	.information .gatherings-date,
	.information .gatherings-venue,
	.information .gatherings-note {
		grid-column: 1 / -1;
	}

	.information .gatherings-note {
		padding-right: 0;
		margin-top: 0;
	}

	.information .exhibition-venue {
		grid-column: 1 / span 1;
	}

	.information .exhibition-name {
		grid-column: 2 / span 2;
	}

	.information .exhibition-date {
		grid-column: 4;
	}

	.information .publications,
	.information .donate,
	.information .contact {
		grid-column: 1 / -1;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 3vw;
		row-gap: 4vw;
	}

	.information .publications-heading,
	.information .publications-content,
	.information .donate-heading,
	.information .donate-col,
	.information .contact-heading,
	.information .contact-col {
		grid-column: 1 / -1;
	}

	.information .publications-content,
	.information .contact-col {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 3vw;
		row-gap: 4vw;
	}

	.information .publications-col1,
	.information .publications-col2 {
		grid-column: span 2;
	}

	.information .contact-col-list-1 {
		grid-column: 1;
	}

	.information .contact-col-list-2 {
		grid-column: 2 / -1;
	}
}


/* Information page mobile hierarchy and sectional rhythm */
.event-minor-heading {
	font-size: 1.5vw;
	line-height: 1.5vw;
	letter-spacing: -.05vw;
	font-weight: 400;
	margin: 0;
}

@media (max-width: 500px) {
	:root {
		--section-heading-size: 6vw;
		--section-heading-line-height: 6vw;
		--section-heading-letter-spacing: -.35vw;
	}

	.information .content-heading,
	.information .exhibition-heading,
	.work-register-heading .year,
	.edition-category-heading .year {
		font-size: var(--section-heading-size);
		line-height: var(--section-heading-line-height);
		letter-spacing: var(--section-heading-letter-spacing);
		font-weight: 400;
	}

	.information .event-minor-heading {
		font-size: 4vw;
		line-height: 4.5vw;
		letter-spacing: -.1vw;
		font-weight: 400;
	}

	.information .events-heading,
	.information .publications-heading,
	.information .donate-heading,
	.information .contact-heading {
		margin-bottom: 3vw;
	}

	.information .events-panel {
		border-top: 1px solid black;
		padding-top: 3vw;
	}

	.information .events-panel + .events-panel {
		margin-top: 8vw;
	}

	.information .publications + .donate,
	.information .donate + .contact {
		margin-top: 8vw;
	}

	.information .publications-col1 .minor-heading:not(:first-child) {
		margin-top: 8vw;
	}

	.information .statement-text {
		margin-top: 8vw;
	}

	.information .statement-text br + br {
		display: none;
	}

	.information .studio-text3 li + br {
		display: none;
	}
}


/* Display hierarchy is independent of semantic heading rank. */
@media (max-width: 500px) {
	/* h2 event/resource regions: the 9vw mobile display tier */
	.information .events-heading,
	.information .publications-heading,
	.information .donate-heading,
	.information .contact-heading {
		font-size: 9vw;
		line-height: 8.2vw;
		letter-spacing: -.55vw;
		font-weight: 400;
	}

	/* Semantic h2 practice subsections: intentionally shown at the 6vw tier */
	.information .content-heading,
	.work-register-heading .year,
	.edition-category-heading .year {
		font-size: 6vw;
		line-height: 6vw;
		letter-spacing: -.35vw;
		font-weight: 400;
		margin: 0;
	}

	/* Semantic h3 subdivisions: the 5vw tier */
	.information .exhibition-heading,
	.information .minor-heading {
		font-size: 5vw;
		line-height: 5.2vw;
		letter-spacing: -.2vw;
		font-weight: 400;
		margin: 0;
	}

	/* Record-local headings and emphasized event metadata: the 4vw tier */
	.information .event-minor-heading {
		font-size: 4vw;
		line-height: 4.5vw;
		letter-spacing: -.1vw;
		font-weight: 400;
		margin: 0;
	}
}


/* Information page: approved tablet composition restoration — 2026-07-23. */
/*
	The information page has three independent compositions:
	desktop, tablet, and mobile. Keep this block isolated from heading-rank
	changes so typography work cannot silently collapse the tablet grid.
*/
@media (min-width: 501px) and (max-width: 1100px) {
	.information .panel-content {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 2vw;
		row-gap: 5vw;
		align-content: start;
	}

	.information .info-heading {
		grid-column: 1 / span 2;
		grid-row: auto;
		margin: 0;
	}

	/* about */
	#about .bio-text {
		grid-column: 4 / span 9;
		grid-row: 1;
		width: auto;
		margin-top: -.4vw;
	}

	#about .statement-text {
		grid-column: 4 / span 9;
		grid-row: 2;
		width: auto;
		margin-top: 0;
	}

	#about .bio-gallery {
		grid-column: 4 / span 9;
		grid-row: 3;
		width: 100%;
		height: 62vw;
		margin-top: 3vw;
		display: grid;
		grid-template-columns: repeat(9, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(0, 1fr));
		column-gap: 2vw;
		row-gap: 2vw;
	}

	#about .bio-image1 {
		grid-column: 1 / span 6;
		grid-row: 1 / span 2;
	}

	#about .bio-image2 {
		grid-column: 7 / span 3;
		grid-row: 1;
	}

	#about .bio-image3 {
		grid-column: 7 / span 3;
		grid-row: 2;
	}

	/* studio text register */
	#studio .studio-text1 {
		grid-column: 4 / span 5;
		grid-row: 1 / span 2;
		width: auto;
		margin-top: -.4vw;
	}

	#studio .studio-text2 {
		grid-column: 10 / span 3;
		grid-row: 1;
		width: auto;
		margin-top: -.4vw;
	}

	#studio .studio-text3 {
		grid-column: 10 / span 3;
		grid-row: 2;
		width: auto;
		margin-top: 7vw;
	}

	/*
		The studio gallery retains the twelve-column site rhythm inside its
		nine-column content register: six primary columns beside three
		secondary columns.
	*/
	#studio .studio-gallery {
		grid-column: 4 / span 9;
		grid-row: 3;
		width: 100%;
		height: 72vw;
		margin-top: 3vw;
		display: grid;
		grid-template-columns: repeat(9, minmax(0, 1fr));
		grid-template-rows: repeat(6, minmax(0, 1fr));
		column-gap: 2vw;
		row-gap: 2vw;
	}

	#studio .studio-image1 {
		grid-column: 1 / span 6;
		grid-row: 1 / span 3;
	}

	#studio .studio-image3 {
		grid-column: 1 / span 6;
		grid-row: 4 / span 3;
	}

	#studio .studio-image2 {
		grid-column: 7 / span 3;
		grid-row: 1 / span 2;
	}

	#studio .studio-image4 {
		grid-column: 7 / span 3;
		grid-row: 3 / span 2;
	}

	#studio .studio-image5 {
		grid-column: 7 / span 3;
		grid-row: 5 / span 2;
	}

	/* events: section label at left, complete event panels at right */
	#events .events-panel {
		grid-column: 4 / span 9;
		width: 100%;
		padding-top: 1.5vw;
		padding-bottom: 7vw;
		border-top: 1px solid black;
		border-bottom: 0;
		display: grid;
		grid-template-columns: repeat(9, minmax(0, 1fr));
		column-gap: 2vw;
		row-gap: 4vw;
	}

	#events .events-panel + .events-panel {
		margin-top: 2vw;
	}

	#events .events-heading,
	#events .exhibitions-image,
	#events .exhibition-info {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	#events .events-heading {
		margin: 0;
	}

	#events .exhibitions-image {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	#events .exhibition-info {
		display: grid;
		grid-template-columns: repeat(9, minmax(0, 1fr));
		column-gap: 2vw;
		row-gap: 5vw;
	}

	#events .current-exhibitions,
	#events .past-exhibitions-list {
		grid-column: 1 / -1;
		width: 100%;
	}

	#events .current-exhibitions {
		display: grid;
		grid-template-columns: repeat(9, minmax(0, 1fr));
		column-gap: 2vw;
		row-gap: 2vw;
	}

	#events .exhibition-heading {
		grid-column: 1 / -1;
		margin: 0 0 2vw;
	}

	#events .current-exhibition-status,
	#events .gatherings-date {
		grid-column: 1 / span 3;
	}

	#events .current-exhibition-note,
	#events .gatherings-venue {
		grid-column: 4 / span 6;
	}

	#events .gatherings-note {
		grid-column: 1 / -1;
		padding-right: 0;
	}

	#events .past-exhibitions-list {
		display: grid;
		grid-template-columns: repeat(9, minmax(0, 1fr));
		column-gap: 2vw;
	}

	#events .exhibition-venue {
		grid-column: 1 / span 3;
	}

	#events .exhibition-name {
		grid-column: 4 / span 4;
	}

	#events .exhibition-date {
		grid-column: 9;
	}

	/* resources: publications above; donate and contact share the next register */
	#resources .publications {
		grid-column: 4 / span 9;
		grid-row: 1;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(9, minmax(0, 1fr));
		column-gap: 2vw;
		row-gap: 3vw;
	}

	#resources .publications-heading {
		grid-column: 1 / -1;
		margin: 0;
	}

	#resources .publications-content {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(9, minmax(0, 1fr));
		column-gap: 2vw;
		margin-top: 0;
	}

	#resources .publications-col1 {
		grid-column: 1 / span 4;
	}

	#resources .publications-col2 {
		grid-column: 6 / span 4;
	}

	#resources .donate {
		grid-column: 4 / span 4;
		grid-row: 2;
		width: 100%;
		margin-top: 8vw;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 2vw;
	}

	#resources .contact {
		grid-column: 9 / span 4;
		grid-row: 2;
		width: 100%;
		margin-top: 8vw;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 2vw;
	}

	#resources .donate-heading,
	#resources .contact-heading,
	#resources .donate-col,
	#resources .contact-col {
		grid-column: 1 / -1;
	}

	#resources .donate-col p {
		padding-right: 0;
	}

	#resources .contact-col {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 2vw;
	}

	#resources .contact-col h5,
	#resources .contact-col .minor-heading {
		grid-column: 1 / -1;
	}

	#resources .contact-col-list-1 {
		grid-column: 1;
	}

	#resources .contact-col-list-2 {
		grid-column: 2 / span 3;
	}

	/* Images retain their crops without reintroducing intrinsic-width columns. */
	.information .bio-gallery img,
	.information .studio-gallery img,
	.information .exhibitions-image img {
		display: block;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		object-fit: cover;
	}
}


/* Tablet refinement: shared display tier and studio gallery integrity — 2026-07-23. */
@media (min-width: 501px) and (max-width: 1100px) {
	/*
		Tablet keeps the desktop relationship between major page headings and
		the event/resource subsection headings, at a slightly reduced scale.
	*/
	h1,
	h2,
	.information .events-heading,
	.information .publications-heading,
	.information .donate-heading,
	.information .contact-heading {
		font-size: 6vw;
		line-height: 4.7vw;
		letter-spacing: -.4vw;
	}

	/*
		Lock the studio gallery to the approved six-column primary register
		beside a three-column secondary stack.
	*/
	#studio .studio-gallery {
		grid-template-columns: repeat(9, minmax(0, 1fr));
		grid-template-rows: repeat(6, minmax(0, 1fr));
		align-items: stretch;
		justify-items: stretch;
	}

	#studio .studio-gallery > div {
		display: block;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		overflow: hidden;
		align-self: stretch;
		justify-self: stretch;
	}

	#studio .studio-image1 {
		grid-column: 1 / span 6;
		grid-row: 1 / span 3;
	}

	#studio .studio-image3 {
		grid-column: 1 / span 6;
		grid-row: 4 / span 3;
	}

	#studio .studio-image2 {
		grid-column: 7 / span 3;
		grid-row: 1 / span 2;
	}

	#studio .studio-image4 {
		grid-column: 7 / span 3;
		grid-row: 3 / span 2;
	}

	#studio .studio-image5 {
		grid-column: 7 / span 3;
		grid-row: 5 / span 2;
	}

	#studio .studio-gallery > div > img {
		display: block;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		object-fit: cover;
	}
}


/* Tablet information refinements and optional spacing audit — 2026-07-23. */
@media (min-width: 501px) and (max-width: 1100px) {
	/* The outer events panel rule is useful on mobile, but redundant here. */
	#events .panel-content > .events-panel:first-of-type {
		border-top: 0;
		padding-top: 0;
	}

	/* Record-state heading: the tablet equivalent of the h6 display tier. */
	#events .current-exhibition-status h5,
	#events .current-exhibition-status .record-heading {
		font-size: 2vw;
		line-height: 2.15vw;
		letter-spacing: -.08vw;
	}
}

/* Spacing audit is opt-in with ?spacing-audit=1. */
.spacing-audit .space-audit-badge {
	position: absolute;
	z-index: 9997;
	display: grid;
	place-items: center;
	width: var(--audit-size);
	height: var(--audit-size);
	background: var(--audit-color);
	color: black;
	font-size: clamp(8px, .65vw, 12px);
	line-height: 1;
	letter-spacing: 0;
	pointer-events: none;
}

.spacing-audit .space-audit-anchor {
	position: relative;
}

.spacing-audit .space-audit-badge {
	top: calc(var(--audit-size) * -1);
	left: 0;
}

.spacing-audit-legend {
	display: none;
}

.spacing-audit .spacing-audit-legend {
	position: fixed;
	right: 2vw;
	bottom: 2vw;
	z-index: 9998;
	display: flex;
	align-items: flex-end;
	gap: .75vw;
	padding: 1vw;
	border: 1px solid black;
	background: white;
}

.spacing-audit-legend span {
	display: grid;
	place-items: end center;
	width: var(--audit-size);
	height: var(--audit-size);
	background: var(--audit-color);
	color: black;
	font-size: clamp(8px, .65vw, 12px);
	line-height: 1;
}

.space-s1 { --audit-size: .5vw; --audit-color: #ff2b2b; }
.space-s2 { --audit-size: 1vw; --audit-color: #ff8c00; }
.space-s3 { --audit-size: 2vw; --audit-color: #ffc400; }
.space-s4 { --audit-size: 3vw; --audit-color: #38c95c; }
.space-s5 { --audit-size: 4vw; --audit-color: #14c2ba; }
.space-s6 { --audit-size: 5vw; --audit-color: #1677f2; }
.space-s7 { --audit-size: 6vw; --audit-color: #aa4dde; }

/* Desktop information spacing restoration from approved Preview 3 — 2026-07-23. */
@media (min-width: 1101px) {
  #about .bio-text h4,
  #about .statement-text h4,
  #studio .studio-text1 h4,
  #studio .studio-text2 h4,
  #studio .studio-text3 h4 {
    margin: 0;
  }

  #about .bio-text h4 + p,
  #about .statement-text h4 + p,
  #studio .studio-text1 h4 + p,
  #studio .studio-text2 h4 + p,
  #studio .studio-text3 h4 + ul {
    margin-top: var(--space-s3);
  }

  #about .statement-text {
    margin-top: var(--space-s6);
  }

  #studio .studio-text1 p,
  #studio .studio-text2 p,
  #studio .studio-text3 ul {
    margin-bottom: 0;
  }

  #resources .donate-col,
  #resources .contact-col {
    margin-top: 0;
  }
}

/* Desktop information relationship corrections — 2026-07-23. */
@media (min-width: 1101px) {
  /* The text rows establish the panel height; the gallery stretches to those rows. */
  #about .panel-content {
    align-items: stretch;
  }

  #about .bio-text {
    grid-row: 1;
  }

  #about .statement-text {
    grid-row: 2;
    margin-top: var(--space-s6);
  }

  #about .bio-gallery {
    grid-row: 1 / span 2;
    height: 100%;
    min-height: 0;
    align-self: stretch;
    contain: size;
    overflow: hidden;
  }

  /* Resource heading-to-content rhythm. */
  #resources .publications,
  #resources .donate,
  #resources .contact {
    row-gap: var(--space-s7);
  }

  #resources .publications-content,
  #resources .donate-col,
  #resources .contact-col {
    margin-top: 0;
  }

  /* Exhibition subheading-to-content rhythm. */
  #events .current-exhibitions > .exhibition-heading {
    margin-bottom: var(--space-s4);
  }

  /* Desktop resources: semantic headings retain the established spacing rhythm. */
  #resources .publications-col1 > .minor-heading + p,
  #resources .publications-col2 > .minor-heading + p,
  #resources .donate-col > .minor-heading + p {
    margin-top: var(--space-s3);
  }

  #resources .contact-col > .minor-heading + button {
    margin-top: var(--space-s3);
  }

  #resources .publications-col1 > .minor-heading:not(:first-child) {
    margin-top: var(--space-s7);
  }

  #resources .contact-col > .minor-heading {
    grid-column: 1 / -1;
  }
}

/* Tablet resource h3 hierarchy */
@media (min-width: 501px) and (max-width: 1100px) {
	#resources .minor-heading {
		font-size: 3.5vw;
		line-height: 3.5vw;
		letter-spacing: -.18vw;
	}
}