/**
  All hyperlinks change color from red->cyan
  a: rgb(255,10,19); rgb(0,200,200);
  p: rgb(220,200,250);
*/
a { text-decoration: none; color:rgb(2,194,121); }
a:visited { text-decoration: none; color:rgb(2,194,121); }
a:focus { text-decoration: none; color:rgb(2,194,121); }
a:hover { text-decoration: none; color:#000; }
a:hover, .navBtn:active { text-decoration: none; color:rgb(0,200,200); }
body { color: rgb(220,200,250) }
.main { width: 100%; }
html {
  height: 100%;
  margin: 0;
  background-color: rgb(0, 0, 0);
  box-sizing: border-box;
}
.flex-container{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.bar {
  display: flex;
  width: 100%;
  background: #222;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}
.pages {
  flex: 1 0 auto;
  text-align: center;
} 
.nav {
  padding: 2%;
}
.title {
  order: 1;
  text-align: center;
}
.header{
  order: 2;
  text-align: center;
}
.flex-content{
  order: 3;
  flex: 3 1 auto;
  text-align: center;
}
#blogposts{
  display: block;
  margin-right: auto;
  width: 100%;
}
.blogpost{
  width: 90%;
  max-width: 700px;
}
.announcements{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.announcements h3:first-child {
  margin-bottom: 20px;
}
.project-box {
  background-color: rgba(255, 193, 7, 0.9);
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  margin-bottom: 15px;
  padding: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.project-box:hover {
  transform: translateY(-5px);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
}
.project-box a {
  color: #000;
  font-weight: bold;
  display: block;
  width: 100%;
  height: 100%;
}
.project-box a:hover {
  color: #222;
}
.project-box h3 {
  margin: 0;
  padding: 5px;
}
.featured-section { width: min(96%, 1120px); margin: 32px auto 52px; text-align: center; }
.featured-section h2 { margin-bottom: 18px; }
.featured-carousel { display: grid; grid-template-columns: 1fr; width: 100%; min-height: clamp(400px, 68vh, 720px); align-items: center; }
.carousel-loading { display: grid; width: 100%; min-height: clamp(400px, 68vh, 720px); place-items: center; border: 1px solid rgba(2, 194, 121, 0.45); border-radius: 14px; background: #0b0b0b; }
.carousel-viewport { grid-area: 1 / 1; width: 100%; min-width: 0; }
.featured-slide { display: grid; position: relative; width: 100%; height: clamp(400px, 68vh, 720px); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding: 20px 54px 16px; place-items: center; overflow: hidden; border: 1px solid rgb(2, 194, 121); border-radius: 14px; box-sizing: border-box; color: inherit; background: radial-gradient(circle at center, #171717 0, #080808 72%); cursor: pointer; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45); }
.featured-slide img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; object-position: center center; }
.featured-caption { position: static; width: 100%; box-sizing: border-box; padding: 10px 8px 2px; color: #fff; font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.4; text-align: center; }
.carousel-control { z-index: 2; grid-area: 1 / 1; width: 44px; height: 58px; padding: 0; border: 1px solid rgb(2, 194, 121); border-radius: 8px; color: #fff; background: rgba(0, 0, 0, 0.76); cursor: pointer; font-size: 34px; line-height: 1; }
.carousel-previous { justify-self: start; margin-left: 12px; }
.carousel-next { justify-self: end; margin-right: 12px; }
.carousel-control:hover, .carousel-control:focus-visible { color: #000; background: rgb(0, 200, 200); }
.carousel-dots { display: flex; justify-content: center; gap: 9px; margin-top: 14px; }
.carousel-dot { width: 11px; height: 11px; padding: 0; border-radius: 50%; font-size: 0; }
.carousel-dot.active { background: rgb(2, 194, 121); }
.gallery-link { display: inline-block; margin-top: 18px; }
.paintings-grid { display: grid; width: min(94%, 1200px); grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0 auto 48px; }
.painting-container { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border-radius: 9px; background: #090909; }
.painting-image-link { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: #111; cursor: pointer; }
.painting-image-button:hover img, .painting-image-button:focus-visible img { opacity: 0.82; transform: scale(1.015); }
.painting-container img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; transition: opacity 0.2s, transform 0.2s; }
.painting-description { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; min-height: 62px; padding: 10px 12px; border: 1px solid rgb(2, 194, 121); border-radius: 0 0 8px 8px; box-sizing: border-box; color: rgb(220, 200, 250); background: rgba(2, 194, 121, 0.12); text-align: left; }
.painting-description.not-for-sale { grid-template-columns: minmax(0, 1fr) auto; }
.description-text { min-width: 0; line-height: 1.3; }
.price-text { color: rgb(2, 194, 121); font-weight: bold; white-space: nowrap; }
.buy-button { min-width: 66px; padding: 9px 14px; border: 0; border-radius: 5px; color: #00150d; background: rgb(2, 194, 121); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.buy-button:hover, .buy-button:focus-visible { background: rgb(0, 220, 190); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
.inquiry-button { box-sizing: border-box; text-align: center; }
.inquiry-button:hover, .inquiry-button:focus-visible { color: #00150d; }
.buy-button:disabled, .painting-image-button:disabled, .featured-slide:disabled { cursor: wait; opacity: 0.68; }
.modal-open { overflow: hidden; }
.artwork-modal { position: fixed; z-index: 1000; inset: 0; display: grid; padding: 28px; place-items: center; background: rgba(0, 0, 0, 0.82); }
.artwork-modal-panel { display: grid; position: relative; width: min(94vw, 1120px); max-height: 88vh; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); overflow: hidden; border: 1px solid rgb(2, 194, 121); border-radius: 12px; background: #0c0c0c; box-shadow: 0 22px 70px rgba(0, 0, 0, 0.7); }
.artwork-modal-stage { display: grid; position: relative; min-width: 0; min-height: 420px; padding: 24px; place-items: center; touch-action: pan-y; background: radial-gradient(circle at center, #202020 0, #080808 76%); }
.artwork-modal-image { display: block; width: 100%; height: 100%; max-height: calc(88vh - 48px); object-fit: contain; object-position: center; }
.artwork-modal-info { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 14px; padding: 34px 24px; border-left: 1px solid rgba(2, 194, 121, 0.45); text-align: left; }
.artwork-modal-info h2, .artwork-modal-info p { margin: 0; }
.artwork-modal-price { color: rgb(2, 194, 121); font-size: 20px; font-weight: 700; }
.artwork-share-button { width: fit-content; padding: 8px 12px; border: 1px solid rgb(2, 194, 121); border-radius: 5px; color: rgb(2, 194, 121); background: transparent; font-family: inherit; font-weight: 700; cursor: pointer; }
.artwork-share-button:hover, .artwork-share-button:focus-visible { color: #00150d; background: rgb(0, 220, 190); }
.artwork-modal-metadata { color: rgb(220, 200, 250); line-height: 1.45; }
.artwork-modal-status { width: fit-content; padding: 4px 9px; border: 1px solid currentColor; border-radius: 999px; color: rgb(2, 194, 121); font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.artwork-status-sold, .artwork-status-reserved { color: rgb(190, 190, 205); }
.artwork-modal-description, .artwork-modal-prints { color: rgb(210, 210, 220); font-size: 14px; line-height: 1.55; }
.artwork-modal-prints { padding-top: 12px; border-top: 1px solid rgba(2, 194, 121, 0.3); }
.artwork-modal-buy { width: 100%; margin-top: 8px; }
.artwork-modal-availability { color: rgb(190, 190, 205); line-height: 1.45; }
.artwork-modal-close { position: absolute; z-index: 2; top: 10px; right: 10px; width: 38px; height: 38px; padding: 0; border: 1px solid rgb(2, 194, 121); border-radius: 50%; color: #fff; background: rgba(0, 0, 0, 0.8); font-size: 28px; line-height: 1; cursor: pointer; }
.artwork-modal-close:hover, .artwork-modal-close:focus-visible { color: #000; background: rgb(0, 200, 200); }
.artwork-modal-navigation { position: absolute; z-index: 2; top: 50%; width: 42px; height: 56px; padding: 0; border: 1px solid rgb(2, 194, 121); border-radius: 8px; color: #fff; background: rgba(0, 0, 0, 0.72); font-size: 32px; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.artwork-modal-navigation:hover, .artwork-modal-navigation:focus-visible { color: #000; background: rgb(0, 200, 200); }
.artwork-modal-previous { left: 10px; }
.artwork-modal-next { right: 10px; }
.artwork-error { grid-column: 1 / -1; padding: 24px; text-align: center; }
@media (min-width: 640px) { .paintings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .paintings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .featured-section { width: 96%; }
  .featured-carousel, .carousel-loading { min-height: clamp(360px, 66vh, 520px); }
  .featured-slide { height: clamp(360px, 66vh, 520px); gap: 8px; padding: 14px 42px 12px; }
  .featured-caption { padding: 8px 4px 0; font-size: 15px; }
  .carousel-control { width: 38px; height: 50px; }
  .carousel-previous { margin-left: 8px; }
  .carousel-next { margin-right: 8px; }
}
@media (max-width: 760px) {
  .artwork-modal { padding: 14px; }
  .artwork-modal-panel { width: min(96vw, 680px); max-height: 92vh; grid-template-columns: 1fr; grid-template-rows: minmax(280px, 1fr) auto; overflow-y: auto; }
  .artwork-modal-stage { min-height: 300px; padding: 18px; }
  .artwork-modal-image { max-height: 62vh; }
  .artwork-modal-info { gap: 8px; padding: 16px 20px 20px; border-top: 1px solid rgba(2, 194, 121, 0.45); border-left: 0; }
  .artwork-modal-info h2 { padding-right: 42px; font-size: 20px; }
  .artwork-modal-buy { width: auto; align-self: stretch; }
}