/* Shared pieces of both sites, the guest site's page background, and the main column. */
.guest-site {
  /* The card lies on lavender linen, lit from the upper left: brighter there, falling off
     toward the far corner. The weave is a photographed tile made seamless (546 × 525, shown at
     half size so it's sharp on high-density screens); its average colour shows while it loads. */
  background:
    radial-gradient(ellipse 80% 70% at 22% 12%, #fffaff40, #fffaff00 70%),
    radial-gradient(ellipse 120% 100% at 45% 40%, #39113000 55%, #3911301c 100%),
    url('/textures/lavender-linen.jpg') 0 0 / 273px 262.5px,
    #c9b3c9;
  /* A column, so the home page's main can take the rest of the screen and centre the card. */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* Printed type: the ink is masked by its own grain so the paper shows through it, and a faint
   halo of the same colour reads as ink spreading into the fibres. no-clip keeps glyphs that
   overhang a tight line box, like the names, from being cut off at the box edge. */
.brand,
.detail__title,
.page-section__title,
.rsvp__title {
  -webkit-mask: url('/textures/ink-grain.webp') 0 0 / 320px 320px;
  mask: url('/textures/ink-grain.webp') 0 0 / 320px 320px;
  -webkit-mask-clip: no-clip;
  mask-clip: no-clip;
  text-shadow: 0 0 0.6px #390d2b40;
}

.skip-link {
  position: absolute;
  left: -10000px;
}
.skip-link:focus {
  left: 15px;
  top: 10px;
  background: var(--surface);
  padding: 12px;
  z-index: 20;
}

.brand {
  font: 38px/0.8 var(--serif);
  letter-spacing: -4px;
  text-decoration: none;
}
.brand__amp {
  font-style: italic;
  font-size: 0.8em;
  color: #a14c26;
  padding: 0 2px;
}

.star {
  display: inline-block;
  font-family: var(--text);
  font-weight: 400;
  line-height: 1;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  line-height: 1.6;
  text-transform: uppercase;
}
.eyebrow--strong {
  font-weight: 600;
  letter-spacing: 2px;
}

.prose {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.text-link {
  display: inline-block;
  padding: 10px 0;
}

/* A link styled as a button. */
.button {
  cursor: pointer;
  background: var(--ink);
  color: #fcf6ff;
  border: 1px solid var(--ink);
  padding: 13px 20px;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
}

.pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  min-height: 52px;
  border-radius: 99px;
  padding: 14px 27px;
  text-decoration: none;
  font: 16px var(--text);
  letter-spacing: 0.1em;
  border: 1px solid var(--ink);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.pill--primary {
  background: var(--red);
  border-color: var(--red);
  color: var(--ink);
}
.pill--primary:hover {
  background: #ff9e51;
  border-color: #ff9e51;
  transform: translateY(-2px);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 34px 5.1vw 16px;
  width: 100%;
  max-width: 1700px;
  margin-inline: auto;
  min-height: 99px;
}

.site-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1700px;
  margin-inline: auto;
  padding: 14px 5.1vw 24px;
}
.site-main--page {
  padding-top: 65px;
  padding-bottom: 65px;
  min-height: 75vh;
}

/* Links in the bar keep a full-size tap target despite the small type. */
.preview-bar__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -14px 0;
}
.preview-bar {
  width: 100%;
  max-width: 1500px;
  margin: 10px auto;
  padding: 15px 5vw;
  background: var(--surface);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font:
    13px Arial,
    sans-serif;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .site-header,
  .site-main {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .pill {
    font-size: 13px;
    padding: 13px 19px;
    gap: 13px;
  }
}

@media (max-width: 760px) {
  .pill {
    min-height: 46px;
    padding: 12px 24px;
    font-size: 13px;
    gap: 20px;
  }
  .site-header {
    padding: 20px 6vw 10px;
    min-height: 70px;
  }
  .site-main {
    padding: 8px 7vw 20px;
  }
  .site-main--page {
    padding-top: 35px;
    padding-bottom: 45px;
  }
  .preview-bar {
    font-size: 11px;
    padding: 12px 6vw;
  }
}

@media (max-width: 760px) and (max-height: 760px) {
  .site-header {
    min-height: 60px;
    padding-top: 14px;
  }
}

/* A phone turned sideways has little height to spare, so the header gets out of the way. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  .site-header {
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 4px;
  }
  .site-main {
    padding-top: 4px;
    padding-bottom: 10px;
  }
}