@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Marcellus|Roboto:100,300,700");
.ratio-four-three {
  position: relative;
  padding-bottom: 75%;
}
.ratio-four-three::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: black;
  z-index: 0;
}
.ratio-four-three img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.5;
}

section:not(.toy-camera-gallery) .ratio-four-three img {
  opacity: 1;
}

/* CSS-based grayscale toggle (no plugin required) */
.grayscale {
  filter: grayscale(100%) contrast(1) saturate(0.95);
  transition: filter 180ms ease-in-out, opacity 120ms ease-in-out;
  will-change: filter;
}

/* When .grayscale and .grayscale-off are both present, show color (no filter) */
.grayscale.grayscale-off {
  filter: none;
}

/* Ensure both thumbnails and modal preview use the same classes */
img.tn.grayscale,
img.tn.grayscale.grayscale-off,
img.imagepreview.grayscale,
img.imagepreview.grayscale.grayscale-off {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/*-----------------------------------------------
*   BASE
/----------------------------------------------*/
body {
  background-color: #f1f1f1;
  color: #222;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  max-width: 1630px;
  min-width: 360px;
  margin: 0 auto;
  padding: 0 !important;
}

main {
  background-color: #f1f1f1;
}

h1, h2, h3, h4 {
  font-family: "Marcellus", serif;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

p {
  font-size: 1em;
  letter-spacing: 0.0625em;
  line-height: 1.8;
  padding-bottom: 10px;
}

section#gallery-section:not(.lumens-gallery) .mg-info {
  display: none;
}

.mg-text {
  color: #ccc !important;
}

.text {
  margin: 0 auto;
  display: block;
  position: relative;
  font-size: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 900;
  color: gold;
  padding: 0 10%;
  text-align: center;
  text-shadow: 2px 2px 1px rgb(0, 0, 0);
  text-wrap-mode: wrap;
}

.text.para {
  max-width: min(960px, 90vw);
  font-weight: 600;
  font-size: min(5vw, 4rem);
}

.text.header {
  margin: 0;
  font-size: min(12vw, 10rem);
  text-align: center;
  width: 100%;
}
.text.header h1 {
  font-size: min(12vw, 10rem);
  margin: 0;
  font-family: Roboto, sans-serif;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 2px 2px 1px rgb(0, 0, 0);
  color: gold;
  width: 100%;
}

a, a:hover {
  color: #9AAFED;
}

a.anchor {
  display: block;
  position: relative;
  top: -50px;
  visibility: hidden;
}

button:focus {
  outline: none;
}

hr {
  margin-bottom: 5px;
  width: 50%;
}

/*-----------------------------------------------
*   Header
/----------------------------------------------*/
#site-header {
  background-color: #f1f1f1;
}

.homepage-header {
  background-color: #f1f1f1;
  text-align: center;
  padding: 2rem 0 0;
}
.homepage-header .dlr-title {
  font-family: "Cinzel", serif;
  font-size: clamp(2rem, 7vw, 5rem);
  font-weight: 500;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
  color: #777;
  max-width: 90vw;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.2;
  word-break: break-word;
}
.homepage-header .dlr-subtitle {
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 4.5vw, 1.5rem);
  font-weight: 400;
  color: #555;
  max-width: 90vw;
  margin: -10px auto 0;
  line-height: 1.3;
  word-break: break-word;
}

.homepage-collage-wrapper {
  background-color: #f1f1f1;
  padding: 0 0 2rem;
}
.homepage-collage-wrapper .homepage-collage {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/*-----------------------------------------------
*   Navbar
/----------------------------------------------*/
#myNav {
  transition: transform 0.3s ease-in-out;
}

.empty-brand {
  display: inline-block;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: none;
  border: none;
}

.navbar-brand {
  display: none !important;
}

.navbar-default {
  background-color: #f1f1f1;
}

.navbar-wrapper {
  font-size: 0.85em;
  height: 50px;
  margin-top: 0;
  padding-top: 0;
}

.navbar-brand, .navbar-toggle.collapsed, .navbar-collapse,
.navbar-header {
  background-color: #f1f1f1 !important;
}

a.menu-item, a.nav-link {
  color: #222 !important;
}
a.menu-item:hover, a.nav-link:hover {
  color: #444 !important;
}

.navbar-default .navbar-nav > li:not(#home).active > a,
.navbar-default .navbar-nav > li:not(#home) > a.menu-item.active {
  background: hsl(0, 0%, 109.5098039216%);
}

.navbar-default .navbar-nav > li#home.active > a,
.navbar-default .navbar-nav > li#home > a.menu-item.active {
  background: transparent;
}

nav li.dropdown.nav-item.open a.menu-cat.dropdown-toggle, nav li.dropdown.nav-item a.menu-cat.dropdown-toggle {
  background-color: rgba(0, 0, 0, 0) !important;
  color: #222;
  cursor: pointer;
}

button.navbar-toggle:hover, button.navbar-toggle .selected {
  background-color: #f1f1f1 !important;
}

.icon-bar {
  background-color: #222 !important;
}

.navbar-collapse {
  border-top: 0;
  padding: 0;
}

.navbar-default, .navbar-toggle {
  border: none;
  opacity: 1;
  z-index: 999;
}

#site-header {
  position: relative;
  z-index: 1000;
  background-color: #f1f1f1;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

html:has(#gallery-section),
body:has(#gallery-section) {
  overscroll-behavior-y: none;
  background-color: #f1f1f1;
}

section#gallery-section {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

html:has(#biography),
html:has(#process) {
  background-color: #f1f1f1;
}

body:has(#biography),
body:has(#process) {
  background-color: #f1f1f1;
}

.navbar-wrapper {
  position: relative;
  z-index: 1000;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.navbar-fixed-top {
  width: 100vw !important;
  left: 0;
  right: 0;
}

.navbar-top {
  width: 100vw !important;
}

.navbar-placeholder {
  width: 100%;
}

.dropdown-menu {
  margin-top: 1em;
}

.navbar-nav > li > .dropdown-menu {
  border-top: 0;
}

.active {
  background-color: hsl(0, 0%, 104.5098039216%);
  width: inherit;
}

.dropdown-item.active {
  background-color: hsl(0, 0%, 104.5098039216%);
}

.selected, .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
  background-color: hsl(0, 0%, 109.5098039216%) !important;
}

.dropdown-menu, .dropdown-menu-left {
  background-color: rgb(253.75, 253.75, 253.75) !important;
  padding: 0;
}

.dropdown-item {
  display: block;
  padding: 1em;
  text-decoration: none !important;
  white-space: nowrap;
  width: auto;
}

@media (min-width: 801px) {
  .navbar-nav {
    display: table;
    float: none;
    margin: 0 auto;
    padding-right: 36px;
    table-layout: fixed;
  }
  .navbar-nav > li {
    margin: 0 4px;
  }
}
@media (max-width: 800px) {
  body {
    font-size: 1.5em;
  }
  .navbar-wrapper {
    height: 40px;
  }
  .navbar {
    min-height: 40px;
  }
  .navbar-toggle {
    float: none;
    margin: 7px auto;
    padding: 7px 10px;
  }
  .navbar-brand {
    padding: 10px 15px;
    height: 40px;
  }
  .navbar-collapse {
    border: none;
    box-shadow: none;
    max-height: 400px !important;
  }
  .navbar-wrapper {
    font-size: 1em;
  }
  .navbar-header {
    float: none;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-nav {
    float: none !important;
    margin: 7.5px 0;
  }
  .navbar-nav > li {
    float: none;
  }
  .navbar-nav > a {
    padding-bottom: 0.6em;
    padding-top: 0.6em;
  }
  .collapse.in {
    display: block !important;
  }
  .dropdown-menu {
    border: 0;
    box-shadow: none;
    float: none;
    font-size: 0.8em;
    position: static;
    width: auto;
  }
  .dropdown-item {
    -moz-box-shadow: inset 1px 0 white;
    -webkit-box-shadow: inset 1px 0 white;
    box-shadow: inset 1px 0 white;
    border-left: 1.5em solid transparent;
    padding: 0.5em 1em;
  }
  li.nav-item li.nav-item a.menu-item {
    margin-left: 15px;
  }
}
@media (max-width: 767px) {
  li.nav-item li.nav-item a.menu-item {
    padding: 15px;
  }
}
/*-----------------------------------------------
*   Main Content Area (HOMEPAGE)
/----------------------------------------------*/
.home-hero {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  image-rendering: optimizeQuality;
  margin: 0 auto;
  max-width: 100%;
  content: url("/img/dlr-masonry-layout-wide.jpg");
}

@media (max-width: 800px) {
  .home-hero {
    content: url("/img/dlr-masonry-layout-tall.jpg");
  }
}
h1.site-title {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 2.5em;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 1em auto 0.5em;
  padding: 0 1rem;
  color: #333;
}

/*-----------------------------------------------
*   Collage with Hotspots (HOMEPAGE)
/----------------------------------------------*/
/* Make the overlay align to the exact image box */
.collage-stack {
  position: relative;
}

/* Kill baseline/line-height gaps that cause 2–4px vertical drift */
.homepage-collage-wrapper picture {
  display: block;
  line-height: 0;
}

.homepage-collage-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

/* Overlay SVGs fill the wrapper */
.hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Match the same breakpoint logic as <picture> */
.hotspots--wide {
  display: none;
}

@media (min-width: 801px) {
  .hotspots--tall {
    display: none;
  }
  .hotspots--wide {
    display: block;
  }
}
/* Optional: visualize hit areas while tuning */
.hotspots[data-debug="1"] a rect {
  fill: rgba(255, 255, 255, 0.12);
  stroke: rgba(0, 0, 0, 0.25);
  stroke-width: 2;
}

/*-----------------------------------------------
*   Gallery
/----------------------------------------------*/
video.process-video {
  width: 100%;
  max-width: 640px;
  height: auto;
  grid-column: 1/-1;
  margin: 20px auto;
}

.flag > * {
  color: red;
  font-size: 1.2em;
  font-weight: bold !important;
}

/* Headers, Captions, Educational Text */
.image-with-caption {
  clear: both;
  position: relative;
  height: 100vh;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
.image-with-caption + p, .image-with-caption p {
  margin: 0 auto;
  max-width: 480px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 1em;
  text-align: left;
}
.image-with-caption figure {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  z-index: 1;
  will-change: transform, opacity;
}

.caption-image {
  opacity: 0.5;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caption {
  position: relative;
  top: calc(50vh - 150px);
  width: 100%;
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.caption h1, .caption p {
  margin: 0;
  pointer-events: auto;
  text-align: center;
}

.tagline {
  font-size: 0.8em;
  line-height: 0;
  text-align: center !important;
}

.on-image {
  display: none;
}

.below-image {
  display: block;
}

.scrunch {
  line-height: 1.5;
}

.price-box {
  background-color: #222;
  color: #f1f1f1;
  display: inline-block;
  font-style: italic;
  margin: 20px;
  padding: 60px;
  text-align: center;
  text-decoration: underline;
}

.price-box p:first-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
}

.price-box p, li {
  font-size: 1.8rem;
}

/* END: Headers, Captions, Educational Text */
.gallery {
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
  max-width: 100%;
  box-sizing: border-box;
}
.gallery ul.gallery-list {
  margin-top: 50px;
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.gallery .gallery-group {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.gallery .gallery-group.series-group {
  padding-top: 20px;
  border-top: 2px solid #ccc;
}
.gallery .gallery-group.series-group:first-of-type {
  border-top: none;
}
.gallery .gallery-row {
  display: grid;
  gap: 40px;
}
@media (min-width: 768px) {
  .gallery .gallery-row {
    grid-template-columns: repeat(12, 1fr);
  }
}
@media (max-width: 767px) {
  .gallery .gallery-row {
    grid-template-columns: 1fr;
  }
  .gallery .gallery-row li {
    grid-column: auto !important;
    max-width: 100%;
  }
}
.gallery .series-title {
  grid-column: 1/-1;
  font-family: "Marcellus", serif;
  font-size: 1.8em;
  color: #222;
  margin: 0 0 20px 0;
  text-align: center;
  font-weight: 400;
}
.gallery li:before {
  display: none;
}
.gallery li .tn-wrapper {
  padding: 20px 5px !important;
}
.gallery li .tn-wrapper .shadow-wrapper {
  display: inline-block;
  max-width: 100%;
}
.gallery li .tn-wrapper .shadow-wrapper img.tn {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}
@media (min-width: 768px) {
  .gallery li .tn-wrapper .shadow-wrapper img.tn {
    max-height: 80vh;
  }
}
.gallery li .tn-wrapper .shadow-wrapper img.tn.landscape, .gallery li .tn-wrapper .shadow-wrapper img.tn.portrait {
  max-width: 100%;
}
.gallery li .tn-wrapper .shadow-wrapper img.tn[data-panel-type=diptych], .gallery li .tn-wrapper .shadow-wrapper img.tn[data-panel-type=triptych] {
  max-width: 100%;
}
.gallery li .tn-wrapper .toggle-color-button {
  margin-top: 15px;
}
.gallery li .tn-wrapper .purchase-options-wrapper {
  margin-top: 20px;
}

.image-info {
  font-size: 0.8em;
  font-style: italic;
  line-height: 1.5;
  margin: 1em auto 0;
  padding: 0;
  text-align: left;
  vertical-align: top;
}
.image-info table {
  min-width: 320px;
  max-width: 360px;
}
.image-info table th {
  padding-left: 40px;
  font-weight: 300;
  vertical-align: top;
  width: 46%;
}
.image-info table tr.title-row.slr.toy {
  font-size: 2rem;
  text-align: center;
}
.image-info table td {
  color: #555;
}
.image-info table td:hover {
  color: #777;
}
.image-info a.btn {
  background-color: #f1f1f1;
  border-color: #555;
  color: #222;
  transition: background-color 0.15s ease-in-out;
}
.image-info a.btn:hover {
  background-color: #aaa;
}
.image-info table:has(.slr, .toy) {
  width: 200px;
  min-width: unset;
  max-width: unset;
}

/* New price chart 2024-12-04 */
div.price-chart-wrapper {
  color: #222;
  display: block;
  font-family: Roboto, sans-serif;
  margin: 2rem auto 1rem;
  font-size: 1.8rem;
  font-weight: 100;
}
div.price-chart-wrapper div {
  display: inline-block;
}
div.price-chart-wrapper .item-size:after {
  content: " - ";
}
div.price-chart-wrapper .item-size:not(:first-child) {
  margin-left: 20px;
}

.image-info table {
  margin: 0 auto;
}

.image-info .price-chart-wrapper {
  text-align: center;
  font-size: 1.5rem;
}

.modal .price-chart-wrapper {
  color: #f1f1f1;
}

/* END: New price chart */
.price-link {
  margin-top: 0.5em;
}
.price-link a {
  color: #222;
}

.sold-dot {
  vertical-align: -7.5%;
  height: 1em;
  width: 1em;
  background-color: #EE0000;
  border-radius: 50%;
  display: inline-block;
}

.toggle-color-button button {
  background-color: transparent;
  border-color: #666;
  color: #999;
  font-size: 12px;
  padding: 6px 10px;
  transition: 0.15s ease-out;
}
.toggle-color-button button:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: #999;
  color: #ccc;
}
.toggle-color-button button:focus, .toggle-color-button button:active, .toggle-color-button button:focus:active {
  color: #ccc;
  outline: none !important;
  box-shadow: none !important;
  border-color: #666;
}
@media (max-width: 767px) {
  .toggle-color-button button {
    background-color: #f9f9f9 !important;
    border-color: #ccc !important;
    color: #333 !important;
  }
  .toggle-color-button button:hover {
    background-color: #fff !important;
    border-color: #ddd !important;
    color: #000 !important;
  }
}

.purchase-options-wrapper button {
  background-color: transparent;
  border-color: #666;
  color: #999;
  transition: 0.15s ease-out;
}
.purchase-options-wrapper button:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: #999;
  color: #ccc;
}
.purchase-options-wrapper button:focus, .purchase-options-wrapper button:active, .purchase-options-wrapper button:focus:active {
  color: #ccc;
  outline: none !important;
  box-shadow: none !important;
  border-color: #666;
}

.purchase-label {
  display: inline-block;
  margin-right: 0.5rem;
  font-weight: 300;
  color: #999;
}

.purchase-price-btn {
  display: inline-block;
  margin: 0.5rem 0.6rem;
  padding: 4px 6px;
  background-color: transparent;
  border: 1px solid #666;
  border-radius: 4px;
  color: #999;
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.15s ease-out;
  text-decoration: none;
}
.purchase-price-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: #999;
  color: #ccc;
}
.purchase-price-btn:focus, .purchase-price-btn:active {
  outline: none;
  box-shadow: none;
}
.purchase-price-btn .size {
  display: inline-block;
  margin-right: 0.35rem;
  font-size: 11px;
}
.purchase-price-btn .price {
  display: inline-block;
  font-weight: 300;
  font-size: 11px;
}
@media (max-width: 767px) {
  .purchase-price-btn {
    background-color: #f9f9f9 !important;
    border-color: #ccc !important;
    color: #333 !important;
  }
  .purchase-price-btn:hover {
    background-color: #fff !important;
    border-color: #ddd !important;
    color: #000 !important;
  }
}

.purchase-options-link {
  display: inline-block;
  margin: 0.5rem 0.6rem;
  padding: 4px 6px;
  background-color: transparent;
  border: 1px solid #666;
  border-radius: 4px;
  color: #999;
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.15s ease-out;
  text-decoration: none;
}
.purchase-options-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: #999;
  color: #ccc;
  text-decoration: none;
}
.purchase-options-link:focus, .purchase-options-link:active {
  outline: none;
  box-shadow: none;
  text-decoration: none;
}
@media (max-width: 767px) {
  .purchase-options-link {
    background-color: #f9f9f9 !important;
    border-color: #ccc !important;
    color: #333 !important;
  }
  .purchase-options-link:hover {
    background-color: #fff !important;
    border-color: #ddd !important;
    color: #000 !important;
  }
}

.modal .purchase-price-btn {
  color: #ddd;
  border-color: #888;
}
.modal .purchase-price-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #bbb;
  color: #fff;
}
@media (max-width: 767px) {
  .modal .purchase-price-btn {
    border-color: #ccc;
    color: #333;
  }
  .modal .purchase-price-btn:hover {
    border-color: #ddd;
    color: #000;
    background-color: rgba(255, 255, 255, 0.1);
  }
}

.modal .purchase-options-link {
  color: #ddd;
  border-color: #888;
}
.modal .purchase-options-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #bbb;
  color: #fff;
}
@media (max-width: 767px) {
  .modal .purchase-options-link {
    border-color: #ccc;
    color: #333;
  }
  .modal .purchase-options-link:hover {
    border-color: #ddd;
    color: #000;
    background-color: rgba(255, 255, 255, 0.1);
  }
}

.modal .toggle-color-button button {
  color: #ddd;
  border-color: #888;
}
.modal .toggle-color-button button:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #bbb;
  color: #fff;
}

@media only screen and (min-width: 568px) {
  .tn {
    cursor: pointer;
  }
  tr.tn.title-row:hover td {
    font-weight: 300;
  }
  .allow-modal {
    display: none !important;
  }
  .button-wrapper {
    display: none;
  }
  .gallery li .tn-wrapper .purchase-options-wrapper {
    display: none;
  }
  .shadow-wrapper {
    display: inline-block;
    position: relative;
    width: auto;
    -moz-box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .shadow-wrapper::after {
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    -moz-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .shadow-wrapper:hover {
    -webkit-transform: scale(1.01, 1.01);
    transform: scale(1.01, 1.01);
  }
  .shadow-wrapper:hover::after {
    opacity: 1;
  }
  .modal-dialog {
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 95vw;
    height: 100vh;
    max-width: none;
    position: relative;
    pointer-events: none;
  }
  .modal.in .modal-dialog {
    transform: none;
    -ms-transform: none;
    -o-transform: none;
    -webkit-transform: none;
  }
  .modal-content {
    position: relative;
    background-color: transparent;
    border: none;
    box-shadow: none;
    width: auto;
    height: auto;
    max-width: 95vw;
    max-height: 95vh;
    overflow: visible;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal-body {
    padding: 40px 20px 20px 20px;
    position: relative;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    max-width: 95vw;
    max-height: 95vh;
    overflow: visible;
    flex-direction: column;
  }
  .modal-body .close {
    color: #fff;
    font-size: 2em;
    font-weight: 100;
    position: absolute;
    right: -8px;
    top: -8px;
    opacity: 1;
    z-index: 10;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    padding: 10px;
  }
  .modal-body .modal-image-container {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 75vw;
    max-height: 75vh;
  }
  .modal-body img.imagepreview {
    max-width: 75vw;
    max-height: 75vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  .modal-body .modal-controls-container {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    width: 100%;
  }
  .modal-body .modal-buttons-row {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .modal-body .toggle-color-button,
  .modal-body .purchase-options-wrapper {
    margin: 0;
    flex: 0 0 auto;
  }
  .modal-body .price-chart-wrapper {
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .modal-body .mg-info {
    margin: 0;
    width: 100%;
    text-align: center;
  }
}
@media only screen and (min-width: 568px) and (min-width: 1100px) {
  .modal-body.side-by-side {
    flex-direction: row;
    align-items: center;
  }
  .modal-body.side-by-side .modal-controls-container {
    width: auto;
    align-items: center;
  }
  .modal-body.side-by-side .modal-buttons-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 3rem;
  }
  .modal-body.side-by-side .toggle-color-button {
    width: auto;
    text-align: center;
  }
  .modal-body.side-by-side .purchase-options-wrapper {
    width: auto;
    text-align: center;
    background-color: #1a1a1a;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .modal-body.side-by-side .purchase-options-wrapper .purchase-label {
    font-size: 1.1em;
    font-weight: 500;
    color: #fff;
    margin: 0;
  }
  .modal-body.side-by-side .purchase-options-wrapper form {
    display: block !important;
    margin: 0.25rem 0;
    width: 100%;
    text-align: center;
  }
  .modal-body.side-by-side .purchase-options-wrapper button {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .modal-body.side-by-side .price-chart-wrapper {
    display: block;
    text-align: center;
    white-space: normal;
    line-height: 1.8;
    width: 100%;
  }
  .modal-body.side-by-side .price-chart-wrapper div {
    display: inline;
  }
  .modal-body.side-by-side .price-chart-wrapper .item-size:not(:first-child) {
    margin-left: 0 !important;
  }
  .modal-body.side-by-side .price-chart-wrapper .item-size::after {
    content: " - ";
  }
  .modal-body.side-by-side .price-chart-wrapper .item-price::after {
    content: "\a";
    white-space: pre;
  }
  .modal-body.side-by-side .price-chart-wrapper .item-price:last-child::after {
    content: "";
  }
}
@media only screen and (min-width: 568px) and (max-width: 1099px) {
  .modal-body {
    flex-direction: column;
  }
  .modal-body .modal-controls-container {
    width: 100%;
  }
}
@media only screen and (min-width: 568px) {
  div.modal-body:has(div.purchase-options-wrapper[style*="display: none"]) div.toggle-color-button {
    width: auto !important;
  }
  .modal-backdrop {
    opacity: 1 !important;
  }
  body.success-modal-open .modal-backdrop {
    opacity: 0.8 !important;
  }
  body.modal-open #back2Top {
    display: none !important;
  }
  #purchaseSuccessModal .modal-dialog {
    width: 600px;
    margin: 30px auto;
    height: auto;
    pointer-events: auto;
  }
  #purchaseSuccessModal .modal-content {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    display: block;
  }
  #purchaseSuccessModal .modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
  }
  #purchaseSuccessModal .modal-header .modal-title {
    margin: 0;
    line-height: 1.42857143;
    font-size: 18px;
    color: #222;
  }
  #purchaseSuccessModal .modal-header .close {
    position: static;
    color: #000;
    opacity: 0.2;
    font-size: 21px;
    font-weight: bold;
    margin-top: -2px;
  }
  #purchaseSuccessModal .modal-header .close:hover {
    opacity: 0.5;
  }
  #purchaseSuccessModal .modal-body {
    padding: 15px;
    display: block;
    flex-direction: row;
    gap: 0;
  }
  #purchaseSuccessModal .modal-body #purchaseSuccessMessage {
    color: #222;
    line-height: 1.6;
  }
  #purchaseSuccessModal .modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
  }
  #purchaseSuccessModal .modal-footer .btn {
    margin-bottom: 0;
  }
}
/*-----------------------------------------------
*   Processes (NEW)
/----------------------------------------------*/
body:has(#process.page), body:has(#biography.page) {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #000 !important;
  max-width: unset;
}

/* Common GSAP for text-over-image-fade */
#process.page .scroll-buffer, #biography.page .scroll-buffer {
  height: 0;
  margin-bottom: -100px;
}
#process.page .gs-container, #biography.page .gs-container {
  position: relative;
  height: 100%;
  z-index: 1;
}
#process.page .bg-wrap, #biography.page .bg-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}
#process.page .bg, #biography.page .bg {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#process.page .bg:first-child, #biography.page .bg:first-child {
  top: 0px;
}
@media screen and (max-width: 800px) {
  #process.page .bg, #biography.page .bg {
    top: 40px;
  }
}
#process.page .bg, #biography.page .bg {
  pointer-events: none; /* makes sure it's not intercepting scroll */
  opacity: 0;
  visibility: hidden;
  transition: none;
}
#process.page .text-wrap, #biography.page .text-wrap {
  margin: 0 auto;
  width: 100vw;
}
#process.page .text, #biography.page .text {
  height: 100vh;
}
#process.page .gs-spacer, #biography.page .gs-spacer {
  position: relative;
  height: 33vh;
  background: none;
  z-index: -1;
}

#process.page .bg.one {
  background-image: url("../img/gsap-proc/001_processes-1.jpg");
}
#process.page .bg.two {
  background-image: url("../img/gsap-proc/002_diana-and-holga-cameras.jpg");
}
#process.page .bg.three {
  background-image: url("../img/gsap-proc/003-diana-toy-camera.jpg");
}
#process.page .bg.four {
  background-image: url("../img/gsap-proc/004-holga-toy-camera.jpg");
}
#process.page .bg.five {
  background-image: url("../img/gsap-proc/005-tulip-tree.jpg");
}
#process.page .bg.six {
  background-image: url("../img/gsap-proc/006_lens-closeup.jpg");
}
#process.page .bg.seven {
  background-image: url("../img/gsap-proc/007_35mm-pic-1.jpg");
}
#process.page .bg.eight {
  background-image: url("../img/gsap-proc/008_35mm-pic-2.jpg");
}
#process.page .bg.nine {
  background-image: url("../img/gsap-proc/009_spiral-reel.jpg");
}
#process.page .bg.ten {
  background-image: url("../img/gsap-proc/010_negative.jpg");
}
#process.page .bg.eleven {
  background-image: url("../img/gsap-proc/011_darkroom-solution.jpg");
}
#process.page .bg.twelve {
  background-image: url("../img/gsap-proc/012_film-tray-picture.jpg");
}
#process.page .bg.thirteen {
  background-image: url("../img/gsap-proc/013_print-in-tray.jpg");
}
#process.page .bg.fourteen {
  background-image: url("../img/gsap-proc/014_hand-painted-palette.jpg");
}
#process.page .bg.fifteen {
  background-image: url("../img/gsap-proc/015_hand-painting-01.jpg");
}
#process.page .bg.sixteen {
  background-image: url("../img/gsap-proc/016_painting-supplies.jpg");
}
#process.page .bg.seventeen {
  background-image: url("../img/gsap-proc/017_color-pencils-with-shavings.jpg");
}
#process.page .bg.eighteen {
  background-image: url("../img/gsap-proc/018_indelibles_1.jpg");
}
#process.page .bg.nineteen {
  background-image: url("../img/gsap-proc/019_alchemic-print.jpg");
}
#process.page .bg.twenty {
  background-image: url("../img/gsap-proc/020_gum-prints-and-brushes.jpg");
}
#process.page .bg.twenty-one {
  background-image: url("../img/gsap-proc/021_brushes.jpg");
}
#process.page .bg.twenty-two {
  background-image: url("../img/gsap-proc/022_cyanotype-process.jpg");
}
#process.page .bg.twenty-three {
  background-image: url("../img/gsap-proc/023_hand-painting-3.jpg");
}
#process.page .bg.twenty-four {
  background-image: url("../img/gsap-proc/024_lily-negatives.jpg");
}
#process.page .bg.twenty-five {
  background-image: url("../img/gsap-proc/025_gum-print-19th-century.jpg");
}
#process.page .bg.twenty-six {
  background-image: url("../img/gsap-proc/026_gum-print-materials.jpg");
}
#process.page .bg.twenty-seven {
  background-image: url("../img/gsap-proc/027_ultraviolet-light.jpg");
}
#process.page .bg.twenty-eight {
  background-image: url("../img/gsap-proc/028_day-lily-1.jpg");
}
#process.page .bg.twenty-nine {
  background-image: url("../img/gsap-proc/029_a-childs-wagon.jpg");
}
#process.page .bg.thirty {
  background-image: url("../img/gsap-proc/030_amaryllis-bloom-4.jpg");
}
#process.page .bg.thirty-one {
  background-image: url("../img/gsap-proc/031_lumens-1.jpg");
}
#process.page .bg.thirty-two {
  background-image: url("../img/gsap-proc/032_lumens-frame-1.jpg");
}
#process.page .bg.thirty-three {
  background-image: url("../img/gsap-proc/033_lumens-3.jpg");
}
#process.page .bg.thirty-four {
  background-image: url("../img/gsap-proc/034_lumen-hosta-leaf-3.jpg");
}

@media only screen and (min-width: 640px) {
  #process.page {
    font-weight: 100;
  }
  #process.page h2 {
    font-size: 2.5em;
  }
  #process.page p {
    font-size: 1.25em;
    line-height: 1.5;
  }
}
@media only screen and (min-width: 960px) {
  #process.page h2 {
    font-size: 3em;
  }
  #process.page p {
    font-size: 1.5em;
    font-weight: 300;
    line-height: 1.5;
  }
}
.title h1 {
  margin: 0 auto;
  padding: 20px 0;
  text-align: center;
}

/*-----------------------------------------------
*   Bio
/----------------------------------------------*/
div#artist-statement-wrapper {
  position: relative;
  max-width: 640px;
  margin: 0 auto -100px;
  padding: 120px 15px;
}

/*-----------------------------------------------
*   Bio - GSAP
/----------------------------------------------*/
#biography .bg[data-index="0"] {
  background-image: url("../img/bio/bio-0.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#biography .bg[data-index="1"] {
  background-image: url("../img/bio/bio-1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#biography .bg[data-index="2"] {
  background-image: url("../img/bio/bio-2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#biography .bg[data-index="3"] {
  background-image: url("../img/bio/bio-3.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#biography .bg[data-index="4"] {
  background-image: url("../img/bio/bio-4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#biography .bg[data-index="5"] {
  background-image: url("../img/bio/bio-5.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#biography .bg[data-index="6"] {
  background-image: url("../img/bio/bio-6.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#biography .bg[data-index="7"] {
  background-image: url("../img/bio/bio-7.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#biography .bg[data-index="8"] {
  background-image: url("../img/bio/bio-8.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*-----------------------------------------------
*  Contact Form — container, layout, fields, status
*----------------------------------------------*/
#contactForm {
  /* Card container */
  max-width: 760px;
  margin: 3rem auto;
  padding: 30px;
  background: #ccc;
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  /* Grid layout */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "label-name     label-email" "name           email" "label-message  label-message" "message        message" "turnstile      turnstile" ".              submit" "status         status";
  column-gap: 20px;
  row-gap: 8px;
  /* Status (no layout shift; fades in/out) */
}
#contactForm #formStatus {
  text-align: center;
  grid-area: status;
  width: fit-content;
  height: 44px; /* fixed height to prevent expansion */
  min-height: 44px; /* ensure minimum space is reserved */
  margin: 12px auto 0;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 2rem;
  line-height: 1.2; /* adjusted for better vertical centering */
  display: flex; /* for centering text */
  align-items: center; /* vertical centering */
  justify-content: center; /* horizontal centering */
  opacity: 0;
  transition: opacity 0.25s ease;
  border: 1px solid transparent;
}
#contactForm #formStatus.is-visible {
  opacity: 1;
}
#contactForm #formStatus.is-success {
  background: #e8f7ee;
  color: #0e6b2f;
  border-color: #bfe8cb;
}
#contactForm #formStatus.is-error {
  background: #fdeaea;
  color: #7a0b0b;
  border-color: #f3b1b1;
}
#contactForm {
  /* Labels */
}
#contactForm label {
  font-family: "Roboto", sans-serif;
  font-weight: 300; /* as requested */
  font-size: 1.8rem; /* as requested */
  color: #333;
  margin: 0 0 4px 0; /* tight gap to fields */
  text-align: left;
  align-self: auto;
}
#contactForm label[for=name] {
  grid-area: label-name;
}
#contactForm label[for=email] {
  grid-area: label-email;
}
#contactForm label[for=message] {
  grid-area: label-message;
  margin-top: 14px;
}
#contactForm label { /* group spacing */ }
#contactForm {
  /* Field placement */
}
#contactForm #name {
  grid-area: name;
}
#contactForm #email {
  grid-area: email;
}
#contactForm #message {
  grid-area: message; /* spans both columns */
  min-height: 260px;
  resize: vertical;
}
#contactForm {
  /* Cloudflare Turnstile widget */
}
#contactForm .cf-turnstile {
  grid-area: turnstile;
  margin: 20px 0;
}
#contactForm {
  /* Inputs & textarea */
}
#contactForm input[type=text],
#contactForm input[type=email],
#contactForm textarea {
  width: 100%;
  margin: 0;
  padding: 0.9rem 1rem; /* taller fields */
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 1.5rem; /* as requested */
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#contactForm input[type=text]:focus,
#contactForm input[type=email]:focus,
#contactForm textarea:focus {
  border-color: #999;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
#contactForm {
  /* Submit button */
}
#contactForm button[type=submit] {
  grid-area: submit;
  justify-self: end;
  padding: 0.9rem 1.4rem; /* increased padding for larger text */
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 1.8rem; /* same as labels */
  font-weight: 300; /* same as labels */
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
#contactForm button[type=submit]:hover {
  background: #eee;
  border-color: #bbb;
}

/* Mobile layout */
@media (max-width: 640px) {
  #contactForm {
    grid-template-columns: 1fr;
    grid-template-areas: "label-name" "name" "label-email" "email" "label-message" "message" "turnstile" "submit" "status";
  }
  #contactForm button[type=submit] {
    justify-self: stretch;
  }
}
/*-----------------------------------------------
*   Footer
/----------------------------------------------*/
footer {
  position: relative;
}

#copyright {
  position: absolute;
  bottom: 10px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.copyright {
  font-size: 0.8em;
  text-align: center;
}

#back2Top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  z-index: 999;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  display: flex;
}
#back2Top svg {
  display: block;
  margin: auto;
}
#back2Top:hover {
  background-color: rgba(255, 255, 255, 0.85);
  color: black;
}
#back2Top:hover svg path {
  stroke: black;
}
#back2Top:hover {
  transform: scale(1.1);
}

/*-----------------------------------------------
*   MEDIA QUERIES
/----------------------------------------------*/
@media only screen and (min-width: 400px) {
  .page {
    font-size: 1.25em;
  }
}
@media only screen and (min-width: 480px) {
  .on-image {
    display: block;
  }
  .below-image {
    display: none;
  }
}
@media only screen and (min-width: 640px) {
  .img-jumbo {
    width: 66%;
  }
  .caption h1 {
    font-size: 3em;
  }
  .caption h2 {
    font-size: 1.2em;
  }
  .caption p {
    font-size: 0.9em;
  }
}
@media only screen and (min-width: 768px) {
  .modal-dialog {
    width: auto;
  }
  #fake-float:before {
    content: "";
    display: block;
    float: left;
    height: 265px;
    margin-bottom: 3em;
    width: 325px;
  }
  #fake-float {
    text-align: left;
  }
  #fake-float h2 {
    margin-top: 1em;
  }
  #bio-pic-wrapper {
    float: left;
    left: 0px;
    padding-bottom: 0;
    padding-right: 16px;
    position: absolute;
    top: 10px;
    width: 325px;
  }
}
@media only screen and (min-width: 920px) {
  #fake-float:before {
    margin-bottom: 3em;
  }
}
@media only screen and (min-width: 992px) {
  .caption h1 {
    font-size: 4em;
  }
  .caption p {
    font-size: 1.5em;
    max-width: 640px;
  }
  .image-with-caption + p {
    font-size: 1.5em;
    max-width: 640px;
  }
}
@media (prefers-reduced-data: reduce) {
  #process.page .bg {
    background-image: none !important;
  }
  #process.page .bg.one,
  #process.page .bg.two,
  #process.page .bg.three,
  #process.page .bg.four,
  #process.page .bg.five {
    background-image: unset !important;
  }
}
/* ===== Sticky footer scaffold (append at end of main.scss) ===== */
/* Make the page a full-height flex column */
html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* Let <main> grow to fill space and push footer down */
main {
  flex: 1 0 auto;
}

/* Footer naturally sits at the bottom on short pages */
footer {
  margin-top: auto;
  position: relative;
  padding: 12px 0 28px;
}

/* Copyright: remove absolute positioning */
#copyright {
  position: static;
  margin: 0 auto;
  transform: none;
  text-align: center;
}

/* Optional tidy: remove spacer and tighten the footer rule */
.filler {
  display: none;
}

footer > hr {
  margin: 0 0 12px;
}

/* Use your site background for the footer area */
footer {
  background: #f1f1f1;
}

/* Keep GSAP’s pinned background from bleeding behind content */
main {
  position: relative;
}

/* If any GSAP bg has a fallback color, make it transparent */
.bg, .bg-wrap {
  background-color: transparent;
}

.navbar-default .navbar-nav .open .dropdown-menu {
  background: transparent !important;
  border: none;
  box-shadow: none;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  background: transparent !important;
}

.navbar-default .navbar-nav .open .dropdown-menu > li.active > a,
.navbar-default .navbar-nav .open .dropdown-menu > li > a.active {
  background: #fff !important;
  color: inherit;
}

/* MOBILE (≤800px): transparent panel; only active submenu item white */
@media (max-width: 800px) {
  .navbar-default .navbar-nav .open .dropdown-menu,
  .navbar-default .navbar-nav .dropdown-menu {
    background: transparent !important;
    border: 0;
    box-shadow: none;
  }
  .navbar-default .navbar-nav .dropdown-menu > li > a {
    background: transparent !important;
  }
  .navbar-default .navbar-nav .dropdown-menu > li.active > a,
  .navbar-default .navbar-nav .dropdown-menu > li > a.active {
    background: #fff !important;
    color: inherit;
    border-radius: 4px; /* optional */
  }
}
/* DESKTOP (≥801px): panel matches site background */
@media (min-width: 801px) {
  .navbar-default .navbar-nav .dropdown-menu,
  .navbar-default .navbar-nav .open .dropdown-menu {
    background: #f1f1f1 !important; /* override any earlier transparent rules */
    border: 0;
    box-shadow: none;
  }
  .navbar-default .navbar-nav .dropdown-menu > li > a {
    background: transparent;
  }
  .navbar-default .navbar-nav .dropdown-menu > li.active > a,
  .navbar-default .navbar-nav .dropdown-menu > li > a.active {
    background: #fff;
  }
}
/* Ensure the overlay is on top and actually receives touches */
.collage-stack {
  position: relative;
}

.homepage-collage-wrapper picture {
  display: block;
  line-height: 0;
  position: relative;
  z-index: 1;
}

.hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: auto;
}

/* Make the shapes touchable even when visually invisible */
.hotspots a rect,
.hotspots a polygon,
.hotspots a path {
  fill: #fff;
  fill-opacity: 0.001;
  pointer-events: all;
  stroke: none;
  outline: none;
  transition: fill-opacity 0.12s ease;
}

.hotspots a:hover rect,
.hotspots a:focus rect,
.hotspots a:hover polygon,
.hotspots a:focus polygon,
.hotspots a:hover path,
.hotspots a:focus path {
  fill-opacity: 0.08;
  stroke: rgba(0, 0, 0, 0.25);
  stroke-width: 2;
}

/* Ensure footer stays below Bootstrap modals */
footer {
  z-index: 1 !important;
}

/* Gallery status indicators */
.pending-dot {
  vertical-align: -7.5%;
  height: 1em;
  width: 1em;
  background-color: #FFD700; /* Gold/yellow color */
  border-radius: 50%;
  display: inline-block;
}

@media (min-width: 768px) {
  .gallery {
    opacity: 0;
    transition: opacity 0.3s ease-in;
  }
}/*# sourceMappingURL=main.css.map */