:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  background: #17110d;
  overflow-x: hidden;
}

/* Full-browser visual extension */
body::before {
  content: "";
  position: fixed;
  inset: -35px;
  z-index: -2;

  background-image:
    url("../images/nativity-stones-landing.png");

  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  filter:
    blur(28px)
    brightness(0.62)
    saturate(0.85);

  transform: scale(1.06);
}

/* Subtle darkening so the center artwork remains dominant */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(
      to bottom,
      rgba(35, 24, 17, 0.12) 0%,
      rgba(25, 17, 13, 0.22) 58%,
      rgba(10, 8, 7, 0.62) 100%
    );
}

.page-shell {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.artwork {
  position: relative;
  width: min(100%, 1087px);
  line-height: 0;
  box-shadow:
    0 0 45px rgba(0, 0, 0, 0.28);
}

.artwork img {
  display: block;
  width: 100%;
  height: auto;
}

.etsy-link {
  position: absolute;
  left: 7.5%;
  top: 48%;
  width: 46.5%;
  height: 4.1%;
  display: block;
  cursor: pointer;
}

.etsy-link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.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;
}

@media (max-width: 1087px) {
  body::before,
  body::after {
    display: none;
  }

  body {
    background: #17110d;
  }

  .artwork {
    box-shadow: none;
  }
}