*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  /* My Colors */
  --color-white: hsl(0, 0%, 100%);
  --color-ivory-lighter: hsl(60, 100%, 99%);  /* #fffffa */
  --color-ivory: hsl(60, 100%, 97%);  /* #fffff0 */
  --color-ivory-darker: hsl(60, 60%, 94%);
  --color-tutu: hsl(300, 100%, 97%);
  --color-blushing-pink-lightest: hsl(0, 38%, 99%);
  --color-blushing-pink-lighter: hsl(0, 38%, 97%);
  --color-blushing-pink: hsl(0, 38%, 88%);  /* #ecd5d5 */
  --color-blushing-pink-dark: hsl(0, 38%, 75%);
  --color-blushing-pink-darker: hsl(0, 38%, 63%);  /* #c57d7d */
  --color-blushing-pink-darkest: hsl(0, 38%, 51%);
  --color-blush-pink: hsl(350, 85%, 90%);
  --color-blush-pink-lighter: hsl(321, 24%, 85%);
  --color-rosewood: hsl(0, 24%, 34%);  /* #6c4242 */
  --color-pharlap: hsl(5, 17%, 59%);
  --color-double-spanish-white: hsl(31, 49%, 84%);
  --color-gold: hsl(46, 78%, 78%);  /* #f3de9b */
  --color-gold-darker: hsl(46, 78%, 66%);  /* #eccc65 */
  --color-black: hsl(0, 0%, 0%);
  --color-au-chico: hsl(3, 28%, 46%);
  --color-malta: hsl(31, 19%, 67%);
  --color-russett: hsl(4, 16%, 40%);
  --color-chocolate: hsl(4, 96%, 9%);
  --color-tree-trunk: hsl(339, 20%, 20%);
  --color-deep-indigo: hsl(231, 41%, 19%);
  /* Primary Dashboard Colors */
  --color-navy: hsl(210, 27%, 23%); /* #2d3e50 */
  --color-chestnut: hsl(0, 26%, 33%);  /* #6c4242 */
  --color-linen: hsl(42, 40%, 93%);  /* #f5efe6 */
  /* Secondary/accent Dashboard Colors */
  --color-teal: hsl(168, 28%, 43%);  /* #4f8a83 */
  --color-rose: hsl(22, 33%, 75%);  /* #d7b5a4 */
  --color-coral: hsl(13, 67%, 63%);  /* #e07a5f */
  --color-rich-gold: hsl(46, 49%, 55%);  /* #c9a448 */
  /* Main Elements */
  --main-bg-color: var(--color-blushing-pink);
  --primary-text-color: var(--color-black);
  /* Save the Date Elements */
  --std-bg-color: var(--color-blushing-pink);
  --std-border-color: var(--color-ivory);
  --std-outline-color: var(--color-gold);
  --std-inner-shadow-color: var(--color-blushing-pink-lighter);
  --std-inset-color: var(--color-blushing-pink-lighter);
  --std-text-bevel-color: var(--color-blushing-pink-lightest);
  --std-text-inset-color: var(--color-blushing-pink-darker);
  --std-text-inset-shadow-color: var(--color-black);
  --std-shadow-color: var(--color-tree-trunk);
  /* Typography Scale */
  --space-unit: 1rem;
  --fs-base: 1rem;
  --fs-date: 1.125rem;
  --fs-location: 1rem;
  --fs-heading-mobile: 1.875rem;
  --fs-heading-desktop: 2.375rem;
  /* Modular Spacing Scale */
  --space-1: calc(var(--space-unit) * 0.25);    /* 4px */
  --space-2: calc(var(--space-unit) * 0.5);     /* 8px */
  --space-3: calc(var(--space-unit) * 0.75);    /* 12px */
  --space-4: var(--space-unit);                 /* 16px */
  --space-5: calc(var(--space-unit) * 1.25);    /* 20px */
  --space-6: calc(var(--space-unit) * 1.5);     /* 24px */
  --space-8: calc(var(--space-unit) * 2);       /* 32px */
  --space-10: calc(var(--space-unit) * 2.5);    /* 40px */
}

html {
  font-size: 16px;
  font-family: "Lato", serif;
  color: var(--primary-text-color);
}

body {
  background: radial-gradient(circle at center, var(--color-ivory) 30%, var(--color-blushing-pink) 100%);
}

html, body {
  margin: 0;
  padding: 0;
}

main {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-height: 100vh;
  padding: var(--space-4) 0;
}

p:last-child {
  margin-bottom: 0;
}

.std {
  background-image: linear-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0.15)), url("/img/SVG/kintsugi.svg?v=0.8.0");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.std__hero {
  text-align: center;
  margin: 0 var(--space-4) var(--space-4);
  position: relative;
  z-index: 1;
}

.std__us-mask {
  /* Button reset */
  background: none;
  padding: 0;
  font: inherit;
  outline: none;
  
  mask-image: none !important;
  -webkit-mask-image: none !important;
  border-radius: 50%;
  overflow: hidden;
  width: clamp(200px, 33vw, 450px);
  aspect-ratio: 1;
  margin: var(--space-8) auto 0;
  position: relative;
  border: clamp(0.1em, 0.75vw, 0.4em) solid var(--color-gold);
  box-shadow: inset 0 0 0.5em rgba(0,0,0,0.6), inset 0 0 1.5em rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.std__us-mask:hover {
  transform: scale(1.02);
  box-shadow: inset 0 0 0.5em rgba(0,0,0,0.6), inset 0 0 1.5em rgba(0,0,0,0.3), 0 0 1em rgba(0,0,0,0.2);
}

.std__us-mask:focus {
  outline: 2px solid var(--color-gold-darker);
  outline-offset: 2px;
}

.std__us-container {
  position: relative;
  margin: 0 auto;
  height: 100%;
  width: 100%;
}

.std__us-frame {
  display: none;
}

.std__us {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  margin: 0;
}


/* Shared text styling for main elements */
.std__names,
.std__date,
.std__date-sup,
.std__address {
  background-color: var(--std-text-inset-shadow-color);
  background-clip: text;
  color: var(--std-text-inset-color);
  text-shadow: var(--std-text-bevel-color) 0.02em 0.04em 0.01em;
  text-align: center;
}

.std__names {
  font-family: "Pacifico", cursive;
  font-size: var(--fs-heading-mobile);
  margin-top: var(--space-6);
  margin-bottom: var(--space-10);
  margin-left: 0;
  margin-right: 0;
  font-weight: lighter;
}

.std__names-ampersand {
  font-size: 0.7em;
  vertical-align: 0.15em;
}

.std__names-kerning {
  letter-spacing: -0.04em;
}

.std__names-s {
  margin-left: -0.26em;
}

.std__date {
  display: block;
  font-family: "Lato", serif;
  font-size: var(--fs-date);
  line-height: 1.4;
  margin: 0 0 var(--space-5);
  font-weight: 300;
}

.std__date-sup {
  font-family: "Lato", serif;
  font-weight: 300;
  text-shadow: var(--std-text-bevel-color) 0.03em 0.05em 0.02em;
}

.std__address {
  display: block;
  font-family: "Lato", serif;
  font-size: var(--fs-location);
  line-height: 1.5;
  font-weight: normal;
}

.std__city-state {
  font-size: 1em;
}


@media (max-width: 360px) {
  .std__names {
    letter-spacing: 0.02em;
  }
}

@media (min-width: 700px) {
  .std__names {
    font-size: var(--fs-heading-desktop);
  }
}

@media (min-width: 900px) {
  .std {
    background-size: cover;
    background-repeat: no-repeat;
    outline: 1px solid var(--std-outline-color);
  }
}

@media only screen and (max-width: 900px) {
  .std {
    font-size: 0.75em;
    background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)), url("/img/SVG/kintsugi.svg?v=0.7.0");
  }
}

@media only screen and (max-width: 700px) {
  .std {
    font-size: 0.7em;
    background-image: linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25)), url("/img/SVG/kintsugi.svg?v=0.7.0");
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.lightbox__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.lightbox__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1001;
}

.lightbox__close {
  position: absolute;
  top: calc(-2rem + var(--space-4) * -1);
  right: 0;
  background: none;
  border: none;
  color: var(--std-outline-color);
  font-size: var(--fs-heading-mobile);
  cursor: pointer;
  width: var(--space-10);
  height: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.lightbox__close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.lightbox__close:focus {
  outline: 2px solid var(--std-outline-color);
  background-color: rgba(255, 255, 255, 0.1);
}

.lightbox__image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
}

.lightbox__title {
  color: var(--std-outline-color);
  font-family: "Pacifico", cursive;
  font-size: 1.5rem;
  margin-top: var(--space-4);
  text-align: center;
}