/* Original artwork and palette retained. This file owns responsive behavior only. */
html { scroll-snap-type: y mandatory; scroll-behavior: smooth; }
body { overflow-wrap: break-word; }
body > section:not(#navigation) {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  position: relative;
  background-position-y: var(--parallax-y, 0px);
}
/* Tall chapters stay in normal document flow: native snap permits reading within them. */
body > section:not(#navigation):not(#cover):not(#footer) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 160px 0;
}
#the-proposal, #photos, #wedding-details, #thank-yow, #diy, #reviews { background-image: url('../images/bg.png'); }
#cover {
  background: #192420;
  /* Logo ends at 187px; leave 25px clearance and room for the slide indicators. */
  --hero-top-clearance: 212px;
  --hero-bottom-clearance: 70px;
}
#cover .carousel, #cover .carousel-inner, #cover .carousel-inner .item {
  height: 100vh;
  height: 100svh;
  min-height: 0;
}
#cover .carousel-inner .item {
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#cover .std-image {
  position: absolute;
  top: calc(50% + (var(--hero-top-clearance) - var(--hero-bottom-clearance)) / 2);
  left: 50%;
  width: auto;
  max-width: 65vw;
  height: auto;
  max-height: min(60%, calc(100% - var(--hero-top-clearance) - var(--hero-bottom-clearance)));
  transform: translate(-50%, calc(-50% + var(--parallax-y, 0px)));
}
#cover .carousel-indicators { bottom: 22px; }
body > .paint01 { pointer-events: none; z-index: 2; }
#how-we-met { background-image: url('../images/bg-our-story.png'); }
#how-we-met .how-we-met { max-height: none; }
/* Preserve the original locket lettering instead of using the ribbon sprite. */
#how-we-met .how-we-met-title {
  background: none;
  height: auto;
  text-indent: 0;
  margin: 20px 0 10px;
  max-width: none;
  font-family: 'abraham_lincolnregular';
  font-size: 32px;
  text-transform: uppercase;
  color: #f28a8b;
}
#navigation .nav > li > a { padding-left: 14px; padding-right: 14px; }
#navigation .nav > li.active > a {
  color: #b7e3ef;
  background: transparent;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
#footer {
  margin-top: 0;
  background-size: 100% auto;
  background-position: center top;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 150px 0;
}
#footer > .container { width: 100%; }
#footer img {
  width: min(776px, 90vw);
  height: auto;
  margin: 0 auto;
  transform: translateY(var(--parallax-y, 0px));
}
#footer .footer-text { position: absolute; bottom: 0; width: 100%; }
#footer .footer-text p { margin: 0; padding: 30px 20px; }
a:focus-visible, button:focus-visible { outline: 3px solid #ec9e88; outline-offset: 4px; }
.navbar-brand { pointer-events: none; }
.navbar-brand img { pointer-events: auto; max-width: 100%; }
.navbar-fixed-top.navbar-half img { width: 125px; }
.navbar-fixed-top.navbar-half li a { padding: 0 18px; }
.navbar-toggle { z-index: 3; }
.navbar-toggle .icon-bar { background: #fff; }
.supplier-reviews-container .container { width: min(970px, 100%); }
@media (max-width: 1100px) {
  #navigation .navbar-header { float: none; }
  #navigation .navbar-toggle { display: block; }
  #navigation .navbar-collapse.collapse { display: none !important; }
  #navigation .navbar-collapse.collapse.in { display: block !important; }
  #navigation .navbar-nav { float: none !important; margin: 7.5px -15px; }
  #navigation .navbar-nav > li { float: none; }
  #navigation .navbar-brand img { width: 125px; }
  #navigation .navbar-collapse { margin-top: 100px; background: #192420; max-height: calc(100svh - 100px); overflow-y: auto !important; }
  #navigation .navbar-half { height: auto; min-height: 110px; overflow: visible; }
  #navigation .navbar-half .navbar-collapse { margin-top: 100px; }
  #navigation .nav > li > a { padding: 10px 20px; min-height: 44px; }
  #cover { --hero-top-clearance: 132px; }
}
@media (max-width: 767px) {
  body > section:not(#navigation):not(#cover):not(#footer) { padding: 120px 0; }
  .navbar-main .navbar-brand img { width: 125px; }
  .navbar-main .navbar-collapse { margin-top: 100px; background: #192420; max-height: calc(100svh - 100px); overflow-y: auto; }
  .navbar-main.navbar-half { height: auto; min-height: 110px; overflow: visible; }
  .navbar-main.navbar-half .navbar-collapse { margin-top: 100px; }
  .navbar-main .nav li a, .navbar-main.navbar-half .nav li a { padding: 10px 20px; min-height: 44px; }
  #cover { --hero-top-clearance: 132px; }
  #cover .std-image { max-width: 62vw; max-height: min(48%, calc(100% - var(--hero-top-clearance) - var(--hero-bottom-clearance))); }
  h2 { max-width: 100%; }
  .how-we-met { padding: 70px 12% 80px; }
  .guest-information-container, .wedding-faqs-container { padding: 20px 15px; }
  .name-box h1, .name-box h1 small { font-size: 22px; }
  .item-masonry.w4 { width: 50%; }
  .nav-inside { margin-top: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: y proximity; }
  body > section { --parallax-y: 0px !important; }
  #cover .carousel-inner .item { transition: none; }
}

/* The thank-you section menu is navigation, not an empty full-screen chapter. */
.thank-yow-container .nav-inside {
  top: 150px;
  margin-top: 0;
  display: flex;
}
.thank-yow-container .nav-inside > li { display: block; flex: 1; width: auto; }
.thank-yow-container .nav-inside > li > a {
  color: #345d66;
  margin: 0;
  padding: 18px 10px;
}
.thank-yow-container .nav-inside > li > a:hover,
.thank-yow-container .nav-inside > li > a:focus-visible {
  color: #25434a;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.thank-yow-container #videos,
.thank-yow-container #suppliers,
.thank-yow-container #diy { padding: 250px 0 70px; }
.thank-yow-container #videos { background-image: url('../images/bg.png'); }
.thank-yow-container #videos .deming-heading span {
  background: url('../images/bg.png');
  padding: 0 15px;
}
.thank-yow-container section:not(#navigation):not(#footer) a { color: #345d66; }
.thank-yow-container .sde-video-link { margin: 18px 0 0; }
.thank-yow-container .sde-video-link a { text-decoration: underline; text-underline-offset: 3px; }
.thank-yow-container #navigation .nav > li > a { color: #593c32; }
.thank-yow-container #navigation .nav > li > a:hover,
.thank-yow-container #navigation .nav > li.active > a { color: #25434a; }
@media (max-width: 1100px) {
  .thank-yow-container .nav-inside { top: 110px; }
  .thank-yow-container #videos,
  .thank-yow-container #suppliers,
  .thank-yow-container #diy { padding-top: 210px; }
  /* The open main menu has a dark surface. */
  .thank-yow-container #navigation .nav > li > a { color: #fff; }
  .thank-yow-container #navigation .nav > li > a:hover,
  .thank-yow-container #navigation .nav > li.active > a { color: #b7e3ef; }
}
body.thank-yow-container > section:not(#navigation):not(#cover):not(#footer) {
  padding: 250px 0 70px;
}
@media (max-width: 1100px) {
  body.thank-yow-container > section:not(#navigation):not(#cover):not(#footer) { padding-top: 210px; }
}
@media (max-width: 767px) {
  .thank-yow-container > section > .container { width: 100%; min-width: 0; }
}
/* Bootstrap 3.1 predates these responsive embed helpers used by the original HTML. */
.thank-yow-container .embed-responsive {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.thank-yow-container .embed-responsive > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}